/* 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;
}*/
/* Removing highlight functionality

.dash-spreadsheet-container .dash-spreadsheet-inner table {
        border-collapse: collapse;
        font-family: monospace;
        --accent: transparent  !important;
        --border: transparent !important;
        --text-color: transparent !important;
        --hover: transparent !important;
        --background-color-ellipses: transparent !important;
        --faded-text: transparent !important;
        --faded-text-header: transparent !important;
        --selected-background: transparent !important;
        --faded-dropdown: transparent !important;
        --muted: transparent !important;
    }*/
/* Footer
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
@media print {
    .footer {
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 20%;
        text-align: left;
        background-color: transparent; 
        padding-top: 120px; 
    }
}
@media print {
.pg2-table-plot-box-lgeo{
    margin: 0;
}
}
*/

.footer {
    max-width: 90%;
}


.footer-image {
    max-width: 90%;
    height: auto;
}


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

/* Banner
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.banner {
    height: 75px;
    margin: 0px -10px 10px;
    border-radius: 2px;
}

.banner h2{
    /* color: white;*/
    padding-top: 10px;
    margin-left: 2%;
    display: inline-block;
}

.banner Img{
    position: relative;
    float: right;
    right: 10px;
    height: 80px;
    padding-bottom: 40px;
}

/* Sidebar
–––––––––––––––––––––––––––––––––––––––––––––––––– */


.sidebar {
  display: block;
  width: 16.5%; 
  display: inline-block;
  position: relative;
  background-color: #fffced !important;
}

.menuBox {
  font-family: 'proxima_nova_rgregular';
  font-size: 15px;
  color: #0B4952;
  padding-bottom: 15pt;
  padding-left: 0.5%;
  position: fixed;
  top: 20px;
}

.menuItems {
  padding-bottom: 20pt;
}

.menuTexts {
  color: #0B4952;
}

/* Dashboard
–––––––––––––––––––––––––––––––––––––––––––––––––– */

Strong, h1, h2, h3, h4, h5, h6 {
    font-family: "Open Sans"
}

div { font-size: 13px; }

.text-muted {
  font-size: 14px;
  font-family: 'Open Sans'
}


#all-geo-dropdown .Select-value {
    color: #000000 !important;
    opacity: 1.0 !important;
}

#all-geo-dropdown .Select.is-open.is-focused .Select-value {
    color: #a0a0a0 !important;
    opacity: 0.2 !important;
}


/* Show the input field when focused */
#all-geo-dropdown .Select.is-open.is-focused .Select-input input {
    display: block !important;
    width: 200px !important;
}
/*
#all-geo-dropdown .Select.is-focused .Select-input input::placeholder {
    display: block !important;
    color: #a0a0a0 !important;
    opacity: 0.8 !important;
}/*

#all-geo-dropdown.is-focused .Select-arrow-zone,
#all-geo-dropdown .Select.is-focused .Select-arrow-zone {
    position: relative !important;
    width: 30px !important;
}


/* Add magnifying glass icon to arrow zone when focused 
#all-geo-dropdown .Select.is-focused .Select-arrow-zone {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
}*/

#all-geo-dropdown .Select.is-open.is-focused .Select-arrow-zone::after {
    content: "🔍︎" !important;
    font-size: 15px !important;
    color: #666 !important;
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;  
    transform: translateY(-50%) !important;
    pointer-events: none !important;
     z-index: 5 !important;
}

/* Hide clear button when focused */
#all-geo-dropdown .Select.is-open.is-focused .Select-clear, 
#all-geo-dropdown .Select.is-open.is-focused .Select-arrow {
    display: none !important;
}

/* Placeholder styling 
#all-geo-dropdown .Select-placeholder {
    color: #a0a0a0 !important;
    opacity: 0.8 !important;
}*/

/* Make the placeholder visible when focused 
#all-geo-dropdown .Select.is-focused .Select-placeholder {
    display: block !important;
    color: #a0a0a0 !important;
    opacity: 0.8 !important;
}*/

.export-pdf {
  background-color: #C97A63;
  border-color: #C97A63;
  color: white;
  font-family: 'Open Sans';
}

.export-pdf:hover {
  color: black !important;
  background-color: transparent !important;
  cursor: pointer;
  border-color: #C97A63 !important;
  box-shadow: none !important;
}

/*#80875C*/
.green-toggle .form-check-input:checked {
        background-color: #D0B46A !important;
        border-color: #D0B46A !important;
    }
    .green-toggle .form-check-input:checked:focus {
        border-color: #D0B46A !important;
        box-shadow: 0 0 0 0.25rem rgba(128, 135, 92, 1) !important;
    }


.export-xlsx-btn {
  background-color: #C97A63;
  border-color: #C97A63;
  color: white;
}

.export-xlsx-btn:hover {
  color: black;
  cursor: pointer;
  border-color: #C97A63;
}

/* Preview: CTA button for the "View the Dashboard" link inside table 9.3's
   infobox - background matches the box's own left-border green so the two
   read as one cohesive callout. */
.pit-dashboard-cta-btn {
  display: inline-block;
  background-color: #80875C;
  border: 2px solid #80875C;
  color: #ffffff !important;
  font-family: 'Open Sans';
  font-weight: bold;
  padding: 8px 20px;
  border-radius: 4px;
  text-decoration: none !important;
  margin-top: 4px;
}

.pit-dashboard-cta-btn:hover {
  background-color: transparent;
  color: #80875C !important;
  cursor: pointer;
}


.background-lgeo {
  width: 90%;
  display: inline-block;
  padding-left: 2%;
  padding-right: 2%;
  padding-bottom: 2%;
  overflow: hidden;
}

.background-pg2-lgeo {
  width: 1100px;
  display: block;
  padding-left: 2%;
  padding-right: 2%;
  overflow: hidden;
}



@media (max-width: 500px) {
  .background-pg2-lgeo  {
    width: 1000px;
    display: inline-block;
    padding-left: 1%;
    padding-right: 2%;
    transform:scale(0.33);
    transform-origin: left top;
    margin-bottom:-3500px;
    margin-right:-1000px;
  }
}

@media (max-width: 1000px) and (min-width: 500px) {
  .background-pg2-lgeo  {
    width: 1000px;
    display: inline-block;
    padding-left: 1%;
    padding-right: 2%;
    transform:scale(0.60);
    transform-origin: left top;
    margin-bottom:-3500px;
    margin-right:-1000px;
  }
}



.dashboard-pg1-lgeo {
  width: 90%;
  display: inline-block;
  padding-left: 2%;
  padding-right: 2%;
  padding-bottom: 2%;
}

.dashboard-lgeo {
  width: 100%;
  display: block;
  padding-left: 2%;
  padding-right: 2%;
}

@media (max-width: 1000px) {
  .dashboard-pg2-lgeo  {
    width: 1000px;
    max-width: 1200px;
    display: block;
    margin: 0 auto;
    /* px, not %: percentage padding resolves against the PARENT's width, so it
       grew as the page zoomed out and dragged the content column off-centre.
       Fixed units keep the offset identical at every zoom level. */
    padding-left: 96px;
    padding-right: 12px;
  }
}


@media (min-width: 1000px) {
  .dashboard-pg2-lgeo  {
    /* max-width caps the column so text/headings stop sprawling to the full
       viewport as the page zooms out, while the tables and charts inside
       (capped in px at 1200/1000/800) stayed put - the mismatch that left long
       thin paragraphs beside a narrow centred table. 1200px also matches the
       width the PDF export pins this container to in app.py. */
    width: 90%;
    max-width: 1200px;
    display: block;
    margin: 0 auto;
    padding-left: 96px;
    padding-right: 12px;
  }
}

/* Keep charts in the same 1200px column as the tables (get_base_table_style /
   with_export_btn both cap and centre at 1200px). Uncapped, a bar chart fills
   the full width of .dashboard-pg2-lgeo - 90% of the viewport - so zooming the
   page out left bar charts sprawling while the capped tables stayed a narrow
   centred column. .dash-graph is dcc.Graph's outer container and the element
   Plotly measures for responsive sizing, so capping it resizes the plot too.
   Scoped to the tab content, leaving the geography picker's map full width. */
#page-content-to-print .dash-graph {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}


.dropdown-box-lgeo {
  display: inline;
}

.dropdown-lgeo {
  width: 400px;
  display: inline-block;
  padding-right: 30px;
  padding-bottom: 10px;
  padding-top: 20px;
}

.scale-button-box-lgeo {
  display: block;
  padding-bottom: 5px;
  padding-top: 5px;
  float: left;

}

.region-button-box-lgeo {
  display: inline-block;
  padding-right: 10px;
  padding-top: 1%;
}

.button-lgeo {
  width: 270px;
  border-radius: 0px !important;
}

.button-lgeo:hover {
  color: #9CA37A;
  cursor: pointer;
}


.reset-button-lgeo {
  display: block;
  padding-top: 10px;
}


.map-lgeo {
  display: block;
}

.map-area-box-lgeo {
  display: inline-block;

}

@media (max-width: 500px) {
  /* min-height, not height: the box also holds the Reset Map button below the
     map, and a fixed height leaves it overflowing into .background-lgeo's
     overflow:hidden, where it gets clipped. */
  .map-area-box-lgeo  {
    width: 300px;
    min-height: 100px;
    display: inline-block;
  }

  .dropdown-lgeo {
    width: 330px;
    display: inline-block;
    padding-right: 30px;
    padding-bottom: 10px;
    padding-top: 20px;
  }
}


@media (min-width: 500px) {
  /* min-height, not height - see note above: the Reset Map button sits below
     the map inside this box and a fixed height gets it clipped. */
  .map-area-box-lgeo  {
    width: 1000px;
    min-height: 500px;
    display: inline-block;
  }

  .dropdown-lgeo {
    width: 400px;
    display: inline-block;
    padding-right: 30px;
    padding-bottom: 10px;
    padding-top: 20px;
  }
}

.pg2-text-content-lgeo {
  padding-bottom: 2rem;
  font-family: 'Open Sans';
}

.pg2-table-lgeo {
  display: block;
  padding-top: 30px;
  padding-bottom: 30px;
}

.pg2-plot-lgeo {
  width: 95%;
  display: block;
  padding-top: 1%;
  padding-left: 0.5%;
  margin-left: 0;
}

.pg2-table-plot-box-lgeo {
  display: block;
  padding-top: 1%;
}

.pg3-plot-lgeo {
  display: block;
  padding-top: 1%;
}

.pg3-table-lgeo {
  display: block;
  padding-bottom: 1.5%;
}

.pg3-table-plot-box-lgeo {
  display: block;
  padding-top: 1%;
}


.pg4-table-lgeo {
  display: block;
  padding-top: 30px;
  padding-bottom: 30px;
}

.pg4-plot-lgeo {
  width: 95%;
  display: block;
  padding-top: 1%;
  padding-left: 0.5%;
  margin-left: 0;
}

.pg4-table-plot-box-lgeo {
  display: block;
  padding-top: 1%;
}


.muni-reg-text-lgeo{
  width: 90%;
  padding-bottom: 1%;
}

.lgeo-credit-text {
  padding-top: 5%;
  font-size: 1.5rem;
  color: #0B4952;
}

.export{
  margin-bottom: 5%;
}


.tables {
  padding-bottom: 1%;
  padding-top: 1%;
}

span.column-header--sort {
  display: none;
}

/* 
–––––––––––––––––––––––––––––––––––––––––––––––––– */

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

/* For devices larger than 550px */
@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.0%;          }
  .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%; }

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

}

/* Fonts
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400&display=swap');

.custom-font {
    font-family: 'Open Sans', sans-serif;
}
/* @import url('https://fonts.cdnfonts.com/css/bahnschrift'); */

@font-face{
  font-family:bahnschrift;
  font-style:normal;
  font-weight:400;
  src:local('Bahnschrift'),url('https://fonts.cdnfonts.com/s/21353/BAHNSCHRIFT 1.woff') format('woff')}
  
@font-face{
  font-family:bahnschrift;
  font-style:normal;
  font-weight:400;
  src:local('Bahnschrift'),url('https://fonts.cdnfonts.com/s/21353/BAHNSCHRIFT 10.woff') format('woff')}

@font-face{
  font-family:bahnschrift;
  font-style:normal;
  font-weight:400;
  src:local('Bahnschrift'),url('https://fonts.cdnfonts.com/s/21353/BAHNSCHRIFT 11.woff') format('woff')}

@font-face{
  font-family:bahnschrift;
  font-style:normal;
  font-weight:400;
  src:local('Bahnschrift'),url('https://fonts.cdnfonts.com/s/21353/BAHNSCHRIFT 12.woff') format('woff')}

@font-face{
  font-family:bahnschrift;
  font-style:normal;
  font-weight:400;
  src:local('Bahnschrift'),url('https://fonts.cdnfonts.com/s/21353/BAHNSCHRIFT 13.woff') format('woff')}

@font-face{
  font-family:bahnschrift;
  font-style:normal;
  font-weight:400;
  src:local('Bahnschrift'),url('https://fonts.cdnfonts.com/s/21353/BAHNSCHRIFT 14.woff') format('woff')}

@font-face{
  font-family:bahnschrift;
  font-style:normal;
  font-weight:400;
  src:local('Bahnschrift'),url('https://fonts.cdnfonts.com/s/21353/BAHNSCHRIFT 2.woff') format('woff')}

@font-face{
  font-family:bahnschrift;
  font-style:normal;
  font-weight:400;
  src:local('Bahnschrift'),url('https://fonts.cdnfonts.com/s/21353/BAHNSCHRIFT 3.woff') format('woff')}

@font-face{
  font-family:bahnschrift;
  font-style:normal;font-weight:400;
  src:local('Bahnschrift'),url('https://fonts.cdnfonts.com/s/21353/BAHNSCHRIFT 4.woff') format('woff')}

@font-face{
  font-family:bahnschrift;
  font-style:normal;font-weight:400;
  src:local('Bahnschrift'),url('https://fonts.cdnfonts.com/s/21353/BAHNSCHRIFT 5.woff') format('woff')}
  
@font-face{
  font-family:bahnschrift;
  font-style:normal;font-weight:400;
  src:local('Bahnschrift'),url('https://fonts.cdnfonts.com/s/21353/BAHNSCHRIFT 6.woff') format('woff')}

@font-face{
  font-family:bahnschrift;
  font-style:normal;font-weight:400;
  src:local('Bahnschrift'),url('https://fonts.cdnfonts.com/s/21353/BAHNSCHRIFT 7.woff') format('woff')}

@font-face{
  font-family:bahnschrift;
  font-style:normal;font-weight:400;
  src:local('Bahnschrift'),url('https://fonts.cdnfonts.com/s/21353/BAHNSCHRIFT 8.woff') format('woff')}

@font-face{
  font-family:bahnschrift;
  font-style:normal;font-weight:400;
  src:local('Bahnschrift'),url('https://fonts.cdnfonts.com/s/21353/BAHNSCHRIFT 9.woff') format('woff')}

@font-face{
  font-family:bahnschrift;
  font-style:normal;font-weight:400;
  src:local('Bahnschrift'),url(https://fonts.cdnfonts.com/s/21353/BAHNSCHRIFT.woff) format('woff')}

@font-face {
	font-family: 'proxima_nova_rgregular';
	src: url('https://litmus.com/fonts/Emails/proximanova-regular-webfont.eot');
	src: url('https://litmus.com/fonts/Emails/proximanova-regular-webfont.eot?#iefix') format('embedded-opentype'),
		 url('https://litmus.com/fonts/Emails/proximanova-regular-webfont.woff') format('woff'),
		 url('https://litmus.com/fonts/Emails/proximanova-regular-webfont.ttf') format('truetype'),
		 url('https://litmus.com/fonts/Emails/proximanova-regular-webfont.svg#proxima_nova_rgregular') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'proxima_nova_rgbold';
	src: url('https://litmus.com/fonts/Emails/proximanova-bold-webfont.eot');
	src: url('https://litmus.com/fonts/Emails/proximanova-bold-webfont.eot?#iefix') format('embedded-opentype'),
		 url('https://litmus.com/fonts/Emails/proximanova-bold-webfont.woff') format('woff'),
		 url('https://litmus.com/fonts/Emails/proximanova-bold-webfont.ttf') format('truetype'),
		 url('https://litmus.com/fonts/Emails/proximanova-bold-webfont.svg#proxima_nova_rgbold') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'adelle_rgregular';
	src: url('https://litmus.com/fonts/Emails/adelle_reg-webfont.eot');
	src: url('https://litmus.com/fonts/Emails/adelle_reg-webfont.eot?#iefix') format('embedded-opentype'),
		 url('https://litmus.com/fonts/Emails/adelle_reg-webfont.woff') format('woff'),
		 url('https://litmus.com/fonts/Emails/adelle_reg-webfont.ttf') format('truetype'),
		 url('https://litmus.com/fonts/Emails/adelle_reg-webfont.svg#adelle_rgregular') format('svg');
	font-weight: normal;
	font-style: normal;
}


/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
  font-size: 62.5%; }
body {
  font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.6;
  font-weight: 400;
  font-family: "Open Sans";/* "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;*/
  color: #000000; 
  /*background-color: #fffced;*/
}


/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 300; }

h1 { font-family: "Open Sans"; font-size: 4.5rem; line-height: 1.2;  letter-spacing: -.1rem; margin-bottom: 2rem; }
h2 { font-family: "Open Sans"; color: #000000; font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; margin-bottom: 1.8rem; margin-top: 1.8rem;}
h3 { font-family: "Open Sans"; color: #000000; font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; margin-bottom: 1.5rem; margin-top: 1.5rem;}
h4 { font-family: "Open Sans"; color: #000000; font-size: 2.6rem; line-height: 1.35; letter-spacing: -.08rem; margin-bottom: 1.2rem; margin-top: 1.2rem;}
h5 { font-family: "Open Sans"; color: #000000; font-size: 2.2rem; line-height: 1.5;  letter-spacing: -.05rem; margin-bottom: 0.6rem; margin-top: 0.6rem;}
h6 { font-family: "Open Sans"; color: #000000; font-size: 1.8rem; line-height: 1.6;  letter-spacing: 0; margin-bottom: 0.75rem; margin-top: 0.75rem;}

p {
  margin-top: 0; }


/* Blockquotes
–––––––––––––––––––––––––––––––––––––––––––––––––– */
blockquote {
  border-left: 4px lightgrey solid;
  padding-left: 1rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
  margin-left: 0rem;
}


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


/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  display: inline-block;
  height: 38px;
  padding: 0 30px;
  color: #555;
  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: transparent;
  border-radius: 4px;
  border: 1px solid #bbb;
  cursor: pointer;
  box-sizing: border-box; }
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
  color: #3EB549;
  border-color: #888;
  /* background-color: #b6ebfc; */
  outline: 0; }
.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
  color: #FFF;
  background-color: #33C3F0;
  border-color: #33C3F0; }
.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
  color: #FFF;
  background-color: #1EAEDB;
  border-color: #1EAEDB; }


/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  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;
  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 */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; }
textarea {
  min-height: 65px;
  padding-top: 6px;
  padding-bottom: 6px; }
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border: 1px solid #33C3F0;
  outline: 0; }
label,
legend {
  display: block;
  margin-bottom: 0px; }
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: normal; }


/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {
  list-style: circle inside; }
ol {
  list-style: decimal inside; }
ol, ul {
  padding-left: 0;
  margin-top: 0; }
ul ul,
ul ol,
ol ol,
ol ul {
  margin: 1.5rem 0 1.5rem 3rem;
  font-size: 90%; }
li {
  margin-bottom: 1rem; }


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


/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button,
.button {
  margin-bottom: 0rem; }
input,
textarea,
select,
fieldset {
  margin-bottom: 0rem; }
pre,
dl,
figure,
table,
form {
  margin-bottom: 0rem; }
p,
ul,
ol {
  margin-bottom: 0.75rem; }

/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.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; }


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


/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Self Clearing Goodness */
.container:after,
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both; }


/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/


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

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {}

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