steering modal updates

src/digital-components/modal/modal.vue

@@ -222,7 +222,6 @@ export default {
             .modal-content {
                 margin: 1.5rem auto 0 auto;
                 .modal-body {
-                    color: #4d4e53;
                     padding: 0 1.5rem 0 1.5rem;
                     .col {
                         max-width: 100%;

src/layouts/coverage-statement/cancel-claim-modal/cancel-claim-modal.vue

@@ -90,9 +90,11 @@ export default {
     .cancel-link {
         text-decoration: underline;
     }
-
     .modal-footer {
         padding-bottom: 1rem;
     }
+    .modal-body {
+        color: #4d4e53;
+    }
 }
 </style>

src/layouts/provider-preference/steering-modal/steering-modal.vue

@@ -1,21 +1,24 @@
 <template>
-    <modal
-        :ref="ModalName"
-        :modalId="ModalName"
-        :footerButtonText="ModalCloseButtonText"
-        @footerButtonEvent="footerButtonClick">
-        <h5 class="text-center mb-4">
-        {{ ModalHeadline }}
-        </h5>
-        <div>
-            <div
-                class="mb-4"
-                v-html="ModalBodyText"></div>
-            <div
-                v-if="ModalSubBodyText"
-                v-html="ModalSubBodyText"></div>
-        </div>
-    </modal>
+    <div class="steering-modal-container">
+        <modal
+            :ref="ModalName"
+            :modalId="ModalName"
+            :footerButtonText="ModalCloseButtonText"
+            @footerButtonEvent="footerButtonClick">
+            <h5 class="text-center mb-4 headline-text">
+            {{ ModalHeadline }}
+            </h5>
+            <div>
+                <div
+                    class="mb-4"
+                    v-html="ModalBodyText"></div>
+                <div
+                    class="mb-4"
+                    v-if="ModalSubBodyText"
+                    v-html="ModalSubBodyText"></div>
+            </div>
+        </modal>
+    </div>
 </template>
 
 <script>
@@ -74,24 +77,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.modal {
-    &.modal-component {
-        .modal-dialog {
-            .modal-content {
-                .modal-body {
-                    .modal-sub-body {
-                        color: $gray-600;
-                    }
-                    ul {
-                        margin-bottom: 0;
-                    }
-                    p {
-                        &:last-child {
-                            margin-bottom: 0;
-                        }
-                    }
-                }
-            }
+:deep(.modal) {
+    .modal-footer {
+        justify-content: center;
+        button {
+            background-color: #167cac;
+            color: $white;
+            width: 71%;
         }
     }
 }