:root {
	--overlap: 25px;
}

input[type=password]::-ms-reveal,
input[type=password]::-ms-clear
{
    display: none;
}

.icon .hover-text {
	opacity: 0;
}

.icon:hover .hover-text {
	opacity: 1;
}

.layout {
	width: 100%;
	display: grid;
	grid-template-areas:
		". logos ."
		". header ."
		". container ."
		". container ."
	;
	grid-template-columns: 15px auto 15px;
	grid-template-rows: auto 75px var(--overlap) auto;
}

.logos {
	grid-area: logos;
	display: grid;
	grid-template-areas:
		"logo .  logo2"
	;
	align-items: center;
	margin: 5px 0;
}

.logos.hide-logos {
	display: none;
}

.logo {
	grid-area: logo;
	margin-left: 15px;
}

.logo2 {
	grid-area: logo2;
	justify-self: end;
	margin-right: 15px;
}

.logo img, .logo2 img {
	height: 100%;
	max-height: 60px;
}

.header-bar {
	grid-row: 2 /span 2;
	grid-column: 1 /span 5;
	background-color: var(--header-color);
	color: var(--header-color-text);
	box-shadow: 0px 3px 8px #00000067;
	z-index: 1500;
}

.header {
	grid-area: header;
	display: grid;
	grid-template-areas:
		". . user menu-items"
	;
	grid-template-columns: auto auto max-content max-content;
	align-content: center;
	z-index: 2000;
	color: var(--light-color-text);
}

.container {
	display: grid;
	grid-area: container;
	grid-template-areas:
		"content"
		"content"
		"footer"
	;
	grid-template-columns: auto;
	grid-template-rows: var(--overlap) 1fr auto;
}

.container.showinfo {
	grid-template-areas:
		"content"
		"content"
		"info"
		"footer"
	;
	grid-template-columns: auto;
}

.container .info {
	display: none;
}

.container.showinfo .info {
	display: block;
}

.user {
	grid-area: user;
	display: grid;
	justify-items: end;
	grid-template-areas:
		"text icon"
		"name icon"
	;
	grid-template-columns: auto 45px;
	color: var(--light-color-text);
}

.user .text {
	grid-area: text;
	align-self: end;
}

.user .name {
	grid-area: name;
}

.user .icon {
	align-self: center;
}

.user-logout {
	background-image: var(--logout-image);
	grid-area: icon;
}

.user-logout a {
	width: 100%;
	height: 100%;
	display: inline-block;
}

.header .menu-items {
	grid-area: menu-items;
	display: grid;
	grid-auto-flow: column;
	margin-right: 10px;
}

.header .menu-item-group {
	display: grid;
	align-items: end;
	grid-auto-flow: column;
	height: 27px;
	margin-left: 10px;
	padding: 5px 9px;
	background-image: var(--menugroup-image);
	background-repeat: no-repeat;
}

.header .menu-item {
	background-repeat: no-repeat;
	background-position: center;
	border-radius: 50px;
	height: 36px;
	width: 36px;
	cursor: pointer;
	display: grid;
	justify-items: center;
	margin-left: 10px;
	font-size: .8rem;

	border-radius: 49%;
	height: 37px;
	width: 37px;
	background-size: 36px 36px;
}

.header .menu-item-group .menu-item {
	margin-left: 5px;
	width: 26px;
    height: 26px;
	margin-bottom: 5px;
	background-size: initial;
}

.header .menu-item-group .menu-item.menu-item-square {
	border-radius: 3px;
	height: 19px;
    margin-bottom: 8px;
}

.header .menu-item-group .menu-item.font-incr {
	margin-left: 10px;
}

.header .menu-item-group .menu-item.font-decr {
	margin-left: -5px;
	width: 20px;
	height: 20px;
}

.header .menu-item.hidden {
	display: none;
}

.header .menu-item:hover {
	background-color: #00000040;
}

.header .menu-item .hover-text {
	opacity: 0;
}

.header .menu-item:hover .hover-text {
	opacity: 1;
}

.header .icon {
	height: 36px;
	width: 36px;
}

.header .menu-item-group .icon {
	height: 26px;
	width: 26px;
	margin-bottom: 5px;
}

.header .menu-item-group .font-decr .icon {
	width: 20px;
	height: 20px;
}

.header .menu-item-group .menu-item-square .icon {
	height: 19px;
	margin-bottom: 8px;
}

.header .back {
	background-image: var(--back-image);
}

.header .stop {
	background-image: var(--stop-image);
}

.header .zoom-in {
	background-image: var(--zoomin-image);
}

.header .zoom-out {
	background-image: var(--zoomout-image);
}

.header .zoom-reset {
	background-image: var(--zoomreset-image);
}

.header .font-incr {
	background-image: var(--fontincr-image);
}

.header .font-decr {
	background-image: var(--fontdecr-image);
}

.info {
	grid-area: info;
	color: var(--dark-color);
	margin-bottom: 15px;
}

.info-tabs {
	display: flex;
	flex-direction: column-reverse;
	box-shadow: 0px 8px 6px #00000040;
	position: relative;
	font-size: 1.2rem;
	line-height: 2.0rem;
	font-weight: 700;
}

.info-tabs {
	border-radius: 18px;
}

.info-tabs .tab {
	border-radius: 0 0 18px 18px;
}

.info-tabs::before {
	background-color: var(--dark-color);
	color: var(--dark-color-text);
	opacity: .05;
	content: " ";
	width: 100%;
  height: 100%;
	position: absolute;
	pointer-events: none;
	border-radius: 18px;
}

.info-tabs .tab {
	padding: 5px 15px 15px 15px;
	box-shadow: 0px 10px 6px -2px #00000040;
	display: grid;
	justify-items: start;
	z-index: 1000;
}

.info-tabs .tab > span {
	text-transform: uppercase;
	padding: 15px 0 5px;
}

.info-tabs .tab .title {
	text-transform: uppercase;
	font-size: 1.6rem;
	padding: 5px;
}

.info-tabs .tab .value {
	display: grid;
	width: calc(100% - 10px);
	border-bottom: 1px solid var(--border-color) ;
	grid-template-columns: 35px 1fr 105px;
	grid-template-areas:
		"icon label dynamic-value"
	;
	align-items: center;
	padding: 5px;
	gap: 5px;
}

.info-tabs .tab .dynamic-value {
	color: var(--veka-gray);
	grid-area: dynamic-value;
	font-size: 2rem;
	font-weight: 700;
	display: grid;
	grid-auto-flow: column;
	align-items: center;
}

.info-tabs .tab .label {
	grid-area: label;
	font-size: 1.2rem;
}

.info-tabs .tab .icon {
	grid-area: icon;
}

.info-tabs .tab .icon svg path[stroke]:not([stroke='none']),
.info-tabs .tab .icon svg rect[stroke]:not([stroke='none']),
.info-tabs .tab .icon svg circle[stroke]:not([stroke='none']),
.info-tabs .tab .icon svg line[stroke]:not([stroke='none'])
{
	stroke: var(--dark-color);
}

.info-tabs .tab .icon svg path[fill]:not([fill='none']),
.info-tabs .tab .icon svg rect[fill]:not([fill='none']),
.info-tabs .tab .icon svg circle[fill]:not([fill='none']),
.info-tabs .tab .icon svg line[fill]:not([fill='none'])
{
	fill: var(--dark-color);
}

.info-tabs .tab:first-child {
	box-shadow: none;
}

.info-tabs .tab.contact {
	padding: 0;
	grid-template-columns: 15px auto 15px;
	grid-template-rows: 5px auto 30px 15px;
	overflow: hidden;
}

.info-tabs .tab.contact .contact-image {
	grid-row: 1 / span 4;
	grid-column: 1 / span 3;
	justify-self: end;
	background-image: url(/public/images/nascholing/contact.png);
	width: 100%;
	background-repeat: no-repeat;
	background-position: bottom right;
}

.info-tabs .tab.contact > span {
	grid-row: 2;
	grid-column: 2;
}

.info-tabs .tab.contact > .button {
	grid-row: 3;
	grid-column: 2;
}

.footer {
	grid-area: footer;
	align-items: center;
	display: grid;
	grid-template-areas:
	"copyright veka"
	;
	grid-template-rows: 100%;
	margin: 0 15px 10px;
	font-size: 1.2rem;
	color: var(--veka-light-gray);
}

.copyright {
	grid-area: copyright;
}

.veka {
	grid-area: veka;
	justify-self: end;
	height: 100%;
	display: grid;
	align-items: center;
	grid-template-rows: 25px;
	gap: 5px;
	grid-auto-flow: column;
}

.content-scroll {
	grid-area: content;
	border-radius: 10px;
	padding: var(--overlap) 0 15px 15px;
	background-color: white;
	box-shadow: 0px 8px 6px #00000040;
	z-index: 2000;
	margin-bottom: 25px;
	overflow: hidden;
}

.content {
	overflow: auto;
	max-height: 100%;
	max-width: 100%;
	height: 100%;
	padding-right: 15px;
}

.additional-info {
	cursor: pointer;
}

.additional-info .additional-info-icon {
	width: 16px;
	height: 16px;
}

.additional-info .additional-info-icon svg circle {
	fill: var(--dark-color);
}

.additional-info .additional-info-icon svg path {
	fill: var(--dark-color-text);
}

.additional-info:hover .additional-info-icon svg circle {
	fill: var(--highlight-color);
}

.additional-info:hover .additional-info-icon svg path {
	fill: var(--highlight-color-text);
}

.additional-info .additional-message {
	display: none;
}

.intro-content {
	display: none;
}

@media (min-width: 1000px) {
	.layout {
		grid-area: content;
		display: grid;
		grid-template-areas:
			". . logos . ."
			". . header . ."
			". . container . ."
			". . container . ."
		;
		grid-template-columns: auto 15px minmax(auto, 1440px) 15px auto;
		grid-template-rows: auto 55px var(--overlap) 1fr auto;
		width: auto;
		max-height: 100%;
		height: 100%;
	}

	.container.showinfo {
		grid-template-areas:
			"info . content"
			"info . content"
			"info . footer"
		;
		grid-template-columns: 340px 30px auto;
	}

	.info-tabs::before, .info-tabs {
		border-radius: 0 0 18px 18px;
	}

	.info-tabs .tab:last-child {
		margin-top: var(--overlap);
	}

	.content-scroll {
		margin-bottom: 10px;
	}
}