html,
body {
  padding    : 0;
  margin     : 0;
  font-family: "Inter", sans-serif;
  color      : #efefef;
  overflow   : hidden;
}

#backgroundImage {
  background-image: url(./images/basic/151_front_st_mm.png);
  /* background-image: url(./images/basic/151_front_st_twn.png); */
  width           : 1920px;
  height          : 1080px;
  position        : absolute;
  top             : 0px;
  left            : 0px;
  z-index         : -10;
}

#stationId {
  width                 : 294px;
  height                : 185px;
  position              : absolute;
  top                   : 900px;
  left                  : 1626px;
  display               : flex;
  align-items           : center;
  justify-content       : center;
  align-content         : center;
  /* background-color   : rgba(255, 0, 0, 0.53); */
}

#liveVideoDiv {
  width           : 1600px;
  height          : 900px;
  position        : absolute;
  top             : 0px;
  left            : 390px;
  background-color: rgb(0, 0, 0);
}

.stationIdDiv {
  width  : 294px;
  padding: 0px 27px;
}

.stationIdImage {
  width: 100%;
}

.cityDiv {
  width                 : 1920px;
  height                : 1080px;
  position              : absolute;
  /* background-color   : rgba(255, 0, 0, 0.53); */
  opacity               : 1;
  display               : none;
}

.cityDiv_fadeIn {
  animation-name           : fadeIn;
  animation-duration       : 1s;
  animation-timing-function: linear;
  animation-fill-mode      : forwards;
}

.cityDiv_fadeOut {
  animation-name           : fadeOut;
  animation-duration       : 1s;
  animation-timing-function: linear;
  animation-fill-mode      : forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.cityNameDiv {
  width              : 390px;
  height             : 69px;
  position           : absolute;
  top                : 39px;
  left               : 53px;
  /* background-color: rgba(255, 235, 83, 0.216); */
  display            : flex;
  justify-content    : center;
  align-items        : center;
}

.cityName_locator {
  width       : 19px;
  height      : 27px;
  margin-right: 7px;
}

.cityName_label {
  color      : #000000;
  font-family: "Inter", sans-serif;
  font-style : normal;
  font-weight: 700;
  font-size  : 35px;
  line-height: 32px;
  text-align : center;
}

.cityName_blueBarBox {
  position  : absolute;
  width     : 100%;
  margin-top: -23px;
}

.cityName_blueBar {
  background-color: #062f80;
  position        : absolute;
  top             : 34px;
  width           : 0px;
  height          : 10px;
}

.blueBarGrow {
  animation-duration       : 10s;
  animation-timing-function: linear;
  animation-delay          : 0s;
  animation-iteration-count: 1;
  animation-direction      : normal;
  animation-fill-mode      : forwards;
  animation-play-state     : running;
  animation-name           : timerBar;
}

@keyframes timerBar {
  0% {
    width: 0px;
  }

  100% {
    width: 390px;
  }
}

.cityWingDiv {
  width              : 390px;
  height             : 756px;
  position           : absolute;
  top                : 108px;
  left               : 53px;
  /* background-color: rgba(255, 0, 0, 0.53); */
}

.cityWingLongTermDiv {
  width                 : 390px;
  height                : 756px;
  /* position           : absolute; */
  /* background-color   : rgba(255, 0, 0, 0.53); */
}

.wingBoxDiv {
  width              : 390px;
  height             : 252px;
  /* background-color: rgba(255, 0, 0, 0.53); */
}

.wingBox_headerBox {
  display           : flex;
  flex-direction    : row;
  justify-content   : center;
  align-items       : center;
  gap               : 21.02px;
  width             : 390px;
  height            : 46px;
  /* background     : linear-gradient(270deg, #172C56 0%, #446FC2 99.6%); */
}

.wingBox_headerText {
  font-style : normal;
  font-weight: 500;
  font-size  : 32px;
  line-height: 42px;

  /* Text */
  color: #efefef;
}

.wingBox_infoBox,
.wingBox_shortterm_infoBox,
.wingBox_longterm_infoBox {
  width                       : 390px;
  height                      : 145px;
  /* height                   : 270px; */
  /* background-color         : rgba(153, 0, 255, 0.716); */
  display                     : flex;
  /* flex-direction           : column; */
  justify-content             : center;
  align-items                 : center;
}

.wingBox_shortterm_infoLabelBox,
.wingBox_longterm_infoLabelBox {
  display               : flex;
  flex-direction        : column;
  /* justify-content    : space-evenly; */
  align-items           : center;
}

.wingBox_iconBox {
  /*display: flex; */
  width                : 130px;
  /* height            : 71px; */
  /* margin-top        : 10px; */
  /* justify-content   : center;*/
}

.wingBox_iconImage {
  width          : 100%;
  height         : 80px;
  display        : flex;
  justify-content: center;
}

.wingBox_tempBox {
  width           : 130px;
  /* height       : 44px; */
  /* margin-top   : 17px; */
}

.wingBox_tempText {
  font-style    : normal;
  font-weight   : 400;
  font-size     : 70px;
  line-height   : 25px;
  /* width      : 263px; */
  text-align    : center;
}

.wingBox_degree {
  font-size     : 50px;
  vertical-align: super;
}

.wingBox_labelBox {
  width          : 240px;
  height         : 35px;
  display        : flex;
  align-items    : flex-end;
  justify-content: center;
}

.wingBox_labelText {
  font-style : normal;
  font-weight: 400;
  font-size  : 21px;
  line-height: 25px;
  text-align : center;
}

.cityBannerDiv {
  width              : 1150px;
  height             : 207px;
  position           : absolute;
  top                : 872px;
  left               : 451px;
  /* background-color: rgba(255, 0, 0, 0.53); */
}

.cityWingShortTermDiv,
.cityWingLongTermDiv,
.cityBannerHourlyDiv,
.cityBannerLongtermDiv {
  position: absolute;
}

.x12hours_headerBox,
.x7days_headerBox {
  width : 1150px;
  height: 42px;

  /* background: linear-gradient(90deg, #172C56 0%, #254688 47.09%, #446FC2 99.6%); */

  display        : flex;
  align-items    : center;
  justify-content: space-evenly;
}

.x12hours_product,
.x7days_product {
  display           : flex;
  position          : relative;
  /* top            : -36px; */
  height            : 207px;
  flex-direction    : row;
  justify-content   : space-evenly;
}

.bottomBox_infoBox {
  width          : 94px;
  /* display     : flex; */
  flex-direction : column;
  align-items    : center;
  justify-content: space-evenly;
  position       : relative;
  margin-top     : 35px;
}

.bottomBox_hourly_infoBox {
  width          : 94px;
  /* display     : flex; */
  flex-direction : column;
  align-items    : center;
  justify-content: space-evenly;
  position       : relative;
  margin-top     : 35px;
}

.bottomBox_longterm_infoBox {
  width          : 162px;
  /* display     : flex; */
  flex-direction : column;
  align-items    : center;
  justify-content: space-evenly;
  position       : relative;
  margin-top     : 35px;
}

.bottomBox_headerBox {
  height: 47px;
}

.bottomBox_headerText {
  font-style : normal;
  font-weight: 600;
  font-size  : 27px;
  line-height: 33px;
  text-align : center;
  margin-top : -34px;
}

.bottomBox_iconBox {
  /* background-color: chocolate; */
  display        : flex;
  justify-content: center;
}

.bottomBox_iconImage {
  width : 58px;
  height: 47px;
}

.bottomBox_tempBox {
  /* background-color   : cyan; */
  height             : 48px;
  /* margin-top      : 8px */
}

.bottomBox_tempText {
  font-style : normal;
  font-weight: 400;
  font-size  : 44px;
  line-height: 53px;
  text-align : center;
}

.bottomBox_degree {
  font-size     : 32px;
  vertical-align: super;
}

.separator_main {
  width     : 2px;
  background: linear-gradient(0deg, #ffffff 0%, #99b2e1ac 33%, #6587d100 80%);
  height    : 100%;
}

.fadeInDown {
  -webkit-animation-name     : fadeInDown;
  animation-name             : fadeInDown;
  -webkit-animation-duration : 1s;
  animation-duration         : 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode        : both;
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity          : 0;
    -webkit-transform: translate3d(0, -15%, 0);
    transform        : translate3d(0, -15%, 0);
  }

  100% {
    opacity          : 1;
    -webkit-transform: none;
    transform        : none;
  }
}

@keyframes fadeInDown {
  0% {
    opacity          : 0;
    -webkit-transform: translate3d(0, -15%, 0);
    transform        : translate3d(0, -15%, 0);
  }

  100% {
    opacity          : 1;
    -webkit-transform: none;
    transform        : none;
  }
}