:root {
  --side-nav-width: 0px;
}
.content-area{
  width: calc(100% - var(--side-nav-width));
  overflow: auto;
  margin-left: var(--side-nav-width);
  padding-top: 60px;
  /* background-color: #aaa; */
  overflow-x: hidden;
}

.content-area.container-fluid{
  padding-right: 0;
  padding-left: 0;
}


.mini .content-area{
  width: calc(100% - 80px);
  margin-left: 80px;
}

@media (max-width: 767.98px) {
  .mini .content-area,
  .content-area{
    width: calc(100%);
    margin-left: 0;
  }
  .side-nav {
    left: -300px;
  }
}
.show-side-nav .side-nav {
  left: 0px;
}


.side-nav {
  position: absolute;
  max-height: 100%;
  width: var(--side-nav-width);
  transition: width .25s ease;
  z-index: 15;
  border-right: 1px solid #f5f5f5;
  transition: .25s ease;
  background-color: #fff;
}
.mini .side-nav {
  width: 80px;
}

.topbar{
  position: fixed;
  z-index: 13;
  width: calc(100%);
  height: 60px;
  top: 0;
  left: 0;
  transition: .25s ease;
  padding-left: 0px;
  min-width: 375px;
  text-align: center;
}
.mini .topbar{
  padding-left: 110px;
}
@media (max-width: 767px) {
  .mini .topbar,
  .topbar{
    padding-left: 18px;
    padding-right: 15px;
  }
}	

.mini.side-nav-on .side-nav{
  width: var(--side-nav-width);
}

.side-nav-right{
  height: 100%;
  right: -1000px;
  left: auto !important;
  width: 400px;
}
.show-side-nav-right .side-nav-right{
  right: 0px;
  display: block !important;
}
.side-nav ul.side-nav-scrollbar-overlay{
  width: 100%;
  height:calc(100vh - 70px);
}