/**
MESSAGE
*/
.message {
    height: auto;
    border-radius: 1rem;
    font-size: 1.2rem;
    box-shadow: 0px 0 5px #cccccc;
    position: relative;

}

.message_box {
    display: flex;
    height: auto;
    position: relative;
    align-items: flex-start;
    margin-top: 1rem;
}

.message_box_left {
    margin-left: 1rem;
}

.message_box_left > .message {
    margin-left: 0.5rem;
}

.message_box_right {
    flex-direction: row;
    justify-content: flex-end;
    margin-right: 1rem;

}

.message_box_right > .message_info {
    order: 2;
}

.message_box_right > .message {
    margin-right: 0.5rem;
}

.message_avatar {
    border-radius: 100%;
    border: 1px solid black;
    height: 2.5rem;
    width: 2.5rem;
    -moz-background-size: 100%;
    -webkit-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    background-repeat: no-repeat;
}

.message_avatar_def_1 {
    background-image: url('/img/message/face-1.jpg');
}

.message_avatar_def_2 {
    background-image: url('/img/message/face-2.jpg');
}

.message_avatar_def_3 {
    background-image: url('/img/message/face-3.jpg');
}

.message_avatar_def_4 {
    background-image: url('/img/message/face-4.jpg');
}

.message_avatar_icon {
    background-image: url('/img/message/icon.png');
}

.message_avatar_operator {
    background-image: url('/img/message/operator.png');
}

.message_time {
    margin-top: 0.3rem;
    font-size: 0.84rem;
    color: rgba(110, 110, 110, 0.58);
}

/**
MESSAGE_STICKER
 */
.message_sticker {
    background-image: url(/img/message/sticker-robot.webp);
    width: 100%;
    background-position: center;
    height: 100px;
    background-size: contain;
    background-repeat: no-repeat;
    display: block;
    background-color: rgba(0,0,0,0);
}
.message_sticker.message-white {
    background-color: rgba(0,0,0,0);
}
/**
MESSAGE TEXT
*/
.message_text {
    padding: 0.6rem;
    border-radius: inherit;
}

.message_time {

}

.message_link {
}

.message_text img {
    width: 100%;
}

.message_text a {
    color: #3880ff;
}

.message > .message_text:after {
    content: "";
    position: absolute;
    width: 20px;
    height: 6px;
    top: 0px;
    background-color: inherit;
}

.message_box_left > .message > .message_text:after {
    left: -5px;
    border-radius: 0% 0% 0% 100%/0% 0% 0% 100%;
}

.message_box_right > .message > .message_text:after {
    right: -5px;
    border-radius: 0% 0% 100% 0%/100% 0% 100% 0%;
}

.message-blue {
    background-color: #51bbff;
    color: white;
}

.message-white {
    background-color: white;
    color: black;
}

.message-green {
    background-color: #00e172;
    color: white;
}

/**
MESSAGE BUTTON
*/
.message_buttons {
}

.message_button {
    background-color: #969696;
    opacity: 0.85;
    border-radius: 10px;
    padding: 5px;
    margin: 0.3rem;
    width: 100%;
    text-align: center;
}

.message_button.message_button_green {
    background-color: #1cff08;
}

.message_button:hover {
    cursor: pointer;
    box-shadow: 0px 0px 10px 0px;
    opacity: 0.75;
}

.message_buttons_line {
    flex-direction: row;
    display: flex;
}


/**
CHAT
*/
.chat {
    width: 100%;
    height: auto;
    display: flex;
    padding-top: 1rem;
    flex-direction: column;
    box-shadow: 0px 0px 0.2rem black;
}

.chat_background_classic {
    background-image: url('/img/message/background.jpg');
}

.chat_input {
    margin: 0.5em;
    width: 95%;
}

.chat_buttons {
    margin-top: 1rem;
    background-color: white;
    border-radius: 1rem 1rem 1rem 1rem;
}

.chat_button {
    background-color: #BABABA;
    opacity: 1;
    border-radius: 10px;
    padding: 5px;
    margin: 0.3rem;
    width: 100%;
    text-align: center;
}

div.chat_button_new {
    background-color: #e4e4e4 !important;
}

.chat_button:hover {
    cursor: pointer;
    box-shadow: 0px 0px 10px 0px;
    opacity: 0.75;
}

.chat_buttons_line {
    flex-direction: row;
    display: flex;
}

.chat_button_active {
    box-shadow: 0px 0px 10px 0px;
}