moved css out of report

public/dist/css/app.css

@@ -108,3 +108,175 @@
     width: 100%;
     border-top: 1px solid rgba(0, 0, 0, .1)
 }
+
+.modal-fullscreen-xl {
+    max-width: 100% !important;
+}
+
+div.modal-body>div.card>.card-header {
+    background-color: gray !important;
+    color: white !important;
+}
+
+.select2 {
+    width: 100% !important;
+    border-radius: .25rem !important;
+}
+
+.select2-selection:before,
+.select2-selection--multiple:before {
+    content: "";
+    position: absolute;
+    right: 7px;
+    top: 42%;
+    border-top: 5px solid #888;
+    border-left: 4px solid transparent;
+    border-right: 4px solid transparent;
+}
+
+.select2-search,
+.select2-selection,
+.select2-search input,
+.select2-results {
+    background: #fff !important;
+    color: #000000 !important;
+}
+
+.select2-selection__rendered,
+.select2-selection__choice {
+    color: black !important;
+}
+
+select,
+select option,
+.select2 {
+    background: #fff !important;
+    color: #000000 !important;
+}
+
+.card-primary:not(.card-outline)>.card-header {
+    background-color: #023047 !important;
+    color: #fff !important;
+}
+
+.card-primary.card-outline {
+    border-top: none !important;
+}
+
+.select2-selection__arrow {
+    display: none !important;
+}
+
+.select2-selection:before,
+.select2-selection--multiple:before {
+    content: "";
+    color: black;
+    position: absolute;
+    right: 7px;
+    top: 42%;
+    border-top: 5px solid black;
+    border-left: 4px solid transparent;
+    border-right: 4px solid transparent;
+}
+
+.select2-container--bootstrap4 .select2-results__option--highlighted{
+    background-color: #023047 !important;
+    color: white !important;
+}
+
+.custom-switch.custom-switch-sm .custom-control-label {
+    padding-left: 1rem;
+    padding-bottom: 1rem;
+}
+
+.custom-switch.custom-switch-sm .custom-control-label::before {
+    height: 1rem;
+    width: calc(1rem + 0.75rem);
+    border-radius: 2rem;
+}
+
+.custom-switch.custom-switch-sm .custom-control-label::after {
+    width: calc(1rem - 4px);
+    height: calc(1rem - 4px);
+    border-radius: calc(1rem - (1rem / 2));
+}
+
+.custom-switch.custom-switch-sm .custom-control-input:checked~.custom-control-label::after {
+    transform: translateX(calc(1rem - 0.25rem));
+}
+
+/* for md */
+
+.custom-switch.custom-switch-md .custom-control-label {
+    padding-left: 2rem;
+    padding-bottom: 1.5rem;
+}
+
+.custom-switch.custom-switch-md .custom-control-label::before {
+    height: 1.5rem;
+    width: calc(2rem + 0.75rem);
+    border-radius: 3rem;
+}
+
+.custom-switch.custom-switch-md .custom-control-label::after {
+    width: calc(1.5rem - 4px);
+    height: calc(1.5rem - 4px);
+    border-radius: calc(2rem - (1.5rem / 2));
+}
+
+.custom-switch.custom-switch-md .custom-control-input:checked~.custom-control-label::after {
+    transform: translateX(calc(1.5rem - 0.25rem));
+}
+
+/* for lg */
+
+.custom-switch.custom-switch-lg .custom-control-label {
+    padding-left: 3rem;
+    padding-bottom: 2rem;
+}
+
+.custom-switch.custom-switch-lg .custom-control-label::before {
+    height: 2rem;
+    width: calc(3rem + 0.75rem);
+    border-radius: 4rem;
+}
+
+.custom-switch.custom-switch-lg .custom-control-label::after {
+    width: calc(2rem - 4px);
+    height: calc(2rem - 4px);
+    border-radius: calc(3rem - (2rem / 2));
+}
+
+.custom-switch.custom-switch-lg .custom-control-input:checked~.custom-control-label::after {
+    transform: translateX(calc(2rem - 0.25rem));
+}
+
+/* for xl */
+
+.custom-switch.custom-switch-xl .custom-control-label {
+    padding-left: 4rem;
+    padding-bottom: 2.5rem;
+}
+
+.custom-switch.custom-switch-xl .custom-control-label::before {
+    height: 2.5rem;
+    width: calc(4rem + 0.75rem);
+    border-radius: 5rem;
+}
+
+.custom-switch.custom-switch-xl .custom-control-label::after {
+    width: calc(2.5rem - 4px);
+    height: calc(2.5rem - 4px);
+    border-radius: calc(4rem - (2.5rem / 2));
+}
+
+.custom-switch.custom-switch-xl .custom-control-input:checked~.custom-control-label::after {
+    transform: translateX(calc(2.5rem - 0.25rem));
+}
+
+.custom-control-input:checked~.custom-control-label::before {
+    color: #fff;
+    border-color: #023047 !important;
+    background-color: #023047 !important;
+    box-shadow: none;
+}

resources/views/livewire/report.blade.php

@@ -5093,185 +5093,11 @@
     <link rel="stylesheet" href="/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css">
     <link rel="stylesheet" href="/plugins/select2/css/select2.min.css">
     <link rel="stylesheet" href="/dist/css/app.css">
-
-    <style>
-        .modal-fullscreen-xl {
-            max-width: 100% !important;
-        }
-
-        div.modal-body>div.card>.card-header {
-            background-color: gray !important;
-            color: white !important;
-        }
-
-        .select2 {
-            width: 100% !important;
-            border-radius: .25rem !important;
-        }
-
-        .select2-selection:before,
-        .select2-selection--multiple:before {
-            content: "";
-            position: absolute;
-            right: 7px;
-            top: 42%;
-            border-top: 5px solid #888;
-            border-left: 4px solid transparent;
-            border-right: 4px solid transparent;
-        }
-
-        .select2-search,
-        .select2-selection,
-        .select2-search input,
-        .select2-results {
-            background: #fff !important;
-            color: #000000 !important;
-        }
-
-        .select2-selection__rendered,
-        .select2-selection__choice {
-            color: black !important;
-        }
-
-        select,
-        select option,
-        .select2 {
-            background: #fff !important;
-            color: #000000 !important;
-        }
-
-        .card-primary:not(.card-outline)>.card-header {
-            background-color: #023047 !important;
-            color: #fff !important;
-        }
-
-        .card-primary.card-outline {
-            border-top: none !important;
-        }
-
-        .select2-container--bootstrap4 .select2-selection {}
-
-        .select2-selection__arrow {
-            display: none !important;
-        }
-
-        .select2-selection:before,
-        .select2-selection--multiple:before {
-            content: "";
-            color: black;
-            position: absolute;
-            right: 7px;
-            top: 42%;
-            border-top: 5px solid black;
-            border-left: 4px solid transparent;
-            border-right: 4px solid transparent;
-        }
-
-        .custom-switch.custom-switch-sm .custom-control-label {
-            padding-left: 1rem;
-            padding-bottom: 1rem;
-        }
-
-        .custom-switch.custom-switch-sm .custom-control-label::before {
-            height: 1rem;
-            width: calc(1rem + 0.75rem);
-            border-radius: 2rem;
-        }
-
-        .custom-switch.custom-switch-sm .custom-control-label::after {
-            width: calc(1rem - 4px);
-            height: calc(1rem - 4px);
-            border-radius: calc(1rem - (1rem / 2));
-        }
-
-        .custom-switch.custom-switch-sm .custom-control-input:checked~.custom-control-label::after {
-            transform: translateX(calc(1rem - 0.25rem));
-        }
-
-        /* for md */
-
-        .custom-switch.custom-switch-md .custom-control-label {
-            padding-left: 2rem;
-            padding-bottom: 1.5rem;
-        }
-
-        .custom-switch.custom-switch-md .custom-control-label::before {
-            height: 1.5rem;
-            width: calc(2rem + 0.75rem);
-            border-radius: 3rem;
-        }
-
-        .custom-switch.custom-switch-md .custom-control-label::after {
-            width: calc(1.5rem - 4px);
-            height: calc(1.5rem - 4px);
-            border-radius: calc(2rem - (1.5rem / 2));
-        }
-
-        .custom-switch.custom-switch-md .custom-control-input:checked~.custom-control-label::after {
-            transform: translateX(calc(1.5rem - 0.25rem));
-        }
-
-        /* for lg */
-
-        .custom-switch.custom-switch-lg .custom-control-label {
-            padding-left: 3rem;
-            padding-bottom: 2rem;
-        }
-
-        .custom-switch.custom-switch-lg .custom-control-label::before {
-            height: 2rem;
-            width: calc(3rem + 0.75rem);
-            border-radius: 4rem;
-        }
-
-        .custom-switch.custom-switch-lg .custom-control-label::after {
-            width: calc(2rem - 4px);
-            height: calc(2rem - 4px);
-            border-radius: calc(3rem - (2rem / 2));
-        }
-
-        .custom-switch.custom-switch-lg .custom-control-input:checked~.custom-control-label::after {
-            transform: translateX(calc(2rem - 0.25rem));
-        }
-
-        /* for xl */
-
-        .custom-switch.custom-switch-xl .custom-control-label {
-            padding-left: 4rem;
-            padding-bottom: 2.5rem;
-        }
-
-        .custom-switch.custom-switch-xl .custom-control-label::before {
-            height: 2.5rem;
-            width: calc(4rem + 0.75rem);
-            border-radius: 5rem;
-        }
-
-        .custom-switch.custom-switch-xl .custom-control-label::after {
-            width: calc(2.5rem - 4px);
-            height: calc(2.5rem - 4px);
-            border-radius: calc(4rem - (2.5rem / 2));
-        }
-
-        .custom-switch.custom-switch-xl .custom-control-input:checked~.custom-control-label::after {
-            transform: translateX(calc(2.5rem - 0.25rem));
-        }
-
-        .custom-control-input:checked~.custom-control-label::before {
-            color: #fff;
-            border-color: #023047 !important;
-            background-color: #023047 !important;
-            box-shadow: none;
-        }
-    </style>
 @endpush
 
 @push('scripts')
     <script src="/plugins/select2/js/select2.min.js"></script>
     <script src="/plugins/bootstrap-switch/js/bootstrap-switch.min.js"></script>
-@endpush
-
-@push('scripts')
     <script>
         var maxDamageColumns = 4;
         var displayedDamageColumns = 1;