/*### FONTS ###*/
@media screen {
@font-face {
	font-family:ozonos;
	font-style:normal;
	font-weight:normal;
	src: url("ozonos.otf") format("opentype");
}
@font-face {
	font-family:oswald;
	font-style:normal;
	font-weight:normal;
	src: url("oswald_regular.woff2");
}
@font-face{
	font-family:proxima;
	font-style:normal;
	font-weight:normal;
  src: url('proxima_light.woff2');
}
@font-face{
	font-family:proxima;
	font-style:italic;
	font-weight:normal;
  src: url('proxima_italic.woff2');
}
@font-face{
	font-family:proxima;
	font-style:normal;
	font-weight:600;
  src: url('proxima_bold.woff2');
}
@font-face{
	font-family:proxima;
	font-style:italic;
	font-weight:900;
  src: url('proxima_extrabold_italic.woff2');
}
@font-face{
	font-family:proxima;
	font-stretch:condensed;
	font-style:italic;
	font-weight:900;
  src: url('proxima_extracondensed_extrabold_italic.woff2');
}
}


/*### GEOVOILE ###*/
@media screen	{

body, * {
  font-family:proxima;
  font-size:14px;
}
body {
	--skewfactor:0;
	--blockmark-width:0px;
	--report-width:0px;
	--progressline-height:65px;
	--block-margin:5px;
	--rank-font-size:34px;
}

#blockmark,
#dates,
#report,
#panelslider,
#dashboard,
#reportswitch,
#refresh,
#datetime,
#brackets,
#chrono,
#coords {
	display:none !important;
}

#sig {
	top:0 !important;
}
#tools .iconbutton .icon {
	border-radius:0;
}
#zoom {
	position:absolute;
	top:auto;
	transform:none;
	right:auto;
	left:5px;
	bottom:5px;
	height:74px;
	width:36px;
	margin-left:0;
}
#zoom .button {
	height:36px;
	width:36px;
}
#zoom .button.plus,
#zoom .button.minus {
	border-radius:0;
}
#zoom .button.plus,
#zoom .button.minus {
	border-radius:0;
}
#zoom .button .edges {
	display:none;
}
#display>.button {
	background-color:#FFFFFF;
	clip-path:none;
	padding-left:0;
	bottom:7px;
  right:7px;
}
#display .preferences {
	--margin:7px;
	--height:var(--display-button-size);
	left:var(--margin);
	bottom:var(--margin);
	height:var(--height);
	width:calc(100% - var(--margin) * 2);
	padding-right:5px;
	clip-path:none;
}
#display .content .button .iconbutton .icon {
	 border-radius:0;
}
#display .button.weather {
	display:none;
}
#boatcard .identity {
  padding:0 var(--rank-width) 0 0;
}
#timeline .button {
	--size:14px;
	border:3px solid #141415;
}
#timeline .bar, 
#timeline .backbar, 
#timeline .interval {
	height:2px;
}
}


/*### SOEDEBO ###*/
@media screen	{
.iconbutton.weather {
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	right:5px;
	left:auto;
}
.iconbutton.weather .icon {
  background-color:#FFFFFF;
  fill:#0A384B;
  stroke:#0A384B;
}
.iconbutton.weather:before {
	height:38px;
	line-height:38px;
  background-color:#FFFFFF;
  color:#0A384B;
}
.iconbutton.weather.on .icon,
.iconbutton.weather.on:before {
  background-color:#F07F33;
  fill:#FFFFFF;
  stroke:#FFFFFF;
  color:#FFFFFF;
}

footer {
	padding:0 20px;
	background-color:#131314;
	color:#FFFFFF;
}
#sodebo_data {
	display:block;
	height:100%;
}
#sodebo_data.off .block>* {
	visibility:hidden;
}
#sodebo_data.off .block>legend {
	visibility:visible;
}
#sodebo_data.off .block.advance>legend:after {
	background-color:transparent !important;
}
#sodebo_data .content {
	display:flex;
	height:100%;
}
#sodebo_data .close {
	position:absolute;
	top:10px;
	right:10px;
	width:10px;
	height:10px;
	cursor:pointer;
	display:none;
}
#sodebo_data .pos big {
	color:#FFFFFF;
}
#sodebo_data .block {
	position:relative;
	display:flex;
	flex:auto;
	flex-direction:column;
	align-items:flex-start;
	margin:5px 5px 20px 5px;
	border-radius:7px;
	padding:10px 10px 3px 10px;
	background-color:#000000;
}
#sodebo_data legend {
	display:inline-block;
	position:absolute;
	left:10px;
	top:0;
	transform:translateY(-50%);
	padding:0 10px;
	font-family:proxima;
	font-stretch:condensed;
	font-style:italic;
	font-weight:900;
	text-transform:uppercase;
	color:#F07F33;
	background-color:#000000;
	border-radius:4px 4px 0 0;
}
#sodebo_data big,
#sodebo_data small {
	font-family:oswald;
	line-height:1;
	margin-bottom:0.6ex;
}
#sodebo_data big {
	display:block;
	font-size:18px;
	letter-spacing:0.54px;
}
#sodebo_data small {
	display:block;
	font-size:14px;
	letter-spacing:0.42px;
	color:rgba(255,255,255,0.6);
}
#sodebo_data .block.rank {
	display:flex;
	justify-content:center;
}
#sodebo_data .block.rank big sup {
	font-variant-position:super;
}
#sodebo_data .block.percent {
	display:flex;
	flex-direction:row;
	justify-content:flex-start;
	align-items:center;
}
#sodebo_data .block.percent big {
	margin-bottom:0;
	padding-bottom:0;
}
#sodebo_data .block.percent big:after {
	content:" %";
	font-family:ptsans;
}
#sodebo_data .block.percent svg {
	width:26px;
	height:26px;
	margin-right:10px;
	margin-bottom:-5px;
}
#sodebo_data .block.percent svg .all {
	stroke:rgba(255,255,255,0.2);
}
#sodebo_data .block.percent svg .done {
	stroke:#F07F33;
	stroke-dasharray:0 360;
	transform:rotate(-90deg);
}
#sodebo_data .block.advance {
	display:none;
}
#sodebo_data .block.advance legend {
	padding-right:30px;
}
#sodebo_data .block.advance legend:after {
	content:"";
	position:absolute;
	border:1px solid;
	width:12px;
	height:12px;
	top:50%;
	transform:translateY(-50%);
	right:7px;
	border-radius:50%;
	border:1px solid #FFFFFF;
}
#sodebo_data .block.advance legend:after {
}
#sodebo_data .block.advance legend.pos:after {
	background-color:#9BFC0A;
}
#sodebo_data .block.advance legend.neg:after {
	background-color:#EB1A1A;
}
#sodebo_data .block.advance big:after {
	content:" nm";
}
#sodebo_data .block.advance small:after {
	content:" km";
}
#sodebo_data .block.advance legend {
	display:none;
}
#sodebo_data .block.advance.pos legend.pos,
#sodebo_data .block.advance.neg legend.neg {
	display:block;
}
body[rel="fr"] #sodebo_data .block.speed big:after,
body[rel="fr"] #sodebo_data .block.wind .values big:after {
	content:" nds";
}
body[rel="en"] #sodebo_data .block.speed big:after,
body[rel="en"] #sodebo_data .block.wind big:after {
	content:" kts";
}
#sodebo_data .block.temperature {
	flex-direction:row;
	justify-content:flex-start;
	align-items:center;
}
#sodebo_data .block.temperature svg {
	width:18px;
	height:32px;
	margin-right:5px;
}
#sodebo_data .block.temperature .values {
	display:flex;
	flex-direction:column;
	justify-content:flex-end;
	align-items:flex-end;
}
#sodebo_data .block.temperature .values .val {
	display:flex;
	flex-direction:row;
	justify-content:flex-start;
	align-items:flex-end;
}
#sodebo_data .block.temperature .values .val small {
	font-size:14px;
	font-family:proxima;
	font-stretch:condensed;
	font-style:italic;
	font-weight:900;
	text-transform:uppercase;
	margin-right:10px;
}
#sodebo_data .block.temperature .values .val big:after {
	content:" °C";
}
#sodebo_data .block.speed small:after,
#sodebo_data .block.wind small:after {
	content:" km/h";
}
#sodebo_data .block.wave {
	justify-content:center;
}
#sodebo_data .block.wave big:after {
	content:" m";
}
#sodebo_data .block.wind {
	flex-direction:row;
	align-items:center;
}
#sodebo_data .block.wind .orientation {
	display:flex;
	flex-direction:row;
	align-items:center;
}
#sodebo_data .block.wind svg {
	width:20px;
	height:20px;
	margin:0 10px;
}
#sodebo_data .block.wind svg circle {
	stroke:#FFFFFF;
}
#sodebo_data .block.wind svg path {
	fill:#F07F33;
}
#sodebo_data .separator {
	display:none;
	font-size:0px;
	height:100%;
	width:1px;
	margin:0 10px;
	background-color:rgba(255,255,255,0.6);
}
#sodebo_data .open {
	display:none;
	padding:7px 0;
	cursor:pointer;
}
#sodebo_data .open * {
	pointer-events:none;
}
#sodebo_data .open label {
	font-size:14px;
	font-family:proxima;
	font-stretch:condensed;
	font-style:italic;
	font-weight:900;
	text-transform:uppercase;
	color:rgba(255,255,255,0.6);
	margin-left:1ex;
}


body>header {
	padding:0 20px;
}
#sodebo_line {
	position:relative;
	height:var(--progressline-height);
	display:flex;
	align-items:center;
	width:100%;
}
#sodebo_line .axis {
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	width:100%;
	height:0px;
	border-bottom:3px dotted #838383;
}
#sodebo_line .progress {
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	width:0%;
	height:3px;
	background-color:#F07F33;
}
#sodebo_line .points {
	position:relative;
	width:100%;
	height:100%;
}
#sodebo_line .point {
	position:absolute;
	display:flex;
	height:100%;
	width:100%;
}
#sodebo_line .point label {
	position:absolute;
	color:#FFFFFF;
	left:0;
	top:50%;
	transform:translate(-2px, -20px);
	white-space:nowrap;
	font-size:12px;
	line-height:0.8;
}
#sodebo_line .point b {
	position:absolute;
	top:50%;
	left:0;
	transform:translate(-5px, -50%);
	width:8px;
	min-width:8px;
	height:8px;
	border-radius:50%;
	background-color:#FFFFFF;
}
#sodebo_line .point b.on {
	background-color:#F07F33;
}
#sodebo_line .point s {
	position:absolute;
	height:100%;
	width:1px;
	background-color:#F07F33;
}
#sodebo_line .point.lehavre b {
	background-color:#F07F33;
}
#sodebo_line .point.saopedro label {
	transform:translate(calc(-100% + 2px), 8px);
}
#sodebo_line .point.ascension label {
	transform:translate(-2px, 8px);
	text-align:right;
}
#sodebo_line .point.fortdefrance label {
	left:auto;
	top:50%;
	transform:translate(calc(-100% + 2px), -20px);
}
#sodebo_line .boat {
	position:absolute;
	top:26px;
	width:14px;
	transform:translateX(-50%);
	aspect-ratio:1;
	border:1px solid #FFFFFF;
	border-radius:50%;
}
#sodebo_line .boat:after {
	content:'';
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	width:60%;
	aspect-ratio:1;
	background-color:#FFFFFF;
	border-radius:50%;
}

}