.typing_loader{
    width: 6px;
    height: 6px;
    border-radius: 50%;
    -webkit-animation: typing 1s linear infinite alternate;
    -moz-animation: typing 1s linear infinite alternate;
    -ms-animation: typing 1s linear infinite alternate;
    animation: typing 1s linear infinite alternate;
    position: relative;
    left: -12px;
    margin: 7px 15px 6px;
}
.to .typing_loader {
    animation: typing-black 1s linear infinite alternate;
}
@-webkit-keyframes typing{
    0%{
        background-color: rgba(255,255,255, 1);
        box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.4),
        24px 0px 0px 0px rgba(255,255,255,0.2);
    }
    50% {
        background-color: rgba(255,255,255, 0.4);
        box-shadow: 12px 0px 0px 0px rgba(255,255,255,1),
        24px 0px 0px 0px rgba(255,255,255,0.4);
    }
    100%{ background-color: rgba(255,255,255, 0.2);
        box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.4),
        24px 0px 0px 0px rgba(255,255,255,1);
    }
}

@-moz-keyframes typing{
    0%{
        background-color: rgba(255,255,255, 1);
        box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.4),
        24px 0px 0px 0px rgba(255,255,255,0.2);
    }
    50% {
        background-color: rgba(255,255,255, 0.4);
        box-shadow: 12px 0px 0px 0px rgba(255,255,255,1),
        24px 0px 0px 0px rgba(255,255,255,0.4);
    }
    100%{ background-color: rgba(255,255,255, 0.2);
        box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.4),
        24px 0px 0px 0px rgba(255,255,255,1);
    }
}

@keyframes typing-black{
    0%{
        background-color: rgba(74, 74, 74, 1);
        box-shadow: 12px 0px 0px 0px rgba(74, 74, 74, 0.4),
        24px 0px 0px 0px rgba(74, 74, 74, 0.2);
    }
    50% {
        background-color: rgba(74, 74, 74, 0.4);
        box-shadow: 12px 0px 0px 0px rgba(74, 74, 74, 1),
        24px 0px 0px 0px rgba(74, 74, 74,0.4);
    }
    100%{ background-color: rgba(74, 74, 74, 0.2);
        box-shadow: 12px 0px 0px 0px rgba(74, 74, 74,0.4),
        24px 0px 0px 0px rgba(74, 74, 74,1);
    }
}
@keyframes typing{
    0%{
        background-color: rgba(255,255,255, 1);
        box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.4),
        24px 0px 0px 0px rgba(255,255,255,0.2);
    }
    50% {
        background-color: rgba(255,255,255, 0.4);
        box-shadow: 12px 0px 0px 0px rgba(255,255,255,1),
        24px 0px 0px 0px rgba(255,255,255,0.4);
    }
    100%{ background-color: rgba(255,255,255, 0.2);
        box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.4),
        24px 0px 0px 0px rgba(255,255,255,1);
    }
}

form.convFormDynamic {
    width: calc(100% - 33px);
    margin: 10px auto 15px;
    padding: 0 !important;
    position: relative;
    box-shadow: 0 0 5px 5px rgba(222, 222, 222, 0.4);
}

form.convFormDynamic textarea.userInputDynamic {
    border: none;
    padding: 7px 10px;
    outline: none;
    font-size: 0.905rem;
    float: left;
    width: calc(100% - 70px);
    line-height: 1.3em;
    min-height: 1.7em;
    max-height: 10rem;
    display: block;
    max-width: 88%;
    margin-right: 2.5%;
}


form.convFormDynamic input.userInputDynamic {
    border: none;
    padding: 7px 10px;
    outline: none;
    font-size: 0.905rem;
    float: left;
    width: calc(100% - 70px);
    line-height: 1.3em;
    min-height: 1.7em;
    max-height: 10rem;
    display: block;
    max-width: 88%;
    margin-right: 2.5%;
}

div.conv-form-wrapper div#messages {
    max-height: 71vh;
    height: auto !important;
    overflow-y: scroll;
}
div.conv-form-wrapper div#messages:after {
    content: '';
    display: table;
    clear: both;
}
div.conv-form-wrapper {
    position: relative;
}
div.conv-form-wrapper div.wrapper-messages {
    position: relative;
    height: 577px;
    max-height: 71vh;
    overflow-y: scroll;
}
div.conv-form-wrapper:before {
    content: '';
    position: absolute;
    width: 100%;
    display: block;
    height: 30px;
    top: 0;
    left: 0;
    z-index: 2;
    background: linear-gradient(#fff, transparent);
}
@media (max-width: 767px) {
    div.conv-form-wrapper div.wrapper-messages, div.conv-form-wrapper div#messages {
        max-height: 71vh;
    }
}

div.conv-form-wrapper div.wrapper-messages::-webkit-scrollbar, div#feed ul::-webkit-scrollbar, div.conv-form-wrapper div.options::-webkit-scrollbar {
    width: 0px;
    height: 0px;
    /* remove scrollbar space */
    background: transparent;
    /* optional: just make scrollbar invisible */
}
input[type="text"].userInputDynamic.error {
    color: #ac0000 !important;
}
input[type="text"].userInputDynamic {
    border-radius: 3px;
    margin: 7px 10px;
}

textarea.userInputDynamic.error {
    color: #ac0000 !important;
}

textarea.userInputDynamic {
    border-radius: 3px;
    margin: 7px 10px;
}

div.conv-form-wrapper div#messages {
    transition: bottom 0.15s, padding-bottom 0.15s;
    position: absolute;
    bottom: 0;
    height: auto !important;
    width: 100%;
    padding-bottom: 20px;
    /*max-height: 71vh;*/
}
div.conv-form-wrapper div.options {
    word-wrap: normal;
/*    white-space: nowrap;*/
/*    overflow-x: scroll;*/
    position: absolute;
    bottom: 100%;
    width: 100%;
    transform: translateY(-5px);
}
div.conv-form-wrapper div.options:after {
    content: '';
    display: table;
    clear: both;
}
div.conv-form-wrapper div.options div.option {
    padding: 7px 12px;
    border: 1px solid rgba(6,153,184,0.3);
    display: inline-block;
    margin: 5px;
    background: #fff;
    background: none;
    color: #1F8CEB; /*06c5a6*/
    cursor: pointer;
    border-radius: 20px;
    font-size: 0.9rem;
}
div.conv-form-wrapper div.message {
    animation: slideTop 0.15s ease;
}
div.conv-form-wrapper div.message:after {
    content: '';
    display: table;
    clear: both;
}
div.conv-form-wrapper  div.message.ready {
    animation: bounceIn 0.2s ease;
    transform-origin: 0 0 0;
}
div.conv-form-wrapper  div#messages div.message {
    border-radius: 20px;
    padding: 12px 22px;
    font-size: 0.905rem;
    color: #333;
    display: inline-block;
    padding: 10px 15px 8px;
    border-radius: 20px;
    margin-bottom: 5px;
    float: right;
    clear: both;
    max-width: 65%;
    word-wrap: break-word;
}
div.conv-form-wrapper  div#messages div.message.to {
    background: #efefef;
    color: #6f6f6f;
    float: left;
    border-top-left-radius: 0;
}
div.conv-form-wrapper div#messages div.message.from {
    background: #1F8CEB;/*06b79a;*/
    color: #fff;
    border-top-right-radius: 0;
	}
.message.to+.message.from, .message.from+.message.to {
    margin-top: 15px;
}
@keyframes slideTop {
    0% {
        margin-bottom: -25px;
    }
    100% {
        margin-bottom: 0;
    }
}

@keyframes bounceIn {
    0% {
        transform: scale(0.75, 0.75);
    }
    100% {
        transform: scale(1.0, 1.0);
    }
}
div.conv-form-wrapper div.options div.option:hover {
    background: #eeeeee;
}
div.conv-form-wrapper div.options div.option.selected {
    background: #1F8CEB;/*06b79a;*/
    color: #fff;
}
div.conv-form-wrapper div.options div.option.selected:hover {
    background: #1F8CEB;/*069c7f;*/
}

form.convFormDynamic button.submit {
    padding: 3px;
    border: none;
    float: left;
    margin: 5px;
    color: #1F8CEB;/*06c5a6;*/
    cursor: pointer;
    border-radius: 8px;
    font-size: 1.1rem;
    width: 36px;
    height: 35px;
    margin-top: 4px;
    background: #fff;
    outline: none !important;
}


form.convFormDynamic button.submit:hover {
    background: #1F8CEB;/*06b79a;*/
    color: #fff;
}

button.submit.glow {
    box-shadow: 0 0 10px 5px rgba(6, 197, 166, 0.4);
}
.no-border {
    border: none !important;
}
.dragscroll {
    cursor: grab;
}
div.conv-form-wrapper div#messages::-webkit-scrollbar, div#feed ul::-webkit-scrollbar {
    width: 0px;
    /* remove scrollbar space */
    background: transparent;
    /* optional: just make scrollbar invisible */
}
span.clear {
    display: block;
    clear: both;
}

.spinLoader,
.spinLoader:before,
.spinLoader:after {
    background: #1F8CEB !important;/*06c5a6 !important;*/
    -webkit-animation: spinLoaderChat 1s infinite ease-in-out;
    animation: spinLoaderChat 1s infinite ease-in-out;
    width: 1em;
    height: 4em;
}
.spinLoader {
    color: #1F8CEB !important;/*06c5a6 !important;*/
    text-indent: -9999em;
    margin: 50% auto;
    position: relative;
    font-size: 11px;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}
.spinLoader:before,
.spinLoader:after {
    position: absolute;
    top: 0;
    content: '';
}
.spinLoader:before {
    left: -1.5em;
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}
.spinLoader:after {
    left: 1.5em;
}
@-webkit-keyframes spinLoaderChat {
    0%,
    80%,
    100% {
        box-shadow: 0 0;
        height: 4em;
    }
    40% {
        box-shadow: 0 -2em;
        height: 5em;
    }
}
@keyframes spinLoaderChat {
    0%,
    80%,
    100% {
        box-shadow: 0 0;
        height: 4em;
    }
    40% {
        box-shadow: 0 -2em;
        height: 5em;
    }
}

/*tweaks*/
div#messages {
	padding-left: 5px;
	padding-right:5px;
}
div.conv-form-wrapper div.wrapper-messages {
	overflow-y: hidden;
  height: 500px;
}
div.conv-form-wrapper div#messages 
::-webkit-scrollbar {
    width: 5px;
}
div.conv-form-wrapper::before {
	display: none;
}
form.convFormDynamic {
	box-shadow:none;
}
div.conv-form-wrapper div#messages div.message {
	max-width: 90%;
}
div.conv-form-wrapper div.options div.option {
	background: #fff;
}
div.conv-form-wrapper div.options div.option {
  color: #fff;
  background-color: #1F8CEB;
  border-color: #1F8CEB;
	box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12) !important;
}
div.conv-form-wrapper div.options div.option:hover {
  color: #fff;
  background-color: #1272c5;
  border-color: #1272c5;
}
div.conv-form-wrapper div.options div.option:focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(31, 155, 207, 0.5);
          box-shadow: 0 0 0 0.2rem rgba(31, 155, 207, 0.5);
}


form.convFormDynamic textarea.userInputDynamic {
	border: 1px #999 solid;
}
div.conv-form-wrapper  div#messages div.message.to, div.conv-form-wrapper  div#messages div.message.from {
  /*border: 1px solid #666;*/
	box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12) !important;
}
.hidden {
    display: none!important;
}


/*from demo.css*/
/*
* {
	font-family: 'Roboto', sans-serif;
}
html, body {
	font-size: 16px;
}
*/
section#dpwChatbot {
	background: #fbfbfb;
    position: relative;
    padding: 0;
    min-height: 100vh;
    transition: height 9999s;
}
.vertical-align {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	width: 100%;
}

/*from https://www.w3schools.com/howto/howto_js_popup_chat.asp */
/*body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}
*/
/* Button used to open the chat form - fixed at the bottom of the page */
.open-button {
  background-color: #555;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  opacity: 0.8;
  position: fixed;
  bottom: 23px;
  right: 28px;
  width: 280px;
}

/* The popup chat - hidden by default */
.chat-popup {
  display: none;
  position: fixed;
  bottom: 0;
  right: 15px;
  border: 3px solid #f1f1f1;
  z-index: 9;
}

/* Add styles to the form container */
.form-container {
  max-width: 300px;
  padding: 10px;
  background-color: white;
}

/* Full-width textarea */
.form-container textarea {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
  resize: none;
  min-height: 200px;
}

/* When the textarea gets focus, do something */
.form-container textarea:focus {
  background-color: #ddd;
  outline: none;
}

/* Set a style for the submit/send button */
.form-container .btn {
  background-color: #4CAF50;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  margin-bottom:10px;
  opacity: 0.8;
}

/* Add a red background color to the cancel button */
.form-container .cancel {
  background-color: red;
}

/* Add some hover effects to buttons */
.form-container .btn:hover, .open-button:hover {
  opacity: 1;
}

/*===========================
     CHAT BOOT MESSENGER
   ===========================*/
#Smallchat .Messages, #Smallchat .Messages_list {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}
.chat_close_icon {
   cursor:pointer;
    color: #fff;
    font-size:16px;
    position: absolute;
    right: 12px;
    z-index: 9;
}
/*
.chat_on_bubble {
  position: fixed;
  z-index: 10;
  padding: 10px;
  right: 15px;
  bottom:75px;
  white-space:nowrap;
	background: #efefef;
	border-radius: 20px;
  border-top-right-radius:0;
  cursor: pointer;
}
*/
.chat_on {
    position: fixed;
    z-index: 999999999;
    width: 45px;
    height: 45px;
    right: 15px;
    bottom:20px;
    background-color: #1F8CEB;/*8a57cf;*/
    color: #fff;
    border-radius: 50%;
    text-align: center;
      line-height:25px;
    padding: 10px;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important;
    cursor: pointer;
    display: block;
  }
.chat_off {
  z-index: 999999999;
  width: 45px;
  height: 45px;
  right: 15px;
/*  bottom:20px;*/
  background-color: #1F8CEB;/*8a57cf;*/
  color: #fff;
  border-radius: 50%;
  text-align: center;
	line-height:25px;
  padding: 10px;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important;
  cursor: pointer;
  display: block;
}
.chat_on_icon, .chat_off_icon{
	font-size:25px;
	text-align:center;
}
/*
#Smallchat,#Smallchat * {
 box-sizing:border-box; 
 -webkit-font-smoothing:antialiased;
 -moz-osx-font-smoothing:grayscale;
 -webkit-tap-highlight-color:transparent
}
*/
#Smallchat .Layout { 
	 pointer-events:auto;
	 box-sizing:content-box!important;
	 z-index:999999998;
	 position:fixed;
	 bottom:40px;
	 min-width:50px;
	 max-width:300px;
	 max-height:30px;
	 display:-webkit-box;
	 display:-webkit-flex;
	 display:-ms-flexbox;
	 display:flex;
	 -webkit-box-orient:vertical;
	 -webkit-box-direction:normal;
	 -webkit-flex-direction:column;
	 -ms-flex-direction:column;
	 flex-direction:column;
	 -webkit-box-pack:end;
	 -webkit-justify-content:flex-end;
	 -ms-flex-pack:end;
	 justify-content:flex-end;
	 border-radius:50px;
	/* box-shadow:5px 0 20px 5px rgba(0,0,0,.1);*/
	 -webkit-animation:appear .15s cubic-bezier(.25,.25,.5,1.1);
	 animation:appear .15s cubic-bezier(.25,.25,.5,1.1);
	 -webkit-animation-fill-mode:forwards;
	 animation-fill-mode:forwards;
	 opacity:0;
	 -webkit-transition:right .1s cubic-bezier(.25,.25,.5,1),bottom .1s cubic-bezier(.25,.25,.5,1),min-width .2s cubic-bezier(.25,.25,.5,1),max-width .2s cubic-bezier(.25,.25,.5,1),min-height .2s cubic-bezier(.25,.25,.5,1),max-height .2s cubic-bezier(.25,.25,.5,1),border-radius 50ms cubic-bezier(.25,.25,.5,1) .15s,background-color 50ms cubic-bezier(.25,.25,.5,1) .15s,color 50ms cubic-bezier(.25,.25,.5,1) .15s;
	 transition:right .1s cubic-bezier(.25,.25,.5,1),bottom .1s cubic-bezier(.25,.25,.5,1),min-width .2s cubic-bezier(.25,.25,.5,1),max-width .2s cubic-bezier(.25,.25,.5,1),min-height .2s cubic-bezier(.25,.25,.5,1),max-height .2s cubic-bezier(.25,.25,.5,1),border-radius 50ms cubic-bezier(.25,.25,.5,1) .15s,background-color 50ms cubic-bezier(.25,.25,.5,1) .15s,color 50ms cubic-bezier(.25,.25,.5,1) .15s     
}

#Smallchat .Layout-right {
 right:10px
}

#Smallchat .Layout-open {
 overflow:hidden;
 min-width:300px;
 max-width:300px;
 /*height:500px;*/
 max-height:500px;
 border-radius:10px;
 color:#fff;
 /*
 -webkit-transition:right .1s cubic-bezier(.25,.25,.5,1),bottom .1s cubic-bezier(.25,.25,.5,1.1),min-width .2s cubic-bezier(.25,.25,.5,1.1),max-width .2s cubic-bezier(.25,.25,.5,1.1),max-height .2s cubic-bezier(.25,.25,.5,1.1),min-height .2s cubic-bezier(.25,.25,.5,1.1),border-radius 0ms cubic-bezier(.25,.25,.5,1.1),background-color 0ms cubic-bezier(.25,.25,.5,1.1),color 0ms cubic-bezier(.25,.25,.5,1.1);
 transition:right .1s cubic-bezier(.25,.25,.5,1),bottom .1s cubic-bezier(.25,.25,.5,1.1),min-width .2s cubic-bezier(.25,.25,.5,1.1),max-width .2s cubic-bezier(.25,.25,.5,1.1),max-height .2s cubic-bezier(.25,.25,.5,1.1),min-height .2s cubic-bezier(.25,.25,.5,1.1),border-radius 0ms cubic-bezier(.25,.25,.5,1.1),background-color 0ms cubic-bezier(.25,.25,.5,1.1),color 0ms cubic-bezier(.25,.25,.5,1.1);
*/
}

#Smallchat .Layout-expand {
/* height:500px;
 min-height:500px;*/
	display:none;
}
#Smallchat .Layout-mobile {
 bottom:10px
}
#Smallchat .Layout-mobile.Layout-open {
 width:calc(100% - 20px);
 min-width:calc(100% - 20px)
}
#Smallchat .Layout-mobile.Layout-expand {
 bottom:0;
 height:100%;
 min-height:100%;
 width:100%;
 min-width:100%;
 border-radius:0!important
}
@-webkit-keyframes appear {
 0% {
  opacity:0;
  -webkit-transform:scale(0);
  transform:scale(0)
 }
 to {
  opacity:1;
  -webkit-transform:scale(1);
  transform:scale(1)
 }
}
@keyframes appear {
 0% {
  opacity:0;
  -webkit-transform:scale(0);
  transform:scale(0)
 }
 to {
  opacity:1;
  -webkit-transform:scale(1);
  transform:scale(1)
 }
}
#Smallchat .Messenger_messenger {
 position:relative;
 height:100%;
 width:100%;
 min-width:300px;
 -webkit-box-orient:vertical;
 -webkit-box-direction:normal;
 -webkit-flex-direction:column;
 -ms-flex-direction:column;
 flex-direction:column
}
#Smallchat .Messenger_header,#Smallchat .Messenger_messenger {
 display:-webkit-box;
 display:-webkit-flex;
 display:-ms-flexbox;
 display:flex
}
#Smallchat .Messenger_header {
 -webkit-box-align:center;
 -webkit-align-items:center;
 -ms-flex-align:center;
 align-items:center;
 padding-left:10px;
 padding-right:40px;
 height:40px;
 -webkit-flex-shrink:0;
 -ms-flex-negative:0;
 flex-shrink:0
}


#Smallchat .Messenger_header h4 {
 opacity:0;
 font-size:16px;
 -webkit-animation:slidein .15s .3s;
 animation:slidein .15s .3s;
 -webkit-animation-fill-mode:forwards;
 animation-fill-mode:forwards
}

#Smallchat .Messenger_prompt {
 margin:0;
 font-size:16px;
 line-height:18px;
 font-weight:400;
 overflow:hidden;
 white-space:nowrap;
 text-overflow:ellipsis
}

@-webkit-keyframes slidein {
 0% {
  opacity:0;
  -webkit-transform:translateX(10px);
  transform:translateX(10px)
 }
 to {
  opacity:1;
  -webkit-transform:translateX(0);
  transform:translateX(0)
 }
}
@keyframes slidein {
 0% {
  opacity:0;
  -webkit-transform:translateX(10px);
  transform:translateX(10px)
 }
 to {
  opacity:1;
  -webkit-transform:translateX(0);
  transform:translateX(0)
 }
}
#Smallchat .Messenger_content {
    height: 450px;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    background-color: none;/*#fff;*/
}