@font-face {
	font-family: montserrat-regular;
	src: url(fonts/Montserrat-Regular.ttf);
}

@font-face {
	font-family: montserrat-bold;
	src: url(fonts/Montserrat-Bold.ttf);
}

@font-face {
	font-family: montserrat-italic;
	src: url(fonts/Montserrat-Italic.ttf);
}

body {
	margin: 0;
	font-size: 1.2em;
	width: 100vw;
	height: 100vh;
	font-family: montserrat-regular;
}

header {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 500px;
	padding: 10px;
}

h1 {
	font-family: montserrat-bold;
}

.logo {
	margin: 20px 80px;
}

.title {
	margin-top: 200px;
}

.title > h1,
.title > h2 {
	text-transform: uppercase;
	margin: 0 auto;
	line-height: 1.2em;
}

main {
	margin: 0 20%;
	padding-bottom: 2em;
}

.section-name,
.section-admin {
	display: grid;
	margin-bottom: 1em;
}

.section-name {
	grid-template-columns: auto 1fr;
}

.section-admin {
	grid-template-columns: auto 1fr 1.2em;
}

.section-name > h2,
.section-admin > h2 {
	text-transform: uppercase;
}

.section-name > .vertical-line,
.section-admin > .vertical-line {
	border-bottom: 0.1em solid black;
	margin: auto 0;
	margin-left: 4%;
}

.section-admin > a.add {
	width: 1.2em;
	height: 1.2em;
	margin: auto 0.2em;
	background-color: green;
	border: 0.1em solid  green;
	border-radius: 0.1em;
	font-size: 1.4em;
	text-align: center;
	font-weight: bold;
	color: white;
}

div.services {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 1.2em;
}

div.service > div {
	text-transform: uppercase;
	font-weight: bold;
	text-align: center;
}

div.service > img {
	display: block;
	margin: 0 auto;
}

@media(max-width: 768px) {
	div.services {
		grid-template-columns: 1fr;
	}
}

div.contacts > div {
	margin-bottom: 0.5em;
}

div.contacts > div > strong {
	text-transform: uppercase;
	padding-right: 0.1em;
}

div.contacts > div > a {
	color: black;
}

div.contacts > div > a:hover {
	text-decoration: underline;
}

section > .interval,
form > .interval {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2em;
}

.interval > .legend {
	grid-column: 1 / -1;
}

.legend > ul {
	list-style: none;
}

.legend .free,
.legend .used,
.legend .used-elsewhere {
	display: inline-block;
	margin-right: 1em;
}

section a {
	text-decoration: none;
}

@media(max-width: 768px) {
	section > .interval {
		grid-template-columns: 1fr;
	}
}

section .term-list {
	list-style: none;
}

.date-picker > .date-header {
	margin-bottom: 0.3em;
	border-bottom: 0.1em solid black;
}

.date-header > .month {
	display: inline-block;
	font-family: montserrat-bold;
	text-transform: uppercase;
}

.date-header > .year {
	display: inline-block;
	font-family: montserrat-regular;
}

.date-picker {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.date-picker table {
	width: 100%;
}

.date-picker table td {
	text-align: center;
}

.date-picker .disabled {
	color: grey;
}

.date-picker .taken {
	color: black;
}

.date-radio > input[type="radio"],
.date-input > input[type="checkbox"] {
	display: none;
}

span.free,
.date-radio input[type="radio"]+div,
.date-input input[type="checkbox"]+div {
	display: inline-block;
	border: 0.1em solid green;
	border-radius: 1em;
	width: 1.4em;
	height: 1.4em;
	margin: auto auto;
}

span.used {
	display: inline-block;
	border: 0.1em solid orangered;
	border-radius: 1em;
	width: 1.4em;
	height: 1.4em;
	margin: auto auto;
}

span.used-elsewhere {
	display: inline-block;
	border: 0.1em solid black;
	border-radius: 1em;
	width: 1.4em;
	height: 1.4em;
	margin: auto auto;
}

.date-radio input[type="radio"]:checked+div,
input[type="checkbox"]:checked+div,
span.free.checked {
	color: white;
	background-color: green;
}

.row {
	padding-top: 1.2em;
	margin: 0 35%;
}

.row form input[type="submit"],
form .row input[type="submit"] {
	font-family: montserrat-italic;
	font-weight: bolder;
	min-width: 9em;
	width: 100%;
	font-size: 1.2em;
	padding: 0.2em 0;
	border: none;
	background-color: green;
	color: white;
	text-transform: uppercase;
}

form > .form-row {
	display: grid;
	grid-template-columns: 30% 1fr;
	padding-bottom: 0.3em;
}

.form-row.gap {
	padding-top: 0.7em;
}

label.required {
	font-weight: bolder;
}

.invitation {
	margin-bottom: 1.5em;
}

.invitation > h3 {
	font-family: montserrat-bold;
	text-transform: uppercase;
}

.invitation {
	display: grid;
	grid-template-columns: 1fr 1fr 3fr 1fr;
}

.invitation > h3,
.invitation > p {
	grid-column: 1 / -1
}

.invitation > .company {
	grid-column-start: 3;
}

.registered > time {
	grid-column-start: 2;
	font-weight: bold;
}

table.companies {
	width: 100%;
}

.flash {
	margin: 0.6em auto;
}

.danger {
	color: red;
}

.success {
	color: green;
}