body {
    background-color: white;
    font-family: sans-serif;
}

main {
    margin: 1em;
}

/*header {
    margin-top: 1em;
    display: flex;
    justify-content: space-between; !* with only two elements, pushes the first all the way left, the 2nd right *!
    align-items: baseline;
    border-bottom: 1px solid #999;
    padding-bottom: 15px;
}*/

.nav {
    padding-bottom: 16px;
}

.chart-container__proto,
.chart-container {
    margin-top: 20px;
    max-width: 775px;
    /*max-width: 1116px;*/
}

.chart-page__page-header {
    margin-bottom: 0;
}

.chart-page__page-subheader {
    color: #999999;
    padding-left: 3px;
}

.widgets-container {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    align-items: center;
}

.widget {
    display: inline-block;
    text-align: center;
    position: relative;
    margin-left: 1.5em;
    margin-right: 1.5em;
    margin-top: 1em;
}

.widget-wrapper {
    max-width: 300px;
    max-height: 200px;
    text-align: center
}

.ra-widget-header {
    margin-bottom: 0;
    font-size: 1.3em;
}

.widget__arrow-right {
    font-size: 50px;
    color: #aaaaaa;
}

.widget-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.widget.circle {
    border-radius: 100%;
    width: 150px;
    height: 150px;
}

.widget-number {
    font-size: 2.5em;
}

.widget-1 {
    background-color: #22577a;
    color: white;
}

.widget-2 {
    background-color: #38a3a5;
    color: white;
}

.widget-3 {
    background-color: #db7c26;
    /*background-color: #57cc99;*/
    color: white;
}

.widget-4 {
    background-color: #e0bb05;
    color: white;
}

.widget-5 {
    background-color: #52b663;
    color: white;
}

.widget-6 {
    background-color: rgba(125, 121, 121, 0.5);
    color: black;
}

.widget-7 {
    background-color: #ab1d02;
    color: white;
}

h2, h3 {
    margin-top: 1em;
}

section > h3.overview-subheader:first-of-type {
    margin-top: 0;
}

h3 {
    margin-bottom: 1em;
}

.overview-subheader {
    color: #807f7f;
    margin-bottom: 1em;
    margin-top: 2em;
}

section {
    margin-bottom: 30px;
}

.light-grey {
    color: #999999;
}

.chart-container__proto h4,
.chart-container h4 {
    color: #999;
}

.page-section {
    border-top: 1px solid #CCCCCC;
}

.project-overview h4 {
    color: #999999;
}

.chart-subheader_small {
    font-size: 1em;
}

.discussion-box {
    display: inline-block;
    border: 1px solid black;
    margin: 1em;
    padding: 0.5em;
}

.chart-subheader {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chart-max-value {
    color: darkred;
    border: 1px solid darkred;
    font-weight: bold;
    display: inline-block;
    padding: 0.5em;
    margin: 0.5em;
    transition: background-color 1000ms linear;
}

.chart-title h3 {
    margin-bottom: 0.5em;
}

.chart__selected-filter {
    color: rgb(128, 127, 127);
}