body {
 font-size: 3vmin;
 font-family: 'Roboto', Helvetica, sans-serif;
 background-color: #000;
 background-size: cover;
 background-repeat: no-repeat;
}

a {
 color: #77f;
 cursor: pointer;
}

div.modal_container {
 position: fixed;
 height: 100%;
 width: 100%;
 left: 0;
 top: 0;
 z-index: 10;
}

div.main_panel {
 position: fixed;
 width: 85%;
 height: 100%;
 right: 0;
 top: 0;
}

div.main_panel #map, .map_canvas {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 2;
}

div.hidden {
 visibility: hidden;
}

form input {
 font-size: 2vw;
 width: 35vw;
 border-radius: 1vw;
 margin: 0.4vw;
}

h1 {
 font-size: 3vw;
 margin: 0.5vw 2vmin;
 text-align: center;
}

h2 {
 font-size: 3.5vmin;
 margin: 0.4vmin 2vmin;
 text-align: center;
}

h3 {
 font-size: 3vmin;
 margin: 0.4vmin 2vmin;
 text-align: center;
}

select,input,textarea {
 font-size: 2vmin;
 border-radius: 1.2vmin;
 padding: 0 0.4vmin;
 resize: none;
}

input[type="checkbox"] {
 width: 1.5vmin;
 height: 1.5vmin;
}

input.good, select.good option:checked {
 background: #7F7;
}

input.bad, select.bad, option.bad {
 background: #F77;
}

div.modal_win:not(#map_win) {
 position: absolute;
 z-index: 1;
 overflow: auto;
 left: 0;
 right: 0;
 top: 0;
 bottom: 0;
 width: fit-content;
 height: fit-content;
 max-width: 95%;
 max-height: 95%;
 margin: auto;
 background: linear-gradient(rgba(50,50,150,0.9), rgba(30,30,90,0.85));
 border-radius: 1.5vmin;
 color: #fff;
 box-shadow: 0.2vmin 0.4vmin 0.6vmin #222, 0 0 2vmin 0.7vmin #ddd;
 transition: all 0.2s ease-in-out;
 user-select: none;
 user-drag: none;
 -webkit-user-drag: none;
}

div.modal_win#map_win {
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
}

div.info_win {
 position: absolute;
 left: 1%;
 top: 0;
 bottom: 0;
 overflow: auto;
 width: fit-content;
 height: fit-content;
 max_width: 40%;
 margin: auto 0;
 background: linear-gradient(rgba(50,50,150,0.9), rgba(30,30,90,0.85));
 border-radius: 1.5vmin;
 color: #fff;
 box-shadow: 0.2vmin 0.4vmin 0.6vmin #222, 0 0 2vmin 0.7vmin #ddd;
 cursor: pointer;
 z-index: 5;
}

div.filter_win {
 position: absolute;
 left: 1%;
 top: 5%;
 overflow: auto;
 width: fit-content;
 height: fit-content;
 margin: auto 0;
 background: linear-gradient(rgba(50,50,150,0.9), rgba(30,30,90,0.85));
 border-radius: 1.5vmin;
 color: #fff;
 box-shadow: 0.2vmin 0.4vmin 0.6vmin #222, 0 0 2vmin 0.7vmin #ddd;
 cursor: pointer;
 z-index: 6;
}

div.modal_win.hidden {
 transform: scale(0);
}

div.modal_win.success:not(#map_win) {
 box-shadow: 0.3vmin 0.6vmin 1vmin #222, 0 0 4vmin 1vmin #0d0;
}

div.modal_win.failure:not(#map_win) {
 box-shadow: 0.3vmin 0.6vmin 1vmin #222, 0 0 4vmin 1vmin #d00;
}

div.modal_win td, div.modal_win th {
 padding: 0.2vmin 0.7vmin;
}

div.modal_win td:first-child {
 text-align: right;
}

div.modal_win select {
 max-width: 15vw;
}

div.modal_win option, div.modal_win select[multiple] {
 max-width: 20vw;
}

div.modal_win span {
 margin: 0.2vmin 1vmin;
}

div.modal_win span.close {
 font-size: 2.5vmin;
 position: absolute;
 top: 0.1vmin;
 right: 0.1vmin;
 cursor: pointer;
 x-index: 1;
 border-radius: 1vmin;
 background: rgba(0, 0, 0, 0.2);
}

button {
 font-size: 3vmin;
 font-weight: bold;
 font-family: 'Roboto', Helvetica, sans-serif;
 text-decoration: none;
 border-radius: 2vmin;
 background: rgba(0,170,0,0.8);
 background: radial-gradient(rgba(0,100,0,0.8), rgba(0,200,0,0.6));
 border: 1px solid rgba(0, 80, 0, 0.8);
 cursor: pointer;
 margin: 0.4vmin;
 padding: 0.7vmin 1.3vmin;
 color: #EDE;
 outline: none;
 user-select: none;
 transition: all 0.3s ease-in-out;
}

button.invalid, button.invalid:hover {
 border: 1px solid rgba(0, 80, 0, 0.4);
 background: radial-gradient(rgba(0,100,0,0.6), rgba(0,200,0,0.4));
 color: #DBD;
 cursor: not-allowed;
}

button:hover {
 background: radial-gradient(rgba(0,100,0,0.9), rgba(0,200,0,0.8));
 border: 1px solid rgba(0, 32, 0, 1.0);
 color: #FFF;
}

span.invalid, td.invalid {
 opacity: 0.7;
 cursor: not-allowed;
}

div.cover {
 position: fixed;
 width: 100%;
 height: 100%;
 display: block;
 background: rgba(0,0,0,0.5);
 top: 0;
 left: 0;
 z-index: 0;
}

div.SignMarker {
 position: absolute;
 font-size: 0.7vw;
 opacity: 0.7;
 display: inline-block;
 cursor: pointer;
 border-radius: 0 1vmin 1vmin 1vmin;
 max-width: 8vw;
 max-height: 2vw;
 overflow: hidden;
 transform-origin: left top;
}

div.SignMarker.long {
 font-size: 0.5vw;
}

div.SignMarker.ontop {
 border-radius: 1vmin 1vmin 1vmin 0;
 transform-origin: left bottom;
}

div.SignMarker.pulse {
 animation: 0.5s pulsate infinite ease-in-out;
}

div.SignMarker:hover, div.SignMarker.dohover {
 opacity: 1;
 font-weight: bold;
 font-size: 1.1vw;
 transform: scale(1.1);
 z-index: 100;
 max-width: 20vw;
 max-height: 22vh;
}

div.SignMarker.long:hover, div.SignMarker.long.dohover {
 font-size: 0.9vw;
}

div.SignMarker span {
 padding: 0.4vmin;
}

div.SignMarker span.onhover {
 display: none;
 visibility: hidden;
 font-size: 0.6vw;
 white-space: pre;
}

div.SignMarker:hover span.onhover, div.SignMarker.dohover span.onhover {
 display: inline-block;
 visibility: visible;
}

div.SignMarker.good {
 background: rgb(0,255,0);
 border: 1px solid #0D0;
}

div.SignMarker.warn {
 background: rgb(255,200,0);
 border: 1px solid #DA0;
}

div.SignMarker.bad {
 background: rgb(255,0,0);
 border: 1px solid #D00;
}

div.SignMarker.gone {
 background: rgb(128,128,128);
 border: 1px solid #666;
}

div.SignMarker div.triangle {
 position: absolute;
 top: 0;
 left: 0;
 width: 0;
 height: 0;
 border-style: solid;
 border-width: 0.3vw 0.3vw 0 0;
 border-color: black transparent transparent transparent;
 z-index: 1;
}

div.SignMarker.ontop div.triangle {
 top: unset;
 bottom: 0;
 border-width: 0.3vw 0 0 0.3vw;
 border-color: transparent transparent transparent black;
}

div.SignMarker img {
 max-width: 1.0vw;
 max-height: 0.7vw;
 float: left;
 padding: 0.2vmin;
}

div.SignMarker:hover img, div.SignMarker.dohover img {
 max-width: 3vw;
 max-height: 3vh;
}

@keyframes pulsate {
   0% { transform: scale(1); }
  50% { transform: scale(1.2); }
 100% { transform: scale(1); }
}

span.failure, h1.failure, h2.failure, td.failure {
 font-weight: bold;
 color: #F00;
}

span.success, h1.success, h2.success, td.success {
 font-weight: bold;
 color: #0F0;
}

div.info_win select, div.info_win option {
 font-size: 3vmin !important;
}

div#info_win td {
 white-space: nowrap;
 overflow: hidden;
 max-width: 35vw;
 text-overflow: ellipsis;
}

div#info_win td:first-child {
 text-align: right;
 padding-right: 0.2vw;
}

div#info_win td[colspan="2"] {
 text-align: center;
}

div.spinner_container {
 position: fixed;
 z-index: 100;
 overflow: auto;
 left: 0;
 right: 0;
 top: 0;
 bottom: 0;
 width: fit-content;
 height: fit-content;
 max-width: 35%;
 max-height: 35%;
 margin: auto;
 background: transparent;
 overflow: hidden;
}

.spinner {
 margin: 5vmin;
  text-indent: -9999em;
  width: 20vmin;
  height: 20vmin;
  border-radius: 50%;
  background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
  position: relative;
  animation: load3 1.4s infinite linear;
  transform: translateZ(0);
}
.spinner:before {
  width: 50%;
  height: 50%;
  background: #ffffff;
  border-radius: 100% 0 0 0;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
}
.spinner:after {
  background: #0dc5c1;
  width: 75%;
  height: 75%;
  border-radius: 50%;
  content: '';
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
@-webkit-keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

div.right_click {
 position: fixed;
 width: fit-content;
 height: fit-content;
 max-width: 25%;
 max-height: 25%;
 background: linear-gradient(rgba(50,50,150,0.9), rgba(30,30,90,0.85));
 border-radius: 2vmin;
 color: #fff;
}

div.right_click ul {
 margin: 1vmin;
// padding: 1vmin;
}

div.sensor_distances {
 position: absolute;
 width: fit-content;
 height: fit-content;
 top: 2%;
 right: 0.5%;
 overflow-y: auto;
 max-width: 15%;
 max-height: 90%;
 display: none;
 background: rgba(255,255,255,0.8);
 color: black;
 z-index: 3;
}

div.sensor_info {
 background: rgba(255,255,255,0.7);
 position: absolute;
 display: inline-block;
 z-index: 3;
 max-width: 22%;
 font-size: 3vmin;
 border-radius: 2vmin;
 padding: 0.8vmin;
}

div.sensor_info.high {
 top: 10%;
}

div.sensor_info.low {
 bottom: 6%;
}

div.sensor_buttons {
 position: absolute;
 display: inline-block;
 width: fit-content;
 z-index: 5;
 bottom: 2vh;
 right: 4%;
}

tr.green {
 background: rgba(0,255,0,0.5);
}

tr.purple {
 background: rgba(255,0,255,0.5);
}

tr.red {
 background: rgba(255,0,0,0.5);
}

div.vid {
 z-index: 5000;
 display: none;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

div.vid.small {
 width: 20%;
 height: 20%;
}

div.vid img {
 position: absolute;
 top: 0;
 left: 0;
 max-width: 100%;
 max-height: 100%;
 z-index: 1;
}

div.vid img.ptz {
 z-index: 2;
 max-width: 9%;
 opacity: 0.1
}

div.vid img.ptz:hover {
 opacity: 0.9;
}

div.vid.small img.ptz {
 max-width: 25%;
}

div.vid span {
 z-index: 3;
 display: none;
 position: absolute;
 left: 10%;
 top: 5%;
 font-size: 1.5vw;
 background: rgba(255, 0, 0, 0.7);
 border-radius: 2vw;
 color: black;
 padding: 0.4vw;
 border: 1px solid red;
 cursor: pointer;
}

div.sign_render {
 background: transparent;
 display: none;
 overflow: hidden;
 user-select: none;
 user-drag: none;
 -webkit-user-drag: none;
}

div.sign_render_bg {
 position: absolute;
 background: rgba(0,0,0,0.9);
 overflow: hidden;
 user-select: none;
 user-drag: none;
 -webkit-user-drag: none;
}

div.pixel {
 position: absolute;
 border-radius: 3px;
 z-index: 0;
 user-select: none;
 user-drag: none;
 -webkit-user-drag: none;
}

div.pixel.color0 {
 background: #222;
}

div.pixel.color1 {
 background: radial-gradient(rgba(255,0,0,1.0), rgba(255,0,0,0.8));
}

div.pixel.color2 {
 background: radial-gradient(rgba(255,255,0,1.0), rgba(255,255,0,0.8));
}

div.pixel.color3 {
 background: radial-gradient(rgba(0,255,0,1.0), rgba(0,255,0,0.8));
}

div.pixel.color4 {
 background: radial-gradient(rgba(0,255,255,1.0), rgba(0,255,255,0.8));
}

div.pixel.color5 {
 background: radial-gradient(rgba(0,0,255,1.0), rgba(0,0,255,0.8));
}

div.pixel.color6 {
 background: radial-gradient(rgba(255,0,255,1.0), rgba(255,0,255,0.8));
}

div.pixel.color7 {
 background: radial-gradient(rgba(255,255,255,1.0), rgba(255,255,255,0.8));
}

div.pixel.color8 {
 background: radial-gradient(rgba(255,255,0,1.0), rgba(255,255,0,0.8));
}

div.pixel.color9 {
 background: radial-gradient(rgba(255,170,0,1.0), rgba(255,170,0,0.8));
}

div.pixel svg {
 position: absoulte;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 background: rgba(16,16,16,0.5);
 z-index: 1;
 stroke: #888;
}

div.hover_preview {
 position: absolute;
 z-index: 5;
 width: 25%;
 height: 25%;
}

div.edit_preview {
 width: 45vw;
 height: 45vh;
 margin: 1vmin;
}

div.schedule_edit_preview {
 width: 25vw;
 height: 20vh;
 margin: 1vmin;
}

div.graphic_edit {
 width: 80vw;
 height: 70vh;
 margin: 1vmin;
}

div.graph {
 width: 95vw;
 height: 95vh;
 background: rgba(0,0,0,0.9);
}

svg.graph {
 width: 100%;
 height: 100%;
}

svg.graph line {
 stroke-width: 3;
 stroke: white;
}

svg.graph circle {
 stroke-width: 2;
 stroke-opacity: 0.8;
 fill-opacity: 0.3;
 transition: all 0.2s ease-in-out;
}

svg.graph circle.good {
 stroke: #8F8;
 fill: #0F0;
}

svg.graph circle.warn {
 stroke: #FF0;
 fill: #FF0;
}

svg.graph circle.bad {
 stroke: #F00;
 fill: #F00;
}

svg.graph circle:hover {
 stroke-opacity: 1.0;
 fill-opacity: 0.6;
 transform: scale(1.4);
}

svn.graph line.axis {
 stroke-width: 1;
 stroke-dasharray: 1,4;
 stroke: #888;
}

div.graph div.lower {
 position: absolute;
 bottom: 0;
 left: 0;
 width: 100%;
 height: 5vh;
 overflow: hidden;
}

div.graph div.lower span {
 position: absolute;
 font-size: 2vmin;
 color: #ddd;
}

div.graph div.left {
 position: absolute;
 top: 0;
 bottom: 5vh;
 left: 0;
 width: 4vw;
 overflow: hidden;
}

div.graph div.left span {
 position: absolute;
 width: 100%;
 font-size: 2vmin;
 text-align: right;
 color: #ddd;
}

div.graph div.right {
 position: absolute;
 top: 0;
 bottom: 5vh;
 right: 0;
 width: 4vw;
 overflow: hidden;
}

div.graph div.right span {
 position: absolute;
 width: 100%;
 font-size: 2vmin;
 text-align: left;
 color: #ddd;
}

div.graph div.graph_body {
 position: absolute;
 top: 0;
 bottom: 5vh;
 left: 4vw;
 right: 4vw;
 overflow: hidden;
}

div.graph div.info {
 position: absolute;
 height: 12vmin;
 width: 28vmin;
 border-radius: 1vmin;
 overflow: hidden;
 opacity: 0;
 visibility: hidden;
 transition: all 0.2s ease-in-out;
 background: rgba(255,255,255,0.9);
 font-size: 2vmin;
 color: black;
 z-index: 5;
}

div.graph div.info span {
 font-size: 2vmin;
 display: inline-block;
 text-align: center;
 color: black;
 max-width: 27vmin;
}

div.graph div.info span.limit {
 white-space: nowrap;
 max-height: 3vmin;
 overflow: hidden;
 text-overflow: ellipsis;
}

table.spaced td {
 padding: 0.5vmin 1vmin;
}

div.schedule {
 float: left;
 padding-left: 2vmin;
}

div.schedule table {
 float: left;
}

div.schedule td {
 text-align: left !important;
}

div.schedule table:first-of-type {
 border-right: solid 0.3vmin white;
 padding-right: 2vmin;
}

div.icons * {
 display: block;
 float: left;
}

div.icons img {
 width: 4vmin;
 height: 4vmin;
 margin: 0.3vmin;
 margin-left: 0.8vmin;
 background: rgba(255,255,255,0.2);
}

div.icons div.pixel {
 position: static;
 width: 3vmin;
 height: 3vmin;
 margin: 0.3vmin;
 margin-left: 0.8vmin;
 padding: 1vmin;
 border: solid 1px black;
 font-size: 2.5vmin;
 font-weight: bold;
}

div.icons div.pixel.color0 {
 border: solid 1px rgba(255,255,255,0.5);
}

div.icons div.pixel:first-of-type {
 margin-left: 2vmin;
}

div.icons button {
 display: block;
 float: left;
 margin-left: 2vmin;
}

div.icons input {
 display: block;
 float: left;
 width: 5vmin;
 margin: 1vmin;
 font-size: 3vmin;
}

div.icons select {
 font-size: 3vmin;
 margin: 1vmin;
}

div.icons img.active {
 background: rgba(0,255,0,0.5);
}

tbody#schedule_edit_table tr td, tbody#schedule_edit_table tr th {
 padding: 0;
 padding-right: 0.6vw;
 text-align: left;
}

tbody#schedule_edit_action_table select {
 max-width: 10vw;
}

.floated {
 float: left;
}

div.selection {
 position: absolute;
 z-index: 2500;
 top: 0px;
 left: 0px;
 width: 100%;
 height: 100%;
 overflow-y: auto;
 background: blue;
 background: rgba(40,40,120,0.9);
 background: linear-gradient(rgba(50,50,150,0.9), rgba(30,30,90,0.9));
}