*{
    font-family: "Poppins", sans-serif;
}
:root{
    --grey-font-color:rgb(235, 234, 234);
}
.search-bar{
background-color: var(--grey-font-color);
padding: 5px 10px;
border-radius:5px ;
border: 1px solid rgb(187, 187, 187);
}
.search-bar input:focus{
outline: none;
}
.search-bar input{
    border: none;
    background-color: transparent;
}
.dashboard-pills{
    display: flex;
    flex-direction: column !important;
}
.dashboard-links-btn{
    width: 100% !important;
    text-align: start;
    margin: 5px 0;
    color: black !important;
}
.main-wrapper{
    display: flex;
}
.left-bar{
    width: 300px;
    height: 100vh;
    padding: 10px 10px 0 0;
    border-right: 1px solid rgb(187, 187, 187);
    position: sticky;
    top: 60px;
    align-self: flex-start; /* important for flex layouts */
}
 
.main-content{
    width: 100vw;
    padding: 10px 0;
}

.dashboard-menu-item .dashboard-links-btn:hover{
    background-color: var(--grey-font-color);
}
.dashboard-menu-item .dashboard-links-btn.active{
    
background-color:var(--grey-font-color) !important;
}
.modal-backdrop.show {
    z-index: 0;
}
.apexcharts-toolbar{
    z-index: 0 !important;
}
.card-main-chart{
    width: 98%;
}
.modal-form{
    margin-top: 100px;
}
.calendar-card{
    width: 80%;
    height: 600px !important;
    margin: auto;
    overflow-y: scroll;
    position: fixed !important;
    top: 20%;
    left:10%;
    z-index: 10;
}
.card-toggle{
    animation: show cardToggle 1s linear;
}
@keyframes cardToggle {
    0%{
        display: none !important;
        transform: translateY(100%);
    }
    100%{
        display: block !important;
        transform: translateY(100%);
  }
}   
 .apexcharts-radialbar-slice-0:nth-child(1){
    stroke: red !important;
}
.apexcharts-datalabels-group .apexcharts-text{
    fill: black !important;
}
.font-homemade{
    font-family: "Homemade Apple", cursive !important;
}