@charset "UTF-8";
/**
 * 広島県河川情報
 * 水防支援 CSS
 *
 * 更新履歴
 * [01] 2019.05.24 Kai ダム放流通知の強調表示クラス追加
 * ===== 2021年度リプレース版
 * [A-01] 2022.01.26 K.Fujimaki 高潮注警報用のセル背景cssを修正
 */
 /*------------------------------------------*/
/* 演習モード */
/*------------------------------------------*/
.suiboTraning{
	background-color: rgb(254,226,226);
}
.traningHeaderBox{
	position: relative;
	margin:5px 0 5px 10px;
	background: #fff;
	width: 1160px;
	height:auto;
	background-color: rgb(254,226,226);
}
.dispMenuBox{
	background: #fff;
	border-bottom-color: #c3d0db;
	border-bottom-width: 1px;
	border-bottom-style: solid;
}
.traningLabel{
	background-color: rgb(15, 140, 194);
	border-radius: 5px;
	width: 130px;
	height: 35px;
	position: absolute;
	top: 35px;
	right: 50px;
	text-align: center;
	line-height:2.0em;
	font-size: 19px;
	font-weight:bold;
	color: white;
}

/*------------------------------------------*/
/* 共通テーブル*/
/* 真ん中寄せなので共通CSSではなくここに書いて上書きします */
.timelineTbl{
	table-layout: fixed;
}
.timelineTbl td{
	text-align: center;
	height: 45px;
	padding: 0 3px 0;
}
.timelineTbl tr td:first-child {
	padding-right: 5px;
}

.timelineTbl td.shubun{
	text-overflow:ellipsis;
	white-space :nowrap;
	overflow:hidden;
/* 	width: 200px; */
	padding: 0 3px 0;
}
.timelineTbl td.alignColR{
	text-align: right;
	padding-right: 5px;
}
/*------------------------------------------*/
/* 水系・河川プルダウン部品群*/
/*------------------------------------------*/
.riverSelect{
	position: relative;
/* 	background: #fff; */
	width: 100%;
	height: 28px;
	margin:4px 0 0 0;
	display: inline-block;
	padding: 3px 0 0 4px;


}
.riverSelect h4{
	background: url(../images/common/marker.png) no-repeat left center;
	font-size: 13px;
 	text-indent: 15px;
	line-height: normal;
	display:inline-block;	/* 後ろに情報がつながる場合に */

}
.riverSelect select{
	width: 120px;
}
.riverSelect span{
	margin-right: 20px;
}
.subouDataBody{
	height: 200px;
	overflow-y: scroll;
}
.subouDataBody td{
	height: 30px;
	padding: 0px;
}
.totatsuDataBody{
	height: 400px;
	overflow-y: scroll;
}
.totatsuDataBody td{
	height: 30px;
	padding: 0px;
}
.dispBtn{
	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;
	position: absolute;
/* 	left: 420px; */
}

.ue{
	left: 630px;
}
.sita{
	left: 420px;
}

.tsunamiBtn{
	min-width: 65px;
	min-height: 24px;
	line-height: normal;
	font-size: 12px;
	color: black !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;
	position: relative;
	float: right;

}
h2.coast{
	display: inline-block;
}
/*------------------------------------------*/
/*	STEP 1 to 4 */
/*------------------------------------------*/
div.stepBox {
	height:80px;
	position: relative;
}
.stepBox ul li{
	width:130px;
	height:40px;
	float:left;
	border: 1px solid #a4b9cb;
	text-align:center;
	line-height:2.0em;
	margin: 15px 30px 0px 25px;
	position: relative;
	background:#fff;
}
.stepBox ul li p{
	width:100%;
	height:16px;
	line-height:16px;
	background:#fff;
	border-bottom: 1px solid #a4b9cb;
}

.stepBox ul li.is-current{
	border-color: #33cccc;
}
.stepBox ul li.is-current p{
	background: #68DDE0;
	background: #99f0f0;
		border-color: #33cccc;
}
.stepBox ul li:after{
	content: url(../images/common/suibou_stepArrow.png);
	position: absolute;
	top: 10px;
	left:147px;
}
.stepBox ul li:last-child:after{
	content: "";
}

/*------------------------------------------*/
/* 洪水予報_発表状況　色替え*/
/*------------------------------------------*/
/* ■ LV5:赤:氾濫発生 */
td.dtBgKouzuiLv5.on{						/* data 背景 */
	background: #ff6666;
}
/* ■ LV4:ピンク:氾濫危険 */
td.dtBgKouzuiLv4.on{						/* data 背景 */
	background: #ff9999;
}
/* ■ LV3:オレンジ:氾濫警戒 */
td.dtBgKouzuiLv3.on{						/* data 背景 */
	background: #ffcc66;
}
/* ■ LV2:クリーム:氾濫注意*/
td.dtBgKouzuiLv2.on{						/* data 背景 */
	background: #ffffcc;
}

td.kouzuiTime{
	line-height:150%;
}

/*------------------------------------------*/
/* 水防警報_海岸_超過状況　色替え*/
/*------------------------------------------*/
/* ■ LV2:オレンジ:出動水位 */
td.dtBgKaiganLv2{						/* data 背景 */
	background: rgb(239,118,0);
	color: white;
}
/* ■ LV1:橙　　:準備水位*/
td.dtBgKaiganLv1{						/* data 背景 */
	background: rgb(255,210,0);
}

/*------------------------------------------*/
/* 水防警報_発表状況　色替え*/
/*------------------------------------------*/
/* ■ LV3:オレンジ:出動 */
td.dtBgSuibouLv3.on{						/* data 背景 */
	background: #ffcc66;
}
/* ■ LV2:クリーム:準備 */
td.dtBgSuibouLv2.on{						/* data 背景 */
	background: #ffffcc;
}
/* ■ LV1:水色:待機*/
td.dtBgSuibouLv1.on{						/* data 背景 */
	background: #99ccff;
}
/* ■ LV0/4:灰色:指示*/
td.dtBgSuibouLv0.on,
td.dtBgSuibouLv4.on
{						/* data 背景 */
	background: #cccccc;
}

/* ■ LV9:解除 */
td.dtBgSuibouLv9.on{
	/*色替えなし*/
}

/* 水防警報_警報文作成　色替え*/
/* ■ 新規・作業中リンク*/
td a.able{							/* 文字色 */
	display:block;
	color: #ff0000;
}

/* 水防警報(海岸)_警報文作成　高潮警報 */
/* [A-01]気象注警報のレベルを新DBに合わせて変更 */
/* ■ LV1→3（警報）:赤: */
td.dtBgWarnLv3.on{						/* data 背景 */
	background: #fed1d0;
}

/* ■ LV3→4（特別警報）:紫: */
td.dtBgWarnLv4.on{						/* data 背景 */
	background: #deddff;
}

td.dtBgWarnLv0,
td.dtBgWarnLv1,
td.dtBgWarnLv2{
	line-height:110%;
}


/* ------------------*/
/*  警報文作成画面   */
/* ------------------*/


/* 発令種別ボックス*/
.issueBox{
	display: inline-block;
	width: 70px;
	height: 20px;
	font-size: 13px;
	padding-top: 4px;
	margin-right: 50px;
}
.issueBox.on{
	border-radius: 5px;
	background-color: #CCFFFF;
	border:3px solid #9999FF;
}

div.damHouryuCaption{
	margin-top:10px;
	font-size:120%;
	font-weight:bold;
	padding-left:0.5em;
}

/* 発表内容テーブル*/
table.createKeihoTbl{
	width: 95%;
	font-size: 13px;
}
table.createKeihoTbl td{
	text-align: center;
	height: 45px;
	padding: 0 3px 0;
/* 	background-color: #fff; */
}
table.createKeihoTbl.happyo td{
	background-color: #fff;
}
table.createKeihoTbl thead th{
	height: 35px;
	min-width: 120px;
}

table.createKeihoTbl tbody th{
	height: 30px;
}
table.createKeihoTbl tbody td{
	height: 15px;
}

table.createKeihoTbl th.selector_caption{
	text-align:left;
	padding-left:65px;
	border-bottom:none;
}

table.createKeihoTbl th.selector{
	min-width: 40px;
	border-top:none;
}

table.createKeihoTbl td.selector_body{
	border-top:solid 1px #a4b9cb;
}


table.createKeihoTbl tr.preview{
	min-height: 80px;
}
table.adress tbody th{
	height: 20px;
}
table.createKeihoTbl tr.preview td{
	text-align: left;
	vertical-align: top;
	/*padding: 3px;*/
	word-break:break-all;
}

table.createKeihoTbl tr.preview td div{
	word-break:break-all;
	min-height: 80px;
	padding:3px;
}


table.createKeihoTbl tr.preview textarea{
	font-family:"メイリオ", Meiryo,"MS Pゴシック",sans-serif;
	line-height:100%;
	border:none;
	width:100%;
	height:75px;
	padding:3px;
	background-color:transparent;
	/*overflow:hidden;*/
	display:none;
}
table.createKeihoTbl tr.preview textarea:disabled{
	color:black;
}

table.createKeihoTbl td.issueText{
	text-align: left;
	padding-left: 10px;
	height: 30px;
	background-color: #fff;
}

table.createKeihoTbl td.issueTextLong{
	text-align: left;
	padding-left: 10px;
	min-height: 30px;
	background-color: #fff;
	line-height:20px;
	padding-top:3px;
	padding-bottom:3px;
}

table.createKeihoTbl .strongText{
	text-decoration:underline;
}

table.createKeihoTbl .freeText{
	margin-top:3px;
	width:95%;
}
table.createKeihoTbl textarea.freeText{
	height:4.5em;
	resize:none;
}
table.createKeihoTbl tr.damInfo{
	height:100px;
}

table.createKeihoTbl label.disp-checkbox{
	/*margin-left: 5px;*/
}
table.createKeihoTbl label.damCheck.is-checkboxOn{
	background:none;
}
table.createKeihoTbl label.damCheck input[type="checkbox"]{
	zIndex:auto;
	position:static;
	width:auto;
	height:auto;
}

table.createKeihoTbl .free{
	height: 85px;
}
table.createKeihoTbl td.mailAddr{
	word-break:break-all;
}

table.createKeihoTbl input.inputVal{
	width:100px;
	text-align:right;
}

.issueNo{
	background-color: rgb(229, 232, 236);
	vertical-align: middle;
	text-align: center;
	height: 30px;

}
.un-check{
	background-color: #FCFCFC;
	color: #C3C3C3;
}
.un-check-dam{
	background-color: #C3C3C3 !important;
	color: #666666;
}
.footer{
	width: 100%;
	height:50px;
	margin-top:10px;
	text-align: center;
}
.suibouBtn{
	width: 150px;
	height:7px;
	margin-right: 5px;
}

/* スピナー */
div#spinner{
	position: absolute;
	top:0px;
	left:0px;
	width: 100%;
	height:100%;
	background-color: rgba( 255, 255, 255, 0.45 );
	z-index: 255;
	display: none;/*初期表示は非表示*/
	opacity:0.7;
}
div#spinner img{
	position: relative;
	top:50%;
	left:50%;
	margin: -16px 0 0 -16px;
}

/* -----------------------*/
/*  ダム放流通報入力      */
/* -----------------------*/

/* STEP1モード選択 */
.damInput .timelineTbl.modeSelect{
	width:auto;
}

/* STEP1一覧表のヘッダ */
.damInput div.stateHeader{
	position:relative;
	top:15px;
	text-align:right;
	width:100%;
}

.damInput .timelineTbl tbody th,
.damInput .timelineTbl tbody td{
	height:30px;
	line-height:1.2em;
}

.damInput .timelineTbl tbody tr.highCol th,
.damInput .timelineTbl tbody tr.highCol td{
	padding-top:2px;
	height:48px;
}


.damInput input[type="text"]{
	font-family:"メイリオ", Meiryo,"MS Pゴシック",sans-serif;
	text-align:left;
	height:16px;
	padding-top:0;
}
.damInput select{
	font-family:"メイリオ", Meiryo,"MS Pゴシック",sans-serif;
	text-align:left;
	height:20px;
	padding-top:0;
	margin:0 3px;
}

.damInput input[type="text"].longText{
	width:650px;
}

.damInput div.docHeader{
	text-align:right;
	width:95%;
	margin-bottom:5px;
}

.damInput select.dateFieldLong{
	width:70px;
	margin:0 3px;
}

.damInput select.dateField{
	width:45px;
	margin:0 3px;
}

.damInput select.dateField.hidden{
	visibility:hidden;
}

.damInput label.damCheck{

}
.damInput label.damCheck input[type="checkbox"]{
	zIndex:auto;
	position:static;
	width:auto;
	height:auto;
}


.damInput td.damField{
	text-align: left;
	padding-left: 10px;
	background-color: #fff;
	line-height:25px;
	height:auto;
}

table.damObsTbl{
	border:none;
	margin-left:50px;
}

table.damObsTbl td{
	border:none;
	text-align:left;
}

table.damObsTbl input{
	width:100px;
	margin:0 5px;
}

.damInput .past-release{
	text-align:center;
}

.damInput .past-release span{
	display:inline-block;
	border:solid 2px #000;
	font-size:20px;
	width:20px;
	text-align:center;
	padding:3px;
}

/* [01] */
.damInput .strongText{
	font-weight:bold;
	text-decoration:underline;
	font-size:120%;
}

/* ダム情報グラフ */
table.damGraphTable{
	table-layout:fixed;
	border:none;
	width:700px;
}
table.damGraphTable tbody td{
	border:none;
	height:30px;
	text-align:left;
}

table.damGraphTable td.alignColC{
	text-align: center;
}
table.damGraphTable td.alignColR{
	text-align: right;
	padding-right:3px;
}

table.damGraphTable input.inputVal{
	width:100px;
	text-align:right;
}

table.damGraphTable div.constBox{
	width:100%;
	height:auto;
	border:solid 1px #000000;
	padding:3px;
}


/* -----------------------*/
/*  FAX・メール送信履歴   */
/* -----------------------*/
.timelineTbl td.send_NG{
	background: url(../images/common/icon_error.png) no-repeat center;
	background-position: 10px;
}
.timelineTbl td.send_NG a,
.timelineTbl td.send_NG span{
	color: red;
}
/* -----------------------*/
/*  FAX・メール送信履歴_送信履歴（詳細）   */
/* -----------------------*/
.timeBox.sendDetail{
	/*width: 80%;*/
}

.timeBox.sendDetail p{
	line-height: 26px;
	border-right-color: #c3d0db;
	border-right-width: 1px;
	border-right-style: solid;
	display: inline-block;
	margin: 0 5px;
	padding: 0 15px;
	vertical-align: middle;
}
.timeBox.sendDetail p.widthFix{
	min-width: 400px;

}
.timeBox.sendDetail p.rightBox{
	position:absolute;
	left:auto;
	right:0;
	margin-right:0;
}

.resendBox h4{
	min-width: 0px;
	background: url(../images/common/marker.png) no-repeat 0 4px;
    font-size: 14px;
    text-indent: 18px;
    line-height: normal;
    display: inline-block;
    background-size: 13px;
    margin: 5px 10px 5px 0;
}
.resendBox .funcBtn{
	width: 100px;
}

.timeBox.sendDetail .funcBtn{
	padding: 0 5px;
	margin-left:15px;
	margin-right: 15px;
	margin-top: 1px;
}
.timelineTbl.sendDetail{
	/*width: 80%;*/
}

.timelineTbl td.mailAddr{
	word-break:break-all;
}

/* -----------------------*/
/*  ダウンロードモーダル  */
/* -----------------------*/
#downloadPopup{
	width: 400px;
	height: 200px;
}

#downloadPopup .popupContents{
	position: relative;
	margin: 0;
	padding:0 20px;
}

#downloadPopup h4{
	border-left:none;
	line-height:1.5em;
}

#downloadPopup h4:before{
	content: url(../images/common/icon_warning.png);
	margin-right:7px;
	vertical-align:top;
}
#downloadPopup h4:after{
	content: url(../images/common/icon_warning.png);
	margin-left:7px;
	vertical-align:top;
}
#downloadPopup p{
	margin:0 0 10px 0;
	line-height:1.2em;
}
/* -----------------------*/
/*  再送確認モーダル  */
/* -----------------------*/
#resendPopup{
	width: 500px;
	height: 300px;
}
#resendPopup h4.resendTitle{

	background: url(../images/common/marker.png) no-repeat 0 4px;
	font-size: 17px;
	text-indent: 23px;
	line-height: normal;
	border-left: none;
	background-size: 15px;
}
#resendPopup p{
	margin:0 10px;
	line-height:1.2em;
}
#resendPopup .popupContents{
	position: relative;
	margin: 0;
	padding:0 20px;
	height: 150px;
}
#resendPopup .popupContents th:nth-child(2),
#resendPopup .popupContents td:nth-child(2){
	text-align: left;
}
#resendPopup .popupContents th{
	height: 20px;
	padding-left: 3px;
}
#resendPopup .popupContents td{
	height: 30px;
}
#resendPopup .popupFooter{
	display: flex;
    justify-content: space-between;
    margin: 10px 20px 0;
}
#resend{
	width: 100px;
    background-color: #005e92;
    color: #ffffff;
    border: none;
    border-radius: 3px;
    font-size: 13px;

}