@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@100..900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Sarabun:wght@100;200;300;400;500;600;700;800&display=swap);

.btn-primary, .btn-secondary, .btn-success {
    --bs-btn-color: var(--bs-white);
    --bs-btn-hover-color: var(--bs-white)
}

#ta-left-sidebar, .card {
    box-shadow: 0 3px 9px 0 rgb(169 184 200 / 15%)
}

:root {
    --body-font-family: "Sarabun",sans-serif;
    --header-font-family: "Noto Sans Thai",sans-serif;
    --font-size-lg: 1.75rem;
    --font-size-md: 1.25rem;
    --font-size-base: 1rem;
    --font-size-sm: 0.875rem;
    --bs-primary: #2d397c;
    --bs-secondary: #009966;
    --bs-success: #6eb429;
    --bs-danger: #e7000b;
    --bs-warning: #f5c414;
    --bs-light: #f8f9fd;
    --bs-dark: #000000;
    --primary-hover-color: #1a2350;
    --secondary-hover-color: #007a52;
    --success-hover-color: #5a9420;
    --danger-hover-color: #c40009;
    --warning-hover-color: #b88700;
    --light-hover-color: #d5d7db;
    --dark-hover-color: #000000;
    --bs-white: #ffffff;
    --bs-gray: #656c7c;
    --bs-black: #000000;
    --bs-primary-text-emphasis: #1a2350;
    --bs-secondary-text-emphasis: #007a52;
    --bs-success-text-emphasis: #5a9420;
    --bs-danger-text-emphasis: #c40009;
    --bs-warning-text-emphasis: #b88700;
    --white-bg: #ffffff;
    --bs-primary-bg-subtle: #eff6ff;
    --bs-secondary-bg-subtle: #f0fbe4;
    --bs-success-bg-subtle: #f0fbe4;
    --bs-danger-bg-subtle: #ffe2e2;
    --bs-warning-bg-subtle: #fef3c6;
    --bs-light-bg-subtle: #f8f9fd;
    --bs-dark-bg-subtle: #e5e7eb;
    --bs-border-color: #e5e7eb;
    --selection-bg: #6495fe;
    --spacing-3xs: .25rem;
    --spacing-2xs: .35rem;
    --spacing-xs: .5rem;
    --spacing-sm: .75rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.25rem;
    --spacing-xl: 1.5rem;
    --spacing-2xl: 1.75rem;
    --spacing-3xl: 2.25rem;
    --border-radiuse-base: 8px;
    --font-size-changed: 0px;
    --spacing-changed: 0px;
    --border-radius-changed: 0px;
    --button-size-changed: 0px;
    --input-size-changed: 0px;
    --table-size-changed: 0px;
    --oc-admin-menu-bg-color: var(--white-bg);
    --bs-info: var(--bs-primary);
    --bs-info-text-emphasis: var(--bs-primary-text-emphasis);
    --bs-light-text-emphasis: var(--bs-gray);
    --bs-dark-text-emphasis: var(--bs-black);
    --bs-info-bg-subtle: var(--bs-primary-bg-subtle);
    --bs-body-color: var(--bs-dark);
    --bs-body-bg: var(--white-bg);
    --bs-input-padding-x: calc(var(--input-size-changed) + var(--spacing-sm));
    --bs-input-padding-y: calc(var(--input-size-changed) + var(--spacing-2xs));
    --bs-input-font-size: var(--main-fs-base);
    --bs-input-padding-s: calc(var(--input-size-changed) + var(--spacing-3xl));
    --bs-form-valid-color: var(--success-hover-color);
    --bs-form-valid-border-color: var(--success-hover-color);
    --bs-form-invalid-color: var(--danger-hover-color);
    --bs-form-invalid-border-color: var(--danger-hover-color);
    --bs-form-invalid-font-size: calc(var(--input-size-changed) + var(--font-size-base));
    --bs-border-radius: calc(var(--border-radius-changed) + 0.375rem);
    --bs-border-radius-sm: calc(var(--border-radius-changed) + var(--spacing-3xs));
    --bs-border-radius-lg: calc(var(--border-radius-changed) + var(--spacing-xs));
    --oc-scrollbar-color: var(--bs-border-color);
    --oc-admin-menu-font-color: var(--bs-black);
    --oc-admin-menu-font-color-hover: var(--bs-black);
    --oc-admin-menu-item-bg-color: var(--white-bg);
    --oc-admin-menu-item-font-color: var(--bs-black);
    --oc-admin-menu-item-font-color-active: var(--bs-black);
    --oc-top-nav-height: 64px;
    --oc-start-navigation-width-when-compact: 48px;
    --bs-emphasis-color: var(--bs-black);
    --main-fs-lg: calc(var(--font-size-changed) + var(--font-size-lg));
    --main-fs-md: calc(var(--font-size-changed) + var(--font-size-md));
    --main-fs-base: calc(var(--font-size-changed) + var(--font-size-base));
    --main-fs-sm: calc(var(--font-size-changed) + var(--font-size-sm));
    --main-border-radius: calc(var(--border-radius-changed) + var(--border-radiuse-base))
}

body {
    font-family: var(--body-font-family);
    font-size: var(--main-fs-base);
    color: var(--bs-black)
}

    body ::selection {
        background-color: var(--selection-bg);
        color: var(--bs-white)
    }

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-family: var(--header-font-family);
    line-height: 1.5 !important
}

.fs-1, .h1, .h2, .h3, h1, h2, h3 {
    font-size: var(--main-fs-lg) !important
}

.fs-2, .h4, h4 {
    font-size: var(--main-fs-md) !important
}

#ta-left-sidebar *, .fs-3, .h5, .ta-navbar-top *, h5 {
    font-size: var(--main-fs-base) !important
}

.fs-4, .h6, h6 {
    font-size: var(--main-fs-sm) !important
}

a {
    color: var(--bs-primary)
}

    a:hover {
        color: var(--primary-hover-color);
        text-decoration: none
    }

.btn {
    --bs-btn-font-family: var(--body-font-family);
    --bs-btn-padding-x: calc(var(--button-size-changed) + var(--spacing-sm));
    --bs-btn-padding-y: calc(var(--button-size-changed) + var(--spacing-2xs));
    --bs-btn-border-radius: var(--main-border-radius);
    --bs-btn-font-size: calc(var(--button-size-changed) + var(--font-size-base));
    --bs-btn-focus-shadow-rgb: none;
    --bs-btn-active-color: var(--bs-btn-hover-color);
    --bs-btn-active-bg: var(--bs-btn-hover-bg);
    --bs-btn-active-border-color: var(--bs-btn-hover-border-color);
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: var(--bs-btn-color);
    --bs-btn-disabled-bg: var(--bs-btn-bg);
    --bs-btn-disabled-border-color: var(--bs-btn-border-color)
}

.btn-sm {
    --bs-btn-padding-x: calc(var(--button-size-changed) + var(--spacing-xs));
    --bs-btn-padding-y: calc(var(--button-size-changed) + var(--spacing-3xs));
    --bs-btn-font-size: calc(var(--button-size-changed) + var(--font-size-sm))
}

.btn-lg {
    --bs-btn-padding-x: calc(var(--button-size-changed) + var(--spacing-md));
    --bs-btn-padding-y: calc(var(--button-size-changed) + var(--spacing-xs));
    --bs-btn-font-size: calc(var(--button-size-changed) + var(--font-size-md))
}

.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--primary-hover-color);
    --bs-btn-hover-border-color: var(--primary-hover-color)
}

.btn-secondary {
    --bs-btn-bg: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);
    --bs-btn-hover-bg: var(--secondary-hover-color);
    --bs-btn-hover-border-color: var(--secondary-hover-color)
}

.btn-success {
    --bs-btn-bg: var(--bs-success);
    --bs-btn-border-color: var(--bs-success);
    --bs-btn-hover-bg: var(--success-hover-color);
    --bs-btn-hover-border-color: var(--success-hover-color)
}

.btn-warning {
    --bs-btn-color: var(--bs-black);
    --bs-btn-bg: var(--bs-warning);
    --bs-btn-border-color: var(--bs-warning);
    --bs-btn-hover-color: var(--bs-black);
    --bs-btn-hover-bg: var(--warning-hover-color);
    --bs-btn-hover-border-color: var(--warning-hover-color)
}

.btn-danger {
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--bs-danger);
    --bs-btn-border-color: var(--bs-danger);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: var(--danger-hover-color);
    --bs-btn-hover-border-color: var(--danger-hover-color)
}

.btn-light {
    --bs-btn-color: var(--bs-black);
    --bs-btn-bg: var(--bs-light);
    --bs-btn-border-color: var(--bs-light);
    --bs-btn-hover-color: var(--bs-black);
    --bs-btn-hover-bg: var(--light-hover-color);
    --bs-btn-hover-border-color: var(--light-hover-color)
}

.btn-dark, .btn-outline-primary, .btn-outline-secondary, .btn-outline-success {
    --bs-btn-hover-color: var(--bs-white)
}

.btn-dark {
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--bs-dark);
    --bs-btn-border-color: var(--bs-dark);
    --bs-btn-hover-bg: var(--dark-hover-color);
    --bs-btn-hover-border-color: var(--dark-hover-color)
}

.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--primary-hover-color);
    --bs-btn-hover-border-color: var(--primary-hover-color)
}

.btn-outline-secondary {
    --bs-btn-color: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);
    --bs-btn-hover-bg: var(--secondary-hover-color);
    --bs-btn-hover-border-color: var(--secondary-hover-color)
}

.btn-outline-success {
    --bs-btn-color: var(--bs-success);
    --bs-btn-border-color: var(--bs-success);
    --bs-btn-hover-bg: var(--success-hover-color);
    --bs-btn-hover-border-color: var(--success-hover-color)
}

.btn-outline-warning {
    --bs-btn-color: var(--bs-warning);
    --bs-btn-border-color: var(--bs-warning);
    --bs-btn-hover-color: var(--bs-black);
    --bs-btn-hover-bg: var(--warning-hover-color);
    --bs-btn-hover-border-color: var(--warning-hover-color)
}

.btn-outline-danger, .btn-outline-dark, .btn-outline-light {
    --bs-btn-hover-color: var(--bs-white)
}

.btn-outline-danger {
    --bs-btn-color: var(--bs-danger);
    --bs-btn-border-color: var(--bs-danger);
    --bs-btn-hover-bg: var(--danger-hover-color);
    --bs-btn-hover-border-color: var(--danger-hover-color)
}

.btn-outline-light {
    --bs-btn-color: var(--bs-light);
    --bs-btn-border-color: var(--bs-light);
    --bs-btn-hover-bg: var(--light-hover-color);
    --bs-btn-hover-border-color: var(--light-hover-color)
}

.btn-outline-dark {
    --bs-btn-color: var(--bs-dark);
    --bs-btn-border-color: var(--bs-dark);
    --bs-btn-hover-bg: var(--dark-hover-color);
    --bs-btn-hover-border-color: var(--dark-hover-color)
}

.form-control, .form-floating > .form-control, .form-floating > .form-control-plaintext {
    padding: var(--bs-input-padding-y) var(--bs-input-padding-x);
    font-size: var(--bs-input-font-size)
}

.form-select, .input-group-text {
    font-size: var(--bs-input-font-size) !important
}

.form-floating > .form-control, .form-floating > .form-control-plaintext {
    height: calc(var(--bs-input-padding-y) + var(--input-size-changed) + 3.5rem + calc(var(--bs-border-width) * 2));
    min-height: calc(var(--bs-input-padding-y) + var(--input-size-changed) + 3.5rem + calc(var(--bs-border-width) * 2))
}

.form-select {
    padding: var(--bs-input-padding-y) var(--bs-input-padding-s) var(--bs-input-padding-y) var(--bs-input-padding-x);
    color: var(--bs-dark)
}

.input-group-text {
    padding: var(--bs-input-padding-y) 1.125rem
}

.form-control-sm, .form-select-sm, .input-group-sm > .btn, .input-group-sm > .form-control, .input-group-sm > .form-select, .input-group-sm > .input-group-text {
    --bs-input-padding-x: calc(var(--input-size-changed) + var(--spacing-xs));
    --bs-input-padding-y: calc(var(--input-size-changed) + var(--spacing-3xs));
    --bs-input-font-size: var(--main-fs-sm)
}

.form-control-lg, .form-select-lg, .input-group-lg > .btn, .input-group-lg > .form-control, .input-group-lg > .form-select, .input-group-lg > .input-group-text {
    --bs-input-padding-x: calc(var(--input-size-changed) + var(--spacing-md));
    --bs-input-padding-y: calc(var(--input-size-changed) + var(--spacing-xs));
    --bs-input-font-size: var(--main-fs-lg)
}

.form-control:focus, .form-select:focus {
    border-color: var(--bs-primary);
    box-shadow: none
}

.form-floating > .form-control-plaintext:focus, .form-floating > .form-control-plaintext:not(:placeholder-shown), .form-floating > .form-control:focus, .form-floating > .form-control:not(:placeholder-shown) {
    padding-top: calc(var(--input-size-changed) + var(--spacing-2xl));
    padding-bottom: calc(var(--input-size-changed) + var(--spacing-sm))
}

.form-floating > label {
    padding: var(--spacing-md) var(--bs-input-padding-x)
}

.invalid-feedback, .valid-feedback {
    font-size: var(--bs-form-invalid-font-size)
}

.text-primary {
    color: var(--bs-primary) !important
}

.text-info {
    color: var(--bs-info) !important
}

.text-secondary {
    color: var(--bs-secondary) !important
}

.text-success {
    color: var(--bs-success) !important
}

.text-warning {
    color: var(--bs-warning) !important
}

.text-danger {
    color: var(--bs-danger) !important
}

.text-light {
    color: var(--bs-light) !important
}

.text-dark {
    color: var(--bs-dark) !important
}

.text-black {
    color: var(--bs-black) !important
}

.text-white {
    color: var(--bs-white) !important
}

.text-muted {
    color: var(--bs-gray) !important
}

.bg-info, .bg-primary {
    background-color: var(--bs-primary) !important
}

.bg-secondary {
    background-color: var(--bs-secondary) !important
}

.bg-success {
    background-color: var(--bs-success) !important
}

.bg-warning {
    background-color: var(--bs-warning) !important
}

.bg-danger {
    background-color: var(--bs-danger) !important
}

.bg-light {
    background-color: var(--bs-light) !important
}

.bg-dark {
    background-color: var(--bs-dark) !important
}

.bg-white {
    background-color: var(--white-bg) !important
}

.badge {
    --bs-badge-padding-x: calc(var(--spacing-changed) + 0.65em);
    --bs-badge-padding-y: calc(var(--spacing-changed) + 0.35em);
    --bs-badge-font-size: var(--main-fs-sm);
    --bs-badge-font-weight: 600;
    --bs-badge-color: var(--bs-white);
    --bs-badge-border-radius: var(--main-border-radius)
}

.left-sidebar-compact:has(.logo-compact) .logo-full, body:not(.left-sidebar-compact):has(.logo-full) .logo-compact {
    display: none
}

#ta-left-sidebar .item-label, #ta-left-sidebar li {
    background: var(--oc-admin-menu-item-bg-color) !important
}

#ta-left-sidebar {
    top: 0 !important;
    border-right: none !important;
    z-index: 1035 !important
}

body:not(.left-sidebar-compact) #ta-left-sidebar #left-nav {
    --ta-left-sidebar-logo-height: 120px;
    --ta-left-sidebar-footer-height: 51px;
    height: calc(100% - var(--ta-left-sidebar-logo-height) - var(--ta-left-sidebar-footer-height))
}

    body:not(.left-sidebar-compact) #ta-left-sidebar #left-nav > ul.menu-admin {
        height: calc(85% - var(--ta-left-sidebar-logo-height))
    }

    body:not(.left-sidebar-compact) #ta-left-sidebar #left-nav > ul > li a {
        margin-right: var(--spacing-sm)
    }

#ta-left-sidebar #left-nav > ul > li.active:not(.has-items) a, #ta-left-sidebar #left-nav > ul > li.has-items.active > figure > figcaption[id] > a {
    border-radius: 0 calc(var(--spacing-changed) + 60px) calc(var(--spacing-changed) + 60px) 0;
    box-shadow: 0 7px 12px 0 rgb(95 118 232 / 21%);
    background-color: var(--bs-primary) !important;
    color: var(--bs-white) !important;
    height: 100%;
    align-items: center
}

.dropdown-menu {
    --bs-dropdown-font-size: var(--main-fs-base);
    --bs-dropdown-color: var(--bs-dark);
    --bs-dropdown-bg: var(--white-bg);
    --bs-dropdown-border-color: var(--bs-border-color);
    --bs-dropdown-border-radius: var(--main-border-radius);
    --bs-dropdown-divider-bg: var(--bs-border-color);
    --bs-dropdown-link-color: var(--bs-black);
    --bs-dropdown-link-hover-color: var(--bs-white);
    --bs-dropdown-link-hover-bg: var(--bs-primary);
    --bs-dropdown-link-active-color: var(--bs-primary);
    --bs-dropdown-link-active-bg: var(--bs-dark-bg-subtle);
    --bs-dropdown-link-disabled-color: var(--bs-gray);
    --bs-dropdown-header-color: var(--bs-gray)
}

.nav-link {
    font-size: var(--main-fs-base)
}

.nav-tabs .nav-link {
    background-color: var(--bs-secondary)
}

    .nav-tabs .nav-link:hover {
        background-color: var(--secondary-hover-color)
    }

.navbar {
    --bs-navbar-color: var(--bs-gray);
    --bs-navbar-hover-color: var(--primary-hover-color);
    --bs-navbar-active-color: var(--bs-primary);
    --bs-navbar-brand-font-size: var(--main-fs-md);
    --bs-navbar-brand-color: var(--bs-primary);
    --bs-navbar-brand-hover-color: var(--primary-hover-color);
    --bs-navbar-toggler-border-color: var(--bs-border-color);
    --bs-navbar-toggler-border-radius: var(--main-border-radius);
    background-color: var(--bs-light-bg-subtle)
}

.card, .tab-pane {
    background-color: var(--white-bg)
}

.card {
    --bs-card-spacer-y: calc(var(--spacing-changed) + var(--spacing-lg));
    --bs-card-spacer-x: calc(var(--spacing-changed) + var(--spacing-lg));
    --bs-card-title-spacer-y: calc(var(--spacing-changed) + var(--spacing-md));
    --bs-card-title-color: var(--bs-black);
    --bs-card-subtitle-color: var(--bs-gray);
    --bs-card-border-color: var(--bs-border-color);
    --bs-card-border-radius: var(--main-border-radius);
    --bs-card-cap-padding-y: calc(var(--spacing-changed) + var(--spacing-md));
    --bs-card-cap-padding-x: calc(var(--spacing-changed) + var(--spacing-md));
    --bs-card-cap-bg: var(--white-bg);
    --bs-card-cap-color: var(--bs-black);
    --bs-card-color: var(--bs-black);
    --bs-card-bg: var(--white-bg);
    --bs-card-group-margin: calc(var(--spacing-changed) + var(--spacing-md));
    border: none
}

.alert {
    --bs-alert-padding-x: calc(var(--spacing-changed) + var(--spacing-md));
    --bs-alert-padding-y: calc(var(--spacing-changed) + var(--spacing-md));
    --bs-alert-margin-bottom: calc(var(--spacing-changed) + var(--spacing-md));
    --bs-alert-border-radius: var(--main-border-radius);
    --bs-alert-border: var(--bs-border-width) solid var(--bs-alert-color)
}

.modal {
    --bs-modal-padding: calc(var(--spacing-changed) + var(--spacing-lg));
    --bs-modal-color: var(--bs-black);
    --bs-modal-bg: var(--white-bg);
    --bs-modal-border-color: var(--bs-border-color);
    --bs-modal-border-radius: var(--main-border-radius);
    --bs-modal-header-padding-x: calc(var(--spacing-changed) + var(--spacing-md));
    --bs-modal-header-padding-y: calc(var(--spacing-changed) + var(--spacing-md));
    --bs-modal-header-padding: calc(var(--spacing-changed) + var(--spacing-md)) calc(var(--spacing-changed) + var(--spacing-md));
    --bs-modal-header-border-color: var(--bs-border-color);
    --bs-modal-footer-gap: calc(var(--spacing-changed) + var(--spacing-md));
    --bs-modal-footer-bg: var(--white-bg);
    --bs-modal-footer-border-color: var(--bs-border-color)
}

.btn-close {
    --bs-btn-close-color: var(--bs-black);
    --bs-btn-close-focus-shadow: none
}

.tab-pane {
    padding-left: calc(var(--spacing-changed) + var(--spacing-md));
    padding-right: calc(var(--spacing-changed) + var(--spacing-md));
    padding-top: calc(var(--spacing-changed) + var(--spacing-md))
}

[dir] .ta-content {
    padding: calc(var(--oc-top-nav-height,0) + var(--spacing-lg)) calc(var(--spacing-changed) + var(--spacing-lg)) var(--spacing-3xl)
}

.dt-container .bottom {
    position: relative;
    margin: calc(var(--spacing-changed) + var(--spacing-xl)) 0
}

div.dt-container .dt-paging {
    position: absolute;
    right: 0;
    top: 0
}

    div.dt-container .dt-paging .dt-paging-button {
        padding: calc(var(--spacing-changed) + .45rem) calc(var(--spacing-changed) + .85rem);
        border-radius: var(--bs-border-radius)
    }

        div.dt-container .dt-paging .dt-paging-button.current, div.dt-container .dt-paging .dt-paging-button.current:hover {
            color: var(--white-bg) !important;
            border-color: transparent !important;
            background-color: var(--bs-primary) !important
        }

        div.dt-container .dt-paging .dt-paging-button:hover {
            color: var(--bs-black) !important;
            border-color: transparent !important;
            background: var(--bs-dark-bg-subtle) !important
        }

div.dt-container .dt-length {
    margin-bottom: calc(var(--table-size-changed) + var(--spacing-xs))
}

div.dt-container .dt-input {
    border-color: var(--bs-border-color);
    border-radius: var(--bs-border-radius)
}

table > tbody > tr > td, table > thead > tr > th {
    border-bottom-color: var(--bs-border-color) !important
}

table.dataTable > thead > tr > td, table.dataTable > thead > tr > th {
    outline: 0 !important
}

@media(width <= 1199.98px) {
    :root {
        --font-size-lg: 1.5rem;
        --font-size-md: 1.125rem
    }

    .container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        --bs-gutter-x: 0
    }
}

@media(width <= 767.98px) {
    :root {
        --font-size-lg: 1.375rem;
        --font-size-md: 1rem;
        --font-size-base: 0.875rem;
        --font-size-sm: 0.75rem;
        --spacing-3xs: .125rem;
        --spacing-2xs: .275rem;
        --spacing-xs: .375rem;
        --spacing-sm: .625rem;
        --spacing-md: .875rem;
        --spacing-lg: 1.125rem;
        --spacing-xl: 1.35rem;
        --spacing-2xl: 1.625rem
    }

    .form-floating > .form-control, .form-floating > .form-control-plaintext, .form-floating > .form-select {
        height: calc(3rem + calc(var(--bs-border-width)* 2));
        min-height: calc(3rem + calc(var(--bs-border-width)* 2))
    }

    div.dt-container .dt-paging {
        position: inherit;
        width: max-content
    }

    .dt-container .dt-length, .dt-container .dt-search {
        text-align: start !important
    }
}