@charset "UTF-8";
.obspContents h4, .grid h4 {
  position: relative;
  height: 2rem;
  line-height: 2rem;
  padding-left: 1.32rem;
}

.obspContents h4 .mark, .grid h4 .mark {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  margin-left: 0;
  display: inline-block;
  width: 1.2rem;
  height: 1.2rem;
  background-color: #ffffff;
  border: 4px solid #60afd2;
  border-radius: 2px;
}

.obspContents {
  padding: 0 0.5rem;
}

.obspContents li {
  margin-bottom: 1rem;
  width: 100%;
}

.obspContents li.graphContents {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.obspContents li.graphContents .hiddenGraph {
  background: #f2f2f2 url(../images/common/hidden_graph.png) center center no-repeat;
  margin: 0 auto;
}

/*Android個別*/
.obspContents li:last-child {
  margin-bottom: 0;
}

.obspContents .threshold {
  border-top: 1px solid #e0e7ec;
}

.obspContents .threshold li {
  margin: 0;
  padding: 0.75rem 0;
  float: left;
  width: 50%;
  text-align: center;
  border-bottom: 1px solid #e0e7ec;
  background: #f6f8fa;
  height: 3rem;
}

.obspContents .threshold li:nth-child(odd) {
  /* 基準値名スタイル */
  text-align: left;
  padding-left: 15%;
}

.obspContents .threshold li:nth-child(odd) span {
  /* 背景色はcolor.css に準じる */
  margin-right: 0.5rem;
  display: inline-block;
  height: 1.6rem;
  width: 6px;
  vertical-align: middle;
}

.obspContents .threshold li:nth-child(even) {
  padding-right: 15%;
}

.obspContents .threshold:after {
  display: block;
  content: "";
  clear: both;
}

.grid.timeLine {
  /* 時系列表 */
}

.grid.timeLine table {
  width: 100%;
}

.grid.timeLine table .time {
  width: 50%;
}

.grid.timeLine table .data {
  width: 50 / 2%;
}

.grid.timeLine table .water {
  width: 50%;
}

/* 表基本 */
.grid.timeLine tbody td {
  padding: 0.5rem 1.2rem;
  text-align: right;
}

.grid.timeLine tbody th {
  padding: 0.5rem 1.5rem;
}

.grid.timeLine tbody tr:nth-child(odd) th, .grid.timeLine tbody tr:nth-child(odd) td {
  background-color: #ffffff;
}

.grid.timeLine tbody tr:nth-child(even) th, .grid.timeLine tbody tr:nth-child(even) td {
  background-color: #eff0f1;
}

/* 水位基準値*/
.grid.timeLine table.alarm-stage tbody td {
  border: #c3d0db solid 1px;
  padding: 0.5rem 0.5rem;
}

.grid.overflow li {
  padding: 0.5rem;
  padding-bottom: 1rem;
}

.grid.overflow h4 {
  margin-bottom: 0.5rem;
}

.grid.overflow.water h4 {
  padding: 0;
  padding-left: 3.0rem;
  position: relative;
  height: 3rem;
  line-height: 3rem;
}

.grid.overflow.water h4.level4 {
  background: url(../images/icon/iconMap_stageoverLv4.png) no-repeat 2px center;
  background-size: contain;
}

.grid.overflow.water h4.level3 {
  background: url(../images/icon/iconMap_stageoverLv3.png) no-repeat 2px center;
  background-size: contain;
}

.grid.overflow.water h4.level2 {
  background: url(../images/icon/iconMap_stageoverLv2.png) no-repeat 2px center;
  background-size: contain;
}

.grid.overflow.water h4.level1 {
  background: url(../images/icon/iconMap_stageoverLv1.png) no-repeat 2px center;
  background-size: contain;
}

.grid.overflow table {
  width: 100%;
}

.grid.overflow table .category {
  width: 40%;
}

.grid.overflow table .status {
  width: 30%;
}

.grid.overflow table tbody td {
  padding: 1rem;
  text-align: center;
}

.grid.overflow table tbody td:first-child {
  text-align: left;
}

.grid.overflow table tbody tr:nth-child(odd) th, .grid.overflow table tbody tr:nth-child(odd) td {
  background-color: #ffffff;
}

.grid.overflow table tbody tr:nth-child(even) th, .grid.overflow table tbody tr:nth-child(even) td {
  background-color: #eff0f1;
}

/* ダム諸元 */
.grid.dam table {
  width: 100%;
}

.grid.dam.cnst tbody td {
  width: 25%;
}

.grid.dam.cnst span.damunit {
  display: inline-block;
  margin-left: 5px;
}

/* ダム経過表 */
.grid.dam.timeLine .time {
  width: 15%;
}

.grid.dam.timeLine .data {
  width: "21.25%";
}

.grid.dam.timeLine th, .grid.dam.timeLine td {
  padding: 0 0.5rem;
  width: 20%;
  height: 3.36rem;
  font-size: 1.1rem;
}

.grid.dam tbody th, .grid.dam tbody td {
  padding: 0.5rem;
}

.grid.dam tbody th {
  background-color: #dde5ec;
  color: #000000;
  font-weight: bold;
}

.grid.dam tbody td {
  text-align: right;
}

.grid.dam tbody td.char {
  text-align: center;
}

/*グラフ凡例*/
.obspContents div.graphUnit {
  display: flex;
  justify-content: space-between;
  width: 315px;
  margin: 5px 0;
}

/********* 水防系画面 *******************/
.obspContents.suibou {
  width: 100%;
  overflow-x: scroll;
}

.grid.timeLine.suibou tbody td {
  text-align: center;
}

.grid.timeLine.suibou tbody td.latest {
  background-color: #b1f4b2;
}

/* スマホ画面の縦向きのスタイル */
@media screen and (orientation: portrait) {
  .switchContents.tab.suibou,
  .grid.timeLine.suibou {
    width: 430px;
  }
}

/* スマホ画面の横向きのスタイル */
@media screen and (orientation: landscape) {
  .switchContents.tab.suibou,
  .grid.timeLine.suibou {
    width: 100%;
  }
}

.switchContents.tab.suibou li {
  margin-bottom: 0;
}

/* ---------------------------- グラフ凡例 */
.obspContents div.graphUnit span[class^="ex-"] {
  /* 折れ線グラフ */
  width: 18px;
  height: 12px;
  display: inline-block;
  margin-right: 2px;
}

.obspContents div.graphUnit span[class^="ex-rainBar"] {
  /* 10分・時間雨量は棒グラフ */
  width: 6px;
  height: 12px;
  display: inline-block;
  margin-right: 6px;
  margin-left: 5px;
}

.obspContents div.graphUnit span.ex-rainBar {
  background: #4092bc;
}

.obspContents div.graphUnit span.ex-rainSum {
  background: #232323 url("../images/icon/ex_solid-circle.png") no-repeat;
}

.obspContents div.graphUnit span.ex-rainBar_forecast {
  background: #E071DC;
}

.obspContents div.graphUnit span.ex-rainSum_forecast {
  background: #BB393B url("../images/icon/ex_solid-circle.png") no-repeat;
}

.obspContents div.graphUnit span.ex-stage {
  background: #397cbb url("../images/icon/ex_solid-circle.png") no-repeat;
}

.obspContents div.graphUnit span.ex-flow {
  background: #57a458 url("../images/icon/ex_solid-circle.png") no-repeat;
}

.obspContents div.graphUnit span.ex-stage_forecast {
  background: #BB393B url("../images/icon/ex_solid-circle.png") no-repeat;
}

.obspContents div.graphUnit span.ex-flow_forecast {
  background: #E071DC url("../images/icon/ex_solid-circle.png") no-repeat;
}

.obspContents div.graphUnit span.ex-reserve {
  background: #232323 url("../images/icon/ex_solid-circle.png") no-repeat;
}

.obspContents div.graphUnit span.ex-inflow {
  background: #1172ee url("../images/icon/ex_solid-triangle.png") no-repeat;
}

.obspContents div.graphUnit span.ex-outflow {
  background: #e91e00 url("../images/icon/ex_solid-rect.png") no-repeat;
}

.obspContents div.graphUnit span.ex-reserveLv1.graphConst {
  background: #ffd200 url("../images/icon/ex_dashed.png") no-repeat;
}

.obspContents div.graphUnit span.ex-reserveLv2.graphConst {
  background: #45cbe3 url("../images/icon/ex_dashed.png") no-repeat;
}

.obspContents div.graphUnit span.ex-reserveLv3.graphConst {
  background: #2d9843 url("../images/icon/ex_dashed.png") no-repeat;
}

.obspContents div.graphUnit span.ex-reserveLv5.graphConst {
  background: #fa9f00 url("../images/icon/ex_dashed.png") no-repeat;
}

.obspContents div.graphUnit span.ex-reserveLv6.graphConst {
  background: #e91e00 url("../images/icon/ex_dashed.png") no-repeat;
}

.obspContents div.graphUnit span.ex-reserveLv7.graphConst {
  background: #6b38c2 url("../images/icon/ex_dashed.png") no-repeat;
}

/*スピナー*/
#spinnerContents {
  text-align: center;
  margin: 5% 0;
}