@font-face 
{
	font-family: 'Hueber Forward Sans';
	src: url('/assets/fonts/forwardsans-light-webfont.eot'),
		 url('/assets/fonts/forwardsans-light-webfont.woff2') format('woff2'),
		 url('/assets/fonts/forwardsans-light-webfont.woff') format('woff');
	font-weight: 300;
	font-style: normal;
}

@font-face {
  font-family: 'Digital-7';
  src: url('Digital-7.woff') format('woff'),
       url('Digital-7.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

:root
{
	--body-font: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
	--headline-font: "Hueber Forward Sans", Helvetica, Arial, Verdana, sans-serif;
	--picker-font: "Hueber Forward Sans", Helvetica, Arial, Verdana, sans-serif;
	--symbol-font: "Hueber WebUI Symbols";

	--app-min-width: 360px;
	--app-horizontal-margin: 1rem;

	--html-font-size: 16px;
	--app-font-size: .8rem;

	--small-text-size: .8em;

	--thin-line-width: .5px;
	--light-line-width: 1px;
	--medium-line-width: 2px;

	--left-sidebar-width: minmax( 11%, 13em );
	--right-sidebar-width: minmax( 15%, 18em );
	--gap-size: 1.5rem;

	--area-horizontal-margin: 1.5rem;
	--area-vertical-margin: 3rem;
	--container-vertical-margin: 1.5rem;

	--module-padding: 1.5em;

	--round-button-border-radius: 9999px;
	--small-border-radius: .3rem;
	--medium-border-radius: .4rem;
	--large-border-radius: .8rem;

	--circle-size: 2.6em;
	--hexagon-size: 3em;

	--boxshadow-dim-small: 0 .1em .1em;
	--boxshadow-dim-medium: 0 .15em .5em;
	--boxshadow-dim-large: 0 .2em 1.2em;

	--warning-color: #bb232d;

	--badge-color: #31b45e;
	--badge-unsaved-color: #d73542;

	--selected-scenario-color: #d73542;

	--dark-line-color: rgba(0, 0, 0, .75);
	--medium-line-color: rgba(0, 0, 0, .5);
	--mediumlight-line-color: rgba(0, 0, 0, .3);
	--light-line-color: rgba(0, 0, 0, .2);
	--extralight-line-color: rgba(0, 0, 0, .12);

	--line-color: var(--light-line-color);

	--course-main-color: rgb(89, 94, 164);
	--course-main-color-inactive: rgb(89, 94, 164, .5);

	--dossier-1-color: #cec5c3;
	--dossier-1-selected-color: #83827f;
	--dossier-2-color: #cec5c3;
	--dossier-2-selected-color: #83827f;
	--dossier-3-color: #cec5c3;
	--dossier-3-selected-color: #83827f;
	--dossier-4-color: #cec5c3;
	--dossier-4-selected-color: #83827f;

	--dossier-5-color: #cec5c3;
	--dossier-5-selected-color: #83827f;
	--dossier-6-color: #cec5c3;
	--dossier-6-selected-color: #83827f;
	--dossier-7-color: #cec5c3;
	--dossier-7-selected-color: #83827f;
	--dossier-8-color: #cec5c3;
	--dossier-8-selected-color: #83827f;

	--lecon-1-color: #cec5c3;

	--dossier-bgcolor: white;
	--dossier-bordercolor: var(--dossier-1-selected-color);
	--dossier-color: var(--dossier-1-selected-color);

	--selected-dossier-bgcolor: var(--dossier-1-selected-color);
	--selected-dossier-bordercolor: var(--dossier-1-selected-color);
	--selected-dossier-color: white;

	--picker-bgcolor: white;
	--picker-titlebar-bgcolor: #cec5c3;

	--lecon-bgcolor: #ffffffee;
	--selected-lecon-bgcolor: #83827f;

	--lecon-text-color: rgba(0, 0, 0, .75);
	--selected-lecon-text-color: white;

	--course-color: black;
	--course-bg-color: white;
	--active-course-color: white;
	--active-course-bg-color: var(--course-main-color);

	--step-color: #68829a;

	--button-color: white;
	--button-bgcolor: var(--course-main-color);
	/* --button-bgcolor: rgb(94, 134, 174); */
	/* --button-bgcolor: rgb(165, 187, 208); */

	--button-bgcolor-inactive: var(--course-main-color-inactive);
	--button-bgcolor-selected: var(--selected-scenario-color);
	--button-bgcolor-recommended: var(--warning-color);

	--popup-button-color: #a5bbd0;

	--boxshadow-color: rgba(48, 48, 48, .4);

	--inactive-color: rgba(0, 0, 0, .25);
	--inactive-opacity: .25;

	--light-blurred-overlay-bg-filter: blur(1px) saturate(105%);
	--medium-blurred-overlay-bg-filter: blur(4px) saturate(140%);

	--hairline: var(--thin-line-width) solid var(--line-color);
	--thinline: var(--light-line-width) solid var(--line-color);

	--boxshadow-small: var(--boxshadow-dim-small) var(--boxshadow-color);
	--boxshadow-medium: var(--boxshadow-dim-medium) var(--boxshadow-color);
	--boxshadow-large: var(--boxshadow-dim-large) var(--boxshadow-color);

	/* --picker-table-border-filtered: var(--thin-line-width) solid rgba(102, 102, 102, .2); */
	--picker-table-border: var(--thin-line-width) solid rgb(102, 102, 102);
	--picker-table-border-horizontal: var(--thin-line-width) dashed rgb(36, 36, 36);
}

*
{
	box-sizing: border-box;
}

html
{
	font-size: var(--html-font-size);
	height: 100%;
	width: 100%
}

body 
{	
	background-color: rgba(0, 0, 0, .03);
	font-family: var(--body-font);
	font-size: var(--app-font-size);
	margin: 0;
	min-width: var(--app-min-width);
	padding: 0;
}

iframe {
	width:100%;
	height:100%;
}

img
{
	width: 100%;
}

.hidden
{
	display: none !important;
}

/* Buttons */

.button,
input:is([type="button"], [type="submit"], [type="reset"]), 
input[type="file"]::file-selector-button, 
button
{
	appearance: none;
	background-color: var(--button-bgcolor);
	border: 1px solid transparent;
	border-radius: var(--small-border-radius);
	color: var(--button-color);
	cursor: pointer;
	display: inline-block;
	font: inherit;
	font-variant-caps: inherit;
	letter-spacing: inherit;
	line-height: inherit;
	outline: 0;
	overflow: hidden;
	margin: 0;
	min-width: 8em;
	padding: .5em;
	text-align: center;
	text-decoration: none;
	text-indent: 0;
	text-shadow: none;
	text-transform: none;
	vertical-align: top;
	width: auto;
	word-spacing: inherit;
}

.button.alt,
input:is([type="button"], [type="submit"], [type="reset"]).alt, 
input[type="file"].alt::file-selector-button, 
button.alt
{
	background-color: white;
	border-color: var(--button-bgcolor);
	color: var(--button-bgcolor);

}

.button:is(.recommended, .preferred)
{
	background-color: var(--button-bgcolor-recommended);
}

.button.inactive 
{
	background-color: var(--button-bgcolor-inactive);
	cursor: default;
	pointer-events: none;
}

.button.selected 
{
	background-color: var(--button-bgcolor-selected);
}

#toolbar .button 
{
	align-items: center;
	border: 0;
	border-radius: 0;
	display: flex;
	flex-flow: row nowrap;
	font-weight: bold;
	justify-content: space-around;
	min-width: 0;
	padding: 0;
	transition: background-color .3s ease;
	width: 100%;
}

#toolbar .button-text 
{
	padding-right: 5%;
	width: 65%;
}

#toolbar .icon-container 
{
	position: relative;
	width: 3em;
}

#toolbar .icon-container i:is(.fa-regular, .fa-solid)
{
	font-size: 2em;
	padding-bottom: .5em;
	padding-top: .5em;
}

#toolbar .icon-container img
{
	width: 22px;
}

.button.symonly
{
	align-items: center;
	border-radius: var(--round-button-border-radius);
	display: flex;
	height: 1.8rem;
	justify-content: center;
	line-height: normal;
	min-width: auto;
	padding: 0;
	width: 1.8rem;
}

.button.symonly > img
{
	height: auto;
	width: .9rem;
}

.overlay .buttonbar .button:only-child
{
	margin-left: auto;
	margin-right: 0;
}

/* Bereiche */

#page 
{
	min-height: 100vh;
	padding-bottom: 3.5rem;
	position: relative;
	width: 100%;
}

#header 
{
	align-items: center;
	background-color: white;
	/* border-bottom: var(--hairline); */
	box-shadow: var(--boxshadow-small);
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	line-height: .1;
	padding: 0 1em;
	width: 100%;
}

#home
{
	align-items: flex-end;
	display: flex;
	flex: 0 0 auto;
	flex-flow: row nowrap;
}

#home img 
{
	width: 220px;
}

#home #title
{
	color:rgba(0, 0, 0, .75);
	letter-spacing: .2em;
	line-height: 1;
	padding-bottom: 18px;
	text-transform: uppercase;
}

#logocontainer
{
	flex: 1 0 100px;
	text-align: right;
}

#logo 
{
	background-color: var(--course-main-color);
	display: inline-block;
	height: 28px;
	width: 100px;
}

#footer 
{
	background-color: var(--course-main-color);
	bottom: 0;
	color: rgba(255, 255, 255, .8);
	font-size: .75em;
	padding: 1.3em 1em 1.7em 1em;
	position: absolute;
	width: 100%;
}

#footer a 
{
	color:#fff;
	text-decoration: none;
}

.stepdescrcnt
{
	max-height: 60px;
	overflow: hidden;
	transition: max-height .5s ease;
}

.stepdescrcnt > span:first-child
{
	color: var(--step-color);
	display: block;
	font-size: 1.1em;
	font-weight: bold;
	padding-bottom: var(--container-vertical-margin);
}

/* MENU */

#menutitle
{
	margin: var(--area-vertical-margin) auto 0 auto;
	min-width: calc(var(--app-min-width) - var(--app-horizontal-margin) * 2);
	width: calc(100% - var(--app-horizontal-margin) * 2);
}

.horscrollcontainer
{
	width: 100%;
}

.horscrollcontainer > :first-child
{
	overflow-x: scroll;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
}

.horscrollcontainer > :first-child > *
{
	scroll-snap-align: start end;
}

#courseselector
{
	display: flex;
	flex-flow: row nowrap;
	gap: 1em;
	justify-content: center;
	padding-bottom: .5em;
	padding-left: var(--gap-size);
	padding-right: var(--gap-size);
	padding-top: .5em;
}

#courseselector > *
{
	background-color: var(--course-bg-color);
	border: var(--thinline);
	border-radius: var(--round-button-border-radius);
	color: var(--course-color);
	display: inline-block;
	padding: .5em 1em;
	position: relative;
	text-align: center;
	text-decoration: none;
}

#courseselector > span.inactive
{
	display: inline-block;
	opacity: var(--inactive-opacity);
}

#courseselector > a.selected
{
	background-color: var(--active-course-bg-color);
	color: var(--active-course-color);
	font-weight: bold;
}

#courseselector.hascover > a,
#courseselector.hascover > span.inactive
{
	border-radius: var(--medium-border-radius);
}

#courseselector.hascover > a > span,
#courseselector.hascover > span.inactive > span
{
	display: block;
}

#courseselector img
{
	box-shadow: var(--boxshadow-medium);
	max-width: 90px;
	transition: max-width .5s ease;
}

body.volume.dossier #courseselector img
{
	max-width: 50px;
}

#courseselector.hascover span.coursetitle
{
	margin-top: .25em;
}

/* COURS */

#scroll 
{
	border-top: var(--light-line-width) solid var(--dossier-2-color);
	display: grid;
	gap: var(--gap-size);
	grid-template-columns: [toolbar] var(--left-sidebar-width) [main] auto [ads] var(--right-sidebar-width);
	margin-left: var(--gap-size);
	margin-right: var(--gap-size);
	margin-top: var(--area-vertical-margin);
	padding-top: var(--area-vertical-margin);
	position: relative;
}

#bienvenue {
	display:block;
	width:40%;
	margin:0 auto;
	margin-bottom: var(--area-vertical-margin);
}

#couvertures {
	display:block;
	width:55%;
	margin:30px auto;
}

#intro 
{
	margin-bottom: var(--area-vertical-margin);
	position: relative;
}

body.volume #menutitle,
body.volume.dossier #intro #select,
body.volume.dossier.unit #unitselect
{
	margin-bottom: 0;
	max-height: 0;
}

#scroll .dossiers 
{
	display: flex;
	flex-direction: row;
	gap: var(--light-line-width);
	justify-content: space-between;
	margin: 0 auto var(--container-vertical-margin) auto;
}

#scroll .dossiers .dossier 
{
	background-color: var(--dossier-bgcolor);
	border-color: var(--dossier-bordercolor);
	border-style: solid;
	border-width: var(--thin-line-width);
	color: var(--dossier-color);
	display: inline-block;
	/* min-width: 10%; */
	padding: .5em 1em;
	position: relative;
	text-align: center;
	transform: scale(.9);
	transition: all .3s ease;
	white-space: nowrap;
}

#scroll .dossiers .dossier.inactive
{
	opacity: var(--inactive-opacity);
}

#scroll .dossiers .dossier:not(.inactive)
{
	cursor: pointer;
}

#scroll .dossiers .dossier.selected
{
	background-color: var(--selected-dossier-bgcolor);
	border-color: var(--selected-dossier-bordercolor);
	color: var(--selected-dossier-color);
	transform: scale(1);
}

#module 
{
	display: none;
}

#module.open {
	min-height:700px;
}

#module .lecons 
{
	display: flex;
	flex-direction: row;
	font-size: 15px;
	justify-content: space-between;
	margin: 0 auto;
	padding: .4em var(--hexagon-size);
}

#module .lecons .lecon 
{
	background-color: var(--lecon-bgcolor);
	color: var(--lecon-text-color);
	cursor: pointer;
	display: inline-block;
	opacity: .8;
	padding-bottom: .5%;
	padding-top: .5%;
	position: relative;
	text-align: center;
	transform: scale(.8);
	white-space: nowrap;
	transition: all .3s ease;
}

#module .lecons .lecon:hover,
#module .lecons .lecon.selected 
{
	background-color: var(--selected-lecon-bgcolor);
	color: var(--selected-lecon-text-color);
	opacity: 1;
	transform: scale(1);
}

#module .lecons .lecon.inactive 
{
	opacity: var(--inactive-opacity) !important;
	pointer-events: none;
}

#module .lecons .lecon span.title
{
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%,-50%);
	z-index: 1;
}

.pip span.badge::after
{
	background-color: var(--badge-color);
	border-radius: var(--round-button-border-radius);
	display: block;
	position: absolute;
	content: " ";
	width: 12px;
	height: 12px;
}

/* Badges */

.pip.unsaved span.badge::after 
{
	background-color: var(--badge-unsaved-color);
}

#courseselector .course.pip span.badge::after,
#module .lecons .lecon.pip span.badge::after,
#scroll .dossiers .dossier.pip span.badge::after 
{
	top: -5px;
	right: -5px;
}

#module .lecons .lecon.pip span.badge::after 
{
	right: -6px;
	top: -3px;
}

#module .lecons .lecon.circle.pip span.badge::after 
{
	right: -2px;
	top: -2px;
}

.sheet
{
	border-color: var(--dossier-bordercolor);
	border-style: solid;
	border-left-width: var(--light-line-width);
	border-right-width: var(--light-line-width);
}

.sheet.top
{
	background-color: var(--picker-titlebar-bgcolor);
	border-bottom: none;
	border-top-width: var(--light-line-width);
	border-top-left-radius: var(--medium-border-radius);
	border-top-right-radius: var(--medium-border-radius);
}

.sheet.bottom
{
	background-color: var(--picker-bgcolor);
	border-bottom-width: var(--light-line-width);
	border-bottom-left-radius: var(--medium-border-radius);
	border-bottom-right-radius: var(--medium-border-radius);
	border-top: none;
	margin: 0 auto var(--area-vertical-margin) auto;
}

#presentation 
{
	padding: var(--module-padding);
}

#presentation > .titre 
{
	color: #036890;
	letter-spacing: .05em;
	margin-bottom: 1em;
	text-transform: uppercase;
}

.titre[data-id]
{
	cursor: pointer;
}

#presentation .toc 
{
	display: grid;
	gap: .2em .5em;
	grid-template-columns: repeat(3, 1fr);
	line-height: 1.3;
}

#presentation .toc > *
{
	padding: .5em; 
}

#presentation .toc > .titre
{
	align-items: baseline;
	background-color: var(--lecon-bgcolor);
	color: var(--selected-lecon-text-color);
	column-gap: .5em;
	display: flex;
}

#presentation .toc > .titre > .titleblock .titre + .titre2::before
{
	content: " ";
}

#presentation .toc > .titre .titre
{
	font-weight: bold;
}

#presentation .toc > .objectif
{
	font-size: .85em;
	font-weight: bold;
	letter-spacing: .1em;
	text-transform: uppercase;
}

#presentation .toc .line
{
	grid-column: 1 / -1;
}

#presentation .toc > .cell > .titre
{
	font-size: .85em;
	letter-spacing: .1em;
	margin-bottom: .5em;
	text-transform: uppercase;
}

/* Icons im Picker und in der Legenden */

.type-icon
{
	background-color: #777;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 65%;
	color: white;
}

.type-icon::before
{
	font-family: var(--body-font);
	opacity: .8;
}

.type-icon.module-type0
{
	background-color: #31b45e;
	background-image: url("../img/module_type_0.png");
}

.type-icon.module-type1
{
	background-color: #31b45e;
	background-image: url("../img/module_type_1.png");
}

.type-icon.module-type2 
{
	background-color: #fad316;
}

.type-icon.module-type2::before 
{
	content: "HS";
}

.type-icon.module-type3 
{
	background-color: #00adee;
}

.type-icon.module-type3::before 
{
	content: "W";
}

.type-icon.module-type4 
{
	background-color: #f48123;
}

.type-icon.module-type4::before 
{
	content: "A";
}

.type-icon.module-type5 
{
	background-color: #d12329;
	background-image: url("../img/module_type_5.png");
}

.type-icon.module-type6 
{
	background-color: #d12329;
	background-image: url("../img/module_type_6.png");
}

.type-icon.module-type7 
{
	background-color: #ba23d1;
}

.type-icon.module-type7::before 
{
	content: "G";
}

.type-icon.module-type8 
{
	background-color:#757575;
}

.type-icon.module-type8::before 
{
	content: "KV";
}

.type-icon.module-type9 
{
	background-color:#213cc0;
}

.type-icon.module-type9::before 
{
	content: "T";
}

/* PICKER */

#picker 
{
	padding: var(--module-padding);
	position: relative;
}

#welcome
{
	color: var(--selected-lecon-bgcolor);
	font-size: 1.25em;
}

#titre {
	color:#036890;
	margin-right:5px;
	font-weight:normal;
}

#modules 
{
	margin-top: 10px;
	column-gap: .6em;
	display: grid;
	grid-template-columns: repeat(3, 1fr) [legende] 1fr;
}

#modules .source 
{
	grid-row-start: 1;
}

#picker .source-titre,
#picker .source-titre1 
{
	border-bottom: var(--thinline);
	font-size: 1.1em;
	margin-bottom: .5em;
	padding: .5em 0;
}

#picker .source-titre1
{
	border-bottom-color: transparent;
}

#picker .source .materiel {
	margin-bottom:10px;
}

#picker .source .materiel .materiel-titre 
{
	background-color: var(--selected-lecon-bgcolor);
	color: #fff;
	display: inline-block;
	/* font-size: 16px; */
	font-style: italic;
	padding: 1% 10px 1% 5px;
	margin: 10px 0;
}

#picker .source .materiel .table 
{
	border-collapse: collapse;
	display: table;
	font-family: var(--picker-font);
	font-size: 14px;
	font-weight: normal;
	width: 100%;
}

#picker .source .materiel .table .module 
{
	border-bottom: var(--picker-table-border);
	border-top: var(--picker-table-border);
	opacity: 1;
	transition: opacity .5s ease;
}

#picker .source .materiel .table .module.filtered
{
	opacity: .2;
}

#picker .source .materiel .table .module > * 
{
	border-left: var(--picker-table-border-horizontal);
	border-right: var(--picker-table-border-horizontal);
	padding: .3em;
	vertical-align: middle;
}

#picker .source .materiel .table .module > :is(.module-type, .module-duree, .module-check) 
{
	transition: border-color .5s ease;
	width: 11%;
}

#picker .source .materiel .table .module > .module-type
{
	text-align: center;
}

#picker .source .materiel .table .module > :is(.module-duree, .module-check) 
{
	text-align: right;
}

#picker .source .materiel .module > .module-name 
{
	padding-left: .4em;
}

#picker.seventy_thirty.avant .source .materiel .module.seventy_thirty_avant,
#picker.fifty_fifty.avant .source .materiel .module.fifty_fifty_avant 
{
	background-color:rgba(107,191,255,0.5);
}

#picker.seventy_thirty.pendant .source .materiel .module.seventy_thirty_pendant,
#picker.fifty_fifty.pendant .source .materiel .module.fifty_fifty_pendant 
{
	background-color:rgba(255,87,209,0.5);
}

#picker.seventy_thirty.apres .source .materiel .module.seventy_thirty_apres,
#picker.fifty_fifty.apres .source .materiel .module.fifty_fifty_apres 
{
	background-color:rgba(255,181,4,0.5)
}

/* LEGENDE */

#legendecol
{
	align-self: stretch;
	display: flex;
	flex-flow: column nowrap;
	grid-column-start: legende;
	justify-content: space-between;
}

#legende 
{
	background-color:#eaf0f6;
	border-radius: var(--small-border-radius);
	bottom: 1em;
	display: grid;
	grid-auto-rows: 1.4em;
	margin: 1em .5em 0 auto;
	padding: .5em;
	position: sticky;
	row-gap: .4em;
	width: 80%;
}

#legende .titlebar
{
	display: none;
	flex-flow: row nowrap;
	justify-content: space-between;
}

#legende .titre {
	color:#a5bbd0;
	margin-bottom:10px;
}

#legende .legend-row 
{
	column-gap: .8em;
	cursor: pointer;
	display: grid;
	font-size: var(--small-text-size);
	grid-template-columns: 12% auto 16px;
	opacity: 1;
	transition: opacity .2s ease;
	width: 100%;
}

#legende[data-filter]:not([data-filter=""]) .legend-row:not(.filter) 
{
	opacity: .3;
}

#legende .legend-type 
{
	align-self: stretch;
	display: grid;
	justify-self: stretch;
}

#legende .legend-type::before
{
	align-self: center;
	justify-self: center;
}

#legende .legend-name 
{
	align-self: center;
}

#legende .legend-row:not(.filter) .legend-reset 
{
	display: none;
}

#legende .legend-reset .button
{
	height: 16px;
	width: 16px;
}

/* TOOLBAR */

#toolbar 
{
	font-size: var(--small-text-size);
	font-weight: normal;
	text-align: center;
}

body:not(.dossier) #toolbar
{
	display: none;
}

#maintimer
/* #toolbar .timer */
{
	background-color: white;
	border: var(--thin-line-width) solid var(--selected-dossier-bgcolor);
	border-radius: var(--medium-border-radius);
	overflow: hidden;
}

#totaltimehead
{
	background-color: var(--selected-dossier-bgcolor);
	color: white;
	font-size: .9em;
	padding: .4em .2em;
}

#totaltime 
{
	display: block;
	font-family: "Digital-7";
	font-size: 32px;
	padding: .3em .2em .2em .2em;
}

#maintimer.updated #totaltime
{
	animation-duration: .3s;
	animation-name: timerupdate;
	animation-iteration-count: 1;
}

@keyframes timerupdate 
{
	30% 
	{
		color: var(--warning-color);
		transform: scale(1.1);
	}

	60% 
	{
		color: var(--warning-color);
		transform: scale(1.1);
	}
}

#toolbar .timer,
#toolbar .buttons
{
	opacity: 0;
	transition: opacity .2s ease .3s;
}

#toolbar .buttons 
{
	border-radius: var(--medium-border-radius);
	display: flex;
	flex-flow: column nowrap;
	gap: var(--light-line-width);
	margin-top: var(--container-vertical-margin);
	overflow: hidden;
}

body.unit #toolbar .timer,
body.unit #toolbar .buttons 
{
	opacity: 1;
}

body.unit #toolbar .timer
{
	transition: opacity .4s ease;
}

body.unit #toolbar .buttons 
{
	transition: opacity .3s ease .4s;
}

body.unit #totaltime 
{
	opacity: 1;
	transition: opacity .6s ease .1s;
}

#scenario 
{
	border-left: var(--thin-line-width) solid var(--dossier-2-color);
	border-right: var(--thin-line-width) solid var(--dossier-2-color);
	display: none;
	margin: 0 auto;
	padding: 1em 10% 0 10%;
	width: 100%;
}

#scenario .bloc .timeblock
{
	padding: 0 0 1.2em 0;
	max-height: 200px;
	opacity: 1;
	transition: all .7s ease;
}

#scenario .bloc.off .timeblock
{
	margin: 0;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	padding: 0;
}

#scenario .titre 
{
	background-color: var(--selected-scenario-color);
	border-radius: var(--round-button-border-radius);
	color: white;
	cursor: pointer;
	font-size: 18px;
	font-weight: bold;
	margin-bottom: .4em;
}

#scenario .scenario-button 
{
	background-color: var(--selected-scenario-color);
	color: #fff;
	cursor: pointer;
	padding: 5px 0;
	width: 100%;
}

#scenario .time 
{
	background-repeat: no-repeat;
	background-position: left top;
	background-size: auto 1.5em;
	cursor: pointer;
	padding-bottom: .15em;
	padding-left: 2em;
	padding-top: .15em;
	text-align: left;
}

#scenario .time + .button
{
	margin-top: .4em;
}

#scenario .avant {
	color:#6bbfff;
	background-image:url("../img/time_avant.png");
}

#scenario .pendant {
	color:#ff57d1;
	background-image:url("../img/time_pendant.png");
}

#scenario .apres {
	color:#ffb504;
	background-image:url("../img/time_apres.png");
}

#scenario .time.off {
	color:#a6bbd0;
	background-image:url("../img/time_off.png");
}

#scenario .bloc.off .titre,
#scenario .bloc .time.off + .time.off + .time.off + .scenario-button
{
	background-color: #a6bbd0;
}

#scenario .bloc.off .scenario-button,
#scenario .bloc .time.off + .time.off + .time.off + .scenario-button
{
	cursor: auto;
}

#fiche .content 
{
	box-shadow: var(--boxshadow-medium);
	height: 90vh;
	max-width: 560px;
	min-width: 346px;
	overflow-y: scroll;
	width: 80%;
}

#fiche .text 
{
	font-size: 14px;
	line-height: 28px;
	margin-left: auto;
	margin-right: auto;
	max-width: 540px;
}

#fiche-logo 
{
	max-width: 300px;
	min-width: 230px;
	width: 70%;
}

#fiche-close {
	position:absolute;
	top:5%;
	right:5%;
	
	font-size:24px;
	
	cursor:pointer;
}

#fiche input 
{
	border: var(--picker-table-border);
	margin-left: 10px;

}

#fiche-date {
	width:120px;
}

#fiche-nom {
	width:40%;
}

#fiche-remarques {
	border:var(--picker-table-border);
	width:100%;
}

#fiche-totaltime {
	color: var(--warning-color);
}

#fiche .fiche-bloc
{
	margin-top: 1em;
}

#fiche .fiche-bloc-titre 
{
	color: var(--course-main-color);
	font-size: 1.4em;
}

#fiche .fiche-bloc-source-titre 
{
	font-size: 1.2em;
	font-style: italic;
}

#fiche .fiche-bloc-source-bloc 
{
	border-top: var(--mediumlight-line-color) dotted var(--thin-line-width);
	display: grid;
	gap: .5em;
	grid-template-columns: auto 40px;
	grid-template-rows: repeat(2, 1fr);
	padding-bottom: 1em;
	padding-left: 1em;
	padding-top: 1em;
}

#fiche .fiche-bloc-source-bloc-titre 
{
	grid-column: 1 / 1;
	grid-row: 1 / 1;
}

#fiche .fiche-bloc-source-bloc-comment
{
	grid-column: 1 / 1;
	grid-row: 2 / 2;
}

#fiche .fiche-bloc-source-bloc-delete 
{
	align-self: center;
	grid-column: 2 / 2;
	grid-row: 1 / span 2;
	justify-self: center;
}

#fiche-buttons {
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	width:100%;
	margin-top:20px;
	margin-bottom:20px;
}

#fiche .fiche-button {
	padding:1% 5%;
	border-radius:15px;
	color: var(--warning-color);
	color:#fff;
	cursor:pointer;
}

.overlay 
{
	height: 100vh;
	left: 0;
	position: fixed;
	top: 0;
	width: 100vw;
	z-index: 10;
}

.overlay:not(.active)
{
	pointer-events: none;
}

.overlaywrap 
{
	height: 100%;
	position: relative;
	width: 100%;
}

.overlay .bg
{
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	transition: all .4s ease;
	width: 100%;
}

.overlay:not(.active) .bg
{
	background-color: transparent;
	opacity: 0;
	transition: all .3s ease;
}

.overlay.active .bg
{
	opacity: 1;
	transition: all .4s ease;
}

.overlay.active:not(.autoclose) .bg
{
	-webkit-backdrop-filter: var(--medium-blurred-overlay-bg-filter);
	backdrop-filter: var(--medium-blurred-overlay-bg-filter);
	background-color: rgba(0, 0, 0, .4);
}

.overlay.active.autoclose .bg
{
	-webkit-backdrop-filter: var(--light-blurred-overlay-bg-filter);
	backdrop-filter: var(--light-blurred-overlay-bg-filter);
	background-color: rgba(0, 0, 0, .15);
}

.overlay .overlaywrap .content 
{
	background-color: white;
	box-shadow: 0 0 2em var(--boxshadow-color);
	left: 50%;
	max-width: 460px;
	min-width: 330px;
	opacity: 0;
	padding: 2em;
	pointer-events: none;
	position: fixed;
	transform: translate(-50%, -50%);
	transition: opacity .6s ease;
	width: 60%;
}

.overlay.active .overlaywrap .content 
{
	pointer-events: all;
	opacity: 1;
	transition: opacity .1s ease;
}

.overlay.autoclose .overlaywrap .content
{
	border-radius: var(--medium-border-radius);
	bottom: 8%;
	font-size: .9em;
	padding: 1.5em 2em;
}

.overlay:not(.autoclose) .overlaywrap .content 
{
	border-radius: var(--large-border-radius);
	padding: 2em;
	top: 50%;
}

.overlay.autoclose .overlaywrap .content .context
{
	align-items: center; 
	display: flex; 
	flex-flow: row nowrap; 
	justify-content: space-between;
}

.overlay:not(.autoclose) .text 
{
	margin-bottom: 1.5em;
}

.overlay .text p
{
	margin-bottom: 0;
	margin-top: 0;
}

.overlay .text p:not(:first-child)
{
	margin-top: 1em;
}

.overlay .text p:not(:last-child)
{
	margin-bottom: 1em;
}

.overlay .text .big 
{
	font-size: 1.25em;
}

.overlay .text .red 
{
	color: var(--warning-color);
}

.overlay .buttonbar
{
	display: flex;
	flex-flow: row wrap;
}

.overlay.autoclose .buttonbar
{
	justify-content: space-between;
}

.overlay:not(.autoclose) .buttonbar
{
	gap: 1.5rem;
	width: 100%;
	justify-content: end;
}

.overlay:not(.autoclose) .buttonbar:not(:last-child)
{
	margin-bottom: 1.5rem;
}

.overlay:not(.autoclose) .buttonbar:not(:first-child)
{
	margin-top: 1.5rem;
}

.fixed
{
	position: fixed;
}

:is(.sticky, .bsticky)
{
	position: sticky;
}

.overlay .buttonbar.sticky
{
	top: 0;
	padding: .5rem 0;
}

.overlay .buttonbar.bsticky
{
	-webkit-backdrop-filter: var(--medium-blurred-overlay-bg-filter);
	backdrop-filter: var(--medium-blurred-overlay-bg-filter);
	background-color: rgba(255, 255, 255, .5);
	-webkit-backdrop-filter: var(--medium-blurred-overlay-bg-filter);
	backdrop-filter: var(--medium-blurred-overlay-bg-filter);
	bottom: 0;
	margin-top: 1rem;
	padding: .9rem 0 .4rem 0;
}

/* .overlay .button 
{
	background-color: var(--popup-button-color);
	border-radius: var(--small-border-radius);
	color: white;
	cursor: pointer;
	display: inline-block;
	min-width: 8em;
	padding: .5em;
	text-align: center;
}

.overlay .button.symonly
{
	border-radius: var(--round-button-border-radius);
	height: 1.8rem;
	line-height: 1;
	min-width: auto;
	width: 1.8rem;
}

.overlay .buttonbar .button:only-child
{
	margin-left: auto;
	margin-right: 0;
}

.overlay .button.preferred
{
	background-color: var(--popup-preferred-button-color);
} */

.circle
{
	border-radius: var(--round-button-border-radius);
	height: var(--circle-size);
	width: var(--circle-size);
}

.hexagon 
{
	height: var(--hexagon-size);
	width: calc(var(--hexagon-size) * 0.57);
}

.hexagon::before,
.hexagon::after 
{
	bottom: 0;
	background-color: inherit;
	content: '';
	display: block;
	height: inherit;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	width: inherit;
}

.hexagon::before 
{
	transform: rotate(60deg);
}

.hexagon::after 
{
	transform: rotate(-60deg);
}