:root {
    --consid-color: #ffc107;
    --process-color: #dc3545;
    --done-color: #28a745;
    --default-color: #17a2b8;
}

@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@100;300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kanit&family=Sarabun:wght@100;300&display=swap');

body {
    font-family: 'Sarabun', 'Arial', sans-serif;
}

.ew-grid .ew-list-other-options,
.ew-grid .ew-list-other-options .btn-group,
.ew-grid .ew-add,
.ew-grid .ew-list-option-separator {}

.ew-grid .ew-add,
.ew-add-edit-option>.ew-btn-group>.btn.ew-add {
    background-color: var(--primary-color);
    color: #fff;
    border-radius: 10px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ew-grid .ew-list-option-separator {
    padding-right: 0;
}

.text-muted,
.ew-grid .ew-detail-option {
    display: none;
}

.ew-search-operator,
.ew-search-operator2 {
    display: none;
}

/* .d-flex {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
}

.p-1 {
    display: flex;
    flex: 50%;
    width: 50%;
    margin-bottom: 10px;
    overflow: hidden;
} */

.img-thumbnail {
    padding: 0;
    border-radius: 0;
}

th[data-name="checkbox"] {
    width: 20px;
}


/* .btn-consid.disabled, */

.btn-consid,
.btn-consid:hover {
    background-color: var(--consid-color);
    color: #fff;
}

.stat-badge {
    padding: 5px;
    display: block;
    width: 30px;
    height: 10px;
    border-radius: 20px;
    margin: auto;
    background-color: var(--default-color);
}

.stat-badge.consid {
    background-color: var(--consid-color);
}

.stat-badge.process {
    background-color: var(--process-color);
}

.stat-badge.done {
    background-color: var(--done-color);
}

.btn-process,
.btn-process:hover {
    background-color: var(--process-color);
    color: #fff;
}

.btn-done,
.btn-done:hover {
    background-color: var(--done-color);
    color: #fff;
}

@media print {
    button {
        display: none !important;
    }
}


/* datepicker */

div[class^='cal'] {
    max-width: 300px;
    min-width: 303px;
    position: absolute;
    z-index: 10;
    background-color: #fff;
    border: solid 1px #4f4f4f;
    border-radius: 5px;
    padding: 5px;
    top: 100%;
}

.row-alert {
    background-color: #17a2b8 !important;
    color: white !important;
}

h1,
h2,
h3,
h4,
.card-title {
    font-family: 'Sarabun', sans-serif;
}


/* .ew-master-div {
    display: none;
} */

.btn-toolbar {
    justify-content: flex-end;
}

.ew-search-field input[id="x_create_year"] {
    font-weight: bold;
    border-color: var(--primary-color);
}

.ew-search-panel {
    width: 100%;
}

.ew-extended-search {
    display: flex;
    border: solid 1px #ccc;
    border-radius: 3px;
    align-items: center;
    padding: 10px;
    margin: auto;
    justify-content: center;
    flex-wrap: wrap;
    align-items: flex-start;
}

.ew-extended-search .ew-row {
    margin-bottom: 0;
}

.ew-add-form input[dischange="true"],
.ew-add-form select[dischange="true"] {
    font-weight: bold;

    pointer-events: none;
    background-color: #ccc;
}

.req-status-group-btn {
    display: flex;
    justify-content: space-around;
}

.req-status-group-btn a {
    font-size: 10px;
    white-space: nowrap;
    margin: 3px;
}

.ew-grid .ew-table>thead>tr>th {
    white-space: nowrap;
    text-align: center;
}

.ew-grid .ew-table>tbody>tr>td,
.ew-grid .ew-table>tfoot>tr>td {
    text-align: center;
    white-space: normal;
}

.ew-grid,
.ew-form:not(.ew-list-form):not(.ew-pager-form),
table.ew-master-table.ew-vertical {
    width: 100%;
}

.report-content {
    position: relative;
    width: 100%;
    padding-bottom: 10px;
}

.remind_job_card {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.remind_job_card .card {
    flex: 0.22;
    align-items: center;
}

.remind_job_card .card-body {
    padding: 0.5em;
    text-align: center;
    font-size: 22px;
    font-weight: bold;
}

.remind_job_card .card-value {
    font-size: 22px;
    text-align: center;
}

.remind_job_card .card-title {
    font-size: 15px;
}

.os-theme-light>.os-scrollbar>.os-scrollbar-track {
    background-color: var(--primary-color);
}

.content-header h1 {
    font-size: 1.8rem;
    font-family: 'Sarabun', sans-serif;
}

canvas[id^='chart_'] {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: auto 1200 / 500;
    margin: auto;
}

.ew-dashboard .col-sm-2,
.ew-dashboard .col-sm-4 {
    min-width: 100% !important;
    width: 100%;
}

.nav-link {
    white-space: nowrap;
}

.ew-search-div .col-sm-10>div {
    display: flex;
}

.form-inline .form-group {
    margin-bottom: 10px;
}

td[data-field="donator_name"],
td[data-field="object_id"] {
    min-width: 200px;
    max-width: 200px;
}

td[data-field="moo"],
td[data-field="request_status"] {
    min-width: 120px;
    max-width: 120px;
}


/* .ew-table-header,
td[class^='ew-rpt-grp'] span {
    white-space: nowrap;
} */

.ew-grid .ew-table,
.ew-grid .ew-grid-middle-panel {
    max-width: 96vw;
    overflow-x: scroll !important;
}



.ew-view-form table td .d-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    /* ช่องว่างระหว่างรูป */
}

.ew-view-form table td .d-flex .p-1 {
    flex: 1 1 calc(33.333% - 10px);
    /* คำนวณความกว้างของรูปแต่ละรูป */
    max-width: calc(33.333% - 10px);
    /* คำนวณความกว้างสูงสุดของรูปแต่ละรูป */
    max-height: 250px;
    box-sizing: border-box;
    overflow: hidden;
}

.ew-view-form table td .d-flex .p-1 img {
    width: 100%;
    padding: 0 !important;
    min-height: 250px;
}

/* ปุ่ม Back */
.back-button {
    position: fixed;
    /* ทำให้ปุ่มติดอยู่กับตำแหน่งที่กำหนด */
    top: 10px;
    /* ระยะห่างจากด้านบน */
    left: 10px;
    /* ระยะห่างจากด้านซ้าย */
    padding: 10px 20px;
    /* เพิ่ม padding ให้ปุ่ม */
    background-color: var(--primary-color);
    /* สีพื้นหลังของปุ่ม */
    color: white;
    /* สีตัวอักษรของปุ่ม */
    border: solid 1px white;
    /* ไม่มีขอบ */
    border-radius: 5px;
    /* ขอบโค้งมน */
    cursor: pointer;
    /* เปลี่ยนเคอร์เซอร์เมื่อ hover */
    z-index: 10000;
    /* ทำให้ปุ่มอยู่ด้านบนสุด */
    opacity: 0.8;
}

.back-button:hover {
    background-color: var(--primary-color);
    /* เปลี่ยนสีพื้นหลังเมื่อ hover */
    opacity: 1;
}

.info-box.bg-violet,
.small-box.bg-violet,
.badge.bg-violet {
    background-color: #673ab7 !important;
    color: white;
}

.card-violet.card-outline {
    border-top: 3px solid #673ab7 !important;
}

.leaflet-container {
    border: solid 1px #666;
    border-radius: 3px;
}

.nav-sidebar .nav-header:not(:first-of-type) {
    padding: 1rem 1rem .5rem;
    border-bottom: solid 1px #292929;
    color: white;
    font-weight: bold;
}

.nav-sidebar li[name='mci_'] {
    padding: 0 1rem .5rem !important;
}

/* styles.css */

.rating {
    display: inline-block;
    font-size: 0;
}

.stars {
    position: relative;
    display: inline-block;
    font-size: 25px;
    /* ขนาดของดาว */
    color: #ccc;
    /* สีของดาวที่ไม่เต็ม */
}

.stars::before {
    content: '★★★★★';
    /* ดาวเต็ม */
    position: absolute;
    top: 0;
    left: 0;
    color: var(--secondary-color);
    /* สีของดาวที่เต็ม */
    overflow: hidden;
    white-space: nowrap;
    width: 0;
}

.stars[data-rating="1"]::before {
    width: 20%;
}

.stars[data-rating="1.25"]::before {
    width: 25%;
}

.stars[data-rating="1.5"]::before {
    width: 30%;
}

.stars[data-rating="1.75"]::before {
    width: 35%;
}

.stars[data-rating="2"]::before {
    width: 40%;
}

.stars[data-rating="2.25"]::before {
    width: 45%;
}

.stars[data-rating="2.5"]::before {
    width: 50%;
}

.stars[data-rating="2.75"]::before {
    width: 55%;
}

.stars[data-rating="3"]::before {
    width: 60%;
}

.stars[data-rating="3.25"]::before {
    width: 65%;
}

.stars[data-rating="3.5"]::before {
    width: 70%;
}

.stars[data-rating="3.75"]::before {
    width: 75%;
}

.stars[data-rating="4"]::before {
    width: 80%;
}

.stars[data-rating="4.25"]::before {
    width: 85%;
}

.stars[data-rating="4.5"]::before {
    width: 90%;
}

.stars[data-rating="4.75"]::before {
    width: 95%;
}

.stars[data-rating="5"]::before {
    width: 100%;
}

/* รูปแบบดาวที่ไม่เต็ม */
.stars::after {
    content: '★★★★★';
    /* ดาวเต็ม */
    color: #ccc;
    /* สีของดาวที่ไม่เต็ม */
}

.content-wrapper,
.wrapper {
    background-color: #fbfbfb;
}

.main-footer {
    background-color: #e8e8e8
}

#ew-dashboard .row>div {
    min-width: 100% !important;
    min-height: auto !important;
}

.img-notfound {
    max-height: 60px;
    border: solid 1px #bbb;
}

/* table th,
table td {
    vertical-align: middle !important;
} */

.member-profile {
    margin-right: 15px;
    height: auto;
    width: 130px !important;

}

.widget-user-2 .widget-user-header {
    border: solid 1px #bbb;
}

/* .category .d-flex{
   
    align-items: center;
    justify-content: space-evenly;
    flex-wrap: wrap;

}

.category-img{
    flex: 1 1 calc(25.333% - 10px); 
    max-width: calc(25.333% - 10px); 
    margin: 20px;
}


@media (max-width: 768px) {
    .category-img {
        flex: 1 1 75%;
        max-width: 75%;
        margin: 10px 0;
    }
} */

.member-profile-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.member-prile-item {
    width: 500px;
}

/* SW-OSS frontend */
#sw-oss-user-bar {
    display: flex;
    color: white;
    border: solid 1px;
    border-radius: 5px;
    width: 50%;
    align-items: center;
    justify-content: center;
    margin-left: 5%;
}





.swoss-page-container .profile-picture {
    max-width: 250px;
    border-radius: 0;
    margin-right: 15px;
}


.agent-profile-picture {
    max-width: 100px;
    border-radius: 50px;
    border: 2px solid #fff;
}

.swoss-page-container .agent-name {
    margin: 0;
    font-size: .8em;
    line-height: 1em;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
}


.swoss-page-container .name {
    margin: 0;
    font-size: 2em;
    border: solid 1px #ccc;
    border-radius: 5px;
    background-color: #eee;
    min-height: 50px;
    min-width: 300px;
    padding: 10px;
}

.swoss-page-container .title {
    margin: 5px 5px 0;
    font-size: 1em;
}

.swoss-page-container .id-card-body {
    padding: 10px 50px 50px;
    min-height: 85vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.swoss-page-container .profile-field .form-group {
    flex: 1;
    min-width: 30%;
    margin: .2rem;
}

.swoss-page-container .profile-field .form-group label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}

.swoss-page-container .profile-field .form-group input {
    min-width: 100% !important;
    max-width: 100%;
    padding: 8px;
    border: 1px solid var(--primary-color);
    border-radius: 5px;
    font-size: 0.9em;
}

.swoss-page-container .profile-field .form-group.full-width {
    flex: 1 0 99%;
    /* Flex-grow: 1, Flex-shrink: 0, Flex-basis: 100% */
}

.swoss-page-container .id-card-container {
    display: flex;
}

.swoss-page-container .profile-container {
    display: flex;
    width: 80%;
    margin: auto;

}

.swoss-page-container .profile-picture {
    flex: 0 0 30%;
}

.swoss-page-container .profile-field {
    flex: 0 0 70%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    row-gap: 10px;
}

.swoss-page-container .profile-picture img {
    width: 100%;
    border-radius: 5px;
    border: solid 2px var(--primary-color);
}

/* Same CSS as before */
.swoss-page-container .test-btn {
    width: 80%;
    margin: 20px;
    padding: 10px 20px;
    font-size: 1em;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.swoss-page-container .test-btn:hover {
    background-color: #0056b3;
}

/* Mark input boxes that gets an error on validation: */
.swoss-page-container input.invalid {
    background-color: #ffdddd;
}

/* Hide all steps by default: */
.swoss-page-container .tab {
    display: none;
}

/* Make circles that indicate the steps of the form: */
.step-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    margin: auto;
    margin-top: -30px;
    margin-bottom: 30px;
    width: 400px;
}

.step {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: #ddd;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
    position: relative;
    z-index: 1;
}

.step:not(:first-child)::after {
    content: '';
    position: absolute;
    top: 50%;
    left: -57px;
    width: 57px;
    height: 8px;
    background-color: #ddd;
    z-index: -10000000;
    transform: translateY(-50%);
}


/* Mark the active step: */
.step.active {
    opacity: 1;
    background-color: #b20c92;
    color: #fff;

}

.step.active:after {
    background-color: #b20c92;
}


/* Mark the steps that are finished and valid: */
.step.finish,
.step.finish::after {
    background-color: #b20c92;
    color: #fff;
}

.name-container {

    display: flex;
    flex-direction: column;
    justify-content: space-around;
    border-radius: 10px;

}

.name-container p {
    margin-bottom: 5px;
    font-weight: bold;
}

.agent-name-container {
    width: 80%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    row-gap: 15px;
    border-radius: 10px;
    box-sizing: border-box;

}

.agent-name-container p {
    margin-bottom: 5px;
    font-weight: bold;
}

.agent-message {
    padding: 10px;
    text-align: left;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

}

.agent-message-header {
    font-size: 1.5rem;
    line-height: 1.5rem;
    color: #fff;

}
.current-user-state-wrap{
    display: flex;
    flex: 1;
    gap:20px;
    align-items: center;
}
.current-user-state,.current-user-prestate {
    border-radius: 20px;
    padding: 5px 15px;
    display: block;
    min-width: 100px;
    text-align: center;
    color:#fff;
}

.current-user-prestate {
    background-color: #28a745;
}

.current-user-state {
    animation: blink 1s step-start infinite;
}

.blink {
    animation: blink 1s step-start infinite;
}

@keyframes blink {
    0% {
        background-color: #b20c92;
        color: #fff;

    }

    50% {
        background-color: #dddddd;
        color: #000;
    }

    100% {
        background-color: #b20c92;
        color: #fff;
    }
}

.agent-profile-wrap {
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    row-gap: 5px;
    width: 20%;
}

.step-control-btn {
    width: 100%;
    margin-top: 30px;
    display: flex;
    column-gap: 10px;
    justify-content: space-between;
}

.step-control-btn .btn-wrap {
    box-sizing: border-box;
}

.step-control-btn .btn-wrap .btn {
    font-size: 2rem;
    border-radius: 35px;
    border: solid 2px var(--primary-color);
    padding: 15px 30px;
}

.step-control-btn .btn-confirm {
    background-color: var(--primary-color);
    color: #fff;
}

.form-group.check-box {
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: space-around;
    max-width: 80%;
    margin: auto;
}

.form-check-issue {
    display: flex;
    align-items: center;
    gap: 20px;
    /* ระยะห่างระหว่าง checkbox และ label */
    justify-content: flex-start;
    border: solid 1px var(--primary-color);
    background-color: #fe94ff;
    border-radius: 10px;
    /* padding: 15px 20px; */
    /* height: 100px; */

}

.form-check-issue {
    background: linear-gradient(145deg, #e6e6e6, #ffffff);
    /* พื้นหลังแบบเฟด */
    border-radius: 12px;
    /* ขอบมน */
    box-shadow: 6px 6px 12px #aaaaaa, -6px -6px 12px #ffffff;
    /* เงาแบบ 3D */
    padding: 10px 20px;
    /* ระยะห่างภายใน */
    display: inline-block;
    /* ทำให้มีขนาดพอดีกับเนื้อหา */
    cursor: pointer;
    /* เปลี่ยน cursor เป็นรูปมือเมื่อ hover */
    transition: all 0.2s ease-in-out;
    /* เพิ่ม transition เมื่อ hover */
}

.form-check-issue:hover {
    box-shadow: inset 6px 6px 12px #aaaaaa, inset -6px -6px 12px #ffffff;
    /* เปลี่ยนเงาเมื่อ hover */
    background: linear-gradient(145deg, #f0f0f0, #e0e0e0);
    /* เปลี่ยนสีพื้นหลังเมื่อ hover */
}

.form-check-input-issue {
    display: none;
    /* ซ่อน checkbox จริง */
}

.form-check-label-issue {
    font-weight: bold;
    /* ทำให้ตัวหนังสือหนา */
    color: var(--primary-color);
    /* สีของข้อความ */
    margin-left: 10px;
    /* ระยะห่างระหว่าง checkbox กับข้อความ */
}

.form-check-input-issue:checked+.form-check-label-issue::before {
    content: "✔ ";
    /* สัญลักษณ์ที่แสดงเมื่อ checkbox ถูกเลือก */
    color: green;
    /* สีของสัญลักษณ์ */
}

.form-check-issue.invalid {
    border-color: red;
}

.form-check-input-issue {
    width: 50px;
    /* ขนาดของ checkbox */
    height: 50px;
    /* ขนาดของ checkbox */
    cursor: pointer;
    /* เปลี่ยนเคอร์เซอร์เมื่อวางเมาส์บน checkbox */
}

.form-check-input-issue.invalid {
    border-color: red;
}

.form-check-label-issue {
    cursor: pointer;
    font-size: 2rem;
    margin-bottom: 0;
}

[speech-bubble],
[speech-bubble] * {
    box-sizing: border-box
}

[speech-bubble] {
    --bbColor: #db51dc;
    --bbArrowSize: 1.5rem;
    --bbBorderRadius: 1rem;
    --bbPadding: 1rem;
    background: var(--bbColor);
    border-radius: var(--bbBorderRadius);
    padding: var(--bbPadding);
    position: relative;
}

[speech-bubble]::before {
    content: '';
    position: absolute;
    background: var(--bbColor);
}

[speech-bubble][pbottom] {
    margin-bottom: var(--bbArrowSize)
}

[speech-bubble][ptop] {
    margin-top: var(--bbArrowSize);
}

[speech-bubble][pleft] {
    margin-left: var(--bbArrowSize);
}

[speech-bubble][pright] {
    margin-right: var(--bbArrowSize);
}


/* bottom and top  */
[speech-bubble][pbottom]::before,
[speech-bubble][ptop]::before {
    --width: calc(var(--bbArrowSize) / 2 * 3);
    height: var(--bbArrowSize);
    width: var(--width);
}

/* bottom */
[speech-bubble][pbottom]::before {
    top: calc(100% - 2px);
}

[speech-bubble][pbottom][aleft]::before {
    left: 1rem;
    clip-path: polygon(25% 0, 100% 0, 0% 100%)
}

[speech-bubble][pbottom][acenter]::before {
    left: calc(50% - var(--width) / 2);
    clip-path: polygon(12.5% 0, 87.5% 0, 50% 100%)
}

[speech-bubble][pbottom][aright]::before {
    right: 1rem;
    clip-path: polygon(0 0, 75% 0, 100% 100%)
}

/* top */
[speech-bubble][ptop]::before {
    bottom: calc(100% - 2px);
}

[speech-bubble][ptop][aleft]::before {
    left: var(--bbPadding);
    clip-path: polygon(0 0, 100% 100%, 25% 100%)
}

[speech-bubble][ptop][acenter]::before {
    left: calc(50% - var(--width) / 2);
    clip-path: polygon(12.5% 100%, 50% 0, 87.5% 100%)
}

[speech-bubble][ptop][aright]::before {
    right: var(--bbPadding);
    clip-path: polygon(0 100%, 100% 0, 75% 100%)
}

/* left and right  */
[speech-bubble][pleft]::before,
[speech-bubble][pright]::before {
    --height: calc(var(--bbArrowSize) / 2 * 3);
    width: var(--bbArrowSize);
    height: var(--height);
}

/* right */
[speech-bubble][pright]::before {
    left: calc(100% - 2px);
}

[speech-bubble][pright][atop]::before {
    top: var(--bbPadding);
    clip-path: polygon(100% 0, 0 100%, 0 25%)
}

[speech-bubble][pright][acenter]::before {
    top: calc(50% - var(--height) / 2);
    clip-path: polygon(0 12.5%, 100% 50%, 0 87.5%)
}

[speech-bubble][pright][abottom]::before {
    bottom: var(--bbPadding);
    clip-path: polygon(0 0, 100% 100%, 0 75%)
}

/* left */
[speech-bubble][pleft]::before {
    right: calc(100% - 2px);
}

[speech-bubble][pleft][atop]::before {
    top: var(--bbPadding);
    clip-path: polygon(0 0, 100% 25%, 100% 100%)
}

[speech-bubble][pleft][acenter]::before {
    top: calc(50% - var(--height) / 2);
    clip-path: polygon(0 50%, 100% 12.5%, 100% 87.5%);
}

[speech-bubble][pleft][abottom]::before {
    bottom: var(--bbPadding);
    clip-path: polygon(0 100%, 100% 0, 100% 75%)
}

/* flip */
[speech-bubble][pbottom][flip]::before,
[speech-bubble][ptop][flip]::before {
    transform: scaleX(-1)
}

[speech-bubble][pleft][flip]::before,
[speech-bubble][pright][flip]::before {
    transform: scaleY(-1)
}


/* Vote */
.vote-container {
    text-align: center;
}

.vote-container .rating {
    margin: 20px 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    width: 100%; /* เปลี่ยนจาก 400px เป็น 100% */
    max-width: 300px; /* กำหนดขนาดสูงสุดเพื่อไม่ให้เกิน */
}

#vote-form {
    min-height: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    max-width: 600px;
    margin: auto;
}

.vote-container .rating button {
    outline: none;
}

.vote-container .star {
    font-size: 4rem;
    line-height: 4rem;
    color: #ddd;
    border: none;
    background: none;
    cursor: pointer;
    display: block;
    max-width: 55px;
    overflow: hidden;
}

#rating-info {
    display: block;
    border: solid 1px var(--primary-color);
    border-radius: 20px;
    padding: 15px;
    font-size: 1.5rem;
}

.vote-container .star.selected {
    color: gold;
}

.vote-container .submit-btn,
#submit-vote {

    font-size: 2rem;
    cursor: pointer;
    border-radius: 35px;
    border: solid 2px var(--primary-color);
    padding: 15px 30px;
}

.vote-container .thank-you-message {
    margin-top: 20px;
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--primary-color);
}

.vote-container .chart-area {
    display: none;
}

#swoss-loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* สีพื้นหลังที่มีความโปร่งแสง */
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    /* ให้แน่ใจว่าอยู่บนสุดของเนื้อหาทั้งหมด */
}

#loading-message {
    font-size: 1.5rem;
    /* ขนาดตัวหนังสือ (สามารถปรับได้ตามต้องการ) */
    margin-bottom: 10px;
    /* เว้นระยะห่างระหว่างข้อความกับปุ่ม */
    text-align: center;
    line-height: 3.5rem;
}

#cancel-loading {
    background-color: #dc3545;
    /* สีพื้นหลังของปุ่มยกเลิก */
    border: none;
    color: #fff;
    padding: 10px 20px;
    font-size: 1rem;
    cursor: pointer;
}

/* Form */
.swoss-container {
    max-width: 800px;
    margin: auto;
    background: white;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    font-family: 'Sarabun', sans-serif;
    min-height: 30vh;
    max-height: 60vh;
    overflow-y: auto;
    border-radius: 15px;
}





/* Basic styling for the alert */
#swoss-alert-container {
    display: flex;

}

#swoss-alert-container.alert {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #f44336;
    /* Red background for error */
    color: white;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    transition: opacity 0.5s ease;
}

/* Hidden class to hide the alert */
#swoss-alert-container.hidden {
    opacity: 0;
    pointer-events: none;
}


/* ทำให้ accordion header มีการแสดงผลแบบ sticky */
#tab_swoss_front_requests1.sticky-top {
    position: -webkit-sticky;
    /* สำหรับการรองรับ Safari */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /* ทำให้ติดกับด้านบนของหน้าจอเมื่อเลื่อน */
    z-index: 1000;
    /* ทำให้มั่นใจว่าอยู่ด้านหน้าขององค์ประกอบอื่นๆ */
    background-color: white;
    /* ตั้งค่าสีพื้นหลังเพื่อให้ไม่เกิดการทับซ้อน */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    /* เพิ่มเงาเล็กน้อยให้ดูเด่น */
}

#tab_swoss_front_requests1.collapse.show.sticky-top .card-body {
    /* สไตล์ที่คุณต้องการกำหนด */
    padding: 10px 30px;
    background-color: #f8f9fa;
    border: 1px solid #ddd;
}

#tab_swoss_front_requests1.collapse.show.sticky-top .form-group {
    margin-bottom: 10px;
}

.swoss_front_requestsadd_profile_pic img {
    max-width: 100px;
    border: solid 1px #272727;
}

.swoss_front_requestsadd_signature_pic .badge {
    font-size: 1rem;
    padding: 10px;
    margin: 5px;
    border-radius: 5px;
}

.swoss_front_requestsadd_signature_pic img {
    max-width: 200px;
    border: solid 1px #272727;
}

.saved-detail {
    display: block;
    background-color: #e3e3e3;
    color: rgb(63, 63, 63);
    padding: 10px;
    border-radius: 5px;
}

.ew-dashboard {
    display: flex;
    justify-content: space-between;
}

.ew-dashboard .row {
    flex: 1;
    padding: 10px;
    margin: 10px;
    text-align: center;
    display: flex;
    align-items: center;
    /* จัดแนวเนื้อหาให้อยู่กึ่งกลางแนวตั้ง */
    justify-content: center;
    /* จัดแนวเนื้อหาให้อยู่กึ่งกลางแนวนอน */
}

.hide-print .ewListOtherOptions {
    font-size: 1.5rem;
    position: fixed;
    align-items: center;
    justify-content: center;
    bottom: 10%;
    right: 2%;
}

.hide-print .ewAdd {
    border: solid 1px var(--primary-color);
    color: var(--primary-color);
    width: 60px;
    height: 60px !important;
    border-radius: 50px;
    padding-top: 15px !important;
}

.hide-print .ewAdd:hover {
    color: #fff;
    background-color: var(--primary-color);
}

@media print {
    .page-next {
        display: block;
        page-break-after: always;
    }

    .page-break {
        display: block;
        page-break-before: always;
    }

    .print-btn {
        display: none;
    }

    .for-print {
        display: block;
    }

    .main-footer,
    .hide-print {
        display: none;
    }
}

#swoss_front_requests_add .card:first-child .card-body,#tab_swoss_front_requests1.collapse.show.sticky-top .card-body{
    background-color: var(--primary-color);
    color:#fff;
}

.modal-backdrop{
    display: none;
}

#x_get_location{
    display: none;
}

.ew-extended-search{
    position: relative;
}
.ew-extended-search div[class^='cal']{
    top: 73%;
}
.ewjtable-command-column-header,.ewjtable-selecting-column{
    width: 15px;
}
.badge.bg-default{
    border: solid 1px #ccc;
}