/* CHAT ROOM CSS */

/**
    1. CHAT_ROOM
    2. CHAT_ROOM_COMMON
    3. CHAT_ROOM_HEADER
    4. CHAT_ROOM_CONTENT
    5. CHAT_ROOM_FOOTER
    6. CHAT_ROOM_CONTEXT_MENU
    7. 

**/

.adminControlPanel {
    position: relative;
}

.adminControlPanel ul {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.adminControlPanel li,
.adminControlPanel button {
    /* flex: 1; */
    border-radius: 0;
}

.adminControlPanel ul.hide {
    display: none;
}

.adminControlPanel button {
    color: white;
    background-color: #1c437e;
    box-shadow: none;
    border: #2a49d6;
    cursor: pointer;
    border-right: 1px solid #0e213e;
    padding: 5px 10px;
    transition: 500ms all;
    height: 40px;
}

.adminControlPanel button:hover {
    background-color: #2258ab;
}

.adminControlPanel button:focus {
    outline: none;
}

.adminControlPanel li:last-child button {
    border-right: none
}


/* CHAT_ROOM */

.chatRoom {
    /* border: 1px solid #2a49d6; */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 4;
    height: 100%;
    /* min-width: 280px; */
    max-height: 560px;
}
.chatWrapper {
    overflow-y: auto;
    padding: 10px;
    max-height: 100%;
    position: relative;
}
.chatBlock__messageBlock {padding: 2px 0px;font-size: clamp(14px, 1.5vw, 16px);}
.chatBlock__messageBlock a {
    color: #3898ec;
    text-decoration: underline;
}
.chatBlock__messageBlock a:hover {
    text-decoration: none;
}
.chatBlock__messageBlock:hover {
    background-color: #e0e4f5;
    cursor: pointer;
}
.messageBlock__nickname {
    padding-right: 5px;
}
.messageBlock__message {
    word-break: break-word;
}



.chatRoom {

}

/* CHAT ROOM COMMON */
.chatRoom b {
    color: rgb(77, 77, 77);
}

/* CHAT ROOM HEADER */

.chatRoomHeader {
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 1rem 2rem;
    border-bottom: 1px dashed #ccc;
}

/* CHAT ROOM CONTENT */

.chatRoomContent {
    margin: 0 0 0.3rem;
    /* padding: 0.5rem; */
    height: calc(100% - 66px);
}

/* CHAT ROOM FOOTER */
.chatRoomFooter {

}

.chatRoomFooter {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0px;
    position: relative;
    padding: 5px 0;
    /* padding: 1rem 2rem; */
    border-top: 1px dashed #ccc;
    height: 60px;
}
.chatFooter__input {
    flex: 1;
}
.chatFooter__bttn {
    width: 30px;
    border: none;
    background: none;
    margin-top: 30px;
    cursor: pointer;
}
.chatFooter__bttn:focus {
    outline: none;
}


.chatFooter__bttn svg {}
.chatFooter__bttn svg path {
    transition: 200ms all;
    fill: #9b9b9b;
}
.chatFooter__bttn-active svg path {
    fill: #1c437e;
}
.chatFooter__bttn:hover svg path {
    fill: #2640bb;
}

/* CHAT_ROOM_EMOJI */

.chatBlock__emoji {
    position: absolute;
    bottom: 45px;
    width: 94%;
    right: 5px;
    max-width: 400px;
}

/* CHAT_ROOM_CONTEXT */


#same_unique_identifier {
    background-color: black;
}

.react-contextmenu-wrapper {
    height: 100% !important;
}

.react-contextmenu-item {
    padding: 0.2rem 0.2rem;
}

.react-contextmenu-item:hover {
    background-color: #262525;
    cursor: pointer;
}


.context-menu {
    color: white;
    background-color: #1c1b1b;
    z-index: 9999;
    padding: 0.5rem;
    font-size: 11px
}

.context-menu .icon svg {
    width: 10px;
    height: 10px;
    margin-right: 2rem;
    color: white;
}

.context-menu__header {
    text-align: center;
    margin: 0.5rem;
}

.context-menu__header b {
    color: white;
}

/* CHAT_ROOM_MEDIA */

@media(min-width: 430px) {
    .chatWrapper {
        max-height: 480px;
        min-height: 300px;
    }
}


@media(min-width: 896px) {

    .chatRoom {
        height: 540px;
    }

}