* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
:root {
    --primaryColor : #1e90ff ;
    --primaryShade1 : #1873cc;
    --primaryShade2 : #125699;
    --primaryShade3 : #0c3a66;

    --secondaryColor : #DDFFDD;
    --secondaryShade1 : #b1ccb1;
    --secondaryShade2 : #859985;
    --secondaryShade3 : #586658;

    --backgroundSidebar : #11101d ;

}
header {
    height : 80px;
    width : auto ;
    background-color: #e7e7e8;
}

/*Sidebar Styless */

.sidebar {
    position : fixed ;
    /*Touch top of the screen */
    top : 0 ;
    /*Touch the left of the screen */
    left : 0;
    background : var(--backgroundSidebar) ;
    height: 100%;
    width : 250px ;
}

.sidebar .logo-details{
    height: 60px ;
    width : 100%;
    display : flex;
    align-items: center;
}
.sidebar .logo-details i {
    font-size: 30px ;
    color : white;
    /*background-color: crimson;*/
    height: 50px;
    min-width: 78px;
    text-align: center;
    line-height: 50px  ;
}
.sidebar .logo-details .logo_name {
    font-size: 22px ;
    color : white;
    font-weight: 600;
}

.sidebar .nav-links {
    /*background-color: red;*/
    height: 100%;
    padding-top : 30px;
}

.sidebar .nav-links li{
    position : relative ;
    list-style: none;
    transition: all 0.4s ease;
}
.sidebar .nav-links li:hover {
    background: #1d1b31;
}
.sidebar .nav-links li .icon-links {
    display : flex;
    align-items: center;
    justify-content: space-between;

}
.sidebar .nav-links li i {
    height: 50px;
    min-width: 78px;
    text-align: center;
    line-height: 50px ;
    color : #fff;
    font-size: 20px;
}

.sidebar .nav-links li a {
    display : flex;
    align-items: center;
    text-decoration: none;
}

.sidebar .nav-links li a .link_name {
    font-size: 18px;
    font-weight: 400;
    color : #fff ;
}

.sidebar .nav-links li .sub-menu {
    padding: 6px 6px 14px 80px;
    margin-top : -10px;
    background : #1d1b31;
    /*display : none;*/
}

.sidebar .nav-links li .sub-menu a {
    color : #fff;
    font-size: 15px;
    padding: 5px 0;
    white-space: nowrap;
    opacity: 0.7 ;
    transition: all 0.3s ease ;
}
.sidebar .nav-links li .sub-menu a:hover {
    opacity: 1;
}
.sidebar.close .nav-links li .sub-menu {
    position: absolute ;
    left : 100%;
    top : -10px;
    margin-top : 0;
    padding: 10px 20px ;
    border-radius: 0 6px 6px 0;
    transition: all 0.4s ease;
    opacity: 0;
    pointer-events: none;
}
.sidebar.close .nav-links li:hover .sub-menu {
    top : 0;
    opacity : 1;
    /*Responsible for responsive hover */
    pointer-events: auto;
}

.sidebar .nav-links li .sub-menu .link_name {
    /*display : none;*/
}
.sidebar.close .nav-links li .sub-menu.link_name {
    font-size: 18px;
    opacity: 1;
    display : block;
}

.sidebar.close .nav-links li .sub-menu.blank {
    opacity : 1;
    pointer-events: auto;
    padding : 3px 20px 6px 16px ;
}

.sidebar.close .nav-links li:hover .sub-menu.blank {
    top:50%;
    transform: translateY(-50%);
}