/*### MAIN ###*/
@media screen  {
body * {
 -webkit-user-select: none; /* Chrome, Safari, Opéra depuis la version 15 */
    -moz-user-select: none; /* Firefox */
     -ms-user-select: none; /* Internet explorer depuis la version 10 et Edge */
         user-select: none; /* Propriété standard */
}
body input,
body textarea{
 -webkit-user-select:auto; /* Chrome, Safari, Opéra depuis la version 15 */
    -moz-user-select:auto; /* Firefox */
     -ms-user-select:auto; /* Internet explorer depuis la version 10 et Edge */
         user-select:auto; /* Propriété standard */
}
#main {
  overflow:hidden !important;
}
  #main>div {
    position:absolute;
  }

.tip {
    position:absolute;
    display:none;
    padding:3px 5px;
    font-family:monospace;
    font-size:11px;
    white-space:nowrap;
    pointer-events:none;
    text-shadow: black 0.1em 0.1em 0.1em, black 0.1em 0.1em 0.1em,  black 0.1em 0.1em 0.1em, black 0.1em 0.1em 0.1em;
    z-index:800;
}
}


/*### PROGRESSLINE ###*/
@media screen  {
#progressline {
  top:0px;
  left:18px;
  right:18px;
}
    body.TRACKING #progressline,
    body.FULLSCREEN #progressline {
      display:none;
    }

    #progressline .axis {
      position:relative;
      height:6px;
    }
    #progressline .startpoint, 
    #progressline .arrivalpoint {
      position:absolute;
      width:18px;
      height:6px;
    }
    #progressline .startpoint {
      left:-18px;
    }
    #progressline .arrivalpoint {
      right:-18px;
    }
    #progressline .startpoint:after,
    #progressline .arrivalpoint:before {
      content:'';
      position:absolute;
      display:block;
      top:0;
      width:0;
      height:0;
    }
    #progressline .startpoint:after {
      right:-2px;
      border-top: 6px solid transparent; 
      border-right: 2px solid transparent;
    }
    #progressline .arrivalpoint:before {
      left: -2px;
      border-bottom: 6px solid transparent;
      border-left: 2px solid transparent;
    }

    #progressline .extend.fleet {
      position:absolute;
      top:0;
      display:block;
      left:0;
      right:100%;
      height:6px;
      margin-left:-2px;
    }
    #progressline .extend.boat {
      position:absolute;
      top:0;
      width:4px;
      height:6px;
      left:0;
      margin-left:-2px;
      cursor:pointer;
    }
    #progressline .activeboat {
      position:absolute;
      top:0;
      width:4px;
      height:6px;
      left:0;
      margin-left:-2px;
      cursor:pointer;
    }
      #progressline .activeboat:before,
      #progressline .activeboat:after,
      #progressline .extend:before,
      #progressline .extend:after {
        content:'';
        position:absolute;
        display:block;
        top:0;
        width:0;
        height:0;
      }
      #progressline .activeboat:before,
      #progressline .extend:before {
        left:-2px;
        border-bottom: 6px solid transparent; 
        border-left: 2px solid transparent;
      }
      #progressline .activeboat:after,
      #progressline .extend:after {
        right:-2px;
        border-top: 6px solid transparent; 
        border-right: 2px solid transparent;
      }
      #progressline .activeboat>svg {
        display:none;
        position:absolute;
        top:-9px;
        left:-2px;
        width:8px;
        height:20px;
      }

}


/*### BUTTONS ###*/
@media screen  {
#buttons {
  right:0;
  top:6px;
  bottom:45px;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  z-index:500;
  padding-top:8px;
  font-size:0;
	scrollbar-width:none;
}
#buttons::-webkit-scrollbar {
  width:0px;
}
    body.FULLSCREEN #buttons {
      top:0;
    }
  body.TRACKING #buttons {
    top:5px;
  }
    #buttons .group {
      display:block;
    }
    #buttons .group+.group {
      /*padding-top:14px;*/
    }

    .iconbutton {
      position:relative;
      display:block;
      width:38px;
      height:32px;
      overflow:visible;
      z-index:2;
    }
    .iconbutton.disabled {
      opacity:0.3;
      cursor:default;
    }
    .iconbutton:before {
      display:none;
      content:attr(legend);
      position:absolute;
      top:0;
      right:100%;
      font-size:16px;
      line-height:32px;
      box-sizing:border-box;
      padding:0 0.3em;
      white-space:nowrap;
    }
    #buttons .group svg {
      width:26px;
      height:26px;
      margin:3px 6px;
      pointer-events:none;
    }
    #buttons .group svg:empty {
      display:none;
    }
    
    body.EARTH #bt_tiledmap {
      opacity:0.3;
      cursor:default;
      pointer-events:none;
   }
}
@media (hover: hover) and (pointer: fine) {
  .iconbutton.over:before {
    display:block;
  }
  .iconbutton.on:hover:before {
    display:block;
  }
}


/*### SIG ###*/
@media screen  {
#sig {
  left:340px;
  top:6px;
  right:38px;
  bottom:45px;
  overflow:hidden;
  box-sizing:border-box;
  z-index:100;
}
    body.TRACKING #sig {
      left:5px;
      top:6px; 
    }
    body.FULLSCREEN #sig {
      top:0;
    }
    body.SPLITTIMES #sig {
      bottom:165px;
    }
    body.RECORD.SPLITTIMES #sig {
      bottom:120px;
    }

#zoomwindow {
  position:absolute;
  left:10vmin;
  top:8vmin;
  right:10vmin;
  bottom:8vmin;
  z-index:1000;
  background-color:transparent;
  border:none;
  pointer-events:none;
 -webkit-user-select: none; /* Chrome, Safari, Opéra depuis la version 15 */
    -moz-user-select: none; /* Firefox */
     -ms-user-select: none; /* Internet explorer depuis la version 10 et Edge */
         user-select: none; /* Propriété standard */

}
body.DEBUG #zoomwindow {
  background-color:rgba(255,0,255,0.2);
  border-color:#ff00ff;
}
}


/*### GRAPHICS ###*/
@media screen  {
#graphics {
  display:none;
  left:340px;
  top:6px;
  right:38px;
  bottom:45px;
  overflow:hidden;
  box-sizing:border-box;
  z-index:260;
}
#graphics.on {
  display:block;
}
    #graphics .drawing {
      position:absolute;
      top:60px;
      left:0;
      right:35px;
      bottom:0px;
    }
    #graphics svg {
      position:absolute;
      top:0;
      left:0;
      right:0;
      width:100%;
      height:100%;
    }
          #graphics svg g {
            display:none;
          }
          #graphics svg g.on {
            display:inherit;
          }
              #graphics svg g path {
                fill:none;
                stroke-width:1px;
                z-index:1;
              }
              #graphics svg g path.off {
                opacity:0.1;
                z-index:100;
              }
              #graphics svg g path.over,
              #graphics svg g path.off.over {
                opacity:1;
                z-index:100;
              }
              #graphics svg g path.on,
              #graphics svg g path.off.on {
                opacity:1;
                z-index:100;
              }

          #graphics svg#graphAdvancePos {
            top:0;
            bottom:50%;
            height:50%;
          }
          #graphics svg#graphAdvanceNeg {
            bottom:0;
            top:50%;
            height:50%;
          }
          #graphics svg#graph24h {
            fill:none;
            stroke-width:1px;
          }
                                       

    #graphics .variables {
      position:relative;
      margin-left:auto;
      margin-right:auto;
    }
    #graphics .variables:before,
    #graphics .variables:after {
      content:'';
      position:absolute;
      display:block;
      top:0;
      width:0;
      height:0;
      border-top: 28px solid transparent; 
    }
    #graphics .variables:before {
      left:-10px;
      border-left: 10px solid transparent;
    }
    #graphics .variables:after {
      right:-10px;
      border-right: 10px solid transparent;
    }
        #graphics .variables td {
          vertical-align:middle;
          white-space:nowrap;
          line-height:30px;
          font-size:18px;
          text-align:left;
          font-weight:normal;
          padding:0 5px;
        }
    #graphics .legend {
      position:absolute;
      top:60px;
      bottom:0px;
      overflow:hidden;
      width:25px;
      right:5px;
    }
    #graphics .grid {
      background:none !important;
      background-color:transparent !important;
    }
    #graphics sup {
      position:absolute;
      display:block;
      right:0;
      transform:translateY(-50%);
      font-size:12px;
      white-space:nowrap;
      pointer-events:none;
    }
    #graphics:after {
      content:attr(data-unit);
      position:absolute;
      display:block;
      top:0px;
      right:5px;
      height:30px;
      line-height:30px;
      width:25px;
      text-align:right;
    }
      
body.RECORD #graphics {
  pointer-events:none;
}
body.RECORD #graphics .variables {
  pointer-events:all;
}
body.RECORD #graphics .drawing {
  bottom:60px;
}

}


/*### SPLITTIMES ###*/
@media screen {
  #splittimes {
    display:none;
    position:absolute;
    left:340px;
    right:38px;
    bottom:45px;
    height:120px;
    overflow:hidden;
    box-sizing:border-box;
    z-index:270;
    *padding:0 10px 10px 10px;
    overflow:auto;
    scrollbar-width:none;
    /*filter: drop-shadow(1px 1px 3px rgba(0,0,0,0.5));*/      
    /*border:1px solid;*/
  }

  #splittimes.on {
    display:block;
  }
  #splittimes * {
    white-space:nowrap;
  }
      #splittimes table {
        position:relative;
        width:100%;
      }
      #splittimes .splittime {
        display:none;
      }
      #splittimes .splittime.on {
        display:table;
      }
      #splittimes .label {
        *padding-top:10px;
        position:sticky;
        z-index:2;
        top:0px;
        text-align:center;
        line-height:1.3;
        font-size:20px;
        font-family:haettenschweiler;
      }
          #splittimes .label label {
            display:inline-block;
            padding:0 2em;
          }
          #splittimes .label .prev,
          #splittimes .label .next {
            display:inline-block;
            width:10px;
            height:14px;
            stroke:none;
            cursor:pointer;
          }
          #splittimes .label .prev:not([rel]),
          #splittimes .label .next:not([rel]) {
            display:none;
          }
      #splittimes .lines {
        z-index:1;
      }
      #splittimes .lines td {
        padding:0 5px;
      }
      #splittimes .lines .boat {
        cursor:pointer;
      }
          #splittimes .lines .rank,
          #splittimes .lines .date,
          #splittimes .lines .time,
          #splittimes .lines .speed {
            text-align:right;
          }
          #splittimes .lines .rank,
          #splittimes .lines .name {
            font-weight:bold;
          }
          #splittimes .lines .name {
            width:100%;
            position:relative;
          }
            #splittimes .lines .name>span {
              display:block;
              position:absolute;
              top:0;
              left:0;
              width:100%;
              height:100%;
              overflow:hidden;
            }
    body.RECORD #splittimes {
      height:75px;
    }
    body.RECORD #splittimes .lines {
      line-height:22px;
      font-size:16px;
    }
}


/*### LEAFLET ###*/
@media screen  {
#leaflet {
  display:none;
  position:absolute;
  left:0;
  top:0;
  right:0;
  bottom:0;
  overflow:hidden;
  box-sizing:border-box;
  z-index:101;
}
#leafletcredits {
  position:absolute !important;
  bottom:0 !important;
  top:auto !important;
  right:auto !important;
  left:50% !important;
  transform:translateX(-50%);
  background-color:rgba(255,255,255,0.5);
  font-size:11px !important;
  white-space:nowrap;
}
#navionicscredits {
  position:absolute !important;
  bottom:0px !important;
  top:auto !important;
  right:0 !important;
  left:0 !important;

}

body.LEAFLET #sig {
  background:transparent !important;
}
body.FAKE_LEAFLET #weathercolorsLayer,
body.LEAFLET #weathercolorsLayer {
  display:none !important;
}
body.LEAFLET #leaflet {
  display:block;
}
body.LEAFLET #groundLayer,
body.LEAFLET #bathyLayer,
body.FAKE_LEAFLET #bathyLayer {
  display:none;
}
body.FAKE_LEAFLET #groundLayer {
  display:inherit;
}
body.FAKE_LEAFLET #groundLayer path {
  fill:#D9E1B4;
}
body.FAKE_LEAFLET #sig {
	background-color:#99D9F2;
}

body.EARTH #leaflet {
  display:none !important;
}
}


/*### LAYERS ###*/
@media screen  {
#svgmodels {
  display:none;  
}


#map {
  position:relative!important;
  z-index:102;
}

#groundLayer,
#bathyLayer {
  pointer-events:none !important;
  touch-action:none !important;
}


#boatsLayer>g {
  display:none;
}
    #boatsLayer>g>g path {
      stroke:none;
    }
    #boatsLayer>g>g path:first-child {
      stroke-width:0.2;
    }
    #boatsLayer>g>g path:first-of-type {
      stroke-width:0.2;
    }
    #boatsLayer>g.ghost {
      opacity:0.1;
      pointer-events:none;
    }
    #boatsLayer>g.hidden {
	    display:none !important;
    }
    #boatsLayer>g[rel='RET'] {
      opacity:0.4;
    }
    body.RECORD #boatsLayer>g.ghost {
      opacity:1 !important;
      pointer-events:inherit;
    }
    #boatsLayer circle {
      opacity:0;
    }
    #boatsLayer text {
      opacity:0.2;
      -moz-user-select: -moz-none;-khtml-user-select: none;-webkit-user-select: none;-ms-user-select: none;user-select: none;
      cursor:default;
      pointer-events:none;
    }
    body.FAKE_LEAFLET #boatsLayer text,
    body.LEAFLET #boatsLayer text {
	    fill: #000000;
    }
    body.RACE #layout.noclass #boatsLayer>g.ghost {
      display:none !important;
    }
    #boatsLayer g.compare>g {
      opacity:0.5;
    }


#tracksLayer {
  *font-size:50px !important;/*define the slicer length*/
  stroke-width:1px;
}
#routingsLayer {
  stroke-dasharray: 6, 2;
  font-size:0px;
}

#tracksLayer g,
#tracksSTMLayer g,
#routingsLayer g {
  fill:none;
  display:none;
}
#tracksLayer g.visible,
#tracksSTMLayer g.visible,
#routingsLayer g.visible {
  display:inherit;
}
    #tracksLayer    g path.n1,
    #tracksSTMLayer g path.n1 {
      display:none;
    }
    #tracksLayer    g path.n2,
    #tracksSTMLayer g path.n2 {
      stroke-opacity:0.15;
    }
    #tracksLayer    g path.n3,
    #tracksSTMLayer g path.n3 {
      stroke-opacity:0.15;
    }
    body.PRERACE #tracksLayer    g path.n1,
    body.PRERACE #tracksSTMLayer g path.n1,
    body.PRERACE #tracksLayer    g path.n2,
    body.PRERACE #tracksSTMLayer g path.n2,
    body.PRERACE #tracksLayer    g path.n3,
    body.PRERACE #tracksSTMLayer g path.n3 {
      display:none !important;
    }
    #tracksLayer    g.on path.n1,
    #tracksSTMLayer g.on path.n1 {
      display:inherit;
      stroke-opacity:1;
    }
    #tracksLayer    g.on path.n2,
    #tracksLayer    g.on path.n3,
    #tracksSTMLayer g.on path.n2,
    #tracksSTMLayer g.on path.n3 {
      display:none;
    }
    #tracksLayer    g.ghost,
    #tracksSTMLayer g.ghost,
    #routingsLayer  g.ghost {
      display:none;
    }
    #routingsLayer g path.n1 {
      stroke-opacity:0.5;
    }
    #routingsLayer g path.n2,
    #routingsLayer g path.n3 {
      *display:none;
    }
    #tracksLayer    g.on path.n1,
    #tracksSTMLayer g.on path.n1 {
    }
    #layout.noclass #tracksLayer    g.ghost,
    #layout.noclass #tracksSTMLayer g.ghost,
    #layout.noclass #routingsLayer  g.ghost {
      display:none !important;
    }
    #tracksLayer>g.hidden {
	    display:none !important;
    }


#referencesLayer {
}
    #referencesLayer path {
      fill:none;
      transition:opacity 0.5s ease-out;
    }
    #referencesLayer path.n2,
    #referencesLayer path.n3{
      display:none;
    }
    #referencesLayer .currentPosition,
    #referencesLayer .plots g {
      cursor:pointer;
    }
    #referencesLayer g circle:last-of-type {
      fill-opacity:0;
    }
    #referencesLayer g text {
      display: none;
      text-shadow: #000000 0.1em 0.1em 0.1em, #000000 0.1em 0.1em 0.1em, #000000 0.1em 0.1em 0.1em, #000000 0.1em 0.1em 0.1em;
    }
    #referencesLayer g tspan {
      fill: #FFFFFF;
      font-size:14px;
    }
    #referencesLayer g.on {
      opacity:1;
    }
    #referencesLayer g.on circle:last-of-type {
      fill-opacity:1;
    }
    #referencesLayer g.on text {
      display:inherit;
    }
    #referencesLayer>g {
      transition:opacity 0.5s ease-out;
    }
    #referencesLayer.single>g {
      opacity:0;
    }
    #referencesLayer.single>g.single {
      opacity:1;
    }
    #referencesLayer.single>g.single path {
      opacity:1;
    }

#windLayer {
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  pointer-events:none;
}
    #windLayer.scale path {
      pointer-events:none;
    }

#weatherColorImg.off {
  display:none;
}

#orthoLayer {
  fill:none;
  stroke-opacity:0.7;
  /*stroke-dasharray:6,2; ca ralenti trop à plein zoom !*/
  stroke-width:0.5;
}
body.FAKE_LEAFLET #orthoLayer,
body.LEAFLET #orthoLayer {
	stroke:#000000 !important;
}

#areasLayer path#AEZ {
  stroke:none !important;
}

#areasLayer #live {
	display:none;
}
#areasLayer path#icelimit {
	stroke: none !important;
	fill: rgba(255,255,255,0.85) !important;
}
#areasLayer .live {
	stroke: rgba(255,255,255,0.1);
	fill: rgba(255,255,255,0.03);
}
#areasLayer path#ZI_EoliennesStNazaire {
	fill:rgba(255,255,255,0.1);
	stroke:#FFFFFF;
}

body.LEAFLET #areasLayer path#icelimit {
  display:none !important;
}
#areasLayer path#equateur {
	fill: none !important;
}

#gatesLayer path {
  fill:none;
}
    #gatesLayer circle {
      stroke:none;
    }
#gatesLayer #equateur circle {
	display:none;
}		
#gridLayer {
  pointer-events:none;
}
#gridLayer path {
  fill:none;
}

#daynightLayer {
  opacity:0.3;
  display:none;
  pointer-events:none;
  animation-name: daynight;
  animation-duration: 1.5s;
  animation-iteration-count:1;
}

@keyframes daynight {
  from {opacity: 0;}
  to {opacity: 0.3;}
}    

#ruleLayer {
}
  #ruleLayer g {
  stroke-dasharray:none !important;
  cursor:pointer;
  }
  #ruleLayer>g>circle {
    stroke-opacity:1;
    fill-opacity:0.2;
  }
  #ruleLayer>g>path {
    stroke-opacity:1;
    fill:none;
  }
  #ruleLayer>path {
    stroke-opacity:1;
    fill:none;
  }
  #ruleLayer>g.virtual>circle {
    stroke:transparent;
    fill:transparent;
  }
  #ruleLayer>g.virtual>path {
    stroke-opacity:0.7;
  }

#poiLayer g text {
  text-shadow: 1px 1px 1px #1E1E1E,  -1px -1px 1px #1E1E1E,  1px -1px 1px #1E1E1E,  -1px 1px 1px #1E1E1E;
  cursor:default;
}
  #poiLayer g.arrv text,
  #poiLayer g.start text {
    font-weight:bold;
  }
  #poiLayer g.area {
    mix-blend-mode:soft-light;
    opacity:0.6;
  }
  #poiLayer g.area circle {
    fill:transparent;
  }
  #poiLayer g.area text {
    font-weight:bold;
    text-shadow: 1px 1px 1px #000000,  -1px -1px 1px #000000,  1px -1px 1px #000000,  -1px 1px 1px #000000;
    font-size:16px;
  }
  #poiLayer g.ctry circle {
    fill:transparent;
  }
  #poiLayer g.ctry text {
    font-family:haettenschweiler;
    font-weight:bold;
    text-shadow: 1px 1px 1px #000000,  -1px -1px 1px #000000,  1px -1px 1px #000000,  -1px 1px 1px #000000;
    font-size:32px;
  }
  #poiLayer g[rel="100000"] g {
    opacity:0.2;
  }
  #poiLayer g[rel="100000"] g:hover {
    opacity:1;
  }


#mediaLayer {
  display:none;
}
  #mediaLayer>g {
    opacity:0.5;
    cursor:pointer;
  }
  #mediaLayer>g.hidden {
    display:none;
  }
  #mediaLayer>g.focus {
    opacity:1;
  }
  #mediaLayer>g.visible {
    display:block;
  }
  #mediaLayer .geomedia {
    transform:scale(0.8);
  }
      #mediaLayer .geomedia:hover {
        transform:scale(1);
      }
		  #mediaLayer .geomedia .face {
			  display: none;
		  }

		  #mediaLayer .geomedia .balloon {
			  display: inherit;
		  }

		  #mediaLayer .geomedia.type0 .type0,
		  #mediaLayer .geomedia.type1 .type1,
		  #mediaLayer .geomedia.type2 .type2,
		  #mediaLayer .geomedia.type3 .type3,
		  #mediaLayer .geomedia.type4 .type4 {
			  display: inherit;
		  }

#infosLayer {
  display:none;
}
#infosLayer.visible {
  display:inherit;
}
  #infosLayer .geoinfo {
    transform:scale(0.8);
    cursor:pointer;
    }
        #infosLayer .geoinfo:hover {
          transform:scale(1);
        }		
  #infosLayer>g.hidden {
    display:none;
  }
  #infosLayer>g.visible {
    display:block;
  }

#splittimesLayer .line {
  fill:none;
  stroke-opacity:0.7;
}
#splittimesLayer .icon {
  cursor:pointer;
}
#splittimesLayer .icon:hover>g {
  transform:scale(1.2);
}

#layout .dkside {
  display:none !important;
}

#layout #halo {
  pointer-events:none;
}


#gridlines {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  pointer-events:none;
  z-index:103;
}
    #gridlines svg {
      width:100%;
      height:100%;
    }
    #gridlines text {
      font-size:11px;
      font-family:monospace;
      text-align:right;
    }


#streamlines {
  position:absolute;
  top:0;
  left:0;
  pointer-events:none;
  z-index:102;
}

}


/*### REPORT ###*/
@media screen  {
#report {
  position:relative;
  left:0px;
  top:6px;
  bottom:0px;
  width:340px;
  z-index:320;
  box-sizing:border-box;
  min-height:60px;
}
    #report.off #reportList .row>* {
      visibility:hidden;
    }

  body.RACE.MULTICLASS #report {
    min-height:90px;
  }
  body.FULLSCREEN #report,
  body.FULLSCREEN.RACE.MULTICLASS #report {
    top:0;
  }
  body.RECORD #report,
  body.TRACKING #report {
    display:none;
  }

#boatclasseslist {
  width:100%;
  border:0px;
  height:30px;
  position:relative;
}
    body.RACE.MONOCLASS #boatclasseslist,
    body.RECORD #boatclasseslist {
      display: none;
    }
    #boatclasseslist div {
      position:relative;
      display:inline-block;
      font-size:21px;
      line-height:29px;
      box-sizing:border-box;
      text-align:center;
      border:1px solid;
      cursor:pointer;
    }
    #boatclasseslist div+div {
      border-left-width:0;
    }
    #boatclasseslist>div input.mode_video {
      display:none;
      position:absolute;
      top:3px;
      right:3px;
    }
    #boatclasseslist>div.on input.mode_video {
      display:block;
    }
    body.RACE.MULTICLASSFAKE #boatclasseslist>div {
      display:none;
    }
    body.RACE.MULTICLASSFAKE #boatclasseslist>div.on {
      display:block;
      width:100% !important;
    }


#reportList {
  position:absolute;
  overflow:auto;
  top:31px;
  left:0;
  right:0;
  bottom:0px;
	scrollbar-width:none;
}
#reportList::-webkit-scrollbar {
  width:0px;
}
    body.RACE.MONOCLASS #reportList {
      top:0px;
    }
    body.RECORD #reportList {
      display: none;
    }
    #reportList .row {
      position:relative;
      box-sizing:border-box;
      height:75px;
      padding:0 5px 0 100px;
      border-style:solid;
      border-width:0 0px 1px 0px;
      cursor:pointer;
      overflow:hidden;
    }
    #reportList .row.ghost {
     display:none; 
    }
    #reportList .row.hidden {
     display:none !important; 
    }
    #reportList .row.nophoto {
      padding-left:40px;
    }
    #reportList .identity {
      display:block;
    }
    #boatcard .photo,
    #reportList .photo {
      position:absolute;
      display:block;
      top:7px;
      left:5px;
      width:60px;
      height:60px;
      box-sizing:border-box;
      z-index:301;
    }
    #boatcard .photo .bkg,
    #reportList .photo .bkg {
      position:absolute;
      display:block;
      top:0;
      left:5px;
      width:100%;
      height:100%;
      box-sizing:border-box;
      border-radius:0 10px 10px 0;
      z-index:301;
    }
    #boatcard .photo .img,
    #reportList .photo .img {
      position:absolute;
      left:0px;
      top:0px;
      width:100%;
      height:100%;
    }
    #boatcard .photo .img>img,
    #reportList .photo .img>img {
      position:absolute;
      left:0px;
      top:0px;
      width:100%;
      height:100%;
      border-radius:0 10px 10px 0;
      z-index:301;
    }
    #boatcard.nophoto .photo .img,
    #reportList .row.nophoto .photo .img {
      display:none;
    }
    #boatcard.nophoto .photo .bkg,
    #reportList .row.nophoto .photo .bkg {
			left:0;
      width:4px;
			border-radius:0;
    }

    #reportList .row .exturl {
      position:absolute;
      bottom:4px;
      left:60px;
      width:14px;
      height:14px;
      border-radius:50%;
      border:1px solid;
      font-family:haettenschweiler;
      font-size:27px;
      z-index: 302;
    }
    #reportList .row.nophoto .exturl {
      left:18px;
    }
    #reportList .row .exturl:empty {
      display:none;
    }
    #reportList .row .exturl:before {
      content:'';
      position:absolute;
      top:2px;
      left:6px;
      height:10px;
      width:2px;
    }
    #reportList .row .exturl:after {
      content:'';
      position:absolute;
      top:6px;
      left:2px;
      height:2px;
      width:10px;
    }
    #reportList .row .fav {
      display:none;
	    position:absolute;
	    top:0;
	    right:0;
	    height:30px;
	    width:30px;
	    cursor:pointer;
      z-index:2;
    }
    #reportList.withgraph .row .fav {
      display:none !important;
    }
    #reportList.withfav .row .fav {
      display:block;
    }
    #reportList .row .fav svg {
      stroke-width:1px;
	    position:absolute;
	    top:50%;
	    left:50%;
	    height:80%;
	    width:80%;
	    transform:translate(-50%, -50%);
    }
    #geoblog .rank,
    #boatcard .rank,
    #reportList .rank {
      position:absolute;
      display:block;
      font-size:22px;
      line-height:20px;
      width:2.4ex;
      font-weight:bold;
      text-align:right;
    }
    #boatcard .rank,
    #reportList .rank {
      top:3px;
      left:71px;
    }
    #reportList .row.nophoto .rank,
    #boatcard.nophoto .rank {
      left:10px;
    }
    #reportList .rank .progress:after,
    #reportList .rank .progress.up:after,
    #reportList .rank .progress.down:after,
    #boatcard .rank .progress:after,
    #boatcard .rank .progress.up:after,
    #boatcard .rank .progress.down:after {
      position:absolute;
			display:block;
      top:18px;
      right:0;
      font-size:12px;
    }
    #reportList .rank .progress:after,
    #boatcard .rank .progress:after {
      content:'●';
    }
    #reportList .rank.eq .progress:after,
    #boatcard .rank.eq .progress:after {
      content:'►';
    }
    #reportList .rank.up .progress:after,
    #boatcard .rank.up .progress:after {
      content:'▲';
    }
    #reportList .rank.down .progress:after,
    #boatcard .rank.down .progress:after {
      content:'▼';
    }
    #geoblog .names>p:nth-child(1),
    #boatcard .names>p:nth-child(1),
    #reportList .names>p:nth-child(1) {
      display:block;
      font-size:16px;
      line-height:20px;
      padding:2px 0 0 0;
      font-weight:bold;
      white-space:nowrap;
    }
    #geoblog .names>p:nth-child(2),
    #boatcard .names>p:nth-child(2),
    #reportList .names>p:nth-child(2) {
      display:block;
      font-weight:bold;
      font-size:14px;
      line-height:16px;
    }
    #geoblog .names span+span:before,
    #reportList .names span+span:before {
      content:' / ';
    }
    #geoblog .names span+span:empty:before,
    #reportList .names span+span:empty:before {
      content:'';
    }

    #reportList .infos {
      display:block;
      font-size:13px;
      line-height:14px;
      margin-top:4px;
      white-space:nowrap;
    }
    #reportList .infos span.dtl {
      float:right;
    }
    #reportList .infos fieldset.discrete {
      opacity:0.6;
    }
    #reportList .row.STM .rank,
    #reportList .row.NL .rank,
    #reportList .row.SUS .rank,
    #reportList .row.DNF .rank,
    #reportList .row.RET .rank {
      visibility:hidden;
    }
    #reportList .row.ARV + div.RAC_1 {
      border-top:3px solid;
    }
    #reportList .row.ghost.ARV + div.RAC_1 {
      border-top:0;
    }
    
    #reportList .row input.graph {
      position:absolute;
      top:5px;
      right:2px;
      display:none;
    }
    #reportList.withgraph .row input.graph {
      display:block;
    }
    #reportList .infos .dtlprogress {
      font-style:italic;
    }
    #reportList .infos .dtlprogress:before,
    #reportList .infos .dtlprogress:before {
      font-size:smaller;
    }
    #reportList .infos .dtlprogress.pos:before {
      content:'▲';
    }
    #reportList .infos .dtlprogress.neg:before {
      content:'▼';
    }
    #reportList .infos .dtlprogress.eq:before {
      content:'►';
    }
		#reportList .infos label {
			font-weight: bold;
		}
		#reportList .infos label::after {
			content: ' : ';
		}
    
    #reportList .nat:after {
      display:inline-block;
      content:'';
      width:21px;
      height:14px;
      margin-left:7px;
      background-repeat:no-repeat;
      background-position:center center;
			background-size:100%;
    }
    #reportList .nat.no:after {
      display:none;
    }
    #reportList .nat.FRA:after {
      background-image: url('assets/img/flag_fr.gif');
    }
    #reportList .nat.CZE:after {
      background-image: url('assets/img/flag_cz.png');
    }
    #reportList .nat.ESP:after {
      background-image: url('assets/img/flag_es.gif');
    }
    #reportList .nat.BEL:after {
      background-image: url('assets/img/flag_be.png');
    }
    #reportList .nat.GBR:after {
      background-image: url('assets/img/flag_en.gif');
    }
    #reportList .nat.GER:after {
      background-image: url('assets/img/flag_de.gif');
    }
    #reportList .nat.GRE:after {
      background-image: url('assets/img/flag_gc.png');
    }
    #reportList .nat.ITA:after {
      background-image: url('assets/img/flag_it.gif');
    }
    #reportList .nat.JPN:after {
      background-image: url('assets/img/flag_jp.png');
    }
    #reportList .nat.POL:after {
      background-image: url('assets/img/flag_po.png');
    }
    #reportList .nat.RUS:after {
      background-image: url('assets/img/flag_ru.gif');
    }
    #reportList .nat.SUI:after {
      background-image: url('assets/img/flag_ch.gif');
    }
    #reportList .nat.UAE:after {
      background-image: url('assets/img/flag_uae.png');
    }
    #reportList .nat.IRL:after {
      background-image: url('assets/img/flag_ie.png');
    }
    #reportList .nat.AUS:after {
      background-image: url('assets/img/flag_au.png');
    }
    #reportList .nat.URY:after {
      background-image: url('assets/img/flag_uy.png');
    }
    #reportList .nat.USA:after {
      background-image: url('assets/img/flag_us.svg');
    }
    #reportList .nat.AUT:after {
      background-image: url('assets/img/flag_at.svg');
    }
    #reportList .nat.SLO:after {
      background-image: url('assets/img/flag_si.svg');
    }
    #reportList .nat.MAR:after {
      background-image: url('assets/img/flag_ma.svg');
    }
    #reportList .nat.SWE:after {
      background-image: url('assets/img/flag_se.svg');
    }
    #reportList .nat.CAN:after {
      background-image: url('assets/img/flag_ca.svg');
    }
    #reportList .nat.NED:after {
      background-image: url('assets/img/flag_nl.svg');
    }
    #reportList .nat.BRA:after {
      background-image: url('assets/img/flag_br.gif');
    }
    #reportList .nat.URU:after {
      background-image: url('assets/img/flag_uy.svg');
    }
    #reportList .nat.ARG:after {
      background-image: url('assets/img/flag_ar.svg');
    }
    #reportList .nat.SA:after {
      background-image: url('assets/img/flag_sa.svg');
    }
    #reportList .nat.VEN:after {
      background-image: url('assets/img/flag_ve.svg');
    }
    #reportList .nat.LUX:after {
      background-image: url('assets/img/flag_lu.svg');
    }
    #reportList .row input.mode_video {
      display:block;
      position:absolute;
      top:0;
      right:0;
    }
    #reportList .row input.mode_video.video_visible {
      right:22px;
    }
    
#detailshandle {
  display:none;
  position:absolute;
  right:0px;
  top:6px;
  width:38px;
  height:60px;
  overflow:hidden;
  z-index:321;
  cursor:pointer;
}
    body.RECORD #detailshandle {
      height:40px;
    }
    body.RECORD #detailshandle svg {
      height:50px;
    }
    body.RACE.MULTICLASS #detailshandle {
      height:90px;
    }
    body.RACE.MULTICLASS #detailshandle svg {
      top:calc(50% + 18px);
    }
    body.FULLSCREEN #detailshandle {
      top:59px;
    }
    body.FULLSCREEN.RACE.MULTICLASS #detailshandle {
      top:0;
    }

    #detailshandle svg {
      position:absolute;
      top:50%;
      left:50%;
      width:38px;
      height:60px;
      transform:translate(-50%, -50%);
      stroke-width:2px;
      -webkit-transition:transform 400ms;
         -moz-transition:transform 400ms;
          -ms-transition:transform 400ms;
           -o-transition:transform 400ms;
              transition:transform 400ms;
    }
    #detailshandle.open svg {
      transform:translate(-50%, -50%) rotate(180deg);
    }

    #main.noleaderboard #report {
	    display:none;
    }

}


/*### COORDS, ZOOM ###*/
@media screen  {
#coords {
  position:absolute;
  left:5px;
  bottom:0px;
  height:25px;
  line-height:25px;
  font-size:12px;
  padding-left:5px;
  font-family:monospace;
	white-space:nowrap;
  opacity:0.7;
  z-index:200;
  cursor:pointer;
}
  body.TRACKING #coords {
    left:5px;
  }
    #coords .lat,
    #coords .lng {
      display:inline-block;
    }
    #coords .lat:after {
      content:'•';
      display:inline-block;
      margin:0 3px 0 5px;
    }
  
  
#zoom {
  position:absolute;
  top:auto;
  height:88px;
  bottom:5px;
  right:5px;
  width:26px;
  z-index:220 !important;
}
    #zoom .button {
      position:absolute;
      display:block;
      cursor:pointer;
      width:20px;
      height:20px;
      border-radius:50%;
      box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.5);
      border:2px solid;
    }
    #zoom .button.plus {
      top:0;
    }
    #zoom .button.zero {
      top:50%;
      transform:translateY(-50%);
    }
    #zoom .button.minus {
      bottom:0;
    }
    #zoom .button .face {
      position:absolute;
      top:0px;
      left:0px;
      width:20px;
      height:20px;
    }
    #zoom .button .face svg {
      width:100%;
      height:100%;
    }

    #zoom .bar {
      display:none;
      position:absolute;
      top:11px;
      bottom:11px;
      left:0px;
      right:0px;
      padding:11px 0;
      border-radius:16px;
    }
        #zoom .bar .button {
          margin-top:-10px;
          top:100%;
        }
    #zoom .axis {
      display:inline-block;
      position:relative;
      width:100%;
      height:100%;
      box-sizing:border-box;
      cursor:pointer;
    }
    #zoom .text {
      display:none;
      position:absolute;
      bottom:0;
      right:30px;
      text-align:right;
      font-size:11px;
      font-family:monospace;
      cursor:default;
      mix-blend-mode:difference;
    }
}


/*### TIME ###*/
@media screen  {
#time {
  position:absolute;
  left:340px;
  bottom:0px;
  height:45px;
  right:0px;
  overflow:hidden;
  z-index:102;
}
		#time>table {
			height:100%;
		}
        #time td {
          position:relative;
          vertical-align:middle;
          white-space:nowrap;
          height:100%;
          box-sizing:border-box;
        }


#refresh {
  display:none;
}
body.STANDBY #refresh,
body.FINISH  #refresh {
  display:none;
}
    #refresh.on {
      display:table-cell;
    }
    #refresh svg {
      display:block;
      width:20px;
      height:20px;
      transform:rotate(-90deg);
      border-radius:50%;
      margin:4px;
    }
    #refresh circle {
      fill: transparent;
      stroke: #655;
      stroke-width:32;
      stroke-dasharray: 0 100; /* for 38% */
    }
  #datetime,
  #chrono {
    font-size:18px;
    text-align:left;
    font-weight:bold;
    padding:0 5px;
  }
  body.RECORD.STANDBY #chrono,
  body.RECORD.FINISH #chrono,
  body.TRACKING #chrono {
    display:none;
  }
  #datetime:after,
  #timekeeper:after{
  content:'';
    position:absolute;
    display:block;
    top:0;
    right:-16px;
    width:0;
    height:0;
    border-top:45px solid transparent; 
    border-right:16px solid transparent;
    z-index:3;
  }
  #chrono b {
    color:rgba(0,0,0,0);
  }
  #chrono i {
    display:inline-block;
  }
  #datetime small {
    display:none;
  }
  #timekeeper {
    padding:0 8px;
  }
  #timekeeper a,
  #timekeeper img {
    height:29px;
    margin:8px 0;
    display:block;
  }
  #timekeeper:empty {
    padding:0 2px;
  }
  
#replay {
  position:relative;
  display:none;
  padding:0 15px 3px 35px;
  white-space:nowrap;
}
    #replay svg {
      display:inline-block;
      cursor:pointer;
      vertical-align:middle;
    }
    #replay .buttons {
      width:18px;
      height:18px;
      margin:0 7px;
    }
    #replay .text {
      position:absolute;
      height:13px;
      bottom:0px;
      left:0;
      right:0;
      text-align:center;
      color: #ffffff;
      mix-blend-mode: difference;
      opacity:0.5;
      font-size:9px;
      font-family:monospace;
    }
    #replay .gauge {
      position:absolute;
      bottom:8px;
      width:calc(100% - 20px);
      height:9px;
      left:20px;
      cursor:pointer;
    }
        #replay .gauge:before,
        #replay .gauge:after {
          content:'';
          position:absolute;
          top:3px;
          bottom:0;
          width:calc(50% - 1px);
          height:2px;
          z-index:1;
        }
        #replay .gauge:before {
          left:0;
        }
        #replay .gauge:after {
          right:0;
        }
        #replay .cursor {
          position:absolute;
          top:50%;
          transform:translateY(-50%);
          left:75%;
          width:14px;
          height:14px;
          margin-left:-7px;
          margin-top:-1px;
          border-radius:50%;
          z-index:2;
        }

        #replay.off .pause,
        #replay.off .gauge,
        #replay.off .text {
          display:none;
        }
    
    #replay.off .buttons {
      opacity:0.6;
    }
    #replay.on .buttons {
      margin-top:-15px;
      opacity:1;
    }
    #replay.on .text {
      display:none;
    }
    
#timeline {
  width:100%;
  box-sizing:border-box;
  /*padding:0 36px 0 18px;*/
}
body.TRACKING #time {
  left:5px;
}
#timeline.off {
  visibility:hidden;
}
  #timeline .axis,
  #timeline .limits {
    position:absolute;
    left:18px;
    right:36px;
  }
  #timeline .axis {
    top:50%;
    transform:translateY(-50%);
    height:16px;
    box-sizing:border-box;
    cursor:pointer;
  }
  #timeline .axis.off {
    pointer-events:none !important;
  }
  #timeline .bar,
  #timeline .backbar {
    position:absolute;
    left:0;
    top:50%;
    transform:translateY(-50%);
    height:2px;
    width:100%;
  }
  #timeline .button {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    left:0;
    width:12px;
    height:12px;
    cursor:pointer;
    margin-left:-7px;
    border-radius:50%;
    border:2px solid;
  }
      #timeline .button .face {
        position:absolute;
        top:0px;
        left:0px;
        width:100%;
        height:100%;
      }
      #timeline .button .face>svg {
        width:100%;
        height:100%;
        stroke:none;
      }
  #timeline .limits {
    bottom:2px;
    height:18px;
    opacity:0;
    transition: opacity 0.3s;
  }
  #timeline .limits:hover,
  #timeline .limits.on {
    opacity:1;
  }
  #timeline .limits.off {
    opacity:0 !important;
  }
    #timeline .limits .left,
    #timeline .limits .right {
      position:absolute;
      top:0px;
      width:0;
      height:0;
      cursor:pointer;
      border-bottom:18px solid;
      opacity:0.4;
    }
    #timeline .limits .left.on,
    #timeline .limits .right.on {
      opacity:1;
    }
    #timeline .limits .left {
      left:0;
      margin-left:-18px;
      border-left:18px solid transparent;
    }
    #timeline .limits .right {
      left:100%;
      margin-right:-18px;
      border-right:18px solid transparent;
    }
#geovoile {
  padding:0 5px 0 5px; 
  font-size:45px;
  height:1em;
}
    #geovoile:before {
      content:'';
      position:absolute;
      display:block;
      top:0;
      left:-16px;
      width:0;
      height:0;
      border-bottom: 45px solid transparent; 
      border-left: 16px solid transparent;
    }

    #geovoile .link {
      position:relative;
      width:1.33em;
      height:100%;
      cursor:pointer;
    }
    #geovoile svg {
      position:absolute;
      top:50%;
      transform:translateY(-50%);
      left:0;
      width:100%;
      height:80%;
    }
}


/*### BOATCARD ###*/
@media screen  {
#boatcard {
  position:absolute;
  display:none;
  top:0;
  left:0;
  filter: drop-shadow(1px 1px 3px rgba(0,0,0,0.5));  
  z-index:500;    
}
    #boatcard article {
      position:absolute;
	    width:auto;
	    min-width:340px;
    }
        #boatcard article.qd0 {
          width:100% !important;
          box-sizing:border-box;
          border:0 !important;
        }
        #boatcard article.qd1 {
          left:15px;
          bottom:15px;
        }
        #boatcard article.qd2 {
          left:15px;
          top:15px;
        }
        #boatcard article.qd3 {
          right:15px;
          top:15px;
        }
        #boatcard article.qd4 {
          right:35px;
          bottom:15px;
        }
        #boatcard article.qd5 {
          right:35px;
          top:15px;
          transform:translateY(-50%);
        }
        #boatcard article.qd6 {
          left:15px;
          top:15px;
          transform:translateY(-50%);
        }
        #boatcard article.qd7 {
          bottom:15px;
          left:15px;
          transform:translateX(-50%);
        }
        #boatcard article.qd8 {
          top:15px;
          left:15px;
          transform:translateX(-50%);
        }
    #boatcard .identity {
      display:block;
      height:60px;
      padding:0 5px 0 105px;
    }
    body.TRACKING #boatcard .identity {
      padding-left:65px;
    }
    #boatcard.nophoto .identity {
      padding-left:40px;
    }
    #boatcard .identity h1 {
      white-space:normal;
    }
    #boatcard .identity .names span {
      display:inline-block;
    }
    #boatcard .names span+span:before {
      content:' / ';
    }
    #boatcard .photo {
      top:0px;
      left:0px;
    }
    #boatcard .photo .bkg {
			display:none;
    }
    #boatcard.nophoto .photo .bkg {
			display:block;
    }
    #boatcard .photo .img>img {
      border-radius:0;
    }
		
    #boatcard .infos {
      position:relative;
      display:block;
      *min-height:100px;
      padding:3px 5px 7px 5px;
      box-sizing:border-box;
    }
    #boatcard .infos:before {
      position:absolute;
      content:'';
      top:0;
      bottom:0;
      left:0;
      right:0;
      z-index:500;
    }
    #boatcard .infos * {
      position:relative;
      z-index:501;
      white-space:nowrap;
    }
    #boatcard .infos fieldset {
      margin-bottom:7px;
    }
    #boatcard .infos p {
    }
    #boatcard .infos span {
      display:inline-block;
      width:100px;
      text-align:right;
      font-weight:bold;
    }
    #boatcard .infos span:after {
      content:' : ';
    }
    #boatcard .infos span:empty:after {
      content:'';
    }
    #boatcard .infos dfn {
      display:inline-block;
      text-align:right;
			padding-left:3px;
    }
    #boatcard .infos table {
      width:100%;
    }
    #boatcard .infos table thead {
      font-weight:bold;
      text-align:center;
    }
    #boatcard .infos table th {
      width:95px;
      text-align:right;
      font-weight:bold;
    }
    #boatcard .infos table tbody th:after {
      content:' : ';
    }
    #boatcard .infos table td {
      padding:0 3px;
    }
    #boatcard .infos table dfn {
      display:inline-block;
      width:40px;
      margin-right:3px;
    }
    #boatcard .infos .overg>* {
      font-size:12px;
      /*line-height:15px !important;*/
      vertical-align:top;
    }
    #boatcard .infos .speed>*,
    #boatcard .infos .vmg>*,
    #boatcard .infos .distance>* {
      padding-top:5px;
    }
    #boatcard .infos table tbody .overg th::after {
	    content: '   ';
    }
    #boatcard .infos .live,
    #boatcard .infos .live * {
      font-weight:bold;
      text-align:center;
    }
    #boatcard .infos .off {
      display:none;
    }
    #boatcard .infos .pos.neg {
      display:none;
    }
    #boatcard .infos .neg.pos {
      display:none;
    }
    #boatcard .infos .date {
      font-weight:bold;
    }
    #boatcard .infos .date tt {
      display:none;
      margin-left:0.5em;
    }
    #boatcard .infos .date tt:before {
      content:' (';
    }
    #boatcard .infos .date tt:after {
      content:')';
    }
    #boatcard .infos .latedate tt {
      display:inline-block;
    }
    #boatcard .infos .dist .pos dfn:before {
      content:'+';
    }
    #boatcard .infos .dist .dtlprogress {
      position:relative;
      display:inline-block;
      *width:55px;
      margin-left:0.3em;
      font-style:italic;
      text-align:right;
    }
    #boatcard .infos .dist .dtlprogress.pos:before,
    #boatcard .infos .dist .dtlprogress.neg:before {
      font-size:smaller;
    }
    #boatcard .infos .dist .dtlprogress.pos:before {
      content:'▲';
    }
    #boatcard .infos .dist .dtlprogress.neg:before {
      content:'▼';
    }
    #boatcard .infos .dist .dtl {
    }
    #boatcard .infos .date dfn,
    #boatcard .infos .dist dfn {
      width:60px;
    }
    #boatcard .infos table.speeds {
      margin-top:15px;
    }
    #boatcard .infos table.speeds td.dist24h {
      font-weight:bold;
    }
    #boatcard .infos .liveposition {
      font-weight:bold;
      text-align:center;
      margin:0 0 3px 0;
    }
    #boatcard .infos .lastreport {
      font-weight:bold;
      text-align:center;
      margin:5px 0 3px 0;
      padding-top:3px;
      border-top:1px solid rgba(255,255,255,0.4);
    }
    #boatcard .infos table.environment {
      width:100%;
      margin:10px auto 0;
      border-spacing:1px;
      border-collapse:separate;
    }
        #boatcard .infos table.environment caption {
	        position:absolute;
	        bottom:0;
	        font-size:12px;
	        text-align:right;
	        left:0;
	        right:8px;
	        font-style:italic;
	        opacity:0.7;
        }
        #boatcard .infos table.environment td {
          white-space:nowrap;
          text-align:center;
          padding:0 3px;
        }
        #boatcard .infos table.environment thead td {
          background-color:rgba(255,255,255,0.2);
        }

        #boatcard .infos table.environment td dfn {
          text-align:center;
          display:block;
          padding:0;
          width:auto;
        }
        #boatcard.RET .rank,
        #boatcard.DSN .rank,
        #boatcard.DNF .rank,
        #boatcard.DNC .rank,
        #boatcard.CNS .rank,
        #boatcard.DSQ .rank {
          display:none !important;
        }

    #boatcard .cross {
      display:none;
      position:absolute;
      top:5px;
      right:5px;
      z-index:502;

    }
      #boatcard .cross svg {
        width:14px;
        height:14px;
      }

    body.RECORD #boatcard .identity {
      padding:0 5px 0 65px;
    }
    body.RECORD #boatcard.CMP .identity {
      padding-right:10px;
      height:30px;
    }
    #boatcard .infos .speeds .over4h dfn,
    #boatcard .infos .speeds .over24h dfn {
      visibility:hidden;
    }
    body.OVER4H #boatcard .infos .speeds .over4h dfn,
    body.OVER24H #boatcard .infos .speeds .over4h dfn {
      visibility:visible;
    }
    body.OVER24H #boatcard .infos .speeds .over24h dfn {
      visibility:visible;
    }
    #boatcard .infos.ARV span {
      width:105px;
    }
    #boatcard .infos.ARV .gapzero {
      display:none;
    }
    body.RECORD #boatcard.CMP .infos .attempt dfn:first-of-type{
      opacity:1;
    }
    body.RECORD #boatcard.CMP .infos .attempt dfn:first-of-type+dfn{
      font-style:italic;
    }

}


/*### GEOBLOG ###*/
@media screen  {
#geoblog {
  display:none;
  position:absolute;
  left:45px;
  top:45px;
  min-width:300px;
  max-width:500px;
  filter: drop-shadow(1px 1px 3px rgba(0,0,0,0.5));      
  border:1px solid;
  z-index:2000;
}
    #geoblog>* {
      position:relative;
      display:block;
      z-index:2000;
    }
    #geoblog header {
      cursor:pointer;
    }
    #geoblog.moving header {
      cursor:move;
    }
        #geoblog .identity,
        #geoblog .infos {
          display:block;
        }
        #geoblog .identity {
          height:60px;
          padding-left:5px;
        }
            #geoblog .identity .fav {
              display:none;
            }
            #geoblog .identity img {
              display:none;
              float:left;
              margin-right:10px;
            }
            #geoblog .rank {
              display:none;
            }
        #geoblog .infos {
          padding:5px;
        }
        #geoblog .infos>* {
          display:block;
        }
            #geoblog .position {
              font-size:12px;
              line-height:14px;
              opacity:0.5;
            }
            #geoblog .title {
              font-size:16px;
              line-height:18px;
              font-weight:bold;
            }
            #geoblog .hat {
              white-space:normal;
              line-height:14px;
            }
    #geoblog article {
      position:relative;
      min-height:15px;
      max-height:350px;
      padding:5px;
      box-sizing:border-box;
      overflow:auto;
    }
    #geoblog article.type4 {
      overflow:hidden;
      max-height:inherit;
    }
    #geoblog footer {
      padding:5px;
    }
    #geoblog footer:empty {
      display:none;
    }
    #geoblog .wait {
      margin-left:calc(50% - 10px);
    }
    #geoblog .content {
      display:block;
      position:relative;
      width:100%;
      height:100%;
    }
    #geoblog #mediaPhoto {
    }
    #geoblog #mediaPhoto img {
      width:100%;
      height:auto;
      margin-right:5px;
    }
    #geoblog #mediaPhoto.mediaPhotos {
      overflow:auto;
    }
    #geoblog #mediaPhoto.mediaPhotos img {
      width:95%;
    }
    #geoblog #mediaVideo {
      position:relative;
      min-width:480px;
      height:auto;
    }
    #geoblog #mediaVideo:after {
      content:'';
      display:inline-block;
      width:0;
      padding:28.16% 0;
    }
    #geoblog #mediaVideo iframe {
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;  
    }
    #geoblog #mediaPage {
      position:relative;
      min-width:480px;
      min-height:250px;
    }
    #geoblog #mediaPage iframe {
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;  
    }
    #geoblog .cross {
      display:block;
      position:absolute;
      right:0;
      top:0;
      bottom:0;
      cursor:pointer;
      opacity:0.5;
    }
    #geoblog .cross:hover {
      opacity:1;
    }
    #geoblog .cross>svg {
      width:20px;
      height:20px;
    }
    #geoblog .arrow {
      position:absolute;
      top:0;
      left:0;
      pointer-events:none;
      z-index:1999 !important;
    }
}


/*### FORECASTS ###*/
@media screen  {
#forecasts {
  top:6px;
  left:50%;
  height:30px;
  transform:translateX(calc(-50% + (340px / 2)));
  overflow:visible;
  display:none;
  z-index:250 !important;
}  
    body.FULLSCREEN #forecasts {
      top:0;
    }
    body.RECORD.FULLSCREEN #forecasts {
      top:40px;
    }
    #forecasts:before,
    #forecasts:after {
      content:'';
      position:absolute;
      display:block;
      top:0;
      width:0;
      height:0;
      border-top:30px solid; 
    }
    #forecasts:after {
      right:-16px;
      border-right:16px solid transparent;
    }
    #forecasts:before {
      left:-16px;
      border-left:16px solid transparent;
    }
    #forecasts .scroll {
      position:relative;
      width:315px;
      margin:0 15px;
      overflow:hidden;
      white-space:nowrap;
      height:30px;
      font-size:0px;
    }
    #forecasts .hours,
    #forecasts .cursor,
    #forecasts .wait {
      left:140px;
    }
    #forecasts .cursor,
    #forecasts .wait {
      position:absolute;
      top:0;
      height:100%;
      width:35px;
      padding:5px;
      box-sizing:border-box;
      cursor:inherit;
    }
    #forecasts .hours {
      position:absolute;
      right:0;
      transition:left 0.2s  ease-in-out;
    }
        #forecasts .hours>div {
          position:relative;
          display:inline-block;
          height:100%;
          width:35px;
          padding:5px;
          vertical-align:top;
          font-size:14px;
          text-align:center;
          box-sizing:border-box;
          cursor:pointer;
        }
        #forecasts .hours>div.on {
          font-weight:bold;
          pointer-events:none;
        }
        #forecasts .hours>div.waiting {
          visibility:hidden;
        }
    #forecasts legend {
      width:100%;
      position:absolute;
      display:block;
      left:0;
      right:0;
      bottom:-7px;
      height:7px;
      line-height:12px;
      font-size:0px;
    }
        #forecasts legend div {
          display:inline-block;
          height:100%;
          text-align:center;
        }
            #forecasts legend div span {
              position:absolute;
              bottom:-12px;
              font-size:9px;
              font-weight:bold;
              color:#FFFFFF;
	            text-shadow: rgb(30, 30, 30) 1px 1px 1px, rgb(30, 30, 30) -1px -1px 1px, rgb(30, 30, 30) 1px -1px 1px, rgb(30, 30, 30) -1px 1px 1px;
            }
    #forecasts .advert {
      width:100%;
      position:absolute;
      display:block;
      left:0;
      right:0;
      bottom:-27px;
      height:10px;
      text-align:center;
      text-shadow:1px 1px 1px #1E1E1E, -1px -1px 1px #1E1E1E, 1px -1px 1px #1E1E1E, -1px 1px 1px #1E1E1E;
      color:#FFFFFF;
    }
        #forecasts .advert a {
          color:#FFFFFF !important;
        }
    #forecasts .advert .currentdate {
      display:inline-block;
    }
    #forecasts .advert .at {
      display:inline-block;
      margin-left:10px;
    }
    body.INTHEPAST #forecasts .scroll {
      visibility:hidden;
    }
}

/*### DASHBOARD ###*/
@media screen  {
#dashboard {
  visibility:hidden;
  left:0px;
  top:6px;
  bottom:0px;
  width:340px;
  overflow:auto;
  z-index:320;
  -webkit-transition: height 400ms;
     -moz-transition: height 400ms;
      -ms-transition: height 400ms;
       -o-transition: height 400ms;
          transition: height 400ms;
	scrollbar-width:none;
}
#dashboard::-webkit-scrollbar {
  width:0px;
}
body.FULLSCREEN #dashboard {
  top:0;
}
    #dashboard>div {
      background-color:inherit;
      padding-bottom:2px;
    }
    #dashboard section {
      display:block;
      box-sizing: border-box;
    }
    #dashboard section>* {
      display:block;
      box-sizing: border-box;
      text-align:center;
      border:0px solid;
    }
    #dashboard header {
      font-size:22px;
      line-height:40px;
      height:40px;
    }
    #dashboard article {
      padding:5px 5px 10px 5px;
    }
    #dashboard big {
      display:block;
      font-size:22px;
      line-height:1;
    }
    #dashboard label:after {
      content:' : ';
    }
    #dashboard  label:empty:after {
      content:'';
    }
    #dashboard small {
      display:block;
    }
    #dashboard_holder {
      margin:7px 0 3px 0;
    }
    #dashboard_chrono {
      font-size:24px;
    }
		#dashboard_graphics {
			height:150px;
      display:none !important;
		}
		#dashboard_graphics.on {
      display:block !important;
		}
		#dashboard_graphics.nographics {
			display:none !important;
		}
		body.RECORD.RUNNING #dashboard_graphics,
		body.RECORD.FINISH #dashboard_graphics {
      display:block !important;
		}
		    #dashboard #graphics {
			    display:block !important;
			    position:relative;
			    height:100%;
			    top:auto !important;
			    left:auto !important;
			    right:auto !important;
			    bottom:auto !important;
			    margin:0 !important;
			    padding:0 !important;
			    border:0px !important;
		    }
        #dashboard #graphics {
          background-color:transparent;
        }

		    body.RECORD #dashboard #graphics .drawing {
			    bottom:0px !important;
		    }
		    #dashboard #graphics .drawing,
		    #dashboard #graphics .legend {
			    top:10px !important;
		    }
        #dashboard #graphics:after {
          top:-12px;
        }
		    #dashboard #graphics .variables {
			    display:none;
        }

    #dashboard_abs24hrecord.off {
      display:none;
    }
#dashboardsummary {
  visibility:hidden;
  display:none;
  position:absolute;
  left:0px;
  top:6px;
  right:38px;
  width:auto;  
  height:40px;
  overflow:hidden; 
  font-size:1.1rem;
  line-height:1.2rem;
  box-sizing:border-box;
  text-align:center; 
  font-size:0;
  line-height:38px;
  z-index:330;
}
    #dashboardsummary * {
      font-size:1.3rem;
    }
    #dashboardsummary .clock {
      display:inline-block;
    }
    #dashboardsummary .advance {
      padding-left:1.3rem;
      display:inline-block;
    }
    body.FULLSCREEN #dashboardsummary {
      top: 0;
    }


#dashboard_compare,
#dashboard_compare * {
	font-size:14px;
}
    #dashboard_compare article {
	    height:150px;
	    overflow:auto;
	    padding-top:0;
	    scrollbar-width: none;
    }
    #dashboard_compare title {
	    margin-bottom:10px;
    }
    #dashboard_compare .board table {
	    width:100%;
    }

    #dashboard_compare .board table thead {
	    font-weight:bold;
	    position:sticky;
	    top:0;
    }
    #dashboard_compare .board table thead td {
	    vertical-align:middle;
    }
    #dashboard_compare .board table thead td+td {
	    width:44%;
    }
    #dashboard_compare .board table td {
	    border:0;
	    text-align:right;
	    padding:1px 3px;
	    white-space:nowrap;
    }
    #dashboard_compare .board table td.title {
	    text-align:center;
    }

#clipboard {
  display:block;
  position:absolute;
  top:10%;
  left:10%;
  width:80%;
  height:80%;
  background-color:#FFFFFF;
  color:#000000;
  font-family:monospace;
  font-size:12px;
  z-index:10000;
  box-shadow: 1px 1px 3px 0px #656565;
  padding:7px;
  user-select:all !important;
}
}


/*### VR ###*/
@media screen  {
  a#vr {
    display:block;
    position:absolute;
    width:87px;
    height:60px;
    top:5px;
    left:5px;
    z-index:120;
    font-weight:bold;
  }
  a#vr>svg {
    width:100%;
    height:100%;
  }
  a#vr>svg .text .fr {
    display:none;
  }
  body[rel='fr'] a#vr>svg .text .fr {
    display:block;
  }
  body[rel='fr'] a#vr>svg .text .en {
    display:none;
  }
  #vrLayer .vrboat {
    display:none;
  }
  #vrLayer.on .vrboat {
    display:inherit;
  }
  #vrLayer .vrboat path {
	  fill:#DC076B;
	  stroke:#FFFFFF;
  }
  #vrLayer .vrboat text {
	  fill:#FFFFFF;
	  stroke:none;
  }

}

/*### MISC ###*/
@media screen  {
body.debugsig #sig {
  top:40%;
  right:40%;
  bottom:40%;
  left:40%;
  overflow:visible !important;
}
body.debugsig #sig {
  border:1px solid #FF00FF;
}
body.debugsig #bathyLayer {
  opacity:0.3;
}
body.debugsig #reportList {
  width:0 !important;
}
body.debugsig #dashboard {
  width:0 !important;
}
body.debugsig #buttons {
  z-index:10000;
}
body.debugsig #map>svg {
  width:400% !important;
}


div.msgNew {
  display:none;
  position:absolute;
  padding:0px 7px;
  font-weight:bold;
  background-color:#FF3315;
  height:26px;
  line-height:26px;
  box-sizing:border-box;
  animation-name: msgnew;
  animation-duration: 3s;
  animation-iteration-count:1;
  opacity:0;
}
    div.msgNew:before {
      content:'New';
      color:#FFFFFF;
      text-transform:uppercase;
    }
    div.msgNew:after {
      position:absolute;
      top:0;
      right:-7px;
      content:'';
      width:0;
      height:0;
      border-top:13px solid transparent; 
      border-left:7px solid #FF3315;
      border-bottom:13px solid transparent;
    }
    @keyframes msgnew {
      0%    {opacity: 0;}
      16%   {opacity: 1;}
      33%   {opacity: 0;}
      50%   {opacity: 1;}
      66%   {opacity: 0;}
      83%   {opacity: 1;}
      100%  {opacity: 0;}
    }    

#exturlcontent {
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  z-index:9999999;
}
#exturlcontent>span {
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  background-color:rgba(0,0,0,0.1);
  cursor:revert;
}

#exturlcontent iframe {
  position:absolute;
  top:50%;
  left:50%;
  width:90%;
  max-width:500px;
  height:90%;
  transform:translate(-50%, -50%);
  background-color:#000000;
}

#inReducedMode {
 display:none; 
}
}