@charset "UTF-8";
/**
 * 石川県河川情報
 * テーブル用 CSS
 *
 */
/*=========================
	表
  =========================*/
/* -----------------------汎用 */
.list{
	width: 100%;
	border: 1px solid #a4b9cb;
}
.list th {
	line-height: 1.4em;
	padding:2px 0;
/*	border: 1px solid #a4b9cb;*/
	border-left: 1px solid #a4b9cb;
	border-bottom: 1px solid #a4b9cb;
}
.list td {
	height: 23px;
	border-left: 1px solid #a4b9cb;
	border-bottom: 1px solid #a4b9cb;
}

/* ----------------------観測所一覧*/
.list.obsPointList td span{
	margin-left:8px;
	line-height:1.4em;
}
.list.obsPointList td.alignColC span{
	margin-left: 0;
}
.list.obsPointList tr.dataNameCol th{
	border-bottom:none;
	line-height:1.2em;
}
.list.obsPointList tr.unitCol th{
	border-top:none;
	line-height:1.0em;
}
/* --------------------必要行動履歴 */
/* 月日時分 */
.list.historyTbl tr td:first-child {
	text-align:right;
	padding-right:5px;
}
.list.historyTbl span{
	margin-left:5px;
}
.list.historyTbl td {
	height: 30px;
}

/*=========================
	現況表
	+ 右に凡例レイアウト +
  =========================*/
.currentTbl{
	width:695px;
	margin: 0 165px 0 0;
	border: 1px solid #a4b9cb;
}
.currentTbl th{
	/*line-height: 15px;*/
	line-height: 1.2em;
	padding:2px 0;
	border: 1px solid #a4b9cb;
}
/* 基本的に現況はデータ数値につき右寄せ */
.currentTbl td {
	height: 23px;
	text-align: right;
	padding-right: 5px;
	border-left: 1px solid #a4b9cb;
	border-bottom: 1px solid #a4b9cb;
}
/* 時刻data */
.currentTbl td span{
	margin-right:15px;
}
/* 局名link */
.currentTbl td a{
	float: left;
	margin-left:10px;
}

/*=========================
	時系列表
	+ 下に凡例レイアウト +
  =========================*/
.timelineTbl{
	width:100%;
	border: 1px solid #a4b9cb;
}
/* ヘッダー */
.timelineTbl thead th {
	/*line-height: 15px;*/
	line-height: 1.2em;
	padding:2px 0;
	border-left: 1px solid #a4b9cb;
	border-bottom: 1px solid #a4b9cb;
}
/* ヘッダーちょっと広い */
.timelineTbl thead tr.highCol th,
.timelineTbl thead tr.highCol td {
/*	height: 21px;*/
	line-height: 1.2em;
	padding:3px 0;
}
/* データ */
.timelineTbl td {
	height: 16px;
	text-align: right;
	padding-right: 5px;
	border-left: 1px solid #a4b9cb;
	border-bottom: 1px solid #a4b9cb;
}
/* 月/日 時:分 */
.timelineTbl tr td:first-child {
	padding-right:8px;
}

/*---------------------- 水位時系列表 */
/* 水位定数ヘッダ */
.timelineTbl thead tr.odd th,
.timelineTbl thead tr.even th{
	background: transparent;
}
/* 水位定数データ */
.timelineTbl thead td {
	text-align: center;
}
.timelineTbl.stage td{
	padding-right: 0px;
}
.timelineTbl.stage td.extCol {
	padding-right: 2px;
}
/*=========================
	ダム諸元表
  =========================*/
.damItemTbl{
	width: 100%;
	border: 1px solid #a4b9cb;
	margin-bottom:10px;
}
.damItemTbl tbody th.damHeader{
	border: 1px solid #a4b9cb;
	background: #dde5ec;
}
.damItemTbl tbody th{
	/*height: 30px;*/
	text-align: left;
	padding: 0 0 0 5px;
	line-height: 15px;
	background: transparent;
	border-bottom: 1px solid #a4b9cb;
}
.damItemTbl td {
	height: 20px;
	text-align: right;
	border-right: 1px solid #a4b9cb;
	border-bottom: 1px solid #a4b9cb;
}
.damItemTbl .ctg {
	border: none;
	background: #fff;
}
.damItemTbl span.unit{
	display: block;
	margin-left:5px;
	width:35px;
	text-align: left;
	float:right;
}
/*=========================
	局選択モーダル 表
  =========================*/
.pointSelectTbl{
	margin: 0 auto;
	border: 1px solid #bdbebf;
	width: 670px;
}
.pointSelectTbl th{
	text-align: left;
	border-top: 1px solid #bdbebf;
	border-bottom: 1px solid #bdbebf;
	line-height: 2.5em;
	text-indent: 25px;
	letter-spacing: 0.2em;
	color: #1c486f;
	background: #dedfe0 url(../images/menu/asideArrow.png) no-repeat 10px center;
	cursor: pointer;
}
.pointSelectTbl th.is-selected{
	color: #fff;
	background: #006cb1 url(../images/common/iconArrow_down_on.png) no-repeat 10px center;
}
.pointSelectTbl td{
	height:22px;
	text-align: center;
	border: 1px solid #bdbebf;
	position: relative;
	padding: 5px 0px;
	width: 110px;
	cursor: default;
}
.pointSelectTbl td a{
	text-decoration: underline;
	cursor: pointer;
	color: #1f4d77;
}
.pointSelectTbl td span.is-selected{
	background-color:#d9e7ed;
	color: #005c82;
	display: block;
	line-height:22px;
	margin: 0 4px;
}
.pointSelectTbl tr td{
	display: none;
}
.pointSelectTbl div.pointList{
	width: 575px;
	margin: 5px 0px 5px 85px;
	text-align: left;
}
.pointSelectTbl div.pointList span{
	display: inline-block;
	line-height: 20px;
}
.pointSelectTbl div.pointList span:before{
	content: "、";
}
.pointSelectTbl div.pointList span:first-child:before{
	content: "";
}
/* 複数局の場合の選択中表示 */
.pointSelectTbl span.is-selectedBtn{
	background-color:#3a98cc;
	border: 2px solid #3a98cc;
	border-radius: 5px;
	width: 70px;
	height: 20px;
	display: block;
	text-align: center;
	cursor: default;
	color: #FFFFFF;
	line-height: 22px;
	position: absolute;
	top:50%;
	left:5px;
	margin-top: -12px;
}
/*=========================
	共通 Option
  =========================*/
/* 左寄せ */
td.alignColL{
	text-align: left;
	padding:0;
}
td.alignColL span{
	margin-left:10px;
}

/* センタリング */
td.alignColC{
	text-align: center;
	padding:0;
}
td.alignColC span{
	margin-left:0;
}

/* 右寄せ */
.alignColR-tbl tbody td,
td.alignColR{
	text-align: right;
	padding-right: 5px;
}

/* 右サイド補助項目あり (水位上昇下降 など)*/
tbody td.extCol {
	border-left: none;
	border-left-width: 0;
	padding-right: 2px;
}

/* Added by TuyenLA p1203 */
tbody td.flowTrend{
	border-left: 1px solid #a4b9cb;
}
tbody td.flowData{
	border-left: none;
}

/*=========================
		凡例
  =========================*/
/* base */
.explainBox{
	border: 1px solid #a4b9cb;
	font-size:11px;
	line-height:16px;
	height:auto;
}
/* 凡例title */
.explainBox h6{
	width: 100%;
	height: 17px;
	font-size: 13px;
	text-align: center;
	line-height:17px;
	background: #e5eaee;
}
.explainBox.sideR h6{
	margin-bottom:10px;
}

/* 区切り線 */
.explainBox hr{
	border-bottom: 1px solid #a4b9cb;
	border-top-width: 0;
}

/* ---------------------- 色凡例 */
dl.colorLegend{
	margin-left: 10px;
}
dl.colorLegend dt{
	height: 17px;
	float: left;
}
dl.colorLegend dt span{
	width: 6px;
	height: 11px;
	display: inline-block;
	margin-top:2px;
}
dl.colorLegend dd{
	min-width:75px;
	height: 17px;
	text-indent:3px;
}

/* ----------------------説明と例 */
/*値が超越した場合、背景色が変わります*/
.example{
	width: 120px;
	padding:0 0 3px 0;
}
.example p span{
	display: inline-block;
	width: 27px;
	height: 14px;
	text-align: center;
}

/* ------------------データ表現凡例*/
dl.dispLegend dt{
	width:55px;
	text-align: center;
	float: left;
}
/* Modified by DuyenHT1 20170206 start */
dl.dispLegend dd{
	min-width:100px;
	color: #000000;
}
/* Modified by DuyenHT1 20170206 end */

/* ---------------- 位置:右サイド個別 */
.explainBox.sideR{
	width: 160px;
	position:absolute;
	top:0;
	right:0;
	padding-bottom:10px;
}
.explainBox.sideR dl.colorLegend{
	margin-left: 15px;
}
.explainBox.sideR .example{
	margin: 5px 0 5px 10px;
}
.explainBox.sideR hr{
	margin:7px 0;
}
/* 区切り */
.explainBox.sideR .spr{
	padding:10px 0 0 0;
}
.explainBox.sideR p{
	margin:0 0 0 5px;
}

/* ---------------- 位置:下部個別 */
.explainBox.bottomB{
	margin: 10px 0 0 0;
}
.explainBox.bottomB dl,
.explainBox.bottomB .example{
/*	margin: 5px 0 5px 5px;*/
	margin-top:5px;
}
.explainBox.bottomB dl dd{
	float: left;
}
/* 改行箇所を指定したい */
.explainBox.bottomB dl dt.break{
	clear:both;
}
/* 区切り線 */
.explainBox.bottomB .borderR{
	border-right: 1px solid #a4b9cb;
	min-height:60px;
}
/* カテゴリわけ */
.explainBox.bottomB div.ctg{
	width:720px;
	clear:both;
}
.explainBox.bottomB hr{
	margin:5px 0 0 0;
}
/*---------------------- ダム個別＋水位グラフ*/
/* 下に置くバージョン: ダム＋水位グラフ */
.explainBox.bottomB.dam dl.colorLegend dd,
.explainBox.bottomB.water dl.colorLegend dd,
.explainBox.bottomB.waterP dl.colorLegend dd{
	min-width:77px;
	margin-right:7px;
}
/* データタイトル */
.explainBox.bottomB.dam p,
.explainBox.bottomB.water p,
.explainBox.bottomB.waterP p{
	min-width:55px;
	float: left;
	margin-left:10px;
}
/*-- add by NghiaNV1 2016.12.29 p-1204 --*/
.explainBox.bottomB div.ctg1204{
	width:720px;
	padding-left: 50px;
	clear:both;
}
/*-- add by NghiaNV1 2016.12.29 p-1204 --*/

/* -- Add by DaiDH 2017.07.20 i-1601 start-- */
.scrollTable {
	border-collapse: collapse;
	overflow-x: hidden; /* scroll->hiddenに変更 */
	display: block;
	box-sizing: border-box;
}
.scrollTable .scrollThead,.scrollTable .scrollTbody {
	display: block;
}
.scrollTable .scrollTbody {
	overflow-y: hidden; /* scroll->hiddenに変更 */
	overflow-x: hidden;
	height: 727px;
}
/* -- Add by DaiDH 2017.07.20 i-1601 end -- */

/* -- Add by DaiDH 2017.08.17 i-1601 start-- */
.scrollTbody td:nth-child(1), .scrollThead th:nth-child(1) {
	min-width: 130px;
	max-width: 130px;
}

.scrollTbody td:nth-child(2), .scrollThead th:nth-child(2) {
	min-width: 130px;
	max-width: 130px;
}

.scrollTbody td:nth-child(3), .scrollThead th:nth-child(3) {
	min-width: 130px;
	max-width: 130px;
}

.scrollTbody td:nth-child(4), .scrollThead th:nth-child(4) {
	min-width: 100px;
	max-width: 100px;
}

.scrollTbody td:nth-child(5), .scrollThead th:nth-child(5) {
	min-width: 100px;
	max-width: 100px;
}

.scrollTbody td:nth-child(6), .scrollThead th:nth-child(6) {
	min-width: 423px;
	max-width: 423px;
}

.scrollTbody td:nth-child(7), .scrollThead th:nth-child(7) {
	min-width: 130px;
	max-width: 130px;
}

.scrollTbody td:nth-child(8), .scrollThead th:nth-child(8) {
	min-width: 90px;
	max-width: 90px;
}

.scrollTbody td:nth-child(9), .scrollThead th:nth-child(9) {
	min-width: 270px;
	max-width: 270px;
}
/* -- Add by DaiDH 2017.08.17 i-1601 end-- */