.notificationTiming
{
	margin-right: 5px;
}
#notificationsDiv
{
	overflow-x: hidden;
}
#notificationsDiv li
{
	width: 450px; 
	/* never wider than a phone's screen */
	max-width: calc(100vw - 20px);
	white-space: normal;
}
.notificationTiming
{
	font-size: 11px;
	color: var(--ui-muted);
}
.notificationBottom
{
	line-height: 18px;
}
.notificationRow
{
	padding: 4px 0px;
	border-top: 1px solid var(--ui-border-soft);
}
.menuWrapper ul li.menuNotificationRow.notSeen:hover
{
	background: var(--ui-accent-soft);
}
.notificationRow.notSeen, .menuWrapper ul li.menuNotificationRow.notSeen
{
	background: var(--ui-surface-muted);
}
.menuWrapper .sf-menu #notificationsDiv li
{
	white-space: normal;
}
#notificationsLoadingId img
{
	max-width: 100%;
	max-height: 100%;
}
.menuWrapper .notificationAvatar img
{
	padding-top: 5px;
}
.notificationAvatar img
{
	width: 100%;
	height: auto;
	max-width: none;
	max-height: none;
	padding-left: 5px;
}
.notificationAvatar
{
	width: 8%;
}
.notificationTextBody
{
	width: 100%;
}
.noAvatar.notificationBody 
{
	width: 100%;
}
.notificationBody 
{
	width: 92%;
	position: relative;
}
.notificationAvatar, .notificationBody
{
	display: inline-block;
	vertical-align: top;
}
.notificationTop .imageContainer
{
	max-width: none;
	max-height: none;
}
.notificationTop
{
	width: 100%;
}
.switchNotificationSeenStatus
{
	position: absolute;
	left: 8px;
	bottom: 0px;
	top: 0px;
	margin: auto;
	height: 50%;
	cursor: pointer;
}
.menuWrapper ul .menuNotificationRow, .notificationRow 
{
	line-height: 20px;
	float: none;
}
.menuWrapper ul .menuNotificationRow a
{
	padding: 4px 1em 4px;
	padding-left: 0.5em;
	display: block;
}
.notificationAvatar .userPanelBasePhoto img
{
	border: 0px;
}
.notificationAvatar .userPanelBasePhoto
{
	max-width: none;
	max-height: none;
}
/*
	The inbox (function_notifications(), notificationItemHTML()): the bell's panel and the notifications page.
	The panel is a dropdown of a theme's menu: the menus' rules (heights, line heights, floats, hover colours, nested
	lists taken for submenus) would reach everything in it, so the panel sets each of those itself (!important where a
	theme's menu rule is more specific). Colours from the --ui-* tokens only.
*/
#notificationsDiv.notificationsPanel
{
	width: 400px !important;
	max-width: calc(100vw - 20px) !important;
	padding: 0 !important;
	overflow: hidden !important;
	background: var(--ui-surface) !important;
	color: var(--ui-text) !important;
	border: 1px solid var(--ui-border) !important;
	border-radius: var(--ui-radius-lg) !important;
	box-shadow: var(--ui-shadow-lg) !important;
	text-align: start !important;
	font-size: 1rem !important;
	line-height: 1.45 !important;
}
#notificationsDiv.notificationsPanel, #notificationsDiv.notificationsPanel *
{
	box-sizing: border-box;
}
#notificationsDiv.notificationsPanel li,
#notificationsDiv.notificationsPanel a,
#notificationsDiv.notificationsPanel button,
#notificationsDiv.notificationsPanel span,
#notificationsDiv.notificationsPanel b,
#notificationsDiv.notificationsPanel time,
#notificationsDiv.notificationsPanel div
{
	float: none !important;
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	line-height: 1.45 !important;
	text-indent: 0 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	white-space: normal !important;
	text-shadow: none !important;
	text-align: start !important;
}
#notificationsDiv.notificationsPanel li
{
	display: block !important;
	position: static !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	list-style: none !important;
}
#notificationsDiv.notificationsPanel li::before, #notificationsDiv.notificationsPanel li::after,
#notificationsDiv.notificationsPanel a::before, #notificationsDiv.notificationsPanel a::after
{
	display: none !important;
}
/* the list of the items is no submenu: the menus' script that opens and closes them leaves it shown */
#notificationsDiv.notificationsPanel ul.notificationsItems
{
	display: block !important;
	position: static !important;
	visibility: visible !important;
	opacity: 1 !important;
	inset: auto !important;
	width: auto !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	box-shadow: none !important;
	background: none !important;
	transform: none !important;
}
#notificationsDiv.notificationsPanel li.notificationsPanelHead
{
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 12px 14px !important;
	border-bottom: 1px solid var(--ui-border-soft) !important;
}
#notificationsDiv.notificationsPanel .notificationsPanelHead b
{
	font-size: 1.15rem !important;
	color: var(--ui-text-strong) !important;
}
#notificationsDiv.notificationsPanel button
{
	width: auto !important;
	margin: 0 !important;
	font: inherit !important;
	font-size: .92rem !important;
	cursor: pointer;
	box-shadow: none !important;
}
#notificationsDiv.notificationsPanel .notificationsMarkAll
{
	padding: 2px 4px !important;
	border: 0 !important;
	background: none !important;
	color: var(--ui-accent) !important;
}
#notificationsDiv.notificationsPanel .notificationsMarkAll[disabled]
{
	color: var(--ui-placeholder) !important;
	cursor: default;
}
#notificationsDiv.notificationsPanel li.notificationsPanelTabs
{
	display: flex !important;
	gap: 6px;
	padding: 8px 14px !important;
	border-bottom: 1px solid var(--ui-border-soft) !important;
}
#notificationsDiv.notificationsPanel .notificationsTab
{
	padding: 4px 12px !important;
	border: 1px solid var(--ui-border) !important;
	border-radius: 999px !important;
	background: var(--ui-surface) !important;
	color: var(--ui-muted) !important;
}
#notificationsDiv.notificationsPanel .notificationsTab.isActive
{
	border-color: var(--ui-accent) !important;
	background: var(--ui-accent-soft) !important;
	color: var(--ui-accent) !important;
	font-weight: bold !important;
}
#notificationsDiv.notificationsPanel li.notificationsPanelItems
{
	max-height: min(460px, 65vh) !important;
	overflow-y: auto !important;
	overscroll-behavior: contain;
}
#notificationsDiv.notificationsPanel li.notificationsPanelFoot a
{
	display: block !important;
	padding: 10px 14px !important;
	border-top: 1px solid var(--ui-border-soft) !important;
	background: var(--ui-surface) !important;
	color: var(--ui-accent) !important;
	text-align: center !important;
	font-size: 1rem !important;
}
#notificationsDiv.notificationsPanel li.notificationsPanelFoot a:hover
{
	background: var(--ui-soft) !important;
}
#notificationsDiv.notificationsPanel .notificationsLoading, #notificationsDiv.notificationsPanel .notificationsEmpty
{
	padding: 18px 14px !important;
	color: var(--ui-muted) !important;
	text-align: center !important;
}

/* an item: the same in the panel and on the page */
.notificationsItems
{
	margin: 0;
	padding: 0;
	list-style: none;
}
#notificationsDiv.notificationsPanel li.notificationsItem, .notificationsPage li.notificationsItem
{
	position: relative !important;
	display: flex !important;
	align-items: flex-start;
	flex-wrap: wrap;
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--ui-border-soft) !important;
	background: var(--ui-surface) !important;
	list-style: none;
}
#notificationsDiv.notificationsPanel li.notificationsItem:last-child, .notificationsPage li.notificationsItem:last-child
{
	border-bottom: 0 !important;
}
#notificationsDiv.notificationsPanel li.notificationsItem.isUnread, .notificationsPage li.notificationsItem.isUnread
{
	background: var(--ui-accent-soft) !important;
}
#notificationsDiv.notificationsPanel a.notificationsItemLink, .notificationsPage a.notificationsItemLink
{
	flex: 1 1 0 !important;
	display: flex !important;
	align-items: flex-start;
	gap: 10px;
	min-width: 0;
	width: auto !important;
	margin: 0 !important;
	padding: 11px 14px !important;
	padding-inline-end: 40px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	color: var(--ui-text) !important;
	text-decoration: none !important;
	font-size: 1rem !important;
	font-weight: normal !important;
}
#notificationsDiv.notificationsPanel a.notificationsItemLink:hover, #notificationsDiv.notificationsPanel a.notificationsItemLink:focus-visible,
.notificationsPage a.notificationsItemLink:hover, .notificationsPage a.notificationsItemLink:focus-visible
{
	background: var(--ui-soft) !important;
	color: var(--ui-text) !important;
}
#notificationsDiv.notificationsPanel .notificationsItemIcon, .notificationsPage .notificationsItemIcon
{
	flex: 0 0 36px;
	width: 36px !important;
	height: 36px !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--ui-surface-muted) !important;
	color: var(--ui-accent) !important;
	font-size: 1.23rem !important;
	line-height: 1 !important;
	overflow: hidden;
}
.notificationsItemIcon img
{
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: cover;
	border-radius: 50%;
	padding: 0 !important;
	margin: 0 !important;
}
#notificationsDiv.notificationsPanel .notificationsItemBody, .notificationsPage .notificationsItemBody
{
	flex: 1 1 0;
	min-width: 0;
	display: flex !important;
	flex-direction: column;
	gap: 3px;
}
#notificationsDiv.notificationsPanel .notificationsItemText, .notificationsPage .notificationsItemText
{
	display: block !important;
	overflow-wrap: anywhere;
	color: var(--ui-text) !important;
}
.notificationsItem.isUnread .notificationsItemText
{
	font-weight: bold;
}
#notificationsDiv.notificationsPanel .notificationsItemTime, .notificationsPage .notificationsItemTime
{
	display: block !important;
	font-size: .85rem !important;
	color: var(--ui-muted) !important;
}
#notificationsDiv.notificationsPanel .notificationsItemDot, .notificationsPage .notificationsItemDot
{
	position: absolute !important;
	/* under the ⋮, where it stays when the actions open */
	inset-inline-end: 18px;
	top: 44px;
	width: 8px !important;
	height: 8px !important;
	padding: 0 !important;
	border-radius: 50%;
	background: var(--ui-accent) !important;
}
/* the item's ⋮ and the actions it shows under the item (inside it: the panel stays open) */
#notificationsDiv.notificationsPanel button.notificationsItemMenu, .notificationsPage button.notificationsItemMenu
{
	position: absolute !important;
	inset-inline-end: 8px;
	top: 9px;
	width: 28px !important;
	height: 28px !important;
	padding: 0 !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	border: 0 !important;
	border-radius: 50% !important;
	background: none !important;
	color: var(--ui-muted) !important;
	font-size: 1.08rem !important;
}
#notificationsDiv.notificationsPanel button.notificationsItemMenu:hover, #notificationsDiv.notificationsPanel button.notificationsItemMenu[aria-expanded="true"],
.notificationsPage button.notificationsItemMenu:hover, .notificationsPage button.notificationsItemMenu[aria-expanded="true"]
{
	background: var(--ui-border-soft) !important;
	color: var(--ui-text) !important;
}
#notificationsDiv.notificationsPanel .notificationsItemActions, .notificationsPage .notificationsItemActions
{
	flex: 0 0 100%;
	display: flex !important;
	flex-wrap: wrap;
	gap: 6px;
	padding: 0 14px 10px !important;
	padding-inline-start: 60px !important;
}
#notificationsDiv.notificationsPanel .notificationsItemActions[hidden], .notificationsPage .notificationsItemActions[hidden]
{
	display: none !important;
}
#notificationsDiv.notificationsPanel .notificationsItemActions button, .notificationsPage .notificationsItemActions button
{
	display: inline-flex !important;
	align-items: center;
	gap: 5px;
	padding: 4px 10px !important;
	border: 1px solid var(--ui-border) !important;
	border-radius: var(--ui-radius) !important;
	background: var(--ui-surface) !important;
	color: var(--ui-text) !important;
	font-size: .92rem !important;
	cursor: pointer;
}
#notificationsDiv.notificationsPanel .notificationsItemActions button:hover, .notificationsPage .notificationsItemActions button:hover
{
	background: var(--ui-soft) !important;
}
#notificationsDiv.notificationsPanel .notificationsItemActions button.isDanger, .notificationsPage .notificationsItemActions button.isDanger
{
	color: var(--ui-danger) !important;
}
.notificationsItemSelect
{
	display: flex;
	align-items: center;
	align-self: stretch;
	padding-inline-start: 12px;
}
/* a text for screen readers only */
.notificationsSrOnly
{
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
}

/* the page */
.notificationsPage [hidden]
{
	display: none !important;
}
.notificationsPageBar
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 14px;
}
/* the theme's buttons, at the size of a toolbar */
.notificationsPageBar .button
{
	float: none;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 6px 14px;
	font-size: .92rem;
	line-height: 1.4;
}
.notificationsSelectAllLabel
{
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-inline-start: auto;
}
.notificationsGroup
{
	margin-bottom: 16px;
}
.notificationsGroup h3
{
	margin: 0 0 6px;
	font-size: 1rem;
	color: var(--ui-muted);
}
.notificationsGroup .notificationsItems
{
	border: 1px solid var(--ui-border-soft);
	border-radius: var(--ui-radius-lg);
	overflow: hidden;
	background: var(--ui-surface);
}
.notificationsMoreRow
{
	text-align: center;
}
.notificationsConnectionsLink
{
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 1rem;
}
.notificationsConnections
{
	margin: 0 0 10px;
	padding: 0;
	list-style: none;
}
.notificationsConnections li
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 6px 0;
	border-bottom: 1px solid var(--ui-border-soft);
}
.notificationsConnections form
{
	margin-inline-start: auto;
}
/* "Browser notifications" of the connections page (scripts/addons/notifications_webpush.js) */
.notificationsWebPush [hidden]
{
	display: none !important;
}
.notificationsWebPushState
{
	margin: 0 0 8px;
}
.notificationsWebPush[data-state="on"] .notificationsWebPushState
{
	color: var(--ui-success);
}
.notificationsWebPush[data-state="denied"] .notificationsWebPushState, .notificationsWebPush[data-state="unsupported"] .notificationsWebPushState
{
	color: var(--ui-muted);
}

.articleView
{
	
}
.articleViewMedia
{
        margin-bottom: 15px;
}

.articleViewPhoto
{
	text-align: center;
	margin-bottom: 10px;
	border: 0px;
	background: none;
}
.photo_beside .articleViewMedia, .photo_beside_nfloat .articleViewMedia
{
	width: 50%;
	padding-bottom: 15px;
	margin-bottom: 0px;
}
.photo_beside_nfloat .articleViewMedia
{
	float: left;
	padding-right: 15px;
}
.photo_beside .articleViewMedia
{
	float: right;
	padding-left: 15px;
}

.articleViewPhoto img
{
	height: auto;
	max-width: 100%;
}
.articleViewPhoto .articleYoutubePrimary
{
        line-height: 0;
}
.articleViewPhoto .articleYoutubePrimary .videoContainer
{
        margin: 0 auto;
}
.articleViewMediaMeta
{
        display: flex;
        flex-wrap: wrap;
        align-items: top;
        justify-content: space-between;
        gap: 12px;
}
.articleViewMediaMetaGroup-details
{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 20px;
        font-size: 0.95rem;
        color: var(--ui-muted);
		align-items: center;
}
.articleViewMediaMetaGroup-social
{
        margin-right: auto;
}
.articleViewMediaMeta .articleDate,
.articleViewsCount,
.articleReadingTime
{
        display: inline-flex;
        align-items: center;
        gap: 7px;
}
.articleViewMediaMeta .articleDate
{
        flex-wrap: wrap;
}
.articleViewsCount .icon-eye,
.articleReadingTime .icon-clock
{
        font-size: 1rem;
}
.articleViewsCountLabel
{
}
.articleViewDescription
{
	text-align: justify;
	font-size: 1.2rem;
	line-height: 2rem;
}
.article_categoryWrap .button
{
	width: auto;
	min-width: 0px;
}
.articleViewYoutubeVideo
{
	margin-bottom: 20px;
}
.mainArticleThenOthers
{
	display: flex;
}
.mainArticleThenOthers.mainArticleBesideOthers
{
	flex-direction: row;
	gap: 10px;
}
.mainArticleThenOthers.mainArticleAboveOthers
{
	flex-direction: column;
	gap: 20px;
}
.mainArticleThenOthers.mainArticleBesideOthers .otherArticles
{
	flex: 1;
}
.mainArticleThenOthers.mainArticleBesideOthers .mainArticle
{
	width: 40%;
}
.mainArticleReadMoreButton, .mainArticleThenOthersMoreButton, .boxMoreButton
{
	float: left;
	margin-top: 5px;
}
.articlesListDescription
{
	margin-bottom: 20px;
}
.articlesNavSlider
{
	display: flex;
	gap: 15px;
	align-items: stretch;
}
.articlesNavSliderMain
{
	flex: 1;
	min-width: 0px;
}
.articlesNavSliderNav
{
	flex: 0 0 34%;
	width: 34%;
	min-width: 220px;
	overflow: visible;
	align-self: stretch;
	padding-left: 10px;
	display: flex;
	flex-direction: column;
}
/* the text above the side list (side_list_title), then the list in the room left */
.articlesNavSliderNavTitle
{
	font-weight: bold;
	margin-bottom: 10px;
}
.articlesNavSliderNavList
{
	flex: 1 1 auto;
	min-height: 0px;
}
.articlesNavSliderNav .listBody
{
	display: block;
}
.articlesNavSliderNav .listRow
{
	cursor: pointer;
	opacity: 0.75;
}
.articlesNavSliderNav .listRow.articlesNavSliderNavActive
{
	opacity: 1;
	background: var(--ui-soft);
}
/* until the carousels start (kCarousel, at the end of the page) and in the box previews: the first article only, the
   others stay in the page for the slider (the side list's first one is active, articlesNavSliderBox::navRowClass()) */
.articlesNavSliderMain .listBody:not(.kCarousel) > .listRow:not(:first-child)
{
	display: none;
}
@media (min-width: 851px){
	/* the side list is as high as the main article: its list fills the room under its text, before the strip starts and
	   after (the strip takes the room's height, stripHeightOf) */
	.articlesNavSliderNavList
	{
		position: relative;
	}
	.articlesNavSliderNav .listBody
	{
		position: absolute;
		top: 0px;
		bottom: 0px;
		right: 0px;
		left: 0px;
	}
	.articlesNavSliderNav .listBody:not(.kCarouselReady)
	{
		overflow: hidden;
	}
	/* its items share its height, so the last one ends with the main article: all of them (nav_visible_items empty) or
	   --nav-items of them (the others scroll); the cards fill their part, what does not fit is cut */
	.articlesNavSlider .articlesNavSliderNav .listBody:not(.kCarousel), .articlesNavSlider .articlesNavSliderNav .swiper-vertical > .swiper-wrapper
	{
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
	}
	.articlesNavSlider .articlesNavSliderNavFill .listBody:not(.kCarousel) > .listRow, .articlesNavSlider .articlesNavSliderNavFill .swiper-vertical > .swiper-wrapper > .swiper-slide
	{
		flex: 1 1 0px;
		height: auto;
		min-height: 0px;
		overflow: hidden;
	}
	.articlesNavSlider .articlesNavSliderNavItems .listBody:not(.kCarousel) > .listRow, .articlesNavSlider .articlesNavSliderNavItems .swiper-vertical > .swiper-wrapper > .swiper-slide
	{
		flex: 0 0 calc(100% / var(--nav-items));
		height: calc(100% / var(--nav-items));
		overflow: hidden;
	}
	.articlesNavSliderNav .listRow > .rowTemplateInner
	{
		height: 100%;
		box-sizing: border-box;
	}
	/* a text over the photo (the templates whose .rowTemplateData is inside .rowTemplatePhoto) covers the part of the
	   photo its card shows */
	.articlesNavSliderNav .rowTemplate.title_over_photo > .rowTemplateInner,
	.articlesNavSliderNav .rowTemplate.title_over_photo_always > .rowTemplateInner,
	.articlesNavSliderNav .rowTemplate.title_over_photo_full > .rowTemplateInner
	{
		position: relative;
	}
	.articlesNavSliderNav .rowTemplate.title_over_photo .rowTemplatePhoto,
	.articlesNavSliderNav .rowTemplate.title_over_photo_always .rowTemplatePhoto,
	.articlesNavSliderNav .rowTemplate.title_over_photo_full .rowTemplatePhoto
	{
		position: static;
	}
}
@media (max-width: 850px){
	/* a horizontal strip, as the started one (above the row templates' own list layouts) */
	.articlesNavSlider .articlesNavSliderNav .listBody:not(.kCarousel)
	{
		display: flex;
		flex-wrap: nowrap;
		overflow: hidden;
	}
	.articlesNavSlider .articlesNavSliderNav .listBody:not(.kCarousel) > .listRow
	{
		flex: 0 0 42%;
	}
	/* started, the list stays the clipping flex box it was (Chrome counts the change of box as a layout shift of the
	   whole strip, though nothing moves); the carousel fills it */
	.articlesNavSlider .articlesNavSliderNav .listBody.kCarousel
	{
		display: flex;
		overflow: hidden;
	}
	.articlesNavSlider .articlesNavSliderNav .listBody.kCarousel::before,
	.articlesNavSlider .articlesNavSliderNav .listBody.kCarousel::after
	{
		display: none;
	}
	.articlesNavSlider .articlesNavSliderNav .listBody.kCarousel > .swiper
	{
		flex: 1 1 auto;
		min-width: 0px;
	}
}
.fileDownloadPanel
{
	display: flex;
	flex-direction: row;
	gap: 10px;
	align-items: center;
}
.fileDownloadButton.isLoading
{
        opacity: 0.7;
        pointer-events: none;
}
.fileDownloadInfo
{
        /* margin-top: 10px; */
        color: var(--ui-muted);
}
.articleViewMediaMetaGroup-file
{
	width: 100%;
}
@media  (max-width:850px){
	
	.mainArticleThenOthers.mainArticleBesideOthers
	{
		flex-direction: column;
	}		
	.mainArticleThenOthers.mainArticleBesideOthers .mainArticle
	{
		width: 100%;
	}
	/* the thumbnails strip goes under the slider */
	.articlesNavSlider
	{
		flex-direction: column;
	}
	.articlesNavSliderNav
	{
		flex: 0 0 auto;
		width: 100%;
		min-width: 0px;
		padding-left: 0px;
	}
}
@media  (max-width:675px){
	.articleViewPhoto
	{
		margin-left: 0px;
		margin-right: 0px;
	}
	
        .photo_beside .articleViewMedia, .photo_beside_nfloat .articleViewMedia
	{
	   width: 100%;
	   padding-left: 0px;
	   padding-right: 0px;
	}
        .articleViewMediaMetaSocial
        {
                margin-right: 0;
        }

}
@media  (max-width:480px){
	
}
/* the article's additional photos: a gallery (kCarousel), or one photo */
.articleAdditionalPhotos
{
	margin: 15px 0px;
}
html .articleAdditionalPhotos .articleAdditionalPhoto img
{
	display: block;
	width: 100%;
	height: auto;
	max-height: 70vh;
	object-fit: contain;
}
.ui_tabs.ui-tabs .ui-tabs-nav li, .ui_tabs li
{
	float: right;
}
.ui-accordion .ui-accordion-header .ui-accordion-header-icon
{
	right: 0.5em;
	left: auto;
}
.ui-accordion .ui-accordion-icons
{
	padding-left: 0.7em;
	padding-right: 2.2em;
}
.ui-spinner .ui-spinner-button
{
	left: 0px;
	right: auto;
}
.ui-spinner a.ui-spinner-button
{
	border-right: 1px solid #D3D3D3;
	border-left: medium none;
}/*ThemeVars*/
/* The contact page (CommonFormPage_contact() in classes/_Utils.php): the ways to reach us beside the title are short lines of
   bold text, as the design's */
.contactPage .infoItem.info_list .infoValueLine
{
	font-size: 1rem;
	font-weight: bold;
	color: var(--skin-heading, #0F1F2E);
}
.contactPage .infoItem.info_list .itemMedia
{
	color: #1D76BC;
}
/* the head: a band as tall as the design's, the breadcrumb at its top, the title in the middle of the rest (the ways to reach us
   are centred on the same height) */
.contactPage .pageHeaderLook_split .pageHeaderInner
{
	display: flex;
	flex-direction: column;
	align-items: stretch;
	box-sizing: border-box;
	min-height: 255px;
	padding-block: 30px 35px;
}
.contactPage .pageHeaderLook_split .pageHeaderTexts
{
	flex: 1;
}
.contactPage .pageHeaderLook_split .pageHeaderTitle
{
	margin-block: auto;
	font-size: clamp(2.4rem, 3.75vw, 3.6rem);
}
/* the title of the centres is a frame without content: no room under it */
.contactPage .boxPositionRow .box_structure_text .block-body
{
	line-height: 0px;
}
/* the programme's centres (the row style cardColumns, classes/_supplements.php): each column of the row is a card, its map across the
   top, its name and details under it */
.contactPage .boxPositionRow.cardColumns .boxPositionRowColumnInner
{
	overflow: hidden;
	background: var(--card-bg, #FFFFFF);
	border: 1px solid var(--card-border, #E6EBF0);
	border-radius: var(--card-radius, 24px);
}
.contactPage .boxPositionRow.cardColumns .block_default_isolated.blockBare .block-title
{
	margin-bottom: 14px;
}
.contactPage .boxPositionRow.cardColumns .block_default_isolated.blockBare .block-title h3
{
	font-size: 1.2rem;
}
.contactPage .boxPositionRow.cardColumns .block_default_isolated.blockBare .block-title h3:before
{
	display: none;
}
.contactPage .boxPositionRow.cardColumns .box_structure_info_icon_value
{
	padding: 24px 28px 26px;
}
.contactPage .boxPositionRow.cardColumns .infoItem.info_list .infoValueLine
{
	font-size: 0.9rem;
	font-weight: normal;
	color: #6F7479;
}
.contactPage .boxPositionRow.cardColumns .infoItem.info_list .itemMedia
{
	font-size: 1rem;
	color: #6F7479;
}

/* the title of the centres stands alone over its cards: no room under it but the row's own */
.contactPage .boxPositionRow:nth-child(2) .block_default_isolated .block-title
{
	margin-bottom: 0px;
	padding-bottom: 0px;
}
/* a phone: the band of the head is as tall as its texts, the rows sit closer, the maps are shorter */
@media (max-width: 675px)
{
	.contactPage .pageHeaderLook_split .pageHeaderInner
	{
		min-height: 0px;
		padding-block: 20px 8px;
	}
	.contactPage .pageHeaderLook_split .pageHeaderTitle
	{
		margin-block: 8px 12px;
		font-size: 2.2rem;
	}
	.contactPage .boxPositionRow:not(:first-child)
	{
		padding-top: 28px !important;
		padding-bottom: 28px !important;
	}
	.contactPage .boxPositionRow:nth-child(2)
	{
		padding-bottom: 0px !important;
	}
	.contactPage .boxPositionRow:nth-child(3)
	{
		padding-top: 12px !important;
	}
	.contactPage .boxPositionRow:first-child .boxPositionRowContentInner
	{
		gap: 12px;
		padding-bottom: 20px;
	}
	.contactPage .boxPositionRow.cardColumns .box_structure_map > .boxInner > .boxValue > div
	{
		height: 180px !important;
	}
	.contactPage .boxPositionRow.cardColumns .box_structure_info_icon_value
	{
		padding: 18px 20px 20px;
	}
}
/*

*/
.boxPositionRows
{
	display: flex;
	flex-direction: column;
	align-items: center;
}
.boxPositionRowContentInner
{
	display: flex;
	flex-direction: row;
	align-items: start;
	
}
.boxPositionRow.equalHeightColumns .boxPositionRowContentInner
{
	align-items: stretch;
}
.boxPositionRowColumnInner
{
	display: flex;
	flex-direction: column;
	position: relative;
	z-index:1;
}
.boxPositionRowColumn
{
	flex: 1;
	/* overflow: hidden; */
	position: relative;
	min-width: 0px;
}


.box
{
	/* float: right; */
	/* width: 100%; */
}
.box.fixedWidth
{
    float: none;
}
.show_only_icon_photo ul
{
	font-size: 0px;
}
.show_only_icon_photo ul span
{
	font-size: 2.5rem;
	vertical-align: middle;
}
.boxValue
{
	line-height: 1.8rem;
}
.boxDescription
{
	line-height: 1.5rem;
	font-size: 0.95rem;
	margin-bottom: 5px;
}
.box_structure_image img:not(.limitedDimensions)
{
	width: 100%;
}
/*
.box.width_33
{
	width: 33.33%;
}
.box.width_50
{
	width: 50%;
}
.box.width_66
{
	width: 66.66%;
}
.box.width_75
{
	width: 75%;
}
.box.width_25
{
	width: 25%;
}
*/

.boxPositionRow
{
	position: relative;
	width: 100%;
}

.horizontalBoxPositionType .boxPositionRow
{
	padding: 0px;
}
.boxPositionRowContentInner
{
	position: relative;
	z-index: 3;
}
.boxPositionRowContent
{
	z-index: 3;
	position: relative;
}
.boxPositionBackground
{
	z-index: 1;
}
.boxPositionOverlay
{
	z-index: 2;
}
.boxPositionRow .boxPositionBackground
{
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
}
.boxPositionRow .boxPositionBackground.rowBackgroundRepeat
{
	background-repeat: repeat;
	background-size: auto;
}
.boxPositionRow .boxPositionBackground.rowBackgroundRepeat_x
{
	background-repeat: repeat-x;
}
.boxPositionRow .boxPositionBackground.rowBackgroundRepeat_y
{
	background-repeat: repeat-y;
}
.boxPositionRow .boxPositionBackground.rowBackgroundFixed
{
	background-attachment: fixed;
}

.boxPositionOverlay, .boxPositionBackground
{
	position: absolute;
	margin: auto;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	width: 100%;
	height: 100%;
	
}
.mapOverlayWrapper
{
    position: absolute;
    width: 100%;
    background: rgba(0,0,0, 0.6);
    color: #FFF;
    bottom: 0px;
    left: 0px;
    z-index: 10;
    font-size: 1.1rem;
    line-height: 1.9em;
}
.mapOverlayInner
{
    padding: 40px;
}
@media  (max-width:850px){
    .mapOverlayWrapper
       {
        height: 100%;
    }
}
@media  (max-width:675px){
	.box.width_33, .box.width_50, .box.width_66, .box.width_25, .box.width_75
	{
		width: 100%;
	}
}
@media  (max-width:480px){
	.boxes .row, .boxes .boxPositionRowColumn.column 
	{
		margin-bottom: 0px;
	}
}/*ThemeVars*/
/* Page header (classes/boxes/page_header.php): what its looks share (templates/items/page_header/, one stylesheet each):
   the breadcrumb, the kicker, the title, the lead, the date line, the button, the heights and the picture cropped around
   its focal point (--page-focus). The page's colour is --page-color (its category's, else the box's), else the skin's
   accent. The texts line up with the site's width when the row is full width. */
.pageHeader
{
	--_page-accent: var(--page-color, var(--skin-accent, #1D76BC));
}
.pageHeaderLook
{
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.pageHeaderLook.look-height-medium
{
	min-height: clamp(300px, 46vh, 480px);
}
.pageHeaderLook.look-height-tall
{
	min-height: clamp(420px, 72vh, 760px);
}
.pageHeaderInner
{
	box-sizing: border-box;
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 16px;
}
.pageHeaderTexts
{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	min-width: 0px;
}
.pageHeaderLook.look-align-center .pageHeaderTexts
{
	align-items: center;
	text-align: center;
}
.pageHeaderTitle
{
	margin: 0px;
	font-size: clamp(1.7rem, 3.4vw, 2.8rem);
	line-height: 1.25;
	color: var(--skin-heading, inherit);
}
.pageHeaderKicker
{
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--_page-accent);
}
.pageHeaderKicker a
{
	color: inherit;
	text-decoration: none;
}
.pageHeaderKicker a:hover
{
	text-decoration: underline;
}
.pageHeaderLead
{
	margin: 0px;
	max-width: 46em;
	font-size: 1.08rem;
	line-height: 1.8;
	color: color-mix(in srgb, var(--skin-heading, currentColor) 80%, transparent);
}
.pageHeaderMeta
{
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
	font-size: 0.88rem;
	opacity: 0.8;
}
.pageHeaderMetaItem:not(:first-child)::before
{
	content: "\00B7";
	margin-inline-end: 10px;
}
.pageHeaderIcon
{
	display: inline-block;
	font-size: 2.2rem;
	line-height: 1;
	color: var(--_page-accent);
}
.pageHeaderIcon.pageHeaderIconImage
{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.pageHeaderButton
{
	margin-top: 6px;
}
/* the breadcrumb: the page's linked steps, one line that wraps (the theme's band rules stay on the band) */
.pageHeaderCrumbs .breadCrumbElems
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 0px;
	margin: 0px;
	padding: 0px;
	list-style: none;
	font-size: 0.88rem;
}
.pageHeaderLook.look-align-center .pageHeaderCrumbs .breadCrumbElems
{
	justify-content: center;
}
.pageHeaderCrumbs .breadCrumbElem
{
	display: inline-flex;
	align-items: center;
	float: none;
	margin: 0px;
	padding: 0px;
	background: none;
}
.pageHeaderCrumbs .breadCrumbElem::after
{
	content: "/";
	margin-inline: 8px;
	opacity: 0.45;
}
.pageHeaderCrumbs .breadCrumbElem:last-child::after,
.pageHeaderCrumbs .breadCrumbSeparator
{
	display: none;
}
.pageHeaderCrumbs a
{
	color: inherit;
	opacity: 0.78;
	text-decoration: none;
}
.pageHeaderCrumbs a:hover
{
	opacity: 1;
	text-decoration: underline;
}
/* the picture fills its place, cropped around the focal point */
.pageHeaderMedia,
.pageHeaderMedia img,
.pageHeaderMedia picture
{
	display: block;
	width: 100%;
	height: 100%;
}
.pageHeaderMedia img
{
	object-fit: cover;
	object-position: var(--page-focus, 50% 50%);
}
/*ThemeVars*/
/* Text and picture (templates/items/page_header/split.storm): the texts and the picture side by side, the picture at the
   end or at the start (variation start), above the texts on a narrow screen */
.pageHeaderLook_split .pageHeaderInner
{
	display: grid;
	grid-template-columns: minmax(0px, 1fr);
	align-items: center;
	gap: clamp(20px, 4vw, 56px);
	padding-block: clamp(24px, 5vw, 56px);
}
.pageHeaderLook_split .pageHeaderInner:has(> .pageHeaderPhoto)
{
	grid-template-columns: minmax(0px, 1.1fr) minmax(0px, 1fr);
}
/* without a picture: a band of a title (a news or a list page), not a hero */
.pageHeaderLook_split .pageHeaderInner:not(:has(> .pageHeaderPhoto))
{
	padding-block: 22px 14px;
}
.pageHeaderLook_split .pageHeaderPhoto
{
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--card-radius, 24px);
}
.pageHeaderLook_split_start .pageHeaderPhoto
{
	order: -1;
}
@media (max-width: 850px)
{
	.pageHeaderLook_split .pageHeaderInner:has(> .pageHeaderPhoto)
	{
		grid-template-columns: minmax(0px, 1fr);
	}
	.pageHeaderLook_split .pageHeaderPhoto
	{
		order: -1;
		aspect-ratio: 16 / 9;
	}
}
/*ThemeVars*/
/* ==========================================================================
	Repeater boxes on the box kit (classes/boxes/_items.php): the items' layouts and what every item template shares.
	The box prints its values as custom properties on .boxItems: --box-cols / --box-cols-t / --box-cols-m (columns on
	desktop, tablet <= 1024px, phone <= 675px; an empty smaller screen takes the larger one's), --box-gap(-t, -m),
	--box-icon-size, --box-icon-color, --box-title-size, --box-text-size; an item its own colour as --item-color. The card
	itself (fill, border, corners, padding, shadow, hover lift) is the theme's card style (styles/basic/cards.css), the
	text colours the skin's: nothing here sets them.
   ========================================================================== */
.boxItems
{
	--_cols: var(--box-cols, 3);
	--_gap: var(--box-gap, 24px);
	--_accent: var(--skin-accent, #1D76BC);
	display: grid;
	grid-template-columns: repeat(var(--_cols), minmax(0, 1fr));
	gap: var(--_gap);
	align-items: stretch;
}
@media (max-width: 1024px)
{
	.boxItems
	{
		--_cols: var(--box-cols-t, var(--box-cols, 3));
		--_gap: var(--box-gap-t, var(--box-gap, 24px));
	}
}
@media (max-width: 675px)
{
	.boxItems
	{
		--_cols: var(--box-cols-m, var(--box-cols-t, 1));
		--_gap: var(--box-gap-m, var(--box-gap-t, var(--box-gap, 16px)));
	}
}
/* list: one column, a line between the items */
.boxItems.layout_list
{
	grid-template-columns: minmax(0, 1fr);
	gap: 0px;
}
.boxItems.layout_list > .itemTemplate + .itemTemplate
{
	border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
}
.boxItems.layout_list > .itemTemplate > .itemInner
{
	padding-block: calc(var(--_gap) / 2);
}
/* masonry: columns of different heights */
.boxItems.layout_masonry
{
	display: block;
	column-count: var(--_cols);
	column-gap: var(--_gap);
}
.boxItems.layout_masonry > .itemTemplate
{
	break-inside: avoid;
	margin-bottom: var(--_gap);
}
/* bento: the first item two columns wide and two rows high, the others one cell (a single column on a phone) */
.boxItems.layout_bento
{
	grid-auto-flow: dense;
}
.boxItems.layout_bento > .itemTemplate:first-child
{
	grid-column: span min(2, var(--_cols));
	grid-row: span 2;
}
@media (max-width: 675px)
{
	.boxItems.layout_bento > .itemTemplate:first-child
	{
		grid-column: auto;
		grid-row: auto;
	}
}
/* inline: the items one after another on a line, wrapping (a contact bar) */
.boxItems.layout_inline
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: var(--_gap);
	row-gap: 10px;
}
/* carousel and marquee: kCarousel builds its own track around the items */
.boxItems.layout_carousel, .boxItems.layout_marquee
{
	display: block;
}
/* the items */
.itemTemplate
{
	min-width: 0;
	--_item: var(--item-color, var(--box-icon-color, var(--_accent, #1d5fbf)));
}
.itemTemplate > .itemInner
{
	height: 100%;
	box-sizing: border-box;
}
.itemTemplate .itemTitle
{
	margin: 0px;
	font-size: var(--box-title-size, 1.15rem);
	line-height: 1.45;
	color: var(--skin-heading, inherit);
}
.itemTemplate .itemTitle a
{
	color: inherit;
	text-decoration: none;
}
.itemTemplate .itemTitle .highlightWord
{
	color: var(--_item);
}
.itemTemplate .itemText
{
	font-size: var(--box-text-size, 0.95rem);
	line-height: 1.75;
	color: color-mix(in srgb, var(--skin-heading, currentColor) 78%, transparent);
}
.itemTemplate .itemText p
{
	margin: 0px 0px 0.4em;
}
.itemTemplate .itemMore
{
	display: inline-block;
	margin-top: 8px;
	font-weight: 600;
	color: var(--_item);
	text-decoration: none;
}
.itemTemplate .itemBadge
{
	display: inline-block;
	align-self: flex-start;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	background: var(--badge-color, var(--_item));
	color: var(--skin-accent-text, #fff);
	margin-bottom: 6px;
}
/* the ribbon: a word on the card's end edge near its top, in the item's colour (a tab out of the edge) */
.itemTemplate > .itemInner:has(> .itemRibbon)
{
	position: relative;
}
.itemTemplate .itemRibbon
{
	position: absolute;
	top: 14px;
	inset-inline-end: 0px;
	z-index: 3;
	max-width: 70%;
	padding: 4px 12px 4px 14px;
	border-start-start-radius: 999px;
	border-end-start-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	background: var(--_item);
	color: var(--skin-accent-text, #fff);
	box-shadow: var(--ui-shadow-sm, none);
	pointer-events: none;
}
.itemTemplate .itemChecks
{
	list-style: none;
	margin: 8px 0px 0px;
	padding: 0px;
}
.itemTemplate .itemChecks li
{
	position: relative;
	padding-inline-start: 1.5em;
	margin: 4px 0px;
}
.itemTemplate .itemChecks li::before
{
	content: "✓";
	position: absolute;
	inset-inline-start: 0px;
	font-weight: 700;
	color: var(--_item);
}
/* media: an icon, a picture, a number or an emoji, in its frame (option icon_frame) and fill (icon_fill) */
.itemTemplate .itemMedia
{
	display: inline-grid;
	place-items: center;
	flex: none;
	width: var(--box-icon-size, 48px);
	height: var(--box-icon-size, 48px);
	font-size: calc(var(--box-icon-size, 48px) * 0.5);
	line-height: 1;
	color: var(--_item);
	background: color-mix(in srgb, var(--_item) 14%, transparent);
	border-radius: 50%;
	overflow: hidden;
}
.itemTemplate .itemMedia img
{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.itemTemplate .itemMedia .itemMediaNumber
{
	font-weight: 800;
	font-size: 0.9em;
}
.itemTemplate.look-icon_frame-none .itemMedia
{
	background: none;
	border-radius: 0px;
	width: auto;
	height: auto;
	font-size: var(--box-icon-size, 48px);
}
.itemTemplate.look-icon_frame-none .itemMedia img
{
	width: var(--box-icon-size, 48px);
	height: auto;
}
.itemTemplate.look-icon_frame-rounded .itemMedia
{
	border-radius: 28%;
}
.itemTemplate.look-icon_frame-square .itemMedia
{
	border-radius: 0px;
}
.itemTemplate.look-icon_frame-blob .itemMedia
{
	border-radius: 42% 58% 55% 45% / 50% 40% 60% 50%;
}
.itemTemplate.look-icon_frame-ring .itemMedia
{
	background: none;
	border: 2px solid var(--_item);
}
.itemTemplate.look-icon_fill-solid:not(.look-icon_frame-none):not(.look-icon_frame-ring) .itemMedia
{
	background: var(--_item);
	color: var(--skin-accent-text, #fff);
}
.itemTemplate.look-icon_fill-outline:not(.look-icon_frame-none) .itemMedia
{
	background: none;
	border: 2px solid color-mix(in srgb, var(--_item) 45%, transparent);
}
/* align */
.itemTemplate.look-align-center
{
	text-align: center;
}
/* hover: fill with the item's colour (always filled where nothing hovers), or zoom the picture */
.itemTemplate.look-hover-fill > .itemInner
{
	transition: background-color 0.25s ease, color 0.25s ease;
}
.itemTemplate.look-hover-fill:hover > .itemInner
{
	background-color: var(--_item);
}
.itemTemplate.look-hover-fill:hover :is(.itemTitle, .itemText, .itemMore, .itemChecks li::before)
{
	color: var(--skin-accent-text, #fff);
}
.itemTemplate.look-hover-fill:hover .itemMedia
{
	background: color-mix(in srgb, #fff 20%, transparent);
	color: #fff;
}
.itemTemplate.look-hover-zoom .itemMedia img
{
	transition: transform 0.4s ease;
}
.itemTemplate.look-hover-zoom:hover .itemMedia img
{
	transform: scale(1.08);
}
@media (prefers-reduced-motion: reduce)
{
	.itemTemplate .itemInner, .itemTemplate .itemMedia img { transition: none !important; }
}
/* a featured item: the skin's inverse (accent fill, accent text) */
.itemTemplate.is-featured > .itemInner
{
	background-color: var(--_item);
	color: var(--skin-accent-text, #fff);
}
.itemTemplate.is-featured :is(.itemTitle, .itemText, .itemMore)
{
	color: inherit;
}
.itemTemplate.is-featured .itemMedia
{
	background: color-mix(in srgb, #fff 20%, transparent);
	color: inherit;
}
/* numbers (templates/items/stats/): the value (counted by the motion script once seen: .count-ready until it starts,
   .is-counted then), its label; a ring or a bar fills to --stat-percent (100% without one) as it counts */
@property --stat-progress
{
	syntax: "<percentage>";
	inherits: true;
	initial-value: 100%;
}
.statItem
{
	--stat-progress: var(--stat-percent, 100%);
}
.statItem .statValue
{
	font-size: var(--stat-value-size, 2.4rem);
	font-weight: 800;
	line-height: 1.15;
	color: var(--_item);
	font-variant-numeric: tabular-nums;
}
.statItem .statNumber
{
	white-space: nowrap;
	unicode-bidi: isolate;
}
.statItem .statLabel
{
	font-size: var(--box-title-size, 1rem);
	font-weight: 600;
}
.statItem.count-ready
{
	--stat-progress: 0%;
}
.statItem.count-ready.is-counted
{
	--stat-progress: var(--stat-percent, 100%);
	transition: --stat-progress var(--stat-duration, 1.6s) cubic-bezier(0.2, 0.7, 0.2, 1);
}
.statItem.count-ready .statBarFill
{
	transition: width var(--stat-duration, 1.6s) cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (prefers-reduced-motion: reduce)
{
	.statItem.count-ready { --stat-progress: var(--stat-percent, 100%); transition: none !important; }
}
/* contact & info (templates/items/info/): the value (its link), its label and note, the copy button */
.infoItem .infoValue
{
	unicode-bidi: isolate;
	overflow-wrap: anywhere;
}
.infoItem .infoLink
{
	color: inherit;
	text-decoration: none;
}
.infoItem .infoLink:hover .infoValue
{
	color: var(--_item);
}
.infoItem .infoLabel
{
	font-size: 0.8rem;
	opacity: 0.7;
}
.infoItem .infoNote
{
	font-size: 0.85rem;
}
.infoItem .infoCopy
{
	margin-inline-start: 6px;
	padding: 2px 6px;
	border: 0px;
	border-radius: 6px;
	background: color-mix(in srgb, currentColor 8%, transparent);
	color: inherit;
	font-size: 0.85em;
	cursor: pointer;
	vertical-align: middle;
}
.infoItem .infoCopy.is-copied
{
	background: var(--_item);
	color: var(--skin-accent-text, #fff);
}
.infoItem.look-icon_frame-none .itemMedia
{
	font-size: calc(var(--box-icon-size, 36px) * 0.6);
}
/* the editor (scripts/addons/boxes/items_editor.js): the per-device fields' switch above the input, the fields the
   layout or the ticks leave out */
.itemsDeviceSwitch
{
	display: flex;
	flex-wrap: wrap;
	width: fit-content;
	max-width: 100%;
	margin-bottom: 6px;
	border: 1px solid #d5dbe5;
	border-radius: 8px;
	overflow: hidden;
}
.itemsDeviceField.itemsLayoutHidden,
.itemsDeviceField.itemsFollowHidden,
.itemsPieceHidden
{
	display: none !important;
}
.itemsDeviceSwitch button
{
	border: 0;
	background: #fff;
	padding: 3px 9px;
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
}
.itemsDeviceSwitch button.is-selected
{
	background: #10213f;
	color: #fff;
}
/* social follow (templates/items/social/*): the item's colour is its network's brand (colors brand, the default), the
   theme's accent (theme) or the text's (mono); a framed mark is a solid disc with a white mark (black marks stay seen on a
   dark row), an unframed one takes the colour itself */
.socialItem.socialBrand
{
	--_item: var(--item-color, var(--brand-color, var(--box-icon-color, var(--_accent, #1d5fbf))));
}
.socialItem.socialMono
{
	--_item: currentColor;
}
.socialItem:not(.look-icon_frame-none) .itemMedia
{
	background: var(--_item);
	color: #fff;
}
.socialItem.socialMono:not(.look-icon_frame-none) .itemMedia
{
	background: color-mix(in srgb, currentColor 12%, transparent);
	color: inherit;
}
.socialItem .itemMedia .socialMark
{
	width: 52%;
	height: 52%;
}
.socialItem.look-icon_frame-none .itemMedia .socialMark
{
	width: 1em;
	height: 1em;
}
/*ThemeVars*/
/* Contact list (templates/items/info/list.storm): the icon beside the value, the footer's list */
.itemTemplate.info_list > .itemInner
{
	display: flex;
	align-items: flex-start;
	gap: 12px;
}
.itemTemplate.info_list .itemBody
{
	min-width: 0;
	padding-top: 2px;
}
/*ThemeVars*/
/* Social marks (templates/items/social/icons.storm): the marks alone in a row, the name in their title; a count under a
   mark when ticked. Best in the inline layout. */
.itemTemplate.social_icons > .socialLink
{
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	text-decoration: none;
	color: inherit;
}
.itemTemplate.social_icons .socialName
{
	font-weight: 600;
	font-size: 0.9rem;
}
.itemTemplate.social_icons .socialCount
{
	font-size: 0.8rem;
	opacity: 0.85;
}
.itemTemplate.social_icons .itemMedia
{
	transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
@media (hover: hover)
{
	.itemTemplate.social_icons > .socialLink:hover .itemMedia
	{
		transform: translateY(-2px);
	}
}
/* The map box (classes/boxes/map.php). Every value falls back to what styles/addons/boxes/ui.css gave the text layer. */
.boxMap
{
	position: relative;
}
.boxMap .boxMapStage
{
	width: 100%;
}
.boxMap .keepRatioWrapper:after
{
	padding-top: var(--map-aspect, 60.8%);
}
.boxMap .mapOverlayWrapper
{
	background: color-mix(in srgb, var(--layer-background, #000) var(--layer-opacity, 60%), transparent);
	color: var(--layer-color, #FFF);
	font-size: var(--layer-font-size, 1.1rem);
}
.boxMap .mapOverlayWrapper .mapOverlayInner
{
	padding: var(--layer-padding, 40px);
}
/* a width of its own, and where it sits */
.boxMap.boxMapLayer_start .mapOverlayWrapper,
.boxMap.boxMapLayer_center .mapOverlayWrapper,
.boxMap.boxMapLayer_end .mapOverlayWrapper
{
	width: min(100%, var(--layer-width));
}
.boxMap.boxMapLayer_start .mapOverlayWrapper
{
	left: auto;
	inset-inline-start: 0;
}
.boxMap.boxMapLayer_center .mapOverlayWrapper
{
	left: 50%;
	transform: translateX(-50%);
}
.boxMap.boxMapLayer_end .mapOverlayWrapper
{
	left: auto;
	inset-inline-end: 0;
}
/* the text layer covers the whole map on narrow screens (ui.css): it can be left lower, or below the map */
@media (max-width: 850px)
{
	.boxMap.boxMapMobile_bottom .mapOverlayWrapper
	{
		height: auto;
	}
	.boxMap.boxMapMobile_below .mapOverlayWrapper
	{
		position: static;
		height: auto;
		width: 100%;
		transform: none;
	}
}
.boxMap .boxMapLink
{
	padding: 8px 12px 0;
	font-size: 0.9rem;
}
/* The embedded boxes loaded later (scripts/addons/boxes/embeds.js) */
.boxEmbedPlaceholder
{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 140px;
	border-radius: 8px;
	background: rgba(127, 127, 127, 0.12);
	overflow: hidden;
}
.boxEmbed_visible .boxEmbedPlaceholder
{
	min-height: 220px;
}
.boxEmbed_click .boxEmbedPlaceholder
{
	aspect-ratio: 16 / 9;
	min-height: 0;
}
.boxEmbedThumbnail
{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	cursor: pointer;
}
.boxEmbedLoad
{
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border: 0;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.72);
	color: #fff;
	font: inherit;
	cursor: pointer;
}
.boxEmbedLoad:hover,
.boxEmbedLoad:focus-visible
{
	background: rgba(0, 0, 0, 0.88);
}
/* Common forms in boxes (classes/boxes/common_form.php) */
.commonFormDescription
{
	margin-bottom: 12px;
}
/* side by side: each field takes its share of the row, the send button its own width (over the theme's half or
   full width rows) */
.commonFormInline .formElement
{
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 8px 12px;
}
.commonFormInline .formElement > .row.formRow
{
	display: block;
	flex: 1 1 180px;
	width: auto;
	min-width: 0;
	max-width: none;
	margin: 0;
	padding: 0;
}
.commonFormInline .formElement > .row.formRow > .column
{
	display: block;
	width: auto;
	float: none;
	padding: 0;
}
.commonFormInline .formElement > .row.formRow.submit-row
{
	flex: 0 0 auto;
}
.commonFormInline .formElement > .row.formRow.submit-row input[type="submit"].button
{
	width: auto;
}
.commonFormInline .formElement > .row.formRow.submit-row > .captionClass,
.commonFormInline .formElement > .row.formRow.hidden-row
{
	display: none;
}
.commonFormInline .formElement > .row.formRow > .captionClass
{
	margin-bottom: 4px;
}
/* Entries: the handling box and the timeline (admin/common_form/entry); a status is a uiBadge() */
.commonFormHandling
{
	display: flex;
	flex-wrap: wrap;
	gap: 16px 32px;
}
.commonFormHandlingActions
{
	flex: 1 1 320px;
}
.commonFormHandlingTimeline
{
	flex: 1 1 320px;
}
.commonFormEntryActionsRow
{
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.commonFormEntryActions label
{
	display: block;
	flex: 1 1 160px;
	margin-bottom: 10px;
}
.commonFormEntryActions label > span
{
	display: block;
	margin-bottom: 4px;
	font-weight: bold;
}
.commonFormEntryActions select,
.commonFormEntryActions textarea
{
	width: 100%;
	box-sizing: border-box;
}
ul.commonFormTimeline
{
	list-style: none;
	margin: 0;
	padding: 0;
}
ul.commonFormTimeline > li
{
	position: relative;
	padding: 0 0 12px;
	padding-inline-start: 18px;
	border-inline-start: 2px solid var(--ui-border);
	margin-inline-start: 5px;
}
ul.commonFormTimeline > li:before
{
	content: "";
	position: absolute;
	top: 4px;
	inset-inline-start: -7px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--ui-surface);
	border: 2px solid var(--ui-border-strong);
}
ul.commonFormTimeline > li.commonFormTimeline_note:before
{
	border-color: var(--ui-warning);
}
ul.commonFormTimeline > li time
{
	display: block;
	font-size: 11px;
	color: var(--ui-placeholder);
}
.commonFormTimelineNote
{
	margin-top: 4px;
	padding: 6px 10px;
	background: var(--ui-yellow-soft);
	border-radius: 6px;
	white-space: normal;
}
/* the tokens the notification patterns can show (the form settings) */
details.commonFormTokens
{
	margin: 4px 0 10px;
}
details.commonFormTokens summary
{
	cursor: pointer;
	color: var(--ui-accent);
}
details.commonFormTokens ul
{
	columns: 2 260px;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
	font-size: 12px;
}
details.commonFormTokens code
{
	background: var(--ui-soft);
	padding: 0 4px;
	border-radius: 3px;
}
/* The ready templates of a new form (admin/common_form/add.php) and the import form */
.commonFormTemplates
{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 12px;
}
a.commonFormTemplate
{
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px;
	border: 1px solid var(--ui-border);
	border-radius: 10px;
	color: inherit;
	text-decoration: none;
	transition: border-color 0.15s, box-shadow 0.15s;
}
a.commonFormTemplate:hover
{
	border-color: var(--ui-accent);
	box-shadow: var(--ui-shadow);
}
a.commonFormTemplate > span
{
	font-size: 22px;
	color: var(--ui-accent);
}
a.commonFormTemplate small
{
	color: var(--ui-muted);
}
a.commonFormTemplate em
{
	font-size: 11px;
	color: var(--ui-placeholder);
	font-style: normal;
}
.commonFormImportField
{
	display: block;
	margin-bottom: 12px;
}
.commonFormImportField > span
{
	display: block;
	margin-bottom: 4px;
	font-weight: bold;
}
/* the file field: a button and the chosen file's name, in the page's language (the input itself is kept for the
   keyboard and screen readers, out of sight) */
.commonFormFilePicker
{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	position: relative;
	cursor: pointer;
}
.commonFormFilePicker input[type=file]
{
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	overflow: hidden;
}
.commonFormFilePicker input[type=file]:focus-visible + .button
{
	outline: 2px solid var(--ui-focus);
	outline-offset: 2px;
}
.commonFormFilePicker .button
{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: auto;
}
.commonFormFileName
{
	color: var(--ui-muted);
}
/* the preview of an import: what the definition makes */
.commonFormImportPreview
{
	display: grid;
	grid-template-columns: minmax(120px, max-content) minmax(0, 1fr);
	gap: 8px 16px;
	margin: 12px 0;
}
.commonFormImportPreview dt
{
	font-weight: bold;
}
.commonFormImportPreview dd
{
	margin: 0;
	min-width: 0;
}
.commonFormImportPreview small
{
	display: block;
	color: var(--ui-warning);
}
.commonFormImportList
{
	margin: 0;
	padding-inline-start: 18px;
}
.commonFormImportList li
{
	margin-bottom: 4px;
}
.commonFormImportCode
{
	font-family: monospace;
	padding: 0 4px;
	border-radius: 4px;
	background: var(--ui-soft);
}
.commonFormImportFound
{
	color: var(--ui-success);
	font-size: 12px;
}
.commonFormImportMissing
{
	color: var(--ui-warning);
	font-size: 12px;
}
.commonFormImportNone
{
	color: var(--ui-muted);
}
.commonFormImportButtons
{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
@media (max-width: 600px)
{
	.commonFormImportPreview
	{
		grid-template-columns: minmax(0, 1fr);
		gap: 2px;
	}
	.commonFormImportPreview dd
	{
		margin-bottom: 10px;
	}
}
.commonFormImport textarea
{
	width: 100%;
	box-sizing: border-box;
	font-family: monospace;
}
/* Deleting a status: where its entries go (admin/common_form/status/delete.php) */
.commonFormStatusDelete p,
.commonFormStatusDelete label
{
	display: block;
	margin-bottom: 12px;
}
.commonFormStatusDelete label > span
{
	display: block;
	margin-bottom: 4px;
}
.commonFormStatusDelete select
{
	min-width: 220px;
}
/* A form's numbers, each a filter of its entries (uiChip()s), and the entries per day (admin/common_form/entry/index.php) */
.commonFormOverview
{
	margin-bottom: 12px;
}
details.commonFormChart
{
	margin-top: 8px;
}
details.commonFormChart summary
{
	cursor: pointer;
	color: var(--ui-accent);
	font-size: 13px;
}
/* Where a form can be used: the "Use this form" dialog (admin/common_form/edit.php) */
.commonFormEmbedRow
{
	margin-bottom: 12px;
}
.commonFormEmbedRow > span
{
	display: block;
	margin-bottom: 4px;
	font-weight: bold;
}
.commonFormEmbedValue
{
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
}
.commonFormEmbedValue input
{
	flex: 1 1 220px;
	min-width: 0;
	box-sizing: border-box;
	font-family: monospace;
	background: var(--ui-surface-muted);
}
.commonFormEmbedValue .button
{
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	white-space: nowrap;
}
/*ThemeVars*/
/* The site's common forms in boxes (loaded by the `common_form.render` listener in classes/_supplements.php): the form in a
   card with its title inside, two fields to a row, labels above, the choices of a list as pills, the file as a drop area,
   the send button as a blue pill at the end. */
.block_default_isolated.blockPlain:not(.blockSide):has(.commonFormBox) > .blockInner
{
	padding: 32px 36px;
	background: var(--skin-surface, #FFFFFF);
	border: 1px solid var(--card-border, #E6EBF0);
	border-radius: 24px;
}
.block_default_isolated.blockPlain:not(.blockSide):has(.commonFormBox) .block-title
{
	margin-bottom: 14px;
	padding-bottom: 0px;
}
.block_default_isolated.blockPlain:not(.blockSide):has(.commonFormBox) .block-title h2
{
	font-size: 1.35rem;
}
.block_default_isolated.blockPlain:not(.blockSide):has(.commonFormBox) .block-title h2:before
{
	display: none;
}
.block_default_isolated.blockPlain:not(.blockSide):has(.commonFormBox) .block-body
{
	background: none;
	border: 0px none;
	box-shadow: none;
	padding: 0px;
}

/* the title beside the form (the frame variation side): the card is the body, the title stays on the page */
.block_default_isolated.blockSide:has(.commonFormBox) .block-body
{
	padding: 32px 36px;
	background: var(--skin-surface, #FFFFFF);
	border: 1px solid var(--card-border, #E6EBF0);
	border-radius: 24px;
	box-shadow: none;
}
/* the rows: two to a line, the wide kinds across */
.commonFormBox .formElement > .row.formRow
{
	padding: 8px;
}
.commonFormBox .formElement > .row.formRow.radio-row
{
	min-width: 100%;
	width: 100%;
}
.commonFormBox .formElement > .row.formRow .captionClass
{
	padding: 0px 0px 6px;
	font-size: 0.85rem;
	font-weight: bold;
	color: var(--skin-heading, #0F1F2E);
}
.commonFormBox .formElement > .row.formRow input[type="text"],
.commonFormBox .formElement > .row.formRow input[type="password"],
.commonFormBox .formElement > .row.formRow select,
.commonFormBox .formElement > .row.formRow textarea
{
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
	padding: 8px 14px;
	border: 1px solid var(--card-border, #E6EBF0);
	border-radius: 10px;
	background: #FFFFFF;
}
.commonFormBox .formElement > .row.formRow textarea
{
	min-height: 120px;
}
.commonFormBox .formElement > .row.formRow input:focus-visible,
.commonFormBox .formElement > .row.formRow select:focus-visible,
.commonFormBox .formElement > .row.formRow textarea:focus-visible
{
	outline: 2px solid color-mix(in srgb, #1D76BC 45%, transparent);
	outline-offset: 0px;
}

/* the file: a drop area with the upload mark, its button the line of text */
.commonFormBox .commonFormFilePicker
{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	box-sizing: border-box;
	width: 100%;
	min-height: 110px;
	padding: 18px;
	border: 2px dashed color-mix(in srgb, #6F7479 55%, transparent);
	border-radius: 12px;
	text-align: center;
}
.commonFormBox .commonFormFilePicker:before
{
	content: "";
	width: 1.6rem;
	height: 1.6rem;
	background: var(--skin-heading, #0F1F2E);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4M6 10l6-6 6 6M4 20h16'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4M6 10l6-6 6 6M4 20h16'/%3E%3C/svg%3E") center / contain no-repeat;
}
.commonFormBox .commonFormFilePicker .button
{
	padding: 0px;
	border: 0px none;
	background: none;
	box-shadow: none;
	color: #1D76BC;
	font-size: 0.9rem;
}
.commonFormBox .commonFormFilePicker:hover
{
	border-color: #1D76BC;
}

/* the captcha and the send button */
.commonFormBox .formElement > .row.formRow.submit-row .inputClass
{
	justify-content: flex-end;
}
.commonFormBox .formElement > .row.formRow.submit-row .inputClass input
{
	flex: none;
	width: auto;
	padding: 10px 32px;
	border: 0px none;
	border-radius: 999px;
	background: #1D76BC;
	color: #FFFFFF;
	font-weight: bold;
	cursor: pointer;
}
.commonFormBox .formElement > .row.formRow.submit-row .inputClass input:hover
{
	background: color-mix(in srgb, #1D76BC 85%, #000);
}

@media (max-width: 675px)
{
	.block_default_isolated.blockPlain:not(.blockSide):has(.commonFormBox) > .blockInner
	{
		padding: 24px 20px;
	}
	.commonFormBox .formElement > .row.formRow
	{
		min-width: 100%;
		width: 100%;
	}
}
/* ==========================================================================
	What a row draws besides its columns (classes/addons/boxes_rows.php boxes_rowLook()): columns order and alignment,
	a custom width, inset rows, overlap, height and snap, sticky rows, the background's phone picture and video, edges
	and decoration, and columns bleeding to the screen's edge. The rows stack at 1024px (the theme's rule).
   ========================================================================== */
/* columns order and vertical alignment */
@media (min-width: 1025px)
{
	.boxPositionRow.rowReverse > .boxPositionRowContent > .boxPositionRowContentInner { flex-direction: row-reverse; }
	.boxPositionRow.rowAlign-center > .boxPositionRowContent > .boxPositionRowContentInner { align-items: center; }
	.boxPositionRow.rowAlign-end > .boxPositionRowContent > .boxPositionRowContentInner { align-items: flex-end; }
	.boxPositionRow.rowAlign-stretch > .boxPositionRowContent > .boxPositionRowContentInner { align-items: stretch; }
}
@media (max-width: 1024px)
{
	.pageBoxPositionType .boxPositionRow.rowStackReverse > .boxPositionRowContent > .boxPositionRowContentInner { flex-direction: column-reverse; }
}
/* a custom width */
.boxPositionRowContent.rowCustomWidth
{
	width: 94%;
	margin-inline: auto;
}
/* inset: the row a rounded panel inside the page (the theme's fixed width), its background inside it */
.boxPositionRow.rowInset
{
	border-radius: var(--row-inset-radius, 24px);
	overflow: clip;
	isolation: isolate;
}
.boxPositionRow.rowInset > .boxPositionRowContent
{
	padding-inline: clamp(16px, 4%, 48px);
}
/* overlap: pulled up over the row before, above it */
.boxPositionRow[class*="rowOverlap-"]
{
	position: relative;
	z-index: 5;
}
.boxPositionRow.rowOverlap-small { margin-top: -40px; }
.boxPositionRow.rowOverlap-medium { margin-top: -90px; }
.boxPositionRow.rowOverlap-large { margin-top: -150px; }
@media (max-width: 675px)
{
	.boxPositionRow.rowOverlap-small { margin-top: -20px; }
	.boxPositionRow.rowOverlap-medium { margin-top: -45px; }
	.boxPositionRow.rowOverlap-large { margin-top: -75px; }
}
/* height: a minimum, or the screen's (its content centred), and snap between such rows */
.boxPositionRow.rowMinHeight,
.boxPositionRow.rowScreen
{
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.boxPositionRow.rowMinHeight { min-height: var(--row-min-height, auto); }
.boxPositionRow.rowScreen { min-height: calc(100svh - var(--row-screen-offset, 0px)); }
/* a full width content stretches; the theme container keeps its own width */
.boxPositionRow.rowMinHeight > .boxPositionRowContent:not(.fixedWidth),
.boxPositionRow.rowScreen > .boxPositionRowContent:not(.fixedWidth)
{
	width: 100%;
}
@media (max-width: 675px)
{
	.boxPositionRow.rowMinHeight { min-height: var(--row-min-height-m, var(--row-min-height, auto)); }
}
html:has(.boxPositionRow.rowSnap) { scroll-snap-type: y proximity; }
.boxPositionRow.rowSnap { scroll-snap-align: start; }
/* sticky: stays while the next rows scroll over it (they need a background of their own) */
.boxPositionRow.rowSticky
{
	position: sticky;
	top: var(--row-sticky-top, 0px);
	z-index: 0;
}
.boxPositionRow.rowSticky ~ .boxPositionRow
{
	position: relative;
	z-index: 1;
}
/* the background: a picture for phones, a video behind the content (none under reduced motion: its poster stays) */
@media (max-width: 675px)
{
	.boxPositionRow .boxPositionBackground[style*="--row-bg-mobile"] { background-image: var(--row-bg-mobile) !important; }
}
.boxPositionBackground:has(> .rowVideo)
{
	overflow: hidden;
}
.boxPositionBackground > video.rowVideo
{
	position: absolute;
	inset: 0px;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.boxPositionBackground > .rowVideoFrame
{
	position: absolute;
	top: 50%;
	left: 50%;
	width: max(100%, 177.78vh);
	height: max(100%, 56.25vw);
	border: 0px none;
	transform: translate(-50%, -50%);
	pointer-events: none;
}
@media (prefers-reduced-motion: reduce)
{
	.boxPositionBackground > .rowVideo { display: none; }
}
/* edges: a shape at the row's top or bottom in its neighbour's colour, or an uploaded picture as it is */
.boxPositionRow[class*="rowWithEdge-"]
{
	position: relative;
}
.rowEdge
{
	position: absolute;
	left: 0px;
	right: 0px;
	z-index: 4;
	height: var(--edge-height, 60px);
	background-color: var(--edge-color, #ffffff);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	pointer-events: none;
}
.rowEdge.rowEdgeImage
{
	background-color: transparent;
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
.rowEdge-bottom { bottom: -1px; }
.rowEdge-top { top: -1px; transform: scaleY(-1); }
.rowEdge-bottom.rowEdgeFlip { transform: scaleX(-1); }
.rowEdge-top.rowEdgeFlip { transform: scale(-1, -1); }
@media (max-width: 675px)
{
	.rowEdge { height: var(--edge-height-m, var(--edge-height, 60px)); }
}
/* decoration: shapes and a ghost word behind the content, bleeding over the row's top and bottom (not its sides) */
.boxPositionRow.rowWithDecor
{
	overflow-x: clip;
}
.rowDecor
{
	position: absolute;
	inset: 0px;
	z-index: 2;
	pointer-events: none;
}
.rowDecorItem
{
	position: absolute;
	inset-inline-start: var(--decor-x);
	top: var(--decor-y);
	width: var(--decor-size);
	height: var(--decor-size);
	color: var(--skin-accent, var(--ui-accent, #1d5fbf));
	transform: translate(-50%, -50%) rotate(var(--decor-rotate, 0deg));
	opacity: 0.9;
}
.rowDecorItem:dir(rtl)
{
	transform: translate(50%, -50%) rotate(var(--decor-rotate, 0deg));
}
.rowDecor-ring { border: 2px solid currentColor; border-radius: 50%; opacity: 0.45; }
.rowDecor-half { height: calc(var(--decor-size) / 2); border-radius: var(--decor-size) var(--decor-size) 0 0; background: currentColor; opacity: 0.14; }
.rowDecor-dots { background-image: radial-gradient(currentColor 2px, transparent 2.5px); background-size: 18px 18px; opacity: 0.35; }
.rowDecor-blob { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; background: currentColor; opacity: 0.12; }
.rowDecor-arc { border: 10px solid currentColor; border-color: currentColor currentColor transparent transparent; border-radius: 50%; opacity: 0.3; }
.rowDecor-image { width: var(--decor-size); height: auto; opacity: 1; }
/* a picture sits in its place by the same point of itself: a corner place puts its corner in that corner of the row, the middle its middle */
.rowDecor-image { transform: translate(calc(var(--decor-x) * -1), calc(var(--decor-y) * -1)) rotate(var(--decor-rotate, 0deg)); }
.rowDecor-image:dir(rtl) { transform: translate(var(--decor-x), calc(var(--decor-y) * -1)) rotate(var(--decor-rotate, 0deg)); }
.rowDecor-image img { display: block; width: 100%; height: auto; }
.rowGhostWord
{
	position: absolute;
	top: 50%;
	left: 50%;
	font-size: var(--ghost-size, 180px);
	font-weight: 800;
	line-height: 1;
	white-space: nowrap;
	color: currentColor;
	opacity: var(--ghost-opacity, 0.06);
	transform: translate(-50%, -50%);
}
.rowDecorDrift .rowDecorItem
{
	animation: rowDecorDrift 14s ease-in-out infinite alternate;
}
.rowDecorDrift .rowDecorItem:nth-child(2) { animation-duration: 18s; }
.rowDecorDrift .rowDecorItem:nth-child(3) { animation-duration: 22s; }
@keyframes rowDecorDrift
{
	from { translate: 0px 0px; }
	to { translate: 14px -18px; }
}
@media (max-width: 675px)
{
	.rowDecor:not(.rowDecorPhone) { display: none; }
}
@media (prefers-reduced-motion: reduce)
{
	.rowDecorDrift .rowDecorItem { animation: none; }
}
/* a column bleeding to the screen's edge on its start or end side (its row's width measured as a container) */
.boxPositionRowContentInner:has(> [class*="columnBleed-"])
{
	container-type: inline-size;
}
@media (min-width: 1025px)
{
	.boxPositionRowColumn.columnBleed-end { margin-inline-end: calc((100cqw - 100vw) / 2); }
	.boxPositionRowColumn.columnBleed-start { margin-inline-start: calc((100cqw - 100vw) / 2); }
}
.boxPositionRow:has(.boxPositionRowColumn[class*="columnBleed-"])
{
	overflow-x: clip;
}
/*ThemeVars*/
.navbar li.searchIcon > ul
{
	padding: 10px;
}
.navbar li.searchIcon.visible > ul
{
	display: block;
}
/* the hidden copy that measures the navbar's heights (scripts/_Utils.js): no transitions, the final sizes at once */
.navbarMeasuring, .navbarMeasuring *
{
	transition: none !important;
}
.navbarToScroll.fixedNavbar .navbar
{
    
    transition: all 1s;
    -webkit-transition: all 1s;
}
/* The wrapper always reserves the normal bar height, so the bar can animate between its normal and sticky sizes without moving the page */
.navbarWrapper
{
	min-height: 72px;
}

.navbarToScroll.fixedNavbar
{
	background: #FFFFFF;
    box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
	position: fixed;
	top: 0px;
	width: 100%;
	left: 0px;
	z-index: 100;
	padding: 0px;
}

body.ltrDirection .navbarToScroll
{
	background: #FFFFFF;
	background: linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 100%);
}
body.rtlDirection .navbarToScroll
{
	background: #FFFFFF;
	background: linear-gradient(270deg, #FFFFFF 0%, #FFFFFF 100%);
}
.navbarToScroll
{
	font-size: 1rem;
	color: #444;
	position: relative;
	padding: 0px;
	/* the navbar's dropdowns stay above the page's own positioned content (sliders, cards) */
	z-index: 50;
	border-bottom: 1px solid #E6EBF0;
	box-shadow: 0px 0px 0px 0px rgba(15, 31, 46, 0);
}

.navbarMenu .menuItemArrow
{
	color: #0F1F2E;
	left: 3px;
}
/* the navbar's button item is the call to action (the orange pill), its outlined item the quiet one beside it */
.navbarWrapper ul > li.asButton:hover
{
	background: none;
}

.navbarWrapper .menuInner > li.asButton > a
{
	background: #E7731E;
	color: #0F1F2E;
	border: none;
	line-height: 48px;
	border-radius: 999px;
	font-weight: bold;
	font-size: 1rem;
	padding: 0px 28px;
}
.navbarMenu li.asButton:hover > a
{
	background: color-mix(in srgb, #E7731E 86%, #000);
	color: #0F1F2E;
}
/* the quiet button: a thin dark edge, filled with the dark colour under the mouse */
.navbarWrapper .menuInner > li.menuItemOutline > a
{
	line-height: 45px;
	margin-block: 0px;
	border: 1.5px solid #26323D;
	border-radius: 999px;
	padding: 0px 26px;
	font-weight: bold;
	font-size: 1rem;
	color: #0F1F2E;
}
.navbarMenu li.menuItemOutline:hover > a,
.navbarWrapper .menuInner > li.menuItemOutline:hover > a
{
	color: #FFFFFF;
	background: #0F1F2E;
	border-color: #0F1F2E;
}
.navbarWrapper .menuInner > li.asButton,
.navbarWrapper .menuInner > li.menuItemOutline
{
	margin-inline: 8px;
}
.navbarMenu
{
	width: 100%;
    float: right;
    padding-right: calc(150px + 30px);
    padding-left: 0px;
	margin-top: 0px;
	line-height: 72px;
}
.navbarToScroll.fixedNavbar .navbarMenu
{
	line-height: 56px;
}

.navbarWrapper li.navbarLang, .navbarWrapper li.searchIcon, .navbarWrapper li.socialItem
{
	padding: 0px 5px;
}
.navbarWrapper .navbarLang a, .navbarWrapper .searchIcon a, .navbarWrapper .socialItem a
{
	font-family: Tahoma, Arial;
	height: 30px;
	width: 30px;
	line-height: 30px;
	border-radius: 50%;
	text-align: center;
	padding: 0px;
}
.navbarWrapper .searchIcon a
{
	background: none;
	color: #26323D;
}
.navbarWrapper .menuInner > li.searchIcon
{
	float: left;
	padding: 0px;
	position: relative;
}
.navbarWrapper .menuInner > li.searchIcon > a
{
	width: 40px;
	padding: 0px;
	font-size: 1.25rem;
	text-align: center;
	line-height: 2.6rem;
}
.navbarWrapper .menuInner > li.searchIcon > a:hover,
.navbarWrapper .menuInner > li.searchIcon.visible > a
{
	color: #1D76BC;
}
.navbarMenu li.searchIcon > ul
{
	left: 0px;
	right: auto;
	width: 300px;
	padding: 12px;
	line-height: normal;
}
.navbarMenu li.searchIcon > ul li
{
	border-bottom: 0px none;
}
.navbarWrapper .navbarLang a
{
	background: #fb9f0d;
	color: #FFF;
}
.navbarWrapper .socialItem a
{
	
	color: #004f98;
}
.navbarWrapper .socialItem
{
	font-size: 29px;
}


.navbarMenu ul ul li
{
	line-height: 44px; 
	border-bottom: 1px solid #EEE;
}
.navbarMenu ul ul li:last-child
{
    border-bottom: 0px none;
}
.navbarMenu ul ul a:hover
{
	/* color: #3498db; */
}

.navbarMenu ul ul a
{
	border-top: 0px none;
	padding-bottom: 0px;
	font-size: 0.95rem;
	color: #0F1F2E;
	font-weight: normal;
}

.navbarWrapper ul ul
{
	background: #FFFFFF;
	border: 1px solid #E6EBF0;
	border-radius: 24px;
	box-shadow: 0px 0px 0px 0px rgba(15, 31, 46, 0);
	-webkit-box-shadow: 0px 0px 0px 0px rgba(15, 31, 46, 0);
}
.navbarLogo .imageContainer
{
	background: none;
}
.navbarLogo .imageContainer:after
{
	padding-top: 40%;
}
.navbarLogo
{
    padding: 0px;
	position: absolute;
	right: 0px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 9;
	width: 150px;
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
}
.navbarToScroll.fixedNavbar .navbarLogo
{
	width: calc(150px * 0.7);
}
.navbarLogo img
{
    width: auto;
    height: auto;
    transition: all 1s;
    -webkit-transition: all 1s;
	vertical-align: top;
}

.navbarWrapper .navbarInner
{
	padding: 0px 0px;
	position: relative;
	height: 72px;
	transition: height 0.3s;
	-webkit-transition: height 0.3s;
}
.navbarToScroll.fixedNavbar .navbarInner
{
	height: 56px;
}
.navbarToScroll.fixedNavbar .menuInner > li > a
{
	line-height: 2.2rem;
}
/* the hovered item and the page being viewed: the item's colour and a line under the text */
.navbarWrapper .menuWrapper:not(.menuCompact) .menuInner > li:not(.asButton) > a:hover,
.navbarWrapper .menuWrapper:not(.menuCompact) .menuInner > li.menuItemCurrent:not(.asButton) > a,
.navbarWrapper .menuWrapper:not(.menuCompact) .menuInner > li.menuItemCurrentParent:not(.asButton) > a
{
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 10px;
}
.navbarWrapper .menuInner > li > a:hover
{
	background: transparent;
}
.navbarWrapper li
{
	
}
.navbarWrapper .menuInner > li > a
{
	display: inline-block;
	vertical-align: middle;
	line-height: 2.6rem;
	border-radius: 0px;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}
/* the page being viewed: its top item (or the one it sits under) looks like a hovered one, in bold on a phone */
.navbarWrapper .menuWrapper:not(.menuCompact) .menuInner > li.menuItemCurrent:not(.asButton) > a,
.navbarWrapper .menuWrapper:not(.menuCompact) .menuInner > li.menuItemCurrentParent:not(.asButton) > a
{
	background: transparent;
	color: #1D76BC;
}
.navbarWrapper .menuWrapper.menuCompact .menuInner > li.menuItemCurrent > a,
.navbarWrapper .menuWrapper.menuCompact .menuInner > li.menuItemCurrentParent > a
{
	font-weight: bold;
}
.navbarMenu ul ul li.menuItemCurrent > a
{
	color: #1D76BC;
	font-weight: bold;
}
/* the items: bold; an item with a menu leaves room for its arrow, which sits clear of the text */
.navbarWrapper .menuWrapper:not(.menuCompact) .menuInner > li:not(.asButton):not(.menuItemOutline) > a
{
	font-weight: bold;
}
.navbarWrapper .menuWrapper:not(.menuCompact) .menuInner > li.menuHasChildren > a
{
	padding-inline-end: 36px;
}
.navbarWrapper .menuWrapper:not(.menuCompact) .menuInner > li.menuHasChildren > .menuItemArrow
{
	inset-inline-end: 14px;
}
.navbarWrapper li a
{
	color: #0F1F2E;
	/* font-weight: bold; */
	
}

.navbarMenu li > a span
{
	vertical-align: top;
}
.navbarMenu .menu_navbar > li > a
{
	/* border-bottom: 2px solid transparent; */
}
.navbarMenu .menu_navbar > li:hover > a
{
	/* border-bottom-color: #1D76BC; */
}
.navbarMenu li > a
{
	padding: 0px 18px;
}
.navbarMenu li:hover > a
{
	color: #1D76BC;
}
.navbarMenu ul ul li:hover > a
{
	/* the dropdown is white: a white default hover colour hid the text */
	color: #1D76BC;
}
.navbarWrapper ul > li:hover
{
	/* background: #ae0018; */
}

.navbarMenu ul li:hover > a
{
	
}
.navbarWrapper ul.menu_navbarInner > li:hover > a::after
{
	background: #1D76BC;
}
.navbarButtons
{
	float: left;
	padding-top: 28px;
}
.navbarButtons .button
{
	background-color: #FFF;
	color: #000;
	border-radius: 5px;
}

@media  (max-width:1024px){
	.navbarToScroll
	{
		font-size: 0.9rem;
		border-radius: 0px;
	}
	.navbarLogo
	{
		width: 120px;
	}
	.navbarMenu li > a
	{
		padding: 0px 9px;
	}
	.navbarMenu
	{
		padding-right: 140px;
		padding-left: 48px;
		padding-top: 6px;
		padding-bottom: 6px;
		line-height: 44px;
	}
	.navbarWrapper .navbarInner,
	.navbarToScroll.fixedNavbar .navbarInner
	{
		height: auto;
		min-height: 56px;
	}
	.navbarToScroll.fixedNavbar .navbarMenu
	{
		line-height: 44px;
	}
	.navbarWrapper
	{
		min-height: 0px;
	}
	.navbarWrapper .menuInner > li.searchIcon
	{
		position: absolute;
		left: 0px;
		top: 0px;
	}
}
@media  (max-width:850px){
	
   .navbarMenu ul.sf-menu > li > a
   {
       /* padding-right: 5px; */
   }
   
}

/* the navbar's mobile look follows its menu's mobile width (menuCompact: the menu's breakpoint, 675px unless set) */
.navbarWrapper:has(.menuCompact) .navbarInner
{
	padding: 0px;
}
.navbarWrapper:has(.menuCompact) .navbarInner,
.navbarWrapper:has(.menuCompact) .navbarToScroll.fixedNavbar .navbarInner
{
	height: auto;
}
.navbarWrapper:has(.menuCompact) .navbarToScroll.fixedNavbar .navbarMenu
{
	line-height: normal;
}
.navbarWrapper:has(.menuCompact) .menuInner > li.searchIcon
{
	float: none;
	position: static;
}
.navbarWrapper:has(.menuCompact) .navbarMenu li.searchIcon > ul
{
	width: 100%;
	position: static;
}
.navbarWrapper:has(.menuCompact) .navbarLogo
{
	width: 120px;
	float: inherit;
	text-align: center;
	margin: 0px auto;
	padding: 8px 0px;
	position: relative;
	top: auto;
	transform: none;
}
.navbarWrapper:has(.menuCompact) .navbarToScroll.fixedNavbar .navbarLogo
{
	width: 100px;
}
.navbarWrapper:has(.menuCompact) .navbarMenu
{
	margin: 0px;
	padding: 0px;
	line-height: normal;
	float: none;
	width: 100%;
}
/* a finger-sized target for opening a sub menu */
.menuWrapper.menuCompact .menuItemArrow_mobile
{
	width: 36px;
	height: 36px;
	line-height: 28px;
	text-align: center;
	border-radius: 50%;
	margin-top: 3px;
}
.navbarWrapper:has(.menuCompact) ul li > a
{
	border-top: 0px none;
	line-height: 40px;
}
.navbarWrapper:has(.menuCompact) li.navbarLang, .navbarWrapper:has(.menuCompact) li.searchIcon, .navbarWrapper:has(.menuCompact) li.socialItem
{
	text-align: center;
	float: right;
	line-height: 40px;
}
.navbarWrapper:has(.menuCompact) div.navbarMenu ul ul
{
	box-shadow: 0px 0px 0px;
	border: 0px none;
}
.navbarWrapper:has(.menuCompact) div.navbarMenu ul ul a
{
	line-height: 2.2rem;
}
.navbarWrapper:has(.menuCompact) div.navbarMenu ul ul li
{
	padding-right: 15px;
}
.navbarWrapper:has(.menuCompact) div.navbarMenu ul li:last-child
{
	border-bottom: 0px none;
}
.navbarWrapper:has(.menuCompact) .navbarMenu .menu_navbarInner
{
	padding-top: 20px;
	padding-bottom: 20px;
}
.navbarWrapper:has(.menuCompact) .navbarMenu .menuMobileToggler
{
	position: absolute;
	top: 12px;
	left: 0px;
	z-index: 120;
	color: #0F1F2E;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	font-size: 1.5rem;
	padding-left: 2px;
}
.navbarWrapper:has(.menuCompact) .fixedNavbar .navbarMenu .menuMobileToggler
{
	top: 6px;
}
/* an open menu in the fixed navbar scrolls inside the screen (a panel has its own height) */
.navbarWrapper:has(.menuCompact) .fixedNavbar .navbarMenu .menuWrapper:not(.menuPanel) .menuBody
{
	max-height: calc(100vh - 60px);
	max-height: calc(100dvh - 60px);
	overflow-y: auto;
	overscroll-behavior: contain;
}
@media  (max-width:675px){
	.aboveSocial
	{
		display: none;
	}
	.aboveText
	{
		float: none;
		text-align: center;
	}
}

/* an entry that wears a skin (the umbrellas in their dropdown: an article's own skin): a dot in the skin's accent */
.navbarMenu li[class*="skin-"] > a:before
{
	content: "";
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	margin-left: 10px;
	background: var(--skin-accent, currentColor);
}
/*ThemeVars*/

.footerWrapper .footerInner
{
	/* border-top: 1px solid #E6EBF0; */
	padding: 35px 0px 20px 0px;
}
.footerWrapper
{
    position: relative;
	/* border-top: 5px solid inherit; */
	background-color: #F3F7FA;
	background-image: none;
	background-size: 28px;
    font-size: 0.95rem;
	color: #6F7479;
	
    line-height: 1.6em;
	margin-top: 0px;
}
.footerWrapper .boxValue
{
    line-height: 1.6em;
}


.footerWrapper .box_structure_items_menu .boxValue
{
    line-height: 2.5em;
}
.footerWrapper .rowTemplateTitle a
{
	font-weight: normal;
}
.footerWrapper a
{
    
	color: #0F1F2E;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
	/* font-weight: bold; */
}
.footerWrapper a:hover
{
	color: #1D76BC;
}
.footerWrapper .menuWrapper.onlyDisplayItemsPhotos li
{
	display: inline-block;
	float: none;
	vertical-align: middle;
}
.footerWrapper .menuWrapper li a:hover
{
    /* background: #9db836; */
}



.footerWrapper input[type=text]
{
	width: 100%;
}



.footerWrapper .box_structure_info_icon_value .row
{
	padding: 6px 0px;
}


/* .footerWrapper .menu_socialWrapper a:hover */
/* { */
	/* color: #0F1F2E; */
/* } */
/* .footerWrapper .menu_socialWrapper li a */
/* { */
	/* color: #0F1F2E; */
/* } */

.footerWrapper .row.only_title .rowTemplateTitle
{
	line-height: 22px;
}
.footerWrapper .menuWrapper li
{
	line-height: 2.2em;
	float: none;
	display: block;
	margin: 0px;
}
.footerWrapper .menuWrapper:not(.onlyDisplayItemsPhotos) li > a:before
{
	content: "\203A";
	display: inline-block;
	margin-left: 8px;
	color: #1D76BC;
}
.footerWrapper .menu_socialWrapper ul.sf-menu > li
{
	display: inline-block;
	width: 34px;
	height: 34px;
	margin-left: 8px;
	background: #FFFFFF;
	border: 1px solid #E6EBF0;
	border-radius: 24px;
	vertical-align: middle;
}
.footerWrapper .menu_socialWrapper ul.sf-menu > li a,
.footerWrapper .menu_socialWrapper ul.sf-menu > li a:hover
{
	height: 34px;
	line-height: 34px;
	color: #0F1F2E;
}
.footerWrapper .menu_socialWrapper ul.sf-menu > li img,
.footerWrapper .menu_socialWrapper ul.sf-menu > li:hover img
{
	filter: brightness(0) invert(1);
}
.footerWrapper .menuWrapper img
{
	
}
.footerWrapper .boxValue .button
{
    background: #E7731E;
    color: #FFFFFF;
	border: 0px none;
}


.footerWrapper .box_structure_image
{
	/* text-align: center; */
}
.footerWrapper .box img
{
	max-height: 240px;
	width: auto;
    
}

.footerWrapper .infoIconValue_icon
{
	color: #0F1F2E;
}
.footerWrapper .infoIconValue_value,
.footerWrapper .infoIconValue_value a
{
	color: #0F1F2E;
}
.footerWrapper .box_structure_info_icon_value
{
	margin-bottom: 20px;
}
.footerWrapper .row.infoIconValueRow .infoIconValue_icon
{
	min-width: 26px;
}
.footerWrapper .row.infoIconValueRow .infoIconValue_icon span
{
	font-size: 1.1rem;
}
.footerWrapper .row.infoIconValueRow .infoIconValue_value
{
	margin-right: 8px;
	font-size: 0.95rem;
}
.footerWrapper .box_structure_header h1, .footerWrapper .box_structure_header h2, .footerWrapper .box_structure_header h3, .footerWrapper .box_structure_header h4, .footerWrapper .box_structure_header h5, .footerWrapper .box_structure_header h6
{
	font-size: 1.2rem;
	padding-bottom: 12px;
	border-bottom: 1px solid #E6EBF0;
}

.footerWrapper h1, .footerWrapper h2, .footerWrapper h3, .footerWrapper h4, .footerWrapper h5, .footerWrapper h6,
.footerWrapper .block-title h1, .footerWrapper .block-title h2, .footerWrapper .block-title h3, .footerWrapper .block-title h4, .footerWrapper .block-title h5, .footerWrapper .block-title h6
{
	color: #0F1F2E;
    font-weight: bold;
	margin: 0px;
}
.footerWrapper .block-title h1:before, .footerWrapper .block-title h2:before, .footerWrapper .block-title h3:before, .footerWrapper .block-title h4:before, .footerWrapper .block-title h5:before, .footerWrapper .block-title h6:before
{
	display: none;
}
.footerWrapper .boxTitle
{
    position: relative;
    margin-bottom: 25px;
}
.footerWrapper .box.box_structure_header
{
    padding-bottom: 20px;
}
.footerWrapper ul
{
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}
.footerWrapper .box_structure_mail_newsletter .formElement
{
	display: flex;
	flex-direction: column;
}
/* the button sits in the email field: the other rows (interests, consent, captcha) go under them */
.footerWrapper .box_structure_mail_newsletter .formElement > .row
{
	order: 3;
}
.footerWrapper .box_structure_mail_newsletter .formElement > .text-row
{
	order: 1;
}
.footerWrapper .box_structure_mail_newsletter .formElement > .submit-row
{
	order: 2;
}
.footerWrapper .box_structure_mail_newsletter .submit-row .column
{
    min-height: 0px;
} 
.footerWrapper .box_structure_mail_newsletter .formRow
{
	max-width: none;
	min-width: auto;
}
.footerWrapper .box_structure_mail_newsletter .submit-row 
{
    height: 0px;
    padding: 0px;
}
.footerWrapper .box_structure_mail_newsletter label
{
    color: #000;
    left: 15px;
    right: auto;
}
.footerWrapper .box_structure_mail_newsletter input[type=text]
{
    background: #FFF;
    color: #000;
    border: 0px none;
    box-shadow: 0px 0px 0px;
    height: 37px;
	/* border-radius: 15px; */
}
.footerWrapper .box_structure_mail_newsletter input[type=text]:focus
{
    box-shadow: 0px 0px 0px;
}
.footerWrapper .box_structure_mail_newsletter .inputWarning
{
    position: absolute;
    width: 100%;
    top: 35px;
}
.footerWrapper .box_structure_mail_newsletter .boxValue .button
{
    position: absolute;
    top: -47px;
    right: 10px;
    /* background: #92c540; */
    /* border-radius: 0px; */
    height: 31px;
    line-height: 1em;
    /* border-radius: 15px; */
    /* color: #fffacc; */
	padding: 0px 20px;
	max-width: 100px;
	border-radius: 4px;
	height: 37px;
}

.footerWrapper .box_structure_articles .only_title .rowTemplateTitle
{
    line-height: 22px;
	padding-top: 2px;
	padding-bottom: 2px;
    
    /* border-bottom: solid 1px rgba(255,255,255,0.1); */
}
.footerWrapper .box_structure_articles_search input[type=text]
{
    border-radius: 5px;
}
.footerWrapper .box_structure_articles_search .button
{
    position: absolute; 
    top: -33px;
    left: 0px;
    background: url('../images/search.png') no-repeat center center;
    background-size: 16px;
    border: 0px none;
    box-shadow: 0px 0px 0px none;
    font-size: 0px;
    
}
.footerWrapper .box_structure_articles_search .row
{
    padding: 0px;
	
}


.footerWrapper .box
{
	/* padding: 25px 15px; */
	/* border-left: 1px solid #3F3F43; */
}
.footerWrapper .box:last-child
{
	/* border-right: 1px solid #3F3F43; */
}
.footerWrapper ul
{
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}

.footerWrapper .block-title
{
	font-size: 1.2rem;
	line-height: 1.3rem;
	color: #0F1F2E;
	border-bottom: 1px solid #E6EBF0;
	padding-bottom: 12px;
	margin-bottom: 15px;
}
.footerWrapper .block-title h1, .footerWrapper .block-title h2, .footerWrapper .block-title h3, .footerWrapper .block-title h4, .footerWrapper .block-title h5, .footerWrapper .block-title h6
{
	font-size: 1.2rem;
}
.footerWrapper .footerInner
{
	position: relative;
}
.footerWrapper .scrollUpDiv
{
	cursor: pointer;
	line-height: 34px;
	height: 40px;
	width: 40px;
	background: #1D76BC;
	color: #FFFFFF;
	border-radius: 24px;
	text-align: center;
	font-size: 1.6rem;
	position: absolute;
	left: 0px;
	top: -45px;
	z-index: 11;
}
.footerNewsletterColumn .boxPositionRowColumnInner:after
{
	content: "";
	width: 55px;
	height: 55px;
	background: url(../images/newsletter_missile.png) center center no-repeat;
	background-size: contain;
	position: absolute;
	top: -15px;
	left: 0px;
}
.footerNewsletterColumn .boxPositionRowColumnInner .box_structure_text
{
	padding-left: 36px;
}
.footerNewsletterColumn .boxPositionRowColumnInner
{
	background-color: inherit;
	border-radius: 30px;
	padding: 20px 20px;
	position: relative;
}
@media  (max-width:1024px){
    .footerWrapper .box_structure_articles_search
    {
        width: 200px;
    }
}
@media  (max-width:850px){
    .footerWrapper .box_structure_articles_search
    {
        width: 100%;
        float: none;
        margin-top: 0px;
        margin-bottom: 10px;
    }
	.footerWrapper
	{
		text-align: center;
	}
	.footerWrapper .boxPositionRowColumn
	{
		width: 100%;
	}
	.footerWrapper .boxPositionRowContentInner
	{
		flex-direction: column;
		padding-right: 10px;
	}
}
@media  (max-width:850px){
    
    .footerWrapper .fourColumns > .column
       {
        width: 100%;
    }
    .footerWrapper .boxPositionRowColumn
       {
        /* text-align: center; */
        margin-bottom: 40px;
    }
    .footerWrapper .boxPositionRowColumn:last-child
       {
        margin-bottom: 0px;
    }
    .footerWrapper .boxTitle:after
       {
        left: 0px;
        right: 0px;
        margin: auto;
    }
    .footerWrapper .infoIconValue_value, .footerWrapper .infoIconValue_icon
	{
        text-align: right;
        display: inline-block;
        float: none;
        vertical-align: top;
        width: auto;
    }
	.row.infoIconValueRow
	{
		justify-content: center;
	}
    .footerWrapper .horizontalBoxPositionType .boxPositionRowColumn .box
    {
        padding-bottom: 20px;
    }
    .footerWrapper .menuWrapper.onlyDisplayItemsPhotos li
    {
        display: inline-block;
        float: none;
        vertical-align: top;
    }
    .footerWrapper .box_structure_mail_newsletter .inputWarning, .footerWrapper .box_structure_mail_newsletter .button
    {
        position: relative;
        width: 100%;
        top: 0px;
        left: 0px;
        right: 0px;
		max-width: 100%;
    }
    

}

/* the leaders' footer: the links in two columns without bullets or dividers, the tagline with the social marks in circles
   (40px: the four fit their column on one row) */
.footerWrapper .box_structure_menu ul.menuInner
{
	column-count: 2;
	column-gap: 40px;
	border-bottom: 0px none;
	padding-bottom: 0px;
	margin-bottom: 0px;
}
.footerWrapper .box_structure_menu ul.menuInner > li
{
	break-inside: avoid;
}
.footerWrapper .menuWrapper:not(.onlyDisplayItemsPhotos) li > a:before
{
	display: none;
}
.footerWrapper .menuWrapper li > a
{
	font-weight: bold;
}
.footerWrapper .box_structure_header h1, .footerWrapper .box_structure_header h2, .footerWrapper .box_structure_header h3, .footerWrapper .box_structure_header h4, .footerWrapper .box_structure_header h5, .footerWrapper .box_structure_header h6
{
	border-bottom: 0px none;
	padding-bottom: 0px;
}
.footerWrapper .box.box_structure_header
{
	padding-bottom: 14px;
}
.footerWrapper .box_structure_social_follow .boxItems
{
	column-gap: 12px;
}
.footerWrapper .box_structure_social_follow .socialItem.socialMono .itemMedia
{
	width: 40px;
	height: 40px;
	background: #FFFFFF;
	border: 1px solid #E6EBF0;
	color: #0F1F2E;
}
/* a phone: the stacked columns and the logo closer, as the design's short footer (the links keep their 44px touch height) */
@media (max-width: 675px)
{
	.footerWrapper .boxPositionRowContentInner
	{
		gap: 16px;
	}
	.footerWrapper .boxPositionRowColumn
	{
		margin-bottom: 0px;
	}
	.footerWrapper .boxPositionRowColumn .box
	{
		padding-bottom: 8px;
	}
	.footerWrapper .box_structure_image img
	{
		max-height: 72px;
		width: auto;
	}
}
/*ThemeVars*/
/* ==========================================================================
	The image and video boxes (classes/boxes/image.php, video.php, _media.php) and the text with more
	(popup_text.php). An image box's sizes are custom properties on .imageBox: --img-max(-t, -m) (natural size: its max
	width per device), --img-height(-t, -m) (a height per device), --img-ratio (width / height), --img-fit (cover,
	contain) and --img-focus (the focal point: what a crop keeps).
   ========================================================================== */
.imageBox .imageLook
{
	margin: 0px;
}
.imageBox .imageMedia
{
	display: block;
	position: relative;
	overflow: hidden;
}
.imageBox .imageMedia img
{
	display: block;
	max-width: 100%;
	height: auto;
}
.imageBox .imageMediaLink
{
	display: block;
	position: relative;
	color: inherit;
}
/* natural: as wide as the picture, at most its max width, aligned */
.imageBox.mode_natural .imageLook
{
	width: fit-content;
	max-width: min(100%, var(--img-max, 100%));
}
.imageBox.mode_natural.align_center .imageLook { margin-inline: auto; }
.imageBox.mode_natural.align_end .imageLook { margin-inline-start: auto; }
@media (max-width: 1024px)
{
	.imageBox.mode_natural .imageLook { max-width: min(100%, var(--img-max-t, var(--img-max, 100%))); }
	.imageBox.mode_height .imageMedia img { height: var(--img-height-t, var(--img-height, 360px)); }
}
@media (max-width: 675px)
{
	.imageBox.mode_natural .imageLook { max-width: min(100%, var(--img-max-m, var(--img-max-t, var(--img-max, 100%)))); }
	.imageBox.mode_height .imageMedia img { height: var(--img-height-m, var(--img-height-t, var(--img-height, 360px))); }
}
/* fill, ratio, height: as wide as the column; a ratio or a height cropped around the focal point */
.imageBox:is(.mode_fill, .mode_ratio, .mode_height) .imageMedia img
{
	width: 100%;
}
.imageBox.mode_ratio .imageMedia img
{
	aspect-ratio: var(--img-ratio, 1.6);
	height: auto;
	object-fit: var(--img-fit, cover);
	object-position: var(--img-focus, 50% 50%);
}
.imageBox.mode_ratio.is-round .imageMedia
{
	border-radius: 50%;
}
.imageBox.mode_height .imageMedia img
{
	height: var(--img-height, 360px);
	object-fit: var(--img-fit, cover);
	object-position: var(--img-focus, 50% 50%);
}
/* hover: zoom, or from grey to colour */
.imageBox .look-hover-zoom .imageMedia img,
.imageBox .look-hover-grayscale .imageMedia img
{
	transition: transform 0.5s ease, filter 0.5s ease;
}
.imageBox .look-hover-zoom:hover .imageMedia img
{
	transform: scale(1.06);
}
.imageBox .look-hover-grayscale .imageMedia img
{
	filter: grayscale(1);
}
.imageBox .look-hover-grayscale:hover .imageMedia img
{
	filter: none;
}
@media (hover: none)
{
	.imageBox .look-hover-grayscale .imageMedia img { filter: none; }
}
@media (prefers-reduced-motion: reduce)
{
	.imageBox .imageMedia img { transition: none !important; }
}
/* the round play button (a video behind a picture, the video box's poster and button) */
.mediaPlay
{
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: var(--media-play-size, 68px);
	height: var(--media-play-size, 68px);
	margin: calc(var(--media-play-size, 68px) / -2) 0px 0px calc(var(--media-play-size, 68px) / -2);
	border-radius: 50%;
	background: var(--skin-accent, #1D76BC);
	color: var(--skin-accent-text, #fff);
	font-size: calc(var(--media-play-size, 68px) * 0.34);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
	transition: transform 0.25s ease;
}
.mediaPlay .icon-play
{
	margin-inline-start: 0.12em;
}
:dir(rtl) .mediaPlay .icon-play
{
	margin-inline-start: 0px;
	margin-inline-end: 0.12em;
}
a:hover > .mediaPlay, button:hover > .mediaPlay
{
	transform: scale(1.08);
}
.mediaPlay.is-pulsing::before
{
	content: "";
	position: absolute;
	inset: 0px;
	border-radius: 50%;
	border: 2px solid var(--skin-accent, #1D76BC);
	animation: mediaPulse 2s ease-out infinite;
}
@keyframes mediaPulse
{
	from { transform: scale(1); opacity: 0.8; }
	to { transform: scale(1.7); opacity: 0; }
}
@media (prefers-reduced-motion: reduce)
{
	.mediaPlay.is-pulsing::before { animation: none; }
}
/* the video box (classes/boxes/video.php): a frame of its ratio (--video-ratio) for the player, the poster and its
   button, the play button alone, the background */
.videoBox .videoPlayerFrame,
.videoBox .videoPosterButton
{
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: var(--video-ratio, 16 / 9);
	overflow: hidden;
	background: #000;
}
.videoBox.is-rounded :is(.videoPlayerFrame, .videoPosterButton)
{
	border-radius: var(--card-radius, 24px);
}
.videoBox .videoPlayerFrame .mediaPlayer
{
	position: absolute;
	inset: 0px;
	width: 100%;
	height: 100%;
	border: 0px;
}
.videoBox video.mediaPlayer
{
	object-fit: contain;
}
.videoBox .videoPosterButton
{
	padding: 0px;
	border: 0px;
	cursor: pointer;
}
.videoBox .videoPoster
{
	position: absolute;
	inset: 0px;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.videoBox .videoPlayButton
{
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 0px;
	border: 0px;
	background: none;
	color: inherit;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}
.videoBox .videoPlayButton .mediaPlay
{
	position: relative;
	top: auto;
	left: auto;
	margin: 0px;
}
.videoBox.display_background video.mediaPlayer
{
	object-fit: cover;
	pointer-events: none;
}
.videoBox.display_background iframe.mediaPlayer
{
	pointer-events: none;
	transform: scale(1.2);
}
/* a dialog's picture keeps its shape (the media dialog gives its pictures 16:9, styles/basic/dialog.css) */
.kDlg .kDlgBody img.mediaDialogImage
{
	width: auto;
	max-width: 100%;
	max-height: 82vh;
	aspect-ratio: auto;
	margin: 0px auto;
}
/*ThemeVars*/
.copyRightsWrapper li a
{
	padding: 0px 14px;
}
.copyRightsWrapper a
{
	
	color: #6F7479;
}
.copyRightsWrapper a:hover
{
	color: #1D76BC;
}
.copyRightsWrapper .copyRightsInner.clearfix
{
    line-height: 30px;
    padding: 14px 0px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 20px;
}
.copyRightsWrapper .copyRightsInner.clearfix:after
{
	display: none;
}
.copyRights
{
	border-top: 1px solid #E6EBF0;
}
.copyRightsWrapper
{
	overflow: hidden;
	font-size: 0.95rem;
	background-color: #F3F7FA;
	color: #6F7479;
	
}
.copyRightsWrapper .footerMenu
{
	float: none;
	font-size: 0.9rem;
}
.copyRightsWrapper .footerMenu li + li
{
	border-right: 1px solid #E6EBF0;
}
.copyRightsWrapper .footerMenu:not(:has(li))
{
	display: none;
}
.copyRightsWrapper .copyRightsText
{
	text-align: left;
}
.copyRightsWrapper .footerMenu .onlyDisplayItemsPhotos span
{
	font-size: 1.1rem;
	color: #6F7479 !important;
}
.copyRightsWrapper .footerMenu ul
{
	margin: 0px;
	padding: 0px;
}
.copyRightsWrapper .footerMenu li
{
	float: none;
	display: inline-block;
	vertical-align: middle;
	font-size: 1rem;
	line-height: 30px;
}
@media  (max-width:675px){
    .copyRightsWrapper .copyRightsInner.clearfix
	{
		justify-content: center;
	}
    .copyRightsWrapper .footerMenu, .copyRightsWrapper .copyRightsText
	{
		float: none;
		text-align: center;
	}
    
}