Includes note in the UI better highlighting that web-based config is only applied locally

src/components/Configuration/CustomCss.vue

@@ -2,8 +2,11 @@
   <div class="json-editor-outer">
     <prism-editor class="my-editor" v-model="customCss" :highlight="highlighter" line-numbers />
     <button class="save-button" @click="save()">Save Changes</button>
-    <p>Note, you will need to refresh the page for your changes to take effect</p>
-    <p>To remove all custom styles, delete the contents and hit Save Changes</p>
+    <p class="quick-note">
+    <b>Note</b>: You will need to refresh the page for your changes to take effect.
+      Styles overides are only stored locally, so it is reccomended to make a copy of your CSS.
+      To remove all custom styles, delete the contents and hit Save Changes
+    </p>
   </div>
 </template>
 
@@ -87,4 +90,12 @@ button.save-button {
   background: var(--transparent-50);
 }
 
+p.quick-note {
+  text-align: left;
+  width: 80%;
+  margin: 1rem auto;
+  padding: 0.5rem;
+  border-radius: var(--curve-factor);
+}
+
 </style>