﻿.bkgweft {
	background-image:none;
}
:root {
  --skewfactor:445 / 1431;
  --blockmark-width:410px;
  --blockmark-height:102px;
	--blockmark-margin:10px;
	--favorites-width:58px;
	--dates-width:calc(var(--blockmark-width) - var(--favorites-width));
  --dates-height:46px;
	--classlist-height:30px;
	--report-width:var(--blockmark-width);
}
#nav a {
	font-family:ptsans;
}
#blockmark .claw {
  fill:#004F9C !important;
}
#reportlist .row .rank::after {
	display:none !important;
}
#reportlist .row.bizuth .skippers>span::after {
	display: inline-block;
	top: 3px;
	right: 3px;
	margin-left:5px;
	padding:0 5px;
	content: 'bizuth';
	font-size:12px;
	font-weight:normal;
	background-color: rgba(233,78,27,0.1);
}
#reportlist .row.on.bizuth .skippers>span::after {
	color: #FFFFFF;
	background-color: rgba(255,255,255,0.2);
}
#reportlist .row.hidden,
#boatsLayer>g.hidden {
	display:none ! important;
}
#tools {
	--button-height:24px;
	--skewval:calc(var(--button-height) * var(--skewfactor));
	--button-full-height:calc(var(--button-height) + var(--skewval) * 2);
	right:var(--blockmark-margin);
}
#zoom {
	height:calc(var(--button-full-height) * 3);
}
#zoom .button.plus,
#zoom .button.minus {
	border-radius:0;
}
#zoom .button,
#zoom .button .face {
	height:var(--button-full-height);
}
#zoom .button .face svg {
	padding:calc((var(--button-full-height) - 26px) / 2) 4px;
}
#zoom .button {
  clip-path:polygon(0 0, 100% var(--skewval), 100% 100%, 0 calc(100% - var(--skewval)));
}
#bt_target {
	height:var(--button-full-height);
}
#bt_target .icon {
	height:var(--button-full-height);
  clip-path:polygon(0 0, 100% var(--skewval), 100% 100%, 0 calc(100% - var(--skewval)));
}
#bt_target:before {
	--height:calc(var(--button-full-height) - var(--skewval));
	height:var(--height);
	line-height:var(--height);
  border-radius:0;
	margin-right:var(--skewval);
}
#carousel a {
	background-position:left center;
}

body.LEG2 #boatclasseslist,
body.LEG3 #boatclasseslist,
body.LEG2 #display .button.classes,
body.LEG3 #display .button.classes {
	display:none;
}

#boatcard .photo {
	top:0;
	left:0;
	width:60px;
	height:60px;
	display:flex;
	justify-content:center;
}
#boatcard .photo img {
	position:relative;
	width:auto;
	height:100%;
}
body.CLASS_LE_DEFI_PAPREC #boatcard .photo {
	width:120px;
}
body.CLASS_LE_DEFI_PAPREC #boatcard .identity {
	padding-left:145px;
}
body.CLASS_LE_DEFI_PAPREC  #boatcard .rank {
	left:105px;
}
#frequency .hours {
	display:none !important;
}

#timekeeper img {
  height: auto;
}
#refresh {
	padding:0 7px 0 0;
	cursor: pointer;
}
 #datetime {
  padding-right:7px;
}
 #chrono {
  padding-left:7px;
}
#timeline .button {
	--size:50px;
	background-color:transparent;
}
#reportlist .row.STM .rank,
#reportlist .row.NL .rank,
#reportlist .row.SUS .rank,
#reportlist .row.DNF .rank,
#reportlist .row.DNS .rank,
#reportlist .row.DNC .rank,
#reportlist .row.RET .rank {
	display:none;
}

.claw {
	aspect-ratio:var(--skewfactor);
	position:absolute;
	top:0;
	bottom:0;
}
.claw.left {
	left:0;
}
.claw.right {
	right:1px;
}
.claw svg {
	width:100%;
	height:100%;
	stroke:none;
}

body.LEG2 #boatclasseslist, 
body.LEG3 #boatclasseslist, 
body.LEG2 #display .button.classes, 
body.LEG3 #display .button.classes {
	display: none;
}

body.LEG1 {
  --main-color:#EA4E1B;
}

body.LEG2 {
  --main-color:#DF9C56;
}

body.LEG3 {
  --main-color:#9CC43D;
}

body .claw {
  fill:var(--main-color);
}
body #vr .color {
  fill:var(--main-color);
}
body #nav a:hover {
  color:var(--main-color);
}
body #nav a.on {
  background-color:var(--main-color);
}
body #boatclasseslist .boatclass.on {
  background-color:var(--main-color);
}
body #reportlist .row .skippers {
  color:var(--main-color);
}
body #reportlist .row.on:before {
	background-color:var(--main-color);
}
body #refresh .circle {
  fill:var(--main-color);
	fill-opacity:0.2;
}
body #refresh .timer {
  stroke:var(--main-color);
	stroke-opacity:0.2;
}
body #timeline .backbar,
body #replay .gauge .backward,
body #replay .gauge .forward {
  background-color:var(--main-color);
}
body #timeline .bar,
body #replay .gauge .bar {
  background-color:var(--main-color);
}
body .iconbutton .icon,
body .iconbutton:before {
  color:var(--main-color);
}
body .iconbutton.over .icon {
  fill:var(--main-color);
  stroke:var(--main-color);
}
body .iconbutton.on .icon,
body .iconbutton.on:before {
  background-color:var(--main-color);
}
body #zoom .button.on {
  background-color:var(--main-color);
}
body #zoom .button:hover .face {
  fill:var(--main-color);
  stroke:var(--main-color);
}
body #zoom #bt_target:hover .icon {
  fill:var(--main-color);
  stroke:var(--main-color);
}
body #zoom #bt_target:before {
  color:var(--main-color);
}
body #zoom #bt_target.on .icon,
body #zoom #bt_target.on:before {
  background-color:var(--main-color);
}
body #forecasts .cursor {
  background-color:var(--main-color);
}
body #forecasts .variables .var:hover {
  color:var(--main-color);
  fill:var(--main-color);
  stroke:var(--main-color);
}
body #forecasts .variables .var.on {
  background-color:var(--main-color);
}
body #areasLayer path {
  fill:var(--main-color);
	fill-opacity:0.3;
  stroke:var(--main-color);
}
body #gatesLayer path {
  stroke:var(--main-color);
}
body #gatesLayer circle,
body #gatesLayer path.filled {
  fill:var(--main-color);
}
body #ruleLayer>g>circle {
  stroke:var(--main-color);
  fill:var(--main-color);
}
body #ruleLayer>g>path {
  stroke:var(--main-color);
}
body #ruleLayer>path {
  stroke:var(--main-color);
}
body #poiLayer g circle,
body #poiLayer g.city circle,
body #poiLayer g.start circle,
body #poiLayer g.arrv circle,
body #poiLayer g.isle circle,
body #poiLayer g.buoy circle,
body #poiLayer g.buoy text {
  fill:var(--main-color);
}
body #geoblog .identity {
  background-color:var(--main-color);
}

