/* Define global color variables in :root */
:root {
    --color-primary: #05a565;
    /* Blue */
    --color-secondary: #8694a4;
    /* Gray */
    --color-success: #28a745;
    /* Green */
    --color-danger: #dc3545;
    /* Danger-light */
    --color-danger-light: #cd1d37;
    /* Red */
    --color-warning: #ff3e1d;
    /* Yellow */
    --color-info: #17a2b8;
    /* Teal */
    --color-light: #e8f9f2;
    /* Light */
    --color-dark: #566a7f;
    /* Dark */
    --color-white: #ffffff;
    /* White */
}

/* ============= ENGRO BACKGROUNDS COLOR ============== */
.engro-bg-primary {
    background: var(--color-primary);
}

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

.engro-bg-label-warning {
    background: var(--color-warning);
    color: var(--color-white);
}
.engro-bg-label-primary {
    background: var(--color-primary);
    color: var(--color-white);
}
.engro-bg-label-dark {
    background: var(--color-dark);
    color: var(--color-white);
}
/* ============= ENGRO TEXT COLORS ============== */
.engro-text-primary {
    color: var(--color-primary);
}
.engro-text-dark {
    color: var(--color-dark) !important;
}
.engro-text-warning {
    color: var(--color-warning);
}
.engro-text-secondary {
    color: var(--color-secondary);
}
.engro-text-danger {
    color: var(--color-danger);
}
.engro-text-danger-light {
    color: var(--color-danger-light);
}
.error-font-size {
    font-size: 85% !important;
}

/*
| =========================================== |
|        ENGRO SIDEBAR SETTING
| =========================================== |
*/
.bg-menu-theme .menu-inner > .menu-item.active:before {
    background: var(--color-primary) !important;
}
.bg-menu-theme .menu-inner > .menu-item.active > .menu-link {
    color: var(--color-primary) !important;
    background: var(--color-light) !important;
}
.bg-menu-theme
    .menu-sub
    > .menu-item.active
    > .menu-link:not(.menu-toggle):before {
    background-color: var(--color-primary) !important;
    border: 3px solid var(--color-white) !important;
}
.swal2-container.swal2-center.swal2-backdrop-show {
    z-index: 10000 !important;
}

/*
| =========================================== |
|        ENGRO OTHER COMPONENT STYLES
| =========================================== |
*/
/* =========== BUTTONS ============ */
.btn-engro-primary {
    background: var(--color-primary) !important;
    color: var(--color-white) !important;
}
.btn-engro-primary:hover {
    color: var(--color-white) !important;
    background: var(--color-primary) !important;
}
.btn-engro-dark {
    background: var(--color-dark) !important;
    color: white !important;
}

.btn-engro-dark:hover {
    background: var(--color-dark) !important;
    color: white !important;
}
.btn-engro-dark {
    background: var(--color-dark) !important;
    color: white !important;
}

/*
| ========================================== |
|      Customizing Radios and Checks & Inputs
| ========================================== |
*/
.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-primary.dropdown-toggle.show {
    color: #fff !important;
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}
.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-primary.dropdown-toggle.show {
    color: #fff !important;
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}
.btn-outline-primary {
    color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    background: transparent;
}
.btn-outline-primary:hover {
    color: #fff !important;
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    box-shadow: 0 0.125rem 0.25rem 0 #bff8e0 !important;
}

.form-check-input:checked {
    background-color: var(--color-primary);
    border-color: #bff8e0;
    box-shadow: 0 0.125rem 0.25rem 0 #bff8e0;
}

.input-group:focus-within .form-control,
.input-group:focus-within .input-group-text {
    border-color: var(--color-primary) !important;
}
.input-group:hover,
.input-group:hover .input-group .form-control,
.input-group:hover .input-group-text,
.input-group-text:hover,
.input-group-text:hover .input-group {
    border-color: var(--color-primary) !important;
}
/* ========================================================= */

.border-engro-primary {
    border: 1px solid var(--color-primary);
}

.engro-label {
    border: 1px solid #ced1d5 !important;
    color: #384551 !important;
    border-radius: 6px !important;
    padding: 0.5rem 1rem !important;
    width: 100%;
    font-size: 14px;
    background-color: #e9e9e9;
}
/* =========== SWAL FIRE BTN ============ */
.swal2-confirm {
    background-color: var(--color-primary) !important;
    color: white !important;
}
/* =========== VUE INITIAL DATA PREVENTION ============ */
[v-cloak] {
    display: none;
}

/* =========== FLAT PICKR DESIGN CUSTOMIZATION ============ */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange.endRange {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}
.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n + 1)),
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n + 1)) {
    box-shadow: -10px 0 0 #bff8e0;
}
/* =========== CHART DESIGN CUSTOMIZATION ============ */
/* .apexcharts-toolbar{
    top: -10px !important;
} */
.apexcharts-legend.apexcharts-align-center.apx-legend-position-bottom {
    inset: auto !important;
    top: -24px;
    z-index: 1000;
}

#apexchartsfix42pjt {
    height: 450px !important;
}

.admin {
    background-color: #cbcbcb;
    border-color: #cbcbcb;
    color: #566a7f;
    font-weight: 600;
}
.user {
    background-color: #ffe8c2;
    border-color: #ffe8c2;
    color: #566a7f;
    font-weight: 600;
}
.employee {
    background-color: #c7eef0;
    border-color: #c7eef0;
    color: #566a7f;
    font-weight: 600;
}
.contractor {
    background-color: #bff8e0;
    border-color: #bff8e0;
    color: #566a7f;
    font-weight: 600;
}
.visitor {
    background-color: #f8cdc5;
    border-color: #f8cdc5;
    color: #566a7f;
    font-weight: 600;
}
.muted {
    color: #a2a5ab;
}

.heading-dark {
    color: #535353;
}
.app-brand .layout-menu-toggle {
    background-color: var(--color-primary) !important;
}

/*
| =========================================== |
|        PHONE PLUGIN
| =========================================== |
*/
.iti.iti--allow-dropdown {
    width: 100% !important;
}
.iti--allow-dropdown input {
    padding-left: 50px !important;
}

/* =============== FORM ITEMS SETTING ================= */
.form-control:focus,
.form-select:focus {
    border-color: var(--color-primary) !important;
    outline-color: var(--color-primary) !important;
}
.form-control:hover:not([disabled]):not([focus]),
.form-select:hover:not([disabled]):not([focus]) {
    border-color: var(--color-primary) !important;
}

/*
| ================================================= |
|        PROFILE IMAGE OVERLAY
| ================================================= |
*/
.overlay {
    transition: 0.2s all;
}

.overlay i {
    transition: 0.4s all;
}

.profile:hover .overlay {
    display: flex !important;
}
/* =================================================== */

/* =============== SELECT AND PREVIEW IMAGE ================= */
.avatar-box {
    width: 4.6rem;
    height: 4.6rem;
    background-color: #f8f9fa;
    box-shadow: 0px 0px 5px 0px #d5dbdb;
    overflow: hidden;
}

.avatar-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-box input[type="file"] {
    display: none;
}

.action-box-shadow {
    box-shadow: 0px 1px 4px 0px #d5dbdb;
}
.action-box-w {
    max-width: 150px;
}