From 1b5eb340cc0a93aa6ba9174733499741d0981b07 Mon Sep 17 00:00:00 2001
From: Agata Brok <cityremade@users.noreply.github.com>
Date: Wed, 18 Sep 2024 15:28:37 +0200
Subject: [PATCH 01/31] mapp.ui.elements.alert method;

---
 lib/ui/elements/_elements.mjs |   3 +
 lib/ui/elements/alert.mjs     | 108 ++++++++++++++++++++++++++++++++++
 2 files changed, 111 insertions(+)
 create mode 100644 lib/ui/elements/alert.mjs

diff --git a/lib/ui/elements/_elements.mjs b/lib/ui/elements/_elements.mjs
index 8d41c7c48..d8372a2ac 100644
--- a/lib/ui/elements/_elements.mjs
+++ b/lib/ui/elements/_elements.mjs
@@ -14,6 +14,7 @@ import dropdown_multi from './dropdown_multi.mjs';
 import btnPanel from './btnPanel.mjs';
 import legendIcon from './legendIcon.mjs';
 import dialog from './dialog.mjs';
+import alert from './alert.mjs';
 import helpDialog from './helpDialog.mjs';
 import searchbox from './searchbox.mjs';
 import slider from './slider.mjs';
@@ -35,6 +36,7 @@ UI elements object containing various UI components.
 @property {Function} dropdown_multi - Multi-select dropdown component.
 @property {Function} legendIcon - Legend icon component.
 @property {Function} dialog - Dialog component.
+@property {Function} alert - Alert component.
 @property {Function} helpDialog - Help Dialog component.
 @property {Function} searchbox - Searchbox component.
 @property {Function} slider - Slider component.
@@ -57,6 +59,7 @@ export default {
   layerStyle,
   legendIcon,
   dialog,
+  alert,
   pills,
   helpDialog,
   searchbox,
diff --git a/lib/ui/elements/alert.mjs b/lib/ui/elements/alert.mjs
new file mode 100644
index 000000000..c83fee8a0
--- /dev/null
+++ b/lib/ui/elements/alert.mjs
@@ -0,0 +1,108 @@
+/**
+### mapp.ui.elements.alert()
+
+Exports the alert dialog method as mapp.ui.elements.alert()
+
+@module /ui/elements/alert
+*/
+
+/**
+@function alert
+
+@description
+This is an alert element to display information to the user.
+It is a framework alternative way to using window.alert() browser function.
+
+```js
+mapp.ui.elements.alert({
+   text: "Drivetimes have been created."
+})
+```
+
+@param {Object} alert The alert configuration object.
+@property {string} [alert.css_style] The CSS styles to apply to the dialog dialog.
+@property {string} [alert.data_id='alert'] The data-id attribute value for the dialog.
+@property {string} [alert.title] Text to display in the alert header. Defaults to 'Information'.
+@property {string} [alert.text] Text to display in the alert content. 
+@returns {HTMLElement} alert The alert element.
+*/
+
+export default function alert(params) {
+
+    params.title ??= 'Information';
+
+    const css = `
+    dialog.alert {
+      margin: auto;
+      box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
+      border: none !important;
+      border-radius: 2px;
+      min-width: 350px;
+      max-width: 70%;
+      max-height: 70%;
+      z-index: 1001;
+      user-select: none;
+    }
+
+    dialog.alert::-webkit-scrollbar {
+      display: none;
+    }
+
+    dialog.alert h4 {
+      padding: 0.5em 1em;
+      position: sticky;
+      top: 0;
+      left: 0;
+      z-index: 10001;
+      background-color: var(--color-primary);
+      border-bottom: solid 2px var(--color-primary-light);
+      color: var(--color-light)
+    }
+
+    dialog.alert div {
+      padding: 1em;
+    }
+
+    dialog.alert p {
+      white-space: pre;
+      text-align: center;
+      padding: 1em;
+    }
+
+    dialog.alert button {
+      float: right;
+      font-size: 0.9em;
+      color: var(--color-primary);
+      z-index: 1005;
+    }
+
+    dialog.alert:focus {
+      outline: none;
+    }
+    `;
+
+    document.head.prepend(mapp.utils.html.node`<style>${css}`)
+    
+    const alert = mapp.utils.html.node`<dialog class="alert"
+    onclose=${() => {
+        alert.remove();
+    }}
+    onclick=${e => {
+      e.stopPropagation();
+      alert.close();
+    }}>
+      <h4>${params.title}</h4>
+      <p>${params.text}</p>
+      <div style="display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 0.2em">
+      <button 
+        class="raised primary-colour del bold"
+        style="grid-column: 2"
+        onclick=${e => {
+          e.stopPropagation();
+          alert.close();
+        }}>OK`
+
+  document.body.append(alert);
+
+  alert.showModal();
+}
\ No newline at end of file

From 59003a340d29c70de0abdf506018ca5a0ed5da3b Mon Sep 17 00:00:00 2001
From: Agata Brok <cityremade@users.noreply.github.com>
Date: Wed, 18 Sep 2024 15:36:33 +0200
Subject: [PATCH 02/31] Alert - now uses dictionary.

---
 lib/dictionaries/en.mjs   | 1 +
 lib/ui/elements/alert.mjs | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/lib/dictionaries/en.mjs b/lib/dictionaries/en.mjs
index abcbf9dc5..f23884a3f 100644
--- a/lib/dictionaries/en.mjs
+++ b/lib/dictionaries/en.mjs
@@ -1,6 +1,7 @@
 export default {
   save: 'Save',
   cancel: 'Cancel',
+  ok: 'OK',
   confirm_delete: 'Are you sure you want to delete this feature? This cannot be undone.',
   invalid_geometry: 'Invalid geometry',
   no_results: 'No results for this search',
diff --git a/lib/ui/elements/alert.mjs b/lib/ui/elements/alert.mjs
index c83fee8a0..4c70cf341 100644
--- a/lib/ui/elements/alert.mjs
+++ b/lib/ui/elements/alert.mjs
@@ -100,7 +100,7 @@ export default function alert(params) {
         onclick=${e => {
           e.stopPropagation();
           alert.close();
-        }}>OK`
+        }}>${mapp.dictionary.ok}`
 
   document.body.append(alert);
 

From d7f2a43177d228e1e8699fc65e18dc954c9ab3f9 Mon Sep 17 00:00:00 2001
From: Agata Brok <cityremade@users.noreply.github.com>
Date: Wed, 18 Sep 2024 16:53:39 +0200
Subject: [PATCH 03/31] mapp.ui.elements.confirm

---
 lib/dictionaries/en.mjs                 |   1 +
 lib/location/decorate.mjs               |   4 +-
 lib/ui/elements/_elements.mjs           |   3 +
 lib/ui/elements/confirm.mjs             | 126 ++++++++++++++++++++++++
 lib/ui/locations/entries/cloudinary.mjs |   4 +-
 lib/ui/locations/view.mjs               |   6 +-
 6 files changed, 140 insertions(+), 4 deletions(-)
 create mode 100644 lib/ui/elements/confirm.mjs

diff --git a/lib/dictionaries/en.mjs b/lib/dictionaries/en.mjs
index abcbf9dc5..f23884a3f 100644
--- a/lib/dictionaries/en.mjs
+++ b/lib/dictionaries/en.mjs
@@ -1,6 +1,7 @@
 export default {
   save: 'Save',
   cancel: 'Cancel',
+  ok: 'OK',
   confirm_delete: 'Are you sure you want to delete this feature? This cannot be undone.',
   invalid_geometry: 'Invalid geometry',
   no_results: 'No results for this search',
diff --git a/lib/location/decorate.mjs b/lib/location/decorate.mjs
index 68951066a..cabbdc739 100644
--- a/lib/location/decorate.mjs
+++ b/lib/location/decorate.mjs
@@ -236,7 +236,9 @@ function flyTo(maxZoom) {
 
 async function trash() {
 
-  if (!confirm(mapp.dictionary.confirm_delete)) return;
+  const confirm = await mapp.ui.elements.confirm({text: mapp.dictionary.confirm_delete})
+
+  if (!confirm) return;
 
   await mapp.utils.xhr(`${this.layer.mapview.host}/api/query?` +
     mapp.utils.paramString({
diff --git a/lib/ui/elements/_elements.mjs b/lib/ui/elements/_elements.mjs
index 8d41c7c48..0c0958354 100644
--- a/lib/ui/elements/_elements.mjs
+++ b/lib/ui/elements/_elements.mjs
@@ -14,6 +14,7 @@ import dropdown_multi from './dropdown_multi.mjs';
 import btnPanel from './btnPanel.mjs';
 import legendIcon from './legendIcon.mjs';
 import dialog from './dialog.mjs';
+import confirm from './confirm.mjs';
 import helpDialog from './helpDialog.mjs';
 import searchbox from './searchbox.mjs';
 import slider from './slider.mjs';
@@ -35,6 +36,7 @@ UI elements object containing various UI components.
 @property {Function} dropdown_multi - Multi-select dropdown component.
 @property {Function} legendIcon - Legend icon component.
 @property {Function} dialog - Dialog component.
+@property {Function} confirm - Confirm component.
 @property {Function} helpDialog - Help Dialog component.
 @property {Function} searchbox - Searchbox component.
 @property {Function} slider - Slider component.
@@ -57,6 +59,7 @@ export default {
   layerStyle,
   legendIcon,
   dialog,
+  confirm,
   pills,
   helpDialog,
   searchbox,
diff --git a/lib/ui/elements/confirm.mjs b/lib/ui/elements/confirm.mjs
new file mode 100644
index 000000000..d136c7956
--- /dev/null
+++ b/lib/ui/elements/confirm.mjs
@@ -0,0 +1,126 @@
+/**
+### mapp.ui.elements.confirm()
+
+Exports the confirm dialog method as mapp.ui.elements.confirm()
+
+@module /ui/elements/confirm
+*/
+
+/**
+@function confirm
+
+@description
+This is a confirm element to display information to the user and resolving to yes/no response.
+It is a framework alternative way to using window.confirm() browser function.
+
+```js
+const confirm = await mapp.ui.elements.confirm({
+   text: "Please confim changes."
+})
+if(confirm) {
+// proceed
+} else {
+// prevent
+}
+```
+
+@param {Object} confirm The confirm configuration object.
+@property {string} [confirm.data_id='alert'] The data-id attribute value for the dialog.
+@property {string} [confirm.title] Text to display in the confirm header. Defaults to 'Confirm'.
+@property {string} [confirm.text] Text to display in the confirm content. 
+@returns {HTMLElement} confirm The confirm element.
+*/
+
+export default function confirm(params) {
+
+    params.title ??= 'Confirm';
+
+    const css = `
+    dialog.alert {
+      margin: auto;
+      box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
+      border: none !important;
+      border-radius: 2px;
+      min-width: 350px;
+      max-width: 70%;
+      max-height: 70%;
+      z-index: 1001;
+      user-select: none;
+    }
+
+    dialog.alert::-webkit-scrollbar {
+      display: none;
+    }
+
+    dialog.alert h4 {
+      padding: 0.5em 1em;
+      position: sticky;
+      top: 0;
+      left: 0;
+      z-index: 10001;
+      background-color: var(--color-primary);
+      border-bottom: solid 2px var(--color-primary-light);
+      color: var(--color-light)
+    }
+
+    dialog.alert div {
+      padding: 1em;
+    }
+
+    dialog.alert p {
+      white-space: pre;
+      text-align: center;
+      padding: 1em;
+    }
+
+    dialog.alert button {
+      float: right;
+      font-size: 0.9em;
+      color: var(--color-primary);
+      z-index: 1005;
+    }
+
+    dialog.alert:focus {
+      outline: none;
+    }
+    `;
+
+    document.head.prepend(mapp.utils.html.node`<style>${css}`)
+    
+    const btn_true = mapp.utils.html.node`<button class="raised primary-colour del bold">${mapp.dictionary.ok}`;
+    
+    const btn_false = mapp.utils.html.node`<button class="raised primary-colour bold">${mapp.dictionary.cancel}`
+    
+    const confirm = mapp.utils.html.node`<dialog class="alert" 
+    onclose=${() => {
+        confirm.remove();
+    }}
+    onclick=${e => {
+        e.preventDefault();
+        confirm.close();
+    }}>
+    <h4>${params.title}</h4>
+    <p>${params.text}</p>
+    <div style="display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 0.2em">
+    ${btn_false}
+    ${btn_true}`;
+    
+    document.body.append(confirm);
+
+    confirm.showModal();
+    
+    return new Promise((resolve, reject) => {
+        
+        btn_true.addEventListener("click", (e) => {
+            e.stopPropagation();
+            confirm.close();
+            resolve(true);
+        });
+        
+        btn_false.addEventListener("click", (e) => {
+            e.stopPropagation();
+            confirm.close();
+            resolve(false);
+        });
+    });
+}
\ No newline at end of file
diff --git a/lib/ui/locations/entries/cloudinary.mjs b/lib/ui/locations/entries/cloudinary.mjs
index c8188ce93..dde91b90f 100644
--- a/lib/ui/locations/entries/cloudinary.mjs
+++ b/lib/ui/locations/entries/cloudinary.mjs
@@ -275,7 +275,9 @@ async function docLoad(e, entry) {
 
 async function trash(e, entry) {
 
-  if (!confirm('Remove item?')) return;
+  const confirm = await mapp.ui.elements.confirm({text: 'Remove item?'});
+
+  if (!confirm) return;
 
   // Send request to cloudinary to destroy resource.
   await mapp.utils.xhr(`${entry.location.layer.mapview.host}/api/provider/cloudinary?${mapp.utils.paramString({
diff --git a/lib/ui/locations/view.mjs b/lib/ui/locations/view.mjs
index 710652c82..5c1ad1772 100644
--- a/lib/ui/locations/view.mjs
+++ b/lib/ui/locations/view.mjs
@@ -149,11 +149,13 @@ export default function view(location) {
   header.push(mapp.utils.html`<button
     title = ${mapp.dictionary.location_remove}
     class = "mask-icon close no"
-    onclick = ${() => {
+    onclick = ${async () => {
 
       if (location.infoj.some(entry => typeof entry.newValue !== 'undefined')) {
 
-        if (!confirm(`${mapp.dictionary.location_close_without_save}`)) return;
+        const confirm = await mapp.ui.elements({text: mapp.dictionary.location_close_without_save})
+
+        if (!confirm) return;
       }
 
       location.remove()

From a6ea29c88350c54c91f243cc34923d4837ab25c2 Mon Sep 17 00:00:00 2001
From: Agata Brok <cityremade@users.noreply.github.com>
Date: Thu, 19 Sep 2024 10:15:15 +0200
Subject: [PATCH 04/31] alert css - moved to ui stylesheet.

---
 lib/ui/elements/alert.mjs |  54 +----
 public/css/_ui.css        |  50 +++++
 public/css/ui.css         | 409 +++++++++++++++++++++-----------------
 3 files changed, 276 insertions(+), 237 deletions(-)

diff --git a/lib/ui/elements/alert.mjs b/lib/ui/elements/alert.mjs
index 4c70cf341..8a81eee92 100644
--- a/lib/ui/elements/alert.mjs
+++ b/lib/ui/elements/alert.mjs
@@ -31,59 +31,7 @@ export default function alert(params) {
 
     params.title ??= 'Information';
 
-    const css = `
-    dialog.alert {
-      margin: auto;
-      box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
-      border: none !important;
-      border-radius: 2px;
-      min-width: 350px;
-      max-width: 70%;
-      max-height: 70%;
-      z-index: 1001;
-      user-select: none;
-    }
-
-    dialog.alert::-webkit-scrollbar {
-      display: none;
-    }
-
-    dialog.alert h4 {
-      padding: 0.5em 1em;
-      position: sticky;
-      top: 0;
-      left: 0;
-      z-index: 10001;
-      background-color: var(--color-primary);
-      border-bottom: solid 2px var(--color-primary-light);
-      color: var(--color-light)
-    }
-
-    dialog.alert div {
-      padding: 1em;
-    }
-
-    dialog.alert p {
-      white-space: pre;
-      text-align: center;
-      padding: 1em;
-    }
-
-    dialog.alert button {
-      float: right;
-      font-size: 0.9em;
-      color: var(--color-primary);
-      z-index: 1005;
-    }
-
-    dialog.alert:focus {
-      outline: none;
-    }
-    `;
-
-    document.head.prepend(mapp.utils.html.node`<style>${css}`)
-    
-    const alert = mapp.utils.html.node`<dialog class="alert"
+    const alert = mapp.utils.html.node`<dialog class="mapp-says"
     onclose=${() => {
         alert.remove();
     }}
diff --git a/public/css/_ui.css b/public/css/_ui.css
index 80c1ddbc1..8c33ee721 100644
--- a/public/css/_ui.css
+++ b/public/css/_ui.css
@@ -107,6 +107,56 @@ dialog > button.close {
   user-select: none;
 }
 
+/* begin system message */
+dialog.mapp-says {
+  margin: auto;
+  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
+  border: none !important;
+  border-radius: 2px;
+  min-width: 350px;
+  max-width: 70%;
+  max-height: 70%;
+  z-index: 1001;
+  user-select: none;
+}
+
+dialog.mapp-says::-webkit-scrollbar {
+  display: none;
+}
+
+dialog.mapp-says:focus {
+  outline: none;
+}
+
+dialog.mapp-says h4 {
+  padding: 0.5em 1em;
+  position: sticky;
+  top: 0;
+  left: 0;
+  z-index: 10001;
+  background-color: var(--color-primary);
+  border-bottom: solid 2px var(--color-primary-light);
+  color: var(--color-light)
+}
+
+dialog.mapp-says div {
+  padding: 1em;
+}
+
+dialog.mapp-says p {
+  white-space: pre;
+  text-align: center;
+  padding: 1em;
+}
+
+dialog.mapp-says button {
+  float: right;
+  font-size: 0.9em;
+  color: var(--color-primary);
+  z-index: 1005;
+}
+/* end system message */
+
 .modal {
   text-wrap: wrap;
   position: fixed; 
diff --git a/public/css/ui.css b/public/css/ui.css
index 5391fac0b..43c3d3c98 100644
--- a/public/css/ui.css
+++ b/public/css/ui.css
@@ -170,15 +170,15 @@ button {
     display: none;
   }
   &.expandable > .header > .mask-icon.expander {
-    -webkit-mask-image: url('data:image/svg+xml,<svg%0D%0A  xmlns="http://www.w3.org/2000/svg"%0D%0A  width="12"%0D%0A  height="16"%0D%0A  viewBox="0 0 12 16">%0D%0A  <path d="m 1.41,4.5784035 4.59,4.58 4.59,-4.58 1.41,1.41 L 6,11.988404 0,5.9884035 Z"/>%0D%0A</svg>');
-    mask-image: url('data:image/svg+xml,<svg%0D%0A  xmlns="http://www.w3.org/2000/svg"%0D%0A  width="12"%0D%0A  height="16"%0D%0A  viewBox="0 0 12 16">%0D%0A  <path d="m 1.41,4.5784035 4.59,4.58 4.59,-4.58 1.41,1.41 L 6,11.988404 0,5.9884035 Z"/>%0D%0A</svg>');
+    -webkit-mask-image: url('data:image/svg+xml,<svg%0A  xmlns="http://www.w3.org/2000/svg"%0A  width="12"%0A  height="16"%0A  viewBox="0 0 12 16">%0A  <path d="m 1.41,4.5784035 4.59,4.58 4.59,-4.58 1.41,1.41 L 6,11.988404 0,5.9884035 Z"/>%0A</svg>');
+    mask-image: url('data:image/svg+xml,<svg%0A  xmlns="http://www.w3.org/2000/svg"%0A  width="12"%0A  height="16"%0A  viewBox="0 0 12 16">%0A  <path d="m 1.41,4.5784035 4.59,4.58 4.59,-4.58 1.41,1.41 L 6,11.988404 0,5.9884035 Z"/>%0A</svg>');
   }
   &.expandable:not(.expanded) > *:not(.header) {
     display: none;
   }
   &.expanded > .header > .mask-icon.expander {
-    -webkit-mask-image: url('data:image/svg+xml,<svg%0D%0A  xmlns="http://www.w3.org/2000/svg"%0D%0A  width="12"%0D%0A  height="16"%0D%0A  viewBox="0 0 12 16">%0D%0A  <path d="M 1.41,11.536062 6,6.9560619 10.59,11.536062 12,10.126062 6,4.1260619 0,10.126062 Z"/>%0D%0A</svg>');
-    mask-image: url('data:image/svg+xml,<svg%0D%0A  xmlns="http://www.w3.org/2000/svg"%0D%0A  width="12"%0D%0A  height="16"%0D%0A  viewBox="0 0 12 16">%0D%0A  <path d="M 1.41,11.536062 6,6.9560619 10.59,11.536062 12,10.126062 6,4.1260619 0,10.126062 Z"/>%0D%0A</svg>');
+    -webkit-mask-image: url('data:image/svg+xml,<svg%0A  xmlns="http://www.w3.org/2000/svg"%0A  width="12"%0A  height="16"%0A  viewBox="0 0 12 16">%0A  <path d="M 1.41,11.536062 6,6.9560619 10.59,11.536062 12,10.126062 6,4.1260619 0,10.126062 Z"/>%0A</svg>');
+    mask-image: url('data:image/svg+xml,<svg%0A  xmlns="http://www.w3.org/2000/svg"%0A  width="12"%0A  height="16"%0A  viewBox="0 0 12 16">%0A  <path d="M 1.41,11.536062 6,6.9560619 10.59,11.536062 12,10.126062 6,4.1260619 0,10.126062 Z"/>%0A</svg>');
   }
   &.disabled {
     opacity: 0.4;
@@ -297,92 +297,92 @@ h3 {
 }
 .add {
   &.bg-icon {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>%0D%0A</svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>%0A</svg>');
   }
   &.mask-icon {
-    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>%0D%0A</svg>');
-    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>%0D%0A</svg>');
+    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>%0A</svg>');
+    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>%0A</svg>');
   }
 }
 .add-chart {
   &.bg-icon {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">%0D%0A<path d="M22 5v2h-3v3h-2V7h-3V5h3V2h2v3h3zm-3 14H5V5h6V3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-6h-2v6zm-4-6v4h2v-4h-2zm-4 4h2V9h-2v8zm-2 0v-6H7v6h2z"/>%0D%0A</svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">%0A<path d="M22 5v2h-3v3h-2V7h-3V5h3V2h2v3h3zm-3 14H5V5h6V3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-6h-2v6zm-4-6v4h2v-4h-2zm-4 4h2V9h-2v8zm-2 0v-6H7v6h2z"/>%0A</svg>');
   }
   &.mask-icon {
-    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">%0D%0A<path d="M22 5v2h-3v3h-2V7h-3V5h3V2h2v3h3zm-3 14H5V5h6V3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-6h-2v6zm-4-6v4h2v-4h-2zm-4 4h2V9h-2v8zm-2 0v-6H7v6h2z"/>%0D%0A</svg>');
-    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">%0D%0A<path d="M22 5v2h-3v3h-2V7h-3V5h3V2h2v3h3zm-3 14H5V5h6V3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-6h-2v6zm-4-6v4h2v-4h-2zm-4 4h2V9h-2v8zm-2 0v-6H7v6h2z"/>%0D%0A</svg>');
+    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">%0A<path d="M22 5v2h-3v3h-2V7h-3V5h3V2h2v3h3zm-3 14H5V5h6V3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-6h-2v6zm-4-6v4h2v-4h-2zm-4 4h2V9h-2v8zm-2 0v-6H7v6h2z"/>%0A</svg>');
+    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">%0A<path d="M22 5v2h-3v3h-2V7h-3V5h3V2h2v3h3zm-3 14H5V5h6V3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-6h-2v6zm-4-6v4h2v-4h-2zm-4 4h2V9h-2v8zm-2 0v-6H7v6h2z"/>%0A</svg>');
   }
 }
 .add-document {
   &.bg-icon {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 14h-3v3h-2v-3H8v-2h3v-3h2v3h3v2zm-3-7V3.5L18.5 9H13z"/>%0D%0A</svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 14h-3v3h-2v-3H8v-2h3v-3h2v3h3v2zm-3-7V3.5L18.5 9H13z"/>%0A</svg>');
   }
   &.mask-icon {
-    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 14h-3v3h-2v-3H8v-2h3v-3h2v3h3v2zm-3-7V3.5L18.5 9H13z"/>%0D%0A</svg>');
-    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 14h-3v3h-2v-3H8v-2h3v-3h2v3h3v2zm-3-7V3.5L18.5 9H13z"/>%0D%0A</svg>');
+    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 14h-3v3h-2v-3H8v-2h3v-3h2v3h3v2zm-3-7V3.5L18.5 9H13z"/>%0A</svg>');
+    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 14h-3v3h-2v-3H8v-2h3v-3h2v3h3v2zm-3-7V3.5L18.5 9H13z"/>%0A</svg>');
   }
 }
 .add-photo {
   &.bg-icon {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M3 4V1h2v3h3v2H5v3H3V6H0V4h3zm3 6V7h3V4h7l1.83 2H21c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V10h3zm7 9c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-3.2-5c0 1.77 1.43 3.2 3.2 3.2s3.2-1.43 3.2-3.2-1.43-3.2-3.2-3.2-3.2 1.43-3.2 3.2z"/>%0D%0A</svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M3 4V1h2v3h3v2H5v3H3V6H0V4h3zm3 6V7h3V4h7l1.83 2H21c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V10h3zm7 9c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-3.2-5c0 1.77 1.43 3.2 3.2 3.2s3.2-1.43 3.2-3.2-1.43-3.2-3.2-3.2-3.2 1.43-3.2 3.2z"/>%0A</svg>');
   }
   &.mask-icon {
-    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M3 4V1h2v3h3v2H5v3H3V6H0V4h3zm3 6V7h3V4h7l1.83 2H21c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V10h3zm7 9c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-3.2-5c0 1.77 1.43 3.2 3.2 3.2s3.2-1.43 3.2-3.2-1.43-3.2-3.2-3.2-3.2 1.43-3.2 3.2z"/>%0D%0A</svg>');
-    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M3 4V1h2v3h3v2H5v3H3V6H0V4h3zm3 6V7h3V4h7l1.83 2H21c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V10h3zm7 9c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-3.2-5c0 1.77 1.43 3.2 3.2 3.2s3.2-1.43 3.2-3.2-1.43-3.2-3.2-3.2-3.2 1.43-3.2 3.2z"/>%0D%0A</svg>');
+    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M3 4V1h2v3h3v2H5v3H3V6H0V4h3zm3 6V7h3V4h7l1.83 2H21c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V10h3zm7 9c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-3.2-5c0 1.77 1.43 3.2 3.2 3.2s3.2-1.43 3.2-3.2-1.43-3.2-3.2-3.2-3.2 1.43-3.2 3.2z"/>%0A</svg>');
+    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M3 4V1h2v3h3v2H5v3H3V6H0V4h3zm3 6V7h3V4h7l1.83 2H21c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V10h3zm7 9c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-3.2-5c0 1.77 1.43 3.2 3.2 3.2s3.2-1.43 3.2-3.2-1.43-3.2-3.2-3.2-3.2 1.43-3.2 3.2z"/>%0A</svg>');
   }
 }
 .area {
   &.bg-icon {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">%0D%0A<path d="M19 5H5c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 12H5V7h14v10z"/></svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">%0A<path d="M19 5H5c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 12H5V7h14v10z"/></svg>');
   }
   &.mask-icon {
-    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">%0D%0A<path d="M19 5H5c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 12H5V7h14v10z"/></svg>');
-    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">%0D%0A<path d="M19 5H5c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 12H5V7h14v10z"/></svg>');
+    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">%0A<path d="M19 5H5c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 12H5V7h14v10z"/></svg>');
+    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">%0A<path d="M19 5H5c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 12H5V7h14v10z"/></svg>');
   }
 }
 .arrow-down {
   &.bg-icon {
-    background-image: url('data:image/svg+xml,<svg%0D%0A  xmlns="http://www.w3.org/2000/svg"%0D%0A  width="12"%0D%0A  height="16"%0D%0A  viewBox="0 0 12 16">%0D%0A  <path d="m 1.41,4.5784035 4.59,4.58 4.59,-4.58 1.41,1.41 L 6,11.988404 0,5.9884035 Z"/>%0D%0A</svg>');
+    background-image: url('data:image/svg+xml,<svg%0A  xmlns="http://www.w3.org/2000/svg"%0A  width="12"%0A  height="16"%0A  viewBox="0 0 12 16">%0A  <path d="m 1.41,4.5784035 4.59,4.58 4.59,-4.58 1.41,1.41 L 6,11.988404 0,5.9884035 Z"/>%0A</svg>');
   }
   &.mask-icon {
-    -webkit-mask-image: url('data:image/svg+xml,<svg%0D%0A  xmlns="http://www.w3.org/2000/svg"%0D%0A  width="12"%0D%0A  height="16"%0D%0A  viewBox="0 0 12 16">%0D%0A  <path d="m 1.41,4.5784035 4.59,4.58 4.59,-4.58 1.41,1.41 L 6,11.988404 0,5.9884035 Z"/>%0D%0A</svg>');
-    mask-image: url('data:image/svg+xml,<svg%0D%0A  xmlns="http://www.w3.org/2000/svg"%0D%0A  width="12"%0D%0A  height="16"%0D%0A  viewBox="0 0 12 16">%0D%0A  <path d="m 1.41,4.5784035 4.59,4.58 4.59,-4.58 1.41,1.41 L 6,11.988404 0,5.9884035 Z"/>%0D%0A</svg>');
+    -webkit-mask-image: url('data:image/svg+xml,<svg%0A  xmlns="http://www.w3.org/2000/svg"%0A  width="12"%0A  height="16"%0A  viewBox="0 0 12 16">%0A  <path d="m 1.41,4.5784035 4.59,4.58 4.59,-4.58 1.41,1.41 L 6,11.988404 0,5.9884035 Z"/>%0A</svg>');
+    mask-image: url('data:image/svg+xml,<svg%0A  xmlns="http://www.w3.org/2000/svg"%0A  width="12"%0A  height="16"%0A  viewBox="0 0 12 16">%0A  <path d="m 1.41,4.5784035 4.59,4.58 4.59,-4.58 1.41,1.41 L 6,11.988404 0,5.9884035 Z"/>%0A</svg>');
   }
 }
 .arrow-up {
   &.bg-icon {
-    background-image: url('data:image/svg+xml,<svg%0D%0A  xmlns="http://www.w3.org/2000/svg"%0D%0A  width="12"%0D%0A  height="16"%0D%0A  viewBox="0 0 12 16">%0D%0A  <path d="M 1.41,11.536062 6,6.9560619 10.59,11.536062 12,10.126062 6,4.1260619 0,10.126062 Z"/>%0D%0A</svg>');
+    background-image: url('data:image/svg+xml,<svg%0A  xmlns="http://www.w3.org/2000/svg"%0A  width="12"%0A  height="16"%0A  viewBox="0 0 12 16">%0A  <path d="M 1.41,11.536062 6,6.9560619 10.59,11.536062 12,10.126062 6,4.1260619 0,10.126062 Z"/>%0A</svg>');
   }
   &.mask-icon {
-    -webkit-mask-image: url('data:image/svg+xml,<svg%0D%0A  xmlns="http://www.w3.org/2000/svg"%0D%0A  width="12"%0D%0A  height="16"%0D%0A  viewBox="0 0 12 16">%0D%0A  <path d="M 1.41,11.536062 6,6.9560619 10.59,11.536062 12,10.126062 6,4.1260619 0,10.126062 Z"/>%0D%0A</svg>');
-    mask-image: url('data:image/svg+xml,<svg%0D%0A  xmlns="http://www.w3.org/2000/svg"%0D%0A  width="12"%0D%0A  height="16"%0D%0A  viewBox="0 0 12 16">%0D%0A  <path d="M 1.41,11.536062 6,6.9560619 10.59,11.536062 12,10.126062 6,4.1260619 0,10.126062 Z"/>%0D%0A</svg>');
+    -webkit-mask-image: url('data:image/svg+xml,<svg%0A  xmlns="http://www.w3.org/2000/svg"%0A  width="12"%0A  height="16"%0A  viewBox="0 0 12 16">%0A  <path d="M 1.41,11.536062 6,6.9560619 10.59,11.536062 12,10.126062 6,4.1260619 0,10.126062 Z"/>%0A</svg>');
+    mask-image: url('data:image/svg+xml,<svg%0A  xmlns="http://www.w3.org/2000/svg"%0A  width="12"%0A  height="16"%0A  viewBox="0 0 12 16">%0A  <path d="M 1.41,11.536062 6,6.9560619 10.59,11.536062 12,10.126062 6,4.1260619 0,10.126062 Z"/>%0A</svg>');
   }
 }
 .bar-chart {
   &.bg-icon {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M5 9.2h3V19H5zM10.6 5h2.8v14h-2.8zm5.6 8H19v6h-2.8z"/>%0D%0A</svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M5 9.2h3V19H5zM10.6 5h2.8v14h-2.8zm5.6 8H19v6h-2.8z"/>%0A</svg>');
   }
   &.mask-icon {
-    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M5 9.2h3V19H5zM10.6 5h2.8v14h-2.8zm5.6 8H19v6h-2.8z"/>%0D%0A</svg>');
-    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M5 9.2h3V19H5zM10.6 5h2.8v14h-2.8zm5.6 8H19v6h-2.8z"/>%0D%0A</svg>');
+    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M5 9.2h3V19H5zM10.6 5h2.8v14h-2.8zm5.6 8H19v6h-2.8z"/>%0A</svg>');
+    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M5 9.2h3V19H5zM10.6 5h2.8v14h-2.8zm5.6 8H19v6h-2.8z"/>%0A</svg>');
   }
 }
 .bubble-chart {
   &.bg-icon {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<circle cx="7.2" cy="14.4" r="3.2"/>%0D%0A<circle cx="14.8" cy="18" r="2"/>%0D%0A<circle cx="15.2" cy="8.8" r="4.8"/>%0D%0A</svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<circle cx="7.2" cy="14.4" r="3.2"/>%0A<circle cx="14.8" cy="18" r="2"/>%0A<circle cx="15.2" cy="8.8" r="4.8"/>%0A</svg>');
   }
   &.mask-icon {
-    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<circle cx="7.2" cy="14.4" r="3.2"/>%0D%0A<circle cx="14.8" cy="18" r="2"/>%0D%0A<circle cx="15.2" cy="8.8" r="4.8"/>%0D%0A</svg>');
-    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<circle cx="7.2" cy="14.4" r="3.2"/>%0D%0A<circle cx="14.8" cy="18" r="2"/>%0D%0A<circle cx="15.2" cy="8.8" r="4.8"/>%0D%0A</svg>');
+    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<circle cx="7.2" cy="14.4" r="3.2"/>%0A<circle cx="14.8" cy="18" r="2"/>%0A<circle cx="15.2" cy="8.8" r="4.8"/>%0A</svg>');
+    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<circle cx="7.2" cy="14.4" r="3.2"/>%0A<circle cx="14.8" cy="18" r="2"/>%0A<circle cx="15.2" cy="8.8" r="4.8"/>%0A</svg>');
   }
 }
 .bug-report {
   &.bg-icon {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M20 8h-2.81c-.45-.78-1.07-1.45-1.82-1.96L17 4.41 15.59 3l-2.17 2.17C12.96 5.06 12.49 5 12 5c-.49 0-.96.06-1.41.17L8.41 3 7 4.41l1.62 1.63C7.88 6.55 7.26 7.22 6.81 8H4v2h2.09c-.05.33-.09.66-.09 1v1H4v2h2v1c0 .34.04.67.09 1H4v2h2.81c1.04 1.79 2.97 3 5.19 3s4.15-1.21 5.19-3H20v-2h-2.09c.05-.33.09-.66.09-1v-1h2v-2h-2v-1c0-.34-.04-.67-.09-1H20V8zm-6 8h-4v-2h4v2zm0-4h-4v-2h4v2z"/>%0D%0A</svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M20 8h-2.81c-.45-.78-1.07-1.45-1.82-1.96L17 4.41 15.59 3l-2.17 2.17C12.96 5.06 12.49 5 12 5c-.49 0-.96.06-1.41.17L8.41 3 7 4.41l1.62 1.63C7.88 6.55 7.26 7.22 6.81 8H4v2h2.09c-.05.33-.09.66-.09 1v1H4v2h2v1c0 .34.04.67.09 1H4v2h2.81c1.04 1.79 2.97 3 5.19 3s4.15-1.21 5.19-3H20v-2h-2.09c.05-.33.09-.66.09-1v-1h2v-2h-2v-1c0-.34-.04-.67-.09-1H20V8zm-6 8h-4v-2h4v2zm0-4h-4v-2h4v2z"/>%0A</svg>');
   }
   &.mask-icon {
-    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M20 8h-2.81c-.45-.78-1.07-1.45-1.82-1.96L17 4.41 15.59 3l-2.17 2.17C12.96 5.06 12.49 5 12 5c-.49 0-.96.06-1.41.17L8.41 3 7 4.41l1.62 1.63C7.88 6.55 7.26 7.22 6.81 8H4v2h2.09c-.05.33-.09.66-.09 1v1H4v2h2v1c0 .34.04.67.09 1H4v2h2.81c1.04 1.79 2.97 3 5.19 3s4.15-1.21 5.19-3H20v-2h-2.09c.05-.33.09-.66.09-1v-1h2v-2h-2v-1c0-.34-.04-.67-.09-1H20V8zm-6 8h-4v-2h4v2zm0-4h-4v-2h4v2z"/>%0D%0A</svg>');
-    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M20 8h-2.81c-.45-.78-1.07-1.45-1.82-1.96L17 4.41 15.59 3l-2.17 2.17C12.96 5.06 12.49 5 12 5c-.49 0-.96.06-1.41.17L8.41 3 7 4.41l1.62 1.63C7.88 6.55 7.26 7.22 6.81 8H4v2h2.09c-.05.33-.09.66-.09 1v1H4v2h2v1c0 .34.04.67.09 1H4v2h2.81c1.04 1.79 2.97 3 5.19 3s4.15-1.21 5.19-3H20v-2h-2.09c.05-.33.09-.66.09-1v-1h2v-2h-2v-1c0-.34-.04-.67-.09-1H20V8zm-6 8h-4v-2h4v2zm0-4h-4v-2h4v2z"/>%0D%0A</svg>');
+    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M20 8h-2.81c-.45-.78-1.07-1.45-1.82-1.96L17 4.41 15.59 3l-2.17 2.17C12.96 5.06 12.49 5 12 5c-.49 0-.96.06-1.41.17L8.41 3 7 4.41l1.62 1.63C7.88 6.55 7.26 7.22 6.81 8H4v2h2.09c-.05.33-.09.66-.09 1v1H4v2h2v1c0 .34.04.67.09 1H4v2h2.81c1.04 1.79 2.97 3 5.19 3s4.15-1.21 5.19-3H20v-2h-2.09c.05-.33.09-.66.09-1v-1h2v-2h-2v-1c0-.34-.04-.67-.09-1H20V8zm-6 8h-4v-2h4v2zm0-4h-4v-2h4v2z"/>%0A</svg>');
+    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M20 8h-2.81c-.45-.78-1.07-1.45-1.82-1.96L17 4.41 15.59 3l-2.17 2.17C12.96 5.06 12.49 5 12 5c-.49 0-.96.06-1.41.17L8.41 3 7 4.41l1.62 1.63C7.88 6.55 7.26 7.22 6.81 8H4v2h2.09c-.05.33-.09.66-.09 1v1H4v2h2v1c0 .34.04.67.09 1H4v2h2.81c1.04 1.79 2.97 3 5.19 3s4.15-1.21 5.19-3H20v-2h-2.09c.05-.33.09-.66.09-1v-1h2v-2h-2v-1c0-.34-.04-.67-.09-1H20V8zm-6 8h-4v-2h4v2zm0-4h-4v-2h4v2z"/>%0A</svg>');
   }
 }
 .build {
@@ -396,29 +396,29 @@ h3 {
 }
 .car {
   &.bg-icon {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="18px" height="18px"><path d="M0 0h24v24H0z" fill="none"/><path d="M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.21.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.5 16c-.83 0-1.5-.67-1.5-1.5S5.67 13 6.5 13s1.5.67 1.5 1.5S7.33 16 6.5 16zm11 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM5 11l1.5-4.5h11L19 11H5z"/></svg>%0D%0A');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="18px" height="18px"><path d="M0 0h24v24H0z" fill="none"/><path d="M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.21.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.5 16c-.83 0-1.5-.67-1.5-1.5S5.67 13 6.5 13s1.5.67 1.5 1.5S7.33 16 6.5 16zm11 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM5 11l1.5-4.5h11L19 11H5z"/></svg>%0A');
   }
   &.mask-icon {
-    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="18px" height="18px"><path d="M0 0h24v24H0z" fill="none"/><path d="M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.21.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.5 16c-.83 0-1.5-.67-1.5-1.5S5.67 13 6.5 13s1.5.67 1.5 1.5S7.33 16 6.5 16zm11 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM5 11l1.5-4.5h11L19 11H5z"/></svg>%0D%0A');
-    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="18px" height="18px"><path d="M0 0h24v24H0z" fill="none"/><path d="M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.21.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.5 16c-.83 0-1.5-.67-1.5-1.5S5.67 13 6.5 13s1.5.67 1.5 1.5S7.33 16 6.5 16zm11 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM5 11l1.5-4.5h11L19 11H5z"/></svg>%0D%0A');
+    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="18px" height="18px"><path d="M0 0h24v24H0z" fill="none"/><path d="M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.21.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.5 16c-.83 0-1.5-.67-1.5-1.5S5.67 13 6.5 13s1.5.67 1.5 1.5S7.33 16 6.5 16zm11 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM5 11l1.5-4.5h11L19 11H5z"/></svg>%0A');
+    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="18px" height="18px"><path d="M0 0h24v24H0z" fill="none"/><path d="M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.21.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.5 16c-.83 0-1.5-.67-1.5-1.5S5.67 13 6.5 13s1.5.67 1.5 1.5S7.33 16 6.5 16zm11 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM5 11l1.5-4.5h11L19 11H5z"/></svg>%0A');
   }
 }
 .circle-dot {
   &.bg-icon {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" viewBox="0 0 24 24">%0D%0A<path d="M2.88,7.88l1.54,1.54C4.15,10.23,4,11.1,4,12c0,4.41,3.59,8,8,8s8-3.59,8-8s-3.59-8-8-8c-0.9,0-1.77,0.15-2.58,0.42 L7.89,2.89C9.15,2.32,10.54,2,12,2c5.52,0,10,4.48,10,10s-4.48,10-10,10S2,17.52,2,12C2,10.53,2.32,9.14,2.88,7.88z M7,5.5 C7,6.33,6.33,7,5.5,7S4,6.33,4,5.5S4.67,4,5.5,4S7,4.67,7,5.5z"/>%0D%0A</svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" viewBox="0 0 24 24">%0A<path d="M2.88,7.88l1.54,1.54C4.15,10.23,4,11.1,4,12c0,4.41,3.59,8,8,8s8-3.59,8-8s-3.59-8-8-8c-0.9,0-1.77,0.15-2.58,0.42 L7.89,2.89C9.15,2.32,10.54,2,12,2c5.52,0,10,4.48,10,10s-4.48,10-10,10S2,17.52,2,12C2,10.53,2.32,9.14,2.88,7.88z M7,5.5 C7,6.33,6.33,7,5.5,7S4,6.33,4,5.5S4.67,4,5.5,4S7,4.67,7,5.5z"/>%0A</svg>');
   }
   &.mask-icon {
-    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" viewBox="0 0 24 24">%0D%0A<path d="M2.88,7.88l1.54,1.54C4.15,10.23,4,11.1,4,12c0,4.41,3.59,8,8,8s8-3.59,8-8s-3.59-8-8-8c-0.9,0-1.77,0.15-2.58,0.42 L7.89,2.89C9.15,2.32,10.54,2,12,2c5.52,0,10,4.48,10,10s-4.48,10-10,10S2,17.52,2,12C2,10.53,2.32,9.14,2.88,7.88z M7,5.5 C7,6.33,6.33,7,5.5,7S4,6.33,4,5.5S4.67,4,5.5,4S7,4.67,7,5.5z"/>%0D%0A</svg>');
-    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" viewBox="0 0 24 24">%0D%0A<path d="M2.88,7.88l1.54,1.54C4.15,10.23,4,11.1,4,12c0,4.41,3.59,8,8,8s8-3.59,8-8s-3.59-8-8-8c-0.9,0-1.77,0.15-2.58,0.42 L7.89,2.89C9.15,2.32,10.54,2,12,2c5.52,0,10,4.48,10,10s-4.48,10-10,10S2,17.52,2,12C2,10.53,2.32,9.14,2.88,7.88z M7,5.5 C7,6.33,6.33,7,5.5,7S4,6.33,4,5.5S4.67,4,5.5,4S7,4.67,7,5.5z"/>%0D%0A</svg>');
+    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" viewBox="0 0 24 24">%0A<path d="M2.88,7.88l1.54,1.54C4.15,10.23,4,11.1,4,12c0,4.41,3.59,8,8,8s8-3.59,8-8s-3.59-8-8-8c-0.9,0-1.77,0.15-2.58,0.42 L7.89,2.89C9.15,2.32,10.54,2,12,2c5.52,0,10,4.48,10,10s-4.48,10-10,10S2,17.52,2,12C2,10.53,2.32,9.14,2.88,7.88z M7,5.5 C7,6.33,6.33,7,5.5,7S4,6.33,4,5.5S4.67,4,5.5,4S7,4.67,7,5.5z"/>%0A</svg>');
+    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" viewBox="0 0 24 24">%0A<path d="M2.88,7.88l1.54,1.54C4.15,10.23,4,11.1,4,12c0,4.41,3.59,8,8,8s8-3.59,8-8s-3.59-8-8-8c-0.9,0-1.77,0.15-2.58,0.42 L7.89,2.89C9.15,2.32,10.54,2,12,2c5.52,0,10,4.48,10,10s-4.48,10-10,10S2,17.52,2,12C2,10.53,2.32,9.14,2.88,7.88z M7,5.5 C7,6.33,6.33,7,5.5,7S4,6.33,4,5.5S4.67,4,5.5,4S7,4.67,7,5.5z"/>%0A</svg>');
   }
 }
 .city {
   &.bg-icon {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="18px" height="18px"><path d="M0 0h24v24H0z" fill="none"/><path d="M15 11V5l-3-3-3 3v2H3v14h18V11h-6zm-8 8H5v-2h2v2zm0-4H5v-2h2v2zm0-4H5V9h2v2zm6 8h-2v-2h2v2zm0-4h-2v-2h2v2zm0-4h-2V9h2v2zm0-4h-2V5h2v2zm6 12h-2v-2h2v2zm0-4h-2v-2h2v2z"/></svg>%0D%0A');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="18px" height="18px"><path d="M0 0h24v24H0z" fill="none"/><path d="M15 11V5l-3-3-3 3v2H3v14h18V11h-6zm-8 8H5v-2h2v2zm0-4H5v-2h2v2zm0-4H5V9h2v2zm6 8h-2v-2h2v2zm0-4h-2v-2h2v2zm0-4h-2V9h2v2zm0-4h-2V5h2v2zm6 12h-2v-2h2v2zm0-4h-2v-2h2v2z"/></svg>%0A');
   }
   &.mask-icon {
-    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="18px" height="18px"><path d="M0 0h24v24H0z" fill="none"/><path d="M15 11V5l-3-3-3 3v2H3v14h18V11h-6zm-8 8H5v-2h2v2zm0-4H5v-2h2v2zm0-4H5V9h2v2zm6 8h-2v-2h2v2zm0-4h-2v-2h2v2zm0-4h-2V9h2v2zm0-4h-2V5h2v2zm6 12h-2v-2h2v2zm0-4h-2v-2h2v2z"/></svg>%0D%0A');
-    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="18px" height="18px"><path d="M0 0h24v24H0z" fill="none"/><path d="M15 11V5l-3-3-3 3v2H3v14h18V11h-6zm-8 8H5v-2h2v2zm0-4H5v-2h2v2zm0-4H5V9h2v2zm6 8h-2v-2h2v2zm0-4h-2v-2h2v2zm0-4h-2V9h2v2zm0-4h-2V5h2v2zm6 12h-2v-2h2v2zm0-4h-2v-2h2v2z"/></svg>%0D%0A');
+    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="18px" height="18px"><path d="M0 0h24v24H0z" fill="none"/><path d="M15 11V5l-3-3-3 3v2H3v14h18V11h-6zm-8 8H5v-2h2v2zm0-4H5v-2h2v2zm0-4H5V9h2v2zm6 8h-2v-2h2v2zm0-4h-2v-2h2v2zm0-4h-2V9h2v2zm0-4h-2V5h2v2zm6 12h-2v-2h2v2zm0-4h-2v-2h2v2z"/></svg>%0A');
+    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="18px" height="18px"><path d="M0 0h24v24H0z" fill="none"/><path d="M15 11V5l-3-3-3 3v2H3v14h18V11h-6zm-8 8H5v-2h2v2zm0-4H5v-2h2v2zm0-4H5V9h2v2zm6 8h-2v-2h2v2zm0-4h-2v-2h2v2zm0-4h-2V9h2v2zm0-4h-2V5h2v2zm6 12h-2v-2h2v2zm0-4h-2v-2h2v2z"/></svg>%0A');
   }
 }
 .copy {
@@ -441,20 +441,20 @@ h3 {
 }
 .cloud-upload {
   &.bg-icon {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"/>%0D%0A</svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"/>%0A</svg>');
   }
   &.mask-icon {
-    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"/>%0D%0A</svg>');
-    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"/>%0D%0A</svg>');
+    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"/>%0A</svg>');
+    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"/>%0A</svg>');
   }
 }
 .description {
   &.bg-icon {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/>%0D%0A</svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/>%0A</svg>');
   }
   &.mask-icon {
-    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/>%0D%0A</svg>');
-    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/>%0D%0A</svg>');
+    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/>%0A</svg>');
+    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/>%0A</svg>');
   }
 }
 .done {
@@ -468,29 +468,29 @@ h3 {
 }
 .donut-small {
   &.bg-icon {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M11 9.16V2c-5 .5-9 4.79-9 10s4 9.5 9 10v-7.16c-1-.41-2-1.52-2-2.84s1-2.43 2-2.84zM14.86 11H22c-.48-4.75-4-8.53-9-9v7.16c1 .3 1.52.98 1.86 1.84zM13 14.84V22c5-.47 8.52-4.25 9-9h-7.14c-.34.86-.86 1.54-1.86 1.84z"/>%0D%0A</svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M11 9.16V2c-5 .5-9 4.79-9 10s4 9.5 9 10v-7.16c-1-.41-2-1.52-2-2.84s1-2.43 2-2.84zM14.86 11H22c-.48-4.75-4-8.53-9-9v7.16c1 .3 1.52.98 1.86 1.84zM13 14.84V22c5-.47 8.52-4.25 9-9h-7.14c-.34.86-.86 1.54-1.86 1.84z"/>%0A</svg>');
   }
   &.mask-icon {
-    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M11 9.16V2c-5 .5-9 4.79-9 10s4 9.5 9 10v-7.16c-1-.41-2-1.52-2-2.84s1-2.43 2-2.84zM14.86 11H22c-.48-4.75-4-8.53-9-9v7.16c1 .3 1.52.98 1.86 1.84zM13 14.84V22c5-.47 8.52-4.25 9-9h-7.14c-.34.86-.86 1.54-1.86 1.84z"/>%0D%0A</svg>');
-    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M11 9.16V2c-5 .5-9 4.79-9 10s4 9.5 9 10v-7.16c-1-.41-2-1.52-2-2.84s1-2.43 2-2.84zM14.86 11H22c-.48-4.75-4-8.53-9-9v7.16c1 .3 1.52.98 1.86 1.84zM13 14.84V22c5-.47 8.52-4.25 9-9h-7.14c-.34.86-.86 1.54-1.86 1.84z"/>%0D%0A</svg>');
+    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M11 9.16V2c-5 .5-9 4.79-9 10s4 9.5 9 10v-7.16c-1-.41-2-1.52-2-2.84s1-2.43 2-2.84zM14.86 11H22c-.48-4.75-4-8.53-9-9v7.16c1 .3 1.52.98 1.86 1.84zM13 14.84V22c5-.47 8.52-4.25 9-9h-7.14c-.34.86-.86 1.54-1.86 1.84z"/>%0A</svg>');
+    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M11 9.16V2c-5 .5-9 4.79-9 10s4 9.5 9 10v-7.16c-1-.41-2-1.52-2-2.84s1-2.43 2-2.84zM14.86 11H22c-.48-4.75-4-8.53-9-9v7.16c1 .3 1.52.98 1.86 1.84zM13 14.84V22c5-.47 8.52-4.25 9-9h-7.14c-.34.86-.86 1.54-1.86 1.84z"/>%0A</svg>');
   }
 }
 .drop-down {
   &.bg-icon {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M7 10l5 5 5-5z"/>%0D%0A</svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M7 10l5 5 5-5z"/>%0A</svg>');
   }
   &.mask-icon {
-    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M7 10l5 5 5-5z"/>%0D%0A</svg>');
-    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M7 10l5 5 5-5z"/>%0D%0A</svg>');
+    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M7 10l5 5 5-5z"/>%0A</svg>');
+    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M7 10l5 5 5-5z"/>%0A</svg>');
   }
 }
 .drop-up {
   &.bg-icon {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M7 14l5-5 5 5z"/>%0D%0A</svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M7 14l5-5 5 5z"/>%0A</svg>');
   }
   &.mask-icon {
-    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M7 14l5-5 5 5z"/>%0D%0A</svg>');
-    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M7 14l5-5 5 5z"/>%0D%0A</svg>');
+    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M7 14l5-5 5 5z"/>%0A</svg>');
+    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M7 14l5-5 5 5z"/>%0A</svg>');
   }
 }
 .edit {
@@ -504,20 +504,20 @@ h3 {
 }
 .event-note {
   &.bg-icon {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M17 10H7v2h10v-2zm2-7h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zm-5-5H7v2h7v-2z"/>%0D%0A</svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M17 10H7v2h10v-2zm2-7h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zm-5-5H7v2h7v-2z"/>%0A</svg>');
   }
   &.mask-icon {
-    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M17 10H7v2h10v-2zm2-7h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zm-5-5H7v2h7v-2z"/>%0D%0A</svg>');
-    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M17 10H7v2h10v-2zm2-7h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zm-5-5H7v2h7v-2z"/>%0D%0A</svg>');
+    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M17 10H7v2h10v-2zm2-7h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zm-5-5H7v2h7v-2z"/>%0A</svg>');
+    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M17 10H7v2h10v-2zm2-7h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zm-5-5H7v2h7v-2z"/>%0A</svg>');
   }
 }
 .face {
   &.bg-icon {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M9 11.75c-.69 0-1.25.56-1.25 1.25s.56 1.25 1.25 1.25 1.25-.56 1.25-1.25-.56-1.25-1.25-1.25zm6 0c-.69 0-1.25.56-1.25 1.25s.56 1.25 1.25 1.25 1.25-.56 1.25-1.25-.56-1.25-1.25-1.25zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-.29.02-.58.05-.86 2.36-1.05 4.23-2.98 5.21-5.37C11.07 8.33 14.05 10 17.42 10c.78 0 1.53-.09 2.25-.26.21.71.33 1.47.33 2.26 0 4.41-3.59 8-8 8z"/>%0D%0A</svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M9 11.75c-.69 0-1.25.56-1.25 1.25s.56 1.25 1.25 1.25 1.25-.56 1.25-1.25-.56-1.25-1.25-1.25zm6 0c-.69 0-1.25.56-1.25 1.25s.56 1.25 1.25 1.25 1.25-.56 1.25-1.25-.56-1.25-1.25-1.25zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-.29.02-.58.05-.86 2.36-1.05 4.23-2.98 5.21-5.37C11.07 8.33 14.05 10 17.42 10c.78 0 1.53-.09 2.25-.26.21.71.33 1.47.33 2.26 0 4.41-3.59 8-8 8z"/>%0A</svg>');
   }
   &.mask-icon {
-    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M9 11.75c-.69 0-1.25.56-1.25 1.25s.56 1.25 1.25 1.25 1.25-.56 1.25-1.25-.56-1.25-1.25-1.25zm6 0c-.69 0-1.25.56-1.25 1.25s.56 1.25 1.25 1.25 1.25-.56 1.25-1.25-.56-1.25-1.25-1.25zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-.29.02-.58.05-.86 2.36-1.05 4.23-2.98 5.21-5.37C11.07 8.33 14.05 10 17.42 10c.78 0 1.53-.09 2.25-.26.21.71.33 1.47.33 2.26 0 4.41-3.59 8-8 8z"/>%0D%0A</svg>');
-    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M9 11.75c-.69 0-1.25.56-1.25 1.25s.56 1.25 1.25 1.25 1.25-.56 1.25-1.25-.56-1.25-1.25-1.25zm6 0c-.69 0-1.25.56-1.25 1.25s.56 1.25 1.25 1.25 1.25-.56 1.25-1.25-.56-1.25-1.25-1.25zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-.29.02-.58.05-.86 2.36-1.05 4.23-2.98 5.21-5.37C11.07 8.33 14.05 10 17.42 10c.78 0 1.53-.09 2.25-.26.21.71.33 1.47.33 2.26 0 4.41-3.59 8-8 8z"/>%0D%0A</svg>');
+    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M9 11.75c-.69 0-1.25.56-1.25 1.25s.56 1.25 1.25 1.25 1.25-.56 1.25-1.25-.56-1.25-1.25-1.25zm6 0c-.69 0-1.25.56-1.25 1.25s.56 1.25 1.25 1.25 1.25-.56 1.25-1.25-.56-1.25-1.25-1.25zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-.29.02-.58.05-.86 2.36-1.05 4.23-2.98 5.21-5.37C11.07 8.33 14.05 10 17.42 10c.78 0 1.53-.09 2.25-.26.21.71.33 1.47.33 2.26 0 4.41-3.59 8-8 8z"/>%0A</svg>');
+    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M9 11.75c-.69 0-1.25.56-1.25 1.25s.56 1.25 1.25 1.25 1.25-.56 1.25-1.25-.56-1.25-1.25-1.25zm6 0c-.69 0-1.25.56-1.25 1.25s.56 1.25 1.25 1.25 1.25-.56 1.25-1.25-.56-1.25-1.25-1.25zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-.29.02-.58.05-.86 2.36-1.05 4.23-2.98 5.21-5.37C11.07 8.33 14.05 10 17.42 10c.78 0 1.53-.09 2.25-.26.21.71.33 1.47.33 2.26 0 4.41-3.59 8-8 8z"/>%0A</svg>');
   }
 }
 .feature-info {
@@ -531,92 +531,92 @@ h3 {
 }
 .filter-list {
   &.bg-icon {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"/>%0D%0A</svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"/>%0A</svg>');
   }
   &.mask-icon {
-    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"/>%0D%0A</svg>');
-    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"/>%0D%0A</svg>');
+    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"/>%0A</svg>');
+    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"/>%0A</svg>');
   }
 }
 .fullscreen {
   &.bg-icon {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>%0D%0A</svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>%0A</svg>');
   }
   &.mask-icon {
-    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>%0D%0A</svg>');
-    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>%0D%0A</svg>');
+    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>%0A</svg>');
+    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>%0A</svg>');
   }
 }
 .gps-not-fixed {
   &.bg-icon {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M20.94 11c-.46-4.17-3.77-7.48-7.94-7.94V1h-2v2.06C6.83 3.52 3.52 6.83 3.06 11H1v2h2.06c.46 4.17 3.77 7.48 7.94 7.94V23h2v-2.06c4.17-.46 7.48-3.77 7.94-7.94H23v-2h-2.06zM12 19c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"/>%0D%0A</svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M20.94 11c-.46-4.17-3.77-7.48-7.94-7.94V1h-2v2.06C6.83 3.52 3.52 6.83 3.06 11H1v2h2.06c.46 4.17 3.77 7.48 7.94 7.94V23h2v-2.06c4.17-.46 7.48-3.77 7.94-7.94H23v-2h-2.06zM12 19c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"/>%0A</svg>');
   }
   &.mask-icon {
-    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M20.94 11c-.46-4.17-3.77-7.48-7.94-7.94V1h-2v2.06C6.83 3.52 3.52 6.83 3.06 11H1v2h2.06c.46 4.17 3.77 7.48 7.94 7.94V23h2v-2.06c4.17-.46 7.48-3.77 7.94-7.94H23v-2h-2.06zM12 19c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"/>%0D%0A</svg>');
-    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M20.94 11c-.46-4.17-3.77-7.48-7.94-7.94V1h-2v2.06C6.83 3.52 3.52 6.83 3.06 11H1v2h2.06c.46 4.17 3.77 7.48 7.94 7.94V23h2v-2.06c4.17-.46 7.48-3.77 7.94-7.94H23v-2h-2.06zM12 19c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"/>%0D%0A</svg>');
+    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M20.94 11c-.46-4.17-3.77-7.48-7.94-7.94V1h-2v2.06C6.83 3.52 3.52 6.83 3.06 11H1v2h2.06c.46 4.17 3.77 7.48 7.94 7.94V23h2v-2.06c4.17-.46 7.48-3.77 7.94-7.94H23v-2h-2.06zM12 19c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"/>%0A</svg>');
+    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M20.94 11c-.46-4.17-3.77-7.48-7.94-7.94V1h-2v2.06C6.83 3.52 3.52 6.83 3.06 11H1v2h2.06c.46 4.17 3.77 7.48 7.94 7.94V23h2v-2.06c4.17-.46 7.48-3.77 7.94-7.94H23v-2h-2.06zM12 19c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"/>%0A</svg>');
   }
 }
 .layers {
   &.bg-icon {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M11.99 18.54l-7.37-5.73L3 14.07l9 7 9-7-1.63-1.27-7.38 5.74zM12 16l7.36-5.73L21 9l-9-7-9 7 1.63 1.27L12 16z"/>%0D%0A</svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M11.99 18.54l-7.37-5.73L3 14.07l9 7 9-7-1.63-1.27-7.38 5.74zM12 16l7.36-5.73L21 9l-9-7-9 7 1.63 1.27L12 16z"/>%0A</svg>');
   }
   &.mask-icon {
-    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M11.99 18.54l-7.37-5.73L3 14.07l9 7 9-7-1.63-1.27-7.38 5.74zM12 16l7.36-5.73L21 9l-9-7-9 7 1.63 1.27L12 16z"/>%0D%0A</svg>');
-    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M11.99 18.54l-7.37-5.73L3 14.07l9 7 9-7-1.63-1.27-7.38 5.74zM12 16l7.36-5.73L21 9l-9-7-9 7 1.63 1.27L12 16z"/>%0D%0A</svg>');
+    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M11.99 18.54l-7.37-5.73L3 14.07l9 7 9-7-1.63-1.27-7.38 5.74zM12 16l7.36-5.73L21 9l-9-7-9 7 1.63 1.27L12 16z"/>%0A</svg>');
+    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M11.99 18.54l-7.37-5.73L3 14.07l9 7 9-7-1.63-1.27-7.38 5.74zM12 16l7.36-5.73L21 9l-9-7-9 7 1.63 1.27L12 16z"/>%0A</svg>');
   }
 }
 .line {
   &.bg-icon {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">%0D%0A<path d="M23,8c0,1.1-0.9,2-2,2c-0.18,0-0.35-0.02-0.51-0.07l-3.56,3.55C16.98,13.64,17,13.82,17,14c0,1.1-0.9,2-2,2s-2-0.9-2-2 c0-0.18,0.02-0.36,0.07-0.52l-2.55-2.55C10.36,10.98,10.18,11,10,11s-0.36-0.02-0.52-0.07l-4.55,4.56C4.98,15.65,5,15.82,5,16 c0,1.1-0.9,2-2,2s-2-0.9-2-2s0.9-2,2-2c0.18,0,0.35,0.02,0.51,0.07l4.56-4.55C8.02,9.36,8,9.18,8,9c0-1.1,0.9-2,2-2s2,0.9,2,2 c0,0.18-0.02,0.36-0.07,0.52l2.55,2.55C14.64,12.02,14.82,12,15,12s0.36,0.02,0.52,0.07l3.55-3.56C19.02,8.35,19,8.18,19,8 c0-1.1,0.9-2,2-2S23,6.9,23,8z"/>%0D%0A</svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">%0A<path d="M23,8c0,1.1-0.9,2-2,2c-0.18,0-0.35-0.02-0.51-0.07l-3.56,3.55C16.98,13.64,17,13.82,17,14c0,1.1-0.9,2-2,2s-2-0.9-2-2 c0-0.18,0.02-0.36,0.07-0.52l-2.55-2.55C10.36,10.98,10.18,11,10,11s-0.36-0.02-0.52-0.07l-4.55,4.56C4.98,15.65,5,15.82,5,16 c0,1.1-0.9,2-2,2s-2-0.9-2-2s0.9-2,2-2c0.18,0,0.35,0.02,0.51,0.07l4.56-4.55C8.02,9.36,8,9.18,8,9c0-1.1,0.9-2,2-2s2,0.9,2,2 c0,0.18-0.02,0.36-0.07,0.52l2.55,2.55C14.64,12.02,14.82,12,15,12s0.36,0.02,0.52,0.07l3.55-3.56C19.02,8.35,19,8.18,19,8 c0-1.1,0.9-2,2-2S23,6.9,23,8z"/>%0A</svg>');
   }
   &.mask-icon {
-    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">%0D%0A<path d="M23,8c0,1.1-0.9,2-2,2c-0.18,0-0.35-0.02-0.51-0.07l-3.56,3.55C16.98,13.64,17,13.82,17,14c0,1.1-0.9,2-2,2s-2-0.9-2-2 c0-0.18,0.02-0.36,0.07-0.52l-2.55-2.55C10.36,10.98,10.18,11,10,11s-0.36-0.02-0.52-0.07l-4.55,4.56C4.98,15.65,5,15.82,5,16 c0,1.1-0.9,2-2,2s-2-0.9-2-2s0.9-2,2-2c0.18,0,0.35,0.02,0.51,0.07l4.56-4.55C8.02,9.36,8,9.18,8,9c0-1.1,0.9-2,2-2s2,0.9,2,2 c0,0.18-0.02,0.36-0.07,0.52l2.55,2.55C14.64,12.02,14.82,12,15,12s0.36,0.02,0.52,0.07l3.55-3.56C19.02,8.35,19,8.18,19,8 c0-1.1,0.9-2,2-2S23,6.9,23,8z"/>%0D%0A</svg>');
-    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">%0D%0A<path d="M23,8c0,1.1-0.9,2-2,2c-0.18,0-0.35-0.02-0.51-0.07l-3.56,3.55C16.98,13.64,17,13.82,17,14c0,1.1-0.9,2-2,2s-2-0.9-2-2 c0-0.18,0.02-0.36,0.07-0.52l-2.55-2.55C10.36,10.98,10.18,11,10,11s-0.36-0.02-0.52-0.07l-4.55,4.56C4.98,15.65,5,15.82,5,16 c0,1.1-0.9,2-2,2s-2-0.9-2-2s0.9-2,2-2c0.18,0,0.35,0.02,0.51,0.07l4.56-4.55C8.02,9.36,8,9.18,8,9c0-1.1,0.9-2,2-2s2,0.9,2,2 c0,0.18-0.02,0.36-0.07,0.52l2.55,2.55C14.64,12.02,14.82,12,15,12s0.36,0.02,0.52,0.07l3.55-3.56C19.02,8.35,19,8.18,19,8 c0-1.1,0.9-2,2-2S23,6.9,23,8z"/>%0D%0A</svg>');
+    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">%0A<path d="M23,8c0,1.1-0.9,2-2,2c-0.18,0-0.35-0.02-0.51-0.07l-3.56,3.55C16.98,13.64,17,13.82,17,14c0,1.1-0.9,2-2,2s-2-0.9-2-2 c0-0.18,0.02-0.36,0.07-0.52l-2.55-2.55C10.36,10.98,10.18,11,10,11s-0.36-0.02-0.52-0.07l-4.55,4.56C4.98,15.65,5,15.82,5,16 c0,1.1-0.9,2-2,2s-2-0.9-2-2s0.9-2,2-2c0.18,0,0.35,0.02,0.51,0.07l4.56-4.55C8.02,9.36,8,9.18,8,9c0-1.1,0.9-2,2-2s2,0.9,2,2 c0,0.18-0.02,0.36-0.07,0.52l2.55,2.55C14.64,12.02,14.82,12,15,12s0.36,0.02,0.52,0.07l3.55-3.56C19.02,8.35,19,8.18,19,8 c0-1.1,0.9-2,2-2S23,6.9,23,8z"/>%0A</svg>');
+    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">%0A<path d="M23,8c0,1.1-0.9,2-2,2c-0.18,0-0.35-0.02-0.51-0.07l-3.56,3.55C16.98,13.64,17,13.82,17,14c0,1.1-0.9,2-2,2s-2-0.9-2-2 c0-0.18,0.02-0.36,0.07-0.52l-2.55-2.55C10.36,10.98,10.18,11,10,11s-0.36-0.02-0.52-0.07l-4.55,4.56C4.98,15.65,5,15.82,5,16 c0,1.1-0.9,2-2,2s-2-0.9-2-2s0.9-2,2-2c0.18,0,0.35,0.02,0.51,0.07l4.56-4.55C8.02,9.36,8,9.18,8,9c0-1.1,0.9-2,2-2s2,0.9,2,2 c0,0.18-0.02,0.36-0.07,0.52l2.55,2.55C14.64,12.02,14.82,12,15,12s0.36,0.02,0.52,0.07l3.55-3.56C19.02,8.35,19,8.18,19,8 c0-1.1,0.9-2,2-2S23,6.9,23,8z"/>%0A</svg>');
   }
 }
 .location {
   &.bg-icon {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M12 2c3.86 0 7 3.14 7 7 0 5.25-7 13-7 13S5 14.25 5 9c0-3.86 3.14-7 7-7zm-1.53 12"/>%0D%0A</svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M12 2c3.86 0 7 3.14 7 7 0 5.25-7 13-7 13S5 14.25 5 9c0-3.86 3.14-7 7-7zm-1.53 12"/>%0A</svg>');
   }
   &.mask-icon {
-    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M12 2c3.86 0 7 3.14 7 7 0 5.25-7 13-7 13S5 14.25 5 9c0-3.86 3.14-7 7-7zm-1.53 12"/>%0D%0A</svg>');
-    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M12 2c3.86 0 7 3.14 7 7 0 5.25-7 13-7 13S5 14.25 5 9c0-3.86 3.14-7 7-7zm-1.53 12"/>%0D%0A</svg>');
+    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M12 2c3.86 0 7 3.14 7 7 0 5.25-7 13-7 13S5 14.25 5 9c0-3.86 3.14-7 7-7zm-1.53 12"/>%0A</svg>');
+    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M12 2c3.86 0 7 3.14 7 7 0 5.25-7 13-7 13S5 14.25 5 9c0-3.86 3.14-7 7-7zm-1.53 12"/>%0A</svg>');
   }
 }
 .location-tick {
   &.bg-icon {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M12 2c3.86 0 7 3.14 7 7 0 5.25-7 13-7 13S5 14.25 5 9c0-3.86 3.14-7 7-7zm-1.53 12L17 7.41 15.6 6l-5.13 5.18L8.4 9.09 7 10.5l3.47 3.5z"/>%0D%0A</svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M12 2c3.86 0 7 3.14 7 7 0 5.25-7 13-7 13S5 14.25 5 9c0-3.86 3.14-7 7-7zm-1.53 12L17 7.41 15.6 6l-5.13 5.18L8.4 9.09 7 10.5l3.47 3.5z"/>%0A</svg>');
   }
   &.mask-icon {
-    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M12 2c3.86 0 7 3.14 7 7 0 5.25-7 13-7 13S5 14.25 5 9c0-3.86 3.14-7 7-7zm-1.53 12L17 7.41 15.6 6l-5.13 5.18L8.4 9.09 7 10.5l3.47 3.5z"/>%0D%0A</svg>');
-    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M12 2c3.86 0 7 3.14 7 7 0 5.25-7 13-7 13S5 14.25 5 9c0-3.86 3.14-7 7-7zm-1.53 12L17 7.41 15.6 6l-5.13 5.18L8.4 9.09 7 10.5l3.47 3.5z"/>%0D%0A</svg>');
+    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M12 2c3.86 0 7 3.14 7 7 0 5.25-7 13-7 13S5 14.25 5 9c0-3.86 3.14-7 7-7zm-1.53 12L17 7.41 15.6 6l-5.13 5.18L8.4 9.09 7 10.5l3.47 3.5z"/>%0A</svg>');
+    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M12 2c3.86 0 7 3.14 7 7 0 5.25-7 13-7 13S5 14.25 5 9c0-3.86 3.14-7 7-7zm-1.53 12L17 7.41 15.6 6l-5.13 5.18L8.4 9.09 7 10.5l3.47 3.5z"/>%0A</svg>');
   }
 }
 .lock-closed {
   &.bg-icon {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/>%0D%0A</svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/>%0A</svg>');
   }
   &.mask-icon {
-    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/>%0D%0A</svg>');
-    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/>%0D%0A</svg>');
+    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/>%0A</svg>');
+    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/>%0A</svg>');
   }
 }
 .lock-open {
   &.bg-icon {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M12 17c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm6-9h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6h1.9c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm0 12H6V10h12v10z"/>%0D%0A</svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M12 17c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm6-9h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6h1.9c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm0 12H6V10h12v10z"/>%0A</svg>');
   }
   &.mask-icon {
-    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M12 17c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm6-9h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6h1.9c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm0 12H6V10h12v10z"/>%0D%0A</svg>');
-    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M12 17c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm6-9h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6h1.9c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm0 12H6V10h12v10z"/>%0D%0A</svg>');
+    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M12 17c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm6-9h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6h1.9c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm0 12H6V10h12v10z"/>%0A</svg>');
+    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M12 17c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm6-9h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6h1.9c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm0 12H6V10h12v10z"/>%0A</svg>');
   }
 }
 .logout {
   &.bg-icon {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A  <path d="M 12.965 4 L 10.965 4 L 10.965 14 L 12.965 14 L 12.965 4 Z " fill="rgb(0,0,0)"/><path d=" M 16.525 6.44 L 15.075 7.89 C 16.805 8.94 17.965 10.83 17.965 13 C 17.965 16.31 15.275 19 11.965 19 C 8.655 19 5.965 16.31 5.965 13 C 5.965 10.83 7.125 8.94 8.845 7.88 L 7.405 6.44 C 5.325 7.88 3.965 10.28 3.965 13 C 3.965 17.42 7.545 21 11.965 21 C 16.385 21 19.965 17.42 19.965 13 C 19.965 10.28 18.605 7.88 16.525 6.44 Z " fill="rgb(0,0,0)"/>%0D%0A</svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A  <path d="M 12.965 4 L 10.965 4 L 10.965 14 L 12.965 14 L 12.965 4 Z " fill="rgb(0,0,0)"/><path d=" M 16.525 6.44 L 15.075 7.89 C 16.805 8.94 17.965 10.83 17.965 13 C 17.965 16.31 15.275 19 11.965 19 C 8.655 19 5.965 16.31 5.965 13 C 5.965 10.83 7.125 8.94 8.845 7.88 L 7.405 6.44 C 5.325 7.88 3.965 10.28 3.965 13 C 3.965 17.42 7.545 21 11.965 21 C 16.385 21 19.965 17.42 19.965 13 C 19.965 10.28 18.605 7.88 16.525 6.44 Z " fill="rgb(0,0,0)"/>%0A</svg>');
   }
   &.mask-icon {
-    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A  <path d="M 12.965 4 L 10.965 4 L 10.965 14 L 12.965 14 L 12.965 4 Z " fill="rgb(0,0,0)"/><path d=" M 16.525 6.44 L 15.075 7.89 C 16.805 8.94 17.965 10.83 17.965 13 C 17.965 16.31 15.275 19 11.965 19 C 8.655 19 5.965 16.31 5.965 13 C 5.965 10.83 7.125 8.94 8.845 7.88 L 7.405 6.44 C 5.325 7.88 3.965 10.28 3.965 13 C 3.965 17.42 7.545 21 11.965 21 C 16.385 21 19.965 17.42 19.965 13 C 19.965 10.28 18.605 7.88 16.525 6.44 Z " fill="rgb(0,0,0)"/>%0D%0A</svg>');
-    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A  <path d="M 12.965 4 L 10.965 4 L 10.965 14 L 12.965 14 L 12.965 4 Z " fill="rgb(0,0,0)"/><path d=" M 16.525 6.44 L 15.075 7.89 C 16.805 8.94 17.965 10.83 17.965 13 C 17.965 16.31 15.275 19 11.965 19 C 8.655 19 5.965 16.31 5.965 13 C 5.965 10.83 7.125 8.94 8.845 7.88 L 7.405 6.44 C 5.325 7.88 3.965 10.28 3.965 13 C 3.965 17.42 7.545 21 11.965 21 C 16.385 21 19.965 17.42 19.965 13 C 19.965 10.28 18.605 7.88 16.525 6.44 Z " fill="rgb(0,0,0)"/>%0D%0A</svg>');
+    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A  <path d="M 12.965 4 L 10.965 4 L 10.965 14 L 12.965 14 L 12.965 4 Z " fill="rgb(0,0,0)"/><path d=" M 16.525 6.44 L 15.075 7.89 C 16.805 8.94 17.965 10.83 17.965 13 C 17.965 16.31 15.275 19 11.965 19 C 8.655 19 5.965 16.31 5.965 13 C 5.965 10.83 7.125 8.94 8.845 7.88 L 7.405 6.44 C 5.325 7.88 3.965 10.28 3.965 13 C 3.965 17.42 7.545 21 11.965 21 C 16.385 21 19.965 17.42 19.965 13 C 19.965 10.28 18.605 7.88 16.525 6.44 Z " fill="rgb(0,0,0)"/>%0A</svg>');
+    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A  <path d="M 12.965 4 L 10.965 4 L 10.965 14 L 12.965 14 L 12.965 4 Z " fill="rgb(0,0,0)"/><path d=" M 16.525 6.44 L 15.075 7.89 C 16.805 8.94 17.965 10.83 17.965 13 C 17.965 16.31 15.275 19 11.965 19 C 8.655 19 5.965 16.31 5.965 13 C 5.965 10.83 7.125 8.94 8.845 7.88 L 7.405 6.44 C 5.325 7.88 3.965 10.28 3.965 13 C 3.965 17.42 7.545 21 11.965 21 C 16.385 21 19.965 17.42 19.965 13 C 19.965 10.28 18.605 7.88 16.525 6.44 Z " fill="rgb(0,0,0)"/>%0A</svg>');
   }
 }
 .map {
@@ -639,38 +639,38 @@ h3 {
 }
 .multiline-chart {
   &.bg-icon {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M22 6.92l-1.41-1.41-2.85 3.21C15.68 6.4 12.83 5 9.61 5 6.72 5 4.07 6.16 2 8l1.42 1.42C5.12 7.93 7.27 7 9.61 7c2.74 0 5.09 1.26 6.77 3.24l-2.88 3.24-4-4L2 16.99l1.5 1.5 6-6.01 4 4 4.05-4.55c.75 1.35 1.25 2.9 1.44 4.55H21c-.22-2.3-.95-4.39-2.04-6.14L22 6.92z"/>%0D%0A</svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M22 6.92l-1.41-1.41-2.85 3.21C15.68 6.4 12.83 5 9.61 5 6.72 5 4.07 6.16 2 8l1.42 1.42C5.12 7.93 7.27 7 9.61 7c2.74 0 5.09 1.26 6.77 3.24l-2.88 3.24-4-4L2 16.99l1.5 1.5 6-6.01 4 4 4.05-4.55c.75 1.35 1.25 2.9 1.44 4.55H21c-.22-2.3-.95-4.39-2.04-6.14L22 6.92z"/>%0A</svg>');
   }
   &.mask-icon {
-    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M22 6.92l-1.41-1.41-2.85 3.21C15.68 6.4 12.83 5 9.61 5 6.72 5 4.07 6.16 2 8l1.42 1.42C5.12 7.93 7.27 7 9.61 7c2.74 0 5.09 1.26 6.77 3.24l-2.88 3.24-4-4L2 16.99l1.5 1.5 6-6.01 4 4 4.05-4.55c.75 1.35 1.25 2.9 1.44 4.55H21c-.22-2.3-.95-4.39-2.04-6.14L22 6.92z"/>%0D%0A</svg>');
-    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M22 6.92l-1.41-1.41-2.85 3.21C15.68 6.4 12.83 5 9.61 5 6.72 5 4.07 6.16 2 8l1.42 1.42C5.12 7.93 7.27 7 9.61 7c2.74 0 5.09 1.26 6.77 3.24l-2.88 3.24-4-4L2 16.99l1.5 1.5 6-6.01 4 4 4.05-4.55c.75 1.35 1.25 2.9 1.44 4.55H21c-.22-2.3-.95-4.39-2.04-6.14L22 6.92z"/>%0D%0A</svg>');
+    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M22 6.92l-1.41-1.41-2.85 3.21C15.68 6.4 12.83 5 9.61 5 6.72 5 4.07 6.16 2 8l1.42 1.42C5.12 7.93 7.27 7 9.61 7c2.74 0 5.09 1.26 6.77 3.24l-2.88 3.24-4-4L2 16.99l1.5 1.5 6-6.01 4 4 4.05-4.55c.75 1.35 1.25 2.9 1.44 4.55H21c-.22-2.3-.95-4.39-2.04-6.14L22 6.92z"/>%0A</svg>');
+    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M22 6.92l-1.41-1.41-2.85 3.21C15.68 6.4 12.83 5 9.61 5 6.72 5 4.07 6.16 2 8l1.42 1.42C5.12 7.93 7.27 7 9.61 7c2.74 0 5.09 1.26 6.77 3.24l-2.88 3.24-4-4L2 16.99l1.5 1.5 6-6.01 4 4 4.05-4.55c.75 1.35 1.25 2.9 1.44 4.55H21c-.22-2.3-.95-4.39-2.04-6.14L22 6.92z"/>%0A</svg>');
   }
 }
 .notes {
   &.bg-icon {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M3 18h12v-2H3v2zM3 6v2h18V6H3zm0 7h18v-2H3v2z"/>%0D%0A</svg>%0D%0A');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M3 18h12v-2H3v2zM3 6v2h18V6H3zm0 7h18v-2H3v2z"/>%0A</svg>%0A');
   }
   &.mask-icon {
-    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M3 18h12v-2H3v2zM3 6v2h18V6H3zm0 7h18v-2H3v2z"/>%0D%0A</svg>%0D%0A');
-    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M3 18h12v-2H3v2zM3 6v2h18V6H3zm0 7h18v-2H3v2z"/>%0D%0A</svg>%0D%0A');
+    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M3 18h12v-2H3v2zM3 6v2h18V6H3zm0 7h18v-2H3v2z"/>%0A</svg>%0A');
+    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M3 18h12v-2H3v2zM3 6v2h18V6H3zm0 7h18v-2H3v2z"/>%0A</svg>%0A');
   }
 }
 .open-in-new {
   &.bg-icon {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48">%0D%0A<path d="M9 42q-1.2 0-2.1-.9Q6 40.2 6 39V9q0-1.2.9-2.1Q7.8 6 9 6h13.95v3H9v30h30V25.05h3V39q0 1.2-.9 2.1-.9.9-2.1.9Zm10.1-10.95L17 28.9 36.9 9H25.95V6H42v16.05h-3v-10.9Z"/>%0D%0A</svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48">%0A<path d="M9 42q-1.2 0-2.1-.9Q6 40.2 6 39V9q0-1.2.9-2.1Q7.8 6 9 6h13.95v3H9v30h30V25.05h3V39q0 1.2-.9 2.1-.9.9-2.1.9Zm10.1-10.95L17 28.9 36.9 9H25.95V6H42v16.05h-3v-10.9Z"/>%0A</svg>');
   }
   &.mask-icon {
-    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48">%0D%0A<path d="M9 42q-1.2 0-2.1-.9Q6 40.2 6 39V9q0-1.2.9-2.1Q7.8 6 9 6h13.95v3H9v30h30V25.05h3V39q0 1.2-.9 2.1-.9.9-2.1.9Zm10.1-10.95L17 28.9 36.9 9H25.95V6H42v16.05h-3v-10.9Z"/>%0D%0A</svg>');
-    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48">%0D%0A<path d="M9 42q-1.2 0-2.1-.9Q6 40.2 6 39V9q0-1.2.9-2.1Q7.8 6 9 6h13.95v3H9v30h30V25.05h3V39q0 1.2-.9 2.1-.9.9-2.1.9Zm10.1-10.95L17 28.9 36.9 9H25.95V6H42v16.05h-3v-10.9Z"/>%0D%0A</svg>');
+    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48">%0A<path d="M9 42q-1.2 0-2.1-.9Q6 40.2 6 39V9q0-1.2.9-2.1Q7.8 6 9 6h13.95v3H9v30h30V25.05h3V39q0 1.2-.9 2.1-.9.9-2.1.9Zm10.1-10.95L17 28.9 36.9 9H25.95V6H42v16.05h-3v-10.9Z"/>%0A</svg>');
+    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48">%0A<path d="M9 42q-1.2 0-2.1-.9Q6 40.2 6 39V9q0-1.2.9-2.1Q7.8 6 9 6h13.95v3H9v30h30V25.05h3V39q0 1.2-.9 2.1-.9.9-2.1.9Zm10.1-10.95L17 28.9 36.9 9H25.95V6H42v16.05h-3v-10.9Z"/>%0A</svg>');
   }
 }
 .pageview {
   &.bg-icon {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">%0D%0A<path d="M11.5 9C10.12 9 9 10.12 9 11.5s1.12 2.5 2.5 2.5 2.5-1.12 2.5-2.5S12.88 9 11.5 9zM20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-3.21 14.21l-2.91-2.91c-.69.44-1.51.7-2.39.7C9.01 16 7 13.99 7 11.5S9.01 7 11.5 7 16 9.01 16 11.5c0 .88-.26 1.69-.7 2.39l2.91 2.9-1.42 1.42z"/></svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">%0A<path d="M11.5 9C10.12 9 9 10.12 9 11.5s1.12 2.5 2.5 2.5 2.5-1.12 2.5-2.5S12.88 9 11.5 9zM20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-3.21 14.21l-2.91-2.91c-.69.44-1.51.7-2.39.7C9.01 16 7 13.99 7 11.5S9.01 7 11.5 7 16 9.01 16 11.5c0 .88-.26 1.69-.7 2.39l2.91 2.9-1.42 1.42z"/></svg>');
   }
   &.mask-icon {
-    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">%0D%0A<path d="M11.5 9C10.12 9 9 10.12 9 11.5s1.12 2.5 2.5 2.5 2.5-1.12 2.5-2.5S12.88 9 11.5 9zM20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-3.21 14.21l-2.91-2.91c-.69.44-1.51.7-2.39.7C9.01 16 7 13.99 7 11.5S9.01 7 11.5 7 16 9.01 16 11.5c0 .88-.26 1.69-.7 2.39l2.91 2.9-1.42 1.42z"/></svg>');
-    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">%0D%0A<path d="M11.5 9C10.12 9 9 10.12 9 11.5s1.12 2.5 2.5 2.5 2.5-1.12 2.5-2.5S12.88 9 11.5 9zM20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-3.21 14.21l-2.91-2.91c-.69.44-1.51.7-2.39.7C9.01 16 7 13.99 7 11.5S9.01 7 11.5 7 16 9.01 16 11.5c0 .88-.26 1.69-.7 2.39l2.91 2.9-1.42 1.42z"/></svg>');
+    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">%0A<path d="M11.5 9C10.12 9 9 10.12 9 11.5s1.12 2.5 2.5 2.5 2.5-1.12 2.5-2.5S12.88 9 11.5 9zM20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-3.21 14.21l-2.91-2.91c-.69.44-1.51.7-2.39.7C9.01 16 7 13.99 7 11.5S9.01 7 11.5 7 16 9.01 16 11.5c0 .88-.26 1.69-.7 2.39l2.91 2.9-1.42 1.42z"/></svg>');
+    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">%0A<path d="M11.5 9C10.12 9 9 10.12 9 11.5s1.12 2.5 2.5 2.5 2.5-1.12 2.5-2.5S12.88 9 11.5 9zM20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-3.21 14.21l-2.91-2.91c-.69.44-1.51.7-2.39.7C9.01 16 7 13.99 7 11.5S9.01 7 11.5 7 16 9.01 16 11.5c0 .88-.26 1.69-.7 2.39l2.91 2.9-1.42 1.42z"/></svg>');
   }
 }
 .people {
@@ -684,11 +684,11 @@ h3 {
 }
 .pie-chart {
   &.bg-icon {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M11 2v20c-5.07-.5-9-4.79-9-10s3.93-9.5 9-10zm2.03 0v8.99H22c-.47-4.74-4.24-8.52-8.97-8.99zm0 11.01V22c4.74-.47 8.5-4.25 8.97-8.99h-8.97z"/>%0D%0A</svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M11 2v20c-5.07-.5-9-4.79-9-10s3.93-9.5 9-10zm2.03 0v8.99H22c-.47-4.74-4.24-8.52-8.97-8.99zm0 11.01V22c4.74-.47 8.5-4.25 8.97-8.99h-8.97z"/>%0A</svg>');
   }
   &.mask-icon {
-    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M11 2v20c-5.07-.5-9-4.79-9-10s3.93-9.5 9-10zm2.03 0v8.99H22c-.47-4.74-4.24-8.52-8.97-8.99zm0 11.01V22c4.74-.47 8.5-4.25 8.97-8.99h-8.97z"/>%0D%0A</svg>');
-    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M11 2v20c-5.07-.5-9-4.79-9-10s3.93-9.5 9-10zm2.03 0v8.99H22c-.47-4.74-4.24-8.52-8.97-8.99zm0 11.01V22c4.74-.47 8.5-4.25 8.97-8.99h-8.97z"/>%0D%0A</svg>');
+    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M11 2v20c-5.07-.5-9-4.79-9-10s3.93-9.5 9-10zm2.03 0v8.99H22c-.47-4.74-4.24-8.52-8.97-8.99zm0 11.01V22c4.74-.47 8.5-4.25 8.97-8.99h-8.97z"/>%0A</svg>');
+    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M11 2v20c-5.07-.5-9-4.79-9-10s3.93-9.5 9-10zm2.03 0v8.99H22c-.47-4.74-4.24-8.52-8.97-8.99zm0 11.01V22c4.74-.47 8.5-4.25 8.97-8.99h-8.97z"/>%0A</svg>');
   }
 }
 .radio-button-checked {
@@ -702,20 +702,20 @@ h3 {
 }
 .remove {
   &.bg-icon {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M19 13H5v-2h14v2z"/>%0D%0A</svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M19 13H5v-2h14v2z"/>%0A</svg>');
   }
   &.mask-icon {
-    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M19 13H5v-2h14v2z"/>%0D%0A</svg>');
-    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M19 13H5v-2h14v2z"/>%0D%0A</svg>');
+    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M19 13H5v-2h14v2z"/>%0A</svg>');
+    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M19 13H5v-2h14v2z"/>%0A</svg>');
   }
 }
 .reply {
   &.bg-icon {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">%0D%0A<path d="M10 9V5l-7 7 7 7v-4.1c5 0 8.5 1.6 11 5.1-1-5-4-10-11-11z"/></svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">%0A<path d="M10 9V5l-7 7 7 7v-4.1c5 0 8.5 1.6 11 5.1-1-5-4-10-11-11z"/></svg>');
   }
   &.mask-icon {
-    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">%0D%0A<path d="M10 9V5l-7 7 7 7v-4.1c5 0 8.5 1.6 11 5.1-1-5-4-10-11-11z"/></svg>');
-    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">%0D%0A<path d="M10 9V5l-7 7 7 7v-4.1c5 0 8.5 1.6 11 5.1-1-5-4-10-11-11z"/></svg>');
+    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">%0A<path d="M10 9V5l-7 7 7 7v-4.1c5 0 8.5 1.6 11 5.1-1-5-4-10-11-11z"/></svg>');
+    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">%0A<path d="M10 9V5l-7 7 7 7v-4.1c5 0 8.5 1.6 11 5.1-1-5-4-10-11-11z"/></svg>');
   }
 }
 .restore {
@@ -729,11 +729,11 @@ h3 {
 }
 .room {
   &.bg-icon {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>%0D%0A</svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>%0A</svg>');
   }
   &.mask-icon {
-    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>%0D%0A</svg>');
-    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>%0D%0A</svg>');
+    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>%0A</svg>');
+    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>%0A</svg>');
   }
 }
 .save {
@@ -747,98 +747,98 @@ h3 {
 }
 .scatter-plot {
   &.bg-icon {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<g fill="%23010101">%0D%0A<circle cx="7" cy="14" r="3"/>%0D%0A<circle cx="11" cy="6" r="3"/>%0D%0A<circle cx="16.6" cy="17.6" r="3"/>%0D%0A</g>%0D%0A</svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<g fill="%23010101">%0A<circle cx="7" cy="14" r="3"/>%0A<circle cx="11" cy="6" r="3"/>%0A<circle cx="16.6" cy="17.6" r="3"/>%0A</g>%0A</svg>');
   }
   &.mask-icon {
-    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<g fill="%23010101">%0D%0A<circle cx="7" cy="14" r="3"/>%0D%0A<circle cx="11" cy="6" r="3"/>%0D%0A<circle cx="16.6" cy="17.6" r="3"/>%0D%0A</g>%0D%0A</svg>');
-    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<g fill="%23010101">%0D%0A<circle cx="7" cy="14" r="3"/>%0D%0A<circle cx="11" cy="6" r="3"/>%0D%0A<circle cx="16.6" cy="17.6" r="3"/>%0D%0A</g>%0D%0A</svg>');
+    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<g fill="%23010101">%0A<circle cx="7" cy="14" r="3"/>%0A<circle cx="11" cy="6" r="3"/>%0A<circle cx="16.6" cy="17.6" r="3"/>%0A</g>%0A</svg>');
+    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<g fill="%23010101">%0A<circle cx="7" cy="14" r="3"/>%0A<circle cx="11" cy="6" r="3"/>%0A<circle cx="16.6" cy="17.6" r="3"/>%0A</g>%0A</svg>');
   }
 }
 .school {
   &.bg-icon {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3L1 9l11 6 9-4.91V17h2V9L12 3z"/>%0D%0A</svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3L1 9l11 6 9-4.91V17h2V9L12 3z"/>%0A</svg>');
   }
   &.mask-icon {
-    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3L1 9l11 6 9-4.91V17h2V9L12 3z"/>%0D%0A</svg>');
-    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3L1 9l11 6 9-4.91V17h2V9L12 3z"/>%0D%0A</svg>');
+    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3L1 9l11 6 9-4.91V17h2V9L12 3z"/>%0A</svg>');
+    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3L1 9l11 6 9-4.91V17h2V9L12 3z"/>%0A</svg>');
   }
 }
 .search {
   &.bg-icon {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>%0D%0A</svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>%0A</svg>');
   }
   &.mask-icon {
-    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>%0D%0A</svg>');
-    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>%0D%0A</svg>');
+    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>%0A</svg>');
+    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>%0A</svg>');
   }
 }
 .settings {
   &.bg-icon {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M12 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm7-7H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-1.75 9c0 .23-.02.46-.05.68l1.48 1.16c.13.11.17.3.08.45l-1.4 2.42c-.09.15-.27.21-.43.15l-1.74-.7c-.36.28-.76.51-1.18.69l-.26 1.85c-.03.17-.18.3-.35.3h-2.8c-.17 0-.32-.13-.35-.29l-.26-1.85c-.43-.18-.82-.41-1.18-.69l-1.74.7c-.16.06-.34 0-.43-.15l-1.4-2.42c-.09-.15-.05-.34.08-.45l1.48-1.16c-.03-.23-.05-.46-.05-.69 0-.23.02-.46.05-.68l-1.48-1.16c-.13-.11-.17-.3-.08-.45l1.4-2.42c.09-.15.27-.21.43-.15l1.74.7c.36-.28.76-.51 1.18-.69l.26-1.85c.03-.17.18-.3.35-.3h2.8c.17 0 .32.13.35.29l.26 1.85c.43.18.82.41 1.18.69l1.74-.7c.16-.06.34 0 .43.15l1.4 2.42c.09.15.05.34-.08.45l-1.48 1.16c.03.23.05.46.05.69z"/>%0D%0A</svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M12 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm7-7H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-1.75 9c0 .23-.02.46-.05.68l1.48 1.16c.13.11.17.3.08.45l-1.4 2.42c-.09.15-.27.21-.43.15l-1.74-.7c-.36.28-.76.51-1.18.69l-.26 1.85c-.03.17-.18.3-.35.3h-2.8c-.17 0-.32-.13-.35-.29l-.26-1.85c-.43-.18-.82-.41-1.18-.69l-1.74.7c-.16.06-.34 0-.43-.15l-1.4-2.42c-.09-.15-.05-.34.08-.45l1.48-1.16c-.03-.23-.05-.46-.05-.69 0-.23.02-.46.05-.68l-1.48-1.16c-.13-.11-.17-.3-.08-.45l1.4-2.42c.09-.15.27-.21.43-.15l1.74.7c.36-.28.76-.51 1.18-.69l.26-1.85c.03-.17.18-.3.35-.3h2.8c.17 0 .32.13.35.29l.26 1.85c.43.18.82.41 1.18.69l1.74-.7c.16-.06.34 0 .43.15l1.4 2.42c.09.15.05.34-.08.45l-1.48 1.16c.03.23.05.46.05.69z"/>%0A</svg>');
   }
   &.mask-icon {
-    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M12 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm7-7H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-1.75 9c0 .23-.02.46-.05.68l1.48 1.16c.13.11.17.3.08.45l-1.4 2.42c-.09.15-.27.21-.43.15l-1.74-.7c-.36.28-.76.51-1.18.69l-.26 1.85c-.03.17-.18.3-.35.3h-2.8c-.17 0-.32-.13-.35-.29l-.26-1.85c-.43-.18-.82-.41-1.18-.69l-1.74.7c-.16.06-.34 0-.43-.15l-1.4-2.42c-.09-.15-.05-.34.08-.45l1.48-1.16c-.03-.23-.05-.46-.05-.69 0-.23.02-.46.05-.68l-1.48-1.16c-.13-.11-.17-.3-.08-.45l1.4-2.42c.09-.15.27-.21.43-.15l1.74.7c.36-.28.76-.51 1.18-.69l.26-1.85c.03-.17.18-.3.35-.3h2.8c.17 0 .32.13.35.29l.26 1.85c.43.18.82.41 1.18.69l1.74-.7c.16-.06.34 0 .43.15l1.4 2.42c.09.15.05.34-.08.45l-1.48 1.16c.03.23.05.46.05.69z"/>%0D%0A</svg>');
-    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M12 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm7-7H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-1.75 9c0 .23-.02.46-.05.68l1.48 1.16c.13.11.17.3.08.45l-1.4 2.42c-.09.15-.27.21-.43.15l-1.74-.7c-.36.28-.76.51-1.18.69l-.26 1.85c-.03.17-.18.3-.35.3h-2.8c-.17 0-.32-.13-.35-.29l-.26-1.85c-.43-.18-.82-.41-1.18-.69l-1.74.7c-.16.06-.34 0-.43-.15l-1.4-2.42c-.09-.15-.05-.34.08-.45l1.48-1.16c-.03-.23-.05-.46-.05-.69 0-.23.02-.46.05-.68l-1.48-1.16c-.13-.11-.17-.3-.08-.45l1.4-2.42c.09-.15.27-.21.43-.15l1.74.7c.36-.28.76-.51 1.18-.69l.26-1.85c.03-.17.18-.3.35-.3h2.8c.17 0 .32.13.35.29l.26 1.85c.43.18.82.41 1.18.69l1.74-.7c.16-.06.34 0 .43.15l1.4 2.42c.09.15.05.34-.08.45l-1.48 1.16c.03.23.05.46.05.69z"/>%0D%0A</svg>');
+    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M12 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm7-7H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-1.75 9c0 .23-.02.46-.05.68l1.48 1.16c.13.11.17.3.08.45l-1.4 2.42c-.09.15-.27.21-.43.15l-1.74-.7c-.36.28-.76.51-1.18.69l-.26 1.85c-.03.17-.18.3-.35.3h-2.8c-.17 0-.32-.13-.35-.29l-.26-1.85c-.43-.18-.82-.41-1.18-.69l-1.74.7c-.16.06-.34 0-.43-.15l-1.4-2.42c-.09-.15-.05-.34.08-.45l1.48-1.16c-.03-.23-.05-.46-.05-.69 0-.23.02-.46.05-.68l-1.48-1.16c-.13-.11-.17-.3-.08-.45l1.4-2.42c.09-.15.27-.21.43-.15l1.74.7c.36-.28.76-.51 1.18-.69l.26-1.85c.03-.17.18-.3.35-.3h2.8c.17 0 .32.13.35.29l.26 1.85c.43.18.82.41 1.18.69l1.74-.7c.16-.06.34 0 .43.15l1.4 2.42c.09.15.05.34-.08.45l-1.48 1.16c.03.23.05.46.05.69z"/>%0A</svg>');
+    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M12 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm7-7H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-1.75 9c0 .23-.02.46-.05.68l1.48 1.16c.13.11.17.3.08.45l-1.4 2.42c-.09.15-.27.21-.43.15l-1.74-.7c-.36.28-.76.51-1.18.69l-.26 1.85c-.03.17-.18.3-.35.3h-2.8c-.17 0-.32-.13-.35-.29l-.26-1.85c-.43-.18-.82-.41-1.18-.69l-1.74.7c-.16.06-.34 0-.43-.15l-1.4-2.42c-.09-.15-.05-.34.08-.45l1.48-1.16c-.03-.23-.05-.46-.05-.69 0-.23.02-.46.05-.68l-1.48-1.16c-.13-.11-.17-.3-.08-.45l1.4-2.42c.09-.15.27-.21.43-.15l1.74.7c.36-.28.76-.51 1.18-.69l.26-1.85c.03-.17.18-.3.35-.3h2.8c.17 0 .32.13.35.29l.26 1.85c.43.18.82.41 1.18.69l1.74-.7c.16-.06.34 0 .43.15l1.4 2.42c.09.15.05.34-.08.45l-1.48 1.16c.03.23.05.46.05.69z"/>%0A</svg>');
   }
 }
 .show-chart {
   &.bg-icon {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M3.5 18.49l6-6.01 4 4L22 6.92l-1.41-1.41-7.09 7.97-4-4L2 16.99z"/>%0D%0A</svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M3.5 18.49l6-6.01 4 4L22 6.92l-1.41-1.41-7.09 7.97-4-4L2 16.99z"/>%0A</svg>');
   }
   &.mask-icon {
-    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M3.5 18.49l6-6.01 4 4L22 6.92l-1.41-1.41-7.09 7.97-4-4L2 16.99z"/>%0D%0A</svg>');
-    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M3.5 18.49l6-6.01 4 4L22 6.92l-1.41-1.41-7.09 7.97-4-4L2 16.99z"/>%0D%0A</svg>');
+    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M3.5 18.49l6-6.01 4 4L22 6.92l-1.41-1.41-7.09 7.97-4-4L2 16.99z"/>%0A</svg>');
+    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M3.5 18.49l6-6.01 4 4L22 6.92l-1.41-1.41-7.09 7.97-4-4L2 16.99z"/>%0A</svg>');
   }
 }
 .straighten {
   &.bg-icon {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">%0D%0A<path d="M21 6H3c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 10H3V8h2v4h2V8h2v4h2V8h2v4h2V8h2v4h2V8h2v8z"/></svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">%0A<path d="M21 6H3c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 10H3V8h2v4h2V8h2v4h2V8h2v4h2V8h2v4h2V8h2v8z"/></svg>');
   }
   &.mask-icon {
-    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">%0D%0A<path d="M21 6H3c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 10H3V8h2v4h2V8h2v4h2V8h2v4h2V8h2v4h2V8h2v8z"/></svg>');
-    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">%0D%0A<path d="M21 6H3c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 10H3V8h2v4h2V8h2v4h2V8h2v4h2V8h2v4h2V8h2v8z"/></svg>');
+    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">%0A<path d="M21 6H3c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 10H3V8h2v4h2V8h2v4h2V8h2v4h2V8h2v4h2V8h2v8z"/></svg>');
+    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">%0A<path d="M21 6H3c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 10H3V8h2v4h2V8h2v4h2V8h2v4h2V8h2v4h2V8h2v8z"/></svg>');
   }
 }
 .supervisor-account {
   &.bg-icon {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M16.5 12c1.38 0 2.49-1.12 2.49-2.5S17.88 7 16.5 7C15.12 7 14 8.12 14 9.5s1.12 2.5 2.5 2.5zM9 11c1.66 0 2.99-1.34 2.99-3S10.66 5 9 5C7.34 5 6 6.34 6 8s1.34 3 3 3zm7.5 3c-1.83 0-5.5.92-5.5 2.75V19h11v-2.25c0-1.83-3.67-2.75-5.5-2.75zM9 13c-2.33 0-7 1.17-7 3.5V19h7v-2.25c0-.85.33-2.34 2.37-3.47C10.5 13.1 9.66 13 9 13z"/>%0D%0A</svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M16.5 12c1.38 0 2.49-1.12 2.49-2.5S17.88 7 16.5 7C15.12 7 14 8.12 14 9.5s1.12 2.5 2.5 2.5zM9 11c1.66 0 2.99-1.34 2.99-3S10.66 5 9 5C7.34 5 6 6.34 6 8s1.34 3 3 3zm7.5 3c-1.83 0-5.5.92-5.5 2.75V19h11v-2.25c0-1.83-3.67-2.75-5.5-2.75zM9 13c-2.33 0-7 1.17-7 3.5V19h7v-2.25c0-.85.33-2.34 2.37-3.47C10.5 13.1 9.66 13 9 13z"/>%0A</svg>');
   }
   &.mask-icon {
-    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M16.5 12c1.38 0 2.49-1.12 2.49-2.5S17.88 7 16.5 7C15.12 7 14 8.12 14 9.5s1.12 2.5 2.5 2.5zM9 11c1.66 0 2.99-1.34 2.99-3S10.66 5 9 5C7.34 5 6 6.34 6 8s1.34 3 3 3zm7.5 3c-1.83 0-5.5.92-5.5 2.75V19h11v-2.25c0-1.83-3.67-2.75-5.5-2.75zM9 13c-2.33 0-7 1.17-7 3.5V19h7v-2.25c0-.85.33-2.34 2.37-3.47C10.5 13.1 9.66 13 9 13z"/>%0D%0A</svg>');
-    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M16.5 12c1.38 0 2.49-1.12 2.49-2.5S17.88 7 16.5 7C15.12 7 14 8.12 14 9.5s1.12 2.5 2.5 2.5zM9 11c1.66 0 2.99-1.34 2.99-3S10.66 5 9 5C7.34 5 6 6.34 6 8s1.34 3 3 3zm7.5 3c-1.83 0-5.5.92-5.5 2.75V19h11v-2.25c0-1.83-3.67-2.75-5.5-2.75zM9 13c-2.33 0-7 1.17-7 3.5V19h7v-2.25c0-.85.33-2.34 2.37-3.47C10.5 13.1 9.66 13 9 13z"/>%0D%0A</svg>');
+    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M16.5 12c1.38 0 2.49-1.12 2.49-2.5S17.88 7 16.5 7C15.12 7 14 8.12 14 9.5s1.12 2.5 2.5 2.5zM9 11c1.66 0 2.99-1.34 2.99-3S10.66 5 9 5C7.34 5 6 6.34 6 8s1.34 3 3 3zm7.5 3c-1.83 0-5.5.92-5.5 2.75V19h11v-2.25c0-1.83-3.67-2.75-5.5-2.75zM9 13c-2.33 0-7 1.17-7 3.5V19h7v-2.25c0-.85.33-2.34 2.37-3.47C10.5 13.1 9.66 13 9 13z"/>%0A</svg>');
+    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M16.5 12c1.38 0 2.49-1.12 2.49-2.5S17.88 7 16.5 7C15.12 7 14 8.12 14 9.5s1.12 2.5 2.5 2.5zM9 11c1.66 0 2.99-1.34 2.99-3S10.66 5 9 5C7.34 5 6 6.34 6 8s1.34 3 3 3zm7.5 3c-1.83 0-5.5.92-5.5 2.75V19h11v-2.25c0-1.83-3.67-2.75-5.5-2.75zM9 13c-2.33 0-7 1.17-7 3.5V19h7v-2.25c0-.85.33-2.34 2.37-3.47C10.5 13.1 9.66 13 9 13z"/>%0A</svg>');
   }
 }
 .tick-done {
   &.bg-icon {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>%0D%0A</svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>%0A</svg>');
   }
   &.mask-icon {
-    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>%0D%0A</svg>');
-    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>%0D%0A</svg>');
+    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>%0A</svg>');
+    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>%0A</svg>');
   }
 }
 .tick-done-all {
   &.bg-icon {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M18 7l-1.41-1.41-6.34 6.34 1.41 1.41L18 7zm4.24-1.41L11.66 16.17 7.48 12l-1.41 1.41L11.66 19l12-12-1.42-1.41zM.41 13.41L6 19l1.41-1.41L1.83 12 .41 13.41z"/>%0D%0A</svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M18 7l-1.41-1.41-6.34 6.34 1.41 1.41L18 7zm4.24-1.41L11.66 16.17 7.48 12l-1.41 1.41L11.66 19l12-12-1.42-1.41zM.41 13.41L6 19l1.41-1.41L1.83 12 .41 13.41z"/>%0A</svg>');
   }
   &.mask-icon {
-    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M18 7l-1.41-1.41-6.34 6.34 1.41 1.41L18 7zm4.24-1.41L11.66 16.17 7.48 12l-1.41 1.41L11.66 19l12-12-1.42-1.41zM.41 13.41L6 19l1.41-1.41L1.83 12 .41 13.41z"/>%0D%0A</svg>');
-    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M18 7l-1.41-1.41-6.34 6.34 1.41 1.41L18 7zm4.24-1.41L11.66 16.17 7.48 12l-1.41 1.41L11.66 19l12-12-1.42-1.41zM.41 13.41L6 19l1.41-1.41L1.83 12 .41 13.41z"/>%0D%0A</svg>');
+    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M18 7l-1.41-1.41-6.34 6.34 1.41 1.41L18 7zm4.24-1.41L11.66 16.17 7.48 12l-1.41 1.41L11.66 19l12-12-1.42-1.41zM.41 13.41L6 19l1.41-1.41L1.83 12 .41 13.41z"/>%0A</svg>');
+    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M18 7l-1.41-1.41-6.34 6.34 1.41 1.41L18 7zm4.24-1.41L11.66 16.17 7.48 12l-1.41 1.41L11.66 19l12-12-1.42-1.41zM.41 13.41L6 19l1.41-1.41L1.83 12 .41 13.41z"/>%0A</svg>');
   }
 }
 .toggle {
   &.bg-icon {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M17 7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h10c2.76 0 5-2.24 5-5s-2.24-5-5-5zM7 15c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"/>%0D%0A</svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M17 7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h10c2.76 0 5-2.24 5-5s-2.24-5-5-5zM7 15c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"/>%0A</svg>');
     &.on {
-      background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M17 7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h10c2.76 0 5-2.24 5-5s-2.24-5-5-5zm0 8c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"/>%0D%0A</svg>');
+      background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M17 7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h10c2.76 0 5-2.24 5-5s-2.24-5-5-5zm0 8c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"/>%0A</svg>');
     }
   }
   &.mask-icon {
-    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M17 7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h10c2.76 0 5-2.24 5-5s-2.24-5-5-5zM7 15c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"/>%0D%0A</svg>');
-    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M17 7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h10c2.76 0 5-2.24 5-5s-2.24-5-5-5zM7 15c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"/>%0D%0A</svg>');
+    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M17 7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h10c2.76 0 5-2.24 5-5s-2.24-5-5-5zM7 15c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"/>%0A</svg>');
+    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M17 7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h10c2.76 0 5-2.24 5-5s-2.24-5-5-5zM7 15c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"/>%0A</svg>');
     &.on {
-      -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M17 7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h10c2.76 0 5-2.24 5-5s-2.24-5-5-5zm0 8c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"/>%0D%0A</svg>');
-      mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M17 7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h10c2.76 0 5-2.24 5-5s-2.24-5-5-5zm0 8c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"/>%0D%0A</svg>');
+      -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M17 7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h10c2.76 0 5-2.24 5-5s-2.24-5-5-5zm0 8c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"/>%0A</svg>');
+      mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M17 7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h10c2.76 0 5-2.24 5-5s-2.24-5-5-5zm0 8c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"/>%0A</svg>');
     }
   }
   &.disabled {
@@ -848,83 +848,83 @@ h3 {
 }
 .touch-app {
   &.bg-icon {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M9 11.24V7.5C9 6.12 10.12 5 11.5 5S14 6.12 14 7.5v3.74c1.21-.81 2-2.18 2-3.74C16 5.01 13.99 3 11.5 3S7 5.01 7 7.5c0 1.56.79 2.93 2 3.74zm9.84 4.63l-4.54-2.26c-.17-.07-.35-.11-.54-.11H13v-6c0-.83-.67-1.5-1.5-1.5S10 6.67 10 7.5v10.74l-3.43-.72c-.08-.01-.15-.03-.24-.03-.31 0-.59.13-.79.33l-.79.8 4.94 4.94c.27.27.65.44 1.06.44h6.79c.75 0 1.33-.55 1.44-1.28l.75-5.27c.01-.07.02-.14.02-.2 0-.62-.38-1.16-.91-1.38z"/>%0D%0A</svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M9 11.24V7.5C9 6.12 10.12 5 11.5 5S14 6.12 14 7.5v3.74c1.21-.81 2-2.18 2-3.74C16 5.01 13.99 3 11.5 3S7 5.01 7 7.5c0 1.56.79 2.93 2 3.74zm9.84 4.63l-4.54-2.26c-.17-.07-.35-.11-.54-.11H13v-6c0-.83-.67-1.5-1.5-1.5S10 6.67 10 7.5v10.74l-3.43-.72c-.08-.01-.15-.03-.24-.03-.31 0-.59.13-.79.33l-.79.8 4.94 4.94c.27.27.65.44 1.06.44h6.79c.75 0 1.33-.55 1.44-1.28l.75-5.27c.01-.07.02-.14.02-.2 0-.62-.38-1.16-.91-1.38z"/>%0A</svg>');
   }
   &.mask-icon {
-    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M9 11.24V7.5C9 6.12 10.12 5 11.5 5S14 6.12 14 7.5v3.74c1.21-.81 2-2.18 2-3.74C16 5.01 13.99 3 11.5 3S7 5.01 7 7.5c0 1.56.79 2.93 2 3.74zm9.84 4.63l-4.54-2.26c-.17-.07-.35-.11-.54-.11H13v-6c0-.83-.67-1.5-1.5-1.5S10 6.67 10 7.5v10.74l-3.43-.72c-.08-.01-.15-.03-.24-.03-.31 0-.59.13-.79.33l-.79.8 4.94 4.94c.27.27.65.44 1.06.44h6.79c.75 0 1.33-.55 1.44-1.28l.75-5.27c.01-.07.02-.14.02-.2 0-.62-.38-1.16-.91-1.38z"/>%0D%0A</svg>');
-    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M9 11.24V7.5C9 6.12 10.12 5 11.5 5S14 6.12 14 7.5v3.74c1.21-.81 2-2.18 2-3.74C16 5.01 13.99 3 11.5 3S7 5.01 7 7.5c0 1.56.79 2.93 2 3.74zm9.84 4.63l-4.54-2.26c-.17-.07-.35-.11-.54-.11H13v-6c0-.83-.67-1.5-1.5-1.5S10 6.67 10 7.5v10.74l-3.43-.72c-.08-.01-.15-.03-.24-.03-.31 0-.59.13-.79.33l-.79.8 4.94 4.94c.27.27.65.44 1.06.44h6.79c.75 0 1.33-.55 1.44-1.28l.75-5.27c.01-.07.02-.14.02-.2 0-.62-.38-1.16-.91-1.38z"/>%0D%0A</svg>');
+    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M9 11.24V7.5C9 6.12 10.12 5 11.5 5S14 6.12 14 7.5v3.74c1.21-.81 2-2.18 2-3.74C16 5.01 13.99 3 11.5 3S7 5.01 7 7.5c0 1.56.79 2.93 2 3.74zm9.84 4.63l-4.54-2.26c-.17-.07-.35-.11-.54-.11H13v-6c0-.83-.67-1.5-1.5-1.5S10 6.67 10 7.5v10.74l-3.43-.72c-.08-.01-.15-.03-.24-.03-.31 0-.59.13-.79.33l-.79.8 4.94 4.94c.27.27.65.44 1.06.44h6.79c.75 0 1.33-.55 1.44-1.28l.75-5.27c.01-.07.02-.14.02-.2 0-.62-.38-1.16-.91-1.38z"/>%0A</svg>');
+    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M9 11.24V7.5C9 6.12 10.12 5 11.5 5S14 6.12 14 7.5v3.74c1.21-.81 2-2.18 2-3.74C16 5.01 13.99 3 11.5 3S7 5.01 7 7.5c0 1.56.79 2.93 2 3.74zm9.84 4.63l-4.54-2.26c-.17-.07-.35-.11-.54-.11H13v-6c0-.83-.67-1.5-1.5-1.5S10 6.67 10 7.5v10.74l-3.43-.72c-.08-.01-.15-.03-.24-.03-.31 0-.59.13-.79.33l-.79.8 4.94 4.94c.27.27.65.44 1.06.44h6.79c.75 0 1.33-.55 1.44-1.28l.75-5.27c.01-.07.02-.14.02-.2 0-.62-.38-1.16-.91-1.38z"/>%0A</svg>');
   }
 }
 .translate {
   &.bg-icon {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">%0D%0A<path d="M21 4H11l-1-3H3c-1.1 0-2 .9-2 2v15c0 1.1.9 2 2 2h8l1 3h9c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zM7 16c-2.76 0-5-2.24-5-5s2.24-5 5-5c1.35 0 2.48.5 3.35 1.3L9.03 8.57c-.38-.36-1.04-.78-2.03-.78-1.74 0-3.15 1.44-3.15 3.21S5.26 14.21 7 14.21c2.01 0 2.84-1.44 2.92-2.41H7v-1.71h4.68c.07.31.12.61.12 1.02C11.8 13.97 9.89 16 7 16zm6.17-5.42h3.7c-.43 1.25-1.11 2.43-2.05 3.47-.31-.35-.6-.72-.86-1.1l-.79-2.37zm8.33 9.92c0 .55-.45 1-1 1H14l2-2.5-1.04-3.1 3.1 3.1.92-.92-3.3-3.25.02-.02c1.13-1.25 1.93-2.69 2.4-4.22H20v-1.3h-4.53V8h-1.29v1.29h-1.44L11.46 5.5h9.04c.55 0 1 .45 1 1v14z"/>%0D%0A</svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">%0A<path d="M21 4H11l-1-3H3c-1.1 0-2 .9-2 2v15c0 1.1.9 2 2 2h8l1 3h9c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zM7 16c-2.76 0-5-2.24-5-5s2.24-5 5-5c1.35 0 2.48.5 3.35 1.3L9.03 8.57c-.38-.36-1.04-.78-2.03-.78-1.74 0-3.15 1.44-3.15 3.21S5.26 14.21 7 14.21c2.01 0 2.84-1.44 2.92-2.41H7v-1.71h4.68c.07.31.12.61.12 1.02C11.8 13.97 9.89 16 7 16zm6.17-5.42h3.7c-.43 1.25-1.11 2.43-2.05 3.47-.31-.35-.6-.72-.86-1.1l-.79-2.37zm8.33 9.92c0 .55-.45 1-1 1H14l2-2.5-1.04-3.1 3.1 3.1.92-.92-3.3-3.25.02-.02c1.13-1.25 1.93-2.69 2.4-4.22H20v-1.3h-4.53V8h-1.29v1.29h-1.44L11.46 5.5h9.04c.55 0 1 .45 1 1v14z"/>%0A</svg>');
   }
   &.mask-icon {
-    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">%0D%0A<path d="M21 4H11l-1-3H3c-1.1 0-2 .9-2 2v15c0 1.1.9 2 2 2h8l1 3h9c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zM7 16c-2.76 0-5-2.24-5-5s2.24-5 5-5c1.35 0 2.48.5 3.35 1.3L9.03 8.57c-.38-.36-1.04-.78-2.03-.78-1.74 0-3.15 1.44-3.15 3.21S5.26 14.21 7 14.21c2.01 0 2.84-1.44 2.92-2.41H7v-1.71h4.68c.07.31.12.61.12 1.02C11.8 13.97 9.89 16 7 16zm6.17-5.42h3.7c-.43 1.25-1.11 2.43-2.05 3.47-.31-.35-.6-.72-.86-1.1l-.79-2.37zm8.33 9.92c0 .55-.45 1-1 1H14l2-2.5-1.04-3.1 3.1 3.1.92-.92-3.3-3.25.02-.02c1.13-1.25 1.93-2.69 2.4-4.22H20v-1.3h-4.53V8h-1.29v1.29h-1.44L11.46 5.5h9.04c.55 0 1 .45 1 1v14z"/>%0D%0A</svg>');
-    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">%0D%0A<path d="M21 4H11l-1-3H3c-1.1 0-2 .9-2 2v15c0 1.1.9 2 2 2h8l1 3h9c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zM7 16c-2.76 0-5-2.24-5-5s2.24-5 5-5c1.35 0 2.48.5 3.35 1.3L9.03 8.57c-.38-.36-1.04-.78-2.03-.78-1.74 0-3.15 1.44-3.15 3.21S5.26 14.21 7 14.21c2.01 0 2.84-1.44 2.92-2.41H7v-1.71h4.68c.07.31.12.61.12 1.02C11.8 13.97 9.89 16 7 16zm6.17-5.42h3.7c-.43 1.25-1.11 2.43-2.05 3.47-.31-.35-.6-.72-.86-1.1l-.79-2.37zm8.33 9.92c0 .55-.45 1-1 1H14l2-2.5-1.04-3.1 3.1 3.1.92-.92-3.3-3.25.02-.02c1.13-1.25 1.93-2.69 2.4-4.22H20v-1.3h-4.53V8h-1.29v1.29h-1.44L11.46 5.5h9.04c.55 0 1 .45 1 1v14z"/>%0D%0A</svg>');
+    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">%0A<path d="M21 4H11l-1-3H3c-1.1 0-2 .9-2 2v15c0 1.1.9 2 2 2h8l1 3h9c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zM7 16c-2.76 0-5-2.24-5-5s2.24-5 5-5c1.35 0 2.48.5 3.35 1.3L9.03 8.57c-.38-.36-1.04-.78-2.03-.78-1.74 0-3.15 1.44-3.15 3.21S5.26 14.21 7 14.21c2.01 0 2.84-1.44 2.92-2.41H7v-1.71h4.68c.07.31.12.61.12 1.02C11.8 13.97 9.89 16 7 16zm6.17-5.42h3.7c-.43 1.25-1.11 2.43-2.05 3.47-.31-.35-.6-.72-.86-1.1l-.79-2.37zm8.33 9.92c0 .55-.45 1-1 1H14l2-2.5-1.04-3.1 3.1 3.1.92-.92-3.3-3.25.02-.02c1.13-1.25 1.93-2.69 2.4-4.22H20v-1.3h-4.53V8h-1.29v1.29h-1.44L11.46 5.5h9.04c.55 0 1 .45 1 1v14z"/>%0A</svg>');
+    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">%0A<path d="M21 4H11l-1-3H3c-1.1 0-2 .9-2 2v15c0 1.1.9 2 2 2h8l1 3h9c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zM7 16c-2.76 0-5-2.24-5-5s2.24-5 5-5c1.35 0 2.48.5 3.35 1.3L9.03 8.57c-.38-.36-1.04-.78-2.03-.78-1.74 0-3.15 1.44-3.15 3.21S5.26 14.21 7 14.21c2.01 0 2.84-1.44 2.92-2.41H7v-1.71h4.68c.07.31.12.61.12 1.02C11.8 13.97 9.89 16 7 16zm6.17-5.42h3.7c-.43 1.25-1.11 2.43-2.05 3.47-.31-.35-.6-.72-.86-1.1l-.79-2.37zm8.33 9.92c0 .55-.45 1-1 1H14l2-2.5-1.04-3.1 3.1 3.1.92-.92-3.3-3.25.02-.02c1.13-1.25 1.93-2.69 2.4-4.22H20v-1.3h-4.53V8h-1.29v1.29h-1.44L11.46 5.5h9.04c.55 0 1 .45 1 1v14z"/>%0A</svg>');
   }
 }
 .trash {
   &.bg-icon {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>%0D%0A</svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>%0A</svg>');
   }
   &.mask-icon {
-    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>%0D%0A</svg>');
-    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>%0D%0A</svg>');
+    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>%0A</svg>');
+    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>%0A</svg>');
   }
 }
 .vertical-align-bottom {
   &.bg-icon {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M16 13h-3V3h-2v10H8l4 4 4-4zM4 19v2h16v-2H4z"/>%0D%0A</svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M16 13h-3V3h-2v10H8l4 4 4-4zM4 19v2h16v-2H4z"/>%0A</svg>');
   }
   &.mask-icon {
-    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M16 13h-3V3h-2v10H8l4 4 4-4zM4 19v2h16v-2H4z"/>%0D%0A</svg>');
-    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M16 13h-3V3h-2v10H8l4 4 4-4zM4 19v2h16v-2H4z"/>%0D%0A</svg>');
+    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M16 13h-3V3h-2v10H8l4 4 4-4zM4 19v2h16v-2H4z"/>%0A</svg>');
+    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M16 13h-3V3h-2v10H8l4 4 4-4zM4 19v2h16v-2H4z"/>%0A</svg>');
   }
 }
 .vertical-align-top {
   &.bg-icon {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M8 11h3v10h2V11h3l-4-4-4 4zM4 3v2h16V3H4z"/>%0D%0A</svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M8 11h3v10h2V11h3l-4-4-4 4zM4 3v2h16V3H4z"/>%0A</svg>');
   }
   &.mask-icon {
-    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M8 11h3v10h2V11h3l-4-4-4 4zM4 3v2h16V3H4z"/>%0D%0A</svg>');
-    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M8 11h3v10h2V11h3l-4-4-4 4zM4 3v2h16V3H4z"/>%0D%0A</svg>');
+    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M8 11h3v10h2V11h3l-4-4-4 4zM4 3v2h16V3H4z"/>%0A</svg>');
+    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M8 11h3v10h2V11h3l-4-4-4 4zM4 3v2h16V3H4z"/>%0A</svg>');
   }
 }
 .view-list {
   &.bg-icon {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M4 14h4v-4H4v4zm0 5h4v-4H4v4zM4 9h4V5H4v4zm5 5h12v-4H9v4zm0 5h12v-4H9v4zM9 5v4h12V5H9z"/>%0D%0A</svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M4 14h4v-4H4v4zm0 5h4v-4H4v4zM4 9h4V5H4v4zm5 5h12v-4H9v4zm0 5h12v-4H9v4zM9 5v4h12V5H9z"/>%0A</svg>');
   }
   &.mask-icon {
-    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M4 14h4v-4H4v4zm0 5h4v-4H4v4zM4 9h4V5H4v4zm5 5h12v-4H9v4zm0 5h12v-4H9v4zM9 5v4h12V5H9z"/>%0D%0A</svg>');
-    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M4 14h4v-4H4v4zm0 5h4v-4H4v4zM4 9h4V5H4v4zm5 5h12v-4H9v4zm0 5h12v-4H9v4zM9 5v4h12V5H9z"/>%0D%0A</svg>');
+    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M4 14h4v-4H4v4zm0 5h4v-4H4v4zM4 9h4V5H4v4zm5 5h12v-4H9v4zm0 5h12v-4H9v4zM9 5v4h12V5H9z"/>%0A</svg>');
+    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M4 14h4v-4H4v4zm0 5h4v-4H4v4zM4 9h4V5H4v4zm5 5h12v-4H9v4zm0 5h12v-4H9v4zM9 5v4h12V5H9z"/>%0A</svg>');
   }
 }
 .visibility-off {
   &.bg-icon {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px">%0D%0A<path d="M0 0h24v24H0V0zm0 0h24v24H0V0zm0 0h24v24H0V0zm0 0h24v24H0V0z" fill="none"/>%0D%0A<path d="M12 6c3.79 0 7.17 2.13 8.82 5.5-.59 1.22-1.42 2.27-2.41 3.12l1.41 1.41c1.39-1.23 2.49-2.77 3.18-4.53C21.27 7.11 17 4 12 4c-1.27 0-2.49.2-3.64.57l1.65 1.65C10.66 6.09 11.32 6 12 6zm-1.07 1.14L13 9.21c.57.25 1.03.71 1.28 1.28l2.07 2.07c.08-.34.14-.7.14-1.07C16.5 9.01 14.48 7 12 7c-.37 0-.72.05-1.07.14zM2.01 3.87l2.68 2.68C3.06 7.83 1.77 9.53 1 11.5 2.73 15.89 7 19 12 19c1.52 0 2.98-.29 4.32-.82l3.42 3.42 1.41-1.41L3.42 2.45 2.01 3.87zm7.5 7.5l2.61 2.61c-.04.01-.08.02-.12.02-1.38 0-2.5-1.12-2.5-2.5 0-.05.01-.08.01-.13zm-3.4-3.4l1.75 1.75c-.23.55-.36 1.15-.36 1.78 0 2.48 2.02 4.5 4.5 4.5.63 0 1.23-.13 1.77-.36l.98.98c-.88.24-1.8.38-2.75.38-3.79 0-7.17-2.13-8.82-5.5.7-1.43 1.72-2.61 2.93-3.53z"/>%0D%0A</svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px">%0A<path d="M0 0h24v24H0V0zm0 0h24v24H0V0zm0 0h24v24H0V0zm0 0h24v24H0V0z" fill="none"/>%0A<path d="M12 6c3.79 0 7.17 2.13 8.82 5.5-.59 1.22-1.42 2.27-2.41 3.12l1.41 1.41c1.39-1.23 2.49-2.77 3.18-4.53C21.27 7.11 17 4 12 4c-1.27 0-2.49.2-3.64.57l1.65 1.65C10.66 6.09 11.32 6 12 6zm-1.07 1.14L13 9.21c.57.25 1.03.71 1.28 1.28l2.07 2.07c.08-.34.14-.7.14-1.07C16.5 9.01 14.48 7 12 7c-.37 0-.72.05-1.07.14zM2.01 3.87l2.68 2.68C3.06 7.83 1.77 9.53 1 11.5 2.73 15.89 7 19 12 19c1.52 0 2.98-.29 4.32-.82l3.42 3.42 1.41-1.41L3.42 2.45 2.01 3.87zm7.5 7.5l2.61 2.61c-.04.01-.08.02-.12.02-1.38 0-2.5-1.12-2.5-2.5 0-.05.01-.08.01-.13zm-3.4-3.4l1.75 1.75c-.23.55-.36 1.15-.36 1.78 0 2.48 2.02 4.5 4.5 4.5.63 0 1.23-.13 1.77-.36l.98.98c-.88.24-1.8.38-2.75.38-3.79 0-7.17-2.13-8.82-5.5.7-1.43 1.72-2.61 2.93-3.53z"/>%0A</svg>');
   }
   &.mask-icon {
-    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px">%0D%0A<path d="M0 0h24v24H0V0zm0 0h24v24H0V0zm0 0h24v24H0V0zm0 0h24v24H0V0z" fill="none"/>%0D%0A<path d="M12 6c3.79 0 7.17 2.13 8.82 5.5-.59 1.22-1.42 2.27-2.41 3.12l1.41 1.41c1.39-1.23 2.49-2.77 3.18-4.53C21.27 7.11 17 4 12 4c-1.27 0-2.49.2-3.64.57l1.65 1.65C10.66 6.09 11.32 6 12 6zm-1.07 1.14L13 9.21c.57.25 1.03.71 1.28 1.28l2.07 2.07c.08-.34.14-.7.14-1.07C16.5 9.01 14.48 7 12 7c-.37 0-.72.05-1.07.14zM2.01 3.87l2.68 2.68C3.06 7.83 1.77 9.53 1 11.5 2.73 15.89 7 19 12 19c1.52 0 2.98-.29 4.32-.82l3.42 3.42 1.41-1.41L3.42 2.45 2.01 3.87zm7.5 7.5l2.61 2.61c-.04.01-.08.02-.12.02-1.38 0-2.5-1.12-2.5-2.5 0-.05.01-.08.01-.13zm-3.4-3.4l1.75 1.75c-.23.55-.36 1.15-.36 1.78 0 2.48 2.02 4.5 4.5 4.5.63 0 1.23-.13 1.77-.36l.98.98c-.88.24-1.8.38-2.75.38-3.79 0-7.17-2.13-8.82-5.5.7-1.43 1.72-2.61 2.93-3.53z"/>%0D%0A</svg>');
-    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px">%0D%0A<path d="M0 0h24v24H0V0zm0 0h24v24H0V0zm0 0h24v24H0V0zm0 0h24v24H0V0z" fill="none"/>%0D%0A<path d="M12 6c3.79 0 7.17 2.13 8.82 5.5-.59 1.22-1.42 2.27-2.41 3.12l1.41 1.41c1.39-1.23 2.49-2.77 3.18-4.53C21.27 7.11 17 4 12 4c-1.27 0-2.49.2-3.64.57l1.65 1.65C10.66 6.09 11.32 6 12 6zm-1.07 1.14L13 9.21c.57.25 1.03.71 1.28 1.28l2.07 2.07c.08-.34.14-.7.14-1.07C16.5 9.01 14.48 7 12 7c-.37 0-.72.05-1.07.14zM2.01 3.87l2.68 2.68C3.06 7.83 1.77 9.53 1 11.5 2.73 15.89 7 19 12 19c1.52 0 2.98-.29 4.32-.82l3.42 3.42 1.41-1.41L3.42 2.45 2.01 3.87zm7.5 7.5l2.61 2.61c-.04.01-.08.02-.12.02-1.38 0-2.5-1.12-2.5-2.5 0-.05.01-.08.01-.13zm-3.4-3.4l1.75 1.75c-.23.55-.36 1.15-.36 1.78 0 2.48 2.02 4.5 4.5 4.5.63 0 1.23-.13 1.77-.36l.98.98c-.88.24-1.8.38-2.75.38-3.79 0-7.17-2.13-8.82-5.5.7-1.43 1.72-2.61 2.93-3.53z"/>%0D%0A</svg>');
+    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px">%0A<path d="M0 0h24v24H0V0zm0 0h24v24H0V0zm0 0h24v24H0V0zm0 0h24v24H0V0z" fill="none"/>%0A<path d="M12 6c3.79 0 7.17 2.13 8.82 5.5-.59 1.22-1.42 2.27-2.41 3.12l1.41 1.41c1.39-1.23 2.49-2.77 3.18-4.53C21.27 7.11 17 4 12 4c-1.27 0-2.49.2-3.64.57l1.65 1.65C10.66 6.09 11.32 6 12 6zm-1.07 1.14L13 9.21c.57.25 1.03.71 1.28 1.28l2.07 2.07c.08-.34.14-.7.14-1.07C16.5 9.01 14.48 7 12 7c-.37 0-.72.05-1.07.14zM2.01 3.87l2.68 2.68C3.06 7.83 1.77 9.53 1 11.5 2.73 15.89 7 19 12 19c1.52 0 2.98-.29 4.32-.82l3.42 3.42 1.41-1.41L3.42 2.45 2.01 3.87zm7.5 7.5l2.61 2.61c-.04.01-.08.02-.12.02-1.38 0-2.5-1.12-2.5-2.5 0-.05.01-.08.01-.13zm-3.4-3.4l1.75 1.75c-.23.55-.36 1.15-.36 1.78 0 2.48 2.02 4.5 4.5 4.5.63 0 1.23-.13 1.77-.36l.98.98c-.88.24-1.8.38-2.75.38-3.79 0-7.17-2.13-8.82-5.5.7-1.43 1.72-2.61 2.93-3.53z"/>%0A</svg>');
+    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px">%0A<path d="M0 0h24v24H0V0zm0 0h24v24H0V0zm0 0h24v24H0V0zm0 0h24v24H0V0z" fill="none"/>%0A<path d="M12 6c3.79 0 7.17 2.13 8.82 5.5-.59 1.22-1.42 2.27-2.41 3.12l1.41 1.41c1.39-1.23 2.49-2.77 3.18-4.53C21.27 7.11 17 4 12 4c-1.27 0-2.49.2-3.64.57l1.65 1.65C10.66 6.09 11.32 6 12 6zm-1.07 1.14L13 9.21c.57.25 1.03.71 1.28 1.28l2.07 2.07c.08-.34.14-.7.14-1.07C16.5 9.01 14.48 7 12 7c-.37 0-.72.05-1.07.14zM2.01 3.87l2.68 2.68C3.06 7.83 1.77 9.53 1 11.5 2.73 15.89 7 19 12 19c1.52 0 2.98-.29 4.32-.82l3.42 3.42 1.41-1.41L3.42 2.45 2.01 3.87zm7.5 7.5l2.61 2.61c-.04.01-.08.02-.12.02-1.38 0-2.5-1.12-2.5-2.5 0-.05.01-.08.01-.13zm-3.4-3.4l1.75 1.75c-.23.55-.36 1.15-.36 1.78 0 2.48 2.02 4.5 4.5 4.5.63 0 1.23-.13 1.77-.36l.98.98c-.88.24-1.8.38-2.75.38-3.79 0-7.17-2.13-8.82-5.5.7-1.43 1.72-2.61 2.93-3.53z"/>%0A</svg>');
   }
 }
 .warning {
   &.bg-icon {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>%0D%0A</svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>%0A</svg>');
   }
   &.mask-icon {
-    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>%0D%0A</svg>');
-    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>%0D%0A</svg>');
+    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>%0A</svg>');
+    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>%0A</svg>');
   }
 }
 .wysiwyg {
   &.bg-icon {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24">%0D%0A<g>%0D%0A<rect fill="none" height="24" width="24"/>%0D%0A<path d="M19,3H5C3.89,3,3,3.9,3,5v14c0,1.1,0.89,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.11,3,19,3z M19,19H5V7h14V19z M17,12H7v-2 h10V12z M13,16H7v-2h6V16z"/>%0D%0A</g>%0D%0A</svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24">%0A<g>%0A<rect fill="none" height="24" width="24"/>%0A<path d="M19,3H5C3.89,3,3,3.9,3,5v14c0,1.1,0.89,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.11,3,19,3z M19,19H5V7h14V19z M17,12H7v-2 h10V12z M13,16H7v-2h6V16z"/>%0A</g>%0A</svg>');
   }
   &.mask-icon {
-    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24">%0D%0A<g>%0D%0A<rect fill="none" height="24" width="24"/>%0D%0A<path d="M19,3H5C3.89,3,3,3.9,3,5v14c0,1.1,0.89,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.11,3,19,3z M19,19H5V7h14V19z M17,12H7v-2 h10V12z M13,16H7v-2h6V16z"/>%0D%0A</g>%0D%0A</svg>');
-    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24">%0D%0A<g>%0D%0A<rect fill="none" height="24" width="24"/>%0D%0A<path d="M19,3H5C3.89,3,3,3.9,3,5v14c0,1.1,0.89,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.11,3,19,3z M19,19H5V7h14V19z M17,12H7v-2 h10V12z M13,16H7v-2h6V16z"/>%0D%0A</g>%0D%0A</svg>');
+    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24">%0A<g>%0A<rect fill="none" height="24" width="24"/>%0A<path d="M19,3H5C3.89,3,3,3.9,3,5v14c0,1.1,0.89,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.11,3,19,3z M19,19H5V7h14V19z M17,12H7v-2 h10V12z M13,16H7v-2h6V16z"/>%0A</g>%0A</svg>');
+    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24">%0A<g>%0A<rect fill="none" height="24" width="24"/>%0A<path d="M19,3H5C3.89,3,3,3.9,3,5v14c0,1.1,0.89,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.11,3,19,3z M19,19H5V7h14V19z M17,12H7v-2 h10V12z M13,16H7v-2h6V16z"/>%0A</g>%0A</svg>');
   }
 }
 .info {
@@ -1046,13 +1046,13 @@ label.checkbox {
     background-position: center;
     background-size: contain;
     -webkit-background-size: contain;
-    background-image: url('data:image/svg+xml,<svg%0D%0A   width="24"%0D%0A   height="24"%0D%0A   xmlns="http://www.w3.org/2000/svg"%0D%0A   xmlns:svg="http://www.w3.org/2000/svg">%0D%0A  <defs%0D%0A     id="defs8" />%0D%0A%0D%0A  <path%0D%0A     d="M 21.333333,2.6666667 V 21.333333 H 2.6666667 V 2.6666667 H 21.333333 M 21.333333,0 H 2.6666667 C 1.2,0 0,1.2 0,2.6666667 V 21.333333 C 0,22.8 1.2,24 2.6666667,24 H 21.333333 C 22.8,24 24,22.8 24,21.333333 V 2.6666667 C 24,1.2 22.8,0 21.333333,0 Z"%0D%0A     id="path2"%0D%0A     style="stroke-width:1" />%0D%0A</svg>%0D%0A');
+    background-image: url('data:image/svg+xml,<svg%0A   width="24"%0A   height="24"%0A   xmlns="http://www.w3.org/2000/svg"%0A   xmlns:svg="http://www.w3.org/2000/svg">%0A  <defs%0A     id="defs8" />%0A%0A  <path%0A     d="M 21.333333,2.6666667 V 21.333333 H 2.6666667 V 2.6666667 H 21.333333 M 21.333333,0 H 2.6666667 C 1.2,0 0,1.2 0,2.6666667 V 21.333333 C 0,22.8 1.2,24 2.6666667,24 H 21.333333 C 22.8,24 24,22.8 24,21.333333 V 2.6666667 C 24,1.2 22.8,0 21.333333,0 Z"%0A     id="path2"%0A     style="stroke-width:1" />%0A</svg>%0A');
   }
   & > div:hover {
     cursor: pointer;
   }
   & input:checked + div {
-    background-image: url('data:image/svg+xml,<svg%0D%0A   width="24"%0D%0A   height="24"%0D%0A   xmlns="http://www.w3.org/2000/svg"%0D%0A   xmlns:svg="http://www.w3.org/2000/svg">%0D%0A  <path%0D%0A     d="M 21.333333,0 H 2.6666667 C 1.1866667,0 0,1.2 0,2.6666667 V 21.333333 C 0,22.8 1.1866667,24 2.6666667,24 H 21.333333 C 22.813333,24 24,22.8 24,21.333333 V 2.6666667 C 24,1.2 22.813333,0 21.333333,0 Z M 9.3333333,18.666667 2.6666667,12 l 1.88,-1.88 4.7866666,4.773333 10.1199997,-10.1199997 1.88,1.8933334 z"%0D%0A     id="path2"%0D%0A     style="stroke-width:1" />%0D%0A</svg>%0D%0A');
+    background-image: url('data:image/svg+xml,<svg%0A   width="24"%0A   height="24"%0A   xmlns="http://www.w3.org/2000/svg"%0A   xmlns:svg="http://www.w3.org/2000/svg">%0A  <path%0A     d="M 21.333333,0 H 2.6666667 C 1.1866667,0 0,1.2 0,2.6666667 V 21.333333 C 0,22.8 1.1866667,24 2.6666667,24 H 21.333333 C 22.813333,24 24,22.8 24,21.333333 V 2.6666667 C 24,1.2 22.813333,0 21.333333,0 Z M 9.3333333,18.666667 2.6666667,12 l 1.88,-1.88 4.7866666,4.773333 10.1199997,-10.1199997 1.88,1.8933334 z"%0A     id="path2"%0A     style="stroke-width:1" />%0A</svg>%0A');
   }
   & input:disabled ~ * {
     opacity: 0.4;
@@ -1118,7 +1118,7 @@ label.checkbox {
       pointer-events: none;
       margin-left: auto;
       width: 1.5em;
-      content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M7 10l5 5 5-5z"/>%0D%0A</svg>');
+      content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M7 10l5 5 5-5z"/>%0A</svg>');
     }
   }
   & > ul {
@@ -1154,7 +1154,7 @@ label.checkbox {
   &.active > ul {
     display: block;
     & > .head > .icon {
-      content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0D%0A<path d="M7 14l5-5 5 5z"/>%0D%0A</svg>');
+      content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M7 14l5-5 5 5z"/>%0A</svg>');
     }
   }
   &.dropdown-reverse > ul {
@@ -1271,7 +1271,7 @@ label.checkbox {
   border-radius: 0;
   pointer-events: auto;
   cursor: pointer;
-  background: url('data:image/svg+xml,%0D%0A<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">%0D%0A  <circle cx="5" cy="5" r="4" fill="%23E18335"/>%0D%0A</svg>');
+  background: url('data:image/svg+xml,%0A<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">%0A  <circle cx="5" cy="5" r="4" fill="%23E18335"/>%0A</svg>');
   background-repeat: no-repeat;
   background-position: center;
   box-shadow: none;
@@ -1283,7 +1283,7 @@ label.checkbox {
   border-radius: 0;
   pointer-events: auto;
   cursor: pointer;
-  background: url('data:image/svg+xml,%0D%0A<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">%0D%0A  <circle cx="5" cy="5" r="4" fill="%23E18335"/>%0D%0A</svg>');
+  background: url('data:image/svg+xml,%0A<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">%0A  <circle cx="5" cy="5" r="4" fill="%23E18335"/>%0A</svg>');
   background-repeat: no-repeat;
   background-position: center;
   box-shadow: none;
@@ -1597,6 +1597,47 @@ dialog > button.close {
   cursor: grab;
   user-select: none;
 }
+dialog.mapp-says {
+  margin: auto;
+  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
+  border: none !important;
+  border-radius: 2px;
+  min-width: 350px;
+  max-width: 70%;
+  max-height: 70%;
+  z-index: 1001;
+  user-select: none;
+}
+dialog.mapp-says::-webkit-scrollbar {
+  display: none;
+}
+dialog.mapp-says:focus {
+  outline: none;
+}
+dialog.mapp-says h4 {
+  padding: 0.5em 1em;
+  position: sticky;
+  top: 0;
+  left: 0;
+  z-index: 10001;
+  background-color: var(--color-primary);
+  border-bottom: solid 2px var(--color-primary-light);
+  color: var(--color-light);
+}
+dialog.mapp-says div {
+  padding: 1em;
+}
+dialog.mapp-says p {
+  white-space: pre;
+  text-align: center;
+  padding: 1em;
+}
+dialog.mapp-says button {
+  float: right;
+  font-size: 0.9em;
+  color: var(--color-primary);
+  z-index: 1005;
+}
 .modal {
   text-wrap: wrap;
   position: fixed;

From 3e4121d15f142ed82b73e887387a68653f096066 Mon Sep 17 00:00:00 2001
From: Agata Brok <cityremade@users.noreply.github.com>
Date: Thu, 19 Sep 2024 10:19:13 +0200
Subject: [PATCH 05/31] Confirm - css from ui stylesheet;

---
 lib/ui/elements/confirm.mjs | 54 +------------------------------------
 1 file changed, 1 insertion(+), 53 deletions(-)

diff --git a/lib/ui/elements/confirm.mjs b/lib/ui/elements/confirm.mjs
index d136c7956..e0c106929 100644
--- a/lib/ui/elements/confirm.mjs
+++ b/lib/ui/elements/confirm.mjs
@@ -34,64 +34,12 @@ if(confirm) {
 export default function confirm(params) {
 
     params.title ??= 'Confirm';
-
-    const css = `
-    dialog.alert {
-      margin: auto;
-      box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
-      border: none !important;
-      border-radius: 2px;
-      min-width: 350px;
-      max-width: 70%;
-      max-height: 70%;
-      z-index: 1001;
-      user-select: none;
-    }
-
-    dialog.alert::-webkit-scrollbar {
-      display: none;
-    }
-
-    dialog.alert h4 {
-      padding: 0.5em 1em;
-      position: sticky;
-      top: 0;
-      left: 0;
-      z-index: 10001;
-      background-color: var(--color-primary);
-      border-bottom: solid 2px var(--color-primary-light);
-      color: var(--color-light)
-    }
-
-    dialog.alert div {
-      padding: 1em;
-    }
-
-    dialog.alert p {
-      white-space: pre;
-      text-align: center;
-      padding: 1em;
-    }
-
-    dialog.alert button {
-      float: right;
-      font-size: 0.9em;
-      color: var(--color-primary);
-      z-index: 1005;
-    }
-
-    dialog.alert:focus {
-      outline: none;
-    }
-    `;
-
-    document.head.prepend(mapp.utils.html.node`<style>${css}`)
     
     const btn_true = mapp.utils.html.node`<button class="raised primary-colour del bold">${mapp.dictionary.ok}`;
     
     const btn_false = mapp.utils.html.node`<button class="raised primary-colour bold">${mapp.dictionary.cancel}`
     
-    const confirm = mapp.utils.html.node`<dialog class="alert" 
+    const confirm = mapp.utils.html.node`<dialog class="mapp-says" 
     onclose=${() => {
         confirm.remove();
     }}

From b53da60219375f7dd28b675b0cc6877401fb6a1e Mon Sep 17 00:00:00 2001
From: Agata Brok <cityremade@users.noreply.github.com>
Date: Thu, 19 Sep 2024 15:52:06 +0200
Subject: [PATCH 06/31] Alert - media queries added;

---
 public/css/_ui.css | 12 ++++++++++--
 public/css/ui.css  |  9 +++++++--
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/public/css/_ui.css b/public/css/_ui.css
index 8c33ee721..179d30311 100644
--- a/public/css/_ui.css
+++ b/public/css/_ui.css
@@ -113,8 +113,7 @@ dialog.mapp-says {
   box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
   border: none !important;
   border-radius: 2px;
-  min-width: 350px;
-  max-width: 70%;
+  width: 350px;
   max-height: 70%;
   z-index: 1001;
   user-select: none;
@@ -155,6 +154,15 @@ dialog.mapp-says button {
   color: var(--color-primary);
   z-index: 1005;
 }
+
+@media only screen and (max-width: 768px) {
+
+  dialog.mapp-says {
+    min-width: 350px;
+    max-width: 70%;
+  }
+
+}
 /* end system message */
 
 .modal {
diff --git a/public/css/ui.css b/public/css/ui.css
index 43c3d3c98..9d4e44245 100644
--- a/public/css/ui.css
+++ b/public/css/ui.css
@@ -1602,8 +1602,7 @@ dialog.mapp-says {
   box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
   border: none !important;
   border-radius: 2px;
-  min-width: 350px;
-  max-width: 70%;
+  width: 350px;
   max-height: 70%;
   z-index: 1001;
   user-select: none;
@@ -1638,6 +1637,12 @@ dialog.mapp-says button {
   color: var(--color-primary);
   z-index: 1005;
 }
+@media only screen and (max-width: 768px) {
+  dialog.mapp-says {
+    min-width: 350px;
+    max-width: 70%;
+  }
+}
 .modal {
   text-wrap: wrap;
   position: fixed;

From fe7374b05dd3b638b5919e167a6018276bf6a800 Mon Sep 17 00:00:00 2001
From: Agata Brok <cityremade@users.noreply.github.com>
Date: Mon, 23 Sep 2024 14:46:48 +0200
Subject: [PATCH 07/31] Alert changes;

Alert now uses dialog element.
Dialog element now supports 2 new parameters: closeOnClick - to clear the dialog when the element or backdrop are clicked
onClose - optional callback function to run on dialog close event.
---
 lib/ui/elements/alert.mjs  | 37 +++++++++++++++----------------------
 lib/ui/elements/dialog.mjs | 13 ++++++++++++-
 public/css/_ui.css         |  1 -
 public/css/ui.css          |  1 -
 4 files changed, 27 insertions(+), 25 deletions(-)

diff --git a/lib/ui/elements/alert.mjs b/lib/ui/elements/alert.mjs
index 8a81eee92..88c83eabc 100644
--- a/lib/ui/elements/alert.mjs
+++ b/lib/ui/elements/alert.mjs
@@ -19,9 +19,7 @@ mapp.ui.elements.alert({
 })
 ```
 
-@param {Object} alert The alert configuration object.
-@property {string} [alert.css_style] The CSS styles to apply to the dialog dialog.
-@property {string} [alert.data_id='alert'] The data-id attribute value for the dialog.
+@param {Object} alert The alert configuration object. Created with mapp.ui.elements.dialog.
 @property {string} [alert.title] Text to display in the alert header. Defaults to 'Information'.
 @property {string} [alert.text] Text to display in the alert content. 
 @returns {HTMLElement} alert The alert element.
@@ -31,26 +29,21 @@ export default function alert(params) {
 
     params.title ??= 'Information';
 
-    const alert = mapp.utils.html.node`<dialog class="mapp-says"
-    onclose=${() => {
-        alert.remove();
-    }}
-    onclick=${e => {
-      e.stopPropagation();
-      alert.close();
-    }}>
-      <h4>${params.title}</h4>
-      <p>${params.text}</p>
+    const alert = mapp.ui.elements.dialog({
+      class: 'mapp-says',
+      closeOnClick: true,
+      onClose: e => {
+        document.querySelector('dialog.mapp-says').remove();
+      },
+      header: mapp.utils.html.node`<h4>${params.title}`,
+      content: mapp.utils.html.node`<p>${params.text}</p>
       <div style="display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 0.2em">
       <button 
-        class="raised primary-colour del bold"
-        style="grid-column: 2"
-        onclick=${e => {
-          e.stopPropagation();
-          alert.close();
-        }}>${mapp.dictionary.ok}`
+      class="raised primary-colour bold" style="grid-column: 2"
+      onclick=${e => {
+        e.stopPropagation();
+        document.querySelector('dialog.mapp-says').close();
+      }}>${mapp.dictionary.ok}`
 
-  document.body.append(alert);
-
-  alert.showModal();
+    })
 }
\ No newline at end of file
diff --git a/lib/ui/elements/dialog.mjs b/lib/ui/elements/dialog.mjs
index f85e31fad..7b4c87a2b 100644
--- a/lib/ui/elements/dialog.mjs
+++ b/lib/ui/elements/dialog.mjs
@@ -31,6 +31,8 @@ const dialog = mapp.ui.elements.dialog({
 @property {string} [dialog.content] The HTML content for the dialog body.
 @property {boolean} [dialog.modal] A flag to determine if its a Modal or Dialog.
 @property {Function} [dialog.close] A function to be called when the dialog is closed. Boolean to indicate whether there should be a close method.
+@property {boolean} [dialog.closeOnClick] Optional parameter to close the dialog when backdrop or the dialog itself is clicked.
+@property {Function} [dialog.onClose] Optional function to run after dialog element is closed - uses onclose dialog event.
 @property {number} [dialog.top] The top position of the dialog.
 @property {number} [dialog.left] The left position of the dialog.
 @property {number} [dialog.right] The right position of the dialog (used to calculate left position).
@@ -68,6 +70,15 @@ export default function dialog(dialog) {
 
   dialog.node = mapp.utils.html.node`
     <dialog 
+      onclose=${e => {
+        if(dialog.onClose instanceof Function) dialog.onClose(e)
+      }}
+      onclick=${e => {
+        if(dialog.closeOnClick) {
+          e.stopPropagation()
+          e.target.close()
+        }
+      }}
       style=${dialog.css_style}
       data-id=${dialog.data_id}
       class="${classList}">
@@ -104,7 +115,7 @@ export default function dialog(dialog) {
   }
 
   // Function to handle the dialog closure
-  function closeDialog() {
+  function closeDialog(e) {
     if (dialog.close instanceof Function) dialog.close()
     dialog.node.close();
   }
diff --git a/public/css/_ui.css b/public/css/_ui.css
index 179d30311..d4b811f9f 100644
--- a/public/css/_ui.css
+++ b/public/css/_ui.css
@@ -109,7 +109,6 @@ dialog > button.close {
 
 /* begin system message */
 dialog.mapp-says {
-  margin: auto;
   box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
   border: none !important;
   border-radius: 2px;
diff --git a/public/css/ui.css b/public/css/ui.css
index 9d4e44245..74c28a236 100644
--- a/public/css/ui.css
+++ b/public/css/ui.css
@@ -1598,7 +1598,6 @@ dialog > button.close {
   user-select: none;
 }
 dialog.mapp-says {
-  margin: auto;
   box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
   border: none !important;
   border-radius: 2px;

From 736602263dce166b4df07bcabb5256876ea15f12 Mon Sep 17 00:00:00 2001
From: Agata Brok <cityremade@users.noreply.github.com>
Date: Mon, 23 Sep 2024 14:50:58 +0200
Subject: [PATCH 08/31] Alert - issues addressed;

---
 lib/ui/elements/alert.mjs | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/lib/ui/elements/alert.mjs b/lib/ui/elements/alert.mjs
index 88c83eabc..30c0dab2d 100644
--- a/lib/ui/elements/alert.mjs
+++ b/lib/ui/elements/alert.mjs
@@ -29,11 +29,11 @@ export default function alert(params) {
 
     params.title ??= 'Information';
 
-    const alert = mapp.ui.elements.dialog({
+    return mapp.ui.elements.dialog({
       class: 'mapp-says',
       closeOnClick: true,
-      onClose: e => {
-        document.querySelector('dialog.mapp-says').remove();
+      onClose: (e) => {
+        e.target.remove();
       },
       header: mapp.utils.html.node`<h4>${params.title}`,
       content: mapp.utils.html.node`<p>${params.text}</p>

From d521f6435d89cfb6661b4f01b168ad84325aa73e Mon Sep 17 00:00:00 2001
From: Agata Brok <cityremade@users.noreply.github.com>
Date: Mon, 23 Sep 2024 15:21:40 +0200
Subject: [PATCH 09/31] Confirm using dialog ui element;

---
 lib/ui/elements/confirm.mjs | 40 ++++++++++++++++++-------------------
 1 file changed, 19 insertions(+), 21 deletions(-)

diff --git a/lib/ui/elements/confirm.mjs b/lib/ui/elements/confirm.mjs
index e0c106929..a5f5babda 100644
--- a/lib/ui/elements/confirm.mjs
+++ b/lib/ui/elements/confirm.mjs
@@ -35,40 +35,38 @@ export default function confirm(params) {
 
     params.title ??= 'Confirm';
     
-    const btn_true = mapp.utils.html.node`<button class="raised primary-colour del bold">${mapp.dictionary.ok}`;
+    const btn_true = mapp.utils.html.node`<button class="raised primary-colour bold">${mapp.dictionary.ok}`;
     
     const btn_false = mapp.utils.html.node`<button class="raised primary-colour bold">${mapp.dictionary.cancel}`
-    
-    const confirm = mapp.utils.html.node`<dialog class="mapp-says" 
-    onclose=${() => {
-        confirm.remove();
-    }}
-    onclick=${e => {
-        e.preventDefault();
-        confirm.close();
-    }}>
-    <h4>${params.title}</h4>
-    <p>${params.text}</p>
-    <div style="display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 0.2em">
-    ${btn_false}
-    ${btn_true}`;
-    
-    document.body.append(confirm);
 
-    confirm.showModal();
+    mapp.ui.elements.dialog({
+        data_id: 'confirm',
+        class: 'mapp-says',
+        closeOnClick: true,
+        onClose: (e) => {
+            e.target.remove()
+        },
+        header: mapp.utils.html.node`<h4>${params.title}`,
+        content: mapp.utils.html.node`<p>${params.text}</p>
+        <div style="display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 0.2em">
+        ${btn_false}
+        ${btn_true}`
+    })
+
     
     return new Promise((resolve, reject) => {
         
         btn_true.addEventListener("click", (e) => {
             e.stopPropagation();
-            confirm.close();
+            document.querySelector('dialog.mapp-says[data-id="confirm"]').close();
             resolve(true);
         });
         
         btn_false.addEventListener("click", (e) => {
             e.stopPropagation();
-            confirm.close();
+            document.querySelector('dialog.mapp-says[data-id="confirm"]').close();
             resolve(false);
         });
     });
-}
\ No newline at end of file
+}
+

From 411b0ed24b385f464689059b5119b8c0d6697848 Mon Sep 17 00:00:00 2001
From: dbauszus-glx <dennis.bauszus@geolytix.co.uk>
Date: Mon, 23 Sep 2024 16:45:51 +0100
Subject: [PATCH 10/31] format /ui/elements/confirm

---
 lib/ui/elements/confirm.mjs | 65 +++++++++++++++++++------------------
 1 file changed, 33 insertions(+), 32 deletions(-)

diff --git a/lib/ui/elements/confirm.mjs b/lib/ui/elements/confirm.mjs
index a5f5babda..18da89cc2 100644
--- a/lib/ui/elements/confirm.mjs
+++ b/lib/ui/elements/confirm.mjs
@@ -1,5 +1,5 @@
 /**
-### mapp.ui.elements.confirm()
+## /ui/elements/confirm
 
 Exports the confirm dialog method as mapp.ui.elements.confirm()
 
@@ -11,6 +11,7 @@ Exports the confirm dialog method as mapp.ui.elements.confirm()
 
 @description
 This is a confirm element to display information to the user and resolving to yes/no response.
+
 It is a framework alternative way to using window.confirm() browser function.
 
 ```js
@@ -33,40 +34,40 @@ if(confirm) {
 
 export default function confirm(params) {
 
-    params.title ??= 'Confirm';
-    
-    const btn_true = mapp.utils.html.node`<button class="raised primary-colour bold">${mapp.dictionary.ok}`;
-    
-    const btn_false = mapp.utils.html.node`<button class="raised primary-colour bold">${mapp.dictionary.cancel}`
+  params.title ??= 'Confirm';
+
+  const btn_true = mapp.utils.html.node`
+    <button class="raised primary-colour bold">${mapp.dictionary.ok}`;
 
-    mapp.ui.elements.dialog({
-        data_id: 'confirm',
-        class: 'mapp-says',
-        closeOnClick: true,
-        onClose: (e) => {
-            e.target.remove()
-        },
-        header: mapp.utils.html.node`<h4>${params.title}`,
-        content: mapp.utils.html.node`<p>${params.text}</p>
-        <div style="display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 0.2em">
+  const btn_false = mapp.utils.html.node`
+    <button class="raised primary-colour bold">${mapp.dictionary.cancel}`
+
+  mapp.ui.elements.dialog({
+    data_id: 'confirm',
+    class: 'mapp-says',
+    closeOnClick: true,
+    onClose: (e) => {
+      e.target.remove()
+    },
+    header: mapp.utils.html.node`<h4>${params.title}`,
+    content: mapp.utils.html.node`<p>${params.text}</p>
+      <div style="display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 0.2em">
         ${btn_false}
         ${btn_true}`
-    })
+  })
+
+  return new Promise((resolve, reject) => {
 
-    
-    return new Promise((resolve, reject) => {
-        
-        btn_true.addEventListener("click", (e) => {
-            e.stopPropagation();
-            document.querySelector('dialog.mapp-says[data-id="confirm"]').close();
-            resolve(true);
-        });
-        
-        btn_false.addEventListener("click", (e) => {
-            e.stopPropagation();
-            document.querySelector('dialog.mapp-says[data-id="confirm"]').close();
-            resolve(false);
-        });
+    btn_true.addEventListener("click", (e) => {
+      e.stopPropagation();
+      document.querySelector('dialog.mapp-says[data-id="confirm"]').close();
+      resolve(true);
     });
-}
 
+    btn_false.addEventListener("click", (e) => {
+      e.stopPropagation();
+      document.querySelector('dialog.mapp-says[data-id="confirm"]').close();
+      resolve(false);
+    });
+  });
+}

From 8d4cb31052055c7d70f81247cfd3e1223bab6812 Mon Sep 17 00:00:00 2001
From: Agata Brok <cityremade@users.noreply.github.com>
Date: Tue, 24 Sep 2024 14:10:32 +0200
Subject: [PATCH 11/31] Fix for unsaved changes exit;

---
 lib/ui/locations/view.mjs | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/lib/ui/locations/view.mjs b/lib/ui/locations/view.mjs
index 5c1ad1772..fb9a1d61b 100644
--- a/lib/ui/locations/view.mjs
+++ b/lib/ui/locations/view.mjs
@@ -151,14 +151,18 @@ export default function view(location) {
     class = "mask-icon close no"
     onclick = ${async () => {
 
-      if (location.infoj.some(entry => typeof entry.newValue !== 'undefined')) {
+      const changesUnsaved = location.infoj.some(entry => typeof entry.newValue !== 'undefined');
 
-        const confirm = await mapp.ui.elements({text: mapp.dictionary.location_close_without_save})
+      if(changesUnsaved) {
+
+        const confirm = await mapp.ui.elements.confirm({text: mapp.dictionary.location_close_without_save})
 
         if (!confirm) return;
+
       }
 
       location.remove()
+
     }}>`)
 
   location.view = mapp.ui.elements.drawer({

From 0581da7da1e49a7afbfe734ae65aad6ad377f264 Mon Sep 17 00:00:00 2001
From: Agata Brok <cityremade@users.noreply.github.com>
Date: Tue, 24 Sep 2024 14:13:04 +0200
Subject: [PATCH 12/31] Class renamed;

---
 lib/ui/elements/alert.mjs   |  4 ++--
 lib/ui/elements/confirm.mjs |  6 +++---
 public/css/_ui.css          | 16 ++++++++--------
 public/css/ui.css           | 16 ++++++++--------
 4 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/lib/ui/elements/alert.mjs b/lib/ui/elements/alert.mjs
index 30c0dab2d..00c589ee1 100644
--- a/lib/ui/elements/alert.mjs
+++ b/lib/ui/elements/alert.mjs
@@ -30,7 +30,7 @@ export default function alert(params) {
     params.title ??= 'Information';
 
     return mapp.ui.elements.dialog({
-      class: 'mapp-says',
+      class: 'alert-confirm',
       closeOnClick: true,
       onClose: (e) => {
         e.target.remove();
@@ -42,7 +42,7 @@ export default function alert(params) {
       class="raised primary-colour bold" style="grid-column: 2"
       onclick=${e => {
         e.stopPropagation();
-        document.querySelector('dialog.mapp-says').close();
+        document.querySelector('dialog.alert-confirm').close();
       }}>${mapp.dictionary.ok}`
 
     })
diff --git a/lib/ui/elements/confirm.mjs b/lib/ui/elements/confirm.mjs
index 18da89cc2..52d463492 100644
--- a/lib/ui/elements/confirm.mjs
+++ b/lib/ui/elements/confirm.mjs
@@ -44,7 +44,7 @@ export default function confirm(params) {
 
   mapp.ui.elements.dialog({
     data_id: 'confirm',
-    class: 'mapp-says',
+    class: 'alert-confirm',
     closeOnClick: true,
     onClose: (e) => {
       e.target.remove()
@@ -60,13 +60,13 @@ export default function confirm(params) {
 
     btn_true.addEventListener("click", (e) => {
       e.stopPropagation();
-      document.querySelector('dialog.mapp-says[data-id="confirm"]').close();
+      document.querySelector('dialog.alert-confirm[data-id="confirm"]').close();
       resolve(true);
     });
 
     btn_false.addEventListener("click", (e) => {
       e.stopPropagation();
-      document.querySelector('dialog.mapp-says[data-id="confirm"]').close();
+      document.querySelector('dialog.alert-confirm[data-id="confirm"]').close();
       resolve(false);
     });
   });
diff --git a/public/css/_ui.css b/public/css/_ui.css
index 706de81cd..cb539b2c4 100644
--- a/public/css/_ui.css
+++ b/public/css/_ui.css
@@ -108,7 +108,7 @@ dialog > button.close {
 }
 
 /* begin system message */
-dialog.mapp-says {
+dialog.alert-confirm {
   box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
   border: none !important;
   border-radius: 2px;
@@ -118,15 +118,15 @@ dialog.mapp-says {
   user-select: none;
 }
 
-dialog.mapp-says::-webkit-scrollbar {
+dialog.alert-confirm::-webkit-scrollbar {
   display: none;
 }
 
-dialog.mapp-says:focus {
+dialog.alert-confirm:focus {
   outline: none;
 }
 
-dialog.mapp-says h4 {
+dialog.alert-confirm h4 {
   padding: 0.5em 1em;
   position: sticky;
   top: 0;
@@ -137,18 +137,18 @@ dialog.mapp-says h4 {
   color: var(--color-light)
 }
 
-dialog.mapp-says div {
+dialog.alert-confirm div {
   padding: 1em;
 }
 
-dialog.mapp-says p {
+dialog.alert-confirm p {
   white-space: pre;
   text-wrap: pretty;
   text-align: center;
   padding: 1em;
 }
 
-dialog.mapp-says button {
+dialog.alert-confirm button {
   float: right;
   font-size: 0.9em;
   color: var(--color-primary);
@@ -157,7 +157,7 @@ dialog.mapp-says button {
 
 @media only screen and (max-width: 768px) {
 
-  dialog.mapp-says {
+  dialog.alert-confirm {
     min-width: 350px;
     max-width: 70%;
   }
diff --git a/public/css/ui.css b/public/css/ui.css
index fcc171b23..fa9f828cf 100644
--- a/public/css/ui.css
+++ b/public/css/ui.css
@@ -1597,7 +1597,7 @@ dialog > button.close {
   cursor: grab;
   user-select: none;
 }
-dialog.mapp-says {
+dialog.alert-confirm {
   box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
   border: none !important;
   border-radius: 2px;
@@ -1606,13 +1606,13 @@ dialog.mapp-says {
   z-index: 1001;
   user-select: none;
 }
-dialog.mapp-says::-webkit-scrollbar {
+dialog.alert-confirm::-webkit-scrollbar {
   display: none;
 }
-dialog.mapp-says:focus {
+dialog.alert-confirm:focus {
   outline: none;
 }
-dialog.mapp-says h4 {
+dialog.alert-confirm h4 {
   padding: 0.5em 1em;
   position: sticky;
   top: 0;
@@ -1622,23 +1622,23 @@ dialog.mapp-says h4 {
   border-bottom: solid 2px var(--color-primary-light);
   color: var(--color-light);
 }
-dialog.mapp-says div {
+dialog.alert-confirm div {
   padding: 1em;
 }
-dialog.mapp-says p {
+dialog.alert-confirm p {
   white-space: pre;
   text-wrap: pretty;
   text-align: center;
   padding: 1em;
 }
-dialog.mapp-says button {
+dialog.alert-confirm button {
   float: right;
   font-size: 0.9em;
   color: var(--color-primary);
   z-index: 1005;
 }
 @media only screen and (max-width: 768px) {
-  dialog.mapp-says {
+  dialog.alert-confirm {
     min-width: 350px;
     max-width: 70%;
   }

From 65320f85e0a85bbcb50023ca83dca171de49a61a Mon Sep 17 00:00:00 2001
From: Agata Brok <cityremade@users.noreply.github.com>
Date: Tue, 24 Sep 2024 14:32:08 +0200
Subject: [PATCH 13/31] View - exiting unsaved changes fix;

---
 lib/ui/elements/confirm.mjs |  2 +-
 lib/ui/locations/view.mjs   | 21 ++++++++++++---------
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/lib/ui/elements/confirm.mjs b/lib/ui/elements/confirm.mjs
index 52d463492..b92191881 100644
--- a/lib/ui/elements/confirm.mjs
+++ b/lib/ui/elements/confirm.mjs
@@ -29,7 +29,7 @@ if(confirm) {
 @property {string} [confirm.data_id='alert'] The data-id attribute value for the dialog.
 @property {string} [confirm.title] Text to display in the confirm header. Defaults to 'Confirm'.
 @property {string} [confirm.text] Text to display in the confirm content. 
-@returns {HTMLElement} confirm The confirm element.
+@returns {Promise<boolean>} Returns promise which resolves to true or false whether the question was confirmed.
 */
 
 export default function confirm(params) {
diff --git a/lib/ui/locations/view.mjs b/lib/ui/locations/view.mjs
index fb9a1d61b..9d08fc66b 100644
--- a/lib/ui/locations/view.mjs
+++ b/lib/ui/locations/view.mjs
@@ -268,21 +268,23 @@ function toggleLocationViewEdits(location) {
   */
   async function onClickEditToggle(e) {
 
-    // There are edits to be saved.
-    if (location.infoj.some(entry => typeof entry.newValue !== 'undefined')
+    // Check for unsaved edits
+    const unsavedChanges = location.infoj.some(entry => typeof entry.newValue !== 'undefined');
 
-      // Confirm whether to save edits.
-      && confirm(mapp.dictionary.location_save_changes)) {
+    if(unsavedChanges) {
+      // There are edits to be saved.
+      const confirm = await mapp.ui.elements.confirm({text: mapp.dictionary.location_save_changes})
 
-      const update = await location.update()
+      if(confirm) {
 
-      // The update may err due to invalid entries.
-      if (update instanceof Error) {
+        const update = await location.update()
+        
+        // The update may err due to invalid entries.
+        if (update instanceof Error) return;
 
-        return;
       }
+      
 
-      // There are no unsaved edits.
     } else if (e.target.classList.toggle('on')) {
 
       // Button is toggled on.
@@ -293,6 +295,7 @@ function toggleLocationViewEdits(location) {
       // Button is toggled off.
       location.removeEdits()
       location.view.querySelector('.btn-save').style.display = 'none'
+
     }
 
     location.renderLocationView()

From 22d06e045ac310ba4056c5c643e4702b40b8ca7d Mon Sep 17 00:00:00 2001
From: Simon Leech <56163132+simon-leech@users.noreply.github.com>
Date: Wed, 25 Sep 2024 08:36:27 +0100
Subject: [PATCH 14/31] Information Term to a dictionary definition

---
 lib/ui/elements/alert.mjs | 27 +++++++++++++++++----------
 1 file changed, 17 insertions(+), 10 deletions(-)

diff --git a/lib/ui/elements/alert.mjs b/lib/ui/elements/alert.mjs
index 00c589ee1..705a8dfd6 100644
--- a/lib/ui/elements/alert.mjs
+++ b/lib/ui/elements/alert.mjs
@@ -25,18 +25,25 @@ mapp.ui.elements.alert({
 @returns {HTMLElement} alert The alert element.
 */
 
+
+mapp.utils.merge(mapp.dictionaries, {
+  en: {
+    information: 'Information'
+  }
+});
+
 export default function alert(params) {
 
-    params.title ??= 'Information';
+  params.title ??= `${mapp.dictionary.information}`;
 
-    return mapp.ui.elements.dialog({
-      class: 'alert-confirm',
-      closeOnClick: true,
-      onClose: (e) => {
-        e.target.remove();
-      },
-      header: mapp.utils.html.node`<h4>${params.title}`,
-      content: mapp.utils.html.node`<p>${params.text}</p>
+  return mapp.ui.elements.dialog({
+    class: 'alert-confirm',
+    closeOnClick: true,
+    onClose: (e) => {
+      e.target.remove();
+    },
+    header: mapp.utils.html.node`<h4>${params.title}`,
+    content: mapp.utils.html.node`<p>${params.text}</p>
       <div style="display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 0.2em">
       <button 
       class="raised primary-colour bold" style="grid-column: 2"
@@ -45,5 +52,5 @@ export default function alert(params) {
         document.querySelector('dialog.alert-confirm').close();
       }}>${mapp.dictionary.ok}`
 
-    })
+  })
 }
\ No newline at end of file

From da03a8a4ea9feb32c0c0d4c860334cea5a34372f Mon Sep 17 00:00:00 2001
From: Simon Leech <56163132+simon-leech@users.noreply.github.com>
Date: Wed, 25 Sep 2024 08:36:42 +0100
Subject: [PATCH 15/31] Confirm Term to a dictionary definition; OK button on
 the left not right

---
 lib/ui/elements/confirm.mjs | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/lib/ui/elements/confirm.mjs b/lib/ui/elements/confirm.mjs
index b92191881..847b83791 100644
--- a/lib/ui/elements/confirm.mjs
+++ b/lib/ui/elements/confirm.mjs
@@ -26,15 +26,21 @@ if(confirm) {
 ```
 
 @param {Object} confirm The confirm configuration object.
-@property {string} [confirm.data_id='alert'] The data-id attribute value for the dialog.
+@property {string} [confirm.data_id='confirm'] The data-id attribute value for the dialog.
 @property {string} [confirm.title] Text to display in the confirm header. Defaults to 'Confirm'.
 @property {string} [confirm.text] Text to display in the confirm content. 
 @returns {Promise<boolean>} Returns promise which resolves to true or false whether the question was confirmed.
 */
 
+mapp.utils.merge(mapp.dictionaries, {
+  en: {
+    confirm: 'Confirm'
+  }
+});
+
 export default function confirm(params) {
 
-  params.title ??= 'Confirm';
+  params.title ??= `${mapp.dictionary.confirm}`;
 
   const btn_true = mapp.utils.html.node`
     <button class="raised primary-colour bold">${mapp.dictionary.ok}`;
@@ -52,19 +58,19 @@ export default function confirm(params) {
     header: mapp.utils.html.node`<h4>${params.title}`,
     content: mapp.utils.html.node`<p>${params.text}</p>
       <div style="display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 0.2em">
-        ${btn_false}
-        ${btn_true}`
+      ${btn_true}  
+      ${btn_false}`
   })
 
   return new Promise((resolve, reject) => {
 
-    btn_true.addEventListener("click", (e) => {
+    btn_true.addEventListener('click', (e) => {
       e.stopPropagation();
       document.querySelector('dialog.alert-confirm[data-id="confirm"]').close();
       resolve(true);
     });
 
-    btn_false.addEventListener("click", (e) => {
+    btn_false.addEventListener('click', (e) => {
       e.stopPropagation();
       document.querySelector('dialog.alert-confirm[data-id="confirm"]').close();
       resolve(false);

From 02670c517ec3bdb5cd03e64ed0a41377dfbbc374 Mon Sep 17 00:00:00 2001
From: Simon Leech <56163132+simon-leech@users.noreply.github.com>
Date: Wed, 25 Sep 2024 08:36:52 +0100
Subject: [PATCH 16/31] Slider Test - correct spelling

---
 tests/lib/ui/elements/slider.test.mjs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/lib/ui/elements/slider.test.mjs b/tests/lib/ui/elements/slider.test.mjs
index 4648e01ff..58e32adc7 100644
--- a/tests/lib/ui/elements/slider.test.mjs
+++ b/tests/lib/ui/elements/slider.test.mjs
@@ -10,7 +10,7 @@
 */
 export async function sliderTest() {
     await codi.describe('UI elements: slider', async () => {
-        await codi.it('Should return an slider', async () => {
+        await codi.it('Should return the slider', async () => {
             //get the workspace from the local files
             const workspace = await mapp.utils.xhr(`/test/tests/workspace.json`);
             const layer = workspace.locale.layers['input_slider'];//Get the input slider layer that we can get the params for.

From 811e6294fe33aa45c8e64d96c18a525276949a25 Mon Sep 17 00:00:00 2001
From: Simon Leech <56163132+simon-leech@users.noreply.github.com>
Date: Wed, 25 Sep 2024 08:37:03 +0100
Subject: [PATCH 17/31] New Alert and Confirm Tests

---
 tests/browser/local.test.mjs             |  5 +-
 tests/lib/ui/elements/_elements.test.mjs |  6 +-
 tests/lib/ui/elements/alert.test.mjs     | 63 +++++++++++++++++
 tests/lib/ui/elements/confirm.test.mjs   | 87 ++++++++++++++++++++++++
 4 files changed, 159 insertions(+), 2 deletions(-)
 create mode 100644 tests/lib/ui/elements/alert.test.mjs
 create mode 100644 tests/lib/ui/elements/confirm.test.mjs

diff --git a/tests/browser/local.test.mjs b/tests/browser/local.test.mjs
index 7f1a94fbc..5728f696e 100644
--- a/tests/browser/local.test.mjs
+++ b/tests/browser/local.test.mjs
@@ -44,9 +44,12 @@ await mapviewTest.olControlsTest(mapview);
 
 await ui_elementsTest.sliderTest();
 await ui_elementsTest.layerStyleTest(mapview);
+await ui_elementsTest.pillsTest();
+await ui_elementsTest.alertTest();
+await ui_elementsTest.confirmTest();
 
 await entriesTest.pinTest(mapview);
 await entriesTest.geometryTest(mapview);
 
-await ui_elementsTest.pillsTest();
+
 await ui_layers.filtersTest(mapview);
\ No newline at end of file
diff --git a/tests/lib/ui/elements/_elements.test.mjs b/tests/lib/ui/elements/_elements.test.mjs
index 1ffbe14ae..8f4f045fe 100644
--- a/tests/lib/ui/elements/_elements.test.mjs
+++ b/tests/lib/ui/elements/_elements.test.mjs
@@ -1,9 +1,13 @@
 import { sliderTest } from './slider.test.mjs';
 import { layerStyleTest } from './layerStyle.test.mjs'
 import { pillsTest } from './pills.test.mjs';
+import { alertTest } from './alert.test.mjs';
+import { confirmTest } from './confirm.test.mjs';
 
 export const ui_elementsTest = {
     sliderTest,
     layerStyleTest,
-    pillsTest
+    pillsTest,
+    alertTest,
+    confirmTest
 };
\ No newline at end of file
diff --git a/tests/lib/ui/elements/alert.test.mjs b/tests/lib/ui/elements/alert.test.mjs
new file mode 100644
index 000000000..d5d8a7421
--- /dev/null
+++ b/tests/lib/ui/elements/alert.test.mjs
@@ -0,0 +1,63 @@
+/**
+ * ## layer.decorateTest()
+ * @module ui/elements/alert
+ */
+/**
+ * This function is used to test the alert method
+ * @function alertTest 
+*/
+export async function alertTest() {
+    await codi.describe('UI elements: Alert', async () => {
+
+        // Test providing params
+        await codi.describe('Should create an alert with params provided', async () => {
+            mapp.ui.elements.alert({ title: 'ALERT TITLE', text: 'ALERT TEXT' });
+
+            // Get the alert element
+            const alert = document.querySelector('body > dialog');
+            codi.assertTrue(alert !== undefined, 'We expect to see the alert element');
+
+            await codi.it('Should have a title of ALERT TITLE', async () => {
+                // Get the alert title
+                const alert_title = alert.querySelector('h4').textContent;
+                codi.assertEqual(alert_title, 'ALERT TITLE', 'We expect to see the alert title');
+
+            });
+
+            await codi.it('Should have a text of ALERT TEXT', async () => {
+                // Get the alert text
+                const alert_text = alert.querySelector('p').textContent;
+                codi.assertEqual(alert_text, 'ALERT TEXT', 'We expect to see the alert text');
+            })
+            // Close the alert 
+            alert.remove();
+
+        });
+
+        // Test providing no params
+        await codi.describe('Should create an alert with no params provided', async () => {
+            mapp.ui.elements.alert({});
+
+            // Get the alert element
+            const alert = document.querySelector('body > dialog');
+            codi.assertTrue(alert !== undefined, 'We expect to see the alert element');
+
+            await codi.it('Should have a title of Information', async () => {
+                // Get the alert title
+                const alert_title = alert.querySelector('h4').textContent;
+                codi.assertEqual(alert_title, 'Information', 'We expect to see the alert title');
+
+            });
+
+            await codi.it('Should have no text', async () => {
+                // Get the alert text
+                const alert_text = alert.querySelector('p').textContent;
+                codi.assertEqual(alert_text, '', 'We expect to see no alert text');
+            })
+            // Close the alert 
+            alert.remove();
+
+        });
+
+    });
+}
\ No newline at end of file
diff --git a/tests/lib/ui/elements/confirm.test.mjs b/tests/lib/ui/elements/confirm.test.mjs
new file mode 100644
index 000000000..e2a12f805
--- /dev/null
+++ b/tests/lib/ui/elements/confirm.test.mjs
@@ -0,0 +1,87 @@
+/**
+ * ## layer.decorateTest()
+ * @module ui/elements/confirm
+ */
+/**
+ * This function is used to test the confirm method
+ * @function confirmTest 
+*/
+export async function confirmTest() {
+    await codi.describe('UI elements: Confirm', async () => {
+
+        // Test providing params
+        await codi.describe('Should create a confirm dialog with params provided', async () => {
+            mapp.ui.elements.confirm({ title: 'CONFIRM TITLE', text: 'CONFIRM TEXT' });
+
+            // Get the confirm element
+            const confirm = document.querySelector('body > dialog');
+            codi.assertTrue(confirm !== undefined, 'We expect to see the confirm element');
+
+            await codi.it('Should have a title of CONFIRM TITLE', async () => {
+                // Get the confirm title
+                const confirm_title = confirm.querySelector('h4').textContent;
+                codi.assertEqual(confirm_title, 'CONFIRM TITLE', 'We expect to see the confirm title');
+
+            });
+
+            await codi.it('Should have a text of CONFIRM TEXT', async () => {
+                // Get the confirm text
+                const confirm_text = confirm.querySelector('p').textContent;
+                codi.assertEqual(confirm_text, 'CONFIRM TEXT', 'We expect to see the confirm text');
+            })
+
+            // Get the confirm buttons
+            const confirm_buttons = confirm.querySelectorAll('button');
+
+            await codi.it('Should have an OK button', async () => {
+                codi.assertEqual(confirm_buttons[0].innerText, 'OK', 'We expect to see the OK button');
+            })
+
+            await codi.it('Should have a Cancel button', async () => {
+                codi.assertEqual(confirm_buttons[1].innerText, 'Cancel', 'We expect to see the Cancel button');
+            });
+
+            // Close the confirm 
+            confirm.remove();
+
+        });
+
+        // Test providing no params
+        await codi.describe('Should create a confirm dialog with no params provided', async () => {
+            mapp.ui.elements.confirm({});
+
+            // Get the confirm element
+            const confirm = document.querySelector('body > dialog');
+            codi.assertTrue(confirm !== undefined, 'We expect to see the confirm element');
+
+            await codi.it('Should have a title of Information', async () => {
+                // Get the confirm title
+                const confirm_title = confirm.querySelector('h4').textContent;
+                codi.assertEqual(confirm_title, 'Confirm', 'We expect to see the confirm title');
+
+            });
+
+            await codi.it('Should have no text', async () => {
+                // Get the confirm text
+                const confirm_text = confirm.querySelector('p').textContent;
+                codi.assertEqual(confirm_text, '', 'We expect to see no confirm text');
+            })
+
+            // Get the confirm buttons
+            const confirm_buttons = confirm.querySelectorAll('button');
+
+            await codi.it('Should have an OK button', async () => {
+                codi.assertEqual(confirm_buttons[0].innerText, 'OK', 'We expect to see the OK button');
+            })
+
+            await codi.it('Should have a Cancel button', async () => {
+                codi.assertEqual(confirm_buttons[1].innerText, 'Cancel', 'We expect to see the Cancel button');
+            });
+
+            // Close the confirm 
+            confirm.remove();
+
+        });
+
+    });
+}
\ No newline at end of file

From d6fa37608e259ff94adc16bd893186d325221299 Mon Sep 17 00:00:00 2001
From: dbauszus-glx <dennis.bauszus@geolytix.co.uk>
Date: Wed, 25 Sep 2024 15:59:02 +0100
Subject: [PATCH 18/31] update dialog construction

---
 lib/dictionaries/en.mjs                 |  2 +
 lib/ui/elements/alert.mjs               | 61 ++++++++---------
 lib/ui/elements/confirm.mjs             | 89 +++++++++++++------------
 lib/ui/locations/entries/cloudinary.mjs |  3 +-
 lib/ui/locations/view.mjs               | 26 +++++---
 public/css/_ui.css                      |  6 ++
 public/css/ui.css                       |  5 ++
 public/views/_default.html              |  5 ++
 8 files changed, 112 insertions(+), 85 deletions(-)

diff --git a/lib/dictionaries/en.mjs b/lib/dictionaries/en.mjs
index f23884a3f..fdbc91fcd 100644
--- a/lib/dictionaries/en.mjs
+++ b/lib/dictionaries/en.mjs
@@ -2,6 +2,8 @@ export default {
   save: 'Save',
   cancel: 'Cancel',
   ok: 'OK',
+  confirm: 'Confirm',
+  information: 'Information',
   confirm_delete: 'Are you sure you want to delete this feature? This cannot be undone.',
   invalid_geometry: 'Invalid geometry',
   no_results: 'No results for this search',
diff --git a/lib/ui/elements/alert.mjs b/lib/ui/elements/alert.mjs
index 705a8dfd6..697d6d529 100644
--- a/lib/ui/elements/alert.mjs
+++ b/lib/ui/elements/alert.mjs
@@ -1,8 +1,10 @@
 /**
-### mapp.ui.elements.alert()
+### /ui/elements/alert
 
 Exports the alert dialog method as mapp.ui.elements.alert()
 
+@requires /ui/elements/dialog
+
 @module /ui/elements/alert
 */
 
@@ -11,46 +13,45 @@ Exports the alert dialog method as mapp.ui.elements.alert()
 
 @description
 This is an alert element to display information to the user.
+
 It is a framework alternative way to using window.alert() browser function.
 
 ```js
 mapp.ui.elements.alert({
-   text: "Drivetimes have been created."
+  text: "Drivetimes have been created."
 })
 ```
-
-@param {Object} alert The alert configuration object. Created with mapp.ui.elements.dialog.
-@property {string} [alert.title] Text to display in the alert header. Defaults to 'Information'.
-@property {string} [alert.text] Text to display in the alert content. 
+@param {Object} params Params for the alert dialog.
+@property {string} [params.data_id='alert'] The data-id attribute value for the dialog.
+@property {string} [params.title] Text to display in the alert header. Defaults to 'Information'.
+@property {string} [params.text] Text to display in the alert content. 
 @returns {HTMLElement} alert The alert element.
 */
+export default function alert(params) {
 
+  params.title ??= `${mapp.dictionary.information}`;
 
-mapp.utils.merge(mapp.dictionaries, {
-  en: {
-    information: 'Information'
-  }
-});
+  params.data_id ??= 'alert'
 
-export default function alert(params) {
+  params.class ??= 'alert-confirm'
 
-  params.title ??= `${mapp.dictionary.information}`;
+  params.closeOnClick = true
+
+  params.onClose= (e) => e.target.remove()
+
+  params.header = mapp.utils.html`
+    <h4>${params.title}`
 
-  return mapp.ui.elements.dialog({
-    class: 'alert-confirm',
-    closeOnClick: true,
-    onClose: (e) => {
-      e.target.remove();
-    },
-    header: mapp.utils.html.node`<h4>${params.title}`,
-    content: mapp.utils.html.node`<p>${params.text}</p>
-      <div style="display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 0.2em">
+  params.content = mapp.utils.html`
+    <p>${params.text}</p>
+    <div class="buttons">
       <button 
-      class="raised primary-colour bold" style="grid-column: 2"
-      onclick=${e => {
-        e.stopPropagation();
-        document.querySelector('dialog.alert-confirm').close();
-      }}>${mapp.dictionary.ok}`
-
-  })
-}
\ No newline at end of file
+        class="raised primary-colour bold"
+        style="grid-column: 1/3; margin: 0 5em;"
+        onclick=${e => {
+          e.stopPropagation();
+          e.target.closest('dialog').close();
+        }}>${mapp.dictionary.ok}`
+
+  return mapp.ui.elements.dialog(params)
+}
diff --git a/lib/ui/elements/confirm.mjs b/lib/ui/elements/confirm.mjs
index 847b83791..0ce3d6075 100644
--- a/lib/ui/elements/confirm.mjs
+++ b/lib/ui/elements/confirm.mjs
@@ -3,6 +3,9 @@
 
 Exports the confirm dialog method as mapp.ui.elements.confirm()
 
+@requires /ui/elements/dialog
+
+
 @module /ui/elements/confirm
 */
 
@@ -25,55 +28,53 @@ if(confirm) {
 }
 ```
 
-@param {Object} confirm The confirm configuration object.
-@property {string} [confirm.data_id='confirm'] The data-id attribute value for the dialog.
-@property {string} [confirm.title] Text to display in the confirm header. Defaults to 'Confirm'.
-@property {string} [confirm.text] Text to display in the confirm content. 
+@param {Object} params Params for the configuration dialog.
+@property {string} [params.data_id='confirm'] The data-id attribute value for the dialog.
+@property {string} [params.title] Text to display in the confirm header. Defaults to 'Confirm'.
+@property {string} [params.text] Text to display in the confirm content.
+@property {string} [params.text] Text to display in the confirm content. 
 @returns {Promise<boolean>} Returns promise which resolves to true or false whether the question was confirmed.
 */
-
-mapp.utils.merge(mapp.dictionaries, {
-  en: {
-    confirm: 'Confirm'
-  }
-});
-
 export default function confirm(params) {
 
-  params.title ??= `${mapp.dictionary.confirm}`;
-
-  const btn_true = mapp.utils.html.node`
-    <button class="raised primary-colour bold">${mapp.dictionary.ok}`;
-
-  const btn_false = mapp.utils.html.node`
-    <button class="raised primary-colour bold">${mapp.dictionary.cancel}`
-
-  mapp.ui.elements.dialog({
-    data_id: 'confirm',
-    class: 'alert-confirm',
-    closeOnClick: true,
-    onClose: (e) => {
-      e.target.remove()
-    },
-    header: mapp.utils.html.node`<h4>${params.title}`,
-    content: mapp.utils.html.node`<p>${params.text}</p>
-      <div style="display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 0.2em">
-      ${btn_true}  
-      ${btn_false}`
-  })
-
   return new Promise((resolve, reject) => {
 
-    btn_true.addEventListener('click', (e) => {
-      e.stopPropagation();
-      document.querySelector('dialog.alert-confirm[data-id="confirm"]').close();
-      resolve(true);
-    });
-
-    btn_false.addEventListener('click', (e) => {
-      e.stopPropagation();
-      document.querySelector('dialog.alert-confirm[data-id="confirm"]').close();
-      resolve(false);
-    });
+    params.title ??= `${mapp.dictionary.confirm}`;
+
+    params.data_id ??= 'confirm'
+  
+    params.header = mapp.utils.html`<h4>${params.title}`
+  
+    const btn_true = mapp.utils.html`<button 
+      onclick=${e => {
+        e.stopPropagation();
+        e.target.closest('dialog').close();
+        resolve(true);
+      }}
+      class="raised primary-colour bold">
+      ${mapp.dictionary.ok}`;
+  
+    const btn_false = mapp.utils.html`<button
+      onclick=${e => {
+        e.stopPropagation();
+        e.target.closest('dialog').close();
+        resolve(false);
+      }}
+      class="raised primary-colour bold">
+      ${mapp.dictionary.cancel}`
+  
+    params.content ??= mapp.utils.html`
+      <p>${params.text}</p>
+      <div class="buttons">
+        ${btn_true}  
+        ${btn_false}`
+  
+    params.class ??= 'alert-confirm'
+  
+    params.closeOnClick = true
+  
+    params.onClose = (e) => e.target.remove()
+  
+    mapp.ui.elements.dialog(params)
   });
 }
diff --git a/lib/ui/locations/entries/cloudinary.mjs b/lib/ui/locations/entries/cloudinary.mjs
index dde91b90f..4283b9adc 100644
--- a/lib/ui/locations/entries/cloudinary.mjs
+++ b/lib/ui/locations/entries/cloudinary.mjs
@@ -14,6 +14,7 @@ mapp.utils.merge(mapp.dictionaries, {
   en: {
     image_upload_failed: 'Image upload failed.',
     document_upload_failed: 'Document upload failed.',
+    remove_item_confirm: 'Remove item?'
   },
   de: {
     image_upload_failed: 'Hochladen des Bildes gescheitert.',
@@ -275,7 +276,7 @@ async function docLoad(e, entry) {
 
 async function trash(e, entry) {
 
-  const confirm = await mapp.ui.elements.confirm({text: 'Remove item?'});
+  const confirm = await mapp.ui.elements.confirm({text: mapp.dictionary.remove_item_confirm});
 
   if (!confirm) return;
 
diff --git a/lib/ui/locations/view.mjs b/lib/ui/locations/view.mjs
index 9d08fc66b..e94f64e25 100644
--- a/lib/ui/locations/view.mjs
+++ b/lib/ui/locations/view.mjs
@@ -147,23 +147,29 @@ export default function view(location) {
 
   // Clear selection.
   header.push(mapp.utils.html`<button
-    title = ${mapp.dictionary.location_remove}
-    class = "mask-icon close no"
-    onclick = ${async () => {
+    title= ${mapp.dictionary.location_remove}
+    class= "mask-icon close no"
+    onclick= ${location_remove}>`)
 
-      const changesUnsaved = location.infoj.some(entry => typeof entry.newValue !== 'undefined');
+  /**
+  @function location_remove
 
-      if(changesUnsaved) {
+  @description
+  The method checks whether a location.infoj has some unsaved changes. A confirm dialog will be shown to confirm the location.remove() without saving changes.
+  */
+  async function location_remove() {
 
-        const confirm = await mapp.ui.elements.confirm({text: mapp.dictionary.location_close_without_save})
+    const changesUnsaved = location.infoj.some(entry => typeof entry.newValue !== 'undefined');
 
-        if (!confirm) return;
+    if(changesUnsaved) {
 
-      }
+      const confirm = await mapp.ui.elements.confirm({text: mapp.dictionary.location_close_without_save})
 
-      location.remove()
+      if (!confirm) return;
+    }
 
-    }}>`)
+    location.remove()
+  }
 
   location.view = mapp.ui.elements.drawer({
     class: 'location-view raised expanded',
diff --git a/public/css/_ui.css b/public/css/_ui.css
index cb539b2c4..12a387d44 100644
--- a/public/css/_ui.css
+++ b/public/css/_ui.css
@@ -148,6 +148,12 @@ dialog.alert-confirm p {
   padding: 1em;
 }
 
+dialog.alert-confirm .buttons {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-gap: 0.2em
+}
+
 dialog.alert-confirm button {
   float: right;
   font-size: 0.9em;
diff --git a/public/css/ui.css b/public/css/ui.css
index fa9f828cf..e39030409 100644
--- a/public/css/ui.css
+++ b/public/css/ui.css
@@ -1631,6 +1631,11 @@ dialog.alert-confirm p {
   text-align: center;
   padding: 1em;
 }
+dialog.alert-confirm .buttons {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-gap: 0.2em;
+}
 dialog.alert-confirm button {
   float: right;
   font-size: 0.9em;
diff --git a/public/views/_default.html b/public/views/_default.html
index c9e9da872..8df20ef2a 100644
--- a/public/views/_default.html
+++ b/public/views/_default.html
@@ -663,6 +663,11 @@
     });
   }
 
+  mapp.ui.elements.alert({
+    title: "foo",
+    text: "bar"
+  })
+
   // Add layers to mapview.
   await mapview.addLayer(locale.layers);
 

From a3380d96a4fd84d5277b0c9a1e49a94c29c11ba2 Mon Sep 17 00:00:00 2001
From: dbauszus-glx <dennis.bauszus@geolytix.co.uk>
Date: Wed, 25 Sep 2024 16:09:05 +0100
Subject: [PATCH 19/31] remove double property

---
 lib/ui/elements/confirm.mjs | 1 -
 1 file changed, 1 deletion(-)

diff --git a/lib/ui/elements/confirm.mjs b/lib/ui/elements/confirm.mjs
index 0ce3d6075..d2a6669b0 100644
--- a/lib/ui/elements/confirm.mjs
+++ b/lib/ui/elements/confirm.mjs
@@ -32,7 +32,6 @@ if(confirm) {
 @property {string} [params.data_id='confirm'] The data-id attribute value for the dialog.
 @property {string} [params.title] Text to display in the confirm header. Defaults to 'Confirm'.
 @property {string} [params.text] Text to display in the confirm content.
-@property {string} [params.text] Text to display in the confirm content. 
 @returns {Promise<boolean>} Returns promise which resolves to true or false whether the question was confirmed.
 */
 export default function confirm(params) {

From 5de6c6dbbc638a2bbc3f81871cbc391294001b94 Mon Sep 17 00:00:00 2001
From: dbauszus-glx <dennis.bauszus@geolytix.co.uk>
Date: Wed, 25 Sep 2024 16:12:44 +0100
Subject: [PATCH 20/31] remove empty row

---
 lib/ui/elements/confirm.mjs | 1 -
 1 file changed, 1 deletion(-)

diff --git a/lib/ui/elements/confirm.mjs b/lib/ui/elements/confirm.mjs
index d2a6669b0..c4a5eed57 100644
--- a/lib/ui/elements/confirm.mjs
+++ b/lib/ui/elements/confirm.mjs
@@ -5,7 +5,6 @@ Exports the confirm dialog method as mapp.ui.elements.confirm()
 
 @requires /ui/elements/dialog
 
-
 @module /ui/elements/confirm
 */
 

From 5540badff43ee631da302402e9cf2ab16ec82e6f Mon Sep 17 00:00:00 2001
From: dbauszus-glx <dennis.bauszus@geolytix.co.uk>
Date: Wed, 25 Sep 2024 16:13:16 +0100
Subject: [PATCH 21/31] remove test alert

---
 public/views/_default.html | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/public/views/_default.html b/public/views/_default.html
index 8df20ef2a..c9e9da872 100644
--- a/public/views/_default.html
+++ b/public/views/_default.html
@@ -663,11 +663,6 @@
     });
   }
 
-  mapp.ui.elements.alert({
-    title: "foo",
-    text: "bar"
-  })
-
   // Add layers to mapview.
   await mapview.addLayer(locale.layers);
 

From 5adf408da2fd7d8ead043c1dd2df297a43eff5e4 Mon Sep 17 00:00:00 2001
From: Robert Hurst <robert.hurst@geolytix.co.uk>
Date: Wed, 25 Sep 2024 19:09:18 +0200
Subject: [PATCH 22/31] Dialog test

---
 tests/browser/local.test.mjs             |  1 +
 tests/lib/ui/elements/_elements.test.mjs |  4 ++-
 tests/lib/ui/elements/dialog.test.mjs    | 40 ++++++++++++++++++++++++
 3 files changed, 44 insertions(+), 1 deletion(-)
 create mode 100644 tests/lib/ui/elements/dialog.test.mjs

diff --git a/tests/browser/local.test.mjs b/tests/browser/local.test.mjs
index d46d3851c..c0022e357 100644
--- a/tests/browser/local.test.mjs
+++ b/tests/browser/local.test.mjs
@@ -48,6 +48,7 @@ await ui_elementsTest.layerStyleTest(mapview);
 await ui_elementsTest.pillsTest();
 await ui_elementsTest.alertTest();
 await ui_elementsTest.confirmTest();
+await ui_elementsTest.dialogTest();
 
 await entriesTest.pinTest(mapview);
 await entriesTest.geometryTest(mapview);
diff --git a/tests/lib/ui/elements/_elements.test.mjs b/tests/lib/ui/elements/_elements.test.mjs
index 8f4f045fe..1e23d1407 100644
--- a/tests/lib/ui/elements/_elements.test.mjs
+++ b/tests/lib/ui/elements/_elements.test.mjs
@@ -3,11 +3,13 @@ import { layerStyleTest } from './layerStyle.test.mjs'
 import { pillsTest } from './pills.test.mjs';
 import { alertTest } from './alert.test.mjs';
 import { confirmTest } from './confirm.test.mjs';
+import { dialogTest } from './dialog.test.mjs';
 
 export const ui_elementsTest = {
     sliderTest,
     layerStyleTest,
     pillsTest,
     alertTest,
-    confirmTest
+    confirmTest,
+    dialogTest
 };
\ No newline at end of file
diff --git a/tests/lib/ui/elements/dialog.test.mjs b/tests/lib/ui/elements/dialog.test.mjs
new file mode 100644
index 000000000..f24e622f1
--- /dev/null
+++ b/tests/lib/ui/elements/dialog.test.mjs
@@ -0,0 +1,40 @@
+
+/**
+ * This function is used to test the dialog ui element.
+ * @function dialogTest
+ */
+export async function dialogTest() {
+    await codi.describe('UI Elements: dialog/modal', async () => {
+        /**
+         * We should be able to create a basic dialog with some params
+         * @function it
+         */
+        await codi.it('Should create a basic dialog', async () => {
+
+            const params = {
+                target: document.getElementById('Map'),
+                close: true,
+                headerDrag: true,
+                header: 'I am a header',
+                content: 'I am so content',
+                top: '5em',
+                left: '5em',
+                contained: true
+            };
+
+            mapp.ui.elements.dialog(params);
+            let dialog = document.querySelector('#Map > dialog');
+
+            /**
+             * The dialog should be able to close
+             * @function it
+             */
+            await codi.it('Dialog should be able to close', async () => {
+                const closeBtn = dialog.childNodes[1];
+                closeBtn.click();
+                dialog = document.querySelector('#Map > dialog');
+                codi.assertEqual(dialog, undefined, 'The dialog should be removed from the DOM on close');
+            });
+        });
+    });
+}
\ No newline at end of file

From 49d55e23da64d4245d395caad95dc292349e38a8 Mon Sep 17 00:00:00 2001
From: Agata Brok <cityremade@users.noreply.github.com>
Date: Thu, 26 Sep 2024 19:00:58 +0200
Subject: [PATCH 23/31] Requested changes to close function;

---
 lib/ui/elements/alert.mjs   |  2 --
 lib/ui/elements/confirm.mjs |  2 --
 lib/ui/elements/dialog.mjs  | 25 +++++++++++++++++--------
 3 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/lib/ui/elements/alert.mjs b/lib/ui/elements/alert.mjs
index 697d6d529..ce11d161f 100644
--- a/lib/ui/elements/alert.mjs
+++ b/lib/ui/elements/alert.mjs
@@ -37,8 +37,6 @@ export default function alert(params) {
 
   params.closeOnClick = true
 
-  params.onClose= (e) => e.target.remove()
-
   params.header = mapp.utils.html`
     <h4>${params.title}`
 
diff --git a/lib/ui/elements/confirm.mjs b/lib/ui/elements/confirm.mjs
index c4a5eed57..12e2a4b1d 100644
--- a/lib/ui/elements/confirm.mjs
+++ b/lib/ui/elements/confirm.mjs
@@ -71,8 +71,6 @@ export default function confirm(params) {
   
     params.closeOnClick = true
   
-    params.onClose = (e) => e.target.remove()
-  
     mapp.ui.elements.dialog(params)
   });
 }
diff --git a/lib/ui/elements/dialog.mjs b/lib/ui/elements/dialog.mjs
index 7b4c87a2b..2b039f4b7 100644
--- a/lib/ui/elements/dialog.mjs
+++ b/lib/ui/elements/dialog.mjs
@@ -30,16 +30,16 @@ const dialog = mapp.ui.elements.dialog({
 @property {string} [dialog.header] The HTML content for the dialog header.
 @property {string} [dialog.content] The HTML content for the dialog body.
 @property {boolean} [dialog.modal] A flag to determine if its a Modal or Dialog.
-@property {Function} [dialog.close] A function to be called when the dialog is closed. Boolean to indicate whether there should be a close method.
+@property {Function} [dialog.close] A function called when the dialog is closed. The dialog element is closed and removed from DOM.
 @property {boolean} [dialog.closeOnClick] Optional parameter to close the dialog when backdrop or the dialog itself is clicked.
-@property {Function} [dialog.onClose] Optional function to run after dialog element is closed - uses onclose dialog event.
+@property {Function} [dialog.onClose] Optional function to run after dialog element is closed - uses onclose dialog event and overrides dialog.close().
 @property {number} [dialog.top] The top position of the dialog.
 @property {number} [dialog.left] The left position of the dialog.
 @property {number} [dialog.right] The right position of the dialog (used to calculate left position).
 @property {boolean} [dialog.contained] A flag indicating whether to keep the dialog within the target element's boundaries.
 @property {boolean} [dialog.containedCentre] A flag indicating whether to keep the dialog centered within the target element's boundaries.
 @property {boolean} [dialog.headerDrag] A flag indicating whether the dialog can be dragged only by the header.By default, the dialog can be dragged from anywhere.
-@returns {HTMLElement} dialog.node The dialog element.
+@returns {Object} Decorated dialog configuration object
 */
 
 export default function dialog(dialog) {
@@ -55,7 +55,7 @@ export default function dialog(dialog) {
   // Close existing modal.
   document.querySelector('dialog.modal')?.close()
 
-  dialog.closeBtn ??= dialog.close && mapp.utils.html.node`
+  dialog.closeBtn ??= mapp.utils.html.node`
     <button
       data-id=close
       class="mask-icon close"
@@ -71,12 +71,14 @@ export default function dialog(dialog) {
   dialog.node = mapp.utils.html.node`
     <dialog 
       onclose=${e => {
-        if(dialog.onClose instanceof Function) dialog.onClose(e)
+        if(dialog.onClose instanceof Function) return dialog.onClose(e)
+        dialog.close()
       }}
       onclick=${e => {
         if(dialog.closeOnClick) {
           e.stopPropagation()
-          e.target.close()
+          if(dialog.onClose instanceof Function) return dialog.onClose(e)
+          dialog.close()
         }
       }}
       style=${dialog.css_style}
@@ -85,6 +87,11 @@ export default function dialog(dialog) {
       ${dialog.closeBtn}
       ${dialog.header}
       ${dialog.content}`
+      
+  dialog.close = () => {
+    dialog.node.close()
+    dialog.node.remove()
+  }
 
 
   if (dialog.modal) {
@@ -116,8 +123,8 @@ export default function dialog(dialog) {
 
   // Function to handle the dialog closure
   function closeDialog(e) {
-    if (dialog.close instanceof Function) dialog.close()
-    dialog.node.close();
+    if (dialog.onClose instanceof Function) return dialog.onClose()
+    dialog.close();
   }
 
   // Function to handle the start of a drag event, setting up the necessary event listeners for moving and ending the drag
@@ -211,6 +218,8 @@ export default function dialog(dialog) {
     // top shift
     dialog.node.style.top = `${dialog.node.offsetTop + topShift}px`
   }
+
+  return dialog
 };
 
 /**

From 6afc699c0ee13a030f6fb89b019adb5ec5f05177 Mon Sep 17 00:00:00 2001
From: Robert Hurst <robert.hurst@geolytix.co.uk>
Date: Fri, 27 Sep 2024 06:57:51 +0200
Subject: [PATCH 24/31] test updates

---
 tests/lib/ui/elements/alert.test.mjs   | 24 +++++++++++-------------
 tests/lib/ui/elements/confirm.test.mjs |  8 ++++----
 tests/lib/ui/elements/dialog.test.mjs  | 10 ++++------
 3 files changed, 19 insertions(+), 23 deletions(-)

diff --git a/tests/lib/ui/elements/alert.test.mjs b/tests/lib/ui/elements/alert.test.mjs
index d5d8a7421..f46ace605 100644
--- a/tests/lib/ui/elements/alert.test.mjs
+++ b/tests/lib/ui/elements/alert.test.mjs
@@ -11,51 +11,49 @@ export async function alertTest() {
 
         // Test providing params
         await codi.describe('Should create an alert with params provided', async () => {
-            mapp.ui.elements.alert({ title: 'ALERT TITLE', text: 'ALERT TEXT' });
+            const alert = await mapp.ui.elements.alert({ title: 'ALERT TITLE', text: 'ALERT TEXT' });
+
+            console.log(alert);
 
-            // Get the alert element
-            const alert = document.querySelector('body > dialog');
             codi.assertTrue(alert !== undefined, 'We expect to see the alert element');
 
             await codi.it('Should have a title of ALERT TITLE', async () => {
                 // Get the alert title
-                const alert_title = alert.querySelector('h4').textContent;
+                const alert_title = alert.header.values[0];
                 codi.assertEqual(alert_title, 'ALERT TITLE', 'We expect to see the alert title');
 
             });
 
             await codi.it('Should have a text of ALERT TEXT', async () => {
                 // Get the alert text
-                const alert_text = alert.querySelector('p').textContent;
+                const alert_text = alert.content.values[0];
                 codi.assertEqual(alert_text, 'ALERT TEXT', 'We expect to see the alert text');
             })
             // Close the alert 
-            alert.remove();
+            alert.close();
 
         });
 
         // Test providing no params
         await codi.describe('Should create an alert with no params provided', async () => {
-            mapp.ui.elements.alert({});
+            const alert = await mapp.ui.elements.alert({});
 
-            // Get the alert element
-            const alert = document.querySelector('body > dialog');
             codi.assertTrue(alert !== undefined, 'We expect to see the alert element');
 
             await codi.it('Should have a title of Information', async () => {
                 // Get the alert title
-                const alert_title = alert.querySelector('h4').textContent;
+                const alert_title = alert.header.values[0];
                 codi.assertEqual(alert_title, 'Information', 'We expect to see the alert title');
 
             });
 
             await codi.it('Should have no text', async () => {
                 // Get the alert text
-                const alert_text = alert.querySelector('p').textContent;
-                codi.assertEqual(alert_text, '', 'We expect to see no alert text');
+                const alert_text = alert.content.values[0];
+                codi.assertEqual(alert_text, undefined, 'We expect to see no alert text');
             })
             // Close the alert 
-            alert.remove();
+            alert.close();
 
         });
 
diff --git a/tests/lib/ui/elements/confirm.test.mjs b/tests/lib/ui/elements/confirm.test.mjs
index e2a12f805..3f0665dc7 100644
--- a/tests/lib/ui/elements/confirm.test.mjs
+++ b/tests/lib/ui/elements/confirm.test.mjs
@@ -34,11 +34,11 @@ export async function confirmTest() {
             const confirm_buttons = confirm.querySelectorAll('button');
 
             await codi.it('Should have an OK button', async () => {
-                codi.assertEqual(confirm_buttons[0].innerText, 'OK', 'We expect to see the OK button');
+                codi.assertEqual(confirm_buttons[1].innerText, 'OK', 'We expect to see the OK button');
             })
 
             await codi.it('Should have a Cancel button', async () => {
-                codi.assertEqual(confirm_buttons[1].innerText, 'Cancel', 'We expect to see the Cancel button');
+                codi.assertEqual(confirm_buttons[2].innerText, 'Cancel', 'We expect to see the Cancel button');
             });
 
             // Close the confirm 
@@ -71,11 +71,11 @@ export async function confirmTest() {
             const confirm_buttons = confirm.querySelectorAll('button');
 
             await codi.it('Should have an OK button', async () => {
-                codi.assertEqual(confirm_buttons[0].innerText, 'OK', 'We expect to see the OK button');
+                codi.assertEqual(confirm_buttons[1].innerText, 'OK', 'We expect to see the OK button');
             })
 
             await codi.it('Should have a Cancel button', async () => {
-                codi.assertEqual(confirm_buttons[1].innerText, 'Cancel', 'We expect to see the Cancel button');
+                codi.assertEqual(confirm_buttons[2].innerText, 'Cancel', 'We expect to see the Cancel button');
             });
 
             // Close the confirm 
diff --git a/tests/lib/ui/elements/dialog.test.mjs b/tests/lib/ui/elements/dialog.test.mjs
index f24e622f1..25a33ba71 100644
--- a/tests/lib/ui/elements/dialog.test.mjs
+++ b/tests/lib/ui/elements/dialog.test.mjs
@@ -22,18 +22,16 @@ export async function dialogTest() {
                 contained: true
             };
 
-            mapp.ui.elements.dialog(params);
-            let dialog = document.querySelector('#Map > dialog');
+            const dialog = mapp.ui.elements.dialog(params);
 
             /**
              * The dialog should be able to close
              * @function it
              */
             await codi.it('Dialog should be able to close', async () => {
-                const closeBtn = dialog.childNodes[1];
-                closeBtn.click();
-                dialog = document.querySelector('#Map > dialog');
-                codi.assertEqual(dialog, undefined, 'The dialog should be removed from the DOM on close');
+                dialog.close();
+                const dialog_element = document.querySelector('#Map > dialog');
+                codi.assertEqual(dialog_element, null, 'The dialog should be removed from the DOM on close');
             });
         });
     });

From eb8e76a5a143a468997497404660054d06b9c1a9 Mon Sep 17 00:00:00 2001
From: Agata Brok <cityremade@users.noreply.github.com>
Date: Fri, 27 Sep 2024 12:11:19 +0200
Subject: [PATCH 25/31] Click propagation changes;

---
 lib/ui/elements/alert.mjs   |  8 +++++---
 lib/ui/elements/confirm.mjs | 12 ++++++++----
 lib/ui/elements/dialog.mjs  | 10 ++++++----
 3 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/lib/ui/elements/alert.mjs b/lib/ui/elements/alert.mjs
index ce11d161f..449a7dc03 100644
--- a/lib/ui/elements/alert.mjs
+++ b/lib/ui/elements/alert.mjs
@@ -35,14 +35,16 @@ export default function alert(params) {
 
   params.class ??= 'alert-confirm'
 
+  params.hideCloseBtn = true
+
   params.closeOnClick = true
 
   params.header = mapp.utils.html`
-    <h4>${params.title}`
+    <h4 onclick=${e => { e.stopPropagation() }}>${params.title}`
 
   params.content = mapp.utils.html`
-    <p>${params.text}</p>
-    <div class="buttons">
+    <p onclick=${e => { e.stopPropagation() }}>${params.text}</p>
+    <div onclick=${e => { e.stopPropagation() }} class="buttons">
       <button 
         class="raised primary-colour bold"
         style="grid-column: 1/3; margin: 0 5em;"
diff --git a/lib/ui/elements/confirm.mjs b/lib/ui/elements/confirm.mjs
index 12e2a4b1d..5f2d1b037 100644
--- a/lib/ui/elements/confirm.mjs
+++ b/lib/ui/elements/confirm.mjs
@@ -40,8 +40,12 @@ export default function confirm(params) {
     params.title ??= `${mapp.dictionary.confirm}`;
 
     params.data_id ??= 'confirm'
-  
-    params.header = mapp.utils.html`<h4>${params.title}`
+
+    params.hideCloseBtn = true
+
+    params.header = mapp.utils.html`<h4 onclick=${(e) => { 
+      e.stopPropagation()
+    }}>${params.title}`
   
     const btn_true = mapp.utils.html`<button 
       onclick=${e => {
@@ -62,8 +66,8 @@ export default function confirm(params) {
       ${mapp.dictionary.cancel}`
   
     params.content ??= mapp.utils.html`
-      <p>${params.text}</p>
-      <div class="buttons">
+      <p onclick=${(e) => { e.stopPropagation() }}>${params.text}</p>
+      <div onclick=${(e) => { e.stopPropagation() }} class="buttons">
         ${btn_true}  
         ${btn_false}`
   
diff --git a/lib/ui/elements/dialog.mjs b/lib/ui/elements/dialog.mjs
index 2b039f4b7..b6c769b4e 100644
--- a/lib/ui/elements/dialog.mjs
+++ b/lib/ui/elements/dialog.mjs
@@ -30,8 +30,9 @@ const dialog = mapp.ui.elements.dialog({
 @property {string} [dialog.header] The HTML content for the dialog header.
 @property {string} [dialog.content] The HTML content for the dialog body.
 @property {boolean} [dialog.modal] A flag to determine if its a Modal or Dialog.
-@property {Function} [dialog.close] A function called when the dialog is closed. The dialog element is closed and removed from DOM.
-@property {boolean} [dialog.closeOnClick] Optional parameter to close the dialog when backdrop or the dialog itself is clicked.
+@property {boolean} [dialog.hideCloseBtn] A flag to skip close button creation in the top right corner. Close button created by default.
+@property {Function} [dialog.close] A function called by default when the dialog is closed. The dialog element is closed and removed from DOM.
+@property {boolean} [dialog.closeOnClick] Optional parameter to close the dialog when backdrop or the dialog itself is clicked. In order to prevent unwanted behaviour use .stopPropagation() on custom elements within dialog header and content.
 @property {Function} [dialog.onClose] Optional function to run after dialog element is closed - uses onclose dialog event and overrides dialog.close().
 @property {number} [dialog.top] The top position of the dialog.
 @property {number} [dialog.left] The left position of the dialog.
@@ -55,7 +56,7 @@ export default function dialog(dialog) {
   // Close existing modal.
   document.querySelector('dialog.modal')?.close()
 
-  dialog.closeBtn ??= mapp.utils.html.node`
+  dialog.closeBtn ??= dialog.hideCloseBtn ? `` : mapp.utils.html.node`
     <button
       data-id=close
       class="mask-icon close"
@@ -75,8 +76,8 @@ export default function dialog(dialog) {
         dialog.close()
       }}
       onclick=${e => {
+         e.stopPropagation()
         if(dialog.closeOnClick) {
-          e.stopPropagation()
           if(dialog.onClose instanceof Function) return dialog.onClose(e)
           dialog.close()
         }
@@ -123,6 +124,7 @@ export default function dialog(dialog) {
 
   // Function to handle the dialog closure
   function closeDialog(e) {
+    e.stopPropagation();
     if (dialog.onClose instanceof Function) return dialog.onClose()
     dialog.close();
   }

From 7bb0b498987c52ee512dae61c9cdd8dc926bb12e Mon Sep 17 00:00:00 2001
From: dbauszus-glx <dennis.bauszus@geolytix.co.uk>
Date: Fri, 27 Sep 2024 15:03:37 +0100
Subject: [PATCH 26/31] closeBtn

---
 lib/ui/elements/alert.mjs   |  2 --
 lib/ui/elements/confirm.mjs |  2 --
 lib/ui/elements/dialog.mjs  | 15 +++++++++------
 3 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/lib/ui/elements/alert.mjs b/lib/ui/elements/alert.mjs
index 449a7dc03..e26447f9e 100644
--- a/lib/ui/elements/alert.mjs
+++ b/lib/ui/elements/alert.mjs
@@ -35,8 +35,6 @@ export default function alert(params) {
 
   params.class ??= 'alert-confirm'
 
-  params.hideCloseBtn = true
-
   params.closeOnClick = true
 
   params.header = mapp.utils.html`
diff --git a/lib/ui/elements/confirm.mjs b/lib/ui/elements/confirm.mjs
index 5f2d1b037..791ea828b 100644
--- a/lib/ui/elements/confirm.mjs
+++ b/lib/ui/elements/confirm.mjs
@@ -41,8 +41,6 @@ export default function confirm(params) {
 
     params.data_id ??= 'confirm'
 
-    params.hideCloseBtn = true
-
     params.header = mapp.utils.html`<h4 onclick=${(e) => { 
       e.stopPropagation()
     }}>${params.title}`
diff --git a/lib/ui/elements/dialog.mjs b/lib/ui/elements/dialog.mjs
index b6c769b4e..f171fa2f7 100644
--- a/lib/ui/elements/dialog.mjs
+++ b/lib/ui/elements/dialog.mjs
@@ -30,7 +30,7 @@ const dialog = mapp.ui.elements.dialog({
 @property {string} [dialog.header] The HTML content for the dialog header.
 @property {string} [dialog.content] The HTML content for the dialog body.
 @property {boolean} [dialog.modal] A flag to determine if its a Modal or Dialog.
-@property {boolean} [dialog.hideCloseBtn] A flag to skip close button creation in the top right corner. Close button created by default.
+@property {boolean} [dialog.closeBtn] The flag property will become the closeBtn element.
 @property {Function} [dialog.close] A function called by default when the dialog is closed. The dialog element is closed and removed from DOM.
 @property {boolean} [dialog.closeOnClick] Optional parameter to close the dialog when backdrop or the dialog itself is clicked. In order to prevent unwanted behaviour use .stopPropagation() on custom elements within dialog header and content.
 @property {Function} [dialog.onClose] Optional function to run after dialog element is closed - uses onclose dialog event and overrides dialog.close().
@@ -50,13 +50,13 @@ export default function dialog(dialog) {
     // The dialog must be modal if no target is provided.
     dialog.modal = true;
 
-    // Ensure the target is an HTMLElement before proceeding
+  // Ensure the target is an HTMLElement before proceeding
   } else if (!(dialog.target instanceof HTMLElement)) return;
 
   // Close existing modal.
   document.querySelector('dialog.modal')?.close()
 
-  dialog.closeBtn ??= dialog.hideCloseBtn ? `` : mapp.utils.html.node`
+  dialog.closeBtn &&= mapp.utils.html`
     <button
       data-id=close
       class="mask-icon close"
@@ -64,10 +64,13 @@ export default function dialog(dialog) {
 
   dialog.data_id ??= 'dialog'
 
-  // If headerDrag is true - add the headerDrag class to the dialog header
-  dialog.headerDrag && (dialog.header = mapp.utils.html.node`<header class="headerDrag">${dialog.header}</header>`);
+  if (dialog.headerDrag) {
 
-  let classList = `${dialog.modal ? 'modal' : 'dialog'} ${dialog.class || ''}`
+    dialog.header = mapp.utils.html.node`
+      <header class="headerDrag">${dialog.header}`
+  }
+
+  const classList = `${dialog.modal ? 'modal' : 'dialog'} ${dialog.class || ''}`
 
   dialog.node = mapp.utils.html.node`
     <dialog 

From 6fe6eadd0be1092adc3320ffedd43d3a4f612dfa Mon Sep 17 00:00:00 2001
From: dbauszus-glx <dennis.bauszus@geolytix.co.uk>
Date: Fri, 27 Sep 2024 15:28:55 +0100
Subject: [PATCH 27/31] propagation rodeo

---
 lib/ui/elements/alert.mjs   |  9 +++----
 lib/ui/elements/confirm.mjs | 16 ++++---------
 lib/ui/elements/dialog.mjs  | 47 ++++++++++++++-----------------------
 3 files changed, 25 insertions(+), 47 deletions(-)

diff --git a/lib/ui/elements/alert.mjs b/lib/ui/elements/alert.mjs
index e26447f9e..3ec72294c 100644
--- a/lib/ui/elements/alert.mjs
+++ b/lib/ui/elements/alert.mjs
@@ -35,19 +35,16 @@ export default function alert(params) {
 
   params.class ??= 'alert-confirm'
 
-  params.closeOnClick = true
-
   params.header = mapp.utils.html`
-    <h4 onclick=${e => { e.stopPropagation() }}>${params.title}`
+    <h4>${params.title}`
 
   params.content = mapp.utils.html`
-    <p onclick=${e => { e.stopPropagation() }}>${params.text}</p>
-    <div onclick=${e => { e.stopPropagation() }} class="buttons">
+    <p>${params.text}</p>
+    <div class="buttons">
       <button 
         class="raised primary-colour bold"
         style="grid-column: 1/3; margin: 0 5em;"
         onclick=${e => {
-          e.stopPropagation();
           e.target.closest('dialog').close();
         }}>${mapp.dictionary.ok}`
 
diff --git a/lib/ui/elements/confirm.mjs b/lib/ui/elements/confirm.mjs
index 791ea828b..90c87c175 100644
--- a/lib/ui/elements/confirm.mjs
+++ b/lib/ui/elements/confirm.mjs
@@ -41,13 +41,10 @@ export default function confirm(params) {
 
     params.data_id ??= 'confirm'
 
-    params.header = mapp.utils.html`<h4 onclick=${(e) => { 
-      e.stopPropagation()
-    }}>${params.title}`
-  
+    params.header = mapp.utils.html`<h4>${params.title}`
+ 
     const btn_true = mapp.utils.html`<button 
       onclick=${e => {
-        e.stopPropagation();
         e.target.closest('dialog').close();
         resolve(true);
       }}
@@ -56,7 +53,6 @@ export default function confirm(params) {
   
     const btn_false = mapp.utils.html`<button
       onclick=${e => {
-        e.stopPropagation();
         e.target.closest('dialog').close();
         resolve(false);
       }}
@@ -64,15 +60,13 @@ export default function confirm(params) {
       ${mapp.dictionary.cancel}`
   
     params.content ??= mapp.utils.html`
-      <p onclick=${(e) => { e.stopPropagation() }}>${params.text}</p>
-      <div onclick=${(e) => { e.stopPropagation() }} class="buttons">
+      <p>${params.text}</p>
+      <div class="buttons">
         ${btn_true}  
         ${btn_false}`
   
     params.class ??= 'alert-confirm'
-  
-    params.closeOnClick = true
-  
+   
     mapp.ui.elements.dialog(params)
   });
 }
diff --git a/lib/ui/elements/dialog.mjs b/lib/ui/elements/dialog.mjs
index f171fa2f7..a34a37c94 100644
--- a/lib/ui/elements/dialog.mjs
+++ b/lib/ui/elements/dialog.mjs
@@ -32,7 +32,6 @@ const dialog = mapp.ui.elements.dialog({
 @property {boolean} [dialog.modal] A flag to determine if its a Modal or Dialog.
 @property {boolean} [dialog.closeBtn] The flag property will become the closeBtn element.
 @property {Function} [dialog.close] A function called by default when the dialog is closed. The dialog element is closed and removed from DOM.
-@property {boolean} [dialog.closeOnClick] Optional parameter to close the dialog when backdrop or the dialog itself is clicked. In order to prevent unwanted behaviour use .stopPropagation() on custom elements within dialog header and content.
 @property {Function} [dialog.onClose] Optional function to run after dialog element is closed - uses onclose dialog event and overrides dialog.close().
 @property {number} [dialog.top] The top position of the dialog.
 @property {number} [dialog.left] The left position of the dialog.
@@ -56,12 +55,6 @@ export default function dialog(dialog) {
   // Close existing modal.
   document.querySelector('dialog.modal')?.close()
 
-  dialog.closeBtn &&= mapp.utils.html`
-    <button
-      data-id=close
-      class="mask-icon close"
-      onclick=${closeDialog}>`
-
   dialog.data_id ??= 'dialog'
 
   if (dialog.headerDrag) {
@@ -72,32 +65,26 @@ export default function dialog(dialog) {
 
   const classList = `${dialog.modal ? 'modal' : 'dialog'} ${dialog.class || ''}`
 
-  dialog.node = mapp.utils.html.node`
-    <dialog 
-      onclose=${e => {
-        if(dialog.onClose instanceof Function) return dialog.onClose(e)
-        dialog.close()
-      }}
-      onclick=${e => {
-         e.stopPropagation()
-        if(dialog.closeOnClick) {
-          if(dialog.onClose instanceof Function) return dialog.onClose(e)
-          dialog.close()
-        }
-      }}
-      style=${dialog.css_style}
-      data-id=${dialog.data_id}
-      class="${classList}">
-      ${dialog.closeBtn}
-      ${dialog.header}
-      ${dialog.content}`
-      
-  dialog.close = () => {
+  dialog.close = e => {
+    if(dialog.onClose instanceof Function) dialog.onClose(e)
     dialog.node.close()
     dialog.node.remove()
   }
-
-
+  
+  dialog.closeBtn &&= mapp.utils.html`<button
+    data-id=close
+    class="mask-icon close"
+    onclick=${closeDialog}>`  
+
+  dialog.node = mapp.utils.html.node`<dialog 
+    onclose=${dialog.close}
+    style=${dialog.css_style}
+    data-id=${dialog.data_id}
+    class="${classList}">
+    ${dialog.closeBtn}
+    ${dialog.header}
+    ${dialog.content}`
+      
   if (dialog.modal) {
 
     document.body.append(dialog.node)

From 320d82671bc3adc2f86405c3457ef98f6647bf77 Mon Sep 17 00:00:00 2001
From: Robert Hurst <robert.hurst@geolytix.co.uk>
Date: Fri, 27 Sep 2024 16:44:47 +0200
Subject: [PATCH 28/31] Update tests

---
 tests/lib/ui/elements/confirm.test.mjs | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/tests/lib/ui/elements/confirm.test.mjs b/tests/lib/ui/elements/confirm.test.mjs
index 3f0665dc7..e2a12f805 100644
--- a/tests/lib/ui/elements/confirm.test.mjs
+++ b/tests/lib/ui/elements/confirm.test.mjs
@@ -34,11 +34,11 @@ export async function confirmTest() {
             const confirm_buttons = confirm.querySelectorAll('button');
 
             await codi.it('Should have an OK button', async () => {
-                codi.assertEqual(confirm_buttons[1].innerText, 'OK', 'We expect to see the OK button');
+                codi.assertEqual(confirm_buttons[0].innerText, 'OK', 'We expect to see the OK button');
             })
 
             await codi.it('Should have a Cancel button', async () => {
-                codi.assertEqual(confirm_buttons[2].innerText, 'Cancel', 'We expect to see the Cancel button');
+                codi.assertEqual(confirm_buttons[1].innerText, 'Cancel', 'We expect to see the Cancel button');
             });
 
             // Close the confirm 
@@ -71,11 +71,11 @@ export async function confirmTest() {
             const confirm_buttons = confirm.querySelectorAll('button');
 
             await codi.it('Should have an OK button', async () => {
-                codi.assertEqual(confirm_buttons[1].innerText, 'OK', 'We expect to see the OK button');
+                codi.assertEqual(confirm_buttons[0].innerText, 'OK', 'We expect to see the OK button');
             })
 
             await codi.it('Should have a Cancel button', async () => {
-                codi.assertEqual(confirm_buttons[2].innerText, 'Cancel', 'We expect to see the Cancel button');
+                codi.assertEqual(confirm_buttons[1].innerText, 'Cancel', 'We expect to see the Cancel button');
             });
 
             // Close the confirm 

From 800aab7ac2036caf1519f3de2819a30585f3865d Mon Sep 17 00:00:00 2001
From: Robert Hurst <robert.hurst@geolytix.co.uk>
Date: Fri, 27 Sep 2024 16:49:36 +0200
Subject: [PATCH 29/31] Update dialog test

---
 tests/lib/ui/elements/dialog.test.mjs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/lib/ui/elements/dialog.test.mjs b/tests/lib/ui/elements/dialog.test.mjs
index 25a33ba71..8e5a1bef3 100644
--- a/tests/lib/ui/elements/dialog.test.mjs
+++ b/tests/lib/ui/elements/dialog.test.mjs
@@ -13,7 +13,7 @@ export async function dialogTest() {
 
             const params = {
                 target: document.getElementById('Map'),
-                close: true,
+                closeBtn: true,
                 headerDrag: true,
                 header: 'I am a header',
                 content: 'I am so content',

From 5d0a22fb662efa329962bda8b1ba781c4cccf4e5 Mon Sep 17 00:00:00 2001
From: dbauszus-glx <dennis.bauszus@geolytix.co.uk>
Date: Fri, 27 Sep 2024 15:50:05 +0100
Subject: [PATCH 30/31] close dialog

---
 lib/ui/elements/dialog.mjs | 21 ++++++++-------------
 1 file changed, 8 insertions(+), 13 deletions(-)

diff --git a/lib/ui/elements/dialog.mjs b/lib/ui/elements/dialog.mjs
index a34a37c94..b2a047ffc 100644
--- a/lib/ui/elements/dialog.mjs
+++ b/lib/ui/elements/dialog.mjs
@@ -65,19 +65,21 @@ export default function dialog(dialog) {
 
   const classList = `${dialog.modal ? 'modal' : 'dialog'} ${dialog.class || ''}`
 
-  dialog.close = e => {
-    if(dialog.onClose instanceof Function) dialog.onClose(e)
-    dialog.node.close()
-    dialog.node.remove()
+  function closeDialog(e) {
+    if (dialog.onClose instanceof Function) {
+      dialog.onClose(e)
+    }
   }
+
+  dialog.close = closeDialog
   
   dialog.closeBtn &&= mapp.utils.html`<button
     data-id=close
     class="mask-icon close"
-    onclick=${closeDialog}>`  
+    onclick=${closeDialog}>`
 
   dialog.node = mapp.utils.html.node`<dialog 
-    onclose=${dialog.close}
+    onclose=${closeDialog}
     style=${dialog.css_style}
     data-id=${dialog.data_id}
     class="${classList}">
@@ -112,13 +114,6 @@ export default function dialog(dialog) {
     resizeObserver.observe(dialog.target);
   }
 
-  // Function to handle the dialog closure
-  function closeDialog(e) {
-    e.stopPropagation();
-    if (dialog.onClose instanceof Function) return dialog.onClose()
-    dialog.close();
-  }
-
   // Function to handle the start of a drag event, setting up the necessary event listeners for moving and ending the drag
   function handleStartEvent(e) {
 

From 21d4c7db56c90d6ae7d4a2a0fa9fbfefd65bbdaf Mon Sep 17 00:00:00 2001
From: dbauszus-glx <dennis.bauszus@geolytix.co.uk>
Date: Fri, 27 Sep 2024 15:52:47 +0100
Subject: [PATCH 31/31] dialog.node.remove

---
 lib/ui/elements/dialog.mjs | 1 +
 1 file changed, 1 insertion(+)

diff --git a/lib/ui/elements/dialog.mjs b/lib/ui/elements/dialog.mjs
index b2a047ffc..0435f7c2a 100644
--- a/lib/ui/elements/dialog.mjs
+++ b/lib/ui/elements/dialog.mjs
@@ -69,6 +69,7 @@ export default function dialog(dialog) {
     if (dialog.onClose instanceof Function) {
       dialog.onClose(e)
     }
+    dialog.node.remove()
   }
 
   dialog.close = closeDialog