/* SIDE NAV BAR */
.sidenav {
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #4B1F3A;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 140px;
  display: block;
  z-index: 3;
  overflow-y: auto;
}

.sidenav, .nav-panel-toggle-button{
    width: 300px;
}

/* .sidenav-list.is-stuck {
  position: fixed;
  top: 15%;
  left: 0;
  width: 300px;  
  z-index: 9999;
} */

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  color: white;
  /* display: block; */
  transition: 0.3s;
  z-index: 3;
  position: static;
}

.sidenav a, .panel-button{
    font-size: 20px;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav-list{
    list-style-type: none;
}

.sidenav-list > li{
    /* border-top: 4px solid rgb(138, 73, 133); */
    margin-bottom: 4%;
    font-family: 'Epilogue';
}

.sidenav-list > li > .panel{
    /* display: block; */
    margin-left: 4%;
    background-color: rgb(94, 65, 91);
    border-left: 3px solid #2BBEC3;
    list-style: none;
}

.sidenav-list > li > .panel > li > a:hover, .nav-bar-chap-num:hover, .nav-bar-chap-name:hover{
    color: rgba(223, 213, 213, 0.652);
    transition-duration: 0.5s;
}

.panel > li > a{
    display: flex;
    font-size: 18px;
}

.section-active, .chapter-active{
    font-weight: bold;
}

.sidenav-list > li > a{
    display: flex;
}

.nav-bar-section-name{
    margin-right: 3%;
}

.nav-bar-chap-name{
    margin-right: 13%;
}

/* .nav-bar-chap-num{
    margin-right: 5%;
} */

.nav-bar-chap-num, .nav-bar-section-num{
    color: #C9B6C1;
    /* margin-right: 2%; */
    min-width: 30px;
}

/* .nav-bar-section-num{
    margin-right: 5%;
} */

.nav-bar-chap-name, .nav-bar-section-name{
    margin-left: 4%;
}

.closebtn-level{
    display: block;
    font-size: 30px;
    position: relative;
    margin-bottom: 10%;
}


.closebtn > a{
    float: right;
    /* color: aquamarine; */
    font-size: 30px;
    margin-right: 4%;
}

.nav-panel{
    background-color: rgb(77, 73, 90);
    color: #93588e;
    position:sticky;
    top: 0;
    z-index: 4;
    width: 100%;
    height: 40px;
    display: flex;
}

.nav-panel-toggle-button{
    /* background-color: #4b1f3a; */
    padding-top: 6px;
    /* border-bottom: 3px solid rgb(205, 193, 193); */
}

.nav-panel-toggle-button > a{
    margin-left: 25%;
}

.nav-panel-navigation-left{
    margin-left: 11%;
    margin-right: 5%;
}

.nav-panel-navigation-right{
    margin-left: 15%;
    margin-right: 5%;
}

.nav-panel-search-button{
    margin-left: 5%;
    padding-top: 5px;
}


.nav-panel-navigation-left, .nav-panel-navigation-right{
    margin-top: auto;
    margin-bottom: auto;
}

.nav-panel-toggle-button, .nav-panel-navigation-left, .nav-panel-navigation-right, .nav-panel-search-button, .nav-panel-print-button > button{
    font-size: 18px;
    font-family: 'Epilogue';
    color: plum;
    cursor: pointer;
}

.nav-panel-print-button {
    margin-left: 5%;
}

.nav-panel-print-button > button{
    background-color: transparent;
    border: none;
    padding-top: 10px;
    margin-right: 10%;
}

.panel-button, .panel-button-home{
    background-color: transparent;
    border: none;
    cursor: pointer;
    float: right;
    /* position: sticky; */
    top: 0;
}

.panel-button::before {
    content: "▾"; /* sideways arrow (closed) */
    font-size: 30px;
    font-weight: bold;
    position: static;
    /* right: 20%; */
    /* transform: translate(-30px,0px); */
    color: white;
}

.panel-button[aria-expanded="true"]::before {
    content: "◂";
}

#sideNavPanel{
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 300px;                 /* fixed width */
  transform: translateX(-100%); 
  transition: transform 0.3s ease;
  overflow-x: hidden;           
  will-change: transform;
}

#main{
  transition: margin-left 0.3s ease;
}

body.nav-open #sideNavPanel{
  transform: translateX(0);     /* slide in */
}

/* body.nav-open #main{
  margin-left: 300px;
} */

body.no-nav-transition #sideNavPanel,
body.no-nav-transition #sideNavOverlay {
  transition: none !important;
}

body.nav-ready #sideNavPanel {
  transition: transform 0.4s ease;
}

/* .sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
} */

@media screen and (max-width: 1200px){
.nav-panel-toggle-button{
   margin-left: 0%;
   margin-right: 4%;
}

.nav-panel-navigation-left{
    margin-left: 6%;
    margin-right: 10%;
}

.nav-panel-navigation-right{
    margin-left: 0%;
    margin-right: 0%;
}

.sidenav, .nav-panel-toggle-button{
    width: 25vw;
}

}


@media screen and (max-width: 1500px){
    .sidenav, .nav-panel-toggle-button, #sideNavPanel{
        width: 250px;
    }

    .sidenav a, .panel-button{
        font-size: 16px;
    }

    .panel > li > a{
    display: flex;
    font-size: 13px;
}
}

@media screen and (max-width: 800px){
    
    .nav-panel{
        flex-direction: column;
        width: 100%;
        height: unset;
        position:relative
    }
    
    
    .nav-panel > div{
        display: block;
        width: 100%;
        margin-left: 40%;
        margin-right: auto;
        margin-bottom: 1.7%;
    }

    .nav-panel-toggle-button, .nav-panel-navigation-left, .nav-panel-navigation-right, .nav-panel-search-button, .nav-panel-print-button > button{
    font-size: 14px;
    }

    .nav-panel-toggle-button{
        margin: unset
    }
    .nav-panel > div > a{
        margin-left: auto;
        text-align: center;
    }
    #sideNavPanel{
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        transform: translateX(-3000px);/* start hidden off-screen */
        transition: transform 0.3s ease;
        overflow-x: hidden;          
        will-change: transform;
    }
}