/* mobile layout specific style */

:root {
  --wm-mobile-layout-menu-min-height: 150px;
  --wm-mobile-layout-statusbar-height: 64px;
  --wm-mobile-layout-navigation-column-width: 300px;
  --wm-mobile-layout-menu-font-size: 24px;
  --wm-mobile-layout-statusbar-font-size: 24px;
  --wm-main-font: var(--wm-large-font);
  --wm-date-time-font: var(--wm-x-large-font);
}

.main-layout {
  height: 100%;
}

.menu-content-wrapper {
  display: flex;
  height: calc(100% - var(--wm-mobile-layout-statusbar-height));
  width: 100%;
}

.menu-content-wrapper.navigation-column-shifted .navigation-column {
  left: calc(0px - var(--wm-mobile-layout-navigation-column-width));
  margin-left: calc(0px - var(--wm-mobile-layout-navigation-column-width));
}

.wm-content-wrapper {
  width: 100%;
}

.wm-content {
  height: 100%;
  width: 100%;
}

.wm-statusbar {
  height: var(--wm-mobile-layout-statusbar-height);
  display: flex;
  padding-bottom: 2px;
  font-size: var(--wm-mobile-layout-statusbar-font-size);
}

.wm-logo, .statusbar-content, .login-logout {
  display: inline-block;
}

.statusbar-content {
  border-left: solid 1px lightgrey;
}

.wm-logo img {
  padding: 0 0 0 4px;
  margin: 0;
}

.date-time, .status-wrapper, .login-logout {
  padding-top: 0;
}

.login-logout {
  font-size: var(--wm-mobile-layout-statusbar-font-size);
  background-color: var(--wm-statusbar-color);
  position: fixed;
  right: 0;
  border-left: solid 1px lightgrey;
}

.login-logout .username {
  padding-left: 7px;
  display: block;
}

.navigation-column {
  display: grid;
  box-sizing: border-box;
  grid-template-columns: var(--wm-mobile-layout-navigation-column-width);
  grid-template-rows:
        [statusbar] auto
        [navigation] 1fr
        [widgets] auto
        [copyright] min-content;
}

.navigation {
  overflow: auto;
}

.menu-items {
  border-bottom: 2px solid var(--wm-border-color);
}

.menu-items div hr {
  margin: 1px 110px 1px 1px;
  height: 2px;
  background-color: var(--wm-border-color);
  border-style: none;
}

.menu-items div,
.menu-items td {
  font-size: var(--wm-mobile-layout-menu-font-size);
}

button.menu-toggle-button {
  margin: 0;
  border: 0;
  background-color: var(--wm-statusbar-color);
  color: darkgray;
  height: 100%;
  width: var(--wm-mobile-layout-statusbar-height);
  border-radius: 0;
  z-index: 100;
  font-size: 32px;
  padding-left: 15px;
  padding-right: 15px;
}

button.menu-toggle-button::before {
  content: '\00AB';
}

button.menu-toggle-button.navigation-column-shifted::before {
  content: '\00BB';
}

.vnavigation {
  height: 100%;
}