/* Topnav */
nav.topnav{
  position:fixed; top:0; left:0; width:100%; z-index:97;
  padding:0 5rem;
}
nav.topnav .topnav-wrapper{position:relative; display:flex; justify-content:space-between; height:5.5rem;}
nav.topnav .topnav-wrapper > .logo{position:relative; display:flex; align-items:center;}
nav.topnav .topnav-wrapper > .logo img{
  display:block; max-width:100%; width:auto; max-height:100%; height:2.75rem;
}
nav.topnav .topnav-wrapper > .menu-container{display:flex; padding:0 .25rem;}
nav.topnav .topnav-wrapper > .menu-container .menu{
  display:flex; align-items:center; padding:0 2rem; transition:color .25s;
  font-weight:500; transition:color .25s;
}
nav.topnav .options > .social-list .social-item{margin:.5rem .75rem;}
nav.topnav .options > .social-list .social-item img{
  display:block; max-width:100%; width:auto; max-height:100%; height:1.5rem;
}
nav.topnav .options > .social-list .social-item.line img{height:1.875rem;}
nav.topnav .options{display:flex; align-items:center;}
nav.topnav .sidenav-toggle{display:flex; align-items:center;}
nav.topnav .show-tablet{display:none;}
nav.topnav + .topnav-spacer{display:block; height:5.5rem; width:100%;}
@media screen and (max-width:1299.98px){
  nav.topnav{padding:0 5rem;}
}
@media screen and (max-width:1199.98px){
  nav.topnav{padding:0 3rem;}
}
@media screen and (max-width:1119.98px){
  nav.topnav{padding:0 4rem;}
  nav.topnav .hide-tablet{display:none!important;}
  nav.topnav .show-tablet{display:flex;}
}
@media screen and (max-width:767.98px){
  nav.topnav{padding:0 2rem;}
  nav.topnav .topnav-wrapper > .logo img{height:2.5rem;}
  nav.topnav + .topnav-spacer{height:5rem;}
}



/* Sidenav */
nav.sidenav{
  position:fixed; top:0; left:0; z-index:99; width:27rem; overflow:hidden;
  height:100vh; transform:translateX(-27rem); transition:transform .25s; -webkit-transition:transform .25s;
}
nav.sidenav.active{transform:translateX(0);}
nav.sidenav .wrapper{position:relative;}
nav.sidenav .sidenav-toggle{
  position:absolute; top:0; right:0; display:flex;
  justify-content:flex-end; padding:.75rem .25rem;
}
nav.sidenav .sidenav-toggle .hamburger{scale:.6;}
nav.sidenav:not(.active) .wrapper > .pattern{right:0;}
nav.sidenav .logo-container{
  position:relative; display:flex; align-items:center; padding:1.5rem 2rem 1.5rem 2rem;
  border-bottom:1px solid transparent;
}
nav.sidenav .menu-container > .menu{
  position:relative; transition:color .25s; font-size:1.25rem;
  cursor:pointer; display:block;
}
nav.sidenav .menu-container > .menu .text-shadow{
  position:absolute; top:-.75rem; left:.5625rem; opacity:.1;
}
nav.sidenav .logo-container > .logo img{
  display:block; max-width:100%; width:auto; max-height:100%; height:2.5rem;
}
nav.sidenav .text-container{width:calc(100% - 7rem); padding-left:1rem;}
nav.sidenav + .sidenav-filter{
  position:fixed; top:0; bottom:0; width:100vw; height:100vh; z-index:98;
  cursor:pointer; pointer-events:none; opacity:0; transition:opacity .45s;
}
nav.sidenav .menu-container{padding:.5rem 2rem;}
nav.sidenav .menu-container .menu{margin:1rem 0;}
nav.sidenav.active + .sidenav-filter{pointer-events:all; opacity:1;}

nav.sidenav .wrapper > .pattern{
  position:absolute; bottom:-.5rem; right:-2rem;
}
nav.sidenav .wrapper > .pattern img{
  display:block; max-width:100%; width:auto; max-height:100%; height:15rem;
  filter:brightness(200%) contrast(0%) saturate(100%) blur(0px) hue-rotate(0deg);
  opacity:.3;
}
@media screen and (max-width:991.98px){
  nav.sidenav .text-container{width:calc(100% - 5.875rem);}
}
@media screen and (max-width:490.98px){
  nav.sidenav{width:100vw; transform:translateX(-100vw);}
}
@media screen and (max-width:320.98px){
  nav.sidenav .logo-container{flex-direction:column;}
  nav.sidenav .text-container{width:100%; text-align:center; margin-top:.75rem;}
  nav.sidenav .menu-container > .menu{text-align:center;}
  nav.sidenav .menu-container > .menu .text-shadow{left:calc(50% - 2rem);}
}


/* Footer */
nav.footer{position:relative;}
nav.footer .pattern{
  position:absolute; top:0; right:0; left:0; bottom:0; z-index:2;
  height:100%; width:100%; pointer-events:none; opacity:.4;
}
nav.footer .footer-top{height:2.5rem;}
nav.footer .logo{display:flex; align-items:center;}
nav.footer .logo .wrapper{height:100%; display:flex; align-items:center;}

nav.footer .logo{position:relative; display:flex; align-items:center;}

  nav.footer .logo img {
    display: block;
    max-width: 100%;
    width: auto;
    max-height: 100%;
    height: 3.25rem;
}

nav.footer .menu{
  display:flex; align-items:center; opacity:.75; transition:opacity .25s, padding .25s;
  width:max-content; margin:.25rem;
}
nav.footer .menu:hover{opacity:1; padding-left:.3125rem;}
nav.footer .menu .icon{margin-right:.75rem; font-size:.75rem;}
nav.footer .menu a{position:relative;}
nav.footer .menu a:after{
  position:absolute; content:''; bottom:0; right:0; left:0;
  height:1px; background:#ffffff; transform-origin: right center;
  -webkit-transform-origin: right center; -webkit-transform:scale(0,1);
  transform:scale(0, 1); transition:transform .25s cubic-bezier(.37,.31,.2,.85);
  -webkit-transition:transform .25s cubic-bezier(.37,.31,.2,.85);
}
nav.footer .menu:hover a:after{
  transform:scale(1, 1); transform-origin:left center;
  -webkit-transform-origin:left center; -webkit-transform:scale(1,1);
}
nav.footer .copyright{text-align:center; padding:.9375rem; border-top:1px solid transparent;}
nav.footer .socials{display:flex; margin-top:1rem;}
nav.footer .socials .social{margin-right:.75rem;}
@media screen and (max-width:639.98px){
  nav.footer .footer-bottom{padding-bottom:1rem!important;}
}


/* Topnav Dashboard */
.topnav-dashboard{
  box-shadow:0px 4px 34px rgba(10, 75, 85, 0.05); border-bottom:1px solid #eff0f1;
}
.topnav-dashboard .wrapper{
  display: flex; justify-content:space-between; align-items:center;
  padding:.5rem 1rem;
}
.topnav-dashboard .logo-icon img {
  display:block; max-width:100%; max-width:100%;
  height:2.625rem; width:auto;
}
.topnav-dashboard .options{display:flex; align-items:center;}
.topnav-dashboard .option .icon{
  position:relative; width:2.5rem; height:2.5rem; display:flex; align-items:center;
  justify-content:center; border-radius:.3rem; margin:0 .5rem; cursor:pointer;
}
.topnav-dashboard .option .icon svg{
  display:block; max-width:100%; max-height:100%;
  width:auto; height:1rem;
}
.topnav-dashboard .option .icon.noti svg{
  animation: ring 4s 0.7s ease-in-out infinite;
}
.topnav-dashboard .option .icon .badge{
  position:absolute; top:0; top:-5px; right:-5px; justify-content:center;
  border-radius:50%; width:1.125rem; height:1.125rem; display:flex; align-items:center;
}
.topnav-dashboard .profile .avatar{
  position:relative; width:3rem; height:3rem;
}
.topnav-dashboard .profile .avatar .ss-img{border-radius:50%;}
.topnav-dashboard .profile .avatar-status{
  position:absolute; bottom:0rem; right:.5rem;
  z-index:3;
}
.topnav-dashboard .profile .avatar-status .avatar-online{
  position:relative; width:0.75rem; height:0.75rem; border-radius:50%;
  z-index:3; display:flex; justify-content:center; align-items:center;
  cursor:pointer;
}
.avatar-online:before{
  content:''; display:block; position:absolute;
  left:50%; top:50%;width:100%; height:100%;
  border-radius:50%; animation:avatarOnline 1.5s ease-out infinite;
}
.avatar-online:after {
  content:''; display:block; position:absolute;
  left:50%; top:50%; width:0.5rem; height:0.5rem;
  border-radius:50%; transform:translateX(-50%) translateY(-50%);
  transition:all .2s;
}

.topnav-dashboard .profile .text{
  padding-left:.875rem;
}
.topnav-dashboard .profile img{
  display:block; max-width:100%; max-height:100%; width:100%; height:100%;
}
@keyframes avatarOnline{
  0% {
    transform: translateX(-50%)translateY(-50%)translateZ(0)scale(1);
    opacity: 1;
  }
  100% {
    transform: translateX(-50%)translateY(-50%)translateZ(0)scale(1.5);
    opacity: 0;
  }
}

@keyframes ring{
  0% {
    transform: rotate(0);
  }
  1% {
      transform: rotate(30deg);
  }
  3% {
      transform: rotate(-28deg);
  }
  5% {
      transform: rotate(34deg);
  }
  7% {
      transform: rotate(-32deg);
  }
  9% {
      transform: rotate(30deg);
  }
  11% {
      transform: rotate(-28deg);
  }
  13% {
      transform: rotate(26deg);
  }
  15% {
      transform: rotate(-24deg);
  }
  17% {
      transform: rotate(22deg);
  }
  19% {
      transform: rotate(-20deg);
  }
  21% {
      transform: rotate(18deg);
  }
  23% {
      transform: rotate(-16deg);
  }
  25% {
      transform: rotate(14deg);
  }
  27% {
      transform: rotate(-12deg);
  }
  29% {
      transform: rotate(10deg);
  }
  31% {
      transform: rotate(-8deg);
  }
  33% {
      transform: rotate(6deg);
  }
  35% {
      transform: rotate(-4deg);
  }
  37% {
      transform: rotate(2deg);
  }
  39% {
      transform: rotate(-1deg);
  }
  41% {
      transform: rotate(1deg);
  }
  43% {
      transform: rotate(0);
  }
  100% {
      transform: rotate(0);
  }
}



/* Sidebar */
.sidebar{
  position:fixed; top:0; width:15.8125rem; height:100vh; transition:background .25s;
  box-shadow:0px 36px 35px rgba(0, 0, 0, 0.1); z-index:2;
}
.sidebar .menu-container{
  padding:1.5rem 1.5rem; border-bottom:1px dashed rgba(106, 113, 133, 0.3)
}
.sidebar .menu-container .menu:first-child{margin-top:0;}
.sidebar .menu-container .menu{
  display:block; padding:.5rem .9375rem; margin-top:.5rem; border-radius:.5rem;
  transition:background .25s;
}

.sidebar .menu-container .menu>.wrapper{
  display:flex; align-items:center;
}
.sidebar .menu-container .menu>.wrapper .icon svg{
  display:block; max-width:100%; max-height:100%; width:1rem; height:1rem;
}




.app-container > .wrapper{
  display:flex
}

.app-content{
  width:calc(100% - 15.8125rem); background-color:#f9fafc;
  height:100vh; margin:0 0 0 auto; padding:1rem;
}



/* Sidebar */
.sidebar-dashboard{
  width:15.8125rem; height:100vh; transition:background .25s;
  box-shadow:0px 36px 35px rgba(0, 0, 0, 0.1); z-index:2;
}
.sidebar-dashboard .menu-container{
  padding:1.5rem 1.5rem; border-bottom:1px dashed rgba(106, 113, 133, 0.3)
}
.sidebar-dashboard .menu-container .menu:first-child{margin-top:0;}
.sidebar-dashboard .menu-container .menu{
  display:block; padding:.5rem .9375rem; margin-top:.5rem; border-radius:.5rem;
  transition:background .25s;
}

.sidebar-dashboard .menu-container .menu>.wrapper{
  display:flex; align-items:center;
}
.sidebar-dashboard .menu-container .menu>.wrapper .icon svg{
  display:block; max-width:100%; max-height:100%; width:1rem; height:1rem;
}