iframe#userpilot-nps {
  width: 900px;
  max-width: 100%;
  right: 0px;
  margin: 0px auto;
  opacity: 1 !important;
}

/* NPS Mobile */
@media (max-width: 900px) {
  iframe#userpilot-nps {
      width: 100%;
  }
}

iframe#userpilot-resource-centre-frame {
  width: 0px;
  height: 0px;
}

div#userpilotContent[key="1908012931"]:not(.preview) {
  border: 0px;
  margin: 0px;
  padding: 0px;
  position: absolute;
  line-height: 18px;
  -webkit-transition: none;
  transition: none;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 2147483638;
  pointer-events: none;
  outline: none !important;
  background: none !important;
  --sidebar-width: 0px;
  direction: ltr;
  display: block;
}

div#userpilotContent[key="1908012931"] * {
  -webkit-transition: none;
  transition: none;
  direction: ltr;
}

#userpilotContent[key="1908012931"] .conv-cont, #userpilotContent[key="1908012931"] .conv-backdrop-cont {
  z-index: 999999999;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  transition: opacity 0.1s, z-index 0s, visibility 0s;
}

#userpilotContent[key="1908012931"] .conv-cont, #userpilotContent[key="1908012931"] .conv-backdrop-cont {
  z-index: 999999999;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  transition: opacity 0.1s, z-index 0s, visibility 0s;
}

#userpilotContent[key="1908012931"] .userpilot .conv-cont {
  z-index: 2147483000;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

#userpilotContent[key="1908012931"] .conv-cont {
  background: none;
}

#userpilotContent[key="1908012931"] .canv {
  position: absolute;
  top: 0;
  box-shadow: inset 0 0 0 0px #ffffff, inset 0 0 15px rgb(208, 208, 208);
  background: none !important;
  display: flex;
  border: 10000px solid rgba(255, 255, 255, .56);
  margin-left: -10000px;
  margin-top: -10000px;
  padding: 150px;
  opacity: 0;
  transition: opacity 0.2s, padding 0.2s;
  border-radius: 10006px
}

#userpilotContent[key="1908012931"] .userpilot .canv {
  position: fixed;
  top: 0;
  background: none;
  display: flex;
  border: 10000px solid rgba(255, 255, 255, .7);
  margin-left: -10000px;
  margin-top: -10000px;
  padding: 150px;
  opacity: 0;
  border-radius: 10006px
}

#userpilotContent[key="1908012931"] .canv.userpilot-canv-hidden {
  opacity: 0 !important
}

#userpilotContent[key="1908012931"] .userpilot-soft-focus .canv {
  border: none
}

#userpilotContent[key="1908012931"] .conv-cont[userpilot-hidden] .up-userpilot-mmx-part{
  pointer-events: none !important;
}

#userpilotContent[key="1908012931"] .up-userpilot-mmx-part {
  position: absolute;
  z-index: 1 !important;
  background: none;
}

#userpilotContent[key="1908012931"] [up-backdrop="0"] {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

#userpilotContent[key="1908012931"] .conv-cont[backdrop-overlay="1"] .up-userpilot-mmx-part {
  width: 100% !important;
  height: 100% !important;
  top: 0px !important;
  left: 0px !important;
}

#userpilotContent[key="1908012931"] .conv-cont.allow-scroll .up-userpilot-mmx-part {
  pointer-events: none;
}

div#userpilotContent[key="1908012931"]>*, div#userpilotContent[key="1908012931"]>*:not(.userpilot-hotspot-container)>*:not(.userpilot-backdrop) {
  pointer-events: all;
}

#userpilotContent[key="1908012931"] .userpilot-mmx-cursor {
  position: fixed;
  width: 14px;
  -webkit-transition: all 1.5s;
  transition: all 1.5s;
  pointer-events: none
}
#userpilotContent[key="1908012931"] .userpilot-mmx-cursor * {
  pointer-events: none !important;
}
#userpilotContent[key="1908012931"] .up-t-pluse {
  position: absolute;
  width: 14px;
  height: 14px;
  border: none;
  border-radius: 100%;
  color: gainsboro;
  background: gainsboro
}
#userpilotContent[key="1908012931"]:not([version="0.1"]) .up-t-pluse {
  width: 10px;
  height: 10px;
  pointer-events: none !important;
}
#userpilotContent[key="1908012931"] .up-t-pluse:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: -3px;
  top: -3px;
  background-color: transparent;
  border-radius: 50%;
  border: 7px solid;
  border-color: inherit;
  -webkit-animation: userpilotActive 2s infinite linear;
  animation: userpilotActive 2s infinite linear
}
#userpilotContent[key="1908012931"]:not([version="0.1"]) .up-t-pluse:before {
  height: 18px;
  width: 18px;
  left: -4px;
  top: -4px;
  border: 0px;
  background: inherit;
  -webkit-animation: userpilot-tooltip-pulse 2s infinite linear;
  animation: userpilot-tooltip-pulse 2s infinite linear
}
@keyframes userpilotActive {
  0% {
    -webkit-transform: scale(.1);
    border-color: inherit;
    opacity: 1
  }

  30% {
    -webkit-transform: scale(1);
    border: 5px solid;
    border-color: inherit;
    opacity: 1
  }

  40% {
    -webkit-transform: scale(1.3);
    border: 0 solid;
    border-color: inherit
  }

  100% {
    border: 0 solid;
    border-color: inherit
  }
}

@-webkit-keyframes active {
  0% {
    -webkit-transform: scale(.1);
    border-color: inherit;
    opacity: 1
  }

  30% {
    -webkit-transform: scale(1);
    border: 5px solid;
    border-color: inherit;
    opacity: 1
  }

  40% {
    -webkit-transform: scale(1.3);
    border: 0 solid;
    border-color: inherit
  }

  100% {
    border: 0 solid;
    border-color: inherit
  }
}

#userpilotContent[key="1908012931"] .userpilot-ripple {
  position: absolute;
  pointer-events: none;
  width: 0px;
  height: 30px;
  border: none;
  border-radius: 100%;
  left: 50%;
  top: 50%;
}
#userpilotContent[key="1908012931"]:not([version="0.1"]) .userpilot-ripple {
  height: 18px;
  width: 18px;
  background-color: transparent !important;
}
#userpilotContent[key="1908012931"] .userpilot-ripple:before {
  position: absolute;
  content: "";
  height: 30px;
  width: 30px;
  left: 0px;
  top: 0px;
  background-color: transparent;
  border-radius: 50%;
  background: inherit;
  -webkit-animation: userpilotActive 2s infinite linear;
  animation: userpilotActive 2s infinite linear;
  border: 10px solid;
  border-color: inherit;
  box-sizing: border-box;
}
#userpilotContent[key="1908012931"]:not([version="0.1"]) .userpilot-ripple:before {
  height: 18px;
  width: 18px;
  left: -1px;
  top: -1px;
  -webkit-animation: userpilot-tooltip-pulse 2s infinite linear;
  animation: userpilot-tooltip-pulse 2s infinite linear;
}
@-webkit-keyframes userpilot-tooltip-pulse {
  0%,
  100% {
    -webkit-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0.2;
  }

  50% {
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
    opacity: 0.3;
  }
}

@keyframes userpilot-tooltip-pulse {
  0%,
  100% {
    -webkit-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0.2;
  }

  50% {
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
    opacity: 0.3;
  }
}

#userpilotContent[key="1908012931"] .userpilot-ripple:after {
  position: absolute;
  content: "";
  height: 10px;
  width: 10px;
  left: 10px;
  top: 10px;
  background-color: transparent;
  border-radius: 50%;
  background: inherit;
  -webkit-animation: userpilot_active_after 2s infinite linear;
  animation: userpilot_active_after 2s infinite linear;
  box-sizing: border-box;
  background: currentColor;
}
#userpilotContent[key="1908012931"]:not([version="0.1"]) .userpilot-ripple:after {
  height: 10px;
  width: 10px;
  left: 4px;
  top: 4px;
  animation: none;
}
@keyframes userpilot_active_after {
  0% {
    -webkit-transform: scale(.1);
    opacity: 1
  }

  20% {
    opacity: 1;
    -webkit-transform: scale(1)
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(5)
  }
}

@keyframes userpilotActive {
  0% {
    -webkit-transform: scale(.1);
    opacity: 1;
    border-color: inherit;
  }

  20% {
    opacity: 1;
    -webkit-transform: scale(1.5);
    border-color: inherit;
  }

  30% {
    background: none;
    border: 0 solid;
    border-color: inherit;
    opacity: 0
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(2.5);
    border-color: inherit;
  }
}


/* sonar animations */
#userpilotContent[key="1908012931"]:not([version="0.1"]) .up-t-pluse[animation="sonar"], 
#userpilotContent[key="1908012931"]:not([version="0.1"]) .userpilot-ripple[animation="sonar"] {
  background: none !important;
  animation: none;
}

#userpilotContent[key="1908012931"]:not([version="0.1"]) .up-t-pluse[animation="sonar"]::after, 
#userpilotContent[key="1908012931"]:not([version="0.1"]) .userpilot-ripple[animation="sonar"]::after {
  content: "";
  width: 9px;
  height: 9px;
  position: absolute;
  border-radius: 150px;
  animation: pulse-dot infinite 1.5s;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: currentColor;
}

#userpilotContent[key="1908012931"]:not([version="0.1"]) .up-t-pluse[animation="sonar"]::before,
#userpilotContent[key="1908012931"]:not([version="0.1"]) .userpilot-ripple[animation="sonar"]::before {
  left: 0px;
  top: 0px;
  animation: pulse-ring infinite 1.5s;
  border-style: solid;
  border-width: 4px;
  padding: 5px;
  background: none !important;
}

/* morph animation */
#userpilotContent[key="1908012931"]:not([version="0.1"]) .up-t-pluse[animation="morph"],
#userpilotContent[key="1908012931"]:not([version="0.1"]) .userpilot-ripple[animation="morph"] {
  background: none !important;
  animation: none;
  height: 18px;
  width: 18px;
  left: -4px;
  top: -4px;
}

#userpilotContent[key="1908012931"]:not([version="0.1"]) .up-t-pluse[animation="morph"]::before,
#userpilotContent[key="1908012931"]:not([version="0.1"]) .userpilot-ripple[animation="morph"]::before {
  left: 0;
  top: 0;
  content: "";
  width: 100%;
  height: 100%;
  background: currentColor;
  opacity: .6;
  position: absolute;
  border-radius: 50%;
  animation: morph 1s linear infinite;
  box-shadow: 0 0 5px 1px currentColor;
  border: 9px solid;
}

#userpilotContent[key="1908012931"]:not([version="0.1"]) .up-t-pluse[animation="morph"]::after,
#userpilotContent[key="1908012931"]:not([version="0.1"]) .userpilot-ripple[animation="morph"]::after {
  background: currentColor;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  height: 50%;
  border-radius: 50%;
  content: "";
  display: block;
}

/* target animation */
#userpilotContent[key="1908012931"]:not([version="0.1"]) .up-t-pluse[animation="target"],
#userpilotContent[key="1908012931"]:not([version="0.1"]) .userpilot-ripple[animation="target"]{
  height: 18px;
  width: 18px;
  box-shadow: 0 0 4px 2px currentColor;
  opacity: 1;
  animation: target 2s linear infinite;
  background: currentColor !important;
}

#userpilotContent[key="1908012931"]:not([version="0.1"]) .up-t-pluse[animation="target"]::before,
#userpilotContent[key="1908012931"]:not([version="0.1"]) .userpilot-ripple[animation="target"]::before {
  content: "";
  display: block;
  position: absolute;
  top: 100%;
  left: 100%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 10px 0 0;
  border-color: currentColor transparent transparent transparent;
  opacity: .6;
  background: none;
  animation: none;
  border-radius: 0;
}

#userpilotContent[key="1908012931"]:not([version="0.1"]) .up-t-pluse[animation="target"]::after,
#userpilotContent[key="1908012931"]:not([version="0.1"]) .userpilot-ripple[animation="target"]::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 100%;
  right: 100%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 10px 10px;
  border-color: transparent transparent currentColor transparent;
  opacity: .6;
  top: initial;
  left: initial;
  border-radius: initial;
  background: none;
}

 /* egg animations */
 #userpilotContent[key="1908012931"]:not([version="0.1"]) .up-t-pluse[animation="egg"],
 #userpilotContent[key="1908012931"]:not([version="0.1"]) .userpilot-ripple[animation="egg"]{
  width: 18px;
  height: 18px;
  border-radius: 50%;
  position: relative;
  box-shadow: inset 0 0 6px 4px currentColor;
  animation: egg 600ms linear infinite;
  animation-direction: alternate;
  background: none !important;
}

#userpilotContent[key="1908012931"]:not([version="0.1"]) .up-t-pluse[animation="egg"]::before,
#userpilotContent[key="1908012931"]:not([version="0.1"]) .userpilot-ripple[animation="egg"]::before {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  content: "";
  display: block;
  background: transparent;
  border: 1px solid currentColor;
  animation: none;
}

#userpilotContent[key="1908012931"]:not([version="0.1"]) .up-t-pluse[animation="egg"]::after,
#userpilotContent[key="1908012931"]:not([version="0.1"]) .userpilot-ripple[animation="egg"]::after {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  content: "";
  display: block;
  background: currentColor;
  opacity: .6;
}


@keyframes userpilotActive {
  0% {
    -webkit-transform: scale(.1);
    border-color: inherit;
    opacity: 1
  }

  30% {
    -webkit-transform: scale(1);
    border: 5px solid;
    border-color: inherit;
    opacity: 1
  }

  40% {
    -webkit-transform: scale(1.3);
    border: 0 solid;
    border-color: inherit
  }

  100% {
    border: 0 solid;
    border-color: inherit
  }
}

@-webkit-keyframes active {
  0% {
    -webkit-transform: scale(.1);
    border-color: inherit;
    opacity: 1
  }

  30% {
    -webkit-transform: scale(1);
    border: 5px solid;
    border-color: inherit;
    opacity: 1
  }

  40% {
    -webkit-transform: scale(1.3);
    border: 0 solid;
    border-color: inherit
  }

  100% {
    border: 0 solid;
    border-color: inherit
  }
}

@keyframes pulse-dot {
  0% {
    transform: scale(1, 1) translate(-50%, -50%);
  }

  30% {
    transform: scale(1.25, 1.25) translate(-40%, -40%);
  }

  100% {
    transform: scale(1, 1) translate(-50%, -50%);
  }
}

@keyframes pulse-ring {
  0% {
    transform: scale(1, 1);
    opacity: 0;
  }

  25% {
    opacity: .5;
  }

  100% {
    transform: scale(1.8, 1.8);
    opacity: 0;
  }
}

@keyframes morph {
  0% {
    transform: rotateZ(0);
    border-radius: 20%;
  }

  50% {
    transform: rotateZ(45deg);
    border-radius: 50%;
  }

  100% {
    transform: rotateZ(90deg);
    border-radius: 20%;
  }
}

@keyframes target {
  0% {
    transform: rotateZ(0) scale(0.6);
  }

  50% {
    transform: rotateZ(180deg) scale(1);
  }

  100% {
    transform: rotateZ(360deg) scale(0.6);
  }
}

@keyframes egg {
  from {
    box-shadow: inset 0 0 8px 3px currentColor;
  }

  to {
    box-shadow: inset 0 0 4px 1px currentColor;
  }
}