#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;
    }

    .control {
      border-color: black;
      border-radius: 10px;
      border-width: 2px;
      border-style: solid;
      width: 90px;
      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 5px;
    }


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

    #inst {
      height: 70vh;

    }


    .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: .80;
      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: .2s;
      transition: opacity .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;
    }