#root,
.main {
  position: relative;
  height: 100%;
  z-index: 2;
}

.main > .main--wrapper,
.grid-sample {
  width: 100%;
  height: 100%; /* some mobile browsers doesn't work properly with viewport units (100vh, 100vw). UIUX-587 */
  z-index: 2;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[9];
      grid-template-columns: repeat(9, 1fr);
  -ms-grid-rows: 5rem 1fr;
      grid-template-rows: 5rem 1fr;
  grid-gap: 0 2.5%;
  -ms-flex-align: stretch;
      -webkit-box-align: stretch;
      align-items: stretch;
  position: relative;
  overflow: hidden;
}

.main > .main--wrapper:last-child, .grid-sample:last-child {
    grid-gap: 0 0;
  }

.main > .main--wrapper.with-disabled-header, .grid-sample.with-disabled-header {
    -ms-grid-rows: 2rem 1fr;
        grid-template-rows: 2rem 1fr;
  }

@media (max-width: 768px) {

.main > .main--wrapper,
.grid-sample {
    -ms-grid-rows: 3rem 1fr 0;
        grid-template-rows: 3rem 1fr 0
}
  }

@media (min-width: 769px) {

.main > .main--wrapper,
.grid-sample {
    -ms-grid-columns: (1fr)[12];
        grid-template-columns: repeat(12, 1fr);
    grid-gap: 0 2%
}
  }

@media (min-width: 1280px) {

.main > .main--wrapper,
.grid-sample {
    grid-gap: 0 2.5%
}
  }

@media (min-width: 1920px) {

.main > .main--wrapper,
.grid-sample {
    grid-gap: 0 1.25%
}
  }

.grid-sample {
  z-index: 1;
  position: absolute;
  top: 0;
}

.session-fail-message {
  background: white;
  padding: 16px;
  padding: 1rem;
  border-radius: 0.5rem;
  -ms-grid-column-span: 4;
  -ms-grid-column: 2;
      grid-column: 2 / span 4;
  grid-row: 2 / 3;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
}

@media (min-width: 769px) {

.session-fail-message {
    -ms-grid-column-span: 2;
    -ms-grid-column: 4;
        grid-column: 4 / span 2
}
  }

@media (min-width: 1280px) {

.session-fail-message {
    -ms-grid-column-span: 4;
    -ms-grid-column: 5;
        grid-column: 5 / span 4;
    margin: 0 5rem
}
  }

:root {
  --agentBubbleColor: #dadada;
  --agentBubbleTextColor: #000;
  --ameliaBubbleColor: #fff;
  --ameliaBubbleTextColor: #000;
  --avatarName: Amelia;
  --backgroundColor: #FFF;
  --btnColor: #4d5aff;
  --btnTxtColor: #FFFFFF;
  --bubbleMessage: #f00;
  --chatBgColor: null;
  --chatBackgroundImage: null;
  --domainTxtColor: #3a3a3a;
  --font: Roboto;
  --headerColor: #f7f7f7;
  --headerBackgroundImage: null;
  --micColor: #4d5aff;
  --name: Default Amelia Theme;
  --primary: #4d5aff;
  --primaryTextColor: #3a3a3a;
  --primaryTxtColor: peru;
  --secondary: #3a3a3a;
  --secondaryTextColor: #FFF;
  --secondaryTxtColor: slateblue;
  --tooltipColor: #4d5aff;
  --tooltipTxtColor: #FFFFFF;
  --userLogItemBackgroundColor: #3a3a3a;
  --userLogItemFontColor: #FFFFFF;
  --userAvatarBackgroundColor: #DDDDDD;
  --userAvatarFontColor: #FAFAFA;
}

.footer {
  width: 100%;
  position: relative;
  background: #eee;
  height: 40px;
  height: 2.5rem;
  line-height: 40px;
  line-height: 2.5rem;
  z-index: 2;
}

  .footer .footerInfo {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    height: 100%;
    -ms-flex-align: center;
        -webkit-box-align: center;
        align-items: center;
  }

  .footer .footerInfo .infoMessage, .footer .footerInfo .infoDetails {
      margin-left: 16px;
      margin-left: 1rem;
      height: 100%;
      overflow: auto;
    }

  .footer .footerInfo .infoMessage {
      -ms-flex: 1;
          -webkit-box-flex: 1;
          flex: 1;
    }

  .footer .footerInfo .iconInfoBox {
      width: 40px;
      height: 100%;
      -ms-flex-pack: center;
          -webkit-box-pack: center;
          justify-content: center;
      -ms-flex-align: center;
          -webkit-box-align: center;
          align-items: center;
      display: -ms-flexbox;
      display: -webkit-box;
      display: flex;
    }

  .footer .footerInfo .iconInfoBox svg {
        height: 18px;
        width: 18px;
      }

  :root {
  --agentBubbleColor: #dadada;
  --agentBubbleTextColor: #000;
  --ameliaBubbleColor: #fff;
  --ameliaBubbleTextColor: #000;
  --avatarName: Amelia;
  --backgroundColor: #FFF;
  --btnColor: #4d5aff;
  --btnTxtColor: #FFFFFF;
  --bubbleMessage: #f00;
  --chatBgColor: null;
  --chatBackgroundImage: null;
  --domainTxtColor: #3a3a3a;
  --font: Roboto;
  --headerColor: #f7f7f7;
  --headerBackgroundImage: null;
  --micColor: #4d5aff;
  --name: Default Amelia Theme;
  --primary: #4d5aff;
  --primaryTextColor: #3a3a3a;
  --primaryTxtColor: peru;
  --secondary: #3a3a3a;
  --secondaryTextColor: #FFF;
  --secondaryTxtColor: slateblue;
  --tooltipColor: #4d5aff;
  --tooltipTxtColor: #FFFFFF;
  --userLogItemBackgroundColor: #3a3a3a;
  --userLogItemFontColor: #FFFFFF;
  --userAvatarBackgroundColor: #DDDDDD;
  --userAvatarFontColor: #FAFAFA;
}
.Particles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#333333+0,222222+100 */
  background: #f7f7f7;
  background: var(--domainBackgroundColor, #f7f7f7); /* Old browsers */
  z-index: 0;
}

  .Particles.menu-open {
    -webkit-transform: translateX(70%);
        transform: translateX(70%);
  }

  .Particles canvas {
    background-color: #f7f7f7;
  }

  :root {
  --agentBubbleColor: #dadada;
  --agentBubbleTextColor: #000;
  --ameliaBubbleColor: #fff;
  --ameliaBubbleTextColor: #000;
  --avatarName: Amelia;
  --backgroundColor: #FFF;
  --btnColor: #4d5aff;
  --btnTxtColor: #FFFFFF;
  --bubbleMessage: #f00;
  --chatBgColor: null;
  --chatBackgroundImage: null;
  --domainTxtColor: #3a3a3a;
  --font: Roboto;
  --headerColor: #f7f7f7;
  --headerBackgroundImage: null;
  --micColor: #4d5aff;
  --name: Default Amelia Theme;
  --primary: #4d5aff;
  --primaryTextColor: #3a3a3a;
  --primaryTxtColor: peru;
  --secondary: #3a3a3a;
  --secondaryTextColor: #FFF;
  --secondaryTxtColor: slateblue;
  --tooltipColor: #4d5aff;
  --tooltipTxtColor: #FFFFFF;
  --userLogItemBackgroundColor: #3a3a3a;
  --userLogItemFontColor: #FFFFFF;
  --userAvatarBackgroundColor: #DDDDDD;
  --userAvatarFontColor: #FAFAFA;
}

.Header {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
}

  .Header .in-header.hideMenuInHeader {
    visibility: hidden;
  }

  .Header .header-text-title {
    line-height: 48px;
    line-height: 3rem;
    margin-left: 16px;
    margin-left: 1rem;
  }

  .Header.disabled .toggle-menu-button, .Header.disabled .header-logo, .Header.disabled .Menu.in-header {
      display: none;
    }

  .Header.disabled .notifier-container {
      position: absolute;
      top: 0;
      right: 16px;
      right: 1rem;
      float: left;
    }

.header-logo {
  height: 100%;
  -ms-flex: 1;
      -webkit-box-flex: 1;
      flex: 1;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
}

.header-logo img {
    height: 100%;
    width: auto;
    display: inline-block;
  }

.notifier-container {
  cursor: pointer;
  margin: 11.2px 8px;
  margin: 0.7rem 0.5rem;
}

.notifier-container .notifier {
    height: 24px;
    height: 1.5rem;
    width: 24px;
    width: 1.5rem;
  }

.notifier-container .notifier div {
      height: inherit;
    }

.notifier-container .notifier svg {
      max-height: 100%;
      display: block;
    }

.toggle-menu-button {
  height: 24px;
  height: 1.5rem;
  cursor: pointer;
  margin: 11.2px 16px 11.2px 8px;
  margin: 0.7rem 1rem 0.7rem 0.5rem;

  display: -ms-flexbox;

  display: -webkit-box;

  display: flex;
  margin-right: auto;
}

.toggle-menu-button svg {
    max-height: 100%;
    display: block;
  }

.toggle-menu-button svg.hide {
      display: none;
    }

.toggle-switch-view-button {
  height: 32px;
  height: 2rem;
  padding: 16px;
  padding: 1rem;
  line-height: 1.6px;
  line-height: 0.1rem;
  border: 1px solid black;
  color: black;
  border-radius: 1rem;
  text-decoration: none;
  cursor: pointer;
  margin-left: 20.8px;
  margin-left: 1.3rem;
}

.notifier-close-chat-notes {
  color: #000;
}

.notifier-close-chat-notes img {
    max-height: 100%;
    display: block;
  }

.savedSlider {
  font-size: 16px;
  font-size: 1rem;
  height: 48px;
  height: 3rem;
  position: absolute;
  line-height: 1.5em;
  left: 0;
  padding: 16px;
  padding: 1rem;
  text-align: center;
  top: 0;
  width: 100%;
  z-index: 9999;
}

.savedSlider-enter {
  top: -79px;
  -webkit-transition: top 800ms ease-in;
  transition: top 800ms ease-in;
}

.savedSlider-enter.savedSlider-enter-active {
  top: 0;
}

.savedSlider-leave {
  top: 0;
  -webkit-transition: top 800ms ease-in;
  transition: top 800ms ease-in;
}

.savedSlider-leave.savedSlider-leave-active {
  top: -79px;
}

.dot {
  width: 5px;
  height: 5px;
  display: block;
  border-radius: 50%;
  background-color: #999;
  margin-bottom: 3px;
}

.hide {
  display: none;
}

.chatNotesNotifier {
  background-color: red;
  width: 24px;
  height: 24px;
  line-height: 2em;
  font-size: 12px;
  font-size: 0.75rem;
  border-radius: 50%;
  text-align: center;
  color: white;
}

@media (min-width: 769px) {
  .Header,
  .savedSlider {
    height: 5rem;
    line-height: 4rem;
    opacity: 1;
    padding: 0.5rem 1.5rem;
  }
      .Header.disabled .notifier-container, .savedSlider.disabled .notifier-container {
        margin: 1.25rem 0 1.25rem 1rem;
      }

  .savedSlider {
    -webkit-transition: top 800ms ease-in-out;
    transition: top 800ms ease-in-out;
  }

  .menu-in-header-notifier {
    margin-left: 0;
  }

  .toggle-menu-button {
    margin: 1.2rem 1rem 1.2rem 0;
  }

  .notifier-container {
    margin: 1.25rem 0 1.25rem 1rem;
  }
}

.hide-menu-button,
.hide-menu-in-header {
  display: none;
}

@media (max-width: 768px) {
    .header-logo.menu-in-header {
      margin-left: 0.5rem;
    }
}

:root {
  --agentBubbleColor: #dadada;
  --agentBubbleTextColor: #000;
  --ameliaBubbleColor: #fff;
  --ameliaBubbleTextColor: #000;
  --avatarName: Amelia;
  --backgroundColor: #FFF;
  --btnColor: #4d5aff;
  --btnTxtColor: #FFFFFF;
  --bubbleMessage: #f00;
  --chatBgColor: null;
  --chatBackgroundImage: null;
  --domainTxtColor: #3a3a3a;
  --font: Roboto;
  --headerColor: #f7f7f7;
  --headerBackgroundImage: null;
  --micColor: #4d5aff;
  --name: Default Amelia Theme;
  --primary: #4d5aff;
  --primaryTextColor: #3a3a3a;
  --primaryTxtColor: peru;
  --secondary: #3a3a3a;
  --secondaryTextColor: #FFF;
  --secondaryTxtColor: slateblue;
  --tooltipColor: #4d5aff;
  --tooltipTxtColor: #FFFFFF;
  --userLogItemBackgroundColor: #3a3a3a;
  --userLogItemFontColor: #FFFFFF;
  --userAvatarBackgroundColor: #DDDDDD;
  --userAvatarFontColor: #FAFAFA;
}

.Menu.hamburger-menu-icons-only {
    width: 100%;
    text-align: center;
  }
  .Menu.hide {
    display: none;
  }
  .Menu .Menu-wrapper {
    height: 100%;
  }
  .Menu .Menu-links.hamburger-menu-icons-only {
      padding: 96px 0 64px 0;
      padding: 6rem 0 4rem 0;
    }
  .Menu .Menu-links.hamburger-menu-icons-only svg {
        margin-right: 0;
      }
  .Menu .Menu-links {
    padding: 96px 0 64px 2em;
    padding: 6rem 0 4rem 2em;
}
  .Menu .Menu-links .disabled {
      opacity: 0.5;
    }
  .Menu ul {
    list-style: none;
  }
  .Menu ul li a {
      cursor: pointer;
      text-decoration: none;
      margin-bottom: 22.4px;
      margin-bottom: 1.4rem;
      display: inline-block;
      color: inherit;
    }
  .Menu ul li a:visited {
        color: inherit;
      }
  .Menu ul li a.menu-link-agent {
        margin-top: 48px;
        margin-top: 3rem;
      }
  .Menu ul li a .menu-icons {
        vertical-align: bottom;
        margin-right: 3px;
      }
  .Menu ul li a .hamburger-menu-styles {
        margin-right: 16px;
        margin-right: 1rem;
      }

.Header .Menu {
    padding: 0;
    margin: 0;
    float: right;
    margin: 24px 0;
    margin: 1.5rem 0;
    background: none;
  }

.Header .Menu.in-header {
      -webkit-transform: none;
          transform: none;
      float: left;
    }

.Header .Menu .Menu-wrapper {
      padding: 0;
      background: none;
      width: 100%;
    }

.Header .Menu .Menu-links {
      padding: 0;
    }

.Header .Menu .Menu-links.exposed-link ul li {
            padding-top: 0;
          }

.Header .Menu ul {
      display: block;
    }

.Header .Menu ul li {
        display: inline-block;
        padding-right: 32px;
        padding-right: 2rem;
      }

.Header .Menu ul li a {
        display: -ms-flexbox;
        display: -webkit-box;
        display: flex;
        margin: 0;
        -ms-flex-align: center;
            -webkit-box-align: center;
            align-items: center;
      }

.Header .Menu ul li a.menu-link-agent {
          margin: 0;
        }

.Header.with-chat-notes .Menu ul li {
      padding-right: 16px;
      padding-right: 1rem;
      font-size: 12.8px;
      font-size: 0.8rem;
    }

@media (min-width: 1920px) {

.Header.with-chat-notes .Menu ul li {
        font-size: 1rem;
        padding-right: 2rem
    }
      }

:root {
    --agentBubbleColor: #dadada;
    --agentBubbleTextColor: #000;
    --ameliaBubbleColor: #fff;
    --ameliaBubbleTextColor: #000;
    --avatarName: Amelia;
    --backgroundColor: #FFF;
    --btnColor: #4d5aff;
    --btnTxtColor: #FFFFFF;
    --bubbleMessage: #f00;
    --chatBgColor: null;
    --chatBackgroundImage: null;
    --domainTxtColor: #3a3a3a;
    --font: Roboto;
    --headerColor: #f7f7f7;
    --headerBackgroundImage: null;
    --micColor: #4d5aff;
    --name: Default Amelia Theme;
    --primary: #4d5aff;
    --primaryTextColor: #3a3a3a;
    --primaryTxtColor: peru;
    --secondary: #3a3a3a;
    --secondaryTextColor: #FFF;
    --secondaryTxtColor: slateblue;
    --tooltipColor: #4d5aff;
    --tooltipTxtColor: #FFFFFF;
    --userLogItemBackgroundColor: #3a3a3a;
    --userLogItemFontColor: #FFFFFF;
    --userAvatarBackgroundColor: #DDDDDD;
    --userAvatarFontColor: #FAFAFA;
}

.privacy-opener {
  color: '#fafafa';
  color: #3a3a3a;
  color: var(--secondary, '#fafafa');
  display: block;
  margin: 24px 0 auto;
  margin: 1.5rem 0 auto;
  cursor: pointer;
  font-family: sans-serif;
  text-align: center;
}

  .privacy-opener:hover {
    text-decoration: none;
  }

.privacy-policy-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #3a3a3a;
  color: whitesmoke;
  font-family: "Avenir-Book", sans-serif;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-align: center;
      -webkit-box-align: center;
      align-items: center;
  -ms-flex-pack: center;
      -webkit-box-pack: center;
      justify-content: center;
  z-index: 10;
}

.privacy-policy-wrapper .privacy-close {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABGdBTUEAALGPC/xhBQAAAKNJREFUKBWlklEOQDAMhleJc3AAR3FbDuAEXhwAx9j6MH+FxKSdoIlt2q/1d0ohhNE5V8JaIlpxNi3GWDNzB4ALLCUcDQoM2CsrS5IOppEcJ7D3fsYTZdeSTcYMoHQutqvTAM2ntnKAyyn7qYWkyO0rZt9yq//tk9SbxFneNV8iLweYMTNwKa0yGKPpvH4BLnxyRKwGt/8qySEsb4a8wpD3qMgbXeJvNbOS2p0AAAAASUVORK5CYII=);
    position: absolute;
    top: 16px;
    top: 1rem;
    right: 16px;
    right: 1rem;
    margin: 0;
    width: 11.2px;
    width: 0.7rem;
    cursor: pointer;
  }

.privacy-content {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 24px;
  padding: 1.5rem;
  background: #3a3a3a;
  overflow: auto;
}

.privacy-content .privacy-header {
    margin: 0 0 32px;
    margin: 0 0 2rem;
    padding: 0;
  }

.privacy-content p {
    margin-bottom: 32px;
    margin-bottom: 2rem;
  }

.privacy-content h3,
  .privacy-content h4,
  .privacy-content h5 {
    margin-bottom: 32px;
    margin-bottom: 2rem;
  }

.privacy-content h3 {
    display: inline-block;
    padding-top: 32px;
    padding-top: 2rem;
  }

.privacy-content ul {
    margin: 32px 0;
    margin: 2rem 0;
    list-style-type: circle;
  }

.privacy-content a {
    cursor: pointer;
    color: #4d5aff;
    text-decoration: underline;
  }

.privacy-content li {
    list-style-type: disc;
    margin-left: 36px;
    margin-left: 2.25rem;
    margin-top: 16px;
    margin-top: 1rem;
  }

@media (min-width: 769px) {
    .privacy-policy-wrapper .privacy-close {
      top: 2rem;
      right: 1.5rem;
    }

  .privacy-content {
    height: 70%;
    width: 50vw;
  }
}

:root {
  --agentBubbleColor: #dadada;
  --agentBubbleTextColor: #000;
  --ameliaBubbleColor: #fff;
  --ameliaBubbleTextColor: #000;
  --avatarName: Amelia;
  --backgroundColor: #FFF;
  --btnColor: #4d5aff;
  --btnTxtColor: #FFFFFF;
  --bubbleMessage: #f00;
  --chatBgColor: null;
  --chatBackgroundImage: null;
  --domainTxtColor: #3a3a3a;
  --font: Roboto;
  --headerColor: #f7f7f7;
  --headerBackgroundImage: null;
  --micColor: #4d5aff;
  --name: Default Amelia Theme;
  --primary: #4d5aff;
  --primaryTextColor: #3a3a3a;
  --primaryTxtColor: peru;
  --secondary: #3a3a3a;
  --secondaryTextColor: #FFF;
  --secondaryTxtColor: slateblue;
  --tooltipColor: #4d5aff;
  --tooltipTxtColor: #FFFFFF;
  --userLogItemBackgroundColor: #3a3a3a;
  --userLogItemFontColor: #FFFFFF;
  --userAvatarBackgroundColor: #DDDDDD;
  --userAvatarFontColor: #FAFAFA;
}

form.basicForm,
.ChatInput__button-wrapper {
  cursor: pointer;
}

  form.basicForm .eyemask-off, .ChatInput__button-wrapper .eyemask-off {
    background: none;
    background-image: url(data:image/png;base64,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);
    background-size: 100%;
    margin: -4px 8px 0 0;
    margin: -0.25rem 0.5rem 0 0;
    padding: 0;
    width: 32px;
    width: 2rem;
    height: 32px;
    height: 2rem;
  }

  form.basicForm .eyemask-on, .ChatInput__button-wrapper .eyemask-on {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABGdBTUEAALGPC/xhBQAABDhJREFUaAXtmM9rXFUUx5NJQn7QliYTJUJVGq2xmyhoBBUKiVqacREqEoxMJiRZdNHQhRv9D9RNFyUuXCQhk0lTAkUGZVpq26waoU0DdaOtrRAVBlpioG1iQ375OWHucOe++97LJFEQ74PLued7zj2/3pl775uSEve4CrgKuAq4CrgKuAq4Cvx/K1C6G6lPTk5WLy4utmLrvfX19ZehLzLqSktL94j9jY2Nx5A/GXcjkcjP0O8ZV3t7e59Ad/RsO4GRkZEqAovjvYPxDvPqYiIhub/Qv8JIM09tN5miE5DAcXqCSn8KfYbh90jF/8gJD0Dr/BTBs7yZL6FfF5tIUQkQ/EcEfhpH1sClqryJwfLy8lRPT8+PesCjo6PNq6urcXQGAt6WJPIJSZzT1wbNt5RAOp3eOz8/P4jjRICxawTX1dfX93uATsnw8PCz2JlA520/Pewko9HoQEdHxyM/HYWHJjA2Nta0srKSwWmjWmRSHH7X0NDwYSwWWzZlNj6TyVRms9nzyN63yQXD5q8VFRWx7u7u2346m3pBwqGhoVcwdIngnw7Qu11fX9+ylWrpNlKp1L7l5eXrYE06rs/xfR/fR/v7+2/puD73fQP0+6ssnmLs1xeYc3q2nZ69aOKsPwb2FuNb5DdMufCiw2/qgk2mMJJYIIZWvySsCdCnT7FInD6vDNkoxm/S86/rsvHx8VoqO876dsFJsCvoR4mvGXRf021Y5nP4asHXA1MWMYEcL7tAYPA5vW/M9QR/RgUvMhKYNXUM3mPDkAsrsVh3Jk8C9H2CANosRjxQWVnZtA7SEodYK4fb5kPV5tlO7yjeh/7ggxfAEpPEVgDClJsA/GcWzArRv1ldgJOCdoJ/qOS0SiMJNZP0bCKR+E3hnBlZdjnFhlGJLakr2RLQ5TudHyTwOyQSZdQx5F70MUbzCezUQcRi4AsLZoXo74ITmQrPmIoEfAgsf40wdTidC2yY63Uef5/rvMw9CbBdySuSS1bos7a2Jttk/mG3+YUAU3nAmIhMdAz4TYP3Y6+wdswUehIQBRx1QeZMZQt/3MQqKytPsd6zt4NlRGbqw39gwUxoLheTiZdYzwHRyp3CU7RArWeVBvBaww4y0Z6mep7DDh9yVmQ0c54pgRd/kCkruSRCrxJU9o14PJ7fcdT6IJq7Sshh+ZKfHsGHXiWsLaQMyvHNheoIhu4pzEKbOLzOygXNIrNCoitrEAYFf098+10hlGHfFlIKQrdynSbJafb0Ln2P122oeTKZfI6dZ4LWLNgAlFwotnbvOq0b5qQN/aBB/yuCS5mVy7WjnNInkft9fv4zHzRGElXwoZ+UVHEBvfwnZchm8O98UpqJENR/76NeT0LN5W+VpaWlNhJ6l3GY8QIyz98qshkwfmJcrqmpudrZ2Sn/TLjHVcBVwFXAVcBVwFXAVcBVYJsV+BtJhr+PbIBs7gAAAABJRU5ErkJggg==);
  }

  :root {
  --agentBubbleColor: #dadada;
  --agentBubbleTextColor: #000;
  --ameliaBubbleColor: #fff;
  --ameliaBubbleTextColor: #000;
  --avatarName: Amelia;
  --backgroundColor: #FFF;
  --btnColor: #4d5aff;
  --btnTxtColor: #FFFFFF;
  --bubbleMessage: #f00;
  --chatBgColor: null;
  --chatBackgroundImage: null;
  --domainTxtColor: #3a3a3a;
  --font: Roboto;
  --headerColor: #f7f7f7;
  --headerBackgroundImage: null;
  --micColor: #4d5aff;
  --name: Default Amelia Theme;
  --primary: #4d5aff;
  --primaryTextColor: #3a3a3a;
  --primaryTxtColor: peru;
  --secondary: #3a3a3a;
  --secondaryTextColor: #FFF;
  --secondaryTxtColor: slateblue;
  --tooltipColor: #4d5aff;
  --tooltipTxtColor: #FFFFFF;
  --userLogItemBackgroundColor: #3a3a3a;
  --userLogItemFontColor: #FFFFFF;
  --userAvatarBackgroundColor: #DDDDDD;
  --userAvatarFontColor: #FAFAFA;
}

.DomainList-filter {
  border-bottom: 2px solid #ddd;
  padding: 3.2px 19.2px;
  padding: 0.2rem 1.2rem;
  margin: 0 0 16px 0;
  margin: 0 0 1rem 0;
  -ms-flex: none;
      -webkit-box-flex: 0;
      flex: none;
}

  .DomainList-filter .DomainList-search {
    border: 0;
    color: #7f7f7f;
    font-size: 16px;
    font-size: 1rem;
    line-height: 1.5em;
    padding: 1rem 1rem 1rem calc(0.5rem + 24px);
    background: url(data:image/png;base64,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);
    background-color: none;
    background-repeat: no-repeat;
    background-size: 24px;
    background-position: left center;
    width: 100%;
  }

.DomainList-wrapper {
  overflow: auto;
  max-height: 256px;
  max-height: 16rem;
}

.DomainList-wrapper a {
    display: block;
    background: white;
    border-radius: 0.3rem;
    cursor: pointer;
    margin: 0 0 8px;
    margin: 0 0 0.5rem;
    padding: 12.8px 16px;
    padding: 0.8rem 1rem;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-direction: row;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        flex-direction: row;
    -ms-flex-align: baseline;
        -webkit-box-align: baseline;
        align-items: baseline;
    text-decoration: none;
    color: inherit;
    margin: 4.8px;
    margin: 0.3rem;
  }

/* WCAG */

.DomainList-wrapper a .DomainList-name {
      color: black;
      overflow: hidden;
      text-overflow: ellipsis;
      text-decoration: none;
      white-space: nowrap;
      font-size: 14.4px;
      font-size: 0.9rem;
    }

.DomainList-wrapper a .DomainList-lang {
      color: #666;
      font-size: 12px;
      font-size: 0.75rem;
      line-height: 1.5em;
      text-transform: lowercase;
      margin-left: 5px;
    }

@media (min-width: 769px) {
    .DomainList ul {
      list-style-type: none;
    }
    .DomainList-list li {
      padding: 1rem;
    }

  .DomainList-filter {
    margin-bottom: 2rem;
  }
}

:root {
  --agentBubbleColor: #dadada;
  --agentBubbleTextColor: #000;
  --ameliaBubbleColor: #fff;
  --ameliaBubbleTextColor: #000;
  --avatarName: Amelia;
  --backgroundColor: #FFF;
  --btnColor: #4d5aff;
  --btnTxtColor: #FFFFFF;
  --bubbleMessage: #f00;
  --chatBgColor: null;
  --chatBackgroundImage: null;
  --domainTxtColor: #3a3a3a;
  --font: Roboto;
  --headerColor: #f7f7f7;
  --headerBackgroundImage: null;
  --micColor: #4d5aff;
  --name: Default Amelia Theme;
  --primary: #4d5aff;
  --primaryTextColor: #3a3a3a;
  --primaryTxtColor: peru;
  --secondary: #3a3a3a;
  --secondaryTextColor: #FFF;
  --secondaryTxtColor: slateblue;
  --tooltipColor: #4d5aff;
  --tooltipTxtColor: #FFFFFF;
  --userLogItemBackgroundColor: #3a3a3a;
  --userLogItemFontColor: #FFFFFF;
  --userAvatarBackgroundColor: #DDDDDD;
  --userAvatarFontColor: #FAFAFA;
}

.ViewLogin-logo {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-align: center;
      -webkit-box-align: center;
      align-items: center;
  -ms-flex-pack: center;
      -webkit-box-pack: center;
      justify-content: center;
  height: 96px;
  height: 6rem;
}

  .ViewLogin-logo.sso-login {
    margin-top: 80px;
    margin-top: 5rem;
  }

  .ViewLogin-logo img {
    height: auto;
    max-width: 80%;
    max-height: 40%;
  }

.ViewLogin-form {
  margin-bottom: 32px;
  margin-bottom: 2rem;
}

@media (min-width: 769px) {
    .ViewLogin.only-form .ViewLogin-logo {
      height: 10rem;
    }

    .ViewLogin-logo img {
      max-width: 15rem;
    }

  .ViewLogin-form {
    width: 80%;
    margin: 0 auto 3rem auto;
  }
}

:root {
  --agentBubbleColor: #dadada;
  --agentBubbleTextColor: #000;
  --ameliaBubbleColor: #fff;
  --ameliaBubbleTextColor: #000;
  --avatarName: Amelia;
  --backgroundColor: #FFF;
  --btnColor: #4d5aff;
  --btnTxtColor: #FFFFFF;
  --bubbleMessage: #f00;
  --chatBgColor: null;
  --chatBackgroundImage: null;
  --domainTxtColor: #3a3a3a;
  --font: Roboto;
  --headerColor: #f7f7f7;
  --headerBackgroundImage: null;
  --micColor: #4d5aff;
  --name: Default Amelia Theme;
  --primary: #4d5aff;
  --primaryTextColor: #3a3a3a;
  --primaryTxtColor: peru;
  --secondary: #3a3a3a;
  --secondaryTextColor: #FFF;
  --secondaryTxtColor: slateblue;
  --tooltipColor: #4d5aff;
  --tooltipTxtColor: #FFFFFF;
  --userLogItemBackgroundColor: #3a3a3a;
  --userLogItemFontColor: #FFFFFF;
  --userAvatarBackgroundColor: #DDDDDD;
  --userAvatarFontColor: #FAFAFA;
}


.session-overlay {
  background: rgba(0, 0, 0, 0);
  cursor: pointer;
  -webkit-transition: background 600ms ease-in-out;
  transition: background 600ms ease-in-out;
  z-index: 9;
  left: 0;
  top: -80px;
  height: calc(100vh + 80px);
  position: absolute;
  width: 100vw;
  bottom: -100vh;
}

  .session-overlay .session-modal {
    background: #fff;
    border-radius: 1rem;
    border: 1px solid oldlace;
    max-height: 288px;
    max-height: 18rem;
    padding: 32px;
    padding: 2rem;
    position: relative;
    -webkit-transition: bottom 600ms ease-in-out;
    transition: bottom 600ms ease-in-out;
    width: 320px;
    width: 20rem;
    z-index: 9999;
    margin: 0 auto;
  }

  .session-overlay .session-modal.center {
      text-align: center;
    }

  .session-overlay .session-modal p {
      width: 100%;
    }

  .session-overlay .session-modal h4 {
      margin-bottom: 16px;
      margin-bottom: 1rem;
    }

  .session-overlay .session-modal-info {
    font-size: 16px;
    font-size: 1rem;
    line-height: 1.5em;
    font-weight: 300;
    margin-bottom: 24px;
    margin-bottom: 1.5rem;
  }

  .session-overlay .session-modal-relogin {
    border-radius: 0.3rem;
    color: #fff;
    cursor: pointer;
    letter-spacing: 0.8px;
    letter-spacing: 0.05rem;
    width: 90%;
  }

  .session-overlay .session-logout-actions {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-pack: justify;
        -webkit-box-pack: justify;
        justify-content: space-between;
    width: 100%;
    margin-top: 24px;
    margin-top: 1.5rem;
  }

  .session-overlay .logout-action {
    border-radius: 0.3rem;
    cursor: pointer;
    letter-spacing: 0.8px;
    letter-spacing: 0.05rem;
    height: 64px;
    height: 4rem;
    width: 46%;
  }

  .session-overlay .logout-action.logout {
      background: #f7f7f7;
      color: #fafafa;
      color: #3a3a3a;
      color: var(--secondary, #fafafa);
    }

.login-panel__domain .session-modal {
    color: grey;
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 1.5em;
    -ms-flex-pack: center;
        -webkit-box-pack: center;
        justify-content: center;
    max-height: 192px;
    max-height: 12rem;
    text-align: center;
  }

.login-panel__domain .session-modal small {
      color: black;
      font-size: 20px;
      font-size: 1.25rem;
      line-height: 1.5em;
      font-weight: 900;
      margin-top: 12.8px;
      margin-top: 0.8rem;
    }

@media (min-width: 769px) {
    .session-modal.confirmation {
      padding: 1.5rem 1rem;
      width: 24rem;
    }
}

:root {
  --agentBubbleColor: #dadada;
  --agentBubbleTextColor: #000;
  --ameliaBubbleColor: #fff;
  --ameliaBubbleTextColor: #000;
  --avatarName: Amelia;
  --backgroundColor: #FFF;
  --btnColor: #4d5aff;
  --btnTxtColor: #FFFFFF;
  --bubbleMessage: #f00;
  --chatBgColor: null;
  --chatBackgroundImage: null;
  --domainTxtColor: #3a3a3a;
  --font: Roboto;
  --headerColor: #f7f7f7;
  --headerBackgroundImage: null;
  --micColor: #4d5aff;
  --name: Default Amelia Theme;
  --primary: #4d5aff;
  --primaryTextColor: #3a3a3a;
  --primaryTxtColor: peru;
  --secondary: #3a3a3a;
  --secondaryTextColor: #FFF;
  --secondaryTxtColor: slateblue;
  --tooltipColor: #4d5aff;
  --tooltipTxtColor: #FFFFFF;
  --userLogItemBackgroundColor: #3a3a3a;
  --userLogItemFontColor: #FFFFFF;
  --userAvatarBackgroundColor: #DDDDDD;
  --userAvatarFontColor: #FAFAFA;
}

.ViewDomains-header {
  margin: 0 0 16px;
  margin: 0 0 1rem;
  padding: 0 16px;
  padding: 0 1rem;
  color: #000;
  color: initial;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.5em;
}

  .ViewDomains-header h1 {
    font-size: 24px;
    font-size: 1.5rem;
    line-height: 1.33em;
  }

  .ViewDomains-header h2 {
    font-size: 16px;
    font-size: 1rem;
    line-height: 1.5em;
  }

.ViewDomains-list {
  margin: 0 auto;
}

.ViewDomains-logo {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-align: center;
      -webkit-box-align: center;
      align-items: center;
  -ms-flex-pack: center;
      -webkit-box-pack: center;
      justify-content: center;
  height: 112px;
  height: 7rem;
}

.ViewDomains-logo img {
    height: auto;
    max-width: 60%;
    max-height: 40%;
  }

@media (min-width: 769px) {
  .ViewDomains-logo {
    height: 9rem;
  }

    .ViewDomains-logo img {
      max-width: 15rem;
    }
}

:root {
  --agentBubbleColor: #dadada;
  --agentBubbleTextColor: #000;
  --ameliaBubbleColor: #fff;
  --ameliaBubbleTextColor: #000;
  --avatarName: Amelia;
  --backgroundColor: #FFF;
  --btnColor: #4d5aff;
  --btnTxtColor: #FFFFFF;
  --bubbleMessage: #f00;
  --chatBgColor: null;
  --chatBackgroundImage: null;
  --domainTxtColor: #3a3a3a;
  --font: Roboto;
  --headerColor: #f7f7f7;
  --headerBackgroundImage: null;
  --micColor: #4d5aff;
  --name: Default Amelia Theme;
  --primary: #4d5aff;
  --primaryTextColor: #3a3a3a;
  --primaryTxtColor: peru;
  --secondary: #3a3a3a;
  --secondaryTextColor: #FFF;
  --secondaryTxtColor: slateblue;
  --tooltipColor: #4d5aff;
  --tooltipTxtColor: #FFFFFF;
  --userLogItemBackgroundColor: #3a3a3a;
  --userLogItemFontColor: #FFFFFF;
  --userAvatarBackgroundColor: #DDDDDD;
  --userAvatarFontColor: #FAFAFA;
}

.instruction {
  position: relative;
  height: 80px;
  height: 5rem;
  overflow: hidden;
  -webkit-transition: height 0.6s ease-in-out;
  transition: height 0.6s ease-in-out;
}

  .instruction.hidden {
    height: 0;
  }

  .instruction ul {
    width: 100%;
    list-style: none;
    padding: 0 0 16px 16px;
    padding: 0 0 1rem 1rem;
  }

  :root {
  --agentBubbleColor: #dadada;
  --agentBubbleTextColor: #000;
  --ameliaBubbleColor: #fff;
  --ameliaBubbleTextColor: #000;
  --avatarName: Amelia;
  --backgroundColor: #FFF;
  --btnColor: #4d5aff;
  --btnTxtColor: #FFFFFF;
  --bubbleMessage: #f00;
  --chatBgColor: null;
  --chatBackgroundImage: null;
  --domainTxtColor: #3a3a3a;
  --font: Roboto;
  --headerColor: #f7f7f7;
  --headerBackgroundImage: null;
  --micColor: #4d5aff;
  --name: Default Amelia Theme;
  --primary: #4d5aff;
  --primaryTextColor: #3a3a3a;
  --primaryTxtColor: peru;
  --secondary: #3a3a3a;
  --secondaryTextColor: #FFF;
  --secondaryTxtColor: slateblue;
  --tooltipColor: #4d5aff;
  --tooltipTxtColor: #FFFFFF;
  --userLogItemBackgroundColor: #3a3a3a;
  --userLogItemFontColor: #FFFFFF;
  --userAvatarBackgroundColor: #DDDDDD;
  --userAvatarFontColor: #FAFAFA;
}

.ViewPassword-form {
  -ms-flex: none;
      -webkit-box-flex: 0;
      flex: none;
  width: 100%;
  margin: 0 auto;
}

.ViewPassword-header {
  margin: 0 0 16px;
  margin: 0 0 1rem;
  padding: 0 16px;
  padding: 0 1rem;
  color: #000;
  color: initial;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.5em;
}

.ViewPassword-header h5, .ViewPassword-header h6 {
    font-weight: normal;
  }

.ViewPassword-logo {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-align: center;
      -webkit-box-align: center;
      align-items: center;
  -ms-flex-pack: center;
      -webkit-box-pack: center;
      justify-content: center;
  height: 112px;
  height: 7rem;
}

.ViewPassword-logo img {
    height: auto;
    max-width: 60%;
    max-height: 40%;
  }

@media (min-width: 769px) {
  .ViewPassword-logo {
    height: 9rem;
  }

    .ViewPassword-logo img {
      max-width: 15rem;
    }
}

:root {
  --agentBubbleColor: #dadada;
  --agentBubbleTextColor: #000;
  --ameliaBubbleColor: #fff;
  --ameliaBubbleTextColor: #000;
  --avatarName: Amelia;
  --backgroundColor: #FFF;
  --btnColor: #4d5aff;
  --btnTxtColor: #FFFFFF;
  --bubbleMessage: #f00;
  --chatBgColor: null;
  --chatBackgroundImage: null;
  --domainTxtColor: #3a3a3a;
  --font: Roboto;
  --headerColor: #f7f7f7;
  --headerBackgroundImage: null;
  --micColor: #4d5aff;
  --name: Default Amelia Theme;
  --primary: #4d5aff;
  --primaryTextColor: #3a3a3a;
  --primaryTxtColor: peru;
  --secondary: #3a3a3a;
  --secondaryTextColor: #FFF;
  --secondaryTxtColor: slateblue;
  --tooltipColor: #4d5aff;
  --tooltipTxtColor: #FFFFFF;
  --userLogItemBackgroundColor: #3a3a3a;
  --userLogItemFontColor: #FFFFFF;
  --userAvatarBackgroundColor: #DDDDDD;
  --userAvatarFontColor: #FAFAFA;
}
.ChatInput {
  -ms-flex: none;
      -webkit-box-flex: 0;
      flex: none;
}
  .ChatInput .Select .Select-option {
      padding: 0 5px;
      margin-bottom: .5em;
    }

.ChatInput__wrapper {
  position: relative;
  z-index: 2;
}

.ChatInput__wrapper .ChatInputDrawer {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
  }

.ChatInput__wrapper .ChatInputDrawer.date-picker {
      -ms-flex-pack: center;
          -webkit-box-pack: center;
          justify-content: center;
    }

.ChatInput__wrapper .ChatInputDrawer.full-container-width .ChatInput__integration-content {
        width: 100%;
      }

.ChatInput__textarea {
  -ms-flex-align: top;
      -webkit-box-align: top;
      align-items: top;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  width: 100%;
  position: relative;
  z-index: 2;
  padding: 16px;
  padding: 1rem;
  padding-bottom: 0;
  clear: both;
  border-radius: 0.8rem;
  word-break: break-word;
}

.ChatInput__textarea.is-off-the-record-on {
    padding: 12.8px 12.8px 0 12.8px;
    padding: 0.8rem 0.8rem 0 0.8rem;
  }

.ChatInput__input-wrapper {
  -ms-flex: 1;
      -webkit-box-flex: 1;
      flex: 1;
  position: relative;
  z-index: 2;
  height: 100%;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
}

.isOffTheRecordOn {
  border: 3.2px solid #f5bf42;
  border: 0.2rem solid #f5bf42
}

.ChatInput__input {
  display: block;
  font-family: inherit;
  padding: 0;
  width: 100%;
  background: none;
  overflow: auto;
  resize: none;
  height: 19.2px;
  height: 1.2rem;
  min-height: 19.2px;
  min-height: 1.2rem;
  max-height: 76.8px;
  max-height: 4.8rem;
  -ms-overflow-style: none;
}

.ChatInput__input::-webkit-input-placeholder {
    font-style: italic;
    color: #999;
    opacity: 1;
  }

.ChatInput__input:-ms-input-placeholder {
    font-style: italic;
    color: #999;
    opacity: 1;
  }

.ChatInput__input::-moz-placeholder {
    font-style: italic;
    color: #999;
    opacity: 1;
  }

.ChatInput__input::placeholder {
    font-style: italic;
    color: #999;
    opacity: 1;
  }

.ChatInput__input.hide-chat-input-focus-ring-color {
    outline: none;
  }

.ChatInput__input.masked {
    height: 19.2px;
    height: 1.2rem;
  }

.ChatInput__hiddenAutoGrow {
  height: 0;
  visibility: hidden;
  overflow: hidden;
  line-height: 19.2px;
  line-height: 1.2rem;
}

.ChatInput__hiddenAutoGrow > div {
    min-height: 19.2px;
    min-height: 1.2rem;
  }

.ChatInput__button-wrapper {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-item-align: end;
      align-self: flex-end;
  -ms-flex-direction: column;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      flex-direction: column;
}

.ChatInput__cancel-button {
  background: none;
  color: #999;
  text-align: center;
  padding: 16px 0 16px 16px;
  padding: 1rem 0 1rem 1rem;
  height: 62px;
  float: left;
  position: relative;
  z-index: 1;
  font-size: 0;
}

@media (min-width: 769px) {

.ChatInput__cancel-button {
    padding: 1rem
}
  }

.ChatInput__cancel-button::before {
    content: "";
    display: inline-block;
    background-image: url(data:image/png;base64,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);
    background-size: 100%;
    color: #fff;
    border-radius: 50%;
    width: 20px;
    width: 1.25rem;
    height: 20px;
    height: 1.25rem;
    font-style: normal;
    vertical-align: bottom;
  }

.ChatInput__cancel-button.with-label {
    position: static;
    float: none;
    font-size: inherit;
  }

.ChatInput__integration-content {
  overflow: auto;
}

.ChatInput__integration-content.with-cancel-button {
    border-radius: 0.5rem;
    min-height: 48px;
    min-height: 3rem;
  }

@media (min-width: 769px) {
  .ChatInput__textarea {
    padding: 1.5rem;
    padding-bottom: 0;
  }

    .ChatInput__textarea.is-off-the-record-on {
      padding: 1.3rem 1.3rem 0 1.3rem;
    }

  .ChatInput__input {
    height: auto;
    line-height: 1.2rem;
    min-height: 3.6rem;
    max-height: 10.8rem;
  }

    .ChatInput__input.masked {
      height: 1.2rem;
      padding: 0 0 2.4rem 0;
    }

  .ChatInput__button-wrapper {
    -ms-flex-item-align: start;
        align-self: flex-start;
  }

  .ChatInput__input-wrapper {
    padding-right: 4rem;
    min-height: 3.6rem;
  }

  .ChatInput__wrapper {
    -webkit-box-shadow: 0 8px 1rem rgba(0, 0, 0, .09);
            box-shadow: 0 8px 1rem rgba(0, 0, 0, .09);
    border-radius: 0.8rem;
    -ms-flex-direction: row;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        flex-direction: row;
  }

    .ChatInput__wrapper.input-focused {
      -webkit-box-shadow: 0 8px 1rem rgba(0, 0, 0, .20);
              box-shadow: 0 8px 1rem rgba(0, 0, 0, .20);
    }
}

:root {
  --agentBubbleColor: #dadada;
  --agentBubbleTextColor: #000;
  --ameliaBubbleColor: #fff;
  --ameliaBubbleTextColor: #000;
  --avatarName: Amelia;
  --backgroundColor: #FFF;
  --btnColor: #4d5aff;
  --btnTxtColor: #FFFFFF;
  --bubbleMessage: #f00;
  --chatBgColor: null;
  --chatBackgroundImage: null;
  --domainTxtColor: #3a3a3a;
  --font: Roboto;
  --headerColor: #f7f7f7;
  --headerBackgroundImage: null;
  --micColor: #4d5aff;
  --name: Default Amelia Theme;
  --primary: #4d5aff;
  --primaryTextColor: #3a3a3a;
  --primaryTxtColor: peru;
  --secondary: #3a3a3a;
  --secondaryTextColor: #FFF;
  --secondaryTxtColor: slateblue;
  --tooltipColor: #4d5aff;
  --tooltipTxtColor: #FFFFFF;
  --userLogItemBackgroundColor: #3a3a3a;
  --userLogItemFontColor: #FFFFFF;
  --userAvatarBackgroundColor: #DDDDDD;
  --userAvatarFontColor: #FAFAFA;
}


.ChatInput__submit-button {
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 50%;
  width: 24px;
  width: 1.5rem;
  height: 24px;
  height: 1.5rem;
  padding: 0;
  display: block;
}

.ChatInput__submit-button:hover {
    opacity: 0.8;
  }

.ChatInput__submit-button[disabled] {
    background-color: #969696;
  }

.ChatInput__mic-button {
  background-color: #4d5aff;
  background-color: #4d5aff;
  background-color: var(--micColor, #4d5aff);
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 50%;
  width: 24px;
  width: 1.5rem;
  height: 24px;
  height: 1.5rem;
  padding: 0;
}

.ChatInput__mic-button:hover, .ChatInput__mic-button:focus {
    opacity: 0.8;
  }

.ChatInput__mic-button[disabled] {
    opacity: 0.2;
  }

.file-upload-wrapper {
  margin-top: 4px;
  margin-top: 0.25rem;
  margin-right: 16px;
  margin-right: 1rem;
}

.cancel-file-upload {
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, .4);
  border-radius: 13px;
  color: rgba(0, 0, 0, .4);
  margin-right: 8px;
  margin-right: 0.5rem;
  font-size: 8px;
  font-size: 0.5rem;
  line-height: 1.5em;
  padding: 9.6px;
  padding: 0.6rem;
  position: relative;
}

.file-upload {
  background-color: #0b68cf;
  background-color: #4d5aff;
  background-color: var(--primary, #0b68cf);
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAWCAYAAADAQbwGAAAABGdBTUEAALGPC/xhBQAAAPVJREFUOBHtUrENwjAQjFNAlzoDZJ/UaTNCmszBFjAEE4DEBtBAQZEaUZl7Y5vPywasIGh46ZT33d/Fsp1l3y6tdQOcLJpJ/0dID8jqk0ORoICFTGJr0tRbwRicAStmjrVLmn0aioECWMcSAjzNFsFQCCWwC5heUeQpR6EgKuAAyArtNsTtYax8KBZbmYS1OaMAHzvjDQ8chNHfouA1mcDlgHwFAw9sMXCx6LxwN4N+lNA6KM7XkubfEoS5IZS6CpPZleMUyvX0lb6RyAddT3tzPX1lINeozyUxdf0PnHqCP7qUM9s37xmd0OIZ1sDRok6wfmb0BrPm/snN4vfGAAAAAElFTkSuQmCC);
  background-position: 90%;
  background-repeat: no-repeat;
  background-size: 15%;
  border-radius: 13px;
  font-size: 8px;
  font-size: 0.5rem;
  line-height: 1.5em;
  padding: 9.6px;
  padding: 0.6rem;
  padding-right: 28px;
  padding-right: 1.75rem;
  position: relative;
}

.file-upload:disabled {
    background-color: #999;
  }

:root {
  --agentBubbleColor: #dadada;
  --agentBubbleTextColor: #000;
  --ameliaBubbleColor: #fff;
  --ameliaBubbleTextColor: #000;
  --avatarName: Amelia;
  --backgroundColor: #FFF;
  --btnColor: #4d5aff;
  --btnTxtColor: #FFFFFF;
  --bubbleMessage: #f00;
  --chatBgColor: null;
  --chatBackgroundImage: null;
  --domainTxtColor: #3a3a3a;
  --font: Roboto;
  --headerColor: #f7f7f7;
  --headerBackgroundImage: null;
  --micColor: #4d5aff;
  --name: Default Amelia Theme;
  --primary: #4d5aff;
  --primaryTextColor: #3a3a3a;
  --primaryTxtColor: peru;
  --secondary: #3a3a3a;
  --secondaryTextColor: #FFF;
  --secondaryTxtColor: slateblue;
  --tooltipColor: #4d5aff;
  --tooltipTxtColor: #FFFFFF;
  --userLogItemBackgroundColor: #3a3a3a;
  --userLogItemFontColor: #FFFFFF;
  --userAvatarBackgroundColor: #DDDDDD;
  --userAvatarFontColor: #FAFAFA;
}

.select-container {
  width: inherit;
}
:root {
  --agentBubbleColor: #dadada;
  --agentBubbleTextColor: #000;
  --ameliaBubbleColor: #fff;
  --ameliaBubbleTextColor: #000;
  --avatarName: Amelia;
  --backgroundColor: #FFF;
  --btnColor: #4d5aff;
  --btnTxtColor: #FFFFFF;
  --bubbleMessage: #f00;
  --chatBgColor: null;
  --chatBackgroundImage: null;
  --domainTxtColor: #3a3a3a;
  --font: Roboto;
  --headerColor: #f7f7f7;
  --headerBackgroundImage: null;
  --micColor: #4d5aff;
  --name: Default Amelia Theme;
  --primary: #4d5aff;
  --primaryTextColor: #3a3a3a;
  --primaryTxtColor: peru;
  --secondary: #3a3a3a;
  --secondaryTextColor: #FFF;
  --secondaryTxtColor: slateblue;
  --tooltipColor: #4d5aff;
  --tooltipTxtColor: #FFFFFF;
  --userLogItemBackgroundColor: #3a3a3a;
  --userLogItemFontColor: #FFFFFF;
  --userAvatarBackgroundColor: #DDDDDD;
  --userAvatarFontColor: #FAFAFA;
}
.drag-n-drop {
  min-height: 160px;
  min-height: 10rem;
  height: auto;
  width: 100%;
  color: rgba(0, 0, 0, .4);
  padding: 0;
}

.drag-n-drop section {
  min-height: inherit;
  height: inherit;
}

.drag-n-drop section.dnd-overlay-show {
    background-color: #d3d3d3;
    opacity: 0.4;
  }

.drag-n-drop .cancelUpload {
  -ms-flex-item-align: left;
      -ms-grid-row-align: left;
      align-self: left;
  width: 28px;
  height: 28px;
  margin: 4px 0 0 4px;
  margin: 0.25rem 0 0 0.25rem;
}

.drag-n-drop .cancelUpload img {
  width: 100%;
  height: 100%;
}

.dropzone-container {
  width: 100%;
  min-height: inherit;
  height: inherit;
  max-height: 240px;
  max-height: 15rem;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-direction: column;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      flex-direction: column;
  padding: 16px;
  padding: 1rem;
  z-index: 1;
}

.dropzone .cancelUpload {
  cursor: pointer;
}

.dropzone {
  min-height: inherit;
  height: inherit;
}

.dropzone img {
  max-width: 144px;
  max-width: 9rem;
  height: auto;
  border-radius: 5%;
  -ms-flex-item-align: end;
      align-self: flex-end;
}

.previewContainer {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  direction: rtl;
  overflow: auto;
  margin-top: 16px;
  margin-top: 1rem;
}

.upload-preview-container {
  min-width: 160px;
  min-width: 10rem;
  height: 112px;
  height: 7rem;
  text-align: center;
}

.upload-preview-container .upload-preview-name {
    font-size: 14px;
    font-size: 0.875rem;
    word-break: break-all;
    margin: 8px 8px;
    margin: 0.5rem 0.5rem;
  }

.dropzone .uploadPreview {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-direction: column;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      flex-direction: column;
  margin: 0 8px;
  margin: 0 .5rem;
  border: 1px solid rgba(0, 0, 0, .4);
  border-radius: 1rem;
  padding: 8px;
  padding: 0.5rem;
  height: 112px;
  height: 7rem;
  direction: ltr;
  min-width: 160px;
  min-width: 10rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.dropzone .uploadPreview.notImage {
    min-width: 80px;
    min-width: 5rem;
    height: 80px;
    height: 5rem;
    border: none;
    background-size: contain;
  }

.uploadRemoveItem {
  -ms-flex-item-align: end;
      align-self: flex-end;
  cursor: pointer;
  font-size: 16px;
  font-size: 1rem;
}

.uploadRemoveItem img {
  width: 20px;
  height: auto;
}

.dnd-message {
  margin-top: 16px;
  margin-top: 1rem;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
  text-align: center;
  width: 100%;
}

.dnd-message-hide {
  display: none;
}

.drag-n-drop .dnd-message p:first-of-type {
  font-weight: bold;
  line-height: 48px;
  line-height: 3rem;
}

@media (min-width: 769px) {
  .drag-n-drop .dnd-message p:first-of-type {
    line-height: 1rem;
  }
}

:root {
  --agentBubbleColor: #dadada;
  --agentBubbleTextColor: #000;
  --ameliaBubbleColor: #fff;
  --ameliaBubbleTextColor: #000;
  --avatarName: Amelia;
  --backgroundColor: #FFF;
  --btnColor: #4d5aff;
  --btnTxtColor: #FFFFFF;
  --bubbleMessage: #f00;
  --chatBgColor: null;
  --chatBackgroundImage: null;
  --domainTxtColor: #3a3a3a;
  --font: Roboto;
  --headerColor: #f7f7f7;
  --headerBackgroundImage: null;
  --micColor: #4d5aff;
  --name: Default Amelia Theme;
  --primary: #4d5aff;
  --primaryTextColor: #3a3a3a;
  --primaryTxtColor: peru;
  --secondary: #3a3a3a;
  --secondaryTextColor: #FFF;
  --secondaryTxtColor: slateblue;
  --tooltipColor: #4d5aff;
  --tooltipTxtColor: #FFFFFF;
  --userLogItemBackgroundColor: #3a3a3a;
  --userLogItemFontColor: #FFFFFF;
  --userAvatarBackgroundColor: #DDDDDD;
  --userAvatarFontColor: #FAFAFA;
}


.ChatInputActionBar .ChatInputActionBarContainer {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    list-style-type: none;
    padding: 0 16px;
    padding: 0 1rem;
    padding-bottom: 16px;
    padding-bottom: 1rem;
  }

    .ChatInputActionBar .ChatInputActionBarContainer.is-off-the-record-on {
      padding: 0 12.8px 12.8px 12.8px;
      padding: 0 0.8rem 0.8rem 0.8rem;
    }

    .ChatInputActionBar .ChatInputActionBarContainer .actionBarIcon-container {
      margin-right: 16px;
      margin-right: 1rem;
      border-radius: 50%;
      background-color: #4d5aff;
      opacity: .2;
      width: 24px;
      width: 1.5rem;
      height: 24px;
      height: 1.5rem;

      display: -ms-flexbox;

      display: -webkit-box;

      display: flex;
      -ms-flex-pack: center;
          -webkit-box-pack: center;
          justify-content: center;
    }

    .ChatInputActionBar .ChatInputActionBarContainer .actionBarIcon-container svg {
        height: 100%;
      }

    .ChatInputActionBar .ChatInputActionBarContainer .actionBarIcon-container.isTriggered {
        opacity: 1;
      }

    .ChatInputActionBar .ChatInputActionBarContainer li:hover {
      cursor: pointer;
    }

@media (min-width: 769px) {

      .ChatInputActionBar .ChatInputActionBarContainer.is-off-the-record-on {
        padding: 0 1.3rem 1.3rem 1.3rem;
      }

      .ChatInputActionBar .ChatInputActionBarContainer {

      padding: 0 1.5rem;
      padding-bottom: 1.5rem;
    }
}

:root {
    --agentBubbleColor: #dadada;
    --agentBubbleTextColor: #000;
    --ameliaBubbleColor: #fff;
    --ameliaBubbleTextColor: #000;
    --avatarName: Amelia;
    --backgroundColor: #FFF;
    --btnColor: #4d5aff;
    --btnTxtColor: #FFFFFF;
    --bubbleMessage: #f00;
    --chatBgColor: null;
    --chatBackgroundImage: null;
    --domainTxtColor: #3a3a3a;
    --font: Roboto;
    --headerColor: #f7f7f7;
    --headerBackgroundImage: null;
    --micColor: #4d5aff;
    --name: Default Amelia Theme;
    --primary: #4d5aff;
    --primaryTextColor: #3a3a3a;
    --primaryTxtColor: peru;
    --secondary: #3a3a3a;
    --secondaryTextColor: #FFF;
    --secondaryTxtColor: slateblue;
    --tooltipColor: #4d5aff;
    --tooltipTxtColor: #FFFFFF;
    --userLogItemBackgroundColor: #3a3a3a;
    --userLogItemFontColor: #FFFFFF;
    --userAvatarBackgroundColor: #DDDDDD;
    --userAvatarFontColor: #FAFAFA;
}
.Messages {
  flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  overflow: auto;
  padding: 0;
  height: 1px; /* This height is needed so Google Chrome scrollbars appear */
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

  .Messages::-webkit-scrollbar {
    width: 0;
  }

.Messages__container {
  padding: 0 16px 8px;
  padding: 0 1rem 0.5rem;
  height: 100%;
  overflow: auto;
}

.chat-bubble {
  height: 32px;
  height: 2rem;
  margin: 32px 0 16px 16px;
  margin: 2rem 0 1rem 1rem;
  background-color: #fff;
  background-color: var(--ameliaLogItemBackgroundColor, #fff);
  max-width: 58.4px;
  max-width: 3.65rem;
  padding: 12px 12px 12px 12px;
  padding: 0.75rem 0.75rem 0.75rem 0.75rem;
  border-radius: 1.25rem 1.25rem 1.25rem 0.2rem;
  position: relative; /* Safari 4.0 - 8.0 */
  -webkit-animation: mymove 600ms ease-out;
          animation: mymove 600ms ease-out;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
}

.chat-bubble .loading {
    z-index: 10;
    width: 67px;
    left: -11px;
    top: 27px;
  }

.chat-bubble .loading .dot {
      height: 8px;
      width: 8px;
      border-radius: 50%;
      background: #c1c1c1;
      display: block;
      float: left;
      margin: 0 0 0 4px;
    }

.chat-bubble .loading .dot:first-child {
        margin: 0;
      }

.chat-bubble .loading .dot.one {
        -webkit-animation: cycleOne 0.85s ease-in-out infinite;
        -webkit-animation-direction: normal;
        animation: cycleOne 0.85s ease-in-out infinite;
      }

.chat-bubble .loading .dot.two {
        -webkit-animation: cycleTwo 0.85s ease-in-out infinite;
        -webkit-animation-direction: normal;
        animation: cycleTwo 0.85s ease-in-out infinite;
      }

.chat-bubble .loading .dot.three {
        -webkit-animation: cycleThree 0.85s ease-in-out infinite;
        -webkit-animation-direction: normal;
        animation: cycleThree 0.85s ease-in-out infinite;
      }

@media (min-width: 769px) {
  .Messages {
    padding: 0;
  }

  .Messages__container {
    padding-right: 1rem; /* that's for IE, so that the vertical scrollbar woudln't cover the messages bubbles */
    padding-bottom: 0.5rem;
  }
}

/* Safari 4.0 - 8.0 */

/* Standard syntax */

@-webkit-keyframes mymove {
  from {
    left: -50px;
  }

  to {
    left: 0;
  }
}

@keyframes mymove {
  from {
    left: -50px;
  }

  to {
    left: 0;
  }
}

@-webkit-keyframes cycleOne {
  0% {
    background: rgba(126, 126, 126, .4);
  }

  33.333% {
    background: rgba(126, 126, 126, 1);
  }

  66.6667% {
    background: rgba(126, 126, 126, .4);
  }

  100% {
    background: rgba(126, 126, 126, .4);
  }
}

@keyframes cycleOne {
  0% {
    background: rgba(126, 126, 126, .4);
  }

  33.333% {
    background: rgba(126, 126, 126, 1);
  }

  66.6667% {
    background: rgba(126, 126, 126, .4);
  }

  100% {
    background: rgba(126, 126, 126, .4);
  }
}

@-webkit-keyframes cycleTwo {
  0% {
    background: rgba(126, 126, 126, .4);
  }

  33.333% {
    background: rgba(126, 126, 126, .4);
  }

  66.6667% {
    background: rgba(126, 126, 126, 1);
  }

  100% {
    background: rgba(126, 126, 126, .4);
  }
}

@keyframes cycleTwo {
  0% {
    background: rgba(126, 126, 126, .4);
  }

  33.333% {
    background: rgba(126, 126, 126, .4);
  }

  66.6667% {
    background: rgba(126, 126, 126, 1);
  }

  100% {
    background: rgba(126, 126, 126, .4);
  }
}

@-webkit-keyframes cycleThree {
  0% {
    background: rgba(126, 126, 126, .4);
  }

  33.333% {
    background: rgba(126, 126, 126, .4);
  }

  66.6667% {
    background: rgba(126, 126, 126, .4);
  }

  100% {
    background: rgba(126, 126, 126, 1);
  }
}

@keyframes cycleThree {
  0% {
    background: rgba(126, 126, 126, .4);
  }

  33.333% {
    background: rgba(126, 126, 126, .4);
  }

  66.6667% {
    background: rgba(126, 126, 126, .4);
  }

  100% {
    background: rgba(126, 126, 126, 1);
  }
}

:root {
  --agentBubbleColor: #dadada;
  --agentBubbleTextColor: #000;
  --ameliaBubbleColor: #fff;
  --ameliaBubbleTextColor: #000;
  --avatarName: Amelia;
  --backgroundColor: #FFF;
  --btnColor: #4d5aff;
  --btnTxtColor: #FFFFFF;
  --bubbleMessage: #f00;
  --chatBgColor: null;
  --chatBackgroundImage: null;
  --domainTxtColor: #3a3a3a;
  --font: Roboto;
  --headerColor: #f7f7f7;
  --headerBackgroundImage: null;
  --micColor: #4d5aff;
  --name: Default Amelia Theme;
  --primary: #4d5aff;
  --primaryTextColor: #3a3a3a;
  --primaryTxtColor: peru;
  --secondary: #3a3a3a;
  --secondaryTextColor: #FFF;
  --secondaryTxtColor: slateblue;
  --tooltipColor: #4d5aff;
  --tooltipTxtColor: #FFFFFF;
  --userLogItemBackgroundColor: #3a3a3a;
  --userLogItemFontColor: #FFFFFF;
  --userAvatarBackgroundColor: #DDDDDD;
  --userAvatarFontColor: #FAFAFA;
}

.Lightbox {
  position: fixed;
  top: 0;
  left: 0;
  background: #3a3a3a;
  color: whitesmoke;
  font-family: "Avenir-Book", sans-serif;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-direction: column;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      flex-direction: column;
  width: 100%;
  z-index: 8;
  opacity: 0;
  height: 0;
  -webkit-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
}

  .Lightbox .Lightbox-content-wrapper {
    width: 100%;
  }

  .Lightbox .Lightbox-content-wrapper.static {
      width: 100%;
    }

  .Lightbox.animated {
    height: 100vh;
    opacity: 1;

  }

  .Lightbox.animated .Lightbox-content-wrapper {
      width: 100%;
    }

.Avatar-lightbox {
    position: fixed;
    background: rgba(58, 58, 58, .5);
    font-family: "Avenir-Book", sans-serif;
    width: 100%;
    z-index: 8;
    height: 100vh;
}

.Avatar-lightbox-content {
  -ms-flex-align: center;
      -webkit-box-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-pack: center;
      -webkit-box-pack: center;
      justify-content: center;
  height: 100%;
}

.Avatar-lightbox-content-wrapper {
  background: white;
  opacity: 1;
  overflow: hidden;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-align: center;
      -webkit-box-align: center;
      align-items: center;
  -ms-flex-pack: center;
      -webkit-box-pack: center;
      justify-content: center;
  width: 352px;
  width: 22rem;
  height: 320px;
  height: 20rem;
  border-radius: 10px;
}

.Avatar-lightbox-content-wrapper .Avatar-delete-modal-content {
    position: relative;
    height: 100%;
    width: 90%;
  }

.Avatar-lightbox-content-wrapper .modal-content-text-info {
    text-align: center;
    margin: 32px auto;
    margin: 2rem auto;
  }

.Avatar-lightbox-content-wrapper .avatar-sample {
    width: 100%;
    height: 48px;
    height: 3rem;
    background-color: #e7e7e7;
    position: relative;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-align: center;
        -webkit-box-align: center;
        align-items: center;
  }

.Avatar-lightbox-content-wrapper .avatar-sample .avatar-wrapper {
      position: absolute;
    }

.Avatar-lightbox-content-wrapper .avatar-sample .display-avatar-in-delete {
      left: 32px;
      left: 2rem;
    }

.Avatar-lightbox-content-wrapper .avatar-sample .avatar-sample-name {
      position: absolute;
      margin-left: 33%;
      top: 0.8em;
    }

.Avatar-lightbox-content-wrapper .cancel-delete-buttons {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
  }

.Avatar-lightbox-content-wrapper .cancel-modal-button {
    /* background-color: #4d5aff; */
    background-color: #3a3a3a;
    background-color: var(--secondary);
  }

.Avatar-lightbox-content-wrapper .delete-item-button {
    /* background-color: #4d5aff; */
    background-color: #4d5aff;
    background-color: var(--primary);
  }

.Avatar-lightbox-content-wrapper .cancel-modal-button, .Avatar-lightbox-content-wrapper .delete-item-button {
    width: 144px;
    width: 9rem;
    border-radius: 0.3rem;
    margin: 32px 4px;
    margin: 2rem 0.25rem;
    font-family: "Avenir-Book", sans-serif;
  }

.Lightbox-header {
  -ms-flex: none;
      -webkit-box-flex: 0;
      flex: none;
  height: 64px;
  height: 4rem;
  width: 100%;
  color: white;
  position: relative;
  padding: 16px;
  padding: 1rem;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-align: center;
      -webkit-box-align: center;
      align-items: center;
  -ms-flex-pack: justify;
      -webkit-box-pack: justify;
      justify-content: space-between;
}

.Lightbox-header .Icon--close {
    width: 19.2px;
    width: 1.2rem;
    height: 19.2px;
    height: 1.2rem;
    cursor: pointer;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAcVJREFUWAnFlzFOxDAQRfG2KygQp0CpaZFAewWEaDnCNhyBZq+BUK4QgURLvdpTIApWW4f/F3tlTBzPjCMx0sh24pn/7NhO4o5gfd9foljA5/A1vHXObVFOZtA4RrIbeAPfwTtovDkvfocLsX2gsUKHz/iitQ6NU8Qu4WdJjqcZLnDkqbHj0gem91TtEXHmWRCA0z5k1RAFcWrOCcBnnjMzhECcmmsCtHA+85ypIYTi1GxnfrWv0JgEQiHORb51YdjKwMHdYclxACCIJUHtAH4BWCFqwP8AaCH8DAwdMmFyWGYPtkEARihGxe7cKTnLijMgC8CbQgh2zdmoOINGAdihAqIoLgIwQojExQBKCLE48/Io/lcrrgHSGdaBeBaKAAbxMKMiiFGACnExRBZAKM5R0qY9iBTifI3TpjuKNeLho9US88OdnIQ1iayxhzVgTRBGwtKSYw9gCYyF47o2F39M+MfyADev5BiAdQXEIwHuEXORJonaogMl6r+vCiHe+S5o0uCobRJnvN8hpa/thgD8URwys3hIJoDYEaALAVFZLR5yFSC6sAuuEHAN53/iBv6MwC+UkxnWxAmS3cLP4Zz1F2i8fgPP/xRBuh89YwAAAABJRU5ErkJggg==);
    background-repeat: no-repeat;
    background-position: right;
    background-size: contain;
  }

.Lightbox-header h6 {
    word-break: break-word;
  }

.Lightbox-content {
  padding: 16px 0;
  padding: 1rem 0;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex: 1 1 auto;
      -webkit-box-flex: 1;
      flex: 1 1 auto;
  -ms-flex-line-pack: center;
      align-content: center;
  -ms-flex-pack: center;
      -webkit-box-pack: center;
      justify-content: center;
  overflow: hidden;
  height: 100%;
}

@media (min-width: 769px) {

.Lightbox-content {
    padding: 3rem
}
  }

.Lightbox-content video {
    width: 100%;
    height: 100%; /* this is required for FF, otherwise it overflow the viewport and we loose the controls */
    margin-bottom: 32px;
    margin-bottom: 2rem;
  }

.Lightbox-content-wrapper {
  overflow: hidden;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-align: center;
      -webkit-box-align: center;
      align-items: center;
  -ms-flex-pack: center;
      -webkit-box-pack: center;
      justify-content: center;
  -ms-flex-direction: column;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      flex-direction: column;
}

.Lightbox-content-wrapper img {
    max-width: 100%;
    display: block;
    max-height: 100%;
    -ms-flex: 0 0 auto;
        -webkit-box-flex: 0;
        flex: 0 0 auto;
  }

.Lightbox-content-wrapper .chatNotesContent {
    width: 60%;
    height: 100%;
  }

.Lightbox-content-wrapper .chatNotesContent.mobileView {
      width: 98%;
    }

.Lightbox-content-wrapper .chatNotesContent.mobileView .yellowButton {
        width: 128px;
        width: 8rem;
      }

.Lightbox-content-wrapper .chatNotesContent .modalHeader {
      text-align: center;
      border-top-right-radius: 8px;
      border-top-right-radius: 0.5rem;
      border-top-left-radius: 8px;
      border-top-left-radius: 0.5rem;
    }

.Lightbox-content-wrapper .chatNotesContent .modalBannerContent {
      background-color: #fff;
      padding: 16px;
      padding: 1rem;
      text-align: center;
      color: #000;
    }

.Lightbox-content-wrapper .chatNotesContent .modalBannerContent img {
        width: 112px;
        width: 7rem;
        display: inline-block;
        margin-bottom: 16px;
        margin-bottom: 1rem;
      }

.Lightbox-content-wrapper .chatNotesContent .modalChatNotesContent {
      height: 30%;
      background-color: #fff;
      overflow-y: auto;
      border-bottom-right-radius: 8px;
      border-bottom-right-radius: 0.5rem;
      border-bottom-left-radius: 8px;
      border-bottom-left-radius: 0.5rem;
    }

.Lightbox-content-wrapper .chatNotesContent .modalHeader a {
      font-size: 14px;
      font-size: 0.875rem;
      line-height: 18.4px;
      line-height: 1.15rem;
      padding: 16px;
      padding: 1rem;
      text-decoration: none;
    }

.Lightbox-content-wrapper .chatNotesContent .yellowButton {
      background-color: #eaac32;
      color: #fff;
      width: 192px;
      width: 12rem;
      border-radius: 0.3rem;
      margin: 32px 4px;
      margin: 2rem 0.25rem;
      display: inline-block;
      cursor: pointer;
      font-family: "Avenir-Book", sans-serif;
    }

.Lightbox-content-wrapper .chatNotesContent .leftPartBlock {
      display: -ms-flexbox;
      display: -webkit-box;
      display: flex;
      -ms-flex-direction: column;
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
          flex-direction: column;
    }

.Lightbox-content-wrapper .chatNotesContent .chatNote {
      margin-bottom: 16px;
      margin-bottom: 1rem;
      width: 100%;
    }

.Lightbox-content-wrapper .chatNotesContent .chatNote h5 {
      margin-bottom: 16px;
      margin-bottom: 1rem;
      padding: 8px 16px;
      padding: 0.5rem 1rem;
      background-color: #fafafa;
      color: #646464;
    }

.Lightbox-content-wrapper .chatNotesContent .chatNoteWrapper {
      padding: 0 32px;
      padding: 0 2rem;
    }

.Lightbox-content-wrapper .chatNotesContent .table-wrapper {
      width: 60%;
      margin: 32px auto 0 auto;
      margin: 2rem auto 0 auto;
    }

.Lightbox-content-wrapper .chatNotesContent .label {
      color: #b9b9b9;
      font-size: 16px;
      font-size: 1rem;
      font-weight: 550;
      margin-top: 32px;
      margin-top: 2rem;
    }

.Lightbox-content-wrapper .chatNotesContent .value {
      color: #000;
      font-size: 14.4px;
      font-size: 0.9rem;
      font-weight: 500;
    }

.Lightbox-content-wrapper .chatNotesContent .regular {
      font-size: 1.5em;
      line-height: 1.75;
    }

.Lightbox-content-wrapper .chatNotesContent .small {
      font-size: 0.625em;
      line-height: 1;
    }

.Lightbox-content-wrapper .chatNotesContent .caption {
      font-size: 0.75em;
      line-height: 1;
    }

.Lightbox-content-wrapper .chatNotesContent .body {
      font-size: 1em;
      line-height: 1.5;
    }

.Lightbox-content-wrapper .chatNotesContent .note {
      font-size: 1em;
      line-height: 1.5;
      color: #acacac;
    }

.Lightbox-content-wrapper .chatNotesContent .title {
      font-size: 1.5em;
      line-height: 1.25;
    }

.Lightbox-content-wrapper .chatNotesContent .subhead {
      font-size: 1.25em;
      line-height: 1.2;
    }

.Lightbox-content-wrapper .chatNotesContent .headline {
      font-size: 2em;
      line-height: 1.5;
    }

.Lightbox-content-wrapper .chatNotesContent .display {
      font-size: 2.5em;
      line-height: 1.2;
      margin: 32px 0 32px 0;
      margin: 2rem 0 2rem 0;
    }

.Lightbox-content-wrapper .chatNotesContent .table {
      display: table;
      margin-top: 32px;
      margin-top: 2rem;
      border: 1px solid #000;
    }

.Lightbox-content-wrapper .chatNotesContent .table-row {
      display: table-row;
    }

.Lightbox-content-wrapper .chatNotesContent .table-cell {
      display: table-cell;
      border-bottom: 1px solid #000;
      border-right: 1px solid #000;
      padding: 10px;
    }

.Lightbox-content-wrapper .chatNotesContent .table-cell.header {
        font-weight: bold;
        background-color: #3a3a3a;
        color: #fff;
      }

.Lightbox-content-wrapper .chatNotesContent .table-cell:first-of-type {
      border-top: none;
    }

.Lightbox-content-wrapper .chatNotesContent .table-cell:last-of-type {
      border-right: none;
    }

.Lightbox-content-wrapper .chatNotesContent .table-row:last-of-type .table-cell {
        border-bottom: none;
      }

@media (min-width: 769px) {
  .Lightbox-content-wrapper .chatNotesContent .modalChatNotesContent {
    height: 50%;
  }
}

@media print {
  * {
    overflow-y: visible !important;
    overflow-x: visible !important;
    position: static !important;
    float: none !important;
    width: 9in;
    border: 0;
    margin: 0 5%;
    padding: 0;
    display: block !important;
    text-align: left;
    background: none !important;
  }

  script {
    display: none !important;
  }

  .Lightbox-header,
  .ViewChat,
  .ChatInput,
  .Header,
  .Menu,
  .ChatNotes,
  .modalHeader,
  .loading-graphic,
  #micme,
  #fileUpload,
  style,
  title,
  span {
    display: none !important;
  }

  p,
  .chat-note {
    page-break-inside: avoid !important;
  }

  .chatNoteWrapper {
    page-break-inside: avoid;
    page-break-after: auto;
  }

  .modalBannerContent,
  .modalChatNotesContent {
    max-width: 100% !important;
  }

  .Lightbox-content-wrapper .chatNotesContent .chatNote h5 {
    background-color: #fafafa !important;
    -webkit-print-color-adjust: exact !important;
  }

  .table {
    display: table !important;
    margin-top: 2rem;
    border: 1px solid #000 !important;
  }

  .table-row {
    display: table-row !important;
    page-break-inside: avoid;
  }

    .table-row.header-group {
      display: table-header-group !important;
    }
    .table-row:last-of-type .table-cell {
      border-bottom: none !important;
    }

  .table-cell {
    display: table-cell !important;
    border-bottom: 1px solid #000 !important;
    border-right: 1px solid #000 !important;
    padding: 10px !important;
    page-break-inside: avoid;
  }

    .table-cell.header {
      font-weight: bold !important;
    }

  .table-cell * {
    display: inline !important;
  }

  .table-cell:first-of-type {
    width: 70% !important;
    border-top: none !important;
  }

  .table-cell:last-of-type {
    border-right: none !important;
  }

  .table {
    display: table !important;
    margin-top: 2rem;
    border: 1px solid #000 !important;
  }

  .table-row {
    display: table-row !important;
    page-break-inside: avoid;
  }

    .table-row.header-group {
      display: table-header-group !important;
    }
    .table-row:last-of-type .table-cell {
      border-bottom: none !important;
    }

  .table-cell {
    display: table-cell !important;
    border-bottom: 1px solid #000 !important;
    border-right: 1px solid #000 !important;
    padding: 10px !important;
    page-break-inside: avoid;
  }

    .table-cell.header {
      font-weight: bold !important;
    }

  .table-cell * {
    display: inline !important;
  }

  .table-cell:first-of-type {
    width: 70% !important;
    border-top: none !important;
  }

  .table-cell:last-of-type {
    border-right: none !important;
  }
}

:root {
  --agentBubbleColor: #dadada;
  --agentBubbleTextColor: #000;
  --ameliaBubbleColor: #fff;
  --ameliaBubbleTextColor: #000;
  --avatarName: Amelia;
  --backgroundColor: #FFF;
  --btnColor: #4d5aff;
  --btnTxtColor: #FFFFFF;
  --bubbleMessage: #f00;
  --chatBgColor: null;
  --chatBackgroundImage: null;
  --domainTxtColor: #3a3a3a;
  --font: Roboto;
  --headerColor: #f7f7f7;
  --headerBackgroundImage: null;
  --micColor: #4d5aff;
  --name: Default Amelia Theme;
  --primary: #4d5aff;
  --primaryTextColor: #3a3a3a;
  --primaryTxtColor: peru;
  --secondary: #3a3a3a;
  --secondaryTextColor: #FFF;
  --secondaryTxtColor: slateblue;
  --tooltipColor: #4d5aff;
  --tooltipTxtColor: #FFFFFF;
  --userLogItemBackgroundColor: #3a3a3a;
  --userLogItemFontColor: #FFFFFF;
  --userAvatarBackgroundColor: #DDDDDD;
  --userAvatarFontColor: #FAFAFA;
}

.present-image {
  max-width: 100%;
  margin-bottom: -4px;
  margin-bottom: -0.25rem;
}

.present-html {
  background-color: #fff;
  color: #000;
  padding: 16px;
  padding: 1rem;
  height: 100%;
  overflow: hidden;
}

.present-no-preview {
  cursor: pointer;
  min-height: 40px;
  min-height: 2.5rem;
  padding-top: 8px;
  padding-top: 0.5rem;
}

.present-no-preview span {
  display: inline-block;
  vertical-align: middle;
  width: 24px;
  width: 1.5rem;
  height: 24px;
  height: 1.5rem;
  margin-right: 8px;
  margin-right: 0.5rem;
  background-repeat: no-repeat;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABgCAYAAACKa/UAAAAAAXNSR0IArs4c6QAABAJJREFUeAHt3UtLG1EUB/DJmICLQhai7VaELlyIX0Ho0rQbu2hWmu/QUgrddlPosksRCoFaN/axLC6kSzcVuigVd2mLoIJBA/HRc8bYzMQ8Jjnnzr3J/Ac0kztz7tz7mzMPB5Ob8dpM5XL57tnZ2ZNMJlO4urq6T6vco59sm1VdLqqPjY0tLS8vfzTZyEy48q2trez+/v4LQntK5XfCy4Z0vk5J8LhUKm2aav9/wPX19Xy1Wt0gvAemNmapXqOZ6HOnOPNGFI+7l7u4uNhYW1t7yG+0pwCwcdiOWuaFrQLE1dXVR+FCjflM44LxiyobhXNeLxP1c6Jfq9WKKcFj3Byd4z9oHs58CC9yzSmaVA9nv3GflyK/oKtBJmqcEzkD+SY5jZMKIgMO218YmjtbjBjcxmi2aAjrEiEC8HqPD4wIwOYhMxAiAJuAPNc3IgCjgH0jAvA2YF+IAGwPGBsRgJ0BYyECsDtgT0QA9gbsigjAeIAdEQEYHzBApF8vwyEADGsMMG/1Sczc3JyXz+cHaHYzZGdnxzs9PW0WJDyHDBSCAxCAQgFhODIQgEIBYTgyEIBCAWE4MhCAQgFhODIQgEIBYTgyEIBCAWE4MhCAQgFhuPrzwGw269FHC2I1y/flBwB9FsTL5XKxtkf/bO5dXl7GWjfuSuqAU1NT3szMTNzti9ebn5+PVcfJyYm3u7sba91+VpKnQMvWKpWKt7e311Jq9+0NHmeg9qQOyA10CdEkHvfVCKAriKbxjALaRkwCzzigLcSk8BIBTBoxSbzEAJNCTBovUUDTiDbwEgc0hWgLzwqgNqJNPGuAWoi28awCShFdwLMOOCiiK3hOAPaL6BKeM4BxEV3DcwqwF6KLeM4BdkJ0Fc9JwFZEl/G4reqP9LlSjYkfytbrde/w8NAz8SRZo41ch7OA3LiDgwN+cXoy9kTa6V4rNg6AQkwAAlAoIAxXv4jMzs4Km2QunK/sx8fHqhtQB5yYmFBtoGZlR0dH6oA4Bwr3EAABKBQQhiMDhYDqF5Ht7W1hk4YrHBko3F8ABKBQQBiODASgUEAYjgwEoFBAGI4MBKBQQBiODASgUEAYjgwEoFBAGM4ZeC6sI23hES8G/JM2AWF/I14+fbb3p7DCVIXT+CsRL87Az6kSEHaWPiT+KVyFPz4+XqaCargQ8+0F6Gj9QSMlfgsv9YvF4l9a8DpciPn2ApR9z8gq8p0BwX3g9PT0Kwr52j4MpQ2BN5R9X1o1AsCFhYVz0l2ihUBsFbp+/5bG5+TxRm9Nka/XGMHBSW91uM+CCiXW85WVlXed4iKANyvxaIeNAfsWG8OmDePwuDfdif1K57ca9fc3vX6noM3Jycn3hUKh63cs/wNrGwpLYhZKTAAAAABJRU5ErkJggg==);
  background-size: contain;
}

.present-no-preview p {
  display: inline-block;
  font-size: 16px;
  font-size: 1rem;
  font-weight: 600;
}

.overlay {
  position: relative;
  height: 100%;
  overflow: hidden;
  width: inherit;
}

.not-supported {
  padding: 16px;
  padding: 1rem;
}

.overlay .react-pdf__Document,
  .overlay canvas {
    width: inherit;
    margin-bottom: -4px;
    margin-bottom: -0.25rem;
    border-top-left-radius: 16px;
    border-top-left-radius: 1rem;
    border-top-right-radius: 16px;
    border-top-right-radius: 1rem;
  }

.overlay .react-pdf__Document {
    width: inherit;
  }

.overlay .react-pdf__Document .react-pdf__Page {
      width: inherit;
    }

.overlay .react-pdf__Document .react-pdf__Page .react-pdf__Page__canvas {
        width: inherit !important;
        height: inherit !important;
      }

.overlay video {
  width: 100%;
  margin-bottom: -4px;
  margin-bottom: -0.25rem;
  border-top-left-radius: 16px;
  border-top-left-radius: 1rem;
  border-top-right-radius: 16px;
  border-top-right-radius: 1rem;
}

.overlay-container {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-direction: column;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      flex-direction: column;
  height: auto;
  width: 100%;
}

.overlay-container .download-preview.with-popup {
      height: 100%;
    }

.overlay-container .no-details .download-preview.with-popup {
        border-radius: 1rem 1rem 1rem 0.25rem;
      }

.overlay-container .present-asset {
    height: 300px;
  }

.overlay-container .present-asset-details {
      padding: 16px 0 16px 16px;
      padding: 1rem 0 1rem 1rem;
    }

.overlay-container .download-preview {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    padding: 16px 8px;
    padding: 1rem 0.5rem;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-direction: row-reverse;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        flex-direction: row-reverse;
    -ms-flex-align: end;
        -webkit-box-align: end;
        align-items: flex-end;
  }

.overlay-container .download-preview.with-popup {
      background-color: rgba(58, 58, 58, .25);
      border-radius: 1rem 1rem 0 0;
    }

.overlay-container .download-preview.with-popup .download {
        background-color: transparent;
      }

.overlay-container .download-preview.with-popup.video-popup {
        background-image: url(data:image/png;base64,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);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 3rem;
      }

.overlay-container .download-preview.with-popup.bottom-position {
        border-radius: 0;
      }

.overlay-container .download-preview button,
    .overlay-container .download-preview a {
      background-color: transparent;
      width: 40px;
      width: 2.5rem;
      height: 40px;
      height: 2.5rem;
      padding: 0;
      vertical-align: baseline;
    }

.overlay-container .download-preview .download {
      background-color: rgba(58, 58, 58, .25);
      border-radius: 0.5rem;
    }

.overlay-container .download-preview.bottom-position {
      position: static;
      border-radius: 0;
    }

.Lightbox-content {
  padding: 0;
}

.lightboxPdfDiv {
  text-align: center;
  width: 100%;
  height: 100%;
  z-index: 100;
}

.lightboxPdfDiv .lightboxContent {
    width: 80%;
    height: 80%;
    margin-left: auto;
    margin-right: auto;
    overflow-y: auto;
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }

.lightboxPdfDiv nav {
    height: 10%;
    padding: 32px 0 0 0;
    padding: 2rem 0 0 0;
  }

.lightboxPdfDiv .react-pdf__Document {
    margin: 0 auto;
    width: 100%;
    height: auto;
  }

.lightboxPdfDiv .react-pdf__Document canvas {
      margin: 0 auto;
    }

.lightboxPdfDiv .react-pdf__Page .react-pdf__Page__canvas {
      height: 100%;
      width: auto;
    }

.lightboxPdfDiv .pager {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-pack: justify;
        -webkit-box-pack: justify;
        justify-content: space-between;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
  }

.lightboxPdfDiv .pager .listControl {
      cursor: pointer;
      background-color: transparent;
    }

.lightboxPdfDiv .pager li {
    list-style: none;
    font-size: 20.8px;
    font-size: 1.3rem;
    color: #fff;
  }

.lightboxPdfDiv .pager li.disabled {
      opacity: 0.2;
      cursor: auto;
      cursor: initial;
    }

.lightboxPdfDiv.mobile {
    height: 100%;
  }

.lightboxPdfDiv.mobile nav {
      padding: 0;
      margin-top: -4.8px;
      margin-top: -0.3rem;
    }

.lightboxPdfDiv.mobile .pager {
      width: 100%;
    }

.lightboxPdfDiv.mobile .lightboxContent {
      width: 90%;
    }

.lightboxPdfDiv.mobile .lightboxContent .react-pdf__Document,
      .lightboxPdfDiv.mobile .lightboxContent canvas {
        width: 95%;
      }

.page-controls {
  position: relative;
  width: 90vw;
  margin: 0 auto;
}

ul.zoomOptions {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-direction: column;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      flex-direction: column;
  -ms-flex-align: end;
      -webkit-box-align: end;
      align-items: flex-end;
  list-style-type: none;
  text-transform: uppercase;
  position: absolute;
  bottom: 0;
  right: 0;
}

ul.zoomOptions li {
    cursor: pointer;
    position: relative;
  }

ul.zoomOptions li:first-child {
      margin-bottom: 10px;
    }

.zoomIn,
.zoomOut {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-pack: center;
      -webkit-box-pack: center;
      justify-content: center;
  -ms-flex-align: center;
      -webkit-box-align: center;
      align-items: center;
  padding: 0;
  font-size: 24px;
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 400;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  background: rgb(242, 242, 242);
  color: rgb(97, 97, 97);
  -webkit-box-shadow: rgba(0, 0, 0, .14) 0px 2px 2px 0px, rgba(0, 0, 0, .12) 0px 1px 5px 0px, rgba(0, 0, 0, .2) 0px 3px 1px -2px;
          box-shadow: rgba(0, 0, 0, .14) 0px 2px 2px 0px, rgba(0, 0, 0, .12) 0px 1px 5px 0px, rgba(0, 0, 0, .2) 0px 3px 1px -2px;
}

.zoomIn:hover, .zoomOut:hover {
    color: rgb(155, 155, 155);
  }

.zoomIn button, .zoomOut button {
    background: transparent;
    color: rgb(97, 97, 97);
    padding: 0;
  }

:root {
  --agentBubbleColor: #dadada;
  --agentBubbleTextColor: #000;
  --ameliaBubbleColor: #fff;
  --ameliaBubbleTextColor: #000;
  --avatarName: Amelia;
  --backgroundColor: #FFF;
  --btnColor: #4d5aff;
  --btnTxtColor: #FFFFFF;
  --bubbleMessage: #f00;
  --chatBgColor: null;
  --chatBackgroundImage: null;
  --domainTxtColor: #3a3a3a;
  --font: Roboto;
  --headerColor: #f7f7f7;
  --headerBackgroundImage: null;
  --micColor: #4d5aff;
  --name: Default Amelia Theme;
  --primary: #4d5aff;
  --primaryTextColor: #3a3a3a;
  --primaryTxtColor: peru;
  --secondary: #3a3a3a;
  --secondaryTextColor: #FFF;
  --secondaryTxtColor: slateblue;
  --tooltipColor: #4d5aff;
  --tooltipTxtColor: #FFFFFF;
  --userLogItemBackgroundColor: #3a3a3a;
  --userLogItemFontColor: #FFFFFF;
  --userAvatarBackgroundColor: #DDDDDD;
  --userAvatarFontColor: #FAFAFA;
}
.message-chat-container {
  width: 50%;
}

.message-chat__emoticon-wrapper {
  position: absolute;
  top: -8px;
  top: -0.5rem;
  left: -16px;
  left: -1rem;
  -webkit-transition: opacity 300ms ease-in-out;
  transition: opacity 300ms ease-in-out;
}

.animated .message-chat__emoticon-wrapper {
    opacity: 0;
  }

.message-chat__emoticon-wrapper.likeEmoticon .Icon--amelia-avatar {
      width: 48px;
      width: 3rem;
      height: 48px;
      height: 3rem;
    }

.message-chat__emoticon-wrapper.user-msg {
    right: -16px;
    right: -1rem;
    left: auto;
  }

.static .message-chat__emoticon-wrapper, .message-chat__emoticon-wrapper.animated {
    opacity: 1;
  }

.message-chat__emoticon-wrapper .Icon--amelia-avatar {
    border-radius: 50%;
    width: 28px;
    width: 1.75rem;
    height: 28px;
    height: 1.75rem;
    overflow: hidden;
    background: #ddd;
    position: relative;
  }

.message-chat__emoticon-wrapper .Icon--amelia-avatar img {
      height: 100%;
      width: auto;
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
      -o-object-fit: cover;
         object-fit: cover;
    }

.message-chat__emoticon-wrapper .Icon--amelia-avatar svg {
      height: 106%;
      width: 100%;
      margin-top: 3.2px;
      margin-top: 0.2rem;
    }

.message-chat__emoticon-wrapper .Icon--amelia-avatar .user-initials {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      display: -ms-flexbox;
      display: -webkit-box;
      display: flex;
      -ms-flex-align: center;
          -webkit-box-align: center;
          align-items: center;
      -ms-flex-pack: center;
          -webkit-box-pack: center;
          justify-content: center;
      text-align: center;
    }

.message-chat__emoticon-wrapper .Icon--animated-amelia-avatar {
    width: 48px;
    width: 3rem;
    height: 48px;
    height: 3rem;
    overflow: hidden;
    background: #ddd;
    border-radius: 2rem;
  }

.message-chat__emoticon-wrapper .Icon--animated-amelia-avatar img {
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
         object-fit: cover;
    }

.message-chat__select-response {
  width: 100%;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-direction: column;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      flex-direction: column;
  position: relative;
  -ms-flex-align: end;
      -webkit-box-align: end;
      align-items: flex-end;
}

.message-chat__select-response .bubble-message {
    margin-bottom: 8px;
    margin-bottom: 0.5rem;
  }

.message-chat__select-response .bubble-message:last-of-type {
      margin-bottom: 0;
    }

.message-chat__select-img img {
    max-width: 208px;
    max-width: 13rem;
    display: block;
    margin: -8px -16px 8px;
    margin: -0.5rem -1rem 0.5rem;
  }

.message-chat__select-img span {
    text-align: center;
    display: block;
  }

.message-chat {
  width: 100%;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-direction: column;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      flex-direction: column;
  position: relative;
  -ms-flex-align: start;
      -webkit-box-align: start;
      align-items: flex-start;
  margin: 16px 0;
  margin: 1rem 0;
  opacity: 0;
  -webkit-transition: opacity 300ms ease-in-out;
  transition: opacity 300ms ease-in-out;
}

.message-chat.transition-done {
    opacity: 1;
  }

.message-chat.avatar-view-msg {
    -ms-flex-align: center;
        -webkit-box-align: center;
        align-items: center;
  }

.message-chat.avatar-view-msg {
    -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
    min-width: 112px;
    min-width: 7rem;
  }

.message-chat .Select-wrapper + .message-chat__details {
      display: none;
    }

.message-chat .message-chat__details {
    font-size: 10.56px;
    font-size: 0.66rem;
    padding: 8px 0 0 0;
    padding: 0.5rem 0 0 0;
    position: relative;
  }

.message-chat .message-chat__details.static {
      padding-left: 16px;
      padding-left: 1rem;
    }

.message-chat .message-chat__details.animated {
      padding-left: 38.4px;
      padding-left: 2.4rem;
    }

.message-chat .message-chat__details.disabled-avatar {
      padding-left: 0;
    }

.message-chat--user {
    -ms-flex-align: end;
        -webkit-box-align: end;
        align-items: flex-end;
    text-align: left;
    padding-right: 12px;
    padding-right: 0.75rem;
    position: relative;
  }

.message-chat--user.last-user-message .message-chat__details {
        padding-left: 0;
      }

.message-chat--user.last-user-message .message-chat__details.static {
          padding-left: unset;
          padding-right: 16px;
          padding-right: 1rem;
        }

.message-chat--user.last-user-message .message-chat__details.animated {
          padding-left: unset;
          padding-right: 38.4px;
          padding-right: 2.4rem;
        }

.message-chat--user.last-user-message .message-chat__details .message-chat__emoticon-wrapper  {
          display: block;
        }

.message-chat--amelia,
  .message-chat--agent {
    padding-left: 16px;
    padding-left: 1rem;
  }

.message-chat--amelia:not(:last-of-type) .message-chat__details, .message-chat--agent:not(:last-of-type) .message-chat__details {
      padding-left: 0;
    }

.message-chat--amelia:not(:last-of-type) .message-chat__details.force-show-emoticon.static, .message-chat--agent:not(:last-of-type) .message-chat__details.force-show-emoticon.static {
          padding-left: 16px;
          padding-left: 1rem;
        }

.message-chat--amelia:not(:last-of-type) .message-chat__details.force-show-emoticon.animated, .message-chat--agent:not(:last-of-type) .message-chat__details.force-show-emoticon.animated {
          padding-left: 38.4px;
          padding-left: 2.4rem;
        }

.message-chat--amelia:not(:last-of-type) .message-chat__details.force-show-emoticon .message-chat__emoticon-wrapper,  .message-chat--agent:not(:last-of-type) .message-chat__details.force-show-emoticon .message-chat__emoticon-wrapper  {
          display: block;
        }

.bubble-message {
  background: #fff;
  border-radius: 1.25rem 1.25rem 1.25rem 0.25rem;
  color: #000;
  max-width: 90%;
  word-wrap: break-word;
  padding: 8px 16px;
  padding: 0.5rem 1rem;
  overflow: hidden;
  font-weight: normal;
  font-size: 14px;
  font-size: 0.875rem;
}

.bubble-message.present-asset {
    padding: 0;
  }

.bubble-message ul,
  .bubble-message ol {
    padding: 16px 16px 16px 32px;
    padding: 1rem 1rem 1rem 2rem;
  }

.user-bubble-message {
  border-radius: 1.25rem 1.25rem 0.2rem 1.25rem;
  max-width: 90%;
  word-wrap: break-word;
  padding: 8px 16px;
  padding: 0.5rem 1rem;
  overflow: hidden;
  font-size: 14px;
  font-size: 0.875rem;
}

.select-options {
  margin-top: 8px;
  margin-top: 0.5rem;
  max-width: 300px;
  line-height: 1.2;
  text-align: right;
}

.select-options pre {
    display: inline;
    white-space: normal;
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 1.5em;
    font-family: inherit;
    color: darkgrey;
  }

.select-options pre:first-child {
      font-weight: bold;
      color: grey;
    }

.hide-select-options {
  display: none;
}

@media (min-width: 769px) {
  .mobile-details {
    padding-left: 1.4rem;
  }
    .message-chat-wrapper .bubble-message {
      max-width: 35rem;
      min-height: 1px; /* needed for IE compatibility */
    }

  .bubble-message.wide {
    max-width: none;
  }

  .bubble-message.present-asset {
    max-width: 50%;
  }
}

:root {
  --agentBubbleColor: #dadada;
  --agentBubbleTextColor: #000;
  --ameliaBubbleColor: #fff;
  --ameliaBubbleTextColor: #000;
  --avatarName: Amelia;
  --backgroundColor: #FFF;
  --btnColor: #4d5aff;
  --btnTxtColor: #FFFFFF;
  --bubbleMessage: #f00;
  --chatBgColor: null;
  --chatBackgroundImage: null;
  --domainTxtColor: #3a3a3a;
  --font: Roboto;
  --headerColor: #f7f7f7;
  --headerBackgroundImage: null;
  --micColor: #4d5aff;
  --name: Default Amelia Theme;
  --primary: #4d5aff;
  --primaryTextColor: #3a3a3a;
  --primaryTxtColor: peru;
  --secondary: #3a3a3a;
  --secondaryTextColor: #FFF;
  --secondaryTxtColor: slateblue;
  --tooltipColor: #4d5aff;
  --tooltipTxtColor: #FFFFFF;
  --userLogItemBackgroundColor: #3a3a3a;
  --userLogItemFontColor: #FFFFFF;
  --userAvatarBackgroundColor: #DDDDDD;
  --userAvatarFontColor: #FAFAFA;
}

.Aside__wrapper {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-direction: row;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      flex-direction: row;
  max-width: 450px;
  width: 100%;
}

.aside-button-group {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-direction: column;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      flex-direction: column;
  padding-left: 8px;
  padding-left: 0.5rem;
  -ms-flex: 1;
      -webkit-box-flex: 1;
      flex: 1;
}

.aside-profile {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-direction: column;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      flex-direction: column;
  background-color: #fff;
  border-radius: 1rem;
  padding: 16px 16px 32px;
  padding: 1rem 1rem 2rem;
  -ms-flex: 2;
      -webkit-box-flex: 2;
      flex: 2;
}

.aside-button-group button {
  border-radius: 0.5rem;
  padding: 16px;
  padding: 1rem;
}

.aside-button-group button:nth-child(2) {
  opacity: 0.5;
  margin-top: 5px;
}

.header-container,
.name-company-host-container,
.photo-and-profile-item-elements-container {
  padding: 10px 0 0 10px;
}

.header-container {
  width: 100%;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-pack: justify;
      -webkit-box-pack: justify;
      justify-content: space-between;
}

.header-image {
  width: 70px;
}

.header-image img {
  max-width: 100%;
}

.name-container {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-direction: column;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      flex-direction: column;
}

.profile-name {
  -ms-flex: 50%;
      -webkit-box-flex: 50%;
      flex: 50%;
}

.photo-and-profile-item-elements-container {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
}

.profile-visitorPhoto {
  margin-right: 15px;
  width: 56px;
  width: 3.5rem;
}

.profile-visitorPhoto img {
  width: 100%;
  border-radius: 0.5rem;
}

.profile-item-elements-container {
  -ms-flex: 70%;
      -webkit-box-flex: 70%;
      flex: 70%;
}

.profile-instructions {
  margin-bottom: 10px;
}

.profile-hostInfo {
  margin-top: 10px;
}

.image-container {
  -ms-flex: 2;
      -webkit-box-flex: 2;
      flex: 2;
}

.image-container img {
  width: 100%;
  border-radius: 0.5rem;
}

:root {
  --agentBubbleColor: #dadada;
  --agentBubbleTextColor: #000;
  --ameliaBubbleColor: #fff;
  --ameliaBubbleTextColor: #000;
  --avatarName: Amelia;
  --backgroundColor: #FFF;
  --btnColor: #4d5aff;
  --btnTxtColor: #FFFFFF;
  --bubbleMessage: #f00;
  --chatBgColor: null;
  --chatBackgroundImage: null;
  --domainTxtColor: #3a3a3a;
  --font: Roboto;
  --headerColor: #f7f7f7;
  --headerBackgroundImage: null;
  --micColor: #4d5aff;
  --name: Default Amelia Theme;
  --primary: #4d5aff;
  --primaryTextColor: #3a3a3a;
  --primaryTxtColor: peru;
  --secondary: #3a3a3a;
  --secondaryTextColor: #FFF;
  --secondaryTxtColor: slateblue;
  --tooltipColor: #4d5aff;
  --tooltipTxtColor: #FFFFFF;
  --userLogItemBackgroundColor: #3a3a3a;
  --userLogItemFontColor: #FFFFFF;
  --userAvatarBackgroundColor: #DDDDDD;
  --userAvatarFontColor: #FAFAFA;
}

:root {
    --agentBubbleColor: #dadada;
    --agentBubbleTextColor: #000;
    --ameliaBubbleColor: #fff;
    --ameliaBubbleTextColor: #000;
    --avatarName: Amelia;
    --backgroundColor: #FFF;
    --btnColor: #4d5aff;
    --btnTxtColor: #FFFFFF;
    --bubbleMessage: #f00;
    --chatBgColor: null;
    --chatBackgroundImage: null;
    --domainTxtColor: #3a3a3a;
    --font: Roboto;
    --headerColor: #f7f7f7;
    --headerBackgroundImage: null;
    --micColor: #4d5aff;
    --name: Default Amelia Theme;
    --primary: #4d5aff;
    --primaryTextColor: #3a3a3a;
    --primaryTxtColor: peru;
    --secondary: #3a3a3a;
    --secondaryTextColor: #FFF;
    --secondaryTxtColor: slateblue;
    --tooltipColor: #4d5aff;
    --tooltipTxtColor: #FFFFFF;
    --userLogItemBackgroundColor: #3a3a3a;
    --userLogItemFontColor: #FFFFFF;
    --userAvatarBackgroundColor: #DDDDDD;
    --userAvatarFontColor: #FAFAFA;
}
.chat-input-drawer {
  padding: 0 0;
  -ms-flex: none;
      -webkit-box-flex: 0;
      flex: none;
}

  .chat-input-drawer.remove-drawer-when-no-branding {
    display: none
  }

.ChatInput__tooltip {
  width: 100%;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  padding: 12px 24px;
  padding: 0.75rem 1.5rem;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.5em;
  border-radius: 0.2rem;
  margin-bottom: -40px;
  margin-bottom: -2.5rem; /* for replacing it with hint without twitching */
  position: relative;
  z-index: 2;
}

.ChatInput__tooltip a {
    padding-right: 8px;
    padding-right: 0.5rem;
    display: block;
    font-size: 12px;
    font-size: 0.75rem;
    line-height: 1.5em;
     max-width: 95%;
  }

.ChatInput__tooltip .tooltipCloseButton {
    width: 11.2px;
    width: 0.7rem;
    height: 11.2px;
    height: 0.7rem;
    margin-left: auto;
    -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
  }

.ChatInput__helper {
  min-height: 32px;
  min-height: 2rem; /* to fit 'powered by amelia' logo */
  position: relative;
}

.ChatInput__helper.powered-by-amelia {
    background-image: url(data:image/png;base64,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);
    background-repeat: no-repeat;
    background-position: right 10px bottom 10px;
    background-size: 5rem;
  }

.ChatInput__hint {
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.5em;
  color: rgba(0, 0, 0, .4);
  width: 100%;
  padding-left: 16px;
  padding-left: 1rem;
  padding-right: 144px;
  padding-right: 9rem;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  height: 40px;
  height: 2.5rem; /* 1-2 lines of text */
  -ms-flex-align: center;
      -webkit-box-align: center;
      align-items: center;
  overflow: hidden;
  opacity: 0;
  position: relative;
  top: 0;
  z-index: 1;
}

.ChatInput__hint.alert-present {
    top: 48px;
    top: 3rem;
  }

.ChatInput__hint.active {
    opacity: 1;
    top: 0;
    -webkit-transition: all 700ms ease-in-out;
    transition: all 700ms ease-in-out;
  }

.tooltipSlide-enter {
  opacity: 0.01;
}

.tooltipSlide-enter-active {
  opacity: 1;
  -webkit-transition: opacity 600ms ease-in;
  transition: opacity 600ms ease-in;
}

.tooltipSlide-exit {
  opacity: 1;
}

.tooltipSlide-exit-active {
  opacity: 0.01;
  -webkit-transition: opacity 600ms ease-in;
  transition: opacity 600ms ease-in;
}

.tooltipSlide-exit-done {
  display: none;
}

@media (min-width: 769px) {
  .ChatInput__tooltip {
    background-position: 97% center;
    border-radius: 0.25rem;
  }
}

:root {
  --agentBubbleColor: #dadada;
  --agentBubbleTextColor: #000;
  --ameliaBubbleColor: #fff;
  --ameliaBubbleTextColor: #000;
  --avatarName: Amelia;
  --backgroundColor: #FFF;
  --btnColor: #4d5aff;
  --btnTxtColor: #FFFFFF;
  --bubbleMessage: #f00;
  --chatBgColor: null;
  --chatBackgroundImage: null;
  --domainTxtColor: #3a3a3a;
  --font: Roboto;
  --headerColor: #f7f7f7;
  --headerBackgroundImage: null;
  --micColor: #4d5aff;
  --name: Default Amelia Theme;
  --primary: #4d5aff;
  --primaryTextColor: #3a3a3a;
  --primaryTxtColor: peru;
  --secondary: #3a3a3a;
  --secondaryTextColor: #FFF;
  --secondaryTxtColor: slateblue;
  --tooltipColor: #4d5aff;
  --tooltipTxtColor: #FFFFFF;
  --userLogItemBackgroundColor: #3a3a3a;
  --userLogItemFontColor: #FFFFFF;
  --userAvatarBackgroundColor: #DDDDDD;
  --userAvatarFontColor: #FAFAFA;
}

.ViewChat .ViewChat-left.header-disabled {
    padding: 0;
  }
  .ViewChat .chat-menu-closer {
    height: 100%;
    position: absolute;
    z-index: 2;
    width: 100%;
  }
  .ViewChat .ViewChat-messages-wrapper {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-direction: column;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
    height: 100%;
    max-height: 100%;
  }


@media (min-width: 769px) {
    .ViewChat .ViewChat-left {
      margin: 0 auto;
      padding: 4.5rem 0 2rem;
    }

      .ViewChat .ViewChat-left.no-animation {
        -webkit-transition: none;
        transition: none;
      }

      .ViewChat .ViewChat-left.hide {
        display: block;
        width: 65%;
        min-width: 30%;
        max-width: 70%;
      }

    .ViewChat .ViewChat-left.header-disabled {
      padding: 0 0 2rem;
    }

  .ViewChat-messages-wrapper {
    padding-bottom: 2rem;
  }

    .ChatNotes-wrapper.no-animation {
      -webkit-transition: none;
      transition: none;
    }

    .ChatNotes-wrapper .ChatNotes--resizer {
      cursor: col-resize;
      width: 5px;
      height: 100%;
      position: absolute;
      background: #ddd;
    }

      .ChatNotes-wrapper .ChatNotes--resizer.hidden {
        display: none;
      }

      .ChatNotes-wrapper .ChatNotes--resizer.hide-cursor {
        cursor: default;
      }
}


:root {
    --agentBubbleColor: #dadada;
    --agentBubbleTextColor: #000;
    --ameliaBubbleColor: #fff;
    --ameliaBubbleTextColor: #000;
    --avatarName: Amelia;
    --backgroundColor: #FFF;
    --btnColor: #4d5aff;
    --btnTxtColor: #FFFFFF;
    --bubbleMessage: #f00;
    --chatBgColor: null;
    --chatBackgroundImage: null;
    --domainTxtColor: #3a3a3a;
    --font: Roboto;
    --headerColor: #f7f7f7;
    --headerBackgroundImage: null;
    --micColor: #4d5aff;
    --name: Default Amelia Theme;
    --primary: #4d5aff;
    --primaryTextColor: #3a3a3a;
    --primaryTxtColor: peru;
    --secondary: #3a3a3a;
    --secondaryTextColor: #FFF;
    --secondaryTxtColor: slateblue;
    --tooltipColor: #4d5aff;
    --tooltipTxtColor: #FFFFFF;
    --userLogItemBackgroundColor: #3a3a3a;
    --userLogItemFontColor: #FFFFFF;
    --userAvatarBackgroundColor: #DDDDDD;
    --userAvatarFontColor: #FAFAFA;
}

.themes-theme-active {
  width: 100%;
  background-color: #42dfb5;
  padding: 32px;
  padding: 2rem;
}

  .themes-theme-active .themes-theme-item {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
  }

  .themes-theme-active .themes-theme-details {
    padding-left: 16px;
    padding-left: 1rem;
  }

  .themes-theme-active .themes-theme-status {
    color: #fff;
    margin-bottom: 16px;
    margin-bottom: 1rem;
  }

  .themes-theme-active .themes-theme-name,
  .themes-theme-active .themes-theme-pubdate {
    color: #828282;
  }

.theme-name {
  margin: 32px;
  margin: 2rem;
}

.themes-list-themes {
  padding: 32px 0;
  padding: 2rem 0;
  background-color: #ebebeb;
}

.themes-list-themes .themes-container {
    overflow-x: auto;
  }

.themes-list-themes .themes-container::-webkit-scrollbar {
    height: 0;
    background: transparent;
  }

.themes-list-themes .themes-wrapper {
    width: 100%;
    height: auto;
    position: relative;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-direction: row;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        flex-direction: row;
  }

.themes-list-themes .themes-theme-status {
    display: none;
  }

.themes-theme-details {
  margin-top: 12.8px;
  margin-top: 0.8rem;
  color: #828282;
  font-size: 13px;
  padding: 0 3.2px;
  padding: 0 0.2rem;
}

.themes-theme-item {
  cursor: pointer;
}

.themes-theme-item.activeTheme .themes-theme-name,
  .themes-theme-item.activeTheme .themes-theme-status {
    color: #000;
    font-weight: bold;
  }

.themes-scroll-arrow {
  width: 40px;
  height: 40px;
  opacity: 0.65;
  cursor: pointer;
  margin-right: 8px;
  margin-right: 0.5rem;
}

.theme-header {
  margin-top: 16px;
  margin-top: 1rem;
}

.arrow-section {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  margin-left: auto;
}

.list-controls {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  margin-right: 8px;
  margin-right: 0.5rem;
  margin-left: 32px;
  margin-left: 2rem;
  margin-bottom: 16px;
  margin-bottom: 1rem;
}

.themes-scroll-arrow img {
  background: #575757;
  height: 100%;
  width: 100%;
  z-index: 1;
}

.themes-scroll-arrow:first-of-type img {
  border-radius: 15% 0 0 15%;
}

.themes-scroll-arrow:last-of-type img {
  border-radius: 0 15% 15% 0;
}

.themes-slider {
  width: 240px;
  width: 15rem;
  border: 1px solid #dadada;
  height: auto;
}

:root {
  --agentBubbleColor: #dadada;
  --agentBubbleTextColor: #000;
  --ameliaBubbleColor: #fff;
  --ameliaBubbleTextColor: #000;
  --avatarName: Amelia;
  --backgroundColor: #FFF;
  --btnColor: #4d5aff;
  --btnTxtColor: #FFFFFF;
  --bubbleMessage: #f00;
  --chatBgColor: null;
  --chatBackgroundImage: null;
  --domainTxtColor: #3a3a3a;
  --font: Roboto;
  --headerColor: #f7f7f7;
  --headerBackgroundImage: null;
  --micColor: #4d5aff;
  --name: Default Amelia Theme;
  --primary: #4d5aff;
  --primaryTextColor: #3a3a3a;
  --primaryTxtColor: peru;
  --secondary: #3a3a3a;
  --secondaryTextColor: #FFF;
  --secondaryTxtColor: slateblue;
  --tooltipColor: #4d5aff;
  --tooltipTxtColor: #FFFFFF;
  --userLogItemBackgroundColor: #3a3a3a;
  --userLogItemFontColor: #FFFFFF;
  --userAvatarBackgroundColor: #DDDDDD;
  --userAvatarFontColor: #FAFAFA;
}

.themes-theme {
  width: 176px;
  width: 11rem;
  background-color: #fff;
  border-radius: 0.5rem;
  padding: 8px 16px 16px;
  padding: 0.5rem 1rem 1rem;
  margin: 0 8px 0 0;
  margin: 0 0.5rem 0 0;
  border-radius: 0.5rem;
}

.themes-theme-logo {
  height: 40px;
  background-position: center;
  background-size: auto 100%;
  background-repeat: no-repeat;
}

.themes-theme-colors {
  width: 100%;
  height: auto;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-direction: row;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      flex-direction: row;
  -ms-flex-pack: center;
      -webkit-box-pack: center;
      justify-content: center;
  margin-top: 6.4px;
  margin-top: 0.4rem;
}

:root {
  --agentBubbleColor: #dadada;
  --agentBubbleTextColor: #000;
  --ameliaBubbleColor: #fff;
  --ameliaBubbleTextColor: #000;
  --avatarName: Amelia;
  --backgroundColor: #FFF;
  --btnColor: #4d5aff;
  --btnTxtColor: #FFFFFF;
  --bubbleMessage: #f00;
  --chatBgColor: null;
  --chatBackgroundImage: null;
  --domainTxtColor: #3a3a3a;
  --font: Roboto;
  --headerColor: #f7f7f7;
  --headerBackgroundImage: null;
  --micColor: #4d5aff;
  --name: Default Amelia Theme;
  --primary: #4d5aff;
  --primaryTextColor: #3a3a3a;
  --primaryTxtColor: peru;
  --secondary: #3a3a3a;
  --secondaryTextColor: #FFF;
  --secondaryTxtColor: slateblue;
  --tooltipColor: #4d5aff;
  --tooltipTxtColor: #FFFFFF;
  --userLogItemBackgroundColor: #3a3a3a;
  --userLogItemFontColor: #FFFFFF;
  --userAvatarBackgroundColor: #DDDDDD;
  --userAvatarFontColor: #FAFAFA;
}
.suggested-fonts {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-direction: column;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      flex-direction: column;
  background-color: #fff;
  position: absolute;
  max-height: 128px;
  max-height: 8rem;
  min-height: 96px;
  min-height: 6rem;
  z-index: 1;
  overflow-y: auto;
  width: 50%;
  padding: 10px;
}

.suggested-fonts span {
  padding: 8px;
  padding: 0.5rem;
  cursor: pointer;
}

.font-highlighted {
  background-color: #dadada;
}

:root {
  --agentBubbleColor: #dadada;
  --agentBubbleTextColor: #000;
  --ameliaBubbleColor: #fff;
  --ameliaBubbleTextColor: #000;
  --avatarName: Amelia;
  --backgroundColor: #FFF;
  --btnColor: #4d5aff;
  --btnTxtColor: #FFFFFF;
  --bubbleMessage: #f00;
  --chatBgColor: null;
  --chatBackgroundImage: null;
  --domainTxtColor: #3a3a3a;
  --font: Roboto;
  --headerColor: #f7f7f7;
  --headerBackgroundImage: null;
  --micColor: #4d5aff;
  --name: Default Amelia Theme;
  --primary: #4d5aff;
  --primaryTextColor: #3a3a3a;
  --primaryTxtColor: peru;
  --secondary: #3a3a3a;
  --secondaryTextColor: #FFF;
  --secondaryTxtColor: slateblue;
  --tooltipColor: #4d5aff;
  --tooltipTxtColor: #FFFFFF;
  --userLogItemBackgroundColor: #3a3a3a;
  --userLogItemFontColor: #FFFFFF;
  --userAvatarBackgroundColor: #DDDDDD;
  --userAvatarFontColor: #FAFAFA;
}

.font-link {
  padding-bottom: 16px;
  padding-bottom: 1rem;
}

  .font-link a {
    text-decoration: none;
    color: #dadada;
    font-size: 14.4px;
    font-size: 0.9rem;
  }

  .font-link img {
    width: 10px;
    height: auto;
    margin-right: 4px;
    margin-right: 0.25rem;
  }

.font-preview p {
    font-size: 24px;
    font-size: 1.5rem;
    word-wrap: break-word;
    padding-bottom: 8px;
    padding-bottom: 0.5rem;
  }

:root {
  --agentBubbleColor: #dadada;
  --agentBubbleTextColor: #000;
  --ameliaBubbleColor: #fff;
  --ameliaBubbleTextColor: #000;
  --avatarName: Amelia;
  --backgroundColor: #FFF;
  --btnColor: #4d5aff;
  --btnTxtColor: #FFFFFF;
  --bubbleMessage: #f00;
  --chatBgColor: null;
  --chatBackgroundImage: null;
  --domainTxtColor: #3a3a3a;
  --font: Roboto;
  --headerColor: #f7f7f7;
  --headerBackgroundImage: null;
  --micColor: #4d5aff;
  --name: Default Amelia Theme;
  --primary: #4d5aff;
  --primaryTextColor: #3a3a3a;
  --primaryTxtColor: peru;
  --secondary: #3a3a3a;
  --secondaryTextColor: #FFF;
  --secondaryTxtColor: slateblue;
  --tooltipColor: #4d5aff;
  --tooltipTxtColor: #FFFFFF;
  --userLogItemBackgroundColor: #3a3a3a;
  --userLogItemFontColor: #FFFFFF;
  --userAvatarBackgroundColor: #DDDDDD;
  --userAvatarFontColor: #FAFAFA;
}

.configurator {
  height: calc(100% - 80px);
  overflow-y: auto;
}

  .configurator > * {
  	padding: 32px;
  	padding: 2rem;
  	border-top: 1px solid #eee;
  	border-bottom: 1px solid #eee;
  }

  .configurator > .themes-wrapper {
    padding: 0;
  }

  .configurator h3 {
  	font-weight: bold;
  	font-size: 14.4px;
  	font-size: 0.9rem;
  	margin-bottom: 11.2px;
  	margin-bottom: 0.7rem;
  }

  .configurator h4 {
  	font-weight: bold;
  	font-size: 14.4px;
  	font-size: 0.9rem;
  	color: #888;
  	margin-bottom: 11.2px;
  	margin-bottom: 0.7rem;
  }

  .configurator h5 {
  	font-size: 12.8px;
  	font-size: 0.8rem;
  	color: #999;
  	font-weight: normal;
  	margin-bottom: 4.8px;
  	margin-bottom: 0.3rem;
  }

  .configurator .note {
  	font-size: 12.8px;
  	font-size: 0.8rem;
  	color: #999;
  }

  .configurator ul.note {
  	line-height: 1.3;
  	margin-bottom: 8px;
  	margin-bottom: 0.5rem;
  }

  .configurator ul.note li {
  		padding: 0 0 0 10px;
	    margin: 0;
	    list-style: none;
	    position: relative;
  	}

  .configurator ul.note li:before {
  			content: ".";
		    display: block;
		    position: absolute;
		    top: -7px;
		    left: 0;
		    font-size: 20px;
		    line-height: 1;
  		}

  .configurator .edit-section {
  	position: relative;
  	padding-right: 64px;
  	padding-right: 4rem;
  	min-height: 32px;
  	min-height: 2rem;
  }

  .configurator .edit-section .edit-section--input {
      border: 1px solid #ccc;
      padding: 10px;
      width: 100%;
    }

  .configurator .edit-section .edit-section--text {
      line-height: 32px;
      line-height: 2rem;
    }

  .configurator .edit-section .edit-section--btn {
  		display: block;
  		position: absolute;
  		top: 0;
  		right: 0;
  		width: 32px;
  		width: 2rem;
  		height: 32px;
  		height: 2rem;
  		background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABGdBTUEAALGPC/xhBQAABWVJREFUaAXVWk1LY1cYTm4madOJwRmLiPUjmjp2qM5QbKVaF1nowsIUZmEnwkA7CKIbf4C4EMGFW10I0s3ALAaE0tKC0oqIKC4shaIVS41YTUNk4uhoqoyffZ7bHOd6k5h7k5uPHric+3He932e97zn+5pNBqTOzk7r0tKS22KxuM7Pz9+Fytu47Gaz2Ub1FxcXx8iOcL2UJCl0dna2UVtb6xsbGzvh91SSOVnhhoYGO2Q/AMhq5G5cVp26CN4Hcn8gX11YWCBB3Uk3gba2NlswGGyApz+DcdnDuq2qBOCEY9TMfFFR0cL4+DhrS3OyaC3Z398vnZyc1B0cHDwCeHpds6wGGxY4oyIcDn9UVlZ23NHREZyZmbnQIGfSVAOtra1OAPcCeLEWpamWQW0E8vLynk9MTOwn0pWQgMfjKYHnvfCQI5EyI78jrMJWq/U5asJ/nd5rw6Cpqek+vP4I4N++Tkmavtlg9x5C6tXm5uZ2PBtxCUTAP4QSKZ5wut/TNq675eXlu/FIxATHsAG4B+kGqEP/gwimKJEoAmywjHmEzo2o0ll6QSzERGxqCFcIsKtkb4Nqy2iDVYOK9UxMxEaMyu9X2gD7eRSsUxbIpXtgy1tfXz/Y2toKCFyXbDjC4qVHfMjh3BPBKkO8rIGCgoImxBpH2LSnysrKm729vR7YlJaXl1/qNGg7PDw8Ra/0F+VkApGJ2ZfiWadCXcXdbrdjZGTk66qqqur6+vpau93+anFxMahLicn0XklJyS9+v/9UJlBaWloLBR/qVKK7eHFxsX10dPRJfn4+p9wmjLbmmpqa6iRIEPcOCATlNgA9GQkdzGKPYPRvJXOSaG9v/8Lr9b6vfJ/oXmCWuBhBYXcigVS+M2yweHmImH+ru7v7O8T9b0p9JFFXV1ehfKfh3k3sFpvNdgfy9zUIJFWE4IeHh7/CnKYCo6lrenp6BXP+3xH/twoLC4uodG9vLzQwMPDD7u6unhWaZXt7O2BxuVwfo3/l1MHwJMCLmHc4HE41CTjwRk9Pz1P07//oBYAlbNjc2Nj4GIK64k+LITV4pQzagr+rq+vZzs7Oa6zC7IFAIKnlJHSusRFzAW5oug48DQF0yeDg4OcYd0wpgKeq2yTAxblhKRF4GmLMDw0N/WyAUbuEBmzIwpxgtIJnzPt8vnCqBIhdHgdSVZQN8AIzVzy6tjGEoDLPtOeFbWJnDSTbA8h6sgU+QuKIBPTOBiOymY/5S8NvbrhVKYXePGu/y7LnZaDELnGjVTvs/0piZH2H0wMxwsaSZ1dpVG8TSz/fEbvEXWLc65mDmLB++DTb4ImZ2KXIFjdJaE6Yg8TtfjPh+QhQeXteBoLuiFvcKacMgueZg4xZeHIVo1pK40EmwUewrtLj8pKSa0tMqzmoaVpUYGFyE/P781Ao9IIX5uXBvr6+b42YHmgJA4Tw7Pz8/BrLXu6+8XABM8NPQCLhphZOU5Z4aTFmdBl4P0ysQq9cA3xYWVk54+ECbu+Ij7mYg8BPk5OTWwKbaAPyc0tLy688XBAfcy0nNmJU4oo64OAG6v7+fqeWUFIqSvc9Q8fpdI6pT20uQ0gAWFtbe41pwiYI3MN1pYZEmUzn8PwpTmueTU1NvVDbjiLAAhsbG/s8GQGBu2qBbDzD+9/Pzs7+Gct2TAIsyBMRnoxAuCpbNUHPE/zc3NyVfSQlkbgEBAlsxK5j8c2eybClpxJAvHvGPMMmnueF3LUEWIjhhP3LZZwdlKMm8oRgOnP2NmiwT2PFvNqupkbKlt/c3PwNvPIjPaNWYtQzddMGbal7m3g2orrReAXF+1z71UA3AUHkf/uzhyCgzLP5u82/rdK7LMJmbkcAAAAASUVORK5CYII=);
  		background-repeat: no-repeat;
  		background-size: contain;
  		overflow: hidden;
  		cursor: pointer;
      text-indent: -9999px;
  	}

  .configurator .edit-section .edit-section--btn:hover {
				opacity: 0.8;
			}

  .configurator .edit-section .edit-section--btn.disabled {
				cursor: default;
				opacity: 0.2;
  		}

  .configurator .edit-section .edit-section--btn.save {
        background-image: url(data:image/png;base64,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);
  		}

.avatar-name {
  margin-top: 32px;
  margin-top: 2rem;
}

.color-swatch {
  border-radius: 0.5rem;
  width: 40px;
  width: 2.5rem;
  height: 40px;
  height: 2.5rem;
  background: #000;
  border: 1px solid transparent;
}

.color-swatch.white {
		background: #fff;
    border: 1px solid #dadada;
	}

.color-swatch.primary {
		height: 32px;
		height: 2rem;
		width: 72px;
	}

.color-swatch.secondary {
		margin-left: 4px;
		margin-left: 0.25rem;
		height: 32px;
		height: 2rem;
		width: 32px;
		width: 2rem;
	}

.configurator-wrapper {
  padding-bottom: 65px;
}

.save-publish-wrapper {
	width: 100%;
}

.preview img {
    max-width: 100%;
  }

label.checklabel {
  position: relative;
  cursor: pointer;
  font-size: 14px;
  font-size: 0.875rem;
  padding-left: 40px;
  padding-left: 2.5rem;
  display: block;
  min-height: 25px;
  line-height: 25px;
}

label.checklabel > input {
    position: absolute;
    visibility: hidden;
    top: 0;
    left: 0;
    z-index: 10;
  }

label.checklabel > input[type="radio"] ~ div {
      border-radius: 100%;
    }

label.checklabel > input[type="radio"] ~ div::before {
        border-radius: 100%;
        transition: background 0.25s linear;
        -webkit-transition: background 0.25s linear;
      }

label.checklabel > div {
    display: block;
    position: absolute;
    border-radius: 4px;
    height: 25px;
    width: 25px;
    top: 0;
    left: 0;
    z-index: 5;
    transition: border 0.25s linear;
    -webkit-transition: border 0.25s linear;
  }

label.checklabel > div::before {
      display: block;
      position: absolute;
      content: '';
      height: 17px;
      width: 17px;
      top: 2px;
      left: 2px;
      margin: auto;
    }

label.checklabel p {
    color: grey;
    font-size: 12px;
    font-size: 0.75rem;
    margin-top: 8px;
    margin-top: 0.5rem;
    line-height: 1.5;
  }

:root {
  --agentBubbleColor: #dadada;
  --agentBubbleTextColor: #000;
  --ameliaBubbleColor: #fff;
  --ameliaBubbleTextColor: #000;
  --avatarName: Amelia;
  --backgroundColor: #FFF;
  --btnColor: #4d5aff;
  --btnTxtColor: #FFFFFF;
  --bubbleMessage: #f00;
  --chatBgColor: null;
  --chatBackgroundImage: null;
  --domainTxtColor: #3a3a3a;
  --font: Roboto;
  --headerColor: #f7f7f7;
  --headerBackgroundImage: null;
  --micColor: #4d5aff;
  --name: Default Amelia Theme;
  --primary: #4d5aff;
  --primaryTextColor: #3a3a3a;
  --primaryTxtColor: peru;
  --secondary: #3a3a3a;
  --secondaryTextColor: #FFF;
  --secondaryTxtColor: slateblue;
  --tooltipColor: #4d5aff;
  --tooltipTxtColor: #FFFFFF;
  --userLogItemBackgroundColor: #3a3a3a;
  --userLogItemFontColor: #FFFFFF;
  --userAvatarBackgroundColor: #DDDDDD;
  --userAvatarFontColor: #FAFAFA;
}

.image-uploader-wrapper {
  margin-top: 16px;
  margin-top: 1rem;
}
  .image-uploader-wrapper .upload-header {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-pack: justify;
        -webkit-box-pack: justify;
        justify-content: space-between;
  }
  .image-uploader-wrapper .upload-area {
    margin-top: 16px;
    margin-top: 1rem;
  }
  .image-uploader-wrapper .drop-zone {
    -ms-flex-align: center;
        -webkit-box-align: center;
        align-items: center;
    background-image: url(data:image/png;base64,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);
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-pack: center;
        -webkit-box-pack: center;
        justify-content: center;
    height: 80px;
    height: 5rem;
  }
  .image-uploader-wrapper .drop-zone.drop-zone-activated {
      border: 1px dashed #000;
    }
  .image-uploader-wrapper .drop-zone.drop-zone-hovering {
      background: blue;
      opacity: 0.5;
    }
  .image-uploader-wrapper .drop-zone.file-rejected {
      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAArgAAACoCAYAAAF8jq0LAAAABGdBTUEAALGPC/xhBQAAFd9JREFUeAHt3TFyGzfbAOCsImts//Z4xjM5QiqV6SwValwmZ3DlHCPOMeJjuE3DQkqXUpWP4BnPeOQv8Uhfwp8QudKKXGC5FGAKnx4X5hIAQfDBu6/AJZfbfDP7d3Bw8DTcvnz58j9v3rz5N2wfHR09ubi4aJbL27bL5drP3bo+O907Acy/fAI7+brS07JAM0sDV8B//PHHo/Pz88tU8N133/29v78/DQ/ols92/7/aTrrl2s/duj6XkC1WLG92y09OTs60j/996vpcRW0L5jafwG6Iyra75V17VreSIh48eKD9DCykxCGf3Xa5FYBDju0sxZq2rls+W11cpZJueXgi7S+XtVc+0kK72xa4tVoouDq6CuEwcbNdu/ddWbe8+9ewWx57d3ef20sLBdJB2+Vu9+3vLBKvji2EVUH7x6tbrv38GMI6PiK3DbMCt3ALoLZdWi1YLaz3Xv6urV6khXYfLnDr2ELnsOos8rMeS3Fs4fpjrezHRqSFAumg7bKZTqfN4eHh5WHE7lvV7psF5XOuMQ6h7U4L22q7zSMQglNayGPZ28tuOJrV1nQ/ZQjHE5RfHinc2OHGIUd5dh5OuRykhXb3LHB7402EVDAXzuXQ5NoF9LOaUqSFAumg7dJqYSGRKxV0+7FaWOCOefcVHrJOe2lhgVvixh+0hWqJP8git0TILvqEWxDXamGB2/0rn+sYi9XCAnedv/5j87K0UDItzHaHqy8zl9g1cu1iNfZjKbaI3LG7/DrtpYWCaeHGB5Td5+l+37ZbHtJI+/X8bnmsfXeG12mv/7lSzJPP3MeHv929yXY1Av6cVTNVBtoV2O2+5+tWhBX77M/8jffGoX72p+rqpIl12ut/rhTz5LOZj4zb3ftsVyMgcKuZKgPtCtw4d7JbMXZJEGsfO6oQax/7kxprr//5rN03Hxm3u7farkZA4FYzVQbaFXBUYaERW6J41z8Hums+Mm53N7ZdjYDArWaqDLQr4KjCQuO+vSuPvd7YkiDWfltHdWTc7m5suxoBgVvNVBloV8BRhYVG7E+kowpzoLvmI+N2d2Pb1QgI3GqmykC7Ao4qLDTu2rvm2Hhif7Jj7bf1rj82nlzjl3G7u7HtagR2Ym8+qnkFBnovBS7PcPjxxx8ff/z48duuQCygY396tJ/r8Zk7lIqH2XW1vrx9+/bico07C9puzNomcGcFTk9PH86Sw0Nr3Ds7RQaWEhC4KR11d1ZA4N7ZqTGwlIDATemou7MCN36wsTvKcKC4e7/dDgeW2+3urfZzDT5zh9LxsPKDH20wOqwzlyh1WKd11v9cYmy8WSq0EeS2KgGBW9V0GWwrIHBbCbdVCQjcqqbLYFuBG9eSawvDrXfHc43S7471P3ceG283fkt/3sX8f+925w5j3+1q/3Xix1Khu7farkZA4FYzVQbaFRC4XQ3b1QgI3GqmykC7Ar6rsNDw7n4OMfbd/bba+67CInAdDZhD1HI0yVJhEbhu6hIQuHXNl9EuBASuUKhSQOBWOW0G7SPfRQzU8qbEm8j5hMm4kleVAgK3ymkzaIErBqoUELhVTptBC1wxUKWA7yosps13FeYQ2/ruwVh/31VYBK7DTHOIWg4LWiosAtdNXQICt675MtqFgMAVClUKCNwqp82g/a7CIgZqeTc99t33/2p7X7JZBG4t76Yd/ZhPmKWCv7pVCgjcKqfNoAWuGKhSQOBWOW33e9DhIn2XH/m+evXq4fv37x+sw/Hy5cv/vHnz5t912oY2s3frTy4uLqIfLS/3M7b/2JuV5X7b+2P7N/5Wrv+Wf79LWyp+Won+2/sUP8fHx593w2V8Z8n2xmV8+2mUEiBAgMCmAoeHh092lq+ZvmlnHkeAAAECaQHHwtI+agkQIJBNQMLNRqkjAgQIpAUk3LSPWgIECGQT2I19dTr2DOG79LNPFtf+1sHsU9pR32oY27/xx2ZqXs4/7SN+0j7iJ+0zNn6scNOeagkQIJBNQMLNRqkjAgQIpAUk3LSPWgIECGQTkHCzUeqIAAECaQEJN+2jlgABAtkEdseey1z6U8ux/Rt/OhbGfuuDf9pzrA//tOd923+tcNPxoJYAAQLZBCTcbJQ6IkCAQFpAwk37qCVAgEA2AQk3G6WOCBAgkBaQcNM+agkQIJBNwG8pDFCW/lR67LnYpT/1Htu/8acDSPykfe5b/FjhpuNBLQECBLIJSLjZKHVEgACBtICEm/ZRS4AAgWwCEm42Sh0RIEAgLSDhpn3UEiBAIJuA31IYoBz7qf3YT6Xv27nkY334pwNU/KR97lr8WOGm50stAQIEsglIuNkodUSAAIG0gISb9lFLgACBbAISbjZKHREgQCAtIOGmfdQSIEAgm4DfUhigLP2p+n07l7z0p8Zj++ef3gHEf9pnbPxY4aY91RIgQCCbgISbjVJHBAgQSAtIuGkftQQIEMgmIOFmo9QRAQIE0gISbtpHLQECBLIJ+C2FAcqxn3qP/VTXufDpCeCf9hE/aZ+7Fj9WuOn5UkuAAIFsAhJuNkodESBAIC0g4aZ91BIgQCCbwM7+/v6XbL3piAABAgSiAjtv3769OD4+/hxtoYIAAQIEbiUQFrbhNOCm7eX169cPTk9PH7b3+25nn/hNJ5PJ2sn5zZs3O7///vv/9fXVVza2/9DHmE9px/Zv/H2zdLOM/02P7j3x09Xo3/5fj5/nz5//8+7du7+bppkGgZ3pdNqEFz2UbPu5lBIgQIBATODjx4/fHh4ePnn16tXlYnYn3Ik1Vk6AAAECtxd4//79g7C49S2F21vqgQABAoMCP/300yMJd5BJAwIECNxe4OzsbEfCvb2jHggQILCWgIS7FpNGBAgQuL2AhHt7Qz0QIEBgLQEJdy0mjQgQIHB7AQn39oZ6IECAwFoCEu5aTBoRIEDg9gIS7u0N9UCAAIG1BJpwvvdaLWeNZqf/Nh8+fHi0bvu9vb3pixcv/l63/dj+Q7+zKyz8Vap/4x+W5R83Ej9xm7bmvsXP1Y/XtACp29I/xjG2/zDW8As8qTF368b2X/rHboy/Ozur2/xXTZZLxP+yyPX9uxg/a69ur1+GLQIECBDYREDC3UTNYwgQILCBgIS7AZqHECBAYBMBCXcTNY8hQIDABgIS7gZoHkKAAIFNBCTcTdQ8hgABAhsISLgboHkIAQIENhGQcDdR8xgCBAhsICDhboDmIQQIENhEQMLdRM1jCBAgsIFAMzuXee2r9pY+N3xs/+H1TiaTx+u+7rH9j/1th7H9G3965vinfcRP2ucuxk9zcHDwND3s69rS5yaP7T+MzPiv52d5q/RvR/BfFr95n/9Nj757923/dUihLwqUESBAoICAhFsAVZcECBDoE5Bw+1SUESBAoICAhFsAVZcECBDoE5Bw+1SUESBAoICAhFsAVZcECBDoE5Bw+1SUESBAoICAhFsAVZcECBDoE5Bw+1SUESBAoICAhFsAVZcECBDoE2jC6Yd9FX1lpc9NHtt/GON9u679hw8fHvXNTV/Z2N924N+neF021of/tV1s677tv00Moq+89LnhY/sPYzw5OTnrG2tf2dj+x/62w9j+jb9vlq7L+F9bxLbEf0zmm2/uYvysvbqNvyw1BAgQILCOgIS7jpI2BAgQyCAg4WZA1AUBAgTWEZBw11HShgABAhkEJNwMiLogQIDAOgIS7jpK2hAgQCCDgISbAVEXBAgQWEdAwl1HSRsCBAhkEJBwMyDqggABAusISLjrKGlDgACBDAIuk55AHHuq7thTCcNT37fLRE8mk88J8htV/G9w9N4RP70sl4V3MX6scOPzpYYAAQJZBSTcrJw6I0CAQFxAwo3bqCFAgEBWAQk3K6fOCBAgEBeQcOM2aggQIJBVQMLNyqkzAgQIxAUk3LiNGgIECGQVkHCzcuqMAAECcQEJN26jhgABAlkFJNysnDojQIBAXEDCjduoIUCAQFaBJpxvvG6Pp6enzYcPHx6t235vb2/64sWLv9dtP7b/0O99u649/3g0iZ+4TagZ62P/TXuG2rH5pxnu8rpF6R+DGNt/GNnJycnZ9QjTW2P7H/tjNGP7N/70fPFP+4iftM9djJ+1V7fpl6aWAAECBIYEJNwhIfUECBDIJCDhZoLUDQECBIYEJNwhIfUECBDIJCDhZoLUDQECBIYEJNwhIfUECBDIJCDhZoLUDQECBIYEJNwhIfUECBDIJCDhZoLUDQECBIYEJNwhIfUECBDIJNDMzgV+sm5fpc+tHtt/GPdkMnls/P0Cpc+d59/v3pbybyXit/dt/20ODg6exjlu1pQ+N3ls/2F0xn9zjrr3xv62A/+u3ur2WB/+q4bLJfdt/3VIYTkC3CdAgEAhAQm3EKxuCRAgsCwg4S6LuE+AAIFCAhJuIVjdEiBAYFlAwl0WcZ8AAQKFBCTcQrC6JUCAwLKAhLss4j4BAgQKCUi4hWB1S4AAga7A7CSzLzv7+/tfuoW2CRAgQCC/wOxEmP/uvH379kLSzY+rRwIECLQCx8fHn8P21WXSp9Np8/PPP+/Ozv9+2Da67W04FTJct32W2f+9bV99jw+nToZzsS8uLq5eR1+7TctKjz+Ma8ypjWNfR+nx80/PCP+0T6gV/3Gj0vHDP24favinfeT/tE/p+OG/6h8OHvz222//bZpmGmovPzN7/fr1g8PDwyc5F7erT62EAAECBAgQIECAQH6BsIYNa9mwpg2974YNC9v80HokQIAAAQIECBD4ugJhTTs7wj3dsbj9uvCejQABAgQIECBAoJzA7OurD53WW85XzwQIECBAgAABAlsQsMDdArqnJECAAAECBAgQKCdggVvOVs8ECBAgQIAAAQJbELDA3QK6pyRAgAABAgQIECgnYIFbzlbPBAgQIECAAAECWxCwwN0CuqckQIAAAQIECBAoJ2CBW85WzwQIECBAgAABAlsQaGaX0n1S6nn39vamz549+zK7fNrlZdNyP8/sN3ybT58+PTw/Py9yqd7S4w8e4VLDuV3a/kqPn38r3X/Lv9+lWyr+uxo3t0vHT3g2/jfNu/f4dzVWt+X/VZNuSen44d/VXt0O/kUWhu1T1X6t5NLjD04nJydnrVfu29Ljr/1a2/zTEVc6fvjzTwuka+WftE/p/Zc//7TAcG3p9Y+vKAzPgRYECBAgQIAAAQIVCVjgVjRZhkqAAAECBAgQIDAsYIE7bKQFAQIECBAgQIBARQIWuBVNlqESIECAAAECBAgMC1jgDhtpQYAAAQIECBAgUJGABW5Fk2WoBAgQIECAAAECwwIWuMNGWhAgQIAAAQIECFQkYIFb0WQZKgECBAgQIECAwLCABe6wkRYECBAgQIAAAQIVCVjgVjRZhkqAAAECBAgQIDAs0ITL+Q0326xF7ddKLj3+oHp0dPTXZrrDjyo9/tqvtc0/HUOl44c//7RAulb+SfuU3n/5808LDNeWXv80BwcHT4eHsVmL2q9VXXr8QZV/PLb4x21CTe3Xmg+vQfwHhf5/4r/fpS0V/61E/23p+OHf796W8m8l4rel83+xo7fxl6SGAAECBAgQIECAQDkBC9xytnomQIAAAQIECBDYgoAF7hbQPSUBAgQIECBAgEA5AQvccrZ6JkCAAAECBAgQ2IKABe4W0D0lAQIECBAgQIBAOQEL3HK2eiZAgAABAgQIENiCgAXuFtA9JQECBAgQIECAQDkBC9xytnomQIAAAQIECBDYgoAF7hbQPSUBAgQIECBAgEA5AQvccrZ6JkCAAAECBAgQ2IJAM7sW8JNSz1v7tapLjz+4TyaTx/z7Bfj3u7SltV9rPrwO8d/O5uqt+F816ZaI/67G6nbp+OG/at4t4d/V6N8unf+b/qfNU1r7tapLjz8on5ycnOXRXu2l9Phrv9Y2/9WY6ZaUjh/+Xe3Vbf6rJt0S+aersbpdOn74r5p3S/h3Nfq3S69/fEWh310pAQIECBAgQIBApQIWuJVOnGETIECAAAECBAj0C1jg9rsoJUCAAAECBAgQqFTAArfSiTNsAgQIECBAgACBfgEL3H4XpQQIECBAgAABApUKWOBWOnGGTYAAAQIECBAg0C9ggdvvopQAAQIECBAgQKBSAQvcSifOsAkQIECAAAECBPoFLHD7XZQSIECAAAECBAhUKmCBW+nEGTYBAgQIECBAgEC/gAVuv4tSAgQIECBAgACBSgWag4ODp6XGXvu1qkuPP7jzj0cf/7hNqKn9WufhNYj/oND/T/z3u7Sl4r+V6L8tHT/8+93bUv6tRPy2dP53BDdur4YAAQIECBAgQKBCAQvcCifNkAkQIECAAAECBOICFrhxGzUECBAgQIAAAQIVCljgVjhphkyAAAECBAgQIBAXsMCN26ghQIAAAQIECBCoUMACt8JJM2QCBAgQIECAAIG4gAVu3EYNAQIECBAgQIBAhQIWuBVOmiETIECAAAECBAjEBSxw4zZqCBAgQIAAAQIEKhSwwK1w0gyZAAECBAgQIEAgLtAcHR09iVffrmZvb2/67NmzL/v7+9Pb9dT/6NPT0+bTp08Pz8/Pm/4WtystPf4wuslk8vh2o4w/uvT4+cftQw3/tE+oFf9xo9Lxwz9uH2r4p33k/7RP6fjhP+xfZGHYPm3t16ouPf7gdHJyctZ65b4tPf7ar7XNPx1xpeOHP/+0QLpW/kn7lN5/+fNPCwzXll7/+IrC8BxoQYAAAQIECBAgUJGABW5Fk2WoBAgQIECAAAECwwIWuMNGWhAgQIAAAQIECFQkYIFb0WQZKgECBAgQIECAwLCABe6wkRYECBAgQIAAAQIVCVjgVjRZhkqAAAECBAgQIDAsYIE7bKQFAQIECBAgQIBARQIWuBVNlqESIECAAAECBAgMC1jgDhtpQYAAAQIECBAgUJGABW5Fk2WoBAgQIECAAAECwwJNuJzfcLPNWtR+reTS4w+qR0dHf22mO/yo0uOv/Vrb/NMxVDp++PNPC6Rr5Z+0T+n9lz//tMBwben1T3NwcPB0eBibtaj9WtWlxx9U+cdji3/cJtTUfq358BrEf1Do/yf++13aUvHfSvTflo4f/v3ubSn/ViJ+Wzr/Fzt6G39JaggQIECAAAECBAiUE7DALWerZwIECBAgQIAAgS0IWOBuAd1TEiBAgAABAgQIlBOwwC1nq2cCBAgQIECAAIEtCFjgbgHdUxIgQIAAAQIECJQTsMAtZ6tnAgQIECBAgACBLQhY4G4B3VMSIECAAAECBAiUE9h5/vz5P+W61zMBAgQIECBAgACBryfw9OnTf3fevXv399d7Ss9EgAABAgQIECBAoJxAWNvuNE0zPT4+/vz9999flHsqPRMgQIAAAQIECBAoJxDWsmFNG9a2zfLTTKfT5tdff/32zz//3Ds7O7vVd3Rrv1Z16fEH+8lk8nh5DnLdLz3+2q91zj8daaXjhz//tEC6Vv5J+5Tef/nzTwsM1+ZY/4SvIvzwww/nv/zyyz9hUdt91v8HParCj8tlRI4AAAAASUVORK5CYII=);
      border: 2px solid red;
    }
  .image-uploader-wrapper .drop-zone img {
      max-height: 80%;
      max-width: 50%;
    }
  .image-uploader-wrapper .header-alignment-wrapper h5 {
      margin: 32px 0 24px 0;
      margin: 2rem 0 1.5rem 0;
      width: 100%;
    }
  .image-uploader-wrapper .header-alignment-wrapper div {
      background: lightgrey;
      border-radius: 0.5rem;
      display: -ms-flexbox;
      display: -webkit-box;
      display: flex;
      height: 32px;
      height: 2rem;
      -ms-flex-pack: space-evenly;
          -webkit-box-pack: space-evenly;
          justify-content: space-evenly;
      position: relative;
      width: 85%;
    }
  .image-uploader-wrapper .header-alignment-wrapper article {
      border-radius: 0.3rem;
      background: #fff;
      height: 75%;
      margin: 4px;
      margin: 0.25rem;
      position: absolute;
      -webkit-transition: left 300ms ease-in-out;
      transition: left 300ms ease-in-out;
      width: 31%;
    }
  .image-uploader-wrapper .header-alignment-wrapper button {
      background-color: rgba(0, 0, 0, 0);
      background-repeat: no-repeat;
      background-position: center;
      background-size: 15%;
      border-radius: 0.3rem;
      -ms-flex-positive: 1;
          -webkit-box-flex: 1;
          flex-grow: 1;
      height: 100%;
      -webkit-transition: background 600ms ease-in-out;
      transition: background 600ms ease-in-out;
      z-index: 1;
    }
  .image-uploader-wrapper .header-alignment-wrapper .left-alignment {
      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAoCAYAAAC4h3lxAAAAAXNSR0IArs4c6QAAAgFJREFUWAntWE1Lw0AQbdKAp178A1496B/oR1QEIX4gooj6+0RFFBGtFYUiTds/4MWbePCoB3sS0sQ3h5VYsy2b3aEtbC+Tncy+eW+mu9mkUJjynyP4l8vlBcdxlsWYbLFYrLdarde0b9KuvRSh2SRJFlPjQhzHYXo8idfuJJJS4WQFqFSLI9Z2gKOqKpi2AyrV4ohl6UAQBDMcZLMwjQuoVqtbvV5vPisZh8+oABxHtvH03uQgKsM0JgCV30GSdVkiLn/6LJQ7Byq/i8qv5QbQmKjdgVqttof8YyFPurU6UKlU9vv9/qpGAbWn5haAyh+A/EoWAxzL53zfj7Pu6fo8z/tsNpvvAkdZAMg5IH8I8ksCZNAiZiOKokG3kTFw6R3lWIApCSDy2G2OYH0BMG6rvYinSgDemZN2u33iuu7TuImL/Ep/IZpEImBOsQ4S2SJGTB0fBFg+BtAiFuTJKgsQk8MwPMM2GmM9/NtGIeANXzOeRSyn1VoDnU7nHJV+5CQ4CltLAIGjExcwD6MScd3XFkDEut3uJRb2PRfJYbhGBFAC7E5XMHfDknHcMyaAyKET1+jELQdRGaZRAZQEnbgplUovsoSm/cYFEMFGo/FtmqgMj0WALBmH3wrgqKoKpu2ASrU4Ym0HOKqqgvl7nMYR+AMT/xyB8VT9UgGzsTkq8AM1CX0sIN0SGAAAAABJRU5ErkJggg==);
    }
  .image-uploader-wrapper .header-alignment-wrapper .center-alignment {
      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAAoCAYAAACrUDmFAAAAAXNSR0IArs4c6QAAAjxJREFUaAXtmr1OwzAQgJs0ERJp8wIwwMbC1LWNulbwALwBCws8SFkQEgusvEHXquraAfECIMEDkFIkmv5wF2EUStr0bJ+JIJEiJ/65u89nX85VS6U/flkm+BqNxsFsNtsVuizLGvX7/Rvxzlk6nMKF7Pl8vgP3vniH8iXxzPpos0rPgfACMAdOUDKh8KDS9OVgcOHBHDhByQSSB1ut1oaSNsXBMvpJgGEYHjWbzW1FO6WGg97KcDg8pg4mAUKKVZlMJqemIREuiqIzyIbIk0sCxNmDnNIoZAJui+o97E8GxEGmIFXhpAFNQOqAUwLkhNQFhzbGx6VareZ6nreHFauu6XTqL7Ynlut5t9t9WmynvmfAuUEQJI9dqeKB5bHT6YTYGANWq1VvPB6fpPZeo1IXZAZcCaLoJkTxTDvhc3IJZt+h6VJBJo05AUkO5SgvCy5N5zp12gDXUfYbfbQB2rb96jiO9D6E/fvqum4bkolnnRMR70FYsyPYmBdZgiHIHOLvK4v9VOGEPISEpdr+zFp+fNgB/q1cLl+L/stKDDKiLQYcDAYRVNyLymVlvV4PAPBbsy44ITQDMur1epl2CllYKi1R3XDCMJ3LVRqQC043pBQgN5xOSDKgKThdkCRACDBKnwJhNLVM7ElyKkgC9H3/FpSRlVCB0vojJKSUV2ltq+pIgJDAvq8Sxt0mo58EyA3AIb8A5JhVkzILD5qcbQ5dhQc5ZtWkzPi4xK0QznEPcH/94QEeR9w6/438D0wCLhXw99S8AAAAAElFTkSuQmCC);
    }
  .image-uploader-wrapper .header-alignment-wrapper .right-alignment {
      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAoCAYAAAC4h3lxAAAAAXNSR0IArs4c6QAAAhFJREFUWAntVk1OwkAUprXWECEx7sADaCr+JFyAFYQDsHKjmxrUeBiDovUIHICwkg1LYvyh0QMUdsYECbFU8I2xTVNbKJ1xWpJp0nRm+mb6/bw3nVhswS8uyvjz+fzqYDA4cmDstFqtO3NMMBtRfOq6vjyZTHYc2N7tfd7eWcQ2IxC2a8wB5gCmAiyF/AiYy+WEUqm05Cd23hhaDiQ0TZP/gwQtAkjY/V6vd4zcmFflafE0CcTG4/GeYRhESVAlgJQEErtwxilns9nlacr6fUedwC+wTDweL8uyjE0iLALIiW1VVU+gsEW/arvFWQVVKBTWh8PhhlsQ7hikTMJtDSAhdbvdUyBxWavVdLeYWWMWgX6/n4Hgg1kTSL+H8/4W7E5nQKIShERoKWQXApzYBCfOi8Xiin3cTzsSBPwA9YqJBAGe51/T6fRFvV7/9ALqNW7VQDKZfIYirngF4ozDzwsV8aHbGhzHvaRSKfwibjQab/ABdBO/4PiwBjvRn3VBeRXAV4MUr7lYaCkE4DuSJF3hgEckrBQyGVF6onS9VhRlhPs96g6A8o+iKFbb7TY2eESeqgMA/kEQBKXZbBq4ypvzqTkAu809FOwNSfCIBC0CH7DP30LBfpnKkXpSSSHSqtvJ03LA/k2ibUaAqJwBFmMOBBCN6BTmAFE5AyxG5T8QANfPFDgzjeB6cszXHP3F7n4D5umeEqpg8UoAAAAASUVORK5CYII=);
    }

.image-section {
  margin-top: 32px;
  margin-top: 2rem;
}

:root {
  --agentBubbleColor: #dadada;
  --agentBubbleTextColor: #000;
  --ameliaBubbleColor: #fff;
  --ameliaBubbleTextColor: #000;
  --avatarName: Amelia;
  --backgroundColor: #FFF;
  --btnColor: #4d5aff;
  --btnTxtColor: #FFFFFF;
  --bubbleMessage: #f00;
  --chatBgColor: null;
  --chatBackgroundImage: null;
  --domainTxtColor: #3a3a3a;
  --font: Roboto;
  --headerColor: #f7f7f7;
  --headerBackgroundImage: null;
  --micColor: #4d5aff;
  --name: Default Amelia Theme;
  --primary: #4d5aff;
  --primaryTextColor: #3a3a3a;
  --primaryTxtColor: peru;
  --secondary: #3a3a3a;
  --secondaryTextColor: #FFF;
  --secondaryTxtColor: slateblue;
  --tooltipColor: #4d5aff;
  --tooltipTxtColor: #FFFFFF;
  --userLogItemBackgroundColor: #3a3a3a;
  --userLogItemFontColor: #FFFFFF;
  --userAvatarBackgroundColor: #DDDDDD;
  --userAvatarFontColor: #FAFAFA;
}

.section-toggle-wrapper {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-align: center;
      -webkit-box-align: center;
      align-items: center;
  position: relative;
  border-radius: 1rem;
  border: 2px solid #4d5aff;
  cursor: pointer;
  height: 24px;
  height: 1.5rem;
  width: 48px;
  width: 3rem;
}

.section-toggle-button {
  background: #ff8784;
  border-radius: 1rem;
  height: 16px;
  height: 1rem;
  margin: 1.6px;
  margin: 0.1rem;
  padding: 0;
  -webkit-transition: -webkit-transform 300ms ease-in-out;
  transition: -webkit-transform 300ms ease-in-out;
  transition: transform 300ms ease-in-out;
  transition: transform 300ms ease-in-out, -webkit-transform 300ms ease-in-out;
  width: 16px;
  width: 1rem;
}

.section-toggle-button.toggle-activated {
    background: #42dfb5;
    -webkit-transform: translateX(1.5rem);
        transform: translateX(1.5rem);
  }

:root {
  --agentBubbleColor: #dadada;
  --agentBubbleTextColor: #000;
  --ameliaBubbleColor: #fff;
  --ameliaBubbleTextColor: #000;
  --avatarName: Amelia;
  --backgroundColor: #FFF;
  --btnColor: #4d5aff;
  --btnTxtColor: #FFFFFF;
  --bubbleMessage: #f00;
  --chatBgColor: null;
  --chatBackgroundImage: null;
  --domainTxtColor: #3a3a3a;
  --font: Roboto;
  --headerColor: #f7f7f7;
  --headerBackgroundImage: null;
  --micColor: #4d5aff;
  --name: Default Amelia Theme;
  --primary: #4d5aff;
  --primaryTextColor: #3a3a3a;
  --primaryTxtColor: peru;
  --secondary: #3a3a3a;
  --secondaryTextColor: #FFF;
  --secondaryTxtColor: slateblue;
  --tooltipColor: #4d5aff;
  --tooltipTxtColor: #FFFFFF;
  --userLogItemBackgroundColor: #3a3a3a;
  --userLogItemFontColor: #FFFFFF;
  --userAvatarBackgroundColor: #DDDDDD;
  --userAvatarFontColor: #FAFAFA;
}

.ColorPicker__swatch {
	border-radius: 7px;
}

.ColorPicker__selected-data {
	display: -ms-flexbox;
	display: -webkit-box;
	display: flex;
	-ms-flex-align: center;
	    -webkit-box-align: center;
	    align-items: center;
	margin-bottom: 20px;
}

.ColorPicker__selected-data > div {
		-ms-flex: 0 0 auto;
		    -webkit-box-flex: 0;
		    flex: 0 0 auto;
	}

.ColorPicker__selected-data input {
	  font-size: 14px;
      border-bottom: 1px solid #ddd;
      padding: 3px;
	}

.ColorPicker__color-entry {
	margin: 0 20px;
}

.ColorPicker__color-input {
	position: relative;
	display: inline-block;
}

.ColorPicker__color-input::before {
		color: #999;
		font-size: 10px;
		line-height: 14px;
		margin-bottom: -14px;
		display: block;
		position: absolute;
    	bottom: 0;
    	margin-left: 5px;
	}

.ColorPicker__color-input.hex input { width: 75px; }

.ColorPicker__color-input.hex::before {content: "HEX";}

.ColorPicker__color-input.rgb {
		margin: 0 5px;
	}

.ColorPicker__color-input.rgb input { width: 35px; }

.ColorPicker__color-input.rgb:nth-child(1)::before {content: "R";}

.ColorPicker__color-input.rgb:nth-child(2)::before {content: "G";}

.ColorPicker__color-input.rgb:nth-child(3)::before {content: "B";}

.ColorPicker__color-input.disabled input {border-bottom: 1px solid transparent}

.ColorPicker__color-input.disabled::before {content: "";}

.ColorPicker__picker {
	margin-top: 20px;
}

.ColorPicker__picker .react-color-picker__hue-spectrum,
	.ColorPicker__picker .react-color-picker__saturation-spectrum,
	.ColorPicker__picker .react-color-picker__saturation-black {
		border-radius: 7px;
	}

.ColorPicker__picker .react-color-picker__hue-spectrum {
		margin-right: 10px;
	}

/* TODO: move to some common place */

.section--edit {
	position: relative;
	padding-right: 64px;
	padding-right: 4rem;
	max-width: 400px;
}

.section--edit .section--edit-btn {
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		width: 32px;
		width: 2rem;
		height: 32px;
		height: 2rem;
		background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABGdBTUEAALGPC/xhBQAABWVJREFUaAXVWk1LY1cYTm4madOJwRmLiPUjmjp2qM5QbKVaF1nowsIUZmEnwkA7CKIbf4C4EMGFW10I0s3ALAaE0tKC0oqIKC4shaIVS41YTUNk4uhoqoyffZ7bHOd6k5h7k5uPHric+3He932e97zn+5pNBqTOzk7r0tKS22KxuM7Pz9+Fytu47Gaz2Ub1FxcXx8iOcL2UJCl0dna2UVtb6xsbGzvh91SSOVnhhoYGO2Q/AMhq5G5cVp26CN4Hcn8gX11YWCBB3Uk3gba2NlswGGyApz+DcdnDuq2qBOCEY9TMfFFR0cL4+DhrS3OyaC3Z398vnZyc1B0cHDwCeHpds6wGGxY4oyIcDn9UVlZ23NHREZyZmbnQIGfSVAOtra1OAPcCeLEWpamWQW0E8vLynk9MTOwn0pWQgMfjKYHnvfCQI5EyI78jrMJWq/U5asJ/nd5rw6Cpqek+vP4I4N++Tkmavtlg9x5C6tXm5uZ2PBtxCUTAP4QSKZ5wut/TNq675eXlu/FIxATHsAG4B+kGqEP/gwimKJEoAmywjHmEzo2o0ll6QSzERGxqCFcIsKtkb4Nqy2iDVYOK9UxMxEaMyu9X2gD7eRSsUxbIpXtgy1tfXz/Y2toKCFyXbDjC4qVHfMjh3BPBKkO8rIGCgoImxBpH2LSnysrKm729vR7YlJaXl1/qNGg7PDw8Ra/0F+VkApGJ2ZfiWadCXcXdbrdjZGTk66qqqur6+vpau93+anFxMahLicn0XklJyS9+v/9UJlBaWloLBR/qVKK7eHFxsX10dPRJfn4+p9wmjLbmmpqa6iRIEPcOCATlNgA9GQkdzGKPYPRvJXOSaG9v/8Lr9b6vfJ/oXmCWuBhBYXcigVS+M2yweHmImH+ru7v7O8T9b0p9JFFXV1ehfKfh3k3sFpvNdgfy9zUIJFWE4IeHh7/CnKYCo6lrenp6BXP+3xH/twoLC4uodG9vLzQwMPDD7u6unhWaZXt7O2BxuVwfo3/l1MHwJMCLmHc4HE41CTjwRk9Pz1P07//oBYAlbNjc2Nj4GIK64k+LITV4pQzagr+rq+vZzs7Oa6zC7IFAIKnlJHSusRFzAW5oug48DQF0yeDg4OcYd0wpgKeq2yTAxblhKRF4GmLMDw0N/WyAUbuEBmzIwpxgtIJnzPt8vnCqBIhdHgdSVZQN8AIzVzy6tjGEoDLPtOeFbWJnDSTbA8h6sgU+QuKIBPTOBiOymY/5S8NvbrhVKYXePGu/y7LnZaDELnGjVTvs/0piZH2H0wMxwsaSZ1dpVG8TSz/fEbvEXWLc65mDmLB++DTb4ImZ2KXIFjdJaE6Yg8TtfjPh+QhQeXteBoLuiFvcKacMgueZg4xZeHIVo1pK40EmwUewrtLj8pKSa0tMqzmoaVpUYGFyE/P781Ao9IIX5uXBvr6+b42YHmgJA4Tw7Pz8/BrLXu6+8XABM8NPQCLhphZOU5Z4aTFmdBl4P0ysQq9cA3xYWVk54+ECbu+Ij7mYg8BPk5OTWwKbaAPyc0tLy688XBAfcy0nNmJU4oo64OAG6v7+fqeWUFIqSvc9Q8fpdI6pT20uQ0gAWFtbe41pwiYI3MN1pYZEmUzn8PwpTmueTU1NvVDbjiLAAhsbG/s8GQGBu2qBbDzD+9/Pzs7+Gct2TAIsyBMRnoxAuCpbNUHPE/zc3NyVfSQlkbgEBAlsxK5j8c2eybClpxJAvHvGPMMmnueF3LUEWIjhhP3LZZwdlKMm8oRgOnP2NmiwT2PFvNqupkbKlt/c3PwNvPIjPaNWYtQzddMGbal7m3g2orrReAXF+1z71UA3AUHkf/uzhyCgzLP5u82/rdK7LMJmbkcAAAAASUVORK5CYII=);
		background-repeat: no-repeat;
		background-size: contain;
		overflow: hidden;
		cursor: pointer;
		text-indent: -9999px;

	}

:root {
	--agentBubbleColor: #dadada;
	--agentBubbleTextColor: #000;
	--ameliaBubbleColor: #fff;
	--ameliaBubbleTextColor: #000;
	--avatarName: Amelia;
	--backgroundColor: #FFF;
	--btnColor: #4d5aff;
	--btnTxtColor: #FFFFFF;
	--bubbleMessage: #f00;
	--chatBgColor: null;
	--chatBackgroundImage: null;
	--domainTxtColor: #3a3a3a;
	--font: Roboto;
	--headerColor: #f7f7f7;
	--headerBackgroundImage: null;
	--micColor: #4d5aff;
	--name: Default Amelia Theme;
	--primary: #4d5aff;
	--primaryTextColor: #3a3a3a;
	--primaryTxtColor: peru;
	--secondary: #3a3a3a;
	--secondaryTextColor: #FFF;
	--secondaryTxtColor: slateblue;
	--tooltipColor: #4d5aff;
	--tooltipTxtColor: #FFFFFF;
	--userLogItemBackgroundColor: #3a3a3a;
	--userLogItemFontColor: #FFFFFF;
	--userAvatarBackgroundColor: #DDDDDD;
	--userAvatarFontColor: #FAFAFA;
}

.HeaderOption .header-toggle-section {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-pack: justify;
        -webkit-box-pack: justify;
        justify-content: space-between;
  }

.HeaderOption ul {
  list-style: none;
}

.HeaderOption ul li {
    margin: 24px 0;
    margin: 1.5rem 0;
    position: relative;
  }

.HeaderOption ul .feedbackBpn {
    display: inline-block;
    border-bottom: 1px solid #000;
    visibility: unset;
    position: absolute;
    top: 32px;
    top: 2rem;
    left: 41.6px;
    left: 2.6rem;
  }

.HeaderOption ul .feedbackBpn.hidden {
      visibility: unset;
      display: none;
    }

.HeaderOption__subsection {
  margin-top: 40px;
  margin-top: 2.5rem;
}

.header-text-section {
  margin-top: 40px;
  margin-top: 40px;
  margin-top: 2.5rem;
}

:root {
    --agentBubbleColor: #dadada;
    --agentBubbleTextColor: #000;
    --ameliaBubbleColor: #fff;
    --ameliaBubbleTextColor: #000;
    --avatarName: Amelia;
    --backgroundColor: #FFF;
    --btnColor: #4d5aff;
    --btnTxtColor: #FFFFFF;
    --bubbleMessage: #f00;
    --chatBgColor: null;
    --chatBackgroundImage: null;
    --domainTxtColor: #3a3a3a;
    --font: Roboto;
    --headerColor: #f7f7f7;
    --headerBackgroundImage: null;
    --micColor: #4d5aff;
    --name: Default Amelia Theme;
    --primary: #4d5aff;
    --primaryTextColor: #3a3a3a;
    --primaryTxtColor: peru;
    --secondary: #3a3a3a;
    --secondaryTextColor: #FFF;
    --secondaryTxtColor: slateblue;
    --tooltipColor: #4d5aff;
    --tooltipTxtColor: #FFFFFF;
    --userLogItemBackgroundColor: #3a3a3a;
    --userLogItemFontColor: #FFFFFF;
    --userAvatarBackgroundColor: #DDDDDD;
    --userAvatarFontColor: #FAFAFA;
}

.configurator .ChatInput__tooltip {
	margin-bottom: 0;
}

.PrimaryColor__preview {
	margin-top: 16px;
	margin-top: 1rem;
}

.PrimaryColor__preview .LoginForm__button {
		margin: 0;
		width: 60%;
	}

.PrimaryColor__preview-buttons {
	display: -ms-flexbox;
	display: -webkit-box;
	display: flex;
    -ms-flex-pack: justify;
        -webkit-box-pack: justify;
        justify-content: space-between;
    -ms-flex-align: center;
        -webkit-box-align: center;
        align-items: center;
    margin-bottom: 16px;
    margin-bottom: 1rem;
    margin-top: 8px;
    margin-top: 0.5rem;
}

:root {
	--agentBubbleColor: #dadada;
	--agentBubbleTextColor: #000;
	--ameliaBubbleColor: #fff;
	--ameliaBubbleTextColor: #000;
	--avatarName: Amelia;
	--backgroundColor: #FFF;
	--btnColor: #4d5aff;
	--btnTxtColor: #FFFFFF;
	--bubbleMessage: #f00;
	--chatBgColor: null;
	--chatBackgroundImage: null;
	--domainTxtColor: #3a3a3a;
	--font: Roboto;
	--headerColor: #f7f7f7;
	--headerBackgroundImage: null;
	--micColor: #4d5aff;
	--name: Default Amelia Theme;
	--primary: #4d5aff;
	--primaryTextColor: #3a3a3a;
	--primaryTxtColor: peru;
	--secondary: #3a3a3a;
	--secondaryTextColor: #FFF;
	--secondaryTxtColor: slateblue;
	--tooltipColor: #4d5aff;
	--tooltipTxtColor: #FFFFFF;
	--userLogItemBackgroundColor: #3a3a3a;
	--userLogItemFontColor: #FFFFFF;
	--userAvatarBackgroundColor: #DDDDDD;
	--userAvatarFontColor: #FAFAFA;
}
.secondary-color-preview {
  margin-top: 16px;
  margin-top: 1rem;
}

.secondary-examples-wrapper {
	display: -ms-flexbox;
	display: -webkit-box;
	display: flex;
	-ms-flex-pack: justify;
	    -webkit-box-pack: justify;
	    justify-content: space-between;
	height: 192px;
	height: 12rem;
}

.secondary-examples-left {
	width: 40%;
}

.secondary-examples-right {
	width: 55%;
}

.suggested-responses-preview {
	border: 1px solid #f7f7f7;
	border-radius: 0.5rem;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	display: -ms-flexbox;
	display: -webkit-box;
	display: flex;
	-ms-flex-direction: column;
	    -webkit-box-orient: vertical;
	    -webkit-box-direction: normal;
	    flex-direction: column;
	height: 100%;
	overflow-y: auto;
}

.suggested-response-preview-item {
	border-bottom: 1px solid #f7f7f7;
	font-size: 19.2px;
	font-size: 1.2rem;
	padding: 12.8px;
	padding: 0.8rem;
}

.secondary-preview-response-row {
	margin-left: 8px;
	margin-left: 0.5rem;
}

:root {
  --agentBubbleColor: #dadada;
  --agentBubbleTextColor: #000;
  --ameliaBubbleColor: #fff;
  --ameliaBubbleTextColor: #000;
  --avatarName: Amelia;
  --backgroundColor: #FFF;
  --btnColor: #4d5aff;
  --btnTxtColor: #FFFFFF;
  --bubbleMessage: #f00;
  --chatBgColor: null;
  --chatBackgroundImage: null;
  --domainTxtColor: #3a3a3a;
  --font: Roboto;
  --headerColor: #f7f7f7;
  --headerBackgroundImage: null;
  --micColor: #4d5aff;
  --name: Default Amelia Theme;
  --primary: #4d5aff;
  --primaryTextColor: #3a3a3a;
  --primaryTxtColor: peru;
  --secondary: #3a3a3a;
  --secondaryTextColor: #FFF;
  --secondaryTxtColor: slateblue;
  --tooltipColor: #4d5aff;
  --tooltipTxtColor: #FFFFFF;
  --userLogItemBackgroundColor: #3a3a3a;
  --userLogItemFontColor: #FFFFFF;
  --userAvatarBackgroundColor: #DDDDDD;
  --userAvatarFontColor: #FAFAFA;
}

.fake-chat__select-img{
  background: #DADADA;
  color: #fff;
  border-radius: 1.25rem 1.25rem;
  width: 100%;
  margin-top: 32px;
  margin-top: 2rem;
}
  .fake-chat__select-img span {
    text-align: center;
    display: block;
    padding: 8px;
    padding: .5rem;
    border-radius: 0rem 0rem .25rem 1.25rem;
  }

.fake-img {
  height: 80px;
  height: 5rem;
  width: 48px;
  width: 3rem;
}

:root{
  --agentBubbleColor: #dadada;
  --agentBubbleTextColor: #000;
  --ameliaBubbleColor: #fff;
  --ameliaBubbleTextColor: #000;
  --avatarName: Amelia;
  --backgroundColor: #FFF;
  --btnColor: #4d5aff;
  --btnTxtColor: #FFFFFF;
  --bubbleMessage: #f00;
  --chatBgColor: null;
  --chatBackgroundImage: null;
  --domainTxtColor: #3a3a3a;
  --font: Roboto;
  --headerColor: #f7f7f7;
  --headerBackgroundImage: null;
  --micColor: #4d5aff;
  --name: Default Amelia Theme;
  --primary: #4d5aff;
  --primaryTextColor: #3a3a3a;
  --primaryTxtColor: peru;
  --secondary: #3a3a3a;
  --secondaryTextColor: #FFF;
  --secondaryTxtColor: slateblue;
  --tooltipColor: #4d5aff;
  --tooltipTxtColor: #FFFFFF;
  --userLogItemBackgroundColor: #3a3a3a;
  --userLogItemFontColor: #FFFFFF;
  --userAvatarBackgroundColor: #DDDDDD;
  --userAvatarFontColor: #FAFAFA;
}
.preview {
  margin-top: 16px;
  margin-top: 1rem;
}

.preview-wrapper {
	max-width: 240px;
	max-width: 15rem;
}

:root {
  --agentBubbleColor: #dadada;
  --agentBubbleTextColor: #000;
  --ameliaBubbleColor: #fff;
  --ameliaBubbleTextColor: #000;
  --avatarName: Amelia;
  --backgroundColor: #FFF;
  --btnColor: #4d5aff;
  --btnTxtColor: #FFFFFF;
  --bubbleMessage: #f00;
  --chatBgColor: null;
  --chatBackgroundImage: null;
  --domainTxtColor: #3a3a3a;
  --font: Roboto;
  --headerColor: #f7f7f7;
  --headerBackgroundImage: null;
  --micColor: #4d5aff;
  --name: Default Amelia Theme;
  --primary: #4d5aff;
  --primaryTextColor: #3a3a3a;
  --primaryTxtColor: peru;
  --secondary: #3a3a3a;
  --secondaryTextColor: #FFF;
  --secondaryTxtColor: slateblue;
  --tooltipColor: #4d5aff;
  --tooltipTxtColor: #FFFFFF;
  --userLogItemBackgroundColor: #3a3a3a;
  --userLogItemFontColor: #FFFFFF;
  --userAvatarBackgroundColor: #DDDDDD;
  --userAvatarFontColor: #FAFAFA;
}
.button-toggle-wrapper h4 {
    margin-top: 32px;
    margin-top: 2rem;
  }

  .button-toggle-wrapper ul {
    list-style: none;
  }

  .button-toggle-wrapper li {
    margin: 24px 0;
    margin: 1.5rem 0;
  }

  .button-toggle-wrapper .toggle-section {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-pack: justify;
        -webkit-box-pack: justify;
        justify-content: space-between;
  }

  .button-toggle-wrapper .toggle-text {
    min-height: 25px;
    color: grey;
    font-size: 12px;
    font-size: 0.75rem;
    margin: auto 4px;
    margin: auto 0.25rem;
    line-height: 1.5;
  }

  :root {
    --agentBubbleColor: #dadada;
    --agentBubbleTextColor: #000;
    --ameliaBubbleColor: #fff;
    --ameliaBubbleTextColor: #000;
    --avatarName: Amelia;
    --backgroundColor: #FFF;
    --btnColor: #4d5aff;
    --btnTxtColor: #FFFFFF;
    --bubbleMessage: #f00;
    --chatBgColor: null;
    --chatBackgroundImage: null;
    --domainTxtColor: #3a3a3a;
    --font: Roboto;
    --headerColor: #f7f7f7;
    --headerBackgroundImage: null;
    --micColor: #4d5aff;
    --name: Default Amelia Theme;
    --primary: #4d5aff;
    --primaryTextColor: #3a3a3a;
    --primaryTxtColor: peru;
    --secondary: #3a3a3a;
    --secondaryTextColor: #FFF;
    --secondaryTxtColor: slateblue;
    --tooltipColor: #4d5aff;
    --tooltipTxtColor: #FFFFFF;
    --userLogItemBackgroundColor: #3a3a3a;
    --userLogItemFontColor: #FFFFFF;
    --userAvatarBackgroundColor: #DDDDDD;
    --userAvatarFontColor: #FAFAFA;
}

.LoginScreen ul {
    list-style: none;
  }

    .LoginScreen ul li {
      margin: 24px 0;
      margin: 1.5rem 0;
      position: relative;
    }

    :root {
    --agentBubbleColor: #dadada;
    --agentBubbleTextColor: #000;
    --ameliaBubbleColor: #fff;
    --ameliaBubbleTextColor: #000;
    --avatarName: Amelia;
    --backgroundColor: #FFF;
    --btnColor: #4d5aff;
    --btnTxtColor: #FFFFFF;
    --bubbleMessage: #f00;
    --chatBgColor: null;
    --chatBackgroundImage: null;
    --domainTxtColor: #3a3a3a;
    --font: Roboto;
    --headerColor: #f7f7f7;
    --headerBackgroundImage: null;
    --micColor: #4d5aff;
    --name: Default Amelia Theme;
    --primary: #4d5aff;
    --primaryTextColor: #3a3a3a;
    --primaryTxtColor: peru;
    --secondary: #3a3a3a;
    --secondaryTextColor: #FFF;
    --secondaryTxtColor: slateblue;
    --tooltipColor: #4d5aff;
    --tooltipTxtColor: #FFFFFF;
    --userLogItemBackgroundColor: #3a3a3a;
    --userLogItemFontColor: #FFFFFF;
    --userAvatarBackgroundColor: #DDDDDD;
    --userAvatarFontColor: #FAFAFA;
}
.confirmation-wrapper {
  cursor: pointer;
  font-size: 14.4px;
  font-size: 0.9rem;
  height: 64px;
  height: 4rem;
  line-height: 1px;
  position: absolute;
  z-index: 15;
  width: 100%;
  border-top: 2px solid #fff;
  bottom: 0;
}
:root {
  --agentBubbleColor: #dadada;
  --agentBubbleTextColor: #000;
  --ameliaBubbleColor: #fff;
  --ameliaBubbleTextColor: #000;
  --avatarName: Amelia;
  --backgroundColor: #FFF;
  --btnColor: #4d5aff;
  --btnTxtColor: #FFFFFF;
  --bubbleMessage: #f00;
  --chatBgColor: null;
  --chatBackgroundImage: null;
  --domainTxtColor: #3a3a3a;
  --font: Roboto;
  --headerColor: #f7f7f7;
  --headerBackgroundImage: null;
  --micColor: #4d5aff;
  --name: Default Amelia Theme;
  --primary: #4d5aff;
  --primaryTextColor: #3a3a3a;
  --primaryTxtColor: peru;
  --secondary: #3a3a3a;
  --secondaryTextColor: #FFF;
  --secondaryTxtColor: slateblue;
  --tooltipColor: #4d5aff;
  --tooltipTxtColor: #FFFFFF;
  --userLogItemBackgroundColor: #3a3a3a;
  --userLogItemFontColor: #FFFFFF;
  --userAvatarBackgroundColor: #DDDDDD;
  --userAvatarFontColor: #FAFAFA;
}

.avatar {
  height: 48px;
  height: 3rem;
}

  .avatar:hover {
    cursor: pointer;
  }

.avatar-library-container {
  position: relative;
  border: 1px solid #dadada;
  border-radius: 4px;
  height: 272px;
  height: 17rem;
  overflow: hidden;
}

.avatar-selection-wrapper {
  -ms-flex-direction: column;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      flex-direction: column;
  overflow-y: auto;
  height: 232px;
  height: 14.5rem;
}

.avatar-wrapper {
  border-radius: 50%;
  width: 31.2px;
  width: 1.95rem;
  height: 31.2px;
  height: 1.95rem;
  overflow: hidden;
  background: #ddd;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
}

.avatar-single {
  position: relative;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  min-height: 100%;
  -ms-flex-align: center;
      -webkit-box-align: center;
      align-items: center;
  position: relative;
  overflow: hidden;
}

.avatar-single:after {
    top: 0;
    background-color: #ff5b56;
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    -webkit-transform: translateX(100%);
        transform: translateX(100%);
  }

.avatar-single.loaded:before {
    content: 'Deleting';
    color: white;
    position: absolute;
    right: 16px;
    right: 1rem;
    z-index: 3;
    -webkit-animation: deleted 2s;
            animation: deleted 2s;
  }

.avatar-single.loaded:after {
    -webkit-animation: loaded 2s;
            animation: loaded 2s;
  }

.avatar-wrapper svg {
  display: block;
  margin-top: 3.2px;
  margin-top: 0.2rem;
}

.create-new-container {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  height: 48px;
  height: 3rem;
  -ms-flex-align: center;
      -webkit-box-align: center;
      align-items: center;
  padding-left: 32px;
  padding-left: 2rem;
}

.create-new-container div:hover {
    cursor: pointer;
  }

.create-new-container .add-button, .create-new-container .create-new-option {
    height: 100%;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-align: center;
        -webkit-box-align: center;
        align-items: center;
  }

.create-new-container .create-new-option {
    padding-left: 8px;
    padding-left: 0.5rem;
  }

.create-new-option a {
  font-size: 12.8px;
  font-size: 0.8rem;
  font-weight: normal;
  color: #999;
  text-decoration: underline;
}

.highlight-selected {
  background-color: #f6f7ff;
}

.avatar-delete-button {
  position: absolute;
  right: 0;
  padding-right: 16px;
  padding-right: 1rem;
}

.avatar-delete-button .delete-button {
    height: 12px;
  }

.avatar-frame-drop-zone {
  position: absolute;
  left: 32px;
  left: 2rem;
}

.edit-avatar-wrapper, .edit-field-wrapper {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-align: center;
      -webkit-box-align: center;
      align-items: center;
}

.edit-avatar-wrapper img, .edit-field-wrapper img {
    height: 12px;
  }

.default-avatar-wrapper {
  position: absolute;
}

.edit-avatar-wrapper {
  left: 32px;
  left: 2rem;
}

.edit-avatar-wrapper .edit-avatar-button {
    position: absolute;
    right: -4.8px;
    right: -0.30rem;
  }

.edit-field-wrapper {
  position: absolute;
  left: 45%;
}

.edit-field-wrapper img {
    padding-left: 8px;
    padding-left: 0.5rem;
  }

.edit-field-wrapper .avatar-input-field {
    outline: none;
    border: none;
    border-bottom: 1px solid black;
  }

.avatar-wrapper img {
    height: 100%;
  }

.avatar-drop-zone {
  height: 100%;
  width: 100%;
}

.drop-zone-border {
  border: 1px dashed #000;
}

.drop-zone-hovering {
  background: black;
}

.block-create-new {
  background-color: #f7f7f7;
  height: 48px;
  height: 3rem;
  text-align: center;
  line-height: 48px;
  line-height: 3rem;
}

.file-rejection-error {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  background-color: #ff5b56;
  color: #fff;
  z-index: 8;
  position: absolute;
  height: 100%;
  width: 100%;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -ms-flex-align: center;
      -webkit-box-align: center;
      align-items: center;
}

.file-rejection-error span {
    font-size: 12.8px;
    font-size: 0.8rem;
  }

.file-rejection-error article {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAjJJREFUWAnFmL9OwkAcx227YST+GxyAza2DKyHEiVdwMPEpXHwEFx/AF3BgdWRAQ6CLgzG8gMBojMSAiQTw9yU9cpS79nd3Tbyklt7d7/f5tPenoLdDpV6vny+XywYdu3TZp6PZ7Xa/0ZZXqdVqe5Trgo7Q87wJHa1Op/PsAT6fzy9lEDV+LBaLuyiKPuV628/VavXQ9/1rusFjOUcQBA8+7lyuxGd0RAACk22m1zp4zGlAAI99q+QhkQYHEGyfzhhzZXGRyILHwD4EmhhzpQFV2khw4DGzGQyHw99SqfRKY35GvIJGpIB29BuNRj+aPqtqLhyTvNfrjQNEIWkeEiZwscJWAnlI2MDBXQu4SNjCwfTwJ1lMEiJWtcnIOdM2NqUAgrkS6IuVgrOqpMHRf2MI5ATciUkxupWzkwVPFUAjUwJdtwoHjiDtExAZbSS4cJYAOplImMCRG1vxv5bMIYAdZ0VId8HethGTKWAIFx5siVQBS7iRhFaAA8eEo2NKRN1ekPkklAJcOF6ptAtGLq/yLQETOF6pzCWqfRIbAqZwMdguEmsBW7irxErAFe4i4cW/WG5cXqlCQJy5N0T9b4NKpXJF8FMRnDyb7u2I584Jyr2Pd0GYhIprG7iIxQrBMkUOUac4hz51mCgaWF8mVHFyXZYE2BBoyUH4DOu8fpymSYAdDAaD93K5PKWLE7BpV3srFov37Xb7Kylme405EYbhy2w2O6L5dkCsMeV6pH8BPP0BthwFgAufDs8AAAAASUVORK5CYII=);
    background-repeat: no-repeat;
    background-size: contain;
    height: 12.8px;
    height: 0.8rem;
    width: 12.8px;
    width: 0.8rem;
  }

@-webkit-keyframes loaded {
  0%{
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  100%{
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
}

@keyframes loaded {
  0%{
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  100%{
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
}

@-webkit-keyframes deleted {
  0%{
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  100%{
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
}

@keyframes deleted {
  0%{
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  100%{
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
}

:root {
  --agentBubbleColor: #dadada;
  --agentBubbleTextColor: #000;
  --ameliaBubbleColor: #fff;
  --ameliaBubbleTextColor: #000;
  --avatarName: Amelia;
  --backgroundColor: #FFF;
  --btnColor: #4d5aff;
  --btnTxtColor: #FFFFFF;
  --bubbleMessage: #f00;
  --chatBgColor: null;
  --chatBackgroundImage: null;
  --domainTxtColor: #3a3a3a;
  --font: Roboto;
  --headerColor: #f7f7f7;
  --headerBackgroundImage: null;
  --micColor: #4d5aff;
  --name: Default Amelia Theme;
  --primary: #4d5aff;
  --primaryTextColor: #3a3a3a;
  --primaryTxtColor: peru;
  --secondary: #3a3a3a;
  --secondaryTextColor: #FFF;
  --secondaryTxtColor: slateblue;
  --tooltipColor: #4d5aff;
  --tooltipTxtColor: #FFFFFF;
  --userLogItemBackgroundColor: #3a3a3a;
  --userLogItemFontColor: #FFFFFF;
  --userAvatarBackgroundColor: #DDDDDD;
  --userAvatarFontColor: #FAFAFA;
}
.MessageOption ul {
  list-style: none;
}

  .MessageOption ul li {
    margin: 24px 0;
    margin: 1.5rem 0;
    position: relative;
  }

.message-details-container {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  height: 40px;
  height: 2.5rem;
  background: #f7f7f7;
}

.message-detail-option-wrapper {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-pack: center;
      -webkit-box-pack: center;
      justify-content: center;
  -ms-flex-align: center;
      -webkit-box-align: center;
      align-items: center;
  position: relative;
  width: 50%;
  border-bottom: 1px solid #dadada;
}

.message-detail-option-wrapper.profile-pic {
    border-right: 1px solid #dadada;
  }

.message-detail-option label {
    font-size: 11px;
  }

:root {
  --agentBubbleColor: #dadada;
  --agentBubbleTextColor: #000;
  --ameliaBubbleColor: #fff;
  --ameliaBubbleTextColor: #000;
  --avatarName: Amelia;
  --backgroundColor: #FFF;
  --btnColor: #4d5aff;
  --btnTxtColor: #FFFFFF;
  --bubbleMessage: #f00;
  --chatBgColor: null;
  --chatBackgroundImage: null;
  --domainTxtColor: #3a3a3a;
  --font: Roboto;
  --headerColor: #f7f7f7;
  --headerBackgroundImage: null;
  --micColor: #4d5aff;
  --name: Default Amelia Theme;
  --primary: #4d5aff;
  --primaryTextColor: #3a3a3a;
  --primaryTxtColor: peru;
  --secondary: #3a3a3a;
  --secondaryTextColor: #FFF;
  --secondaryTxtColor: slateblue;
  --tooltipColor: #4d5aff;
  --tooltipTxtColor: #FFFFFF;
  --userLogItemBackgroundColor: #3a3a3a;
  --userLogItemFontColor: #FFFFFF;
  --userAvatarBackgroundColor: #DDDDDD;
  --userAvatarFontColor: #FAFAFA;
}

.BubbleShapeEditor__selected-data {
	display: -ms-flexbox;
	display: -webkit-box;
	display: flex;
	-ms-flex-align: center;
	    -webkit-box-align: center;
	    align-items: center;
	margin-bottom: 20px;
}

	.BubbleShapeEditor__selected-data > div {
		-ms-flex: 0 0 auto;
		    -webkit-box-flex: 0;
		    flex: 0 0 auto;
	}

	.BubbleShapeEditor__selected-data input {
	  font-size: 14px;
      border-bottom: 1px solid #ddd;
      padding: 3px;
	}

.BubbleShapeEditor__input {
	position: relative;
	display: inline-block;
}

.BubbleShapeEditor__input::before {
		color: #999;
		font-size: 10px;
		line-height: 14px;
		margin-bottom: -14px;
		display: block;
		position: absolute;
    	bottom: 0;
    	margin-left: 5px;
	}

.BubbleShapeEditor__input.BubbleShapeEditor__hint input { width: 75px; border-radius: 4px; }

.BubbleShapeEditor__input.BubbleShapeEditor__hint::before {content: attr(data-content);}

.BubbleShapeEditor__input.rgb {
		margin: 0 5px;
	}

.BubbleShapeEditor__input.rgb input { width: 35px; }

.BubbleShapeEditor__input.rgb:nth-child(1)::before {content: "R";}

.BubbleShapeEditor__input.rgb:nth-child(2)::before {content: "G";}

.BubbleShapeEditor__input.rgb:nth-child(3)::before {content: "B";}

.BubbleShapeEditor__input.disabled input {border-bottom: 1px solid transparent}

.BubbleShapeEditor__input.disabled::before {content: "";}

.BubbleShapeEditor__picker {
	margin-top: 20px;
}

.BubbleShapeEditor__picker .react-color-picker__hue-spectrum,
	.BubbleShapeEditor__picker .react-color-picker__saturation-spectrum,
	.BubbleShapeEditor__picker .react-color-picker__saturation-black {
		border-radius: 7px;
	}

.BubbleShapeEditor__picker .react-color-picker__hue-spectrum {
		margin-right: 10px;
	}

/* TODO: move to some common place */

.section--edit {
	position: relative;
	padding-right: 64px;
	padding-right: 4rem;
	max-width: 400px;
}

.section--edit .section--edit-btn {
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		width: 32px;
		width: 2rem;
		height: 32px;
		height: 2rem;
		background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAPpJREFUKBWFkjELgkAUx+9ukJZAKGgT/AjhEjrk1t5oS3t+HJvchZb2NhehrcVdcAsaBEHCwev+ci9KsN5wx/3f7717995xpk1KyT3PszjnlpKmWq6VXmZZVipdQuNYfN+ftG277LpujvPQhBAPwzBuaZo+BTL/ghGMRGDACpQxljmKoq3rujMKAit0zcMqGGDTNBdBEKzJCVaoAz2QdJYkycFxnH1VVfcwDM9vh2IR8GWAbdveFEVxGcA9h4CaIuI43hGsSjmS/rHX6FJJQtM0dZ7npxGYgeVolXr9aqxTlAyzUAO8oksSQ4FAzuFOgwPbTxqAvunv13gBKsKC+qY5gmgAAAAASUVORK5CYII=);
		background-repeat: no-repeat;
		background-size: contain;
		overflow: hidden;
		cursor: pointer;
		text-indent: -9999px;

	}

:root {
	--agentBubbleColor: #dadada;
	--agentBubbleTextColor: #000;
	--ameliaBubbleColor: #fff;
	--ameliaBubbleTextColor: #000;
	--avatarName: Amelia;
	--backgroundColor: #FFF;
	--btnColor: #4d5aff;
	--btnTxtColor: #FFFFFF;
	--bubbleMessage: #f00;
	--chatBgColor: null;
	--chatBackgroundImage: null;
	--domainTxtColor: #3a3a3a;
	--font: Roboto;
	--headerColor: #f7f7f7;
	--headerBackgroundImage: null;
	--micColor: #4d5aff;
	--name: Default Amelia Theme;
	--primary: #4d5aff;
	--primaryTextColor: #3a3a3a;
	--primaryTxtColor: peru;
	--secondary: #3a3a3a;
	--secondaryTextColor: #FFF;
	--secondaryTxtColor: slateblue;
	--tooltipColor: #4d5aff;
	--tooltipTxtColor: #FFFFFF;
	--userLogItemBackgroundColor: #3a3a3a;
	--userLogItemFontColor: #FFFFFF;
	--userAvatarBackgroundColor: #DDDDDD;
	--userAvatarFontColor: #FAFAFA;
}

.IconsWrapper {
  background: #9c9c9c;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  padding: 5px;
  border-radius: 4px;
}

  .IconsWrapper .IconsWrapper-svg-container {
    padding: 3px;
    width: 34px;
    height: 34px;
    text-align: center;
    border-radius: 4px;
    cursor: pointer;
  }

.submit-icon-wrapper {
  border-radius: 50%;
  background: #4d5aff;
  width: 24px;
  height: 24px;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-pack: center;
      -webkit-box-pack: center;
      justify-content: center;
  -ms-flex-align: center;
      -webkit-box-align: center;
      align-items: center;
  margin: 0 auto;
  margin-top: 2px;
}

.submit-icon-translate svg path {
      -webkit-transform: translate(2px, 0px);
          transform: translate(2px, 0px);
    }

:root {
  --agentBubbleColor: #dadada;
  --agentBubbleTextColor: #000;
  --ameliaBubbleColor: #fff;
  --ameliaBubbleTextColor: #000;
  --avatarName: Amelia;
  --backgroundColor: #FFF;
  --btnColor: #4d5aff;
  --btnTxtColor: #FFFFFF;
  --bubbleMessage: #f00;
  --chatBgColor: null;
  --chatBackgroundImage: null;
  --domainTxtColor: #3a3a3a;
  --font: Roboto;
  --headerColor: #f7f7f7;
  --headerBackgroundImage: null;
  --micColor: #4d5aff;
  --name: Default Amelia Theme;
  --primary: #4d5aff;
  --primaryTextColor: #3a3a3a;
  --primaryTxtColor: peru;
  --secondary: #3a3a3a;
  --secondaryTextColor: #FFF;
  --secondaryTxtColor: slateblue;
  --tooltipColor: #4d5aff;
  --tooltipTxtColor: #FFFFFF;
  --userLogItemBackgroundColor: #3a3a3a;
  --userLogItemFontColor: #FFFFFF;
  --userAvatarBackgroundColor: #DDDDDD;
  --userAvatarFontColor: #FAFAFA;
}
.ViewDomains,
.ViewLogin,
.ViewPassword {
  -ms-grid-column-span: 9;
  -ms-grid-column: 1;
      grid-column: 1 / span 9;
  -ms-grid-row-span: 3;
  -ms-grid-row: 1;
      grid-row: 1 / span 3;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
  min-height: 60%;
  position: relative;
  z-index: 4;
}

  @media (max-width: 768px) {.ViewDomains,
.ViewLogin,
.ViewPassword {
    padding: 0 2rem
}
  }

  @media (min-width: 769px) {.ViewDomains,
.ViewLogin,
.ViewPassword {
    -ms-grid-column-span: 5;
    -ms-grid-column: 3;
        grid-column: 3 / span 5
}
  }

  @media (min-width: 769px) {.ViewDomains,
.ViewLogin,
.ViewPassword {
    -ms-grid-column-span: 4;
    -ms-grid-column: 5;
        grid-column: 5 / span 4
}
  }

.Header,
.Header-sample {
  -ms-grid-column-span: 9;
  -ms-grid-column: 1;
      grid-column: 1 / span 9;
  -ms-grid-row-span: 1;
  -ms-grid-row: 1;
      grid-row: 1 / span 1;
  z-index: 3;
  position: relative;
  overflow: hidden;
}

@media (max-width: 768px) {

.Header,
.Header-sample {
    -ms-grid-column-span: 9;
    -ms-grid-column: 1;
        grid-column: 1 / span 9
}
  }

@media (min-width: 769px) {

.Header,
.Header-sample {
    -ms-grid-column-span: 12;
    -ms-grid-column: 1;
        grid-column: 1 / span 12
}
  }

@media (max-width: 768px) {

.Header.shift-left, .Header-sample.shift-left {
      -ms-grid-column-span: 8;
      -ms-grid-column: 1;
          grid-column: 1 / span 8
  }
    }

@media (min-width: 769px) {

.Header.shift-left, .Header-sample.shift-left {
      -ms-grid-column-span: 8;
      -ms-grid-column: 1;
          grid-column: 1 / span 8
  }
    }

@media (max-width: 768px) {

.Header.shift-right.hamburger-menu-icons-only, .Header-sample.shift-right.hamburger-menu-icons-only {
        -ms-grid-column-span: 9;
        -ms-grid-column: 1;
            grid-column: 1 / span 9;
        right: -11%
    }
      }

@media (min-width: 769px) {

.Header.shift-right.hamburger-menu-icons-only, .Header-sample.shift-right.hamburger-menu-icons-only {
        -ms-grid-column-span: 11;
        -ms-grid-column: 2;
            grid-column: 2 / span 11
    }
      }

@media (max-width: 768px) {

.Header.shift-right, .Header-sample.shift-right {
      -ms-grid-column-span: 9;
      -ms-grid-column: 1;
          grid-column: 1 / span 9;
      right: -77%
  }
    }

@media (min-width: 769px) {

.Header.shift-right, .Header-sample.shift-right {
      -ms-grid-column-span: 9;
      -ms-grid-column: 4;
          grid-column: 4 / span 9
  }
    }

.Menu {
  -ms-grid-column-span: 7;
  -ms-grid-column: 1;
      grid-column: 1 / span 7;
  -ms-grid-row-span: 2;
  -ms-grid-row: 1;
      grid-row: 1 / span 2;
  z-index: 5;
}

.Menu.hamburger-menu-icons-only {
    -ms-grid-column-span: 1;
    -ms-grid-column: 1;
        grid-column: 1 / span 1;
  }

@media (min-width: 769px) {

.Menu.hamburger-menu-icons-only {
      -ms-grid-column-span: 1;
      -ms-grid-column: 1;
          grid-column: 1 / span 1
  }
    }

@media (min-width: 769px) {

.Menu {
    -ms-grid-column-span: 3;
    -ms-grid-column: 1;
        grid-column: 1 / span 3
}
  }

.ChatNotes {
  -ms-grid-row-span: 3;
  -ms-grid-row: 1;
      grid-row: 1 / span 3;
  overflow: hidden;
  z-index: 3;
  -ms-grid-column-span: 9;
  -ms-grid-column: 1;
      grid-column: 1 / span 9;
}

@media (min-width: 769px) {

.ChatNotes {
    -ms-grid-column-span: 3;
    -ms-grid-column: 7;
        grid-column: 7 / span 3
}
  }

@media (min-width: 769px) {

.ChatNotes {
    -ms-grid-column-span: 4;
    -ms-grid-column: 9;
        grid-column: 9 / span 4
}
  }

.ViewChat,
.ViewChat-sample {
  -ms-grid-column-span: 9;
  -ms-grid-column: 1;
      grid-column: 1 / span 9;
  -ms-grid-row-span: 1;
  -ms-grid-row: 2;
      grid-row: 2 / span 1;
  -ms-flex-item-align: stretch;
      -ms-grid-row-align: stretch;
      align-self: stretch;
  position: relative;
  overflow: visible;
}

/* needed for full-size Lightbox overlay */

@media (min-width: 769px) {

.ViewChat,
.ViewChat-sample {
    -ms-grid-column-span: 7;
    -ms-grid-column: 2;
        grid-column: 2 / span 7
}
  }

@media (min-width: 769px) {

.ViewChat,
.ViewChat-sample {
    -ms-grid-column-span: 8;
    -ms-grid-column: 3;
        grid-column: 3 / span 8
}
  }

@media (min-width: 1280px) {

.ViewChat,
.ViewChat-sample {
    -ms-grid-column-span: 6;
    -ms-grid-column: 4;
        grid-column: 4 / span 6
}
  }

@media (min-width: 769px) {

.ViewChat.shift-left, .ViewChat-sample.shift-left {
      -ms-grid-column-span: 5;
      -ms-grid-column: 2;
          grid-column: 2 / span 5
  }
    }

@media (min-width: 769px) {

.ViewChat.shift-left, .ViewChat-sample.shift-left {
      -ms-grid-column-span: 6;
      -ms-grid-column: 2;
          grid-column: 2 / span 6
  }
    }

@media (max-width: 768px) {

.ViewChat.shift-right.hamburger-menu-icons-only, .ViewChat-sample.shift-right.hamburger-menu-icons-only {
        -ms-grid-column-span: 9;
        -ms-grid-column: 1;
            grid-column: 1 / span 9;
        right: -11%
    }
      }

@media (min-width: 769px) {

.ViewChat.shift-right.hamburger-menu-icons-only, .ViewChat-sample.shift-right.hamburger-menu-icons-only {
        -ms-grid-column-span: 8;
        -ms-grid-column: 4;
            grid-column: 4 / span 8
    }
      }

@media (min-width: 1280px) {

.ViewChat.shift-right.hamburger-menu-icons-only, .ViewChat-sample.shift-right.hamburger-menu-icons-only {
        -ms-grid-column-span: 6;
        -ms-grid-column: 5;
            grid-column: 5 / span 6
    }
      }

@media (max-width: 768px) {

.ViewChat.shift-right, .ViewChat-sample.shift-right {
      -ms-grid-column-span: 9;
      -ms-grid-column: 1;
          grid-column: 1 / span 9;
      right: -90%
  }
    }

@media (min-width: 769px) {

.ViewChat.shift-right, .ViewChat-sample.shift-right {
      -ms-grid-column-span: 6;
      -ms-grid-column: 5;
          grid-column: 5 / span 6
  }
    }

.ViewChat.header-disabled {
  -ms-grid-row-span: 2;
  -ms-grid-row: 1;
      grid-row: 1 / span 2;
}

/* Animation styles */

.ViewChat,
.Header {
  position: relative;
  right: 0;
  width: 100%;
  -webkit-transition-duration: 300ms;
          transition-duration: 300ms;
  -webkit-transition-timing-function: ease-in-out;
          transition-timing-function: ease-in-out;
}

.ViewChat.animation-in,
  .ViewChat.animation-in.shift-left,
  .ViewChat.animation-in.shift-right,
  .Header.animation-in,
  .Header.animation-in.shift-left,
  .Header.animation-in.shift-right {
    -webkit-transition-property: right, width;
    transition-property: right, width;
  }

.ViewChat.animation-out, .Header.animation-out {
    -webkit-transition-property: none;
    transition-property: none;
  }

.ViewChat.shift-left, .Header.shift-left {
    -webkit-transition-property: none;
    transition-property: none;
    right: 0;
    width: 100%;
  }

.Menu,
.ChatNotes {
  position: relative;
  -webkit-transition: 300ms ease-in-out;
  transition: 300ms ease-in-out;
}

.Menu.active, .ChatNotes.active {
    -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    opacity: 1;
  }

.Menu { -webkit-transform: translate(-100%, 0); transform: translate(-100%, 0); }

.ChatNotes { -webkit-transform: translate(100%, 0); transform: translate(100%, 0); }

* {
  margin: 0;
  padding: 0;
  border: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

h8 {
  font-size: 0.5em;
  line-height: 1.5em;
}

h7 {
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 1.5em;
}

h6 {
  font-size: 14px;
  font-size: 0.875rem;
  font-weight: normal;
  line-height: 1.5em;
}

h5 {
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.5em;
}

h4 {
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 1.33em;
}

h3 {
  font-size: 24px;
  font-size: 1.5rem;
  line-height: 1.33em;
}

h2 {
  font-size: 32px;
  font-size: 2rem;
  line-height: 1.25em;
}

h1 {
  font-size: 40px;
  font-size: 2.5rem;
  line-height: 1.25em;
}

button,
input,
textarea,
ul,
li {
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.3em;
}

html,
.app {
  height: 100%;
}

body {
  font-family: 'Heebo', serif;
  overflow: hidden;
  height: 100%;
  position: relative;
}

.screen-reader-only {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.Heebo,
.HeeboBold {
  font-family: 'Heebo', serif;
}

.HeeboBold,
.KarlaBold,
.MerriweatherBold,
.NotoSerifBold,
.NotoSansBold,
.OpenSansBold,
.PoppinsBold,
.PTSansBold,
.PTSerifBold,
.RobotoBold {
  font-weight: 700;
}

.Karla,
.KarlaBold {
  font-family: 'Karla', sans-serif;
}

.Merriweather,
.MerriweatherBold {
  font-family: 'Merriweather', sans-serif;
}

.NotoSerif,
.NotoSerifBold {
  font-family: 'Noto Serif', serif;
}

.NotoSans,
.NotoSansBold {
  font-family: 'Noto Sans', sans-serif;
}

.OpenSans,
.OpenSansBold {
  font-family: 'Open Sans', sans-serif;
}

.Poppins,
.PoppinsBold {
  font-family: 'Poppins', sans-serif;
}

.PTSans,
.PTSansBold {
  font-family: 'PT Sans', sans-serif;
}

.PTSerif,
.PTSerifBold {
  font-family: 'PT Serif', serif;
}

.Roboto,
.RobotoBold {
  font-family: 'Roboto', sans-serif;
}

.Raleway,
.RalewayBold {
  font-family: 'Raleway', sans-serif;
}

.Button__group {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  width: 100%;
}

.Button__group.Button__group--right {
    -ms-flex-pack: end;
        -webkit-box-pack: end;
        justify-content: flex-end;
  }

.Button__group.Button__group--left {
    -ms-flex-pack: start;
        -webkit-box-pack: start;
        justify-content: flex-start;
  }

.Button__group button {
    margin: 8px 8px;
    margin: 0.5rem 0.5rem;
    border-radius: 5px;
  }

button, a.button {
  background-color: #0b68cf;
  background-color: #4d5aff;
  background-color: var(--btnColor, #0b68cf);
  color: white;
  color: #FFFFFF;
  color: var(--btnTxtColor, white);
  padding: 16px;
  padding: 1rem;
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
  text-align: center;


}

button:hover, a.button:hover {
    opacity: 0.8;
  }

button:disabled, button.disabled, a.button:disabled, a.button.disabled {
    cursor: default;
    opacity: 0.3;
  }

span.Icon {
  display: block;
  height: 24px;
  width: 24px;
  background-size: contain;
  background-repeat: no-repeat;
}

span.Icon__close__right {
  margin-top: 10.4px;
  margin-top: 0.65rem;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAOBJREFUSA1jYBgFAx0CjKQ6wMHBQeL379+bGRkZTx85ciSLkH4WQgqQ5UGG//r1az9QTOP///8CyHK42Ey4JNDFkQ0Hyj0BYg90Ndj4RAURFsMdjh07dhebgehiBC2gxHCQZXgtoNRwvBZQw3CQBTgjGZgUdwDlNYAYFKFEhzlQLQrAaQGKKgo4OC1gZWUFJcMbQCwDxAesrKyUybFn4CIZ5lpKIxuvD6hhCVEWgCwi1yc4Ixnmehh94MCBF2xsbI5APiziQcmYICDaApBJMEuARfUZJiam3QRNH1UwKEIAAM0Pct94W87FAAAAAElFTkSuQmCC);
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

span.Icon__close {
  margin-top: 10.4px;
  margin-top: 0.65rem;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAOBJREFUSA1jYBgFAx0CjKQ6wMHBQeL379+bGRkZTx85ciSLkH4WQgqQ5UGG//r1az9QTOP///8CyHK42Ey4JNDFkQ0Hyj0BYg90Ndj4RAURFsMdjh07dhebgehiBC2gxHCQZXgtoNRwvBZQw3CQBTgjGZgUdwDlNYAYFKFEhzlQLQrAaQGKKgo4OC1gZWUFJcMbQCwDxAesrKyUybFn4CIZ5lpKIxuvD6hhCVEWgCwi1yc4Ixnmehh94MCBF2xsbI5APiziQcmYICDaApBJMEuARfUZJiam3QRNH1UwKEIAAM0Pct94W87FAAAAAElFTkSuQmCC);
}

.basicForm .input-wrapper {
    position: relative;
    margin-bottom: 8px;
    margin-bottom: 0.5rem;
  }

.basicForm input[type="text"],
  .basicForm input[type="password"] {
    background-color: #fff;
    background-color: var(--loginInputBg, #fff);
    border-radius: 0.3rem;
    padding: 17.6px 16px;
    padding: 1.1rem 1rem;
    width: 100%;
    font-size: 14.4px;
    font-size: 0.9rem;
    font-family: sans-serif;
    border: 1px solid white;
    -webkit-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
    z-index: 3;
    position: relative;
    -webkit-appearance: none;
  }

.basicForm input[type="text"]::-webkit-input-placeholder, .basicForm input[type="password"]::-webkit-input-placeholder {
      color: darkgrey;
    }

.basicForm input[type="text"]:-ms-input-placeholder, .basicForm input[type="password"]:-ms-input-placeholder {
      color: darkgrey;
    }

.basicForm input[type="text"]::-moz-placeholder, .basicForm input[type="password"]::-moz-placeholder {
      color: darkgrey;
    }

.basicForm input[type="text"]::placeholder, .basicForm input[type="password"]::placeholder {
      color: darkgrey;
    }

@media (min-width: 769px) {

.basicForm input[type="text"],
  .basicForm input[type="password"] {
      padding: 1.3rem 1rem
  }
    }

.basicForm input[type="password"] {
    padding-right: 48px;
    padding-right: 3rem; /* to exclude overlapping with Mask Button */
  }

.basicForm input[type="submit"],
  .basicForm button {
    font-size: 14.4px;
    font-size: 0.9rem;
    margin-top: 24px;
    margin-top: 1.5rem;
    color: #fff;
    border: none;
    border-radius: 0.5rem;
    padding: 17.6px 48px;
    padding: 1.1rem 3rem;
    line-height: 1;
    -webkit-appearance: none; /* to keep custon styles in iOS */
    width: 100%;
    cursor: pointer;
  }

.basicForm input[type="submit"].small, .basicForm button.small {
      padding: 8px 32px;
      padding: 0.5rem 2rem;

      border-radius: 0.3rem;
    }

.basicForm input[type="submit"].inactive, .basicForm button.inactive {
      background: #3a3a3a;
    }

.basicForm input[type="submit"]:disabled, .basicForm button:disabled {
      cursor: default;
      opacity: 0.5;
    }

.basicForm input[type="submit"]:disabled:hover, .basicForm button:disabled:hover {
        filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="1" /><feFuncG type="linear" slope="1" /><feFuncB type="linear" slope="1" /></feComponentTransfer></filter></svg>#filter');
        -webkit-filter: brightness(100%);
                filter: brightness(100%);
      }

.basicForm input[type="submit"]:hover, .basicForm input[type="submit"].hover, .basicForm button:hover, .basicForm button.hover {
      filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="0.8" /><feFuncG type="linear" slope="0.8" /><feFuncB type="linear" slope="0.8" /></feComponentTransfer></filter></svg>#filter');
      -webkit-filter: brightness(80%);
              filter: brightness(80%);
    }

.basicForm input[type="submit"]:active, .basicForm input[type="submit"].active, .basicForm button:active, .basicForm button.active {
      filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="0.6" /><feFuncG type="linear" slope="0.6" /><feFuncB type="linear" slope="0.6" /></feComponentTransfer></filter></svg>#filter');
      -webkit-filter: brightness(60%);
              filter: brightness(60%);
    }

@media only screen and (max-device-width : 0) and (orientation : landscape) {

.basicForm input[type="submit"],
  .basicForm button {
      width: auto
  }
    }

@media (min-width: 769px) {

.basicForm input[type="submit"],
  .basicForm button {
      padding: 1.3rem 1rem
  }
    }

.basicForm .mask {
    position: absolute;
    top: 16px;
    top: 1rem;
    right: 0;
    z-index: 4;
  }

.basicForm.error input[type="text"],
    .basicForm.error input[type="password"] {
      border-color: #ff5b56;
    }

.basicForm.error button:disabled {
      background: #ccc;
    }

.basicForm.error .error-msg span {
      height: 16px;
      height: 1rem;
    }

.basicForm .error-msg {
    position: relative;
  }

.basicForm .error-msg span {
      position: absolute;
      top: 0;
      right: 0;
      width: 100%;
      color: #ff5b56;
      font-size: 11.2px;
      font-size: 0.7rem;
      text-align: right;
      height: 0;
      overflow: hidden;
      white-space: nowrap;
      -webkit-transition: height 0.6s ease-in-out;
      transition: height 0.6s ease-in-out;
    }

.basicForm .hint {
    width: 100%;
    color: darkgrey;
    position: absolute;
    top: 0;
    left: 0;
    text-align: right;
    font-size: 11.2px;
    font-size: 0.7rem;
    padding: 0 6.4px;
    padding: 0 0.4rem;
    white-space: nowrap;
    opacity: 0;
    overflow: hidden;
    -webkit-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
    z-index: 1;
  }

.basicForm .hint.active {
      opacity: 1;
      z-index: 4;
    }

table {
  font-size: 14px;
  font-size: .875rem;
  font-weight: 400;
}

.table-wrapper {
  overflow: auto;
  margin-top: 8px;
  margin-top: 0.5rem;
}

:root {
  --agentBubbleColor: #dadada;
  --agentBubbleTextColor: #000;
  --ameliaBubbleColor: #fff;
  --ameliaBubbleTextColor: #000;
  --avatarName: Amelia;
  --backgroundColor: #FFF;
  --btnColor: #4d5aff;
  --btnTxtColor: #FFFFFF;
  --bubbleMessage: #f00;
  --chatBgColor: null;
  --chatBackgroundImage: null;
  --domainTxtColor: #3a3a3a;
  --font: Roboto;
  --headerColor: #f7f7f7;
  --headerBackgroundImage: null;
  --micColor: #4d5aff;
  --name: Default Amelia Theme;
  --primary: #4d5aff;
  --primaryTextColor: #3a3a3a;
  --primaryTxtColor: peru;
  --secondary: #3a3a3a;
  --secondaryTextColor: #FFF;
  --secondaryTxtColor: slateblue;
  --tooltipColor: #4d5aff;
  --tooltipTxtColor: #FFFFFF;
  --userLogItemBackgroundColor: #3a3a3a;
  --userLogItemFontColor: #FFFFFF;
  --userAvatarBackgroundColor: #DDDDDD;
  --userAvatarFontColor: #FAFAFA;
}