/* Including one css file into other */
@import "https://pwacontact1662.pwa.co.th/livechat/plugins/google-font/sarabun/fonts.css";
@import "https://pwacontact1662.pwa.co.th/livechat/plugins/google-icon/icons.css";

html {
    box-sizing: border-box !important;
}

*,
*::before,
*::after {
    box-sizing: inherit !important;
}


#center-text {
    display: flex !important;
    flex: 1 !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    height: 100% !important;

}

#chat-circle {
    position: fixed !important;
    bottom: 30px !important;
    right: 0px !important;
    background: none !important; /* เอาสีพื้นหลังออก */
    width: 200px !important;
    /* height: 100px !important; */
    border-radius: 0 !important; /* ถ้าไม่อยากให้บังคับเป็นวงกลม */
    color: inherit !important;
    cursor: pointer !important;
    box-shadow: none !important; /* เอาเงาออก ถ้าไม่ต้องการ */
    z-index: 9999 !important;
}


#chat-circle>img {
    width: 100% !important;
    /* padding-top: 13.5px!important; */
    /* height: 40px !important; */
}

.chat-box {
    font-family: 'Sarabun', sans-serif !important;
    font-size: 14px !important;
    display: none;
    background: #efefef !important;
    position: fixed !important;
    right: 30px !important;
    bottom: 50px !important;
    width: 350px !important;
    max-width: 85vw !important;
    /* max-height: 100vh !important; */
    border-radius: 5px !important;
    box-shadow: 0px 5px 35px 9px #ccc !important;
    z-index: 9998 !important;
}

.chat-box-time {
    float: left !important;
    margin-left: 15px !important;
    cursor: pointer !important;
}

.chat-box-text {
    float: left !important;
    margin-left: 15px !important;
    cursor: pointer !important;
}


.chat-box-close {
    float: right !important;
    margin-right: 15px !important;
    cursor: pointer !important;
}

#time {
    display: none;
}

#chat_remove,
#chat_close {
    display: block;
}

.chat-box-header {
    /* background: #0560EB !important; */
    background: #0054AA!important;
    height: 40px !important;
    border-top-left-radius: 5px !important;
    border-top-right-radius: 5px !important;
    color: white !important;
    text-align: center !important;
    font-size: 20px !important;
    padding-top: 5px !important;
    -webkit-box-sizing: inherit !important;
    box-sizing: inherit !important;
}

.chat-box-exit {
    /* position: relative !important; */
    position: absolute;
    height: auto !important;
    border: 1px solid #ccc !important;
    display: none;
    z-index: 9999 !important;
    width: inherit !important;
    background: #ffffff !important;
    text-align: center;
}

.chat-box-working-hours,
.chat-box-survey,
.chat-box-thank {
    position: relative !important;
    height: auto !important;
    border: 1px solid #ccc !important;
    display: none;
    z-index: 9999 !important;
    width: inherit !important;
    background: #efefef !important;
    text-align: center;
}

#rating-value {
    display: none;
}

.chat-box-working-hours-msg,
.chat-box-exit-msg,
.chat-box-survey-msg,
.chat-box-thank-msg {
    margin-left: 10px !important;
}

.chat-box-exit-btn,
.chat-box-survey-btn,
.chat-box-thank-btn {
    margin-bottom: 5px !important;
    /* margin-left: 10px !important; */
}

.chat-box-body {
    position: relative !important;
    height: auto !important;
    border: 1px solid #ccc !important;
    overflow: hidden !important;
   /* padding-bottom : 10px !important; */
}

.chat-box-body:after {
    content: "" !important;
    opacity: 0.1 !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    height: 100% !important;
    position: absolute !important;
    z-index: -1 !important;
}

.chat-form {
    display: none;
    height: auto !important;
    margin-bottom: 5px !important;
}

.chat-form-msg {
    font-family: 'Sarabun', sans-serif !important;
    font-size: 14px !important;
    color: #000000;
    text-align: center !important;
}

.chat-form-input-group {
    position: relative !important;
    margin-bottom: 33px !important;
    border-bottom: 1px solid rgba(0, 0, 0, .2) !important;
    margin: 10px 20px 10px 20px !important;
}

.chat-form-input {
    padding: 5px !important;
    color: #000000 !important;
    background: #fff !important;
    outline: none !important;
    margin: 0 !important;
    border: 1px solid #fff !important;
    border-radius: 5px !important;
    box-shadow: -4px 8px 20px 2px #ccc !important;
    width: 100% !important;
    height: 30px !important;
    font-size: 14px !important;
    opacity: 1 !important;
    font-family: inherit
}

.material-icons{
    cursor: pointer;
}

/* สไตล์สำหรับแสดงรูป emoji */
.chat-box-emoji{
    /* display: none; */
    position: absolute !important;
    height: 200px !important;
    border: 1px solid #ccc !important;
    display: none;
    z-index: 9999 !important;
    width: inherit !important;
    background: #ffffff !important;
    text-align: center;
    overflow: auto !important;
    bottom: 35px;
    left: 0px;
}


/* สไตล์สำหรับแสดงรูป sticker */
.chat-box-sticker {
    display: none;
    position: absolute !important;
    max-height: 200px !important;
    border: 1px solid #ccc !important;
    display: none;
    z-index: 9999 !important;
    width: inherit !important;
    background: #ffffff !important;
    text-align: center;
    overflow: auto !important;
    bottom: 35px;
    left: 0px;
}

.chat-box-sticker-container {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
    margin-bottom: 5px;
    justify-content: center !important;
    align-items: center !important;
}

.chat-box-sticker-img {
    width: 90px;
    height: 90px;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 5px;
    cursor: pointer;
}



/* Chrome, Safari, Edge, Opera */
#chat_cust_tel::-webkit-outer-spin-button,
#chat_cust_tel::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* Firefox */
#chat_cust_tel {
    -moz-appearance: textfield !important;
}

.chat-form-footer,
.chat-menu-footer {
    width: 100% !important;
    text-align: center !important;
    padding-bottom: 5px !important;
}

.chat-btn#chat-box-exit-confirm,
.chat-btn#chat-box-exit-cancel,
.chat-btn#chat-box-thank-done,
.chat-btn#chat-box-survey-confirm {
    background: #0054AA !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    border-radius: 45px !important;
    padding-right: 10px !important;
    padding-left: 10px !important;
    color: #ffffff !important;
    font-size: 14px !important;
    cursor: pointer !important;
    font-family: inherit !important;
}

.chat-btn#chat_btn_submit {
    background: #0054AA !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    border-radius: 45px !important;
    padding-right: 10px !important;
    padding-left: 10px !important;
    color: #ffffff !important;
    font-size: 16px !important;
    cursor: pointer !important;
    font-family: inherit !important;
}

.chat-btn#chat_back_menu,
.chat-btn#chat_agent_menu {
    background: #0054AA !important;
    margin-top: 10px !important;
    margin-bottom: 5px !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    border-radius: 45px !important;
    padding-right: 10px !important;
    padding-left: 10px !important;
    color: #ffffff !important;
    font-size: 14px !important;
    cursor: pointer !important;
    font-family: inherit !important;
}

.chat-btn#chat_back_menu {
    float: left !important;
    margin-left: 10px !important;
}

.chat-btn#chat_agent_menu {
    float: right !important;
    margin-right: 10px !important;
}

.chat-menu-footer {
    display: none;
}

#chat-overlay {
    background: rgba(255, 255, 255, 0.1) !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    display: none;
}



#chat-input-msg {
    font-family: 'Sarabun', sans-serif !important;
    font-size: 14px !important;
    background: #f4f7f9 !important;
    width: 60% !important;
    position: relative !important;
    height: 35px !important;
    padding-top: 7px !important;
    padding-right: 15px !important;
    padding-bottom: 5px !important;
    padding-left: 15px !important;
    border: none !important;
    resize: none !important;
    outline: none !important;
    border: 1px solid #ccc !important;
    color: #888 !important;
    border-top: none !important;
    border-bottom-right-radius: 5px !important;
    border-bottom-left-radius: 5px !important;
    overflow: hidden !important;
    resize: none !important;
    overflow: hidden !important;
    float: left;
}

.chat-input {
    height: 35px !important;
    display: none;
}

.chat-input>form {
    margin-bottom: 0 !important;
}



#chat-input::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: #ccc !important;
}

#chat-input::-moz-placeholder {
    /* Firefox 19+ */
    color: #ccc !important;
}

#chat-input:-ms-input-placeholder {
    /* IE 10+ */
    color: #ccc !important;
}

#chat-input:-moz-placeholder {
    /* Firefox 18- */
    color: #ccc !important;
}

.chat-attach {
    position: relative !important;
    padding-top: 5px;
    text-align: center !important;
    background: transparent !important;
    float: left !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 50% !important;
    color: #5A5EB9 !important;
    width: 10% !important;
    height: 35px !important;
}

.chat-emoji {
    position: relative !important;
    padding-top: 5px;
    text-align: center !important;
    background: transparent !important;
    float: left !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 50% !important;
    color: #5A5EB9 !important;
    width: 10% !important;
    height: 35px !important;
}

.chat-sticker {
    position: relative !important;
    padding-top: 5px;
    text-align: center !important;
    background: transparent !important;
    float: left !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 50% !important;
    color: #5A5EB9 !important;
    width: 10% !important;
    height: 35px !important;
}

.chat-submit {
    position: relative !important;
    padding-top: 5px;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    color: #5A5EB9 !important;
    width: 10% !important;
    height: 35px !important;
    float: left;
}

.chat-logs {
    padding: 10px !important;
    height: 370px !important;
    overflow-y: scroll !important;
    margin-bottom: 5px !important;
}

.chat-logs::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3) !important;
    background-color: #F5F5F5 !important;
}

.chat-logs::-webkit-scrollbar {
    width: 5px !important;
    background-color: #F5F5F5 !important;
}

.chat-logs::-webkit-scrollbar-thumb {
    background-color: #5A5EB9 !important;
}




@media only screen and (max-width: 500px) {
    .chat-logs {
        height: 40vh !important;
    }
}

.chat-msg.user>.msg-chat-infos {
    float: left !important;
}

.chat-msg.user>.msg-chat-infos>.msg-chat-timestamp {
    margin-left: 5px !important;
}

.chat-msg.user>.msg-avatar img {
    clear: both !important;
    width: 45px !important;
    height: 45px !important;
    border-radius: 50% !important;
    float: left !important;
    width: 15% !important;
}

.chat-msg.self>.msg-chat-infos>.msg-chat-name {
    float: right !important;
}

.chat-msg.self>.msg-chat-infos>.msg-chat-timestamp {
    float: right !important;
}

.chat-msg.self>.msg-chat-infos>.msg-chat-timestamp {
    margin-right: 5px !important;
}

.chat-msg.self>.msg-avatar img {
    clear: both !important;
    width: 45px !important;
    height: 45px !important;
    border-radius: 50% !important;
    float: right !important;
    width: 15% !important;
}

.msg-chat-name {
    font-weight: 600 !important;
}

.msg-chat-timestamp {
    color: #697582 !important;
}

.cm-msg-text {
    background: white !important;
    padding: 10px 15px 10px 15px !important;
    color: #666 !important;
    max-width: 75% !important;
    float: left !important;
    position: relative !important;
    margin-bottom: 5px !important;
    border-radius: 30px !important;
    word-wrap: break-word !important;
}

.cm-msg-text a {
    text-decoration: none !important;
}

.cm-msg-text p {
    margin-block-start: 0em !important;
    margin-block-end: 0em !important;
    font-size: 14px;
}

.cm-msg-img {
    background: white !important;
    color: #666 !important;
    max-width: 75% !important;
    float: left !important;
    margin-left: 10px !important;
    position: relative !important;
    margin-bottom: 5px !important;
    border-radius: 30px !important;
    word-wrap: break-word !important;
}

.cm-msg-video {
    background: white !important;
    color: #666 !important;
    max-width: 75% !important;
    float: left !important;
    margin-left: 10px !important;
    position: relative !important;
    margin-bottom: 5px !important;
    border-radius: 30px !important;
    word-wrap: break-word !important;
}

.cm-msg-video > video {
    width: 250px !important;
}

.cm-msg-audio {
    background: white !important;
    color: #666 !important;
    max-width: 75% !important;
    float: left !important;
    margin-left: 10px !important;
    position: relative !important;
    margin-bottom: 5px !important;
    border-radius: 30px !important;
    word-wrap: break-word !important;
}

.cm-msg-audio > audio {
    width: 250px !important;
}

.cm-msg-sticker {
    color: #666 !important;
    max-width: 75% !important;
    float: left !important;
    margin-left: 10px !important;
    position: relative !important;
    margin-bottom: 5px !important;
    border-radius: 30px !important;
    word-wrap: break-word !important;
}

.chat-msg {
    clear: both !important;
    /* padding-bottom: 70px !important; */
}

.img-chat,.img-sticker {
    display: block;
    max-height: 100px;
    max-width: 100%;
    border-radius: 10px !important;
}

.chat-msg.self>.cm-msg-text {
    float: right !important;
    background: #5A5EB9 !important;
    color: white !important;
}

.chat-msg.self>.cm-msg-text a {
    color: white !important;
    text-decoration: none !important;
}

.chat-msg.self>.cm-msg-img,.chat-msg.self>.cm-msg-video,.chat-msg.self>.cm-msg-audio,.chat-msg.self>.cm-msg-sticker {
    float: right !important;
    margin-right: 10px !important;
}

.cm-msg-button>ul>li {
    list-style: none !important;
    float: left !important;
    width: 50% !important;
}

.cm-msg-button {
    clear: both !important;
    margin-bottom: 70px !important;
}

.nextchat_title {
    text-align: center !important;
    color: #0054aa !important;
    font-size: 26px !important;
    margin-top: 0px !important;
    margin-bottom: 10px !important;
    font-weight: bold !important;
}

.nextchat_row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    /* Two columns with equal width */
    grid-auto-rows: auto !important;
    /* Automatically adjust row height */
    gap: 10px !important;
    /* Gap between grid items */
}

.nextchat_column {
    border-radius: 5px !important;
    margin: 5px !important;
    padding: 15px !important;
    text-align: center !important;
}

.nextchat_column.red {
    color: #fff;
    text-decoration: none;
    background: #0054aa !important;
    min-height: 100px !important;
    cursor: pointer !important;
}

#queue {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    height: 300px !important;
    text-align: center;
}

/* สไตล์ของ DIV ดาว */
.rating-container {
    display: inline-block;
    font-size: 0;
    /* ลบช่องว่างระหว่าง inline-block elements */
}

/* สไตล์ของดาว */
.star {
    font-size: 24px;
    /* ขนาดของดาว */
    color: #ccc;
    /* สีของดาวไม่ทำการเลือก */
    cursor: pointer;
    /* เปลี่ยนรูป cursor เมื่อชี้ไปที่ดาว */
    transition: color 0.2s;
    /* เพื่อทำให้การเปลี่ยนสีดาวมีการเปลี่ยนแปลงเรื่อง smooth */
}

/* สไตล์ของดาวที่ถูกเลือก */
.star.checked {
    color: #ffcc00;
    /* สีของดาวเมื่อถูกเลือก */
}

/* สไตล์ของแสดงคะแนน */
.rating-value {
    font-size: 20px;
    margin-top: 10px;
}

/* Styles for loading */
.loading {
    width: 50px;
    /* Adjust width as needed */
    height: 50px;
    /* Adjust height as needed */
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-left-color: #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Keyframes for spinning animation */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}