/* Menus color variables*/
:root {
    --toolbar-bg-color:#f5f5f8;
    --header-bg-color:#435DA4;
    --menus-bg-color:#7e7e8f;
    --master-bg-color:#488d96;
    --user-bg-color:#faac28;
    --invoice-bg-color:#eb775e;
    --payment-bg-color:#27a687;
    --complaint-bg-color:#f81660;
    --customer-bg-color:#bf3a61;
    --accounting-bg-color:#4aaff8;
    --ovreport-bg-color:#e22d27;
    --shadow-bg-color:#1C6AB4;
}

/*--------->> Main Menus Dashboard <<---------*/
.b-color0{
    border-bottom: 3px solid var(--master-bg-color);
    border-left: 3px solid var(--master-bg-color);
    box-shadow:  -10px 3px 10px 1px var(--menus-bg-color);
}
.b-color1{
    border-bottom: 3px solid var(--user-bg-color);
    border-left: 3px solid var(--user-bg-color);
    box-shadow:  -10px 3px 10px 1px var(--menus-bg-color);
}
.b-color2{
    border-bottom: 3px solid var(--invoice-bg-color);
    border-left: 3px solid var(--invoice-bg-color); 
    box-shadow:  -10px 3px 10px 1px var(--menus-bg-color);
}
.b-color3{
    border-bottom: 3px solid var(--payment-bg-color);
    border-left: 3px solid var(--payment-bg-color);
    box-shadow:  -10px 3px 10px 1px var(--menus-bg-color);
}
.b-color4{
    border-bottom: 3px solid var(--complaint-bg-color);
    border-left: 3px solid var(--complaint-bg-color);
    box-shadow:  -10px 3px 10px 1px var(--menus-bg-color);
}
.b-color5{
    
    border-bottom: 3px solid var(--customer-bg-color);
    border-left: 3px solid var(--customer-bg-color);
    box-shadow:  -10px 3px 10px 1px var(--menus-bg-color);
}
.b-color6{
    
    border-bottom: 3px solid var(--accounting-bg-color);
    border-left: 3px solid var(--accounting-bg-color);
    box-shadow:  -10px 3px 10px 1px var(--menus-bg-color);
}
.b-color7{
    border-bottom: 3px solid var(--ovreport-bg-color);
    border-left: 3px solid var(--ovreport-bg-color);
    box-shadow:  -10px 3px 10px 1px var(--menus-bg-color);
}
.wrap:hover{
    box-shadow:  -10px 3px 10px 1px  #4aaff8;
}

/*---------->>>> Dashboard Menus List <<<<-------------*/

.d-list0{
    /*  border-bottom: 3px solid #4aaff8; */
    border-left: 5px solid var(--accounting-bg-color);
    box-shadow:  5px -3px 10px 1px var(--menus-bg-color);
}
.d-list1{
    /*  border-bottom: 3px solid #27a687; */
    border-left: 5px solid var(--payment-bg-color);
    box-shadow:  5px -3px 10px 1px var(--menus-bg-color);
}
.d-list2{
    /*  border-bottom: 3px solid #e22d27; */
    border-left: 5px solid var(--ovreport-bg-color);
    box-shadow:  5px -3px 10px 1px var(--menus-bg-color);
}
.d-list3{
    /*  border-bottom: 3px solid #faac28; */
    border-left: 5px solid var(--user-bg-color);
    box-shadow:  5px -3px 10px 1px var(--menus-bg-color);
}
.d-list4{
    /*  border-bottom: 3px solid #eb775e; */
    border-left: 5px solid var(--invoice-bg-color); 
    box-shadow:  5px -3px 10px 1px var(--menus-bg-color);
}
.d-list5{
    
    /*  border-bottom: 3px solid #bf3a61; */
    border-left: 5px solid var(--customer-bg-color);
    box-shadow:  5px -3px 10px 1px var(--menus-bg-color);
}
.d-list6{
    /* background-color: #488d96;
    border-bottom: 3px solid #488d96; */
    border-left: 5px solid var(--master-bg-color);
    box-shadow:  5px -3px 10px 1px var(--menus-bg-color);
}
.d-list7{
     /* border-bottom: 3px solid #bf3a61; */
    border-left: 5px solid var(--complaint-bg-color);
    box-shadow:  5px -3px 10px 1px var(--menus-bg-color);
}