@charset "UTF-8";

/***********************
 * 共通 定義
 ***********************/
body > div
{
  width: calc( 100vw - 10px - 10px );
  display: table;
  margin: 2px auto 0px auto;
}

/**
 * ヘッダ
 */
div.header
{
  width: 100%;
  margin: 0px;
  border-bottom: 1px solid #c0c0c0;
  background: linear-gradient(to top, #f3f7fc, transparent);
}
div.header > div
{
  display: table-cell;
}

/** システム名称 */
div.header > div#system-name
{
  width: 225px;
  text-align: center;
  vertical-align: middle;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
}
/** グロナビ */
div.header > div#glonavi
{
  display: table;
  border-left: 1px solid #f0f0f0;
}
div.header > div#glonavi > div
{
  display: table-cell;
  padding: 8px;
  width: 95px;
  font-size: 13px;
  text-align: center;
  border-right: 1px solid #f0f0f0;
  cursor:pointer;
}
div.header > div#glonavi > div.gnav1-item-long{
  width:120px;
}

div.header > div#glonavi > div.selected
{
  background-color: #dae3f3;
  color: #0000ff;
}
div.header > div#glonavi > div.selected:hover
{
  background-color: #dae3f3;
  color: #0000ff;
}
div.header > div#glonavi > div:hover
{
  background-color: #f3f7fc;
  color: #0000ff;
}
div.header > div#glonavi > div#gnav-dumm
{
 cursor: default;
}



/** ユーザ操作アイコン */
div.header > div#user-ctrl
{
  width: 85px;
  border-left: 1px solid #f0f0f0;
  vertical-align: middle;
  border-spacing: 10px 0px;
  
}
div.header > div#user-ctrl > div
{
  display: table-cell;
  margin-left: 15px;
  width : 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  cursor: pointer;
}
div.header > div#user-ctrl > div#help  { background-image: url('../img/common/help.png'); }
div.header > div#user-ctrl > div#logout{ background-image: url('../img/common/logout.png'); }
div.header > div#user-ctrl > div#logout.disabled{ display:none; }

/**
 * 小項目メニュー
 */
div.header2
{
  border-bottom : 1px solid #c0c0c0;
  border-spacing: 0px 1px;
  padding: 0px 3px;
}
/** 小項目メニューグループ */
div.header2 > div{ display: none; }
div.header2 > div.selected{ display: block; }
div.header2 > div#gnav2-blank{ height: 22px; }
/** 小項目メニュー項目 */
div.gnav2-item
{
  display: table-cell;
  padding: 2px 0px;
  width: 145px;
  font-size: 12px;
  text-align: center;
  border-right: 1px solid #c0c0c0;
  cursor:pointer;
}
div.gnav2-item:first-child
{
  border-left: 1px solid #c0c0c0;
}
div.gnav2-item.selected
{
  background-color: #dae3f3;
  color: #0000ff;
}
div.gnav2-item.selected:hover
{
  background-color: #dae3f3;
  color: #0000ff;
}
div.gnav2-item:hover
{
  background-color: #f3f7fc;
  color: #0000ff;
}
/**
 * 画面名称・テロップ表示
 */
div.header3
{
}
div.header3 > div
{
  /*display: table-cell;*/
  display:inline-block;
}
/** 画面名称 */
div#gname
{
  font-size: 17px;
  font-weight: bold;
  width: 292px;
  vertical-align: middle;
}
div#gname:before
{
  content: url('../img/common/icon-label.png') ;
  display: inline-block;
  margin-right: 5px;
}
/** テロップ表示 */
div#telop
{
  border: 1px solid #c0c0c0;
  height: 25px;
  font-size: 15px;
  vertical-align: middle;
  padding: 0px 5px;
  width: calc( 100vw - 10px - 10px - 292px );
  overflow:hidden;
}

/**
 * 画面操作
 */
div.control
{
  background-color: #f1f5f7;
  border: 1px solid #f0f0f0;
  font-size: 12px;
  border-right: 1px solid #c0c0c0;
  border-left : 1px solid #c0c0c0;
}
div.control.off
{
  visibility: hidden;
}
div.control > div,
div.control > div > div
{
  display: table-cell;
  vertical-align: middle;
}
div.control > div
{
  border-right: 1px solid #c0c0c0;
  padding: 0px 10px;
}
div.control > div:last-child
{
  border-right: none;
}
/** 表示/非表示 */
div.control > div.on { visibility: visible; }
div.control > div.off{ visibility: hidden; }

/** 観測日時表示 */
div#disp-time
{
  width: 270px;
  min-width: 270px;
}
div#block-calendar
{
  width: 35px;
}
button#calendar,
button.btn-calendar
{
  width : 28px;
  height: 28px;
  background-image: url('../img/common/calendar.png');
  background-repeat: no-repeat;
  background-size: 20px;
  background-position: center;
  border-radius: 5px;
  margin-left: 5px;
}
/** 時刻操作 */
div#ctrl-time
{
  width: 312px;
}
div#ctrl-time > div:first-child
{
  width : 18px;
  height: 16px;
  background-image: url('../img/common/icon-time.png');
  background-repeat: no-repeat;
  background-size: auto;
  background-position-y: 5px;
}
div#ctrl-time div.ctrl-btn
{
  width: 85px;
  background-size: 16px;
  background-repeat: no-repeat;
}
/** 時刻戻し */
div#ctrl-time div#ctrl-time-back
{
  text-align: right;
  padding-right:10px;
  background-image: url('../img/common/icon-arrow-left.png') ;
  background-position: 2px 2px;
  border-right-width: 0px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}
div#ctrl-time div#ctrl-time-back.disabled
{
  background-image: url('../img/common/icon-arrow-left-disabled.png') ;
}
/** 時刻送り */
div#ctrl-time div#ctrl-time-next
{
  text-align: left;
  padding-left :10px;
  background-image: url('../img/common/icon-arrow-right.png') ;
  background-position: 63px 2px;
  border-right-width: 0px;
  border-left-width : 1px;
  border-radius: 0px;
}
div#ctrl-time div#ctrl-time-next.disabled
{
  background-image: url('../img/common/icon-arrow-right-disabled.png') ;
}
/** 最新表示 */
div#ctrl-time div#ctrl-time-last
{
  text-align: center;
  background-image: url('../img/common/icon-arrow-last.png') ;
  background-position: 63px 2px;
  border-left-width : 1px;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}

/** 時間種別操作 */
div#ctrl-mode3
{
  width: 140px;
}
/** ボタン */
div#ctrl-mode > div > div.ctrl-btn
{
  width: 60px;
}
div#ctrl-mode div#ctrl-mode-10
{
  border-right-width : 1px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}
div#ctrl-mode div#ctrl-mode-60
{
  border-left-width : 1px;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}

/**
 * データ期間切替:{24/48/72H}
 */
div#ctrl-field
{
  width: 250px;
}
div#ctrl-field div.ctrl-btn
{
  width: 75px;
}
div#ctrl-field div#ctrl-field-24
{
  border-top-right-radius   : 0px;
  border-bottom-right-radius: 0px;
  border-right-width: 1px;
}
div#ctrl-field div#ctrl-field-48
{
  border-radius   : 0px;
  border-left: none;
  border-right-width: 1px;
}
div#ctrl-field div#ctrl-field-72
{
  border-top-left-radius   : 0px;
  border-bottom-left-radius: 0px;
  border-left: none;
}

/**
 * 局選択
 */
div#ctrl-obsp
{
  width: 328px;
}
div#ctrl-obsp > div,
div#ctrl-obsp > div > div.ctrl-btn
{
  width: 70px;
}
/** 局選択ボタン */
div#ctrl-obsp div.ctrl-btn
{
  background-size: 10px;
  background-repeat: no-repeat;
}
div#ctrl-obsp > div:nth-child(2)
{
  padding-right: 10px;
}
/** ページング */
div#ctrl-obsp > div:nth-child(3){ padding-right: 1px; }
div#ctrl-obsp > div:nth-child(5){ padding-left : 1px; }
div#ctrl-obsp div#ctrl-obsp-back
{
  background-image: url('../img/common/icon-arrow-left.png') ;
  background-position: 5px 6px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}
div#ctrl-obsp div#ctrl-obsp-back.disabled
{
  background-image: url('../img/common/icon-arrow-left-disabled.png') ;
}
div#ctrl-obsp div#ctrl-obsp-next
{
  background-image: url('../img/common/icon-arrow-right.png') ;
  background-position: 52px 6px;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}
div#ctrl-obsp div#ctrl-obsp-next.disabled
{
  background-image: url('../img/common/icon-arrow-right-disabled.png') ;
}
/** ページ数表示 */
div#ctrl-obsp div#ctrl-obsp-page
{
  background-color: #fafafa;
  color: #005e92;
  border: solid 2px #a0a0a0;
  border-right-width: 1px;
  border-left-width : 1px;
  text-align: center;
  width: 90px;
}
div#ctrl-obsp div#ctrl-obsp-page:hover
{
  cursor: default;
}

/**
 * データ表示部
 */
div.area-data
{
  margin-top: 5px;
}

/*=======================
  モーダル
  =======================*/
.clearfix:after {
  display: block;
  content: "";
  clear: both;
}

.white-popup {
  margin: 0 auto;
  padding: 10px 0;
  max-width: 1150px;
  min-width: 500px;
  max-height: 700px;
  overflow-y: auto;
  width: auto;
  border-radius: 5px;
  background: #f5f5f5;
}

.white-popup > .loaderBox {
  border-radius: 5px;
}

.white-popup .popupHeader {
  position: relative;
  margin-bottom: 10px;
  height: 20px;
}

.white-popup .popupHeader h4 {
  display: flex;
  align-items: center;
  font-size: 18px;
  line-height: 1.4;
  display: inline;
  word-wrap: break-word;
  box-sizing: border-box;
  padding-left: 20px;
  padding-right: 10px;
  letter-spacing: 1px;
  width: 100%;
  margin-top: 0px;
}

.white-popup .popupHeader h4:before {
  content: "";
  display: inline-block;
  margin-right: 5px;
  width: 4px;
  height: 18px;
}

.white-popup .popupHeader h4:before {
  background-color: #f1780a;
}

.white-popup .popupHeader h4:before {
  position: absolute;
  top: 3px;
  left: 10px;
}

.white-popup .popupContents {
  position: relative;
  padding: 0 10px;
}

.white-popup .popupContents.scrollBox,
.white-popup .popupContents .scrollBox {
  max-height: 460px;
  overflow-y: auto;
  padding-bottom: 5px;
  margin-right: 5px;
}

.white-popup .popupContents .column2Box {
  width: 50%;
  height: 100%;
  position: relative;
  vertical-align: top;
}

.white-popup .popupContents .column2Box:not(:first-child) {
  margin-left: 10px;
}

.white-popup .popupContents .borderBox {
  background-color: #ffffff;
  border: 1px solid #7f957f;
  padding: 5px;
  margin: 0 10px;
}

.white-popup .popupContents table {
  table-layout: fixed;
  width: 100%;
  word-wrap: break-word;
  margin: 0 auto;
  background-color: #ffffff;
}

.white-popup .popupContents table td {
  padding: 0 5px;
}

.white-popup .popupContents table .td_l {
  padding-left: 5px;
  text-align: left;
}

.white-popup .popupContents table .td_c {
  text-align: center;
}

.white-popup .popupContents table .td_r {
  text-align: right;
  padding-right: 5px;
}

.white-popup .popupContents table th, .white-popup .popupContents table td {
  line-height: 1.6em;
  padding: 5px;
}

.white-popup .popupContents table th {
  background-color: #daedda;
  height: 24px;
  vertical-align: middle;
}

.white-popup .popupContents table th {
  border: 1px solid #7f957f;
}

.white-popup .popupContents table td {
  border: 1px solid #7f957f;
}

.white-popup .popupContents iframe {
  width: 95%;
  height: 100%;
  margin: 0 auto;
}

.white-popup .popupContents h5 {
  font-size: 12px;
  line-height: normal;
  font-size: 14px;
}

.white-popup .popupContents h5:before {
  content: "";
  display: inline-block;
  margin: 0 2.5px;
  width: 4px;
  height: 4px;
}

.white-popup .popupContents h5:before {
  border: 3px solid #00a66f;
}

.white-popup .popupFooter {
  text-align: center;
  position: static;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  padding: 0 10px;
}

.white-popup .popupFooter *:not(:first-child) {
  margin-left: 2.5px;
}

.white-popup .popupFooter.jc-sb {
  justify-content: space-between;
}

.white-popup .popupFooter .mfp-close {
  position: relative;
  width: 77px;
  height: 23px;
  line-height: normal;
  font-size: 12px;
  vertical-align: middle;
  padding: 0;
  opacity: 1;
}

.white-popup .popupFooter input[type='button'] {
  margin-top: 5px;
  font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", sans-serif;
}

/* カレンダー用モーダル */
.calendarPopup .mfp-content {
  width: 330px;
  height: 405px;
}

/* 緊急情報詳細用モーダル */
.newDetailPopup .mfp-content {
  width: 700px;
  max-width: 700px;
  height: 565px;
}

.newDetailPopup.white-popup {
  width: 700px;
}

/* popup通知用モーダル */
.alertPopup .mfp-close {
  display: none;
}

.alertPopup .mfp-content {
  width: 1120px;
  max-width: 1120px;
  height: 600px;
}

.alertPopup.white-popup {
  width: 1120px;
}

.alertPopup.white-popup #riskListArea {
  width: 500px;
}