#brandchat4web,
#brandchat4web div,
#brandchat4web a,
#brandchat4web iframe,
#brandchat4web svg {
   margin: 0 !important;
   padding: 0 !important;
   border: 0 !important;
   font-size: 100% !important;
   vertical-align: baseline !important;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}

* {
    box-sizing: border-box
}



/*OUTER WINDOW ENCOMPASSING BUTTON AND PANEL WITH WINDOW IFRAME*/
#brandchat4web {
   z-index: 9999999;
   display: block;
   position: fixed;
   background-color: transparent;
   line-height: 1;
   font-size: 15px !important;
   top: 12px;
   bottom: 30px;
   right: 12px;
   max-width: 360px;

   pointer-events: none;
}

#brandchat4web.active, #brandchat4web.automessage {
   z-index: 9999999;
   width: 100%;
   height: 90%;
   height: calc(100% - 30px);
}
#brandchat4web.automessage {
    z-index: 0;
    pointer-events: auto;
 }
#brandchat4web.automessage .brandchat-automessage-buttom{
    pointer-events: auto;
    cursor: pointer;
    display: none;
    background-color: #666;
    color: white;
    padding: 10px 25px;
    border: none;
    border-radius: 15px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, .10), 0px 0px 15px rgba(0, 0, 0, .2);
    margin-top: 3px
 }
 #brandchat4web.automessage .brandchat-automessage-buttom:hover{
    background-color: #333;
    
 }
 
 #brandchat4web #brandchat4web-automessage .brandchat-automessage-close {
    pointer-events: auto;
    float:right;
    padding: 4px;
    margin-bottom: 3px;
    width: 30px;
    cursor: pointer;
    background-color: #e9e9e9;
    border-radius: 15px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, .10), 0px 0px 15px rgba(0, 0, 0, .2);

 }
 #brandchat4web #brandchat4web-automessage .brandchat-automessage-close:hover {
    opacity: 0.8;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
 }


/*CONTAINER OF IFRAME WINDOW THAT POPUPS UP ON CLICK ON CHAT BUTTON*/
#brandchat4web #brandchat4web-panel {
   width: 100%;
   height: 100%;
   top:0px;right:0px;left:0px;bottom:0px;
   opacity: 0;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   position: absolute;
   background-color: transparent;

   pointer-events: none;
   z-index: 999999;
}
#brandchat4web #brandchat4web-automessage {
        width: 100%;
        height: 100%;
        top:0px;right:0px;left:0px;bottom:0px;
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        position: absolute;
        background-color: transparent;

        pointer-events: none;
        z-index: 999990;
}
#brandchat4web #brandchat4web-automessage {
   top:auto;
   bottom:73px;
   height:-webkit-fit-content;
   height:-moz-fit-content;
   height:fit-content;
}

#brandchat4web.active #brandchat4web-panel {
   opacity: 1;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   box-shadow: 0px 0px 5px rgba(0, 0, 0, .10), 0px 0px 15px rgba(0, 0, 0, .2);
   -webkit-animation: bounceInUp 0.6s;
           animation: bounceInUp 0.6s;
   border-radius: 12px 12px 0px 0px;
   
   pointer-events: auto;
   z-index: 999999;
}
#brandchat4web.automessage #brandchat4web-automessage {
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        box-shadow: 0px 0px 5px rgba(0, 0, 0, .10), 0px 0px 15px rgba(0, 0, 0, .2);
        -webkit-animation: bounceInUp 0.6s;
                animation: bounceInUp 0.6s;
        border-radius: 12px 12px 0px 0px;

        pointer-events: auto;
        z-index: 999995;
}
#brandchat4web.automessage #brandchat4web-automessage {
   z-index: 999988;
}
#brandchat4web.automessage #brandchat4web-automessage{
    box-shadow: none;
    pointer-events: auto;
}

#brandchat4web #brandchat4web-panel #brandchat4web-frame {
   position: absolute;
   top: 35px;
   right: 0px;
   bottom: 0px;
   max-width: 360px;
   width: 100%;
   padding: 0px;
   height: 90%;/* fallback if needed */
   height: calc(100% - 35px);
   pointer-events: none;
   z-index: 9998;
}
#brandchat4web.active #brandchat4web-panel #brandchat4web-frame {
   pointer-events: auto;
   z-index: 9998;
}

#brandchat4web .brandchat-close-panel {
   top: 5px;
   left: 15px;
   position: absolute;
   padding: 0;
   width: 22px;
   cursor: pointer;
}
#brandchat4web .brandchat-close-panel:hover {
   opacity: 0.8;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";

}

#brandchat4web .brandchat-link {
   font-family: 'Open Sans', Arial, Helvetica, sans-serif;
   top: 18px;
   position: absolute;
   right: 8px;
   color: #0584B7;
   font-size: 12px !important;
   text-decoration: none
}
#brandchat4web #brandchat4web-trigger-container {
  opacity: 0.98;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=98)";
   pointer-events: auto;
   width: 56px;
   height: 56px;
   position: absolute;
   bottom: 15px;
   right: 15px;
   cursor: pointer;
   border-radius: 28px;
   line-height: 56px;
   box-shadow: 0px 0px 5px rgba(0, 0, 0, .10), 0px 0px 15px rgba(0, 0, 0, .2);
   -webkit-transition: width 0.4s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s;
   transition: width 0.4s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s;

   z-index:999;
}
#brandchat4web.active #brandchat4web-trigger-container {
   opacity: 0;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

#brandchat4web #brandchat4web-trigger-container.inform {
   width: 280px;
}

#brandchat4web #brandchat4web-trigger-container .brandchat-toggle-button span {
   opacity: 0;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   font-family: 'Open Sans', Arial, Helvetica, sans-serif
}

#brandchat4web #brandchat4web-trigger-container.inform .brandchat-toggle-button span {
   font-size: 16px;
   opacity: 0.88;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=88)";
}

#brandchat4web #brandchat4web-trigger-container .brandchat-toggle-button {
   overflow: hidden;
   position: absolute;
   top: 0;
   display: block;
   bottom: 0;
   left: 0;
   right: 0;
   text-align: center;
   padding: 0 !important;
   margin: 0 !important;
   line-height: 56px;
   border-radius: 28px;
}

#brandchat4web .brandchat-chat-icon {
   display: block;
   vertical-align: middle;
   float: right;
   padding-right: 0px;
   border-radius: 28px;
   margin: 0px 2px 0px 0px;
}

#brandchat4web .brandchat-chat-icon > path {
   stroke-width: 0.1;
   stroke-linejoin: round;
}


#brandchat4web .brandchat-header {
   background-color: #f9f9f9;
   height: 36px;
   position: relative;
   border-radius: 12px 12px 0px 0px;
   pointer-events: none
}
#brandchat4web .brandchat-automessage-message{
    background-color: #f9f9f9;
    position: relative;
    border-radius: 12px 12px 12px 12px;
    -webkit-user-select:text;
       -moz-user-select:text;
        -ms-user-select:text;
            user-select:text;
    pointer-events: auto;
    margin-bottom: 25px;
    padding: 25px !important;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, .10), 0px 0px 15px rgba(0, 0, 0, .2);
    clear: both
}

#brandchat4web.active .brandchat-header {
   pointer-events: auto
}
@media (max-width: 640px) {
   #brandchat4web .brandchat-header {
      border-radius: 0px 0px 0px 0px
   }
   #brandchat4web #brandchat4web-trigger-container.inform {
      width: 240px;
   }
   #brandchat4web #brandchat4web-trigger-container.inform .brandchat-toggle-button span {
      font-size: 14px;
   }
   #brandchat4web.active, #brandchat4web.automessage {
      max-width: 100%;
      top: 0px;
       bottom: 0px;
       left: 0px;
       right: 0px;
      height:100%;
      min-height:100%;
      max-height:100%;
      
   }
   #brandchat4web.automessage{
    top: auto;
    height:auto;
    min-height:inherit;
    max-height:inherit;
    pointer-events: none;
   }
   #brandchat4web.active #brandchat4web-panel #brandchat4web-frame {
      max-width: 100%;
      border-radius: 0px;
   }
   #brandchat4web #brandchat4web-panel, #brandchat4web #brandchat4web-automessage {
      border-radius: 0px;
   }
   #brandchat4web.active #brandchat4web-panel, #brandchat4web.automessage #brandchat4web-automessage {
      box-shadow: none;
      -webkit-animation: bounceInUp 1.0s;
              animation: bounceInUp 1.0s;
   }
   #brandchat4web #brandchat4web-automessage {
    width: 88%;
    max-width: 360px;
    left:auto;
    right:15px;
    }
}

@-webkit-keyframes bounceInUp {
   0% {
      -webkit-transform: translateY(2000px);
              transform: translateY(2000px);
   }
   60% {
      opacity: 1;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
      -webkit-transform: translateY(-30px);
              transform: translateY(-30px);
   }
   80% {
      -webkit-transform: translateY(10px);
              transform: translateY(10px);
   }
   100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
   }
}

@keyframes bounceInUp {
   0% {
      -webkit-transform: translateY(2000px);
              transform: translateY(2000px);
   }
   60% {
      opacity: 1;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
      -webkit-transform: translateY(-30px);
              transform: translateY(-30px);
   }
   80% {
      -webkit-transform: translateY(10px);
              transform: translateY(10px);
   }
   100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
   }
}

.bounceInUp {
   -webkit-animation-name: bounceInUp;
           animation-name: bounceInUp;
}

@-webkit-keyframes bounceOutDown {
   0% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
   }
   20% {
      -webkit-transform: translateY(-20px);
              transform: translateY(-20px);
   }
   100% {
      opacity: 0;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
      -webkit-transform: translateY(2000px);
              transform: translateY(2000px);
   }
}

@keyframes bounceOutDown {
   0% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
   }
   20% {
      -webkit-transform: translateY(-20px);
              transform: translateY(-20px);
   }
   100% {
      opacity: 0;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
      -webkit-transform: translateY(2000px);
              transform: translateY(2000px);
   }
}

.bounceOutDown {
   -webkit-animation-name: bounceOutDown;
           animation-name: bounceOutDown;
}