:root{
    --blue-color: #289adc;
    --cyan-color: #2eacc8;
    --grey-blue-color: #334962;
    --grey-color: #9ea4ac;
    --light-blue-color: #7b92ad;
    --light-grey-color: #f4f6fa;
    --white-color: #fff;
    --trans: all 300ms ease-in-out;
}
button{
    background-color: transparent;
    border: none;
    outline: none;
}

a{
    color: unset!important;
}



.bg-blue{background-color: var(--blue-color);}
.bg-grey{background-color: var(--grey-color);}
.bg-light-grey{background-color: var(--light-grey-color);}

.text-blue{color: var(--blue-color);}
.text-cyan{color: var(--cyan-color);}
.text-grey-blue{color: var(--grey-blue-color);}
.text-grey{color: var(--grey-color);}
.text-light-blue{color: var(--light-blue-color);}

.fs-8{font-size: 8px;}
.fs-12{font-size: 12px;}
.fs-13{font-size: 13px;}
.fs-14{font-size: 14px;}
.fs-15{font-size: 15px;}
.fs-18{font-size: 18px;}
.fs-20{font-size: 20px;}

.fw-2{font-weight: 200;}
.fw-3{font-weight: 300;}
.fw-4{font-weight: 400;}
.fw-5{font-weight: 500;}
.fw-6{font-weight: 600;}
.fw-7{font-weight: 700;}

/* letter spacing */
.ls-1{
    letter-spacing: 1px;
}


/* cirlce btn */
.btn-circle{
    width: 33px;
    height: 33px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 10px;
}
.badge{
    background-color: #dfeeff;
}

/* navigation  */
.navigation-overlay{
 top: 0;
    left: 0;
    width: 120%;
    height: 100%;
    z-index: 10;
    display: none;
    background-color: rgba(0, 0, 0, 0.4);
    
}

.navbar-open-btn{
    font-size: 23px;
    padding-top: 2px;
}
.navbar-logo img{
    width: 120px;
}
.navigation-bar{
    height: 80px;
    border-bottom: 1.5px solid rgba(158, 164, 172, 0.3);
}
.notification-btn{
    font-size: 19px;
}
.info-icon{
    width: 15px;
    height: 15px;
    border-radius: 50%;
    transition: var(--trans);
}


.navigation-sidebar{
    z-index: 999;
    position:fixed;
    left: 0;
    top: 0;
    width: 240px;
    height: 100%;
    box-shadow: . rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
    transform: translateX(-100%);
    transition: all 200ms ease-in-out;
    overflow-y:scroll;
   
    
}

/* js related */
.show-navigation-sidebar{
    transform: translateX(0)!important;
}
.navigation-sidebar::-webkit-scrollbar{
    width: 3.5px;
}
.navigation-sidebar::-webkit-scrollbar-track{
    background-color: transparent;
}
.navigation-sidebar::-webkit-scrollbar-thumb{
    border-radius: 6px;
    background-color: rgba(0, 0, 0, 0.19);
}
.navigation-sidebar .navbar-sb-head{
    border-bottom: 1.5px solid rgba(158, 164, 172, 0.3);
    padding: 8px 0;
}
.navigation-sidebar .navbar-sb-links{
    padding-left: 4px!important;
}
.navigation-sidebar .navbar-sb-link{
padding-left: 10px;
    padding: 10px;
}
.navigation-sidebar .navbar-sb-link *{
    transition: all 300ms ease-in-out;
}
.navigation-sidebar .navbar-sb-link:hover *{
    
  color: #15715a!important;
}
.navigation-sidebar .navbar-sb-text{
    letter-spacing: 0.6px;
}
.navbar-close-btn{
    font-size: 20px;
}


.overview-section{
    border: 2px solid rgba(158, 164, 172, 0.3);
    border-radius: 6px;
}
.overview-section-list a{
    color: unset;
}
.overview-section-item{
    background-color: var(--white-color);
    border-radius: 6px;
    margin: 5px 0; 
    min-height: 170px;
    border: 2px solid var(--blue-color);
    transition: var(--trans);
}
.overview-section-item:hover{
    background-color: var(--blue-color)!important;
}
.overview-section-item:hover *{
    color: var(--white-color)!important;
}
.overview-section-item:hover .info-icon{
    background-color: var(--white-color);
}
.overview-section-item:hover .info-icon i{
    color: var(--blue-color)!important;
}
.btn-outline-sm{
    font-family: inherit;
    background-color: transparent;
    border: 2px solid var(--blue-color);
    border-radius: 2px;
    padding: 4px;
    font-weight: 500;
    transition: var(--trans);
}
.btn-outline-sm:hover{
    background-color: var(--white-color);
    color: var(--blue-color)!important;
}
.overview-section-item:hover .btn-outline-sm{
    border-color: var(--white-color);
}