@import url('font/font.css');
html{
	font-family: var(--text-font-family), sans-serif;
	background: var(--back-bgcolor);
	min-height: 100%;
	position: relative;
}
body{
	width:100%;
	padding:0;
	margin:0
}
::-webkit-scrollbar {
	width: 12px;
}
::-webkit-scrollbar-track {
	background-color: var(--scrollbar-bgcolor);
	border-radius: 1rem;
}
::-webkit-scrollbar-thumb {
	background-color: var(--scrollbar-color);
	border-radius: 1rem;
}

p {
	line-height:1.5;
	font-size: var(--p-font-size);
	color: var(--p-color);
	font-weight: 300;
}
p img {
	vertical-align: middle;
}

div.root{
	margin: 0 auto;
	min-height: -moz-available;
	min-height: -webkit-fill-available;
	min-height: fill-available;
	display: grid;
    grid-template:
        "header" 3rem
        "main" 1fr
        "footer" auto
        / 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--title-font-family), sans-serif;
	margin-block-start: 0;
	color: var(--title-color);
}

h1 {
	font-size: 2em;
	font-weight: 900;
}

h2 {
	font-size: 1.8em;
	font-weight: 500;
}

h3 {
	font-size: 1.6em;
	font-weight: 900;
}

h4 {
	font-size: 1.4em;
	font-weight: 500;
}

h5 {
	font-size: 1.3rem;
	font-weight: 900;
}

h6 {
	font-size: 1.2em;
	font-weight: 900;
}
a{
	color: var(--link-color);
}
figure{
	text-align: center;
}
figure.image {
	margin: 0;
}
figure.image a {
	display: block;
	overflow: auto;
}
figure.image a img {
	max-width: -moz-available;
	max-width: -webkit-fill-available;
	max-width: fill-available;
	height: auto;
}
figcaption {
	color: var(--p-color);
	font-style: italic;
}
table {
	margin: 0 auto;
	border-collapse: collapse;
	background-color: var(--tile-bgcolor);
}
.welcome table {
    background-color: color-mix(in oklab, var(--tile-bgcolor), transparent 50%);
}
table caption {
	color: var(--p-color);
	font-style: italic;
}
th, td {
	border: 1px solid var(--p-bdcolor);
	padding: 10px;
}
table p{
	margin: 0.2em 0;
}
th{
	background-color: color-mix(in oklab, var(--tile-dark-bgcolor), var(--link-color) 30%);
}
th p{
	color: var(--p-dark-color);
}
th.head_tbtr{

}
td.num_tbtd{
	text-align: right;
}
td.word_tbtd{
	text-align: center;
}
#main {
	grid-area:main;
}
body.library #main {
	padding-inline: 2px;
	margin: 0;
}
body.library #main nav.breadcrumbs{
	text-align: end;
	margin-block-end: 1em;
}
body.library #main nav.breadcrumbs > span.sep:first-child{
	display: none;
}
body.library #main nav.breadcrumbs > .mnuSel_yes {
    opacity: 0.6;
}
body.library #main nav.breadcrumbs > a {
    color: var(--p-color);
    text-decoration: underline;
    text-decoration-color: var(--p-color);
    text-decoration-style: dotted;
    text-underline-offset: 4px;
    white-space: nowrap;
    max-width: 150px;
    text-overflow: ellipsis;
    overflow: hidden;
}
body.library #main nav.breadcrumbs > a:hover {
    opacity: 0.7;
}

body.home #main > #panel-home header > h2,
body.home #main > #panel-home section,
body.page #main > #content header > h2,
body.page #main > #content section,
body.show-courses #main > #panel-courses,
body.show-resources #main > #panel-resources,
div#profile,
div#content > .sessions {
	max-width: 65rem;
	margin: 0 auto;
	width: -moz-available;
	width: -webkit-fill-available;
	width: fill-available;
	padding-inline: 1em;
}

body.home #main > #panel-home header > h2 {
    margin-block-start: 1em;
}

.show-home #main > #panel-home,
body.show-courses #main > #panel-courses,
body.show-resources #main > #panel-resources {
    padding-block: 2em 5em;
}

body.show-courses #main > #panel-courses > .panel_ti,
body.show-resources #main > #panel-resources > .panel_ti {
    margin-block-end: 1rem;
}

body.home #main > #panel-home section > div.section:first-child {
	margin-block-start: 0;
}

#libraryFrame {
	border: 0;
	width: 100%;
	height: 100%;
}
.show-library #main > #panel-library {
	max-width: 65rem;
	margin: 0 auto;
	margin-block-end: 5em;
}
body.library.sliderLoading {
	width: auto;
}
#main > section{
	display: none;
}

.show-library #main > #panel-library,
.show-courses #main > #panel-courses,
.show-resources #main > #panel-resources{
	display: block;
	padding-inline: 1em;
}
.show-home #main > #panel-home {
	display: flex;
	flex-direction: column;
	gap: 2em;
}

.section{
	margin: 2rem 0;
}
.section_ti{
	margin-top: 0;
}

.block{
	margin:1rem 0;
}
.block.imp {
	border:1px solid;
	padding: 0.5em;
	border-radius: 0.5em;
}
.block_ti{
	margin-bottom:0.6rem;
}

.welcome,
.welcomeCnx {
	padding-inline: 1rem;
	padding-block: 1.5rem;
	background-color:var(--welcome-bgcolor);
}
.welcome .section,
.welcomeCnx .section {
	margin: 0;
}
.welcome p,
.welcomeCnx p {
	font-weight: 400;
}
.welcome a,
.welcomeCnx a {
	color: color-mix(in oklab, var(--link-color), #000 25%);
}
.welcome a:hover,
.welcomeCnx a:hover {
	text-decoration:none;
	opacity: 0.7;
}
.welcome .docRootLink,
.welcomeCnx .docRootLink,
#mysessions .docRootLink {
	text-decoration: none;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.welcome .section_co > .sessions,
.welcomeCnx .section_co > .sessions {
	display: flex;
	flex-direction: initial;
	flex-wrap: wrap;
	gap: 0.5em;
	justify-content: space-between;
}
.welcome .section_co > .sessions .block_ti,
.welcome .sessions div.showAllSessions,
.welcomeCnx .section_co > .sessions .block_ti,
.welcomeCnx .sessions div.showAllSessions {
	flex: 1 1 48%;
	margin: 0;
}
.welcome .section_co > .sessions > .session,
.welcomeCnx .section_co > .sessions > .session,
#mysessions > div.session {
	flex: 1 1 100%;
	display:grid;
	grid-template-columns: repeat(1, 1fr);
	gap: 0.5em;
	/*background: var(--welcome-bgcolor);*/
	padding: 0;
	align-items: initial;
	color: initial;
}
.welcome .sessions section_ti,
.welcomeCnx .sessions section_ti {
	grid-area:title;
}
.welcome .sessions div.showAllSessions,
.welcomeCnx .sessions div.showAllSessions {
	grid-area:more;
	text-align:right;
}
.welcome .section_co > .sessions > .session > .session,
.welcome .docRootLink,
.welcomeCnx .section_co > .sessions > .session > .session,
.welcomeCnx .docRootLink,
#mysessions .docRootLink {
	grid-area: auto;
	padding: 0.7rem;
	width: -moz-available;
	width: -webkit-fill-available;
	width: fill-available;
	display: flex;
}
#mysessions .docRootLink {
	background-color: var(--tile-bgcolor);
}

.welcome .section_co > .sessions > .session > div.session,
.welcomeCnx .section_co > .sessions > .session > div.session,
#mysessions div.session,
#mysessions {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	background: transparent;
	padding: 0;
}

.welcome .section_co > .sessions > .session a.session:hover,
.welcome .docRootLink:hover,
.welcomeCnx .section_co > .sessions > .session a.session:hover,
.welcomeCnx .docRootLink:hover,
#mysessions .docRootLink:hover {
	text-decoration: none;
	outline: 1px solid var(--search-hover-color);
}

.sessionList_ti {
    margin-block-end: 0.5em;
}

.placeholder{
	height:4em;
	background-color: var(--tile-bgcolor);
	border-radius:0.5em;
	flex: 1 1 auto;
}

.dyn-widget {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: 1em;
	margin: 0.5em 0;
}
.dyn-widget > * {
	display: flex;
}

.dyn-widget > * > a:hover {
	outline: 1px solid var(--search-hover-color);
	background-color: var(--tile-hover-bgcolor);
}
.dyn-widget > * > a[aria-disabled="true"]:hover,
.dyn-widget > * > a[aria-disabled="true"] div.prog:hover,
.dyn-widget > * > a[aria-disabled="true"] div.session:hover {
	outline: none;
	background-color: var(--tile-bgcolor);
	cursor: default;
}

.label.home {
	grid-area: label;
	width: fit-content;
	height: fit-content;
	justify-self: end;
	text-transform: uppercase;
	font-size: 85%;
	background-color: var(--course-bgcolor);
	color: var(--course-color);
	border-radius: 3px;
	padding: 5px;
	display: inline-flex;
	gap: 3px;
}

div.cover {
	grid-area: cover;
	display: flex;
	align-items: flex-start;
	margin-inline-end: 1em;
}
div.cover img {
	object-fit: contain;
	width: -moz-available;
	width: -webkit-fill-available;
	width: fill-available;
	max-width: 120px;
	height: -moz-available;
	height: -webkit-fill-available;
}
div.tileHead {
	grid-area: head;
	margin-block-end: 5px;
}
.dyn-widget > * > a div.tagline {
	grid-area: tagline;
	margin-block-end: 5px;
}

div.sessions {
	grid-area: sessions;
	margin-block-start: 8px;
	display: flex;
	flex-direction: column;
	gap: 5px;
	z-index: 9;
}
.sessions > div.session {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 8px;
	row-gap: 2px;
	background: var(--tile-bgcolor);
	justify-content: space-between;
}
.sessions > div.session a.session:hover,
button.registration:hover {
	outline: 1px solid var(--search-hover-color);
	background-color: var(--tile-hover-bgcolor);
	text-decoration: none;
    opacity: 0.7;
}
.session.subtile .session.forbidden {
	opacity: 0.8;
}
.sessions > div.session.subtile.forbidden:hover {
	outline: none;
	background-color: var(--tile-bgcolor);
	cursor: default;
}
.session.subtile > .session {
	border-radius: 0.3em;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding-inline: 0 7px;
	text-decoration: none;
	color: var(--p-color);
}
.session.subtile a.session::after {
    font-family: "homeFontello";
	content: "\E80B";
	display: inline-block;
}
div.session .label.session {
	text-transform: uppercase;
	font-size: 80%;
	background-color: var(--session-bgcolor);
	color: var(--session-color);
	border-radius: 3px;
	padding: 5px;
	display: inline-flex;
	gap: 3px;
}
div.session .label.session::before {
    font-family: "homeFontello";
	content: "\E803";
	display: inline-block;
}
div.session .dates,
div.session .code {
	font-size: var(--secondaryText-font-size);
	color: var(--dt-color);
}
div.session .registrationClosed {
	font-style: italic;
	opacity: 0.6;
	color: var(--p-color);
}
button.registration {
	appearance: none;
	font-size: 1em;
	border: none;
	background-color: transparent;
    padding-inline: 3px;
    padding-block: 2px;
	margin: 0;
	cursor: pointer;
}
span.registered {
    font-style: italic;
}

.progs {
	grid-area: progs;
	margin-block-start: 1em;
	display: flex;
	flex-direction: column;
	gap: 0.2em;
}
.progs > div.prog {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 8px;
	row-gap: 2px;
	font-weight: 300;
}
.progs > div.prog:hover {
	background-color: var(--tile-hover-bgcolor);
}
.prog a.prog {
	padding: 5px;
	border-radius: 0.3em;
	width: -moz-available;
	width: -webkit-fill-available;
	width: fill-available;
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 8px;
	text-decoration: none;
	background: var(--tile-bgcolor);
	color: var(--prog-color);
}
.prog a.prog:hover {
	outline: 1px solid var(--search-hover-color);
	background-color: var(--tile-hover-bgcolor);
}
div.prog .label.prog {
	text-transform: uppercase;
	font-size: 80%;
	background-color: var(--prog-bgcolor);
	color: var(--prog-color);
	border-radius: 3px;
	padding: 5px;
	display: inline-flex;
	gap: 3px;
	font-weight: 500;
}
div.prog .label.prog::before {
    font-family: "homeFontello";
	content: "\E809";
	display: inline-block;
}

img.cover {
	object-fit: contain;
	width: -moz-available;
	width: -webkit-fill-available;
	width: fill-available;
	max-width: 120px;
}

.content {
	display: contents;
}

#mysessions .docRootLink .content {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.title {
	font-family: var(--title-font-family), sans-serif;
	font-size: 1.1em;
	color: var(--title-color);
}

span.tagline {
	font-size: var(--secondaryText-font-size);
	line-height: 1.4;
	font-weight: 300;
}

.keywords {
	grid-area: keywords;
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	font-size: var(--secondaryText-font-size);
}
.keywords:empty{
	display: none;
}
.keyword {
	padding: 0.3em 0.5em;
	background: var(--tag-bgcolor);
	border-radius: 0.3rem;
	height: fit-content;
}

.visavis {
	display: flex;
	flex-flow: row;
	margin: 1rem 0;
	gap: 1.5em;
}
.visavis > .first {
	box-sizing: border-box;
}
.visavis > .next {
	box-sizing: border-box;
}
.visavis.half-half > .first {
	flex: 1 1 50%;
	overflow: hidden;
}
.visavis.half-half > .next {
	flex: 1 1 50%;
	overflow: hidden;
}
.visavis.one-two > .first {
	flex: 1 1 33%;
	overflow: hidden;
}
.visavis.one-two > .next {
	flex: 1 1 67%;
	overflow: hidden;
}
.visavis.two-one > .first {
	flex: 1 1 67%;
	overflow: hidden;
}
.visavis.two-one > .next {
	flex: 1 1 33%;
	overflow: hidden;
}
.visavis.auto > div {
	flex: 1 1 auto;
}
.visavis .section{
	margin:0.5rem 0;
}
.visavis .block_co .image{
	margin:0;
}
.visavis .block_co img{
	max-width: -moz-available;
	max-width: -webkit-fill-available;
	max-width: fill-available;
}

.openedDates{
	font-weight: 500;
	font-size: var(--secondaryText-font-size);
	color: var(--dt-color);
}

/* SEARCH BAR */
.searchBar {
	display: flex;
	width:100%;
	position: relative;
	border-radius: 0.3em;
	background-color: var(--search-bgcolor);
	white-space: nowrap;
	border-block-end: 3px solid var(--search-bdcolor);
}
.searchBar.open{
	border-radius: 0.3rem 0.3rem 0 0;
	box-shadow: 0px 5px 6px -2px rgb(0 0 0 / 10%);
}
input:focus-visible{
	outline: 1px solid var(--link-color);
	border-radius: 0.3rem;
}
input:focus-visible::placeholder{
	opacity: 0.3;
}
input::placeholder{
	opacity: 0.6;
}
input.searchTxt {
	flex: 1;
	padding-block: 0;
	padding-inline: 15px 55px;
	font-size: var(--p-font-size);
	border: none;
	background-color: transparent;
}

input.searchTxt:focus-visible {
    border-radius: 0.3rem 0 0 0.3rem;
}

button.searchBtn{
	height: 40px;
	flex: 0 0 40px;
	color: #fff;
	border-radius: 0 0.3em 0.3em 0;
	background: var(--search-link-color);
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

button.searchClearBtn {
	border: none;
	background: none;
	color: var(--search-link-color);
	cursor: pointer;
	position: absolute;
    right: 45px;
    line-height: 40px;
}
button.searchClearBtn.hidden{
	display: none;
}

button.searchBtn:hover,
button.searchClearBtn:hover {
	opacity: 0.7;
}

button.searchBtn span,
button.searchClearBtn span {
	position: absolute;
	left: -9999px;
}

button.searchBtn::before,
button.searchClearBtn::before {
    font-family: "homeFontello";
	display: inline-block;
}
button.searchBtn::before {content: "\E816"; font-size: 1.5em;}
button.searchClearBtn::before {content: "\E81B"; font-size: 1.3em;}

div.suggest{
	position: absolute;
	border-top: 2px solid var(--search-bdcolor);
	box-shadow: 0px 5px 6px -2px rgb(0 0 0 / 10%);
	z-index: 2;
	left: 0;
	right: 0;
	padding: 0.5rem;
	top: 44px;
	max-height: 15rem;
	overflow: auto;
	box-sizing: border-box;
	background-color: var(--search-bgcolor);
	border-radius: 0 0 .3rem .3rem;
}
.suggest:empty{
	display: none;
}
div.suggest > div.quickAccess:before{
	content: "Tous les résultats: clic ou touche entrée";
	font-family: var(--title-font-family), sans-serif;
	font-size: var(--secondaryText-font-size);
	text-transform: uppercase;
	color: var(--search-second-color);
	font-weight: 500;
	padding-bottom: 0.5rem;
	margin-bottom: 0.5rem;
	text-align: right;
	display: block;
	border-bottom: 1px solid var(--search-bdcolor);
}
.suggest > .quickAccess > .title{
	font-size: var(--secondaryText-font-size);
	text-transform: uppercase;
	color: var(--search-second-color);
	font-weight: 500;
	margin-bottom: 0.3rem;
}
.suggest > .quickAccess > .title:before {
    font-family: "homeFontello";
	content: "\E814";
	display: inline-block;
	margin-inline-end: 0.2rem;
}
.suggest ul{
	padding: 0;
	margin: 0;
}
li.suggest{
	list-style-type: none;
	position: relative;
}
li.suggest a{
	display: block;
	padding: .5rem;
	text-decoration: none;
	font-size: var(--p-font-size);
	border-radius: .3rem;
}
li.suggest a:hover{
	background-color: var(--search-hover-bgcolor);
}
li.suggest a span.title{
	font-family: var(--text-font-family), sans-serif;
	color: var(--p-color);
	font-weight: 500;
}

/* SEARCH RESULTS AND TAB HEAD */
.tabhead {
	border-block-end: 1px solid;
	border-color: color-mix(in oklab, var(--search-bdcolor), #000 5%);
}
.tabhead .tabbutton {
	appearance: none;
	font-family: var(--text-font-family);
	font-size: 1rem;
	color: var(--link-color);
	line-height: 2rem;
	border: none;
	border-block-end: 2px solid;
	border-color: transparent;
	background: transparent;
	cursor: pointer;
}
.tabhead .tabbutton:hover {
	filter: brightness(0.5);
}
.tabhead .tabbutton.selected {
	color: var(--title-color);
	border-color: var(--title-color);
	cursor: default;
}

.searchBody{
	display: grid;
	grid-template-columns: 1fr 3fr;
	column-gap: 1.5em;
}

[hidden] {
    display: none!important;
}

.searchFacets {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}
.searchFacets .facet {
	display: flex;
	flex-direction: column;
	gap: 3px;
	border: 1px solid var(--form-bdcolor);
	border-radius: 5px;
	padding-inline: 0.7rem;
	padding-block: 0.7rem;
	margin: 0;
}
.searchFacets .facet.type {
    position: absolute;
    left: -9999px;
}
.searchFacets .facet legend {
	padding: 0;
	margin-inline: 0;
	float: left;
	font-size: 1.1em;
	color: var(--p-color);
	margin-block: 0 5px;
}
.searchFacets .facet > label {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	font-size: var(--secondaryText-font-size);
	color: var(--p-color);
	cursor: pointer;
}
.searchFacets .facet > label:hover {
	opacity: 0.7;
}
.searchFacets .facet > label.empty {
	display: none;
}
.searchFacets .facet input[type="checkbox"] {
	margin: 0;
}
.searchFacets .facet > label > span {
	display: flex;
	gap: 0.2rem;
	align-items: center;
}
.searchFacets .facet.processing > label > span::before {
    display: none;
}

.searchFacets .facet > select{
	border-radius: 0.3rem;
	border:1px solid var(--tile-bdcolor);
	margin: 0.2rem 0;
	padding: 0.4rem 1rem 0.4rem 0.4rem;
	color: var(--p-color);
	font-size: var(--secondaryText-font-size);
}

.aggCount{
	margin-left: auto;
	font-weight: 900;
}

.searchColumn.main {
    display: flex;
	flex-wrap: wrap;
	gap: 2px;
	justify-content: space-between;
	align-content: flex-start;
}

.searchResults{
	display: contents;
}
h2.resultsTitle {
	font-size: var(--p-font-size);
	color: var(--p-color);
	font-style: italic;
	font-family: var(--text-font-family), sans-serif;
	flex: 1 1 auto;
	align-self: flex-end;
	margin: 0;
	margin-block-end: 0.5em;
	order: 1;
}
.noResults h2.resultsTitle {
    order: 5;
}
#docorder {
	display: flex;
	gap: 5px;
	color: var(--p-color);
	align-self: flex-end;
	width: fit-content;
	justify-content: flex-end;
	align-items: center;
	margin-block-end: 0.5em;
	order: 2;
	border: 1px solid var(--form-bdcolor);
    padding-inline: 5px;
    padding-block: 2px;
    border-radius: 5px;
}
#docorder button {
    border: none;
    padding: 0;
	font-size: inherit;
	background: transparent;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 2px;
	color: color-mix(in oklab, var(--p-color), transparent 40%);
}
#docorder > span.scoreAsc,
#docorder > button.titleAsc.asc,
#docorder > button.titleDesc.desc {
    color: var(--link-color);
}
#docorder > span.scoreAsc {
    pointer-events: none;
}
#docorder button:hover{
	filter: brightness(0.3);
}

#docorder button.titleAsc:before,
#docorder button.titleDesc:before {
    content: "";
    width: 1em;
    height: 1em;
    background-size: contain !important;
	display: inline-block;
    background: url(img/sort.svg) center no-repeat;
}
#docorder button.titleAsc.asc:before{background: url(img/sortUp.svg) center no-repeat;}
#docorder button.titleDesc.desc:before {background: url(img/sortDown.svg) center no-repeat;}

.searchResults .result {
	flex: 1 1 100%;
	order: 4;
}

a.course {
	width: -moz-available;
	width: -webkit-fill-available;
	width: fill-available;
	padding: 1rem;
	background: var(--tile-bgcolor);
	text-decoration: none;
	color: var(--p-color);
	display: grid;
	grid-template:
            [cover-left] "cover head label" 0fr [label-right]
            [cover-left] "cover tagline tagline" 0fr [tagline-right]
            [cover-left] "cover keywords keywords" 0fr [keywords-right]
            [cover-left] "cover content content" 0fr [content-right]
            [progs-left] "progs progs progs" 0fr [progs-right]
            [sessions-left] "sessions sessions sessions" 0fr [sessions-right] / auto 1fr auto;
}
#panel-resources .searchResults .result > a.docRootLink,
.resourceList .dyn-widget > * > a,
.dyn-widget[data-type="resources"] > * > a {
	width: -moz-available;
	width: -webkit-fill-available;
	width: fill-available;
	padding: 1rem;
	background: var(--tile-bgcolor);
	text-decoration: none;
	color: var(--p-color);
	display: grid;
	justify-content: start;
	align-items: baseline;
	column-gap: 7px;
	row-gap: 5px;
}

#panel-resources #resources .searchResults .result > a.docRootLink,
.resourceList .dyn-widget > * > a,
.dyn-widget[data-type="resources"] > * > a {
	grid-template:
        [support-left] "support support otherLnks" 0fr [otherLnks-right]
        [head-left] "head head head" 0fr [head-right]
        [metas-left] "metas metas metas" 0fr [metas-right]
        [keywords-left] "keywords keywords keywords" 0fr [keywords-right]
        [pages-left] "pages pages pages" 0fr [pages-right]
        [highlight-left] "highlight highlight highlight" 0fr [highlight-right]
            / auto 1fr auto;
}
#panel-resources #refined .searchResults .result > a.docRootLink {
	grid-template:
        "head" 0fr
        "highlight" 0fr
        "stack" 0fr
            / auto;
}
#panel-resources .searchResults .result > a.docRootLink .stack {
	grid-area: stack;
	font-size: var(--secondaryText-font-size);
	color: var(--search-second-color);
	font-weight: 300;
}
#panel-resources .searchResults .result > a.docRootLink .stack .stackSep {
	margin-inline: 0.2em;
}

.dyn-widget[data-type="resources"] > * > a .restools {
	display: contents;
}
.resourceList .dyn-widget > * > a .metas,
.dyn-widget[data-type="resources"] > * > a .metas {
	/*grid-area: highlight;*/
	grid-area: metas;
	font-size: 90%;
	display: flex;
	align-items: baseline;
	gap: 0.5em;
}
.searchResults .result > a.docRootLink:hover {
	outline: 1px solid var(--search-hover-color);
	background: var(--tile-hover-bgcolor);
}

.result > a.docRootLink[aria-disabled="true"]:hover,
.result > a.docRootLink[aria-disabled="true"] div.prog:hover,
.result > a.docRootLink[aria-disabled="true"] div.session:hover {
	outline: none;
	background-color: var(--tile-bgcolor);
	cursor: normal;
}

#panel-resources .searchResults .result > a.docRootLink .content,
.resourceList .dyn-widget > * > a .content {
	display: contents;
}
.tileHead {
	grid-area: head;
}

div.tagline {
	grid-area: tagline;
	margin-block-end: 4px;
}

.searchResults .result .pages {
	grid-area: pages;
	display: grid;
	grid-template:
        "btn pages" 0fr
        "content content" 0fr
        / 1fr auto;
}
.searchResults .result .pages button.open_pages,
.searchResults .result .pages button.close_pages {
	grid-area: btn;
	color: var(--link-color);
	padding: 3px 5px;
	border: none;
	width: fit-content;
	font-family: var(--text-font-family), sans-serif;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 2px;
}
.searchResults .result .pages button.open_pages:hover,
.searchResults .result .pages button.close_pages:hover {
	opacity: 0.7;
}
.searchResults .result .pages button.open_pages::before,
.searchResults .result .pages button.close_pages::before {
    font-family: "homeFontello";
    display: inline-block;
}
.searchResults .result .pages button.open_pages::before {content: "\E831";}
.searchResults .result .pages button.close_pages::before {content: "\E804";}

.searchResults .result .pages .pages_head {
	grid-area: pages;
	color: var(--search-second-color);
	font-weight: 300;
	font-style: italic;
	font-size: calc(0.90 * var(--p-font-size));
}
.searchResults .result .pages ul.pages {
	grid-area: content;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.6em;
	padding-inline-start: 0.6em;
	padding-block-start: 0.6em;
	margin: 0;
	border-inline-start: 1px solid var(--search-bdcolor);
}
.searchResults .result .pages ul.pages > li.page {
	display: contents;
}
.searchResults .result .pages ul.pages > li a.page {
	text-decoration: none;
}
.searchResults .result .pages ul.pages > li a.page:hover {
	color: color-mix(in oklab, var(--p-color), #000 50%);
}
.searchResults .result .pages ul.pages > li a.page p.highlight {
	display: block;
}

#panel-resources .searchResults .result .restools,
.resourceList .dyn-widget > * > a .restools {
	flex: 0 0 auto;
	display: contents;
}
#panel-courses > .panel_co,
#panel-resources > .panel_co {
	display: flex;
	flex-direction: column;
}
#panel-courses > .panel_co {
	gap: 1.5em;
}
#panel-resources > .panel_co {
	gap: 1em;
}

.mainSupport > span,
.monosupport > span {
	display: flex;
	align-items: baseline;
	gap: 0.2rem;
}

.searchLabels {
	display: flex;
	flex-wrap: wrap;
	gap: 0.2em;
	margin-block-end: 0.5rem;
	flex: 1 1 100%;
	order: 3;
	align-items: baseline;
}
.searchLabels > .label {
	display: flex;
	align-items: center;
	gap: 3px;
	background-color: color-mix(in oklab, var(--link-color), transparent 80%);
	padding: 3px 8px;
	border-radius: 5em;
	font-size: var(--secondaryText-font-size);
	height: fit-content;
}
.searchLabels > .label .remove {
	appearance: none;
	background: transparent;
	border: none;
	padding: 0;
	display: flex;
	align-items: center;
	cursor: pointer;
	margin-inline-start: 2px;
}
.searchLabels > .label .remove:hover {
    opacity: 0.5;
}
.searchLabels > .label .remove::before {
    font-family: "homeFontello";
	content: "\E804";
	display: inline-block;
}
.searchLabels > .label .remove span {
	position: absolute;
	left: -9999px;
}

.searchLabels div.reset {
    order: 5;
}
.searchLabels button.reset {
    appearance: none;
    border: 0;
    padding: 0;
    background-color: transparent;
    font-family: var(--text-font-family);
    color: var(--link-color);
    font-size: 0.9rem;
    margin-inline-start: 5px;
    cursor: pointer;
}
.searchLabels button.reset:hover {
    opacity: 0.7;
}

div.searchFacets > fieldset.facet > label span::before,
.mainSupport > span::before,
.monosupport > span::before,
.searchLabels > .label::before,
div.searchFacets > fieldset.facet > label span::before {
	font-family: "homeFontello";
    display: inline-block;
}

.mainSupport .web::before,
.monosupport .web::before,
div.searchFacets > fieldset.facet > label span.web::before {
    content: "\E833";
}
.mainSupport .slides::before,
.monosupport .slides::before,
div.searchFacets > fieldset.facet > label span.slides::before {
	content: "\E834";
}
.mainSupport .pdf::before,
.monosupport .pdf::before,
div.searchFacets > fieldset.facet > label span.print::before {
	content: "\E835";
}
.mainSupport .video::before,
.monosupport .video::before,
div.searchFacets > fieldset.facet > label span.video::before {
	content: "\E836";
}
.mainSupport .image::before,
.monosupport .image::before,
div.searchFacets > fieldset.facet > label span.image::before {
	content: "\E80E";
}
.mainSupport .audio::before,
.monosupport .audio::before,
div.searchFacets > fieldset.facet > label span.audio::before {
	content: "\E801";
}
.mainSupport .doc::before,
.monosupport .doc::before,
div.searchFacets > fieldset.facet > label span.doc::before {
	content: "\E809";
}
.mainSupport .file::before,
.monosupport .file::before,
div.searchFacets > fieldset.facet > label span.file::before {
	content: "\E837";
}
.mainSupport .archive::before,
.monosupport .archive::before,
div.searchFacets > fieldset.facet > label span.archive::before {
	content: "\E833";
}
.mainSupport .scorm::before,
.monosupport .scorm::before,
div.searchFacets > fieldset.facet > label span.scorm::before {
	content: "\E833";
}
.mainSupport .topaze::before,
.monosupport .topaze::before,
div.searchFacets > fieldset.facet > label span.topaze::before {
	content: "";
    width: var(--secondaryText-font-size);
    height: var(--secondaryText-font-size);
    background-size: contain !important;
    background: url(img/topaze.svg) center no-repeat;
}
.mainSupport .opale::before,
.monosupport .opale::before,
div.searchFacets > fieldset.facet > label span.opale::before {
	content: "";
    width: var(--secondaryText-font-size);
    height: var(--secondaryText-font-size);
    background-size: contain !important;
    background: url(img/opale.svg) center no-repeat;
}

.searchLabels > .label[data-value="info"]::before,
div.searchFacets > fieldset.facet > label span.info::before {
    content: "\E821";
}
.searchLabels > .label[data-value="def"]::before,
div.searchFacets > fieldset.facet > label span.def::before {
    content: "\E81F";
}
.searchLabels > .label[data-value="example"]::before,
div.searchFacets > fieldset.facet > label span.example::before {
    content: "\E820";
}
.searchLabels > .label[data-value="remark"]::before,
div.searchFacets > fieldset.facet > label span.remark::before {
    content: "\E824";
}
.searchLabels > .label[data-value="advice"]::before,
div.searchFacets > fieldset.facet > label span.advice::before {
    content: "\E81C";
}
.searchLabels > .label[data-value="warning"]::before,
div.searchFacets > fieldset.facet > label span.warning::before {
    content: "\E81A";
}
.searchLabels > .label[data-value="complement"]::before,
div.searchFacets > fieldset.facet > label span.complement::before {
    content: "\E81E";
}
.searchLabels > .label[data-value="method"]::before,
div.searchFacets > fieldset.facet > label span.method::before {
    content: "\E823";
}
.searchLabels > .label[data-value="remind"]::before,
div.searchFacets > fieldset.facet > label span.remind::before {
    content: "\E825";
}
.searchLabels > .label[data-value="basic"]::before,
div.searchFacets > fieldset.facet > label span.basic::before {
    content: "\E81D";
}
.searchLabels > .label[data-value="syntax"]::before,
div.searchFacets > fieldset.facet > label span.syntax::before {
    content: "\E827";
}
.searchLabels > .label[data-value="legal"]::before,
div.searchFacets > fieldset.facet > label span.legal::before {
    content: "\E822";
}
.searchLabels > .label[data-value="simulation"]::before,
div.searchFacets > fieldset.facet > label span.simulation::before {
    content: "\E826";
}

.searchLabels > .label[data-value="assmntUa"]::before,
div.searchFacets > fieldset.facet > label span.assmntUa::before {
    content: "\E828";
}
.searchLabels > .label[data-value="conclu"]::before,
div.searchFacets > fieldset.facet > label span.conclu::before {
    content: "\E829";
}
.searchLabels > .label[data-value="coQuiz"]::before,
div.searchFacets > fieldset.facet > label span.coQuiz::before {
    content: "\E82A";
}
.searchLabels > .label[data-value="courseUa"]::before,
div.searchFacets > fieldset.facet > label span.courseUa::before {
    content: "\E82B";
}
.searchLabels > .label[data-value="expUc"]::before,
div.searchFacets > fieldset.facet > label span.expUc::before {
    content: "\E831";
}
.searchLabels > .label[data-value="intro"]::before,
div.searchFacets > fieldset.facet > label span.intro::before {
    content: "\E82C";
}
.searchLabels > .label[data-value="obj"]::before,
div.searchFacets > fieldset.facet > label span.obj::before {
    content: "\E82D";
}
.searchLabels > .label[data-value="practUc"]::before,
div.searchFacets > fieldset.facet > label span.practUc::before {
    content: "\E82E";
}
.searchLabels > .label[data-value="quest"]::before,
div.searchFacets > fieldset.facet > label span.quest::before,
.searchLabels > .label[data-value="numerical"]::before,
div.searchFacets > fieldset.facet > label span.numerical::before,
.searchLabels > .label[data-value="mcgSur"]::before,
div.searchFacets > fieldset.facet > label span.mcgSur::before,
.searchLabels > .label[data-value="mcqSur"]::before,
div.searchFacets > fieldset.facet > label span.mcqSur::before,
.searchLabels > .label[data-value="mcqMur"]::before,
div.searchFacets > fieldset.facet > label span.mcqMur::before,
.searchLabels > .label[data-value="mcgMur"]::before,
div.searchFacets > fieldset.facet > label span.mcgMur::before,
.searchLabels > .label[data-value="match"]::before,
div.searchFacets > fieldset.facet > label span.match::before,
.searchLabels > .label[data-value="field"]::before,
div.searchFacets > fieldset.facet > label span.field::before {
    content: "\E82F";
}
.searchLabels > .label[data-value="quiz"]::before,
div.searchFacets > fieldset.facet > label span.quiz::before {
    content: "\E82B";
}
.searchLabels > .label[data-value="ref"]::before,
div.searchFacets > fieldset.facet > label span.ref::before {
    content: "\E830";
}
.searchLabels > .label[data-value="ueDiv"]::before,
div.searchFacets > fieldset.facet > label span.ueDiv::before {
    content: "\E831";
}
.searchLabels > .label[data-value="unknown"]::before,
div.searchFacets > fieldset.facet > label span.unknown::before {
    content: "\E832";
}

.mainSupport,
.monosupport {
    grid-area: support;
	display: flex;
	gap: 4px;
	align-self: center;
    font-size: var(--secondaryText-font-size);
    color: var(--search-link-color);
}

.restools .otherLnks {
	grid-area: otherLnks;
}

.searchResults .result .metas {
    grid-area: metas;
	font-size: 90%;
	display: flex;
	align-items: center;
	gap: 0.5em;
}

.result .metas .type,
.resourceList .metas .type,
.dyn-widget[data-type="resources"] > * > a .metas .type {
	background: var(--session-bgcolor);
	color: var(--session-color);
	padding: 0.2em 0.5em;
	border-radius: 5em;
}
/*.result .metas .lastModif,
.resourceList .metas .lastModif,
.dyn-widget[data-type="resources"] > * > a .metas .lastModif {
	color: var(--search-second-color);
	font-weight: 300;
	font-style: italic;
}*/
.metas .lastModif,
.type.other {
    position: absolute;
    left: -9999px;
}
.searchResults .result p.highlight {
	grid-area: highlight;
	margin-block: 0.4em 0;
	font-size: calc(0.85 * var(--p-font-size));
}
.searchResults .result .highlight > .sep {
	margin-inline-end: 0.2em;
}
.searchResults .result .highlight > .body {
	margin-inline-end: 0.4em;
}
.otherLnks {
	display: flex;
	gap: 5px;
	justify-content: flex-end;
}
.otherLnk{
	padding: 2px 4px;
	border: 1px solid var(--search-bdcolor);
	text-decoration: none;
	background: var(--tile-bgcolor);
	font-size: var(--secondaryText-font-size);
	color: var(--search-link-color);
	display: flex;
	align-items: center;
	height: fit-content;
}
.otherLnk:hover{
	color: var(--search-hover-color);
	border-color: var(--search-hover-color);
	background: var(--tile-hover-bgcolor);
}
.otherLnk.diapo:before, .otherLnk.print:before{
	content: "";
	display: inline-block;
	width: var(--secondaryText-font-size);
	height: var(--secondaryText-font-size);
	margin-right: .2rem;
	background-size: contain!important;
}
.otherLnk.web:before {
    background: url(img/web.svg) center no-repeat;
}
.otherLnk.diapo:before {
	background: url(img/slide.svg) center no-repeat;
}
.otherLnk.print:before {
	background: url(img/pdf.svg) center no-repeat;
}
.otherLnk.diapo:hover:before, .otherLnk.print:hover:before{
	opacity: 0.85;
}
.loadMore{
	margin-top: 1rem;
	width: 100%;
	display: flex;
	justify-content: center;
	order: 5;
}
.loadMore > span{
	font-style: italic;
	font-size: var(--secondaryText-font-size);
	color: color-mix (in oklab, var(--text-color), transparent 60%);
}
.loadMore:has(button) > span {
    display: none;
}
.loadMore > button{
	padding: 0.5rem;
	border: 2px solid var(--search-bdcolor);
	text-decoration: none;
	background: var(--tile-bgcolor);
	font-size: var(--secondaryText-font-size);
	color: var(--search-link-color);
	cursor: pointer;
}
.loadMore > button:hover{
	color: var(--search-hover-color);
	border-color: var(--search-hover-color);
}
/* FORMS */
body.form div#content{
	background-color: var(--form-bgcolor);
	border-radius: .5rem;
	max-width: 45rem;
	margin: 2rem auto;
	padding: 1.5rem;
}
fieldset.userDialog{
	border: none;
	font-family: var(--text-font-family), sans-serif;
	padding: 0;
	margin: 0;
}
fieldset.userDialog legend{
	padding-inline-start: 0;
	padding-inline-end: 0;
	float: left;
	margin-bottom: 1rem;
	width: 100%;
	font-size: 1.8em;
	font-family: var(--title-font-family), sans-serif;
}
fieldset.userDialog > div{
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
	margin: 0.6rem 0;
	font-family: var(--text-font-family), sans-serif;
}
fieldset.userDialog > div:last-child{
	flex-direction: row;
	justify-content: space-between;
}
fieldset.userDialog > div[hidden="true"]{
	display:none;
}
fieldset.userDialog > div > label{
	font-size: var(--secondaryText-font-size);
	color: var(--form-label-color);
}
fieldset.userDialog > div > input{
	padding: 0.6rem;
	border-radius: 0.4rem;
	border: 1px solid var(--form-bdcolor);
	margin: 0.3rem 0;
	font-size: var(--p-font-size);
}

fieldset.userDialog > div > input.invalid{
	border-color: red;
}
fieldset.userDialog button.btnAuth, .modal button, dialog .tools button{
	background-color: var(--form-link-color);
	color: #ffffff;
	border: none;
	width: fit-content;
	padding: 0.6rem .8rem;
	font-size: var(--p-font-size);
	border-radius: 0.4rem;
	font-family: var(--text-font-family), sans-serif;
}
dialog.alert .tools {
    display: flex;
    gap: 1rem;
    padding-inline: 1rem;
    padding-block-end: 1.5rem;
}
dialog.alert .tools a {
    text-decoration: none;
}
dialog.alert .tools a:hover {
    opacity: 0.7;
}
dialog.alert .tools button.close {
    display: none;
}
fieldset.userDialog button.btnAuth:hover, .modal button:hover, .tools button:hover{
	cursor: pointer;
	background-color: var(--form-link-hover-color);
}
fieldset.userDialog a.btnAuth{
	color: var(--form-link-color);
	text-decoration: none;
	font-size: var(--secondaryText-font-size);
	display: flex;
	align-items: center;
	margin-left: 1rem;
}
fieldset.userDialog a.btnAuth:hover{
	color: var(--form-link-hover-color);
}
#authMsg{
	font-weight: 900;
	margin-top: 1rem;
}
.modalbg{
	position: absolute;
	top: 0px;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999;
	background-color: #00000070;
}
.modal{
	background-color: var(--form-bgcolor);
	border-radius: .5rem;
	padding: 1.5rem;
	max-width: 40rem;
	margin: 0 auto;
	font-family: var(--text-font-family), sans-serif;
	font-size: var(--p-font-size);
}
.modal .tools{
	margin-top: 1rem;
}
.modal button{
	margin: .5rem;
}
.modal .head{
	text-align: right;
}
.modal .head > button.close{
	background-color: transparent;
	color: inherit;
	padding: 0;
	border-radius: 0;
	font-family: var(--text-font-family), sans-serif;
}
.modal .head > button.close span{
	display: none;
}
.modal .head > button.close:before{
    font-family: "homeFontello";
	content: "\E804";
	display: inline-block;
}

/** START - DIALOG MODAL ============================= **/
dialog.alert[open],
dialog.confirm,
dialog.preview {
	border:0;
	box-shadow: 0px 5px 6px -2px rgb(0 0 0 / 10%);
	border-radius: 0.8rem;
	width: -moz-available;
	width: -webkit-fill-available;
	width: fill-available;
	max-width: 30rem;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
dialog.alert {
    padding: 0;
}
dialog.confirm {
	padding: 0;
}
dialog.preview {
	max-width: 90vw;
	height: 100%;
	justify-content: flex-start;
}
dialog.preview .content,
dialog.preview .content > iframe {
	width: -moz-available;
	width: -webkit-fill-available;
	width: fill-available;
	height: 100%;
	border: 1px solid var(--header-bdcolor);
}
dialog.preview .content {
	align-items: center;
}
dialog.preview .head {
	display: flex;
	gap: 0.5em;
	justify-content: space-between;
	margin-block-end: 0.5em;
}
dialog.preview .tools {
    display: none;
	/*display: flex;
	gap: 0.5em;
	justify-content: center;
	margin-block-start: 0.5em;*/
}

dialog.preview p.openNewTab {
    display: contents;
}
dialog.preview a.openNewTab {
    position: absolute;
    right: 70px;
    top: 28px;
    text-decoration: none;
}
dialog.preview a.openNewTab:hover {
    opacity: 0.7;
}
dialog.preview a.openNewTab::before {
    font-family: "homeFontello";
    content: "\E811";
    display: inline-block;
}
dialog.preview a.openNewTab span {
    position: absolute;
    left: -9999px;
}

dialog .head {
	border-block-end: 1px solid var(--header-bdcolor);
	padding-block: 0.5em;
	padding-inline: 0.5em;
}
.head button.escape{
	float:right;
	background: transparent;
	border: 1px solid var(--header-bdcolor);
	border-radius: 50em;
	width: 2.5em;
	height: 2.5em;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor:pointer;
}
.head button.escape:before{
	font-family: "homeFontello";
    content: "\E804";
    display: inline-block;
}
.head button.escape:hover {
	opacity: 0.7;
}
.head button.escape span{
	display:none;
}

.preview .metas {
	display: flex;
	gap: 0.5em;
	align-items: baseline;
	flex: 1;
}

.preview .metas .type {
	background: var(--session-bgcolor);
	color: var(--session-color);
	padding: 0.2em 0.5em;
	border-radius: 5em;
}

.preview .metas .title {
    flex: 1;
    padding-inline-end: 2em;
}

.preview .content > audio {
	align-self: center;
}
dialog.alert .content {
    display: block;
	margin: 0;
	padding-inline: 1rem;
	padding-block: 1rem;
	color: var(--p-color);
}
dialog.confirm .content {
	font-size:1em;
	padding-inline: 1em;
	padding-block: 1em;
}
dialog.confirm .content p{
	margin:0;
}
dialog.confirm .content p.warning {
	font-family:var(--title-font-family);
	font-size: 120%;
	color:var(--title-color);
	line-height: 1.4;
}
dialog.confirm .content p.warning.school:before {
    font-family: "homeFontello";
	content: "\E81A";
	display: inline-block;
}
dialog.confirm .content p.warning.school {
	font-size: var(--secondaryText-font-size);
	font-family: var(--text-font-family);
	font-weight: 900;
	border: 2px solid var(--error-color);
	border-radius: 0.5em;
	padding-inline: 0.5em;
	padding-block: 0.5em;
	margin-block: 0.5em;
}
dialog.confirm .content p.instruction {
	margin-block-end: 0.5em;
}
dialog.confirm .content p.sentence{
	font-weight: 900;
	font-size:0.9em;
	margin-bottom: 0.2rem;
}
dialog.confirm input{
	padding: 0.6rem;
	border-radius: 0.4rem;
	border: 1px solid var(--form-bdcolor);
	margin: 0.3rem 0;
	font-size: var(--p-font-size);
}
dialog.confirm input.deleteTest {
	margin-block-end: 0.5em;
}
dialog.confirm .tools{
	display:flex;
	justify-content: flex-end;
	border-block-start: 1px solid var(--header-bdcolor);
	padding: 0.5em;
}
dialog.confirm #deleteConfirm{
	background-color:var(--error-color);
}
dialog.confirm #deleteConfirm:hover{
	background-color:var(--form-link-hover-color);
}
dialog.confirm #deleteConfirm:disabled{
	filter: opacity(0.3);
}
dialog.confirm #deleteConfirm:hover:disabled{
	background-color:var(--error-color);
}
dialog.confirm button.cancel{
	background-color:transparent;
	color:var(--form-link-color);
}
dialog.confirm button.cancel:hover{
	color:var(--form-link-hover-color);
}

dialog:-internal-dialog-in-top-layer::backdrop {
	background: rgba(0, 0, 0, 0.6);
}

/** STOP - DIALOG MODAL ============================= **/

/* START tiles ============================================== */
/* STOP  tiles ============================================== */
.libraryList > .block_co{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.6rem;
	margin: 1rem 0;
}
article.tile{
	background-color: var(--tile-bgcolor);
	border-radius: 0.5em;
	border: 1px solid var(--tile-bdcolor);
	padding: 0.5rem;
}
article.tile:hover{
	background-color: var(--tile-hover-bgcolor);
}
article.tile a.tileLink {
	text-decoration: none;
	color: var(--p-color);
}
article.tile a.tileLink img{
	vertical-align: middle;
}
article.tile a.tileLink .tileLnkLbl {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
article.tile .tileTitle {
	margin: 0 0 0.2rem;
}
/* START about ============================================== */
body.page #main{
	display: flex;
	flex-direction: column-reverse;
}
body.page #content {
	width: -moz-available;
	width: -webkit-fill-available;
	width: fill-available;
	padding-block: 2em 5em;
}
body.page #content h3 {
    font-size: 1.3em;
}
body.page #main > nav ul{
	list-style: none;
	display: flex;
	justify-content:center;
}
body.page #main > nav li{
	margin: 0 0.5rem;
}
body.page #main > nav li > *{
	text-decoration: none;
	background-color: var(--tile-bgcolor);
	color: var(--title-color);
	padding: 0.5rem;
	border-radius: 0.5rem;
}
body.page #main > nav li > span{
	background-color: var(--tile-select-bgcolor);
	color: var(--tile-bgcolor);
}
body.page #main > nav li > a:hover{
	background-color: var(--tile-hover-bgcolor);
}
/* STOP  about ============================================== */

/* START 404, AUTH PAGE ============================================== */
body.notfound #main > nav,
body.authpage #main > nav {
	display: none;
}

body.notfound #content,
body.authpage #content {
	max-width: 65rem;
	margin: 0 auto;
	padding-block: 2em;
	padding-inline: 1em;
}

body.notfound .lnks,
body.authpage .lnks {
	display: flex;
	flex-wrap: wrap;
	column-gap: 30px;
	row-gap: 6px;
}

body.notfound #content a,
body.authpage #content a {
	color: var(--link-color);
	text-decoration: none;
}
body.notfound a:hover,
body.authpage a:hover {
	opacity: 0.7;
}

/* STOP 404, AUTH PAGE ============================================== */

/* START - ACCOUNT ========================================== */
body.account #main > nav {
    display: none;
}
#profile div.content, #profile div.data{
	background-color:var(--tile-bgcolor);
	border-radius: 0.5rem;
	padding: 1.5rem;
	margin-bottom:1rem;
	display: block;
}
#profile div.content .field{
	margin-bottom:1rem;
	display:grid;
	grid-template-columns: 1fr 6fr;
	align-items: baseline;
}
#profile p{
	margin:0;
}
#profile .controls {
    margin-block-start: 1em;
    display: flex;
    gap: 1em;
}
#profile button {
	border: none;
	color:var(--link-color);
	padding: 0;
	font-size: inherit;
	background: transparent;
	cursor: pointer;
	display: flex;
	gap: 3px;
	align-items: baseline;
}
#profile button:first-child{
	margin-left:0;
}
#profile button.deleteAccount{
	color:var(--error-color);
}
#profile button:hover, #profile button.deleteAccount:hover{
	color:var(--link-hover-color);
}
#profile button.btnAuth.editPassword,
#profile button.btnAuth.editProfile {
	background: var(--link-color);
	color: #ffffff;
	padding: 0.7rem;
}
#profile button.btnAuth.editPassword:hover, #profile button.btnAuth.editProfile:hover{
	opacity: 0.7;
}
#profile button.edit:before,
#profile button.download:before,
#profile button.deleteAccount:before {
    font-family: "homeFontello";
	display: inline-block;
}
#profile button.edit:before {content: "\E80A";}
#profile button.download:before {content: "\E808";}
#profile button.deleteAccount:before {content: "\E806";}

#profile .field span.sep{
	display:none;
}
#profile .field label{
	font-size: var(--secondaryText-font-size);
	color: var(--form-label-color);
}

/* STOP - ACCOUNT =========================================== */

/* START - FORBIDDEN PAGE =========================================== */
.forbidden #content {
	max-width: 65rem;
	margin: 0 auto;
	padding: 4rem 1rem;
	text-align: center;
}

.forbidden .lnks {
	display: flex;
	gap: 1em;
	justify-content: center;
}

.forbidden .lnks a {
	text-decoration: none;
	color: var(--header-link-color);
	display: flex;
	align-items: center;
}

/* STOP - FORBIDDEN PAGE =========================================== */

/* START scImg ============================================== */
.scImgZmCvs{
	position: fixed;
	z-index: 1000;
	width:inherit;
	height:inherit;
	top:0;
	left:0;
	bottom:0;
	right:0;
}
.scImgZmOver{
	background-color: #DDD;
	opacity: 0.4;
	position:fixed;
	width:100%;
	height:100%;
}
.scImgZmFra{
	background-color: white;
	padding:10px;
	box-shadow:  0 0 20px 0 #999;
}
.scImgZmMag{
	border-radius: 5px;
	box-shadow:  0 0 10px 0 #555;
}
a.scImgZmBtnCls{
	background-color: transparent;
	color: inherit;
	padding: 0;
	border-radius: 0;
	font-family: var(--text-font-family), sans-serif;
}
a.scImgZmBtnCls span{
	display: none;
}
a.scImgZmBtnCls:before{
    font-family: "homeFontello";
	content: "\E804";
	display: inline-block;
}

/* END scImg ================================================ */
/* Responsive =============================================== */
@media(max-width:768px) {
	.visavis{
		flex-direction: column;
	}
	.visavis > .first{
		padding-right: initial;
		border-right: 0;
	}
	.visavis > .next{
		padding-left:initial;
	}
	.welcome > .section,
	.welcomeCnx > .section {
		padding: 1em;
		margin: 0;
	}
	a.course {
		grid-template:
            [cover-left] "cover label" 0fr [label-right]
            [head-left] "head head" 0fr [head-right]
            [tagline-left] "tagline tagline" 0fr [tagline-right]
            [keywords-left] "keywords keywords" 0fr [keywords-right]
            [content-left] "content content" 0fr [content-right]
            [progs-left] "progs progs" 0fr [progs-right]
            [sessions-left] "sessions sessions" 0fr [sessions-right]
            / 0fr 1fr;
	}
	#panel-resources #resources .searchResults .result > a.docRootLink,
	#panel-resources .searchResults .result > a.docRootLink,
	.resourceList .dyn-widget > * > a,
	.dyn-widget[data-type="resources"] > * > a {
        grid-template: [head-left] "head head support" 0fr [support-right]
            [metas-left] "metas metas metas" 0fr [metas-right]
            [keywords-left] "keywords keywords keywords" 0fr [keywords-right]
            [pages-left] "pages pages pages" 0fr [pages-right]
            [highlight-left] "highlight highlight highlight" 0fr [highlight-right]
            [support-left] "otherLnks otherLnks otherLnks" 0fr [otherLnks-right]
                / auto 1fr auto;
	}
	div.cover {
		margin-inline: 0;
		margin-block-end: 0.5em;
	}
	body.sessions {
		border: 0;
		margin: 0;
		padding: 0;
	}
	.sessions:empty {
		border: none;
	}
	.searchBar{
		margin: 0.5em 0;
		width: auto;
	}
	#panel-courses > h2, #panel-resources > h2 {
		margin: 0;
		padding: 0;
	}
}
@media(max-width:600px){
	body.form div#content{
		max-width:none;
	}
	.dyn-widget{
		grid-template-columns: 1fr;
	}
	.searchBody {
		display: flex;
		flex-direction: column-reverse;
	}
	.searchColumn.side {
	    margin-block-start: 2em;
	}
	.facet.keywords{
		flex-direction: revert;
	}
	.facet.keywords > label{
		background-color: var(--tile-bgcolor);
		padding: 0.5rem;
		margin: 0.2rem;
	}
	.facet.keywords > select{
		padding: 0.5rem;
		margin: 0.2rem;
	}
	.aggCount{
		margin-left:0.3rem;
	}
	body.home #main > #panel-home header > h2 {
        margin: 0;
    }
    .libraryList > .block_co {
        grid-template-columns: repeat(1, 1fr);
    }
}