body {
	font-family: "Open Sans",Helvetica,Arial,Tahoma,sans-serif;
	margin-bottom: 60px;
	min-height: 75rem;
	/*
	padding-top: 4rem;
	color: #343a40;
	*/
	color: #333;
}

header {
	min-height: 60px;
}

.toast-container {
	z-index: 1040;
}

ul.navbar-nav {
	background-color: #fff;
	padding: 0px 20px;
}

label {
	margin-bottom: 0px;
}

summary {
	padding-bottom: 10px;
}

.btn.btn-white {
	border: 1px solid #eaeaea;
	background-color: #fff;
}

.btn.btn-default {
	border: 1px solid #eaeaea;
}


.leaflet-control-layers-toggle {
	/*
	background: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20viewBox%3D%220%200%20512%20512%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M512%20256.01c0-9.98-5.81-18.94-14.77-22.81l-99.74-43.27%2099.7-43.26c9-3.89%2014.81-12.84%2014.81-22.81s-5.81-18.92-14.77-22.79L271.94%203.33c-10.1-4.44-21.71-4.45-31.87-.02L14.81%20101.06C5.81%20104.95%200%20113.9%200%20123.87s5.81%2018.92%2014.77%2022.79l99.73%2043.28-99.7%2043.26C5.81%20237.08%200%20246.03%200%20256.01c0%209.97%205.81%2018.92%2014.77%2022.79l99.72%2043.26-99.69%2043.25C5.81%20369.21%200%20378.16%200%20388.14c0%209.97%205.81%2018.92%2014.77%2022.79l225.32%2097.76a40.066%2040.066%200%200%200%2015.9%203.31c5.42%200%2010.84-1.1%2015.9-3.31l225.29-97.74c9-3.89%2014.81-12.84%2014.81-22.81%200-9.98-5.81-18.94-14.77-22.81l-99.72-43.26%2099.69-43.25c9-3.89%2014.81-12.84%2014.81-22.81zM45.23%20123.87l208.03-90.26.03-.02c1.74-.71%203.65-.76%205.45.02l208.03%2090.26-208.03%2090.27c-1.81.77-3.74.77-5.48%200L45.23%20123.87zm421.54%20264.27L258.74%20478.4c-1.81.77-3.74.77-5.48%200L45.23%20388.13l110.76-48.06%2084.11%2036.49a40.066%2040.066%200%200%200%2015.9%203.31c5.42%200%2010.84-1.1%2015.9-3.31l84.11-36.49%20110.76%2048.07zm-208.03-41.87c-1.81.77-3.74.77-5.48%200L45.23%20256%20156%20207.94l84.1%2036.5a40.066%2040.066%200%200%200%2015.9%203.31c5.42%200%2010.84-1.1%2015.9-3.31l84.1-36.49%20110.77%2048.07-208.03%2090.25z%22%3E%3C%2Fpath%3E%0A%20%20%3C%2Fsvg%3E) no-repeat;
	background: url( "/layers.svg" ) no-repeat;
	background-color: #ff0000;
	background-image: url(images/layers.png);
	background-image:url(/layers.svg) !important;
	*/
	background-image:url(data:image/svg+xml;charset-US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%20512%20512%22%3E%0A%3Cpath%20d%3D%22M512%20256.01c0-9.98-5.81-18.94-14.77-22.81l-99.74-43.27%2099.7-43.26c9-3.89%2014.81-12.84%2014.81-22.81s-5.81-18.92-14.77-22.79L271.94%203.33c-10.1-4.44-21.71-4.45-31.87-.02L14.81%20101.06C5.81%20104.95%200%20113.9%200%20123.87s5.81%2018.92%2014.77%2022.79l99.73%2043.28-99.7%2043.26C5.81%20237.08%200%20246.03%200%20256.01c0%209.97%205.81%2018.92%2014.77%2022.79l99.72%2043.26-99.69%2043.25C5.81%20369.21%200%20378.16%200%20388.14c0%209.97%205.81%2018.92%2014.77%2022.79l225.32%2097.76a40.066%2040.066%200%200%200%2015.9%203.31c5.42%200%2010.84-1.1%2015.9-3.31l225.29-97.74c9-3.89%2014.81-12.84%2014.81-22.81%200-9.98-5.81-18.94-14.77-22.81l-99.72-43.26%2099.69-43.25c9-3.89%2014.81-12.84%2014.81-22.81zM45.23%20123.87l208.03-90.26.03-.02c1.74-.71%203.65-.76%205.45.02l208.03%2090.26-208.03%2090.27c-1.81.77-3.74.77-5.48%200L45.23%20123.87zm421.54%20264.27L258.74%20478.4c-1.81.77-3.74.77-5.48%200L45.23%20388.13l110.76-48.06%2084.11%2036.49a40.066%2040.066%200%200%200%2015.9%203.31c5.42%200%2010.84-1.1%2015.9-3.31l84.11-36.49%20110.76%2048.07zm-208.03-41.87c-1.81.77-3.74.77-5.48%200L45.23%20256%20156%20207.94l84.1%2036.5a40.066%2040.066%200%200%200%2015.9%203.31c5.42%200%2010.84-1.1%2015.9-3.31l84.1-36.49%20110.77%2048.07-208.03%2090.25z%22%2F%3E%0A%3C%2Fsvg%3E) !important;
	width: 36px !important;
	height: 36px !important;
	background-size: 24px 24px;
	filter: invert(16%) sepia(1%) saturate(2435%) hue-rotate(345deg) brightness(97%) contrast(88%);
}

.fullscreen-icon {
	background-image:url(data:image/svg+xml;charset-US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%20448%20512%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M447.7%20364l.3%20104c0%206.6-5.4%2012-12%2012l-104-.3c-6.6%200-12-5.4-12-12v-10c0-6.6%205.4-12%2012-12l58%20.3.7-.7L224%20278.6%2057.3%20445.3l.7.7%2058-.3c6.6%200%2012%205.4%2012%2012v10c0%206.6-5.4%2012-12%2012L12%20480c-6.6%200-12-5.4-12-12l.3-104c0-6.6%205.4-12%2012-12h10c6.6%200%2012%205.4%2012%2012l-.3%2058%20.7.7L201.4%20256%2034.7%2089.3l-.7.7.3%2058c0%206.6-5.4%2012-12%2012h-10c-6.6%200-12-5.4-12-12L0%2044c0-6.6%205.4-12%2012-12l104%20.3c6.6%200%2012%205.4%2012%2012v10c0%206.6-5.4%2012-12%2012L58%2066l-.7.7L224%20233.4%20390.7%2066.7l-.7-.7-58%20.3c-6.6%200-12-5.4-12-12v-10c0-6.6%205.4-12%2012-12l104-.3c6.6%200%2012%205.4%2012%2012l-.3%20104c0%206.6-5.4%2012-12%2012h-10c-6.6%200-12-5.4-12-12l.3-58-.7-.7L246.6%20256l166.7%20166.7.7-.7-.3-58c0-6.6%205.4-12%2012-12h10c6.6%200%2012%205.4%2012%2012z%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E%0A) !important;
	background-size: 14px 14px;
}

a.leaflet-control-measure svg {
	width: 24px !important;
	height: 24px !important;
	filter: invert(16%) sepia(1%) saturate(2435%) hue-rotate(345deg) brightness(97%) contrast(88%);
}



ul.navbar-nav.ml-auto {
	background-color: #fff;
	border-radius: 2px;
	padding: 8px;
	color: #212529;
}


table.table {
	color: #333;
}

.localmap {
	padding: 20px 0px;
}

.localmap, .localmap .container, .localmap table  {
    background-color: #192133;
    color: #fff;
}

.localmap table td {
	font-family: "Roboto Condensed","Helvetica Neue",Helvetica,Arial,Tahoma,sans-serif;
    font-weight: 400;
	vertical-align: middle;
	font-size: 22px;
}

td.whitebg {
	background-color: #fff !important;
}

.localmap table td.ws,
.localmap table td.tempc,
.localmap table td.tempf {
	text-align: right;
	font-size: 28pt;
}

.localmap .direction {
	background: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%20-0.0166403%2061%2060.0333%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20width%3D%2250px%22%20height%3D%2250px%22%3E%0A%09%3Cg%20fill%3D%22none%22%3E%0A%09%09%3Cpath%20style%3D%22stroke-width%3A%201.5px%3B%22%20stroke%3D%22%23FFF%22%20d%3D%22M%2029.6133%2011.4802%20l%2014.3867%2037.6448%20l%20-14.1933%20-15.617%20l%20-13.8067%2015.617%20l%2013.6133%20-37.6448%20Z%22%20%2F%3E%0A%09%3C%2Fg%3E%0A%3C%2Fsvg%3E) no-repeat;
	display: inline-block;
	width: 50px;
	height: 50px;
    color: #fff;
	background-position: 0px 0px;
}



.leaflet-popup-content p {
    margin: 6px 0;
}

.leaflet-container a {
	color: #6c757d;
}
.leaflet-container a svg {
	color: #6c757d;
}

.leaflet-container .btn-outline-secondary {
    border-radius: 0px;
	color: #333;
}

.leaflet-container .btn-outline-secondary:hover {
    color: inherit;
    border: 2px solid #6c757d;
	background-color: #f8f9fa;
	margin: -1px;
}

svg.full  {
	width: 512px;
	height: 512px;
	display: inline-block;
	position: relative;
	background-color: transparent;
	fill: currentColor;
	padding-right: 3px;
}

svg.bigicon {
	display: inline-block;
	position: relative;
	background-color: transparent;
	fill: currentColor;
	width: 42px;
	height: 42px;
	padding-right: 3px;
}

svg.logonicon {
	display: inline-block;
	position: relative;
	background-color: transparent;
	fill: currentColor;
	width: 32px;
	height:32px;
	padding-right: 8px;
}

svg.icon {
	display:  inline-block;
	position: relative;
	background-color: transparent;
	fill: currentColor;
	width: 26px;
	height: 26px;
	padding-right: 3px;
}

.spotlist svg.icon {
	display: block;
	margin: auto;
}

svg.iconwhite {
	display: inline-block;
	position: relative;
	background-color: transparent;
	fill: #fff;;
	width: 26px;
	height: 26px;
	padding-right: 3px;
}


h1, h2, h3 {
	font-family: "Roboto Condensed","Helvetica Neue",Helvetica,Arial,Tahoma,sans-serif;
	font-weight: 400;
	letter-spacing: -.05rem;
}

a.navbar-brand {
	font-family: "Roboto Condensed","Helvetica Neue",Helvetica,Arial,Tahoma,sans-serif;
	font-size: 20pt;
	letter-spacing: -.05rem;
	color: #333;
}



.ie10 { 
	display: none;
 }

 #topmap {
	height: 425px;
	width: 100%;
}

.markerwrapper {
    font-weight: normal;
    font-size: 14px;
    font-family: "Roboto Condensed","Helvetica Neue",Helvetica,Arial,Tahoma,sans-serif;
}

.markerwrapper a { 
	text-align: left;
}

.markertitle {
    font-weight: normal;
    font-size: 20px;
    font-family: "Roboto Condensed","Helvetica Neue",Helvetica,Arial,Tahoma,sans-serif;
}

.markertitletype {
    margin-top: 1px;
    padding: 0 25px 0 0;
    font-family: "Roboto Condensed","Helvetica Neue",Helvetica,Arial,Tahoma,sans-serif;
    font-size: 11px;
    line-height: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #7a7a7a;
}

.leaflet-popup-content {
	width: 320px;
}

.leaflet-popup-content-wrapper {
    padding: 1px;
    text-align: left;
    border-radius: 0px;
}

button.closebtn {
    display: inline-block;
    position: absolute;

	top: -28px;
    right: 0px;
    height: 24px;
    line-height: 16px;
    border-radius: 2px;
    background-color: rgba(0,0,0,0.5);

    text-align: center;
    text-decoration: none;
    font-weight: normal;
    transition: background-color .15s;
    transform-origin: center;
    width: auto;
    padding: 3px 4px 4px 4px;
    color: white
}

button.closebtn span {
    line-height: 13px;
    text-transform: uppercase;
    font-family: "Roboto Condensed","Helvetica Neue",Helvetica,Arial,Tahoma,sans-serif;
    letter-spacing: .1em;
    display: inline-block;
    font-size: 13px
}

html {
  position: relative;
  min-height: 100%;
}


.ui-autocomplete {
	position: absolute;
	z-index: 99999 !important;
	cursor: default;
	padding: 0;
	margin-top: 2px;
	list-style: none;
	background-color: #ffffff;
	border: 1px solid #ccc 
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

	.ui-autocomplete > li {
		padding: 3px 20px;
	}

		.ui-autocomplete > li.ui-state-focus {
			background-color: #DDD;
		}

.ui-helper-hidden-accessible {
	display: none;
}



/* IE 10 and up */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	.ie10 {
		display:block;
	}
	body {
		margin-top: 60px;
		padding-top: 0px;
	}
}

ul {
 	list-style-position: inside;
	padding-left: 0;
}



nav.navbar  {
	/* z-index: 3000; */
}

.modal-content {
	margin-top: 80px;
}


html, body, main {
	min-height: 100%;
}

#spotlist {
	min-height: 550px;
}


/* Shared */
.loginBtn {
	box-sizing: border-box;
	position: relative;
	/* width: 13em;  - apply for fixed size */
	margin: 0.2em;
	padding: 0 15px 0 46px;
	border: none;
	text-align: left;
	line-height: 34px;
	white-space: nowrap;
	border-radius: 0.2em;
	font-size: 16px;
	color: #FFF;
}

	.loginBtn:before {
		content: "";
		box-sizing: border-box;
		position: absolute;
		top: 0;
		left: 0;
		width: 34px;
		height: 100%;
	}

	.loginBtn:focus {
		outline: none;
	}

	.loginBtn:active {
		box-shadow: inset 0 0 0 32px rgba(0,0,0,0.1);
	}


/* Facebook */
.loginBtn--facebook {
	background-color: #4C69BA;
	background-image: linear-gradient(#4C69BA, #3B55A0);
	/*font-family: "Helvetica neue", Helvetica Neue, Helvetica, Arial, sans-serif;*/
	text-shadow: 0 -1px 0 #354C8C;
}

	.loginBtn--facebook:before {
		border-right: #364e92 1px solid;
		background: url('/images/icon_facebook.png') 6px 6px no-repeat;
	}

	.loginBtn--facebook:hover,
	.loginBtn--facebook:focus {
		background-color: #5B7BD5;
		background-image: linear-gradient(#5B7BD5, #4864B1);
	}

.spotcompasswrapper {
	font-family: "Roboto Condensed","Helvetica Neue",Helvetica,Arial,Tahoma,sans-serif;
	position: relative;
	width: 150px;
	height: 50px;
}

.spotcompasswrapper canvas {
	font-size: 40px;
	position: absolute;
	top: -85px;
	left: 96px;
}

.spotcompasswrapper .wsspot  {
	position: absolute;
	z-index: 100;
	text-align: center;
	top: -45px;
	left: 215px;
	width: 60px;
	font-size: 40px;
}

.spotcompasswrapper .uom  {
	position: absolute;
	z-index: 100;
	top: 0px;
	left: 234px;
}

.spotcompasswrapper .uom.w,.spotcompasswrapper .wsspot.w {
	color: #fff;
}



/* Phones */
@media (max-width: 789px) {
	.collapse.dont-collapse-sm {
		display: block;
		height: auto !important;
		visibility: visible;
	}


	#topmap {
		width: 100%;
	}

	ul.nav li  a {
		padding: 4px 8px;
	}
	
}