/* CONTENT IS CLOSE */
.chatbox__support {
    display: flex;
    flex-direction: column;
    background: #eee;
    width: 300px;
    height: 350px;
    z-index: -123456;
    opacity: 0;
    transition: all .5s ease-in-out;
    border-radius: 10px;
}

/* CONTENT ISOPEN */
.chatbox--active {
    transform: translateY(-10px);
    z-index: 123456;
    opacity: 1;
    
}

/* BUTTON */
.chatbox__button {
    text-align: right;
}


/* HEADER */
.chatbox__header {
    position: fixed;
    width: 100%;
    top: 0;
    background: orange;
}

/* MESSAGES */

.miniImg{
    border-radius: 2rem !important; 
    margin: auto; 
    border: solid 1.5px rgb(54, 138, 150) !important;
    margin-right: 5px;
}

.chatbox__messages {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    /* flex-direction: column-reverse; */
}

.messages__item {
    background: orange;
    max-width: 60.6%;
    width: fit-content;
    overflow: auto;
}

.messages__item--operator {
    margin-right: auto;
}

.messages__item--visitor {
    margin-left: auto;
}

/* FOOTER */
.chatbox__footer {
    position:relative;
    bottom: 0;
}

.hora_visitor{
    width: 30px;
    margin-left: auto;
    font-size: 10px;
    opacity: .5;
}

.hora_operador{
    width: 30px;
    margin-right: auto;
    font-size: 10px;
    opacity: .5;
}

/**********************    ANIMACION CHAT    **********************/

.animacionText {
    animation: floatup .5s forwards
}

@keyframes floatup {
    from {
        transform: translateY(14px);
        opacity: .0;
    }
    to {
        transform: translateY(0px);
        opacity: 1;
    }
}

/*************************CONTENIDO DE CHAT****************************/

.btn-op{
    margin: 5px;
    background-color: #57dbf596;
    font-family: 'Open Sans', sans-serif;
    /* font-weight: 400; */
    /* font-size: 100%; */
    font-size: 13px;
}

img{
   max-width: 100%;
}