body #devTool {
  font-family: 'LatoWeb';
  z-index: 10001;
  position: fixed;
  min-width: 200px;
  min-height: 200px;
  background-color: #001626;
  border: 1px solid black;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
}
body #devTool .dev-head {
  color: white;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  padding: 8px;
  -ms-flex-pack: justify;
      justify-content: space-between;
  border-bottom: 1px solid black;
  box-shadow: 0 0.5px 0 #fff;
}
body #devTool .dev-head h3 {
  margin: unset;
}
body #devTool .dev-body {
  -ms-flex: 1;
      flex: 1;
  padding: 8px;
}
body #devTool .dev-body .sel-div {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: justify;
      justify-content: space-between;
}
body #devTool .dev-body .viewbox,
body #devTool .dev-body .textbox {
  display: none;
  -ms-grid-columns: 80px auto;
      grid-template-columns: 80px auto;
  grid-gap: 16px;
  padding: 16px;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  background: -webkit-gradient(linear, 0 top, 0 bottom, from(#1a6d9077), to(#14506b70));
  border: 1px solid black;
  box-shadow: inset 0.2px 0.2px 0.4px 0.8px #6ad1ff;
  position: relative;
  margin: 5px;
}
body #devTool .dev-body .viewbox span,
body #devTool .dev-body .textbox span {
  color: white;
}
body #devTool .dev-body .viewbox input,
body #devTool .dev-body .textbox input {
  border: inset 0.5px #6ad1ff;
  box-shadow: inset 0.2px 0.2px 0.4px 0.8px #000;
}
body #devTool .dev-body .viewbox #steps,
body #devTool .dev-body .textbox #steps {
  color: white;
}
body #devTool .dev-body .viewbox #steps input:not(:first-child),
body #devTool .dev-body .textbox #steps input:not(:first-child) {
  margin-left: 12px;
}
body #devTool .dev-body .viewbox #steps label,
body #devTool .dev-body .textbox #steps label {
  font-weight: normal;
}
body #devTool .dev-body .viewbox #style,
body #devTool .dev-body .textbox #style {
  color: white;
  position: relative;
}
body #devTool .dev-body .viewbox #style input:not(:first-child),
body #devTool .dev-body .textbox #style input:not(:first-child) {
  margin-left: 12px;
}
body #devTool .dev-body .viewbox #style label,
body #devTool .dev-body .textbox #style label {
  font-weight: normal;
}
body #devTool .dev-body .viewbox hr,
body #devTool .dev-body .textbox hr {
  -ms-grid-column-span: 2;
  -ms-grid-column: 1;
      grid-column: 1 / span 2;
  margin: 8px 0px;
  border-color: #4493b8;
}
body #devTool .dev-body.viewbox .viewbox {
  display: -ms-grid;
  display: grid;
}
body #devTool .dev-body.textbox .textbox {
  display: -ms-grid;
  display: grid;
}
body .hovered {
  outline: 2px solid gold !important;
}
body .btn-select,
body .btn-copy {
  background: -webkit-gradient(linear, 0 top, 0 bottom, from(#1a6d9096), to(#14506b));
  border: 1px solid black;
  box-shadow: inset 0.2px 0.2px 0.4px 0.8px #6ad1ff;
  color: white;
  display: -ms-flexbox;
  display: flex;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
}
body .btn-select.active,
body .btn-copy.active {
  color: #ff7070;
}
body .btn-select svg,
body .btn-copy svg {
  width: 18px;
  height: 18px;
}
body .btn-select svg .lg-line,
body .btn-copy svg .lg-line {
  stroke: white;
}
body #lockDiv {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (max-content)[3];
      grid-template-columns: repeat(3, max-content);
  -ms-flex-align: center;
      align-items: center;
  grid-gap: 8px;
  /* Rounded sliders */
}
body #lockDiv .switch {
  position: relative;
  display: inline-block;
  margin: unset;
  width: 40px;
  height: 18px;
}
body #lockDiv .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
body #lockDiv .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
}
body #lockDiv .slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 0px;
  bottom: 0px;
  background-color: white;
  transition: 0.4s;
}
body #lockDiv input:checked + .slider {
  background-color: #2196F3;
}
body #lockDiv input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}
body #lockDiv input:checked + .slider:before {
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}
body #lockDiv .slider.round {
  border-radius: 34px;
}
body #lockDiv .slider.round:before {
  border-radius: 50%;
}
body #lockDiv svg {
  width: 18px;
  height: 18px;
}
body #lockDiv svg .lock-icon {
  fill: white;
}
body #v-ruler1,
body #v-ruler2 {
  z-index: 10000;
  position: fixed;
  height: 100%;
  width: 24px;
  top: 0;
  left: 10px;
  background: url(../img/generals/ruler-scale-v2.svg) repeat-y, lightyellow;
  background-size: 22px;
  border-radius: 2px;
  border: 1px solid #494949;
  margin: 0;
}
body #h-ruler1,
body #h-ruler2 {
  z-index: 10000;
  position: fixed;
  height: 24px;
  width: 100%;
  bottom: 10px;
  left: 0;
  background: url(../img/generals/ruler-scale2.svg) repeat-x, lightyellow;
  background-size: 32px;
  border-radius: 2px;
  border: 1px solid #494949;
  margin: 0;
}
body #h-ruler2 {
  bottom: 40px;
}
body #v-ruler2 {
  left: 40px;
}
body #devTool.hide {
  display: none;
}
body #devTool.hide ~ #v-ruler1,
body #devTool.hide ~ #v-ruler2,
body #devTool.hide ~ #h-ruler1,
body #devTool.hide ~ #h-ruler2 {
  display: none;
}