/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––
- Plotly.js
- Grid
- Base Styles
- Typography
- Links
- Buttons
- Forms
- Lists
- Code
- Tables
- Spacing
- Utilities
- Clearing
- Media Queries

*/

/* PLotly.js
–––––––––––––––––––––––––––––––––––––––––––––––– */
/* plotly.js's modebar's z-index is 1001 by default
 * https://github.com/plotly/plotly.js/blob/7e4d8ab164258f6bd48be56589dacd9bdd7fded2/src/css/_modebar.scss#L5
 * In case a dropdown is above the graph, the dropdown's options
 * will be rendered below the modebar
 * Increase the select option's z-index

 */

/* This was actually not quite right -
   dropdowns were overlapping each other (edited October 26)

.Select {
    z-index: 1002;
}*/

/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}


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

/* For devices larger than 400px */
/* @media (min-width: 400px) {
  .container {
    width: 85%;
    padding: 0;
  }
} */

/* For devices larger than 1200px */
@media (min-width: 1200px) {
  .container {
    width: 90%;
  }
  /* .column,
  .columns {
    margin-left: 2%;
  } */

  .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: 76%;
  }
  .ten.columns {
    width: 82.6666666667%;
  }
  .eleven.columns {
    width: 91.3333333333%;
  }
  .twelve.columns {
    /* width: 97.666666667%; */
    width: 100%;
    /* margin-left: 0; */
  }

  .one-third.column {
    width: 30.6666666667%;
  }
  .two-thirds.column {
    width: 65.3333333333%;
  }

  .one-half.column {
    width: 48%;
  }

  /* Offsets */
  .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%;
  }
}


/* Larger than mobile, screen sizes larger than 400px */
@media (min-width: 400px) {
}

/* Larger than phablet (also point when grid becomes active), screen larger than 550px */
@media (min-width: 550px) {
  /* .one.column,
  .one.columns {
    width: 8%;
  }
  .two.columns {
    width: 16.25%;
  }
  .three.columns {
    width: 22%;
  }
  .four.columns {
    width: calc(100% / 3);
  }
  .five.columns {
    width: calc(100% * 5 / 12);
  }
  .six.columns {
    width: 49.75%;
  }
  .seven.columns {
    width: calc(100% * 7 / 12);
  } */
}

/* Larger than tablet, for screens smaller than 768px */
@media (max-width: 1200px) {
  .flex-display {
    display: block !important;
  }
  .pretty_container {
    margin: 0 !important;
    margin-bottom: 25px !important;
  }
  #individual_graph,
  #count_graph,
  #aggregate_graph {
    position: static !important;
  }
  .container-display {
    display: flex;
  }

  .mini_container {
    margin-bottom: 25px !important;
    border-radius: 5px;
    background-color: #f9f9f9;
    padding: 15px;
    position: relative;
    box-shadow: 2px 2px 2px lightgrey;
    flex:1;
  }
  #plotly-image {
    margin-bottom: 0px !important;
    height: 45px !important;
  }
  #learn-more-button {
    margin-top: 0px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
  }
  #button {
    display: flex;
    justify-content: center;
  }
  #title {
    margin-bottom: 10px;
  }
  h3 {
    font-size: 2.5rem;
  }
  h5 {
    font-size: 2rem;
  }
  h6 {
    font-size: 1.25rem;
  }
  p {
    font-size: 12px;
  }
}

/* Larger than desktop */
/* @media (min-width: 1000px) {
  .one.column,
  .one.columns {
    width: 8%;
  }
  .two.columns {
    width: 16.25%;
  }
  .three.columns {
    width: 22%;
  }
  .four.columns {
    width: calc(100% / 3);
  }
  .five.columns {
    width: calc(100% * 5 / 12);
  }
  .six.columns {
    width: 49.75%;
  }
  .seven.columns {
    width: calc(100% * 7 / 12);
  }
  .eight.columns {
    width: calc(100% * 2 / 3);
  }
  .nine.columns {
    width: 75%;
  }
} */

/* Larger than Desktop HD */
/* @media (min-width: 1200px) {
} */