@import url("https://fonts.googleapis.com/css2?family=Sarabun:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@100..900&display=swap');
* {
    /* font-family: "Sarabun", sans-serif; */
    font-family: "Noto Sans Thai", sans-serif;
}

body {
    /* height: 100vh; */
    height: calc(100vh - 80px);
}

.content {
    margin-top: 80px;
    padding-bottom: 87px;
}

tbody,
td,
tfoot,
th,
thead,
tr {
    vertical-align: middle;
    line-height: 1.5;
}

nav {
    /* background: linear-gradient(270deg, #F8B500 0%, #FFE249 100%); */
    /* box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.25); */
}
nav #head_main {
    background: #ffc908;
    height: 80px;
}

.text-primary {
    color: #0084FF !important;
}

.text-black {
    color: #333 !important;
}

.text-danger {
    color: #d51c29 !important;
}

.text-success {
    color: #1eb588 !important;
}

.text-info {
    color: #4a78da !important;
}

.border-warning {
    border-color: #ffc908 !important;
}

.row > * {
    padding-right: 0.5em;
    padding-left: 0.5em;
}

.btn-yellow {
    --bs-btn-color: #000;
    --bs-btn-bg: #ffc908;
    --bs-btn-border-color: #ffc908;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #ffca2c;
    --bs-btn-hover-border-color: #ffc720;
    --bs-btn-focus-shadow-rgb: 217, 164, 6;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #ffcd39;
    --bs-btn-active-border-color: #ffc720;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: #ffc908;
    --bs-btn-disabled-border-color: #ffc908;
}

.btn-secondary {
    --bs-btn-color: #000;
    --bs-btn-bg: #d9d9d9;
    --bs-btn-border-color: #d9d9d9;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #b4b4b4;
    --bs-btn-hover-border-color: #b4b4b4;
    --bs-btn-focus-shadow-rgb: 130, 138, 145;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #b4b4b4;
    --bs-btn-active-border-color: #b4b4b4;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: #d9d9d9;
    --bs-btn-disabled-border-color: #d9d9d9;
}

.btn_action {
    padding: 0.5px 10px;
    min-width: 80px;
    font-size: 17px;
    color: #fff;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    transition: all 0.2s;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
}
.btn_action:hover {
    opacity: 0.8;
    color: #fff;
}

.badge {
    border-radius: 54px;
    font-size: 11px;
    padding: 6px 10px 6px 20px;
    font-weight: 400;
    position: relative;
}

.circle-badge {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    left: 6px;
}

.badge.blue {
    /* background: #C5D8FF; */
    background: unset;
    color: #4a78da;
}

.badge.blue > i.circle-badge {
    background: #4a78da;
}

.badge.orange {
    /* background: #FFD099; */
    background: unset;
    color: #f88600;
}

.badge.orange > i.circle-badge {
    background: #f88600;
}

.badge.grey {
    /* background: #D9D9D9; */
    background: unset;
    color: #000000;
}

.badge.grey > i.circle-badge {
    background: #000000;
}

.badge.yellow {
    /* background: #FFF1A9; */
    background: unset;
    color: #d4a600;
}

.badge.yellow > i.circle-badge {
    background: #d4a600;
}

.badge.purple {
    /* background: #EEE0FF; */
    background: unset;
    color: #674ada;
}

.badge.purple > i.circle-badge {
    background: #674ada;
}

.badge.green {
    /* background: #E9FFEF; */
    background: unset;
    color: #409261;
}

.badge.green > i.circle-badge {
    background: #409261;
}

.table {
    border: solid 1px #e4e4e4;
    margin-top: 0;
    margin-bottom: 0;
    border: 0;
}

.table > tbody > tr {
    border-bottom: solid 1px #e4e4e4;
}

.table > tbody > tr:last-child,
.table > tbody > tr:last-child td {
    border-bottom: none;
}

.table > thead > tr > th {
    padding: 17px 12px;
    color: #534d59;
    font-size: 14px;
}
.table > :not(caption) > * > * {
    padding: 10px 12px;
}
.table > tbody > tr > td,
.table > tbody > tr > th {
    color: #1b2128;
    font-size: 14px;
    border: 0;
}

table.dataTable tbody th,
table.dataTable tbody td {
    border-bottom: solid 1px #e4e4e4;
}

.table-rounded {
    border: solid 1px #e4e4e4;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

.table-bordered td,
.table-bordered th {
    border: solid 1px #e4e4e4 !important;
}

tbody,
td,
tfoot,
th,
thead,
tr {
    border-color: #e4e4e4;
}

table.dataTable > thead > tr > th,
table.dataTable > thead > tr > td,
table.dataTable.no-footer {
    border-bottom: 1px solid #e4e4e4 !important;
}

table.dataTable > thead > tr > th,
table.dataTable > thead > tr > td {
    padding: 1rem 0.5rem !important;
}

.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length {
    margin-bottom: 15px;
}

.dataTables_wrapper .dataTables_info {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.dataTables_wrapper .dataTables_paginate {
    padding: 10px 0 !important;
}

form {
    margin-bottom: 0;
}

input[readonly] {
    border: 1px solid #d9d9d9;
    background: #f5f5f5;
    pointer-events: none;
}

.btn_numpad {
    border: 1px solid #d9d9d9;
    background: #f0efef;
    border-radius: 0 !important;
    font-size: 25px;
    padding: 15px;
}

.btn_numpad:hover {
    color: #f5f5f5 !important;
}

.menu_button {
    display: block;
    text-decoration: none !important;
    border: 2px solid #ffc908;
    background: #fff;
    text-align: center;
    margin: 10px 0;
    color: black;
    font-weight: 700;
    position: relative;
    margin-top: 15px;
    border-radius: 24px;
    -webkit-border-radius: 24px;
    -moz-border-radius: 24px;
    -ms-border-radius: 24px;
    -o-border-radius: 24px;
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
}

.custom-hover {
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
}

.menu_button:hover,
.custom-hover:hover {
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 10px #00000070;
    -webkit-transform: translate(-2px, -2px);
    -moz-transform: translate(-2px, -2px);
    -ms-transform: translate(-2px, -2px);
    -o-transform: translate(-2px, -2px);
}

.menu_img {
    margin-top: 2rem;
    margin-bottom: 2rem;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 2px solid #ffc908;
    object-fit: cover;
}

.menu_img img {
    max-width: 150px;
}

.text_menu {
    font-size: 30px;
    font-weight: 400;
    background: #ffc908;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    border-radius: 0 0 20px 20px;
    -webkit-border-radius: 0 0 20px 20px;
    -moz-border-radius: 0 0 20px 20px;
    -ms-border-radius: 0 0 20px 20px;
    -o-border-radius: 0 0 20px 20px;
}

.fs-14 {
    font-size: 14px;
}

.fs-16 {
    font-size: 16px;
}

.fs-18 {
    font-size: 18px !important;
}

.fs-20 {
    font-size: 20px;
}

.fs-24 {
    font-size: 24px;
}

.fs-25 {
    font-size: 25px;
}

.fs-30 {
    font-size: 30px;
}

.fs-40 {
    font-size: 40px;
}

.fs-60 {
    font-size: 60px;
}
.radius-2 {
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
}

.bg-yellow-gradient {
    background: linear-gradient(180deg, #ffe249 30.5%, #e5b300 70.6%);
}

.bg-yellow {
    background: #ffc908;
}

small {
    font-size: 18px;
}

input.form-control,
textarea.form-control,
select.form-select {
    font-size: 14px;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border: 1px solid #d9d9d9 !important;
    font-size: 14px;
    height: 35px;
}

input.form-control:focus,
textarea.form-control:focus {
    border-color: #646464;
    box-shadow: 0 0 0 0.15rem #a1a1a1;
}

select.form-select:focus {
    border-color: #646464;
    box-shadow: 0 0 0 0.15rem #a1a1a1;
}

.form-check-input {
    cursor: pointer;
    width: 18px;
    height: 18px;
}
.form-check-input:checked {
    background-color: #7839cd;
    border-color: #7839cd;
}
.form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgb(120 57 205 / 25%);
}

.head_page {
    background: #f1f1f1;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: 600;
}

.input-focus {
    border-color: #646464;
    box-shadow: 0 0 0 0.15rem #a1a1a1;
}

/* Loading CSS */

.spinner-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 9999;
}

/* .spinner-border {
    width: 70px;
    height: 70px;
} */

footer a {
    display: flex !important;
    justify-content: center;
    align-items: center;
}

footer a svg {
    margin-right: 5px;
}

/* Customize the scrollbar */
.table-responsive::-webkit-scrollbar {
    height: 8px;
}

.table-responsive::-webkit-scrollbar-track {
    background-color: #f1f1f1;
}

.table-responsive::-webkit-scrollbar-thumb {
    background-color: #a3a3a3;
    border-radius: 6px;
}

.table-responsive::-webkit-scrollbar-thumb:hover {
    background-color: #adadad;
}

.custom-scrollbar {
    overflow-x: auto;
    /* cursor: grab; */
}

/* .custom-scrollbar:active {
    cursor: grabbing;
} */

.custom-scrollbar::-webkit-scrollbar {
    height: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background-color: #f1f1f1;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #a3a3a3;
    border-radius: 6px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #adadad;
}

/* Custom Select2 */
.select2-container--default .select2-selection--single {
    background-color: #fff;
    border: 1px solid #d9d9d9 !important;
    border-radius: 2px !important;
    padding: 0.375rem 2.25rem 0.375rem 0.75rem !important;
    height: 35px !important;
    -webkit-border-radius: 2px !important;
    -moz-border-radius: 2px !important;
    -ms-border-radius: 2px !important;
    -o-border-radius: 2px !important;
}

.select2-selection__arrow {
    height: 35px !important;
}

.select2-selection__arrow b {
    background-image: url(/template/frontend/assets/images/icon/iconamoon_arrow-up-2-duotone.png);
    background-color: transparent;
    background-size: contain;
    border: none !important;
    height: 22px !important;
    width: 22px !important;
    top: 8px !important;
    left: -6px !important;
}
.select2-container {
    width: -webkit-fill-available !important;
    font-size: 14px;
}
.select2-results__option {
    font-size: 14px;
}

input.select2-search__field:focus-visible {
    outline: #000 solid 1px;
}

.select2-selection__rendered {
    color: #212529 !important;
    padding-left: 0 !important;
    line-height: 1.5 !important;
}

.select2-results__options::-webkit-scrollbar {
    width: 8px;
}

/* Customizing the scrollbar thumb */
.select2-results__options::-webkit-scrollbar-thumb {
    background-color: #a3a3a3;
    border-radius: 6px;
}

.select2-results__options::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.select2-results__options::-webkit-scrollbar-thumb:hover {
    background-color: #adadad;
}

.select2-container--open .select2-dropdown--below {
    border-top: 1px solid #aaa !important;
}

.select2-search--dropdown {
    padding: 8px 8px 0 8px;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: #ffc908 !important;
    color: #000 !important;
}

.select2-container--default .select2-results__option--selected {
    font-weight: 600;
}

.shadow-custom-1 {
    box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px,
        rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
}

.rounded-circle.bg-success {
    background-color: #1EB588 !important;
}
/* DatePicker CSS Custom */
.date-picker {
    cursor: pointer;
}