.box-timebar-controls {
  z-index: 100;
  position: absolute;
  bottom: 0.2rem;
  width: 80vw;
  height: 4rem;
  display: none;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
}

.box-back-pause {
  width: 10vw;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  padding-left: 40px;
}

#btn-timebar-back {
  width: 40px;
  height: 40px;
  border: 0;
}

.fa-backward {
  font-size: 14px;
  margin-left: -2px;
  position: relative;
  top: 0px;
  color: #3697D1;
}

#btn-timebar-play {
  width: 40px;
  height: 40px;
  border: 0;
}

.fa-play {
  font-size: 12px;
  margin-left: 2px;
  margin-top: 3px;
  color: #3697D1;
}

#btn-timebar-pause {
  width: 40px;
  height: 40px;
  border: 0;
  display: none;
}

.fa-pause {
  font-size: 12px;
  margin-left: 0px;
  margin-top: 3px;
  color: #3697D1;
}

#btn-timebar-fore {
  width: 40px;
  height: 40px;
  border: 0;
}

.fa-forward {
  font-size: 14px;
  margin-left: 2px;
  position: relative;
  top: 1px;
  color: #3697D1;
}

.box-datetime {
  width: 10vw;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
}

#cur-datetime {
  width: 8.5vw;
  height: 36px;
  background-color: white;
  color: transparent;
}

.box-selectDay {
  position: absolute;
  width: 9vw;
  height: 4.5rem;
  bottom: 4rem;
  border-radius: 1rem;
  background-color: white;
  display: none;
}

.yearText-selectDay {
  font-weight: 600;
  line-height: 2rem;
  text-align: center;
}

.dividingLine {
  border: 0.6px rgba(0, 0, 0, 0.5) solid;
  margin: 0 0.5rem 0.3rem;
}

.days-selectDay {
  height: 3.5rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.daysLabel {
  line-height: 1.5rem;
  height: 1.5rem;
  border-radius: 0.4rem;
  width: 2vw;
  margin: 0 0.5vw;
  text-align: center;
  font-weight: 600;
  color: #3697D1;
  cursor: pointer;
}

.close-selectDay {
  cursor: pointer;
  position: absolute;
  color: #3697D1;
  width: 1.9rem;
  height: 1.9rem;
  right: -0.1rem;
  top: -0.1rem;
}

.close-selectDay i {
  font-size: 30px;
}

.label-cur-datetime {
  line-height: 36px;
  color: #3697D1;
  font-weight: 700;
  position: absolute;
  pointer-events: none;
}

.box-dt-slide {
  padding: 0 20px;
  width: 55vw;
  height: 2rem;
}

.box-dt-slide:before {
  content: ".";
  position: relative;
  left: -20px;
  bottom: -8px;
  width: 20px;
  height: 8px;
  display: block;
  background-color: rgba(255, 255, 255, .333);
  color: transparent;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

.box-dt-slide:after {
  content: ".";
  position: relative;
  left: 100%;
  top: -8px;
  width: 20px;
  height: 8px;
  display: block;
  background-color: rgba(255, 255, 255, .333);
  color: transparent;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

.datetime-slider {
  margin-bottom: 0 !important;
  border-radius: 0 !important;
}

.box-fore {
  width: 5vw;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
}

.button-glow {
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-name: glowing;
  animation-name: glowing;
}

@-webkit-keyframes glowing {
  0% {
    -webkit-box-shadow: 0 0 0 rgba(240, 240, 240, 0.3);
    box-shadow: 0 0 0 rgba(240, 240, 240, 0.3);
  }

  50% {
    -webkit-box-shadow: 0 0 15px rgba(240, 240, 240, 0.8);
    box-shadow: 0 0 15px rgba(240, 240, 240, 0.8);
  }

  100% {
    -webkit-box-shadow: 0 0 0 rgba(240, 240, 240, 0.3);
    box-shadow: 0 0 0 rgba(240, 240, 240, 0.3);
  }
}

@keyframes glowing {
  0% {
    -webkit-box-shadow: 0 0 0 rgba(240, 240, 240, 0.3);
    box-shadow: 0 0 0 rgba(240, 240, 240, 0.3);
  }

  50% {
    -webkit-box-shadow: 0 0 15px rgba(240, 240, 240, 0.8);
    box-shadow: 0 0 15px rgba(240, 240, 240, 0.8);
  }

  100% {
    -webkit-box-shadow: 0 0 0 rgba(240, 240, 240, 0.3);
    box-shadow: 0 0 0 rgba(240, 240, 240, 0.3);
  }
}

.fa-label {
  width: auto;
  height: auto;
  color: white;
  display: block;
  opacity: 1;
  font-size: 15px;
  position: absolute;
  letter-spacing: 2px;
  font-weight: 400;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
}

.fa-label-play {}

.fa-label-pause {}

.fa-label-back {}

.fa-label-datetime {}

.fa-label-fore {}

.box-timebar-controls .ui-widget-content .ui-slider-handle.ui-state-default {
  background: #ffffff;
  border-color: #ffffff;
}

.box-timebar-controls .ui-widget {
  font-size: 23px !important;
}

.box-timebar-controls .ui-slider-horizontal {
  height: 5px !important;
}

.box-timebar-controls .ui-widget-content {
  background: rgba(255, 255, 255, .333);
  border: none;
  height: 8px !important;
}

.box-timebar-controls .ui-slider.ui-slider-horizontal .ui-slider-handle {
  width: 18px !important;
  margin-left: -9px !important;
  top: -5px !important;
  height: 18px !important;
  border-radius: 18px !important;
}

.box-timebar-controls .ui-slider-float .ui-slider-tip,
.box-timebar-controls .ui-slider-float .ui-slider-tip-label {
  font-size: 13px !important;
  height: 32px !important;
  width: 125px !important;
  font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
  font-weight: 100;
  margin-left: -63px !important;
  line-height: 32px !important;
}

.box-timebar-controls .ui-slider-float .ui-slider-handle:focus .ui-slider-tip,
.box-timebar-controls .ui-slider-float .ui-slider-handle:hover .ui-slider-tip,
.box-timebar-controls .ui-slider-float .ui-slider-pip:hover .ui-slider-tip-label {
  top: -40px !important;
}

.box-timebar-controls .ui-slider-pips .ui-slider-label {
  margin-left: -14px;
  font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 400;
}

.box-timebar-controls .ui-slider-pips .ui-slider-pip {
  color: #ffffff;
}

.box-timebar-controls .ui-widget-content .ui-slider-handle.ui-state-active,
.box-timebar-controls .ui-widget-content .ui-slider-handle.ui-state-focus,
.box-timebar-controls .ui-widget-content .ui-slider-handle.ui-state-hover {
  background: #ffffff;
}

.box-timebar-controls .ui-slider-pip:hover .ui-slider-label {
  color: red !important;
  font-weight: 100;
}

.box-timebar-controls .ui-slider-pips .ui-slider-pip-selected,
.box-timebar-controls .ui-slider-pips .ui-slider-pip-selected-first,
.box-timebar-controls .ui-slider-pips .ui-slider-pip-selected-second {
  color: #FF7A00;
  font-weight: bold;
}

.box-timebar-controls .ui-slider-pips .ui-slider-pip-selected-initial,
.box-timebar-controls .ui-slider-pips .ui-slider-pip-selected-initial-first,
.box-timebar-controls .ui-slider-pips .ui-slider-pip-selected-initial-second {
  font-weight: 100;
}

.box-timebar-controls .ui-slider-pips .ui-slider-pip {
  line-height: 0 !important;
}

.box-timebar-controls .ui-slider-pips .ui-slider-line {
  background: rgba(255, 255, 255, .333);
  width: 2px;
  height: 6px;
  left: 52%;
  top: -12px;
}

.box-timebar-controls .ui-slider-float .ui-slider-tip,
.box-timebar-controls .ui-slider-float .ui-slider-tip-label {
  background: rgba(255, 255, 255, .75);
  border: none;
  border-radius: 12px;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.9);
}

.box-timebar-controls .ui-slider-float .ui-slider-pip .ui-slider-tip-label:before,
.box-timebar-controls .ui-slider-float .ui-slider-tip:before {
  border: 5px solid transparent;
  border-top-color: transparent;
}

.box-timebar-controls .ui-slider-float .ui-slider-pip .ui-slider-tip-label:after,
.box-timebar-controls .ui-slider-float .ui-slider-tip:after {
  border: 5px solid transparent;
  border-top-color: rgba(255, 255, 255, .333) !important;
}

.menu-switch {
  width: 2.5rem;
  height: 2.5rem;
  top: 1rem;
  right: 1rem;
  position: absolute;
  z-index: 100;
  cursor: pointer;
}

.menu-switch i {
  color: #3697D1;
  font-size: 40px;
}

.menu-right {
  width: 25%;
  height: 100%;
  right: -25%;
  z-index: 110;
  position: absolute;
  background: white;
  border-radius: 20px;
  overflow: auto;
}

.titleMenu {
  height: 3.5rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.textMenuTitle {
  color: #12507f;
  font-size: 2rem;
  font-weight: 600;
  margin-left: 1rem;
}

.close-menu {
  cursor: pointer;
  width: 2.5rem;
  height: 2.5rem;
  margin-right: 0.5rem;
}

.close-menu i {
  color: #3697D1;
  font-size: 40px;
}

.box-sliderSet {
  width: 100%;
  height: 2.5rem;
  display: flex;
  align-items: center;
}

.box-sliderSet-text {
  width: 20%;
  text-align: center;
}

.box-sliderSet-slider {
  width: 80%;
  padding-right: 2rem;
}

.textM {
  margin-top: 1rem;
  margin-left: 1rem;
}

.layerCon-form {
  margin: 0 0 6% 8%;
}

.timeQueryPanel {
  background-color: white;
  position: absolute;
  bottom: 0;
  width: 100vw;
  z-index: 110;
  overflow: auto;
  display: none;
}

.close-tqPanel {
  position: absolute;
  right: 0;
  cursor: pointer;
  width: 2.3rem;
  height: 2.3rem;
}

.close-tqPanel i {
  color: #3697D1;
  font-size: 36px;
}

.title-tqPanel {
  width: 100%;
  font-weight: 600;
  text-align: center;
  height: 2rem;
  line-height: 2rem;
  display: flex;
}

.pngDownload-tqPanel {
  position: absolute;
  right: 6rem;
}

.content-tqPanel {
  width: 100%;
  text-align: center;
  display: none;
}

.header-content-tqPanel {
  display: flex;
  flex-direction: column;
  width: 5rem;
}

.header-span {
  height: 2rem;
  line-height: 2rem;
}

.header-span4 {
  height: 10rem;
  line-height: 10rem;
}

.content-content-tqPanel {
  width: calc(100% - 6rem);
  overflow: auto;
}

.content-row {
  display: flex;
  max-width: 300vw;
  height: 2rem;
  line-height: 2rem;
}

.content-row4 {
  max-width: 300vw;
  height: 10rem;
  line-height: 10rem;
}

.chart-content-tqPanel {
  max-width: 300vw;
  height: 10rem;
}

.days-content-tqPanel {
  min-width: 16rem;
  flex-grow: 1;
}

.weatherPngSize {
  width: 1.5rem;
  height: 1.5rem;
}

.elementSize {
  min-width: 2rem;
  z-index: 110;
  flex-grow: 1;
}

.loading-tqPanel {
  display: none;
  height: 22rem;
  width: 100%;
}

.box-loading-animate {
  text-align: center;
  z-index: 110;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loadingPoint {
  width: 1.2rem;
  height: 1.2rem;
  background-color: rgb(246, 165, 18);
  margin: 0 0.8rem;
}

.box-loading-animate>div {
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
  animation: bouncedelay 1.4s infinite ease-in-out;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.box-loading-animate .loading-point1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.box-loading-animate .loading-point2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes bouncedelay {

  0%,
  80%,
  100% {
    -webkit-transform: scale(0.0)
  }

  40% {
    -webkit-transform: scale(1.0)
  }
}

@keyframes bouncedelay {

  0%,
  80%,
  100% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  }

  40% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}

.routes-switch {
  width: 2.5rem;
  height: 2.5rem;
  top: 1rem;
  right: 4rem;
  position: absolute;
  z-index: 100;
  cursor: pointer;
}

.routes-switch i {
  color: #3697D1;
  font-size: 40px;
}

.routesPanel-switch {
  width: 2.3rem;
  height: 2.3rem;
  bottom: 18rem;
  right: 1rem;
  position: absolute;
  z-index: 100;
  cursor: pointer;
  display: none;
}

.routesPanel-switch i {
  color: #3697D1;
  font-size: 36px;
}

.routes-Design-Panel {
  background-color: white;
  position: absolute;
  bottom: 0;
  width: 100vw;
  height: 20rem;
  z-index: 110;
  overflow: auto;
  right: -100vw;
}

.close-rdPanel {
  position: absolute;
  right: 0;
  cursor: pointer;
  width: 2.3rem;
  height: 2.3rem;
}

.close-rdPanel i {
  color: #3697D1;
  font-size: 36px;
}

.title-rdPanel {
  width: 100%;
  font-weight: 600;
  text-align: center;
  height: 2rem;
  line-height: 2rem;
  display: flex;
}

.content-rdPanel {
  width: 100%;
  height: 18rem;
  display: flex;
  background-color: rgba(0, 0, 0, 0.1);
}

.newR-rdPanel {
  width: 400px;
  display: flex;
}

.newR-rdPanel-params {
  width: 280px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.newR-rdPanel-btns {
  width: 120px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

.newR-rdPanel .layui-form-label {
  width: 60px;
}

.newR-rdPanel .layui-input-block {
  width: 190px;
  margin-left: 90px;
}

.newR-rdPanel .layui-btn+.layui-btn {
  margin: 0px;
}

.lonlatTable-rdPanel {
  width: calc(50vw - 100px);
}

.historyRecordTable-rdPanel {
  width: calc(50vw - 300px);
}

.divIcon-box {
  border: 0;
  background: transparent;
}

.TimeRPHtml-divIcon {
  background-color: transparent;
  position: absolute;
  top: 10px;
  left: 10px;
  color: #fff;
  font-size: 18px;
}

.valueRPHtml-divIcon {
  background-color: transparent;
  position: relative;
  left: -2px;
  top: -2px;
  color: #fff;
  font-weight: bold;
}

.weatherIcon {
  background-color: transparent;
  position: relative;
  top: -40px;
  left: -8px;
}

.weatherIcon img {
  width: 32px;
  height: 32px;
}

@keyframes warn {
  0% {
    transform: scale(0.3);
    -webkit-transform: scale(0.3);
    opacity: 0.0;
  }

  25% {
    transform: scale(0.3);
    -webkit-transform: scale(0.3);
    opacity: 0.1;
  }

  50% {
    transform: scale(0.5);
    -webkit-transform: scale(0.5);
    opacity: 0.3;
  }

  75% {
    transform: scale(0.8);
    -webkit-transform: scale(0.8);
    opacity: 0.5;
  }

  100% {
    transform: scale(1);
    -webkit-transform: scale(1);
    opacity: 0.0;
  }
}

@keyframes warn1 {
  0% {
    transform: scale(0.3);
    -webkit-transform: scale(0.3);
    opacity: 0.0;
  }

  25% {
    transform: scale(0.3);
    -webkit-transform: scale(0.3);
    opacity: 0.1;
  }

  50% {
    transform: scale(0.3);
    -webkit-transform: scale(0.3);
    opacity: 0.3;
  }

  75% {
    transform: scale(0.5);
    -webkit-transform: scale(0.5);
    opacity: 0.5;
  }

  100% {
    transform: scale(0.8);
    -webkit-transform: scale(0.8);
    opacity: 0.0;
  }
}

.root-point {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 100;
}

.loading-spinner {
  position: absolute;
  width: 150px;
  text-align: center;
  z-index: 10;
}

.loading-spinner>div {
  width: 10px;
  height: 10px;
  background-color: #ff542d;
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
  animation: bouncedelay 1.4s infinite ease-in-out;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.loading-spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.loading-spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes bouncedelay {

  0%,
  80%,
  100% {
    -webkit-transform: scale(0.0)
  }

  40% {
    -webkit-transform: scale(1.0)
  }
}

@keyframes bouncedelay {

  0%,
  80%,
  100% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  }

  40% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}

.menu-close {
  position: absolute;
  z-index: 15;
  width: 22px;
  height: 22px;
  text-align: center;
  line-height: 22px;
  color: #3b96f9;
  font-size: 0.8rem;
  cursor: pointer;
}

.menu-chart {
  position: absolute;
  z-index: 15;
  width: 22px;
  height: 22px;
  text-align: center;
  line-height: 22px;
  color: rgb(246, 165, 18);
  font-size: 1.2rem;
  cursor: pointer;
}

.icon-location {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  text-align: center;
  line-height: 20px;
  color: #058be9;
  margin-top: 2px;
  font-size: 0.96rem;
  float: left;
  padding-right: 1px;
}

.fw-latLng {
  float: left;
  color: #313131;
  font-size: 13px;
}

.content-div {
  position: absolute;
  z-index: 10;
  width: 205px;
  /* background-color: rgba(0, 0, 0, 0.4); */
  background-color: rgba(255, 255, 255, 0.8);
  cursor: move;
  color: #313131;
  font-size: 13px;
  padding: 5px;
  /* box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.19);*/
  border: 2px solid #3d9efc;
  border-radius: 5px;
}

.unSelectable {
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.info-line {
  position: absolute;
  z-index: 10;
  width: 0;
  height: 45px;
  border-right: solid 3px #3d9efc;
  transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -o-transform: rotate(45deg);
}

.separation-line {
  border-bottom: solid 1px #0c54b3;
  height: 0;
  width: 165px;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 8px;
  margin-bottom: 8px;
}

.dot {
  position: absolute;
  width: 8px;
  height: 8px;
  left: 104px;
  top: 104px;
  /* -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border: 1px solid #ff542d;
  border-radius: 50%;
  background-color: #ff542d; */
  z-index: 10;
}

.pulse-inner {
  position: absolute;
  width: 36px;
  height: 36px;
  left: 90px;
  top: 90px;
  border: 1px solid #ff1c0c;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  z-index: 10;
  opacity: 0;
  -webkit-animation: warn 2s ease-out;
  -moz-animation: warn 2s ease-out;
  animation: warn 2s ease-out;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  box-shadow: 1px 1px 30px #ff1c0c;
}

.pulse-outer {
  position: absolute;
  width: 36px;
  height: 36px;
  left: 90px;
  top: 90px;
  border: 1px solid #ff1c0c;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  z-index: 10;
  opacity: 0;
  -webkit-animation: warn1 2s ease-out;
  -moz-animation: warn1 2s ease-out;
  animation: warn1 2s ease-out;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  box-shadow: 1px 1px 30px #ff1c0c;
}

html,
body {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#map {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.layui-field-title {
  margin: 10px 0;
}

.layui-form-onswitch {
  border-color: #3697D1;
  background-color: #3697D1;
}

.layui-form-radio>i:hover,
.layui-form-radioed>i {
  color: #3697D1;
}

.unSelectable {
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.W5vw {
  width: 5vw;
}

.W8vw {
  width: 8vw;
}

.active {
  color: white;
  background-color: rgb(246, 165, 18) !important;
}

.orangeColor {
  color: rgb(246, 165, 18);
}

.btn-Group-left {
  top: 50%;
  /* left: 1.5rem; */
  right: 1.5rem;
  z-index: 100;
  text-align: left;
  position: absolute;
  transform: translateX(0%) translateY(-50%);
  -webkit-transform: translateX(0%) translateY(-50%);
}

.wind-wrap {
  width: 80px;
  min-height: 26px;
  background-color: #fff;
  position: absolute;
  top: 0;
  /* right: 8.5rem; */
  right: 7rem;
  padding: 10px;
  border-radius: 8px;
}

.hid {
  display: none;
}

.wind-wrap::after {
  position: absolute;
  right: -14px;
  top: 10px;
  display: block;
  content: " ";
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  border-left: 8px solid #fff;
  border-top: 8px solid rgba(0, 0, 0, 0);
  border-bottom: 8px solid rgba(0, 0, 0, 0);
}

.wind-wrap div {
  margin-top: 6px;
  margin-bottom: 8px;
}

.btn-img {
  width: 2rem;
  height: 2rem;
  /* border-radius: 2rem; */
  border-radius: 0.4rem 0 0 0.4rem;
  display: inline-block;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 1.5px 3px rgba(0, 0, 0, .25);
  background-repeat: no-repeat;
}

.btn-box {
  position: relative;
}

.btn-box:hover .wind-wrap {
  display: block !important;
}

.btn-box.hover .btn-img {
  color: white;
  background-color: rgb(246, 165, 18) !important;
}

.btn-box.hover .btn-eclipse {
  color: white;
  background-color: rgb(246, 165, 18) !important;
}

.btn-box.hover1 .wind-wrap {
  display: block !important;
}

.img-wind {
  background-image: url("../img/bacImg/wind-blue.svg");
  background-position: 0.3rem;
}

.img-press {
  background-image: url("../img/bacImg/press-blue.svg");
  background-position: 0.3rem;
}

.img-wave {
  background-image: url("../img/bacImg/wave-blue.svg");
  background-position: 0.3rem;
}

.img-seaTemp {
  background-image: url("../img/bacImg/temperature-blue.svg");
  background-position: 0.3rem;
}

.img-current {
  background-image: url("../img/bacImg/current-blue.svg");
  background-position: 0.3rem;
}

.img-temp {
  background-image: url("../img/bacImg/temp-blue.svg");
  background-position: 0.3rem;
}

.img-apcp {
  background-image: url("../img/bacImg/apcp-blue.svg");
  background-position: 0.3rem;
}

.img-typhoon {
  background-image: url("../img/bacImg/typhoon-blue.svg");
  background-position: 0.3rem;
}

.img-cloud {
  background-image: url("../img/bacImg/cloud-blue.svg");
  background-position: 0.3rem;
  background-size: 75%;
}

.img-snapshot {
  background-image: url("../img/bacImg/snapshot-blue.svg");
  background-position: 0.3rem;
  background-size: 75%;
}

.img-layer {
  background-image: url("../img/bacImg/layer-blue.svg");
  background-position: 0.3rem;
  background-size: 75%;
}

.btn-eclipse {
  height: 2rem;
  line-height: 2rem;
  font-size: 0.9rem;
  color: white;
  text-align: center;
  font-weight: 600;
  /* border-radius: 100px; */
  border-radius: 0 0.2rem 0.2rem 0;
  /* -moz-border-radius: 100px;
    -webkit-border-radius: 100px; */
  -moz-border-radius: 0 0.4rem 0.4rem 0;
  -webkit-border-radius: 0 0.4rem 0.4rem 0;
  border: 0 solid transparent;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-bottom: 0.4rem;
  margin-left: 0rem;
  display: inline-block;
  cursor: pointer;
  vertical-align: top;
  background: rgba(0, 0, 0, 0.3);
  box-shadow: 0 2px 4px 0 rgba(95, 95, 95, 0.2), 0 2px 4px 0 rgba(95, 95, 95, 0.19);
}

.btn-eclipse:hover {
  background: rgba(0, 0, 0, 0.6);
}

.box-moduleRB {
  z-index: 100;
  position: absolute;
  right: 1.5rem;
  bottom: 0.2rem;
  width: 20vw;
}

.text-moduleRB {
  text-align: right;
  font-size: 18px;
  font-weight: bold;
  color: white;
  text-shadow: 1px 2px 2px #000;
}

.box-dataTypeRB {
  width: 100%;
  height: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dataTypeRB {
  width: 70%;
  height: 1.5rem;
  background-color: #ffffff;
  border-radius: 25px;
  display: flex;
  text-align: center;
  font-weight: 600;
  letter-spacing: 1px;
}

.dt-icon {
  background-color: #3697D1;
  flex-grow: 1;
  line-height: 1.5rem;
  border-radius: 25px;
}

.dt-gfs {
  flex-grow: 1;
  line-height: 1.5rem;
  border-radius: 25px;
}

.dt-gem {
  flex-grow: 1;
  line-height: 1.5rem;
  border-radius: 25px;
}

.box-reTime {
  width: 100%;
  line-height: 1.5rem;
}

.box-coordinate {
  width: 100%;
  line-height: 2rem;
}

.switchRB {
  width: 100%;
  height: 2.5rem;
}

.switchRB-form {
  display: flex;
  justify-content: space-evenly;
}