@charset "utf-8";
/* CSS Document */
/* DEFAULT PRIMARY COLOR: #40bfc8 */
/* CHAT TAB/BUTTON: Positioning */
/* Position the chat tab */
/* Mobile views */
/* @font-face {
  font-family: "JosefinSans";
  src: url("./fonts/JosefinSans-VariableFont_wght.ttf") format("truetype"),
  url("./fonts/JosefinSans-VariableFont_wght.ttf") format("truetype");
 }
 @font-face {
  font-family: "Poppins";
  src: url("./fonts/Poppins-Regular.ttf") format("truetype"),
  url("./fonts/Poppins-Regular.ttf") format("truetype");
 }

 .rev-chat-panel h2 {
   font-family: "JosefinSans";
 }
 h1.rev-h1, h2.rev-h2, h3.rev-h3, h4.rev-h4, h5.rev-h5 {
     font-family: "JosefinSans";
 }
 .rev-popout .rev-chat-panel, .rev-form-control, .rev-btn {
    font-family: "Poppins";
} */
 .nowrap {
   white-space: nowrap;
 }
.rev-chat-tab.rev-show {
  top: auto;
  right: 1em;
  bottom: 1rem;
  left: auto;
}
.rev-panel-header h4.rev-h4,
.rev-popout .rev-panel-header h4.rev-h4 {
  color: #18539f;
  font-weight: 600;
}
/* Desktop views */
@media (min-width: 992px) {
  .rev-chat-tab.rev-show {
    right: 2em;
    bottom: 1rem;
  }
}

/* CHAT BUTTON: Set the color of the chat button */
.rev-chat-tab {
  background-color: #40bfc8;
  color: #18539f;
}
/* Chat button icon color */
.rev-chat-tab svg {
  fill: #ffffff;
}
/* RELATIVE FONT SIZE: Font size (in rem) of entire Chat Panel relative to the browser's default font size */
.rev-chat-panel {
  font-size: 1rem;
}
/* PANEL HEADERS: Set the color of the panel headers */
.rev-panel-header,
.rev-menu-header,
.rev-popout .rev-panel-header,
.rev-popout .rev-menu-header {
  background-color: #40bfc8;
  color: #18539f;
}
.rev-panel-header h4.rev-h4,
.rev-popout .rev-panel-header h4.rev-h4 {
  color: #18539f;
  font-weight: 600;
}
/* BALLOON: CUSTOMER SIDE */
.rev-iwrite {
  color: #ffffff;
  background-color: #18539f;
  border: 1px solid #18539f;
}
/* BALLOON: AGENT */
.rev-uwrite {
  color: #18539f;
  background-color: #40bfc8;
  border: 1px solid ;
  width: auto;
  max-width: 100%;
}
/* CHAT SEND BUTTON */
.rev-btn-send, .rev-key {
  background-color: #40bfc8;
  color: #18539f;
  border: 1px solid ;
}
/* BUTTON (sign in -  CAPTCHA SCREEN - START CHAT) */
.rev-btn-primary {
  background-color: #40bfc8;
  border: 1px solid ;
    color: #18539f;
}
/* Set Color of Cancel Icons*/
.rev-btn-trans{
  color: 
}
/* Set Color of Media Icons*/
.rev-popout .rev-btn-media:hover svg,
.rev-popout .rev-btn-media.rev-btn-options:hover svg {
fill: ; }
.rev-popout .rev-btn-media.active svg {
  fill: ; }
/* Set logo MAX-WIDTH for Sign In*/
.rev-logo img {
  max-width: 100%;
}
/* REV-POPOUT STYLES used for styling Popout mode */
@media (min-width: 992px) {
  body.rev-popout {
    background-color: rgba(24, 83, 159, 1); /* Main window background color */
  }
  body.rev-popout:before {
    /* Use a CSS pseudo-element to position a photo over the background */
    content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 1.0;
    background-image: url(bg-widget.jpg); /* image file lives in private group folder */
    background-repeat: no-repeat;
    background-position: 50% 50%;
    -ms-background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
}
  .rev-popout .rev-confirm-panel.rev-brand img {
    max-width: 80%; /* Set logo MAX-WIDTH for main window branding */
  }  
}
/* Custom chat panel widths as per CGoll and JWolf */
/* @media (min-width: 992px) {
  .rev-popout .rev-chat-panel {
    min-width: 500px;
    font-size: 1.125rem;
  }
}
@media (min-width: 992px) {
  .rev-popout .rev-media-menu {
    right: calc(0px + 500px);
  }
}
@media (min-width: 1200px) {
  .rev-popout .rev-media-menu {
    right: calc(0px + 500px);
  }
}
@media (min-width: 992px) {
  .rev-popout .rev-confirm-panel,
  .rev-popout .rev-captcha_view {
    left: 10%;
    right: calc(10% + 500px);
  }
}
@media (min-width: 1200px) {
  .rev-popout .rev-confirm-panel,
  .rev-popout .rev-captcha_view {
    left: 15%;
    right: calc(15% + 500px);
  }
} */
/* REV-SPLASH Styles for status */
.rev-btn.rev-online,
.rev-btn.rev-btn-primary.rev-online {
  background-color: ;
  border: 1px solid ;
}
.rev-btn.rev-busy,
.rev-btn.rev-btn-primary.rev-busy {
  background-color: orange;
  border-color: orange;
}
.rev-overlay {
  background-image: url(splash.png);
}
.rev-chat_position {
  background-color: #fff;
  color: #666666;
  background-image: url(bg-chat.jpg); /* image file lives in private group folder */
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

/* Bot Clickable Buttons */
.rev-prompt button {
 display: block;
 width: 100%;
 margin: 0 2px 2px 0;
 background-color: #40bfc8;
 border: none;
 color: #18539f;
 padding: 0.4em ;
 border-radius: 0.5em;
}

.rev-oob {
 color: #000000;
 background-color: #efefef;
 border: 1px solid #efefef;
 padding: 0.5em;
 border-radius: 0.5em;
 border-bottom-left-radius: 0;
 display: inline-block;
 width: auto;
 height: auto;
 max-width: 100%;
 line-height: 1.2 em;
 position: relative;
 margin: 0 0 0.5em 0;
 align-self: flex-start;
}
.rev-panel-header h4.rev-h4,
.rev-popout .rev-panel-header h4.rev-h4 {
  color: #18539f;
  font-weight: 600;
}