/** {
  box-sizing: border-box
}*/

/*body,
html {
  margin: 0;
  padding: 0;
  font-size: 18px;
  background-color: #fff;
  font-family: Roboto, sans-serif;
}*/

@keyframes slide-up {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@-webkit-keyframes fadeout {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@-moz-keyframes fadeout {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}


.footer {
  text-align: center;
  /*footer text align*/
}

#message_window {
  height: 100%;
  /*  chat window height*/
  width: 100%;
  /*chat window width*/
  display: flex;
  flex-direction: column;
  position: relative;
  background-color: white;
}

@media only screen and (min-width:500px) {
  #message_window {
    border-radius: 8px;
    transition: .3s ease-out;
    animation: fadein 1s;
    box-shadow: 0 20px 80px rgba(0, 0, 0, .6);
    height: 80%;
    width: 400px;
  }

  #message_window footer {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
  }
}

#message_window .disconnected {
  position: absolute;
  /* disconnected (animation pulse) message position property*/
  width: 100%;
  /* disconnected message (pulse animation) width */
  height: 100%;
  /*disconnected message (pulse animation) height.*/
  text-align: initial;
  display: flex;
  justify-content: center;
  align-items: center
    /*disconnected message text alignment .*/
}

#message_window.connected .disconnected {
  display: none
    /*chat connected and disconnected  pulse animation will not display .*/
}

#message_window .offline {
  display: none;
  /*chat offline message will not display.*/
}

#message_window.offline .disconnected {
  display: none;
  /*chat offline and disconnected message will not display*/
}

#message_window.offline .offline {
  background: red;
  /*chat offline message background  color .*/
  color: #fff;
  /*chat offline  message font color.*/
  padding: .25rem;
  /*chat offline message padding .*/
  display: block;
  font-family: Arial;
  /*chat offline message font-family.*/
  font-size: 16px;
  /*chat offline message font-size.*/
  text-align: center
    /*chat offline message alignment.*/
}

#message_window .powered_by {
  flex-shrink: 0;
  text-align: center;
  /* chat box footer text alignment.*/
  margin-top: 2px;
  /*chat box footer  margin from the top.*/
  font-size: .5em;
  /*chat box footer font size.*/
  color: #666;
  /*chat box footer color.*/
}

#message_window .powered_by a {
  text-decoration: none;
  /*chat box footer anchor text decoration  underline or not .*/
  color: #4586f1;
  /*chat box footer anchor text font color .*/
}


#message_window #inputform input[type=text] {
  flex-grow: 1;
  font-size: 16px;
  /* chat box footer input type (reply here ) section font size */
  outline: 0;
  border: none;
  /*chat box footer reply here section border .*/
  height: 40px;
  /*chat box footer reply here section height .*/
  padding: 0 16px 0 16px;
  /*chat box footer reply here section padding .*/
  width: 100%;
  /*chat box footer reply here section width .*/
  border-radius: 4px;
  /*chat box footer reply here section border radius .*/
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

#message_window footer button {
  background: 0 0;
  /*chat box footer reply here section button background color*/
  border: 0;
  /*reply here button border .*/
  cursor: pointer;
  /*reply here button cursor type */
  outline: 0;
  padding: 0 19px 0 10px;
  /*reply here button padding */
}

#message_window form {
  display: flex;
  margin: 0;
  /* footer reply here section margin.*/
  position: relative;
  /*footer reply here section position supporting property */
}

#message_window #message_template {
  display: none;
  /* chat box message will not display .*/
}

#message_window .message {
  font-size: 16px;
  /*chat box messages  font size .*/
  padding: .5rem;
  /* chat box messages text padding from background color .*/
  background: #f0f0f0;
  /*chat box message background . */
  color: #000;
  /* chat box message text font color.*/
  border-radius: 5px;
  /* chat box message border radius .*/
  width: auto;
  display: inline-block;
  max-width: 75%;
  /* chat box messages maximum width .*/
  position: relative;
  border-top-left-radius: 14px;
  /* chat box messages border radius in top-left position .*/
  border-top-right-radius: 14px;
  /*  chat box messages border radius in top-right position.*/
  border-bottom-right-radius: 14px;
  /*chat box messages border radius in bottom-right position .*/
  animation: slide-up 0.4s ease;
}

#message_window .upload_box {
  cursor: pointer;
  text-align: center;
  padding: 5px;
  border-radius: 4px;
  border: none;
}

#message_window .upload_form {
  display: block;
  border-radius: 4px;
}

.confirm_upload {
  margin: 0 !important;
  display: flex;
}

#message_window .upload_error {
  margin: 0px;
  display: none;
  margin-top: 5px;
  font-size: 13px;
  color: red;
}

#message_window .file_preview {
  display: flex;
  justify-content: space-between;
  border-radius: 4px;
  margin: 0 !important;
}

#message_window .file_attachment {
  color: #fff;
  /* chat box attachment message text font color .*/
  display: inline-block;
  /*chat box attachment message displays in same line .*/
  width: 50px;
  text-decoration: none;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#message_window .file_attachment img {
  width: 50px;
  display: block;
}

#message_window .button_message {
  margin: 1rem 0;
  border-radius: 4px;
  /*chat box link  message background border radius .*/
  border-color: orange;
  /*chat box link  message background border color .*/
  border-style: solid;
  /*chat box link message background  border style . */
  color: orange;
  /*chat box link message font color .*/
  border-width: 1px;
  padding: .25rem 1rem;
  text-decoration: none;
  text-align: center;
  /*chat box link message text alignment .*/
  box-shadow: 1px 1px 2px rgba(0, 0, 0, .25);
  /*chat box link message  shadow.*/

  display: block
}

#message_window .message p {
  margin-top: 0;
  margin-bottom: .5rem;
  word-wrap: break-word;
  font-family: Roboto, sans-serif;
}

#message_window .message p:last-child {
  margin-bottom: 0;
}

#message_window .message img {
  max-width: 100%;
  width: 32px
  height: auto;
  display: inline;
}

#message_window .message.incoming img{
  width: 32px !important;
  display: inline !important;
}

#message_window .message.outgoing {
  float: right;
  /*outgoing message in right position .*/
  background: #4586f1;
  /*outgoing message background color .*/
  color: #fff;
  /* outgoing message  font color */
  border-bottom-right-radius: 0;
  /*outgoing message border radius in bottom-right position.*/
  border-bottom-left-radius: 14px;
    /*   outgoing message border radius in bottom-left position.*/
    box-shadow: 0 2px 2px 1px rgba(0,0,0,.1);
}

.message:before {
  content: "";
  width: 0;
  /*bot message popup triangle width . */
  height: 0;
  /*bot message popup triangle height .*/
  position: absolute;
  /*bot message popup triangle position property */

  left: 0;
  /*bot message popup triangle position from left  */

  bottom: -18px;
  /*bot message popup triangle position from bottom  .*/
  border-style: solid;
  /* bot message popup triangle border style.*/
  border-width: 22px 15px 0 0;
  border-color: #f0f0f0 transparent transparent transparent;
    /*bot message popup triangle color */
    
}

.message.outgoing:before {
  content: "";
  width: 0;
  /*outgoing message popup triangle width .*/
  height: 0;
  /* outgoing message popup triangle height */
  position: absolute;
  /*outgoing message popup triangle position property .*/
  right: 0;
  /*outgoing message popup triangle position from right */
  left: auto;
  /* outgoing message popup triangle position from left .*/
  bottom: -13px;
  /*outgoing message popup triangle position from bottom .*/
  border-style: solid;
  /*outgoing message popup triangle border style.*/
  border-width: 0 13px 16px 0;
  border-color: transparent #4586f1 transparent transparent
    /*outgoing  message popup triangle color . */
}

#message_window #message_replies, #message_window #snackbar-container {
  text-align: center;
  /* quick message (button1 , button 2) text alignment .*/
  overflow-x: auto;
  flex-shrink: 0;
  padding-bottom: 5px;
  /*quick message (button1 , button 2) padding.*/
}

#message_window #message_replies, #message_window #snackbar-container {
  overflow: inherit
}


#message_window section {
  /* flex-grow: 1;
              flex-direction: column-reverse;
              display: flex; */
  overflow-y: auto;
  height: 100%;
}

#message_window section div div:not([class^=owl-]) {
  margin: .25rem;
  clear: both;
    margin-top: 10px;
}

#message_window footer {
  padding: .25rem;
  /*chat  box footer padding*/
  background-color: #fff;
  /*chat box footer background color */
}

#message_window #message_replies a {
  text-decoration: none;
  /* quick message (button1 , button2)text- decoration of anchor*/

  display: block;
  border: 1px solid #4586f1;
  /* quick message border*/
  color: #4586f1;
  /* quick message font color*/
  border-radius: 16px;
  /*quick message border-radius*/
  padding: .25rem 1rem;
  /*quick message padding */
  font-size: 16px;
  /*quick message font-size*/
  cursor: pointer;
  font-weight: 600;
  /*quick message font-weight*/
  font-family: Roboto, sans-serif;
  /*quick message font-family*/
}

.chat_background {
  width: 100%;
  /*width of chat background*/
  float: left;
  /*it floated in left*/
}

@media only screen and (min-height: 1600px) {
  #message_window section {
    height: 95%;
  }
}

@media only screen and (min-height: 1250px) and (max-height: 1599px) {
  #message_window section {
    height: 93%;
  }
}

@media only screen and (min-height: 901px) and (max-height: 1249px) {
  #message_window section {
    height: 91%;
  }
}

@media only screen and (max-height: 900px) {
  #message_window section {
    height: 87%;
  }
}

div#message_list {
  padding: 17px 12px 34px 12px;
}

#message_window #message_replies a:hover {
  background-color: #4586f1;
  /*hover background  color of quick message (button1,button2)*/
  color: #fff;
  /*hover text color of quick message (button1,button2)*/

}

.load_history {
  display: none;
  /* initially hidden. shown only if history exists */
  width: 100%;
  /* width of the load history div */
  margin-top: 15px;
  /* margin from top of chat box */
  text-align: center;
  /* alignment of the "load more..." link */
}

.load_history a {
  cursor: pointer;
  /* cursor when hovered over the link */
}

.typing-indicator {
  display: table;
  margin: 0 auto;
  /*chatbox typing indicator margin*/
  position: relative;
}

.typing-indicator-agent {
  display: none;
}

.typing-indicator span {
  height: 5px;
  width: 5px;
  float: left;
  /*chatbox typing indicator in left postion*/
  margin: 0 1px;
  background-color: #333;
  /*chatbox typing indicator background color*/
  display: block;
  border-radius: 50%;
  opacity: .4;
  /* chatbox typing indicator opacity*/
}

.typing-indicator span:nth-of-type(1) {
  animation: 1s blink infinite .3333s;
  /*chatbox typing indicator one  animation effect*/
}

.typing-indicator span:nth-of-type(2) {
  animation: 1s blink infinite .6666s;
  /*chatbox typing indicator two animation effect*/

}

.typing-indicator span:nth-of-type(3) {
  animation: 1s blink infinite .9999s;
  /*chatbox typing indicator three  animation effect*/
}

.chat_window_col {
  width: 100%;
  /* chat window width */
  float: left;
  /* chat window floating position */
  background: whitesmoke no-repeat fixed;
  /* chat window background color and position */
  background-size: cover;
  /* chat window background size */
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

#agent_details {
  background-color: #4e73df;
  /*agent-details background color*/
  padding: .9rem 2rem .4rem 1rem;
  /*agent-details padding*/
  font-family: Arial, Helvetica, sans-serif;
  /*agent-deatils font family*/
  color: #fff;
  /*agent -details font-color*/
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
}

.agent_name {
  font-size: .9em;
  /*agent-name font-size*/

  font-weight: 700;
  /*agent-name font weight*/
  padding-bottom: 2px;
  /*agent-name padding from the bottom*/
}

.agent_designation {
  font-size: .75em
}

.avatar {
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  margin-right: 10px;
}

.message_avatar {
  width: 25px;
  height: 25px;
  margin-top: 4.5px;
  margin-bottom: 4.5px;
  border-radius: 12.5px;
  vertical-align: bottom;
}

.owl-carousel {
  padding: .7rem .5rem .2rem .5rem;
  /* carousel padding from right, bottom, left , top position*/
  background-color: #fff;
  /* carousel background color */
  border-radius: 14px;
  /* carousel border radius */
  animation: slide-up .4s ease;
}

.owl-item>div {
  margin: 3% 0 !important;
  /* carousel item's margin */
  transition: margin .4s ease;
  /* carousel item's animation effect */
  transform: translate3d(0, 0, 0);
  /* carousel item's animation effect */
  -webkit-transform: translate3d(0, 0, 0);
  /* carousel item's animation browswe supporting code */
  border: 1px solid #f0f0f0;
  /* carousel item's border with color and border type */
  width: 200px
    /* carousel item's width */
}

.owl-item.center>div {
  margin: 0 !important
}

.owl-nav {
  display: block !important
}

.owl-next,
.owl-prev {
  position: absolute;
  /* carousel indicator's position property */
  top: 50%;
  /* carousel indicator's position from top of the carousel */
  transform: translateY(-50%)
}

.owl-prev {
  left: -.3rem;
  /* carousel left indicator position from left */
  font-size: 2em !important
    /* carousel left indicator font size */
}

.owl-next {
  right: -.3rem;
  /* carousel right indicator position from right */
  font-size: 2em !important
    /* carousel right indicator font size */
}

.owl-item .owl-carousel-image {
  height: 148.5px !important;
  /* carousel image box height */
  width: 198px !important
    /* carousel image box width */
}

.owl-item .owl-carousel-image img {
  height: 148.5px !important;
  /* carousel image height */
  width: 100% !important;
  /* carousel image width */
  margin: auto;
  /* carousel image margin */
  object-fit: cover;
  max-width: 198px !important
    /* carousel image maximum width */
}

.owl-item .owl-carousel-title {
  padding: .3rem .5rem .1rem .5rem;
  /* carousel title padding */
  font-size: .9em;
  /* carousel title font size */
  font-family: Roboto, sans-serif
    /* carosel title font family */
}

.owl-item p {
  -webkit-margin-before: 0;
  -webkit-margin-after: 0
}

.owl-item .owl-carousel-subtitle {
  max-height: 80px;
  /* carousel subtitle maximum height */
  overflow: hidden;
  /* carousel subtitle overflow hidden */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  padding: .1rem .5rem .5rem .5rem;
  /* carousel subtitle padding */
  font-size: .7em;
  /* carousel subtitle font size */
  color: gray;
  /* carousel subtitle font color */
  font-family: Roboto, sans-serif
    /* carousel subtitle font family */
}

.owl-item .owl-carousel-buttons {
  text-align: center
    /* carousel buttons text alignment */
}

.owl-item .owl-carousel-buttons ul {
  list-style-type: none;
  margin: 0 auto;
  padding: 0
}

.owl-item .owl-carousel-buttons ul li {
  display: block
}

.owl-item .owl-carousel-buttons a {
  text-decoration: none;
  /* carousel button text decoration underline or none */
  display: block;
  border: 1px solid #f0f0f0;
  /* carousel button border type size and color */
  color: #4586f1;
  /* carousel button text font color */
  border-radius: 3px;
  /* carousel button border radius */
  padding: .25rem 1rem;
  /* carousel button text padding */
  font-size: .8em;
  /* carousel button text font size */
  cursor: pointer;
  /* carousel button cursor type */
  font-family: Roboto, sans-serif
    /* carousel button text font family */
}

.owl-item .owl-carousel-buttons a:hover {
  background-color: #4586f1;
  /* carousel button hover background color */
  color: #fff;
  /* carousel button hover text font color */
  border-color: #4586f1
    /* carousel button hover border color */
}

.wrapper {
  position: relative;
  max-width: 1000px;
  margin: 0 auto
}

.wrapper:after {
  content: "";
  display: table;
  clear: both
}

.box {
  border: 2px solid #ccc;
  padding: 1rem calc(1rem - 2px);
  margin-bottom: 1rem
}

.box:after {
  content: "";
  display: table;
  clear: both
}

.box h1,
.box h2,
.box h3 {
  margin-top: 0
}

.hero {
  text-align: center;
  padding: 2rem
}

.hero h1 {
  font-size: 4rem;
  margin: 0
}

a {
  color: #a795ef
}

.copyurl {
  width: 100%;
  font-size: 1.25rem
}

div.input label {
  font-weight: 700;
  font-size: smaller
}

.addon {
  display: flex;
  border: 1px solid #999;
  border-radius: 6px;
  padding: 5px;
  background: #f0f0f0
}

.addon input,
.addon textarea {
  flex-grow: 1;
  border: 0;
  background: 0 0
}

.addon button {
  flex-grow: 0;
  background: 0 0;
  border: 1px solid #999;
  border-radius: 6px;
  font-weight: 700
}

.addon button.textarea {
  align-self: flex-start;
  padding: .5rem
}

.addon button:hover {
  background: #fff;
  color: #a795ef
}

div.hr {
  border: 1px dashed #ccc;
  width: 10%;
  margin: 4rem auto;
  height: 1px
}

a.button {
  border: 2px solid #a795ef;
  font-weight: 700;
  margin: 0;
  border-radius: 3px;
  display: inline-block;
  padding: .5rem 2rem;
  text-align: center;
  text-decoration: none;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, .2);
  background-color: #fff;
  transition: box-shadow .1s linear
}

a.button:hover {
  box-shadow: 1px 1px 5px rgba(0, 0, 0, .1)
}


.first_screen #message_window footer {
  background: 0 0;
  border-top: 0;
}

.first_screen .chat_window_col {
  background: 0 0;
}

.first_screen #message_window {
  background-size: cover;
}


#message_window #message_replies ul {
  -webkit-animation-name: fadeoutneww;
  -webkit-animation-duration: .2s;
  animation-name: fadeoutneww;
  animation-duration: .2s;
  bottom: 0;
  opacity: 1;
  position: relative
}

@keyframes fadeoutneww {
  0% {
    opacity: 0;
    bottom: -30px;
    transition: all ease-in;
    -moz-transition: all ease-in
  }

  100% {
    opacity: 1;
    bottom: 0;
    transition: all ease-in;
    -moz-transition: all ease-in
  }
}

#message_window #message_replies ul {
  list-style-type: none;
  margin: 0 auto;
  padding: 0;
}

#message_window #message_replies ul li {
  display: inline-block;
  margin: 2px;
  margin-left: 0;
  animation: slide-up .4s ease;
}


@keyframes blink {
  50% {
    opacity: 1;
  }
}

#home {
  position: relative;
  max-width: 402px;
  margin: auto;
  text-align: center
}

#home:after {
  content: "";
  display: table;
  clear: both
}

#homepage_bot {
  width: 400px;
  height: 450px;
  float: none;
  display: inline-block
}

#homepage_bot iframe {
  border: 0;
  height: 100%;
  width: 100%
}

#welcome {
  margin-left: 440px
}

.timer_col {
  width: 100%;
  float: left;
  padding: 7px 18px
}

.time_set {
  width: auto;
  float: right
}

.time_set img {
  max-width: 37px;
  width: 100%;
}

.time_set span {
  display: inline-block;
  vertical-align: middle;
  margin: 0 5px;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  font-style: italic
}

.size_200 {
  width: 200px !important;
  height: 200px !important
}

.size_250 {
  width: 250px !important;
  height: 250px !important
}

.size_300 {
  width: 300px !important;
  height: 250px !important
}

.size_336 {
  width: 336px !important;
  height: 280px !important
}

.size_600 {
  width: 300px !important;
  height: 600px !important
}

.size_selctor ul li {
  list-style: none;
  background: #150f72;
  margin: 6px 0;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 13px;
  color: #fff;
  cursor: pointer
}

.size_selctor ul {
  padding: 0
}

.size_selctor {
  position: absolute;
  right: -137px;
  top: 32px
}

.first_screen #message_window .message {
  opacity: 1;
  position: relative;
  bottom: 0;
  -webkit-animation-name: fadeout;
  animation-name: fadeout
}

.first_screen #message_window section div div:first-child {
  -webkit-animation-duration: 1s;
  animation-duration: 1s
}

.first_screen #message_window section div div:nth-child(2) {
  -webkit-animation-duration: 3s;
  animation-duration: 3s
}

@keyframes fadeout {
  0% {
    opacity: 0;
    bottom: -20px;
    transition: all ease-in;
    -moz-transition: all ease-in
  }

  100% {
    opacity: 1;
    bottom: 0;
    transition: all ease-in;
    -moz-transition: all ease-in
  }
}

@-webkit-keyframes fadeout {
  0% {
    opacity: 0;
    bottom: -20px;
    transition: all ease-in;
    -moz-transition: all ease-in
  }

  100% {
    opacity: 1;
    bottom: 0;
    transition: all ease-in;
    -moz-transition: all ease-in
  }
}

@-moz-keyframes fadeout {
  0% {
    opacity: 0;
    bottom: -20px;
    transition: all ease-in;
    -moz-transition: all ease-in
  }

  100% {
    opacity: 1;
    bottom: 0;
    transition: all ease-in;
    -moz-transition: all ease-in
  }
}

.first_screen #message_window #message_replies a {
  padding: 8px 17px;
  font-size: 16px
}

.first_screen #message_window section div div:first-child p {
  font-size: 21px;
  line-height: 29px
}

.first_screen #message_window section div div:nth-child(2) p {
  font-size: 34px;
  text-transform: uppercase;
  font-weight: 700;
  line-height: inherit
}

.first_screen #message_window section div div .message:before {
  display: none
}

.first_screen #message_window section div div .message {
  max-width: 100%;
  padding: 0;
  background: 0 0
}

.scale_0 .first_screen #message_replies a {
  font-size: 11px !important
}

.scale_0 #message_window #message_replies a {
  font-size: 11px !important;
  padding: 3px 11px
}

.scale_0 #message_window footer input[type=text] {
  font-size: 11px;
  height: 25px
}

.scale_0 .send_btn svg {
  max-width: 19px;
  float: right
}

.scale_0 .time_set span {
  font-size: 16px
}

.scale_0 .time_set img {
  max-width: 22px;
  width: 100%
}

.scale_0 .first_screen #message_window section div:first-child p {
  font-size: 12px;
  line-height: 16px
}

.scale_0 .first_screen #message_window section div:nth-child(2) p {
  font-size: 16px !important
}

.scale_0 #message_window .message {
  font-size: 11px;
  padding: 7px
}

.scale_0 .custom_scrolbar>.scroll-element.scroll-y .scroll-bar {
  height: 24px !important;
  width: 9px
}

.scale_0 .custom_scrolbar>.scroll-element.scroll-y .scroll-element_outer {
  top: 11px
}

.scale_3 .first_screen #message_window section div div:nth-child(2) p {
  font-size: 22px !important
}

.scale_3 .first_screen #message_window section div div:first-child p {
  font-size: 16px;
  line-height: 22px
}

.scale_3 .first_screen #message_window #message_replies a {
  padding: 5px 13px;
  font-size: 13px
}

.scale_3 #message_window footer input[type=text] {
  font-size: 16px;
  height: 31px
}

.scale_3 .send_btn svg {
  max-width: 25px;
  float: right
}

.scale_3 .custom_scrolbar>.scroll-element.scroll-y .scroll-bar {
  left: 6px;
  height: 47px !important;
  width: 9px
}

.scale_3 #message_window #message_replies a {
  padding: 3px 6px;
  font-size: 13px
}

/* Send Button Styling */

#send_icon-outer {
  fill: #4586f1;
}

#send_icon-inner {
  fill: #ffffff;
}

.widget {
  background-color: #fff;
  margin: 0 !important;
  position: absolute;
  width: 90%;
  bottom: 0;
  z-index: 1;
}

.widget.select {
  transform: translateX(5px);
  animation: slide-up .4s ease;
  position: relative;
  bottom: unset;
  box-shadow: 0 0 6px 2px lightgrey;
  width: 90%;
  padding: 5px;
  border-radius: 8px;
  border-top: 3px solid #4586f1;
}

.widget form {
  display: flex;
  flex-direction: column
}

.widget label {
  font-size: .75rem;
}

.widget label:hover,
.multiSubmit:hover {
  cursor: pointer;
}

.widget .text_submit {
  width: 100%;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  margin: 0 !important
}

@-moz-document url-prefix() {
  .widget .text_submit {
    width: 100%;
    display: flex;
    flex: 1 1 auto;
    margin: 0 !important
  }
}

#flagBtn {
  padding-top: 5%;
}

#flagBtn:hover,
.dropbtn:focus {
  opacity: 0.6;
}

#myInput {
  box-sizing: border-box;
  background-image: url('../images/searchicon.png');
  background-position: 10px 7px;
  background-repeat: no-repeat;
  font-size: 16px;
  padding: 14px 20px 12px 45px;
  border: none;
  border-bottom: 1px solid #ddd;
}

#myInput:focus {
  outline: 3px solid #ddd;
}

.dropdown-content {
  display: none;
  position: absolute;
  height: 10rem;
  width: 300px;
  margin-top: 10px;
  background-color: #ffffff;
  min-width: 230px;
  overflow: auto;
  border: 1px solid #fff;
  z-index: 1;
  cursor: pointer;
  bottom: 50px;
  box-shadow: 0 0 8px 4px lightgray;
  border-radius: 8px;
}

.dropdown-content p {
  color: black;
  text-decoration: none;
  display: flex;
  margin-block-start: 0em;
  margin-block-end: 0em;
  align-items: center;
  height: 34px;
}

.dropdown p:hover {
  background-color: #ddd;
}

.show {
  display: block;
}

.hideBoxShadow {
  box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0);
}

.hideBoxShadow:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0);
}

.text_submit input {
  width: 100%;
  position: relative;
  margin: .39rem 0;
  border-radius: .3125rem 0 0 .3125rem;
  height: 40px;
  margin: .39rem 0;
  font-size: 16px;
  border: none;
}

.text_submit input:active,
.text_submit input:focus,
.fileSendButton:active,
.fileSendButton:focus,
.multiSubmit:focus,
.multiSubmit:active {
  outline: none !important;
}

.text_submit button {
  margin: .39rem 0;
  padding: 0;
  position: relative;
  border-radius: 0 .3125rem .3125rem 0;
  text-align: center;
  font-weight: 600;
  font-size: .675rem;
  vertical-align: middle;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  background: none;
}

.questions {
  margin-top: 0rem;
  margin-bottom: 0.2rem;
  padding: 8px;
  font-size: 18px;
  border-radius: 8px;
  text-align: center;
}

@keyframes ripple {
  0% {
    box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.0);
  }

  50% {
    box-shadow: 0px 0px 0px 15px rgba(0, 0, 0, 0.1);
  }

  100% {
    box-shadow: 0px 0px 0px 15px rgba(0, 0, 0, 0);
  }
}

.options {
  display: none;
}

.options+label {
  width: 100%;
  position: relative;
  padding: 12px 0 12px 32px;
  margin-bottom: 0;
  vertical-align: bottom;
}

.options+label:before,
.options+label:after {
  position: absolute;
  content: '';

  transition: all .3s ease;
  transition-property: transform, border-color;
}

.options[type='radio']+label:before,
.options[type='radio']+label:after {
  border-radius: 50%;
}

.options+label:before {
  left: 0;
  top: 50%;
  width: 15px;
  transform: translateY(-50%);
  height: 15px;
  border: 2px solid rgba(0, 0, 0, 0.54);
}

.options+label:after {
  top: 50%;
  left: 5px;
  width: 9px;
  height: 9px;
  transform: translateY(-50%) scale(0);
  background: white;
}

.options:checked+label:before {
  border-color: white;
  animation: ripple 0.2s linear forwards;
}

.options:checked+label:after {
  transform: translateY(-50%) scale(1);
}

.progress-bar-holder {
  background-color: #f4f4f4;
  height: 16px;
  border-radius: 8px;
  display: inline-block;
  width: 85%;
}

.progress-bar {
  height: inherit;
  background-color: #4586f1;
  margin: 0 !important;
  border-radius: 8px;
  width: 0;
}

/* Multi Select Widget Submit Button */
.multiSubmit {
  border: none;
  height: 1.7rem;
  padding: 0;
  font-size: 1rem;
  position: absolute;
  left: 18.2em;
  bottom: 9px;
  background: none;
}

.multiSubmit.selectBtn {
  bottom: unset;
  position: relative;
  left: unset;
  float: right;
}

.autoDiv {
  position: relative;
}

.autoSearch {
  position: relative;
  border-style: none;
  height: 40px;
  font-size: 16px;
  outline: none;
}

.autoDrop {
  display: none;
  position: absolute;
  background-color: #fff;
  min-width: 230px;
  overflow: auto;
  z-index: 1;
  left: -9px;
  bottom: 83px;
  box-shadow: 0 0 8px 4px rgba(0, 0, 0, .1);
  border-radius: 8px;
}

.autoDrop p {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

.autoDrop p:hover {
  cursor: pointer;
  background-color: #ddd;
}

.chip {
  display: inline-block;
  padding: 0 25px;
  height: 50px;
  font-size: 18px;
  line-height: 50px;
  border-radius: 25px;
  background-color: #f1f1f1;
}

.chip.option-list {
  width: 100%;
  background-color: white;
  margin-bottom: 8px;
  box-shadow: 0 0 2px 1px #4586f1;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: unset;
  height: auto;
}

.chip.option-list:hover {
  background-color: whitesmoke;
}

.chip.option-list.active {
  background-color: #4586f1;
  color: white;
}

.multiChip {
  display: inline-block;
  padding: 0 20px;
  height: 35px;
  font-size: 14px;
  line-height: 35px;
  border-radius: 25px;
  background-color: #f1f1f1;
}

.closebtn {
  padding-left: 10px;
  color: #888;
  font-weight: bold;
  float: right;
  font-size: 20px;
  cursor: pointer;
}

.closebtn:hover {
  color: #000;
}

#message_window .embedWidget {
  font-size: 16px;
  padding: .5rem;
  background: #f0f0f0;
  color: #000;
  border-radius: 5px;
  width: auto;
  display: inline-block;
  position: relative;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  border-bottom-right-radius: 14px;
  margin: .25rem;
  clear: both
}

#message_window .embedWidget .top_bar {
  margin: 0
}

#message_window .embedWidget .top_bar .min_max_button {
  cursor: pointer;
  display: inline-block;
  margin: 2px 0;
  top: -4.5px;
  position: relative
}

#message_window .embedWidget .top_bar .min_max_button img {
  height: 20px;
  width: 20px;
}

#message_window div.maximize {
  margin: 0;
  position: fixed;
  top: 0;
  z-index: 100
}

#message_window .maximize .embedWidget {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%
}

#message_window .maximize .embedWidget .top_bar .min_max_button {
  position: absolute;
  top: 5px;
  margin: 5px 10px
}

#message_window .maximize .embedWidget .top_bar {
  background-color: #000;
  height: 45px;
  width: 100%
}

#message_window .maximize .embedWidget .top_bar .min_max_button img {
  height: 25px;
  width: 25px;
}

#message_window .maximize .embedWidget iframe {
  height: 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important
}

#message_window .embedWidget iframe {
  max-height: 500px !important;
  max-width: 300px !important;
  border: none !important
}



.lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 60px;
  height: 10px;
}
.lds-ellipsis div {
  position: absolute;
  top: -10px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #bbb;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
  left: 6px;
  animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
  left: 6px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
  left: 26px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
  left: 45px;
  animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(19px, 0);
  }
}



.open .dropdown-menu {
    display: block;
}
.dropdown-menu li a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
    cursor: pointer;
}
.dropdown-menu li:hover {
    background: #ccc;
}

.dropdown-toggle {
    /*border:1px solid #ee0b7d;*/
    background: #fff;
    color:#000;
}

#message_window .message.incoming .topimg {
  width:100% !important;
}