/* CSS Document */

@font-face {
  font-display: swap;
  font-family: "Roboto";
  font-style: normal;
  font-weight: normal;
  src: url("fonts/roboto-v47-latin-ext-regular.woff2") format("woff2")
}

@font-face {
  font-display: swap;
  font-family: "Roboto";
  font-style: normal;
  font-weight: bold;
  src: url("fonts/roboto-v47-latin-ext-600.woff2") format("woff2")
}

* {box-sizing: border-box}
body {font: 100%/1.5 Roboto, Arial, Helvetica, sans-serif; color: #000080; margin: 0; padding: 0; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh}

header {background: #EEEEF7}
header a {flex: none; align-self: start}
header img {width: 100px; height: 100px}
header nav {color: #FFFFFF; background: #336699}
main {flex: 1}
footer {color: #FFFFFF; background: #335580}

.box {max-width: 60em; margin: 0 auto; padding: 1em}
.flex {display: flex; flex-wrap: wrap}
.shadow {background: #EEEEF7}
.c-right {align-self: end; padding: .6em .8em}

main .box {padding-bottom: 2em}
header .flex {align-items: center; gap: 1em}
footer .flex {gap: 1em 3em}
form .flex {gap: 0 2em}

.tiles, .contacts {display: flex; gap: 0 7em; flex-wrap: wrap}
.tiles div {flex: 20em}
footer nav, footer ul, .contacts div {flex: auto}

.center {text-align: center}

a {color: inherit; text-decoration: none; overflow-wrap: anywhere}
.maps a {display: inline-block; padding: .6em .8em; vertical-align: middle}
.tiles a {display: block; margin-top: 1em}

.ico {white-space: nowrap}
.ico:before {display: inline-block;
			background-repeat: no-repeat;
			background-size: contain;
			width: 1.2em; height: 1.2em;
			vertical-align: -.25em;
			margin-right: .5em;
			content: ""
			}
.ham:before {background-image: url("icos/menu.svg")}
.ham.crs:before {background-image: url("icos/close.svg")}
.mobile:before {background-image: url("icos/mobile-solid.svg")}
.mail:before {background-image: url("icos/mail-solid.svg")}

.sub:after {display: inline-block;
			background-image: url("icos/down.svg");
			background-repeat: no-repeat;
			background-size: contain;
			width: 1.2em; height: 1.2em;
			vertical-align: -.25em;
			margin-right: -.5em;
			content: ""
			}
.sub.up:after {background-image: url("icos/up.svg")}

button {cursor: pointer; font: inherit; color: inherit; background: inherit; border: none; margin: 0; padding: 0 .4em}

.ham {display: block; font-size: 120%; padding: .4em; width: 100%}
.sub {width: 100%; padding: .6em .8em}

header ul, footer ul {
	list-style: none;
	margin: 0;
	padding: 0
	}

header ul {
	display: none;
	flex-direction: column;
	text-align: center;
	border-top: 1px solid #FFFFFF
	}

header ul li a {
	display: block;
	padding: .6em .8em;
	border-top: 1px solid #335580
	}

header ul li ul {
	display: none;
	background: #4477AA;
	border: none
	}

header ul li ul li a {
	border-top: 1px solid #336699
	}

footer ul li a {
	display: inline-block;
	padding: .6em .8em
	}

header button:focus-visible, header ul li a:focus-visible, footer ul li a:focus-visible {
	background: #113360
	}

header ul.show,
html:not(.js-on) header nav:focus-within > ul {
	display: flex
	}

header ul li.show > ul,
html:not(.js-on) header ul li:focus-within > ul {
	display: block
	}

.s-menu a, .controls button {display: inline-block;
		margin: 0 .4em 1em 0;
		padding: 0 .4em;
		background: #EEEEF7;
		border: 1px solid #EEEEF7;
		border-radius: 5px
		}

.to-top {display: none;
		position: fixed;
		bottom: 2em;
		right: .7em;
		padding: 0 .4em;
		font-size: 150%;
		color: #FFFFFF;
		background: #000020;
		opacity: .7;
		border-radius: 5px
		}
.to-top.show {display: block}

h1 {color: #224466; font-size: 180%; font-weight: normal; margin: 0; flex: 1}
h2 {color: #CC0000; font-weight: normal; scroll-margin-top: .8em}
h3 {scroll-margin-top: .8em}
.pre1 h2 {padding-left: 1.1em; text-indent: -1.1em}
.pre2 h2 {padding-left: 1.7em; text-indent: -1.7em}
.js-on .index h3 {font-size: 100%; font-weight: normal}

.js-on .cph {width: fit-content; cursor: pointer}
.js-on .hidden, html:not(.js-on) .controls {display: none}

ol[type="a"] li::marker {content: counter(list-item, lower-alpha) ")  "}
.toc li, .useful-links li, .details li, .sitemap li {margin-top: 1em}
.details p, .index p {margin-left: 1em}
.details .cph.bold, .index .cph.bold, html:not(.js-on) .details .cph {font-weight: bold}
.sitemap ul {list-style: none}

table {border-collapse: collapse; text-align: left}
thead {background: #EEEEF7}
tr {border-bottom: 1px solid #335099}
tbody th {font-weight: normal}
th:nth-of-type(1)  {padding: .3em .3em .3em 2.3em; text-indent: -2em; width: 25em}
th:nth-of-type(2), td:nth-of-type(1) {padding: .3em; width: 12.5em}
th:nth-of-type(3), td:nth-of-type(2) {padding: .3em; width: 4em; text-align: right}

form {max-width: 48em; margin: 0 auto; padding: 0 2%; overflow: auto}
input, textarea, select {
		font: inherit;
		color: inherit;
		border: 1px solid #BBBBD1;
		padding: .3em .6em;
		width: 100%
		}
form p {flex: 15em; margin-top: 0}
select {height: 2.2em; background: #FFFFFF}
input[type="submit"], select {cursor: pointer}
input[type="submit"]:focus-visible {background: #113360}
input[type="submit"] {color: #FFFFFF; background: #336699; min-width: fit-content; max-width: 12em}
.req-hint {text-align: right; color: #505060; font-size: 80%; margin-bottom: .2em}
.test {max-width: 12em; text-align: center}
.test input {text-align: center; letter-spacing: .2em}
form label span {font-size: 1.25em; color: #800000; display: inline-block; padding: 0 .5em; white-space: nowrap}
form img {height: .7em; width: auto}

.ok-msg {color: #008000; font-size: 125%}
.err-msg {color: #E00000; font-size: 125%}

hr {color: #335099; background: #335099; border: none; height: 1px}

img {max-width: 100%; height: auto; border: none}

@media (hover: hover) and (pointer: fine) {
	header button:hover, header ul li a:hover, footer ul li a:hover {background: #113360}
	.s-menu a:hover, .controls button:hover {background: #FFFFFF; border: 1px solid #BBBBD1}
	.to-top:hover {opacity: .8}
	input[type="submit"]:hover {background: #113360}
	}

@media (min-width: 50em) {
	.ham {display: none}
	header ul {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; border: none; text-align: left}
	header ul li a, header ul li ul li a {border: none}
	header ul li ul {background: #336699; position: absolute; border-top: 1px solid #FFFFFF}
	table {margin-left: 1em}
	html:not(.js-on) header ul li:hover > ul {display: block}
	}

@media (min-width: 60em) {
	h1 {font-size: 200%}
	header img {width: 120px; height: 120px}
	}

@media (max-width: 25em) {
	tr, th:nth-of-type(1) {display: block; width: auto}
	th:nth-of-type(2), td:nth-of-type(1) {padding-left: 2.3em; width: 100%}
	}

@media print {
	header {border-bottom: 1px solid #335099}
	footer {border-top: 1px solid #335099}
	header, footer, .shadow {color: inherit; background: inherit}
	header nav, .s-menu, .controls, .to-top.show, .maps, form, footer a:not(.ico) {display: none}
	.mobile:before {content: url("icos/mobile-solid-print.svg")}
	.mail:before {content: url("icos/mail-solid-print.svg")}
	}

@media (prefers-color-scheme: dark) {
	body {background: #303030; color: #DDDDDD}
	header, footer {background: #304050}
	header img {filter: grayscale(1) brightness(1.9)}

	.shadow {background: #151515}

	header ul {border-top: 1px solid #303030}
	.s-menu a, .controls button {background: #505050; border: 1px solid #505050}
	.to-top {color: #000000; background: #CCCCCC}

	h1 {color: #DDDDDD}
	h2 {color: #DD9999}

	thead {background: #505050}
	tr {border-bottom: 1px solid #DDDDDD}

	input, textarea, select {color: #DDDDDD; background: #303030; border: 1px solid #909090}
	input[type="submit"]:focus-visible {background: #113360}
	input[type="submit"] {background: #353535}
	.req-hint {color: #BBBBBB}
	form label span {filter: invert(100%) hue-rotate(180deg)}

	hr {color: #DDDDDD; background: #DDDDDD}
	}

@media (prefers-color-scheme: dark) and (min-width: 50em) {
	header ul {border: none}
	header ul li ul {border-top: 1px solid #303030}
	}

@media (prefers-color-scheme: dark) and (hover: hover) and (pointer: fine) {
	.s-menu a:hover, .controls button:hover {background: #303030; border: 1px solid #DDDDDD}
	input[type="submit"]:hover {background: #113360}
	}