.fixed{
  position:sticky;
  top:0;
  z-index:1
}

.login-form {
  background: #ffffff;
  padding: 30px 30px 20px;
  border-radius: 2px; }

  .login-content {
  max-width: 510px;
  margin: 2vh auto; }

  aside.left-panel {
  background: #4e4e52;
  display: table-cell;
  height: 100vh;
  min-height: 100%;
  padding: 0px 0px;
  vertical-align: top;
  width: 200px;
  -webkit-transition:width 0.3s ease;
  transition: width 0.3s ease; }

  .right-panel {
  display: table-cell;
  padding-left: 0 !important;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease; }


/* boostrap off canvas css */

body.offcanvas-active{
  overflow:hidden;
}

.offcanvas-header{ display:none; }

.screen-overlay {
  width:0%;
  height: 100%;
  z-index: 30;
  position: fixed;
  top: 0;
  left: 0;
  opacity:0;
  visibility:hidden;
  background-color: rgba(34, 34, 34, 0.6);
  transition:opacity .2s linear, visibility .1s, width 1s ease-in;
   }
.screen-overlay.show {
    transition:opacity .5s ease, width 0s;
    opacity:0.5;
    width:100%;
    visibility:visible;
}
  
@media all and (max-width:992px) { 
  
  .offcanvas-header{ display:block; }

  .mobile-offcanvas{
    visibility: hidden;
    transform:translateX(-100%);
      border-radius:0; 
    display:block;
      position: fixed;
      top: 0; left:0;
      height: 100%;
      z-index: 1200;
      width:80%;
      overflow-y: scroll;
      overflow-x: hidden;
      transition: visibility .2s ease-in-out, transform .2s ease-in-out;
  }

  .mobile-offcanvas.show{
    visibility: visible;
      transform: translateX(0);
  }
}

/* boostrap off canvas css */