:root {
    --base-color: #f3f4f6;
    --border-color: #d2dde0;

    --dark-color: #1f2a37;
    --secondary-color: #475569;
    --gray-color-100: #6b7280;
    --gray-color-200: #dbdde2;
    --gray-color-300: #f9fafb;

    --dark-primary-color: #1a56db;

    --light-primary-color: #dfeefd;

    --dark-success-color: #0e9f6e;
    --light-success-color: #f3faf7;

    --dark-warning-color: #e2b257;
    --light-warning-color: #fdf7cf;

    --dark-danger-color: #e02424;
    --light-danger-color: #fbe8e8;
  
}

/* TEXT-COLOR */

.text-dark {
    color: var(--dark-color);
}
.text-secondary {
    color: var(--secondary-color);
}
.text-gray-100 {
    color: var(--gray-color-100);
}
.text-gray-200 {
    color: var(--gray-color-200);
}
.text-gray-300 {
    color: var(--gray-color-300);
}
.text-primary {
    color: var(--dark-primary-color);
}
.text-success {
    color: var(--dark-success-color);
}
.text-warning {
    color: var(--dark-warning-color);
}
.text-danger {
    color: var(--dark-danger-color);
}
/* TEXT-COLOR */

/* BORDER */

.border-dark-primary {
    border-color: var(--dark-primary-color);
}
.border-light-primary {
    border-color: var(--light-primary-color);
}

.border-dark-success {
    border-color: var(--dark-success-color);
}
.border-light-success {
    border-color: var(--light-success-color);
}

.border-dark-warning {
    border-color: var(--dark-warning-color);
}
.border-light-warning {
    border-color: var(--light-warning-color);
}

.border-dark-danger {
    border-color: var(--dark-danger-color);
}
.border-light-danger {
    border-color: var(--light-danger-color);
}

/* BORDER */

/* BACKGROUND */

.bg-gray-200 {
    background-color: var(--gray-color-200);
}
.bg-dark-primary {
    background-color: var(--dark-primary-color);
}
.bg-light-primary {
    background-color: var(--light-primary-color);
}

.bg-dark-success {
    background-color: var(--dark-success-color);
}
.bg-light-success {
    background-color: var(--light-success-color);
}

.bg-dark-warning {
    background-color: var(--dark-warning-color);
}
.bg-light-warning {
    background-color: var(--light-warning-color);
}

.bg-dark-danger {
    background-color: var(--dark-danger-color);
}
.bg-light-danger {
    background-color: var(--light-danger-color);
}

/* BACKGROUND */

/* BUTTONS */

.btn-primary {
    background-color: var(--dark-primary-color);
    color: #fff;
}

.btn-primary:hover {
    background-color: #184fc7;
}

.btn-outline-primary {
    border-width: 1px;
    border-color: var(--dark-primary-color);
    background-color: transparent;
    color: var(--dark-primary-color);
}

.btn-outline-primary:active {
    background-color: var(--dark-primary-color);
    color: #fff;
}

.btn-success {
    background-color: var(--dark-success-color);
    color: #fff;
}

.btn-success:hover {
    background-color: #057a55;
}

.btn-outline-success {
    border-width: 1px;
    border-color: var(--dark-success-color);
    background-color: transparent;
    color: var(--dark-success-color);
}

.btn-outline-success:active {
    background-color: var(--dark-success-color);
    color: #fff;
}

.btn-danger {
    background-color: var(--dark-danger-color);
    color: #fff;
}

.btn-danger:hover {
    background-color: #ca1e1e;
}

.btn-outline-danger {
    border-width: 1px;
    border-color: var(--dark-danger-color);
    background-color: transparent;
    color: var(--dark-danger-color);
}

.btn-outline-danger:active {
    background-color: var(--dark-danger-color);
    color: #fff;
}

.btn-secondary {
    background-color: var(--gray-color-200);
    color: var(--gray-color-100);
}

.btn-secondary:hover {
    background-color: #e5e7eb;
}

.btn-outline-secondary {
    border-width: 1px;
    border-color: var(--border-color);
    background-color: transparent;
    color: var(--gray-color-100);
}

.btn-outline-secondary:active {
    background-color: #e5e7eb;
    color: var(--gray-color-100);
}

/* BUTTONS */

/* SELECT2 CSS */

.select2-container {
    width: 100% !important;
}

.select2-container .select2-selection--single {
    display: flex;
    height: 2.2rem;
    align-items: center;
}

.select2-container .select2-selection--single .select2-selection__arrow b {
    position: relative;
    top: 1.1rem;
}

.select2-container--default
    .select2-selection--multiple
    .select2-selection__choice {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    padding-left: 0.5rem;
    padding-right: 1.5rem;
    font-family: Inter, sans-serif;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 400;
    color: var(--gray-color-100);
    background-color: #fff;
    border: 1px solid var(--border-color);
}

.select2-container--default
    .select2-selection--multiple
    .select2-selection__choice__remove {
    border-left: 1px solid var(--border-color);
    border-right: unset;
    background-color: #fff;
    right: 0px;
    left: auto;
    height: 100%;
    border-radius: 0px;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--gray-color-100);
}

.select2-container--default
    .select2-selection--multiple
    .select2-selection__choice__remove:hover {
    color: var(--dark-danger-color);
}

/* SELECT2 CSS */

/* SWAL POPUP */

.custom-swal-popup {
    padding: 2.25em !important;
}

.custom-swal-popup button {
    border: 1px solid !important;
    border-color: rgb(160 174 192 / 1) !important;
    background-color: transparent !important;
    color: rgb(107 114 128 / 1) !important;
    background-image: none !important;
}

.custom-swal-popup .btn-error:hover {
    border-color: var(--dark-danger-color) !important;
    color: var(--dark-danger-color) !important;
}

/* SWAL POPUP */

/* ALERT */

.alert-light-danger {
    background-color: var(--light-danger-color);
    border: 1px solid #ffd0d6;
}

/* ALERT */

/* TABLE */

.light tr.selected,
.hover\:bg-blue-100:hover {
    background-color: #e9f3ff;
}

.dashcode-data-table .dataTables_paginate .paginate_button.current,
.dashcode-data-table .dataTables_paginate .paginate_button:hover {
    background-color: var(--gray-color-300);
}

/* TABLE */

/* CHECKBOX */


.checkbox-area input:checked+span {
    --tw-ring-shadow: unset;
}


.primary-checkbox input:checked + span {
    background-color: var(--dark-primary-color);
}

.secondary-checkbox input:checked + span {
    background-color: var(--gray-color-200);
}

.success-checkbox input:checked + span {
    background-color: var(--dark-success-color);
}

.warning-checkbox input:checked + span {
    background-color: var(--dark-warning-color);
}

.danger-checkbox input:checked + span {
    background-color: var(--dark-danger-color);
}

/* CHECKBOX */