/* General Styles */.weather-card, .hour-card, .toggle-container {display: flex; flex-wrap: wrap; align-items: center; border-radius: 3px; margin: 1px; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1); transition: all 0.5s ease-in-out; width: 100%;}
.weather-card {border: 1px solid #1e90ff; padding: 10px; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);}
.weather-card:hover {box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);}
.weather-header {background-color: #1e90ff; color: white; padding: 15px; border-radius: 15px 15px 0 0; text-align: center;}
/* .weather-temp {padding: 5px;}*/
.temp-info {display: flex; flex-direction: column; margin-right: 10px;}
.temp-max, .temp-min {font-weight: bold; margin: 0 10px 0 0;}
.temp-max { color: #f00; }
.temp-min { color: #1e90ff; }
.toggle-container {display: flex; justify-content: center; align-items: center; padding: 0; background-color: #d3e6ff; border: 1px solid #dddddd;}
.toggle-option {margin: 0 15px; cursor: pointer;}
.toggle-option input[type='radio'] {margin-right: 5px;}
.hour-card {background-color: #d3e6ff; border: 1px solid #dddddd; text-align: center;}
.hour-card img {max-width: 60px; margin-bottom: 0;}
.hour-card h5 {margin-bottom: 15px; font-size: 1.5rem; color: #00000085; font-weight: bold;}
.tooltip-container {background-color: #f4f4f4; color: #000; border-radius: 5px; padding: 5px; max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.5s ease, opacity 0.5s ease; z-index: 1000; font-size: 0.9rem;}
.weather-details {font-size: 1rem; color: #000; padding: 10px; background-color: #fff; border: 1px solid #ccc; border-radius: 4px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);}
.hour-card:hover {box-shadow: 0 5px 12px rgba(0, 0, 0, 0.3); background-color: #ffffff;}
.hour-card:hover .tooltip-container {max-height: 150px; opacity: 1;}
.record-section {padding: 5px; text-align: center; border-radius: 15px; background-color: #d3e6ff;}
.record-content {display: flex; align-items: center; padding: 0px;}
.day-list {display: flex; flex-wrap: wrap; justify-content: center; margin-bottom: 10px;}
.day-item {cursor: pointer; padding: 5px; background-color: #d3e6ff; border-radius: 5px; margin: 5px; text-align: center; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}
.day-item.active {background-color: #fff;}
.temperature-list {display: flex; flex-direction: column;}
.temperature-block {display: none; padding: 10px; margin: 5px 0; border-radius: 5px; width: 100%;}
.temperature-block.active {display: block;}
.temperature-row {display: flex; overflow-x: auto; padding: 5px; border-bottom: 1px solid #ddd; background-color: #f0f8ff;}
.hourly-time, .temp-celsius, .temp-fahrenheit {font-weight: bold;}
.hourly-temperature {display: flex; flex-direction: column; align-items: center; margin: 5px; padding: 5px; background-color: #ffffff; border: 1px solid #dddddd; border-radius: 5px;}
.hourly-temperature span {display: block; font-size: 0.8rem; background-color: #ffffff; border-radius: 5px; text-align: center;}
.hourly-temperature:hover {box-shadow: 0 5px 12px rgba(0, 0, 0, 0.3);}
.weather-symbol {display: block;  margin: 0px 0px 0px 5px; margin-bottom: 0px; width: 50px;  height: 50px;}
/*h2.mb-4.text-center {font-size: 1.5rem;}*/
.info-row {display: flex;  justify-content: space-between;  width: 100%;}
.uv-index, .wind-speed, .wind-direction, .humidity, .precipitation {font-size: 12px; margin: 0; width: 100%; border-bottom: 1px solid #ccc;}
.pressure {font-size: 12px; margin: 0; width: 100%; border-bottom: 1px solid #ccc;}
.weather-pressure strong {font-weight: bold; color: #000;}
.data-label {font-size: 12px; margin: 0; font-weight: bold;}
.data-value {font-size: 12px; margin: 0;}

.custom-weather-title, .custom-weather-title-h3 {font-size: 18px; color: #007BFF; font-weight: bold;}
.custom-weather-title-h3 {display: flex; justify-content: center; align-items: center; padding: 0; background-color: #d3e6ff; border: 1px solid #dddddd; border-radius: 15px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);}
/* Current Weather Block */
.current-weather-block  {
  width: 100%;
  background-color: #1E90FF;
  color: white;
  border-radius: 10px;
  padding: 10px 20px 0px 20px;
  margin: 20px auto;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.current-weather-block h3 {margin-bottom: 15px; font-size: 1.8rem;}
.condition-paragraph {width: 100%;
  padding: 5px 0;
  font-size: 2.1rem;}
.weather-icon {display: flex;  align-items: center; }
.current-weather-block .weather-icon img {width: 100px;
  margin: 1px 0;
  margin-left: 0px;
  transition: transform 0.2s;
  margin-left: 10px;
  height: auto;}
.current-weather-block .weather-icon img:hover {transform: scale(1.1);}
.temperature-block-now  {
  color: #FFF;
/*  padding: 25px 0px 0px 0px; */
    padding-top: 30px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
  font-size: 5rem;
  margin: 0px 0px 0px auto;
  display: inline-block;
}
.current-weather-block-right {
  background-color: #1E90FF;
  color: white;
  border-radius: 10px;
  padding: 0px 10px 10px 10px;
  display: flex;
  flex-direction: column;
  margin: 20px 0px 20px 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  min-width: 280px;
}
.current-weather-block-date {width: 100%;  display: flex;  flex-direction: column;  align-items: center; }
.uv-index-paragraph,.humidity-paragraph,.wind-speed-paragraph,.wind-direction-paragraph,.pressure-paragraph,.precipitation-paragraph,.cloud_cover-paragraph {border-bottom: 1px solid #ffffff; width: 100%;  margin: 0;  font-size: 1.1rem; padding: 3px 0;}
.time-paragraph {border-bottom: 1px solid #ffffff;
  text-align: right;
  width: 100%;}
.current-weather-block p {margin: 5px 0;}
/* Weather Container */.weather-container {display: flex;  justify-content: space-between;   margin: 0px auto; }
@media (max-width: 830px) { .weather-container {   flex-direction: column;    align-items: center;  }
.current-weather-block, .current-weather-block-right {   width: 100%;    margin: 10px 0;  }
}
.thermometer-icon {margin-left: auto;  max-height: 80px; }
.symbol_name {margin: 2px;  font-size: 14px;  font-weight: bold;  padding: 15px;  overflow-wrap: break-word;  text-align: center;  display: inline-block;  width: 190px;}
.hour {font-size: 14px;  font-weight: bold;  padding: 15px;}
.content {margin-top: 5px; padding: 5px; border-radius: 10px; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1); overflow: hidden; transition: height 0.5s ease-in-out; height: auto; flex-direction: column; align-items: flex-start;	margin-bottom: 20px; text-align: left; }
div.hour-container {background-color: #d3e6ff;border-radius: 3px;/*margin-bottom: 15px;*/ box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);transition: all 0.5s ease-in-out;width: 100%;}
div.hour-container:hover { background-color: #f7f7f7;box-shadow: 0 5px 12px rgba(0, 0, 0, 0.3);}
.temperature-data {
  color: #0010ff;
  border-radius: 5px;
  padding: 3px;
  display: flex;
  font-size: 1.5rem;
}
.current-weather-block-divided {width: 100%;  display: flex; }
.current-weather-block-divided-second {width: 100%;  display: flex; }
.day-paragraph{border-bottom: 1px solid #ffffff;
  text-align: right;
  width: 100%;
  padding: 5px 0;
  font-size: 2.1rem;}