/*hidden*/
/*Attachment modal buttons*/
/*Pre chat submit button, post chat survey submit button*/
/* VA options submit button, VA options confirm button*/
/*Global properties*/
/*background colours*/
/*border colours*/
/*brand colours*/
/*foreground colours*/
/*transparent colours*/
/*fonts*/
/*font sizes*/
/*border radius*/
/*Elemental properties*/
/* Primary action*/
/* Secondary action, and Alt Engagement */
/*Launch/maximize chat/VA */
/*Rounded header buttons*/
/*input choice*/
/*error colours*/
/* keyframes */
@keyframes eg-slide-in {
  0% {
    opacity: 0;
  }
  100% {
    width: 240px;
    opacity: 1;
  }
}
@keyframes eg-slide-out {
  0% {
    width: 240px;
    opacity: 1;
  }
  100% {
    width: 0px;
    opacity: 0;
  }
}
@keyframes eg-slide-down {
  0% {
    transform: translateY(-40px);
    opacity: 0;
    height: 0px;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
    height: 40px;
  }
}
@keyframes eg-slide-up {
  0% {
    transform: translateY(0);
    opacity: 1;
    height: 40px;
  }
  100% {
    transform: translateY(-40px);
    opacity: 0;
    height: 0px;
  }
}
@keyframes eg-menu-show {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes blink {
  /**
     * At the start of the animation the item
     * has an opacity of .2
     */
  0% {
    opacity: .2;
  }
  /**
     * At 20% the item is fully visible and
     * then fades out slowly
     */
  20% {
    opacity: 1;
  }
  /**
     * Until it reaches an opacity of .2 and
     * the animation can start again
     */
  100% {
    opacity: .2;
  }
}
/*
 * Override: Following will override the CSS definitions being applied by bootstrap
 */
/*
 * Mixins: Mixins for component definitions
 */
/*
 * Global level CSS definitions wrapped inside the selector class "eg-chat-body"
 */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.eg-chat-body {
  background-color: transparent;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  overflow: hidden;
  /*
     * PG New flex layout
     */
}
.eg-chat-body .eg-font-1 {
  font: normal normal normal 20px/1 egain-font;
  color: rgba(92, 92, 92, 0.8);
}
.eg-chat-body .eg-font-2 {
  font: normal normal normal 14px/1 egain-font;
  color: #000;
}
.eg-chat-body .eg-font-2.ass-aside-menu-icon {
  color: #000 !important;
}
.eg-chat-body .eg-small {
  font-size: 11px !important;
}
.eg-chat-body .eg-minimize-icon:before {
  content: '\E081';
}
.eg-chat-body .eg-close-icon:before {
  content: '\E083';
}
.eg-chat-body .eg-popout-icon:before {
  content: '\E082';
}
.eg-chat-body .eg-bars-icon:before {
  content: '\E080';
}
.eg-chat-body .nav > li > a,
.eg-chat-body .dropdown-menu > li > a,
.eg-chat-body a {
  color: inherit;
  text-decoration: none;
}
.eg-chat-body .nav > li > a:hover,
.eg-chat-body .dropdown-menu > li > a:hover,
.eg-chat-body a:hover,
.eg-chat-body .nav > li > a:focus,
.eg-chat-body .dropdown-menu > li > a:focus,
.eg-chat-body a:focus {
  background: transparent;
  color: inherit;
  text-decoration: none;
}
.eg-chat-body a:focus {
  text-decoration: none;
}
.eg-chat-body a:hover {
  text-decoration: none;
}
.eg-chat-body .eg-separation-bottom {
  margin-bottom: 5px;
}
.eg-chat-body .eg-separation-left {
  margin-left: 5px;
}
.eg-chat-body .eg-separation-top {
  margin-top: 5px;
}
.eg-chat-body .eg-separation-right {
  margin-right: 5px;
}
.eg-chat-body textarea {
  resize: none;
}
.eg-chat-body button:focus {
  border: 1px solid;
}
.eg-chat-body .img-responsive {
  max-height: 100%;
  width: auto;
}
.eg-chat-body #ngProgress-container #ngProgress {
  background-color: #000 !important;
  color: #000 !important;
  height: 1.5px !important;
  /* height: 1.5px is set to overcome the rounding off issues due to which
                                     the progress bar was not properly visible with 1px */
  box-shadow: none;
}
.eg-chat-body .modal-content {
  background-color: transparent;
  border: none;
  border-radius: 5px;
}
.eg-chat-body .eg-table-responsive {
  width: 100%;
  overflow-y: hidden;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  min-height: .01%;
  overflow-x: auto;
}
.eg-chat-body .eg-article-content {
  word-wrap: break-word;
}
.eg-chat-body .eg-article-content img {
  display: block;
  max-width: 100%;
  height: auto;
}
.eg-chat-body .eg-animated-item-container .eg-animated-item {
  /**
            * Use the blink animation, which is defined above
            */
  font-size: 60px;
  font-family: 'Arial Rounded MT Bold';
  animation-name: blink;
  /**
             * The animation should take 1.4 seconds
             */
  animation-duration: 1.4s;
  /**
             * It will repeat itself forever
             */
  animation-iteration-count: infinite;
  /**
             * This makes sure that the starting style (opacity: .2)
             * of the animation is applied before the animation starts.
             * Otherwise we would see a short flash or would have
             * to set the default styling of the items to the same
             * as the animation. Same applies for the ending styles.
             */
  animation-fill-mode: both;
}
.eg-chat-body .eg-animated-item-container .eg-animated-item.eg-animated-item-2 {
  /**
                 * Starts the animation of the second item
                 * with a delay of .2s, otherwise all items
                 * would animate at the same time
                 */
  animation-delay: .2s;
}
.eg-chat-body .eg-animated-item-container .eg-animated-item.eg-animated-item-3 {
  /**
                 * Starts the animation of the third item
                 * with a delay of .4s, otherwise all items
                 * would animate at the same time
                 */
  animation-delay: .4s;
}
.eg-chat-body .eg-clickable,
.eg-chat-body .eg-input-group-button {
  cursor: pointer;
}
.eg-chat-body .eg-progressbar-container {
  position: relative;
}
.eg-chat-body .eg-progressbar-container #ngProgress-container {
  z-index: 1000;
  /* Setting it to 1000 so that the attachment modal overlaps progress bar */
}
.eg-chat-body .eg-progress-spinner-container {
  background: #fff;
  height: 100%;
  position: absolute;
  left: 0;
  right: 0;
}
.eg-chat-body .eg-progress-spinner-container .eg-progress-spinner {
  position: absolute;
  left: 53%;
  top: 60%;
  margin: -75px 0 0 -25px;
  border: 2px solid #F0F2F3;
  border-radius: 50%;
  border-top-color: #000;
  border-left-color: #000;
  border-right-color: #000;
  height: 40px;
  width: 40px;
  -webkit-animation: spin .75s linear infinite;
  animation: spin .75s linear infinite;
}
.eg-chat-body .eg-button-flat {
  background: none;
  padding: 0;
  border: 1px solid transparent;
}
.eg-chat-body .eg-label {
  font-weight: 600;
}
.eg-chat-body .eg-highlighted-content {
  font-weight: bold;
}
.eg-chat-body .eg-form-control {
  font-size: 13px;
  box-shadow: none;
  padding-left: 5px;
  padding-right: 5px;
}
.eg-chat-body .eg-done-btn {
  display: none;
}
.eg-chat-body .eg-chat-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* Styles for eg-chat-overlay specific to desktop when maximized */
}
.eg-chat-body .eg-chat-overlay .eg-chat-window {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 10;
}
.eg-chat-body .eg-chat-overlay .eg-chat-window.eg-solution-displayed .eg-progressbar-container,
.eg-chat-body .eg-chat-overlay .eg-chat-window.eg-solution-displayed .eg-common-start-container,
.eg-chat-body .eg-chat-overlay .eg-chat-window.eg-solution-displayed .eg-page-start-container,
.eg-chat-body .eg-chat-overlay .eg-chat-window.eg-solution-displayed .eg-page-end-container,
.eg-chat-body .eg-chat-overlay .eg-chat-window.eg-solution-displayed .eg-common-end-container {
  display: none !important;
}
.eg-chat-body .eg-chat-overlay .eg-chat-window.eg-wait-message-displayed .eg-chat-main,
.eg-chat-body .eg-chat-overlay .eg-chat-window.eg-wait-message-displayed .eg-common-end-container {
  display: none !important;
}
.eg-chat-body .eg-chat-overlay .eg-chat-window .eg-chat-main {
  z-index: -1;
}
.eg-chat-body .eg-chat-overlay.eg-overlay-docked:not(.eg-overlay-xs) {
  padding: 15px;
  /*Padding is required for shadow*/
}
.eg-chat-body .eg-chat-overlay.eg-overlay-docked.eg-maximized .eg-chat-window {
  overflow: hidden;
  background-color: #fff;
}
.eg-chat-body .eg-chat-overlay.eg-overlay-docked.eg-maximized:not(.eg-overlay-xs) .eg-chat-window {
  border-radius: 5px;
}
.eg-chat-body .eg-chat-overlay.eg-overlay-docked.eg-maximized:not(.eg-overlay-xs) .eg-chat-window .modal-backdrop,
.eg-chat-body .eg-chat-overlay.eg-overlay-docked.eg-maximized:not(.eg-overlay-xs) .eg-chat-window .modal {
  right: 15px;
  top: 15px;
  left: 15px;
  bottom: 15px;
}
.eg-chat-body .eg-chat-overlay.eg-overlay-docked.eg-maximized:not(.eg-overlay-xs) .eg-chat-window .modal-backdrop {
  border-radius: 5px;
}
.eg-chat-body .eg-chat-overlay.eg-overlay-docked.eg-maximized:not(.eg-overlay-xs) .eg-chat-window.eg-maximized-window-shadow {
  box-shadow: 0px 5px 15px 1px rgba(0, 0, 0, 0.6);
}
.eg-chat-body .eg-chat-overlay.eg-overlay-docked.eg-minimized .eg-progressbar-container,
.eg-chat-body .eg-chat-overlay.eg-overlay-docked.eg-minimized .eg-component-repeat:not([class*="-maximize-"]),
.eg-chat-body .eg-chat-overlay.eg-overlay-docked.eg-minimized .eg-chat-component:not(.eg-chat-maximize-component) {
  display: none !important;
}
.eg-chat-body .eg-chat-overlay.eg-maximised-remove,
.eg-chat-body .eg-chat-overlay .eg-minimized-add {
  opacity: 0;
  transition: opacity 0.70s;
}
.eg-chat-body .eg-chat-content {
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  margin-bottom: 2px;
  margin-top: 2px;
  -webkit-overflow-scrolling: touch;
  /*
    * Following properties are added for Desktop and Mobile Firefox
    */
  scrollbar-width: thin;
  scrollbar-color: #D2D9DC #ffffff;
}
.eg-chat-body .eg-chat-content::-webkit-scrollbar-track {
  background-color: transparent;
}
.eg-chat-body .eg-chat-content::-webkit-scrollbar {
  width: 7px;
  background-color: #ffffff;
}
.eg-chat-body .eg-chat-content::-webkit-scrollbar-thumb {
  border: none;
  border-image-source: initial;
  border-image-slice: initial;
  border-image-width: initial;
  border-image-outset: initial;
  border-image-repeat: initial;
  background-clip: padding-box;
  height: 50px;
  border-radius: 5px;
  background-color: #D2D9DC !important;
}
.eg-chat-body .eg-ellipsis {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.eg-chat-body .eg-full-w-h {
  height: 100%;
  width: 100%;
}
.eg-chat-body .eg-chat-component {
  height: 100%;
  width: 100%;
  padding-left: 25px;
  padding-right: 25px;
}
.eg-chat-body .eg-chat-content .eg-chat-component {
  height: auto;
}
.eg-chat-body .eg-maximized .eg-chat-content .eg-chat-component {
  min-height: 100%;
}
.eg-chat-body .eg-position-box {
  position: relative;
}
.eg-chat-body .eg-position-box .eg-position-box-content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.eg-chat-body .eg-common-body {
  z-index: -2;
  position: relative;
}
.eg-chat-body .eg-common-layout,
.eg-chat-body .eg-common-body,
.eg-chat-body .eg-page-layout,
.eg-chat-body .eg-main-container {
  display: flex;
  flex-flow: column nowrap;
}
.eg-chat-body .eg-common-layout-item-flexible,
.eg-chat-body .eg-page-layout-item-flexible {
  flex: auto;
}
.eg-chat-body .eg-common-layout-item-flexible-proxy,
.eg-chat-body .eg-page-layout-item-flexible-proxy {
  flex: 0 0 0;
  margin-top: auto;
}
.eg-chat-body .eg-component-repeat {
  flex: auto;
  flex-shrink: 0;
}
.eg-chat-body .eg-component-no-grow {
  flex-grow: 0;
}
.eg-chat-body .eg-main-container .eg-chat-component {
  padding-top: 20px;
}
.eg-chat-body.rtl {
  direction: rtl;
  unicode-bidi: bidi-override;
}
/* Mobile Specific Styles START */
/* TODO: Needs to be cleaned */
@media only screen and (orientation: landscape) {
  .eg-overlay-xs.form-edit-wrapper .eg-common-header-container,
  .eg-overlay-xs.input-edit-wrapper .eg-common-header-container,
  .eg-overlay-xs.message-edit-wrapper .eg-common-header-container,
  .eg-overlay-xs.form-edit-wrapper .eg-common-start-container,
  .eg-overlay-xs.input-edit-wrapper .eg-common-start-container,
  .eg-overlay-xs.message-edit-wrapper .eg-common-start-container,
  .eg-overlay-xs.form-edit-wrapper .eg-common-layout-item-flexible-proxy,
  .eg-overlay-xs.input-edit-wrapper .eg-common-layout-item-flexible-proxy,
  .eg-overlay-xs.message-edit-wrapper .eg-common-layout-item-flexible-proxy,
  .eg-overlay-xs.form-edit-wrapper .eg-common-footer-container,
  .eg-overlay-xs.input-edit-wrapper .eg-common-footer-container,
  .eg-overlay-xs.message-edit-wrapper .eg-common-footer-container {
    display: none;
  }
  .eg-overlay-xs.form-edit-wrapper .eg-component-name-pre-chat-submit {
    display: none;
  }
  .eg-overlay-xs.input-edit-wrapper .eg-page-end-container {
    display: none;
  }
  .eg-overlay-xs.message-edit-wrapper {
    /*top : 0px;*/
  }
  .eg-overlay-xs.message-edit-wrapper #eg-chat-alternate-engagement-options,
  .eg-overlay-xs.message-edit-wrapper #eg-chat-status-bar {
    display: none;
  }
  .eg-overlay-xs.message-edit-wrapper .eg-chat-content,
  .eg-overlay-xs.message-edit-wrapper .eg-page-start-container,
  .eg-overlay-xs.message-edit-wrapper .eg-page-layout-item-flexible-proxy {
    display: none;
  }
  .eg-overlay-xs.message-edit-wrapper .eg-component-repeat:not([class*='-message-input']) {
    display: none;
  }
  .eg-overlay-xs .wait {
    margin-top: -50px;
  }
}
#egot_iframe {
  display: none;
}
/*
Styling for the abandoned-message component
Changes to this section will apply to the component found in:
components/abandoned-message/abandoned-message.html
*/
#eg-chat-abandoned-message {
  /* Fallback for browsers that do not support gradients */
  background-color: #fff;
  /* Standard syntax: Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image: linear-gradient(#fff, #fff);
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 5px;
  color: #000;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: normal;
  border: 0;
  box-shadow: none;
  text-align: center;
}
#eg-chat-abandoned-message .eg-link {
  color: #000;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: normal;
  background-color: transparent;
}
#eg-chat-abandoned-message .eg-heading-container {
  border: none;
  border-radius: 0;
  border-width: 1px 0px 1px 0px;
  padding: 0px;
  /* Fallback for browsers that do not support gradients */
  background-color: transparent;
  /* Standard syntax: Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image: linear-gradient(transparent, transparent);
  color: #000;
  padding: 10px 5px;
}
#eg-chat-abandoned-message .eg-heading-container .eg-heading {
  font-family: 'Source Sans Pro Regular', sans-serif;
  font-size: 13px;
  font-weight: normal;
  color: #000;
}
#eg-chat-abandoned-message .eg-heading-container .eg-heading {
  margin: 0;
  padding: 0;
}
#eg-chat-abandoned-message .eg-abandoned-image {
  background-repeat: no-repeat;
  background-position: center top;
  margin: auto;
}
#eg-chat-abandoned-message .eg-abandoned-text {
  margin-top: 10px;
}
/*
Styling for the alternate-contact-options component
Changes to this section will apply to the component found in:
components/alternate-contact-options/alternate-contact-options.html
*/
#eg-chat-alternate-contact-options {
  /* Fallback for browsers that do not support gradients */
  background-color: #fff;
  /* Standard syntax: Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image: linear-gradient(#fff, #fff);
  overflow: hidden;
}
#eg-chat-alternate-contact-options .list-group {
  margin-bottom: 0;
}
#eg-chat-alternate-contact-options .eg-heading-container {
  border: none;
  border-radius: 0;
  border-width: 1px 0px 1px 0px;
  padding: 0px;
  /* Fallback for browsers that do not support gradients */
  background-color: transparent;
  /* Standard syntax: Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image: linear-gradient(transparent, transparent);
  color: #000;
  padding: 10px 0;
}
#eg-chat-alternate-contact-options .eg-heading-container .eg-heading {
  font-family: 'Source Sans Pro Regular', sans-serif;
  font-size: 13px;
  font-weight: normal;
  color: #000;
}
#eg-chat-alternate-contact-options .eg-heading-container .eg-heading {
  margin: 0;
  padding: 0;
}
#eg-chat-alternate-contact-options .eg-item-container {
  border: none;
  border-radius: 0;
  border-width: 1px 0px 1px 0px;
  padding: 0px;
  color: #000;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: normal;
  background-color: transparent;
}
#eg-chat-alternate-contact-options .eg-item-container:hover {
  background-color: #bfbfbf;
  color: #000;
}
#eg-chat-alternate-contact-options .eg-item-container .eg-item {
  display: block;
  padding: 10px 5px;
}
#eg-chat-alternate-contact-options .list-group-item {
  border-top: none;
  border-bottom: 1px solid #999999;
}
#eg-chat-alternate-contact-options .list-group-item:first-child {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin-bottom: 0px;
}
#eg-chat-alternate-contact-options .list-group-item:last-child {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: none;
}
#eg-chat-alternate-contact-options .eg-list {
  border: 1px solid transparent;
}
#eg-chat-alternate-contact-options .fa {
  color: inherit;
}
#eg-chat-alternate-contact-options .eg-heading-container {
  padding-top: 0;
}
#eg-chat-alternate-contact-options li:focus {
  outline: 1px dotted !important;
  outline-offset: -2px;
}
#eg-chat-alternate-contact-options .eg-aco-img {
  max-width: 31px;
  max-height: 26px;
}
#eg-chat-alternate-contact-options.eg-external-alt-contact-options {
  padding: 0;
}
/* Mobile Specific Styles alternate-contact-options component START */
/* Mobile Specific Styles alternate-contact-options component END */
#eg-chat-alternate-eng-options-floating {
  /* Fallback for browsers that do not support gradients */
  background-color: #fff;
  /* Standard syntax: Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image: linear-gradient(#fff, #fff);
  overflow: hidden;
  border: 1px solid #999999;
  border-radius: 0px;
  border: 0;
}
#eg-chat-alternate-eng-options-floating .eg-heading-container {
  border: none;
  border-radius: 0;
  border-width: 1px 0px 1px 0px;
  padding: 0px;
  /* Fallback for browsers that do not support gradients */
  background-color: transparent;
  /* Standard syntax: Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image: linear-gradient(transparent, transparent);
  color: #000;
  padding: 0px 0px;
}
#eg-chat-alternate-eng-options-floating .eg-heading-container .eg-heading {
  font-family: 'Source Sans Pro Regular', sans-serif;
  font-size: 13px;
  font-weight: normal;
  color: #000;
}
#eg-chat-alternate-eng-options-floating .eg-heading-container .eg-heading {
  margin: 0;
  padding: 0;
}
#eg-chat-alternate-eng-options-floating .eg-text {
  color: #000;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: normal;
  background-color: transparent;
  font-weight: 600;
}
#eg-chat-alternate-eng-options-floating .eg-button-container {
  border: none;
  border-radius: 0;
  border-width: 1px 0px 1px 0px;
  padding: 0px;
  padding: 0px 0px;
  background-color: transparent;
  color: #000;
}
#eg-chat-alternate-eng-options-floating .eg-button-container .eg-button-1 {
  background-color: #fcc200;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
  border: 2px solid #fcc200;
  font-size: 13px;
}
#eg-chat-alternate-eng-options-floating .eg-button-container .eg-button-1:hover:not([disabled]) {
  background-color: #fcc200;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-alternate-eng-options-floating .eg-button-container .eg-button-1:not(.eg-input-group-button) {
  border-radius: 5px;
  padding: 10px 20px;
}
#eg-chat-alternate-eng-options-floating .eg-button-container .eg-button-1:focus:not([disabled]) {
  outline: 0;
  background-color: #fcc200;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-alternate-eng-options-floating .eg-button-container .eg-button-1[disabled] {
  cursor: none;
}
#eg-chat-alternate-eng-options-floating .eg-button-container .eg-button-2 {
  background-color: #fcc200;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
  border: 2px solid #fcc200;
  font-size: 13px;
}
#eg-chat-alternate-eng-options-floating .eg-button-container .eg-button-2:hover:not([disabled]) {
  background-color: #fcc200;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-alternate-eng-options-floating .eg-button-container .eg-button-2:not(.eg-input-group-button) {
  border-radius: 5px;
  padding: 10px 20px;
}
#eg-chat-alternate-eng-options-floating .eg-button-container .eg-button-2:focus:not([disabled]) {
  outline: 0;
  background-color: #fcc200;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-alternate-eng-options-floating .eg-button-container .eg-button-2[disabled] {
  cursor: none;
}
#eg-chat-alternate-eng-options-floating .eg-button-container .eg-button-3 {
  background-color: transparent;
  color: #fff;
  transition: background-color 0.2s, color 0.2s;
  border: 2px solid transparent;
  font-size: 13px;
}
#eg-chat-alternate-eng-options-floating .eg-button-container .eg-button-3:hover:not([disabled]) {
  background-color: #000;
  color: #fff;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-alternate-eng-options-floating .eg-button-container .eg-button-3:not(.eg-input-group-button) {
  border-radius: 5px;
  padding: 10px 20px;
}
#eg-chat-alternate-eng-options-floating .eg-button-container .eg-button-3:focus:not([disabled]) {
  outline: 0;
  background-color: #000;
  color: #fff;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-alternate-eng-options-floating .eg-button-container .eg-button-3[disabled] {
  cursor: none;
}
#eg-chat-alternate-eng-options-floating .eg-button-container .eg-button-3 {
  background-color: #fcc200;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
  border: 2px solid #fcc200;
  font-size: 13px;
}
#eg-chat-alternate-eng-options-floating .eg-button-container .eg-button-3:hover:not([disabled]) {
  background-color: #fcc200;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-alternate-eng-options-floating .eg-button-container .eg-button-3:not(.eg-input-group-button) {
  border-radius: 5px;
  padding: 10px 20px;
}
#eg-chat-alternate-eng-options-floating .eg-button-container .eg-button-3:focus:not([disabled]) {
  outline: 0;
  background-color: #fcc200;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-alternate-eng-options-floating .eg-button-container .eg-button-3[disabled] {
  cursor: none;
}
#eg-chat-alternate-eng-options-floating .eg-alternate-eng-options-floated {
  position: fixed;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: -40px;
  padding-left: 15px;
  padding-right: 15px;
}
#eg-chat-alternate-eng-options-floating .eg-alternate-eng-options-floated .eg-container {
  display: flex;
  flex-direction: column;
  width: 85%;
  background: #fff;
  box-shadow: 0 5px 7px rgba(0, 0, 0, 0.4);
  border-radius: 6px;
  padding: 20px;
  border: 1px solid #e8e8e8;
}
#eg-chat-alternate-eng-options-floating .eg-alternate-eng-options-floated .eg-container.eg-details-collapsed .eg-container-head {
  border-radius: 6px;
}
#eg-chat-alternate-eng-options-floating .eg-alternate-eng-options-floated .eg-container:not(.eg-details-collapsed) .eg-container-head {
  border-radius: 6px 6px 0 0;
}
#eg-chat-alternate-eng-options-floating .eg-alternate-eng-options-floated .eg-container .eg-container-head {
  display: flex;
  justify-content: space-between;
  margin-right: -5px;
}
#eg-chat-alternate-eng-options-floating .eg-alternate-eng-options-floated .eg-container .eg-container-head .eg-angle-up .eg-details-toggle {
  transform: rotate(180deg);
}
#eg-chat-alternate-eng-options-floating .eg-alternate-eng-options-floated .eg-container .eg-container-head .eg-icons {
  display: flex;
  justify-content: flex-end;
  margin-left: 5px;
}
#eg-chat-alternate-eng-options-floating .eg-alternate-eng-options-floated .eg-container .eg-container-head .eg-icons .eg-aes-btn-image {
  width: 12px;
}
#eg-chat-alternate-eng-options-floating .eg-alternate-eng-options-floated .eg-container .eg-container-head .eg-icons .eg-icon-box {
  width: 21px;
  height: 21px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #F0F2F3;
  transition: background-color 0.2s;
}
#eg-chat-alternate-eng-options-floating .eg-alternate-eng-options-floated .eg-container .eg-container-head .eg-icons .eg-icon-box:hover,
#eg-chat-alternate-eng-options-floating .eg-alternate-eng-options-floated .eg-container .eg-container-head .eg-icons .eg-icon-box:focus {
  background-color: #d4d9dc;
  transition: background-color 0.2s;
  outline: none;
}
#eg-chat-alternate-eng-options-floating .eg-alternate-eng-options-floated .eg-container .eg-container-body .alt-eng-msg {
  padding-top: 15px;
}
#eg-chat-alternate-eng-options-floating .eg-alternate-eng-options-floated .eg-container .eg-container-body .alt-eng-links {
  padding-top: 15px;
}
#eg-chat-alternate-eng-options-floating .eg-alternate-eng-options-floated .eg-container .eg-container-body .alt-eng-links .eg-button-container {
  display: flex;
  flex-wrap: wrap;
}
#eg-chat-alternate-eng-options-floating .eg-alternate-eng-options-floated .eg-container .eg-container-body .alt-eng-links .eg-button-container .eg-button {
  flex: 1;
  margin-right: 10px;
  margin-top: 5px;
}
#eg-chat-alternate-eng-options-floating .eg-alternate-eng-options-floated .eg-container .eg-container-body .alt-eng-links .eg-button-container .eg-button:last-child {
  margin-right: 0px;
}
#eg-chat-alternate-eng-options-floating .eg-collapsible {
  overflow-y: hidden;
  transition: max-height 0.5s ease;
}
#eg-chat-alternate-eng-options-floating .eg-collapsible.eg-collapsible-shown {
  /*
             * //TB/: Replaced the following formula:
             * height: @eg__alt_eng_options__height__1 - @eg__alt_eng_options__height__1__collapsed;
             */
  max-height: 300px;
}
#eg-chat-alternate-eng-options-floating .eg-collapsible.eg-collapsible-hidden {
  max-height: 0px;
}
#eg-chat-alternate-eng-options-floating .eg-collapsible.eg-collapsible-hidden:not(.ng-animate) {
  display: none;
}
#eg-chat-alternate-eng-options-floating .eg-alt-eng-no-iframe {
  margin-left: -25px;
}
#eg-chat-alternate-eng-options-floating .eg-container {
  z-index: 10;
}
#eg-chat-alternate-eng-options-floating .eg-container .eg-icons-ie {
  flex-shrink: 0;
}
#eg-chat-alternate-eng-options-floating .rightNone {
  right: 0;
}
#eg-chat-alternate-eng-options-floating .eg-aes-btns-row {
  flex-direction: row;
}
#eg-chat-alternate-eng-options-floating .eg-aes-btns-column {
  flex-direction: column;
}
#eg-chat-alternate-eng-options-floating .eg-aes-btns-column .eg-button {
  max-width: 100%;
  margin-right: 0 !important;
}
#eg-chat-alternate-eng-options-floating .eg-aes-btns-column.eg-buttons-ie .eg-button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px 20px;
}
/*
Styling for the alternate-engagement-options component
Changes to this section will apply to the component found in:
components/alternate-engagement-options/alternate-engagement-options.html
*/
#eg-chat-alternate-engagement-options {
  /* Fallback for browsers that do not support gradients */
  background-color: #fff;
  /* Standard syntax: Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image: linear-gradient(#fff, #fff);
  overflow: hidden;
  border: 1px solid #999999;
  border-radius: 0px;
  border-width: 0px;
  max-height: 300px;
  padding: 0;
}
#eg-chat-alternate-engagement-options .eg-heading-container {
  border: none;
  border-radius: 0;
  border-width: 1px 0px 1px 0px;
  padding: 0px;
  /* Fallback for browsers that do not support gradients */
  background-color: transparent;
  /* Standard syntax: Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image: linear-gradient(transparent, transparent);
  color: #000;
  padding: 15px 15px;
}
#eg-chat-alternate-engagement-options .eg-heading-container .eg-heading {
  font-family: 'Source Sans Pro Regular', sans-serif;
  font-size: 13px;
  font-weight: normal;
  color: #000;
}
#eg-chat-alternate-engagement-options .eg-heading-container .eg-heading {
  margin: 0;
  padding: 0;
}
#eg-chat-alternate-engagement-options .eg-text {
  color: #000;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: normal;
  background-color: transparent;
  padding: 0px 15px;
}
#eg-chat-alternate-engagement-options .eg-button-container {
  border: none;
  border-radius: 0;
  border-width: 1px 0px 1px 0px;
  padding: 0px;
  padding: 0px 0px;
  background-color: transparent;
  color: #000;
}
#eg-chat-alternate-engagement-options .eg-button-container .eg-button-1 {
  background-color: #fff;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
  border: 2px solid #000;
  font-size: 13px;
}
#eg-chat-alternate-engagement-options .eg-button-container .eg-button-1:hover:not([disabled]) {
  background-color: #e6e6e6;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-alternate-engagement-options .eg-button-container .eg-button-1:not(.eg-input-group-button) {
  border-radius: 5px;
  padding: 10px 20px;
}
#eg-chat-alternate-engagement-options .eg-button-container .eg-button-1:focus:not([disabled]) {
  outline: 0;
  background-color: #e6e6e6;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-alternate-engagement-options .eg-button-container .eg-button-1[disabled] {
  cursor: none;
}
#eg-chat-alternate-engagement-options .eg-button-container .eg-button-2 {
  background-color: #fff;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
  border: 2px solid #000;
  font-size: 13px;
}
#eg-chat-alternate-engagement-options .eg-button-container .eg-button-2:hover:not([disabled]) {
  background-color: #e6e6e6;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-alternate-engagement-options .eg-button-container .eg-button-2:not(.eg-input-group-button) {
  border-radius: 5px;
  padding: 10px 20px;
}
#eg-chat-alternate-engagement-options .eg-button-container .eg-button-2:focus:not([disabled]) {
  outline: 0;
  background-color: #e6e6e6;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-alternate-engagement-options .eg-button-container .eg-button-2[disabled] {
  cursor: none;
}
#eg-chat-alternate-engagement-options .eg-button-container .eg-button-3 {
  background-color: transparent;
  color: #fff;
  transition: background-color 0.2s, color 0.2s;
  border: 2px solid transparent;
  font-size: 13px;
}
#eg-chat-alternate-engagement-options .eg-button-container .eg-button-3:hover:not([disabled]) {
  background-color: #000;
  color: #fff;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-alternate-engagement-options .eg-button-container .eg-button-3:not(.eg-input-group-button) {
  border-radius: 5px;
  padding: 10px 20px;
}
#eg-chat-alternate-engagement-options .eg-button-container .eg-button-3:focus:not([disabled]) {
  outline: 0;
  background-color: #000;
  color: #fff;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-alternate-engagement-options .eg-button-container .eg-button-3[disabled] {
  cursor: none;
}
#eg-chat-alternate-engagement-options .eg-button-container .eg-button-3 {
  background-color: #fff;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
  border: 2px solid #000;
  font-size: 13px;
}
#eg-chat-alternate-engagement-options .eg-button-container .eg-button-3:hover:not([disabled]) {
  background-color: #e6e6e6;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-alternate-engagement-options .eg-button-container .eg-button-3:not(.eg-input-group-button) {
  border-radius: 5px;
  padding: 10px 20px;
}
#eg-chat-alternate-engagement-options .eg-button-container .eg-button-3:focus:not([disabled]) {
  outline: 0;
  background-color: #e6e6e6;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-alternate-engagement-options .eg-button-container .eg-button-3[disabled] {
  cursor: none;
}
#eg-chat-alternate-engagement-options .eg-text {
  overflow-y: auto;
  height: 36px;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#eg-chat-alternate-engagement-options .eg-text .eg-alt-eng-msg {
  max-height: 36px;
}
#eg-chat-alternate-engagement-options .eg-heading-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px;
}
#eg-chat-alternate-engagement-options .eg-heading {
  flex: auto;
}
#eg-chat-alternate-engagement-options .eg-button-container {
  padding: 10px;
  display: flex;
  justify-content: center;
}
#eg-chat-alternate-engagement-options .eg-button-container .eg-button-group {
  padding: 0px 5px;
  flex: 1;
}
#eg-chat-alternate-engagement-options .eg-collapsible {
  overflow-y: hidden;
  transition: all .5s ease;
}
#eg-chat-alternate-engagement-options .eg-collapsible.eg-collapsible-shown {
  /*
             * //TB/: Replaced the following formula:
             * height: @eg__alt_eng_options__height__1 - @eg__alt_eng_options__height__1__collapsed;
             */
  height: calc(135px - 30px - 1px);
}
#eg-chat-alternate-engagement-options .eg-collapsible.eg-collapsible-hidden {
  height: 0px;
}
#eg-chat-alternate-engagement-options .eg-collapsible.eg-collapsible-hidden:not(.ng-animate) {
  display: none;
}
#eg-chat-alternate-engagement-options.eg-border {
  border-top: 1px solid #999999;
}
#eg-chat-alternate-engagement-options .eg-aes-img {
  max-width: 24px;
  max-height: 24px;
  display: inline-block;
}
/* Mobile Specific Styles alternate-engagement-options component START */
.eg-overlay-xs #eg-chat-alternate-engagement-options {
  max-height: 135px;
}
.eg-overlay-xs #eg-chat-alternate-engagement-options .eg-text {
  max-height: 35px;
}
/* Mobile Specific Styles alternate-engagement-options component END */
/*
Styling for the announcement-message component
Changes to this section will apply to the component found in:
components/announcement-message/announcement-message.html
*/
#eg-chat-announcement-message {
  /* Fallback for browsers that do not support gradients */
  background-color: #fff;
  /* Standard syntax: Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image: linear-gradient(#fff, #fff);
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 5px;
  color: #000;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: normal;
  text-align: center;
  padding: 10px 10px;
}
#eg-chat-announcement-message .eg-link {
  color: #000;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: normal;
  background-color: transparent;
}
#eg-chat-announcement-message .eg-heading-container {
  border: none;
  border-radius: 0;
  border-width: 1px 0px 1px 0px;
  padding: 0px;
  /* Fallback for browsers that do not support gradients */
  background-color: transparent;
  /* Standard syntax: Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image: linear-gradient(transparent, transparent);
  color: #000;
  padding: 10px 5px;
}
#eg-chat-announcement-message .eg-heading-container .eg-heading {
  font-family: 'Source Sans Pro Regular', sans-serif;
  font-size: 13px;
  font-weight: normal;
  color: #000;
}
#eg-chat-announcement-message .eg-heading-container .eg-heading {
  margin: 0;
  padding: 0;
}
/* Mobile Specific Styles announcement-message component START */
/* Mobile Specific Styles announcement-message component END */
/*
Styling for the article-content component
Changes to this section will apply to the component found in:
components/article-content/article-content.html
*/
#eg-chat-article-content {
  /* Fallback for browsers that do not support gradients */
  /* Standard syntax: Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image: linear-gradient(#fff, #fff);
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 0;
  color: #000;
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  font-weight: normal;
  background-color: #fff;
}
#eg-chat-article-content .eg-heading-container {
  border: none;
  border-radius: 0;
  border-width: 1px 0px 1px 0px;
  padding: 0px;
  /* Fallback for browsers that do not support gradients */
  background-color: transparent;
  /* Standard syntax: Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image: linear-gradient(transparent, transparent);
  color: #000;
  padding: 10px 5px;
}
#eg-chat-article-content .eg-heading-container .eg-heading {
  font-family: 'Source Sans Pro Regular', sans-serif;
  font-size: 20px;
  font-weight: normal;
  color: #000;
}
#eg-chat-article-content .eg-heading-container .eg-heading {
  margin: 0;
  padding: 0;
}
#eg-chat-article-content .eg-button-container .eg-button-back {
  border-color: #fcc200;
  border-radius: 5px;
  background: #fcc200;
  color: #000;
  padding: 3px 10px;
}
#eg-chat-article-content .eg-button-container .eg-button-back:hover,
#eg-chat-article-content .eg-button-container .eg-button-back:focus {
  background: #fcc200;
  color: #000;
  outline: none;
}
#eg-chat-article-content a {
  color: #000;
  text-decoration: underline;
}
#eg-chat-article-content a:hover {
  color: #000;
}
#eg-chat-article-content .nav-tabs {
  border-color: transparent;
}
#eg-chat-article-content .eg-article-content {
  padding: 0px 5px;
}
#eg-chat-article-content .fa {
  color: inherit;
}
/* Mobile Specific Styles article-content component START */
/* Mobile Specific Styles article-content component END */
#eg-chat-attachment-modal {
  /* Fallback for browsers that do not support gradients */
  background-color: #fff;
  /* Standard syntax: Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image: linear-gradient(#fff, #fff);
  overflow: hidden;
  border: 0 solid transparent;
  border-radius: 5px;
  padding: 20px;
  margin-top: 100px;
}
#eg-chat-attachment-modal .eg-heading-container {
  border: none;
  border-radius: 0;
  border-width: 1px 0px 1px 0px;
  padding: 0px;
  /* Fallback for browsers that do not support gradients */
  background-color: transparent;
  /* Standard syntax: Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image: linear-gradient(transparent, transparent);
  color: #000;
  padding: 0 0;
}
#eg-chat-attachment-modal .eg-heading-container .eg-heading {
  font-family: 'Source Sans Pro Regular', sans-serif;
  font-size: 20px;
  font-weight: normal;
  color: #000;
}
#eg-chat-attachment-modal .eg-heading-container .eg-heading {
  margin: 0;
  padding: 0;
}
#eg-chat-attachment-modal .eg-form-group {
  display: flex;
}
#eg-chat-attachment-modal .eg-form-group label:not(.eg-not-label) {
  flex-grow: 2;
  border-bottom: 1px solid #000;
  padding-bottom: 14px;
  margin-right: 10px;
  padding-top: 10px;
}
#eg-chat-attachment-modal .eg-form-group label:not(.eg-not-label),
#eg-chat-attachment-modal .eg-form-group .eg-label {
  color: #000;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: normal;
  background-color: transparent;
}
#eg-chat-attachment-modal .eg-item-container {
  color: #000;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: normal;
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid #999999;
}
#eg-chat-attachment-modal .eg-item-container:hover {
  background-color: transparent;
  color: #000;
}
#eg-chat-attachment-modal .eg-error {
  color: #d50000;
  margin-bottom: 0;
  opacity: 1;
  transition: opacity 0.5s;
}
#eg-chat-attachment-modal .eg-error.ng-hide {
  opacity: 0;
  transition: opacity 0.5s;
}
#eg-chat-attachment-modal .eg-button-container {
  border: none;
  border-radius: 0;
  border-width: 1px 0px 1px 0px;
  padding: 0px;
  padding: 0 0;
  background-color: transparent;
  color: inherit;
}
#eg-chat-attachment-modal .eg-button-1 {
  background-color: #fcc200;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
  border: 2px solid #fcc200;
  font-size: 13px;
}
#eg-chat-attachment-modal .eg-button-1:hover:not([disabled]) {
  background-color: #fcc200;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-attachment-modal .eg-button-1:not(.eg-input-group-button) {
  border-radius: 5px;
  padding: 10px 20px;
}
#eg-chat-attachment-modal .eg-button-1:focus:not([disabled]) {
  outline: 0;
  background-color: #fcc200;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-attachment-modal .eg-button-1[disabled] {
  cursor: none;
}
#eg-chat-attachment-modal .eg-button-2 {
  background-color: #fff;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
  border: 2px solid #000;
  font-size: 13px;
}
#eg-chat-attachment-modal .eg-button-2:hover:not([disabled]) {
  background-color: #000;
  color: #fff;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-attachment-modal .eg-button-2:not(.eg-input-group-button) {
  border-radius: 5px;
  padding: 10px 20px;
}
#eg-chat-attachment-modal .eg-button-2:focus:not([disabled]) {
  outline: 0;
  background-color: #000;
  color: #fff;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-attachment-modal .eg-button-2[disabled] {
  cursor: none;
}
#eg-chat-attachment-modal .eg-button-3 {
  background-color: transparent;
  color: #fff;
  transition: background-color 0.2s, color 0.2s;
  border: 2px solid transparent;
  font-size: 13px;
}
#eg-chat-attachment-modal .eg-button-3:hover:not([disabled]) {
  background-color: #000;
  color: #fff;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-attachment-modal .eg-button-3:not(.eg-input-group-button) {
  border-radius: 5px;
  padding: 10px 20px;
}
#eg-chat-attachment-modal .eg-button-3:focus:not([disabled]) {
  outline: 0;
  background-color: #000;
  color: #fff;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-attachment-modal .eg-button-3[disabled] {
  cursor: none;
}
#eg-chat-attachment-modal .eg-file-info-ie {
  flex-basis: 0% !important;
}
#eg-chat-attachment-modal .eg-heading-container {
  display: flex;
  padding-bottom: 10px;
}
#eg-chat-attachment-modal .eg-heading-container .eg-heading {
  flex: auto;
}
#eg-chat-attachment-modal .eg-heading-container .eg-heading:focus {
  outline: 1px dotted !important;
}
#eg-chat-attachment-modal .eg-heading-container .eg-close-button {
  width: 20px;
  border-radius: 50%;
  height: 20px;
  background-color: #F0F2F3;
}
#eg-chat-attachment-modal .eg-heading-container .eg-close-button img {
  height: 10px;
  width: 10px;
  margin-bottom: 1px;
}
#eg-chat-attachment-modal .eg-item-container {
  display: flex;
  padding-left: 1px;
  padding-right: 1px;
  border-radius: 0;
  border: none;
  justify-content: space-between;
}
#eg-chat-attachment-modal .eg-item-container .eg-file-info {
  flex: auto;
  word-wrap: break-word;
}
#eg-chat-attachment-modal .eg-item-container .eg-file-info:focus {
  outline: 1px dotted !important;
  outline-offset: -1px;
}
#eg-chat-attachment-modal .eg-item-container .eg-delete {
  border: 0;
  background: 0;
  display: flex;
  padding-top: 2px;
  padding-bottom: 2px;
}
#eg-chat-attachment-modal .eg-button-upload-button-container {
  position: relative;
  display: inline-block;
}
#eg-chat-attachment-modal .eg-button-upload {
  display: none;
}
#eg-chat-attachment-modal .eg-list {
  -webkit-overflow-scrolling: touch;
  /*
    * Following properties are added for Desktop and Mobile Firefox
    */
  scrollbar-width: thin;
  scrollbar-color: #D2D9DC #ffffff;
  overflow-y: auto;
  min-height: 100px;
  max-height: 200px;
}
#eg-chat-attachment-modal .eg-list::-webkit-scrollbar-track {
  background-color: transparent;
}
#eg-chat-attachment-modal .eg-list::-webkit-scrollbar {
  width: 7px;
  background-color: #ffffff;
}
#eg-chat-attachment-modal .eg-list::-webkit-scrollbar-thumb {
  border: none;
  border-image-source: initial;
  border-image-slice: initial;
  border-image-width: initial;
  border-image-outset: initial;
  border-image-repeat: initial;
  background-clip: padding-box;
  height: 50px;
  border-radius: 5px;
  background-color: #D2D9DC !important;
}
#eg-chat-attachment-modal .eg-error-container {
  margin-bottom: 20px;
}
#eg-chat-attachment-modal .eg-error:focus {
  outline: 1px dotted !important;
  outline-offset: -1px;
}
#eg-chat-attachment-modal .eg-attachment-img {
  width: 14px;
  height: 14px;
  display: inline-block;
}
#eg-chat-attachment-modal .eg-browse-file label {
  cursor: pointer;
}
/*
Styling for the branding component
Changes to this section will apply to the component found in:
components/branding/branding.html
*/
#eg-branding {
  /* Fallback for browsers that do not support gradients */
  background-color: #fff;
  /* Standard syntax: Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image: linear-gradient(#fff, #fff);
  overflow: hidden;
  border: 0 solid transparent;
  border-radius: 0;
  color: #000;
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  font-weight: normal;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-top: 10px;
  padding-bottom: 5px;
  flex-direction: row;
}
#eg-branding .eg-link {
  color: #000;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: normal;
  background-color: transparent;
}
#eg-branding .eg-heading-container {
  border: none;
  border-radius: 0;
  border-width: 1px 0px 1px 0px;
  padding: 0px;
  /* Fallback for browsers that do not support gradients */
  background-color: transparent;
  /* Standard syntax: Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image: linear-gradient(transparent, transparent);
  color: #000;
  padding: 10px 5px;
}
#eg-branding .eg-heading-container .eg-heading {
  font-family: 'Source Sans Pro Regular', sans-serif;
  font-size: 13px;
  font-weight: normal;
  color: #000;
}
#eg-branding .eg-heading-container .eg-heading {
  margin: 0;
  padding: 0;
}
#eg-branding .eg-branding-container {
  padding: 5px 0;
  color: #999999;
  margin: 0;
  width: 100%;
}
#eg-branding .eg-feedback {
  cursor: pointer;
}
.eg-component-repeat.eg-component-name-branding {
  flex-grow: 0;
}
/*
Styling for the chat-unavailable-message component
Changes to this section will apply to the component found in:
components/chat-unavailable-message/chat-unavailable-message.html
*/
#eg-chat-chat-unavailable-message {
  /* Fallback for browsers that do not support gradients */
  background-color: #fff;
  /* Standard syntax: Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image: linear-gradient(#fff, #fff);
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 5px;
  color: #000;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: normal;
  text-align: center;
}
#eg-chat-chat-unavailable-message .eg-link {
  color: #000;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: normal;
  background-color: transparent;
}
#eg-chat-chat-unavailable-message .eg-heading-container {
  border: none;
  border-radius: 0;
  border-width: 1px 0px 1px 0px;
  padding: 0px;
  /* Fallback for browsers that do not support gradients */
  background-color: transparent;
  /* Standard syntax: Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image: linear-gradient(transparent, transparent);
  color: #000;
  padding: 10px 5px;
}
#eg-chat-chat-unavailable-message .eg-heading-container .eg-heading {
  font-family: 'Source Sans Pro Regular', sans-serif;
  font-size: 13px;
  font-weight: normal;
  color: #000;
}
#eg-chat-chat-unavailable-message .eg-heading-container .eg-heading {
  margin: 0;
  padding: 0;
}
/* Mobile Specific Styles chat-unavailable-message component START */
/* Mobile Specific Styles chat-unavailable-message component END */
#eg-chat-close-modal {
  /* Fallback for browsers that do not support gradients */
  background-color: #fff;
  /* Standard syntax: Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image: linear-gradient(#fff, #fff);
  overflow: hidden;
  border: 0 solid transparent;
  border-radius: 5px;
  padding: 20px;
  margin-top: 100px;
}
#eg-chat-close-modal .eg-heading-container {
  border: none;
  border-radius: 0;
  border-width: 1px 0px 1px 0px;
  padding: 0px;
  /* Fallback for browsers that do not support gradients */
  background-color: transparent;
  /* Standard syntax: Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image: linear-gradient(transparent, transparent);
  color: #000;
  padding: 0 0;
  display: flex;
  padding-bottom: 10px;
}
#eg-chat-close-modal .eg-heading-container .eg-heading {
  font-family: 'Source Sans Pro Regular', sans-serif;
  font-size: 20px;
  font-weight: normal;
  color: #000;
}
#eg-chat-close-modal .eg-heading-container .eg-heading {
  margin: 0;
  padding: 0;
}
#eg-chat-close-modal .eg-heading-container .eg-heading {
  flex: auto;
}
#eg-chat-close-modal .eg-heading-container .eg-heading:focus {
  outline: 1px dotted !important;
}
#eg-chat-close-modal .eg-heading-container .eg-close-button {
  width: 20px;
  border-radius: 50%;
  height: 20px;
  background-color: #F0F2F3;
}
#eg-chat-close-modal .eg-heading-container .eg-close-button img {
  height: 10px;
  width: 10px;
  margin-bottom: 1px;
}
#eg-chat-close-modal .eg-button-container {
  border: none;
  border-radius: 0;
  border-width: 1px 0px 1px 0px;
  padding: 0px;
  padding: 0 0;
  background-color: transparent;
  color: inherit;
}
#eg-chat-close-modal .eg-message-container {
  color: #000;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: normal;
  padding-bottom: 15px;
}
#eg-chat-close-modal .eg-button-1 {
  background-color: #fcc200;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
  border: 2px solid #fcc200;
  font-size: 13px;
}
#eg-chat-close-modal .eg-button-1:hover:not([disabled]) {
  background-color: #fcc200;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-close-modal .eg-button-1:not(.eg-input-group-button) {
  border-radius: 5px;
  padding: 10px 20px;
}
#eg-chat-close-modal .eg-button-1:focus:not([disabled]) {
  outline: 0;
  background-color: #fcc200;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-close-modal .eg-button-1[disabled] {
  cursor: none;
}
#eg-chat-close-modal .eg-button-2 {
  background-color: #fff;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
  border: 2px solid #000;
  font-size: 13px;
}
#eg-chat-close-modal .eg-button-2:hover:not([disabled]) {
  background-color: #000;
  color: #fff;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-close-modal .eg-button-2:not(.eg-input-group-button) {
  border-radius: 5px;
  padding: 10px 20px;
}
#eg-chat-close-modal .eg-button-2:focus:not([disabled]) {
  outline: 0;
  background-color: #000;
  color: #fff;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-close-modal .eg-button-2[disabled] {
  cursor: none;
}
#eg-chat-close-modal .eg-button-3 {
  background-color: transparent;
  color: #fff;
  transition: background-color 0.2s, color 0.2s;
  border: 2px solid transparent;
  font-size: 13px;
}
#eg-chat-close-modal .eg-button-3:hover:not([disabled]) {
  background-color: #000;
  color: #fff;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-close-modal .eg-button-3:not(.eg-input-group-button) {
  border-radius: 5px;
  padding: 10px 20px;
}
#eg-chat-close-modal .eg-button-3:focus:not([disabled]) {
  outline: 0;
  background-color: #000;
  color: #fff;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-close-modal .eg-button-3[disabled] {
  cursor: none;
}
/*
Styling for the deflectin submit component
Changes to this section will apply to the component found in:
components/deflectin-submit/deflectin-submit.html
*/
#eg-chat-deflection-submit {
  /* Fallback for browsers that do not support gradients */
  background-color: #fff;
  /* Standard syntax: Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image: linear-gradient(#fff, #fff);
  overflow: hidden;
  border: 0px solid #999999;
  border-radius: 0px;
  border-top: 1px solid #999999;
  padding-top: 17px;
  padding-bottom: 10px;
}
#eg-chat-deflection-submit .eg-heading-container {
  border: none;
  border-radius: 0;
  border-width: 1px 0px 1px 0px;
  padding: 0px;
  /* Fallback for browsers that do not support gradients */
  background-color: transparent;
  /* Standard syntax: Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image: linear-gradient(transparent, transparent);
  color: #000;
  padding: 10px 5px;
}
#eg-chat-deflection-submit .eg-heading-container .eg-heading {
  font-family: 'Source Sans Pro Regular', sans-serif;
  font-size: 13px;
  font-weight: normal;
  color: #000;
}
#eg-chat-deflection-submit .eg-heading-container .eg-heading {
  margin: 0;
  padding: 0;
}
#eg-chat-deflection-submit .eg-text {
  color: #000;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: normal;
  background-color: transparent;
  padding: 0px 0px;
}
#eg-chat-deflection-submit .eg-button-container {
  border: none;
  border-radius: 0;
  border-width: 1px 0px 1px 0px;
  padding: 0px;
  padding: 0px 0px;
  background-color: transparent;
  color: #000;
}
#eg-chat-deflection-submit .eg-button-container .eg-button-1 {
  background-color: #fff;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
  border: 2px solid #000;
  font-size: 13px;
}
#eg-chat-deflection-submit .eg-button-container .eg-button-1:hover:not([disabled]) {
  background-color: #000;
  color: #fff;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-deflection-submit .eg-button-container .eg-button-1:not(.eg-input-group-button) {
  border-radius: 5px;
  padding: 10px 20px;
}
#eg-chat-deflection-submit .eg-button-container .eg-button-1:focus:not([disabled]) {
  outline: 0;
  background-color: #000;
  color: #fff;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-deflection-submit .eg-button-container .eg-button-1[disabled] {
  cursor: none;
}
#eg-chat-deflection-submit .eg-button-container .eg-button-2 {
  background-color: #fcc200;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
  border: 2px solid #fcc200;
  font-size: 13px;
}
#eg-chat-deflection-submit .eg-button-container .eg-button-2:hover:not([disabled]) {
  background-color: #fcc200;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-deflection-submit .eg-button-container .eg-button-2:not(.eg-input-group-button) {
  border-radius: 5px;
  padding: 10px 20px;
}
#eg-chat-deflection-submit .eg-button-container .eg-button-2:focus:not([disabled]) {
  outline: 0;
  background-color: #fcc200;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-deflection-submit .eg-button-container .eg-button-2[disabled] {
  cursor: none;
}
#eg-chat-deflection-submit .eg-button-container .eg-button-3 {
  background-color: transparent;
  color: #fff;
  transition: background-color 0.2s, color 0.2s;
  border: 2px solid transparent;
  font-size: 13px;
}
#eg-chat-deflection-submit .eg-button-container .eg-button-3:hover:not([disabled]) {
  background-color: #000;
  color: #fff;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-deflection-submit .eg-button-container .eg-button-3:not(.eg-input-group-button) {
  border-radius: 5px;
  padding: 10px 20px;
}
#eg-chat-deflection-submit .eg-button-container .eg-button-3:focus:not([disabled]) {
  outline: 0;
  background-color: #000;
  color: #fff;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-deflection-submit .eg-button-container .eg-button-3[disabled] {
  cursor: none;
}
#eg-chat-deflection-submit .eg-button-container .eg-button-3 {
  background-color: #fcc200;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
  border: 2px solid #fcc200;
  font-size: 13px;
}
#eg-chat-deflection-submit .eg-button-container .eg-button-3:hover:not([disabled]) {
  background-color: #fcc200;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-deflection-submit .eg-button-container .eg-button-3:not(.eg-input-group-button) {
  border-radius: 5px;
  padding: 10px 20px;
}
#eg-chat-deflection-submit .eg-button-container .eg-button-3:focus:not([disabled]) {
  outline: 0;
  background-color: #fcc200;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-deflection-submit .eg-button-container .eg-button-3[disabled] {
  cursor: none;
}
#eg-chat-deflection-submit .eg-text {
  margin-bottom: 10px;
  max-height: 37px;
  overflow-y: auto;
}
#eg-chat-deflection-submit .eg-button-container {
  display: flex;
}
#eg-chat-deflection-submit .eg-button-group-1 {
  padding-right: 2px;
  flex: 1;
}
#eg-chat-deflection-submit .eg-button-group-2 {
  padding-left: 2px;
  flex: 1;
}
/*
Styling for the disclaimer-message component
Changes to this section will apply to the component found in:
components/disclaimer-message/disclaimer-message.html
*/
#eg-chat-disclaimer-message {
  /* Fallback for browsers that do not support gradients */
  background-color: #fff;
  /* Standard syntax: Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image: linear-gradient(#fff, #fff);
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 5px;
  color: #000;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: normal;
  text-align: left;
  padding: 5px 10px;
}
#eg-chat-disclaimer-message .eg-link {
  color: #000;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: normal;
  background-color: transparent;
}
#eg-chat-disclaimer-message .eg-heading-container {
  border: none;
  border-radius: 0;
  border-width: 1px 0px 1px 0px;
  padding: 0px;
  /* Fallback for browsers that do not support gradients */
  background-color: transparent;
  /* Standard syntax: Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image: linear-gradient(transparent, transparent);
  color: #000;
  padding: 10px 5px;
}
#eg-chat-disclaimer-message .eg-heading-container .eg-heading {
  font-family: 'Source Sans Pro Regular', sans-serif;
  font-size: 13px;
  font-weight: normal;
  color: #000;
}
#eg-chat-disclaimer-message .eg-heading-container .eg-heading {
  margin: 0;
  padding: 0;
}
/* Mobile Specific Styles disclaimer-message component START */
/* Mobile Specific Styles disclaimer-message component END */
/*
Styling for the error-message component
Changes to this section will apply to the component found in:
components/error-message/error-message.html
*/
#eg-chat-error-message {
  /* Fallback for browsers that do not support gradients */
  background-color: #fff;
  /* Standard syntax: Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image: linear-gradient(#fff, #fff);
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 5px;
  color: #000;
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  font-weight: normal;
  text-align: center;
  font-size: 13px;
}
#eg-chat-error-message .eg-link {
  color: #000;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: normal;
  background-color: transparent;
}
#eg-chat-error-message .eg-heading-container {
  border: none;
  border-radius: 0;
  border-width: 1px 0px 1px 0px;
  padding: 0px;
  /* Fallback for browsers that do not support gradients */
  background-color: transparent;
  /* Standard syntax: Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image: linear-gradient(transparent, transparent);
  color: #000;
  padding: 10px 5px;
}
#eg-chat-error-message .eg-heading-container .eg-heading {
  font-family: 'Source Sans Pro Regular', sans-serif;
  font-size: 13px;
  font-weight: normal;
  color: #000;
}
#eg-chat-error-message .eg-heading-container .eg-heading {
  margin: 0;
  padding: 0;
}
/* Mobile Specific Styles error-message component START */
/* Mobile Specific Styles error-message component END */
/*
Styling for the escalation-search-results-list component
Changes to this section will apply to the component found in:
components/escalation-search-results-list/escalation-search-results-list.html
*/
#eg-chat-escalation-search-results-list {
  /* Fallback for browsers that do not support gradients */
  background-color: #fff;
  /* Standard syntax: Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image: linear-gradient(#fff, #fff);
  overflow: hidden;
}
#eg-chat-escalation-search-results-list .list-group {
  margin-bottom: 0;
}
#eg-chat-escalation-search-results-list .eg-heading-container {
  border: none;
  border-radius: 0;
  border-width: 1px 0px 1px 0px;
  padding: 0px;
  /* Fallback for browsers that do not support gradients */
  background-color: transparent;
  /* Standard syntax: Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image: linear-gradient(transparent, transparent);
  color: #000;
  padding: 0 0;
}
#eg-chat-escalation-search-results-list .eg-heading-container .eg-heading {
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: normal;
  color: #000;
}
#eg-chat-escalation-search-results-list .eg-heading-container .eg-heading {
  margin: 0;
  padding: 0;
}
#eg-chat-escalation-search-results-list .eg-item-container {
  border: none;
  border-radius: 0;
  border-width: 1px 0px 1px 0px;
  padding: 0px;
  color: #000;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: normal;
  background-color: transparent;
}
#eg-chat-escalation-search-results-list .eg-item-container:hover {
  background-color: #bfbfbf;
  color: #000;
}
#eg-chat-escalation-search-results-list .eg-item-container .eg-item {
  display: block;
  padding: 10px 5px;
}
#eg-chat-escalation-search-results-list .list-group-item {
  border-top: none;
  border-bottom: 1px solid transparent;
}
#eg-chat-escalation-search-results-list .list-group-item:first-child {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin-bottom: 0px;
}
#eg-chat-escalation-search-results-list .list-group-item:last-child {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: none;
}
#eg-chat-escalation-search-results-list .eg-list {
  border: 1px solid transparent;
}
#eg-chat-escalation-search-results-list .fa {
  color: inherit;
}
#eg-chat-escalation-search-results-list .eg-list {
  margin-top: 10px;
}
#eg-chat-escalation-search-results-list .eg-list .eg-item-container {
  display: flex;
}
#eg-chat-escalation-search-results-list #eg-deflection-heading {
  font-weight: bold;
}
#eg-chat-escalation-search-results-list .eg-article-icon {
  display: flex;
}
#eg-chat-escalation-search-results-list .eg-article-icon .eg-article-icon-img {
  width: 20px;
  height: 100%;
}
/* Mobile Specific Styles escalation-search-results-list component START */
/* Mobile Specific Styles escalation-search-results-list component END */
/*
Styling for the footer component
Changes to this section will apply to the component found in:
components/footer/footer.html
*/
#eg-chat-footer {
  /* Fallback for browsers that do not support gradients */
  background-color: #fff;
  /* Standard syntax: Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image: linear-gradient(#fff, #fff);
  overflow: hidden;
  border: 0 solid transparent;
  border-radius: 0;
  color: #000;
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  font-weight: normal;
  border-top: 1px solid transparent;
  padding-top: 2px;
  padding-bottom: 5px;
  display: flex;
  justify-content: center;
}
#eg-chat-footer .eg-link {
  color: #337ab7;
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  font-weight: normal;
  background-color: transparent;
}
#eg-chat-footer .eg-heading-container {
  border: none;
  border-radius: 0;
  border-width: 1px 0px 1px 0px;
  padding: 0px;
  /* Fallback for browsers that do not support gradients */
  background-color: transparent;
  /* Standard syntax: Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image: linear-gradient(transparent, transparent);
  color: #000;
  padding: 10px 5px;
}
#eg-chat-footer .eg-heading-container .eg-heading {
  font-family: 'Source Sans Pro Regular', sans-serif;
  font-size: 13px;
  font-weight: normal;
  color: #000;
}
#eg-chat-footer .eg-heading-container .eg-heading {
  margin: 0;
  padding: 0;
}
#eg-chat-footer.eg-footer-rtl {
  display: flex;
}
#eg-chat-footer img {
  width: 80px;
}
#eg-chat-footer .eg-link {
  margin-left: 3px;
}
/* Mobile Specific Styles footer-small component START */
/* Mobile Specific Styles footer-small component END */
/*
Styling for the header component
Changes to this section will apply to the component found in:
components/header/header.html
*/
#eg-chat-header {
  /* Fallback for browsers that do not support gradients */
  background-color: #242e39;
  /* Standard syntax: Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image: linear-gradient(#242e39, #242e39);
  overflow: visible;
  height: auto;
  border-bottom: 1px solid #fff;
  padding: 0;
}
#eg-chat-header .eg-menu.eg-sidebar {
  align-self: center;
  margin-right: 10px;
}
#eg-chat-header .eg-menu.eg-sidebar .ass-aside-menu {
  /* Fallback for browsers that do not support gradients */
  background-color: #fff;
  /* Standard syntax: Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image: linear-gradient(#fff, #fff);
  overflow: hidden;
  border: 1px solid #fff;
  border-radius: 5px;
  /* Styles required to override the library styles */
  padding: 0px;
  opacity: 0;
  width: 0px;
  left: 0px;
  top: 50px;
  visibility: hidden;
}
#eg-chat-header .eg-menu.eg-sidebar .ass-aside-menu .ass-aside-menu-close {
  padding: 2px 5px;
}
#eg-chat-header .eg-menu.eg-sidebar .ass-aside-menu.ass-slide-in {
  padding: 25px;
  height: 100%;
  overflow-y: auto;
  visibility: visible;
}
#eg-chat-header .eg-menu.eg-sidebar .ass-aside-menu.rtl-aside-menu {
  right: 0;
}
#eg-chat-header .eg-menu.eg-sidebar .ass-aside-menu:not(.rtl-aside-menu) {
  left: 0;
}
#eg-chat-header .eg-menu.eg-sidebar .ass-aside-menu .rtl-aside-menu-icon {
  margin-left: 10px;
  margin-right: 0;
}
#eg-chat-header .eg-menu.eg-sidebar .ass-aside-menu .rtl-aside-menu-close {
  right: auto;
  left: 25px;
}
#eg-chat-header .eg-menu.eg-sidebar .ass-aside-menu-item {
  color: #000;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: normal;
  background-color: transparent;
  display: flex;
  align-items: center;
  text-transform: capitalize;
  padding: 10px 5px;
  height: auto;
  line-height: inherit;
  border-bottom: 1px solid #999999;
}
#eg-chat-header .eg-menu.eg-sidebar .ass-aside-menu-item:hover {
  background-color: transparent;
  color: #000;
}
#eg-chat-header .eg-menu.eg-sidebar .ass-aside-menu-item .fa {
  color: inherit;
}
#eg-chat-header .eg-menu.eg-sidebar .ass-aside-menu-item:hover .fa {
  color: inherit;
}
#eg-chat-header .eg-menu.eg-sidebar .ass-aside-overlay {
  /* Fallback for browsers that do not support gradients */
  background-color: #212121;
  /* Standard syntax: Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image: linear-gradient(#212121, #212121);
  overflow: hidden;
  opacity: 0.48;
}
#eg-chat-header .eg-menu.eg-sidebar .ass-slide-in {
  animation: eg-slide-in 0.5s forwards;
  transition-property: opacity;
  transition-delay: 0.7s;
  opacity: 0;
}
#eg-chat-header .eg-menu.eg-sidebar .ass-slide-out {
  animation: eg-slide-out 0.5s backwards;
}
#eg-chat-header .eg-menu.eg-sidebar .ass-slide-out .ass-aside-menu-item {
  visibility: hidden;
}
#eg-chat-header .eg-menu.eg-sidebar .ass-slide-in .ass-aside-menu-item {
  animation: eg-menu-show 0.5s;
  transition-property: opacity;
}
#eg-chat-header .eg-menu.eg-sidebar .ass-menu-button {
  margin: 0;
  padding: 3px 3px 0px 3px;
  font-size: 16px;
}
#eg-chat-header .eg-menu.eg-sidebar .disabled-link {
  pointer-events: none;
  color: #7d7d7d;
  cursor: not-allowed;
}
#eg-chat-header .eg-menu.eg-header-toolbar {
  background-color: #fff;
  border: 1px solid #fff;
  display: flex;
  justify-content: center;
  z-index: 8;
  padding: 2px 30px;
}
#eg-chat-header .eg-menu.eg-header-toolbar .eg-toolbar-btn-wrapper {
  align-self: center;
  display: flex;
  padding: 3px;
}
#eg-chat-header .eg-menu.eg-header-toolbar .eg-toolbar-btn-wrapper:active {
  box-shadow: none;
}
#eg-chat-header .eg-menu.eg-header-toolbar .eg-toolbar-btn-wrapper .eg-toolbar-btn {
  width: 28px;
  height: 28px;
  background-color: #F0F2F3;
  border-radius: 15px;
  padding-top: 3px;
  transition: background-color 0.2s;
}
#eg-chat-header .eg-menu.eg-header-toolbar .eg-toolbar-btn-wrapper .eg-toolbar-btn .fa {
  margin-top: 4px;
  margin-left: 1px;
}
#eg-chat-header .eg-menu.eg-header-toolbar .eg-toolbar-btn-wrapper .eg-toolbar-btn:hover,
#eg-chat-header .eg-menu.eg-header-toolbar .eg-toolbar-btn-wrapper .eg-toolbar-btn:focus {
  background-color: #d4d9dc;
  transition: background-color 0.2s;
  outline: none;
}
#eg-chat-header .eg-menu.eg-header-toolbar .eg-toolbar-btn-wrapper .eg-toolbar-btn-image {
  width: 15px;
}
#eg-chat-header .eg-menu.dropdown-menu {
  padding: 10px 0;
  border: 0;
  box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.175);
  background-color: #fff;
}
#eg-chat-header .eg-menu.dropdown-menu .menu-item .menu-item-btn {
  padding: 9px 20px;
  color: #000;
  background-color: transparent;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
}
#eg-chat-header .eg-menu.dropdown-menu .menu-item .menu-item-btn:hover {
  background-color: transparent;
  color: #000;
}
#eg-chat-header .eg-text-container {
  flex: auto;
  display: flex;
  align-items: center;
  position: relative;
}
#eg-chat-header .eg-text-container .eg-va,
#eg-chat-header .eg-text-container .eg-chat {
  position: relative;
  /* to position all the logo text/image/avatar at a single place overlapping each other to smoothen the
                               VA to chat transition */
  transition: opacity 0.5s ease-out;
}
#eg-chat-header .eg-text-container .eg-va.eg-header-text,
#eg-chat-header .eg-text-container .eg-chat.eg-header-text {
  color: #fff;
  font-family: 'Source Sans Pro Regular', sans-serif;
  font-size: 20px;
  font-weight: normal;
  background-color: transparent;
  display: flex;
  align-items: center;
  /*
                 * Following positions is required to be set to 0 to
                 * 1. vertically align the text in center for IE
                 * 2. apply ellipsis on the text
                 */
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
}
#eg-chat-header .eg-logo-container {
  /*flex: auto;*/
  display: flex;
  align-items: center;
  position: relative;
  min-width: 40px;
}
#eg-chat-header .eg-logo-container.eg-logo-separation-left {
  margin-left: 10px;
}
#eg-chat-header .eg-logo-container.eg-logo-separation-right {
  margin-right: 10px;
}
#eg-chat-header .eg-logo-container .eg-logo-image-container {
  /**
             * //TB/: Following was changed from 
             * height: @eg__header__height__1; the value of @eg__header__height__1 is 50px
             * to height: 40px;
             */
  height: calc( 50px  - 10px);
  max-width: 100px;
  width: 40px;
}
#eg-chat-header .eg-logo-container .eg-avatar-container {
  max-height: 65px;
  max-width: 65px;
  top: 1px;
  /* to align the avatar image with the top of the component else it will be aligned in the center */
  z-index: 1001;
  /* Setting it to 1001 so that it appears between the attachment modal (z-index: 1050) and progress bar (z-index: 1000) */
}
#eg-chat-header .eg-header {
  display: flex;
  height: 100%;
  flex-wrap: nowrap;
  padding: 10px 20px;
  z-index: 9;
  position: relative;
}
#eg-chat-header .eg-header .eg-header-btn-wrapper {
  align-self: center;
  display: flex;
  padding: 3px;
}
#eg-chat-header .eg-header .eg-header-btn-wrapper:active {
  box-shadow: none;
}
#eg-chat-header .eg-header .eg-header-btn-wrapper .eg-header-btn {
  width: 28px;
  height: 28px;
  background-color: #F0F2F3;
  border-radius: 15px;
  padding-top: 3px;
  transition: background-color 0.2s;
}
#eg-chat-header .eg-header .eg-header-btn-wrapper .eg-header-btn .fa {
  margin-top: 4px;
  margin-left: 1px;
}
#eg-chat-header .eg-header .eg-header-btn-wrapper .eg-header-btn:hover,
#eg-chat-header .eg-header .eg-header-btn-wrapper .eg-header-btn:focus {
  background-color: #d4d9dc;
  transition: background-color 0.2s;
  outline: none;
}
#eg-chat-header .eg-header .eg-header-btn-wrapper .eg-header-btn-image {
  width: 15px;
}
#eg-chat-header .eg-header .eg-header-btn-wrapper .eg-toolbar-btn-image {
  width: 14px;
}
#eg-chat-header .eg-avatar {
  /* Fallback for browsers that do not support gradients */
  background-color: #fff;
  /* Standard syntax: Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image: linear-gradient(#fff, #fff);
  border-radius: 50%;
  box-shadow: 0px 2px 7px 0px rgba(123, 123, 123, 0.75);
}
#eg-chat-header .eg-off-record-banner {
  display: flex;
  padding: 0px 15px;
  background-color: #F0F2F3;
  line-height: 38px;
  animation: eg-slide-down 0.5s forwards;
  z-index: 1;
  position: relative;
  width: 100%;
}
#eg-chat-header .eg-off-record-banner.hide-banner {
  animation: eg-slide-up 0.5s forwards;
}
#eg-chat-header .eg-off-record-banner span {
  flex-grow: 2;
  padding-right: 5px;
}
#eg-chat-header .eg-off-record-banner .eg-toggle-button {
  position: relative;
  top: 11px;
  width: 34px;
  height: 18px;
  float: right;
  overflow: hidden;
  border-radius: 100px;
}
#eg-chat-header .eg-off-record-banner .eg-toggle-button .eg-toggle-checkbox {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0 !important;
  opacity: 0;
  cursor: pointer;
  z-index: 3;
}
#eg-chat-header .eg-off-record-banner .eg-toggle-button .eg-knobs,
#eg-chat-header .eg-off-record-banner .eg-toggle-button .eg-layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
#eg-chat-header .eg-off-record-banner .eg-toggle-button .eg-knobs {
  z-index: 2;
}
#eg-chat-header .eg-off-record-banner .eg-toggle-button .eg-knobs:before {
  content: '';
  position: absolute;
  top: 3.4px;
  left: 3px;
  width: 11px;
  height: 11px;
  background-color: #000;
  border-radius: 50%;
  transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
}
#eg-chat-header .eg-off-record-banner .eg-toggle-button .eg-layer {
  border-radius: 100px;
  width: 100%;
  background-color: #b7b7b7;
  transition: 0.3s ease all;
  z-index: 1;
}
#eg-chat-header .eg-off-record-banner .eg-toggle-button .eg-toggle-checkbox:checked + .eg-knobs:before {
  content: '';
  left: 19px;
  background-color: #fff;
}
#eg-chat-header .eg-off-record-banner .eg-toggle-button .eg-toggle-checkbox:checked ~ .eg-layer {
  background-color: #000;
}
#eg-chat-header .eg-off-record-banner .eg-toggle-button .eg-knobs,
#eg-chat-header .eg-off-record-banner .eg-toggle-button .eg-knobs:before,
#eg-chat-header .eg-off-record-banner .eg-toggle-button .eg-layer {
  transition: 0.3s ease all;
}
#eg-chat-header.shadow {
  box-shadow: 0px 2px 30px rgba(0, 0, 0, 0.12);
}
#eg-chat-header .eg-disabled {
  opacity: 0.4;
  pointer-events: none;
}
#eg-chat-header .eg-button-separator {
  margin-left: 15px;
  /* to create separation between the left menu and right buttons */
  flex-grow: 1;
}
#eg-chat-header .eg-va-active {
  /*
         * If it is not being animated set the display to none for chat logos.
         * So that it will not take any space
         */
  /*
         * If va is being active.
         * Then hide the chat logos with animations/transitions
         */
  /*
         * If va is being removed.
         * Then show the chat logos with animations/transitions
         */
}
#eg-chat-header .eg-va-active:not(.ng-animate) .eg-chat {
  display: none;
}
#eg-chat-header .eg-va-active.eg-va-active-add .eg-chat {
  opacity: 1;
}
#eg-chat-header .eg-va-active.eg-va-active-add-active .eg-chat {
  opacity: 0;
}
#eg-chat-header .eg-va-active.eg-va-active-remove .eg-chat {
  opacity: 0;
}
#eg-chat-header .eg-va-active.eg-va-active-remove-active .eg-chat {
  opacity: 1;
}
#eg-chat-header .eg-chat-active {
  /*
         * If it is not being animated set the display to none for va logos.
         * So that it will not take any space
         */
  /*
         * If chat is being active.
         * Then hide the va logos with animations/transitions
         */
  /*
         * If chat is being removed.
         * Then show the va logos with animations/transitions
         */
}
#eg-chat-header .eg-chat-active:not(.ng-animate) .eg-va {
  display: none;
}
#eg-chat-header .eg-chat-active.eg-chat-active-add .eg-va {
  opacity: 1;
}
#eg-chat-header .eg-chat-active.eg-chat-active-add-active .eg-va {
  opacity: 0;
}
#eg-chat-header .eg-chat-active.eg-chat-active-remove .eg-va {
  opacity: 0;
}
#eg-chat-header .eg-chat-active.eg-chat-active-remove-active .eg-va {
  opacity: 1;
}
#eg-chat-header .open > .dropdown-menu {
  animation: eg-dropdown-open 0.5s;
}
#eg-chat-header .ass-aside-menu .sidebar-image {
  width: 15px;
}
#eg-chat-header .ass-aside-menu .disabled-link .sidebar-image {
  opacity: 0.5;
}
#eg-chat-header .dropdownTextRight {
  text-align: right !important;
}
#eg-chat-header .eg-text-container .eg-va.eg-header-text,
#eg-chat-header .eg-text-container .eg-chat.eg-header-text {
  /*text-transform: uppercase;*/
}
#eg-chat-overlay.eg-overlay-docked:not(.eg-overlay-xs) #eg-chat-header .ass-aside-menu {
  height: calc(100% -  50px);
  position: absolute;
  border-bottom-left-radius: 5px;
}
#eg-chat-overlay.eg-overlay-docked:not(.eg-overlay-xs) #eg-chat-header .ass-aside-overlay {
  position: absolute;
}
/* Mobile Specific Styles header component START */
#eg-chat-overlay.eg-overlay-xs #eg-chat-header .ass-aside-menu {
  padding-top: 0;
}
/* Mobile Specific Styles header component END */
@keyframes eg-dropdown-open {
  0% {
    visibility: hidden;
    opacity: 0;
  }
  100% {
    visibility: visible;
    opacity: 1;
  }
}
@keyframes eg-dropdown-close {
  0% {
    visibility: visible;
    opacity: 1;
  }
  100% {
    visibility: hidden;
    opacity: 0;
  }
}
/*
Styling for the interactive-post-chat-survey component
Changes to this section will apply to the component found in:
components/interactive-post-chat-survey/interactive-post-chat-survey.html
*/
#eg-chat-interactive-post-chat-survey {
  /* Fallback for browsers that do not support gradients */
  background-color: #fff;
  /* Standard syntax: Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image: linear-gradient(#fff, #fff);
  overflow: hidden;
  border: 0 solid transparent;
  border-radius: 0;
  color: #000;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: normal;
  padding-top: 0;
}
#eg-chat-interactive-post-chat-survey .eg-message-container {
  margin-bottom: 18px;
}
#eg-chat-interactive-post-chat-survey .eg-solution-bubble,
#eg-chat-interactive-post-chat-survey .eg-message-bubble {
  position: relative;
  word-wrap: break-word;
}
#eg-chat-interactive-post-chat-survey .eg-solution-bubble:before,
#eg-chat-interactive-post-chat-survey .eg-message-bubble:before,
#eg-chat-interactive-post-chat-survey .eg-solution-bubble:after,
#eg-chat-interactive-post-chat-survey .eg-message-bubble:after {
  border-color: transparent;
  border-style: solid;
  content: '';
  display: block;
  position: absolute;
  width: 0;
}
#eg-chat-interactive-post-chat-survey .eg-solution-bubble:focus,
#eg-chat-interactive-post-chat-survey .eg-message-bubble:focus {
  outline: 1px dotted !important;
}
#eg-chat-interactive-post-chat-survey .eg-typing-bubble {
  margin-bottom: 15px;
}
#eg-chat-interactive-post-chat-survey .eg-typing-bubble .typing-indicator:before {
  display: none;
}
#eg-chat-interactive-post-chat-survey .eg-typing-bubble .typing-indicator:after {
  display: none;
}
#eg-chat-interactive-post-chat-survey .loader__dot {
  animation: 1s blink infinite;
  border: 2.5px solid #000;
  display: inline-block;
  border-radius: 10px;
  border-width: 3px;
  background: #000;
}
#eg-chat-interactive-post-chat-survey .loader__dot:nth-child(2) {
  animation-delay: 250ms;
}
#eg-chat-interactive-post-chat-survey .loader__dot:nth-child(3) {
  animation-delay: 500ms;
}
#eg-chat-interactive-post-chat-survey .eg-msg-info-top .eg-message-wrapper-customer,
#eg-chat-interactive-post-chat-survey .eg-msg-info-top .eg-message-wrapper-agent {
  flex-direction: column;
}
#eg-chat-interactive-post-chat-survey .eg-msg-info-top .eg-message-bubble:before {
  border-width: 0 9px 9px;
  top: -9px;
}
#eg-chat-interactive-post-chat-survey .eg-msg-info-top .eg-message-info-container {
  margin-bottom: 6px;
  margin-right: 1px;
  margin-left: 1px;
}
#eg-chat-interactive-post-chat-survey .eg-msg-info-bottom .eg-message-wrapper-customer,
#eg-chat-interactive-post-chat-survey .eg-msg-info-bottom .eg-message-wrapper-agent {
  flex-direction: column-reverse;
}
#eg-chat-interactive-post-chat-survey .eg-msg-info-bottom .eg-message-bubble:after {
  border-width: 0 8px 8px;
  top: 100%;
  transform: rotate(180deg);
}
#eg-chat-interactive-post-chat-survey .eg-msg-info-bottom .eg-message-info-container {
  margin-top: 8px;
}
#eg-chat-interactive-post-chat-survey .eg-msg-container-no-stretch .eg-message-wrapper-customer,
#eg-chat-interactive-post-chat-survey .eg-msg-container-no-stretch .eg-message-wrapper-agent {
  display: inline-flex;
}
#eg-chat-interactive-post-chat-survey .eg-msg-container-no-stretch .eg-message-wrapper-customer .eg-message-bubble,
#eg-chat-interactive-post-chat-survey .eg-msg-container-no-stretch .eg-message-wrapper-agent .eg-message-bubble {
  word-break: break-word;
}
#eg-chat-interactive-post-chat-survey .eg-msg-container-no-stretch .eg-customer {
  display: flex;
  flex-direction: row-reverse;
}
#eg-chat-interactive-post-chat-survey .eg-msg-container-no-stretch .eg-message-bubble {
  width: fit-content;
}
#eg-chat-interactive-post-chat-survey .eg-msg-container-no-stretch .eg-message-bubble:after,
#eg-chat-interactive-post-chat-survey .eg-msg-container-no-stretch .eg-message-bubble:before {
  content: none;
}
#eg-chat-interactive-post-chat-survey .eg-msg-container-no-stretch .eg-message-wrapper-customer .eg-message-bubble {
  margin-left: auto;
}
#eg-chat-interactive-post-chat-survey .eg-msg-container-stretch .eg-message-wrapper-customer,
#eg-chat-interactive-post-chat-survey .eg-msg-container-stretch .eg-message-wrapper-agent {
  display: flex;
}
#eg-chat-interactive-post-chat-survey .eg-message-info-container {
  color: #000;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: normal;
  background-color: transparent;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-customer {
  padding-left: 35px;
  flex-shrink: 0;
  max-width: 100%;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-customer .eg-message-bubble {
  /* Fallback for browsers that do not support gradients */
  background-color: #fde07f;
  /* Standard syntax: Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image: linear-gradient(#fde07f, #fde07f);
  border: 1px solid #fde07f;
  border-radius: 5px;
  color: #000;
  padding: 11px 18px;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: 'normal';
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-customer .eg-message-bubble:before {
  border-bottom-color: #fde07f;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-customer .eg-message-bubble:after {
  border-bottom-color: #fde07f;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-customer .eg-message-bubble .eg-message {
  /*
         * Following has been added to expose the link colours
         * if the links are sent by the customer
         */
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-customer .eg-message-bubble .eg-message a {
  color: #000;
  text-decoration: underline;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-customer .eg-message-bubble .eg-message a:hover {
  color: #000;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-customer .eg-message-bubble.eg-off-record {
  display: flex;
  flex-direction: column;
  padding-right: 10px;
  padding-bottom: 6px;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-customer .eg-message-bubble.eg-off-record span {
  padding-right: 12px;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-customer .eg-message-bubble.eg-off-record img {
  width: 15px;
  align-self: flex-end;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-customer .eg-message-bubble .eg-attachment-name {
  font-weight: 600;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-customer .eg-message-bubble .eg-attachment-info {
  margin-top: -3px;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-customer .eg-message-bubble:before #eg-chat-interactive-post-chat-survey .eg-message-wrapper-customer .eg-message-bubble:not(.eg-rtl-angle) {
  left: 15px;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-customer .eg-message-bubble:after #eg-chat-interactive-post-chat-survey .eg-message-wrapper-customer .eg-message-bubble:not(.eg-rtl-angle) {
  left: 16px;
}
#eg-chat-interactive-post-chat-survey .eg-rich-message-wrapper .eg-message-wrapper-agent {
  display: flex !important;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent {
  flex-shrink: 0;
  max-width: 100%;
  padding-right: 35px;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-message-bubble {
  /* Fallback for browsers that do not support gradients */
  background-color: #F0F2F3;
  /* Standard syntax: Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image: linear-gradient(#F0F2F3, #F0F2F3);
  border: 1px solid #F0F2F3;
  border-radius: 5px;
  color: #000;
  padding: 11px 18px;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: 'normal';
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-message-bubble:before {
  border-bottom-color: #F0F2F3;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-message-bubble:after {
  border-bottom-color: #F0F2F3;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-message-bubble .eg-message {
  /*
         * Following has been added to expose the link colours
         * if the links are sent by the customer
         */
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-message-bubble .eg-message a {
  color: #808080;
  text-decoration: underline;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-message-bubble .eg-message a:hover {
  color: #808080;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-message-bubble:before {
  right: 15px;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-message-bubble:after {
  right: 16px;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-message-bubble .eg-message {
  /* 
                 * Following has been added to handle the images sent by agent
                 * e.g., images in articles
                 * !important has been added intentionaly
                 */
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-message-bubble .eg-message img {
  max-width: 100% !important;
  height: auto !important;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-solution-bubble {
  /* Fallback for browsers that do not support gradients */
  background-color: transparent;
  /* Standard syntax: Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image: linear-gradient(transparent, transparent);
  overflow: visible;
  border: 1px solid #F0F2F3;
  border-radius: 5px;
  margin-bottom: 10px;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-solution-bubble:before {
  border-bottom-color: #F0F2F3;
  right: 15px;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-solution-bubble:after {
  border-bottom-color: #F0F2F3;
  right: 16px;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-solution-bubble .list-group {
  margin-bottom: 0;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-solution-bubble .eg-heading-container {
  border: none;
  border-radius: 0;
  border-width: 1px 0px 1px 0px;
  padding: 0px;
  /* Fallback for browsers that do not support gradients */
  background-color: #F0F2F3;
  /* Standard syntax: Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image: linear-gradient(#F0F2F3, #F0F2F3);
  color: #000;
  padding: 11px 18px;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-solution-bubble .eg-heading-container .eg-heading {
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: normal;
  color: #000;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-solution-bubble .eg-heading-container .eg-heading {
  margin: 0;
  padding: 0;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-solution-bubble .eg-solution-item-container {
  border: none;
  border-radius: 0;
  border-width: 1px 0px 1px 0px;
  padding: 0px;
  color: #000;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: normal;
  background-color: transparent;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-solution-bubble .eg-solution-item-container .eg-solution {
  display: block;
  padding: 11px 18px;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-solution-bubble .eg-solution-item-container .eg-heading-container {
  border: none;
  border-radius: 0;
  border-width: 1px 0px 1px 0px;
  padding: 0px;
  /* Fallback for browsers that do not support gradients */
  background-color: transparent;
  /* Standard syntax: Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image: linear-gradient(transparent, transparent);
  color: #000;
  margin-bottom: 5px;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-solution-bubble .eg-solution-item-container .eg-heading-container .eg-heading {
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: bold;
  color: #000;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-solution-bubble .eg-item-container {
  border: none;
  border-radius: 0;
  border-width: 1px 0px 1px 0px;
  padding: 0px;
  color: #000;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: normal;
  background-color: transparent;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-solution-bubble .eg-item-container:hover {
  background-color: transparent;
  color: #000;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-solution-bubble .eg-item-container .eg-item {
  display: block;
  padding: 11px 18px;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-solution-bubble .list-group-item {
  border-top: none;
  border-bottom: 1px solid #F0F2F3;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-solution-bubble .list-group-item:first-child {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin-bottom: 0px;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-solution-bubble .list-group-item:last-child {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: none;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-solution-bubble .fa:not(.eg-fa-inherit) {
  color: inherit;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-solution-bubble .eg-article-content {
  /* 
                 * Following has been added to handle the images sent by agent
                 * e.g., images in articles
                 * !important has been added intentionaly
                 */
  /*
                 * Following has been added to expose the link colours
                 * if the links are sent by the agent
                 */
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-solution-bubble .eg-article-content img {
  max-width: 100% !important;
  height: auto !important;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-solution-bubble .eg-article-content a {
  color: #808080;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-solution-bubble .eg-article-content a:hover {
  color: #808080;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent.agent1 .eg-message-bubble {
  /* Fallback for browsers that do not support gradients */
  background-color: #F0F2F3;
  /* Standard syntax: Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image: linear-gradient(#F0F2F3, #F0F2F3);
  border: 1px solid #F0F2F3;
  border-radius: 5px;
  color: #000;
  padding: 11px 18px;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: 'normal';
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent.agent1 .eg-message-bubble:before {
  border-bottom-color: #F0F2F3;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent.agent1 .eg-message-bubble:after {
  border-bottom-color: #F0F2F3;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent.agent1 .eg-message-bubble .eg-message {
  /*
         * Following has been added to expose the link colours
         * if the links are sent by the customer
         */
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent.agent1 .eg-message-bubble .eg-message a {
  color: #808080;
  text-decoration: underline;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent.agent1 .eg-message-bubble .eg-message a:hover {
  color: #808080;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent.agent2 .eg-message-bubble {
  /* Fallback for browsers that do not support gradients */
  background-color: #F0F2F3;
  /* Standard syntax: Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image: linear-gradient(#F0F2F3, #F0F2F3);
  border: 1px solid #F0F2F3;
  border-radius: 5px;
  color: #000;
  padding: 11px 18px;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: 'normal';
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent.agent2 .eg-message-bubble:before {
  border-bottom-color: #F0F2F3;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent.agent2 .eg-message-bubble:after {
  border-bottom-color: #F0F2F3;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent.agent2 .eg-message-bubble .eg-message {
  /*
         * Following has been added to expose the link colours
         * if the links are sent by the customer
         */
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent.agent2 .eg-message-bubble .eg-message a {
  color: #808080;
  text-decoration: underline;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent.agent2 .eg-message-bubble .eg-message a:hover {
  color: #808080;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent.agent3 .eg-message-bubble {
  /* Fallback for browsers that do not support gradients */
  background-color: #F0F2F3;
  /* Standard syntax: Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image: linear-gradient(#F0F2F3, #F0F2F3);
  border: 1px solid #F0F2F3;
  border-radius: 5px;
  color: #000;
  padding: 11px 18px;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: 'normal';
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent.agent3 .eg-message-bubble:before {
  border-bottom-color: #F0F2F3;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent.agent3 .eg-message-bubble:after {
  border-bottom-color: #F0F2F3;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent.agent3 .eg-message-bubble .eg-message {
  /*
         * Following has been added to expose the link colours
         * if the links are sent by the customer
         */
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent.agent3 .eg-message-bubble .eg-message a {
  color: #808080;
  text-decoration: underline;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent.agent3 .eg-message-bubble .eg-message a:hover {
  color: #808080;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container {
  /*margin: 8px 0;*/
  padding: 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  color: #000;
  display: flex;
  /*flex: 1;*/
  /* Common heading*/
  /* Common Section heading*/
  /* Common message body*/
  /* List*/
  /* Timepicker*/
  /* Rich link*/
  /* Payment*/
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-heading {
  background: #F0F2F3;
  padding: 16px;
  border-radius: 5px;
  margin: 8px 0;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-section-heading-container {
  padding: 8px 0;
  border-radius: 5px;
  float: left;
  margin-top: 4px;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-section-heading-container .eg-msg-item .eg-item-img-container {
  padding-left: 16px;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-section {
  overflow: hidden;
  /*margin: 10px 0;*/
  width: 100%;
  float: left;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-section-body-container {
  float: left;
  width: 100%;
  overflow: hidden;
  position: relative;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-section-body-container .eg-list-section-container {
  background: #F0F2F3;
  border-radius: 5px;
  padding: 0 16px;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-section-body-container .eg-list-section-container .eg-msg-item {
  border-bottom: 1px solid #d2d2d2;
  padding: 16px 0;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-section-body-container .eg-list-section-container .eg-msg-item:last-child {
  border-bottom: 1px solid transparent;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-section-body-container.disabled {
  cursor: none;
  opacity: 0.5;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-section-body-container.disabled .eg-msg-item {
  cursor: none;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-list {
  flex: 1;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-list .eg-msg-item {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  cursor: pointer;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-list .eg-msg-item .eg-item-img-container {
  min-width: 35px;
  margin-right: 8px;
  position: relative;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-list .eg-msg-item .eg-item-img-container .eg-item-img {
  width: 35px;
  height: 35px;
  border-radius: 20px;
  cursor: pointer;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-list .eg-msg-item .eg-item-img-container .eg-item-icon-container {
  position: absolute;
  right: 0;
  top: -7px;
  cursor: pointer;
  visibility: hidden;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-list .eg-msg-item .eg-item-img-container .eg-item-icon-container.eg-item-selected {
  visibility: visible;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-list .eg-msg-item .eg-item-content {
  display: flex;
  flex-direction: column;
  align-items: start;
  padding: 0 4px;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-list .eg-msg-item .eg-item-content .eg-title {
  font-weight: bold;
  width: 100%;
  line-height: 1.42;
  word-break: break-word;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-list .eg-msg-item .eg-item-content .eg-subtitle {
  line-height: 1.42;
  word-break: break-word;
  font-size: 12px;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-list .eg-msg-item .eg-item-icon-container {
  padding-right: 5px;
  display: flex;
  align-items: flex-start;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-list .eg-msg-item .eg-item-icon-container .eg-item-icon {
  color: #555;
  margin-top: 3px;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-list .eg-msg-item .eg-item-icon-container.eg-item-selected .eg-item-icon {
  color: #000;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-list .eg-rich-msg-section-heading-container .eg-item-img-container {
  padding-left: 16px;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-list .eg-btn-confirm {
  margin: 8px 0;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-list .eg-btn-confirm:disabled {
  cursor: not-allowed;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-time-picker {
  float: left;
  width: 100%;
  margin: 0.5rem 0;
  flex: 1;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-time-picker .eg-msg-item {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-time-picker .eg-msg-item .eg-item-img-container {
  margin-right: 8px;
  min-width: 35px;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-time-picker .eg-msg-item .eg-item-img-container .eg-item-img {
  width: 35px;
  height: 35px;
  min-width: 35px;
  border-radius: 20px;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-time-picker .eg-msg-item .eg-item-content {
  display: flex;
  flex-direction: column;
  align-items: start;
  padding: 0 4px;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-time-picker .eg-msg-item .eg-item-content .eg-title {
  font-weight: bold;
  width: 100%;
  line-height: 1.42;
  font-size: 14px;
  word-break: break-word;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-time-picker .eg-msg-item .eg-item-content .eg-subtitle {
  font-size: 12px;
  line-height: 1.42;
  word-break: break-word;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-time-picker .eg-timepicker-section-container {
  display: flex;
  width: 100%;
  flex-direction: column;
  background: #F0F2F3;
  border-radius: 5px;
  padding: 0 16px;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-time-picker .eg-timepicker-section-container .eg-day {
  padding: 16px 0;
  border-bottom: 1px solid #D2CFCE;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-time-picker .eg-timepicker-section-container .eg-day:last-child {
  border-bottom: 1px solid transparent;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-time-picker .eg-timepicker-section-container .eg-day .eg-title {
  font-weight: bold;
  word-break: break-word;
  line-height: 1.42;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-time-picker .eg-timepicker-section-container .eg-day .eg-subtitle {
  margin-top: 8px;
  word-break: break-word;
  line-height: 1.42;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-time-picker .eg-timepicker-section-container .eg-day .eg-time-slots {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  padding: 8px 0 0 0;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-time-picker .eg-timepicker-section-container .eg-day .eg-time-slots .eg-slot {
  padding: 8px 16px;
  text-align: center;
  margin: 4px;
  min-width: 75px;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-time-picker .eg-timepicker-section-container .eg-day .eg-time-slots .eg-slot:hover {
  cursor: pointer;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-link {
  flex: 1;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-link .eg-msg-item {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-link .eg-msg-item .eg-item-img-container {
  min-width: 35px;
  margin-right: 8px;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-link .eg-msg-item .eg-item-img-container .eg-item-img {
  width: 35px;
  height: 35px;
  border-radius: 50%;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-link .eg-msg-item .eg-item-content {
  display: flex;
  flex-direction: column;
  align-items: start;
  padding: 0 4px;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-link .eg-msg-item .eg-item-content .eg-title {
  font-weight: bold;
  width: 100%;
  line-height: 1.42;
  font-size: 14px;
  word-break: break-word;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-link .eg-msg-item .eg-item-content .eg-subtitle {
  font-size: 12px;
  line-height: 1.42;
  word-break: break-word;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-link .eg-item {
  /*background: @bubble_agent_color_background_1;*/
  margin: 8px 0;
  border-radius: 5px;
  overflow: hidden;
  display: block;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-link .eg-item:hover,
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-link .eg-item:visited {
  color: #808080;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-link .eg-item:last-child {
  margin-bottom: 0;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-link .eg-item .eg-item-content {
  background: #F0F2F3;
  box-shadow: 0px 0 50px #00000080;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-link .eg-item-thumbnail {
  padding-top: 56.25%;
  /*To maintain AR 16:9 - 16:9::100:56.25*/
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-link .eg-item-thumbnail .eg-btn-play-container button,
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-link .eg-item-thumbnail .eg-btn-play-container button:focus {
  width: 52px;
  height: 52px;
  border-radius: 50px;
  font-size: 12px;
  text-align: center;
  background: #ffffff;
  box-shadow: 0px 3px 6px #00000080;
  border: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-link .eg-item-thumbnail .eg-btn-play-container button i.fa,
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-link .eg-item-thumbnail .eg-btn-play-container button:focus i.fa {
  margin: 2px 0 0 4px;
  font-style: normal;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-link .eg-rich-msg-section-body-container {
  border-radius: 5px;
  background: transparent;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-link .eg-item-content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 16px;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-link .eg-item-content .eg-title {
  font-weight: bold;
  font-size: 14px;
  line-height: 1.42;
  word-break: break-word;
  color: #000;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-link .eg-item-content .eg-subtitle {
  font-size: 12px;
  line-height: 1.42;
  word-break: break-word;
  color: #000;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-payment {
  flex: 1;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-payment .eg-msg-item {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-payment .eg-msg-item .eg-item-img-container {
  min-width: 35px;
  margin-right: 8px;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-payment .eg-msg-item .eg-item-img-container .eg-item-img {
  width: 35px;
  height: 35px;
  border-radius: 20px;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-payment .eg-msg-item .eg-item-content {
  display: flex;
  flex-direction: column;
  align-items: start;
  padding: 0 4px;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-payment .eg-msg-item .eg-item-content .eg-title {
  font-weight: bold;
  width: 100%;
  line-height: 1.42;
  font-size: 14px;
  word-break: break-word;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-payment .eg-msg-item .eg-item-content .eg-subtitle {
  font-size: 12px;
  line-height: 1.42;
  word-break: break-word;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-payment .eg-item-thumbnail {
  padding-top: 56.25%;
  /*To maintain AR 16:9 - 16:9::100:56.25*/
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-payment .eg-rich-msg-section-body-container {
  border-radius: 5px;
  background: transparent;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-payment .eg-item {
  background: #F0F2F3;
  margin: 8px 0;
  border-radius: 5px;
  overflow: hidden;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-payment .eg-item:last-child {
  margin-bottom: 0;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-payment .eg-item .eg-item-content {
  box-shadow: 0px 0 50px #00000080;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-payment .eg-item-content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 16px;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-payment .eg-item-content .eg-title {
  font-weight: bold;
  font-size: 14px;
  word-break: break-word;
  line-height: 1.42;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-payment .eg-item-content .eg-subtitle {
  font-size: 12px;
  line-height: 1.42;
  word-break: break-word;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-payment .eg-item-content .eg-payment-btn {
  margin: 0.5rem;
  min-width: 6rem;
  color: #000;
  background: #fff;
  border-radius: 20px;
  text-align: center;
  padding: 0.25rem;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-system {
  /* Fallback for browsers that do not support gradients */
  background-color: #fff;
  /* Standard syntax: Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image: linear-gradient(#fff, #fff);
  border: 1px solid #fff;
  border-radius: 5px;
  color: #000;
  padding: 0 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: normal;
  overflow: hidden;
  max-height: 250px;
  transition: max-height 0.5s;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-system:before {
  border-bottom-color: #fff;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-system:after {
  border-bottom-color: #fff;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-system .eg-message {
  /*
         * Following has been added to expose the link colours
         * if the links are sent by the customer
         */
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-system .eg-message a {
  color: #000;
  text-decoration: underline;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-system .eg-message a:hover {
  color: #000;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-system .eg-message {
  line-height: 20px;
  /* 
             * Following has been added to handle the anchors in the system message
             * e.g., video-audio invitation accept reject links
             * !important has been added intentionaly
             */
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-system .eg-message a {
  cursor: pointer !important;
  text-decoration: none !important;
  color: #808080;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-system .eg-message a.drasr {
  color: -webkit-link;
  text-decoration: underline !important;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-system .eg-message a.btn {
  padding: 8px 13px;
  border-color: #fcc200;
  border-radius: 5px;
  background: #fcc200 !important;
  /*background:linear-gradient(@button__color_background_start, @button__color_background_end) !important;*/
  color: #000;
  border: 2px solid;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-system .eg-message a.btn:hover {
  background: #fcc200 !important;
  color: #000 !important;
  /*background:linear-gradient(@button__color_background_start__hover, @button__color_background_end__hover) !important;*/
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-system .eg-message a.btn.disabled {
  background: #171718 !important;
  border-color: #171718 !important;
  pointer-events: none !important;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-system:focus {
  outline: 1px dotted !important;
}
#eg-chat-interactive-post-chat-survey .hidedetails {
  max-height: 0;
  padding-bottom: 0;
}
#eg-chat-interactive-post-chat-survey .eg-attachment-image {
  margin-left: -5px;
  margin-right: -5px;
  display: flex;
  word-break: break-all;
}
#eg-chat-interactive-post-chat-survey .eg-attachment-image .eg-column-left,
#eg-chat-interactive-post-chat-survey .eg-attachment-image .eg-column-right {
  padding-left: 5px;
  padding-right: 5px;
  flex: auto;
}
#eg-chat-interactive-post-chat-survey .eg-attachment-image .eg-icon-thumbnail {
  max-height: 100px;
  max-width: 100px;
  height: 35px;
  width: 35px;
}
#eg-chat-interactive-post-chat-survey .eg-button-1 {
  background-color: #fcc200;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
  border: 2px solid #fcc200;
  font-size: 13px;
}
#eg-chat-interactive-post-chat-survey .eg-button-1:hover:not([disabled]) {
  background-color: #fcc200;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-interactive-post-chat-survey .eg-button-1:not(.eg-input-group-button) {
  border-radius: 5px;
  padding: 14px 25px;
}
#eg-chat-interactive-post-chat-survey .eg-button-1:focus:not([disabled]) {
  outline: 0;
  background-color: #fcc200;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-interactive-post-chat-survey .eg-button-1[disabled] {
  cursor: none;
}
#eg-chat-interactive-post-chat-survey .eg-button-2 {
  background-color: #fff;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
  border: 2px solid #000;
  font-size: 13px;
}
#eg-chat-interactive-post-chat-survey .eg-button-2:hover:not([disabled]) {
  background-color: #000;
  color: #fff;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-interactive-post-chat-survey .eg-button-2:not(.eg-input-group-button) {
  border-radius: 5px;
  padding: 10px 20px;
}
#eg-chat-interactive-post-chat-survey .eg-button-2:focus:not([disabled]) {
  outline: 0;
  background-color: #000;
  color: #fff;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-interactive-post-chat-survey .eg-button-2[disabled] {
  cursor: none;
}
#eg-chat-interactive-post-chat-survey .eg-button-3 {
  background-color: #fff;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
  border: 2px solid transparent;
  font-size: 13px;
}
#eg-chat-interactive-post-chat-survey .eg-button-3:hover:not([disabled]) {
  background-color: #fff;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-interactive-post-chat-survey .eg-button-3:not(.eg-input-group-button) {
  border-radius: 5px;
  padding: 5px 5px;
}
#eg-chat-interactive-post-chat-survey .eg-button-3:focus:not([disabled]) {
  outline: 0;
  background-color: #fff;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-interactive-post-chat-survey .eg-button-3[disabled] {
  cursor: none;
}
#eg-chat-interactive-post-chat-survey .eg-mcq-container .eg-mcq-choices-container {
  display: flex;
  align-items: center;
  padding: 5px 0;
  text-align: center;
  width: 284px;
}
#eg-chat-interactive-post-chat-survey .eg-mcq-container .eg-mcq-choices-container .eg-mcq-choice {
  /*
                 * flex: 0 0 auto; OR none; will NOT make the item grow even when the items are less i.e. items are NOT overflowing
                 *    but will NOT make the item grow when the items are more i.e. items are overflowing
                 *    and will NEVER shrink the item.
                 */
  flex: 0 0 auto;
}
#eg-chat-interactive-post-chat-survey .eg-mcq-container .eg-mcq-choice-image {
  display: flex;
  flex-direction: column;
  border-radius: 5px;
  border: 1px solid #fcc200;
  overflow: hidden;
  /*
             * 137px = 135px (image width) + 2px (border)
             * 137px has been set to show two images complete and one partial image to show that there are more images to scroll
             * It has been set for the OOB width of the docked chat template
             */
  width: 137px;
}
#eg-chat-interactive-post-chat-survey .eg-mcq-container .eg-mcq-choice-image .eg-image-responsive-container {
  height: 135px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
#eg-chat-interactive-post-chat-survey .eg-mcq-container .eg-mcq-choice-image .eg-mcq-button {
  margin: 5px;
}
#eg-chat-interactive-post-chat-survey .eg-mcq-container.eg-choices-stretch .eg-mcq-choice {
  /*
                 * flex-grow: 1; will make the item grow when the items are less i.e. items are NOT overflowing
                 *    but will NOT make the item grow when the items are more i.e. items are overflowing
                 */
  flex-grow: 1;
}
#eg-chat-interactive-post-chat-survey .eg-mcq-container.eg-choices-display-scroll {
  position: relative;
  padding: 0 15px;
}
#eg-chat-interactive-post-chat-survey .eg-mcq-container.eg-choices-display-scroll .eg-scroll-to-start,
#eg-chat-interactive-post-chat-survey .eg-mcq-container.eg-choices-display-scroll .eg-scroll-to-end {
  position: absolute;
  top: 50%;
  z-index: 1;
  display: flex;
  align-items: center;
  transform: translateY(-50%);
  padding: 5px 8px;
}
#eg-chat-interactive-post-chat-survey .eg-mcq-container.eg-choices-display-scroll .eg-scroll-to-start {
  left: -21px;
}
#eg-chat-interactive-post-chat-survey .eg-mcq-container.eg-choices-display-scroll .eg-scroll-to-end {
  right: -21px;
}
#eg-chat-interactive-post-chat-survey .eg-mcq-container.eg-choices-display-scroll .eg-mcq-choices-container {
  overflow-x: auto;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* Internet Explorer 10+ */
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
#eg-chat-interactive-post-chat-survey .eg-mcq-container.eg-choices-display-scroll .eg-mcq-choices-container::-webkit-scrollbar {
  /*display: none; /* It will hide the scrollbar but disable the programmatic scrolling as well */
  width: 0;
  height: 0;
}
@media (prefers-reduced-motion: reduce) {
  #eg-chat-interactive-post-chat-survey .eg-mcq-container.eg-choices-display-scroll .eg-mcq-choices-container {
    scroll-behavior: auto;
  }
}
#eg-chat-interactive-post-chat-survey .eg-mcq-container.eg-choices-display-scroll .eg-mcq-choices-container .eg-mcq-choice + .eg-mcq-choice {
  margin-left: 5px;
}
#eg-chat-interactive-post-chat-survey .eg-mcq-container.eg-choices-display-wrap .eg-scroll-to-start,
#eg-chat-interactive-post-chat-survey .eg-mcq-container.eg-choices-display-wrap .eg-scroll-to-end {
  display: none;
}
#eg-chat-interactive-post-chat-survey .eg-mcq-container.eg-choices-display-wrap .eg-mcq-choices-container {
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: space-between;
  margin-left: -5px;
  margin-top: -5px;
}
#eg-chat-interactive-post-chat-survey .eg-mcq-container.eg-choices-display-wrap .eg-mcq-choices-container .eg-mcq-choice {
  margin-left: 5px;
  margin-top: 5px;
  max-width: calc(100% - 5px);
}
#eg-chat-interactive-post-chat-survey .eg-mcq-container.eg-choices-display-vertical .eg-scroll-to-start,
#eg-chat-interactive-post-chat-survey .eg-mcq-container.eg-choices-display-vertical .eg-scroll-to-end {
  display: none;
}
#eg-chat-interactive-post-chat-survey .eg-mcq-container.eg-choices-display-vertical .eg-mcq-choices-container {
  flex-direction: column;
  align-items: flex-start;
}
#eg-chat-interactive-post-chat-survey .eg-mcq-container.eg-choices-display-vertical .eg-mcq-choices-container .eg-mcq-choice {
  max-width: calc(100% - 5px);
}
#eg-chat-interactive-post-chat-survey .eg-mcq-container.eg-choices-display-vertical .eg-mcq-choices-container .eg-mcq-choice + .eg-mcq-choice {
  margin-top: 5px;
}
#eg-chat-interactive-post-chat-survey .eg-mcq-container.eg-choices-display-vertical.eg-choices-stretch .eg-mcq-choices-container {
  align-items: stretch;
}
#eg-chat-interactive-post-chat-survey .eg-mcq-container.eg-choices-display-vertical.eg-choices-stretch .eg-mcq-choices-container .eg-mcq-choice {
  max-width: calc(100% - 5px);
}
#eg-chat-interactive-post-chat-survey .eg-mcq-container .eg-mcq-choice-selected {
  background-color: #fcc200;
  background-image: linear-gradient(#fcc200, #fcc200);
  color: #fff;
  border-color: #fcc200;
}
#eg-chat-interactive-post-chat-survey .eg-mcq-container .eg-mcq-choice-btn {
  border-width: 2px;
  font-weight: 600;
  padding: 7px 18px;
  font-size: 13px;
}
#eg-chat-interactive-post-chat-survey .eg-survey-choice-wrapper {
  margin-top: 10px;
}
#eg-chat-interactive-post-chat-survey .eg-timetamp-rtl {
  display: flex;
  align-items: center;
}
#eg-chat-interactive-post-chat-survey .eg-confirm-btn-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-customer .eg-message-bubble .eg-message span {
  padding: 1px;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-customer .eg-message-bubble .eg-message span .glyphicon {
  font-size: inherit;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-customer .eg-message-bubble .eg-message span:focus {
  display: inline-block;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-customer .eg-message-wrapper-ie {
  overflow: auto;
  max-width: 100%;
  flex-shrink: 0;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent.textarea {
  display: block;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-message-bubble {
  display: flex;
  flex-direction: column;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-message-bubble.textarea {
  width: auto;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-message-bubble .eg-star-rating {
  margin-top: 10px;
  max-width: fit-content;
  cursor: pointer;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-message-bubble .eg-star-rating span {
  padding-top: 5px;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-message-bubble .eg-star-rating span .glyphicon {
  font-size: inherit;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-message-bubble textarea {
  margin: 10px 0;
  height: 75px;
  border: none;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-message-bubble .eg-textarea-done-btn-wrapper {
  display: flex;
  justify-content: center;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-message-bubble .eg-textarea-done-btn-wrapper button {
  padding: 7px 18px;
}
#eg-chat-interactive-post-chat-survey .eg-message-wrapper-agent .eg-message-wrapper-ie {
  overflow: auto;
  max-width: 100%;
  flex-shrink: 0;
}
#eg-chat-interactive-post-chat-survey .eg-customer-character-count {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 4px;
}
#eg-chat-interactive-post-chat-survey .eg-choices-display-scroll {
  display: flex;
}
.eg-interactive-survey-hidden .eg-component-repeat.eg-component-name-interactive-post-chat-survey,
.eg-interactive-survey-hidden #eg-chat-interactive-post-chat-survey {
  display: none;
}
/* Mobile Specific Styles post-chat-survey component START */
@media only screen and (orientation: landscape) {
  .eg-overlay-xs.input-edit-wrapper .eg-chat-content .eg-component-name-transcript {
    display: none;
  }
  .eg-overlay-xs.input-edit-wrapper .eg-chat-content #eg-chat-interactive-post-chat-survey .eg-message-container:not(.eg-survey-textarea) {
    display: none;
  }
}
/*
Styling for the launch-chat-button component
Changes to this section will apply to the component found in:
components/launch-chat-button/launch-chat-button.html
*/
#eg-launch-chat-button {
  /* Fallback for browsers that do not support gradients */
  background-color: transparent;
  /* Standard syntax: Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image: linear-gradient(transparent, transparent);
  overflow: hidden;
  border: 0px solid transparent;
  border-radius: 30px;
  padding: 0;
  display: flex;
  height: 60px;
  width: 60px;
  transform: scale(1);
  /*
     * To position the component corresponding to the launch button position.
     * It is used since when the chat window is closed the launch button seems to be falling from top
     * because of the height of the iframe chat-wrapper
     */
  position: absolute;
  /*
     * The transition duration and delay used here will affect the duration used in iframe-style.css
     * it should be less than the delay set in iframe-style.css.
     */
  transition: transform 0.5s, width 0.5s ease-out 0s;
}
#eg-launch-chat-button .eg-text-1 {
  color: #000;
  font-family: 'Source Sans Pro Regular', sans-serif;
  font-size: 20px;
  font-weight: normal;
}
#eg-launch-chat-button .eg-text-2 {
  color: #000;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: normal;
}
#eg-launch-chat-button .eg-button-container {
  padding: 10px 15px;
  background-color: #fff;
  color: #000;
}
#eg-launch-chat-button .eg-button-1 {
  background-color: transparent;
  color: #fff;
  transition: background-color 0.2s, color 0.2s;
  border: 2px solid #fcc200;
  font-size: 13px;
}
#eg-launch-chat-button .eg-button-1:hover:not([disabled]) {
  background-color: #000;
  color: #fff;
  transition: background-color 0.2s, color 0.2s;
}
#eg-launch-chat-button .eg-button-1:not(.eg-input-group-button) {
  border-radius: 5px;
  padding: 10px 20px;
}
#eg-launch-chat-button .eg-button-1:focus:not([disabled]) {
  outline: 0;
  background-color: #000;
  color: #fff;
  transition: background-color 0.2s, color 0.2s;
}
#eg-launch-chat-button .eg-button-1[disabled] {
  cursor: none;
}
#eg-launch-chat-button .eg-button-2 {
  background-color: #fcc200;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
  border: 2px solid #fcc200;
  font-size: 13px;
}
#eg-launch-chat-button .eg-button-2:hover:not([disabled]) {
  background-color: #fcc200;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
}
#eg-launch-chat-button .eg-button-2:not(.eg-input-group-button) {
  border-radius: 5px;
  padding: 10px 20px;
}
#eg-launch-chat-button .eg-button-2:focus:not([disabled]) {
  outline: 0;
  background-color: #fcc200;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
}
#eg-launch-chat-button .eg-button-2[disabled] {
  cursor: none;
}
#eg-launch-chat-button .eg-button-3 {
  background-color: transparent;
  color: #fff;
  transition: background-color 0.2s, color 0.2s;
  border: 2px solid transparent;
  font-size: 13px;
}
#eg-launch-chat-button .eg-button-3:hover:not([disabled]) {
  background-color: #000;
  color: #fff;
  transition: background-color 0.2s, color 0.2s;
}
#eg-launch-chat-button .eg-button-3:not(.eg-input-group-button) {
  border-radius: 5px;
  padding: 10px 20px;
}
#eg-launch-chat-button .eg-button-3:focus:not([disabled]) {
  outline: 0;
  background-color: #000;
  color: #fff;
  transition: background-color 0.2s, color 0.2s;
}
#eg-launch-chat-button .eg-button-3[disabled] {
  cursor: none;
}
#eg-launch-chat-button:focus {
  outline: none;
  transform: scale(1.1);
  transition: transform .5s;
}
#eg-launch-chat-button .eg-image {
  /* To position the image relative to the button */
  position: absolute;
  z-index: 1;
  /*
         * Border radius on image is required to workaround a bug in Chrome.
         * Bug in chrome: When a DIV element has rounded border radius, overflow: hidden and hover action set and has a positioned child image element.
         *    Even when the parent element has overflow: hidden set, a square child image will trigger the hover on the parent
         *    as if the parent element was square (due to hover on the protruding square image).
         *    Although the image will NOT appear outside the rounded parent element.
         * It should be equal to more than the border radius set on the component.
         */
  border-radius: inherit;
  /*
         * flex: none; height: 60px; and width: 60px; are required to make the image fit the available width height of the component.
         */
  flex: none;
  height: 60px;
  width: 60px;
  opacity: 0;
  transition: opacity 0.7s ease-in 0.3s;
}
#eg-launch-chat-button .eg-image.eg-image-src-available {
  opacity: 1;
}
#eg-launch-chat-button .eg-launch-button {
  outline: none;
  border: none;
  box-shadow: none;
  width: 210px;
  /* Some width needs to be provided for ellipsis to work
                      Ideally it should match the total width of the component on hover */
  flex: none;
  /* flex: none, will NOT grow/shrink the button dependent upon the total width available
        Growing/shrinking has been disabled to provide sliding animation else it would be growing animation*/
}
#eg-launch-chat-button .eg-launch-button.eg-button-ltr {
  padding-left: 65px;
  /* Should be used to align the text horizontally, it may also match the image width */
}
#eg-launch-chat-button .eg-launch-button .eg-button-text {
  opacity: 0;
  transition: opacity 0.7s ease-in-out;
}
#eg-launch-chat-button.eg-launch-right-bottom {
  bottom: 0;
  right: 0;
}
#eg-launch-chat-button.eg-launch-left-bottom {
  bottom: 0;
  left: 0;
}
#eg-launch-chat-button.eg-launch-right-center {
  bottom: 0;
  right: 0;
}
#eg-launch-chat-button.eg-launch-left-center {
  bottom: 0;
  left: 0;
}
#eg-launch-chat-button.eg-shadow {
  box-shadow: 0px 5px 15px 1px rgba(0, 0, 0, 0.6);
}
#eg-launch-chat-button.eg-animation:hover {
  width: 210px;
}
#eg-launch-chat-button.eg-animation:hover .eg-button-text {
  opacity: 1;
}
/* Mobile Specific Styles launch-chat-button component START */
/* Mobile Specific Styles launch-chat-button component END */
/*
Styling for the launch-va-button component
Changes to this section will apply to the component found in:
components/launch-va-button/launch-va-button.html
*/
#eg-launch-va-button {
  /* Fallback for browsers that do not support gradients */
  background-color: transparent;
  /* Standard syntax: Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image: linear-gradient(transparent, transparent);
  overflow: hidden;
  border: 0 solid transparent;
  border-radius: 0;
  padding: 0;
  display: flex;
  align-items: flex-end;
  height: 60px;
  width: 60px;
  transform: scale(1);
  /*
     * To position the component corresponding to the launch button position.
     * It is used since when the chat window is closed the launch button seems to be falling from top
     * because of the height of the iframe chat-wrapper
     */
  position: absolute;
  /*
     * The transition duration and delay used here will affect the duration used in iframe-style.css
     * it should be less than the delay set in iframe-style.css.
     */
  transition: transform 0.5s, width 0.5s ease-out 0s;
}
#eg-launch-va-button .eg-text-1 {
  color: #000;
  font-family: 'Source Sans Pro Regular', sans-serif;
  font-size: 20px;
  font-weight: normal;
}
#eg-launch-va-button .eg-text-2 {
  color: #000;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: normal;
}
#eg-launch-va-button .eg-button-container {
  padding: 10px 15px;
  background-color: #fff;
  color: #000;
}
#eg-launch-va-button .eg-button-1 {
  background-color: transparent;
  color: #fff;
  transition: background-color 0.2s, color 0.2s;
  border: 2px solid #fcc200;
  font-size: 13px;
}
#eg-launch-va-button .eg-button-1:hover:not([disabled]) {
  background-color: #000;
  color: #fff;
  transition: background-color 0.2s, color 0.2s;
}
#eg-launch-va-button .eg-button-1:not(.eg-input-group-button) {
  border-radius: 5px;
  padding: 10px 20px;
}
#eg-launch-va-button .eg-button-1:focus:not([disabled]) {
  outline: 0;
  background-color: #000;
  color: #fff;
  transition: background-color 0.2s, color 0.2s;
}
#eg-launch-va-button .eg-button-1[disabled] {
  cursor: none;
}
#eg-launch-va-button .eg-button-2 {
  background-color: #fcc200;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
  border: 2px solid #fcc200;
  font-size: 13px;
}
#eg-launch-va-button .eg-button-2:hover:not([disabled]) {
  background-color: #fcc200;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
}
#eg-launch-va-button .eg-button-2:not(.eg-input-group-button) {
  border-radius: 5px;
  padding: 10px 20px;
}
#eg-launch-va-button .eg-button-2:focus:not([disabled]) {
  outline: 0;
  background-color: #fcc200;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
}
#eg-launch-va-button .eg-button-2[disabled] {
  cursor: none;
}
#eg-launch-va-button .eg-button-3 {
  background-color: transparent;
  color: #fff;
  transition: background-color 0.2s, color 0.2s;
  border: 2px solid transparent;
  font-size: 13px;
}
#eg-launch-va-button .eg-button-3:hover:not([disabled]) {
  background-color: #000;
  color: #fff;
  transition: background-color 0.2s, color 0.2s;
}
#eg-launch-va-button .eg-button-3:not(.eg-input-group-button) {
  border-radius: 5px;
  padding: 10px 20px;
}
#eg-launch-va-button .eg-button-3:focus:not([disabled]) {
  outline: 0;
  background-color: #000;
  color: #fff;
  transition: background-color 0.2s, color 0.2s;
}
#eg-launch-va-button .eg-button-3[disabled] {
  cursor: none;
}
#eg-launch-va-button:focus {
  outline: none;
  transform: scale(1.1);
  transition: transform .5s;
}
#eg-launch-va-button .eg-image {
  /*
         * Border radius on image is required to workaround a bug in Chrome.
         * Bug in chrome: When a DIV element has rounded border radius, overflow: hidden and hover action set and has a positioned child image element.
         *    Even when the parent element has overflow: hidden set, a square child image will trigger the hover on the parent
         *    as if the parent element was square (due to hover on the protruding square image).
         *    Although the image will NOT appear outside the rounded parent element.
         * It should be equal to more than the border radius set on the component.
         */
  border-radius: inherit;
  /*
         * flex: none; height: 165px; and width: 165px; are required to make the image fit the available width height of the component.
         */
  flex: none;
  height: 60px;
  width: 60px;
  opacity: 0;
  transition: opacity 0.7s ease-in 0.3s;
}
#eg-launch-va-button .eg-image.eg-image-src-available {
  opacity: 1;
}
#eg-launch-va-button .eg-launch-button {
  outline: none;
  border: none;
  box-shadow: none;
  margin-bottom: 2px;
  margin-left: 5px;
  height: 56px;
  width: 240px;
  /* Some width needs to be provided for ellipsis to work */
  flex: none;
  /* flex: none, will NOT grow/shrink the button dependent upon the total width available
        Growing/shrinking has been disabled to provide sliding animation else it would be growing animation*/
  opacity: 0;
  transition: opacity 0.7s ease-in-out;
}
#eg-launch-va-button.eg-launch-right-bottom {
  bottom: 0;
  right: 0;
}
#eg-launch-va-button.eg-launch-left-bottom {
  bottom: 0;
  left: 0;
}
#eg-launch-va-button.eg-launch-right-center {
  bottom: 0;
  right: 0;
}
#eg-launch-va-button.eg-launch-left-center {
  bottom: 0;
  left: 0;
}
#eg-launch-va-button.eg-shadow .eg-launch-button {
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.6);
}
#eg-launch-va-button.eg-animation:hover {
  width: 310px;
}
#eg-launch-va-button.eg-animation:hover .eg-launch-button {
  opacity: 1;
}
/* Mobile Specific Styles launch-button component START */
/* Mobile Specific Styles launch-button component END */
/*
Styling for the maximize-chat-button component
Changes to this section will apply to the component found in:
components/maximize-chat-button/maximize-chat-button.html
*/
#eg-maximize-chat-button {
  /* Fallback for browsers that do not support gradients */
  background-color: transparent;
  /* Standard syntax: Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image: linear-gradient(transparent, transparent);
  overflow: hidden;
  border: 0px solid transparent;
  border-radius: 30px;
  padding: 0;
  display: flex;
  height: 60px;
  width: 60px;
  /*
     * To position the component corresponding to the maximize button position.
     * It is used since when the chat window is closed the maximize button seems to be falling from top
     * because of the height of the iframe chat-wrapper
     */
  position: absolute;
  /*
     * The transition duration and delay used here will affect the duration used in iframe-style.css
     * it should be less than the delay set in iframe-style.css.
     */
  transition: width 0.5s ease-out 0s;
}
#eg-maximize-chat-button .eg-text-1 {
  color: #000;
  font-family: 'Source Sans Pro Regular', sans-serif;
  font-size: 20px;
  font-weight: normal;
}
#eg-maximize-chat-button .eg-text-2 {
  color: #000;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: normal;
}
#eg-maximize-chat-button .eg-button-container {
  padding: 10px 15px;
  background-color: #fff;
  color: #000;
}
#eg-maximize-chat-button .eg-button-1 {
  background-color: transparent;
  color: #fff;
  transition: background-color 0.2s, color 0.2s;
  border: 2px solid #fcc200;
  font-size: 13px;
}
#eg-maximize-chat-button .eg-button-1:hover:not([disabled]) {
  background-color: #000;
  color: #fff;
  transition: background-color 0.2s, color 0.2s;
}
#eg-maximize-chat-button .eg-button-1:not(.eg-input-group-button) {
  border-radius: 5px;
  padding: 10px 20px;
}
#eg-maximize-chat-button .eg-button-1:focus:not([disabled]) {
  outline: 0;
  background-color: #000;
  color: #fff;
  transition: background-color 0.2s, color 0.2s;
}
#eg-maximize-chat-button .eg-button-1[disabled] {
  cursor: none;
}
#eg-maximize-chat-button .eg-button-2 {
  background-color: #fcc200;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
  border: 2px solid #fcc200;
  font-size: 13px;
}
#eg-maximize-chat-button .eg-button-2:hover:not([disabled]) {
  background-color: #fcc200;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
}
#eg-maximize-chat-button .eg-button-2:not(.eg-input-group-button) {
  border-radius: 5px;
  padding: 10px 20px;
}
#eg-maximize-chat-button .eg-button-2:focus:not([disabled]) {
  outline: 0;
  background-color: #fcc200;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
}
#eg-maximize-chat-button .eg-button-2[disabled] {
  cursor: none;
}
#eg-maximize-chat-button .eg-button-3 {
  background-color: transparent;
  color: #fff;
  transition: background-color 0.2s, color 0.2s;
  border: 2px solid transparent;
  font-size: 13px;
}
#eg-maximize-chat-button .eg-button-3:hover:not([disabled]) {
  background-color: #000;
  color: #fff;
  transition: background-color 0.2s, color 0.2s;
}
#eg-maximize-chat-button .eg-button-3:not(.eg-input-group-button) {
  border-radius: 5px;
  padding: 10px 20px;
}
#eg-maximize-chat-button .eg-button-3:focus:not([disabled]) {
  outline: 0;
  background-color: #000;
  color: #fff;
  transition: background-color 0.2s, color 0.2s;
}
#eg-maximize-chat-button .eg-button-3[disabled] {
  cursor: none;
}
#eg-maximize-chat-button:focus {
  transform: scale(1.1);
  transition: transform .5s;
  outline: none;
}
#eg-maximize-chat-button .eg-image {
  /* To position the image relative to the button */
  position: absolute;
  z-index: 1;
  /*
         * Border radius on image is required to workaround a bug in Chrome.
         * Bug in chrome: When a DIV element has rounded border radius, overflow: hidden and hover action set and has a positioned child image element.
         *    Even when the parent element has overflow: hidden set, a square child image will trigger the hover on the parent
         *    as if the parent element was square (due to hover on the protruding square image).
         *    Although the image will NOT appear outside the rounded parent element.
         * It should be equal to more than the border radius set on the component.
         */
  border-radius: inherit;
  /*
         * flex: none; height: 60px; and width: 60px; are required to make the image fit the available width height of the component.
         */
  flex: none;
  height: 60px;
  width: 60px;
  opacity: 0;
  transition: opacity 0.7s ease-in 0.3s;
}
#eg-maximize-chat-button .eg-image.eg-image-src-available {
  opacity: 1;
}
#eg-maximize-chat-button .eg-maximize-button {
  outline: none;
  border: none;
  box-shadow: none;
  width: 210px;
  /* Some width needs to be provided for ellipsis to work
                      Ideally it should match the total width of the component on hover */
  flex: none;
  /* flex: none, will NOT grow/shrink the button dependent upon the total width available
        Growing/shrinking has been disabled to provide sliding animation else it would be growing animation*/
}
#eg-maximize-chat-button .eg-maximize-button.eg-button-1 {
  padding-left: 45px;
  /* Should be used to align the text horizontally, it may also match the image width */
}
#eg-maximize-chat-button .eg-maximize-button .eg-button-text {
  opacity: 0;
  transition: opacity 0.7s ease-in-out;
}
#eg-maximize-chat-button.eg-maximize-right-bottom {
  bottom: 0;
  right: 0;
}
#eg-maximize-chat-button.eg-maximize-left-bottom {
  bottom: 0;
  left: 0;
}
#eg-maximize-chat-button.eg-maximize-right-center {
  bottom: 0;
  right: 0;
}
#eg-maximize-chat-button.eg-maximize-left-center {
  bottom: 0;
  left: 0;
}
#eg-maximize-chat-button.eg-shadow {
  box-shadow: 0px 5px 15px 1px rgba(0, 0, 0, 0.6);
}
#eg-maximize-chat-button.eg-animation:hover {
  width: 210px;
}
#eg-maximize-chat-button.eg-animation:hover .eg-button-text {
  opacity: 1;
}
#eg-maximize-chat-button .eg-badge {
  z-index: 100000;
  position: fixed;
  /* Setting position fixed since the component overflow is hidden */
  top: 10px;
  right: 10px;
  color: #fff;
  background: #A82624;
  cursor: default;
}
.eg-maximized .eg-component-repeat.eg-component-name-maximize-chat-button,
.eg-maximized #eg-maximize-chat-button {
  display: none;
}
.eg-minimized .eg-va-active .eg-component-repeat.eg-component-name-maximize-chat-button,
.eg-minimized .eg-va-active #eg-maximize-chat-button {
  display: none;
}
/* Mobile Specific Styles maximize-chat-button component START */
/* Mobile Specific Styles maximize-chat-button component END */
/*
Styling for the maximize-va-button component
Changes to this section will apply to the component found in:
components/maximize-va-button/maximize-va-button.html
*/
#eg-chat-maximize-va-button {
  /* Fallback for browsers that do not support gradients */
  background-color: transparent;
  /* Standard syntax: Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image: linear-gradient(transparent, transparent);
  overflow: hidden;
  border: 0 solid transparent;
  border-radius: 30px;
  padding: 0;
  display: flex;
  height: 60px;
  width: 60px;
  /*
     * To position the component corresponding to the maximize button position.
     * It is used since when the chat window is closed the maximize button seems to be falling from top
     * because of the height of the iframe chat-wrapper
     */
  position: absolute;
  /*
     * The transition duration and delay used here will affect the duration used in iframe-style.css
     * it should be less than the delay set in iframe-style.css.
     */
  transition: width 0.5s ease-out 0s;
}
#eg-chat-maximize-va-button .eg-text-1 {
  color: #000;
  font-family: 'Source Sans Pro Regular', sans-serif;
  font-size: 20px;
  font-weight: normal;
}
#eg-chat-maximize-va-button .eg-text-2 {
  color: #000;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: normal;
}
#eg-chat-maximize-va-button .eg-button-container {
  padding: 10px 15px;
  background-color: #fff;
  color: #000;
}
#eg-chat-maximize-va-button .eg-button-1 {
  background-color: transparent;
  color: #fff;
  transition: background-color 0.2s, color 0.2s;
  border: 2px solid #fcc200;
  font-size: 13px;
}
#eg-chat-maximize-va-button .eg-button-1:hover:not([disabled]) {
  background-color: #000;
  color: #fff;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-maximize-va-button .eg-button-1:not(.eg-input-group-button) {
  border-radius: 5px;
  padding: 10px 20px;
}
#eg-chat-maximize-va-button .eg-button-1:focus:not([disabled]) {
  outline: 0;
  background-color: #000;
  color: #fff;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-maximize-va-button .eg-button-1[disabled] {
  cursor: none;
}
#eg-chat-maximize-va-button .eg-button-2 {
  background-color: #fcc200;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
  border: 2px solid #fcc200;
  font-size: 13px;
}
#eg-chat-maximize-va-button .eg-button-2:hover:not([disabled]) {
  background-color: #fcc200;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-maximize-va-button .eg-button-2:not(.eg-input-group-button) {
  border-radius: 5px;
  padding: 10px 20px;
}
#eg-chat-maximize-va-button .eg-button-2:focus:not([disabled]) {
  outline: 0;
  background-color: #fcc200;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-maximize-va-button .eg-button-2[disabled] {
  cursor: none;
}
#eg-chat-maximize-va-button .eg-button-3 {
  background-color: transparent;
  color: #fff;
  transition: background-color 0.2s, color 0.2s;
  border: 2px solid transparent;
  font-size: 13px;
}
#eg-chat-maximize-va-button .eg-button-3:hover:not([disabled]) {
  background-color: #000;
  color: #fff;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-maximize-va-button .eg-button-3:not(.eg-input-group-button) {
  border-radius: 5px;
  padding: 10px 20px;
}
#eg-chat-maximize-va-button .eg-button-3:focus:not([disabled]) {
  outline: 0;
  background-color: #000;
  color: #fff;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-maximize-va-button .eg-button-3[disabled] {
  cursor: none;
}
#eg-chat-maximize-va-button:focus {
  outline: none;
  transform: scale(1.1);
  transition: transform .5s;
}
#eg-chat-maximize-va-button .eg-image {
  /* To position the image relative to the button */
  position: absolute;
  z-index: 1;
  /*
         * Border radius on image is required to workaround a bug in Chrome.
         * Bug in chrome: When a DIV element has rounded border radius, overflow: hidden and hover action set and has a positioned child image element.
         *    Even when the parent element has overflow: hidden set, a square child image will trigger the hover on the parent
         *    as if the parent element was square (due to hover on the protruding square image).
         *    Although the image will NOT appear outside the rounded parent element.
         * It should be equal to more than the border radius set on the component.
         */
  border-radius: inherit;
  /*
         * flex: none; height: 60px; and width: 60px; are required to make the image fit the available width height of the component.
         */
  flex: none;
  height: 60px;
  width: 60px;
  opacity: 0;
  transition: opacity 0.7s ease-in 0.3s;
}
#eg-chat-maximize-va-button .eg-image.eg-image-src-available {
  opacity: 1;
}
#eg-chat-maximize-va-button .eg-maximize-button {
  outline: none;
  border: none;
  box-shadow: none;
  width: 210px;
  /* Some width needs to be provided for ellipsis to work
                      Ideally it should match the total width of the component on hover */
  flex: none;
  /* flex: none, will NOT grow/shrink the button dependent upon the total width available
        Growing/shrinking has been disabled to provide sliding animation else it would be growing animation*/
}
#eg-chat-maximize-va-button .eg-maximize-button.eg-button-1 {
  padding-left: 45px;
  /* Should be used to align the text horizontally, it may also match the image width */
}
#eg-chat-maximize-va-button .eg-maximize-button .eg-button-text {
  opacity: 0;
  transition: opacity 0.7s ease-in-out;
}
#eg-chat-maximize-va-button.eg-maximize-right-bottom {
  bottom: 0;
  right: 0;
}
#eg-chat-maximize-va-button.eg-maximize-left-bottom {
  bottom: 0;
  left: 0;
}
#eg-chat-maximize-va-button.eg-maximize-right-center {
  bottom: 0;
  right: 0;
}
#eg-chat-maximize-va-button.eg-maximize-left-center {
  bottom: 0;
  left: 0;
}
#eg-chat-maximize-va-button.eg-shadow {
  box-shadow: 0px 5px 15px 1px rgba(0, 0, 0, 0.6);
}
#eg-chat-maximize-va-button.eg-animation:hover {
  width: 210px;
}
#eg-chat-maximize-va-button.eg-animation:hover .eg-button-text {
  opacity: 1;
}
#eg-chat-maximize-va-button .eg-badge {
  z-index: 100000;
  position: fixed;
  /* Setting position fixed since the component overflow is hidden */
  top: 10px;
  right: 10px;
  color: #fff;
  background: #A82624;
  cursor: default;
}
.eg-maximized .eg-component-repeat.eg-component-name-maximize-va-button,
.eg-maximized #eg-chat-maximize-va-button {
  display: none;
}
.eg-minimized .eg-chat-active .eg-component-repeat.eg-component-name-maximize-va-button,
.eg-minimized .eg-chat-active #eg-chat-maximize-va-button {
  display: none;
}
/* Mobile Specific Styles maximize-chat-button component START */
/* Mobile Specific Styles maximize-chat-button component END */
/*
Styling for the message-input component
Changes to this section will apply to the component found in:
components/message-input/message-input.html
*/
#eg-chat-message-input {
  /* Fallback for browsers that do not support gradients */
  background-color: #fff;
  /* Standard syntax: Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image: linear-gradient(#fff, #fff);
  overflow: hidden;
  border-top: 1px solid #999999;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  color: #000;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: normal;
  background-color: transparent;
  -webkit-overflow-scrolling: touch;
  /*
    * Following properties are added for Desktop and Mobile Firefox
    */
  scrollbar-width: thin;
  scrollbar-color: #D2D9DC #ffffff;
  position: relative;
  opacity: 1;
}
#eg-chat-message-input .eg-form-control {
  box-shadow: none;
}
#eg-chat-message-input .eg-form-control:focus {
  box-shadow: none;
}
#eg-chat-message-input .eg-form-control {
  background-color: #fff;
  border-color: #999999;
  color: #000;
  border: 0px solid #999999;
  border-radius: 5px;
}
#eg-chat-message-input .eg-form-control:focus {
  border-color: #999999;
}
#eg-chat-message-input .eg-form-control:disabled {
  background-color: #eee;
}
#eg-chat-message-input input.eg-form-control:placeholder-shown,
#eg-chat-message-input textarea.eg-form-control:placeholder-shown {
  color: #000;
}
#eg-chat-message-input input.eg-form-control::-webkit-input-placeholder,
#eg-chat-message-input textarea.eg-form-control::-webkit-input-placeholder {
  color: #000;
}
#eg-chat-message-input .eg-badge {
  color: #fff;
  background: #A82624;
  font-weight: normal;
}
#eg-chat-message-input .eg-button-1 {
  background-color: #fff;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
  border: 2px solid #000;
  font-size: 13px;
}
#eg-chat-message-input .eg-button-1:hover:not([disabled]) {
  background-color: #000;
  color: #fff;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-message-input .eg-button-1:not(.eg-input-group-button) {
  border-radius: 20px;
  padding: 10px 20px;
}
#eg-chat-message-input .eg-button-1:focus:not([disabled]) {
  outline: 0;
  background-color: #000;
  color: #fff;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-message-input .eg-button-1[disabled] {
  cursor: none;
}
#eg-chat-message-input .eg-button-2 {
  background-color: #fff;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
  border: 2px solid transparent;
  font-size: 13px;
}
#eg-chat-message-input .eg-button-2:hover:not([disabled]) {
  background-color: #fff;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-message-input .eg-button-2:not(.eg-input-group-button) {
  border-radius: 5px;
  padding: 10px 20px;
}
#eg-chat-message-input .eg-button-2:focus:not([disabled]) {
  outline: 0;
  background-color: #fff;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-message-input .eg-button-2[disabled] {
  cursor: none;
}
#eg-chat-message-input .eg-button-3 {
  background-color: #fcc200;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
  border: 2px solid #fcc200;
  font-size: 13px;
}
#eg-chat-message-input .eg-button-3:hover:not([disabled]) {
  background-color: #fcc200;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-message-input .eg-button-3:not(.eg-input-group-button) {
  border-radius: 5px;
  padding: 10px 20px;
}
#eg-chat-message-input .eg-button-3:focus:not([disabled]) {
  outline: 0;
  background-color: #fcc200;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-message-input .eg-button-3[disabled] {
  cursor: none;
}
#eg-chat-message-input .eg-mcq-container .eg-mcq-choices-container {
  display: flex;
  align-items: center;
  padding: 5px 0;
  text-align: center;
  width: 284px;
}
#eg-chat-message-input .eg-mcq-container .eg-mcq-choices-container .eg-mcq-choice {
  /*
                 * flex: 0 0 auto; OR none; will NOT make the item grow even when the items are less i.e. items are NOT overflowing
                 *    but will NOT make the item grow when the items are more i.e. items are overflowing
                 *    and will NEVER shrink the item.
                 */
  flex: 0 0 auto;
}
#eg-chat-message-input .eg-mcq-container .eg-mcq-choice-image {
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  border: 1px solid #000;
  overflow: hidden;
  /*
             * 137px = 135px (image width) + 2px (border)
             * 137px has been set to show two images complete and one partial image to show that there are more images to scroll
             * It has been set for the OOB width of the docked chat template
             */
  width: 137px;
}
#eg-chat-message-input .eg-mcq-container .eg-mcq-choice-image .eg-image-responsive-container {
  height: 135px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
#eg-chat-message-input .eg-mcq-container .eg-mcq-choice-image .eg-mcq-button {
  margin: 5px;
}
#eg-chat-message-input .eg-mcq-container.eg-choices-stretch .eg-mcq-choice {
  /*
                 * flex-grow: 1; will make the item grow when the items are less i.e. items are NOT overflowing
                 *    but will NOT make the item grow when the items are more i.e. items are overflowing
                 */
  flex-grow: 1;
}
#eg-chat-message-input .eg-mcq-container.eg-choices-display-scroll {
  position: relative;
  padding: 0 15px;
}
#eg-chat-message-input .eg-mcq-container.eg-choices-display-scroll .eg-scroll-to-start,
#eg-chat-message-input .eg-mcq-container.eg-choices-display-scroll .eg-scroll-to-end {
  position: absolute;
  top: 50%;
  z-index: 1;
  display: flex;
  align-items: center;
  transform: translateY(-50%);
  padding: 5px 8px;
}
#eg-chat-message-input .eg-mcq-container.eg-choices-display-scroll .eg-scroll-to-start {
  left: -21px;
}
#eg-chat-message-input .eg-mcq-container.eg-choices-display-scroll .eg-scroll-to-end {
  right: -21px;
}
#eg-chat-message-input .eg-mcq-container.eg-choices-display-scroll .eg-mcq-choices-container {
  overflow-x: auto;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* Internet Explorer 10+ */
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
#eg-chat-message-input .eg-mcq-container.eg-choices-display-scroll .eg-mcq-choices-container::-webkit-scrollbar {
  /*display: none; /* It will hide the scrollbar but disable the programmatic scrolling as well */
  width: 0;
  height: 0;
}
@media (prefers-reduced-motion: reduce) {
  #eg-chat-message-input .eg-mcq-container.eg-choices-display-scroll .eg-mcq-choices-container {
    scroll-behavior: auto;
  }
}
#eg-chat-message-input .eg-mcq-container.eg-choices-display-scroll .eg-mcq-choices-container .eg-mcq-choice + .eg-mcq-choice {
  margin-left: 5px;
}
#eg-chat-message-input .eg-mcq-container.eg-choices-display-wrap .eg-scroll-to-start,
#eg-chat-message-input .eg-mcq-container.eg-choices-display-wrap .eg-scroll-to-end {
  display: none;
}
#eg-chat-message-input .eg-mcq-container.eg-choices-display-wrap .eg-mcq-choices-container {
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: space-between;
  margin-left: -5px;
  margin-top: -5px;
}
#eg-chat-message-input .eg-mcq-container.eg-choices-display-wrap .eg-mcq-choices-container .eg-mcq-choice {
  margin-left: 5px;
  margin-top: 5px;
  max-width: calc(100% - 5px);
}
#eg-chat-message-input .eg-mcq-container.eg-choices-display-vertical .eg-scroll-to-start,
#eg-chat-message-input .eg-mcq-container.eg-choices-display-vertical .eg-scroll-to-end {
  display: none;
}
#eg-chat-message-input .eg-mcq-container.eg-choices-display-vertical .eg-mcq-choices-container {
  flex-direction: column;
  align-items: flex-start;
}
#eg-chat-message-input .eg-mcq-container.eg-choices-display-vertical .eg-mcq-choices-container .eg-mcq-choice {
  max-width: calc(100% - 5px);
}
#eg-chat-message-input .eg-mcq-container.eg-choices-display-vertical .eg-mcq-choices-container .eg-mcq-choice + .eg-mcq-choice {
  margin-top: 5px;
}
#eg-chat-message-input .eg-mcq-container.eg-choices-display-vertical.eg-choices-stretch .eg-mcq-choices-container {
  align-items: stretch;
}
#eg-chat-message-input .eg-mcq-container.eg-choices-display-vertical.eg-choices-stretch .eg-mcq-choices-container .eg-mcq-choice {
  max-width: calc(100% - 5px);
}
#eg-chat-message-input .eg-mcq-container .eg-mcq-choice-selected {
  background-color: #fcc200;
  background-image: linear-gradient(#fcc200, #fcc200);
  color: #fff;
  border-color: #fcc200;
}
#eg-chat-message-input .eg-mcq-container .eg-mcq-choice-btn {
  border-width: 2px;
  font-weight: 600;
  padding: 7px 18px;
  font-size: 13px;
}
#eg-chat-message-input::-webkit-scrollbar-track {
  background-color: transparent;
}
#eg-chat-message-input::-webkit-scrollbar {
  width: 7px;
  background-color: #ffffff;
}
#eg-chat-message-input::-webkit-scrollbar-thumb {
  border: none;
  border-image-source: initial;
  border-image-slice: initial;
  border-image-width: initial;
  border-image-outset: initial;
  border-image-repeat: initial;
  background-clip: padding-box;
  height: 50px;
  border-radius: 5px;
  background-color: #D2D9DC !important;
}
#eg-chat-message-input.disabled,
#eg-chat-message-input.disabled-add {
  background-color: #eee;
  background-image: linear-gradient(#eee, #eee);
}
#eg-chat-message-input.inactive {
  opacity: 0;
}
#eg-chat-message-input .eg-mcq-container .eg-mcq-choices-container {
  display: flex;
  align-items: center;
  padding: 5px 0;
  text-align: center;
}
#eg-chat-message-input .eg-mcq-container .eg-mcq-choices-container .eg-mcq-choice {
  /*
                 * flex: 0 0 auto; OR none; will NOT make the item grow even when the items are less i.e. items are NOT overflowing
                 *    but will NOT make the item grow when the items are more i.e. items are overflowing
                 *    and will NEVER shrink the item.
                 */
  flex: 0 0 auto;
}
#eg-chat-message-input .eg-mcq-container .eg-mcq-choices-container .eg-mcq-choice-selected {
  background-color: #000;
  background-image: linear-gradient(#000, #000);
  color: #fff;
  border-color: #000;
}
#eg-chat-message-input .eg-mcq-container .eg-mcq-choice-image {
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  border: 1px solid #000;
  overflow: hidden;
  /*
             * 137px = 135px (image width) + 2px (border)
             * 137px has been set to show two images complete and one partial image to show that there are more images to scroll
             * It has been set for the OOB width of the docked chat template
             */
  width: 137px;
}
#eg-chat-message-input .eg-mcq-container .eg-mcq-choice-image .eg-image-responsive-container {
  height: 135px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
#eg-chat-message-input .eg-mcq-container .eg-mcq-choice-image .eg-mcq-button {
  margin: 5px;
}
#eg-chat-message-input .eg-mcq-container.eg-choices-stretch .eg-mcq-choice {
  /*
                 * flex-grow: 1; will make the item grow when the items are less i.e. items are NOT overflowing
                 *    but will NOT make the item grow when the items are more i.e. items are overflowing
                 */
  flex-grow: 1;
}
#eg-chat-message-input .eg-mcq-container.eg-choices-display-scroll {
  position: relative;
  padding: 0 15px;
}
#eg-chat-message-input .eg-mcq-container.eg-choices-display-scroll .eg-scroll-to-start,
#eg-chat-message-input .eg-mcq-container.eg-choices-display-scroll .eg-scroll-to-end {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
}
#eg-chat-message-input .eg-mcq-container.eg-choices-display-scroll .eg-scroll-to-start {
  left: -15px;
  padding-left: 5px;
}
#eg-chat-message-input .eg-mcq-container.eg-choices-display-scroll .eg-scroll-to-end {
  right: -15px;
  padding-right: 5px;
}
#eg-chat-message-input .eg-mcq-container.eg-choices-display-scroll .eg-mcq-choices-container {
  overflow-x: auto;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* Internet Explorer 10+ */
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
#eg-chat-message-input .eg-mcq-container.eg-choices-display-scroll .eg-mcq-choices-container::-webkit-scrollbar {
  /*display: none; /* It will hide the scrollbar but disable the programmatic scrolling as well */
  width: 0;
  height: 0;
}
@media (prefers-reduced-motion: reduce) {
  #eg-chat-message-input .eg-mcq-container.eg-choices-display-scroll .eg-mcq-choices-container {
    scroll-behavior: auto;
  }
}
#eg-chat-message-input .eg-mcq-container.eg-choices-display-scroll .eg-mcq-choices-container .eg-mcq-choice + .eg-mcq-choice {
  margin-left: 5px;
}
#eg-chat-message-input .eg-mcq-container.eg-choices-display-wrap .eg-scroll-to-start,
#eg-chat-message-input .eg-mcq-container.eg-choices-display-wrap .eg-scroll-to-end {
  display: none;
}
#eg-chat-message-input .eg-mcq-container.eg-choices-display-wrap .eg-mcq-choices-container {
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: space-between;
  margin-left: -5px;
  margin-top: -5px;
}
#eg-chat-message-input .eg-mcq-container.eg-choices-display-wrap .eg-mcq-choices-container .eg-mcq-choice {
  margin-left: 5px;
  margin-top: 5px;
  max-width: calc(100% - 5px);
}
#eg-chat-message-input .eg-message-typing-container {
  display: flex;
}
#eg-chat-message-input .eg-form-control {
  padding: 23px 0px !important;
  /*margin-top: 2px;*/
  height: 70px;
}
#eg-chat-message-input .eg-attachment-button,
#eg-chat-message-input .eg-send-button {
  display: flex;
  align-items: center;
  padding: 15px;
  margin-right: -15px;
  margin-top: 15px;
  padding: 8px;
}
#eg-chat-message-input .eg-attachment-button:focus,
#eg-chat-message-input .eg-send-button:focus {
  border-radius: 50%;
  outline: none;
  transition: background-color 0.2s;
  background: #d4d9dc;
}
#eg-chat-message-input .eg-attachment-button.disabled,
#eg-chat-message-input .eg-send-button.disabled {
  opacity: 0.4;
  pointer-events: none;
}
#eg-chat-message-input .eg-attachment-img,
#eg-chat-message-input .eg-send-img {
  width: 20px;
}
#eg-chat-message-input .eg-send-img {
  margin-left: 2px;
}
#eg-chat-message-input .eg-customer-character-count {
  position: absolute;
  z-index: 4;
  top: 0;
  left: auto;
  transition: opacity 0.5s ease-out;
}
#eg-chat-message-input .eg-customer-character-count.ng-hide-add {
  opacity: 1;
  transition-duration: 3s;
}
#eg-chat-message-input .eg-customer-character-count.ng-hide-add-active {
  opacity: 0;
}
#eg-chat-message-input .eg-customer-character-count.ng-hide-remove {
  opacity: 0;
}
#eg-chat-message-input .eg-customer-character-count.ng-hide-remove-active {
  opacity: 1;
}
@media (max-device-width: 767px) {
  .eg-overlay-xs #eg-chat-message-input .form-control {
    font-size: 16px !important;
  }
}
/* Mobile Specific Styles message-input component END */
/*
Styling for the post-chat-submit component
Changes to this section will apply to the component found in:
components/post-chat-submit/post-chat-submit.html
*/
#eg-chat-post-chat-submit {
  /* Fallback for browsers that do not support gradients */
  background-color: #fff;
  /* Standard syntax: Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image: linear-gradient(#fff, #fff);
  overflow: hidden;
  border: 0 solid transparent;
  border-radius: 0;
  display: flex;
  justify-content: center;
  padding-top: 17px;
  padding-bottom: 10px;
}
#eg-chat-post-chat-submit .eg-text-1 {
  color: #000;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: normal;
}
#eg-chat-post-chat-submit .eg-text-2 {
  color: #000;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: normal;
}
#eg-chat-post-chat-submit .eg-button-container {
  padding: 10px 15px;
  background-color: #fff;
  color: #000;
}
#eg-chat-post-chat-submit .eg-button-1 {
  background-color: #fcc200;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
  border: 2px solid #fcc200;
  font-size: 13px;
}
#eg-chat-post-chat-submit .eg-button-1:hover:not([disabled]) {
  background-color: #fcc200;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-post-chat-submit .eg-button-1:not(.eg-input-group-button) {
  border-radius: 5px;
  padding: 14px 25px;
}
#eg-chat-post-chat-submit .eg-button-1:focus:not([disabled]) {
  outline: 0;
  background-color: #fcc200;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-post-chat-submit .eg-button-1[disabled] {
  cursor: none;
}
#eg-chat-post-chat-submit .eg-button-2 {
  background-color: #fcc200;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
  border: 2px solid #fcc200;
  font-size: 13px;
}
#eg-chat-post-chat-submit .eg-button-2:hover:not([disabled]) {
  background-color: #fcc200;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-post-chat-submit .eg-button-2:not(.eg-input-group-button) {
  border-radius: 5px;
  padding: 10px 20px;
}
#eg-chat-post-chat-submit .eg-button-2:focus:not([disabled]) {
  outline: 0;
  background-color: #fcc200;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-post-chat-submit .eg-button-2[disabled] {
  cursor: none;
}
#eg-chat-post-chat-submit .eg-button-3 {
  background-color: transparent;
  color: #fff;
  transition: background-color 0.2s, color 0.2s;
  border: 2px solid transparent;
  font-size: 13px;
}
#eg-chat-post-chat-submit .eg-button-3:hover:not([disabled]) {
  background-color: #000;
  color: #fff;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-post-chat-submit .eg-button-3:not(.eg-input-group-button) {
  border-radius: 5px;
  padding: 10px 20px;
}
#eg-chat-post-chat-submit .eg-button-3:focus:not([disabled]) {
  outline: 0;
  background-color: #000;
  color: #fff;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-post-chat-submit .eg-button-3[disabled] {
  cursor: none;
}
/*
Styling for the post-chat-survey component
Changes to this section will apply to the component found in:
components/post-chat-survey/post-chat-survey.html
*/
#eg-chat-post-chat-survey {
  /* Fallback for browsers that do not support gradients */
  background-color: #fff;
  /* Standard syntax: Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image: linear-gradient(#fff, #fff);
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 5px;
}
#eg-chat-post-chat-survey .eg-heading-container {
  border: none;
  border-radius: 0;
  border-width: 1px 0px 1px 0px;
  padding: 0px;
  /* Fallback for browsers that do not support gradients */
  background-color: transparent;
  /* Standard syntax: Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image: linear-gradient(transparent, transparent);
  color: #000;
  padding: 0 0;
}
#eg-chat-post-chat-survey .eg-heading-container .eg-heading {
  font-family: 'Source Sans Pro Regular', sans-serif;
  font-size: 20px;
  font-weight: normal;
  color: #000;
}
#eg-chat-post-chat-survey .eg-heading-container .eg-heading {
  margin: 0;
  padding: 0;
}
#eg-chat-post-chat-survey .eg-form-group label:not(.eg-not-label),
#eg-chat-post-chat-survey .eg-form-group .eg-label {
  color: #000;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: normal;
  background-color: transparent;
}
#eg-chat-post-chat-survey .eg-survey-input-select {
  border-color: #999999;
}
#eg-chat-post-chat-survey .eg-survey-input-select:not([multiple]) {
  height: 40px;
}
#eg-chat-post-chat-survey .eg-survey-input-select-option {
  color: #000;
}
#eg-chat-post-chat-survey .eg-form-info {
  margin-bottom: 15px;
}
#eg-chat-post-chat-survey .eg-form-info .eg-heading-container {
  border: none;
  border-radius: 0;
  border-width: 1px 0px 1px 0px;
  padding: 0px;
  /* Fallback for browsers that do not support gradients */
  background-color: transparent;
  /* Standard syntax: Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image: linear-gradient(transparent, transparent);
  color: #000;
  padding: 0 0;
}
#eg-chat-post-chat-survey .eg-form-info .eg-heading-container .eg-heading {
  font-family: 'Source Sans Pro Regular', sans-serif;
  font-size: 20px;
  font-weight: bold;
  color: #000;
}
#eg-chat-post-chat-survey .eg-form-info .eg-heading-container .eg-heading {
  margin: 0;
  padding: 0;
}
#eg-chat-post-chat-survey .eg-form-info .eg-text {
  color: #000;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: normal;
  background-color: transparent;
}
#eg-chat-post-chat-survey .eg-button-container {
  border: none;
  border-radius: 0;
  border-width: 1px 0px 1px 0px;
  padding: 0px;
  padding: 10px 15px;
  background-color: #fff;
  color: #000;
}
#eg-chat-post-chat-survey .eg-button-1 {
  background-color: #fcc200;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
  border: 2px solid #fcc200;
  font-size: 13px;
}
#eg-chat-post-chat-survey .eg-button-1:hover:not([disabled]) {
  background-color: #fcc200;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-post-chat-survey .eg-button-1:not(.eg-input-group-button) {
  border-radius: 5px;
  padding: 10px 20px;
}
#eg-chat-post-chat-survey .eg-button-1:focus:not([disabled]) {
  outline: 0;
  background-color: #fcc200;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-post-chat-survey .eg-button-1[disabled] {
  cursor: none;
}
#eg-chat-post-chat-survey .eg-button-2 {
  background-color: #fff;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
  border: 2px solid #000;
  font-size: 13px;
}
#eg-chat-post-chat-survey .eg-button-2:hover:not([disabled]) {
  background-color: #000;
  color: #fff;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-post-chat-survey .eg-button-2:not(.eg-input-group-button) {
  border-radius: 5px;
  padding: 14px 25px;
}
#eg-chat-post-chat-survey .eg-button-2:focus:not([disabled]) {
  outline: 0;
  background-color: #000;
  color: #fff;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-post-chat-survey .eg-button-2[disabled] {
  cursor: none;
}
#eg-chat-post-chat-survey .eg-button-3 {
  background-color: transparent;
  color: #fff;
  transition: background-color 0.2s, color 0.2s;
  border: 2px solid transparent;
  font-size: 13px;
}
#eg-chat-post-chat-survey .eg-button-3:hover:not([disabled]) {
  background-color: #000;
  color: #fff;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-post-chat-survey .eg-button-3:not(.eg-input-group-button) {
  border-radius: 5px;
  padding: 10px 20px;
}
#eg-chat-post-chat-survey .eg-button-3:focus:not([disabled]) {
  outline: 0;
  background-color: #000;
  color: #fff;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-post-chat-survey .eg-button-3[disabled] {
  cursor: none;
}
#eg-chat-post-chat-survey .eg-form-control {
  box-shadow: none;
}
#eg-chat-post-chat-survey .eg-form-control:focus {
  box-shadow: none;
}
#eg-chat-post-chat-survey .eg-form-control {
  background-color: #fff;
  border-color: #999999;
  color: #000;
  border: 1px solid #999999;
  border-radius: 5px;
}
#eg-chat-post-chat-survey .eg-form-control:focus {
  border-color: #999999;
}
#eg-chat-post-chat-survey .eg-form-control:disabled {
  background-color: #eee;
}
#eg-chat-post-chat-survey input.eg-form-control:placeholder-shown,
#eg-chat-post-chat-survey textarea.eg-form-control:placeholder-shown {
  color: #000;
}
#eg-chat-post-chat-survey input.eg-form-control::-webkit-input-placeholder,
#eg-chat-post-chat-survey textarea.eg-form-control::-webkit-input-placeholder {
  color: #000;
}
#eg-chat-post-chat-survey .eg-ratings {
  font-size: 15px;
}
#eg-chat-post-chat-survey .eg-ratings .glyphicon-star,
#eg-chat-post-chat-survey .eg-ratings .glyphicon-star-empty {
  color: #555;
}
#eg-chat-post-chat-survey .eg-form-control {
  padding: 10px;
}
#eg-chat-post-chat-survey h4:focus,
#eg-chat-post-chat-survey span:focus,
#eg-chat-post-chat-survey label:focus {
  outline: 1px dotted !important;
}
#eg-chat-post-chat-survey .eg-customer-character-count {
  transition: opacity 0.5s ease-out;
}
#eg-chat-post-chat-survey .eg-customer-character-count.ng-hide-add {
  opacity: 1;
  transition-duration: 3s;
}
#eg-chat-post-chat-survey .eg-customer-character-count.ng-hide-add-active {
  opacity: 0;
}
#eg-chat-post-chat-survey .eg-customer-character-count.ng-hide-remove {
  opacity: 0;
}
#eg-chat-post-chat-survey .eg-customer-character-count.ng-hide-remove-active {
  opacity: 1;
}
/* Mobile Specific Styles post-chat-survey component START */
@media only screen and (orientation: landscape) {
  .eg-overlay-xs.input-edit-wrapper .eg-chat-content #eg-chat-post-chat-survey h4 {
    display: none;
  }
  .eg-overlay-xs.input-edit-wrapper .eg-chat-content #eg-chat-post-chat-survey .form-group:not(.edit-wrapper) {
    display: none;
  }
  .eg-overlay-xs.input-edit-wrapper .eg-chat-content #eg-chat-post-chat-survey .form-group.edit-wrapper {
    width: 95% !important;
    height: 100%;
    top: 0px !important;
  }
  .eg-overlay-xs.input-edit-wrapper .eg-chat-content #eg-chat-post-chat-survey .form-group.edit-wrapper input,
  .eg-overlay-xs.input-edit-wrapper .eg-chat-content #eg-chat-post-chat-survey .form-group.edit-wrapper textarea {
    width: 85%;
    height: 75%;
    display: inline;
  }
  .eg-overlay-xs.input-edit-wrapper .eg-chat-content #eg-chat-post-chat-survey .form-group.edit-wrapper textarea {
    padding: 0px;
  }
  .eg-overlay-xs.input-edit-wrapper .eg-chat-content #eg-chat-post-chat-survey .form-group.edit-wrapper .eg-survey-label {
    width: 85%;
  }
  .eg-overlay-xs.input-edit-wrapper .eg-chat-content #eg-chat-post-chat-survey .form-group.edit-wrapper .eg-done-btn {
    position: fixed;
    top: 23px;
    right: 15px;
    display: block !important;
  }
}
@media (max-device-width: 767px) {
  .eg-overlay-xs #eg-chat-post-chat-survey .form-group textarea {
    font-size: 16px !important;
  }
}
/* Mobile Specific Styles post-chat-survey component END */
/*
Styling for the pre-chat-params-list component
Changes to this section will apply to the component found in:
components/pre-chat-params-list/pre-chat-params-list.html
*/
#eg-chat-pre-chat-params-list {
  /* Fallback for browsers that do not support gradients */
  background-color: #fff;
  /* Standard syntax: Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image: linear-gradient(#fff, #fff);
  overflow: visible;
  border: 1px solid transparent;
  border-radius: 5px;
  box-shadow: none;
  padding-top: 15px;
  padding-left: 30px;
  padding-right: 30px;
}
#eg-chat-pre-chat-params-list .eg-text {
  color: #000;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: normal;
  background-color: transparent;
}
#eg-chat-pre-chat-params-list .eg-button-1 {
  background-color: #fcc200;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
  border: 2px solid #fcc200;
  font-size: 13px;
}
#eg-chat-pre-chat-params-list .eg-button-1:hover:not([disabled]) {
  background-color: #fcc200;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-pre-chat-params-list .eg-button-1:not(.eg-input-group-button) {
  border-radius: 5px;
  padding: 10px 20px;
}
#eg-chat-pre-chat-params-list .eg-button-1:focus:not([disabled]) {
  outline: 0;
  background-color: #fcc200;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-pre-chat-params-list .eg-button-1[disabled] {
  cursor: none;
}
#eg-chat-pre-chat-params-list .eg-error {
  color: #d50000;
  margin-bottom: 0;
  opacity: 1;
  transition: opacity 0.5s;
}
#eg-chat-pre-chat-params-list .eg-error.ng-hide {
  opacity: 0;
  transition: opacity 0.5s;
}
#eg-chat-pre-chat-params-list .eg-form-group {
  position: relative;
}
#eg-chat-pre-chat-params-list .eg-form-group .eg-mandatory {
  color: #d50000;
  display: none;
}
#eg-chat-pre-chat-params-list .eg-form-group:last-child {
  margin-bottom: 0;
}
#eg-chat-pre-chat-params-list .eg-form-control {
  border-radius: 5px;
}
#eg-chat-pre-chat-params-list .eg-form-control-textarea {
  height: 60px;
}
#eg-chat-pre-chat-params-list .eg-form-control-input,
#eg-chat-pre-chat-params-list .eg-form-control-select,
#eg-chat-pre-chat-params-list .eg-form-control-textarea {
  background-color: #fff;
}
#eg-chat-pre-chat-params-list .eg-form-control-input.ng-dirty.ng-valid,
#eg-chat-pre-chat-params-list .eg-form-control-select.ng-dirty.ng-valid,
#eg-chat-pre-chat-params-list .eg-form-control-textarea.ng-dirty.ng-valid {
  /*border-color: darken(@input_color_border, 40%);*/
}
#eg-chat-pre-chat-params-list .eg-form-control-input.ng-dirty.ng-valid ~ .eg-error,
#eg-chat-pre-chat-params-list .eg-form-control-select.ng-dirty.ng-valid ~ .eg-error,
#eg-chat-pre-chat-params-list .eg-form-control-textarea.ng-dirty.ng-valid ~ .eg-error {
  display: none;
}
#eg-chat-pre-chat-params-list .eg-form-control-input:focus,
#eg-chat-pre-chat-params-list .eg-form-control-select:focus,
#eg-chat-pre-chat-params-list .eg-form-control-textarea:focus {
  border-color: #333333;
  outline: none;
}
#eg-chat-pre-chat-params-list .eg-form-control-input.ng-invalid,
#eg-chat-pre-chat-params-list .eg-form-control-select.ng-invalid,
#eg-chat-pre-chat-params-list .eg-form-control-textarea.ng-invalid {
  border-color: #999999;
}
#eg-chat-pre-chat-params-list .eg-form-control-input,
#eg-chat-pre-chat-params-list .eg-form-control-textarea {
  border: 1.5px solid #999999;
  border-radius: 5px;
  color: #000;
}
#eg-chat-pre-chat-params-list .eg-form-control-select {
  border: 1px solid #999999;
}
#eg-chat-pre-chat-params-list .eg-form-control-select:not([multiple]) {
  height: 30px;
}
#eg-chat-pre-chat-params-list .eg-form-control-select-option {
  color: #000;
}
#eg-chat-pre-chat-params-list .eg-label-container {
  position: relative;
  width: 100%;
  pointer-events: none;
  color: #000;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
}
#eg-chat-pre-chat-params-list .eg-form-info {
  margin-bottom: 15px;
}
#eg-chat-pre-chat-params-list .eg-form-info .eg-heading-container {
  border: none;
  border-radius: 0;
  border-width: 1px 0px 1px 0px;
  padding: 0px;
  /* Fallback for browsers that do not support gradients */
  background-color: transparent;
  /* Standard syntax: Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image: linear-gradient(transparent, transparent);
  color: #000;
  padding: 0 0;
}
#eg-chat-pre-chat-params-list .eg-form-info .eg-heading-container .eg-heading {
  font-family: 'Source Sans Pro Regular', sans-serif;
  font-size: 20px;
  font-weight: bold;
  color: #000;
}
#eg-chat-pre-chat-params-list .eg-form-info .eg-heading-container .eg-heading {
  margin: 0;
  padding: 0;
}
#eg-chat-pre-chat-params-list .eg-form-info .eg-text {
  color: #000;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: bold;
  background-color: transparent;
}
#eg-chat-pre-chat-params-list .eg-form-info {
  margin-bottom: 25px;
}
#eg-chat-pre-chat-params-list .eg-form-info .eg-heading-container {
  display: flex;
  align-items: center;
  margin-bottom: 25px;
}
#eg-chat-pre-chat-params-list .eg-form-info .eg-heading-container img {
  margin-right: 15px;
}
#eg-chat-pre-chat-params-list .eg-form-control-input,
#eg-chat-pre-chat-params-list .eg-form-control-textarea {
  padding: 22px 10px;
}
#eg-chat-pre-chat-params-list .eg-label {
  font-weight: normal;
}
#eg-chat-pre-chat-params-list .eg-form-group {
  margin-bottom: 25px;
}
/* Mobile Specific Styles pre-chat-params-list component START */
@media only screen and (orientation: landscape) {
  .eg-overlay-xs.form-edit-wrapper .eg-chat-content #eg-chat-pre-chat-params-list .form-group:not(.edit-wrapper) {
    display: none;
  }
  .eg-overlay-xs.form-edit-wrapper .eg-chat-content #eg-chat-pre-chat-params-list .form-group.edit-wrapper {
    width: 95% !important;
  }
  .eg-overlay-xs.form-edit-wrapper .eg-chat-content #eg-chat-pre-chat-params-list .form-group.edit-wrapper input,
  .eg-overlay-xs.form-edit-wrapper .eg-chat-content #eg-chat-pre-chat-params-list .form-group.edit-wrapper textarea {
    width: 85%;
    display: inline;
  }
  .eg-overlay-xs.form-edit-wrapper .eg-chat-content #eg-chat-pre-chat-params-list .form-group.edit-wrapper .eg-error {
    position: absolute;
    right: 90px;
    text-align: right;
  }
  .eg-overlay-xs.form-edit-wrapper .eg-chat-content #eg-chat-pre-chat-params-list .form-group.edit-wrapper .eg-done-btn {
    position: fixed;
    top: 5px;
    right: 15px;
    display: block !important;
    float: right;
    font-size: 16px;
  }
}
@media (max-device-width: 767px) {
  .eg-overlay-xs #eg-chat-pre-chat-params-list .form-group {
    font-size: 16px;
  }
}
/* Mobile Specific Styles pre-chat-params-list component END */
/*
Styling for the pre-chat-submit component
Changes to this section will apply to the component found in:
components/pre-chat-submit/pre-chat-submit.html
*/
#eg-chat-pre-chat-submit {
  /* Fallback for browsers that do not support gradients */
  background-color: #fff;
  /* Standard syntax: Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image: linear-gradient(#fff, #fff);
  overflow: hidden;
  border: 0 solid transparent;
  border-radius: 0;
  padding-top: 20px;
  padding-bottom: 5px;
  display: flex;
  justify-content: flex-start;
  padding-left: 30px;
}
#eg-chat-pre-chat-submit .eg-text-1 {
  color: #000;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: normal;
}
#eg-chat-pre-chat-submit .eg-text-2 {
  color: #000;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: normal;
}
#eg-chat-pre-chat-submit .eg-button-container {
  padding: 10px 15px;
  background-color: #fff;
  color: #000;
}
#eg-chat-pre-chat-submit .eg-button-1 {
  background-color: #fcc200;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
  border: 2px solid #fcc200;
  font-size: 13px;
}
#eg-chat-pre-chat-submit .eg-button-1:hover:not([disabled]) {
  background-color: #fcc200;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-pre-chat-submit .eg-button-1:not(.eg-input-group-button) {
  border-radius: 5px;
  padding: 14px 25px;
}
#eg-chat-pre-chat-submit .eg-button-1:focus:not([disabled]) {
  outline: 0;
  background-color: #fcc200;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-pre-chat-submit .eg-button-1[disabled] {
  cursor: none;
}
#eg-chat-pre-chat-submit .eg-button-2 {
  background-color: #fcc200;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
  border: 2px solid #fcc200;
  font-size: 13px;
}
#eg-chat-pre-chat-submit .eg-button-2:hover:not([disabled]) {
  background-color: #fcc200;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-pre-chat-submit .eg-button-2:not(.eg-input-group-button) {
  border-radius: 5px;
  padding: 10px 20px;
}
#eg-chat-pre-chat-submit .eg-button-2:focus:not([disabled]) {
  outline: 0;
  background-color: #fcc200;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-pre-chat-submit .eg-button-2[disabled] {
  cursor: none;
}
#eg-chat-pre-chat-submit .eg-button-3 {
  background-color: transparent;
  color: #fff;
  transition: background-color 0.2s, color 0.2s;
  border: 2px solid transparent;
  font-size: 13px;
}
#eg-chat-pre-chat-submit .eg-button-3:hover:not([disabled]) {
  background-color: #000;
  color: #fff;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-pre-chat-submit .eg-button-3:not(.eg-input-group-button) {
  border-radius: 5px;
  padding: 10px 20px;
}
#eg-chat-pre-chat-submit .eg-button-3:focus:not([disabled]) {
  outline: 0;
  background-color: #000;
  color: #fff;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-pre-chat-submit .eg-button-3[disabled] {
  cursor: none;
}
#eg-chat-pre-chat-submit button {
  height: 50px;
  text-transform: uppercase;
}
/*
Styling for the solution-content component
Changes to this section will apply to the component found in:
components/solution-content/solution-content.html
*/
#eg-chat-solution-content {
  /* Fallback for browsers that do not support gradients */
  /* Standard syntax: Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image: linear-gradient(#fff, #fff);
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 0;
  color: #000;
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  font-weight: normal;
  background-color: #fff;
}
#eg-chat-solution-content .eg-heading-container {
  border: none;
  border-radius: 0;
  border-width: 1px 0px 1px 0px;
  padding: 0px;
  /* Fallback for browsers that do not support gradients */
  background-color: transparent;
  /* Standard syntax: Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image: linear-gradient(transparent, transparent);
  color: #000;
  padding: 10px 5px;
}
#eg-chat-solution-content .eg-heading-container .eg-heading {
  font-family: 'Source Sans Pro Regular', sans-serif;
  font-size: 20px;
  font-weight: normal;
  color: #000;
}
#eg-chat-solution-content .eg-heading-container .eg-heading {
  margin: 0;
  padding: 0;
}
#eg-chat-solution-content .eg-button-container .eg-button-back {
  border-color: #fcc200;
  border-radius: 5px;
  background: #fcc200;
  color: #000;
  padding: 3px 10px;
}
#eg-chat-solution-content .eg-button-container .eg-button-back:hover,
#eg-chat-solution-content .eg-button-container .eg-button-back:focus {
  background: #fcc200;
  color: #000;
  outline: none;
}
#eg-chat-solution-content a {
  color: #000;
  text-decoration: underline;
}
#eg-chat-solution-content a:hover {
  color: #000;
}
#eg-chat-solution-content .nav-tabs {
  border-color: transparent;
}
#eg-chat-solution-content .eg-article-content {
  padding: 0px 5px;
}
#eg-chat-solution-content .fa {
  color: inherit;
}
.eg-solution-hidden .eg-component-repeat.eg-component-name-solution-content,
.eg-solution-hidden #eg-chat-solution-content {
  display: none;
}
/* Mobile Specific Styles solution-content component START */
/* Mobile Specific Styles solution-content component END */
/*
Styling for the status-bar component
Changes to this section will apply to the component found in:
components/status-bar/status-bar.html
*/
#eg-chat-status-bar {
  /* Fallback for browsers that do not support gradients */
  background-color: #fff;
  /* Standard syntax: Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image: linear-gradient(#fff, #fff);
  overflow: hidden;
  border: 0 solid transparent;
  border-radius: 0;
  padding: 0;
  text-align: center;
}
#eg-chat-status-bar .eg-text-1 {
  color: #000;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: normal;
}
#eg-chat-status-bar .eg-text-2 {
  color: #000;
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  font-weight: normal;
}
#eg-chat-status-bar .eg-button-container {
  padding: 10px 15px;
  background-color: #fff;
  color: #000;
}
#eg-chat-status-bar .eg-button-1 {
  background-color: #fcc200;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
  border: 2px solid #fcc200;
  font-size: 13px;
}
#eg-chat-status-bar .eg-button-1:hover:not([disabled]) {
  background-color: #fcc200;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-status-bar .eg-button-1:not(.eg-input-group-button) {
  border-radius: 5px;
  padding: 10px 20px;
}
#eg-chat-status-bar .eg-button-1:focus:not([disabled]) {
  outline: 0;
  background-color: #fcc200;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-status-bar .eg-button-1[disabled] {
  cursor: none;
}
#eg-chat-status-bar .eg-button-2 {
  background-color: #fcc200;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
  border: 2px solid #fcc200;
  font-size: 13px;
}
#eg-chat-status-bar .eg-button-2:hover:not([disabled]) {
  background-color: #fcc200;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-status-bar .eg-button-2:not(.eg-input-group-button) {
  border-radius: 5px;
  padding: 10px 20px;
}
#eg-chat-status-bar .eg-button-2:focus:not([disabled]) {
  outline: 0;
  background-color: #fcc200;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-status-bar .eg-button-2[disabled] {
  cursor: none;
}
#eg-chat-status-bar .eg-button-3 {
  background-color: transparent;
  color: #fff;
  transition: background-color 0.2s, color 0.2s;
  border: 2px solid transparent;
  font-size: 13px;
}
#eg-chat-status-bar .eg-button-3:hover:not([disabled]) {
  background-color: #000;
  color: #fff;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-status-bar .eg-button-3:not(.eg-input-group-button) {
  border-radius: 5px;
  padding: 10px 20px;
}
#eg-chat-status-bar .eg-button-3:focus:not([disabled]) {
  outline: 0;
  background-color: #000;
  color: #fff;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-status-bar .eg-button-3[disabled] {
  cursor: none;
}
#eg-chat-status-bar .eg-fa-ellipsis-h {
  font-size: 1.5em;
  color: #d50000;
}
#eg-chat-status-bar .eg-animated-item {
  font-size: 23px;
  line-height: 0px;
}
#eg-chat-status-bar .eg-text-2 {
  -webkit-transform-style: preserve-3d;
}
#eg-chat-status-bar .eg-text {
  padding: 3px 25px 3px 20px;
}
#eg-chat-status-bar.eg-border {
  border-top: 1px solid #999999;
}
#eg-chat-status-bar .eg-reconnecting-status {
  width: 100%;
  text-align: left;
  padding-left: 20px;
}
#eg-chat-status-bar .eg-wait-msg {
  text-align: left;
  padding-left: 20px;
}
.eg-component-repeat.eg-component-name-status-bar {
  flex-grow: 0;
}
/*
Styling for the survey-input component
Changes to this section will apply to the component found in:
components/survey-input/survey-input.html
*/
#eg-chat-survey-input {
  /* Fallback for browsers that do not support gradients */
  background-color: #fff;
  /* Standard syntax: Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image: linear-gradient(#fff, #fff);
  overflow: hidden;
  border-top: 1px solid #999999;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  color: #000;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: normal;
  background-color: transparent;
  -webkit-overflow-scrolling: touch;
  /*
    * Following properties are added for Desktop and Mobile Firefox
    */
  scrollbar-width: thin;
  scrollbar-color: #D2D9DC #ffffff;
  position: relative;
  opacity: 1;
  padding-top: 20px;
  padding-bottom: 20px;
  /*    .eg-submit-survey-btn {
            margin: 10px 0;
            border-radius: @eg__chat__survey_input__button__radius_border__3;
            background-color: @eg__chat__survey_input__button__color_background__3;
            background-image: linear-gradient(@eg__chat__survey_input__button__color_background_start__3, @eg__chat__survey_input__button__color_background_end__3);
            border-color: @eg__chat__survey_input__button__color_border__3;
            color: @eg__chat__survey_input__button__color_foreground__3;
        }*/
}
#eg-chat-survey-input .eg-form-control {
  box-shadow: none;
}
#eg-chat-survey-input .eg-form-control:focus {
  box-shadow: none;
}
#eg-chat-survey-input .eg-form-control {
  background-color: #fff;
  border-color: #999999;
  color: #000;
  border: 0px solid #999999;
  border-radius: 5px;
}
#eg-chat-survey-input .eg-form-control:focus {
  border-color: #999999;
}
#eg-chat-survey-input .eg-form-control:disabled {
  background-color: #eee;
}
#eg-chat-survey-input input.eg-form-control:placeholder-shown,
#eg-chat-survey-input textarea.eg-form-control:placeholder-shown {
  color: #000;
}
#eg-chat-survey-input input.eg-form-control::-webkit-input-placeholder,
#eg-chat-survey-input textarea.eg-form-control::-webkit-input-placeholder {
  color: #000;
}
#eg-chat-survey-input .eg-badge {
  color: #fff;
  background: #A82624;
  font-weight: normal;
}
#eg-chat-survey-input .eg-button-1 {
  background-color: #fcc200;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
  border: 2px solid #fcc200;
  font-size: 13px;
}
#eg-chat-survey-input .eg-button-1:hover:not([disabled]) {
  background-color: #fcc200;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-survey-input .eg-button-1:not(.eg-input-group-button) {
  border-radius: 5px;
  padding: 12px 35px;
}
#eg-chat-survey-input .eg-button-1:focus:not([disabled]) {
  outline: 0;
  background-color: #fcc200;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-survey-input .eg-button-1[disabled] {
  cursor: none;
}
#eg-chat-survey-input .eg-button-2 {
  background-color: #fff;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
  border: 2px solid #000;
  font-size: 13px;
}
#eg-chat-survey-input .eg-button-2:hover:not([disabled]) {
  background-color: #000;
  color: #fff;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-survey-input .eg-button-2:not(.eg-input-group-button) {
  border-radius: 20px;
  padding: 10px 20px;
}
#eg-chat-survey-input .eg-button-2:focus:not([disabled]) {
  outline: 0;
  background-color: #000;
  color: #fff;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-survey-input .eg-button-2[disabled] {
  cursor: none;
}
#eg-chat-survey-input .eg-button-3 {
  background-color: #fcc200;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
  border: 2px solid #fcc200;
  font-size: 13px;
}
#eg-chat-survey-input .eg-button-3:hover:not([disabled]) {
  background-color: #fcc200;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-survey-input .eg-button-3:not(.eg-input-group-button) {
  border-radius: 5px;
  padding: 10px 20px;
}
#eg-chat-survey-input .eg-button-3:focus:not([disabled]) {
  outline: 0;
  background-color: #fcc200;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-survey-input .eg-button-3[disabled] {
  cursor: none;
}
#eg-chat-survey-input .eg-mcq-container .eg-mcq-choices-container {
  display: flex;
  align-items: center;
  padding: 5px 0;
  text-align: center;
  width: 284px;
}
#eg-chat-survey-input .eg-mcq-container .eg-mcq-choices-container .eg-mcq-choice {
  /*
                 * flex: 0 0 auto; OR none; will NOT make the item grow even when the items are less i.e. items are NOT overflowing
                 *    but will NOT make the item grow when the items are more i.e. items are overflowing
                 *    and will NEVER shrink the item.
                 */
  flex: 0 0 auto;
}
#eg-chat-survey-input .eg-mcq-container .eg-mcq-choice-image {
  display: flex;
  flex-direction: column;
  border-radius: 5px;
  border: 1px solid #fcc200;
  overflow: hidden;
  /*
             * 137px = 135px (image width) + 2px (border)
             * 137px has been set to show two images complete and one partial image to show that there are more images to scroll
             * It has been set for the OOB width of the docked chat template
             */
  width: 137px;
}
#eg-chat-survey-input .eg-mcq-container .eg-mcq-choice-image .eg-image-responsive-container {
  height: 135px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
#eg-chat-survey-input .eg-mcq-container .eg-mcq-choice-image .eg-mcq-button {
  margin: 5px;
}
#eg-chat-survey-input .eg-mcq-container.eg-choices-stretch .eg-mcq-choice {
  /*
                 * flex-grow: 1; will make the item grow when the items are less i.e. items are NOT overflowing
                 *    but will NOT make the item grow when the items are more i.e. items are overflowing
                 */
  flex-grow: 1;
}
#eg-chat-survey-input .eg-mcq-container.eg-choices-display-scroll {
  position: relative;
  padding: 0 15px;
}
#eg-chat-survey-input .eg-mcq-container.eg-choices-display-scroll .eg-scroll-to-start,
#eg-chat-survey-input .eg-mcq-container.eg-choices-display-scroll .eg-scroll-to-end {
  position: absolute;
  top: 50%;
  z-index: 1;
  display: flex;
  align-items: center;
  transform: translateY(-50%);
  padding: 5px 8px;
}
#eg-chat-survey-input .eg-mcq-container.eg-choices-display-scroll .eg-scroll-to-start {
  left: -21px;
}
#eg-chat-survey-input .eg-mcq-container.eg-choices-display-scroll .eg-scroll-to-end {
  right: -21px;
}
#eg-chat-survey-input .eg-mcq-container.eg-choices-display-scroll .eg-mcq-choices-container {
  overflow-x: auto;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* Internet Explorer 10+ */
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
#eg-chat-survey-input .eg-mcq-container.eg-choices-display-scroll .eg-mcq-choices-container::-webkit-scrollbar {
  /*display: none; /* It will hide the scrollbar but disable the programmatic scrolling as well */
  width: 0;
  height: 0;
}
@media (prefers-reduced-motion: reduce) {
  #eg-chat-survey-input .eg-mcq-container.eg-choices-display-scroll .eg-mcq-choices-container {
    scroll-behavior: auto;
  }
}
#eg-chat-survey-input .eg-mcq-container.eg-choices-display-scroll .eg-mcq-choices-container .eg-mcq-choice + .eg-mcq-choice {
  margin-left: 5px;
}
#eg-chat-survey-input .eg-mcq-container.eg-choices-display-wrap .eg-scroll-to-start,
#eg-chat-survey-input .eg-mcq-container.eg-choices-display-wrap .eg-scroll-to-end {
  display: none;
}
#eg-chat-survey-input .eg-mcq-container.eg-choices-display-wrap .eg-mcq-choices-container {
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: space-between;
  margin-left: -5px;
  margin-top: -5px;
}
#eg-chat-survey-input .eg-mcq-container.eg-choices-display-wrap .eg-mcq-choices-container .eg-mcq-choice {
  margin-left: 5px;
  margin-top: 5px;
  max-width: calc(100% - 5px);
}
#eg-chat-survey-input .eg-mcq-container.eg-choices-display-vertical .eg-scroll-to-start,
#eg-chat-survey-input .eg-mcq-container.eg-choices-display-vertical .eg-scroll-to-end {
  display: none;
}
#eg-chat-survey-input .eg-mcq-container.eg-choices-display-vertical .eg-mcq-choices-container {
  flex-direction: column;
  align-items: flex-start;
}
#eg-chat-survey-input .eg-mcq-container.eg-choices-display-vertical .eg-mcq-choices-container .eg-mcq-choice {
  max-width: calc(100% - 5px);
}
#eg-chat-survey-input .eg-mcq-container.eg-choices-display-vertical .eg-mcq-choices-container .eg-mcq-choice + .eg-mcq-choice {
  margin-top: 5px;
}
#eg-chat-survey-input .eg-mcq-container.eg-choices-display-vertical.eg-choices-stretch .eg-mcq-choices-container {
  align-items: stretch;
}
#eg-chat-survey-input .eg-mcq-container.eg-choices-display-vertical.eg-choices-stretch .eg-mcq-choices-container .eg-mcq-choice {
  max-width: calc(100% - 5px);
}
#eg-chat-survey-input .eg-mcq-container .eg-mcq-choice-selected {
  background-color: #fcc200;
  background-image: linear-gradient(#fcc200, #fcc200);
  color: #fff;
  border-color: #fcc200;
}
#eg-chat-survey-input .eg-mcq-container .eg-mcq-choice-btn {
  border-width: 2px;
  font-weight: 600;
  padding: 7px 18px;
  font-size: 13px;
}
#eg-chat-survey-input::-webkit-scrollbar-track {
  background-color: transparent;
}
#eg-chat-survey-input::-webkit-scrollbar {
  width: 7px;
  background-color: #ffffff;
}
#eg-chat-survey-input::-webkit-scrollbar-thumb {
  border: none;
  border-image-source: initial;
  border-image-slice: initial;
  border-image-width: initial;
  border-image-outset: initial;
  border-image-repeat: initial;
  background-clip: padding-box;
  height: 50px;
  border-radius: 5px;
  background-color: #D2D9DC !important;
}
#eg-chat-survey-input.disabled,
#eg-chat-survey-input.disabled-add {
  background-color: #eee;
  background-image: linear-gradient(#eee, #eee);
}
#eg-chat-survey-input.inactive {
  opacity: 0;
}
#eg-chat-survey-input .eg-mcq-container {
  margin: 10px 0;
}
#eg-chat-survey-input .eg-mcq-container .eg-mcq-choices-container {
  display: flex;
  align-items: center;
  padding: 5px 0;
  text-align: center;
}
#eg-chat-survey-input .eg-mcq-container .eg-mcq-choices-container .eg-mcq-choice {
  /*
                 * flex: 0 0 auto; OR none; will NOT make the item grow even when the items are less i.e. items are NOT overflowing
                 *    but will NOT make the item grow when the items are more i.e. items are overflowing
                 *    and will NEVER shrink the item.
                 */
  flex: 0 0 auto;
}
#eg-chat-survey-input .eg-mcq-container .eg-mcq-choices-container .eg-mcq-choice-selected {
  background-color: #000;
  background-image: linear-gradient(#000, #000);
  color: #fff;
  border-color: #000;
}
#eg-chat-survey-input .eg-mcq-container.eg-choices-stretch .eg-mcq-choice {
  /*
                 * flex-grow: 1; will make the item grow when the items are less i.e. items are NOT overflowing
                 *    but will NOT make the item grow when the items are more i.e. items are overflowing
                 */
  flex-grow: 1;
}
#eg-chat-survey-input .eg-mcq-container.eg-choices-display-scroll {
  position: relative;
  padding: 0 15px;
}
#eg-chat-survey-input .eg-mcq-container.eg-choices-display-scroll .eg-scroll-to-start,
#eg-chat-survey-input .eg-mcq-container.eg-choices-display-scroll .eg-scroll-to-end {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
}
#eg-chat-survey-input .eg-mcq-container.eg-choices-display-scroll .eg-scroll-to-start {
  left: -15px;
  padding-left: 5px;
}
#eg-chat-survey-input .eg-mcq-container.eg-choices-display-scroll .eg-scroll-to-end {
  right: -15px;
  padding-right: 5px;
}
#eg-chat-survey-input .eg-mcq-container.eg-choices-display-scroll .eg-mcq-choices-container {
  overflow-x: auto;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* Internet Explorer 10+ */
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
#eg-chat-survey-input .eg-mcq-container.eg-choices-display-scroll .eg-mcq-choices-container::-webkit-scrollbar {
  /*display: none; /* It will hide the scrollbar but disable the programmatic scrolling as well */
  width: 0;
  height: 0;
}
@media (prefers-reduced-motion: reduce) {
  #eg-chat-survey-input .eg-mcq-container.eg-choices-display-scroll .eg-mcq-choices-container {
    scroll-behavior: auto;
  }
}
#eg-chat-survey-input .eg-mcq-container.eg-choices-display-scroll .eg-mcq-choices-container .eg-mcq-choice + .eg-mcq-choice {
  margin-left: 5px;
}
#eg-chat-survey-input .eg-mcq-container.eg-choices-display-wrap .eg-scroll-to-start,
#eg-chat-survey-input .eg-mcq-container.eg-choices-display-wrap .eg-scroll-to-end {
  display: none;
}
#eg-chat-survey-input .eg-mcq-container.eg-choices-display-wrap .eg-mcq-choices-container {
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: space-between;
  margin-left: -5px;
  margin-top: -5px;
}
#eg-chat-survey-input .eg-mcq-container.eg-choices-display-wrap .eg-mcq-choices-container .eg-mcq-choice {
  margin-left: 5px;
  margin-top: 5px;
  max-width: calc(100% - 5px);
}
#eg-chat-survey-input .eg-message-typing-container {
  display: flex;
}
#eg-chat-survey-input .eg-message-typing-container .star-rating {
  margin: 10px 0;
}
#eg-chat-survey-input .eg-form-control {
  padding: 8px 0px !important;
  margin-top: 2px;
}
#eg-chat-survey-input .eg-send-button {
  display: flex;
  align-items: center;
  padding: 15px;
  margin-right: -15px;
  margin-top: 15px;
  padding: 8px;
}
#eg-chat-survey-input .eg-send-button:focus {
  border-radius: 50%;
  border: 2px solid;
  outline: none;
}
#eg-chat-survey-input .eg-send-button.disabled {
  opacity: 0.4;
  pointer-events: none;
}
#eg-chat-survey-input .eg-send-img {
  width: 20px;
}
#eg-chat-survey-input .eg-customer-character-count {
  position: absolute;
  z-index: 4;
  top: 0;
  left: auto;
  transition: opacity 0.5s ease-out;
}
#eg-chat-survey-input .eg-customer-character-count.ng-hide-add {
  opacity: 1;
  transition-duration: 3s;
}
#eg-chat-survey-input .eg-customer-character-count.ng-hide-add-active {
  opacity: 0;
}
#eg-chat-survey-input .eg-customer-character-count.ng-hide-remove {
  opacity: 0;
}
#eg-chat-survey-input .eg-customer-character-count.ng-hide-remove-active {
  opacity: 1;
}
#eg-chat-survey-input .eg-submit-survey-btn-wrapper,
#eg-chat-survey-input .eg-confirm-btn-wrapper {
  display: flex;
  justify-content: center;
}
@media (max-device-width: 767px) {
  .eg-overlay-xs #eg-chat-survey-input .form-control {
    font-size: 16px !important;
  }
}
/* Mobile Specific Styles survey-input component END */
/*
Styling for the thanks-message component
Changes to this section will apply to the component found in:
components/thanks-message/thanks-message.html
*/
#eg-chat-thanks-message {
  /* Fallback for browsers that do not support gradients */
  background-color: #fff;
  /* Standard syntax: Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image: linear-gradient(#fff, #fff);
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 5px;
  color: #000;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  font-weight: normal;
  border: 0;
  box-shadow: none;
  text-align: center;
}
#eg-chat-thanks-message .eg-link {
  color: #000;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: normal;
  background-color: transparent;
}
#eg-chat-thanks-message .eg-heading-container {
  border: none;
  border-radius: 0;
  border-width: 1px 0px 1px 0px;
  padding: 0px;
  /* Fallback for browsers that do not support gradients */
  background-color: transparent;
  /* Standard syntax: Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image: linear-gradient(transparent, transparent);
  color: #000;
  padding: 10px 5px;
}
#eg-chat-thanks-message .eg-heading-container .eg-heading {
  font-family: 'Source Sans Pro Regular', sans-serif;
  font-size: 28px;
  font-weight: normal;
  color: #000;
}
#eg-chat-thanks-message .eg-heading-container .eg-heading {
  margin: 0;
  padding: 0;
}
#eg-chat-thanks-message .eg-thanks-image {
  background-repeat: no-repeat;
  background-position: center top;
  margin: auto;
  width: 35px;
  height: 41px;
}
#eg-chat-thanks-message .eg-thanks-text {
  margin-top: 15px;
}
#eg-chat-thanks-message .eg-heading-container {
  margin-top: 25px;
}
/*
Styling for the transcript component
Changes to this section will apply to the component found in:
components/transcript/transcript.html
*/
#eg-chat-transcript {
  /* Fallback for browsers that do not support gradients */
  background-color: #fff;
  /* Standard syntax: Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image: linear-gradient(#fff, #fff);
  overflow: hidden;
  border: 0 solid transparent;
  border-radius: 0;
  color: #000;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: normal;
  padding-top: 30px;
}
#eg-chat-transcript .eg-message-container {
  margin-bottom: 18px;
}
#eg-chat-transcript .eg-solution-bubble,
#eg-chat-transcript .eg-message-bubble {
  position: relative;
  word-wrap: break-word;
}
#eg-chat-transcript .eg-solution-bubble:before,
#eg-chat-transcript .eg-message-bubble:before,
#eg-chat-transcript .eg-solution-bubble:after,
#eg-chat-transcript .eg-message-bubble:after {
  border-color: transparent;
  border-style: solid;
  content: '';
  display: block;
  position: absolute;
  width: 0;
}
#eg-chat-transcript .eg-solution-bubble:focus,
#eg-chat-transcript .eg-message-bubble:focus {
  outline: 1px dotted !important;
}
#eg-chat-transcript .eg-typing-bubble {
  margin-bottom: 15px;
}
#eg-chat-transcript .eg-typing-bubble .typing-indicator:before {
  display: none;
}
#eg-chat-transcript .eg-typing-bubble .typing-indicator:after {
  display: none;
}
#eg-chat-transcript .loader__dot {
  animation: 1s blink infinite;
  border: 2.5px solid #000;
  display: inline-block;
  border-radius: 10px;
  border-width: 3px;
  background: #000;
}
#eg-chat-transcript .loader__dot:nth-child(2) {
  animation-delay: 250ms;
}
#eg-chat-transcript .loader__dot:nth-child(3) {
  animation-delay: 500ms;
}
#eg-chat-transcript .eg-msg-info-top .eg-message-wrapper-customer,
#eg-chat-transcript .eg-msg-info-top .eg-message-wrapper-agent {
  flex-direction: column;
}
#eg-chat-transcript .eg-msg-info-top .eg-message-bubble:before {
  border-width: 0 9px 9px;
  top: -9px;
}
#eg-chat-transcript .eg-msg-info-top .eg-message-info-container {
  margin-bottom: 6px;
  margin-right: 1px;
  margin-left: 1px;
}
#eg-chat-transcript .eg-msg-info-bottom .eg-message-wrapper-customer,
#eg-chat-transcript .eg-msg-info-bottom .eg-message-wrapper-agent {
  flex-direction: column-reverse;
}
#eg-chat-transcript .eg-msg-info-bottom .eg-message-bubble:after {
  border-width: 0 8px 8px;
  top: 100%;
  transform: rotate(180deg);
}
#eg-chat-transcript .eg-msg-info-bottom .eg-message-info-container {
  margin-top: 8px;
}
#eg-chat-transcript .eg-msg-container-no-stretch .eg-message-wrapper-customer,
#eg-chat-transcript .eg-msg-container-no-stretch .eg-message-wrapper-agent {
  display: inline-flex;
}
#eg-chat-transcript .eg-msg-container-no-stretch .eg-message-wrapper-customer .eg-message-bubble,
#eg-chat-transcript .eg-msg-container-no-stretch .eg-message-wrapper-agent .eg-message-bubble {
  word-break: break-word;
}
#eg-chat-transcript .eg-msg-container-no-stretch .eg-customer {
  display: flex;
  flex-direction: row-reverse;
}
#eg-chat-transcript .eg-msg-container-no-stretch .eg-message-bubble {
  width: fit-content;
}
#eg-chat-transcript .eg-msg-container-no-stretch .eg-message-bubble:after,
#eg-chat-transcript .eg-msg-container-no-stretch .eg-message-bubble:before {
  content: none;
}
#eg-chat-transcript .eg-msg-container-no-stretch .eg-message-wrapper-customer .eg-message-bubble {
  margin-left: auto;
}
#eg-chat-transcript .eg-msg-container-stretch .eg-message-wrapper-customer,
#eg-chat-transcript .eg-msg-container-stretch .eg-message-wrapper-agent {
  display: flex;
}
#eg-chat-transcript .eg-message-info-container {
  color: #404040;
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  font-weight: normal;
  background-color: transparent;
}
#eg-chat-transcript .eg-message-wrapper-customer {
  padding-left: 35px;
  flex-shrink: 0;
  max-width: 100%;
}
#eg-chat-transcript .eg-message-wrapper-customer .eg-message-bubble {
  /* Fallback for browsers that do not support gradients */
  background-color: #fde07f;
  /* Standard syntax: Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image: linear-gradient(#fde07f, #fde07f);
  border: 1px solid #fde07f;
  border-radius: 5px;
  color: #000;
  padding: 11px 18px;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: 'normal';
}
#eg-chat-transcript .eg-message-wrapper-customer .eg-message-bubble:before {
  border-bottom-color: #fde07f;
}
#eg-chat-transcript .eg-message-wrapper-customer .eg-message-bubble:after {
  border-bottom-color: #fde07f;
}
#eg-chat-transcript .eg-message-wrapper-customer .eg-message-bubble .eg-message {
  /*
         * Following has been added to expose the link colours
         * if the links are sent by the customer
         */
}
#eg-chat-transcript .eg-message-wrapper-customer .eg-message-bubble .eg-message a {
  color: #000;
  text-decoration: underline;
}
#eg-chat-transcript .eg-message-wrapper-customer .eg-message-bubble .eg-message a:hover {
  color: #000;
}
#eg-chat-transcript .eg-message-wrapper-customer .eg-message-bubble.eg-off-record {
  display: flex;
  flex-direction: column;
  padding-right: 10px;
  padding-bottom: 6px;
}
#eg-chat-transcript .eg-message-wrapper-customer .eg-message-bubble.eg-off-record span {
  padding-right: 12px;
}
#eg-chat-transcript .eg-message-wrapper-customer .eg-message-bubble.eg-off-record img {
  width: 15px;
  align-self: flex-end;
}
#eg-chat-transcript .eg-message-wrapper-customer .eg-message-bubble .eg-attachment-name {
  font-weight: 600;
}
#eg-chat-transcript .eg-message-wrapper-customer .eg-message-bubble .eg-attachment-info {
  margin-top: -3px;
}
#eg-chat-transcript .eg-message-wrapper-customer .eg-message-bubble:before #eg-chat-transcript .eg-message-wrapper-customer .eg-message-bubble:not(.eg-rtl-angle) {
  left: 15px;
}
#eg-chat-transcript .eg-message-wrapper-customer .eg-message-bubble:after #eg-chat-transcript .eg-message-wrapper-customer .eg-message-bubble:not(.eg-rtl-angle) {
  left: 16px;
}
#eg-chat-transcript .eg-rich-message-wrapper .eg-message-wrapper-agent {
  display: flex !important;
}
#eg-chat-transcript .eg-message-wrapper-agent {
  flex-shrink: 0;
  max-width: 100%;
  padding-right: 35px;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-message-bubble {
  /* Fallback for browsers that do not support gradients */
  background-color: #F0F2F3;
  /* Standard syntax: Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image: linear-gradient(#F0F2F3, #F0F2F3);
  border: 1px solid #F0F2F3;
  border-radius: 5px;
  color: #000;
  padding: 11px 18px;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: 'normal';
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-message-bubble:before {
  border-bottom-color: #F0F2F3;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-message-bubble:after {
  border-bottom-color: #F0F2F3;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-message-bubble .eg-message {
  /*
         * Following has been added to expose the link colours
         * if the links are sent by the customer
         */
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-message-bubble .eg-message a {
  color: #808080;
  text-decoration: underline;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-message-bubble .eg-message a:hover {
  color: #808080;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-message-bubble:before {
  right: 15px;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-message-bubble:after {
  right: 16px;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-message-bubble .eg-message {
  /* 
                 * Following has been added to handle the images sent by agent
                 * e.g., images in articles
                 * !important has been added intentionaly
                 */
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-message-bubble .eg-message img {
  max-width: 100% !important;
  height: auto !important;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-solution-bubble {
  /* Fallback for browsers that do not support gradients */
  background-color: transparent;
  /* Standard syntax: Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image: linear-gradient(transparent, transparent);
  overflow: visible;
  border: 1px solid #F0F2F3;
  border-radius: 5px;
  margin-bottom: 10px;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-solution-bubble:before {
  border-bottom-color: #F0F2F3;
  right: 15px;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-solution-bubble:after {
  border-bottom-color: #F0F2F3;
  right: 16px;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-solution-bubble .list-group {
  margin-bottom: 0;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-solution-bubble .eg-heading-container {
  border: none;
  border-radius: 0;
  border-width: 1px 0px 1px 0px;
  padding: 0px;
  /* Fallback for browsers that do not support gradients */
  background-color: #F0F2F3;
  /* Standard syntax: Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image: linear-gradient(#F0F2F3, #F0F2F3);
  color: #000;
  padding: 11px 18px;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-solution-bubble .eg-heading-container .eg-heading {
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: normal;
  color: #000;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-solution-bubble .eg-heading-container .eg-heading {
  margin: 0;
  padding: 0;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-solution-bubble .eg-solution-item-container {
  border: none;
  border-radius: 0;
  border-width: 1px 0px 1px 0px;
  padding: 0px;
  color: #000;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: normal;
  background-color: transparent;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-solution-bubble .eg-solution-item-container .eg-solution {
  display: block;
  padding: 11px 18px;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-solution-bubble .eg-solution-item-container .eg-heading-container {
  border: none;
  border-radius: 0;
  border-width: 1px 0px 1px 0px;
  padding: 0px;
  /* Fallback for browsers that do not support gradients */
  background-color: transparent;
  /* Standard syntax: Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image: linear-gradient(transparent, transparent);
  color: #000;
  margin-bottom: 5px;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-solution-bubble .eg-solution-item-container .eg-heading-container .eg-heading {
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: bold;
  color: #000;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-solution-bubble .eg-item-container {
  border: none;
  border-radius: 0;
  border-width: 1px 0px 1px 0px;
  padding: 0px;
  color: #000;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: normal;
  background-color: transparent;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-solution-bubble .eg-item-container:hover {
  background-color: transparent;
  color: #000;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-solution-bubble .eg-item-container .eg-item {
  display: block;
  padding: 11px 18px;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-solution-bubble .list-group-item {
  border-top: none;
  border-bottom: 1px solid #F0F2F3;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-solution-bubble .list-group-item:first-child {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin-bottom: 0px;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-solution-bubble .list-group-item:last-child {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: none;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-solution-bubble .fa:not(.eg-fa-inherit) {
  color: inherit;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-solution-bubble .eg-article-content {
  /* 
                 * Following has been added to handle the images sent by agent
                 * e.g., images in articles
                 * !important has been added intentionaly
                 */
  /*
                 * Following has been added to expose the link colours
                 * if the links are sent by the agent
                 */
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-solution-bubble .eg-article-content img {
  max-width: 100% !important;
  height: auto !important;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-solution-bubble .eg-article-content a {
  color: #808080;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-solution-bubble .eg-article-content a:hover {
  color: #808080;
}
#eg-chat-transcript .eg-message-wrapper-agent.agent1 .eg-message-bubble {
  /* Fallback for browsers that do not support gradients */
  background-color: #d4d9dc;
  /* Standard syntax: Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image: linear-gradient(#d4d9dc, #d4d9dc);
  border: 1px solid #d4d9dc;
  border-radius: 5px;
  color: #000;
  padding: 11px 18px;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: 'normal';
}
#eg-chat-transcript .eg-message-wrapper-agent.agent1 .eg-message-bubble:before {
  border-bottom-color: #d4d9dc;
}
#eg-chat-transcript .eg-message-wrapper-agent.agent1 .eg-message-bubble:after {
  border-bottom-color: #d4d9dc;
}
#eg-chat-transcript .eg-message-wrapper-agent.agent1 .eg-message-bubble .eg-message {
  /*
         * Following has been added to expose the link colours
         * if the links are sent by the customer
         */
}
#eg-chat-transcript .eg-message-wrapper-agent.agent1 .eg-message-bubble .eg-message a {
  color: #999999;
  text-decoration: underline;
}
#eg-chat-transcript .eg-message-wrapper-agent.agent1 .eg-message-bubble .eg-message a:hover {
  color: #999999;
}
#eg-chat-transcript .eg-message-wrapper-agent.agent2 .eg-message-bubble {
  /* Fallback for browsers that do not support gradients */
  background-color: #b7c1c6;
  /* Standard syntax: Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image: linear-gradient(#b7c1c6, #b7c1c6);
  border: 1px solid #b7c1c6;
  border-radius: 5px;
  color: #fff;
  padding: 11px 18px;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: 'normal';
}
#eg-chat-transcript .eg-message-wrapper-agent.agent2 .eg-message-bubble:before {
  border-bottom-color: #b7c1c6;
}
#eg-chat-transcript .eg-message-wrapper-agent.agent2 .eg-message-bubble:after {
  border-bottom-color: #b7c1c6;
}
#eg-chat-transcript .eg-message-wrapper-agent.agent2 .eg-message-bubble .eg-message {
  /*
         * Following has been added to expose the link colours
         * if the links are sent by the customer
         */
}
#eg-chat-transcript .eg-message-wrapper-agent.agent2 .eg-message-bubble .eg-message a {
  color: #b3b3b3;
  text-decoration: underline;
}
#eg-chat-transcript .eg-message-wrapper-agent.agent2 .eg-message-bubble .eg-message a:hover {
  color: #b3b3b3;
}
#eg-chat-transcript .eg-message-wrapper-agent.agent3 .eg-message-bubble {
  /* Fallback for browsers that do not support gradients */
  background-color: #9ba8af;
  /* Standard syntax: Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image: linear-gradient(#9ba8af, #9ba8af);
  border: 1px solid #9ba8af;
  border-radius: 5px;
  color: #fff;
  padding: 11px 18px;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: 'normal';
}
#eg-chat-transcript .eg-message-wrapper-agent.agent3 .eg-message-bubble:before {
  border-bottom-color: #9ba8af;
}
#eg-chat-transcript .eg-message-wrapper-agent.agent3 .eg-message-bubble:after {
  border-bottom-color: #9ba8af;
}
#eg-chat-transcript .eg-message-wrapper-agent.agent3 .eg-message-bubble .eg-message {
  /*
         * Following has been added to expose the link colours
         * if the links are sent by the customer
         */
}
#eg-chat-transcript .eg-message-wrapper-agent.agent3 .eg-message-bubble .eg-message a {
  color: #cccccc;
  text-decoration: underline;
}
#eg-chat-transcript .eg-message-wrapper-agent.agent3 .eg-message-bubble .eg-message a:hover {
  color: #cccccc;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container {
  /*margin: 8px 0;*/
  padding: 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  color: #000;
  display: flex;
  /*flex: 1;*/
  /* Common heading*/
  /* Common Section heading*/
  /* Common message body*/
  /* List*/
  /* Timepicker*/
  /* Rich link*/
  /* Payment*/
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-heading {
  background: #F0F2F3;
  padding: 16px;
  border-radius: 5px;
  margin: 8px 0;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-section-heading-container {
  padding: 8px 0;
  border-radius: 5px;
  float: left;
  margin-top: 4px;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-section-heading-container .eg-msg-item .eg-item-img-container {
  padding-left: 16px;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-section {
  overflow: hidden;
  /*margin: 10px 0;*/
  width: 100%;
  float: left;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-section-body-container {
  float: left;
  width: 100%;
  overflow: hidden;
  position: relative;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-section-body-container .eg-list-section-container {
  background: #F0F2F3;
  border-radius: 5px;
  padding: 0 16px;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-section-body-container .eg-list-section-container .eg-msg-item {
  border-bottom: 1px solid #d2d2d2;
  padding: 16px 0;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-section-body-container .eg-list-section-container .eg-msg-item:last-child {
  border-bottom: 1px solid transparent;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-section-body-container.disabled {
  cursor: none;
  opacity: 0.5;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-section-body-container.disabled .eg-msg-item {
  cursor: none;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-list {
  flex: 1;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-list .eg-msg-item {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  cursor: pointer;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-list .eg-msg-item .eg-item-img-container {
  min-width: 35px;
  margin-right: 8px;
  position: relative;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-list .eg-msg-item .eg-item-img-container .eg-item-img {
  width: 35px;
  height: 35px;
  border-radius: 20px;
  cursor: pointer;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-list .eg-msg-item .eg-item-img-container .eg-item-icon-container {
  position: absolute;
  right: 0;
  top: -7px;
  cursor: pointer;
  visibility: hidden;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-list .eg-msg-item .eg-item-img-container .eg-item-icon-container.eg-item-selected {
  visibility: visible;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-list .eg-msg-item .eg-item-content {
  display: flex;
  flex-direction: column;
  align-items: start;
  padding: 0 4px;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-list .eg-msg-item .eg-item-content .eg-title {
  font-weight: bold;
  width: 100%;
  line-height: 1.42;
  word-break: break-word;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-list .eg-msg-item .eg-item-content .eg-subtitle {
  line-height: 1.42;
  word-break: break-word;
  font-size: 12px;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-list .eg-msg-item .eg-item-icon-container {
  padding-right: 5px;
  display: flex;
  align-items: flex-start;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-list .eg-msg-item .eg-item-icon-container .eg-item-icon {
  color: #555;
  margin-top: 3px;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-list .eg-msg-item .eg-item-icon-container.eg-item-selected .eg-item-icon {
  color: #000;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-list .eg-rich-msg-section-heading-container .eg-item-img-container {
  padding-left: 16px;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-list .eg-btn-confirm {
  margin: 8px 0;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-list .eg-btn-confirm:disabled {
  cursor: not-allowed;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-time-picker {
  float: left;
  width: 100%;
  margin: 0.5rem 0;
  flex: 1;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-time-picker .eg-msg-item {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-time-picker .eg-msg-item .eg-item-img-container {
  margin-right: 8px;
  min-width: 35px;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-time-picker .eg-msg-item .eg-item-img-container .eg-item-img {
  width: 35px;
  height: 35px;
  min-width: 35px;
  border-radius: 20px;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-time-picker .eg-msg-item .eg-item-content {
  display: flex;
  flex-direction: column;
  align-items: start;
  padding: 0 4px;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-time-picker .eg-msg-item .eg-item-content .eg-title {
  font-weight: bold;
  width: 100%;
  line-height: 1.42;
  font-size: 14px;
  word-break: break-word;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-time-picker .eg-msg-item .eg-item-content .eg-subtitle {
  font-size: 12px;
  line-height: 1.42;
  word-break: break-word;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-time-picker .eg-timepicker-section-container {
  display: flex;
  width: 100%;
  flex-direction: column;
  background: #F0F2F3;
  border-radius: 5px;
  padding: 0 16px;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-time-picker .eg-timepicker-section-container .eg-day {
  padding: 16px 0;
  border-bottom: 1px solid #D2CFCE;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-time-picker .eg-timepicker-section-container .eg-day:last-child {
  border-bottom: 1px solid transparent;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-time-picker .eg-timepicker-section-container .eg-day .eg-title {
  font-weight: bold;
  word-break: break-word;
  line-height: 1.42;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-time-picker .eg-timepicker-section-container .eg-day .eg-subtitle {
  margin-top: 8px;
  word-break: break-word;
  line-height: 1.42;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-time-picker .eg-timepicker-section-container .eg-day .eg-time-slots {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  padding: 8px 0 0 0;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-time-picker .eg-timepicker-section-container .eg-day .eg-time-slots .eg-slot {
  padding: 8px 16px;
  text-align: center;
  margin: 4px;
  min-width: 75px;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-time-picker .eg-timepicker-section-container .eg-day .eg-time-slots .eg-slot:hover {
  cursor: pointer;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-link {
  flex: 1;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-link .eg-msg-item {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-link .eg-msg-item .eg-item-img-container {
  min-width: 35px;
  margin-right: 8px;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-link .eg-msg-item .eg-item-img-container .eg-item-img {
  width: 35px;
  height: 35px;
  border-radius: 50%;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-link .eg-msg-item .eg-item-content {
  display: flex;
  flex-direction: column;
  align-items: start;
  padding: 0 4px;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-link .eg-msg-item .eg-item-content .eg-title {
  font-weight: bold;
  width: 100%;
  line-height: 1.42;
  font-size: 14px;
  word-break: break-word;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-link .eg-msg-item .eg-item-content .eg-subtitle {
  font-size: 12px;
  line-height: 1.42;
  word-break: break-word;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-link .eg-item {
  /*background: @bubble_agent_color_background_1;*/
  margin: 8px 0;
  border-radius: 5px;
  overflow: hidden;
  display: block;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-link .eg-item:hover,
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-link .eg-item:visited {
  color: #808080;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-link .eg-item:last-child {
  margin-bottom: 0;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-link .eg-item .eg-item-content {
  background: #F0F2F3;
  box-shadow: 0px 0 50px #00000080;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-link .eg-item-thumbnail {
  padding-top: 56.25%;
  /*To maintain AR 16:9 - 16:9::100:56.25*/
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-link .eg-item-thumbnail .eg-btn-play-container button,
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-link .eg-item-thumbnail .eg-btn-play-container button:focus {
  width: 52px;
  height: 52px;
  border-radius: 50px;
  font-size: 12px;
  text-align: center;
  background: #ffffff;
  box-shadow: 0px 3px 6px #00000080;
  border: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-link .eg-item-thumbnail .eg-btn-play-container button i.fa,
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-link .eg-item-thumbnail .eg-btn-play-container button:focus i.fa {
  margin: 2px 0 0 4px;
  font-style: normal;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-link .eg-rich-msg-section-body-container {
  border-radius: 5px;
  background: transparent;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-link .eg-item-content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 16px;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-link .eg-item-content .eg-title {
  font-weight: bold;
  font-size: 14px;
  line-height: 1.42;
  word-break: break-word;
  color: #000;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-link .eg-item-content .eg-subtitle {
  font-size: 12px;
  line-height: 1.42;
  word-break: break-word;
  color: #000;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-payment {
  flex: 1;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-payment .eg-msg-item {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-payment .eg-msg-item .eg-item-img-container {
  min-width: 35px;
  margin-right: 8px;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-payment .eg-msg-item .eg-item-img-container .eg-item-img {
  width: 35px;
  height: 35px;
  border-radius: 20px;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-payment .eg-msg-item .eg-item-content {
  display: flex;
  flex-direction: column;
  align-items: start;
  padding: 0 4px;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-payment .eg-msg-item .eg-item-content .eg-title {
  font-weight: bold;
  width: 100%;
  line-height: 1.42;
  font-size: 14px;
  word-break: break-word;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-payment .eg-msg-item .eg-item-content .eg-subtitle {
  font-size: 12px;
  line-height: 1.42;
  word-break: break-word;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-payment .eg-item-thumbnail {
  padding-top: 56.25%;
  /*To maintain AR 16:9 - 16:9::100:56.25*/
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-payment .eg-rich-msg-section-body-container {
  border-radius: 5px;
  background: transparent;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-payment .eg-item {
  background: #F0F2F3;
  margin: 8px 0;
  border-radius: 5px;
  overflow: hidden;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-payment .eg-item:last-child {
  margin-bottom: 0;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-payment .eg-item .eg-item-content {
  box-shadow: 0px 0 50px #00000080;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-payment .eg-item-content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 16px;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-payment .eg-item-content .eg-title {
  font-weight: bold;
  font-size: 14px;
  word-break: break-word;
  line-height: 1.42;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-payment .eg-item-content .eg-subtitle {
  font-size: 12px;
  line-height: 1.42;
  word-break: break-word;
}
#eg-chat-transcript .eg-message-wrapper-agent .eg-rich-msg-container .eg-rich-msg-payment .eg-item-content .eg-payment-btn {
  margin: 0.5rem;
  min-width: 6rem;
  color: #000;
  background: #fff;
  border-radius: 20px;
  text-align: center;
  padding: 0.25rem;
}
#eg-chat-transcript .eg-message-wrapper-system {
  /* Fallback for browsers that do not support gradients */
  background-color: #fff;
  /* Standard syntax: Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image: linear-gradient(#fff, #fff);
  border: 1px solid #fff;
  border-radius: 5px;
  color: #000;
  padding: 0 0;
  font-family: 'Source Sans Pro Regular', sans-serif;
  font-size: 12px;
  font-weight: normal;
  overflow: hidden;
  max-height: 250px;
  transition: max-height 0.5s;
}
#eg-chat-transcript .eg-message-wrapper-system:before {
  border-bottom-color: #fff;
}
#eg-chat-transcript .eg-message-wrapper-system:after {
  border-bottom-color: #fff;
}
#eg-chat-transcript .eg-message-wrapper-system .eg-message {
  /*
         * Following has been added to expose the link colours
         * if the links are sent by the customer
         */
}
#eg-chat-transcript .eg-message-wrapper-system .eg-message a {
  color: #000;
  text-decoration: underline;
}
#eg-chat-transcript .eg-message-wrapper-system .eg-message a:hover {
  color: #000;
}
#eg-chat-transcript .eg-message-wrapper-system .eg-message {
  line-height: 20px;
  /* 
             * Following has been added to handle the anchors in the system message
             * e.g., video-audio invitation accept reject links
             * !important has been added intentionaly
             */
}
#eg-chat-transcript .eg-message-wrapper-system .eg-message a {
  cursor: pointer !important;
  text-decoration: none !important;
  color: #808080;
}
#eg-chat-transcript .eg-message-wrapper-system .eg-message a.drasr {
  color: -webkit-link;
  text-decoration: underline !important;
}
#eg-chat-transcript .eg-message-wrapper-system .eg-message a.btn {
  padding: 8px 13px;
  border-color: #fcc200;
  border-radius: 5px;
  background: #fcc200 !important;
  /*background:linear-gradient(@button__color_background_start, @button__color_background_end) !important;*/
  color: #000;
  border: 2px solid;
}
#eg-chat-transcript .eg-message-wrapper-system .eg-message a.btn:hover {
  background: #fcc200 !important;
  color: #000 !important;
  /*background:linear-gradient(@button__color_background_start__hover, @button__color_background_end__hover) !important;*/
}
#eg-chat-transcript .eg-message-wrapper-system .eg-message a.btn.disabled {
  background: #171718 !important;
  border-color: #171718 !important;
  pointer-events: none !important;
}
#eg-chat-transcript .eg-message-wrapper-system:focus {
  outline: 1px dotted !important;
}
#eg-chat-transcript .hidedetails {
  max-height: 0;
  padding-bottom: 0;
}
#eg-chat-transcript .eg-attachment-image {
  margin-left: -5px;
  margin-right: -5px;
  display: flex;
  word-break: break-all;
}
#eg-chat-transcript .eg-attachment-image .eg-column-left,
#eg-chat-transcript .eg-attachment-image .eg-column-right {
  padding-left: 5px;
  padding-right: 5px;
  flex: auto;
}
#eg-chat-transcript .eg-attachment-image .eg-icon-thumbnail {
  max-height: 100px;
  max-width: 100px;
  height: 35px;
  width: 35px;
}
#eg-chat-transcript .eg-button-1 {
  background-color: #fcc200;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
  border: 2px solid #fcc200;
  font-size: 13px;
}
#eg-chat-transcript .eg-button-1:hover:not([disabled]) {
  background-color: #fcc200;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-transcript .eg-button-1:not(.eg-input-group-button) {
  border-radius: 5px;
  padding: 5px 12px;
}
#eg-chat-transcript .eg-button-1:focus:not([disabled]) {
  outline: 0;
  background-color: #fcc200;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-transcript .eg-button-1[disabled] {
  cursor: none;
}
#eg-chat-transcript .eg-button-2 {
  background-color: #fff;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
  border: 2px solid #000;
  font-size: 13px;
}
#eg-chat-transcript .eg-button-2:hover:not([disabled]) {
  background-color: #000;
  color: #fff;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-transcript .eg-button-2:not(.eg-input-group-button) {
  border-radius: 5px;
  padding: 5px 12px;
}
#eg-chat-transcript .eg-button-2:focus:not([disabled]) {
  outline: 0;
  background-color: #000;
  color: #fff;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-transcript .eg-button-2[disabled] {
  cursor: none;
}
#eg-chat-transcript .eg-button-3 {
  background-color: #fff;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
  border: 2px solid transparent;
  font-size: 13px;
}
#eg-chat-transcript .eg-button-3:hover:not([disabled]) {
  background-color: #fff;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-transcript .eg-button-3:not(.eg-input-group-button) {
  border-radius: 5px;
  padding: 5px 5px;
}
#eg-chat-transcript .eg-button-3:focus:not([disabled]) {
  outline: 0;
  background-color: #fff;
  color: #000;
  transition: background-color 0.2s, color 0.2s;
}
#eg-chat-transcript .eg-button-3[disabled] {
  cursor: none;
}
#eg-chat-transcript .eg-mcq-container .eg-mcq-choices-container {
  display: flex;
  align-items: center;
  padding: 5px 0;
  text-align: center;
  width: 284px;
}
#eg-chat-transcript .eg-mcq-container .eg-mcq-choices-container .eg-mcq-choice {
  /*
                 * flex: 0 0 auto; OR none; will NOT make the item grow even when the items are less i.e. items are NOT overflowing
                 *    but will NOT make the item grow when the items are more i.e. items are overflowing
                 *    and will NEVER shrink the item.
                 */
  flex: 0 0 auto;
}
#eg-chat-transcript .eg-mcq-container .eg-mcq-choice-image {
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  border: 1px solid #000;
  overflow: hidden;
  /*
             * 137px = 135px (image width) + 2px (border)
             * 137px has been set to show two images complete and one partial image to show that there are more images to scroll
             * It has been set for the OOB width of the docked chat template
             */
  width: 137px;
}
#eg-chat-transcript .eg-mcq-container .eg-mcq-choice-image .eg-image-responsive-container {
  height: 135px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
#eg-chat-transcript .eg-mcq-container .eg-mcq-choice-image .eg-mcq-button {
  margin: 5px;
}
#eg-chat-transcript .eg-mcq-container.eg-choices-stretch .eg-mcq-choice {
  /*
                 * flex-grow: 1; will make the item grow when the items are less i.e. items are NOT overflowing
                 *    but will NOT make the item grow when the items are more i.e. items are overflowing
                 */
  flex-grow: 1;
}
#eg-chat-transcript .eg-mcq-container.eg-choices-display-scroll {
  position: relative;
  padding: 0 15px;
}
#eg-chat-transcript .eg-mcq-container.eg-choices-display-scroll .eg-scroll-to-start,
#eg-chat-transcript .eg-mcq-container.eg-choices-display-scroll .eg-scroll-to-end {
  position: absolute;
  top: 50%;
  z-index: 1;
  display: flex;
  align-items: center;
  transform: translateY(-50%);
  padding: 5px 8px;
}
#eg-chat-transcript .eg-mcq-container.eg-choices-display-scroll .eg-scroll-to-start {
  left: -21px;
}
#eg-chat-transcript .eg-mcq-container.eg-choices-display-scroll .eg-scroll-to-end {
  right: -21px;
}
#eg-chat-transcript .eg-mcq-container.eg-choices-display-scroll .eg-mcq-choices-container {
  overflow-x: auto;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* Internet Explorer 10+ */
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
#eg-chat-transcript .eg-mcq-container.eg-choices-display-scroll .eg-mcq-choices-container::-webkit-scrollbar {
  /*display: none; /* It will hide the scrollbar but disable the programmatic scrolling as well */
  width: 0;
  height: 0;
}
@media (prefers-reduced-motion: reduce) {
  #eg-chat-transcript .eg-mcq-container.eg-choices-display-scroll .eg-mcq-choices-container {
    scroll-behavior: auto;
  }
}
#eg-chat-transcript .eg-mcq-container.eg-choices-display-scroll .eg-mcq-choices-container .eg-mcq-choice + .eg-mcq-choice {
  margin-left: 5px;
}
#eg-chat-transcript .eg-mcq-container.eg-choices-display-wrap .eg-scroll-to-start,
#eg-chat-transcript .eg-mcq-container.eg-choices-display-wrap .eg-scroll-to-end {
  display: none;
}
#eg-chat-transcript .eg-mcq-container.eg-choices-display-wrap .eg-mcq-choices-container {
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: space-between;
  margin-left: -5px;
  margin-top: -5px;
}
#eg-chat-transcript .eg-mcq-container.eg-choices-display-wrap .eg-mcq-choices-container .eg-mcq-choice {
  margin-left: 5px;
  margin-top: 5px;
  max-width: calc(100% - 5px);
}
#eg-chat-transcript .eg-mcq-container.eg-choices-display-vertical .eg-scroll-to-start,
#eg-chat-transcript .eg-mcq-container.eg-choices-display-vertical .eg-scroll-to-end {
  display: none;
}
#eg-chat-transcript .eg-mcq-container.eg-choices-display-vertical .eg-mcq-choices-container {
  flex-direction: column;
  align-items: flex-start;
}
#eg-chat-transcript .eg-mcq-container.eg-choices-display-vertical .eg-mcq-choices-container .eg-mcq-choice {
  max-width: calc(100% - 5px);
}
#eg-chat-transcript .eg-mcq-container.eg-choices-display-vertical .eg-mcq-choices-container .eg-mcq-choice + .eg-mcq-choice {
  margin-top: 5px;
}
#eg-chat-transcript .eg-mcq-container.eg-choices-display-vertical.eg-choices-stretch .eg-mcq-choices-container {
  align-items: stretch;
}
#eg-chat-transcript .eg-mcq-container.eg-choices-display-vertical.eg-choices-stretch .eg-mcq-choices-container .eg-mcq-choice {
  max-width: calc(100% - 5px);
}
#eg-chat-transcript .eg-mcq-container .eg-mcq-choice-selected {
  background-color: #fcc200;
  background-image: linear-gradient(#fcc200, #fcc200);
  color: #fff;
  border-color: #fcc200;
}
#eg-chat-transcript .eg-mcq-container .eg-mcq-choice-btn {
  border-width: 2px;
  font-weight: 600;
  padding: 7px 18px;
  font-size: 13px;
}
#eg-chat-transcript .hidedetails {
  max-height: 0;
  padding-bottom: 0;
}
#eg-chat-transcript .eg-mcq-wrapper {
  margin-top: 10px;
}
#eg-chat-transcript .eg-timetamp-rtl {
  display: flex;
  align-items: center;
}
#eg-chat-transcript .eg-margin-bottom-0 {
  margin-bottom: 0 !important;
}
#eg-chat-transcript.disable {
  pointer-events: none !important;
}
#eg-chat-transcript .eg-lock-img {
  width: 15px;
  float: right;
}
#eg-chat-transcript .reconnecting-msg-container {
  position: fixed;
  padding: 15px;
  margin-left: -25px;
  margin-top: -30px;
  z-index: 10;
  background: #e6e6e6;
  border-left: 3px solid #c30303;
  display: flex;
  justify-content: space-between;
}
#eg-chat-transcript .reconnecting-msg-container .eg-reconnect-msg-close .eg-reconnect-close-image {
  cursor: pointer;
  width: 10px;
}
#eg-chat-transcript .reconnect-msg-not-docked {
  width: 100%;
}
#eg-chat-transcript .reconnect-msg-docked {
  width: calc(100% - 30px);
}
#eg-chat-transcript .eg-new-msg-indicator {
  position: fixed;
  right: 40px;
  border: 1px solid #000;
  padding: 7px;
  background: #fff;
  color: #000;
  border-radius: 4px;
  display: flex;
  flex-direction: row;
  box-shadow: 0 5px 7px rgba(0, 0, 0, 0.4);
  font-size: 12px;
  font-weight: 600;
}
#eg-chat-transcript .eg-new-msg-indicator img {
  height: 12px;
  width: 12px;
  margin-top: 4px;
}
#eg-chat-transcript .eg-attachment-button-group {
  /*margin-top: 10px;*/
}
#eg-chat-transcript .eg-attachment-button-group .eg-btn-accept {
  background: #fcc200;
  color: #000;
  border-radius: 5px;
  padding: 3px 10px;
  border: 1px solid #fcc200;
}
#eg-chat-transcript .eg-attachment-button-group .eg-btn-reject {
  background: #fff;
  color: #000;
  border-radius: 5px;
  padding: 3px 10px;
  border: 1px solid #000;
}
#eg-chat-transcript .eg-attachment-status-icons {
  /*font-size: @eg__chat__transcript__icon_attachment_status__font_size__1;*/
  background: #000;
  border-radius: 50%;
}
#eg-chat-transcript .eg-attachment-status-icons img {
  width: 15px;
  height: 13px;
  padding-bottom: 2px;
}
#eg-chat-transcript .eg-border-left {
  border-left: 1px solid #707070;
  padding-left: 5px;
}
#eg-chat-transcript .padding-right-rtl {
  padding-left: 0;
  padding-right: 35px;
}
#eg-chat-transcript .marginRightAuto {
  margin-right: auto;
}
.eg-solution-displayed .eg-component-repeat.eg-component-name-transcript,
.eg-solution-displayed #eg-chat-transcript {
  display: none;
}
/* Mobile Specific Styles transcript component START */
/* Mobile Specific Styles transcript component END */
#eg-chat-video .eg-video-wrapper {
  padding: 10px 15px 10px 15px;
  border-bottom: 1px solid grey;
  height: 300px;
  position: relative;
  width: 100%;
}
#eg-chat-video .eg-video-wrapper.eg-maximised {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999999;
}
/*
Styling for the wait-message component
Changes to this section will apply to the component found in:
components/wait-message/wait-message.html
*/
.eg-wait-message-hidden .eg-component-repeat.eg-component-name-wait-message,
.eg-wait-message-hidden #eg-chat-wait-message {
  display: none;
}
@keyframes eg-slide-down {
  0% {
    transform: translateY(-25px);
    opacity: 0;
    height: 100%;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
    height: 90px;
  }
}
#egain-chat-wrapper {
  position: fixed;
  overflow: hidden;
  display: none;
  z-index: 10000;
  opacity: 1;
  border: none;
  backface-visibility: hidden;
  background: transparent;
  /*
     * Styling for launch, maximize and minimize states
     */
  /*
     * Styling for positions
     */
  /*
     * Styling for conditional media queries
     */
  /* Large screens */
  /*
     * Styling for iFrame
     */
}
#egain-chat-wrapper.egain-launch-chat.eg-animate,
#egain-chat-wrapper.egain-launch-va.eg-animate,
#egain-chat-wrapper.egain-minimized.eg-animate,
#egain-chat-wrapper.egain-minimized-va.eg-animate {
  /*
             * The transition delay should be more than the total of duration and delay used in launch/maximize buttons for chat and VA
             * at present it is set to .5s
             */
  transition: width 0s ease 1s;
}
#egain-chat-wrapper.egain-launch-chat.eg-animate.eg-hover,
#egain-chat-wrapper.egain-launch-va.eg-animate.eg-hover,
#egain-chat-wrapper.egain-minimized.eg-animate.eg-hover,
#egain-chat-wrapper.egain-minimized-va.eg-animate.eg-hover {
  /*
                 * The transition delay should be zero (recommended for better response in all the browsers)
                 * or less than the total of duration and delay used in launch/maximize buttons for chat and VA
                 * at present it is set to .5s
                 */
  transition-delay: 0s;
}
#egain-chat-wrapper.egain-maximized {
  height: 100%;
  width: 100%;
  transition: height 0.5s ease 0s;
  display: block;
  right: 0;
  bottom: 0;
}
#egain-chat-wrapper.egain-launch-chat,
#egain-chat-wrapper.egain-minimized,
#egain-chat-wrapper.egain-minimized-va {
  /*
         * The first value of '60px' corresponds to the height and width set in:
         * components\launch-chat-button\component.less
         * components\maximize-chat-button\component.less
         * components\maximize-va-button\component.less
         * The second value of '30px' corresponds to double of the padding '@eg__body__padding__1' set on '.eg-chat-overlay' in:
         * global.less
         */
  height: 90px;
  width: 90px;
  animation: eg-slide-down 0.5s;
}
#egain-chat-wrapper.egain-launch-chat.eg-animate.eg-hover,
#egain-chat-wrapper.egain-minimized.eg-animate.eg-hover,
#egain-chat-wrapper.egain-minimized-va.eg-animate.eg-hover {
  /*
             * The first value of '210px' corresponds to the width set in:
             * components\launch-chat-button\component.less
             * components\maximize-chat-button\component.less
             * components\maximize-va-button\component.less
             * The second value of '30px' corresponds to double of the padding '@eg__body__padding__1' set on '.eg-chat-overlay' in:
             * global.less
             */
  width: 240px;
}
#egain-chat-wrapper.egain-launch-va {
  /*
         * The first value of '165px' corresponds to the height and width set in:
         * components\launch-va-button\component.less
         * The second value of '30px' corresponds to double of the padding '@eg__body__padding__1' set on '.eg-chat-overlay' in:
         * global.less
         */
  height: 90px;
  width: 90px;
}
#egain-chat-wrapper.egain-launch-va.eg-animate.eg-hover {
  /*
             * The first value of '410px' corresponds to the width set in:
             * components\launch-va-button\component.less
             * The second value of '30px' corresponds to double of the padding '@eg__body__padding__1' set on '.eg-chat-overlay' in:
             * global.less
             */
  width: 440px;
}
#egain-chat-wrapper.egain-launch-chat.eg-launch-right-bottom,
#egain-chat-wrapper.egain-launch-va.eg-launch-right-bottom,
#egain-chat-wrapper.egain-maximized.eg-maximized-right-bottom,
#egain-chat-wrapper.egain-minimized.eg-minimized-right-bottom,
#egain-chat-wrapper.egain-minimized-va.eg-minimized-right-bottom {
  display: block;
  bottom: 0px;
  right: 0px;
}
#egain-chat-wrapper.egain-launch-chat.eg-launch-left-bottom,
#egain-chat-wrapper.egain-launch-va.eg-launch-left-bottom,
#egain-chat-wrapper.egain-maximized.eg-maximized-left-bottom,
#egain-chat-wrapper.egain-minimized.eg-minimized-left-bottom,
#egain-chat-wrapper.egain-minimized-va.eg-minimized-left-bottom {
  display: block;
  bottom: 0px;
  left: 0px;
}
#egain-chat-wrapper.egain-launch-chat.eg-launch-center-bottom,
#egain-chat-wrapper.egain-launch-va.eg-launch-center-bottom,
#egain-chat-wrapper.egain-maximized.eg-maximized-center-bottom,
#egain-chat-wrapper.egain-minimized.eg-minimized-center-bottom,
#egain-chat-wrapper.egain-minimized-va.eg-minimized-center-bottom {
  display: block;
  bottom: 0px;
  left: 50vw;
  transform: translateX(-50%);
}
#egain-chat-wrapper.egain-launch-chat.eg-launch-right-center,
#egain-chat-wrapper.egain-launch-va.eg-launch-right-center,
#egain-chat-wrapper.egain-maximized.eg-maximized-right-center,
#egain-chat-wrapper.egain-minimized.eg-minimized-right-center,
#egain-chat-wrapper.egain-minimized-va.eg-minimized-right-center {
  display: block;
  top: 50vh;
  right: 0px;
  transform: translateY(-50%);
}
#egain-chat-wrapper.egain-launch-chat.eg-launch-left-center,
#egain-chat-wrapper.egain-launch-va.eg-launch-left-center,
#egain-chat-wrapper.egain-maximized.eg-maximized-left-center,
#egain-chat-wrapper.egain-minimized.eg-minimized-left-center,
#egain-chat-wrapper.egain-minimized-va.eg-minimized-left-center {
  display: block;
  top: 50vh;
  left: 0px;
  transform: translateY(-50%);
}
@media only screen and (min-width: 768px) {
  #egain-chat-wrapper.egain-maximized {
    max-height: 600px;
    max-width: 395px;
    top: auto;
    left: auto;
  }
}
#egain-chat-wrapper #egain-chat-iframe {
  position: relative;
  width: 100%;
  height: 100%;
  border: none;
}
/*
 * TODO check if required and used
 * Styling for mobile and IOS tablet
 */
body.eg-chat-maximized {
  /* Custom, iPhone Retina */
  /* Small Devices, Tablets */
}
@media only screen and (min-width: 320px) {
  body.eg-chat-maximized {
    overflow-y: hidden !important;
    position: fixed !important;
    width: 100% !important;
    min-height: 100% !important;
  }
}
@media only screen and (min-width: 768px) {
  body.eg-chat-maximized {
    overflow-y: inherit !important;
    position: inherit !important;
  }
}
/*
Styling for the solution-content component
Changes to this section will apply to the component found in:
components/solution-content/solution-content.html
*/
#eg-chat-transcript-overlay {
  /* Fallback for browsers that do not support gradients */
  /* Standard syntax: Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image: linear-gradient(#fff, #fff);
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 0;
  color: #000;
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  font-weight: normal;
  background-color: #fff;
  padding: 0;
}
#eg-chat-transcript-overlay .eg-heading-container {
  border: none;
  border-radius: 0;
  border-width: 1px 0px 1px 0px;
  padding: 0px;
  /* Fallback for browsers that do not support gradients */
  background-color: transparent;
  /* Standard syntax: Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image: linear-gradient(transparent, transparent);
  color: #000;
  padding: 10px 5px;
}
#eg-chat-transcript-overlay .eg-heading-container .eg-heading {
  font-family: 'Source Sans Pro Regular', sans-serif;
  font-size: 20px;
  font-weight: normal;
  color: #000;
}
#eg-chat-transcript-overlay .eg-heading-container .eg-heading {
  margin: 0;
  padding: 0;
}
#eg-chat-transcript-overlay .eg-button-container .eg-button-back {
  border-color: transparent;
  border-radius: 0;
  background: transparent;
  color: #000;
  padding: 3px 10px;
}
#eg-chat-transcript-overlay .eg-button-container .eg-button-back:hover,
#eg-chat-transcript-overlay .eg-button-container .eg-button-back:focus {
  background: transparent;
  color: #000;
  outline: none;
}
#eg-chat-transcript-overlay a {
  color: #000;
  text-decoration: underline;
}
#eg-chat-transcript-overlay a:hover {
  color: #000;
}
#eg-chat-transcript-overlay .nav-tabs {
  border-color: transparent;
}
#eg-chat-transcript-overlay .eg-article-content {
  padding: 0px 5px;
}
#eg-chat-transcript-overlay .fa {
  color: inherit;
}
#eg-chat-transcript-overlay .eg-overlay-container {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: #fff;
}
#eg-chat-transcript-overlay .eg-overlay-container .eg-button-container {
  display: flex;
  justify-content: space-between;
}
#eg-chat-transcript-overlay .eg-overlay-container .eg-button-container button img {
  height: 13px;
}
#eg-chat-transcript-overlay .eg-overlay-container .eg-button-container .eg-button-close {
  border-color: transparent;
  border-radius: 0;
  background: transparent;
  color: #000;
  padding: 3px 10px;
}
#eg-chat-transcript-overlay .eg-overlay-container .eg-icon-box {
  display: none;
}
#eg-chat-transcript-overlay .eg-overlay-container-minimized {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  padding: 0;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.4);
  margin: 5px 15px 15px 15px;
}
#eg-chat-transcript-overlay .eg-overlay-container-minimized iframe {
  height: 70px !important;
}
#eg-chat-transcript-overlay .eg-overlay-container-minimized .eg-button-container {
  display: flex;
  justify-content: flex-end;
}
#eg-chat-transcript-overlay .eg-overlay-container-minimized .eg-button-container button {
  display: none;
}
#eg-chat-transcript-overlay .eg-overlay-container-minimized .eg-overlay-min-img {
  width: 12px;
  transform: rotate(180deg);
}
#eg-chat-transcript-overlay .eg-overlay-container-minimized .eg-icon-box {
  width: 21px;
  height: 21px;
  display: flex;
  align-items: center;
  border-radius: 50%;
  transition: background-color 0.2s;
  justify-content: flex-end;
  margin: 5px 5px 10px 5px;
  /*            &:hover, &:focus {
                background-color: @eg__chat__transcript_overlay__heading_button__color_background__1__hover;
                transition: background-color .2s;
                outline: none;
            }*/
}
.eg-overlay-hidden .eg-component-repeat.eg-component-name-solution-content,
.eg-overlay-hidden #eg-chat-transcript-overlay {
  display: none;
}
.eg-component-repeat.eg-component-name-overlay {
  flex-grow: 0;
}
/* Mobile Specific Styles solution-content component START */
/* Mobile Specific Styles solution-content component END */