@import url(//fonts.googleapis.com/css?family=Dosis:200,400,500,600);

.container-fluid {
    padding-left: 0px;
    padding-right: 0px;
}

.navbar {
    padding-top: 5px;
    padding-bottom: 5px;
}

.page-header {
    margin-bottom: 0px;
}

.card-deck {
    margin-top: 10px;
}

.card {
    min-height: 100px;
    border: none;
    border-radius: 0rem;
    box-shadow: 0 5px 10px rgba(0,0,0,.3);
}

.card-graph {
    height: 150px;
}

.card-body {
    padding: 0.5rem 0.7rem 0;
}

.card-title {
    font-size: 1rem;
    margin-bottom: 5px;
}

.card .display-1 {
    font-size: 2rem;
}

.card .display-4 {
    font-size: 1rem;
}

.card-text {
    margin-bottom: 0;
}

.detail-graph {
    height: 150px;
}

.reset-zoom {
    width: 75px;
    right: 0px;
    position: absolute;
    z-index: 2;
    border-radius: 0rem;
}

.update-time {
    position: absolute;
    right: 10px;
    bottom: 0px;
    margin-bottom: 5px;
    font-size: 0.8rem;
}

.aqi-green {
    background-color: #009966;
}

.aqi-yellow {
    background-color: #FFDE33;
}

.aqi-orange {
    background-color: #FF9933;
}

.aqi-red {
    background-color: #CC0033;
}

.aqi-purple {
    background-color: #660099;
}

.aqi-darkred {
    background-color: #7E0023;
}

.blue {
    background-color: #22B8FF;
}

.darkblue {
    background-color: #145AFF;
}

.green {
    background-color: #009966;
}

.orange {
    background-color: #FF8000;
}

.red {
    background-color: #EB5442;
}

.loader {
    border: 8px solid #f3f3f3;
    border-top: 8px solid #3498db;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 2s linear infinite;
    margin: auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@media (max-width: 576px) {
    #historical-date {
        display: none;
    }

    .overview-graph {
        display: none;
    }

    .reset-zoom {
        display: none;
    }

    .graph-date-selectors {
        display: none;
    }
}

@media (min-width: 576px) {
    .card-deck {
        margin-left: 0px;
        margin-right: 0px;
    }

    .card-deck .card {
        min-height: 175px;
        margin-left: 10px !important;
        margin-right: 0px !important;
    }

    .card-deck .card-graph {
        height: 400px;
    }

    .card-deck .stats {
        height: 210px;
    }

    .card-deck .stats .col-md-4, .col-md-12 {
        padding-right: 5px;
        padding-left: 10px;
    }

    .overview-graph {
        height: 100px;
    }

    .detail-graph {
        height: 300px;
    }

    .card-deck > :first-child {
        margin-left: 10px !important;
    }
    .card-deck > :last-child {
        margin-right: 10px !important;
    }

    .card-title {
        font-size: 2rem;
        font-weight: 200;
    }

    .card .display-1 {
        font-size: 5rem;
    }

    .card .display-4 {
        font-size: 2rem;
    }

    .update-time {
        font-size: 1.0rem;
        right: 10px;
        bottom: 0px;
    }
}

@media (min-width: 1200px) {
    .card .display-1 {
        font-size: 5rem;
    }
}