body {
    margin: 0;
    font-family: Arial;
}
.btn {
    padding: 0.5em 0;
}
.btn a {
    text-decoration: none;
    background: #ccc;
    padding: 0.5em;
    box-sizing: border-box;
    display: block;
    width: 100%;
    text-align: center;
    color: #000;
    text-align: center;
}
.navigation-bar {
    position: fixed;
    left: 3.5em;
    top: 3.5em;
}

.settings_selector {
	position: relative;
}
/*
.settings_selector.level-0 label::before {
    content: '';
    position: absolute;
    right: auto;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    border: solid #000;
    border-width: 0 1px 1px 0;
    display: inline-block;
    padding: 2px;
    left: -5px;
    transform-origin: center;
    margin-top: -0.25em;
}

.settings_selector.level-0.active label::before {
  transform: translateY(-50%) rotate(-135deg);
}*/
.open {
    display: inline-block;
    cursor: pointer;
    width: 10px;
    height: 10px;
    line-height: 10px;
    font-size: 1.6em;
}
.settings_selector.level-0 {
    display: inline-block;
}
.level-1 .settings_selector {
    display: block;
}
#cd-zoom-in, #cd-zoom-out {
    height: 32px;
    width: 32px;
    cursor: pointer;
    margin-left: 10px;
    background-color: #4f319069;
    background-repeat: no-repeat;
    background-size: 32px 64px;
    background-image: url(../img/cd-icon-controller.svg);
}
#cd-zoom-out {
    background-position: 50% -32px;
}
#cd-zoom-out {
    margin-top: 1em;
}
#cd-zoom-in:hover, #cd-zoom-out:hover {
    background-color: #4f3190;
}
.zl-scrollBarBox{
    height:100%;
    position:absolute;
    background:#f3f3f3;
}
.zl-scrollBar{
    position:absolute;
    left:0;
    top:0;
    background:#848484;
    transition:background 0.3s;
}
.scrollBox {
    transform: translate(-35px, 100px);
}
input.slider {
    transform: rotate(90deg);
}
/*Chrome*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
    input[type='range'] {
      overflow: hidden;
      width: 120px;
      -webkit-appearance: none;
      background-color: #4f319069;
    }
    
    input[type='range']::-webkit-slider-runnable-track {
      height: 10px;
      -webkit-appearance: none;
      color: #13bba4;
      margin-top: -1px;
    }
    
    input[type='range']::-webkit-slider-thumb {
      width: 10px;
      -webkit-appearance: none;
      height: 10px;
      cursor: ew-resize;
      background: #ffffff;
      box-shadow: -80px 0 0 80px #4f319069;
    }

}
/** FF*/
input[type="range"]::-moz-range-progress {
  background-color: #43e5f7; 
}
input[type="range"]::-moz-range-track {  
  background-color: #9a905d;
}
/* IE*/
input[type="range"]::-ms-fill-lower {
  background-color: #43e5f7; 
}
input[type="range"]::-ms-fill-upper {  
  background-color: #9a905d;
}
.arr {
    width: 30px;
    height: 30px;
    position: absolute;
    cursor: pointer;
}
.arr:hover .arrow{
	opacity:0.5;
}
.up.arr {
    left: 30px;
    top: 0px;
}
.left.arr {
    left: 0px;
    top: 30px;
}
.right.arr {
    right: 0px;
    top: 30px;
}
.down.arr {
    left: 30px;
    bottom: 0px;
}
.keys {
    width: 90px;
    height: 90px;
    position: fixed;
    left: 3.5em;
    bottom: 3em;
}
.arrow {
  border: solid #4f3190;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
}

.fa-arrow-right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.fa-arrow-left {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.fa-arrow-up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

.fa-arrow-down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
.zl-scrollBar.zl-verticalBar{
    min-height:10px;
}

.zl-scrollBar.zl-horizontalBar{
    min-width:10px;
}
.zl-scrollBar:hover{
    background:#000;
}
.zl-scrollContentDiv{
    position:relative !important;
    width:100% !important;
    height:100% !important;
    padding:0 !important;
    margin:0 !important;
    top:0;
    left:0;
}
.mouse_selector {
    margin: 0 auto;
    padding: 10px;
    margin-top: 0;
    font-family: Arial;
    position: fixed;
    bottom: 0;
    right: 25px;
    font-size: 10px;
}
.nav-box {
    position: absolute;
    left: 1em;
    top: calc(3.5em + 30px);
    width: 250px;
    background: #3f3f3f63;
    border-radius: 5px;
}
.content {
    padding: 1.5em;
}
img#image {
    max-width: 100%;
    height: auto;
    width: auto;
}
#coordinateForm {
    display: flex; /* Use flexbox for layout */
    align-items: center; /* Align items vertically in the center */
    gap: 10px; /* Space between the boxes */
}

.coord-box, .filter-box {
    display: flex; /* Use flexbox for internal layout */
    align-items: center; /* Align items vertically in the center */
}
.filter-select-box {
    padding-top: 0.5em;
}
select#typeLevelSelect {
    width: 150px;
    box-sizing: border-box;
    height: 25px;
    border-radius: 5px;
}
select#typeSelect {
    height: 30px;
    border-radius: 7px;
    font-size: 0.75em;
}
.mesh-box {
    position: absolute;
    bottom: 1.5em;
    left: 350px;
    top: auto;
}
select#meshSelector {
    display: block;
    width: 150px;
    height: 30px;
    border-radius: 5px;
    text-align: center;
    margin: 0 auto;
}
button#loadButton {
    border: 0px solid #cccccc;
    height: 60px;
    cursor: pointer;
    background: url(../img/Button_blank_FINAL.png) no-repeat;
    width: 180px;
    background-size: contain;
    background-position-x: center;
    background-position-y: center;
    color: #fff;
}

    #image-container {
      position: relative;
      display: inline-block;
    }
    #selection-canvas {
      position: absolute;
      top: 0;
      left: 0;
    }
    #coordinates {
      margin-top: 10px;
    }
span.ok {
    color: green;
}
span.error {
    color: red;
}
.coord-display {
    position: absolute;
    bottom: 5.5em;
    left: 1.5em;
    color: #ffffff;
    font-family: Arial;
}
.result-box {
	position: absolute;
    top: 0;
    right: 0;
    top: 240px;
    font-family: Arial;
}
.result {
    height: 500px;
    width: 180px;
    font-size: 12px;
    padding: 0 10px;
    box-sizing: border-box;
}
.config_selector {
    max-width: 200px;
    margin: 0 auto;
    padding: 10px;
    border: 1px solid #cccccc;
    border-radius: 5px;
    background-color: #f9f9f963;
    margin-top: 3.5em;
    font-family: Arial;
    position: fixed;
    top: 0;
    right: 3.5em;
    font-size: 10px;
}
.config_selector .select-box{
	display:none;
}
.config_selector #slider {
    margin-top: 15px;
    height: 18px;
}
.config_selector .radius-slider{
    margin-bottom: 1.5em;
}
.config_selector .radius-slider span.slider-label {
    width: 100%;
    display: block;
    border: 0;
    color: #000;
}
.config_selector .radius-slider span.slider-label span#distance {
    background: #ffffff;
    margin: 0 0.25em;
    color: #000;
}
.config_selector select#typeSelect {
    height: 30px;
    border-radius: 7px;
    font-size: 1em;
    width: 100%;
    margin-bottom: 1em;
}
.config_selector .coord-box input#xCoord {
    width: 60%;
    display:block;
    float: left;
    padding-right: 0.25em;
    box-sizing: border-box;
}
.config_selector .filter-box {
    width: calc(40% - 0.25em);
    float: right;
}
#closeButton {
    display: none;
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #63686f;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
}
#loading-message {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #ffffffbf;
    z-index:10000;
    display: none;
}
.coord-box label {
    font-size: 0.75em;
}
.canvas-box-05 {
    position: absolute;
    top: 5.5em;
    right: 200px;
    padding: 0;
    width: 200px;
}
.level-0 img.radio.unpressed, .level-0 img.radio.pressed {
    width: 20px;
}
.level-1 {
    padding-left: 1.75em;
}
.level-2 {
    padding-left: 1.25em;
}
.canvas-box-05 span {
    line-height: 16px;
    padding-left: 0.5em;
}
.canvas-box-05 .option span {
    line-height: 16px;
    padding-left: 0;
    position: absolute;
    left: 3em;
}
#btn15 {
    padding: 0;
    line-height: 30px;
    box-sizing: border-box;
    margin-bottom: 1em;
    width: 200px;
    font-size: 0.75em;
}
#btn-level {
    width: 150px;
    color: #fff;
    font-family: Arial;
    line-height: 30px;
    text-align: left;
    font-size: 0.75em;
    padding: 0;
    box-sizing: border-box;
    margin-bottom: 1em;
    font-size: 0.75em;
    left: 15px;
}
#btn-level span{
    line-height: 30px;
    padding-left: 0;
    position: absolute;
    left: 3em;
}
.grid_selector {
    max-width: 200px;
    margin: 0 auto;
    padding: 10px;
    border: 1px solid #cccccc;
    border-radius: 5px;
    background-color: #f9f9f963;
    margin-top: 0;
    font-family: Arial;
    position: fixed;
    bottom: 35px;
    right: 35px;
    font-size: 10px;
}
.grid_selector label {
	padding-left: 20px;
}
input#gridSelectionToggle {
    position: absolute;
    margin: 0;
    left: 10px;
}
.config_settings {
    padding: 1.5em 0 0 0;
}
.settings_selector{
    margin-bottom: 0;
}
.settings_selector input[type="checkbox"], .grid_selector input[type="checkbox"] {
	accent-color: #4f3190;
}
.config_settings {
    border: 1px solid #333;
    padding: 1em;
    padding-top: 0;
    margin: 1.5em 0;
    border-radius: 10px;
    width: 100%;
    height: 50vh;
    overflow-y: scroll;
}
.config_selector .search-box {
    position: relative;
    top: 0;
    right: 0;
    width:100%;
}
.config_selector span.found_msg.empty {
	margin:0;
}
.config_selector span.found_msg {
    width: 100%;
    display: block;
    box-sizing: border-box;
    border: 0;
    color: #4f3190;
    padding: 0;
}
.config_selector .search-box .coord-box label {
    flex: 1 1 100%;
    margin-bottom: 10px;
    font-weight: bold;
    line-height: 12px;
    width: 100%;
    font-family: Arial;
    position: relative;
    font-size: 10px;
    margin-bottom: 10px;
    display: block;
    width:100%;
}
.config_selector .ui-slider .ui-slider-handle {
    width: auto;
}
.config_selector .search-box .coord-box {
    display: inline-block;
    margin-right: 0em;
    width: 100%;
    margin-bottom: 10px;
}
.config_selector .search-box button {
    width: 100%;
    padding: 5px;
    background-color: #4f3190;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.config_settings h3 {
    text-align: center;
}
.ui-visual-focus {
	box-shadow: 0 0 3px 1px rgb(94, 158, 214);
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
	border: 1px solid #454545;
	background: #454545;
	font-weight: normal;
	color: #ffffff;
}
.ui-icon-background,
.ui-state-active .ui-icon-background {
	border: #454545;
	background-color: #454545;
}
div#btn16 {
    position: relative;
    top: 0.25em;
    left: 0;
    padding: 0;
    width: 200px;
    border: 0px solid #cccccc;
    cursor: pointer;
    background: url(../img/Button_blank_FINAL.png) no-repeat;
    background-size: contain;
    background-position-x: center;
    background-position-y: center;
    color: #fff;
    font-family: Arial;
    line-height: 50px;
    text-align: center;
}
#loading-message {
    display: flex; /* Use flexbox for centering */
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center items horizontally */
    justify-content: center; /* Center items vertically */
    height: 100vh; /* Full viewport height */
    text-align: center; /* Center text inside the div */
    font-family: Arial;
}


#closeButton {
    margin-top: 20px; /* Add some space above the button */
}
.btn-nav {
    display: flex; /* Use flexbox for centering */
    justify-content: center; /* Center buttons horizontally */
    gap: 10px; /* Space between buttons */
}

.btn-nav button {
    background-color: #63666d;
    color: #f9f9f9;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
}
.result-entry {
    margin-bottom: 10px;
}
.btn-nav button:hover {
    background-color: #428d30; /* Darker blue on hover */
}

.btn-nav button:disabled {
    background-color: #ccc; /* Gray background for disabled state */
    cursor: not-allowed; /* Not-allowed cursor */
}
.config_selector form {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0;
}
.config_selector .box {
    display: flex;
    flex-wrap: wrap;
        width: 100%;
}

.config_selector span {
    flex: 1 1 100%;
    margin-bottom: 10px;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #4f3190;
    text-align: left;
}
.config_selector label {
    flex: 1 1 100%;
    margin-bottom: 10px;
    font-weight: bold;
    line-height: 12px;
    width: 100%;
}
.box-row {
    display: flex;
}
.config_selector .box-row span {
    flex: 1 1 5%;
    margin-bottom: 10px;
    padding: 5px;
    border: 0;
    border-radius: 4px;
    color: #4f3190;
    text-align: center;
}
.config_selector input.config_input {
    flex: 1 1 50%;
    margin-bottom: 10px;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 50%;
    display: flex;
    gap: 10px;
}

.config_selector .btn {
    width: 100%;
    padding: 5px;
    background-color: #4f3190;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.config_selector .btn:hover {
        background-color: #29c5ce;
}
.coord-display span {
    display: block;
}
#status-feedback {
    width: 100%;
    padding: 1em 0.5em;
    box-sizing: border-box;
}
#feedback {
    height: 500px;
    overflow-y: scroll;
    width: 100%;
    border: 1px solid;
    padding: 1em 0.5em;
    box-sizing: border-box;
}
.upload .btn {
    position: relative;
    top: 1.5em;
    left: 0;
    background: #ccc;
    padding: 0.5em 0;
    border-radius: 0.5em;
    cursor: pointer;
    width: 150px;
    text-align: center;
    box-sizing: border-box;
    /* margin-left: 5em; */
    display: inline-block;
    width: 250px;
    text-align: center;
    margin-right: 1.5em;
    font-family: Arial;
}
#menu_620 .btn-label{
	color: red;
}
#btn_n400, #menu_n400 .btn-label {
    color: #45e591;
}
#btn_n500, #menu_n500 .btn-label {
    color: #ffffff;
}
#btn_steuer, #menu_steuer .btn-label {
    color:#86c1ef;
}
#btn_leer_schutz, #menu_leer .btn-label {
    color: #222;
}
#btn_gleich, #menu_gleich .btn-label {
    color: #ff9900;
}
.canvas-box-01, .canvas-box-06 {
    position: absolute;
    top: 1.25em;
    left: 6.5em;
    width: 250px;
    padding: 0;
}
.canvas-box-02, .canvas-box-07 {
    position: absolute;
    top: 1.25em;
    left: calc(6.5em + 200px);
    width: 250px;
    padding: 0;
}
.canvas-box-03, .canvas-box-08 {
    position: absolute;
    top: 1.25em;
    left: 6.5em;
    left: calc(6.5em + 400px);
    padding: 0;
}
.canvas-box-09 {
    position: absolute;
    top: 1.25em;
    left: 6.5em;
    left: calc(6.5em + 600px);
    padding: 0;
}
.canvas-box-10 {
    position: absolute;
    top: 1.25em;
    left: 6.5em;
    left: calc(6.5em + 800px);
    padding: 0;
}
.canvas-box-11 {
    position: absolute;
    top: 1.25em;
    left: 6.5em;
    left: calc(6.5em + 1000px);
    padding: 0;
}
.canvas-box-12 {
    position: absolute;
    top: 1.25em;
    left: 6.5em;
    left: calc(6.5em + 1200px);
    padding: 0;
}
.canvas-box-04 {
    position: absolute;
    top: 0.4em;
    left: 6.5em;
    padding: 0;
    width: 200px;
    border: 0px solid #cccccc;
    cursor: pointer;
    background: url(../img/Button_blank_FINAL.png) no-repeat;
    background-size: contain;
    background-position-x: center;
    background-position-y: center;
    color: #fff;
    font-family: Arial;
    line-height: 50px;
    text-align: center;
}
.canvas-box-04.pressed {
    background: url(../img/Button_blank_pressed_FINAL.png) no-repeat;
    background-size: contain;
    background-position-x: center;
    background-position-y: center;
}
.canvas-box-04 #btn13 {
    position: relative;
    top: 0.9em;
    font-size: 1.2em;
}
.canvas-box {
    max-width: 100%;
    font-family: Arial;
}
#btn2, #btn3, #btn5, #btn6, #btn8, #btn9, #btn12, #btn14, .wait-loading, #btn20, #btn21, #btn23, #btn22, #btn24, .btn.btnbox, #btn30, #btn31,
#btn41, #btn42, #btn43, #btn44, #btn45{
    padding: 0 1.0em;
    line-height: 25px;
    box-sizing: border-box;
    margin-bottom: 0.15em;
}
#load-level {
    line-height: 30px;
    padding-left: 0;
    position: absolute;
    left: 3em;
}
#btn30, #btn12 {
    display: none !important;
}
.canvas-box#strom img.pressed {
	display:none;
}
#strom .btn img.pressed.radio, #strom .btn img.unpressed.radio {
    position: relative;
}
.canvas-box#strom #btn19 span.btn-label {
    color: red;
}
.canvas-box#strom span.btn-label{
    position: absolute;
    left: 0;
    top: 15px;
    width: auto;
    text-align: center;
    z-index: 15;
}
.toggle-btn {
    cursor: pointer;
}
span.btn-label {
    cursor: pointer;
}
.canvas-box span.btn-label {
    position: absolute;
    left: 3em;
    width: auto;
    text-align: left;
    z-index: 15;
    top: 3px;
}
#strom img.unpressed {
    position: relative;
    left: 0;
    top: 0;
    z-index: 10;
}
#strom .btn img.pressed {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 5;
}
@keyframes flickerAnimation {
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-o-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-moz-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-webkit-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
form#coordinateForm {
    font-family: Arial;
}
.camera-box {
    position: absolute;
    top: 0;
    right: 0;
    top: 75px;
}
.camera-box #btn10, .camera-box #btn11 {
    border: 0px solid #cccccc;
    height: 50px;
    cursor: pointer;
    background: url(../img/Button_blank_FINAL.png) no-repeat;
    width: 180px;
    background-size: contain;
    background-position-x: center;
    background-position-y: center;
    color: #fff;
    font-family: Arial;
    line-height: 50px;
    text-align: center;
    font-size: 0.75em;
}

.wait-loading {
	display:none;
   -webkit-animation: flickerAnimation 1s infinite;
   -moz-animation: flickerAnimation 1s infinite;
   -o-animation: flickerAnimation 1s infinite;
    animation: flickerAnimation 1s infinite;
}
.canvas-box span {
    position: absolute;
    left: 1.5em;
    line-height: 1.5;
}
span#distance {
    position: relative;
    left: 0;
}
.btn {
    position: relative;
    top: 0;
    left: 0;
    width: 200px;
    padding: 0;
    cursor: pointer;
}
.btn .option{
	margin-bottom: 0.5em;
}
.btn .pressed{
	display:none;
}
.btn .radio{
	max-width:25px;
}
.info-text {
    font-size: 0.75em;
    font-family: Arial;
}
.ui-input {
    position: absolute;
    bottom: 1.5em;
    left: 1.5em;
}
.ui-input span {
    font-size: 0.75em;
    display: block;
    font-family: Arial;
}
.search-box {
    position: absolute;
    top: 2.5em;
    right: 3em;
}
.canvas-box {
    max-width: 100%;
}
.canvas-box img {
    max-width: 100%;
    height: auto;
    width: auto;
}
#coordinateForm button {
    border: 0px solid #cccccc;
    height: 100px;
    cursor: pointer;
    background: url(../img/Button_blank_FINAL.png) no-repeat;
    width: 180px;
    background-size: contain;
    background-position-x: center;
    background-position-y: center;
    color: #fff;
}
.search-box {
    position: absolute;
    top: 0;
    right: 0;
}
.config_selector .coord-box {
    display: inline-block;
    margin-right: 0em;
}
input#xCoord, input#yCoord, input#zCoord {
    width: 150px;
    height: 30px;
    border-radius: 7px;
}
#progressBar {
		      width: 100%;
		      height: 20px;
		      background-color: #f0f0f0;
		      margin-bottom: 10px;
		      display: none;
		    }
		    #progress {
		      width: 0%;
		      height: 100%;
		      background-color: #4caf50;
		    }
#progressBar span {
    text-align: center;
    display: block;
}

			#info {
				color: #fff;
				position: absolute;
				top: 10px;
				width: 100%;
				text-align: center;
				z-index: 100;
				display:block;
			}
			#info a {
				color: #333;
				font-weight: bold;
				text-decoration: underline;
				cursor: pointer
			}
			#glFullscreen {
				width: 100%;
				height: 100vh;
				min-width: 640px;
				min-height: 360px;
				position: relative;
				overflow: hidden;
				z-index: 0;
				color:#fff;
			}
			#example {
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				background-color: #fff;
			}
			span#loading-text {
			    padding: 0 0.5em;
			    position: absolute;
			    top: 0;
			    left: 0;
			}
			#dat {
				user-select: none;
				position: absolute;
				left: 0;
				top: 0;
				z-Index: 200;
				padding: 6em 0;
    			box-sizing: border-box;
    			max-width: 100%;
    			touch-action: none;
			}
			.example .subpage{
				max-width:100%;
				margin:0 auto;
			}
			#loading-overlay {
			  position: absolute;
			  width: 100%;
			  height: 100%;
			  display: flex;
			  justify-content: center;
			  align-items: center;
			  z-index:500;
			  background: #fff;
			}
			
			.loading-overlay-hidden {display: none !important;}
			#loading-bar {position: relative;width: 25em;height: 1em;border-radius: 0.25em;background-color: black;border: 1px solid grey;display: inline-flex;}
			#progress {background-color: #75b800;height: inherit;border-radius: inherit;width: 5%;}
			.loading-overlay-hidden {display: none !important;}
			#loading-bar {position: relative;width: 25em;height: 1em;border-radius: 0.25em;background-color: black;border: 1px solid grey;display: inline-flex;}
			#loading-bar_circle .loader {
			    border: 10px solid #ccc;
			    border-top: 10px solid #104681;
			    border-radius: 50%;
			    width: 60px;
			    height: 60px;
			    animation: spin 2s linear infinite;
			}
			#loading-bar_circle span#loading-text {
			    padding: 0 0.5em;
			    position: absolute;
			    font-size: 1.5em;
			    line-height: 150px;
			    width: auto;
			    margin-left: 40px;
			    color: #fff;
			}
			#loading-bar_circle {position: relative;}
			@keyframes spin {
			  0% { transform: rotate(0deg); }
			  100% { transform: rotate(360deg); }
			}
.version {
    position: fixed;
    top: 0.5em;
    right: 0.5em;
    opacity: 0.5;
    font-size: 0.75em;
}
.btn-label, .option span, .toggle-icon, .version {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}			
ul.level-0 {
    position: relative;
    top: 0;
    left: 1.5em;
    width: 250px;
    padding: 0;
    margin: 0.5em 0;
    display:none;
}
#gebaeude ul.level-0{
	display:block;
	left: 0;
}
ul#sub_catkaltwasser{
    display: block;
    left: 0;
}
#oel ul.level-0 {
    display: block;
    left: 0;
}
ul.level-0 .level-1 li {
    padding: 0 !important;
    height: 25px !important;
    margin: 0 !important;
    line-height: 25px !important;
    cursor:pointer;
}
#strom img.radio.unpressed, #strom img.radio.pressed, .level-0 img.radio.unpressed, .level-0 img.radio.pressed {
    width: 20px;
}
ul.level-1 li span {
    margin-left: 20px !important;
}
ul.level-1 {
    padding-left: 0;
    list-style: none;
    display: none;
    margin-left: 1.75em;
}
li.l-option {
    list-style: none;
    height: 30px;
    line-height: 30px;
	position: relative;
}
.canvas-box .l-option span.toggle-icon {
    position: absolute;
    left: 0;
    height: 30px;
    line-height: 30px;
}
#menu_schilder span.toggle-icon {
    opacity: 0;
}
.canvas-box#strom span.btn-label {
    position: absolute;
    left: 3em;
    width: 100%;
    text-align: left;
    z-index: 15;
    top: 3px;
}
.canvas-box {
    max-width: 100%;
    padding: 0;
    margin: 0.5em 0;
    min-height: 30px;
}
span.toggle-btn{
    top: 3px;
}
ul.level-1 {
    list-style: none;
    display: none;
    left: 1.5em;
    position: relative;
}
ul.level-1 li span{
    margin-left: 20px !important;
    left: 0.5em;
}
.category-option .toggle-btn img {
    width: 20px;
}
li.category-option {
    position: relative;
    list-style: none;
}
li.category-option span {
    position: relative;
    left: 0;
}
 
@media screen and (max-width: 1400px){
	.canvas-box span {
	    position: absolute;
	    left: 3.5em;
	    line-height: 2;
	    font-size: 0.875em;
	}
	#btn2, #btn3, #btn5, #btn6, #btn8, #btn9, #btn12, #btn14 {
	    padding: 0 0.75em;
	    line-height: 30px;
	    box-sizing: border-box;
	}
	.btn {
    position: relative;
    top: 0;
    left: 0;
    width: 150px;
    padding: 0;
    cursor: pointer;
}
	.canvas-box-01 {
    position: absolute;
    top: 1.25em;
    left: 6.5em;
    width: 150px;
    padding: 0;
}
	.canvas-box-02 {
    position: absolute;
    top: 1.25em;
    left: calc(6.5em + 150px);
    width: 150px;
    padding: 0;
}
  .canvas-box-03 {
    	position: absolute;
	    top: 1.25em;
	    left: 6.5em;
	    left: calc(6.5em + 300px);
	    padding: 0;
	}
	.canvas-box-04 {
	    width: 150px;
	    height: 50px;
	    position: absolute;
	    top: 1em;
	    left: 6.5em;
	    left: calc(6.5em + 450px);
	    padding: 0;
	}
	.canvas-box-04 #btn13 {
	    position: relative;
	    top: 0;
	    font-size: 0.75em;
	}
}