:root {
  --reportline_height:25px;
  --report_height:calc(25px * 6);
}

.bkgweft {
	background-image:none;
}

#logos {
	position:absolute;
	top:20px;
	left:30px;
	width:335px;
	height:100px;
	z-index:1000;
	font-size:0;
	overflow:hidden;
	border:3px solid #FFFFFF;
	border-radius:20px;
}
#logos:before {
	content:'';
	position:absolute;
	top:0;
	height:100%;
	right:-20px;
	width:100%;
	background-image:url(texture.png);
	background-position:top right;
	background-repeat:no-repeat;
	background-size:auto 100%;
	z-index:1001;
}
		#logos #logoaucb,
		#logos #partners {
			position:relative;
			display:block;
			z-index:1002;
		}
		#logos #logoaucb {
			width:155px;
			height:100px;
			float:left;
			background-size:contain;
		}
		#logos #partners {
			visibility:hidden;
			width:135px;
			height:90px;
			margin:5px 5px 0 0;
			float:right;
			overflow:hidden;
		}
		#logos #partners.on {
			visibility:visible;
		}
		#logos #partners a img {
			display:inline-block;
			width:100%;
			height:100%;
		}
		#logos #partners .partners a img {
			position:absolute;
			top:50%;
			left:50%;
			display:inline-block;
			width:auto;
			transform:translate(-50%, -50%);
		}

a#vr {
	top:20px;
	left:auto;
	right:30px;
	border-radius:10px;
	overflow:hidden;
}
	#vr .bkg {
		fill:rgba(0,0,0,0.4);
	}
nav {
	display:none;
}
#progressline {
	display:none;
}
	#buttons {
		top:50%;
		right:12px;
		bottom:auto;
		transform:translateY(-50%);
		background-color:transparent !important;
	}
		.iconbutton {
			margin:3px;
			border-radius:7px;
		}

		.iconbutton.on {
			background-color:rgba(0,0,32,0.6) !important;
		}
		.iconbutton:hover {
			background-color:rgba(0,0,32,0.6) !important;
		}
    .iconbutton:before {
			border:1px solid rgba(255,255,255,0.2);
			background-color:rgba(0,0,32,0.6) !important;
			color:#FFFFFF;
			border-radius:10px;
			backdrop-filter: blur(3px);
			right:calc(100% + 5px);
    }
#zoom {
	right:62px;
	bottom:auto;
	top:50%;
	transform:translateY(-50%);
}

#report,
#reportlistlabels {
	left:10vw;
	right:10vw;
}
#report {
	bottom:70px;
	top:auto;
	height:var(--report_height) !important;
	width:auto;
	min-height:auto;
}
		#reportList {
			top:0;
			backdrop-filter: blur(3px);
			border-radius:10px;
		}

				#reportList .row {
					position:relative;
					height:var(--reportline_height);
					font-size:14px !important;
					padding:0;
				}
				#reportList .row:before,
				#reportList .row:after {
					content:'';
					position:absolute;
					display:block;
					top:0;
					width:10px;
					height:100%;
					border:none !important;
					z-index:3;
					background-color:transparent;
				}
				#reportList .row:before {
					left:-10px;
					border-radius:10px 0 0 10px;
				}
				#reportList .row:after {
					right:-10px;
					border-radius:0 10px 10px 0;
				}

				#reportList .row:hover {
					background-color:rgba(255,255,255,0.1);
				}
				#reportList .row:hover:before,
				#reportList .row:hover:after {
					background-color:rgba(255,255,255,0.1);
				}
				#reportList .row.on:before,
				#reportList .row.on:after {
					background-color:#153075;
				}

						#reportList .row table {
							width:100%;
							height:100%;
						}
								#reportList .row table td {
									vertical-align:middle;
									white-space:nowrap;
								}
						#reportList .rank {
							position:absolute;
							top:0;
							bottom:0;
							left:0;
							width:25px;
							font-size:18px !important;
						}
								#reportList .rank  .val {
									position:absolute;
									right:0;
									top:50%;
									transform:translateY(-50%);
								}
						#reportList .identity {
							position:absolute;
							top:0;
							bottom:0;
							left:40px;
							width:180px;
						}
								#reportList .identity .color {
									position:absolute;
									top:50%;
									left:5px;
									width:14px;
									height:14px;
									border-radius:50%;
									transform:translateY(-50%);
								}
								#reportList .identity .name {
									position:absolute;
									top:50%;
									left:0;
									transform:translateY(-50%);
									white-space:nowrap;
								}
						#reportList .infos  {
							position:absolute;
							top:0;
							bottom:0;
							left:220px;
							right:10px;
							margin: 0 0 0 0;
						}
								#reportList .infos.ARV small  {
									display:none;
								}
								#reportList .row .infos table td {
									text-align:right;
									padding:0 5px;
								}
								#reportList .row .infos table td.dtl .progress {
									display:inline-block;
									position:relative;
									width:55px;
									text-align:right;
								}
								#reportList .row .infos table td.dtl .progress:before {
									font-size:9px;
									position:absolute;
									top:50%;
									transform:translateY(-50%);
									left:4px;
								}
								#reportList .row .infos table td.dtl .pos:before {
									content:'▲';
								}
								#reportList .row .infos table td.dtl .neg:before {
									content:'▼';
								}
								#reportList .row .infos table td.dtl .pos,
								#reportList .row .infos table td.dtl .pos * {
									color:#C1F786 !important;
								}
								#reportList .row .infos table td.dtl .neg,
								#reportList .row .infos table td.dtl .neg * {
									color:#F5878A !important;
								}
								#reportList .row .infos table td.arrived {
									text-align:left;
								}
								#reportList .row .infos table td.speed {
									text-align:right;
								}
								#reportList .row .infos table td.speed u {
									display:inline-block;
									width:55px;
									opacity:0.6;
								}
								#reportList .row .infos table td.retired {
									text-align:center !important;
								}

						#reportList .row > input {
							left:190px;
							top:50% !important;
							transform:translateY(-50%);
						}
						#reportList .row.ARV + div.RAC_1 {
							border-top:inherit;
						}

		#reportlistlabels {
			position:absolute;
			bottom:225px;
			height:30px;
			box-sizing: border-box;
			z-index:500;
			background-color:#000000;
			backdrop-filter: blur(3px);
			border-radius:10px;
		}

				#reportlistlabels table {
					margin-left:220px;
					width:calc(100% - 230px);
					height:100%;
				}
						#reportlistlabels table td {
							vertical-align:middle;
							text-align:right;
							font-size:16px;
							padding:0 5px;
						}
						#reportList .row .infos table td.hour,
						#reportlistlabels table td.hour {
							width:13%;
						}
						#reportList .row .infos table td.dtl,
						#reportlistlabels table td.dtl {
							width:26%;
						}
						#reportList .row .infos table td.heading,
						#reportlistlabels table td.heading {
							width:9%;
						}
						#reportList .row .infos table td.speed,
						#reportlistlabels table td.speed {
							width:17%;
						}
						#reportList .row .infos table td.h24,
						#reportlistlabels table td.h24 {
							width:17%;
						}
						#reportList .row .infos table td.dtf,
						#reportlistlabels table td.dtf {
							width:17%;
						}
						#reportlistlabels table td.dtf {
							padding-right:10px;
						}
						#reportlistlabels table td small {
							display:none;
						}

				#reportlistlabels .arrow {
					position:absolute;
					top:1px;
					left:-10px;
					width:28px;
					height:28px;
					border-radius:50%;
					cursor:pointer;
					background-color:#FFFFFF;
					stroke:#000000;
				}
				#reportlistlabels .arrow:hover {
					background-color:#E6202C;
					stroke:#FFFFFF;
				}
						#reportlistlabels .arrow svg {
							width:100%;
							height:100%;
							stroke-width:2px;
							fill:none;
						}
#sig {
	top:0;
	left:0;
	right:0;
	bottom:0;
}
#areasLayer .cetaces {
	cursor:help;
}

#graphics {
	left:calc(10vw + 220px);
	right:10vw;
	width:auto;
	top:auto;
	height:var(--report_height);
	bottom:70px;
	z-index:1000;
	backdrop-filter: blur(6px);
	background-color:transparent !important;
}
			#graphics .variables {
				position: relative;
				margin-left:auto;
				margin-right:auto;
				background-color:transparent !important;
			}
			#graphics .drawing {
				top:35px;
			}
			#graphics .legend {
				top:35px;
			}
			#graphics .variables::before, 
			#graphics .variables::after {
				display:none;
			}

#zoomwindow {
	left:10vw;
	top:150px;
	right:10vw;
	bottom:290px;
}

#forecasts {
	top:0px;
	left:50%;
	transform:translateX(-50%);
	right:auto;
}
		#forecasts * {
			font-family:ptsans !important;
			font-size:14px !important;
		}
		#forecasts legend {
			font-size:0 !important;
		}
		#forecasts section {
			width:345px;
		}
		#forecasts .list {
			width:205px;
		}
		#forecasts legend div span {
			bottom:-19px;
		}
		#forecasts .advert {
			bottom:-37px;
		}


#time {
	left:10vw;
	right:auto;
	width:80vw;
	bottom:15px;
	border-radius:10px;
}
#timekeeper {
	min-width:auto;
}
#chrono {
	padding: 0 8px;
}
#keeperlogo {
	position:relative;

}
	#keeperlogo::after {
		content: '';
		position: absolute;
		display: block;
		top:0;
		width:10px;
		height:100%;
		border:none !important;
		z-index: 3;
		right:-10px;
		background-color:#E6202C;
		border-radius:0 10px 10px 0;
	}
	#keeperlogo tt {
		position:absolute;
		display:none;
		bottom:-2px;
		left:50%;
		transform:translateX(-50%);
		font-size:12px;
	}
	#keeperlogo:hover tt {
		display:block;
	}
#coords {
	right:15px;
	bottom:15px;
	height:32px;
	line-height:16px;
	left:auto;
}
		#coords .lat, 
		#coords .lng {
			display:block;
			text-align:right;
		}
		#coords .lat::after {
			display:none;
		}

#boatcard {
	filter:none;
}
		#boatcard article {
			background-color: rgba(0,0,32,0.4);
			backdrop-filter: blur(3px);
		}
		#boatcard .identity {
			color: #FFFFFF;
			background:transparent;
		}
		#boatcard .infos {
			padding-top:10px;
		}
				#boatcard .infos::before {
					display:none;
				}
				#boatcard .infos .latedate tt {
					display:none;
				}
				#boatcard .infos .speeds .overg {
					display:none;
				}
				#boatcard .infos .speed > *, 
				#boatcard .infos .vmg > *, 
				#boatcard .infos .distance > * {
					padding-top:0;
				}
				#boatcard .infos fieldset {
					margin-bottom:0;
				}
				#boatcard .infos .km {
					opacity:0.6;
				}
				#boatcard .infos .km th:after {
					display:none;
				}
				#boatcard .infos .speed>*,
				#boatcard .infos .distance>* {
					padding-top:5px;
				}
				#boatcard .infos .dist .dtlprogress {
					margin-left:0;
				}
				#boatcard .infos .dist .dtlprogress::before {
					display:none;
				}
				#boatcard .infos .dist .dtlprogress .nm:before {
					font-size:smaller;
				}
				#boatcard .infos .dist .dtlprogress.pos .nm:before {
					content:'▲';
				}
				#boatcard .infos .dist .dtlprogress.neg .nm:before {
					content:'▼';
				}
#main.leaderboardClosed #reportlistlabels .arrow {
	transform:rotate(180deg);
}
#main.leaderboardClosed #report {
	display:none;
}
#main.leaderboardClosed #reportList {
	display:none;
}
#main.leaderboardClosed #reportlistlabels {
	top:auto;
	bottom:45px;
	height:0;
}
#main.leaderboardClosed #reportlistlabels table {
	display:none;
}
#main.leaderboardClosed #reportlistlabels .arrow {
	top:-45px;
}
#main.leaderboardClosed #reportlistlabels td * {
	visibility:hidden;
}



#areasLayer .cetaces {
	fill:rgba(28,151,225,0.3) !important;
	stroke:rgba(28,151,225,0.5) !important;
}


#zpcwindow {
	display:none;
	position:absolute;
	z-index:10000;
	bottom:270px;
	right:150px;
	width:300px;
	border:1px solid rgba(28,151,225,0.8);
	border-radius:15px;
	background-color:rgba(28,151,225,0.3);
	padding:10px;
	box-sizing:border-box;
	backdrop-filter: blur(3px);
}
#zpcwindow.on {
	display:block;
}
		#zpcwindow article {
			text-align:center;
		}
		#zpcwindow h1,
		#zpcwindow h4 {
			text-transform:uppercase;
			font-weight:bold;
			font-size:16px;
			line-height:33px;
		}
		#zpcwindow h2 {
			text-transform:uppercase;
			font-weight:bold;
			font-size:22px;
			line-height:30px;
		}
		#zpcwindow h5 {
			font-size:18px;
			line-height:22px;
		}
		#zpcwindow img {
			width:100%;
			border-radius:10px;
			aspect-ratio:280/224;
		}

		#zpcwindow h2,
		#zpcwindow h5 {
			display:none;
		}
		#zpcwindow h6 {
			font-style:italic;
			opacity:0.7;
			font-size:14px;
		}
		#zpcwindow .cross {
			position:absolute;
			top:0;
			right:0;
			transform:translate(50%, -50%);
			background-color:#FFFFFF;
			border-radius:50%;
			height:26px;
			width:26px;
		}		
		#zpcwindow .cross svg {
			fill:#000000;
		}
		#zpcwindow .cross:hover {
			background-color:#E6202C;
		}
		#zpcwindow .cross:hover svg {
			fill:#FFFFFF;
		}
				#zpcwindow .cross svg {
					height:26px;
					width:26px;
					cursor:pointer;
				}
		#zpcwindow.zpc1 .zpc1,
		#zpcwindow.zpc2 .zpc2,
		#zpcwindow.zpc3 .zpc3,
		#zpcwindow.zpc3 .zpc3,
		#zpcwindow.zpc4 .zpc4,
		#zpcwindow.zpc5 .zpc5,
		#zpcwindow.zpc6 .zpc6,
		#zpcwindow.zpc7 .zpc7,
		#zpcwindow.zpc8 .zpc8,
		#zpcwindow.zpc9 .zpc9 {
			display:block;
		}

#poiLayer g.cape path {
	fill:#E6202C;
}

#geoblog {
	display: none;
	position: absolute;
	left:50px;
	top:130px;
	z-index:999999;
}