.graphbox {
    background: white;
    margin: 0 0 25px 0;
    padding: 0 0 28px 0;
    position: relative;
    box-shadow: 0 0 10px 0 rgb(0 0 0 / 15%);
    border-top: 5px solid #005b99;
    box-sizing: border-box;
}

.graphbox h3 {
    margin: 0;
    color: #005b99;
    padding: 15px 20px;
    background-color: #f0f2f5;
    text-transform: uppercase;
}

.graphbox .switch {
    position: absolute;
    left: 0px;
    bottom: 15px;
    z-index: 1;
}

.graphbox .switch .daq-booleanswitch--light__label {
    align-items: flex-end;
}

.graphbox .switch .daq-booleanswitch--light__label label {
    /* writing-mode: vertical-lr; */
    /* display: none; */
    background: white;
    z-index: 1;
    position: absolute;
    left: 57px;
    width: max-content;
    bottom: -1px;
    margin: 0;
}

.graphbox .switch .daq-booleanswitch--light__label:hover label {
    display: block;
}

.graphbox .switch .daq-booleanswitch--light {
    height: 14px;
}

.graphbox .switch .daq-booleanswitch--light__background {
    border: 1px solid #6cc24a;
    background-color: white;
    background-color: #6cc24a;
    border-radius: 8px;
    border-radius: 0 8px 8px 0;
    width: 40px;
    margin: 0;
}

.graphbox .switch:hover .daq-booleanswitch--light__background button {
    background-color: #428229;
}

.graphbox .switch .daq-booleanswitch--light__button {
    width: 14px;
    height: 14px;
    border: 2px solid darkgreen;
    background: rgba(255,255,255,0.5);
}

.graphbox .columns {
    margin: 10px 15px 0 15px;
}

/* FORM */
.graphnav {
    background: white;
    padding: 25px 0em 25px 420px;
    position: relative;
    min-height: 230px;
    margin-bottom: 3.3em;
}

.graphnav h2 {
    background: #005b99;
    color: white;
    float: left;
    height: 100%;
    position: absolute;
    left: 0;
    width: 400px;
    padding: 25px;
    box-sizing: border-box;
    top: 0;
    margin: 0;
}

.graphnav .Select {
    max-width: 30em;
}

.graphnav .Select .Select-control {
    border: none;
    box-shadow: rgb(60 66 87 / 16%) 0px 0px 0px 1px;
}

.graphnav .Select.is-focused .Select-control {
    box-shadow: rgb(58 151 212 / 36%) 0px 0px 0px 4px, rgb(60 66 87 / 16%) 0px 0px 0px 1px;
}

.graphnav .Select--multi.Select--multi .Select-value.Select-value {
    background-color: #ffffff;
    border: 1px solid #e1e1e1;
    color: #696464;
}

.graphnav .Select--multi.Select--multi .Select-value-icon.Select-value-icon {
    border-right-color: #e1e1e1;
}

.graphnav .Select-menu-outer {
    background-color: #fff;
    border: none;
    box-shadow: rgb(58 151 212 / 36%) 0px 8px 0px 4px, rgb(60 66 87 / 16%) 0px 2px 0px 1px;
    border-top-color: #e6e6e6;
    margin-top: 0px;
    border-radius: 0;
}

.graphnav label {
    margin-bottom: 12px;
}

/* END FORM */
body {
    margin: 0;
}

.js-plotly-plot .plotly .modebar {
    left: 0px;
}

.js-plotly-plot .plotly .modebar .modebar-group {
    padding-left: 0px;
    padding-right: 8px;
}

.footer{
    margin: 20px auto 0;
    width: 1200px;
    box-sizing: border-box;
    background-color: white;
    padding: 25px 30px;
}

.footer a {
    margin-right: 10px;
}