.ui-tabs .ui-tabs-nav {
    border-bottom: 4px solid #3D5294;
    margin-bottom: 10px;
}
.ui-tabs .ui-tabs-nav li {
    float: left;
    margin-right: 10px;
    list-style: none;
}
.ui-tabs .ui-tabs-nav li a {
    padding: 10px 20px;
    text-decoration: none;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
    background: linear-gradient(to bottom, #5D71B3, #3D5294);
    border-bottom: 2px solid #3D5294;
}
.ui-tabs .ui-tabs-panel {
    background: none;
    border: none;
    padding: 5px 10px;
}
#tabs {
    padding-bottom: 20px;
    margin-bottom: 20px;
}
.deeka_box {
    border-top: 1px solid #999;
    border-left: 1px solid #999;
    border-right: 1px solid #999;
    border-bottom: 3px dashed #999;
    margin-bottom: 20px;
}
.deeka_box h4 {
    text-align: center;
}
.deeka_box .title {
    color: #ff0000;
    font-size: 16px;
    font-weight: bold;
}
.deeka_box .desc {
    color: #000000;
    font-size: 16px;
}
.deeka_box .msg_error {
    width: 100%;
    color: #ff0000;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    padding: 10px 0;
}
.page_links {
    display: inline-block;
    clear: both;
    width: 100%
}
.pagination {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}
.pagination a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
    margin: 4px;
    border: 1px solid #ddd;
}
.pagination a:hover:not(.active) {
    background-color: #ddd;
}
.pagination .active {
    background-color: #007bff;
    color: white;
    border: 1px solid #007bff;
    border-radius: 4px;
}
.toggleButton {
    cursor: pointer;
    color: blue;
    text-decoration: underline;
}
.hilight {
    text-decoration: underline;
}
.comboShort {
    background-image: url(../images/form_bg.jpg);
    background-repeat: repeat-x;
    border: 1px solid #d1c7ac;
    color: #333333;
    padding: 4px;
    margin-right: 2px;
    margin-bottom: 2px;
    font-family: tahoma, arial, sans-serif;
    height: 27px;
}
.comboSearch {
    height: 28px;
    border: 1px solid #CCCCCC;
}
.iform {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.iform h4 {
    padding-left: 20px;
    margin-bottom: 0;
}
.iform .row {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    gap: 4px;
    margin-bottom: 5px;
}
.iform .row-hr {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    gap: 2px;
    margin-bottom: 5px;
}
.iform .col {
    vertical-align: middle;
}
.iform .col-right {
    text-align: right;
    vertical-align: middle;
}
.iform .col-title {
    padding-top: 3px;
    text-align: right;
    vertical-align: middle;
}
.iform .col-text {
    padding-top: 3px;
    padding-left: 5px;
}
.popup-form .col-title {
    padding-top: 8px;
    text-align: right;
    vertical-align: middle;
}
.popup-form .col-mid {
    padding-top: 8px;
    vertical-align: middle;
}
.iform .col-1 { grid-column: span 1; }
.iform .col-2 { grid-column: span 2; }
.iform .col-3 { grid-column: span 3; }
.iform .col-4 { grid-column: span 4; }
.iform .col-5 { grid-column: span 5; }
.iform .col-6 { grid-column: span 6; }
.iform .col-7 { grid-column: span 7; }
.iform .col-8 { grid-column: span 8; }
.iform .col-9 { grid-column: span 9; }
.iform .col-10 { grid-column: span 10; }
.iform .col-11 { grid-column: span 11; }
.iform .col-12 { grid-column: span 12; }
.iform .col-13 { grid-column: span 13; }
.iform .col-14 { grid-column: span 14; }
.iform .col-15 { grid-column: span 15; }
.iform .col-16 { grid-column: span 16; }
.iform .col-17 { grid-column: span 17; }
.iform .col-18 { grid-column: span 18; }
.iform .col-19 { grid-column: span 19; }
.iform .col-20 { grid-column: span 20; }
.iform .col-21 { grid-column: span 21; }
.iform .col-22 { grid-column: span 22; }
.iform .col-23 { grid-column: span 23; }
.iform .col-24 { grid-column: span 24; }
.iform .btndel {
    border: 0;
    color: #e5a100;
    font-size: 15px;
    background-color: white;
    cursor: pointer;
}
.iform .check_box {
    cursor: pointer;
    width: 18px;
    height: 18px;
    vertical-align: middle;
}
.iform .check_label {
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    user-select: none;
}

.iform .dropdown-container {
    position: relative;
}

.iform .dropdown {
    position: relative;
    display: flex;
    align-items: center;
}

.iform .dropdown-select {
    width: 100%;
    padding: 5px;
    padding-left: 23px; /* Space for the icon */
    background-image: url(../images/form_bg.jpg);
    border: 1px solid #CCCCCC;
}

.iform .search-icon {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 1; /* Ensure the icon is above the select */
}

.iform .search-popup {
    display: none;
    position: absolute;
    top: 100%; /* Position directly below the dropdown */
    left: 0; /* Align with the left edge of the dropdown-container */
    margin-top: 5px; /* Space between the dropdown and the popup */
    border: 1px solid #ccc;
    background: white;
    padding: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    z-index: 1001;
    width: calc(100% - 10px); /* Width matches the dropdown */
    min-width: 180px;
}

.iform .save-popup {
    left: -700px !important;
    width: 710px !important;
}

.iform .popup-content {
    display: flex;
    flex-direction: column;
}

.iform .search-input {
    margin-bottom: 10px;
}

.iform .popup-buttons {
    display: flex;
    justify-content: flex-end;
}

.iform .search-ok,.iform .search-close {
    margin-left: 10px;
    min-width: 65px;
    cursor: pointer;
}

.iform .bookq_box .bookq_label {
    float: left;
    margin-right: 5px;
    padding-top: 5px;
    width: 53px;
}
.iform .bookq_box .bookq_label2 {
    float: left;
    margin-right: 5px;
    padding-top: 5px;
    width: 178px;
    text-align: right;
}
.iform .bookq_box .bookq_label3 {
    float: left;
    margin-right: 5px;
    padding-top: 5px;
    width: 178px;
    text-align: right;
}
.iform .bookq_box .bookq_edit {
    float: left;
    padding-top: 5px;
    width: 30px;
}

.iform .bookq_box .bookq_text {
    float: left;
    margin-right: 14px;
    width: 60px;
}

.iform .bookq_box .bookq_icon {
    float: left;
    width: 50px;
    height: 22px;
}

.iform .bookq_box .bookq_icon input {
    height: 28px;
}

.iform .bookq_box .dropdown {
    float: left;
    width: 50px;
    height: 22px;
}

.iform .bookq_box .bookq_text input {
    width: 60px;
    height: 22px;
}

.iform .bookq_box .bookq_long {
    float: left;
    margin-right: 10px;
    width: 568px;
}

.iform .bookq_box .bookq_long input {
    width: 100%;
    height: 22px;
}

.iform .bookq_box .bookq_down {
    float: left;
    margin-right: 10px;
    width: 450px;
}

.iform .bookq_box .bookq_down select {    
    width: 100%;
    height: 28px;
}
.iform .bookq_box .bookq_down input {    
    width: 100%;
    height: 22px;
}
.iform .saved-title {
    color: #ffb302;
}

.iform .save-container {
    position: relative;
}

.iform .save {
    position: relative;
    display: flex;
    align-items: center;
}

.iform .save-select {
    width: 100%;
    padding: 5px;
    padding-left: 23px; /* Space for the icon */
    background-image: url(../images/form_bg.jpg);
    border: 1px solid #CCCCCC;
}

.iform .save-container .search-icon {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 1; /* Ensure the icon is above the select */
}

.iform .save-container .save-popup {
    display: none;
    position: absolute;
    top: 100%; /* Position directly below the dropdown */
    left: -250px;
    margin-top: 5px; /* Space between the dropdown and the popup */
    border: 1px solid #ccc;
    background: white;
    padding: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    z-index: 99;
    width: calc(100% - 10px); /* Width matches the dropdown */
    width: 340px;
}

.iform .save-container .popup-content {
    display: flex;
    flex-direction: column;
}

.iform .save-container .search-input {
    margin-bottom: 10px;
}

.iform .save-container .popup-buttons {
    display: flex;
    justify-content: flex-end;
    padding-right: 50px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.iform .save-ok,.iform .save-close {
    margin-left: 10px;
    min-width: 65px;
    cursor: pointer;
}

.iform textarea.grow {
    background-image: url(../images/form_bg.jpg);
    padding: 5px 4px 3px 4px;
    border: 1px solid #CCCCCC;
    width: 100%; /* Set width as needed */
    min-height: 18px; /* Approx. 1 line */
    height: 18px;
    overflow: hidden;
    resize: none; /* Disable manual resizing */
}

.iform textarea.grow:focus {
    border-color: #5b9dd9;
    box-shadow: 0 0 3px rgba(91, 157, 217, 0.8);
}

.bookq_box {
    width: 100%
}


/* Overlay styling */
#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Content within the overlay */
#loading-content {
    text-align: center;
    color: white;
}

.svg-icon {
    width: 64px; /* Set size to 64px */
    height: 64px; /* Set size to 64px */
}

#loading-content p {
    margin-top: 20px;
    font-size: 18px;
    font-weight: bold;
}

#countup {
    font-size: 20px; /* Larger font size for countup */
}

.table {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    width: 100%;
    margin: 20px auto;
    border: 1px solid #ddd;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.row {
    display: contents;
}

.header {
    background-color: #f2f2f2;
    font-weight: bold;
}

.cell {
    padding: 10px;
    border-right: 1px solid #ddd;
    text-align: left;
}

.cell:last-child {
    border-right: none; /* Remove border for the last cell */
}

.cell.span-2 {
    grid-column: span 2;
}

.cell.span-3 {
    grid-column: span 3;
}

.cell.span-4 {
    grid-column: span 4;
}

.cell.span-5 {
    grid-column: span 5;
}

.cell.span-6 {
    grid-column: span 6;
}

.cell.span-7 {
    grid-column: span 7;
}

.cell.span-8 {
    grid-column: span 8;
}

.cell.span-9 {
    grid-column: span 9;
}

.cell.span-10 {
    grid-column: span 10;
}

.row:hover .cell {
    background-color: #f1f1f1;
}

.row:nth-child(even) .cell {
    background-color: #f9f9f9;
}
.cell.align-left {
    text-align: left;
}

.cell.align-center {
    text-align: center;
}

.cell.align-right {
    text-align: right;
}

.three-columns {
    column-count: 2;
    column-gap: 20px;
    list-style-type: none;
    padding: 0;
}

.iform .popup-container {
    position: relative;
}
.iform .dialog-popup {
    display: none;
    position: absolute;
    top: 100%; /* Position directly below the dropdown */
    left: 0; /* Align with the left edge of the dropdown-container */
    margin-top: 5px; /* Space between the dropdown and the popup */
    border: 1px solid #ccc;
    background: white;
    padding: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    z-index: 1001;
    width: calc(100% - 10px); /* Width matches the dropdown */
    min-width: 760px;
}
.iform .popup-ok,.iform .popup-close {
    margin-left: 10px;
    min-width: 65px;
    cursor: pointer;
}
.iform .popup-form {
    display: flex;
    flex-direction: column;
}

.iform .popup-sm {
    min-width: 460px;
}

.tbl-cont {
    width: 100%;
    max-height: 300px; /* Adjust height as needed */
    overflow: auto;
    border: 1px solid #ccc; /* Border around the entire table, including right side */
    box-sizing: border-box;
    position: relative;
    margin-bottom: 10px;
}

.tbl-cont .rw, .tbl-cont .hd  {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    border-bottom: 1px solid #ccc; /* Thin border for row lines */
}

.tbl-cont .cl {
    padding: 8px;
    box-sizing: border-box;
    border-right: 1px solid #ccc; /* Thin border for column lines */
    overflow: hidden;
    cursor: pointer;
    position: relative; /* Ensure the ellipsis shows properly */
}

.tbl-cont .hd .cl {
    text-align: center;
    font-weight: bold;
    background-color: gray;
    color: white;
}

.tbl-cont .rw .cl {
    text-align: left;
    background-color: white;
}

.tbl-cont .rw .cn {
    text-align: center;
}

.tbl-cont .rw:nth-child(even) .cl {
    background-color: #f2f2f2; /* Light gray color for every second row */
}

.tbl-cont .text-truncate {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    max-height: 4em; /* Adjusted for better Thai text support */
    line-height: 1.8em; /* Increased line-height to accommodate Thai text */
}

.tbl-cont .expanded {
    -webkit-line-clamp: unset;
    max-height: none; /* Remove the max-height to allow full expansion */
    line-height: 1.8em;
}

/* Remove the right border on the last column to avoid double border */
.tbl-cont .cl:last-child {
    border-right: none;
}

/* Remove the bottom border on the last row to avoid double border */
.tbl-cont .rw:last-child {
    border-bottom: none;
}

/* Dynamic column span classes */
.tbl-cont .span-1 { grid-column: span 1; }
.tbl-cont .span-2 { grid-column: span 2; }
.tbl-cont .span-3 { grid-column: span 3; }
.tbl-cont .span-4 { grid-column: span 4; }
.tbl-cont .span-5 { grid-column: span 5; }
.tbl-cont .span-6 { grid-column: span 6; }
.tbl-cont .span-7 { grid-column: span 7; }
.tbl-cont .span-8 { grid-column: span 8; }
.tbl-cont .span-9 { grid-column: span 9; }
.tbl-cont .span-10 { grid-column: span 10; }
.tbl-cont .span-11 { grid-column: span 11; }
.tbl-cont .span-12 { grid-column: span 12; }

.popup-form .col {
    padding-top: 3px;
}

.popup-form .cn {
    padding-top: 6px;
    text-align: center;
}

body.no-scroll {
    overflow: hidden;
}

#filter_laws_lists ul {
    column-count: 2;
    column-width: 250px;
    column-gap: 20px;
    list-style-type: none;
    padding: 0;
}

#filter_laws_lists li {
    break-inside: avoid;
}

#filter_words_lists ul {
    column-count: 2;
    column-gap: 20px;
    list-style-type: none;
    padding: 0;
}

#filter_words_lists li {
    break-inside: avoid;
}