/*side nav*/
.pagelayout{ padding: 26px 0 0 }
nav { min-height: 500px; position: relative; z-index: 998; width: 263px; min-width: 263px; display: table-cell;}
nav .card{ border-bottom: 1px solid }

@media (min-width: 1200px){
  nav .card{ margin-bottom: 14px; border-bottom: 0;  box-shadow: 0 2px 6px rgba(0,0,0,0.12);}
}
@media screen and ( max-width:1024px){
  nav { position: absolute; top: 15px; z-index: 999; box-shadow: 0 0 0 100em rgba(0, 0, 0, 0); transform: translate3d(-263px, 0, 0); transition: all 0.3s ease-in-out;}
  nav .smartphone-menu-trigger {width: 40px; cursor: pointer; height: 40px; position: absolute; left: 100%;}
  nav .smartphone-menu-trigger span { content: ''; width: 50%; height: 2px; border-radius: 10px; position: absolute; left: 50%; transform: translate3d(-50%, -50%, 0);}
  nav .smartphone-menu-trigger span:first-child { top: 35%;}
  nav .smartphone-menu-trigger span:first-child { top: 35%; }
  nav .smartphone-menu-trigger span:nth-child(2) { top: 48%; }
  nav .smartphone-menu-trigger span:last-child { top: 61%; }
  nav:focus .smartphone-menu-trigger span:nth-child(1) { top: 18px; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); background: #fff; }
  nav:focus .smartphone-menu-trigger span:nth-child(2) { opacity: 0; left: -60px; }
  nav:focus .smartphone-menu-trigger span:nth-child(3) { top: 18px; -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -o-transform: rotate(-135deg); transform: rotate(-135deg); background: #fff; }
  nav ul li { margin-left: -200px; }
  nav:focus ul li { margin-left: 0; }
  nav:focus .smartphone-menu-trigger span { left: 30%; }
  nav .smartphone-menu-trigger:after { transform: translate3d(-50%, -50%, 0); }
  nav:focus { transform: translate3d(0, 0, 0); box-shadow: 0 0 0 100em rgba(0, 0, 0, 0.8); }
  nav:focus .smartphone-menu-trigger { pointer-events: none; }
}
/*side nav - end*/

main {
  width: 100%;
}
mat-sidenav-container, .my-content {
  margin: 0;
  width: 100%;
  height: 100%;
}

mat-sidenav-layout {
  background: rgba(0, 0, 0, .03);
}
.sidenav {
  width: 300px;
}
.fill-remaining-space {
  flex: 1 1 auto;
}
