/* 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 {
	font-family: 'Droid Sans', 'Symbola', 'DejaVu Sans', 'FreeSans', sans-serif;
	/* DejaVu Sans/FreeSans/FreeSerif/Linux Libertine/Symbola/Unifont*/
}

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

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

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

/* 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 h2 {
	order: 1;
	font-size: 1.5rem;
	margin: 0;
	white-space: nowrap;
}

#header h2:before {
	content: ">\00a0";
}*/

#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 */
.notice::before,
.notice::after,
.warning::before,
.warning::after,
.error::before,
.error::after {
	content: "⚠";
	line-height: 100%;
	margin: auto 0;
	padding: 0 .25rem;
}

.notice,
.warning,
.error {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	border: .05rem solid #c33333;
	background-color: #f9c3c3;
	color: #c33333;
	font-size: .9rem;
	padding: .2rem;
	border-radius: .2rem;
	text-align: center;
}

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

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

.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: "?";
	/*content: "⌘";*/
}

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

.flash {
	margin: 0 .5rem .5rem;
}

p.notice,
p.warning,
p.error {
	margin-bottom: .5rem;
}

pre.trace {
	border: .05rem solid #00c3f9;
	border-radius: .2rem;
	padding: .5rem;
	margin-bottom: 1rem;
	font-size: .7rem;
}


/*ul#error::before,
ul#error::after,
ul.error::before,
ul.error::after,
ul#notice::before,
ul#notice::after {
	content: "⚠";
	padding: .1rem .5rem 0 .5rem;
	position: absolute;
}

ul#error::before,
ul#error::after {
	padding-top: .2rem;
}

ul#notice::before,
ul#notice::after {
	content: "ℹ";
	padding-top: .3rem;
}

ul#notice::after,
ul#error::after {
	margin-left: 37.8rem;
}

ul.error::after {
	margin-left: 34rem;
}

ul#notice,
ul#error,
ul.error {
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
	text-align: center;
	border: .05rem solid #c33333;
	background-color: #f9c3c3;
	color: #c33333;
	font-size: .9rem;
	padding: .2rem;
	border-radius: .2rem;
	width: 40rem;
	margin: 0 auto .5rem auto;
}

ul.error {
	width: 36rem;
	margin: .2rem 0 0 0;
}

ul#notice {
	border: .05rem solid #3333c3;
	background-color: #c3c3f9;
	color: #3333c3;
}

ul.error {
	margin-top: .2rem;
}*/

/* Content */
#form,
#content,
#regulation,
#location,
#session {
	border: .1rem solid #00c3f9;
	border-radius: .5rem;
	margin: .5rem;
	margin-top: 0;
	overflow: hidden;
	padding: .5rem;
	display: flex;
	flex-direction: column;
}

/* Section */
section {
	display: flex;
	flex-direction: column;
	border: .05rem solid #00c3f9;
	border-radius: .2rem;
	padding: .5rem;
	margin-bottom: 1rem;
	overflow: hidden;
}

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

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

section h3 {
	background-color: #cff;
	border-bottom: .1rem solid #00c3f9;
	margin: -.5rem;
	margin-bottom: .5rem;
	padding: .4rem;
}

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

section section {
	padding: .5rem;
	padding-bottom: .5rem;
	margin-bottom: .5rem;
}

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

/* Form */
/*#form div {
	margin-bottom: .5rem;
}

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

form {
	display: flex;
	flex-direction: column;
	/ *border: .05rem solid #00c3f9;
	border-radius: .2rem;* /
	padding: .5rem;
}

form section {
	margin-bottom: 1rem;
}

form section:only-child,
form section:last-child,
form section:last-of-type {
	margin-bottom: .5rem;
}
*/

form section,
form section:only-child,
form section:last-child,
form section:last-of-type {
	border: none;
	margin-bottom: .5rem;
}

form section section,
form section section:only-child,
form section section:last-child,
form section section:last-of-type {
	width: 50%;
	padding: 0;
	margin-bottom: 0;
}

form div {
	display: flex;
	flex-direction: row;
	justify-content: center;
	margin-bottom: .5rem;
}

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

form header div.error {
	width: calc(50% + 10rem);
	margin: 0 auto;
}

form section div.error {
	margin-top: .25rem;
}


/*form section div.error {
	margin: 0 1rem;
}*/


label {
	min-width: 10rem;
	font-size: .85rem;
	padding: .2rem 1rem .2rem 0;
	text-align: right;
	white-space: nowrap;
}

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

button.submit {
	width: 25%;
	min-width: 8rem;
	margin: 0 auto;
	padding: .2rem .1rem;
}

/* Vertical form */
form.col {
}

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

form.col div.error {
	flex-direction: row;
}

form.col label {
	text-align: center;
	padding-right: 0;
}

form.col section {
	padding: 0;
}

form.col section section {
	width: auto;
}

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

/* Dashboard */
#dashboard .panel {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	place-content: space-between;
	border: 0;
	margin: 0;
	padding: 0;
}

#dashboard .grid {
	display: table;
	border: .05rem solid #00c3f9;
	flex-grow: 1;
	border-radius: .2rem; /* marche pas sur chrome */
	table-layout: fixed;
	/*width: calc(100% - 12rem);
	border-collapse: collapse;*/
}

#dashboard .cell {
	display: table-cell;
	text-align: left;
	border: .05rem solid #00c3f9;
	font-size: initial;
	height: 8rem;
}

#dashboard dl.cell {
	height: 3rem;
}

#dashboard .cell h3 {
	font-size: 1rem;
	padding: .25rem;
	margin: 0;
}

#dashboard .cell dd {
	text-align: center;
}

#location .seventh {
	width: calc(100% / 7);
}

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

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

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

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

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

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

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

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

/* Session */
#session {
}

#session h2 a::after {
	content: " >";
}

#session h2 a:last-child::after {
	content: none;
}

#location .panel,
#session .panel {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	place-content: space-between;
	border: 0;
	margin: 0;
	padding: 0;
}

#location .grid,
#session .grid {
	display: table;
	line-height: normal;
	padding: 0;
	flex-grow: 1;
	table-layout: fixed;
	border: 0 none;
	/*width: calc(100% - 12rem);
	border-collapse: collapse;*/
}

#location .grid {
	width: calc(100% - 12rem);
	border-collapse: collapse;
}

#session .row {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: .5rem;
	border: .1rem solid #00c3f9;
	border-radius: .2rem;
}

#location .cell,
#session .cell {
	display: table-cell;
	text-align: left;
	padding: .5rem;
	flex-grow: 1;
	border: 0;
}

#location .cell {
	border: .05rem solid #00c3f9;
	Height: 6rem;
}

#session .sub {
	display: flex;
	flex-direction: column;
	line-height: normal;
	margin-bottom: .5rem;
	margin-top: .5rem;
	padding: .5rem;
	border: .1rem solid #00c3f9;
	border-radius: .2rem;
}

#session .grid dd dd {
	text-indent: .5rem;
}

#location .form,
#session .form {
	border: .1rem solid #00c3f9;
	border-radius: .2rem;
	padding: .5rem;
	margin-left: .5rem;
	width: 10rem;
}

#location .form label,
#location .form input,
#location .form button,
#session .form label,
#session .form input,
#session .form button {
	text-align: center;
	min-width: 6rem;
}

/* Regulation */
#regulation {
}


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

#regulation div:only-child,
#regulation div:last-child,
#regulation div:last-of-type {
	margin-bottom: 0;
}*/
/*
 * XXX: TODO:
 * see https://developer.mozilla.org/fr/docs/Web/HTML/Element/dl
 * see https://www.w3.org/Style/Examples/007/fonts.fr.html
 * see https://fonts.googleapis.com/css?family=Droid+Sans:100,200,300,400,500,600,700,800,900,100i,200i,300i,400i,500i,600i,700i,800i,900i|Droid+Sans+Mono:100,200,300,400,500,600,700,800,900,100i,200i,300i,400i,500i,600i,700i,800i,900i|Droid+Serif:100,200,300,400,500,600,700,800,900,100i,200i,300i,400i,500i,600i,700i,800i,900i
 * see https://fonts.google.com/?query=droi
 * see https://fonts.google.com/specimen/Inconsolata
 * see https://fonts.google.com/specimen/Tangerine%20light,light+italic+regular+semi-bold+bold+extra-bold
 * see https://fonts.google.com/?selection.family=Roboto:100i
 * see https://developers.google.com/fonts/docs/getting_started
 */

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

	#location .panel,
	#session .panel {
		place-content: center;
		flex-direction: column;
		flex-wrap: wrap;
	}

	#location .grid,
	#location .form,
	#session .grid,
	#session .form {
		width: auto;
	}

	#location .form,
	#session .form {
		margin: .5rem auto 0 auto;
	}
}