/* --- general --- */

.mdc-text-field .mdc-text-field__input ,
.mdc-text-field .mdc-floating-label ,
* { font-family: 'Josefin Sans' , sans-serif; font-weight: 200; font-size: 16px; }
p { margin: 0.75em 0; }
p , li { line-height: 1.5em; }
h1 , H2 , h3 , h4 { font-weight: 400; margin: 0 0 0.5em; }
h1 { font-size: 28px; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }
a { text-decoration: none; }
a , a:active { color: rgb(79 30 134); }
[href] { cursor: pointer; }

.mdc-text-field , [contenteditable] {
	border-radius: calc(var(--radius) / 2);
	box-shadow: inset 0px 1px 6px 0px rgb(0 0 0 / 50%);
}
.mdc-text-field--filled , [contenteditable] ,
.mdc-text-field--filled:not(.mdc-text-field--disabled)
	{ background-color: rgb(var(--color-mid) / 40%); }
.mdc-text-field--filled.mdc-text-field--disabled , [contenteditable="false"]
	{ background-color: rgb(var(--color-mid) / 0%); }
.mdc-text-field--disabled .mdc-text-field__input , [contenteditable="false"]
	{ color: rgb(0 0 0 / 40%); }

[contenteditable]
	{ outline-width: 0; }
input:focus , textarea:focus , [contenteditable]:focus
	{ outline-color: transparent; }
input:-webkit-autofill    , input:-webkit-autofill:hover    , input:-webkit-autofill:focus ,
select:-webkit-autofill   , select:-webkit-autofill:hover   , select:-webkit-autofill:focus ,
textarea:-webkit-autofill , textarea:-webkit-autofill:hover , textarea:-webkit-autofill:focus
	{ background-color: transparent !important;
	  transition: background-color 3600s ease-in-out 0s; }

form { margin-block-end: 0; }

[contenteditable] { overflow: overlay; }
[contenteditable] a { text-decoration: underline; }
[contenteditable] > * { line-height: 1.75em; }

body , section , header , footer , nav , aside , article , .box {
	display: flex;
	box-sizing: border-box;
}
.center {
	display: flex;
	align-content: center; /* vertically */
	justify-content: center; /* horizontally */
}

/* --- var --- */

:root {
	--radius: 12px;
	--white: 243 243 243;
	--shadow:
		0px 3px 5px -1px rgba(0 0 0 / 20%) ,
		0px 6px 10px 0px rgba(0 0 0 / 14%) ,
		0px 1px 18px 0px rgba(0 0 0 / 12%)
	;
}

[color=purple] * , .color[color=purple] * {
	--color-beg: 198 184 223;
	--color-mid: 167 146.5 203;
	--color-end: 136 109 183;
}

[color=blue] * , .color[color=blue] * {
	--color-beg: 184 198 223;
	--color-mid: 146.5 167 203;
	--color-end: 109 136 183;
}

[color=green] * , .color[color=green] * {
	--color-beg: 184 223 198;
	--color-mid: 146.5 203 167;
	--color-end: 109 183 136;
}

[color=orange] * , .color[color=orange] * {
	--color-beg: 223 198 184;
	--color-mid: 203 167 146.5;
	--color-end: 183 136 109;
}

[color=red] * , .color[color=red] * {
	--color-beg: 223 184 198;
	--color-mid: 203 146.5 167;
	--color-end: 183 109 136;
}

.error {
	color: red;
}
.warning {
	color: orange;
}

@media screen and (min-width: 901px) , screen and (min-height: 701px) {
	:root {
		--margin: 20px;
		--header: 48px;
		--button: 56px;
		--button-margin: 16px;
	}
}

@media screen and (max-width: 900px) , screen and (max-height: 700px) {
	:root {
		--margin: 16px;
		--header: 32px;
  		--button: 48px;
		--button-margin: 8px;
	}
}

@media screen and (max-width: 700px) , screen and (max-height: 500px) {
	:root {
		--margin: 12px;
		--header: 48px;
  		--button: 48px;
		--button-margin: 0px;
	}
}

/* --- app --- */

.app {
	position: fixed;
	inset: 0;
	display: flex;
	background: linear-gradient(to bottom , rgb(var(--color-beg)) 0% , rgb(var(--color-end)) 100%);
	overflow: overlay;
}

.app > header  { z-index: 1; }
.app > section { z-index: 0; }
.app #btn-bck  { z-index: 1; }

.app > header {
	position: fixed;
	flex-direction: row;
	height: var(--header);
	inset: 0 0 auto 0;
	transition: height 0.4s ease;
}
	.app > header.screen { background-color: rgb(var(--white)); box-shadow: var(--shadow); }

	.app > header > * { margin: 0 auto; min-width: var(--button); }
	.app > header > *:first-child { margin-left: 0; }
	.app > header > *:last-child { margin-right: 0; }

	.app > header .index * {
		color: black;
		font-size: 18px;
		font-weight: 300;
		padding-top: 2px;
		white-space: nowrap;
	}
	.app > header button {
		width: var(--header);
		height: var(--header);
		margin: 0;
		padding: 0;
	}
	.app > header button .material-icons {
		font-size: calc(var(--header) / 1.2);
	}
	@media screen and (max-width: 700px) , screen and (max-height: 500px) {
		.app > header h1 {
			margin: 6px;
			font-size: 22px;
		}
		.app > header button .material-icons {
			font-size: calc(var(--header) / 1.0);
		}
	}
	.app > header .inset {
		background-color: rgb(var(--color-end));
		background-clip: text;
		-webkit-background-clip: text;
		color: transparent;
		text-shadow: 0 1px 6px rgb(255 255 255 / 80%);
	}
	.app > section .inset {
		box-shadow: inset 0px 1px 6px 0px rgb(0 0 0 / 75%)
	}

.app > section {
	position: absolute;
	align-content: center; /* vertically */
	justify-content: center; /* horizontally */
	flex-direction: column;
	width: 100%;
	min-height: calc(100% - var(--header));
	top: var(--header);
	transition: height 0.4s ease , top 0.4s ease;
	overflow: overlay;
	padding: var(--margin) 0;
}
	.app .main {
		width: 1200px;
		max-width: calc(100% - 2 * (var(--button)) + var(--button-margin));
		margin: 0 auto;
		flex-direction: column;
	}
	.app .main.small   { width: 750px; }
	.app .main.smaller { width: 500px; }
	@media screen and (max-width: 900px) { .app .main { max-width: calc(100% - 1.0 * var(--button)); } }
	@media screen and (max-width: 700px) { .app .main { max-width: calc(100% - 0.5 * var(--button)); } }

	.app .box, .app .bix {
		position: relative;
		padding: var(--margin);
		flex-direction: column;
		border-radius: var(--radius);
		background-color: rgb(var(--white) / 66.66%);
		box-shadow: var(--shadow);
	}
	.app .bix {
		display: inline-block;
	}
	.app .box .inset ,
	.app .box .mdc-text-field {
		border-radius: calc(var(--radius) / 2);
	}
	.app a .box:hover , .app .box[href]:hover,
	.app a .bix:hover , .app .bix[href]:hover {
		background-color: rgb(var(--white) / 75%);
	}
	.app h1.row , .app h2.row { margin-bottom: 0; }
	.app .row:not(:first-child) { margin-top: calc(var(--margin)); }
		.app .box div.action {
			display: flex;
			flex-direction: row;
			justify-content: center;
		}
		.app .box div.action > * { margin: 0 auto; min-width: var(--button); }
		.app .box div.action > *:first-child { margin-left: 0; }
		.app .box div.action > *:last-child { margin-right: 0; }

	.app .main .title {
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
	.app .main div.action {
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
	.app .main div.action > * { margin: 0 auto; min-width: var(--button); }

.app .list {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	text-align: center;
}
	.app .list .box > * {
		margin: auto;
	}
	.app .list .box .material-icons {
		font-size: 48px;
	}
	.app .list .elt {
		display: inline-block;
		position: relative;
		width: 31%;
		max-width: 400px;
		margin: 1%;
	}
	.app .list .elt img {
		width: 100%;
	}
	@media screen and (max-width: 900px) { .app .list .elt { width: 48%; } }
	@media screen and (max-width: 600px) { .app .list .elt { width: 98%; } }

.app .h1 , .app .h1 * {
	font-size: 24px;
	font-weight: 400;
	line-height: 1.5em;
}
.app .h2 , .app .h2 * {
	font-size: 18px;
	font-weight: 400;
	line-height: 1.5em;
}

.app .mdc-text-field ,
.app [contenteditable] {
	width: 100%;
}
.app [contenteditable] {
	min-height: 160px;
	padding: 16px;
	box-sizing: border-box;
}

.app .editable { position: relative; }
.app .editable .label {
	position: absolute;
	top: 6px;
	left: 16px;
	font-size: small;
	color: rgba(0 0 0 / 60%);
	pointer-events: none;
}
.app .editable { position: relative; }
.app .editable .label {
	position: absolute;
	top: 6px;
	left: 16px;
	font-size: small;
	color: rgba(0 0 0 / 60%);
	pointer-events: none;
}

/* --- floating action buttons --- */

.app .mdc-fab { background-color: rgb(var(--color-mid) / 50%); box-shadow: var(--shadow); }
.app .mdc-fab { width: var(--button); height: var(--button); }
.app .mdc-fab.fx { position: fixed; }
.app .mdc-fab.tl { top: calc(var(--header) + var(--button-margin)); left: var(--button-margin); }
.app .mdc-fab.tr { top: calc(var(--header) + var(--button-margin)); right: var(--button-margin); }
.app .mdc-fab.bl { bottom: var(--button-margin); left: var(--button-margin); }
.app .mdc-fab.br { bottom: var(--button-margin); right: var(--button-margin); }
.app .mdc-fab.ml { top: calc(50% - var(--header)/2 + 8px); left: var(--button-margin); }
.app .mdc-fab.mr { top: calc(50% - var(--header)/2 + 8px); right: var(--button-margin); }
.app .mdc-fab.mm { top: calc(50% - var(--header)/2 + 8px); left: calc(50% - var(--header)/2 - 8px); }
.app .mdc-fab.tm { top: calc(var(--header) + var(--button-margin)); left: calc(50% - var(--button)/2); }
.app .mdc-fab.bm { bottom: var(--button-margin); left: calc(50% - var(--button)/2); }

.app .mdc-fab.tl , .app .mdc-fab.tr , .app .mdc-fab.tm { background-color: rgb(var(--color-beg) / 50%); }
.app .mdc-fab.ml , .app .mdc-fab.mr { background-color: rgb(var(--color-mid) / 50%); }
.app .mdc-fab.bl , .app .mdc-fab.br , .app .mdc-fab.bm { background-color: rgb(var(--color-end) / 50%); }

.mdc-fab ,
.mdc-fab:not(:disabled) .mdc-fab__icon ,
.mdc-fab:not(:disabled) .mdc-fab__label ,
.mdc-fab:disabled .mdc-fab__icon ,
.mdc-fab:disabled .mdc-fab__label { color: white; }

.app .mdc-fab.small { width: calc(var(--button) / 1.666); height: calc(var(--button) / 1.666); }

/* --- tables --- */

table { width: 100%; border-collapse: collapse; background-clip: padding-box; overflow: hidden; }
table th { font-weight: 400; }
table th , table td { padding: 6px; }

table tr:nth-child(2n+1) th:nth-child(2n+1) { background-color: rgb(255 255 255 / 50%); }
table tr:nth-child(2n+1) th:nth-child(2n  ) { background-color: rgb(245 245 245 / 50%); }
table tr:nth-child(2n  ) th:nth-child(2n+1) { background-color: rgb(235 235 235 / 50%); }
table tr:nth-child(2n  ) th:nth-child(2n  ) { background-color: rgb(225 225 225 / 50%); }

table tr:nth-child(2n+1) td:nth-child(2n+1) { background-color: rgb(245 245 245 / 50%); }
table tr:nth-child(2n+1) td:nth-child(2n  ) { background-color: rgb(235 235 235 / 50%); }
table tr:nth-child(2n  ) td:nth-child(2n+1) { background-color: rgb(225 225 225 / 50%); }
table tr:nth-child(2n  ) td:nth-child(2n  ) { background-color: rgb(215 215 215 / 50%); }

table tr th.action { padding: 4px; }

/* --- mobile --- */

.app .screen { display: flex; }
.app .mobile { display: none; }

@media screen and (max-width: 700px) , screen and (max-height: 500px) {
	.app > header.mobile {
		position: fixed;
		flex-direction: row;
		height: var(--header);
		inset: 0 0 auto 0;
	}
	.app > header.mobile   { pointer-events: none; }
	.app > header.mobile * { pointer-events: auto; }
	.app > header.mobile .index .mdc-button { width: auto; }
	.app > header.mobile .index .mdc-button__label {
		color: white;
		text-shadow: 1px 1px 4px rgb(0 0 0);
		font-size: 18px;
		font-weight: 300;
		padding-top: 4px;
		white-space: nowrap;
	}
	.app > header.mobile .mdc-fab__icon {
		font-size: 28px;
	}
	.app > section {
		top: 0;
		min-height: 100%;
		padding: var(--header) 0 var(--margin);
	}
	.app .mobile .mdc-fab {
		top: 0;
	}

	.app .mobile { display: flex; }
	.app .screen { display: none; }
}

/* --- print --- */

@media print {
	:root { text-align: justify; }
	:root { --margin: 20px; }

	.app { position: inherit; }
	.app > header.screen , .app > header.mobile { display: none; }

	.app > section { background: none; }
	.app .main { width: inherit; max-width: inherit; }

	.app .box , .app .box .box,
	.app .bix , .app .box .bix { box-shadow: none; }
	.app .mdc-fab { display: none; }
}