@charset "UTF-8";
/**
 * 石川県河川情報
 * 共通CSS
 */
/* ------------------------Common Style */
body{
	width:100%;
	height:100%;
	font-family:"メイリオ", Meiryo,"MS Pゴシック",sans-serif;
	font-size:12px;
	color:#000;
}
/* aside menu なし */
body.nonAside{
	background: none;
}
/*FPT-ToanNB add&edit for i-top [block1-begin] -->*/
a{
	text-decoration: none;
	color: #4a4a4a;
}
h1,h2,h3,h4,h5,h6,th{
	font-weight:normal;
}
table th{
	background: #dde5ec;
	text-align: center;
}
.odd{
	background: #fff;
}
.even{
	background: #eaedee;
}

button{
	margin: 0;
	padding: 0;
	border: none;
	cursor: pointer;
	background: transparent;
}

/*=======================
 	Base layout
  =======================*/
#header{
	position: relative;
	min-width: 990px;
	width:100%;
	box-shadow: 0px 1px 3px rgba(0,0,0,0.25);
	-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.25);
	z-index: 100;
	/*background: url(../images/common/headerBg.png) repeat-x;*/
	*background: url(../images/common/glonaviBg.png) repeat-x;


}
/* Modified by DuyenHT1 20170222 start */
#main {
    width: 1244px;
    margin: 0 auto;
    background: none;
    height: auto;
    position: relative;
    margin-bottom: 1px;
/*     min-height: 879px; */
}
.main_intra {
    width: 1244px;
    margin: 0 auto;
    background: none;
    height: 820px;
    position: relative;
    margin-bottom: 1px;
/*     min-height: 879px; */
}
.main_top{
	width: 1244px;
    margin: 0 auto;
    background: none;
    min-height: 700px;
    height: auto;
    position: relative;
    margin-bottom: 1px;
}
/* Modified by DuyenHT1 20170222 end */

/*=======================
	Header
	+ Global Navigation
	+ News
  =======================*/
.globalNavi{
    position: relative;
    height: 42px;
    /* DucNM21 */
    background-color: white;
    width: 1212px;
    padding: 0 20px 0 12px;
    /* DucNM21 */
    margin: 0 auto;
    border-bottom: none;
}
/* Added by DuyenHT1 20170305 start */
.globalNavi_modified {
	width: 1230px !important;
}
div > div#header > div.globalNavi_modified{
	width: 1245px !important;
}
/* Added by DuyenHT1 20170305 end */

div.globalNavi > div {
    background: #fcbc24;
    padding-right: 20px;
    width: 100%;
}
div.topicPathBox {
    background: #ffffff;
    border-top: 1px solid #c0cbcf;
    border-bottom: 3px solid #ffa200;
}
div.topicPathBox ul.topicPath {
    list-style: none;
    margin: 0 auto;
    padding: 0 0 0 21px;
    height: 17px;
    width: 1227px;
}
h1 {
    width: 206px;
    padding: 0;
    height: 41px;
    text-align: left;
    background: url(../public_images/common/imgDotLineY.png) repeat-y right top;
}
/* system title */
h1 a{
	display:block;
	color: #000;
	letter-spacing: 1px;
	font-size: 14px;
	width: 146px;
	height: 38px;
	padding: 0 0 0 62px;
	*background: url(../images/common/prefLogo.png) no-repeat 13px 5px;
	background: url(../public_images/common/imgH1.png) no-repeat 0px -1px;
}

h1 a#doboku{
	background: url(../public_images/common/imgH1_Doboku.png) no-repeat 0px -1px;
}

.globalNavi ul li{
   display: inline-block;
   width: 105px;
   background: url(../public_images/common/imgDotLineY.png) repeat-y right top;
   height: 41px;
   text-align: center;
   top: 0;
   font-size: 15px;
   float: left;
}
.globalNavi ul li a:hover{
	color: #2b5d8b;
}

/* ---------------------グロナビ左 */
ul.naviBtn{
	position: absolute;
	top: 0;
	left: 218px;
	*border-right: 1px solid #bac2c9;
}

div.globalNavi ul.naviLink li {
    display: inline-block;
    width: auto;
    height: 41px;
    text-align: center;
    top: 0;
    font-size: 12px;
    float: left;
    margin-right: 20px;
    padding-left: 20px;
}

div.globalNavi ul.naviLink li#cautionMenu {
    background: url(../public_images/common/iconHins.png) no-repeat 0px 10px;
}
div.globalNavi ul.naviLink li#help {
    background: url(../public_images/common/iconHelp.png) no-repeat 0px 10px;
    margin-right: 30px;
    padding-left: 0px;
    width: 20px;
}
div.globalNavi ul li a {
    color: #602f00;
}
div.globalNavi ul li a:hover {
    color: #ffffff;
}
div.globalNavi a, div.globalNavi span {
    display: block;
/*     padding: 12px 0 0 0; */
    color: #602f00;
    text-decoration: none;
    width: 100%;
    height: 41px;
    text-align: center;
}
div.globalNavi ul.naviLink {
    position: absolute;
    top: 0;
    right: 0;
}
div.globalNavi ul.naviLink li.help {
    background: none;
    margin-right: 20px;
    padding-left: 0px;
    width: 20px;
}
div.topicPathBox ul.topicPath li#toplist {
    background: url(../public_images/common/iconHomeS.png) no-repeat 0 3px;
    padding: 0 0 0 16px;
    line-height: 18px;
}
div.topicPathBox ul.topicPath li {
    display: inline-block;
    font-size: 12px;
    margin: 0px 0 0;
}
div.headerNews {
    height: 31px;
    font-size: 12px;
    margin: 0 auto;
    width: 1212px;
    padding-top: 2px;
    box-shadow: none;
    padding-right: 20px;
    padding-left: 12px;
}
.reloadBtn.top {
    position: absolute;
    top: 2px;
    right: 30px;
}
.reloadBtn {
    position: absolute;
    top: 4px;
    right: 25px;
    width: 27px;
    height: 28px;
    background: url(../public_images/button/reload.png) no-repeat right top;
}
div.globalNavi ul.naviBtn li.on#top a, div.globalNavi ul.naviBtn li.on#top span {
    background: #fffbef;
}
div.globalNavi ul.naviBtn li#top a, div.globalNavi ul.naviBtn li#top span {
    letter-spacing: 3px;
/*     padding: 12px 0 0 10px; */
}
div.globalNavi ul.naviBtn li.on a, div.globalNavi ul.naviBtn li.on span {
    background: #fffbef;
    margin-left: -1px;
}
div.topicPathBox ul.topicPath li:before {
    content: "＞";
    padding: 0 5px;
}
div.topicPathBox ul.topicPath li:first-child:before {
    content: "";
    padding: 0;
}
div.topicPathBox ul.topicPath li a{
	text-decoration: underline;
	color: #f8cd50;
}

.naviBtn li a,
.naviBtn li span {
    display: block;
/*     width: 96px; */
	width: 100%;
    height: 41px;
/*     padding: 13px 0 0 0; */
    color: #000;
    line-height: 45px;
    text-align: center;
}
	.naviBtn li a:before,
	.naviBtn li span:before {
		*content:url(../images/menu/gnavi_marker.png);
		*margin-right:4px;
	}

.naviBtn div {
	*background: linear-gradient(#fff 10%, #ecf2f7 100%);
	*background: -webkit-linear-gradient(#fff 10%, #ecf2f7 100%);
	*border-left: 1px solid #bac2c9;
	border-left: none;
}

/* 選択中 */
.naviBtn div.is-selected{
	background: #fffbef;
	*background: linear-gradient(#d9e8f5 10%, #cde0ef 100%);
	*background: -webkit-linear-gradient(#d9e8f5 10%, #cde0ef 100%);
	*border-left: 1px solid #bac2c9;
	border-left: none;
	width: 104px;
}
/*FPT-ToanNB add&edit for i-top [block1-end] --<*/

.naviBtn div.is-selected a,
.naviBtn div.is-selected span{
	color: #602f00;
	*border-left: 1px solid #d3e4f2;
}

/* ---------------------グロナビ右 */
ul.naviLink{
	position: absolute;
	top: 7px;
	right: 10px;
}
.naviLink a{
	display:block;
	height: 21px;
/* 	padding: 0 7px 0 4px; */
	margin: 0 2px;
	color: #000;
	text-align: right;
	line-height:45px;
}

/* 土砂災害情報 */
.naviLink li.sabo a{
	width: 94px;
	border-right: 1px solid #bac2c9;
}
.naviLink li.sabo a:before{
	content: url(../images/menu/icon_sabo.png);
	position: absolute;
	top: 2px;
	left:8px;
}
/* ヘルプ */
.naviLink li.help a{
	width: 94px;
	/*FPT-ToanNB edit for i-top -->*/
	*background: url(../images/menu/icon_help.png) no-repeat 4px 0px;
	background: url(../images/menu/icon_help.png) no-repeat 0px 10px;
	margin-right: 15px;
	/*FPT-ToanNB edit for i-top --<*/
	width: 20px;
}
.naviLink li.help a:HOVER{
	background-image: url(../images/menu/icon_help_on.png);
}
/* ---------------------緊急新着情報 */
.headerNews{
	position: relative;
	width: 1008px;
	height: 27px;
	z-index: 100;
	background: #fff;
	box-shadow: 0px 1px 3px rgba(0,0,0,0.25);
	-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.25);
	margin: 0 auto;
	box-shadow:none;
}

/*情報あり*/
p.newsLogo{
	float: left;
	width: 90px;
	height: 22px;
	text-align: center;
	letter-spacing: 1px;
	line-height:22px;
	color: #fff;
	background: url(../images/common/newsLogo.png) no-repeat;
	margin: 2px 15px 3px 5px;
}
/*情報なし*/
p.newsLogo_no{
	float: left;
	width: 90px;
	height: 22px;
	text-align: center;
	letter-spacing: 1px;
	line-height:22px;
	color: #fff;
	background: url(../images/common/newsLogo_no.png) no-repeat;
	margin: 2px 15px 3px 5px;
}


span.newsRain{
	float: left;
	display:block;
	width: 22px;
	height: 22px;
	margin:2px 2px 3px 0px;
	background: url(../images/common/icon_rainfall.png) no-repeat;
	cursor: pointer;
}
span.newsRain:hover{
	float: left;
	display:block;
	width: 22px;
	height: 22px;
	margin:2px 2px 3px 0px;
	background: url(../images/common/icon_rainfall_hover.png) no-repeat;
}
span.newsWarning{
	float: left;
	display:block;
	width: 22px;
	height: 22px;
	margin:2px 2px 2px 4px;
	background: url(../images/common/icon_flood.png) no-repeat;
	cursor: pointer;
}
span.newsWarning:hover{
	float: left;
	display:block;
	width: 22px;
	height: 22px;
	margin:2px 2px 2px 4px;
	background: url(../images/common/icon_flood_hover.png) no-repeat;
}
span.newsStage{
	float: left;
	display:block;
	width: 22px;
	height: 22px;
	margin:2px 2px 3px 4px;
	background: url(../images/common/icon_stage.png) no-repeat;
	cursor: pointer;
}
span.newsStage:hover{
	float: left;
	display:block;
	width: 22px;
	height: 22px;
	margin:2px 2px 3px 4px;
	background: url(../images/common/icon_stage_hover.png) no-repeat;
}
span.newsDam{
	float: left;
	display:block;
	width: 22px;
	height: 22px;
	margin:2px 2px 3px 4px;
	background: url(../images/common/icon_dam.png) no-repeat;
	cursor: pointer;
}
span.newsDam:hover{
	float: left;
	display:block;
	width: 22px;
	height: 22px;
	margin:2px 2px 3px 4px;
	background: url(../images/common/icon_dam_hover.png) no-repeat;
}

/* link - Icon */
.headerNews img{
	margin:2px 2px 0 0;
	cursor: pointer;
	vertical-align: bottom;
}
/*.headerNews span{
	cursor: default;
	line-height: 18px;
	margin:0 0 0 5px;
}*/

.headerNews span.comment{
	position: absolute;
	cursor: default;
	line-height: 18px;
	margin: 6px 0px 3px 9px;
}

/* 最新観測日時 */
p.obsTime{
	position: absolute;
	top: 9px;
	right: 60px;
}

/*=========================
	コンテンツ レイアウト base
  =========================*/
.contents{
	position: relative;
	margin-left: 204px;/* Change by KienNT37 12月12日 p-riverMap-1 */
	padding-left: 9px;/* Add by KienNT37 12月12日 p-riverMap-1 */
	width:auto;
}
/*FPT-ToanNB add for i-top [block2-begin] -->*/
.contents.top-intra {
    width: 1224px;
    margin-left: 0;
    padding-left: 0;
    padding-top: 0;
    min-height: 0px;
}
.dataBox.top-intra ul.notice {
	list-style-image: none;
	margin: 0;
}
.dataBox.top-intra ul.notice li {
    font-size: 13px;
    line-height: 19px;
    margin: 10px 0;
    word-wrap: break-word;
}
.dataBox.top-intra {
    width: 100%;
    position: relative;
    margin-top: 14px;
    margin-left: 0;
}
div.mapBox {
    min-height: 544px;
    width: 832px;
}
.mapArea.top-intra {
    width: 832px;
    height: auto;
    min-height: 544px;
}
.mapArea.top-intra .time {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 130px;
    height: 25px;
    padding: 0 5px;
    background: #fff;
    border: 1px solid #c3d0db;
    line-height: 26px;
    text-align: center;
}
.mapArea.top-intra p.mapCaution {
    font-size: 12px;
    position: absolute;
    top: 35px;
    left: 5px;
}
.mapArea.top-intra ul.symbolSelect {
    left: 120px;
}
div.infoBox.top-intra {
    width: 368px;
    position: relative;
    margin-left: auto;
    margin-right: 0;
    margin-top: 10px;
}
div.helpBoxR.top-intra {
    width: 368px;
    position: relative;
    margin-left: auto;
    margin-right: 0;
    margin-top: auto !important;
}
div.helpBoxR.top-intra h4 {
    width: 100%;
    font-size: 18px;
    background: url(../public_images/common/top_helpBoxLine.png) repeat-x bottom;
    height: 48px;
    line-height: 48px;
    margin-top: 20px;
}
div.helpBoxR.top-intra h4 span.notice {
    background: url(../public_images/common/top_notice.png) no-repeat left 7px;
}
div.helpBoxR.top-intra h4 span {
    display: inline-block;
    width: 48px;
    height: 43px;
    vertical-align: middle;
    margin-top: -7px;
}
img.symbolData:hover {
	cursor: pointer;
}
/*FPT-ToanNB add for i-top [block2-end] --<*/

/* 画面タイトル＋時刻操作部 */
/* データ表示部 */
.dataHeaderBox,
.dataBox{
	position: relative;
	margin:5px 0 5px 10px;
	background: #fff;
	/* width: 865px; Change by NghiaNV1 2016.12.30 i1204*/
	height:auto;
}
.dataHeaderBox_i{
	margin:10px 0 15px 0px;
}

.dataHeaderBox_otherintra{
	margin: 5px 0 5px 0px;
}

/* FPT-TuyenLA add for i1202 */
.i1202{
	margin:5px 0 5px 0;
	width: 100%;
}

.dataBox a{
/*	color: #005c82;*/
	*color: #1f4d77;
	color: blue;
	text-decoration: underline;
}

/* Added by TuyenLA - fix comment p-Top-3 */
.infoBox a.linkTop3{
	text-decoration: none !important;
}

/* aside menu なし向け (帳票・水防FAX) */
.contents-wide{
	width: 100%;
	margin: 0 auto;
	position: relative;
}
.contents-wide .dataHeaderBox,
.contents-wide .dataBox{
	width: 950px;
	height:auto;
}

/*=======================
	contents
	共通メニュー・操作部
  =======================*/
/* Base */
div.dataMenuBox{
	position: relative;
	width: 100%;
	height: 28px;
	border-bottom: 2px solid #006cb1;
	background: #c1c7cb;
}

/* ----------------データ種選択メニュー  */
ul.dataSelect{
	position: absolute;
	top: 6px;
	left: 5px;
}
.dataSelect li{
	float: left;
	margin-right:1px;
}
.dataSelect li a,
.dataSelect li span{
	display: block;
	min-width: 80px;
	height: 21px;
	color: #1c486f;
	text-align: center;
	line-height:22px;
	padding: 0 4px;
	background: #f3f7fa;
	border-top:#fff solid 1px;
}
	.dataSelect li a:hover{
		background: #d9e5ee;
		border-top:1px solid #d9e5ee;
	}
.dataSelect li span{
	cursor: default;
}
/* first tab */
.dataSelect li:first-child{
	background: url(../images/menu/dataMenu_tabL.png) no-repeat left top;
}
.dataSelect li:first-child a{
	background: #f3f7fa;
	margin: 0 0 0 5px;
}
.dataSelect li:first-child:hover{
	background: url(../images/menu/dataMenu_tabL_hover.png) no-repeat left top;
}
.dataSelect li:first-child a:hover{
	background: #d9e5ee;
}

/* last tab */
.dataSelect li.lastTab{
	background: url(../images/menu/dataMenu_tabR.png) no-repeat right top;
}
.dataSelect li.lastTab a,
.dataSelect li.lastTab span{
	background: #f3f7fa;
	margin: 0 5px 0 0;
}
.dataSelect li.lastTab:hover{
	background: url(../images/menu/dataMenu_tabR_hover.png) no-repeat right top;
}
.dataSelect li.lastTab a:hover{
	background: #d9e5ee;
}

/* selected tab */
.dataSelect li.is-selected{
	background: #006cb1;
}
.dataSelect li.is-selected a,
.dataSelect li.is-selected span{
	color: #fff;
	background: #006cb1;
	border-top: #2692d7 solid 1px;
}
.dataSelect li.is-selected a:hover{
	background: #006cb1;
}
/* selected first tab */
.dataSelect li.is-selected:first-child,
.dataSelect li.is-selected:first-child:hover{
	background: url(../images/menu/dataMenu_tabL_on.png) no-repeat left top;
}
.dataSelect li.is-selected:first-child a,
.dataSelect li.is-selected:first-child:hover > a,
.dataSelect li.is-selected:first-child span{
	color: #fff;
	background: #006cb1;
	margin: 0 0 0 5px;
}

/* selected last tab */
.dataSelect li.lastTab.is-selected,
.dataSelect li.lastTab.is-selected:hover{
	background: url(../images/menu/dataMenu_tabR_on.png) no-repeat right top;
}
.dataSelect li.lastTab.is-selected a,
.dataSelect li.lastTab.is-selected:hover > a,
.dataSelect li.lastTab.is-selected:span{
	color: #fff;
	background: #006cb1;
	margin: 0 5px 0 0;
}

/* 水防FAX 画面選択メニュー ゆとりあり */
.dataSelect.floodType li a{
	min-width: 150px;
}

/* プリントボタン */
.printBtn{
	position: absolute;
	top: 1px;
	right: 25px;
	width: 27px;
	height: 28px;
	background: url(../images/button/print.png) no-repeat right top;
}
.printBtn:HOVER{
	background-image: url(../images/button/print_on.png);
}

/* 事務所選択ボタン */
.officeBtn{
	position: absolute;
	top: 1px;
	right: 53px;
	width: 27px;
	height: 28px;
	background: url(../images/button/conf.png) no-repeat right top;
}
.officeBtn:HOVER{
	background-image: url(../images/button/conf_on.png);
}

/* -------------------画面選択メニュー */
/* Base */
.dispMenuBox{
	position:relative;
	width: 100%;
	height: 27px;
/*	background:#fff;*/
}

ul.dispSelect{
	position: absolute;
	top: 4px;
	left: 5px;
	line-height: 17px;
}
.dispSelect li{
	float: left;
	border-right:1px solid #d9e7ed;
	width: 120px;
	text-align: center;
}
	.dispSelect li:first-child{
		border-left:1px solid #d9e7ed;
	}
.dispSelect li.is-selected{
	padding: 0 2px;
	width: 116px;
}
.dispSelect li a,
.dispSelect li span{
	display: block;
	width: 100%;
	color: #1c486f;
}
.dispSelect li.is-selected a,
.dispSelect li.is-selected span{
	background: #d9e7ed;
	cursor: default;
}

/* データメニュー影 */
.tabMenuBorder{
	position: absolute;
	top: 24px;
	left: -1px;
	width: 100%;
	height: 2px;
	background: #f6f7f8;
	/*border-right:1px solid #c3d0db;*/
	border-top:1px solid #c3d0db;
	z-index: -2;
}

/* 画面タイトル */
h2{
	height:20px;
	text-indent:20px;
	line-height: 20px;
	font-size: 15px;
	letter-spacing: 1px;
	background: url(../images/common/iconH2.png) no-repeat left center;
}

/*=======================
	ページ送り戻し・局選択
  =======================*/
.pagerBox{
	position: absolute;
	top: 0px;
	right: 0px;
	height:24px;
	font-size: 11px;
	margin-top: -4px;
}

.pagerBox span.pages{
	display:inline-block;
	width: 50px;
	height: 18px;
	text-align: right;
	line-height:20px;
	vertical-align: middle;
	background: url(../images/button/bgTimeBox.png) repeat-x;
	border: 1px solid #c3d0db;
	margin-bottom: 1px;
	padding-right: 2px;
	margin-top: 3px;
}

/* 局選択 */
div.pointSelectBtn,
div.pointSelectBtn a{
	width: 73px;
	height: 24px;
	font-size: 12px;
	vertical-align: middle;
	background: url(../images/button/btn.png) no-repeat;
	display: inline-block;
	text-align: center;
	cursor: pointer;
	color: #005E92;
	line-height: 24px;
	text-decoration: none;
}
/*局選択モーダルの選択ボタン*/
#pointSelectPopup button.pointSelectNoResetGrid,
#pointSelectPopup button.pointSelect{
	width: 73px;
	height: 24px;
	font-size: 12px;
	color: #005E92;
	vertical-align: middle;
	background: url(../images/button/btn.png) no-repeat;
	position: absolute;
	top:50%;
	left:5px;
	margin-top: -12px;
}

/************************/
/* 事務所選択 */

/*各事務所*/
div.officeSelect{
	margin-left:30px;
	margin-top:5px;
}
/*説明文*/
div.selectComment{
	margin:0px 30px 15px 30px;
	line-height:1.2em;
}
/*説明文*//*庁内必要行動追加用（間隔調整のため右側30→10px）*/
div.selectCommentW{
	margin:0px 10px 15px 30px;
	line-height:1.2em;
}

/************************/

button.prevPage,
button.nextPage{
	width: 48px;
	height: 17px;
	font-size: 11px;
	vertical-align: middle;
}
/* 前ページ */
button.prevPage{
	color: #1c486f;
	padding:0 0 0 6px;
	background: url(../images/button/prevPage.png) no-repeat;
}
button.prevPage:hover{
	background: url(../images/button/prevPage_hover.png) no-repeat;
}
button.prevPage.is-disabled{
	color: #a1a0a0;
	cursor: default;
	background: url(../images/button/prevPage_disabled.png) no-repeat;
}

/* 次ページ */
button.nextPage{
	padding:0 6px 0 0;
	color: #1c486f;
	background: url(../images/button/nextPage.png) no-repeat;
}
button.nextPage:hover{
	background: url(../images/button/nextPage_hover.png) no-repeat;
}
button.nextPage.is-disabled{
	color: #a1a0a0;
	cursor: default;
	background: url(../images/button/nextPage_disabled.png) no-repeat;
}

/*=======================
	時刻操作部
  =======================*/
.timeBox{
	/*width: 865px;*/
	box-sizing: border-box;	/*!!*/
	width:100%;
	height: 28px;
	margin: 4px 0 0 0;
	background: url(../images/button/bgTimeBox.png) repeat-x;
	border: 1px solid #c3d0db;
}
/* Added by DuyenHT1 20170305 start */
.timeBox_modified_intra {
	width: 1040px !important;
}
div.makeDataMenu div.timeBox_modified_intra {
	width: 1050px !important;
}
div.makeData > div.timeBox_modified_intra{
	width: 1048px !important;
}
/*  Added by DuyenHT1 20170305 end */

/*.contents-wide .timeBox{
	width: 100%; > box-sizing
}*/
/* 日時指定 */
.timeSet{
	min-width:200px;
	height:21px;
	display: inline-block;
	vertical-align: top;
	padding:0 7px;
	margin:3px 0 0 0;
	line-height: 1.5;
}
.timeSet span{
	margin:0 5px 0 5px;
	line-height:21px;
}

/* Calendarボタん */
button.calendar{
	width: 26px;
	height:21px;
	vertical-align: top;
}

.timeBox ul{
	position: relative;
	display: inline-block;
	height: 24px;
	margin: 0 5px 0 5px;
	padding: 3px 0 0 10px;
	border-left: 1px solid #c3d0db;
}
.timeBox ul li{
	float: left;
}

ul.timeChange{
	padding-left:28px;
}
/* 時計 icon */
ul.timeChange:before{
	content:url(../images/button/icon_timeClock.png);
	position: absolute;
	top: 6px;
	left:6px;
}
/* 時刻送り戻し */
.timeChange button{
	height:20px;
	color: #005E92;
	background: url(../images/button/timeBtn_intra.png) no-repeat 0% 0%;
}
.timeChange button.back01{
	width:79px;
	background-position: 0px 0px;
	padding:0 0 0 14px;
}
.timeChange button.back01:hover{
	background-position: 0px -21px;
	color:#66b6d7;
}
.timeChange button.back01.is-disabled{
	background-position: 0px -63px;
	color:#cdcdcd;
	cursor: default;
}
.timeChange button.back02{
	width:74px;
	background-position: -79px 0px;
	padding:0 0 0 10px;
}
.timeChange button.back02:hover{
	background-position: -79px -21px;
	color:#66b6d7;
}
.timeChange button.back02.is-disabled{
	background-position: -79px -63px;
	color:#cdcdcd;
	cursor: default;
}
.timeChange button.forward03{
	width:74px;
	background-position: -153px 0px;
	padding:0 10px 0 0;
}
.timeChange button.forward03:hover{
	background-position: -153px -21px;
	color:#66b6d7;
}
.timeChange button.forward03.is-disabled{
	background-position: -153px -63px;
	color:#cdcdcd;
	cursor: default;
}
.timeChange button.forward04{
	width:74px;
	background-position: -227px 0px;
	padding:0 10px 0 0;
}
.timeChange button.forward04:hover{
	background-position: -227px -21px;
	color:#66b6d7;
}
.timeChange button.forward04.is-disabled{
	background-position: -227px -63px;
	color:#cdcdcd;
	cursor: default;
}
.timeChange button.latest05{
	width:72px;
	background-position: -301px 0px;
	padding:0 10px 2px 0;
}
.timeChange button.latest05:hover{
	background-position: -301px -21px;
	color:#66b6d7;
}
.timeChange button.latest05.is-disabled{
	background-position: -301px -63px;
	color:#cdcdcd;
	cursor: default;
}

/* 時間幅切替 */
.timeMode button{
	width:54px;
	height:20px;
	color: #005E92;
	background: url(../images/button/timeMode.png) no-repeat 0% 0%;
	line-height: 21px;
}
button.switch01 {
	background-position: 0px 0px;
}
button.switch02 {
	background-position: -54px 0px;
}
button.switch01:hover {
	background-position: 0px -21px;
	color:#66b6d7;
}
button.switch02:hover {
	background-position: -54px -21px;
	color:#66b6d7;
}
button.switch01.is-selected {
	background-position: 0px -42px;
	color: #fff;
}
button.switch02.is-selected {
	background-position: -54px -42px;
	color: #fff;
}

/* ============================
	スライダー
   ============================*/
/* スライダーボタン */
.timeSlider button{
	height:21px;
	color: #005E92;
	background: url(../images/button/timeSlider.png) no-repeat 0% 0%;
}
/*再生*/
.timeSlider button.play01{
	width:35px;
	background-position: 0px 0px;
}
.timeSlider button.play01:hover{
	background-position: 0px -21px;
}
.timeSlider button.play01.is-disabled{
	background-position: 0px -63px;
	cursor: default;
}
/*一時停止*/
.timeSlider button.pause02{
	width:35px;
	background-position: -35px 0px;
}
.timeSlider button.pause02:hover{
	background-position: -35px -21px;
}
.timeSlider button.pause02.is-disabled{
	background-position: -35px -63px;
	cursor: default;
}
/*現在(予測のみ使用)*/
.timeSlider button.now06{
	width:25px;
	background-position: -70px 0px;
}
.timeSlider button.now06:hover{
	background-position: -70px -21px;
}
.timeSlider button.now06.is-disabled{
	background-position: -70px -63px;
	cursor: default;
}
/*巻き戻し*/
.timeSlider button.rew03{
	width:25px;
	background-position: -95px 0px;
}
.timeSlider button.rew03:hover{
	background-position: -95px -21px;
}
.timeSlider button.rew03.is-disabled{
	background-position: -95px -63px;
	cursor: default;
}
/*早送り*/
.timeSlider button.ff04{
	width:25px;
	background-position: -120px 0px;
}
.timeSlider button.ff04:hover{
	background-position: -120px -21px;
}
.timeSlider button.ff04.is-disabled{
	background-position: -120px -63px;
	cursor: default;
}
/*最新*/
.timeSlider button.skip05{
	width:25px;
	background-position: -145px 0px;
}
.timeSlider button.skip05:hover{
	background-position: -145px -21px;
}
.timeSlider button.skip05.is-disabled{
	background-position: -145px -63px;
	cursor: default;
}

/* ============================
	共通部品
   ============================*/
/* Horizontal Layout box */
/*-- Change by TuyenLA 12月16日 p-1202 --*/
.hrzBox {
    display: -moz-inline-box; /*for Firefox 2*/
    display: inline-block; /*for modern*/
    /display: inline; /*for ie5-7*/
    /zoom: 1; /*for ie5-7*/
	width: auto;
	height: auto;
	vertical-align: top;
}
/*-- Change by TuyenLA 12月16日 p-1202 --*/

/*-- Change by DuyenHT1 02月27日 i-1103 --*/
/*-- apply for IE --*/
_:-ms-fullscreen, :root label.disp-checkboxIE{
	margin: 0 4px 0 -7px;
}

_:-ms-fullscreen, :root .hrzBoxIE {
	width: 210px;
}
/*-- Change by DuyenHT1 02月27日 i-1103 --*/

/* Horizontal Rule */
hr{
	border: none;
	background: #f6f7f8;
	height: 1px;
	border-top: 1px solid #cbd5de;
	border-bottom: solid 2px #f6f7f8;
}
/*----------------------- ボタン汎用 */
.funcBtn{
	min-width: 65px;
	min-height: 24px;
	line-height: normal;
	font-size: 12px;
	color: #005e92 !important;
	cursor: pointer;
	background: linear-gradient(#ffffff 10%, #eeeff1 100%) !important;
	background: -webkit-linear-gradient(#ffffff 10%, #eeeff1 100%) !important;
	border-radius: 5px !important;
	border:1px solid #99a6b3 !important;
	margin:0;
	opacity:1 !important;
	filter: alpha(opacity=100) !important;

}
.funcBtn:hover{
	background: linear-gradient(#f3f3f3 10%, #c6c7ca 100%) !important;
	background: -webkit-linear-gradient(#f3f3f3 10%, #c6c7ca 100%) !important;
}
.funcBtn.is-disabled,
.funcBtn.is-disabled:hover{
	cursor:default;
	color:#b8bdc2 !important;
	border:1px solid #99a6b3 !important;
	background: #dedfe0 !important;

}
/*----------------------- チェックボックス */
input[type="checkbox"]{
	z-index:-1;
	position: relative;
	top: 0px;
	left: 10px;
	width: 1px;
}
/* default */
label.disp-checkbox{
	background-image: url(../images/common/chkBox_off.png);
	background-repeat: no-repeat;
	background-position: 7px 1px;
	cursor: pointer;
	margin: 0 4px 0 -2px;
	font-size: 12px;
	z-index: 10;
}
/* checked */
label.is-checkboxOn{
	background-image: url(../images/common/chkBox_on.png);
}
/*LinhNDH - add css for chkBox of state disable*/
label.is-checkboxDisable{
	background-image: url(../images/common/chkBox_disable.png);
}
@-moz-document url-prefix() {/*firefox対応*/
	input[type="checkbox"] {
		opacity: 0;
	}
	label.disp-checkbox span.dummy{
		font-size: 5px;
	}
}
/*----------------------- ラジオボタン */
/*input[type="radio"]{*/
	/*opacity: 0;*/
	/*z-index:-2;
	position: relative;
	top: 0px;
	left: 0px;
	width: 1px;
}*/
/* default */
/*label.disp-radio{
	background-image: url(../images/common/radio_off.png);
	background-repeat: no-repeat;
	background-position: 7px 1px;
	cursor: pointer;
	margin: 0 3px 0 0;
	padding-top: 1px;
	border: 2px solid #f1f5f7;
	border-radius: 5px;
}*/
/* checked */
/*label.is-radioOn{
	background-image: url(../images/common/radio_on.png);
	border-color: #3a98cc;
}*/

/*=======================
	color
  =======================*/

/* 表内 定数凡例色ラベル */
span.colorLbl:before{
	content: "";
	display: inline-block;
	width:6px;
	height: 10px;
	border: 1px solid #fff;
	vertical-align:top;
}
span.inner{
	display: inline-block;
/*	width:90px;*/
	width:80%;
}

/* ---------------------------雨量 */
/* 80mm以上 */
.rainfallLv5,					/* data 背景 */
.explainBox span.ex-rainfallLv5{/* 凡例, 例) */
	background: #e91e00;
}
/* 50mm以上 */
.rainfallLv4,
.explainBox span.ex-rainfallLv4{
	background: #fa9f00;
}
/* 20mm以上 */
.rainfallLv3,
.explainBox span.ex-rainfallLv3{
	background: #ffd200;
}
/* 10mm以上 */
.rainfallLv2,
.explainBox span.ex-rainfallLv2{
	background: #1172ee;
}
/* 1mm以上 */
.rainfallLv1,
.explainBox span.ex-rainfallLv1{
	background: #45cbe3;
}
/* 1mm未満 */
td.rainfallLv0,
.explainBox span.ex-rainfallLv0{
	background: #fff;
	border: 1px solid #c6ced5;
}
/* 累加雨量 */
.explainBox span.ex-rainSum{
	height: 8px;
	line-height: 8px;
	margin: 3px 0 0 0;
	padding-left:10px;
	background: url(../images/icon/ex_rainSum.png) no-repeat;
}
/* ---------------------------潮位 */
.explainBox span.ex-tide{
	height: 8px;
	line-height: 8px;
	margin: 3px 0 0 0;
	padding-left:10px;
	background: url(../images/icon/ex_tide.png) no-repeat;
}
/* ---------------------------風速 */
.explainBox span.ex-wind{
	height: 8px;
	line-height: 8px;
	margin: 3px 0 0 0;
	padding-left:10px;
	background: url(../images/icon/ex_wind.png) no-repeat;
}
/* ---------------------------予測流域平均 */
/* 予測流域平均雨量 */
td.preBasinAve{
	background: #29ac8c;
}
/* ---------------------------- 共通 */
/* 欠測 */
.missing,
span.missing:before,
.explainBox span.ex-missing{
	background: #a7a7a7;
}

/* ---------------------------- 水位 */
/*-- Change by TuyenLA 12月16日 p-1202 --*/
/* 計画高 */
td.stageLv8,					/* data 背景 */
.colorLbl.ex-stageLv8:before,	/* table header 凡例 */
.explainBox span.ex-stageLv8{	/* 凡例, 例) */
	background: #8131ac;
	color: #fff;
}
/*-- Change by TuyenLA 12月16日 p-1202 --*/

/* 付近の堤防高 */
td.stageLv7,					/* data 背景 */
.colorLbl.ex-stageLv7:before,	/* table header 凡例 */
.explainBox span.ex-stageLv7{	/* 凡例, 例) */
	background: #8131ac;
}

/*-- Change by TuyenLA 12月16日 p-1203 --*/
/* 氾濫危険 */
td.stageLv4, span.stageLv4,
span.colorLbl.ex-stageLv4:before,
.explainBox span.ex-stageLv4{
	background: #e91e00;
}
/*-- Change by TuyenLA 12月16日 p-1203 --*/

/* 避難判断 */
td.stageLv3,
span.colorLbl.ex-stageLv3:before,
.explainBox span.ex-stageLv3{
	background: #fa9f00;
}

/*-- Change by TuyenLA 12月16日 p-1203 --*/
/* 氾濫注意 */
td.stageLv2, span.stageLv2,
span.colorLbl.ex-stageLv2:before,
.explainBox span.ex-stageLv2{
	background: #ffd200;
}
/*-- Change by TuyenLA 12月16日 p-1203 --*/

/* 水防団待機 */
td.stageLv1,
span.colorLbl.ex-stageLv1:before,
.explainBox span.ex-stageLv1{
	background: #1172ee;
}
/* 河川水位 */
.explainBox span.ex-stage{
	height: 8px;
	line-height: 8px;
	margin: 3px 0 0 0;
	padding-left:10px;
	background: url(../images/icon/ex_stage.png) no-repeat;
}

/* ダム */
/* 風速 */
span.ex-over,
td.over,
dd.over,
dd.wind20over{
	background: #e91e00;
	color: #fff;
}

/* --------------------------文字色 */
.rainfallLv5,	/*tdの他にddもあるからね*/
.rainfallLv2,
td.stageLv7,
td.stageLv4,
td.stageLv1{
	color: #fff;
}
.explainBox span.ex-rainfallLv2,
.explainBox span.ex-rainfallLv5,
.explainBox span.ex-stageLv1,
.explainBox span.ex-stageLv4{
	color: #fff;
}



/*=======================
	ポップアップモーダル
  =======================*/
.white-popup{
	border-radius: 10px;
	background:#fafcfe;
	width: 700px;
	height: 590px;
	margin: 0 auto;
	padding: 10px 0 0 0;
}
/*地域選択用ミドル*//*必要行動追加で幅400→780変更*/
.white-popupM{
	border-radius: 10px;
	background:#fafcfe;
	width: 780px;
	height: 430px;
	margin: 0 auto;
	padding: 10px 0 0 0;
}

/*ミドル内左（事務所設定）*/
.popupL{
	width:380px;
	float:left;
}
/*ミドル内右（必要行動お知らせ指定）*/
.popupR{
	width:380px;
	float:right;
	padding-right:20px;
}

/*地域選択用ミドル市町サイズ*/
.white-popupM2{
	border-radius: 10px;
	background:#fafcfe;
	width: 400px;
	height: 310px;
	margin: 0 auto;
	padding: 10px 0 0 0;
}
/*確認メッセージ用スモール*/
.white-popupS{
	border-radius: 10px;
	background:#fafcfe;
	width: 400px;
	height: 250px;
	margin: 0 auto;
	padding: 10px 0 0 0;
}

/* --------------- 見出し */
.white-popup .popupHeader {
	padding-bottom: 10px;
}
.white-popup h4,.popupHeader h4{
	font-size: 17px;
	margin: 10px 0 10px 10px;
	text-indent:10px;
	letter-spacing: 1px;
	border-left: 6px solid #0086bd;
	line-height: 1em;
	background-image: none;
	display: block;
}
/* --------------- スクロール */
.white-popup .scrollBox{
	max-height: 460px;
	overflow-y: auto;
}
.popupFooter{
	clear:both;/*必要行動指定のfloat解除*/
	text-align: center;
	position: static;
	height:auto;
}
/* popup 閉じるボタン */
.popupFooter .mfp-close{
/* 	position:static; */
	position:relative;
	margin:8px auto;
	width: 77px;
	height: 23px;
	line-height: normal;
	font-size: 12px;
	color: #005e92;
	vertical-align: middle;
	padding: 0;
}

/* --------------- 個別style＠局選択モーダル */
#pointSelectPopup .scrollBox{
	max-height: 480px;
	height: 480px;
}

/* --------------- 個別style＠事務所選択モーダル */
.white-popupM .scrollBox,
.white-popupM2 .scrollBox{
	max-height: 240px;
	overflow-y: auto;
}

/* --------------- 事務所選択popup */
/* 説明文 */
#officePopup h5{
	font-size: 15px;
	line-height: 12px;
	text-indent: 6px;
	margin: 0 0 20px 20px;
	vertical-align: bottom;
	border-left:5px solid #a2bdd1;
}
/* --------------- 事務所選択確認popup */
/* 確認文 */
#officeSelectPopup .officePopup p{
	margin-left:30px;
	margin-top:20px;
	margin-bottom:10px;
	font-size: 13px;
}
/* --------------- 必要行動popup */
#actionPopup .actionPopup {
	margin-left:30px;
	margin-top:20px;
	margin-bottom:30px;
	margin-right:20px;
	font-size: 13px;
}

#actionPopup .actPopupTbl{
/* 	line-height: 20px; */
/* 	padding:2px 0; */
/* 	border: 1px solid #a4b9cb; */
}
#actionPopup .actPopupTbl td{
	height: 30px;
	text-align: baseline;
	vertical-align: baseline;
}

/*=======================
	カレンダー用のモーダル
  =======================*/
.iframe-contents{
	border-radius: 10px;
	padding: 5px;
}

/*=======================
	エラー画面
  =======================*/
div.errContents h2{
	color:#000;
	margin: 20px 0px 0px 20px;
	font-size:16px;
	line-height: 24px;
	font-weight: bold;
}
div.errContents ul{
	margin-top:15px;
	margin-left:40px;
}
div.errContents li{
	color:#000;
	font-size:16px;
	line-height: 24px;
}
div.errContents a{
	color:#005c82;
	cursor:pointer;
	text-decoration: underline;
	padding-left:20px;
	background: url("../images/common/linkMarker.png") no-repeat 0 center;
}

/*=======================
	ログイン画面
  =======================*/
.loginBox{
	position: relative;
	top:120px;
	left:180px;
	width:447px;
	height:298px;
	background: url(../images/common/login_image.png) no-repeat;
	border: solid 1px #DEDFE0;
}
.loginBox p.loginSystem{
	width:100%;
	margin:5px auto;
	text-align:center;
	height:40px;
	line-height:42px;
	font-size:20px;
}
.loginBox p.loginTitle{
	width:280px;
	margin:20px auto 0px 165px;
	text-align: left;
	height:45px;
	line-height:50px;
	font-size:18px;
}
.loginBox .inputArea{
	position: absolute;
	top:120px;
	left:0px;
	width:100%;
	height:178px;
}
.loginBox .inputArea input[type="text"],
.loginBox .inputArea input[type="password"]{
	width:200px;
	float:right;
}
.loginBox label{
	font-size:15px;
	line-height:20px;
}
.loginBox p{
	width:300px;
	margin:13px auto;
	text-align:center;
}
.loginBox .funcBtnBox{
	position: absolute;
	bottom:10px;
	width: 100%;
	height: 30px;
	margin: 15px auto 0 auto;
	text-align: center;
	clear:both;
}
.loginBox .funcBtnBox .funcBtn{
	min-width:84px;
	min-height:26px;
	margin: 0 10px;
}

/**-------- CREATED BY FPT ---------**/
.timelineTbl th.rainInfoCell {
	width: 7%;
}
.timelineTbl th.rainInfoCell2 {
	width: 11%;
}
.timelineTbl th.rainInfoCell3 {
	width: 14%;
}
.colorLegend.remake,
.dispLegend.remake,
.example.remake {
	float:left;
	min-width: 90%;
}
.colorLegend.remake {
	margin-left:0;
}
.hrzBox > span.remake {
	float: left;
    min-height: 70px;
    min-width: 5%;
    margin: 6px 0 0 5px;
}
/*FPT-ToanNB add&edit for i-top [block3-begin] -->*/
.dataHeaderBox.i1104, .dataBox.i1104 {
    position: relative;
    margin: 5px 0 5px 0;
    background: #fff;
    width: auto;
    height: auto;
}
/*FPT-ToanNB add&edit for i-top [block3-end] --<*/

/*Add by FPT - DanND 12月31日2016年  for p2002 - Start*/
/* ---------------------------雨量 */
/* 異常洪水(ダム満水) */
.damLv3,
.explainBox span.ex-damLv3{
	background: #e91e00;
	color: #fff;
}
/*洪水調節中*/
.damLv2,
.explainBox span.ex-damLv2{
	background: #fa9f00;
}
/* 洪水調節準備中 */
.damLv1,
.explainBox span.ex-damLv1{
	background: #1172ee;
	color: #fff;
}
/* 通常 */
td.damLv0,
.explainBox span.ex-damLv0{
	background: inherit;
}
/* 欠測 */
.missing,
.explainBox span.ex-missing{
	background: #a7a7a7;
}
/*Add by FPT - DanND 12月31日2016年 for p2002 - End */

/*Add by FPT - DanND 01月25日2017年 for i-riverMap3 - Start */
.pointLevel2 {
	background: url(../images/icon/iconTableLevel6.png) no-repeat  7px 2px;
	padding-left: 10px;
}
.pointLevel1 {
	background: url(../images/icon/iconTableLevel5.png) no-repeat  7px 2px;
	padding-left: 10px;
}
/*Add by FPT - DanND 01月25日2017年 for i-riverMap3 - End */

button.switch02 span {
    margin-top: -1px;
    float: left;
    width: 100%;
}
/* Added by DuyenHT1 20170223 start */
.dataHeaderBox_modified{
	margin-top: -3px;
	margin-bottom: -10px;
}
.dataHeaderBox_modified h2{
	margin-left: 15px !important;
	margin-top: 3px;
	margin-bottom: 10px;
}
.reloadBtn_modified{
	top: 1px !important;
}
.dataHeaderBox.dataHeaderBox_modified.river-map {
    width: 1024px !important;
}
#main .contents {
	min-height: 861px;
}
#main .contents.clearfix.top-intra.contentsIE,#main .contents.clearfix.top-intra.contentsIEI7{
	min-height: 0px !important;
}

_:-ms-fullscreen, :root #main .contentsIE {
	min-height: 870px;
}
_:-ms-fullscreen, :root #main .contentsIEI7 {
	min-height: 925px;
}
:-ms-fullscreen, :root #main .contentsUpdateIE {
	min-height: 924px;
}
/* Added by DuyenHT1 20170223 end */
/* Added by TungNM8 20170721 start */
.margin-right-80{
	margin-right: 80px;
}
/* Added by TungNM8 20170721 end */