.plan-sidebar {
  .bolton-free {
    display: block;
    color: @brand-primary;

    &-price {
      display: inline-block;
      position: relative;

      &:before {
        content: "";
        width: 160%;
        left: -30%;
        top: 50%;
        position: absolute;
        border-bottom: 2px solid @gray-light;
        transform: rotate(-10deg) translateY(-50%);
      }

    }

  }
  .panel-heading-texture {
      background-image: url("../common/images/bg-leaf.png");
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      color: white;
      position: relative;
      z-index: 1;
      .tidy-children;

      &:before {
          content: "";
          height: 100%;
          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%));
          z-index: -1;
      }
      .panel-title {
          font-size: @font-size-h3;
      }
  }
  .benefits-list {
      list-style-type: none;
      padding: 0;
      > li {
          position: relative;
          padding-left: 30px;
          margin-bottom: 5px;
          max-width: 360px;
          i {
              position: absolute;
              top: 0;
              left: 0;
              line-height: 1.2;
          }
      }
  }
  .panel-merge {
      margin-top: -26px;
      position: relative;
  }
  .panel-drawer {
      margin-top: -23px;
      position: relative;
      background: @gray-lighter;

      @media @bolt-on-drawer-breakpoint {
          border-top-left-radius: 0;
          border-bottom-left-radius: 0;
          border-left: 0;
          margin-left: -@grid-gutter-width;
          margin-top: 0;
          .animation(am-showDrawer .5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both .2s);
      }
  }
  .drawer-row {
      @media @bolt-on-drawer-breakpoint {
          display: flex;
          .panel {
              margin-bottom: 0;
              height: 100%;
          }
          + .row .panel-merge {
              margin-top: -1px;
              z-index: 2;
          }
      }
  }
  .drawer-wrapper {
      @media @bolt-on-drawer-breakpoint {
          padding-top: 15px;
          padding-bottom: 15px;
      }
  }
  .drawer-neighbour {
      @media @bolt-on-drawer-breakpoint {
          position: relative;
          z-index: 2;
      }
  }
  .text-gas {.text-info;}
  .text-electricity {.text-warning;}
  .fuel-icon {
      width: 12px;
      display: inline-block;
      vertical-align: middle;
      margin-right: 10px;
  }
  .line-title {
      position: relative;
      margin: 0 -20px 10px;
      text-align: center;

      &:before {
          content: '';
          position: absolute;
          left: 0;
          right: 0;
          top: 50%;
          height: 1px;
          background: @gray-lighter;
      }

      > * {
          background: white;
          display: inline-block;
          margin: 0 auto;
          position: relative;
          padding: 0 10px;
      }
  }
  .bolt-on-basket {
      &.has-bolt-ons {
          padding-top: 15px;
      }
      @media @bolt-on-basket-breakpoint {
          position: fixed;
          bottom: 0;
          left: 0;
          right: 0;
          z-index: 100;
          background: white;
          padding-top: 0 !important;
          padding-bottom: 10px;
          .box-shadow(0px 0px 40px 0px rgba(67, 134, 179, 0.20));
          border-top: 1px solid @panel-default-border;
          .panel {
              border: none;
              margin-bottom: 0;
              margin-top: 0;
              overflow: visible;
              border-radius: 0;
              .box-shadow(none);
          }
          .panel-body {
              padding: 0;
          }
      }
      .btn-block {
          padding-left: 0;
          padding-right: 0;
      }
  }
  .bolt-on-basket_inner {
      .animation(am-fadeInbasket .5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both .2s);

      @media @bolt-on-basket-breakpoint {
          max-width: 400px;
          margin: 0 auto;
          .animation(none);
      }
  }
  .bolt-on-save {
      .animation(am-fadeInbasket .5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both .2s);

      @media @bolt-on-basket-breakpoint {
          .animation(none);
      }
  }
  .bolt-on-save.has-bolt-ons,
  .has-bolt-ons .bolt-on-basket_inner {
      .animation-delay(.7s);
  }
  .bolt-on-basket_accordion-toggle {
      @media @bolt-on-basket-breakpoint {
          margin: 0 -(@grid-gutter-width / 2);
          padding: 0 (@grid-gutter-width / 2);
          padding-bottom: 10px;
          padding-top: 10px;
          .tidy-children;
      }
  }
  .bolt-on-basket_accordion-indicator {
      .transition(all .2s ease-in-out);
      font-size: @font-size-small;
      float: right;
      display: none;

      &--open {
          .rotate(180deg);
      }

      @media @bolt-on-basket-breakpoint {
          display: inline-block;
      }
  }
  .bolt-on-basket_accordion {
      @media @bolt-on-basket-breakpoint {
          max-height: 0;
          overflow: hidden;
          .transition(max-height .2s ease-in-out);

          &--open {
              max-height: 200px;
              display: block;
          }
      }
  }
  .basket-total {
      @media @bolt-on-basket-breakpoint {
          margin: 0 -(@grid-gutter-width / 2);
          padding: 0 (@grid-gutter-width / 2);
          border-top: 1px solid @panel-default-border !important;
          padding-top: 10px;
      }
  }
  .basket-total-price {
      font-size: 16px;
      line-height: 32px;
  }
  .basket-total-icon {
      display: none;
      width: 24px;
      margin-left: 5px;

      @media @bolt-on-basket-breakpoint {
          display: inline-block;
      }
      img {
          .animation(am-showBasketIcon .3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both);
      }
  }
  .active-bolt-ons {
      max-height: 0;
      overflow: hidden;
      margin-bottom: 0;
      .transition(max-height .3s ease-in-out);

      &.active {
          max-height: 100px;
      }

      @media @bolt-on-basket-breakpoint {
          margin-bottom: 10px;
      }
  }
  .active-bolt-on-price {
      padding-left: 0;

      a {
          display: block;
      }
  }
  .active-bolt-on-item {
      padding-left: 34px;
      min-height: 34px;
      position: relative;
  }
  .active-bolt-on-title {
      line-height: 1.3;
      display: inline-block;
  }
  .basket-bolt-on-icon {
      width: 24px;
      position: absolute;
      top: 0;
      left: 0;
  }
  .final-price {
      text-align: right;
      font-size: @font-size-h3;
      line-height: 1;
      margin: 0;
  }
  .bolt-on-basket-overlay {
      visibility: hidden;
      background: fadeout(black, 60%);
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      z-index: 99;
      opacity: 0;
      .transition(opacity .5s);

      &--visible {
          @media @bolt-on-basket-breakpoint {
              opacity: 1;
              visibility: visible;
          }
      }
  }
  .bolt-on {
      margin-bottom: 0;
  }
  .bolt-on-header {
      display: flex;
      align-items: center;
  }
  .bolt-on-header-image {
      width: 30%;
      max-width: 80px;
  }
  .bolt-on-header-title {
      padding-left: 10px;
      margin: 0;
  }
  .bolt-on-benefits {
      margin: 15px 0;
      padding-left: 18px;

      > li {
          margin-bottom: 10px;

          &:last-child {
              margin-bottom: 0;
          }
      }
  }
  .drawer-title,
  .basket-title {
      margin-top: 0;
  }
  hr {
      margin: 22px 0;
      border-top: 1px solid @gray-lighter;
      display: block
  }
  .planInfo__callToActionContainer {
      margin: 0 auto;
      padding-top: 15px;
      padding-bottom: 30px;
      max-width: 400px;

      &--error {
          padding-bottom: 95px;
      }
  }

  .panel-info {
      .pointer {
        cursor: pointer;
      }
  }
}

// Footer needs padding on this page;
.layout-has-cart {
    @media @bolt-on-basket-breakpoint {
        .footer {
            padding-bottom: 120px;
        }
    }
}

@-webkit-keyframes am-showDrawer {.am-showDrawer}
@-moz-keyframes am-showDrawer {.am-showDrawer}
@-ms-keyframes am-showDrawer {.am-showDrawer}
@-o-keyframes am-showDrawer {.am-showDrawer}
@keyframes am-showDrawer {.am-showDrawer}
.am-showDrawer () {
  from {
    .transform(translate(-100%, 0));
  }
  to {
    .transform(translate(0));
  }
}
@-webkit-keyframes am-fadeInbasket {.am-fadeInbasket}
@-moz-keyframes am-fadeInbasket {.am-fadeInbasket}
@-ms-keyframes am-fadeInbasket {.am-fadeInbasket}
@-o-keyframes am-fadeInbasket {.am-fadeInbasket}
@keyframes am-fadeInbasket {.am-fadeInbasket}
.am-fadeInbasket {
  from {
    opacity: 0;
    .transform(translate(0, 50px));
  }

  to {
    opacity: 1;
    .transform(translate(0));
  }
}
@-webkit-keyframes am-showBasketIcon {.am-showBasketIcon}
@-moz-keyframes am-showBasketIcon {.am-showBasketIcon}
@-ms-keyframes am-showBasketIcon {.am-showBasketIcon}
@-o-keyframes am-showBasketIcon {.am-showBasketIcon}
@keyframes am-showBasketIcon {.am-showBasketIcon}
.am-showBasketIcon {
  0% {
    .transform(scale(0));
  }
  70% {
    .transform(scale(1.2));
  }
  100% {
    .transform(scale(1));
  }
}