Fix some issues to improve the print output

vue/src/components/CustomInputSpinButton.vue

@@ -1,25 +1,24 @@
 // code taken from https://github.com/bootstrap-vue/bootstrap-vue/issues/4977#issuecomment-740215609 and modified
 <template>
   <b-input-group>
-    <b-input-group-prepend>
+    <b-input-group-prepend class="d-print-none">
       <b-button variant="outline-primary" class="py-0 px-2" size="sm" @click="valueChange(value - 1)">
         <b-icon icon="dash" font-scale="1.6" />
       </b-button>
     </b-input-group-prepend>
 
     <b-form-input
-      style="text-align: right; border-width: 0px; border: none; padding: 0px; padding-left: 0.5vw; padding-right: 8px; width: 50px"
       variant="outline-primary"
       :size="size"
       :value="value"
       type="number"      
       min="0"
-      class="border-secondary text-center"
+      class="custom-spin-input"
       number
       @update="valueChange"
     />
 
-    <b-input-group-append>
+    <b-input-group-append class="d-print-none">
       <b-button variant="outline-primary" class="py-0 px-2" size="sm" @click="valueChange(value + 1)">
         <b-icon icon="plus" font-scale="1.6" />
       </b-button>
@@ -71,6 +70,12 @@ export default {
 </script>
 
 <style scoped>
+input.custom-spin-input {
+  text-align: center;
+  width: 50px;
+  border-radius: 0 !important;
+}
+
 /* Remove up and down arrows inside number input */
 /* Chrome, Safari, Edge, Opera */
 input::-webkit-outer-spin-button,
@@ -83,4 +88,11 @@ input::-webkit-inner-spin-button {
 input[type=number] {
   -moz-appearance: textfield;
 }
-</style>
+
+@media print {
+  input.custom-spin-input {
+    background-color: transparent !important;
+    border: none !important;
+  }
+}
+</style>