@font-face {
    font-family: "Source Sans Pro";
    src: url("../fonts/SourceSansPro-Regular.ttf") format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Source Sans Pro";
    src: url("../fonts/SourceSansPro-Regular.ttf") format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: "Source Sans Pro";
    src: url("../fonts/SourceSansPro-Light.ttf") format('truetype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: "Source Sans Pro";
    src: url("../fonts/SourceSansPro-Italic.ttf") format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: "Source Sans Pro";
    src: url("../fonts/SourceSansPro-Bold.ttf") format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: "Source Sans Pro";
    src: url("../fonts/SourceSansPro-BoldItalic.ttf") format('truetype');
    font-weight: bold;
    font-style: italic;
}


/*leave below in place commented out. Needed for grid checks.*/
/*
.row {
    border: 1px solid pink;
}

.col {
    border: 1px solid green;
}
*/
#loadingDiv {
    position: fixed;
    z-index: 200;
    width: 100%;
    top: 400px;
    left: 0;
}

#loadingDiv .loadtext {
  position: absolute;
    width:100%;
    margin-top: -90px;
    text-align: center;
    color: #e25f63;  
}

#specialreportbanner {
    background: #3069a6;
    color: red;
    color: #fff;
    padding-top: 6px;
}

#specialreportbanner h4 {
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
}

#specialreportbanner .col-md-4 {
    /*    padding: 0 1em;*/
    text-transform: uppercase;
}

#specialreportbanner .col-md-4:last-of-type {
    text-align: right;
}
.container.topcontainer {
    overflow-x: hidden;
}

#report-content {
    font-family: "Source Sans Pro", "Open Sans", Helvetica, Arial, sans-serif;
    font-size: 17px;
    /* overflow: hidden;*/
    color: #313131;
}

#report-content a {
    -webkit-transition: 600ms all;
    transition: 600ms all;
    color: #0071bc;
    text-decoration: underline;
}

.ui.custom.popup a {
    -webkit-transition: 600ms all;
    transition: 600ms all;
    color: #0071bc;
    text-decoration: underline;
}

#report-content a:hover {
    color: #188edd;
}

#report-content b,
strong {
    font-weight: 700;
}



#report-content section {
    padding: 0em 3em 0em 3em;
}

.divtitle {
    padding-bottom: 0;
    padding-top: 3em;
}

h2 {
    /* font-size: 3.6rem;*/
    font-size: 2.3rem;
    font-weight: 200;
    color: #313131;
    line-height: 1.1em;
    text-align: center;
    margin-bottom: 0;
	font-family: "Source Sans Pro", Arial,sans-serif !important;	
}


h2 a {
    text-decoration: none;
}

h2 a:hover {}

h2 .emphspan {
    font-weight: 400;
    text-transform: uppercase;
    font-size: .7em;
    letter-spacing: .03em;
    line-height: 1em;
    display: block;
}

h2 small {
    font-size: .5em;
    font-style: italic;
    line-height: 1.3rem;
    vertical-align: super;
}

h3 {
    font-size: 1em;
    letter-spacing: .027em;
    font-weight: 600;
    margin-bottom: 0;
	font-family: "Source Sans Pro", Arial,sans-serif !important;	
}

h4 {
    font-weight: 400;
    text-transform: uppercase;
    font-size: 1.2em;
    letter-spacing: 0.13em;
    text-align: center;
	font-family: "Source Sans Pro", Arial,sans-serif !important;	
}

h4.sectiontitle {
    font-weight: 400;
    text-transform: uppercase;
    font-size: 1.35em;
    letter-spacing: 0.13em;
    text-align: center;
    margin-bottom: -1em;
}

h4 span:nth-of-type(1) {
    color: #cecaca;
}

h4 a {
    text-decoration: none;
}

h4 a span:nth-of-type(1) {
    color: #cecaca;
}

h4 a span {
    color: #000;
}

h5 a {
    color: #807676;
}

h5 a:hover {
    color: #456;
}

h5 a:visited {
    color: #807676;
}

h5 a:visited:hover {
    color: #456;
}

button.btn.btn-secondary.dropdown-toggle {
    background: none;
    border: none;
    color: #313131;
    border-radius: 0;
    white-space: normal;
}

.dropdown-menu.show {
    -webkit-box-shadow: 5px 5px 20px 0px rgba(39, 39, 39, 0.14);
    box-shadow: 5px 5px 20px 0px rgba(39, 39, 39, 0.14);
    border-radius: 0;
}

#firstp {
    /*	padding-top: 4em;*/
    padding-top: 1.5em;
    line-height: 1.43em;
}

/* @media screen and (min-width: 1201px) {
    #reporttitle {
        padding-left: .7em;
        margin-left: 0;
    }
} */

#reportlogo {
    /*    padding-bottom: 2em;*/
}

@media screen and (min-width: 768px) {
    .wrapfixwide {white-space: nowrap}
    /*
    #reportlogo {
        margin-left: 16%;
        padding-bottom: 2em;
    }
*/
}

@media screen and (min-width: 1201px) {
    /*
    #reportlogo {
        margin-left: 0;
        padding-bottom: 0;
         margin-right: 0; 
        -webkit-transform: scale(1.22);
        transform: scale(1.22);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        padding-top: .2em;
        margin-left: -3em;
        margin-right: 3em;
    }
*/
}

#NCSXlogo_vert {
    margin: auto;
    width: 40%;
    display: block;
}

#NCSXlogo_horiz {
    margin: auto;
    width: 60%;
    display: block;
}

hr {
    border: none;
    height: 1px;
    color: #a7a7a7;
    background-color: #a7a7a7;
    margin-top: .5rem;
}

#mapholder {
    margin-top: 3em;
}

#mapholder h2 {
    letter-spacing: 0em;
    width: 100%;
}

#mapsection {
    padding-top: 3em;
}

#mapsection .gradtext {
    padding-top: 0.5em;
}

.highlightlist {
    line-height: 1.25em;
    font-weight: 400;
    font-size: .9em;
    font-size: 1.5em;
    position: relative;
}

.highlightlist .col-md-6,
.highlightlist li {
    position: relative;
    font-weight: 200;
}

.highlightlist li::before,
.highlightlist .col-md-6:before {
    content: "\25A0";
    color: #000;
    font-size: .65rem;
    position: absolute;
    margin-left: -1.5rem;
    line-height: .5;
    margin-top: .9rem;
}

.uptotopholder {
    position: absolute;
    left: 100%;
}

.uptotop {
    text-decoration: none;
    color: #717070;
}

a.uptotop {
    line-height: 1.2em;
    font-size: .95rem;
}

#report-content a.uptotop {
    color: #717070;
    text-decoration: none;
}

a.uptotop:visited {
    color: #676767;
}

a.uptotop:hover {
    color: #000;
}

.uparrow {
    display: inline-block;
    -webkit-transform: scaleY(0.66);
    transform: scaleY(0.66);
}

#state-compare-form {}

#state-compare-form label {
    font-size: .8em;
    font-weight: 400;
}

#state-compare-form select {
    color: green;
}

#state-compare-form select.selected {
    color: red;
}

#TOC div {
    /*    padding-right: 2em;*/
}

#report-content .tocpart a {
    color: inherit;
}

a .accordioninnertitle {
    position: relative;
}

#report-content .tocpart .title a .accordioninnertitle:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: '\f0d7';
    display: inline-block;
    position: absolute;
    left: -1em;
}

#report-content .tocpart .title a.collapsed .accordioninnertitle:before {
    content: '\f0da';
}

#TOC ul {
    font-size: .9em;
}

#TOC li {
    line-height: 1.5;
    margin-bottom: .5em;
}

#TOC li a {
    text-decoration: none;
    color: #000;
    line-height: 1.1em;
    -webkit-transition: 500ms ease all;
    transition: 500ms ease all;
}

#TOC li a:hover {
    color: #676767;
}

#TOC .tocpart {
    margin-right: 0;
    padding-top: 1.6em;
    position: relative;
}

#TOC span b {
    text-transform: uppercase;
    font-weight: 600;
    text-transform: uppercase;
    font-size: .9em;
    letter-spacing: .03em;
}

/*fix for firefox*/
.ui.accordion .accordion .title .dropdown.icon,
.ui.accordion .title .dropdown.icon {
    text-decoration: none;
}

#pctofall_section {
    padding-top: 0;
}

#victimization .highlightlist {
    padding-bottom: 1em;
}

.section:first-of-type {
    padding-bottom: 0;
}

/*end full widht highlight list*/

.sources {
    font-size: 0.8em;
    /*	darker for highrer contrast for 508*/
    color: #757575;
    padding-bottom: 1em;
    clear: both;
}

.fullchartholder {
    padding-bottom: 2em;
}

.instruct {
    padding-bottom: 1.5em;
    font-size: .9em;
    font-style: italic;
    letter-spacing: .02em;
    opacity: 1;
}

#fp-nav ul li a span,
.fp-slidesNav ul li a span {
    background: #c5bc3f;
}

#fp-nav ul li:hover .navlabel {
    opacity: 1;
}

.navlabel {
    position: absolute;
    text-align: right;
    right: 100%;
    margin-right: .6em;
    /* margin-top: .45em; */
    font-weight: 200;
    font-size: .85em;
    letter-spacing: .03em;
    opacity: 0;
    top: 0;
    margin-top: -.4em;
    -webkit-transition: 600ms all;
    transition: 600ms all;
    pointer-events: none;
}

.toptext .updatedField {
    display: none;
}

/*expander stuff*/
.chartholder {
    padding-bottom: 1rem;
    height: auto;
    border-bottom: 1px solid #ccc;
}

.chartdiv {
/* border-bottom: 1px solid #ccc;*/
}

/*this was for secondary sub-charts, likely not used with new text format*/
.chartholder:nth-of-type(2n) {
    /*	margin-top: 2em;*/
}

.controlsholder {
    border-top: 1px solid #ccc;
    padding-top: 2.3rem;
}

.controlsholder h5 {
    float: left;
    padding-right: 1em;
}

.controlsholder li {
    float: left;
    padding-right: 2em;
}

.formholder {
    position: relative;
    overflow: visible !important;
    background: #fff;
    background: #f5f1ef;
    /*    position: absolute;*/
    bottom: 0;
    overflow: hidden;
    -webkit-transition: 900s all;
    transition: 900s all;
    -webkit-transition: 1500ms all;
    border: 1px solid #ccc;
    -webkit-box-shadow: 5px 5px 20px 0px rgba(39, 39, 39, 0.14);
    box-shadow: 5px 5px 20px 0px rgba(39, 39, 39, 0.14);
    transition-timing-function: ease-out;
    -webkit-transition-timing-function: ease-out;
    z-index: 500;
    padding: 0 2em 1em 2em;
    margin-top: 2.2em;
    clear: both;
    margin-left: 60%;
    width: 100%;
    /*	for alt style     */
    /*background: #f9f9f9;*/
    border: 1px solid #dedede;
}

.expanderdiv {
    /*    width: 100%;*/
    width: 150%;
    height: 1px;
    background: #fff;
    background: #f5f1ef;
    /*    position: absolute;*/
    bottom: 0;
    overflow: hidden;
    -webkit-transition: 900s all;
    transition: 900s all;
    -webkit-transition: 1500ms all;
    border: 1px solid #ccc;
    -webkit-box-shadow: 5px 5px 20px 0px rgba(39, 39, 39, 0.14);
    box-shadow: 5px 5px 20px 0px rgba(39, 39, 39, 0.14);
    margin-left: -3rem;
    transition-timing-function: ease-out;
    -webkit-transition-timing-function: ease-out;
    z-index: 500;
    padding: 0 2em 1em 2em;
    margin-top: 2.2em;
    margin-left: -13%;
    padding-left: 13%;
    float: left;
    /*	for alt style     */
    /*		background: #f9f9f9;*/
    border: 1px solid #dedede;
}

.expanderdiv h3 {
    padding-bottom: 0;
    margin-bottom: 0;
}

.expanderdiv .sources {
    position: absolute;
    bottom: 10px;
    left: 10px;
    opacity: 0;
    -webkit-transition: 900s all;
    transition: 900s all;
}

.expanderdiv.open .sources {
    opacity: 1;
}

.open {
    height: 100%;
}

.closer {
    position: absolute;
    top: .6rem;
    right: 1rem;
    cursor: pointer;
    color: #07948f;
    border-radius: 50%;
    -webkit-transition: 500ms all;
    -webkit-transition: color 500ms;
    transition: color 500ms;
    padding: 1px;
}

.closer:hover {}


.keypoint {
    font-weight: 400;
    font-size: 1.16em;
    line-height: 1.3em;
    margin-bottom: 2em;
}

#avgage_point_male {
    white-space: nowrap;
}

#avgage_point_female {
    white-space: nowrap;
}

#diff_minorsAdults_point {
    white-space: nowrap;
}

.custom-control-label::before {
    -webkit-transform: scalex(1.2);
    transform: scalex(1.2);
}

.custom-control-label::after {
    -webkit-transform: scalex(1.2);
    transform: scalex(1.2);
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: #cc7e3b;
/*
    -webkit-box-shadow: none;
    box-shadow: none;
*/
}

.downloadlink {
    float: right;
    /*	clear: both;*/
    width: 100px;
    font-size: .7em;
    text-align: right;
    float: left;
    clear: none;
    padding-top: 1em;
}

.downloadlink a {
    text-decoration: none;
}

.downloadlink a:hover {
    -webkit-text-decoration: underline;
    text-decoration: underline;
}

.chartintro {
    padding-top: 2.6em;
    padding-bottom: 2em;
    font-size: 1.3em;
    font-weight: 200;
    line-height: 1.3;
}

@media screen and (min-width: 768px) {
    .chartholder p {
        padding-left: 3.5rem;
    }
}

.chartintro.noborder {
    border-top: none;
}

.chartintro .intro2nd {
    display: block;
    padding-top: 1em;
}

.chartintro .instruct {
    font-size: .8em;
}

/*test to see if this is still needed!*/
#highlightsection .dynamic {
    white-space: nowrap;
}

.shape {
    height: 200px;
    width: 260px;
    position: absolute;
    overflow: hidden;
}

.shape::before,
.shape::after {
    content: "";
    position: absolute;
    width: 50%;
    height: 2px;
    background: #ccc;
    top: 50%;
}

.shape::before {
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
    left: 2%;
}

.shape::after {
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform: rotate(-20deg);
    transform: rotate(-20deg);
    right: 2%;
}

/*animated loader*/
.circle {
    background-color: rgba(0, 0, 0, 0);
    border: 30px solid rgba(244, 132, 136, 0.9);
    opacity: .9;
    border-right: 30px solid rgba(0, 0, 0, 0);
    border-left: 30px solid rgba(0, 0, 0, 0);
    border-radius: 50%;
    -webkit-box-shadow: 0 0 35px #f48488;
    box-shadow: 0 0 35px #f48488;
    width: 150px;
    height: 150px;
    margin: 0 auto;
    -moz-animation: spinPulse 3s infinite ease-in-out;
    -webkit-animation: spinPulse 3s infinite linear;
}

.circle1 {
    background-color: rgba(0, 0, 0, 0);
    border: 15px solid rgba(244, 132, 136, 0.9);
    opacity: .9;
    border-left: 15px solid rgba(0, 0, 0, 0);
    border-right: 15px solid rgba(0, 0, 0, 0);
    border-radius: 50%;
    -webkit-box-shadow: 0 0 15px #f48488;
    box-shadow: 0 0 15px #f48488;
    width: 100px;
    height: 100px;
    margin: 0 auto;
    position: relative;
    top: -125px;
    -moz-animation: spinoffPulse 2s infinite linear;
    -webkit-animation: spinoffPulse 2s infinite linear;
}

@-webkit-keyframes spinPulse {
    0% {
        -webkit-transform: rotate(160deg);
        opacity: 0;
        -webkit-box-shadow: 0 0 1px #f48488;
        box-shadow: 0 0 1px #f48488;
    }

    50% {
        -webkit-transform: rotate(145deg);
        opacity: 1;
    }

    100% {
        -webkit-transform: rotate(-320deg);
        opacity: 0;
    }

    ;
}

@-webkit-keyframes spinoffPulse {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }

    ;
}

.wrap {
    display: inline-block;
    position: relative;
    bottom: .2em;
}

/*this also applies to excel download icon*/
.infodot i {
    color: rgb(154, 178, 186);
    /*	higher contrast for 508 if necc*/
    color: rgb(93, 116, 141);
    -webkit-transition: color 500ms ease-out;
    transition: color 500ms ease-out;
}

.infodot i:hover {
    color: #f48488;
}

p .infodot i {
    font-size: .85em;
}

.wrap a {
    -webkit-transition: .25s ease;
    transition: .25s ease;
}

/*for semantic-ui popups*/

.ui.popup {
    font-size: 1em;
    padding-top: 2em;
}

/*for all popups*/
.popup a {
    -webkit-transition: .25s ease;
    transition: .25s ease;
}

.wrap a:hover,
.popup a:hover {
    color: #284152;
}

/*_________*/

.radiohighlighted {
    position: relative;
}

.buttonhighlighted {
    position: relative;
}

.buttonhighlighted.active::before {
    content: "▪";
    color: #f48488;
    font-size: 1.5em;
    position: absolute;
    left: -.5em;
    top: -.25em;
}

/*for list of downloads per state at bottom of pg for 508 compliance*/

#statelinklist span {
    padding: 0 .7em 0 0;
}

#statelinklist span:nth-of-type(1) {
    padding-left: 0;
}

.stateabbrevlink {
    -webkit-transition: 700ms all;
    transition: 700ms all;
}

.stateabbrevlink a {
    display: inline-block;
    text-align: center;
}

#zipslink {
    float: right;
    margin-top: 1em;
}

#pdflink {
    float: right;
    clear: both;
    margin-top: .6em;
}

.hidden {
    display: none;
}

#statespecificnote a {
    text-decoration: none;
}

#filelinklist ul li {
    padding-top: .8rem;
}

/*methodology page*/

h2 a {
    text-decoration: none;
    margin-bottom: 0;
}

h2 a:visited {}

h2 a:hover {}

#methodologybody h4 {
    padding-bottom: 0;
    margin-bottom: 0;
    padding-top: 4em;
}

#methodologybody #NIBRS h4 {
    padding-top: 0;
}

/* .methodology #TOC {
    padding-top: 3em;
} */

#methodologybody .highlightlist {
    padding: .0em 0 1em 0;
}

/*methodology tables*/

table {}

th {
    padding: .3em;
    letter-spacing: .03em;
}

thead tr:nth-of-type(2) {
    font-size: 0.7em;
    text-transform: uppercase;
    vertical-align: bottom;
}

.chartnote {
    padding-top: 1em;
    line-height: 1.35em;
}

/*below is here as a fix for the entire note getting one hyperlink in PDF export*/
.chartnote a {
    display: inline-block;
}

.methodology .chartnote a {
    display: inline;
}

.chartintro .sources.chartnote {
    font-weight: 400;
    font-size: .62em;
    line-height: 1.2em;
    display: block;
    margin-top: -4em;
    padding-bottom: 3em;
}

.chartintro .sources.chartnote.radiohighlightkey::before {
    content: "•";
    color: #cc7e3b;
    font-size: 1.5em;
    position: absolute;
    left: -.5em;
    top: .6em;
    -webkit-transform: scaleY(.75);
    transform: scaleY(.75);
}


@media screen and (min-width: 600px) {
    thead tr:nth-of-type(2) th:first-of-type {
        width: 40%;
    }
}

td {
    padding: .3em .6em;
    font-size: .9em;
}

td {
    padding: .3em .6em;
    font-size: .9em;
    text-align: right;
}

td:first-of-type {
    text-align: left;
}

th,
td {
    border: 1px solid #ccc;
}

#report-content.methodology h2 a {
    text-decoration: none;
}

.methodology ul {
    padding-top: 1rem;
}

/* .methodology ul li {
    padding-top: 1rem;
} */

.methodology ul ul {
    padding-top: .5rem;
}

.methodology ul ul li:nth-of-type(1) {
    padding-top: 0;
}

/*for fixed back to top at bottom*/

.uptotop.final {
    position: fixed;
    bottom: 0px;
    background: #fff;
    border-top: 1px solid #ccc;
    padding-top: .7em;
    visibility: visible;
    z-index: 5;
    height: 0;
    opacity: 0;
}

.uptotop.final i {
    font-size: .85em;
    padding-left: .4em;
}

#variables li {
    padding-top: 1.5em;
}

#variables li ul li {
    padding-top: .6em;
}

thead td,
thead th {
    background-color: #f1f1f1;
}

/*keep all printbreak to none regardless.*/
#printbreak {
    display: none;
}

#printbreak2 {
    display: none;
}

#printbreak3 {
    display: none;
}