/* MAIN */
@media screen {
	 #display .preferences {
		 display:none !important;
	 }
	#logocoursebleue,
	#logorosevents {
		display:block !important;
	}
	#blockmark,
	#subtitle,
	#reportopener {
		display:none;
	}
	#logocoursebleue {
		--margins:0px;
		display:block !important;
		position:absolute;
		z-index:10000;
		width:calc(var(--report-width) - var(--margins) * 2);
		top:0;
		left:var(--margins);
	}
	#logorosevents {
		display:block !important;
		position:absolute;
		right:20px;
		top:20px;
		width:60px;
		height:60px;
	}
	#logoskippers {
		--margins:50px;
		display:block !important;
		position:absolute;
		left:var(--margins);
		width:calc(var(--report-width) - var(--margins) * 2);
		bottom:var(--time-height);
		z-index:300;
	}

	#iframeicon {
		position:absolute;
		top:0;
		left:var(--report-width);
		width:var(--report-width);
		height:calc(100% - var(--time-height));
		background-color:#164F85;
		z-index:10000;
	}
	#iframeicon.off {
		display:none;
	}
	#iframeicon>iframe {
		width:100%;
		height:100%;
	}
	#iframeicon tt {
		position:absolute;
		font-weight:bold;
		font-size:25px;
		top:0;
		right:0;
		padding:0.3em;
		background-color:#00A8E6;
		cursor:pointer;
	}
	 #display .preferences {
		 display:none !important;
	 }
}



/* TRACKER */
@media screen {
	.bkgweft {
		background:none !important;
	}
	html, body {
		background-color:#FFFFFF;
		color:#20578A;
	}

	#dates {
		display:none;
		background-color:#FFFFFF;
		color:#20578A;
	}
	#dates em {
		color:#20578A;
	}
	
	#bathymetry {
		background:none !important;
		background-color: #D0EBF7 !important;
	}
	
	#reportswitch {
		display:none;
	}
	
	#report.hidden {
		visibility:hidden;
	}
	
	#reportlist {
		background-color:#D0EBF7;
	}
	
	#reportlist .row {
		background-color:#D0EBF7;
		border-bottom-color:#99D5EE;
		color:#12578B;
	}
	#reportlist .row:hover {
		background-color:#DEF1FA;
		color:#12578B;
	}
	#reportlist .row.ARV + div.RAC:before {
		background-color:#99D5EE;
	}
	#reportlist .row .boat {
		color:#12578B;
	}
	#reportlist .row .skippers {
		color:rgba(18,87,139,0.70);
	}
	#reportlist .row.inlive .infos .date {
		color:#12578B;
	}
	#reportlist .row .infos .up:after {
		display:none;
	}
	#reportlist .row .infos .date {
		visibility:hidden;
	}
	#reportlist .row .infos .latedate {
		color:#12578B;
	}
	#reportlist .row .infos .down:after {
		display:none;
	}
	#reportlist .row .infos .values .val+.val:before {
		color:#1DA7E0;
	}
	#reportlist .row .rank {
		color:#164F86;
		background-color:rgba(22,79,134,0.1);
	}
	#reportlist .row .rank.up:after {
		display:none;
	}
	#reportlist .row .rank.down:after {
		display:none;
	}

	#reportlist .row.on {
		background-color:#164F86;
		color:#FFFFFF;
	}
	#reportlist .row.on .linkout {
		display:none;
	}
	#reportlist .row.on.inlive .infos .date {
		color:#FFFFFF;
	}
	#reportlist .row.on .boat {
		color:#FFFFFF;
	}
	#reportlist .row.on .skippers {
		color:rgba(255,255,255,0.7);
	}
	#reportlist .row.on .infos .values .val+.val:before {
		color:#FFFFFF;
	}
	#reportlist .row.on .rank {
		color:#FFFFFF;
		background-color:rgba(255,255,255,0.25);
	}
	#reportlist .row.on .rank.up:after {
		display:none;
	}
	#reportlist .row.on .rank.down:after {
		display:none;
	}
	#reportlist .row.on .infos .latedate,
	#reportlist .row.on .infos .down:after {
		color:#FFFFFF;
	}
	
	#reportlist .row .infos[data-status] {
    display:none !important;
  }	
	#reportlist .row .infos[data-status=' PED '] {
    display:flex !important;
  }	
	#reportlist .row .infos .pos {
		font-weight:bold;
		text-transform:uppercase;
	}
	
	#forecasts {
		--top-when-under:0;
	}
	#forecasts,
	#forecasts .advert,
	#forecasts .advert a {
		color:#0A3156;
	}
	#forecasts .scroll,
	#forecasts .advert {
		background-color:#FFFFFF;
	}
	#forecasts .cursor {
		background-color:rgba(244,165,0,1.00);
	}
	#forecasts .hours div.on {
		color:#0A3156;
	}
	#forecasts .wait path {
		stroke:#0A3156;
	}
	#forecasts legend {
		background-color:#0A3256;
	}
	#forecasts .variables .var {
		background-color:#FFFFFF;
		color:#0A3156;
		fill:#0A3156;
		stroke:#0A3156;
	 }
	#forecasts .variables .var:hover {
		background-color:#DDDDDD;
		color:#F4A500;
		fill:#F4A500;
		stroke:#F4A500;
	 }
	#forecasts .variables .var.on {
		background-color:#F4A500;
		color:#0A3156;
		fill:#0A3156;
		stroke:#0A3156;
 }
	#display {
		display:none !important;
	}
	#display .content {
	 background-color:rgba(255,255,255,1.00); 
	 color:#0A3156;
	}
	#display .group>label {
	 color:#0A3156;
	}
	#display .group>label span:after {
		background-color:rgba(10,49,86,0.41);
	}
	.iconbutton .icon,
	.iconbutton:before {
		background-color:rgba(10,49,86,0.00);
		fill:#0A3156;
		stroke:#0A3156;
		color:#164F86;
	}
	.iconbutton.over .icon {
		fill:#164F86;
		stroke:#164F86;
	}
	.iconbutton.on .icon,
	.iconbutton.on:before {
		background-color:rgba(244,165,0,1.00);
		fill:#0A3156;
		stroke:#0A3156;
		color:#0A3156;
	}
	#display .preferences {
		background-color:rgba(20,109,161,1.00);
		color:#FFFFFF;
	}
	#display .onoff:before {
	 border-color:rgba(255,255,255,0.50);
	}
	#display .onoff:after {
	 background-color:rgba(255,255,255,0.70);
	}
	#display .onoff:hover:after {
	 background-color:rgba(255,255,255,1.00);
	}
	#display .onoff.on:before {
	 background-color:#6FBE03;
	 border-color:#6FBE03;
	}
	#display .onoff.on:after {
	 background-color:#FFFFFF;
	}
	#display .button.tiledmap,
	#display .group_040,
	#display .group_060,
	#display .group_030 {
		display:none !important;
	}
	#zoom .button,
	#tools>.iconbutton .icon,
	#tools #bt_weather .icon,
	#zoom #bt_target .icon,
	#tools #bt_ruler .icon {
		background-color:#0A3156;
	}

	#tools>.iconbutton {
		margin-top:5px;
	}
	#tools>.iconbutton .icon {
		fill:#FFFFFF;
		stroke:#FFFFFF;
		border-radius:50%;
	}
	#tools>.iconbutton:hover .icon {
		fill:#F4A500;
		stroke:#F4A500;
	}
	#tools>.iconbutton:before {
		height:38px;
		line-height:38px;
		right:calc(100% - 18px);
		padding-right:23px;
		border-radius:19px 0 0 19px;
		background-color:#164F86;
		color:#F4A500;
		transform:none !important;
	}
	#tools>.iconbutton.on .icon,
	#tools>.iconbutton.on:before {
		background-color:#F4A500;
		fill:#0A3156;
		stroke:#0A3156;
		color:#0A3156;
	}
	#zoom {
		margin-top:10px;
	}
	#timekeeper {
		background-color:#146CA0;
	}
	#refresh {
		background-color:#146CA0;
	}
	#refresh circle {
		stroke:#FFFFFF;
		stroke-opacity:0.5;
	}
	#datetime {
		background-color:#146CA0;
		color:#FFFFFF;
	}
	#chrono {
		background-color:#146CA0;
		color:#FFFFFF;
	}
	#chrono>span {
		opacity:0.5;
	}
	#refresh:before,
	#datetime:before {
		background-color:rgba(0,0,0,0.00);
	}

	#bathymetry {
		background-color:#D0EBF7;
	}
	#bathymetry.spherical {
		background:radial-gradient(#D0EBF7, #94D2ED);
	}
	body.WEATHER #bathymetry {
		background-color:#0E3D58;
	}
	
	#groundLayer path {
		fill: #146CA0;
	}
	#orthoLayer {
		stroke:rgba(29,167,224,1.00);
	}

	#gridlines {
		mix-blend-mode:normal;
	}
	#gridlines text {
		fill:#1DA7E0;
		text-shadow:none;
	}
	#gridlines path {
		stroke:#1DA7E0;
		stroke-opacity:0.3;
	}

	#poiLayer g.buoy {
		display:none !important;
	}
	#poiLayer[rel='class4'] g.ultim {
		display:none !important;
	}
	#poiLayer g.svr {
		display:block !important;
	}
	#poiLayer g.svr.dkside {
		display:none !important;
	}
	#poiLayer g.start,
	#poiLayer g.arrv,
	#poiLayer g.city {
		display:none !important;
	}
	#poiLayer g.ctry {
		mix-blend-mode:normal; 
		opacity:
	}
	#poiLayer g.ctry text {
		font-family:hackney;
		font-weight:normal;
		text-shadow:none;
		font-size:23px;
		text-transform:uppercase;
		fill:#72CBEC;
	}
	#poiLayer g.clic {
		cursor:pointer;
	}
	
	#poiLayer g.clic>g {
	}
	#poiLayer g.clic:hover>g	{
		animation-duration:500ms;
		animation-name: boing;
	}
 	
	@keyframes boing {
		15% {
				transform: scale(1.2, 1.1);
		}
		40% {
				transform: scale(0.95, 0.95);
		}
		75% {
				transform: scale(1.05, 1);
		}
		100% {
				transform: scale(1, 1);
		}
	}
	#poiLayer g.off {
		display:none ! important;
	}

	#areasLayer {
		display:none;
	}
	.sphericalbkggradient_ext {
		stop-color:#99D5EE;
	}
	.sphericalbkggradient_center {
		stop-color:#D0EBF7;
	}

	body.EARTH #icon_gyres_north_atlantic,
	body.EARTH #icon_gyres_south_atlantic,
	body.EARTH #icon_gyres_north_pacific,
	body.EARTH #gyres_south_indian,
	body.EARTH #gyres_south_pacific,
	body.EARTH #icon_arrow_1,
	body.EARTH #icon_arrow_2,
	body.EARTH #icon_arrow_3 {
		display:none !important;
	}
	body.EARTH #poiLayer g.ctry text {
    font-size:18px;
	}  
	
	#forecasts {
		top:0px;
	}
	
}




@media (min-width:901px) {
	:root {
		--report-width:375px;
	}
	#dates {
		top:var(--date-top);
	}
	#report {
		top:150px;
		left:10px;
		width:calc(var(--report-width) - 20px);
	}
	#report::before {
		content: 'Classement des Ultims';
		position: absolute;
		top: 0;
		transform: translateY(calc(-100% - 10px));
		font-size: 20px;
		font-family: raleway;
		font-weight: bold;
		color: #004F88;
	}
	#logorosevents {
		right:20px;
		bottom:calc(var(--time-height) + 20px);
		top:auto;
		width:140px;
		height:140px;
	}
}


@media (max-width:900px) {
	#logoskippers,
	#logorosevents {
		display:none !important;
	}
	#logocoursebleue {
		left:50%;
		top:10px;
		height:calc(var(--blockmark-height) - 20px);
		width:auto;
		border:0;
	}

	#logorosevents {
		right:5px;
		top:5px;
		width:70px;
		height:70px;
	}

	#iframeicon {
		top:140px;
		left:0px;
		height:calc(100% - 140px - 35px);
	}

	#poiLayer g.ctry text {
		font-size:18px;
	}

}


@media (max-width:600px) {
	#logocoursebleue {
		left:0;
		top:0px;
		height:45px;
		width:auto;
		transform:none;
		border-width:5px 20px 5px 20px;
	}
	#iframeicon {
		top:115px;
		left:0px;
		height:calc(100% - 115px - 35px);
	}
}


@media (max-width:500px) {
	#titles {
		display:none;
	}
	#iframeicon {
		top:115px;
		left:0px;
		width:calc(100% - 38px);
		height:calc(100% - 115px - 35px);
	}
}




@media (min-width:901px) and (max-height:780px) {
	#logocoursebleue {
		--margins:50px;
	}
	#logoskippers {
		--margins:80px;
	}
	#report {
		top:110px;
	}
}


@media (min-width:901px) and (max-height:690px) {
	#logoskippers {
		--margins:100px;
	}
	
}


@media (min-width:901px) and (max-height:650px) {
	#logoskippers {
		display:none !important;
	}
	
}