:root {
    --body-font: 'Roboto', sans-serif;
    --main-font-size: 16px;
    --primary-color: #425390;
    --white-color: #FFFFFF;
    --black-color: #000000;
    /* button */
    --btn-primary-color: #0069E3;
    --btn-primary-hover-color: #0D7DFF;
    --box-shadow-primary-color: 0 0 0 0.2rem rgba(0, 105, 227, 0.25);
    --btn-remove-color: #E31010;
    --btn-remove-hover-color: #FF0019;
    --box-shadow-remove-color: 0 0 0 0.2rem rgba(227, 16, 16, 0.25);
    --btn-cancel-color: #94A8B7;
    --btn-cancel-hover-color: #B6C5D1;
    --box-shadow-cancel-color: 0 0 0 0.2rem rgba(148, 168, 183, 0.25);
    --btn-info-color: #17A2B8;
    --btn-info-hover-color: #1CBBD5;
    --box-shadow-info-color: 0 0 0 0.2rem rgba(23, 162, 184, 0.25);
    --btn-export-color: #009E47;
    --btn-export-hover-color: #0B6534;
    --box-shadow-export-color: 0 0 0 0.2rem rgba(0, 158, 71, 0.25);
    --btn-remains-color: #F4A423;
    --btn-remains-hover-color: #FF9D00;
    --box-shadow-remains-color: 0 0 0 0.2rem rgba(244, 164, 35, 0.25);
    --btn-text-color: #FFFFFF;
    --btn-radius: .25rem;
    --btn-font-weight: 500;
}

:root {
    --z-back: -10;
    --z-normal: 1;
    --z-tooltip: 10;
    --z-fixed: 100;
    --z-modal: 1000;
}

body {
    position: relative;
    margin: 0;
    padding: 0;
    font-family: var(--body-font) !important;
    background-color: var(--white-color);
}

*,
::before,
::after {
    box-sizing: border-box;
}
/*Open Button*/
/* "btn button-primary" use for buttons: Save, Add , Edit, Search, Confirm */
.button-primary {
    background-color: var(--btn-primary-color) !important;
    border-color: var(--btn-primary-color) !important;
    color: var(--btn-text-color) !important;
    border-radius: var(--btn-radius) !important;
    font-weight: var(--btn-font-weight) !important;
}

    .button-primary:hover {
        background-color: var(--btn-primary-hover-color) !important;
        border-color: var(--btn-primary-hover-color) !important;
    }

    .button-primary:focus {
        box-shadow: var(--box-shadow-primary-color) !important;
    }

    .button-primary:disabled {
        pointer-events: unset !important;
        cursor: not-allowed !important;
    }

/* "btn button-remove" use for buttons: Delete, Logout */
.button-remove {
    background-color: var(--btn-remove-color) !important;
    border-color: var(--btn-remove-color) !important;
    color: var(--btn-text-color) !important;
    border-radius: var(--btn-radius) !important;
    font-weight: var(--btn-font-weight) !important;
}

    .button-remove:hover {
        background-color: var(--btn-remove-hover-color) !important;
        border-color: var(--btn-remove-hover-color) !important;
    }

    .button-remove:focus {
        box-shadow: var(--box-shadow-remove-color) !important;
    }

/* "btn button-cancel" use for buttons:  Cancel, Reset, Clear, Back */
.button-cancel {
    background-color: var(--btn-cancel-color) !important;
    border-color: var(--btn-cancel-color) !important;
    color: var(--btn-text-color) !important;
    border-radius: var(--btn-radius) !important;
    font-weight: var(--btn-font-weight) !important;
}

    .button-cancel:hover {
        background-color: var(--btn-cancel-hover-color) !important;
        border-color: var(--btn-cancel-hover-color) !important;
    }

    .button-cancel:focus {
        box-shadow: var(--box-shadow-cancel-color) !important;
    }

/* "btn button-export" use for buttons:  Excel, Download */
.button-export {
    background-color: var(--btn-export-color) !important;
    border-color: var(--btn-export-color) !important;
    color: var(--btn-text-color) !important;
    border-radius: var(--btn-radius) !important;
    font-weight: var(--btn-font-weight) !important;
}

    .button-export:hover {
        background-color: var(--btn-export-hover-color) !important;
        border-color: var(--btn-export-hover-color) !important;
    }

    .button-export:focus {
        box-shadow: var(--box-shadow-export-color) !important;
    }

/* "btn button-info" use for buttons:  show information, show detail */
.button-info {
    background-color: var(--btn-info-color) !important;
    border-color: var(--btn-info-color) !important;
    color: var(--btn-text-color) !important;
    border-radius: var(--btn-radius) !important;
    font-weight: var(--btn-font-weight) !important;
}

    .button-info:hover {
        background-color: var(--btn-info-hover-color) !important;
        border-color: var(--btn-info-hover-color) !important;
    }

    .button-info:focus {
        box-shadow: var(--box-shadow-info-color) !important;
    }

/* "btn button-remains" use for remains buttons */
.button-remains {
    background-color: var(--btn-remains-color) !important;
    border-color: var(--btn-remains-color) !important;
    color: var(--btn-text-color) !important;
    border-radius: var(--btn-radius) !important;
    font-weight: var(--btn-font-weight) !important;
}

    .button-remains:hover {
        background-color: var(--btn-remains-hover-color) !important;
        border-color: var(--btn-remains-hover-color) !important;
    }

    .button-remains:focus {
        box-shadow: var(--box-shadow-remains-color) !important;
    }

    .button-remains:disabled {
        pointer-events: unset !important;
        cursor: not-allowed !important;
    }
/*Close Button*/

/* -----Area - Layout----- */
.areaSearch {
    background-color: white;
    padding: 0.25rem 1.25rem .75rem;
    border-radius: 0.5rem;
}

.area:not(:has(.dashboard)) {
    background-color: white;
    padding: 1.25rem;
    box-shadow: 0 2px 6px 0 rgba(67,89,113,.12);
    border-radius: 0.5rem;
}
    .area:hover:not(:has(.dashboard)),
    .areaSearch:hover {
        box-shadow: 0 .25rem 1rem rgba(161,172,184,.45);
    }

.searchToggle {
    padding-top: .25rem !important;
    padding-bottom: .25rem !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

#searchArea {
    display: none;
    padding: 1rem 0 0 1rem;
}

.areaSearch:not(:has(.content-search)) {
    display: none;
}
/* -----CLOSE Area - Layout----- */

/* Open BarScroll */
.bar_scroll {
    overflow-y: auto;
    &::-webkit-scrollbar

{
    width: 5px;
    height: 10px;
}

&::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 40px;
}

    &::-webkit-scrollbar-thumb:hover {
        background-color: #555;
    }

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

}
/* Close BarScroll */

/* Open Tui datepicker */
.tui-datepicker-input {
    position: absolute;
    z-index: 99;
    height: 32px!important;
    border-radius: 4px;
}
.tui-datepicker-input input:read-only {
    background-color: #fff;
}

.tui-date-picker {
    margin-top: 1px;
    margin-left: -1px;
}
.tui-ico-date {
    cursor: pointer;
}

/* Close Tui datepicker */
.is-invalid {
    border-color: #dc3545;
    background-image: url(/invalid.svg);
    background-repeat: no-repeat;
    background-position: right calc(.375em + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
    cursor:pointer;
}

.is-valid {
    border-color: #198754;
    background-image: url(/valid.svg);
    background-repeat: no-repeat;
    background-position: right calc(.375em + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
    cursor: pointer;
}

.cke_dialog {
    width: 50% !important;
}