/* Reset link */
a {
	text-decoration: none;
	color: #066;
}

a:hover {
	text-decoration: underline solid #00c3f9;
}

h1::first-letter,
h2::first-letter,
h3::first-letter,
h4::first-letter,
h5::first-letter,
h6::first-letter,
a::first-letter {
	color: #00c3f9;
}

/* Font styling */
html, body, dd, li, p, td {
	/* DejaVu Sans/FreeSans/FreeSerif/Linux Libertine/Symbola/Unifont*/
	font-family: 'Droid Sans', 'Symbola', 'DejaVu Sans', 'FreeSans', sans-serif;
	font-display: swap;
}

button, code, input, option, optgroup, pre, select, textarea {
	font-family: 'Droid Sans Mono', monospace;
	font-display: swap;
}

dt, h1, h2, h3, h4, h5, h6, label, legend, th, details {
	font-family: 'Droid Serif', serif;
	font-display: swap;
}

/* Default styling */
h1 {
	font-size: 2rem;
	margin: 1.34rem 0;
}

h2 {
	font-size: 1.5rem;
	margin: 1.245rem 0;
}

h3 {
	font-size: 1.17rem;
	margin: 1.17rem 0;
}

h4 {
	font-size: 1rem;
	margin: 1.33rem 0;
}

h5 {
	font-size: .85rem;
	margin: 1.386rem 0;
}

h6 {
	font-size: .67rem;
	margin: 1.561rem 0;
}

p,
dt {
	font-size: 1rem;
}

dd {
	font-size: .9rem;
}

body {
	display: flex;
	flex-flow: column wrap;
	color: #066;
}

/* Form */
label {
	font-size: .8rem;
	white-space: nowrap;
}

button,
input,
select,
option,
optgroup,
textarea {
	border: .05rem solid #00c3f9;
	border-radius: .2rem;
	font-size: .75rem;
	color: #066;
	background-color: transparent;
	box-sizing: border-box;
}

form {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	text-align: center;
}

/*form header .message {
	margin: 0;
}*/

form .row {
	flex-direction: row;
}

form div {
	display: flex;
	align-content: space-around;
	justify-content: center;
	flex-direction: column;
	margin-bottom: .5rem;
}

form div:only-child,
form div:last-child,
form div:last-of-type {
	margin-bottom: 0;
}

/*form section div {
	display: flex;
	flex-direction: row;
	align-content: space-around;
	justify-content: center;
}

form section section {
	display: flex;
	flex-direction: column;
}*/

form label {
	width: 12rem;
	/*padding: .2rem 1rem .2rem 0;*/
	padding-right: 1rem;
	text-align: right;
}

form input,
form option,
form optgroup,
form select,
form textarea,
form section section {
	width: 24rem;
	padding: .1rem;
}

form select {
	padding: 0 .1rem .1rem .1rem;
}

form button {
	width: 10rem;
	/*margin: .5rem auto 0 auto;*/
	margin: 0 auto;
	padding: 0 .1rem .2rem .1rem;
}

form .message {
	margin: .25rem 0 0 0;
}

/* Vertical form */
.col label {
	width: 8rem;
	padding-right: 0;
	padding-bottom: .2rem;
	text-align: center;
}

.col input,
.col option,
.col optgroup,
.col select,
.col textarea {
	width: 8rem;
}

.col button {
	width: 8rem;
}

/*.col section {
	width: auto;
}*/

.col .row {
	flex-direction: column;
}

.col div.date {
	flex-direction: row;
	justify-content: space-between;
}

/* Header */
#header {
	border: .1rem solid #00c3f9;
	border-top: 0;
	border-radius: 0 0 .5rem .5rem;
	margin: .5rem;
	margin-top: 0;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	/*min-width: 180px;*/
}

#header h1 {
	padding: 0;
	margin: 0;
	vertical-align: middle;
	white-space: nowrap;
}

#header img {
	margin: .5rem;
}

#header nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	padding: .5rem;
}

#header nav h2 {
	display: none;
}

#header nav a {
	flex-grow: 1;
	text-align: center;
	border-radius: .2rem;
	padding: .25rem .5rem;
	margin: 0 0 0 .5rem;
	border: .1rem solid #00c3f9;
	font-weight: bold;
	background-color: #cff;
}

#header nav a:first-child {
	margin: 0;
}

/* Message */
.message {
	margin: 0 .5rem .5rem;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	font-size: .9rem;
	padding: .2rem;
	border-radius: .2rem;
	text-align: center;
	border: .05rem solid transparent;
}

.message::before,
.message::after {
	margin: auto 0;
	padding: 0 .25rem;
}

p.message {
	margin: .5rem;
}

.mortal,
.mortal button,
.mortal select {
	border-color: #c33333;
	background-color: #f9c3c3;
	color: #c33333;
}

.dangerous,
.mortal {
	border-radius: .2rem;
	padding: .5rem 0;
}

.error {
	border-color: #c33333;
	background-color: #f9c3c3;
	color: #c33333;
}

.error::before,
.error::after {
	/*XXX: display /!\ symbol */
	content: "⚠";
}

.notice {
	border-color: #3333c3;
	background-color: #c3c3f9;
	color: #3333c3;
}

.notice::before,
.notice::after {
	/*XXX: see https://www.fileformat.info/info/unicode/char/2139/fontsupport.htm
	 * DejaVu Sans/FreeSans/FreeSerif/Linux Libertine/Symbola/Unifont*/
	/*XXX: display i symbol */
	content: "ℹ";
	/*XXX: display # symbol */
	/*content: "⌘";*/
}

.dangerous,
.dangerous button,
.dangerous select {
	border-color: #c39333;
	background-color: #f9c333;
	color: #936333;
}

.warning {
	border-color: #c39333;
	background-color: #f9c333;
	color: #936333;
}

.warning::before,
.warning::after {
	/*XXX: see https://www.fileformat.info/info/unicode/char/2139/fontsupport.htm
	 * DejaVu Sans/FreeSans/FreeSerif/Linux Libertine/Symbola/Unifont*/
	content: "?";
	/*XXX: display # symbol */
	/*content: "⌘";*/
}

/* Dashboard */
#dashboard,
#form,
#recover,
#regulation {
	border: .1rem solid #00c3f9;
	border-radius: .5rem;
	margin: .5rem;
	margin-top: 0;
	display: flex;
	flex-direction: column;
}

#dashboard h2,
#form h2,
#recover h2,
#regulation h2 {
	background-color: #cff;
	border-bottom: .1rem solid #00c3f9;
	margin: 0;
	padding: .5rem;
}

#dashboard h3 {
	background-color: #cff;
	border-bottom: .1rem solid #00c3f9;
	margin: 0;
	padding: .3rem;
}

#dashboard h4 {
	background-color: #cff;
	border-bottom: .1rem solid #00c3f9;
	margin: 0;
	padding: .2rem;
}

#form form,
#recover form {
	padding: .5rem;
}

/*#dashboard .calendar h3 {
	margin: -.3rem;
	margin-bottom: .3rem;
}*/

#dashboard .subgrid .cell {
	padding: .3rem;
}

#dashboard .subgrid h4 {
	margin: -.3rem;
	margin-bottom: .3rem;
}

/*#dashboard h4 {
	background-color: #cff;
	border-bottom: .1rem solid #00c3f9;
	margin: -.5rem;
	margin-bottom: .5rem;
	padding: .1rem;
}*/

#dashboard .panel {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	place-content: space-between;
	border: 0;
	margin: 0;
	padding: 0 .5rem .5rem .5rem;
}

#dashboard .panel:only-child,
#dashboard .panel:first-child,
#dashboard .panel:first-of-type {
	padding-top: .5rem;
}


#dashboard .panel:only-child,
#dashboard .panel:last-child,
#dashboard .panel:last-of-type {
	padding-bottom: .5rem;
}

#dashboard .candidate section,
#dashboard .location section {
	flex-direction: column;
	flex-grow: 1;
	border: .1rem solid #00c3f9;
	border-radius: .3rem;
	padding: 0;
}

#dashboard .location h4 {
	border-width: 0;
}

#dashboard .grid {
	display: flex;
	flex-flow: row wrap;
	border-style: solid;
	border-color: #00c3f9;
	border-radius: .2rem;
	/*border-width: .1rem 0 0 .1rem;*/
	flex-grow: 1;
	/*box-sizing: inherit;*/
	box-sizing: border-box;
	border-collapse: collapse;
	/*box-sizing: border-box;
	display: table;
	padding: 0;
	flex-grow: 1;
	table-layout: fixed;
	border: 0 none;
	width: fit-content;
	border-collapse: collapse;*/
	/*width: calc(100% - 12rem);
	border-collapse: collapse;*/
	/*width: calc(100% - 12rem);*/
	gap: .1rem;
}

	/*margin: 0;
#dashboard .grid:only-child,
#dashboard .grid:last-child,
#dashboard .grid:last-of-type {
	margin-bottom: 0;
}*/

#dashboard .candidate .grid,
#dashboard .location .grid {
	padding: .5rem;
}

#dashboard .dlgrid {
	display: flex;
	flex-flow: row wrap;
	gap: .5rem;
}

#dashboard dl {
	/*margin: .5rem;
	padding: .25rem;
	border: .1rem solid #00c3f9;
	border-radius: .2rem;
	flex-grow: 1;
	box-sizing: border-box;
	border-collapse: collapse;*/
	margin: 0 .5rem .5rem .5rem;
}

#dashboard dl:first-child,
#dashboard dl:only-child,
#dashboard dl:first-of-type {
	margin-top: .5rem;
}

#dashboard dt {
	font-size: .9rem;
	font-weight: bold;
}

#dashboard dd {
	font-size: .9rem;
	margin-left: 1rem;
}

#dashboard ul {
	/*padding: 0 .1rem;*/
	margin: .1rem;
}

#dashboard li {
	font-size: .8rem;
	margin-bottom: .1rem;
}

#dashboard li:only-child,
#dashboard li:last-child {
	margin-bottom: 0;
}

#dashboard .subgrid {
	display: flex;
	flex-flow: row wrap;
	border-style: solid;
	border-color: #00c3f9;
	border-width: .1rem 0 0 .1rem;
	border-radius: .2rem;
	flex-grow: 1;
	box-sizing: inherit;
	box-sizing: border-box;
	border-collapse: collapse;
	margin: .5rem;
}

#dashboard .subgrid:only-child,
#dashboard .subgrid:last-child,
#dashboard .subgrid:last-of-type {
	margin-bottom: 0;
}

#dashboard .cell {
	border-color: inherit;
	border-style: inherit;
	border-width: .1rem;
	border-radius: inherit;
	flex-grow: inherit;
	box-sizing: inherit;
	border-collapse: inherit;
}

#dashboard .subgrid .cell {
	border-radius: 0;
	border-width: 0 .1rem .1rem 0;
}
#dashboard .subgrid .cell:only-child,
#dashboard .subgrid .cell:last-child,
#dashboard .subgrid .cell:last-of-type {
	border-radius: inherit;
}

#dashboard .fourth {
	min-height: 5rem;
	width: calc(100% / 4 - (6/7*.1rem));
}

#dashboard .seventh {
	min-height: 5rem;
	width: calc(100% / 7 - (6/7*.1rem));
}

#dashboard .third {
	min-height: 5rem;
	width: calc(100% / 3 - (6/7*.1rem));
}

#dashboard .session {
	border: .1rem solid #00c3f9;
	border-radius: .2rem;
	white-space: nowrap;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding: .1rem;
}

#dashboard .session a {
	overflow-x: hidden;
	text-overflow: ellipsis;
}

#dashboard .session a:first-letter {
	color: #066;
}

#dashboard .disabled {
	/*color: #acc;
	background-color: #bee;*/
	filter: grayscale(33%);
}

#dashboard .current {
	background-color: #cff;
}

#dashboard .current h3 {
	text-decoration: underline solid #00c3f9;
}

#dashboard .next {
	background-color: #eff;
}

#dashboard .pending {
	background-color: #ccc;
}

#dashboard .granted {
	background-color: #cff;
	/*background-color: #33b679;
	border-color: #33b679;*/
}

#dashboard .disputed {
	background-color: #fcc;
}

#dashboard .orphaned {
	background-color: #fc9;
}

#dashboard .highlight {
	border-color: #3333c3;
	background-color: #c3c3f9;
	color: #3333c3;
}

#dashboard .form {
	margin: 0 0 0 .5rem;
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

#dashboard .form a,
#dashboard .form h2 {
	white-space: nowrap;
	font-size: 1.17rem;
	padding: .3rem;
}

#dashboard .form section {
	border: .05rem solid #00c3f9;
	border-radius: .2rem;
}

#dashboard .form form {
	padding: .5rem;
	gap: .5rem;
}

/* Weather
 * TODO: drop
>24°C
#dashboard .cleary a::before {
	content: "☀";
}

>17°C
#dashboard .sunny a::before {
	content: "⛅";
}

>10°C
#dashboard .cloudy a::before {
	content: "☁";
}

<=10°C
#dashboard .winty a::before {
	content: "❄️";
}

>0mm
#dashboard .rainy a::before {
	content: "🌂";
}

>2mm
#dashboard .stormy a::before {
	content: "☔";
}*/

/* Regulation */
#regulation {
}

#regulation dl {
	/*display: flex;
	flex-direction: row;
	justify-content: space-around;
	padding-bottom: .5rem;*/
	padding: .25rem;
	margin-bottom: .5rem;
}

#regulation dt {
	font-size: .9rem;
	font-weight: bold;
	padding-bottom: .2rem;
}

#regulation dd {
	font-size: .9rem;
	margin-left: 1.5rem;
}

#regulation dd:before {
}

#regulation dl:only-child,
#regulation dl:last-child,
#regulation dl:last-of-type,
#regulation dt:only-child,
#regulation dt:last-child,
#regulation dt:last-of-type,
#regulation dd:only-child,
#regulation dd:last-child,
#regulation dd:last-of-type {
	margin-bottom: 0;
}

/* Footer */
#footer {
	border: .1rem solid #00c3f9;
	border-radius: .5rem;
	margin: .5rem;
	margin-top: 0;
	padding: .5rem;
	text-align: center;
	font-size: .8rem;
	display: flex;
	justify-content: space-between;
	background-color: #cff;
}

#footer details {
	font-weight: bold;
}

#footer summary::after {
	display: none;
}

#footer summary::-webkit-details-marker {
	display: none;
}

/* viewport responsive hack */
@media ( max-width: 900px ) {
	#header nav {
		padding: 0 0 .5rem 0;
	}

	#header nav a {
		margin: .5rem .5rem 0 0;
		white-space: nowrap;
	}

	#dashboard .calendar {
		place-content: center;
		flex-direction: column;
		flex-wrap: wrap;
	}

	#dashboard .panel:only-child,
	#dashboard .panel:last-child,
	#dashboard .panel:last-of-type {
		margin-bottom: .5rem;
	}

	#dashboard .form {
		margin: .5rem auto 0 auto;
		flex-direction: row;
	}

	form label {
		width: 6rem;
	}

	form input,
	form option,
	form optgroup,
	form select,
	form textarea,
	form section section {
		width: 20rem;
	}

	form button {
		width: 6rem;
	}

	.col label,
	.col input,
	.col option,
	.col optgroup,
	.col select,
	.col textarea {
		width: 12rem;
	}

	.col button {
		width: 12rem;
		box-sizing: fit-content;
	}

	#dashboard .seventh:nth-child(7n+1),
	#dashboard .seventh:nth-child(7n+2),
	#dashboard .seventh:nth-child(7n+3),
	#dashboard .seventh:nth-child(7n+4) {
		width: calc(100% / 4 - (6/7*.1rem));
	}

	#dashboard .seventh:nth-child(7n+5),
	#dashboard .seventh:nth-child(7n+6),
	#dashboard .seventh:nth-child(7n+7) {
		width: calc(100% / 3 - (6/7*.1rem));
	}
}

@media ( max-width: 600px ) {
	form input,
	form option,
	form optgroup,
	form select,
	form textarea,
	form section section {
		width: 14rem;
	}

	#header {
		flex-direction: column;
	}
	#header nav {
		justify-content: space-between;
		padding: 0 .5rem 0 0;
	}
	#header nav a {
		width: auto;
		margin: 0 0 .5rem .5rem;
	}

	#dashboard .seventh:nth-child(n) {
		width: calc(100% / 2 - (6/7*.1rem));
	}

	#dashboard .seventh:nth-child(7n) {
		width: calc(100%);
	}
}

@media ( max-width: 500px ) {
}