body, html {
font-family: Roboto;
}
#three {
position: fixed;
background: radial-gradient( circle, transparent 30%, black 150%), rgb(46, 39, 39);
top: 0;
bottom: 0;
left: 0;
right: 0;
}

.loading {
color: white;
position: fixed;
top: 300px;
width: 100%;
text-align: center;
margin: auto;
font-size: 25pt;
opacity: 0.7;
z-index: 1;
}

.logo {
position: fixed;
top: 5px;
left: 5px;
font-family: 'Open Sans';
color: white;
font-size: 25px;
font-weight: bold;
opacity: 0.1;
}
.controls-help {
position: fixed;
bottom: 5px;
right: 5px;
opacity: 0.6;
color: white;
}
.controls-help span {
font-size: 6pt;
text-transform: uppercase;
width: 30px;
text-align: center;
display: inline-block;
margin-bottom: 5px;
}

.color-legend {
width: 256px;
position: fixed;
bottom: 5px;
left: 5px;
color: white;
font-size: 8pt;
}
.color-legend .color {
width: 1px;
height: 10px;
display: inline-block;
}
.color-legend .min {
float: left;
}
.color-legend .max {
float: right;
}
.polar-angle-legend {
width: 256px;
position: fixed;
bottom: 40px;
left: 5px;
color: white;
font-size: 8pt;
}
.polar-angle-legend .left {
float: left;
}
.polar-angle-legend .right {
float: right;
}
.polar-angle-legend-360 {
width: 256px;
position: fixed;
bottom: 40px;
left: 72px;
color: white;
font-size: 8pt;
}
.polar-angle-legend-360 .center {
float: left;
}
.color-legend-varea {
width: 256px;
position: fixed;
bottom: 5px;
left: 5px;
color: white;
font-size: 8pt;
text-align: center;
}
.color-legend-varea .color {
width: 12px;
height: 12px;
display: inline-block;
margin: 3.841px;
margin-bottom: -5px;
}
.color-legend-varea .rois {
width: 12px;
display: inline-block;
margin: 3.841px;
font-family: 'Open Sans';
color: white;
font-size: 8.5px;
font-weight: bold;
opacity: 1.0;
}