:root {
  /* Background Colors */
  --bg-main: #282828;
  --bg-secondary: #3b3b3b;
  --bg-dark: #4a4a4a;
  --bg-default: #ffffff;
  --bg-info: #d4d4d4;
  --bg-black: #000000;

  /* Font Colors */
  --font-color-main: white;
  --font-color-disable: gray;
  --font-color-select: #259fcf;
  --font-color-warning: #ead01f;
  --font-color-error: #ff0000;
  --font-color-dark: #4a4a4a;

  /* Font Sizes */
  --font-size-p: '12px';
}

/* Menus */
.top-options {
  position: sticky;
  font-size: 1.5vh;
  background-color: #383838;
  color: var(--font-color-main);
  height: 4vh;
  display: flex;
  align-items: center;
}

.top-options .disabled {
  color: var(--font-color-disable);
}

.top-options div {
  display: flex;
  align-items: center;
}

.nav-item {
  max-height: 2vh;
}

.toolbar {
  margin: 0vw !important;
  padding: 0vw !important;
  width: 2vw;
  height: 96vh;
  background-color: #383838;
}

.toolbar-icon {
  width: 100%;
  height: 100%;
  min-height: 2.1vw;
  max-height: 2.1vw;
  min-width: 2.1vw;
  max-width: 2.1vw;
  padding: 0.2vw 0.2vw;
  transition: 0.35s;
}

.toolbar-icon-active {
  width: 100%;
  height: 100%;
  min-height: 2.1vw;
  max-height: 2.1vw;
  min-width: 2.1vw;
  max-width: 2.1vw;
  transition: 0.35s;
  padding: 0.2vw 0.2vw;
  border-radius: 0.2vw;
  background-color: rgba(0, 162, 255, 0.507);
}

.toolbar-icon:hover {
  background-color: #acacac;
}

.popup-menu {
  background-color: rgba(0, 0, 0, 0.63);
  opacity: 1.0;
  color: white;
}

.controls-menu {
  background-color: rgba(0, 0, 0, 0.63);
  opacity: 1.0;
  color: white;
}

.cursor-size {
  margin: 0vh !important;
  padding: 0px !important;
  font-size: 1vh !important;
}

.cursor-size-input {
  height: 2vh !important;
  padding: 1.1vh 0.5vw !important;
}

.nav-link {
  padding: 1vh 1vw !important;
}

.dropdown-item label {
  justify-content: center;
  align-items: center;
}

.exercise-menu {
  min-width: 40vw;
  background-color: var(--bg-info);
  opacity: 0.9;
  color: white;
}



.offcanvas-header {
  background-color: var(--bg-secondary);
  color: white
}

.objective-selector {
  border-top-left-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
  ;
}

.accordion-button:not(.collapsed) {
  color: #fffefe;
  border-style: solid;
  border-color: #268491 !important;
  /* box-shadow: none; */
  background-color: #35b9ca;
}

.side-menu {
  min-width: 30vw;
  background-color: transparent;
  color: white;
}

.side-menu-body {
  background-color: #00000085;
  opacity: 0.75 !important;
}

.range-display {
  background-color: white;
  border-radius: 1vw;
  color: black;
  
}

/* Containers */

.horizontal-container {
  /* toolbar + game-container */
  overflow: hidden;
  overflow-y: hidden;
  display: flex;
  margin: 0px !important;
  padding: 0px !important;
}

.game-container {
  padding: 0px !important;
  margin: 0px !important;
  height: 96vh;
  display: flex;
  align-items: center;
  justify-content: center !important;
}

.tool-popup {
  min-width: 20vw;
  min-height: 10vh;
  padding: 1vh 0vw;
  background-color: #000000;
  color: white !important;
  border-radius: 0.5vw;
  font-size: 2vh;
}

.tool-popup .tool-title {
  font-weight: 600;
  font-size: 2vh;
}

.tool-popup .tool-desc {
  font-weight: 300;
  font-size: 1.5vh;
}

.tool-popup .controls {
  margin: 1vh;
  padding: 0vh 4vh;

}

.tool-popup li {
  font-size: 1.5vh;
  margin: 0.5vh 0px;
}


.mini-popup {
  position: absolute;
  left: 76vw;
  top: 88vh;
  min-width: 21vw;
  min-height: 10vh;
  padding: 1vh 0vw;
  background-color: #000000;
  color: white !important;
  border-radius: 0.5vw;
  font-size: 2vh;
}

.mini-popup .mini-title {
  font-weight: 600;
  font-size: 2vh;
}

.mini-popup .mini-desc {
  font-weight: 300;
  font-size: 1.5vh;
}

.tree-type-selector-container {
  padding: 0vh 1vw !important;
  border-style: solid;
  border-color: var(--bg-info);
  border-radius: 0.25vw;
  border-width: 0.15vw;
  background-color: var(--bg-default);
}

.tree-type-selector-container:hover {
  padding: 0vh 1vw !important;
  border-style: solid;
  border-color: var(--font-color-select);
  border-radius: 0.25vw;
  border-width: 0.15vw;
  background-color: var(--bg-default);
  border-style: solid;

}

.tree-type-selector-container img {
  max-width: 100%;
  max-height: 3vh;
  display: block;
}

.key-sequence-container {
  background-color: rgba(25, 31, 44, 0.185);
  
  padding: 0.5vh 0.5vw;
  border-radius: 0.5vh;
}

/* Components */

.custom-btn:hover {
  padding: 0px;
  margin: 0px;
  background: #555;
}

.custom-btn:active {
  background-color: rgba(70, 156, 182, 0.637);
}

.highlight-btn {
  background-color: #646161;
  padding: 0px;
  margin: 0.0vw;
}

.highlight-btn:hover {
  background-color: #eabb1f;
}


kbd {
  border: 0.15vw solid;
  font-size: 1.5vh;
  line-height: 0.75vh;
  display: inline-block;
  margin-right: 0.2vw;
  font-weight: 600;
  letter-spacing: .01vh;
  padding: 0.8vh 0.8vh;
  border-radius: 0.5vh;
  white-space: nowrap;
}

/* Overrides */
body {
  background-color: var(--bg-main) !important;
}

.active {
  color: var(--font-color-main) !important;
}

.offcanvas-backdrop {
    opacity:0.1 !important;
}

.dropdown-menu {
  width: 25vw;
  opacity: 0.75;
}

/* Spacing */

.top-left {
  min-width: 20vw;
  max-width: 20vw;
  min-height: 15vh;
  max-height: 15vh;
  position: absolute;
  left: 3vw;
  top: 6vh;
  opacity: 0.75;
  overflow-y: scroll;
}

.top-right {
  position: absolute;
  left: 78vw;
  top: 6vh;
}

/* Visibiliy */

.max-opacity {
  opacity: 1.0;
}

.opacity-75 {
  opacity: 0.75;
}

.min-opacity {
  opacity: 0.0;
}

/* Transition Timers */

.transition-25 {
  transition: 0.25s;
}

.transition-50 {
  transition: 0.50s;
}

.transition-75 {
  transition: 0.75s;
}

.transition-100 {
  transition: 0.75s;
}


/* Color Palette */

.bgMain {
  background-color: var(--bg-main) !important;
}

.bgSecondary {
  background-color: var(--bg-secondary) !important;
}

.bgDark {
  background-color: var(--bg-dark) !important;
}

.bgDefault {
  background-color: var(--bg-default) !important;
}

.bgInfo {
  background-color: var(--bg-info) !important;
}

.fontMain {
  color: var(--font-color-main) !important;
}

.fontDisable {
  color: var(--font-color-disable) !important;
}

.fontWarning {
  color: var(--font-color-warning) !important;
}

.fontError {
  color: var(--font-color-error) !important;
}

.fontDark {
  color: var(--font-color-dark) !important;
}