.product-charges {
   display: flex;
   flex-direction: column;
   margin-bottom: 12px;

   .custom-checkbox {
      border: 1px solid $border-color;
      font-weight: normal;
      padding: 12px 12px 12px calc(#{$custom-control-size} + 24px);
      line-height: 1;
      margin-bottom: 18px;
      display: flex;
      align-items: center;

      .title {
         color: $text-dark;
         font-size: $font-size-base;
         vertical-align: middle;
      }

      .price {
         color: $text-dark;
         padding: 0 10px;
         margin-left: auto;
         white-space: nowrap;
      }

      .custom-control-indicator {
         top: calc(50% - #{$custom-control-size} / 2);
         left: 12px;
      }
   }

   .charge-product {
      margin-right: auto;
      display: flex;
      align-items: center;

      .product-title {
         max-width: 200px;
      }

      .img {
         width: 50px;
         padding: 3px;
         border: 1px solid $border-color;
         margin: 0 10px;
      }
   }

   .charge-tooltip {
      .wpj-tooltip {
         display: none;
         left: 0;
         bottom: 100%;
      }

      @include haf {
         .wpj-tooltip {
            display: block;
         }
      }
   }
}
