.title-header {
  position: fixed;
  width: 236px;
}

.divider {
  border-bottom: 2px solid #dbe6f4;
  margin-left: 3px;
  margin-right: 3px;
  padding-top: 19px;
}

.fcst-container {
  overflow:auto;
  white-space:nowrap;
  margin-top:5px;
  margin-left: 3px; 
}

.fcst-card {
  display: inline-block;
  vertical-align: top;
  box-shadow: 0 2px 6px 0 rgb(120, 120, 120);
  margin-left: 3px;
  margin-right: 3px;
  margin-top: 3px;
  margin-bottom: 9px;
  border: 1px solid rgb(172, 172, 172);
  border-radius: 2px;
  width: 104px;
  text-align: center;
  cursor: pointer;
}

.fcst-card:hover {
  box-shadow: 0 3px 8px 0 rgb(65, 65, 65);
}

.fcst-card .fcst-name {
  padding: 1px 1px;
  font-size: 85%;
  font-weight: bold
}

.fcst-card .fcst-temp {
  padding: 1px 1px;
  font-size: 85%;
}

.fcst-card .fcst-temp-daytime {
  color: red;
}

.fcst-card .fcst-temp-nighttime {
  color: blue;
}

.fcst-card img {
  object-fit: contain;
  height: 100%;
  width: 100%;
}

.fcst-card .fcst-short-desc {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 20px;
  font-size: 85%;
  padding: 3px 3px;
}

.date {
  margin-top: 3px;
  margin-left: 3px;
  margin-right: 3px;
  margin-bottom: 2px;
  padding-bottom: 3px;
  color: rgb(65, 65, 65);
  font-size: 85%;
  font-style: italic;
}

.detailed-fcst-title {
  margin-top: 3px;
  margin-left: 3px;
  margin-bottom: 1px;
  color: rgb(55, 55, 55);
  font-weight: bold;
  font-size: 80%
}

.time-period {
  margin-left: 3px;
  margin-right: 3px;
  margin-bottom: 5px;
  padding-bottom: 3px;
  color: rgb(65, 65, 65);
  font-size: 75%;
  font-style: italic;
  border-bottom: 2px solid #dbe6f4;
}

.detailed-fcst-desc {
  margin-top: 3px;
  margin-left: 3px;
  margin-bottom: 1px;
  color: rgb(55, 55, 55);
  font-weight: bold;
  font-size: 80%
}