#messagesBlock div.message-row.response div.msg-body:not(.msg-body-media):not(.msg-body-widget):not(.msg-body-emoji)
        {background-color:#dcf8c6!important;}
        
                #messagesBlock div.message-row.response div.msg-body,
        #messagesBlock div.message-row.response div.msg-body a.link
        {color:#000000!important;}
        
                #messagesBlock div.response .vis-tit{color:#514433!important;}
        
                #messagesBlock div.message-admin div.msg-body:not(.msg-body-media):not(.msg-body-widget):not(.msg-body-emoji){background-color:#e2d2bf!important;}
        
                #messagesBlock div.message-admin div.msg-body,
        #messagesBlock div.message-admin div.msg-body a.link{color:#000000!important;}
        
                #messagesBlock div.message-admin .op-tit{color:#514433!important;}
        
        .btn-bot,.btn-bot:hover,.btn-bot:focus,.btn-bot:active{
                                                                                }

        

.vis-tit {
    display: none!important;
}

.user-nick-title,
.op-nick-title
{
    display: none!important;
}
.op-tit {
    float:left!important;
    margin-top: 2px!important;
}

.vis-tit {
    float:right;
    margin-left: 3px!important;
    margin-top: 3px!important;
    position: absolute!important;
    right: 0;
}

.op-tit {
    position: absolute!important;
}

.op-tit i.material-icons,
.vis-tit i.material-icons{
    font-size: 24px!important;
}

div.message-admin div.msg-date,
div.message-admin div.msg-body,
div.message-admin div.meta-message{
    margin-left:29px!important;
}





@media (min-width: 1024px) {
    .profile-msg-pic {
        width: 33px!important;
    }

    div.message-admin div.msg-body,
    div.message-admin div.meta-message{
        margin-left:42px!important;
    }

    
}

.header-chat {
    background-color: #00588A!important;
    height: 15px!important;

    padding: 5px!important;

}

.desktop-header,.desktop-body{
    border-color:#00588A!important;
        border-width: 5px!important;
    }


.header-link,
.header-link:hover,
.header-link .material-icons{
    color: #ece5dd!important;
}

.btn-bottom-scroll > button{
        color: #ffffff!important;
            background-color: #d11f1f!important;
    border-color: #d11f1f!important;
    }

    #scroll-to-message {
        border-bottom-color: #f51616!important;
    }
    .new-msg-holder > .new-msg {
        background-color: #f51616!important;
    }

.new-msg-holder > .new-msg {
    color: #ffffff!important;
}







    body {
    background-color: #d1bfac !important;
    margin: 0 auto; /* Centraliza horizontalmente */

}
.custom-html-container {
    margin-top: 10px;
    gap: 4px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.control-label, .form-check-label{
    font-size: 0.85em;
}
#img_chat_header {
    border-radius: 30px;
    padding-top: 10px;
    max-width: 100%; /* Garante que a imagem não ultrapasse seu contêiner */
    max-height: 100%; /* Garante que a altura também seja ajustada */
    object-fit: contain;
}
#text_chat_header{
    font-size: 16px;
    text-align: center;
}
#id-container-fluid{
    background-color: #ece5dd;
    color: #222; /* Melhor contraste */
    border-radius: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 70%;
    margin: 0 auto; /* Centraliza horizontalmente */
}
#widget-content-body {
    background-color: #ece5dd;
}
#messagesBlock {
    background-color: #ece5dd;
    higth:50%;
}
#chat-status-container {
    background-color: #ece5dd;
    padding: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    text-align: center
}
.start-chat{
    display: flex;
    flex-direction: row !important;
    color: #222; /* Melhor contraste */
    align-items: center; /* Centraliza verticalmente (se necessário) */
    margin: 0 auto; /* Centraliza horizontalmente */
}
.online-chat{
    background-color: #ece5dd;
    color: #222; /* Melhor contraste */
    border-radius: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 60%;
    margin: 20px auto;
}
form {
    display: flex;
    flex-wrap: wrap; /* Permite que os elementos quebrem de linha */
    justify-content: center; /* Centraliza os elementos */
    gap: 10px; /* Espaçamento entre os itens */
    width: 45%; /* Evita que o formulário ocupe toda a largura da tela */
    margin: 0 auto;
}

.row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}
.col-4 {
    flex: 0 0 auto;
    width: 55%;
    min-width: 160px!important;
    max-width: 400px!important;
}
.col-5 {
    flex: 0 0 auto;
    width: 55%;
    min-width: 160px!important;
    max-width: 400px!important;
}
.col-6 {
    width: 100%; /* Garante que os elementos quebrem de linha */
}
.col-12 {
    width: 100%; /* Garante que os elementos quebrem de linha */
    display: flex;
    justify-content: center; 
}

.border-bottom {
    border-bottom: 1px solid #3a2e20 !important; /* Melhor contraste */
}
.operator-info {
    background-color: #ece5dd;
    position: relative;
    z-index: 1;
    font-size: 18px;
    padding: 4px;
    border-radius: 8px;
}
.form-control {
    background-color: #e2d2bf;
    border: 1px solid #3a2e20; /* Melhor borda */
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}
.form-control:focus {
    background-color: #e9f8ed!important;
    border-color: #6bbf89!important;
    border-radius: 8px;
    padding: 10px 12px;
    box-shadow: 0 0 8px rgba(142, 207, 164, 0.6)!important;
    transition: all 0.3s ease;
}
.form-control:-webkit-autofill,
.form-control:autofill {
    background-color: #e9f8ed !important;
    transition: background-color 5000s ease-in-out 0s!important;
}
.form-check-input:checked {
    background-color: #6bbf89;
    border-color: #4fa773; /* Mais visível */
    min-width: 1em;
}
.form-check-input {
    background-color: #e2d2bf;
    border: 1px solid #3a2e20;
    border-radius: 4px;
    min-width: 1em;
}
.btn {
    color: #fff;
    background-color: #4fa773; /* Melhor visibilidade */
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 1.07em;
    font-weight: bold;
    transition: all 0.3s ease;
    justify-content: center;
    text-shadow: -1px -1px 0 #3a7d57, 1px -1px 0 #3a7d57, -1px 1px 0 #3a7d57, 1px 1px 0 #3a7d57;
}

.btn:hover {
    background-color: #3a7d5c;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Alteração na barra de rolagem */
.bottom-message {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    overflow-y: auto;
    max-height: calc(100vh - 100px); /* Melhor ajuste para telas pequenas */
    scrollbar-color: #3a2e20 #dccfc0;
    scrollbar-width: auto;
    border-radius: 12px;
    padding: 12px;
}
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #dccfc0;
}

::-webkit-scrollbar-thumb {
    background-color: #3a2e20; /* Melhor contraste */
    border-radius: 4px!important;
    border: 2px solid #e9f8ed!important;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #2b2118; /* Efeito ao passar o mouse */
}
.pt-2 {
    padding-top: .5rem !important;
    display: flex;
    justify-content: center;
    align-items: center;
}
.form-check {
    display: block;
    min-height: 1.5rem;
    padding-left: 1.5em;
    margin-bottom: .125rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}
.pb-3 {
    padding-bottom: 1rem !important;
    display: flex;
    justify-content: center;
    align-items: center;
}
/**#####################**/
/** Layout para celular **/
/**#####################**/

@media(max-width: 810px){
body {
    background-color: #d1bfac !important;
    margin: 0 auto; /* Centraliza horizontalmente */

}
#img_chat_header {
    border-radius: 30px;
    padding-top: 10px;
    max-width: 100%; /* Garante que a imagem não ultrapasse seu contêiner */
    max-height: 100%; /* Garante que a altura também seja ajustada */
    object-fit: contain;
}
#text_chat_header{
    font-size: 0.8em;
    text-align: center;
}
#id-container-fluid{
    background-color: #ece5dd;
    color: #222; /* Melhor contraste */
    border-radius: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 190%;
    margin: 0 auto; /* Centraliza horizontalmente */
}
#widget-content-body {
    background-color: #ece5dd;
}
#messagesBlock {
    background-color: #ece5dd;
    higth:80%;
}
#chat-status-container {
    background-color: #ece5dd;
    padding: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    text-align: center;
}
.start-chat{
    display: flex;
    flex-direction: row !important;
    color: #222; /* Melhor contraste */
    align-items: center; /* Centraliza verticalmente (se necessário) */
    margin: 0 auto; /* Centraliza horizontalmente */
}
.online-chat{
    background-color: #ece5dd;
    color: #222; /* Melhor contraste */
    border-radius: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 90%;
    margin: 10px auto;
}
form {
    display: flex;
    flex-wrap: wrap; /* Permite que os elementos quebrem de linha */
    justify-content: center; /* Centraliza os elementos */
    gap: 10px; /* Espaçamento entre os itens */
    width: 100%; /* Evita que o formulário ocupe toda a largura da tela */
    margin: 0 auto;
}
.control-label, .form-check-label{
    font-size: 0.85em;
}

.row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}

.col-6 {
    width: 100%; /* Garante que os elementos quebrem de linha */
}
.col-4 {
    width: 100%;
    max-width: 250px!important;
}
.col-12 {
    width: 100%; /* Garante que os elementos quebrem de linha */
    display: flex;
    justify-content: center; 
}

.border-bottom {
    border-bottom: 1px solid #3a2e20 !important; /* Melhor contraste */
}
.operator-info {
    background-color: #ece5dd;
    position: relative;
    z-index: 1;
    font-size: 18px;
    padding: 4px;
    border-radius: 8px;
}
.form-control {
    background-color: #e2d2bf;
    border: 1px solid #3a2e20; /* Melhor borda */
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    
}

.form-control:focus {
    background-color: #e9f8ed!important;
    border-color: #6bbf89!important;
    border-radius: 8px;
    padding: 10px 12px;
    box-shadow: 0 0 8px rgba(142, 207, 164, 0.6)!important;
    transition: all 0.3s ease;
}
.form-control:-webkit-autofill,
.form-control:autofill {
    background-color: #e9f8ed !important;
    transition: background-color 5000s ease-in-out 0s!important;
}
.form-check-input:checked {
    background-color: #6bbf89;
    border-color: #4fa773; /* Mais visível */
    
}
.form-check-input {
    background-color: #e2d2bf;
    border: 1px solid #3a2e20;
    border-radius: 4px;
}
.btn {
    color: #fff;
    background-color: #4fa773; /* Melhor visibilidade */
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 1.07em;
    font-weight: bold;
    transition: all 0.3s ease;
    justify-content: center;
    text-shadow: -1px -1px 0 #3a7d57, 1px -1px 0 #3a7d57, -1px 1px 0 #3a7d57, 1px 1px 0 #3a7d57;
}

.btn:hover {
    background-color: #3a7d5c;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
/* Botões em forma de lista */
.quick-replies .list-inline-item button {
    width: 100%; /* Faz os botões ocuparem toda a largura do item da lista */
    display: block; /* Garante que o botão se comporte como bloco */
}
.quick-replies {
    display: flex;
    flex-direction: column;
    align-items: stretch; /* Garante que os itens se expandam */
    width: 100%;
}
.quick-replies .list-inline-item {
    width: 100%; /* Faz os itens da lista ocuparem toda a largura */
}
/* Alteração na barra de rolagem */
.bottom-message {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    overflow-y: auto;
    max-height: calc(100vh - 100px); /* Melhor ajuste para telas pequenas */
    scrollbar-color: #3a2e20 #dccfc0;
    scrollbar-width: auto;
    border-radius: 12px;
    padding: 12px;
}
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #dccfc0;
}

::-webkit-scrollbar-thumb {
    background-color: #3a2e20; /* Melhor contraste */
    border-radius: 4px!important;
    border: 2px solid #e9f8ed!important;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #2b2118; /* Efeito ao passar o mouse */
}
    
}