.card-mobile-suporte {
    background: var(--Neutral-white) !important;
    width: 51%;
    position: fixed;
    left: 0;
    top: 0;
    align-items: center;
    justify-content: space-between;
    display: flex;
    height: 70px;
    padding: 0 20px;
    font-family: var(--Fonte-principal);
    color: var(--Primary-850);
    font-size: 14px;
    font-weight: 700;
  }
  
  .card-mobile-suporte img {
    cursor:pointer;
  }
  
  .count-msg {
    width: 15px;
    height: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    margin: 0;
    font-size: 10px !important;
    font-family: var(--Fonte-principal);
    background: var(--Secundary-500);
    color: var(--Neutral-white);
  }
  
  .max-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--Primary-850-Opacity80-Alt);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    -ms-flex-align: center;
    -webkit-box-align: center;
    z-index: 9999;
    align-items: center;
    -ms-flex-pack: center;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    overflow: auto;
  }
  .atendentes{
    display: flex;
    padding: 40px;
    flex-direction:column;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
    height: 110px;
    border-radius: 32px;
    border: 1px solid var(--gray-50);
    background: var(--Neutral-white);
  }
  .icones-atendentes{
    display: flex;
    margin: 0 auto;
    gap: 20px;
  }
  
  .title-atendentes{
    color:var(--Primary-850);
    text-align: center;
    font-size: 24px;
    font-family: var(--Fonte-principal);
    font-weight: 500;
    margin:0 auto;
  }
  
  .set-time {
    margin-inline: 8px;
    height: 50px;
    display: grid;
  }
  
  .chat-arrow-image {
    width: 15px;
    height: 15px;
  }
  
  .set-time div {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  
  .set-time span {
    font-family: var(--Fonte-principal);
    color: var(--Primary-850);
    font-size: 16px;
    font-weight: 500;
  }
  
  .set-time p {
    font-family: var(--Fonte-principal);
    color: var(--GrayBlue-300);
    padding: 0;
    margin: 0;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 3px;
  }
  
  .min-container {
    background-color: var(--Primary-850);
    border-radius: 32px;
    margin: 0 auto;
  }
  
  
  .box-agendamento-alert {
    font-family: Poppins, "custom_heading_font", sans-serif;
    width: 100%;
    background-color: var(--Peach-200);
    border-radius: 15px;
  }
  
  
  .box-agendamento-texto {
    text-align: center;
    text-decoration: none;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0px;
    padding: 15px;
    color: var(--Primary-850);
    width: 650px;
    margin: 0 auto;
  }
  
  .agendamento-box-container {
    background-color: var(--Primary-850);
    border-radius: 32px;
    padding: 20px 40px;
  }
  
  .box-agendamento-img {
    display: flex;
    justify-content: center;
  }
  
  .box-agendamento-img img {
    padding-top: 15px;
  }
  
  /*.aviso {
    width: 100%;
    display: flex;
    justify-content: end;
    padding-bottom: 40px;
    cursor: pointer;
  }*/
  
  .box-agendamento-conteudo {
    margin: 50px 0;
    background: white;
    padding: 20px;
    border-radius: 15px;
    font-size: 16px;
    color: var(--Primary-850);
  }
  
  .box-agendamento-conteudo span {
    font-weight: 700;
  }
  
  .agendamento-texto-lista {
    display: flex;
    align-items: center;
  }
  
  .agendamento-texto-lista img {
    margin-right: 20px;
  }
  
  .title-suport {
    display: flex;
    align-items: center;
    padding: 10px 0;
  }
  
  .title-suport img {
    width:40px !important;
    height: 40px !important;
  }
  
  .title-suport p {
    margin: 0 0 0 20px;
    font-size: 24px;
    font-weight: 500;
    color: var(--Primary-850);
    font-family: var(--Fonte-principal);
  }
  
  .chat-left {
    width: 60%;
    height: 100%;
    display: flex;
  }
  
  .chat-right {
    background-color: tomato;
    border-radius: 5px;
    width: 100%;
  }
  
  
  .card {
    border-radius: 30px;
    padding: 0 0 40px 0;
    margin: 0 32px;
  }
  
  #container-slide {
    font-size: 18px;
    width: 100%;
  }
  
  #toggle-panels-button-slide {
    font-size: 18px;
  }
  
  #container-slide:after {
    /* clearfix */
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  
  .panel-slide {
    width: 100%;
    min-height: 100vh;
    text-align: center;
    float: left;
    opacity: 1;
    transition: width 1s;
    -webkit-transition: width 1s;
  }
  
  /* .hidden-panel-slide {
    width: 0%;
    opacity: 0;
  }
   */
  
  /* ###### Chat ##### */
  .chat-container .sub-container {
    font-family: Poppins, "custom_heading_font", sans-serif;
    width: 90% !important;
    max-height: 83vh;
    padding-bottom: 30px;
    padding-top: 30px;
    margin-top: 0px;
    margin-bottom: 81px;
    background: var(--Neutral-white) 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px var(--Overlay-Black-16);
    border-radius: 10px;
    opacity: 1;
  }
  
  .chat-container .sub-container .top {
    position: relative;
    width: 100%;
    height: 96px;
    padding: 19px;
    font-size: 14px;
  }
  
  .chat-container .sub-container .top img {
    height: 26px;
    float: left;
    border-radius: 5px;
  }
  
  .chat-container .sub-container .top:after {
    position: absolute;
    bottom: 0;
    left: 50%;
    display: block;
    width: 100%;
    height: 1px;
    content: '';
    background-color: var(--GrayBlue-350);
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
  }
  
  .chat-container .sub-container .chat-wrapper {
    width: 90%;
  }
  
  .people-wrapper {
    height: 100%;
    background: var(--error);
    overflow: hidden;
  }
  
  .people-chat {
    width: -webkit-fill-available;
    display: flex;
    padding: 40px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    border-radius: 32px;
    border: 1px solid var(--gray-50);
    background: var(--Neutral-white);
    margin: 40px 32px;
  }
  
  .people-chat .person {
    display: flex;
    align-items: center;
    cursor: pointer;
    /* border-right: 1px solid var(--gray-50); */
    padding-inline: 10px;
  }
  
  .suporte-chat .person {
    display: flex;
    /*align-items: center;*/
    cursor: pointer;
    /* border-right: 1px solid var(--gray-50); */
    /* padding-right: 20px; */
    cursor: pointer;
    align-items: center;
  }

  .icon-seta {
    width: 20px !important;
    height: 20px !important;
    margin: 0 10px !important;
    border-radius: 0 !important;
  }
  
  .people-chat .person img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
  .suporte-top{
    display:flex;
    justify-content: space-between;
    width: -webkit-fill-available;
    align-items: center;
    /* Firefox */
    width: -moz-available;
  
  }
  .suporte-chat .person img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
  
  .online-atendentes {
    display:block;
    position:relative;
    width: 11px;
    height: 11px;
    border-radius: 15px;
    background: var(--Green-400);
    border: 1.5px solid var(--Neutral-white);
    margin-top: -12px;
    margin-left: 36px;
  }
  
  .offline-atendentes {
    display:block;
    position:relative;
    width: 11px;
    height: 11px;
    border-radius: 15px;
    background: var(--Red-300);
    border: 1.5px solid var(--Neutral-white);
    margin-top: -12px;
    margin-left: 36px;
  }
  
  /*
  
  .chat-wrapper .people .person img {
    float: left;
    width: 40px;
    height: 40px;
    margin-right: 12px;
    border-radius: 50%;
  }
  
  .chat-wrapper .people .person .name {
    font-family: Poppins, "custom_heading_font", sans-serif;
    font-size: 11px;
    line-height: 18px;
    color: #1a1a1a;
    font-weight: 600;
  }
  
  .chat-wrapper .people .person .time {
    font-size: 14px;
    position: absolute;
    top: 16px;
    right: 10%;
    padding: 0 0 5px 5px;
    color: #999;
    background-color: #fff;
  }
  
  .chat-wrapper .people .person .preview {
    font-size: 14px;
    display: inline-block;
    overflow: hidden !important;
    width: 70%;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #999;
  }
  
  .chat-wrapper .people .person.active,
  .container .left .people .person:hover {
    margin-top: -1px;
    margin-left: -1px;
    padding-top: 13px;
    border: 0;
    background-color: #00b0ff;
    width: calc(100% + 2px);
    padding-left: calc(10% + 1px);
  }
  
  .chat-wrapper .people .person.active span,
  .container .left .people .person:hover span {
    color: #fff;
    background: transparent;
  }
  
  .chat-wrapper .people .person.active:after,
  .container .left .people .person:hover:after {
    display: none;
  } */
  
  .chat-wrapper .right {
    position: relative;
    float: left;
    width: 100%;
    max-height: 72vh;
    height: 72vh;
  }
  
  .chat-wrapper .right .top {
    width: 100%;
    height: 47px;
    padding: 15px 29px;
    background-color: var(--GrayBlue-100-Opacity71);
    font-size: 16px;
  }
  
  .chat-wrapper .right .top span {
    font-size: 15px;
    color: var(--black);
  }
  
  .chat-wrapper .right .top span .name {
    color: var(--Neutral-900);
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 600;
  }
  
  .chat-wrapper .right .chat {
    position: relative;
    overflow: hidden;
    padding: 25px 35px 92px;
    border-style: solid;
    border-color: var(--Neutral-230);
    height: calc(100% - 48px);
    justify-content: flex-end;
    flex-direction: column;
    max-height: 400px;
    min-height: 380px;
    overflow-y: scroll;
  }
  
  .chat-wrapper .right .chat.active-chat {
    display: block;
    display: flex;
  }
  
  .chat-wrapper .right .chat.active-chat .bubble {
    transition-timing-function: cubic-bezier(0.4, -0.04, 1, 1);
  }
  
  .chat-wrapper .right .chat.active-chat .bubble:nth-of-type(1) {
    -webkit-animation-duration: 0.15s;
    animation-duration: 0.15s;
  }
  
  .chat-wrapper .right .chat.active-chat .bubble:nth-of-type(2) {
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
  }
  
  .chat-wrapper .right .chat.active-chat .bubble:nth-of-type(3) {
    -webkit-animation-duration: 0.45s;
    animation-duration: 0.45s;
  }
  
  .chat-wrapper .right .chat.active-chat .bubble:nth-of-type(4) {
    -webkit-animation-duration: 0.6s;
    animation-duration: 0.6s;
  }
  
  .chat-wrapper .right .chat.active-chat .bubble:nth-of-type(5) {
    -webkit-animation-duration: 0.75s;
    animation-duration: 0.75s;
  }
  
  .chat-wrapper .right .chat.active-chat .bubble:nth-of-type(6) {
    -webkit-animation-duration: 0.9s;
    animation-duration: 0.9s;
  }
  
  .chat-wrapper .right .chat.active-chat .bubble:nth-of-type(7) {
    -webkit-animation-duration: 1.05s;
    animation-duration: 1.05s;
  }
  
  .chat-wrapper .right .chat.active-chat .bubble:nth-of-type(8) {
    -webkit-animation-duration: 1.2s;
    animation-duration: 1.2s;
  }
  
  .chat-wrapper .right .chat.active-chat .bubble:nth-of-type(9) {
    -webkit-animation-duration: 1.35s;
    animation-duration: 1.35s;
  }
  
  .chat-wrapper .right .chat.active-chat .bubble:nth-of-type(10) {
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
  }
  
  .chat-wrapper .right .write .card-footer {
    background: var(--Neutral-white);
    height: 40px;
    line-height: 40px;
    padding: 0px !important;
    padding-top: 3px !important;
  }
  
  .chat-wrapper .right .write {
    position: absolute;
    bottom: 10px;
    left: 30px;
    height: 50px;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 3px !important;
    border: 1px solid var(--Neutral-230);
    width: calc(100% - 58px);
    border-radius: 5px;
  }
  
  .chat-wrapper .right .write input {
    background: var(--Neutral-white) !important;
    font-size: 16px;
    float: left;
    width: 347px;
    height: 30px;
    padding: 0 10px;
    color: var(--Neutral-900);
    border: 0;
    outline: none;
    background-color: var(--GrayBlue-150);
    font-weight: 400;
    margin-top: 3px !important;
  }
  
  .message-text {
    font-family: Poppins, "custom_heading_font", sans-serif;
    font-size: 16px;
    float: left;
    width: 347px;
    height: 40px;
    padding: 0 10px;
    color: var(--dark);
    border: 0;
    outline: none;
    background-color: var(--Neutral-white);
    font-weight: 400;
    line-height: 17px !important;
  }
  
  .chat-wrapper .right .write .write-link.attach:before {
    display: inline-block;
    width: 20px;
    height: 42px;
    content: '';
    background-repeat: no-repeat;
    background-position: center;
  }
  
  input:focus {
      outline: none;
  }
  
  input[type=text]{
    border: 0;
    border: 1px solid var(--gray-200);
    
    outline: 0;
  }
  
  /* .chat-wrapper .right .write .write-link.smiley:before {
    display: inline-block;
    width: 20px;
    height: 42px;
    content: '';
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/382994/smiley.png");
    background-repeat: no-repeat;
    background-position: center;
  }
  
  .chat-wrapper .right .write .write-link.send:before {
    display: inline-block;
    width: 20px;
    height: 42px;
    margin-left: 11px;
    content: '';
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/382994/send.png");
    background-repeat: no-repeat;
    background-position: center;
    margin-top: -3px !important;
  } */
  
  .chat-wrapper .right .bubble {
    text-align: left !important;
    font-size: 14px;
    line-height: 15px;
    position: relative;
    display: inline-block;
    clear: both;
    margin-bottom: 5px;
    padding: 9px 10px;
    vertical-align: top;
    border-radius: 5px;
  }
  
  .chat-wrapper .right .bubble:before {
    position: absolute;
    top: 19px;
    display: block;
    width: 8px;
    height: 6px;
    content: '\00a0';
    -webkit-transform: rotate(29deg) skew(-35deg);
    transform: rotate(29deg) skew(-35deg);
  }
  
  .chat-wrapper .right .bubble.you {
    float: left;
    color: var(--Neutral-white);
    background-color: var(--Blue-500);
    align-self: flex-start;
    -webkit-animation-name: slideFromLeft;
    animation-name: slideFromLeft;
  }
  
  .chat-wrapper .right .bubble.you:before {
    left: -3px;
    background-color: var(--Blue-500);
  }
  
  .chat-wrapper .right .bubble.me {
    float: right;
    color: var(--Neutral-900);
    background-color: var(--GrayBlue-150);
    align-self: flex-end;
    -webkit-animation-name: slideFromRight;
    animation-name: slideFromRight;
  }
  
  .chat-wrapper .right .bubble.me:before {
    right: -3px;
    background-color: var(--GrayBlue-150);
  }
  
  .chat-wrapper .right .conversation-start {
    position: relative;
    width: 100%;
    margin-bottom: 27px;
    text-align: center;
  }
  
  .chat-wrapper .right .conversation-start span {
    font-size: 14px;
    display: inline-block;
    color: var(--Gray-250);
  }
  
  .chat-wrapper .right .conversation-start span:before,
  .chat-wrapper .right .conversation-start span:after {
    position: absolute;
    top: 10px;
    display: inline-block;
    width: 30%;
    height: 1px;
    content: '';
    background-color: var(--Neutral-230);
  }
  
  .chat-wrapper .right .conversation-start span:before {
    left: 0;
  }
  
  .chat-wrapper .right .conversation-start span:after {
    right: 0;
  }
  
  @media (max-width: 1399.98px) {
    .chat-wrapper .right .chat {
      max-height: 350px !important;
      min-height: 280px;
    }
  
  }

  @media(min-width: 750px){
    .information-mobile{
      display: none!important;
    }
    .card-mobile-suporte {
          display: none;
      }
  }
  @media (max-width: 768px) {
    .containers-eac {
      background-color: var(--Neutral-white) !important;
    }
  
    .header-mob {
      display: block;
      height: 95px;
      width: 100%;
      text-align: center;
      padding-top: 15px;
      padding-bottom: 15px;
      background-color: var(--Blue-Deep-700) !important;
    }
  
    .header-mob img {
      width: 200px;
    }
  
    /* .sub-container {
      width: 100% !important;
      padding: 0px;
      padding-bottom: 30px;
      padding-top: 0px;
      margin-top: 0px;
      margin-bottom: 0px;
      border-radius: 0px;
    } */
  
    .sub-container .chat-wrapper {
      width: 100%;
    }
  
    .sub-container .top {
      width: 100%;
      height: 96px;
      padding: 0px;
      padding-top: 3px;
      font-size: 16px;
    }
  
    .sub-container .top img {
      margin-top: 5px;
      margin-left: 10px;
    }
  
  
    .chat-wrapper .right .chat {
      max-height: 450px;
      min-height: 280px;
    }
  
    .chat-wrapper .right .write {
      bottom: 10px;
      left: 0px;
      height: 50px;
      padding-left: 2px;
      padding-right: 2px;
      padding-top: 3px !important;
      width: calc(100% - 8px);
    }
  
    .chat-wrapper .right .write input {
      width: 60%;
    }
  
  }

  .envia-teste .ar {
    width: 100%;
    background: none;
    box-shadow: none;
    border: 1px dashed var(--GrayBlue-100);
  }
  .envia-teste{
    margin-top: -295px !important;
    position: relative;
    background: white;
    display: flex;
    justify-content: center;
    border-radius: 0px 0px 30px 30px;
    border-top: 1px solid var(--gray-50);
    padding: 30px;
  }
  .align-left {
  
    text-align: left;
    display: flex;
    width: -webkit-fill-available;
    flex-direction: column;
  }
  
  .align-right {
  
    text-align: right;
    text-align: left;
    display: flex;
    width: -webkit-fill-available;
    flex-direction: column;
  }
  
  .cont-mensagem-you {
    display: flex;
    flex-direction: row-reverse;
    margin: 0 20px 0 30px !important;
  }
  
  .cont-mensagem-me {
    margin: 0 30px 0 20px !important;
  }
  
  .mensagem-usuario-you {
    border-radius: 9px 0px 9px 9px !important;
    background: var(--Primary-50) !important;
    border-radius: 5px 0px 5px 5px;
    width: fit-content;
  }
  
  .mensagem-usuario-me {
    border-radius: 0px 9px 9px 9px !important;
    background: var(--Secundary-50)!important;
    border-radius: 0 5px 5px 5px;
    width: fit-content;
  }
  
  .anexo-chat {
    border-radius: 16px;
    border: 1px dashed var(--GrayBlue-100);
    background: var(--Neutral-75);
    position: relative;
    z-index: 99999999 !important;
    margin-top: -100px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
  }
  
  .button-anexo-chat {
    border-radius: 7px;
    background: var(--Peach-200);
    color: var(--Primary-850);
    font-family: var(--Fonte-principal);
    font-size: 15px;
    font-weight: 700;
    border: none;
    padding: 6px;
  }
  
  input[type='file'] {
    display: none
  }
  
  .icon-upload {
    border-radius: 5px;
    background: var(--Peach-150);
    display: flex;
    padding: 5px;
    align-items: center;
  }
  
  .upload-label {
    cursor: pointer;
  }
  
  .content-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .content-upload h1 {
    margin: 0;
    color: var(--Primary-750-Opacity80);
    font-family: var(--Fonte-principal);
    font-size: 16px;
    font-weight: 500;
  }
  
  .content-upload span {
    color: var(--Primary-750-Opacity80);
    font-family: var(--Fonte-principal);
    font-size: 14px;
    font-weight: 500;
  }
  
  .send {
    background-color: var(--blue-light);
    height: 30px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
  }
  
  
  
  .cont-mensagem {
    justify-content: center;
    display: flex;
    margin: 0 0 0 20px;
  }
  
  .cont-mensagem img {
    width: 50px;
    height: 50px;
    margin: 0 15px;
    border-radius: 30px;
  }
  .max-image-upload{
    border-radius: 0!important;
  }
  
  .data-mensagem {
    font-family: var(--Fonte-principal);
    display: flex;
    width: 100%;
    flex-direction: column;
  }
  
  .data-mensagem-you {
    align-items: flex-end;
  }
  
  .card-text::-webkit-scrollbar {
    width: 5px;
    background-color: transparent;
    border-radius: 2px;
  }
  
  .card-text::-webkit-scrollbar-thumb {
    background-color: var(--gray-50);
    border-radius: 2px;
  }
  
  .right-suporte .top {
    font-family: var(--Fonte-principal);
    background: var(--Primary-100);
    display: flex;
    align-items: center;
    padding-left: 50px;
    border-bottom: 1px solid var(--gray-50);
    padding: 40px;
    border-radius: 32px 32px 0 0;
    justify-content: space-between;
  }
  
  input:focus {
    outline: none;
  }
  
  input[type=text]{
    border: 0;
    border: 1px solid var(--gray-200);
    outline: 0;
  }
  
  .right-suporte .chat {
    background-color: var(--Neutral-white);
    height: 500px;
  }
  
  .card-text {
    overflow: auto;
    height: 500px;
    padding: 15px 0;
  }
  
  .set-title {
    display: grid;
    margin-left: 10px;
  }
  
  .tempo-disponivel {
    background-color: var(--blue-light);
    color: var(--Neutral-white) !important;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 12px !important;
    /* margin: 0 0 10px 0; */
    max-width: fit-content;
  }
  
  .tempo-indisponivel {
    background-color: var(--Error-500);
    color: var(--Neutral-white) !important;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 12px !important;
    margin: 0 0 10px 0;
    max-width: fit-content;
  }
  
  .online {
    display: block;
    width: 11px;
    height: 11px;
    border-radius: 15px;
    background: var(--Green-450);
    border: 1.5px solid var(--Neutral-225);
    position: relative;
    margin-top: -12px;
    margin-left: 36px;
  }
  
  .offline {
    display: block;
    width: 11px;
    height: 11px;
    border-radius: 15px;
    background: var(--Red-Primary);
    border: 1.5px solid var(--Neutral-255);
    position: relative;
    margin-top: -12px;
    margin-left: 36px;
  }
  
  .set-title .hours {
    background-color: var(--Primary-850);
    color: var(--Neutral-white);
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 10px;
  }
  
  .set-title span {
    color: var(--Primary-850);
    font-size: 24px;
    font-weight: 500;
  }
  
  .set-title p {
    color: var(--GrayBlue-300);
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
  }
  
  .mensagem-usuario {
    font-family: var(--Fonte-principal);
    color: var(--Primary-850);
    font-size: 13px;
    padding: 12px;
    display: flex;
    white-space: pre-line;
    margin: 0;
  }
  
  .input-group {
    border-radius: 32px;
    border: 2px solid var(--Neutral-58);
    background: var(--Neutral-white);
    display: flex;
    height: 42px;
    justify-content: space-between;
    align-items: center;
  }
  
  .input-group>.form-control {
    background: none;
    position: relative;
    flex: 1 1 auto;
    resize: none;
    min-height: 0;
    border: none;
  }
  
  *:focus {
    outline: none;
  }
  
  .message-text:focus {
    outline: none;
    border: none;
  }
  
  .items-send {
    gap: 10px;
    display: flex;
    align-items: center;
    margin: 0 10px;
  }
  
  .card-footer {
    padding: 30px 30px 0 30px;
  }
  
  .card-footer:last-child {
    border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px);
  }
  
  audio::-webkit-media-controls-panel {
    background-color: var(--Neutral-white);
  }
  
  audio::-webkit-media-controls-play-button {
    background-color: var(--Blue-Soft-300);
    border-radius: 50%;
  }
  
  audio::-webkit-media-controls-play-button:hover {
    background-color: var(--Blue-Soft-Opacity70);
  }
  
  .audio-chat {
    width: 300px;
    height: 50px;
  }
  
  .text-danger {
    color: red !important;
  }
  
  .send-message {
    width: 15px;
    margin: 0 0 0 -2px;
    cursor: pointer;
  }
  
  .card-body {
    overflow-y: scroll;
  }
  
  .dropbtn {
    background-color: var(--Success-600);
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
  }
  
  .chat-vazio {
    display: block;
    text-align: center;
    margin-top: 150px;
    font-family: var(--Fonte-principal);
    font-size: 25px;
    color: var(--Primary-850-RGB);
  }
  
  /* The container <div> - needed to position the dropdown content */
  .dropdown {
    position: relative;
    display: inline-block;
  }
  
  /* Dropdown Content (Hidden by Default) */
  .dropdown-content {
    margin-top: -20px;
    margin-left: -150px;
    display: none;
    position: absolute;
    background-color: var(--Neutral-70);
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px var(--Overlay-Black-20);
    z-index: 1;
  }
  
  /* Links inside the dropdown */
  .dropdown-content a {
    color: var(--black);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }
  
  /* Change color of dropdown links on hover */
  .dropdown-content a:hover {
    background-color: var(--Neutral-68)
  }
  
  /* Show the dropdown menu on hover */
  .dropdown:hover .dropdown-content {
    display: block;
  }
  
  /* Change the background color of the dropdown button when the dropdown content is shown */
  .dropdown:hover .dropbtn {
    background-color: var(--Green-600);
  }
  
  .form-control:focus {
    box-shadow: 0 0 0 0;
    border: 0 none;
    outline: 0;
  }

  /* here */
  
.chat-skeleton-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1.5rem; 
  padding: 20px;
}

.chat-skeleton {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.chat-skeleton-reverse {
  flex-direction: row-reverse;
  text-align: right;
}

.skeleton {
  background-color: var(--GrayBlue-400);
  position: relative;
  overflow: hidden;
}

.skeleton-avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
}

.skeleton-lines {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.chat-skeleton-reverse .skeleton-lines {
  align-items: end;
}

.skeleton-line {
  height: 1rem;
  border-radius: 0.25rem;
}

.skeleton-line.long   { width: 80%; }
.skeleton-line.medium { width: 60%; }
.skeleton-line.short  { width: 40%; }


  @media (max-width: 800px) {
    .suporte-top{
      gap: 10px;
    }
    .input-menssage-chat {
      margin-bottom: 80px;
    }
  
    .placeholder-glow {
      display: flex;
    }
  
    .skeleton-menssage-chat {
      width: 220px !important;
    }
  
    .mensagem-usuario {
      width: 85%;
    }
  
    .textarea.form-control {
      min-height: 0;
    }
  
    .card-footer {
      padding: 14px 15px 0 15px;
    }
  
    .right-suporte .top {
      padding: 20px;
    }
  
    .audio-chat {
      width: 200px;
    }
  
    .set-title span {
      font-size: 20px;
    }
  
    .cont-mensagem {
      margin: 0 !important;
    }
  
    .send {
      width: 30px;
      height: 30px;
    }
  
    .input-group {
      padding: 0px 0 0 14px !important;
    }
  
    .input-group>.form-control {
      min-height: 0;
      font-size: 14px !important;
    }
  }
  .modal-imagem-fechar{
    background: var(--Error-300);
    color: var(--Neutral-white);
    border: none;
    width: 100px;
    border-radius: 5px;
    padding: 5px 15px;
    font-size: 13px;
    cursor: pointer;
    margin: 20px auto;
  }
  .button-fechar-anexo{
    position:absolute;
    padding:8px;
    border-radius:10%;
    top:0px;
    right:30px;
    cursor:pointer;
  }
  .button-fechar-audio{
    padding:8px;
    cursor:pointer;
  }
  .text-buscando{
    color: var(--Primary-850);
    font-size: 18px; 
    font-weight: 700;
    font-family: var(--Fonte-principal);
    display: grid;
    justify-content: center;
  }
  .text-hora-mensagem{
    font-family: var(--Fonte-principal);
    font-size:10px; 
    color: var(--GrayBlue-300);
    margin-left: 18px; 
  }

  .container-info-horarios{
    display: flex;
    padding: 10px 0;
    align-items: center;
  }

  .container-info-horarios p {
    text-align: start;
    margin:0;
  }
  .container-horarios{
    background:var(--Primary-50);
    color:var( --Primary-850);
    border: 1px solid var(--Primary-200);
    border-radius:30px;
    text-align:center;
    display:grid;
    align-items:center;
    justify-content:center;
    padding:40px;
    font-size: 16px;
    font-weight: 400;
    font-family: var(--Fonte-principal);
    width: -webkit-fill-available;
    /* Firefox  */
    width: -moz-available;
  }
  .mensagem-box{
    width: auto !important;
    height: auto !important;
    display: block;
    width: 100%;
    font-size: 1rem!important;
    font-weight: 400!important;
    line-height: 1.5!important;
    color: var(--Gray-500)!important;
    background-color: var(--Neutral-white)!important;
    border: 1px solid var(--Gray-400);
  }

  .loading-chat {
    margin: 250px 0;
    text-align: center;
  }

  .loading-chat p {
    color: var(--Primary-850);;
    font-size: 18px;
    font-weight: 700;
    font-family: var(--Fonte-principal);
    display: grid;
    justify-content: center;
  }
  
  .information-chat-skeleton{
      justify-content:space-between
  }

  @media (max-width: 1080px){
       .suporte-top {
        flex-direction: column;
        gap: 20px;
        width: 300px;
        align-items: center;
    }
    .people-chat .person {
        align-items: center;
        gap: 50px;
    }
    .clasico {
      width: 600px;
    }

    .people-chat {
      align-items: center;
    }

    .set-time {
      width: 150px;
    }

    .suporte-chat .person {
      gap: 50px;
    }

    .icones-atendentes {
      flex-direction: column;
    }

    .atendentes {
      height: auto;
    }

  .information-chat-skeleton {
      flex-direction: column;
    }
  }

  @media(max-width:750px) {
    .people-chat .person {
      gap: 0;
    }
    .placeholder {
      width: 100% !important;
    }
    .chat-mobile {
      width: 330px;
      padding-bottom: 50px;
      margin-bottom: 100px;
    }
    .title-suport {
      width: -webkit-fill-available;
      justify-content: center;
    }
    .title-suport img {
      display: none;
    }
    .title-suport p {
      font-size: 18px;
    }
    /* .suporte-chat{
      display: flex !important;
      padding: 20px;
      width: 300px!important;
      margin-bottom:200px;
    } */
    .atendentes{
      height: auto!important;
      padding: 20px;
      align-items: center;
      width: -webkit-fill-available;
    }
    .icones-atendentes{
      flex-direction: column;
    }
    .title-atendentes{
      font-size: 22px;
    }
    .information{
      display: none;
    }
    .clasico{
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .primary-container{
      display: flex;
    }
    .people-chat{
      padding: 20px;
      align-content: center!important;
      width: 290px;
    }
    .suporte-top{
      flex-direction: column
    }
    .card{
      gap: 20px;
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
    }
    /*.d-flex{
      display: flex;
      flex-direction: column;
      width: 300px!important;
    }*/

    .skeleton-chat{
      display: flex;
      flex-direction: column;
      width: 300px!important;
    }

    .information-mobile{
      /* max-width: 300px; */
      background: var(--Primary-50);
      color: var(--Primary-850);
      border: 1px solid var(--Primary-200);
      border-radius: 30px;
      text-align: center;
      display: grid;
      align-items: center;
      padding: 20px;
      justify-content: center;
      margin: 20px;
      font-size: 16px;
      font-weight: 400;
      font-family: var(--Fonte-principal);
    }
    .text-information-mobile {
      margin:0;
    }

    .clasico {
      width: 100%;
    }
    .suporte-chat .person {
      gap: 0;
    }
  }

  @media (max-width: 750px) {
  .whatsapp-audio-player {
    width: 200px !important;
  }
}