/* Serobase Monitoring · sidebar footer/layout fix
   Keep the account controls separate from the navigation on shorter desktop
   viewports. The navigation becomes its own scroll area instead of sliding
   underneath the user box. */

@media (min-width:761px){
  .shell .sidebar{
    overflow:hidden;
  }

  .shell .sidebar > .brand,
  .shell .sidebar > .global-search,
  .shell .sidebar > .userbox,
  .shell .sidebar > .sidebar-bottom{
    flex:0 0 auto;
  }

  .shell .sidebar > .nav{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    padding-right:3px;
    padding-bottom:10px;
    scrollbar-width:thin;
    scrollbar-color:rgba(137,160,177,.38) transparent;
  }

  .shell .sidebar > .nav::-webkit-scrollbar{width:5px}
  .shell .sidebar > .nav::-webkit-scrollbar-track{background:transparent}
  .shell .sidebar > .nav::-webkit-scrollbar-thumb{
    background:rgba(137,160,177,.34);
    border-radius:999px;
  }

  .shell .sidebar > .userbox{
    margin-top:0;
    padding-top:10px;
    position:relative;
    z-index:2;
    background:linear-gradient(180deg,rgba(12,29,43,.02),rgba(12,29,43,.34) 24%,rgba(12,29,43,.58));
  }

  .shell .sidebar > .sidebar-bottom{
    position:relative;
    z-index:2;
    background:rgba(12,29,43,.58);
  }

  .shell .sidebar .useractions{
    flex-wrap:wrap;
  }
}

/* On especially short screens save a little vertical space without changing
   the menu structure or hiding any navigation entries. */
@media (min-width:761px) and (max-height:820px){
  .shell .brand{padding-bottom:12px}
  .shell .navgroup{margin-top:9px}
  .shell .nav a{min-height:34px;padding-top:6px;padding-bottom:6px}
  .shell .userbox{padding-top:8px}
  .shell .userrow{margin-bottom:6px}
  .shell .sidebar-bottom{padding-top:6px}
}