@import "fonts.css";
@import "login.css";
:root {
	--blau: 68,121,161;
	--gruen: 76,175,80;
	--rot: 255,38,38;
}

* {
	outline: 0;
	border: 0;
  margin: 0;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: none;
	word-wrap: break-word;
	box-sizing: border-box;
}

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

html, body {
	padding: 0;
	margin: 0;
	width: 100%;
	height:100%;
}

body {
	font-family: 'Questrial', sans-serif;
	font-weight: 300;
  font-size: 1em;
	font-weight: 600;
	letter-spacing: .03em;
	color: #212121;
}

.right { float: right; }
.left { float: left; }
.clear { clear: both; }

p { margin: 0 0 1.5em 0; }
p.success, p.error { padding: .3em 1em .3em 1.9em; -webkit-border-radius: .5em; border-radius: .5em; background-position: .3em .4em; background-repeat: no-repeat; background-size: 1.2em; }
p.success { background-color: rgba(0,128,0,1); color: rgba(255,255,255,1); background-image: url('/img/success.svg'); }
p.error { background-color: rgba(217,0,0,1); color: rgba(255,255,255,1); background-image: url('/img/error.svg'); }

a,
a:visited,
a:focus,
a:active,
a:link {
  text-decoration: none;
  outline: 0;
}

a { color: currentColor;  transition: .2s ease-in-out; }
ul {  padding: 0;  list-style: none; }
img {  vertical-align: middle;  height: auto;  width: 100%; }

@keyframes blinker {  50% { opacity: 0; } }

.left { float: left; }


header {
  display: flex;
  position: fixed;
  width: 100%;
  height: 70px;
  background: #212121;
  color: #fff;
  justify-content: center;
  align-items: center;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

header > .account {
	position: absolute;
	padding-top: .3em;
	right: 3.5em;
	height: 3em;
	line-height: 1.35em;
	text-align: right;
}

header > a.logout {
	position: absolute;
	right: .5em;
	background: transparent url('/img/logout.svg') no-repeat right;
	background-size: 2.3em;
	height: 3em;
	width: 3em;
	cursor:pointer;
	opacity: .7;
}

header > a.logout:hover { opacity: 1; }

main {
  padding: 5em .5em .5em .5em;
  height: 100%;
	width: 1270px;
	margin: auto;
}

main > div {
  margin: auto;
  max-width: 600px;
}

main h2 {
  color: rgba(179,19,25,1);
	margin-bottom: 1em;
}

main p {
  line-height: 1.5;
  font-weight: 200;
}

header small,
main small {
  font-weight: 300;
  color: #888;
}

.add {
	background-image: url('/img/add.svg');
	background-repeat: no-repeat;
}

ul.abteilung,
ul.list {
	width: 100%;
}

ul.abteilung li,
ul.list > li {
  text-shadow: 0 1px rgba(0,0,0,0.15);
	box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
	-webkit-border-radius: .1em;
	border-radius: .1em;
	padding: 1em;
}

ul.abteilung > li,
ul.list > li {
	color: rgba(255,255,255,1);
	background-color: rgba(var(--blau, 1));
	margin: .1em 0;
}

ul.list > li { margin-bottom: 1em; }

ul.abteilung ul { display: none; padding-left: 0; margin: 1em 0;}
ul.abteilung li input[type=checkbox],
ul.list li input[type=checkbox] { display: none; }

ul.abteilung li.sub > label:before { content: ""; position: absolute; width: .5rem; height: .5rem; border: 0 solid transparent;  border-right: .15rem solid rgba(255,255,255,1);  border-bottom: .15rem solid rgba(255,255,255,1); transform: rotate(-45deg); margin-left: -.8em; margin-top: .2em; }
ul.abteilung li.sub > input[type=checkbox]:checked + label:before { transform: rotate(45deg); }
ul.abteilung li li.sub > label:before { border-color: rgba(0,0,0,1); }
ul.abteilung li input[type=checkbox]:checked ~ ul { display: block; }
ul.abteilung li label,
ul.list li label  { display:block; padding-left: 1em;}
ul.abteilung li.sub > label { cursor:pointer; }
ul.abteilung > li > ul > li { background-color: rgba(255,255,255,1); color: rgba(0,0,0,1);}

ul.abteilung > li > ul > li > ul > li > ul > li > div:first-child,
ul.list > li > div { margin-bottom: .1em; display: block; background-color: rgba(var(--blau),1); padding:.1em; color: rgba(255,255,255,1); width:100%; -webkit-border-radius: .1em; border-radius: .1em; }

ul.abteilung > li > ul > li > ul > li > ul > li > div:first-child > div,
ul.list > li > div > div { padding: .5em .3em; }


ul.abteilung > li > ul > li > ul > li > ul > li > div:first-child > div:last-of-type, 
ul.abteilung > li > ul > li > ul > li > ul > li > div:first-child > div:first-of-type,
ul.list > li > div > div:last-of-type,
ul.list > li > div > div:first-of-type { width: 7em; }

ul.abteilung > li > ul > li > ul > li > ul > li > div:first-child > div:last-of-type,
ul.list > li > div > div:last-of-type { text-align: right;  width: 100%; }
ul.list > li > div > div.preview { font-weight: 200; }

ul.abteilung > li > ul > li > ul > li > ul > li > div:first-child > div:last-of-type > div:first-of-type,
ul.list > li > div > div:last-of-type > div:first-of-type { float:left; }

ul.abteilung > li > ul > li > ul > li > ul > li > div:first-child > div:last-of-type > div:last-of-type,
ul.list > li > div:first-child > div:last-of-type > div:last-of-type { float:right; }

ul.abteilung > li > ul > li > ul > li > ul > li > div:first-child > div:last-of-type div,
ul.list > li > div:first-child > div:last-of-type div { display: inline-block; }

ul.abteilung > li > ul > li > ul > li > ul > li > div:last-child > div,
ul.list > li > div:last-child > div { display: inline-block; }

ul.abteilung > li > ul > li > ul > li > ul > li > div:last-child > div .button,
ul.list > li > div:last-child > div .button { background-color: rgba(255,255,255,1); color: rgba(var(--blau),1); padding: .4em 1.2em; }

ui-state-highlight {
	border: .1em solid rgba(255,0,0,1); background: transparent;
}

.switch {
  position: relative;
  display: inline-block;
  width: 3.2em;
  height: 1.65em;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
	border-radius: 3em;
}

.slider:before {
  position: absolute;
  content: "";
  height: 1.2em;
  width: 1.2em;
  left: .2em;
  bottom: .2em;
  background-color: rgba(255,255,255,.6);
  -webkit-transition: .4s;
  transition: .4s;
	border-radius: 50%;
	border: 1px solid rgba(0,0,0,.2);
}

input:checked + .slider {
  background-color: rgba(255,255,255,1);
}

input:checked + .slider:before {
	background-color: rgba(var(--gruen),1);
	border: 0;
	box-shadow: 0 0 2px 1px rgba(var(--gruen),.5);
}

input:focus + .slider {
  box-shadow: 0 0 1px rgba(var(--gruen),1);
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

form label {
	display: inline-block;
	font-size: 1.2em;
	min-width: 8em;
}

span.footnote-error {
	font-size:.8em;
	color: rgba(255,0,0,.7);
}

form input[type=text],
form input[type=number],
form input[type=email],
form input[type=password],
form textarea {
	border: 1px solid rgba(200,200,200,1);
	padding: .5em;
	-webkit-border-radius: .1em;
	border-radius: .1em;
	font-family: 'Questrial', sans-serif;
	font-weight: 300;
  font-size: 1.6em;
	color: rgba(110,110,110,1);
	vertical-align: top;
	width: 100%;
	background-color: rgba(255,255,255,.8);
	box-sizing: border-box;
	box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
}

form input[type=text]:focus,
form input[type=number]:focus,
form input[type=email]:focus,
form input[type=password]:focus,
form textarea:focus { background-color: rgba(255,255,255,1); }

form input[type=text].success,
form input[type=number].success,
form input[type=email].success,
form input[type=password].success,
form textarea.success {
	background-color: rgba(var(--gruen),1);
	color: rgba(255,255,255,1);
}


form input[type=text].error,
form input[type=number].error,
form input[type=email].error,
form input[type=password].error,
form textarea.error {
	background-color: rgba(var(--rot),1);
	color: rgba(255,255,255,1);
}

form textarea {	height:15em; }

form button,
.button,
form .inputfile + label {
	color: rgba(255,255,255,1);
  text-shadow: 0 1px rgba(0,0,0,0.15);
	text-align: center;
	background-color: rgba(var(--blau, 1));
	padding: .6em 2em;
	font-size: 1.2em;
	cursor: pointer;
	box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
	-webkit-border-radius: .1em;
	border-radius: .1em;
}

form button[disabled="disabled"] {
	opacity: .6;
  animation: fade 1s;
}

form input[type=checkbox]  + label { line-height: 1.5em; }
form input[type=checkbox] { display:none; }
form input[type=checkbox] + label::before {
  width: 22px;
  height: 22px;
  background-image: url('/img/checkbox_unchecked.svg');
  background-repeat: no-repeat;
  display: block;
  content: "";
  float: left;
  margin-right: .7em;
  cursor: pointer;
}
form input[type=checkbox].error + label::before { background-image: url('/img/checkbox_unchecked_error.svg'); }
form input.error, form textarea.error { background-color: rgba(255,0,0,.4); }
form input[type=checkbox]:checked+label::before { background-image: url('/img/checkbox_checked.svg'); }
form.loading > input[type='submit'], form.loading > button[name='submit'] {	opacity: .7; cursor: default; }


form > div.select select {
  background-color: rgba(var(--blau, 1));
  color: rgba(255,255,255,1);
  padding: 12px;
  width: 300px;
  border: none;
  font-size: 20px;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
  -webkit-appearance: none;
  appearance: none;
  outline: none;
	cursor: pointer;
	-webkit-border-radius: .1em;
	border-radius: .1em;
}

form > div.select select.error {
	background-color: rgba(255,0,0,.4);
}

form > div.select select:disabled {
	opacity: .3;
	cursor: default;
}

form > div.select>p::after {
	content: url('/img/arrow.svg');
	position: relative;
	right:2em;
	top: 0;
}

form > div.select:hover::before {
  color: rgba(255, 255, 255, 0.6);
  background-color: rgba(255, 255, 255, 0.2);
}

form > div.select select optgroup{
  background-color: rgba(2,51,91,.8);
  color: rgba(255,255,255,.9);
}


form .inputfile {
	width: 0;
	height: 0;
	opacity: 0;
	overflow: hidden;
}

form .inputfile + label {
	background-image: url(data:image/svg+xml,%3Csvg%20fill%3D%22%23FFFFFF%22%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22/%3E%3Cpath%20d%3D%22M9%2016h6v-6h4l-7-7-7%207h4zm-4%202h14v2H5z%22/%3E%3C/svg%3E); 
	background-size: 26px;
	background-repeat: no-repeat;
	background-position: 0.3em 50%;
}

form .inputfile + label.wait,
form .inputfile + label.wait:hover,
form .inputfile + label.wait:focus {
	background-image: url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3Asvg%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20version%3D%221.0%22%20width%3D%2226px%22%20height%3D%2226px%22%20viewBox%3D%220%200%20128%20128%22%20xml%3Aspace%3D%22preserve%22%3E%3Cg%3E%3Cpath%20d%3D%22M31.6%208.98a4.02%204.02%200%200%200%201.7%205.3l6.12%203.22a52.56%2052.56%200%201%200%2063.13%2010.73L96%2033.97a43.88%2043.88%200%201%201-53-8.5l-3.65%207.4a4.02%204.02%200%200%200%201.72%205.3%203.73%203.73%200%200%200%205.13-1.67l7.66-15.63a4.18%204.18%200%200%200-1.75-5.4L36.74%207.32a3.73%203.73%200%200%200-5.13%201.66z%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%221%22/%3E%3CanimateTransform%20attributeName%3D%22transform%22%20type%3D%22rotate%22%20from%3D%220%2064%2064%22%20to%3D%22360%2064%2064%22%20dur%3D%221600ms%22%20repeatCount%3D%22indefinite%22%3E%3C/animateTransform%3E%3C/g%3E%3C/svg%3E);
  cursor: wait;
  background-color: rgba(var(--blau, .6));
}


@media all and (max-width: 1270px) {
	main {
		width: 100%;
		margin: auto;
	}
}

@media all and (max-width: 670px) {
	form button, .button, form .inputfile + label { width: 100%; padding: 1.5em; margin-bottom: .5em;}
	form > div.select select { width: 100%; }
	p { margin: .5em ; }
	form > div.select > p::after { content: '';  }
	ul.abteilung li, ul.list > li { padding: 1em .1em; }
	ul.abteilung > li > ul > li > ul > li > ul > li > div:first-child > div, ul.list > li > div > div { padding: .3em; }
	ul.abteilung > li > ul > li > ul > li > ul > li > div:last-child > div .button, ul.list > li > div:last-child > div .button { margin: .3em 0; padding: .3em 1.3em; }
	ul.list > li > div:last-child > div { display: table; }
}

@media all and (max-width: 450px) {
	main { padding: 4.5em .5em .5em .5em; }
	p { margin: .4em 0; }
}