/* CSS Reset */

:root {
	--color-main:black;
	--color-sub:white;
	--color-off:blue;
}

* {
	box-sizing:border-box;
}

body {
	margin:0;
	font-family:'Karla', sans-serif;
	font-size: 100%;
}

h1 {
	font-size:1.5em;
}
h2 {
	font-size:1.25em;
}
h3,h4,h5,h6 {
	font-size:1em;
}

a {
	font-weight:bold;
	text-decoration: none;
	color:inherit;
}
a:hover {
	text-decoration: none;
}

p{
	display: block;
    margin-block-start: 2em;
    margin-block-end: 2em;
    margin-inline-start: 30px;
    margin-inline-end: 30px;
}




/* Classes */

.container {
	max-width:1000px;
	margin-right: auto;
	margin-left: auto;
}
.media-image {
	max-width:100%;
	vertical-align: middle;
}



.nav-crumbs ul,
.nav-tabs ul,
.nav-pills ul,
.nav-horizontal ul,
.flex-parent {
	display:flex;
}
.nav-tabs li,
.nav-stretch li,
.flex-child {
	flex:1 1 auto;
}
.flex-none {
	flex:none;
}
.flex-vertical {
	flex-direction:column;
}
.flex-center {
	align-items:center;
}



.collapsed,
.nav ul {
	list-style-type:none;
	padding-left:0;
	margin-top: 0;
	margin-bottom: 0;
}
.nav a {
	display:block;
	padding:0.2em 0.5em;
	/*color:var(--color-main);*/
}
.nav a:hover,
.nav .active>a {
	color:var(--color-sub);
}
.nav a:hover {
	background-color:var(--color-off);
	text-decoration:none;
}
.nav .active>a {
	background-color:var(--color-main);
}


.nav-horizontal li {
	text-align:center;
}

.nav-pills a {

	padding:0.2em 1em;
}

.nav-tabs a {
	/*--color:var(--color-off);*/
	border-bottom:3px solid var(--color-off);
}
.nav-tabs .active>a {
	background-color:transparent;
	color:var(--color-main);
	border-bottom-color:var(--color-main);
}

.nav-crumbs a {
	color:inherit;
	background-color:transparent;
	display:inline-block;
	font-weight:normal;
}
.nav-crumbs li:before {
	content:'/';
}
.nav-crumbs a:hover {
	color:var(--color-off);
}
.nav-crumbs .active>a {
	color:var(--color-main);
}
.nav-crumbs a:hover,
.nav-crumbs .active>a {
	background-color: transparent;
	text-decoration:underline;
}




.card {
    background-color: white;
    padding: 1em;
    box-shadow: 0 2px 1px rgba(0,0,0,0.1);
    border-radius: 3px;
    margin-top: 1em;
    margin-bottom: 1em;
}
.card :first-child {
	margin-top: 0;
}
.card :last-child {
	margin-bottom: 0;
}





.view-window {
	height:80vh;
	position:relative;
	background-position:center;
	background-size:cover;
	background-attachment: fixed;
}
.view-window>img {
	max-width:calc(100% - 100px);
	max-height:calc(100% - 100px);
}

.centered-child {
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}




.deflist dt {
	font-weight:bold;
	float:left;
	width:10em;
}
.deflist dd {
	margin-left:0;
	float:left;
	width:calc(100% - 1em);
}
.clearfix:after,
.card:after {
	content:'';
	display:table;
	clear:both;
}




.table {
	width:100%;
	border-collapse:collapse;
}
.table td,
.table th {
	text-align:left;
	padding:0.2em 0.5em;
	vertical-align:top;
}

.table.striped tbody tr:nth-child(odd) {
	background-color:rgba(0,0,0,0.1);
}
.table.target tbody tr:hover {
	background-color:rgba(0,0,0,0.1);
}
.table.target tbody td:hover {
	background-color:rgba(255,200,200,0.5);
}


.table.lined.all tbody tr,
.table.lined.horizontal tbody tr {
	border-top:1px solid black;
}

.table.lined.all th:not(:first-child),
.table.lined.all td:not(:first-child),
.table.lined.vertical th:not(:first-child),
.table.lined.vertical td:not(:first-child) {
	border-left:1px solid black;
}

.table.lined.all,
.table.lined.outline {
	border:1px solid black;
}






.hidden {
	display:none;
}

.toggle.fav>input:checked+label {
	color:red;
}

.toggle.switch>label {
    display: inline-block;
    width: 2em;
    height: 1em;
    background-color: #ddd;
    border-radius: 1em;
    border: 0.1em solid #ccc;
    transition: all 0.3s;
    position:relative;
}
.toggle.switch>label>span {
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    background-color: white;
    border-radius: 1em;
    vertical-align: top;
    transition: all 0.3s;
	transform:translateX(0);
}
.toggle.switch>
	input:checked+
	label>span {
	transform:translateX(1em);
}


.toggle.day-night>label {
	background-color:skyblue;
}
.toggle.day-night>label>span {
	background-color:yellow;
}
.toggle.day-night>label>span:before {
	position:absolute;
	background-color:white;
	width:0.6em;
	height:0.3em;
	border-radius:50%;
	content:'';
	top:0.2em;
	left:0.5em;
	transition: all 0.3s;
}
.toggle.day-night>label>span:after {
	position:absolute;
	background-color:white;
	width:1.2em;
	height:0.3em;
	border-radius:50%;
	content:'';
	top:0.4em;
	left:0.3em;
	transition: all 0.3s;
}
.toggle.day-night>input:checked+label {
	background-color:black;
}
.toggle.day-night>input:checked+label>span {
	background-color:white;
}
.toggle.day-night>input:checked+label>span:before,
.toggle.day-night>input:checked+label>span:after {
	width:0;
}




.btn,
.form-select,
.form-button,
.form-input {
	display:inline-block;
	width:20%;
	padding:0.2em 0.5em;
	background-color:white;
	border-radius:0.3em;
	border-width:0;
	-webkit-appearance:none;
	text-align:center;
	text-decoration:none;
	font-family:inherit;
	font-size:inherit;
	color:inherit;
	cursor:pointer;
}

.select-parent {
	position:relative;
	margin:1em 0;
}

/*.select-parent:after {
	content:'▼';
	position:absolute;
	top:50%;
	right:0.5rem;
	transform:translateY(-50%);
	color:grey;
	font-size:0.8em;
	pointer-events:none;
}*/