.quote {

  @media @phone {
    margin-top: 30px;
  }

  h1 {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
  }
  .back-link {
    .removeLinkDecoration;
    font-size: 40px;
    float: left;
    margin-right: 20px;
    margin-top: 8px;
  }
  .tariffsPanel {
    padding-left: 0;
    .panel-default {
      background-image: url("./LeafBackground.png");
      -webkit-box-shadow: 5px 0px 15px 0px rgba(67, 134, 179, 0.15);
      box-shadow: 5px 0px 15px 0px rgba(67, 134, 179, 0.15);
      background-repeat: no-repeat;
      background-size: 100% @tariff-header-height-desktop;
      border-bottom-left-radius: 0;
      position: relative;
      @media @tablet {
        background-size: 100% @tariff-header-height-tablet;
      }
      &:before {
        content: "";
        height: @tariff-header-height-desktop;
        position: absolute;
        border-radius: @border-radius-base @border-radius-base 0 0;
        top: 0;
        left: 0;
        right: 0;
        #gradient.horizontal(fadeout(@primary-gradient-start, 10%), fadeout(@primary-gradient-end, 10%));
        @media @tablet {
          height: @tariff-header-height-tablet;
        }
      }
    }
    &--noSaving {
      .panel-default {
        background-size: 100% @tariff-header-height-desktop - @tariff-header-saving-height-desktop;
        &:before {
          height: @tariff-header-height-desktop - @tariff-header-saving-height-desktop;
        }
        @media @tablet {
          background-size: 100% @tariff-header-height-desktop - @tariff-header-saving-height-tablet;
           &:before {
          height: @tariff-header-height-desktop - @tariff-header-saving-height-tablet;
        }
        }
      }
    }
  }
  .labelColumn {
   .page-bg-gradient;
    padding: 0;
    margin-top: @tariff-header-height-desktop;
    border-bottom-left-radius: 5px;
    @media @tablet {
      margin-top: @tariff-header-height-tablet;
    }
    .priceCell:extend(.tariffPropertyCell) {
      height: @tariff-price-cell-height;
    }
    .labelCell:extend(.tariffPropertyCell) {
      color: @gray-dark;
      p {
        margin: 0;
        line-height: 1;
      }
    }
    &--noSaving{
      margin-top: @tariff-header-height-desktop - @tariff-header-saving-height-desktop;
      @media @tablet{
        margin-top: @tariff-header-height-desktop - @tariff-header-saving-height-tablet;
      }
    }
  }

  .mobile-container {
    width: 100%;
    overflow-x: scroll;
    white-space: nowrap;
    margin-top: 10px;
  }
}

.tariffsContainer {
  margin-top: 0;
  display: flex;
  justify-content: center;
  align-items: stretch;
  .clearfix();
  @media @phone {
    display: block;
    margin: 0;
    margin-top: 5px;
  }
}

.bottom-text {
  margin-top: 50px;
}

.payment-method-modal {
  .modal-body {
    width: 100%;
  }
}

.comparisionContent {
  margin-top: 30px;
  text-align: center;
  &__img {
    display: inline-block;
    width: 60px;
    height: auto;
    fill: #bfbfbf;
  }
  &__title {
    color: #808080;
  }
  &__description {
    margin-bottom: 26px;
    padding: 10px;
  }
}

.tariffPropertyCell {
  border-bottom: @tariff-border;
  padding: 15px 10px;
  font-size: @font-size-small;
  line-height: 1;
  color: @gray-dark;
  p {
    margin: 0;
    line-height: 1;
  }
  .tooltipContainer {
    margin-left: 0;
    margin-top: -2px;
  }
  &--doubleHeight {
    height: 59px;
  }
}

.tariffDisplay--mobile {
  width: 80%;
  display: inline-block;
  margin-left: 4%;
  margin-right: 4%;
  &:first-child{
    margin-left:10%;
  }
  &:last-child{
    margin-right:10%;
  }
  &__header {
    background-image: url("LeafBackground.png");
    background-repeat: no-repeat;
    background-size: auto 100%;
    border-bottom-left-radius: 0;
    padding: 5px 20px;
    margin: 0;
    margin-bottom: 10px;
    height: @tariff-header-height-mobile;
    width: 100%;
    color: #fff;
    border-top-left-radius: @border-radius-base;
    border-top-right-radius: @border-radius-base;
    position: relative;

    // Puts content above background gradient.
    > * {
      position: relative;
    }

    &:before {
        content: "";
        position: absolute;
        border-radius: @border-radius-base @border-radius-base 0 0;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        #gradient.horizontal(fadeout(@primary-gradient-start, 10%), fadeout(@primary-gradient-end, 10%));
      }

    div.description_content {
      margin: 0;
      display: block;
      font-size: 14px;
      line-height: 1.5;
      span {
        color: #fff;
        white-space: normal;

        @media @phone {
          display: none;
        }
      }
    }
  }
  .tariffPropertyCell {
    p span {
      font-weight: 800;
    }
  }
  &__price:extend(.tariffPropertyCell) {
    height: 215px;
    margin-top: 0;
    padding: 10px;
    p {
      font-size: @font-size-h2;
      font-weight: 700;
      color: @brand-primary;
      line-height: 1;
    }
    span {
      font-size: @font-size-h6;
      &.description {
        font-size: @font-size-base;
        color: @gray-dark;
        font-weight: 400;
      }
    }
  }
}

.tariffPropertyCell,
.quote .labelColumn .priceCell,
 .quote .labelColumn .labelCell,
 .tariffDisplay__price,
 .tariffDisplay__checkCell,
 .tariffDisplay--mobile__price {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding: 15px 10px;
    font-size: 14px;
    line-height: 1;
}

.tariffDisplay {
    -webkit-box-shadow: inset 10px 0 7px -8px rgba(67,134,179,.15);
    -moz-box-shadow: inset 10px 0 7px -8px rgba(67,134,179,.15);
    box-shadow: inset 10px 0 7px -8px rgba(67,134,179,.15);
    margin: 0;
    padding: 0;
    position: relative;
    text-align: center;
    -webkit-flex-grow: 1;
    -ms-flex-grow: 1;
    flex-grow: 1;
    -webkit-flex-basis: 0;
    -ms-flex-basis: 0;
    flex-basis: 0;

      .btn {

        @media @tablet {
          font-size: 14px;
          padding: 6px 20px;
        }

      }

    &--mobile .tariffPropertyCell p span {
        font-weight: 800;
    }

    &__header {
      margin: 0;
      margin-bottom: 10px;
      height: 125px;
      width: 100%;
      color: #fff;
      padding: 15px;

      @media @tablet {
        height:100px
      }

      h3 {
        margin-top: 0;
      }
    }

    &__checkCell  i{
      color: #0a9928;
      line-height: 2;
    }

    &__til {
      font-size: 10px;
      line-height: 14px;
      margin: 0;
      display: inline-block;
      width: 150px;
  }

  &__price {
    height: 129px;
    padding-left: 5px;
    padding-right: 5px;

    p {
      font-size: 28px;
      font-weight: 700;
      margin-top: 5px;
      margin-bottom: 18px;
      color: @brand-primary;
      line-height: 1;
    }
  }

  &__saving {
    display: block;
    padding: 10px;
    color: white;
    background-color: rgba(0, 0, 0, 0.1);
    width: 100%;

    p {
      margin: 0;
    }

    @media @phone {
      p {
        white-space: nowrap;
      }
    }
  }

  .description_content {
    @media (max-width: 767px) {
          color:#4c4c4c
      }
      @media (max-width: 1200px) {
        display:none
      }
    }

}