/* 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;
}

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

form header {
	margin-bottom: .5rem;
}

form header .message {
	margin: 0;
}

form div {
	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;
	text-align: right;
}

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

form select {
	box-sizing: content-box;
	padding: 0 .1rem .1rem .1rem;
}

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

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

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

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

form.col button {
	width: 8rem;
}

form.col div {
	flex-direction: column;
}

form.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;
	padding: .5rem;
	left: 0;
	right: 0;
	display: flex;
	justify-content: space-between;
	min-width: 180px;
}

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

#header h1 a {
	display: flex;
}

#header nav {
	order: 3;
	margin-left: auto;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
}

#header nav h2 {
	display: none;
}

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

/* 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 {
	line-height: 100%;
	margin: auto 0;
	padding: 0 .25rem;
}

p.message {
	margin: 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: "⌘";*/
}

.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,
#regulation,
#form {
	border: .1rem solid #00c3f9;
	border-radius: .5rem;
	margin: .5rem;
	margin-top: 0;
	overflow: hidden;
	padding: .5rem;
	display: flex;
	flex-direction: column;
}

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

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

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

#form .recover {
	border: .1rem solid #00c3f9;
	border-radius: .3rem;
	margin-top: 1rem;
	padding: .5rem;
}

#form h3 {
	background-color: #cff;
	margin: -.5rem;
	margin-bottom: .5rem;
	padding: .3rem;
}

#form h3,
#dashboard h3,
#dashboard h4 {
}

#dashboard .location h3 {
	margin: 0;
	border-bottom: 0;
}

#dashboard .location .cell {
	padding: 0;
}

/*#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 0 .5rem 0;
	padding: 0;
}

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

#dashboard .grid {
	display: flex;
	flex-flow: row wrap;
	border-style: solid;
	border-color: #00c3f9;
	border-radius: .2rem;
	border-width: .1rem 0 0 .1rem;
	line-height: normal;
	flex-grow: 1;
	box-sizing: inherit;
	box-sizing: border-box;
	border-collapse: collapse;
	/*box-sizing: border-box;
	display: table;
	line-height: normal;
	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);*/
}

#dashboard .grid:only-child,
#dashboard .grid:last-child,
#dashboard .grid:last-of-type {
	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;
	line-height: normal;
	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: 0 .1rem .1rem 0;
	border-radius: .2rem;
	flex-grow: inherit;
	box-sizing: inherit;
	border-collapse: inherit;
	font-size: .8rem;
	padding: .3rem .1rem;
}

#dashboard .cell:only-child,
#dashboard .cell:last-child,
#dashboard .cell:last-of-type {
	border-radius: 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);
}

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

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

#dashboard .session {
	border: .1rem solid #00c3f9;
	border-radius: .2rem;
	padding: .1rem;
	margin: .1rem;
	overflow-x: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

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

#dashboard .disabled {
	color: #acc;
	background-color: #bee;
}

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

#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 {
	border: .1rem solid #00c3f9;
	border-radius: .2rem;
	padding: .5rem;
	margin-left: .5rem;
}

/* 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: 850px ) {
	#header {
		flex-wrap: wrap;
	}

	#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;
	}

	form label {
		width: 6rem;
	}

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

	form button {
		width: 6rem;
	}
}