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

/* 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
 */

.ddk-container .Select-menu-outer {
    z-index: 1002;
}


.ddk-container ._dash-undo-redo {
    display: none;
}

.ddk-container ._dash-loading {
    text-align: center;
    font-family: sans-serif;
    margin-top: 20px;
}

.ddk-container .card:not(.card--content).card-box-shadow-hover:hover {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.ddk-container ::-webkit-scrollbar {
    width: 0.7em;
}

.ddk-container ::-webkit-scrollbar-thumb {
  /* using var(--) here is OK because IE11 is not webkit */
  background-color: var(--accent-faded);
}

.ddk-container ::-webkit-scrollbar-corner {
    background-color: transparent;
}

/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* For devices larger than 550px */
@media (min-width: 550px) {
  .ddk-container .one.column,
  .ddk-container .one.columns                    { width: calc(100% / 12); }
  .ddk-container .two.columns                    { width: calc(100% / (12 / 2)); }
  .ddk-container .three.columns                  { width: calc(100% / (12 / 3)); }
  .ddk-container .four.columns                   { width: calc(100% / (12 / 4)); }
  .ddk-container .five.columns                   { width: calc(100% / (12 / 5)); }
  .ddk-container .six.columns                    { width: calc(100% / (12 / 6)); }
  .ddk-container .seven.columns                  { width: calc(100% / (12 / 7)); }
  .ddk-container .eight.columns                  { width: calc(100% / (12 / 8)); }
  .ddk-container .nine.columns                   { width: calc(100% / (12 / 9)); }
  .ddk-container .ten.columns                    { width: calc(100% / (12 / 10)); }
  .ddk-container .eleven.columns                 { width: calc(100% / (12 / 11)); }
  .ddk-container .twelve.columns                 { width: 100%; }
}

/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* TODO: optimal base sizing
   all rem font-sizes relative to this base font size
    formula: https://www.madebymike.com.au/writing/fluid-type-calc-examples/
 */
.ddk-container html {
    font-size: 10px;
}


.ddk-container body {
  line-height: 1.35;
  font-weight: 400;
  font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: rgb(50, 50, 50);
}

/* Typography & spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.ddk-container h1, .ddk-container h2, .ddk-container h3, .ddk-container h4, .ddk-container h5, .ddk-container h6 {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 300;
  letter-spacing: 0;
  margin-bottom: 1.2em;
  margin-top: 2.2em;
}
.ddk-container h1 {
    font-size: 2.5em;

    /*
     * smaller than the rest of the h since
     * it's usually the first thing on the page.
     */
    margin-top: 1.2em;
}

.ddk-container h2 { font-size: 1.6em;}
.ddk-container h3 { font-size: 1.4em;}
.ddk-container h4 { font-size: 1.3em;}
.ddk-container h5 { font-size: 1.2em;}
.ddk-container h6 { font-size: 1.1em;}

.ddk-container li p {
    display: inline;
}

/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.ddk-container .button:not(.btn):not([type="button"]),
.ddk-container .button:not(.btn):not([type="button"]) {
  margin-bottom: 0rem; }
.ddk-container input,
.ddk-container textarea,
.ddk-container select,
.ddk-container fieldset {
  margin-bottom: 0rem; }
.ddk-container pre,
.ddk-container dl,
.ddk-container figure,
.ddk-container table,
.ddk-container form {
  margin-bottom: 0rem; }
.ddk-container pre {
    margin: 0;
}
.ddk-container p
ul,
.ddk-container ol {
  margin-bottom: calc(1.5em / 1.9em);
  margin-top: calc(1.5em / 1.9em);
}


/* Blockquotes
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.ddk-container.ddk-container blockquote {
  border-left: 4px lightgrey solid;
  padding-left: 1rem;
  margin-top: calc(2em / 1.9em);
  margin-bottom: calc(2em / 1.9em);
  margin-left: 0rem;
  font-size: 90%;
}


/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.ddk-container a {
  color: #1EAEDB;
  text-decoration: none;
  cursor: pointer;
}
.ddk-container a:hover {
  color: #0FA0CE;
  text-decoration: underline;
}


/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.ddk-container .button:not(.btn):not([type="button"]),
.ddk-container button:not(.btn):not([type="button"]),
.ddk-container input[type="submit"],
.ddk-container input[type="reset"],
.ddk-container input[type="button"] {
  display: inline-block;
  min-height: 37px;
  padding: .2em 2em;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #555;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  line-height: 2em;
  letter-spacing: .1rem;
  text-transform: uppercase;
  text-decoration: none;
  background-color: transparent;
  border-radius: 4px;
  border: 1px solid #bbb;
  cursor: pointer;
  box-sizing: border-box; }
/*
 * workaround for OSX FF text alignment
 * see https://bugzilla.mozilla.org/show_bug.cgi?id=480196
 */
@supports (-moz-osx-font-smoothing: auto) {
  .ddk-container .button:not(.btn):not([type="button"]),
  .ddk-container button:not(.btn):not([type="button"]),
  .ddk-container input[type="submit"],
  .ddk-container input[type="reset"],
  .ddk-container input[type="button"] {
    padding-top: 0.5em; }
}
.ddk-container .button:not(.btn):not([type="button"]):hover,
.ddk-container button:not(.btn):not([type="button"]):hover,
.ddk-container input[type="submit"]:hover,
.ddk-container input[type="reset"]:hover,
.ddk-container input[type="button"]:hover,
.ddk-container .button:not(.btn):not([type="button"]):focus,
.ddk-container button:not(.btn):not([type="button"]):focus,
.ddk-container input[type="submit"]:focus,
.ddk-container input[type="reset"]:focus,
.ddk-container input[type="button"]:focus {
  color: #333;
  border-color: #888; }
.ddk-container .button:not(.btn):not([type="button"]).button-primary,
.ddk-container button:not(.btn):not([type="button"]).button-primary,
.ddk-container input[type="submit"].button-primary,
.ddk-container input[type="reset"].button-primary,
.ddk-container input[type="button"].button-primary {
  color: #FFF;
  background-color: #33C3F0;
  border-color: #33C3F0; }
.ddk-container .button:not(.btn):not([type="button"]).button-primary:hover,
.ddk-container button:not(.btn):not([type="button"]).button-primary:hover,
.ddk-container input[type="submit"].button-primary:hover,
.ddk-container input[type="reset"].button-primary:hover,
.ddk-container input[type="button"].button-primary:hover,
.ddk-container .button:not(.btn):not([type="button"]).button-primary:focus,
.ddk-container button:not(.btn):not([type="button"]).button-primary:focus,
.ddk-container input[type="submit"].button-primary:focus,
.ddk-container input[type="reset"].button-primary:focus,
.ddk-container input[type="button"].button-primary:focus {
  color: #FFF;
  background-color: #1EAEDB;
  border-color: #1EAEDB; }


/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.ddk-container input:not([type]):not(.form-control),
.ddk-container input[type="email"]:not(.form-control),
.ddk-container input[type="number"]:not(.form-control),
.ddk-container input[type="search"]:not(.form-control),
.ddk-container input[type="text"]:not(.form-control),
.ddk-container input[type="tel"]:not(.form-control),
.ddk-container input[type="url"]:not(.form-control),
.ddk-container input[type="password"]:not(.form-control),
.ddk-container textarea:not(.form-control),
.ddk-container select:not(.form-control) {
  height: 38px;
  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
  background-color: #fff;
  border: 1px solid #D1D1D1;
  border-radius: 4px;
  box-shadow: none;
  box-sizing: border-box;
  font-family: inherit;
  color: inherit;
  font-size: inherit; /*https://stackoverflow.com/questions/6080413/why-doesnt-input-inherit-the-font-from-body*/}
/* Removes awkward default styles on some inputs for iOS */
.ddk-container input[type="email"],
.ddk-container input[type="number"],
.ddk-container input[type="search"],
.ddk-container input[type="text"],
.ddk-container input[type="tel"],
.ddk-container input[type="url"],
.ddk-container input[type="password"],
.ddk-container textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; }
.ddk-container textarea:not(.form-control) {
  min-height: 65px;
  padding-top: 6px;
  padding-bottom: 6px; }
.ddk-container input[type="email"]:focus,
.ddk-container input[type="number"]:focus,
.ddk-container input[type="search"]:focus,
.ddk-container input[type="text"]:focus,
.ddk-container input[type="tel"]:focus,
.ddk-container input[type="url"]:focus,
.ddk-container input[type="password"]:focus,
.ddk-container textarea:focus,
.ddk-container select:focus {
  border: 1px solid #33C3F0; }
.ddk-container label,
.ddk-container legend {
  display: block;
  margin-bottom: 0px; }
.ddk-container fieldset {
  padding: 0;
  border-width: 0; }
.ddk-container input[type="checkbox"],
.ddk-container input[type="radio"] {
  display: inline; }
.ddk-container label > .label-body {
  display: inline-block;
  margin-left: .5rem;
  font-weight: normal; }
.ddk-container input:disabled {
    cursor: not-allowed;
}
.ddk-container input {
    overflow: hidden;
    text-overflow: ellipsis;
}
.ddk-container input::placeholder {
    overflow: hidden;
    text-overflow: ellipsis;
}
.ddk-container label > input[type="radio"]:hover,
.ddk-container label > input[type="checkbox"]:hover {
    cursor: pointer;
}

/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.ddk-container ul {
  list-style: circle outside; }
.ddk-container ol {
  list-style: decimal outside; }
.ddk-container ol, .ddk-container ul {
  padding-left: 0;
  margin-top: 0; }
.ddk-container ul ul,
.ddk-container ul ol,
.ddk-container ol ol,
.ddk-container ol ul {
  margin: 1.5rem 0 1.5rem 3rem;
  font-size: 90%; }
.ddk-container li {
  margin-bottom: 1rem;
  margin-left: 20px;
  padding-left: 5px;
}


/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.ddk-container table {
  border-collapse: collapse;
}
.ddk-container th,
/* not a fan of this entire block */
.ddk-container td:not(.CalendarDay) {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #E1E1E1; }
.ddk-container th:first-child,
.ddk-container td:first-child {
  padding-left: 0; }
.ddk-container th:last-child,
.ddk-container td:last-child {
  padding-right: 0; }

/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.ddk-container hr {
  margin-top: 3rem;
  margin-bottom: 3rem;
  border-width: 0;
  border-top: 1px solid #E1E1E1; }