#main {
  overflow:hidden !important;
}
  #main>div {
    position:absolute;
  }

#progressline {
  top:5px;
  left:23px;
  right:23px;
}
    body.TRACKING #progressline,
    body.FULLSCREEN #progressline {
      display:none;
    }

    #progressline .axis {
      position:relative;
      height:6px;
    }
    #progressline .startcity, 
    #progressline .arrivalcity {
      position:absolute;
      bottom:-20px;
    }
    #progressline .startcity {
      left:-18px;
    }
    #progressline .arrivalcity {
      right:-18px;
    }
    #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 {
  right:5px;
  top:34px;
  bottom:5px;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  overflow:auto;
  z-index:500;
}
    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:hidden;
        *visibility:hidden;
				z-index:1;
      }
    .iconbutton.disabled {
      opacity:0.3;
      cursor:default;
    }
       .iconbutton svg {
          width:26px;
          height:26px;
          margin:3px 6px;
          pointer-events:none;
        }
    
   
    

#sig {
  left:345px;
  top:35px;
  right:50px;
  bottom:33px;
  overflow:hidden;
  box-sizing:border-box;
  z-index:100;
}
    body.TRACKING #sig {
      left:5px;
      top:6px; 
    }
    body.FULLSCREEN #sig {
      top:0;
    }

#graphics {
  display:none;
  left:345px;
  top:35px;
  right:50px;
  bottom:33px;
  overflow:hidden;
  box-sizing:border-box;
  z-index:260;
}
    #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:2px;
          }
                                       

    #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 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;
}

#leaflet {
  display:none;
  position:absolute;
  left:0;
  top:0;
  right:0;
  bottom:0;
  overflow:hidden;
  box-sizing:border-box;
  z-index:101;
}
#navionicsOption {
  display:none;
  position:absolute;
  top:0px;
  left:1px;
  z-index:103;
  font-weight:bold;
  font-size:18px;
  text-shadow: 1px 1px 1px #1E1E1E, -1px -1px 1px #1E1E1E, 1px -1px 1px #1E1E1E, -1px 1px 1px #1E1E1E;
  cursor:pointer;
}

body.LEAFLET #sig {
  background:transparent !important;
}
body.LEAFLET #leaflet {
  display:block;
}
body.LEAFLET #bathyLayer,
body.LEAFLET #groundLayer,
body.LEAFLET #poiLayer {
  display:none;
}
body.LEAFLET #navionicsOption {
  *display:block;
}



#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-width:0.4;
    }
    #boatsLayer>g.ghost {
      opacity:0.2;
    }
    #boatsLayer>g[rel='RET'] {
      opacity:0.4;
    }
    body.RECORD #boatsLayer>g.ghost {
      opacity:1 !important;
    }
    #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.RACE #layout.noclass #boatsLayer>g.ghost {
      display:none !important;
    }


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

#tracksLayer g,
#tracksSTMLayer g,
#routingsLayer g {
  fill:none;
  display:none;
}
    #tracksLayer    g path.n1,
    #tracksSTMLayer g path.n1 {
      display:none;
    }
    #tracksLayer    g path.n2,
    #tracksSTMLayer g path.n2 {
      stroke-opacity:0.2;
    }
    #tracksLayer    g path.n3,
    #tracksSTMLayer g path.n3 {
      stroke-opacity:0.2;
    }
    #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;
    }
    body.RACE #tracksLayer    g.ghost,
    body.RACE #tracksSTMLayer g.ghost,
    body.RACE #routingsLayer  g.ghost {
      opacity:0.2;
    }
    #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 {
    }
    body.RACE #layout.noclass #tracksLayer    g.ghost,
    body.RACE #layout.noclass #tracksSTMLayer g.ghost,
    body.RACE #layout.noclass #routingsLayer  g.ghost {
      display:none !important;
    }
#referencesLayer {
}
    #referencesLayer path {
      fill:none;
    }
    #referencesLayer path.n2,
    #referencesLayer path.n3{
      display:none;
    }
    #referencesLayer g {
      cursor:pointer;
    }
    #referencesLayer g circle:last-of-type {
      fill-opacity:0;
    }
    #referencesLayer g:hover {
      opacity:1;
    }
    #referencesLayer g:hover circle:last-of-type {
      fill-opacity:1;
    }
      #referencesLayer g:hover text {
        display: inherit;
        fill: #FFFFFF;
        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;
      }

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

#orthoLayer {
  fill:none;
  stroke-opacity:0.7;
  /*stroke-dasharray: 6,2;*/
  stroke-width: 1;
}
#areasLayer path {
}
#areasLayer #gamearrival {
	display: none ;
}
#areasLayer #live {
	display: none ;
}


#gatesLayer path {
  fill:none;
}
    #gatesLayer circle {
      stroke:none;
    }
#daynightLayer {
  opacity:0.2;
  display:none;
  pointer-events:none;
  animation-name: daynight;
  animation-duration: 1.5s;
  animation-iteration-count:1;
}
@keyframes daynight {
  from {opacity: 0;}
  to {opacity: 0.2;}
}    
#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:normal;
    text-shadow: 1px 1px 1px #000000,  -1px -1px 1px #000000,  1px -1px 1px #000000,  -1px 1px 1px #000000;
    font-size:27px;
  }
  #poiLayer g[rel="100000"] g {
    opacity:0.2;
  }
  #poiLayer g[rel="100000"] g:hover {
    opacity:1;
  }

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

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

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

#infosLayer {
  display:none;
}
#infosLayer.visible {
  display:inherit;
}


.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:20000;
}



#report {
  position:relative;
  left:5px;
  top:35px;
  bottom:5px;
  width:335px;
  visibility:hidden;
  z-index:320;
  box-sizing:border-box;
  min-height:60px;
}
body.RACE.MULTICLASS #report {
  min-height:90px;
}
  body.FULLSCREEN #report,
  body.FULLSCREEN.RACE.MULTICLASS #report {
    top:0;
  }
  body.TRACKING #report {
    display:none;
  }

#boatclassesList {
  width:100%;
  border:0px;
  height:30px;
  position:relative;
}
    body.RACE.MONOCLASS #boatclassesList,
    body.RECORD #boatclassesList {
      display: none;
    }
    #boatclassesList select {
      width:100%;
      height:30px;
      -webkit-appearance: none; 
    }
    #boatclassesList option {
      font-size:21px;
      text-align:center !important;
    }
    #boatclassesList .name {
      position:absolute;
      display:block;
      top:0;
      bottom:0;
      left:0;
      right:0;
      font-size:21px;
      text-align:center !important;
      pointer-events:none;
      cursor:pointer;
    }
    #boatclassesList .arrow {
      position:absolute;
      top:12px;
      right:5px;
      width:14px;
      height:10px;
      pointer-events:none;
    }
    #boatclassesList.open .arrow {
      transform:rotate(180deg);
    }


#reportList {
  position:absolute;
  overflow:auto;
  top:35px;
  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 95px;
      border-style:solid;
      border-width:0 1px 1px 1px;
      cursor:pointer;
      overflow:hidden;
    }
    #reportList .row.ghost {
     display:none; 
    }
    #reportList .row.nophoto {
      padding-left:35px;
    }
    #reportList .identity {
      display:block;
    }
    #reportList .photo {
      position:absolute;
      display:block;
      top:37px;
      left:5px;
      width:60px;
      height:30px;
      box-sizing:border-box;
      z-index:301;
    }
    #reportList .row.nophoto .photo {
      top:2px;
      left:2px;
      bottom:2px;
      width:4px;
      height:auto;
    }
    #reportList .identity img {
      position:absolute;
      left:5px;
      top:7px;
      border-radius:0 0% 50% 0;
      z-index:302;
    }
    #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;
    }
    #reportList .rank {
      top:3px;
      left:65px;
    }
    #reportList .row.nophoto .rank {
      left: 5px;
    }
    #reportList .rank b:after,
    #reportList .rank .up:after,
    #reportList .rank .down:after {
      position:absolute;
      top:18px;
      right:0;
      display:inline-block;
      font-size:12px;
    }
    #reportList .rank b:after {
      content:'●';
    }
    #reportList .rank .eq:after {
      content:'►';
      opacity:0.5;
    }
    #reportList .rank .up:after {
      content:'▲';
    }
    #reportList .rank .down:after {
      content:'▼';
    }
    #geoblog h1,
    #boatcard h1,
    #reportList h1 {
      display:block;
      font-size:20px;
      line-height:20px;
      padding:2px 0 0 0;
      font-weight:normal;
      white-space:nowrap;
    }
    #geoblog h2,
    #boatcard h2,
    #reportList h2 {
      display:block;
      font-weight:normal;
      font-size:16px;
      line-height:16px;
    }
    #geoblog .sailor span+span:before,
    #reportList .sailor span+span:before {
      content:' / ';
    }
    #geoblog .sailor span+span:empty:before,
    #reportList .sailor span+span:empty:before {
      content:'';
    }

    #reportList .infos {
      display:block;
      font-size:13px;
      line-height:14px;
      margin-top:4px;
    }
    #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>input {
      position:absolute;
      top:5px;
      right:2px;
    }
    #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:25px;
      height:18px;
      margin-left:7px;
      background-repeat:no-repeat;
      background-position:left 4px;
    }
    #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');
    }
    

#openDetails {
  display:none;
  cursor:pointer;
}

#coords {
  position:absolute;
  left:5px;
  bottom:0px;
  height:25px;
  line-height:25px;
  font-size:12px;
  padding-left:5px;
  font-family:monospace;
  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;
  right:5px;
  bottom:7px;
  width:22px;
  top:auto;
  z-index:220 !important;
}
    #zoom .button {
      position:absolute;
      display:block;
      cursor:pointer;
      border-radius:50%;
      -moz-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.5);
      -webkit-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.5);
      -o-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.5);
      box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.5);
      filter:progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=134, Strength=2);
    }
    #zoom .button.plus {
      bottom:45px;
    }
    #zoom .button.minus {
      bottom:0;
    }
        #zoom .button .back {
          position:absolute;
          top:0;
          left:0;
          width:22px;
          height:22px;
          -moz-border-radius:22px;
          -webkit-border-radius:22px;    
          border-radius:22px;
        }
        #zoom .button .face {
          position:absolute;
          top:3px;
          left:3px;
          width:16px;
          height:16px;
          -moz-border-radius: 16px;
          -webkit-border-radius: 16px;    
          border-radius: 16px;
        }

    #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 svg {
      position:absolute;
      top:3px;
      left:3px;
      width:17px;
      height:17px;
    }
    #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 {
  position:absolute;
  left:345px;
  bottom:5px;
  height:28px;
  right:50px;
  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,
  #chrono:after {
    content:'';
    position:absolute;
    display:block;
    top:0;
    right:-10px;
    width:0;
    height:0;
    border-top: 28px solid transparent; 
    border-right: 10px solid transparent;
  }
  #chrono+td {
    padding:0 12px;
  }
  #chrono b {
    color:rgba(0,0,0,0);
  }
  #chrono i {
    display:inline-block;
  }
  #datetime small {
    display:none;
  }
  
#replay {
  position:relative;
  display:none;
  padding:0 5px 3px 0;
  white-space:nowrap;
}
    #replay svg {
      display:inline-block;
      cursor:pointer;
      vertical-align:middle;
    }
    #replay .buttons {
      width:18px;
      height:18px;
      margin:0 7px;
    }
    #replay .slow,
    #replay .fast {
      width:12px;
      height:11px;
    }
    #replay .text {
      position:absolute;
      height:12px;
      top:-14px;
      left:0;
      right:0;
      text-align:center;
      color: #ffffff;
      mix-blend-mode: difference;
      opacity: 0.7;
      font-size:11px;
      font-family:monospace;
    }
    #replay.off .pause,
    #replay.off .text {
      display:none;
    }
    #replay.off .slow,
    #replay.off .fast {
      cursor:default;
      pointer-events:none;
    }
    #replay.on svg {
      opacity:0.7;
    }
    #replay.on .buttons {
      opacity:1;
    }
    #replay .active {
      opacity:1;
    }
    
#timeline {
  width:100%;
  box-sizing:border-box;
  padding:0 18px;
}
body.TRACKING #time {
  left:5px;
}
#timeline.off {
  visibility:hidden;
}
  #timeline .axis {
    display:inline-block;
    position:relative;
    height:24px;
    width:100%;
    box-sizing:border-box;
    cursor:pointer;
  }
  #timeline .bar,
  #timeline .backbar {
    position:absolute;
    left:0;
    top:13px;
    bottom:9px;
    width:100%;
  }

  #timeline .button {
    position:absolute;
    top:3px;
    left:0;
    width:24px;
    height:24px;
    cursor:pointer;
    margin-left:-11px;
  }
    #timeline .button .back {
      position: absolute;
      top: 0;
      left: 0;
      width: 22px;
      height: 22px;
      -moz-border-radius: 50%;
      -webkit-border-radius: 50%;
      border-radius: 50%;
    }
    #timeline .button .face {
      position: absolute;
      top: 3px;
      left: 3px;
      width: 16px;
      height: 16px;
      -moz-border-radius: 50%;
      -webkit-border-radius: 50%;
      border-radius: 50%;
    }

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


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


#boatcard {
  position:absolute;
  display:none;
  top:0;
  left:0;
  pointer-events:none;
  filter: drop-shadow(1px 1px 3px rgba(0,0,0,0.5));  
  z-index:500;    
}
    #boatcard article {
      position:absolute;
      width:355px;
    }
        #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:15px;
          bottom:15px;
        }
        #boatcard article.qd5 {
          left:-157px;
          bottom:30px;
        }
        #boatcard article.qd6 {
          left:-150px;
          top:30px;
        }
    #boatcard .identity {
      display:block;
      height:60px;
      padding:0 5px 0 95px;
    }
    body.TRACKING #boatcard .identity {
      padding-left:65px;
    }
    #boatcard.nophoto .identity {
      padding-left:35px;
    }
    #boatcard .identity h1 {
      white-space:normal;
    }
    #boatcard .identity .sailor span {
      display:inline-block;
    }
    #boatcard .sailor span+span:before {
      content:' / ';
    }
    #boatcard .rank {
      top:2px;
      left:63px;
    }
    #boatcard.nophoto .rank {
      left:3px;
    }
    #boatcard .identity img {
      position:absolute;
      left:0px;
      top:0px;
      z-index:302;
    }
    #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;
    }
    #boatcard .infos fieldset {
      margin-bottom:7px;
    }
    #boatcard .infos p {
    }
    #boatcard .infos span {
      display:inline-block;
      width:95px;
      text-align:right;
      font-weight:bold;
    }
    #boatcard .infos span: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 {
      width:30px;
    }

    #boatcard .infos .live,
    #boatcard .infos .live * {
      font-weight:bold;
    }
    #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:50px;
    }
    #boatcard .infos table.speeds {
      margin-top:15px;
    }
    #boatcard .infos table.speeds td.dist24h {
      font-weight:bold;
    }
    #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 .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;
    }
    #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;
    }



#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 #000000;
  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 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 {
      min-height:15px;
      max-height:350px;
      padding:5px;
      box-sizing:border-box;
      overflow:auto;
    }
    #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 .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;
    }

#weather {
  position:absolute;
  top:35px;
  left:340px;
  right:43px;
  overflow:visible;
  display:none;
  z-index:250 !important;
}  
    body.FULLSCREEN #weather {
      top:0;
    }
    body.TRACKING #weather {
      left: 0px;
      top: 6px;
    }
    #weather section {
      position:relative;
      width:315px;
      margin-left:auto;
      margin-right:auto;
      height:28px;
      padding:1px 0 0 15px;
      box-sizing:border-box;
      white-space:nowrap;
      vertical-align:bottom;
    }
    #weather section:after,
    #weather section:before {
      content:'';
      position:absolute;
      display:block;
      top:0;
      width:0;
      height:0;
      border-top: 28px solid transparent; 
    }
    #weather section:after {
      right:-10px;
      border-right: 10px solid transparent;
    }
    #weather section:before {
      left:-10px;
      border-left: 10px solid transparent;
    }

    #weather .button {
      display:inline-block;
      width:18px;
      height:20px;
      box-sizing:border-box;
      padding:3px 3px;
      cursor:pointer;
    }
    #weather .play {
      visibility:hidden;
    }
    #weather .button>svg {
      width:10px;
      height:14px;
    }
    #weather .list {
      position:relative;
      display:inline-block;
      overflow:hidden; 
      width:165px;
      height:20px;
      margin:0 7px 0 0;
    }
    #weather .date {
      position:absolute;
      display:block;
      top:3px;
      bottom:-5px;
      left:0;
      right:18px;
      pointer-events:none;
      font-family:ptsans;
      font-size:15px;
      font-weight:bold;
      text-align:right;
      padding-right:6px;
    }
    #weather .wait {
      position:absolute;
      top:4px;
      left:54px;
    }

    #weather .list>svg {
      position:absolute;
      top:8px;
      right:3px;
      width:14px;
      height:10px;
      pointer-events:none;
    }
    #weather .list.open>svg {
      transform:rotate(180deg);
    }
    #weather select { 
      border:0 !important;
      width:185px;
      height:25px;
      line-height:25px;
      -webkit-appearance: none; 
      font-size:15px;
      font-weight:bold;
      cursor:pointer;
    }
    #weather option {
      border:0 !important;
      *padding-right:40px;
      box-sizing:border-box;
      *margin-left:-50px;
      font-size:15px;
      font-weight:normal;
    }
    #weather.past .button {
      cursor:not-allowed;
      opacity:0.4;
    }
    #weather.past select,
    #weather.past .list svg {
      visibility:hidden;
    }

    #weather.squid section {
      width:385px;
    }
    #weather.squid section a {
      display:block;
      position:absolute;
      bottom:8px;
      right:15px;
      width:67px;
      height:35px;
      background-image:url(../img/weather_squid.png);
      background-size:100% auto;
    }
    #weather legend {
      width:100%;
      position:absolute;
      display:block;
      left:0;
      right:0;
      bottom:-10px;
      height:10px;
    }
    #weather legend div {
      display:inline-block;
      height:10px;
      font-size:9px;
      text-align:center;
    }
    #weather legend div sup {
      display:block;
      width:100%;
    }
    #weather legend div sub {
      display:block;
      height:5px;
      width:100%;
    }
    


#dashboard {
  visibility:hidden;
  left:5px;
  top:35px;
  bottom:5px;
  width:335px;
  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>div * {
    }
    #dashboard section>* {
      display:block;
      box-sizing: border-box;
      margin-bottom:5px;
      text-align:center;
      border:1px solid;
    }
    #dashboard header {
      font-size:1.55rem;
      height:2.4rem;
      line-height:2.3rem;
    }
    #dashboard article {
      padding:5px;
    }
    #dashboard big {
      display:block;
      font-size:1.9rem;
      line-height:1.9rem; 
      margin-bottom:0.4rem;
    }
    #dashboard  label:after {
      content:' : ';
    }
    #dashboard  label:empty:after {
      content:'';
    }
    #dashboard small {
      display:block;
      font-size:1rem;  
      line-height:1.3rem; 
    }
    #dashboard big sup,
    #dashboard small sup {
      font-size:50%;
      line-height:50%; 
      vertical-align:super;
    }
    #dashboard small sup {
      font-size:70%;
      line-height:70%; 
    }
    #dashboard big label,
    #dashboard small label,
    #dashboard big span,
    #dashboard small span {
      opacity:0.6;
    }
    #dashboard #record .reference {
      margin:7px 0 3px 0;
    }
    #dashboard #legend div {
      padding:3px;
    }
    #dashboard #legend span {
      display:block;
      font-size:0.8rem;  
      line-height:0.8rem; 
    }
    #dashboard #legend span b {
      opacity:0.6;
      white-space:normal;
    }
    #dashboard #legend span sup {
      opacity:0.8;
      vertical-align:super;
    }
    #dashboard #legend div>i {
      display:none;
    }

#dashboardsummary {
  visibility:hidden;
  display:none;
  position:absolute;
  left:5px;
  top:15px;
  right:48px;
  width:auto;  
  height:60px;
  overflow:hidden; 
  font-size:1.1rem;
  line-height:1.2rem;
  box-sizing:border-box;
  padding:3px;
  text-align:center; 
  font-size:1rem;
  line-height:1rem;
  border:1px solid;
  z-index:330;
}
#dashboardsummary label:after {
  content:' : ';
}

#dashboardsummary * {
    line-height: 1em;
}
    body.FULLSCREEN #dashboardsummary {
      top: 0;
    }
    #dashboardsummary .situation .gap:before {
      content:' /  ';
    }

#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;
}






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;}
    }    

#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:auto !important;
  top:30px !important;
  right:auto !important;
  left:0 !important;
}
    .jnc-navionics-overlay-logo {
      display:block !important;
      left:0 !important;
      top:0 !important;
    }
 
    .jnc-navionics-overlay-ackno {
      display:block !important;
      left:30px !important;
      top:25px !important;
      background-color:transparent !important;
    }
    .jnc-navionics-overlay-ackno a {
      position:relative !important;
    }


#infos {
  display:none;
  position:absolute;
  left:45px;
  top:45px;
  bottom:45px;
  width:450px;
  filter: drop-shadow(1px 1px 3px rgba(0,0,0,0.5));      
  border:1px solid #000000;
  z-index:2100;
}
#infos.on {
  display:block;
}
    #infos iframe {
	    width:100%;
	    height:100%;
    }
    #infos .wait {
      position:absolute;
      top:50%;
      left:50%;
      transform:translate(-50%, -50%);
    }
    #infos .cross {
	    position:absolute;
	    top:10px;
	    right:10px;
	    width:24px;
	    height:24px;
	    stroke:#000000;
	    cursor:pointer;
    }


#inReducedMode {
 display:none; 
}