/* jquery ui -cover- */
.ui-tooltip {
	z-index: 9999;
}

.ui-tooltip.ui-widget.ui-widget-content {
	display: inline-block!important;
	font-size: 0.9rem;
	font-family: microsoft jhenghei;
	padding: 10px;
	border-radius: 5px;
	position: absolute!important;
}

.ui-button, .ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
	border: none;
	background: #ecf5fb;
	border-bottom: 2px solid #d7e5f1;
	border-radius: 5px;
}

.ui-slider-horizontal {
	font-size: .8em;
	height: .8em;
}

.ui-widget.ui-widget-content {
	border: none;
	background-color: #ffffff;
	border: 1px solid #d7e5f1;
}

.ui-slider .ui-slider-handle {
	background-color: white !important;
	border: 1px solid #cde1f3 !important;
}

.ui-slider .ui-slider-handle:focus {
	outline: none;
}

.ui-slider-range {
	background: #52a2e4 !important;
}

/* layout */
#myList {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: auto;
}

#myList li {
	position: relative;
	margin: 0 3px 3px 3px;
	padding: 0.4em;
	padding-left: 1.5em;
	font-size: 0.95rem;
    /* height: 18px; */
	cursor: pointer;
	font-family: microsoft jhenghei;
}

#myList li>span {
	position: absolute;
	margin-left: -1.3em;
}

#myList li>.layerBtns {
	position: relative;
	top: 3px;
	margin-left: inherit;
	float: right;
	opacity: 0.5;
}

#myList li>.layerBtns.legend.selected {
	background-color: #FFC107;
	box-shadow: 0 0 0 2px #ffbc00;
	border-radius: 100%;
	padding: 0px;
}

#myList li>.layerBtns:active {
	top: 2px;
}

#myList li>.layerBtns:hover {
	opacity: 1;
}

#myList li>img {
	width: 16px;
}

#myList li .divSlider {
	position: relative;
	width: 96%;
	z-index: 1;
	display: none;
	margin: 5px 0;
}

#layerBox {
	position: absolute;
	width: 300px;
	background-color: #fff;
	height: calc(100% - 20px);
	font-family: microsoft jhenghei;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
	padding: 10px;
	z-index: 1;
	display: none;
}

#layerBox .title {
	margin: 10px;
	margin-right: 4px;
	height: 28px;
	line-height: 28px;
	font-weight: bold;
	font-size: 1.1em;
}

#layerBox .title img {
	position: relative;
	top: 2px;
	margin-right: 5px;
}

#layerBox .title .addLayerBtn {
	float: right;
	color: #ffffff;
	font-size: 1em;
	background-color: #79b92e;
	border-radius: 4px;
	padding: 3px 9px;
	line-height: initial;
	cursor: pointer;
	font-weight: normal;
	transition: .3s;
}

#layerBox .title .addLayerBtn:hover {
	background-color: #62b108;
	box-shadow: 2px 2px 7px #d0d0d0;
}

#layerBox .title .addLayerBtn:active {
	position: relative;
	top: 1px;
}

#layerBox .title .addLayerBtn img {
	margin-left: 5px;
	transition: .3s;
	position: relative;
	top: 2px;
    /* padding-left: 5px; */
    /* border-left: 1px solid #54a057;
    box-shadow: inset 1px 0 0 #8BC34A; */
	;
}

#layerBox .title .addLayerBtn.opened {
	box-shadow: 0 0 1px 1px #b5e62a;
	background-color: #fff;
	color: #79b92e;
	opacity: 0;
}

#layerBox .title .addLayerBtn.opened img {
	transform: rotate(45deg);
}

/* 新增圖層區 */
.pop-layerList {
	position: fixed;
	background-color: #599de0;
	width: 200px;
	height: 100%;
	right: 295px;
	top: 55px;
	display: none;
	z-index: 1;
	height: calc(100% - 82px);
}

ul.list-title {
	margin: 0;
	padding: 10px;
	list-style: none;
	line-height: 2em;
	overflow: auto;
	height: calc(100% - 21px);
}

ul.list-title>li {
	padding: 0 5px;
	cursor: pointer;
	color: #fff;
	text-shadow: 0 0 5px #3c70a5;
	font-size: 14px;
	line-height: 2.8;
}

ul.list-title>li.selected {
	background-color: rgba(255, 255, 255, .3);
	border-radius: 5px;
}

ul.list-content {
	box-sizing: border-box;
	position: absolute;
	right: 200px;
	margin: 0;
	padding: 10px;
	width: 235px;
	height: 100%;
	background-color: #fff;
	list-style: none;
	line-height: 2em;
	display: none;
    /*box-shadow: 3px 0 5px #d4d4d4;*/
	overflow: auto;
	top: 0;
}

ul.list-content li {
	position: relative;
	padding: 5px 0;
	border-radius: 5px;
	color: #616161;
	text-shadow: none;
}

ul.list-content li span {
	display: inline-block;
	max-width: 179px;
}

ul.list-content li:after {
	border-bottom: 1px solid #dfedf7;
	content: '';
	width: 100%;
	position: absolute;
	left: 0;
	bottom: 0;
}

ul.list-content li.disable {
	color: #ccc9c9;
	cursor: not-allowed;
}

ul.list-content li:hover {
	background-color: #cde2f6;
}

ul.list-content li.disable:hover {
	background-color: transparent;
}

ul.list-content li img {
	float: right;
	position: relative;
	top: 8px;
}

#tip {
	padding: 10px 0px;
	margin: 0 8px;
	border: 1px solid #d7e5f1;
	border-right: none;
	border-left: none;
	margin-bottom: 10px;
	color: #fff;
	font-size: 0.9rem;
	line-height: 1.5em;
}

.pop-legendList {
	position: fixed;
	background-color: #f8f7f6;
	border-left: 1px solid #eee;
	padding: 10px;
	padding-right: 25px;
	height: 100%;
	right: 295px;
	top: 55px;
	box-sizing: border-box;
	display: none;
	overflow: auto;
	min-width: 170px;
	color: #000;
}

.pop-legendList ul {
	margin: 0;
	padding: 0;
	font-size: 16px;
	font-weight: bold;
	color: #000;
}

.pop-legendList li {
	list-style: none;
	line-height: 2em;
	color: #454545;
	cursor: default;
	font-size: 14px;
	font-weight: normal;
}

.pop-legendList li img {
	position: relative;
	top: 2px;
}

.close-btn {
	position: absolute;
	box-shadow: 2px 0 5px #cacaca;
	padding: 7px 9px;
	border-radius: 5px 0px 0px 5px;
	top: 0;
	left: -32px;
	cursor: pointer;
	background-color: #fff;
}

#layerBox .close-btn {
	left: 320px;
}

#layerBox .pop-legendList .close-btn {
	right: 0px;
	box-shadow: none;
	position: absolute;
	left: initial;
	top: 0px;
	background-color: transparent;
}

#layerBox .pop-layerList .close-btn {
	position: fixed;
	left: 756px;
	z-index: 1;
	top: 44px;
}

.close-btn img {
	width: 14px;
	opacity: .6;
	transition: .5s;
}

.close-btn:hover img {
	opacity: 1;
}

.addLayerBtn {
	float: left;
	font-weight: normal;
	font-size: 1rem;
	background-color: #8BC34A;
	border-radius: 3px;
	padding: 1px 5px;
	cursor: pointer;
}

.tocTitle {
	max-width: 65.6%;
	display: inline-block;
}