/* ===== Sidebar ===== */
 .sidebar{
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 250px;
    padding: 10px 14px;
    background: var(--sidebar-color);
    transition: var(--tran-05);
    z-index: 100;  
}


.sidebar.close{
    width: 88px;
}

/* ===== Reusable code - Here ===== */
.sidebar li{
    height: 50px;
    list-style: none;
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.sidebar header .image,
.sidebar .icon{
    min-width: 60px;
    border-radius: 6px;
}

.sidebar .icon{
    min-width: 60px;
    border-radius: 6px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}


.sidebar .sub-menu .icon{
    min-width: 40px;
}


.sidebar .text,
.sidebar .arrow,
ul.sub-menu li.nav-link a:before,
.sidebar .icon{
    color: var(--text-color);
    transition: var(--tran-03);
}

.sidebar .text{
    font-size: 17px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 1;
}
.sidebar.close .text{
    opacity: 0;
}
/* =========================== */

.sidebar header{
    position: relative;
}

.sidebar header .image-text{
    display: flex;
    align-items: center;
}
.sidebar header .logo-text{
    display: flex;
    flex-direction: column;
}
header .image-text .name {
    margin-top: 2px;
    font-size: 18px;
    font-weight: 600;
}

header .image-text .profession{
    font-size: 16px;
    margin-top: -2px;
    display: block;
}

.sidebar header .image{
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar header .image img{
    width: 40px;
    border-radius: 6px;
}

.sidebar header .toggle{
    position: absolute;
    top: 50%;
    left: -25px;
    transform: translateY(-50%) rotate(180deg);
    height: 25px;
    width: 25px;
    background-color: var(--primary-color);
    color: var(--sidebar-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    cursor: pointer;
    transition: var(--tran-05);
}

body.dark .sidebar header .toggle{
    color: var(--text-color);
}

.sidebar.close .toggle{
    transform: translateY(-50%) rotate(0deg);
}

.sidebar .menu{
    margin-top: 20px;
}

.sidebar li.search-box{
    border-radius: 6px;
    background-color: var(--primary-color-light);
    cursor: pointer;
    transition: var(--tran-05);
}

.sidebar li.search-box input{
    height: 100%;
    width: 100%;
    outline: none;
    border: none;
    background-color: var(--primary-color-light);
    color: var(--text-color);
    border-radius: 6px;
    font-size: 17px;
    font-weight: 500;
    transition: var(--tran-05);
}
.sidebar li a{
    list-style: none;
    height: 100%;
    background-color: transparent;
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
    border-radius: 6px;
    text-decoration: none;
    transition: var(--tran-03);
}

.sidebar li a:hover{
    background-color: var(--primary-color);
}

ul.sub-menu li.nav-link a {
    padding-right: 24px;
}

ul.sub-menu li.nav-link.blank a :before {
    content: '\FF0D';
    padding: 0px 11.5px;
}

.sidebar li a:hover .icon,
.sidebar li a:hover:before,
ul.sub-menu li.nav-link a:hover:before,
.sidebar li a:hover .text{
    color: var(--sidebar-color);
}

body.dark .sidebar li a:hover .icon,
body.dark .sidebar li a:hover .text{
    color: var(--text-color);
}

.sidebar .menu-bar{
    height: calc(100% - 55px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow-y: scroll;
    position: relative;
}
.menu-bar::-webkit-scrollbar{
    display: none;
}
.sidebar .menu-bar .bottom-content li{
    border-radius: 6px;
    background-color: var(--primary-color-light);
    position: relative;
    transition: var(--tran-05);
    cursor: pointer;
}

.sidebar .menu-bar .mode a:hover{
    background-color: var(--toggle-color);
}

.sidebar .menu-bar .mode a:hover .icon{
    color: var(--sidebar-color);
}

.sidebar .menu-bar .log-out a:hover{
    background-color: var(--red);
}

.menu-bar .mode .sun-moon{
    height: 50px;
    width: 60px;
    cursor: pointer;
}

.mode .sun-moon i{
    position: absolute;
}
.mode .sun-moon i.sun{
    opacity: 0;
}
body.dark .mode .sun-moon i.sun{
    opacity: 1;
}
body.dark .mode .sun-moon i.moon{
    opacity: 0;
}

.bottom-content{
    display: flex;
    justify-content: space-between;
    position: sticky;
    bottom: 0;
    background: var(--sidebar-color);
}

.sidebar.close ~ .menu-bar .bottom-content .toggle-switch{
    position: absolute;
    left: 0;
    height: 100%;
    min-width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
}
.toggle-switch .switch{
    position: relative;
    height: 22px;
    width: 40px;
    border-radius: 25px;
    background-color: var(--toggle-color);
    transition: var(--tran-05);
}

i.arrow{
    cursor:pointer;
}

.sidebar .menu-links li.showMenu i.arrow{
    transform: rotate(-180deg);
  }
  .sidebar.close .menu-links i.arrow{
    display: none;
  }

  .sidebar .menu-links li a{
    display: flex;
    align-items: center;
    text-decoration: none;
  }
  .sidebar .menu-links li a .link_name{
    font-size: 18px;
    font-weight: 400;
    color: #fff;
    transition: all 0.4s ease;
  }
  .sidebar.close .menu-links li a .link_name{
    opacity: 0;
    pointer-events: none;
  }
  .sidebar .menu-links li .sub-menu{
    padding: 6px 6px 14px 80px;
    margin-top: -10px;
    background: #1d1b31;
    display: none;
  }
  .sidebar .menu-links li + .sub-menu{
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    overflow: hidden;
    transition: opacity .8s, max-height .5s;
  }

  .sidebar .menu-links li.showMenu + .sub-menu{
    opacity: 100;
    visibility: visible;
    max-height: 20em;
    overflow: auto;
    transition: opacity .8s, max-height .5s;
  }

  .sidebar .menu-links li .sub-menu a{
    color: #fff;
    font-size: 15px;
    padding: 5px 0;
    white-space: nowrap;
    opacity: 0.6;
    transition: all 0.3s ease;
  }
  .sidebar .menu-links li .sub-menu a:hover{
    opacity: 1;
  }
  .sidebar.close .menu-links li .sub-menu{
    position: absolute;
    left: 100%;
    top: -10px;
    margin-top: 0;
    padding: 10px 20px;
    border-radius: 0 6px 6px 0;
    opacity: 0;
    display: block;
    pointer-events: none;
    transition: 0s;
  }
  .sidebar.close .menu-links li:hover .sub-menu{
    top: 0;
    opacity: 1;
    pointer-events: auto;
    transition: all 0.4s ease;
  }
  .sidebar .menu-links li .sub-menu .link_name{
    display: none;
  }
  .sidebar.close .menu-links li .sub-menu .link_name{
    font-size: 18px;
    opacity: 1;
    display: block;
  }
  .sidebar .menu-links li .sub-menu.blank{
    opacity: 1;
    pointer-events: auto;
    padding: 3px 20px 6px 16px;
    opacity: 0;
    pointer-events: none;
  }
  .sidebar .menu-links li:hover .sub-menu.blank{
    top: 50%;
    transform: translateY(-50%);
  }
  

.switch::before{
    content: '';
    position: absolute;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    background-color: var(--sidebar-color);
    transition: var(--tran-04);
}

body.dark .switch::before{
    right: 20px;
}

main{
    position: absolute;
    top: 0;
    top: 0;
    right: 250px;
    height: 100vh;
    width: calc(100% - 250px);
    background-color: var(--body-color);
    transition: var(--tran-05);
    padding: 40px;
}

main{
    font-size: 18px;
    font-weight: 500;
    color: var(--text-color);
}

main.without-nav{
    right: 0;
    width: calc(100%);
}

.sidebar.close ~ main{
    right: 90px;
    height: 100vh;
    width: calc(100% - 90px);
}

body.dark main{
    color: var(--text-color);
}

@media (max-width: 500px){
    .sidebar.close ~ main {
        right: 40px;
        height: 100vh;
        width: calc(100% - 40px);
        margin-left: 0;
        padding-left: 20px;
    }

    h1.header{
        font-size: 30px;
    }

    .sidebar{
        width: 95vw;
    }


    .sidebar header .image,
    .sidebar .icon{
        min-width: 32px;
    }


    .sidebar header .image img{
        width: 32px;
    }

    .sidebar.close{
        width: 60px;
    }

}