Tidy up stray style="" elements that were used in templates, either use a Bootstrap class or create a new util class in style.css as necessary.

webassets/css/style.css

@@ -211,6 +211,11 @@ div#map {
     font-size: 16px;
 }
 
+#settingsButtonRowMap {
+    position: relative;
+    z-index: 1002;
+}
+
 .leaflet-container {
     font-family: var(--bs-body-font-family) !important;
 }
@@ -323,6 +328,31 @@ div.band-spot:hover span.band-spot-info {
 }
 
 
+/* UTILITY CLASSES */
+
+/* For elements initially hidden and shown/hidden by JS. Unlike Bootstrap's d-none this has no !important,
+   so jQuery's .show() / .hide() / .toggle() can override it with an inline style as expected. */
+.js-hidden {
+    display: none;
+}
+
+.table-fixed {
+    table-layout: fixed;
+}
+
+.input-narrow {
+    max-width: 8em;
+}
+.input-medium {
+    max-width: 12em;
+}
+
+/* Pushes a submit button down to align with labelled inputs in a flex row */
+.mt-2em {
+    margin-top: 2em;
+}
+
+
 /* GENERAL MOBILE SUPPORT */
 
 @media (max-width: 991.99px) {