:root {
	--is_small_screen:0;
	--skewfactor:(1 / 3);
	--blockmark-height:108px;
	--blockmark-half-height:calc(var(--blockmark-height) / 2);
	--blockmark-width:370px;
	--dates-height:60px;
	--dates-buttons-width:30px;
	--report-width:370px;
	--reportswitch-height:40px;
	--boatclasslist-line-height:30px;
	--reportline-height:75px;
	--reportline-reduced-height:40px;
	--reportline-dashboard-height:24px;
	--panelslider-width:37px;
	--panelslider-height:37px;
	--time-height:54px;
	--timekeeper-height:var(--time-height);
	--timeline-height:var(--time-height);
	--vr-height:var(--blockmark-half-height);
	--vr-width:87px;
	--display-button-size:51px;
	--tools-width:36px;
}
	
/*### BODY ###*/
@media screen	{
	html, body {
	height:100%;
	width:100%;
	box-sizing:border-box;
	overflow:hidden;
	
}
	body {
	touch-action:pan-x pan-y;
	display:flex;
	flex-direction:column;
}
	body, * {
	font-family:ptsans;
	font-size:14px;
}
	body.OFF {
	visibility:hidden !important;
}
	strong {
	font-weight:bold;
}
	
	body.FULLSCREEN {
	padding-bottom:0;
}
	body * {
	-webkit-user-select:none; /* Chrome, Safari, Opéra depuis la version 15 */
	-moz-user-select:none; /* Firefox */
	-ms-user-select:none; /* Internet explorer depuis la version 10 et Edge */
	user-select:none; /* Propriété standard */
}
	body input,
	body textarea{
	-webkit-user-select:auto; /* Chrome, Safari, Opéra depuis la version 15 */
	-moz-user-select:auto; /* Firefox */
	-ms-user-select:auto; /* Internet explorer depuis la version 10 et Edge */
	user-select:auto; /* Propriété standard */
}
.tip {
	position:absolute;
	display:none;
	padding:3px 5px;
	font-family:monospace;
	font-size:11px;
	white-space:nowrap;
	pointer-events:none;
	text-shadow:black 0.1em 0.1em 0.1em, black 0.1em 0.1em 0.1em,	black 0.1em 0.1em 0.1em, black 0.1em 0.1em 0.1em;
}
.tip.on {
	display:block;
}
	img.imglink {
	cursor:pointer;
}
#translations {
	display:none !important;
}
	header {
	flex:none;
}
	header:empty {
	display:none;
}
	main {
	flex:auto;
	display:flex;
	flex-direction:row;
}
	aside {
	flex:none;
}
	aside:empty {
	display:none;
}
	footer {
	flex:none;
}
	footer:empty {
	display:none;
}
#viewer {
	flex:auto;
	position:relative;
}
	
.onoff {
	--height:16px;
	--pad:2px;
	position:relative;
	display:inline-block;
	height:var(--height);
	width:calc(var(--height) * 1.5 + var(--pad));
	cursor:pointer;
}
.onoff:before {
	content:'';
	position:absolute;
	display:block;
	top:0;
	right:0;
	width:100%;
	height:var(--height);
	border-radius:calc(var(--height) / 2);
	transition:0.2s;
	box-sizing:border-box;
	border:1px solid transparent;
}
.onoff:after {
	--size:calc(var(--height) - var(--pad) * 2);
	content:'';
	position:absolute;
	display:block;
	top:var(--pad);
	left:var(--pad);
	width:var(--size);
	height:var(--size);
	border-radius:50%;
	transition:0.2s;
}
.onoff.on:before {
	transition:0.2s;
}
.onoff.on:after {
	left:calc(100% - var(--size) - var(--pad));
	transition:0.2s;
}
	
.nat.FRA:before {
	background-image:url('assets/img/flag_fr.svg');
}
.nat.CZE:before {
	background-image:url('assets/img/flag_cz.png');
}
.nat.ESP:before {
	background-image:url('assets/img/flag_es.svg');
}
.nat.BEL:before {
	background-image:url('assets/img/flag_be.svg');
}
.nat.GBR:before {
	background-image:url('assets/img/flag_en.svg');
}
.nat.GER:before {
	background-image:url('assets/img/flag_de.svg');
}
.nat.GRE:before {
	background-image:url('assets/img/flag_gc.png');
}
.nat.ITA:before {
	background-image:url('assets/img/flag_it.svg');
}
.nat.JPN:before {
	background-image:url('assets/img/flag_jp.svg');
}
.nat.POL:before {
	background-image:url('assets/img/flag_po.png');
}
.nat.RUS:before {
	background-image:url('assets/img/flag_ru.gif');
}
.nat.SUI:before {
	background-image:url('assets/img/flag_ch.svg');
}
.nat.UAE:before {
	background-image:url('assets/img/flag_uae.png');
}
.nat.IRL:before {
	background-image:url('assets/img/flag_ie.png');
}
.nat.AUS:before {
	background-image:url('assets/img/flag_au.png');
}
.nat.URY:before {
	background-image:url('assets/img/flag_uy.png');
}
.nat.USA:before {
	background-image:url('assets/img/flag_us.svg');
}
.nat.AUT:before {
	background-image:url('assets/img/flag_at.svg');
}
.nat.SLO:before {
	background-image:url('assets/img/flag_si.svg');
}
.nat.MAR:before {
	background-image:url('assets/img/flag_ma.svg');
}
.nat.SWE:before {
	background-image:url('assets/img/flag_se.svg');
}
.nat.CAN:before {
	background-image:url('assets/img/flag_ca.svg');
}
.nat.NED:before {
	background-image:url('assets/img/flag_nl.svg');
}
.nat.BRA:before {
	background-image:url('assets/img/flag_br.gif');
}
.nat.URU:before {
	background-image:url('assets/img/flag_uy.svg');
}
.nat.ARG:before {
	background-image:url('assets/img/flag_ar.svg');
}
.nat.SA:before {
	background-image:url('assets/img/flag_sa.svg');
}
.nat.VEN:before {
	background-image:url('assets/img/flag_ve.svg');
}
.nat.LUX:before {
	background-image:url('assets/img/flag_lu.svg');
}
.nat.CHN:before {
	background-image:url('assets/img/flag_cn.svg');
}
.nat.HUN:before {
	background-image:url('assets/img/flag_hu.svg');
}
.nat.NZL:before {
	background-image:url('assets/img/flag_nz.svg');
	background-size:cover !important;
}
	
.photos img {
	width:60px;
	aspect-ratio:1;
}
.photos.byside {
	display:flex;
	flex-wrap:nowrap;
}
.photos.flip {
	width:60px;
}
.photos.flip .img {
	position:absolute;
	width:100%;
	height:100%;
	display:flex;
	justify-content:center;
	overflow:hidden;
}
}
	
	
/*### ICON BUTTON ###*/
@media screen	{
.iconbutton {
	position:relative;
	width:38px;
	height:38px;
	box-sizing:border-box;
	cursor:pointer;
}
.iconbutton.disabled {
	opacity:0.3;
	cursor:default;
}
.iconbutton .icon {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	display:flex;
	justify-content:center;
	align-items:center;
	pointer-events:none;
}
.iconbutton .icon svg {
	width:26px;
	height:26px;
}
.iconbutton svg:empty {
	display:none;
}
.iconbutton:before {
	display:none;
	content:attr(legend);
	position:absolute;
	top:0;
	right:100%;
	font-size:16px;
	line-height:26px;
	box-sizing:border-box;
	padding:0 10px;
	white-space:nowrap;
}
.iconbutton.over:before {
	display:block !important;
}
}
	
	
/*### BLOCKMARK ###*/
@media screen	{
#blockmark {
	--skewval:calc(var(--blockmark-height) * var(--skewfactor));
	position:absolute;
	top:0;
	left:0;
	width:var(--blockmark-width);
	display:flex;
	flex-direction:row;
	align-items:center;
	justify-content:center;
	overflow:visible;
	height:var(--blockmark-height);
	padding-right:var(--skewval);
	clip-path: polygon(0 0, 100% 0, calc(100% - var(--skewval)) 100%, 0 100%);
}
#logo {
	display:block;
	height:calc(100% - 10px);
	margin:auto;
}
}
	
	
/*### CAROUSEL ###*/
@media screen	{
#carousel {
	position:relative;
	margin:auto;
	height:100%;
	width:50%;
}
#carousel>* {
	display:none;
}
#carousel>.on {
	display:block;
}
#carousel a {
	position:absolute;
	display:none;
	top:0;
	bottom:0;
	width:100%;
	height:100%;
	background-size:contain;
	background-position:center center;
	background-repeat:no-repeat;
}
#carousel a.on {
	display:block;
}
}
	
	
/*### SUBTITLE ###*/
@media screen	{
#subtitle {
	--height:var(--blockmark-half-height);
	--skewval:calc(var(--height) * var(--skewfactor));
	position:absolute;
	left:var(--blockmark-width);
	top:0px;
	height:var(--height);
	padding:0 calc(var(--skewval) + 1em) 0 calc(var(--skewval) * 2 + 1em);
	white-space:nowrap;
	font-size:32px;
	line-height:var(--height);
	font-family:haettenschweiler;
	text-transform:uppercase;
	clip-path: polygon(0 0, 100% 0, calc(100% - var(--skewval)) 100%, 0 100%);
}
#subtitle:empty {
	display:none;
}
}
	
	
/*### VR ###*/
@media screen	{
#vr {
	--skewval:calc(var(--vr-height) * var(--skewfactor));
	position:absolute;
	top:var(--vr-height);
	left:var(--blockmark-width);
	width:var(--vr-width);
	height:var(--vr-height);
	padding:0 0 0 calc(var(--skewval) * 2);
	clip-path: polygon(0 0, 100% 0, calc(100% - var(--skewval)) 100%, 0 100%);
}
#vr:empty {
	display:none;
}
#subtitle:empty+#vr {
	top:0;
}
#vr a {
	display:flex;
	justify-content:center;
	align-items:center;
	width:calc(100% - var(--skewval));
	height:100%;
}
#vr svg {
	width:100%;
	height:100%;
	max-width:100%;
	max-height:100%;
}
#vrLayer .vrboat {
	display:none;
}
#vrLayer.on .vrboat {
	display:inherit;
}
#vrLayer .vrboat path {
	fill:#DC076B;
	stroke:#FFFFFF;
}
#vrLayer .vrboat text {
	fill:#FFFFFF;
	stroke:none;
}
	
}
	
	
/*### NAV ###*/
@media screen	{
#nav	{
	--size:var(--blockmark-half-height);
	--skewval:calc(var(--size) * var(--skewfactor));
	position:absolute;
	right:0px;
	top:0;
	height:var(--size);
	white-space:nowrap;
	font-size:0;
}
#nav .content {
	padding-right:var(--size);
	text-align:right;
}
	
#nav article {
	text-align:left;
}
#nav .buttons {
	position:absolute;
	top:0px;
	right:0px;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:0 0 0 var(--skewval);
	clip-path: polygon(var(--skewval) 0, 100% 0, 100% 100%, 0 100%);
}
#nav .burger,
#nav .cross {
	position:relative;
	height:var(--size);
	width:var(--size);
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center;
}
#nav.on .burger {
	display:none;
}
	
#nav .burger .line {
	position:relative;
	display:inline-block;
	width:21px;
	height:3px;
	margin-top:-2px;
	box-sizing:border-box;
}
#nav .burger .line:before {
	content:'';
	position:absolute;
	top:-7px;
	display:block;
	width:21px;
	height:3px;
}
#nav .burger .line:after {
	content:'';
	position:absolute;
	bottom:-7px;
	display:block;
	width:21px;
	height:3px;
}
#nav .cross {
	display:none;
}
#nav.on .cross {
	display:flex;
}
#nav .cross .line {
	position:relative;
	display:inline-block;
	width:21px;
	height:3px;
	margin-top:-2px;
	box-sizing:border-box;
	transform:rotate(45deg);
}
#nav .cross .line:before {
	content:'';
	top:0;
	position:absolute;
	display:block;
	width:21px;
	height:3px;
	transform:rotate(90deg);
}
	
#nav a {
	display:none;
	flex-direction:column;
	justify-content:center;
	position:relative;
	height:var(--size);
	font-size:26px;
	font-family:haettenschweiler;
	text-align:left;
	padding:0 calc(var(--skewval) + 15px) 0 calc(var(--skewval) + 15px);
	clip-path: polygon(var(--skewval) 0, 100% 0, 100% 100%, 0 100%);
	margin-right:calc(0px - var(--skewval));
}
#nav.on a,
#nav a.on {
	display:inline-flex;
}
#nav a.on {
	margin-right:0;
}
#nav.on a.on {
	margin-right:calc(0px - var(--skewval));
}
#nav.on a:last-of-type {
	margin-right:0;
}
#nav a sup,
#nav a sub {
	display:block;
	white-space:nowrap;
	line-height:1;
}
#nav a sup {
	line-height:0.8;
}
#nav a sub {
	font-size:16px;
}
	
#nav.onLeft {
	right:auto;
	left:0;
}
#nav.onLeft.on {
	right:0;
	left:0;
}
#nav.onLeft .buttons {
	right:auto;
	left:5px;
}
}
	
	
/*### DATES ###*/
@media screen	{
#dates {
	position:absolute;
	top:var(--blockmark-height);
	height:var(--dates-height);
	width:var(--report-width);
	box-sizing:border-box;
	left:0;
	display:flex;
	flex-direction:column;
	justify-content:center;
}
#dates .group {
	display:flex;
	align-items:center;
	flex:auto;
}
#dates .group.report {
	flex-direction:column;
	justify-content:center;
}
#dates .group.splittimes {
	display:none;
	flex-direction:row;
	justify-content:space-between;
}
#dates .group.splittimes .prev,
#dates .group.splittimes .next {
	display:flex;
	justify-content:center;
	align-items:center;
	height:28px;
	aspect-ratio:1;
	cursor:pointer;
}
#dates .group.splittimes .prev.off,
#dates .group.splittimes .next.off {
	visibility:hidden;
}
#dates .group.splittimes svg {
	height:14px;
	aspect-ratio:1;
}
#dates .group.splittimes .next svg {
	transform:rotate(180deg);
}
#dates .group.splittimes article {
	font-size: 16px;
  font-weight:bold;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
}

#startdate,
#reportdate {
	display:none;
	font-size:16px;
	font-weight:bold;
	text-align:center;
	line-height:18px;
}
#startdate .standby,
#startdate .convoy {
	display:none;
}
#frequency {
	display:none;
	font-size:12px;
	text-align:center;
}
#frequency .hours i {
	display:inline-block;
	margin:0 3px;
}
#frequency .hours i.on {
	font-weight:bold;
}
#frequency .hours i:before {
	content:'• ';
}
#frequency .hours i.on:before {
	font-weight:normal;
}
#frequency .hours i:first-of-type:before {
	content:'';
}

#dates .buttons {
	--skewval:calc(var(--dates-buttons-width) * var(--skewfactor));
	position:absolute;
	top:0;
	bottom:0;
	width:var(--dates-buttons-width);
	right:0;
	transform:translateX(100%);
	display:flex;
	justify-content:center;
	align-items:center;
	padding-right:var(--skewval);
	clip-path: polygon(0 0, 100% 0, calc(100% - var(--skewval)) 100%, 0 100%);
	cursor:pointer;
}	
#dates .button {
	display:flex;
	height:100%;
	width:100%;
	justify-content:center;
	align-items:center;
}	
#dates .button svg {
	width:20px;
	aspect-ratio:1;
}	
#dates .button.report {
	display:none;
}
body.SPLITTIME_OFF #dates .buttons {
	display:none;
}
body.STANDBY #startdate,
body.STANDBY #startdate .standby,
body.CONVOY #startdate,
body.CONVOY #startdate .convoy,
body.PRERACE #startdate,
body.STARTED #startdate {
	display:block;
}
body.RUNNING #reportdate,
body.FINISH #reportdate {
	display:block;
}
body.RUNNING #frequency {
	display:block;
}
body.RUNNING #frequency {
	display:block;
}
body.SPLITTIMES #dates .group.report,
body.SPLITTIMES #dates .button.splittimes {
	display:none;
}
body.SPLITTIMES #dates .button.report {
	display:flex;
}
body.SPLITTIMES #dates .group.splittimes {
	display:flex;
}
}
	
	
/*### DISPLAY ###*/
@media screen	{
#display {
	position:absolute;
	right:0;
	bottom:var(--time-height);
	display:flex;
	align-items:flex-end;
}
#display.on {
	top:0px;
	pointer-events:none;
}
	body.MULTILEGS #display.on {
	top:var(--blockmark-half-height);
}
#display.on * {
	pointer-events:auto;
}
	
#display .detect {
	display:none;
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
}
#display>.button {
	--skewval:calc(var(--display-button-size) * var(--skewfactor));
	display:flex;
	align-items:center;
	justify-content:center;
	position:absolute;
	width:var(--display-button-size);
	height:var(--display-button-size);
	bottom:0;
	right:0;
	cursor:pointer;
	padding-left:var(--skewval);
	clip-path:polygon(var(--skewval) 0, 100% 0, 100% 100%, 0 100%);
}
#display>.button *{
	pointer-events:none;
}
#display>.button svg {
	width:26px;
	height:26px;
	pointer-events:none;
}
#display>.button .close {
	display:none;
}
#display.on>.button .open {
	display:none;
}
#display.on>.button .close {
	display:block;
}
#display .content {
	display:none;
	box-sizing:border-box;
	max-height:100%;
	padding:10px 5px 65px 10px;
	text-align:left;
	overflow:auto;
	-webkit-backdrop-filter:blur(6px);
	backdrop-filter:blur(6px);
	scrollbar-width:none;
}
#display .content::-webkit-scrollbar {
	width:0px;
}
	
#display.on .detect {
	display:block;
	z-index:1000;
}
#display.on .content {
	display:block;
	z-index:1001;
}
#display.on>.button {
	display:none;
}
	body.TOUCHSCREEN #display.on>.button {
	display:flex;
	z-index:1002;
}
#display.on .preferences {
	z-index:1003;
}
#display .group {
	display:block;
	font-size:14px;
	text-align:left;
}
#display .group>label {
	display:block;
	position:relative;
	margin:7px 0 5px 5px;
	font-size:18px;
	font-family:haettenschweiler;
	overflow:hidden;
}
#display .group>label>span {
	display:inline-block;
	position:relative;
}
#display .group>label span:after {
	content:'';
	position:absolute;
	top:65%;
	display:block;
	width:100vw;
	height:1px;
	opacity:1;
	right:-10px;
	transform:translateX(100%);
}
#display .content .button {
	position:relative;
	display:block;
	width:100%;
	box-sizing:border-box;
	text-align:left;
	line-height:40px;
	padding:0 5px;
}
#display .content .button label {
	display:inline-block;
	font-size:14px;
	vertical-align:middle;
	text-align:left;
	width:130px;
	padding-right:5px;
}
#display .content .button .iconbutton {
	display:inline-block;
	vertical-align:middle;
}
#display .content .button .iconbutton .icon {
	border-radius:5px;
}
	
#display .preferences {
	--margin:0px;
	--height:calc(var(--display-button-size) - var(--margin) * 2);
	--skewval:calc(var(--height) * var(--skewfactor));
	display:none;
	position:absolute;
	left:var(--margin);
	right:var(--margin);
	bottom:var(--margin);
	height:var(--height);
	padding-right:5px;
	font-size:smaller;
	text-align:center;
	align-items:center;
	box-sizing:border-box;
}
#display.on .preferences {
	display:flex;
}
#display.on .preferences br {
	display:none;
}
	body.TOUCHSCREEN #display.on .preferences {
	--margin:3px;
	clip-path:polygon(0 0, 100% 0, calc(100% - var(--skewval)) 100%, 0 100%);
	right:auto;
	width:calc(100% - var(--display-button-size) - var(--margin) * 3);
	padding-right:calc(var(--skewval) + 5px);
}
	body.TOUCHSCREEN #display.on .preferences br {
	display:block;
}
	
#display .preferences label {
	display:block;
	text-align:right;
	padding-right:7px;
	line-height:1.2;
	flex:auto;
}
#display .preferences .onoff {
	display:block;
}
	
	
#display.keep .content {
	display:block;
	overflow:hidden;
	padding:6px 70px 6px 6px;
	background-color:transparent;
}
#display.keep .content .group,
#display.keep .content .button {
	display:none;
}
#display.keep .content .kept label {
	display:none;
}
#display.keep .content .group.kept {
	display:inline-block;
	height:38px;
}
#display.keep .content .button.kept {
	display:inline-block;
	width:38px;
	margin:0px 4px 0 0;
}
#display.keep .preferences {
	display:none;
}
	
	
	body.EARTH #bt_tiledmap {
	opacity:0.3;
	cursor:default;
	pointer-events:none;
}
	
#gamebuttons {
/*display:none;*/
}
}
	
	
/*### REPORT ###*/
@media screen	{
#report {
	position:absolute;
	left:0px;
	top:calc(var(--blockmark-height) + var(--dates-height));
	bottom:var(--time-height);
	width:var(--report-width);
	box-sizing:border-box;
	display:flex;
	flex-direction:column;
}
	
body.FULLSCREEN #report,
body.FULLSCREEN.RACE.MULTICLASS #report {
top:0;
}
body.RECORD #report,
body.TRACKING #report {
	display:none;
}
body.RACE.MONOCLASS,
body.RECORD {
	--boatclasslist-line-height:0px;
}	

#reportswitch {
  --skewval:calc(var(--reportswitch-height) * var(--skewfactor));
	box-sizing:border-box;
	display:flex;
	justify-content:space-between;
	border-top:1px solid;
}
#reportswitch .button {
	position:relative;
	display:flex;
	flex-direction:column;
	justify-content:flex-start;
	align-items:center;
	height:var(--reportswitch-height);
	cursor:pointer;
	opacity:0.5;
}
#reportswitch .button .icon {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	height:100%;
	aspect-ratio:1;
}
#reportswitch .button .icon svg {
	width:20px;
	aspect-ratio:1;
}
#reportswitch .button:first-child {
	margin-bottom:var(--button-margin);
}
#reportswitch .button.on {
	opacity:1;
}
#reportswitch .button.off {
	visibility:hidden;
}
#reportswitch .button[rel='floating'],
#reportswitch .button.fav {
	flex:1;
	max-width:36px;
}
#reportswitch .button.fav {
	fill-opacity:0.2;
	margin-left:4px;
}
#reportswitch .button.fav.on {
	fill-opacity:1;
}
body.TOUCHSCREEN #reportswitch .button[rel='floating'] {
	display:none;
}
body.TOUCHSCREEN #reportswitch .button[rel='none'] {
	display:flex;
}
body.NOFAVORITES #reportswitch .button.fav {
	display:none !important;
}

#boatclasseslist {
	border:0px;
	position:relative;
	display:flex;
}
#boatclasseslist div {
	position:relative;
	flex:auto;
	font-size:21px;
	line-height:var(--boatclasslist-line-height);
	box-sizing:border-box;
	text-align:center;
	cursor:pointer;
}
#boatclasseslist>div input.mode_video {
	display:none;
	position:absolute;
	top:3px;
	right:3px;
}
#boatclasseslist>div.on input.mode_video {
	display:block;
}
body.RACE.MONOCLASS #boatclasseslist,
body.RECORD #boatclasseslist {
display:none;
}
body.RACE.MONOCLASS #boatclasseslist>div {
font-size:0;
height:0;
line-height:0;
}
body.RACE.MULTICLASSFAKE #boatclasseslist>div {
display:none;
}
body.RACE.MULTICLASSFAKE #boatclasseslist>div.on {
display:block;
width:100% !important;
}

#reportlist {
	overflow:auto;
	flex:auto;
	scrollbar-width:none;
}
#reportlist::-webkit-scrollbar {
	width:0px;
}
#reportlist>.details {
	display:none;
}
#reportlist .row {
	position:relative;
	display:grid;
  grid-template-columns:auto auto 1fr;
  grid-template-rows:22px 18px 35px;
	box-sizing:border-box;
	height:var(--reportline-height);
	border-style:solid;
	border-width:0 0px 1px 0px;
	overflow:hidden;
	cursor:pointer;
}
body.REPORT_OFF #reportlist .row>* {
	visibility:hidden;
}
body.SPLITTIMES #reportlist .row.nosplittime {
	display:none;
}
#reportlist .row.nophoto {
  grid-template-columns:auto 0 1fr;
}
#reportlist .row.ghost {
	display:none !important; 
}
#reportlist .row.hidden {
	display:none !important; 
}
#reportlist .row .rank {
	grid-column: 1 / 2;
	grid-row:1 / 4;
	position:relative;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	width:30px;
	margin:0 5px 0 0;
	font-size:21px;
	font-weight:bold;
	box-sizing:border-box;
}
#reportlist .row .rank:after {
	position:absolute;
	top:50%;
	left:50%;
	font-size:12px;
}
body.SPLITTIMES #reportlist .row .rank:after {
	display:none;
}
#reportlist .row .rank.up:after {
	content:'▲';
	transform:translate(-50%, -26px);
}
#reportlist .row .rank.down:after {
	content:'▼';
	transform:translate(-50%, 10px);
}
#reportlist .row .icon {
	display:none;
	grid-column: 2 / 3;
	grid-row:1 / 4;
	height:100%;
	justify-content:center;
	align-items:center;
}
#reportlist .row .icon svg {
	height:26px;
}
#reportlist .row .icon svg path.c1 {
	stroke-width:0.4px;
	stroke:rgba(0,0,0,0.5);
}
#reportlist .row .photos {
	grid-column: 2 / 3;
	grid-row:1 / 4;
	position:relative;
	margin:7px 5px 7px 0;
	box-sizing:border-box;
}
#reportlist .row.nophoto .photos {
	display:none;
}
#reportlist .row .boat {
	grid-column: 3 / 4;
	grid-row:1 / 2;
	box-sizing:border-box;
	display:flex;
	align-items:flex-start;
	font-size:16px;
	font-weight:bold;
	white-space:nowrap;
	line-height:1;
	padding-top:4px;
}
#reportlist .row .skippers {
	grid-column: 3 / 4;
	grid-row:2 / 3;
	display:flex;
	align-items:flex-start;
	font-weight:bold;
}
#reportlist .row .infos {
	grid-column: 3 / 4;
	grid-row:3 / 4;
	flex-direction:column;
	justify-content:flex-end;
	padding-bottom:5px;
	font-size:13px;
	line-height:15px;
	white-space:nowrap;
	box-sizing:border-box;
}
#reportlist .row.inlive .infos .date {
	font-weight:bold;
}
#reportlist .row.inlive .infos .date:after {
	content:' (live)';
}

#reportlist .row .infos .values {
	display:flex;
}
#reportlist .row .infos .values.off {
	visibility:hidden;
}
#reportlist .row .infos .values .val {
	padding:0 3px;
}
#reportlist .row .infos .values .val+.val:before {
	content:" | ";
	padding-right:3px;
}
#reportlist .row.STM .rank,
#reportlist .row.NL .rank,
#reportlist .row.SUS .rank,
#reportlist .row.DNF .rank,
#reportlist .row.RET .rank {
	color:transparent !important;
}
#reportlist .row.ARV + div.RAC:before {
	content:'';
	position:absolute;
	height:2px;
	width:100%;
}
#reportlist .row.ghost.ARV + div.RAC:before {
	display:none;
}
	
#reportlist .row .infos .dtl.off {
	display:none;
}
#reportlist .row .infos .dtlprogress {
}
#reportlist .row .infos .dtlprogress:after,
#reportlist .row .infos .dtlprogress:after {
	font-size:smaller;
	display:inline-flex;
	align-items:center;
}
#reportlist .row .infos .dtlprogress.up:after {
	content:'▲';
}
#reportlist .row .infos .dtlprogress.down:after {
	content:'▼';
}
#reportlist .row .infos label {
	font-weight:bold;
}
#reportlist .row .infos label::after {
	content:' : ';
}

#reportlist .row .nat:nth-child(2) {
	margin-left:4px;
}
#reportlist .row .nat:before {
	display:inline-block;
	content:'';
	width:15px;
	height:10px;
	margin-right:4px;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:100%;
}
#reportlist .row .nat.no:before {
	display:none;
}
#reportlist .row input.mode_video {
	display:block;
	position:absolute;
	top:0;
	right:0;
}
#reportlist .row input.mode_video.video_visible {
	right:22px;
}
	
#reportlist .row .fav {
	display:block;
	position:absolute;
	top:0;
	right:5px;
	height:24px;
	width:24px;
	cursor:pointer;
}
body.NOFAVORITES #reportlist .row .fav {
	display:none !important;
}
#reportlist .row .fav svg {
	position:absolute;
	height:100%;
	width:100%;
	stroke-width:1px;
	stroke-opacity:0.8;
	fill-opacity:0.1;
}
#reportlist .row .fav.on svg {
	stroke-opacity:1;
	fill-opacity:1;
}

#reportlist .row .linkout {
	position:absolute;
	display:none;
	bottom:5px;
	right:5px;
	cursor:pointer;
	width:20px;
	height:20px;
	opacity:0.7;
  fill:none;
  stroke-width:2;
}
#reportlist .row .linkout svg {
	width:100%;
	height:100%;
	fill:none;
	stroke-width:2;
}
#reportlist .row .linkout .arrowin {
	display:none;
}

#reportlist .row .infos[data-status] {
	display:none;
}
#reportlist .row.STA .infos[data-status*=" STA "],
#reportlist .row.ARV .infos[data-status*=" ARV "],
#reportlist .row.RAC .infos[data-status*=" RAC "],
#reportlist .row.PIT .infos[data-status*=" PIT "],
#reportlist .row.STM .infos[data-status*=" STM "],
#reportlist .row.NL .infos[data-status*=" NL "],
#reportlist .row.SUS .infos[data-status*=" SUS "],
#reportlist .row.NYS .infos[data-status*=" NYS "],
#reportlist .row.DNS .infos[data-status*=" DNS "],
#reportlist .row.DNC .infos[data-status*=" DNC "],
#reportlist .row.DNF .infos[data-status*=" DNF "],
#reportlist .row.DSQ .infos[data-status*=" DSQ "],
#reportlist .row.CNS .infos[data-status*=" CNS "],
#reportlist .row.RET .infos[data-status*=" RET "],
#reportlist .row.STB .infos[data-status*=" STB "],
#reportlist .row.CLG .infos[data-status*=" CLG "],
#reportlist .row.HLD .infos[data-status*=" HLD "],
#reportlist .row.REF .infos[data-status*=" REF "],
#reportlist .row.TRK .infos[data-status*=" TRK "],
#reportlist .row.SPT .infos[data-status*=" SPT "] {
 	display:flex;
}

#reportlist .row .infos[data-status*=" SPT "] .time,
#reportlist .row .infos[data-status*=" SPT "] .time2prev {
	display:none;
}
#reportlist .row .infos.time[data-status*=" SPT "] .time,
#reportlist .row .infos.time2prev[data-status*=" SPT "] .time2prev {
	display:inherit;
}
}


/*### DASHBOARD ###*/
@media screen	{
#dashboard {
	--section-margin:5px;
	position:absolute;
	display:none;
	flex-direction:column;
	flex:auto;
}
#dashboard header {
	position:relative;
	width:100%;
	padding:5px;
	box-sizing:border-box;
}
#dashboard header:before {
	content:'';
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
}
#dashboard header .row {
	position:relative;
	width:100%;
	display:grid;
  grid-template-columns:auto auto 1fr;
  grid-template-rows:23px 20px 18px;
	box-sizing:border-box;
}
#dashboard header .row.nophoto {
  grid-template-columns:auto 0 1fr;
}
#dashboard header .row .rank {
	grid-column: 1 / 2;
	grid-row:1 / 4;
	position:relative;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	width:30px;
	margin:0 5px 0 0;
	font-size:21px;
	font-weight:bold;
	box-sizing:border-box;
}
#dashboard header .row .rank:after {
	position:absolute;
	top:50%;
	left:50%;
	font-size:12px;
}
body.SPLITTIMES #dashboard header .row .rank:after {
	display:none;
}
#dashboard header .row .rank.up:after {
	content:'▲';
	transform:translate(-50%, -26px);
}
#dashboard header .row .rank.down:after {
	content:'▼';
	transform:translate(-50%, 10px);
}
#dashboard header .row .photos {
	grid-column: 2 / 3;
	grid-row:1 / 4;
	position:relative;
	margin-right:7px;
	box-sizing:border-box;
}
#dashboard header .row.nophoto .photos {
	display:none;
}
#dashboard header .row .boat {
	grid-column: 3 / 4;
	grid-row:1 / 2;
	box-sizing:border-box;
	display:flex;
	align-items:flex-start;
	font-size:16px;
	font-weight:bold;
	white-space:nowrap;
	line-height:1;
	padding-top:4px;
}
#dashboard header .row .skippers {
	grid-column: 3 / 4;
	grid-row:2 / 3;
	display:flex;
	align-items:flex-start;
	font-weight:bold;
}
#dashboard header .row .nat::before {
  display: inline-block;
  content: '';
  width: 15px;
  height: 10px;
  margin-right: 7px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%;
}
#dashboard header .row .status {
	grid-column: 3 / 4;
	grid-row:3 / 4;
	display:flex;
	align-items:center;
	opacity:0.7;
	font-style:italic;
}
#dashboard header .row .status>div {
	display:none;
}
#dashboard header .row .linkout {
	position:absolute;
	top:0;
	right:0;
	cursor:pointer;
	width:20px;
	height:20px;
	opacity:0.7;
}
#dashboard header .row .linkout .arrowin {
	display:none;
}
#dashboard header .row .linkout.out .arrowin {
	display:block;
}
#dashboard header .row .linkout.out .arrowout {
	display:none;
}
#dashboard header .row .linkout svg {
	width:100%;
	height:100%;
	fill:none;
	stroke-width:2;
}

#dashboard article {
	display:flex;
	flex-direction:column;
	flex:auto;
	overflow:auto;
	scrollbar-width: none;
}
#dashboard article::-webkit-scrollbar {
	width:0px;
}

#dashboard section {
	position:relative;
	width:100%;
	padding:7px;
	padding-top:16px;
	box-sizing:border-box;
	border-width:var(--section-margin);
	border-top-width:0;
	border-style:solid;
}
#dashboard section.end {
	display:block !important;
	border-bottom-width:var(--section-margin);
	flex:auto;
	padding:0;
	font-size:0;
}
#dashboard section legend {
	display:none;
	font-family:haettenschweiler;
	font-size:18px;
	height:22px;
	line-height:22px;
	margin:0 2px 7px 2px;
}
#dashboard section tt {
	position:absolute;
	top:1px;
	right:0px;
	width:20px;
	height:20px;
	cursor:pointer;
	opacity:0.7;
}
#dashboard section tt svg {
	stroke-width:3;
	fill:none;
	stroke-linecap:round;
	stroke-linejoin:round;
	width:100%;
	height:100%;
}
#dashboard section tt svg path {
	transform:rotate(45deg);
}

#dashboard .content .val {
	display:flex;
	flex-direction:column;
	align-items:center;
}
#dashboard .content .val label {
	height:18px;
	line-height:18px;
}
#dashboard .content .val var {
	display:block;
	font-weight:bold;
}
#dashboard section.dials .content {
	display:flex;
	flex-direction:row;

}

#dashboard .graphic {
	height:100px;
}

#dashboard .dial {
	position:relative;
	width:50%;
	box-sizing:border-box;
	display:flex;
	flex-direction:column;
	align-items:center;
}
#dashboard .dial svg {
	width:150px;
	aspect-ratio:1;
}
#dashboard .dials text {
	font-size:12px;
	opacity:0.5;
}
#dashboard .dial.heading .val {
	position:absolute;
	top:30px;
	left:50%;
	transform:translateX(-50%);
}
#dashboard .dial.speeds {
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	padding-top:30px;
}
#dashboard .dial.speeds svg {
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
}
#dashboard .dial.speeds .val {
	line-height:12px;
	margin-bottom:12px;
}

#dashboard .environment {
}
#dashboard .environment .content {
	display:flex;
	flex-direction:row;
	justify-content:space-around;
}
#dashboard .environment .content:after {
	content:'';
	position:absolute;
	bottom:0;
	left:50%;
	width:var(--section-margin);
	height:100%;
}
#dashboard .environment .group {
	display:flex;
	flex-direction:row;
	justify-content:space-around;
	flex:1 1 0;
	width:0;
}
#dashboard .environment .val {
	flex:1 1 0;
	width:0;
}
#dashboard .environment .val.temp>div {
	display:grid;
	grid-template-columns:auto 26px auto;
	grid-template-rows:18px auto;
}
#dashboard .environment .val.temp>div svg {
	grid-column:2 / 3;
	grid-row:1 / 3;
}
#dashboard .environment .val.temp>div label {
	grid-column:3 / 4;
	grid-row:1 / 2;
}
#dashboard .environment .val.temp>div var {
	grid-column:3 / 4;
	grid-row:2 / 3;
	display:flex;
	align-items:flex-start;
	height:100%;
	width:35px;
	text-align:right;
}

#dashboard .distances {
	grid-column: 1 / 3;
	grid-row:3 / 4;
}
#dashboard .distances .content {
  width:100%;
  display:flex;
	flex-direction:column;
  padding:7px;
  box-sizing:border-box;
}
#dashboard .distances .value {
	display:flex;
}
#dashboard .distances .value var {
	margin-left:auto;
}
#dashboard .distances .toleader,
#dashboard .distances .tosecond {
  text-align:right;
}
body.RECORD #dashboard .distances .toleader,
body.RECORD #dashboard .distances .tosecond {
  font-size:18px;
	font-weight:bold;
}
#dashboard .distances .toleader.off,
#dashboard .distances .tosecond.off {
	display:none;
}
#dashboard .distances .progressline .line {
  position:relative;
  width:100%;
  font-size:0px;
  height:4px;
  margin:3px 0 10px 0;
}
#dashboard .distances .sailedline {
  position:absolute;
  top:0;
  left:0;
  height:100%;
}
#dashboard .distances .dtlline {
  position:absolute;
  top:0;
  left:0;
  height:100%;
}
#dashboard .distances .advanceline {
  position:absolute;
  top:0;
  left:0;
  height:100%;
}
#dashboard .distances .dtlline.off,
#dashboard .distances .advanceline.off {
	display:none;
}
#dashboard .distances .overs {
	margin:10px 0;
}
#dashboard .distances .overs th,
#dashboard .distances .overs td {
  text-align:right;
}
#dashboard .distances .overs dfn {
  display:inline-block;
  text-align:right;
	padding-left:3px;
	width:50px;
}
#dashboard .distances .overs .var {
  width:100px;
  text-align:right;
}
#dashboard .distances .overs .overg {
  opacity: 0.6;
}
#dashboard .distances .overs .value {
	justify-content:flex-end;
	padding:0 5px;
	min-width:50px;
	box-sizing:border-box;
}
#dashboard .distances .overs .graph {
	font-weight:bold;
}

#dashboard .results th {
	font-weight:bold;
}
#dashboard .results .off,
#dashboard .results .gapzero {
	display:none;
}
#dashboard .results th:after {
	content:' : ';
}
#dashboard .results th,
#dashboard .results td {
	text-align:right;
	line-height:1.6;
	padding:0 5px;
}

#dashboard .run th {
	text-align:right;
	font-weight:bold;
}
#dashboard .run th:after {
	content:' : ';
}
#dashboard .run th,
#dashboard .run td {
	line-height:1.6;
	padding:0 5px;
}

#dashboard	.splittime {
	display:flex;
	flex-direction:column;
	margin-bottom:7px;
}
#dashboard	.splittime .name {
	font-family:haettenschweiler;
	text-align:center;
	font-size:16px;
	line-height:30px;
}
#dashboard	.splittime .variables {
	display:flex;
	flex-direction:column;
}
#dashboard	.splittime .variable {
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	margin-bottom:5px;
	border-top:1px solid;
}
#dashboard	.splittime .variable .values {
	display:flex;
	flex-direction:column;
	align-items:flex-end;
}
#dashboard	.splittime .variable .val {
	position:relative;
	display:flex;
	justify-content:flex-end;
}
#dashboard	.splittime .variable .val.small {
	opacity:0.6;
}
#dashboard	.splittime .variable .val.first:before {
	content:'☻';
	position:absolute;
	top:calc(50% - 2px);
	height:100%;
	left:0;
	transform:translate(-100%, -50%);
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:18px;
	font-weight:bold;
}

#dashboard .attempt .content {
	display:flex;
	flex-direction:column;
	justify-content:center;
}
#dashboard .attempt .content>* {
	display:flex;
	justify-content:center;
}
#dashboard .attempt .chrono {
	font-size:24px;
}

#dashboard .summary {
	border-width:0 !important;
	padding:0;
}
#dashboard .summary .content {
	display:flex;
	justify-content:space-around;
	align-items:center;
	height:var(--dashboard-summary-height);
}
#dashboard .summary .content>* {
	flex:1 1 auto;
}
#dashboard .summary .chrono {
	text-align:right;
}
#dashboard .summary .chrono:after {
	content:'•';
	display:inline-block;
	width:1em;
	text-align:center;
}
#dashboard .summary .advance {
	padding-left:5px;
}
#dashboard .summary+section {
  border-top-width:var(--section-margin);
}

#dashboard section.closed {
	padding-top:0;
	padding-bottom:0;
}
#dashboard section.closed legend {
	display:block;
}
#dashboard section.closed .content {
	display:none !important;
}
#dashboard section.closed  tt svg path {
	transform:rotate(-135deg);
}

#dashboard *[data-status] {
	display:none;
}
#dashboard .STA *[data-status*=" STA "],
#dashboard .ARV *[data-status*=" ARV "],
#dashboard .RAC *[data-status*=" RAC "],
#dashboard .PIT *[data-status*=" PIT "],
#dashboard .STM *[data-status*=" STM "],
#dashboard .NL *[data-status*=" NL "],
#dashboard .SUS *[data-status*=" SUS "],
#dashboard .NYS *[data-status*=" NYS "],
#dashboard .DNS *[data-status*=" DNS "],
#dashboard .DNC *[data-status*=" DNC "],
#dashboard .DNF *[data-status*=" DNF "],
#dashboard .DSQ *[data-status*=" DSQ "],
#dashboard .CNS *[data-status*=" CNS "],
#dashboard .RET *[data-status*=" RET "],
#dashboard .STB *[data-status*=" STB "],
#dashboard .CLG *[data-status*=" CLG "],
#dashboard .HLD *[data-status*=" HLD "],
#dashboard .REF *[data-status*=" REF "],
#dashboard .TRK *[data-status*=" TRK "],
#dashboard .SPT *[data-status*=" SPT "]{
	display:block  !important;
}

}

	
/*### SPLITTIMES ###*/
@media screen	{
#splittimetable {
	display:none;
}
}

	
/*### GRAPHIC ###*/
@media screen	{
.graphic {
	--graphic-margin-top:5px;
	position:relative;
	margin-top:var(--graphic-margin-top);
}
.graphic.on {
	display:block;
}
.graphic .drawing {
	position:absolute;
	top:0px;
	left:0;
	right:35px;
	bottom:0px;
}
.graphic svg {
	position:absolute;
	top:0;
	left:0;
	right:0;
	width:100%;
	height:100%;
}
.graphic.advance .pos {
	top:0;
	bottom:50%;
	height:50%;
  fill-opacity:0.3;
}
.graphic.advance .neg {
	bottom:0;
	top:50%;
	height:50%;
  fill-opacity:0.3;
}
.graphic.speed .line {
	bottom:0;
	top:0;
  fill:none;
}
.graphic .legend {
	position:absolute;
	top:-1px;
	bottom:0;
	overflow:hidden;
	width:25px;
	right:5px;
	opacity:0.6;
}
.graphic .grid {
	background:none !important;
	background-color:transparent !important;
	stroke-opacity:0.1;
}
.graphic sup {
	position:absolute;
	display:block;
	right:0;
	transform:translateY(-50%);
	font-size:9px;
	white-space:nowrap;
	pointer-events:none;
}
}


/*### PANEL HANDLERS ###*/
@media screen	{
body.REPORT_OFF #panelslider {
	display:none;
}
#panelslider {
	display:none;
	position:absolute;
	right:0px;
	top:calc(var(--blockmark-height) + (var(--report-height) - var(--panelslider-height)));
	width:var(--panelslider-width);
	height:var(--panelslider-height);
	overflow:hidden;
	cursor:pointer;
}
body.TRACKING #panelslider {
	display:none;
}
body.NOFAVORITES #panelslider {
	height:var(--reportline-height);
	top:calc(var(--blockmark-height) + (var(--report-height) - var(--reportline-height)));
}
body.FULLSCREEN #panelslider {
	top:59px;
}
body.FULLSCREEN.RACE.MULTICLASS #panelslider {
	top:0;
}
	
#panelslider svg {
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	width:30px;
	aspect-ratio:1;
	stroke-width:2px;
	transition:transform 400ms;
}
#panelslider.open svg {
	transform:translate(-50%, -50%) rotate(180deg);
}

}

	
/*### SIG ###*/
@media screen	{
#sig {
	position:absolute;
	left:var(--report-width);
	top:0;
	right:0;
	bottom:var(--time-height);
	overflow:hidden;
	box-sizing:border-box;
}
body.TRACKING #sig {
left:0px;
}
body.FULLSCREEN #sig {
top:0;
}
#sig.ruler {
	cursor:pointer;
}
#zoomwindow {
	position:absolute;
	left:5vmin;
	top:var(--blockmark-height);
	right:calc(var(--tools-width) + 5vmin);
	bottom:5vmin;
	pointer-events:none;
	-webkit-user-select:none; /* Chrome, Safari, Opéra depuis la version 15 */
	-moz-user-select:none; /* Firefox */
	-ms-user-select:none; /* Internet explorer depuis la version 10 et Edge */
	user-select:none; /* Propriété standard */
}
body.WEATHER_UNDER #zoomwindow {
top:calc(var(--blockmark-height) + var(--blockmark-half-height));
}
body.DEBUG #zoomwindow {
background-color:rgba(255,0,255,0.2);
}
	
}
	
	
/*### LEAFLET ###*/
@media screen	{
.leaflet-pane {
	z-index:initial !important;
}
#leaflet {
	display:none;
	position:absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
	overflow:hidden;
	box-sizing:border-box;
}
#leafletcredits {
	display:none;
	position:absolute !important;
	bottom:0 !important;
	top:auto !important;
	right:auto !important;
	left:50% !important;
	transform:translateX(-50%);
	background-color:rgba(255,255,255,0.5);
	font-size:11px !important;
	white-space:nowrap;
}
#leafletcredits.on {
	display:block;
}
.leaflet-control {
	z-index:0 !important;
}
	
	body.LEAFLET #sig {
	background:transparent !important;
}
	body.FAKE_LEAFLET #weathercolorsLayer,
	body.LEAFLET #weathercolorsLayer {
	display:none !important;
}
	body.LEAFLET #leaflet {
	display:block;
}
	body.LEAFLET #groundLayer,
	body.LEAFLET #bathyLayer,
	body.FAKE_LEAFLET #bathyLayer {
	display:none;
}
	body.FAKE_LEAFLET #groundLayer {
	display:inherit;
}
	body.FAKE_LEAFLET #groundLayer path {
	fill:#D9E1B4;
}
	body.FAKE_LEAFLET #sig {
	background-color:#99D9F2;
}
	
	body.EARTH #leaflet {
	display:none !important;
}
}
	
	
/*### LAYERS ###*/
@media screen	{
#svgmodels {
	display:none;	
}
	
#bathymetry {
	position:absolute;
	pointer-events:none !important;
}
#bathymetry img {
	width:100%;
	height:100%;
}
#weathercolors {
	position:absolute;
	pointer-events:none !important;
}
#weathercolors.off {
	display:none;
}
#weathercolors canvas {
	width:100%;
	height:100%;
}
#bathymetry.spherical {
	border-radius:50%;
}
body.PROCESSINGEARTH #bathymetry {
visibility:hidden !important;
}
	
#map {
	position:relative!important;
}
body.PROCESSINGEARTH #map {
visibility:hidden !important;
}

#groundLayer,
#bathyLayer {
	pointer-events:none !important;
	touch-action:none !important;
}
	
#boatsLayer>g {
	display:none;
}
#boatsLayer>g.visible {
	display:block;
}
#boatsLayer>g>g path {
	stroke:none;
}
#boatsLayer>g>g path:first-child {
	stroke-width:0.2;
}
#boatsLayer>g>g path:first-of-type {
	stroke-width:0.2;
}
#boatsLayer>g.ghost {
	opacity:0.1;
	pointer-events:none;
}
#boatsLayer>g.hidden {
	display:none !important;
}
#boatsLayer>g[rel='RET'] {
	opacity:0.4;
}
	body.RECORD #boatsLayer>g.ghost {
	opacity:1 !important;
	pointer-events:inherit;
}
#boatsLayer>g circle.focus {
	display:none;
}
#boatsLayer>g.focuscircle circle.focus {
	display:block;
	stroke-width:0.5px;
}
.boatfocusgradient_ext {
  stop-opacity:0;
}
.boatfocusgradient_center {
  stop-opacity:1;
}
	

#boatsLayer circle.touch {
	opacity:0;
}
#boatsLayer text {
	-moz-user-select:-moz-none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;
	cursor:default;
	pointer-events:none;
}
	body.FAKE_LEAFLET #boatsLayer text,
	body.LEAFLET #boatsLayer text {
	fill:#000000;
}
	body.RACE #layout.noclass #boatsLayer>g.ghost {
	display:none !important;
}
#boatsLayer g.compare>g {
	opacity:0.5;
}
	
	
#tracksLayer {
	--slicer:50;
	stroke-width:1px;
}
#routingsLayer {
	--full-visible:1;
	font-size:0px;
}
	
#tracksLayer g,
#tracksSTMLayer g,
#routingsLayer g {
	fill:none;
	display:none;
}
#tracksLayer g.visible,
#tracksSTMLayer g.visible,
#routingsLayer g.visible {
	display:inherit;
}
#tracksLayer	g path.n1,
#tracksSTMLayer g path.n1 {
	display:none;
}
#tracksLayer	g path.n2,
#tracksSTMLayer g path.n2 {
	stroke-opacity:0.15;
}
#tracksLayer	g path.n3,
#tracksSTMLayer g path.n3 {
	stroke-opacity:0.15;
}
	body.PRERACE #tracksLayer	g path.n1,
	body.PRERACE #tracksSTMLayer g path.n1,
	body.PRERACE #tracksLayer	g path.n2,
	body.PRERACE #tracksSTMLayer g path.n2,
	body.PRERACE #tracksLayer	g path.n3,
	body.PRERACE #tracksSTMLayer g path.n3 {
		display:none !important;
	}
	body.SMALLTRACKS #tracksLayer	g.on path.n1,
	body.SMALLTRACKS #tracksLayer	g.focus path.n1 {
		display:none;
	}
	body.SMALLTRACKS #tracksLayer	g.on path.n2,
	body.SMALLTRACKS #tracksLayer	g.on path.n3,
	body.SMALLTRACKS #tracksLayer	g.focus path.n2,
	body.SMALLTRACKS #tracksLayer	g.focus path.n3 {
		display:block;
		stroke-opacity:1;
	}
#tracksLayer	g.focus path.n1,
#tracksSTMLayer g.focus path.n1,
#tracksLayer	g.on path.n1,
#tracksSTMLayer g.on path.n1 {
	display:inherit;
	stroke-opacity:1;
}
#tracksLayer	g.focus path.n2,
#tracksLayer	g.focus path.n3,
#tracksSTMLayer g.focus path.n2,
#tracksSTMLayer g.focus path.n3,
#tracksLayer	g.on path.n2,
#tracksLayer	g.on path.n3,
#tracksSTMLayer g.on path.n2,
#tracksSTMLayer g.on path.n3 {
	display:none;
}
#tracksLayer	g.ghost,
#tracksSTMLayer g.ghost,
#routingsLayer	g.ghost {
	display:none;
}
#routingsLayer g path.n1 {
	stroke-opacity:0.5;
}
#routingsLayer g path.n2,
#routingsLayer g path.n3 {
	*display:none;
}
#tracksLayer	g.on path.n1,
#tracksSTMLayer g.on path.n1 {
}
#layout.noclass #tracksLayer	g.ghost,
#layout.noclass #tracksSTMLayer g.ghost,
#layout.noclass #routingsLayer	g.ghost {
	display:none !important;
}
#tracksLayer>g.hidden {
	display:none !important;
}
#routingsLayer>g.hidden {
	display:none !important;
}
	
	
#referencesLayer {
	--current-pos-scale:1.5;
	display:none;
}
#referencesLayer.on {
	display:block;
}
#referencesLayer .track {
	fill:none;
	transition:opacity 0.5s ease-out;
}
#referencesLayer .track.n2,
#referencesLayer .track.n3{
	display:none;
}
#referencesLayer .currentPosition,
#referencesLayer .plot {
	cursor:pointer;
}
#referencesLayer .plot.off {
	display:none;
}
#referencesLayer .plot .hitbox {
	fill-opacity:0;
}
#referencesLayer .plot text {
	display:none;
}
#referencesLayer .plot tspan {
	font-size:14px;
}
#referencesLayer .plot.on {
	opacity:1;
}
#referencesLayer .plot.on .hitbox {
	fill-opacity:1;
}
#referencesLayer .plot.on text {
	display:inherit;
}
#referencesLayer .currentPosition .dot {
	opacity:1;
}
#referencesLayer .ref {
	transition:opacity 0.5s ease-out;
}
#referencesLayer.single .ref {
	opacity:0;
}
#referencesLayer.single .ref.single {
	opacity:1;
}
#referencesLayer.single .ref.single .plot {
	opacity:1;
}
	
#windLayer {
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	pointer-events:none;
}
#windLayer.scale path {
	pointer-events:none;
}
	
#orthoLayer {
	fill:none;
	stroke-opacity:0.7;
/*stroke-dasharray:6,2; ca ralenti trop à plein zoom !*/
	stroke-width:0.5;
}
	body.FAKE_LEAFLET #orthoLayer,
	body.LEAFLET #orthoLayer {
	stroke:#000000 !important;
}
	
#areasLayer path#AEZ {
	stroke:none !important;
}
#areasLayer #LiveArea_start {
	display:none;
}
	
#areasLayer #live {
	display:none;
}
#areasLayer path#icelimit {
	stroke:none !important;
	fill:rgba(255,255,255,0.85) !important;
}
#areasLayer .live {
	stroke:rgba(255,255,255,0.1);
	fill:rgba(255,255,255,0.03);
}
	
	body.LEAFLET #areasLayer path#icelimit {
	display:none !important;
}
#areasLayer path#equateur {
	fill:none !important;
}
	
#gatesLayer path {
	fill:none;
}
#gatesLayer circle {
	stroke:none;
}
#gatesLayer #equateur circle {
	display:none;
}	
#gridLayer {
	pointer-events:none;
}
#gridLayer path {
	fill:none;
}
	
#daynightLayer {
	opacity:0.3;
	display:none;
	pointer-events:none;
	animation-name:daynight;
	animation-duration:1.5s;
	animation-iteration-count:1;
}
#daynightLayer.on {
	display:block;
}
@keyframes daynight {
	from {opacity:0;}
	to {opacity:0.3;}
}	
	
#ruleLayer {
}
#ruleLayer g {
	stroke-dasharray:none !important;
	cursor:pointer;
}
#ruleLayer>g>circle {
	stroke-opacity:1;
	fill-opacity:0.2;
}
#ruleLayer>g>path {
	stroke-opacity:1;
	fill:none;
}
#ruleLayer>path {
	stroke-opacity:1;
	fill:none;
}
#ruleLayer>g.virtual>circle {
	stroke:transparent;
	fill:transparent;
}
#ruleLayer>g.virtual>path {
	stroke-opacity:0.7;
}
	
#poiLayer .level {
	display:none;
}
#poiLayer .level.on {
	display:block;
}
#poiLayer g text {
	cursor:default;
}
#poiLayer g.arrv text,
#poiLayer g.start text {
	font-weight:bold;
}
#poiLayer g.area circle {
	fill:transparent;
}
#poiLayer g.area text {
	font-weight:bold;
	font-size:16px;
}
#poiLayer g.ctry circle {
	fill:transparent;
}
#poiLayer g.ctry text {
	font-family:haettenschweiler;
	font-weight:bold;
	text-shadow:1px 1px 1px #000000,	-1px -1px 1px #000000,	1px -1px 1px #000000,	-1px 1px 1px #000000;
	font-size:32px;
}
#poiLayer layer[rel="100000"] g {
	opacity:0.2;
}
	
	
#mediaLayer {
	display:none;
}
#mediaLayer.on {
	display:block;
}
#mediaLayer>g {
	display:none;
	cursor:pointer;
}
#mediaLayer>g.displayable.visible {
	display:block;
}
#mediaLayer.ghost>g {
	display:block;
	opacity:0.3;
}
 #mediaLayer.ghost>g.displayable.visible {
	opacity:1;
}

#mediaLayer .geomedia {
	transform:scale(0.75);
}
#mediaLayer .geomedia .face {
	display:none;
}
	
#mediaLayer .geomedia .balloon {
	display:inherit;
}
	
#mediaLayer .geomedia.type0 .type0,
#mediaLayer .geomedia.type1 .type1,
#mediaLayer .geomedia.type2 .type2,
#mediaLayer .geomedia.type3 .type3,
#mediaLayer .geomedia.type4 .type4 {
	display:inherit;
}
	
#infosLayer {
	display:none;
}
#infosLayer.on {
	display:inherit;
}
#infosLayer .geoinfo {
	transform:scale(0.8);
	cursor:pointer;
}
	
#infosLayer .geoinfo .pin {
	stroke:none;
}
#infosLayer .geoinfo .disk {
	stroke:none;
}
#infosLayer .geoinfo .letter {
	fill:none;
}
#infosLayer>g.hidden {
	display:none;
}
#infosLayer>g.visible {
	display:block;
}
	
#splittimesLayer .icon,
#splittimesLayer .line {
  opacity:0.7;
}
#splittimesLayer .icon.active,
#splittimesLayer .line.active {
  opacity:1;
}
#splittimesLayer .icon {
	cursor:pointer;
}
#splittimesLayer .icon text {
	display:none;
}

#prmslLayer path {
	fill:none;
	stroke:#FFFFFF;
	stroke-width:1;
	stroke-opacity:0.7;
	vector-effect:non-scaling-stroke;
	 pointer-events:none; 
}
	
#layout .dkside {
	display:none !important;
}
	
#layout #halo {
	pointer-events:none;
}
	
	
#gridlines {
	display:none;
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	pointer-events:none;
	padding-top:0px;
	padding-left:0px;
	padding-right:0px;
	padding-bottom:0px;
}
#gridlines.on {
	display:block;
}
#gridlines svg {
	width:100%;
	height:100%;
}
#gridlines text {
	font-size:11px;
	font-family:monospace;
	text-align:right;
}
	
	
#streamlines {
	position:absolute;
	top:0;
	left:0;
	pointer-events:none;
}
	
}
	
	
/*### COORDS ###*/
@media screen	{
#coords {
	--height:calc(var(--blockmark-height) / 4);
	--skewval:calc(var(--height) * var(--skewfactor));
	position:absolute;
	left:0;
	bottom:0px;
	height:var(--height);
	line-height:var(--height);
	font-size:12px;
	padding:0 calc(var(--skewval) + 5px) 0 5px;
	clip-path: polygon(0 0, 100% 0, calc(100% - var(--skewval)) 100%, 0 100%);
	font-family:monospace;
	white-space:nowrap;
	cursor:pointer;
}
	body.TOUCHSCREEN #coords {
	display:none;
}
#coords .lat,
#coords .lng {
	display:inline-block;
}
#coords .lat:after {
	content:'•';
	display:inline-block;
	margin:0 3px 0 5px;
}
	
	
}
	
	
/*### TOOLS ###*/
@media screen	{
#tools {
	--button-width:34px;
	--button-height:34px;
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	right:3px;
	width:var(--tools-width);
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
}
	
}
	
	
/*### ZOOM ###*/
@media screen	{
#zoom {
	position:relative;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:space-between;
	height:94px;
	width:var(--button-width);
	margin-left:1px;
}
#zoom .button {
	position:relative;
	width:var(--button-width);
	height:var(--button-height);
}
#zoom .button.plus {
	border-radius:17px 17px 0 0;
}
#zoom .button.target {
}
#zoom .button.minus {
	border-radius:0 0 17px 17px;
}
#zoom .button .face {
	position:absolute;
	display:flex;
	justify-content:center;
	align-items:center;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
}
#zoom .button .face svg {
	width:26px;
	height:26px;
}
#bt_target {
	width:var(--button-width);
	height:var(--button-height);
}
#bt_target .icon {
	width:100%;
	height:34px;
}
#bt_target svg {
	padding:4px;
	width:26px;
	height:26px;
}
#bt_target:before {
	height:34px;
	line-height:34px;
	border-radius:4px 0 0 4px;
}
	
}
	
	
/*### TIME ###*/
@media screen	{
#time {
	--timekeeper-skewval:calc(var(--timekeeper-height) * var(--skewfactor));
	--timeline-skewval:calc(var(--timeline-height) * var(--skewfactor));
	position:absolute;
	display:flex;
	left:0;
	width:100%;
	bottom:0px;
	height:var(--time-height);
	font-size:0;
}
#time>* {
	display:flex;
	position:relative;
	align-items:center;
}
#time * {
	white-space:nowrap;
}
#time .break {
	display:none;
	height:0;
	font-size:0;
}
#timekeeper {
	display:flex;
	justify-content:center;
	padding:0 10px;
	height:var(--timekeeper-height);
}
#time.nokeeper #timekeeper {
	display:none;
}
#timekeeper a,
#timekeeper img {
	height:calc(var(--timekeeper-height) * 0.55);
	max-width:calc(var(--timekeeper-height) * 2.5);
}
#refresh {
	height:var(--timekeeper-height);
	padding:0 10px 0 calc(var(--timekeeper-skewval) + 10px);
	cursor:pointer;
}
#refresh svg {
	display:none;
	position:relative;
	width:32px;
	height:32px;
	border-radius:50%;
	margin:4px;
}
#refresh svg .round {
	stroke:none;
}
#refresh svg .timer {
	fill:transparent;
	stroke-width:32;
	stroke-dasharray:0 100; /* for 38% */
	transform:rotate(-90deg);
}
#refresh svg .play {
	display:none;
}
#refresh.pause svg .play {
	display:block;
}
#refresh.pause svg .pause {
	display:none;
}
body.STANDBY #refresh svg,
body.FINISH#refresh svg {
	display:none;
}
#refresh.on svg {
	display:block !important;
}
	
#datetime,
#chrono {
	font-size:18px;
	font-weight:bold;
	height:var(--timekeeper-height);
}
#datetime {
	padding-right:calc(var(--timekeeper-skewval) + 10px);
}
#datetime>span {
	position:relative;
}
#refresh:before,
#datetime:before {
	content:'';
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
}
#refresh:before {
	clip-path:polygon(var(--timekeeper-skewval) 0, 100% 0, 100% 100%, 0 100%);
}
#datetime:before {
	clip-path:polygon(0 0, 100% 0, calc(100% - var(--timekeeper-skewval)) 100%, 0 100%);
}
#chrono {
	padding:0 calc(var(--timekeeper-skewval) + 10px) 0 10px;
	clip-path:polygon(0 0, 100% 0, calc(100% - var(--timekeeper-skewval)) 100%, 0 100%);
	width:10ex;
	justify-content:flex-end;
}
	body.RECORD.STANDBY #chrono>span,
	body.RECORD.FINISH #chrono>span,
	body.TRACKING #chrono {
	display:none;
}
	body.RECORD.STANDBY #chrono,
	body.RECORD.FINISH #chrono {
	width:0;
}
#replay {
	--width:70px;
	--gauge-margin:7px;
	position:relative;
	display:flex;
	flex-direction:column;
	justify-content:space-evenly;
	height:var(--timeline-height);
	width:var(--width);
	margin-left:var(--gauge-margin);
}
#replay .buttons {
	width:18px;
	height:18px;
	margin:0 7px;
	opacity:0.6;
}
#replay .gauge {
	position:relative;
	height:16px;
	width:calc(100% - var(--gauge-margin) * 2);
	cursor:pointer;
}
#replay .gauge .backward,
#replay .gauge .forward,
#replay .gauge .bar {
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	height:3px;
	width:calc(50% - 1px);
}
#replay .gauge .backward {
	left:0;
}
#replay .gauge .forward {
	right:0;
}
#replay .gauge .bar {
	left:calc(50% + 1px);
	width:25%;
}
#replay .cursor {
	position:absolute;
	left:75%;
	top:50%;
	transform:translateY(-50%);
	width:16px;
	height:16px;
	margin-left:-8px;
	border-radius:50%;
}
	
#replay.hidden {
	display:none;
}
#replay.off .pause,
#replay.off .gauge {
	display:none;
}
#replay.on .play {
	display:none;
}
#replay.on .buttons {
	opacity:1;
}
	
#timeline {
	height:var(--timeline-height);
	flex:auto;
	width:10px;/*Pour le flex. si width n'est pas défini, elle fini à 0px*/
}
#timeline.off {
	visibility:hidden;
}
#timeline .axis,
#timeline .limits {
	position:absolute;
	left:18px;
	right:18px;
	top:50%;
	transform:translateY(-50%);
	box-sizing:border-box;
}
#timeline .axis {
	height:16px;
	cursor:pointer;
}
#timeline .axis.off {
	pointer-events:none !important;
}
#timeline .bar,
#timeline .backbar,
#timeline .interval {
	position:absolute;
	left:0;
	top:50%;
	transform:translateY(-50%);
	height:4px;
}
#timeline .bar,
#timeline .backbar {
	width:100%;
}
#timeline .axis .dot {
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	left:0;
}
#timeline .axis .dot label {
	position:absolute;
	left:0;
	transform:translateX(-50%);
	font-size:12px;
	line-height:12px;
	height:12px;
	cursor:pointer;
}
#timeline .axis .dot:nth-child(2n) label {
	top:10px;
}
#timeline .axis .dot:nth-child(2n+1) label {
	top:-24px;
}
#timeline .axis .dot:before {
	content:'';
	display:block;
	position:absolute;
	top:-5px;
	margin-left:-5px;
	left:0;
	width:11px;
	height:10px;
	border-radius:50%;
}
#timeline .axis .dot:after {
	content:'';
	display:block;
	position:absolute;
	top:0;
	left:0;
	width:1px;
	height:10px;
}
#timeline .axis .dot:nth-child(2n):after {
	top:0px;
}
#timeline .axis .dot:nth-child(2n+1):after {
	top:-10px;
}
#timeline .axis .dot.off {
	display:none;
}
#time.brackets #timeline .backbar {
	height:2px;
}
#timeline .interval {
	display:none;
	left:0px;
	right:0px;
	clip-path:polygon(2px 2px, 4px 0, 100% 0, calc(100% - 4px) 0, calc(100% - 2px) 2px, calc(100% - 4px) 100%, 4px 100%);
}
#timeline .button {
	--size:20px;
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	left:0;
	width:var(--size);
	height:var(--size);
	cursor:pointer;
	margin-left:calc(0px - calc(var(--size) / 2) - 1px);
	border-radius:50%;
}
#timeline .button .face {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
}
#timeline .button .face>svg {
	width:100%;
	height:100%;
	stroke:none;
}
#timeline .limits {
	--width:14px;
}
#timeline .limits svg {
	display:none;
	width:var(--width);
	height:32px;
}
#timeline .limits .left,
#timeline .limits .right {
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	cursor:pointer;
}
#timeline .limits label {
	--skew-height:21px;
	--cursor-height:6px;
	--skewval:calc(var(--skew-height) * var(--skewfactor));
	position:absolute;
	display:none;
	top:0;
	height:calc(var(--skew-height) + var(--cursor-height));
	left:50%;
	line-height:var(--skew-height);
	transform:translate(-50%, calc(-100% - 1px));
	cursor:pointer;
	padding:0 calc(var(--skewval) + 5px);
	font-size:14px;
	box-sizing:border-box;
	clip-path:polygon(var(--skewval) 0, 100% 0, calc(100% - var(--skewval)) var(--skew-height), calc(50% + var(--cursor-height)) var(--skew-height), 50% 100%, calc(50% - var(--cursor-height)) var(--skew-height), 0 var(--skew-height));
}
#timeline .limits label .date {
	font-weight:bold;
}
#timeline .limits .left {
	left:0;
	margin-left:-2px;
}
#timeline .limits .left label {
	margin-left:-4px;
}
#time.limits #timeline .limits .left {
	left:0 !important;
	right:auto !important;
}
#time.limits #timeline .limits .left label {
	left:0 !important;
	right:auto !important;
	margin-left:2px;
	margin-right:0;
	transform:translate(0, calc(-100% - 15px));
	clip-path:polygon(
	0		 0, 
	100%		0, 
	calc(100% - var(--skewval))	 var(--skew-height), 
	var(--cursor-height)	var(--skew-height), 
	0		 100%
	);
}
#timeline .limits .right {
	right:0;
	margin-right:-2px;
}
#timeline .limits .right label {
	margin-left:3px;
}
#time.limits #timeline .limits .right {
	position:relative;
	left:auto !important;
	right:0 !important;
}
#time.limits #timeline .limits .right label {
	left:auto !important;
	right:0 !important;
	margin-left:0;
	margin-right:1px;
	transform:translate(0, calc(-100% - 15px));
	clip-path:polygon(
	var(--skewval)		0, 
	100%		0, 
	100%		100%, 
	calc(100% - var(--cursor-height)) var(--skew-height), 
	0		 var(--skew-height)
	);
}
#time.limits #timeline .limits .left label,
#time.limits #timeline .limits .right label {
	display:block;
}
	
#brackets {
	padding:0 5px;
}
#brackets svg {
	height:38px;
}
#brackets .start,
#brackets .check,
#brackets .stop {
	cursor:pointer;
}
#brackets .check,
#brackets .stop {
	display:none;
}
	
#time.brackets #timeline .button,
#time.brackets #timeline .axis .bar,
#time.brackets #brackets .start {
	display:none;
}
#time.brackets #timeline .axis {
	pointer-events:none;
}
#time.brackets #timeline .limits svg,
#time.brackets #timeline .limits label,
#time.brackets #timeline .interval,
#time.brackets #brackets .check,
#time.brackets #brackets .stop {
	display:block;
}
#time.brackets #brackets .start,
#time.limits #brackets .start,
#time.brackets #brackets .bracket,
#time.limits #brackets .bracket {
	opacity:1;
}
#time.limits #brackets .check {
	display:none;
}
#time.limits #timeline .button {
	display:block;
}
	
#geovoile {
	height:var(--timeline-height);
	padding-left:calc(var(--timeline-skewval) + 5px);
	clip-path:polygon(var(--timeline-skewval) 0, 100% 0, 100% 100%, 0 100%);
}
#geovoile .link {
	position:relative;
	height:100%;
	aspect-ratio:15 / 10;
	cursor:pointer;
	display:flex;
	justify-content:center;
	align-items:center;
}
#geovoile svg {
	height:75%;
}
#timeplayer {
	display:none;
}
}
	
	
/*### BOATCARD ###*/
@media screen	{
#boatcard {
	--header-height:60px;
	--rank-width:30px;
	--margin:5px;
	position:absolute;
	display:none;
	top:0;
	left:0;
	filter:drop-shadow(1px 1px 3px rgba(0,0,0,0.5));	
	pointer-events:none !important;
	z-index:1;
}
	body.TOUCHSCREEN #boatcard {
	pointer-events:auto !important;
}
	
#boatcard article {
	position:absolute;
	width:auto;
  border:1px solid;
}
#boatcard article.qd0 {
	left:0px;
	top:0px;
	transform:translate(-50%, -50%);
}
#boatcard article.qd1 {
	left:15px;
	bottom:15px;
}
#boatcard article.qd2 {
	left:15px;
	top:15px;
}
#boatcard article.qd3 {
	right:15px;
	top:15px;
}
#boatcard article.qd4 {
	right:35px;
	bottom:15px;
}
#boatcard article.qd5 {
	right:35px;
	top:0;
	transform:translateY(-50%);
}
#boatcard article.qd6 {
	left:15px;
	top:0;
	transform:translateY(-50%);
}
#boatcard article.qd7 {
	bottom:15px;
	left:0;
	transform:translateX(-50%);
}
#boatcard article.qd8 {
	top:15px;
	left:0;
	transform:translateX(-50%);
}
#boatcard .identity {
	display:flex;
	height:var(--header-height);
	padding:0 var(--rank-width);
}
#boatcard header {
	width:100%;
	padding:5px;
	box-sizing:border-box;
	position:relative;
	width:100%;
	display:grid;
  grid-template-columns:auto auto 1fr;
  grid-template-rows:23px 20px 18px;
	box-sizing:border-box;
	white-space:nowrap;
}
#boatcard header.nophoto {
  grid-template-columns:auto 0 1fr;
}
#boatcard .rank {
	position:relative;
	grid-column: 1 / 2;
	grid-row:1 / 4;
	position:relative;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	width:30px;
	margin:0 5px 0 0;
	font-size:21px;
	font-weight:bold;
	box-sizing:border-box;
}
#boatcard header .rank:after {
	position:absolute;
	top:50%;
	left:50%;
	font-size:12px;
}
#boatcard header .rank.up:after {
	content:'▲';
	transform:translate(-50%, -26px);
}
#boatcard header .rank.down:after {
	content:'▼';
	transform:translate(-50%, 10px);
}
#boatcard header .photos {
	grid-column: 2 / 3;
	grid-row:1 / 4;
	position:relative;
	margin-right:7px;
	box-sizing:border-box;
}

#boatcard header .nophoto .photos {
	display:none;
}
#boatcard header .boat {
	grid-column: 3 / 4;
	grid-row:1 / 2;
	box-sizing:border-box;
	display:flex;
	align-items:flex-start;
	font-size:16px;
	font-weight:bold;
	white-space:nowrap;
	line-height:1;
	padding-top:4px;
}
#boatcard header .skippers {
	grid-column: 3 / 4;
	grid-row:2 / 3;
	display:flex;
	align-items:flex-start;
	font-weight:bold;
}
#boatcard header .nat::before {
  display: inline-block;
  content: '';
  width: 15px;
  height: 10px;
  margin-right: 7px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%;
}

#boatcard .infos {
	position:relative;
	padding:10px 15px;
	box-sizing:border-box;
	white-space:nowrap;
}
#boatcard .infos[data-status] {
	display:none;
}
#boatcard.STA .infos[data-status*=" STA "],
#boatcard.ARV .infos[data-status*=" ARV "],
#boatcard.RAC .infos[data-status*=" RAC "],
#boatcard.PIT .infos[data-status*=" PIT "],
#boatcard.STM .infos[data-status*=" STM "],
#boatcard.NL .infos[data-status*=" NL "],
#boatcard.SUS .infos[data-status*=" SUS "],
#boatcard.NYS .infos[data-status*=" NYS "],
#boatcard.DNS .infos[data-status*=" DNS "],
#boatcard.DNC .infos[data-status*=" DNC "],
#boatcard.DNF .infos[data-status*=" DNF "],
#boatcard.DSQ .infos[data-status*=" DSQ "],
#boatcard.CNS .infos[data-status*=" CNS "],
#boatcard.RET .infos[data-status*=" RET "],
#boatcard.STB .infos[data-status*=" STB "],
#boatcard.CLG .infos[data-status*=" CLG "],
#boatcard.HLD .infos[data-status*=" HLD "],
#boatcard.REF .infos[data-status*=" REF "],
#boatcard.TRK .infos[data-status*=" TRK "],
#boatcard.SPT .infos[data-status*=" SPT "] {
 	display:block  !important;
}

#boatcard .infos .separator>* {
	padding-top:12px;
}
#boatcard .infos .var {
	width:100px;
	text-align:right;
	font-weight:bold;
}
#boatcard .infos .var:after {
	content:' : ';
}
#boatcard .infos .var:empty:after {
	content:'';
}
#boatcard .infos .value {
	text-align:right;
	padding:0 5px;
	min-width:50px;
	box-sizing:border-box;
}
	
#boatcard .infos .standby .var {
	display:inline-block;
	width:100px;
	line-height:25px;
}
	
#boatcard .infos .arrival {
	padding:7px;
}
#boatcard .infos .arrival .var {
	display:inline-block;
	width:100px;
	line-height:20px;
}
#boatcard .infos .arrival .time .value {
	display:inline-block;
	width:100px;
	text-align:right;
}
	
#boatcard .infos .otherstatus {
	padding:7px;
}
	
#boatcard .infos .atreport table {
}
#boatcard .infos .atreport .pos .value:before {
	content:'+';
}
#boatcard .infos .atreport .dtlprogress {
	margin-left:0.3em;
}
#boatcard .infos .atreport .dtlprogress.pos:before,
#boatcard .infos .atreport .dtlprogress.neg:before {
	font-size:smaller;
}
#boatcard .infos .atreport .dtlprogress.pos:before {
	content:'▲';
}
#boatcard .infos .atreport .dtlprogress.neg:before {
	content:'▼';
}
#boatcard.inlive .infos .atreport .date:after {
	content:' (live)';
}

#boatcard .infos .overg {
	opacity:0.6;
}
#boatcard .infos .overg .var {
	font-weight:normal;
}
#boatcard .infos .overg .var:after {
	content:'  ';
}
#boatcard .infos .environment {
	display:flex;
	justify-content:space-between;
	margin-top:7px;
}	
#boatcard .infos .environment .env {
	display:flex;
	flex-direction:column;
	align-items:center;
	width:auto;
}	
#boatcard .infos .environment .env .icon {
	display:flex;
	width:26px;
	height:26px;
}	
#boatcard .infos .environment .env svg {
	width:100%;
	height:100%;
}	

#boatcard .infos .live,
#boatcard .infos .live * {
	font-weight:bold;
	text-align:center;
}
#boatcard .infos .liveposition {
	font-weight:bold;
	text-align:center;
	margin:0 0 3px 0;
}
#boatcard .infos .lastreport {
	font-weight:bold;
	text-align:center;
	margin:5px 0 3px 0;
	padding-top:3px;
	border-top:1px solid rgba(255,255,255,0.4);
}
	
#boatcard .infos .off {
	display:none;
}
#boatcard .infos .pos.neg {
	display:none;
}
#boatcard .infos .neg.pos {
	display:none;
}
#boatcard .infos .latedate tt {
	display:inline-block;
}

#boatcard.STA .group.livepos {
	display:none;
}
#boatcard.STA.inlive .group.livepos {
	display:block;
}
#boatcard.STA.inlive .group.standby {
	display:none;
}
#boatcard.RET .rank,
#boatcard.DSN .rank,
#boatcard.DNF .rank,
#boatcard.DNC .rank,
#boatcard.CNS .rank,
#boatcard.DSQ .rank {
	color:transparent !important;
}
	
#boatcard .cross {
	z-index:1;
	display:none;
	position:absolute;
	top:5px;
	right:5px;
	
}
#boatcard .cross svg {
	width:14px;
	height:14px;
}
	
body.RECORD #boatcard .identity {
	padding:0 5px 0 65px;
}
#boatcard .infos .overn .over4h .value,
#boatcard .infos .overn .over24h .value {
	visibility:hidden;
}
body.OVER4H #boatcard .infos .overn .over4h .value,
body.OVER24H #boatcard .infos .overn .over4h .value {
	visibility:visible;
}
body.OVER24H #boatcard .infos .overn .over24h .value {
	visibility:visible;
}
#boatcard.ARV .infos .gapzero {
	display:none;
}
body.RECORD #boatcard.CMP .infos .attempt .value:first-of-type{
	opacity:1;
}
body.RECORD #boatcard.CMP .infos .attempt .value:first-of-type+dfn{
	font-style:italic;
}

body.TRACKING #boatcard header {
  grid-template-columns:auto 1fr;
  grid-template-rows:23px 20px 18px;
}
body.TRACKING #boatcard header .photos {
	grid-column: 1 / 2;
}
body.TRACKING #boatcard header .boat {
	grid-column: 2 / 3;
}
body.TRACKING #boatcard header .skippers {
	grid-column: 2 / 3;
}
	
}
	
	
/*### GEOBLOG ###*/
@media screen	{
#geoblog {
	--dx:0px;
	--dy:0px;
	display:none;
	position:absolute;
	left:calc(50% - 21px + var(--dx));
	top:calc(50% + var(--dy));
	transform:translate(-50%, -50%);
	width:480px;
	filter:drop-shadow(1px 1px 3px rgba(0,0,0,0.5));	
	border:1px solid;
}
#geoblog.on {
	display:block;
}
#geoblog>* {
	position:relative;
	display:block;
}
#geoblog header {
	cursor:pointer;
}
#geoblog.moving header {
	cursor:move;
}
#geoblog .identity,
#geoblog .infos {
	display:block;
}
#geoblog .identity {
	display:grid;
  grid-template-columns:auto 1fr;
  grid-template-rows:23px 20px 18px;
	box-sizing:border-box;
	white-space:nowrap;
	padding:5px;
}
#geoblog .identity.nophoto {
  grid-template-columns:auto 0 1fr;
}
#geoblog .identity .photos {
	grid-column: 1 / 2;
	grid-row:1 / 4;
	position:relative;
	margin-right:7px;
	box-sizing:border-box;
}
#geoblog .identity .nophoto .photos {
	display:none;
}
#geoblog .identity .boat {
	grid-column: 2 / 3;
	grid-row:1 / 2;
	box-sizing:border-box;
	display:flex;
	align-items:flex-start;
	font-size:16px;
	font-weight:bold;
	white-space:nowrap;
	line-height:1;
	padding-top:4px;
}
#geoblog .identity .skippers {
	grid-column: 2 / 3;
	grid-row:2 / 3;
	display:flex;
	align-items:flex-start;
	font-weight:bold;
}
#geoblog .identity .nat::before {
  display: inline-block;
  content: '';
  width: 15px;
  height: 10px;
  margin-right: 7px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%;
}

#geoblog .identity .fav {
	display:none;
}
#geoblog .rank {
	display:none;
}
#geoblog .infos {
	padding:5px;
}
#geoblog .infos>* {
	display:block;
}
#geoblog .position {
	font-size:12px;
	line-height:14px;
	opacity:0.5;
}
#geoblog .position .date:after,
#geoblog .position .lat:after {
	content:" • ";
}
#geoblog .title {
	font-size:16px;
	line-height:18px;
	font-weight:bold;
}
#geoblog .hat {
	white-space:normal;
	line-height:14px;
}
#geoblog article {
	position:relative;
	padding:0;
	box-sizing:border-box;
	overflow:auto;
	width:100%;
}
#geoblog article .nav {
	display:none;
	position:absolute;
	top:0;
	width:50%;
	bottom:0;
	padding:10px;
	box-sizing:border-box;
	align-items:center;
	opacity:0.6;
	cursor:pointer;
}
#geoblog article.nav .nav {
	display:flex;
}
#geoblog article .nav svg {
	width:40px;
	height:40px;
}
#geoblog article .nav.left {
	left:0;
	justify-content:start;
}
#geoblog article .nav.left path {
	transform:rotate(135deg);
}
#geoblog article .nav.right {
	right:0;
	justify-content:end;
}
#geoblog article .nav.right path {
	transform:rotate(-45deg);
}
#geoblog article.type0 {
	padding:10px 5px;
	height:auto;
	max-height:25vh;
	overflow:auto;
}
#geoblog article.type1 {
	aspect-ratio:1.78;
	overflow:hidden;
}
#geoblog article.type2 {
	overflow:hidden;
}
#geoblog article.type4 {
	overflow:hidden;
	max-height:inherit;
}
#geoblog footer {
	padding:5px;
}
#geoblog footer:empty {
	display:none;
}
#geoblog .wait {
	margin-left:calc(50% - 10px);
}
#geoblog .content {
	display:block;
	position:relative;
	width:100%;
	height:100%;
}
#geoblog #mediaPhoto {
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
}
#geoblog #mediaPhoto .img {
	display:none;
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat;
}
#geoblog #mediaPhoto .img:last-of-type {
	display:block;
}
#geoblog #mediaPhoto.mediaPhotos {
	overflow:auto;
}
#geoblog #mediaPhoto.mediaPhotos img {
	width:95%;
}
#geoblog #mediaVideo {
	position:relative;
	width:100%;
	height:auto;
}
#geoblog #mediaVideo:after {
	content:'';
	display:inline-block;
	width:0;
	padding:28.16% 0;
}
#geoblog #mediaVideo iframe {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;	
}
#geoblog #mediaPage {
	position:relative;
	min-width:480px;
	min-height:250px;
}
#geoblog #mediaAudio audio{
	width:100%;
}
#geoblog #mediaPage iframe {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;	
}
#geoblog .cross {
	display:block;
	position:absolute;
	right:0;
	top:0;
	bottom:0;
	cursor:pointer;
	opacity:0.5;
}
#geoblog .cross>svg {
	width:20px;
	height:20px;
}
#geoblog .arrow {
	position:absolute;
	top:0;
	left:0;
	pointer-events:none;
}
#geoblog .resize {
	position:absolute;
	bottom:0;
	right:0;
	height:29px;
	width:29px;
	display:flex;
	justify-content:end;
	align-items:end;
	clip-path:polygon(0 100%, 100% 0, 100% 100%);
	cursor:pointer;
}
#geoblog .resize.on {
	cursor:nwse-resize;
}
#geoblog .resize svg {
	height:28px;
	width:28px;
}
#geoblog .resize path {
	fill:none;
	stroke-width:2px;
}
	
}
	
	
/*### INFOPOINT ###*/
@media screen	{
#infopoint {
	display:none;
	position:absolute;
	left:calc(50% - 21px);
	top:50%;
	transform:translate(-50%, -50%);
	max-width:375px;
	filter:drop-shadow(1px 1px 3px rgba(0,0,0,0.5));	
	border:1px solid;
}
#infopoint article {
	height:100%;
	position:relative;
	cursor:pointer;
	overflow:auto;
}
#infopoint.on {
	display:block;
}
#infopoint h1 {
	font-size:22px;
	line-height:1.5;
	font-family:haettenschweiler;
	text-align:center;
}
#infopoint .content {
	padding:1em;
}
#infopoint .cross {
	display:block;
	position:absolute;
	right:0;
	top:0;
	bottom:0;
	cursor:pointer;
	opacity:0.5;
}
#infopoint .cross>svg {
	width:20px;
	height:20px;
}
#infopoint .arrow {
	position:absolute;
	top:0;
	left:0;
	pointer-events:none;
}
}
	
	
/*### FORECASTS ###*/
@media screen	{
#forecasts {
	--auto-size:1;
	--visible-hours:7;
	--variables-height:27px;
	--variables-skewval:calc(var(--variables-height) * var(--skewfactor));
	--hour-width:35px;
	--hour-height:27px;
	--hour-skewval:calc(var(--hour-height) * var(--skewfactor));
	--params-height:16px;
	--legend-width:calc(var(--hour-width) * var(--visible-hours));
	--gapleft-when-ontop:0px;
	--gapleft-when-under:0px;
	--top-when-under:var(--blockmark-half-height);
	--gapleft:var(--gapleft-when-ontop);
	max-width:calc(100vw - var(--blockmark-width) - var(--gapleft) + var(--hour-skewval) - 1px);
	position:absolute;
	display:none;
	flex-direction:column;
	flex-wrap:wrap;
	align-items:flex-end;
	top:0;
	right:0;
	text-align:right;
}
#forecasts.under {
	top:var(--top-when-under);
	--gapleft:var(--gapleft-when-under);
}
#forecasts.hidden {
	visibility:hidden;
}
#forecasts.hidden,
#forecasts.on {
	display:flex;
}
#forecasts .variables {
	--var-default-width:85px;
	--var-width:var(--var-default-width);
	height:var(--variables-height);
	clip-path:polygon(var(--variables-skewval) 0, 100% 0, 100% 100%, 0 100%);
	white-space:nowrap;
}
#forecasts .variables:empty {
	display:none !important;
}
#forecasts .variables .var {
	height:100%;
	display:inline-flex;
	justify-content:center;
	align-items:center;
	box-sizing:border-box;
	padding-left:var(--variables-skewval);
	padding-right:calc(6px + var(--variables-skewval));
	margin-right:calc(-1px - var(--variables-skewval));
	clip-path:polygon(var(--variables-skewval) 0, 100% 0, calc(100% - var(--variables-skewval)) 100%, 0 100%);
	cursor:pointer;
	text-align:center;
	width:var(--var-width);
	overflow:hidden;
}
#forecasts .variables .var .icon {
	display:flex;
	justify-content:center;
	align-items:center;
}
#forecasts .variables .var label {
	display:block;
	font-size:14px;
	line-height:14px;
	pointer-events:none;
}
#forecasts .variables .var .icon svg {
	width:26px;
	height:26px;
}
#forecasts.shrinked .variables .var .icon {
	margin-right:0;
}
#forecasts.shrinked .variables .var label {
	display:none;
}
#forecasts.shrinked .variables .var {
	width:auto;
}
	
#forecasts .scroll {
	position:relative;
	box-sizing:border-box;
	overflow:hidden;
	white-space:nowrap;
	width:calc(var(--hour-width) * var(--visible-hours) * 2);
	max-width:100%;
	height:var(--hour-height);
	font-size:0px;
	flex:auto;
	clip-path:polygon(var(--hour-skewval) 0, 100% 0, 100% 100%, 0 100%);
}
#forecasts .cursor,
#forecasts .wait {
	left:calc(100% - var(--visible-hours) * var(--hour-width));
	height:var(--hour-height);
}
#forecasts .cursor,
#forecasts .wait {
	position:absolute;
	top:0;
	cursor:inherit;
}
#forecasts .wait {
	padding:5px;
	box-sizing:border-box;
	width:var(--hour-width);
}
#forecasts .cursor {
	clip-path:polygon(var(--hour-skewval) 0, 100% 0, calc(100% - var(--hour-skewval)) 100%, 0 100%);
	margin-left:calc(0px - var(--hour-skewval) / 2);
	box-sizing:padding-box;
	width:calc(var(--hour-width) + var(--hour-skewval));
}
#forecasts .hours {
	--current-index:0;
	position:absolute;
	transition:left 0.2s	ease-in-out;
	height:var(--hour-height);
	left:calc(100% - (var(--visible-hours) + var(--current-index)) * var(--hour-width));
}
#forecasts .hours>div {
	position:relative;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	height:100%;
	width:var(--hour-width);
	padding:5px;
	vertical-align:top;
	font-size:14px;
	text-align:center;
	box-sizing:border-box;
	cursor:pointer;
}
#forecasts .hours>div.on {
	font-weight:bold;
	pointer-events:none;
}
#forecasts .hours>div.waiting {
	visibility:hidden;
}
#forecasts .params {
	display:flex;
	align-items:center;
	--thisskewval:calc(var(--params-height) * var(--skewfactor));
	height:var(--params-height);
	font-size:12px;
	clip-path: polygon(var(--thisskewval) 0, 100% 0, 100% 100%, 0 100%);
	padding-left:calc(10px + var(--thisskewval));
}
#forecasts .options {
	display:flex;
  justify-content:flex-end;
}
#forecasts .options .option {
	margin-right:12px;
	display:inline-flex;
	align-items:center;
	cursor:pointer;
}
#forecasts .options .option * {
	pointer-events:none;
}
#forecasts .options .onoff {
	--height:12px;
	--pad:1px;
}
#forecasts .options .onoff:before {
	opacity:0.5;
}
#forecasts .options .onoff:after {
	opacity:0.7;
}
#forecasts .options .onoff.on:before,
#forecasts .options .onoff.on:after {
	opacity:1;
}
#forecasts .options label {
	height:var(--params-height);
	line-height:var(--params-height);
	margin-left:3px;
}
body.TEMPAIR #forecasts .options .option.anim,
body.TEMPWATER #forecasts .options .option.anim,
body.CLOUDS #forecasts .options .option.anim {
	display:none;
}
#forecasts legend {
	width:var(--legend-width);
	height:var(--params-height);
	line-height:var(--params-height);
	font-size:0px;
}
#forecasts.withright legend {
	right:0;
}
#forecasts legend div {
	display:inline-block;
	height:100%;
	text-align:center;
}
#forecasts legend div span {
	font-size:11px;
	font-weight:bold;
	color:#FFFFFF;
}
#forecasts .advert {
	--height:16px;
	--thisskewval:calc(var(--height) * var(--skewfactor));
	height:var(--height);
	line-height:var(--height);
	text-align:left;
	font-size:12px;
	padding:0 5px 0 calc(var(--thisskewval) + 5px);
	clip-path: polygon(var(--thisskewval) 0, 100% 0, 100% 100%, 0 100%);
}
#forecasts.withright .advert {
	padding-right:var(--skewval);
}
#forecasts .advert .currentdate {
	display:inline-block;
}
#forecasts .advert .at {
	display:inline-block;
	margin-left:10px;
}
	body.INTHEPAST #forecasts .scroll {
	display:none;
}
#forecasttip {
	width:52px;
}
#forecasttip .icon {
	position:absolute;
	top:0;
	left:0;
	width:27px;
	height:27px;
}
#forecasttip .icon svg {
	position:absolute;
	top:1px;
	left:1px;
	width:100%;
	height:100%;
	fill:#000000;
	stroke:#000000;
}
#forecasttip .icon svg+svg {
	top:0;
	left:0;
	fill:#FFFFFF;
	stroke:#FFFFFF;
}
#forecasttip .origin {
	text-align:right;
	flex:auto;
	text-align:right;
	line-height:18px;
}
#forecasttip .value {
	text-align:right;
	flex:100%;
}
}
	
	
/*### CREDITS, COOKIES ###*/
@media screen	{
#credits,
#cookies {
	display:none;
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	z-index:9999;
}
#credits.on {
	display:block;
}
#credits .mask {
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	cursor:pointer;
	-webkit-backdrop-filter:blur(20px);
	backdrop-filter:blur(20px);
}
#credits>.mask {
}
#credits .frame {
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	width:80%;
	max-width:350px;
	max-height:80%;
	overflow:auto;
	font-size:16px;
	text-align:center;
	border:1px solid;
	box-shadow:1px 1px 3px 3px rgba(0,0,0,0.3);
}
#credits .content {
	position:relative;
	display:inline-block;
	padding:2vmin 4vmin;
}
#credits .credit {
	display:flex;
	flex-direction:column;
	align-items:center;
}
#credits big {
	font-family:haettenschweiler;
	font-size:21px;
}
#credits small {
	font-weight:bold;
}
#credits .content>div+div:before {
	content:'•';
	display:block;
}
#credits a, #credits a:link, #credits a:active, #credits a:visited {
	opacity:0.6;
}
#credits svg {
	max-height:75px;
}
#credits .credit_mwi svg {
	max-height:65px;
}
	
#credits .replayurl {
	display:block !important;
	line-height:21px;
}
}
	
	
/*### WAIT ###*/
@media screen	{
@keyframes uwait {
	0%	 {transform:rotate(0deg);}
	25%	{transform:rotate(90deg);}
	50%	{transform:rotate(180deg);}
	75%	{transform:rotate(270deg);}
	100% {transform:rotate(360deg);}
}	
.wait {
	display:none;
	width:20px;
	height:20px;
}
.wait svg {
	width:100%;
	height:100%;
	animation-name:uwait;
	animation-duration:1s;
	animation-iteration-count:infinite;
	transform-origin:50% 50%;
	animation-timing-function:steps(2, end);
}
.wait path {
	stroke-width:2px;
	stroke-linejoin:round;
	fill:none;
}
.waiting .wait {
	display:inline-block;
}
}
	
	
/*### SOCIALNETWORK ###*/
@media screen	{
#socialnetwork {
	position:absolute;
}
#socialnetwork a {
	display:block;
	width:20px;
	height:20px;
}
#socialnetwork.horiz a {
	display:inline-block;
	padding:0 2px;
}
#socialnetwork svg {
	width:100%;
	height:100%;
}
}
	
	
/*### CLOCK ###*/
@media screen	{
.clock b {
	font-weight:bold;
	opacity:1 !important;
}
.clock * {
	font-style:normal;
	text-decoration:none;
	font-weight:normal;
	opacity:1;
	display:inline-block;
	padding:1px 7px;
	border-left-width:0px;
	line-height:1.2;
}
.clock>*:first-child {
	border-left-width:1px !important;
}
}
	
	
/*### SPLASHSCREEN ###*/
@media screen {
#splashscreen {
	position:fixed;
	display:none;
	left:0;
	top:0;
	right:0;
	bottom:0;
}
#splashscreen.on {
	display:block;
}
#splashscreen .cross {
	position:absolute;
	top:5px;
	right:5px;
	width:40px;
	height:40px;
	cursor:pointer;
	border-radius:50%;
	font-size:4px; /*défini la durée du splashscreen*/
}
#splashscreen .cross svg {
	width:24px;
	height:24px;
	margin:8px;
}
	body.REPLAY #splashscreen,
	body.REPLAY #splashscreen.on {
	display:none !important;
}
}
	
	
/*### MISC ###*/
@media screen	{
	
	body.debugsig #sig {
	top:40%;
	right:40%;
	bottom:40%;
	left:40%;
	overflow:visible !important;
}
	body.debugsig #sig {
	border:1px solid #FF00FF;
}
	body.debugsig #bathyLayer {
	opacity:0.3;
}
	body.debugsig #reportlist {
	width:0 !important;
}
	body.debugsig #dashboard {
	width:0 !important;
}
	body.debugsig #map>svg {
	width:400% !important;
}
	
	
	div.msgNew {
	display:none;
	position:absolute;
	padding:0px 7px;
	font-weight:bold;
	background-color:#FF3315;
	height:26px;
	line-height:26px;
	box-sizing:border-box;
	animation-name:msgnew;
	animation-duration:3s;
	animation-iteration-count:1;
	opacity:0;
}
	div.msgNew:before {
	content:'New';
	color:#FFFFFF;
	text-transform:uppercase;
}
	div.msgNew:after {
	position:absolute;
	top:0;
	right:-7px;
	content:'';
	width:0;
	height:0;
	border-top:13px solid transparent; 
	border-left:7px solid #FF3315;
	border-bottom:13px solid transparent;
}
@keyframes msgnew {
	0%	{opacity:0;}
	16%	 {opacity:1;}
	33%	 {opacity:0;}
	50%	 {opacity:1;}
	66%	 {opacity:0;}
	83%	 {opacity:1;}
	100%	{opacity:0;}
}	
	
#exturlcontent {
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
}
#exturlcontent>span {
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
	background-color:rgba(0,0,0,0.1);
	cursor:revert;
}
	
#exturlcontent iframe {
	position:absolute;
	top:50%;
	left:50%;
	width:90%;
	max-width:500px;
	height:90%;
	transform:translate(-50%, -50%);
	background-color:#000000;
}
	
}
	

/*### HOVERS ###*/
@media (hover:hover) and (pointer:fine) {
.iconbutton.on:hover:before {
	display:block !important;
}
	
#reportswitch .button:hover {
	opacity:1;
}
#reportlist .row .fav:hover svg {
	stroke-opacity:1;
	fill-opacity:0.4;
}
#reportlist .row .fav.on:hover svg {
	stroke-opacity:1;
	fill-opacity:1;
}
#reportlist .row .linkout:hover {
	opacity:1;
}
#dashboard header .row .linkout:hover {
	opacity:1;
}
#dashboard section tt:hover {
	opacity:1;
}
#poiLayer g[rel="100000"] g:hover {
	opacity:1;
}
#mediaLayer .geomedia:hover {
	transform:scale(1.125);
}
#infosLayer .geoinfo:hover {
	transform:scale(1);
}	
#splittimesLayer .icon:hover>g {
	transform:scale(1.2);
}
#brackets:hover .start,
#brackets:hover .bracket {
	opacity:1;
}
#geoblog article .nav:hover {
	opacity:1;
}
#geoblog .cross:hover {
	opacity:1;
}
#infopoint .cross:hover {
	opacity:1;
}
#credits a:hover {
	opacity:1;
}
}
	
	
	
	
	