:root {
	--font-mono:		'Press Start 2P', monospace;
	--font-monospace:	"VT323", monospace;
	--font-barcode:		"Libre Barcode 128", system-ui;
	
	--body-color:	LightSlateGray;
	--bg-color: 	LightSeaGreen;
	--shadow-bg: 	DarkSlateGray;
	--text-color: 	Black;
	--title-bg:		Teal;
	
	--body-color:	Navy;
	--bg-color: 	Blue;
	--shadow-bg: 	Black;
	--text-color: 	White;
	--title-bg:		blue;
	
	--border-color:	White;
	--bar-bg: 		Silver;
	--bar-text: 	Black;
	
	--char-height: 	1.0rem;
	--char-width: 	0.8rem;
	--vertical-scale: 	3;
	
	--single-border-width: calc(var(--char-width)/10);
	--double-border-width: calc(var(--single-border-width)*3);
	
	--single-spacer-w-out: calc(var(--char-width)/5);
	--single-spacer-w-in : calc(var(--char-width)/5*3);
	--single-spacer-h-out: calc(var(--char-height)/5*2.5);
	--single-spacer-h-in : calc(var(--char-height)/5*3.6);
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	line-height: 1.2rem;
	font-size: 24px;
}

body {
	font-family: var(--font-monospace);
	background-color: var(--body-color);
	color: var(--text-color);
	user-select: none;
	line-height: var(--char-height);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	line-height: 1.2rem;
}

p { margin: var(--char-height) var(--char-width); }

a { color: var(--text-color); }

object, iframe, #state {
	margin: 16px auto;
	width: 80%;
    	grid-column: auto / span 2;
	min-height: 320px;
	border: 0;
}
.logo {
	text-align: center;
	color: white;
	user-select: none;
}

.logo > .barcode {
	font-family: var(--font-barcode);
	font-weight: 400;
	font-style: normal;
	font-size: 2.5rem;
	display: block;
	/*padding: 0 var(--char-width);
	margin-bottom: -0.4rem;*/
	line-height: 1rem;
	overflow: hidden;
}
.logo > .barcode.stretch {
	-webkit-transform:scale(1,var(--vertical-scale)); /* Safari and Chrome */
	-moz-transform:scale(1,var(--vertical-scale)); /* Firefox */
	-ms-transform:scale(1,var(--vertical-scale)); /* IE 9 */
	-o-transform:scale(1,var(--vertical-scale)); /* Opera */
	transform:scale(1,var(--vertical-scale)); /* W3C */
    margin-top: 0.6em;
}
.logo > .text {
	font-family: "VT323", monospace;
	display: block;
	font-size: 1rem;
	letter-spacing: 0.6rem;
	padding-left: 0.6rem;
	line-height: 1rem;
    margin-top: 0.3em;
}
.logo .text::after {
	display: block;
	margin: 1rem;
	font-size: 2rem;
	margin: 20px 0;
}
/*.closed .logo  				{color: red; 	}*/
.closed .logo .text::after		{content: "CLOSED";	}
/*.open .logo	 				{color: green;	}*/
.open .logo .text::after		{content: "OPEN";	}
.container.closed, .container.closed > .title	{ background-color: red; }
.container.open, .container.open > .title		{ background-color: green; }

.adres {
	text-align: right;
}

.bar {
	background-color: var(--bar-bg);
	color: var(--bar-text);
	/*height: calc(var(--char-height) + 4px);*/
	width: 100%;
	padding: 2px var(--char-width);
	text-align: center;
}
.bar a { color: var(--bar-color); }
.bar.top { display: none; }
.bar.bottom { margin-top: auto; }

.container {
	position: relative;
	background-color: var(--bg-color);
	margin: var(--char-height) var(--char-width);
	padding: var(--single-spacer-h-out) var(--single-spacer-w-out);
}

#header {
	margin-left: calc(var(--char-width) * 2);
	margin-right: calc(var(--char-width) * 2);
	width: calc(100% - (var(--char-width) * 4));
}

#header .content {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: flex-end;
}

#menu.container { /* double border style */
	margin-top: calc(var(--char-height) * 2);
	padding: var(--single-spacer-h-out) var(--single-spacer-w-out);
}

.container.with-shadow::before {
	content: '';
	position: absolute;
	top: var(--char-height);
	left: var(--char-width);
	width: 100%;
	height: 100%;
	background-color: var(--shadow-bg);
	z-index: -1;
}

.content {
	background-color: transparent;
	position: relative;
	min-height: var(--char-height);
	height: 100%;
}

.border-single {
	border-width: var(--single-border-width) calc(var(--single-border-width) * 2);
	border-style: solid;
	border-color: var(--border-color);
	padding: var(--single-spacer-h-in) var(--single-spacer-w-in);
}

.border-double {
	border-width: var(--double-border-width) calc(var(--double-border-width) * 2);
	border-style: double;
	border-color: var(--border-color);
	padding: var(--single-spacer-h-out) var(--single-spacer-w-out);
}

.title {
	color: var(--border-color);
	position: absolute;
	top: 0;
	background-color: var(--title-bg);
	padding: 0 var(--char-width);
	margin: 0 var(--char-width);
	z-index: 1;
	text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: calc(100% - (var(--char-width) * 2));
}
.toggle {
	padding: 0;
	margin: 0 var(--char-width);
}

.left   { left:  0; }
.center { left:  50%; transform: translateX(-50%); margin-left: auto; }
.right  { right: 0; }

.left-column {
	width: 100%;
	grid-column: auto / span 1;
	/*width: calc((100% - (var(--char-width) * 4)) / 3);*/
	display: inline-block;
	vertical-align: top;
}

#menu ul {
	list-style: none;
}

#menu a {
	color: var(--text-color);
	text-decoration: none;
	display: block;
	padding-left: var(--char-width);
}

#menu a:focus, #menu a:hover {
	background-color: var(--text-color);
	color: var(--bg-color);
	outline: none;
}

#main-content {
	/*width: 100%;*/
	grid-column: auto / span 2;
	/*width: calc(((100% - (var(--char-width) * 4)) / 3) * 2 + (var(--char-width) * 2));*/
	display: inline-block;
	vertical-align: top;
	height: calc(100% - var(--char-height)* 2);
}

.main-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	justify-content: space-between;
	align-items: start;
	/*display: flex;
	flex-wrap: wrap;*/
	margin: 0 var(--char-width) var(--char-height);
	height: 100%;
}

.procedure, .fees {
	display: none;
}
input.toggle {
	display: none;
}
label.toggle::before {
	content: "▼ ";
}
input.toggle:checked + label.toggle::before {
	content: "▲ ";
}
label.toggle {
	cursor: pointer;
	display: block;
}
#procedure-toggle:checked ~ .procedure.text {
	display: block;
}
#fees-toggle:checked ~ .fees.text {
	display: block;
}

#procedure-toggle:not(:checked) ~ .procedure.toggle::after {
	display: block;
	content: "...";
	margin-left: 1.2rem;
}
#fees-toggle:not(:checked) ~ .fees.toggle::after {
	display: block;
	content: "...";
	margin-left: 1.2rem;
}

/* high res styles */
@media screen and (min-width: 1200px) {
	* { font-size: 1.4rem; }
}
@media screen and (min-width: 1600px) {
	* { font-size: 1.6rem; }
}
@media screen and (min-width: 2000px) {
	* { font-size: 1.8rem; }
}
@media screen and (min-width: 2400px) {
	* { font-size: 2.0rem; }
}
@media screen and (min-width: 2800px) {
	* { font-size: 2.2rem; }
}

/* Mobile styles */
@media screen and (max-width: 760px) {
	#header {
		margin-left: calc(var(--char-width));
		margin-right: calc(var(--char-width));
		width: calc(100% -(var(--char-width)* 2));
	}
	.main-wrapper {
		margin: 0 0 var(--char-height);
	}
	.logo .barcode {
		font-size: 2rem;
	}
	.logo .text {
		letter-spacing: 0.3rem;
		padding-left: 0.3rem;
	}
	.left-column {
		width: 100%;
		display: block;
	}
	object {
		margin: 16px auto;
		width: 100%;
	}

	#main-content {
		/*width: 100%;
		width: calc(100% - (var(--char-width) * 2));*/
		display: block;
	}

	.main-wrapper {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	/* Menu toggle styles */
	#menu-toggle {
		display: none;
	}

	#menu .title::before {
		content: "▼ ";
	}
	#menu ul {
		display: none;
	}

	#menu-toggle:checked ~ .content ul {
		display: block;
	}

	#menu-toggle:checked + .title::before {
		content: "▲ ";
	}
	
	#menu-toggle:not(:checked) ~ .content::after {
		display: block;
		content: "...";
		margin-left: 0.8rem;
	}

	#menu .title {
		cursor: pointer;
	}
}

@media screen and (max-width: 640px) {
	#header > div.content {
		align-items: center;
		flex-direction: column;
		text-align: center;
	}
	.adres {
		text-align: center;
	}
	#header > .content > .logo > .text {
		display: none;
	}
	.logo .barcode {
		font-size: 1.6rem;
	}
	.logo .text {
		letter-spacing: 0.2rem;
		padding-left: 0.2rem;
	}
}

@media screen and (max-width: 500px) {
	.logo .barcode {
		font-size: 1.0rem;
	}
	.logo .text {
		letter-spacing: 0.1rem;
		padding-left: 0.1rem;
	}
	.logo .text::after {
		font-size: 1.4rem;
	}
	.logo > .barcode.stretch {
		margin-top: 1em;
	}
	.adres {
		font-size: 0.8rem;
	}
	p {
		margin: var(--char-height) 0;
	}
}

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

/* Hide Current Directory on small height */
@media screen and (max-height: 1000px) and (max-width: 760px) {
	#current-dir {
		display: none;
	}
}