@font-face {
	font-family: "flanders-sans";
	src: url("fonts/sans/FlandersArtSans-Regular.woff2") format("woff2"), url("fonts/sans/FlandersArtSans-Regular.woff") format("woff");
	font-style: normal;
	font-weight: 400;
	font-display: swap;
}

@font-face {
	font-family: "flanders-sans";
	src: url("fonts/sans/FlandersArtSans-Medium.woff2") format("woff2"), url("fonts/sans/FlandersArtSans-Medium.woff") format("woff");
	font-style: normal;
	font-weight: 700;
	font-display: swap;
}

html, body {
	height: 100%;
}

body {
    font-family: 'flanders-sans', sans-serif;
    font-size: 18px;
    line-height: 1.45em;
}
@media (max-width: 991px) {
	body {
		font-size: 16px;
	}
}

/* --- NAVBAR --- */
#navbarMain a {
	font-size: 1.2em;
}
#navbarMain #logo svg {
	width: 100%;
	max-height: 50px;
}
#navbarMain #logo svg .st1 {
	fill: #FFFFFF;
}

/* --- NAV START --- */
#navStart {
	font-size: 1.3em;
	border-radius: 4px;
}
#navStart a > span.fa-layers {
	vertical-align: middle;
}
#navStart li:not(:last-child) {
	border-bottom: 1px solid rgba(255,255,255,0.7);
}
#navStart li a {
	border-radius: 0;
}
#navStart li:first-child a {
	border-radius: 4px 4px 0 0;
}
#navStart li:last-child a {
	border-radius: 0 0 4px 4px;
}

/* --- FOOTER --- */
#footer {
	color: rgba(255,255,255,0.7);
}

#styleswitch {
	display: inline-block;
	padding: 8px;
	background-color: rgba(255,255,255,0.8);
	border-radius: 4px;
}
#styleswitch a {
	display: inline-block;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 4px solid transparent;
	vertical-align: top;
}
#styleswitch a:hover, #footer #styleswitch a:focus {
	border-color: #fdbc5a;
}
#styleswitch a.blauw {
	background-color: #3b6cd0;
}
#styleswitch a.bordeaux {
	background-color: #660000;
}
#styleswitch a.grijs {
	background-color: #333;
}
#styleswitch a.groen {
	background-color: #006666;
}
#styleswitch a.paars {
	background-color: #660066;
}

#pictoswitch {
	display: inline-block;
	vertical-align: top;
}
#pictoswitch a {
	border-width: 4px;
	border-style: solid;
	display: inline-block;
	border-radius: 4px;
	opacity: 0.8;
}
#pictoswitch a.beta {
	border-color: #FFF;
}
#pictoswitch a.sclera {
	border-color: #000;
}
#pictoswitch a:hover, #pictoswitch a:focus  {
	border-color: #fdbc5a;
	opacity: 1;
}

/* --- HEADER TITLES --- */
h1 {
	font-weight: bold;
	margin-bottom: 1rem;
}
h2 {
	font-weight: bold;
	margin-top: 1rem;
}
h3 {
	margin-top: 1rem;
}
h4 {
	font-size: 1.4rem;
}

@media (max-width: 576px) {
	h1 {
		font-size: 2rem;
	}
	h2 {
		font-size: 1.7rem;
	}
	h3 {
		font-size: 1.4rem;
	}
	h4 {
		font-size: 1.2rem;
	}
}

/* --- LINKS / LINK BUTTONS --- */
a {
	color: #006fe6;
	border-radius: 4px;
	text-decoration: none;
}
a:hover, a:focus {
	background-color: #fdbc5a;
	color: #333;
}
.abtn {
	border-radius: 4px;
	background: none;
	border: none;
	color: #006fe6;
}
.abtn.grey {
	color: #6c757d;
}
.abtn:enabled:hover, .abtn:enabled:focus {
	background-color: #fdbc5a;
	color: #333;
}

/* --- CONTENT --- */
#content h1 {
	padding-bottom: 8px;
	border-bottom: 1px solid #D2DEFF;
}
#content h1 img {
	height: 60px;
	border-radius: 4px;
}

/* --- LINK BOX --- */
.box {
	border-radius: 4px;
	box-shadow: 0 1px 3px #444;
	background-color: #FAFAFA;
}
.box img {
	border-radius: 4px;
}
.box > a:first-child {
	padding: 8px;
	display: block;
	font-size: 1.3em;
	color: #333;
	text-align: center;
	font-weight: bold;
}
.box > a.item:first-child {
	font-size: 1.2em;
}
.box > a:first-child img {
	margin-bottom: 4px;
	height: 200px;
	object-fit: cover;
}
.box.box-sm > a:first-child img {
	height: 150px;
}
.box > a:first-child > svg, .box a:first-child > span.fa-layers {
	margin-bottom: 4px;
}

.alfabox {
	display: block;
	border-radius: 4px;
	text-align: center;
	font-size: 2em;
	padding: 2px;
	color: #333;
	line-height: 1;
	border: 2px solid #333;
}
.alfabox img {
	margin-top: 8px;
}
@media (max-width: 576px) {
	.alfabox {
		font-size: 1.2em;
		padding: 3px;
	}
	.alfabox img {
		margin-top: 4px;
	}
}

/* --- MAIN BACKGROUND -- */
.bg-main {
	background-color: #3b6cd0;
}
.bg-main a {
	color: #FFF;
}
.bg-main a:hover, .bg-main a:focus, .bg-main a:active {
	color: #333;
}
.btn-main {
	background-color: #3b6cd0;
	color: #FFF;
	font-size: 1.1em;
}
.btn-main.grey {
	background-color: #555;
}
.btn-main.red {
	background-color: #990000;
}
.btn-main:enabled:hover, .btn-main:enabled:active, .btn-main:enabled:focus {
	background-color: #fdbc5a;
	color: #000;
}

.btn-sub {
	background-color: #CCC;
	color: #000;
	font-size: 1.1em;
	border-color: #777;
}
.btn-sub:enabled:hover, .btn-sub:enabled:active, .btn-sub:enabled:focus {
	background-color: #fdbc5a;
}

/* --- PICTOS --- */
.pictos > div {
	min-width: 72px;
	height: 72px;
	display: inline-block;
	vertical-align: top;
	margin-bottom: 6px;
	text-align: center;
	border: 1px solid #ccc;
}
.pictos.pictos-sm > div {
	min-width: 52px;
	height: 52px;
}
.pictos > div:not(:last-child) {
	margin-right: 6px;
}
.pictos img {
	max-width: 100%;
	max-height: 100%;
	border-radius: 0;
}
.pictos .textpicto {
	display: inline-block;
	border: 1px solid #ccc;
	min-width: 72px;
	padding: 0 2px;
	height: 72px;
	line-height: 70px;
	text-align: center;
}
.pictos.pictos-sm .textpicto {
	min-width: 52px;
	height: 52px;
	line-height: 50px;
}

/* --- ACTION BAR --- */
.actionbar {
	background-color: #EEE;
	display: inline-block;
	border-radius: 4px;
	padding: 4px;
}
.actionbar > a, .actionbar > span {
	font-size: 2.2em;
}
.actionbar .fa-layers-text {
	text-shadow: 0 0 1px #000;
}
.actionbar .vbar {
	background-color: #CCC;
	display: inline-block;
	width: 1px;
	height: 43px;
	vertical-align: top;
}

/* --- HELP CLASSESS --- */
.font-size-init {
	font-size: initial;
}
.font-size-sm {
	font-size: 0.9em;
}
.font-size-lg {
	font-size: 1.1em;
}
.font-size-xl {
	font-size: 1.2em;
}
.hidden {
	display: none;
}
.c-pointer {
	cursor: pointer;
}
.clear-both {
	clear: both;
}
.bordered {
	border-width: 1px;
	border-style: solid;
}
.bg-yellow {
	background-color: #ffffcc;
}
.bg-grey {
	background-color: #EEE;
}
.img-cover {
	object-fit: cover;
}
.img-contain {
	object-fit: contain;
}

a.check_link {
	border: 1px solid #dee2e6;
}
a.check_link.checked {
	font-weight: bold;
	background-color: #fdbc5a;
	border-color: #333;
}

img.user {
	max-height: 60px;
	max-width: 60px;
	border-radius: 4px;
}
img.user_sm {
	max-height: 40px;
	max-width: 40px;
	border-radius: 4px;
}

/* --- TABLES --- */
table tr.highlight td:not(:last-child) {
	background-color: #fdbc5a;
}
table tr.new {
	font-weight: bold;
}

/* --- AGENDA --- */
#tblAgenda {
	table-layout: fixed;
}
#tblAgenda td {
	height: 60px;
	vertical-align: middle;
}
#tblAgenda td:nth-child(6), #tblAgenda td:nth-child(7) {
	background-color: #F8F8F8;
}
#tblAgenda td.day:hover {
	background-color: #fdbc5a;
	cursor: pointer;
}
#tblAgenda img {
	max-width: 100%;
	max-height: 50px;
}

table.agendaday td:first-child {
	max-width: 150px;
}
table.agendaday td.hour {
	min-width: 50%;
}
table.agendaday td.img {
	max-height: 70px;
	max-width: 70px;
}

table.agendaday td.hour svg {
	opacity: 0.15;
}
table.agendaday td.hour:hover {
	background-color: #fdbc5a;
	cursor: pointer;
}
table.agendaday td.hour:hover svg {
	opacity: 1;
}

/* --- PICTO TABLE --- */
.pictotable a {
	display: block;
}
.pictotable img {
	border: 2px solid #DEDEDE;
	max-width: 100%;
	max-height: 70px;
}
.pictotable td {
	padding: 2px;
	text-align: center;
}
.pictotable td.cat img {
	border-color: #FF9900;
}
.pictotable td.cat2 img {
	border-color: #00BFFF;
}
.pictotable td.photo img {
	border-color: #FF0000;
}

.pictonav a {
	border: 2px solid #DEDEDE;
	display: inline-block;
	border-radius: 0;
}
.pictonav a.cat {
	border-color: #FF9900;
}
.pictonav a.cat2 {
	border-color: #00BFFF;
}

/* --- EMOJI REACTIONS --- */
.divReaction {
	border-width: 1px;
	border-style: solid;
	border-color: #BBB;
	display: inline-block;
	text-align: center;
}
.divReaction .abtn {
	border-radius: 4px 4px 0 0;
	min-width: 80px;
}
.divReaction .abtn .react_icon {
	font-size: 2.6em;
	line-height: 64px;
}
.divReaction.selected {
	font-weight: bold;
	border-color: #333;
}
.divReaction.selected .abtn {
	font-weight: bold;
	background-color: #fdbc5a;
}
.divReaction.selected .abtn .react_icon, .divReaction .abtn:hover .react_icon, .divReaction .abtn:focus .react_icon {
	font-size: 3em;
}
.divReaction-sm {
	display: inline-block;
	text-align: center;
}
/* mouse, touch pad */
@media (hover: hover) and (pointer: fine) {
	.divReaction-sm.faded {
		opacity: 0.1;
	}
	.message:hover .divReaction-sm.faded, .message:focus-within .divReaction-sm.faded {
		opacity: 1;
	}
}
.divReaction-sm .abtn, .divReaction-sm a {
	line-height: 1;
	color: #000;
}
.divReaction-sm .react_icon {
	font-size: 1.5em;
	line-height: 1.2;
}
.divReaction-sm .react_counter {
	font-size: 0.9em;
	line-height: 1;
}
.divReaction-sm.selected {
	opacity: 1;
}
.divReaction-sm.selected .abtn  {
	font-weight: bold;
	background-color: #fdbc5a;
}

#btnFav {
	background: none;
	border-radius: 4px;
	border: none;
}
#btnFav.active {
	color: #ea0000;
}
#btnFav:hover {
	background-color: #fdbc5a;
}

/* --- CHECK DIV (sorrybox) --- */
.check-div {
	border: 2px solid #CCC;
	border-radius: 4px;
}
.check-div:hover {
	border-color: hsl(36, 100%, 50%);
}
.check-div.checked {
	border-color: hsl(36, 100%, 50%);
	font-weight: bold;
	background-color: hsl(36, 98%, 87%);
}
.check-div label {
	margin: 0;
	cursor: pointer;
}

/* --- Text to speech --- */
button.tts {
	border-radius: .25rem 0 0 .25rem;
}
button.tts-pause {
	border-radius: 0 .25rem .25rem 0;
	border-left: 2px solid rgba(255,255,255,0.6);
}

/* --- PRINT --- */
@media print {
	html, body {
		height: auto;
	}

	#footer, .print-hidden {
		display: none !important;
	}
}