@import url('https://fonts.googleapis.com/css?family=Libre+Franklin:400,700|Montserrat:400,700');

:root {

	/* Colors */
	--color-primary: #c62828;
	--color-black: #101010;
	--color-gray: #4a4a4a;
	--color-reggray: #777;
	--color-medgray: #ccc;
	--color-lightgray: #e9e9e9;

	/* Number of legend divisions */
	--num-legend-items-0: 10;
	--num-legend-items-1: 9;


	--legend-color-0:  rgba(255,255,204,1);
	--legend-color-1:  rgba(161,218,180,1);
	--legend-color-2:  rgba(65,182,196,1);
	--legend-color-3:  rgba(34,94,168,1);

	/* Fonts */
	--font-primary: 'Libre Franklin', sans-serif;
	--font-secondary: 'Lato', sans-serif;
	--font-tertiary: 'Montserrat', sans-serif;

	--letter-spacing: 0.5px;
	--border-radius: 3px;

}

html {
	padding: 0;
	margin: 0;
	font-size: 100%;
	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
}

body {
	margin: 0;
	padding: 0;
	font-family: var(--font-primary);
}

a {
	color: var(--color-primary);
	/* text-decoration: none; */
}

.desktop-text { display: inline; }
.mobile-text, .hidden { display: none; }


/*-------------
GRID
--------------- */

.interactive__wrapper {
	width: 100%;
	position: relative;
	font-family: var(--font-primary);
}


/*-------------
CHART
--------------- */

.year__wrapper {
	width: 100%;
	display: flex;
}

.chart__wrapper.chart-races {
	width: 100%;
}
.chart__wrapper.chart-ethnicities {
	width: 0%;
}


.year-1999 {
	padding-bottom: 1rem;
	border-bottom: 2px solid #ccc;
}

.year-2021 {
	margin-top: 1rem;
	margin-bottom: 2rem;
}

.chart-races {
	padding-right: 1rem;
}

.chart-ethnicities {
	padding-left: 1rem;
	border-left: 2px dotted #ccc;
}

.chart {
	width: 100%;
	height: 60px;
	background: white;
	margin-bottom: 8px;
}


.chart__footer table {
	margin: 0px auto;
}

/* Add some separation between the legend items */
.chart__footer table .legendLabel {
	padding-right: 0.5rem;
}



.chart__info ul li {
	font-size: 0.875rem;

}

.chart__headline,
.chart__header,
.chart__date,
.chart__subheadline,
.chart__source {
	font-family: var(--font-primary);
}

.chart__headline {
	font-size: 1.25rem;
	margin: 0;
	font-weight: 700;
	color: var(--color-gray);
	/*margin-top: 24px;*/
}

.chart__header {
	font-size: 0.875rem;
	text-transform: uppercase;
	margin: 1rem 0px 0px 0px;
	font-weight: 700;
	color: var(--color-gray);
	text-align: center;
}


.chart__date {
	margin-top: 4px;
}

.chart__subheadline {
	font-size: 1rem;
	margin-top: 4px;
}

.chart__date,
.chart__note,
.chart__credit,
.chart__source {
	font-size: 0.875rem;
}

.chart__source {
	font-style: italic;
	/*padding-bottom: 1rem;*/
	/*border-bottom: 1px solid #ddd;*/
}

.chart__controls {
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
}

.input__wrapper {
	margin: 0.5rem;
}

/*-------------
TABLE
--------------- */

.tables__wrapper {
	margin-top: 1rem;
	display: grid;
	grid-template-columns: 1fr; /* Change this depending on how many side-by-side tables you want to display */
	gap: 1rem;
}
.interactive__wrapper, .table__wrapper {
	position: relative;
	width: 100%;
}

.full-width {
	grid-column: 1 / -1;
}


.table {
	display: table;
	width: 100%;
	margin-bottom: 8px;
    border: none;
    border-collapse: inherit;
    border-spacing: 0;
}

text { font-family: "Libre Franklin", sans-serif; }


.table__footer table {
	margin: 0px auto;
}


.table__info ul li {
	font-size: 0.875rem;

}

.table__headline,
.table__header,
.table__date,
.table__subheadline,
.table__source {
	font-family: var(--font-primary);
}

.table__headline {
	font-size: 1.25rem;
	margin: 0;
	font-weight: 700;
	color: var(--color-gray);
	/*margin-top: 24px;*/
}

.table__header {
	font-size: 0.875rem;
	text-transform: uppercase;
	margin: 1rem 0px 0px 0px;
	font-weight: 700;
	/*color: var(--color-gray);*/
	text-align: center;
}


.table__date {
	margin-top: 4px;
}

.table__subheadline {
	font-size: 1rem;
	margin-top: 4px;
}

.table__date,
.table__note,
.table__credit,
.table__source {
	font-size: 0.875rem;
}

.table__credit,
.table__source {
	margin: 0.125rem 0px;
	font-size: 0.875rem;
}


.table__credit {
	text-align: right;
}


.table__source {
	font-style: italic;
	/*padding-bottom: 1rem;*/
	/*border-bottom: 1px solid #ddd;*/
}


.str-col {
	text-align: left;
}

.num-col {
	text-align: right;
}

.bar-col {
	text-align: left;
	position: relative;
	padding: 0.5rem;
}
td.bar-col .bar__wrapper {
	display: flex;
	gap: 0.5rem;
}
td.bar-col .bar-label {
	width: 2rem;
	text-align: right;
	height: 1rem;
	line-height: 1;
}

td.bar-col .bar-container {
	background: var(--color-medgray);
	height: 1rem;
}

td.bar-col.pts-12 .bar-container {
	width: 14rem;
}
td.bar-col.pts-6 .bar-container {
	width: 7rem;
}


td.bar-col .bar-container .bar {
	background: var(--color-black);
	display: block;
	height: 1rem;
}



.col-category,
.col-value,
.col-emphasize {
	padding: 0.5rem;
	border-bottom: 1px solid black;
}

.col-category {
}

th.col-value { border-left: 1px solid var(--color-reggray); }
td.col-value { border-left: 1px solid var(--color-medgray); }

td.col-emphasize {
	font-weight: 900;
	background: var(--color-lightgray);
}

th.col-category,
th.col-value,
th.col-emphasize {
	background: var(--color-gray);
	color: white;
}


/* FORM CONTROLS */
select {
	font-size: 1rem;
	padding: 0.5rem;
}


/*-------------
LEGEND (above chart)
--------------- */

.table__legend {
	display: flex;
    align-items: center;
    justify-content: center;
}

.table__legend ul {
	margin: 0.5rem 0px 0.5rem 0px;
	padding: 0;
	list-style: none;
	display: flex;
	gap: 0.875rem;
	flex-direction: row;
	justify-content: center;
}

.table__legend ul li {
	list-style: none;
	font-size: 0.875rem;
	line-height: 0.875rem;
	height: 0.875rem;
}

.table__legend ul li span {
	display: inline-block;
	width: 0.875rem;
	height: 0.875rem;
	/* border-radius: 0.875rem; */
}

.score-pct { font-weight: bold; }

.legend-color-0, .bucket-0  { opacity: var(--layer-opacity); background: var(--legend-color-0) }
.legend-color-1, .bucket-1  { opacity: var(--layer-opacity); background: var(--legend-color-1) }
.legend-color-2, .bucket-2  { opacity: var(--layer-opacity); background: var(--legend-color-2) }
.legend-color-3, .bucket-3  { opacity: var(--layer-opacity); background: var(--legend-color-3) }

.change-pos { color: #4393c3; }
.change-neg { color: #d6604d; }
.change-none { color: #878787; }


/* FORM CONTROLS */
select {
	font-size: 1rem;
	padding: 0.5rem;
}


/* RESPONSIVE */

@media (max-width: 700px) {
	#mapid {
		width: 100%;
	}
}


@media (min-width: 1400px) {
	.bar-col br {
		display: none;
	}

}

@media (max-width: 800px) {
	.table__legend {
	    align-items: center;
	    justify-content: center;
	}

	.table__legend ul {
		max-width: 100%;
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr;
	}


}

@media (max-width: 640px) {
	html {
		font-size: 87.5%;
	}

	.table__individual {
		position: relative;
		max-height: 250px;
		overflow: hidden;
		overflow-y: scroll;
	}

	.table__individual table th {
		top: 0;
		z-index: 2;
		position: sticky;
	}

	h4 {
		margin: 0px 0px 4px 0px;
		padding: 0px;
	}

	td.bar-col.pts-12 .bar-container {
		width: 8rem;
	}
	td.bar-col.pts-6 .bar-container {
		width: 4rem;
	}

	.chart__controls {
	    display: block;
	}
	.chart__wrapper.chart-races {
		width: 100%;
		padding-right: 0px;
		border-right: none;
	}
	.chart__wrapper.chart-ethnicities {
		display: none;
	}
	.desktop-only { display: none; }

}

@media (max-width: 540px) {
	.table__legend ul {
		max-width: 100%;
		display: flex;
		flex-direction: column;
	}
}