.loan-comparison {
  .cf-icon-help-round {
    color: @pacific;
  }
}

.calc-content {
  .webfont-medium();
}

.comparison-header {
  font-size: 1.375em;
  .webfont-regular();
}

.comparison-input-column {
  .grid_column( 3 );
  
  .respond-to-max(@mobile-max, {
      .grid_column( 12 );
  });
  
  .respond-to-min(@tablet-min, {
    &-a {
      .grid_column( 6 );
    }
  });
  
  &-b,
  &-c {
    .input-wrap {
      width: 100%;
    }
    
    .respond-to-min(@tablet-min, {
      h5,
      .label-float {
        .u-visually-hidden;
      }
    });
  }

}
/*
  Introductory content
  --------------------------- */
  

.respond-to-max(@mobile-max, {
  .loan-comparison {
     .lead {
       display: none; // hide the lead for now, this will be a toggle later
     }

     .intro-img {
       display: none; // hide the hero image on mobile
     }
   }
});

.lc-ill {
        width: 200px;
        margin: 0 auto;
        display: block;
   .respond-to-max(719px, {
            display: none;
        });
}
.onboarding {
  background-color: @green-20;
  border-top: 2px solid @green;
  .content_main {
      padding-top: unit(@grid_gutter-width / @base-font-size-px, em);
      padding-bottom: unit(@grid_gutter-width / @base-font-size-px, em);
  }
   .input-row {
     margin-bottom:  unit((@grid_gutter-width / 2) / @base-font-size-px, em);
   }
   
  .respond-to-min(@tablet-min, {
    .label-float,
    .input-wrap {
      .u-inline-block;
      vertical-align: middle;
    }
    
    .label-float {
      width: 15em;
      .u-mb0;
      .h3;
    }

    .input-wrap {
      width: 200px;
    }
  });
}
/*
  Mobile overview section
  --------------------------- */

.respond-to-min(@tablet-min, {
  .mobile-overview,
  .mobile-comparison-overviews {
    display: none;
  }
});

.respond-to-max(@mobile-max, {
  .comparison-input-column-1,
  .comparison-input-column {
    .grid_column( 12 ); // this will have to change when we have two loans
  }

  .comparison-lead {
    .grid_column( 6 );
  }

  .inactive {
    color: @gray-80;
  }
  
  .comparison-header {
    border-bottom: 3px solid @green-60;

    .inactive & {
      color: @gray-40;
      border-bottom: 3px solid @gray-40;
    }
  }

  .mobile-add-btn {
    a:hover {
      color: #fff;
    }
  }

  .mobile-overview {
    .grid_column(6);
    padding-top: 1em;
    padding-bottom: 1em;
    
    p {
      .webfont-regular();
      margin-bottom: 0.75em;
    }

    h4 {
      .allcaps-demi;
    }
  }
});


/*
  Loan Comparison Inputs
  --------------------------- */

.lc-inputs {
  width: 100%;
  .webfont-regular();
  position: relative;
  
  .comparison-header {
    .u-hide-on-mobile;
  }

  input[type="text"],
  input[type="number"] {
    width: 100%;
    border: 1px solid @gray-40;
  }

  legend {
    .reset;
    display: inline-block;
  }

  fieldset {
    .reset;
    border: 0;
    outline: 0;
    display: block;
  }
  
  .input-headers {
    .respond-to-min(@tablet-min, {
      padding-top: unit(@grid_gutter-width / @base-font-size-px, em);
    });
  }
  
  .interest-rate-update,
  .interest-rate-loading {
    display: none;
  }
  .update .interest-rate-update {
    width: 100%;
    display: block;
    animation: fadein .5s;
  }

  .updating .interest-rate-loading {
    display: block;
    width: 100%;
    margin-left: 0;
    height: 2em;
    background-image: url(../img/icon_spinner.gif);
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-position: center center;
  }
  .update,
  .updating {
    .select-content {
      display: none;
    }
  }
}

.label-float h4 {
  display: inline;
}

.input-headers {
  text-align: center;
  
  h3 {
    .reset;
  }
}

.output-alert {
  border: 1px solid @green;
  background: #fff;
  position: absolute;
  top: 40%;
  padding: 1em 2em 1em 3em;
  .webfont-regular();
  z-index: 1;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 300px;

  img {
    display: block;
    margin: 0 auto;
  }

}

/* labels and inputs are full width on small screens */
.respond-to-min(@tablet-min, {
  .input-subsection {
    padding-top: unit(@grid_gutter-width / @base-font-size-px, em);
  }
  
  .comparisons {
    .label-float {
      text-align: right;
    }
  }
  
  .comparison-input-column-a {
    .input-wrap,
    .label-float {
      .grid_column(6);
    }
  }
  
  .comparison-input-column {
    .input-wrap,
    .label-float {
      vertical-align: middle;
    }
  }
});

.respond-to-max(@mobile-max, {
  .lc-inputs {
    label {
        margin-top: 0.875em;
      }
  }

  .input-headers,
  .comparison-input-column-c {
    display: none;
  }
});

.small-input {
  display: inline-block;
  width: 25%;
  margin-right: -4px; // normalize inline-block
  
  .respond-to-max(@mobile-max, {
    padding-right: 5%;
  });
}

.mid-input {
  display: inline-block;
  width: 75%;
  margin-right: -4px; // nornalize inline block
}


.lc-toggle {
  display: block;
  background: #fff;
  font-size: 0.875em;
  text-align: center;
  padding: 8px 0;

  .cf-icon {
    font-size: 1.125em;
    padding-right: 5px;
  }
}

.lc-edit-link {
  border-top: 1px dotted @pacific;
  border-bottom: 1px dotted @pacific;
  &:visited {
    color: @pacific;
    border-color: @pacific;
  }
}

.lc-save-link {
  display: none; // hide on desktop
  margin-right: -(@grid_gutter-width / 2);
  margin-left: -(@grid_gutter-width / 2);
  
  &:visited {
    color: @pacific;
    border-color: @pacific;
  }

  &.first-save {
    border-top: 1px dotted @pacific;
    border-bottom: 1px solid @gray-10;
  }

  &.second-save {
    border-top: 1px solid @gray-10;
    border-bottom: 1px dotted @pacific;
  }
}

// points inline radio button layout
.lc-radio {
  width: 16.666666667%;
  padding-bottom: 25px;

  input,
  label {
    display: inline-block;
    font-size: .875em;
  }

  label {
    margin-right: 6px;
  }
}

// shrink font size below 1060px

@media (max-width: 1060px) {
  .lc-radio {
    label {
     font-size: .875em;
    }
  }
}

// below 950px display radio buttons and labels on new lines
@media (max-width: 950px) {
  .lc-radio {

    input,
    label {
     display: block;
    }

    label {
      margin-right: 0;
    }
  }
}


@media (max-width: 600px) {

  .lc-input {
    display: none;

    &.input-open {
      display: block;
    }
  }

  .lc-save-link {
    display: block; //
  }
  .input-subsection {
    padding: 0.625em 0 1.5em 0;
    border-bottom: 1px solid @gray-10;
  }
}

/*
  Add comparison
  --------------------------- */

.add-btn {

  border: 2px dashed @gray-40;
  text-align: center;
  margin-top: 28px;
  padding: 30px 0;
  border-radius: .25em;

  a:hover {
    color: #fff;
  }
}

/*
  Loan Comparison Results
  --------------------------- */
.output-table {
  position: relative;
}
.comparison-results {
  margin-bottom: @grid_gutter-width; 
}

.lc-results-table {
  margin: 0 0 @grid_gutter-width/2;
  width: 100%;
  .respond-to-min(@tablet-min, {
    margin-bottom: @grid_gutter-width;
  });
  th,
  thead td {
    background: transparent;
    color: @body-text-color;
  }
  tbody {
    td,
    > tr:nth-child(odd) > td,
    > tr:nth-child(odd) > th {
      background: transparent;
    }
  }
  .callout-educational {
    display: none; // hide until js hover/click
  }
  thead.expandable_header {
    background: transparent;
    th {
      background-color: rgba(0,0,0,0.025); // transparency hack to make the expandables clickable and the costs text visible
    }
    .respond-to-min(@tablet-min, {
      background-color: rgba(0,0,0,0.025); // transparency hack to make the expandables clickable and the costs text visible
      th {
        background: transparent;
      }
    });
  }
  tbody.expandable_content {
    display: block;
  }
  th {
    .respond-to-min(@tablet-min, {
      .grid_column(1,3);
      padding-left: @grid_gutter-width/3;
      padding-right: 0;
      border-width: 0;
    });
  }
  td,
  tr {
    display: block;
    .respond-to-min(@tablet-min, {
      text-align: right;
    });
  }
  th:first-child,
  td {
    .respond-to-min(@tablet-min, {
      display: inline-block;
    });
  }
  .expandable_header {
    display: block;
  }
  .expandable_content {
    th > * {
      display: inline-block;
      text-align: left;
    }
    th {
      text-align: left;
    }
  }
  .lc-primary-result-heading {
    .webfont-demi();
  }
  .lc-primary-result {
    .grid_column(1,2);
    .webfont-demi();
    padding: @grid_gutter-width/2;
  }
  .lc-result {
    .grid_column(1,2);
    .respond-to-min(@tablet-min, {
      .grid_column(1,3);
      padding-right: 70px;
    });
    .respond-to-min(1000px, {
      &.lc-primary-result {
        vertical-align: bottom;
      }
    });
  }
}

  .lc-result-b {
    .respond-to-min(@tablet-min, {
      position: relative;
      right: @grid_gutter-width*.75;
    });
    .respond-to-min(750px, {
      right: @grid_gutter-width*1.5;
    });
  }

  .result__primary {
    &.highlight:before {
      .respond-to-min(795px, { // hack for the highlighted main result row width
        content: '';
        display: block;
        position: absolute;
        left: -200%;
        width: 200%;
        height: 100%;
        background-color: @green-20;
      });
    }
  }

  .result__main {
    .respond-to-min(@tablet-min, {
      margin-top: @grid_gutter-width/2;
      padding-top: @grid_gutter-width/2;
      border-top: 1px solid @gray-40;
      &:first-child {
        padding-top: 0;
        border-top: 0;
      }
      &:last-child {
        padding-bottom: @grid_gutter-width/2;
        border-bottom: 1px solid @gray-40;
      }
      &.highlight {
        position: relative;
      }
      &.highlight:before,
      &.highlight:last-child:after { // hack for highlighted design to cover padding of row
        content: '';
        display: block;
        position: absolute;
        top: 0;
        width: 100%;
        height: @grid_gutter-width/2;
        background: white;
      }
      &.highlight:last-child:after {
        top: initial;
        bottom: 0;
      }
      &.highlight:first-child:before {
        display: none;
      }
      .lc-tooltip {
        position: absolute;
        top: 14px;
        left: @grid_gutter-width/2;
      }
      .tooltip {
        .webfont-regular();
        letter-spacing: 0;
        text-transform: none;
      }
    });
    th {
      border-bottom: 1px solid @gray-40;
      .respond-to-min(@tablet-min, {
        position: relative;
        padding-left: @grid_gutter-width*1.333;
        border-bottom: 0;
      });
    }
    .lc-result {
      .webfont-demi();
    }
    h5 {
      margin-bottom: 0;
    }
  }

  .result__sub {
    th {
      padding-bottom: 0;
    }
    h6 {
      margin-bottom: 0;
      margin-left: @grid_gutter-width/2;
      .respond-to-min(@tablet-min, {
        margin-left: @grid_gutter-width;
      });
    }
  }

    .expandable__table {      
      .expandable_header-right {
        position: absolute;
        top: @grid_gutter-width/2;
        right: @grid_gutter-width/2;
        font-size: 14px;
        .respond-to-min(@tablet-min, {
          top: 18px;
        });
        .respond-to-min(1000px, {
          top: 22px;
        });
      }
    }

    .thead__results {
      th {
        text-align: left;
      }
      h3 {
        margin: 0;
        padding-left: @grid_gutter-width/2;
        border-left: 1px dashed @gray-60;
        color: @gray-60;
      }
    }

.comparison-results {
  .content-l_col.content-l_col-3-4 {
    .respond-to-min(@tablet-min, {
      .grid_column(4,4);
    });
    .respond-to-min(800px, {
      .grid_column(3,4);
    });
  }
}

.comparison-results {
  .comparison-input-column {
    text-align: right;
    color: @gray-60;
    .grid_column(1,3);
    .respond-to-min(1000px, {
      padding-right: @grid_gutter-width;
    });
    .respond-to-min(1200px, {
      padding-right: @grid_gutter-width*2;
    });
    h3 {
      display: inline-block;
      border-left: 1px dashed @gray-60;
      padding: 0 @grid_gutter-width/2;
      .respond-to-min(1000px, {
        padding-right: 0;
      });
    }
  }
  .comparison-input-column-b {
    .respond-to-min(@tablet-min, {
      position: relative;
      right: @grid_gutter-width*.75;
    });
    .respond-to-min(750px, {
      right: @grid_gutter-width*1.5;
    });
  }
  .expandable_header {
    position: relative;
    z-index: 2;
    background-color: rgba(0,0,0,0.025); // transparency hack to make the expandables clickable and the costs text visible
  }
}

.expandable__no-bg {
  &,
  &.expandable__expanded,
  &.expandable__padded,
  .expandable_content {
    background: @white;
  }
}

  .results-section-heading {
    margin: 0;
    > .cf-icon {
      color: @black;
    }
  }


.lc-result {
  .webfont-regular();
  .respond-to-min(@tablet-min, {
    .grid_column(3);
  });
}

.lc-primary-result,
.lc-primary-result-heading  {
  font-size: 1.375em;
  font-weight: 700;
}

.feedback-block {
  background-color: @gray-5;
  .respond-to-range(@tablet-min, 767px, {
    margin-right: -(@grid_gutter-width) !important;
    margin-left: -(@grid_gutter-width) !important;
  });
  .respond-to-max(@mobile-max, {
    margin-right: -(@grid_gutter-width / 2);
    margin-left: -(@grid_gutter-width / 2);
  });
}


.lc-tooltip .cf-icon-help-round {
  font-size: 14px;
  padding-left: 3px;
}

.lc-subhead {
  display: inline;
}

.lc-inputs {
  h3 {
    margin-bottom: 0;
  }
  .dollar-input .unit {
      top: 17%;
  }
  
  .percent-input .unit {
    right: 20%;
    top: 17%;
  }
  
  .dollar-input {
    .unit:before  {
      content: "\0024"; 
    }
  }

  .percent-input {
    .unit:before  {
      content: "\0025"; 
    }
  }
  
}

table.unstyled {
  background: none;
    
  thead {
    background: none;
  
    th {
      color: @black;
      background: none;
    }
  } 
  tbody > tr:nth-child(odd) > th,
  tbody > tr:nth-child(odd) > td {
      background: none;
  } 
}

.scenario-alternates {
  .h4;
}
#next-steps {
  .respond-to-max(@mobile-max, {
    margin: 0 -@grid_gutter-width/2;
      
    .step-block {
      margin-left: @grid_gutter-width/2;
      margin-right: @grid_gutter-width/2;
    }
  });
  
  background-color: @gray-5;
  .respond-to-min(@tablet-min, {
    display: table;
  });
  
  .step-block {
      border-top: 1px solid @gray-40;
      padding-top: @grid_gutter-width;
      padding-bottom: @grid_gutter-width * 1.5;
      
      &:first-child {
        border-top-width: 0px
      }
      
      .respond-to-min(@tablet-min, {
        border-top-width: 0px;
        display: table-cell;
        width: 33%;
        padding: @grid_gutter-width;
        border-left: @grid_gutter-width solid white;
         
        &:first-child {
          border-left-width: 0px;
        }
      });      
  }
}


#scenario-section {
  .respond-to-min(@tablet-min, {
    .block;
    margin-top: 0px;
  });
  
  .scenario-alternates {
    .respond-to-min(@tablet-min, {
      .grid_column(1, 8);
      text-align: center;
      padding-top: @grid_gutter-width * 1.5;
    });
  }
  
  .scenario-block {
    .respond-to-min(@tablet-min, {
      .grid_column(3, 8);
    });
  }

  .content-l_col + .content-l_col {
  .respond-to-min(@tablet-min, {
      margin-top: 0;
    });
  }
}

#next-steps,
#scenario-section {
  .btn {
    .respond-to-max(@mobile-max, {
      width: 100%;
      text-align: center;
    });
  }
}

.scenario-picker-select {
  margin-top: 5px;
  margin-bottom: 5px;
}


.lc-inputs {  
  .respond-to-min(@tablet-min, {
    .points-row .label-cell .wrap-content {
      display: block;
    }
  });
    
  .respond-to-max(@mobile-max, {
    display: none;
    
    .downpayment-loan-amount {
      padding-top: 3px;
      .webfont-medium();
      .loan-amount-equals {
        font-size: unit(18px / @base-font-size-px, em);
      }
    }
    
    .loan-amount-row,
    .loan-summary-row {
      td.input-0,
      td.input-1 {
        padding-top: .25em;
        .webfont-medium();
        font-size: unit(17px / @base-font-size-px, em);
      } 
    }
    
    &_header {
       margin-left: -@grid_gutter-width/2;
      margin-right: -@grid_gutter-width/2;
      padding: @grid_gutter-width/2;
      border-top: 1px solid @gray-10;
      border-bottom: 1px solid @gray-10;
      .webfont-medium();
    }
    
    &_container {
      margin-left: -@grid_gutter-width/2;
      margin-right: -@grid_gutter-width/2;
    }
    
    .loan-input-table {
      th,
      td {
        display: none;
      }
      margin-bottom: 0;
    }
    
    &.mobile-editing {
      display: block;
      
      .loan-input-table {
        &,
        tbody,
        tr {
          display: block;
          width: 100%;
        }
        tr {
          background-color: @gray-5;
        }
      }
      
      & td.label-cell,
      & .save-button-row td,
      &.mobile-editing-a th.input-0,
      &.mobile-editing-a td.input-0,
      &.mobile-editing-b th.input-1,
      &.mobile-editing-b td.input-1 {
          display: block;
          width: 100%;
      }

      .loan-input-table tr.subhead-row th {
        display: none;
      }
        
      td.label-cell {
        text-align: left;
        padding-bottom: 0;
        padding-left:  @grid_gutter-width/2;
      }
      
      .downpayment-input-container {
        .percent-input {
          width: 100%;
          padding-right: 0;
          input {
            padding-left: .5em;
          }
          .unit {
            left: 2.25em;
          }
        }
        .dollar-input {
          display: none;
        }        
      }
      
      .credit-score-row {
        padding-bottom: @grid_gutter-width/2;
        border-bottom: 1px solid @gray-10;
      }
      
      .price-row {
        padding-top: @grid_gutter-width/2;
      }
      
    }
    
    &#loan-interest-rate-container {
      display: block;
      
      td.input-0,
      td.input-1 {
        display: table-cell;
        width: 50%;
      }
    }
    
  });
}

table.loan-input-table {
  width: 100%;
  position: relative;
  
  select {
    font-size: unit(14px / @base-font-size-px, em);
  }
  
  th,
  td {
      width: 33%;
      padding: unit(12px / @base-font-size-px, em) unit(15px / @base-font-size-px, em);
      background-color: @gray-5;
      
      
      
      &.input-0 {
        .respond-to-min(@tablet-min, { 
          padding-right: unit(8px / @base-font-size-px, em);
        })
      }
      
      &.input-1 {
        .respond-to-min(@tablet-min, { 
          padding-left: unit(8px / @base-font-size-px, em);
        })
      }      
      
      &.link {
        width: 20px;
        padding-left: 0;
        padding-right: 0;
        font-size: unit(20px / @base-font-size-px, em);
        color: @gray-80;
      }
  }
  
  tbody > tr:nth-child(odd) > th,
  tbody > tr:nth-child(odd) > td {
    background-color: @gray-5;
  }

  td {
    vertical-align: top;
  
    &.label-cell {
      text-align: right;
    }
    
    &.header-cell, 
    &.label-cell {
      padding-left: @grid_gutter-width;
    }
    
    &.link {
      span {
        display: none;
      }
    }
    
    &.error {
      .select-content {
        .highlight-dropdown;
      }
    }
  }
  
  .label-text {
    .webfont-medium();
    .u-inline-block;
    padding-right: 3px;
  }
  
  .alert-alt {
    margin-left: 1.4em;
    font-size: 0.875em;
    padding-top: 10px;
  }

  tr {
    border: none;
    
    &.header-row {
      h3 {
        padding-left: @grid_gutter-width * 1.5;
        padding-top: @grid_gutter-width;
      }
    }
    
    &.subhead-row {
      padding-bottom: 0;
      
      h4 {
        text-align: center;
        margin-bottom: 0;
      }
    }
    
    &.output-row {
      .label-text {
        .h5;
        border-bottom: none;
      }
    }
    
    &.padded-row {
      td.label-cell {
        padding-top: 1em;
      }
      td.link {
        padding-top: .9em;
      }
    }
    
    &.linked {
      td.input-1 {
        color: @gray-60;

        .select-content,
        input[type="text"],
        input[type="number"] {
          border-color: @gray-10;
        }

        .select-content {
          background: #fff url('../img/select.png') no-repeat right -63px;
        }

        select {
          color: @gray-60;
          font-style: normal !important;
        }        
      }
      td.link {
        span {
          display: block;
        }
      }
    }
    
    &.highlight {
      td {
        background-color: @green-20;

        .select-content,
        input[type="text"],
        input[type="number"] {
          border-width: 2px;
          border-color: @green;
        }
      }
    }
    
  }
  

}

.educational-note {
  .respond-to-min(795px, { 
  
    padding: 0;
    height: 0;
    width: 0;
  
    div {
      position: absolute;
      margin-left: @grid_gutter-width;
      width: 33%;
      border: 2px solid @green-20;
      padding: @grid_gutter-width/2;
      text-align: left;
    }
  
    p {
      color: @text;
      font-family: Georgia, "Times New Roman", serif;
      font-size: unit(@base-font-size-px / 16 * 100, %);
      line-height: @base-line-height;
      text-align: left;
    }
  
    .lc-results-table & {
      div {
         top: 0;
         margin-left: @grid_gutter-width/2;
       }
    }
  });
}

.lc-results-table {
  tr {
    position: relative;
  }
}

/* Tooltips */
.tooltip {
  .webfont-regular();
  .tooltip-inner {
    /*max-width: 325px;*/
  }
}


.help-text {
  display: none;
}

/* Title Heading */
.round-step {
  width: 1.5em;
  height: 1.5em;
  border-radius: 1.5em;
  line-height: 1.5;
  text-align: center;
  background-color: @green-20;
  float: left;
  margin-top: -3px;
  margin-right: 10px;

}

.with-link {
    & a {
    border-width: 0;
    border-style: dotted;
    border-color: #0072ce;
    color: #0072ce;
    text-decoration: none;
  }
}
