@import "font-awesome.css";
/*左邊按鈕小清單*/
.listBtnBox{
	z-index: 3;
	position: absolute;
	left: 5px;
	bottom: 34%;
	background-color: #334979;
	padding: 5px 5px;
}
.listBtnBox a{/*border: 1px solid #ff0;*/
	display: block;
	width: 40px;
	height: 40px;
	text-indent: 100% ;
	white-space: nowrap;
	overflow:hidden;
}
.listBtnBox .setting{
	background: #334979 url(../images/Analysis/list_setting.svg)no-repeat;
	background-position: center center;
	background-size: 30px auto;
}
.listBtnBox .layers{
	background: #334979 url(../images/Analysis/list_layers.svg)no-repeat;
	background-position: center center;
	background-size: 40px auto;
}
.listBtnBox .message{
	background: #334979 url(../images/Analysis/list_message.svg)no-repeat;
	background-position: center center;
	background-size: 30px auto;
}
.listBtnBox a:hover{
	background-color: #223152;
}
.btnBox{
	z-index: 2;
	position: absolute;
	bottom: 0;
	left: 0;
	display: table;
	width:100%;
	height: 60px;
	background-color: #334979;
	padding: 10px 0;
}
.btnBoxClose{
	bottom: -100px;
}
.mapBox{
	z-index: 1;
	position: absolute;
	top: 0;
	left: 0;
	width:100%; 
}

.listTitle{/*border: 1px solid #ff0;*/
	position: absolute;
	margin-top: -50px;
	margin-left: 10px;
	height: 20px;
	border-radius: 10px 10px 0 0;
	color: #fff;
	padding: 10px 10px 10px 40px;
}
.listTitle a{
	color: #fff;
	text-decoration: none;
}
.settingBox .listTitle{
	background: #334979 url(../images/Analysis/list_setting.svg)no-repeat;
	background-position: 1% center;
	background-size: 30px auto;
}
.layersBox .listTitle{
	background: #334979 url(../images/Analysis/list_layers.svg)no-repeat;
	background-position: 1% center;
}
.messageBox .listTitle{
	background: #334979 url(../images/Analysis/list_message.svg)no-repeat;
	background-position: 1% center;
	background-size: 30px auto;
}
.messageBox .listTitle h4{
	margin-right: 10px;
}
.listTitle h4{
	display: block;
	float: left;
}
.listTitle> ul.tabs{
	display: block;
	width: 355px;
}
.listTitle> ul.tabs li{
	display: block;
	float: left;
	margin:0 2px;
}
.listTitle> ul.tabs a{
	display: block;
	padding:2px 10px;
	background-color: #fff;
	color: #334979;
	border-radius:20px;
	text-decoration: none;
	transition:all 0.3s;
}
.listTitle> ul.tabs a:hover{
	color: #29ABE2;
}
.listTitle> ul.tabs .active a{
	color: #29ABE2;
	background-color: #000;
	border-radius:20px;
	box-shadow: 1px 1px 10px rgba(0,0,0,0.2);
}


.btnBox ul.btnArea li{
	/*border: 1px solid #ff0;*/
	display: block;
	float: left;
	width: 90px;
	height: 110px;
	color: #fff;
	font-size: 0.875em;
	margin-left: 2px;
	text-align: center;
	transition: all 0.3s;
}

.btnBox ul.btnArea li a
,.btnBox ul.setting_btnArea li a{
	box-shadow: inset 0px 0px 1px #fff,inset 0px 0px 1px #fff,inset 0px 0px 1px #fff; 
	display: block;
	width: 60px;
	height: 60px;
	margin: 0 auto;
	line-height: 60px;
	border-radius: 50%;
	overflow: hidden;
	/*text-indent: 100% ;
	white-space: nowrap;
	overflow:hidden;*/
}
.btnBox ul.btnArea li:hover a,
.btnBox ul.setting_btnArea li:hover a{
	box-shadow: 0 0 0 1px #fff,inset 2px 2px 5px #000 ,2px 2px 5px #000; 
}
.btnBox ul.btnArea li.in a,
.btnBox ul.setting_btnArea li.in a{
	box-shadow: 0 0 0 2px #fff,inset 4px 4px 10px #000,inset 0px 0px 3px #fff,inset 0px 0px 3px #fff; 
}
/*工具列*/
ul.setting_btnArea li{
	width: 60px;
	height: 60px;
	margin: 0 5px;
	float: left;
}
.settingBox li.settingBox_hand a{
	background:url(../images/Analysis/setting_img_hand.svg)no-repeat;
}
.settingBox li.settingBox_word a{
	background:url(../images/Analysis/setting_img_1.svg)no-repeat;
}
.settingBox li.settingBox_point a{
	background:url(../images/Analysis/setting_img_2.svg)no-repeat;
}
.settingBox li.settingBox_line a{
	background:url(../images/Analysis/setting_img_3.svg)no-repeat;
}
.settingBox li.settingBox_surface a{
	background:url(../images/Analysis/setting_img_4.svg)no-repeat;
}
.settingBox li.settingBox_remove a{
	background:url(../images/Analysis/setting_img_5.svg)no-repeat;
}
.settingBox li.settingBox_again a{
	background:url(../images/Analysis/setting_img_6.svg)no-repeat;
}

/*災害資訊圖層套疊*/
.layersBox li.layers_cloud_color a{
	background:url(../images/Analysis/layers_img_cloud_color.png)no-repeat;
}
.layersBox li.layers_cloud_ColorAccent a{
	background:url(../images/Analysis/layers_img_cloud_ColorAccent.png)no-repeat;
}
.layersBox li.layers_rain a{
	background:url(../images/Analysis/layers_img_rain.svg)no-repeat;
}
.layersBox li.layers_etqpf a{
	background:url(../images/Analysis/layers_img_etqpf.svg)no-repeat;
}
.layersBox li.layers_qpesums a{
	background:url(../images/Analysis/layers_img_qpesums.svg)no-repeat;
}
.layersBox li.layers_rain24hr a{
	background:url(../images/Analysis/layers_img_rain24hr.svg)no-repeat;
}
.layersBox li.layers_river a{
	background:url(../images/Analysis/layers_img_river.svg)no-repeat;
}
.layersBox li.layers_riverRange a{
	background:url(../images/Analysis/layers_img_riverRange.svg)no-repeat;
}
.layersBox li.layers_hillside a{
	background:url(../images/Analysis/layers_img_hillside.svg)no-repeat;
}
.layersBox li.layers_typhoon a{
	background:url(../images/Analysis/layers_img_typhoon.svg)no-repeat;
}
.layersBox li.layers_layer a{
	background:url(../images/Analysis/layers_img_layer.svg)no-repeat;
}
.layersBox li.layers_qpesumsHot a{
	background:url(../images/Analysis/layers_img_qpesumsHot.svg)no-repeat;
}
.layersBox li.layers_news a{
	background:url(../images/Analysis/layers_img_news.svg)no-repeat;
}


/*統計資料*/
.messageBox li.message_1-1 a{
	background:url(../images/Analysis/message_img_1-1.svg)no-repeat;
}
.messageBox li.message_1-2 a{
	background:url(../images/Analysis/message_img_1-2.svg)no-repeat;
}
.messageBox li.message_1-3 a{
	background:url(../images/Analysis/message_img_1-3.svg)no-repeat;
}
.messageBox li.message_2-1 a{
	background:url(../images/Analysis/message_img_2-1.svg)no-repeat;
}
.messageBox li.message_2-2 a{
	background:url(../images/Analysis/message_img_2-2.svg)no-repeat;
}
.messageBox li.message_2-3 a{
	background:url(../images/Analysis/message_img_2-3.svg)no-repeat;
}
.messageBox li.message_2-4 a{
	background:url(../images/Analysis/message_img_2-4.svg)no-repeat;
}
.messageBox li.message_2-5 a{
	background:url(../images/Analysis/message_img_2-5.svg)no-repeat;
}
.messageBox li.message_2-6 a{
	background:url(../images/Analysis/message_img_2-6.svg)no-repeat;
}
.messageBox li.message_3-1 a{
	background:url(../images/Analysis/message_img_3-1.svg)no-repeat;
}
.messageBox li.message_3-2 a{
	background:url(../images/Analysis/message_img_3-2.svg)no-repeat;
}
.messageBox li.message_3-3 a{
	background:url(../images/Analysis/message_img_3-3.svg)no-repeat;
}


/*統計分析-警界發布評估(成大用)*/
/*中間選取表格*/
.alertAppraisalTB{
	position: relative;
    width:100%;
    height: 100%;
    padding-bottom: 45%;
    overflow: auto;
}
.alertAppraisalTB .title{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	line-height: 40px;
	background-color: #334979;
	color: #fff;
	text-align: center;
	font-size: 20px;
}
.alertAppraisalTB .footer{
	position: fixed;
	bottom: 0;
	left: 0;
	clear: both;
	width: 100%;
	padding: 5px 0;
	background-color: #334979;
	text-align: right;
}
.alertAppraisalTB table{
	width:100%;
	margin-top: 35px;
	float: left;
}
.alertAppraisalTB table.left{
	border-right:1px solid #eee;
}
.form-control {
    display: inline-block;
    width: auto;
    height: 30px;
    text-align:center;
    padding: 4px 2px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    font-family:"微軟正黑體";
}
.saveBtn{
	display: inline-block;
    padding: 4px 12px;
    margin-bottom: 0;
    font-size: 14px;
    text-decoration: none;
    font-weight: normal;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #333;
    background-color: #fff;
    border-color: #ccc;
    margin-right:  2px;
}
.saveBtn:hover{
	background-color: #eee;
}
.alertAppraisalTB table thead{
	background-color: #428cca;
	color: #fff;
	padding: 10px 0;
}
.alertAppraisalTB table th{
	padding: 10px 0;
	text-align: center;
}
.alertAppraisalTB table td{
	text-align: center;
	padding: 5px 0;
}
.alertAppraisalTB table tbody tr{
	border-bottom: 1px solid #eee;
}
.alertAppraisalTB table tbody tr:hover{
	background-color: #eee;
}

.alertAppraisalTB table tbody tr.BGred{
	background-color: #ff0000;
	color: #fff;
}
.alertAppraisalTB table tbody tr.BGpink{
	background-color: #ffc0cb;
	color: #000;
}
.alertAppraisalTB table tbody tr.BGyellow{
	background-color: #ffff00;
	color: #000;
}
.alertAppraisalTB table tbody tr.BGlightyellow{
	background-color: #ffffe0;
	color: #000;
}
.alertAppraisalTB table tbody tr.BGlightgreen{
	background-color: #90ee90;
	color: #000;
}

.selectBox{
    padding:5px 5px;
}
.savebtnBox{
    padding:5px 5px;
}
.selectBox label{
    display:inline-block;
    color:#fff;
}







.BGred{
	color: #ff0000;
}
.BGpink{
	color: #ffc0cb;
}
.BGyellow{
	color: #ffff00;
}
.BGlightyellow{
	color: #ffffe0;
}
.BGlightgreen{
	color: #90ee90;
}
.alertAppraisalTB .footer .info{
    color:#fff;
    padding:5px 5px;
    margin-bottom:5px;
    border-bottom:1px dotted #ccc;

}

/*QPF 4顆按鈕*/
#QPF_Btnbox{
	z-index: 100;
    position:absolute;
	top: 50px;
	left: 10px;
    width:600px;
    height:50px;
}
#QPF_Btnbox a{
	display: block;
	float: left;
	margin-right: 10px;
	position: relative;
	width: 60px;
	height: 60px;
	line-height: 60px;
	text-align: center;
	color: #fff;
	border-radius: 50%;
	background-color: #F7931E;
	box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
	transition: 0.3s all;
}
#QPF_Btnbox a:hover{
	margin-top: 8px;
	box-shadow: 1px 1px 10px rgba(0,0,0,0.5),inset 1px 1px 20px rgba(175,87,0,0.8);

}
#QPF_Btnbox a:before{
	content: attr(title);
	display: block;
	position: absolute;
	top: 3px;
	left: -5px;
	width: 17px;
	height: 22px;
	line-height: 22px;
	padding-left: 5px;
	text-align: left;
	font-size: 12px;
	border-radius: 50%;
	background-color: #F7931E;
}
#QPF_Btnbox a:after{
	content: "H";
	display: block;
	position: absolute;
	bottom: 3px;
	left: 15px;
	width: 17px;
	height: 22px;
	line-height: 22px;
	padding-left: 5px;
	text-align: center;
	font-size: 12px;
	color: #fff;
}

#QPF_Btnbox a.ok{
    background-color: #5cb85c;
}
#QPF_Btnbox a.ok:before{
	background-color: #5cb85c;
}
#QPF_Btnbox a.ok:hover{
	box-shadow: 1px 1px 10px rgba(0,0,0,0.5),inset 1px 1px 20px rgba(51,99,51,0.8);

}
/*成大警戒發布評估內容*/
#dvd_info{
	z-index: 100;
    position:absolute;
	top: 120px;
	left: 10px;
    width:295px;
    height:240px;
    border-radius: 4px;
    padding: 10px;
    box-sizing: border-box;
	background-color: #F7931E;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f7931e+0,ce6700+100 */
    background: rgb(247,147,30); /* Old browsers */
    background: -moz-linear-gradient(-45deg,  rgba(247,147,30,1) 0%, rgba(206,103,0,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg,  rgba(247,147,30,1) 0%,rgba(206,103,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg,  rgba(247,147,30,1) 0%,rgba(206,103,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7931e', endColorstr='#ce6700',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	color: #fff;
	overflow-y:auto;
    font-size:16px;
}
#dvd_info label{
    display:block;
    font-size:16px;
    margin-bottom:0px;
    font-weight:800;
    text-shadow:1px 1px 5px rgba(0,0,0,0.5);
}