// Mobile first!

#summary {
  position: relative;
  .intro {
    border-bottom: 1px solid @light_field;
    background-color: @light_field10;
    padding: 15px 30px;
    font-family: "Avenir Next", Arial, sans-serif;
    .nlw {
      margin-bottom: 20px;
    }
  }
  .spinning {
    display: none;
  }
  .not-quite {
    margin: 0 0 0 45px;
    font-size: .875em;  
  }
  
  #summary-loading {
      background-color: @white;
      color: @black;
      text-align: center;
      padding: 15px;
      display: none;
  }
  
  &.loading {
    #summary-loading {
      display: block;
    }
  }
  #share {
    label {
      border: 0;
      width: 100%;
    }
  }
}

.instructions {
  border-width: 0 30px;
  padding: 25px 30px;
  background-color: @light_field10;
  font-size: 1em;
  line-height: 1.375em;
  .avenir-next;
  font-weight: 400;
}

.submit-btn {
  margin-top: 20px;
  display: block;
  bottom: .5em;
  padding: 0.75em 1em;
}

.drop-downs {
  background-color: @light_field10;
  > div {
    padding: 15px;
  }
}

#summary-table-form {

  li:hover,
  li:focus,
  .result-selected {
    background-color: @pacific20;
    color: @black;
  }

  .variable.with-reset-link {
    position: relative;
  }

  .icon {
    margin-right: 5px;
  }

  .calculate {
    li {
      color: @dark_field;
    }

    .placeholder {
      border-top: 1px solid @light_field;
      margin-top: 10px;
      padding-top: 10px;
      text-transform: uppercase;
    }

    .indent {
      padding-left: 15px;
      color: @black;
    }

    li.placeholder:hover,
    li.placeholder:focus {
      background-color: #fff;
      color: @dark_field;
      cursor: default;
    }

  }

  .chzn-container .chzn-drop,
  .chzn-container-active .chzn-single {
    border-color: #0072ce;
  }

  .reset-field {
    text-align: right;
    display: block;
    margin-top: 4px;
    font-size: .8em;
    font-family: 'Avenir Next Demi', Arial, sans-serif;
  }

}

#summary-wrapper {
  padding: 10px 0;
  background-color: @light_field10;
}

#summary-table-container {
  font-family: "Avenir Next", Arial, sans-serif;
  max-height: 500px;
  overflow: auto;
  margin: 15px 30px;

  #summary-table {
    width: 100%;

    tr.header td {
      background-color: @gold20;
      .avenir-next-demi;
      max-height: 40px;
    }

    td {
      background-color: white;
      font-size: .8em;
      padding: 5px 10px;
      border: 1px solid @light_field;
      width: 25%;
      max-height: 35px;
    }

  }
}

#download-summary {
  &.disabled {
    .translucent();
    font-style: italic;
  }
}

// Adjustments for larger screens

@media only screen and ( min-width: 768px ) {

  #summary-table-form {

    .intro {
      .column( 12 );
    }

    .variable,
    .calculate {
      .column( 3 );
      label.stretchy {
        position: absolute;
        margin-top: -30px;
      }

    }

    .variable:first-child {
      border-width: 0 15px 0 30px;
    }

    .calculate:last-child {
      border-width: 0 30px 0 15px;
    }

    .drop-downs {
      position: relative;
      > div {
        padding: 0;
      }
    }

  }

  .modify-filters {
    float: right;
    line-height: 1em;
  }

  .instructions {
    .column( 12 );
    border: 0;
  }

  .submit-btn {
    margin-top: 0;
    float: right; 
    position: relative;
  }

}