.outline-style {
   border: 1px solid #1e1e1e;
   padding: 32px;
   border-radius: 24px;
}

.input-group-v2 {
   display: flex;
   flex-direction: column;
   align-items: unset;
   gap: 5px;
   margin: 0;
   height: 100%;
   justify-content: center;

   label {
      color: #1e1e1e;
      font-size: 20px;
      font-weight: 500;
   }

   input.form-control {
      width: 100%;
      border-radius: 8px !important;
      margin: unset !important;
      border-color: #929292;
   }

   input.form-control::placeholder {
      color: #727272;
   }

   h5 {
      font-size: 20px;
      color: #1e1e1e;
      font-weight: 700;
      margin-bottom: 5px;
   }
}

.quantity-label {
   color: #1e1e1e;
   font-size: 20px;
   font-weight: 500;
   margin-bottom: 5px;
}

/* Stepper box */
.quantity-stepper {
   display: flex;
   align-items: center;
   justify-content: space-between;
   border: 1px solid #929292;
   border-radius: 8px;
   padding: 11px;
   background-color: #fff;
   height: 48px;
}

.quantity-stepper input[type="number"] {
   width: 60px;
   border: none;
   text-align: center;
   font-size: 20px;
   color: #727272;
   outline: none !important;
   background: transparent;
   height: 22px;
}

.quantity-stepper input[type="number"]::-webkit-inner-spin-button,
.quantity-stepper input[type="number"]::-webkit-outer-spin-button {
   -webkit-appearance: none;
   margin: 0;
}

.quantity-stepper input[type="number"] {
   -moz-appearance: textfield;
}

.quantity-stepper button {
   background: none;
   border: none;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.2s ease;
   padding: 0;
}

.radio-btns {
   display: flex;
   gap: 5px 20px;
   flex-wrap: wrap;

   .form-check {
      padding: 0;
      margin-bottom: unset;
      display: flex;
      align-items: center;
      gap: 5px;
      --size: 20px;
   }
   .form-check input {
      border: 2px solid #404040;
      width: var(--size);
      height: var(--size);
      min-height: var(--size);
      min-width: var(--size);
      flex-shrink: 0;
      float: unset;
      margin: unset;
      padding: 0;
   }
   .form-check input:checked {
      background-color: #404040;
   }
   .form-check input:focus {
      box-shadow: 0 0 0 0.15rem rgba(64, 64, 64, 0.25);
   }
}

.dimantion-preview {
   border: 1px solid #cbd5e1;
   padding: 24px;
   border-radius: 10px;
   .input-group-v2 .vals {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 48px;
      padding: 8px;
      border: 1px solid #929292;
      border-radius: 8px;
   }
   .input-group-v2 .vals span {
      display: block;
      color: #727272;
      font-size: 18px;
      min-width: 110px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      strong {
         color: #1e1e1e;
      }
   }

   .preview-container {
      padding: 0;
      border: unset;
      display: flex;
      align-items: center;
      justify-content: center;
   }
}

@media (max-width: 767px) {
   .input-group-v2 label {
      font-size: 16px;
   }
   .outline-style {
      padding: 15px;
      border-radius: 8px;
   }

   .dimantion-preview {
      padding: 10px;
      border-radius: 4px;
      .input-group-v2 .vals span {
         font-size: 14px;
      }
   }
}