.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 90px;
  // height: 90px;
  position: relative;
}

.title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 690px;
  height: 63px;
  top: 16px;
}

.leftSpace {
  padding-top: 43px;
  padding-left: 40px;
}

.leftCard {
  border-radius: 29px;
  height: 36px;
  // height: 58px;
  background: linear-gradient(
    139.3deg,
    rgba(89, 186, 238, 0.4) 7%,
    rgba(96, 155, 236, 0.4) 94%
  );
  display: flex;
  padding: 0 5px 0 26px;
  align-items: center;
  gap: 16px;
  transition: height 0.3s ease;
  
  &:hover {
    background: rgba(7, 169, 255, 0.5);
  }

  > :nth-child(1) {
    color: rgba(255, 255, 255, 0.8);
    font-size: 20px;
    font-weight: 400;
  }
}

.personName {
  color: rgb(255, 255, 255);
  font-size: 20px;
  font-weight: 700;
  margin: 0 20px 0 15px;
}

.popoverTitle {
  font-size: 20px;
  color: #D6E2FF;
  font-family: 'DingTalk JinBuTi';
}

.popoverContent {
  font-size: 24px;
  color: #fff;
  font-weight: 700;
  margin: 12px 0;
  line-height: 1;
}

.weatherContainer {
  display: flex;
  padding-top: 33px;
  padding-right: 60px;
}

.dateTimeContainer {
  display: flex;
  align-items: center;
}

.date {
  color: rgb(255, 255, 255);
  font-family: 'D-DIN';
  font-size: 24px;
  font-weight: 700;
  margin-right: 17px;
  width: 157px;
  text-align: right;
}

.week {
  color: rgb(255, 255, 255);
  font-family: '思源黑体';
  font-size: 20px;
  font-weight: 700;
  line-height: 29px;
  margin-right: 17px;
  width: 60px;
  text-align: center;
}

.time {
  color: rgb(255, 255, 255);
  font-family: 'D-DIN';
  font-size: 24px;
  font-weight: 700;
  margin-right: 23px;
  width: 107px;
  text-align: center;
}

.timeDigits {
  font-variant-numeric: tabular-nums;
}

.divider {
  width: 2px;
  height: 20px;
  background: rgb(72, 168, 221);
  opacity: 0.47;
  margin: 0px 23px 0 0;
}

.weatherInfoContainer {
  display: flex;
  align-items: center;
}

.city {
  color: rgb(255, 255, 255);
  font-family: '思源黑体';
  font-size: 20px;
  font-weight: 700;
  line-height: 29px;
  margin-right: 15px;
}

.weatherIcon {
  width: 28px;
  height: 28px;
  margin-right: 19px;
}

.temperature {
  color: rgb(255, 255, 255);
  font-family: 'D-DIN';
  font-size: 24px;
  font-weight: 700;
  margin-right: 20px;
  width: 65px;
  text-align: right;
}

.temperatureUnit {
  font-family: '思源黑体';
  font-weight: 400;
  font-size: 20px;
  line-height: 1px;
  color: rgb(155, 179, 216);
}

.tempRange {
  display: flex;
  flex-direction: column;
  gap: 3.5px;
}

.highTemp, .lowTemp {
  display: flex;
  align-items: center;
  color: rgb(155, 179, 216);
  font-family: '思源黑体';
  font-size: 12px;
  font-weight: 400;
  line-height: 17px;
}

.tempValue {
  margin-left: 6px;
  font-family: 'D-DIN';
  font-size: 16px;
} 