:root {
    --accent: #1F509A;
    --primary: #0D92F4;
    --secondary: #9ba4b5;
    --success: #16C47F;
    --warning: #e7b733;
    --danger: #e14c4c;
    --info: #4cc9fe;
}

:root[data-bs-theme="light"] {
    --table-bg-color: #F5F5F5;
    --table-text-color: #333333;
    --table-border-color: #DDDDDD;
    --table-button-bg-color: #F5F5F5;
    --table-button-text-color: #333333;
    --table-button-border-color: #DDDDDD;
    --input-bg-color: white;
    --input-group-bg-color: #f5f5f5;
}

:root[data-bs-theme="dark"] {
    --table-bg-color: #0f151f;
    --table-text-color: #DDDDDD;
    --table-border-color: #363C46;
    --table-button-bg-color: #0f151f;
    --table-button-text-color: #DDDDDD;
    --table-button-border-color: #363C46;
    --input-bg-color: #212529;
    --input-group-bg-color: #2B3035;
}

body {
    font-family: "Poppins", sans-serif;
    font-size: 12px;
}

input, select, textarea, ::placeholder {
    font-size: 12px !important;
}

input, select, textarea {
    box-shadow: none !important;
}

.input-group {
    border: 1px solid var(--table-border-color);
    border-radius: 0.25rem;
    background-color: var(--input-group-bg-color);
}

.input-group .input-group-text {
    border: none;
    border-radius: 0.25rem;
    background-color: transparent;
}

.input-group input {
    border: none;
    border-radius: 0 !important;
    background-color: var(--input-bg-color);
}

/* ACCENT */
    .bg-accent {
        background-color: var(--accent) !important;
    }
    .btn-accent, .btn-accent:active {
        background-color: var(--accent) !important;
        color: #F5F5F5 !important;
        border: 1px solid var(--accent) !important;
    }
    .btn-accent:hover {
        background-color: var(--accent) !important;
        filter: saturate(0.5) !important;
        color: #F5F5F5 !important;
    }
    .text-accent {
        color: var(--accent) !important;
    }
/* ACCENT */

/* PRIMARY */
    .bg-primary {
        background-color: var(--primary) !important;
    }
    .btn-primary, .btn-primary:active {
        background-color: var(--primary) !important;
        color: #f5f5f5 !important;
        border: 1px solid var(--primary) !important;
    }
    .btn-primary:hover {
        background-color: var(--primary) !important;
        filter: saturate(0.5) !important;
        color: #F5F5F5 !important;
    }
    .text-primary {
        color: var(--primary) !important;
    }
/* PRIMARY */

/* SECONDARY */
    .bg-secondary {
        background-color: var(--secondary) !important;
    }
    .btn-secondary, .btn-secondary:active {
        background-color: var(--secondary) !important;
        color: #f5f5f5 !important;
        border: 1px solid var(--secondary) !important;
    }
    .btn-secondary:hover {
        background-color: var(--secondary) !important;
        filter: saturate(0.5) !important;
        color: #F5F5F5 !important;
    }
    .text-secondary {
        color: var(--secondary) !important;
    }
/* SECONDARY */

/* SUCCESS */
    .bg-success {
        background-color: var(--success) !important;
    }
    .btn-success, .btn-success:active {
        background-color: var(--success) !important;
        color: #f5f5f5 !important;
        border: 1px solid var(--success) !important;
    }
    .btn-success:hover {
        background-color: var(--success) !important;
        filter: saturate(0.5) !important;
        color: #F5F5F5 !important;
    }
    .text-success {
        color: var(--success) !important;
    }
/* SUCCESS */

/* WARNING */
    .bg-warning {
        background-color: var(--warning) !important;
    }
    .btn-warning, .btn-warning:active {
        background-color: var(--warning) !important;
        color: #f5f5f5 !important;
        border: 1px solid var(--warning) !important;
    }
    .btn-warning:hover {
        background-color: var(--warning) !important;
        filter: saturate(0.5) !important;
        color: #F5F5F5 !important;
    }
    .text-warning {
        color: var(--warning) !important;
    }
/* WARNING */

/* DANGER */
    .bg-danger {
        background-color: var(--danger) !important;
    }
    .btn-danger, .btn-danger:active {
        background-color: var(--danger) !important;
        color: #f5f5f5 !important;
        border: 1px solid var(--danger) !important;
    }
    .btn-danger:hover {
        background-color: var(--danger) !important;
        filter: saturate(0.5) !important;
        color: #F5F5F5 !important;
    }
    .text-danger {
        color: var(--danger) !important;
    }
/* DANGER */

/* INFO */
    .bg-info {
        background-color: var(--info) !important;
    }
    .btn-info, .btn-info:active {
        background-color: var(--info) !important;
        color: #f5f5f5 !important;
        border: 1px solid var(--info) !important;
    }
    .btn-info:hover {
        background-color: var(--info) !important;
        filter: saturate(0.5) !important;
        color: #F5F5F5 !important;
    }
    .text-info {
        color: var(--info) !important;
    }
/* INFO */

/* MODAL */
    .modal {

    }
    .modal .modal-dialog {

    }
    .modal .modal-dialog .modal-content {
        margin: 0 !important;
        padding: 1rem !important;
        border-radius: 1rem !important;
    }
    .modal .modal-dialog .modal-content .modal-header {
        margin: 0 0 1rem 0 !important;
        padding: 0 0 1rem 0 !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: start !important;
        gap: 1rem !important;
        border: none !important;
        border-bottom: 1px solid #dddddd !important;
    }
    .modal .modal-dialog .modal-content .modal-header .modal-title {
        font-size: 1rem !important;
        font-weight: 600 !important;
        line-height: 1rem !important;
    }
    .modal .modal-dialog .modal-content .modal-header .modal-description {
        font-size: 12px !important;
        font-weight: 400 !important;
    }
    
    .modal .modal-dialog .modal-content .modal-body {
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
    .modal .modal-dialog .modal-content .modal-body::-webkit-scrollbar {
        display: none !important;
    }
    .modal .modal-dialog .modal-content .modal-footer {
        margin: 1rem 0 0 0 !important;
        padding: 1rem 0 0 0 !important;
        display: flex !important;
        justify-content: end !important;
        align-items: center !important;
        gap: 1rem !important;
        border: none !important;
        border-top: 1px solid #dddddd !important;
        border-radius: 0 !important;
    }
    .modal .modal-dialog .modal-content .modal-footer button {
        margin: 0 !important;
    }
/* MODAL */

.form-control, .form-select, .input-group-text, .btn {
    font-size: 12px;
    box-shadow: none !important;
}

.form-control .form-select, .btn {
    border-radius: 0.5rem !important;
}

.btn {
    min-width: 2rem !important;
    height: 2rem !important;
}

.btn.btn-icon {
    width: 2rem !important;
    height: 2rem !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    justify-content: center !important;
    align-items: center !important;
}

.btn:not(.btn-default,.btn-selectpicker,.btn-filter) {
    border: none;
    font-weight: 500;
}

.pagination {
    gap: 0.5rem !important;
}

.page-link {
    background-color: transparent !important;
    color: #555555 !important;
    border: none !important;
    border-radius: 0.25rem !important;
    width: 25px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    box-shadow: none !important;
}

.page-link[aria-current="page"] {
    background-color: #024CAA !important;
    color: #dddddd !important;
    border: 1px solid #dddddd !important;
}

.page-link[aria-disabled="true"] {
    background-color: transparent !important;
    color: #dddddd !important;
    border: none !important;
}

.dropdown-menu {
    padding: 0 !important;
}

.dropdown-item {
    font-size: 12px;
}

.form-check-input:checked {
    background-color: var(--primary) !important;
    color: var(--primary) !important;
    border: 1px solid var(--primary) !important;
}

.form-label {
    font-weight: 600 !important;
    margin-bottom: 0.25rem !important;
}

.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple,
.select2-dropdown {
    border-radius: 0.25rem !important;
    box-shadow: none !important;
}

.select2-dropdown {
    box-shadow: none !important;
    overflow: hidden;
}

.select2-container .select2-selection--single {
    font-size: 12px !important;
}

.select2-container .select2-selection--multiple {
    font-size: 12px !important;
}

.select2-container .select2-results__option {
    font-size: 12px !important;
}

.swal2-modal {
    padding: 1rem !important;
    border-radius: 1rem !important;
}

.swal2-icon {
    margin: 0 auto !important;
    margin-bottom: 1rem !important;
    padding: 0 !important;
    font-size: 12px !important;
}

.swal2-title {
    margin: 0 !important;
    margin-bottom: 0.25rem !important;
    padding: 0 !important;
    font-size: 18px;
    font-weight: 600;
    line-height: 18px;
}

.swal2-html-container {
    margin: 0 !important;
    margin-bottom: 1rem !important;
    padding: 0 !important;
    font-size: 12px !important;
}

.swal2-actions {
    margin: 0 !important;
    padding: 0 !important;
}

.swal2-confirm, .swal2-cancel {
    margin: 0 !important;
    padding: 0.5rem 2rem !important;
    border-radius: 1rem !important;
    font-size: 12px;
    font-weight: 600;
}

.swal2-confirm {
    background-color: var(--accent) !important;
    color: #f5f5f5;
}

.swal2-cancel {
    background-color: transparent !important;
    color: #333333;
}

input:-webkit-autofill {
    background-color: white !important;
    -webkit-text-fill-color: #333333 !important;
    border: 1px solid #dddddd !important;
    transition: background-color 5000s ease-in-out 0s;
}

.dt-paging .pagination {
    gap: 0.5rem !important;
}

.dt-paging .page-item .page-link {
    min-width: 30px !important;
    min-height: 30px !important;
    padding: 0.25rem 0.5rem !important;
    margin: 0 !important;
    border-radius: 0.25rem !important;
    font-size: 12px !important;
    color: #333333 !important;
}

.dt-paging .page-item.active .page-link {
    background-color: #E38E49 !important;
    color: #F5F5F5 !important;
    border: 1px solid #E38E49 !important;
}

.dt-paging-button.current {
    background-color: var(--accent) !important;
    color: #333333 !important;
    border: 1px solid #dddddd !important;   
}

.dt-input {
    border: 1px solid #dddddd !important;
}

.form-check-input:checked {
    background-color: var(--accent) !important;
}

.dt-layout-row {
    margin: 0 !important;
    padding: 0 !important;
}

.dt-layout-row.dt-layout-table {
    margin: 1rem 0 1rem 0 !important;
    padding: 0 !important;
}

.accordion-button {
    padding: 1rem !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    color: var(--accent) !important;
}

.accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23333333' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 01.708 0L8 10.293l5.646-5.647a.5.5 0 11.708.708l-6 6a.5.5 0 01-.708 0l-6-6a.5.5 0 010-.708z'/%3e%3c/svg%3e");
}

.accordion-button:not(.collapsed) {
    background-color: var(--accent) !important;
    color: #f5f5f5 !important;
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23f5f5f5' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 01.708 0L8 10.293l5.646-5.647a.5.5 0 11.708.708l-6 6a.5.5 0 01-.708 0l-6-6a.5.5 0 010-.708z'/%3e%3c/svg%3e");
}

table {
    border: 1px solid var(--table-border-color) !important;
    border-collapse: collapse !important;
    margin: 0;
    width: 100% !important;
}

table thead th, table tbody td, table tfoot th {
    border: 1px solid var(--table-border-color) !important;
}

table thead th, table tfoot th {
    font-weight: 600 !important;
}

.dt-paging nav {
    display: flex !important;
    justify-content: end !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.dt-paging-button {
    background-color: #f0f0f0 !important;
    color: #333333 !important;
    border: none !important;
    border-radius: 0.25rem !important;
    font-size: 12px !important;
    font-weight: 400 !important;
}

.dt-paging-button i {
    font-size: 10px !important;
}

.dt-paging-button.page-item.active .page-link {
    background-color: var(--accent) !important;
    color: #f5f5f5 !important;
    border: none !important;
}

.dt-paging-button.page-item.disabled {
    background-color: transparent !important;
    color: #333333 !important;
    border: none !important;
}

.dt-container {
    margin: 0 !important;
    gap: 0 !important;
}

.dt-layout-start {
    margin: 0 !important;
    padding: 0 !important;
}

.dt-layout-full {
    margin: 0 !important;
    padding: 0 !important;
}

.dt-layout-end {
    margin: 0 !important;
    padding: 0 !important;
}

.pagination .page-item {
    padding: 0.25rem;
    border-radius: 0.25rem;
    background-color: #f0f0f0;
}
.pagination .page-item.active {
    background-color: #1F509A;
}
.pagination .page-item.disabled {
    background-color: white;
}
.pagination .page-item .page-link {
    color: #333333 !important;
    font-size: 14px;
    font-weight: 500;
}
.pagination .page-item.active .page-link {
    color: #f5f5f5 !important;
}
.pagination .page-item.disabled .page-link {
    color: #888888 !important;
}

#checkedList {
    width: 100%;
    max-height: 120px;
    overflow-y: auto;
    margin: 0;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

input[type=number] {
    -moz-appearance: textfield !important;
}