* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#dashboard-heading{
    display:none;
}

/* .site {
    display:grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto 1fr auto;
    gap:5px;
    font-size:1em;
} */

/* .site > * {
    grid-column: 1 / span 12;
}

.main{
    grid-area: main;
} */


.toggle-button-container {
    position:relative;
    height: 2em;
    background:var(--theme-color);

}

.toggle-button-container button {
    position:absolute;
    right: 0;
    z-index: 1;
}

/* hide left-sidebar closer button in small screen */
#xBtn {
    display: none;
}

.left-sidebar ul{
    position:relative;
    background-color: var(--theme-color);
    list-style: none;
    display:flex;
    flex-direction: row;
    align-items: center;
    white-space: nowrap;
    gap:1em;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0;
    margin: 0;
}

.right-sidebar ul {
    background-color: white;
    list-style: none;
}

.left-sidebar ul li {
   width: 100%;
   text-align: center;
}

.left-sidebar ul li a {
    display: block;
    text-align: center;
    text-decoration: none;
    color: #fff;
}




.left-sidebar, .right-sidebar{
    overflow-y: auto;
    scrollbar-width:none;
}

.left-sidebar:hover, .right-sidebar:hover{
    overflow-y: auto;
    scrollbar-width:thin;
}


/* responsive grid view's styling */

.toggle-button-container{
    display: none;
}


.site {
    display: grid;
    grid-template-areas: 
        'header'
        'rightsidebar'
        'leftsidebar'
        'main'
        'footer';
}

/* row 1 */
.top-header {
    grid-area: header;
}

/* row 2 */
.left-sidebar {
    grid-area: leftsidebar;
}

/* row 3 */
.right-sidebar {
    grid-area: rightsidebar;
}

/* row 4 */
.main {
    grid-area: main;
}

/* row 5 */
.foot {
    grid-area: footer;
}


.left-sidebar .linked-text {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease-in-out;
}



/* Media query for screens >= 576px */
@media (min-width: 576px) {
  .site {
    grid-template-columns: 1fr 3fr 1fr;
    gap:5px;
    grid-template-areas: 
      "header header header"
      "leftsidebar main rightsidebar"
      "footer footer footer";
      transition: all .5s ease-in-out;
    }

    .left-sidebar ul{
        flex-direction: column;
        overflow-y: auto;
        scrollbar-width:hidden; 
        margin: 0;
        padding: 0;
        height: 100%;
    }

    .left-sidebar ul li a {
        padding: 0;
        margin-left: 1em;
        text-align: left;
    }

    .toggle-button-container{
        display: block;
    }

    .toggle-button-container button {
        position:absolute;
        right: 0;
        z-index: 1;
    } 

    #dashboard-heading {
        display: block;
    }

    .left-sidebar, .right-sidebar, .main{
        height: 84vh;
        overflow-y: auto;
        scrollbar-width: thin;
    }

    .site.sidebar-shrunk {
    grid-template-columns: 3em 1fr 15em ; 
    grid-template-areas:
      "header header header"
      "leftsidebar main rightsidebar"
      "footer footer footer";

    }




}






/* @media (width >=768px){

    #dashboard-heading{
        display: block;
    }
  
    .top-header{
        grid-column: 1 / span 12;
        grid-row: 1;
    }

    .left-sidebar{
        grid-column: 1 / span 2 ;
        grid-row: 2;
        
    }

    .main {
        grid-column: 1 / span 10;
        grid-row: 3;
        flex:1;
    }

    .right-sidebar{
        grid-column: 11 / span 2;
        grid-row: 3;
        overflow-y: auto;
        scrollbar-width:thin
    }
    
} */

/* @media(width >=992px){

    .left-sidebar, .right-sidebar, .main{
        height: 84vh;
        overflow-y: auto;
        scrollbar-width: none;
    }

    .left-sidebar ul{
        flex-direction: column;
        width:100%;
        overflow-y: auto;
        scrollbar-width:thin; 
        margin: 0;
        padding: 0;
    }

    .left-sidebar ul li {
        width:100%;
        border:none;
        border-radius: 0;
    }


    .left-sidebar ul li a {
        padding: 0;
        margin-left: 1em;
        text-align: left;
    }

    .top-header{
        grid-column: 1 / span 12;
        grid-row: 1;
    }

    .left-sidebar{
        grid-column: 1 / span 2;
        grid-row: 2;
        background-color: var(--theme-color);
        overflow-y: auto;
    }



    .main{
        grid-column: 3 / span 8;
        grid-row: 2;
        overflow-y: auto;
        scrollbar-width: none;
        flex:1;
    }

    .right-sidebar{
        grid-column: 11 / span 2;
        grid-row: 2;
        overflow-y: auto;
        scrollbar-width: none;
    }

    .footer{
        grid-column: 1 / span 12;
        grid-row: 3;
    }
} */