/* :root {
    --color-primary: #d97706;
    --color-socondary: #f59e0b;
    --color-bga: rgba(217, 119, 6, 0.6);
} */

:root {
    --color-primary: #f99820;
    --color-socondary: #fbb54e;
    --color-bga: rgba(249, 152, 32, 0.6);
    --color-white: #ffffff;
    --color-excel: #097746;
    --color-pdf: #b51308;
}

.page-load {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgb(255, 255, 255);
    background-color: rgba(255, 255, 255, 0.836);
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
    transition: all .5s;  
}
.page-load img {
    width: 25%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    font-size: 1.5em;
    text-align: center;
}
.page-load h3 {
    width: 60%;
    height: 40%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    font-size: 1.5em;
    text-align: center;
    color: #000;
    font-weight: bold;
}



/* login */
.app-login .auth-background-holder {
    background: url("../images/background/taco.jpg") no-repeat center center;
    background-size: auto;
    background-size: cover;
    height: 100vh;
    min-height: 100%;
}

.app-btn-primary {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

.app-btn-primary:hover {
    background: var(--color-socondary);
    color: var(--color-white);
    border-color: var(--color-socondary);
}

.app-btn-light {
    background: var(--color-white);
    color: #09090b;
    border: 1.5px solid #e3e3e4;
}

.app-btn-light:hover {
    background: #fafafa;
}

.app-btn-danger {
    background: #dc2626;
    color: var(--color-white);
    border-color: #dc2626;
}

.app-btn-danger:hover {
    background: #ef4444;
    color: var(--color-white);
    border-color: #ef4444;
}

a.app-link:hover {
    color: var(--color-primary);
    text-decoration-color: rgba(240, 136, 18, 0.877);
}

.form-control {
    border-radius: 10px;
}

.form-control:focus {
    border-color: var(--color-primary);
    outline: 2;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px var(--color-bga);
}

.select2-container--bootstrap.select2-container--focus .select2-selection, .select2-container--bootstrap.select2-container--open .select2-selection {
    border-color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px var(--color-bga);
}

.select2-container--bootstrap .select2-results__option--highlighted[aria-selected] {
    background-color: var(--color-primary);
}
/* ---------------------------------------------------------------------- */
.header .toggle-sidebar-left {
    background: var(--color-primary);
}

.sidebar-left .sidebar-header .sidebar-toggle:hover i {
    color: var(--color-primary);
}

.nav-link:hover, .nav-link:focus {
    color: var(--color-primary);
}

ul.nav-main > li.nav-active > a {
    box-shadow: 2px 0 0 var(--color-primary) inset;
    color: var(--color-primary);
    background: #21262d;
}

ul.nav-main > li.nav-active > a:hover {
    color: var(--color-socondary);
}

ul.nav-main li .nav-children li.nav-active > a {
    color: var(--color-socondary);
}

html.no-overflowscrolling .nano > .nano-pane > .nano-slider {
    background: var(--color-primary);
}

.page-header h2 {
    border-bottom-color: var(--color-primary);
}

.userbox .dropdown-menu a:hover {
    background: var(--color-primary);
}

.page-header .sidebar-right-toggle:hover {
    color: var(--color-primary);
}

@media only screen and (min-width: 768px) {
    html.fixed .inner-wrapper {
        padding-top: 40px;
    }
}

.card, .card-body {
    border-radius: 10px;
}

.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus, .pagination .page-item.active .page-link {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary);
}

.pagination > li > a, .pagination > li > span, .pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus {
    color: var(--color-socondary);
}

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

a:hover {
    color: var(--color-socondary);
}

.app-bg-primary {
    border: 1px solid #2275fa;
    background-color: #dae7fd;
    color: #0445ad;
}

.app-bg-info {
    border: 1px solid #dae7fd;
    background-color: #eff6ff;
    color: #3b82f6;
}

.app-bg-success {
    border: 1px solid #daf4e2;
    background-color: #f0fdf4;
    color: #31ae5f;
}

.app-bg-danger {
    border: 1px solid #fbdddd;
    background-color: #fef2f2;
    color: #ef4444;
}

.app-bg-warning {
    border: 1px solid #fbeed3;
    background-color: #fffbeb;
    color: var(--color-primary);
}

.switch.switch-warning .ios-switch .on-background {
    background: var(--color-primary);
}

.modal-icon .fa, 
.modal-icon .fab, 
.modal-icon .fal, 
.modal-icon .far, 
.modal-icon .fas,
.modal-icon .fa-regular,
.modal-icon .fa-solid {
    font-size: 52px;
    position: relative;
    top: -10px;
    color: #CCC;
}

.modal-footer {
    border-top: 0px solid transparent;
}

.modal-header {
    border-bottom: 0px solid transparent;
    color: #000000;
}

label.link-primary {
    color: var(--color-primary);
    cursor: pointer;
}

label.link-primary:hover {
    color: var(--color-socondary);
}

.app-btn-excel {
    background: var(--color-excel);
    color: var(--color-white);
    border-color: var(--color-excel);
}

.app-btn-excel:hover {
    background: #0b9052;
    color: var(--color-white);
    border-color: var(--color-excel);
}

.app-btn-pdf {
    background: var(--color-pdf);
    color: var(--color-white);
    border-color: var(--color-pdf);
}

.app-btn-pdf:hover {
    background: #d11104;
    color: var(--color-white);
    border-color: var(--color-pdf);
}