﻿@font-face {
  font-family:'techovier';
  font-style:normal;
  font-weight:400;
  src: url('techovier.woff2') format('woff2');
}
@font-face {
  font-family:'neue';
  font-style:normal;
  font-weight:400;
  src: url('maison_neue_medium.woff2') format('woff2');
}

body {
	--skewfactor:0;	
	--default-font-family:neue;
	--default-font-size:12px;
	--rank-font-family:techovier;
	--rank-font-size:24px;
	--rank-font-weight:normal;
	--boatname-font-family:techovier;
	--boatname-font-size:12px;
	--boatname-font-weight:normal;
	--boatname-text-transform:uppercase;
	--skippername-font-size:12px;
}

#blockmark {
	justify-content:flex-end;
	background-image:url('img_boat_small.png');
	background-repeat:no-repeat;
	background-position:right center;
}
#blockmark:before {
	content:'';
	position:absolute;
	top:48px;
	left:18px;
	right:0;
	bottom:0;
	background-image:url('img_title.png');
	background-repeat:no-repeat;
}
#logo {
	margin:0;
	height:calc(100% - 30px);
	margin-right:10px;
}
#dates {
	align-items:flex-start;
	padding-left:1em;
}
#startdate, 
#reportdate {
	font-weight:normal;
	font-size:14px;
	text-align:left;
}
#dates .group.report {
	flex-direction: column;
	align-items:flex-start;
}

#report {
	background-image:none;
}

#reportlist .row .rank {
	justify-content:flex-start;
	padding-top:7px;
}
#report.shrink #reportlist .row .rank {
	font-size:19px;
	padding-top:1px;
}
#report.small #reportlist .row .rank,
#report.mixed #reportlist .row .rank {
  justify-content:center;
  padding-top:0;
}
#reportlist .row .rank:after {
	position:absolute;
	top:auto;
	bottom:7px;
	font-size:16px;
}
#report.shrink #reportlist .row .rank:after {
	bottom:2px;
	font-size:14px;
}
#reportlist .row .rank.up:after,
#reportlist .row .rank.down:after {
	transform:translateX(-50%) !important;
}
#reportlist .row .skippers small {
	text-transform:uppercase;
}
#reportlist .row .infos {
	font-size:11px;
}
#reportlist .row .infos .values .val + .val::before {
	content: " / ";
}		

#dashboard {
	top:var(--dashboard-margin);
}
#dashboard header .row .rank {
	justify-content:flex-start;
	align-items: flex-end;
	margin-right:5px;
	padding-right: 5px;
}
#dashboard header .row .rank:after {
	position:absolute;
	top:auto;
	bottom:7px;
	font-size:16px;
}
#dashboard header .row .rank.up:after,
#dashboard header .row .rank.down:after {
	transform:translateX(-50%) !important;
}

		
#datetime {
	box-sizing:border-box;
  font-family:techovier;
	font-weight:normal;
}
#datetime>span {
	position:relative;
	display:grid;
}
#datetime .day {
	grid-column: 1 / 2;
  grid-row: 1 / 3;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:26px;
	padding-right:7px;
	line-height:0.8;
	min-width:70px;
}
#datetime .date {
	grid-column: 2 / 3;
  grid-row: 1 / 2;
}
#datetime .hour {
	grid-column: 2 / 3;
  grid-row: 2 / 3;
}
#datetime .date,
#datetime .hour {
	font-size:10px;
	text-align:right;
	min-width:75px;
}
#replay {
  fill:#AC0606;
}
#replay .buttons {
	opacity:1; 
	width:26px;
	height:26px;
}
#replay.on .buttons {
	width:22px;
	height:22px;
}
#timeline .bar, 
#timeline .backbar, 
#timeline .interval {
	height:11px;
}
#timeline .button {
	--size: 27px;
}
#chrono,
#brackets {
	display:none;
}

#display .group > label {
	font-size:14px;
	font-weight:normal;
}
#display .content .button label {
	font-size:12px;
	font-weight:normal;
}


#boatcard header {
	padding:5px 1em 5px 5px;
	grid-template-rows: 23px 20px 0px;
}
#boatcard header .photos {
	display:none;
}
#boatcard header .rank {
	justify-content:flex-start;
}
#boatcard header .rank::after {
	position:absolute;
	top:auto;
	bottom:0px;
	font-size:16px;
}
#boatcard header .rank.up:after,
#boatcard header .rank.down:after {
	transform:translateX(-50%) !important;
}
#boatcard .infos {
	font-size:11px;
}

#forecasts .hours > div {
	font-size:11px;
}
#forecasts .hours > div.on {
	font-weight:normal;
}
#forecasts .currentdate {
	font-size:11px;
	line-height:1;
}