#diagram,
#toolbox {
  margin: 20px 0;
  border-width: 2px;
  border-style: solid;
  border-color: black;
  height: 960px;
}

#toolbox {
  display: flex;
  padding: 10px;
  flex-flow: row wrap;
  align-content: flex-start;
}

@media print{@page {size: landscape}}

.control {
  border-color: black;
  border-radius: 10px;
  border-width: 2px;
  border-style: solid;
  width: 100px;
  text-align: center;
  cursor: move;
  height: fit-content;
  height: -moz-max-content;
  background-color: white;
}

#diagram .control {
  position: absolute;
}

.window {
  z-index: 20;
}

.jtk-connector {
  z-index: 4;
}

.jtk-endpoint {
  z-index: 5;
}

.jtk-overlay {
  z-index: 6;
}

.custom-menu {
  z-index: 1000;
  position: absolute;
  background-color: #c0c0c0;
  border: 1px solid black;
  padding: 0px;
}

#toolbox .control {
  margin: 10px 0px;
}

#instruction {
  margin: 20px 0px;
  border-width: 2px;
  /* border-style: solid;
  border-color: black; */
  height: 998px;
  width: 2000px;
  top: -19px;
}

#inst {
  height: 90vh;
}

.black_overlay {
  display: none;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 1001;
  -moz-opacity: 0.8;
  opacity: 0.8;
  filter: alpha(opacity=80);
}
.white_content {
  display: none;
  position: absolute;
  top: 10%;
  left: -148%;
  width: 137%;
  height: 70%;
  padding: 8px;
  border: 1px solid #808080;
  background-color: white;
  z-index: 1002;
  overflow: auto;
  box-shadow: 10px 11px 23px #212529;
}

table,
th,
td {
  border: 1px solid black;
}
#myTable {
  border: 1px solid black;
  width: 250px;
  height: 10%;
}

.no-pointer-events {
  pointer-events: none;
}

.slidecontainer {
  width: 100%;
}

.slider {
  appearance: none;
  width: 100%;
  height: 25px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: 0.2s;
  transition: opacity 0.2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #04aa6d;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #04aa6d;
  cursor: pointer;
}