﻿@media (min-width:901px) {
	#vr {
		top:0;
		left:auto;
		right:0;
		margin-right: calc(0px - var(--skewval));
		clip-path: polygon(var(--skewval) 0, 100% 0, 100% 100%, 0 100%);
	}
	body.WEATHER #vr {
		right:398px;
		clip-path: polygon(var(--skewval) 0, 100% 0, calc(100% - var(--skewval)) 100%, 0 100%);
	}
	#vr a {
		width:90px;
		height:50px;
	}
	#startdate, 
	#reportdate {
		font-size:14px;
		line-height:16px;
	}
	#replay .buttons {
		opacity:1;
	}

	#reportlist .row .infos {
		font-size:11px;
	}
	#boatcard .infos .group {
		margin:6px;
		width:calc(100% - 12px);
		border-radius:8px;
	}
	#boatcard header .rank {
		margin: 0 0 0 0;
	}
	#dashboard {
		border-left-width:0;
	}
	#dashboard .dials text {
		font-size:14px;
		opacity:1;
	}
	#dashboard .dials .content .val label {
		font-size:12px;
		font-weight:bold;
		font-family:oswald;
		text-transform:uppercase;
	}
	#dashboard .distances .content .over1:not(.overg) {
		font-size:12px;
		font-weight:bold;
	}
	#dashboard .distances .content .over2:not(.overg) {
		font-size:12px;
		font-weight:bold;
	}
	#timekeeper img {
		height: calc(var(--timekeeper-height) * 0.75);
		max-width: calc(var(--timekeeper-height) * 8.9);
	}
	#boatcard header {
		grid-template-columns: auto auto 1fr;
		grid-template-rows: 31px 29px 0px;
	}
	#boatcard header .comment {
		display:none;
	}
	#boatcard header .boat {
		padding-bottom:2px;
		align-items:flex-end;
	}
	#boatcard header .skippers {
		padding-top:2px;
	}
	
}


@media (max-width:900px) {
#timekeeper {
	flex:0;
}
#reportlist .row .open {
	background-color: rgb(102, 198, 237);
	stroke: rgb(26, 19, 73);
}
}



@media (max-width:550px) {
	#timekeeper {
		padding:0;
	}
	#timekeeper img {
		height:28px;
		aspect-ratio:136 / 35;
	}
	#datetime,
	#chrono {
		font-size:12px;
	}	
	
}


@media (max-width:400px) {
	#chrono {
		display:none;
	}	
	#datetime::before {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	}
}

