:root {
	--divider: .05em solid;
	
	--gold-color: #ffd700;
	--silver-color: #c0c0c0;
	--bronze-color: #cd7f32;
	--record: .25em solid;
	
	--text-shadow-width: .05em;
	--button-shadow-width: .25em;
	--input-shadow-right: .1em .1em .2em -.1em;
	--input-shadow-bottom: 0 .2em .2em -.2em;
	
	--nav-space: .1em;
	--vertical-space: .5em;
	--vertical-space-small: .3em;
	--vertical-space-big: 1em;
	--horizontal-space: .75em;
	--horizontal-space-small: .3em;
	--horizontal-space-big: 1.3em;
	--space: var(--vertical-space) var(--horizontal-space);
	--space-small: var(--vertical-space-small) var(--horizontal-space-small);
	--space-big: var(--vertical-space-big) var(--horizontal-space-big);
	
	--logo-height: 2em;
	--logo-height-high: 5em;
	--news-height: 25em;
	--records-height: 12em;
	--img-side: 17em;
	--column-width: 16em;
	--page-width: 65em;
	--dialog-width: 40em;
	--login-width: 20em;
	
	--border-radius: .2em;
	
	--font-size: 90%;
	--font-family: sans-serif;
	--line-height: 1.2em;
	--line-height-high: 1.5em;
	--line-height-very-high: 1.75em;
	
	--number-width-very-short: 3.25em;
	--number-width-short: 3.75em;
	--number-width-medium: 4.5em;
	--number-width: 5em;
	--number-width-long: 5.75em;
	
	--fog-opacity: .5;
	
	--loader-width: .4em;
	--loader-size-center: .75em;
	--loader-distance-center: 2.25em;
	--loader-size-inside: 1.5em;
	--loader-distance-inside: 1.5em;
	--loader-size-middle: 2.25em;
	--loader-distance-middle: .75em;
	--loader-delay-middle: .15s;
	--loader-size-outside: 3em;
	--loader-delay-outside: .3s;
	--blinker-speed: 1.5s;

	--arrow-width: .1em;
	--arrow-size: .2em;
	--arrow-line: .05em;

	--listitem-width: .15em;
	--listitem-size: .2em;
	--listitem-line: .05em;

	--map-height: 35em;

	--unconfirmed-uploaded-height: 6em;

	--password-margin: 2.5em;
	--eye-size: 1.5em;
    --eye-left: -1.8em;
    --eye-top: .2em;
	--login-eye-top: .85em;
    --eye-width: .01em;
    --slash-size: 80%;
    --slash-margin: 10%;
    --slash-background-end: 47%;
    --slash-color-end: 54%;
    --slash-background-begin: 55%;
    --lid-radius: 75%;
    --lid-size: 70%;
    --lid-margin: 15%;
    --pupil-size: 35%;
    --pupil-margin: 32.5%;

	--badge-size: 1rem;
}

@font-face {
    font-family: 'Symbola';
    src: url('/font/symbola.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

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

/* Base -----------------------------------*/
html {
	font-family: var(--font-family);
	font-size: var(--font-size);
	color: var(--color);
	background-color: var(--background);
	text-align: center;
}

body {
	display: inline-block;
	text-align: left;
	max-width: 100%;
	padding: var(--space);
	margin: 0;
}

div.container {
	max-width: 100%;
	overflow-x: auto;
}

div.clear {
	clear: both;
}

div.small {
    max-width: var(--page-width);
}

label {
	line-height: var(--line-height);
}

address {
	font-style: normal;
}

h3 {
	margin-top: var(--vertical-space-big);
	margin-bottom: var(--vertical-space-small);
}

h2 {
	margin-bottom: var(--vertical-space-small);
}

ul {
	margin: 0;
}

div#fog {
	display: none;
}

div#loader {
	display: none;
}

.loader div {
	border-top: var(--loader-width) solid var(--background);
	border-left: var(--loader-width) solid var(--background);
	border-radius: 100% 0 0 0;
	animation: blinker var(--blinker-speed) infinite;
	margin: auto;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	position: fixed;
}

#loaderCenter {
	height: var(--loader-size-center);
	width: var(--loader-size-center);
	left: var(--loader-distance-center);
	top: var(--loader-distance-center);
	border: none;
	animation: none;
	background-color: var(--background);
	border-radius: 50%;
}

#loaderInside {
	height: var(--loader-size-inside);
	width: var(--loader-size-inside);
	left: var(--loader-distance-inside);
	top: var(--loader-distance-inside);
}

#loaderMiddle {
	height: var(--loader-size-middle);
	width: var(--loader-size-middle);
	left: var(--loader-distance-middle);
	top: var(--loader-distance-middle);
	animation-delay: var(--loader-delay-middle);
}

#loaderOutside {
	height: var(--loader-size-outside);
	width: var(--loader-size-outside);
	animation-delay: var(--loader-delay-outside);
}

.loader,
div#loader.loader {
	display: block;
	z-index: 4000;
	position: fixed;
	cursor: wait;
}
  
@keyframes blinker {
	0% { opacity: 0; }
	40% { opacity: 1; }
}

.hide {
	display: none;
}

.nowrap {
	white-space: nowrap;
}

.inline {
	display: inline;
}

div.chart {
	width: 100%;
}

.symbol {
	font-family: 'Symbola';
}

/* Arrows -----------------------------------*/
.arrow::after {
	content: '';
	border: solid var(--background);
  	border-width: 0 var(--arrow-width) var(--arrow-width) 0;
	padding: var(--arrow-size);
	display: inline-block;
	transform: rotate(-45deg);
	margin: 0 0 var(--arrow-line) var(--horizontal-space-small);
}

div.feature p::before,
div.record input[type="checkbox"] + label::before,
input[type="checkbox"].toggle + label::before {
	content: '';
	border: solid var(--color);
  	border-width: 0 var(--listitem-width) var(--listitem-width) 0;
	padding: var(--listitem-size);
	display: inline-block;
	transform: rotate(-45deg);
	margin: 0 var(--horizontal-space) var(--listitem-line) 0;
}

div.record input[type="checkbox"]:checked + label::before,
input[type="checkbox"].toggle:checked + label::before {
	transform: rotate(45deg);
}

a[target="_blank"]::after {
	content: '🡕';
	margin-left: var(--vertical-space-small);
	line-height: 100%;
	font-family: 'Symbola';
}

a[download]::after {
	content: '🡓';
	margin-left: var(--vertical-space-small);
	line-height: 100%;
	font-family: 'Symbola';
}

/* Paragraph -----------------------------------*/
h3 + p {
	margin-top: 0;
}

p {
	text-overflow: ellipsis;
	overflow: hidden;
	line-height: var(--line-height-high);
}

p.list a:not(:last-child)::after {
	content: ", ";
}

p.error {
	color: var(--err-color);
}

.badge {
	font-size: var(--badge-size);
	color: var(--badge-color);
	font-weight: bold;
}

p.message,
span.message,
li.message {
	color: var(--theme-color);
}

.center {
	text-align: center;
}

p.lineBreak {
	white-space: pre-line;
}

/* Links -----------------------------------*/
a,
input[type="submit"].function {
	text-decoration: none;
	cursor: pointer;
	color: var(--theme-color);
	border: none;
	background: none;
	margin: 0;
	padding: 0;
}

a:hover,
input[type="submit"].function:hover {
	text-shadow: 0 0 var(--text-shadow-width) var(--theme-color);
	box-shadow: none;
}

a:active,
input[type="submit"].function:active {
	color: var(--theme-color-strong);
	text-shadow: 0 0 var(--text-shadow-width) var(--theme-color-strong);
	box-shadow: none;
	background: none;
}

a.function {
	margin-right: var(--horizontal-space);
}

a.list {
	margin: var(--space-small);
}

a.notUsed {
	text-decoration: line-through;
}

/* Nav -----------------------------------*/
a.logo img {
	max-height: var(--logo-height);
}

nav a.logo {
	float: left;
}

nav a,
div.sub a {
	color: var(--color);
	margin: var(--space);
	display: inline-block;
}

nav a:hover,
div.sub a:hover {
	text-shadow: 0 0 var(--text-shadow-width) var(--color);
}

nav a:active,
div.sub a:active {
	color: var(--theme-color);
	text-shadow: 0 0 var(--text-shadow-width) var(--theme-color);
}

nav div.main,
nav div.add {
	font-size: larger;
	display: inline;
}

nav div.main a,
nav div.add a {
	margin-top: var(--nav-space);
}

nav div.add {
	float: right;
}

div.sub {
	border-top: var(--divider) var(--divider-color);
	border-bottom: var(--divider) var(--divider-color);
	width: 100%;
}

nav br {
	font-size: smaller;
}

/* Buttons -----------------------------------*/
input[type="submit"],
a.button {
	color: var(--background);
	padding: var(--space);
	border-radius: var(--border-radius);
	text-shadow: none;
	display: inline-block;
}

a.button,
input[type="submit"].button {
	background-color: var(--theme-color-light);
	margin: var(--space-small);
	font-size: 1em;
}

a.button:hover,
input[type="submit"].button:hover {
	box-shadow: 0 0 var(--button-shadow-width) var(--theme-color-light);
}

a.button:active,
input[type="submit"].button:active {
	background-color: var(--theme-color);
	box-shadow: 0 0 var(--button-shadow-width) var(--theme-color);
}

input[type="submit"] {
	background-color: var(--theme-color);
	border: none;
	cursor: pointer;
	font-size: larger;
	margin: var(--space);
	font-family: var(--font-family);
	-webkit-appearance: none;
}

input[type="submit"]:hover {
	box-shadow: 0 0 var(--button-shadow-width) var(--theme-color);
}

input[type="submit"]:active {
	background-color: var(--theme-color-strong);
	box-shadow: 0 0 var(--button-shadow-width) var(--theme-color-strong);
}

/* Records -----------------------------------*/
div.record {
	display: inline-block;
	padding: var(--space);
	margin: var(--space-small);
	vertical-align: top;
	line-height: var(--line-height-very-high);
}

div.first {
	border: var(--record) var(--gold-color);
}

div.second {
	border: var(--record) var(--silver-color);
}

div.third {
	border: var(--record) var(--bronze-color);
}

div.record input[type="checkbox"], 
div.record input[type="checkbox"] + label + div {
    display: none;
}

div.record label {
    cursor: pointer;
}

div.record input[type="checkbox"]:checked + label + div {
    display: block;
}

div.workoutRecords {
	max-height: var(--records-height);
	overflow: auto;
}

div.records {
	display: flex;
	flex-wrap: wrap;
}

div.records > div {
	margin: var(--space-big);
}

/* Tables -----------------------------------*/
table {
	font-size: 1em;
	border-collapse: collapse;
	overflow: auto;
	display: block;
}

th {
	color: var(--divider-color-strong);
	text-align: left;
	padding: 0 var(--horizontal-space);
}

td {
	text-align: left;
	padding: var(--space);
}

td.right {
	text-align: right;
}

td.grid {
	display: grid;
}

form table {
	overflow-y: hidden;
}

form td,
form td.grid div.container td {
	white-space: nowrap;
}

form div.container td {
	white-space: normal;
}

table.data td,
table.data th {
	border-left: var(--divider) var(--divider-color);
}

table.data td:first-child,
table.data th:first-child {
	border-left: none;
}

table.data tr:nth-child(2n+3) {
	background-color: var(--theme-color-ultralight);
}

td a:not(.function):not(.button):not(:last-child)::after {
	content: ", ";
}

/* Inputs -----------------------------------*/
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="time"],
textarea,
select {
	border: none;
	border-bottom: var(--divider) var(--divider-color);
	padding: var(--space-small);
	box-shadow: 0 0 0 var(--divider-color);
	outline: none;
	font-size: 1rem;
	background: var(--background);
	color: var(--color);
}

input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="time"],
textarea,
select option {
	font-family: var(--font-family);
}

input[type="number"] {
	width: var(--number-width);
}

input[type="number"].short {
	width: var(--number-width-short);
}

input[type="number"].very-short {
	width: var(--number-width-very-short);
}

input[type="number"].medium {
	width: var(--number-width-medium);
}

input[type="number"].long {
	width: var(--number-width-long);
}

textarea {
	border-right: var(--divider) var(--divider-color);
	border-radius: 0 0 var(--border-radius) 0;
	width: 100%;
}

select option {
	padding: var(--space-small);
}

input[type="text"]:hover,
input[type="number"]:hover,
input[type="date"]:hover,
input[type="time"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
select:hover {
	box-shadow: var(--input-shadow-bottom) var(--divider-color);
}

textarea:hover {
	box-shadow: var(--input-shadow-right) var(--divider-color);
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
textarea:focus,
select:focus {
	border-bottom: var(--divider) var(--theme-color);
	box-shadow: var(--input-shadow-bottom) var(--theme-color);
}

textarea:focus {
	border-right: var(--divider) var(--theme-color);
	box-shadow: var(--input-shadow-right) var(--theme-color);
}

span.radio {
	display: inline-block;
	padding: var(--vertical-space-small) 0;
	white-space: nowrap;
}

span.radio label {
	white-space: normal;
}

input[type="password"].password,
input[type="text"].password {
	padding-right: var(--password-margin);
}

input::-ms-reveal {
	display: none;
}

div.eye {
    display: inline-block;
    height: var(--eye-size);
    width:  var(--eye-size);
    margin-top: var(--eye-top);
    margin-left: var(--eye-left);
    position: absolute;
}

div.slash {
    height: var(--slash-size);
    width: var(--slash-size);
    margin-top: var(--slash-margin);
    margin-left: var(--slash-margin);
    background: linear-gradient(-45deg,transparent var(--slash-background-end),var(--color) 0,var(--color) var(--slash-color-end),transparent var(--slash-background-end));
    position: absolute;
}

div.lid {
    position: absolute;
    border: var(--eye-width) solid var(--theme-color);
    border-radius: 0 var(--lid-radius);
    height: var(--lid-size);
    width: var(--lid-size);
    transform: rotate(-45deg);
    margin-left: var(--lid-margin);
    margin-top: var(--lid-margin);
    box-sizing: border-box;
}

div.pupil {
    height: var(--pupil-size);
    width: var(--pupil-size);
    border: var(--eye-width) solid var(--theme-color);
    border-radius: 100%;
    position: absolute;
    margin-left: var(--pupil-margin);
    margin-top: var(--pupil-margin);
    box-sizing: border-box;
}

div.eye:hover div.lid,
div.eye:hover div.pupil {
    box-shadow: 0 0 var(--text-shadow-width) var(--theme-color);
}

/* Toggle -----------------------------------*/
input[type="checkbox"].toggle + label {
	display: inline-block;
	padding: var(--space);
	border-radius: var(--border-radius);
	margin: var(--space-small);
	background-color: var(--divider-color);
}

input[type="checkbox"].toggle + label:hover {
	box-shadow: 0 0 var(--button-shadow-width) var(--divider-color);
	cursor: pointer;
}

input[type="checkbox"].toggle + label:active {
	background-color: var(--divider-color-strong);
	box-shadow: 0 0 var(--button-shadow-width) var(--divider-color-strong);
}

input[type="checkbox"].toggle, 
input[type="checkbox"].toggle + label + div {
	display: none;
}

input[type="checkbox"].toggle:checked + label + div {
	display: block;
}

input[type="checkbox"].toggle + label + div > p {
	margin: 0;
	padding: 0 var(--horizontal-space);
}

/* Footer -----------------------------------*/
footer a,
footer span {
	display: inline-block;
	padding: var(--space);
	color: var(--divider-color-strong);
}

footer {
	border-top: var(--divider) var(--divider-color);
	padding: var(--space);
	text-align: center;
	margin-top: var(--line-height-high);
}

footer a:hover {
	text-shadow: 0 0 var(--text-shadow-width) var(--divider-color-strong);
}

footer a:active {
	color: var(--color);
	text-shadow: 0 0 var(--text-shadow-width) var(--color);
}

span.divider-vertical:before {
	content: "\a0| ";
}

/* Cover -----------------------------------*/
div.cover {
	display: inline-block;
}

div.cover input {
	padding: var(--space);
	margin: var(--space-small);
}

div.cover:hover input,
div.cover:active input,
div.cover input:focus {
	display: inline-block;
}

div.cover div,
div.cover input {
	display: none;
	position: absolute;
	background: var(--background);
}

div.cover:hover div,
div.cover:active div  {
	display: block;
}

/* Dialog -----------------------------------*/
div.fog,
div#fog.fog {
	display: block;
	position: fixed;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	background: var(--color);
	opacity: var(--fog-opacity);
	z-index: 1000;
}

div#fog.fog {
	z-index: 3000;
	cursor: wait;
}

dialog {
	position: fixed;
	display: none;
	margin-top: var(--vertical-space);
	border-radius: var(--border-radius);
	border: none;
	box-shadow: 0 0 var(--button-shadow-width) var(--color);
	background: var(--background);
	color: var(--color);
	z-index: 2000;
	max-width: var(--dialog-width);
}

dialog.dialog {
	display: block;
}

dialog h2 {
	margin-top: var(--vertical-space-small);
}

dialog#uploadProgressDialog {
	z-index: 3500;
	cursor: wait;
}

/* MultiselectFunctions -----------------------------------*/
div.multiselectFunctions {
	display: inline-block;
	vertical-align: top;
}

div.multiselectFunctions a {
	display: inline-block;
}

div.multiselectFunctions div.cover input {
	margin: 0;
}

div.multiselectFunctions div.cover a.search,
div.multiselectFunctions br {
	display: none;
}

@media only screen and (pointer: fine) and (min-width: 813px) {
    div.multiselectFunctions div.cover a.search,
    div.multiselectFunctions br {
        display: inline-block;
	}
	
	div.multiselectFunctions a {
		padding: var(--space);
	}
}

/* Timer -----------------------------------*/
a.timerRunning {
	font-weight: bold;
	color: var(--theme-color);
}

a.timerRunning:hover {
	text-shadow: 0 0 var(--text-shadow-width) var(--theme-color);
}

a.timerRunning:active {
	text-shadow: 0 0 var(--text-shadow-width) var(--theme-color-strong);
	color: var(--theme-color-strong);
}

a.timerPaused {
	font-weight: bold;
	color: var(--err-color);
}

a.timerPaused:hover {
	text-shadow: 0 0 var(--text-shadow-width) var(--err-color);
}

a.timerPaused:active {
	text-shadow: 0 0 var(--text-shadow-width) var(--err-color-strong);
	color: var(--err-color-strong);
}

/* Login -----------------------------------*/
div.login {
	text-align: center;
    margin-top: var(--vertical-space);
}

div.login form {
	display: inline-block;
	width: 100%;
	max-width: var(--login-width);
}

div.login input[type="email"],
div.login input[type="password"],
div.login input[type="text"] {
	margin: var(--vertical-space) 0;
	width: 100%;
}

div.eye.login {
   	margin-top: var(--login-eye-top);
}

div.login input[type="password"].password,
div.login input[type="text"].password {
	padding-left: var(--password-margin);
}

div.login input {
	text-align: center;
	padding: var(--space);
	margin: var(--space);
}

div.login img {
	max-height: var(--logo-height-high);
	max-width: 100%;
}

p.news {
	text-align: left;
	max-height: var(--news-height);
	overflow: auto;
}

/* Cols -----------------------------------*/
div.cols {
	column-width: var(--column-width);
	margin-top: var(--vertical-space);
	margin-bottom: var(--vertical-space-big);
}

div.cols p {
	margin: 0;
}

p.spanAll {
	 column-span: all;
}

/* Filter -----------------------------------*/
div.filter {
	display: flex;
	flex-wrap: wrap;
}

div.filter > div {
	margin: var(--space-big);
}

div.range input {
	margin: var(--vertical-space) 0;
}

div.filter td {
	padding: 0;
}

div.filter input[type="checkbox"] {
	margin-top: 0;
}

/* Features --------------------------------*/
div.feature {
    display: inline-block;
    max-width: 100%;
    margin: var(--vertical-space-big) 0;
}

div.feature p {
	margin-bottom: var(--vertical-space-small);
}

div.picture {
    display: inline-block;
    overflow: auto;
    white-space: nowrap;
    max-width: 100%;
}

div.picture img {
    max-height: var(--img-side);
    max-width: var(--img-side);
    margin: 0 var(--horizontal-space);
    vertical-align: middle;
}

div.picture img.big {
    display: none;
    position: fixed;
    max-width: min(100%,700px);
    max-height: min(100%,500px);
	top: 0;
    bottom: 0;
    left: 0;
    right: 0;
	margin: auto;
	box-shadow: 0 0 var(--button-shadow-width) var(--theme-color);
	background: var(--background);
	z-index: 1;
}

div.picture img:hover + img.big,
div.picture img:active + img.big,
div.picture img:focus + img.big,
div.picture img.big:hover,
div.picture img.big:active,
div.picture img.big:focus {
    display: inline-block;
}

/* Ordered List -----------------------------------*/
ol {
    counter-reset: item;
    padding: 0;
}

ol > li {
    display: table;
    counter-increment: item;
    margin-bottom: var(--vertical-space);
    font-size: larger;
    font-weight: bold;
}

ol > li:before {
    content: counters(item, ".") ". ";
    display: table-cell;
    padding-right: var(--horizontal-space-small);
}

ol ul {
    list-style: none;
    margin: var(--space-small);
}

ol p {
    font-weight: normal;
    margin-top: var(--vertical-space);
    margin-bottom: var(--vertical-space-small);
}

li ol {
    margin-top: var(--vertical-space-small);
    font-size: 1rem;
}

li ol > li {
    font-weight: normal;
    font-size: 1rem;
}

li ol > li:before {
    content: counters(item, ".") " ";
}

/* Map --------------------------------------------*/
div.map {
	height: var(--map-height);
	position: relative;
	margin-bottom: var(--horizontal-space);
}

/* Start ------------------------------------------*/
div.unconfirmedUploaded {
	max-height: var(--unconfirmed-uploaded-height);
	overflow: auto;
}