/* Local Styles for JSTAR Mapper adapted from OCView */

body, html { 
	width:100%; 
	height:100%; 
	padding: 0; 
	margin: 0;
}



label {
	font-weight: normal;
	color: #666;
	font-size: 0.9em;
}
 
label.op  { /* only for opacity label */
	margin-top: 2px;
	margin-bottom: 2px !important;
	clear: both !important;
	display: block;
}

button {  /* only for date control buttons */
  padding-top: 1px !important;
  font-size: 1.3em;
  padding: 0px;
  margin: 0px;
}

input {  /* all the form fields */
	text-align: center;
	font-size: 1em;
	font-weight: normal;
	margin: auto;
	border: 1px solid #a1a1a1;
	padding: 0px;
	line-height: 25px;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	background-color: #fff;
}

select {  /* all select boxes styled same */
	font-size: 0.9em; 
	margin: 0px 4px 4px 0px;
	float: left;
}

div.panel-collapse {
	clear: both !important;
	margin-top: 5px !important;
}

div.panel-collapse div.checkbox:nth-child(1) {
	margin-top: 0px;
}

.ol-mouse-position {
	top: 0.3em;
	bottom: auto;
	font-size: 1.1em;
	font-weight: normal;
	border-radius: 3px;
	background-color: rgba(255,255,255,1);
	text-align: left;
	width: 15em;
}

.ol-scale-line {
	background: #95b9e6;
	background: rgba(0,60,136,0.3);
	border-radius: 4px;
	bottom: 8px;
	left: 8px;
	padding: 2px;
	position: absolute;
}

.ol-scale-line-inner {
	border: 2px solid #eee;
	border-top: none;
	color: #eee;
	font-size: 1em;
	font-weight: bold;
	text-align: center;
	margin: 1px;
	will-change: contents, width;
}

.ol-attribution ul {
	font-size: 0.8em;
}

.ol-attribution li {
	line-height: 1.2em;
}

.ol-attribution.ol-uncollapsible {
	bottom: 0px;
	height: 1.2em;
} 

.gutter-0.row {
	margin-right: 0;
	margin-left: 0;
}

.gutter-0 > [class^="col-"], .gutter-0 > [class^=" col-"] {
  padding-right: 0;
  padding-left: 0;
}

div#map {
    position:relative;
	height: 100vh;
	/*  height: calc(100vh - 65px); */
	margin-left: 230px;
	background: black;
        /*text-align:center;*/
}

div#leftNav {
	background-color: #efefef;
      	width: 230px;
        position: fixed;
        z-index: 1;
	margin: 0px;
	padding: 0px;
	height: 100vh;
	min-height: 500px !important; /* so that scrollbar appears at shorter heights */
	float: left;
        top:0;
        left:0;
        overflow-x: hidden; /* Disable horizontal scroll */
        transition: 0.5s; /* 0.5 second transition effect to slide in the sidebar */
}

.logopic {
	height: 80px;
	background-color: rgba(255,255,255,0.0);
	position: absolute;
	top: 20px;
	left: 50px;
}

.granuleindicator {
	position:absolute;
	right: 2px;
	top: 50px;
	z-index:10006;
	
	position:absolute;
    display:inline-block;
    /*margin:auto;*/
    color: white;
    width:fit-content;
    height:fit-content;
    font-size:1.2em;
    background-color: rgba(0, 60, 136, .5);
    border-radius:4px;
    border:1.5px solid white;
    text-align:center;
    padding:5px;
}

.prod_name {
	font-size: 1.2em;
	font-weight: bold;
	color: #800000;
	background-color:rgba(255,255,255,0.6);
	position:absolute;
	top: 30px;
	right: 22px;
}

.lookup {  /* what is this? Now a dot positioned near the zoomslider */
	font-size: 1em;
	font-weight: normal;
	color: #666;
	background-color:rgba(255,255,255,0.8);
	position:absolute;
	padding: 2px;
	top: 10px;
	left: 280px;
	border-radius: 2px;
}

h5.date {
	float: left; 
	font-weight: bold; 
	font-size: 1.2em; 
	margin-top: 1.4em; 
	margin-left: 0.4em; 
	color: #282888;
}

form.form-inline {
	float: left; 
	margin-left: 0.6em;
}

form.inline div table {
	padding: 0px; 
	margin: 0px; 
	border: 0px solid #fff;
}

form.inline div table tr:first-child {
	vertical-align: bottom !important;
	height: 20px;
}

form.inline div table td {
	text-align: center;
}

form.inline div table tr.row3 { 
	vertical-align: top !important;
	height: 12px !important;
}

/* top row of buttons for date control */
#nextmonth, #nextd, #nextyear {
	height: 1em;
	width: 100% !important;
	font-size: 1.6em;
	padding: 0px;
	margin: 0px;
	vertical-align: middle !important;
	border: 0px #fff solid !important;
	background-color: transparent;
}

/* middle row of buttons and form field */
#currmonth, #currd, #currday {
	height: 1.2em !important;
	width: 2em;
}

#curryear {
	height: 1.2em !important;
	width: 3em;
}

/* bottom row of buttons for date */

#prevmonth, #prevd, #prevyear {
	height: 15px !important;
	width: 100% !important;
	font-size: 1.6em;
	padding: 0px;
	margin: -8px 0 0 0 !important;
	border: 0px #fff solid !important;
	vertical-align: top;
	background-color: transparent;
}

.tooltip {
	top:-10px;
	left:-5px;
	background-color:rgba(255,255,255,0.8);
	color:black;
	font-size: 0.5em;
	font-weight: bold;
	border-radius: 3px;
	opacity: 0;
	position:absolute;
	-webkit-transition: opacity 1s;
	-moz-transition: opacity 1s;
	-ms-transition: opacity 1s;
	-o-transition: opacity 1s;
	transition: opacity 1s;
}

.arrow svg path {
	fill:#00F;
	stroke:#000;
}

.svgarrow {
	-moz-user-select:none;
	-webkit-user-select:none;
	-ms-user-select:none;
	position: absolute;  
	top: 0;  
	bottom: 0;  
	left: 0;  
	right: 0;  
	margin: auto;  
}

.ol-popup {
	position: absolute;
	background-color: white;
	-webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
	filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
	padding: 15px;
	border-radius: 10px;
	border: 1px solid #cccccc;
	bottom: 12px;
	left: -50px;
	width: 300px;
}

.ol-popup:after, .ol-popup:before {
	top: 100%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.ol-popup:after {
	border-top-color: white;
	border-width: 10px;
	left: 48px;
	margin-left: -10px;
}

.ol-popup:before {
	border-top-color: #cccccc;
	border-width: 11px;
	left: 48px;
	margin-left: -11px;
}

.ol-popup-closer {
	text-decoration: none;
	position: absolute;
	top: 2px;
	right: 8px;
}

.ol-popup-closer:after {
	content: "X";
}

div#other-control {
	padding: 5px;
}

div.layerBox {
	padding: 6px; 
	border-radius: 6px;
	border: 1px solid #888; 
	margin-bottom: 7px;
	background-color: #f9f8f8 !important;
}

.panel-title .glyphicon {
    font-size: 12px;
	color: #0f294a;
}

.panel-default > .panel-heading {
	background: none !important;
	border-bottom: 0px solid #fff;
}

div.panel-heading {
	padding: 2px 2px 8px 2px;  /* removing giant padding from stupid bootstrap styles */
	border-bottom: 0px solid #fff;
}

div.layerBox h4.panel-title {
	color: #282888;
	font-weight: bold;
	margin-top: 0px;
	font-size: 1em;	
	width: 45%;
	text-align: left;
}

div.showCheck {
	text-align: right;
	float: right; 
	width: 90px;
	margin: 0px !important;
}

div.showCheck label {
	margin: 0px !important;
}

input[type="checkbox"]#l2product, input[type="checkbox"]#l2product2, input[type="checkbox"]#l2product3 {
	margin-top: 0px !important;
}

div.checkbox {
	margin-left: 1em;
	margin-bottom: 5px;
}

/* input type = 'range' */
/* https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/ */
/* first, zero out the ugliness: */

input[type=range] {
  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
  width: 100%; /* Specific width is required for Firefox. */
  background: transparent; /* Otherwise white in Chrome */
  border: 0px solid #fff;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: 0px solid #fff;
}

input[type=range]:focus {
  outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
  border: 0px solid #fff;
}

input[type=range]::-ms-track {
  width: 100%;
  cursor: pointer;
  /* Hides the slider so custom styles can be added */
  background: transparent; 
  border-color: transparent;
  color: transparent;
}

/* end of zeroing for input: range */

/* style the drag handle */
/* Special styling for WebKit/Blink */
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: 1px solid #666;
  height: 18px;
  width: 18px;
  background: #6c88b7;
  border-radius: 6px;
  cursor: pointer;
  margin-top: -3px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
  box-shadow: 1px 1px 1px #efefef, 0px 0px 1px #0d0d0d; /* Add cool effects to your sliders! */
}

/* All the same stuff for Firefox */
input[type=range]::-moz-range-thumb {
  box-shadow: 1px 1px 1px #efefef, 0px 0px 1px #0d0d0d;
  border: 1px solid #666;
  height: 18px;
  width: 18px;
  border-radius: 6px;
  background: #6c88b7;
  cursor: pointer;
}

/* All the same stuff for IE */
input[type=range]::-ms-thumb {
  box-shadow: 1px 1px 1px #efefef, 0px 0px 1px #0d0d0d;
  border: 1px solid #666;
  height: 18px;
  width: 18px;
  border-radius: 6px;
  background: #6c88b7;
  cursor: pointer;
}

/* END OF button, now style the track */

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 12px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #efefef, 0px 0px 1px #0d0d0d;
  background: #fff;
  border-radius: 1.3px;
  border: 0.2px solid #666;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: #367ebd;
}

input[type=range]::-moz-range-track {
  width: 100%;
  height: 12px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #efefef, 0px 0px 1px #0d0d0d;
  background: #fff;
  border-radius: 1.3px;
  border: 0.2px solid #666;
}

input[type=range]::-ms-track {
  width: 100%;
  height: 12px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  border-width: 16px 0;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #fff;
  border: 0.2px solid #666;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #efefef, 0px 0px 1px #0d0d0d;
}
input[type=range]:focus::-ms-fill-lower {
  background: #fff;
}
input[type=range]::-ms-fill-upper {
  background: #fff;
  border: 0.2px solid #666;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #efefef, 0px 0px 1px #0d0d0d;
}
input[type=range]:focus::-ms-fill-upper {
  background: #fff;
}

.legend {
	position: absolute;
	right: 5px;
	bottom: 5px;
	z-index:10000;
}

.dummyCB {
	position: absolute;
	right: 5px;
	bottom: 5px;
	z-index:10001;
	    padding: 3px 3px 3px 0px;
    background-color: #FFF;
    	border-radius:4px;
    color: #FFF;
    border: 1px solid black;
}

.legendBox {
	float:left;
	border-radius: 5px; 
	border: 1px solid #666; 
	margin: 0px 0px 10px 0px;
	background-color: #fff;
}

/*div.legendBox p {
	font-size: 0.6em;
	padding: 0px;
	margin: 0px 0px 2px 0px;
	text-align: center;
	width: 100%;
	font-weight: bold;
}

div.legendBox img {
	width: 210px;
}*/

select option:disabled {
    color: #666;
	background-color: #efefef;
}

.saveIm{
	position:absolute;
	width:45px;
	height:45px;
	top:7px;
	left:47px;
	    background-color: rgba(0, 60, 136, .5);
	color:#FFF;
	border-radius:4px;
	border:1.5px solid white;
        text-align: center;
        z-index:9997;
}

.saveIm:hover {
        background-color: rgba(0, 60, 136, .7);
        cursor:pointer;
}


.overlay{
    position:absolute;
    display:inline-block;
    /*margin:auto;*/
    color: white;
    width:fit-content;
    height:fit-content;
    font-size:1.2em;
    top:10px;
    left:40%;
    background-color: rgba(0, 60, 136, .5);
    border-radius:4px;
    border:1.5px solid white;
    z-index:9998;
    text-align:center;
    padding:5px;
    cursor:move;

}


.cbs{
    padding: 3px 3px 3px 0px;
    background-color: #FFF;
    	border-radius:4px;
    color: #FFF;
    border: 1px solid black;
}


.openbtn{
     border-radius:0px 2px 2px 0px;
     padding:2px 2px 2px 2px;
     border:1.5px solid white;
     border-left:0px;
     position:absolute;
     	background-color: #efefef;
     left: 0px;
     top: 7px;
     color:#FFF;
     z-index: 9999;
     color: #0f294a;
}

.openbtn:hover {
   cursor:pointer;
}

.center {
  position: relative;
  top: 50%;
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 28px;
}

.newspopup {
  position: fixed;
  width: calc((100% - 230) * 0.5);
  max-width: 500px;
  min-width: 250px;
  top:20%;
  left:250px;
  background-color:white;
  border-radius:10px;
  border:1.5px solid rgba(0,60,136,0.5);
  padding: 10px;
}

/*.newspopup p {
    padding: 10px;
}

.newspopup a {
    padding: 10px;
}

.newspopup h4 {
    padding: 10px;
}*/

.newsClose {
    position:absolute;
    padding: 2px;
    right:2px;
    top: 2px;
    cursor:pointer;
}

ul {
  padding-left: 8px ;
}

ul li {
 left:2px;
}

ul li:hover {
  cursor:pointer;
}

.latlon {
	position:absolute;
	right: 2px;
	top: 10px;
	z-index:10005;
	
	position:absolute;
    display:inline-block;
    /*margin:auto;*/
    color: white;
    width:fit-content;
    height:fit-content;
    font-size:1.2em;
    background-color: rgba(0, 60, 136, .5);
    border-radius:4px;
    border:1.5px solid white;
    text-align:center;
    padding:5px;
}