* { margin:0; padding:0; border:0; outline:0; border-spacing:0; text-decoration:none; font-weight:inherit; font-style:inherit; color:inherit; font-size:100%; vertical-align:baseline; list-style:none; border-collapse:collapse; }
*:focus { outline: none}
:root { --margin: 10px; --padding: 10px; }
body { background:black;font-family: var(--font),sans-serif;font-size:12px;overflow-x:hidden; transition: opacity 150ms; opacity: 1 !important; }
h1 { color: var(--b_high);font-family: var(--font_b);font-size:28px;text-transform:uppercase; }
h2 { color: var(--b_high);font-size:22px;text-transform:uppercase;line-height:1.2; }
h3 { color: var(--f_inv);font-size:16px;text-transform:uppercase;line-height:1.1; }
p { font-size: 20px;line-height:1.4;color: var(--b_high);margin-top: 10px }
b { color:var(--b_inv);font-family: var(--font_b) }
i { font-style:italic }
a { cursor: pointer; text-decoration:underline;color:var(--f_med) }
a:hover { color:var(--f_low) }
ul { display: block }
ul li { display: block }
hr { diplay:block;margin:10px 0px 10px 0px;border-top:2px dashed var(--b_low) }
pre { display: block;color:var(--f_high) }
small { font-size: 80%; }

#zyklus { position: relative; width: 100%; min-width: 300px; max-width: 768px; min-height: 100vh; margin: 0 auto; overflow: hidden; background: var(--background); }
#zyklus #content { padding-left: 10px; padding-right: 10px; }
#zyklus #menu { display: flex; justify-content: space-evenly; margin: var(--margin); margin-top: 0; }
#zyklus #menu #item { margin-right: 8px;}
#zyklus #menu #item:last-child { margin: 0;}
#zyklus #menu #item svg { display: block; width: 100%; background-color: var(--b_med); fill: var(--f_inv); stroke: var(--f_inv); }
#zyklus #menu #item svg:hover { background-color: var(--f_inv); fill: var(--f_high); stroke: var(--f_high); }
#zyklus #menu #item svg.selected { background-color: var(--f_med); fill: var(--b_low); stroke: var(--b_low); }
#zyklus figure { margin-bottom: var(--margin); }
#zyklus figure header { display: flex; justify-content: space-between; background-color: var(--b_low); }
#zyklus figure header h1 { padding: var(--padding); }
#zyklus figure header span.close { display:flex; justify-content: center; width:55px; font-size: 60px; line-height: 0.75; font-weight: 300; color: var(--b_low); background-color: var(--f_med); border-left: 4px solid var(--b_low); cursor: pointer; }
#zyklus figure header span.close:hover { color: var(--b_high); background-color: var(--f_low); }
#zyklus figure header.fail { background-color: var(--f_low); }
#zyklus figure header.fail h1 { color: var(--f_low); }
#zyklus figure section { background-color: var(--b_med); margin-bottom: var(--margin); padding: var(--padding); }
#zyklus figure.info section { display: flex; align-items: center; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
#zyklus figure.info .day { min-width: 24%; padding: 0px 16px 0px 8px; text-align: center; }
#zyklus figure.info .day h1 { font-size:80px; color:var(--f_med) }
#zyklus figure.info .stats { border-left: 4px solid var(--b_low); padding: 0px 20px 0px 20px; }
#zyklus figure.info .stats h1 { color:var(--f_med) }
#zyklus figure.info .stats h3 { margin-top:10px; }
#zyklus figure.overview section.bar { height: 50px; margin-bottom: 10px; }
#zyklus figure.overview section.legend ul { display:flex; background-color: var(--b_low); }
#zyklus figure.overview section.legend li { display:flex; padding: 10px; align-items: center; }
#zyklus figure.overview section.legend li:last-child { margin-right:0px; }
#zyklus figure.overview section.legend svg { margin-right: 6px; }
#zyklus figure.entry section { display:flex; justify-content: space-between; align-items: center; margin: 0; }
#zyklus figure.entry section span { width:100%; margin-right: var(--margin); }
#zyklus figure.entry section span:last-child { margin: 0; }
#zyklus figure.entry section .label { font-size: 12px; padding: 4px; background-color: var(--b_low); color: var(--f_med); }
#zyklus figure.stats header { background-color:var(--b_med) }
#zyklus figure.stats section { background-color: var(--b_low); border-top: 1px dashed var(--background); }
#zyklus figure.entry section.stats { background-color: var(--b_low); border-top: 1px dashed var(--background); }
#zyklus #popup { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#zyklus #popup #overlay { position: absolute; width: 100%; height: 100%; background-color: black; opacity: 0.8; }
#zyklus #dialog { position: fixed; top: 20%; display: block; width: calc(100% - 20px); max-width: 748px; padding: 10px; }
#zyklus #dialog #content { padding: 0; }
#zyklus #dialog .confirmation { display: block; padding: 20px 10px 20px 10px; color: var(--b_high); }
#zyklus #dialog section { margin-bottom: 0; }
#zyklus #dialog section.datepicker { display: flex; justify-content: space-evenly; }
#zyklus #dialog section.datepicker span { display: block; flex-grow: 1; margin-right: 10px; }
#zyklus #dialog section.datepicker span:last-child { margin-right: 0; }
#zyklus #dialog #buttons { display: flex; padding-top: 0; }
#zyklus #dialog #buttons :first-child { margin-right: var(--margin); }
#zyklus form { width: 100%; }
#zyklus form input,
#zyklus button { width:100%; font-size: 24px; font-family:inherit; }
#zyklus form select,
#zyklus form input,
#zyklus button { color: var(--b_low); background-color: var(--b_high); width: 100%; box-sizing: border-box;  border-radius: 0; -moz-appearance: none; -webkit-appearance: none; appearance: none; }
#zyklus form input[type=submit],
#zyklus form input[type=button],
#zyklus button { height:75px; cursor: pointer; background-color: var(--f_med); text-transform: uppercase; font-weight: bolder;  }
#zyklus form input[type=submit]:hover,
#zyklus form input[type=button]:hover,
#zyklus button:hover { color:var(--b_high); background-color: var(--f_inv);  }
#zyklus form input[type=text],
#zyklus form input[type=password] { padding: 8px;  }
#zyklus form section { margin-bottom: 0; }
#zyklus form select {
    display: block; font-size: 16px; padding: .6em 1.4em .5em .8em; line-height: 1.3; margin: 4px 0;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%234B4B49%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');    background-repeat: no-repeat, repeat;
    background-position: right .7em top 50%, 0 0; background-size: .65em auto, 100%;
}
#zyklus form select::-ms-expand { display: none; }
#zyklus form select:focus { border-color: var(--b_low); box-shadow: 0 0 1px 3px var(--b_low); box-shadow: 0 0 0 3px -moz-mac-focusring; color: var(--b_low);  outline: none; }
#zyklus form select option { font-weight:normal; }
#zyklus form.dateButton { position:relative; width: 100%; height:100%; background-color: var(--f_med); }
#zyklus form.dateButton label { position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; flex-direction: column; font-size: 24px; font-weight: bolder; text-align: center; text-transform: uppercase; }
#zyklus form.dateButton input { position: absolute; width: 100%; height: 100%; display: block; opacity: 0; }
#zyklus form .error { display:block; padding: var(--padding); background-color: var(--f_low); color: var(--b_high); font-size: 18px; text-transform: uppercase;  }
@media (max-width:360px) {
	#zyklus figure.entry section { display:block; }
	#zyklus figure.overview section.legend ul { display:block; }
}