:root {
  /* Vars */
  --header-font-size: 20px;

  /* Colors */
  --blue: #0984e3;
  --white: white;
  --midgray: #636e72;
  --darkgray: #2d3436;
  --red: red;
  --black: #000000;
}

html {
  overflow: hidden;
}

body {
  margin: 0;
}

#app {
  width: 100%;
  height: 100%;
}

#menu_base {
  position: absolute;
  width: 20%;
  position: absolute;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  background-color: var(--darkgray);
}

#menu_header {
  font-size: var(--menu-header-font-size);
  padding: 15px;
  text-align: center;
  color: white;
}

#menu_body {
  position: relative;
  margin: 1px;
  max-height: 500px;
  overflow-y: auto;
}

/* BUTTON CLASSES */
.menu_button {
  padding: 12px;
  text-align: center;
  background-color: var(--black);
  color: white;
  border-style: solid;
  border-width: 1px;
  border-color: var(--white);
  margin: 5px;
}

.menu_button_hovered {
  background-color: var(--white) !important;
  border-style: solid;
  border-width: 1px;
  border-color: var(--black);
  color: var(--black);
}

/* CHECKBOX CLASSES */
.menu_checkbox {
  padding: 12px;
  text-align: center;
  background-color: var(--black);
  color: white;
  border-style: solid;
  border-width: 1px;
  border-color: var(--white);
  margin: 5px;
}
.menu_checkbox_hovered {
  background-color: var(--white) !important;
  border-style: solid;
  border-width: 1px;
  border-color: var(--black);
  color: var(--black);
}
.menu_checkbox_icon {
  position: absolute;
  right: 25px;
  margin-top: -6px;
}

/* LIST CLASSES */
.menu_list_icon_left {
  position: absolute;
  left: 25px;
  margin-top: -6px;
}
.menu_list_icon_right {
  position: absolute;
  right: 25px;
  margin-top: -6px;
}

/* POSITION CLASSES */
.top-left {
  top: 5px;
  left: 5px;
}
.top-right {
  top: 5px;
  right: 5px;
}
.middle-left {
  top: 50%;
  left: 5px;
  transform: translateY(-50%);
}
.middle-right {
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
}
.bottom-left {
  bottom: 5px;
  left: 5px;
}
.bottom-right {
  bottom: 5px;
  right: 5px;
}