@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;
  }
}