body,html { margin: 0; padding: 0;}

/* Component */
.ws-widget-container .transition{transition: all 0.2s cubic-bezier(0.72, 0.01, 0.58, 1);}
.ws-widget-container .spin-anim {animation:spinAnim 4s linear infinite;}
@keyframes spinAnim { 
    100% {-webkit-transform: rotate(360deg);transform:rotate(360deg);} 
}

.ws-widget-container .loader {text-align: center; margin-top: -6px; margin-bottom: -3px;}
.ws-widget-container .loader span{display:inline-block;vertical-align:middle;width:11px;height:11px;background:#b3b3b3;border-radius:20px;animation:loaderAnim .6s infinite alternate}
.ws-widget-container .loader span:nth-of-type(2) {animation-delay: 0.2s;}
.ws-widget-container .loader span:nth-of-type(3) {animation-delay: 0.6s;}
@keyframes loaderAnim {
    0% { opacity: 0.9; transform: scale(0.5);}
    100% {opacity: 0.5; transform: scale(1);}
}



.ws-widget-container .show { display: block;}
.ws-widget-container .hide { display: none;}

/* Settings */
.ws-widget-container.p-left-bottom {left: 30px; bottom: 50px;}
.ws-widget-container.p-right-bottom {right: 30px; bottom: 50px;}
.ws-widget-container.p-left-bottom .ws-chat-cta {left: 0px;}
.ws-widget-container.p-right-bottom .ws-chat-cta {right: 0px;}

/* Layout */
.ws-widget-container * { text-decoration: none; box-sizing: border-box;}
.ws-widget-container { position: fixed; z-index: 1000000000;}
.ws-widget-container .ws-settings { font-size: 14px; font-family:Arial,sans-serif; color: #4e4e4e;}
.ws-widget-container .ws-chat-wrap {height: auto; margin: 0px; bottom: -10px; box-shadow: 2px 2px 9px #0000002e; border-radius: 10px;overflow: hidden; width: 330px; position: relative; z-index: 1; opacity: 0; visibility: hidden; transition: all 0.2s cubic-bezier(0.72, 0.01, 0.58, 1);}
.ws-widget-container .ws-chat-wrap.is-showing {opacity: 1; visibility:visible; bottom:0px;}
.ws-widget-container .ws-chat-wrap.collapsed {height: 0px;}
.ws-chat-wrap.is-showing + .ws-chat-cta {visibility: hidden; opacity: 0;}

/* Header */
.ws-widget-container .ws-chat-wrap .ws-chat-panel .header-panel {display: flex; background-color: #fff; padding: 10px 10px;}
.ws-widget-container .ws-chat-wrap .ws-chat-panel .header-panel .brand-img {margin-right: 10px;}
.ws-widget-container .ws-chat-wrap .ws-chat-panel .header-panel .brand-img img {width: 2.5em;}
.ws-widget-container .ws-chat-wrap .ws-chat-panel .header-panel .brand-name {display: block; flex-grow: 1;}
.ws-widget-container .ws-chat-wrap .ws-chat-panel .header-panel .brand-name label {font-family: "Segoe UI", Arial, sans-serif; font-weight: 500; display: block; margin-bottom: .2em; font-size: 1.1em;  line-height: 1.2em;}
.ws-widget-container .ws-chat-wrap .ws-chat-panel .header-panel .brand-name .sub-text {font-family: "Segoe UI", Arial, sans-serif; font-weight: 400; display: block; font-size: .9em; color: #848484;}
.ws-widget-container .ws-chat-wrap .ws-chat-panel .header-panel .close-panel span.close-icon {width: 30px; display: block; padding: 0px 8px; cursor: pointer; opacity: .3;}
.ws-widget-container .ws-chat-wrap .ws-chat-panel .header-panel .close-panel span.close-icon:hover {opacity:.7;}

/* Body */
.ws-widget-container .ws-chat-wrap .ws-chat-panel .body-panel { background: url(https://enginemailerblobv1.blob.core.windows.net/whatsapp/assets/ws-bg.png) top center; padding: 15px 1.5em;}
.ws-widget-container .ws-chat-wrap .ws-chat-panel .body-panel .chat-dialog {visibility: hidden; opacity: 0; transform: translateY(10px); display: table; background-color: #fff; box-shadow: 2px 2px 9px #0000001c; border-radius: 10px; padding: 1em; margin-bottom: 1.3em; transition: all 0.2s cubic-bezier(0.72, 0.01, 0.58, 1);}
.ws-widget-container .ws-chat-wrap .ws-chat-panel .body-panel .chat-dialog.is-active {visibility: visible; opacity: 1; transform: translateY(0px);}
.ws-widget-container .ws-chat-wrap .ws-chat-panel .body-panel .chat-dialog p {font-family: "Segoe UI", Arial, sans-serif; font-weight: 400; margin: 0; color: #848484; line-height: 1.3em;}
.ws-widget-container .ws-chat-wrap .ws-chat-panel .body-panel .chat-dialog label.label-text{font-family: "Segoe UI", Arial, sans-serif; font-weight: 500; font-size:1.1em;margin-bottom:.5em;line-height:1em; display: block;}
.ws-widget-container .ws-chat-wrap .ws-chat-panel .body-panel .chat-dialog input{font-size:1em;padding:.45em .6em;margin-bottom:1em;height:2.5em;min-height:inherit;background-color:#fff;background-image:none;border:1px solid #dbe1e1;color:#2c2c2c;font-weight:400;border-radius:2px;display:block;width:100%;box-shadow:inset 0 1px 0 0 rgba(63,63,68,.05);outline:0}
.ws-widget-container .ws-chat-wrap .ws-chat-panel .body-panel .chat-dialog button{ position: relative; display: flex; align-items: center; min-width: 100px; justify-content: center; cursor: pointer;padding:.3em 1.2em;font-size:inherit;line-height:22px;color:#fff;background:#2ea5d0;border-radius:3px;border-color:#2ea5d0;box-shadow:inset 0 1px 0 0 #57b7da,0 1px 0 0 rgba(22,29,37,.05),0 0 0 0 transparent;text-decoration:none;margin-bottom:0;border:1px solid #2ea5d0;text-align:center;vertical-align:middle;font-weight:400;letter-spacing:.01em;background-image:none!important; }
.ws-widget-container .ws-chat-wrap .ws-chat-panel .body-panel .chat-dialog button span { display: inline-block;}
.ws-widget-container .ws-chat-wrap .ws-chat-panel .body-panel .chat-dialog button img { width: 0px; margin:0px; position: absolute;}

.ws-widget-container .ws-chat-wrap .ws-chat-panel .body-panel .chat-dialog .form-view { display: none;}
.ws-widget-container .ws-chat-wrap .ws-chat-panel .body-panel .chat-dialog .form-view.is-showing { display: block;}
.ws-widget-container .ws-chat-wrap .ws-chat-panel .body-panel .chat-dialog .form-view.is-submitting button span { visibility: hidden;}
.ws-widget-container .ws-chat-wrap .ws-chat-panel .body-panel .chat-dialog .form-view.is-submitting button img { width: 20px; margin: 0px 5px;}

.ws-widget-container .ws-chat-wrap .ws-chat-panel .body-panel .chat-dialog .success-view { visibility: hidden; opacity: 0; height: 0px; padding: 0px 20px; display: flex; flex-direction: column;align-items: center; }
.ws-widget-container .ws-chat-wrap .ws-chat-panel .body-panel .chat-dialog .success-view span img { width: 60px;}
.ws-widget-container .ws-chat-wrap .ws-chat-panel .body-panel .chat-dialog .success-view h3 { margin: 0px;}
.ws-widget-container .ws-chat-wrap .ws-chat-panel .body-panel .chat-dialog .success-view.is-showing {visibility: visible; opacity: 1; height: auto; padding: 20px;}

.ws-widget-container .ws-chat-wrap .ws-chat-panel .body-panel .chat-form {transition: all 0.3s cubic-bezier(0.79, 0.29, 0.08, 0.85); display: block; opacity: 0; height: 0; overflow: hidden; top: 10px; position: relative;}
.ws-widget-container .ws-chat-wrap .ws-chat-panel .body-panel .chat-form.is-showing {opacity: 1; height: auto; top: 0px; overflow: visible;}
.ws-widget-container .ws-chat-wrap .ws-chat-panel .body-panel .chat-form .row {display:block; margin-bottom:1em;}
.ws-widget-container .ws-chat-wrap .ws-chat-panel .body-panel .chat-form label.label-text { margin-bottom:.3em;}
.ws-widget-container .ws-chat-wrap .ws-chat-panel .body-panel .start-chat-cta {display:flex;align-items:center;justify-content:center;color:#fff;width:140px;margin:0 auto; margin-bottom:10px;padding:8px;border-radius:30px;background-color:#4caf50;cursor:pointer;transition:all .1s cubic-bezier(.79,.29,.08,.85);opacity:1; overflow:hidden;top:0px;position:relative; opacity: 1;box-shadow: rgba(0, 0, 0, 0.14) 0px 5px 11px 0px;}
.ws-widget-container .ws-chat-wrap .ws-chat-panel .body-panel .start-chat-cta span {font-family: "Segoe UI", Arial, sans-serif; font-weight: 400;}
.ws-widget-container .ws-chat-wrap .ws-chat-panel .body-panel .start-chat-cta:hover {opacity: .9;}
.ws-widget-container .ws-chat-wrap .ws-chat-panel .body-panel .start-chat-cta .icon {width:1.3em; margin-right:5px!important;}

/* Footer */
.ws-widget-container .ws-chat-wrap .ws-chat-panel .footer-panel {background-color:#fff;display:block;padding:8px 1.5em;text-align:center}
.ws-widget-container .ws-chat-wrap .ws-chat-panel .footer-panel .powered-brand{display:flex;align-items:center;justify-content:center;}
.ws-widget-container .ws-chat-wrap .ws-chat-panel .footer-panel .powered-brand img{width:18px;display:block;margin-right:5px}
.ws-widget-container .ws-chat-wrap .ws-chat-panel .footer-panel .powered-brand a{font-family: "Segoe UI", Arial, sans-serif; font-weight: 400; color:#989898;font-size:.8em;outline:0!important;cursor:pointer;text-shadow:none!important}

/* CTA */
.ws-widget-container .ws-chat-cta {position: absolute; bottom: 0px;}
.ws-widget-container .ws-chat-cta .button-wrap {user-select: none; display:inline-flex;align-items:center;justify-content:center;color:#fff;width:fit-content;min-width:45px;padding:10px 15px;border-radius:30px;background-color:#4caf50;cursor:pointer; box-shadow: rgba(0, 0, 0, 0.14) 0px 5px 11px 0px;transition:all .1s cubic-bezier(.79,.29,.08,.85);}
.ws-widget-container .ws-chat-cta .button-wrap:hover { filter: brightness(1.05);}
.ws-widget-container .ws-chat-cta .button-wrap .icon {width:1.8em;}
.ws-widget-container .ws-chat-cta .button-wrap span {font-family: "Segoe UI", Arial, sans-serif; font-size: 1.2em; font-weight: 600; margin-left:0px;}
.ws-widget-container .ws-chat-cta .button-wrap span:not(:empty) { margin-left:5px;}