@font-face {
    font-family: "Mont Regular";
    src:
      local("Mont Regular"),
      url("Fontfabric-MontRegular.ttf");
  }
  
@font-face {
font-family: "Mont SemiBold";
src:
    local("Mont SemiBold"),
    url("Fontfabric-MontSemiBold.ttf");
}

/*---------------------Verge3D--------------------*/


body {
    margin: 0px;
    overflow: hidden;
}


h1{
    font-family: "Mont SemiBold";
    font-size: 120%;
}

p {
    font-family: "Mont SemiBold";
    margin: 0px;
    margin-left: 10px;
    
}

ul{
    font-family: "Mont Regular"
}



img{
    padding-top: 2%;
    padding-bottom: 5%;
}

video{
    padding-top: 2%;
    padding-bottom: 5%;
}

.v3d-container {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

.fullscreen-button {
    position: absolute;
    bottom: 5px;
    left: 5px;
    width: 50px;
    height: 50px;
    cursor: pointer;
    background-size: 100% 100%;
    display: none;
    z-index: 1;
}

.fullscreen-open {
    background-image: url('media/fullscreen_open.svg');
}

.fullscreen-close {
    background-image: url('media/fullscreen_close.svg');
}

/* removes tap blinking on ios devices */
* { -webkit-tap-highlight-color:rgba(0,0,0,0); }

.v3d-simple-preloader-background {
    background-color: white;
}


.v3d-annotation {
	width: 20px;
	height: 20px;
	min-width: 0px;
	padding: 0px;
	font-size: 0px;
	border: none;
	background-color: #007455; 
	background-image: url("media/annotation_icon.svg");
	background-size: 100% 100%;
    cursor: pointer;
	}

.v3d-annotation-dialog {
	border: solid;
    border-color: #444f50;
    border-width: 0px;
    border-radius: 0%;
    background-color: white;
	color: #444f50;
    width: 300px;
    height: auto;
    overflow: hidden;
	padding: 10px;
	min-width: 0px;
	margin: 10px;
	font-size: small;
	
}

.v3d-annotation-transparent {
	background-color: #007455;
	opacity: 0.2;
}


.annotation-dialog-textbox-nobutton {
    padding-top: 0px;
    padding-bottom: 20px;
    text-align: left;
}

.annotation-dialog-textbox {
    padding-bottom: 10px;
    text-align: left;
}


/*---------------------ID-spezifische Styles--------------------*/

#my_iframe {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    border: 0;
}


#button_open_close_haube_v1 {
    width: 40px;
	height: 40px;
	min-width: 0px;
	padding: 0px;
	font-size: 0px;
	border: none;
	background-color: transparent; 
	background-image: url("media/Open_Icon.svg");
	background-size: 100% 100%;
}

#button_open_close_heckklappe_v1 {
    width: 40px;
	height: 40px;
	min-width: 0px;
	padding: 0px;
	font-size: 0px;
	border: none;
	background-color: transparent; 
	background-image: url("media/Open_Icon.svg");
	background-size: 100% 100%;
}

#button_open_close_reinigungsklappe_v1 {
    width: 40px;
	height: 40px;
	min-width: 0px;
	padding: 0px;
	font-size: 0px;
	border: none;
	background-color: transparent; 
    background-image: url("media/Open_Icon.svg");
	background-size: 100% 100%;
}

/*--------------*/

#anno_bedienre_v1 {
	width: 50px;
	height: 50px;
	min-width: 0px;
	padding: 0px;
	font-size: 0px;
	border: none;
	background-color: transparent; 
	background-image: url("media/Control_System_Icon.svg");
	background-size: 100% 100%;
	}

#anno_haube_v1 {
    width: 50px;
    height: 50px;
    min-width: 0px;
    padding: 0px;
    font-size: 0px;
    border: none;
    background-color: transparent; 
    background-image: url("media/Drop-in_Chute_Icon.svg");
    background-size: 100% 100%;
    }
    
#anno_cone_v1 {
    width: 50px;
    height: 50px;
    min-width: 0px;
    padding: 0px;
    font-size: 0px;
    border: none;
    background-color: transparent; 
    background-image: url("media/Cone_Angle_Icon.svg");
    background-size: 100% 100%;
    }

#anno_press_v1 {
    width: 50px;
    height: 50px;
    min-width: 0px;
    padding: 0px;
    font-size: 0px;
    border: none;
    background-color: transparent; 
    background-image: url("media/Press_Sign_Icon.svg");
    background-size: 100% 100%;
    }


#anno_reinigung_v1 {
    width: 50px;
    height: 50px;
    min-width: 0px;
    padding: 0px;
    font-size: 0px;
    border: none;
    background-color: transparent; 
    background-image: url("media/Maintenance_Hatch_Icon.svg");
    background-size: 100% 100%;
    }


#anno_noise_v1 {
    width: 50px;
    height: 50px;
    min-width: 0px;
    padding: 0px;
    font-size: 0px;
    border: none;
    background-color: transparent; 
    background-image: url("media/Noise_Level_Icon.svg");
    background-size: 100% 100%;
    }
/*---------------------Text--------------------*/

.start_stop_text {
    text-align: center;
    font-size: 150%;
    color: white;
    padding-top: 3%;
}


/*---------------------Buttons--------------------*/
.variant1_button{
    position: absolute;
	left: 0%;
	top: 0%;
	right: 0%;
	bottom: auto;
	width: 100px;
	height: 100px;
	background-image: url('media/variant1_button.png');
	background-size: 100% 100%;
	background-repeat: repeat;
    /* cursor: pointer; */
}

.variant2_button{
    position: absolute;
	left: 0%;
	top: 0%;
	right: 0%;
	bottom: auto;
	width: 100px;
	height: 100px;
    margin-left: 110px; /* width of button above plus space between buttons */
	background-image: url('media/variant2_button.png');
	background-size: 100% 100%;
	background-repeat: repeat;
    /* cursor: pointer; */
}

.variant3_button{
    position: absolute;
	left: 0%;
	top: 0%;
	right: 0%;
	bottom: auto;
	width: 100px;
	height: 100px;
    margin-left: 220px; /* widht of button above plus space between buttons */
	background-image: url('media/variant3_button.png');
	background-size: 100% 100%;
	background-repeat: repeat;
    /* cursor: pointer; */
}


.start_stop_button {
    position:relative;
    left: 0%; /* Breite Annotation_Dialog /2 minus Breite Button /2 (500/2 - 40/2 = 230) */
    width: 100%;
	height: 40px;
    background-color: #007858;
    border-radius: 0px;
	/* background-image: url('media/start_button.svg'); */
	background-size: 100% 100%;
	background-repeat: repeat;
    cursor: pointer;
}


.info-panel-close-button {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 30px;
    height: 30px;
    background-image: url('media/close_button.svg');
    cursor: pointer;
    background-size: 100% 100%;
}
/*-------------------Panels------------------------*/


.blank-panel{
    position: absolute;
    left: 0%;
    top: 100px;
    right: auto;
    bottom: auto;
    display: block;
    width: 100%;
    height: 100%;
}


.title-panel{
    position: absolute;
    left: 10px;
    top: 120px;
    right: auto;
    bottom: auto;
    display: block;
    width: 500px;
    height: 0px;
    margin-top: 10px;
    font-family: "Mont SemiBold";
    font-size: 40px;
    color: #007858;
}

.title-panel2{
    position: absolute;
    left: 15px;
    top: 170px;
    right: auto;
    bottom: auto;
    display: block;
    width: 500px;
    height: 0px;
    margin-top: 10px;
    font-family: "Mont SemiBold";
    font-size: 20px;
    color: #007858;
}

.variants-panel-center {
    position: absolute;
    left: 0%;
    top: 0%;
    right: auto;
    bottom: auto;
    display: block;
    width: 140px;
    height: 0px;
    margin-top: 10px;
   }
  
 .variants-panel {
    position: absolute;
    left: 0%;
    top: 0%;
    right: 0%;
    bottom: auto;
    display: none; /* Hide UI while loading. Activated again with puzzle "set style display..."*/
    width: 260px; /*width of all buttons plus space in between */
    height: 80px; 
    margin-right: -130px; /* half of width */
    margin-bottom: auto; 
    margin-left: auto;
  }

.info-panel-center {
    position: absolute;
    left: 70%;
    top: 0%;
    right: auto;
    bottom: auto;
    display: none; /* Hide UI while loading. Activated again with puzzle "set style display..."*/
    width: 30%;
    height: 100%;
    background-color: rgba(255,255,255,0.7);
    z-index: 3;

}

.info-panel {
    position: absolute;
    left: 0%;
    top: 7%;
    right: 0%;
    bottom: 0%;
    height: 90%;
    padding: 20px;
    font-family: "Mont";
    color: #444f50;
    overflow-y: auto;
    

}



.left-panel-center {
    position: absolute;
    left: 0%;
    top: 0%;
    right: auto;
    bottom: auto;
    display: block;
    width: 0px;
    height: 50%;
  }
  
  
.left-panel {
    position: absolute;
    left: 0%;
    top: auto;
    right: 0%;
    bottom: 0%;
    display: none; /* Hide UI while loading. Activated again with puzzle "set style display..."*/
    width: 80px;
    height: 320px; /*height of all buttons plus space in between */
    margin-bottom: -160px; /* half of height */
    margin-left: 20px;
  }


/*-------------------Menu------------------------*/


.menu-button {
    width: 100%;
    border-radius: 0px;
    border: 0px;
    color: #444f50;
    text-align: center;
    font-size: 100%;
    cursor: pointer;
    margin-top: 5px;
    text-align: left;
    font-family: "Mont SemiBold", Arial, Helvetica, sans-serif;
    font-size: 130%;

  }


.v3d-simple-preloader-logo {
    background-image: url('media/Avermann_Logo.svg');
}

.v3d-simple-preloader-bar {
    background: #007858;
    height: 3px;
    border-color: #007858;
}

/*---------------------Listen--------------------*/

.menu-button-list{
    font-family: Mont Semibold;
    margin-block-start: 0em;
    margin-block-end: 0em;
    padding-inline-start: 20px;
    list-style: square;
}


@media screen and (max-width: 932px) {



    #anno_bedienre_v1 {
        width: 0px;
	    height: 0px;
        }
    
    #anno_haube_v1 {
        width: 0px;
	    height: 0px;
        }
        
    #anno_cone_v1 {
        width: 0px;
	    height: 0px;
        }
    
    #anno_press_v1 {
        width: 0px;
	    height: 0px;
        }
    
    
    #anno_reinigung_v1 {
        width: 0px;
	    height: 0px;
        }
    
    
    #anno_noise_v1 {
        width: 0px;
	    height: 0px;
                }


    .v3d-annotation-dialog {
        display: none;
        
    }

    .info-panel-center {
        display: none; 
        visibility: hidden;
       
    }

    .title-panel{
        left: 10px;
        top: 80px;
        margin-top: 10px;
        font-size: 20px;
    }
    
    .title-panel2{
        left: 10px;
        top: 110px;
        margin-top: 10px;
        font-size: 15px;
    }

    .variant1_button{
        width: 70px;
        height: 70px;
    }
    
    .variant2_button{
        width: 70px;
        height: 70px;
        margin-left: 80px; /* width of button above plus space between buttons */
    }
    
    .variant3_button{
        width: 70px;
        height: 70px;
        margin-left: 160px; /* widht of button above plus space between buttons */
    }

}