body {
  margin: 0px;
  padding: 0px;
  height: var(--window_h);
  overflow: hidden;
  touch-action: none;
  width: 100%;
  opacity: 0;
}

#wrapper {
  width: 100%;
  height: 100%;
  grid-template-rows: auto 1fr;
}

.menu1,
.menu2 {
  grid-template-rows: calc(var(--unit) * 8);
  display: grid;
}

.menu1 {
  grid-template-columns: 1fr max-content 1fr calc(var(--unit) * 2) 1fr max-content 1fr max-content 1fr max-content 1fr;
  grid-column: span 1;
  padding-bottom: calc(var(--unit) * 4);
  background-color: rgb(102, 204, 204);
  z-index: 1;
}

.menu2 {
  grid-template-columns: 1fr max-content 1fr 1fr max-content 1fr calc(var(--unit) * 2) 1fr max-content 1fr max-content 1fr max-content 1fr;
}

.option {
  align-self: center;
  grid-row: 1 / span 1;
  cursor: pointer;
}

.bar {
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: auto;
  grid-row: 2 / span 1;
  grid-column: 1 / span 1;
  justify-self: center;
  overflow: hidden;
}

.bar_content {
  display: grid;
  grid-template-rows: auto 1fr;
  grid-row: 2 / span 1;
  grid-column: 1 / span 1;
  touch-action: pan-y;
  overflow-y: auto;
}

.grid {
  justify-self: center;
  grid-row: 2 / span 1;
  grid-column: 1 / span 1;
  display: grid;
}

.boxes> div {
  margin-top: calc(var(--unit) * 2);
}

.boxes> a {
  margin-top: calc(var(--unit) * 2);
}

.boxes {
  grid-row: 1 / span 1;
}

.slide1+div,
.slide2+div {
    z-index: 1;
}

.slide1 {
    position: relative;
    left: 100%;
    width: 0px;
    transition: width 600ms ease-in-out, left 600ms ease-in-out;
}

.slide2 {
    position: relative;
    width: 100%;
    transition: width 600ms ease-in-out;
}

.slide_open {
    transition: visibility 0ms, transform 600ms ease-in-out;
}
.slide_close {
    transition: transform 600ms ease-in-out, visibility 0ms 600ms;
}

.alert_container{
  height: 0px;
  display: grid;
  grid-template-columns: calc(var(--unit) * 4) calc(var(--unit) * 2) auto;
  grid-template-rows: calc(var(--unit) * 2) max-content calc(var(--unit) * 2) calc(var(--unit) * 2);
  overflow: hidden;
}

.loader_container {
  height: calc(var(--unit) * 2);
  padding: 0px;
  position: relative;
  overflow: hidden;
}

.loader_content {
  position: absolute;
  bottom: 0;
  top: 0;
  width: 50%;
  animation-duration: 1500ms;
  animation-iteration-count: infinite;
  animation-name: loader;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}

@keyframes loader {
  from {
      left: -50%;
  }
  to {
      left: 100%;
  }
}

.alert{
  grid-column: 3 /span 1;
  grid-row: 2 / span 1;
}

.alert_border_h{
  grid-column: 1 /span 1;
  grid-row: 2 /span 1;
}

.alert_border_w{
  grid-column: 1 /span 3;
  grid-row: 4 /span 1;
}

.blink1 {
  animation: blink_ani1 600ms ease-in-out infinite;
}