*{
		box-sizing: border-box;	
		}
		
		html{
			margin: 0vh;
			font-family: sans-sherif;
		}
		
		body{
			margin: 0;
			font-family: sans-sherif;
			
			background-image: url('hatter.jpg');
			background-size: cover;
			background-repeat: no-repeat;
			background-position: top center;
			min-height: 100vh;
			height:100vh;
			width: 100vw;
			background-attachment: fixed:
		}
		
		.azonnali-text{
			text-align: center;
			font-size:1vh;
			margin: 1vh;
		}
		
		#preloader{
			position: fixed;
			top: o;
			left: 0;
			width: 100%;
			height:100%;
			background: white;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 24px;
			z-index: 9999;
		}
		
		#content{
			/*display: none;
			border-style: solid;
			border-width: 2 px;*/
			height: 100%;
		}
		
		.spinner{
			border: 6px solid #eee;
			border-top: 6px solid #555;
			border-radius: 50%;
			width: 50px;
			height: 50px;
			animation: spin 1s linear infinite;
		}
		
		@keyframes spin{
			to { transform: rotate(360deg); }
		}
		
		.spinspan{
			margin-left: 100 px;			
		}
		
		.versionlabel{
			padding: 0.3vh;
			color: white;
			width: 80%;
			margin: 4vw auto;
			font-size: 1.0vh;
		}
		
		.girolabel{
			padding: 0.3vh;
			color: white;
			width: 80%;
			margin: 4vw auto;
			font-size: 1.2vh;
		}
		
		.qviklogo{
			width: 18vw;
		}
		
		.hspace{
			height: 0%;
		}	
		
		.gheader{
			display:flex;
			margin: 0px;
			color: white;
			text-align: left;
			padding:0vh;
			font-size: 0.3vh;
		}
		
		.gfooter{
			position: relative;
			display:flex;
			justify-content: center;
			align-items: center;
		}
			
		.gfooter-intra{
			display: grid;
			color: white;
			grid-template-columns: repeat(2, 1fr);
			width: 60%;
			column-gap: 4vh;
			margin: 1vh auto;
		}
		
		.foot-item{
			display: flex;
			text-align: center;
			font-size: 1vh;
			width: 16vh;
		}
			
		.gbody0, .gbody1, .gbody2{
			padding: 1vh;
		}
		
		.gbody2{
			text-align: center;
		}
		
		.gbody0-wrapper{
			display:flex;
			justify-content: center;
			align-items: center;
			padding:1vh;			
		}
			
		.gbody0{
				color: white;
				max-width:80%;
				text-align: justify;
				padding: 1vh;
				font-size: 1.3vh;
				margin: 0em;
		}
		
		.gbody-wrapper{
			position: relative;
			display:flex;
			justify-content: center;
			align-items: center;
			min-height: 55%;
		}
		
		.gbody1{
			padding: 0.3em;			
		}
		
		.grid-container{
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			column-gap: 1.2vh;
		}
		
		.grid-item{
			display: flex;
			flex-direction: column;
			border-radius: 0.5vh;
			cursor: pointer;
			color: white;
			font-family: sans-sherif;
			font-size: 1.1vh;
			padding: 0.7vh;
			width: 8vh;
			
		}
		
		.grid-item img{
			width: 7vh;
			margin-bottom: 0.3em;
			border-radius: 1vh;
		}
		
		.closebutton{
			background: nonde;
			border:none;
			padding:0;
			cursor:pointer;
		}
		
		.closeimg{
			width:3vh;
			height: 3vh;
			border-radius: 0.5vh;
		}
		
		
		.popup{
			display: none;
			position: fixed;
			
			top: 0; left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0,0,0,0.5);
			justify-content: center;
			align-items: center;
			/*opacity: 0.5;*/
			z-index; 1000;
		}
			
		.popup-header{
			text-align: right;
		}
					
		.popup-content{
			background-color: rgba(255,255,255,0.8);
			padding: 0.7vh;
			border-radius: 10px;
			text-align: center;
			width: 90%;
			font-size: 1.1vh;
		}
		
		.protocol-item{
			margin: 0.6vh;
			cursor: pointer;
		}
		
		.protocol-item img{
			width: 7vh;
			height: 7vh;
			margin-bottom: 0.7vh;
			border-radius: 1vh;
		}
		
		.default-button{
			height: 9%;
			border-width: 1px;
			border-color: gray;
			width: 50vw;
			margin: 1vh;
			padding: 1vh;
			background-color: rgba(0, 176, 240);
			color: white;
			font: sans-serif;
			font-weight: bold;
			font-size: 1.3vh;
		}
		
		.line{
			margin: 1vh auto;
			padding: 0em;
			height: 1px;
			width: 80vw;
			border-width: 0; color: gray; background-color: gray;
		}
		
		.minimg{
			width: 2vw;
			height: 2vw;
		}
		
		/* Responsive mobil*/
		@media (max-width: 600px){
			.grid-container{
					grid-template-columns: repeat(4, 1fr);
			}
			
			.popoup-content{
				padding: 1em;
			}
		}