.ui-helper-hidden-accessible {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.ui-buttonset {
  display: $buttonset-display;
  width: $buttonset-width;
  border: none;
  padding: 0;
  background: none;

  @include box-shadow(none);
  @include border-radius(0);

  &:after {
    display: block;
    content: "";
    clear: both;
  }

  input,
  .ui-state-default {
    display: $buttonset-button-display;
  }

  .ui-state-default {
    vertical-align: middle;
    border: none;
    background: none;
    margin: 0;
    padding: 0;
    font-weight: normal;
    width: auto;
    font-family: Arial, Verdana, sans-serif !important;

    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;

    .ui-button-text {
      display: inline-block;
      color: $buttonset-button-color;
      font-size: $buttonset-font-size;
      border: $buttonset-button-border-color $buttonset-button-border-size solid;
      padding: $buttonset-button-padding;
      margin: $buttonset-button-margin;
      cursor: pointer;
      width: 100%;
      height: 100%;
      text-align: center;

      @include gradient-vertical($buttonset-button-bg-start-color, $buttonset-button-bg-end-color);
    }

    &.ui-corner-left .ui-button-text {
      @include border-left-radius($buttonset-border-radius);
    }

    &.ui-corner-right .ui-button-text {
      @include border-right-radius($buttonset-border-radius);
    }

    &.paypal .ui-button-text,
    &.paypal.ui-state-active .ui-button-text,
    &.credit_card .ui-button-text,
    &.credit_card.ui-state-active .ui-button-text,
    &.wire_transfer .ui-button-text,
    &.wire_transfer.ui-state-active .ui-button-text {
      display: block;
      width: 102px;
      height: 66px;
      background-image: url($buttonset-payment-method-sprite);
      background-repeat: no-repeat;
      margin-right: -($buttonset-button-border-size * 2);
    }

    &.paypal .ui-button-text { background-position: 19px 10px; }
    &.credit_card .ui-button-text { background-position: -79px 9px; }
    &.wire_transfer .ui-button-text { background-position: -180px 9px; }

    &.ui-state-active {

      .ui-button-text {
        color: $buttonset-button-active-color;
        border-color: $buttonset-button-active-border-color;
        @include gradient-vertical($buttonset-button-active-bg-start-color, $buttonset-button-active-bg-end-color);
      }

      &.paypal .ui-button-text { background-position: 19px -63px; }
      &.credit_card .ui-button-text { background-position: -79px -63px; }
      &.wire_transfer .ui-button-text { background-position: -180px -63px; }
    }

    
    
  }
}



.writer_level_buttons {
  display: inline-block;
  vertical-align: top;

  .writer_level_radio {
    // float: left;
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin: $level-buttonset-margin;

    .radio {
      position: absolute;
      left: 50%;
      top: 85px;
      margin: 0 0 0 -15px;

      &,
      span,
      input {
        width: 30px;
        height: 30px;
      }

      span {
        background-position: -4px -332px;
        &.checked { background-position: -136px -332px; }
      }

      &.active span {
        background-position: -37px -37px -332px;
        &.checked { background-position: -169px -332px; }
      }

      &.hover,
      &.focus {
        span {
          background-position: -70px -70px -332px;
          &.checked { background-position: -202px -332px; }
        }

        &.active span {
          background-position: -103px -332px;
          &.checked { background-position: -235px -332px; }
        }
      }

      &.disabled,
      &.disabled.active {

        span {
          background-position: -268px -332px;
          &.checked { background-position: -301px -332px; }
        }
      }
    }

    .ui-state-default {
      display: block;
      width: $level-buttonset-width - ($level-buttonset-border-size * 2);
      min-height: $level-buttonset-min-height - ($level-buttonset-border-size * 2);
      border: $level-buttonset-border-color $level-buttonset-border-size solid;
      padding-bottom: 2px;
      filter: none;

      @include border-radius(0);

      .ui-button-text {
        background: none;
        border: none;
        padding: 0;
        margin: 0;
        color: $level-buttonset-color;

        @include border-radius(0);

        .writer_level_item {
        }

        .writer_level_title,
        .customer_service_title {
          width: 100%;
          min-height: 55px;
          background: $level-buttonset-title-bg-color;
          color: $level-buttonset-title-color;
          position: relative;
          text-align: center;

          span {
            display: block;
            padding: 5px 0 5px 0;
            margin: 0 0 6px 0;
            font-size: 20px;
            line-height: 20px;
            text-transform: uppercase;
            color: $level-buttonset-title-heading-color;
            background: url(/assets/ui-kit/buttonset_line.png) bottom center no-repeat;
          }

          p {
            font-size: 16px;
          }

          &:after {
            $half_width: ($level-buttonset-width - ($level-buttonset-border-size * 2)) / 2;

            display: block;
            content: "";
            position: absolute;
            top: 100%;
            left: 0;
            width: 0;
            height: 0;
            border-style: solid;
            background: none;
            border-width: $level-buttonset-title-arrow-height $half_width 0 $half_width;
            border-color: $level-buttonset-title-bg-color transparent transparent transparent;
          }
        }

        .writer_level_content {
          margin: 65px 0 0 0;
          line-height: 18px;
          width: $level-buttonset-width - 10px;
          min-height: 72px;

          .writer_level_details {
            span {
            }
          }
        }

        .customer_service_tooltip {
          display: none;
          background: $tooltip-drop-bg-color;
          color: $tooltip-drop-color;
          font-size: $tooltip-drop-font-size;
          padding: $tooltip-drop-padding;
          margin: 0 0 10px 0;
          position: absolute;
          bottom: 100%;
          left: -10px;
          right: -10px;
          z-index: 100;

          &:after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            width: 0;
            height: 0;
            border-style: solid;
            background: none;
            margin: 0 0 0 -5px;
            border: 5px solid transparent;
            border-top: 5px solid $tooltip-drop-bg-color;
          }
        }

        .customer_service_item:hover .customer_service_tooltip {
          display: block;
        }
      }

      &.ui-state-active {
        width: $level-buttonset-width - ($level-buttonset-active-border-size * 2);
        min-height: $level-buttonset-min-height - ($level-buttonset-active-border-size * 2) + 2;
        border: $level-buttonset-active-border-color $level-buttonset-active-border-size solid;
        padding-bottom: 0;
        filter: none;
        
        .ui-button-text {
          color: $level-buttonset-active-color;

          .writer_level_item {

            .writer_level_title {
              background: $level-buttonset-active-title-bg-color;
              color: $level-buttonset-active-title-color;
            }
          }
        }
      }
    }
  }
}