/********************************* Main map styles */

.map-window {
	width: 100%;
	height: 100%;
	height: 91vh;/*for newer browsers; 91vh should just allow map resizing without any vertical scroll bar appearing on the majority of devices & browsers*/
	position: relative;
	top: 60px;/*make sure the map window doesn't overlap the header section, which has height:60px */
}

#map {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  height: 100%;
	width: auto;
  position: relative;
  z-index: 2; /*keep the map pane under the modal; otherwise it will trap the modal (and the modal close button) behind it */
}

#legendbutton, #layerbutton {
    width: 60px;
		padding: 5px 0px 5px 0px;
		height: 40px;
}

#layerbutton {
	font-size: 1.6rem;
}

#legendbutton {
	font-size: 1.4rem;
	background-color: #88d5ce;
	color: #333;
}

#legendbutton:hover {
background-color: white;
color: #41baae;
}

/* ==========================================================================
   Customised Leaflet plugin css - try to combine the smaller custom css files;
   leave more complex ones in their plugin folder to make updates more straightforward
   ========================================================================== */

/*  *******From L.Control.Basemaps********* */

.basemaps {
/*  padding: 4px; try with this commented out to fit on smaller or odd-shaped browsers */
/* 	top: 10px; uncomment if the top url bar is overlapping on mobile browsers */
}
.basemaps.closed .basemap {
    display: none;
}
.basemaps.closed .basemap.alt {
    display: inline-block;
}
.basemaps.closed .basemap.alt h4 {
    display: none;
}

.basemap {
    display: inline-block;
    cursor: pointer;
}
.basemap.active img {
	border-color: #41baae;
	box-shadow: 2px 2px 4px #000;
	border: solid 4px #41baae;
}

.basemap img {
	width: 60px;
	/* margin: 0 2px; separates the basemap icons; however it prevents the home basemap icon from lining up with the legend & layer buttons*/
	border-radius: 5px;
	/* border: solid 1px white; can't decide*/
	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
}

/*  *******From Leaflet Search ********* */


.leaflet-container .leaflet-control-search {
	position:relative;
	float:left;
	background:#fff;
	color:#333;
	background-clip: padding-box;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	background-color: rgba(255, 255, 255, 0.8);
	z-index:1000;
	margin-left: 10px;
	margin-top: 10px;
	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
}
.leaflet-control-search.search-exp {/*expanded*/
	background: #fff;
	border: 2px solid rgba(0,0,0,0.2);
	background-clip: padding-box;
}
.leaflet-control-search .search-input {
	display:block;
	float:left;
	background: #fff;
	border:1px solid #333;
	border-radius:2px;
	height:22px;
	padding:0 20px 0 2px;
	margin:4px 0 4px 4px;
}
.leaflet-control-search.search-load .search-input {
	background: url('../leaflet/plugins/search/images/loader.gif') no-repeat center right #fff;
}
.leaflet-control-search.search-load .search-cancel {
	visibility:hidden;
}
.leaflet-control-search .search-cancel {
	display:block;
	width:22px;
	height:22px;
	position:absolute;
	right:28px;
	margin:6px 0;
	background: url('../leaflet/plugins/search/images/search-icon.png') no-repeat 0 -46px;
	text-decoration:none;
	filter: alpha(opacity=80);
	opacity: 0.8;
}
.leaflet-control-search .search-cancel:hover {
	filter: alpha(opacity=100);
	opacity: 1;
}
.leaflet-control-search .search-cancel span {
	display:none;/* comment for cancel button imageless */
	font-size:18px;
	line-height:20px;
	color:#ccc;
	font-weight:bold;
}
.leaflet-control-search .search-cancel:hover span {
	color:#aaa;
}
.leaflet-control-search .search-button {
	display:block;
	float:left;
	width:30px;
	height:30px;
	background: url('../leaflet/plugins/search/images/search-icon.png') no-repeat 4px 4px #fff;
	border-radius:4px;
}
.leaflet-control-search .search-button:hover {
	background: url('../leaflet/plugins/search/images/search-icon.png') no-repeat 4px -20px #fafafa;
}
.leaflet-control-search .search-tooltip {
	position:absolute;
	top:100%;
	left:0;
	float:left;
	list-style: none;
	padding-left: 0;
	min-width:120px;
	max-height:122px;
	box-shadow: 1px 1px 6px rgba(0,0,0,0.4);
	background-color: rgba(0, 0, 0, 0.25);
	z-index:1010;
	overflow-y:auto;
	overflow-x:hidden;
	cursor: pointer;
}
.leaflet-control-search .search-tip {
	margin:2px;
	padding:2px 4px;
	display:block;
	color:black;
	background: #eee;
	border-radius:.25em;
	text-decoration:none;
	white-space:nowrap;
	vertical-align:center;
}
.leaflet-control-search .search-button:hover {
	background-color: #f4f4f4;
}
.leaflet-control-search .search-tip-select,
.leaflet-control-search .search-tip:hover {
	background-color: #fff;
}
.leaflet-control-search .search-alert {
	cursor:pointer;
	clear:both;
	font-size:.75em;
	margin-bottom:5px;
	padding:0 .25em;
	color:#e00;
	font-weight:bold;
	border-radius:.25em;
}

/*  *******Override the Leaflet.Control.Locate 'active' geolocate icon with branded colour ********* */
.leaflet-control-locate.active a {
	color: #41baae;
}

.leaflet-control-locate.active.following a {
	color: #d92323;
}

/*  *******From Leaflet Zoomhome (combined zoom & home buttons) ********* */
.leaflet-control-zoomhome a {
    font: 18px "Open Sans", Verdana, Monaco, monospace;
}

a.leaflet-control-zoomhome-in,
a.leaflet-control-zoomhome-out {
  font-size: 18px;
  font-weight: bold;
  line-height: 26px;
}

/* add a different background to the home button to match the site branding colour
	use important to override the built-in Leaflet style rather than rearrange the css file order*/
.leaflet-control-zoomhome-home {
	background-color: #88d5ce !important;
	color: #000 !important;
}

.leaflet-control-zoomhome-home:hover {
	color: #41baae !important;
	background-color: #fff !important;
}

/* Override some of the Leaflet Bookmarks plugin styles
	Note that due to the order of Leaflet css application it's sometimes best
	to alter the bookmarks control css itself; otherwise important! flag is required*/
.leaflet-bookmarks-to-right, .leaflet-bookmarks-to-right.expanded {
	width: 30px;
	height: 30px;
	border-radius: 4px;
	padding:0px;
}

.leaflet-bookmarks-control .bookmarks-icon:hover {
	background: #41baae;
}

.bookmarks-container {
	margin-left: 40px !important;
	min-width: 160px;
	min-height: 120px;
}

.plus {
	font-size: 20px;
	font-weight: bold;
	color: black;
	background: none;
	padding: none;
}

.plus:hover {
	color: white;
	background-color: #41baee;
}

/* Override the width & position of the history back & forward buttons */
.history-control.leaflet-bar a {
	width: auto;
	font-size: 1.1em;
	min-width: 30px;
	bottom: 20px;
}

/*from Leaflet Easybutton plugin */

.leaflet-bar button,
.leaflet-bar button:hover {
  background-color: #fff;
  border: none;
  border-bottom: 1px solid #ccc;
  width: 26px;
  height: 26px;
  line-height: 26px;
  display: block;
  text-align: center;
  text-decoration: none;
  color: black;
}

.leaflet-bar button {
  background-position: 50% 50%;
  background-repeat: no-repeat;
  overflow: hidden;
  display: block;
}

.leaflet-bar button:hover {
  background-color: #f4f4f4;
}

.leaflet-bar button:first-of-type {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.leaflet-bar button:last-of-type {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom: none;
}

.leaflet-bar.disabled,
.leaflet-bar button.disabled {
  cursor: default;
  pointer-events: none;
  opacity: .4;
}

.easy-button-button .button-state{
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}

.leaflet-touch .leaflet-bar button {
  width: 30px;
  height: 30px;
  line-height: 30px;
}

/*from Leaflet Credits Control plugin */
.leaflet-credits-control {
    margin-right:0 !important;
    margin-bottom:5px !important;
    height:41px;        /* defined in the JavaScript code */
    padding-right:48px; /* defined in the JavaScript code */
    background-image:none; /* defined in the JavaScript code */
    background-repeat:no-repeat;
    background-position:100% 0;
    background-color:#88d5ce;
    opacity:0.90;
    border-radius:5px;
    border:1px solid rgba(0, 0, 0, 0.1);
    cursor:pointer;
}
.leaflet-credits-control a {
    font-size:8pt;
    color:#333333 !important;
    text-decoration:none;
    /* text-align:right; don't bother with this*/
    display:none; /* becomes visible on mouse hover, see creditsControl */
}
.leaflet-credits-control a.leaflet-credits-showlink {
    display:inline-block;
    padding-left:5px;
    padding-right:5px;
    margin-top:5px;
    line-height:15px;
}

/* Override some of the core Leaflet Panel Layers plugin styles */

.leaflet-panel-layers {
	min-width: 340px;
}

#layerPanel {
	display:none;/* add this to stop the layers panel appearing except when the button is clicked*/
	background-color: rgba(255,255,255,0.8);
  border-radius: 5px;
	max-height: 60vh;/* don't let the panel get too tall or it will block easy access to the close & legend buttons */
}

.leaflet-panel-layers-group {
	border: 1px solid rgba(0,0,0,0.3);
	background: rgba(136, 213, 206, 1);
	border-radius: 5px;
}

.leaflet-panel-layers-item .leaflet-panel-layers-title {
	display: block;
	white-space: nowrap;
	float: none;
	cursor: pointer;
	padding: 4px;
}

.leaflet-panel-layers-overlays .leaflet-panel-layers-item {
	margin-bottom: 4px;
	padding: 3px;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 4px;
}

.leaflet-panel-layers-group.collapsible:not(.expanded) {
	height: 35px;
	background-color: #fff;
	color: #333;
}

.leaflet-panel-layers-group.collapsible:not(.expanded):hover {
	background-color: #333;
	color: #fff;
}

.leaflet-panel-layers-grouplabel {
	font-weight: bold;
}

.leaflet-panel-layers-item:hover {
	color: #fff;
	background: #333;
}

.leaflet-panel-layers-group.collapsible:not(.expanded) {
	height:30px;
}

.leaflet-top.leaflet-right .leaflet-panel-layers:not(.compact) {
	margin: 10px;
}

.leaflet-panel-layers-base .leaflet-panel-layers-selector {
	float: left;
	margin-right: 5px;
}

/* Make the GL layers always show on top of the Leaflet tile layers - important!! */
	.mapboxgl-map {
		font: 12px/20px Helvetica Neue,Arial,Helvetica,sans-serif;
		overflow: hidden;
		position: relative;
		-webkit-tap-highlight-color: rgba(0,0,0,0);
		z-index: 2;
	}

/* Override Leaflet main css settings - note this may be affected by the order
   of plugin downloads etc. which use Leaflet*/
.leaflet-container {
	background: #fff;
	outline: 0;
}
/*Boost the text size in the busy layers list */
.leaflet-control-layers-expanded {
	color: #333;
	font-size: 1.2em;
}
.leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar {
	/* border: 2px solid rg.leaflet-control-layers-expanded {
	color: #333;
	font-size: 1.2em;
}ba(0,0,0,0.2); */
	background-clip: padding-box;
	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
	border: 0px;

}.leaflet-bottom.leaflet-left {
	bottom: 25px;
}

/* keep this mapbutton class in file as it shows what all buttons should have */
.mapbutton {
	height: 30px;
	width: 30px;
	line-height: 30px;
	border-radius: 4px;
	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
}

/* Style the individual legend colour boxes in the legend modal */

.my-legend {
	margin: 15px 10px 0px 0px;
	font-size: 90%;
}
.legend-title {
  text-align: left;
  font-weight: bold;
}

.my-legend .legend-scale ul {
  margin: 5px 0px 5px 0px;
  padding: 0;
  float: left;
  list-style: none;
}

.legend-scale ul li {
  list-style: none;
  margin-left: 0;
  line-height: 24px;
  margin-bottom: 5px;
}

/*Style spans to form the map legend colour boxes */
.colorboxfeature, .boundaryfeature {
  display: block;
  float: left;
  height: 24px;
  width: 30px;
  margin-right: 5px;
  margin-left: 0;
  border: 1px solid #ccc;
}

.legendramp {
	max-width: 80%;
}

.boundaryfeature	{
  border: 4px solid;
}

/*Add an alternative style for line feature legends */
.linefeature, .dottedlinefeature {
  display: block;
  float: left;
  width: 30px;
  margin-right: 5px;
  margin-left: 0;
  border-bottom: 6px solid;
	padding-top: 6px;
}

/*Dotted line feature legends*/
.dottedlinefeature {
  border-bottom: 6px dotted;
}

/*Image legends */
.legendpic {
	max-height: 30px;
}

.my-legend .legend-source {
  font-size: 70%;
  color: #999;
  clear: both;
  }

.my-legend a {
  color: #777;
  }

.boundary-legend .legend-title {
	text-align: left;
	margin-bottom: 5px;
	font-weight: bold;
	font-size: 90%;
	}

.boundary-legend .legend-scale ul {
	margin: 0;
	margin-bottom: 5px;
	padding: 0;
	padding: 10px 0px 20px 20px; /*  use this padding for float:right legend boxes that are flush with the edge of the legend window, easier to compare with the background map colours. Otherwise use the first padding style. */
	float: left;
	list-style: none;
	}

.boundary-legend .legend-scale ul li {
	font-size: 80%;
	list-style: none;
	margin-left: 0;
	line-height: 18px;
	margin-bottom: 2px;
	}

.boundary-legend ul.legend-labels li span {
	display: block;
	float: left;
	height: 16px;
	width: 30px;
	margin-right: 5px;
	margin-left: 0;
	border: 1px solid #999;
	}

.boundary-legend .legend-source {
	font-size: 70%;
	color: #999;
	clear: both;
	}

.boundary-legend a {
	color: #777;
	}

/* Styling for Leaflet.BigImage - avoid a separate css*/
a.polyline-measure-controlOnBgColor,a.polyline-measure-controlOnBgColor:hover{background-color:#8f8}.polyline-measure-unicode-icon{font-size:19px;font-weight:700;display:block;border-radius:4px;cursor:pointer}.polyline-measure-unicode-icon-disable{display:none!important}.print-disabled{pointer-events:none;opacity:.3}#print-params{width:100%;text-align:center}#print-params>h6{text-align:center;margin-top:10px;margin-bottom:5px;font-size:1rem;font-family:inherit;font-weight:500;color:inherit}#print-params>input[type=number]{border:1px solid #999;border-radius:4px}.close{color:rgba(0,0,0,.8);font-size:20px;font-weight:700;position:absolute;top:0;right:5px}.close:focus,.close:hover{color:#000;text-decoration:none;cursor:pointer}.operation-btn{text-decoration:none;display:inline!important;padding-right:3px;vertical-align:middle;font-size:20px;margin:3px}.see-btn:before{content:'\1F441'}.download-btn:before{content:'\2B07'}#print-loading{display:none;position:absolute;top:50%;left:50%;height:30px;width:30px;margin:-15px 0 0 -15px;border:4px #a7a4ab solid;border-top:4px #52006d solid;border-radius:50%;-webkit-animation:spin 1s infinite linear;animation:spin 1s infinite linear}@-webkit-keyframes spin{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes spin{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.download-button{font-family:sans-serif;display:inline-block;font-size:1em;text-align:center;padding:.3em .8em;background:linear-gradient(45deg,#2b71ad,#0c7162);color:#fff;box-shadow:0 .4em .4em rgba(0,0,0,.25);border-radius:.4em;transition:box-shadow .2s ease-in-out;cursor:pointer;margin-top:5px}.download-button:hover{box-shadow:0 .1em .25em rgba(0,0,0,.25)}
/*end of BigImage map printing styling*/



/* Extra rules for smallest devices (phones & tablets under 600px) */

@media screen and (max-width: 600px) {
	.basemap img {
	    width: 40px;
	    margin: 0 2px;
	    border-radius: 40px;
	}

	#legendbutton, #layerbutton {
	    width: 40px;
	    font-size: 1.2rem;
			height: 35px;
}

h4 {
	font-size: 14px;
}

.leaflet-credits-control {
	display: none;
}
}