all ITAC styling correct

src/layouts/coverage-statement/coverage-statement.vue

@@ -44,14 +44,14 @@
                                   </div>
                                   <div
                                     v-if="verifiedITAC"
-                                    class="d-flex justify-content-center mb-4">
+                                    class="d-flex justify-content-center mb-4 deductible-text">
                                     {{ deductibleText }}&nbsp;
                                     <span class="text-success fw-bold">{{ formattedDeductible }}</span>
                                   </div>
                                   <alert
                                     v-if="verifiedITAC"
                                     ref="verifiedITACAlert"
-                                    class="mb-4"
+                                    class="mb-5"
                                     cmsWidgetName="VerifiedITACAlert"
                                     :manualHeadline="verifiedITACAlertHeader"
                                     :manualCopy="verifiedITACAlertBody"
@@ -66,19 +66,16 @@
                                     class="body-text"
                                     v-html="nextStepsBody">
                                   </div>
-                                  <div
-                                    class="button-wrapper">
-                                    <buttonQuestion
-                                        v-if="displayQuote"
-                                        v-model="selectedProvider"
-                                        cmsWidgetName="ServiceProviderQuestion"
-                                        :questionText="questionText"
-                                        :answers="answersFromCms"
-                                        buttonTypeString="listButton"
-                                        isRequired
-                                        :validationRules="rules.selectionRequired">
-                                    </buttonQuestion>
-                                  </div>
+                                <buttonQuestion
+                                    v-if="displayQuote"
+                                    v-model="selectedProvider"
+                                    cmsWidgetName="ServiceProviderQuestion"
+                                    :questionText="questionText"
+                                    :answers="answersFromCms"
+                                    buttonTypeString="listButton"
+                                    isRequired
+                                    :validationRules="rules.selectionRequired">
+                                </buttonQuestion>
                               </div>
                               <siteFooter
                                 ref="siteFooter"
@@ -419,13 +416,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.body-text {
-  p {
-    font-size: 14px;
-    line-height: 24px;
-    margin-bottom: 8px;
-  }
-}
 
 .cost {
   color: $green;
@@ -434,32 +424,46 @@ export default {
   line-height: 44px;
 }
 
-.question-text {
+.deductible-text {
+    line-height: 24px;
+}
+
+::v-deep p {
+    line-height: 24px;
+    font-size: 14px;
+    margin-bottom: 8px;
+}
+
+::v-deep .question-text {
+    margin-top: 1.5rem;
+    margin-bottom: 0.5rem;
+    font-size: 1rem;
+    line-height: 1.5rem;
     & > span {
         text-align: left;
     }
 }
 
-.deductible-modal {
+::v-deep .deductible-modal {
   p {
     margin-bottom: 0px !important;
-  }
-
-  h5.mb-4 {
-    color: black;
-  }
-  .modal-body p:last-child {
-    font-size: 16px !important;
+    font-size: 16px;
     line-height: 26px;
   }
-
-  .my-4 {
-    margin-top: 8px !important;
-    margin-bottom: 0px !important;
-  }
-
   img.mb-4 {
     margin: 0 !important;
   }
+  h5 {
+    color: black;
+  }
+  p:last-child {
+    margin-top: 0.5rem;
+  }
 }
+
+//   .my-4 {
+//     margin-top: 8px !important;
+//     margin-bottom: 0px !important;
+//   }
+
 </style>