#progressline .axis {
  background-color:rgba(6,49,81,0.07);
}

#progressline .startcity,
#progressline .arrivalcity {
  color:#222222;
}

#progressline .startpoint,
#progressline .arrivalpoint {
  background-color:#CC3030;
}

#progressline .startpoint:after {
  border-top-color:#CC3030;
}

#progressline .arrivalpoint:before {
  border-bottom-color:#CC3030;
}

#progressline .extend.fleet {
  background-color:rgba(6,49,81,0.15);
}

#progressline .extend.fleet:before {
  border-bottom-color:rgba(6,49,81,0.15);
}

#progressline .extend.fleet:after {
  border-top-color:rgba(6,49,81,0.15);
}

#progressline .extend.boat {
  background-color:#222222;
}

#progressline .activeboat {
  background-color:#CC3030;
}

#progressline .activeboat:before {
  border-bottom-color:#CC3030;
}

#progressline .activeboat:after {
  border-top-color:#CC3030;
}

#progressline .activeboat#fixed {
  background-color:#CC3030 !important;
}

#progressline .activeboat#fixed:before {
  border-bottom-color:#CC3030;
}

#progressline .activeboat#fixed:after {
  border-top-color:#CC3030;
}

#progressline .activeboat>svg {
  fill:#CC3030;
}


#buttons {
  background-color:#FFFFFF;
  border:1px solid;
  border-color:rgba(255,255,255,0.07);
  ;
}

.iconbutton {
  background-color:rgba(234,234,234,0.00);
}

.iconbutton svg {
  fill:#6B6565;
  stroke:#6B6565;
}

.iconbutton.over {
  background-color:#CC0000;
}

.iconbutton.over svg {
  fill:#FFFFFF;
  stroke:#FFFFFF;
}

.iconbutton.on.alt:hover,
.iconbutton.on {
  background-color:#CC0000;
}

.iconbutton.on.alt:hover svg,
.iconbutton.on svg {
  fill:#FFFFFF;
  stroke:#FFFFFF;
}

.iconbutton.on.alt {
  background-color:rgba(226,0,26,0.6);
}


#sig {
  background-color:#3F4152;
}

#graphics,
#graphics svg {
  background-color:#223B59;
}

#graphics .variables {
  background-color:#CC3030;
  color:#FFFFFF;
}

#graphics .variables:before,
#graphics .variables:after {
  border-top-color:#CC3030;
}

#graphics .grid {
  stroke:rgba(255,255,255,0.05);
}

#graphics .legend {
  color:rgba(255,255,255,0.6);
}

#graphics:after {
  color:#ffffff;
}

#bathyLayer rect {
  fill:#3F4152;
}

#bathyLayer image {
  mix-blend-mode:overlay; /*normal;multiply;screen;overlay;darken;lighten;color-dodge;color-burn;hard-light;soft-light;difference;exclusion;hue;saturation;color;luminosity*/
  opacity:0.37;
}

#groundLayer path {
  fill:#E8E9EC;
}

#boatsLayer path {
  stroke:#000000;
}

#boatsLayer text {
  fill:#FFFFFF;
  opacity:0.4;
}

#tracksLayer g {
  stroke-opacity:0.15;
}

#tracksSTMLayer g {
  stroke-opacity:1;
}

#tracksLayer {
  font-size:50px !important; /*define the slicer length*/
}

#tracksLayer g path.n1,
#tracksSTMLayer g path.n1 {
  display:none;
}

#routingsLayer {
  stroke-dasharray:8,3;
  stroke-width:1;
}



#orthoLayer {
  stroke:rgba(255,255,255,1);
}

#areasLayer path {
  fill:rgba(226,0,26,0.3);
  stroke:#CC3030;
}

#gatesLayer path {
  stroke:#CC3030;
}

#gatesLayer circle {
  fill:#CC3030;
}

#daynightLayer {
  fill:#121318;
}

#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 {
  fill:#FFFFFF;
  opacity:1;
}

#ruleLayer {
  stroke-dasharray:8,3;
}

#ruleLayer>g>circle {
  stroke:#CC3030;
  fill:#CC3030;
}

#ruleLayer>g>path {
  stroke:#CC3030;
}

#ruleLayer>path {
  stroke:#CC3030;
}

#poiLayer g circle {
  fill:#FFFFFF;
}

#poiLayer g text {
  fill:#FFFFFF;
}

#poiLayer g.city circle {
  fill:#CC3030;
}

#poiLayer g.city text {
  fill:#FFFFFF;
}

#poiLayer g.start circle {
  fill:#CC3030;
}

#poiLayer g.start text {
  fill:#FFFFFF;
}

#poiLayer g.arrv circle {
  fill:#CC3030;
}

#poiLayer g.arrv text {
  fill:#FFFFFF;
}

#poiLayer g.isle circle {
  fill:#162538;
}

#poiLayer g.isle text {
  fill:#E8EAEA;
}

#poiLayer g.buoy circle {
  fill:#CC3030;
}

#poiLayer g.buoy text {
  fill:#CC3030;
}


.tip {
  color:#ffffff;
}

#navionicsOption .wait path {
  stroke:#223B59;
}


#coords {
  color:#FFFFFF;
  mix-blend-mode:normal;
  opacity:1;
}

#coords .lat,
#coords .lng {
  text-shadow:1px 1px 1px #1E1E1E, -1px -1px 1px #1E1E1E, 1px -1px 1px #1E1E1E, -1px 1px 1px #1E1E1E;
}

#zoom .axis {
  background-color:rgba(255,255,255,0.1);
}

#zoom .button svg {
  fill:rgba(6,49,81,0.6);
}

#zoom .button .back {
  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(135deg, #FFFFFF 35%, #E4E4E4 75%);
}

#zoom .button .face {
  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 .button:hover svg {
  fill:rgba(6,49,81,1);
}

#zoom .button:hover .back {
  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(135deg, #FFFFFF 35%, #E4E4E4 75%);
}

#zoom .button:hover .face {
  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 .button.on svg {
  fill:rgba(255,255,255,0.6);
}

#zoom .button.on .back {
  background:linear-gradient(-45deg, #CC3030 35%, #9C2525 75%);
  background:-moz-linear-gradient(-45deg, #CC3030 35%, #9C2525 75%);
  background:-webkit-linear-gradient(-45deg, #CC3030 35%, #9C2525 75%);
  background:-o-linear-gradient(135deg, #CC3030 35%, #9C2525 75%);
}

#zoom .button.on .face {
  background:linear-gradient(135deg, #CC3030 35%, #9C2525 75%);
  background:-moz-linear-gradient(135deg, #CC3030 35%, #9C2525 75%);
  background:-webkit-linear-gradient(135deg, #CC3030 35%, #9C2525 75%);
  background:-o-linear-gradient(-45deg, #CC3030 35%, #9C2525 75%);
}


#time {
  background-color:#FFFFFF;
}

#refresh {
  background-color:#CC3030;
  color:#ffffff;
}

#refresh circle {
  stroke:#FFFFFF;
  stroke-opacity:0.5;
}

#datetime {
  background-color:#CC3030;
  color:#FFFFFF;
}

#datetime:after {
  border-top-color:#CC3030;
}

#chrono {
  background-color:#CC3030;
}

#chrono>span {
  color:#FFFFFF;
  opacity:0.5;
}

#chrono:after {
  border-top-color:#CC3030;
}

#replay path {
  fill:rgba(75,68,68,0.50);
}

#timeline {
}

#timeline .backbar {
  background-color:rgba(75,68,68,0.30);
}

#timeline .bar {
  background-color:rgba(75,68,68,1.00);
}

#timeline .button .back {
  background:linear-gradient(-45deg, #CC3030 35%, #9C2525 75%);
  background:-moz-linear-gradient(-45deg, #CC3030 35%, #9C2525 75%);
  background:-webkit-linear-gradient(-45deg, #CC3030 35%, #9C2525 75%);
  background:-o-linear-gradient(135deg, #CC3030 35%, #9C2525 75%);
}

#timeline .button .face {
  background:linear-gradient(135deg, #CC3030 35%, #9C2525 75%);
  background:-moz-linear-gradient(135deg, #CC3030 35%, #9C2525 75%);
  background:-webkit-linear-gradient(135deg, #CC3030 35%, #9C2525 75%);
  background:-o-linear-gradient(-45deg, #CC3030 35%, #9C2525 75%);
}


#gridlines {
  mix-blend-mode:normal;
  text-align:right;
  vertical-align:top;
}

#gridlines path {
  stroke:#FFFFFF;
}

#gridlines text {
  fill:#FFFFFF;
  opacity:1;
  text-shadow:1px 1px 1px #1E1E1E, -1px -1px 1px #1E1E1E, 1px -1px 1px #1E1E1E, -1px 1px 1px #1E1E1E;
}


#boatclassesList {
}

#boatclassesList .name {
  background-color:#FFFFFF;
  border:1px solid;
  border-color:#EBEDED;
  color:#CC3030;
}

#boatclassesList .arrow {
  fill:#222222;
}

#boatclassesList.open .arrow {
  fill:#CC3030;
}

#boatclassesList option {
  background-color:#FFFFFF;
  color:#CC3030;
}

#boatclassesList option.on {
  background-color:#CC3030;
  color:#FFFFFF;
}

#reportList {
  background-color:#FFFFFF;
  border:1px solid;
  border-color:#EBEDED;
}

#reportList .row {
  border-top-color:transparent;
  border-left-color:#EBEDED;
  border-right-color:#EBEDED;
  border-bottom-color:#EBEDED;
  background:linear-gradient(#FFFFFF 0%, #FFFFFF 55%, #F3F3F3 100%);
  background:-moz-linear-gradient(#FFFFFF 0%, #FFFFFF 55%, #F3F3F3 100%);
  background:-webkit-linear-gradient(#FFFFFF 0%, #FFFFFF 55%, #F3F3F3 100%);
  background:-o-linear-gradient(#FFFFFF 0%, #FFFFFF 55%, #F3F3F3 100%);
  color:#222222;
}

#reportList .row:hover {
  background:linear-gradient(#FFFFFF 0%, #F3F3F3 55%, #E8E8E8 100%);
  background:-moz-linear-gradient(#FFFFFF 0%, #F3F3F3 55%, #E8E8E8 100%);
  background:-webkit-linear-gradient(#FFFFFF 0%, #F3F3F3 55%, #E8E8E8 100%);
  background:-o-linear-gradient(#FFFFFF 0%, #F3F3F3 55%, #E8E8E8 100%);
  color:#222222;
}

#reportList .row.on {
  background:linear-gradient(#CC3030 0%, #CC3030 55%, #CC3030 100%);
  background:-moz-linear-gradient(#CC3030 0%, #CC3030 55%, #CC3030 100%);
  background:-webkit-linear-gradient(#CC3030 0%, #CC3030 55%, #CC3030 100%);
  background:-o-linear-gradient(#CC3030 0%, #CC3030 55%, #CC3030 100%);
  color:#FFFFFF;
}

#reportList .row.ARV + div.RAC_1 {
  border-top:3px solid;
  border-top-color:#B9BDBD;
}

#reportList .identity img,
#reportList .row.on .identity img,
#reportList .row:hover .identity img {
  *-webkit-filter:sepia(0%) hue-rotate(0deg) saturate(100%);
  *filter:sepia(0%) hue-rotate(0deg) saturate(100%);
}

#reportList h1 {
  color:#222222;
}

#reportList h2 {
  color:#222222;
  font-weight:bold;
}

#reportList .row>sub .latedate {
  color:#CC3030;
}

#reportList .row.on h1 {
  color:#FFFFFF;
}

#reportList .row.on h2 {
  color:rgba(255,255,255,0.7);
}

#reportList .row .rank {
  color:#CC3030;
}

#reportList .row .rank .up:after {
  color:#5EBB00;
}

#reportList .row .rank .eq:after {
  color:#7E7E7E;
}

#reportList .row .rank .down:after {
  color:#D54500;
}

#reportList .row.on .rank {
  color:#FFFFFF;
}

#reportList .row.on .rank .up:after {
  color:#DDFFBB;
}

#reportList .row.on .rank .eq:after {
  color:#FFFFFF;
}

#reportList .row.on .rank .down:after {
  color:#FFD9C6;
}

#reportList .row.on .latedate {
  color:#FFD9C6;
}


#dashboard {
  background-color:#F5F7F7;
}

#dashboard header {
  background-color:#264264;
  border-color:rgba(0,0,0,0.1);
  color:#FFFFFF;
}

#dashboard article {
  background-color:#FFFFFF;
  border-color:rgba(0,0,0,0.1);
  color:#222222;
}

#dashboard .pos * {
  color:#009D4F;
}

#dashboard .neg * {
  color:#9D0400;
}

#dashboardsummary {
  border-color:rgba(0,0,0,0.1);
  background-color:#FFFFFF;
  color:#222222;
}

#openDetails .face {
  background-color:#CC3030;
}

#openDetails .back {
  background-color:#FFFFFF;
}

#openDetails svg {
  fill:#FFFFFF;
}


#boatcard article {
  border:1px solid;
  border-color:rgba(255,255,255,0.3);
}

#boatcard .identity {
  color:#222222;
  background:linear-gradient(#FFFFFF 0%, #FFFFFF 55%, #FFFFFF 100%);
  background:-moz-linear-gradient(#FFFFFF 0%, #FFFFFF 55%, #FFFFFF 100%);
  background:-webkit-linear-gradient(#FFFFFF 0%, #FFFFFF 55%, #FFFFFF 100%);
  background:-o-linear-gradient(#FFFFFF 0%, #FFFFFF 55%, #FFFFFF 100%);
}

#boatcard .identity h1 {
  color:#222222;
}

#boatcard .identity h2 {
  color:#79879B;
}

#boatcard .identity .rank {
  color:#CC3030;
}

#boatcard .infos {
  color:#FFFFFF;
  background-color:rgba(204,48,48,1.00);
}

#boatcard .infos .vmg {
  color:#FDDD00;
}

#boatcard .infos .vmg.neg,
#boatcard .infos .vmg.neg * {
  color:#FF4B17;
}

#boatcard .infos .latedate {
  color:#FFC1C9;
}

#boatcard .infos .pos,
#boatcard .infos .pos * {
  color:#9BED83;
}

#boatcard .infos .neg,
#boatcard .infos .neg * {
  color:#FDC0AC;
}

#boatcard .infos .live,
#boatcard .infos .live * {
  color:#CAFD00;
}

#boatcard .infos .off {
  font-weight:bold;
  padding-top:5px;
  padding-bottom:55px
}

#boatcard .infos table thead {
  color:#FFFFFF;
}

#boatcard .infos fieldset span,
#boatcard .infos table tbody th {
  color:#FFFFFF;
}

#boatcard .infos fieldset dfn {
  color:rgba(255,255,255,0.7);
}

#boatcard .cross svg {
  fill:#FFFFFF;
  opacity:0.6;
}

#boatcard .infos .speeds th+td {
  background-color:rgba(255,255,255,0.03);
}

#boatcard .infos .speeds th+td+td {
  background-color:rgba(255,255,255,0.07);
}

#boatcard .infos .speeds th+td+td+td {
  background-color:rgba(255,255,255,0.15);
}

#geoblog {
  border:1px solid;
  border-color:rgba(255,255,255,0.3);
}

#geoblog header {
}

#geoblog .identity {
  background:linear-gradient(#CC3030 0%, #CC3030 55%, #CC3030 100%);
  background:-moz-linear-gradient(#CC3030 0%, #CC3030 55%, #CC3030 100%);
  background:-webkit-linear-gradient(#CC3030 0%, #CC3030 55%, #CC3030 100%);
  background:-o-linear-gradient(#CC3030 0%, #CC3030 55%, #CC3030 100%);
}

#geoblog .identity h1 {
  color:#FFFFFF !important;
}

#geoblog .identity h2 {
  color:rgba(255,255,255,0.7) !important;
}

#geoblog .infos {
  background-color:#CC3030;
  color:#FFFFFF;
}

#geoblog>article {
  background-color:#FFFFFF;
  color:#222222;
}

#geoblog>footer {
  background-color:#222222;
}

#geoblog>footer * {
  color:rgba(255,255,255,0.7);
}

#geoblog .cross {
  fill:#FFFFFF;
}

#geoblog .arrow {
  fill:#FFFFFF;
}

#weather {
}

#weather section:before,
#weather section:after {
  border-top-color:#FFFFFF;
}

#weather section,
#weather select,
#weather option,
#weather .date,
#weather .list:hover option {
  background-color:#FFFFFF;
  color:#222222;
}

#weather.waiting .date {
  color:rgba(6,49,81,0.3);
}

#weather .button,
#weather .list {
  fill:#222222;
}

#weather .wait {
  stroke:#222222;
}

#weather .button:hover,
#weather .list:hover,
#weather .list.open {
  fill:#CC3030;
}

#weather .list:hover .date,
#weather .list.open .date,
#weather .list:hover select {
  color:#CC3030;
}

#weather option.on {
  background-color:#CC3030;
  color:#ffffff;
  font-weight:bold;
}

#weather legend div {
  color:#FFFFFF;
  text-shadow:1px 1px 1px #1E1E1E, -1px -1px 1px #1E1E1E, 1px -1px 1px #1E1E1E, -1px 1px 1px #1E1E1E;
}

#leafletcredits a {
  color:##E42312;
}

@media screen and (max-width:900px) {
  #boatcard .infos {
    background-color:rgba(28,52,78,1);
  }
}
