/*----------------------------------------+
 | Site: State of Disparities: California |
 | Part: Master styles                    |
 +----------------------------------------*/

/* Imports
=====================================================================*/
@import url(//stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css);
@import url(//fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap);
@import url(/styles/avenir-next.css);
@import url(/styles/dinpro.css);
@import url(/styles/fontawesome.css);
@import url(/styles/reset.css);


/* Fonts
======================================================================*/
.action, .btn-primary, .btn-secondary, .custom-label, .dropdown-header, h1, #nav, #subfooter h2, h3, h4 { font-family: "Avenir Next", Arial, sans-serif; }
body, .highcharts-container *, #nav #counties .dropdown-menu { font-family: "Lato", Arial, sans-serif; }
.card h3, .custom-presets, .title h2 { font-family: "DINPro", Arial, sans-serif; }


/* Basics
======================================================================*/
:root {
    --action: #ea404b;
    --branding-dark: #1c2c40;
    --branding-main: #fdd130;
    --green: #21b1b1;
    --green-hover: #369b7a;
    --masked: #efefef;
    --re-api: #079f5d;
    --re-api-hover: #056f41;
    --re-black: #f49f3c;
    --re-black-hover: #aa6f2a;
    --re-latino: #027ec3;
    --re-latino-hover: #015888;
    --re-native: #fdd130;
    --re-native-hover: #b19222;
    --re-unknown: #ea85ba;
    --re-unknown-hover: #a35d82;
    --re-white: #bfbfbf;
    --re-white-hover: #d5d5d5;
}

a { transition: all 0.1s ease-in-out; transition-property: background, color; }
a, a:hover, a:active { color: var(--green); }
body { line-height: 1.4; }
dl, ol, p, table, ul { margin-bottom: 1em; }
em { font-style: italic; }
html { font-size: 18px; }
img { max-width: 100%; }
h1 { font-size: 2.5rem; font-weight: 900; line-height: 1; margin: 0 0 0.5em; }
h2 { font-size: 1.88rem; font-weight: 500; margin-bottom: 0.5em; }
h3 { color: #666; font-size: 1.66rem; font-weight: bold; }
h4 { color: #666; font-size: 0.94rem; font-weight: bold; }
hr { background: none; border: 0; border-top: 1px solid rgba(0, 0, 0, 0.2); color: transparent; height: 1px; margin: 40px 0; }
li { margin-bottom: 0.5em; }
ol { list-style: decimal; margin-left: 2em; }
strong { font-weight: bold; }
svg { height: 100%; width: 100%; }
table { table-layout: fixed; }
ul { list-style: disc; margin-left: 1.5em; }

/* Core layout
======================================================================*/
#body-loading { display: none; }
#body-wrapper { display: block !important; }
.clear { clear: both; }
.content { margin: 0 auto; max-width: 1200px; padding: 3vw 20px; }
.content-narrow { margin: 0 auto; max-width: 826px; padding: 4vw 20px; }
.content + .content-narrow, .content-narrow + .content { padding-top: 0; }


/* Content
======================================================================*/
/* Add actions */
.add-actions { margin: 2em 0; text-align: center; }
.add-actions div.dropdown { display: inline; }

/* Buttons */
.btn { border-radius: 5px; padding: 0.5rem 1rem; transition: all 0.15s ease-in-out; }
.btn-group > .show .btn { background: #f0f0f0; }
.btn-label { cursor: pointer; padding-left: 0; padding-right: 0; }
.btn-light { background: #f2f2f2; color: #000; }
.btn-light:not(:disabled):not(.disabled).active, .btn-light:not(:disabled):not(.disabled):active { color: var(--green); }
.btn-link, .btn-link:hover { color: #000; text-decoration: none !important; }
.btn-link:hover { opacity: 0.7; }

.btn-primary, .btn-primary:active, .btn-primary:focus, .btn-primary:active:focus, .btn-primary:hover {
    background: var(--action) !important;
    border: 0;
    color: #fff;
}

.btn-primary:hover { opacity: 0.7; }
.btn-primary, .btn-secondary { font-weight: bold; }

.btn-secondary, .btn-secondary:active, .btn-secondary:focus, .btn-secondary:active:focus {
    background: #fff !important;
    border: 1px solid var(--action);
    color: var(--action) !important;
}

.btn-secondary:hover { background: #f0f0f0 !important; color: #000; }
.btn-secondary.active { background: #f2f2f2 !important; box-shadow: inset 0 4px 6px rgba(0, 0, 0, 0.2); color: #000 !important; }
.btn-secondary.disabled { color: #aaa; }
.btn-secondary.disabled:hover { background: none !important; }
.btn-toolbar { margin-bottom: 1rem; position: relative; }

/* Cards */
.card { border: 0; border-radius: 5px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); margin: 15px 0; }
.card-body { padding: 30px; }
.card-group { box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); flex-wrap: wrap; margin: 1em 0; }
.card-group .card { border: 1px solid #ddd; box-shadow: none; flex: 0 0 auto; margin: 0; width: calc(100% / 3); }
.card h3 .btn { font-size: 1.88rem; padding: 0; }
.card-mask { background-color: #ccc; height: 100%; opacity: 0.2; position: absolute; width: 100%; z-index: 999; }

/* Caseflow diagram */
.caseflow {
    display: -ms-grid;
    display: grid;
    font-size: 13px;
    -ms-grid-columns: 4em 3em (1fr)[6];
        grid-template-columns: 4em 3em repeat(6, 1fr);
    -ms-grid-rows: (auto)[12];
        grid-template-rows: repeat(12, auto);
}
.caseflow * { margin: 0; padding: 0; }

#caseflow-container { position: relative; }
#caseflow-container svg { height: auto; width: auto; }

.caseflow h6 { border-bottom: 1px solid #ddd; color: orange; font-size: 1em; text-align: center; }

.case-range {
    color: #777;
    display: flex;
    flex-direction: row-reverse;
    -ms-grid-column-span: 0;
    grid-column-end: 2;
    -ms-grid-column: 2;
        grid-column-start: 2;
    -ms-grid-row-span: 12;
    grid-row-end: span 12;
    -ms-grid-row: 1;
        grid-row-start: 1;
    justify-content: space-between;
    justify-self: center;
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
    -webkit-writing-mode: vertical-lr;
        -ms-writing-mode: tb-lr;
            writing-mode: vertical-lr;
}

.case-head {
    -ms-grid-row-align: center;
        align-self: center;
    -ms-grid-column-span: 1;
    grid-column-end: span 1;
    -ms-grid-row-span: 1;
    grid-row-end: span 1;
    margin: 0 auto;
    padding-bottom: 0.5em;
    width: 80%;
}

.case-step {
    display: flex;
    -ms-grid-column-span: 1;
    grid-column-end: span 1;
    -ms-grid-row-span: 1;
    grid-row-end: span 1;
    min-height: 3em;
    padding: 2px 20px;
    text-align: center;
}

.case-step-key { font-weight: bold; }

.case-step a {
    align-items: center;
    color: #000;
    display: flex;
    justify-content: center;
    padding: 0.3em 1em;
    text-decoration: none;
    transition: all 0.1s ease-in-out;
    width: 100%;
}

.case-step a:hover, .case-step.selected a { background: var(--green) !important; color: #fff !important; }

    /* Groups */
    .case-group-probation a { background: #F6EDDA; }
    .case-group-disposition a { background: #CEE5EC; }
    .case-group-ward a { background: #F5EECD; }
    .case-group-transfer a { background: #E5DEEC; }
    .case-group-direct a { background: #F3DBC3; }
    
    /* Positions */
    #step-population { -ms-grid-column: 3; -ms-grid-column-span: 4; grid-column-start: 1; grid-row: 1 / span 13; -ms-grid-row: 13; grid-row-start: 1; }
    #step-population a { background: #E1DDD9; padding: 0.3em 1.2em; transform: translateX(-1em); white-space: nowrap; }
    #step-population .step-label { transform: rotate(-90deg); }
    
    #step-refer { -ms-grid-column: 3; grid-column-start: 3; -ms-grid-row: 6; grid-row-start: 6; }
    #step-refer a { background: #E1DDD9; }
    
    #head-probation { -ms-grid-column: 4; grid-column-start: 4; -ms-grid-row: 1; grid-row-start: 1; }
    #step-probation-closed { -ms-grid-column: 4; grid-column-start: 4; -ms-grid-row: 2; grid-row-start: 2; }
    #step-probation-diversion { -ms-grid-column: 4; grid-column-start: 4; -ms-grid-row: 3; grid-row-start: 3; }
    #step-probation-probation { -ms-grid-column: 4; grid-column-start: 4; -ms-grid-row: 4; grid-row-start: 4; }
    #step-probation-transferred { -ms-grid-column: 4; grid-column-start: 4; -ms-grid-row: 5; grid-row-start: 5; }
    #step-probation-traffic { -ms-grid-column: 4; grid-column-start: 4; -ms-grid-row: 6; grid-row-start: 6; }
    #step-probation-petition { -ms-grid-column: 4; grid-column-start: 4; -ms-grid-row: 7; grid-row-start: 7; }
    
    #head-disposition { -ms-grid-column: 6; grid-column-start: 6; -ms-grid-row: 1; grid-row-start: 1; }
    #step-disposition { -ms-grid-column: 5; grid-column-start: 5; -ms-grid-row: 6; grid-row-start: 6; }
    #step-disposition-dismissed { -ms-grid-column: 6; grid-column-start: 6; -ms-grid-row: 2; grid-row-start: 2; }
    #step-disposition-divert { -ms-grid-column: 6; grid-column-start: 6; -ms-grid-row: 3; grid-row-start: 3; }
    #step-disposition-probation { -ms-grid-column: 6; grid-column-start: 6; -ms-grid-row: 4; grid-row-start: 4; }
    #step-disposition-transferred { -ms-grid-column: 6; grid-column-start: 6; -ms-grid-row: 5; grid-row-start: 5; }
    #step-disposition-nonward { -ms-grid-column: 6; grid-column-start: 6; -ms-grid-row: 6; grid-row-start: 6; }
    #step-disposition-dej { -ms-grid-column: 6; grid-column-start: 6; -ms-grid-row: 7; grid-row-start: 7; }
    #step-disposition-wardship { -ms-grid-column: 6; grid-column-start: 6; -ms-grid-row: 8; grid-row-start: 8; }
    
    #head-ward { -ms-grid-column: 7; -ms-grid-column-span: 2; grid-column: 7 / span 2; -ms-grid-row: 1; grid-row-start: 1; }
    #step-wardship-home { -ms-grid-column: 7; grid-column-start: 7; -ms-grid-row: 7; grid-row-start: 7; }
    #step-wardship-ipem { -ms-grid-column: 7; grid-column-start: 7; -ms-grid-row: 8; grid-row-start: 8; }
    #step-ipem-nonsecure { -ms-grid-column: 8; grid-column-start: 8; -ms-grid-row: 5; grid-row-start: 5; }
    #step-ipem-private { -ms-grid-column: 8; grid-column-start: 8; -ms-grid-row: 6; grid-row-start: 6; }
    #step-ipem-otherpublic { -ms-grid-column: 8; grid-column-start: 8; -ms-grid-row: 7; grid-row-start: 7; }
    #step-ipem-other { -ms-grid-column: 8; grid-column-start: 8; -ms-grid-row: 8; grid-row-start: 8; }
    #step-ipem-secure { -ms-grid-column: 8; grid-column-start: 8; -ms-grid-row: 9; grid-row-start: 9; }
    #step-ipem-djjcya { -ms-grid-column: 8; grid-column-start: 8; -ms-grid-row: 10; grid-row-start: 10; }
    
    #step-transfer { -ms-grid-column: 5; grid-column-start: 5; -ms-grid-row: 9; grid-row-start: 9; }
    #step-transfer-not { -ms-grid-column: 6; grid-column-start: 6; -ms-grid-row: 9; grid-row-start: 9; }
    #step-transfer-adult { -ms-grid-column: 6; grid-column-start: 6; -ms-grid-row: 10; grid-row-start: 10; }
    
    #step-direct { -ms-grid-column: 4; grid-column-start: 4; -ms-grid-row: 11; grid-row-start: 11; }
    #step-direct-adult { -ms-grid-column: 5; grid-column-start: 5; -ms-grid-row: 11; grid-row-start: 11; }
    
    #step-detained { -ms-grid-column: 3; -ms-grid-column-span: 4; grid-column: 3 / span 4; -ms-grid-row: 12; grid-row-start: 12; }
    #step-detained a { border: 2px dashed #ddd; }

/* Charts */
.chart-set { display: flex; margin: 0 -20px; justify-content: center; }
.chart-set-panel { display: flex; flex: 0 0 auto; flex-direction: column; padding: 0 1.5%; text-align: center; }
.chart-set-panel h4 { flex: 0 0 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chart-set-panel .icon-chart { flex: 1 1 auto; }
.chart-set-1 .chart-set-panel { width: 100%; }
.chart-set-2 .chart-set-panel { width: 50%; }
.chart-set-3 .chart-set-panel { width: calc(100% / 3); }
.chart-set-4 .chart-set-panel { width: 25%; }
.chart-set-5 .chart-set-panel { width: 20%; }
.chart-set-6 .chart-set-panel { width: calc(100% / 6); }

    /* Icon charts */
    .icon-chart { align-items: flex-end; display: inline-flex; margin: 0 auto; }
    .icon-chart-data { display: flex; flex: 0 0 auto; flex-direction: column-reverse; flex-wrap: wrap; }
    .icon-chart-data-label { bottom: 0.3em; font-size: 0.8rem; left: 50%; position: absolute; transform: translateX(-50%); }
    .icon-chart-data-point { margin-top: 2px; position: relative; }
    .icon-chart-data-point-mask { background: #fff; content: ""; left: 0; position: absolute; top: 0; width: 100%; }
    
    .icon-chart-label {
        flex: 0 0 auto;
        font-size: 11px;
        line-height: 0.9;
        left: 50%;
        position: absolute;
        text-align: right;
        top: calc(100% + 1em);
        transform: translate(-68%, -5.1em) rotate(-71deg);
        transform-origin: top center;
        width: 7rem;
    }
    
    .icon-chart-row { display: flex; flex: 0 0 auto; flex-direction: column-reverse; padding: 1em 7px 6em; position: relative; }
    .icon-chart-row-head { display: none; }

/* Colors */
.re-api { color: var(--re-api); }
.re-black { color: var(--re-black); }
.re-latino { color: var(--re-latino); }
.re-native { color: var(--re-native); }
.re-unknown { color: var(--re-unknown); }
.re-white { color: var(--re-white); }

/* Columns */
    /* Automatic */
    [class *= "cols"] { column-gap: 30px; list-style: none; margin: 0; }
    [class *= "cols"] a, [class *= "columns"] a { color: #000; }
    [class *= "cols"] li { margin: 0; }
    .cols4 { column-count: 4; }
    .cols6 { column-count: 6; }
    .cols8 { column-count: 8; }
    
    /* Manual */
    .columns { display: flex; margin: 0 -20px; }
    .columns-2 { padding: 0 20px; width: 50%; }
    .columns-4 { padding: 0 20px; width: 25%; }

/* Customize */
.custom-label { font-weight: bold; }
.custom-label:after { content: ":"; }
.custom-toggle { display: none; }

    /* Options */
    .custom-options .btn { padding: 0.4em 0.5em; }
    .custom-options .custom-label { display: inline-flex; padding: 0.5rem 0.5rem 0.5rem 0; vertical-align: middle; }
    
    /* Presets */
    .custom-presets .btn-toolbar { flex-wrap: nowrap; }
    
    .custom-presets .btn-toolbar .btn {
        align-items: center;
        border: 0;
        border-radius: 0;
        border-right: 1px solid #ddd;
        display: flex;
        flex: 1 1 auto;
        font-size: 0.8rem;
        font-weight: 500;
        justify-content: center;
        padding: 0.3 1rem;
        text-transform: uppercase;
        white-space: normal;
        width: 20%;
    }
    
    .custom-presets .btn-toolbar .btn:last-child { border: 0; }
    .custom-presets .btn-toolbar .btn:hover { background: rgba(0, 0, 0, 0.05); }
    .custom-presets .btn-toolbar .btn.active { color: var(--green); }
    .custom-presets .custom-label { display: none; }
    
    /* Views */
    .custom-views .custom-label { display: none; }
    .custom-views .btn-link { font-size: 1.6rem; padding: 0.1rem 0.6rem; }
    .custom-views .btn-link.active { color: var(--green); }

/* Dropdowns */
.dropdown { position: static; }
.dropdown-body { padding: 15px 30px 30px; }
.dropdown-content { max-height: 80vh; -webkit-overflow-scrolling: touch; overflow-x: hidden; overflow-y: auto; }
.dropdown-content.dropdown-caseflow { overflow-x: auto; }
.dropdown-foot { border-top: 1px solid #ddd; display: flex; padding: 0.75rem 0.75rem 0.25rem; text-align: right; }
.dropdown-foot .dropdown-message { flex: 1 1 auto; padding-right: 20px; }
.dropdown-foot .dropdown-message .alert { margin: 0; padding: 0.25rem 1.25rem; text-align: left; }
.dropdown-header { color: #666; margin-bottom: 1em; padding: 0; text-transform: uppercase; }
.disabled .dropdown-header { color: #ccc; }
a.disabled { color: #ccc; cursor: not-allowed; }
a.disabled:hover { text-decoration: none; }
a.disabled i { color: #ccc; }
.dropdown-item, .dropdown-static-item { padding: 0.25rem 0.75rem; transition: none; }
.dropdown-item:hover { background: rgba(0, 0, 0, 0.05); }
.dropdown-item.disabled { cursor: not-allowed; }
.dropdown-item .mute { display: block; }
.dropdown-menu { border: 0; border-radius: 0; box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); }

    /* Filters */
    .dropdown-filter { margin-bottom: 1em; }
    .dropdown-filter a { color: var(--green); }
    .dropdown-filter li, .dropdown-filter p, .dropdown-filter ul { display: inline-block; margin: 0 0.7em 0 0; }
    
    /* Large */
    .dropdown-large.btn-group { position: static; }
    .dropdown-large .dropdown-menu { top: auto !important; transform: none !important; width: 100%; }
    .dropdown-large .dropdown-foot { padding: 25px 30px 15px; }

/* Floats */
.r { float: right; }

/* Footer */
#colophon { background: rgba(0, 0, 0, 0.03); font-size: 0.7rem; }
#colophon .content { padding-top: 30px; }
#footer { background: #f7f7f7; }
#footer .content { display: flex; justify-content: space-between; }
#subfooter h2 { font-size: 1.6rem; margin-bottom: 0.3em; }
#subfooter-primary { flex: 0 0 auto; width: 65.55%; }
#subfooter-secondary { flex: 0 0 auto; width: 31.11%; }

/* Geographic */
.geo { display: flex; justify-content: space-between; }
.geo-list { display: flex; flex-direction: column; flex: 0 0 auto; width: 34.44%; }
.geo-list-chart { border: 1px solid #ddd; flex: 1 1 auto; margin-bottom: 1em; max-height: 750px; overflow-x: hidden; overflow-y: auto; padding: 20px; }
.geo-list-chart #ranking { margin-bottom: 1em; height: 1500px; }
.geo-list-chart-options { flex: 0 0 auto; }
.geo-map { flex: 0 0 auto; width: 60%; }
#map { height: 800px; }

/* Header */
#header { background: var(--branding-main); padding: 0 20px; }
#header a { color: #000; }

#header .content {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 18px 0 13px;
    position: relative;
}

#logo { width: 160px; }
#logo a { align-items: center; display: flex; }
#logo:hover { text-decoration: none; }
#logo img { display: block; flex: 0 0 auto; height: 22px; }
#logo-tagline { display: block; flex: 1 1 auto; font-size: 0.55rem; line-height: 1.3; padding-left: 0.5em; text-transform: uppercase; }

    /* Menu */
    #menu {
        background: var(--branding-main);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        height: 100%;
        opacity: 0;
        overflow-y: auto;
        position: fixed;
        right: 0;
        top: 0;
        transform: translateX(100%);
        transition: all 0.1s ease-in-out;
        width: 300px;
    }
    
    #menu a { display: block; border-bottom: 1px solid rgba(0, 0, 0, 0.3); padding: 1em; }
    #menu a:hover, #menu button:hover { background: rgba(255, 255, 255, 0.2); text-decoration: none; }
    #menu .btn-link { color: #fff; padding: 1em; text-align: left; vertical-align: inherit; }
    #menu li { margin: 0; }
    #menu ul { list-style: none; margin: 0; }
    #menu ul ul { background: #fff; }
    #menu ul ul a { color: var(--branding-main); border-bottom-color: rgba(0, 0, 0, 0.15); padding: 0.5em 1em; }
    .menu-open #menu { opacity: 1; transform: translateX(0); }
    
    /* Navigation */
    #nav { font-weight: bold; }
    #nav a:hover { opacity: 0.5; text-decoration: none; }
    #nav .btn-link { color: #000; font-weight: inherit; padding: 0; vertical-align: inherit; }
    #nav .btn-link:hover { opacity: 0.5; }
    #nav li { display: inline-block; margin: 0 1em 0 0; }
    #nav ul { list-style: none; margin: 0; }
    
        /* Counties */
        #nav #counties .dropdown-menu { padding: 0; top: auto !important; transform: none !important; width: 100%; }
        #nav #counties .dropdown-menu a { color: #000; display: block; font-weight: normal; text-transform: none; }
        #nav #counties .dropdown-menu .dropdown-body { column-count: 6; column-gap: 30px; padding: 30px; width: 100% !important; }

/* Hero */
.hero {
    background: url(/images/hero.jpg) 50% 50% no-repeat;
    background-size: cover;
    box-shadow: inset 0 0 0 1000px rgba(255, 186, 37, 0.6);
}

.hero h1 { font-size: 3rem; margin: 0; }
.hero, .hero a, .hero h1 { color: #000; }
.hero-map { height: 160px; }
.hero-overlay { padding: 0 20px; }
.hero-overlay .content { align-items: flex-end; display: flex; padding: 4vh 0; }
.hero-overlay h1 { margin-right: 1em; }

/* Highcharts */
.highcharts-tooltip { max-width: 80%; }

/* Highlight */
@keyframes yellowfade {
    from { background: yellow; }
    to { background: transparent; }
}

.hl { animation-duration: 1.5s; animation-name: yellowfade; }

/* Icons */
.fa-check-square { color: var(--green); }
.fa-spin { color: var(--re-latino); }
.icon-ca { display: inline-block; line-height: 1; height: 20px; vertical-align: 2px; width: 20px; }
.icon-person { height: 38px; width: 18.89px; }

/* Intro */
.intro { color: #666; font-size: 1.38rem; }

/* Legend */
.legend { list-style: none; margin-left: 0; text-align: center; }
.legend li { display: inline-block; margin: 0 0.5em; }

/* Mute */
.mute { color: #777; font-size: 0.88rem; }
.mute .icon-person { height: 20px; width: 10px; }

/* Offenses */
.offenses { display: flex; flex-wrap: wrap; justify-content: center; margin: 0 -20px; }
.offenses-chart { flex: 0 0 auto; margin-bottom: 30px; padding: 0 20px; width: 100%; }

/* Plain lists */
.plain { list-style: none; margin-left: 0; }
.plain li { margin: 0; }

/* Projects */
.project { flex: 0 0 auto; width: 48%; }
.project-list { display: flex; justify-content: space-between; }
.project-thumb { box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); display: block; margin-bottom: 10px; }
.project-thumb:hover { opacity: 0.7; }
.project-thumb img { display: block; }

/* Recommendations */
.rec { margin-bottom: 30px; }
.rec-image { flex: 0 0 auto; width: 31%; }
.rec-image img { display: block; height: 100%; object-fit: cover; width: 100%; }
.rec-image-feature img { display: block; margin: 1.5em 0; width: 100%; }
.rec-link { align-items: stretch; color: #000; display: flex; flex-direction: row; }
.rec-link:hover { opacity: 0.8; text-decoration: none; }
.rec-summary { display: flex; flex: 1 1 auto; flex-direction: column; justify-content: center; padding: 50px 40px; }
.rec-summary h2 { color: var(--green); margin-bottom: 0.3em; }
.rec-summary p { margin: 0; }

/* Share */
.share { list-style: none; margin: 2em 0; text-align: center; }
.share li { display: inline-block; margin: 0 0.5em; }

/* Tables */
.table-info { background: none; margin-right: 1em; }
.table-pagesize { margin-right: 1em; }
.table-paging { display: flex; }
.table-toolbar-secondary { align-items: center; display: flex; }

    /* Columns */
    .col-num { text-align: center; }
    .col-text { min-width: 10em; text-align: left; width: 13%; }
    .col-year { text-align: left; width: 4em; }

/* Title */
.title { margin-bottom: 30px; text-align: center; }
.title h2 { font-size: 1.6rem; letter-spacing: 0.1em; text-transform: uppercase; }
.title p { margin: 0 0 0.3em; }

/* Widths
=====================================================================*/
@media screen and (max-width: 950px) {
    /* Basics */
    h1 { font-size: 2.5rem; }
    
    /* Content */
        /* Cards */
        .card { box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); }
        .card h3 .btn { font-size: 1.2rem; }
        .card-body { padding: 10px; }
        .card-group .card { width: auto; }
        
        /* Charts */
        .chart-set { display: block; margin: 0; }
        .chart-set-panel { display: block; text-align: left; }
        [class *= "chart-set-"] .chart-set-panel { margin-bottom: 2em; width: auto; }
        
            /* Icon charts */
            .icon-chart { display: block; }
            .icon-chart-data { align-items: center; flex-direction: row; position: relative; }
            .icon-chart-data-label { bottom: auto; padding-left: 1.4em; top: 0; transform: translate(0, 100%); }
            .icon-chart-data-point { margin-right: 3px; }
            .icon-chart-label { margin-right: 1em; position: static; transform: none; }
            .icon-chart-row { align-items: center; flex-direction: row; padding: 0; }
            .icon-chart-row-head { display: block; margin-right: 1rem; text-align: right; width: 6.6rem; }
            .icon-chart-row-head + .icon-chart-label { display: none; }
        
        /* Columns */
        .cols6 { column-count: 3; }
        
        /* Customize */
        .custom-toggle { display: block; }
        .custom-toolbar .btn-toolbar { display: block; }
        .custom-toolbar .btn-toolbar .btn-link { background: #f2f2f2; }
        .customize { display: none; }
        .customize-open { overflow: hidden; }
        
        .customize-open .customize {
            background: #fff;
            display: block;
            height: 100%;
            left: 0;
            -webkit-overflow-scrolling: touch;
            overflow-x: hidden;
            overflow-y: auto;
            padding: 15px;
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 1;
        }
        
            /* Options */
            .custom-options { display: flex; flex-wrap: wrap; justify-content: space-between; }
            .custom-options > .btn-group { flex: 0 0 auto; width: 48%; }
            .custom-options .custom-label { display: block; text-align: left; width: 100%; }
            .custom-options .dropdown-foot { background: #fff; bottom: 0; display: block; left: 0; padding: 10px; position: fixed; width: 100%; }
            .custom-options .dropdown-foot .dropdown-message { margin-bottom: 10px; padding: 0; width: auto; }
            .custom-options .dropdown-large .dropdown-menu { top: 0 !important; }
            
            .custom-options .dropdown-menu {
                bottom: auto;
                height: 100%;
                left: 0;
                -webkit-overflow-scrolling: touch;
                overflow-x: hidden;
                overflow-y: auto;
                position: fixed !important;
                transform: none !important;
                width: 100%;
                will-change: auto !important;
            }
            
            /* Presets */
            .custom-presets .btn-toolbar { flex-wrap: wrap; }
            .custom-presets .btn-toolbar .btn { width: 50%; }
            .custom-presets .custom-label { display: block; }
            
            /* Views */
            .custom-views .btn { text-align: center; }
            .custom-views .btn-group { display: flex; }
            .custom-views .custom-label { display: block; }
        
        /* Dropdowns */
        .dropdown-body { padding: 15px; }
        .dropdown-content { max-height: none; padding-bottom: 100px; }
        .dropdown-item { white-space: normal; }
        
        /* Geographic */
        .geo { display: block; }
        .geo-list, .geo-map { margin-bottom: 2em; width: auto; }
        .geo-list-chart { max-height: none; }
        #map { height: 100vw; }
        
        /* Hero */
        .hero-overlay .content { padding-right: 0; }
        
        /* Offenses */
        .offenses { display: block; margin: 0 0 2em; }
        .offenses-chart { padding: 0; width: auto; }
        
        /* Tables */
        .table { width: auto; }
}

@media screen and (max-width: 700px) {
    /* Basics */
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.2rem; }
    
    /* Layout */
    .content { padding-bottom: 10vw; padding-top: 10vw; }
    
    /* Content */
        /* Buttons */
        .btn, .btn-group { display: block; margin-bottom: 0.5em; text-align: center; width: 100%; }
        
        /* Charts */
            /* Icon charts */
            .icon-chart-label { text-align: left; width: auto; }
            .icon-chart-row { display: block; margin-bottom: 10px; }
            .icon-chart-row-head { text-align: left; width: auto; }
            
                /* Disparity gap */
                .chart-set-panel-disparity { position: relative; }
                .chart-set-panel-disparity > h4 { left: 1.5%; position: absolute; top: 4.2rem; }
                .chart-set-panel-disparity .icon-chart-row:first-child { margin-bottom: 2.3rem; }
        
        /* Columns */
        .cols4, .cols6 { column-count: 1; }
        .cols8 { column-count: 3; }
        .columns { display: block; }
        [class *= "columns-"] { width: auto; }
        
        /* Customize */
            /* Presets */
            .custom-presets .btn-toolbar { display: block; }
            .custom-presets .btn-toolbar .btn { display: block; width: 100% }
        
        /* Footer */
        #colophon { text-align: center; }
        #footer .content { display: block; }
        #subfooter-primary, #subfooter-secondary { width: auto; }
        
        /* Header */
        #nav { display: none; }
        
        /* Hero */
        .hero h1 { font-size: 1.9rem; }
        
        .hero-large .hero-overlay .content {
            align-items: flex-start;
            flex-direction: column-reverse;
        }
        
        .hero-map { height: 80px; }
        
        /* Intro */
        .intro { font-size: 1.15rem; }
        
        /* Projects */
        .project { width: auto; }
        .project-list { display: block; }
        
        /* Recommendations */
        .rec-image { height: 60vw; width: auto; }
        .rec-link { flex-direction: column; }
        .rec-summary { padding: 20px; width: auto; }
        
        /* Tables */
        .table-toolbar { display: block; }
}