.account-content {
   h5 {
      font-size: 26px;
   }

   .bonus-program-table {
      margin-bottom: 10px;

      tr {
         &:nth-child(2n+1) {
            background-color: $gray-light;
         }

         td {
            padding: 10px 20px;

            &:last-child {
               font-weight: bold;
            }
         }
      }
   }

   @media screen and (min-width: $lg - 1) and (max-width: $xl - 1) {
      .bonus-program-table {
         tr {
            td {
               padding: 10px 8px;
            }
         }
      }
   }

   @media screen and (max-width: $sm - 1) {
      h5 {
         font-size: 24px;
      }
   }
}

.bonus-program-b2b {
   display: flex;
   width: 100%;
   margin-bottom: 10px;

   .table-first {
      padding-right: 20px;
   }

   .table-first, .table-second {
      width: 50%;
   }

   @media screen and (max-width: $lg - 1) {
      flex-direction: column;

      .table-first {
         padding-right: 0;
         padding-bottom: 10px;
      }

      .table-first, .table-second {
         width: 100%;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
      }
   }
}

.bonus-user {
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
   display: flex;
   align-items: center;
   padding: 26px 5px 26px 25px;
   background-color: $gray-light;

   .banner-wrapper {
      display: flex;
      justify-content: space-between;
      position: relative;
      padding-left: 75px;
      width: 100%;

      &::before {
         @include fonticon;

         content: $icons_bonus;
         color: $black;
         font-size: 44px;
         position: absolute;
         left: 10px;
         top: 45%;
         transform: translateY(-50%);
      }

      @media screen and (max-width: 520px) {
         display: block;
      }

      @media screen and (max-width: 420px) {
         padding-left: 50px;

         &::before {
            left: -6px;
         }
      }
   }

   .bonus-content-first, .bonus-content-second {
      display: flex;

      @media screen and (max-width: 1260px) {
         display: unset;

         .item {
            margin-bottom: 10px;
         }
      }
   }

   @media screen and (max-width: 520px) {
      .bonus-content-second {
         > .item {
            margin-top: 15px;
         }

         .item {
            margin-left: 0;
         }
      }
   }

   .bonus-content-first {
      .item {
         width: 135px;
         padding: 3px 0;
      }

      @media screen and (max-width: $xxl - 1) {
         .item {
            width: 220px;
         }
      }

      @media screen and (max-width: 520px) {
         display: block;
      }
   }

   .item {
      margin-right: 20px;
   }

   h3 {
      color: $text-muted;
      font-size: 14px;
      line-height: 1;
      margin-bottom: 0;
      font-weight: unset;
   }

   .value {
      color: $black;
      font-size: 16px;
      font-weight: 700;
      margin-bottom: 0;

      @media screen and (max-width: 649px) {
         font-size: 18px;
      }
   }

   .strong-price {
      font-weight: bold;
      color: $text-dark;
      font-size: 14px;
      margin-left: 5px;
   }

   .progress {
      color: $text-muted;
      padding-right: 15px;
      max-width: 325px;

      p {
         line-height: 1.3;
         margin-bottom: 5px;
      }
   }

   .bar {
      height: 9px;
      background: $white;
      border: 1px solid $border-color-alt;

      span {
         height: 8px;
         background: $green-light;
         display: flex;
      }
   }
}

.about-bonusprogram {
   background-color: $white;
   text-align: center;
   margin-bottom: 15px;
   padding: 15px 0;
   font-size: 14px;

   a {
      color: $text-dark;
   }
}

.bonusprogram-name {
   font-size: 16px;
}

.bonus-program-main-user {
   .all-products {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      margin-bottom: 30px;
   }
}

.bonus-program-info {
   .title-program {
      text-align: center;
   }

   .description-center {
      margin-bottom: 5px;
      text-align: center;
   }

   .smaller {
      text-align: center;
      font-size: 12px;
   }

   .all-products {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      margin-bottom: 30px;
   }
}

.bonus-program-question {
   background-color: $gray-light;
   padding: 25px 40px;
   margin-bottom: 40px;

   .wpj-row {
      display: flex;
      align-items: center;
      justify-content: center;
   }

   @media screen and (min-width: $md - 1) and (max-width: $xl - 1) {
      .wpj-col-3 {
         flex: 0 0 50%;
         max-width: 50%;

         &:first-child, &:nth-child(2) {
            margin-bottom: 10px;
         }
      }
   }


}
