.tariffDisplay {
  .box-shadow(inset 10px 0px 7px -8px rgba(67, 134, 179, 0.15));
  margin: 0;
  padding: 0;
  position: relative;
  text-align: center;
  .flex-grow(1);
  .flex-basis(0);
  &__header {
    margin: 0;
    margin-bottom: 10px;
    height: 125px;
    width: 100%;
    color: #fff;
    padding: @tariff-internal-padding;
    @media @tablet {
      height: 100px;
    }
    h3 {
      margin-top: 0;
    }
  }
  &__saving {
    font-size: 16px;
    display: block;
    padding: 10px;
    color: white;
    background-color: rgba(0, 0, 0, 0.1);
    width: 100%;
    .amount {
      font-weight: 700;
      @media @tablet {
        display: block;
      }
      &--directDebit {
        @media @tablet {
          display: inline;
        }
      }
    }
    p {
      margin: 0;
      white-space: nowrap;
    }
  }
  &__price:extend(.tariffPropertyCell) {
    height: @tariff-price-cell-height - 1;
    padding-left: 5px;
    padding-right: 5px;
    p {
      font-size: @font-size-h3;
      font-weight: 700;
      margin-top: 5px;
      margin-bottom: 18px;
      color: @brand-primary;
      line-height: 1;
      span {
        font-size: @font-size-h6;
      }
    }
  }
  &__checkCell:extend(.tariffPropertyCell) {
    i {
      color: @brand-primary;
      line-height: 2;
    }
  }
  .btn {
    @media @tablet {
      font-size: @font-size-small;
      padding: 6px 20px;
    }
  }
  &__til {
    font-size: 10px;
    line-height: 14px;
    margin: 0;
    display: inline-block;
    width: 150px;
    @media @tablet {
      display: inline;
      width: 100%;
    }
  }
}
.tariffCondensed {
  margin-bottom: 10px;
  padding: @tariff-internal-padding;
  border-radius: 6px;
  text-align: left;
  color: #fff;
  position:relative;
  &:before{
    content:"";
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    border-radius: 5px;
    position: absolute;
     #gradient.horizontal(fadeout(@primary-gradient-start, 20%), fadeout(@primary-gradient-end, 20%));
  }
  &__header {
    position:relative;
    margin-bottom: @vertical-margin/2;
  }
  &__name {
    margin:0;
    display: inline-block;
  }
  &__price {
    font-family: @font-family-sans-serif;
    margin:0;
    vertical-align: top;
  }
  &__body {
    position:relative;
    font-size: @font-size-small;
    &:after{
      content:"";
      display:block;
      clear: both;
      margin-bottom:@vertical-margin/2;
    }
  }
  &__period {
    vertical-align: top;
  }
  .btn{
    width:200px;
  }
}
@tariffAverageHeight:180px;
.generateLeafBg(4);

.generateLeafBg(@n, @i:0) when (@i < @n){
  .tariffCondensedBg-@{i}{
    background-image:url(img/backgrounds/leaf-vertical-bg.jpg);
    background-position-y: (@i*@tariffAverageHeight)*-1;
  }
  .generateLeafBg(@n, (@i + 1));
}


.description_content {
  margin: 0;
  display: block;
  font-size: @font-size-small;
  line-height: 1.5;
  @media @phone {
    color: #4c4c4c;
  }
  @media (max-width:@screen-lg) {
    display: none;
  }
}

.benefitsItem__icon {
  color: @brand-alt;
  margin-right: 20px;
}