/* __V3D_TEMPLATE__ - template-based file; delete this line to prevent this file from being updated */

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

#DiviFrame2 {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 40%;
    height: 100%;
	z-index: 2;
/*
	  resize: both;
  overflow: hidden;  Hide scrollbars 
*/
}
#myframe2 {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}
#container {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}


.preloader{
	display:block;
	padding: 5px;
    position: absolute;
    background-color: rgba(255,255,255,1.00);
    border: 2px solid red;
	top: 50%;
    left: 70%;
    transform: translate(-50%, -50%);
    width: 360px;
    height: 70px;
    border-radius: 5px;
    z-index: 1;
    background-color: rgba(119,119,119,0.53);
}
.preloader-text{
  display:inline;
  margin: 5px;
  width: 100%;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 100%;
  color:#FFFFFF;
  text-align: center;
  align-content: center;

}

.preloader_bar {
  bottom: 5px;
  max-width: 360px;
  width: 0%;
  height: 30%;
  border-radius: 5px;
  background-color: hsla(208.00000000000003, 82.57%, 57.25%, 1.00);
  z-index: 2;
}
.textarea {
  width: 100%;
  height: 150px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  resize: none;
}

#ShowHideMenus {
	position: absolute;
    bottom: 0px;
    left: 0px;
	width: 50px;
    height: 50px;
    font-family: Arial, Helvetica, sans-serif;
    color: #ffffff;
    border: 1px solid #ffffff;
    background-color: #4CAF50;
	font-size: 200%;
}
#CheckScore {

}
.MainMenuBtnsDisabled {
	font-family: Arial, Helvetica, sans-serif;
	color: #D4D3D3;
	width: 100%;
	padding: 10px;
	border: 1px solid #ffffff;
	font-size: calc(0.1em + 1vmax);
	background-color: #7F7F7F;
	text-decoration: line-through;
}

.MainMenuBtnsDisabled:hover{
	outline: none !important;
}

.MainMenuBtnsDisabled:active{
	outline: none !important;
	 /*   background-color: #4CAF50;*/
}
.MainMenuBtnsDisabled:focus{
	outline: none !important;

}

.OpdrachtText {
    font-family: Arial, Helvetica, sans-serif;
	font-size: 36px;
  padding: 0;
  margin: 0;
  color: #FA6114 !important;
  white-space: nowrap;

}

.MainMenuBtns {
    font-family: Arial, Helvetica, sans-serif;
    color: #ffffff;
	width: 100%;
    padding: 10px;
    border: 1px solid #ffffff;
    font-size: calc(0.1em + 1vmax);
    background-color: #4CAF50;
}
.MainMenuBtns:hover{
	background-color: #2B632E;
		outline: none !important;
}

.MainMenuBtns:active{
	outline: none !important;
	 /*   background-color: #4CAF50;*/
}
.MainMenuBtns:focus{
	outline: none !important;

}


.alignleft {
	float: left;
}
.alignright {
	float: right;
}
.aligncenter {
	 text-align: center;
}


.annotationBtns {
    font-family: Arial, Helvetica, sans-serif;
    color: #ffffff;
	width: 100%;
    padding: 10px;
    border: 1px solid #ffffff;
    font-size: calc(0.1em + 1vmax);
    background-color: #4CAF50;
}
.annotationBtns:hover{
   background-color: #2B632E;
}
#Bottummenu01Footer{
    position: absolute;
    bottom: 0;
    width: 100%;
}
#Bottummenu01{
    width: 40%;
    margin: 0 auto;
}

.hidebottomNavBar {
	transition: 1.0s;
	transform: translate3d(21vw,500px,0);
}
.showbottomNavBar {
	transition: 1.0s;
	transform: translate3d(21vw,0,0);
}

.hideleftNavBar {
	transition: 1.0s;
	transform: translate3d(-500px,0,0);
}

.showleftNavBar {
	transition: 1.0s;
	 transform: translate3d(40vw,0,0);
}

#aLittleWindow {
    font-family: Arial, Helvetica, sans-serif;
    font-size: calc(0.1em + 1vmax);
    background-color: rgba(201, 76, 76, 0.3);
    padding: 10px;
    border: 2px solid red;
    border-radius: 5px;
}

#PopUpWindow01Background{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    display: block;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 3;
}

#PopUpWindow01 {
    overflow-x: auto;
    display: inline-block;
    font-family: Arial, Helvetica, sans-serif;
    color: #ffffff;
    font-size: calc(0.1em + 1vmax);
    background-color: rgba(255,255,255,1.00);
    padding: 10px;
    border: 2px solid red;
    border-radius: 5px;
    margin: auto;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 90%;
    z-index: 4;	
}
.PopUpWinTopDiv{
	display: inline-block;
	font-size: calc(0.1em + 1vmax);
	text-align: center;
	width: 100%;
	background-color: #BCC6CC;
}

.PopUpWinTopContent {
	 text-align: left;
}
.PopUpWinMiddleDiv{	
	width: 100%;
	height: 77%;
		background-color: #3A4526;

}
.PopUpWinBottomDiv{	
	width: 100%;
	height: 11%;
	background-color: #739F25;
}

.PopUpWinBtns {
    font-family: Arial, Helvetica, sans-serif;
    color: #ffffff;
	width: 100%;
    padding: 10px;
    border: 1px solid #ffffff;
    font-size: calc(0.1em + 1vmax);
    background-color: #4CAF50;
}
.PopUpWinBtns:hover{
   background-color: #2B632E;
}

#HideID {
    visibility: hidden;
}

.fullscreen-button {
    position: absolute;
    top: 5px;
    right: 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);
}




[type="radio"]:checked,
[type="radio"]:not(:checked) {
    position: absolute;
    left: -9999px;
}
[type="radio"]:checked + label,
[type="radio"]:not(:checked) + label
{
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    line-height: 20px;
    display: inline-block;
    color: #666;
}
[type="radio"]:checked + label:before,
[type="radio"]:not(:checked) + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 18px;
    height: 18px;
    border: 1px solid #ddd;
    border-radius: 100%;
    background: #fff;
}
[type="radio"]:checked + label:after,
[type="radio"]:not(:checked) + label:after {
    content: '';
    width: 12px;
    height: 12px;
    background: green;
    position: absolute;
    top: 4px;
    left: 4px;
    border-radius: 100%;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
[type="radio"]:not(:checked) + label:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}
[type="radio"]:checked + label:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

.Blackground {
	background-color: rgba(147,147,147,0.50);
	margin: auto;	    
    position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
		z-index:7;
	display: block;

}

.PopUpWindowIntro{
    font-family: Arial, Helvetica, sans-serif;
    background-color: rgba(255,255,255,1.00);
    padding: 10px;
    border: 2px solid red;
    border-radius: 5px;
    margin: auto;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 90%;
    overflow-y: hidden;
    overflow-x: hidden;
	z-index: 13;
	text-align: center;
	object-fit: contain;
	display: block;

}
.PopUpWindowScore {
    font-family: Arial, Helvetica, sans-serif;
    background-color: rgba(255,255,255,1.00);
    padding: 10px;
	font-size: 13px;
    border: 2px solid red;
    border-radius: 5px;
    margin: auto;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 80%;
    overflow-y: scroll;
    overflow-x: hidden;
	z-index: 3;
	text-align:inherit;

}

.imgClass{
   height: 99999px;
   object-fit:contain;
   max-height: 100%;
   max-width: 100%;    
   display: block;
   margin: auto auto;
    }