/*-----------------------------------+
 | Site: Unbalanced Youth Justice    |
 | 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(/content/styles/avenir-next.css);
@import url(/content/styles/dinpro.css);
@import url(/content/styles/fontawesome.css);
@import url(/content/styles/reset.css);
@import url(/content/styles/forms.css);

@font-face {
    font-family: "StateFaceRegular";
    src: url("/content/fonts/stateface/stateface-regular-webfont.eot");
    src: url("/content/fonts/stateface/stateface-regular-webfont.eot?#iefix") format("embedded-opentype"),
         url("/content/fonts/stateface/stateface-regular-webfont.woff") format("woff"),
         url("/content/fonts/stateface/stateface-regular-webfont.ttf") format("truetype"),
         url("/content/fonts/stateface/stateface-regular-webfont.svg#StateFaceRegular") format("svg");
    font-weight: normal;
    font-style: normal;
}


/* Fonts
======================================================================*/
body, .highcharts-container *, input, .mute, select, textarea, .ui-tooltip h6, .ui-widget { font-family: "Lato", Arial, sans-serif; }
.btn-primary, .btn-secondary, h1, h2, h3, h4, h5, h6, #nav, .org, .preset-subtitle { font-family: "Avenir Next", Arial, sans-serif; }
input[type=password] { font-family: Arial, sans-serif; }
.chart-title h2, .preset-title { font-family: "DINPro", Arial, sans-serif; }
.state { font-family: "StateFaceRegular", Arial, sans-serif; }


/* Basics
======================================================================*/
:root {
    --action: #ea404b;
    --branding-main: #1ebbbd;
    --orange: #e7832d;
}

a, a:hover, a:active { color: var(--branding-main); }
a:hover { text-decoration: underline; }
blockquote { border-left: 5px solid rgba(0, 0, 0, 0.2); padding-left: 2rem; }
body { line-height: 1.4; overflow-wrap: break-word; word-wrap: break-word; }
dl, ol, p, table, ul { margin-bottom: 1em; }
dt { margin-top: 1.4em; }
cite, 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; }
h3 { color: #666; font-size: 1.66rem; }
h4 { color: #666; font-size: 0.94rem; }
hr { background: none; border: 0; border-top: 2px dotted 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; }
ol ol { list-style: lower-alpha; }
ol ol ol { list-style: lower-roman; }
sup { font-size: 11px; vertical-align: 0; }
strong { font-weight: bold; }
svg { height: 100%; width: 100%; }
table { table-layout: fixed; }
ul { list-style: disc; margin-left: 1.5em; }
ul ul { list-style: circle; margin-bottom: 0; }
ul ul ul { list-style: square; }

/* Stock classes */
.l { float: left; }
.r { float: right; }
.num { text-align: right; }
ul.flat { list-style: none; margin-left: 0; }
ul.flat > li { background: none; margin: 0; padding: 0; }


/* Core layout
======================================================================*/
#admin .ribbon, .content { margin: 0 auto; max-width: 1200px; }
.clear { clear: both; }
.content { padding: 3vw 20px; }
.content-narrow { margin: 0 auto; max-width: 826px; padding: 4vw 20px; }
.content + .content-narrow, .content-narrow + .content { padding-top: 0; }
#page { position: relative; }

/* Columns */
.c2l, .c2r { width: 48%; }
.c2l, .c3l, .c3m { float: left; }
.c2r, .c3r { float: right; }
.c3l { margin-right: 3%; }
.c3l, .c3m, .c3r { width: 31%; }

/* Content */
#content-primary { float: left; width: 71.4%; }
#content-secondary { float: right; width: 26.4%; }

    /* Article */
    .article .aside { background: #f0f0f0; border-radius: 7px; clear: right; float: right; font-size: 14px; margin: 0.3em 0 1em 1em; padding: 15px; width: 30%; }
    .article .aside h3 { font-size: 16px; line-height: 1.3; margin-bottom: 0.2em; }
    .article #content-primary { float: none; margin: 0 auto; padding: 20px 0; width: 82.44%; }
    
    /* Full */
    .full #colophon { background: none; padding: 0; }
    .full #content { padding: 0; width: 1006px; }
    .full #content-primary { float: none; width: auto; }
    .full #content-secondary { display: none; }
    .full #footer .section, .full #footer #photos { display: none; }
    
    /* Home */
    .home #content-primary { padding-top: 20px; width: 65.9%; }
    .home #content-secondary { width: 31.9%; }
    
    /* Sign in */
    .signin #content-primary { float: none; margin: 0 auto; width: 65%; }
    .signin #content-secondary { display: none; }
    .signin #content { background: #fff; }
    .signin #footer .section, .signin #footer #photos { display: none; }


/* Content
======================================================================*/

/* Action */
.action {
    background: var(--action);
    border: 0;
    border-radius: 4px;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    display: inline-block;
    padding: 0.5em 1em;
}

.action:hover { text-decoration: underline; }
.action .icon { background-position: 0 50%; float: none; }

/* Buttons */
.btn { border-radius: 5px; padding: 0.5rem 1rem; transition: all 0.15s ease-in-out; }
.btn-group { list-style: none; margin-left: 0; }
.btn-group > .show .btn { background: #f0f0f0; }
.btn-label { cursor: pointer; padding-left: 0; padding-right: 0; }
.btn-light { background: #f2f2f2; color: var(--branding-main); }

.btn-light:not(:disabled):not(.disabled).selected,
.btn-light:not(:disabled):not(.disabled):active,
.selected .btn-light:not(:disabled):not(.disabled) {
    background: var(--branding-main);
    color: #fff;
}

.btn-link, .btn-link:hover { color: var(--branding-main); 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);
}

.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 { list-style: none; margin: 0 0 1rem; position: relative; }

/* Callouts */
div.call-l, img.call-l { clear: left; }
div.call-r, img.call-r { clear: right; }
dt img.call-l { margin-top: 0; }
img.call-l { margin-right: 1em; }
img.call-r { margin-left: 1em; }
.call-l { float: left; margin: 0.5em 2em 0.5em 0; }
.call-r { float: right; margin: 0.5em 0 0.5em 2em; }
.call, div.call-l, div.call-r { font-size: 0.75em; }
.call img, .call-l img, .call-r img { display: block; }
.call img.icon, .call-l img.icon, .call-r img.icon { display: inline; }
.call, .call-l p, .call-r p { margin-bottom: 0.5em; }
.credit { color: #7f8183; font-size: 0.75em; letter-spacing: 0.01em; margin-bottom: 0.5em; text-align: right; }

/* Cards */
.card { background:  border: 0; border-radius: 0; 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); margin: 1em 0; }
.card-group .card { border: 1px solid #ddd; box-shadow: none; margin: 0; }
.card h3 .btn { font-size: 1.88rem; padding: 0; }

/* Case flow diagram */
#case-flow-diagram { overflow: auto; }
#caseflow { position: relative; }
#caseflow #description { left: 0; max-width: 23em; position: absolute; top: 0; }
#caseflow #diagram { font-size: 13px; margin: 0 auto; overflow: hidden; padding-top: 25px; text-align: center; width: 1100px; }
#caseflow #diagram a { color: #000; display: block; }
#caseflow #diagram .d { border-top: 1px solid rgba(0, 0, 0, 0.2); display: block; margin-top: 0.1em; padding-top: 0.1em; }
#caseflow #diagram .disabled { color: #7f7f7f; }
#caseflow #diagram .disabled .step:hover { background: #fff; }
#caseflow #diagram > li { background-position: -50px 50%; background-repeat: no-repeat; float: left; padding-left: 3.26%; width: 13.94%; }
#caseflow #diagram > li:first-child { background: none; padding-left: 0; }
#caseflow #diagram .n { display: block; }
#caseflow #diagram .selected a { color: #390d0c; }
#caseflow #diagram .selected .step { background-color: var(--branding-main); border-color: var(--branding-main); color: #fff; }
#caseflow #diagram .selected .step a { color: #fff; }
#caseflow #diagram .selected .step .d { border-top-color: rgba(255, 255, 255, 0.2); }
#caseflow #diagram .step { background: #fff; border: 1px solid #ababab; display: block; border-radius: 4px; padding: 7px 5px; }
#caseflow #diagram .step:hover { background: #f0f0f0; }
#caseflow #diagram .step:hover a { text-decoration: none; }
#caseflow #diagram .step.no-prev { height: 42px; }
#caseflow #diagram .step.no-prev .n { padding-top: 8.5px; }
#caseflow #diagram .step.no-prev .d { display: none; }
#caseflow ol { list-style: none; margin: 0; }

    /* Arrows */
    #caseflow .double { background-image: url(/content/images/caseflow-arrow-2.png); }
    #caseflow .single { background-image: url(/content/images/caseflow-arrow-1.png); }
    #caseflow .triple { background-image: url(/content/images/caseflow-arrow-3.png); }
    
    /* Drag step */
    .drag-step { font-size: 13px; position: absolute; text-align: center; z-index: 999; width: 128px; }
    .drag-step a { display: block; }
    .drag-step .step { background: #f0f0f0; border: 1px solid #ababab; display: block; border-radius: 4px; padding: 7px; }
    .drag-step .step:hover a { text-decoration: none; }
    .drag-step .step .d { border-top: 1px solid #ccc; display: block; margin-top: 0.1em; padding-top: 0.1em; }
    .drag-step .step .n { display: block; }
    .drag-step .step.no-prev { height: 42px; }
    .drag-step .step.no-prev .n { padding-top: 8.5px; }
    .drag-step .step.no-prev .d { display: none; }
    
    /* Tree positioning */
    #caseflow .double { margin-top: 37px; }
    #caseflow .double li, #caseflow .triple li { margin-bottom: 15px; }
    #caseflow .double li:last-child, #caseflow .triple li:last-child { margin: 0; }
    #caseflow .single { margin-top: 73px; }
    #caseflow .last { margin-top: 0; }
        
/* Chart sort */
.chart-sort { padding: 0 0.25em; }
.chart-sort.current { font-weight: bold; }

/* Chart title */
.chart-title { margin-bottom: 10px; padding: 15px; text-align: center; }
.chart-title * { margin: 0; }
.chart-title h2 { font-size: 1.6rem; letter-spacing: 0.1em; text-transform: uppercase; }
.chart-title.sticky-active { background: rgba(255, 255, 255, 0.93); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); margin-top: 10px; z-index: 1000; }

/* Close */
.close { float: none; position: absolute; right: 10px; top: 10px; }

/* Comparison options */
.comparison { float: right; margin-top: -3px; text-align: right; }
.comparison .btn { float: right; position: relative; }
.comparison .btn > a { background: #fff; border: 1px solid #ddd; display: block; padding: 0.2em 0.7em; }
.comparison .btn > a:hover { background: #f2f2f2; text-decoration: none; }
.comparison .btn:first-child > a { border-bottom-right-radius: 4px; border-top-right-radius: 4px; }
.comparison .btn:last-child > a { border-bottom-left-radius: 4px; border-top-left-radius: 4px; }
.comparison li { margin: 0; }

.comparison .menu {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    max-height: 200px;
    overflow-x: hidden;
    overflow-y: auto;
    position: absolute;
    right: 0;
    text-align: left;
    top: 31px;
    white-space: nowrap;
}

.comparison ul { list-style: none; margin: 0; }
.comparison ul a { display: block; padding: 0.05em 15px 0.1em; }
.comparison ul a:hover { background: #f2f2f2; text-decoration: none; }

/* Customize */
.custom-label { color: #666; text-transform: uppercase; }
.custom-label:after { content: ":"; }
.custom-toggle { display: none; }
.customize { margin-bottom: 2em; text-align: center; }

    /* 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 > li {
        align-items: stretch;
        border-right: 1px solid #ddd;
        display: flex;
        flex: 0 0 auto;
        flex-direction: column;
        margin: 0;
        width: 20%;
    }
    
    .custom-presets .btn-toolbar > li:last-child { border: 0; }
    
    .custom-presets .btn-toolbar .btn {
        align-items: center;
        border: 0;
        border-radius: 0;
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        font-size: 0.8rem;
        font-weight: 500;
        justify-content: center;
        padding: 0.3 1rem;
        white-space: normal;
    }
    
    .custom-presets .btn-link { color: #000; }
    .custom-presets .btn-link.selected { color: var(--branding-main); }
    .custom-presets .btn-toolbar .btn:hover { background: rgba(0, 0, 0, 0.05); }
    .custom-presets .custom-label { display: none; }
    
        /* Presets */
        .preset-title { display: block; font-weight: 500; margin-bottom: 0.2em; text-transform: uppercase; }
        .preset-subtitle { display: block; font-size: 14px; font-weight: bold; }
        .presets { line-height: 1.3; list-style: none; margin: 30px 0 0; overflow: hidden; }
        .presets a { border: 1px solid #ababab; border-right-width: 0; display: block; padding: 1em 0.5em; text-align: center; }
        .presets a:hover { background: #f0f0f0; text-decoration: none; }
        .presets li { float: left; margin-bottom: 20px; width: 20%; }
        .presets li.selected a { background: #fff1b9; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) inset; color: #390d0c; }
        .presets li:first-child a { border-radius: 4px 0 0 4px; }
        .presets li:last-child a { border-radius: 0 4px 4px 0; border-right-width: 1px; }
    
    /* Trigger */
    .customize-trigger { left: 50%; position: absolute; top: 0; transform: translateX(-50%); }
    
    /* Views */
    #odc-filter-view .btn-link { color: #000; font-size: 1.6rem; padding: 0.1rem 0.6rem; }
    #odc-filter-view .btn-link .state { font-size: 1.4em; line-height: 1.2; }
    #odc-filter-view .selected .btn-link { color: var(--branding-main); }
    .custom-views .custom-label { display: none; }

/* Decision-making point chart */
#dmp-locations h4 { border-bottom: 1px solid #ddd; padding-bottom: 0.2em; }
#dmp-locations ul { font-size: 14px; max-height: 450px; margin: 0; overflow-y: auto; }
#dmp-locations ul a { color: #000; display: block; padding: 0.2em; }
#dmp-locations ul a:hover { background: #f0f0f0; }
#dmp-locations ul li { margin: 0; }
#dmp-locations ul .selected a { color: var(--branding-main); }
#dmp-primary { float: left; width: 74.18%; }
#dmp-secondary { float: right; width: 22.55%; }

/* Empty message */
.empty { border: 4px dashed #ddd; color: #666; font-size: 20px; margin-bottom: 30px; padding: 50px; text-align: center; }
.empty p { margin: 0; }

/* Filters */
.filters { display: none; margin-bottom: 20px; padding: 20px; position: relative; }
.filters dt { margin-top: 0.3em; }
.filters h3 { border-bottom: 1px solid #ddd; font-size: 16px; padding-bottom: 0.3em; }
.filters li { margin: 0; }
.filters-content { display: flex; justify-content: space-between; }

    /* Categories */
    .filters .category { position: relative; }
    .filters .category dl ul { margin: 0; }
    .filters .category li.selected a [class *= "fa"] { color: var(--branding-main); }
    .filters .category li.disabled a, .filters .category li.selected.disabled a { color: #aaa; cursor: default; }
    .filters .category ul { list-style: none; margin: 0 0 0.5em; }
    .filters .category ul a { color: #000; display: block; padding: 0.2em 0.4em 0.2em 1.6em; text-indent: -0.6em; }
    .filters .category ul a:hover { text-decoration: none; }
    
        /* Decision-making points */
        #decision.filters .category { width: 31.06%; }
        
        /* One-day count */
        #odc.filters .category { width: 22.44%; }
    
    /* Selection options */
    .select-menu { background: #fff; border: 1px solid #ddd; border-top: 0; border-radius: 0 0 4px 4px; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2); left: 0; position: absolute; top: 25px; width: 99%; }
    .select-options { font-size: 12px; }
    
    /* Years */
    .filters .years { list-style: none; margin: 0; }
    .filters .years li { float: left; margin-right: 3%; width: 30%; }
    .filters .years .disabled a { color: #aaa; cursor: default; }

/* Footer */
#footer { background: #f7f7f7; }
#footer a { color: var(--branding-main); }
#footer .content { display: flex; justify-content: space-between; }

    /* Colophon */
    #colophon { font-size: 0.7rem; }
    #colophon .content { padding-top: 30px; }
    
    /* Site credit */
    #credit a { color: #a18484; }
    #credit a:hover { text-decoration: none; }
    #credit a strong { color: #fff; font-weight: normal; }
    #credit a:hover strong { text-decoration: underline; }
    
    /* Subfooter */
    #subfooter { background: rgba(0, 0, 0, 0.03); }
    #subfooter h2 { font-size: 1.6rem; margin-bottom: 0.3em; text-transform: uppercase; }
    #subfooter-primary { flex: 0 0 auto; width: 65.55%; }
    #subfooter-secondary { flex: 0 0 auto; width: 31.11%; }

/* Footnotes */
.footnotes { color: #7f7f7f; font-size: 12px; list-style: none; margin: 1em 0; }
.footnotes li { margin-bottom: 0.5em; }

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

#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, #menu a { color: #fff; }
    #menu a { display: block; border-bottom: 1px solid rgba(255, 255, 255, 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(--orange); border-bottom-color: rgba(0, 0, 0, 0.15); padding: 0.5em 1em; }
    .menu-open #menu { opacity: 1; transform: translateX(0); }
    
/* Help */
.help { background: #fff; border: 1px solid #ddd; color: #7f7f7f; display: none; font-size: 13px; margin-bottom: 10px; padding: 10px; }

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

.hero h1 { font-size: 3rem; margin: 0; }
.hero, .hero a, .hero h1 { color: #fff; }
.hero-large .hero-overlay .content { padding-top: 5vh; }
.hero-map { width: 250px; }
.hero-overlay { padding: 0 20px; }
.hero-overlay .content { align-items: flex-end; display: flex; padding: 6vh 0 4vh 0; }
.hero-overlay h1 { margin-right: 1em; }

/* Hidden */
.hidden { left: -999em; position: absolute; top: 0; }

/* Icons */
.icon { background-repeat: no-repeat; background-position: 0 0.4em; padding: 3px 0 3px 22px; }
.icon-cal { background-image: url(/content/images/shared/calendar.png); }
.icon-doc { background-image: url(/content/images/shared/doc.png); }
.icon-facebook { background-image: url(/content/images/shared/facebook.png); }
.icon-feed { background-image: url(/content/images/shared/feed.png); }
.icon-linkedin { background-image: url(/content/images/shared/linkedin.png); }
.icon-list { background-image: url(/content/images/shared/list.png); }
.icon-map { background-image: url(/content/images/shared/map.png); }
.icon-pdf { background-image: url(/content/images/shared/pdf.png); }
.icon-ppt { background-image: url(/content/images/shared/ppt.png); }
.icon-search-options { background-image: url(/content/images/shared/search-options.png); }
.icon-twitter { background-image: url(/content/images/shared/twitter.png); }
.icon-xls { background-image: url(/content/images/shared/xls.png); }
.icon-youtube { background-image: url(/content/images/shared/youtube.png); }
img.icon { padding: 0; vertical-align: middle; }

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

/* jQuery UI */
.ui-widget { font-size: 1em; }

    /* Tooltips */
    .ui-tooltip { font-size: 13px; max-width: 300px; }
    .ui-tooltip h6 { font-size: 13px; }
    .ui-tooltip p { margin: 0; }

/* Loading message */
.loading { position: relative; }

.loading .message {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
    color: #555;
    font-weight: bold;
    display: inline-block;
    left: 0;
    padding: 0.3em 0.6em;
    position: absolute;
    top: 0;
}

/* Map */
#map { margin: 0 auto 20px; width: 730px; }
#us-map path { fill: #ddd; }
#us-map .q1 { fill: #f7cb4e; }
#us-map .q2 { fill: #efae50; }
#us-map .q3 { fill: #e89252; }
#us-map .q4 { fill: #e17252; }
#us-map .q5 { fill: #d94e51; }
#us-map .hover { cursor: pointer; stroke: black; stroke-linejoin: round; stroke-opacity: 1; stroke-width: 3; }
#us-map .quintile-label { font-size: 10.5px; }
#us-map .quintile-line { stroke: black; stroke-opacity: 1; stroke-width: 1; }
#us-map .quintile-value { fill: #666; font-size: 10.5px; }

/* Map popup */
.map-popup { background: #fff; border: 1px solid #888; padding: 0.75em; position: absolute; z-index: 99; -webkit-border-radius: 6px; border-radius: 6px; }

/* Muted text */
.mute { color: #7f7f7f; font-size: 12px; font-weight: normal; }

/* Navigation */
#nav { font-weight: bold; }
#nav a:hover { opacity: 0.7; text-decoration: none; }
#nav .btn-link { color: #fff; font-weight: inherit; padding: 0; text-transform: uppercase; vertical-align: inherit; }
#nav .btn-link:hover { opacity: 0.7; }
#nav li { display: inline-block; margin: 0 1em 0 0; }
#nav ul { list-style: none; margin: 0; }

    /* Secondary navigation */
    #nav-secondary { font-size: 18px; margin-bottom: 30px; }
    #nav-secondary li { border-bottom: 1px solid #ddd; padding: 0.3em 0; }
    #nav-secondary li li { border: 0; font-size: 14px; margin-bottom: 0.5em; padding: 0; }
    #nav-secondary ul { list-style: none; margin: 0; }
    #nav-secondary ul ul { margin-top: 0.5em; }
    #nav-secondary li.current { font-weight: bold; }
    #nav-secondary li.current ul { font-weight: normal; }

/* One day count title */
#odc-title h2 span { font-size: 1em; font-weight: bold; margin-left:0; }

/* Page tools */
#page-tools { float: right; }

/* People icons */
.people { color: #888; font-size: 10px; letter-spacing: 0.3em; line-height: 1.4; margin-bottom: 0.3em; }

/* Play button */
.play { align-items: center; display: flex; margin-top: -28px; }

    /* One day count years */
    #odc-years { height: 10px; margin: 0 16px 20px 20px; width: 150px; }
    #odc-years .ui-slider-handle { background: var(--branding-main); border: 0; border-radius: 40px; height: 18px; width: 18px; }
    #odc-years-legend { margin-top: 14px; }
    #odc-years-legend .tick { float: left; position: absolute; }
    #odc-years-legend .tick .tick-line { background: #bbb; display: block; height: 9px; margin: 0 12px; width: 1px; }
    #odc-years-legend .tick .tick-value { color: #7f7f7f; display: block; font-size: 11px; text-align: center; }

/* Sections */
.section { border-bottom: 1px solid #ddd; padding: 3vw 0; }
.section-primary { float: left; width: 31.15%; }
.section-secondary { float: right; width: 65.57%; }

/* Sortables */
.ui-sortable div { border-radius: 5px; }
.ui-sortable .item { margin:0 0 6px 0; padding:6px; }
.ui-sortable .item .r img { padding:0px 0px 3px 3px; }

/* Sort by */
.sort-by { float: right; text-align: right; }
.sort-by .current { color: #000; }

/* State compare */
#state-charts .chart-close { color: #999; float: right; }
#state-charts .chart-close:hover { color: #000; text-decoration: none; }
#state-charts li { border: 1px solid #ddd; float: left; margin: 0 1em 1em 0; padding: 0.75em; width: 28%; }
#state-charts ul { list-style: none; margin: 0; }

/* State header */
#state-header .comparison .btn { padding: 0; }
#state-header.sticky-active { z-index: 1000; }
#state-header h2 { margin-bottom: 0.3em; }
#state-nav { list-style: none; margin: 0; }
#state-nav li { display: inline; margin: 0 0.6em 0 0; }

/* Sticky Scroll */
.sticky-container { position: relative; }

/* Tables */
.national td, .national th { background: #f3f5f9; font-weight: bold; }
.national th { color: #000; cursor: default; }
.national th:hover { text-decoration: none; }
.tabular .chart-title { margin: 0; padding-top: 20px; }
.table { width: auto; }
.table .row-header { text-align: left; }
.table td, .table th { padding: 0.3rem; text-align: center; }

.table-responsive {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    width: 100%;
}
    
    /* DataTables */
    .dataTable thead th { background: #fff; cursor: pointer; }
    .dataTable thead th[class*="sorting"] { color: var(--orange); }
    .dataTable thead th[class*="sorting"]:hover { text-decoration: underline; }
    .dataTable thead th[class*="sorting_"] span { background-position: 100% 50%; background-repeat: no-repeat; cursor: pointer; padding-right: 15px; }
    .dataTable th.sorting_asc span { background-image: url(/content/images/shared/sort-up.png); }
    .dataTable th.sorting_desc span { background-image: url(/content/images/shared/sort-down.png); }
    .FixedHeader_Header.active { background: rgba(255, 255, 255, 0.93); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); padding-top: 100px; }
    
    /* Triggers */
    .table-trigger { text-align: center; }

/* Toggling options */
.closed { display: none; }

/* Tour */
.do { background: rgba(106, 2, 106, 0.1); color: #660666; }

/* Trends */
.odc-trends { display: flex; justify-content: space-between; list-style: none; }
.odc-trends > li { flex: 0 0 auto; margin: 0; width: 19%; }
.odc-trends h3 { font-size: 0.94rem; }
.odc-trends h3 + p { font-size: 13px; }


/* Widths
=====================================================================*/
@media screen and (max-width: 950px) {
    /* Basics */
    h1 { font-size: 2.5rem; }
    
    /* Content */
        /* Customize */
        .custom-presets .btn-toolbar { display: block; }
        .custom-presets .btn-toolbar .btn, .custom-presets .btn-toolbar > li { display: block; width: 100% }
        .custom-toolbar .btn-toolbar { display: block; }
        .custom-toolbar .btn-toolbar .btn-link { background: #f2f2f2; }
        
        /* Hero */
        .hero-overlay .content { padding-right: 0; }
        
        /* Map */
        #us-map .quintile-label { font-size: 24px; }
        #us-map .quintile-value { font-size: 24px; transform: translateY(5px); }
        
        /* Trends */
        .odc-trends { display: block; }
        .odc-trends > li { width: auto !important; }
}


@media screen and (max-width: 700px) {
    /* Basics */
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.2rem; }
    h3 { font-size: 1rem; }
    
    /* Layout */
    .content { padding-bottom: 10vw; padding-top: 10vw; }
    
    /* Content */
        /* Buttons */
        .btn, .btn-group, .btn-toolbar { display: block; margin-bottom: 0.5em; text-align: center; width: 100%; }
        
        /* Case flow diagram */
        #caseflow #description { position: static; }
        #caseflow #diagram { padding: 0; }
        
        /* Customize */
        .customize-trigger { position: static; transform: none; }
        #odc-filter-view { display: flex; }
        #odc-filter-view li { width: calc(100% / 3); }
        
        /* Decision-making point chart */
        #dmp-primary, #dmp-secondary { float: none; width: auto; }
        
        /* Filters */
        .filters-content { display: block; }
        .filters .category { width: auto !important; }
        
        /* Footer */
        #colophon { text-align: center; }
        #footer .content { display: block; }
        #subfooter-primary, #subfooter-secondary { width: auto; }
        
        /* Hero */
        .hero h1 { font-size: 1.9rem; }
        
        .hero-large .hero-overlay .content {
            align-items: flex-start;
            flex-direction: column-reverse;
        }
        
        .hero-map { width: 100px; }
        
        /* Intro */
        #intro { font-size: 1.15rem; }
        
        /* Navigation */
        #nav { display: none; }
        
        /* Play */
        .play { justify-content: center; margin: 1em 0; }
        #odc-play { width: 5em; }
        
        /* Sections */
        .section-primary, .section-secondary { float: none; width: auto; }
        
        /* State header */
        #state-header .card-body { padding: 15px; }
        #state-header .comparison { display: flex; float: none; }
        #state-header #state-nav { font-size: 0.9rem; }
}