body {
    background-color: #EEECE4 !important;
    overflow: hidden;
    color: var(--cor-txt-chat) !important;
}

a {
    text-decoration: none;
}

.modal {
    z-index: 1000000 !important;
}

.btn-success {
    background-color: #11CE5E !important;
    font-family: Bold !important;
    font-size: 120% !important;
    line-height: 100% !important;
    border-radius: 10px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

.btn-danger {
    background-color: #E33F6B !important;
    font-family: Bold !important;
    font-size: 120% !important;
    line-height: 100% !important;
    border-radius: 10px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

#chat-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

#chat-header {
    position: sticky;
    top: 0px;
    display: flex;
    align-items: center;
    padding: 15px 10px 15px 10px;
    background-color: var(--cor-bg);
    z-index: 999;
}

#chat-header-bg {
    width: 100%;
    height: 90px;
    position: fixed;
    top: 0px;
    z-index: 0;
}

.div-chat-logoff {
    position: absolute;
    top: 30px;
    right: 30px;
    z-index: 1000;
}

.form-file {
    width: 1px;
    height: 1px;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
}

.chat-header-arrow {
    float: left;
    width: 40px;
}

.chat-header-logo {
    float: left;
    width: 70px;
}

.chat-header-title {
    float: left;
}

#chat-body {
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex-direction: column-reverse;
    padding: 10px;
    background-image: url(../../public/images/cadastro/cad-bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 1;
}

#chat-bottom {
    position: sticky;
    bottom: 0px;
    background-color: #F0EEE4;
    padding: 15px;
    border-top: 1px solid #E0DDCF;
    z-index: 999;
}

#chat-bottom-bg {
    width: 100%;
    height: 100px;
    position: fixed;
    bottom: 0px;
    z-index: 0;
}

.cadastro-voltar {
    color: var(--cor-txt) !important;
    opacity: 0.5 !important;
}

.cadastro-img {
    width: 50px;
    height: 50px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
}

.cadastro-titulo {
    font-family: Bold !important;
    font-size: 120% !important;
    line-height: 100% !important;
    color: var(--cor-txt) !important;
}

.cadastro-sub-titulo {
    font-family: Bold !important;
    font-size: 100% !important;
    line-height: 100% !important;
    color: #8D8D8D !important;
}

.cadastro-online {
    font-family: Regular !important;
    font-size: 90% !important;
    line-height: 100% !important;
    color: var(--cor-txt) !important;
    opacity: 0.6 !important;
}

.div-header-ln {
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: 3px;
    background-color: var(--cor-ln);
}

.btn-chat-send {
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    background-color: #12CE5E !important;
}

.btn-chat-send>img {
    height: 25px;
}

.btn-chat-audio-stop {
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    background-color: var(--danger) !important;
}

.btn-chat-audio-stop>img {
    height: 20px;
}


.btn-chat-anexo {
    width: 55px !important;
    height: 55px !important;
    border-radius: 50% !important;
    background-color: var(--info) !important;
}

.btn-chat-anexo>img {
    height: 12px;
}

.btn-fianlizar {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    background-color: #06E30D !important;
    border-color: #178629 !important;
    font-family: Gambarino !important;
    font-size: 140% !important;
    line-height: 105% !important;
    color: #FFFFFF !important;
    background: linear-gradient(to bottom, #00B85D, #008C46);
}

.link-privacidade {
    font-family: Bold !important;
    color: var(--info) !important;
}

.btn-instagram {
    background-color: #E94477 !important;
    border-color: #B83B95 !important;
}

.form-chat {
    border-radius: 25px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

.div-cadastro-digitando {
    position: absolute;
    bottom: 100px;
    left: 15px;
    z-index: 999;
    width: 50px;
    height: 25px;
    border-radius: 10px;
    background-image: url(../../public/images/digitando.gif) !important;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.7;
}

.div-cadastro-gravando {
    position: absolute;
    bottom: 100px;
    left: 15px;
    z-index: 999;
    width: 50px;
    height: 25px;
    border-radius: 10px;
    background-image: url(../../public/images/cadastro/gravando.gif) !important;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.7;
}

.div-chat-audio-animation {
    position: absolute;
    top: 0px;
    left: 15px;
}

.div-chat-audio-aguarde {
    position: absolute;
    top: 12px;
    left: 15px;
}

.div-finalizar-balao {
    width: fit-content;
    padding: 15px;
    background-color: #FAF9F2 !important;
    margin-top: 5px;
    margin-bottom: 5px;
    border-radius: 10px;
}

.div-cadastro-balao-bot {
    display: none;
    width: fit-content;
    padding: 15px;
    background-color: #FFFFFF !important;
    box-shadow: 0 2px 4px rgba(57, 57, 48, 0.07);
    font-family: Regular;
    font-size: 100%;
    line-height: 110%;
    color: var(--cor-texto-escuro);
    margin-top: 5px;
    margin-bottom: 5px;
    border-radius: 0px 10px 10px 10px;
}

.div-cadastro-balao-chamado {
    display: none;
    width: fit-content;
    margin-left: auto;
    padding: 15px;
    background-color: #AFD9FC !important;
    box-shadow: 0 2px 4px rgba(57, 57, 48, 0.07);
    font-family: Regular;
    font-size: 100%;
    line-height: 110%;
    color: var(--cor-texto-escuro);
    margin-top: 5px;
    margin-bottom: 5px;
    border-radius: 0px 10px 10px 10px;
}

.div-cadastro-balao-btn-privacidade {
    background-color: #FAF9F2;
    padding: 20px;
    border-radius: 15px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.div-cadastro-balao-audio {
    display: none;
    width: fit-content;
    position: relative;
    padding: 15px;
    background-color: #FFFFFF !important;
    font-family: Regular;
    font-size: 100%;
    line-height: 110%;
    color: var(--cor-texto-escuro);
    margin-top: 5px;
    margin-bottom: 5px;
    border-radius: 0px 10px 10px 10px;
}

.div-cadastro-balao-bot-sucesso {
    position: relative;
    display: none;
    width: fit-content;
    padding: 15px 15px 25px 15px;
    background-color: var(--ai-icon) !important;
    font-family: Regular;
    font-size: 100%;
    line-height: 110%;
    color: var(--cor-txt-chat);
    margin-top: 5px;
    margin-bottom: 5px;
    border-radius: 0px 10px 10px 10px;
}

.div-cadastro-balao-bot-erro {
    display: none;
    width: fit-content;
    padding: 15px;
    background-color: #EA868F !important;
    font-family: Medium;
    font-size: 110%;
    line-height: 110%;
    color: var(--cor-txt-chat);
    margin-top: 5px;
    margin-bottom: 5px;
    border-radius: 0px 10px 10px 10px;
}

.div-cadastro-balao-user {
    display: none;
    width: fit-content;
    margin-left: auto;
    padding: 15px;
    background-color: #D3FFD0 !important;
    box-shadow: 0 2px 4px rgba(57, 57, 48, 0.07);
    font-family: Regular;
    font-size: 100%;
    line-height: 110%;
    color: var(--cor-texto-escuro);
    margin-top: 5px;
    margin-bottom: 5px;
    border-radius: 10px 0px 10px 10px;
}

.div-balar-avaliar {
    position: absolute;
    width: fit-content;
    right: 15px;
    bottom: -15px;
    background-color: var(--ai-bg);
    border-radius: 10px;
    padding: 10px;
    color: var(--cor-txt);
}

.chat-numero-check {
    font-family: Bold;
    font-size: 120%;
    line-height: 100%;
}

#lbl-local {
    font-family: Extra;
    font-size: 120%;
    line-height: 100%;
}

#lbl-protocolo {
    font-family: Extra;
    font-size: 120%;
    line-height: 100%;
}