/*
    Definições:
    Cores: https://coolors.co/000000-4b3b47-d0ada7-fceade-ffffff
*/
body {
    display: block;
    margin: 0px;
}

/* 1 - Telefones em paisagem e abaixo */
@media (max-width: 479px) {
    .edita-chat-vt {width: 60%!important; padding: 10px!important;}
    .botao-enviar-vt {width: 30%!important; height: 41px!important;}
    .div-corpo-vt {height: 86%!important;}
    .div-rodape-vt {height: 14%!important; position: fixed!important;}

    .edita-chat-hr {width: 70%!important; padding: 12px!important;}
    .botao-enviar-hr {width: 20%!important; height: 50px!important;}
    .div-corpo-hr {height: 74%!important;}
    .div-rodape-hr {height: 26%!important; position: fixed!important;}
}

/* 2 - Telefones em paisagem a tablet em retrato */
@media (min-width: 480px) and (max-width: 767px) {
    .edita-chat-vt {width: 60%!important; padding: 10px!important;}
    .botao-enviar-vt {width: 30%!important; height: 41px!important;}
    .div-corpo-vt {height: 90%!important;}
    .div-rodape-vt {height: 10%!important; position: fixed!important;}

    .edita-chat-hr {width: 70%!important; padding: 12px!important;}
    .botao-enviar-hr {width: 20%!important; height: 50px!important;}
    .div-corpo-hr {height: 78%!important;}
    .div-rodape-hr {height: 22%!important; position: fixed!important;}
}

/* 3 - Outros Tamanhos maiores que os anteriores */
@media (min-width: 768px)  and (max-width: 4000px) {
    .edita-chat-vt {width: 60%!important; padding: 10px!important;}
    .botao-enviar-vt {width: 30%!important; height: 41px!important;}
    .div-corpo-vt {height: 92%!important;}
    .div-rodape-vt {height: 8%!important; position: fixed!important;}

    .edita-chat-hr {width: 70%!important; padding: 12px!important;}
    .botao-enviar-hr {width: 20%!important; height: 50px!important;}
    .div-corpo-hr {height: 82%!important;}
    .div-rodape-hr {height: 18%!important; position: fixed!important;}
}

.edita-chat {
    display: block;
    bottom: 5px!important;;
    top: 5px!important;
    left: 7px!important;
    border: none;
    /*padding: 2%!important;*/
    white-space: nowrap;
}

.botao-enviar {
    bottom: 5px!important;;
    top: auto!important;
    right: 7px;
    left: auto!important;
    border: none;
}


.borda-arredondada {
    border-radius: 0.5em;
}

.cor-branca {
    color: #FFFFFF; /*= Branco = white;*/
}

.cor-preto {
    color: #000000;
}

.fundo-azul {
    background-color: #D0ADA7; /*blue;*/
}

.cor-fundo {
    background-color: #000000; /*= Preto = black;*/
}

.divs-chat {
    display: table-row;
    height: 100%;
    margin-left: 2%;
    margin-right: 2%;
}

.fonte-chat {
    font-size: 18px!important;
}

.label-chat {
    border-style: solid;
    padding: 10px;
    border-bottom-left-radius: 0.5em;
    border-bottom-right-radius: 0.5em;
    top: 0px;
    position: inherit!important;
    width: max-content;
    margin-top: 1%;
    margin-bottom: 1%;
    display: flex;
    white-space: pre-wrap;
    inline-size: fit-content;
    height: auto;

    border: none;
}

.label-chat-esquerda {
    border-top-left-radius: 0.5em;
    margin-left: 2%;
    right: auto;
    background-color: #7C3626!important;
    color: white;
}

.label-chat-esquerda::before {
    content: "";
    border-left: 5px solid #7C3626;
    border-right: 5px solid transparent;
    border-top: 5px solid #7C3626;
    border-bottom: 5px solid transparent;
    position: absolute;
    top: 0px;
    right: -10px;
}

.label-chat-direita {
/*    border-bottom-right-radius: 0.5em; */
    border-top-right-radius: 0.5em;
    text-align: right;
    left: auto!important;
    margin-right: 2%;
    background-color: #FCEADE!important;
    margin-inline-start: auto;
}

.label-chat-direita::before {
    content: "";
    width: 0px;
    height: 0px;
    display: block;
    border-left: 5px solid transparent;
    border-right: 5px solid #FCEADE;
    border-top: 5px solid #FCEADE;
    border-bottom: 5px solid transparent;
    position: absolute;
    top: 0px;
    left: -10px;
}