@font-face {
	font-family: 'themix';
	src: url('https://cdn.skauting.cz/fonts/TheMix_LT_400.eot');
	src: url('https://cdn.skauting.cz/fonts/TheMix_LT_400.eot? #iefix') format('embedded-opentype');
	src: url('https://cdn.skauting.cz/fonts/TheMix_LT_400.woff') format('woff'),
	url('https://cdn.skauting.cz/fonts/TheMix_LT_400.woff2') format('woff2'),
	url('https://cdn.skauting.cz/fonts/TheMix_LT_400.otf') format('opentype'),
	url('https://cdn.skauting.cz/fonts/TheMix_LT_400.svg#themix') format('svg');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'themix';
	src: url('https://cdn.skauting.cz/fonts/TheMix_LT_400i.eot');
	src: url('https://cdn.skauting.cz/fonts/TheMix_LT_400i.eot? #iefix') format('embedded-opentype');
	src: url('https://cdn.skauting.cz/fonts/TheMix_LT_400i.woff') format('woff'),
	url('https://cdn.skauting.cz/fonts/TheMix_LT_400i.woff2') format('woff2'),
	url('https://cdn.skauting.cz/fonts/TheMix_LT_400i.otf') format('opentype'),
	url('https://cdn.skauting.cz/fonts/TheMix_LT_400i.svg#themix') format('svg');
	font-weight: 400;
	font-style: italic;
}

@font-face {
	font-family: 'themix';
	src: url('https://cdn.skauting.cz/fonts/TheMix_LT_700.eot');
	src: url('https://cdn.skauting.cz/fonts/TheMix_LT_700.eot? #iefix') format('embedded-opentype');
	src: url('https://cdn.skauting.cz/fonts/TheMix_LT_700.woff') format('woff'),
	url('https://cdn.skauting.cz/fonts/TheMix_LT_700.woff2') format('woff2'),
	url('https://cdn.skauting.cz/fonts/TheMix_LT_700.otf') format('opentype'),
	url('https://cdn.skauting.cz/fonts/TheMix_LT_700.svg#themix') format('svg');
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: 'themix';
	src: url('https://cdn.skauting.cz/fonts/TheMix_LT_700i.eot');
	src: url('https://cdn.skauting.cz/fonts/TheMix_LT_700i.eot? #iefix') format('embedded-opentype');
	src: url('https://cdn.skauting.cz/fonts/TheMix_LT_700i.woff') format('woff'),
	url('https://cdn.skauting.cz/fonts/TheMix_LT_700i.woff2') format('woff2'),
	url('https://cdn.skauting.cz/fonts/TheMix_LT_700i.otf') format('opentype'),
	url('https://cdn.skauting.cz/fonts/TheMix_LT_700i.svg#themix') format('svg');
	font-weight: 700;
	font-style: italic;
}

@font-face {
	font-family: 'skautbold';
	src: url('https://cdn.skauting.cz/fonts/skaut-bold-webfont.eot');
	src: url('https://cdn.skauting.cz/fonts/skaut-bold-webfont.eot? #iefix') format('embedded-opentype');
	src: url('https://cdn.skauting.cz/fonts/skaut-bold-webfont.woff') format('woff'),
	url('https://cdn.skauting.cz/fonts/skaut-bold-webfont.otf') format('opentype'),
	url('https://cdn.skauting.cz/fonts/skaut-bold-webfont.svg#skautbold') format('svg');
	font-weight: normal;
	font-style: normal;
}

:root {
	background: var(--color-background) repeat 80px -40px;
	--border-radius: 6px;
	font-family: 'themix', sans-serif;
	box-sizing: border-box;
	color: var(--color-main);
	color-scheme: light dark;
	accent-color: var(--color-main);
}

@media (prefers-color-scheme: light) {
	:root {
		--color-background: #e6ebed;
		--color-card-background: #f9f9f9;
		--color-input-background: #ffffff;
		--color-main: #0D71B9;
		--color-accent: #b9550d;
		--color-fading: #a6d9ff;
		--color-light: #3ba5f1;
		--color-dark: #06375a;
		--color-grey: #636363;
		--color-link: #0000ee;
		--color-link-visited: #551a8b;
		background-image: url("/background_shapes_2016_light_600.png");
	}
}

@media (prefers-color-scheme: dark) {
	:root {
		--color-background: #212121;
		--color-card-background: #252525;
		--color-input-background: #2f2f2f;
		--color-main: #85A2D5;
		--color-accent: #d5b885;
		--color-fading: #1f2e3d;
		--color-light: #3e6ab5;
		--color-dark: #d1dcef;
		--color-grey: #888888;
		--color-link: lightskyblue;
		--color-link-visited: #ad76de;
		background-image: url("/background_shapes_2016_dark_600.png");
	}
}

*, *::before, *::after {
	box-sizing: inherit;
}

footer {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.footer-item {
	margin-top: 8px;
	align-self: center;
}

.footer-logo {
    margin: 20px;
    width: 200px;
}

input, textarea, select, button {
	font-family: 'themix', sans-serif;
	background: var(--color-input-background);
	color: var(--color-dark);
}

h1 {
	font-family: 'skautbold', sans-serif;
}

.wrapper {
	max-width: 998px;
	margin: 0 auto;
}

.card {
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
	background-color: var(--color-card-background);
	border-radius: var(--border-radius);
	padding: 35px 44px;
	margin-bottom: 11px;
	text-align: center;
}

.card-half {
	max-width: 50%;
	margin: 0 auto 11px;
}

.card-double-layout {
	display: flex;
	flex-wrap: wrap;
}

.card-double {
	width: 46%;
	margin-right: 2%;
	margin-left: 2%;
}

h1 {
	margin-top: 30px;
}

h2, h3 {
	margin-top: 0;
}

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

a:visited {
	color: var(--color-link-visited);
}

.btn {
	background: var(--color);
	color: var(--color-card-background);
	border-radius: var(--border-radius);
	text-decoration: none;
	font-size: 25px;
	display: block;
	text-align: center;
	padding: 15px;
	border: none;
	cursor: pointer;
}

.btn:visited {
	color: var(--color-card-background);
}

.btn-grey {
	--color: var(--color-grey);
}

.btn-small {
	display: inline-block;
}

.btn-mini {
	display: inline-block;
	font-size: inherit;
	padding: 2px 6px;
	margin: 1px 0;
}

.two-cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 13px;
}

.login-card {
	margin: 0 auto;
	max-width: 400px;
	padding: 1em;
	display: flex;
	flex-direction: column;
}

/* Steps v2 */

ul.steps {
	width: 100%;
	display: flex;
	list-style: none;
	padding: 0;
	flex-direction: row;
}

li.step {
    width: 33%;
    position: relative;
    text-align: center;
	font-size: 1.25rem;
	font-weight: bolder;
	color: var(--color-light);
}

li.step::before {
	content: " ";
    line-height: 30px;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: block;
    text-align: center;
    margin: 0 auto 10px;
    background-color: var(--color-fading);
}

li.step::after {
	content: "";
    position: absolute;
    width: 100%;
    height: 4px;
    background-color: var(--color-fading);
    top: 15px;
    left: -50%;
    z-index: -1;
}

li.step:first-child:after {
    content: none;
}

li.step.is-active {
	color: var(--color-main);
}

li.step.is-active::before,
li.step.is-active::after {
	border-color: var(--color-main);
    background-color: var(--color-main);
}

.registration-theme,
.open-theme,
.closed-theme,
.approved-theme,
.paid-theme,
.admin-theme {
	color: var(--color-main);
	--color: var(--color-main);
}

.form-group {
	font-size: 20px;
	text-align: left;
	margin-bottom: 1rem;
}

.form-group-middle {
	display: flex;
	flex-flow: column;
	align-items: center;
	row-gap: 10px;
}

.form-control {
	border: none;
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
	border-radius: var(--border-radius);
	font-size: inherit;
	padding: var(--border-radius);
	display: block;
	flex-grow: 1;
}
.form-group-inline {
	display: flex;
	margin-bottom: 10px;
}

.form-control:valid {
	box-shadow: 1px 1px 1px #1e341b;
}

.form-control:invalid {
	box-shadow: 2px 2px 2px #a21f16;
}

.form-wide {
	width: 100%;
}

.overdue {
	color: var(--color-accent);
}

.hightlight {
	color: var(--color-accent);
}

.btn[type=submit] {
	width: 100%;
}

.btn-small[type=submit] {
	width: inherit;
}

.btn-mini[type=submit] {
	width: inherit;
}

textarea {
	min-height: 3rem;
}

div.payment-cancelled {
	text-decoration: line-through;
}

th {
	background: var(--color);
	color: white;
}

tr:nth-child(even) {
	background: var(--color-background);
}

.alert {
	border-radius: var(--border-radius);
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
	margin-bottom: 1em;
	padding: 1em;
	text-align: center;
	background: var(--color, blue);
}

@media (prefers-color-scheme: light) {
	.alert-info {
		--color: #b17e4d;
		color: var(--color-dark);
	}
	.alert-success {
		--color: #b6c1ab;
		color: var(--color-dark)
	}
	.alert-warning {
		--color: #f3d046;
		color: var(--color-dark)
	}
	.alert-error {
		--color: #a21f16;
		color: white;
	}
}
@media (prefers-color-scheme: dark) {
	.alert-info {
		--color: #67492d;
		color: var(--color-dark);
	}
	.alert-success {
		--color: #444d3f;
		color: var(--color-dark)
	}
	.alert-warning {
		--color: #644e10;
		color: var(--color-dark)
	}
	.alert-error {
		--color: #c72419;
		color: black;
	}
}

.card-divide {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 33px;
	position: relative;
	margin-bottom: 30px;
}

@supports (display: grid) {
	.card-divide::before {
		height: 100%;
		width: 1px;
		position: absolute;
		left: 50%;
		background: #ccc;
		content: '';
	}
}

.text-left {
	text-align: left;
}

.text-center {
	text-align: center;
}

.text-right {
	text-align: right;
}

.material-icons {
	color: var(--color);
	vertical-align: middle;
}

.text-small {
	font-size: .8rem;
}

.text-muted {
	color: var(--color-grey);
}

.m-0 {
	margin: 0;
}

.text-inside-line {
	overflow: hidden;
	text-align: center;
}

.text-inside-line::before,
.text-inside-line::after {
	background-color: var(--color-main);
	content: "";
	display: inline-block;
	height: 1px;
	position: relative;
	vertical-align: middle;
	width: 40%;
}

.text-inside-line::before {
	right: 0.5em;
	margin-left: -50%;
}

.text-inside-line::after {
	left: 0.5em;
	margin-right: -50%;
}

.login-box {
	display: flex;
	align-items: center;
}

.login-box-item {
	flex-grow: 1;
}

.text-rotated {
	transform: rotate(90deg);
	font-weight: normal;
	color: var(--color-light);
}
