@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.Spinner {
  position: relative;
  display: inline-block;
  width: 1em;
  height: 1em;
  font-size: 20px; }
  .Spinner--color-dark .Spinner__blade {
    animation: spinner-fade-dark 1s infinite linear; }
    .Spinner--color-dark .Spinner__blade:nth-child(1) {
      animation-delay: 0s;
      transform: rotate(0deg); }
    .Spinner--color-dark .Spinner__blade:nth-child(2) {
      animation-delay: 0.125s;
      transform: rotate(45deg); }
    .Spinner--color-dark .Spinner__blade:nth-child(3) {
      animation-delay: 0.25s;
      transform: rotate(90deg); }
    .Spinner--color-dark .Spinner__blade:nth-child(4) {
      animation-delay: 0.375s;
      transform: rotate(135deg); }
    .Spinner--color-dark .Spinner__blade:nth-child(5) {
      animation-delay: 0.5s;
      transform: rotate(180deg); }
    .Spinner--color-dark .Spinner__blade:nth-child(6) {
      animation-delay: 0.625s;
      transform: rotate(225deg); }
    .Spinner--color-dark .Spinner__blade:nth-child(7) {
      animation-delay: 0.75s;
      transform: rotate(270deg); }
    .Spinner--color-dark .Spinner__blade:nth-child(8) {
      animation-delay: 0.875s;
      transform: rotate(315deg); }
  .Spinner--color-light .Spinner__blade {
    animation: spinner-fade-light 1s infinite linear; }
    .Spinner--color-light .Spinner__blade:nth-child(1) {
      animation-delay: 0s;
      transform: rotate(0deg); }
    .Spinner--color-light .Spinner__blade:nth-child(2) {
      animation-delay: 0.125s;
      transform: rotate(45deg); }
    .Spinner--color-light .Spinner__blade:nth-child(3) {
      animation-delay: 0.25s;
      transform: rotate(90deg); }
    .Spinner--color-light .Spinner__blade:nth-child(4) {
      animation-delay: 0.375s;
      transform: rotate(135deg); }
    .Spinner--color-light .Spinner__blade:nth-child(5) {
      animation-delay: 0.5s;
      transform: rotate(180deg); }
    .Spinner--color-light .Spinner__blade:nth-child(6) {
      animation-delay: 0.625s;
      transform: rotate(225deg); }
    .Spinner--color-light .Spinner__blade:nth-child(7) {
      animation-delay: 0.75s;
      transform: rotate(270deg); }
    .Spinner--color-light .Spinner__blade:nth-child(8) {
      animation-delay: 0.875s;
      transform: rotate(315deg); }
  .Spinner--size-small {
    font-size: 16px; }
  .Spinner--size-large {
    font-size: 24px; }
  .Spinner__blade {
    font-size: inherit;
    position: absolute;
    left: 0.46em;
    bottom: 0;
    width: 0.1em;
    height: 0.3em;
    border-radius: 0.0555em;
    background-color: transparent;
    transform-origin: center -0.2em; }

@keyframes spinner-fade-light {
  0% {
    background-color: #FFFFFF; }
  100% {
    background-color: transparent; } }

@keyframes spinner-fade-dark {
  0% {
    background-color: #656568; }
  100% {
    background-color: transparent; } }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.SvgIcon__custom {
  -webkit-transition: all 120ms ease;
  transition: all 120ms ease; }
  .SvgIcon__custom:active {
    color: #101820 !important; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.Button {
  margin: 0;
  background-color: #0975EF;
  color: #FFFFFF;
  border-radius: 6px;
  height: 32px;
  min-width: 32px;
  text-transform: capitalize;
  outline: none;
  user-select: none;
  overflow: hidden;
  cursor: pointer;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-weight: 500;
  flex-shrink: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Apple Color Emoji", "Segoe UI", "Segoe UI Emoji", "Segoe UI Symbol", Roboto, Helvetica, Arial, sans-serif;
  font-size: 13px;
  transition: all 180ms ease;
  line-height: 30px;
  box-shadow: 0 1px 2px 0 rgba(2, 14, 29, 0.08);
  border: solid 1px rgba(16, 24, 32, 0.06); }
  .Button:active {
    background-color: #005DC7;
    box-shadow: 0 1px 2px 0 rgba(2, 14, 29, 0);
    border-color: transparent; }
  .Button__text {
    display: flex;
    align-items: center;
    color: inherit;
    font-size: inherit;
    pointer-events: none; }
  .Button--disabled {
    background-color: #C4C4CA;
    pointer-events: none;
    box-shadow: none;
    color: #FFFFFF;
    cursor: not-allowed;
    user-select: none; }
    .Button--disabled span, .Button--disabled svg {
      color: #FFFFFF; }
    .Button--disabled svg {
      fill: #FFFFFF; }
  .Button--disabled.Button--disabled-flat {
    background-color: #C4C4CA;
    color: #FFFFFF;
    border-color: transparent; }
    .Button--disabled.Button--disabled-flat span {
      color: #FFFFFF; }
  .Button--light, .Button--light-primary {
    background-color: #FFFFFF;
    box-shadow: 0 1px 2px 0 rgba(31, 34, 36, 0.04);
    border: 1px solid #E8E8EB;
    border-radius: 6px; }
    .Button--light:active, .Button--light-primary:active {
      background-color: #F3F3F5;
      border-color: transparent;
      box-shadow: 0 1px 2px 0 rgba(31, 34, 36, 0); }
  .Button--light {
    color: #3C3C3F; }
    .Button--light span, .Button--light svg {
      color: inherit; }
    .Button--light svg {
      fill: #3C3C3F; }
  .Button--light-primary span, .Button--light-primary svg {
    color: #0975EF; }
  .Button--light-primary svg {
    fill: #0975EF; }
  .Button--light.Button--disabled, .Button--light-primary.Button--disabled {
    box-shadow: none; }
    .Button--light.Button--disabled span, .Button--light.Button--disabled svg, .Button--light-primary.Button--disabled span, .Button--light-primary.Button--disabled svg {
      color: #C4C4CA !important; }
  .Button--clear {
    background-color: transparent;
    color: #3C3C3F;
    box-shadow: none;
    border-color: transparent; }
    .Button--clear:active {
      background-color: transparent; }
  .Button--clear-with-border {
    border: 1px solid #FFFFFF; }
  .Button--glyph.Button--glyph {
    align-items: center;
    justify-content: center;
    padding-left: 8px; }
    .Button--glyph.Button--glyph svg {
      fill: currentColor;
      width: 24px;
      height: 24px;
      margin: auto; }
    .Button--glyph.Button--glyph--large-icon svg {
      width: 24px;
      height: 24px; }
  .Button--no-text.Button--no-text {
    padding: 0; }
  .Button--round {
    border-radius: 50%; }
  .Button--small {
    height: 24px;
    min-width: 24px;
    font-size: 13px;
    line-height: 13px;
    border-radius: 6px; }
    .Button--small svg {
      height: 18px !important;
      width: 18px !important; }
  .Button--x-small {
    height: 24px;
    min-width: 24px;
    font-size: 13px;
    line-height: 13px;
    border-radius: 6px; }
    .Button--x-small svg {
      height: 16px;
      width: 16px; }
  .Button--text {
    padding: 0 16px; }
  .Button--text .Button__text {
    margin: auto;
    justify-content: center; }
  .Button--text .Button__text--left {
    margin: unset;
    justify-content: left; }
  .Button--text .Button__text--center {
    margin: unset;
    justify-content: center; }
  .Button--text.Button--glyph svg, .Button--text.Button--loading svg {
    margin: 0 8px 0 0; }
  .Button--stretched {
    width: 100%; }
  .Button--second-glyph {
    margin: 0 -4px 0 8px !important; }
  .Button--link-like, .Button--link-like:hover, .Button--link-like:active {
    display: inline;
    border: none;
    color: #0975EF;
    padding: 0;
    margin: 0;
    background: none;
    height: auto;
    line-height: inherit;
    font-size: inherit;
    font-weight: inherit;
    box-shadow: none;
    text-transform: none; }
  .Button__loader {
    margin: 0 4px 0 -4px; }
  .Button svg {
    pointer-events: none;
    z-index: 1; }
  .Button:active .Button__active-background {
    visibility: visible; }
  .Button__active-background {
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: #E8E8EB;
    border-radius: 50%;
    height: 16px;
    width: 16px;
    transform: translate3d(-50%, -50%, 0);
    visibility: hidden;
    pointer-events: none; }

@charset "UTF-8"
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.Alerts {
  width: 100%;
  height: 200px;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 10000000;
  transition: opacity 180ms ease;
  pointer-events: none;
  background-image: linear-gradient(-180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.16) 100%); }
  .Alerts--hidden {
    opacity: 0; }
  .Alerts__box {
    pointer-events: all;
    position: absolute;
    right: 100px;
    bottom: 15px;
    width: 390px;
    max-height: 120px;
    background-color: #FFFFFF;
    box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1), 0px 0px 15px 0px rgba(0, 0, 0, 0.07);
    border-radius: 8px;
    transition: all 180ms ease;
    transform: translatey(0px);
    padding: 8px;
    display: flex; }
    .Alerts__box--hidden {
      transform: translatey(120px); }
    .Alerts__box__icon-container {
      flex: 1;
      margin-right: 9px; }
      .Alerts__box__icon-container__icon {
        width: 100%; }
    .Alerts__box__text {
      flex: 9; }
      .Alerts__box__text__message {
        max-height: 72px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        font-size: 14px;
        margin-bottom: 8px;
        word-break: break-word; }
  .Alerts__box__text__buttons__button {
    margin-right: 8px; }

.Loading {
  display: flex;
  min-height: 100%;
  width: 100%;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  flex: 1; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.Dialog {
  width: 248px;
  border-radius: 8px;
  background-color: #FFFFFF;
  box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.08);
  border: solid 1px #E8E8EB;
  padding: 8px;
  z-index: 999999;
  position: absolute;
  margin-top: 8px; }
  .Dialog__title {
    text-align: center;
    font-size: 11px;
    line-height: 16px;
    color: #656568;
    font-weight: 500;
    margin-bottom: 4px; }
  .Dialog__close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.Tooltip {
  width: 20px;
  height: 20px;
  margin: 0 4px;
  background-color: transparent;
  color: #C4C4CA;
  transition: color 120ms ease;
  user-select: none; }
  .Tooltip__blurb {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFFFFF;
    background: #101820;
    border-radius: 12px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 0 16px 0 rgba(0, 0, 0, 0.08);
    width: auto; }
    .Tooltip__blurb--right, .Tooltip__blurb--left {
      min-height: 52px; }
    .Tooltip__blurb--up, .Tooltip__blurb--down {
      min-height: 25px; }
  .Tooltip__blurb-image-container {
    display: block;
    background: white;
    border-radius: 8px;
    text-align: center;
    overflow: hidden; }
  .Tooltip__blurb-image {
    width: 100%;
    display: block; }
  .Tooltip__blurb-text {
    font-weight: 400;
    font-size: 12px;
    text-align: center;
    line-height: 14px;
    -webkit-font-smoothing: antialiased;
    margin: 0 8px;
    color: #FFFFFF; }
  .Tooltip__blurb-image-container + .Tooltip__blurb-text {
    margin-top: 8px; }
  .Tooltip__container {
    z-index: 10000000;
    pointer-events: none;
    position: absolute;
    min-width: 140px;
    max-width: 184px;
    transform: translateY(-9999px); }
    .Tooltip__container--clicked {
      transform: translateY(0);
      pointer-events: auto; }
  .Tooltip__animated-container {
    visibility: hidden;
    opacity: 0;
    transform: translateY(4px);
    transition: transform 120ms ease, opacity 120ms ease, visibility 0ms linear 0ms; }
  .Tooltip--clicked .Tooltip__animated-container,
  .Tooltip__container--clicked .Tooltip__animated-container {
    visibility: visible;
    opacity: 1;
    transform: translateY(0); }
  .Tooltip__blurb-content {
    display: inline-block;
    overflow: hidden;
    padding: 8px;
    width: max-content;
    word-wrap: break-word; }
  .Tooltip--no-icon {
    height: 100%;
    width: 100%;
    opacity: 0;
    position: absolute;
    left: 0; }
  .Tooltip--children {
    height: 100%;
    width: 100%; }
  .Tooltip--clicked {
    opacity: 1; }

.Tooltip:hover {
  color: #0975EF; }

.Tooltip--clicked, .Tooltip--clicked:hover {
  color: #0975EF; }

.Tooltip__icon {
  cursor: pointer;
  display: flex;
  align-items: center;
  height: 100%;
  outline: none; }
  .Tooltip__icon--no-icon {
    width: 100%;
    height: 100%; }

.Tooltip__icon svg {
  fill: currentColor;
  flex: 1;
  height: 100%; }

.Tooltip--Warning .Tooltip__icon svg {
  fill: #FB9804; }

.Tooltip--Warning.Tooltip--clicked .Tooltip__icon svg {
  fill: #FB9804; }

.Tooltip__dimple {
  width: 12px;
  height: 32px;
  position: absolute;
  transform-origin: 0 0; }

.Tooltip__dimple--up {
  transform: rotate(-90deg) translateY(-50%);
  left: 50%; }

.Tooltip__dimple--down {
  transform: rotate(90deg) translateY(-50%);
  top: 100%;
  left: 50%; }

.Tooltip__dimple--right {
  transform: rotate(0deg) translateY(-50%);
  top: 50%;
  left: 100%; }

.Tooltip__dimple--left {
  transform: rotate(180deg) translateY(-50%);
  top: 50%; }

.Tooltip--TL .Tooltip__dimple--left {
  top: 24px; }

.Tooltip--TR .Tooltip__dimple--right {
  top: 26px; }

.Tooltip--BL .Tooltip__dimple--left {
  top: auto;
  bottom: 10px; }

.Tooltip--BR .Tooltip__dimple--right {
  top: auto;
  bottom: 10px; }

.Tooltip__link {
  display: block;
  font-size: 12px;
  color: #FFFFFF;
  border-radius: 6px;
  background-color: #656568;
  padding: 6px;
  margin-top: 8px;
  text-decoration: none;
  text-align: center;
  position: relative;
  transition: 180ms all ease;
  line-height: normal; }

.Tooltip__link:active {
  background-color: rgba(255, 255, 255, 0.32) !important; }

.Tooltip__link:active .OpenIcon {
  color: #FFFFFF;
  opacity: 1; }

.Tooltip__link .OpenIcon {
  position: absolute;
  right: 6px;
  top: 50%;
  margin-top: -6px;
  color: #F3F3F5;
  fill: currentColor;
  transition: 180ms all ease; }

.TooltipRequired, .TooltipRequired:hover, .TooltipRequired__icon svg {
  color: #FB9804;
  fill: currentColor; }

.Tooltip--copied {
  color: #656568; }
  .Tooltip--copied.Tooltip--clicked {
    color: #0975EF; }
  .Tooltip--copied.Tooltip__container {
    width: max-content;
    min-width: auto; }
  .Tooltip--copied .Tooltip__container__blurb {
    min-height: auto;
    padding: 0 8px; }
  .Tooltip--copied .Tooltip__dimple--up {
    left: 54%; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.MultilingualInputLanguagesDialog {
  fill: #3C3C3F;
  -webkit-text-fill-color: #3C3C3F; }
  .MultilingualInputLanguagesDialog__languages {
    margin-bottom: 8px;
    padding: 8px 0px; }
    .MultilingualInputLanguagesDialog__languages__title {
      font-size: 12px;
      color: #ADADB3;
      padding-left: 12px;
      padding-bottom: 5px; }
    .MultilingualInputLanguagesDialog__languages__enabled-languages {
      margin-bottom: 8px; }
    .MultilingualInputLanguagesDialog__languages__language-button {
      width: 85%;
      height: 32px !important;
      color: #101820 !important;
      border-radius: 0px !important;
      transition: background 180ms ease;
      text-align: left; }
      .MultilingualInputLanguagesDialog__languages__language-button__delete {
        right: 5px;
        opacity: 0;
        position: absolute;
        z-index: 1;
        background-color: transition; }
        .MultilingualInputLanguagesDialog__languages__language-button__delete:hover {
          opacity: 1;
          background-color: inherit; }
      .MultilingualInputLanguagesDialog__languages__language-button__active, .MultilingualInputLanguagesDialog__languages__language-button__inactive, .MultilingualInputLanguagesDialog__languages__language-button__invalid, .MultilingualInputLanguagesDialog__languages__language-button__add {
        width: 22px;
        height: 22px;
        background-color: transition; }
      .MultilingualInputLanguagesDialog__languages__language-button--container {
        display: flex;
        align-items: center;
        height: 32px;
        transition: background 180ms ease;
        cursor: pointer;
        outline: none; }
        .MultilingualInputLanguagesDialog__languages__language-button--container:hover {
          background-color: #F3F3F5; }
      .MultilingualInputLanguagesDialog__languages__language-button--selected {
        fill: #0975EF;
        -webkit-text-fill-color: #0975EF; }
      .MultilingualInputLanguagesDialog__languages__language-button:active {
        background-color: #E8E8EB !important; }
      .MultilingualInputLanguagesDialog__languages__language-button:hover {
        background-color: #F3F3F5; }
  .MultilingualInputLanguagesDialog__description {
    padding: 0px 4px 4px 4px; }
  .MultilingualInputLanguagesDialog__link-block {
    text-align: center;
    font-size: 12px !important; }
    .MultilingualInputLanguagesDialog__link-block__link {
      display: block;
      padding-top: 5px;
      text-decoration: underline;
      font-size: 12px !important; }
      .MultilingualInputLanguagesDialog__link-block__link:hover {
        text-decoration: underline; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.MultilingualInputLanguageButton {
  position: relative;
  margin-left: auto; }
  .MultilingualInputLanguageButton--hidden {
    display: none; }
  .MultilingualInputLanguageButton__add {
    background-color: #656568 !important; }
    .MultilingualInputLanguageButton__add:active {
      background-color: #101820 !important; }
  .MultilingualInputLanguageButton--invalid-tooltip {
    width: 18px;
    height: 18px;
    margin: 0;
    display: inline-block;
    position: absolute;
    top: 3px;
    left: -14px;
    z-index: 99999; }
  .MultilingualInputLanguageButton__current-language {
    box-shadow: none;
    border: none;
    font-size: 14px; }
    .MultilingualInputLanguageButton__current-language--active {
      fill: #0975EF;
      -webkit-text-fill-color: #0975EF; }
  .MultilingualInputLanguageButton__dialog {
    padding: 0 !important;
    margin-top: 4px;
    right: -4px; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.MultilingualInputLanguages {
  display: flex !important;
  height: 24px; }
  .MultilingualInputLanguages__languages {
    flex: 1;
    overflow-x: hidden; }
    .MultilingualInputLanguages__languages__scroller {
      padding-bottom: 16px;
      overflow-x: scroll; }
    .MultilingualInputLanguages__languages::after {
      content: '';
      position: absolute;
      right: 0;
      top: 0;
      height: 100%;
      width: 30px;
      background: linear-gradient(to right, rgba(255, 255, 255, 0), #F3F3F5);
      pointer-events: none; }
    .MultilingualInputLanguages__languages__languages-list {
      display: flex; }
    .MultilingualInputLanguages__languages__language-button {
      color: #656568 !important; }
      .MultilingualInputLanguages__languages__language-button--active {
        background-color: #E8E8EB !important; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.DebouncedInput {
  font-size: 14px; }
  .DebouncedInput__character-counter {
    right: 7px;
    bottom: 6px;
    position: absolute;
    font-size: 10px;
    font-weight: 600;
    color: #656568; }
    .DebouncedInput__character-counter--invalid {
      color: #FB9804; }
  .DebouncedInput:disabled.DebouncedInput:disabled {
    color: #C4C4CA;
    background-color: #FFFFFF;
    border: 1px solid #F3F3F5;
    border-radius: 6px; }
  .DebouncedInput::placeholder {
    font-size: 14px; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.Tag {
  display: inline-flex;
  border-radius: 6px;
  background-color: #7379BF;
  padding: 0 8px;
  align-items: center;
  font-size: 14px;
  color: #FFFFFF;
  line-height: 14px;
  height: 24px;
  max-width: 100%; }
  .Tag--is-light {
    color: #101820; }
  .Tag--line {
    height: 8px;
    width: 40px; }
  .Tag--small {
    height: 16px;
    font-weight: 500;
    font-size: 12px;
    border-radius: 3px; }
    .Tag--small.Tag--icon {
      top: 2px; }
  .Tag__text {
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    line-height: 16px; }
    .Tag__text svg {
      right: 2px;
      top: 2px;
      padding-left: 1px; }
  .Tag--icon {
    background-color: #535358; }
    .Tag--icon .Tag__text {
      top: -2px; }
  .Tag__button {
    transform: translate3d(0, 0, 0);
    margin: 0 -4px 0 4px;
    opacity: 0.5; }
    .Tag__button:hover {
      opacity: 1; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.ResponseListItem {
  overflow: hidden;
  padding: 8px 16px 16px !important; }
  .ResponseListItem--flow-expanded {
    border-bottom: 5px solid #E8E8EB; }
  .ResponseListItem__tags {
    overflow: hidden; }
    .ResponseListItem__tags__tag {
      margin: 8px 8px 4px 0; }
      .ResponseListItem__tags__tag--selector-list {
        border: 0.5px solid rgba(0, 0, 0, 0.08);
        box-sizing: border-box;
        border-radius: 3px;
        height: 16px;
        font-size: 12px;
        font-weight: 500; }
  .ResponseListItem__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left; }
    .ResponseListItem__content__description {
      line-height: 16px;
      color: #535358 !important; }
      .ResponseListItem__content__description--sidebar {
        color: #656568 !important; }
  .ResponseListItem__label {
    color: #101820;
    display: flex;
    align-items: center;
    min-height: 23px;
    margin-right: 5px;
    margin-bottom: 4px; }
    .ResponseListItem__label--sidebar {
      color: inherit;
      margin-right: 0; }
    .ResponseListItem__label label {
      margin-right: 5px; }
    .ResponseListItem__label__status {
      flex: 1;
      align-items: left;
      color: #3C3C3F; }
  .ResponseListItem__label-new {
    margin-left: 8px; }
  .ResponseListItem__icon-bar {
    margin-left: auto;
    margin-right: -4px; }
  .ResponseListItem__icons {
    margin-bottom: auto;
    color: #656568; }
    .ResponseListItem__icons--sidebar {
      display: flex;
      align-items: center;
      justify-content: center; }
    .ResponseListItem__icons__icon {
      width: 20px;
      display: inline-block;
      margin-right: 0;
      fill: #FB9804;
      margin-top: 2px; }
      .ResponseListItem__icons__icon--sidebar {
        margin-top: 0;
        margin-right: 8px; }
        .ResponseListItem__icons__icon--sidebar--cloud {
          transform: translateY(2px); }
      .ResponseListItem__icons__icon:last-child {
        margin-right: 0; }
    .ResponseListItem__icons__button {
      transition: 0ms;
      opacity: 0.4; }
      .ResponseListItem__icons__button__expand-collapse {
        background: none;
        border: none;
        box-shadow: none;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
        min-width: 24px !important;
        height: 28px; }
        .ResponseListItem__icons__button__expand-collapse:active {
          background: none;
          box-shadow: 0 1px 2px 0 rgba(31, 34, 36, 0.04); }
        .ResponseListItem__icons__button__expand-collapse--expanded {
          opacity: 1; }
        .ResponseListItem__icons__button__expand-collapse svg {
          height: 14px !important;
          width: 14px !important; }
  .ResponseListItem:hover .ResponseListItem__icons__button {
    opacity: 1; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.InputSearch {
  position: relative; }
  .InputSearch__search-icon-container {
    height: 100%;
    position: absolute;
    top: 0;
    left: 8px;
    display: flex;
    align-items: center;
    opacity: 0;
    transition: opacity 150ms ease;
    pointer-events: none; }
    .InputSearch__search-icon-container__icon {
      height: 26px;
      width: 26px; }
  .InputSearch__input {
    padding-right: 32px !important; }
    .InputSearch__input--invalid {
      border: 1px solid #FB9804 !important; }
    .InputSearch__input:focus {
      padding-left: 40px; }
    .InputSearch__input--right-icon {
      padding-right: 32px !important; }
  .InputSearch__input:focus + .InputSearch__search-icon-container {
    opacity: 1; }
  .InputSearch__gradient {
    height: 100%;
    width: 36px;
    position: absolute;
    top: 0;
    right: 32px;
    background: linear-gradient(to right, rgba(243, 243, 245, 0), #f3f3f5);
    pointer-events: none;
    z-index: 90;
    transition: z-index 150ms steps(180, end); }
    .InputSearch__gradient--invalid {
      border-top: 2px solid #FB9804;
      border-bottom: 2px solid #FB9804; }
  .InputSearch__input:focus ~ .InputSearch__gradient {
    z-index: -90;
    transition: none !important; }
  .InputSearch__icon-container {
    height: 100%;
    position: absolute;
    top: 0;
    right: 8px;
    display: flex;
    align-items: center;
    transition: opacity 150ms ease;
    cursor: pointer;
    color: #656568;
    transition: all 180ms ease;
    padding-right: -40px; }
    .InputSearch__icon-container:active {
      color: #101820; }
    .InputSearch__icon-container--type-chevron {
      pointer-events: none; }
    .InputSearch__icon-container__icon {
      height: 20px;
      width: 20px; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.ResponseItem {
  width: 100%;
  min-height: 32px;
  background-color: #FFFFFF;
  border-radius: 6px;
  border: 1px solid #E8E8EB;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1; }
  .ResponseItem--questions {
    border: none;
    min-height: 30px; }
  .ResponseItem__empty {
    width: 100%;
    height: 30px;
    border-radius: 6px;
    font-size: 16px;
    display: flex;
    align-items: center;
    padding: 3px 8px;
    padding-left: 10px;
    color: #656568; }
    .ResponseItem__empty--questions {
      font-size: 14px;
      padding: 3px 10px 5px 8px; }
  .ResponseItem__label {
    min-height: 30px;
    width: 100%;
    display: flex;
    align-items: center;
    overflow: hidden; }
    .ResponseItem__label--questions {
      padding: 0px;
      align-items: unset;
      font-size: 14px; }
    .ResponseItem__label__title {
      vertical-align: middle;
      margin-right: 5px;
      padding: 6px 8px;
      font-size: 14px; }
      .ResponseItem__label__title--questions {
        padding: 0px;
        font-size: 14px; }
  .ResponseItem__tags {
    padding: 0px 8px 0px 16px;
    overflow: hidden;
    display: flex;
    align-items: center;
    height: auto; }
    .ResponseItem__tags__tag {
      margin: 0px 8px 8px 0;
      border: 0.5px solid rgba(0, 0, 0, 0.08);
      box-sizing: border-box;
      border-radius: 3px;
      height: 8px;
      width: 24px;
      font-size: 0px; }
      .ResponseItem__tags__tag--questions {
        border: none; }
    .ResponseItem__tags--questions {
      padding: 0px 16px 0px 8px; }
  .ResponseItem__wrapper {
    height: auto;
    width: 290px; }
    .ResponseItem__wrapper--questions {
      max-width: 225px; }
  .ResponseItem__delete {
    position: absolute;
    right: 8px;
    transition: opacity 180ms ease;
    opacity: 0; }
  .ResponseItem:hover .ResponseItem__delete {
    opacity: 1; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.ResponseSelector {
  width: 100%;
  overflow: hidden;
  pointer-events: all; }
  .ResponseSelector--questions {
    width: 255px;
    min-height: 32px; }
  .ResponseSelector__UI {
    width: 100%;
    border-radius: 8px;
    background-color: #FFFFFF;
    padding: 2px 34px 2px 2px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: background-color 0.25s, box-shadow 0.25s;
    -webkit-transition: background-color 0.25s, box-shadow 0.25s;
    cursor: pointer; }
    .ResponseSelector__UI--active {
      background-color: #E8E8EB !important; }
    .ResponseSelector__UI--empty {
      border: 1px solid #E8E8EB;
      min-height: 32px; }
    .ResponseSelector__UI--questions {
      width: 255px;
      padding: 0px 34px 0px 2px;
      border: 1px solid #E8E8EB;
      min-height: 34px; }
    .ResponseSelector__UI__chevron {
      width: 24px;
      height: 24px;
      position: absolute;
      right: 8px;
      fill: #656568; }
      .ResponseSelector__UI__chevron--questions {
        padding-bottom: 3px;
        top: 0;
        margin-top: 6px; }
    .ResponseSelector__UI--invalid {
      background-color: #FFFFFF;
      box-shadow: inset 0 0 0 2px #FB9804; }
    .ResponseSelector__UI:focus {
      outline: none;
      box-shadow: inset 0 0 0 2px #0975EF; }
  .ResponseSelector__modal {
    height: auto;
    width: 100%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 0 10px 0 rgba(0, 0, 0, 0.18);
    border-radius: 8px;
    max-height: 370px;
    background-color: #FFFFFF;
    overflow: hidden;
    transform: translateY(10px);
    position: absolute;
    z-index: 3; }
    .ResponseSelector__modal--align-bottom {
      transform: translateY(-62px);
      bottom: 0;
      padding: 0 !important; }
  .ResponseSelector--disabled {
    pointer-events: none;
    opacity: 0.6; }
  .ResponseSelector--top-aligned {
    border-bottom: 1px solid #E8E8EB; }
  .ResponseSelector--bottom-aligned {
    border-top: 1px solid #E8E8EB; }
  .ResponseSelector__input-search-container--active {
    width: 100%;
    height: 48px;
    padding: 8px; }
  .ResponseSelector__input-search-container--top-aligned {
    border-bottom: 1px solid #E8E8EB; }
  .ResponseSelector__input-search-container--bottom-aligned {
    border-top: 1px solid #E8E8EB; }
  .ResponseSelector__wrapper {
    display: flex; }
  .ResponseSelector__search {
    width: 100%; }
  .ResponseSelector__button {
    margin-left: 8px; }
  .ResponseSelector__compose {
    justify-content: space-between; }
    .ResponseSelector__compose__icon {
      height: 24px;
      width: 24px; }
  .ResponseSelector__dropdown {
    position: absolute;
    border: 1px solid #E8E8EB;
    border-radius: 8px;
    box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.08);
    background: #FFFFFF;
    z-index: 99999;
    overflow: hidden; }
    .ResponseSelector__dropdown--top-aligned {
      border-bottom: 1px solid #E8E8EB; }
    .ResponseSelector__dropdown--bottom-aligned {
      border-top: 1px solid #E8E8EB; }
  .ResponseSelector__results {
    display: block;
    z-index: 9998;
    left: 0;
    width: 100%; }
    .ResponseSelector__results--align-bottom {
      top: auto; }
  .ResponseSelector__quick-reply {
    padding: 8px 0; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.InputRange {
  -webkit-appearance: none;
  margin: 10px 0;
  outline: none;
  padding: 0;
  height: 4px;
  background-color: #dedede;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #0975EF), color-stop(100%, #0975EF));
  background-repeat: no-repeat;
  border-radius: 10px;
  cursor: pointer; }
  .InputRange::-webkit-slider-runnable-track {
    height: 5px;
    box-shadow: none;
    border: none;
    border-radius: 3px;
    background: transparent;
    -webkit-appearance: none; }
  .InputRange::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: 1px solid #E8E8EB;
    height: 24px;
    width: 24px;
    border-radius: 50%;
    margin-top: -9.5px;
    background: #FFFFFF;
    cursor: pointer; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.GreetingPath {
  white-space: normal !important;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #E8E8EB;
  transform: translateZ(0); }
  .GreetingPath--invalid {
    color: #ADADB3; }
  .GreetingPath:last-child {
    border-bottom: none; }
  .GreetingPath__body {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: 8px;
    white-space: nowrap; }
  .GreetingPath__button {
    visibility: hidden; }
  .GreetingPath:hover .GreetingPath__button {
    visibility: visible; }

.SvgImage {
  display: block; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.Greeting__view {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 70vh;
  border-radius: 6px;
  box-shadow: 0 1px 0 0 #E8E8EB;
  background-color: #FFFFFF;
  border: solid 1px #E8E8EB; }

.Greeting__paths__entry {
  border: 0;
  padding: 2px 0;
  height: 100%;
  width: 100%;
  text-overflow: ellipsis;
  background-color: transparent !important; }

.Greeting__greetings-wrapper {
  display: flex;
  height: calc(100% - 100px);
  padding: 0px !important; }

.Greeting__left-column {
  width: 50%;
  flex: 1;
  padding: 16px 32px;
  overflow-y: scroll;
  overflow-X: hidden; }
  .Greeting__left-column__label {
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 500;
    color: #101820;
    font: -apple-system, BlinkMacSystemFont, "Apple Color Emoji", "Segoe UI", "Segoe UI Emoji", "Segoe UI Symbol", Roboto, Helvetica, Arial, sans-serif;
    display: flex;
    align-items: center; }
  .Greeting__left-column__wrapper {
    display: flex;
    justify-content: space-between; }
  .Greeting__left-column__style {
    width: 100%; }
    .Greeting__left-column__style__wrapper {
      display: flex;
      justify-content: space-around; }
    .Greeting__left-column__style__option {
      border: 1px solid #101820;
      width: 50%;
      box-sizing: border-box;
      border-top: 1px solid #E8E8EB;
      border-bottom: 1px solid #E8E8EB; }
      .Greeting__left-column__style__option--greeting-message {
        border-bottom-left-radius: 6px;
        border-top-left-radius: 6px;
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
        border-left: 1px solid #E8E8EB;
        border-right: 1px solid #E8E8EB; }
      .Greeting__left-column__style__option--greeting-emoji {
        border-bottom-left-radius: 0px;
        border-top-left-radius: 0px;
        border-top-right-radius: 6px;
        border-bottom-right-radius: 6px;
        border-right: 1px solid #E8E8EB;
        border-left: 1px solid #E8E8EB; }
      .Greeting__left-column__style__option--selected {
        background: #EBF3FE;
        border: 1px solid #C6E3FF;
        color: #0975EF;
        -webkit-text-fill-color: #0975EF; }
      .Greeting__left-column__style__option:active {
        background: #D4E6FC;
        border: 1px solid #C6E3FF;
        color: #005DC7;
        -webkit-text-fill-color: #005DC7; }
        .Greeting__left-column__style__option:active .SvgIcon {
          fill: #005DC7 !important; }
  .Greeting__left-column__message {
    margin-top: 16px; }
    .Greeting__left-column__message__text {
      transition: box-shadow 180ms ease;
      background-color: #F3F3F5 !important;
      width: 100%;
      resize: none;
      border-radius: 6px;
      border: none;
      font-size: 14px;
      min-height: 150px !important; }
    .Greeting__left-column__message__past-char-limit {
      right: 0;
      position: absolute;
      font-size: 10px;
      font-weight: 600;
      color: #FB9804; }
    .Greeting__left-column__message__emoji {
      width: 40px;
      height: 40px;
      background: #FFFFFF; }
      .Greeting__left-column__message__emoji__wrapper {
        display: flex;
        justify-content: space-between; }
      .Greeting__left-column__message__emoji--selected {
        background-color: #F3F3F5; }
      .Greeting__left-column__message__emoji:focus {
        outline: none; }
  .Greeting__left-column__slider {
    width: 100%;
    padding-right: 43px;
    margin: 8px 0px; }
    .Greeting__left-column__slider__range-input--delay, .Greeting__left-column__slider__range-input--duration {
      display: block;
      width: 100%; }
      .Greeting__left-column__slider__range-input--delay:after, .Greeting__left-column__slider__range-input--duration:after {
        content: attr(data-value) " S";
        position: absolute;
        top: -7px;
        right: -39px;
        padding-left: 18px;
        color: #101820;
        font-size: 14px;
        font-weight: 500; }

.Greeting__right-column {
  flex: 1;
  background-color: #F3F3F5; }
  .Greeting__right-column__web-background {
    border-radius: 6px;
    position: absolute;
    bottom: 0;
    background: inherit;
    height: 350px;
    width: 100%; }
  .Greeting__right-column__preview-wrapper {
    display: flex;
    height: 10%;
    align-items: flex-end;
    justify-content: flex-end;
    position: absolute;
    bottom: 46px;
    left: 10px;
    right: 10px; }
  .Greeting__right-column__video-player {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    overflow: hidden; }
  .Greeting__right-column__play-button {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 24px;
    height: 24px;
    fill: #BEDAFB;
    cursor: pointer; }
    .Greeting__right-column__play-button--clicked, .Greeting__right-column__play-button:hover {
      fill: #005DC7 !important; }
  .Greeting__right-column__message {
    width: auto;
    height: auto;
    max-width: 224px;
    max-height: 100px;
    overflow: hidden;
    word-break: break-word;
    resize: none;
    border: none;
    border-radius: 12px;
    background-color: #FFFFFF;
    box-shadow: 0 2px 9px 0 rgba(2, 11, 41, 0.08), 0 0 0 1px rgba(4, 33, 66, 0.02);
    padding: 8px 12px;
    font-size: 16px;
    font-color: #101820; }
    .Greeting__right-column__message__scale-animation {
      animation-name: message-animate;
      animation-duration: 6s;
      animation-fill-mode: forwards; }
  .Greeting__right-column__chaperone {
    margin-left: 6px;
    top: 3px; }
    .Greeting__right-column__chaperone__circle {
      width: 44px;
      height: 44px;
      box-shadow: 0 2px 9px 0 rgba(2, 16, 62, 0.2);
      background-color: #0975EF;
      border: solid 1px rgba(13, 110, 218, 0.1);
      border-radius: 50%;
      overflow: hidden; }
    .Greeting__right-column__chaperone__dialogue {
      width: 100% !important;
      height: 100% !important;
      top: 0;
      background-repeat: no-repeat !important;
      background-position: center !important;
      position: absolute; }
    .Greeting__right-column__chaperone__emoji {
      width: 100%;
      height: 100%; }
    .Greeting__right-column__chaperone__custom-emoji {
      background-repeat: no-repeat !important;
      background-position: center !important;
      position: absolute;
      width: 100% !important;
      height: 100% !important;
      top: 0;
      opacity: 0; }
    .Greeting__right-column__chaperone__fade-animation {
      animation-name: chaperone-anim;
      animation-duration: 2.5s;
      animation-fill-mode: forwards; }
    .Greeting__right-column__chaperone__slide-animation {
      animation-name: emoji-wave-anim;
      animation-duration: 2.5s;
      animatino-fill-mode: forwards; }

.Greeting__footer {
  display: inline-flex;
  justify-content: space-between;
  align-items: center; }

.Greeting__save-label {
  display: inline-flex;
  justify-content: flex-end; }
  .Greeting__save-label__url-warning {
    display: flex;
    max-height: 32px;
    align-items: center; }
    .Greeting__save-label__url-warning__svg {
      width: 19px;
      margin-left: 15px; }
    .Greeting__save-label__url-warning__description {
      font-size: 14px;
      line-height: 21px;
      text-align: left;
      color: #FB9804;
      margin-left: 15px; }
  .Greeting__save-label__save-button {
    margin-left: 8px; }

.Greeting__chatResponse {
  margin-top: 20px;
  margin-bottom: 10px; }

.Greeting__content {
  padding: 8px;
  background-color: #FFFFFF;
  border-radius: 8px;
  border: 1px solid #E8E8EB; }
  .Greeting__content__input-container {
    position: relative; }
    .Greeting__content__input-container__input {
      padding-right: 40px !important;
      background-color: #F3F3F5 !important; }
    .Greeting__content__input-container__button {
      position: absolute;
      right: 1px;
      top: 0;
      width: 32px;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center; }

.Greeting__add {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  margin: auto 1px auto 0 !important;
  color: #0975EF !important; }
  .Greeting__add--inactive {
    color: #E8E8EB !important; }

.Greeting__paths {
  border: 1px solid #E8E8EB;
  border-radius: 8px;
  margin-top: 8px; }
  .Greeting__paths--empty {
    display: none; }
  .Greeting__paths--unsaved:after {
    content: ""; }
  .Greeting__paths--loading:after {
    content: "Loading"; }

.Greeting__button {
  margin-top: 8px; }

@keyframes chaperone-anim {
  0% {
    opacity: 1;
    transform: scale3d(1, 1, 1); }
  25% {
    opacity: 1;
    transform: scale3d(1, 1, 1); }
  35% {
    opacity: 0;
    transform: scale3d(0, 0, 0); }
  90% {
    opacity: 0;
    transform: scale3d(0, 0, 0); }
  100% {
    opacity: 1;
    transform: scale3d(1, 1, 1); } }

@keyframes emoji-wave-anim {
  0% {
    opacity: 1;
    transform: translateY(60px); }
  25% {
    transform: translateY(60px); }
  35% {
    transform: translateY(0px); }
  45% {
    transform: translateY(0px); }
  52% {
    transform: rotateZ(-30deg);
    animation-timing-function: ease-in-out; }
  69% {
    transform: rotateZ(25deg);
    animation-timing-function: ease-in-out; }
  77% {
    transform: rotateZ(0deg);
    animation-timing-function: ease-in-out; }
  85% {
    transform: translateY(0px); }
  90% {
    transform: translateY(3px); }
  94% {
    opacity: 1;
    transform: translateY(-60px); }
  97% {
    opacity: 0;
    transform: translateY(0px); }
  100% {
    opacity: 0; } }

@keyframes message-animate {
  0% {
    opacity: 0;
    transform: scale3d(0, 0, 0); }
  10% {
    opacity: 1;
    transform: scale3d(1.1, 1.1, 1.1);
    animation-timing-function: ease-in-out; }
  15% {
    opacity: 1;
    transform: scale3d(1, 1, 1);
    animation-timing-function: ease-in-out; }
  55% {
    opacity: 1;
    transform: scale3d(1, 1, 1); }
  60% {
    opacity: 1;
    transform: scale3d(1.1, 1.1, 1.1);
    animation-timing-function: ease-in-out; }
  65% {
    opacity: 0;
    transform: scale3d(0, 0, 0); }
  85% {
    opacity: 0;
    transform: scale3d(0, 0, 0); }
  100% {
    opacity: 1;
    transform: scale3d(1, 1, 1);
    animation-timing-function: ease-in-out; } }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.ModalDelete__title {
  border-bottom: none !important; }

.ModalDelete__description {
  width: 100%;
  height: 100%;
  text-align: center;
  color: #101820;
  font-size: 16px;
  padding-top: 0px !important;
  line-height: 125%; }

.ModalDelete__bottom {
  padding: 0 !important; }

.ModalDelete__button {
  width: 100%;
  height: 100%;
  border: none;
  font-size: 16px;
  font-weight: 500;
  box-shadow: none !important;
  outline: none;
  padding: 8px 0; }
  .ModalDelete__button__delete span {
    color: #E81641; }
  .ModalDelete__button__cancel {
    color: #101820; }

.InputPassword__input-container__input {
  padding-right: 32px !important; }

.InputPassword__input-container__button {
  position: absolute;
  top: 0;
  right: 0;
  height: 100% !important;
  opacity: 0.5; }
  .InputPassword__input-container__button:hover {
    opacity: 1; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.Checkbox {
  display: inline-flex;
  width: auto;
  cursor: pointer;
  user-select: none;
  align-items: center;
  outline: none; }
  .Checkbox--disabled {
    pointer-events: none;
    opacity: 0.5; }
  .Checkbox__box, .Checkbox__label {
    height: 24px; }
  .Checkbox--small .Checkbox__box,
  .Checkbox--small .Checkbox__label {
    height: 18px; }
  .Checkbox__box--type-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    border-radius: 12px;
    background-color: #E8E8EB;
    transition: 0.2s; }
    .Checkbox__box--type-switch:before {
      position: absolute;
      content: "";
      height: 22px;
      width: 22px;
      left: 0;
      margin: 1px;
      background-color: #FFFFFF;
      border-radius: 50%;
      transition: 0.2s; }
    .Checkbox__box--type-switch:active:before {
      background-color: #F3F3F5; }
    .Checkbox__box--type-switch:active {
      background-color: #ADADB3; }
    .Checkbox__box--type-switch--checked {
      background-color: #39C379; }
      .Checkbox__box--type-switch--checked:before {
        transform: translateX(24px); }
      .Checkbox__box--type-switch--checked:active {
        background-color: #23A45F; }
  .Checkbox__box--type-box {
    width: 24px;
    border-radius: 4px;
    background-color: #FFFFFF;
    border: 1px solid #E8E8EB; }
    .Checkbox__box--type-box:active {
      background-color: #F3F3F5;
      border: 1px solid #F3F3F5; }
    .Checkbox__box--type-box--checked {
      background: linear-gradient(180deg, #0975EF 0%, #086bdb 100%);
      border: 1px solid transparent;
      display: flex;
      justify-content: center;
      align-items: center; }
      .Checkbox__box--type-box--checked:active {
        background: #005DC7;
        border: 1px solid transparent; }
  .Checkbox__icon {
    height: 100%;
    color: #FFFFFF;
    position: absolute;
    top: 0; }
  .Checkbox--small .Checkbox__box--type-box {
    width: 18px; }
  .Checkbox__label {
    color: #101820;
    margin-left: 10px;
    display: flex;
    align-items: center;
    line-height: 0;
    font-size: inherit;
    cursor: inherit;
    white-space: nowrap; }
  .Checkbox--theme-dark .Checkbox__label {
    color: #FFFFFF; }
  .Checkbox--small .Checkbox__label {
    font-size: 14px; }
  .Checkbox--label-left .Checkbox__label {
    order: -1;
    margin-left: 0;
    margin-right: 8px;
    min-width: 0;
    flex-grow: 1; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.CheckboxPanel {
  display: flex;
  align-items: center;
  justify-content: space-between; }
  .CheckboxPanel__heading {
    color: #656568;
    font-size: 16px; }
  .CheckboxPanel__description {
    margin-top: 0;
    line-height: 1.43; }
    .CheckboxPanel__description a {
      color: #656568; }
  .CheckboxPanel__checkbox {
    align-self: baseline;
    float: right;
    vertical-align: bottom; }
  .CheckboxPanel__header {
    margin-bottom: 8px;
    color: #101820;
    font-weight: 500; }
  .CheckboxPanel__infoTooltip {
    vertical-align: top;
    flex-grow: 1;
    margin-top: -2px; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.Select {
  cursor: pointer;
  position: relative;
  display: block;
  outline: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0; }
  .Select--disabled {
    pointer-events: none;
    cursor: default; }
  .Select--disabled .Select__select {
    border-color: #F3F3F5; }
    .Select--disabled .Select__select__text {
      color: #C4C4CA;
      background-color: #FFFFFF; }
  .Select--disabled .Select__icon-container__icon {
    fill: #F3F3F5 !important; }
  .Select--size-small .Select__select,
  .Select--size-x-small .Select__select {
    padding-right: 24px;
    height: 24px;
    font-size: 14px;
    line-height: 20px;
    border-radius: 6px; }
    .Select--size-small .Select__select__text,
    .Select--size-x-small .Select__select__text {
      max-width: calc(100% - 30px); }
  .Select--size-x-small .Select__select {
    font-size: 12px;
    padding: 0 26px 0 6px; }
  .Select--size-smallish .Select__select {
    padding-right: 28px;
    height: 28px;
    font-size: 14px;
    line-height: 20px;
    border-radius: 6px;
    line-height: 24px; }
    .Select--size-smallish .Select__select__text {
      max-width: calc(100% - 34px); }
  .Select--size-small .Select__icon-container {
    width: 24px; }
  .Select--size-x-small .Select__icon-container {
    width: 24px; }
  .Select--size-smallish .Select__icon-container {
    width: 28px; }
  .Select:focus-within .Select__select {
    border: 2px solid #0975EF;
    padding: 0 31px 0 7px;
    outline: none; }
  .Select--size-small:focus-within .Select__select {
    padding: 0 23px 0 7px !important; }
  .Select--size-smallish:focus-within .Select__select {
    padding: 0 27px 0 7px !important; }
  .Select--size-x-small:focus-within .Select__select {
    padding: 0 25px 0 5px; }
  .Select--invalid .Select__select {
    padding: 0 31px 0 7px;
    border: 2px solid #FB9804; }
  .Select--size-small.Select--invalid .Select__select {
    padding: 0 23px 0 7px !important; }
  .Select--size-smallish.Select--invalid .Select__select {
    padding: 0 27px 0 7px !important; }
  .Select__custom-button {
    width: 26px;
    height: 24px;
    fill: #C4C4CA;
    pointer-events: none; }
    .Select__custom-button--active {
      fill: #0975EF; }
  .Select__select {
    background-color: #FFFFFF;
    padding: 0 8px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid #E8E8EB;
    cursor: pointer;
    min-width: 100%;
    padding-right: 32px;
    display: flex;
    align-items: center;
    white-space: nowrap; }
    .Select__select:focus-within {
      border: 2px solid #0975EF;
      padding: 0 31px 0 7px;
      outline: none; }
    .Select__select--placeholder {
      color: #656568; }
    .Select__select__placeholder-rich {
      display: flex;
      align-items: center; }
      .Select__select__placeholder-rich__icon {
        height: 24px;
        width: 24px;
        margin: 0 8px 0 -4px; }
      .Select__select__placeholder-rich__label {
        display: flex;
        align-items: center;
        color: #3C3C3F;
        font-size: 14px;
        font-weight: 500;
        pointer-events: none; }
    .Select__select--no-border {
      border: 1px solid transparent; }
    .Select__select--dark {
      font-weight: 500; }
    .Select__select__hidden-options__option {
      visibility: hidden;
      height: 0;
      display: block; }
    .Select__select__text {
      color: #101820;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      max-width: calc(100% - 38px);
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: auto; }
      .Select__select__text--placeholder {
        color: #656568; }
      .Select__select__text--relative.Select__select__text--relative {
        display: inline-flex;
        position: relative;
        max-width: initial; }
      .Select__select__text--icon-visible {
        display: flex;
        align-items: center; }
        .Select__select__text--icon-visible svg {
          margin-right: 8px; }
        .Select__select__text--icon-visible span {
          font-size: 14px; }
    .Select__select__icon {
      height: 20px;
      width: 20px; }
  .Select__list-wrapper {
    position: absolute;
    z-index: 9998;
    left: 0; }
  .Select__list-sub-menu-wrapper {
    position: absolute;
    z-index: 9998;
    left: 100%; }
  .Select__list {
    list-style: none;
    display: block;
    margin: 0;
    background-color: #FFFFFF;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 0 10px 0 rgba(0, 0, 0, 0.18);
    border-radius: 4px;
    padding: 8px 0;
    opacity: 1;
    transition: opacity 1s;
    overflow-y: auto;
    overflow-x: hidden;
    position: unset; }
    .Select__list--align-right {
      right: 0;
      left: initial; }
    .Select__list--sub-menu {
      position: absolute;
      top: -41px;
      z-index: 9998; }
    .Select__list__item {
      color: #101820;
      position: static; }
      .Select__list__item--no-sub-menu:hover, .Select__list__item--focus {
        background-color: #F3F3F5; }
      .Select__list__item:hover .Select__list__item__hover-icon {
        visibility: visible; }
      .Select__list__item--active {
        background-color: #EBF3FE;
        color: #0975EF; }
      .Select__list__item--disabled {
        color: #ADADB3;
        cursor: default;
        pointer-events: none;
        cursor: default; }
        .Select__list__item--disabled:hover {
          background-color: #FFFFFF; }
      .Select__list__item--sub-header {
        cursor: default;
        font-size: 12px;
        color: #ADADB3;
        padding: 12px 12px 4px 12px; }
        .Select__list__item--sub-header:hover {
          background-color: #FFFFFF; }
      .Select__list__item--divider {
        cursor: default;
        background: #E8E8EB;
        width: 100%;
        height: 1px;
        padding: 0;
        margin-top: 10px; }
        .Select__list__item--divider:hover {
          cursor: default;
          background: #E8E8EB; }
      .Select__list__item__button {
        border: none;
        outline: none;
        background: none;
        width: 100%;
        height: 100%;
        padding: 8px 32px 8px 12px;
        display: flex;
        cursor: pointer;
        align-items: center;
        font-size: 14px;
        white-space: nowrap;
        color: inherit; }
        .Select__list__item__button__label {
          max-width: 100%;
          overflow: hidden;
          text-overflow: ellipsis; }
        .Select__list__item__button__option-icon {
          height: 20px;
          width: 20px;
          margin-right: 8px; }
        .Select__list__item__button__icon {
          height: 20px;
          position: absolute;
          right: 8px; }
      .Select__list__item__hover-icon {
        height: 20px;
        position: absolute;
        right: 8px;
        visibility: hidden; }
  .Select__icon-container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    pointer-events: none; }
    .Select__icon-container__icon {
      height: 20px; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.UserImage {
  border-radius: 50%;
  overflow: hidden;
  transform: translate3d(0, 0, 0); }
  .UserImage__image {
    height: 100%;
    width: 100%; }
    .UserImage__image--has-picture {
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat; }
    .UserImage__image--default-picture {
      background-position: center 0.1em;
      background-size: contain;
      background-color: #E8E8EB;
      background-repeat: no-repeat; }
    .UserImage__image--initials {
      text-transform: capitalize;
      font-size: 0.6em;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #FFFFFF; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.PasswordGuidelines__list {
  list-style: none;
  padding: 0; }

.PasswordGuidelines__item {
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #000000; }

.PasswordGuidelines svg {
  margin: 0 6px 0 0; }

.ModalProfileSecurity__title {
  display: flex;
  align-items: center; }

.ModalProfileSecurity__enable__inputs {
  display: flex;
  align-items: flex-end; }
  .ModalProfileSecurity__enable__inputs__container {
    flex: 1;
    margin-right: 8px; }
    .ModalProfileSecurity__enable__inputs__container--size-small {
      flex: 0.5; }
  .ModalProfileSecurity__enable__inputs__button {
    margin-top: 8px; }

.ModalProfileSecurity__enable__validation__container {
  margin-top: 8px; }

.ModalProfileSecurity__enable__validation__title {
  display: flex;
  align-items: center; }

.ModalProfileSecurity__enable__validation__button {
  margin: 8px 8px 0 0; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.ModalProfile__details__user-info {
  display: flex; }
  .ModalProfile__details__user-info__inputs {
    flex: 1; }
    .ModalProfile__details__user-info__inputs__input {
      margin-bottom: 8px; }
  .ModalProfile__details__user-info__role {
    margin: 0 8px; }
  .ModalProfile__details__user-info__text {
    flex: 1;
    margin-left: 16px; }
  .ModalProfile__details__user-info__image {
    cursor: pointer;
    margin-left: 8px; }
    .ModalProfile__details__user-info__image--uploading .ModalProfile__details__user-info__image__uploader {
      display: block; }
    .ModalProfile__details__user-info__image--uploading .ModalProfile__details__user-info__image__uploader__text {
      font-style: italic; }
    .ModalProfile__details__user-info__image:hover .ModalProfile__details__user-info__image__uploader {
      display: block; }
    .ModalProfile__details__user-info__image__uploader {
      position: absolute;
      top: 0;
      height: 100%;
      width: 100%;
      display: none; }
      .ModalProfile__details__user-info__image__uploader__text {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        width: 100%;
        background-color: rgba(10, 15, 20, 0.4);
        color: #FFFFFF;
        font-size: 12px; }
        .ModalProfile__details__user-info__image__uploader__text__icon {
          height: 24px;
          width: 24px; }

.ModalProfile__details__passwords {
  font-size: 12px; }
  .ModalProfile__details__passwords__inputs {
    display: flex;
    flex-direction: column;
    width: 374px; }
    .ModalProfile__details__passwords__inputs__input {
      flex: 1; }
    .ModalProfile__details__passwords__inputs__button {
      margin-right: 8px; }
    .ModalProfile__details__passwords__inputs__link {
      cursor: pointer; }
  .ModalProfile__details__passwords__button-container {
    display: flex;
    align-items: center;
    margin-top: 8px; }

.ModalProfile__bottom__logout {
  margin-left: auto; }

.ModalProfile__emails__section {
  display: flex;
  align-items: flex-start; }
  .ModalProfile__emails__section__text {
    margin-right: 16px; }

.ModalProfile__email-preference {
  width: 50%; }

.ModalProfile__label {
  margin-bottom: 4px; }

.ModalProfile .PasswordGuidelines svg {
  margin-right: 6px; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.ResponseStatus {
  background-color: #C4C4CA;
  font-size: 12px;
  font-weight: 700;
  color: #FFFFFF;
  text-align: center;
  border-radius: 3px;
  padding: 1px 6px; }
  .ResponseStatus--on {
    background-color: #39C379; }
  .ResponseStatus--small {
    display: flex;
    align-items: center;
    padding-left: 8px;
    background: none; }
  .ResponseStatus--on.ResponseStatus--small {
    display: none; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.ModalWarning__content {
  margin-bottom: 24px; }
  .ModalWarning__content__inner {
    padding-bottom: 1px;
    max-height: 208px;
    overflow: auto; }
  .ModalWarning__content__gradient {
    height: 50px;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    background: linear-gradient(rgba(255, 255, 255, 0), white);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s; }
    .ModalWarning__content__gradient--show-gradient {
      opacity: 1; }

.ModalWarning__sub-title {
  margin: 0 24px 24px 24px;
  font-weight: 600;
  text-align: center; }

.ModalWarning__message {
  display: block;
  text-align: center;
  margin: 0 24px 24px 24px;
  line-height: 23px; }

.ModalWarning__reference-buttons {
  margin-bottom: 8px; }
  .ModalWarning__reference-buttons:last-child {
    margin-bottom: 0; }
  .ModalWarning__reference-buttons__reference-button {
    display: block;
    width: 284px;
    min-height: 48px;
    height: auto;
    border: 1px solid #E8E8EB;
    box-sizing: border-box;
    box-shadow: 0px 1px 0px #E8E8EB;
    border-radius: 6px;
    background: none;
    margin: auto;
    margin-bottom: 8px;
    padding: 8px;
    cursor: pointer;
    outline: none;
    color: inherit; }
    .ModalWarning__reference-buttons__reference-button:last-child {
      margin-bottom: 0; }
    .ModalWarning__reference-buttons__reference-button:active {
      background-color: #F3F3F5; }
    .ModalWarning__reference-buttons__reference-button__info-group {
      display: flex;
      align-items: center; }
      .ModalWarning__reference-buttons__reference-button__info-group__title {
        font-size: 16px;
        font-weight: 500; }
      .ModalWarning__reference-buttons__reference-button__info-group__language {
        margin-left: 8px;
        text-transform: uppercase;
        font-weight: 600;
        font-size: 12px;
        color: #656568; }
    .ModalWarning__reference-buttons__reference-button__tag-group {
      margin-top: 4px;
      display: flex;
      align-self: flex-start; }
      .ModalWarning__reference-buttons__reference-button__tag-group__tag {
        margin-right: 8px;
        margin-top: 2px; }

.ModalWarning__section--checkbox-choice {
  margin-bottom: 16px;
  text-align: center; }

.ModalWarning__button-group__button {
  box-sizing: border-box;
  border: none;
  width: 100%;
  height: 100%;
  box-shadow: none;
  font-size: 16px;
  color: black;
  border-top: 1px solid #E8E8EB;
  border-radius: 0px;
  padding: 8px 0; }
  .ModalWarning__button-group__button--red {
    color: #E81641; }
  .ModalWarning__button-group__button--blue {
    color: #0975EF; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.ResponseEditorLanguagesDialog__languages {
  margin-bottom: 8px; }
  .ResponseEditorLanguagesDialog__languages__language-button {
    display: block !important;
    width: 100%;
    color: #101820 !important;
    padding: 0 4px !important; }
    .ResponseEditorLanguagesDialog__languages__language-button:active {
      background-color: #E8E8EB !important; }

.ResponseEditorLanguagesDialog__link-block {
  text-align: center;
  font-size: 12px !important; }
  .ResponseEditorLanguagesDialog__link-block__link {
    text-decoration: none;
    font-size: 12px !important; }
    .ResponseEditorLanguagesDialog__link-block__link:hover {
      text-decoration: underline; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.LanguageButton {
  position: relative;
  margin-left: auto; }
  .LanguageButton--hidden {
    display: none; }
  .LanguageButton__add {
    background-color: #656568 !important; }
    .LanguageButton__add:active {
      background-color: #101820 !important; }
  .LanguageButton__add--color-white {
    background-color: white !important;
    color: black; }
    .LanguageButton__add--color-white:active {
      background-color: #E8E8EB !important; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.QuickReplyLabelInput {
  display: flex;
  align-items: center;
  margin-bottom: 4px; }
  .QuickReplyLabelInput:last-child {
    margin-bottom: 0px; }
  .QuickReplyLabelInput__language-code {
    padding-left: 4px; }
    .QuickReplyLabelInput__language-code__label {
      color: #656568;
      font-size: 14px;
      font-weight: 600;
      text-transform: uppercase;
      width: 40px; }
  .QuickReplyLabelInput__debounced-input {
    width: 482px !important; }
  .QuickReplyLabelInput__action-container {
    display: block;
    position: absolute;
    left: 94%; }
  .QuickReplyLabelInput__action {
    display: flex;
    align-items: center; }
    .QuickReplyLabelInput__action__button {
      display: none !important; }
  .QuickReplyLabelInput:hover .QuickReplyLabelInput__action__button {
    display: flex !important; }
  .QuickReplyLabelInput:hover .QuickReplyLabelInput__action__language-code {
    display: none !important; }
  .QuickReplyLabelInput__input {
    font-size: 14px !important; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.MultiLangAnswerLabels {
  position: relative; }
  .MultiLangAnswerLabels__header {
    display: grid;
    grid-template-columns: [label] 1fr [button] 80px;
    grid-template-rows: auto;
    margin-bottom: 4px;
    height: 24px; }
  .MultiLangAnswerLabels__title {
    display: flex;
    flex-direction: row;
    justify-content: flex-start; }
  .MultiLangAnswerLabels__language-buttons {
    display: block;
    margin: 0px;
    padding: 0px;
    width: 100%; }
  .MultiLangAnswerLabels__tooltip {
    display: block;
    margin-top: 2px; }
  .MultiLangAnswerLabels__description {
    margin-top: 4px;
    color: #656568;
    font-size: 12px;
    margin-bottom: 8px; }
  .MultiLangAnswerLabels__headline {
    font-size: 14px;
    font-weight: 500;
    height: 24px;
    line-height: 24px; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.ModalResponseDetails__title-content {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 2em; }

.ModalResponseDetails__content--no-padding {
  padding: 0px !important; }

.ModalResponseDetails__input {
  padding-top: 8px !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  padding-bottom: 0px !important;
  font-size: 14px !important; }

.ModalResponseDetails__title-info-wrapper {
  position: relative;
  display: flex;
  justify-content: flex-start; }

.ModalResponseDetails__tag-container {
  margin-bottom: 16px; }
  .ModalResponseDetails__tag-container__tags {
    display: flex;
    flex-wrap: wrap; }
    .ModalResponseDetails__tag-container__tags__tag {
      margin: 0 8px 8px 0; }
  .ModalResponseDetails__tag-container__search-container {
    position: relative; }
    .ModalResponseDetails__tag-container__search-container__button {
      position: absolute;
      right: 1px;
      top: 0; }
  .ModalResponseDetails__tag-container__all-tags-wrapper {
    position: relative;
    border: 1px solid #E8E8EB;
    border-radius: 8px;
    overflow: hidden;
    margin-top: 8px;
    z-index: 1; }
    .ModalResponseDetails__tag-container__all-tags-wrapper:empty {
      display: none; }
    .ModalResponseDetails__tag-container__all-tags-wrapper__gradient {
      height: 50px;
      width: 100%;
      position: absolute;
      bottom: 0;
      left: 0;
      background: linear-gradient(rgba(255, 255, 255, 0), white);
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.4s; }
      .ModalResponseDetails__tag-container__all-tags-wrapper__gradient--show-gradient {
        opacity: 1; }
  .ModalResponseDetails__tag-container__all-tags {
    max-height: 246px;
    overflow: auto; }
    .ModalResponseDetails__tag-container__all-tags__tag {
      padding: 8px;
      border-bottom: 1px solid #E8E8EB;
      cursor: pointer; }
      .ModalResponseDetails__tag-container__all-tags__tag:last-child {
        border-bottom: none; }
      .ModalResponseDetails__tag-container__all-tags__tag__toggle-description {
        float: right;
        margin-top: 4px;
        color: #656568;
        font-size: 12px;
        margin-bottom: 8px; }

.ModalResponseDetails .ModalResponseDetails__row-wrapper {
  display: flex;
  padding: 0 16px; }

.ModalResponseDetails--reviewable .ModalResponseDetails__row-wrapper {
  display: flex;
  padding: 0 16px; }

.ModalResponseDetails--reviewable .ModalResponseDetails__quick-answer {
  padding-bottom: 0px !important;
  flex: 1; }

.ModalResponseDetails--reviewable .ModalResponseDetails__row__toggle {
  flex: 1;
  padding: 0 16px; }

.ModalResponseDetails--reviewable .ModalResponseDetails__toggle-wrap {
  display: flex;
  padding: 16px 16px 0; }
  .ModalResponseDetails--reviewable .ModalResponseDetails__toggle-wrap .g-input__label {
    flex: 1; }

.ModalResponseDetails--reviewable .ModalResponseDetails__tag-container {
  padding: 0 16px; }

.ModalResponseDetails__padding {
  padding: 16px; }

.ModalResponseDetails__divider {
  height: 8px;
  width: 100%;
  background-color: #F3F3F5;
  margin: 16px 0; }

.ModalResponseDetails__toggle-description {
  font-size: 12px;
  color: #656568;
  margin-bottom: 8px;
  width: 460px; }

.ModalResponseDetails__link {
  text-decoration: none; }

.ModalResponseDetails__thin {
  height: 1px;
  border-top: none;
  border-bottom: 1px solid #E8E8EB;
  margin: 8px 16px;
  transform: scaleY(0.5); }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.ModalBillingPaymentForm {
  flex: 1;
  display: flex;
  flex-direction: column; }
  .ModalBillingPaymentForm__section__input-container {
    flex: 1;
    margin-bottom: 8px;
    display: flex; }
    .ModalBillingPaymentForm__section__input-container__input {
      flex: 1; }
      .ModalBillingPaymentForm__section__input-container__input__stripe-label {
        width: 100%; }
      .ModalBillingPaymentForm__section__input-container__input:not(:last-child) {
        margin-right: 8px; }

.StripeElement {
  height: 32px;
  border-radius: 6px;
  padding: 2px 6px;
  width: 100%;
  transition: 150ms ease;
  user-select: none;
  background-color: #E8E8EB;
  border: 2px solid rgba(232, 232, 235, 0);
  display: block;
  cursor: text; }
  .StripeElement--focus {
    background-color: #E8E8EB;
    border: 2px solid #0975EF; }
  .StripeElement--card-invalid {
    border: 2px solid #FB9804; }

.ModalBillingCustomer__section__input-container {
  flex: 1;
  margin-bottom: 8px;
  display: flex; }
  .ModalBillingCustomer__section__input-container__input {
    flex: 1; }
    .ModalBillingCustomer__section__input-container__input:not(:last-child) {
      margin-right: 8px; }
    .ModalBillingCustomer__section__input-container__input__description {
      margin-top: 4px !important; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.ModalBillingPlans__section__input-container {
  flex: 1;
  margin-bottom: 8px;
  display: flex; }
  .ModalBillingPlans__section__input-container__features {
    padding: 0;
    list-style: none;
    margin: 0; }
  .ModalBillingPlans__section__input-container__price {
    font-size: 18px;
    color: #656568;
    display: flex;
    align-items: center;
    height: 32px;
    text-transform: uppercase; }
  .ModalBillingPlans__section__input-container__input {
    flex: 1; }
    .ModalBillingPlans__section__input-container__input:not(:last-child) {
      margin-right: 8px; }

.ModalBillingPlans__section__description {
  margin-top: 8px !important; }

.ModalBillingPlans__table {
  display: flex; }
  .ModalBillingPlans__table__column {
    flex: 1;
    min-width: 0;
    color: #3C3C3F;
    transition: 0.2s;
    cursor: pointer;
    background-color: #FFFFFF; }
    .ModalBillingPlans__table__column:hover {
      transform: scale(1.05);
      z-index: 3 !important;
      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 0 10px 0 rgba(0, 0, 0, 0.18);
      border-radius: 8px;
      overflow: hidden; }
      .ModalBillingPlans__table__column:hover:after {
        border-color: rgba(255, 255, 255, 0);
        border-radius: 8px; }
    .ModalBillingPlans__table__column--selected {
      z-index: 2; }
      .ModalBillingPlans__table__column--selected:after {
        content: '';
        border: 2px solid #0975EF !important;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0; }
    .ModalBillingPlans__table__column:after {
      content: '';
      border: 1px solid #E8E8EB;
      z-index: 1;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0; }
    .ModalBillingPlans__table__column:not(:last-child) {
      margin-right: -1px; }
    .ModalBillingPlans__table__column__head {
      padding: 8px;
      border-bottom: 1px solid #E8E8EB;
      color: inherit;
      display: flex;
      align-items: center;
      justify-content: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis; }
      .ModalBillingPlans__table__column__head__icon {
        width: 18px;
        height: 18px;
        margin-right: 4px; }
    .ModalBillingPlans__table__column__features {
      color: inherit; }
      .ModalBillingPlans__table__column__features__feature {
        padding: 8px;
        font-size: 14px;
        height: 33px;
        color: inherit;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; }
        .ModalBillingPlans__table__column__features__feature:nth-child(odd) {
          background-color: #F3F3F5; }
        .ModalBillingPlans__table__column__features__feature:nth-child(even) {
          background-color: white; }
    .ModalBillingPlans__table__column__footer {
      border-top: 1px solid #E8E8EB;
      padding: 8px;
      text-align: center; }

.ModalBillingPlans__bottom {
  transform: translateY(0);
  transition: transform 0.2s; }
  .ModalBillingPlans__bottom--hidden {
    transform: translateY(100%); }
  .ModalBillingPlans__bottom__button {
    flex-shrink: 0; }
  .ModalBillingPlans__bottom__price-container {
    margin-left: auto;
    text-align: right;
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 16px; }
    .ModalBillingPlans__bottom__price-container__price__currency {
      text-transform: uppercase;
      margin-left: 4px; }
    .ModalBillingPlans__bottom__price-container__sub-text {
      font-size: 12px;
      color: #656568; }
      .ModalBillingPlans__bottom__price-container__sub-text--align-left {
        text-align: left;
        margin-left: 16px; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.ModalEditTraining__content__input-container__input {
  min-height: 50px;
  line-height: 24px; }

.ModalEditTraining__bottom__button--left {
  margin-right: 8px; }

.ModalZendeskTicketingConfig__section__input-container {
  margin-bottom: 8px; }
  .ModalZendeskTicketingConfig__section__input-container__input {
    flex: 1;
    margin-bottom: 8px; }
    .ModalZendeskTicketingConfig__section__input-container__input input {
      margin-bottom: 8px; }
    .ModalZendeskTicketingConfig__section__input-container__input .g-input__label {
      flex: 1;
      display: flex !important;
      align-items: center;
      justify-content: space-between; }
      .ModalZendeskTicketingConfig__section__input-container__input .g-input__label__icon {
        cursor: pointer;
        height: 20px; }
    .ModalZendeskTicketingConfig__section__input-container__input__subdomain {
      font-size: 14px; }
    .ModalZendeskTicketingConfig__section__input-container__input:first-child {
      margin-right: 8px; }
    .ModalZendeskTicketingConfig__section__input-container__input__description {
      margin-top: 4px; }
  .ModalZendeskTicketingConfig__section__input-container__row {
    display: flex; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.Modal__sidebar {
  flex: 0 0 144px;
  border-right: 1px solid #E8E8EB; }
  .Modal__sidebar__button {
    width: 100%;
    border-radius: 0px;
    border-top: none;
    border-right: none;
    border-left: none;
    border-bottom: 1px solid #E8E8EB !important;
    box-shadow: none;
    height: 48px;
    justify-content: flex-start !important;
    padding: 0 20px !important; }
    .Modal__sidebar__button__text {
      margin-left: inherit;
      justify-content: center;
      font-size: 15px; }
    .Modal__sidebar__button:active {
      background-color: #FFFFFF !important; }
    .Modal__sidebar__button--active {
      background-color: #E8E8EB; }

/*

github.com style (c) Vasily Polovnyov <vast@whiteants.net>

*/
.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  color: #333;
  background: #f8f8f8; }

.hljs-comment,
.hljs-quote {
  color: #998;
  font-style: italic; }

.hljs-keyword,
.hljs-selector-tag,
.hljs-subst {
  color: #333;
  font-weight: bold; }

.hljs-number,
.hljs-literal,
.hljs-variable,
.hljs-template-variable,
.hljs-tag .hljs-attr {
  color: #008080; }

.hljs-string,
.hljs-doctag {
  color: #d14; }

.hljs-title,
.hljs-section,
.hljs-selector-id {
  color: #900;
  font-weight: bold; }

.hljs-subst {
  font-weight: normal; }

.hljs-type,
.hljs-class .hljs-title {
  color: #458;
  font-weight: bold; }

.hljs-tag,
.hljs-name,
.hljs-attribute {
  color: #000080;
  font-weight: normal; }

.hljs-regexp,
.hljs-link {
  color: #009926; }

.hljs-symbol,
.hljs-bullet {
  color: #990073; }

.hljs-built_in,
.hljs-builtin-name {
  color: #0086b3; }

.hljs-meta {
  color: #999;
  font-weight: bold; }

.hljs-deletion {
  background: #fdd; }

.hljs-addition {
  background: #dfd; }

.hljs-emphasis {
  font-style: italic; }

.hljs-strong {
  font-weight: bold; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.SettingsPlatformChatModalFunctionality__tooltip {
  display: inline-block;
  vertical-align: middle; }

.SettingsPlatformChatModalFunctionality__range-input {
  width: 80%;
  max-width: 200px;
  -webkit-appearance: none; }
  .SettingsPlatformChatModalFunctionality__range-input:after {
    content: attr(data-value) "%";
    position: absolute;
    top: -7px;
    right: -50px;
    padding-left: 8px;
    color: #656568; }

.SettingsPlatformChatModalFunctionality__selectors {
  display: flex; }
  .SettingsPlatformChatModalFunctionality__selectors__time-input {
    text-align: center;
    width: 72px !important; }
  .SettingsPlatformChatModalFunctionality__selectors > :not(:last-child) {
    margin-right: 8px; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.Avatar {
  position: relative;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid;
  box-sizing: border-box; }
  .Avatar--large {
    height: 26px;
    width: 26px; }
  .Avatar--large .Avatar__letter {
    font-size: 14px;
    line-height: 22px; }
  .Avatar--large .Avatar__image {
    margin-top: -12px;
    margin-left: -12px; }
    .Avatar--large .Avatar__image svg {
      height: 24px;
      width: 24px; }
  .Avatar__letter {
    height: 100%;
    width: 100%;
    text-align: center;
    line-height: 16px;
    font-size: 12px;
    font-weight: 500; }
  .Avatar__image {
    fill: #FFFFFF;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -9px;
    margin-left: -9px; }
    .Avatar__image svg {
      height: 18px;
      width: 18px; }
  .Avatar__agent {
    border-radius: 20% !important;
    border: 2px hidden; }
    .Avatar__agent__image {
      height: 100% !important;
      width: 100%; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.ChatLogItem {
  float: right;
  clear: both;
  margin: 0;
  max-width: 300px;
  min-height: 32px;
  padding: 8px 12px;
  border-radius: 12px;
  text-align: left;
  word-wrap: break-word;
  white-space: pre-wrap;
  color: #101820;
  pointer-events: auto; }
  .ChatLogItem--is-last {
    animation-duration: 200ms;
    animation-name: slidein; }
  .ChatLogItem--selected {
    border: 2px solid #0975EF;
    padding: 6px 10px; }
  .ChatLogItem--reaction {
    float: none !important;
    display: inline-block; }
  .ChatLogItem--us {
    float: left;
    background-color: #E8E8EB; }
  .ChatLogItem--them {
    background-color: #E8E8EB;
    cursor: pointer; }
  .ChatLogItem--picture {
    background-color: transparent !important;
    padding: 0;
    overflow: hidden;
    border: 0;
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); }
    .ChatLogItem--picture video, .ChatLogItem--picture img {
      width: 100%;
      margin: 0;
      display: block; }
  .ChatLogItem--loading {
    width: 96px;
    text-align: center;
    color: #E8E8EB;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: placeHolderShimmer;
    animation-timing-function: linear;
    background: transparent;
    background: linear-gradient(to right, rgba(0, 0, 0, 0) 8%, rgba(0, 0, 0, 0.07) 18%, rgba(0, 0, 0, 0) 33%);
    background-size: 800px 104px; }
  .ChatLogItem--emojis {
    background-color: transparent !important;
    font-size: 51px; }
  .ChatLogItem__link {
    border-style: solid;
    border-width: 1px;
    border-radius: 12px;
    border-color: #E8E8EB;
    position: relative;
    overflow: hidden;
    color: black;
    text-decoration: none;
    display: block;
    margin: -8px -12px; }
  .ChatLogItem__link-preview {
    background-color: #E8E8EB;
    padding: 8px 12px;
    text-align: center; }
  .ChatLogItem__link-title {
    padding: 8px;
    position: relative;
    background-color: #FFFFFF;
    text-align: center;
    text-decoration: none; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.RadioButton {
  display: flex; }
  .RadioButton__input {
    position: absolute;
    visibility: hidden; }
  .RadioButton__input:checked ~ .RadioButton__button {
    border: 6px solid #0975EF;
    box-shadow: none; }
  .RadioButton__input:checked ~ .RadioButton__label {
    color: #101820; }
  .RadioButton__button {
    display: block;
    position: absolute;
    border: 1px solid #E8E8EB;
    border-radius: 50%;
    height: 20px;
    width: 20px;
    z-index: 5;
    cursor: pointer;
    transition: border 0.2s linear;
    -webkit-transition: border 0.2s linear;
    background-color: white;
    box-shadow: 0px 1px 1px rgba(2, 14, 29, 0.08); }
  .RadioButton__label {
    font-size: 14px;
    display: block;
    position: relative;
    padding-left: 28px;
    z-index: 9;
    cursor: pointer;
    -webkit-transition: all 0.2s linear; }
  .RadioButton__description {
    display: flex;
    align-items: flex-end;
    margin-left: 4px;
    font-size: 12px;
    color: #C4C4CA;
    line-height: 14px; }

.RadioButtons {
  display: inline; }
  .RadioButtons .RadioButton {
    margin-bottom: 8px; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.ColorInput__selector-container {
  width: 24px;
  height: 24px;
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 1;
  cursor: pointer; }
  .ColorInput__selector-container__selector {
    height: 100%;
    width: 100%;
    border: none;
    display: block;
    opacity: 0; }
  .ColorInput__selector-container__preview {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid #E8E8EB;
    border-radius: 6px;
    pointer-events: none; }

.ColorInput__input {
  padding-left: 36px !important; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.ProgressBar {
  height: 6px;
  border: 1px solid #656568;
  border-radius: 6px;
  position: relative; }
  .ProgressBar__fill {
    background-color: #656568;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    transition: right 0.2s; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.MediaUploader {
  background-color: rgba(232, 232, 235, 0);
  transition: background-color 0.25s; }
  .MediaUploader__buttons-wrap {
    right: 2px;
    top: 0;
    position: absolute;
    z-index: 1; }
  .MediaUploader--loading {
    height: 32px;
    background-color: #e8e8eb;
    border-radius: 8px; }
  .MediaUploader--loading .MediaUploader__input-wrap {
    opacity: 0;
    pointer-events: none; }
  .MediaUploader__progress-bar {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    z-index: 1;
    opacity: 1;
    transition: opacity 0.25s;
    pointer-events: none; }
    .MediaUploader__progress-bar--hide {
      opacity: 0;
      transition: opacity 0.25s; }
  .MediaUploader__input-wrap {
    position: relative;
    opacity: 1;
    transition: opacity 0.25s; }
  .MediaUploader__dropzone__input {
    padding-right: 64px !important; }
  .MediaUploader__dropzone--active {
    box-shadow: #0975EF 0 0 0 1px inset; }
  .MediaUploader__buttons__button, .MediaUploader__upload-button {
    color: #656568 !important; }
    .MediaUploader__buttons__button:active, .MediaUploader__upload-button:active {
      color: #101820 !important; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.SettingsPlatformChatModalChatWindow {
  flex: 1;
  display: flex;
  align-items: stretch;
  height: 0; }
  .SettingsPlatformChatModalChatWindow--scrollable {
    overflow: auto; }
  .SettingsPlatformChatModalChatWindow__settings {
    flex: 1;
    padding: 16px; }
    .SettingsPlatformChatModalChatWindow__settings__section {
      margin-bottom: 25px; }
      .SettingsPlatformChatModalChatWindow__settings__section__switch-section {
        display: flex;
        align-items: center;
        margin-bottom: 8px; }
        .SettingsPlatformChatModalChatWindow__settings__section__switch-section__input {
          margin-bottom: 8px; }
        .SettingsPlatformChatModalChatWindow__settings__section__switch-section > label {
          flex: 1;
          margin-bottom: 0; }
      .SettingsPlatformChatModalChatWindow__settings__section__text-input {
        flex: none;
        margin-left: 30px;
        margin-right: 30px; }
        .SettingsPlatformChatModalChatWindow__settings__section__text-input__radio {
          margin-bottom: 8px; }
        .SettingsPlatformChatModalChatWindow__settings__section__text-input__letter-input {
          text-align: center;
          width: 72px !important; }
        .SettingsPlatformChatModalChatWindow__settings__section__text-input--hidden {
          display: none; }
        .SettingsPlatformChatModalChatWindow__settings__section__text-input__text {
          margin-left: 30px;
          margin-bottom: 4px;
          font-size: 12px;
          color: #656568;
          margin-top: 4px; }
          .SettingsPlatformChatModalChatWindow__settings__section__text-input__text--hidden {
            display: none; }
      .SettingsPlatformChatModalChatWindow__settings__section__icon-input {
        flex: auto;
        width: 100%;
        order: 3;
        flex-shrink: 0;
        min-width: 200px; }
        .SettingsPlatformChatModalChatWindow__settings__section__icon-input__radio {
          margin-bottom: 8px; }
        .SettingsPlatformChatModalChatWindow__settings__section__icon-input__input {
          margin-left: 30px; }
        .SettingsPlatformChatModalChatWindow__settings__section__icon-input__text {
          margin-left: 30px;
          font-size: 12px;
          color: #E8E8EB;
          margin-top: 8px; }
      .SettingsPlatformChatModalChatWindow__settings__section__input-color {
        width: 115px; }
    .SettingsPlatformChatModalChatWindow__settings__qr-options {
      display: flex; }
      .SettingsPlatformChatModalChatWindow__settings__qr-options__subsection {
        flex: 1; }
        .SettingsPlatformChatModalChatWindow__settings__qr-options__subsection__label {
          font-size: 12px;
          color: #656568;
          margin-bottom: 8px; }
  .SettingsPlatformChatModalChatWindow .RadioButtons__option {
    display: block; }
  .SettingsPlatformChatModalChatWindow__preview {
    padding-bottom: 0 !important;
    display: flex;
    border-left: 1px solid #E8E8EB;
    flex-direction: column;
    justify-content: flex-end; }
    .SettingsPlatformChatModalChatWindow__preview__group {
      width: auto !important;
      margin-bottom: 16px !important; }
      .SettingsPlatformChatModalChatWindow__preview__group--bot, .SettingsPlatformChatModalChatWindow__preview__group--agent {
        margin-left: 20px; }
      .SettingsPlatformChatModalChatWindow__preview__group--presence {
        margin-left: auto;
        margin-right: auto;
        font-size: 14px;
        color: #535358; }
      .SettingsPlatformChatModalChatWindow__preview__group__avatar {
        position: absolute;
        bottom: 0;
        left: -30px; }
    .SettingsPlatformChatModalChatWindow__preview__message-input {
      margin-left: -16px;
      margin-right: -16px;
      padding: 8px;
      border-top: 1px solid #E8E8EB;
      display: flex;
      align-items: center; }
      .SettingsPlatformChatModalChatWindow__preview__message-input__input {
        flex: 1;
        background: #F3F3F5;
        border-radius: 8px;
        padding: 8px;
        font-size: 16px;
        line-height: 16px;
        color: #656568; }
      .SettingsPlatformChatModalChatWindow__preview__message-input__submit-button {
        align-items: center;
        opacity: 0.6;
        width: 24px;
        height: 24px;
        display: flex;
        justify-content: center;
        border-radius: 12px;
        margin-left: 8px; }
    .SettingsPlatformChatModalChatWindow__preview__branded-link {
      font-size: 12px;
      text-align: center;
      margin-bottom: 4px; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.ChatButton {
  flex: 1;
  display: flex;
  align-items: stretch;
  height: 0; }
  .ChatButton__settings {
    flex: 1;
    padding: 16px;
    overflow: auto; }
    .ChatButton__settings__section {
      margin-bottom: 24px; }
      .ChatButton__settings__section__text-input {
        flex: none;
        margin-left: 30px; }
        .ChatButton__settings__section__text-input--hidden {
          display: none; }
        .ChatButton__settings__section__text-input__text {
          margin-left: 30px;
          margin-bottom: 4px;
          font-size: 12px;
          color: #656568;
          margin-top: 4px; }
          .ChatButton__settings__section__text-input__text--hidden {
            display: none; }
    .ChatButton__settings__input-color {
      width: 115px; }
  .ChatButton__preview {
    flex: 1;
    position: relative;
    padding: 16px;
    background-color: #F3F3F5; }
    .ChatButton__preview__chat-button {
      align-items: center;
      justify-content: center;
      display: flex;
      position: absolute;
      bottom: 16px;
      right: 16px;
      border: 1px solid rgba(0, 0, 0, 0.05);
      box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.1);
      padding: 0; }
    .ChatButton__preview__chat-button:active {
      transform: scale(0.94) !important; }
    .ChatButton__preview__chat-button:focus {
      outline: none; }
    .ChatButton__preview__chat-button:hover:after {
      opacity: 1 !important; }
    .ChatButton__preview__chat-button:after {
      content: "" !important;
      width: 100% !important;
      height: 100% !important;
      position: absolute !important;
      top: -1px !important;
      left: -1px !important;
      opacity: 0 !important;
      border: 1px solid rgba(0, 0, 0, 0.05) !important;
      border-radius: 50% !important;
      overflow: hidden !important;
      background-color: rgba(0, 0, 0, 0.1) !important;
      transition: opacity 120ms ease !important; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.SettingsPlatformsChatModal__fake-text-input {
  background-color: #F3F3F5;
  border-radius: 8px;
  padding: 8px;
  position: relative;
  word-break: break-all; }
  .SettingsPlatformsChatModal__fake-text-input__comment {
    color: #656568; }
  .SettingsPlatformsChatModal__fake-text-input__code-snippet {
    white-space: pre-line; }
    .SettingsPlatformsChatModal__fake-text-input__code-snippet__tabbed {
      padding-left: 2em; }
    .SettingsPlatformsChatModal__fake-text-input__code-snippet.m-top {
      margin-bottom: 16px; }
  .SettingsPlatformsChatModal__fake-text-input__copy {
    position: absolute;
    bottom: 8px;
    right: 8px;
    font-size: 14px;
    color: #0975EF;
    cursor: pointer; }

.SettingsPlatformsChatModal__range-input {
  -webkit-appearance: none;
  height: 44px;
  width: 66%;
  background-color: transparent; }
  .SettingsPlatformsChatModal__range-input:after {
    content: attr(data-value) "%";
    position: absolute;
    top: 12px;
    right: -50px;
    padding-left: 10px;
    color: #656568; }

.SettingsPlatformsChatModal__privacy-section__input {
  display: flex;
  margin-bottom: 8px; }
  .SettingsPlatformsChatModal__privacy-section__input__hidden {
    display: none !important; }

.SettingsPlatformsChatModal__select {
  display: inline-block;
  height: auto; }

.SettingsPlatformsChatModal__bottom__delete {
  margin-left: auto; }

.SettingsPlatformsChatModal__input-container {
  display: flex;
  margin-bottom: 8px; }

.SettingsPlatformsChatModal__section__sub-section {
  width: 50%;
  display: inline-table;
  margin-bottom: 8px; }
  .SettingsPlatformsChatModal__section__sub-section:nth-child(2n) {
    width: calc(50% - 8px);
    margin-right: 8px !important; }
  .SettingsPlatformsChatModal__section__sub-section__title {
    flex: 1;
    margin-bottom: 0 !important; }

.SettingsPlatformsMessengerModal__bottom__delete {
  margin-left: auto; }

.SettingsPlatformsSmsModal__bottom__delete {
  margin-left: auto; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.ReadOnlyInput {
  position: relative; }
  .ReadOnlyInput .g-input, .ReadOnlyInput .g-input:focus {
    background-color: #FFFFFF;
    color: #101820 !important;
    border-color: #F3F3F5;
    padding-right: 26px; }
  .ReadOnlyInput .Tooltip--clicked .ReadOnlyInput__search-icon-container__icon {
    fill: #0975EF !important; }
  .ReadOnlyInput__search-icon-container {
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -10px;
    width: 20px;
    height: 20px;
    cursor: pointer;
    color: #656568; }
    .ReadOnlyInput__search-icon-container:active {
      color: #101820; }
    .ReadOnlyInput__search-icon-container svg {
      transition: all 180ms ease; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.InputClearable {
  position: relative; }
  .InputClearable__input {
    padding-right: 32px !important;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden; }
    .InputClearable__input--invalid {
      border: 2px solid #FB9804 !important; }
  .InputClearable:hover .InputClearable__icon-container {
    opacity: 1; }
  .InputClearable__icon-container {
    opacity: 0;
    height: 100%;
    position: absolute;
    top: 0;
    right: 8px;
    display: flex;
    align-items: center;
    transition: opacity 150ms ease;
    cursor: pointer;
    color: #656568; }
    .InputClearable__icon-container:active {
      color: #101820; }
    .InputClearable__icon-container--type-chevron {
      pointer-events: none; }
    .InputClearable__icon-container__icon {
      height: 20px;
      width: 20px; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.ModalNotification {
  border-radius: 8px;
  background-color: #FDF2CD;
  margin-bottom: 16px;
  overflow: hidden; }
  .ModalNotification__close-icon-container {
    width: 25px;
    height: 25px;
    opacity: 0.3;
    position: absolute;
    right: 14px; }
  .ModalNotification__Document {
    width: 25px;
    height: 25px;
    position: absolute;
    left: 12px; }
  .ModalNotification__link {
    display: block;
    padding: 16px;
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #6B5027; }
  .ModalNotification__content {
    flex: 1;
    font-size: 14px;
    text-align: center; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.NumberedSteps__block {
  padding-left: 24px; }

.NumberedSteps__step {
  margin-left: 12px;
  padding-bottom: 16px; }

.NumberedSteps__step:last-child {
  border-left: 0; }

.NumberedSteps__step-number, .NumberedSteps__checkmark {
  position: absolute;
  width: 24px;
  height: 24px;
  left: -16px;
  top: 0px;
  border: 4px solid white;
  z-index: 9; }

.NumberedSteps__step-number {
  background: #C4C4CA;
  color: #FFFFFF;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600; }

.NumberedSteps__checkmark {
  background: #FFFFFF;
  border: 0; }

.NumberedSteps__step--active .NumberedSteps__step-number {
  background: #0975EF; }

.NumberedSteps .SettingsPlatformsZendeskModal__section-heading {
  color: #C4C4CA; }

.NumberedSteps .SettingsPlatformsZendeskModal__section-row {
  display: none; }

.NumberedSteps__step--active .SettingsPlatformsZendeskModal__section-heading, .NumberedSteps__step--complete .SettingsPlatformsZendeskModal__section-heading {
  color: #101820; }

.NumberedSteps__step--active .SettingsPlatformsZendeskModal__section-row, .NumberedSteps__step--complete .SettingsPlatformsZendeskModal__section-row {
  display: block; }

.NumberedSteps__step--active .SettingsPlatformsZendeskModal__section-row--flex, .NumberedSteps__step--complete .SettingsPlatformsZendeskModal__section-row--flex {
  display: flex; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.SettingsPlatformsZendeskModal__label-tooltip, .SettingsPlatformsZendeskModal__section-heading-tooltip {
  display: flex !important; }
  .SettingsPlatformsZendeskModal__label-tooltip > span, .SettingsPlatformsZendeskModal__section-heading-tooltip > span {
    flex: 1; }

.SettingsPlatformsZendeskModal__section-heading {
  font-size: 24px;
  font-weight: 600; }

.SettingsPlatformsZendeskModal__section-row {
  margin-top: 4px; }

.SettingsPlatformsZendeskModal__section-row--flex {
  display: flex; }

.SettingsPlatformsZendeskModal__input-col {
  flex: 1; }
  .SettingsPlatformsZendeskModal__input-col:first-child {
    margin-right: 8px; }

.SettingsPlatformsZendeskModal__add-agent {
  margin-top: 4px; }

.SettingsPlatformsZendeskModal__bottom {
  display: block !important;
  text-align: right; }

.SettingsPlatformsZendeskModal .Modal__section__sub-section__title {
  margin-bottom: 0; }

.SettingsPlatformsZendeskModal__label-tooltip span, .SettingsPlatformsZendeskModal__optional-label {
  font-size: 14px; }

.SettingsPlatformsZendeskModal__label-tooltip span {
  line-height: 24px;
  font-weight: 600; }

.SettingsPlatformsZendeskModal__optional-label {
  line-height: 16px;
  color: #656568;
  padding-bottom: 4px;
  display: inline-block; }

.SettingsPlatformsZendeskModal__agent-email-cell {
  display: inline-block;
  padding-right: 32px;
  padding-bottom: 8px; }

.SettingsPlatformsZendeskModal__agent-email-col {
  box-shadow: inset 0 -1px 0 0 #E8E8EB; }

.SettingsPlatformsZendeskModal__remove-button {
  opacity: 0;
  width: 24px;
  height: 24px;
  background: none;
  border: 0;
  padding: 0;
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -16px;
  transition: all 180ms ease;
  cursor: pointer;
  outline: none; }

.SettingsPlatformsZendeskModal__agent-email-cell:hover .SettingsPlatformsZendeskModal__remove-button {
  opacity: 1; }

.SettingsPlatformsZendeskModal .Button .Button__text {
  min-width: 64px; }

.SettingsPlatformsZendeskModal--modalClosed {
  background-color: #FFFFFF;
  transition: all 180ms ease; }

.b-settings-platforms-sms-modal__bottom__delete {
  margin-left: auto; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.Banner {
  border-radius: 6px;
  padding: 8px 8px 8px 36px;
  font-size: 14px;
  position: relative;
  line-height: 24px;
  margin-bottom: 8px; }
  .Banner__icon, .Banner__close {
    position: absolute;
    top: 50%;
    transform: translateY(-50%); }
  .Banner__icon {
    left: 10.5px;
    pointer-events: none; }
  .Banner__close {
    right: 13px;
    cursor: pointer;
    transition: .2s opacity; }
    .Banner__close:hover {
      opacity: .8; }
  .Banner--closable {
    padding-right: 36px; }
  .Banner--default {
    color: #0975EF;
    background: #EBF3FE; }
    .Banner--default svg {
      color: #0975EF; }
    .Banner--default__close {
      color: hotpink; }
  .Banner--positive {
    color: #39C379;
    background: rgba(57, 195, 121, 0.1); }
    .Banner--positive svg {
      color: #39C379; }
  .Banner--negative {
    color: #E81641;
    background: rgba(232, 22, 65, 0.05); }
    .Banner--negative svg {
      color: #E81641; }

.InputRow__label-container {
  display: flex;
  line-height: 24px;
  vertical-align: middle; }

.InputRow__label {
  font-weight: 500;
  font-size: 14px; }

.InputRow__tooltip {
  transform: translateY(2px); }

.SettingsPlatformsZendeskAgentWorkspaceModal.SettingsPlatformsZendeskAgentWorkspaceModal {
  height: auto;
  min-height: 356px; }

.ZendeskAgentWorkspace__Intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; }
  .ZendeskAgentWorkspace__Intro h2 {
    font-size: 24px;
    font-weight: 600;
    line-height: 28px;
    margin-bottom: 8px; }
  .ZendeskAgentWorkspace__Intro p {
    width: 472px;
    margin-bottom: 18px; }
  .ZendeskAgentWorkspace__Intro__popout-link {
    display: block;
    text-decoration: none;
    font-size: 14px;
    line-height: 20px; }
    .ZendeskAgentWorkspace__Intro__popout-link div {
      display: inline-block;
      margin-left: 8px; }
  .ZendeskAgentWorkspace__Intro__bottom.ZendeskAgentWorkspace__Intro__bottom {
    justify-content: space-between; }
  .ZendeskAgentWorkspace__Intro svg {
    width: 20px;
    vertical-align: bottom; }

.ZendeskAgentWorkspace__Settings__zd-social {
  display: flex;
  justify-content: space-between; }

.ZendeskAgentWorkspace__Settings__zd-social__row {
  display: flex; }

.ZendeskAgentWorkspace__Settings__zd-social__row .InputRow {
  flex: 1; }

.ZendeskAgentWorkspace__Settings__zd-social__row .InputRow:first-child {
  margin-right: 8px; }

.ZendeskAgentWorkspace__Settings__bottom.ZendeskAgentWorkspace__Settings__bottom {
  justify-content: space-between; }

.ZendeskAgentWorkspace__Settings .Banner {
  font-size: 12px;
  line-height: 16px; }

.ZendeskAgentWorkspace__Settings .InputRow {
  margin-top: 16px; }

.ZendeskAgentWorkspace__Settings h3 {
  font-weight: 600;
  font-size: 14px;
  line-height: 20px; }

.ZendeskAgentWorkspace__Settings p {
  font-size: 14px;
  line-height: 20px;
  color: #656568; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.SettingsPlatformsLAModal {
  height: auto !important; }
  .SettingsPlatformsLAModal__label-tooltip, .SettingsPlatformsLAModal__section-heading-tooltip {
    display: flex !important; }
    .SettingsPlatformsLAModal__label-tooltip > span, .SettingsPlatformsLAModal__section-heading-tooltip > span {
      flex: 1; }
  .SettingsPlatformsLAModal__optional-label {
    font-size: 14px;
    line-height: 16px;
    color: #656568;
    padding-bottom: 4px;
    display: inline-block;
    font-weight: normal; }
  .SettingsPlatformsLAModal__bottom {
    display: block !important;
    text-align: right; }
  .SettingsPlatformsLAModal__multi {
    display: flex; }
    .SettingsPlatformsLAModal__multi > :only-child {
      flex: 0.5; }
  .SettingsPlatformsLAModal .Modal__section {
    padding-bottom: 0;
    margin-bottom: 8px !important; }
  .SettingsPlatformsLAModal .Modal__content > :last-child {
    margin-bottom: 48px !important; }
  .SettingsPlatformsLAModal .Modal__section__sub-section__title {
    margin-bottom: 0;
    display: block; }
    .SettingsPlatformsLAModal .Modal__section__sub-section__title__header {
      display: flex;
      justify-content: space-between; }
  .SettingsPlatformsLAModal .Modal__section__sub-section__description {
    font-size: 14px;
    font-weight: normal; }
  .SettingsPlatformsLAModal__remove-button {
    opacity: 0;
    width: 24px;
    height: 24px;
    background: none;
    border: 0;
    padding: 0;
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -16px;
    transition: all 180ms ease;
    cursor: pointer;
    outline: none; }
  .SettingsPlatformsLAModal--modalClosed {
    background-color: #FFFFFF;
    transition: transform 180ms ease; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.HoverTooltip {
  position: relative;
  display: inline-block; }
  .HoverTooltip__tooltip {
    position: absolute;
    pointer-events: none;
    opacity: 0;
    display: flex;
    flex-flow: column nowrap;
    margin-bottom: 8px;
    z-index: 10002;
    transition: .2s opacity, .3s transform;
    transform: translateY(10px); }
    .HoverTooltip__tooltip:after {
      content: '';
      display: block; }
    .HoverTooltip__tooltip--visible {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0); }
  .HoverTooltip__content {
    color: #FFFFFF;
    background: #101820;
    border-radius: 12px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 0 16px 0 rgba(0, 0, 0, 0.08);
    padding: 8px;
    text-align: center;
    font-size: 12px;
    line-height: 16px; }
  .HoverTooltip__dimple {
    position: relative;
    height: 12px; }
    .HoverTooltip__dimple svg {
      transform: translateX(-50%) translateY(-10px) rotate(90deg);
      position: absolute;
      top: 0;
      left: 50%; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.SalesforceLAModal__modal {
  outline: 2px solid orange;
  transition: .45s max-height;
  max-height: 70vh; }
  .SalesforceLAModal__modal--intro {
    max-height: 340px; }

.SalesforceLAModal__intro {
  margin: 32px 0;
  text-align: center; }
  .SalesforceLAModal__intro h6 {
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    margin: 0 0 8px; }
  .SalesforceLAModal__intro p {
    font-weight: normal;
    font-size: 14px;
    line-height: 20px;
    max-width: 400px;
    margin: 0 auto 18px; }
  .SalesforceLAModal__intro a {
    font-size: 14px;
    line-height: 20px;
    display: inline-block;
    margin: 0 auto;
    padding: 0 1em;
    text-decoration: none; }
    .SalesforceLAModal__intro a svg {
      vertical-align: text-bottom;
      margin-right: 8px; }

.SalesforceLAModal__toast {
  color: #0975EF;
  background: #EBF3FE;
  border-radius: 6px;
  padding: 8px 8px 8px 36px;
  font-size: 12px;
  position: relative;
  line-height: 24px;
  margin-bottom: 8px; }
  .SalesforceLAModal__toast svg {
    color: #0975EF;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 10.5px; }

.SalesforceLAModal__row {
  margin-bottom: 8px; }
  .SalesforceLAModal__row--split {
    display: flex;
    width: 100%; }

.SalesforceLAModal__cell {
  flex: 0.5; }
  .SalesforceLAModal__cell:first-child {
    margin-right: 8px; }

.SalesforceLAModal__divider {
  height: 8px;
  background: #F3F3F5;
  margin: 24px -16px;
  border: none; }

.SalesforceLAModal__link-block h6 {
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 4px; }

.SalesforceLAModal__link-block p {
  font-size: 14px;
  line-height: 20px;
  color: #656568;
  margin-bottom: 16px; }

.SalesforceLAModal__actions {
  display: flex;
  width: 100%; }

.SalesforceLAModal__cancel-button {
  margin-right: auto; }

.SalesforceLAModal__connected-status {
  border: 1px solid #E8E8EB;
  border-radius: 6px;
  padding: 16px 8px 16px 48px;
  position: absolute;
  display: flex;
  width: 100%;
  line-height: 20px;
  margin-bottom: 16px; }
  .SalesforceLAModal__connected-status svg {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #39C379; }

.SalesforceLAModal__disconnect {
  margin-left: auto;
  -moz-appearance: none;
  -webkit-appearance: none;
  background: transparent;
  color: #0975EF;
  border: none;
  cursor: pointer; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.KeyValuePairs {
  display: flex;
  flex-direction: column; }
  .KeyValuePairs__pair {
    display: flex;
    margin-bottom: 4px; }
    .KeyValuePairs__pair__key {
      color: #656568;
      font-size: inherit;
      flex: 1;
      text-transform: capitalize; }
    .KeyValuePairs__pair__value {
      color: #3C3C3F;
      flex: 3; }


@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.ButtonGroup {
  display: inline-flex; }
  .ButtonGroup--disabled {
    pointer-events: none; }
  .ButtonGroup__button {
    min-width: 85px;
    cursor: pointer;
    border-radius: 0;
    background-color: #FFFFFF;
    outline: none;
    color: #3C3C3F;
    box-shadow: none;
    border: 1px solid #E8E8EB;
    z-index: 0;
    margin-right: -1px;
    flex: 1; }
    .ButtonGroup__button--active, .ButtonGroup__button:active {
      color: #0975EF;
      background-color: #EBF3FE;
      border: 1px solid #BEDAFB;
      z-index: 1; }
    .ButtonGroup__button:first-child {
      border-radius: 6px 0 0 6px; }
    .ButtonGroup__button:last-child {
      border-radius: 0 6px 6px 0; }
    .ButtonGroup__button--disabled {
      color: #656568; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.MultilingualInput__header {
  display: flex;
  justify-content: space-between; }

.MultilingualInput__label {
  font-size: 14px;
  font-weight: 500;
  line-height: 24px; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.SettingsSatisfactionModalPreview {
  position: relative;
  height: 100%;
  overflow: hidden;
  user-select: none;
  background-color: #F3F3F5; }
  .SettingsSatisfactionModalPreview__navigation {
    position: absolute;
    padding: 10px 0 20px;
    left: 16px;
    right: 16px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center; }
  .SettingsSatisfactionModalPreview__navigation-label {
    padding: 0 8px;
    font-size: 14px;
    font-weight: 500; }
  .SettingsSatisfactionModalPreview__messages {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    padding: 0 16px; }
  .SettingsSatisfactionModalPreview__sample-message {
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 24px; }
    .SettingsSatisfactionModalPreview__sample-message--client {
      background: #D4E6FC;
      margin-left: auto; }
    .SettingsSatisfactionModalPreview__sample-message--bot {
      background: #E8E8EB;
      margin-right: auto; }
  .SettingsSatisfactionModalPreview__sample-message--bot + .SettingsSatisfactionModalPreview__sample-message--bot {
    margin-top: -16px; }
  .SettingsSatisfactionModalPreview__input-block {
    padding: 8px 16px;
    display: flex;
    border-top: 1px solid #F3F3F5;
    margin: 16px -16px 0 -16px; }
  .SettingsSatisfactionModalPreview__input-block-input {
    flex-grow: 1;
    background-color: #E8E8EB;
    border-radius: 6px;
    height: 32px; }
  .SettingsSatisfactionModalPreview__input-block-send-button {
    width: 32px;
    height: 32px;
    color: #E8E8EB;
    margin-left: 2px; }
  .SettingsSatisfactionModalPreview__survey-block {
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border: 1px solid #E8E8EB;
    border-radius: 12px;
    padding: 40px 16px 24px;
    min-height: 230px; }
  .SettingsSatisfactionModalPreview__sample-message--bot + .SettingsSatisfactionModalPreview__survey-block {
    margin-top: -16px; }
  .SettingsSatisfactionModalPreview__survey-block-message {
    text-align: center;
    font-size: 14px;
    white-space: pre-wrap; }
  .SettingsSatisfactionModalPreview__survey-block-buttons {
    position: absolute;
    top: 104px;
    left: 16px;
    right: 16px; }
  .SettingsSatisfactionModalPreview__survey-block-buttons--yes-no {
    display: flex;
    justify-content: center; }
  .SettingsSatisfactionModalPreview__survey-block-button {
    border-radius: 6px;
    color: #101820;
    border: 1px solid #F3F3F5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 500;
    padding: 11px 0; }
  .SettingsSatisfactionModalPreview__survey-block-buttons--yes-no .SettingsSatisfactionModalPreview__survey-block-button {
    min-width: 118px;
    margin: 0 8px; }
  .SettingsSatisfactionModalPreview__survey-block-scale {
    position: absolute;
    top: 104px;
    left: 16px;
    right: 16px; }
  .SettingsSatisfactionModalPreview__survey-block-scale-grade {
    display: flex; }
  .SettingsSatisfactionModalPreview__survey-block-scale-item {
    flex: 1 1 0; }
  .SettingsSatisfactionModalPreview__survey-block-scale-item:not(:last-child) {
    margin-right: 4px; }
  .SettingsSatisfactionModalPreview__survey-block-scale-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 4px; }
  .SettingsSatisfactionModalPreview__survey-block-scale-label {
    font-size: 10px;
    color: #535358; }
  .SettingsSatisfactionModalPreview__survey-block-comment-input {
    margin-top: 24px; }
  .SettingsSatisfactionModalPreview__survey-block-submit-button {
    margin: 16px auto auto;
    padding: 8px 16px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    color: #0975EF;
    border-radius: 6px;
    border: 1px solid #F3F3F5;
    box-shadow: 0 1px 2px rgba(2, 14, 29, 0.08); }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.SettingsSatisfactionModal__content {
  flex: 1;
  display: flex;
  height: 0; }

.SettingsSatisfactionModal__settings {
  flex: 1 1 0;
  overflow: auto;
  padding: 32px;
  z-index: 1; }

.SettingsSatisfactionModal__settings-section {
  margin-bottom: 48px; }
  .SettingsSatisfactionModal__settings-section--sub {
    margin-bottom: 24px; }
  .SettingsSatisfactionModal__settings-section:last-child {
    margin-bottom: 0; }

.SettingsSatisfactionModal__settings-section-checkbox {
  float: right;
  position: relative;
  top: -4px;
  z-index: 1; }

.SettingsSatisfactionModal__settings-section-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 24px; }
  .SettingsSatisfactionModal__settings-section-title--small {
    font-size: 14px;
    margin-bottom: 4px; }

.SettingsSatisfactionModal__settings-section-description {
  font-size: 14px;
  color: #656568;
  margin-bottom: 16px; }

.SettingsSatisfactionModal__settings-text-input {
  margin-bottom: 16px; }

.SettingsSatisfactionModal__settings-text-input-label {
  font-size: 14px;
  font-weight: 500;
  line-height: 24px; }

.SettingsSatisfactionModal__scale-type-picker {
  display: flex;
  align-items: center;
  margin-top: 8px;
  margin-bottom: 8px; }

.SettingsSatisfactionModal__scale-range-picker {
  display: flex;
  align-items: center;
  margin-top: 8px;
  margin-bottom: 8px; }

.SettingsSatisfactionModal__scale-range-picker-input {
  flex-grow: 1; }

.SettingsSatisfactionModal__scale-range-picker-value {
  font-size: 14px;
  font-weight: 500;
  width: 30px;
  text-align: right; }
  .SettingsSatisfactionModal__scale-range-picker-value--disabled {
    opacity: 0.5; }

.SettingsSatisfactionModal__scale-start-at-one-checkbox {
  font-size: 14px; }

.SettingsSatisfactionModal__settings-section-input-block:not(:last-child) {
  margin-bottom: 8px; }

.SettingsSatisfactionModal__preview {
  flex: 1 1 0;
  position: relative; }
  .SettingsSatisfactionModal__preview:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 20px;
    background: linear-gradient(to left, rgba(255, 255, 255, 0), #F3F3F5);
    pointer-events: none; }

.SettingsSatisfactionModal__controls {
  justify-content: flex-end;
  padding: 16px !important; }

.SettingsSatisfactionModal__controls-button {
  margin-left: 8px;
  min-width: 120px; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.SettingsAuthentication {
  height: 100%;
  width: 100%;
  overflow: auto; }
  .SettingsAuthentication__description {
    display: flex;
    align-items: center; }
    .SettingsAuthentication__description__new-auth-btn-wrapper {
      align-self: flex-start; }
    .SettingsAuthentication__description__wrapper {
      padding-bottom: 28px;
      padding-right: 28px;
      line-height: 20px; }
    .SettingsAuthentication__description__title h5 {
      flex: 1;
      font-weight: 500;
      font-size: 24px;
      margin-bottom: 5px; }
    .SettingsAuthentication__description__content {
      font-size: 14px;
      color: #656568; }
      .SettingsAuthentication__description__content p {
        font-size: 14px;
        color: #656568; }
      .SettingsAuthentication__description__content__link {
        color: #656568; }
  .SettingsAuthentication__default {
    margin-top: 12px;
    width: 100%;
    height: 520px;
    border: 1px solid #E8E8EB;
    box-sizing: border-box;
    border-radius: 6px;
    background-color: #F3F3F5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; }
    .SettingsAuthentication__default__content {
      font-size: 16px;
      color: #C4C4CA;
      text-align: center;
      z-index: 1; }
      .SettingsAuthentication__default__content__add {
        background-color: #F3F3F5;
        color: #0975EF;
        font-size: 16px;
        text-decoration: underline;
        cursor: pointer;
        border: none;
        margin-top: 5px; }
    .SettingsAuthentication__default__image {
      margin-top: 20px; }
  .SettingsAuthentication__authentication-list {
    font-style: normal;
    font-weight: normal;
    line-height: normal;
    font-size: 12px;
    background: #FFFFFF;
    border: 1px solid #E8E8EB;
    box-sizing: border-box;
    border-radius: 6px;
    padding: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 8px; }
    .SettingsAuthentication__authentication-list__description {
      flex: 1;
      max-width: calc(100% - (195px + 5 * 8px)); }
      .SettingsAuthentication__authentication-list__description > div {
        overflow: hidden;
        text-overflow: ellipsis; }
      .SettingsAuthentication__authentication-list__description__name {
        font-size: 14px;
        color: #101820; }
      .SettingsAuthentication__authentication-list__description__redirectUri {
        padding-top: 4px;
        color: #656568; }
    .SettingsAuthentication__authentication-list__button-wrapper {
      display: flex;
      margin-left: 40px;
      justify-content: center;
      align-items: center;
      flex-basis: 195px; }
    .SettingsAuthentication__authentication-list__transition-on-hover {
      opacity: 0;
      transition: opacity 180ms ease; }
    .SettingsAuthentication__authentication-list:hover .SettingsAuthentication__authentication-list__transition-on-hover {
      opacity: 1; }
    .SettingsAuthentication__authentication-list__edit-button {
      margin-left: 4px;
      margin-right: 4px; }
    .SettingsAuthentication__authentication-list__infoToolTip {
      margin-left: 6px;
      margin-right: 8px; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.SettingsAuthenticationModal {
  font-size: 14px; }
  .SettingsAuthenticationModal__optional-label {
    color: #ADADB3; }
  .SettingsAuthenticationModal__uploaded-file-block {
    background: #FFFFFF;
    border: 1px solid #E8E8EB;
    box-sizing: border-box;
    border-radius: 6px;
    padding: 12px;
    display: flex;
    justify-content: center;
    align-items: center; }
    .SettingsAuthenticationModal__uploaded-file-block__name {
      font-size: 14px;
      color: #101820;
      flex: 1;
      margin-left: 12px; }
  .SettingsAuthenticationModal__certificate-upload__wrapper {
    display: inline-block;
    margin-top: 4px; }
  .SettingsAuthenticationModal__certificate-upload__input {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    height: 100%;
    width: 100%;
    cursor: pointer; }
  .SettingsAuthenticationModal__scope-title {
    display: flex !important;
    align-items: center;
    padding-bottom: 1px;
    border-bottom: 1px solid #E8E8EB; }
    .SettingsAuthenticationModal__scope-title__wapper {
      flex: 1; }
  .SettingsAuthenticationModal__label-optional {
    color: #E8E8EB;
    flex: 1; }
  .SettingsAuthenticationModal__input-block.SettingsAuthenticationModal__input-block {
    padding-bottom: 16px; }
    .SettingsAuthenticationModal__input-block.SettingsAuthenticationModal__input-block--invalid {
      padding-bottom: 8px; }
    .SettingsAuthenticationModal__input-block.SettingsAuthenticationModal__input-block:last-child {
      padding: 0; }
  .SettingsAuthenticationModal__warning {
    color: #FB9804;
    font-size: 12px;
    line-height: 16px; }
  .SettingsAuthenticationModal__name-type {
    display: flex !important;
    align-items: center; }
    .SettingsAuthenticationModal__name-type__Name {
      width: 68%;
      flex: 1; }
    .SettingsAuthenticationModal__name-type__Type {
      width: 28%;
      padding-left: 8px; }
  .SettingsAuthenticationModal__content {
    max-height: 70vh;
    margin-right: 8px; }
  .SettingsAuthenticationModal__button-save {
    position: absolute;
    right: 8px; }
  .SettingsAuthenticationModal__button-add-scope {
    width: 24px;
    height: 24px; }
  .SettingsAuthenticationModal__scope-list__scope-row {
    display: flex;
    width: 100%;
    padding-bottom: 1px;
    border-bottom: 1px solid #E8E8EB; }
    .SettingsAuthenticationModal__scope-list__scope-row .SettingsAuthenticationModal__button-remove-scope {
      visibility: hidden; }
    .SettingsAuthenticationModal__scope-list__scope-row:hover .SettingsAuthenticationModal__button-remove-scope {
      visibility: visible; }
    .SettingsAuthenticationModal__scope-list__scope-row:hover .SettingsAuthenticationModal__button-remove-scope--first {
      visibility: hidden;
      pointer-events: none; }
    .SettingsAuthenticationModal__scope-list__scope-row__row-item {
      padding-top: 1px;
      flex: 1; }

.SettingsAuthenticationModal__notice__content {
  color: #6B5027;
  font-size: 13px;
  left: 24px;
  align-items: center;
  display: flex !important;
  width: 100%;
  padding: 16px; }
  .SettingsAuthenticationModal__notice__content__link {
    color: #6B5027; }
  .SettingsAuthenticationModal__notice__content__dismiss {
    color: #6B5027;
    background-color: #FDF2CD;
    cursor: pointer;
    position: absolute;
    right: 35px;
    border: none; }
  .SettingsAuthenticationModal__notice__content__icon {
    position: absolute;
    left: 10px;
    margin-top: 14px;
    color: #A48960; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.SelectSearchDropdown__header {
  background-color: #FFFFFF;
  border-radius: 6px;
  border: 1px solid #E8E8EB;
  height: 32px;
  cursor: pointer;
  width: 100%;
  outline: inherit; }

.SelectSearchDropdown--open .SelectSearchDropdown__header {
  outline: none; }
  .SelectSearchDropdown--open .SelectSearchDropdown__header--active {
    border-color: #0975EF;
    box-shadow: 0 0 0 1px #0975EF;
    outline: inherit; }

.SelectSearchDropdown__header-title-container {
  display: flex;
  align-items: center; }

.SelectSearchDropdown__header-title {
  display: flex;
  align-items: center;
  font-size: 14px; }

.SelectSearchDropdown__header-icon {
  margin-right: 4px;
  display: flex;
  align-items: center; }

.SelectSearchDropdown__header-arrow {
  position: absolute;
  display: flex;
  align-items: center;
  pointer-events: none;
  color: #C4C4CA;
  right: 0px; }

.SelectSearchDropdown__dropdown-container {
  z-index: 9998;
  background-color: #FFFFFF;
  border: 1px solid rgba(6, 6, 48, 0.04);
  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  margin-top: 8px;
  position: absolute;
  width: 100%; }

.SelectSearchDropdown__search-block {
  padding: 8px;
  border-bottom: 1px solid #E8E8EB; }

.SelectSearchDropdown__search-block-input {
  font-size: 14px; }

.SelectSearchDropdown__list-group {
  list-style: none;
  padding: 8px 0px;
  margin: 0px;
  overflow: auto;
  max-height: 35vh; }

.SelectSearchDropdown__list-item {
  cursor: pointer;
  font-size: 14px;
  width: 100%;
  border: none;
  background: none;
  color: #101820;
  text-align: left;
  line-height: 32px;
  padding: 0px 12px;
  outline: inherit; }
  .SelectSearchDropdown__list-item:hover {
    background-color: #F3F3F5; }
  .SelectSearchDropdown__list-item--active {
    color: #0975EF;
    background-color: #EBF3FE; }

.SelectSearchDropdown__list-item-selected-icon {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  pointer-events: none; }

.SelectSearchDropdown__list-separator {
  width: 100%;
  border-bottom: 1px solid #E8E8EB;
  padding-top: 8px;
  margin-bottom: 8px; }

.SelectSearchDropdown__search-no-results {
  text-align: center;
  font-size: 14px;
  padding: 8px 0px; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.ButtonGroupMultiSelect {
  display: inline-flex; }
  .ButtonGroupMultiSelect--invalid {
    z-index: 10 !important;
    border-radius: 6px;
    border-right: 1px rgba(0, 0, 0, 0) solid !important;
    box-shadow: 0px 0px 0px 2px #FB9804 !important; }
  .ButtonGroupMultiSelect__button {
    min-width: 38px;
    cursor: pointer;
    border-radius: 0;
    background-color: #FFFFFF;
    outline: none;
    color: #101820;
    box-shadow: none;
    border: 1px solid #E8E8EB;
    z-index: 0;
    margin-right: -1px; }
    .ButtonGroupMultiSelect__button--invalid {
      z-index: 10 !important;
      border-radius: 2px;
      border: 1px rgba(0, 0, 0, 0) solid !important;
      box-shadow: 0px 0px 0px 2px #FB9804 !important; }
    .ButtonGroupMultiSelect__button--active, .ButtonGroupMultiSelect__button:active {
      color: #0975EF;
      background-color: #EBF3FE;
      border: 1px solid #BEDAFB;
      z-index: 1; }
    .ButtonGroupMultiSelect__button:first-child {
      border-radius: 6px 0 0 6px; }
    .ButtonGroupMultiSelect__button:last-child {
      border-radius: 0 6px 6px 0; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.DatePicker {
  background-color: transparent;
  width: 250px;
  padding: 8px;
  user-select: none; }
  .DatePicker__selectors {
    display: flex;
    align-items: center;
    margin-bottom: 10px; }
  .DatePicker__selectors-button {
    background: none;
    border: none;
    font: inherit;
    outline: inherit;
    box-shadow: none; }
    .DatePicker__selectors-button:disabled {
      opacity: 0;
      visibility: hidden;
      transition-duration: 0ms; }
  .DatePicker__selectors-button svg {
    width: 18px;
    height: 18px; }
  .DatePicker__selectors-dates {
    flex-grow: 1; }
  .DatePicker__selectors-dates-month {
    display: flex;
    cursor: pointer; }
  .DatePicker__selectors-dates-month:hover {
    opacity: 1; }
  .DatePicker__selectors-dates-month-title {
    background: none;
    border: none;
    font: inherit;
    outline: inherit;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    line-height: 24px;
    font-weight: bold;
    cursor: pointer; }
  .DatePicker__dates {
    display: flex;
    flex-wrap: wrap;
    padding: 1px 0 0 1px; }
  .DatePicker__dates-names {
    width: 100%;
    display: flex;
    margin-bottom: 5px; }
  .DatePicker__dates-names-name {
    flex: 1;
    min-width: calc(1 / 7 * 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #656568;
    font-size: 12px; }
  .DatePicker__dates-date {
    background: none;
    font: inherit;
    outline: inherit;
    flex: 1 1 auto;
    width: calc(1 / 7 * 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    cursor: pointer;
    font-size: 12px;
    border-radius: 4px;
    border: 1px solid white; }
    .DatePicker__dates-date:hover:not(.DatePicker__dates-date--disabled) {
      background-color: #BEDAFB; }
    .DatePicker__dates-date:focus {
      outline: 0; }
    .DatePicker__dates-date--active {
      background-color: #0975EF !important;
      border: 1px solid #005DC7;
      color: white;
      padding: 7px; }
    .DatePicker__dates-date--hover-active {
      background-color: #EBF3FE; }
    .DatePicker__dates-date--hover-active:hover {
      background-color: #BEDAFB; }
    .DatePicker__dates-date--disabled {
      flex: 1 1 auto;
      width: calc(1 / 7 * 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 8px;
      font-size: 12px;
      border-radius: 4px;
      border: 1px solid white;
      color: #C4C4CA;
      cursor: default; }
      .DatePicker__dates-date--disabled:focus {
        outline: 0; }
  .DatePicker__dates-date-placeholder {
    border-color: transparent;
    height: 0;
    padding: 0;
    pointer-events: none; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.DatePickerDropdown {
  margin-right: 8px; }
  .DatePickerDropdown__dropdown-container {
    display: flex;
    z-index: 9998;
    position: absolute;
    margin-top: 7px;
    left: 0;
    background-color: #FFFFFF;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 0 10px 0 rgba(0, 0, 0, 0.18);
    border-radius: 6px;
    padding: 0;
    opacity: 1;
    transition: opacity 1s; }
  .DatePickerDropdown--align-right .DatePickerDropdown__dropdown-container {
    left: auto;
    right: 0; }
  .DatePickerDropdown__header {
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: #FFFFFF;
    border-radius: 6px;
    border: 1px solid #E8E8EB;
    cursor: pointer;
    padding: 0 35px 0 11px;
    font: inherit;
    outline: inherit;
    color: #101820;
    height: 32px;
    box-shadow: 0 1px 2px 0 rgba(31, 34, 36, 0.04);
    width: 100%; }
    .DatePickerDropdown__header:active {
      background-color: #F3F3F5;
      border-color: transparent;
      box-shadow: 0 1px 2px 0 rgba(31, 34, 36, 0); }
  .DatePickerDropdown--open .DatePickerDropdown__header {
    border-color: #0975EF;
    box-shadow: 0 0 0 1px #0975EF;
    background-color: #F3F3F5; }
  .DatePickerDropdown__header-icon {
    margin-right: 9px;
    display: flex;
    align-items: center;
    margin-top: -1px; }
  .DatePickerDropdown__header-arrow {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    pointer-events: none;
    color: #535358; }
  .DatePickerDropdown__header-title-container {
    display: flex; }
  .DatePickerDropdown__header-title {
    margin-top: -1px;
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 500; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.SettingsScheduleRow__row {
  display: flex;
  align-items: flex-start;
  padding: 8px 0; }
  .SettingsScheduleRow__row__error {
    margin-top: 2px;
    line-height: 12px;
    font-size: 10px;
    color: #FB9804;
    font-weight: 500; }

.SettingsScheduleRow__row:hover .SettingsScheduleRow__remove-row {
  opacity: 1 !important; }

.SettingsScheduleRow__remove-row {
  opacity: 0;
  margin-left: auto;
  transition: opacity ease 180ms; }

.SettingsScheduleRow__all-day {
  display: flex;
  align-items: center;
  height: 32px; }
  .SettingsScheduleRow__all-day__checkbox {
    margin-right: 8px; }

.SettingsScheduleRow__label {
  color: #656568; }
  .SettingsScheduleRow__label__all-day {
    color: #C4C4CA; }

.SettingsScheduleRow__day-selector {
  margin-right: 16px; }

.SettingsScheduleRow__date-selector {
  margin-right: 8px;
  width: 268px; }

.SettingsScheduleRow__day-selector-buttons button {
  padding: 0px; }

.SettingsScheduleRow__time-selector-container {
  margin-right: 16px;
  display: inline-flex;
  align-items: center; }
  .SettingsScheduleRow__time-selector-container--collapse {
    display: none; }

.SettingsScheduleRow__time-selector {
  width: 104px; }
  .SettingsScheduleRow__time-selector--from {
    margin-right: 8px; }
  .SettingsScheduleRow__time-selector--to {
    margin-left: 8px; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.SettingsSchedulesModal__input__error-message {
  margin-top: 2px;
  line-height: 12px;
  font-size: 10px;
  color: #FB9804;
  font-weight: 500; }

.SettingsSchedulesModal__content {
  padding: 0 !important; }

.SettingsSchedulesModal__section {
  padding: 16px; }

.SettingsSchedulesModal__name-timezone-section {
  display: flex; }

.SettingsSchedulesModal__name-input {
  flex: 1;
  padding-right: 16px;
  font-size: 14px; }
  .SettingsSchedulesModal__name-input__label {
    margin-bottom: 4px; }

.SettingsSchedulesModal__timezone-selector {
  width: 50%; }

.SettingsSchedulesModal__button-cancel {
  position: absolute;
  left: 16px; }

.SettingsSchedulesModal__repeat-every-section, .SettingsSchedulesModal__exception-section {
  border-top: 8px #F3F3F5 solid; }

.SettingsSchedulesModal__panel {
  background: #FFFFFF;
  box-sizing: border-box;
  font-size: 14px; }

.SettingsSchedulesModal__panel-header {
  padding: 0 0 4px 0;
  display: flex;
  align-items: center;
  line-height: 24px; }

.SettingsSchedulesModal__panel-title {
  font-weight: 500;
  color: #101820; }
  .SettingsSchedulesModal__panel-title--greyed {
    color: #ADADB3; }

.SettingsSchedulesModal__panel-footer__button {
  width: 100%;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  background-color: #FFFFFF;
  outline: inherit;
  display: flex;
  color: #656568;
  padding: 8px 4px;
  margin: 4px 0; }
  .SettingsSchedulesModal__panel-footer__button:hover {
    background-color: #F3F3F5; }

.SettingsSchedulesModal__panel-icon {
  margin-right: 4px;
  fill: #101820; }

.SettingsSchedulesModal__panel-header-button {
  margin-left: auto;
  height: 24px; }

.SettingsSchedulesModal__panel-divider {
  width: 100%;
  background: #E8E8EB;
  height: 1px;
  border-width: 0px;
  margin: 0; }

.SettingsSchedulesModal__errors {
  color: #FB9804;
  margin: 0px 20px;
  display: flex;
  align-items: center; }
  .SettingsSchedulesModal__errors__description {
    font-size: 12px; }

.SettingsSchedulesModal__invalid {
  border: 2px solid;
  border-radius: 5px;
  border-color: #FB9804; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.Pill {
  display: inline-flex;
  border-radius: 25px;
  margin: 4px 2px 4px 2px;
  background-color: #7379BF;
  padding: 4px;
  padding-left: 8px;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  color: #FFFFFF;
  line-height: 14px;
  height: 24px; }
  .Pill--dark {
    color: #FFFFFF; }
  .Pill--light {
    color: #101820; }
  .Pill__button {
    transform: translate3d(0, 0, 0);
    margin: 0 -4px 0 4px; }
    .Pill__button:hover {
      opacity: 1; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.BotRoutingConfig__letter--dark {
  color: #101820; }

.BotRoutingConfig__letter--light {
  color: #FFFFFF; }

.BotRoutingConfig__body {
  background-color: #F3F3F5;
  padding: 16px;
  overflow: auto;
  flex: 1; }

.BotRoutingConfig__topics {
  background-color: #FFFFFF;
  border-radius: 8px;
  border: 1px solid #E8E8EB;
  padding: 6px; }
  .BotRoutingConfig__topics__title {
    background-color: inherit;
    display: inline-flex; }
    .BotRoutingConfig__topics__title__text {
      display: inline-block;
      font-weight: 500;
      padding-right: 2px;
      font-size: 14px;
      padding-bottom: 8px; }
    .BotRoutingConfig__topics__title__tooltip {
      display: inline-block; }
  .BotRoutingConfig__topics__add {
    margin-bottom: 8px; }
  .BotRoutingConfig__topics__error {
    margin-bottom: 8px;
    display: flex;
    align-items: center; }
    .BotRoutingConfig__topics__error__text {
      color: #656568;
      font-size: 12px;
      padding-left: 4px;
      margin-bottom: 6px; }
  .BotRoutingConfig__topics__placeholder {
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 4px;
    font-size: 12px;
    color: #C4C4CA; }
  .BotRoutingConfig__topics__pills {
    border-radius: 8px;
    border: 1px solid #E8E8EB;
    padding: 4px;
    max-height: 470px;
    overflow-y: auto; }

.BotRoutingConfig__bots__title {
  background-color: inherit;
  display: flex;
  flex-direction: row; }
  .BotRoutingConfig__bots__title__text {
    font-weight: 500;
    padding-right: 2px;
    font-size: 14px;
    padding-bottom: 12px; }
  .BotRoutingConfig__bots__title__toolTip {
    display: inline-block; }

.BotRoutingConfig__bots__bot {
  background-color: #FFFFFF;
  border-radius: 8px;
  border: 1px solid #E8E8EB;
  padding: 8px;
  display: flex;
  flex-direction: row;
  margin-bottom: 8px; }
  .BotRoutingConfig__bots__bot__background {
    height: 24px;
    width: 24px;
    border-radius: 50%;
    flex: none;
    display: flex;
    justify-content: center; }
    .BotRoutingConfig__bots__bot__background__icon {
      align-self: center;
      border-radius: 50%;
      fill: #FFFFFF;
      width: 20px;
      height: 20px; }
    .BotRoutingConfig__bots__bot__background svg {
      fill: inherit;
      height: inherit;
      width: inherit; }
    .BotRoutingConfig__bots__bot__background__text {
      align-self: center; }
  .BotRoutingConfig__bots__bot__text {
    align-self: center;
    font-size: 16px;
    color: #535358;
    padding-left: 8px; }

.BotRoutingConfig__bots__sub-title {
  font-weight: 500;
  padding-right: 2px;
  font-size: 14px;
  margin-top: 16px;
  margin-bottom: 8px; }

.BotRoutingConfig__bots__blurb {
  padding-right: 2px;
  font-size: 14px;
  padding-bottom: 12px; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.ModalExpiredPassword__action {
  cursor: pointer; }
  .ModalExpiredPassword__action:hover {
    background-color: #F3F3F5; }

.ModalExpiredPassword__bottom {
  border-top: 1px solid #E8E8EB;
  display: flex;
  background-color: #FFFFFF; }

.ModalExpiredPassword__button {
  font-weight: 600;
  font-style: normal;
  margin: 0 auto;
  text-align: center;
  line-height: normal;
  padding: 8px;
  font-size: 16px;
  height: 48px;
  border: none; }

.ModalExpiredPassword__details {
  text-align: center;
  font-size: 16px;
  line-height: 20px; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.ModalEnforceMFA__action {
  cursor: pointer; }
  .ModalEnforceMFA__action:hover {
    background-color: #F3F3F5; }

.ModalEnforceMFA__bottom {
  border-top: 1px solid #E8E8EB;
  display: flex;
  background-color: #FFFFFF; }

.ModalEnforceMFA__button {
  font-weight: 600;
  font-style: normal;
  margin: 0 auto;
  text-align: center;
  line-height: normal;
  padding: 8px;
  font-size: 16px;
  height: 48px;
  border: none; }

.ModalEnforceMFA__details {
  text-align: center;
  font-size: 16px;
  line-height: 20px; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.ResponseEditorTrainerExpression {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #E8E8EB;
  height: 32px;
  margin-left: 3px;
  transform: translateZ(0); }
  .ResponseEditorTrainerExpression:last-child {
    border-bottom: none; }
  .ResponseEditorTrainerExpression__body {
    flex: 1;
    text-overflow: ellipsis;
    margin-left: 8px;
    white-space: nowrap;
    overflow: hidden; }
    .ResponseEditorTrainerExpression__body--edit-mode {
      display: flex;
      margin-left: 0; }
  .ResponseEditorTrainerExpression__edit-input {
    flex: 1;
    height: 24px !important;
    margin-right: 8px; }
  .ResponseEditorTrainerExpression__cancel-edit-button {
    margin: 0 8px; }
  .ResponseEditorTrainerExpression__edit-button {
    visibility: hidden;
    transition: none; }
  .ResponseEditorTrainerExpression:hover .ResponseEditorTrainerExpression__edit-button {
    visibility: visible; }
  .ResponseEditorTrainerExpression__checkbox {
    visibility: hidden;
    margin: 0 8px; }
  .ResponseEditorTrainerExpression:hover .ResponseEditorTrainerExpression__checkbox, .ResponseEditorTrainerExpression__checkbox--checked {
    visibility: visible; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.ExpressionErrorList__error-list-wrapper {
  color: #101820; }

.ExpressionErrorList__error-list {
  margin: 10px 0 26px;
  border: 1px solid #E8E8EB;
  border-radius: 8px; }

.ExpressionErrorList__error-list-warning-icon {
  height: 24px;
  vertical-align: middle;
  margin-right: 8px; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.ModalBulkAddTraining {
  max-height: 410px; }
  .ModalBulkAddTraining__bulk-upload {
    position: relative; }
  .ModalBulkAddTraining__overlimit-warning-icon {
    position: absolute;
    right: 0;
    top: 0; }
  .ModalBulkAddTraining__bulk-upload-input {
    min-height: 180px;
    margin-bottom: 6px;
    resize: none;
    line-height: 24px; }
  .ModalBulkAddTraining__input-label {
    margin-bottom: 6px;
    color: #101820; }
  .ModalBulkAddTraining__hint {
    color: #656568;
    font-size: 12px; }
  .ModalBulkAddTraining__cancel-button {
    margin-right: 8px; }
  .ModalBulkAddTraining__character-counter {
    right: 10px;
    bottom: 8px;
    position: absolute;
    font-size: 10px;
    font-weight: 600;
    color: #656568; }
    .ModalBulkAddTraining__character-counter--invalid {
      color: #FB9804; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.ModalMoveTraining__title {
  border-bottom: none !important; }

.ModalMoveTraining__description {
  width: 100%;
  height: 100%;
  color: #101820;
  font-size: 16px;
  padding-top: 0px !important;
  line-height: 20px; }

.ModalMoveTraining__response-selector {
  margin-top: 24px;
  margin-bottom: 8px; }

.ModalMoveTraining__bottom {
  padding: 0 !important; }

.ModalMoveTraining__button {
  width: 100%;
  height: 100%;
  border: none;
  font-size: 16px;
  font-weight: 500;
  box-shadow: none !important;
  outline: none;
  padding: 8px 0; }

.ModalMoveTraining__error-list {
  margin: 10px 0 26px;
  border: 1px solid #E8E8EB;
  border-radius: 8px; }
  .ModalMoveTraining__error-list--warning-icon {
    height: 24px;
    vertical-align: middle;
    margin-right: 8px; }
  .ModalMoveTraining__error-list--container {
    color: #101820; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.AnalyticsYearEndWrapUpReportModal {
  width: 600px;
  height: 505px;
  border-radius: 8px;
  overflow: hidden;
  /* This contains title and description only, as the value element is animated separately*/ }
  .AnalyticsYearEndWrapUpReportModal__button {
    padding: 0 24px;
    background-color: #000026;
    color: #FFFFFF;
    line-height: 20px;
    font-size: 14px;
    font-weight: 500;
    z-index: 2; }
    .AnalyticsYearEndWrapUpReportModal__button:active {
      opacity: 0.7;
      background-color: #000026; }
    .AnalyticsYearEndWrapUpReportModal__button--thanks-screen {
      background-color: #FEA8B3;
      color: #000026; }
      .AnalyticsYearEndWrapUpReportModal__button--thanks-screen:active {
        opacity: 0.7;
        background-color: #FEA8B3; }
    .AnalyticsYearEndWrapUpReportModal__button--metrics-screen {
      position: absolute;
      bottom: 24px;
      right: 24px; }
  .AnalyticsYearEndWrapUpReportModal__animated-circle {
    position: absolute;
    top: -149px;
    right: -182px;
    width: 506px;
    height: 506px;
    border-radius: 50%;
    background-color: #8186FE;
    opacity: 0;
    z-index: 0;
    transition: 0.5s ease; }
    .AnalyticsYearEndWrapUpReportModal__animated-circle--visible {
      z-index: 1;
      opacity: 1; }
  .AnalyticsYearEndWrapUpReportModal__background {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #FFFFFF;
    z-index: 0;
    transition: color 0.5s ease; }
  .AnalyticsYearEndWrapUpReportModal__brand-icon {
    position: absolute;
    top: 24px;
    left: 24px;
    height: 28px;
    width: 28px;
    z-index: 2; }
  .AnalyticsYearEndWrapUpReportModal__welcome-screen {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #178A65;
    color: #FFFFFF;
    padding: 56px 0;
    text-align: center;
    transition: 0.5s ease;
    opacity: 1;
    z-index: 2; }
    .AnalyticsYearEndWrapUpReportModal__welcome-screen--hidden {
      opacity: 0;
      z-index: 0; }
  .AnalyticsYearEndWrapUpReportModal__welcome-screen-image-container {
    display: inline-flex;
    height: 241px;
    width: 247px; }
  .AnalyticsYearEndWrapUpReportModal__welcome-screen-image {
    height: 100%;
    width: 100%; }
  .AnalyticsYearEndWrapUpReportModal__welcome-screen-title {
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    margin: 30px 0 8px 0; }
  .AnalyticsYearEndWrapUpReportModal__welcome-screen-description {
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 24px; }
  .AnalyticsYearEndWrapUpReportModal__metrics-screen {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: transparent;
    color: #101820;
    z-index: 1;
    opacity: 0;
    transition: 0.5s ease; }
    .AnalyticsYearEndWrapUpReportModal__metrics-screen--visible {
      z-index: 2;
      opacity: 1; }
  .AnalyticsYearEndWrapUpReportModal__metrics-screen-text-container {
    position: absolute;
    top: 154px;
    left: 28px;
    max-width: 244px;
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    opacity: 0;
    transition: 0.5s ease; }
    .AnalyticsYearEndWrapUpReportModal__metrics-screen-text-container--visible {
      opacity: 1; }
  .AnalyticsYearEndWrapUpReportModal__metrics-screen-title {
    margin-bottom: 56px; }
  .AnalyticsYearEndWrapUpReportModal__metrics-screen-value {
    z-index: 2;
    position: absolute;
    top: 185px;
    left: 28px;
    font-size: 48px;
    line-height: 52px;
    font-weight: bold;
    opacity: 0;
    transition: 0.5s ease; }
    .AnalyticsYearEndWrapUpReportModal__metrics-screen-value--visible {
      opacity: 1; }
  .AnalyticsYearEndWrapUpReportModal__metrics-screen-note {
    z-index: 2;
    position: absolute;
    top: 453px;
    left: 28px;
    font-size: 12px;
    line-height: 16px;
    opacity: 0;
    transition: 0.5s ease; }
    .AnalyticsYearEndWrapUpReportModal__metrics-screen-note--visible {
      opacity: 1; }
  .AnalyticsYearEndWrapUpReportModal__inline-link {
    color: #101820; }
  .AnalyticsYearEndWrapUpReportModal__metrics-screen-image-container {
    position: absolute;
    opacity: 0;
    transition: 0.7s ease; }
    .AnalyticsYearEndWrapUpReportModal__metrics-screen-image-container--visible {
      opacity: 1; }
  .AnalyticsYearEndWrapUpReportModal__metrics-screen-image {
    height: 100%;
    width: 100%; }
  .AnalyticsYearEndWrapUpReportModal__thanks-screen {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    color: #FFFFFF;
    padding: 105px 0 60px 0;
    text-align: center;
    transition: opacity 0.5s ease;
    opacity: 0;
    z-index: 1; }
    .AnalyticsYearEndWrapUpReportModal__thanks-screen--visible {
      opacity: 1;
      z-index: 2; }
  .AnalyticsYearEndWrapUpReportModal__thanks-screen-image-container {
    display: inline-flex;
    height: 191px;
    width: 191px; }
  .AnalyticsYearEndWrapUpReportModal__thanks-screen-description {
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 24px; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.Modal {
  position: fixed;
  z-index: 9999999;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-content: center;
  pointer-events: none;
  /* Fade in & out animation when isOpacityTransition is true */
  /* End of Fade in & out animation */ }
  @media print {
    .Modal {
      display: none; } }
  .Modal--active {
    pointer-events: all; }
  .Modal--active .Modal__mask {
    background-color: rgba(10, 15, 20, 0.4);
    transition: background-color 0.2s; }
  .Modal--active:not(.Modal--small):not(.Modal--has-opacity-transition) .Modal__container {
    top: 0;
    transition: top 0.2s; }
  .Modal--small .Modal__container {
    animation-name: smallModalDisappear;
    animation-duration: 180ms; }
  .Modal--active.Modal--small .Modal__container {
    animation-name: smallModalAppear;
    animation-timing-function: cubic-bezier(0.25, 1.2, 0.67, 1.08);
    animation-duration: 180ms;
    opacity: 1; }
  .Modal--has-opacity-transition .Modal__container {
    transition: opacity 0.5s ease; }
  .Modal--active.Modal--has-opacity-transition .Modal__container {
    transition: opacity 0.5s ease;
    opacity: 1; }
  .Modal__mask {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    background-color: rgba(0, 0, 0, 0);
    transition: background-color 0.2s;
    outline: none; }
  .Modal__container {
    z-index: 10001 !important;
    width: 100%;
    max-width: 600px;
    align-self: center; }
    .Modal__container {
      top: 100%;
      transition: top 180ms; }
    .Modal__container--small {
      top: 0%;
      max-width: 360px !important;
      transition: opacity 180ms;
      opacity: 0; }
    .Modal__container--has-opacity-transition {
      top: 0;
      transition: opacity 0.5s ease;
      opacity: 0; }
    .Modal__container--greeting {
      max-width: 800px !important; }
    .Modal__container--large {
      max-width: 800px; }
    .Modal__container__close {
      position: absolute;
      top: 8px;
      right: 8px;
      z-index: 3;
      opacity: 0.5; }
      .Modal__container__close:hover {
        opacity: 1; }
  .Modal__inner-container {
    overflow: hidden;
    background-color: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 0 10px 0 rgba(0, 0, 0, 0.18);
    transform: translate3d(0, 0, 0); }
  .Modal__modal {
    display: flex;
    flex-direction: column;
    height: 70vh; }
    .Modal__modal--small {
      height: auto; }
  .Modal__title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ADADB3;
    border-bottom: 1px solid #E8E8EB;
    height: 32px;
    box-sizing: content-box;
    margin: 0; }
    .Modal__title--small {
      border-bottom: 0 transparent; }
  .Modal__body {
    display: flex;
    flex: 1;
    height: 0; }
    .Modal__body__container {
      display: flex;
      flex: 1;
      flex-direction: column;
      overflow: hidden; }
  .Modal__content {
    flex: 1;
    padding: 16px;
    overflow: auto; }
    .Modal__content--small {
      height: 50px; }
    .Modal__content--no-top-padding {
      padding-top: 0; }
  .Modal__section {
    margin-bottom: 16px;
    padding-bottom: 16px; }
    .Modal__section:last-child {
      border-bottom: none;
      margin-bottom: 0;
      padding-bottom: 0; }
    .Modal__section__sub-section {
      flex: 1; }
      .Modal__section__sub-section:not(:last-child) {
        margin-right: 8px; }
      .Modal__section__sub-section:last-child {
        margin-bottom: 0; }
      .Modal__section__sub-section__title {
        margin-bottom: 8px;
        font-size: 14px;
        font-weight: 500; }
      .Modal__section__sub-section__description {
        margin: -4px 0 8px 0;
        font-size: 14px;
        color: #656568;
        white-space: pre-wrap; }
        .Modal__section__sub-section__description--below {
          margin: 8px 0 0 0; }
        .Modal__section__sub-section__description a {
          font-size: inherit; }
    .Modal__section__description {
      margin: -4px 0 8px 0;
      font-size: 14px;
      color: #656568;
      white-space: pre-wrap; }
      .Modal__section__description a {
        font-size: inherit; }
    .Modal__section__title {
      margin-bottom: 8px;
      color: #101820;
      font-size: 16px;
      font-weight: 500;
      line-height: 24px; }
  .Modal__bottom {
    width: 100%;
    border-radius: 0;
    border-top: 1px solid #E8E8EB;
    padding: 16px;
    display: flex;
    background-color: #FFFFFF;
    justify-content: flex-end; }
    .Modal__bottom--right {
      justify-content: flex-end; }
    .Modal__bottom__warning {
      font-weight: 500;
      display: flex;
      align-self: center;
      align-items: center;
      font-size: 10px;
      color: #FB9804;
      margin: 0 8px; }
      .Modal__bottom__warning__icon {
        width: 20px;
        height: 20px;
        margin-top: 2px;
        margin-right: 4px; }

@keyframes smallModalAppear {
  0% {
    transform: scale(0.5); }
  100% {
    transform: scale(1); } }

@keyframes smallModalDisappear {
  0% {
    transform: scale(1); }
  100% {
    transform: scale(0.5); } }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.SessionTimeoutModal__action {
  cursor: pointer; }
  .SessionTimeoutModal__action:hover {
    background-color: #F3F3F5; }

.SessionTimeoutModal__bottom {
  border-top: 1px solid #E8E8EB;
  display: flex;
  background-color: #FFFFFF; }

.SessionTimeoutModal__button {
  font-weight: 600;
  font-style: normal;
  margin: 0 auto;
  text-align: center;
  line-height: normal;
  padding: 8px;
  font-size: 16px;
  height: 48px;
  border: none; }

.SessionTimeoutModal__details {
  text-align: center;
  font-size: 16px;
  line-height: 20px; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.Navigator {
  display: flex;
  align-items: center;
  background-color: #101820;
  color: #FFFFFF;
  height: 48px;
  width: 100%;
  z-index: 1000000;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }
  @media print {
    .Navigator {
      display: none; } }
  .Navigator__right-icons {
    display: flex;
    margin-left: auto; }
  .Navigator__test {
    background-color: #101820;
    border: 1px solid #656568;
    color: #E8E8EB;
    margin: 12px;
    margin-right: 8px;
    white-space: nowrap; }
    .Navigator__test:active {
      background-color: #E8E8EB;
      border: 1px solid transparent;
      color: #101820; }
  .Navigator__button {
    color: rgba(255, 255, 255, 0.48);
    background-color: rgba(255, 255, 255, 0);
    transition: all .15s ease;
    margin-left: 8px; }
    .Navigator__button:last-child {
      margin-right: 8px; }
    .Navigator__button:hover {
      background-color: rgba(255, 255, 255, 0.16); }
    .Navigator__button:active {
      background-color: rgba(255, 255, 255, 0.32); }
    .Navigator__button--inactive {
      pointer-events: none; }
    .Navigator__button--active, .Navigator__button--active:hover {
      color: #FFFFFF;
      background-color: rgba(255, 255, 255, 0.32); }
  .Navigator__avatar {
    padding: 0;
    background-color: rgba(255, 255, 255, 0.32);
    color: #101820;
    margin: 8px;
    height: 32px;
    width: 32px;
    font-size: 20px;
    font-weight: 500;
    text-transform: uppercase;
    text-align: center;
    line-height: 32px;
    border-radius: 50%;
    cursor: pointer; }
    .Navigator__avatar:hover {
      background-color: rgba(255, 255, 255, 0.48); }
    .Navigator__avatar:active {
      background-color: #FFFFFF; }

.Splash h1 {
  font-size: 24px; }

.Splash svg, .Splash h1, .Splash p, .Splash button {
  margin: 8px 0; }

.Splash p {
  line-height: 20px; }

.Splash__icon {
  width: 48px;
  height: 48px;
  margin-bottom: 32px !important; }

.Splash.g-view {
  height: 100%; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.WindowAlert {
  pointer-events: none;
  z-index: 10002 !important; }
  @media print {
    .WindowAlert {
      display: none; } }
  .WindowAlert--active {
    pointer-events: all; }
  .WindowAlert--active .WindowAlert__mask {
    background-color: rgba(10, 15, 20, 0.4);
    transition: background-color 0.2s; }
  .WindowAlert--active .WindowAlert__container {
    top: 50%;
    transition: top 0.2s; }
  .WindowAlert__mask {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    background-color: rgba(0, 0, 0, 0);
    transition: background-color 0.2s; }
  .WindowAlert__container {
    position: fixed;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10001 !important;
    width: 100%;
    max-width: 320px;
    top: 150%;
    transition: top 0.2s; }
    .WindowAlert__container__close {
      position: absolute;
      top: 8px;
      right: 8px;
      z-index: 1;
      opacity: 0.5; }
      .WindowAlert__container__close:hover {
        opacity: 1; }
  .WindowAlert__inner-container {
    overflow: hidden;
    background-color: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 0 10px 0 rgba(0, 0, 0, 0.18);
    height: 100%;
    min-height: 160px;
    box-sizing: border-box;
    line-height: 20px;
    display: flex;
    flex-direction: column; }
    .WindowAlert__inner-container__image {
      border-radius: 4px;
      width: 100%;
      margin-bottom: 8px; }
    .WindowAlert__inner-container__title {
      text-align: center;
      font-size: 14px;
      color: #656568;
      height: 48px;
      line-height: 48px;
      border-bottom: 1px solid #E8E8EB; }
    .WindowAlert__inner-container__content {
      padding: 16px;
      text-align: center;
      flex: 1; }
    .WindowAlert__inner-container__actions {
      text-align: center;
      border-top: 1px solid #E8E8EB;
      padding: 8px; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.ErrorPage {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column; }
  .ErrorPage__icon {
    height: 48px;
    width: 48px;
    margin-bottom: 16px;
    margin-top: -48px; }
  .ErrorPage__text {
    text-align: center; }
    .ErrorPage__text__title {
      font-size: 24px;
      margin-bottom: 16px; }
    .ErrorPage__text__description {
      color: #656568;
      font-size: 14px;
      text-align: center; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.Footer {
  position: absolute;
  width: 100vw;
  height: 104px;
  left: 0px;
  display: grid;
  bottom: 0;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 40px 64px;
  box-shadow: inset 0px 1px 0px #E8E8EB;
  background: white; }
  @media screen and (max-height: 500px) {
    .Footer {
      position: sticky;
      bottom: auto; } }
  .Footer__icon-container {
    display: flex;
    align-items: center; }
    .Footer__icon-container a {
      margin-right: 16px; }
  .Footer__links-container {
    display: flex;
    justify-content: flex-end; }
    .Footer__links-container a {
      padding: 0 0 0 25px;
      color: #656568;
      text-decoration: none; }

.Notification {
  display: flex;
  border-radius: 6px;
  align-items: flex-start;
  padding: 6px 8px;
  justify-content: space-between;
  font-family: -apple-system, BlinkMacSystemFont, "Apple Color Emoji", "Segoe UI", "Segoe UI Emoji", "Segoe UI Symbol", Roboto, Helvetica, Arial, sans-serif; }
  .Notification__description {
    font-size: 12px !important;
    margin: 0;
    line-height: 16px;
    flex-grow: 1;
    padding-left: 8px;
    height: 100%;
    align-self: center; }
  .Notification--hidden {
    display: none; }
  .Notification__close-icon {
    cursor: pointer;
    min-width: 20px;
    min-height: 20px;
    opacity: 0.3;
    margin-left: 8px; }
    .Notification__close-icon:hover {
      opacity: 1; }
  .Notification__custom-icon {
    min-width: 20px;
    min-height: 20px; }

.PasswordResetEmailConfirmation__p {
  margin-bottom: 24px; }
  .PasswordResetEmailConfirmation__p:last-child {
    margin-bottom: 12px; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.Login {
  height: 85vh;
  margin: 0 auto;
  padding-top: 118px;
  max-width: 388px;
  margin: 0 auto; }
  @media screen and (max-height: 550px) {
    .Login {
      height: auto;
      padding-top: 10vh; } }
  .Login__link {
    cursor: pointer;
    color: #0975EF; }
    .Login__link:hover {
      text-decoration: underline; }
  .Login__input {
    margin-bottom: 8px !important; }
    .Login__input--isInvalid {
      border: 2px solid #FB9804 !important; }
    .Login__input--warning {
      color: #FB9804; }
  .Login__button__full-width {
    display: block;
    margin-top: 16px; }
  .Login__button-container {
    display: flex;
    align-items: center;
    margin-top: 8px; }
    .Login__button-container__back {
      margin-left: 8px; }
  .Login__actions-container {
    display: flex;
    flex-direction: column; }
    .Login__actions-container__forgot {
      cursor: pointer;
      color: #0975EF;
      font-size: 14px;
      margin-bottom: 24px;
      margin-top: 8px; }
      .Login__actions-container__forgot:hover {
        text-decoration: underline; }
    .Login__actions-container__button {
      width: 100px; }
    .Login__actions-container__terms {
      margin-top: 32px; }
      .Login__actions-container__terms__description {
        font-size: 12px !important;
        line-height: 18px !important; }
  .Login__page-header {
    margin-bottom: 24px; }
    .Login__page-header h1 {
      font-weight: 600;
      font-size: 24px;
      margin-bottom: 8px; }
    .Login__page-header p {
      font-size: 14px;
      color: #656568; }
  .Login__empty-space {
    display: block;
    height: 12px; }
  .Login__splash-page {
    max-width: 340px;
    position: fixed;
    margin: 100px auto 0;
    top: 160px;
    left: 0;
    right: 0; }
    @media screen and (max-height: 550px) {
      .Login__splash-page {
        position: relative;
        height: 100%;
        margin: 0 auto;
        top: auto; } }
    .Login__splash-page .g-view {
      overflow: visible; }
    .Login__splash-page .g-view__empty {
      align-items: flex-start; }
    .Login__splash-page a {
      text-decoration: none; }
    .Login__splash-page h1 {
      font-weight: 600;
      color: #101820;
      font-weight: 600;
      font-size: 24px; }
  .Login__notification {
    margin: 12px 0; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.LoginSplash {
  max-width: 340px;
  margin: auto;
  overflow: hidden; }
  @media screen and (max-height: 550px) {
    .LoginSplash {
      height: 100%;
      margin: 0 auto; } }
  .LoginSplash__action {
    color: #0975EF; }
  .LoginSplash__header {
    font-weight: 600;
    color: #101820;
    white-space: pre-wrap;
    font-size: 24px;
    line-height: 32px;
    padding-bottom: 8px; }
  .LoginSplash__description {
    font-size: 14px;
    color: #656568;
    line-height: 20px;
    padding-bottom: 24px; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.MFAPhoneNumberForm {
  margin-bottom: 16px;
  margin-top: 4px;
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-gap: 8px; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.MFAVerificationForm__more-information {
  margin: 4px 0 16px; }
  .MFAVerificationForm__more-information p {
    color: #656568;
    font-size: 14px;
    line-height: 20px;
    font-weight: normal; }

.MFAVerificationForm__phone-number {
  font-weight: 600; }

.MFAVerificationForm__action {
  color: #0975EF;
  cursor: pointer;
  text-decoration: none; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.PasswordSet {
  position: absolute;
  height: 85vh;
  max-width: 340px;
  margin: 0 auto;
  left: 0;
  right: 0; }
  .PasswordSet p {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 20px; }
  @media screen and (max-height: 500px) {
    .PasswordSet {
      position: relative;
      height: auto; } }
  .PasswordSet__heading {
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    margin-bottom: 8px; }
  .PasswordSet__user-bot-info {
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 24px;
    color: #656568; }
  .PasswordSet__input-section {
    margin-bottom: 8px; }
  .PasswordSet__password-form {
    max-width: 470px;
    margin: 0 auto;
    padding-top: 118px; }
    @media screen and (max-height: 500px) {
      .PasswordSet__password-form {
        padding-top: 5vh; } }
    .PasswordSet__password-form__page-header {
      margin-bottom: 24px; }
    .PasswordSet__password-form__success-icon {
      margin-bottom: 30px; }
  .PasswordSet__splash-page {
    max-width: 340px;
    margin: 0 auto;
    width: 100%; }
    @media screen and (max-height: 500px) {
      .PasswordSet__splash-page {
        display: flex;
        height: 300px; } }
    .PasswordSet__splash-page .g-view {
      overflow: visible; }
    .PasswordSet__splash-page .g-view__empty {
      align-items: flex-start; }
    .PasswordSet__splash-page a {
      text-decoration: none; }
    .PasswordSet__splash-page h1 {
      color: #101820;
      font-weight: 600;
      font-size: 24px; }
  .PasswordSet__label {
    color: #000000; }
  .PasswordSet__input__again {
    margin-top: 4px; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.Root {
  height: 100vh; }
  .Root__ada-embed {
    position: absolute;
    bottom: 0;
    right: 4px;
    z-index: 999999; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.DevToolbarClientFeatures__title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px; }

.DevToolbarClientFeatures__search-input {
  width: 200px;
  margin-bottom: 16px; }

.DevToolbarClientFeatures__feature {
  display: inline-flex;
  margin-right: 24px;
  margin-bottom: 16px; }

@charset "UTF-8";
/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.DevToolbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #101820;
  color: #FFFFFF;
  z-index: 9999999;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 0 10px 0 rgba(0, 0, 0, 0.18);
  transform: translate3d(0, 100%, 0);
  transition: 200ms ease-in-out;
  outline: none; }
  .DevToolbar--expanded {
    transform: translate3d(0, 0, 0); }
  .DevToolbar__shadow-thing {
    box-shadow: 0 0 10px #101820 inset;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1; }
  .DevToolbar__toggle {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translate(-50%, 16px);
    cursor: pointer;
    background: #101820;
    padding: 8px;
    margin: 0;
    border: none;
    border-radius: 8px 8px 0 0;
    transition: 200ms ease-in-out;
    outline: none;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 0 10px 0 rgba(0, 0, 0, 0.18);
    color: #FFFFFF;
    font-size: 14px;
    display: flex;
    align-items: center; }
    .DevToolbar__toggle:hover {
      transform: translate(-50%, 0); }
  .DevToolbar__toggle-icon {
    width: 18px;
    height: 16px;
    margin-right: -4px;
    display: none; }
  .DevToolbar--expanded .DevToolbar__toggle {
    transform: translate(-50%, 0); }
  .DevToolbar--expanded .DevToolbar__toggle-icon {
    display: block; }
  .DevToolbar__content {
    height: 300px;
    overflow: auto;
    padding: 16px;
    font-size: 14px; }

@charset "UTF-8";
.bounce-enter {
  opacity: 0.01;
  color: blue !important; }

.bounce-enter.bounce-enter-active {
  opacity: 1;
  transition: all 500ms ease-in; }

.bounce-leave {
  opacity: 1; }

.bounce-leave.bounce-leave-active {
  opacity: 0.01;
  transition: all 300ms ease-in; }

.example-appear {
  opacity: 0.01; }

/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

body {
  padding: 0;
  margin: 0;
  background-color: #FFFFFF;
  font-size: 16px; }
  body #pendo-base {
    z-index: 999999999; }
    body #pendo-base #pendo-guide-container {
      border: 1px solid white !important;
      box-shadow: rgba(136, 136, 136, 0.22) 0px 0px 40px !important; }
    body #pendo-base ._pendo-nps-open-text-poll-question {
      margin: 20px 0px !important; }

* {
  font-size: inherit;
  overflow: visible;
  box-sizing: border-box;
  position: relative;
  -webkit-font-smoothing: antialiased; }

h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
  margin: 0; }

p, p * {
  font-size: 16px;
  white-space: pre-wrap;
  margin: 0; }

a {
  color: #0975EF;
  font-size: inherit; }

b, strong {
  font-weight: 500;
  font-size: inherit; }

svg {
  fill: currentColor; }

#ada-button-frame, #ada-intro-frame {
  display: none; }

#ada-chat-frame {
  top: 48px !important;
  height: calc(100vh - 48px) !important;
  z-index: 1000001 !important; }

#ada-drawer-mask-frame {
  top: 48px !important;
  height: calc(100vh - 48px) !important;
  z-index: 1000000 !important; }

.g-form__block {
  display: block;
  padding-bottom: 24px;
  white-space: pre-wrap; }
  .g-form__block__label {
    color: #101820;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 500; }
  .g-form__block__description {
    margin: -4px 0 4px 0;
    font-size: 14px;
    line-height: 20px;
    color: #656568;
    white-space: pre-wrap; }
    .g-form__block__description--below {
      margin-top: 4px; }
    .g-form__block__description--no-bottom-margin {
      margin-bottom: 0; }
    .g-form__block__description strong {
      color: #535358;
      font-weight: 500; }

/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.info {
  display: inline-block;
  width: 24px;
  height: 24px;
  user-select: none; }
  .info__button {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid #E8E8EB;
    background-color: #FFFFFF;
    color: #E8E8EB;
    text-align: center;
    line-height: 23px;
    font-weight: 200;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none; }
    .info__button:active {
      color: #FFFFFF;
      background-color: #E8E8EB; }
  .info__bubble {
    width: 160px;
    background-color: #3C3C3F;
    position: absolute;
    top: 36px;
    left: -68px;
    text-align: left;
    border-radius: 8px;
    padding: 7px 8px;
    z-index: 9999;
    opacity: 1;
    overflow: visible;
    visibility: visible;
    transform: translateY(0px);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.6), 0 0 16px rgba(0, 0, 0, 0.3);
    transition: all 110ms ease; }
    .info__bubble:after {
      content: '';
      width: 24px;
      height: 24px;
      border-radius: 5px;
      position: absolute;
      background-color: inherit;
      left: 68px;
      top: -4px;
      transform: rotate(45deg);
      z-index: -1; }
    .info__bubble span {
      display: block;
      color: #FFFFFF;
      user-select: none; }
  .info--hidden .info__bubble {
    visibility: hidden;
    transform: translateY(-6px);
    pointer-events: none; }

/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

input,
textarea {
  outline: none;
  margin: 0; }

.g-input {
  height: 32px;
  border-radius: 6px;
  padding: 2px 6px;
  width: 100%;
  transition: 150ms ease;
  user-select: none;
  background-color: #F3F3F5;
  border: 2px solid rgba(232, 232, 235, 0);
  display: block;
  cursor: text; }
  .g-input__description {
    font-size: 14px;
    color: #656568;
    white-space: pre-wrap; }
  .g-input--mdia-url:focus + .ResponseEditorMediaUplaoder__focus-description {
    display: none; }
  .g-input::-webkit-contacts-auto-fill-button {
    visibility: hidden;
    display: none !important;
    pointer-events: none;
    position: absolute;
    right: 0; }
  .g-input:focus.g-input:focus, .g-input--focus.g-input--focus {
    /*
      Bump selector specificity so that focused border color takes precedence over
      invalid border color 
    */
    background-color: #E8E8EB;
    border: 2px solid #0975EF; }
  .g-input--type-textarea {
    min-height: 56px;
    display: block;
    overflow-y: auto; }
    .g-input--type-textarea.DebouncedInput {
      transition: border-color 150ms ease;
      resize: none;
      max-height: 250px;
      line-height: 24px; }
      .g-input--type-textarea.DebouncedInput.DebouncedInput--character-counter {
        padding: 2px 36px 2px 6px; }
  .g-input--invalid, .g-input--invalid:focus, .g-input--focus.g-input--invalid {
    border-color: #FB9804; }
  .g-input--invalid.g-input--invalid-empty.g-input--focus, .g-input--invalid.g-input--invalid-empty:focus {
    border-color: #0975EF; }
  .g-input::-webkit-input-placeholder {
    color: #656568; }
  .g-input:disabled {
    color: #656568; }
  .g-input--flash {
    animation-name: input-flash;
    animation-duration: 3s; }
  .g-input--type-textarea.g-input--font-size-small.DebouncedInput {
    font-size: 14px;
    line-height: 17px; }
  .g-input--type-textarea.g-input--font-size-small.DebouncedInput--character-counter {
    padding-top: 4px;
    padding-bottom: 4px; }
  .g-input__label {
    font-size: 14px;
    line-height: 24px;
    font-weight: 500;
    display: inline-block; }
    .g-input__label--no-description {
      margin-bottom: 8px; }
  .g-input--small {
    height: 24px !important;
    font-size: 14px; }
  .g-input--smallish {
    height: 28px !important;
    font-size: 14px; }
  .g-input--no-background {
    background: none !important; }

input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0; }

input[type="number"] {
  -moz-appearance: textfield; }

.ResponseEditorEnhancedTextInput.g-input, .ResponseEditorEnhancedTextInput.g-input--type_textarea {
  padding: 2px 6px; }
  .ResponseEditorEnhancedTextInput.g-input.CharacterCounter, .ResponseEditorEnhancedTextInput.g-input--type_textarea.CharacterCounter {
    padding: 2px 36px 2px 6px; }

@keyframes input-flash {
  0% {
    background-color: rgba(232, 232, 235, 0.75); }
  5% {
    background-color: #FDFFA2; }
  30% {
    background-color: #FDFFA2; }
  100% {
    background-color: rgba(232, 232, 235, 0.75); } }

/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.g-side {
  display: flex;
  width: 100%;
  max-width: 340px;
  flex-direction: column;
  overflow: hidden;
  background-color: #FFFFFF;
  border-right: 1px solid #E8E8EB;
  -webkit-user-select: none;
  flex-shrink: 0; }
  .g-side__menu {
    border-bottom: 1px solid #E8E8EB;
    width: 100%;
    padding: 8px; }
    .g-side__menu__filter {
      display: flex;
      align-items: center; }
      .g-side__menu__filter input.search {
        display: inline-block;
        width: auto;
        flex-grow: 1;
        margin-right: 5px; }
  .g-side__list {
    will-change: transform;
    transform: translate3d(0, 0, 0);
    overflow: auto;
    width: 100%; }
    .g-side__list__item {
      display: flex;
      align-items: center;
      position: relative;
      border-bottom: 1px solid #E8E8EB;
      min-height: 46px;
      padding: 8px;
      white-space: normal;
      cursor: pointer;
      text-decoration: none;
      color: #3C3C3F; }
      .g-side__list__item--selected {
        background-color: #F3F3F5; }
      .g-side__list__item__label {
        z-index: 0;
        font-weight: 500;
        pointer-events: auto; }
        .g-side__list__item__label--light {
          color: #656568; }
      .g-side__list__item__description {
        color: #656568;
        font-size: 14px;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        max-height: 55px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical; }
      .g-side__list__item .tags__tag {
        cursor: pointer; }
  @media print {
    .g-side {
      display: none !important; } }

.g-stats__canvas {
  padding: 12px;
  margin: 0 auto;
  max-width: 590px;
  width: 100%; }
  .g-stats__canvas__chart {
    width: 100%;
    height: 300px;
    margin: 1em 0; }

.app-container {
  width: 100vw;
  height: 100vh;
  min-width: 930px;
  overflow: hidden;
  display: flex;
  flex-direction: column; }
  @media print {
    .app-container {
      overflow: auto;
      height: auto; } }
  .app-container #main {
    flex: 1;
    align-content: center;
    overflow: auto; }

/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.g-table {
  display: table;
  background-color: #FFFFFF;
  border: 1px solid #E8E8EB;
  border-collapse: collapse;
  border-spacing: 0;
  margin: 8px 0;
  width: 100%; }
  .g-table__row {
    border-bottom: 1px solid #E8E8EB;
    background-color: #FFFFFF; }
    .g-table__row__header, .g-table__row__cell {
      color: #3C3C3F;
      font-weight: normal;
      border-right: 1px solid #E8E8EB;
      height: 32px;
      line-height: 33px;
      padding: 0 9px;
      text-align: left;
      font-size: 14px;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 200px; }
      .g-table__row__header:last-child, .g-table__row__cell:last-child {
        border-right: 0px; }
      .g-table__row__header--selected--up:after, .g-table__row__header--selected--down:after, .g-table__row__cell--selected--up:after, .g-table__row__cell--selected--down:after {
        color: #3C3C3F !important;
        visibility: visible; }
    .g-table__row__header {
      font-weight: 500;
      cursor: pointer;
      user-select: none;
      padding-right: 26px; }
    .g-table__row:last-child {
      border-bottom: 0px; }
    .g-table__row--total > .g-table__row__cell {
      font-weight: 500 !important; }

/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

.g-tile {
  background-color: #FFFFFF;
  width: calc(50% - 4px);
  min-height: 254px;
  margin-bottom: 8px;
  border: 1px solid #E8E8EB;
  padding: 20px 16px;
  text-align: center;
  display: flex;
  justify-content: center;
  flex-direction: column;
  border-radius: 8px; }
  @media (min-width: 1200px) {
    .g-tile {
      width: calc(33% - 3px); } }
  .g-tile__icon {
    height: 48px;
    width: 48px;
    margin: 0 auto 8px auto; }
  .g-tile__title {
    white-space: pre-wrap;
    word-wrap: break-word;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
    font-size: 28px;
    font-weight: 500; }
  .g-tile__description {
    font-size: 16px;
    white-space: pre-wrap;
    word-wrap: break-word;
    margin: 18px 0;
    margin-top: 7px;
    line-height: 1.5; }
  .g-tile__checkbox {
    display: flex;
    justify-content: center; }
  .g-tile__small-icon {
    position: absolute;
    top: 22.5px;
    left: 19px; }
    .g-tile__small-icon--zendesk_chat {
      fill: #C4C4CA;
      width: 26px;
      height: 20px;
      transform: scale(1.2); }
  .g-tile__large-icon--zendesk_chat {
    width: 72px;
    height: 57.7px;
    margin: 0 auto;
    margin-top: 6px;
    margin-bottom: 15px;
    transform: scale(1.2); }
  .g-tile__learn-more {
    margin-bottom: 8px; }

/*
 * ⚠️⚠️⚠️ STOP ⚠️⚠️⚠️
 * Before adding a new colour variable, please ensure that your colour doesn't already exist,
 * and that it has the same name as in our Figma designs.
 */

html {
  color: #3C3C3F;
  font-size: 16px;
  font-family: -apple-system, BlinkMacSystemFont, "Apple Color Emoji", "Segoe UI", "Segoe UI Emoji", "Segoe UI Symbol", Roboto, Helvetica, Arial, sans-serif; }

.g-highlight {
  font-size: inherit;
  background-color: #FFE560; }
  .g-highlight--colour-blue {
    background-color: #90DDED; }

.g-variable {
  background-color: #E8E8EB;
  font-size: 12px;
  display: inline-block;
  border-radius: 100px;
  padding: 0px 8px;
  line-height: 16px;
  height: 16px;
  font-weight: 500; }

.g-view {
  flex: 1;
  white-space: nowrap;
  display: flex;
  overflow: hidden; }
  .g-view__empty, .g-view__loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #656568;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0; }
    .g-view__empty__icon, .g-view__loading__icon {
      height: 40px; }
    .g-view__empty h1, .g-view__loading h1 {
      font-size: 14px; }


/*# sourceMappingURL=app.a60c4c322e77dccc249e.min.css.map*/