html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background: #333333;
    color: #aaaaaa
}

.data-inspector {
    position: absolute;
    top: 60px;
    right: 20px;
    z-index: 999;

    min-width: 255px;

    color: #FBF8F8;
    font-family: 'Roboto', Arial, sans-serif;
    font-size: 12px;

    background: #40484E;
}

.inspector-section { padding: 10px 20px; }
.inspector-section:last-of-type { margin-bottom: 15px; }
.inspector-section:not(:last-of-type) { margin-bottom: 15px; }

.two-column { display: flex; }

h3 {
    margin: 0;
    margin-bottom: 8px;

    font-size: 13px;
    font-weight: 700;
}

h4 {
    display: inline-block;
    font-size: 11px;
    margin: 0;
}

.value-selected {
    display: inline-block;

    margin-top: 20px;
    margin-left: 4px;
    font-size: 11px;
}

.value-unit { 
    color: #858F97; 
    font-size: 9px;
}

.fade-slider {
    margin-top: 20px;
}

ul {
    padding: 0;
    margin: 0 auto;

    list-style: none;
}

ul * { position: relative; }

.category-filters li { 
    display: flex;

    margin: -2px auto; 
}

label { top: -4px; }

.category-filter { flex: 1 0 50%; }

input[type="checkbox"] {
    margin: 0;
    margin-right: 1px;
}

li label {
    display: inline-block; 

    padding-left: 8px;

    font-size: 11px;

    border-left: 2px solid;
}

label[for="Residential Single Family"] { border-color: #E65100; }
label[for="Residential Multi-Family"] { border-color: #F57C00; }
label[for="Residential Apartments"] { border-color: #FF9800; }
label[for="Residential Condominium"] { border-color: #FFB74D; }
label[for="Residential Other"] { border-color: #FFCC80; }
label[for="Exempt"] { border-color: #B71C1C; }
label[for="Industrial"] { border-color: #9C27B0; }
label[for="Agricultural/Horticultural"] { border-color: #00E676; }
label[for="Commercial"] { border-color: #2196F3; }
label[for="Forest"] { border-color: #1B5E20; }
label[for="Open Space"] { border-color: #A5D6A7; }
label[for="Recreational"] { border-color: #E57373; }
label[for="Multiple-Use"] { border-color: #FDD835; }
label[for="unknown"] { border-color: #EEEEEE; }

.category-bar {
    flex: 1 0 48%;

    height: 12px;
    margin-left: 2%;
}

.category-bar > div[data-bar] {
    height: 100%;
    width: 0%;

    background: #858F97;
    transform: translateZ(0);
    transition: width .3s;
    will-change: width;
}

.button-controls {
    display: flex;
}

.data-inspector .button-controls button {
    padding: 10px;

    color: #40484E;
    font-size: 12px;
    font-family: 'Roboto', Arial, sans-serif;
    font-weight: 700;
    text-align: center;

    background: #D8D8D8;
    border: 1px solid #979797;
    border-radius: 0;
    outline: none;
    cursor: pointer;
    transition: opacity .1s;
}

.data-inspector button[data-animation-control] { width: 100%; }
.data-inspector button[data-speed-control] { margin-left: 1%; }

.button-controls.animating button[data-speed-control] {
    display: block;
}

.data-inspector button:hover {
    opacity: .8; 
    transition: opacity .1s;
}

.hours-chart {
    width:  225px;
    height: 100px;
}

.ct-line { stroke-width: 1.25px; }
.ct-series-a .ct-line { stroke: #D8D8D8; }
.ct-series-b .ct-line { stroke: #75C0D0; }

.hours-chart-axes {
    position: absolute;
    left: 3%;
    bottom: 2%;

    width: 94%;
    height: 96%;

    color: #768284;

    border-left: 2px solid #768284;
    border-bottom: 2px solid #768284;
}

.hours-chart-ylabels {
    position: absolute;
    left: 1%;
    top: 0;

    height: 100%;

    font-size: 9px;
}

.hours-chart-ylabels span:last-of-type {
    position: absolute;
    top: 50%;
    left: 0;

    transform: translateY(-50%);
}

.hours-chart-xlabels {
    position: absolute;
    bottom: -18px;
    left: -5%;
    display: flex;

    width: 110%;

    font-size: 11px;
}

.hours-chart-xlabels span {
    display: block;
    flex: 1;

    text-align: center;
}

.hours-chart-legend {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 999;

    padding-left: 3px;
    padding-bottom: 3px;

    font-size: 10px;

    background: rgba(64,72,78, .6);
    border-radius: 5px;
}

div[data-legend-entry="selection"] { color: #75C0D0; }


/**
 * Mobile
 */

.inspector-tabs { 
    display: none; 

    width: 100%;
}

.inspector-tabs > li {
    flex: 1 0 calc(33.33% - .66px);

    padding: 7px 0px;

    color: #9DA0A3;
    font-weight: 700;
    text-align: center;

    background: #40484E;
    border: 1px solid #AAAAAA;
    border-left: 0;
    cursor: pointer;
    transition: color .2s;
}

.inspector-tabs > li:last-of-type {
    border-right: 0;
}

.inspector-tabs > li.selected { 
    color: #FBF8F8;

    border-bottom: 0px; 
    transition: color .2s;
}

.inspector-tabs > li:not(.selected):hover {
    color: #BDC0C3;

    transition: color .2s;
}

@media (max-width: 780px) {

    #pdbm-mount {
        display: flex;
        flex-direction: column-reverse;
    }

    .pdbm { flex: 1; }

    .data-inspector {
        position: relative;
        top: auto;
        right: auto;

        width: 100%;
        height: 200px;

        font-size: 13px;
        overflow: hidden;
    }

    h3 { display: none; }

    .two-column { display: block; }

    .inspector-tabs { display: flex; }

    .inspector-section { padding-top: 15px; }

    .inspector-section:not(.selected) { display: none; }

    .inspector-section[data-tab="1"]:first-of-type { margin-bottom: 0px; }

    select[name="day-selector"] {
        width: 100%;
        margin-bottom: 25px;
    }

    .hours-chart {
        width: 325px;
        height: 130px;
    }

    .hour-slider { 
        margin-top: 20px; 
        margin-left: 0;
    }

    .hour-slider-value {
        top: -30px; 

        font-size: 12px;
    }

    .hour-slider-handle {
        top: -7.5px;

        width: 15px;
        height: 15px;
    }
} /* end 780px */