#bodies {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
	min-width: 0;
}

#bodies > div {
	flex: 1;
	overflow: auto;
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 0;
	min-width: 0;
	background-color: var(--back-bgcolor);
}

#bodies > div#home {
	background-color: var(--back-home-bgcolor);
}

.headband {
	flex: 0 1 auto;
	margin: .5rem;
	max-height: 3lh;
	overflow: hidden;
}

.headband > .ti {
	color: var(--title-color);
	font-weight: 900;
}

.headband > .dt {
	display: block;
	margin: 0;
}

#tabs {
	flex: 1;
	display: flex;
	justify-content: flex-end;
	gap: 5px;
}

#tabs::part(bar) {
	display: flex;
	gap: 0.25rem;
}

#tabs::part(burger) {
	flex: 1;
	display: flex;
	gap: 0.25rem;;
	justify-content: flex-end;
}

#tabs > dialog {
	z-index: 1;
}

button.burger {
	flex: 0 1 auto;
	display: flex;
	text-wrap: nowrap;
	align-items: center;
	background-color: var(--tab-active-bgcolor);
	color: var(--tab-active-color);
	border: 1px solid var(--tab-bdcolor);
	border-radius: .5rem;
	cursor: pointer;
	user-select: none;
	font-size: var(--secondaryText-font-size);
	gap: 4px;
}

button.burger::after {
	font-family: "fontelloParcours";
	content: "\E837";
}

.tabInBurger {
	max-width: 50vw;
	overflow: hidden;
	text-overflow: ellipsis;
	align-content: center;
	cursor: pointer;
}

.userModeTeacher .tabInBurger {
	max-width: calc(60vw - 14em);
}

.tab,
a.moreLnk {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 0.2rem;
	background-color: var(--tab-button-bgcolor);
	color: var(--tab-color);
	padding: 0.4rem 0.7rem;
	border: 1px solid var(--tab-bdcolor);
	border-radius: .5rem;
	cursor: pointer;
	user-select: none;
	font-size: var(--secondaryText-font-size);
}

tab-more > .icon.small {
	margin: 0;
	padding: 0;
	background-size: contain;
}

.tab:hover,
a.moreLnk:hover {
	filter: brightness(0.85);
}

.tab > .dt {
	display: block;
	margin: 0;
	color: var(--tab-color);
}

.tab[active] {
	background-color: var(--tab-active-bgcolor);
	color: var(--tab-active-color);
}

.tab[active]:hover {
	filter: none;
	cursor: inherit;
}

.tab[active] > .dt {
	color: var(--tab-active-color);
}

tab-sub.tab {
	display: flex;
}

tab-sub > span {
	max-width: 12rem;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

tab-sub > span.dates > .dt {
	font-size: 80%;
}

tab-sub > .ti {
	grid-area: ti;
	font-size: var(--secondaryText-font-size);
}

tab-sub > .dt {
	grid-area: dt;
	font-size: .65rem;
}

tab-sub::part(label) {
	flex: 1 1 auto;
}

tab-sub::part(close-btn),
.tabInPopup > .close-btn {
	margin-inline: .2rem -.2rem;
	height: 1.4rem;
	min-width: 1.4rem;
	padding: 0;
	border: 1px solid var(--tab-bdcolor);
	border-radius: 0.4rem;
	cursor: pointer;
}

tab-sub::part(close-btn)::before,
.tabInPopup > .close-btn::before {
	font-family: "fontelloParcours";
	display: inline-block;
	content: "\E804";
}

tab-sub::part(close-btn):hover,
.tabInPopup > .close-btn:hover {
	filter: brightness(0.9);
}

.tabInPopup,
#tabs > dialog a.moreLnk {
	display: flex;
	text-wrap: nowrap;
	align-items: center;
	background-color: var(--tab-button-bgcolor);
	color: var(--tab-color);
	border: 1px solid var(--tab-bdcolor);
	border-radius: .5rem;
	cursor: pointer;
	user-select: none;
	font-size: var(--secondaryText-font-size);
	gap: 4px;
	margin: .3em;
	padding: .4rem .7rem;
}

.tabInPopup > .tabLabel {
	flex: 1;
	max-width: 90vw;
	overflow: hidden;
	text-wrap: nowrap;
	text-overflow: ellipsis;
}

.tabInPopup:hover {
	filter: brightness(0.9);
}

user-mode {
	display: flex;
	text-wrap: nowrap;
	align-items: center;
	padding: 0.3rem 0.5rem;
	margin-left: 0.5rem;
	gap: 4px;
	border: 1px solid var(--valid-color);
	border-radius: 0.3rem;
	background-color: var(--header-bgcolor);
	color: var(--valid-color);
	font-size: var(--secondaryText-font-size);
	cursor: pointer;
}

user-mode:hover {
	opacity: 0.7;
}

user-mode::before {
	font-family: "fontelloParcours";
	content: "\E80B";
}

user-mode::after {
	font-family: "fontelloParcours";
	content: "\E837";
	vertical-align: bottom;
}

.brdcrmb.top > .ti {
	display: none;
}

p-link {
	flex: 0 auto;
	display: block;
	min-width: 22px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
    color: var(--navProgram-color);
	cursor: pointer;
}
p-link:not(last-child) {
    flex-shrink: 3;
}
p-link:first-child {
    flex-shrink: 5;
}

p-sol {
	display: block;
}

p-sol.unavailable {
	background-image: url(img/icon/solOff.svg);
	background-size: 1.3em;
	padding-inline-start: 1.3em;
	background-repeat: no-repeat;
	font-style: italic;
	font-weight: lighter;
	font-size: var(--secondaryText-font-size);
	opacity: .7;
}

p-a {
	color: var(--link-color);
	cursor: pointer;
}

p-a.sol.unavailable::after {
	opacity: .6;
}

res-view.unavailable {
	opacity: .6;
}

p-injectinprog > .unavailMsg {
	grid-area: body;
	font-style: italic;
	font-weight: lighter;
	font-size: var(--secondaryText-font-size);
	opacity: .7;
	padding-inline-start: 2rem;
}

.welcomeArea {
	max-width: var(--page-max-width);
	width: -moz-available;
	width: -webkit-fill-available;
	width: fill-available;
	margin: 0 auto;
	padding-inline: 1em;
	padding-block: 2em 0;
}

.practical {
	margin: 1rem 0;
	padding: 1rem;
	background-color: var(--back-bgcolor);
	border-radius: 1rem;
}

.practical > h1 {
	font-size: 1.6rem;
}

dialog#notNow {
	padding: 1rem;
}

h1 > .icon {
	margin: .2rem 0 0 0 !important;
	padding: 0 !important;
	width: 1.8rem !important;
	height: 1.8rem !important;
	background-size: contain !important;
}

h1 > .dates {
	font-size: 1rem;
}

/*RESPONSIVE*/

@media (max-width: 768px) {
	header {
		gap: 0;
		display: grid;
		grid-template:
		  "t t t"
		  "burger mode hide";
		grid-template-columns: 1fr auto auto;
	}

	.headband {
		grid-area: t;
	}

	sw-barburger {
		grid-area: burger;
	}

	p-hidebars {
		grid-area: hide;
	}

	user-mode {
		grid-area: mode;
		max-width: 14em;
	}

	.tabInBurger {
		max-width: calc(100vw - 3em);
	}

	.userModeTeacher .tabInBurger {
		max-width: calc(100vw - 17em);
	}

	.welcomeArea {
		max-width: none;
		margin: 0;
		padding: 0;
	}

	#home {
		padding: 1rem;
	}
}