﻿@media (min-width:901px) {
#timekeeper:empty {
  display:none;
}
#timekeeper:empty+.break+#refresh {
  padding:0 10px;
}
#timekeeper:empty+.break+#refresh:before {
  clip-path:none;
}

body.RACE.PANEL_DASHBOARD {
	--report-top:calc(var(--blockmark-height) + var(--dates-height) + var(--reportswitch-height) + var(--boatclasslist-line-height));
	--report-height:calc(var(--report-top) + var(--time-height));
	--dashboard-max-height:calc(100vh - var(--report-height) - var(--reportline-dashboard-height) * 6 - 10px);
	--dashboard-real-height:100px;
}
body.RACE.PANEL_DASHBOARD_EXT {
	--dashboard-margin:5px;
}
body.RACE.PANEL_DASHBOARD #dashboard {
	display:flex;
	left:0;
	width:var(--report-width);
	max-height:var(--dashboard-max-height);
	bottom:var(--time-height);
}
body.RACE.PANEL_DASHBOARD_EXT #dashboard {
	display:flex;
	top:calc(var(--blockmark-height) + var(--dates-height));
	left:var(--report-width);
	bottom:var(--time-height);
	width:var(--report-width);
	border-width:var(--dashboard-margin);
	border-style:solid;
	border-color:transparent;
}
body.RACE.NOSPLITTIMES.PANEL_DASHBOARD_EXT #dashboard {
	top:var(--blockmark-height);
}
body.RACE.PANEL_DASHBOARD #report {
	bottom:calc(var(--time-height) + var(--dashboard-real-height));
}
body.RECORD #dashboard {
	display:flex;
	top:calc(var(--blockmark-height) + var(--dates-height));
	bottom:var(--time-height);
	left:0;
	width:var(--report-width);
  height:auto !important;
}
body.RECORD #dashboard .summary {
  display:none !important;
}

body.PANEL_CLOSED:not(.PANEL_FLOATING) #report {
  top:var(--blockmark-height);
}
body.PANEL_CLOSED:not(.PANEL_FLOATING) #reportswitch {
	width:var(--reportswitch-height);
	border-top:0;
	align-items:flex-start;
	padding:0 calc(var(--skewval) + 5px) 0 5px;
  box-sizing:content-box;
	clip-path: polygon(0 0, 100% 0, calc(100% - var(--skewval)) 100%, 0 100%);
}
body.PANEL_CLOSED:not(.PANEL_FLOATING) #reportswitch .button {
	width:auto;
	align-items:flex-start;
}
body.PANEL_CLOSED.PANEL_FLOATING #dates,
body.PANEL_CLOSED.PANEL_FLOATING #report,
body.PANEL_CLOSED.PANEL_FLOATING #dashboard,
body.PANEL_CLOSED.PANEL_FLOATING #dashboard {
	opacity:0.8;
}
body.PANEL_CLOSED:not(.PANEL_FLOATING) #reportswitch .button .label,
body.PANEL_CLOSED:not(.PANEL_FLOATING) #reportswitch .button:not([rel='floating']),
body.PANEL_CLOSED #reportswitch .button[rel='floating'] .label b,
body.PANEL_CLOSED:not(.PANEL_FLOATING) #dates,
body.PANEL_CLOSED:not(.PANEL_FLOATING) #reportlist,
body.PANEL_CLOSED:not(.PANEL_FLOATING) #dashboard {
	display:none;
}
ody.PANEL_CLOSED #reportswitch .button[rel='floating'] .label i {
	display:block;
}
body.PANEL_CLOSED #reportswitch .button[rel='floating'] svg {
	transform:rotate(45deg);
}
body.PANEL_CLOSED #sig {
	left:0;
}

#report.shrink #reportlist .row {
	height:var(--reportline-reduced-height);
  grid-template-columns:auto 26px 1fr;
	grid-template-rows:22px 18px;
}
#report.shrink #reportlist .row .rank.up:after {
	transform:translate(-50%, -21px);
}
#report.shrink #reportlist .rank.down:after {
	transform:translate(-50%, 5px);
}
#report.shrink #reportlist .row .infos {
	grid-row:2 / 3;
}
#report.shrink #reportlist .row .icon {
	display:flex;
} 
#report.shrink #reportlist .row .photos,
#report.shrink #reportlist .row .skippers,
#report.shrink #reportlist .row .infos .noshrink {
 display:none;
}

#report.dashboard #reportlist .row {
	height:var(--reportline-dashboard-height);
  grid-template-columns:auto 1fr;
	grid-template-rows:24px;
}
#report.dashboard #reportlist .row .rank {
	grid-column: 1 / 2;
	grid-row:1 / 2;
	font-size:16px;
}
#report.dashboard #reportlist .row .boat {
	grid-column: 2 / 3;
	grid-row:1 / 2;
	padding-top:0;
	display:flex;
	align-items:center;
}
#report.dashboard #reportlist .row .rank.up:after,
#report.dashboard #reportlist .rank.down:after,
#report.dashboard #reportlist .row .photos,
#report.dashboard #reportlist .row .skippers,
#report.dashboard #reportlist .row .infos,
#report.dashboard #reportlist .row .icon {
 display:none;
}

}


@media (max-width:900px) {
:root {
  --is_small_screen:1;
  --blockmark-width:auto;
  --blockmark-height:81px;
  --blockmark-half-height:calc(var(--blockmark-height) / 2);
  --report-height:75px;
  --reportline-height:75px;
  --time-height:75px;
  --timekeeper-height:30px;
  --timeline-height:45px;
  --vr-height:40px;
  --vr-width:70px;
  --dates-buttons-width:40px;
  --favorites-height:var(--blockmark-half-height);
  --display-button-size:42px;
  --dashboard-summary-height:40px;
}
body.MULTICLASS {
  --report-height:calc(var(--reportline-height) + var(--boatclasslist-line-height));
}
#blockmark {
  padding-right:10px;
  padding-left:10px;
}
  
#subtitle {
  left:auto;
  right:0;
  padding:0 calc(var(--skewval) * 2 + var(--blockmark-half-height)) 0 calc(var(--skewval) * 2);
  clip-path:polygon(var(--skewval) 0, 100% 0, 100% 100%, 0 100%);
  font-size:22px;
}
body.MONOLEG #subtitle {
  padding-left:calc(var(--skewval) * 2);
  padding-right:calc(var(--skewval) * 2);
}
  
#nav.on {
  width:100%;
  height:100%;
  -webkit-backdrop-filter:blur(20px);
          backdrop-filter:blur(20px);
}
#nav a.on {
  display:none;
}
#nav.on a {
  --size:51px;
  display:flex;
  vertical-align:middle;
  text-align:center;
  margin:7px;
  padding:0 calc(var(--skewval) * 2 + 15px) 0 calc(var(--skewval) + 15px);
  clip-path: polygon(var(--skewval) 0, 100% 0, calc(100% - var(--skewval)) 100%, 0 100%);
}
#nav.on .content {
  position:absolute;
  display:block;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  min-width:50%;
  padding-right:0;
}

#dates {
  top:calc(var(--blockmark-height) + var(--report-height));
  width:var(--dates-buttons-width);
  height: var(--dates-buttons-width);
  background-color:transparent;
}
#dates .group {
  display:none !important;
}
#dates .buttons {
  transform:none;
  left:0;
  right:auto;
}

#sig {
  left:0;
  top:calc(var(--blockmark-height) + var(--report-height));
  bottom:var(--time-height);
}
body.RECORD #sig {
  top:calc(var(--blockmark-height) + var(--dashboard-summary-height));
}
#zoomwindow {
	top:5vmin;
}
body.WEATHER #zoomwindow {
	top:90px;
}

#display {
  bottom:var(--time-height);
}
#display.on {
  top:calc(var(--blockmark-height) + var(--report-height));
}
#display .content {
  max-width:100vw;
  max-height:100%;
}
#display.keep .content {
	padding:0px 62px 8px 6px;
}
#display.keep .content .group.kept {
  height:34px;
}
#display.keep .content .button.kept {
  height:34px;
  width:34px;
}
#display.keep .content .button.kept .iconbutton {
  height:34px;
  width:34px;
}
  
#tools {
  top:auto;
  transform:none;
  bottom:50px;
}
#coords {
  left:0;
  transform:none;
}
  
#graphics {
  left:0;
  top:calc(var(--blockmark-height) + var(--report-height));
  bottom:75px;
}
  
#splittimes {
  left:0px;
  height:80px;
  bottom:35px;
}
  
#time {
  flex-wrap:wrap;
  justify-content:center;
}
#timekeeper,
#chrono {
  flex:auto;
}
#timekeeper {
  justify-content:flex-end;
}
#timekeeper:empty {
  display:flex;
  padding:0;
}
#refresh svg {
width:26px;
height:26px;
}
#chrono {
    clip-path:none;
    padding-right:0;
    justify-content: flex-start;
  }
#chrono+.break {
  display:block;
  width:100%;
}
#replay .buttons {
}
#replay .gauge {
}
#report {
  top:var(--blockmark-height);
  right:0;
  width:auto;  
  height:var(--report-height);
  min-height:var(--report-height);
  overflow:visible; 
  transition:height 400ms;
}
#report.open {
  height:calc(100% - var(--blockmark-height) - var(--time-height));
}
#report.open #reportlist .row:last-of-type {
  margin-bottom:40px;
}
  
#boatclasseslist {
  margin-right:var(--favorites-width);
}
    
#reportlist {
  padding-right:var(--panelslider-width);
}
#reportlist .row {
  display:none;
}
#report.open #reportlist .row,
#reportlist .row.on {
  display:grid;
}
#reportlist .row.on {
  border-color:transparent;
}
#reportlist .row .fav {
  top:7px;
}
#reportlist .row.on .linkout {
	display:block;
}

#reportswitch {
  position:absolute;
	top:0;
  left:auto;
  right:0;
  width:var(--panelslider-width);
  height:calc(var(--reportline-height) - var(--panelslider-height));
} 
#reportswitch .button:not([rel='favorites']) {
  display:none;
}
#reportswitch .button[rel='favorites'] {
  margin:0;
}
#panelslider {
  display:block;
}
body.RECORD #panelslider {
  height:var(--dashboard-summary-height);
}
body.RECORD #panelslider svg {
  height:var(--dashboard-summary-height);
}

#boatcard .cross {
  display:block;
}
#geoblog {
  left:50%;
}
#infopoint {
	left:50%;
	transform:translate(-50%, -50%);
  width:90%;
  max-height:90%;
}

#splittimesLayer .icon text {
	display:block;
}
#timeline .axis .dot {
	display:none;
}

#forecasts {
  top:calc(var(--blockmark-height) + var(--report-height));
  width:100%;
  max-width:100%;
}  
body.RECORD #forecasts {
  top:calc(var(--blockmark-height) + var(--dashboard-summary-height));
}  
#forecasts .cursor, 
#forecasts .wait {
	left:50%;
}
#forecasts .hours {
	left:calc(50% - var(--current-index) * var(--hour-width));
}
#forecasts .scroll {
  clip-path:none;
  width:100%;
}  

#vr,
#subtitle:empty + #vr {
  top:auto;
  bottom:95px;
  left:0;
}
body.TOUCHSCREEN #vr,
body.TOUCHSCREEN #subtitle:empty + #vr {
  bottom:var(--time-height);
}

body.RACE.PANEL_DASHBOARD #dashboard,
body.RACE.PANEL_DASHBOARD_EXT #dashboard {
	display:flex;
  top:calc(var(--blockmark-height) + var(--report-height));
	left:0;
  right:0;
	width:auto;
	height:auto;
	bottom:var(--time-height);
}
body.RECORD #dashboard {
	display:flex;
  top:calc(var(--blockmark-height));
	left:0;
  right:0;
	height:var(--dashboard-summary-height);
	bottom:auto;
  transition:height 400ms;
}
body.RECORD #dashboard.open {
  height:calc(100% - var(--blockmark-height) - var(--time-height));
}
body.RECORD #dashboard .attempt {
  display:none !important;
}
body.RECORD #dashboard.open .attempt {
  display: block !important;
}
body.RECORD #dashboard.open .summary {
  display:none !important;
}

body.PANEL_DASHBOARD #dashboard header,
body.PANEL_DASHBOARD_EXT #dashboard header {
  display:none;
}
body.PANEL_DASHBOARD #report,
body.PANEL_DASHBOARD_EXT #report {
  z-index:200;
}
body.PANEL_DASHBOARD #reportswitch,
body.PANEL_DASHBOARD_EXT #reportswitch,
body.PANEL_DASHBOARD #panelslider,
body.PANEL_DASHBOARD_EXT #panelslider {
  z-index:201;
}
body.PANEL_DASHBOARD #reportlist .row .linkout .arrowin, 
body.PANEL_DASHBOARD_EXT #reportlist .row .linkout .arrowin {
	display:block;
}
body.PANEL_DASHBOARD #reportlist .row .linkout .arrowout, 
body.PANEL_DASHBOARD_EXT #reportlist .row .linkout .arrowout {
	display:none;
}

}


@media (max-width:750px) {
  #reportlist {
    border-width:0 !important;  
  }
}


@media (max-width:600px) {
  #geoblog {
    width:85%;
    min-width:initial;
    max-width:initial;
  }
  #geoblog article {
    max-height:initial;
      
  }
  #geoblog .hat {
    max-height:80px;
    overflow:auto;
  }
  #geoblog .content {
    max-height:150px;
    overflow:auto;
  }
  #geoblog #mediaVideo {
    min-width:initial;
  }
  #boatcard {
    left:50% !important;
    transform:translateX(-50%);
  }
  #boatcard article.qd1 {
    left:50% !important;
    transform:translateX(-50%);
    bottom:15px;
  }
  #boatcard article.qd2 {
    left:50% !important;
    transform:translateX(-50%);
    top:15px;
  }
  #boatcard article.qd3 {
    right:auto;
    left:50% !important;
    transform:translateX(-50%);
    top:15px;
  }
  #boatcard article.qd4 {
    right:auto;
    left:50% !important;
    transform:translateX(-50%);
    bottom:15px;
  }
  #boatcard article.qd5 {
    left:50% !important;
    right:auto;
    top:15px;
    transform:translate(-50%, -50%);
  }
  #boatcard article.qd6 {
    left:50% !important;
    transform:translate(-50%, -50%);
  }
  #boatcard article.qd7 {
    bottom:15px;
    left:50% !important;
    transform:translateX(-50%);
  }
  #boatcard article.qd8 {
    top:15px;
    left:50% !important;
    transform:translateX(-50%);
  }
    
}


@media (max-width:500px) {
  body.RECORD #splittimes {
    height:65px;
  }
  body.RECORD #splittimes .lines {
    line-height:18px;
    font-size:14px;
  }
  body.RECORD.SPLITTIMES #sig {
    bottom:100px;
  }

  #replay,
  #brackets,
  #chrono {
    display:none;
  }
  #datetime {
    flex:1;
  }
}


@media (max-width:450px) {
  :root {
    --blockmark-height:51px;
    --blockmark-half-height:calc(var(--blockmark-height) / 2);
   }
  #subtitle {
	  font-size:18px;
  }

  #forecasts .variables {
    width:calc(100% + var(--variables-skewval));
    display:flex;
    margin-left:calc(0px - var(--variables-skewval));
  }
  #forecasts .variables .var {
    width:auto;
    flex:auto;
    margin-right:calc(-2px - var(--variables-skewval));
  }
  #forecasts .variables .var label {
    display:none;
  }
  #forecasts .params {
    height:auto;
    width:100%;
    flex-direction:column-reverse;
    padding-left:0;
    clip-path:none;
  }
  #forecasts .options {
    display:none;
  }
  #forecasts legend {
    width:100%;
  }
  #forecasts .advert {
    width:100%;
    box-sizing:border-box;
    text-align:center;
    padding:0;
    clip-path:none;
  }

}


@media (max-width:370px) {
  #forecasts .advert {
	  left:0;
    clip-path:none;
  }
  #forecasts legend {
	  max-width:inherit;
  }

  #datetime {
	  flex:auto;
    padding:0;
    justify-content:center;
  }
  #time.nokeeper #refresh:before,
  #time.nokeeper #datetime:before {
    clip-path:none;
  }
  #time.nokeeper #refresh:before,
  #time.nokeeper #datetime:before {
    clip-path:none;
  }

}


@media (max-width:280px) {
  #boatcard .infos table.speeds td:first-of-type+td {
    display:none;
  }
}
