:root {
    --accent-color: #15474d; 
    --dark-primary: #988989;
    --sidebar-width-collapsed: 60px;
    --sidebar-width-expanded: 200px;
    --header-height: 70px;
}
body{
  /* background-color: rgb(109, 109, 109); */
    /* background-image: url('../../dynamic/bg.jpg');
  background-size: cover;      
  background-position: center; /* center the image */
  /* background-repeat: no-repeat;  */
background-color: #212121  ;

}

.left-sidebar {
    position: fixed;
    top: var(--header-height);
    left: 0;
    width: var(--sidebar-width-collapsed); 
    height: calc(100vh - var(--header-height)); 
    background-color: #212121 ;
    box-shadow: 2px 0 10px #333333;
    z-index: 900;
    padding-top: 10px;
    
    transition: width 0.3s ease-in-out;

    overflow-x: hidden; 
}

.left-sidebar:hover {
    width: var(--sidebar-width-expanded); 
}

.sidebar-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--dark-primary);
    padding: 15px 20px;
    margin-bottom: 5px;
    font-size: 1.1em;
    white-space: nowrap; 
    transition: background-color 0.2s, color 0.2s;
}

.sidebar-link:hover {
    background-color: #F0F0F0;
    color: var(--accent-color);
}

.sidebar-link.active {
    background-color: var(--accent-color);
    color: var(--dark-primary); 
    font-weight: 700;
    border-radius: 0 50px 50px 0; 
}

.sidebar-link i {
    width: 25px; 
    text-align: center;
    font-size: 1.3em;
    transition: color 0.2s;
}

.link-text {
    margin-left: 15px;
    opacity: 0; /* Hide the text initially */
    transition: opacity 0.3s ease-in-out;
}

.left-sidebar:hover .link-text {
    opacity: 1; 
}

.main-content-area {
    margin-left: var(--sidebar-width-collapsed); 
    padding: 20px;
    padding-top: 0;
    transition: margin-left 0.3s ease-in-out;
}

.left-sidebar:hover + .main-content-area {
    margin-left: var(--sidebar-width-expanded);
}

@media (max-width: 768px) {
#leftSidebar{
    display: none;
}
#leftSidebar.active {
    display: block
}
}