@font-face
{
  font-family: MabryPro;
  src: url("../assets/fonts/MabryPro.otf") format("opentype");
}

body
{
  font-family: "MabryPro", Helvetica, Arial, Verdana, sans-serif;
  font-size: 1rem;
  color: #00dac8;
  background-color: #ffffff;
}

.weather-widget
{
  padding: 1rem;
}

.text-row
{
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding: 0px;
  margin: 0px;
  margin-bottom: 1rem;
  text-align: center;
}

.forecast-title
{
  font-weight: 400;
  font-size: 28px;
  margin: 0px;
  padding: 0px;
  text-align: center;
}

@media (min-width: 575px) { .forecast-title { font-size: 28px; } }
@media (min-width: 767px) { .forecast-title { font-size: 28px; } }
@media (min-width: 991px) { .forecast-title { font-size: 28px; } }
@media (min-width: 1199px) { .forecast-title { font-size: 28px; } }

.forecast-text
{
  font-size: 22px;
  font-weight: 400;
  line-height: 125%;
  color: #707070;
  margin: 0px;
  margin-bottom: 2rem;
  padding: 0px;
  text-align: center;
}

@media (min-width: 575px) { .forecast-text { font-size: 22px; } }
@media (min-width: 767px) { .forecast-text { font-size: 22px; } }
@media (min-width: 991px) { .forecast-text { font-size: 22px; } }
@media (min-width: 1199px) { .forecast-text { font-size: 22px; } }

.accuweather-logo
{
  width: auto;
  height: 1rem;
  margin: 0px;
  margin-left: 0.25rem;
  padding: 0px;
  vertical-align: baseline;
}

@media (min-width: 575px) { .accuweather-logo { height: 1rem; } }
@media (min-width: 767px) { .accuweather-logo { height: 1.25rem; } }
@media (min-width: 991px) { .accuweather-logo { height: 1.75rem; } }
@media (min-width: 1199px) { .accuweather-logo { height: 2.25rem; } }

a
{
  font-size: 1rem;
  font-weight: 400;
  font-style: normal;
  text-decoration: underline;
  color: #00dac8;
}

a:hover, a:focus
{
  font-weight: 400;
  font-style: normal;
  text-decoration: underline;
  color: #00dac8;
}

@media (min-width: 575px) { a { font-size: 1.1rem; } }
@media (min-width: 767px) { a { font-size: 1.2rem; } }
@media (min-width: 991px) { a { font-size: 1.3rem; } }
@media (min-width: 1199px) { a { font-size: 1.4rem; } }

input
{
  width: 100%;
  font-size: 1rem;
  padding: 0.75rem 1rem;
  padding-left: 2.75rem;
  margin: 0px;
  margin-bottom: 0.5rem;
  border: 1px solid #00dac8;
  border-radius: 2px;
  text-align: left;
  background-image: url(../assets/Enter-location.png);
  background-position: left;
  background-repeat: no-repeat;
  background-size: contain;
}

@media (min-width: 575px) { input { width: 300px; } }

.location-list-container
{
  position: relative;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 575px) { .location-list-container { width: 300px; } }

.location-list-container > .location-list-inner
{
  position: absolute;
  width: 100%;
  border: 1px solid #00dac8;
  border-radius: 2px;
  background-color: #ffffff;
  z-index: 1000;
}

.location-list-container > .location-list-inner > .location-list-item
{
}

.location-list-container > .location-list-inner > .location-list-item > a.location-link
{
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-decoration: none;
}

.location-list-container > .location-list-inner > .location-list-item > a.location-link:hover,
.location-list-container > .location-list-inner > .location-list-item > a.location-link:focus
{
  color: #ffffff;
  background-color: #00dac8;
  text-decoration: none;
}

.forecast-type
{
  font-size: 1rem;
  color: #707070;
  margin: 0px;
  margin-bottom: 0.5rem;
  padding: 0px;
}

@media (min-width: 575px) { .forecast-type { font-size: 1.1rem; } }
@media (min-width: 767px) { .forecast-type { font-size: 1.2rem; } }
@media (min-width: 991px) { .forecast-type { font-size: 1.3rem; } }
@media (min-width: 1199px) { .forecast-type { font-size: 1.4rem; } }


#forecast
{
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.row
{
  display: flex;
  flex-direction: column;
}

@media (min-width: 575px) { .row { flex-direction: row; } }

.row-day
{
  height: 4rem;
}

@media (min-width: 575px) { .row-day { height: 2.25rem; } }
@media (min-width: 767px) { .row-day { height: 2.5rem; } }
@media (min-width: 991px) { .row-day { height: 2.75rem; } }
@media (min-width: 1199px) { .row-day { height: 3rem; } }

.row-weather
{
  height: 90vw;
  position: relative;
  padding-left: 10%;
  padding-right: 10%;
}

@media (min-width: 575px) { .row-weather { height: 15vw; padding-left: 20%; padding-right: 20%;} }


.row-temperature
{
  height: 3rem;
}

@media (min-width: 575px) { .row-temperature { height: 1.75rem; } }


.row-wind-direction
{
  position: relative;
  padding-left: 20%;
  padding-right: 20%;
  height: 50vw;
}

@media (min-width: 575px) { .row-wind-direction { height: 10vw; } }

.row-wind-speed
{
  height: 6rem;
}

@media (min-width: 575px) { .row-wind-speed { height: 3.25rem; } }
@media (min-width: 767px) { .row-wind-speed { height: 3.5rem; } }
@media (min-width: 991px) { .row-wind-speed { height: 3.75rem; } }
@media (min-width: 1199px) { .row-wind-speed { height: 4rem; } }

.col
{
  display: flex;
  width: 100%;
  flex-direction: column;
  border: none;
  border-bottom: 1px solid #707070;
}

@media (min-width: 575px) { .col { width: 20%; border: none; border-right: 1px solid #707070; } }

.small-day
{
  color: #707070;
  font-size: 2.5rem;
  width: 100%;
  text-align: center;
  padding-left: 1rem;
  padding-right: 1rem;
  box-sizing: border-box;
}

@media (min-width: 575px) { .small-day { font-size: 1.25rem; } }
@media (min-width: 767px) { .small-day { font-size: 1.5rem; } }
@media (min-width: 991px) { .small-day { font-size: 1.75rem; } }
@media (min-width: 1199px) { .small-day { font-size: 2rem; } }

.small-temperature
{
  color: #00dac8;
  font-size: 2.5rem;
  width: 100%;
  text-align: center;
  margin: 0px;
  box-sizing: border-box;
}

@media (min-width: 575px) { .small-temperature { font-size: 1.25rem; } }
@media (min-width: 767px) { .small-temperature { font-size: 1.5rem; } }
@media (min-width: 991px) { .small-temperature { font-size: 1.75rem; } }
@media (min-width: 1199px) { .small-temperature { font-size: 2rem; } }

.small-wind-speed
{
  color: #00dac8;
  font-size: 2.5rem;
  width: 100%;
  text-align: center;
  padding-top: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
  margin: 0px;
  box-sizing: border-box;
}

@media (min-width: 575px) { .small-wind-speed { font-size: 1.25rem; } }
@media (min-width: 767px) { .small-wind-speed { font-size: 1.5rem; } }
@media (min-width: 991px) { .small-wind-speed { font-size: 1.75rem; } }
@media (min-width: 1199px) { .small-wind-speed { font-size: 2rem; } }

.weather-image
{
  width: 100%;
  height: auto;
}

.wind-direction-icon
{
  width: 100%;
  height: 100%;
}

.col:last-child
{
  border-right: none;
}