﻿body {
	--boatclasslist-height:40px;
}

#boatclasseslist .boatclass {
	display:flex;
	justify-content:center;
	align-items:center;
	font-size: calc(var(--default-font-size) / 14 * 16);
}
#boatclasseslist .boatclass:last-of-type {
	border-radius:0 12px 0 0;
}

#report {
  background-color: transparent;
}
/* #reportlist .row[rel='23'] .photos .img { */
	/* display:none; */
/* } */
/* #reportlist .row[rel='23'] .photos { */
	/* background-image:url(ambrogio.webp); */
	/* background-size:contain; */
/* } */

#display > .button {
	border-radius:12px 12px 0 12px;
}
#display .content {
	border-radius:12px 12px 0 12px;
}
#datetime::before {
	border-radius:0 12px 12px 0;
}
#tracksLayer>g>path {
	stroke:#FFFFFF !important;
}
#tracksLayer g#trk_171>path {
	stroke:#62FFC5 !important;
}

#crown {
	transform:scale(0.07) translate(-140px, -330px);
	fill:#FFFF12;
}

#areasLayer path.linked {
	cursor:pointer;
}
#areasLayer path.customarea {
	--color:transparent;
	display:none !important;
}
#areasLayer path.customarea.on {
	display:block !important;
}
#areasLayer path.customarea.fll {
	fill:var(--color);
	fill-opacity:0.15;
	stroke:none !important;
}
#areasLayer path.customarea.strk {
	stroke:var(--color);
	stroke-opacity:0.4;
	stroke-width:4px;
	fill:none !important;
}

#customareapage {
	--this-margin:10px;
	position:absolute;
	top:calc(var(--title-height) + var(--this-margin));
	left:calc(var(--report-width) + var(--dashboard-link-width) + var(--this-margin));
	bottom:calc(var(--time-height) + var(--this-margin));
	width:calc((100vw - var(--report-width) - var(--this-margin) * 2) / 3);
	min-width:var(--report-width);
	background-color:rgba(37,37,37,0.6);
	backdrop-filter:blur(10px);
	display:none;
	align-items:center;
	justify-content:center;
	border-radius:12px;
}
#customareapage.on {
	display:flex;
}
#customareapage iframe {
	height:100%;
	width:100%;
	border-radius:12px;
	background-color:transparent:
}
#customareapage .close {
	position:absolute;
	top:4px;
	right:4px;
	height:30px;
	aspect-ratio:1;
	transform:translate(50%, -50%);
	display:flex;
	align-items:center;
	justify-content:center;
	color:#FFFFFF;
	background-color:rgba(37,37,37,1);
	border-radius:50%;
	cursor:pointer;
}
#customareapage svg {
	width:100%;
	height:100%;
	fill:none;
	stroke:#FFFFFF;
	stroke-width:4px;
	transform:rotate(45deg);
}
