@import "commons";
@import "materializeConsts";

#tab-system-main {
  height: 100%;
  overflow: auto;
}
#tabs-system {
  overflow: hidden;
  height: calc(~"100% - "@admin-m-footer-height);
  .page {
    background: #f5f2f0;
    height: calc(~"100% - " @admin-m-footer-height ~" - 16px");
    padding-top: 1rem;
    padding-left: 1rem;
  }
  .acl-checkboxes {
    border-right: 1px solid black; border-left: 1px solid black; text-align: center
  }
  .acl-checkboxes-top {
    border-top: 1px solid black;
  }
  .acl-checkboxes-bottom {
    border-bottom: 1px solid black;
  }
  #diagSample {
    overflow: auto;
  }
  .map {
    height: 400px;
    overflow: hidden;
  }
}
#tab-system-certs {
  position: relative;
  #toast-container {
    bottom: 20%;
    left: 50%;
    top: initial;
    right: initial;
  }
}
#tab-system-diag {
  display: block;
  height: calc(~"100% - 40px");
  overflow-y: auto;
}

#diagSample {
  background: @admin-buttons-background;
  @media screen  {
    // medium and up = m
    @media (min-width : 601px) {
      //height: calc(~"100% - 4rem");
    }
    // large and up = l
    @media (min-width: 993px) {
      height: calc(~"100% - 6rem");
    }
    // small and down = s
    @media (max-width: 600px) {
      //height: calc(~"100% - 4rem");
    }
  }
}