*{
  font-family: Helvetica, Arial, Sans;
  color: #fff;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,body{
  width: 100%;
  height: 100%;
  max-width: 100vw;
  max-height: 100vh;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

body{
  background-image: url(img/grid.png);
  background-color: #313131;
}



#overlay{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: solid #4a4a4a;
  border-width: 32px 0 0 32px;
}

#inputgroup-rays{
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  left: -24px;
}

#input-rayR{ border-color: #ff0000aa !important; }
#input-rayR:checked{ border-color: #ff0000 !important; }
#input-rayG{ border-color: #00ff00aa !important; }
#input-rayG:checked{ border-color: #00ff00 !important; }
#input-rayB{ border-color: #0000ffaa !important; }
#input-rayB:checked{ border-color: #0000ff !important; }

#opt-show-radius{ border-color: #aa00ff !important; }
#opt-show-focus{ border-color: #ff2200 !important; }
#opt-show-objpos{ border-color: #ff8800 !important; }
#opt-show-imgpos{ border-color: #00ffaa !important; }

#opt-show-lenCircles{ border-color: #00ffff !important; }
#opt-show-lenFocus{ border-color: #FF4000 !important; }
#opt-show-lenCenter{ border-color: #0060FF !important; }

#input-lang{
  position: absolute;
  top: -30px;
  left: -30px;
}

#inputgroup-lenradius{
  position: absolute;
  top: -24px;
  left: 0;
}
#inputgroup-lenradius input#input-lenradius-num{
  width: 80px;
}
#inputgroup-lenradius input#input-lenradius{
  width: 100%;
  margin-top: 4px;
}

#input-objectposy{
  height: 128px;
  position: absolute;
  top: 0;
  left: 0;
}

#input-objectposx{
  width: 300px;
  position: absolute;
  top: 0;
  left: 42px;
}

input[type="checkbox"]{
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  margin: 2px;
  border: 2px solid #717171;
  padding: 2px;
  width: 18px;
  height: 18px;
  position: relative;
  cursor: pointer;
}
input[type="checkbox"]:checked::after {
  font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f00c";
  font-size: 12px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

input[type=range]{
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  padding: 0;
  height: 8px;
  width: 175px;
  background: #3f3f3fdd;
}

input[type=range]::-webkit-slider-runnable-track, input[type=range]::-moz-range-track{
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}
input[type=range]::-webkit-slider-thumb, input[type=range]::-moz-range-thumb{
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 50%;
  border: 0;
  box-shadow: 0 0 2px gray;
}

input[type=range][orient=vertical]
{
    writing-mode: bt-lr; /* IE */
    -webkit-appearance: slider-vertical; /* WebKit */
    width: 8px;
    height: 175px;
}

#overlay-info{
  position: absolute;
  right: 0;
  top: -32px;
  height: 100%;
  text-align: right;
}
#overlay-info #info-toggler{
  display: inline-block;
  padding: 2px 8px;
  font-size: 24px;
  text-decoration: none;
}

#info{
  height: 100%;
  background-color: #313131;
  border: 2px solid #80808040;
  padding: 16px;
  text-align: left;
}

#info table#info-table {
  margin: 16px 0;
}

#info table th, #info table td{
  padding: 8px 16px;
}

#info .math{
  font-family: mono;
  min-width: 132px;
  padding-right: 1ex;
}
#info .math-sign{
  font-family: mono;
  text-align: right;
  padding-right: 0;
}
#info .unit{
  padding-left: 0;
}