/*### COMMON ###*/
@media screen	{
	body {
		--skewfactor:0;
		--geovoile-height:50px;
		--dashboard-link-width:15px;
		--rdr-margins:30px;
	}
	#vr,
	#display,
	#gridlines,
	#brackets,
	#zoom .button .edges,
	#dates,
	#reportswitch,
	#chrono {
		display:none !important;
	}

	#blockmark {
		background-color:transparent;
		padding:15px 0 15px var(--rdr-margins);
		box-sizing:border-box;
		pointer-events:none !important;
	}

	#sig svg {
		--ground-color:#84B77E;
	}

	#groundLayer path {
		fill:var(--ground-color);
	}

	#groundshadow {
		--ground-color:#FFF2B0;
	}

	#tools {
		--button-width:38px;
		--button-height:38px;
		right:var(--rdr-margins);
	}
	#tools .iconbutton.ruler {
		display:none;
	} 
	
	#zoom {
		height:122px;
		margin-top:20px;
	}
	#zoom .button{
		border-radius:50% !important;
	}
	
	#time {
		--date-radius:15px;
		background-color:transparent;
	}
	#refresh {
		border-radius:var(--date-radius) 0 0 var(--date-radius);
	}
	#replay {
		background-color:#FFFFFF;
		margin-left:0px;
		border-radius:0 var(--date-radius) var(--date-radius) 0;
	}
	#replay .gauge .backward,
	#replay .gauge .forward {
		background-color:rgba(0,0,0,0.5);
	}
	#replay .buttons {
		opacity:1;
	}
	#replay .gauge .bar {
		background-color:#000000;
	}
	#replay .cursor {
		width:12px;
		height:12px;
		margin-left:-6px;
	}
	#timeline .bar, 
	#timeline .backbar, 
	#timeline .interval {
		height:8px;
	}
	#timeline .bar, 
	#timeline .backbar {
		border-radius:4px;
	}
	
	#credits {
		bottom:10px;
		right:10px;
	}
	
	#forecasts {
		display:flex;
		top:var(--rdr-margins);
		right:var(--rdr-margins);
	}
	#forecasts .dates, 
	#forecasts .params,
	#forecasts legend,
	#forecasts .advert,
	#forecasts .variables .var[rel="gusts"],
	#forecasts .variables .var[rel="current"],
	#forecasts .variables .var[rel="tempair"],
	#forecasts .variables .var[rel="clouds"],
	#forecasts .variables .var[rel="tempwater"] svg>path:nth-child(3) {
		display:none !important;
	}
	#forecasts .close {
		width:31px;
		aspect-ratio:1;
		stroke:#FFFFFF;
		stroke-width:3px;
		stroke-linecap:round;
		display:none;
		justify-content:center;
		align-items:center;
		cursor:pointer;
	}
	body.WIND #forecasts .close,
	body.WAVES #forecasts .close,
	body.TEMPWATER #forecasts .close {
		display:flex;
	}
	#forecasts .close:hover {
		stroke:#FCF05C;
	}
	#forecasts .close svg {
		width:20px;
		aspect-ratio:1;
	}

	#report {
		background-image:none;
		background-color:rgba(20,46,81,0.2);
		border-radius:0 20px;
		padding:var(--rdr-margins);
		left:var(--rdr-margins);
		top:var(--blockmark-height);
		bottom:calc(var(--time-height) + var(--rdr-margins) * 2);
	}

	#boatclasseslist {
		margin-bottom:var(--rdr-margins);
	}
	
	#reportlist {
		--margin-top-dashboard:22px;
		--rdr-photo-size:75px;
		--rdr-row-margin-left:38px;
		width:calc(100% + var(--margin-top-dashboard));
		padding-left:var(--rdr-row-margin-left);
	}
	#reportlist .row {
		grid-template-columns:0 calc(var(--rdr-row-margin-left) + 5px) 1fr;
		grid-template-rows: 48px 27px 0;
		position: relative;
		border-radius:0 12px 0 0;
		margin-left:0;
		margin-bottom:25px;
		width:calc(100% - var(--rdr-row-margin-left) - var(--margin-top-dashboard));
		border:0px !important;
		transform:scale(0.93);
		background:
		          url(report_row_bkg_white.svg) right center / auto 100% no-repeat,
		          linear-gradient(90deg, #5FBFC0, #B7DED5);
	}
	#reportlist .row.on {
		transform:scale(1);
		background:
		          url(report_row_bkg_white.svg) right center / auto 100% no-repeat,
		          linear-gradient(90deg, #FBF050, #F5C243);
	}
	#reportlist .row .rank {
		position:absolute;
		top:0;
		left:calc(0px - var(--rdr-row-margin-left));
		color:#FFFFFF;
	}
	#reportlist .row .photos {
		position:absolute;
		top:0;
		left:calc(0px - var(--rdr-row-margin-left));
		mask-image:url('rank_bkg.svg');
		mask-repeat:no-repeat;
		mask-position:center;
		mask-size:contain;
		height:var(--rdr-photo-size);
		width:auto;
		aspect-ratio:135 / 137;
		padding:0;
		margin:0;
	}
	#reportlist .row .photos .img {
		width:auto;
	}
	#reportlist .row.on .open {
		height:50px;
		top:50%;
		transform:translateY(-50%);
	}
	#reportlist .row .infos {
		display:none !important;
		visibility:none !important;
	}
	#reportlist .row .boat {
		grid-row:2;
		padding-top:0;
		flex-direction:column;
		justify-content:flex-start;
		align-items:flex-start;
	}
	#reportlist .row .skippers {
		grid-row:1;
		color:#FFFFFF;
	}
	#reportlist .row.on .skippers {
		color:#FFFFFF;
	}
	#reportlist .row .skippers .skipper {
		display:flex;
		flex-direction:column;
		justify-content:center;
		align-items:flex-start;
		height:100%;
		width:100%;
		font-size:0px;
	}
	#reportlist .row .skippers .skipper>div {
		font-size:16px;
	}
	#reportlist .row .fav {
		display:none;
	}
	#reportlist .row .skippers .nat {
		display:none;
	}
	#boatsLayer > g circle.focus {
		display:none !important;
	}

	#dashboard .sectiontitle {
		font-weight:800;
		text-transform:uppercase;
		color:#4DB7B7;
		font-size:22px;
		margin-bottom:20px;
	}
	body.DASHBOARD #reportlist .row.on .open {
		visibility:visible;
		width:60px;
		right:-60px;
		pointer-events:initial;
		border-radius:0px;
	}
	body.DASHBOARD #reportlist .row.on .open svg {
		transform: rotate(180deg);
	}

	#boatcard {
		border-radius:10px 0;
		background: linear-gradient(to right, #5DBFC0, #39778C);
	}
	#boatcard header {
		grid-template-rows: 22px 20px;
	}
	#boatcard .infos .group {
		margin-top:0px;
		padding:3px 0;
	}
	#boatcard .infos .var {
		width:114px;
	}
	#boatcard.RAC .infos .value {
		width:33px;
	}
	#boatcard.STA article {
		min-width:0px;
	}

	#areasLayer path.zpc {
		fill:rgba(18,48,80,0.3);
		stroke:none;
	}
	#areasLayer path#zpc_acores,
	#areasLayer path#zv_madere {
		display:none;
	}

}



/*### RDRSCHOOL ###*/
@media screen	{
	#rdrcompass {
		position: absolute;
		bottom:0;
		right:10px;
		fill:#FFFFFF;
		stroke:none;
		width:100px;
		aspect-ratio:1;
		pointer-events:none;
	}

	#rdrdaynightstars {
		position:absolute;
		top:0;
		left:0;
		right:0;
		bottom:0;
		pointer-events:none;
	}
	#rdrdaynightstars .star {
		--rotate:12deg;
		--scale:1;
		position:absolute;
		width:20px;
		height:20px;
		transform:translate(-50%, -50%) rotate(var(--rotate)) scale(var(--scale));
		background-size:contain;
		background-repeat:no-repeat;
	}
	#rdrdaynightstars .star.startype1 {
		background-image:url(icon_star_1.svg);
	}
	#rdrdaynightstars .star.startype2 {
		background-image:url(icon_star_2.svg);
	}

	#poiLayer .schoolpoi {
		/*pointer-events:none;*/
	}
	#poiLayer>g>g:not(.schoolpoi) {
		display:none;
	}
	#poiLayer .schoolpoi circle {
		display:none;
	}
	#poiLayer #city_saint_malo_school text {
		font-family:Montserrat;
		font-weight:800;
		font-size:18px;
		text-shadow:none;
	}
}



/*### RDRDASHBOARD ###*/
@media screen	{
	#rdrdbheader {
		--img-size:75px;
		display:flex;
		flex-direction:column;
	}
	#rdrdbheader .board {
		display:flex;
		align-items:center;
		border-bottom:1px solid rgba(255,255,255, var(--rdr-dashboard-line_opacity));
	}
	#rdrdbheader .title {
		text-transform:uppercase;
		padding-left:0.5em;
		font-size:14px;
		font-weight:600;
	}
	#rdrdbheader .date {
		text-transform:uppercase;
		padding-left:0.5em;
		font-size:12px;
		font-weight:600;
		border-left:1px solid rgba(255,255,255, var(--rdr-dashboard-line_opacity));
		margin:0 10px;
	}
	#rdrdbheader .identity {
		display:grid;
		column-gap:10px;
		grid-template-columns:1fr 1fr;
		margin:0 0 20px 0;
		border-top:1px solid rgba(255,255,255,0.3);
		border-bottom:1px solid rgba(255,255,255,0.3);
	}
	#rdrdbheader .identity .skipper {
		grid-row:1;
		grid-column:1;
		display:grid;
		grid-template-columns:90px auto;
		border-right:1px solid rgba(255,255,255,0.3);
		padding:15px;
	}
	#rdrdbheader .identity .skipper .photo {
		grid-column:1;
		grid-row:1 / 4;
	}
	#rdrdbheader .identity .skipper .photo .img {
		display:flex;
		justify-content:center;
		overflow:hidden;
		border-radius:50%;
		align-items:center;
		width:var(--img-size);
		height:var(--img-size);
		pointer-events:none;
	}
	#rdrdbheader .identity .skipper .photo .img img {
		border-radius:50%;
		width:calc(100% - 4px);
		height:calc(100% - 4px);
	}
	#rdrdbheader .identity .skipper .name {
		grid-column:2;
		grid-row:1;
		font-size:18px;
		font-weight:var(--skippername-font-weight);
	}
	#rdrdbheader .identity .skipper .age {
		grid-row:2;
	}
	#rdrdbheader .identity .skipper .charm {
		grid-row:3;
	}
	#rdrdbheader .identity .skipper em {
		font-weight:bold;
		text-transform:uppercase;
	}
	#rdrdbheader .identity .skipper .name {
		display:flex;
	}
	#rdrdbheader .identity .skipper .name small {
		text-transform:uppercase;
	}
	#rdrdbheader .identity .boat {
		grid-row:1;
		grid-column:2;
		display:flex;
		padding:15px 0;
	}
	#dashboard header.RAC #rdrdbheader .identity .boat {
		width:50%;
	}
	#rdrdbheader .identity .boat .photo {
		margin-right:5px;
	}
	#rdrdbheader .identity .boat .name {
		font-size:14px;
		font-weight:var(--boatname-font-weight);
	}

	#rdrdhenvironment {
		display:flex !important;
		gap:10px;
		padding:0 10px;
		margin-bottom:50px;
	}
	#rdrdhenvironment>div {
		flex:1 1 0;
		min-width:0;
		display:flex;
		flex-direction:column;
		justify-content: space-between;
		align-items: center;
		min-width:200px;
	}
	#rdrdhenvironment .gauge {
		height:90px;
		position:relative;
	}
	#rdrdhenvironment .weather .gauge {
		aspect-ratio:48 / 21;
		background-image:url(school_weather_bkg.svg);
		background-size:contain;
	}
	#rdrdhenvironment .wind .gauge {
		aspect-ratio:373 / 191;
		background-image:url(school_wind_bkg.svg);
		background-size:contain;
	}
	#rdrdhenvironment .gauge .needle {
		position:absolute;
		bottom:-8px;
		left:50%;
		transform-origin: center bottom;
		height:55px;
		aspect-ratio:40 / 148;
		background-image:url(school_needle.svg);
		background-size:contain;
	}
	#rdrdhenvironment .temp var {
		font-weight:800;
		text-transform:uppercase;
		color:#FCF05C;
		font-size:42px;
	}

	#rdrspeedslunches {
		display:flex;
		border-top:1px solid rgba(255,255,255,0.3);
		padding-top:25px;
	}
	#rdrspeedslunches>div {
		flex:1 1 0;
		min-width:0;
		display:flex;
		flex-direction:column;
		align-items:center;
	}
	#rdrspeedslunches .content {
		display:flex;
		justify-content:center;
	}
	#rdrspeedslunches .content .rdrgroup {
		display:flex;
		flex:1 1 0;
		flex-direction:column;
		align-items:center;
		min-width:150px;
	}
	#rdrspeedslunches .content .rdrgroup.moy {
		border-right:1px solid rgba(255,255,255,0.3);
	}
	#rdrspeedslunches .content .label {
		font-size:13px;
		text-transform: uppercase;
		margin-bottom:7px; 
		white-space:nowrap;
	}
	#rdrspeedslunches .content .var {
		display:flex;
		align-items:baseline;
	}
	#rdrspeedslunches .content .var .value {
		font-size:24px;
		font-weight:600;
		padding-right:5px;
	}
	#rdrspeedslunches .content .var.small {
		color:#FCF05C;
	}
	#rdrspeedslunches .content .var.small .value {
		font-size:12px;
	}
	#rdrspeedslunches .content .var.small .unit {
		font-size:10px;
	}

}



/*### ONBOARDING ###*/
@media screen	{
	#onboarding {
		position:absolute;
		top:0;
		left:0;
		right:0;
		bottom:0;
		z-index:20000;
		overflow:hidden;
		display:flex;
		flex-direction:column;
		align-items:center;
		justify-content:center;
		visibility:hidden;
	}
	#onboarding.on {
		visibility:visible;
	}
	#onboarding .mask {
		position:absolute;
		top:0;
		left:0;
		right:0;
		bottom:0;
	}
	#onboarding .mask svg {
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
	}
	#onboarding .mask svg path.dark {
		fill:transparent;
	}
	#onboarding .mask svg path.link {
		stroke:#FFFEEC;
		stroke-width:3;
		fill:none;
	}
	#onboarding .mask .blur {
		position:absolute;
		inset:0;

		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);

		clip-path: url(#onboardingclip);
		-webkit-clip-path: url(#onboardingclip);

		background:rgba(0,0,0,0.5);
	}
	#onboarding .content {
		display:flex;
		flex-direction:column;
		align-items:flex-end;
		justify-content:center;
		max-width:30%;
		min-width:300px;
		height:100%;
		font-size:max(12px, min(16px, 1.2vw));
	}
	#onboarding .content>* {
		position:relative;
		flex:1 1 0;
		display:flex;
		flex-direction:column;
		align-items:center;
	}

	#onboarding .message {
		justify-content:flex-end;
		margin-bottom:1vw;
	}
	#onboarding .message::after {
		content:'';
		position:absolute;
		bottom:48px;
		right:10px;
		transform:translate(100%, 100%);
		width:200px;
		aspect-ratio:1;
		background:url(tymal_onboarding.svg);
		background-size:contain;
	}
	#onboarding .text {
		position:relative;
		padding:1em;
		border-radius:1em;
		background:linear-gradient(to right, #4DB5B6, #122F4F);
		text-align:left;
		color:#FFFFFF;
	}
	#onboarding .buttons {
		justify-content:flex-start;
		color:#FFFFFF;
		stroke:#FFFFFF;
		font-size:smaller;
		line-height:2;
		cursor:pointer;
	}
	#onboarding .buttons>div {
		display:flex;
		flex-direction:column;
		align-items:flex-end;
		justify-content:center;
		padding:0.5em;
	}
	#onboarding .buttons>div>div {
		display:flex;
		align-items:center;
		justify-content:flex-end;
	}
	
	body.ONBOARDING_forecast #forecasts {
		display:block;
	}
	body.ONBOARDING_forecast #vr {
		display:none;
	}
	body.ONBOARDING_display #display {
		display:block;
	}

	#rdrwelcome {
		display:none;
		position:absolute;
		top:0;
		left:0;
		right:0;
		bottom:0;
		display:flex;
		justify-content:center;
		align-items:center;
		visibility:hidden;
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		background:rgba(0,0,0,0.5);
	}
	#rdrwelcome.on {
		visibility:visible;
	}
	#rdrwelcome .screen {
		position:relative;
		aspect-ratio:1000 / 656;
		width:75vw;
		max-width:800px;
		background-image:url(onboarding_welcome_screen_school.png);
		background-size: contain;
		border-radius:1vh;
	}

}



/*### RDRVERSIONS ###*/
@media screen	{
	#rdrversions {
		position:absolute;
		bottom:2px;
		left:50%;
		transform:translateX(-50%);
		display:flex;
		align-items:center;
		background-color:#FFFFFF;
		color:#151A2E;
		border-radius:12px;
		height:22px;
		line-height:22px;
	}
	#rdrversions>a {
		padding:0 1px 0 1em;
		display:flex;
		align-items:center;
		height:calc(100% - 2px);
		cursor:pointer;
	}
	#rdrversions>a::after {
		content:'';
		display:inline-block;
		height:100%;
		aspect-ratio:1;
		border-radius:50%;
		margin-left:0.5ex;
		background-color:#5DBFC0;
	}
	#rdrversions>a.school::after {
		background-image:url(tymal_version.svg);
		background-size:contains;
	}
	#rdrversions>a.school {
		pointer-events:none;
	}
}



/*### RDRCLASSES ###*/
@media screen	{
	#boatclasseslist .boatclass,
	#rdrdbheader .boatclass {
		--class-id:0;
		--icon-size:35px;
		position:relative;
		display:flex;
		align-items:center;
		justify-content:center;
		padding:3px 0 0 7px;
		background-color:transparent;
		color:#FFFFFF;
		font-size:12px;
		font-weight:600;
		line-height:1;
		border-radius:0 7px 0 7px;
		box-sizing:border-box;
		height:40px;
	}
	#boatclasseslist .boatclass {
		--class-index:0;
		margin-left:-7px;
		z-index:calc(100 - var(--class-index));
	}
	#boatclasseslist .boatclass[data-index="0"],
	#rdrdbheader .boatclass[data-index="0"] {
		margin-left:0;
		padding:0 3px 0 4px;
	}
	body.RDRSCRATCH  #boatclasseslist .boatclass.on .text {
		display:none !important;
	}
	#boatclasseslist .boatclass::before,
	#rdrdbheader .boatclass::before {
		content:'';
		height:var(--icon-size);
		aspect-ratio:1;
		background-image:url(icons_classes.svg);
		background-repeat:no-repeat;
		background-size:auto 100%;
		background-position-x:calc(-1 * var(--icon-size) * (var(--class-index) + 0.5));
	}
	#boatclasseslist .boatclass .text,
	#rdrdbheader .boatclass .text {
		display:none;
		padding-right:5px;
		width:50px;
	}
	#boatclasseslist .boatclass.on,
	#rdrdbheader .boatclass.on {
		background-color:transparent;
	}
	#boatclasseslist .boatclass.on .text,
	#rdrdbheader .boatclass.on .text {
		display:block;
	}
	#boatclasseslist .boatclass[rel="2"],
	#rdrdbheader .boatclass[rel="2"] {
		--class-index:0;
		background-color:#659DBE !important;
		color:#FFFFFF;
	}
	#boatclasseslist .boatclass[rel="4"],
	#rdrdbheader .boatclass[rel="4"] {
		--class-index:1;
		background-color:#56BCF6;
		color:#FFFFFF;
	}
	#boatclasseslist .boatclass[rel="1"],
	#rdrdbheader .boatclass[rel="1"] {
		--class-index:2;
		background-color:#7894F7;
		color:#FFFFFF;
	}
	#boatclasseslist .boatclass[rel="3"],
	#rdrdbheader .boatclass[rel="3"] {
		--class-index:3;
		background-color:#5DBFC0;
		color:#FFFFFF;
	}
	#boatclasseslist .boatclass[rel="5"],
	#rdrdbheader .boatclass[rel="5"] {
		--class-index:4;
		background-color:#FCF150;
		color:#092b47;
	}
	#boatclasseslist .boatclass[rel="6"],
	#rdrdbheader .boatclass[rel="6"] {
		--class-index:5;
		background-color:#F19F39;
		color:#FFFFFF;
	}

}



/*### RDRTYMAL ###*/
@media screen	{
	#rdrtymal {
		display:flex;
		align-items:center;
		margin-top:20px;
		cursor:pointer;
	}
	#rdrtymal .image {
		aspect-ratio:1;
		min-width:100px;
		background-image:url(tymal_version.svg);
		background-size:contains;
	}
	#rdrtymal .phrase {
		display:flex;
		align-items:center;
		color:#FFFFFF;
		font-weight:600;
		font-size:14px;
		min-height:100px;
		max-height:100px;
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		padding:1ex;
	}
}




@media (min-width:901px) {
	body {
		--blockmark-height:148px;
		--time-height:30px;
		--dashboard-margin:0px;

		--rdr-margins:30px;

	}
	
	
	#sig {
		left:0;
		bottom:0;
	}
	
	#logo a {
		justify-content:flex-start;
	}
	
	#time {
		background-color:transparent;
		bottom:18px;
		left:var(--rdr-margins);
	}
	
	#rdrcompass {
		bottom:calc(var(--time-height) + var(--rdr-margins));
	}

	#dashboard {
		width:auto;
		left:calc(var(--report-width) + var(--rdr-margins) * 2);
		top: var(--blockmark-height);
		bottom: calc(var(--time-height) + var(--rdr-margins) * 2);
		border-radius:0 20px;
		max-width:650px;
	}
	#dashboard header {
		padding:0;
	}
	#dashboard .close {
		display:none !important;
	}

}



@media (max-width:900px) {
	body {
		--time-height:65px;
		--geovoile-width: calc(var(--geovoile-height) * 1.2);
		--blockmark-height:0px;
		--rdr-margins:20px;
	}

	#sig {
		top:0;
		bottom:0;
	}

	#blockmark {
		top:5px;
		left:36px;
		height:40px;
		aspect-ratio:1;
		padding:0;
	}
	#logo a {
		height:100%;
	}
	body.MULTICLASS #forecasts {
		top:10px;
		width:auto;
	}
	#report {
		top:0;
		right:var(--rdr-margins);
		padding-top:50px;
		border-radius:0 0 20px 20px;
	}
	body.MULTICLASS #report {
		height:223px;
	}
	#boatclasseslist {
		margin-left:50px;
	}
	#reportlist {
		width:auto;
	}
	#reportlist .row {
		width:100%;
	}

	#report:not(.open).shrink #reportlist .row {
		height:var(--reportline-height);
		grid-template-columns: 0 calc(var(--rdr-row-margin-left) + 5px) 1fr;
		grid-template-rows: 48px 27px 0;
	}
	#report:not(.open).shrink #reportlist .row .photos {
		display:block !important;
	}
	#report:not(.open).shrink #reportlist .row .skippers {
		display:flex !important;
	}
	#report:not(.open).shrink #reportlist .row .photos{
		width:auto;
	}
	#report:not(.open).shrink #reportlist .row .boat {
		grid-row: 2;
		padding-top: 0;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
	}
	#report.open, 
	body.MULTICLASS #report.open {
		top:0;
		height:calc(100% - 60px);
	}
	#report.open #reportlist {
		padding-left: var(--rdr-row-margin-left);
	}
	#reportlist .row.on .open {
		top:auto;
		bottom:-16px;
		width:50px;
		height:16px;
		right:auto;
		left:50%;
		transform:translateX(calc(-50% - var(--rdr-row-margin-left) / 2));
		border-radius: 0 0 16px 16px;
	}
	body.DASHBOARD #reportlist .row.on .open {
		display:none;
	}
	body.MULTICLASS #panelslider {
		top:50px;
		left:36px;
		border-radius:0 7px 0 7px;
	}
	body.MULTICLASS #panelslider.open {
		top:50px;
	}
	
	body.RACE.MULTICLASS #dashboard {
		top:240px;
		left:var(--rdr-margins);
		right:var(--rdr-margins);
		border-radius:20px;
		z-index:1000;
	}
	body.RACE.MULTICLASS.DASHBOARD #dashboard {
		height:calc(100% - 240px - 60px);
		overflow:visible;
	}
	body.RACE #dashboard header {
		display:block;
	}
	#dashboard header .close,
	#dashboard header .close.on,
	#dashboard header .close.on.active,
	#dashboard header .close.active {
		top:-55px;
		bottom:-16px;
		width:50px;
		height:55px;
		fill: none;
		stroke-width: 2;
		border-radius: 0 5px 5px 0;
		transition:none;
		left:50%;
		transform:translateX(-50%);
		border-radius:0;
	}
	#dashboard header .close svg {
		transform:rotate(90deg) !important;
	}
	#dashboard header {
		padding:0;
	}
	#rdrdbheader .boatclass {
		border-radius:20px 0 0 0;
	}
	#rdrdbheader .title {
		font-size:max(min(14px, 1.2vw), 10px);
	}
	#rdrdbheader .date {
		font-size:max(min(12px, 1vw), 9px);
	}

	#time {
		padding-left:100px;
	}
	#time .geovoilespace {
		width:calc(var(--geovoile-width) + 0px);
	}
	#replay,
	#refresh {
		display:none !important;
	}

	#datetime {
		position: absolute;
		bottom:17px;
		left:5px;
		width:auto;
		background-color:#FFFFFF;
		border-radius:10px;
		font-size:9px;
		padding:0 1em;
		justify-content: center;
		font-variant-numeric: tabular-nums;
	}

	#rdrcompass {
		bottom:70px;
		right:10px;
		width:60px;
	}
	#rdrdhenvironment > div {
		min-width:auto;
	}
	#rdrdhenvironment .gauge {
		height: calc(100vw / 8);
	}
	#dashboard .sectiontitle {
		font-size:min(22px, 3vw);
		margin-bottom:16px;
	}
	#rdrspeedslunches .content .label {
		font-size:max(min(13px, 2vw), 10px);
	}
}



@media (max-width:500px) {
	#rdrdbheader .identity .skipper {
		grid-template-columns:auto;
	}
	#rdrdbheader .identity .skipper .photo {
		grid-column:1;
		grid-row:1;
		display:flex;
		justify-content:center;
	}
	#rdrdbheader .identity .skipper .name {
		grid-column:1;
		grid-row:2;
	}
	#rdrdbheader .identity .skipper .age {
		grid-column:1;
		grid-row:3;
	}
	#rdrdbheader .identity .skipper .charm {
		grid-column:1;
		grid-row:4;
	}
	#rdrdbheader .identity .boat {
		flex-direction:column;
		align-items: center;
	}
	#rdrdbheader .identity .boat .name {
		text-align:center;
	}
}



@media (max-height:870px) {
	#rdrdbheader .identity .skipper .photo,
	#rdrdbheader .identity .boat .photo {
		display:none;
	}
}



@media (max-height:770px) {
	#rdrdbheader .identity .skipper,
	#rdrdbheader .identity .boat {
		display:none;
	}
}