body{
	font-family: poppins;
}
.pad15{
    padding: 15px;
}
.rtContainer{
   margin: auto;
   padding-top: 15px;
}
.buttonreg{
   width: 108px;
   font-size: 11pt;
}
.buttonregnav{
   width: 112px;
   font-size: 11pt;
}

.navbutton:hover,.threednavbutton:hover,.greenbutton2:hover{
  background-color: #ff0;
  background-image: linear-gradient(#eea,#fff);

}
.minMax{
 	width:45px;
 	height: 20px;
 	font-size:8pt;
}
.redshadow{
   text-shadow:1px 3px 11px #f00;
}
.blueshadow{
   text-shadow:1px 3px 11px #324993;
}

.logotxt{
   font-variant: small-caps;
}
.logosmall{
    font-size: 20pt;
    
}
h4{
    color: #500000;
}
.transition-transform
{
  transition-property: transform;
  transition-timing-function: ease;
  transition-duration: 250ms;
}
.controls{
    min-width: 70%;
    max-width: 460px;
    text-align: center;
   margin: auto auto auto 150px;
    background-color: white;
    height: 55px;
   top: 41px;
   position: fixed;
    opacity: .9; 
    padding:5px 0px 5px 0px;
    z-index: 13;  
    border-radius:10px;
    border:2px #ad0000 solid;
}
.controlsZ{
    text-align: center;
    background-color: white;
   top: 5px;
   position: fixed;
    opacity: .8; 
    padding:5px 0px 5px 0px;
    z-index: 9;  
    border-radius:10px;
    border:2px #ad0000 solid;
    zoom: 80%;
}

.red{
   color: #ad0000;   
}
.blue{
   color: #324993;
}
table.tripStats tr td{
   border: 1px solid black;
}
.ftprev{
     height: 30px;
     background-color : #c9c904;
     border: 5px double #fff;
     border-radius: 0 0 0 9px;
     color: #fff;
     font-weight: bold;
     padding:2px;
     margin-right: 4px;
     cursor: pointer;
}
.ui-widget{
   font-family: poppins;
}
.bMenu{
 	cursor: pointer;
 	padding-left:10px;
}
.ftnext{
     font-weight: bold;
     height: 30px;
     border: 5px double #fff;
     background-color: #09b409;
     border-radius: 0 0 9px 0;
     color:  #fff;
     padding:2px; 
     cursor: pointer;
     margin-right: 4px;
}
.zoomimg{
	height: 50px;
}
.navbutton{
  margin: 1px;
  padding: 1px 1px 1px 0px;
  font-size: 12px;
  white-space: nowrap;
  border-radius: 12px;
  font-weight: 900;
  cursor: pointer;
  border: 1px #500000 outset;
  font-family: poppins; 
  height: 21px;
  color: #ab0000;
}
.prm-clr{
    color: #ab0000;
}
.altreading{
   font-size: 8pt;
}
.alt{
    color: #33e;
}
.chlreading{
  font-size: 7pt;
}
.sstreading, .sst{
    color: red;
    }
.salreading, .sal{
  color: teal;
  font-size: smaller;
  margin-top:2px;
}
.chl{
    color: #1a2;
    }
.chlblue{
    color: #2196F3;
    }
    .chlugly{
    color: #a52;
    }
    .chlyella{
    color: #b9b904;
    }
.curr{
	color: #c3c;
}
@media only screen and (max-width: 480px){
    .controls{
  
    }
}
/* iphone 12 */
@media only screen 
    and (max-width: 375px) 
    and (max-height: 812px) 
    and (-webkit-device-pixel-ratio: 3) {
    }
.scalerightcontainer{
	width: 100vw;
	position: fixed;
	top: 70px;
}
#curScale{
	z-index: 3;
	float: right;
}
@media screen and (max-width: 475px) {
  a.pclassc {
    font-size: 6pt;
  }
}
@media screen and (max-width: 406px) {
  a.pclassc {
    font-size: 5pt;
  }
}
@media screen and (min-width: 476px) {
  a.pclassc {
    font-size: 8pt;
  }
}
a.pclassc {

	      font-weight: bold; color: #324993; text-decoration: none;
	  

    }

       a.pclassc:hover {

	    font-weight: bold; color: #f8f8ec; text-decoration: none;
    text-shadow:
    -1px -1px 0 #324993,
    1px -1px 0 #324993,
    -1px 1px 0 #324993,
    1px 1px 0 #324993;
    }
.greenbutton2{
   background-color: #408c7f;
   background-image: linear-gradient(#969,#408c7f,#408c7f,#408c7f);
}
.graybutton{
       background-color: #ccc;
  background-image: linear-gradient(#aaa,#eee);
}
.whitebutton {
       background-color: #fff;
       background-image: linear-gradient(#fff,#eee);
}
.roffs {
   padding: 1px 10px;
   width: 90px;
   border: 1px #000 outset;
}
.greenbutton{
  background-color: #408c7f;
  background-image: linear-gradient(#408c7f,#fff);
}
.roffs-primary{
  color:#272a68;
}
.roffs-font-header{
  text-transform: uppercase;
}
.roffs-font{

  font-family: Oswald,sans-serif;
}
.roffs-link{
  text-decoration: none;
}
.buttonsml{
   width: 55px;
   font-size: 7pt;
}
.checked{
	background-image: url('/img/icons/success.gif');
	background-repeat: no-repeat, repeat;
	background-position: right center;
	background-origin: content-box;
}
.mapButtons{
   	 position:fixed;
   	 z-index:10;
   	 top: 10px;
   	 left: 20px;
}
.mapButton{
   background-color:#fff;
   color:#324993;
   cursor:pointer;
   font-weight: bold;
     border: 1px solid #324993;
  border-radius: 2px;
  padding:5px;
  height: 65px;
  vertical-align: middle;
 display: table-cell;
}
.mapButton:hover{
   background-color:#324993;
   color:#fff;
   cursor:pointer;
   font-weight: bold;
   border: 1px solid #fff;
  border-radius: 2px;
}
/* IPHONE SE Gen 1 Portrait */
@media only screen 
  and (min-device-width: 320px)
  and (max-device-width: 357px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 
 .mapButtons {
   	 top: 10px;
  }
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 350px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 
 .mapButtons {
   	 top: 10px;
  }
}
/* Portrait */
@media only screen 
  and (min-device-width: 360px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 
 .mapButtons {
   	 top: 10px;
  }
}

/* Landscape */
@media only screen 
  and (min-device-width: 360px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 
 .mapButtons {
   	 top: 10px;
  }
}
 /* iPhone 6-7 and 8-12 Tom's phone is included here*/
/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 
 .mapButtons {
   	 top: 10px;
  }
}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 
 .mapButtons {
   	 top: 10px;
  }
}
/* ----------- iPhone 6+, 7+ and 8+ ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 
 .mapButtons {
   	 top: 10px;
  }
}

/* Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
 .mapButtons {
   	 top: 10px;
  }
}

/* ----------- iPhone X ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 
 .mapButtons {
   	 top: 10px;
  }
}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
 .mapButtons {
   	 top: 15px;
  }
}
@media only screen  
  and (min-width: 350px)
  and (min-height: 650px)
   and (max-width: 480px)
  and (max-height: 930px)
  and (-webkit-min-device-pixel-ratio: 2) 
{
  .mapButtons {
   	 top: 15px;
  }

}
 @media only screen 
and (max-width : 320px) 
and (max-height : 568px) /* SE Gen 1 */
   and (-webkit-device-pixel-ratio : 2) {
  .mapButtons {
   	 top: 10px;
  }
   }
@media only screen  /* iPhone X++ 12 maybe 12+ */
and (max-width : 390px) 
and (max-height : 844px) 
and (-webkit-device-pixel-ratio : 3)
{
 .mapButtons {
   	 top: 10px;
}
}
@font-face {
  font-family: arcon;
  src: url('../fonts/arcon/Arcon-Regular.otf');
}
@font-face {
  font-family: poppins-bold;
  src: url('../fonts/poppins/Poppins-Bold.ttf');
}
@font-face {
  font-family: poppins-black;
  src: url('../fonts/poppins/Poppins-Black.ttf');
}
@font-face {
  font-family: poppins;
  src: url('../fonts/poppins/Poppins-Regular.ttf');
}

.outline
{
    color: white;
    text-shadow:
    -1px -1px 0 #500,
    1px -1px 0 #500,
    -1px 1px 0 #500,
    1px 1px 0 #500;  
}
.outlinegrn
{
    color: #1121f1;
    text-shadow:
    -1px -1px 0 #050,
    1px -1px 0 #050,
    -1px 1px 0 #050,
    1px 1px 0 #050;  
}
.outlinered
{
    color: #fff;
    text-shadow:
    -1px -1px 0 #a00,
    1px -1px 0 #a00,
    -1px 1px 0 #a00,
    1px 1px 0 #a00;  
}
.outlineblue
{
    color: #7ff;
    text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;  
}
.aggieButton{
   background:#d9d9d9;
   color:#500000;
   font-weight: bold;
   font-size:small;
   height:30px;
   border: 1px solid #500000;
  border-radius: 6px;
}
.aggielbl{
   background:#d9d9d9;
   color:#500000;
   font-weight: bold;
   font-size:small;
   height:30px;
   opacity: 0.7;
  border-radius: 2px;
}
.aggieButton:hover{
   background:#500000;
   color:#d9d9d9;
   font-weight: bold;
   font-size:small;
   height:30px;
   border: 1px solid #d9d9d9;
  border-radius: 6px;
}
.aggieButtonTrip{
   background:#d9d9d9;
   color:#500000;
   font-weight: bold;
   font-size:small !important;
   height:30px;
   border: 3px double #500000;
}
.aggieButtonTrip:hover{
   background:#500000;
   color:#d9d9d9;
   font-weight: bold;
   font-size:small !important;
   height:30px;
   border: 3px double #d9d9d9;
}
.mnButton{
   background: white;
   color: black;
   font-weight: bold;
   font-size:small;
  border: 1px solid black;
  
}
.mnButton:hover{
   background:black;
   color:white;
   font-weight: bold;
   font-size:small;
 border:1px solid white;
}
.sstlistborder{
    border: 4px #324993 solid;
    border-radius: 10px;
}
.chllistborder{
    border: 4px #32c349 solid;
    border-radius: 10px;
}
.flexshelf{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.flexbox{
	flex: 0 1 146px;
	margin: 2px;
	font-weight: normal;
	font-size:12pt;
	text-align: center;
}
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #fff;
  padding: 10px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 7px;
  font-size: 16px;
  text-align: center;
}

.sstTitle{
	font-size: 9pt;
	cursor: pointer;
	color: #324993;
/*     font-weight: bold; */
	
}
.mnField{
   background:white;
   color:black;
   font-weight: bold;
   font-size: large;
   padding:5px;
   border-radius: 13px;
  /* width: 175px; */
   
}
  .ui-menu { width: 150px; }

.ag-button
{
   background-color:#500000;
   color:#d9d9d9;
   padding: 6px;
   font-family: poppins-bold;
   border-radius: 5px;
   
}
.menubutton{
 	height: 100px;
 	cursor: pointer;
}
.ag-button:hover
{
   color: #500;
   font-weight: bold;
   font-family: poppins;
   background-color:#d9d9d9;
   box-shadow: 3px 3px 30px 15px #500000;
}
.ag-text{
  color:#500000;

}
.majortime{
    color: #09b409;
}
.fishingtimes{
   width: 240px;
   padding-left: 10px;
 }
.times{
     font-size: small;
     font-weight:bold;

/*    color: #09b409;  */
}
.minortime{
    color: #c9c904;
}
.fishingtitle{
   font-size:15px;
}
.waypointImgSelections{
    background-repeat: no-repeat;
    padding-left:20px;
}
.wptDegs{
   width:40px;
}
.wptMinsNSecs{
   width:90px;
}
.custcoords{
    border: 3px double #324993;
    color: #324993;
    display: inline;
    margin-top: 10px;
    padding-bottom: 5px;
}
.error{
     color: red;
     height: 24px;
}
.floatingmoon{
    position: fixed;
    float: right;
    z-index: 2000;
    right: 50px;
}
.sstRangeTool{
     margin: 4px 10px 3px 10px;
}
.sstRangeTool .ui-slider-range{
  background-image:url('/images/sliderbackground.png') !important;
  background-size: 100% 100%;
  background: none;
 
}
.sstRangeTool .ui-slider-handle{
  border-radius:15px;
}
.sstRangeTool .ui-slider-handle:nth-child(3){
     background: #7f292a;
}
.sstRangeTool .ui-slider-handle:nth-child(2){
  background: #7e2b7b;
}
.sstRangeTool{
     margin: 4px 10px 3px 10px;
} 
.tempDisplay{
	width: 15px;
}
.sstRangeToolZ{
     	margin:10px 20px 10px 27px;
	height: 34vw;
        width: 55px;

}
.sstRangeToolZ .ui-slider-range{
  background-image:url('/images/sliderbackgroundvert.png');
  background-size: 100% 100%;
 
}
.sstRangeToolZ .ui-slider-handle{
  border-radius:25px;
    width:63px;
    height: 2.9em;
    text-align: center;
    color: white;
    padding-top: 7px;
  }
.sstRangeToolZ .ui-slider-handle:nth-child(2){
     background: #800000;
}
.sstRangeToolZ .ui-slider-handle:nth-child(1){
  background: #7e2b7b;
}
@media screen and (max-height: 800px){
    .controlsZ{
       min-height: 420px;
    	height: 100%;
    }
    .sstRangeToolZ{
    
     height: 60vh;
    }
}
@media screen and (max-height: 1024px){
    .controlsZ{
    	height: 100%;
    }
    .sstRangeToolZ{
    
     height: 50vh;
    }
}
@media screen and (max-height: 1200px){
    .controlsZ{
    	height: 100%;
    }
    .sstRangeToolZ{
     height: 50vh;
    }
}
@media screen and (max-height: 768px){
    .controlsZ{
    	height: 100%;
    }
    .sstRangeToolZ{
     height: 35vh;
    }
}
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  text-align:left;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .2s;
  transition: .2s;
  content: "";
  padding: 6px 0px 0px 4px;
  color: white;
  
}
.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

input:checked + .slider:after {
   content: " On";
   padding-top:10px;
 }
/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year{
    background-color: #500000;
    color:white;
}
.homeport{
	color: #7676fc;

}
.btnSetPort{
	border: 2px #ccc outset;
	padding: 5px;
	border-radius: 8px;
	cursor: pointer;
}
.fakelink{cursor:pointer;font-weight:bold;}
.fakelink:hover{color: #fff;
   cursor: pointer;
    text-shadow:
    -1px -1px 0 #a00,
    1px -1px 0 #a00,
    -1px 1px 0 #a00,
    1px 1px 0 #a00;
    
    
}
.modal-backdrop.show{
   width: 100%;
   height: 100%;
}


.tempAdjCtl{
	width: 100px;
	cursor: pointer;
    margin-left: 10px;
    margin-right: 10px;
}
.sstScaleTmp{
 	width: 100px;
 	font-weight: bold;
 	font-size: xx-large;
 	height: 80px;
 	text-align: center;
}

.animation-ctn{
  text-align:center;
  margin-top:5em;
}

	@-webkit-keyframes checkmark {
    0% {
        stroke-dashoffset: 100px
    }

    100% {
        stroke-dashoffset: 200px
    }
}

@-ms-keyframes checkmark {
    0% {
        stroke-dashoffset: 100px
    }

    100% {
        stroke-dashoffset: 200px
    }
}

@keyframes checkmark {
    0% {
        stroke-dashoffset: 100px
    }

    100% {
        stroke-dashoffset: 0px
    }
}

@-webkit-keyframes checkmark-circle {
    0% {
        stroke-dashoffset: 480px
   
    }

    100% {
        stroke-dashoffset: 960px;
      
    }
}

@-ms-keyframes checkmark-circle {
    0% {
        stroke-dashoffset: 240px
    }

    100% {
        stroke-dashoffset: 480px
    }
}

@keyframes checkmark-circle {
    0% {
        stroke-dashoffset: 480px 
    }

    100% {
        stroke-dashoffset: 960px
    }
}

@keyframes colored-circle { 
    0% {
        opacity:0
    }

    100% {
        opacity:100
    }
}

.inlinesvg .svg svg {
    display: inline
}
.icon--order-success svg polyline {
    -webkit-animation: checkmark 0.25s ease-in-out 0.7s backwards;
    animation: checkmark 0.25s ease-in-out 0.7s backwards
}

.icon--order-success svg circle {
    -webkit-animation: checkmark-circle 0.6s ease-in-out backwards;
    animation: checkmark-circle 0.6s ease-in-out backwards;
}
.icon--order-success svg circle#colored {
    -webkit-animation: colored-circle 0.6s ease-in-out 0.7s backwards;
    animation: colored-circle 0.6s ease-in-out 0.7s backwards;
} 
.bold{font-weight:bold;}
.buoy,select#wptIcon option[value="buoy"]{background-image:url('../micons/158.gif'); }
.surfaceplat,select#wptIcon option[value="surfaceplat"]{background-image:url('../micons/184.gif'); }
.bell,select#wptIcon option[value="bell"]{background-image:url('../micons/35.gif'); }
.cyclone,select#wptIcon option[value="cyclone"]{background-image:url('../micons/101.gif'); }
.drillshp,select#wptIcon option[value="drillshp"]{background-image:url('../micons/127.gif'); }
.semi,select#wptIcon option[value="semi"]{background-image:url('../micons/151.gif'); }
.boat,select#wptIcon option[value="boat"]{background-image:url('../micons/155.gif'); }
.artifreef,select#wptIcon option[value="artifreef"]{background-image:url('../micons/9.gif'); }
.sinkingship,select#wptIcon option[value="sinkingship"]{background-image:url('../micons/37.gif'); }
.tunarel,select#wptIcon option[value="tunarel"]{background-image:url('../micons/91.gif'); }
.tunachg,select#wptIcon option[value="tunachg"]{background-image:url('../micons/92.gif'); }
.fish,select#wptIcon option[value="fish"]{background-image:url('../micons/14.gif'); }
.redfish,select#wptIcon option[value="redfish"]{background-image:url('../micons/21.gif'); }
.redX,select#wptIcon option[value="redX"]{background-image:url('../micons/400.gif'); }
.snorkel,select#wptIcon option[value="snorkel"]{background-image:url('../micons/164.gif'); }
.doradorel,select#wptIcon option[value="doradorel"]{background-image:url('../micons/81.gif'); }
.doradokill,select#wptIcon option[value="doradokill"]{background-image:url('../micons/82.gif'); }
.derrick,select#wptIcon option[value="derrick"]{background-image:url('../micons/39.gif'); }
.bullseye,select#wptIcon option[value="bullseye"]{background-image:url('../micons/165.gif'); }
.car,select#wptIcon option[value="car"]{background-image:url('../micons/7.gif'); }
.radioTower,select#wptIcon option[value="radioTower"]{background-image:url('../micons/44.gif'); }
.kingmackill,select#wptIcon option[value="kingmackill"]{background-image:url('../micons/32.gif'); }
.kingmacrel,select#wptIcon option[value="kingmacrel"]{background-image:url('../micons/31.gif'); }
.redDot,select#wptIcon option[value="redDot"]{background-image:url('../micons/16.gif'); }
.airplane,select#wptIcon option[value="airplane"]{background-image:url('../micons/1a.gif'); }
.mug,select#wptIcon option[value="mug"]{background-image:url('../micons/4.gif'); }
.yellowDot,select#wptIcon option[value="yellowDot"]{background-image:url('../micons/10.gif'); }
.bluemarcaught,select#wptIcon option[value="bluemarcaught"]{background-image:url('../micons/42.gif');background-size: 16px;  }
.bluemarrel,select#wptIcon option[value="bluemarrel"]{background-image:url('../micons/41.gif'); background-size: 16px; }
.wahoocgh,select#wptIcon option[value="wahoocgh"]{background-image:url('../micons/72.gif'); background-size: 16px;}
.wahoorel,select#wptIcon option[value="wahoorel"]{background-image:url('../micons/71.gif');background-size: 16px; }
.sailcgh,select#wptIcon option[value="sailcgh"]{background-image:url('../micons/62.gif'); background-size: 16px;}
.sailrel,select#wptIcon option[value="sailrel"]{background-image:url('../micons/61.gif');background-size: 16px; }
.mob,select#wptIcon option[value="mob"]{background-image:url('../micons/55.gif');background-size: 16px; }
.Xmarksthespot,select#wptIcon option[value="Xmarksthespot"]{background-image:url('../micons/1.gif');background-size: 16px; }
.txtsmall{
   font-size: 7.5pt;
}
.white{color: #fff;}
.green{color: #0c0;}
.bolder{font-weight: bolder;}
.lightblue { color: #bbf;}
.italic{font-style: italic;}
.tomato{color: #f63;}
.red {color: #f00; } 
.slantedSE{
	transform: rotate(45deg);
	position: relative;
	top: 13px;
	left: 9px;
}
.slantedSW{
	transform: rotate(-45deg);
	position: relative;
	top: 17px;
	left: -52px;
} 
.blink_me {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

/* ======================================================
   MODERN NAVIGATION OVERRIDES
   Add at END of rt-nav.css
   ====================================================== */

:root{
    --nav-primary:#324993;
    --nav-primary-light:#4d6fde;
    --nav-secondary:#0ea5e9;
    --nav-text:#1f2937;
    --nav-border:#dbe4ef;
    --nav-bg:#f5f7fb;
    --nav-card:#ffffff;
    --nav-shadow:0 3px 12px rgba(0,0,0,.08);
    --nav-shadow-hover:0 10px 24px rgba(0,0,0,.18);
}

/* NAV PAGE */

#navBody{
    background:var(--nav-bg) !important;
    padding:10px;
}

/* HEADER */

#navBody table:first-of-type{
    width:100%;
    border:none !important;
    background:linear-gradient(
        135deg,
        var(--nav-primary),
        var(--nav-primary-light)
    ) !important;

    border-radius:18px;
    overflow:hidden;
    box-shadow:var(--nav-shadow);
    margin-bottom:12px;
}

#navBody table:first-of-type td{
    border:none !important;
    background:transparent !important;
    color:#fff !important;
}

/* BUTTON BASE */

.navbutton{
    display:block;
    width:100%;

    min-height:46px;
    height:auto;

    margin:6px 0 !important;
    padding:12px 14px !important;

    border-radius:14px !important;

    border:1px solid var(--nav-border) !important;

    font-family:poppins,sans-serif;
    font-size:13px !important;
    font-weight:600 !important;

    text-align:left;

    cursor:pointer;

    color:var(--nav-text) !important;

    background:#fff !important;

    box-shadow:var(--nav-shadow);

    transition:
        transform .15s ease,
        box-shadow .15s ease,
        background-color .15s ease,
        color .15s ease;
}

/* WIDTH */

.buttonregnav{
    width:100% !important;
    max-width:240px;
}

/* HOVER */

.navbutton:hover,
.greenbutton:hover,
.greenbutton2:hover,
.graybutton:hover{
    transform:translateY(-2px);

    box-shadow:var(--nav-shadow-hover);

    background:var(--nav-primary) !important;

    color:white !important;
}

/* PRIMARY BUTTONS */

.greenbutton{
    background:linear-gradient(
        135deg,
        var(--nav-primary),
        var(--nav-primary-light)
    ) !important;

    color:#fff !important;
    border:none !important;
}

/* SECONDARY ACTIONS */

.greenbutton2{
    background:linear-gradient(
        135deg,
        var(--nav-secondary),
        #2563eb
    ) !important;

    color:#fff !important;

    border:none !important;
}

/* STANDARD ACTIONS */

.graybutton{
    background:#fff !important;
    color:var(--nav-primary) !important;
}

/* ROFFS */

.roffs{
    width:100%;
    max-width:240px;

    border-radius:14px;

    box-shadow:var(--nav-shadow);

    border:none;

    padding:8px;

    background:#fff;
}

/* HELP / TUTORIAL / LEGEND */

.style9{
    width:100% !important;

    display:block;

    padding:12px !important;

    border-radius:14px !important;

    background:#fff !important;

    color:var(--nav-primary) !important;

    box-shadow:var(--nav-shadow) !important;

    border:1px solid var(--nav-border);

    text-align:center;

    font-weight:700;

    text-transform:uppercase;
}

.style9:hover{
    background:var(--nav-primary) !important;
    color:white !important;
}

/* LINKS */

a.pclassc{
    color:var(--nav-primary);
    transition:.15s;
}

a.pclassc:hover{
    color:rgb(146, 224, 255);
    text-shadow:none;
}

/* MIN/MAX TEMP AREA */

.minMax{
    width:52px;
    height:32px;

    border-radius:8px;

    border:1px solid #cfd8e3;

    text-align:center;

    font-size:11px;
}

/* ZOOM BUTTONS */

.buttonsml{
    width:110px !important;
    height:42px !important;
    font-size:12px !important;
}

/* MENU BUTTON */

.menubutton{
    height:60px;
    transition:transform .15s;
}

.menubutton:hover{
    transform:scale(1.05);
}

/* TABLE CLEANUP */

#navBody table{
    border-collapse:separate;
}

/* MOBILE */

@media (max-width:768px){

    #navBody{
        padding:8px;
    }

    .buttonregnav{
        max-width:none;
        width:100%;
    }

    .navbutton{
        min-height:50px;
        font-size:14px !important;
    }

    .style9{
        font-size:12px;
    }
}