@estimated-green: @brand-success;
@invaded-area-height: 300px;
#get-trusted-quote-exp {
  .alert-danger {
    font-size: 12px;
  }
  .has-error .input-group {
    *:first-child {
      border-bottom-left-radius: 0;
    }
    *:last-child {
      border-bottom-right-radius: 0;
    }
  }
  .container {
    margin-top: 0;
    @media @phone{
      padding-left:5px;
      padding-right: 5px;
    }
  }
  h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
  }
  .dashed {
    margin-bottom: @vertical-margin;
  }
  .checkbox {
    margin-top: 0;
    margin-bottom: @vertical-margin;
    display: inline-block;
  }
  .header-area {
    @media @phone {
      padding-top: @vertical-margin;
    }
    text-align: center;
    color:@gray-darker;
    .page-bg-gradient;
    .invaded-area {
      height: @invaded-area-height;
    }
    h3 {
      margin-top: 0;
      margin-bottom: @vertical-margin;
      @media @phone {
        margin-top: @vertical-margin;
      }
    }
  }
  .content-area {
    background-color: @gray-lighter;
    .mobile-nav{
      padding: 0 20px;
      .radio label{
        font-size:@font-size-base;
        margin-bottom:@vertical-margin;
        &:first-child {
          margin-right: 15px;
        }
      }
    }
    .usage-input {
      display: inline-block;
      width: 100px;
    }
    .content {
      margin-top: -@invaded-area-height;
      & > .panel {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-top: none;
        border-left: @border-gray;
        border-right: @border-gray;
        margin-bottom: 60px;
        overflow: visible;

        .panel-body {
          padding-bottom: @vertical-margin;
          padding: 20px 50px;
          @media @phone{
            padding-left:10px;
            padding-right: 10px;
          }
        }
      }
    }
  }
  /* supplier tab content */
  .supplier-usage {
    .electricity-section {
      overflow: visible;
      z-index: auto;

      select, input {
        color: @electricity-color;
      }
      .panel-heading {
        cursor: pointer;

        &:before {
          background-color: @electricity-color;
        }
        .panel-title > a:after {
          color: @electricity-color;
          ;
        }
      }
    }
    .panel-collapse{
      .panel-body{
        @media @phone{
          padding-left:10px;
          padding-right:10px;
        }
      }
    }
    .gas-section {
      overflow: visible;
      z-index: auto;

      select, input {
        color: @gas-color;
      }
      .panel-heading {
        cursor: pointer;

        &:before {
          background-color: @gas-color;
        }
        .panel-title > a:after {
          color: @gas-color;
        }
      }
    }

    .supplier {
      display: inline-block;
      vertical-align: top;
      @media @phone {
        margin-bottom: @vertical-margin;
      }
      &__selector {
        width: 300px;
        margin-right: 12px;
        @media @phone {
          width: 100%
        }
      }

      &__tariff-selector {
        width: 255px;
        @media @phone {
          margin-left: 0;
          width:100%;
        }
      }

      &__label {
        padding-top: 10px;
        margin-right: 12px;
        @media @phone {
          padding-top: 0;
        }
      }
    }

    .usage-input {
      display: inline-block;
      vertical-align: top;
      @media @phone {
        margin-bottom: @vertical-margin;
      }
      &__use {
        width: 140px;
        margin-right: 20px;
        @media @phone{
          width:100%;
        }
      }
      &__amount {
        width: 140px;
        margin-right: 20px;
        input {
          padding-left: 18px;
        }
        @media @phone{
          width:100%;
        }
      }

      &__period {
        margin-left: 20px;
        width: 130px;
         @media @phone{
          width:100%;
          display:table-cell;
          padding-left:15px;
        }
      }
      &__label {
        display: inline-block;
        padding-top: 10px;
         @media @phone{
          display:table-cell;

        }
      }
    }
  }
  /* estimated tab content */
  .estimated-usage {
    @media @phone{
      padding: 0 20px;
    }
    select {
      color: @estimated-green;
      text-overflow: ellipsis;
    }
    h4 {
      margin-bottom: @vertical-margin;
    }
    .row {
      margin-bottom: @vertical-margin;
    }
    .form-group > span{
      margin-right: 10px;
    }
    .styled-select {
      display: inline-block;
      margin-left: 0px;
      margin-right: 15px;
      margin-bottom:10px;
      .number-of-rooms, .number-of-occupants {
        width: 100px;
      }
      .insulation-quality {
        width: 150px;
      }
      .peak-energy-times {
        width: 200px;
      }
    }
  }
}