src/assets/img/geocoder.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
\ No newline at end of file

src/assets/img/layers.svg

+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" 
+    xmlns="http://www.w3.org/2000/svg" 
+    xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 491.203 491.203" style="enable-background:new 0 0 491.203 491.203;" xml:space="preserve">
+    <g>
+        <g>
+            <path d="M487.298,326.733l-62.304-37.128l62.304-37.128c2.421-1.443,3.904-4.054,3.904-6.872s-1.483-5.429-3.904-6.872
+			l-62.304-37.128l62.304-37.128c3.795-2.262,5.038-7.172,2.776-10.968c-0.68-1.142-1.635-2.096-2.776-2.776l-237.6-141.6
+			c-2.524-1.504-5.669-1.504-8.192,0l-237.6,141.6c-3.795,2.262-5.038,7.172-2.776,10.968c0.68,1.142,1.635,2.096,2.776,2.776
+			l62.304,37.128L3.905,238.733c-3.795,2.262-5.038,7.172-2.776,10.968c0.68,1.142,1.635,2.096,2.776,2.776l62.304,37.128
+			L3.905,326.733c-3.795,2.262-5.038,7.172-2.776,10.968c0.68,1.142,1.635,2.096,2.776,2.776l237.6,141.6
+			c2.526,1.494,5.666,1.494,8.192,0l237.6-141.6c3.795-2.262,5.038-7.172,2.776-10.968
+			C489.393,328.368,488.439,327.414,487.298,326.733z M23.625,157.605L245.601,25.317l221.976,132.288L245.601,289.893
+			L23.625,157.605z M23.625,245.605l58.208-34.68l159.672,95.2c2.524,1.504,5.668,1.504,8.192,0l159.672-95.2l58.208,34.68
+			L245.601,377.893L23.625,245.605z M245.601,465.893L23.625,333.605l58.208-34.68l159.672,95.2c2.524,1.504,5.668,1.504,8.192,0
+			l159.672-95.2l58.208,34.68L245.601,465.893z"/>
+        </g>
+    </g>
+
+</svg>
\ No newline at end of file

src/assets/js/utils.js

+export function fileConvertSize(aSize){
+  aSize = Math.abs(parseInt(aSize, 10));
+  const def = [[1, 'octets', 0], [1024, 'ko', 0], [1024*1024, 'Mo', 1], [1024*1024*1024, 'Go', 2], [1024*1024*1024*1024, 'To', 2]];
+  for (let i=0; i<def.length; i++) {
+    if (aSize<def[i][0]) {
+      return (aSize/def[i-1][0]).toFixed(def[i-1][2]) + ' ' + def[i-1][1];
+    }
+  }
+}
+
+export function fileConvertSizeToMo(aSize){
+  aSize = Math.abs(parseInt(aSize, 10));
+  const def = [1024*1024, 'Mo', 1];
+  return (aSize/def[0]).toFixed(def[2]);
+}
+
+/**
+ * Determines the likely field delimiter in a CSV string by analyzing the first few lines.
+ * The function counts the occurrences of common delimiters such as commas, semicolons, and tabs.
+ * The most frequently and consistently occurring delimiter across the sampled lines is chosen as the likely delimiter.
+ *
+ * @param {string} text - The CSV string to analyze for determining the delimiter.
+ * @returns {string|false} The most likely delimiter character if one can be determined, or false if none is found.
+ */
+export function determineDelimiter(text) {
+  const lines = text.split('\n').slice(0, 5); // Analyze the first 5 lines
+  const delimiters = [',', ';', '\t']; // List of possible delimiters
+  let delimiterCounts = new Map(delimiters.map(d => [d, 0])); // Initialize a map to count delimiter occurrences
+
+  // Count the occurrences of each delimiter in each line
+  lines.forEach(line => {
+    delimiters.forEach(delimiter => {
+      const count = line.split(delimiter).length - 1; // Count the occurrences of the delimiter in the line
+      delimiterCounts.set(delimiter, delimiterCounts.get(delimiter) + count); // Update the count in the map
+    });
+  });
+
+  let mostCommonDelimiter = '';
+  let maxCount = 0;
+
+  // Determine the most common delimiter
+  delimiterCounts.forEach((count, delimiter) => {
+    if (count > maxCount) {
+      mostCommonDelimiter = delimiter; // Set the most common delimiter found so far
+      maxCount = count; // Update the maximum count found so far
+    }
+  });
+
+  return mostCommonDelimiter || false; // Return the most common delimiter or false if none is found
+}
+
+/**
+ * Parses a CSV string into an array of rows, where each row is an array of fields.
+ * The function correctly handles multiline fields enclosed in double quotes, removes
+ * carriage return characters (\r) at the end of lines, and allows for different field
+ * delimiters.
+ * 
+ * @param {string} text - The CSV string to be parsed.
+ * @param {string} delimiter - The field delimiter character (default is comma ',').
+ * @returns {Array<Array<string>>} An array of rows, each row being an array of fields.
+ */
+export function parseCSV(text, delimiter = ',') {
+  let rows = [];     // This will hold the parsed rows
+  let row = [];      // Temporary array to hold the fields of the current row
+  let field = '';    // Temporary string to hold the current field
+  let inQuotes = false; // Boolean to track whether we are inside quotes
+
+  for (let i = 0; i < text.length; i++) {
+    const char = text[i]; // Current character
+
+    if (char === '"' && text[i - 1] !== '\\') {
+      inQuotes = !inQuotes; // Toggle the inQuotes flag if not escaped
+    } else if (char === delimiter && !inQuotes) {
+      // If the current character is the delimiter and we are not inside quotes,
+      // add the field to the row and reset the field variable
+      row.push(field.replace(/\r$/, '')); // Remove trailing carriage return
+      field = '';
+    } else if (char === '\n' && !inQuotes) {
+      // If the current character is a newline and we are not inside quotes,
+      // add the field to the row, add the row to the list of rows,
+      // and reset the field and row variables
+      row.push(field.replace(/\r$/, '')); // Remove trailing carriage return
+      rows.push(row);
+      row = [];
+      field = '';
+    } else {
+      // If the current character is part of a field, add it to the field variable
+      field += char;
+    }
+  }
+
+  // After the loop, check if there's a remaining field or row to be added
+  if (field) {
+    row.push(field.replace(/\r$/, '')); // Remove trailing carriage return
+    rows.push(row);
+  }
+
+  return rows; // Return the parsed rows
+}
+
+/**
+ * Checks if the values in 'lon' and 'lat' columns are decimal numbers in the provided CSV data.
+ *
+ * @param {Array<string>} headers - The array of headers from the CSV file.
+ * @param {Array<Array<string>>} data - The CSV data as an array of rows, each row being an array of field values.
+ * @returns {boolean} True if 'lon' and 'lat' are found and their values are decimal numbers, false otherwise.
+ */
+export function checkLonLatValues(headers, data) {
+  const lonIndex = headers.indexOf('lon');
+  const latIndex = headers.indexOf('lat');
+
+  // Check if both 'lon' and 'lat' headers are found
+  if (lonIndex === -1 || latIndex === -1) {
+    return false;
+  }
+
+  // Function to check if a string is a decimal number
+  const isDecimal = (str) => !isNaN(str) && str.includes('.');
+
+  for (const row of data) {
+    // Check if 'lon' and 'lat' values are decimal numbers
+    if (!isDecimal(row[lonIndex]) || !isDecimal(row[latIndex])) {
+      return false;
+    }
+  }
+
+  return true;
+}

src/assets/styles/base.css

 /* ---------------------------------- */
-            /* HEADER */
+/* APP */
 /* ---------------------------------- */
 
-header {
-  background: #373636;
+body {
+  height: 100%;
+  width: 100%;
+  margin: 0;
+}
+
+#app {
+  position: relative;
+  min-height: 100vh;
+  /* keep the space for loader, before page contents are injected */
+  display: flex;
+  /* used to fix height on sticky header and footer */
+  flex-direction: column;
+  /* used to fix height on sticky header and footer */
+}
+
+#app-header {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: var(--header-color, #373636);
+
+  .ui.inverted.menu {
+    background: var(--header-color, #373636);
+  }
+
+  .item {
+    background: var(--header-color, #373636);
+  }
+}
+
+#app-content {
+  overflow: auto;
+  flex: 1 0 auto;
+  /* used to fix height on sticky header and footer */
+  min-height: 61px;
+  /* value by default of the header, defined here to be sync with anchor below, in order to keep the page stuck to top */
+  position: relative;
+  /* for anchor below */
+}
+
+#scroll-top-anchor {
+  position: absolute;
+  top: -61px;
+  visibility: hidden;
+}
+
+
+.page-content {
+  max-width: 1200px;
+  padding: 0 2em;
+  margin: 2em auto;
+}
+
+#map {
+  width: 100%;
+  height: 100%;
+  min-height: 250px;
+  touch-action: none;
+  /* workaround for modifying feature on mobile */
+}
+
+#app-footer {
+  overflow: hidden;
+  background-color: #464646;
+  text-align: center;
+  flex-shrink: 0;
+  /* used to fix height on sticky header and footer */
+  position: sticky;
+  bottom: 0;
+  z-index: 1000;
+}
+
+#app-footer .ui.text.menu {
+  min-height: 30px !important;
+}
+
+#app-footer .ui.text.menu .item {
+  color: #ffffff;
+  padding: 5px 14px;
+}
+
+#app-footer .ui.text.menu a.item:hover {
+  color: var(--primary-color, #008c86);
+}
+
+#app-footer .ui.text.menu .item:not(:first-child) {
+  border-left: 1px solid rgba(34, 36, 38, .15);
+}
+
+/* ---------------------------------- */
+/* UTILS */
+/* ---------------------------------- */
+.inline {
+  display: inline;
+}
+
+.no-margin {
+  margin: 0 !important;
+}
+
+.margin-top {
+  margin-top: 1rem;
+}
+
+.margin-bottom {
+  margin-bottom: 1rem;
 }
 
-main {
-  padding: 2em 0em;
+.tiny-margin {
+  margin: 0.1rem 0 0.1rem 0.1rem !important;
+}
+
+.tiny-margin-left {
+  margin-left: 0.1rem !important;
+}
+
+.ellipsis {
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.nowrap {
+  white-space: nowrap;
+}
+
+.important-flex {
+  display: flex !important;
+}
+
+.pointer:hover {
+  cursor: pointer !important;
+}
+
+.dimmer-anchor {
+  position: relative;
+}
+
+.full-width {
+  width: 100%;
 }
 
 /* ---------------------------------- */
-            /* MAIN */
+/* MAIN */
 /* ---------------------------------- */
 
 .button-hover-orange:hover {
   background: #fbbd08 !important;
 }
+
 .button-hover-green:hover {
   background: #5bba21 !important;
 }
+
 .button-hover-red:hover {
   background: #ee2e24 !important;
 }
 
+.ui.button.button-hover-red:hover,
+.ui.button.button-hover-red:hover i.icon,
+.ui.button.button-hover-green:hover,
+.ui.button.button-hover-green:hover i.icon {
+  color: #fff !important;
+}
+
+.ui.button.button-hover-red:hover i.icon,
+.ui.button.button-hover-green:hover i.icon {
+  transition: all 0.5s ease !important;
+}
+
 .ui.header .content {
   width: 100%;
 }
 
 .ui.horizontal.divider {
-  color: #1ab2b6!important;
+  color: var(--primary-color, #008c86) !important;
   padding-top: 1.5em;
 }
 
@@ -37,7 +185,7 @@ main {
   display: none;
 }
 
-.ui.dropdown .menu > .header {
+.ui.dropdown .menu>.header {
   font-size: 1em;
   text-transform: none;
 }
@@ -47,23 +195,33 @@ main {
   overflow: auto;
 }
 
-.ui.dropdown .menu.text-wrap > .item {
+.ui.dropdown .menu.text-wrap>.item {
   white-space: normal;
   word-wrap: normal;
 }
 
+.ui.checkbox.disabled>input {
+  cursor: default !important;
+}
+
 
 /* Add basemap view */
-#form-layers .ui.buttons{
-  margin-bottom: 1rem;
+#form-layers button.button:not(:last-of-type) {
+  margin-right: 0.5em !important;
 }
 
-#form-layers .errorlist{
+#form-layers .errorlist {
   list-style: none;
   padding-left: 0;
   color: #9f3a38;
 }
 
+#form-layers .infoslist {
+  list-style: none;
+  padding-left: 0;
+  color: #38989f;
+}
+
 /* Fix semantic ui overflow when is too long */
 .layer-item .form div.text {
   width: 100%
@@ -79,9 +237,9 @@ main {
 }
 
 /* Thicker borders for each basemap segment */
-#form-layers [data-segments=basemap_set-SEGMENTS] > .ui.segment {
+#form-layers [data-segments=basemap_set-SEGMENTS]>.ui.segment {
   margin-bottom: 3rem;
-  border: 1px solid rgba(34,36,38,.30);
+  border: 1px solid rgba(34, 36, 38, .30);
 }
 
 
@@ -99,59 +257,202 @@ main {
   opacity: 0.9;
 }
 
-/*  */
 
 /* ---------------------------------- */
-      /* LEAFLET DRAW TOOLBAR */
+/* LEAFLET DRAW TOOLBAR */
 /* ---------------------------------- */
 
 .leaflet-draw-toolbar a.leaflet-draw-draw-circlemarker,
 .leaflet-draw-toolbar a.leaflet-draw-draw-polyline,
 .leaflet-draw-toolbar a.leaflet-draw-draw-polygon {
-    background-color: #FFA19E;
+  background-color: #FFA19E;
+}
+
+/* ---------------------------------- */
+/* ERROR LIST */
+/* ---------------------------------- */
+.errorlist {
+  margin-top: 1rem;
+  padding: 0;
 }
 
+.infoslist {
+  margin-top: 0.1rem;
+  padding: 0;
+}
+
+.errorlist>li {
+  list-style: none;
+  color: rgb(177, 55, 55);
+  border: thin solid rgb(197, 157, 157);
+  border-radius: 3px;
+  background-color: rgb(250, 241, 242);
+  padding: 0.5rem 1rem;
+}
+
+.infoslist>li {
+  list-style: none;
+  color: #38989f;
+  border-radius: 3px;
+  padding: 0;
+  text-align: right;
+}
 
 /* ---------------------------------- */
-      /* LEAFLET*/
+/* PAGINATION */
 /* ---------------------------------- */
-.leaflet-container {
-  background: #FFF;
+
+.custom-pagination {
+  display: flex;
+  align-items: center;
+  list-style: none;
+  font-size: 1.2em;
+}
+
+.custom-pagination>.page-item>.page-link {
+  border: none;
+  font-weight: 400;
+  color: #008080;
+}
+
+.custom-pagination>.page-item.active>.page-link {
+  color: #008080;
+  background-color: transparent;
+  font-weight: bolder;
+  text-shadow: 0 0 2px #008080;
+  padding: 0.325em 0.75em;
+  pointer-events: none;
+}
+
+.custom-pagination>.page-item.disabled>.page-link {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.custom-pagination>div>.page-item>.page-link {
+  border: none;
+  font-weight: 400;
+  color: #008080;
+  padding: 0.325em 0.75em;
+}
+
+.custom-pagination>div>.page-item.active>.page-link {
+  color: #008080;
+  background-color: transparent;
+  font-weight: bolder;
+  font-size: 1.2em;
+  text-shadow: 0 0 2px #008080;
+  padding: 0.325em 0.75em;
+  pointer-events: none;
+}
+
+.custom-pagination>div>.page-item.disabled>.page-link {
+  opacity: 0.5;
+  padding: 0.325em 0.75em;
+  pointer-events: none;
 }
 
 /* ---------------------------------- */
-            /* FOOTER */
+/* MULTISELECT */
 /* ---------------------------------- */
-footer {
-  background-color: #464646;
+.multiselect {
+  font-family: var(--font-family, 'Roboto Condensed', 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif) !important;
+}
+
+.multiselect__tags {
+  border: 1px solid #ced4da;
+  border-radius: 0 !important;
+  font-family: var(--font-family, 'Roboto Condensed', 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif) !important;
+  font-size: 1rem !important;
+}
+
+.multiselect__tags>.multiselect__input {
+  border: none !important;
+  font-size: 1rem !important;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.multiselect__placeholder {
+  color: #838383;
+  margin-bottom: 0px;
+  padding-top: 0;
+}
+
+.multiselect__single,
+.multiselect__tags,
+.multiselect__content,
+.multiselect__option {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  max-width: 100%;
+  background-color: #fff;
+  font-size: 1rem !important;
+}
+
+.multiselect__select {
+  z-index: 1 !important;
+}
+
+.multiselect__content-wrapper {
+  box-shadow: 0 2px 3px 0 rgba(34, 36, 38, .15);
+}
+
+.multiselect__clear {
+  position: absolute;
+  right: 1px;
+  top: 8px;
+  width: 40px;
+  display: block;
+  cursor: pointer;
+  z-index: 9;
+  background-color: #fff;
+  padding: 0 4px;
   text-align: center;
 }
 
-footer .ui.text.menu .item {
-  color: #ffffff;
-  padding: 5px 14px;
+.multiselect__spinner {
+  z-index: 2 !important;
+  background-color: #fff;
+  opacity: 1;
+  top: 2px;
 }
 
-footer .ui.text.menu a.item:hover {
-  color: #1ab2b6;
+.menu.projects>.item>.multiselect {
+  min-height: 0px !important;
 }
 
-footer .ui.text.menu .item:not(:first-child) {
-    border-left: 1px solid rgba(34,36,38,.15);
+.menu.projects>.item>.multiselect>.multiselect__tags {
+  min-height: 0px !important;
 }
+
+.multiselect__option--selected {
+  background: #fff !important;
+  color: #35495e !important;
+}
+
+.multiselect__option--highlight {
+  background: #f3f3f3 !important;
+  color: #35495e !important;
+}
+
+.multiselect__option--selected.multiselect__option--highlight {
+  background: #f3f3f3 !important;
+  color: #35495e !important;
+}
+
+.multiselect__clear i.icon {
+  font-size: .75em;
+  color: #999;
+  margin: 0;
+}
+
 /* ---------------------------------- */
-      /* ERROR LIST */
+/* OVERRIDE SEMANTIC STYLES */
 /* ---------------------------------- */
-.errorlist {
-  margin-top: 1rem;
-  padding: 0;
-}
 
-.errorlist > li {
-  list-style: none;
-  color: rgb(177, 55, 55);
-  border:  thin solid rgb(197, 157, 157);
-  border-radius: 3px;
-  background-color: rgb(250, 241, 242);
-  padding: 1rem;
+.ui.page.dimmer {
+  /* keep the dimmer above the dropdown (z-index 1001: above the map)*/
+  z-index: 1002;
 }
\ No newline at end of file

src/assets/styles/openlayers-custom.css

+/* OPENLAYERS */
+.ol-zoom{
+  right: 5px !important;
+  left:unset !important;
+}
+ 
+.ol-popup {
+  position: absolute;
+  background-color: white;
+  padding: 15px 5px 15px 15px;
+  border-radius: 10px;
+  bottom: 12px;
+  left: -120px;
+  width: 240px;
+  line-height: 1.4;
+  -webkit-box-shadow: 0 3px 14px rgba(0,0,0,.4);
+  box-shadow: 0 3px 14px rgba(0,0,0,.4);
+}
+
+.ol-popup #popup-content {
+  line-height: 1.3;
+  font-size: .95em;
+}
+.ol-popup #popup-content h4 {
+  margin-right: 15px;
+  margin-bottom: .5em;
+  color: #cacaca;
+}
+.ol-popup #popup-content h4,
+.ol-popup #popup-content div {
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.ol-popup #popup-content div {
+  color: #434343;
+}
+.ol-popup #popup-content .fields {
+  max-height: 200px;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  padding-right: 10px;
+  display: block; /* overide .ui.form.fields rule conflict in featureEdit page */
+  margin: 0; /* overide .ui.form.fields rule conflict in featureEdit page */
+}
+.ol-popup #popup-content .divider {
+  margin-bottom: 0;
+}
+.ol-popup #popup-content #customFields h5 {
+  max-height: 20;
+  margin: .5em 0;
+}
+
+.ol-popup:after, .ol-popup:before {
+  top: 100%;
+  border: solid transparent;
+  content: " ";
+  height: 0;
+  width: 0;
+  position: absolute;
+  pointer-events: none;
+}
+.ol-popup:after {
+  border-top-color: white;
+  border-width: 10px;
+  left: 50%;
+  margin-left: -10px;
+}
+.ol-popup:before {
+  border-top-color: #cccccc;
+  border-width: 11px;
+  left: 50%;
+  margin-left: -11px;
+}
+.ol-popup-closer {
+  text-decoration: none;
+  position: absolute;
+  top: 4px;
+  right: 0;
+  width: 24px;
+  height: 24px;
+  font: 18px/24px Tahoma,Verdana,sans-serif;
+  color: #757575;
+}
+.ol-popup-closer:after {
+  content: "×";
+}
+.ol-scale-line {
+  left: 2em;
+  background: hsla(0,0%,100%,.5);
+  padding: 0;
+}
+.ol-scale-line-inner {
+  color: #333;
+  font-size: 0.9em;
+  text-align: left;
+  padding-left: 0.5em;
+  border: 2px solid #777;
+  border-top: none;
+}
+
+.ol-control {
+  border: 2px solid rgba(0,0,0,.2);
+  background-clip: padding-box;
+  padding: 0;
+}
+
+.ol-control button {
+  background-color: #fff;
+  color: #000;
+  height: 30px;
+  width: 30px;
+  font: 700 18px Lucida Console,Monaco,monospace;
+  margin: 0;
+}
+.ol-control button:hover {
+  cursor: pointer;
+  background-color: #ebebeb;
+}
+.ol-control button:focus {
+  background-color: #ebebeb;
+}
+
+/* hide the popup before the map get loaded */
+.map-container > #popup.ol-popup {
+  display: none;
+}
+
+.ol-full-screen {
+  top: calc(1em + 60px);
+  right: 5px !important;
+}
+
+/* Geolocation button */
+div.geolocation-container {
+  position: absolute;
+  right: 6px;
+  z-index: 9;
+  border: 2px solid rgba(0,0,0,.2);
+  background-clip: padding-box;
+  padding: 0;
+  border-radius: 4px;
+}
+button.button-geolocation {
+  border: none;
+  padding: 0;
+  margin: 0;
+  text-align: center;
+  background-color: #fff;
+  color: rgb(39, 39, 39);
+  width: 30px;
+  height: 30px;
+  font: 700 18px Lucida Console,Monaco,monospace;
+  border-radius: 2px;
+  line-height: 1.15;
+  cursor: pointer;
+}
+button.button-geolocation:hover {
+    background-color: #ebebeb;
+  }
+button.button-geolocation.tracking {
+  background-color: rgba(255, 145, 0, 0.904);
+  color: #fff;
+}
+button.button-geolocation i {
+  margin: 0;
+  vertical-align: top; /* strangely top is the only value that center at middle */
+  background-image: url(../img/geolocation-icon.png);
+  background-size: cover;
+  width: 25px;
+  height: 25px;
+}
\ No newline at end of file

src/assets/styles/sidebar-layers.css

@@ -13,8 +13,7 @@
   border: 1px solid grey;
   top: 0;
   position: absolute;
-  /* Under this value, the map hide the sidebar */
-  z-index: 400;
+  z-index: 9;
 }
 
 .sidebar-layers {
@@ -62,7 +61,7 @@
 
 .sidebar-container.expanded .layers-icon svg path,
 .sidebar-container.closing .layers-icon svg path {
-  fill: #00b5ad;
+  fill: var(--primary-color, #00b5ad);
 }
 
 @keyframes open-sidebar {
@@ -132,7 +131,7 @@
 }
 
 .layers-icon:hover svg path {
-  fill: #00b5ad;
+  fill: var(--primary-color, #00b5ad);
 }
 
 .basemaps-title {
@@ -144,7 +143,6 @@
 }
 
 /* Layer item */
-
 .layer-item {
   padding-bottom: 0.5rem;
 }
@@ -164,6 +162,7 @@
 
 .range-container {
   display: flex;
+  min-width: 15em; /* give space for the bubble since adding a min-width to keep its shape */
 }
 
 .range-output-bubble {
@@ -172,6 +171,8 @@
   padding: 4px 7px;
   border-radius: 40px;
   background-color: #2c3e50;
+  min-width: 2em;
+  text-align: center;
 }
 
 /* Overrides default padding of semantic-ui accordion */