@keyframes fadeinnav {
     0% {
         opacity: 1;
     }


     100% {
         opacity: 0;
     }
 }

 a {
     text-decoration: none
 }

 .hide-icon {
     display: none;
 }

 .show-icopn .header {
     width: 100%;
     height: var(--header-height);
     position: fixed;
     top: 0;
     left: 0;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 0 1rem;
     z-index: var(--z-fixed);
     transition: var(--transition);
 }

 .header_toggle {
     color: var(--first-color);
     font-size: 2rem;
     cursor: pointer;
     position: absolute;
     margin-left: -55px;
     top: 14px;
     z-index: 99999;
 }

 .header_img {
     width: 35px;
     height: 35px;
     display: flex;
     justify-content: center;
     border-radius: 50%;
     overflow: hidden
 }

 .header_img img {
     width: 40px
 }

 .l-navbar {
     position: fixed;
     top: 0;
     left: -30%;
     width: var(--nav-width);
     height: 100%;
     background-color: #FFFFFF;
     padding: 0 0 0 0;
     transition: var(--transition);
     z-index: var(--z-fixed)
 }

 .nav {
     height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     overflow: hidden;
     background: #FFFFFF;
     margin: 20px 15px 20px 15px;
 }

 .nav-hide {
     animation: fadeinnav 1s;
 }

 .nav_logo,
 .nav_link {
     display: grid;
     grid-template-columns: max-content max-content;
     align-items: center;
     column-gap: 1rem;
     padding: .5rem 0 .5rem 1.5rem
 }

 .nav_logo {
     margin-bottom: 2rem
 }

 .nav_logo-icon {
     font-size: 1.25rem;
     color: var(--white-color)
 }

 .nav_logo-name {
     color: var(--white-color);
     font-weight: 700
 }

 .nav_link {
     position: relative;
     color: var(--first-color-light);
     margin-bottom: 1.5rem;
     transition: var(--transition);
 }

 .nav_link:hover {
     color: var(--white-color)
 }

 .nav_icon {
     font-size: 1.25rem
 }

 .enable-navbar {
     left: 0
 }

 .body-pd {
     padding-left: 1rem
 }

 .height-100 {
     height: 100vh
 }

 .body-pd>.header_toggle>.bx-x {
     padding-left: 15px;
 }

 .header_toggle>.bxs-chevrons-right {
     padding-left: 25px;
     background-color: white;
 }

 @media screen and (min-width: 1px) {
     body {
         margin: 1rem 0 0 0;
         padding-left: 2rem
     }

     .header {
         height: 1rem;
         padding: 0 2rem 0 2rem
     }

     .header_img {
         width: 40px;
         height: 40px
     }

     .header_img img {
         width: 45px
     }

     .l-navbar {
         left: 0;
         padding: 0 0 0 0;
     }

     .enable-navbar {
         width:  275px
     }

     .body-pd {
         padding-left: 275px
     }
 }