:root {
  --theme-wb-header: #28b8ce ;
  --theme-wb-icon-color: #28b8ce ;
  /* --theme-wb-user-color: #83c76d; */
  --theme-wb-user-border-color: #a19e9e;
  --theme-wb-user-body-color: #83c76d;
  --theme-wb-user-text-color: #83c76d;
  --theme-wb-bot-border-color: #a19e9e ;
  --theme-wb-bot-body-color: #28b8ce ;
  --theme-wb-bot-text-color: #666 ;
  --theme-wb-body-chat : #fff;

  --theme-wb-floater: #42a4f5;
  --theme-wb-font: #28b8ce ;
  --theme-wb-font-family: 'Roboto', sans-serif; /* Adicionado como fonte padrão */  
}
/* 
@font-face {
    font-family: "Font Awesome 6 Free"; 
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: 
       url("./fontawesome/webfonts/fa-solid-900.woff2") format("woff2"),
       local("Font Awesome 6 Free"),
       url("./fontawesome/webfonts/fa-solid-900.ttf") format("truetype");
} */

/* .fa-comment-dots
.fa-file-lines
.fa-paper-plane
.fa-close */


.wbChatTexto{  
    word-wrap: break-word; /* Força a quebra de palavras */
}

.wbChatApp #loaderContainer {
  display: flex; /* Garante que o contêiner seja flex para o posicionamento */
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.wbChatApp #loaderMsg {
  font-size:  1.2em; 
  animation: wbBlink 1s linear infinite; /* Aplica a animação de piscar */
  -webkit-animation: wbBlink 1s linear infinite; /* Para navegadores antigos */
}

.wbChatApp .show-loader {
  display: flex; /* Garante que o display não será sobrescrito */
}

@keyframes wbBlink {
  0% {
      opacity: 1; /* Totalmente visível */
  }
  50% {
      opacity: 0.2; /* Quase invisível (ajuste este valor conforme necessário) */
  }
  100% {
      opacity: 1; /* Totalmente visível */
  }
}

@-webkit-keyframes wbBlink { /* Para navegadores antigos */
  0% {
      opacity: 1;
  }
  50% {
      opacity: 0.2;
  }
  100% {
      opacity: 1;
  }
}
.wb-fa {
    font-family: "Font Awesome 6 Free";
  font-weight: 900;
 }

.wb-comment-dots::before {
  font-weight: 900;
    font-family: "Font Awesome 6 Free";
  content: "\f4ad"; }

.wb-comment::before {
  font-weight: 900;
    font-family: "Font Awesome 6 Free";
  content: "\f075"; }

.wb-comments::before {
    font-weight: 900;
      font-family: "Font Awesome 6 Free";
    content: "\f086"; }

.wb-columns::before {
  font-weight: 900;
    font-family: "Font Awesome 6 Free";
  content: "\f0db"; }
    

.wb-file-lines::before {
  font-weight: 900;
  content: "\f15c"; }
.wb-paper-plane::before {
  font-weight: 900;
    font-family: "Font Awesome 6 Free";
  content: "\f1d8"; }
.wb-close::before {
  font-weight: 900;
    font-family: "Font Awesome 6 Free";
  content: "\f00d"; }
.wb-camera::before {
  font-weight: 900;
    font-family: "Font Awesome 6 Free";
  content: "\f030"; }
.wb-paperclip::before {
  font-weight: 900;
    font-family: "Font Awesome 6 Free";
  content: "\f0c6"; }
.wb-bars::before {
  font-weight: 900;
  font-family: "Font Awesome 6 Free";
  content: "\f0c9"; }
.wb-hands::before {
    font-weight: 900;
    font-family: "Font Awesome 6 Free";
    content: "\f256"; }
.wb-hands-circle::before {
      font-weight: 900;
      font-family: "Font Awesome 6 Free";
      content: "\f256"; /* Unicode do ícone de mãos */
      border: 2px solid #ffffff; /* Adiciona o círculo */
      border-radius: 50%; /* Faz o círculo */
      padding: 0.2em; /* Espaçamento interno para criar o efeito de círculo */
    }
  .wb-universal-access::before {
    font-weight: 900;
    font-family: "Font Awesome 6 Free";
    content: "\f29a"; /* Unicode do ícone fa-universal-access */
  }
.wb-fab, .wb-regular, .wb-solid {
    font-family: "Font Awesome 6 Free";
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  text-rendering: auto; 
  font-weight: 900;
}

.wbChatApp {
  font-family: 'WBFont', sans-serif!important;
  user-select: text!important;
  bottom: 0.8rem!important;
  position: fixed!important;
  margin: 1em!important;
  right: 0.8rem!important;
  z-index: 998!important;
}

.wbChatApp ul li {
  user-select: none!important;
  list-style: none!important;
}

.wbChatApp .wbNormalize {
  display: block!important;
  width: 56px!important;
  height: 56px!important;
  border-radius: 50%!important;
  text-align: center!important;
  color: #f0f0f0!important;
  margin: 25px auto 0!important;
  box-shadow: 0 0 4px rgba(0, 0, 0, .14), 0 4px 8px rgba(0, 0, 0, .28)!important;
  cursor: pointer!important;
  -webkit-transition: all .1s ease-out!important;
  transition: all .1s ease-out!important;
  position: relative!important;
  z-index: 998!important;
  overflow: hidden!important;
  background: var(--theme-wb-icon-color);
}

.wbChatApp .wbNormalize>i {
  font-size: 1.5em!important;
  line-height: 55px!important;
  -webkit-transition: all .2s ease-out!important;
  -webkit-transition: all .2s ease-in-out!important;
  transition: all .2s ease-in-out!important;
}

.wbChatApp .wbNormalize:not(:last-child) {
  width: 0!important;
  height: 0!important;
  margin: 20px auto 0!important;
  opacity: 0!important;
  visibility: hidden!important;
  line-height: 40px!important;
}

.wbChatApp .wbNormalize:not(:last-child)>i {
  font-size: 1.4em!important;
  line-height: 40px!important;
}

.wbChatApp .wbNormalize:not(:last-child).is-visible {
  width: 40px!important;
  height: 40px!important;
  margin: 15px auto 10!important;
  opacity: 1!important;
  visibility: visible!important;
}

.wbChatApp .wbNormalize:nth-last-child(1) {
  -webkit-transition-delay: 25ms!important;
  transition-delay: 25ms!important;
}

.wbChatApp .wbNormalize:not(:last-child):nth-last-child(2) {
  -webkit-transition-delay: 20ms!important;
  transition-delay: 20ms!important;
}

.wbChatApp .wbNormalize:not(:last-child):nth-last-child(3) {
  -webkit-transition-delay: 40ms!important;
  transition-delay: 40ms!important;
}

.wbChatApp .wbNormalize:not(:last-child):nth-last-child(4) {
  -webkit-transition-delay: 60ms!important;
  transition-delay: 60ms!important;
}

.wbChatApp .wbNormalize:not(:last-child):nth-last-child(5) {
  -webkit-transition-delay: 80ms!important;
  transition-delay: 80ms!important;
}

/* .wbNormalize(:last-child):active,
.wbNormalize(:last-child):focus,
.wbNormalize(:last-child):hover {
  box-shadow: 0 0 6px rgba(0, 0, 0, .16), 0 6px 12px rgba(0, 0, 0, .32);
} */

/*Chatbox*/
.wbChatApp .wbChatContent {
  display: none;
  position: fixed!important;
  right: 85px!important;
  bottom: 40px!important;
  
  font-size: 12px;
  line-height: 22px!important;
  font-family: var(--theme-wb-font-family);
  font-weight: 800!important;
  -webkit-font-smoothing: antialiased!important;
  font-smoothing: antialiased!important;
  opacity: 0!important;
  box-shadow: 1px 1px 100px 2px rgba(0, 0, 0, 0.22)!important;
  border-radius: 10px!important;
  -webkit-transition: all .2s ease-out!important;
  -webkit-transition: all .2s ease-in-out!important;
  transition: all .2s ease-in-out!important;
}

.wbChatApp .chat_fullscreen {
  position: fixed!important;
  right: 0px!important;
  bottom: 0px!important;
  top: 0px!important;
}

.wbChatApp .wbChatHeader {
  /* margin: 10px; */
  font-size: 22px !important;
  font-family: var(--theme-wb-font-family)!important;
  font-weight: 500!important;
  color: #f3f3f3!important;
  height: 55px!important;
  background: var(--theme-wb-header);
  border-top-left-radius: 10px!important;
  border-top-right-radius: 10px!important;
  padding-top: 8px!important;
}

.wbChatApp .chat_header2 {
  /* margin: 10px; */
  border-top-left-radius: 0px!important;
  border-top-right-radius: 0px!important;
}

.wbChatApp .wbChatHeader .span {
  float: right!important;
}

.wbChatApp .chat_fullscreen_loader {
  display: none;
  float: right!important;
  cursor: pointer!important;
  /* margin: 10px!important; */
  font-size: 20px!important;
  opacity: 0.5!important;
  /* padding: 20px!important; */
  margin: -10px 10px!important;
}

.wbChatApp .wbChatContent.is-visible {
  opacity: 1!important;
  -webkit-animation: wbZoomIn .2s cubic-bezier(.42, 0, .58, 1)!important;
  animation: wbZoomIn .2s cubic-bezier(.42, 0, .58, 1)!important;
  background: #fff;
}

.wbChatApp .is-hide {
  opacity: 0!important;
}

.wbChatApp .wbChatHeaderOptions {
  float: left!important;
  font-size: 15px!important;
  list-style: none!important;
  position: relative!important;
  height: 100%!important;
  box-shadow: 0 4px 8px rgba(0,0,0,.1) !important;
  width: 100%!important;
  text-align: relative!important;
  margin-right: 10px!important;
  letter-spacing: 0.5px!important;
  font-weight: 400!important;
}

.wbChatApp .wbChatHeaderOptions img {
  border-radius: 50%!important;
  width: 55px!important;
  float: left!important;
  margin: -30px 20px 10px 20px!important;
  border: 4px solid rgba(0, 0, 0, 0.21)!important;
}

.wbChatApp .change_img img {
  width: 35px!important;
  margin: 0px 20px 0px 20px!important;
}

.wbChatApp .wbChatHeaderOptions .header_title {
  /* display: flex!important; */
  /* flex-direction: column!important; */
  /* width: fit-content!important; */
}

.wbChatApp .wbChatHeaderOptions .header_menu {
  float: right!important;
  margin: 5px 20px 10px -20px!important;
}
.wbChatApp .wbChatHeaderOptionsMenuDiv{  
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1), 0rem 1rem 4rem -1rem rgba(0, 0, 0, 0.2)!important;
  display: none;
  z-index: 10!important; 
  position: absolute!important;
  right: 33px!important;
  top: 40px!important;
}

.wbChatApp .wbChatContent .wbModalOverlay {
  display: none;
  position: absolute!important;
  top: 0!important;
  left: 0!important;
  width: 100%!important;
  height: 100%!important;
  background: rgba(0, 0, 0, 0.5)!important;
  justify-content: center!important;
  align-items: center!important;
  z-index: 2!important;
}

/* Estilo para o modal */
.wbChatApp .wbChatContent .wbModal {
  display: none;
  background: #fff!important;
  padding: 20px!important;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3)!important;
  position: absolute!important;
  top: 50%!important;
  left: 50%!important;
  transform: translate(-50%, -50%)!important;
}

.wbChatApp .wbChatContent .wbFontModal {
  display: none;
  background: #fff!important;
  padding: 20px!important;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3)!important;
  position: absolute!important;
  top: 50%!important;
  left: 50%!important;
  transform: translate(-50%, -50%)!important;
}
/* Estilo para o botão de fechar o modal */
.wbChatApp .wbModalClose {
  cursor: pointer!important;
  position: absolute!important;
  top: 10px!important;
  right: 10px!important;
  font-size: 20px!important;
}
.wbChatApp .wbChatHeaderOptions .wb-list-group{
  width: 100%!important;
  background: var(--theme-wb-header);
  margin: 0!important;
  padding: 0!important;
  border-radius: 5px!important;
}
.wbChatApp .wb-list-group .wb-list-group-item{
  padding: 10px!important;
  justify-content: space-between!important;
  display: flex!important;
  box-sizing: border-box!important;
  width: 100%!important;
  flex-grow: 1!important;
  outline: 0px!important;
  text-decoration: none!important;
}
.wbChatApp .wb-list-group .wb-list-group-item-action:hover{
  background: var(--theme-wb-floater);
}
.wbChatApp .wb-list-group .wb-list-group-item-action{
  cursor:pointer!important;
}

.wbChatApp .wbChatHeaderOptions .header_title .title {
  font-size: 22px!important;
  font-weight: 300!important;
}

.wbChatApp .wbChatHeaderOptions .online {
  opacity: 0.4!important;
  font-size: 11px!important;
  font-weight: 300!important;
}



/*Footer*/
.wbChatApp .wbTextFild {
  /* position: relative; */
  margin: 5px 0 5px 0!important;
  
  width: 100%!important;
  font-family: var(--theme-wb-font-family)!important;
  font-size: 16px!important;
  line-height: 30px!important;
  font-weight: 500!important;
  color: #4b4b4b!important;
  -webkit-font-smoothing: antialiased!important;
  font-smoothing: antialiased!important;
  border: none!important;
  outline: none!important;
  display: inline-block!important;
}

.wbChatApp .wbTextFild.wbTextArea {
  width: 80%!important;
  height: 35px!important;
  resize: none!important;
  /* font-size: 13px; */
  /* font-weight: 400; */
  /* border-bottom: 1px solid #ccc; */
  margin: 0!important;
  overflow: hidden!important;
}
.wbChatApp #wbBtnSend {
  text-align: center!important;
  /* color: #f0f0f0!important; */
  cursor: pointer!important;
}
.wbChatApp #wbBtnFile {
  text-align: center!important;
  /* color: #f0f0f0!important; */
  cursor: pointer!important;
  margin-right: 10px!important;
}

.wbChatApp .wbChatFooter {
  box-sizing: border-box!important;
  flex-basis: 4rem!important;
  flex-shrink: 0!important;
  display: flex!important;
  align-items: center!important;
  padding: 2rem!important;
  position: relative!important;
  border-top: 1px solid #eee!important;
  border-bottom-right-radius: 10px!important;
  border-bottom-left-radius: 10px!important;
  background: #fff;
}
.wbChatApp .wbChatFooter i {
  font-size: 1.5rem!important;
  margin-right: 1rem!important;
  color: #666!important;
  cursor: pointer!important;
  transition: color 200ms!important;
}
.wbChatApp .wbChatFooter i:hover {
  color: #333!important;
}
.wbChatApp .wbChatFooter input {
  border: none!important;
  background-image: none!important;
  background-color: white!important;
  padding: 0.5rem 1rem!important;
  margin-right: 1rem!important;
  border-radius: 1.125rem!important;
  flex-grow: 2!important;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1), 0rem 1rem 1rem -1rem rgba(0, 0, 0, 0.2)!important;
  font-family: Red hat Display, sans-serif!important;
  font-weight: 400!important;
  letter-spacing: 0.025em!important;
}
.wbChatApp .wbChatFooter input:placeholder {
  color: #999!important;
}


.wbChatApp #wbFileFild {
  float: left!important;
  background: rgba(0, 0, 0, 0)!important;
}

.wbChatApp #wbSendFild {
  float: right!important;
  background: rgba(0, 0, 0, 0)!important;
}

.wbChatApp .wbChatFooter .fab {
  width: 35px!important;
  height: 35px!important;
  box-shadow: none!important;
  margin: 5px!important;
}

.wbChatApp .wbChatFooter .fab>i {
  font-size: 1.6em!important;
  line-height: 35px!important;
  color: #5c5c5c!important;
}

.wbChatApp .wbChatFooter .fab>i:hover {
  color: var(--theme-wb-header);
}




.wbChatApp .wbChatBody {
  height: 50vh!important;
  background:var(--theme-wb-body-chat);
  width: 100%!important;
  display: inline-block!important;
  text-align: center!important;
  overflow-y: auto!important;
}

.wbChatApp #wbChatBody {
  height:50vh!important;
}

/* .chat_login p,
.wbChatBody li,
p,
a {
  -webkit-animation: wbZoomIn .5s cubic-bezier(.42, 0, .58, 1)!important;
  animation: wbZoomIn .5s cubic-bezier(.42, 0, .58, 1)!important;
} */

.wbChatApp p,
.wbChatApp a,
.wbChatApp .wbChatBody li {
  -webkit-animation: wbZoomIn .5s cubic-bezier(.42, 0, .58, 1)!important;
  animation: wbZoomIn .5s cubic-bezier(.42, 0, .58, 1)!important;
}

.wbChatApp .wbChatBody p {
  /* padding-bottom: 5px; */
  margin: 0px!important;
  /* color: #888; */
}

.wbChatApp .wbChatBody .wbTitleMensage {
  font-family: var(--theme-wb-font-family)!important;
  margin: -28px 0px 0px 0px!important;
  padding-left: 5px!important;
  font-size:1.0rem!important;
}
.wbChatApp .wbChatBody .wbTitleMensage strong {
  font-size: 16px!important;
}

.wbChatApp .wbChatBody .wbMsgBotImg {
  max-height: 40vh!important;
  max-width: 100%!important;
}

.wbChatApp .wbChatBody a {
  width: 10%!important;
  text-align: center!important;
  border: none!important;
  box-shadow: none!important;
  line-height: 40px!important;
  font-size: 15px!important;
}

.wbChatApp .wbChatBodyStyle {
  text-align: left!important;
}

.wbChatApp .wbChatBodyStyle {
  margin-left: 20px!important;
  background: rgba(0, 0, 0, 0.03);
  padding: 10px!important;
}

.wbChatApp .wbChatBodyStyle ul li {
  width: 80%!important;
  background: #fff!important;
  padding: 5px!important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1)!important;
  margin-bottom: 5px!important;
  border-radius: 30px!important;
  border: 1px solid #e0e0e0!important;
  font-size: 13px!important;
  cursor: pointer!important;
  line-height: 20px!important;
  color: #888!important;
  text-align: center!important;
}

.wbChatApp .wbChatBodyStyle li:hover {
  background: var(--theme-wb-header)!important;
  color: #fff!important;
}

.wbChatApp .wbChatBodyStyle li.active {
  background: var(--theme-wb-header)!important;
  color: #fff!important;
}


.wbChatApp .chat_conversion {}

.wbChatApp .wbChatConversa {
  position: relative;
  background: var(--theme-wb-body-chat);
  margin: 6px 0 0px 0;
  min-height: 0;
  font-size: 16px;
  line-height: 18px;
  overflow-y: auto;
  width: 100%;
  float: right;
  /* padding-bottom: 100px; */
}

.wbChatApp .wbChatContent .wbChatConversa .chat_msg_item {
  position: relative;
  margin: 8px 0 15px 0;
  padding: 8px 10px;
  width: 60%;
  display: block;
  word-wrap: break-word;
  border-radius: 20px;
  -webkit-animation: wbZoomIn .5s cubic-bezier(.42, 0, .58, 1);
  animation: wbZoomIn .5s cubic-bezier(.42, 0, .58, 1);
  clear: both;
}

.wbChatApp .wbChatContent .wbChatConversa .chat_msg_item.chat_msg_item_admin {
  margin-left: 60px;
  float: left;
  /* background: rgba(0, 0, 0, 0.03);
  color: #666; */

  border: 1px solid var(--theme-wb-bot-border-color);
  background-color: var(--theme-wb-bot-body-color); /* Cor de fundo */
  color:var(--theme-wb-bot-text-color);
}
.wbChatApp .wbChatContent .wbChatConversa .chat_msg_item.chat_msg_item_admin p{
  color:var(--theme-wb-bot-text-color);
  opacity: 0.7;
}
.wbChatApp .wbChatContent .wbChatConversa .chat_msg_item.chat_msg_item_user {
  margin-right: 20px;
  float: right;
  border: 1px solid var(--theme-wb-user-border-color);
  background-color: var(--theme-wb-user-body-color); /* Cor de fundo */
  color:var(--theme-wb-user-text-color);
}

.wbChatApp .wbChatContent .wbChatConversa .chat_msg_item.chat_msg_item_user{
  /* margin-right: 20px; */
  float: right;
  /* border: 1px solid #83c76d; */
  padding: 10px;

}
.wbChatApp .wbChatContent .wbChatConversa .chat_msg_item.chat_msg_item_user select{
  width: 100%; /* Garante que o select ocupe toda a largura disponível */
  padding: 10px; /* Ajuste do espaçamento interno */
  margin: 5px 15px 15px 0!important; /* Mantém consistência com os outros inputs */
  font-size: 16px; /* Tamanho da fonte igual ao input */
  border-radius: 5px; /* Mesma borda arredondada dos outros campos */
  border: 1px solid #cccccc; /* Cor da borda */
  background-color: #f5f5f5; /* Cor de fundo */
  color: #333333; /* Cor do texto */
  outline: none; /* Remove o destaque padrão ao focar no select */
  transition: border-color 0.3s ease; /* Suave transição ao focar */
  box-sizing: border-box; /* Garante que padding seja contabilizado dentro do tamanho do elemento */
}

.wbChatApp .wbChatContent .wbChatConversa .chat_msg_item.chat_msg_item_user input{
  width: 100%!important;
  /* padding: 10px; */
  margin: 0px 0 10px 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  /* font-size: 16px!important; */
  font-weight: 600!important;
}
.wbChatApp .wbChatContent .wbChatConversa .chat_msg_item.chat_msg_item_user .WBatendimentoFormItem{
  width: 100%!important;
  /* height: 35px!important; */
  resize: none!important;
  /* font-size: 13px; */
  /* font-weight: 400; */
  /* border-bottom: 1px solid #ccc; */
  /* margin: 0!important; */
  overflow: hidden!important;
}
.wbChatApp .wbChatContent .wbChatConversa .chat_msg_item.chat_msg_item_user .error{
  color: red;
  font-size: 12px;
}
.wbChatApp .wbChatContent .wbChatConversa .chat_msg_item.chat_msg_item_user  button{
  padding: 10px 15px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
}
.wbChatApp .wbChatContent .wbChatConversa .chat_msg_item.chat_msg_item_user button:hover{
  background-color: #45a049;
}
.wbChatApp .wbChatContent .wbChatConversa .chat_msg_item.chat_msg_item_admin:before {
  content: '';
  position: absolute;
  top: 15px;
  left: -12px;
  z-index: 1;
  border: 6px solid transparent;
  border-right-color: rgba(255, 255, 255, .4);
}


.wbChatApp .chat_form .get-notified label {
  color: #077ad6;
  font-weight: 600;
  font-size: 11px;
}

.wbChatApp input {
  position: relative !important;
  width: 90% !important;
  font-family: var(--theme-wb-font-family) !important;
  font-size: 12px !important;
  line-height: 20px !important;
  font-weight: 500 !important;
  color: #4b4b4b !important;
  -webkit-font-smoothing: antialiased !important;
  font-smoothing: antialiased !important;
  outline: none !important;
  background: #fff !important;
  display: inline-block !important;
  resize: none !important;
  padding: 5px !important;
  border-radius: 3px !important;
  height: 50px !important;
  border:none !important;
  box-shadow: none !important;
}

.wbChatApp .wb-button-60 {
  float: right!important;
  align-items: center!important;
  appearance: none!important;
  background-color: #fff!important;
  border: 1px solid #dbdbdb!important;
  border-radius: .375em!important;
  box-shadow: none!important;
  box-sizing: border-box!important;
  color: #363636!important;
  cursor: pointer!important;
  display: inline-flex!important;
  font-family: var(--theme-wb-font-family)!important;
  font-size: 1rem!important;
  height: 2.5em!important;
  justify-content: center!important;
  line-height: 1.5!important;
  padding: calc(.5em - 1px) 1em!important;
  position: relative!important;
  text-align: center!important;
  user-select: none!important;
  -webkit-user-select: none!important;
  touch-action: manipulation!important;
  vertical-align: top!important;
  white-space: nowrap!important;
}

.wb-button-60:active {
  border-color: #4a4a4a!important;
  outline: 0!important;
}

.wb-button-60:focus {
  border-color: #485fc7!important;
  outline: 0!important;
}

.wb-button-60:hover {
  border-color: #b5b5b5!important;
}

.wb-button-60:focus:not(:active) {
  box-shadow: rgba(72, 95, 199, .25) 0 0 0 .125em!important;
}


.wbChatApp .chat_form .get-notified input {
  margin: 2px 0 0 0;
  border: 1px solid #83c76d;
}

.wbChatApp .chat_form .get-notified i {
  background: #83c76d;
  width: 30px;
  height: 32px;
  font-size: 18px;
  color: #fff;
  line-height: 30px;
  font-weight: 600;
  text-align: center;
  margin: 2px 0 0 -30px;
  position: absolute;
  border-radius: 3px;
}

.wbChatApp .chat_form .message_form {
  margin: 10px 0 0 0;
}

.wbChatApp .chat_form .message_form input {
  margin: 5px 0 5px 0;
  border: 1px solid #e0e0e0;
}

.wbChatApp .chat_form .message_form textarea {
  margin: 5px 0 5px 0;
  border: 1px solid #e0e0e0;
  position: relative;
  width: 90%;
  font-family: var(--theme-wb-font-family);
  font-size: 12px;
  line-height: 20px;
  font-weight: 500;
  color: #4b4b4b;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  outline: none;
  background: #fff;
  display: inline-block;
  resize: none;
  padding: 5px;
  border-radius: 3px;
}

.wbChatApp .chat_form .message_form button {
  margin: 5px 0 5px 0;
  border: 1px solid #e0e0e0;
  position: relative;
  width: 95%;
  font-family: var(--theme-wb-font-family);
  font-size: 12px;
  line-height: 20px;
  font-weight: 500;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  outline: none;
  background: #fff;
  display: inline-block;
  resize: none;
  padding: 5px;
  border-radius: 3px;
  background: #83c76d;
  cursor: pointer;
}
.wbChatApp strong.chat_time {
  padding: 0 1px 1px 0;
  font-weight: 500;
  font-size: 8px;
  display: block;
}
/*Element state*/

.wbChatApp .is-active {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  -webkit-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

.wbChatApp .is-float {
  box-shadow: 0 0 6px rgba(0, 0, 0, .16), 0 6px 12px rgba(0, 0, 0, .32);
}

.wbChatApp .is-loading {
  display: block;
  -webkit-animation: wbLoad 1s cubic-bezier(0, .99, 1, 0.6) infinite;
  animation: wbLoad 1s cubic-bezier(0, .99, 1, 0.6) infinite;
}

/*Color Options*/

.wbChatApp .blue .fab {
  background: var(--theme-wb-header);
  color: #fff;
}
.wbChatApp .blue .wbChatContent {
  background: var(--theme-wb-header);
  color: #999;
}
/* Ripple */

.wbChatApp .ink {
  display: block;
  position: absolute;
  background: rgba(38, 50, 56, 0.4);
  border-radius: 100%;
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  webkit-transform: scale(0);
  -webkit-transform: scale(0);
  transform: scale(0);
}

/*animation effect*/

.wbChatApp .ink.animate {
  -webkit-animation: wbRipple 0.5s ease-in-out;
  animation: wbRipple 0.5s ease-in-out;
}

@-webkit-keyframes wbRipple {
  /*scale the element to 250% to safely cover the entire link and fade it out*/

  100% {
    opacity: 0;
    -moz-transform: scale(5);
    -ms-transform: scale(5);
    webkit-transform: scale(5);
    -webkit-transform: scale(5);
    transform: scale(5);
  }
}

@keyframes wbRipple {
  /*scale the element to 250% to safely cover the entire link and fade it out*/

  100% {
    opacity: 0;
    -moz-transform: scale(5);
    -ms-transform: scale(5);
    webkit-transform: scale(5);
    -webkit-transform: scale(5);
    transform: scale(5);
  }
}

.wbChatApp ::-webkit-input-placeholder {
  /* Chrome */
  color: #bbb;
}

.wbChatApp :-ms-input-placeholder {
  /* IE 10+ */
  color: #bbb;
}

.wbChatApp ::-moz-placeholder {
  /* Firefox 19+ */
  color: #bbb;
}

.wbChatApp :-moz-placeholder {
  /* Firefox 4 - 18 */
  color: #bbb;
}
/*Chatbox scrollbar*/

.wbChatApp ::-webkit-scrollbar {
  width: 6px;
}

.wbChatApp ::-webkit-scrollbar-track {
  border-radius: 0;
}

.wbChatApp ::-webkit-scrollbar-thumb {
  margin: 2px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.2);
}


/*Animation*/

@-webkit-keyframes wbZoomIn {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0.0;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes wbZoomIn {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0.0;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}

@-webkit-keyframes wbLoad {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0.0;
  }

  50% {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
    opacity: 1;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}

@keyframes wbLoad {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0.0;
  }

  50% {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
    opacity: 1;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}

/* SMARTPHONES PORTRAIT */

@media only screen and (min-width: 300px) {
  .wbChatApp .wbChatContent {
    width: 48vw;
  }
  .wbChatApp #wbChatBody {
    height: 40vh;
  }
  .wbChatApp .wbTextFild {
    width: 100%; /* Ajuste para telas menores */
  }
  .wbChatApp .wbChatContent .wbFontModal {
    width: 90%;
    max-width: 300px;
    height: auto;
  }
}

@media only screen and (min-width: 480px) {
  .wbChatApp .wbChatContent {
    width: 48vw;
  }
  .wbChatApp #wbChatBody {
    height: 40vh;
  }
  .wbChatApp .wbTextFild {
    width: 65%;
  }
  .wbChatApp .wbChatContent .wbFontModal {
    width: 80%;
    max-width: 400px;
    height: auto;
  }
}

@media only screen and (min-width: 768px) {
  .wbChatApp .wbChatContent {
    width: 48vw;
  }
  .wbChatApp #wbChatBody {
    height: 40vh;
  }
  .wbChatApp .wbTextFild {
    width: 70%;
  }
  .wbChatApp .wbChatContent .wbFontModal {
    width: 70%;
    max-width: 500px;
    height: auto;
  }
}

@media only screen and (min-width: 1024px) {
  .wbChatApp .wbChatContent {
    width: 38vw;
  }
  .wbChatApp #wbChatBody {
    height: 40vh;
  }
  .wbChatApp .wbTextFild {
    width: 75%;
  }
  .wbChatApp .wbChatContent .wbFontModal {
    width: 50%;
    max-width: 600px;
    height: auto;
  }
}

@media only screen and (min-width: 1124px) {
  .wbChatApp .wbChatContent {
    width: 38vw;
  }
  .wbChatApp #wbChatBody {
    height: 40vh;
  }
  .wbChatApp .wbTextFild {
    width: 75%;
  }
  .wbChatApp .wbChatContent .wbFontModal {
    width: 40%;
    max-width: 700px;
    height: auto;
  }
}