@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600);
.row:before, .row:after, .clearfix:before, .clearfix:after {
  display: table;
  content: " "; }

.row:after, .clearfix:after {
  clear: both; }

.row, .clearfix {
  *zoom: 1; }

img {
  max-width: 100%;
  height: auto; }

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.column {
  float: none;
  padding-right: 20px; }
  .column.col-1-1, .column.col-1-2, .column.col-1-3, .column.col-1-4 {
    width: 100%; }
  .column.col-1-4 {
    padding-right: 10px; }
  .column.contact {
    text-align: center;
    margin-bottom: 64px; }

input:focus, input:hover, button:focus, button:hover {
  outline: none; }

#app-canvas {
  width: 100%;
  max-width: 1080px;
  margin: auto; }
  #app-canvas.inactive .filter-container {
    display: none !important; }

.years-tables {
  transition: all 0.45s;
  -webkit-transition: all 0.45s;
  max-height: 999px;
  overflow: hidden; }
  .years-tables.hidden {
    max-height: 0px; }
  .years-tables h1 {
    font-size: 14px;
    text-align: center; }
  .years-tables .months {
    display: flex;
    margin-top: 16px;
    margin-bottom: 48px;
    font-size: 11px; }
  .years-tables .col {
    width: 6.5%;
    overflow: hidden; }
    .years-tables .col:first-child {
      width: 18%;
      padding-right: 0.5%;
      margin-right: 0.5%;
      border-right: 1px solid #B5B5B5;
      text-align: right; }
    .years-tables .col ul li {
      line-height: 1.4em;
      border-bottom: 1px solid #ebebeb; }
      .years-tables .col ul li:first-child {
        border-bottom: 1px solid #B5B5B5; }
    .years-tables .col .total-cost {
      font-weight: 700; }

#chart {
  width: 99%;
  height: auto;
  margin: 1em auto; }

.select-input-period button {
  width: 49%;
  display: inline-block;
  font-size: 18px;
  color: #fff;
  border: none;
  padding: 1em 0;
  background-color: #29668b; }

.input-container input {
  width: 99%;
  margin: auto;
  display: block;
  font-size: 22px;
  text-align: center;
  margin: 1em auto;
  padding: 0.5em 0px; }
.input-container .input-per-month h2 {
  margin-top: 8pt;
  font-weight: 400;
  text-align: center; }
.input-container .input-per-month .quarter {
  width: 100%; }
  .input-container .input-per-month .quarter .month {
    width: 31%;
    display: inline-block;
    text-align: center; }
  .input-container .input-per-month .quarter label {
    display: block;
    margin-top: 8pt;
    text-align: center; }
  .input-container .input-per-month .quarter input.per-month-input {
    display: inline;
    width: 90%;
    font-size: 12pt;
    margin-top: 2pt; }
.input-container .input-period-type {
  display: none; }
  .input-container .input-period-type.selected {
    display: block; }

.filter-container {
  font-size: 0px;
  text-align: center; }
  .filter-container button {
    width: 49%;
    display: inline-block;
    font-size: 18px;
    color: #fff;
    border: none;
    padding: 1em 0.5em; }
    .filter-container button.hidden {
      display: none; }
    .filter-container button:focus, .filter-container button:hover {
      outline: none;
      opacity: 0.8; }
    .filter-container button.year-both {
      width: 98%;
      background-color: #29668b; }
    .filter-container button.year-current {
      background-color: #4bc87f; }
    .filter-container button.year-prev {
      background-color: #6eaff7; }
    .filter-container button.show-tables {
      opacity: 0;
      width: 99%;
      margin: auto;
      font-size: 15px;
      display: block;
      background-color: transparent;
      color: #3f3f3f;
      text-decoration: underline;
      max-height: 0px;
      overflow: hidden;
      transition: opacity 0.25s;
      -webkit-transition: opacity 0.25s; }
      .filter-container button.show-tables.available {
        max-height: 50px;
        opacity: 1; }
    .filter-container button span.result {
      font-size: 15px; }

.results {
  font-size: 0px;
  visibility: hidden;
  margin-top: 16px; }
  .results.available {
    visibility: visible; }
  .results .results-current, .results .results-prev {
    display: inline-block;
    width: 49%;
    font-size: 15px;
    text-align: center; }
  .results .results-balance {
    width: 100%;
    font-size: 18px;
    text-align: center;
    font-weight: 100; }
    .results .results-balance p.small {
      font-size: 0.8em;
      font-style: italic;
      line-height: 1.3em; }

.years-tables, .show-tables {
  visibility: hidden !important; }

.admin-canvas {
  width: 800px;
  margin: auto; }
  .admin-canvas h1, .admin-canvas h2 {
    margin: 0.25em 0px 0.75em; }
  .admin-canvas .single-year {
    display: inline-block;
    width: 49%; }
    .admin-canvas .single-year .single-month {
      margin-bottom: 1.75em; }
  .admin-canvas .form-field {
    margin-bottom: 8px; }
    .admin-canvas .form-field label {
      display: inline-block;
      text-align: right;
      width: 30%; }
    .admin-canvas .form-field input {
      padding: 0.15em;
      letter-spacing: 0.025em; }
    .admin-canvas .form-field #submit {
      width: 100%;
      display: block;
      border: 1px solid #3C6446;
      background-color: #5E9C6D;
      padding: 1em 0px;
      margin-top: 32px;
      margin-bottom: 96px;
      font-weight: 300;
      color: #fff; }

@media only screen and (min-width: 740px) {
  .column {
    float: left;
    padding-left: 20px; }
    .column.col-1-2 {
      width: 50%; }
      .column.col-1-2.col-center {
        float: none;
        margin: 0 auto; }
    .column.col-1-3 {
      width: 33.333%; }
    .column.col-2-3 {
      width: 66%; }
    .column.col-1-4 {
      width: 25%; }

  .years-tables, .show-tables {
    visibility: visible !important; } }