@import url("https://fonts.googleapis.com/css?family=Italianno|Noto+Sans+SC|Noto+Sans+TC|Reem+Kufi&display=swap");
@import url("https://unpkg.com/leaflet@1.6.0/dist/leaflet.css");
@import url("./rrose/leaflet.rrose.css");
@import url("./graphicscale/Leaflet.GraphicScale.css");
@import url("https://www.unpkg.com/leaflet-sidebar-v2@3.2.2/css/leaflet-sidebar.min.css");

html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: "Reem Kufi", sans-serif;
	font-size: 15px;
	color: rgb( 87, 35, 12 );
	background-color: #fdf6e3;
  overflow: hidden;
}

#map {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background-color:#fdf6e3;
}

h1, h2, h3, h4, h5, h6, p, div, span {
	padding: 0;
	margin: 0;
}

h1 { 	font-size: 32px; }

h2 { 	font-size: 24px; }

h3 { 	font-size: 18px; }

p { font-size: 15px; }

.myhb {
  -webkit-text-decoration: underline wavy DarkRed;
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: FireBrick;
}

.leaflet-svg-labels {
	all: unset;
}

.lang_zhs, .scaleText .lang_zhs, .leaflet-rrose-content .lang_zhs {
	font-family: "Noto Sans SC", sans-serif;
}

.lang_zht, .scaleText .lang_zht, .leaflet-rrose-content .lang_zht {
	font-family: "Noto Sans TC", sans-serif;
}

.leaflet-container, .leaflet-rrose-content {
	font: 15px/1.1 "Reem Kufi", sans-serif;
}

.leaflet-tooltip-static {
	background: none;
	border: none;
	color: #000;
	text-shadow: -2px -2px 0 rgba( 221, 221, 221, 0.5 ),
		2px -2px 0 rgba( 221, 221, 221, 0.5 ),
		-2px 2px 0 rgba( 221, 221, 221, 0.5 ),
		2px 2px 0 rgba( 221, 221, 221, 0.5 ),
		-3px 0 0 rgba( 221, 221, 221, 0.5 ),
		3px 0 0 rgba( 221, 221, 221, 0.5 ),
		0 -3px 0 rgba( 221, 221, 221, 0.5 ),
		0 3px 0 rgba( 221, 221, 221, 0.5 );
	font-weight: bold;
	text-align:center;
	box-shadow: none;
}

.leaflet-tooltip-left.leaflet-tooltip-static::before {
	border-left-color: transparent;
}
.leaflet-tooltip-right.leaflet-tooltip-static::before {
	border-right-color: transparent;
}

.leaflet-tooltip.leaflet-tooltip-static { z-index: 0 !important; }

.leaflet-control-attribution {
	white-space: nowrap;
}

.leaflet-control-graphicscale {
	background-color: rgba( 254, 246, 237, 0.6 );
	background-image: url( "./images/noise.png" );
	padding: 5px 15px 5px 10px;
	box-shadow: 0px 0px 30px rgba( 52, 38, 13, 0.5 );
	color: rgb( 107, 55, 32 );
}

.leaflet-control-graphicscale .label {
	font-family: "Italianno", cursive;
	font-size: 24px;
	margin-bottom: 2px;
}

.leaflet-control-graphicscale .labelSub {
	font-size: 21px;
	margin-bottom: 4px;
}

.leaflet-control-graphicscale .line {
	border-color: rgb(107, 55, 32);
}

.leaflet-control-graphicscale .filled .fill {
	background-color: rgb(107, 55, 32);
}

.scaleText {
	margin-bottom: 0px;
	text-align: center;
}

.scaleText h1, .scaleText p {
	margin: 0;
}

.scaleText h1 {
	font-family: "Italianno", cursive;
	font-size: 30px;
}

.scaleText p {
	font-family: "Reem Kufi", sans-serif;
	font-size: 12px;
}

.scaleText h1 .lang_zhs, .scaleText h1 .lang_zht {
	font-weight: bold;
	font-size: 0.7em;
	line-height: inherit;
	vertical-align: -0.1em;
}

/* rrose fixes */
.leaflet-rrose {
	opacity: 0;
	-webkit-transition: opacity 0.2s linear;
	-moz-transition: opacity 0.2s linear;
	transition: opacity 0.2s linear;
}

.leaflet-rrose-content-wrapper, .leaflet-sidebar-tabs, .leaflet-sidebar-content {
	background-color: rgba( 254, 246, 237, 0.85 );
	background-image: url( "./images/noise.png" );
}

.leaflet-rrose-content {
	color: rgb( 87, 35, 12 );
}

.leaflet-sidebar-header, .leaflet-sidebar-tabs {
	font-family: "Reem Kufi", sans-serif;
}

.leaflet-sidebar-tabs > li:hover, .leaflet-sidebar-tabs > ul > li:hover, .leaflet-sidebar-tabs > li.active, .leaflet-sidebar-tabs > ul > li.active {
	background-color: rgba( 219, 194, 171, 0.6 );
}

.leaflet-sidebar-pane {
  padding: 0;
}

.leaflet-sidebar-header {
	background-color: rgba( 219, 194, 171, 0.6 );
	font-family: 'Italianno', cursive;
	font-size: 30px;
	color: rgb( 87, 35, 12 );
	padding: 10px 20px 0 20px;
	margin-left: 0;
}

.leaflet-sidebar-content::-webkit-scrollbar {width: 7px; height: 0;}
.leaflet-sidebar-content::-webkit-scrollbar-track {margin: 5px 0 5px}
.leaflet-sidebar-content::-webkit-scrollbar-thumb {
    background: rgba( 0, 0, 0, 0.0 );
    border-radius: 10px;
    box-shadow: rgba( 255, 255, 255, 0.3) 0 0 0 1px;
}
.leaflet-sidebar-content:hover::-webkit-scrollbar-thumb {background: rgba(0,0,0,0.45)}
.leaflet-sidebar-content::-webkit-scrollbar-thumb:hover {background: rgba(0,0,0,0.55)}

.leaflet-sidebar-content p {
	margin-top: 0.4em;
	margin-bottom: 0.9em;
}

.leaflet-sidebar-content h1, .leaflet-sidebar-content h2, .leaflet-sidebar-content h3, .leaflet-sidebar-content p, .leaflet-sidebar-content li {
	padding-left: 20px;
	padding-right: 20px;
}

.leaflet-sidebar-content h1 {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.leaflet-sidebar-content li { 
	list-style-type:none;		/* removes default bullet */
	position:relative;			/* positioning context for bullet */
	padding-left: 0px;
	text-indent: -5px;
}

.leaflet-sidebar-content li:before  {
	content:"\2219";			/* escaped unicode character */
	font-size:2.5em;			/* the default unicode bullet size is very small */
	line-height:0;				/* kills huge line height on resized bullet */
	position:absolute;			/* position bullet relative to list item */
	top:.23em;					/* vertical align bullet position relative to list item */
	left: -.5em;					/* position the bullet L- R relative to list item */
}

.leaflet-rrose-content .lang_zhs, .leaflet-rrose-content .lang_zht, .leaflet-sidebar-content .lang_zhs, .leaflet-sidebar-content .lang_zht {
	font-weight: normal;
	font-size: 0.9em;
	line-height: inherit;
	vertical-align: -0.005em;
}

.leaflet-sidebar-content img {
	width:100%;
	padding:0;
	padding-bottom:-5px;
/*
    -webkit-box-shadow: inset 0px 4px 3px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    inset 0px 4px 3px rgba(50, 50, 50, 0.75);
    box-shadow:         inset 0px 4px 3px rgba(50, 50, 50, 0.75);
*/
	border-width: 4px 0 0 0;
	border-style: solid;
	border-image: linear-gradient( to right, rgba( 119, 94, 71, 1 ), rgba( 0, 0, 0, 0 ) ) 3 0 0 0;
	-webkit-mask-image: -webkit-gradient( linear, left 50%, left bottom, from( rgba( 0,0,0,1 ) ), to( rgba( 0,0,0,0 ) ) );
	mask-image: linear-gradient(linear, left 50%, left bottom, rgba(0,0,0,1), rgba(0,0,0,0));
}

.leaflet-sidebar-close img {
	width: 10px;
	border: 0;
	padding: 0;
	padding-top: 6px;
	filter: invert(0.3) sepia(1);
	-webkit-mask-image: none;
	mask-image:none;
}

.leaflet-sidebar-tabs img {
	width: 24px;
	padding: 0;
	padding-top: 6px;
}

.token {
	filter: drop-shadow( 6px 6px 4px rgba( 0, 0, 0, 0.8 ) );
}

.symFloat-right, .symFloat-left, .tokenFloat-right, .tokenFloat-left, .leaflet-sidebar-content img.symFloat-left, .leaflet-sidebar-content img.tokenFloat-left {
	width: 32px;
	float: right;
	border: 0;
	padding: 2px;
	padding-top: 0px;
	filter: invert( 0.3 ) sepia( 1 );
}

.tokenFloat-left, .tokenFloat-right, .leaflet-sidebar-content img.tokenFloat-left {
	filter: none;
	margin-top: -2px;
}

.symFloat-left, .tokenFloat-left, .leaflet-sidebar-content img.symFloat-left, .leaflet-sidebar-content img.tokenFloat-left {
	border-image: none;
	float: left;
	padding-left: 20px;
	-webkit-mask-image: none;
	mask-image: none;
}

i.mb-0,i.mb-1,i.mb-2,i.mb-3,i.mb-4,i.mb-5,i.mb-6,i.mb-7,
i.ma-0,i.ma-1,i.ma-2,i.ma-3,i.ma-4,i.ma-5,i.ma-6,i.ma-7,
i.mm-0,i.mm-1,i.mm-2,i.mm-3,i.mm-4,i.mm-5,i.mm-6,i.mm-7,
i.mf-0,i.mf-1,i.mf-2,i.mf-3,i.mf-4,i.mf-5,i.mf-6,i.mf-7 {
  background-size: 14px 14px;
  background-repeat: no-repeat;
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: middle;
  color: transparent;
  margin-top: -3px;
}

i.mb-0,i.ma-0,i.mm-0,i.mf-0 { background-image: url(https://vector.drider.org/images/moons/moon-0-new-moon.svg); }
i.mb-1,i.ma-1,i.mm-1,i.mf-1 { background-image: url(https://vector.drider.org/images/moons/moon-1-waxing-crescent.svg); }
i.mb-2,i.ma-2,i.mh-2,i.mm-2,i.mf-2 { background-image: url(https://vector.drider.org/images/moons/moon-2-first-quarter.svg); }
i.mb-3,i.ma-3,i.mh-3,i.mm-3,i.mf-3 { background-image: url(https://vector.drider.org/images/moons/moon-3-waxing-gibbous.svg); }
i.mb-4,i.ma-4,i.mm-4,i.mf-4 { background-image: url(https://vector.drider.org/images/moons/moon-4-full-moon.svg); }
i.mb-5,i.ma-5,i.mm-5,i.mf-5 { background-image: url(https://vector.drider.org/images/moons/moon-5-waning-gibbous.svg); }
i.mb-6,i.ma-6,i.mm-6,i.mf-6 { background-image: url(https://vector.drider.org/images/moons/moon-6-last-quarter.svg); }
i.mb-7,i.ma-7,i.mm-7,i.mf-7 { background-image: url(https://vector.drider.org/images/moons/moon-7-waning-crescent.svg); }

i.mb-0,i.mb-1,i.mb-2,i.mb-3,i.mb-4,i.mb-5,i.mb-6,i.mb-7 { -webkit-filter: hue-rotate(240deg) saturate(5) brightness(5); filter: hue-rotate(240deg) saturate(5) brightness(5); }

i.mm-0,i.mm-1,i.mm-2,i.mm-3,i.mm-4,i.mm-5,i.mm-6,i.mm-7 { -webkit-filter: invert(0.3) sepia(1); filter: invert(0.3) sepia(1); }

i.mf-0,i.mf-1,i.mf-2,i.mf-3,i.mf-4,i.mf-5,i.mf-6,i.mf-7 { -webkit-filter: hue-rotate(70deg) saturate(140) brightness(3); filter: hue-rotate(140deg) saturate(100) brightness(3); }