@import 'css/master/settings/settings';

h1 {
  margin-bottom: 20px;
  padding: 0;
  font-weight: $fontWeightNormal;
  @include font-size($baseFontSize + 14);
}

#inkTonerWrapper, #autoReplenishWrapper, #enrollmentWrapper {
  * {
    @include box-sizing();
  }

  h2 {
    font-weight: $fontWeightNormal;
    margin-bottom: 20px;
    padding: 0;
    @include font-size($baseFontSize + 8);
    &.rrStyle {
      display: none;
    }
    .results_count {
      margin-left: 40px;
      color: $gray;
      @include font-size($baseFontSize + 2);
    }
  }

  h3, h4 {
    margin-bottom: 20px;
    padding: 0;
    font-weight: $fontWeightNormal;
    @include font-size(16px);
  }

  h4 {
    padding-top: 40px;
  }

  .line {
    height: 1px;
    width: 100%;
    display: block;
    line-height: 0;
    font-size: 0;
    background: $grayLight;
    margin: 10px 0;
    @include clearfix();
  }

  .row {
    float: left;
    @include clearfix();

    &.col1 {
      width: 234px;
    }
    &.col2 {
      width: 471px;
    }
    &.col3 {
      width: 713px;
    }
    &.col4 {
      width: 954px;
    }
  }

  .svg_printer {
    display: inline-block;
    width: 100%;
    text-align: center;
    margin: 10px 0 3px 0;
    fill: $grayLight;
    &.svg_100x100 {
      svg {
        width: 100px;
        height: 100px;
      }
    }
    &.svg_65x65 {
      margin: 0;
      svg {
        width: 65px;
        height: 65px;
        margin: 0;
      }
    }
    &.svg_68x68 {
      margin: 0;
      svg {
        width: 68px;
        height: 68px;
        margin: 0;
        fill: $gray;
      }
    }
  }

  .svg_25x25 {
    svg {
      width: 25px;
      height: 25px;
    }
  }

  .carouselLoadingForLazyLoad {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9;
    background: rgba(255, 255, 255, 0.8) url('//media.officedepot.com/image/upload/f_auto,q_auto/gtools/images/common/searchbrowse/buttons/ellipsis.png') 50% 0 no-repeat;
  }

  .divider {
    background-color: $grayLight;
    height: 5px;
    margin-left: 5px;
    width: 100%;
  }

  .ink_error_msg {
    display: none;
    clear: both;
    padding-top: 10px;
  }

  .section_open_close {
    width: 25px;
    height: 25px;
    float: left;
    margin: 3px 15px 0 0;
    display: inline-block;
  }

  section.toggle {
    border-top: 1px solid $grayLight;
    -webkit-transition: max-height cubic-bezier(.62,.28,.23,.99) 0.3s;
    -moz-transition: max-height cubic-bezier(.62,.28,.23,.99) 0.3s;
    -o-transition: max-height cubic-bezier(.62,.28,.23,.99) 0.3s;
    transition: max-height cubic-bezier(.62,.28,.23,.99) 0.3s;
    h2 {
      padding: 15px 0;
      margin: 0;
      cursor: pointer;
    }
    &.closed {
      overflow: hidden;
      max-height: 62px;
      .svg_minus_sign {
        display: none;
      }
    }
    &.opened {
      max-height: 315px;
      .svg_plus_sign {
        display: none;
      }
    }
  }

  #inkTonerRRTagHolder {
    width: 100%;
  }

  #inkTonerRRTagHolder.opened {
    max-height: 455px;
  }

  .rr_zones .moduleStructContent {
    border: none;
    width: 100%;
  }

  .rr_atc_actions_qty {
    box-sizing: initial;
  }
}

#seoSection {
  @include font-size(11px);
  margin-top: 20px;

  h3 {
    @include font-size(13px);
    padding-top: 40px;
  }
}

#seoSection #inkTonerV2SEO{
  h3 {
    @include font-size(15px);
    font-weight: bold;
    padding-top: 10px;
  }
  p {
    padding: 12px 0;
  }
}

#brandDrivenTopBanner {
  margin-top: 12px;
  img {
    width: 100%;
  }
}