/*### 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;
  overflow:auto;
  z-index:500;
  padding-top:8px;
	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:hidden;
				z-index:1;
      }
    .iconbutton.disabled {
      opacity:0.3;
      cursor:default;
    }
    #buttons .group svg {
      width:26px;
      height:26px;
      margin:3px 6px;
      pointer-events:none;
    }
    #buttons .group svg:empty {
      display:none;
    }

    #bt_navionics {
      display:none;
    }
    
    body.LEAFLET #bt_navionics {
      display:inherit;
    }
    
body.EARTH #bt_tiledmap,
body.EARTH #bt_gridlines,
body.EARTH #bt_weather {
  display:none;
}
}


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

#zoomwindow {
  position:absolute;
  left:5vmin;
  top:5vmin;
  right:5vmin;
  bottom:5vmin;
  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 .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;
}

}


/*### CROSSING POINTS ###*/
@media screen {
  #crossingpoints {
    display:none;
    left:340px;
    top:6px;
    right:38px;
    bottom:45px;
    overflow:hidden;
    box-sizing:border-box;
    z-index:270;
  }
  #crossingpoints.on {
    display:block;
  }
  #crossingpoints iframe {
    width:100%;
    height:100%;
  }
}


/*### 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;

}
    .g-navionics-overlay-logo,
    .jnc-navionics-overlay-logo {
      display:block !important;
      left:0 !important;
      top:auto !important;
      bottom:10px !important;
    }
 
    .jnc-navionics-overlay-ackno {
      position:absolute !important;
      display:block !important;
      left:0px !important;
      right:auto !important;
      top:auto !important;
      bottom:0 !important;
      opacity:1 !important;
      background-color:rgba(255,255,255,0.5) !important;
    }
    .jnc-navionics-overlay-ackno a {
      position:relative !important;
    }


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

body.NAVIONICS_ON #leafletcredits {
  display:none !important;
}
body.NAVIONICS_ON #coords {
  display:none !important;
}

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.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*/
  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.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;
    }
    #tracksLayer    g.ghost,
    #tracksSTMLayer g.ghost,
    #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 {
    }
    #layout.noclass #tracksLayer    g.ghost,
    #layout.noclass #tracksSTMLayer g.ghost,
    #layout.noclass #routingsLayer  g.ghost {
      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;
    }

#orthoLayer {
  fill:none;
  stroke-opacity:0.7;
  stroke-dasharray: 6,2;
  stroke-width: 1;
}

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

#areasLayer #gamearrival {
	display: none ;
}
#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);
}
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;
}		

#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 {
    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,
		  #mediaLayer .geomedia.type3 .type3,
		  #mediaLayer .geomedia.type4 .type4 {
			  display: inherit;
		  }

#infosLayer {
  display:none;
}
#infosLayer.visible {
  display:inherit;
}
  #infosLayer>g {
    cursor:pointer;
  }

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

}


/*### 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.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;
    }


#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 95px;
      border-style:solid;
      border-width:0 0px 1px 0px;
      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:7px;
      left:5px;
      width:60px;
      height:60px;
      box-sizing:border-box;
      z-index:301;
    }
    #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;
    }
    #reportList .photo .img {
      position:absolute;
      left:0px;
      top:0px;
      width:100%;
      height:100%;
    }
    #reportList .photo .img>img {
      position:absolute;
      left:0px;
      top:0px;
      width:100%;
      height:100%;
      border-radius:0 10px 10px 0;
      z-index:301;
    }
    #reportList .row.nophoto .photo {
      display:none;
    }

    #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 .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;
    }
    #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:67px;
    }
    #reportList .row.nophoto .rank {
      left: 5px;
    }
    #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:'►';
      opacity:0.5;
    }
    #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:20px;
      line-height:20px;
      padding:2px 0 0 0;
      font-weight:normal;
      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:normal;
      font-size:16px;
      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>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:21px;
      height:14px;
      margin-left:7px;
      background-repeat:no-repeat;
      background-position:center center;
			background-size:contain;
    }
    #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');
    }
    

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


/*### 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,
  #chrono:after {
    content:'';
    position:absolute;
    display:block;
    top:0;
    right:-16px;
    width:0;
    height:0;
    border-top:45px solid transparent; 
    border-right:16px 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 36px 0 18px;
}
body.TRACKING #time {
  left:5px;
}
#timeline.off {
  visibility:hidden;
}
  #timeline .axis {
    display:inline-block;
    position:relative;
    height:100%;
    width:100%;
    box-sizing:border-box;
    cursor:pointer;
  }
  #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:20px;
    height:20px;
    cursor:pointer;
    margin-left:-12px;
    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;
      }
#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:330px;
    }
        #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 95px;
    }
    body.TRACKING #boatcard .identity {
      padding-left:65px;
    }
    #boatcard.nophoto .identity {
      padding-left:35px;
    }
    #boatcard .identity h1 {
      white-space:normal;
    }
    #boatcard .identity .names span {
      display:inline-block;
    }
    #boatcard .names 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:100px;
      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;
      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 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.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;
    }
    #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 ###*/
@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 #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 {
      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:340px;
  right:43px;
  overflow:visible;
  display:none;
  z-index:250 !important;
}  
    body.TRACKING #forecasts {
      left: 0px;
    }
    #forecasts 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;
    }
    #forecasts section:after,
    #forecasts section:before {
      content:'';
      position:absolute;
      display:block;
      top:0;
      width:0;
      height:0;
      border-top: 28px solid transparent; 
    }
    #forecasts section:after {
      right:-10px;
      border-right: 10px solid transparent;
    }
    #forecasts section:before {
      left:-10px;
      border-left: 10px solid transparent;
    }

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

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

    #forecasts legend {
      width:100%;
      position:absolute;
      display:block;
      left:0;
      right:0;
      bottom:-10px;
      height:10px;
    }
    #forecasts legend div {
      display:inline-block;
      height:10px;
      font-size:9px;
      text-align:center;
    }
    #forecasts legend div sup {
      display:block;
      width:100%;
    }
    #forecasts legend div sub {
      display:block;
      height:5px;
      width:100%;
    }
    #forecasts .advert {
      width:100%;
      position:absolute;
      display:block;
      left:0;
      right:0;
      bottom:-23px;
      height:10px;
      text-align:center;
    }
    #forecasts .advert a{
      color:#FFFFFF !important;
      text-shadow:1px 1px 1px #1E1E1E, -1px -1px 1px #1E1E1E, 1px -1px 1px #1E1E1E, -1px 1px 1px #1E1E1E;
    }
}


/*### 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;
      margin-bottom:5px;
      border:1px solid;
    }
    #dashboard header {
      font-size:22px;
      line-height:1.5;
    }
    #dashboard article {
      padding:5px;
    }
    #dashboard big {
      display:block;
      font-size:22px;
      line-height:1;
    }
    #dashboard label:after,
    #dashboardsummary label:after {
      content:' : ';
    }
    #dashboard  label:empty:after,
    #dashboardsummary  label:empty:after {
      content:'';
    }
    #dashboard small {
      display:block;
    }
    #dashboard big label,
    #dashboard small label,
    #dashboard big span,
    #dashboard small span {
      opacity:0.6;
    }
    #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: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;
  z-index:330;
}

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

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