#progressline>p {
  background-color:#314048;
}
  #progressline sup, #progressline sub {
    color:#FFFFFF;
  }
  #progressline s, #progressline u {
    background-color:#FF0000;
  }
  #progressline s:after {
    border-top-color:#FF0000;
  }
  #progressline u:before {
    border-bottom-color:#FF0000;
  }

  #progressline i.fleet {
    background-color:#BBC8CE;
  }
    #progressline i:before {
      border-bottom-color:#BBC8CE;
    }
    #progressline i:after {
      border-top-color:#BBC8CE;
    }
  /*record holder*/
  #progressline i.boat {
    background-color:#215076;
  }
  /*selected boat*/
  #progressline b {
    background-color:#FF0000;
  }
    #progressline b:before,
    #progressline i:before {
      border-bottom-color:#FF0000;
    }
    #progressline b:after,
    #progressline i:after {
      border-top-color:#FF0000;
    }
  #progressline b#fixed {
    background-color:#FF0000 !important;
  }
    #progressline b#fixed:before {
      border-bottom-color:#FF0000;
    }
    #progressline b#fixed:after {
      border-top-color:#FF0000;
    }
    #progressline b>svg {
      fill:#FF0000;
    }


#buttons {
  background-color:#212C32;
  border:0px solid #33434D;  
}
  .iconbutton {
    background-color:rgba(0,0,0, 0.5);
  }
  .iconbutton img.off {
    color:rgba(255,255,255,1);
  }
  .iconbutton img.over {
    color:#FFFFFF;
    opacity:1.0;
  }
  .iconbutton img.on {
    color:#FFFFFF;
    opacity:1.0;
  }
  .iconbutton.off {
    border-bottom:0px solid transparent;
  }
  .iconbutton.over {
    
  }
  .iconbutton.on.alt:hover,
  .iconbutton.on {
    background-color:#646E6F !important;
  }
  .iconbutton.on.alt {
    background-color:rgba(100,110,111,0.6) !important;
  }


#sig {
  background-color:#1A1D20;
}
#graphics {
  background-color:#17181C;
}
    #graphics svg {
      background-color:#17181C;
      border-top:1px solid rgba(255,255,255,0.2);
      border-bottom:1px solid rgba(255,255,255,0.2);
    }
    #graphics .variables {
      background-color:#000000;
      color:rgba(255,255,255,0.7);;
    }
      #graphics .variables:before,
      #graphics .variables:after {
        display:none;
      }

#bathyLayer rect {
  fill:#1a1d20;
}
#bathyLayer image {
  mix-blend-mode:soft-light;
  opacity:0.4;
}
#groundLayer path {
  fill:#545a60;
}
#boatsLayer path {
  stroke:#000000;
}
#boatsLayer text {
  fill:#FFFFFF;
  opacity:0.5;
}
#tracksLayer {
  font-size:0px !important;/*define the slicer length*/
}
#tracksLayer g path.n1 {
  display:inline;
  stroke-opacity:0.5;
}
#tracksSTMLayer g path.n1 {
  display:inline;
  stroke-opacity:1;
}

#orthoLayer {
  stroke-dasharray:6,2;
  stroke-width:1;
  stroke:rgba(255,255,255,1);
}
#areasLayer path {
  fill:rgba(226,0,26,0.2);
  stroke:rgba(226,0,26,0.7);
}
#gatesLayer path {
  stroke:rgba(226,0,26,1);
}
#gatesLayer circle {
  fill:rgba(226,0,26,1);
}
  #daynightLayer {
    fill:#000000;
  }
#referencesLayer {
  stroke-dasharray:8,3;
  stroke-width:1;
}
    #referencesLayer path {
      opacity:0.5;
      stroke:#FFFFFF;
    }
    #referencesLayer circle {
      opacity:0.5;
      fill:#FFFFFF;
    }
    #referencesLayer g.currentPosition circle {
      opacity:1;
      fill:#FFFFFF;
    }

#ruleLayer {
  stroke-dasharray:8,3;
}
  #ruleLayer>g>circle {
    stroke:#FF0000;
    fill:#FF0000;
  }
  #ruleLayer>g>path {
    stroke:#FF0000;
  }
  #ruleLayer>path {
    stroke:#FF0000;
  }

  #poiLayer g circle {
    fill:#E8EAEA;
  }
  #poiLayer g.arrv circle,
  #poiLayer g.start circle {
    fill:#FF0000;
  }
  #poiLayer g.isle circle {
    fill:#E8EAEA;
  }
  #poiLayer g.isle text {
    fill:#E8EAEA;
  }
  #poiLayer g.buoy circle {
    fill:rgba(226,0,26,0.7);
  }
  #poiLayer g.buoy text {
    display:none;
  }
  
  
.tip {
  color:#ffffff;
}
#navionicsOption .wait path {
  stroke:#223B59;
}


#coords {
  color:#FFFFFF;
  *mix-blend-mode:difference;
  opacity:1;
}

#zoom>b {
}
  #zoom>p {
    background-color:rgba(255,255,255,0.05);
  }
  #zoom svg {
    fill:#FFFFFF;
    opacity:1;
  }
  #zoom b>sub {
    background:         linear-gradient(-45deg, #FFFFFF 35%, #E4E4E4 75%);
    background:    -moz-linear-gradient(-45deg, #FFFFFF 35%, #E4E4E4 75%);
    background: -webkit-linear-gradient(-45deg, #FFFFFF 35%, #E4E4E4 75%);
    background:      -o-linear-gradient(165deg, #FFFFFF 35%, #E4E4E4 75%);
  }
  #zoom b>sup {
    background:         linear-gradient(135deg, #FFFFFF 35%, #E4E4E4 75%);
    background:    -moz-linear-gradient(135deg, #FFFFFF 35%, #E4E4E4 75%);
    background: -webkit-linear-gradient(135deg, #FFFFFF 35%, #E4E4E4 75%);
    background:      -o-linear-gradient(-45deg, #FFFFFF 35%, #E4E4E4 75%);
  }
  #zoom b:hover svg {
    fill:#FFFFFF;
    opacity:1;
  }
  #zoom b.on>sub {
    background:         linear-gradient(-45deg, #FF0000 35%, #A60000 75%);
    background:    -moz-linear-gradient(-45deg, #FF0000 35%, #A60000 75%);
    background: -webkit-linear-gradient(-45deg, #FF0000 35%, #A60000 75%);
    background:      -o-linear-gradient(135deg, #FF0000 35%, #A60000 75%);
  }
  #zoom b.on>sup {
    background:         linear-gradient(135deg, #FF0000 35%, #A60000 75%);
    background:    -moz-linear-gradient(135deg, #FF0000 35%, #A60000 75%);
    background: -webkit-linear-gradient(135deg, #FF0000 35%, #A60000 75%);
    background:      -o-linear-gradient(-45deg, #FF0000 35%, #A60000 75%);
  }
  #zoom b.on svg {
    fill:#FFFFFF;
    opacity:1;
  }


#time {
  background:         linear-gradient(rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.7) 100%);
  background:    -moz-linear-gradient(rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.7) 100%);
  background: -webkit-linear-gradient(rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.7) 100%);
  background:      -o-linear-gradient(rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.7) 100%);
}

#refresh {
  background-color:transparent;
  color:#ffffff;
}
  #refresh circle {
    stroke: #FFFFFF;
    stroke-opacity:0.5;
  }

#datetime {
  background-color:transparent;
  color:#ffffff;
}
  #datetime:after {
    border-top-color:transparent;
  }

#chrono {
  background-color:transparent;
  color:rgba(255,255,255,0.7);
}
  #chrono:after {
    border-top-color:transparent;
  }

#replay path {
  fill:#FFFFFF;
}

#timeline {
}
  #timeline span i {
    background-color:rgba(255,255,255,0.5);
  }
  #timeline span u {
    background-color:#FF0000;
  }
  #timeline b>svg>path {
   fill:#215076
  }
  #timeline b>sub {
    background:         linear-gradient(-45deg, #FF0000 35%, #FF0000 75%);
    background:    -moz-linear-gradient(-45deg, #FF0000 35%, #FF0000 75%);
    background: -webkit-linear-gradient(-45deg, #FF0000 35%, #FF0000 75%);
    background:      -o-linear-gradient(135deg, #FF0000 35%, #FF0000 75%);
  }
  #timeline b>sup {
    background:         linear-gradient(135deg, #FF0000 35%, #FF0000 75%);
    background:    -moz-linear-gradient(135deg, #FF0000 35%, #FF0000 75%);
    background: -webkit-linear-gradient(135deg, #FF0000 35%, #FF0000 75%);
    background:      -o-linear-gradient(-45deg, #FF0000 35%, #FF0000 75%);
  }
  
#gridlines {
  text-align:right;
  vertical-align:top;
}
#gridlines path {
  stroke:#FFFFFF;
}
#gridlines text {
  fill:#FFFFFF;
  opacity:1;
}

  
#boatclassesList {
}
    #boatclassesList span {
      background-color:#FFFFFF;
      border:1px solid #EBEDED;  
      color:#FF0000;
    }
    #boatclassesList path {
      fill:#FFFFFF;
    }
    #boatclassesList.open path {
      fill:#FF0000;
    }
    #boatclassesList option {
      color:#FF0000 !important;
    }
    #boatclassesList option.on {
      background-color:#FF0000 !important;
      color:#FFFFFF !important;
    }

#reportList {
  background-color:#202125;
  border:0px;  
  border-top:1px solid rgba(255,255,255,0.1);
}

  #reportList>div {
    border-color:transparent transparent rgba(255,255,255,0.2) transparent;
    background-color:#202125;
    color:#FFFFFF;
  }
  #reportList>div:hover {
    background-color:#202125;
    color:#FFFFFF;
  }
  #reportList>div.on {
    background-color:#202125;
    color:#FFFFFF;
  }
  #reportList>div>sup img,
  #reportList>div.on>sup img,
  #reportList>div:hover>sup img {
    *-webkit-filter:sepia(0%) hue-rotate(0deg) saturate(100%);
	  *filter:sepia(0%) hue-rotate(0deg) saturate(100%);
  }
  #reportList>div>sup h1 {
    color:#FFFFFF !important;
  }
  #reportList>div>sup h2 {
    color:rgba(255,255,255,1) !important;
  }
  #reportList>div.on>sup h1 {
    color:#FFFFFF !important;
  }
  #reportList>div.on>sup h2 {
    color:rgba(255,255,255,1) !important;
  }
  #reportList>div>sup q {
   color:rgba(255,255,255,0.6);
  }
  #reportList>div>sup q.up:after {
    color:#5EBB00;
  }
  #reportList>div>sup q.eq:after {
    color:#7E7E7E;
  }
  #reportList>div>sup q.down:after {
    color:#D54500;
  }
  #reportList>div>sub .latedate {
    color:#FF0000;
  }
  #reportList>div.on>sup q {
    color:#FFFFFF;
  }
  #reportList>div.on>sup q.up:after {
    color:#DDFFBB;
  }
  #reportList>div.on>sup q.eq:after {
    color:#FFFFFF;
  }
  #reportList>div.on>sup q.down:after {
    color:#FFD9C6;
  }
  #reportList>div.on>sub .latedate {
    color:#FFD9C6;
  }


#dashboard {
  background-color:#2B3840;
}
    #dashboard>div {
      background-color:inherit;
    }
    #dashboard section>* {
      border:1px solid rgba(0,0,0,0.1);
    }
    #dashboard h1 {
      background-color:#264264;
      color:#ffffff;
    }
    #dashboard header,
    #dashboard footer,
    #dashboard section>div {
      background-color:#FFFFFF;
    }

#dashboardsummary {
  border:1px solid rgba(0,0,0,0.1);
  background-color:#FFFFFF;
}

#openDetails svg {
  fill:#FFFFFF;
}

#openDetails sup {
  background:         linear-gradient(135deg, #34444E 35%, #2B3941 75%);
  background:    -moz-linear-gradient(135deg, #34444E 35%, #2B3941 75%);
  background: -webkit-linear-gradient(135deg, #34444E 35%, #2B3941 75%);
  background:      -o-linear-gradient(-45deg, #34444E 35%, #2B3941 75%);
}
#openDetails sub {
  background-color:#212C32;
}


#boatcard article {
  border:1px solid transparent;
}

    #boatcard article sup {
      display:block;
      color:#FFFFFF;
      background-color:rgba(0,0,0,0.6);
      border-bottom:1px solid rgba(255,255,255,0.3);
    }
        #boatcard article sup h1 {
          color:#FFFFFF !important;
        }
        #boatcard article sup h2 {
          color:rgba(255,255,255,0.7) !important;
        }
        #boatcard article sup q {
         color:#FF0000;
        }
    #boatcard article sub {
      color:rgba(255,255,255,0.7);
      background-color:rgba(0,0,0,0.6);
    }
    #main.reduced #boatcard article sub {
      background-color:#2B3840;
    }
        #boatcard article sub.ARV {
          color:#FFFFFF;
        }
        #boatcard article sub .vmg {
          color:#FDDD00;
        }
        #boatcard article sub .vmg.neg {
          color:#FF4B17;
        }
        #boatcard article sub .speed {
          color:#FFFFFF;
        }
        #boatcard article sub .date {
          color:#FFFFFF;
        }
        #boatcard article sub .latedate {
          color:#FFC1C9;
        }
        #boatcard article sub .pos,
        #boatcard article sub .pos * {
          color:#9BED83;
        }
        #boatcard article sub .neg,
        #boatcard article sub .neg * {
          color:#FDC0AC !important;
        }
        #boatcard article sub .off {
          font-weight:bold;
          color:#FFFFFF;
          padding-top:5px;
          padding-bottom:55px
        }
        #boatcard article sub table thead {
          color:#ffffff;
        }


#geoblog {
  border:1px solid rgba(255,255,255,0.3);
}
    #geoblog>header {
      
    }
    #geoblog>header>sup {
      background:         linear-gradient(#FF0000 0%, #FF0000 55%, #AE0015 100%);
      background:    -moz-linear-gradient(#FF0000 0%, #FF0000 55%, #AE0015 100%);
      background: -webkit-linear-gradient(#FF0000 0%, #FF0000 55%, #AE0015 100%);
      background:      -o-linear-gradient(#FF0000 0%, #FF0000 55%, #AE0015 100%);
    }
    #geoblog>header>sup>p {
      color:#ffffff;
    }
    #geoblog>header>sup h1 {
      color:#FFFFFF !important;
    }
    #geoblog>header>sup h2 {
      color:rgba(255,255,255,0.7) !important;
    }
    
    #geoblog>header>sub {
      background-color:#4A616F;
      color:#FFFFFF;
    }
    #geoblog>article {
      background-color:#FFFFFF;
    }
    #geoblog>footer {
      background-color:#12191F;
      color:#ffffff;
    }
    #geoblog>header>tt svg path {
      fill:#FFFFFF;
      opacity:0.5;
    }
    #geoblog>header>tt svg:hover path {
      fill:#FFFFFF;
      opacity:1;
    }
    #geoblog>svg {
      fill:#FFFFFF;
    }

#weather {
  background-color:rgba(0,0,0,1);
}
    #weather section:before,
    #weather section:after {
      border-top-color:rgba(0,0,0,1);
    }
    #weather section,
    #weather select,
    #weather option,
    #weather span pre,
    #weather span:hover option {
      color:#FFFFFF;
      background-color:transparent;
    }
    #weather span pre {
      background-color:rgba(0,0,0,1);
    }
    #weather.waiting span pre {
      color:rgba(6,49,80,0.3);
    }
    #weather b path,
    #weather span>svg path {
      fill:#FFFFFF;
    }
    #weather u path {
      stroke:#FFFFFF;
    }
    #weather b:hover path, 
    #weather sub:hover path, 
    #weather sup:hover path,
    #weather span:hover path,
    #weather span.open path {
      fill:#FF0000;
    }
    #weather span:hover pre,
    #weather span.open pre,
    #weather span:hover select {
      color:#FF0000;
    }
    #weather option.on {
      background-color:#FF0000 !important;
      color:#ffffff !important;
      font-weight:bold;
    }





@media screen and (max-width:750px) {
    #reportList {
      border-width:0 !important;  
    }
}