.wind-arrow path, .wind-arrow circle {
    stroke:#000;
    stroke-width:1;
    vector-effect: non-scaling-stroke;
}
.wind-arrow-ie path, .wind-arrow-ie circle{
    stroke:#000;
    stroke-width:.3;
    vector-effect: non-scaling-stroke;
}
@-ms-viewport{
  width: device-width;
}

.wind-arrowpc path{
    stroke: #222;
    stroke-width:1.0;
    fill: none;
    fill-opacity:1;
    stroke-linecap:butt;
    stroke-linejoin:miter;
    stroke-opacity:1;
    vector-effect: non-scaling-stroke;
}

.wind-arrowpc-ie path{
    stroke: #222;
    stroke-width: 0.4;
    vector-effect: non-scaling-stroke;
}

/* .wind-arrowpc2 path{
    stroke: #fff;
    stroke-width:1.0;
    fill: none;
    fill-opacity:1;
    stroke-linecap:butt;
    stroke-linejoin:miter;
    stroke-opacity:1;
    vector-effect: non-scaling-stroke;
    xmix-blend-mode: exclusion;
    isolation: isolate;
}
.wind-arrowpc2-ie path{
    stroke: #ddd;
    stroke-width: 0.1;
    vector-effect: non-scaling-stroke;

} */


body {
-webkit-user-select: none;
}
html, body {
    color: #333;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: Arial, Helvetica, sans-serif;
}
td {
    vertical-align: top;
    white-space: normal;
}
.leaflet-container {
    background: #333;
}
#map { width: 100%; height: 100%;
    cursor:pointer;
    display: block;
    background: #ddd;
}

a {
    cursor: grab;
}
svg {

}

.mhourhide {
display: none;
}
.mhourshow {
display:block;
}
.wind-circle {
    font:10px arial;
}
text {
    fill: black;
    font-size: 80%;
    stroke:black;
    stroke-width: 0;
    text-anchor: middle;
}

.streamlinetext{
    fill: black;
    font-size: 80% ;
    text-anchor: middle;
    vertical-align: middle;
}
#streamline path {
    stroke:#111;
    fill: none;
}
path {
    stroke:#000;
}
.plotpaths {
    fill: none;
}
.plotpaths text {
    font-family: Arial, sans-serif;
    font-size: 100%;
}
.plotpaths g.ticks text {
    font-size: 90%;
}
.plotpaths text.title {
    font-size: 120%;
}
#clip {
    clip-path: url(#clip);
}
.zoom {
  cursor: pointer;
  fill: none;
  pointer-events: all;
}
circle {
    stroke: black;
    fill: red;
}
rect {
    stroke-width:0;
    stroke: white;
}
arc {
    stroke: black;
    stroke-width: .5;
}
.moval {
    stroke: white;
    fill: #FFEE58;
}
a.modelselected, a.xcparamselected, a.dayselected, .routepoint a.plotvarselected{
    background-color: #FFEE58;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.hournoteselected{
    background: #ddd;
}
.timecontrolsimple {
    white-space: nowrap;
    display: block;
    background-color: rgba(255, 255, 255, 1.0);
    border-radius: 3px;
    padding: 0px;
    margin-left: 2px;
    font-size: 120%;
}
.timecontroltable  {
    border:0;
    margin:0;
    padding:0;
    border-spacing: 0;
}
.timecontroltable td {
    padding: 0;
}
.timelabel {
    font-size: 70%;
    text-align: center;
    width: 100%;
    line-height:normal;
    background-color: rgba(200, 200, 200, 0.4);
}
.timecontrolfull {
    white-space: nowrap;
    background: white;
    padding-right: 4px;
    border-radius: 3px;
}
.timecontrolfull table {
    border-collapse: collapse;
}
.timecontrolfull th, .timecontrolfull td {
    padding: 1px;
    margin: 0px;

}
.timecontrolfull a.rday {
    font-size: 90%;
    padding: 2px;
    margin: 0px;
    text-decoration: none;
    color: #444;
}
.timecontrolfull a.rhour {
    font-size: 80%;
    padding: 2px;
    margin: 0px;
    border: 1px solid #cecece;
    border-radius: 2px;
    text-decoration: none;

}
.timecalsun {
    text-align: center;
    font-size: 80%;
    width: 75px;
}
#offset_control{
    position:absolute;
    vertical-align: middle;
    z-index: 999;
}
#offset_control table {
    border:1px solid #ddd;
    width:110px;
    background: white;
    border-collapse: collapse;
}
#offset_control table td {
    padding: 6px;
    border: 1px solid #999;
    font-size: 80%;
    text-align: center;
    background: #eee;
}
#offset_control a{
    color: #333;
    text-decoration: none;
    padding: 6px;
    display: block;
    border-radius: 3px;
}
.ms {
    font-size: 90%;
    padding-top: 10px;
}

 #xc_params  {

 }

.tcdate {
    font-size: 100%;
    font-weight: bold;
    float:left;
    text-align: right;
    white-space: nowrap;
}

.ticks {
  font: 10px sans-serif;
}

.tick {
    stroke: #333;
    stroke-width: 1px;
}

.track,
.track-inset,
.track-overlay {
  stroke-linecap: round;
}

.track {
  stroke: #000;
  stroke-opacity: 0.3;
  stroke-width: 10px;
}

.track-inset {
  stroke: #ddd;
  stroke-width: 8px;
}

.track-overlay {
  pointer-events: stroke;
  stroke-width: 50px;
  cursor: hand;
  z-index: 9999;
  visibility: visible;
}
.track-underlay {
  pointer-events: stroke;
  stroke-width: 50px;
  stroke: #fff;
}
.handle {
  fill: #fff;
  stroke: #000;
  stroke-opacity: 0.5;
  stroke-width: 1.25px;
}

.wind-type-selected, .wind-anim-selected, .wind-grey-selected, .tzoselected {
    background-color:#FFEE58;
}
.winda {
    z-index:999;
}
#wlspan {
    background-color: white;
    padding:4px;
    margin-top: 10px;
}

#maptop {
    top: 2px;
    z-index:999;
    margin: 0;
}
#windslider {
    margin: 0;
    margin-top: -8px;
    margin-left: 2px;
}
#mwindsel {
    margin: 0;
    margin-top: 4px;
}
#mapcolorbar {
    background: white;
    z-index:999;
    padding: 2px;
    margin-right: 2px;
    margin-top: 0px;
    border-radius: 3px;
}
.windlev{
    background-color: #eee;
    padding:2px;
    min-width: 80;
    font-size: 90%;
    border: 1px solid #ccc;
    border-radius: 3px;
    border-top: 0px;
}
.cbtitle {
    font-size: 80%;
}
.leaflet-top{
    top: 0px;
}
.sidebar-left {
    top: 0px;
}
#sidebar {
    z-index: 2001;
}

#sunbar {
    padding: 0;
    margin-top: -7px;
    height: 13px;
    width: 100%;
}
.paramCustom {
    float:right;
    margin-left:20px;
    display: inline;
}
.customSection {
    background:#e0e0e0;
    height: auto;
    border:1px solid #999;
    margin: 5px;
    margin-left: 10px;
    padding: 5px;

}
.customSection input {
    width: 40px;
}
.customSection i {
    float:right;
    padding:3px;
    margin-left: 5px;
}
.hiderangewidget {
    visibility: hidden;
    display: none;
    position:absolute;
    left: -600px;
    top: 0px;
}

.hint {
    font-size:70%;
    color:#444;

}
.fcast {
    background: #BBDEFB;
    color: #444;
}
a.fcast {
    color:#444;
}
.nofcast, .maskfcast{
    background: #eee;
}
a.nofcast, a.maskfcast {
    color: #bbb;
}
.hourselected, a.hourselected, .cselected, a.skewthhselected{
    background: #FFEE58;
    border:1px solid #ccc;
    border-radius: 2px;
    color: #444;
}
.hourhighlighted {
    background: #F9A825;
    border:1px solid #ccc;
    border-radius: 2px;
}
.routehourhighlighted {
    background: orange;
}
a.routehourhighlighted{
    color: white;
}
.tc-right {
    padding:5px;
    position:relative;
    bottom: 5px;
}
.tc-left {
    padding:5px;
}
.tzoffset {
    padding:2px;
    background: #eee;
}
.mbutton{
    font-size: 75%;
}
.tzsel{
    padding-right:10px;
}
a.tcdatem {
    color:#333;
}
.tcdatem{
    padding: 0px 5px 0px 5px;
    text-decoration: none;
    color: #333;
    position: relative;
    bottom:4px;
}
.rMenu {
    background-color : #FFEE58;
    border:1px solid #9E9E9E;
    border-radius: 3px;
    text-align:center;
    font-size: 80%;
    padding: 6px;
    white-space: nowrap;
    text-decoration: none;
    margin: 0px 5px 10px 5px;
    position: relative;
    bottom:4px;
}
a.rMenu{
    color: #333;
}
.hspace {
    height: 20px;
    width: 15px;
    display:inline-block;
}
.second-label {
    font-size: 12px;
    fill: #333;
}
.sun-label {
    stroke: #000;
    fill: #000;
}
.sun-slabel{
    font-size: 12px;
}
.clockover {
    position:absolute;
    left:20px;
    top: 30px;
}
#mapsunclock{
    z-index: 99999;
    padding:0;
    margin: 2px;
}
.sunclockhour {
    fill: red;
    stroke-width: 0;
}
.sunclockfcast{
    fill: blue;
    stroke-width: 0;
}
.night {
    fill: #999999;
    stroke-width: 0;
}
.day {
    fill: #e0e0e0;
    stroke-width: 0;
}
.dawndusk {
    fill: #80738c;
    stroke-width: 0;
}
.sun {
    fill: #ffd633;
    stroke-width: 1;
    stroke: #999999;
}
.sunbase {
    fill: #fcfcfc;
    stroke: #666;
    stroke-width: 0;
}
.hour-bg {
    stroke: #000;
}
#mapinfobar {
    color: #333;
    width: auto;
    z-index: 9998;
    text-align: center;
    font-size: 100%;
    border-radius: 2px;
    margin: 0px;
    margin-bottom: 2px;
}

.mapinfo {
    width: 100%;
    height: 20px;
    background: white;
    border-top: 1px solid #999;
    text-align: center;
    font-size: 120%;
    padding: 3px;
}
.hsidebar-tabs li {
    margin-top: -8px;
}
.xcparamheader {
    margin-top: 15px;
    background: #fff;
    color: #555;
    font-weight: bolder;
}
.xcps {
    border-bottom:1px solid #999;
}
.xcparam, .unithead {
    font-weight: normal;
    font-size: 90%;
    padding: 1px;
    margin-right: 0px;
    border-bottom: 1px solid #eee;
    display: block;
    width:100%;
    background: white;
    color: #555;
}
.xcparam a {
    display:block;
    padding: 1px 12px;
}


.tooltip {
    position: absolute;
    text-align: center;
    width: 200px;
    height: auto;
    padding: 10px;
    font-size: 80%;
    background: #fff;
    border: 2px solid #444;
    border-radius: 8px;
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
}
.tooltip2 {
    position: absolute;
    text-align: center;
    width: 120px;
    height: auto;
    padding: 10px;
    background: #fff;
    border: 1px solid #444;
    border-radius: 8px;
    pointer-events: none;
    z-index: 99999;
    opacity: 0;
    font-size: 80%;
}
.hov {
    background: #e0e0e0;
    border-radius: 3px;
}
#modifiedlayer{
    background:orange;
    border:1px solid #666;
    padding: 3px;
    left: 50%;
    bottom: 18px;
}
.modlayer {
    visibility: hidden;
}
.nsel {
    text-align: center;
    font-size: 70%;
}
.nsel span{
    padding:3px;
    margin-right: 3px;
    border: 1px solid #999;
    border-radius: 2px;
}
.cpsub{
    background:#999;
    padding: 1px;
    border-bottom: 1px solid #fff;
    color:white;
}
.poptable{
    width:auto;
    background: white;
    border-collapse: collapse;
}
.poptable a{
    text-decoration: none;
}

.poptable td:first-child {
    background: #efefef;
}
.poptable a {
    color: #1c4fa6;
}
.poptable td {
    padding: 3px;
    border: 1px solid #ddd;
    font-size: 90%;
    background: #fcfcfc;
    text-align: left;
    white-space: nowrap;
}
.pointinfotable td {
    font-size: 100%;
    padding: 4px 10px;
}
.ptsel {
    background: #ffffdd;
    font-weight: bold;
}
#plotcontainer{
    width: 100%;
}
#plotcontaineroutter {
    z-index: 9999;
    visibility: hidden;
    display: none;
    background: white;
    margin: 0;
    padding: 0px;
    position: absolute;
    width:100%;
}
#plotcontaineroutter.normal {
    margin-bottom: 0px;
}
#plotcontaineroutter.full {
    margin-bottom: 0px;
    z-index: 9999;
    position:absolute;
    left: 0px;
    bottom: 0px;
}
#plotcontaineroutter.mobile {
    margin-bottom: 42px;
}

#ndayplot, #routeplot, #pointplot, #skewtplot {
    position:relative;
    height: 100%;
    width: 100%;
}
#pointplot{
    overflow: scroll;
}
#skewtprocontainer, #detailprocontainer {
    float:right;
    margin: 0;
    border-left: 4px solid #444;
    padding: 0px;
    width: 29%;
    position: relative;
}
#skewtprocontainer {
    overflow: auto;
}
.inline {
    display: inline-block;
}
.routetracer {
    z-index: 999;
}
.timegrp {
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 2px;
    margin-right: 5px;
}
.routeopen {
    position: absolute;
    top: 0px;
    left: 0px;
}
#routeinfo {
    visibility: hidden;
    display: none;
    width: 220px;
    height:100%;
    float:left;
    background: white;
    border-right: 4px solid #444;
    font-size: 90%;
    position:relative;
    padding: 0px;
    overflow-y: scroll;
    margin-right: 10px;
}
@media (min-width: 600px) {
    #routeinfo {
        display:block;
        visibility: visible;
    }
}
#routeinfo th {
    font-size: 80%;
}
#routeinfostats {
    padding: 4px;
    padding-top: 10px;
    height: auto;
    position: relative;
}
#plotoptions {
    float:left;
    width: 40px;
    background: white;
    font-size: 90%;
    height: auto;
    xdisplay: block;
    position: relative;
    margin: 0;
    padding: 1px;
    border-radius: 5px;
    margin-top: 0px;
    text-align: center;
}
#plotoptions a {
    position:relative;
    height: 30px;
    width: 30px;
    line-height: 30px;
    display:inline-block;
    text-decoration: none;
    border-radius: 5px;
    border: 1px solid #ccc;
    color: #333;
    vertical-align: middle;
}

.plotoptionselected {
    background-color: #FFEE58;
}
#plotoptionbarb {
    display: none;
    margin-left:4px;
    margin-top:3px;
}
#plotoptionarrow {
    display: block;
    margin-left:6px;
    margin-top:10px;
}
#plotoptions div {
    padding: 2px;
    xpadding-top: 4px;
    xpadding-bottom: 4px;
    vertical-align: middle;
}

.axisday {
    text-anchor: start;
}
.tick line{
    opacity: 0.2;
    stroke-dasharray: 3,2;
  }
  .pcdrect{
      stroke: none;
      fill: #fff;
      opacity: 0;
  }
  .pcdrecth, .pchoursel{
      stroke: #333;
      stroke-width: 1;
      opacity: 1;
      fill: #fff;
  }
  .markbar {
      stroke: #444;
      stroke-width: 1;
      opacity: 1;
      fill: #000;
  }
  .pchoursel {
      fill: red;
      fill-opacity: .5;
    }
  #ndayplotcb, #routeplotcb {
      height: 300px;
      width: auto;
      float:right;
      padding-right: 2px;
      margin-top: 30px;
      display: none;
      visibility: hidden;
  }
  #ndayplotinner, #routeplotinner, #pointplotinner {
      width:auto;
      height: 100%;
  }
  #skewtplotinner {
      width: 100%;
      height: 100%;
  }
#routeplotsvgdiv, #ndayplotsvgdiv, #pointplotsvgdiv, #skewtplotsvgdiv {
    font-size: 80%;
}
#pointplotsvgdiv {
    text-align: center;
    font-size: 90%;
}
#pointplotsvgdiv table {
    margin-right: auto;
    margin-left: auto;
}
.showplotspopup {
    position: absolute;
    bottom: 50px;
    left: 300px;
    height: auto;
    width:auto;
    background-color: #ebebeb;
    padding: 10px;
    border: 1px solid #aaa;
    border-radius: 5px;
    z-index: 99999;
}
  .loading {
      padding: 10px;
      color: #666;
      font-weight: bold;
      font-size: 120%;
      text-align: center;
      vertical-align: middle;
  }
  .closepc {
      float:right;
  }
  .route-marker {background:red;color:white;font-weight:bold;margin:8px;text-align:center; border:1px solid #000}
  .route-svg-marker text{
      stroke: #fff;
      stroke-width: 0px;
      fill: #fff;
      font-size: 100%;
  }
  .point-marker {
      background: transparent;
      color: red;
  }
  .point-marker i{
      position:absolute;
      left:0px;
      top:0px;
      bottom:0;
      right:0;
      margin: 0 auto;
  }
  .routenode {
      fill: red;
      stroke: #000;
      stroke-width:1;
  }
  .routenodet {
      fill: white;
      text-anchor: middle;
      font-size: 80%
  }
  .flatpickr-calendar {
      z-index: 9999;
  }
  .xxmlabel {
      position: absolute;
      color: red;
      padding:2px;
      margin-top:-42px;
      background: white;
      opacity: .8;
      z-index: 999;
      display: block;
  }
  table.tctable tr:hover {
      background-color: #ffff66;
  }
.mdisplay ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: none;
}

.mdisplay li {
    float: left;
}

.mdisplay li a {
    display: block;
    min-width:40px;
    color: #333;
    text-align: center;
    line-height: 30px;
    vertical-align: middle;
    padding: 0px 4px;
    text-decoration: none;
    background-color: #efefef;
    margin: 0px 2px;
    border: 1px solid #ccc;
    border-radius: 3px;
}
.mdisplay li a.modelselected, .mdisplay li a.plotselected{
    background: #FFEE58;
}

#windbar {
    margin: 0;
    margin-left: 2px;
    margin-top: 5px;
    font-size: 100%;
    min-width: 45px;
}
#modeloptions {
    max-width: 300px;
    margin-left: 0;
    margin-right: 0;
    font-size: 80%;
}
#modeloptions a {
    text-decoration: none;
    color: #666;
}
#modeloptions div {
    margin:10px;
    padding: 0px;
    vertical-align: middle;
}
.modelname {
    width:65px;
    float: left;
    background: #4173c9;
    color: #ffffff;
    border: 1px solid #333;
    border-radius: 3px;
    font-size: 100%;
    text-align: center;
}
.modeldetlab {
    font-weight: bold;
    font-size: 90%;
    color: #333;
}
#modeloptions div.outofbounds div {
    background-color: #aaa;
    color: #fff;
}
#modeloptions div.outofbounds a{
    pointer-events: none;
    color: #999;
}
ul li a.outofbounds {
    background-color: #eee;
    color: #ccc;
    display: none;
    visibility: hidden;
}
ul li a.outofbounds:hover {
    background: none;
}

#modelcontrol {
    margin: 0;
    margin-left: 2px;
    margin-top: 5px;
    font-size: 100%;
    min-width: 45px;
}
.hdisplay{
    background: transparent;
    padding: 0px;
}
.hdisplay a {
    color: #333;
}
.hdisplay ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: white;
    border-radius: 3px;
}

.hdisplay li a{
    position:relative;
    height: 45px;
    width: 50px;
    display:inline-block;
    text-decoration: none;
    border-radius: 3px;
}

.hdisplay li  {
    margin: 2px;
    float: left;
    display:inline-block;
    text-align: center;
    line-height: 45px;
    height: 45px;
    text-decoration: none;

}
.hdisplay li a.sel{
    background-color: #FFEE58;
    border-radius: 3px;
}
.pophdisplay ul{
    padding: 0;
    margin: 0;
}
.pophdisplay li{
    line-height: 25px;
    height: 25px;
    width:auto;
    display: inline-grid;
}
.pophdisplay li a{
    width: 62px;
    cursor: pointer;
    font-size: 85%;
    border-radius: 2px;
    color: #333;
    padding: 2px;
    white-space: nowrap;
    margin: 2px;
}
.glass, .minibtn, .modelselected, .wind-type-selected, .xclose, .plotslide a{
	/* background styles */
	position: relative;
	display: inline-block;
	/* text styles */
	text-decoration: none;
	font-weight: normal;
}
.glass:after, .minibtn:after, .modelselected:after, .wind-type-selected:after, .xclose:after, .plotslide a:after{
	content: '';
	position: absolute;
	top: -1px;
	left: 0px;
	width: calc(100% - 0px);
	height: 50%;
	background: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.1));
    border-radius: 5px;
}
.glass-badge {
    background: -webkit-linear-gradient(105deg, #969799, #969799 49%, #b1b1b3 51%, #b1b1b3) #969799;
    background: -moz-linear-gradient(105deg, #969799, #969799 49%, #b1b1b3 51%, #b1b1b3) #969799;
    background: -o-linear-gradient(105deg, #969799, #969799 49%, #b1b1b3 51%, #b1b1b3) #969799;
    background: -ms-linear-gradient(105deg, #969799, #969799 49%, #b1b1b3 51%, #b1b1b3) #969799;
    background: linear-gradient(-15deg, #969799, #969799 49%, #b1b1b3 51%, #b1b1b3) #969799;
    color: #fff;
    height: 100%;
    text-shadow: 0 0 2px rgba(0,0,0,0.2);
    width: 100%;
}
a.hcontrolon, #windmode, #modelmode {
    background-color: #4173c9;
    color: white;
}
li.windhide, li.modelhide {
    position:absolute;
    display: none;
    visibility: hidden;
}
.reso {
    font-size: 70%;
    padding: 1px;
    line-height: 10px;
    margin-top: -8px;
}
.resom{
    margin-top: -16px;
}
.anolabel {
    font-size: 90%;
    padding: 2px;
    line-height: 10px;
    height: 10px;
    margin-top: 0px;
    position: absolute;
    left: 0;
    right: 0;
    background-color: rgba(200,200,200,.4);
}
.daylabel {
    font-size: 90%;
    padding: 2px;
    line-height: 10px;
    height: 10px;
    margin-top: -40px;
    position: absolute;
    left: 0;
    right: 0;
}
.fa-p5x {
    font-size: .5em;
  }
.fa-1x {
    font-size: 1em;
  }
  .fa-2x {
    font-size: 1.5em;
  }
  .fa-0x {
    font-size: 1.25em;
    padding: 0px;
  }
  .fa-3x {
    font-size: 2em;
  }
  .fa-4x {
    font-size: 4em;
  }
  .fa-5x {
    font-size: 5em;
  }
  .rotate-90::before {
    -webkit-transform: rotate(120deg);
   -moz-transform: rotate(120deg);
   -ms-transform: rotate(120deg);
   -o-transform: rotate(120deg);
   transform: rotate(120deg);
  }
#cbtoggle {
    position:relative;
    text-align: center;
}
#cbtoggle a {
    color: #333;
}
#plottabs{
    border-bottom: 1px solid #333;
    display: none;
}
.plotactions{
    font-size: 85%;
    padding-bottom: 8px;
    padding-top: 4px;
}
.clearsave {
    float:right;
    margin-right: 50px;
}
.resizepane {
    float:right;
    margin-right: 35px;
    margin-top: 0px;
}
.resizepane a div {
    font-weight: bold;
    line-height: 1.5;
    color: #333;
    height: 23px;
}
.xclose {
    padding: 0px;
    display: inline-block;
    position:absolute;
    right: 0px;
    top: 0px;
    bottom:auto;
    left: auto;
    text-decoration: none;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 3px;
    background: #cfcfcf;
    margin-top: 4px;
}
.xclose a {
    line-height: 1.25;
    color: #444;
}
.pctabresize {
    float:right;
    margin-right: 34px;
}
#pctabclose.closed{
    position: absolute;
    left: 2px;
    bottom:0px;
    top:auto;
    height: 40px;
    width: 40px;
    line-height: 40px;
    background: #FFEE58;
    border: 3px solid #fff;
    display: none:block;
    visibility: hidden;
}
.maponoff {
    height: 30px;
    width: 30px;
    line-height: 30px;
    background-color: white;
    padding-top: 0px;
    vertical-align: bottom;
    text-align: center;
    display:block;
    border-radius: 3px;
    z-index: 997;
    xfloat:right;
    margin-right:14px;
    xmargin-bottom: 5px;
}
.maponoffm{
    position:absolute;
    right: 2px;
    bottom: 52px;
    margin: 0;
}
.moo {
    background-color: #FFEE58;
}
.plothidden {
    display:none;
    visibility:hidden;
    left: -600px;
}
.plotslide {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    width: auto;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    padding-bottom: 4px
}
.plotslide::-webkit-scrollbar {
    display: none;
}
.plotslidey {
    overflow-y: scroll;
    overflow-x: hidden;
}
.plotslidey::-webkit-scrollbar {
    display: block;
}
#ndayplottab, #routeplottab, #pointplottab, #skewtplottab {
    padding-right:15px;
}
#drag {
    position: absolute;
    top: 60vh;
    top: calc(var(--vh, 1vh) * 60 - 5px);
    left: 0px;
    bottom: 0px;
    height: 4px;
    width: 100%;
    cursor: ns-resize;
    background: #444;
    z-index: 99998;
    margin: 0;
    padding: 0;
}

.mobilehint{
    position:absolute;
    left:0px;
    bottom:0px;
}
.plotempty {
    padding: 20px;
    font-size: 110%;
}
.plotcontrols {
    position:absolute;
    bottom: -50px;
    left: 1px;
    right: 1px;
    white-space: nowrap;
    xz-index: 9999;
    overflow: hidden ;
    box-sizing: border-box;
    font-size: 80%;
}
@media (min-width: 600px) {
    .plotcontrols {
        left: 220px;
    }
}
.slidehintleft {
    float:left;
}
.slidehintright {
    float:right;
}
.routepoint a{
    color: #333;
    padding: 4px 8px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 90%;
    margin: 0 1px;
    background: #e0e0e0;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.skewtthumb {
    position:relative;
    background: #fff;
    border: 0px solid #999;
}

#skewt .axis path,
#skewt .axis line {
  fill: none;
  stroke: #000;
  stroke-width: 1px;
  shape-rendering: crispEdges;
}
#skewt .x.axis path {  }
#skewt .y.axis path {  }
#skewt .axis { fill: #000; }
#skewt .y.axis text { font-size: 9px; text-anchor: end;}
#skewt .y.axis.hght { font-size: 9px; fill: red;}
#skewt .x.axis { font-size: 13px; text-anchor: middle;}
#skewt .y.axis.ticks text { display: none; }

.temp {
  fill: none;
  stroke: red;
  stroke-width: 2px;
}
.dwpt {
  fill: none;
  stroke: green;
  stroke-width: 2px;
}
.member   { stroke-width: 1.5px; opacity: 0.4;}
.mean     { stroke-width: 2.5px; }
.hodoline { stroke: #aaa; fill: none; opacity: 0.5; }
.hodoline.mean { stroke: #000; opacity: 1.0; stroke-width: 3.5px;}
/*.hododot {  stroke: #000; opacity: 0.8; }
.hododot.hgt0 { fill: gray;    }
.hododot.hgt1 { fill: #225ea8; }
.hododot.hgt3 { fill: #41b6c4; }
.hododot.hgt6 { fill: #a1dab4; }
.hododot.hgt9 { fill: #ffffcc; }*/

.gridline, .tempzero {
   stroke: #dfdfdf;
   stroke-width: 0.75px;
   fill: none;
}
.tempzero { stroke: #aaa; stroke-width: 1.25px; }
.bl {
    stroke: blue;
}
.barline { stroke: #000; stroke-width: 0.5px; }
.rectline { fill: #aaa; opacity: 0.5;}
.rectline2 { file: #000; }
.index { font-size: 13px; }
.header { font-weight: bold; font-size: 11px;}
.hodolabels { font-size: 9px; opacity: 0.5;}
.lcltext { font-size: 11px; }
.key { font-size: 10px; }

.windbarb { stroke: #000; stroke-width: 0.75px; fill: none; }
.flag { fill: #000; }

.overlay {
  fill: none;
  pointer-events: all;
}
#hodobox svg{
    vertical-align: top;
}

.focus.tmpc circle { fill: red;   stroke: none; }
.focus.dwpc circle { fill: green; stroke: none; }
.focus text { font-size: 12px; text-anchor: start}
.focus.tmpc text { text-anchor: start}
.focus.dwpc text { text-anchor: end}
#skewtskewtplotsvgdiv div {float:left;}
#skewtcontrols {float:left;}
#skewtcontrols div {
    display:block;
    vertical-align: top;
}
.tablabel {
    display: none;
}
@media (min-width: 480px) {
    .tablabel {
        display:inline;
    }
}
#mobilerotate {
    position: absolute;
    bottom: 0px;
    left: 5px;
    display: none;
}
@media (max-width: 420px) {
    #mobilerotate {
        width: 60px;
        height: 60px;
        background: url(/static/images/rotate.png) no-repeat center center;
        background-size: contain;
        z-index: 99999;
        opacity: .8;
        z-index: 99999;
        background-color: #fff;
    }
}

.tablabelhide {
    display: none;
}

.leaflet-popup-content {
    margin: 5px;
}
.skewthh {
    border:1px solid #ccc;
    border-radius: 2px;
    padding: 1px;
    margin: 1px;
    background: #e0e0e0;
}
a.skewthh {
    text-decoration: none;
    color: #666;
}
#usercontrol{
    background: white;
    color: #444;
    border-radius: 3px;
    padding: 2px;
    font-size: 80%;
    font-weight: bold;
    margin-right: 2px;
    margin-top: 2px;
    margin-bottom:3px;
    width: auto;
    height: 32px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}
@media (max-width: 325px) {
    #usercontrol {
        margin-top: 40px;
    }
}
#userpanel {
    background: white;
    padding: 16px;
    font-size: 90%;
    top:36px;
    right:0px;
    margin-right: 0px;
    margin-top: 0px;
    margin-bottom:3px;
    width: 150px;
    position: absolute;
    height: 135px;
    z-index: 9999;
    text-align: center;
    border-radius: 3px;
}
@media (min-width: 480px) {
    #userpanel { width: 150px; }
}
#userpanel div {
    margin-bottom: 10px;
}

.minibtn, a.minibtn{
    font-size: 85%;
    text-decoration: none;
    white-space: nowrap;
    border: 0px solid #999;
    padding: 2px 10px;
    line-height: 1.25;
    border-radius: 5px;
    color: white;
    cursor: pointer;
}
.btnred {
    background: #D32F2F;
}
.btngrey {
    background: #757575;
}
.btnlightgrey {
    background: #cfcfcf;
}
.btngreen {
    background: #50a550;
}
.btnblue {
    background: #4173c9;
}
.btnyellow{
    background: #FFEE58;
}
.btnsmall, a.btnsmall{
    font-size: 70%;
    padding: 3px 3px;
}
.unithead {
    font-size: 100%;
    margin-top: 10px;
}
.sidebar-header{
    text-shadow: 1px 1px 1px rgba(0,0,0,.5);
}
h1.sidebar-header a {
    color: white;
    text-decoration: none;
}
.hsidebar-tabs a{
    font-size: 160%;
}
.hsidebar-tabs ul {
    text-align: center;
}
#xc_profiles ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#xc_profiles li.uprofiles {
    padding: 8px 4px;
    border:1px solid #ddd;
    border-left: 7px solid #ccc;
    border-radius: 3px;
    background: #F5F5F5;
    font-size: 90%;
    margin-bottom: 2px;
    overflow: hidden;
}
.feature-title {
    text-shadow: 1px 1px 1px rgba(255,255,255,1);
}
div.title {
    font-weight: bold;
    color: #444;
}
div.desc {
    font-size: 90%;
}
div.param {
    color:#777;
    text-decoration: none;
    font-size: 85%;
    padding-left: 6px;
}
#xc_profiles li.uprofiles.prosel {
    background: #FFFDE7;
    border-left: 7px solid #FFEE58;
}
#xc_profiles li.uprofiles div.plotitem{
    color:#444;
    font-size: 95%;
    padding:2px 6px;
    cursor: pointer;
}

span.drag-handle {
  background: #e0e0e0;
  float: left;
  margin: -11px 0px -8px -4px;
  width: 24px;
  xheight: 100%;
  display: inline-block;
  overflow: hidden;
  line-height: 5px;
  padding: 0px 0px;
  cursor: move;
  vertical-align: middle;
  font-size: 80%;
  letter-spacing: 2px;
  color: #cccccc;
  text-shadow: 1px 0 1px black;
}
span.drag-handle::after {
  content: '.... .... .... .... .... .... .... .... .... .... .... .... .... .... .... .... .... ....';
}
.plotitemsel {
    color:white;
}
.ppcontrols{
    margin: 4px;
}
.savedplotscontrols {
    border-bottom: 1px solid #e0e0e0;
}
.savedplots {
    background: transparent;
    padding: 6px 1px;
}
.initmessage, .initmessage2 {
    position:absolute;
    left: 0;
    top: 0;
    width: 230px;
    z-index: 99999;
}
.msg{
    margin: 10px;
    padding: 30px;
    border: 1px solid #ccc;
    background: #e0e0e0;
    color: #333;
    border-radius: 5px;
}
.msgmini{
    margin: 5px;
    padding: 5px;
    border: 1px solid #ccc;
    background: #FFF9C4;
    color: #555;
    border-radius: 5px;
    font-size: 80%;
}

.closemsg {
    color: #999;
    padding-top:20px;
    text-decoration: none;
}
#profile_controls, #profile_form, #profile_update, #plot_save, .profile_controls_edit, #feedback{
    padding: 10px;
    margin: 3px;
}
.profile_controls_edit {

}
#profile_form, #profile_update, #plot_save ,#feedback{
    border:1px solid #999;
    background: #fff;
    border-radius: 3px;
}
#feedback {
    width: auto;
}
#profile_form span {
    font-size: 85%;
    color:#666;
}
#pnewmsg {
    color: red;
}
.plotclose {
    float:right;
    position: relative;
    z-index: 9999;
}
#resetplot {
    position:absolute;
    top: 0px;
    left: 45px;
    font-size: 100%;
    width:auto;
    white-space: nowrap;
}

.blackout {
    background-color:#000;
    opacity:.85;
    filter:alpha(opacity=85);
    height:100%;
    width:100%;
    position:fixed;
    top:0;
    left:0;
    z-index:99998;
    display:none;
    cursor:pointer;
}
.blackoutmsgbox{
    height: auto;
    width: 320px;
    padding: 5px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index:99999;
    display:none;
}
.msginner {
    background-color: #e0e0e0;
    padding: 5px;
    box-sizing: border-box;
    border-radius: 5px;
}
.inputrequired {
    border:3px solid #D84315;
}
.ppdel {
    padding: 2px;
    margin-left: 5px;
}
.savedmessage{
    z-index:99999;
    display:none;
    height: 35px;
    width: 100px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background: #fff;
    border-radius: 5px;
    border:3px solid #01579B;
    padding:20px;
    font-size: 90%;
    color:#666;
    font-weight: bold;
}
.unitdesc{
    font-size: 80%;
    color: #444;
    padding: 4px;
}
.oplevel {
    padding: 0px;
    border: 1px solid #000;
    border-radius: 2px;
    height: 12px;
    width: 12px;
    margin-right: 3px;
    display: inline-block;
    vertical-align: middle;
    background: #444;
}
.oplevelsel{
    background: #FFEE58;
    opacity: 1;
}
.phead {
    background: #4173c9;
    color: white;
    padding: 3px 5px;
    margin-bottom: 5px;
}
#runtimes_table{
    position: absolute;
    display:inline-block;
    background: white;
    border: 1px solid #aaa;
    border-radius: 4px;
    margin:auto;
    width: fit-content;
    height: 60%;
    z-index: 99999;
    font-size: 80%;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    padding: 5px;
}
a.runtimetab {
    margin: 2px;
    margin-top: 20px;
    padding: 5px;
    font-size: 80%;
    border: 1px solid #ccc;
    border-radius: 5px;
    color: #333;
    text-decoration: none;
    background-color: #ebebeb;
}
a.runtimetabactive {
    background-color: #999;
    color: #eee;
}
.runtimeinner{
    position: relative;
    overflow: auto;
    padding: 0px;
    border: 1px solid #999;
    height: 80%;
    width: 100%;
    margin-top: 5px;
}
.localcenter {
    background: white;
    height: 80%;
    width: 320px;
    padding: 10px;
    border: 1px solid #999;
    border-radius: 3px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index:99999;
}
.leaflet-gl-layer {
    z-index: 9999;
}

.warn {
  color: #E9AD00;
}
#sk {
    display: inline-flex;
    margin:auto;
    left:0;
    right:0;
    width: auto;
}

#xcscore {
    font-weight: bold;
    font-size: 110%;
    text-align: center;
}
#prodetails, .skewtprodetails{
    font-size: 80%;
    overflow: auto;
    height: 85%;
    margin-left: 30px;
}
#prodetails table {
    width: 85%;
}
#prodetails tbody tr td:first-child {
  width: 50%;
  min-width: 50%;
  max-width: 50%;
}
#prodetails td {
    width: 100%
}
.prodetailhead {
    font-size: 90%;
    font-weight: bold;
    padding: 2px;
}
.bb {
    text-align: center;
}
h3,.hb {
    margin: 0;
    background: #e0e0e0;
    padding: 10px;
}

.fld {
    padding: 8px;
}
.label, .label2{
    font-weight: bold;
    padding: 8px;
    text-align: right;
    font-size: 85%;
    color: #444;
}
.label2 {
    text-align: left;
}
#loginbox input[type="text"], #loginbox input[type="password"] {
    display: inline-block;
    min-height: 24px;
    padding: 6px 9px;
    font-size: 100%;
    line-height: 20px;
    color: #555;
    vertical-align: middle;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
}
#loginbox {
    font-size: 95%;
}
#info a {
    text-decoration: none;
    color: #444;
}
#info ul{
    margin-left: 0px;
    padding: 0px;
}
#info ul li {
    display: inline-block;
    width: 100%;
}
#info ul li a{
    text-decoration: none;
    color: #444;
    padding: 5px;
    background: #ebebeb;
    border: 1px solid #ccc;
    border-radius: 5px;
    display: block;
    margin: 5px;
    font-size: 85%;
}
.routepoint a.inactiveplot {
    background: #efefef;
    color: #999;
    cursor: default;
    pointer-events: none;
}
#gatewayerror{
    background-color: #ffffee;
    padding: 10px;
    margin: auto;
    box-sizing: border-box;
    border-radius: 5px;
    border: 1px solid #ccc;
    width: 300px;

    right:0;

    bottom:0;
    line-height: 1.5em;
    height: 120px;
    font-size: 85%;
    z-index: 99999;
    position: absolute;
    text-align: center;
}
#savemain{
    position:absolute;
    right: 36px;
    top: 2px;
    z-index: 800;
}
.skewtmark {
    color: #999;
    font-size: 90%;
}
.hidden {
    display: none;
}

#base_layer{
    background: #fff;
    padding:14px;
    padding-bottom: 0;
}
.oplabel {
    font-size: 80%;
    color: #666;
    padding-top: 5px;
    padding-left: 20px;
}
.leaflet-left .leaflet-control-basemapsSwitcher {
    margin-left: 0px;
}
.leaflet-bottom .leaflet-control-basemapsSwitcher {
    margin-bottom: 0px;
}
.leaflet-control-basemapsSwitcher, #sun_incidence{
    height: auto;
    width: auto;
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
}

.leaflet-control-basemapsSwitcher:hover{
    cursor: pointer;
}

.basemapImg{
    box-shadow: 2px 2px 5px rgb(0 0 0 / 65%);
    background-color: #fff;
    margin:2px;
    padding:2px;
    border-radius: 3px 3px;
}

.basemapImg div{
    background-size: 80px 80px;
    width: 80px;
    height: 80px;
    border-radius: 3px 3px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.basesel {
    display: flex;
    justify-content: left;
}
.basesel div div {
    background-size: 200px 200px;
    width: 200px;
    height: 40px;
    border-radius: 3px 3px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 80%;
}

.basesel::before {
    content: "Base map";
    position: absolute;
    margin-left: 0px;
    margin-top: -14px;
    font-size: 80%;
    color: #666;
}
.basemapImg div .name{
    width:100%;
    height:auto;
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 0;
    color:black;
    display: flex;
    align-items: center;
    font-weight: 400;
    padding:1px;
    font-size: 90%;
}

.basemapImg div .check{
    width:auto;
    height:auto;
    border-radius: 0;
    display: flex;
    align-items: flex-end;
    font-weight: 500;
    padding:1px;
    content:''
}

.activeMap::before{
    color:white;
    content: '✔';
    width: 14px;
    height: 14px;
    background-color: #387B23;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#sun_base {
    background-image: url('/static/images/basetileicons/sun_angle_base.jpg');
    background-size: 200px 200px;
    background-color: #fff;
    width: 200px;
    height: 40px;
    border-radius: 3px 3px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 80%;
}
#sun_incidence {
    text-align: center;
}
#sun_base::before {
    content: "Sun Incidence Angle";
    position: absolute;
    margin-left: 0px;
    margin-top: -14px;
    font-size: 100%;
    color: #666;
}
#sun_base img {
    border: 1px solid #999;
    border-radius: 3px;
}
#sun_hours div{
    font-size: 90%;
    margin-bottom: 1px;
    background: #fff;
    border-radius: 3px;
    border: 1px solid #999;
    padding:2px;
}
#sun_hours {
    position:absolute;
    left: 2px;
}
#sun_control {
    white-space:normal;
    width: 220px;
    padding: 10px;
}
#sun_msg {
    padding:10px;
    border:1px solid #666;
    border-radius: 3px;
    background: #eee;
    position: relative;
}
#closemapother {
    text-align: center;
    background: #ddd;
    border-radius: 3px;
    border: 1px solid #999;
    margin: 0px 5px;
    padding: 4px;
}