/* ------ buttons ----- */
/* ------ typography ----- */
.msk-dashboard--dashboard {
  height: 100vh;
  width: 100vw;
  /* ----------------------------------------------
  //  fixed Header
  // --------------------------------------------- */
  /* ----------------------------------------------
  //  Sidebar setup
  // --------------------------------------------- */
}
.msk-dashboard--dashboard.msk-dashboard--fixed-header {
  padding-top: 4rem;
}
.msk-dashboard--dashboard .msk-dashboard--content-with-sidebar {
  display: grid;
  grid-template-columns: 1fr;
  height: 100%;
  overflow: auto;
}
@media (width >= 1024px) {
  .msk-dashboard--dashboard .msk-dashboard--content-with-sidebar {
    grid-template-columns: auto 1fr;
  }
}
.msk-dashboard--dashboard .msk-dashboard--content-with-sidebar .msk-dashboard--content__side {
  overflow: auto;
}
.msk-dashboard--dashboard .msk-dashboard--content-with-sidebar .msk-dashboard--content__main {
  overflow: auto;
}
.msk-dashboard-layout {
  display: grid;
  grid-template-areas: "header header" "sidebar content";
  grid-template-rows: auto 1fr;
  grid-template-columns: auto 1fr;
  height: 100vh;
  width: 100vw;
  overflow: auto;
  position: relative;
}
.msk-dashboard-layout .msk-header {
  grid-area: header;
}
.msk-dashboard-layout--sidebar {
  position: absolute;
  left: 0;
  bottom: 0;
  top: 0;
  background-color: var(--msk-color-bg, #ffffff);
  overflow: auto;
  transition: all 0.3s ease-in-out;
  box-shadow: inset -2px 0 var(--msk-color-border-weak, #e5e0df);
  z-index: 999;
}
.msk-dashboard-layout--sidebar.msk-dashboard-sidebar--collapsed {
  overflow: hidden;
}
.msk-dashboard-layout--sidebar.msk-dashboard-sidebar--collapsed .msk-dashboard-sidebar--content {
  opacity: 0;
  pointer-events: none;
}
.msk-dashboard-layout--sidebar.msk-dashboard-sidebar--expanded .msk-dashboard-sidebar--content {
  opacity: 1;
  pointer-events: all;
}
@media (max-width: 767px) {
  .msk-dashboard-layout--sidebar.msk-dashboard-sidebar--expanded {
    width: 100vw !important;
  }
}
.msk-dashboard-layout--sidebar .msk-dashboard-sidebar--toggle-button {
  position: absolute;
  right: 2px;
  top: 0;
  z-index: 999;
}
.msk-dashboard-layout--sidebar .msk-dashboard-sidebar--content {
  transition: opacity 0.3s ease-in-out;
}
.msk-dashboard-layout--content {
  grid-area: content;
  padding: 0.5rem 0rem 0rem 1rem;
  box-sizing: border-box;
  overflow: auto;
}
.msk-dashboard-layout--sidebar-hidden {
  transition: all 0.3s ease-in-out;
  opacity: 0;
  pointer-events: none;
}
.msk-dashboard-layout--sidebar-container {
  position: relative;
}