.chat-container {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    background-color: #e0f7fa;
    border: 1px solid #00838f;
}

.chat-header {
    background-color: #00acc1;
    border-bottom: 1px solid #00838f;
}

.chat-header h3 {
    color: #fff;
    font-size: 19px;
}

.chat-header img {
    width: 50px;
    height: 50px;
    margin-right: 10px;
}


.input-box {
    background-color: #00acc1;
    border-top: 1px solid #00838f;
}


.chat-body::-webkit-scrollbar {
    width: 8px;
}

.chat-body::-webkit-scrollbar-track {
    background: #e0f7fa;
}

.chat-body::-webkit-scrollbar-thumb {
    background: #00838f;
    border-radius: 4px;
}

.chat-body::-webkit-scrollbar-thumb:hover {
    background: #00acc1;
}

.inform-message {
    background-color: #a7d8e4;
}

.r-text {
    background-color: #b2ebf2;
    color: #004d40;
    font-size: 13px;
}

.s-text {
    background-color: #4dd0e1;
    color: #fff;
    font-size: 13px;
}

.menu-text {
    background-color: #004d40;
    color: #fff;
    font-size: 12px;
}

.menu-text:hover {
    cursor: pointer;
    background-color: #00acc1;
}

.time {
    font-size: 12px;
    color: #6d4848;
}

.message-input {
    font-size: 16px;
    border: 1px solid #8ec6c5;
}

.message-input:focus {
    outline-color: #00796b;
}

.send-button {
    background-color: #00796b;
    color: #fff;
    font-size: 18px;
}

.send-button:hover {
    background-color: #00FF7F;
}

.send-button:disabled {

    background-color: #B2DFDB;
}


.add-button {

    background-color: #32CD32;
    color: #fff;
    font-size: 18px;

}

.add-button:hover {
    background-color: #00FF7F;
}



.inform-text2 {
    background-color: #f3ffff;
    color: #040303;
    font-size: 14px; /* 폰트 사이즈 약간 증가 */
    font-weight: bold; /* 글자 두께 추가 */
    box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.1); /* 부드러운 그림자 효과 */
    transition: background-color 0.3s ease, box-shadow 0.3s ease; /* 배경색 및 그림자 전환 효과 */
}

.inform-text {
    background-color: #f3ffff;
    color: #040303;
    font-size: 14px; /* 폰트 사이즈 약간 증가 */
    font-weight: bold; /* 글자 두께 추가 */
    box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.1); /* 부드러운 그림자 효과 */
    transition: background-color 0.3s ease, box-shadow 0.3s ease; /* 배경색 및 그림자 전환 효과 */
}

.notice-text {
    background-color: #fff9c4;
    color: #040303;
    font-size: 14px; /* 폰트 사이즈 약간 증가 */
    font-weight: bold; /* 글자 두께 추가 */
    box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.1); /* 부드러운 그림자 효과 */
    transition: background-color 0.3s ease, box-shadow 0.3s ease; /* 배경색 및 그림자 전환 효과 */
}

.inform-text:hover {
    cursor: pointer;
    border: 1px solid #baefef;
    box-shadow: 2px 6px 12px rgba(0, 0, 0, 0.3); /* 호버 시 그림자 더 강조 */
}

.inform-text::before , .inform-text2::before, .notice-text::before {
    background-color: #ff6b6b ;
}

.inform-item-text:hover {
    cursor: pointer;
    background-color: #5cd9d9;
    box-shadow: 2px 6px 12px rgba(0, 0, 0, 0.15); /* 호버 시 그림자 더 강조 */
}

.inform-item-text {

    background-color: #f3ffff;
    color: #040303;
    font-size: 12px; /* 폰트 사이즈 약간 증가 */
    font-weight: bold; /* 글자 두께 추가 */
    box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.1); /* 부드러운 그림자 효과 */


}

.inform-item-text::before, .notice-item-text::before  {

    background-color: #ff6b6b;

}

.notice-item-text {

    background-color: #f3ffff;
    color: #040303;
    font-size: 12px; /* 폰트 사이즈 약간 증가 */
    font-weight: bold; /* 글자 두께 추가 */
    box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.1); /* 부드러운 그림자 효과 */


}




.end-item-text:hover {
    cursor: pointer;
    background-color: #5cd9d9;
    box-shadow: 2px 6px 12px rgba(0, 0, 0, 0.15); /* 호버 시 그림자 더 강조 */
}

.end-item-text {

    background-color: #d3fbfb;
    color: #040303;
    font-size: 12px; /* 폰트 사이즈 약간 증가 */
    font-weight: bold; /* 글자 두께 추가 */
    box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.1); /* 부드러운 그림자 효과 */


}

.end-item-text::before {

    background-color: #ff6b6b;

}



.chat-modal-close,.back-icon {
    color: #dafff1;
}

.chat-modal-close:hover,
.chat-modal-close:focus,
.back-icon:hover,
.back-icon:focus {
    color: #ffffff;
    text-decoration: none;
    cursor: pointer;
}

.responsed-header ,.responsed-container{

    background-color: #004d40; /* Dark teal background */
    color: #ffffff; /* White font color */

}

.btn_end  {
    background-color: #f1c40f ;
    color: #000000   ;

}

.btn_end :hover {
    background-color: #d4ac0d ;
}

.btn_invite  {
    background-color: #f39c12  ;
    color: #000000;

}

.btn_invite :hover {
    background-color: #e67e22;
}