/* https://github.com/shannonmoeller/reset-css --- http://meyerweb.com/eric/tools/css/reset/ */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, main, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section {display:block;}
/* HTML5 hidden-attribute fix for newer browsers */
*[hidden] { display: none; }
body { line-height: 1; }
menu, ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
/* NORMAL CSS */
b, strong { font-weight: 700; }
i, em { font-style: italic; }
html, body, #map, #info, #guide { position: relative; width:100%; height:100%; margin:0; padding:0; z-index: 1; font-family: 'Open sans', sans-serif; font-size: 16px; font-weight: 400; font-style: normal; }
#info, #guide { display: none; padding-left: 21rem; padding-top: 6vh; }
@media (max-width:767px) {
	#info, #guide { padding: 27vh 10px 10px 10px; }
}
@media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
	body { font-size: 25px; overflow: hidden; }
}



/*
.fa-white { color: #ffffff; }
.fa-red { color: #ff0000; }
.fa-blue { color: #0000ff; }
.fa-green { color: #00ff00; }
*/
/* .fa { font-size: 2rem; } */
a { color: #0088cc; }
/*i { font-family: "FontAwesome Free"; }*/

#uuid { display: none; }

/* MAP */
#map {
	cursor: default;
	background-color: #232C2E; /*background-color: #0F3446;*/
	height: 95vh;
	top: 5vh;
	left: 0;
	width: 100%;
}
/* COORDS - STATIC BOTTOM */
#coords {
	font-size: 1.5rem;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	z-index: 2;
	padding: 2px 7px 0 7px;
	width: fit-content;
	/*height: 100%;*/
	max-height: 10vh;
	color: #000000;
	background-color: #fff;
	opacity: 0.8;
	text-align: center;
	-webkit-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.75);
	-moz-box-shadow:    0px 0px 5px 1px rgba(0,0,0,0.75);
	box-shadow:         0px 0px 5px 1px rgba(0,0,0,0.75);
}
/* IF TOUCH ONLY DEVICE THEN DO NOT SHOW CURSOR COORDS [SOURCE] https://css-tricks.com/interaction-media-features-and-their-potential-for-incorrect-assumptions/ */
@media (any-hover: none) {
	.cursortooltip { display: none; }
}

/*     LEAFLET OVERRIDES     */
/* 
- 'popup' controls background of permanent tooltips (train station names & hello tooltip),
- 'leaflet content wrapper' controls background of the toggled popup attached to the blue marker, 
- 'leaflet popup tip' controls the toggled popups' white triangle 
*/
/*
.popup,
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
	background: rgba(0, 0, 0, 0) !important;
	border: none !important;
	font-size: 13pt;
	box-shadow: none !important;
	text-shadow: -2px 0 #000, 0 2px #000, 2px 0 #000, 0 -2px #000;
	color: #fff;
}
*/
/* this removes tooltips' white triangle from geojson data (pink circle markers) */
/*
.leaflet-tooltip-top:before, .leaflet-tooltip-bottom:before, .leaflet-tooltip-left:before, .leaflet-tooltip-right:before { border: none !important; }
*/

/* PARENT FOR CURSOR COORDS POPUP  .leaflet-pane.leaflet-tooltip-pane */
.leaflet-pane.leaflet-tooltip-pane > div.leaflet-tooltip {
	background: none !important;
	border: none !important;
	font-size: 13pt;
	box-shadow: none !important;
	text-shadow: -2px 0 #000, 0 2px #000, 2px 0 #000, 0 -2px #000;
	color: #fff;
}
.leaflet-pane.leaflet-tooltip-pane > div.leaflet-tooltip:before {
	border: none !important;
}

/* PARENT FOR CLICKED MARKER POPUP .leaflet-pane.leaflet-popup-pane */
/*
.leaflet-popup.custom-popup.leaflet-zoom-animated > div.leaflet-popup {
	background-color: #fff;
	text-shadow: none;
}
*/
.leaflet-popup.custom-popup.leaflet-zoom-animated > div.leaflet-popup-content-wrapper > div.leaflet-popup-content {
	margin-top: 4px;
	margin-bottom: 4px;
}
/* -    THE LITTLE MARKER ARROWS FROM THE BORDER */
.leaflet-popup.custom-popup.leaflet-zoom-animated > div.leaflet-popup > div.leaflet-popup-tip-container {
	background: rgba(0, 0, 0, 0) !important;
}

#header {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 5vh;
	color: #fff;
	background-color: #222;
	-webkit-box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.6);
	-moz-box-shadow:    0px 4px 8px 0px rgba(0,0,0,0.6);
	box-shadow:         0px 4px 8px 0px rgba(0,0,0,0.6);
}

/* PANEL */
#panel {
	font-size: 1.1rem;
	position: absolute;
	top: 5vh;
	left: 0;
	z-index: 2;
	width: 20rem;
	/*height: 100%;*/
	max-height: 95vh;
	color: #000000;
	-webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.6);
	-moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.6);
	box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.6);
}

/* PANEL - HEADER */
#panel > #pannel-header {
	/*padding: 0.5rem 0.5rem;*/
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	background-color: #677CA3;
}

#panel > #pannel-header > button {
	font-weight: bold;
}

.textWhite {
	color: #ffffff;
}

/* PANEL - SLIDER */
#panel > #pannel-slider {
	background-color: #bbbbbb;
	cursor: pointer;
	text-align: center;
	font-size: 1.1rem;
}
#panel > #pannel-slider > div {
	display: inline-block;
	padding: 0.25rem 0;
	color: #000000;
	text-align: center;
}
#panel > #pannel-slider > div:nth-child(2) {
	width: 60%;
}
#panel > #pannel-slider.no-touch:hover > div {
	color: #666666;
}
/*
#panel > #pannel-slider.no-touch:hover > div > i {
	transform: scaleY(-1);
}
*/

/* PANEL - CONTENT */
@media (max-width:767px) {
	#panel > #pannel-content {
		display: none;
	}
}
#panel > #pannel-content {
	clear: both;
	padding: 0.5rem 5px 1.3rem 5px;
	background-color: #ffffff;
	overflow-y: auto;
	max-height: 80vh;
	font-size: 1rem;
}
#search {
	width: 100%;
	padding: 3px 1px 3px 8px;
	/*border: 1px solid #ccc;*/
	border: none;
	-webkit-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.75);
	-moz-box-shadow:    1px 1px 3px 0px rgba(0,0,0,0.75);
	box-shadow:         1px 1px 3px 0px rgba(0,0,0,0.75);
}
#panel > #pannel-content ul.checkbox-grid {
	-moz-column-count: 2;
	-moz-column-gap: 0px;
	-webkit-column-count: 2;
	-webkit-column-gap: 0px;
	column-count: 2;
	column-gap: 0px;
	padding: 4px 0 2px 8px;
}
#panel > #pannel-content ul.checkbox-grid li {
	/*display: block;*/
	padding: 2px 0;
	font-size: 0.9rem;
}
#panel > #pannel-content ul.checkbox-grid li > label {
	cursor: pointer;
}
#panel > #pannel-content span.section-btn {
	font-size: 1.1rem;
	border: 1px solid #cccccc;
	border-radius: 4px;
	padding: 4px 3px 4px 7px;
	cursor: pointer;
	background-color: #ffffff;
	margin-bottom: 4px;
}
#panel > #pannel-content span.section-btn.opened {
	border-radius: 4px 4px 0 0;
	border-bottom: none;
	padding-bottom: 0px;
}
#panel > #pannel-content div.section-area {
	display: none;
	border: 1px solid #cccccc;
	border-radius: 4px;
	padding: 0 0 7px 0;
	margin-top: 0px;
}

#panel > #pannel-content > div > div > #categories > div {
	width: 50%;
}
#panel > #pannel-content > div > div > #categories > div:nth-child(even) {
	float:right;overflow: hidden;
}
#panel > #pannel-content > div > div > #categories > div:nth-child(odd) {
	float:left;overflow: hidden;
}



/* NOTIFY - TOASTR OVERRIDE - MAKE LESS OPAQUE */
#toast-container > div {
  opacity: 0.9 !important;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90) !important;
  filter: alpha(opacity=90) !important;
}

.leaflet-popup-content-wrapper,
.leaflet-popup-content {
	-webkit-border-radius: 3px !important;
	-moz-border-radius: 3px !important;
	border-radius: 3px !important;
}
.leaflet-popup-content {
	/*max-height: calc(50vh - 20vh);*/
	/*max-height: 35vh;*/
	/*max-width: auto;*/
	/*overflow-y: auto;*/
}

.clickPin {
	color: #3fff00;
}
.mapPin {
	color: rgb(13 253 253 / 76%);
}

.addMe,
.shareMe {
	/*float: right;*/
	white-space: normal;
	/*
	position:fixed;
	right:0;
	bottom:0;
	*/
	/* box-shadow: inset 0px 0px 10px rgba(0,0,0,0.25); */
}

#shareIcon {
  font-family: 'Open Sans', sans-serif, 'Font Awesome 6 Sharp';
}
#shareIconDropdown > li, #shareIconInput {
	
  cursor: default;
  font-family: 'Open Sans', sans-serif, 'Font Awesome 6 Sharp';
}
#shareIconDropdown > li > a {
	font-size: 1.2em;
}
#shareIconButton, #btnCopy {
	border: var(--bs-border-width) solid var(--bs-border-color);
}

/*
#shareColor {
	outline: 0 !important;
}
#shareColor:hover {
	outline: 0 !important;
}
*/

.lime    { color: rgb(210 255 77  / 75%); }
.green   { color: rgb(63  255 0   / 75%); }
.cyan    { color: rgb(13  253 253 / 75%); }
.blue    { color: rgb(38  175 255 / 75%); }
.pink    { color: rgb(255 155 255 / 75%); }
.magenta { color: rgb(211 77  255 / 75%); }
.red     { color: rgb(255 25  110 / 75%); }
.yellow  { color: rgb(253 253 150 / 75%); }
.orange  { color: rgb(255 144 0   / 75%); }
.white   { color: rgb(255 255 255 / 75%); }
.silver  { color: rgb(185 185 185 / 75%); }
.black   { color: rgb(0   0   0   / 75%); }

/*
input:disabled, textarea:disabled, select:disabled {
	background-color: #ffffff !important;
}
*/

/* POPUP CONTENT */
/* [SOURCE] https://stackoverflow.com/a/67180791 */
/* PLACES IT IN BOTTOM RIGHT */
/*
.popupWrapper {
  display: flex;
}
.popupBox {
  text-align: justify;
}
.popupFloat {
  float: right;
  height: 100%;
  margin-left: 15px;
  display: flex;
  align-items: flex-end;
  shape-outside: inset(calc(100% - 100px) 0 0);
}
*/
/* PLACES IT IN TOP RIGHT */
.popupWrapper {
  display: flex;
}
.popupBox {
  /*text-align: justify;*/
  word-break: break-all;
  /*word-break: break-word;*/
}
.popupFloat > button {
  word-break: keep-all;
  float: right;
  height: 100%;
  margin-left: 15px;
  object-fit: contain;
  object-position: bottom;
  shape-outside: inset(calc(100% - 100px) 0 0);
}