/*
The below style is adapted from this excellent responsive HTML layout:
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_responsive_media_query3
*/

* {
    box-sizing: border-box;
  }
  .menu {
    float:left;
    width:25%;
    text-align:center;
    padding:10px 10px 10px 10px;
    font-family: "Arial Nova","Helvetica",Arial,sans-serif;
  }
  .menu a {
    font-size:1.3em;
    font-weight:500;
    width:100%;

    margin:10px auto;
    position:relative;

    padding:10px 10px;
    margin-top:10px;
    display:inline-block;
    width:100%;
    color:black;
    text-decoration: none;
    border: 1px solid rgba(102, 204, 204, 0.6);

    background: -webkit-gradient(linear, left top, left bottom, color-stop(31%,rgba(102, 204, 204, 0.6)), color-stop(100%,#d3f6fe));
    background: -webkit-linear-gradient(top,  rgba(102, 204, 204, 0.6) 31%,#d3f6fe 100%);
    background: -moz-linear-gradient(top,  rgba(102, 204, 204, 0.6) 31%, #d3f6fe 100%);
    background: -o-linear-gradient(top,  rgba(102, 204, 204, 0.6) 31%,#d3f6fe 100%);
    background: -ms-linear-gradient(top,  rgba(102, 204, 204, 0.6) 31%,#d3f6fe 100%);
    background: linear-gradient(to bottom,  rgba(102, 204, 204, 0.6) 31%,#d3f6fe 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(102, 204, 204, 0.6)', endColorstr='#d3f6fe', GradientType=0);

    -webkit-border-radius: 0.75rem;
    -moz-border-radius: 0.75rem;
  }
  .menu a:hover, a:active {
    font-weight:600;
    background-color:rgba(102, 204, 204, 0.8);
    color:black;
  }
  .main {
    float:left;
    width:75%;
    padding:0 35px;
  }
  .chart {
    width:100%;
    height:100%;
    /* display:flex; */
    align-items:center;
  }
  .container {
    position:relative;
    width:100%;
    max-width:1280px;
    margin:0 auto;
    padding:0 20px;
    box-sizing:border-box;
  }
  .mainheader {
    /* background-color: #efefef; */
    /* position:fixed; */
    margin:0;
    padding:0;
    right: 0;
    top: 0;
    left: 0;
    width:100%;
    text-align:left;
  }
  .mainfooter {
    /* background-color: #efefef; */
    margin:0 auto;
    padding:0;
    bottom: 10px;
    right:10px;
  }
  .mainfooter p {
    bottom:10px;
    right:10px;
    text-align:right;
    font-size:0.8em;
    color:#515151;
  }
  
@media only screen and (max-width:1080px) {
    /* For mobile phones: */
    .menu, .main, .right {
        font-size:1.2em;
        width:100%;
        padding:10px 10px;
    }
}

/* Rest of this style below is from the Plotly Dash source.*/

.column, .columns {
    width:100%;
    float:left;
    box-sizing:border-box
}

@media (min-width:400px) {
    .container{
        width:85%;
        padding:0
    }
}

@media (min-width:550px) {
    .container {
        width:80%
    }
    .column,.columns {
        margin-left:4%
    } 
    .column:first-child, .columns:first-child {
        margin-left:0
    }
    .one.column, .one.columns {
        width:4.66666666667%
    }
    .two.columns {
        width:13.3333333333%
    }
    .three.columns {
        width:22%
    }
    .four.columns {
        width:30.6666666667%
    }
    .five.columns {
        width:39.3333333333%
    }
    .six.columns {
        width:48%
    }
    .seven.columns {
        width:56.6666666667%
    }
    .eight.columns {
        width:65.3333333333%
    }
    .nine.columns {
        width:74%
    }
    .ten.columns {
        width:82.6666666667%
    }
    .eleven.columns {
        width:91.3333333333%
    }
    .twelve.columns {
        width:100%;
        margin-left:0
    }
    .one-third.column {
        width:30.6666666667%
    }
    .two-thirds.column {
        width:65.3333333333%
    }
    .one-half.column {
        width:48%
    }
    .offset-by-one.column, .offset-by-one.columns {
        margin-left:8.66666666667%
    }.offset-by-two.column, .offset-by-two.columns { 
        margin-left:17.3333333333%
    }
    .offset-by-three.column, .offset-by-three.columns {
        margin-left:26%
    } 
    .offset-by-four.column, .offset-by-four.columns {
        margin-left:34.6666666667%
    }
    .offset-by-five.column, .offset-by-five.columns {
        margin-left:43.3333333333%
    }
    .offset-by-six.column, .offset-by-six.columns {
        margin-left:52%
    }
    .offset-by-seven.column, .offset-by-seven.columns {
        margin-left:60.6666666667% 
    }
    .offset-by-eight.column, .offset-by-eight.columns {
        margin-left:69.3333333333%
    }
    .offset-by-nine.column, .offset-by-nine.columns {
        margin-left:78%
    }
    .offset-by-ten.column, .offset-by-ten.columns {
        margin-left:86.6666666667%
    }
    .offset-by-eleven.column, .offset-by-eleven.columns {
        margin-left:95.3333333333%
    }
    .offset-by-one-third.column, .offset-by-one-third.columns {
        margin-left:34.6666666667%
    }
    .offset-by-two-thirds.column, .offset-by-two-thirds.columns {
        margin-left:69.3333333333%
    }
    .offset-by-one-half.column, .offset-by-one-half.columns {
        margin-left:52%
    }
}

html {
    font-size:62.5%
}

body{
    font-size:1.5em;
    line-height:1.3;
    font-weight:400;
    font-family:"Arial Nova","Helvetica",Arial,sans-serif;
    color:#222
}
    
h1, h2, h3, h4, h5, h6 {
    margin-top:0;
    margin-bottom:2rem;
    font-weight:450;
}

h1 {
    font-size:3.2rem;
    line-height:1.3;
    letter-spacing:-.1rem;
    margin-top:10px
}

h2 {
    font-size:2.7rem;
    line-height:1.25;
    letter-spacing:-.1rem;
    margin-top:10px;
    color:#ff3366;
}

h3 {
    font-size:2.2rem;
    line-height:1.2;
    letter-spacing:-.1rem
}

h4 {
    font-size:1.8rem;
    line-height:1.1;
    letter-spacing:-.08rem;
}

h5 {
    font-size:1.5rem;
    line-height:1.1;
    letter-spacing:-.05rem
}

h6 {
    font-size:1.2rem;
    line-height:1.0;
    letter-spacing:0
}

smalltext {
    font-size:90%;
}

@media (min-width:550px) {
    h1 {
        font-size:5rem
    }
    h2 {
        font-size:4.2rem
    }
    h3 {
        font-size:3.6rem
    }
    h4 {
        font-size:3rem
    } 
    h5 {
        font-size:2.4rem
    }
    h6 {
        font-size:1.5rem}
    }
    p {
        margin-top:0;
        margin-left:5px;
        font-size:1.8rem;
        color:#515151;
    }
    a {
        color:#37649b;
        text-decoration:none;
    }
    a:hover {
        color:#757575;
        text-decoration:none;
        background-color:#ececec;
    }

    .custom-multi-dropdown .Select--multi .Select-value {
        background-color:rgba(102, 204, 204, 0.2);
        border-color:#bbb;
        color:#252525;
    }

    .button, button, input[type=button], input[type=reset], input[type=submit] {
        display:inline-block;
        height:38px;
        padding:0 30px;
        color:black;
        text-align:center;
        font-size:11px;
        font-weight:600;
        line-height:38px;
        letter-spacing:.1rem;
        text-transform:uppercase;
        text-decoration:none;
        white-space:nowrap;
        background-color:rgba(102, 204, 204, 0.8);
        border-radius:4px;
        border:1px solid #bbb;
        cursor:pointer;
        box-sizing:border-box
    }
    
    .button:focus, .button:hover, button:focus, button:hover, input[type=button]:focus, input[type=button]:hover, input[type=reset]:focus, input[type=reset]:hover, input[type=submit]:focus, input[type=submit]:hover {
        color:black;
        font-weight:600;
        border-color:black;
        background-color:rgba(102, 204, 204, 0.4);
        outline:0
    }
    
    .button.button-primary, button.button-primary, input[type=button].button-primary, input[type=reset].button-primary, input[type=submit].button-primary {
        color:#FFF;
        background-color:rgba(102, 204, 204, 0.4);;
        border-color:#33C3F0
    }
    
    .button.button-primary:focus, .button.button-primary:hover, button.button-primary:focus, button.button-primary:hover, input[type=button].button-primary:focus, input[type=button].button-primary:hover, input[type=reset].button-primary:focus, input[type=reset].button-primary:hover, input[type=submit].button-primary:focus, input[type=submit].button-primary:hover {
        color:#FFF;
        background-color:white;
        border-color:#888
    }
    
    input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=url], select, textarea {
        height:38px;
        padding:6px 10px;
        background-color:#fff;
        border:1px solid #D1D1D1;
        border-radius:4px;
        box-shadow:none;
        box-sizing:border-box;
    }
    
    input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=url], textarea {
        -webkit-appearance:none;
        -moz-appearance:none;
        appearance:none;
    }

    textarea {
        min-height:65px;
        padding-top:6px;
        padding-bottom:6px;
        color:#515151;
    }
    
    input[type=email]:focus, input[type=number]:focus, input[type=password]:focus, input[type=search]:focus, input[type=tel]:focus, input[type=text]:focus, input[type=url]:focus, select:focus, textarea:focus {
        border:1px solid #33C3F0;
        outline:0
    }
    
    label,legend {
        display:block;
        margin-bottom:.5rem;
        font-weight:600
    }
    
    fieldset{
        padding:0;
        border-width:0
    }
    input[type=checkbox], input[type=radio] {
        display:inline
    }
    
    label>.label-body {
        display:inline-block;
        margin-left:.5rem;
        font-weight:400
    }
    
    ul {
        list-style:circle inside;
        float:left;
        display:inline;
        color:#515151;
    }

    ol {
        list-style:decimal inside;
        float:left;
        display:inline;
        color:#515151;
    }

    ol ol,ol ul,ul ol,ul ul {
        font-size:95%;
    }
    
    li {
        margin-bottom:1rem
    }

    code {
        padding:.2rem .5rem;
        margin:0 .2rem;
        font-size:90%;
        white-space:nowrap;
        background:#F1F1F1;
        border:1px solid #E1E1E1;
        border-radius:4px
    }
    
    pre>code {
        display:block;
        padding:1rem 1.5rem;
        white-space:pre
    }
    
    td,th {
        padding:0px 5px;
        text-align:left;
        font-size:1.1em
    }
    
    td:first-child, th:first-child {
        padding-left:0
    }
    
    td:last-child, th:last-child {
        padding-right:0
    }
    
    .button, button {
        margin-bottom:1rem
    }
    
    fieldset, input, select, textarea {
        margin-bottom:1.5rem
    }
    
    blockquote, dl, figure, form, ol, p, pre, table, ul {
        margin-bottom:2rem
    }
    
    .u-full-width {
        width:100%;box-sizing:border-box
    }
    
    .u-max-full-width {
        max-width:100%;
        box-sizing:border-box
    }
    
    .u-pull-right {
        float:right
    }
    
    .u-pull-left {
        float:left
    }
    
    hr {
        margin-top:3rem;
        margin-bottom:3.5rem;
        border-width:0;
        border-top:1px solid #E1E1E1
    }
    
    .container:after, .row:after, .u-cf {
        content:"";
        display:table;
        clear:both
    }

    .dropdown {
        text-align:center;
        vertical-align:middle;
        font-size:1.2em;
        /* font-weight:bold; */
    }