*{
    box-sizing: border-box !important;
    font-family: Barlow !important;
}
:root{
    --primary: rgba(113, 110, 240, 1);
    --purple : #625CC2;
    --orange : #FD9B3D;
    --heading-light : #44396D;
    --text-dark: #27272E;
    -text-body-light: #425466;
    /*--dark-blue: #010080;*/
    --body-font : Barlow;
}
.bg_purple_light{
    background: #E3E2F4 !important;
}
.bg_green_light{
    background: #CAECEC !important;
}
.sub_heading{
    color: var(--text-dark);
    font-family: Barlow;
    font-size: 28px;
    font-style: normal;
    font-weight: 700;
    line-height: 136.023%;
    letter-spacing: 5.6px;
}

.secondary_heading{
    color: #716EF0;
    font-family: Barlow;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 136.023%; /* 32.645px */
}
.holders_menu_link svg{
    fill: #351E99;
}
.bg-menu-theme .menu-inner > .menu-item.active > .menu-link{
    background-color: #351E99 !important;
}
.bg-menu-theme .menu-item.active > .menu-link{
color: #00B3A7;
}
.bg-menu-theme .menu-inner > .menu-item.active:before{
    display: none;
}
.menu-vertical .menu-inner > .menu-item .menu-link{
    margin: 0px 1rem;
}
#login_main{
    height: 100vh;
    background: #EBDCDC url("/assets/images/login_main.svg");
    background-repeat: no-repeat;
    background-size: 30%;
    background-position: 80% 100px;
    position: relative;
    overflow: hidden;
}
#login_main .lines_image{
    position: absolute;
    left: 0px;
    width: 500px;
    top: -50px;
}
#login_main .authentication-inner{
    transform: translateX(-85%);
    min-width: 400px;
}
#login_main .authentication-inner .card-body{
    background-color: #EBDCDC;
}
#login_main .authentication-inner input{
    background-color: #FFF;
}
#login_main .card{
    box-shadow: none;
}
#login_main .authentication-inner h1,
.brand_name{
    color: #44396D;
    font-family: Barlow;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 2.4px;
    margin: 0px;
}

/*________________________________Dashboard CSS_______________________________________*/
.switch-button {
    background: #EAE9EE;
    border-radius: 30px;
    overflow: hidden;
    width: 360px;
    height: 40px;
    text-align: center;
    font-family: Barlow;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    color: #1D1D21;
    position: relative;
    padding: 5px 160px 0px 10px;
}
.switch-button:before {
    content: "Summary";
    color: #1D1D21;
    font-family: Barlow;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 136.023%; /* 20.403px */
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 190px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    pointer-events: none;
}
.switch-button-checkbox {
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 2;
}
.switch-button-checkbox:checked + .switch-button-label:before {
    transform: translateX(170px);
    transition: transform 300ms linear;
}
.switch-button-checkbox + .switch-button-label {
    position: relative;
    display: flex;
    user-select: none;
    pointer-events: none;
    justify-content: center;
    align-items: center;
    height: 30px;
}
.switch-button-checkbox + .switch-button-label:before {
    content: "";
    background: #fff;
    height: 100%;
    width: 90%;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 30px;
    transform: translateX(0);
    transition: transform 300ms;
}
.switch-button-checkbox + .switch-button-label .switch-button-label-span {
    position: relative;
}
@media (max-width: 600px) {
    .switch-button {
        width: 200px;
        padding-right: 100px;
    }
    .switch-button:before{
        width: 100px;
    }
    .switch-button-checkbox:checked + .switch-button-label:before {
        transform: translateX(100px);
    }
    .layout-navbar.navbar-detached{
        min-height: 120px;
    }
}
#dash_stats_row_1 .card{
    transition: 300ms all ease;
}
#dash_stats_row_1 .card:hover{
    background-color: #fff !important;
}
#dash_stats_row_1 .card:hover *{
    color: #000;
}
#stats_row_2 .nav-pills .nav-link,
#stats_row_2 .form-check-label{
    color: rgba(0, 0, 0, 0.40);
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
}
#stats_row_2 .nav-pills .nav-link.active{
    color: #1C1C1C;
    background: transparent;
    box-shadow: none;
}
.nav_line{
    width: 1px;
    height: 20px;
    display: block;
    background: rgba(0, 0, 0, 0.20);
    margin: 8px 0px;
}

#stats_row_2 .stats_filter{
    position: relative;
}
#stats_row_2 .stats_filter:before{
    content: "";
    width: 8px;
    height: 8px;
    background: rgba(168, 197, 218, 1);
    position: absolute;
    top: 7px;
    left: -14px;
    display: block;
    z-index: 3;
    border-radius: 50%;
}
#stats_row_2 .form-check-input:checked + .stats_filter:before{
    background: #000;
}
#stock_limit_graph{
    background: var(--purple);
}
#stock_limit_graph *{
    color: #FFF;
    font-feature-settings: 'clig' off, 'liga' off;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.btn_purple{
    border-radius: 22px;
    background: #351E99;
    width: 263px;
    height: 44px;
    flex-shrink: 0;
    color: #FFF;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    transition: all 300ms ease;
    border: 1px solid #6F61CF;
}
.btn_purple:hover{
    background: #FD9B3D;
}
.btn_purple_rounded{
    border-radius: 20px;
    border: 1px solid #6F61CF;
    background: #351E99;
    width: fit-content;
    padding-right: 20px;
    padding-left: 20px;
}
.btn_purple_rounded:hover{
    background: #352c72;
    color: #FFF;
}
/*________________________________________________________________*/
.page_heading{
    color: #000;
    font-family: Barlow;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 32px; /* 160% */
    letter-spacing: -0.1px;
}
.emplyees_table thead{
    border-radius: 12px;
    /*background: #E3E2F4;*/
}
.emplyees_table *{
    color: #7A7A7A;
    font-family: Barlow;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
table td,
table th{
    height: 51.88px !important;
}
.form-control,
.form-select,
.select2-container .select2-selection--single{
    height: 48px;
}
#importEmployeeModal .modal-body{
    border-radius: 24px;
    border: 2px dashed #E2E6EA;
}

.report_date,
.report_date span{
    color: #3A4350;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: 0.96px;
    text-transform: uppercase;
}
.report_date span{
    color: #8B6AFF;
}

#report_table th,
#report_table td{
    padding: 20px;
    white-space: nowrap;
}

.action_buttons .btn_approve{
    border-radius: 20px;
    border: 1px solid #6F61CF;
    background: #625CC2;
    color: #FFF;
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
}
.action_buttons .btn_reject{
    border-radius: 20px;
    background: #D25454;
    color: #FFF;
    font-family: Barlow;
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
}
.select2-dropdown #select2-employee_name-results .select2-results__option[aria-disabled=true] {
    display: none;
}

.red_dot{
    width: 20px;
    height: 20px;
    background-color: #ef3e3e;
    display: inline-block;
    border-radius: 5px;
}


#layout-navbar{
    width: 100%;
    margin: 0px;
    border-radius: 0.375rem;
    padding: 1rem 2.5rem;
    background-color: transparent !important;
    backdrop-filter: unset;
}
#upper_nav{
    background: url("/assets/images/navbar_bg.png");
    background-size: cover;
    background-position: 0px -230px;
    background-repeat: no-repeat;
    width: 100%;
    margin: 0px;
    border-radius: 0.375rem;
    padding: 1rem 2.5rem;
}
.bg_pink_light{
    background-color: #EBDCDC !important;
}
#layout-menu{
    background: url("/assets/images/aside_bg.svg");
    background-size: cover;
}
.text_purple{
    color: #6C65FF !important;
}
.data_warning{
    display: none;
}