.slider {
      -webkit-appearance: none;
      width: 100%;
      height: 15px;
      border-radius: 5px;
      outline: none;
      background: white;
      -webkit-transition: .2s;
      transition: opacity .2s;
    }

    .slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 25px;
      height: 25px;
      border-radius: 50%;
      background: #4CAF50;
      cursor: pointer;
    }

    .slider::-moz-range-thumb {
      width: 25px;
      height: 25px;
      border-radius: 50%;
      background: #4CAF50;
      cursor: pointer;
    }

    /* The Modal (background) */

    .modal {
      display: none;
      /* Hidden by default */
      position: fixed;
      /* Stay in place */
      /* Sit on top */
      padding-top: 60px;
      /* Location of the box */
      left: 0;
      top: 0;
      width: 100%;
      /* Full width */
      height: 100%;
      /* Full height */
      background-color: rgb(0, 0, 0);
      /* Fallback color */
      background-color: rgba(0, 0, 0, 0.4);
      /* Black w/ opacity */
    }

    /* Modal Content */

    .modal-content {
      width: 100%;
      max-height: calc(100% - 140px);
      overflow: scroll;
      background-color: black;
    }

    .modal-content-overall {
      position: relative;
      background-color: black;
      margin: auto;
      padding: 15px;
      border: 2px solid yellow;
      max-width: 80%;
      width: fit-content;
      max-height: calc(100% - 100px);
    }

    /* The Close Button */

    .close {
      padding-top: -25px;
      color: red;
      position: absolute;
      top: 8px;
      right: 16px;
      font-size: 18px;
      font-size: 28px;
      font-weight: bold;
    }

    .close:hover, .close:focus {
      color: white;
      text-decoration: none;
      cursor: pointer;
    }

    .select-css {
      display: block;
      font-weight: 700;
      color: #444;
      line-height: 1;
      padding: .6em 1.4em .5em .8em;
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
      margin: 0;
      border: 1px solid #aaa;
      box-shadow: 0 1px 0 1px rgba(0, 0, 0, .04);
      -moz-appearance: none;
      -webkit-appearance: none;
      appearance: none;
      background-color: #fff;
      background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'), linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);
      background-repeat: no-repeat, repeat;
      background-position: right .7em top 50%, 0 0;
      background-size: .65em auto, 100%;
    }

    .select-css::-ms-expand {
      display: none;
    }

    .select-css:hover {
      border-color: #888;
    }

    .select-css:focus {
      border-color: #aaa;
      box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
      box-shadow: 0 0 0 3px -moz-mac-focusring;
      color: #222;
      outline: none;
    }

    .select-css option {
      font-weight: normal;
    }

    .tablist li {
      display: block;
      padding: 0 1em;
      text-decoration: none;
      border: 0.06em solid white;
      border-bottom: 0;
      font: bold 0.88em/2em;
      color: white;
      cursor: pointer;
      /*background-color: black;*/
      /* CSS 3 elements */
      webkit-border-top-right-radius: 0.50em;
      -webkit-border-top-left-radius: 0.50em;
      -moz-border-radius-topright: 0.50em;
      -moz-border-radius-topleft: 0.50em;
      border-top-right-radius: 0.50em;
      border-top-left-radius: 0.50em;
      height: 20px;
    }

    .tablist li:hover {
      background-color: yellow;
      color: black;
      text-decoration: none;
      cursor: pointer;
    }

    html {
      height: calc(100% - 5);
      width: calc(100% - 3);
      overflow: hidden;
      font-family: monospace;
      background-color: black;
      color: white;
    }

    body {
      height: 100%;
      overflow: hidden;
      margin: 0px;
      display: flex;
    }

    .column {
      height: 100%;
      display: flex;
      flex-direction: column;
    }

    .column-right {
      height: 100%;
      display: flex;
      flex-direction: column;
      flex-grow: 1;
    }

    #left {
      flex-shrink: 0;
      background-color: black;
    }

    #right {
      background-color: #f3f3f3;
      flex-grow: 1;
    }

    .top-left {
      flex-shrink: 0;
      background-color: black;
      color: white;
      padding: 2px;
      height: 42px;
      border-bottom: 2px solid white;
    }

    .top-right {
      display: inline-flex;
      flex-shrink: 0;
      background-color: black;
      color: white;
      padding: 2px;
      height: 42px;
      border-bottom: 2px solid white;
    }

    .bottom {
      flex-grow: 1;
      padding: 10px;
      padding-top: 5px;
      width: 100%;
      background-color: black;
      color: white;
    }

    ul {
      display: inline-flex;
      list-style: none;
      margin: 0;
      padding-inline-start: 0px;
    }

    li {
      margin-right: 2px;
    }

    .alert-area {
      max-height: 100%;
      position: fixed;
      bottom: 5px;
      left: 20px;
      right: 20px;
    }

    .alert-box {
      font-size: 16px;
      color: white;
      background: rgba(0, 0, 0, 0.9);
      line-height: 1.3em;
      padding: 10px 15px;
      margin: 5px 10px;
      position: relative;
      border-radius: 5px;
      transition: opacity 0.5s ease-in;
    }

    .alert-box.hide {
      opacity: 0;
    }

    .alert-close {
      background: transparent;
      width: 12px;
      height: 12px;
      position: absolute;
      top: 15px;
      right: 15px;
    }

    .alert-close:before, .alert-close:after {
      content: '';
      width: 15px;
      border-top: solid 2px white;
      position: absolute;
      top: 5px;
      right: -1px;
      display: block;
    }

    .alert-close:before {
      transform: rotate(45deg);
    }

    .alert-close:after {
      transform: rotate(135deg);
    }

    .alert-close:hover:before, .alert-close:hover:after {
      border-top: solid 2px #d8d8d8;
    }

    @media (max-width: 767px) and (min-width: 481px) {
      .alert-area {
        left: 100px;
        right: 100px;
      }
    }

    @media (min-width: 768px) {
      .alert-area {
        width: 350px;
        left: auto;
        right: 0;
      }
    }

    /* ALERT RELATED CLASS (END) */

    .alert-message-container {
      text-align: center;
      line-height: 2.5em;
      margin-top: 50px;
    }

    .alert-message-box {
      font-size: 20px;
      width: 300px;
      border: solid 1px #444;
      padding: 10px 15px;
      outline: none;
      transition: box-shadow 0.1s;
    }

    .alert-message-box:focus {
      box-shadow: 0 0 15px 2px #888;
    }

    .alert-message-button {
      font-size: 18px;
      color: white;
      background: #14b9ff;
      width: 250px;
      border: solid 1px #14b9ff;
      padding: 10px 20px;
      margin-top: 5px;
      cursor: pointer;
      outline: none;
      transition: background 0.1s;
    }

    .alert-message-button:hover, .alert-message-button:focus, .alert-message-button:active {
      background: #7dd8ff;
    }

    .divSquare {
      width: 280px;
      height: 100px;
      margin: 4px;
      border: 1px solid black;
      float: left;
      border-radius: 15px;
      padding: 10px;
      overflow: hidden;
      background: black;
      box-shadow: inset 0px 0px 0px 2px white;
    }

    .divSquare:hover {
      box-shadow: inset 0px 0px 0px 6px yellow;
      cursor: pointer;
    }

    .circle {
      width: 70px;
      height: 70px;
      border: 5px solid orange;
      border-radius: 50px;
      text-align: center;
      line-height: 70px;
      float: right;
      top: 50%;
      transform: translateY(-100%);
    }

    .nav_item {
      font-size: 14px;
    }

    .nav_item i {
      padding-right: 4px;
    }

    .nav_item:hover {
      color: black;
      background-color: yellow;
      cursor: pointer;
    }

    button {
      background-color: #4CAF50;
      /* Green */
      border: black;
      color: white;
      padding: 5px 5px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      cursor: pointer;
    }

    .button {
      background-color: #4CAF50;
      /* Green */
      border: black;
      color: white;
      padding: 5px 5px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      cursor: pointer;
    }

    /*input,*/

    /*select,*/

    /*textarea {*/

    /*  outline: 0;*/

    /*  padding: 5px 12px;*/

    /*  color: white;*/

    /*  font-family: monospace;*/

    /*  text-shadow: 1px 1px #1f272b;*/

    /*  border: 1px solid #1c252b;*/

    /*  border-radius: 3px;*/

    /*  background: #232B30;*/

    /*  background: -webkit-gradient(linear, left top, left bottom, color-stop(3%, #8f969b), color-stop(4%, #4c6170), color-stop(100%, #8f969b));*/

    /* webkit */

    /*  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);*/

    /* Safari, Chrome */

    /*}*/

    /*select {*/

    /*  background-color: DodgerBlue;*/

    /*}*/

    .item-absolute {
      position: absolute;
      top: 50px;
      right: 10px;
      border: 2px solid black;
      padding: 0px;
      width: 320px;
      max-height: 450px;
      word-wrap: break-word;
      display: none;
      overflow: auto;
      background-color: #373d47;
    }

    .item-absolute-user-div {
      position: absolute;
      top: 50px;
      right: 0px;
      background: black;
      border: 2px solid white;
      padding: 13px;
      width: auto;
      text-align: left;
      max-height: 450px;
      word-wrap: break-word;
      display: none;
      overflow: auto;
      background-color: #373d47;
    }

    #dimScreen {
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      position: fixed;
      top: 0;
      left: 0;
      /* Just to keep it at the very top */
    }

    .centered {
      position: fixed;
      top: 50%;
      left: 50%;
      /* bring your own prefixes */
      transform: translate(-50%, -50%);
    }

    .bodyToolbarMobile {
      background-color: black;
      overflow-wrap: normal;
      width: calc(100% - 60px);
    }

    .lightModeDisabled {
      display: none;
    }

    .loginDiv {
      max-height: 400px;
      width: 350px;
      padding: 20px;
      border: 1px solid white;
      border-radius: 15px;
      background-color: black;
    }

    .mapHolderDiv {
      width: 45%;
      position: relative;
      float: left;
      border-radius: 15px 50px;
      border: solid 1px #14b9ff;
      margin: 5px;
      padding: 15px;
    }

    .partDetailsPageDivs {
      display: inline-block;
      vertical-align: top;
      outline: 1px solid white;
      Padding: 3px;
      Margin: 3px;
    }

    .imageColorOption {
      filter: invert(100%);
    }

    #canvas-container {
      width: 97%;
      height: calc(100% - 80px);
      border: 1px solid yellow;
    }

    .openSCAD-Render {
      width: 49%;
      height: calc(100% - 150px);
      border: 1px solid yellow;
      float: left;
    }

    select:focus, input:focus, textarea:focus, button:focus {
      background: red;
    }