.weatherHeader{
    overflow: hidden;
    text-align: center;
    width: 100%;
    display: block;
}

.weather-preview{
    float:left;
    overflow: hidden;
    text-align: center;
  width: 17%;
}

/*TODO: should refactor this whole weather tile width thing to use flexbox*/
.active-weather-tile .weather-preview{
    width: 30%;
}

.left-panel{
    display: inline-block;
}

.weather-details {
    display: inline-block;
    height: 100%;
    vertical-align: top;
    padding: 5px;
    width: 55%;
}

.weatherLabel{
    margin-top: 0px;
    margin-bottom: 0px;
    display: inline-block;
    font-size: large;
    line-height: 1.1;
    font-weight: 500;
}

.weatherIcon {
    margin-top: 5px;
}

.high-label{
    font-size: xx-large;
}

.low-label{
    font-size: medium;
}

.iconWrapper {
    overflow: hidden;
    margin-top: 5px;
    margin-bottom: 5px;
    width: 100%;
    display: block;
}

.wind-label{
    display: block;
}

.precip-percent-label,
.precip-amount-label{
    display: inline-block;
}

.precip-percent-label{
    margin-right: 5px;
}

.wi {
    font-size: 25pt;
}

.wi-strong-wind,
.wi-sprinkle {
    margin-top: 0px;
    margin-bottom: 0px;
    font-size: 15pt;
}

.wi-strong-wind {
    margin-left: 5px;
}
.wi-sprinkle {
    margin-left: 10px;
    margin-right: 5px;
}

.deleteButton
{
    -webkit-appearance: none;
    outline: none;
    border: 0;
    background: transparent;
    z-index: 2;
    color: red;
}

.deleteCircle{
    position: absolute;
    top: 0;
    right: 0;
    font-size: x-large;
    display: none;
}

.active-weather-tile *{
    background: #f5f5f5;
}

.inactive-weather-details{
    display: none;
}

.weather-summary{
    padding-top: 10px;
}

/* tablet - we're doing two breakpoints here since this is really sensitive to width */
@media all and (max-width: 1000px) {
    .weather-details{
        width: 100%;
    }
}

/* phone */
@media all and (max-width: 768px) {
    .weatherLabel{
        font-size: larger;
    }
    .weather-details{
        width: 100%;
    }
    .wi-strong-wind,
    .wi-sprinkle,
    .precip-amount-label{
        font-size: 12pt;
    }
}