#pane {
  display: flex;
  height: 630px;
  text-align: center;
}

#left-sidebar {
  border-width: 1px 0px 1px 1px;
}

#right-sidebar {
  border-width: 1px 1px 1px 0px;
}

.sidebar {
  border-color: black;
  border-style: solid;
  width: 150px;
  background-color: grey;
  font-size: 300%;
  line-height: 50px;
  /* overflow-y: auto; */
}

#bonuses-header {
  text-decoration: underline
}

.bonus-display {
  padding: 5px 10px 5px 10px;
  text-align: left;
  font-size: 15px;
  line-height: 15px;
}

.tab {
  left: 9px;
  font-size: 16px;
  line-height: 20px;
  position: absolute;
  border-width: 1px 0px 1px 0px;
  border-color: black;
  border-style: solid;
  height: 40px;
  width: 150px;
  background-color: #737882;
  cursor: pointer;
}

.tab.selected {
  z-index: 2;
  border-width: 1px 1px 1px 0px;
  color: white;
  border-right-color: #43464b;
  background-color: #43464b;
}

#cost-totals-display {
  font-size: 16px;
  line-height: 20px;
  position: relative;
  top: 380px;
}

.clickable-div {
  position: absolute;
  height: 20px;
  width: 120px;
  padding: 2px;
  font-size: 18px;
  line-height: 21px;
  text-align: center;
  background-color: #737882;
  border: 1px solid black;
  border-radius: 5px;
  cursor: pointer;
}

.clickable-div:hover {
  color: white;
  background-color: #43464b;
}

#permalink-button {
  top: 485px;
  left: 22px;
}

#select-tree-button {
  top: 515px;
  left: 22px;
}

#reset-tree-button {
  top: 545px;
  left: 22px;
}

#reset-all-button {
  top: 575px;
  left: 22px;
}

#settings-button {
  top: 605px;
  left: 22px;
}

#deselect-detached-nodes-button {
  top: 350px;
  color: red;
  left: 22px;
}

.skill-tree {
  border: 1px solid black;
  position: relative;
  width: 500px;
  height: 628px;
  background-color: #43464b;
}

.graph-node {
  position: absolute;
  height: 52px;
  width: 52px;
  font-size: 10px;
  line-height: 10px;
  z-index: 1;
  cursor: pointer;
}

.hex-top {
  border-width: 2px 1px 0px 1px;
  border-style: solid;
  position: absolute;
  width: 43px;
  height: 36px;
  top: -9px;
  left: 4px;
  background-color: blue;
  z-index: 0;
  transform: perspective(55px) rotateX(45deg);
}

.hex-bottom {
  border-width: 0px 1px 2px 1px;
  border-style: solid;
  position: absolute;
  width: 43px;
  height: 36px;
  top: 26px;
  left: 4px;
  background-color: blue;
  z-index: 0;
  transform: perspective(55px) rotateX(-45deg);
}

.hex-text {
  position: absolute;
  width: 45px;
  height: 26px;
  top: 10px;
  left: 4px;
  z-index: 1;
  background-color: none;
}

.hex-value {
  position: relative;
  top: 43px;
}

.hex-component.attached {
  border-color: black;
}

.hex-component.detached {
  border-color: red;
}

.hex-component.selected {
  background-color: #00b5f5;
}

.hex-component.available {
  background-color: #00556d;
}

.hex-component.unavailable {
  background-color: grey;
}

.hex-component.locked {
  background-color: #00b5f5;
}

.hex-component.highlightedSelected {
  background-color: white;
}

.hex-component.highlightedNotSelected {
  background-color: white;
}

.hex-text.selected {
  color: black;
}

.hex-text.locked {
  color: white;
}

.hex-text.available {
  color: black;
}

.hex-text.unavailable {
  color: black;
}

.hex-text.highlightedSelected {
  color: #00b5f5;
}

.hex-text.highlightedNotSelected {
  color: black;
}

.node-connect-line {
  position: absolute;
  height: 2px;
  background: black;
  z-index: 0;
  transform-origin: 0 100%;
}

#modal-overlay {
  padding: 0px 5px 0px 5px;
  position: absolute;
  height: 678px;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 98;
}

#modal-window {
  position: absolute;
  color: white;
  background-color: black;
  width: 800px;
  position: relative;
  margin: 20% auto;
  z-index: 99;
  padding: 20px;
  border: 1px solid #888;
  border-radius: 15px;
}

#permalink-display {
  font-size: 20px;
  background-color: #43464b;
  border-radius: 5px;
  padding: 9px 6px 6px 6px;
  cursor: text;
}

#settings-overlay {
  padding: 0px 5px 0px 5px;
  position: absolute;
  height: 678px;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 98;
}

#modal-window1 {
  position: absolute;
  color: white;
  background-color: black;
  width: 400px;
  height: 130px;
  position: relative;
  margin: 20% auto;
  z-index: 99;
  padding: 20px;
  border: 1px solid #888;
  border-radius: 15px;
}

#settings-display {
  font-size: 20px;
  background-color: #43464b;
  border-radius: 5px;
  height: 115px;
  padding: 9px 6px 6px 6px;
  cursor: text;
}

.settings-clickable-div {
  position: absolute;
  left: 40px;
  height: 20px;
  width: auto;
  padding: 2px 10px 2px 10px;
  font-size: 18px;
  line-height: 21px;
  text-align: center;
  background-color: #737882;
  color: #030303;
  border: 1px solid black;
  border-radius: 5px;
  cursor: pointer;
}

.setttings-clickable-div:hover {
  color: white;
  background-color: #43464b;
}

#settings-selection-type-button {
  top: 60px;
}

#settings-show-bonus-mode-button {
  top: 90px;
}

#settings-show-tooltips-button {
  top: 120px;
}