@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* #2d5473 - blue
 * #ad1021 - red
 */

body {
  background: rgb(204,204,204); 
}

page {
  background: white;
  display: block;
  margin: 0 auto;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}

page{  
  width: 21cm;
  height: 29.7cm; 
  position:relative;
}

page[layout="landscape"] {
  width: 29.7cm;
  height: 21cm;  
}

@media print {
  body, page {
    background: white;
    margin: 0;
    box-shadow: none;
  }
  .no-print{display:none}
}

html,body{ background:#f5f5f5; color:#161616;}
.no-print{background:#2d5473;color:#fff;text-align: right;padding:10px;margin-bottom:20px}
.no-print > div{width:21cm;margin:auto}



*{ font-family:"Fira Sans";padding:0;margin:0;box-sizing:content;}

.p header{height:0.8cm;font-size:9pt;display:block; padding-top:1.5cm;margin: 0 1.5cm;border-bottom:1px #2d5473 solid}
.p .numb{padding-top:0.2cm;font-weight:700;text-align:center;height:0.6cm;background:#2d5473;display: block;color:#fff;padding-left:0.2cm;padding-right:0.2cm}
.p .title{padding:0.2cm} 
.p .ref{padding:0.2cm}

.p header .numb{float:left;}
.p header .title{float:left;}
.p header .ref{float:right;padding-right:0}

.p { }
.p .first{float:left;margin-left: 1.5cm;font-size:10pt;line-height: 18pt;width:8cm;padding-top:0.5cm}
.p .second{float:left;margin-left: 1.5cm;font-size:10pt;line-height: 18pt;width:8cm;padding-top:0.5cm}


.p .last{clear:both;margin-left: 1.5cm;font-size:8pt;line-height: 11pt;width:18cm;text-align: center;padding-top:0.5cm; bottom:1.5cm; position: absolute; }
.last .moon{height:8px; width:8px}

.blue{color:#2d5473}
.red{color:#ad1021}


/* #2d5473 - blue
 *  #ad1021 - red
 */

button{background:#fff; border:0; border-radius: 4px;color:#2d5473;padding:5px 15px; cursor: pointer;}
.moon {
  display: inline-block;
  height:10px;
  width:10px;
  border-radius: 50px;
  border:1px #555 solid;
}

.New{background:white; }
.Full{background:#555; }
.waxing{background: linear-gradient(-90deg, #555, #555 50%, white 50%, white ); }
.waning{background: linear-gradient(-90deg, white, white 50%, #555 50%, #555); }


.months{;box-sizing:border-box;}
.month{margin-left:1px;font-size:10pt;line-height: 18pt;width:4.45cm;border:1px #2d5473 solid;margin-top:0.5cm;float:left;box-sizing:content-box;}
.month:nth-child(1){margin-left: 1.5cm;;box-sizing:border-box;}
.monthHeader{ background:#2d5473;color:white;text-size:10pt;text-align:center;;box-sizing:border-box;}
.monthTime1{background:#2d5473;font-size:7pt;float:left;width:38%;text-align:right;padding-right:0.2cm; box-sizing:border-box;}
.monthHeight1{background:#2d5473;font-size:7pt;float:left;width:12%;text-align:left; box-sizing:border-box}
.monthTime2{background:#2d5473;font-size:7pt;float:left;width:38%;text-align:right;padding-right:0.2cm; box-sizing:border-box}
.monthHeight2{background:#2d5473;font-size:7pt;float:left;width:12%;text-align:left; box-sizing:border-box;}

/*{border:1px rgba(0,0,0,0.3) solid}*/
.day{padding:0.5pt 0.5pt 4pt 0.5pt;float:left;width:50%;font-size: 8pt;box-sizing:border-box;height:54px}
.dayLeft{float:left;width:0.7cm;box-sizing:border-box;}
.dayNumber{font-weight: bold;font-size: 17pt;width:100%;display: block;text-align: right;}
.dayDay{;box-sizing:border-box;width:100%;display: block;line-height: 8pt;font-size:8pt;text-align: right;padding-right:1px}
.dayMoon{;box-sizing:border-box;width:100%;display: block;text-align: right;  height:10px;}
.dayRight{float:left;width:1.4cm;box-sizing:border-box;}
.timeAndHeight{padding-left:2px;box-sizing:border-box;line-height: 8pt;padding-top:3px}
.time{box-sizing:border-box;text-align: left;display: block;float:left;padding-left:6px;width:0.70cm}
.height{box-sizing:border-box;text-align: right;display: block;float:left;padding-left:5px;width}
.ndst{background: rgba(0,0,0,0.1)}
.dst{background: rgba(0,0,0,0.0)}
.day:last-child{padding-bottom:5px}
.day:nth-child(odd){clear:both}
.HighWater{font-weight: 500}

.logo{float:left !important;width:80px;display: block;text-align: left;top:-4px;position: relative;}
.tide{font-size:15px;font-weight: 800;letter-spacing: 5px;display: block}
.pred{font-size:9px;display: block;letter-spacing: 2px}

.no-print a{color:#fff;text-decoration: none}


.stream{width:8.8cm;height:auto;}
.stream:nth-child(even){ float:right}
.stream:nth-child(odd){ float:left}
.stream img{width:100%;height: auto;border:1px solid #2d5473}
.stream span{text-align: left;width: 100%;display: block;font-size: 8pt;padding:2pt 0pt}

.streams{margin:0.5cm 1.5cm 0.5cm 1.5cm}



.maps{margin:0.5cm 1.5cm 0.5cm 1.5cm}
.map{width:100%;height:auto;}
.map img{width:100%;height: auto;border:1px solid #2d5473}
.maps span{text-align: left;width: 100%;display: block;font-size: 8pt;padding:2pt 0pt}


.curve{margin:0.5cm 0 0 0 ;width:100%;height:11cm}
.lineSpring {fill: none;stroke: #ad1021;stroke-width: 2px;}
.lineNeap {fill: none;stroke: #2d5473;stroke-width: 2px;}
.axis-label {font-size: 9px;fill: #333;}




.Neap *{color:#2d5473}
.Spring *{color:#ad1021}


.horizontalGrid {
  stroke: lightgrey;
  stroke-opacity: 0.7;
  shape-rendering: crispEdges;
}

.grid path {
  stroke-width: 0;
}
.footerGraph{font-size:8pt;float:right;}