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

#backgroundImage {
  /*   background-image: url(./images/basic/lshape_fast_yellow.png); */
  background-image: url(./images/basic/lshape_fast_yellow_headers.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            : 320px;
  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           : 320px;
  height          : 90px;
  position        : absolute;
  top             : 0px;
  left            : 0px;
  background-color: rgba(255, 234, 83, 1);
  display         : flex;
  justify-content : center;
  align-items     : center;
}

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

.cityName_label {
  color      : #203C73;
  font-family: 'Inter', sans-serif;
  font-style : normal;
  font-weight: 700;
  font-size  : 26.5942px;
  line-height: 32px;
  text-align : center;
}

.cityName_blueBarBox {
  position: absolute;
  width   : 100%;
}

.cityName_blueBar {
  background-color: #2e4f90;
  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: 320px
  }
}

.cityWingDiv {
  width              : 320px;
  height             : 990px;
  position           : absolute;
  top                : 90px;
  left               : 0px;
  /* background-color: rgba(255, 0, 0, 0.53); */
}

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

.wingBoxDiv {
  width              : 320px;
  height             : 330px;
  /* 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             : 320px;
  height            : 60px;
  /* background     : linear-gradient(270deg, #172C56 0%, #446FC2 99.6%); */
}

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

  /* Text */
  color: #EFEFEF;
}

.wingBox_infoBox,
.wingBox_shortterm_infoBox,
.wingBox_longterm_infoBox {
  width                    : 320px;
  height                   : 205px;
  /* height                : 270px; */
  /* background-color      : rgba(153, 0, 255, 0.716); */
  display                  : flex;
  flex-direction           : column;
  /* justify-content       : space-evenly; */
  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             : 263px;
  height            : 71px;
  margin-top        : 25px;
  /* justify-content: center;*/
}

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

.wingBox_tempBox {
  width     : 263px;
  height    : 72px;
  margin-top: 22px;
}

.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         : 46px;
  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              : 1306px;
  height             : 185px;
  position           : absolute;
  top                : 900px;
  left               : 320px;
  /* background-color: rgba(255, 0, 0, 0.53); */
}

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

.x12hours_headerBox,
.x7days_headerBox {
  width : 1306px;
  height: 36px;

  /* 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         : 185px;
  flex-direction : row;
  justify-content: space-evenly;
}

.bottomBox_infoBox {
  width          : 105px;
  /* 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;
  }
}