.chat-container {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    background-color: white;
}

.chat-header {

    background-color: #f4f4f4;
    border-bottom: 1px solid #ccc;
}

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

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

.input-box {
    border-top: 1px solid #ccc;
    background-color: #f4f4f4;
}

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

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

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

.chat-body::-webkit-scrollbar-thumb:hover {
    background: #4d4d4d;
}

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

.r-text {
    background-color: #f2f2f2;
    color: #333;
    font-size: 13px;
}

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

.menu-text {
    background-color: #424242;
    color: #c5c5c5;
    font-size: 12px;
}

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

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


.message-input {
    font-size: 16px;
    border: #989898;
}

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

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

.send-button:hover {
    background-color: #3a3a3a;
}

.send-button:disabled {

    background-color: gray;
}

.add-button {
    background-color: #303030;
    color: #fff;
    font-size: 18px;
}

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


.inform-text2 {
    background-color: #eaeaea;
    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: #eaeaea;
    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 #b5b4b4;
    box-shadow: 2px 6px 12px rgba(0, 0, 0, 0.3); /* 호버 시 그림자 더 강조 */
}

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


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

.inform-item-text {

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


}

.notice-item-text {

    background-color: #fff9c4;
    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: #000000;

}

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

.end-item-text {

    background-color: #c0c0c0;
    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: #000000;

}


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

.chat-modal-close:hover,
.chat-modal-close:focus,
.back-icon:hover,
.back-icon:focus {
    color: #000000;
    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;
}