:root {
	--light-h: 204;
	--light-s: 76%;
	--light-l: 67%;
	--light-color: hsl(var(--light-h), var(--light-s), var(--light-l));
	--light-color-hover: hsl(var(--light-h), var(--light-s), calc(var(--light-l) * .8));
	--light-color-text: #ffffff;

	--dark-h: 203;
	--dark-s: 100%;
	--dark-l: 35%;
	--dark-color: hsl(var(--dark-h), var(--dark-s), var(--dark-l));
	--dark-color-hover: hsl(var(--dark-h), var(--dark-s), calc(var(--dark-l) + 25%));
	--dark-color-light: hsla(var(--dark-h), var(--dark-s), var(--dark-l), .05);
	--dark-color-light-border: hsla(var(--dark-h), var(--dark-s), var(--dark-l), .25);
	--dark-color-text: #ffffff;

	--highlight-h: 32;
	--highlight-s: 100%;
	--highlight-l: 42%;
	--highlight-color: hsl(var(--highlight-h), var(--highlight-s), var(--highlight-l));
	--highlight-color-hover: hsl(var(--highlight-h), var(--highlight-s), calc(var(--highlight-l) * .8));
	--highlight-color-text: #ffffff;

	--header-color:var(--dark-color);
	--header-color-text:var(--dark-color-text);

	--border-color: hsl(var(--dark-h), var(--dark-s), calc(var(--dark-l) + 40%));
	
	--logout-image: url("/public/images/nascholing/icon-logout-white.svg");
	--back-image: url("/public/images/nascholing/icon-back-white.svg");
	--stop-image: url("/public/images/nascholing/icon-stop-white.svg");
	--menugroup-image: url("/public/images/nascholing/icon-menugroup-white.svg");
	--zoomin-image: url("/public/images/nascholing/icon-zoomin-white.svg");
	--zoomout-image: url("/public/images/nascholing/icon-zoomout-white.svg");
	--zoomreset-image: url("/public/images/nascholing/icon-zoomreset-white.svg");
	--fontincr-image: url("/public/images/nascholing/icon-fontincr-white.svg");
	--fontdecr-image: url("/public/images/nascholing/icon-fontdecr-white.svg");
	--color-success: #379839;
	--color-success-semi-transparent: #36983867;
	--color-fail: #BF291D;
	--color-warn: #f60;
	--veka-gray: #868686;
	--veka-light-gray: #B5B5B5;
}

@font-face {
	font-family: 'open sans';
	src: url('/public/css/webfonts/OpenSans-Regular.ttf') format('truetype');
	font-weight: 400;
}

@font-face {
	font-family: 'open sans';
	src: url('/public/css/webfonts/OpenSans-SemiBold.ttf') format('truetype');
	font-weight: 600;
}

@font-face {
	font-family: 'open sans';
	src: url('/public/css/webfonts/OpenSans-Bold.ttf') format('truetype');
	font-weight: 700;
}

@font-face {
	font-family: 'open sans';
	src: url('/public/css/webfonts/OpenSans-ExtraBold.ttf') format('truetype');
	font-weight: 900;
}

html {
	font-size: 10px;
}

html, body {
	margin: 0;
	font-family: 'open sans';
	width: 100%;
	height: 100%;
}

h1, p {
	margin: 0;
}

img {
	max-height: 100%;
	max-width: 100%;
	display: block;
}

.button {
	border-radius: 50px;
	padding: 3px 15px;
	font-size: 1.6rem;
	line-height: 2.4rem;
	cursor: pointer;
	min-width: 120px;
	text-align: center;
	font-weight: 400;
	border: none;
}

.square-button {
	border-radius: 5px;
}

.button-light {
	background-color: var(--highlight-color);
	color: var(--highlight-color-text);
}

.button-light:not(.disabled):hover,
.button-light.visited {
	background-color: var(--highlight-color-hover);
}

.button-dark {
	background-color: var(--dark-color);
	color: var(--dark-color-text);
}

.button-dark:not(.disabled):hover,
.button-dark.visited {
	background-color: var(--dark-color-hover);
}

.loading-area {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(5,5,5,.5);
}

.loader {
	border: 8px solid var(--veka-light-gray);
	border-top: 8px solid var(--highlight-color);
	border-radius: 50%;
	width: 25px;
	height: 25px;
	animation: spin 2s linear infinite;
}

.loader-position-top {
	position: absolute;
	top: 0;
	left: 0;
	margin: 10px;
}
  
@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}