/************/
/* Variable */
/************/
:root {
    --main-color: #0F72E7;
    --secondary-color: #3D6EB8;
    --lightgray-color: #9b9b9b;
    --side-menu-color: #081241;

    --thai-font-family: 'CSChatThaiUI';
    --english-font-family: 'Poppins';
}

/************/
/* Override */
/************/
html,
body {
    font-family: 'CSChatThaiUI', SansSerif !important;
}

#kt_aside {
    background-color: var(--side-menu-color);
    backdrop-filter: saturate(180%) blur(20px) !important;
}

#kt_header .header-brand {
    background-color: var(--side-menu-color);
    backdrop-filter: saturate(180%) blur(20px) !important;
}

#kt_aside_toolbar {
    border-bottom: 1px solid #2d2d43;
}

#timeHealthRecord .vue__time-picker input.display-time {
    height: 3.2em;
    border: 1px solid #e4e6ef !important;
    border-radius: 7px;
}

#timeRecordIntake .vue__time-picker input.display-time {
    height: 3.2em;
    border: 1px solid #e4e6ef !important;
    border-radius: 7px;
}

#timeRecordOutput .vue__time-picker input.display-time {
    height: 3.2em;
    border: 1px solid #e4e6ef !important;
    border-radius: 7px;
}

#timeRecordStool .vue__time-picker input.display-time {
    height: 3.2em;
    border: 1px solid #e4e6ef !important;
    border-radius: 7px;
}

.anchor a:before {
    content: "#";
    /*font-family: "Font Awesome 5 Free";*/
    /*font-weight: 300;*/
    /*content: "\f111";*/
}

.form-label {
    display: flex !important;
    align-items: center !important;
}

.form-control {
    border-width: 2px;
}

.form-control:focus,
.form-select:focus {
    border-width: 2px !important;
    border-color: #009ef7 !important;
}

input[type="text"]:disabled {
    background-color: #f5f8fa;
    border-color: #f5f8fa;
    color: #5e6278;
}

.swal2-html-container {
    margin-top: 10px !important;
}

.custom-dropdown .dropdown-toggle::after {
    content: none;
}
.custom-dropdown .dropdown-toggle {
    padding: 0.375rem 0.75rem;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    background-color: white;
}
.custom-dropdown .dropdown-toggle svg {
    vertical-align: middle;
}
.custom-dropdown .dropdown-menu {
    z-index: 1050; /* ปรับ z-index ที่นี่ */
}

.dropzone-panel {
    border: 2px dashed #e4e6ef;
    font-family: inherit;
    color: #324148;
    align-items: center;
    display: flex;
    justify-content: center;
    position: relative;
    cursor: default;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    padding: 35px 10px;
    font-size: 14px;
    line-height: 22px;
    background-color: #FFF;
    background-image: none;
    text-align: center;
    border-radius: 0.475rem;
}

.dropzone-panel:hover {
    border-color: #009ef7;
}

.dropzone-message {
    position: relative;
}

.field-date.form-control:disabled,
select.form-select:disabled {
    background-color: #f5f8fa;
    border-color: #f5f8fa;
    color: #5e6278;
}

.cursor-default-force {
    cursor: default !important;
}

.break { flex-basis: 100%; height: 0; }

/***********/
/* Utility */
/***********/
.text-justify { text-align: justify !important; }
.font-cschatthai { font-family: 'CSChatThaiUI', SansSerif !important; }
.fs-default-color { color: var(--main-color); }
.fs-secondary-color { color: var(--secondary-color); }
.fs-lightgray-color { color: var(--lightgray-color); }
.bg-fluent-transparent {
    backdrop-filter: saturate(180%) blur(20px) !important;
    background-color: rgba(255, 255, 255, .8) !important;
}
.bg-login-tranparent {
    backdrop-filter: saturate(180%) blur(15px) !important;
    background-color: rgba(255, 255, 255, .7) !important;
}

.text-main-shadow { text-shadow: 1px 1px 2px rgb(0 0 0); }
.copyright-shadow { text-shadow: 2px 1px 4px rgb(66 111 187); }
.fs-1-1 { font-size: 1.1rem !important;}
.fs-10px { font-size: 14px !important;}
.fs-12px { font-size: 12px !important;}
.fs-14px { font-size: 14px !important;}
.fs-16px { font-size: 16px !important;}
.fs-18px { font-size: 18px !important;}
.fs-20px { font-size: 20px !important;}
.box-break {
    flex-basis: 100%;
    height: 0;
}

.box-main-shadow-01 {
    box-shadow: 5px 0px 10px rgb(0 0 0/50%) !important;
}

.box-main-shadow-02 {
    box-shadow: 0 0 1px rgb(0 0 0/13%), 0 1px 3px rgb(0 0 0/20%) !important;
}

.symbol.symbol-21px .symbol-label {
    width: 21px;
    height: 21px;
}

.symbol.symbol-22px .symbol-label {
    width: 22px;
    height: 22px;
}

.symbol.symbol-23px .symbol-label {
    width: 23px;
    height: 23px;
}

.symbol.symbol-24px .symbol-label {
    width: 24px;
    height: 24px;
}

.badge-alternative-primary {
    color: #009ef7;
    background-color: #f5f8fa;
}

.form-control.form-control-login {
    border-color: #e5e9eb;
}

.form-control.form-control-login.is-invalid {
    border-color: #f1416c6e !important;
    background-image: none !important;
    background-color: #f1416c0d !important;
}

.form-floating.form-floating-address > .form-control:focus,
.form-floating.form-floating-address > .form-control:not(:placeholder-shown) {
    padding-top: 1.4rem;
    padding-bottom: 0.625rem;
    padding-left: 0.8rem;
}

.nav-line-tabs .nav-item .nav-link.active i.validation {
    color: #f1416c !important;
}

.table.table-consent tr:last-child {
    border-bottom-width: 1px !important;
    border-bottom-style: solid !important;
    border-bottom-color: #eff2f5 !important;
}

.form-check-radio-as-checkbox .form-check-input[type=radio] {
    border-radius: 0.45em !important;
}

.form-check-radio-as-checkbox .form-check-input:checked[type=radio] {
    background-size: 60% 60% !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 11' width='13' height='11' fill='none'%3e%3cpath d='M11.0426 1.02893C11.3258 0.695792 11.8254 0.655283 12.1585 0.938451C12.4917 1.22162 12.5322 1.72124 12.249 2.05437L5.51985 9.97104C5.23224 10.3094 4.72261 10.3451 4.3907 10.05L0.828197 6.88335C0.50141 6.59288 0.471975 6.09249 0.762452 5.7657C1.05293 5.43891 1.55332 5.40948 1.88011 5.69995L4.83765 8.32889L11.0426 1.02893Z' fill='%23FFFFFF'/%3e%3c/svg%3e") !important;
}

.select2-container--bootstrap5 .select2-selection--single .select2-selection__rendered {
    color: #5e6278 !important;
}

.consent-address-display {
    padding-left: 15px;
    padding-right: 15px;
    border-bottom: 1px dashed #b4b2b2;
}

.dropbtn {
    background-color: #b4b2b2;
    color: white;
    padding: 4px; /* ลดขนาด padding ลงอีก */
    font-size: 10px; /* ลดขนาด font ลง */
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 100px; /* ลดขนาดความกว้างลงอีก */
    box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2); /* คงขนาดเงาเดิม */
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 6px 8px; /* ลด padding ลงในเนื้อหา dropdown */
    text-decoration: none;
    font-size: 10px; /* ลดขนาด font */
    display: block;
}

.dropdown-content a:hover {
    background-color: #f1f1f1;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #b4b2b2;
}

.consent-address-display.none {
    padding-left: 10px;
    padding-right: 10px;
    color: transparent;
    border-bottom: 1px dashed #b4b2b2;
}

.show-picture {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

.show-record {
    border-radius: 25px;
    background: #eff2f5;
}

.form-label-font {
    font-size: 1.05rem;
    font-weight: 500;
}

.align-items-unset {
    align-items: unset !important;
}

.bg-light-dark-blue {
    background-color: #dee7f0;
}

.btn-width {
    width: 57px;
}

.btn-group-style {
    display: flex;
    background-color: aliceblue;
}

.btn.btn-app {
    color: #3f4254;
    border-color: #dee7f0;
    background-color: #dee7f0;
}

.btn.btn-app:hover:not(btn-active) {
    color: #3f4254;
    border-color: #d1d9e2;
    background-color: #d1d9e2 !important;
}

.btn.btn-question {
    color: #FFF;
    border-color: #87adbd;
    background-color: #87adbd;
}

.btn.btn-question:hover:not(btn-active) {
    color: #FFF;
    border-color: #7799a7;
    background-color: #7799a7;
}

.btn.btn-utility {
    padding: calc(0.45rem + 1px) calc(0.55rem + 1px) !important;
}

.white-space-pre {
    white-space: pre;
}

.icon-link:hover .svg-icon-primary-hover svg [fill]:not(.permanent):not(g) {
    transition: fill .3s ease;
    fill: #009ef7;
}

.dropzone.dropzone-queue .dropzone-item .dropzone-toolbar .dropzone-download {
    height: 25px;
    width: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color .2s ease, background-color .2s ease;
}

.scrolltop {
    z-index: 13000;
}

.image-input.image-input-outline .image-input-wrapper {
    box-shadow: none;
}


/*************/
/* Customize */
/*************/
.i18nClass_en {
    font-family: var(--english-font-family), var(--thai-font-family), Helvetica, sans-serif !important;
}

.i18nClass_th {
    font-family: var(--thai-font-family), sans-serif !important;
}

label.frmlabel .i18nClass_th {
    font-size: 14px !important;
}

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

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

.lead-arrow {
    display: flex;
    align-items: stretch;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    margin-left: 0.5rem;
    width: 0.8rem;
    height: 0.8rem;
}

.lead-arrow:after {
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
    background-image: url(../media/custom-arrow.svg);
}

.custom-menu-group {
    padding-left: 10px;
    padding-right: 10px;
}

.abstract-bg-02 {
    background-repeat: no-repeat;
    background-position: right top;
    background-size: 30% auto;
    cursor: pointer;
    background-image: url(../media/abstract-2.svg);
}

.modal-footer {
    padding: 0.75rem 1.25rem;
    background-color: rgba(0, 0, 0, 0.03);
}

.dataTable tbody > tr {
    vertical-align: baseline;
}

.dataTable thead > tr > th {
    padding-top: 1.30rem !important;
    padding-bottom: 1.30rem !important;
}

.vc-nav-container .vc-nav-header,
.vc-nav-container .vc-nav-items,
.vc-pane-layout {
    font-family: var(--thai-font-family), Helvetica, sans-serif !important;
}

.valign-middle {
    vertical-align: middle;
}

.nav.nav-pills.nav-pills-custom .nav-link.tab-custom.bg-active-primary.active {
    background-color: #009ef7;
}

.nav.nav-pills.nav-pills-custom .nav-link.tab-custom.bg-active-primary {
    border: 1px dashed transparent;
    color: #7e8299;
}

.nav.nav-pills.nav-pills-custom .nav-link.tab-custom.bg-active-info.active {
    /*background-color: #5014d0;*/
    background-color: #9673A6;
}

.nav.nav-pills.nav-pills-custom .nav-link.tab-custom.bg-active-info {
    border: 1px dashed transparent;
    color: #7e8299;
}

.svg-icon.svg-icon-7x svg {
    height: 7rem !important;
    width: 7rem !important;
}

.ribbon.ribbon-start .ribbon-label.ribbon-15 {
    top: 15% !important;
}

.widget-box {
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px !important;
    border: 1px solid #e0e0e07d !important;
}
.widget-box-02 {
    box-shadow: rgba(17, 17, 26, 0.05) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px; !important;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

.image-input-wrapper {
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: contain !important;
}

.select2-container--bootstrap5.select2-container--focus .form-select:not(.form-select-solid):not(.form-select-transparent),
.select2-container--bootstrap5.select2-container--open .form-select:not(.form-select-solid):not(.form-select-transparent) {
    border-color: #009ef7 !important;
}

.fc-daygrid-event, .fc-event-main {
    cursor: pointer !important;
}

/* Year Month Picker */
.datepicker-picker {
    padding: 1rem 1rem;
}

.datepicker-view .days-of-week {
    padding-bottom: 10px !important;
    padding-top: 5px !important;
}

.datepicker-grid {
    width: 16.75rem !important;
}

.datepicker-grid .datepicker-cell.next:not(.disabled) {
    color: #b5b5c3 !important;
}

.datepicker-cell:not(.disabled):hover {
    background: #f1faff !important;
    color: #009ef7 !important;
    border-radius: 0.475rem !important;
    cursor: pointer;
}

.datepicker-cell.focused:not(.selected) {
    background: #f1faff !important;
    color: #009ef7 !important;
    border-radius: 0.475rem !important;
}

.datepicker-cell.selected {
    background-color: #009ef7;
    color: #fff;
}


.file-upload-wrapper {
    border: 2px dashed #e4e6ef;
    font-family: inherit;
    color: #324148;
    align-items: center;
    display: flex;
    justify-content: center;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    padding: 55px 10px;
    font-size: 14px;
    line-height: 22px;
    background-color: #FFF;
    background-image: none;
    text-align: center;
    border-radius: 0.475rem;
}

.file-upload-wrapper:hover {
    border-color: #009ef7;
}

.file-upload-wrapper .file-upload-message {
    position: relative;
}

.btn.btn-shortcut {
    color: #fff;
    border-color: #009ef7;
    background-color: #009ef7;
}

.btn-shortcut:hover {
    color: #fff;
    border-color: #0095e8;
    background-color: #0095e8;
}

.menu-shortcut:hover {
    background-color: rgba(63, 66, 84, .35) !important;
}

.menu-shortcut:hover div span.btn-label {
    transition: color .2s ease, background-color .2s ease;
    background-color: transparent;
    color: #fff;
}

.menu-shortcut.active {
    background-color: rgb(0 158 247) !important;
    color: #FFF !important;
}

.menu-shortcut:hover .lead-arrow .svg-icon svg,
.menu-shortcut.active .lead-arrow .svg-icon svg {
    fill: white;
}

.invalid-form-message {
    width: 100%;
    margin-top: 0.5rem;
    font-size: .925rem;
    color: #f1416c;
    display: block;
    font-weight: 400;
}

.login-error-message {
    background-color: #fff5f8;
    color: rgba(var(--bs-danger-rgb), var(--bs-text-opacity));
}

.login-error-message:first-child {
    padding-top: .75rem;
}

.login-error-message:last-child {
    padding-bottom: .75rem;
}

/* Cookie Block */
.cookie-block {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    margin: 0 !important;
    z-index: 12000;
    /*opacity: 0;*/
    /*visibility: hidden;*/
    /*border-radius: 0;*/
    transform: translateY(100%);
    transition: all .5s ease-out;
    /*color: #ecf0f1;*/
    backdrop-filter: saturate(180%) blur(20px);
    background-color: rgba(0, 0, 0, .7);
}

.cookie-block.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 1s;
}

.cookie-block a {
    text-decoration: underline
}

.cookie-block .cookie-block-agree {
    margin-left: 10px;
    vertical-align: baseline;
}

.avartar-block {
    padding: 0px 20px 20px 20px;
    display: flex;
    justify-content: center;
    align-content: center;
}

.avartar-wrapper {
    box-shadow: rgba(50, 50, 105, 0.15) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
    /*box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;*/
    /*box-shadow: rgba(0, 0, 0, 0.18) 0px 2px 4px;*/
    width: min-content;
    padding: 7px;
    border-radius: 0.475rem;
    display: flex;
    justify-content: center;
    align-content: center;
}

.image-block {
    padding: 0px 20px 20px 20px;
    display: flex;
    justify-content: center;
    align-content: center;
}


.main-bg-color {
    background-color: rgba(15, 114, 231, 0.05);
}

.list-group.flush-list-group {
    border: 1px solid transparent;
}

.list-group.flush-list-group .list-group-item {
    border: 1px solid transparent;
}

/* Skeleton loading */
.loading-skeleton h1,
    /*.loading-skeleton h2,*/
.loading-skeleton h2 span,
.loading-skeleton h3,
.loading-skeleton h4,
.loading-skeleton h5,
.loading-skeleton h6,
.loading-skeleton p,
.loading-skeleton li,
.loading-skeleton .btn,
.loading-skeleton label,
.loading-skeleton .dataTables_info,
.loading-skeleton ul,
.loading-skeleton table thead th,
.loading-skeleton table tbody tr,
.loading-skeleton table tbody tr:nth-of-type(odd) > *,
.loading-skeleton .form-control {
    color: transparent;
    appearance: none;
    -webkit-appearance: none;
    background-color: #eee;
    border-color: #eee;
}

.loading-skeleton h1::placeholder,
.loading-skeleton h2::placeholder,
.loading-skeleton h3::placeholder,
.loading-skeleton h4::placeholder,
.loading-skeleton h5::placeholder,
.loading-skeleton h6::placeholder,
.loading-skeleton p::placeholder,
.loading-skeleton li::placeholder,
.loading-skeleton .btn::placeholder,
.loading-skeleton label::placeholder,
.loading-skeleton .form-control::placeholder {
    color: transparent;
}

@keyframes loading-skeleton {
    from {
        opacity: 0.4;
    }
    to {
        opacity: 1;
    }
}

.loading-skeleton {
    pointer-events: none;
    animation: loading-skeleton 1s infinite alternate;
}

.loading-skeleton img {
    filter: grayscale(100) contrast(0%) brightness(1.8);
}

/* Apexchart */
.apexcharts-legend .apexcharts-legend-series:not(:last-child) {
    margin-right: 10px !important;
}

.apexcharts-legend-marker {
    margin-right: 7px !important;
}

/* Data Spinner */
.data-spinner {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 3px solid transparent;
    animation: spinner-spin 1s linear infinite;
    background: linear-gradient(white, white), conic-gradient(from 0.15turn, white, #009EF7);
    background-origin: border-box;
    background-clip: content-box, border-box;
}

.data-spinner-light-green {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 3px solid transparent;
    animation: spinner-spin 1s linear infinite;
    background: linear-gradient(#e8fff3, #e8fff3), conic-gradient(from 0.15turn, white, #009EF7);
    background-origin: border-box;
    background-clip: content-box, border-box;
}

.data-spinner-light-yellow {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 3px solid transparent;
    animation: spinner-spin 1s linear infinite;
    background-origin: border-box !important;
    background-clip: content-box, border-box !important;
    background: linear-gradient(#fff8dd, #fff8dd), conic-gradient(from 0.15turn, white, #009EF7);
}

.data-spinner-light-gray {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 3px solid transparent;
    animation: spinner-spin 1s linear infinite;
    background-origin: border-box !important;
    background-clip: content-box, border-box !important;
    background: linear-gradient(#eff2f5, #eff2f5), conic-gradient(from 0.15turn, white, #009EF7);
}


@keyframes spinner-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Year-Month Datepicker */
.datepicker-controls .prev-btn:after {
    font-family: "Font Awesome 5 Free";
    font-weight: 700;
    content: "\f053";
}

.datepicker-controls .next-btn:after {
    font-family: "Font Awesome 5 Free";
    font-weight: 700;
    content: "\f054";
}

.image-position {
    margin-left: 12rem;
}

.position-requires {
    margin-left: 0.5rem;
    margin-right: 6.5rem;
}

.position-requires-2 {
    margin-left: 0.5rem;
    margin-right: 2.5rem;
}

/* Custom File Upload */
.custom-file-upload input[type=file] {
    margin-left: -2px !important;
}

.custom-file-upload input[type=file]::-webkit-file-upload-button {
    margin-left: -2px !important;
}

.custom-file-upload input[type=file]::file-selector-button {
    display: none;
}

.custom-file-upload:hover label {
    background-color: #dde0e3;
    cursor: pointer;
}

.cursor-default:hover {
    cursor: default;
}

/* Number Input */
.number-input__button.number-input__button--plus:after {
    height: 30% !important;
    background-color: #a1a5b7 !important;
}

.number-input__button.number-input__button--plus:hover {
    color: #000;
    background-color: #e4e6ef;
    border-color: #e4e6ef;
}

.number-input__button.number-input__button--plus:before {
    width: 30% !important;
    background-color: #a1a5b7 !important;
}

.number-input__button.number-input__button--minus:before {
    width: 30% !important;
    background-color: #a1a5b7 !important;
}

.number-input__button.number-input__button--minus:hover {
    color: #000;
    background-color: #e4e6ef;
    border-color: #e4e6ef;
}

#avatar-wrapper .image-input {
    background-image: url(../media/avatars/blank.svg)
}

.medication-container .image-ful-empty {
    background-image: url(../media/image.svg);

}

.data-table-translate-content button:first-child {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
.data-table-translate-content button:last-child {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.data-table-translate-content button {
    background: #e4e6ef;
    color: #ffffff;
    border: none;
    height: 30px;
}

.data-table-translate-content .active {
    background: #0fa868;
}

.form-label-shift {
    padding-top: calc(0.75rem + 1px);
    padding-bottom: calc(0.75rem + 1px);
    margin-bottom: 0;
    font-size: large;
    font-weight: 500;
    line-height: 1.5;
    color: #0b0b10;
}

.dropdown-width{
    width: 100%!important;
}
.check-box-margin{
    margin-right: 0.5rem;

}
.check-box-margin-2{
    margin-right: 2rem;
}
.check-box-margin-3{
    margin-right: 7rem;
}
.check-box-margin-4{
    margin-right: 4rem;
}
.check-box-margin-5{
    margin-right: 6.5rem;
}
.custom-sticky-col{
    z-index: 1;
    background-color: #fff !important;
}

.border-bottom {
    border-bottom: 1px solid #ccc; /* สีและความหนาของเส้น */
}

.flex-grow-1 {
    flex-grow: 1;
}

.vue__time-picker input.display-time {
    width: 6em;
}

.custom-button {
    border: 1px solid #ddd !important; /* Light gray border */
    border-radius: 8px !important; /* Rounded corners */
    padding: 10px !important; /* Add padding to the button */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1) !important; /* Subtle shadow */
    background-color: white !important; /* Background color */
}

.custom-button img {
    width: 20px !important; /* Adjust the size of the icon */
    height: 20px !important;
}

.blockui-message {
    display: flex;
    align-items: center;
    border-radius: 0.475rem;
    box-shadow: 0 0 50px 0 rgba(82,63,105,.15);
    background-color: #fff;
    color: #7e8299;
    font-weight: 500;
    margin: 0!important;
    width: auto;
    padding: 0.85rem 1.75rem!important;
}

.blockui-overlay {
    transition: all .3s ease;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.blockui-overlay.relative { position: relative !important; }
.blockui-overlay.default { background-color: rgba(0,0,0,.05); }
.blockui-overlay.transparent { background-color: transparent; }

.border.dashboard { border: 1px solid #e5e8ec!important; }
.card.dashboard { box-shadow: 0 0 20px 0 rgba(76,87,125,.05); }

#accordionListReport .accordion-button {
    font-size: smaller;
}

#accordionListReport .accordion-button:not(.collapsed) {
    color: #fff;
    /*background: rgb(8,18,65);*/
    background: linear-gradient(90deg, rgba(8,18,65,1) 0%, rgba(8,18,65,1) 26%, rgb(105 197 216) 100%);
}

#accordionListReport .list-group-item.list-group-item-action {
    /*border: red thin solid !important;*/
    line-height: 40px;
    font-size: initial;
}

#accordionListReport .accordion-button:after {
    order: -1;
    margin-left: 0;
    margin-right:0.5em;
}

/*** Media Screen ***/
.tell-media {
    /*display: none;*/
    top: 10px;
    right: 15px;
    position: fixed;
    z-index: 3000;
}
/*** XS ***/
@media (max-width: 576px) {
    .tell-media::before { content: 'XS'; }
}
/*** SM ***/
@media (min-width: 576px) and (max-width: 767px) {
    .tell-media::before { content: 'SM'; }
}
/*** MD ***/
@media (min-width: 768px) and (max-width: 991px) {
    .tell-media::before { content: 'MD'; }
}
/*** LG ***/
@media (min-width: 992px) and (max-width: 1199px) {
    .tell-media::before { content: 'LG'; }
}
/*** XL ***/
@media (min-width: 1200px) and (max-width: 1399px) {
    .tell-media::before { content: 'XL' }
}
/*** XXL ***/
@media (min-width: 1400px) {
    .tell-media::before { content: 'XXL'; }
}