@charset "UTF-8";
body {
  margin: 0px;
  padding: 0px;
}

body div#map {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-color: #999;
}

* {
  font-family: 'Meiryo UI', 'ヒラギノ丸ゴ ProN', 'Hiragino Maru Gothic ProN', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProNW3', Verdana, sans-serif;
}

*:focus {
  outline: none;
}

.normal {
  color: white;
  background-color: #204077;
}

.start {
  color: black;
  background-color: #eeb90b;
}

.warn {
  color: white;
  background-color: maroon;
}

.flad {
  color: white;
  background-color: #1e1e1e;
}

.missing {
  color: white;
  background-color: #777;
}

img.menu-btn {
  position: absolute;
  right: 4px;
  margin: 0px auto;
  width: 50px;
  height: 50px;
  opacity: 0.8;
  cursor: pointer;
  z-index: 2000;
}

div.title-panel {
  padding: 0px;
  margin: 0px auto;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 210px;
  height: 30px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 2000;
  background-color: rgba(0, 0, 128, 0.6);
  color: #fff;
  border-bottom-right-radius: 12px;
}

div.title-panel img {
  display: inline-block;
  padding: 0px;
  margin: 0px auto;
  width: 120px;
  height: 30px;
}

div.title-panel div#dateBlock {
  position: absolute;
  right: 0px;
  top: 0px;
  width: 90px;
  padding: 2px 0px 2px 0px;
  text-align: center;
  font-size: 6pt;
  color: white;
}

div.title-panel div#timeBlock {
  position: absolute;
  right: 0px;
  bottom: 0px;
  width: 90px;
  padding: 0px 0px 2px 0px;
  text-align: center;
  font-size: 10pt;
  font-weight: bold;
  color: white;
}

div#menuDispBtn {
  position: absolute;
  top: 0px;
  height: 30px;
  padding: 8px 0px 2px 0px;
  margin: 0px auto;
  font-size: 8pt;
  font-weight: bold;
  color: #fff;
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: rgba(0, 0, 128, 0.6);
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  z-index: 2000;
}

div.menu-disp-btn-on {
  width: 30px;
  right: 60px;
}

div.menu-disp-btn-off {
  width: 86px;
  right: 8px;
}

.address-panel {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 160px;
  height: 14px;
  color: #333;
  font-size: 8pt;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 4px;
  padding: 2px;
  margin: 0px auto;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 2000;
  text-align: center;
}

img.zoom-btn {
  position: absolute;
  padding: 0px;
  margin: 0px auto;
  left: 8px;
  width: 40px;
  height: 40px;
  opacity: 0.8;
  z-index: 2000;
}

#listDlgBk {
  display: none;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 3000;
  background-color: rgba(128, 128, 128, 0.8);
}

#listDlgBk #listDlg {
  position: absolute;
  z-index: 3001;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 90%;
  height: 90%;
  max-width: 448px;
  max-height: 728px;
  border-radius: 12px;
  background-color: #003077;
}

#listDlgBk #listDlg div.title-block {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  height: 35px;
}

#listDlgBk #listDlg div.title-block div.title {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  font-size: 0.9rem;
  font-weight: bold;
  color: #fff;
  text-align: left;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 8px 0px 2px 12px;
}

#listDlgBk #listDlg div.title-block img.renew {
  margin: 2px 6px 2px 2px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
}

#listDlgBk #listDlg div.title-block img.close {
  margin: 2px 6px 2px 2px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
}

#listDlgBk #listDlg div.tab-block {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  background-color: rgba(0, 0, 0, 0.6);
  padding: 8px 8px 0px 8px;
}

#listDlgBk #listDlg div.tab-block div.tab {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 200px;
  -ms-flex: 1 1 200px;
  flex: 1 1 200px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  font-size: 0.9rem;
  font-weight: bold;
  text-align: center;
  padding: 6px;
}

#listDlgBk #listDlg div.tab-block div.act {
  background-color: #003077;
  color: #fff;
}

#listDlgBk #listDlg div.tab-block div.dact {
  background-color: #333;
  color: #999;
}

#listDlgBk #listDlg div.list-block {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding: 4px;
  overflow: auto;
}

#listDlgBk #listDlg div.list-block div#rsysList {
  display: block;
}

#listDlgBk #listDlg div.list-block div#rsysList div.item {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  border-bottom: 2px solid #fff;
}

#listDlgBk #listDlg div.list-block div#rsysList div.item img {
  width: 15px;
  height: 15px;
}

#listDlgBk #listDlg div.list-block div#rsysList div.item div.name {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  color: #fff;
  font-size: 1.2rem;
  font-weight: bold;
  padding: 10px;
}

#listDlgBk #listDlg div.list-block div#rsysList div.rvrList {
  display: none;
}

#listDlgBk #listDlg div.list-block div#rsysList div.rvrList div.rvrItem {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  border-bottom: 1px solid #fff;
  padding: 4px 4px 4px 10px;
}

#listDlgBk #listDlg div.list-block div#rsysList div.rvrList div.rvrItem img {
  width: 15px;
  height: 15px;
}

#listDlgBk #listDlg div.list-block div#rsysList div.rvrList div.rvrItem div.name {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  color: #fff;
  font-size: 1.0rem;
  font-weight: bold;
  padding: 8px;
}

#listDlgBk #listDlg div.list-block div#rsysList div.rvrList div.obsList {
  display: none;
}

#listDlgBk #listDlg div.list-block div#rsysList div.rvrList div.obsList div.obsItem {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  align-items: flex-end;
  padding: 8px 4px 4px 20px;
  border-bottom: 1px dotted #fff;
}

#listDlgBk #listDlg div.list-block div#rsysList div.rvrList div.obsList div.obsItem rt.kana {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  text-align: left;
  font-size: 0.6rem;
  padding: 0px 2px 4px 0px;
}

#listDlgBk #listDlg div.list-block div#rsysList div.rvrList div.obsList div.obsItem div.name {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  text-align: left;
  font-size: 1.0rem;
  padding: 0px 2px 4px 0px;
}

#listDlgBk #listDlg div.list-block div#rsysList div.rvrList div.obsList div.obsItem div.obsVal {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  text-align: right;
}

#listDlgBk #listDlg div.list-block div#rsysList div.rvrList div.obsList div.obsItem div.obsVal div.timeData {
  display: block;
  text-align: center;
}

#listDlgBk #listDlg div.list-block div#rsysList div.rvrList div.obsList div.obsItem div.obsVal div.timeData div.tm {
  display: inline-block;
  text-align: center;
  font-size: 0.6rem;
  padding: 0px 2px 2px 0px;
}

#listDlgBk #listDlg div.list-block div#rsysList div.rvrList div.obsList div.obsItem div.obsVal div.timeData div.qtDiv {
  display: inline-block;
  width: 16px;
  height: 16px;
}

#listDlgBk #listDlg div.list-block div#rsysList div.rvrList div.obsList div.obsItem div.obsVal div.timeData div.qtDiv img.qt {
  max-width: 100%;
}

#listDlgBk #listDlg div.list-block div#rsysList div.rvrList div.obsList div.obsItem div.obsVal div.cap {
  display: inline-block;
  text-align: right;
  font-size: 0.6rem;
  padding: 0px 2px 2px 0px;
}

#listDlgBk #listDlg div.list-block div#rsysList div.rvrList div.obsList div.obsItem div.obsVal div.val {
  display: inline-block;
  font-size: 0.8em;
  font-weight: bold;
  text-align: right;
  padding: 2px 4px 2px 0px;
}

#listDlgBk #listDlg div.list-block div#rankingList {
  display: none;
}

#listDlgBk #listDlg div.list-block div#rankingList div.obsItem {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  align-items: flex-end;
  padding: 8px 4px 4px 8px;
  border-bottom: 1px dotted #fff;
}

#listDlgBk #listDlg div.list-block div#rankingList div.obsItem rt.kana {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  text-align: left;
  font-size: 0.6rem;
  padding: 0px 2px 4px 0px;
}

#listDlgBk #listDlg div.list-block div#rankingList div.obsItem div.name {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  text-align: left;
  font-size: 1.0rem;
  padding: 0px 2px 4px 0px;
}

#listDlgBk #listDlg div.list-block div#rankingList div.obsItem div.obsVal {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  text-align: right;
}

#listDlgBk #listDlg div.list-block div#rankingList div.obsItem div.obsVal div.timeData {
  display: block;
  text-align: center;
}

#listDlgBk #listDlg div.list-block div#rankingList div.obsItem div.obsVal div.timeData div.tm {
  display: inline-block;
  text-align: center;
  font-size: 0.6rem;
  padding: 0px 2px 2px 0px;
}

#listDlgBk #listDlg div.list-block div#rankingList div.obsItem div.obsVal div.timeData div.qtDiv {
  display: inline-block;
  width: 16px;
}

#listDlgBk #listDlg div.list-block div#rankingList div.obsItem div.obsVal div.timeData div.qtDiv img.qt {
  width: 16px;
  height: 16px;
}

#listDlgBk #listDlg div.list-block div#rankingList div.obsItem div.obsVal div.cap {
  display: inline-block;
  text-align: right;
  font-size: 0.6rem;
  padding: 0px 2px 2px 0px;
}

#listDlgBk #listDlg div.list-block div#rankingList div.obsItem div.obsVal div.val {
  display: inline-block;
  font-size: 0.8em;
  font-weight: bold;
  text-align: right;
  padding: 2px 4px 2px 0px;
}

div#obsDlgBk {
  display: none;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 3000;
}

div#obsDlgBk div#obsDlg {
  position: absolute;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  background-color: rgba(0, 36, 96, 0.8);
  border-radius: 12px;
}

@media screen and (orientation: portrait) {
  div#obsDlgBk div#obsDlg {
    width: 96%;
    height: 55%;
    max-width: 860;
    max-height: 640px;
  }
}

@media screen and (orientation: landscape) {
  div#obsDlgBk div#obsDlg {
    width: 50%;
    height: 95%;
    max-width: 860;
    max-height: 640px;
  }
}

div#obsDlgBk div#obsDlg div.head {
  padding: 4px 0px 2px 4px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

div#obsDlgBk div#obsDlg div.head img {
  width: 32px;
  height: 32px;
  margin-right: 8px;
}

div#obsDlgBk div#obsDlg div.head img#obsPic {
  display: none;
}

div#obsDlgBk div#obsDlg div.head ruby {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  color: #fff;
  font-weight: bold;
  text-align: left;
}

div#obsDlgBk div#obsDlg div.head ruby span {
  font-size: 0.8rem;
  font-weight: bold;
  text-align: left;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

div#obsDlgBk div#obsDlg div.head ruby rt#obsDlgObsKana {
  font-size: 0.6rem;
  text-align: left;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

div#obsDlgBk div#obsDlg div.menu {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  padding: 2px 4px 2px 4px;
  -webkit-align-self: flex-start;
  -ms-flex-item-align: start;
  align-self: flex-start;
  width: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #003077;
}

div#obsDlgBk div#obsDlg div.menu img {
  margin-right: 2px;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 52px;
  -ms-flex: 0 0 52px;
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
}

div#obsDlgBk div#obsDlg div#contentsArea {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

div#obsDlgBk div#obsDlg div#contentsArea div.title {
  padding: 2px 4px 2px 4px;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  align-items: flex-end;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

div#obsDlgBk div#obsDlg div#contentsArea div.title span.name {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  font-size: 0.8rem;
  font-weight: bold;
  text-align: left;
}

div#obsDlgBk div#obsDlg div#contentsArea div.title span.datetime {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  font-size: 0.8rem;
  font-weight: bold;
  text-align: right;
  padding-right: 4px;
}

div#obsDlgBk div#obsDlg div#contentsArea div.title span.cap {
  font-size: 0.6rem;
  font-weight: bold;
  text-align: left;
  padding-right: 2px;
}

div#obsDlgBk div#obsDlg div#contentsArea div.title span.level {
  font-size: 0.8rem;
  font-weight: bold;
  text-align: left;
}

div#obsDlgBk div#obsDlg div#contentsArea div.title img#qtImg {
  /* display: none; */
  width: 16px;
  height: 16px;
}

div#obsDlgBk div#obsDlg div#contentsArea div.cross-frame {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  overflow-y: hidden;
  overflow-x: scroll;
  padding: 0px;
  background-color: #dadada;
}

div#obsDlgBk div#obsDlg div#contentsArea div.cross-frame div#cross {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  /*
          overflow-y: hidden;
          overflow-x: auto;
          */
}

div#obsDlgBk div#obsDlg div#contentsArea div.cross-frame div {
  height: 18px;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 18px;
  -ms-flex: 0 0 18px;
  flex: 0 0 18px;
}

div#obsDlgBk div#obsDlg div#contentsArea div.hydro {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: none;
}

div#obsDlgBk div#obsDlg div#contentsArea div.hydro div#hydoro {
  position: relative;
  overflow-y: hidden;
  overflow-x: scroll;
  background-color: #fff;
  width: 100%;
  height: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

div#obsDlgBk div#obsDlg div#contentsArea div#cctvFrame {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: none;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  /*
        text-align: center;
        background-color: rgba(64, 64, 64, 0.8);
        background-position: 50% 50%;
        background-repeat: no-repeat;
        -moz-background-sixe: contain;
        background-size: contain;
        */
}

div#obsDlgBk div#obsDlg div#contentsArea div#cctvFrame div#cctvFrameTime {
  display: none;
  background-color: #002055;
  width: 100%;
  text-align: right;
  padding: 4px 8px 4px 8px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 0.8rem;
  font-weight: bold;
  color: #fff;
}

div#obsDlgBk div#obsDlg div#contentsArea div#cctvFrame div#cctvFrameImage {
  display: block;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  text-align: center;
  background-color: rgba(64, 64, 64, 0.8);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  -moz-background-sixe: contain;
  background-size: contain;
}

div#obsDlgBk div#obsDlg div#levelRangeFrame {
  width: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
}

div#obsDlgBk div#obsDlg div#levelRangeFrame input#levelRange {
  width: 90%;
  padding-top: 4px;
}

div#obsDlgBk div#obsDlg div#levelRangeFrame input#levelRange::-ms-fill-lower,
div#obsDlgBk div#obsDlg div#levelRangeFrame input#levelRange::-ms-fill-upper {
  background-color: #c7c7c7;
  height: 4px;
}

div#obsDlgBk div#obsDlg div#levelRangeFrame input#levelRange::-ms-thumb {
  background-color: #eee;
  height: 18px;
  width: 9px;
  border: outset #aaa 1px;
  border-radius: 1px;
}

div#obsDlgBk div#obsDlg div#levelRangeFrame input#levelRange::-ms-track {
  border: none;
  color: transparent;
  height: 20px;
  background-color: transparent;
}

div#obsDlgBk div#obsDlg div#levelRangeFrame input#levelRange::-ms-tooltip {
  display: none;
}

div#obsDlgBk div#obsDlg div.foot {
  height: 40px;
  text-align: right;
}

div#obsDlgBk div#obsDlg div.foot img#twitterBtn {
  margin-top: 10px;
  margin-right: 10px;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 52px;
  -ms-flex: 0 0 52px;
  flex: 0 0 52px;
  width: auto;
  height: 20px;
}

div#obsDlgBk div#obsDlg div.foot img#lineBtn {
  margin-top: 10px;
  margin-right: 10px;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 52px;
  -ms-flex: 0 0 52px;
  flex: 0 0 52px;
  width: auto;
  height: 20px;
}

div#obsDlgBk div#obsDlg div.foot iframe#facebookBtn {
  margin-top: 10px;
  margin-right: 10px;
}

div#valueTip {
  position: absolute;
  display: none;
  font-size: 9pt;
  border-radius: 8px;
  border: 2px solid #00a;
  background-color: #fff;
  color: black;
  z-index: 4000;
  white-space: nowrap;
}

div#valueTip div#tipDate {
  font-size: 9pt;
  font-weight: bold;
  text-align: center;
  padding: 4px 4px 2px 4px;
}

div#valueTip div#tipValueLine {
  font-size: 9pt;
  font-weight: bold;
  text-align: right;
  padding: 2px 4px 8px 4px;
}

div#valueTip div#tipValueLine span#tipValue {
  font-size: 11pt;
}

div#toolTip {
  position: absolute;
  display: none;
  font-size: 0.8rem;
  padding: 4px;
  -webkit-box-shadow: 2px 2px 4px gray;
  box-shadow: 2px 2px 4px gray;
  background-color: #fafa99;
  z-index: 4500;
}

#sideMenuBk {
  display: none;
  position: absolute;
  background-color: rgba(128, 128, 192, 0.8);
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  z-index: 3000;
}

#sideMenuBk div#sideMenu {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  width: 250px;
  background-color: rgba(96, 96, 128, 0.8);
  z-index: 3000;
  overflow: auto;
}

#sideMenuBk div.head {
  padding: 4px;
  text-align: right;
}

#sideMenuBk div.head img {
  height: 20px;
  width: 20px;
}

#sideMenuBk div.section {
  padding: 4px;
  font-size: 0.9rem;
  color: #fff;
  background-color: rgba(16, 36, 96, 0.8);
}

#sideMenuBk div.content {
  padding: 4px 4px 4px 30px;
  background-color: rgba(192, 192, 192, 0.8);
}

#sideMenuBk div.contentFrame {
  padding: 4px 4px 4px 4px;
  background-color: rgba(192, 192, 192, 0.8);
}

#sideMenuBk div.contentFrame a.mailto {
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: bold;
  text-decoration: none;
  color: #0000f0;
}

#sideMenuBk div.btnContent {
  padding: 10px 10px 10px 10px;
  margin-top: 5px;
  font-size: 0.8rem;
  font-weight: bold;
  width: 100%;
  color: #fff;
  background-color: #0c1d96;
  border-radius: 7px;
  border: 2px solid rgba(16, 36, 96, 0.8);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: relative;
}

#sideMenuBk div.btnContent a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-indent: -999px;
}

#sideMenuBk div.btnContent span.sideMenuBtnTitle {
  -webkit-box-flex: 12;
  -webkit-flex: 12;
  -ms-flex: 12;
  flex: 12;
}

#sideMenuBk div.btnContent img.sideMenuBtnMark {
  text-align: right;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  width: 10px;
  height: 10px;
}

#sideMenuBk div.item {
  padding: 2px;
  font-size: 0.8rem;
  color: #000;
}

#sideMenuBk div.item input[type="checkbox"] {
  content: "";
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: relative;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  background: url(../img/checkbox.png) left top;
  background-size: 20px;
  margin-right: 10px;
  border: none;
}

#sideMenuBk div.item input[type="checkbox"]:checked::before {
  content: "";
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 20px;
  height: 20px;
  background: url(../img/checkbox.png) left bottom;
  background-size: 20px;
  margin-right: 10px;
}

#sideMenuBk div.item select {
  height: 1.4rem;
}

#levelListDlgBk {
  display: none;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 4000;
  background-color: rgba(128, 128, 128, 0.8);
}

#levelListDlgBk #levelListDlg {
  position: absolute;
  z-index: 4001;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 90%;
  height: 90%;
  max-width: 448px;
  max-height: 728px;
  border-radius: 12px;
  background-color: #003077;
}

#levelListDlgBk #levelListDlg div.title-block {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  height: 24px;
}

#levelListDlgBk #levelListDlg div.title-block div.title {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  font-size: 0.8rem;
  font-weight: bold;
  color: #fff;
  text-align: left;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 8px 0px 2px 12px;
}

#levelListDlgBk #levelListDlg div.title-block img#levelListDlgRenew {
  margin: 2px 6px 2px 2px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
}

#levelListDlgBk #levelListDlg div.title-block img#levelListDlgClose {
  margin: 2px 6px 2px 2px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
}

#levelListDlgBk #levelListDlg div.cross-block div#obsNameTitle {
  font-size: 1.5rem;
  font-weight: bold;
  color: #fff;
  text-align: center;
  padding: 2px 4px 3px 8px;
}

#levelListDlgBk #levelListDlg div.cross-block div#obsKanaTitle {
  font-size: 0.8rem;
  font-weight: bold;
  color: #fff;
  text-align: center;
}

#levelListDlgBk #levelListDlg div.cross-block div.cross-frame {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  overflow-y: hidden;
  overflow-x: scroll;
  background-color: #dadada;
  padding: 0px;
}

#levelListDlgBk #levelListDlg div.cross-block div.cross-frame div#crossContents {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

#levelListDlgBk #levelListDlg div.cross-block div.cross-frame div {
  height: 150px;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 150px;
  -ms-flex: 0 0 150px;
  flex: 0 0 150px;
}

#levelListDlgBk #levelListDlg div.list-block {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding: 4px;
  overflow: auto;
}

#levelListDlgBk #levelListDlg div.list-block div#levelList div.levelItem {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  align-items: flex-end;
  padding: 8px 4px 4px 8px;
  border-bottom: 1px dotted #fff;
}

#levelListDlgBk #levelListDlg div.list-block div#levelList div.levelItem div.date {
  -webkit-box-flex: 3;
  -webkit-flex: 3;
  -ms-flex: 3;
  flex: 3;
  text-align: left;
  font-size: 0.85rem;
  padding: 0px 2px 4px 0px;
}

#levelListDlgBk #levelListDlg div.list-block div#levelList div.levelItem div.time {
  -webkit-box-flex: 1.5;
  -webkit-flex: 1.5;
  -ms-flex: 1.5;
  flex: 1.5;
  font-size: 0.85rem;
  text-align: left;
  padding: 0px 2px 4px 0px;
}

#levelListDlgBk #levelListDlg div.list-block div#levelList div.levelItem div.cap {
  -webkit-box-flex: 2.5;
  -webkit-flex: 2.5;
  -ms-flex: 2.5;
  flex: 2.5;
  font-size: 0.6rem;
  text-align: right;
  padding: 0px 2px 4px 0px;
}

#levelListDlgBk #levelListDlg div.list-block div#levelList div.levelItem div.val {
  -webkit-box-flex: 2.5;
  -webkit-flex: 2.5;
  -ms-flex: 2.5;
  flex: 2.5;
  font-size: 0.8em;
  font-weight: bold;
  text-align: right;
  padding: 8px 4px 4px 0px;
}

#levelListDlgBk #levelListDlg div.list-block div#levelList div.levelItem div.qtDiv {
  -webkit-box-flex: 0.5;
  -webkit-flex: 0.5;
  -ms-flex: 0.5;
  flex: 0.5;
}

#levelListDlgBk #levelListDlg div.list-block div#levelList div.levelItem div.qtDiv img.qt {
  width: 16px;
  height: 16px;
}

#levelListDlgBk #levelListDlg div.foot-block {
  height: 10px;
}

img.opinfo {
  position: absolute;
  display: none;
  z-index: 2000;
  width: 24px;
  height: 24px;
}

img#nminfoBtn {
  top: 140px;
  left: 16px;
}

img#eminfoBtn {
  top: 180px;
  left: 16px;
}

div.opinfoWin {
  position: absolute;
  display: none;
  z-index: 2001;
  width: 90%;
  max-width: 450px;
  border-radius: 8px;
}

div.opinfoWin img {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 16px;
  height: 16px;
}

div.opinfoWin div {
  position: relative;
  padding: 22px 8px 8px 8px;
  color: #fff;
  font-size: 0.8rem;
  font-weight: bold;
}

div#nminfoWin {
  background-color: #107040;
  font-size: 10pt;
}

div#eminfoWin {
  background-color: #800000;
  font-size: 10pt;
}

div#sideMenuDlgBk {
  display: none;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  z-index: 4000;
  background-color: rgba(192, 192, 192, 0.5);
}

div#sideMenuDlgBk div#sideMenuDlg {
  position: absolute;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 90%;
  height: 90%;
  z-index: 4001;
  max-width: 448px;
  max-height: 728px;
  border-radius: 12px;
  background-color: #003077;
}

div#sideMenuDlgBk div#sideMenuDlg div#sideMenuDlgTitle {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  height: 24px;
}

div#sideMenuDlgBk div#sideMenuDlg div#sideMenuDlgTitle img.close {
  margin: 2px 3px 2px 2px;
  margin-left: auto;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
}

div#sideMenuDlgBk div#sideMenuDlg div#sideMenuDlgContent {
  margin-left: auto;
  margin-right: auto;
  width: 90%;
  height: 90%;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  overflow: auto;
}

div#sideMenuDlgBk div#sideMenuDlg div#sideMenuDlgContent div#manualFrame {
  display: none;
}

div#sideMenuDlgBk div#sideMenuDlg div#sideMenuDlgContent div#manualFrame img#sideMenuManual {
  width: 100%;
}

div#sideMenuDlgBk div#sideMenuDlg div#sideMenuDlgContent div#attentionFrame {
  display: none;
  padding: 4px;
  background-color: #fff;
}

div#sideMenuDlgBk div#sideMenuDlg div#sideMenuDlgFoot {
  height: 15px;
}

div#firstAccessDlgBk {
  display: none;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  z-index: 4000;
  background-color: rgba(192, 192, 192, 0.5);
}

div#firstAccessDlgBk div#firstAccessDlg {
  position: absolute;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 90%;
  height: 90%;
  z-index: 4001;
  max-width: 448px;
  max-height: 728px;
  border-radius: 12px;
  background-color: #003077;
}

div#firstAccessDlgBk div#firstAccessDlg div#firstAccessDlgTitle {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  height: 24px;
}

div#firstAccessDlgBk div#firstAccessDlg div#firstAccessDlgTitle img.close {
  margin: 2px 3px 2px 2px;
  margin-left: auto;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
}

div#firstAccessDlgBk div#firstAccessDlg div#firstAccessDlgContent {
  margin-left: auto;
  margin-right: auto;
  width: 90%;
  height: 90%;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  overflow: auto;
}

div#firstAccessDlgBk div#firstAccessDlg div#firstAccessDlgContent div#firstAccessFrame {
  padding: 4px;
  background-color: #fff;
}

div#firstAccessDlgBk div#firstAccessDlg div#firstAccessDlgFoot {
  height: 10px;
}

div#obsPicDlgBk {
  background-color: rgba(127, 127, 127, 0.8);
  position: absolute;
  display: none;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 3100;
}

div#obsPicDlgBk div#obsPicDlg {
  z-index: 3101;
  position: absolute;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  background-color: rgba(0, 36, 96, 0.8);
  border-radius: 12px;
}

@media screen and (orientation: portrait) {
  div#obsPicDlgBk div#obsPicDlg {
    max-width: 86%;
    max-height: 60%;
  }
}

@media screen and (orientation: landscape) {
  div#obsPicDlgBk div#obsPicDlg {
    max-width: 50%;
    max-height: 86%;
  }
}

div#obsPicDlgBk div#obsPicDlg div.header {
  padding: 4px;
  text-align: right;
  width: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

div#obsPicDlgBk div#obsPicDlg div.header img {
  width: 16px;
  height: 16px;
}

div#obsPicDlgBk div#obsPicDlg div.content {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  background-color: rgba(64, 64, 64, 0.8);
}

div#obsPicDlgBk div#obsPicDlg div.content img#obsPicImg {
  width: auto;
  height: auto;
  margin: auto;
}

div#obsPicDlgBk div#obsPicDlg div.footer {
  width: 100%;
  height: 20px;
}

div#msgBoxBk {
  display: none;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 3000;
  background-color: rgba(128, 128, 128, 0.8);
}

div#msgBoxBk div#msgBox {
  position: absolute;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  border-radius: 12px;
  width: 90%;
  max-width: 450px;
}

div#msgBoxBk div#msgBox img {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
}

div#msgBoxBk div#msgBox div#msgData {
  position: relative;
  padding: 20px;
  color: #fff;
  font-size: 0.8rem;
  font-weight: bold;
  line-height: 1.5em;
}

div#msgBoxBk div.info {
  background-color: #107040;
  font-size: 10pt;
}

div#msgBoxBk div.error {
  background-color: #800000;
  font-size: 10pt;
}

div#cctvZoomDlgBk {
  display: none;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 3000;
  background-color: rgba(128, 128, 128, 0.8);
}

div#cctvZoomDlgBk div#cctvZoomDlg {
  position: absolute;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  background-color: rgba(0, 36, 96, 0.8);
  border-radius: 12px;
  max-width: 1000px;
  max-height: 650px;
}

@media screen and (orientation: portrait) {
  div#cctvZoomDlgBk div#cctvZoomDlg {
    width: 100%;
    height: 58%;
  }
}

@media screen and (orientation: landscape) {
  div#cctvZoomDlgBk div#cctvZoomDlg {
    width: 80%;
    height: 100%;
  }
}

div#cctvZoomDlgBk div#cctvZoomDlg div#cctvZoomHead {
  text-align: right;
  height: 40px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

div#cctvZoomDlgBk div#cctvZoomDlg div#cctvZoomHead img {
  width: 32px;
  height: 32px;
  margin-top: 4px;
  margin-right: 6px;
  margin-left: auto;
}

div#cctvZoomDlgBk div#cctvZoomDlg div#cctvZoomFrame {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  /*
      text-align: center;
      background-color: rgba(64, 64, 64, 0.8);
      background-position: 50% 50%;
      background-repeat: no-repeat;
      -moz-background-sixe: contain;
      background-size: contain;
      */
}

div#cctvZoomDlgBk div#cctvZoomDlg div#cctvZoomFrame div#cctvZoomFrameTime {
  display: none;
  background-color: #002055;
  width: 100%;
  text-align: right;
  padding: 4px 8px 4px 8px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 0.8rem;
  font-weight: bold;
  color: #fff;
}

div#cctvZoomDlgBk div#cctvZoomDlg div#cctvZoomFrame div#cctvZoomFrameImage {
  display: block;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  text-align: center;
  background-color: rgba(64, 64, 64, 0.8);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  -moz-background-sixe: contain;
  background-size: contain;
}

div#cctvZoomDlgBk div#cctvZoomDlg div#cctvZoomFoot {
  height: 10px;
}

div#hydroZoomDlgBk {
  display: none;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 4000;
  background-color: rgba(128, 128, 128, 0.8);
}

div#hydroZoomDlgBk div#hydroZoomDlg {
  position: absolute;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  background-color: rgba(0, 36, 96, 0.8);
  border-radius: 12px;
  max-width: 1000px;
  max-height: 650px;
}

@media screen and (orientation: portrait) {
  div#hydroZoomDlgBk div#hydroZoomDlg {
    width: 100%;
    height: 58%;
  }
}

@media screen and (orientation: landscape) {
  div#hydroZoomDlgBk div#hydroZoomDlg {
    width: 80%;
    height: 100%;
  }
}

div#hydroZoomDlgBk div#hydroZoomDlg div#hydroZoomHead {
  text-align: right;
  height: 40px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

div#hydroZoomDlgBk div#hydroZoomDlg div#hydroZoomHead img {
  width: 32px;
  height: 32px;
  margin-top: 4px;
  margin-right: 6px;
  margin-left: auto;
}

div#hydroZoomDlgBk div#hydroZoomDlg div#hydroZoomFrame {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

div#hydroZoomDlgBk div#hydroZoomDlg div#hydroZoomFrame div#hydroZoom {
  position: relative;
  overflow-y: hidden;
  overflow-x: scroll;
  background-color: #fff;
  width: 100%;
  height: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

div#hydroZoomDlgBk div#hydroZoomDlg div#hydroZoomFoot {
  height: 10px;
}

div#crossZoomDlgBk {
  display: none;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 4000;
  background-color: rgba(128, 128, 128, 0.8);
}

div#crossZoomDlgBk div#crossZoomDlg {
  position: absolute;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  background-color: rgba(0, 36, 96, 0.8);
  border-radius: 12px;
  max-width: 1000px;
  max-height: 650px;
}

@media screen and (orientation: portrait) {
  div#crossZoomDlgBk div#crossZoomDlg {
    width: 100%;
    height: 58%;
  }
}

@media screen and (orientation: landscape) {
  div#crossZoomDlgBk div#crossZoomDlg {
    width: 80%;
    height: 100%;
  }
}

div#crossZoomDlgBk div#crossZoomDlg div#crossZoomHead {
  text-align: right;
  height: 40px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

div#crossZoomDlgBk div#crossZoomDlg div#crossZoomHead img {
  width: 32px;
  height: 32px;
  margin-top: 4px;
  margin-right: 6px;
  margin-left: auto;
}

div#crossZoomDlgBk div#crossZoomDlg div#crossZoomFrame {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

div#crossZoomDlgBk div#crossZoomDlg div#crossZoomFrame div.cross-frame {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  overflow-y: hidden;
  overflow-x: scroll;
  padding: 0px;
  background-color: #dadada;
}

div#crossZoomDlgBk div#crossZoomDlg div#crossZoomFrame div#crossZoomContent {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

div#crossZoomDlgBk div#crossZoomDlg div#crossZoomRangeFrame {
  width: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
}

div#crossZoomDlgBk div#crossZoomDlg div#crossZoomRangeFrame input#crossZoomRange {
  width: 90%;
  padding-top: 4px;
}

div#crossZoomDlgBk div#crossZoomDlg div#crossZoomRangeFrame input#crossZoomRange::-ms-fill-lower,
div#crossZoomDlgBk div#crossZoomDlg div#crossZoomRangeFrame input#crossZoomRange::-ms-fill-upper {
  background-color: #c7c7c7;
  height: 4px;
}

div#crossZoomDlgBk div#crossZoomDlg div#crossZoomRangeFrame input#crossZoomRange::-ms-thumb {
  background-color: #eee;
  height: 18px;
  width: 9px;
  border: outset #aaa 1px;
  border-radius: 1px;
}

div#crossZoomDlgBk div#crossZoomDlg div#crossZoomRangeFrame input#crossZoomRange::-ms-track {
  border: none;
  color: transparent;
  height: 20px;
  background-color: transparent;
}

div#crossZoomDlgBk div#crossZoomDlg div#crossZoomRangeFrame input#crossZoomRange::-ms-tooltip {
  display: none;
}

div#crossZoomDlgBk div#crossZoomDlg div#crossZoomFoot {
  height: 10px;
}

div#twitterErrDlgBk {
  display: none;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 4000;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  background-color: rgba(128, 128, 128, 0.8);
}

div#twitterErrDlgBk div#twitterErrDlg {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  background-color: #800000;
  color: #fff;
  border-radius: 12px;
  width: 200px;
  height: 100px;
  margin: auto;
  padding: 4px 4px 4px 8px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

div#twitterErrDlgBk div#twitterErrDlg div#twitterErrHead {
  height: 32px;
  text-align: right;
}

div#twitterErrDlgBk div#twitterErrDlg div#twitterErrHead img {
  width: auto;
  height: 100%;
}

div#twitterErrDlgBk div#twitterErrDlg div#twitterErrMsg {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  font-weight: bolder;
}