/* ==========================================================================
   Page Specific
   ========================================================================== */

#current {
    width: 100%;
}

/* ==========================================================================
   Dial's
   ========================================================================== */

#weather-box {
    position: relative;
    width: 100%;
    cursor: default;
    font-size: 1em;
    font-family: 'Source Sans Pro', sans-serif;
    color: #ffffff;
}

#weather-box .last-updated {
    visibility: hidden;
    text-align: center;
    float: left;
    width: 100%;
    padding: 5px;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 0.4em;
}

.last-updated {
    color: #ffffff;
}

#weather-box .maintenance-hidden, #weather-box .maintenance.reason {
    display: none;
}

#weather-box .station {
    float: left;
    width: 100%;
}

#weather-box .dial {
    display: none;
    float: left;
    width: 16.667%;
    margin: 25px 0;
}

#weather-box .circle {
    position: relative;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    margin: 0 auto;
    text-align: center;

    background: rgb(226, 226, 226);
    /*background: rgba(226, 226, 226, 1);*/
    /*background: -moz-radial-gradient(center, ellipse cover, rgba(226, 226, 226, 1) 0%, rgba(209, 209, 209, 1) 51%, rgba(254, 254, 254, 1) 100%);*/
    /*background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(226, 226, 226, 1)), color-stop(51%, rgba(209, 209, 209, 1)), color-stop(100%, rgba(254, 254, 254, 1)));*/
    /*background: -webkit-radial-gradient(center, ellipse cover, rgba(226, 226, 226, 1) 0%, rgba(209, 209, 209, 1) 51%, rgba(254, 254, 254, 1) 100%);*/
    /*background: -o-radial-gradient(center, ellipse cover, rgba(226, 226, 226, 1) 0%, rgba(209, 209, 209, 1) 51%, rgba(254, 254, 254, 1) 100%);*/
    /*background: -ms-radial-gradient(center, ellipse cover, rgba(226, 226, 226, 1) 0%, rgba(209, 209, 209, 1) 51%, rgba(254, 254, 254, 1) 100%);*/
    /*background: radial-gradient(ellipse at center, rgba(226, 226, 226, 1) 0%, rgba(209, 209, 209, 1) 51%, rgba(254, 254, 254, 1) 100%);*/
    /*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e2e2e2', endColorstr='#fefefe', GradientType=1);*/
}

/* circle specific*/

#weather-box .circle.wind_speed_avg {
    background-color: #00acec;
}
#weather-box .wind_gust,
#weather-box .wind_speed_max {
    color: #f45b5b;
}

#weather-box .circle.wind_direction_avg {
    background-color: #fefe00;
}

#weather-box .circle.temperature_avg {
    background-color: #ff00ff;
}

#weather-box .circle.humidity_avg {
    background-color: #d371ff;
}

#weather-box .circle.pressure_avg {
    background-color: #42c7ff;
}

#weather-box .circle.rain {
    background-color: #1a8bff;
}


#weather-box .inner-circle {
    position: relative;
    width: 90%;
    height: 90%;
    top: 5%;
    left: 5%;
    border-radius: 50%;
    background: #383e42;
    background: -moz-linear-gradient(top, #383e42 0%, #2d3438 100%);
    background: -webkit-linear-gradient(top, #383e42 0%, #2d3438 100%);
    background: linear-gradient(to bottom, #383e42 0%, #2d3438 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#383e42', endColorstr='#2d3438', GradientType=0);
}

#weather-box .label {
    padding-left: 0;
    position: absolute;
    top: 35px;
    left: 0;
    width: 100%;
    font-size: 1em;
}

#weather-box .label-sm {
    font-size: 0.6em;
    line-height: 0.8em;
}

#weather-box .value-sm {
    font-size: 1em;
    line-height: 1.8em;
}

#weather-box .value {
    font-size: 1.8em;
}

#weather-box .unit {
    position: absolute;
    top: 60%;
    left: 0;
    width: 100%;
    font-size: 1em;
}

#weather-box .trending {
    position: absolute;
    top: 20%;
    right: 15%;
    font-size: 1.2em;
}

#weather-box .lower-wrapper {
    position: absolute;
    left: 0;
    bottom: 12.5%;
    width: 100%;
}

#weather-box .lower-wrapper .left, #weather-box .lower-wrapper .right {
    position: relative;
    float: left;
    width: 50%;
    font-size: 0.8em;
}

#weather-box .icon {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 10%;
    margin: 0 auto;
    font-size: 1em;
}

#weather-box .wi-wind {
    font-size: 1.4em;
}

#weather-box .fa-cog {
    color: #ffffff;
}

/* ==========================================================================
   Helper's
   ========================================================================== */

#weather-box .vertical-align {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.clearb {
    clear: both;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media screen and (min-width: 750px) {
    /* scrollbar - desktop only */
    #main .sp2 {
        height: 820px;
        overflow-y: scroll;
    }

    #main .sp2::-webkit-scrollbar {
        width: 0.8em;
    }

    #main .sp2::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    }

    #main .sp2::-webkit-scrollbar-thumb {
        background-color: #0993c6;
        outline: 1px solid #708090;
    }
}

@media screen and (min-width: 650px) and (max-width: 1875px) {
    #weather-box .dial {
        width: 33.33% !important;
    }
}

@media screen and (max-width: 650px) {

    #weather-box .dial {
        float: left;
        width: 100% !important;
    }

}

@media screen and (min-width: 500px) and (max-width: 750px) {

    #weather-box .dial {
        float: left;
        width: 50%;
    }

}