/********** layout **********/
body {
	font-family:arial,helvetica,sans-serif;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	font-size: 14px;
}
 html, body {
 	height: 100%;
 	width: 100%;
 }
 #map {
 	height: calc(100vh - 56px);
 	width: 100%;
 }
.header_panel {
	#height: 156px;
	text-align: center;
}
main {
	min-height: 100vh;
	display: flex;
}
.left_panel {
	\display: none;
	background-color:rgba(0,0,0,0.6);
 	height: calc(100vh - 56px);
	/* width:380px; 2025.03 */
	/* width:350px; */
	color: #fff;
	padding:10px １0px 10px 10px;
	z-index: 100;
}
.content_panel {
	height: 100vh - 300px;
	flex: 1;
	text-align: center;
}


/********** loading **********/
#loading {
	width:100%;
	height:100%;
	padding-top:10em;
	text-align:center;
	cursor:wait;
}


/********** drawer **********/
.drawbtn {
	position: absolute;
	display: block;
	margin: 1px;
	padding: 0;
	color: #fff;
	font-size: 1.14em;
	font-weight: 700;
	text-decoration: none;
	font-family: inherit;
	text-align: center;
	height: 1.375em;
	width: 1.375em;
	line-height: .4em;
	background-color: rgba(0,60,136,.5);
	border: none;
	border-radius: 2px;
	top: 300px;
    left: 415px; /* 2025.03 */
/* left: 350px; */
	cursor: pointer;
	z-index: 100;
}


/********** legend **********/
.legendbtn {
	position: absolute;
	display: none;
	margin: 1px;
	padding: 0;
	color: #fff;
	font-size: 1.10em;
	font-weight: 300;
	text-decoration: none;
	font-family: inherit;
	text-align: center;
	height: 1.375em;
	width: 3em;
	line-height: .4em;
	background-color: rgba(0,60,136,.5);
	border: none;
	border-radius: 2px;
	top: calc(100vh - 48px);
	right: 0px;
	cursor: pointer;
	z-index: 100;
}


/********** ol map **********/
/* overviewmap */
.ol-custom-overviewmap,
.ol-custom-overviewmap.ol-uncollapsible {
	bottom: auto;
	left: auto;
	right: 0;
	top: 0;
}
.ol-custom-overviewmap:not(.ol-collapsed)  {
	border: 1px solid black;
}
.ol-custom-overviewmap .ol-overviewmap-map {
	border: none;
	#width: 300px;
}
.ol-custom-overviewmap .ol-overviewmap-box {
	border: 2px solid red;
}
.ol-custom-overviewmap:not(.ol-collapsed) button{
	bottom: auto;
	left: auto;
	right: 1px;
	top: 1px;
}
.ol-rotate {
	top: 170px;
	right: 0;
}

/* zoom */
#map .ol-zoom .ol-zoom-out {
	margin-top: 104px;
}
#map .ol-zoomslider {
	background-color: transparent;
	top: 2.3em;
	height: 100px;
}

#map .ol-touch .ol-zoom .ol-zoom-out {
	margin-top: 112px;
}
#map .ol-touch .ol-zoomslider {
	top: 2.75em;
}

#map .ol-zoom-in.ol-has-tooltip:hover [role=tooltip],
#map .ol-zoom-in.ol-has-tooltip:focus [role=tooltip] {
	top: 3px;
}

#map .ol-zoom-out.ol-has-tooltip:hover [role=tooltip],
#map .ol-zoom-out.ol-has-tooltip:focus [role=tooltip] {
	top: 132px;
}