diff --git a/ReleaseNotes.md b/ReleaseNotes.md
index c2ef4c8d..8c25564b 100644
--- a/ReleaseNotes.md
+++ b/ReleaseNotes.md
@@ -1,3 +1,12 @@
+## Release 4.3.0
+
+* We updated Data Widgets module compatibility to v3.5.0 
+* We updated Atlas Core module compatibility to v4.1.3 
+* We updated Atlas Web Content module compatibility to v4.1.0
+* We fixed an issue where switching between the Minimal, Default and All views did not work correctly for the Audit Trail.
+
+_______
+
 ## Release 4.2.0
 
 * We added a conflict resolution feature that allows workflow administrators to resolve incompatible workflows in groups. For more information, refer to the Workflow Commons module documentation.
diff --git a/Releases/WorkflowCommons-4-3-0.mpk b/Releases/WorkflowCommons-4-3-0.mpk
new file mode 100644
index 00000000..2cccb8af
Binary files /dev/null and b/Releases/WorkflowCommons-4-3-0.mpk differ
diff --git a/Source/ExpenseRequestStarterApp.mpr b/Source/ExpenseRequestStarterApp.mpr
index 13ad5cc5..a11b20f1 100644
Binary files a/Source/ExpenseRequestStarterApp.mpr and b/Source/ExpenseRequestStarterApp.mpr differ
diff --git a/Source/javascriptsource/datawidgets/actions/Clear_Selection.js b/Source/javascriptsource/datawidgets/actions/Clear_Selection.js
new file mode 100644
index 00000000..848aa7cd
--- /dev/null
+++ b/Source/javascriptsource/datawidgets/actions/Clear_Selection.js
@@ -0,0 +1,25 @@
+// This file was generated by Mendix Studio Pro.
+//
+// WARNING: Only the following code will be retained when actions are regenerated:
+// - the import list
+// - the code between BEGIN USER CODE and END USER CODE
+// - the code between BEGIN EXTRA CODE and END EXTRA CODE
+// Other code you write will be lost the next time you deploy the project.
+import "mx-global";
+import { Big } from "big.js";
+
+// BEGIN EXTRA CODE
+// END EXTRA CODE
+
+/**
+ * @param {string} targetName - The name of the widget for which selection should be cleared.
+ * @returns {Promise.<void>}
+ */
+export async function Clear_Selection(targetName) {
+	// BEGIN USER CODE
+    const plugin = window["com.mendix.widgets.web.plugin.externalEvents"];
+    if (plugin) {
+        plugin.emit(targetName, "selection.clear");
+    }
+	// END USER CODE
+}
diff --git a/Source/javascriptsource/feedbackmodule/actions/JS_GetFeedbackStorageObject.js b/Source/javascriptsource/feedbackmodule/actions/JS_GetFeedbackStorageObject.js
new file mode 100644
index 00000000..8df7230e
--- /dev/null
+++ b/Source/javascriptsource/feedbackmodule/actions/JS_GetFeedbackStorageObject.js
@@ -0,0 +1,101 @@
+// This file was generated by Mendix Studio Pro.
+//
+// WARNING: Only the following code will be retained when actions are regenerated:
+// - the import list
+// - the code between BEGIN USER CODE and END USER CODE
+// - the code between BEGIN EXTRA CODE and END EXTRA CODE
+// Other code you write will be lost the next time you deploy the project.
+import "mx-global";
+import { Big } from "big.js";
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+// BEGIN EXTRA CODE
+// END EXTRA CODE
+
+/**
+ * @param {string} key
+ * @param {string} entity
+ * @returns {Promise.<MxObject>}
+ */
+export async function JS_GetFeedbackStorageObject(key, entity) {
+	// BEGIN USER CODE
+    if (!key) {
+        return Promise.reject(new Error("Input parameter 'Key' is required"));
+    }
+    if (!entity) {
+        return Promise.reject(new Error("Input parameter 'Entity' is required"));
+    }
+    return getItem(key).then(result => {
+        if (result === null) {
+            return Promise.reject(new Error(`Storage item '${key}' does not exist`));
+        }
+        const value = JSON.parse(result);
+        return getOrCreateMxObject(entity, value).then(newObject => {
+            const newValue = serializeMxObject(newObject);
+            return setItem(key, JSON.stringify(newValue)).then(() => newObject);
+        });
+    });
+    function getItem(key) {
+        if (navigator && navigator.product === "ReactNative") {
+            return AsyncStorage.getItem(key);
+        }
+        if (window) {
+            const value = window.localStorage.getItem(key);
+            return Promise.resolve(value);
+        }
+        return Promise.reject(new Error("No storage API available"));
+    }
+    function setItem(key, value) {
+        if (navigator && navigator.product === "ReactNative") {
+            return AsyncStorage.setItem(key, value);
+        }
+        if (window) {
+            window.localStorage.setItem(key, value);
+            return Promise.resolve();
+        }
+        return Promise.reject(new Error("No storage API available"));
+    }
+    function getOrCreateMxObject(entity, value) {
+        return getMxObject(value.guid).then(existingObject => {
+            if (existingObject) {
+                return existingObject;
+            }
+            else {
+                return createMxObject(entity, value);
+            }
+        });
+    }
+    function getMxObject(guid) {
+        return new Promise((resolve, reject) => {
+            mx.data.get({
+                guid,
+                callback: mxObject => resolve(mxObject),
+                error: error => reject(error)
+            });
+        });
+    }
+    function createMxObject(entity, value) {
+        return new Promise((resolve, reject) => {
+            mx.data.create({
+                entity,
+                callback: mxObject => {
+                    Object.keys(value)
+                        .filter(attribute => attribute !== "guid")
+                        .forEach(attributeName => {
+                        const attributeValue = value[attributeName];
+                        mxObject.set(attributeName, attributeValue);
+                    });
+                    resolve(mxObject);
+                },
+                error: () => reject(new Error(`Could not create '${entity}' object`))
+            });
+        });
+    }
+    function serializeMxObject(object) {
+        return object.getAttributes().reduce((accumulator, attributeName) => {
+            accumulator[attributeName] = object.get(attributeName);
+            return accumulator;
+        }, { guid: object.getGuid() });
+    }
+	// END USER CODE
+}
diff --git a/Source/javascriptsource/feedbackmodule/actions/JS_GetSingleLocalStorageObjectItem.js b/Source/javascriptsource/feedbackmodule/actions/JS_GetSingleLocalStorageObjectItem.js
new file mode 100644
index 00000000..9a716061
--- /dev/null
+++ b/Source/javascriptsource/feedbackmodule/actions/JS_GetSingleLocalStorageObjectItem.js
@@ -0,0 +1,33 @@
+// This file was generated by Mendix Studio Pro.
+//
+// WARNING: Only the following code will be retained when actions are regenerated:
+// - the import list
+// - the code between BEGIN USER CODE and END USER CODE
+// - the code between BEGIN EXTRA CODE and END EXTRA CODE
+// Other code you write will be lost the next time you deploy the project.
+import "mx-global";
+import { Big } from "big.js";
+
+// BEGIN EXTRA CODE
+// END EXTRA CODE
+
+/**
+ * @param {string} localStorageKey
+ * @param {string} objectItemKey
+ * @returns {Promise.<string>}
+ */
+export async function JS_GetSingleLocalStorageObjectItem(localStorageKey, objectItemKey) {
+	// BEGIN USER CODE
+	if (!localStorageKey) {
+        return Promise.reject(new Error("Input parameter 'localStorageKey' is required"));
+    }
+    if (!objectItemKey) {
+        return Promise.reject(new Error("Input parameter 'objectItemKey' is required"));
+    }
+	const localObject = window.localStorage.getItem(localStorageKey);
+	const parsedObject = JSON.parse(localObject);
+	const singleItem = parsedObject?.[objectItemKey] ?? "";
+	
+	return Promise.resolve(singleItem);
+	// END USER CODE
+}
diff --git a/Source/javascriptsource/feedbackmodule/actions/JS_PopulateFeedbackMetadata.js b/Source/javascriptsource/feedbackmodule/actions/JS_PopulateFeedbackMetadata.js
new file mode 100644
index 00000000..180122f2
--- /dev/null
+++ b/Source/javascriptsource/feedbackmodule/actions/JS_PopulateFeedbackMetadata.js
@@ -0,0 +1,94 @@
+// This file was generated by Mendix Studio Pro.
+//
+// WARNING: Only the following code will be retained when actions are regenerated:
+// - the import list
+// - the code between BEGIN USER CODE and END USER CODE
+// - the code between BEGIN EXTRA CODE and END EXTRA CODE
+// Other code you write will be lost the next time you deploy the project.
+import "mx-global";
+import { Big } from "big.js";
+import { getUserRoleNames } from "mx-api/session";
+import { ui, session } from "mx-api";
+
+// BEGIN EXTRA CODE
+    const handleUserRoles = async () => {
+        try {
+            let userRoles;
+
+            if (
+                typeof mx !== "undefined" &&
+                typeof mx.session === "object" &&
+                typeof mx.session.getUserRoleNames === "function"
+            ) {
+                userRoles = mx.session.getUserRoleNames();
+            } else if (typeof getUserRoleNames !== "function" || getUserRoleNames === undefined) {
+                userRoles = getUserRoleNames();
+            } else {
+                console.error("Feedback module cannot access a valid user role retrieval function.");
+                return undefined;
+            }
+
+            if (!Array.isArray(userRoles) || userRoles.length === 0) {
+                console.error("User roles not available or empty.");
+                return undefined;
+            }
+
+            return userRoles[0];
+        } catch (error) {
+            console.error("Feedback module failed to get the user role name.", error);
+            return undefined;
+        }
+    };
+
+    const handlePagePath = async () => {
+        try {
+            if (
+                typeof mx !== "undefined" &&
+                typeof mx.ui.getContentForm === "function" &&
+                typeof mx.ui.getContentForm().path !== "undefined"
+            ) {
+                return mx.ui.getContentForm().path;
+            } else {
+                return window.history.state.pageName;
+            }
+        } catch(error) {
+            console.error("Feedback module cannot get the Mendix App page name", error);
+            return undefined;
+        }
+    };
+// END EXTRA CODE
+
+/**
+ * What does this JavaScript action do?
+ * 
+ * Returns meta data from the clients internet browser. 
+ * 
+ * This includes; 
+ * 
+ * ActiveUserRoles
+ * PageName
+ * EnvironmentURL
+ * Browser
+ * ScreenWidth
+ * ScreenHeight
+ * @param {MxObject} feedback
+ * @returns {Promise.<MxObject>}
+ */
+export async function JS_PopulateFeedbackMetadata(feedback) {
+	// BEGIN USER CODE
+    try {
+        const userRoles = await handleUserRoles();
+        const pagePath = await handlePagePath();
+
+        feedback.set("ActiveUserRoles", userRoles || "");
+        feedback.set("PageName", pagePath || "");
+        feedback.set("EnvironmentURL", window.location.href || "");
+        feedback.set("Browser", navigator.userAgent || "");
+        feedback.set("ScreenWidth", window.screen.width || "");
+        feedback.set("ScreenHeight", window.screen.height || "");
+        return feedback;
+    } catch (error) {
+        console.error("Feedback Module cannot correctly set meta data.", error);
+    };
+	// END USER CODE
+}
diff --git a/Source/javascriptsource/feedbackmodule/actions/JS_Recalculate_MendixModal_Error_PopUp_Zindex.js b/Source/javascriptsource/feedbackmodule/actions/JS_Recalculate_MendixModal_Error_PopUp_Zindex.js
new file mode 100644
index 00000000..1f2bdd83
--- /dev/null
+++ b/Source/javascriptsource/feedbackmodule/actions/JS_Recalculate_MendixModal_Error_PopUp_Zindex.js
@@ -0,0 +1,40 @@
+// This file was generated by Mendix Studio Pro.
+//
+// WARNING: Only the following code will be retained when actions are regenerated:
+// - the import list
+// - the code between BEGIN USER CODE and END USER CODE
+// - the code between BEGIN EXTRA CODE and END EXTRA CODE
+// Other code you write will be lost the next time you deploy the project.
+import "mx-global";
+import { Big } from "big.js";
+
+// BEGIN EXTRA CODE
+// END EXTRA CODE
+
+/**
+ * @returns {Promise.<void>}
+ */
+export async function JS_Recalculate_MendixModal_Error_PopUp_Zindex() {
+	// BEGIN USER CODE
+
+	function setModalZindex(cssSelector, zIndexValue) {
+		try {
+			const htmlElement = document.querySelectorAll(cssSelector);
+
+			if(!htmlElement.length) {
+				return;
+			}
+
+			htmlElement.forEach(item => item.style.zIndex = zIndexValue);
+
+		} catch(error) {
+			console.warn("Feedback Module JS Action JS_Recalculate_Modal_Zindex could not execute correctly.", error);
+		}
+	};
+
+	setTimeout(() => {
+		setModalZindex(".mx-dialog-info, mx-dialog-warning, .mx-dialog-error", "90");
+		setModalZindex(".mx-underlay", "80");
+	},500);
+	// END USER CODE
+}
diff --git a/Source/javascriptsource/feedbackmodule/actions/JS_RevokeUploadedFileFromMemory.js b/Source/javascriptsource/feedbackmodule/actions/JS_RevokeUploadedFileFromMemory.js
new file mode 100644
index 00000000..6791c873
--- /dev/null
+++ b/Source/javascriptsource/feedbackmodule/actions/JS_RevokeUploadedFileFromMemory.js
@@ -0,0 +1,50 @@
+// This file was generated by Mendix Studio Pro.
+//
+// WARNING: Only the following code will be retained when actions are regenerated:
+// - the import list
+// - the code between BEGIN USER CODE and END USER CODE
+// - the code between BEGIN EXTRA CODE and END EXTRA CODE
+// Other code you write will be lost the next time you deploy the project.
+import "mx-global";
+import { Big } from "big.js";
+
+// BEGIN EXTRA CODE
+// END EXTRA CODE
+
+/**
+ * What does this JavaScript action do?
+ * 
+ * After you have uploaded an image it removes locally stored image from memory. This is a custom build action.
+ * 
+ * Dependency Note: 
+ * This JavaScript action should be used only when you have inserted the Image Upload JavaScript Action called 'JS_UploadAndConvertToFileBlobURL' into your nanoflow.
+ * 
+ * More detailed explanation:  Memory management.
+ * 
+ * To upload a image we use a custom build Javascript action called  'JS_UploadAndConvertToFileBlobURL'.
+ * Inside this action we use a JavaScript method called createObjectURL() to upload and store files in local memory. We can access and cosume this in memory image resource via the URL path that is returned from the createObjectURL() method. 
+ * 
+ * However, each time you call createObjectURL(), a new object is created in memory, even if you've already created one for the same object. 
+ * So each of these must be released by calling this action called 'JS_RevokeUploadedFileFromMemory' when you no longer need them.
+ * 
+ * Browsers will release object URLs automatically when the document is unloaded; however, for optimal performance and memory usage, if there are safe times when you can explicitly unload them, you should do so with the JavaScriptAction called 'JS_RevokeUploadedFileFromMemory'.
+ * @param {string} fileBlobURL - You have to pass the fileBlobURL that was created using the URL.createObjectURL() in the JS Action called 'JS_UploadAndConvertToFileBlobURL'
+ * @returns {Promise.<void>}
+ */
+export async function JS_RevokeUploadedFileFromMemory(fileBlobURL) {
+	// BEGIN USER CODE
+	/* We use the URL.createObjectURL() static method which creates a string containing a URL representing the
+	   image uploaded. 
+	   The image blob is stored in the clients browser and takes up memory whilst the session is active. So here we 
+	   revoke the image when the user deletes the image. Note that the image is automaticlly revoked when the browser refreshes
+	   or closes.
+
+	   You have to pass the fileBlobURL that was created using the URL.createObjectURL() in the JS Action called 'JS_UploadAndConvertToFileBlobURL'
+	 */
+	if(fileBlobURL && typeof fileBlobURL === "string"){
+		URL.revokeObjectURL(fileBlobURL);
+	} else {
+		throw new Error("Image was not removed from browser memory");
+	}
+	// END USER CODE
+}
diff --git a/Source/javascriptsource/feedbackmodule/actions/JS_SetFeedbackStorageObject.js b/Source/javascriptsource/feedbackmodule/actions/JS_SetFeedbackStorageObject.js
new file mode 100644
index 00000000..d27512ee
--- /dev/null
+++ b/Source/javascriptsource/feedbackmodule/actions/JS_SetFeedbackStorageObject.js
@@ -0,0 +1,47 @@
+// This file was generated by Mendix Studio Pro.
+//
+// WARNING: Only the following code will be retained when actions are regenerated:
+// - the import list
+// - the code between BEGIN USER CODE and END USER CODE
+// - the code between BEGIN EXTRA CODE and END EXTRA CODE
+// Other code you write will be lost the next time you deploy the project.
+import "mx-global";
+import { Big } from "big.js";
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+// BEGIN EXTRA CODE
+// END EXTRA CODE
+
+/**
+ * @param {string} key
+ * @param {MxObject} value
+ * @returns {Promise.<void>}
+ */
+export async function JS_SetFeedbackStorageObject(key, value) {
+	// BEGIN USER CODE
+    if (!key) {
+        return Promise.reject(new Error("Input parameter 'Key' is required"));
+    }
+    if (!value) {
+        return Promise.reject(new Error("Input parameter 'Value' is required"));
+    }
+    const serializedObject = serializeMxObject(value);
+    return setItem(key, JSON.stringify(serializedObject));
+    function setItem(key, value) {
+        if (navigator && navigator.product === "ReactNative") {
+            return AsyncStorage.setItem(key, value);
+        }
+        if (window) {
+            window.localStorage.setItem(key, value);
+            return Promise.resolve();
+        }
+        return Promise.reject(new Error("No storage API available"));
+    }
+    function serializeMxObject(object) {
+        return object.getAttributes().reduce((accumulator, attributeName) => {
+            accumulator[attributeName] = object.get(attributeName);
+            return accumulator;
+        }, { guid: object.getGuid() });
+    }
+	// END USER CODE
+}
diff --git a/Source/javascriptsource/feedbackmodule/actions/JS_SetSingleLocalStorageObjectItem.js b/Source/javascriptsource/feedbackmodule/actions/JS_SetSingleLocalStorageObjectItem.js
new file mode 100644
index 00000000..fc19165a
--- /dev/null
+++ b/Source/javascriptsource/feedbackmodule/actions/JS_SetSingleLocalStorageObjectItem.js
@@ -0,0 +1,41 @@
+// This file was generated by Mendix Studio Pro.
+//
+// WARNING: Only the following code will be retained when actions are regenerated:
+// - the import list
+// - the code between BEGIN USER CODE and END USER CODE
+// - the code between BEGIN EXTRA CODE and END EXTRA CODE
+// Other code you write will be lost the next time you deploy the project.
+import "mx-global";
+import { Big } from "big.js";
+
+// BEGIN EXTRA CODE
+// END EXTRA CODE
+
+/**
+ * @param {string} localStorageKey
+ * @param {string} imageDataB64
+ * @returns {Promise.<void>}
+ */
+export async function JS_SetSingleLocalStorageObjectItem(localStorageKey, imageDataB64) {
+	// BEGIN USER CODE
+    if (!localStorageKey) {
+        return Promise.reject(new Error("Input parameter 'localStorageKey' is required"));
+    }
+
+    const existingData = window.localStorage.getItem(localStorageKey);
+    let parsedData = {};
+
+    if (existingData) {
+        try {
+            parsedData = JSON.parse(existingData);
+        } catch (error) {
+            console.warn(`Failed to parse existing localStorage data. Overwriting.`, error);
+        }
+    }
+
+    parsedData.ImageB64 = imageDataB64;
+
+    window.localStorage.setItem(localStorageKey, JSON.stringify(parsedData));
+    return Promise.resolve();
+	// END USER CODE
+}
diff --git a/Source/javascriptsource/feedbackmodule/actions/JS_ToggleFeedbackAnnotateWidget.js b/Source/javascriptsource/feedbackmodule/actions/JS_ToggleFeedbackAnnotateWidget.js
new file mode 100644
index 00000000..35382f2c
--- /dev/null
+++ b/Source/javascriptsource/feedbackmodule/actions/JS_ToggleFeedbackAnnotateWidget.js
@@ -0,0 +1,74 @@
+// This file was generated by Mendix Studio Pro.
+//
+// WARNING: Only the following code will be retained when actions are regenerated:
+// - the import list
+// - the code between BEGIN USER CODE and END USER CODE
+// - the code between BEGIN EXTRA CODE and END EXTRA CODE
+// Other code you write will be lost the next time you deploy the project.
+import "mx-global";
+import { Big } from "big.js";
+
+// BEGIN EXTRA CODE
+// messageActionTypes are to identify the postMessage types between the JS Action & Feedback Widget.
+const messageAction_toggleAnnotateMode = "mxFeedbackWidget_toggleAnnotateMode"; // The Feedback widget reads this to trigger a specific screenshot mode stage.
+const messageAction_isBase64 = "mxFeedbackWidget_convertedToBase64"; // We expect this string from the widget when screenshot mode in enabled.
+const messageAction_actionCancelled = "mxFeedbackWidget_actionCancelled" // The Feedback widget will send this back if screenshot/annotation actions are cancelled by the user.
+
+const parseJSON = (event) => {
+	try {
+		return JSON.parse(event);
+	} catch {
+		return undefined;
+	}
+};
+// END EXTRA CODE
+
+/**
+ * What does this JavaScript action do?
+ * 
+ * When you upload a screenshot manually the image can be annotatated. 
+ * 
+ * More detailed explanation:
+ * The Mendix Feedback Widget handles annotation and also renders a default styled button on your page. 
+ * 
+ * In order to trigger the annotation mode you have to use this JavaScript action to send the widget the correct image payload.
+ * 
+ * Return Type:
+ * Will return base 64 image string
+ * @param {string} fileBlobURL
+ * @returns {Promise.<string>}
+ */
+export async function JS_ToggleFeedbackAnnotateWidget(fileBlobURL) {
+	// BEGIN USER CODE
+	/* 
+	The widget and JS action communicate with the following postMessage object structure:
+	messageObject = {messageActionType: string;messageData: string;}
+	*/
+	const messageObject = {
+		"messageActionType": messageAction_toggleAnnotateMode, // The widget reads this to trigger the Annotate Mode.
+		"messageData": fileBlobURL // The widget uses this URL reference to get access to the locally stored image blob.
+	};
+
+	postMessage(JSON.stringify(messageObject), window.origin); // Send the serialized message object to Feedback Wiget to trigger annotate mode.
+	
+	return new Promise(resolve => {
+		function handleEvent(event) {
+			const parsedData = parseJSON(event.data); // Convert the received string to an object.
+
+			if(event.origin === window.origin) {
+				if (parsedData && parsedData.messageActionType === messageAction_isBase64) {
+					window.removeEventListener("message", handleEvent);
+					resolve(parsedData.messageData); // Resolve & return the base64 image to the nanoflow.
+				};
+				if(parsedData && parsedData.messageActionType === messageAction_actionCancelled) {
+					resolve();
+				}
+			}
+
+		};
+		
+        window.addEventListener("message", handleEvent); // Listen and wait for the Feedback Widget to send the base64 image.
+
+    });
+	// END USER CODE
+}
diff --git a/Source/javascriptsource/feedbackmodule/actions/JS_ToggleFeedbackScreenshotWidget.js b/Source/javascriptsource/feedbackmodule/actions/JS_ToggleFeedbackScreenshotWidget.js
new file mode 100644
index 00000000..fafc71ca
--- /dev/null
+++ b/Source/javascriptsource/feedbackmodule/actions/JS_ToggleFeedbackScreenshotWidget.js
@@ -0,0 +1,73 @@
+// This file was generated by Mendix Studio Pro.
+//
+// WARNING: Only the following code will be retained when actions are regenerated:
+// - the import list
+// - the code between BEGIN USER CODE and END USER CODE
+// - the code between BEGIN EXTRA CODE and END EXTRA CODE
+// Other code you write will be lost the next time you deploy the project.
+import "mx-global";
+import { Big } from "big.js";
+
+// BEGIN EXTRA CODE
+// messageActionTypes are to identify the postMessage types between the JS Action & Feedback Widget.
+const messageAction_toggleAnnotateMode = "mxFeedbackWidget_toggleScreenshotMode"; // The Feedback widget reads this to trigger a specific screenshot mode stage.
+const messageAction_isBase64 = "mxFeedbackWidget_convertedToBase64"; // We expect this string from the widget when screenshot mode in enabled.
+const messageAction_actionCancelled = "mxFeedbackWidget_actionCancelled" // The Feedback widget will send this back if screenshot/annotation actions are cancelled by the user.
+
+/* 
+	The widget and JS action communicate with the following postMessage object structure:
+	messageObject = {messageActionType: string;messageData: string;}
+*/
+const messageObject = {
+	"messageActionType": messageAction_toggleAnnotateMode //The Feedback widget reads this to trigger a specific Mode.
+};
+
+const parseJson = (event) => {
+	try {
+		return JSON.parse(event);
+	} catch {
+		return undefined;
+	}
+};
+// END EXTRA CODE
+
+/**
+ * What does this JavaScript action do?
+ * 
+ * Lets to take a screenshot of the current visible page
+ * 
+ * More detailed explanation:
+ * The Mendix Feedback Widget handles annotation, screenshot and also renders a default styled button on your page. 
+ * 
+ * Usage:
+ * You should use this JavaScript action to trigger the screenshot functionality.
+ * 
+ * Return Type:
+ * Will return a image base64 string
+ * 
+ * @returns {Promise.<string>}
+ */
+export async function JS_ToggleFeedbackScreenshotWidget() {
+	// BEGIN USER CODE
+	    postMessage(JSON.stringify(messageObject), window.origin); // Send a message to the Feedback Wiget to trigger screenshot mode.
+		
+		return new Promise(resolve => {
+
+			function handleEvent(event){
+				const parsedData = parseJson(event.data);
+				if(parsedData && event.origin === window.origin) {
+					if (parsedData.messageActionType === messageAction_isBase64) {
+						window.removeEventListener("message", handleEvent);
+						resolve(parsedData.messageData); // Resolve & return the base64 image to the nanoflow.
+					};
+					if(parsedData.messageActionType === messageAction_actionCancelled){
+						resolve("uploadCancelled");
+					}
+				}
+			};
+
+			window.addEventListener("message", handleEvent); // Listen and wait for the Feedback Widget to send back the edited screenshot as base64.
+
+    });
+	// END USER CODE
+}
diff --git a/Source/javascriptsource/feedbackmodule/actions/JS_UploadAndConvertToFileBlobURL.js b/Source/javascriptsource/feedbackmodule/actions/JS_UploadAndConvertToFileBlobURL.js
new file mode 100644
index 00000000..f55aceeb
--- /dev/null
+++ b/Source/javascriptsource/feedbackmodule/actions/JS_UploadAndConvertToFileBlobURL.js
@@ -0,0 +1,113 @@
+// This file was generated by Mendix Studio Pro.
+//
+// WARNING: Only the following code will be retained when actions are regenerated:
+// - the import list
+// - the code between BEGIN USER CODE and END USER CODE
+// - the code between BEGIN EXTRA CODE and END EXTRA CODE
+// Other code you write will be lost the next time you deploy the project.
+import { Big } from "big.js";
+import "mx-global";
+import { showProgress, hideProgress } from "mx-api/ui";
+
+// BEGIN EXTRA CODE
+    var isUploading = false;
+
+    async function storeFileAndGetResourceUrl(file) {
+        return URL.createObjectURL(file); // Saves the file to locally memory and returns a URL path to the Blob object.
+    };
+
+    function removeDomElements({fileInput, progressId}) {
+        console.log("progressId", progressId);
+        if(progressId) hideProgress({progressId}); 
+        if(fileInput) document.body.removeChild(fileInput);
+        isUploading = false;    
+    };
+
+    function validateFileTypes ({acceptedTypes, fileType}) {
+        if(!acceptedTypes && !fileType) return false;
+        const accepted = acceptedTypes.split(",");
+        return accepted.some(type => new RegExp(type).test(fileType));
+    };
+
+    function validateFileSize ({uploadedFile, maxSize}) {
+        if(!uploadedFile && !maxSize) return false;
+        const uploadedSize = uploadedFile.size / 1024 / 1024; // Convert to MB
+        return uploadedSize < (maxSize.c[0] + 0.1); // 0.1 MB extra tolerance
+    };
+// END EXTRA CODE
+
+/**
+ * What does this JavaScript Action do?
+ * 
+ * This is a custom build JavaScript Action that triggers the file upload dialog box to open in your internet browser. 
+ * 
+ * Dependency Note: 
+ * This JavaScript action should be used with the JavaScript Action called 'JS_RevokeUploadedFileFromMemory' so that the image uploaded is removed from local memory :)
+ * 
+ * Explanation of this JavaScript Action & Memory management.
+ * 
+ * We use createObjectURL() to upload and store files in local memory. We can access and cosume this in memory image resource via the URL path that is returned from the createObjectURL() method. 
+ * 
+ * However, each time you call createObjectURL(), a new object is created in memory, even if you've already created one for the same object. 
+ * So each of these must be released by calling the JS Action called 'JS_RevokeUploadedFileFromMemory' when you no longer need them.
+ * 
+ * Browsers will release object URLs automatically when the document is unloaded; however, for optimal performance and memory usage, if there are safe times when you can explicitly unload them, you should do so with the JavaScriptAction called 'JS_RevokeUploadedFileFromMemory'.
+ * @param {string} userDefined_mimeTypes
+ * @param {Big} userDefined_fileUploadSize
+ * @returns {Promise.<string>}
+ */
+export async function JS_UploadAndConvertToFileBlobURL(userDefined_mimeTypes, userDefined_fileUploadSize) {
+	// BEGIN USER CODE
+    return new Promise((resolve, reject) => {
+        try {
+            // Create and append the HTML input element to the body
+            const fileInput = document.createElement("input");
+            fileInput.style.position = "absolute";
+            fileInput.style.left = "-9999px";
+            fileInput.name = "fileupload";
+            fileInput.id = "fileupload";
+            fileInput.type = "file";
+            if(userDefined_mimeTypes){
+                fileInput.accept = userDefined_mimeTypes;
+            }
+            fileInput.multiple = false;
+            fileInput.onchange = handleFileUpload;
+            document.body.appendChild(fileInput);
+            fileInput.addEventListener("cancel", () => resolve("uploadCancelled"));
+            fileInput.click();
+
+            // A function used to validate & store the uploaded file to local memory.
+            function handleFileUpload(event) {
+                isUploading = true;
+
+                const newFile = event.target.files[0];
+                const progressId = showProgress();
+
+                // Check if the uploaded file type matches the user defined accepted types.
+                if (!validateFileTypes({acceptedTypes: fileInput.accept, fileType: newFile.type})) {
+                    removeDomElements({fileInput, progressId});
+                    return resolve("fileTypeNotAccepted");
+                    
+                }
+                // Check if the uploaded file matches the user defined upload size.
+                if (!validateFileSize({uploadedFile: newFile, maxSize: userDefined_fileUploadSize})) { 
+                    removeDomElements({fileInput, progressId});
+                    return resolve("fileSizeNotAccepted");
+                }
+                // Store file locally on users device and return path to resource.
+                storeFileAndGetResourceUrl(newFile).then((fileBlobURL) => {
+                    if(fileBlobURL && typeof fileBlobURL === "string") {
+                        removeDomElements({fileInput, progressId});
+                        return resolve(fileBlobURL);
+                    } else {
+                        removeDomElements({fileInput, progressId});
+                        return resolve("fileNotConverted");
+                    }
+                });
+            };
+        } catch (error) {
+            reject(error);
+        };
+    });
+	// END USER CODE
+}
diff --git a/Source/javascriptsource/feedbackmodule/actions/JS_isStrictMode.js b/Source/javascriptsource/feedbackmodule/actions/JS_isStrictMode.js
new file mode 100644
index 00000000..b500a4cb
--- /dev/null
+++ b/Source/javascriptsource/feedbackmodule/actions/JS_isStrictMode.js
@@ -0,0 +1,41 @@
+// This file was generated by Mendix Studio Pro.
+//
+// WARNING: Only the following code will be retained when actions are regenerated:
+// - the import list
+// - the code between BEGIN USER CODE and END USER CODE
+// - the code between BEGIN EXTRA CODE and END EXTRA CODE
+// Other code you write will be lost the next time you deploy the project.
+import "mx-global";
+import { Big } from "big.js";
+
+// BEGIN EXTRA CODE
+// END EXTRA CODE
+
+/**
+ * @returns {Promise.<boolean>}
+ */
+export async function JS_isStrictMode() {
+	// BEGIN USER CODE
+    return new Promise(resolve => {
+        try {
+            mx.data.create({
+                entity: "FeedbackModule.Feedback",
+                callback: obj => {
+                    mx.data.remove({
+                        guid: obj.getGuid(),
+                        callback: () => resolve(false),
+                        error: () => resolve(false)
+                    });
+                },
+                error: () => resolve(false)
+            });
+        } catch (err) {
+            if (err.message.includes("mx.data.create is disabled")) {
+                resolve(true);
+            } else {
+                resolve(true);
+            }
+        }
+    });
+	// END USER CODE
+}
diff --git a/Source/javasource/feedbackmodule/actions/ValidateEmail.java b/Source/javasource/feedbackmodule/actions/ValidateEmail.java
new file mode 100644
index 00000000..7bf77075
--- /dev/null
+++ b/Source/javasource/feedbackmodule/actions/ValidateEmail.java
@@ -0,0 +1,54 @@
+// This file was generated by Mendix Studio Pro.
+//
+// WARNING: Only the following code will be retained when actions are regenerated:
+// - the import list
+// - the code between BEGIN USER CODE and END USER CODE
+// - the code between BEGIN EXTRA CODE and END EXTRA CODE
+// Other code you write will be lost the next time you deploy the project.
+// Special characters, e.g., é, ö, à, etc. are supported in comments.
+
+package feedbackmodule.actions;
+
+import com.mendix.systemwideinterfaces.core.IContext;
+import com.mendix.systemwideinterfaces.core.UserAction;
+
+public class ValidateEmail extends UserAction<java.lang.Boolean>
+{
+	private final java.lang.String EmailAddress;
+
+	public ValidateEmail(
+		IContext context,
+		java.lang.String _emailAddress
+	)
+	{
+		super(context);
+		this.EmailAddress = _emailAddress;
+	}
+
+	@java.lang.Override
+	public java.lang.Boolean executeAction() throws Exception
+	{
+		// BEGIN USER CODE
+
+		// The regex used in this code is the same used in App Insights. If you want to apply more restricted rule, you can change it here.
+		String emailPattern = "^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$";
+        java.util.regex.Pattern p = java.util.regex.Pattern.compile(emailPattern);
+        java.util.regex.Matcher m = p.matcher(EmailAddress);
+        return m.matches();
+
+		// END USER CODE
+	}
+
+	/**
+	 * Returns a string representation of this action
+	 * @return a string representation of this action
+	 */
+	@java.lang.Override
+	public java.lang.String toString()
+	{
+		return "ValidateEmail";
+	}
+
+	// BEGIN EXTRA CODE
+	// END EXTRA CODE
+}
diff --git a/Source/javasource/feedbackmodule/actions/XSS_Sanitizer.java b/Source/javasource/feedbackmodule/actions/XSS_Sanitizer.java
new file mode 100644
index 00000000..192bbeac
--- /dev/null
+++ b/Source/javasource/feedbackmodule/actions/XSS_Sanitizer.java
@@ -0,0 +1,90 @@
+// This file was generated by Mendix Studio Pro.
+//
+// WARNING: Only the following code will be retained when actions are regenerated:
+// - the import list
+// - the code between BEGIN USER CODE and END USER CODE
+// - the code between BEGIN EXTRA CODE and END EXTRA CODE
+// Other code you write will be lost the next time you deploy the project.
+// Special characters, e.g., é, ö, à, etc. are supported in comments.
+
+package feedbackmodule.actions;
+
+import java.util.regex.Matcher;
+import java.util.regex.Pattern;
+import com.mendix.systemwideinterfaces.core.IContext;
+import com.mendix.systemwideinterfaces.core.UserAction;
+
+public class XSS_Sanitizer extends UserAction<java.lang.String>
+{
+	private final java.lang.String stringToSanitize;
+
+	public XSS_Sanitizer(
+		IContext context,
+		java.lang.String _stringToSanitize
+	)
+	{
+		super(context);
+		this.stringToSanitize = _stringToSanitize;
+	}
+
+	@java.lang.Override
+	public java.lang.String executeAction() throws Exception
+	{
+		// BEGIN USER CODE
+
+        //It's a simple XSS sanitation with regex replace.
+        String sanitizedString = sanitize(stringToSanitize);
+        return sanitizedString;
+
+		// END USER CODE
+	}
+
+	/**
+	 * Returns a string representation of this action
+	 * @return a string representation of this action
+	 */
+	@java.lang.Override
+	public java.lang.String toString()
+	{
+		return "XSS_Sanitizer";
+	}
+
+	// BEGIN EXTRA CODE
+    public static String sanitize(String input) {
+        if (input == null || input.isEmpty()) {
+            return input;
+        }
+
+        // Remove all occurrences of <script> tags and their contents
+        input = input.replaceAll("(?i)<script[^>]*>.*?</script>", "");
+
+        // Remove all event handler attributes (e.g., onclick, onmouseover)
+        input = input.replaceAll("(?i)\\bon\\w+\\s*=\\s*(\"[^\"]*\"|'[^']*'|[^\\s>]+)", "");
+
+        // Remove all javascript: URLs
+        input = input.replaceAll("(?i)javascript:", "");
+
+        // Remove all <iframe> tags
+        input = input.replaceAll("(?i)<iframe[^>]*>.*?</iframe>", "");
+
+        // Remove all <object> tags
+        input = input.replaceAll("(?i)<object[^>]*>.*?</object>", "");
+
+        // Remove all <embed> tags
+        input = input.replaceAll("(?i)<embed[^>]*>.*?</embed>", "");
+
+        // Remove all <applet> tags
+        input = input.replaceAll("(?i)<applet[^>]*>.*?</applet>", "");
+
+        // Remove all <meta> tags that could potentially cause redirection
+        input = input.replaceAll("(?i)<meta[^>]*http-equiv[^>]*>", "");
+
+        // Remove all other potentially dangerous HTML tags
+        Pattern pattern = Pattern.compile("<[^>]*(>|$)");
+        Matcher matcher = pattern.matcher(input);
+        input = matcher.replaceAll("");
+
+        return input;
+    }
+	// END EXTRA CODE
+}
diff --git a/Source/mprcontents/00/10/00102db6-f5fe-4e92-a5b1-4be66840dd25.mxunit b/Source/mprcontents/00/10/00102db6-f5fe-4e92-a5b1-4be66840dd25.mxunit
deleted file mode 100644
index cbd3bdbc..00000000
Binary files a/Source/mprcontents/00/10/00102db6-f5fe-4e92-a5b1-4be66840dd25.mxunit and /dev/null differ
diff --git a/Source/mprcontents/02/ff/02ff8ec7-46a2-4a3a-94f5-220e3dc0688d.mxunit b/Source/mprcontents/02/ff/02ff8ec7-46a2-4a3a-94f5-220e3dc0688d.mxunit
deleted file mode 100644
index f9a76d64..00000000
Binary files a/Source/mprcontents/02/ff/02ff8ec7-46a2-4a3a-94f5-220e3dc0688d.mxunit and /dev/null differ
diff --git a/Source/mprcontents/03/8a/038a7d27-7623-4392-9e3d-90a36c03cd24.mxunit b/Source/mprcontents/03/8a/038a7d27-7623-4392-9e3d-90a36c03cd24.mxunit
index 521e7ee5..da3050f2 100644
Binary files a/Source/mprcontents/03/8a/038a7d27-7623-4392-9e3d-90a36c03cd24.mxunit and b/Source/mprcontents/03/8a/038a7d27-7623-4392-9e3d-90a36c03cd24.mxunit differ
diff --git a/Source/mprcontents/03/8f/038f4acc-727a-4267-8058-e9170cfc7475.mxunit b/Source/mprcontents/03/8f/038f4acc-727a-4267-8058-e9170cfc7475.mxunit
deleted file mode 100644
index 0346c2f9..00000000
Binary files a/Source/mprcontents/03/8f/038f4acc-727a-4267-8058-e9170cfc7475.mxunit and /dev/null differ
diff --git a/Source/mprcontents/03/d6/03d6988a-a879-4f1b-a8f2-ac0ef87fe546.mxunit b/Source/mprcontents/03/d6/03d6988a-a879-4f1b-a8f2-ac0ef87fe546.mxunit
new file mode 100644
index 00000000..5b3c9700
Binary files /dev/null and b/Source/mprcontents/03/d6/03d6988a-a879-4f1b-a8f2-ac0ef87fe546.mxunit differ
diff --git a/Source/mprcontents/04/d1/04d1917d-721b-4997-9989-4ce124d69391.mxunit b/Source/mprcontents/04/d1/04d1917d-721b-4997-9989-4ce124d69391.mxunit
new file mode 100644
index 00000000..e04535ba
Binary files /dev/null and b/Source/mprcontents/04/d1/04d1917d-721b-4997-9989-4ce124d69391.mxunit differ
diff --git a/Source/mprcontents/05/4d/054df50a-e569-4144-aab0-64b1b3bebf4d.mxunit b/Source/mprcontents/05/4d/054df50a-e569-4144-aab0-64b1b3bebf4d.mxunit
new file mode 100644
index 00000000..8ca9c712
Binary files /dev/null and b/Source/mprcontents/05/4d/054df50a-e569-4144-aab0-64b1b3bebf4d.mxunit differ
diff --git a/Source/mprcontents/06/9b/069b2330-5583-4f6b-8712-20becb138a91.mxunit b/Source/mprcontents/06/9b/069b2330-5583-4f6b-8712-20becb138a91.mxunit
new file mode 100644
index 00000000..70e99d7d
Binary files /dev/null and b/Source/mprcontents/06/9b/069b2330-5583-4f6b-8712-20becb138a91.mxunit differ
diff --git a/Source/mprcontents/06/a8/06a8765b-66d0-4cca-95cb-c53f17cde086.mxunit b/Source/mprcontents/06/a8/06a8765b-66d0-4cca-95cb-c53f17cde086.mxunit
new file mode 100644
index 00000000..72926b6e
Binary files /dev/null and b/Source/mprcontents/06/a8/06a8765b-66d0-4cca-95cb-c53f17cde086.mxunit differ
diff --git a/Source/mprcontents/3d/06/3d062ae3-20c1-413d-a164-771230d4f573.mxunit b/Source/mprcontents/07/6e/076efe1a-30d5-4647-b042-fb10b282ffdd.mxunit
similarity index 53%
rename from Source/mprcontents/3d/06/3d062ae3-20c1-413d-a164-771230d4f573.mxunit
rename to Source/mprcontents/07/6e/076efe1a-30d5-4647-b042-fb10b282ffdd.mxunit
index 7d49ac81..5e5c8877 100644
Binary files a/Source/mprcontents/3d/06/3d062ae3-20c1-413d-a164-771230d4f573.mxunit and b/Source/mprcontents/07/6e/076efe1a-30d5-4647-b042-fb10b282ffdd.mxunit differ
diff --git a/Source/mprcontents/08/a7/08a71ec0-d216-4ed6-8ad0-e531bc05b579.mxunit b/Source/mprcontents/08/a7/08a71ec0-d216-4ed6-8ad0-e531bc05b579.mxunit
deleted file mode 100644
index 399a7c8c..00000000
Binary files a/Source/mprcontents/08/a7/08a71ec0-d216-4ed6-8ad0-e531bc05b579.mxunit and /dev/null differ
diff --git a/Source/mprcontents/08/ce/08ceb2ec-0f32-41e4-9d97-4d83651cd684.mxunit b/Source/mprcontents/08/ce/08ceb2ec-0f32-41e4-9d97-4d83651cd684.mxunit
deleted file mode 100644
index 39485317..00000000
Binary files a/Source/mprcontents/08/ce/08ceb2ec-0f32-41e4-9d97-4d83651cd684.mxunit and /dev/null differ
diff --git a/Source/mprcontents/09/23/09234dd7-bd5b-46e9-8ff9-b1188cb9f378.mxunit b/Source/mprcontents/09/23/09234dd7-bd5b-46e9-8ff9-b1188cb9f378.mxunit
deleted file mode 100644
index 648f006f..00000000
Binary files a/Source/mprcontents/09/23/09234dd7-bd5b-46e9-8ff9-b1188cb9f378.mxunit and /dev/null differ
diff --git a/Source/mprcontents/2a/45/2a453a0f-6bff-48db-8620-2e9b8897c129.mxunit b/Source/mprcontents/09/4c/094c95a7-cc5f-4815-9c48-b4ec049acefc.mxunit
similarity index 57%
rename from Source/mprcontents/2a/45/2a453a0f-6bff-48db-8620-2e9b8897c129.mxunit
rename to Source/mprcontents/09/4c/094c95a7-cc5f-4815-9c48-b4ec049acefc.mxunit
index 1fa6afe4..fa8b8907 100644
Binary files a/Source/mprcontents/2a/45/2a453a0f-6bff-48db-8620-2e9b8897c129.mxunit and b/Source/mprcontents/09/4c/094c95a7-cc5f-4815-9c48-b4ec049acefc.mxunit differ
diff --git a/Source/mprcontents/0a/78/0a787dbc-3a2a-4c16-85c7-c9531d186300.mxunit b/Source/mprcontents/0a/78/0a787dbc-3a2a-4c16-85c7-c9531d186300.mxunit
deleted file mode 100644
index 4f72fde0..00000000
Binary files a/Source/mprcontents/0a/78/0a787dbc-3a2a-4c16-85c7-c9531d186300.mxunit and /dev/null differ
diff --git a/Source/mprcontents/0b/4e/0b4e55d4-94c5-484f-af9f-e6a0d5a8ed25.mxunit b/Source/mprcontents/0b/4e/0b4e55d4-94c5-484f-af9f-e6a0d5a8ed25.mxunit
index 7ffbdea4..f25269ac 100644
Binary files a/Source/mprcontents/0b/4e/0b4e55d4-94c5-484f-af9f-e6a0d5a8ed25.mxunit and b/Source/mprcontents/0b/4e/0b4e55d4-94c5-484f-af9f-e6a0d5a8ed25.mxunit differ
diff --git a/Source/mprcontents/bb/98/bb984847-0e1c-4cb6-8c60-79dd5947a13f.mxunit b/Source/mprcontents/0b/e6/0be622d7-be84-45b8-8744-7d14e4505236.mxunit
similarity index 85%
rename from Source/mprcontents/bb/98/bb984847-0e1c-4cb6-8c60-79dd5947a13f.mxunit
rename to Source/mprcontents/0b/e6/0be622d7-be84-45b8-8744-7d14e4505236.mxunit
index 438db2dd..6e993dd4 100644
Binary files a/Source/mprcontents/bb/98/bb984847-0e1c-4cb6-8c60-79dd5947a13f.mxunit and b/Source/mprcontents/0b/e6/0be622d7-be84-45b8-8744-7d14e4505236.mxunit differ
diff --git a/Source/mprcontents/0b/e6/0be66cae-769d-41a6-a364-74f47f90adbe.mxunit b/Source/mprcontents/0b/e6/0be66cae-769d-41a6-a364-74f47f90adbe.mxunit
deleted file mode 100644
index 94120f6c..00000000
Binary files a/Source/mprcontents/0b/e6/0be66cae-769d-41a6-a364-74f47f90adbe.mxunit and /dev/null differ
diff --git a/Source/mprcontents/93/27/93271dfc-b916-4335-8867-61049bdceac3.mxunit b/Source/mprcontents/0d/54/0d54b777-6b5a-43b6-906d-01b7b6d00f9a.mxunit
similarity index 61%
rename from Source/mprcontents/93/27/93271dfc-b916-4335-8867-61049bdceac3.mxunit
rename to Source/mprcontents/0d/54/0d54b777-6b5a-43b6-906d-01b7b6d00f9a.mxunit
index 6294b335..6bed78dd 100644
Binary files a/Source/mprcontents/93/27/93271dfc-b916-4335-8867-61049bdceac3.mxunit and b/Source/mprcontents/0d/54/0d54b777-6b5a-43b6-906d-01b7b6d00f9a.mxunit differ
diff --git a/Source/mprcontents/0d/6e/0d6e825b-5331-45e2-b96a-3b3012013273.mxunit b/Source/mprcontents/0d/6e/0d6e825b-5331-45e2-b96a-3b3012013273.mxunit
new file mode 100644
index 00000000..69e9c54c
Binary files /dev/null and b/Source/mprcontents/0d/6e/0d6e825b-5331-45e2-b96a-3b3012013273.mxunit differ
diff --git a/Source/mprcontents/f0/e6/f0e6b475-2955-48fb-971c-a82877570295.mxunit b/Source/mprcontents/0e/57/0e579b8c-eb99-4f5c-8e2b-bdd78fea5294.mxunit
similarity index 65%
rename from Source/mprcontents/f0/e6/f0e6b475-2955-48fb-971c-a82877570295.mxunit
rename to Source/mprcontents/0e/57/0e579b8c-eb99-4f5c-8e2b-bdd78fea5294.mxunit
index 546eae97..a2933ea6 100644
Binary files a/Source/mprcontents/f0/e6/f0e6b475-2955-48fb-971c-a82877570295.mxunit and b/Source/mprcontents/0e/57/0e579b8c-eb99-4f5c-8e2b-bdd78fea5294.mxunit differ
diff --git a/Source/mprcontents/0e/c3/0ec3f4a2-d2f7-488d-b3b2-09f70ff9b483.mxunit b/Source/mprcontents/0e/c3/0ec3f4a2-d2f7-488d-b3b2-09f70ff9b483.mxunit
new file mode 100644
index 00000000..2fff2d06
Binary files /dev/null and b/Source/mprcontents/0e/c3/0ec3f4a2-d2f7-488d-b3b2-09f70ff9b483.mxunit differ
diff --git a/Source/mprcontents/0f/3a/0f3a0927-c70e-4688-8ce9-c5690c829b0e.mxunit b/Source/mprcontents/0f/3a/0f3a0927-c70e-4688-8ce9-c5690c829b0e.mxunit
new file mode 100644
index 00000000..750daacc
Binary files /dev/null and b/Source/mprcontents/0f/3a/0f3a0927-c70e-4688-8ce9-c5690c829b0e.mxunit differ
diff --git a/Source/mprcontents/0f/5f/0f5f27d8-4ed0-4358-834d-88317d933b90.mxunit b/Source/mprcontents/0f/5f/0f5f27d8-4ed0-4358-834d-88317d933b90.mxunit
new file mode 100644
index 00000000..48e2e47e
Binary files /dev/null and b/Source/mprcontents/0f/5f/0f5f27d8-4ed0-4358-834d-88317d933b90.mxunit differ
diff --git a/Source/mprcontents/fc/9c/fc9c85f5-4dac-4496-a18e-edb504dd6bc3.mxunit b/Source/mprcontents/0f/c6/0fc69035-32d7-4274-a9cd-0fb290251cea.mxunit
similarity index 55%
rename from Source/mprcontents/fc/9c/fc9c85f5-4dac-4496-a18e-edb504dd6bc3.mxunit
rename to Source/mprcontents/0f/c6/0fc69035-32d7-4274-a9cd-0fb290251cea.mxunit
index cb91e815..a7014491 100644
Binary files a/Source/mprcontents/fc/9c/fc9c85f5-4dac-4496-a18e-edb504dd6bc3.mxunit and b/Source/mprcontents/0f/c6/0fc69035-32d7-4274-a9cd-0fb290251cea.mxunit differ
diff --git a/Source/mprcontents/11/ac/11ac2e56-9b58-4671-bda8-e89e00a7bb56.mxunit b/Source/mprcontents/11/ac/11ac2e56-9b58-4671-bda8-e89e00a7bb56.mxunit
index 974cb7ab..c5b83172 100644
Binary files a/Source/mprcontents/11/ac/11ac2e56-9b58-4671-bda8-e89e00a7bb56.mxunit and b/Source/mprcontents/11/ac/11ac2e56-9b58-4671-bda8-e89e00a7bb56.mxunit differ
diff --git a/Source/mprcontents/11/b6/11b6f5d9-7b86-4e97-bc5d-21d23869b776.mxunit b/Source/mprcontents/11/b6/11b6f5d9-7b86-4e97-bc5d-21d23869b776.mxunit
index b8b74642..f0e5c783 100644
Binary files a/Source/mprcontents/11/b6/11b6f5d9-7b86-4e97-bc5d-21d23869b776.mxunit and b/Source/mprcontents/11/b6/11b6f5d9-7b86-4e97-bc5d-21d23869b776.mxunit differ
diff --git a/Source/mprcontents/20/74/2074beed-9a16-47b8-92ce-d3fabbf75166.mxunit b/Source/mprcontents/12/c5/12c5bacc-8b8f-4709-97d9-5be577e793e6.mxunit
similarity index 79%
rename from Source/mprcontents/20/74/2074beed-9a16-47b8-92ce-d3fabbf75166.mxunit
rename to Source/mprcontents/12/c5/12c5bacc-8b8f-4709-97d9-5be577e793e6.mxunit
index 8d0f9b7a..d64e4d54 100644
Binary files a/Source/mprcontents/20/74/2074beed-9a16-47b8-92ce-d3fabbf75166.mxunit and b/Source/mprcontents/12/c5/12c5bacc-8b8f-4709-97d9-5be577e793e6.mxunit differ
diff --git a/Source/mprcontents/12/eb/12ebe8ed-2226-461c-96d1-5ba103541263.mxunit b/Source/mprcontents/12/eb/12ebe8ed-2226-461c-96d1-5ba103541263.mxunit
index 46469938..41a90a14 100644
Binary files a/Source/mprcontents/12/eb/12ebe8ed-2226-461c-96d1-5ba103541263.mxunit and b/Source/mprcontents/12/eb/12ebe8ed-2226-461c-96d1-5ba103541263.mxunit differ
diff --git a/Source/mprcontents/13/64/13645fc5-42c8-4181-acdc-e76751c3b283.mxunit b/Source/mprcontents/13/64/13645fc5-42c8-4181-acdc-e76751c3b283.mxunit
index b3a4b15c..f4bf3683 100644
Binary files a/Source/mprcontents/13/64/13645fc5-42c8-4181-acdc-e76751c3b283.mxunit and b/Source/mprcontents/13/64/13645fc5-42c8-4181-acdc-e76751c3b283.mxunit differ
diff --git a/Source/mprcontents/14/16/1416731b-012d-4e5d-a5ee-234f831c2ed6.mxunit b/Source/mprcontents/14/16/1416731b-012d-4e5d-a5ee-234f831c2ed6.mxunit
deleted file mode 100644
index dc1e69b5..00000000
Binary files a/Source/mprcontents/14/16/1416731b-012d-4e5d-a5ee-234f831c2ed6.mxunit and /dev/null differ
diff --git a/Source/mprcontents/51/ee/51ee6fce-e8aa-4ff2-bbc9-d0b732813eff.mxunit b/Source/mprcontents/14/18/1418cc16-ba92-4cc1-9245-0edb4f78cfba.mxunit
similarity index 51%
rename from Source/mprcontents/51/ee/51ee6fce-e8aa-4ff2-bbc9-d0b732813eff.mxunit
rename to Source/mprcontents/14/18/1418cc16-ba92-4cc1-9245-0edb4f78cfba.mxunit
index 466f2633..8938822e 100644
Binary files a/Source/mprcontents/51/ee/51ee6fce-e8aa-4ff2-bbc9-d0b732813eff.mxunit and b/Source/mprcontents/14/18/1418cc16-ba92-4cc1-9245-0edb4f78cfba.mxunit differ
diff --git a/Source/mprcontents/14/33/14338159-d0e0-4e90-9c78-da0f4877dd4a.mxunit b/Source/mprcontents/14/33/14338159-d0e0-4e90-9c78-da0f4877dd4a.mxunit
new file mode 100644
index 00000000..331433ca
Binary files /dev/null and b/Source/mprcontents/14/33/14338159-d0e0-4e90-9c78-da0f4877dd4a.mxunit differ
diff --git a/Source/mprcontents/14/4e/144eca03-8b66-4d3e-aaac-ae3a4856148b.mxunit b/Source/mprcontents/14/4e/144eca03-8b66-4d3e-aaac-ae3a4856148b.mxunit
deleted file mode 100644
index 98cbb707..00000000
Binary files a/Source/mprcontents/14/4e/144eca03-8b66-4d3e-aaac-ae3a4856148b.mxunit and /dev/null differ
diff --git a/Source/mprcontents/14/79/1479e589-18a3-437c-917c-dc8ce3752dbb.mxunit b/Source/mprcontents/14/79/1479e589-18a3-437c-917c-dc8ce3752dbb.mxunit
new file mode 100644
index 00000000..23515c78
Binary files /dev/null and b/Source/mprcontents/14/79/1479e589-18a3-437c-917c-dc8ce3752dbb.mxunit differ
diff --git a/Source/mprcontents/14/b2/14b2189e-cd06-4be0-8ec3-dcb2cd135a2d.mxunit b/Source/mprcontents/14/b2/14b2189e-cd06-4be0-8ec3-dcb2cd135a2d.mxunit
index 0c414869..5388a8a4 100644
Binary files a/Source/mprcontents/14/b2/14b2189e-cd06-4be0-8ec3-dcb2cd135a2d.mxunit and b/Source/mprcontents/14/b2/14b2189e-cd06-4be0-8ec3-dcb2cd135a2d.mxunit differ
diff --git a/Source/mprcontents/14/d2/14d2059d-0439-41d4-a042-2dfc73689381.mxunit b/Source/mprcontents/14/d2/14d2059d-0439-41d4-a042-2dfc73689381.mxunit
deleted file mode 100644
index 7aefad19..00000000
Binary files a/Source/mprcontents/14/d2/14d2059d-0439-41d4-a042-2dfc73689381.mxunit and /dev/null differ
diff --git a/Source/mprcontents/14/d9/14d975f4-172e-48c9-84ac-82bfebb5c000.mxunit b/Source/mprcontents/14/d9/14d975f4-172e-48c9-84ac-82bfebb5c000.mxunit
new file mode 100644
index 00000000..ca820181
Binary files /dev/null and b/Source/mprcontents/14/d9/14d975f4-172e-48c9-84ac-82bfebb5c000.mxunit differ
diff --git a/Source/mprcontents/15/67/1567b06d-42a4-46b2-a688-214dc644a517.mxunit b/Source/mprcontents/15/67/1567b06d-42a4-46b2-a688-214dc644a517.mxunit
index fb5f998c..7eca1abf 100644
Binary files a/Source/mprcontents/15/67/1567b06d-42a4-46b2-a688-214dc644a517.mxunit and b/Source/mprcontents/15/67/1567b06d-42a4-46b2-a688-214dc644a517.mxunit differ
diff --git a/Source/mprcontents/15/96/1596583e-d20f-4b21-a44b-b5d1a2eadf4d.mxunit b/Source/mprcontents/15/96/1596583e-d20f-4b21-a44b-b5d1a2eadf4d.mxunit
deleted file mode 100644
index 453e251b..00000000
Binary files a/Source/mprcontents/15/96/1596583e-d20f-4b21-a44b-b5d1a2eadf4d.mxunit and /dev/null differ
diff --git a/Source/mprcontents/16/a1/16a160e9-9185-4195-a2e4-4d84aebeeac8.mxunit b/Source/mprcontents/16/a1/16a160e9-9185-4195-a2e4-4d84aebeeac8.mxunit
new file mode 100644
index 00000000..c383afc2
Binary files /dev/null and b/Source/mprcontents/16/a1/16a160e9-9185-4195-a2e4-4d84aebeeac8.mxunit differ
diff --git a/Source/mprcontents/16/ab/16ab94ec-d05b-4c3a-9440-6cd027bce5ba.mxunit b/Source/mprcontents/16/ab/16ab94ec-d05b-4c3a-9440-6cd027bce5ba.mxunit
deleted file mode 100644
index 6ba2e83c..00000000
Binary files a/Source/mprcontents/16/ab/16ab94ec-d05b-4c3a-9440-6cd027bce5ba.mxunit and /dev/null differ
diff --git a/Source/mprcontents/17/7a/177a8283-26a6-4ef5-bfa5-270baa0f61ed.mxunit b/Source/mprcontents/17/7a/177a8283-26a6-4ef5-bfa5-270baa0f61ed.mxunit
deleted file mode 100644
index d7917fdf..00000000
Binary files a/Source/mprcontents/17/7a/177a8283-26a6-4ef5-bfa5-270baa0f61ed.mxunit and /dev/null differ
diff --git a/Source/mprcontents/17/98/17984e14-9d56-48f3-a518-9e6dc4434339.mxunit b/Source/mprcontents/17/98/17984e14-9d56-48f3-a518-9e6dc4434339.mxunit
new file mode 100644
index 00000000..68ea667a
Binary files /dev/null and b/Source/mprcontents/17/98/17984e14-9d56-48f3-a518-9e6dc4434339.mxunit differ
diff --git a/Source/mprcontents/17/d0/17d09350-e8a0-4ae2-a833-792b7b7497ec.mxunit b/Source/mprcontents/17/d0/17d09350-e8a0-4ae2-a833-792b7b7497ec.mxunit
new file mode 100644
index 00000000..1f08d666
Binary files /dev/null and b/Source/mprcontents/17/d0/17d09350-e8a0-4ae2-a833-792b7b7497ec.mxunit differ
diff --git a/Source/mprcontents/18/12/18121c06-1798-47a9-965b-61eab01ae1b4.mxunit b/Source/mprcontents/18/12/18121c06-1798-47a9-965b-61eab01ae1b4.mxunit
new file mode 100644
index 00000000..e856664d
Binary files /dev/null and b/Source/mprcontents/18/12/18121c06-1798-47a9-965b-61eab01ae1b4.mxunit differ
diff --git a/Source/mprcontents/18/f2/18f22038-b11d-4858-9000-cbf9595d9afc.mxunit b/Source/mprcontents/18/f2/18f22038-b11d-4858-9000-cbf9595d9afc.mxunit
new file mode 100644
index 00000000..c4f0cced
Binary files /dev/null and b/Source/mprcontents/18/f2/18f22038-b11d-4858-9000-cbf9595d9afc.mxunit differ
diff --git a/Source/mprcontents/19/6f/196f9060-c84c-43be-ab96-044fb4124782.mxunit b/Source/mprcontents/19/6f/196f9060-c84c-43be-ab96-044fb4124782.mxunit
deleted file mode 100644
index 6ec492a4..00000000
Binary files a/Source/mprcontents/19/6f/196f9060-c84c-43be-ab96-044fb4124782.mxunit and /dev/null differ
diff --git a/Source/mprcontents/19/fa/19fa2b04-51d3-4981-a53a-dbcb7301d29b.mxunit b/Source/mprcontents/19/fa/19fa2b04-51d3-4981-a53a-dbcb7301d29b.mxunit
deleted file mode 100644
index 004a2928..00000000
Binary files a/Source/mprcontents/19/fa/19fa2b04-51d3-4981-a53a-dbcb7301d29b.mxunit and /dev/null differ
diff --git a/Source/mprcontents/1a/32/1a32b387-f28c-4e26-b82a-db2156ff7c7d.mxunit b/Source/mprcontents/1a/32/1a32b387-f28c-4e26-b82a-db2156ff7c7d.mxunit
index ca4b43fd..7d7b4564 100644
Binary files a/Source/mprcontents/1a/32/1a32b387-f28c-4e26-b82a-db2156ff7c7d.mxunit and b/Source/mprcontents/1a/32/1a32b387-f28c-4e26-b82a-db2156ff7c7d.mxunit differ
diff --git a/Source/mprcontents/26/d6/26d679a8-fd22-404f-a8fe-8d00f7040efb.mxunit b/Source/mprcontents/1a/6e/1a6eceef-6037-4c55-b407-c146d0dde2d3.mxunit
similarity index 74%
rename from Source/mprcontents/26/d6/26d679a8-fd22-404f-a8fe-8d00f7040efb.mxunit
rename to Source/mprcontents/1a/6e/1a6eceef-6037-4c55-b407-c146d0dde2d3.mxunit
index 6c57e469..2fed0bc8 100644
Binary files a/Source/mprcontents/26/d6/26d679a8-fd22-404f-a8fe-8d00f7040efb.mxunit and b/Source/mprcontents/1a/6e/1a6eceef-6037-4c55-b407-c146d0dde2d3.mxunit differ
diff --git a/Source/mprcontents/1a/79/1a792222-9def-45a2-9cb1-e9209fc510d0.mxunit b/Source/mprcontents/1a/79/1a792222-9def-45a2-9cb1-e9209fc510d0.mxunit
index f6c897ec..44c6d076 100644
Binary files a/Source/mprcontents/1a/79/1a792222-9def-45a2-9cb1-e9209fc510d0.mxunit and b/Source/mprcontents/1a/79/1a792222-9def-45a2-9cb1-e9209fc510d0.mxunit differ
diff --git a/Source/mprcontents/1a/cd/1acd930b-c0d3-4055-a730-f810b6b866c8.mxunit b/Source/mprcontents/1a/cd/1acd930b-c0d3-4055-a730-f810b6b866c8.mxunit
new file mode 100644
index 00000000..06490082
Binary files /dev/null and b/Source/mprcontents/1a/cd/1acd930b-c0d3-4055-a730-f810b6b866c8.mxunit differ
diff --git a/Source/mprcontents/1a/fa/1afa95c4-e91f-4789-844e-c166cc28f44b.mxunit b/Source/mprcontents/1a/fa/1afa95c4-e91f-4789-844e-c166cc28f44b.mxunit
deleted file mode 100644
index 8b604069..00000000
Binary files a/Source/mprcontents/1a/fa/1afa95c4-e91f-4789-844e-c166cc28f44b.mxunit and /dev/null differ
diff --git a/Source/mprcontents/1b/6d/1b6dc3db-02f4-4510-a8c6-3a95ba07d898.mxunit b/Source/mprcontents/1b/6d/1b6dc3db-02f4-4510-a8c6-3a95ba07d898.mxunit
new file mode 100644
index 00000000..dd328ab9
Binary files /dev/null and b/Source/mprcontents/1b/6d/1b6dc3db-02f4-4510-a8c6-3a95ba07d898.mxunit differ
diff --git a/Source/mprcontents/1b/75/1b750222-6540-43a9-a7c6-176e2b37b0cd.mxunit b/Source/mprcontents/1b/75/1b750222-6540-43a9-a7c6-176e2b37b0cd.mxunit
new file mode 100644
index 00000000..1d250eb8
Binary files /dev/null and b/Source/mprcontents/1b/75/1b750222-6540-43a9-a7c6-176e2b37b0cd.mxunit differ
diff --git a/Source/mprcontents/1d/c3/1dc3075e-698b-4a59-93e3-9d2173cd113e.mxunit b/Source/mprcontents/1d/c3/1dc3075e-698b-4a59-93e3-9d2173cd113e.mxunit
new file mode 100644
index 00000000..85f9d5e7
Binary files /dev/null and b/Source/mprcontents/1d/c3/1dc3075e-698b-4a59-93e3-9d2173cd113e.mxunit differ
diff --git a/Source/mprcontents/1d/f8/1df8c316-fe50-4d97-92c8-108f07bba2c2.mxunit b/Source/mprcontents/1d/f8/1df8c316-fe50-4d97-92c8-108f07bba2c2.mxunit
deleted file mode 100644
index c161b829..00000000
Binary files a/Source/mprcontents/1d/f8/1df8c316-fe50-4d97-92c8-108f07bba2c2.mxunit and /dev/null differ
diff --git a/Source/mprcontents/cd/24/cd244108-9da6-4cfc-adb2-62e7ae28c1c6.mxunit b/Source/mprcontents/1e/19/1e19a626-d0e5-4edd-88eb-09a3c7990ea9.mxunit
similarity index 77%
rename from Source/mprcontents/cd/24/cd244108-9da6-4cfc-adb2-62e7ae28c1c6.mxunit
rename to Source/mprcontents/1e/19/1e19a626-d0e5-4edd-88eb-09a3c7990ea9.mxunit
index b55aba4f..8ff65a87 100644
Binary files a/Source/mprcontents/cd/24/cd244108-9da6-4cfc-adb2-62e7ae28c1c6.mxunit and b/Source/mprcontents/1e/19/1e19a626-d0e5-4edd-88eb-09a3c7990ea9.mxunit differ
diff --git a/Source/mprcontents/1e/30/1e304b7b-b47a-49ff-a724-e1d60165eca3.mxunit b/Source/mprcontents/1e/30/1e304b7b-b47a-49ff-a724-e1d60165eca3.mxunit
index b5617fe5..4fbc7c49 100644
Binary files a/Source/mprcontents/1e/30/1e304b7b-b47a-49ff-a724-e1d60165eca3.mxunit and b/Source/mprcontents/1e/30/1e304b7b-b47a-49ff-a724-e1d60165eca3.mxunit differ
diff --git a/Source/mprcontents/cd/30/cd30c3e1-b72f-400a-b912-7dea1baeccc8.mxunit b/Source/mprcontents/1e/d8/1ed82348-4669-4a8f-a7cf-678541cec89f.mxunit
similarity index 50%
rename from Source/mprcontents/cd/30/cd30c3e1-b72f-400a-b912-7dea1baeccc8.mxunit
rename to Source/mprcontents/1e/d8/1ed82348-4669-4a8f-a7cf-678541cec89f.mxunit
index 9aeec50b..ef93bdc2 100644
Binary files a/Source/mprcontents/cd/30/cd30c3e1-b72f-400a-b912-7dea1baeccc8.mxunit and b/Source/mprcontents/1e/d8/1ed82348-4669-4a8f-a7cf-678541cec89f.mxunit differ
diff --git a/Source/mprcontents/20/68/2068ebb7-2950-42f9-a586-f034f439aab6.mxunit b/Source/mprcontents/20/68/2068ebb7-2950-42f9-a586-f034f439aab6.mxunit
deleted file mode 100644
index 23aefae1..00000000
Binary files a/Source/mprcontents/20/68/2068ebb7-2950-42f9-a586-f034f439aab6.mxunit and /dev/null differ
diff --git a/Source/mprcontents/20/83/20838786-a3e2-43bf-a3c4-2d043ab06162.mxunit b/Source/mprcontents/20/83/20838786-a3e2-43bf-a3c4-2d043ab06162.mxunit
deleted file mode 100644
index 07d3d36f..00000000
Binary files a/Source/mprcontents/20/83/20838786-a3e2-43bf-a3c4-2d043ab06162.mxunit and /dev/null differ
diff --git a/Source/mprcontents/21/24/2124b52d-dbc6-417f-9910-8697c8ce0c9f.mxunit b/Source/mprcontents/21/24/2124b52d-dbc6-417f-9910-8697c8ce0c9f.mxunit
deleted file mode 100644
index 325039e4..00000000
Binary files a/Source/mprcontents/21/24/2124b52d-dbc6-417f-9910-8697c8ce0c9f.mxunit and /dev/null differ
diff --git a/Source/mprcontents/21/43/21433ad2-7b9f-4983-8e2c-c753ac51a2d9.mxunit b/Source/mprcontents/21/43/21433ad2-7b9f-4983-8e2c-c753ac51a2d9.mxunit
new file mode 100644
index 00000000..a85dfc70
Binary files /dev/null and b/Source/mprcontents/21/43/21433ad2-7b9f-4983-8e2c-c753ac51a2d9.mxunit differ
diff --git a/Source/mprcontents/21/b7/21b722c4-c590-408a-9db3-3cb3f45fee35.mxunit b/Source/mprcontents/21/b7/21b722c4-c590-408a-9db3-3cb3f45fee35.mxunit
new file mode 100644
index 00000000..c4a47b69
Binary files /dev/null and b/Source/mprcontents/21/b7/21b722c4-c590-408a-9db3-3cb3f45fee35.mxunit differ
diff --git a/Source/mprcontents/22/64/22643e02-ad7a-427d-8b79-8338f34dc9f9.mxunit b/Source/mprcontents/22/64/22643e02-ad7a-427d-8b79-8338f34dc9f9.mxunit
new file mode 100644
index 00000000..2298b252
Binary files /dev/null and b/Source/mprcontents/22/64/22643e02-ad7a-427d-8b79-8338f34dc9f9.mxunit differ
diff --git a/Source/mprcontents/22/cf/22cf90ad-3dce-4c39-8e04-5d0e8b8637dc.mxunit b/Source/mprcontents/22/cf/22cf90ad-3dce-4c39-8e04-5d0e8b8637dc.mxunit
deleted file mode 100644
index 31662ef3..00000000
Binary files a/Source/mprcontents/22/cf/22cf90ad-3dce-4c39-8e04-5d0e8b8637dc.mxunit and /dev/null differ
diff --git a/Source/mprcontents/23/4d/234d3860-41be-46ad-aca3-70f3c7710955.mxunit b/Source/mprcontents/23/4d/234d3860-41be-46ad-aca3-70f3c7710955.mxunit
new file mode 100644
index 00000000..7663fd1a
Binary files /dev/null and b/Source/mprcontents/23/4d/234d3860-41be-46ad-aca3-70f3c7710955.mxunit differ
diff --git a/Source/mprcontents/72/69/726974e1-c304-4a94-9f12-e859bd27aff5.mxunit b/Source/mprcontents/24/c6/24c60c9b-28cd-4897-8cf6-b0d649326cec.mxunit
similarity index 57%
rename from Source/mprcontents/72/69/726974e1-c304-4a94-9f12-e859bd27aff5.mxunit
rename to Source/mprcontents/24/c6/24c60c9b-28cd-4897-8cf6-b0d649326cec.mxunit
index 18ff8200..2899561c 100644
Binary files a/Source/mprcontents/72/69/726974e1-c304-4a94-9f12-e859bd27aff5.mxunit and b/Source/mprcontents/24/c6/24c60c9b-28cd-4897-8cf6-b0d649326cec.mxunit differ
diff --git a/Source/mprcontents/25/2a/252a1560-9ce6-4667-8879-5b2b5acf18ed.mxunit b/Source/mprcontents/25/2a/252a1560-9ce6-4667-8879-5b2b5acf18ed.mxunit
index 8b6a2dd6..14ea84b8 100644
Binary files a/Source/mprcontents/25/2a/252a1560-9ce6-4667-8879-5b2b5acf18ed.mxunit and b/Source/mprcontents/25/2a/252a1560-9ce6-4667-8879-5b2b5acf18ed.mxunit differ
diff --git a/Source/mprcontents/25/ab/25ab5ca2-dfe4-4dfc-aa29-1ddc979bf3e1.mxunit b/Source/mprcontents/25/ab/25ab5ca2-dfe4-4dfc-aa29-1ddc979bf3e1.mxunit
index a6cc47b3..1777b872 100644
Binary files a/Source/mprcontents/25/ab/25ab5ca2-dfe4-4dfc-aa29-1ddc979bf3e1.mxunit and b/Source/mprcontents/25/ab/25ab5ca2-dfe4-4dfc-aa29-1ddc979bf3e1.mxunit differ
diff --git a/Source/mprcontents/26/fe/26fe3bec-8041-49f9-884c-3166fd58b715.mxunit b/Source/mprcontents/26/fe/26fe3bec-8041-49f9-884c-3166fd58b715.mxunit
new file mode 100644
index 00000000..b0402c5a
Binary files /dev/null and b/Source/mprcontents/26/fe/26fe3bec-8041-49f9-884c-3166fd58b715.mxunit differ
diff --git a/Source/mprcontents/27/29/2729060b-0fa9-490f-be2a-6ad2475b7e7d.mxunit b/Source/mprcontents/27/29/2729060b-0fa9-490f-be2a-6ad2475b7e7d.mxunit
deleted file mode 100644
index 59183423..00000000
Binary files a/Source/mprcontents/27/29/2729060b-0fa9-490f-be2a-6ad2475b7e7d.mxunit and /dev/null differ
diff --git a/Source/mprcontents/27/2d/272d96d4-6b86-4a05-a9ca-146b5a9567e5.mxunit b/Source/mprcontents/27/2d/272d96d4-6b86-4a05-a9ca-146b5a9567e5.mxunit
new file mode 100644
index 00000000..a15d7632
Binary files /dev/null and b/Source/mprcontents/27/2d/272d96d4-6b86-4a05-a9ca-146b5a9567e5.mxunit differ
diff --git a/Source/mprcontents/27/f0/27f012ae-82d4-4e39-8e1a-9d66462c1b53.mxunit b/Source/mprcontents/27/f0/27f012ae-82d4-4e39-8e1a-9d66462c1b53.mxunit
new file mode 100644
index 00000000..a9eb5062
Binary files /dev/null and b/Source/mprcontents/27/f0/27f012ae-82d4-4e39-8e1a-9d66462c1b53.mxunit differ
diff --git a/Source/mprcontents/dc/df/dcdff04a-4b39-4cbc-805b-33041017b664.mxunit b/Source/mprcontents/27/f6/27f6aab2-2ae2-4b94-8c94-4f3db2352d0f.mxunit
similarity index 83%
rename from Source/mprcontents/dc/df/dcdff04a-4b39-4cbc-805b-33041017b664.mxunit
rename to Source/mprcontents/27/f6/27f6aab2-2ae2-4b94-8c94-4f3db2352d0f.mxunit
index 68693563..35cee114 100644
Binary files a/Source/mprcontents/dc/df/dcdff04a-4b39-4cbc-805b-33041017b664.mxunit and b/Source/mprcontents/27/f6/27f6aab2-2ae2-4b94-8c94-4f3db2352d0f.mxunit differ
diff --git a/Source/mprcontents/28/0c/280cbfeb-db4b-44a6-b24b-0931a2e43a7d.mxunit b/Source/mprcontents/28/0c/280cbfeb-db4b-44a6-b24b-0931a2e43a7d.mxunit
new file mode 100644
index 00000000..899feca3
Binary files /dev/null and b/Source/mprcontents/28/0c/280cbfeb-db4b-44a6-b24b-0931a2e43a7d.mxunit differ
diff --git a/Source/mprcontents/28/41/284119fc-3bd9-4fa5-8ce1-d7505a5f67c8.mxunit b/Source/mprcontents/28/41/284119fc-3bd9-4fa5-8ce1-d7505a5f67c8.mxunit
deleted file mode 100644
index b52c2388..00000000
Binary files a/Source/mprcontents/28/41/284119fc-3bd9-4fa5-8ce1-d7505a5f67c8.mxunit and /dev/null differ
diff --git a/Source/mprcontents/28/7b/287bafb4-4aed-47d3-bf0b-1e592dddd981.mxunit b/Source/mprcontents/28/7b/287bafb4-4aed-47d3-bf0b-1e592dddd981.mxunit
deleted file mode 100644
index 15f233bf..00000000
Binary files a/Source/mprcontents/28/7b/287bafb4-4aed-47d3-bf0b-1e592dddd981.mxunit and /dev/null differ
diff --git a/Source/mprcontents/29/69/2969d0aa-647f-4793-8461-09b51cc45caa.mxunit b/Source/mprcontents/29/69/2969d0aa-647f-4793-8461-09b51cc45caa.mxunit
new file mode 100644
index 00000000..2bb02f24
Binary files /dev/null and b/Source/mprcontents/29/69/2969d0aa-647f-4793-8461-09b51cc45caa.mxunit differ
diff --git a/Source/mprcontents/29/a1/29a12db0-f159-4445-865b-836dc07c3287.mxunit b/Source/mprcontents/29/a1/29a12db0-f159-4445-865b-836dc07c3287.mxunit
deleted file mode 100644
index 36e5cdcd..00000000
Binary files a/Source/mprcontents/29/a1/29a12db0-f159-4445-865b-836dc07c3287.mxunit and /dev/null differ
diff --git a/Source/mprcontents/2a/12/2a120640-528c-47f6-b401-d81972d16eca.mxunit b/Source/mprcontents/2a/12/2a120640-528c-47f6-b401-d81972d16eca.mxunit
new file mode 100644
index 00000000..f0d2dacd
Binary files /dev/null and b/Source/mprcontents/2a/12/2a120640-528c-47f6-b401-d81972d16eca.mxunit differ
diff --git a/Source/mprcontents/13/7b/137b2f49-b7fe-460b-b15f-9a7bfd78af35.mxunit b/Source/mprcontents/2a/ea/2aea9eaf-7a80-46cf-aa27-71c6fde1e741.mxunit
similarity index 72%
rename from Source/mprcontents/13/7b/137b2f49-b7fe-460b-b15f-9a7bfd78af35.mxunit
rename to Source/mprcontents/2a/ea/2aea9eaf-7a80-46cf-aa27-71c6fde1e741.mxunit
index 822c8726..f08eaa7f 100644
Binary files a/Source/mprcontents/13/7b/137b2f49-b7fe-460b-b15f-9a7bfd78af35.mxunit and b/Source/mprcontents/2a/ea/2aea9eaf-7a80-46cf-aa27-71c6fde1e741.mxunit differ
diff --git a/Source/mprcontents/2a/f5/2af5f4d5-6fb0-460e-9b11-881a2ef52527.mxunit b/Source/mprcontents/2a/f5/2af5f4d5-6fb0-460e-9b11-881a2ef52527.mxunit
new file mode 100644
index 00000000..193a60e7
Binary files /dev/null and b/Source/mprcontents/2a/f5/2af5f4d5-6fb0-460e-9b11-881a2ef52527.mxunit differ
diff --git a/Source/mprcontents/fa/60/fa60c3f3-2d83-4761-b844-250bdd50cc80.mxunit b/Source/mprcontents/2b/03/2b034d14-04e5-434b-8fc2-5038edee19dc.mxunit
similarity index 98%
rename from Source/mprcontents/fa/60/fa60c3f3-2d83-4761-b844-250bdd50cc80.mxunit
rename to Source/mprcontents/2b/03/2b034d14-04e5-434b-8fc2-5038edee19dc.mxunit
index d7467dc0..8555bea2 100644
Binary files a/Source/mprcontents/fa/60/fa60c3f3-2d83-4761-b844-250bdd50cc80.mxunit and b/Source/mprcontents/2b/03/2b034d14-04e5-434b-8fc2-5038edee19dc.mxunit differ
diff --git a/Source/mprcontents/2b/24/2b24b2d0-2e5e-4453-a675-e16596346457.mxunit b/Source/mprcontents/2b/24/2b24b2d0-2e5e-4453-a675-e16596346457.mxunit
deleted file mode 100644
index 48054a9d..00000000
Binary files a/Source/mprcontents/2b/24/2b24b2d0-2e5e-4453-a675-e16596346457.mxunit and /dev/null differ
diff --git a/Source/mprcontents/8a/2c/8a2c97d1-8d44-42aa-a959-eb2dcd387950.mxunit b/Source/mprcontents/2b/c7/2bc7aa71-808b-40fb-ad31-97690c49c473.mxunit
similarity index 72%
rename from Source/mprcontents/8a/2c/8a2c97d1-8d44-42aa-a959-eb2dcd387950.mxunit
rename to Source/mprcontents/2b/c7/2bc7aa71-808b-40fb-ad31-97690c49c473.mxunit
index 03a1ae83..4f65ff1e 100644
Binary files a/Source/mprcontents/8a/2c/8a2c97d1-8d44-42aa-a959-eb2dcd387950.mxunit and b/Source/mprcontents/2b/c7/2bc7aa71-808b-40fb-ad31-97690c49c473.mxunit differ
diff --git a/Source/mprcontents/53/67/5367514b-9fe1-4bcc-b65a-bb4deb97d007.mxunit b/Source/mprcontents/2c/01/2c01b974-8f27-490f-8aa1-d905aefa706c.mxunit
similarity index 50%
rename from Source/mprcontents/53/67/5367514b-9fe1-4bcc-b65a-bb4deb97d007.mxunit
rename to Source/mprcontents/2c/01/2c01b974-8f27-490f-8aa1-d905aefa706c.mxunit
index 6be2c170..adac213a 100644
Binary files a/Source/mprcontents/53/67/5367514b-9fe1-4bcc-b65a-bb4deb97d007.mxunit and b/Source/mprcontents/2c/01/2c01b974-8f27-490f-8aa1-d905aefa706c.mxunit differ
diff --git a/Source/mprcontents/2d/4b/2d4b2235-fa8d-4bcd-b4c9-bad7f48a056d.mxunit b/Source/mprcontents/2d/4b/2d4b2235-fa8d-4bcd-b4c9-bad7f48a056d.mxunit
deleted file mode 100644
index cea0c0e7..00000000
Binary files a/Source/mprcontents/2d/4b/2d4b2235-fa8d-4bcd-b4c9-bad7f48a056d.mxunit and /dev/null differ
diff --git a/Source/mprcontents/2d/af/2daf06b1-cedf-419c-871e-4354f86136be.mxunit b/Source/mprcontents/2d/af/2daf06b1-cedf-419c-871e-4354f86136be.mxunit
deleted file mode 100644
index 4f75ff0d..00000000
Binary files a/Source/mprcontents/2d/af/2daf06b1-cedf-419c-871e-4354f86136be.mxunit and /dev/null differ
diff --git a/Source/mprcontents/2e/9e/2e9e5428-c11f-4a54-b288-55987f0790d9.mxunit b/Source/mprcontents/2e/9e/2e9e5428-c11f-4a54-b288-55987f0790d9.mxunit
new file mode 100644
index 00000000..50435d5a
Binary files /dev/null and b/Source/mprcontents/2e/9e/2e9e5428-c11f-4a54-b288-55987f0790d9.mxunit differ
diff --git a/Source/mprcontents/2f/19/2f19e03b-55d0-4d83-a881-04fa8fe705f8.mxunit b/Source/mprcontents/2f/19/2f19e03b-55d0-4d83-a881-04fa8fe705f8.mxunit
index 3eb3a776..c7ba9f36 100644
Binary files a/Source/mprcontents/2f/19/2f19e03b-55d0-4d83-a881-04fa8fe705f8.mxunit and b/Source/mprcontents/2f/19/2f19e03b-55d0-4d83-a881-04fa8fe705f8.mxunit differ
diff --git a/Source/mprcontents/30/39/3039280a-2c4d-4b1b-a5a0-ba64e9e9bc13.mxunit b/Source/mprcontents/30/39/3039280a-2c4d-4b1b-a5a0-ba64e9e9bc13.mxunit
deleted file mode 100644
index c1166c1d..00000000
Binary files a/Source/mprcontents/30/39/3039280a-2c4d-4b1b-a5a0-ba64e9e9bc13.mxunit and /dev/null differ
diff --git a/Source/mprcontents/31/5a/315a9177-47a2-4c5c-bf75-a6ad6132567d.mxunit b/Source/mprcontents/31/5a/315a9177-47a2-4c5c-bf75-a6ad6132567d.mxunit
new file mode 100644
index 00000000..f82e9d7f
Binary files /dev/null and b/Source/mprcontents/31/5a/315a9177-47a2-4c5c-bf75-a6ad6132567d.mxunit differ
diff --git a/Source/mprcontents/31/ce/31ce5813-5ba4-4888-87c2-3be33f4843fe.mxunit b/Source/mprcontents/31/ce/31ce5813-5ba4-4888-87c2-3be33f4843fe.mxunit
new file mode 100644
index 00000000..08b3c3f8
Binary files /dev/null and b/Source/mprcontents/31/ce/31ce5813-5ba4-4888-87c2-3be33f4843fe.mxunit differ
diff --git a/Source/mprcontents/6f/ff/6fff71ea-f76e-4a64-b4ee-6551f7bd6819.mxunit b/Source/mprcontents/32/29/3229da2a-e45e-4078-b581-6ca2a5d537b1.mxunit
similarity index 94%
rename from Source/mprcontents/6f/ff/6fff71ea-f76e-4a64-b4ee-6551f7bd6819.mxunit
rename to Source/mprcontents/32/29/3229da2a-e45e-4078-b581-6ca2a5d537b1.mxunit
index f82c2d58..e81ce6fa 100644
Binary files a/Source/mprcontents/6f/ff/6fff71ea-f76e-4a64-b4ee-6551f7bd6819.mxunit and b/Source/mprcontents/32/29/3229da2a-e45e-4078-b581-6ca2a5d537b1.mxunit differ
diff --git a/Source/mprcontents/33/7d/337d8418-b95f-422a-9e7c-0e28562e7ec2.mxunit b/Source/mprcontents/33/7d/337d8418-b95f-422a-9e7c-0e28562e7ec2.mxunit
index 4492cd9f..c5be867c 100644
Binary files a/Source/mprcontents/33/7d/337d8418-b95f-422a-9e7c-0e28562e7ec2.mxunit and b/Source/mprcontents/33/7d/337d8418-b95f-422a-9e7c-0e28562e7ec2.mxunit differ
diff --git a/Source/mprcontents/34/07/34070ae7-5001-43a0-8ca7-fea957635bb9.mxunit b/Source/mprcontents/34/07/34070ae7-5001-43a0-8ca7-fea957635bb9.mxunit
deleted file mode 100644
index 1048b1e0..00000000
Binary files a/Source/mprcontents/34/07/34070ae7-5001-43a0-8ca7-fea957635bb9.mxunit and /dev/null differ
diff --git a/Source/mprcontents/35/19/351978b6-f760-48d0-bad9-3b69db1879d6.mxunit b/Source/mprcontents/35/19/351978b6-f760-48d0-bad9-3b69db1879d6.mxunit
deleted file mode 100644
index ca090837..00000000
Binary files a/Source/mprcontents/35/19/351978b6-f760-48d0-bad9-3b69db1879d6.mxunit and /dev/null differ
diff --git a/Source/mprcontents/35/6c/356c5e29-d5a0-499a-a3b9-79ecfe91feca.mxunit b/Source/mprcontents/35/6c/356c5e29-d5a0-499a-a3b9-79ecfe91feca.mxunit
new file mode 100644
index 00000000..03ad812c
Binary files /dev/null and b/Source/mprcontents/35/6c/356c5e29-d5a0-499a-a3b9-79ecfe91feca.mxunit differ
diff --git a/Source/mprcontents/36/a7/36a7a830-5781-4e31-8f83-9d61d76387c3.mxunit b/Source/mprcontents/36/a7/36a7a830-5781-4e31-8f83-9d61d76387c3.mxunit
new file mode 100644
index 00000000..d7c0bf91
Binary files /dev/null and b/Source/mprcontents/36/a7/36a7a830-5781-4e31-8f83-9d61d76387c3.mxunit differ
diff --git a/Source/mprcontents/37/a6/37a62c79-2730-497f-b3c7-2b0708f6030a.mxunit b/Source/mprcontents/37/a6/37a62c79-2730-497f-b3c7-2b0708f6030a.mxunit
index ead52f62..3a0944a3 100644
Binary files a/Source/mprcontents/37/a6/37a62c79-2730-497f-b3c7-2b0708f6030a.mxunit and b/Source/mprcontents/37/a6/37a62c79-2730-497f-b3c7-2b0708f6030a.mxunit differ
diff --git a/Source/mprcontents/3a/a4/3aa42605-64e4-477c-93e1-b064dd4c71c6.mxunit b/Source/mprcontents/3a/a4/3aa42605-64e4-477c-93e1-b064dd4c71c6.mxunit
deleted file mode 100644
index 4a88233c..00000000
Binary files a/Source/mprcontents/3a/a4/3aa42605-64e4-477c-93e1-b064dd4c71c6.mxunit and /dev/null differ
diff --git a/Source/mprcontents/3b/95/3b95c6c5-b189-4bf7-8474-f47255a421d1.mxunit b/Source/mprcontents/3b/95/3b95c6c5-b189-4bf7-8474-f47255a421d1.mxunit
deleted file mode 100644
index 54f777f9..00000000
Binary files a/Source/mprcontents/3b/95/3b95c6c5-b189-4bf7-8474-f47255a421d1.mxunit and /dev/null differ
diff --git a/Source/mprcontents/3c/19/3c19d915-b8c1-4393-88ce-fa84739fd284.mxunit b/Source/mprcontents/3c/19/3c19d915-b8c1-4393-88ce-fa84739fd284.mxunit
index 2b2fc8f3..aaa0e5a0 100644
Binary files a/Source/mprcontents/3c/19/3c19d915-b8c1-4393-88ce-fa84739fd284.mxunit and b/Source/mprcontents/3c/19/3c19d915-b8c1-4393-88ce-fa84739fd284.mxunit differ
diff --git a/Source/mprcontents/3c/23/3c238961-f94f-4fbe-a0aa-c4f35fb4064c.mxunit b/Source/mprcontents/3c/23/3c238961-f94f-4fbe-a0aa-c4f35fb4064c.mxunit
index b66dc9d6..cbc41358 100644
Binary files a/Source/mprcontents/3c/23/3c238961-f94f-4fbe-a0aa-c4f35fb4064c.mxunit and b/Source/mprcontents/3c/23/3c238961-f94f-4fbe-a0aa-c4f35fb4064c.mxunit differ
diff --git a/Source/mprcontents/3c/47/3c47b472-c3a6-4871-ba7d-e42aa2425866.mxunit b/Source/mprcontents/3c/47/3c47b472-c3a6-4871-ba7d-e42aa2425866.mxunit
deleted file mode 100644
index af262961..00000000
Binary files a/Source/mprcontents/3c/47/3c47b472-c3a6-4871-ba7d-e42aa2425866.mxunit and /dev/null differ
diff --git a/Source/mprcontents/91/bd/91bd1d8d-96c6-45eb-935c-1a1f22ae3f50.mxunit b/Source/mprcontents/3d/74/3d74f442-61ca-4185-a45b-549bbf7c23da.mxunit
similarity index 92%
rename from Source/mprcontents/91/bd/91bd1d8d-96c6-45eb-935c-1a1f22ae3f50.mxunit
rename to Source/mprcontents/3d/74/3d74f442-61ca-4185-a45b-549bbf7c23da.mxunit
index 763d3f53..88af5761 100644
Binary files a/Source/mprcontents/91/bd/91bd1d8d-96c6-45eb-935c-1a1f22ae3f50.mxunit and b/Source/mprcontents/3d/74/3d74f442-61ca-4185-a45b-549bbf7c23da.mxunit differ
diff --git a/Source/mprcontents/3d/bd/3dbdbfe6-e672-411b-8c45-933d31ab19a0.mxunit b/Source/mprcontents/3d/bd/3dbdbfe6-e672-411b-8c45-933d31ab19a0.mxunit
deleted file mode 100644
index 14af2b0a..00000000
Binary files a/Source/mprcontents/3d/bd/3dbdbfe6-e672-411b-8c45-933d31ab19a0.mxunit and /dev/null differ
diff --git a/Source/mprcontents/3d/e4/3de45cd5-2a1b-4d45-9440-580ec194ace3.mxunit b/Source/mprcontents/3d/e4/3de45cd5-2a1b-4d45-9440-580ec194ace3.mxunit
new file mode 100644
index 00000000..dfb10d13
Binary files /dev/null and b/Source/mprcontents/3d/e4/3de45cd5-2a1b-4d45-9440-580ec194ace3.mxunit differ
diff --git a/Source/mprcontents/3e/0b/3e0b8232-89b7-44b1-bd36-b2fd167b5ba8.mxunit b/Source/mprcontents/3e/0b/3e0b8232-89b7-44b1-bd36-b2fd167b5ba8.mxunit
deleted file mode 100644
index 5dc44bc3..00000000
Binary files a/Source/mprcontents/3e/0b/3e0b8232-89b7-44b1-bd36-b2fd167b5ba8.mxunit and /dev/null differ
diff --git a/Source/mprcontents/95/f0/95f0eae1-8e48-48f8-9eae-500108d7d21a.mxunit b/Source/mprcontents/3e/ba/3ebaa51e-06e3-4a8e-a1b9-b1bb283622b4.mxunit
similarity index 72%
rename from Source/mprcontents/95/f0/95f0eae1-8e48-48f8-9eae-500108d7d21a.mxunit
rename to Source/mprcontents/3e/ba/3ebaa51e-06e3-4a8e-a1b9-b1bb283622b4.mxunit
index cb240633..119d0875 100644
Binary files a/Source/mprcontents/95/f0/95f0eae1-8e48-48f8-9eae-500108d7d21a.mxunit and b/Source/mprcontents/3e/ba/3ebaa51e-06e3-4a8e-a1b9-b1bb283622b4.mxunit differ
diff --git a/Source/mprcontents/3f/80/3f805c64-f2f0-4498-a1ec-ed0a921f49c7.mxunit b/Source/mprcontents/3f/80/3f805c64-f2f0-4498-a1ec-ed0a921f49c7.mxunit
new file mode 100644
index 00000000..cc091535
Binary files /dev/null and b/Source/mprcontents/3f/80/3f805c64-f2f0-4498-a1ec-ed0a921f49c7.mxunit differ
diff --git a/Source/mprcontents/3f/bf/3fbf8de4-9cf1-4735-8c8b-429305e82fcf.mxunit b/Source/mprcontents/3f/bf/3fbf8de4-9cf1-4735-8c8b-429305e82fcf.mxunit
deleted file mode 100644
index 7dac512e..00000000
Binary files a/Source/mprcontents/3f/bf/3fbf8de4-9cf1-4735-8c8b-429305e82fcf.mxunit and /dev/null differ
diff --git a/Source/mprcontents/40/e6/40e6113c-91db-4719-b59f-eea06bad04b6.mxunit b/Source/mprcontents/40/e6/40e6113c-91db-4719-b59f-eea06bad04b6.mxunit
new file mode 100644
index 00000000..75b2cdb9
Binary files /dev/null and b/Source/mprcontents/40/e6/40e6113c-91db-4719-b59f-eea06bad04b6.mxunit differ
diff --git a/Source/mprcontents/40/ed/40ed894f-10af-49e9-b109-e8baa96e2182.mxunit b/Source/mprcontents/40/ed/40ed894f-10af-49e9-b109-e8baa96e2182.mxunit
deleted file mode 100644
index 3b369f30..00000000
Binary files a/Source/mprcontents/40/ed/40ed894f-10af-49e9-b109-e8baa96e2182.mxunit and /dev/null differ
diff --git a/Source/mprcontents/40/f3/40f3fbac-3e3e-42ca-9e30-eaeeda614ff7.mxunit b/Source/mprcontents/40/f3/40f3fbac-3e3e-42ca-9e30-eaeeda614ff7.mxunit
deleted file mode 100644
index 6d001336..00000000
Binary files a/Source/mprcontents/40/f3/40f3fbac-3e3e-42ca-9e30-eaeeda614ff7.mxunit and /dev/null differ
diff --git a/Source/mprcontents/41/b2/41b26469-7b83-4c56-853b-c07d49b7b1f3.mxunit b/Source/mprcontents/41/b2/41b26469-7b83-4c56-853b-c07d49b7b1f3.mxunit
deleted file mode 100644
index 94027518..00000000
Binary files a/Source/mprcontents/41/b2/41b26469-7b83-4c56-853b-c07d49b7b1f3.mxunit and /dev/null differ
diff --git a/Source/mprcontents/41/e9/41e9b96f-9a14-4216-896a-0a3a1e243603.mxunit b/Source/mprcontents/41/e9/41e9b96f-9a14-4216-896a-0a3a1e243603.mxunit
index 56a45444..284ffc88 100644
Binary files a/Source/mprcontents/41/e9/41e9b96f-9a14-4216-896a-0a3a1e243603.mxunit and b/Source/mprcontents/41/e9/41e9b96f-9a14-4216-896a-0a3a1e243603.mxunit differ
diff --git a/Source/mprcontents/42/24/4224d2cb-5518-4256-9a72-037b594eedb7.mxunit b/Source/mprcontents/42/24/4224d2cb-5518-4256-9a72-037b594eedb7.mxunit
deleted file mode 100644
index cbe94bc5..00000000
Binary files a/Source/mprcontents/42/24/4224d2cb-5518-4256-9a72-037b594eedb7.mxunit and /dev/null differ
diff --git a/Source/mprcontents/42/6e/426e7d73-4834-45bf-b3f4-fd155d192a34.mxunit b/Source/mprcontents/42/6e/426e7d73-4834-45bf-b3f4-fd155d192a34.mxunit
deleted file mode 100644
index b2f1b90d..00000000
Binary files a/Source/mprcontents/42/6e/426e7d73-4834-45bf-b3f4-fd155d192a34.mxunit and /dev/null differ
diff --git a/Source/mprcontents/44/15/44153cf8-6ca5-4280-8354-9c5dd43b559c.mxunit b/Source/mprcontents/44/15/44153cf8-6ca5-4280-8354-9c5dd43b559c.mxunit
deleted file mode 100644
index e149e81d..00000000
Binary files a/Source/mprcontents/44/15/44153cf8-6ca5-4280-8354-9c5dd43b559c.mxunit and /dev/null differ
diff --git a/Source/mprcontents/44/39/44396d90-acb8-4d73-80a1-562afdb84cef.mxunit b/Source/mprcontents/44/39/44396d90-acb8-4d73-80a1-562afdb84cef.mxunit
deleted file mode 100644
index 853efffc..00000000
Binary files a/Source/mprcontents/44/39/44396d90-acb8-4d73-80a1-562afdb84cef.mxunit and /dev/null differ
diff --git a/Source/mprcontents/0b/6b/0b6bde6f-a2ae-435c-bc60-a063095358d5.mxunit b/Source/mprcontents/46/42/4642943b-8ce5-445d-9a4e-b55c6e8ca382.mxunit
similarity index 99%
rename from Source/mprcontents/0b/6b/0b6bde6f-a2ae-435c-bc60-a063095358d5.mxunit
rename to Source/mprcontents/46/42/4642943b-8ce5-445d-9a4e-b55c6e8ca382.mxunit
index 13d617cc..83db8036 100644
Binary files a/Source/mprcontents/0b/6b/0b6bde6f-a2ae-435c-bc60-a063095358d5.mxunit and b/Source/mprcontents/46/42/4642943b-8ce5-445d-9a4e-b55c6e8ca382.mxunit differ
diff --git a/Source/mprcontents/47/b0/47b03729-bcd2-4097-9280-78230fb8826f.mxunit b/Source/mprcontents/47/b0/47b03729-bcd2-4097-9280-78230fb8826f.mxunit
deleted file mode 100644
index f17c3d2a..00000000
Binary files a/Source/mprcontents/47/b0/47b03729-bcd2-4097-9280-78230fb8826f.mxunit and /dev/null differ
diff --git a/Source/mprcontents/c7/6a/c76a7d15-5194-4785-8b3b-7715f53e0e4d.mxunit b/Source/mprcontents/47/c7/47c7ea54-8e47-435b-b12b-5afb209419f3.mxunit
similarity index 66%
rename from Source/mprcontents/c7/6a/c76a7d15-5194-4785-8b3b-7715f53e0e4d.mxunit
rename to Source/mprcontents/47/c7/47c7ea54-8e47-435b-b12b-5afb209419f3.mxunit
index bc964f10..368e3723 100644
Binary files a/Source/mprcontents/c7/6a/c76a7d15-5194-4785-8b3b-7715f53e0e4d.mxunit and b/Source/mprcontents/47/c7/47c7ea54-8e47-435b-b12b-5afb209419f3.mxunit differ
diff --git a/Source/mprcontents/48/42/4842c56c-9dd3-4f69-9909-a6ce314333e3.mxunit b/Source/mprcontents/48/42/4842c56c-9dd3-4f69-9909-a6ce314333e3.mxunit
new file mode 100644
index 00000000..62b0f861
Binary files /dev/null and b/Source/mprcontents/48/42/4842c56c-9dd3-4f69-9909-a6ce314333e3.mxunit differ
diff --git a/Source/mprcontents/48/a1/48a1b1d8-61ee-4246-b86d-331b1d53bbb0.mxunit b/Source/mprcontents/48/a1/48a1b1d8-61ee-4246-b86d-331b1d53bbb0.mxunit
deleted file mode 100644
index faa1d01c..00000000
Binary files a/Source/mprcontents/48/a1/48a1b1d8-61ee-4246-b86d-331b1d53bbb0.mxunit and /dev/null differ
diff --git a/Source/mprcontents/48/d6/48d6822c-a264-4c9f-b780-a92a1ae450ee.mxunit b/Source/mprcontents/48/d6/48d6822c-a264-4c9f-b780-a92a1ae450ee.mxunit
new file mode 100644
index 00000000..273ffe95
Binary files /dev/null and b/Source/mprcontents/48/d6/48d6822c-a264-4c9f-b780-a92a1ae450ee.mxunit differ
diff --git a/Source/mprcontents/49/4f/494f4a99-bf14-4630-91b9-a7e541ce07ff.mxunit b/Source/mprcontents/49/4f/494f4a99-bf14-4630-91b9-a7e541ce07ff.mxunit
index 165e7f7f..0e3a7c21 100644
Binary files a/Source/mprcontents/49/4f/494f4a99-bf14-4630-91b9-a7e541ce07ff.mxunit and b/Source/mprcontents/49/4f/494f4a99-bf14-4630-91b9-a7e541ce07ff.mxunit differ
diff --git a/Source/mprcontents/4b/84/4b843944-5b7b-45c5-983f-d8af4047d80b.mxunit b/Source/mprcontents/4b/84/4b843944-5b7b-45c5-983f-d8af4047d80b.mxunit
new file mode 100644
index 00000000..45b82f51
Binary files /dev/null and b/Source/mprcontents/4b/84/4b843944-5b7b-45c5-983f-d8af4047d80b.mxunit differ
diff --git a/Source/mprcontents/4c/3f/4c3f4f0b-d045-4595-8f50-eae3e62b7775.mxunit b/Source/mprcontents/4c/3f/4c3f4f0b-d045-4595-8f50-eae3e62b7775.mxunit
new file mode 100644
index 00000000..fd15cfa3
Binary files /dev/null and b/Source/mprcontents/4c/3f/4c3f4f0b-d045-4595-8f50-eae3e62b7775.mxunit differ
diff --git a/Source/mprcontents/4d/9a/4d9a75f0-d40a-49d0-97a2-325852393a06.mxunit b/Source/mprcontents/4d/9a/4d9a75f0-d40a-49d0-97a2-325852393a06.mxunit
new file mode 100644
index 00000000..e5a62675
Binary files /dev/null and b/Source/mprcontents/4d/9a/4d9a75f0-d40a-49d0-97a2-325852393a06.mxunit differ
diff --git a/Source/mprcontents/4d/ab/4dab803a-f054-4ff5-8ed6-6a7a594890cc.mxunit b/Source/mprcontents/4d/ab/4dab803a-f054-4ff5-8ed6-6a7a594890cc.mxunit
new file mode 100644
index 00000000..5cc03d2c
Binary files /dev/null and b/Source/mprcontents/4d/ab/4dab803a-f054-4ff5-8ed6-6a7a594890cc.mxunit differ
diff --git a/Source/mprcontents/4e/01/4e01c4a6-7efa-44b8-a43f-e4ad53264ef9.mxunit b/Source/mprcontents/4e/01/4e01c4a6-7efa-44b8-a43f-e4ad53264ef9.mxunit
new file mode 100644
index 00000000..3d6ac5be
Binary files /dev/null and b/Source/mprcontents/4e/01/4e01c4a6-7efa-44b8-a43f-e4ad53264ef9.mxunit differ
diff --git a/Source/mprcontents/4e/c3/4ec3644f-9a24-49cf-b6b4-ab4bfcaa3978.mxunit b/Source/mprcontents/4e/c3/4ec3644f-9a24-49cf-b6b4-ab4bfcaa3978.mxunit
new file mode 100644
index 00000000..60e17803
Binary files /dev/null and b/Source/mprcontents/4e/c3/4ec3644f-9a24-49cf-b6b4-ab4bfcaa3978.mxunit differ
diff --git a/Source/mprcontents/50/23/50232e7a-455d-47ec-826b-2e1416226b18.mxunit b/Source/mprcontents/50/23/50232e7a-455d-47ec-826b-2e1416226b18.mxunit
new file mode 100644
index 00000000..e5fba8ae
Binary files /dev/null and b/Source/mprcontents/50/23/50232e7a-455d-47ec-826b-2e1416226b18.mxunit differ
diff --git a/Source/mprcontents/50/50/5050321d-54f4-4309-857d-0be1e8d86d9f.mxunit b/Source/mprcontents/50/50/5050321d-54f4-4309-857d-0be1e8d86d9f.mxunit
deleted file mode 100644
index 15c66b31..00000000
Binary files a/Source/mprcontents/50/50/5050321d-54f4-4309-857d-0be1e8d86d9f.mxunit and /dev/null differ
diff --git a/Source/mprcontents/50/d6/50d6658c-73dd-43eb-83ea-609876955686.mxunit b/Source/mprcontents/50/d6/50d6658c-73dd-43eb-83ea-609876955686.mxunit
new file mode 100644
index 00000000..673a78fc
Binary files /dev/null and b/Source/mprcontents/50/d6/50d6658c-73dd-43eb-83ea-609876955686.mxunit differ
diff --git a/Source/mprcontents/52/ac/52ac920d-7e0c-4036-a133-6bae6c2895de.mxunit b/Source/mprcontents/52/ac/52ac920d-7e0c-4036-a133-6bae6c2895de.mxunit
deleted file mode 100644
index b7018457..00000000
Binary files a/Source/mprcontents/52/ac/52ac920d-7e0c-4036-a133-6bae6c2895de.mxunit and /dev/null differ
diff --git a/Source/mprcontents/52/dc/52dca32a-23af-4272-abfb-880c94b27d1b.mxunit b/Source/mprcontents/52/dc/52dca32a-23af-4272-abfb-880c94b27d1b.mxunit
new file mode 100644
index 00000000..03802e1e
Binary files /dev/null and b/Source/mprcontents/52/dc/52dca32a-23af-4272-abfb-880c94b27d1b.mxunit differ
diff --git a/Source/mprcontents/54/0f/540f16cf-f417-497a-98d1-604825c4f242.mxunit b/Source/mprcontents/54/0f/540f16cf-f417-497a-98d1-604825c4f242.mxunit
deleted file mode 100644
index 6a77fe2f..00000000
Binary files a/Source/mprcontents/54/0f/540f16cf-f417-497a-98d1-604825c4f242.mxunit and /dev/null differ
diff --git a/Source/mprcontents/54/cc/54cc16e1-ec11-4b0d-a010-8b9eff567c6d.mxunit b/Source/mprcontents/54/cc/54cc16e1-ec11-4b0d-a010-8b9eff567c6d.mxunit
new file mode 100644
index 00000000..cab0dfc8
Binary files /dev/null and b/Source/mprcontents/54/cc/54cc16e1-ec11-4b0d-a010-8b9eff567c6d.mxunit differ
diff --git a/Source/mprcontents/54/f9/54f9949f-f404-4a5a-af23-440154971c89.mxunit b/Source/mprcontents/54/f9/54f9949f-f404-4a5a-af23-440154971c89.mxunit
new file mode 100644
index 00000000..7bc2c7a7
Binary files /dev/null and b/Source/mprcontents/54/f9/54f9949f-f404-4a5a-af23-440154971c89.mxunit differ
diff --git a/Source/mprcontents/55/28/55280330-351e-4b95-8703-dc958677db22.mxunit b/Source/mprcontents/55/28/55280330-351e-4b95-8703-dc958677db22.mxunit
new file mode 100644
index 00000000..1614d55e
Binary files /dev/null and b/Source/mprcontents/55/28/55280330-351e-4b95-8703-dc958677db22.mxunit differ
diff --git a/Source/mprcontents/55/39/55398ab0-7b07-4a19-a118-9ff0fa1c0468.mxunit b/Source/mprcontents/55/39/55398ab0-7b07-4a19-a118-9ff0fa1c0468.mxunit
index c3c04fba..025c62fc 100644
Binary files a/Source/mprcontents/55/39/55398ab0-7b07-4a19-a118-9ff0fa1c0468.mxunit and b/Source/mprcontents/55/39/55398ab0-7b07-4a19-a118-9ff0fa1c0468.mxunit differ
diff --git a/Source/mprcontents/55/59/5559339f-ecd4-4d2f-9e7c-7a21fc960086.mxunit b/Source/mprcontents/55/59/5559339f-ecd4-4d2f-9e7c-7a21fc960086.mxunit
deleted file mode 100644
index 7c16bda0..00000000
Binary files a/Source/mprcontents/55/59/5559339f-ecd4-4d2f-9e7c-7a21fc960086.mxunit and /dev/null differ
diff --git a/Source/mprcontents/5a/e9/5ae92bd0-c8c6-4a53-9139-d9b79564cfc3.mxunit b/Source/mprcontents/55/71/5571bbaa-6fec-4894-92d0-388b00bf0fb3.mxunit
similarity index 50%
rename from Source/mprcontents/5a/e9/5ae92bd0-c8c6-4a53-9139-d9b79564cfc3.mxunit
rename to Source/mprcontents/55/71/5571bbaa-6fec-4894-92d0-388b00bf0fb3.mxunit
index 60d56d8c..68725078 100644
Binary files a/Source/mprcontents/5a/e9/5ae92bd0-c8c6-4a53-9139-d9b79564cfc3.mxunit and b/Source/mprcontents/55/71/5571bbaa-6fec-4894-92d0-388b00bf0fb3.mxunit differ
diff --git a/Source/mprcontents/50/ab/50ab68ca-02b7-44e2-a0b1-e4fc46e1016a.mxunit b/Source/mprcontents/55/a8/55a86914-5ffe-4aeb-b271-d87751ffff55.mxunit
similarity index 66%
rename from Source/mprcontents/50/ab/50ab68ca-02b7-44e2-a0b1-e4fc46e1016a.mxunit
rename to Source/mprcontents/55/a8/55a86914-5ffe-4aeb-b271-d87751ffff55.mxunit
index 34b4907c..5f7b060c 100644
Binary files a/Source/mprcontents/50/ab/50ab68ca-02b7-44e2-a0b1-e4fc46e1016a.mxunit and b/Source/mprcontents/55/a8/55a86914-5ffe-4aeb-b271-d87751ffff55.mxunit differ
diff --git a/Source/mprcontents/56/a4/56a4fb60-3e1b-4d07-897d-376d40e150f0.mxunit b/Source/mprcontents/56/a4/56a4fb60-3e1b-4d07-897d-376d40e150f0.mxunit
deleted file mode 100644
index 08ca2666..00000000
Binary files a/Source/mprcontents/56/a4/56a4fb60-3e1b-4d07-897d-376d40e150f0.mxunit and /dev/null differ
diff --git a/Source/mprcontents/56/b7/56b7b97e-bae2-43b6-9734-1e471b6f9b0e.mxunit b/Source/mprcontents/56/b7/56b7b97e-bae2-43b6-9734-1e471b6f9b0e.mxunit
new file mode 100644
index 00000000..08c456c4
Binary files /dev/null and b/Source/mprcontents/56/b7/56b7b97e-bae2-43b6-9734-1e471b6f9b0e.mxunit differ
diff --git a/Source/mprcontents/56/e8/56e8a56e-9455-4463-a5bd-72087827cb41.mxunit b/Source/mprcontents/56/e8/56e8a56e-9455-4463-a5bd-72087827cb41.mxunit
new file mode 100644
index 00000000..e1125dd8
Binary files /dev/null and b/Source/mprcontents/56/e8/56e8a56e-9455-4463-a5bd-72087827cb41.mxunit differ
diff --git a/Source/mprcontents/45/77/4577dd91-fab4-485a-9436-5df509ab9d80.mxunit b/Source/mprcontents/57/7d/577d0556-e2c7-4ed5-9aae-f272c1a8d91d.mxunit
similarity index 66%
rename from Source/mprcontents/45/77/4577dd91-fab4-485a-9436-5df509ab9d80.mxunit
rename to Source/mprcontents/57/7d/577d0556-e2c7-4ed5-9aae-f272c1a8d91d.mxunit
index ca3f419e..03480b80 100644
Binary files a/Source/mprcontents/45/77/4577dd91-fab4-485a-9436-5df509ab9d80.mxunit and b/Source/mprcontents/57/7d/577d0556-e2c7-4ed5-9aae-f272c1a8d91d.mxunit differ
diff --git a/Source/mprcontents/58/8e/588ed912-ad5f-4a61-bad9-137a57f3dc01.mxunit b/Source/mprcontents/58/8e/588ed912-ad5f-4a61-bad9-137a57f3dc01.mxunit
new file mode 100644
index 00000000..8a75ee78
Binary files /dev/null and b/Source/mprcontents/58/8e/588ed912-ad5f-4a61-bad9-137a57f3dc01.mxunit differ
diff --git a/Source/mprcontents/58/d9/58d9e820-7a7c-4984-9db4-a67158ff1f63.mxunit b/Source/mprcontents/58/d9/58d9e820-7a7c-4984-9db4-a67158ff1f63.mxunit
deleted file mode 100644
index e09cd323..00000000
Binary files a/Source/mprcontents/58/d9/58d9e820-7a7c-4984-9db4-a67158ff1f63.mxunit and /dev/null differ
diff --git a/Source/mprcontents/59/f2/59f2485b-0b13-474c-886f-60b8edcefbbb.mxunit b/Source/mprcontents/59/f2/59f2485b-0b13-474c-886f-60b8edcefbbb.mxunit
new file mode 100644
index 00000000..50c48f4c
Binary files /dev/null and b/Source/mprcontents/59/f2/59f2485b-0b13-474c-886f-60b8edcefbbb.mxunit differ
diff --git a/Source/mprcontents/a6/cf/a6cf63b6-eceb-4e3d-8d6c-9e82725453cf.mxunit b/Source/mprcontents/59/f3/59f38093-9925-48f8-9ae9-4ccfec84860c.mxunit
similarity index 57%
rename from Source/mprcontents/a6/cf/a6cf63b6-eceb-4e3d-8d6c-9e82725453cf.mxunit
rename to Source/mprcontents/59/f3/59f38093-9925-48f8-9ae9-4ccfec84860c.mxunit
index 2d48e1df..f9c05f9c 100644
Binary files a/Source/mprcontents/a6/cf/a6cf63b6-eceb-4e3d-8d6c-9e82725453cf.mxunit and b/Source/mprcontents/59/f3/59f38093-9925-48f8-9ae9-4ccfec84860c.mxunit differ
diff --git a/Source/mprcontents/5a/ce/5acedd77-ac90-44b3-8b49-e6aaac4061af.mxunit b/Source/mprcontents/5a/ce/5acedd77-ac90-44b3-8b49-e6aaac4061af.mxunit
new file mode 100644
index 00000000..d5b4c9ca
Binary files /dev/null and b/Source/mprcontents/5a/ce/5acedd77-ac90-44b3-8b49-e6aaac4061af.mxunit differ
diff --git a/Source/mprcontents/5a/f2/5af2ccfc-d509-40eb-9630-659703d389a3.mxunit b/Source/mprcontents/5a/f2/5af2ccfc-d509-40eb-9630-659703d389a3.mxunit
deleted file mode 100644
index b55e200e..00000000
Binary files a/Source/mprcontents/5a/f2/5af2ccfc-d509-40eb-9630-659703d389a3.mxunit and /dev/null differ
diff --git a/Source/mprcontents/5b/77/5b77ac0d-6e35-48d7-8292-0838893d40f6.mxunit b/Source/mprcontents/5b/77/5b77ac0d-6e35-48d7-8292-0838893d40f6.mxunit
deleted file mode 100644
index 3482e956..00000000
Binary files a/Source/mprcontents/5b/77/5b77ac0d-6e35-48d7-8292-0838893d40f6.mxunit and /dev/null differ
diff --git a/Source/mprcontents/5b/8b/5b8b76db-982e-4dcc-a220-d30fcaea0ad9.mxunit b/Source/mprcontents/5b/8b/5b8b76db-982e-4dcc-a220-d30fcaea0ad9.mxunit
deleted file mode 100644
index 66f7b9d1..00000000
Binary files a/Source/mprcontents/5b/8b/5b8b76db-982e-4dcc-a220-d30fcaea0ad9.mxunit and /dev/null differ
diff --git a/Source/mprcontents/5b/b8/5bb8fa20-8eac-4b2a-a038-86f3db6ba910.mxunit b/Source/mprcontents/5b/b8/5bb8fa20-8eac-4b2a-a038-86f3db6ba910.mxunit
new file mode 100644
index 00000000..ba01d70d
Binary files /dev/null and b/Source/mprcontents/5b/b8/5bb8fa20-8eac-4b2a-a038-86f3db6ba910.mxunit differ
diff --git a/Source/mprcontents/5c/37/5c378572-6e99-4053-ab9f-66fc320d1621.mxunit b/Source/mprcontents/5c/37/5c378572-6e99-4053-ab9f-66fc320d1621.mxunit
deleted file mode 100644
index 644175b4..00000000
Binary files a/Source/mprcontents/5c/37/5c378572-6e99-4053-ab9f-66fc320d1621.mxunit and /dev/null differ
diff --git a/Source/mprcontents/5c/9e/5c9e4f63-d0ff-4168-a04a-da3f290137ae.mxunit b/Source/mprcontents/5c/9e/5c9e4f63-d0ff-4168-a04a-da3f290137ae.mxunit
new file mode 100644
index 00000000..c1a2de3e
Binary files /dev/null and b/Source/mprcontents/5c/9e/5c9e4f63-d0ff-4168-a04a-da3f290137ae.mxunit differ
diff --git a/Source/mprcontents/c7/6e/c76ef17b-e33f-4083-9bb8-a96acf48b14d.mxunit b/Source/mprcontents/5e/4b/5e4bb46f-e6f8-4207-b641-e076463c6884.mxunit
similarity index 69%
rename from Source/mprcontents/c7/6e/c76ef17b-e33f-4083-9bb8-a96acf48b14d.mxunit
rename to Source/mprcontents/5e/4b/5e4bb46f-e6f8-4207-b641-e076463c6884.mxunit
index c2dd0b00..f209d31f 100644
Binary files a/Source/mprcontents/c7/6e/c76ef17b-e33f-4083-9bb8-a96acf48b14d.mxunit and b/Source/mprcontents/5e/4b/5e4bb46f-e6f8-4207-b641-e076463c6884.mxunit differ
diff --git a/Source/mprcontents/5e/63/5e6317a3-9555-4ea2-8e9d-20026a26b315.mxunit b/Source/mprcontents/5e/63/5e6317a3-9555-4ea2-8e9d-20026a26b315.mxunit
new file mode 100644
index 00000000..86f35683
Binary files /dev/null and b/Source/mprcontents/5e/63/5e6317a3-9555-4ea2-8e9d-20026a26b315.mxunit differ
diff --git a/Source/mprcontents/8c/67/8c67c72a-7f5c-4305-8e04-e83b4a3dd8db.mxunit b/Source/mprcontents/60/4e/604e7eca-a7c1-449a-af2a-5595c9fa015e.mxunit
similarity index 78%
rename from Source/mprcontents/8c/67/8c67c72a-7f5c-4305-8e04-e83b4a3dd8db.mxunit
rename to Source/mprcontents/60/4e/604e7eca-a7c1-449a-af2a-5595c9fa015e.mxunit
index cc8adba3..09909383 100644
Binary files a/Source/mprcontents/8c/67/8c67c72a-7f5c-4305-8e04-e83b4a3dd8db.mxunit and b/Source/mprcontents/60/4e/604e7eca-a7c1-449a-af2a-5595c9fa015e.mxunit differ
diff --git a/Source/mprcontents/60/56/60565f3a-1228-4fd1-9e97-bb2713f983c8.mxunit b/Source/mprcontents/60/56/60565f3a-1228-4fd1-9e97-bb2713f983c8.mxunit
index 0694538a..4a3ea5d8 100644
Binary files a/Source/mprcontents/60/56/60565f3a-1228-4fd1-9e97-bb2713f983c8.mxunit and b/Source/mprcontents/60/56/60565f3a-1228-4fd1-9e97-bb2713f983c8.mxunit differ
diff --git a/Source/mprcontents/61/40/6140cff1-7223-451e-8c49-9445609b2266.mxunit b/Source/mprcontents/61/40/6140cff1-7223-451e-8c49-9445609b2266.mxunit
deleted file mode 100644
index 5700b237..00000000
Binary files a/Source/mprcontents/61/40/6140cff1-7223-451e-8c49-9445609b2266.mxunit and /dev/null differ
diff --git a/Source/mprcontents/61/d8/61d8f5a5-e3c6-48f7-b050-81d70d5adf9f.mxunit b/Source/mprcontents/61/d8/61d8f5a5-e3c6-48f7-b050-81d70d5adf9f.mxunit
index 0958b58d..d5ac6339 100644
Binary files a/Source/mprcontents/61/d8/61d8f5a5-e3c6-48f7-b050-81d70d5adf9f.mxunit and b/Source/mprcontents/61/d8/61d8f5a5-e3c6-48f7-b050-81d70d5adf9f.mxunit differ
diff --git a/Source/mprcontents/62/52/625231a2-f86b-44d4-b5f6-4009d8494ecf.mxunit b/Source/mprcontents/62/52/625231a2-f86b-44d4-b5f6-4009d8494ecf.mxunit
new file mode 100644
index 00000000..91173158
Binary files /dev/null and b/Source/mprcontents/62/52/625231a2-f86b-44d4-b5f6-4009d8494ecf.mxunit differ
diff --git a/Source/mprcontents/62/7b/627b3f45-1611-45c4-8d6f-2d035b1db7d2.mxunit b/Source/mprcontents/62/7b/627b3f45-1611-45c4-8d6f-2d035b1db7d2.mxunit
new file mode 100644
index 00000000..21d029a2
Binary files /dev/null and b/Source/mprcontents/62/7b/627b3f45-1611-45c4-8d6f-2d035b1db7d2.mxunit differ
diff --git a/Source/mprcontents/62/7c/627c5baf-c123-4aa9-9ab8-5b30570b4c3e.mxunit b/Source/mprcontents/62/7c/627c5baf-c123-4aa9-9ab8-5b30570b4c3e.mxunit
new file mode 100644
index 00000000..79945258
Binary files /dev/null and b/Source/mprcontents/62/7c/627c5baf-c123-4aa9-9ab8-5b30570b4c3e.mxunit differ
diff --git a/Source/mprcontents/62/dc/62dc0ab2-9737-40b7-9d38-e4b6d09e2d20.mxunit b/Source/mprcontents/62/dc/62dc0ab2-9737-40b7-9d38-e4b6d09e2d20.mxunit
deleted file mode 100644
index c35407a9..00000000
Binary files a/Source/mprcontents/62/dc/62dc0ab2-9737-40b7-9d38-e4b6d09e2d20.mxunit and /dev/null differ
diff --git a/Source/mprcontents/62/fd/62fdcbd1-f092-489c-91ea-885a27e05d63.mxunit b/Source/mprcontents/62/fd/62fdcbd1-f092-489c-91ea-885a27e05d63.mxunit
deleted file mode 100644
index cff733ec..00000000
Binary files a/Source/mprcontents/62/fd/62fdcbd1-f092-489c-91ea-885a27e05d63.mxunit and /dev/null differ
diff --git a/Source/mprcontents/66/3b/663bac7b-d491-49fe-b9e3-5f5eac3045dc.mxunit b/Source/mprcontents/66/3b/663bac7b-d491-49fe-b9e3-5f5eac3045dc.mxunit
deleted file mode 100644
index 83df656f..00000000
Binary files a/Source/mprcontents/66/3b/663bac7b-d491-49fe-b9e3-5f5eac3045dc.mxunit and /dev/null differ
diff --git a/Source/mprcontents/66/70/6670ba6d-8fe7-4b96-8bad-ae09e5f2b845.mxunit b/Source/mprcontents/66/70/6670ba6d-8fe7-4b96-8bad-ae09e5f2b845.mxunit
new file mode 100644
index 00000000..90eee098
Binary files /dev/null and b/Source/mprcontents/66/70/6670ba6d-8fe7-4b96-8bad-ae09e5f2b845.mxunit differ
diff --git a/Source/mprcontents/68/e4/68e4ba8f-6d25-45c5-a65b-d7b48ac331d2.mxunit b/Source/mprcontents/68/e4/68e4ba8f-6d25-45c5-a65b-d7b48ac331d2.mxunit
deleted file mode 100644
index 252cae98..00000000
Binary files a/Source/mprcontents/68/e4/68e4ba8f-6d25-45c5-a65b-d7b48ac331d2.mxunit and /dev/null differ
diff --git a/Source/mprcontents/69/3d/693dd7a0-6295-4ea7-852b-31d39790139f.mxunit b/Source/mprcontents/69/3d/693dd7a0-6295-4ea7-852b-31d39790139f.mxunit
index a62e14f3..48e66933 100644
Binary files a/Source/mprcontents/69/3d/693dd7a0-6295-4ea7-852b-31d39790139f.mxunit and b/Source/mprcontents/69/3d/693dd7a0-6295-4ea7-852b-31d39790139f.mxunit differ
diff --git a/Source/mprcontents/6a/3a/6a3a184a-434d-463a-afd9-b9e5b53e1ef0.mxunit b/Source/mprcontents/6a/3a/6a3a184a-434d-463a-afd9-b9e5b53e1ef0.mxunit
new file mode 100644
index 00000000..76f90585
Binary files /dev/null and b/Source/mprcontents/6a/3a/6a3a184a-434d-463a-afd9-b9e5b53e1ef0.mxunit differ
diff --git a/Source/mprcontents/6a/b1/6ab10bbf-2142-4b75-8b0b-7b5ed60cabd2.mxunit b/Source/mprcontents/6a/b1/6ab10bbf-2142-4b75-8b0b-7b5ed60cabd2.mxunit
deleted file mode 100644
index fea3094b..00000000
Binary files a/Source/mprcontents/6a/b1/6ab10bbf-2142-4b75-8b0b-7b5ed60cabd2.mxunit and /dev/null differ
diff --git a/Source/mprcontents/6a/bb/6abba19a-c86f-4e67-a663-89a03437e751.mxunit b/Source/mprcontents/6a/bb/6abba19a-c86f-4e67-a663-89a03437e751.mxunit
new file mode 100644
index 00000000..67501808
Binary files /dev/null and b/Source/mprcontents/6a/bb/6abba19a-c86f-4e67-a663-89a03437e751.mxunit differ
diff --git a/Source/mprcontents/6b/87/6b8746e2-6c00-448d-b343-cfdff77d4df3.mxunit b/Source/mprcontents/6b/87/6b8746e2-6c00-448d-b343-cfdff77d4df3.mxunit
index 7c2a1be3..eab57f88 100644
Binary files a/Source/mprcontents/6b/87/6b8746e2-6c00-448d-b343-cfdff77d4df3.mxunit and b/Source/mprcontents/6b/87/6b8746e2-6c00-448d-b343-cfdff77d4df3.mxunit differ
diff --git a/Source/mprcontents/6c/aa/6caa092b-7e3b-4a98-bb65-6b288164a3a0.mxunit b/Source/mprcontents/6c/aa/6caa092b-7e3b-4a98-bb65-6b288164a3a0.mxunit
new file mode 100644
index 00000000..30f29ef6
Binary files /dev/null and b/Source/mprcontents/6c/aa/6caa092b-7e3b-4a98-bb65-6b288164a3a0.mxunit differ
diff --git a/Source/mprcontents/18/0d/180d8b69-7658-4ec9-aa99-55c781107692.mxunit b/Source/mprcontents/6c/fe/6cfe509f-b7f7-4f6f-8a10-6fc2f3c7e6d0.mxunit
similarity index 65%
rename from Source/mprcontents/18/0d/180d8b69-7658-4ec9-aa99-55c781107692.mxunit
rename to Source/mprcontents/6c/fe/6cfe509f-b7f7-4f6f-8a10-6fc2f3c7e6d0.mxunit
index 03890b79..6d9f4238 100644
Binary files a/Source/mprcontents/18/0d/180d8b69-7658-4ec9-aa99-55c781107692.mxunit and b/Source/mprcontents/6c/fe/6cfe509f-b7f7-4f6f-8a10-6fc2f3c7e6d0.mxunit differ
diff --git a/Source/mprcontents/6d/62/6d6244b4-0c33-4976-970e-0d0c7d951f23.mxunit b/Source/mprcontents/6d/62/6d6244b4-0c33-4976-970e-0d0c7d951f23.mxunit
index 63a358bd..7bed261b 100644
Binary files a/Source/mprcontents/6d/62/6d6244b4-0c33-4976-970e-0d0c7d951f23.mxunit and b/Source/mprcontents/6d/62/6d6244b4-0c33-4976-970e-0d0c7d951f23.mxunit differ
diff --git a/Source/mprcontents/6d/d9/6dd90ea8-d8e1-4349-b2c1-a31e399018a9.mxunit b/Source/mprcontents/6d/d9/6dd90ea8-d8e1-4349-b2c1-a31e399018a9.mxunit
deleted file mode 100644
index 8be4bff8..00000000
Binary files a/Source/mprcontents/6d/d9/6dd90ea8-d8e1-4349-b2c1-a31e399018a9.mxunit and /dev/null differ
diff --git a/Source/mprcontents/6d/e3/6de35037-52c2-47ec-ba24-91d488f09fbd.mxunit b/Source/mprcontents/6d/e3/6de35037-52c2-47ec-ba24-91d488f09fbd.mxunit
new file mode 100644
index 00000000..a30b3b9c
Binary files /dev/null and b/Source/mprcontents/6d/e3/6de35037-52c2-47ec-ba24-91d488f09fbd.mxunit differ
diff --git a/Source/mprcontents/6e/7c/6e7ca30d-06b2-4f6b-acab-2a223569073f.mxunit b/Source/mprcontents/6e/7c/6e7ca30d-06b2-4f6b-acab-2a223569073f.mxunit
new file mode 100644
index 00000000..b99ff0e3
Binary files /dev/null and b/Source/mprcontents/6e/7c/6e7ca30d-06b2-4f6b-acab-2a223569073f.mxunit differ
diff --git a/Source/mprcontents/6e/96/6e969798-17a0-4cd4-a117-d62a70413620.mxunit b/Source/mprcontents/6e/96/6e969798-17a0-4cd4-a117-d62a70413620.mxunit
index f0646a79..a57bc90d 100644
Binary files a/Source/mprcontents/6e/96/6e969798-17a0-4cd4-a117-d62a70413620.mxunit and b/Source/mprcontents/6e/96/6e969798-17a0-4cd4-a117-d62a70413620.mxunit differ
diff --git a/Source/mprcontents/6e/ba/6eba3770-4cef-4140-940f-56196f6e08d6.mxunit b/Source/mprcontents/6e/ba/6eba3770-4cef-4140-940f-56196f6e08d6.mxunit
new file mode 100644
index 00000000..559cf98d
Binary files /dev/null and b/Source/mprcontents/6e/ba/6eba3770-4cef-4140-940f-56196f6e08d6.mxunit differ
diff --git a/Source/mprcontents/6e/e8/6ee8b40d-bd19-4f07-b891-c22c66ca77e9.mxunit b/Source/mprcontents/6e/e8/6ee8b40d-bd19-4f07-b891-c22c66ca77e9.mxunit
new file mode 100644
index 00000000..5ab59a2a
Binary files /dev/null and b/Source/mprcontents/6e/e8/6ee8b40d-bd19-4f07-b891-c22c66ca77e9.mxunit differ
diff --git a/Source/mprcontents/70/06/70061dd3-3b54-4cb4-8f20-5b905325136e.mxunit b/Source/mprcontents/70/06/70061dd3-3b54-4cb4-8f20-5b905325136e.mxunit
new file mode 100644
index 00000000..e69d0cbf
Binary files /dev/null and b/Source/mprcontents/70/06/70061dd3-3b54-4cb4-8f20-5b905325136e.mxunit differ
diff --git a/Source/mprcontents/70/18/7018ec10-27be-457b-86c8-4cb007a20d66.mxunit b/Source/mprcontents/70/18/7018ec10-27be-457b-86c8-4cb007a20d66.mxunit
deleted file mode 100644
index 73e7caa3..00000000
Binary files a/Source/mprcontents/70/18/7018ec10-27be-457b-86c8-4cb007a20d66.mxunit and /dev/null differ
diff --git a/Source/mprcontents/70/6c/706cc808-c010-4742-9319-5463404fec9f.mxunit b/Source/mprcontents/70/6c/706cc808-c010-4742-9319-5463404fec9f.mxunit
new file mode 100644
index 00000000..7ea1a6fb
Binary files /dev/null and b/Source/mprcontents/70/6c/706cc808-c010-4742-9319-5463404fec9f.mxunit differ
diff --git a/Source/mprcontents/70/7c/707c707c-dea3-4db3-89f6-1690c935ca93.mxunit b/Source/mprcontents/70/7c/707c707c-dea3-4db3-89f6-1690c935ca93.mxunit
new file mode 100644
index 00000000..48a4aa38
Binary files /dev/null and b/Source/mprcontents/70/7c/707c707c-dea3-4db3-89f6-1690c935ca93.mxunit differ
diff --git a/Source/mprcontents/70/da/70da9218-8450-4df2-8eca-cf8372c7e7f0.mxunit b/Source/mprcontents/70/da/70da9218-8450-4df2-8eca-cf8372c7e7f0.mxunit
index 05ae0ff2..5778362d 100644
Binary files a/Source/mprcontents/70/da/70da9218-8450-4df2-8eca-cf8372c7e7f0.mxunit and b/Source/mprcontents/70/da/70da9218-8450-4df2-8eca-cf8372c7e7f0.mxunit differ
diff --git a/Source/mprcontents/71/28/71282059-fb0c-40cb-b834-bd8c8c699708.mxunit b/Source/mprcontents/71/28/71282059-fb0c-40cb-b834-bd8c8c699708.mxunit
deleted file mode 100644
index 4279371a..00000000
Binary files a/Source/mprcontents/71/28/71282059-fb0c-40cb-b834-bd8c8c699708.mxunit and /dev/null differ
diff --git a/Source/mprcontents/72/07/7207c220-0ac4-4760-bcf6-4f1eef47672d.mxunit b/Source/mprcontents/72/07/7207c220-0ac4-4760-bcf6-4f1eef47672d.mxunit
new file mode 100644
index 00000000..e7ca2d49
Binary files /dev/null and b/Source/mprcontents/72/07/7207c220-0ac4-4760-bcf6-4f1eef47672d.mxunit differ
diff --git a/Source/mprcontents/72/2e/722e42c5-2e8d-423d-a7c3-e416a435f49e.mxunit b/Source/mprcontents/72/2e/722e42c5-2e8d-423d-a7c3-e416a435f49e.mxunit
new file mode 100644
index 00000000..009a14f7
Binary files /dev/null and b/Source/mprcontents/72/2e/722e42c5-2e8d-423d-a7c3-e416a435f49e.mxunit differ
diff --git a/Source/mprcontents/73/bc/73bcf21a-a434-4338-abc2-56cecfd2df13.mxunit b/Source/mprcontents/73/bc/73bcf21a-a434-4338-abc2-56cecfd2df13.mxunit
deleted file mode 100644
index 910b79ea..00000000
Binary files a/Source/mprcontents/73/bc/73bcf21a-a434-4338-abc2-56cecfd2df13.mxunit and /dev/null differ
diff --git a/Source/mprcontents/73/f6/73f64aa9-07f0-4d64-8bd1-2ff84f93ca8a.mxunit b/Source/mprcontents/73/f6/73f64aa9-07f0-4d64-8bd1-2ff84f93ca8a.mxunit
deleted file mode 100644
index 8b3927d0..00000000
Binary files a/Source/mprcontents/73/f6/73f64aa9-07f0-4d64-8bd1-2ff84f93ca8a.mxunit and /dev/null differ
diff --git a/Source/mprcontents/74/38/7438955e-1165-40c9-9054-74e352d14adf.mxunit b/Source/mprcontents/74/38/7438955e-1165-40c9-9054-74e352d14adf.mxunit
new file mode 100644
index 00000000..d2f25c1e
Binary files /dev/null and b/Source/mprcontents/74/38/7438955e-1165-40c9-9054-74e352d14adf.mxunit differ
diff --git a/Source/mprcontents/75/14/7514ab28-248e-40a6-b92d-edd201409cbe.mxunit b/Source/mprcontents/75/14/7514ab28-248e-40a6-b92d-edd201409cbe.mxunit
new file mode 100644
index 00000000..c22c6e34
Binary files /dev/null and b/Source/mprcontents/75/14/7514ab28-248e-40a6-b92d-edd201409cbe.mxunit differ
diff --git a/Source/mprcontents/c4/5e/c45ebab1-b25b-4117-a4ab-9d12e1b84750.mxunit b/Source/mprcontents/75/5f/755f3f10-c362-4a3e-88d4-b95b2ae325b4.mxunit
similarity index 53%
rename from Source/mprcontents/c4/5e/c45ebab1-b25b-4117-a4ab-9d12e1b84750.mxunit
rename to Source/mprcontents/75/5f/755f3f10-c362-4a3e-88d4-b95b2ae325b4.mxunit
index 587c0a14..873039c4 100644
Binary files a/Source/mprcontents/c4/5e/c45ebab1-b25b-4117-a4ab-9d12e1b84750.mxunit and b/Source/mprcontents/75/5f/755f3f10-c362-4a3e-88d4-b95b2ae325b4.mxunit differ
diff --git a/Source/mprcontents/50/54/5054a174-9365-4f85-8a6a-8f8a0528dd77.mxunit b/Source/mprcontents/75/bb/75bb60cc-29e4-41ae-b68a-c0d754747dcb.mxunit
similarity index 57%
rename from Source/mprcontents/50/54/5054a174-9365-4f85-8a6a-8f8a0528dd77.mxunit
rename to Source/mprcontents/75/bb/75bb60cc-29e4-41ae-b68a-c0d754747dcb.mxunit
index 44c84c0a..06e997b1 100644
Binary files a/Source/mprcontents/50/54/5054a174-9365-4f85-8a6a-8f8a0528dd77.mxunit and b/Source/mprcontents/75/bb/75bb60cc-29e4-41ae-b68a-c0d754747dcb.mxunit differ
diff --git a/Source/mprcontents/76/9a/769a7643-78e8-43ff-a20f-186f658d7e01.mxunit b/Source/mprcontents/76/9a/769a7643-78e8-43ff-a20f-186f658d7e01.mxunit
new file mode 100644
index 00000000..7afa5526
Binary files /dev/null and b/Source/mprcontents/76/9a/769a7643-78e8-43ff-a20f-186f658d7e01.mxunit differ
diff --git a/Source/mprcontents/76/b3/76b3dcbd-1d47-45c5-9ba3-fe382d9ddcde.mxunit b/Source/mprcontents/76/b3/76b3dcbd-1d47-45c5-9ba3-fe382d9ddcde.mxunit
deleted file mode 100644
index 5d00d3ca..00000000
Binary files a/Source/mprcontents/76/b3/76b3dcbd-1d47-45c5-9ba3-fe382d9ddcde.mxunit and /dev/null differ
diff --git a/Source/mprcontents/77/16/77167157-092a-46bb-b47a-63b5f257f0d0.mxunit b/Source/mprcontents/77/16/77167157-092a-46bb-b47a-63b5f257f0d0.mxunit
deleted file mode 100644
index ecac3174..00000000
Binary files a/Source/mprcontents/77/16/77167157-092a-46bb-b47a-63b5f257f0d0.mxunit and /dev/null differ
diff --git a/Source/mprcontents/77/84/77844673-b69f-4721-8c87-d5d42ab58d59.mxunit b/Source/mprcontents/77/84/77844673-b69f-4721-8c87-d5d42ab58d59.mxunit
new file mode 100644
index 00000000..3bbcdabf
Binary files /dev/null and b/Source/mprcontents/77/84/77844673-b69f-4721-8c87-d5d42ab58d59.mxunit differ
diff --git a/Source/mprcontents/78/19/781956c9-f0d5-441d-ade9-19eb068c9578.mxunit b/Source/mprcontents/78/19/781956c9-f0d5-441d-ade9-19eb068c9578.mxunit
new file mode 100644
index 00000000..b5518bd3
Binary files /dev/null and b/Source/mprcontents/78/19/781956c9-f0d5-441d-ade9-19eb068c9578.mxunit differ
diff --git a/Source/mprcontents/79/67/7967a209-fe8a-4bdc-bb5c-88f2ecae3483.mxunit b/Source/mprcontents/79/67/7967a209-fe8a-4bdc-bb5c-88f2ecae3483.mxunit
new file mode 100644
index 00000000..0f8c3bf8
Binary files /dev/null and b/Source/mprcontents/79/67/7967a209-fe8a-4bdc-bb5c-88f2ecae3483.mxunit differ
diff --git a/Source/mprcontents/79/b9/79b95066-4acb-4ad1-8634-36e848a4872a.mxunit b/Source/mprcontents/79/b9/79b95066-4acb-4ad1-8634-36e848a4872a.mxunit
new file mode 100644
index 00000000..2f6f36d2
Binary files /dev/null and b/Source/mprcontents/79/b9/79b95066-4acb-4ad1-8634-36e848a4872a.mxunit differ
diff --git a/Source/mprcontents/7a/55/7a556756-a069-4558-b76d-d13694d6d460.mxunit b/Source/mprcontents/7a/55/7a556756-a069-4558-b76d-d13694d6d460.mxunit
deleted file mode 100644
index ddc7b217..00000000
Binary files a/Source/mprcontents/7a/55/7a556756-a069-4558-b76d-d13694d6d460.mxunit and /dev/null differ
diff --git a/Source/mprcontents/7a/e9/7ae9dbe8-f789-461c-bc87-ca811c910b24.mxunit b/Source/mprcontents/7a/e9/7ae9dbe8-f789-461c-bc87-ca811c910b24.mxunit
deleted file mode 100644
index f0639d1f..00000000
Binary files a/Source/mprcontents/7a/e9/7ae9dbe8-f789-461c-bc87-ca811c910b24.mxunit and /dev/null differ
diff --git a/Source/mprcontents/7a/ed/7aeddcfa-ccb9-4ca2-9e2f-37203a708c78.mxunit b/Source/mprcontents/7a/ed/7aeddcfa-ccb9-4ca2-9e2f-37203a708c78.mxunit
deleted file mode 100644
index b709518b..00000000
Binary files a/Source/mprcontents/7a/ed/7aeddcfa-ccb9-4ca2-9e2f-37203a708c78.mxunit and /dev/null differ
diff --git a/Source/mprcontents/7b/02/7b02445d-e69b-40c3-84f4-5b87eddaae6f.mxunit b/Source/mprcontents/7b/02/7b02445d-e69b-40c3-84f4-5b87eddaae6f.mxunit
new file mode 100644
index 00000000..f134a433
Binary files /dev/null and b/Source/mprcontents/7b/02/7b02445d-e69b-40c3-84f4-5b87eddaae6f.mxunit differ
diff --git a/Source/mprcontents/7b/2c/7b2c230a-6c40-4ff3-a131-6040d9c4e0a5.mxunit b/Source/mprcontents/7b/2c/7b2c230a-6c40-4ff3-a131-6040d9c4e0a5.mxunit
new file mode 100644
index 00000000..b6a8045e
Binary files /dev/null and b/Source/mprcontents/7b/2c/7b2c230a-6c40-4ff3-a131-6040d9c4e0a5.mxunit differ
diff --git a/Source/mprcontents/7b/91/7b91c67e-0450-4fa5-b22f-779eacef4398.mxunit b/Source/mprcontents/7b/91/7b91c67e-0450-4fa5-b22f-779eacef4398.mxunit
deleted file mode 100644
index 28ab70d3..00000000
Binary files a/Source/mprcontents/7b/91/7b91c67e-0450-4fa5-b22f-779eacef4398.mxunit and /dev/null differ
diff --git a/Source/mprcontents/7b/b8/7bb87239-4529-4e0e-84df-86836a0896fb.mxunit b/Source/mprcontents/7b/b8/7bb87239-4529-4e0e-84df-86836a0896fb.mxunit
new file mode 100644
index 00000000..5b8f0070
Binary files /dev/null and b/Source/mprcontents/7b/b8/7bb87239-4529-4e0e-84df-86836a0896fb.mxunit differ
diff --git a/Source/mprcontents/7c/fd/7cfdad89-49c8-46a0-bf45-84b8ffe5dc89.mxunit b/Source/mprcontents/7c/fd/7cfdad89-49c8-46a0-bf45-84b8ffe5dc89.mxunit
index 2d7f2b18..74506fa7 100644
Binary files a/Source/mprcontents/7c/fd/7cfdad89-49c8-46a0-bf45-84b8ffe5dc89.mxunit and b/Source/mprcontents/7c/fd/7cfdad89-49c8-46a0-bf45-84b8ffe5dc89.mxunit differ
diff --git a/Source/mprcontents/29/6d/296df1db-b045-4a5c-8a5e-3faac780326a.mxunit b/Source/mprcontents/7d/16/7d16d15a-7f84-4c2b-9466-d48912950163.mxunit
similarity index 65%
rename from Source/mprcontents/29/6d/296df1db-b045-4a5c-8a5e-3faac780326a.mxunit
rename to Source/mprcontents/7d/16/7d16d15a-7f84-4c2b-9466-d48912950163.mxunit
index 4ee3619a..72177861 100644
Binary files a/Source/mprcontents/29/6d/296df1db-b045-4a5c-8a5e-3faac780326a.mxunit and b/Source/mprcontents/7d/16/7d16d15a-7f84-4c2b-9466-d48912950163.mxunit differ
diff --git a/Source/mprcontents/73/55/7355637a-cb0e-4b45-844c-2ec1f362045c.mxunit b/Source/mprcontents/7f/4f/7f4fb71e-b1b1-4c95-821f-f25365fb8c7d.mxunit
similarity index 62%
rename from Source/mprcontents/73/55/7355637a-cb0e-4b45-844c-2ec1f362045c.mxunit
rename to Source/mprcontents/7f/4f/7f4fb71e-b1b1-4c95-821f-f25365fb8c7d.mxunit
index 868e9550..e120046e 100644
Binary files a/Source/mprcontents/73/55/7355637a-cb0e-4b45-844c-2ec1f362045c.mxunit and b/Source/mprcontents/7f/4f/7f4fb71e-b1b1-4c95-821f-f25365fb8c7d.mxunit differ
diff --git a/Source/mprcontents/81/38/8138ff2f-0022-463c-84c5-297e38ded2b0.mxunit b/Source/mprcontents/81/38/8138ff2f-0022-463c-84c5-297e38ded2b0.mxunit
new file mode 100644
index 00000000..1f061319
Binary files /dev/null and b/Source/mprcontents/81/38/8138ff2f-0022-463c-84c5-297e38ded2b0.mxunit differ
diff --git a/Source/mprcontents/81/de/81de8e0c-0f57-4de4-a219-9c888ea76fb5.mxunit b/Source/mprcontents/81/de/81de8e0c-0f57-4de4-a219-9c888ea76fb5.mxunit
deleted file mode 100644
index ee3ee487..00000000
Binary files a/Source/mprcontents/81/de/81de8e0c-0f57-4de4-a219-9c888ea76fb5.mxunit and /dev/null differ
diff --git a/Source/mprcontents/83/b3/83b36e8e-b1c6-4279-8e8c-b1aa980f63b8.mxunit b/Source/mprcontents/83/b3/83b36e8e-b1c6-4279-8e8c-b1aa980f63b8.mxunit
new file mode 100644
index 00000000..e799fcee
Binary files /dev/null and b/Source/mprcontents/83/b3/83b36e8e-b1c6-4279-8e8c-b1aa980f63b8.mxunit differ
diff --git a/Source/mprcontents/83/b3/83b3ddd8-16d2-41a7-87d6-9e6febde3fc6.mxunit b/Source/mprcontents/83/b3/83b3ddd8-16d2-41a7-87d6-9e6febde3fc6.mxunit
index 40354dbf..443aa72b 100644
Binary files a/Source/mprcontents/83/b3/83b3ddd8-16d2-41a7-87d6-9e6febde3fc6.mxunit and b/Source/mprcontents/83/b3/83b3ddd8-16d2-41a7-87d6-9e6febde3fc6.mxunit differ
diff --git a/Source/mprcontents/84/b2/84b219ce-36fc-424a-9875-7042ceb4298d.mxunit b/Source/mprcontents/84/b2/84b219ce-36fc-424a-9875-7042ceb4298d.mxunit
index f45692cb..f35f6215 100644
Binary files a/Source/mprcontents/84/b2/84b219ce-36fc-424a-9875-7042ceb4298d.mxunit and b/Source/mprcontents/84/b2/84b219ce-36fc-424a-9875-7042ceb4298d.mxunit differ
diff --git a/Source/mprcontents/85/30/8530c037-5491-4b31-8347-33f3cfe5a9ef.mxunit b/Source/mprcontents/85/30/8530c037-5491-4b31-8347-33f3cfe5a9ef.mxunit
new file mode 100644
index 00000000..9b95e29d
Binary files /dev/null and b/Source/mprcontents/85/30/8530c037-5491-4b31-8347-33f3cfe5a9ef.mxunit differ
diff --git a/Source/mprcontents/85/6f/856f8b66-db9b-4448-9616-212faee13e7d.mxunit b/Source/mprcontents/85/6f/856f8b66-db9b-4448-9616-212faee13e7d.mxunit
deleted file mode 100644
index ed8eaf04..00000000
Binary files a/Source/mprcontents/85/6f/856f8b66-db9b-4448-9616-212faee13e7d.mxunit and /dev/null differ
diff --git a/Source/mprcontents/85/d1/85d15f68-76c2-4889-8c42-2c540e60306d.mxunit b/Source/mprcontents/85/d1/85d15f68-76c2-4889-8c42-2c540e60306d.mxunit
deleted file mode 100644
index d13bf9c5..00000000
Binary files a/Source/mprcontents/85/d1/85d15f68-76c2-4889-8c42-2c540e60306d.mxunit and /dev/null differ
diff --git a/Source/mprcontents/86/47/86475127-8b17-4cda-bc99-981e61a5d700.mxunit b/Source/mprcontents/86/47/86475127-8b17-4cda-bc99-981e61a5d700.mxunit
new file mode 100644
index 00000000..0f20ea76
Binary files /dev/null and b/Source/mprcontents/86/47/86475127-8b17-4cda-bc99-981e61a5d700.mxunit differ
diff --git a/Source/mprcontents/86/8e/868ea097-c7a7-4fbd-ad35-035c326ac292.mxunit b/Source/mprcontents/86/8e/868ea097-c7a7-4fbd-ad35-035c326ac292.mxunit
new file mode 100644
index 00000000..7e226a81
Binary files /dev/null and b/Source/mprcontents/86/8e/868ea097-c7a7-4fbd-ad35-035c326ac292.mxunit differ
diff --git a/Source/mprcontents/86/97/86977aa2-ead8-4b39-874a-e8b8c730fcfa.mxunit b/Source/mprcontents/86/97/86977aa2-ead8-4b39-874a-e8b8c730fcfa.mxunit
deleted file mode 100644
index 84b0cf14..00000000
Binary files a/Source/mprcontents/86/97/86977aa2-ead8-4b39-874a-e8b8c730fcfa.mxunit and /dev/null differ
diff --git a/Source/mprcontents/e2/06/e206afa9-7a21-4bab-b785-31d937f27e1d.mxunit b/Source/mprcontents/87/5a/875a9080-75ad-4f89-a3ab-91a02e3ae1ff.mxunit
similarity index 82%
rename from Source/mprcontents/e2/06/e206afa9-7a21-4bab-b785-31d937f27e1d.mxunit
rename to Source/mprcontents/87/5a/875a9080-75ad-4f89-a3ab-91a02e3ae1ff.mxunit
index a35128e7..146a0aa2 100644
Binary files a/Source/mprcontents/e2/06/e206afa9-7a21-4bab-b785-31d937f27e1d.mxunit and b/Source/mprcontents/87/5a/875a9080-75ad-4f89-a3ab-91a02e3ae1ff.mxunit differ
diff --git a/Source/mprcontents/87/67/876725a8-4708-407b-b633-aa1d2b214bed.mxunit b/Source/mprcontents/87/67/876725a8-4708-407b-b633-aa1d2b214bed.mxunit
index 0740b241..a01079ee 100644
Binary files a/Source/mprcontents/87/67/876725a8-4708-407b-b633-aa1d2b214bed.mxunit and b/Source/mprcontents/87/67/876725a8-4708-407b-b633-aa1d2b214bed.mxunit differ
diff --git a/Source/mprcontents/87/71/8771c175-73a7-4bd9-a2ad-8ad19d863d01.mxunit b/Source/mprcontents/87/71/8771c175-73a7-4bd9-a2ad-8ad19d863d01.mxunit
index 27e42b35..39d4a90a 100644
Binary files a/Source/mprcontents/87/71/8771c175-73a7-4bd9-a2ad-8ad19d863d01.mxunit and b/Source/mprcontents/87/71/8771c175-73a7-4bd9-a2ad-8ad19d863d01.mxunit differ
diff --git a/Source/mprcontents/87/d7/87d7ed24-840f-4966-9038-be9a58a3fddc.mxunit b/Source/mprcontents/87/d7/87d7ed24-840f-4966-9038-be9a58a3fddc.mxunit
new file mode 100644
index 00000000..709a9293
Binary files /dev/null and b/Source/mprcontents/87/d7/87d7ed24-840f-4966-9038-be9a58a3fddc.mxunit differ
diff --git a/Source/mprcontents/88/70/8870ee8f-597e-4d32-8a62-5ee06a53fc45.mxunit b/Source/mprcontents/88/70/8870ee8f-597e-4d32-8a62-5ee06a53fc45.mxunit
new file mode 100644
index 00000000..5a87c202
Binary files /dev/null and b/Source/mprcontents/88/70/8870ee8f-597e-4d32-8a62-5ee06a53fc45.mxunit differ
diff --git a/Source/mprcontents/88/d3/88d33fc9-1b0a-4d44-abe9-c8e2f01fb511.mxunit b/Source/mprcontents/88/d3/88d33fc9-1b0a-4d44-abe9-c8e2f01fb511.mxunit
index e3827c3f..0a6b4c5b 100644
Binary files a/Source/mprcontents/88/d3/88d33fc9-1b0a-4d44-abe9-c8e2f01fb511.mxunit and b/Source/mprcontents/88/d3/88d33fc9-1b0a-4d44-abe9-c8e2f01fb511.mxunit differ
diff --git a/Source/mprcontents/88/f7/88f73142-b094-4b9a-96b6-aba546a2facc.mxunit b/Source/mprcontents/88/f7/88f73142-b094-4b9a-96b6-aba546a2facc.mxunit
deleted file mode 100644
index 060989dc..00000000
Binary files a/Source/mprcontents/88/f7/88f73142-b094-4b9a-96b6-aba546a2facc.mxunit and /dev/null differ
diff --git a/Source/mprcontents/89/f9/89f94e0b-d4b4-46a0-b9a2-6b91f714617a.mxunit b/Source/mprcontents/89/f9/89f94e0b-d4b4-46a0-b9a2-6b91f714617a.mxunit
deleted file mode 100644
index 8f46a6ce..00000000
Binary files a/Source/mprcontents/89/f9/89f94e0b-d4b4-46a0-b9a2-6b91f714617a.mxunit and /dev/null differ
diff --git a/Source/mprcontents/8a/ae/8aae58d0-5cba-44e9-b873-bd244e33e6f2.mxunit b/Source/mprcontents/8a/ae/8aae58d0-5cba-44e9-b873-bd244e33e6f2.mxunit
deleted file mode 100644
index 74949fb8..00000000
Binary files a/Source/mprcontents/8a/ae/8aae58d0-5cba-44e9-b873-bd244e33e6f2.mxunit and /dev/null differ
diff --git a/Source/mprcontents/8b/88/8b887f2e-f989-4b38-8b02-2b3fa06ce1f6.mxunit b/Source/mprcontents/8b/88/8b887f2e-f989-4b38-8b02-2b3fa06ce1f6.mxunit
new file mode 100644
index 00000000..5b2e3f1c
Binary files /dev/null and b/Source/mprcontents/8b/88/8b887f2e-f989-4b38-8b02-2b3fa06ce1f6.mxunit differ
diff --git a/Source/mprcontents/8b/f1/8bf19fe7-973d-4a8b-963d-d9cd5e6f214b.mxunit b/Source/mprcontents/8b/f1/8bf19fe7-973d-4a8b-963d-d9cd5e6f214b.mxunit
deleted file mode 100644
index c995f95a..00000000
Binary files a/Source/mprcontents/8b/f1/8bf19fe7-973d-4a8b-963d-d9cd5e6f214b.mxunit and /dev/null differ
diff --git a/Source/mprcontents/8c/13/8c13f40d-ba60-4cab-94dc-08948978eeea.mxunit b/Source/mprcontents/8c/13/8c13f40d-ba60-4cab-94dc-08948978eeea.mxunit
deleted file mode 100644
index e0f4694b..00000000
Binary files a/Source/mprcontents/8c/13/8c13f40d-ba60-4cab-94dc-08948978eeea.mxunit and /dev/null differ
diff --git a/Source/mprcontents/8c/14/8c14ee8b-c58d-4f20-8289-1afb0dd15275.mxunit b/Source/mprcontents/8c/14/8c14ee8b-c58d-4f20-8289-1afb0dd15275.mxunit
new file mode 100644
index 00000000..46a46fcd
Binary files /dev/null and b/Source/mprcontents/8c/14/8c14ee8b-c58d-4f20-8289-1afb0dd15275.mxunit differ
diff --git a/Source/mprcontents/8f/23/8f23ff99-2db8-4822-a66e-e6cac9ca6841.mxunit b/Source/mprcontents/8f/23/8f23ff99-2db8-4822-a66e-e6cac9ca6841.mxunit
new file mode 100644
index 00000000..540c65c5
Binary files /dev/null and b/Source/mprcontents/8f/23/8f23ff99-2db8-4822-a66e-e6cac9ca6841.mxunit differ
diff --git a/Source/mprcontents/8f/53/8f53e1f5-cf06-4dcb-8796-4b7056192a65.mxunit b/Source/mprcontents/8f/53/8f53e1f5-cf06-4dcb-8796-4b7056192a65.mxunit
deleted file mode 100644
index 25ddf16a..00000000
Binary files a/Source/mprcontents/8f/53/8f53e1f5-cf06-4dcb-8796-4b7056192a65.mxunit and /dev/null differ
diff --git a/Source/mprcontents/8f/76/8f76dd6e-9209-4fad-bf70-25a807906726.mxunit b/Source/mprcontents/8f/76/8f76dd6e-9209-4fad-bf70-25a807906726.mxunit
new file mode 100644
index 00000000..f4c86c88
Binary files /dev/null and b/Source/mprcontents/8f/76/8f76dd6e-9209-4fad-bf70-25a807906726.mxunit differ
diff --git a/Source/mprcontents/8f/a8/8fa818d7-f5d3-4f90-8a75-ef2512e595a2.mxunit b/Source/mprcontents/8f/a8/8fa818d7-f5d3-4f90-8a75-ef2512e595a2.mxunit
new file mode 100644
index 00000000..38956827
Binary files /dev/null and b/Source/mprcontents/8f/a8/8fa818d7-f5d3-4f90-8a75-ef2512e595a2.mxunit differ
diff --git a/Source/mprcontents/c9/dc/c9dc43b4-28f4-44bb-9577-5c9bf8ca77a3.mxunit b/Source/mprcontents/8f/b5/8fb5fd69-aa4c-4646-ab0a-6d63f438ce4a.mxunit
similarity index 70%
rename from Source/mprcontents/c9/dc/c9dc43b4-28f4-44bb-9577-5c9bf8ca77a3.mxunit
rename to Source/mprcontents/8f/b5/8fb5fd69-aa4c-4646-ab0a-6d63f438ce4a.mxunit
index f9d29d39..13dd0310 100644
Binary files a/Source/mprcontents/c9/dc/c9dc43b4-28f4-44bb-9577-5c9bf8ca77a3.mxunit and b/Source/mprcontents/8f/b5/8fb5fd69-aa4c-4646-ab0a-6d63f438ce4a.mxunit differ
diff --git a/Source/mprcontents/90/02/900282c3-d41a-47e4-be89-0de0ee4c5ebd.mxunit b/Source/mprcontents/90/02/900282c3-d41a-47e4-be89-0de0ee4c5ebd.mxunit
new file mode 100644
index 00000000..022516a3
Binary files /dev/null and b/Source/mprcontents/90/02/900282c3-d41a-47e4-be89-0de0ee4c5ebd.mxunit differ
diff --git a/Source/mprcontents/9a/17/9a173889-569e-43e5-9f2c-6db20d3ae996.mxunit b/Source/mprcontents/90/0a/900a43a7-6526-4303-bb15-4bc02c7b3fdf.mxunit
similarity index 64%
rename from Source/mprcontents/9a/17/9a173889-569e-43e5-9f2c-6db20d3ae996.mxunit
rename to Source/mprcontents/90/0a/900a43a7-6526-4303-bb15-4bc02c7b3fdf.mxunit
index 01b47e3f..75993cd6 100644
Binary files a/Source/mprcontents/9a/17/9a173889-569e-43e5-9f2c-6db20d3ae996.mxunit and b/Source/mprcontents/90/0a/900a43a7-6526-4303-bb15-4bc02c7b3fdf.mxunit differ
diff --git a/Source/mprcontents/90/39/90392613-142f-4682-9771-43ce0f1d2c77.mxunit b/Source/mprcontents/90/39/90392613-142f-4682-9771-43ce0f1d2c77.mxunit
new file mode 100644
index 00000000..2bf5aff7
Binary files /dev/null and b/Source/mprcontents/90/39/90392613-142f-4682-9771-43ce0f1d2c77.mxunit differ
diff --git a/Source/mprcontents/91/17/91175c1d-28c1-4a43-928f-bda00b389e89.mxunit b/Source/mprcontents/91/17/91175c1d-28c1-4a43-928f-bda00b389e89.mxunit
deleted file mode 100644
index 1964e347..00000000
Binary files a/Source/mprcontents/91/17/91175c1d-28c1-4a43-928f-bda00b389e89.mxunit and /dev/null differ
diff --git a/Source/mprcontents/91/3b/913bb8d9-5aa2-499a-b536-0671ac24c006.mxunit b/Source/mprcontents/91/3b/913bb8d9-5aa2-499a-b536-0671ac24c006.mxunit
deleted file mode 100644
index be8004be..00000000
Binary files a/Source/mprcontents/91/3b/913bb8d9-5aa2-499a-b536-0671ac24c006.mxunit and /dev/null differ
diff --git a/Source/mprcontents/92/77/92770b95-28a4-40e3-bd99-432611bd277c.mxunit b/Source/mprcontents/92/77/92770b95-28a4-40e3-bd99-432611bd277c.mxunit
new file mode 100644
index 00000000..81fffd46
Binary files /dev/null and b/Source/mprcontents/92/77/92770b95-28a4-40e3-bd99-432611bd277c.mxunit differ
diff --git a/Source/mprcontents/92/8a/928a1d43-8bdd-4409-8908-b010d8554052.mxunit b/Source/mprcontents/92/8a/928a1d43-8bdd-4409-8908-b010d8554052.mxunit
deleted file mode 100644
index a60ee3c0..00000000
Binary files a/Source/mprcontents/92/8a/928a1d43-8bdd-4409-8908-b010d8554052.mxunit and /dev/null differ
diff --git a/Source/mprcontents/92/fa/92fa31c7-6de4-45fe-930e-ede173ff5589.mxunit b/Source/mprcontents/92/fa/92fa31c7-6de4-45fe-930e-ede173ff5589.mxunit
new file mode 100644
index 00000000..4b7b302a
Binary files /dev/null and b/Source/mprcontents/92/fa/92fa31c7-6de4-45fe-930e-ede173ff5589.mxunit differ
diff --git a/Source/mprcontents/13/28/1328f6e9-8a24-47f6-8503-7dc32160172e.mxunit b/Source/mprcontents/93/d9/93d9e58f-58c2-4cff-a3c1-a2f710c65ad7.mxunit
similarity index 64%
rename from Source/mprcontents/13/28/1328f6e9-8a24-47f6-8503-7dc32160172e.mxunit
rename to Source/mprcontents/93/d9/93d9e58f-58c2-4cff-a3c1-a2f710c65ad7.mxunit
index 05acc007..5dfc2a5f 100644
Binary files a/Source/mprcontents/13/28/1328f6e9-8a24-47f6-8503-7dc32160172e.mxunit and b/Source/mprcontents/93/d9/93d9e58f-58c2-4cff-a3c1-a2f710c65ad7.mxunit differ
diff --git a/Source/mprcontents/94/76/9476bf70-6b34-4032-be52-325c9e34298f.mxunit b/Source/mprcontents/94/76/9476bf70-6b34-4032-be52-325c9e34298f.mxunit
new file mode 100644
index 00000000..47266b42
Binary files /dev/null and b/Source/mprcontents/94/76/9476bf70-6b34-4032-be52-325c9e34298f.mxunit differ
diff --git a/Source/mprcontents/94/da/94dae20a-041c-45bf-bfa3-08056827e551.mxunit b/Source/mprcontents/94/da/94dae20a-041c-45bf-bfa3-08056827e551.mxunit
new file mode 100644
index 00000000..43cec8f2
Binary files /dev/null and b/Source/mprcontents/94/da/94dae20a-041c-45bf-bfa3-08056827e551.mxunit differ
diff --git a/Source/mprcontents/95/50/955067e9-7ae5-4679-9397-ea8b599fa06d.mxunit b/Source/mprcontents/95/50/955067e9-7ae5-4679-9397-ea8b599fa06d.mxunit
deleted file mode 100644
index 0bc03b84..00000000
Binary files a/Source/mprcontents/95/50/955067e9-7ae5-4679-9397-ea8b599fa06d.mxunit and /dev/null differ
diff --git a/Source/mprcontents/95/df/95df0760-1b03-4862-94f8-11536e3c64e5.mxunit b/Source/mprcontents/95/df/95df0760-1b03-4862-94f8-11536e3c64e5.mxunit
new file mode 100644
index 00000000..556139cd
Binary files /dev/null and b/Source/mprcontents/95/df/95df0760-1b03-4862-94f8-11536e3c64e5.mxunit differ
diff --git a/Source/mprcontents/96/8d/968d16be-0d2f-4258-8c70-cfc9be4c6a09.mxunit b/Source/mprcontents/96/8d/968d16be-0d2f-4258-8c70-cfc9be4c6a09.mxunit
new file mode 100644
index 00000000..b416c673
Binary files /dev/null and b/Source/mprcontents/96/8d/968d16be-0d2f-4258-8c70-cfc9be4c6a09.mxunit differ
diff --git a/Source/mprcontents/97/20/97203fbd-2d61-4497-8b49-5fc0719a49bf.mxunit b/Source/mprcontents/97/20/97203fbd-2d61-4497-8b49-5fc0719a49bf.mxunit
new file mode 100644
index 00000000..7dd0d10d
Binary files /dev/null and b/Source/mprcontents/97/20/97203fbd-2d61-4497-8b49-5fc0719a49bf.mxunit differ
diff --git a/Source/mprcontents/97/6f/976ff5c0-035e-4b40-ba1c-920cc36e2eae.mxunit b/Source/mprcontents/97/6f/976ff5c0-035e-4b40-ba1c-920cc36e2eae.mxunit
index ac1bb33e..1759c376 100644
Binary files a/Source/mprcontents/97/6f/976ff5c0-035e-4b40-ba1c-920cc36e2eae.mxunit and b/Source/mprcontents/97/6f/976ff5c0-035e-4b40-ba1c-920cc36e2eae.mxunit differ
diff --git a/Source/mprcontents/97/8b/978b6dbc-9814-4e64-91fa-41ea296c4874.mxunit b/Source/mprcontents/97/8b/978b6dbc-9814-4e64-91fa-41ea296c4874.mxunit
new file mode 100644
index 00000000..6bc78db7
Binary files /dev/null and b/Source/mprcontents/97/8b/978b6dbc-9814-4e64-91fa-41ea296c4874.mxunit differ
diff --git a/Source/mprcontents/97/cf/97cf8c3d-9f68-4147-83cc-60c644dc2e1e.mxunit b/Source/mprcontents/97/cf/97cf8c3d-9f68-4147-83cc-60c644dc2e1e.mxunit
deleted file mode 100644
index 0262f354..00000000
Binary files a/Source/mprcontents/97/cf/97cf8c3d-9f68-4147-83cc-60c644dc2e1e.mxunit and /dev/null differ
diff --git a/Source/mprcontents/98/b1/98b1d490-74f8-41b1-ae38-fbcd44f00175.mxunit b/Source/mprcontents/98/b1/98b1d490-74f8-41b1-ae38-fbcd44f00175.mxunit
new file mode 100644
index 00000000..beb06d03
Binary files /dev/null and b/Source/mprcontents/98/b1/98b1d490-74f8-41b1-ae38-fbcd44f00175.mxunit differ
diff --git a/Source/mprcontents/99/7b/997b9fbd-093b-4ea0-aac5-521af3c5ae28.mxunit b/Source/mprcontents/99/7b/997b9fbd-093b-4ea0-aac5-521af3c5ae28.mxunit
new file mode 100644
index 00000000..df565e54
Binary files /dev/null and b/Source/mprcontents/99/7b/997b9fbd-093b-4ea0-aac5-521af3c5ae28.mxunit differ
diff --git a/Source/mprcontents/99/f3/99f390f1-2b89-40bb-92f9-0c16a7b4eac6.mxunit b/Source/mprcontents/99/f3/99f390f1-2b89-40bb-92f9-0c16a7b4eac6.mxunit
index b5c10739..a89a88ec 100644
Binary files a/Source/mprcontents/99/f3/99f390f1-2b89-40bb-92f9-0c16a7b4eac6.mxunit and b/Source/mprcontents/99/f3/99f390f1-2b89-40bb-92f9-0c16a7b4eac6.mxunit differ
diff --git a/Source/mprcontents/9b/75/9b7568c8-16af-4e1b-a992-5cad83d6107a.mxunit b/Source/mprcontents/9b/75/9b7568c8-16af-4e1b-a992-5cad83d6107a.mxunit
new file mode 100644
index 00000000..9a4ee02e
Binary files /dev/null and b/Source/mprcontents/9b/75/9b7568c8-16af-4e1b-a992-5cad83d6107a.mxunit differ
diff --git a/Source/mprcontents/9d/dc/9ddcbf8d-0701-4a1b-a321-a8f6f0e279b9.mxunit b/Source/mprcontents/9d/dc/9ddcbf8d-0701-4a1b-a321-a8f6f0e279b9.mxunit
new file mode 100644
index 00000000..8a02e18f
Binary files /dev/null and b/Source/mprcontents/9d/dc/9ddcbf8d-0701-4a1b-a321-a8f6f0e279b9.mxunit differ
diff --git a/Source/mprcontents/9e/63/9e63f15f-4cf6-47e7-bb6c-abe2edb90264.mxunit b/Source/mprcontents/9e/63/9e63f15f-4cf6-47e7-bb6c-abe2edb90264.mxunit
new file mode 100644
index 00000000..ddb30efa
Binary files /dev/null and b/Source/mprcontents/9e/63/9e63f15f-4cf6-47e7-bb6c-abe2edb90264.mxunit differ
diff --git a/Source/mprcontents/9e/72/9e729b5d-c36b-4d5f-bcf8-bad5faba6b17.mxunit b/Source/mprcontents/9e/72/9e729b5d-c36b-4d5f-bcf8-bad5faba6b17.mxunit
deleted file mode 100644
index b798a975..00000000
Binary files a/Source/mprcontents/9e/72/9e729b5d-c36b-4d5f-bcf8-bad5faba6b17.mxunit and /dev/null differ
diff --git a/Source/mprcontents/9f/6c/9f6c46a8-1451-4ea6-b8d3-fa0a6ec9b6ba.mxunit b/Source/mprcontents/9f/6c/9f6c46a8-1451-4ea6-b8d3-fa0a6ec9b6ba.mxunit
new file mode 100644
index 00000000..399a5f5f
Binary files /dev/null and b/Source/mprcontents/9f/6c/9f6c46a8-1451-4ea6-b8d3-fa0a6ec9b6ba.mxunit differ
diff --git a/Source/mprcontents/a0/69/a069c676-289f-4d9f-8e1f-d32ab05dcc7f.mxunit b/Source/mprcontents/a0/69/a069c676-289f-4d9f-8e1f-d32ab05dcc7f.mxunit
new file mode 100644
index 00000000..cd9867cd
Binary files /dev/null and b/Source/mprcontents/a0/69/a069c676-289f-4d9f-8e1f-d32ab05dcc7f.mxunit differ
diff --git a/Source/mprcontents/a0/88/a0883600-ec21-4c01-b3bf-d33826699391.mxunit b/Source/mprcontents/a0/88/a0883600-ec21-4c01-b3bf-d33826699391.mxunit
index 6c384c82..001107a4 100644
Binary files a/Source/mprcontents/a0/88/a0883600-ec21-4c01-b3bf-d33826699391.mxunit and b/Source/mprcontents/a0/88/a0883600-ec21-4c01-b3bf-d33826699391.mxunit differ
diff --git a/Source/mprcontents/f1/3c/f13c3312-967e-415b-aa0a-cc81cd1b6d85.mxunit b/Source/mprcontents/a1/4b/a14bbbe9-2e57-420f-ace5-55f9f06e2418.mxunit
similarity index 62%
rename from Source/mprcontents/f1/3c/f13c3312-967e-415b-aa0a-cc81cd1b6d85.mxunit
rename to Source/mprcontents/a1/4b/a14bbbe9-2e57-420f-ace5-55f9f06e2418.mxunit
index a552ef01..61d5ee11 100644
Binary files a/Source/mprcontents/f1/3c/f13c3312-967e-415b-aa0a-cc81cd1b6d85.mxunit and b/Source/mprcontents/a1/4b/a14bbbe9-2e57-420f-ace5-55f9f06e2418.mxunit differ
diff --git a/Source/mprcontents/a1/5a/a15abc1d-3625-458a-9673-556617a8ec1c.mxunit b/Source/mprcontents/a1/5a/a15abc1d-3625-458a-9673-556617a8ec1c.mxunit
deleted file mode 100644
index d4d6ac05..00000000
Binary files a/Source/mprcontents/a1/5a/a15abc1d-3625-458a-9673-556617a8ec1c.mxunit and /dev/null differ
diff --git a/Source/mprcontents/a1/5b/a15bc201-6916-4256-b60b-e5290d467921.mxunit b/Source/mprcontents/a1/5b/a15bc201-6916-4256-b60b-e5290d467921.mxunit
deleted file mode 100644
index 7ec89850..00000000
Binary files a/Source/mprcontents/a1/5b/a15bc201-6916-4256-b60b-e5290d467921.mxunit and /dev/null differ
diff --git a/Source/mprcontents/a1/6f/a16fadd6-3af5-41e3-a7ec-351e2b8b98bf.mxunit b/Source/mprcontents/a1/6f/a16fadd6-3af5-41e3-a7ec-351e2b8b98bf.mxunit
deleted file mode 100644
index 7316d013..00000000
Binary files a/Source/mprcontents/a1/6f/a16fadd6-3af5-41e3-a7ec-351e2b8b98bf.mxunit and /dev/null differ
diff --git a/Source/mprcontents/af/d6/afd6edec-3235-43d1-a974-b3eaf03f362f.mxunit b/Source/mprcontents/a3/67/a367d8a3-84c5-48ff-8d65-56409cdab9cc.mxunit
similarity index 92%
rename from Source/mprcontents/af/d6/afd6edec-3235-43d1-a974-b3eaf03f362f.mxunit
rename to Source/mprcontents/a3/67/a367d8a3-84c5-48ff-8d65-56409cdab9cc.mxunit
index 55adf3f2..7ed99581 100644
Binary files a/Source/mprcontents/af/d6/afd6edec-3235-43d1-a974-b3eaf03f362f.mxunit and b/Source/mprcontents/a3/67/a367d8a3-84c5-48ff-8d65-56409cdab9cc.mxunit differ
diff --git a/Source/mprcontents/a3/7d/a37d16af-2930-4af4-af7b-cb5ef8c92c37.mxunit b/Source/mprcontents/a3/7d/a37d16af-2930-4af4-af7b-cb5ef8c92c37.mxunit
new file mode 100644
index 00000000..c3d24f6f
Binary files /dev/null and b/Source/mprcontents/a3/7d/a37d16af-2930-4af4-af7b-cb5ef8c92c37.mxunit differ
diff --git a/Source/mprcontents/a3/8a/a38a925f-da96-4c58-90d0-07d4ba9ac98c.mxunit b/Source/mprcontents/a3/8a/a38a925f-da96-4c58-90d0-07d4ba9ac98c.mxunit
new file mode 100644
index 00000000..5704a12e
Binary files /dev/null and b/Source/mprcontents/a3/8a/a38a925f-da96-4c58-90d0-07d4ba9ac98c.mxunit differ
diff --git a/Source/mprcontents/a3/df/a3dfa840-0d44-4399-a32e-db320ec19fc3.mxunit b/Source/mprcontents/a3/df/a3dfa840-0d44-4399-a32e-db320ec19fc3.mxunit
new file mode 100644
index 00000000..16a80fe5
Binary files /dev/null and b/Source/mprcontents/a3/df/a3dfa840-0d44-4399-a32e-db320ec19fc3.mxunit differ
diff --git a/Source/mprcontents/a4/43/a4433acf-93c9-41fd-b28b-81adb2fe019a.mxunit b/Source/mprcontents/a4/43/a4433acf-93c9-41fd-b28b-81adb2fe019a.mxunit
deleted file mode 100644
index dd701aa8..00000000
Binary files a/Source/mprcontents/a4/43/a4433acf-93c9-41fd-b28b-81adb2fe019a.mxunit and /dev/null differ
diff --git a/Source/mprcontents/a4/60/a460dfdf-6c58-4519-baf8-baea62d4e460.mxunit b/Source/mprcontents/a4/60/a460dfdf-6c58-4519-baf8-baea62d4e460.mxunit
new file mode 100644
index 00000000..e2a80f72
Binary files /dev/null and b/Source/mprcontents/a4/60/a460dfdf-6c58-4519-baf8-baea62d4e460.mxunit differ
diff --git a/Source/mprcontents/91/5b/915bf42e-72e8-4574-b712-6fc034da8121.mxunit b/Source/mprcontents/a4/9c/a49cd8da-41ab-42de-a3d8-812d74df84e5.mxunit
similarity index 69%
rename from Source/mprcontents/91/5b/915bf42e-72e8-4574-b712-6fc034da8121.mxunit
rename to Source/mprcontents/a4/9c/a49cd8da-41ab-42de-a3d8-812d74df84e5.mxunit
index 745c1ddc..13c87c06 100644
Binary files a/Source/mprcontents/91/5b/915bf42e-72e8-4574-b712-6fc034da8121.mxunit and b/Source/mprcontents/a4/9c/a49cd8da-41ab-42de-a3d8-812d74df84e5.mxunit differ
diff --git a/Source/mprcontents/a5/5c/a55cb0be-7017-4cb0-915b-6ac9e8bd17a7.mxunit b/Source/mprcontents/a5/5c/a55cb0be-7017-4cb0-915b-6ac9e8bd17a7.mxunit
deleted file mode 100644
index fb3579cf..00000000
Binary files a/Source/mprcontents/a5/5c/a55cb0be-7017-4cb0-915b-6ac9e8bd17a7.mxunit and /dev/null differ
diff --git a/Source/mprcontents/a5/ba/a5bab3ff-80f1-4c8f-8915-f59810f2996e.mxunit b/Source/mprcontents/a5/ba/a5bab3ff-80f1-4c8f-8915-f59810f2996e.mxunit
new file mode 100644
index 00000000..0e824804
Binary files /dev/null and b/Source/mprcontents/a5/ba/a5bab3ff-80f1-4c8f-8915-f59810f2996e.mxunit differ
diff --git a/Source/mprcontents/a6/47/a647a3d8-46c0-4464-b96a-f8f2cbcd6321.mxunit b/Source/mprcontents/a6/47/a647a3d8-46c0-4464-b96a-f8f2cbcd6321.mxunit
index 251785b5..eac1b3a6 100644
Binary files a/Source/mprcontents/a6/47/a647a3d8-46c0-4464-b96a-f8f2cbcd6321.mxunit and b/Source/mprcontents/a6/47/a647a3d8-46c0-4464-b96a-f8f2cbcd6321.mxunit differ
diff --git a/Source/mprcontents/a6/93/a69318ff-4c3b-488f-9cb3-43f94f5bd336.mxunit b/Source/mprcontents/a6/93/a69318ff-4c3b-488f-9cb3-43f94f5bd336.mxunit
new file mode 100644
index 00000000..b6e3b7aa
Binary files /dev/null and b/Source/mprcontents/a6/93/a69318ff-4c3b-488f-9cb3-43f94f5bd336.mxunit differ
diff --git a/Source/mprcontents/a6/d4/a6d4ef88-becf-4f11-ba03-11cabffff1e7.mxunit b/Source/mprcontents/a6/d4/a6d4ef88-becf-4f11-ba03-11cabffff1e7.mxunit
index 7474751e..6a0d4c8e 100644
Binary files a/Source/mprcontents/a6/d4/a6d4ef88-becf-4f11-ba03-11cabffff1e7.mxunit and b/Source/mprcontents/a6/d4/a6d4ef88-becf-4f11-ba03-11cabffff1e7.mxunit differ
diff --git a/Source/mprcontents/a6/fd/a6fdce97-3fce-4163-bfa6-0120664a18b3.mxunit b/Source/mprcontents/a6/fd/a6fdce97-3fce-4163-bfa6-0120664a18b3.mxunit
index 7f47fa31..0f181877 100644
Binary files a/Source/mprcontents/a6/fd/a6fdce97-3fce-4163-bfa6-0120664a18b3.mxunit and b/Source/mprcontents/a6/fd/a6fdce97-3fce-4163-bfa6-0120664a18b3.mxunit differ
diff --git a/Source/mprcontents/a7/0b/a70b1857-9f35-4d32-b20f-567b0421f986.mxunit b/Source/mprcontents/a7/0b/a70b1857-9f35-4d32-b20f-567b0421f986.mxunit
index 6cd50035..04c34dde 100644
Binary files a/Source/mprcontents/a7/0b/a70b1857-9f35-4d32-b20f-567b0421f986.mxunit and b/Source/mprcontents/a7/0b/a70b1857-9f35-4d32-b20f-567b0421f986.mxunit differ
diff --git a/Source/mprcontents/a7/71/a771dffa-682b-4534-930c-0c9124ac6b20.mxunit b/Source/mprcontents/a7/71/a771dffa-682b-4534-930c-0c9124ac6b20.mxunit
index 278fb574..9a4ab3b4 100644
Binary files a/Source/mprcontents/a7/71/a771dffa-682b-4534-930c-0c9124ac6b20.mxunit and b/Source/mprcontents/a7/71/a771dffa-682b-4534-930c-0c9124ac6b20.mxunit differ
diff --git a/Source/mprcontents/a9/00/a900edb3-7824-49ce-aa89-c4e15e2f35e7.mxunit b/Source/mprcontents/a9/00/a900edb3-7824-49ce-aa89-c4e15e2f35e7.mxunit
new file mode 100644
index 00000000..156909a4
Binary files /dev/null and b/Source/mprcontents/a9/00/a900edb3-7824-49ce-aa89-c4e15e2f35e7.mxunit differ
diff --git a/Source/mprcontents/39/8b/398bc934-0bc0-4472-be08-2963c0106f92.mxunit b/Source/mprcontents/aa/61/aa61b3ef-d701-4398-9bf0-5f916cd2f223.mxunit
similarity index 55%
rename from Source/mprcontents/39/8b/398bc934-0bc0-4472-be08-2963c0106f92.mxunit
rename to Source/mprcontents/aa/61/aa61b3ef-d701-4398-9bf0-5f916cd2f223.mxunit
index 41c89495..af55fbc3 100644
Binary files a/Source/mprcontents/39/8b/398bc934-0bc0-4472-be08-2963c0106f92.mxunit and b/Source/mprcontents/aa/61/aa61b3ef-d701-4398-9bf0-5f916cd2f223.mxunit differ
diff --git a/Source/mprcontents/aa/ae/aaae4f70-94e8-491b-861a-0ba938d95511.mxunit b/Source/mprcontents/aa/ae/aaae4f70-94e8-491b-861a-0ba938d95511.mxunit
index 7958d73a..459585fa 100644
Binary files a/Source/mprcontents/aa/ae/aaae4f70-94e8-491b-861a-0ba938d95511.mxunit and b/Source/mprcontents/aa/ae/aaae4f70-94e8-491b-861a-0ba938d95511.mxunit differ
diff --git a/Source/mprcontents/ac/bc/acbc3e1a-b1c2-4ec7-93a2-b1ce1510908e.mxunit b/Source/mprcontents/ac/bc/acbc3e1a-b1c2-4ec7-93a2-b1ce1510908e.mxunit
new file mode 100644
index 00000000..30cbe78a
Binary files /dev/null and b/Source/mprcontents/ac/bc/acbc3e1a-b1c2-4ec7-93a2-b1ce1510908e.mxunit differ
diff --git a/Source/mprcontents/ac/f5/acf549fe-6ed7-42ef-afdf-ded127a50a4e.mxunit b/Source/mprcontents/ac/f5/acf549fe-6ed7-42ef-afdf-ded127a50a4e.mxunit
index 94cf2bdb..baae0df2 100644
Binary files a/Source/mprcontents/ac/f5/acf549fe-6ed7-42ef-afdf-ded127a50a4e.mxunit and b/Source/mprcontents/ac/f5/acf549fe-6ed7-42ef-afdf-ded127a50a4e.mxunit differ
diff --git a/Source/mprcontents/ae/8a/ae8a6a03-6227-4564-ae6f-bfe491000818.mxunit b/Source/mprcontents/ae/8a/ae8a6a03-6227-4564-ae6f-bfe491000818.mxunit
deleted file mode 100644
index a85385f8..00000000
Binary files a/Source/mprcontents/ae/8a/ae8a6a03-6227-4564-ae6f-bfe491000818.mxunit and /dev/null differ
diff --git a/Source/mprcontents/ae/f8/aef839df-f96e-4731-a170-7159fe30827e.mxunit b/Source/mprcontents/ae/f8/aef839df-f96e-4731-a170-7159fe30827e.mxunit
deleted file mode 100644
index 9ca560ad..00000000
Binary files a/Source/mprcontents/ae/f8/aef839df-f96e-4731-a170-7159fe30827e.mxunit and /dev/null differ
diff --git a/Source/mprcontents/af/8b/af8bc059-bc3a-4880-ab23-23cfad9e8f82.mxunit b/Source/mprcontents/af/8b/af8bc059-bc3a-4880-ab23-23cfad9e8f82.mxunit
new file mode 100644
index 00000000..5d1e6c79
Binary files /dev/null and b/Source/mprcontents/af/8b/af8bc059-bc3a-4880-ab23-23cfad9e8f82.mxunit differ
diff --git a/Source/mprcontents/af/d2/afd25fcf-b7ca-44cd-a4a4-ce771175ed71.mxunit b/Source/mprcontents/af/d2/afd25fcf-b7ca-44cd-a4a4-ce771175ed71.mxunit
new file mode 100644
index 00000000..6d777b78
Binary files /dev/null and b/Source/mprcontents/af/d2/afd25fcf-b7ca-44cd-a4a4-ce771175ed71.mxunit differ
diff --git a/Source/mprcontents/b1/71/b171036e-357e-4569-851d-db4a8daee943.mxunit b/Source/mprcontents/b1/71/b171036e-357e-4569-851d-db4a8daee943.mxunit
new file mode 100644
index 00000000..489aa02a
Binary files /dev/null and b/Source/mprcontents/b1/71/b171036e-357e-4569-851d-db4a8daee943.mxunit differ
diff --git a/Source/mprcontents/b1/db/b1db7518-b091-4fec-90b1-e2bdde530eb8.mxunit b/Source/mprcontents/b1/db/b1db7518-b091-4fec-90b1-e2bdde530eb8.mxunit
new file mode 100644
index 00000000..f3cbab4c
Binary files /dev/null and b/Source/mprcontents/b1/db/b1db7518-b091-4fec-90b1-e2bdde530eb8.mxunit differ
diff --git a/Source/mprcontents/b2/1e/b21ecfb6-009d-4b4d-9ac9-0631658947cb.mxunit b/Source/mprcontents/b2/1e/b21ecfb6-009d-4b4d-9ac9-0631658947cb.mxunit
new file mode 100644
index 00000000..cefcb967
Binary files /dev/null and b/Source/mprcontents/b2/1e/b21ecfb6-009d-4b4d-9ac9-0631658947cb.mxunit differ
diff --git a/Source/mprcontents/b2/72/b272213d-6428-4715-a89a-a45651c3250d.mxunit b/Source/mprcontents/b2/72/b272213d-6428-4715-a89a-a45651c3250d.mxunit
deleted file mode 100644
index 80f74548..00000000
Binary files a/Source/mprcontents/b2/72/b272213d-6428-4715-a89a-a45651c3250d.mxunit and /dev/null differ
diff --git a/Source/mprcontents/b2/78/b2786ccc-dffb-4693-9b40-3bb9effb203d.mxunit b/Source/mprcontents/b2/78/b2786ccc-dffb-4693-9b40-3bb9effb203d.mxunit
new file mode 100644
index 00000000..c9ea1cda
Binary files /dev/null and b/Source/mprcontents/b2/78/b2786ccc-dffb-4693-9b40-3bb9effb203d.mxunit differ
diff --git a/Source/mprcontents/b2/b5/b2b5fc36-048e-43d0-a8d4-48d2a72325d2.mxunit b/Source/mprcontents/b2/b5/b2b5fc36-048e-43d0-a8d4-48d2a72325d2.mxunit
new file mode 100644
index 00000000..227e7e06
Binary files /dev/null and b/Source/mprcontents/b2/b5/b2b5fc36-048e-43d0-a8d4-48d2a72325d2.mxunit differ
diff --git a/Source/mprcontents/5f/1b/5f1b15b5-bf93-4df3-a3b5-b0cb0d38856f.mxunit b/Source/mprcontents/b2/e2/b2e2d5ff-cacd-4b01-8f3c-90448189e2a0.mxunit
similarity index 83%
rename from Source/mprcontents/5f/1b/5f1b15b5-bf93-4df3-a3b5-b0cb0d38856f.mxunit
rename to Source/mprcontents/b2/e2/b2e2d5ff-cacd-4b01-8f3c-90448189e2a0.mxunit
index 44c956e6..684cf6db 100644
Binary files a/Source/mprcontents/5f/1b/5f1b15b5-bf93-4df3-a3b5-b0cb0d38856f.mxunit and b/Source/mprcontents/b2/e2/b2e2d5ff-cacd-4b01-8f3c-90448189e2a0.mxunit differ
diff --git a/Source/mprcontents/b3/43/b3436a91-72d6-48f6-a744-744c685de64e.mxunit b/Source/mprcontents/b3/43/b3436a91-72d6-48f6-a744-744c685de64e.mxunit
new file mode 100644
index 00000000..36571e3a
Binary files /dev/null and b/Source/mprcontents/b3/43/b3436a91-72d6-48f6-a744-744c685de64e.mxunit differ
diff --git a/Source/mprcontents/b3/9d/b39dbfe1-289a-40c2-bb32-c18b75788e87.mxunit b/Source/mprcontents/b3/9d/b39dbfe1-289a-40c2-bb32-c18b75788e87.mxunit
new file mode 100644
index 00000000..aeb3593b
Binary files /dev/null and b/Source/mprcontents/b3/9d/b39dbfe1-289a-40c2-bb32-c18b75788e87.mxunit differ
diff --git a/Source/mprcontents/b4/18/b4184637-839b-4ba8-a536-6cb8539fd82d.mxunit b/Source/mprcontents/b4/18/b4184637-839b-4ba8-a536-6cb8539fd82d.mxunit
new file mode 100644
index 00000000..bf203193
Binary files /dev/null and b/Source/mprcontents/b4/18/b4184637-839b-4ba8-a536-6cb8539fd82d.mxunit differ
diff --git a/Source/mprcontents/b4/31/b4319354-f382-4b74-a2e4-db57267ac1ff.mxunit b/Source/mprcontents/b4/31/b4319354-f382-4b74-a2e4-db57267ac1ff.mxunit
new file mode 100644
index 00000000..9f88dbb0
Binary files /dev/null and b/Source/mprcontents/b4/31/b4319354-f382-4b74-a2e4-db57267ac1ff.mxunit differ
diff --git a/Source/mprcontents/b5/d9/b5d94d11-00d6-4d7f-b398-6a28fefaa684.mxunit b/Source/mprcontents/b5/d9/b5d94d11-00d6-4d7f-b398-6a28fefaa684.mxunit
deleted file mode 100644
index d8c75a56..00000000
Binary files a/Source/mprcontents/b5/d9/b5d94d11-00d6-4d7f-b398-6a28fefaa684.mxunit and /dev/null differ
diff --git a/Source/mprcontents/b8/5d/b85d208b-f4f2-4bdf-b1bb-a9e80e2ffd65.mxunit b/Source/mprcontents/b8/5d/b85d208b-f4f2-4bdf-b1bb-a9e80e2ffd65.mxunit
index 1a78bba2..26ac21d2 100644
Binary files a/Source/mprcontents/b8/5d/b85d208b-f4f2-4bdf-b1bb-a9e80e2ffd65.mxunit and b/Source/mprcontents/b8/5d/b85d208b-f4f2-4bdf-b1bb-a9e80e2ffd65.mxunit differ
diff --git a/Source/mprcontents/b8/8b/b88b1efb-df8c-4f38-887e-b5c341bfef73.mxunit b/Source/mprcontents/b8/8b/b88b1efb-df8c-4f38-887e-b5c341bfef73.mxunit
deleted file mode 100644
index 307a0858..00000000
Binary files a/Source/mprcontents/b8/8b/b88b1efb-df8c-4f38-887e-b5c341bfef73.mxunit and /dev/null differ
diff --git a/Source/mprcontents/d1/40/d140674b-59c7-41ad-a968-88d4939235bd.mxunit b/Source/mprcontents/b9/12/b912006b-c0aa-4e98-a236-09b1ee4f87f3.mxunit
similarity index 50%
rename from Source/mprcontents/d1/40/d140674b-59c7-41ad-a968-88d4939235bd.mxunit
rename to Source/mprcontents/b9/12/b912006b-c0aa-4e98-a236-09b1ee4f87f3.mxunit
index d65fcb89..6ca1097e 100644
Binary files a/Source/mprcontents/d1/40/d140674b-59c7-41ad-a968-88d4939235bd.mxunit and b/Source/mprcontents/b9/12/b912006b-c0aa-4e98-a236-09b1ee4f87f3.mxunit differ
diff --git a/Source/mprcontents/b9/96/b9966f67-7722-4510-9d88-7167fb2b4924.mxunit b/Source/mprcontents/b9/96/b9966f67-7722-4510-9d88-7167fb2b4924.mxunit
new file mode 100644
index 00000000..74987632
Binary files /dev/null and b/Source/mprcontents/b9/96/b9966f67-7722-4510-9d88-7167fb2b4924.mxunit differ
diff --git a/Source/mprcontents/b9/c5/b9c58b06-efcd-4219-894f-b54e5ffa2c74.mxunit b/Source/mprcontents/b9/c5/b9c58b06-efcd-4219-894f-b54e5ffa2c74.mxunit
deleted file mode 100644
index da2b103b..00000000
Binary files a/Source/mprcontents/b9/c5/b9c58b06-efcd-4219-894f-b54e5ffa2c74.mxunit and /dev/null differ
diff --git a/Source/mprcontents/b9/ce/b9ce96c7-6dff-4f47-8805-ca4641068746.mxunit b/Source/mprcontents/b9/ce/b9ce96c7-6dff-4f47-8805-ca4641068746.mxunit
deleted file mode 100644
index d038fdee..00000000
Binary files a/Source/mprcontents/b9/ce/b9ce96c7-6dff-4f47-8805-ca4641068746.mxunit and /dev/null differ
diff --git a/Source/mprcontents/ba/6d/ba6d4d1a-2a9c-4a9c-84ff-9b728f42f747.mxunit b/Source/mprcontents/ba/6d/ba6d4d1a-2a9c-4a9c-84ff-9b728f42f747.mxunit
new file mode 100644
index 00000000..adcbf0fe
Binary files /dev/null and b/Source/mprcontents/ba/6d/ba6d4d1a-2a9c-4a9c-84ff-9b728f42f747.mxunit differ
diff --git a/Source/mprcontents/bb/ca/bbca5e8c-4e7a-4d4e-9ace-fe445d857339.mxunit b/Source/mprcontents/bb/ca/bbca5e8c-4e7a-4d4e-9ace-fe445d857339.mxunit
deleted file mode 100644
index c3bb47a3..00000000
Binary files a/Source/mprcontents/bb/ca/bbca5e8c-4e7a-4d4e-9ace-fe445d857339.mxunit and /dev/null differ
diff --git a/Source/mprcontents/bb/fa/bbfab24b-ee97-46d6-8721-eb4a2b1300db.mxunit b/Source/mprcontents/bb/fa/bbfab24b-ee97-46d6-8721-eb4a2b1300db.mxunit
new file mode 100644
index 00000000..1b5032b1
Binary files /dev/null and b/Source/mprcontents/bb/fa/bbfab24b-ee97-46d6-8721-eb4a2b1300db.mxunit differ
diff --git a/Source/mprcontents/bc/0b/bc0bc665-a11d-4287-a5d6-a5a635dd5e62.mxunit b/Source/mprcontents/bc/0b/bc0bc665-a11d-4287-a5d6-a5a635dd5e62.mxunit
new file mode 100644
index 00000000..b5a05522
Binary files /dev/null and b/Source/mprcontents/bc/0b/bc0bc665-a11d-4287-a5d6-a5a635dd5e62.mxunit differ
diff --git a/Source/mprcontents/bc/42/bc42e061-d69f-4732-a319-c3f0e3486a9d.mxunit b/Source/mprcontents/bc/42/bc42e061-d69f-4732-a319-c3f0e3486a9d.mxunit
new file mode 100644
index 00000000..5f1a31a2
Binary files /dev/null and b/Source/mprcontents/bc/42/bc42e061-d69f-4732-a319-c3f0e3486a9d.mxunit differ
diff --git a/Source/mprcontents/bc/58/bc587a87-dec4-4ed5-b464-e2e1d3da7c86.mxunit b/Source/mprcontents/bc/58/bc587a87-dec4-4ed5-b464-e2e1d3da7c86.mxunit
new file mode 100644
index 00000000..d45070ab
Binary files /dev/null and b/Source/mprcontents/bc/58/bc587a87-dec4-4ed5-b464-e2e1d3da7c86.mxunit differ
diff --git a/Source/mprcontents/a2/63/a26356e2-31ad-4082-9d8f-fc46ae7983cb.mxunit b/Source/mprcontents/bc/b7/bcb7816c-0e21-4d05-ad94-1a1753749325.mxunit
similarity index 79%
rename from Source/mprcontents/a2/63/a26356e2-31ad-4082-9d8f-fc46ae7983cb.mxunit
rename to Source/mprcontents/bc/b7/bcb7816c-0e21-4d05-ad94-1a1753749325.mxunit
index e47f2f4c..6da2036e 100644
Binary files a/Source/mprcontents/a2/63/a26356e2-31ad-4082-9d8f-fc46ae7983cb.mxunit and b/Source/mprcontents/bc/b7/bcb7816c-0e21-4d05-ad94-1a1753749325.mxunit differ
diff --git a/Source/mprcontents/bc/ff/bcffabd4-6346-4d7d-9891-f7f8853f068f.mxunit b/Source/mprcontents/bc/ff/bcffabd4-6346-4d7d-9891-f7f8853f068f.mxunit
new file mode 100644
index 00000000..35458322
Binary files /dev/null and b/Source/mprcontents/bc/ff/bcffabd4-6346-4d7d-9891-f7f8853f068f.mxunit differ
diff --git a/Source/mprcontents/bd/1e/bd1e6337-08c4-4edb-b3d9-1c0c4028de40.mxunit b/Source/mprcontents/bd/1e/bd1e6337-08c4-4edb-b3d9-1c0c4028de40.mxunit
deleted file mode 100644
index 631c79ca..00000000
Binary files a/Source/mprcontents/bd/1e/bd1e6337-08c4-4edb-b3d9-1c0c4028de40.mxunit and /dev/null differ
diff --git a/Source/mprcontents/be/3c/be3c5752-6ba4-401e-a147-1a7a67a9e53f.mxunit b/Source/mprcontents/be/3c/be3c5752-6ba4-401e-a147-1a7a67a9e53f.mxunit
new file mode 100644
index 00000000..c9ed69bc
Binary files /dev/null and b/Source/mprcontents/be/3c/be3c5752-6ba4-401e-a147-1a7a67a9e53f.mxunit differ
diff --git a/Source/mprcontents/b2/5c/b25ce450-9e60-45a8-a30f-957b6e15020e.mxunit b/Source/mprcontents/be/77/be778a89-7cb6-4b0b-989b-205c8a8570f6.mxunit
similarity index 61%
rename from Source/mprcontents/b2/5c/b25ce450-9e60-45a8-a30f-957b6e15020e.mxunit
rename to Source/mprcontents/be/77/be778a89-7cb6-4b0b-989b-205c8a8570f6.mxunit
index 6b0a7494..343cb840 100644
Binary files a/Source/mprcontents/b2/5c/b25ce450-9e60-45a8-a30f-957b6e15020e.mxunit and b/Source/mprcontents/be/77/be778a89-7cb6-4b0b-989b-205c8a8570f6.mxunit differ
diff --git a/Source/mprcontents/be/c0/bec07a93-842e-4e1a-927a-c2f02cd151e8.mxunit b/Source/mprcontents/be/c0/bec07a93-842e-4e1a-927a-c2f02cd151e8.mxunit
new file mode 100644
index 00000000..fefc9f22
Binary files /dev/null and b/Source/mprcontents/be/c0/bec07a93-842e-4e1a-927a-c2f02cd151e8.mxunit differ
diff --git a/Source/mprcontents/bf/3e/bf3e5f16-98a4-46df-ad86-e1d556e31b42.mxunit b/Source/mprcontents/bf/3e/bf3e5f16-98a4-46df-ad86-e1d556e31b42.mxunit
new file mode 100644
index 00000000..7ddfa367
Binary files /dev/null and b/Source/mprcontents/bf/3e/bf3e5f16-98a4-46df-ad86-e1d556e31b42.mxunit differ
diff --git a/Source/mprcontents/60/2f/602f2cba-6798-4efb-8b18-b7c7b7611226.mxunit b/Source/mprcontents/c0/14/c0147c72-6c9a-43f6-8add-01d9c311cb16.mxunit
similarity index 66%
rename from Source/mprcontents/60/2f/602f2cba-6798-4efb-8b18-b7c7b7611226.mxunit
rename to Source/mprcontents/c0/14/c0147c72-6c9a-43f6-8add-01d9c311cb16.mxunit
index 22a748a9..9d32c178 100644
Binary files a/Source/mprcontents/60/2f/602f2cba-6798-4efb-8b18-b7c7b7611226.mxunit and b/Source/mprcontents/c0/14/c0147c72-6c9a-43f6-8add-01d9c311cb16.mxunit differ
diff --git a/Source/mprcontents/c1/4c/c14c579a-90ee-416a-9b56-417a18b90826.mxunit b/Source/mprcontents/c1/4c/c14c579a-90ee-416a-9b56-417a18b90826.mxunit
new file mode 100644
index 00000000..05620358
Binary files /dev/null and b/Source/mprcontents/c1/4c/c14c579a-90ee-416a-9b56-417a18b90826.mxunit differ
diff --git a/Source/mprcontents/c1/ff/c1ffe151-f150-4ea1-b1e9-c150690c5c0c.mxunit b/Source/mprcontents/c1/ff/c1ffe151-f150-4ea1-b1e9-c150690c5c0c.mxunit
index 55eea80f..73a876a8 100644
Binary files a/Source/mprcontents/c1/ff/c1ffe151-f150-4ea1-b1e9-c150690c5c0c.mxunit and b/Source/mprcontents/c1/ff/c1ffe151-f150-4ea1-b1e9-c150690c5c0c.mxunit differ
diff --git a/Source/mprcontents/c2/a4/c2a4f485-9286-4bf3-b304-7286d0e3559b.mxunit b/Source/mprcontents/c2/a4/c2a4f485-9286-4bf3-b304-7286d0e3559b.mxunit
index 06d84f61..7a6d37d9 100644
Binary files a/Source/mprcontents/c2/a4/c2a4f485-9286-4bf3-b304-7286d0e3559b.mxunit and b/Source/mprcontents/c2/a4/c2a4f485-9286-4bf3-b304-7286d0e3559b.mxunit differ
diff --git a/Source/mprcontents/c3/3a/c33a93ac-8dfd-43f2-b335-d0b24ba3dcf9.mxunit b/Source/mprcontents/c3/3a/c33a93ac-8dfd-43f2-b335-d0b24ba3dcf9.mxunit
new file mode 100644
index 00000000..50d292fb
Binary files /dev/null and b/Source/mprcontents/c3/3a/c33a93ac-8dfd-43f2-b335-d0b24ba3dcf9.mxunit differ
diff --git a/Source/mprcontents/c3/b1/c3b1388f-27ca-4fdb-b4f5-ee9fbbdc9bfb.mxunit b/Source/mprcontents/c3/b1/c3b1388f-27ca-4fdb-b4f5-ee9fbbdc9bfb.mxunit
new file mode 100644
index 00000000..44a77ed1
Binary files /dev/null and b/Source/mprcontents/c3/b1/c3b1388f-27ca-4fdb-b4f5-ee9fbbdc9bfb.mxunit differ
diff --git a/Source/mprcontents/c5/19/c519e311-4e0c-4f7e-b02a-c2f7c68fc20a.mxunit b/Source/mprcontents/c5/19/c519e311-4e0c-4f7e-b02a-c2f7c68fc20a.mxunit
deleted file mode 100644
index 52f857f6..00000000
Binary files a/Source/mprcontents/c5/19/c519e311-4e0c-4f7e-b02a-c2f7c68fc20a.mxunit and /dev/null differ
diff --git a/Source/mprcontents/c6/05/c60569b0-3331-4cdc-8e20-8b9e639dcfeb.mxunit b/Source/mprcontents/c6/05/c60569b0-3331-4cdc-8e20-8b9e639dcfeb.mxunit
deleted file mode 100644
index 03367844..00000000
Binary files a/Source/mprcontents/c6/05/c60569b0-3331-4cdc-8e20-8b9e639dcfeb.mxunit and /dev/null differ
diff --git a/Source/mprcontents/c7/21/c721b17b-6ef9-4a99-a27c-7b0a065e8d60.mxunit b/Source/mprcontents/c7/21/c721b17b-6ef9-4a99-a27c-7b0a065e8d60.mxunit
deleted file mode 100644
index 60f2873f..00000000
Binary files a/Source/mprcontents/c7/21/c721b17b-6ef9-4a99-a27c-7b0a065e8d60.mxunit and /dev/null differ
diff --git a/Source/mprcontents/c7/37/c7377587-1f02-498a-b6ef-ddae2af04e20.mxunit b/Source/mprcontents/c7/37/c7377587-1f02-498a-b6ef-ddae2af04e20.mxunit
index a6295478..ce2900ea 100644
Binary files a/Source/mprcontents/c7/37/c7377587-1f02-498a-b6ef-ddae2af04e20.mxunit and b/Source/mprcontents/c7/37/c7377587-1f02-498a-b6ef-ddae2af04e20.mxunit differ
diff --git a/Source/mprcontents/c8/62/c862a6fa-b8b0-495f-91a6-6380768c27db.mxunit b/Source/mprcontents/c8/62/c862a6fa-b8b0-495f-91a6-6380768c27db.mxunit
new file mode 100644
index 00000000..f0b7a25a
Binary files /dev/null and b/Source/mprcontents/c8/62/c862a6fa-b8b0-495f-91a6-6380768c27db.mxunit differ
diff --git a/Source/mprcontents/c8/b9/c8b9ddc5-016a-4d44-b5d9-a11c694fcb9e.mxunit b/Source/mprcontents/c8/b9/c8b9ddc5-016a-4d44-b5d9-a11c694fcb9e.mxunit
index 9753ff12..d6eed442 100644
Binary files a/Source/mprcontents/c8/b9/c8b9ddc5-016a-4d44-b5d9-a11c694fcb9e.mxunit and b/Source/mprcontents/c8/b9/c8b9ddc5-016a-4d44-b5d9-a11c694fcb9e.mxunit differ
diff --git a/Source/mprcontents/c8/ec/c8ec680f-2487-4e7d-acf1-cb7993059820.mxunit b/Source/mprcontents/c8/ec/c8ec680f-2487-4e7d-acf1-cb7993059820.mxunit
new file mode 100644
index 00000000..1cb690db
Binary files /dev/null and b/Source/mprcontents/c8/ec/c8ec680f-2487-4e7d-acf1-cb7993059820.mxunit differ
diff --git a/Source/mprcontents/c9/10/c910b8e5-e691-40de-b4d5-35fcb396f5c0.mxunit b/Source/mprcontents/c9/10/c910b8e5-e691-40de-b4d5-35fcb396f5c0.mxunit
deleted file mode 100644
index f16a6988..00000000
Binary files a/Source/mprcontents/c9/10/c910b8e5-e691-40de-b4d5-35fcb396f5c0.mxunit and /dev/null differ
diff --git a/Source/mprcontents/c9/3c/c93cc394-7b68-49e3-9ac8-94f134f72614.mxunit b/Source/mprcontents/c9/3c/c93cc394-7b68-49e3-9ac8-94f134f72614.mxunit
deleted file mode 100644
index 02550e7b..00000000
Binary files a/Source/mprcontents/c9/3c/c93cc394-7b68-49e3-9ac8-94f134f72614.mxunit and /dev/null differ
diff --git a/Source/mprcontents/ca/a6/caa6015d-c825-488c-8e66-699a37c1f367.mxunit b/Source/mprcontents/ca/a6/caa6015d-c825-488c-8e66-699a37c1f367.mxunit
new file mode 100644
index 00000000..da95c3c6
Binary files /dev/null and b/Source/mprcontents/ca/a6/caa6015d-c825-488c-8e66-699a37c1f367.mxunit differ
diff --git a/Source/mprcontents/cb/3b/cb3b3312-3d20-47a4-9ae8-e6cd3fad1a76.mxunit b/Source/mprcontents/cb/3b/cb3b3312-3d20-47a4-9ae8-e6cd3fad1a76.mxunit
new file mode 100644
index 00000000..9d2d0ed8
Binary files /dev/null and b/Source/mprcontents/cb/3b/cb3b3312-3d20-47a4-9ae8-e6cd3fad1a76.mxunit differ
diff --git a/Source/mprcontents/cb/d9/cbd960d6-e18d-4b4e-8e89-b192a494dfdc.mxunit b/Source/mprcontents/cb/d9/cbd960d6-e18d-4b4e-8e89-b192a494dfdc.mxunit
new file mode 100644
index 00000000..dbc29281
Binary files /dev/null and b/Source/mprcontents/cb/d9/cbd960d6-e18d-4b4e-8e89-b192a494dfdc.mxunit differ
diff --git a/Source/mprcontents/2c/14/2c141b6f-c0c1-4257-b2b9-df246f710231.mxunit b/Source/mprcontents/cc/23/cc23faf1-08dd-4141-9dbf-687b3e562659.mxunit
similarity index 56%
rename from Source/mprcontents/2c/14/2c141b6f-c0c1-4257-b2b9-df246f710231.mxunit
rename to Source/mprcontents/cc/23/cc23faf1-08dd-4141-9dbf-687b3e562659.mxunit
index fcb38321..52ae29a2 100644
Binary files a/Source/mprcontents/2c/14/2c141b6f-c0c1-4257-b2b9-df246f710231.mxunit and b/Source/mprcontents/cc/23/cc23faf1-08dd-4141-9dbf-687b3e562659.mxunit differ
diff --git a/Source/mprcontents/cc/48/cc48bf84-9670-4188-bc3b-2215167dd0d9.mxunit b/Source/mprcontents/cc/48/cc48bf84-9670-4188-bc3b-2215167dd0d9.mxunit
new file mode 100644
index 00000000..c63ca675
Binary files /dev/null and b/Source/mprcontents/cc/48/cc48bf84-9670-4188-bc3b-2215167dd0d9.mxunit differ
diff --git a/Source/mprcontents/cc/c5/ccc561d1-1819-412f-bf06-ffb332562f64.mxunit b/Source/mprcontents/cc/c5/ccc561d1-1819-412f-bf06-ffb332562f64.mxunit
new file mode 100644
index 00000000..07c980ec
Binary files /dev/null and b/Source/mprcontents/cc/c5/ccc561d1-1819-412f-bf06-ffb332562f64.mxunit differ
diff --git a/Source/mprcontents/cc/e1/cce16404-c240-4be0-84df-5f0214017b3f.mxunit b/Source/mprcontents/cc/e1/cce16404-c240-4be0-84df-5f0214017b3f.mxunit
new file mode 100644
index 00000000..cf2cf423
Binary files /dev/null and b/Source/mprcontents/cc/e1/cce16404-c240-4be0-84df-5f0214017b3f.mxunit differ
diff --git a/Source/mprcontents/8b/01/8b014c61-1737-44e2-b001-d0d0e4cf65bb.mxunit b/Source/mprcontents/cd/36/cd362cb0-a85c-4d89-af4e-06d3d70a3f82.mxunit
similarity index 55%
rename from Source/mprcontents/8b/01/8b014c61-1737-44e2-b001-d0d0e4cf65bb.mxunit
rename to Source/mprcontents/cd/36/cd362cb0-a85c-4d89-af4e-06d3d70a3f82.mxunit
index 3e1cf616..b1387af6 100644
Binary files a/Source/mprcontents/8b/01/8b014c61-1737-44e2-b001-d0d0e4cf65bb.mxunit and b/Source/mprcontents/cd/36/cd362cb0-a85c-4d89-af4e-06d3d70a3f82.mxunit differ
diff --git a/Source/mprcontents/cd/5f/cd5fd4d3-8751-492d-b7ff-5c9143c6ff01.mxunit b/Source/mprcontents/cd/5f/cd5fd4d3-8751-492d-b7ff-5c9143c6ff01.mxunit
deleted file mode 100644
index d5ad9759..00000000
Binary files a/Source/mprcontents/cd/5f/cd5fd4d3-8751-492d-b7ff-5c9143c6ff01.mxunit and /dev/null differ
diff --git a/Source/mprcontents/cd/6b/cd6b3ca5-0e42-47ec-842c-622eb06c21c2.mxunit b/Source/mprcontents/cd/6b/cd6b3ca5-0e42-47ec-842c-622eb06c21c2.mxunit
new file mode 100644
index 00000000..3738dc95
Binary files /dev/null and b/Source/mprcontents/cd/6b/cd6b3ca5-0e42-47ec-842c-622eb06c21c2.mxunit differ
diff --git a/Source/mprcontents/cd/ab/cdabe6c2-a17f-44fc-9556-d2e35ddbda1a.mxunit b/Source/mprcontents/cd/ab/cdabe6c2-a17f-44fc-9556-d2e35ddbda1a.mxunit
new file mode 100644
index 00000000..fdcd57f0
Binary files /dev/null and b/Source/mprcontents/cd/ab/cdabe6c2-a17f-44fc-9556-d2e35ddbda1a.mxunit differ
diff --git a/Source/mprcontents/c3/1f/c31f4cfc-7819-4f20-9b8b-5fb368d074de.mxunit b/Source/mprcontents/cf/47/cf474168-d4a6-4661-90f9-41069c1826a2.mxunit
similarity index 52%
rename from Source/mprcontents/c3/1f/c31f4cfc-7819-4f20-9b8b-5fb368d074de.mxunit
rename to Source/mprcontents/cf/47/cf474168-d4a6-4661-90f9-41069c1826a2.mxunit
index 439a9e54..b7802042 100644
Binary files a/Source/mprcontents/c3/1f/c31f4cfc-7819-4f20-9b8b-5fb368d074de.mxunit and b/Source/mprcontents/cf/47/cf474168-d4a6-4661-90f9-41069c1826a2.mxunit differ
diff --git a/Source/mprcontents/cf/a6/cfa6c8e6-b800-4e0a-97d2-7ec25f28b221.mxunit b/Source/mprcontents/cf/a6/cfa6c8e6-b800-4e0a-97d2-7ec25f28b221.mxunit
deleted file mode 100644
index 57719a62..00000000
Binary files a/Source/mprcontents/cf/a6/cfa6c8e6-b800-4e0a-97d2-7ec25f28b221.mxunit and /dev/null differ
diff --git a/Source/mprcontents/d0/91/d091ce56-cb8a-433c-b161-d455c0b8c54b.mxunit b/Source/mprcontents/d0/91/d091ce56-cb8a-433c-b161-d455c0b8c54b.mxunit
deleted file mode 100644
index 591db647..00000000
Binary files a/Source/mprcontents/d0/91/d091ce56-cb8a-433c-b161-d455c0b8c54b.mxunit and /dev/null differ
diff --git a/Source/mprcontents/d0/e4/d0e41262-80be-48de-a4ee-b9989fb5f453.mxunit b/Source/mprcontents/d0/e4/d0e41262-80be-48de-a4ee-b9989fb5f453.mxunit
new file mode 100644
index 00000000..a6c59722
Binary files /dev/null and b/Source/mprcontents/d0/e4/d0e41262-80be-48de-a4ee-b9989fb5f453.mxunit differ
diff --git a/Source/mprcontents/d2/27/d227c7f4-0de4-4c5f-9944-d1e82d743f7f.mxunit b/Source/mprcontents/d2/27/d227c7f4-0de4-4c5f-9944-d1e82d743f7f.mxunit
new file mode 100644
index 00000000..922059f8
Binary files /dev/null and b/Source/mprcontents/d2/27/d227c7f4-0de4-4c5f-9944-d1e82d743f7f.mxunit differ
diff --git a/Source/mprcontents/d2/67/d2678632-feb9-4ab7-a006-f5583696d4bc.mxunit b/Source/mprcontents/d2/67/d2678632-feb9-4ab7-a006-f5583696d4bc.mxunit
deleted file mode 100644
index 0e3d8488..00000000
Binary files a/Source/mprcontents/d2/67/d2678632-feb9-4ab7-a006-f5583696d4bc.mxunit and /dev/null differ
diff --git a/Source/mprcontents/d2/da/d2da0998-da70-41b6-965c-796209a830d8.mxunit b/Source/mprcontents/d2/da/d2da0998-da70-41b6-965c-796209a830d8.mxunit
new file mode 100644
index 00000000..42335255
Binary files /dev/null and b/Source/mprcontents/d2/da/d2da0998-da70-41b6-965c-796209a830d8.mxunit differ
diff --git a/Source/mprcontents/e7/54/e7547ccc-b9d1-4119-9dc9-d06a4e6cb355.mxunit b/Source/mprcontents/d3/20/d3201417-cd60-4993-9623-7d5bc95a4f1b.mxunit
similarity index 77%
rename from Source/mprcontents/e7/54/e7547ccc-b9d1-4119-9dc9-d06a4e6cb355.mxunit
rename to Source/mprcontents/d3/20/d3201417-cd60-4993-9623-7d5bc95a4f1b.mxunit
index 1db8d50a..d38833bd 100644
Binary files a/Source/mprcontents/e7/54/e7547ccc-b9d1-4119-9dc9-d06a4e6cb355.mxunit and b/Source/mprcontents/d3/20/d3201417-cd60-4993-9623-7d5bc95a4f1b.mxunit differ
diff --git a/Source/mprcontents/d3/3e/d33ee9df-e804-4542-b6f8-7f821eb7ee9d.mxunit b/Source/mprcontents/d3/3e/d33ee9df-e804-4542-b6f8-7f821eb7ee9d.mxunit
deleted file mode 100644
index a020392b..00000000
Binary files a/Source/mprcontents/d3/3e/d33ee9df-e804-4542-b6f8-7f821eb7ee9d.mxunit and /dev/null differ
diff --git a/Source/mprcontents/d3/be/d3bef9c4-a877-414a-af7b-5b7319239f6d.mxunit b/Source/mprcontents/d3/be/d3bef9c4-a877-414a-af7b-5b7319239f6d.mxunit
index 62797e5c..66f991b1 100644
Binary files a/Source/mprcontents/d3/be/d3bef9c4-a877-414a-af7b-5b7319239f6d.mxunit and b/Source/mprcontents/d3/be/d3bef9c4-a877-414a-af7b-5b7319239f6d.mxunit differ
diff --git a/Source/mprcontents/d4/0e/d40e31ba-e74e-485b-916b-12e68fe8f299.mxunit b/Source/mprcontents/d4/0e/d40e31ba-e74e-485b-916b-12e68fe8f299.mxunit
index 80521247..0bfc1e88 100644
Binary files a/Source/mprcontents/d4/0e/d40e31ba-e74e-485b-916b-12e68fe8f299.mxunit and b/Source/mprcontents/d4/0e/d40e31ba-e74e-485b-916b-12e68fe8f299.mxunit differ
diff --git a/Source/mprcontents/e7/cb/e7cb3ff5-ba25-4131-9ed9-0b736d5c26a3.mxunit b/Source/mprcontents/d4/22/d4220ae3-d9a9-4aaa-bb48-910ba013fc54.mxunit
similarity index 56%
rename from Source/mprcontents/e7/cb/e7cb3ff5-ba25-4131-9ed9-0b736d5c26a3.mxunit
rename to Source/mprcontents/d4/22/d4220ae3-d9a9-4aaa-bb48-910ba013fc54.mxunit
index bdd8c8d3..e25b674e 100644
Binary files a/Source/mprcontents/e7/cb/e7cb3ff5-ba25-4131-9ed9-0b736d5c26a3.mxunit and b/Source/mprcontents/d4/22/d4220ae3-d9a9-4aaa-bb48-910ba013fc54.mxunit differ
diff --git a/Source/mprcontents/d4/5a/d45a006d-1a13-4d86-bef6-a7b1ffeacda7.mxunit b/Source/mprcontents/d4/5a/d45a006d-1a13-4d86-bef6-a7b1ffeacda7.mxunit
deleted file mode 100644
index c77e21b2..00000000
Binary files a/Source/mprcontents/d4/5a/d45a006d-1a13-4d86-bef6-a7b1ffeacda7.mxunit and /dev/null differ
diff --git a/Source/mprcontents/d4/a1/d4a19d7c-0e87-4ca8-b837-b31309008f33.mxunit b/Source/mprcontents/d4/a1/d4a19d7c-0e87-4ca8-b837-b31309008f33.mxunit
deleted file mode 100644
index 67f836ba..00000000
Binary files a/Source/mprcontents/d4/a1/d4a19d7c-0e87-4ca8-b837-b31309008f33.mxunit and /dev/null differ
diff --git a/Source/mprcontents/d5/23/d523ec09-9d86-43a0-9760-adaca72d6bb0.mxunit b/Source/mprcontents/d5/23/d523ec09-9d86-43a0-9760-adaca72d6bb0.mxunit
new file mode 100644
index 00000000..e0a20b63
Binary files /dev/null and b/Source/mprcontents/d5/23/d523ec09-9d86-43a0-9760-adaca72d6bb0.mxunit differ
diff --git a/Source/mprcontents/d5/3a/d53a80bc-c710-4683-b83a-5779bf3cd0cc.mxunit b/Source/mprcontents/d5/3a/d53a80bc-c710-4683-b83a-5779bf3cd0cc.mxunit
new file mode 100644
index 00000000..1ce8b070
Binary files /dev/null and b/Source/mprcontents/d5/3a/d53a80bc-c710-4683-b83a-5779bf3cd0cc.mxunit differ
diff --git a/Source/mprcontents/d6/2d/d62d32e8-f6a9-4058-ac10-5adbc35b2dd4.mxunit b/Source/mprcontents/d6/2d/d62d32e8-f6a9-4058-ac10-5adbc35b2dd4.mxunit
new file mode 100644
index 00000000..2dacbd37
Binary files /dev/null and b/Source/mprcontents/d6/2d/d62d32e8-f6a9-4058-ac10-5adbc35b2dd4.mxunit differ
diff --git a/Source/mprcontents/d6/e7/d6e71e7f-99a7-4021-9ac5-7cd940443d4d.mxunit b/Source/mprcontents/d6/e7/d6e71e7f-99a7-4021-9ac5-7cd940443d4d.mxunit
new file mode 100644
index 00000000..7ad50556
Binary files /dev/null and b/Source/mprcontents/d6/e7/d6e71e7f-99a7-4021-9ac5-7cd940443d4d.mxunit differ
diff --git a/Source/mprcontents/18/bf/18bfb6c0-bbf5-4c63-b2de-6c1c82f2cf45.mxunit b/Source/mprcontents/d7/3b/d73b3dd0-ba5e-44c0-aaf0-cbf0da6b8a57.mxunit
similarity index 61%
rename from Source/mprcontents/18/bf/18bfb6c0-bbf5-4c63-b2de-6c1c82f2cf45.mxunit
rename to Source/mprcontents/d7/3b/d73b3dd0-ba5e-44c0-aaf0-cbf0da6b8a57.mxunit
index 106ceed2..8ac0be4d 100644
Binary files a/Source/mprcontents/18/bf/18bfb6c0-bbf5-4c63-b2de-6c1c82f2cf45.mxunit and b/Source/mprcontents/d7/3b/d73b3dd0-ba5e-44c0-aaf0-cbf0da6b8a57.mxunit differ
diff --git a/Source/mprcontents/d7/45/d745a2fe-9b0c-4eae-bd64-c09f5ac99504.mxunit b/Source/mprcontents/d7/45/d745a2fe-9b0c-4eae-bd64-c09f5ac99504.mxunit
deleted file mode 100644
index fd5ac0f5..00000000
Binary files a/Source/mprcontents/d7/45/d745a2fe-9b0c-4eae-bd64-c09f5ac99504.mxunit and /dev/null differ
diff --git a/Source/mprcontents/d7/af/d7af3d69-be6a-4892-a522-2cd988791940.mxunit b/Source/mprcontents/d7/af/d7af3d69-be6a-4892-a522-2cd988791940.mxunit
index 04ffe174..a9720e9f 100644
Binary files a/Source/mprcontents/d7/af/d7af3d69-be6a-4892-a522-2cd988791940.mxunit and b/Source/mprcontents/d7/af/d7af3d69-be6a-4892-a522-2cd988791940.mxunit differ
diff --git a/Source/mprcontents/d8/36/d83687b1-b331-4dda-9f18-731bc47cd79c.mxunit b/Source/mprcontents/d8/36/d83687b1-b331-4dda-9f18-731bc47cd79c.mxunit
deleted file mode 100644
index 007421a1..00000000
Binary files a/Source/mprcontents/d8/36/d83687b1-b331-4dda-9f18-731bc47cd79c.mxunit and /dev/null differ
diff --git a/Source/mprcontents/da/3b/da3bd2c2-7a66-4985-9777-5aefedd71f3b.mxunit b/Source/mprcontents/da/3b/da3bd2c2-7a66-4985-9777-5aefedd71f3b.mxunit
index a20bcd65..22c096e2 100644
Binary files a/Source/mprcontents/da/3b/da3bd2c2-7a66-4985-9777-5aefedd71f3b.mxunit and b/Source/mprcontents/da/3b/da3bd2c2-7a66-4985-9777-5aefedd71f3b.mxunit differ
diff --git a/Source/mprcontents/da/91/da91faa8-2e9c-4ec2-a1f3-410bf81c0c65.mxunit b/Source/mprcontents/da/91/da91faa8-2e9c-4ec2-a1f3-410bf81c0c65.mxunit
index 2af498f3..259598bb 100644
Binary files a/Source/mprcontents/da/91/da91faa8-2e9c-4ec2-a1f3-410bf81c0c65.mxunit and b/Source/mprcontents/da/91/da91faa8-2e9c-4ec2-a1f3-410bf81c0c65.mxunit differ
diff --git a/Source/mprcontents/db/69/db69f922-d549-48fd-a624-32a9509109f7.mxunit b/Source/mprcontents/db/69/db69f922-d549-48fd-a624-32a9509109f7.mxunit
new file mode 100644
index 00000000..135705ee
Binary files /dev/null and b/Source/mprcontents/db/69/db69f922-d549-48fd-a624-32a9509109f7.mxunit differ
diff --git a/Source/mprcontents/db/70/db70d7b8-b7e4-43c4-801a-1b9a496ea559.mxunit b/Source/mprcontents/db/70/db70d7b8-b7e4-43c4-801a-1b9a496ea559.mxunit
deleted file mode 100644
index 374908ea..00000000
Binary files a/Source/mprcontents/db/70/db70d7b8-b7e4-43c4-801a-1b9a496ea559.mxunit and /dev/null differ
diff --git a/Source/mprcontents/db/d6/dbd684f1-3155-4dd7-9299-9bb8aed7e799.mxunit b/Source/mprcontents/db/d6/dbd684f1-3155-4dd7-9299-9bb8aed7e799.mxunit
new file mode 100644
index 00000000..578b48d9
Binary files /dev/null and b/Source/mprcontents/db/d6/dbd684f1-3155-4dd7-9299-9bb8aed7e799.mxunit differ
diff --git a/Source/mprcontents/db/e9/dbe931fa-0052-41f5-bba5-0021e44533c8.mxunit b/Source/mprcontents/db/e9/dbe931fa-0052-41f5-bba5-0021e44533c8.mxunit
new file mode 100644
index 00000000..ec21815d
Binary files /dev/null and b/Source/mprcontents/db/e9/dbe931fa-0052-41f5-bba5-0021e44533c8.mxunit differ
diff --git a/Source/mprcontents/dc/20/dc20eb1e-5ea0-4db7-aa2d-a6186e7a8c20.mxunit b/Source/mprcontents/dc/20/dc20eb1e-5ea0-4db7-aa2d-a6186e7a8c20.mxunit
deleted file mode 100644
index 6bf98c70..00000000
Binary files a/Source/mprcontents/dc/20/dc20eb1e-5ea0-4db7-aa2d-a6186e7a8c20.mxunit and /dev/null differ
diff --git a/Source/mprcontents/dc/df/dcdf80a6-fae5-4bd8-b8fb-c054d4721ed5.mxunit b/Source/mprcontents/dc/df/dcdf80a6-fae5-4bd8-b8fb-c054d4721ed5.mxunit
new file mode 100644
index 00000000..b692fea0
Binary files /dev/null and b/Source/mprcontents/dc/df/dcdf80a6-fae5-4bd8-b8fb-c054d4721ed5.mxunit differ
diff --git a/Source/mprcontents/dc/e0/dce0252f-0d9e-4db6-aed3-ffdca14db525.mxunit b/Source/mprcontents/dc/e0/dce0252f-0d9e-4db6-aed3-ffdca14db525.mxunit
new file mode 100644
index 00000000..338a7af4
Binary files /dev/null and b/Source/mprcontents/dc/e0/dce0252f-0d9e-4db6-aed3-ffdca14db525.mxunit differ
diff --git a/Source/mprcontents/dd/e1/dde1288d-c8bd-44b5-83ec-88452616ea4e.mxunit b/Source/mprcontents/dd/e1/dde1288d-c8bd-44b5-83ec-88452616ea4e.mxunit
deleted file mode 100644
index 7661512f..00000000
Binary files a/Source/mprcontents/dd/e1/dde1288d-c8bd-44b5-83ec-88452616ea4e.mxunit and /dev/null differ
diff --git a/Source/mprcontents/de/a2/dea2dcb7-fcb8-43bf-abfe-c5d91c9c1dc6.mxunit b/Source/mprcontents/de/a2/dea2dcb7-fcb8-43bf-abfe-c5d91c9c1dc6.mxunit
deleted file mode 100644
index 4322deb7..00000000
Binary files a/Source/mprcontents/de/a2/dea2dcb7-fcb8-43bf-abfe-c5d91c9c1dc6.mxunit and /dev/null differ
diff --git a/Source/mprcontents/df/39/df3950c5-bb82-4033-bd4a-ed515852dc1d.mxunit b/Source/mprcontents/df/39/df3950c5-bb82-4033-bd4a-ed515852dc1d.mxunit
index a5062d02..d5d96ed1 100644
Binary files a/Source/mprcontents/df/39/df3950c5-bb82-4033-bd4a-ed515852dc1d.mxunit and b/Source/mprcontents/df/39/df3950c5-bb82-4033-bd4a-ed515852dc1d.mxunit differ
diff --git a/Source/mprcontents/df/80/df803c5d-6f1f-4229-86fe-bcc28263d373.mxunit b/Source/mprcontents/df/80/df803c5d-6f1f-4229-86fe-bcc28263d373.mxunit
new file mode 100644
index 00000000..1ff1571d
Binary files /dev/null and b/Source/mprcontents/df/80/df803c5d-6f1f-4229-86fe-bcc28263d373.mxunit differ
diff --git a/Source/mprcontents/df/b9/dfb98380-ff92-4b58-b8cd-d093e89df740.mxunit b/Source/mprcontents/df/b9/dfb98380-ff92-4b58-b8cd-d093e89df740.mxunit
deleted file mode 100644
index 6b43e7b6..00000000
Binary files a/Source/mprcontents/df/b9/dfb98380-ff92-4b58-b8cd-d093e89df740.mxunit and /dev/null differ
diff --git a/Source/mprcontents/df/f9/dff93e63-6871-419e-b2cc-8ac64a39889d.mxunit b/Source/mprcontents/df/f9/dff93e63-6871-419e-b2cc-8ac64a39889d.mxunit
deleted file mode 100644
index 0932f425..00000000
Binary files a/Source/mprcontents/df/f9/dff93e63-6871-419e-b2cc-8ac64a39889d.mxunit and /dev/null differ
diff --git a/Source/mprcontents/e1/ff/e1ff4122-ade8-4a29-bf66-462090db16db.mxunit b/Source/mprcontents/e1/ff/e1ff4122-ade8-4a29-bf66-462090db16db.mxunit
new file mode 100644
index 00000000..bbd82d4d
Binary files /dev/null and b/Source/mprcontents/e1/ff/e1ff4122-ade8-4a29-bf66-462090db16db.mxunit differ
diff --git a/Source/mprcontents/e2/83/e2839267-c718-4578-95df-552c18fd0916.mxunit b/Source/mprcontents/e2/83/e2839267-c718-4578-95df-552c18fd0916.mxunit
deleted file mode 100644
index de26034c..00000000
Binary files a/Source/mprcontents/e2/83/e2839267-c718-4578-95df-552c18fd0916.mxunit and /dev/null differ
diff --git a/Source/mprcontents/e2/a8/e2a86e3d-1c4c-4d2e-9be2-a0d93d18c137.mxunit b/Source/mprcontents/e2/a8/e2a86e3d-1c4c-4d2e-9be2-a0d93d18c137.mxunit
new file mode 100644
index 00000000..5f2fe52a
Binary files /dev/null and b/Source/mprcontents/e2/a8/e2a86e3d-1c4c-4d2e-9be2-a0d93d18c137.mxunit differ
diff --git a/Source/mprcontents/e3/0a/e30a6fc4-b0d0-4b85-b569-cff9b8c2c5c2.mxunit b/Source/mprcontents/e3/0a/e30a6fc4-b0d0-4b85-b569-cff9b8c2c5c2.mxunit
new file mode 100644
index 00000000..66a7009b
Binary files /dev/null and b/Source/mprcontents/e3/0a/e30a6fc4-b0d0-4b85-b569-cff9b8c2c5c2.mxunit differ
diff --git a/Source/mprcontents/e3/a3/e3a35198-b355-414a-8ba9-4ea1be58f1db.mxunit b/Source/mprcontents/e3/a3/e3a35198-b355-414a-8ba9-4ea1be58f1db.mxunit
deleted file mode 100644
index 10f711be..00000000
Binary files a/Source/mprcontents/e3/a3/e3a35198-b355-414a-8ba9-4ea1be58f1db.mxunit and /dev/null differ
diff --git a/Source/mprcontents/db/6d/db6d6ee3-43b4-4904-96bb-a1bb265a187d.mxunit b/Source/mprcontents/e3/f5/e3f56391-4244-4bb5-b036-db16dc4d5c7d.mxunit
similarity index 54%
rename from Source/mprcontents/db/6d/db6d6ee3-43b4-4904-96bb-a1bb265a187d.mxunit
rename to Source/mprcontents/e3/f5/e3f56391-4244-4bb5-b036-db16dc4d5c7d.mxunit
index 1c8c06f5..7df5f9c4 100644
Binary files a/Source/mprcontents/db/6d/db6d6ee3-43b4-4904-96bb-a1bb265a187d.mxunit and b/Source/mprcontents/e3/f5/e3f56391-4244-4bb5-b036-db16dc4d5c7d.mxunit differ
diff --git a/Source/mprcontents/e3/f9/e3f94756-83d8-4c97-bdf1-30ddb037c5c7.mxunit b/Source/mprcontents/e3/f9/e3f94756-83d8-4c97-bdf1-30ddb037c5c7.mxunit
new file mode 100644
index 00000000..d490271a
Binary files /dev/null and b/Source/mprcontents/e3/f9/e3f94756-83d8-4c97-bdf1-30ddb037c5c7.mxunit differ
diff --git a/Source/mprcontents/e4/5c/e45c2c2b-32d5-4b6d-9c40-f04c3b545d0d.mxunit b/Source/mprcontents/e4/5c/e45c2c2b-32d5-4b6d-9c40-f04c3b545d0d.mxunit
index d817f83f..90f24f29 100644
Binary files a/Source/mprcontents/e4/5c/e45c2c2b-32d5-4b6d-9c40-f04c3b545d0d.mxunit and b/Source/mprcontents/e4/5c/e45c2c2b-32d5-4b6d-9c40-f04c3b545d0d.mxunit differ
diff --git a/Source/mprcontents/7c/1e/7c1e51e7-b5ed-46d5-9f97-29f22ff8e5d8.mxunit b/Source/mprcontents/e4/f9/e4f90bf1-6c3a-4c34-abed-6789159a2777.mxunit
similarity index 56%
rename from Source/mprcontents/7c/1e/7c1e51e7-b5ed-46d5-9f97-29f22ff8e5d8.mxunit
rename to Source/mprcontents/e4/f9/e4f90bf1-6c3a-4c34-abed-6789159a2777.mxunit
index ee03ba74..3b2e833e 100644
Binary files a/Source/mprcontents/7c/1e/7c1e51e7-b5ed-46d5-9f97-29f22ff8e5d8.mxunit and b/Source/mprcontents/e4/f9/e4f90bf1-6c3a-4c34-abed-6789159a2777.mxunit differ
diff --git a/Source/mprcontents/e6/55/e655ee0f-cf65-41bd-9a93-922a130a9e0b.mxunit b/Source/mprcontents/e6/55/e655ee0f-cf65-41bd-9a93-922a130a9e0b.mxunit
deleted file mode 100644
index d8553c50..00000000
Binary files a/Source/mprcontents/e6/55/e655ee0f-cf65-41bd-9a93-922a130a9e0b.mxunit and /dev/null differ
diff --git a/Source/mprcontents/e8/9d/e89d8c72-2948-4928-a86e-aec5d7eaeef6.mxunit b/Source/mprcontents/e8/9d/e89d8c72-2948-4928-a86e-aec5d7eaeef6.mxunit
deleted file mode 100644
index 2f11b894..00000000
Binary files a/Source/mprcontents/e8/9d/e89d8c72-2948-4928-a86e-aec5d7eaeef6.mxunit and /dev/null differ
diff --git a/Source/mprcontents/e8/da/e8dac2c2-c6cb-42ab-b0e8-b6fda3e752fb.mxunit b/Source/mprcontents/e8/da/e8dac2c2-c6cb-42ab-b0e8-b6fda3e752fb.mxunit
new file mode 100644
index 00000000..5d024527
Binary files /dev/null and b/Source/mprcontents/e8/da/e8dac2c2-c6cb-42ab-b0e8-b6fda3e752fb.mxunit differ
diff --git a/Source/mprcontents/ea/cf/eacf15cb-6251-44b4-bcb8-1bee80b2d0b6.mxunit b/Source/mprcontents/ea/cf/eacf15cb-6251-44b4-bcb8-1bee80b2d0b6.mxunit
new file mode 100644
index 00000000..de5aa391
Binary files /dev/null and b/Source/mprcontents/ea/cf/eacf15cb-6251-44b4-bcb8-1bee80b2d0b6.mxunit differ
diff --git a/Source/mprcontents/ea/e7/eae77ea3-7224-42a6-8f77-366f095e0f02.mxunit b/Source/mprcontents/ea/e7/eae77ea3-7224-42a6-8f77-366f095e0f02.mxunit
new file mode 100644
index 00000000..0f893c1c
Binary files /dev/null and b/Source/mprcontents/ea/e7/eae77ea3-7224-42a6-8f77-366f095e0f02.mxunit differ
diff --git a/Source/mprcontents/eb/28/eb28a7d0-2e75-41fd-9f68-72738a710cdb.mxunit b/Source/mprcontents/eb/28/eb28a7d0-2e75-41fd-9f68-72738a710cdb.mxunit
deleted file mode 100644
index 10c2b456..00000000
Binary files a/Source/mprcontents/eb/28/eb28a7d0-2e75-41fd-9f68-72738a710cdb.mxunit and /dev/null differ
diff --git a/Source/mprcontents/ed/0e/ed0eac3e-8d80-4135-bba5-43efbbddf90d.mxunit b/Source/mprcontents/ed/0e/ed0eac3e-8d80-4135-bba5-43efbbddf90d.mxunit
new file mode 100644
index 00000000..3c0aaff9
Binary files /dev/null and b/Source/mprcontents/ed/0e/ed0eac3e-8d80-4135-bba5-43efbbddf90d.mxunit differ
diff --git a/Source/mprcontents/ed/e2/ede23db9-7399-4bfb-96b4-2f9fcc657ba4.mxunit b/Source/mprcontents/ed/e2/ede23db9-7399-4bfb-96b4-2f9fcc657ba4.mxunit
deleted file mode 100644
index 106058a6..00000000
Binary files a/Source/mprcontents/ed/e2/ede23db9-7399-4bfb-96b4-2f9fcc657ba4.mxunit and /dev/null differ
diff --git a/Source/mprcontents/ee/8a/ee8a656c-bb4a-46fe-b136-c10788c96cdc.mxunit b/Source/mprcontents/ee/8a/ee8a656c-bb4a-46fe-b136-c10788c96cdc.mxunit
deleted file mode 100644
index 32f7c3c1..00000000
Binary files a/Source/mprcontents/ee/8a/ee8a656c-bb4a-46fe-b136-c10788c96cdc.mxunit and /dev/null differ
diff --git a/Source/mprcontents/08/8a/088a9198-2125-4fb1-81e0-7f036dc1a1b2.mxunit b/Source/mprcontents/ef/56/ef561547-58fb-4f87-aaee-d4ed047e0ecc.mxunit
similarity index 70%
rename from Source/mprcontents/08/8a/088a9198-2125-4fb1-81e0-7f036dc1a1b2.mxunit
rename to Source/mprcontents/ef/56/ef561547-58fb-4f87-aaee-d4ed047e0ecc.mxunit
index 8a4204da..8f25ae08 100644
Binary files a/Source/mprcontents/08/8a/088a9198-2125-4fb1-81e0-7f036dc1a1b2.mxunit and b/Source/mprcontents/ef/56/ef561547-58fb-4f87-aaee-d4ed047e0ecc.mxunit differ
diff --git a/Source/mprcontents/ef/d3/efd3dd29-3491-48e5-a77b-ac90b7e915ff.mxunit b/Source/mprcontents/ef/d3/efd3dd29-3491-48e5-a77b-ac90b7e915ff.mxunit
new file mode 100644
index 00000000..77b7ec38
Binary files /dev/null and b/Source/mprcontents/ef/d3/efd3dd29-3491-48e5-a77b-ac90b7e915ff.mxunit differ
diff --git a/Source/mprcontents/f0/0e/f00ec3aa-dc20-4a59-8007-3c61ccd8f1f0.mxunit b/Source/mprcontents/f0/0e/f00ec3aa-dc20-4a59-8007-3c61ccd8f1f0.mxunit
deleted file mode 100644
index 210fc908..00000000
Binary files a/Source/mprcontents/f0/0e/f00ec3aa-dc20-4a59-8007-3c61ccd8f1f0.mxunit and /dev/null differ
diff --git a/Source/mprcontents/f0/27/f027fb36-2156-4e89-b976-8f36c40490f3.mxunit b/Source/mprcontents/f0/27/f027fb36-2156-4e89-b976-8f36c40490f3.mxunit
new file mode 100644
index 00000000..ff2aff1b
Binary files /dev/null and b/Source/mprcontents/f0/27/f027fb36-2156-4e89-b976-8f36c40490f3.mxunit differ
diff --git a/Source/mprcontents/f0/36/f036f6a8-749f-4ffb-b2f5-8cd5c6b9cddc.mxunit b/Source/mprcontents/f0/36/f036f6a8-749f-4ffb-b2f5-8cd5c6b9cddc.mxunit
deleted file mode 100644
index eb1c1dfd..00000000
Binary files a/Source/mprcontents/f0/36/f036f6a8-749f-4ffb-b2f5-8cd5c6b9cddc.mxunit and /dev/null differ
diff --git a/Source/mprcontents/f0/54/f0544d51-1a3b-4ebd-a86a-dfe3b23d5180.mxunit b/Source/mprcontents/f0/54/f0544d51-1a3b-4ebd-a86a-dfe3b23d5180.mxunit
deleted file mode 100644
index ead4e472..00000000
Binary files a/Source/mprcontents/f0/54/f0544d51-1a3b-4ebd-a86a-dfe3b23d5180.mxunit and /dev/null differ
diff --git a/Source/mprcontents/f0/74/f074658e-a86f-45f5-9020-ea5ea7b6b449.mxunit b/Source/mprcontents/f0/74/f074658e-a86f-45f5-9020-ea5ea7b6b449.mxunit
new file mode 100644
index 00000000..9326d6c6
Binary files /dev/null and b/Source/mprcontents/f0/74/f074658e-a86f-45f5-9020-ea5ea7b6b449.mxunit differ
diff --git a/Source/mprcontents/f0/94/f0941c49-591b-4361-9eff-240cd9364932.mxunit b/Source/mprcontents/f0/94/f0941c49-591b-4361-9eff-240cd9364932.mxunit
deleted file mode 100644
index e3d0434b..00000000
Binary files a/Source/mprcontents/f0/94/f0941c49-591b-4361-9eff-240cd9364932.mxunit and /dev/null differ
diff --git a/Source/mprcontents/f2/37/f237ebc0-c623-49c7-80c9-4a41b0cab090.mxunit b/Source/mprcontents/f2/37/f237ebc0-c623-49c7-80c9-4a41b0cab090.mxunit
new file mode 100644
index 00000000..aeee971f
Binary files /dev/null and b/Source/mprcontents/f2/37/f237ebc0-c623-49c7-80c9-4a41b0cab090.mxunit differ
diff --git a/Source/mprcontents/f2/6d/f26d7128-2e08-4ff3-8170-ed06515ef8ff.mxunit b/Source/mprcontents/f2/6d/f26d7128-2e08-4ff3-8170-ed06515ef8ff.mxunit
new file mode 100644
index 00000000..1e83848d
Binary files /dev/null and b/Source/mprcontents/f2/6d/f26d7128-2e08-4ff3-8170-ed06515ef8ff.mxunit differ
diff --git a/Source/mprcontents/f2/9b/f29b1b61-a29e-4989-b9b9-b9af2d971409.mxunit b/Source/mprcontents/f2/9b/f29b1b61-a29e-4989-b9b9-b9af2d971409.mxunit
deleted file mode 100644
index 29ad0b54..00000000
Binary files a/Source/mprcontents/f2/9b/f29b1b61-a29e-4989-b9b9-b9af2d971409.mxunit and /dev/null differ
diff --git a/Source/mprcontents/f2/c1/f2c1e1c8-1074-4058-b991-82eb939875cb.mxunit b/Source/mprcontents/f2/c1/f2c1e1c8-1074-4058-b991-82eb939875cb.mxunit
index 7fb8132a..3fdec79b 100644
Binary files a/Source/mprcontents/f2/c1/f2c1e1c8-1074-4058-b991-82eb939875cb.mxunit and b/Source/mprcontents/f2/c1/f2c1e1c8-1074-4058-b991-82eb939875cb.mxunit differ
diff --git a/Source/mprcontents/f3/73/f37303e7-78bc-4fdc-bb0d-9d84a35f899b.mxunit b/Source/mprcontents/f3/73/f37303e7-78bc-4fdc-bb0d-9d84a35f899b.mxunit
deleted file mode 100644
index 3aec12d1..00000000
Binary files a/Source/mprcontents/f3/73/f37303e7-78bc-4fdc-bb0d-9d84a35f899b.mxunit and /dev/null differ
diff --git a/Source/mprcontents/f3/97/f3978d20-3dcc-49e0-9f41-025cd5d906e8.mxunit b/Source/mprcontents/f3/97/f3978d20-3dcc-49e0-9f41-025cd5d906e8.mxunit
deleted file mode 100644
index c00f9f0f..00000000
Binary files a/Source/mprcontents/f3/97/f3978d20-3dcc-49e0-9f41-025cd5d906e8.mxunit and /dev/null differ
diff --git a/Source/mprcontents/f4/16/f416766a-4f1b-46c3-ac4f-3baca63511d5.mxunit b/Source/mprcontents/f4/16/f416766a-4f1b-46c3-ac4f-3baca63511d5.mxunit
deleted file mode 100644
index fbb014a8..00000000
Binary files a/Source/mprcontents/f4/16/f416766a-4f1b-46c3-ac4f-3baca63511d5.mxunit and /dev/null differ
diff --git a/Source/mprcontents/f4/47/f4470cda-e9c1-4897-b6dd-1eadceded51e.mxunit b/Source/mprcontents/f4/47/f4470cda-e9c1-4897-b6dd-1eadceded51e.mxunit
new file mode 100644
index 00000000..61c83bef
Binary files /dev/null and b/Source/mprcontents/f4/47/f4470cda-e9c1-4897-b6dd-1eadceded51e.mxunit differ
diff --git a/Source/mprcontents/f4/55/f455723a-4983-422b-9426-4a418a6e65ae.mxunit b/Source/mprcontents/f4/55/f455723a-4983-422b-9426-4a418a6e65ae.mxunit
index c350dda2..981ec0d9 100644
Binary files a/Source/mprcontents/f4/55/f455723a-4983-422b-9426-4a418a6e65ae.mxunit and b/Source/mprcontents/f4/55/f455723a-4983-422b-9426-4a418a6e65ae.mxunit differ
diff --git a/Source/mprcontents/e6/7a/e67aa804-eed5-4f0b-ab9f-6d481148ec6c.mxunit b/Source/mprcontents/f5/69/f569e88f-bb7a-42f6-bf63-79cb6252116d.mxunit
similarity index 72%
rename from Source/mprcontents/e6/7a/e67aa804-eed5-4f0b-ab9f-6d481148ec6c.mxunit
rename to Source/mprcontents/f5/69/f569e88f-bb7a-42f6-bf63-79cb6252116d.mxunit
index 78407a64..a8bdab32 100644
Binary files a/Source/mprcontents/e6/7a/e67aa804-eed5-4f0b-ab9f-6d481148ec6c.mxunit and b/Source/mprcontents/f5/69/f569e88f-bb7a-42f6-bf63-79cb6252116d.mxunit differ
diff --git a/Source/mprcontents/f5/71/f57164c1-88e0-4644-a31e-e46b1ec28c18.mxunit b/Source/mprcontents/f5/71/f57164c1-88e0-4644-a31e-e46b1ec28c18.mxunit
new file mode 100644
index 00000000..158a9343
Binary files /dev/null and b/Source/mprcontents/f5/71/f57164c1-88e0-4644-a31e-e46b1ec28c18.mxunit differ
diff --git a/Source/mprcontents/f5/76/f5765208-2b7d-421e-a1a7-61f05050ae52.mxunit b/Source/mprcontents/f5/76/f5765208-2b7d-421e-a1a7-61f05050ae52.mxunit
new file mode 100644
index 00000000..3431abf5
Binary files /dev/null and b/Source/mprcontents/f5/76/f5765208-2b7d-421e-a1a7-61f05050ae52.mxunit differ
diff --git a/Source/mprcontents/f5/cf/f5cf9ced-0a7b-4067-b569-36236c05952f.mxunit b/Source/mprcontents/f5/cf/f5cf9ced-0a7b-4067-b569-36236c05952f.mxunit
deleted file mode 100644
index 0f340194..00000000
Binary files a/Source/mprcontents/f5/cf/f5cf9ced-0a7b-4067-b569-36236c05952f.mxunit and /dev/null differ
diff --git a/Source/mprcontents/f5/ed/f5ed286b-7460-49f3-bdb6-dfa610b3c6ba.mxunit b/Source/mprcontents/f5/ed/f5ed286b-7460-49f3-bdb6-dfa610b3c6ba.mxunit
new file mode 100644
index 00000000..6c864cac
Binary files /dev/null and b/Source/mprcontents/f5/ed/f5ed286b-7460-49f3-bdb6-dfa610b3c6ba.mxunit differ
diff --git a/Source/mprcontents/f6/40/f64020ce-ba0f-4b89-9818-47895f700578.mxunit b/Source/mprcontents/f6/40/f64020ce-ba0f-4b89-9818-47895f700578.mxunit
new file mode 100644
index 00000000..22c4c030
Binary files /dev/null and b/Source/mprcontents/f6/40/f64020ce-ba0f-4b89-9818-47895f700578.mxunit differ
diff --git a/Source/mprcontents/f6/8c/f68cf00c-f24f-4e9c-9840-82f4dd041212.mxunit b/Source/mprcontents/f6/8c/f68cf00c-f24f-4e9c-9840-82f4dd041212.mxunit
new file mode 100644
index 00000000..ba1a78f8
Binary files /dev/null and b/Source/mprcontents/f6/8c/f68cf00c-f24f-4e9c-9840-82f4dd041212.mxunit differ
diff --git a/Source/mprcontents/f7/d2/f7d24f80-c1a6-41c9-8cfe-65253595c4ba.mxunit b/Source/mprcontents/f7/d2/f7d24f80-c1a6-41c9-8cfe-65253595c4ba.mxunit
new file mode 100644
index 00000000..0d0e5178
Binary files /dev/null and b/Source/mprcontents/f7/d2/f7d24f80-c1a6-41c9-8cfe-65253595c4ba.mxunit differ
diff --git a/Source/mprcontents/f7/eb/f7ebb591-46c1-4553-a8c1-bb02d6793e31.mxunit b/Source/mprcontents/f7/eb/f7ebb591-46c1-4553-a8c1-bb02d6793e31.mxunit
deleted file mode 100644
index 32a757ae..00000000
Binary files a/Source/mprcontents/f7/eb/f7ebb591-46c1-4553-a8c1-bb02d6793e31.mxunit and /dev/null differ
diff --git a/Source/mprcontents/f8/2d/f82d4e75-0b9b-4501-86dd-d72c3d37eb56.mxunit b/Source/mprcontents/f8/2d/f82d4e75-0b9b-4501-86dd-d72c3d37eb56.mxunit
new file mode 100644
index 00000000..7dfe0632
Binary files /dev/null and b/Source/mprcontents/f8/2d/f82d4e75-0b9b-4501-86dd-d72c3d37eb56.mxunit differ
diff --git a/Source/mprcontents/fa/0e/fa0e7c31-3ce9-4e5a-9d36-1e158888918b.mxunit b/Source/mprcontents/fa/0e/fa0e7c31-3ce9-4e5a-9d36-1e158888918b.mxunit
deleted file mode 100644
index c420d906..00000000
Binary files a/Source/mprcontents/fa/0e/fa0e7c31-3ce9-4e5a-9d36-1e158888918b.mxunit and /dev/null differ
diff --git a/Source/mprcontents/fa/2d/fa2dc163-e656-4cab-89ea-4c3b7d53b323.mxunit b/Source/mprcontents/fa/2d/fa2dc163-e656-4cab-89ea-4c3b7d53b323.mxunit
new file mode 100644
index 00000000..cc7bc7a8
Binary files /dev/null and b/Source/mprcontents/fa/2d/fa2dc163-e656-4cab-89ea-4c3b7d53b323.mxunit differ
diff --git a/Source/mprcontents/fa/4a/fa4a770a-6019-4552-a506-5d319f7d588e.mxunit b/Source/mprcontents/fa/4a/fa4a770a-6019-4552-a506-5d319f7d588e.mxunit
deleted file mode 100644
index cb1bf16d..00000000
Binary files a/Source/mprcontents/fa/4a/fa4a770a-6019-4552-a506-5d319f7d588e.mxunit and /dev/null differ
diff --git a/Source/mprcontents/e3/cd/e3cdb493-65d9-4caf-b82f-982a31c5ff29.mxunit b/Source/mprcontents/fa/6a/fa6aa439-eeb8-4ba8-9258-4e7445136da7.mxunit
similarity index 57%
rename from Source/mprcontents/e3/cd/e3cdb493-65d9-4caf-b82f-982a31c5ff29.mxunit
rename to Source/mprcontents/fa/6a/fa6aa439-eeb8-4ba8-9258-4e7445136da7.mxunit
index 9cf73436..c6175970 100644
Binary files a/Source/mprcontents/e3/cd/e3cdb493-65d9-4caf-b82f-982a31c5ff29.mxunit and b/Source/mprcontents/fa/6a/fa6aa439-eeb8-4ba8-9258-4e7445136da7.mxunit differ
diff --git a/Source/mprcontents/fb/aa/fbaa4753-5e54-41e9-8f3c-5c6a2bc00601.mxunit b/Source/mprcontents/fb/aa/fbaa4753-5e54-41e9-8f3c-5c6a2bc00601.mxunit
index 14ea30d2..da6480fb 100644
Binary files a/Source/mprcontents/fb/aa/fbaa4753-5e54-41e9-8f3c-5c6a2bc00601.mxunit and b/Source/mprcontents/fb/aa/fbaa4753-5e54-41e9-8f3c-5c6a2bc00601.mxunit differ
diff --git a/Source/mprcontents/fd/4d/fd4dd4d2-7876-48ee-88cf-2097cb350a7f.mxunit b/Source/mprcontents/fd/4d/fd4dd4d2-7876-48ee-88cf-2097cb350a7f.mxunit
index 94bbbf82..08025e4d 100644
Binary files a/Source/mprcontents/fd/4d/fd4dd4d2-7876-48ee-88cf-2097cb350a7f.mxunit and b/Source/mprcontents/fd/4d/fd4dd4d2-7876-48ee-88cf-2097cb350a7f.mxunit differ
diff --git a/Source/mprcontents/fd/6e/fd6eeb26-d63f-4bb8-9210-743fc7c1d89d.mxunit b/Source/mprcontents/fd/6e/fd6eeb26-d63f-4bb8-9210-743fc7c1d89d.mxunit
new file mode 100644
index 00000000..88cbfb43
Binary files /dev/null and b/Source/mprcontents/fd/6e/fd6eeb26-d63f-4bb8-9210-743fc7c1d89d.mxunit differ
diff --git a/Source/mprcontents/f8/2a/f82a2dbb-98ae-4bc2-9f18-f795066a04ff.mxunit b/Source/mprcontents/fd/c5/fdc508f6-dc17-4540-824e-1dcb0971807f.mxunit
similarity index 82%
rename from Source/mprcontents/f8/2a/f82a2dbb-98ae-4bc2-9f18-f795066a04ff.mxunit
rename to Source/mprcontents/fd/c5/fdc508f6-dc17-4540-824e-1dcb0971807f.mxunit
index eb4e3977..99634de6 100644
Binary files a/Source/mprcontents/f8/2a/f82a2dbb-98ae-4bc2-9f18-f795066a04ff.mxunit and b/Source/mprcontents/fd/c5/fdc508f6-dc17-4540-824e-1dcb0971807f.mxunit differ
diff --git a/Source/mprcontents/0d/8a/0d8a7d41-8524-43d3-8ae1-df9d83b473f3.mxunit b/Source/mprcontents/fe/44/fe441e96-a25e-41df-8090-c8b2d4bff6fe.mxunit
similarity index 55%
rename from Source/mprcontents/0d/8a/0d8a7d41-8524-43d3-8ae1-df9d83b473f3.mxunit
rename to Source/mprcontents/fe/44/fe441e96-a25e-41df-8090-c8b2d4bff6fe.mxunit
index 9d0614ce..161432c9 100644
Binary files a/Source/mprcontents/0d/8a/0d8a7d41-8524-43d3-8ae1-df9d83b473f3.mxunit and b/Source/mprcontents/fe/44/fe441e96-a25e-41df-8090-c8b2d4bff6fe.mxunit differ
diff --git a/Source/mprcontents/fe/b3/feb31b7d-b509-4142-9914-93a7db25f17b.mxunit b/Source/mprcontents/fe/b3/feb31b7d-b509-4142-9914-93a7db25f17b.mxunit
deleted file mode 100644
index 03e1e169..00000000
Binary files a/Source/mprcontents/fe/b3/feb31b7d-b509-4142-9914-93a7db25f17b.mxunit and /dev/null differ
diff --git a/Source/mprcontents/fe/bb/febb44b4-dac6-4a46-bf0b-142fcd348228.mxunit b/Source/mprcontents/fe/bb/febb44b4-dac6-4a46-bf0b-142fcd348228.mxunit
new file mode 100644
index 00000000..e0d86944
Binary files /dev/null and b/Source/mprcontents/fe/bb/febb44b4-dac6-4a46-bf0b-142fcd348228.mxunit differ
diff --git a/Source/mprcontents/fe/e2/fee2afd5-ce65-49fe-aa55-73988b6cab54.mxunit b/Source/mprcontents/fe/e2/fee2afd5-ce65-49fe-aa55-73988b6cab54.mxunit
deleted file mode 100644
index 4dc4da64..00000000
Binary files a/Source/mprcontents/fe/e2/fee2afd5-ce65-49fe-aa55-73988b6cab54.mxunit and /dev/null differ
diff --git a/Source/mprcontents/fe/e8/fee83cc6-e273-4c8a-9766-84721e83139f.mxunit b/Source/mprcontents/fe/e8/fee83cc6-e273-4c8a-9766-84721e83139f.mxunit
new file mode 100644
index 00000000..fa5c9b9a
Binary files /dev/null and b/Source/mprcontents/fe/e8/fee83cc6-e273-4c8a-9766-84721e83139f.mxunit differ
diff --git a/Source/mprcontents/ff/b7/ffb7aadb-69e6-4b2d-8661-123d66bac67a.mxunit b/Source/mprcontents/ff/b7/ffb7aadb-69e6-4b2d-8661-123d66bac67a.mxunit
deleted file mode 100644
index 83d2c68d..00000000
Binary files a/Source/mprcontents/ff/b7/ffb7aadb-69e6-4b2d-8661-123d66bac67a.mxunit and /dev/null differ
diff --git a/Source/themesource/atlas_core/.version b/Source/themesource/atlas_core/.version
index 3f67e25c..de197cc3 100644
--- a/Source/themesource/atlas_core/.version
+++ b/Source/themesource/atlas_core/.version
@@ -1 +1 @@
-3.17.0
+4.1.3
diff --git a/Source/themesource/atlas_core/public/resources/fonts/poppins/OFL.txt b/Source/themesource/atlas_core/public/resources/fonts/poppins/OFL.txt
new file mode 100644
index 00000000..da31af08
--- /dev/null
+++ b/Source/themesource/atlas_core/public/resources/fonts/poppins/OFL.txt
@@ -0,0 +1,93 @@
+Copyright 2020 The Poppins Project Authors (https://github.com/itfoundry/Poppins)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/Source/themesource/atlas_core/public/resources/fonts/poppins/Poppins-Black.ttf b/Source/themesource/atlas_core/public/resources/fonts/poppins/Poppins-Black.ttf
new file mode 100644
index 00000000..71c0f995
Binary files /dev/null and b/Source/themesource/atlas_core/public/resources/fonts/poppins/Poppins-Black.ttf differ
diff --git a/Source/themesource/atlas_core/public/resources/fonts/poppins/Poppins-BlackItalic.ttf b/Source/themesource/atlas_core/public/resources/fonts/poppins/Poppins-BlackItalic.ttf
new file mode 100644
index 00000000..7aeb58bd
Binary files /dev/null and b/Source/themesource/atlas_core/public/resources/fonts/poppins/Poppins-BlackItalic.ttf differ
diff --git a/Source/themesource/atlas_core/public/resources/fonts/poppins/Poppins-Bold.ttf b/Source/themesource/atlas_core/public/resources/fonts/poppins/Poppins-Bold.ttf
new file mode 100644
index 00000000..00559eeb
Binary files /dev/null and b/Source/themesource/atlas_core/public/resources/fonts/poppins/Poppins-Bold.ttf differ
diff --git a/Source/themesource/atlas_core/public/resources/fonts/poppins/Poppins-BoldItalic.ttf b/Source/themesource/atlas_core/public/resources/fonts/poppins/Poppins-BoldItalic.ttf
new file mode 100644
index 00000000..e61e8e88
Binary files /dev/null and b/Source/themesource/atlas_core/public/resources/fonts/poppins/Poppins-BoldItalic.ttf differ
diff --git a/Source/themesource/atlas_core/public/resources/fonts/poppins/Poppins-ExtraBold.ttf b/Source/themesource/atlas_core/public/resources/fonts/poppins/Poppins-ExtraBold.ttf
new file mode 100644
index 00000000..df709360
Binary files /dev/null and b/Source/themesource/atlas_core/public/resources/fonts/poppins/Poppins-ExtraBold.ttf differ
diff --git a/Source/themesource/atlas_core/public/resources/fonts/poppins/Poppins-ExtraBoldItalic.ttf b/Source/themesource/atlas_core/public/resources/fonts/poppins/Poppins-ExtraBoldItalic.ttf
new file mode 100644
index 00000000..14d2b375
Binary files /dev/null and b/Source/themesource/atlas_core/public/resources/fonts/poppins/Poppins-ExtraBoldItalic.ttf differ
diff --git a/Source/themesource/atlas_core/public/resources/fonts/poppins/Poppins-ExtraLight.ttf b/Source/themesource/atlas_core/public/resources/fonts/poppins/Poppins-ExtraLight.ttf
new file mode 100644
index 00000000..e76ec69a
Binary files /dev/null and b/Source/themesource/atlas_core/public/resources/fonts/poppins/Poppins-ExtraLight.ttf differ
diff --git a/Source/themesource/atlas_core/public/resources/fonts/poppins/Poppins-ExtraLightItalic.ttf b/Source/themesource/atlas_core/public/resources/fonts/poppins/Poppins-ExtraLightItalic.ttf
new file mode 100644
index 00000000..89513d94
Binary files /dev/null and b/Source/themesource/atlas_core/public/resources/fonts/poppins/Poppins-ExtraLightItalic.ttf differ
diff --git a/Source/themesource/atlas_core/public/resources/fonts/poppins/Poppins-Italic.ttf b/Source/themesource/atlas_core/public/resources/fonts/poppins/Poppins-Italic.ttf
new file mode 100644
index 00000000..12b7b3c4
Binary files /dev/null and b/Source/themesource/atlas_core/public/resources/fonts/poppins/Poppins-Italic.ttf differ
diff --git a/Source/themesource/atlas_core/public/resources/fonts/poppins/Poppins-Light.ttf b/Source/themesource/atlas_core/public/resources/fonts/poppins/Poppins-Light.ttf
new file mode 100644
index 00000000..bc36bcc2
Binary files /dev/null and b/Source/themesource/atlas_core/public/resources/fonts/poppins/Poppins-Light.ttf differ
diff --git a/Source/themesource/atlas_core/public/resources/fonts/poppins/Poppins-LightItalic.ttf b/Source/themesource/atlas_core/public/resources/fonts/poppins/Poppins-LightItalic.ttf
new file mode 100644
index 00000000..9e70be6a
Binary files /dev/null and b/Source/themesource/atlas_core/public/resources/fonts/poppins/Poppins-LightItalic.ttf differ
diff --git a/Source/themesource/atlas_core/public/resources/fonts/poppins/Poppins-Medium.ttf b/Source/themesource/atlas_core/public/resources/fonts/poppins/Poppins-Medium.ttf
new file mode 100644
index 00000000..6bcdcc27
Binary files /dev/null and b/Source/themesource/atlas_core/public/resources/fonts/poppins/Poppins-Medium.ttf differ
diff --git a/Source/themesource/atlas_core/public/resources/fonts/poppins/Poppins-MediumItalic.ttf b/Source/themesource/atlas_core/public/resources/fonts/poppins/Poppins-MediumItalic.ttf
new file mode 100644
index 00000000..be67410f
Binary files /dev/null and b/Source/themesource/atlas_core/public/resources/fonts/poppins/Poppins-MediumItalic.ttf differ
diff --git a/Source/themesource/atlas_core/public/resources/fonts/poppins/Poppins-Regular.ttf b/Source/themesource/atlas_core/public/resources/fonts/poppins/Poppins-Regular.ttf
new file mode 100644
index 00000000..9f0c71b7
Binary files /dev/null and b/Source/themesource/atlas_core/public/resources/fonts/poppins/Poppins-Regular.ttf differ
diff --git a/Source/themesource/atlas_core/public/resources/fonts/poppins/Poppins-SemiBold.ttf b/Source/themesource/atlas_core/public/resources/fonts/poppins/Poppins-SemiBold.ttf
new file mode 100644
index 00000000..74c726e3
Binary files /dev/null and b/Source/themesource/atlas_core/public/resources/fonts/poppins/Poppins-SemiBold.ttf differ
diff --git a/Source/themesource/atlas_core/public/resources/fonts/poppins/Poppins-SemiBoldItalic.ttf b/Source/themesource/atlas_core/public/resources/fonts/poppins/Poppins-SemiBoldItalic.ttf
new file mode 100644
index 00000000..3e6c9422
Binary files /dev/null and b/Source/themesource/atlas_core/public/resources/fonts/poppins/Poppins-SemiBoldItalic.ttf differ
diff --git a/Source/themesource/atlas_core/public/resources/fonts/poppins/Poppins-Thin.ttf b/Source/themesource/atlas_core/public/resources/fonts/poppins/Poppins-Thin.ttf
new file mode 100644
index 00000000..03e73661
Binary files /dev/null and b/Source/themesource/atlas_core/public/resources/fonts/poppins/Poppins-Thin.ttf differ
diff --git a/Source/themesource/atlas_core/public/resources/fonts/poppins/Poppins-ThinItalic.ttf b/Source/themesource/atlas_core/public/resources/fonts/poppins/Poppins-ThinItalic.ttf
new file mode 100644
index 00000000..e26db5dd
Binary files /dev/null and b/Source/themesource/atlas_core/public/resources/fonts/poppins/Poppins-ThinItalic.ttf differ
diff --git a/Source/themesource/atlas_core/web/_breakpoints.scss b/Source/themesource/atlas_core/web/_breakpoints.scss
new file mode 100644
index 00000000..5d2c2e90
--- /dev/null
+++ b/Source/themesource/atlas_core/web/_breakpoints.scss
@@ -0,0 +1,15 @@
+//== Media queries breakpoints
+//## Define the breakpoints at which your layout will change, adapting to different screen sizes.
+$screen-xs: 480px !default;
+$screen-sm: 576px !default;
+$screen-md: 768px !default;
+$screen-lg: 992px !default;
+$screen-xl: 1200px !default;
+$screen-xxl: 1400px !default;
+
+// So media queries don't overlap when required, provide a maximum (used for max-width)
+$screen-xs-max: ($screen-sm - 1) !default;
+$screen-sm-max: ($screen-md - 1) !default;
+$screen-md-max: ($screen-lg - 1) !default;
+$screen-lg-max: ($screen-xl - 1) !default;
+$screen-xl-max: ($screen-xxl - 1) !default;
diff --git a/Source/themesource/atlas_core/web/_color-variants.scss b/Source/themesource/atlas_core/web/_color-variants.scss
new file mode 100644
index 00000000..75c08dc4
--- /dev/null
+++ b/Source/themesource/atlas_core/web/_color-variants.scss
@@ -0,0 +1,59 @@
+// Color variations
+// Function to convert to HSL and adjust
+@function adjust-color-lightness($color, $adjustment) {
+    @if $adjustment > 0 {
+        @return color-mix(in srgb, $color, var(--color-base) $adjustment);
+    } @else {
+        @return color-mix(in srgb, $color, var(--color-contrast) calc($adjustment * -1));
+    }
+}
+
+$brand-colors: (
+    "brand-primary" "background-primary" "text-primary" var(--brand-primary),
+    "brand-success" "background-success" "text-success" var(--brand-success),
+    "brand-warning" "background-warning" "text-warning" var(--brand-warning),
+    "brand-danger" "background-danger" "text-danger" var(--brand-danger),
+    "brand-default" "background-default" "text-default" var(--brand-default),
+    "gray" "" "" var(--gray)
+);
+$lightness-steps: (
+    50: 90%,
+    100: 80%,
+    200: 60%,
+    300: 40%,
+    400: 20%,
+    500: 0%,
+    600: -20%,
+    700: -40%,
+    800: -50%,
+    900: -60%
+);
+
+// generate corresponding CSS variables
+:root {
+    @each $name, $bg-class, $text-class, $base-color in $brand-colors {
+        @each $shade, $adjustment in $lightness-steps {
+            --#{$name}-#{$shade}: #{adjust-color-lightness($base-color, $adjustment)};
+        }
+
+        @if ($bg-class != "") {
+            .#{$bg-class} {
+                @each $shade, $adjustment in $lightness-steps {
+                    &.shade-#{$shade} {
+                        background-color: adjust-color-lightness($base-color, $adjustment);
+                    }
+                }
+            }
+        }
+
+        @if ($text-class != "") {
+            .#{$text-class} {
+                @each $shade, $adjustment in $lightness-steps {
+                    &.shade-#{$shade} {
+                        color: adjust-color-lightness($base-color, $adjustment);
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/Source/themesource/atlas_core/web/_variables-css-mappings.scss b/Source/themesource/atlas_core/web/_css-variables-mappings.scss
similarity index 77%
rename from Source/themesource/atlas_core/web/_variables-css-mappings.scss
rename to Source/themesource/atlas_core/web/_css-variables-mappings.scss
index 1f4e3de5..36fcd8fe 100644
--- a/Source/themesource/atlas_core/web/_variables-css-mappings.scss
+++ b/Source/themesource/atlas_core/web/_css-variables-mappings.scss
@@ -1,29 +1,25 @@
-:root {
+/*
+DISCLAIMER:
+This mapping file provides backwards compatibility for projects which were still using SASS variables.
+Do not change this file because it is core styling.
+Customizing core files will make updating Atlas much more difficult in the future.
+*/
+@mixin legacy-variables() {
+  :root {
     /*
-   DISCLAIMER:
-   This is a mapping file which will be used to help moving towards CSS variables over time.
-   Do not change this file because it is core styling.
-   Customizing core files will make updating Atlas much more difficult in the future.
-   To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten.
-  
-  
-   ██████╗  █████╗ ███████╗██╗ ██████╗
-   ██╔══██╗██╔══██╗██╔════╝██║██╔════╝
-   ██████╔╝███████║███████╗██║██║
-   ██╔══██╗██╔══██║╚════██║██║██║
-   ██████╔╝██║  ██║███████║██║╚██████╗
-   ╚═════╝ ╚═╝  ╚═╝╚══════╝╚═╝ ╚═════╝
-  */
-
+    ██████╗  █████╗ ███████╗██╗ ██████╗
+    ██╔══██╗██╔══██╗██╔════╝██║██╔════╝
+    ██████╔╝███████║███████╗██║██║
+    ██╔══██╗██╔══██║╚════██║██║██║
+    ██████╔╝██║  ██║███████║██║╚██████╗
+    ╚═════╝ ╚═╝  ╚═╝╚══════╝╚═╝ ╚═════╝
+    */
     /*== Gray Shades*/
     /*## Different gray shades to be used for our variables and components */
-    --gray-darker: #{$gray-darker};
-    --gray-dark: #{$gray-dark};
     --gray: #{$gray};
-    --gray-light: #{$gray-light};
-    --gray-primary: #{$gray-primary};
-    --gray-lighter: #{$gray-lighter};
-
+    --color-base: #{$color-base};
+    --color-contrast: #{$color-contrast};
+    
     /*== Step 1: Brand Colors */
     --brand-default: #{$brand-default};
     --brand-primary: #{$brand-primary};
@@ -31,19 +27,35 @@
     --brand-warning: #{$brand-warning};
     --brand-danger: #{$brand-danger};
 
-    --brand-logo: #{$brand-logo};
+    --brand-default-hover: #{$color-default-light};
+    --brand-primary-hover: #{$color-primary-darker};
+    --brand-success-hover: #{$color-success-darker};
+    --brand-warning-hover: #{$color-warning-darker};
+    --brand-danger-hover: #{$color-danger-darker};
+
     --brand-logo-height: #{$brand-logo-height};
-    --brand-logo-width: #{$brand-logo-width}; /* Only used for CSS brand logo */
+    --brand-logo-width: #{$brand-logo-width};
+
+    /* Only used for CSS brand logo */
 
     /*== Step 2: UI Customization */
 
     /* Default Font Size & Color */
     --font-size-default: #{$font-size-default};
     --font-color-default: #{$font-color-default};
+    --font-color-contrast: #{$font-color-contrast};
 
-    /* Global Border Color */
+    /* Global Border */
     --border-color-default: #{$border-color-default};
+    --border-radius-s: #{$border-radius-s};
+    --border-radius-m: #{$border-radius-m};
+    --border-radius-l: #{$border-radius-l};
     --border-radius-default: #{$border-radius-default};
+    --border-width-thin: #{$border-width-thin};
+    --border-width-medium: #{$border-width-medium};
+    --border-width-thick: #{$border-width-thick};
+    --border-width-default: #{$border-width-default};
+    --border-default: #{$border-default};
 
     /* Topbar */
     --topbar-bg: #{$topbar-bg};
@@ -62,7 +74,6 @@
     /* Background Colors */
     /* Backgrounds */
     --bg-color: #{$bg-color};
-    --bg-color: #f8f8f8;
     --bg-color-secondary: #{$bg-color-secondary};
 
     /* Default Link Color */
@@ -70,20 +81,17 @@
     --link-hover-color: #{$link-hover-color};
 
     /*
-    █████╗ ██████╗ ██╗   ██╗ █████╗ ███╗   ██╗ ██████╗███████╗██████╗
-   ██╔══██╗██╔══██╗██║   ██║██╔══██╗████╗  ██║██╔════╝██╔════╝██╔══██╗
-   ███████║██║  ██║██║   ██║███████║██╔██╗ ██║██║     █████╗  ██║  ██║
-   ██╔══██║██║  ██║╚██╗ ██╔╝██╔══██║██║╚██╗██║██║     ██╔══╝  ██║  ██║
-   ██║  ██║██████╔╝ ╚████╔╝ ██║  ██║██║ ╚████║╚██████╗███████╗██████╔╝
-   ╚═╝  ╚═╝╚═════╝   ╚═══╝  ╚═╝  ╚═╝╚═╝  ╚═══╝ ╚═════╝╚══════╝╚═════╝
-  */
+      █████╗ ██████╗ ██╗   ██╗ █████╗ ███╗   ██╗ ██████╗███████╗██████╗
+    ██╔══██╗██╔══██╗██║   ██║██╔══██╗████╗  ██║██╔════╝██╔════╝██╔══██╗
+    ███████║██║  ██║██║   ██║███████║██╔██╗ ██║██║     █████╗  ██║  ██║
+    ██╔══██║██║  ██║╚██╗ ██╔╝██╔══██║██║╚██╗██║██║     ██╔══╝  ██║  ██║
+    ██║  ██║██████╔╝ ╚████╔╝ ██║  ██║██║ ╚████║╚██████╗███████╗██████╔╝
+    ╚═╝  ╚═╝╚═════╝   ╚═══╝  ╚═╝  ╚═╝╚═╝  ╚═══╝ ╚═════╝╚══════╝╚═════╝
+    */
 
     /*== Typography */
     /*## Change your font family, weight, line-height, headings and more (used in components/typography) */
 
-    /* Font Family Import (Used for google font plugin in theme creater) */
-    --font-family-import: #{$font-family-import};
-
     /* Font Family / False = fallback from Bootstrap (Helvetica Neue) */
     --font-family-base: #{$font-family-base};
 
@@ -120,14 +128,15 @@
 
     /*== Navigation */
     /*## Used in components/navigation
-  
-  /* Default Navigation styling */
+    
+    /* Default Navigation styling */
     --navigation-item-height: #{$navigation-item-height};
     --navigation-item-padding: #{$navigation-item-padding};
 
     --navigation-font-size: #{$navigation-font-size};
     --navigation-sub-font-size: #{$navigation-sub-font-size};
-    --navigation-glyph-size: #{$navigation-glyph-size}; /* For glyphicons that you can select in the Mendix Modeler */
+    --navigation-glyph-size: #{$navigation-glyph-size};
+    /* For glyphicons that you can select in the Mendix Modeler */
 
     --navigation-color: #{$navigation-color};
     --navigation-color-hover: #{$navigation-color-hover};
@@ -140,7 +149,8 @@
     /* Navigation Sidebar */
     --navsidebar-font-size: #{$navsidebar-font-size};
     --navsidebar-sub-font-size: #{$navsidebar-sub-font-size};
-    --navsidebar-glyph-size: #{$navsidebar-glyph-size}; /* For glyphicons that you can select in the Mendix Modeler */
+    --navsidebar-glyph-size: #{$navsidebar-glyph-size};
+    /* For glyphicons that you can select in the Mendix Modeler */
 
     --navsidebar-color: #{$navsidebar-color};
     --navsidebar-color-hover: #{$navsidebar-color-hover};
@@ -188,9 +198,6 @@
     /*== Form */
     /*## Used in components/inputs */
 
-    /* Values that can be used default | lined */
-    --form-input-style: #{$form-input-style};
-
     /* Form Label */
     --form-label-size: #{$form-label-size};
     --form-label-weight: #{$form-label-weight};
@@ -217,6 +224,7 @@
     --form-input-placeholder-color: #{$form-input-placeholder-color};
     --form-input-border-color: #{$form-input-border-color};
     --form-input-border-focus-color: #{$form-input-border-focus-color};
+    --form-input-border-hover-color: #{$form-input-border-hover-color};
 
     /* Form Input Static styling */
     --form-input-static-border-color: #{$form-input-static-border-color};
@@ -230,7 +238,7 @@
 
     /* Default button style */
     --btn-font-size: #{$btn-font-size};
-    --btn-bordered: #{$btn-bordered}; /* Default value false, set to true if you want this effect */
+    /* Default value false, set to true if you want this effect */
     --btn-border-radius: #{$btn-border-radius};
 
     /* Button Background Color */
@@ -275,42 +283,42 @@
     --header-text-color-detail: #{$header-text-color-detail};
 
     /*
-   ███████╗██╗  ██╗██████╗ ███████╗██████╗ ████████╗
-   ██╔════╝╚██╗██╔╝██╔══██╗██╔════╝██╔══██╗╚══██╔══╝
-   █████╗   ╚███╔╝ ██████╔╝█████╗  ██████╔╝   ██║
-   ██╔══╝   ██╔██╗ ██╔═══╝ ██╔══╝  ██╔══██╗   ██║
-   ███████╗██╔╝ ██╗██║     ███████╗██║  ██║   ██║
-   ╚══════╝╚═╝  ╚═╝╚═╝     ╚══════╝╚═╝  ╚═╝   ╚═╝
-  */
+    ███████╗██╗  ██╗██████╗ ███████╗██████╗ ████████╗
+    ██╔════╝╚██╗██╔╝██╔══██╗██╔════╝██╔══██╗╚══██╔══╝
+    █████╗   ╚███╔╝ ██████╔╝█████╗  ██████╔╝   ██║
+    ██╔══╝   ██╔██╗ ██╔═══╝ ██╔══╝  ██╔══██╗   ██║
+    ███████╗██╔╝ ██╗██║     ███████╗██║  ██║   ██║
+    ╚══════╝╚═╝  ╚═╝╚═╝     ╚══════╝╚═╝  ╚═╝   ╚═╝
+    */
 
     /*== Color variations */
     /*## These variations are used to support several other variables and components */
 
     /* Color variations */
-    --color-default-darker: #{$color-default-darker};
-    --color-default-dark: #{$color-default-dark};
-    --color-default-light: #{$color-default-light};
-    --color-default-lighter: #{$color-default-lighter};
-
-    --color-primary-darker: #{$color-primary-darker};
-    --color-primary-dark: #{$color-primary-dark};
-    --color-primary-light: #{$color-primary-light};
-    --color-primary-lighter: #{$color-primary-lighter};
-
-    --color-success-darker: #{$color-success-darker};
-    --color-success-dark: #{$color-success-dark};
-    --color-success-light: #{$color-success-light};
-    --color-success-lighter: #{$color-success-lighter};
-
-    --color-warning-darker: #{$color-warning-darker};
-    --color-warning-dark: #{$color-warning-dark};
-    --color-warning-light: #{$color-warning-light};
-    --color-warning-lighter: #{$color-warning-lighter};
-
-    --color-danger-darker: #{$color-danger-darker};
-    --color-danger-dark: #{$color-danger-dark};
-    --color-danger-light: #{$color-danger-light};
-    --color-danger-lighter: #{$color-danger-lighter};
+    --brand-default-700: #{$color-default-darker};
+    --brand-default-600: #{$color-default-dark};
+    --brand-default-200: #{$color-default-light};
+    --brand-default-100: #{$color-default-lighter};
+
+    --brand-primary-700: #{$color-primary-darker};
+    --brand-primary-600: #{$color-primary-dark};
+    --brand-primary-200: #{$color-primary-light};
+    --brand-primary-100: #{$color-primary-lighter};
+
+    --brand-success-700: #{$color-success-darker};
+    --brand-success-600: #{$color-success-dark};
+    --brand-success-200: #{$color-success-light};
+    --brand-success-100: #{$color-success-lighter};
+
+    --brand-warning-700: #{$color-warning-darker};
+    --brand-warning-600: #{$color-warning-dark};
+    --brand-warning-200: #{$color-warning-light};
+    --brand-warning-100: #{$color-warning-lighter};
+
+    --brand-danger-700: #{$color-danger-darker};
+    --brand-danger-600: #{$color-danger-dark};
+    --brand-danger-200: #{$color-danger-light};
+    --brand-danger-100: #{$color-danger-lighter};
 
     --brand-gradient: #{$brand-gradient};
 
@@ -379,15 +387,11 @@
 
     /*== Modals */
     /*## Default Mendix Modal, Blocking Modal and Login Modal (used in components/modals) */
-
-    /* Background Color */
     --modal-header-bg: #{$modal-header-bg};
-
-    /* Border Color */
     --modal-header-border-color: #{$modal-header-border-color};
-
-    /* Text Color */
     --modal-header-color: #{$modal-header-color};
+    --modal-body-bg: #{$modal-body-bg};
+    --modal-footer-bg: #{$modal-footer-bg};
 
     /*== Dataview */
     /*## Default variables for Dataview Widget (used in components/dataview) */
@@ -395,6 +399,8 @@
     /* Controls */
     --dataview-controls-bg: #{$dataview-controls-bg};
     --dataview-controls-border-color: #{$dataview-controls-border-color};
+    --dataview-controls-alignment: #{$dataview-controls-alignment};
+
 
     /* Empty Message */
     --dataview-emptymessage-bg: #{$dataview-emptymessage-bg};
@@ -405,21 +411,18 @@
 
     /* Background Color */
     --alert-primary-bg: #{$alert-primary-bg};
-    --alert-secondary-bg: #{$alert-secondary-bg};
     --alert-success-bg: #{$alert-success-bg};
     --alert-warning-bg: #{$alert-warning-bg};
     --alert-danger-bg: #{$alert-danger-bg};
 
     /* Text Color */
     --alert-primary-color: #{$alert-primary-color};
-    --alert-secondary-color: #{$alert-secondary-color};
     --alert-success-color: #{$alert-success-color};
     --alert-warning-color: #{$alert-warning-color};
     --alert-danger-color: #{$alert-danger-color};
 
     /* Border Color */
     --alert-primary-border-color: #{$alert-primary-border-color};
-    --alert-secondary-border-color: #{$alert-secondary-border-color};
     --alert-success-border-color: #{$alert-success-border-color};
     --alert-warning-border-color: #{$alert-warning-border-color};
     --alert-danger-border-color: #{$alert-danger-border-color};
@@ -430,11 +433,6 @@
     --wizard-step-number-size: #{$wizard-step-number-size};
     --wizard-step-number-font-size: #{$wizard-step-number-font-size};
 
-    /*Wizard states */
-    --wizard-default: #{$wizard-default};
-    --wizard-active: #{$wizard-active};
-    --wizard-visited: #{$wizard-visited};
-
     /*Wizard step states */
     --wizard-default-bg: #{$wizard-default-bg};
     --wizard-default-color: #{$wizard-default-color};
@@ -569,6 +567,9 @@
     /*== Spacing */
     /*## Advanced layout options (used in base/mixins/default-spacing) */
 
+    /* No spacing */
+    --spacing-none: #{$spacing-none};
+    
     /* Smallest spacing */
     --spacing-smallest: #{$spacing-smallest};
 
@@ -626,34 +627,7 @@
     --padding-table-cell-left: #{$padding-table-cell-left};
     --padding-table-cell-right: #{$padding-table-cell-right};
 
-    /*== Media queries breakpoints */
-    /*## Define the breakpoints at which your layout will change, adapting to different screen sizes. */
-
-    --screen-xs: #{$screen-xs};
-    --screen-sm: #{$screen-sm};
-    --screen-md: #{$screen-md};
-    --screen-lg: #{$screen-lg};
-    --screen-xl: #{$screen-xl};
-
-    /* So media queries don't overlap when required, provide a maximum (used for max-width) */
-    --screen-xs-max: #{$screen-xs-max};
-    --screen-sm-max: #{$screen-sm-max};
-    --screen-md-max: #{$screen-md-max};
-    --screen-lg-max: #{$screen-lg-max};
-
-    /*== Settings */
-    /*## Enable or disable your desired framework features */
-    /* Use of !important */
-    --important-flex: #{$important-flex}; // ./base/flex.scss
-    --important-spacing: #{$important-spacing}; // ./base/spacing.scss
-    --important-helpers: #{$important-helpers}; // ./helpers/helperclasses.scss
-
     /*===== Legacy variables ===== */
-
-    /*== Step 1: Brand Colors */
-    --brand-inverse: #{$brand-inverse};
-    --brand-info: #{$brand-info};
-
     /*== Step 2: UI Customization */
     /* Sidebar */
     --sidebar-bg: #{$sidebar-bg};
@@ -680,8 +654,11 @@
     --navsidebar-sub-bg: #{$navsidebar-sub-bg};
     --navsidebar-sub-bg-hover: #{$navsidebar-sub-bg-hover};
     --navsidebar-sub-bg-active: #{$navsidebar-sub-bg-active};
+    --navsidebar-sub-bg-header: #{$navsidebar-sub-bg};
+    --navsidebar-sub-bg-collapsed: #{$navsidebar-sub-bg};
 
     --navsidebar-border-color: #{$navsidebar-border-color};
+    --navsidebar-shadow: #{$navsidebar-shadow};
 
     /*== Form */
     /*## Used in components/inputs */
@@ -708,20 +685,6 @@
     --btn-inverse-bg-hover: #{$btn-inverse-bg-hover};
     --btn-info-bg-hover: #{$btn-info-bg-hover};
 
-    /*== Color variations */
-    /*## These variations are used to support several other variables and components */
-
-    /* Color variations */
-    --color-inverse-darker: #{$color-inverse-darker};
-    --color-inverse-dark: #{$color-inverse-dark};
-    --color-inverse-light: #{$color-inverse-light};
-    --color-inverse-lighter: #{$color-inverse-lighter};
-
-    --color-info-darker: #{$color-info-darker};
-    --color-info-dark: #{$color-info-dark};
-    --color-info-light: #{$color-info-light};
-    --color-info-lighter: #{$color-info-lighter};
-
     /*== Alerts */
     /*## Default Bootstrap alerts, not a widget in the Modeler (used in components/alerts) */
 
@@ -766,4 +729,5 @@
 
     /* Background Color */
     --callout-info-bg: #{$callout-info-bg};
+  }
 }
diff --git a/Source/themesource/atlas_core/web/_exclusion-variables-defaults.scss b/Source/themesource/atlas_core/web/_exclusion-variables-defaults.scss
index be662988..ed8e73ac 100644
--- a/Source/themesource/atlas_core/web/_exclusion-variables-defaults.scss
+++ b/Source/themesource/atlas_core/web/_exclusion-variables-defaults.scss
@@ -14,6 +14,8 @@ $exclude-flex: false;
 $exclude-spacing: false;
 $exclude-base: false;
 $exclude-login: false;
+$exclude-card: false;
+$exclude-focus-ring: false;
 
 //== Widget style exclusion
 $exclude-accordion: false;
@@ -26,12 +28,15 @@ $exclude-barcode-scanner: false;
 $exclude-button: false;
 $exclude-button-helpers: false;
 $exclude-check-box: false;
+$exclude-check-box-radio-button: false;
 $exclude-custom-dijit-widget: false;
 $exclude-custom-switch: false;
 $exclude-data-grid: false;
 $exclude-data-grid-helpers: false;
 $exclude-data-view: false;
 $exclude-data-picker: false;
+$exclude-demo-user-switcher: false;
+$exclude-div-container: false;
 $exclude-glyphicon: false;
 $exclude-grid: false;
 $exclude-group-box: false;
diff --git a/Source/themesource/atlas_core/web/_exclusion-variables.scss b/Source/themesource/atlas_core/web/_exclusion-variables.scss
deleted file mode 100644
index be662988..00000000
--- a/Source/themesource/atlas_core/web/_exclusion-variables.scss
+++ /dev/null
@@ -1,86 +0,0 @@
-//
-// DISCLAIMER:
-// Do not change this file, because it is core styling.
-//
-
-//== If set to true, Atlas will only include styles that are required for the modern client.
-$use-modern-client: false;
-
-//== Core style exclusion
-$exclude-bootstrap: false;
-$exclude-mxui: false;
-$exclude-animations: false;
-$exclude-flex: false;
-$exclude-spacing: false;
-$exclude-base: false;
-$exclude-login: false;
-
-//== Widget style exclusion
-$exclude-accordion: false;
-$exclude-accordion-helpers: false;
-$exclude-background-helpers: false;
-$exclude-badge: false;
-$exclude-badge-button: false;
-$exclude-badge-button-helpers: false;
-$exclude-barcode-scanner: false;
-$exclude-button: false;
-$exclude-button-helpers: false;
-$exclude-check-box: false;
-$exclude-custom-dijit-widget: false;
-$exclude-custom-switch: false;
-$exclude-data-grid: false;
-$exclude-data-grid-helpers: false;
-$exclude-data-view: false;
-$exclude-data-picker: false;
-$exclude-glyphicon: false;
-$exclude-grid: false;
-$exclude-group-box: false;
-$exclude-group-box-helpers: false;
-$exclude-header: false;
-$exclude-helper-classes: false;
-$exclude-input: false;
-$exclude-image-helpers: false;
-$exclude-label: false;
-$exclude-label-helpers: false;
-$exclude-layout-grid: false;
-$exclude-list-view: false;
-$exclude-list-view-helpers: false;
-$exclude-modal: false;
-$exclude-navigation-bar: false;
-$exclude-navigation-bar-helpers: false;
-$exclude-navigation-list: false;
-$exclude-navigation-tree: false;
-$exclude-navigation-tree-helpers: false;
-$exclude-pagination: false;
-$exclude-pop-up-menu: false;
-$exclude-progress: false;
-$exclude-progress-bar: false;
-$exclude-progress-bar-helpers: false;
-$exclude-progress-circle: false;
-$exclude-progress-circle-helpers: false;
-$exclude-radio-button: false;
-$exclude-range-slider: false;
-$exclude-range-slider-helpers: false;
-$exclude-rating: false;
-$exclude-rating-helpers: false;
-$exclude-scroll-container: false;
-$exclude-simple-menu-bar: false;
-$exclude-simple-menu-bar-helpers: false;
-$exclude-slider: false;
-$exclude-slider-helpers: false;
-$exclude-table: false;
-$exclude-table-helpers: false;
-$exclude-tab-container: false;
-$exclude-tab-container-helpers: false;
-$exclude-template-grid: false;
-$exclude-template-grid-helpers: false;
-$exclude-timeline: false;
-$exclude-tooltip: false;
-$exclude-typography: false;
-$exclude-typography-helpers: false;
-
-//== Layouts style exclusion
-$exclude-layout-atlas: false;
-$exclude-layout-atlas-phone: false;
-$exclude-layout-atlas-responsive: false;
-$exclude-layout-atlas-tablet: false;
diff --git a/Source/themesource/atlas_core/web/_variables.scss b/Source/themesource/atlas_core/web/_variables.scss
index ed029cd1..6d181ee8 100644
--- a/Source/themesource/atlas_core/web/_variables.scss
+++ b/Source/themesource/atlas_core/web/_variables.scss
@@ -1,199 +1,195 @@
-//
-// DISCLAIMER:
-// Do not change this file because it is core styling.
-// Customizing core files will make updating Atlas much more difficult in the future.
-// To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten.
-//
-//
-// ██████╗  █████╗ ███████╗██╗ ██████╗
-// ██╔══██╗██╔══██╗██╔════╝██║██╔════╝
-// ██████╔╝███████║███████╗██║██║
-// ██╔══██╗██╔══██║╚════██║██║██║
-// ██████╔╝██║  ██║███████║██║╚██████╗
-// ╚═════╝ ╚═╝  ╚═╝╚══════╝╚═╝ ╚═════╝
-//
-
-//== Gray Shades
-//## Different gray shades to be used for our variables and components
-$gray-darker: #3b4251 !default;
-$gray-dark: #606671 !default;
-$gray: #787d87 !default;
-$gray-light: #6c7180 !default;
-$gray-primary: #ced0d3 !default;
-$gray-lighter: #f8f8f8 !default;
-
-//== Step 1: Brand Colors
-$brand-default: $gray-primary !default;
-$brand-primary: #264ae5 !default;
-$brand-success: #3cb33d !default;
-$brand-warning: #eca51c !default;
-$brand-danger: #e33f4e !default;
+/*
+DISCLAIMER:
+This mapping file provides defaults for sass variables to provide backwards compatibility for modules which are still using SASS variables.
+Do not change this file because it is core styling. Customizing core files will make updating Atlas much more difficult in the future.
+*/
+@import "breakpoints";
 
-$brand-logo: false !default;
-$brand-logo-height: 26px !default;
-$brand-logo-width: 26px !default; // Only used for CSS brand logo
+$use-css-variables: false !default;
 
-//== Step 2: UI Customization
+/* Brand Colors */
+$brand-primary: #264ae5 !default;
+$brand-success: #1ac61a !default;
+$brand-warning: #f0b000 !default;
+$brand-danger: #ea3337 !default;
 
-// Default Font Size & Color
-$font-size-default: 14px !default;
-$font-color-default: #6c717e !default;
+/* Gray Shades */
+$gray: #b8babf !default;
+$color-base: #fff !default;
+$color-contrast: #000 !default;
+$brand-default: mix($brand-primary, #e7e7e9, 10%) !default;
 
-// Global Border Color
-$border-color-default: #ced0d3 !default;
-$border-radius-default: 5px !default;
+$brand-logo: false !default;
+$brand-logo-height: 24px !default;
+$brand-logo-width: 32px !default;
+$brand-gradient: linear-gradient(to bottom, var(--brand-primary-900), var(--brand-primary-700)) !default;
 
-// Topbar
-$topbar-bg: #fff !default;
-$topbar-minimalheight: 60px !default;
+/* Default Font Size & Color */
+$font-size-default: 14px !default;
+$font-color-default: var(--gray-900) !default;
+$font-color-contrast: $color-base !default;
+
+/* Global Border */
+$border-color-default: var(--gray-300) !default;
+$border-radius-s: 4px !default;
+$border-radius-m: 8px !default;
+$border-radius-l: 12px !default;
+$border-radius-default: $border-radius-m !default;
+$border-width-thin: 1px !default;
+$border-width-medium: 2px !default;
+$border-width-thick: 3px !default;
+$border-width-default: $border-width-thin !default;
+$border-default: $border-width-default solid $border-color-default !default;
+
+/* Topbar */
+$topbar-bg: linear-gradient(to bottom, var(--brand-primary-500), var(--brand-primary-600)) !default;
+$topbar-minimalheight: 48px !default;
 $topbar-border-color: $border-color-default !default;
 
-// Topbar mobile
+/* Sidebar */
+$sidebar-bg: linear-gradient(to bottom, var(--brand-primary-600), var(--brand-primary-700)) !default;
+
+/* Topbar mobile */
 $m-header-height: 45px !default;
-$m-header-bg: $brand-primary !default;
-$m-header-color: #fff !default;
+$m-header-bg: $topbar-bg !default;
+$m-header-color: $font-color-contrast !default;
 $m-header-title-size: 16px !default;
 
-// Navbar Brand Name / For your company, product, or project name (used in layouts/base/)
+/* Navbar Brand Name */
 $navbar-brand-name: $font-color-default !default;
 
-// Background Colors
-// Backgrounds
-$bg-color: #f8f8f8 !default;
-$bg-color-secondary: #fff !default;
+/* Background Colors */
+$bg-color: var(--brand-default-100) !default;
+$bg-color-secondary: $color-base !default;
 
-// Default Link Color
+/* Default Link Color */
 $link-color: $brand-primary !default;
-$link-hover-color: darken($link-color, 15%) !default;
+$link-hover-color: var(--brand-primary-400) !default;
 
-//
-//  █████╗ ██████╗ ██╗   ██╗ █████╗ ███╗   ██╗ ██████╗███████╗██████╗
-// ██╔══██╗██╔══██╗██║   ██║██╔══██╗████╗  ██║██╔════╝██╔════╝██╔══██╗
-// ███████║██║  ██║██║   ██║███████║██╔██╗ ██║██║     █████╗  ██║  ██║
-// ██╔══██║██║  ██║╚██╗ ██╔╝██╔══██║██║╚██╗██║██║     ██╔══╝  ██║  ██║
-// ██║  ██║██████╔╝ ╚████╔╝ ██║  ██║██║ ╚████║╚██████╗███████╗██████╔╝
-// ╚═╝  ╚═╝╚═════╝   ╚═══╝  ╚═╝  ╚═╝╚═╝  ╚═══╝ ╚═════╝╚══════╝╚═════╝
-//
+/* Font Family */
+$font-family-import: "https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,700&display=swap" !default;
+$font-family-base: "Poppins", sans-serif !default;
 
-//== Typography
-//## Change your font family, weight, line-height, headings and more (used in components/typography)
-
-// Font Family Import (Used for google font plugin in theme creater)
-$font-family-import: "resources/fonts/open-sans/open-sans.css" !default;
-
-// Font Family / False = fallback from Bootstrap (Helvetica Neue)
-$font-family-base: "Open Sans", sans-serif !default;
-
-// Font Sizes
+/* Font Sizes */
 $font-size-large: 18px !default;
 $font-size-small: 12px !default;
 
-// Font Weights
-$font-weight-light: 100 !default;
-$font-weight-normal: normal !default;
+/* Font Weights */
+$font-weight-light: 300 !default;
+$font-weight-normal: 400 !default;
 $font-weight-semibold: 600 !default;
-$font-weight-bold: bold !default;
+$font-weight-bold: 700 !default;
 
-// Font Size Headers
-$font-size-h1: 31px !default;
+/* Header Font Sizes */
+$font-size-h1: 34px !default;
 $font-size-h2: 26px !default;
 $font-size-h3: 24px !default;
-$font-size-h4: 18px !default;
+$font-size-h4: 16px !default;
 $font-size-h5: $font-size-default !default;
 $font-size-h6: 12px !default;
 
-// Font Weight Headers
+/* Header Font Weight */
 $font-weight-header: $font-weight-semibold !default;
 
-// Line Height
+/* Line Height */
 $line-height-base: 1.428571429 !default;
 
-// Spacing
+/* Header Margin */
 $font-header-margin: 0 0 8px 0 !default;
 
-// Text Colors
-$font-color-detail: #6c717e !default;
-$font-color-header: #0a1326 !default;
+/* Font Colors */
+$font-color-detail: var(--brand-primary-700) !default;
+$font-color-header: var(--brand-primary-800) !default;
 
-//== Navigation
-//## Used in components/navigation
-
-// Default Navigation styling
+/* Navigation */
 $navigation-item-height: unset !default;
-$navigation-item-padding: 16px !default;
+$navigation-item-padding: 8px !default;
 
 $navigation-font-size: $font-size-default !default;
 $navigation-sub-font-size: $font-size-small !default;
-$navigation-glyph-size: 20px !default; // For glyphicons that you can select in the Mendix Modeler
+$navigation-glyph-size: 20px !default;
+
+$navigation-color: $font-color-contrast !default;
+$navigation-color-hover: $font-color-contrast !default;
+$navigation-color-active: $font-color-contrast !default;
+
+$navigation-sub-color: $navigation-color !default;
+$navigation-sub-color-hover: $navigation-color-hover !default;
+$navigation-sub-color-active: $navigation-color-active !default;
 
-$navigation-color: #fff !default;
-$navigation-color-hover: #fff !default;
-$navigation-color-active: #fff !default;
+/* Sidebar Navigation */
+$navigation-bg: $topbar-bg !default;
+$navigation-bg-hover: rgba(0, 0, 0, 0.2) !default;
+$navigation-bg-active: rgba(0, 0, 0, 0.3) !default;
 
-$navigation-sub-color: #aaa !default;
-$navigation-sub-color-hover: $brand-primary !default;
-$navigation-sub-color-active: $brand-primary !default;
+$navigation-sub-bg: color-mix(in srgb, $navigation-bg, black 20%) !default;
+$navigation-sub-bg-hover: $navigation-bg-hover !default;
+$navigation-sub-bg-active: $navigation-bg-active !default;
+
+$navigation-border-color: $navigation-bg-hover !default;
+
+$navsidebar-bg: $sidebar-bg !default;
+$navsidebar-bg-hover: $navigation-bg-hover !default;
+$navsidebar-bg-active: $navigation-bg-active !default;
+
+$navsidebar-sub-bg: var(--brand-primary-800) !default;
+$navsidebar-sub-bg-hover: $navigation-bg-hover !default;
+$navsidebar-sub-bg-active: $navigation-bg-active !default;
+
+$navsidebar-border-color: $border-color-default !default;
+$navsidebar-shadow: 0 0 4px rgb(0 0 0 / 14%), 2px 4px 8px rgb(0 0 0 / 28%) !default;
 
-// Navigation Sidebar
 $navsidebar-font-size: $font-size-default !default;
 $navsidebar-sub-font-size: $font-size-small !default;
-$navsidebar-glyph-size: 20px !default; // For glyphicons that you can select in the Mendix Modeler
+$navsidebar-glyph-size: 20px !default;
 
-$navsidebar-color: #fff !default;
-$navsidebar-color-hover: #fff !default;
-$navsidebar-color-active: #fff !default;
+$navsidebar-color: $navigation-color !default;
+$navsidebar-color-hover: $navigation-color-hover !default;
+$navsidebar-color-active: $navigation-color-active !default;
 
-$navsidebar-sub-color: #aaa !default;
-$navsidebar-sub-color-hover: $brand-primary !default;
-$navsidebar-sub-color-active: $brand-primary !default;
+$navsidebar-sub-color: $navigation-color !default;
+$navsidebar-sub-color-hover: $navigation-color-hover !default;
+$navsidebar-sub-color-active: $navigation-color-active !default;
 
 $navsidebar-width-closed: 52px !default;
 $navsidebar-width-open: 232px !default;
 
-// Navigation topbar
-$navtopbar-font-size: $font-size-default !default;
+/* Topbar Navigation */
+$navtopbar-font-size: $font-size-small !default;
 $navtopbar-sub-font-size: $font-size-small !default;
-$navtopbar-glyph-size: 1.2em !default; // For glyphicons that you can select in the Mendix Modeler
+$navtopbar-glyph-size: 1.2em !default;
 
 $navtopbar-bg: $topbar-bg !default;
-$navtopbar-bg-hover: darken($navtopbar-bg, 4) !default;
-$navtopbar-bg-active: darken($navtopbar-bg, 8) !default;
-$navtopbar-color: $font-color-default !default;
-$navtopbar-color-hover: $navtopbar-color !default;
-$navtopbar-color-active: $navtopbar-color !default;
-
-$navtopbar-sub-bg: lighten($navtopbar-bg, 4) !default;
-$navtopbar-sub-bg-hover: $navtopbar-sub-bg !default;
-$navtopbar-sub-bg-active: $navtopbar-sub-bg !default;
-$navtopbar-sub-color: #aaa !default;
-$navtopbar-sub-color-hover: $brand-primary !default;
-$navtopbar-sub-color-active: $brand-primary !default;
-
-//== Cards
-// Shadow color
-$shadow-color-border: rgba($gray-primary, 0.5);
-$shadow-color: rgba($gray-primary, 0.66);
-
-//Shadow size
-$shadow-small: 0 2px 4px 0;
-$shadow-medium: 0 5px 7px 0;
-$shadow-large: 0 8px 10px 0;
-
-//## Used in layouts/base
+$navtopbar-bg-hover: $navigation-bg-hover !default;
+$navtopbar-bg-active: $navigation-bg-active !default;
+$navtopbar-color: $navigation-color !default;
+$navtopbar-color-hover: $navigation-color-hover !default;
+$navtopbar-color-active: $navigation-color-active !default;
+
+$navtopbar-sub-bg: $navtopbar-bg !default;
+$navtopbar-sub-bg-hover: $navtopbar-bg-hover !default;
+$navtopbar-sub-bg-active: $navtopbar-bg-active !default;
+$navtopbar-sub-color: $navigation-color !default;
+$navtopbar-sub-color-hover: $navigation-color-hover !default;
+$navtopbar-sub-color-active: $navigation-color-active !default;
+
 $navtopbar-border-color: $topbar-border-color !default;
 
-//== Form
-//## Used in components/inputs
+/* Shadows */
+$shadow-color-border: $border-color-default !default;
+$shadow-color: var(--gray-200) !default;
+$shadow-small: 0 2px 4px 0 !default;
+$shadow-medium: 0 4px 6px 0 !default;
+$shadow-large: 0 8px 10px 0 !default;
 
-// Values that can be used default | lined
+/* Form Inputs */
 $form-input-style: default !default;
 
-// Form Label
+$form-label-color: $font-color-default !default;
 $form-label-size: $font-size-default !default;
-$form-label-weight: $font-weight-semibold !default;
+$form-label-weight: $font-weight-normal !default;
 $form-label-gutter: 8px !default;
 
-// Form Input dimensions
 $form-input-height: auto !default;
 $form-input-padding-y: 8px !default;
 $form-input-padding-x: 8px !default;
@@ -201,397 +197,261 @@ $form-input-static-padding-y: 8px !default;
 $form-input-static-padding-x: 0 !default;
 $form-input-font-size: $form-label-size !default;
 $form-input-line-height: $line-height-base !default;
-$form-input-border-radius: $border-radius-default !default;
+$form-input-border-radius: 6px !default;
 
-// Form Input styling
-$form-input-bg: #fff !default;
-$form-input-bg-focus: #fff !default;
-$form-input-bg-hover: $gray-primary !default;
+$form-input-bg: $color-base !default;
+$form-input-bg-focus: $color-base !default;
+$form-input-bg-hover: var(--gray-200) !default;
 $form-input-bg-disabled: $bg-color !default;
 $form-input-color: $font-color-default !default;
 $form-input-focus-color: $form-input-color !default;
-$form-input-disabled-color: #9da1a8 !default;
-$form-input-placeholder-color: #6c717c !default;
-$form-input-border-color: $gray-primary !default;
+$form-input-disabled-color: var(--gray-700) !default;
+$form-input-placeholder-color: var(--gray-600) !default;
+$form-input-border-color: var(--gray-200) !default;
 $form-input-border-focus-color: $brand-primary !default;
+$form-input-border-hover-color: color-mix(
+    in srgb,
+    $form-input-border-color,
+    $form-input-border-focus-color 50%
+) !default;
 
-// Form Input Static styling
-$form-input-static-border-color: $gray-primary !default;
+$form-input-static-border-color: var(--gray-200) !default;
 
-// Form Group
 $form-group-margin-bottom: 16px !default;
 $form-group-gutter: 16px !default;
 
-//== Buttons
-//## Define background-color, border-color and text. Used in components/buttons
-
-// Default button style
-$btn-font-size: 14px !default;
-$btn-bordered: false !default; // Default value false, set to true if you want this effect
+/* Buttons */
+$btn-font-size: $font-size-default !default;
+$btn-bordered: false !default;
 $btn-border-radius: $border-radius-default !default;
 
-// Button Background Color
-$btn-default-bg: #fff !default;
+$btn-default-bg: $color-base !default;
 $btn-primary-bg: $brand-primary !default;
 $btn-success-bg: $brand-success !default;
 $btn-warning-bg: $brand-warning !default;
 $btn-danger-bg: $brand-danger !default;
 
-// Button Border Color
-$btn-default-border-color: $gray-primary !default;
+$btn-default-border-color: var(--gray-200) !default;
 $btn-primary-border-color: $brand-primary !default;
 $btn-success-border-color: $brand-success !default;
 $btn-warning-border-color: $brand-warning !default;
 $btn-danger-border-color: $brand-danger !default;
 
-// Button Text Color
 $btn-default-color: $brand-primary !default;
-$btn-primary-color: #fff !default;
-$btn-success-color: #fff !default;
-$btn-warning-color: #fff !default;
-$btn-danger-color: #fff !default;
+$btn-primary-color: $font-color-contrast !default;
+$btn-success-color: $font-color-contrast !default;
+$btn-warning-color: $font-color-contrast !default;
+$btn-danger-color: $font-color-contrast !default;
 
-// Button Icon Color
 $btn-default-icon-color: $gray !default;
 
-// Button Background Color
-$btn-default-bg-hover: $btn-default-border-color !default;
-$btn-primary-bg-hover: mix($btn-primary-bg, black, 80%) !default;
-$btn-success-bg-hover: mix($btn-success-bg, black, 80%) !default;
-$btn-warning-bg-hover: mix($btn-warning-bg, black, 80%) !default;
-$btn-danger-bg-hover: mix($btn-danger-bg, black, 80%) !default;
-$btn-link-bg-hover: $gray-lighter !default;
-
-//== Header blocks
-//## Define look and feel over multible building blocks that serve as header
+$btn-default-bg-hover: var(--gray-200) !default;
+$btn-primary-bg-hover: var(--brand-primary-600) !default;
+$btn-success-bg-hover: var(--brand-success-600) !default;
+$btn-warning-bg-hover: var(--brand-warning-600) !default;
+$btn-danger-bg-hover: var(--brand-danger-600) !default;
+$btn-link-bg-hover: var(--gray-50) !default;
 
+/* Header */
 $header-min-height: 240px !default;
 $header-bg-color: $brand-primary !default;
 $header-bgimage-filter: brightness(60%) !default;
-$header-text-color: #fff !default;
+$header-text-color: $color-base !default;
 $header-text-color-detail: rgba(0, 0, 0, 0.2) !default;
 
-//
-// ███████╗██╗  ██╗██████╗ ███████╗██████╗ ████████╗
-// ██╔════╝╚██╗██╔╝██╔══██╗██╔════╝██╔══██╗╚══██╔══╝
-// █████╗   ╚███╔╝ ██████╔╝█████╗  ██████╔╝   ██║
-// ██╔══╝   ██╔██╗ ██╔═══╝ ██╔══╝  ██╔══██╗   ██║
-// ███████╗██╔╝ ██╗██║     ███████╗██║  ██║   ██║
-// ╚══════╝╚═╝  ╚═╝╚═╝     ╚══════╝╚═╝  ╚═╝   ╚═╝
-//
-
-//== Color variations
-//## These variations are used to support several other variables and components
-
-// Color variations
-$color-default-darker: mix($brand-default, black, 60%) !default;
-$color-default-dark: mix($brand-default, black, 70%) !default;
-$color-default-light: mix($brand-default, white, 20%) !default;
-$color-default-lighter: mix($brand-default, white, 10%) !default;
-
-$color-primary-darker: mix($brand-primary, black, 60%) !default;
-$color-primary-dark: mix($brand-primary, black, 70%) !default;
-$color-primary-light: mix($brand-primary, white, 20%) !default;
-$color-primary-lighter: mix($brand-primary, white, 10%) !default;
-
-$color-success-darker: mix($brand-success, black, 60%) !default;
-$color-success-dark: mix($brand-success, black, 70%) !default;
-$color-success-light: mix($brand-success, white, 20%) !default;
-$color-success-lighter: mix($brand-success, white, 10%) !default;
-
-$color-warning-darker: mix($brand-warning, black, 60%) !default;
-$color-warning-dark: mix($brand-warning, black, 70%) !default;
-$color-warning-light: mix($brand-warning, white, 20%) !default;
-$color-warning-lighter: mix($brand-warning, white, 10%) !default;
-
-$color-danger-darker: mix($brand-danger, black, 60%) !default;
-$color-danger-dark: mix($brand-danger, black, 70%) !default;
-$color-danger-light: mix($brand-danger, white, 20%) !default;
-$color-danger-lighter: mix($brand-danger, white, 10%) !default;
-
-$brand-gradient: linear-gradient(to right top, #264ae5, #2239c5, #1b29a6, #111988, #03096c) !default;
-
-//== Grids
-//## Used for Datagrid, Templategrid, Listview & Tables (see components folder)
-
-// Default Border Colors
+/* Grid */
 $grid-border-color: $border-color-default !default;
 
-// Spacing
-// Default
-$grid-padding-top: 16px !default;
-$grid-padding-right: 16px !default;
-$grid-padding-bottom: 16px !default;
-$grid-padding-left: 16px !default;
-
-// Listview
-$listview-padding-top: 16px !default;
-$listview-padding-right: 16px !default;
-$listview-padding-bottom: 16px !default;
-$listview-padding-left: 16px !default;
-
-// Background Colors
 $grid-bg: transparent !default;
-$grid-bg-header: transparent !default; // Grid Headers
-$grid-bg-hover: mix($grid-border-color, #fff, 20%) !default;
-$grid-bg-selected: mix($grid-border-color, #fff, 30%) !default;
-$grid-bg-selected-hover: mix($grid-border-color, #fff, 50%) !default;
-
-// Striped Background Color
-$grid-bg-striped: mix($grid-border-color, #fff, 10%) !default;
+$grid-bg-header: transparent !default;
+$grid-bg-hover: var(--gray-100) !default;
+$grid-bg-selected: var(--gray-200) !default;
+$grid-bg-selected-hover: var(--gray-300) !default;
+$grid-bg-striped: var(--gray-50) !default;
+$grid-footer-bg: var(--gray-200) !default;
 
-// Background Footer Color
-$grid-footer-bg: $gray-primary !default;
-
-// Text Color
 $grid-selected-color: $font-color-default !default;
 
-// Paging Colors
 $grid-paging-bg: transparent !default;
 $grid-paging-bg-hover: transparent !default;
 $grid-paging-border-color: transparent !default;
 $grid-paging-border-color-hover: transparent !default;
-$grid-paging-color: $gray-light !default;
+$grid-paging-color: var(--gray-300) !default;
 $grid-paging-color-hover: $brand-primary !default;
 
-//== Tabs
-//## Default variables for Tab Container Widget (used in components/tabcontainer)
-
-// Text Color
+/* Tabs */
 $tabs-color: $font-color-detail !default;
 $tabs-color-active: $font-color-default !default;
 $tabs-lined-color-active: $font-color-default !default;
 
 $tabs-lined-border-width: 3px !default;
-
-// Border Color
 $tabs-border-color: $border-color-default !default;
 $tabs-lined-border-color: $brand-primary !default;
-
-// Background Color
 $tabs-bg: transparent !default;
-$tabs-bg-pills: #e7e7e9 !default;
-$tabs-bg-hover: lighten($tabs-border-color, 5) !default;
+$tabs-bg-pills: var(--gray-100) !default;
+$tabs-bg-hover: var(--gray-200) !default;
 $tabs-bg-active: $brand-primary !default;
 
-//== Modals
-//## Default Mendix Modal, Blocking Modal and Login Modal (used in components/modals)
-
-// Background Color
+/* Modal */
 $modal-header-bg: transparent !default;
-
-// Border Color
 $modal-header-border-color: $border-color-default !default;
+$modal-header-color: $font-color-header !default;
+$modal-body-bg: $bg-color !default;
+$modal-footer-bg: $bg-color-secondary !default;
 
-// Text Color
-$modal-header-color: $font-color-default !default;
-
-//== Dataview
-//## Default variables for Dataview Widget (used in components/dataview)
-
-// Controls
-$dataview-controls-bg: transparent !default;
+/* Data View */
+$dataview-controls-bg: inherit !default;
 $dataview-controls-border-color: $border-color-default !default;
+$dataview-controls-alignment: left !default;
 
-// Empty Message
 $dataview-emptymessage-bg: $bg-color !default;
 $dataview-emptymessage-color: $font-color-default !default;
 
-//== Alerts
-//## Default Bootstrap alerts, not a widget in the Modeler (used in components/alerts)
-
-// Background Color
-$alert-primary-bg: $color-primary-lighter !default;
-$alert-secondary-bg: $color-primary-lighter !default;
-$alert-success-bg: $color-success-lighter !default;
-$alert-warning-bg: $color-warning-lighter !default;
-$alert-danger-bg: $color-danger-lighter !default;
-
-// Text Color
-$alert-primary-color: $color-primary-darker !default;
-$alert-secondary-color: $color-primary-darker !default;
-$alert-success-color: $color-success-darker !default;
-$alert-warning-color: $color-warning-darker !default;
-$alert-danger-color: $color-danger-darker !default;
-
-// Border Color
-$alert-primary-border-color: $color-primary-dark !default;
-$alert-secondary-border-color: $color-primary-dark !default;
-$alert-success-border-color: $color-success-dark !default;
-$alert-warning-border-color: $color-warning-dark !default;
-$alert-danger-border-color: $color-danger-dark !default;
-
-//== Wizard
-
+/* Alerts */
+$alert-primary-bg: var(--brand-primary-100) !default;
+$alert-secondary-bg: var(--brand-default-100) !default;
+$alert-success-bg: var(--brand-success-100) !default;
+$alert-warning-bg: var(--brand-warning-100) !default;
+$alert-danger-bg: var(--brand-danger-100) !default;
+
+$alert-primary-color: var(--brand-primary-700) !default;
+$alert-secondary-color: var(--brand-default-700) !default;
+$alert-success-color: var(--brand-success-700) !default;
+$alert-warning-color: var(--brand-warning-700) !default;
+$alert-danger-color: var(--brand-danger-700) !default;
+
+$alert-primary-border-color: var(--brand-primary-700) !default;
+$alert-secondary-border-color: var(--brand-secondary-700) !default;
+$alert-success-border-color: var(--brand-success-700) !default;
+$alert-warning-border-color: var(--brand-warning-700) !default;
+$alert-danger-border-color: var(--brand-danger-700) !default;
+
+/* Wizard */
 $wizard-step-height: 48px !default;
 $wizard-step-number-size: 64px !default;
 $wizard-step-number-font-size: $font-size-h3 !default;
 
-//Wizard states
-$wizard-default: #fff !default;
-$wizard-active: $brand-primary !default;
-$wizard-visited: $brand-success !default;
-
-//Wizard step states
-$wizard-default-bg: $wizard-default !default;
-$wizard-default-color: $wizard-default !default;
+$wizard-default-bg: $color-base !default;
+$wizard-default-color: $color-base !default;
 $wizard-default-step-color: $font-color-default !default;
 $wizard-default-border-color: $border-color-default !default;
 
-$wizard-active-bg: $wizard-active !default;
-$wizard-active-color: $wizard-default !default;
-$wizard-active-step-color: $wizard-active !default;
-$wizard-active-border-color: $wizard-active !default;
-
-$wizard-visited-bg: $wizard-visited !default;
-$wizard-visited-color: $wizard-default !default;
-$wizard-visited-step-color: $wizard-visited !default;
-$wizard-visited-border-color: $wizard-visited !default;
+$wizard-active-bg: var(--brand-primary-200) !default;
+$wizard-active-color: var(--brand-primary-700) !default;
+$wizard-active-step-color: var(--brand-primary-700) !default;
+$wizard-active-border-color: var(--brand-primary-700) !default;
 
-//== Labels
-//## Default Bootstrap Labels, not a widget in the Modeler (used in components/labels)
+$wizard-visited-bg: var(--brand-success-200) !default;
+$wizard-visited-color: var(--brand-success-700) !default;
+$wizard-visited-step-color: var(--brand-success-700) !default;
+$wizard-visited-border-color: var(--brand-success-700) !default;
 
-// Background Color
+/* Labels */
 $label-default-bg: $brand-default !default;
 $label-primary-bg: $brand-primary !default;
 $label-success-bg: $brand-success !default;
 $label-warning-bg: $brand-warning !default;
 $label-danger-bg: $brand-danger !default;
 
-// Border Color
 $label-default-border-color: $brand-default !default;
 $label-primary-border-color: $brand-primary !default;
 $label-success-border-color: $brand-success !default;
 $label-warning-border-color: $brand-warning !default;
 $label-danger-border-color: $brand-danger !default;
 
-// Text Color
 $label-default-color: $font-color-default !default;
-$label-primary-color: #fff !default;
-$label-success-color: #fff !default;
-$label-warning-color: #fff !default;
-$label-danger-color: #fff !default;
-
-//== Groupbox
-//## Default variables for Groupbox Widget (used in components/groupbox)
+$label-primary-color: $color-base !default;
+$label-success-color: $color-base !default;
+$label-warning-color: $color-base !default;
+$label-danger-color: $color-base !default;
 
-// Background Color
-$groupbox-default-bg: $gray-primary !default;
+/* Groupbox */
+$groupbox-default-bg: var(--gray-200) !default;
 $groupbox-primary-bg: $brand-primary !default;
 $groupbox-success-bg: $brand-success !default;
 $groupbox-warning-bg: $brand-warning !default;
 $groupbox-danger-bg: $brand-danger !default;
-$groupbox-white-bg: #fff !default;
+$groupbox-white-bg: $color-base !default;
 
-// Text Color
 $groupbox-default-color: $font-color-default !default;
-$groupbox-primary-color: #fff !default;
-$groupbox-success-color: #fff !default;
-$groupbox-warning-color: #fff !default;
-$groupbox-danger-color: #fff !default;
+$groupbox-primary-color: $color-base !default;
+$groupbox-success-color: $color-base !default;
+$groupbox-warning-color: $color-base !default;
+$groupbox-danger-color: $color-base !default;
 $groupbox-white-color: $font-color-default !default;
 
-//== Callout (groupbox) Colors
-//## Extended variables for Groupbox Widget (used in components/groupbox)
-
-// Text and Border Color
-$callout-default-color: $font-color-default !default;
+/* Callouts */
 $callout-primary-color: $brand-primary !default;
+$callout-default-color: $font-color-default !default;
 $callout-success-color: $brand-success !default;
 $callout-warning-color: $brand-warning !default;
 $callout-danger-color: $brand-danger !default;
 
-// Background Color
-$callout-default-bg: $color-default-lighter !default;
-$callout-primary-bg: $color-primary-lighter !default;
-$callout-success-bg: $color-success-lighter !default;
-$callout-warning-bg: $color-warning-lighter !default;
-$callout-danger-bg: $color-danger-lighter !default;
+$callout-primary-bg: var(--brand-primary-200) !default;
+$callout-default-bg: var(--gray-50) !default;
+$callout-success-bg: var(--brand-success-200) !default;
+$callout-warning-bg: var(--brand-warning-200) !default;
+$callout-danger-bg: var(--brand-danger-200) !default;
 
-//== Timeline
-//## Extended variables for Timeline Widget
-// Colors
+/* Timeline */
 $timeline-icon-color: $brand-primary !default;
 $timeline-border-color: $border-color-default !default;
 $timeline-event-time-color: $brand-primary !default;
-
-// Sizes
 $timeline-icon-size: 18px !default;
 $timeline-image-size: 36px !default;
-
-//Timeline grouping
 $timeline-grouping-size: 120px !default;
 $timeline-grouping-border-radius: 30px !default;
 $timeline-grouping-border-color: $timeline-border-color !default;
 
-//== Accordions
-//## Extended variables for Accordion Widget
-
-// Default
+/* Accordion */
 $accordion-header-default-bg: $bg-color-secondary !default;
 $accordion-header-default-bg-hover: $bg-color !default;
 $accordion-header-default-color: $font-color-header !default;
 $accordion-default-border-color: $border-color-default !default;
-
 $accordion-bg-striped: $grid-bg-striped !default;
 $accordion-bg-striped-hover: $grid-bg-selected !default;
 
-// Semantic background colors
-$accordion-header-primary-bg: $btn-primary-bg !default;
-$accordion-header-secondary-bg: $btn-default-bg !default;
-$accordion-header-success-bg: $btn-success-bg !default;
-$accordion-header-warning-bg: $btn-warning-bg !default;
-$accordion-header-danger-bg: $btn-danger-bg !default;
-
-$accordion-header-primary-bg-hover: $btn-primary-bg-hover !default;
-$accordion-header-secondary-bg-hover: $btn-default-bg-hover !default;
-$accordion-header-success-bg-hover: $btn-success-bg-hover !default;
-$accordion-header-warning-bg-hover: $btn-warning-bg-hover !default;
-$accordion-header-danger-bg-hover: $btn-danger-bg-hover !default;
-
-// Semantic text colors
-$accordion-header-primary-color: $btn-primary-color !default;
-$accordion-header-secondary-color: $btn-default-color !default;
-$accordion-header-success-color: $btn-success-color !default;
-$accordion-header-warning-color: $btn-warning-color !default;
-$accordion-header-danger-color: $btn-danger-color !default;
-
-// Semantic border colors
-$accordion-primary-border-color: $btn-primary-border-color !default;
-$accordion-secondary-border-color: $btn-default-border-color !default;
-$accordion-success-border-color: $btn-success-border-color !default;
-$accordion-warning-border-color: $btn-warning-border-color !default;
-$accordion-danger-border-color: $btn-danger-border-color !default;
-
-//== Spacing
-//## Advanced layout options (used in base/mixins/default-spacing)
-
-// Smallest spacing
+$accordion-header-primary-bg: $brand-primary !default;
+$accordion-header-secondary-bg: $bg-color-secondary !default;
+$accordion-header-success-bg: $brand-success !default;
+$accordion-header-warning-bg: $brand-warning !default;
+$accordion-header-danger-bg: $brand-danger !default;
+
+$accordion-header-primary-bg-hover: var(--brand-primary-600) !default;
+$accordion-header-secondary-bg-hover: var(--gray-50) !default;
+$accordion-header-success-bg-hover: var(--brand-success-600) !default;
+$accordion-header-warning-bg-hover: var(--brand-warning-600) !default;
+$accordion-header-danger-bg-hover: var(--brand-danger-600) !default;
+
+$accordion-header-primary-color: $font-color-contrast !default;
+$accordion-header-secondary-color: $brand-primary !default;
+$accordion-header-success-color: $font-color-contrast !default;
+$accordion-header-warning-color: $font-color-contrast !default;
+$accordion-header-danger-color: $font-color-contrast !default;
+
+$accordion-primary-border-color: $brand-primary !default;
+$accordion-secondary-border-color: var(--gray-200) !default;
+$accordion-success-border-color: $brand-success !default;
+$accordion-warning-border-color: $brand-warning !default;
+$accordion-danger-border-color: $brand-danger !default;
+
+/* Spacing */
+$spacing-none: 0px !default;
 $spacing-smallest: 2px !default;
-
-// Smaller spacing
 $spacing-smaller: 4px !default;
-
-// Small spacing
 $spacing-small: 8px !default;
-
-// Medium spacing
 $spacing-medium: 16px !default;
+
 $t-spacing-medium: 16px !default;
 $m-spacing-medium: 16px !default;
 
-// Large spacing
 $spacing-large: 24px !default;
 $t-spacing-large: 24px !default;
 $m-spacing-large: 16px !default;
 
-// Larger spacing
 $spacing-larger: 32px !default;
-
-// Largest spacing
 $spacing-largest: 48px !default;
 
-// Layout spacing
 $layout-spacing-top: 24px !default;
 $layout-spacing-right: 24px !default;
 $layout-spacing-bottom: 24px !default;
@@ -607,159 +467,94 @@ $m-layout-spacing-right: 16px !default;
 $m-layout-spacing-bottom: 16px !default;
 $m-layout-spacing-left: 16px !default;
 
-// Combined layout spacing
 $layout-spacing: $layout-spacing-top $layout-spacing-right $layout-spacing-bottom $layout-spacing-left !default;
 $m-layout-spacing: $m-layout-spacing-top $m-layout-spacing-right $m-layout-spacing-bottom $m-layout-spacing-left !default;
 $t-layout-spacing: $t-layout-spacing-top $t-layout-spacing-right $t-layout-spacing-bottom $t-layout-spacing-left !default;
 
-// Gutter size
-$gutter-size: 8px !default;
-
-//== Tables
-//## Table spacing options (used in components/tables)
+$gutter-size: $spacing-small !default;
 
 $padding-table-cell-top: 8px !default;
 $padding-table-cell-bottom: 8px !default;
 $padding-table-cell-left: 8px !default;
 $padding-table-cell-right: 8px !default;
 
-//== Media queries breakpoints
-//## Define the breakpoints at which your layout will change, adapting to different screen sizes.
-
-$screen-xs: 480px !default;
-$screen-sm: 576px !default;
-$screen-md: 768px !default;
-$screen-lg: 992px !default;
-$screen-xl: 1200px !default;
-
-// So media queries don't overlap when required, provide a maximum (used for max-width)
-$screen-xs-max: calc(#{$screen-sm} - 1px) !default;
-$screen-sm-max: calc(#{$screen-md} - 1px) !default;
-$screen-md-max: calc(#{$screen-lg} - 1px) !default;
-$screen-lg-max: calc(#{$screen-xl} - 1px) !default;
-
-//== Settings
-//## Enable or disable your desired framework features
-// Use of !important
-$important-flex: true !default; // ./base/flex.scss
-$important-spacing: true !default; // ./base/spacing.scss
-$important-helpers: true !default; // ./helpers/helperclasses.scss
-
-//===== Legacy variables =====
-
-//== Step 1: Brand Colors
-$brand-inverse: #24276c !default;
-$brand-info: #0086d9 !default;
-
-//== Step 2: UI Customization
-// Sidebar
-$sidebar-bg: $brand-inverse !default;
+/* Brand Variants */
+$btn-inverse-bg: var(--brand-primary-400) !default;
+$btn-info-bg: var(--brand-primary-300) !default;
+$btn-inverse-border-color: var(--brand-primary-400) !default;
+$btn-info-border-color: var(--brand-primary-300) !default;
 
-//== Navigation
-//## Used in components/navigation
+$btn-inverse-color: $color-base !default;
+$btn-info-color: $color-base !default;
 
-// Default Navigation styling
-$navigation-bg: $brand-inverse !default;
-$navigation-bg-hover: lighten($navigation-bg, 4) !default;
-$navigation-bg-active: lighten($navigation-bg, 8) !default;
+$btn-inverse-bg-hover: var(--brand-primary-300) !default;
+$btn-info-bg-hover: var(--brand-primary-300) !default;
 
-$navigation-sub-bg: darken($navigation-bg, 4) !default;
-$navigation-sub-bg-hover: $navigation-sub-bg !default;
-$navigation-sub-bg-active: $navigation-sub-bg !default;
+/* Alerts */
+$alert-info-bg: var(--brand-primary-50) !default;
+$alert-info-color: var(--brand-primary-600) !default;
+$alert-info-border-color: $brand-primary !default;
 
-$navigation-border-color: $navigation-bg-hover !default;
-
-// Navigation Sidebar
-$navsidebar-bg: $sidebar-bg !default;
-$navsidebar-bg-hover: darken($navsidebar-bg, 4) !default;
-$navsidebar-bg-active: darken($navsidebar-bg, 8) !default;
-
-$navsidebar-sub-bg: darken($navsidebar-bg, 4) !default;
-$navsidebar-sub-bg-hover: $navsidebar-sub-bg !default;
-$navsidebar-sub-bg-active: $navsidebar-sub-bg !default;
-
-$navsidebar-border-color: $navsidebar-bg-hover !default;
-
-//== Form
-//## Used in components/inputs
-
-// Form Label
-$form-label-color: $brand-inverse !default;
+/* Labels */
+$label-info-bg: var(--brand-primary-300) !default;
+$label-inverse-bg: var(--brand-primary-600) !default;
 
-//== Buttons
-//## Define background-color, border-color and text. Used in components/buttons
+$label-info-border-color: var(--brand-primary-300) !default;
+$label-inverse-border-color: var(--brand-primary-600) !default;
 
-// Button Background Color
-$btn-inverse-bg: $brand-inverse !default;
-$btn-info-bg: $brand-info !default;
+$label-info-color: $color-base !default;
+$label-inverse-color: $color-base !default;
 
-// Button Border Color
-$btn-inverse-border-color: $brand-inverse !default;
-$btn-info-border-color: $brand-info !default;
+/* Groupbox */
+$groupbox-inverse-bg: var(--brand-primary-600) !default;
+$groupbox-info-bg: var(--brand-primary-300) !default;
 
-// Button Text Color
-$btn-inverse-color: #fff !default;
-$btn-info-color: #fff !default;
+$groupbox-inverse-color: $color-base !default;
+$groupbox-info-color: $color-base !default;
 
-// Button Background Color
-$btn-inverse-bg-hover: mix($btn-inverse-bg, white, 80%) !default;
-$btn-info-bg-hover: mix($btn-info-bg, black, 80%) !default;
+/* Callouts */
+$callout-info-color: var(--brand-primary-300) !default;
+$callout-info-bg: var(--brand-primary-50) !default;
 
-//== Color variations
-//## These variations are used to support several other variables and components
+//== Legacy variables
+$gray-lighter: var(--gray-50);
+$gray-light: var(--gray-300);
+$gray-primary: var(--gray-200);
+$gray-dark: var(--gray-700);
+$gray-darker: var(--gray-800);
 
 // Color variations
-$color-inverse-darker: mix($brand-inverse, black, 60%) !default;
-$color-inverse-dark: mix($brand-inverse, black, 70%) !default;
-$color-inverse-light: mix($brand-inverse, white, 40%) !default;
-$color-inverse-lighter: mix($brand-inverse, white, 20%) !default;
-
-$color-info-darker: mix($brand-info, black, 60%) !default;
-$color-info-dark: mix($brand-info, black, 70%) !default;
-$color-info-light: mix($brand-info, white, 60%) !default;
-$color-info-lighter: mix($brand-info, white, 20%) !default;
-
-//== Alerts
-//## Default Bootstrap alerts, not a widget in the Modeler (used in components/alerts)
-
-// Background Color
-$alert-info-bg: $color-primary-lighter !default;
-
-// Text Color
-$alert-info-color: $color-primary-darker !default;
-
-// Border Color
-$alert-info-border-color: $color-primary-dark !default;
-//== Labels
-//## Default Bootstrap Labels, not a widget in the Modeler (used in components/labels)
-
-// Background Color
-$label-info-bg: $brand-info !default;
-$label-inverse-bg: $brand-inverse !default;
+$color-default-darker: var(--gray-700) !default;
+$color-default-dark: var(--gray-600) !default;
+$color-default-light: var(--gray-100) !default;
+$color-default-lighter: var(--gray-50) !default;
+
+$color-primary-darker: var(--brand-primary-700) !default;
+$color-primary-dark: var(--brand-primary-600) !default;
+$color-primary-light: var(--brand-primary-100) !default;
+$color-primary-lighter: var(--brand-primary-50) !default;
+
+$color-success-darker: var(--brand-success-700) !default;
+$color-success-dark: var(--brand-success-600) !default;
+$color-success-light: var(--brand-success-100) !default;
+$color-success-lighter: var(--brand-success-50) !default;
+
+$color-warning-darker: var(--brand-warning-700) !default;
+$color-warning-dark: var(--brand-warning-600) !default;
+$color-warning-light: var(--brand-warning-100) !default;
+$color-warning-lighter: var(--brand-warning-50) !default;
+
+$color-danger-darker: var(--brand-danger-700) !default;
+$color-danger-dark: var(--brand-danger-600) !default;
+$color-danger-light: var(--brand-danger-100) !default;
+$color-danger-lighter: var(--brand-danger-50) !default;
 
-// Border Color
-$label-info-border-color: $brand-info !default;
-$label-inverse-border-color: $brand-inverse !default;
-
-// Text Color
-$label-info-color: #fff !default;
-$label-inverse-color: #fff !default;
-
-//== Groupbox
-//## Default variables for Groupbox Widget (used in components/groupbox)
-
-// Background Color
-$groupbox-inverse-bg: $brand-inverse !default;
-$groupbox-info-bg: $brand-info !default;
-
-// Text Color
-$groupbox-inverse-color: #fff !default;
-$groupbox-info-color: #fff !default;
-//== Callout (groupbox) Colors
-//## Extended variables for Groupbox Widget (used in components/groupbox)
-
-// Text and Border Color
-$callout-info-color: $brand-info !default;
+$grid-padding-top: 16px !default;
+$grid-padding-right: 16px !default;
+$grid-padding-bottom: 16px !default;
+$grid-padding-left: 16px !default;
 
-// Background Color
-$callout-info-bg: $color-info-lighter !default;
+$listview-padding-top: 16px !default;
+$listview-padding-right: 16px !default;
+$listview-padding-bottom: 16px !default;
+$listview-padding-left: 16px !default;
diff --git a/Source/themesource/atlas_core/web/core/_legacy/_mxui.scss b/Source/themesource/atlas_core/web/core/_legacy/_mxui.scss
index 1ad6ffb1..30b8822e 100644
--- a/Source/themesource/atlas_core/web/core/_legacy/_mxui.scss
+++ b/Source/themesource/atlas_core/web/core/_legacy/_mxui.scss
@@ -2352,11 +2352,6 @@ Main class hierarchy:
         display: inline-block;
     }
 
-    .form-horizontal .form-group.no-columns {
-        padding-left: 15px;
-        padding-right: 15px;
-    }
-
     .mx-radiobuttons.inline .radio {
         display: inline-block;
         margin-right: 20px;
@@ -2380,19 +2375,6 @@ Main class hierarchy:
         white-space: pre-line;
     }
 
-    //.mx-compound-control {
-    //    display: flex;
-    //}
-
-    //.mx-compound-control button {
-    //    margin-left: 5px;
-    //}
-    //
-    //[dir="rtl"] .mx-compound-control button {
-    //    margin-left: 0;
-    //    margin-right: 5px;
-    //}
-
     .mx-tooltip {
         margin: 10px;
     }
@@ -2617,9 +2599,6 @@ Main class hierarchy:
     .mx-datagrid tbody tr:first-child td {
         border-top: none;
     }
-    //.mx-datagrid tbody tr:nth-child(2n+1) td {
-    //    background-color: #f9f9f9;
-    //}
     .mx-datagrid tbody .selected td {
         background-color: #eee;
     }
@@ -2708,12 +2687,6 @@ Main class hierarchy:
     .mx-navigationtree ul {
         list-style: none;
     }
-    //.mx-navigationtree ul li {
-    //    border-bottom: 1px solid #dfe6ea;
-    //}
-    //.mx-navigationtree li:last-child {
-    //    border-style: none;
-    //}
     .mx-navigationtree a {
         display: block;
         padding: 5px 10px;
@@ -2724,7 +2697,6 @@ Main class hierarchy:
     .mx-navigationtree a.active {
         color: #fff;
         text-shadow: none;
-        background: #3498db;
         border-radius: 3px;
     }
     .mx-navigationtree .mx-navigationtree-collapsed ul {
@@ -2734,9 +2706,6 @@ Main class hierarchy:
         margin: 0;
         padding: 0;
     }
-    //.mx-navigationtree ul li {
-    //    padding: 5px 0;
-    //}
     .mx-navigationtree ul li ul {
         padding: 0;
         margin-left: 10px;
@@ -2805,23 +2774,6 @@ Main class hierarchy:
         float: left;
     }
 
-    .mx-dataview {
-        position: relative;
-    }
-    .mx-dataview-controls {
-        padding: 19px 20px 12px;
-        background-color: #f5f5f5;
-        border-top: 1px solid #eee;
-    }
-
-    .mx-dataview-controls .mx-button {
-        margin-bottom: 8px;
-    }
-
-    .mx-dataview-controls .mx-button + .mx-button {
-        margin-left: 0.3em;
-    }
-
     .mx-dataview-message {
         background: #fff;
         position: absolute;
@@ -2973,31 +2925,6 @@ Main class hierarchy:
         padding: 0px;
         list-style: none;
     }
-    // .mx-listview > ul > li {
-    //     padding: 5px 10px 10px;
-    //     border: 1px #ddd;
-    //     border-style: solid solid none;
-    //     background-color: #fff;
-    //     outline: none;
-    // }
-    // .mx-listview > ul > li:first-child {
-    //     border-top-left-radius: 4px;
-    //     border-top-right-radius: 4px;
-    // }
-    // .mx-listview > ul > li:last-child {
-    //     border-bottom-style: solid;
-    //     border-bottom-left-radius: 4px;
-    //     border-bottom-right-radius: 4px;
-    // }
-    //.mx-listview li:nth-child(2n+1) {
-    //    background: #f9f9f9;
-    //}
-    //.mx-listview li:nth-child(2n+1):hover {
-    //    background: #f5f5f5;
-    //}
-    .mx-listview > ul > li.selected {
-        //    background: #eee;
-    }
     .mx-listview-clickable > ul > li {
         cursor: pointer;
     }
@@ -3071,7 +2998,6 @@ Main class hierarchy:
     .mx-navigationlist li:focus,
     .mx-navigationlist li.active {
         color: #fff;
-        background-color: #3498db;
     }
     .mx-navigationlist * {
         cursor: pointer;
@@ -3266,79 +3192,6 @@ Main class hierarchy:
     .mx-dropdown .selected {
         background: #f8f8f8;
     }
-    //.mx-selectbox {
-    //    text-align: left;
-    //}
-    //.mx-selectbox-caret-wrapper {
-    //    float: right;
-    //    height: 100%;
-    //}
-
-    .mx-demouserswitcher {
-        position: fixed;
-        top: 0;
-        right: 0;
-        width: 360px;
-        height: 100%;
-        z-index: 20000;
-        box-shadow: -1px 0 5px rgba(28, 59, 86, 0.2);
-    }
-    .mx-demouserswitcher-content {
-        padding: 80px 40px 20px;
-        height: 100%;
-        color: #387ea2;
-        font-size: 14px;
-        overflow: auto;
-        background: url(resources/switcher.png) top right no-repeat #1b3149;
-        /* background-attachement local is not supported on IE8
-     * when this is part of background the complete background is ignored */
-        background-attachment: local;
-    }
-    .mx-demouserswitcher ul {
-        padding: 0;
-        margin-top: 25px;
-        list-style-type: none;
-        border-top: 1px solid #496076;
-    }
-    .mx-demouserswitcher a {
-        display: block;
-        padding: 10px 0;
-        color: #387ea2;
-        border-bottom: 1px solid #496076;
-    }
-    .mx-demouserswitcher h2 {
-        margin: 20px 0 5px;
-        color: #5bc4fe;
-        font-size: 28px;
-    }
-    .mx-demouserswitcher h3 {
-        margin: 0 0 2px;
-        color: #5bc4fe;
-        font-size: 18px;
-        font-weight: normal;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-    }
-    .mx-demouserswitcher .active h3 {
-        color: #11efdb;
-    }
-    .mx-demouserswitcher p {
-        margin-bottom: 0;
-    }
-    .mx-demouserswitcher-toggle {
-        position: absolute;
-        top: 25%;
-        left: -35px;
-        width: 35px;
-        height: 38px;
-        margin-top: -40px;
-        cursor: pointer;
-        border-top-left-radius: 3px;
-        border-bottom-left-radius: 3px;
-        box-shadow: -1px 0 5px rgba(28, 59, 86, 0.2);
-        background: url(resources/switcher-toggle.png) center center no-repeat #1b3149;
-    }
 
     /* master details screen for mobile */
     .mx-master-detail-screen {
diff --git a/Source/themesource/atlas_core/web/core/_legacy/bootstrap/_bootstrap-rtl.scss b/Source/themesource/atlas_core/web/core/_legacy/bootstrap/_bootstrap-rtl.scss
index 3bf6ffa7..fc112ccb 100644
--- a/Source/themesource/atlas_core/web/core/_legacy/bootstrap/_bootstrap-rtl.scss
+++ b/Source/themesource/atlas_core/web/core/_legacy/bootstrap/_bootstrap-rtl.scss
@@ -1340,7 +1340,6 @@
         @media (min-width: 768px) {
             .navbar > .container .navbar-brand,
             .navbar > .container-fluid .navbar-brand {
-                margin-right: -15px;
                 margin-left: auto;
             }
         }
@@ -1370,12 +1369,10 @@
                 float: right !important;
             }
             .navbar-right:last-child {
-                margin-left: -15px;
                 margin-right: auto;
             }
             .navbar-right.flip {
                 float: left !important;
-                margin-left: -15px;
                 margin-right: auto;
             }
             .navbar-right .dropdown-menu {
@@ -1716,12 +1713,10 @@
             .carousel-control .glyphicon-chevron-left,
             .carousel-control .icon-prev {
                 margin-left: 0;
-                margin-right: -15px;
             }
             .carousel-control .glyphicon-chevron-right,
             .carousel-control .icon-next {
                 margin-left: 0;
-                margin-right: -15px;
             }
             .carousel-caption {
                 left: 20%;
diff --git a/Source/themesource/atlas_core/web/core/_legacy/bootstrap/_bootstrap.scss b/Source/themesource/atlas_core/web/core/_legacy/bootstrap/_bootstrap.scss
index 304deb6b..6f887f0b 100644
--- a/Source/themesource/atlas_core/web/core/_legacy/bootstrap/_bootstrap.scss
+++ b/Source/themesource/atlas_core/web/core/_legacy/bootstrap/_bootstrap.scss
@@ -169,7 +169,7 @@
     fieldset {
         padding: 0.35em 0.625em 0.75em;
         margin: 0 2px;
-        border: 1px solid #c0c0c0;
+        border: var(--border-default);
     }
     legend {
         padding: 0;
@@ -1099,20 +1099,6 @@
         font-size: inherit;
         line-height: inherit;
     }
-    a {
-        color: #337ab7;
-        text-decoration: none;
-    }
-    a:hover,
-    a:focus {
-        color: #23527c;
-        text-decoration: underline;
-    }
-    a:focus {
-        outline: thin dotted;
-        outline: 5px auto -webkit-focus-ring-color;
-        outline-offset: -2px;
-    }
     figure {
         margin: 0;
     }
@@ -1138,7 +1124,7 @@
         padding: 4px;
         line-height: 1.42857143;
         background-color: #fff;
-        border: 1px solid #ddd;
+        border: var(--border-default);
         border-radius: 4px;
         -webkit-transition: all 0.2s ease-in-out;
         -o-transition: all 0.2s ease-in-out;
@@ -1596,743 +1582,6 @@
             width: 1170px;
         }
     }
-    .container-fluid {
-        padding-right: 15px;
-        padding-left: 15px;
-        margin-right: auto;
-        margin-left: auto;
-    }
-    .row {
-        margin-right: -15px;
-        margin-left: -15px;
-    }
-    //.col-xs-1,
-    //.col-sm-1,
-    //.col-md-1,
-    //.col-lg-1,
-    //.col-xs-2,
-    //.col-sm-2,
-    //.col-md-2,
-    //.col-lg-2,
-    //.col-xs-3,
-    //.col-sm-3,
-    //.col-md-3,
-    //.col-lg-3,
-    //.col-xs-4,
-    //.col-sm-4,
-    //.col-md-4,
-    //.col-lg-4,
-    //.col-xs-5,
-    //.col-sm-5,
-    //.col-md-5,
-    //.col-lg-5,
-    //.col-xs-6,
-    //.col-sm-6,
-    //.col-md-6,
-    //.col-lg-6,
-    //.col-xs-7,
-    //.col-sm-7,
-    //.col-md-7,
-    //.col-lg-7,
-    //.col-xs-8,
-    //.col-sm-8,
-    //.col-md-8,
-    //.col-lg-8,
-    //.col-xs-9,
-    //.col-sm-9,
-    //.col-md-9,
-    //.col-lg-9,
-    //.col-xs-10,
-    //.col-sm-10,
-    //.col-md-10,
-    //.col-lg-10,
-    //.col-xs-11,
-    //.col-sm-11,
-    //.col-md-11,
-    //.col-lg-11,
-    //.col-xs-12,
-    //.col-sm-12,
-    //.col-md-12,
-    //.col-lg-12 {
-    //    position: relative;
-    //    min-height: 1px;
-    //    padding-right: 15px;
-    //    padding-left: 15px;
-    //}
-    //.col-xs-1,
-    //.col-xs-2,
-    //.col-xs-3,
-    //.col-xs-4,
-    //.col-xs-5,
-    //.col-xs-6,
-    //.col-xs-7,
-    //.col-xs-8,
-    //.col-xs-9,
-    //.col-xs-10,
-    //.col-xs-11,
-    //.col-xs-12 {
-    //    float: left;
-    //}
-    //.col-xs-12 {
-    //    width: 100%;
-    //}
-    //.col-xs-11 {
-    //    width: 91.66666667%;
-    //}
-    //.col-xs-10 {
-    //    width: 83.33333333%;
-    //}
-    //.col-xs-9 {
-    //    width: 75%;
-    //}
-    //.col-xs-8 {
-    //    width: 66.66666667%;
-    //}
-    //.col-xs-7 {
-    //    width: 58.33333333%;
-    //}
-    //.col-xs-6 {
-    //    width: 50%;
-    //}
-    //.col-xs-5 {
-    //    width: 41.66666667%;
-    //}
-    //.col-xs-4 {
-    //    width: 33.33333333%;
-    //}
-    //.col-xs-3 {
-    //    width: 25%;
-    //}
-    //.col-xs-2 {
-    //    width: 16.66666667%;
-    //}
-    //.col-xs-1 {
-    //    width: 8.33333333%;
-    //}
-    //.col-xs-pull-12 {
-    //    right: 100%;
-    //}
-    //.col-xs-pull-11 {
-    //    right: 91.66666667%;
-    //}
-    //.col-xs-pull-10 {
-    //    right: 83.33333333%;
-    //}
-    //.col-xs-pull-9 {
-    //    right: 75%;
-    //}
-    //.col-xs-pull-8 {
-    //    right: 66.66666667%;
-    //}
-    //.col-xs-pull-7 {
-    //    right: 58.33333333%;
-    //}
-    //.col-xs-pull-6 {
-    //    right: 50%;
-    //}
-    //.col-xs-pull-5 {
-    //    right: 41.66666667%;
-    //}
-    //.col-xs-pull-4 {
-    //    right: 33.33333333%;
-    //}
-    //.col-xs-pull-3 {
-    //    right: 25%;
-    //}
-    //.col-xs-pull-2 {
-    //    right: 16.66666667%;
-    //}
-    //.col-xs-pull-1 {
-    //    right: 8.33333333%;
-    //}
-    //.col-xs-pull-0 {
-    //    right: auto;
-    //}
-    //.col-xs-push-12 {
-    //    left: 100%;
-    //}
-    //.col-xs-push-11 {
-    //    left: 91.66666667%;
-    //}
-    //.col-xs-push-10 {
-    //    left: 83.33333333%;
-    //}
-    //.col-xs-push-9 {
-    //    left: 75%;
-    //}
-    //.col-xs-push-8 {
-    //    left: 66.66666667%;
-    //}
-    //.col-xs-push-7 {
-    //    left: 58.33333333%;
-    //}
-    //.col-xs-push-6 {
-    //    left: 50%;
-    //}
-    //.col-xs-push-5 {
-    //    left: 41.66666667%;
-    //}
-    //.col-xs-push-4 {
-    //    left: 33.33333333%;
-    //}
-    //.col-xs-push-3 {
-    //    left: 25%;
-    //}
-    //.col-xs-push-2 {
-    //    left: 16.66666667%;
-    //}
-    //.col-xs-push-1 {
-    //    left: 8.33333333%;
-    //}
-    //.col-xs-push-0 {
-    //    left: auto;
-    //}
-    //.col-xs-offset-12 {
-    //    margin-left: 100%;
-    //}
-    //.col-xs-offset-11 {
-    //    margin-left: 91.66666667%;
-    //}
-    //.col-xs-offset-10 {
-    //    margin-left: 83.33333333%;
-    //}
-    //.col-xs-offset-9 {
-    //    margin-left: 75%;
-    //}
-    //.col-xs-offset-8 {
-    //    margin-left: 66.66666667%;
-    //}
-    //.col-xs-offset-7 {
-    //    margin-left: 58.33333333%;
-    //}
-    //.col-xs-offset-6 {
-    //    margin-left: 50%;
-    //}
-    //.col-xs-offset-5 {
-    //    margin-left: 41.66666667%;
-    //}
-    //.col-xs-offset-4 {
-    //    margin-left: 33.33333333%;
-    //}
-    //.col-xs-offset-3 {
-    //    margin-left: 25%;
-    //}
-    //.col-xs-offset-2 {
-    //    margin-left: 16.66666667%;
-    //}
-    //.col-xs-offset-1 {
-    //    margin-left: 8.33333333%;
-    //}
-    //.col-xs-offset-0 {
-    //    margin-left: 0;
-    //}
-    //@media (min-width: 768px) {
-    //    .col-sm-1,
-    //    .col-sm-2,
-    //    .col-sm-3,
-    //    .col-sm-4,
-    //    .col-sm-5,
-    //    .col-sm-6,
-    //    .col-sm-7,
-    //    .col-sm-8,
-    //    .col-sm-9,
-    //    .col-sm-10,
-    //    .col-sm-11,
-    //    .col-sm-12 {
-    //        float: left;
-    //    }
-    //    .col-sm-12 {
-    //        width: 100%;
-    //    }
-    //    .col-sm-11 {
-    //        width: 91.66666667%;
-    //    }
-    //    .col-sm-10 {
-    //        width: 83.33333333%;
-    //    }
-    //    .col-sm-9 {
-    //        width: 75%;
-    //    }
-    //    .col-sm-8 {
-    //        width: 66.66666667%;
-    //    }
-    //    .col-sm-7 {
-    //        width: 58.33333333%;
-    //    }
-    //    .col-sm-6 {
-    //        width: 50%;
-    //    }
-    //    .col-sm-5 {
-    //        width: 41.66666667%;
-    //    }
-    //    .col-sm-4 {
-    //        width: 33.33333333%;
-    //    }
-    //    .col-sm-3 {
-    //        width: 25%;
-    //    }
-    //    .col-sm-2 {
-    //        width: 16.66666667%;
-    //    }
-    //    .col-sm-1 {
-    //        width: 8.33333333%;
-    //    }
-    //    .col-sm-pull-12 {
-    //        right: 100%;
-    //    }
-    //    .col-sm-pull-11 {
-    //        right: 91.66666667%;
-    //    }
-    //    .col-sm-pull-10 {
-    //        right: 83.33333333%;
-    //    }
-    //    .col-sm-pull-9 {
-    //        right: 75%;
-    //    }
-    //    .col-sm-pull-8 {
-    //        right: 66.66666667%;
-    //    }
-    //    .col-sm-pull-7 {
-    //        right: 58.33333333%;
-    //    }
-    //    .col-sm-pull-6 {
-    //        right: 50%;
-    //    }
-    //    .col-sm-pull-5 {
-    //        right: 41.66666667%;
-    //    }
-    //    .col-sm-pull-4 {
-    //        right: 33.33333333%;
-    //    }
-    //    .col-sm-pull-3 {
-    //        right: 25%;
-    //    }
-    //    .col-sm-pull-2 {
-    //        right: 16.66666667%;
-    //    }
-    //    .col-sm-pull-1 {
-    //        right: 8.33333333%;
-    //    }
-    //    .col-sm-pull-0 {
-    //        right: auto;
-    //    }
-    //    .col-sm-push-12 {
-    //        left: 100%;
-    //    }
-    //    .col-sm-push-11 {
-    //        left: 91.66666667%;
-    //    }
-    //    .col-sm-push-10 {
-    //        left: 83.33333333%;
-    //    }
-    //    .col-sm-push-9 {
-    //        left: 75%;
-    //    }
-    //    .col-sm-push-8 {
-    //        left: 66.66666667%;
-    //    }
-    //    .col-sm-push-7 {
-    //        left: 58.33333333%;
-    //    }
-    //    .col-sm-push-6 {
-    //        left: 50%;
-    //    }
-    //    .col-sm-push-5 {
-    //        left: 41.66666667%;
-    //    }
-    //    .col-sm-push-4 {
-    //        left: 33.33333333%;
-    //    }
-    //    .col-sm-push-3 {
-    //        left: 25%;
-    //    }
-    //    .col-sm-push-2 {
-    //        left: 16.66666667%;
-    //    }
-    //    .col-sm-push-1 {
-    //        left: 8.33333333%;
-    //    }
-    //    .col-sm-push-0 {
-    //        left: auto;
-    //    }
-    //    .col-sm-offset-12 {
-    //        margin-left: 100%;
-    //    }
-    //    .col-sm-offset-11 {
-    //        margin-left: 91.66666667%;
-    //    }
-    //    .col-sm-offset-10 {
-    //        margin-left: 83.33333333%;
-    //    }
-    //    .col-sm-offset-9 {
-    //        margin-left: 75%;
-    //    }
-    //    .col-sm-offset-8 {
-    //        margin-left: 66.66666667%;
-    //    }
-    //    .col-sm-offset-7 {
-    //        margin-left: 58.33333333%;
-    //    }
-    //    .col-sm-offset-6 {
-    //        margin-left: 50%;
-    //    }
-    //    .col-sm-offset-5 {
-    //        margin-left: 41.66666667%;
-    //    }
-    //    .col-sm-offset-4 {
-    //        margin-left: 33.33333333%;
-    //    }
-    //    .col-sm-offset-3 {
-    //        margin-left: 25%;
-    //    }
-    //    .col-sm-offset-2 {
-    //        margin-left: 16.66666667%;
-    //    }
-    //    .col-sm-offset-1 {
-    //        margin-left: 8.33333333%;
-    //    }
-    //    .col-sm-offset-0 {
-    //        margin-left: 0;
-    //    }
-    //}
-    //@media (min-width: 992px) {
-    //    .col-md-1,
-    //    .col-md-2,
-    //    .col-md-3,
-    //    .col-md-4,
-    //    .col-md-5,
-    //    .col-md-6,
-    //    .col-md-7,
-    //    .col-md-8,
-    //    .col-md-9,
-    //    .col-md-10,
-    //    .col-md-11,
-    //    .col-md-12 {
-    //        float: left;
-    //    }
-    //    .col-md-12 {
-    //        width: 100%;
-    //    }
-    //    .col-md-11 {
-    //        width: 91.66666667%;
-    //    }
-    //    .col-md-10 {
-    //        width: 83.33333333%;
-    //    }
-    //    .col-md-9 {
-    //        width: 75%;
-    //    }
-    //    .col-md-8 {
-    //        width: 66.66666667%;
-    //    }
-    //    .col-md-7 {
-    //        width: 58.33333333%;
-    //    }
-    //    .col-md-6 {
-    //        width: 50%;
-    //    }
-    //    .col-md-5 {
-    //        width: 41.66666667%;
-    //    }
-    //    .col-md-4 {
-    //        width: 33.33333333%;
-    //    }
-    //    .col-md-3 {
-    //        width: 25%;
-    //    }
-    //    .col-md-2 {
-    //        width: 16.66666667%;
-    //    }
-    //    .col-md-1 {
-    //        width: 8.33333333%;
-    //    }
-    //    .col-md-pull-12 {
-    //        right: 100%;
-    //    }
-    //    .col-md-pull-11 {
-    //        right: 91.66666667%;
-    //    }
-    //    .col-md-pull-10 {
-    //        right: 83.33333333%;
-    //    }
-    //    .col-md-pull-9 {
-    //        right: 75%;
-    //    }
-    //    .col-md-pull-8 {
-    //        right: 66.66666667%;
-    //    }
-    //    .col-md-pull-7 {
-    //        right: 58.33333333%;
-    //    }
-    //    .col-md-pull-6 {
-    //        right: 50%;
-    //    }
-    //    .col-md-pull-5 {
-    //        right: 41.66666667%;
-    //    }
-    //    .col-md-pull-4 {
-    //        right: 33.33333333%;
-    //    }
-    //    .col-md-pull-3 {
-    //        right: 25%;
-    //    }
-    //    .col-md-pull-2 {
-    //        right: 16.66666667%;
-    //    }
-    //    .col-md-pull-1 {
-    //        right: 8.33333333%;
-    //    }
-    //    .col-md-pull-0 {
-    //        right: auto;
-    //    }
-    //    .col-md-push-12 {
-    //        left: 100%;
-    //    }
-    //    .col-md-push-11 {
-    //        left: 91.66666667%;
-    //    }
-    //    .col-md-push-10 {
-    //        left: 83.33333333%;
-    //    }
-    //    .col-md-push-9 {
-    //        left: 75%;
-    //    }
-    //    .col-md-push-8 {
-    //        left: 66.66666667%;
-    //    }
-    //    .col-md-push-7 {
-    //        left: 58.33333333%;
-    //    }
-    //    .col-md-push-6 {
-    //        left: 50%;
-    //    }
-    //    .col-md-push-5 {
-    //        left: 41.66666667%;
-    //    }
-    //    .col-md-push-4 {
-    //        left: 33.33333333%;
-    //    }
-    //    .col-md-push-3 {
-    //        left: 25%;
-    //    }
-    //    .col-md-push-2 {
-    //        left: 16.66666667%;
-    //    }
-    //    .col-md-push-1 {
-    //        left: 8.33333333%;
-    //    }
-    //    .col-md-push-0 {
-    //        left: auto;
-    //    }
-    //    .col-md-offset-12 {
-    //        margin-left: 100%;
-    //    }
-    //    .col-md-offset-11 {
-    //        margin-left: 91.66666667%;
-    //    }
-    //    .col-md-offset-10 {
-    //        margin-left: 83.33333333%;
-    //    }
-    //    .col-md-offset-9 {
-    //        margin-left: 75%;
-    //    }
-    //    .col-md-offset-8 {
-    //        margin-left: 66.66666667%;
-    //    }
-    //    .col-md-offset-7 {
-    //        margin-left: 58.33333333%;
-    //    }
-    //    .col-md-offset-6 {
-    //        margin-left: 50%;
-    //    }
-    //    .col-md-offset-5 {
-    //        margin-left: 41.66666667%;
-    //    }
-    //    .col-md-offset-4 {
-    //        margin-left: 33.33333333%;
-    //    }
-    //    .col-md-offset-3 {
-    //        margin-left: 25%;
-    //    }
-    //    .col-md-offset-2 {
-    //        margin-left: 16.66666667%;
-    //    }
-    //    .col-md-offset-1 {
-    //        margin-left: 8.33333333%;
-    //    }
-    //    .col-md-offset-0 {
-    //        margin-left: 0;
-    //    }
-    //}
-    //@media (min-width: 1200px) {
-    //    .col-lg-1,
-    //    .col-lg-2,
-    //    .col-lg-3,
-    //    .col-lg-4,
-    //    .col-lg-5,
-    //    .col-lg-6,
-    //    .col-lg-7,
-    //    .col-lg-8,
-    //    .col-lg-9,
-    //    .col-lg-10,
-    //    .col-lg-11,
-    //    .col-lg-12 {
-    //        float: left;
-    //    }
-    //    .col-lg-12 {
-    //        width: 100%;
-    //    }
-    //    .col-lg-11 {
-    //        width: 91.66666667%;
-    //    }
-    //    .col-lg-10 {
-    //        width: 83.33333333%;
-    //    }
-    //    .col-lg-9 {
-    //        width: 75%;
-    //    }
-    //    .col-lg-8 {
-    //        width: 66.66666667%;
-    //    }
-    //    .col-lg-7 {
-    //        width: 58.33333333%;
-    //    }
-    //    .col-lg-6 {
-    //        width: 50%;
-    //    }
-    //    .col-lg-5 {
-    //        width: 41.66666667%;
-    //    }
-    //    .col-lg-4 {
-    //        width: 33.33333333%;
-    //    }
-    //    .col-lg-3 {
-    //        width: 25%;
-    //    }
-    //    .col-lg-2 {
-    //        width: 16.66666667%;
-    //    }
-    //    .col-lg-1 {
-    //        width: 8.33333333%;
-    //    }
-    //    .col-lg-pull-12 {
-    //        right: 100%;
-    //    }
-    //    .col-lg-pull-11 {
-    //        right: 91.66666667%;
-    //    }
-    //    .col-lg-pull-10 {
-    //        right: 83.33333333%;
-    //    }
-    //    .col-lg-pull-9 {
-    //        right: 75%;
-    //    }
-    //    .col-lg-pull-8 {
-    //        right: 66.66666667%;
-    //    }
-    //    .col-lg-pull-7 {
-    //        right: 58.33333333%;
-    //    }
-    //    .col-lg-pull-6 {
-    //        right: 50%;
-    //    }
-    //    .col-lg-pull-5 {
-    //        right: 41.66666667%;
-    //    }
-    //    .col-lg-pull-4 {
-    //        right: 33.33333333%;
-    //    }
-    //    .col-lg-pull-3 {
-    //        right: 25%;
-    //    }
-    //    .col-lg-pull-2 {
-    //        right: 16.66666667%;
-    //    }
-    //    .col-lg-pull-1 {
-    //        right: 8.33333333%;
-    //    }
-    //    .col-lg-pull-0 {
-    //        right: auto;
-    //    }
-    //    .col-lg-push-12 {
-    //        left: 100%;
-    //    }
-    //    .col-lg-push-11 {
-    //        left: 91.66666667%;
-    //    }
-    //    .col-lg-push-10 {
-    //        left: 83.33333333%;
-    //    }
-    //    .col-lg-push-9 {
-    //        left: 75%;
-    //    }
-    //    .col-lg-push-8 {
-    //        left: 66.66666667%;
-    //    }
-    //    .col-lg-push-7 {
-    //        left: 58.33333333%;
-    //    }
-    //    .col-lg-push-6 {
-    //        left: 50%;
-    //    }
-    //    .col-lg-push-5 {
-    //        left: 41.66666667%;
-    //    }
-    //    .col-lg-push-4 {
-    //        left: 33.33333333%;
-    //    }
-    //    .col-lg-push-3 {
-    //        left: 25%;
-    //    }
-    //    .col-lg-push-2 {
-    //        left: 16.66666667%;
-    //    }
-    //    .col-lg-push-1 {
-    //        left: 8.33333333%;
-    //    }
-    //    .col-lg-push-0 {
-    //        left: auto;
-    //    }
-    //    .col-lg-offset-12 {
-    //        margin-left: 100%;
-    //    }
-    //    .col-lg-offset-11 {
-    //        margin-left: 91.66666667%;
-    //    }
-    //    .col-lg-offset-10 {
-    //        margin-left: 83.33333333%;
-    //    }
-    //    .col-lg-offset-9 {
-    //        margin-left: 75%;
-    //    }
-    //    .col-lg-offset-8 {
-    //        margin-left: 66.66666667%;
-    //    }
-    //    .col-lg-offset-7 {
-    //        margin-left: 58.33333333%;
-    //    }
-    //    .col-lg-offset-6 {
-    //        margin-left: 50%;
-    //    }
-    //    .col-lg-offset-5 {
-    //        margin-left: 41.66666667%;
-    //    }
-    //    .col-lg-offset-4 {
-    //        margin-left: 33.33333333%;
-    //    }
-    //    .col-lg-offset-3 {
-    //        margin-left: 25%;
-    //    }
-    //    .col-lg-offset-2 {
-    //        margin-left: 16.66666667%;
-    //    }
-    //    .col-lg-offset-1 {
-    //        margin-left: 8.33333333%;
-    //    }
-    //    .col-lg-offset-0 {
-    //        margin-left: 0;
-    //    }
-    //}
     table {
         background-color: transparent;
     }
@@ -2618,13 +1867,6 @@
     select[size] {
         height: auto;
     }
-    input[type="file"]:focus,
-    input[type="radio"]:focus,
-    input[type="checkbox"]:focus {
-        outline: thin dotted;
-        outline: 5px auto -webkit-focus-ring-color;
-        outline-offset: -2px;
-    }
     output {
         display: block;
         padding-top: 7px;
@@ -3052,10 +2294,6 @@
     .form-horizontal .checkbox {
         min-height: 27px;
     }
-    .form-horizontal .form-group {
-        margin-right: -15px;
-        margin-left: -15px;
-    }
     @media (min-width: 768px) {
         .form-horizontal .control-label {
             padding-top: 7px;
@@ -3097,342 +2335,6 @@
         border: 1px solid transparent;
         border-radius: 4px;
     }
-    .btn:focus,
-    .btn:active:focus,
-    .btn.active:focus,
-    .btn.focus,
-    .btn:active.focus,
-    .btn.active.focus {
-        outline: thin dotted;
-        outline: 5px auto -webkit-focus-ring-color;
-        outline-offset: -2px;
-    }
-    .btn:hover,
-    .btn:focus,
-    .btn.focus {
-        color: #333;
-        text-decoration: none;
-    }
-    .btn:active,
-    .btn.active {
-        background-image: none;
-        outline: 0;
-        -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-        box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-    }
-    .btn.disabled,
-    .btn[disabled],
-    fieldset[disabled] .btn {
-        pointer-events: none;
-        cursor: not-allowed;
-        filter: alpha(opacity=65);
-        -webkit-box-shadow: none;
-        box-shadow: none;
-        opacity: 0.65;
-    }
-    .btn-default {
-        color: #333;
-        background-color: #fff;
-        border-color: #ccc;
-    }
-    .btn-default:hover,
-    .btn-default:focus,
-    .btn-default.focus,
-    .btn-default:active,
-    .btn-default.active,
-    .open > .dropdown-toggle.btn-default {
-        color: #333;
-        background-color: #e6e6e6;
-        border-color: #adadad;
-    }
-    .btn-default:active,
-    .btn-default.active,
-    .open > .dropdown-toggle.btn-default {
-        background-image: none;
-    }
-    .btn-default.disabled,
-    .btn-default[disabled],
-    fieldset[disabled] .btn-default,
-    .btn-default.disabled:hover,
-    .btn-default[disabled]:hover,
-    fieldset[disabled] .btn-default:hover,
-    .btn-default.disabled:focus,
-    .btn-default[disabled]:focus,
-    fieldset[disabled] .btn-default:focus,
-    .btn-default.disabled.focus,
-    .btn-default[disabled].focus,
-    fieldset[disabled] .btn-default.focus,
-    .btn-default.disabled:active,
-    .btn-default[disabled]:active,
-    fieldset[disabled] .btn-default:active,
-    .btn-default.disabled.active,
-    .btn-default[disabled].active,
-    fieldset[disabled] .btn-default.active {
-        background-color: #fff;
-        border-color: #ccc;
-    }
-    .btn-default .badge {
-        color: #fff;
-        background-color: #333;
-    }
-    .btn-primary {
-        color: #fff;
-        background-color: #337ab7;
-        border-color: #2e6da4;
-    }
-    .btn-primary:hover,
-    .btn-primary:focus,
-    .btn-primary.focus,
-    .btn-primary:active,
-    .btn-primary.active,
-    .open > .dropdown-toggle.btn-primary {
-        color: #fff;
-        background-color: #286090;
-        border-color: #204d74;
-    }
-    .btn-primary:active,
-    .btn-primary.active,
-    .open > .dropdown-toggle.btn-primary {
-        background-image: none;
-    }
-    .btn-primary.disabled,
-    .btn-primary[disabled],
-    fieldset[disabled] .btn-primary,
-    .btn-primary.disabled:hover,
-    .btn-primary[disabled]:hover,
-    fieldset[disabled] .btn-primary:hover,
-    .btn-primary.disabled:focus,
-    .btn-primary[disabled]:focus,
-    fieldset[disabled] .btn-primary:focus,
-    .btn-primary.disabled.focus,
-    .btn-primary[disabled].focus,
-    fieldset[disabled] .btn-primary.focus,
-    .btn-primary.disabled:active,
-    .btn-primary[disabled]:active,
-    fieldset[disabled] .btn-primary:active,
-    .btn-primary.disabled.active,
-    .btn-primary[disabled].active,
-    fieldset[disabled] .btn-primary.active {
-        background-color: #337ab7;
-        border-color: #2e6da4;
-    }
-    .btn-primary .badge {
-        color: #337ab7;
-        background-color: #fff;
-    }
-    .btn-success {
-        color: #fff;
-        background-color: #5cb85c;
-        border-color: #4cae4c;
-    }
-    .btn-success:hover,
-    .btn-success:focus,
-    .btn-success.focus,
-    .btn-success:active,
-    .btn-success.active,
-    .open > .dropdown-toggle.btn-success {
-        color: #fff;
-        background-color: #449d44;
-        border-color: #398439;
-    }
-    .btn-success:active,
-    .btn-success.active,
-    .open > .dropdown-toggle.btn-success {
-        background-image: none;
-    }
-    .btn-success.disabled,
-    .btn-success[disabled],
-    fieldset[disabled] .btn-success,
-    .btn-success.disabled:hover,
-    .btn-success[disabled]:hover,
-    fieldset[disabled] .btn-success:hover,
-    .btn-success.disabled:focus,
-    .btn-success[disabled]:focus,
-    fieldset[disabled] .btn-success:focus,
-    .btn-success.disabled.focus,
-    .btn-success[disabled].focus,
-    fieldset[disabled] .btn-success.focus,
-    .btn-success.disabled:active,
-    .btn-success[disabled]:active,
-    fieldset[disabled] .btn-success:active,
-    .btn-success.disabled.active,
-    .btn-success[disabled].active,
-    fieldset[disabled] .btn-success.active {
-        background-color: #5cb85c;
-        border-color: #4cae4c;
-    }
-    .btn-success .badge {
-        color: #5cb85c;
-        background-color: #fff;
-    }
-    .btn-info {
-        color: #fff;
-        background-color: #5bc0de;
-        border-color: #46b8da;
-    }
-    .btn-info:hover,
-    .btn-info:focus,
-    .btn-info.focus,
-    .btn-info:active,
-    .btn-info.active,
-    .open > .dropdown-toggle.btn-info {
-        color: #fff;
-        background-color: #31b0d5;
-        border-color: #269abc;
-    }
-    .btn-info:active,
-    .btn-info.active,
-    .open > .dropdown-toggle.btn-info {
-        background-image: none;
-    }
-    .btn-info.disabled,
-    .btn-info[disabled],
-    fieldset[disabled] .btn-info,
-    .btn-info.disabled:hover,
-    .btn-info[disabled]:hover,
-    fieldset[disabled] .btn-info:hover,
-    .btn-info.disabled:focus,
-    .btn-info[disabled]:focus,
-    fieldset[disabled] .btn-info:focus,
-    .btn-info.disabled.focus,
-    .btn-info[disabled].focus,
-    fieldset[disabled] .btn-info.focus,
-    .btn-info.disabled:active,
-    .btn-info[disabled]:active,
-    fieldset[disabled] .btn-info:active,
-    .btn-info.disabled.active,
-    .btn-info[disabled].active,
-    fieldset[disabled] .btn-info.active {
-        background-color: #5bc0de;
-        border-color: #46b8da;
-    }
-    .btn-info .badge {
-        color: #5bc0de;
-        background-color: #fff;
-    }
-    .btn-warning {
-        color: #fff;
-        background-color: #f0ad4e;
-        border-color: #eea236;
-    }
-    .btn-warning:hover,
-    .btn-warning:focus,
-    .btn-warning.focus,
-    .btn-warning:active,
-    .btn-warning.active,
-    .open > .dropdown-toggle.btn-warning {
-        color: #fff;
-        background-color: #ec971f;
-        border-color: #d58512;
-    }
-    .btn-warning:active,
-    .btn-warning.active,
-    .open > .dropdown-toggle.btn-warning {
-        background-image: none;
-    }
-    .btn-warning.disabled,
-    .btn-warning[disabled],
-    fieldset[disabled] .btn-warning,
-    .btn-warning.disabled:hover,
-    .btn-warning[disabled]:hover,
-    fieldset[disabled] .btn-warning:hover,
-    .btn-warning.disabled:focus,
-    .btn-warning[disabled]:focus,
-    fieldset[disabled] .btn-warning:focus,
-    .btn-warning.disabled.focus,
-    .btn-warning[disabled].focus,
-    fieldset[disabled] .btn-warning.focus,
-    .btn-warning.disabled:active,
-    .btn-warning[disabled]:active,
-    fieldset[disabled] .btn-warning:active,
-    .btn-warning.disabled.active,
-    .btn-warning[disabled].active,
-    fieldset[disabled] .btn-warning.active {
-        background-color: #f0ad4e;
-        border-color: #eea236;
-    }
-    .btn-warning .badge {
-        color: #f0ad4e;
-        background-color: #fff;
-    }
-    .btn-danger {
-        color: #fff;
-        background-color: #d9534f;
-        border-color: #d43f3a;
-    }
-    .btn-danger:hover,
-    .btn-danger:focus,
-    .btn-danger.focus,
-    .btn-danger:active,
-    .btn-danger.active,
-    .open > .dropdown-toggle.btn-danger {
-        color: #fff;
-        background-color: #c9302c;
-        border-color: #ac2925;
-    }
-    .btn-danger:active,
-    .btn-danger.active,
-    .open > .dropdown-toggle.btn-danger {
-        background-image: none;
-    }
-    .btn-danger.disabled,
-    .btn-danger[disabled],
-    fieldset[disabled] .btn-danger,
-    .btn-danger.disabled:hover,
-    .btn-danger[disabled]:hover,
-    fieldset[disabled] .btn-danger:hover,
-    .btn-danger.disabled:focus,
-    .btn-danger[disabled]:focus,
-    fieldset[disabled] .btn-danger:focus,
-    .btn-danger.disabled.focus,
-    .btn-danger[disabled].focus,
-    fieldset[disabled] .btn-danger.focus,
-    .btn-danger.disabled:active,
-    .btn-danger[disabled]:active,
-    fieldset[disabled] .btn-danger:active,
-    .btn-danger.disabled.active,
-    .btn-danger[disabled].active,
-    fieldset[disabled] .btn-danger.active {
-        background-color: #d9534f;
-        border-color: #d43f3a;
-    }
-    .btn-danger .badge {
-        color: #d9534f;
-        background-color: #fff;
-    }
-    .btn-link {
-        font-weight: normal;
-        color: #337ab7;
-        border-radius: 0;
-    }
-    .btn-link,
-    .btn-link:active,
-    .btn-link.active,
-    .btn-link[disabled],
-    fieldset[disabled] .btn-link {
-        background-color: transparent;
-        -webkit-box-shadow: none;
-        box-shadow: none;
-    }
-    .btn-link,
-    .btn-link:hover,
-    .btn-link:focus,
-    .btn-link:active {
-        border-color: transparent;
-    }
-    .btn-link:hover,
-    .btn-link:focus {
-        color: #23527c;
-        text-decoration: underline;
-        background-color: transparent;
-    }
-    .btn-link[disabled]:hover,
-    fieldset[disabled] .btn-link:hover,
-    .btn-link[disabled]:focus,
-    fieldset[disabled] .btn-link:focus {
-        color: #777;
-        text-decoration: none;
-    }
     .btn-lg,
     .btn-group-lg > .btn {
         padding: 10px 16px;
@@ -4217,22 +3119,22 @@
             max-height: 200px;
         }
     }
-    .container > .navbar-header,
-    .container-fluid > .navbar-header,
-    .container > .navbar-collapse,
-    .container-fluid > .navbar-collapse {
-        margin-right: -15px;
-        margin-left: -15px;
-    }
-    @media (min-width: 768px) {
-        .container > .navbar-header,
-        .container-fluid > .navbar-header,
-        .container > .navbar-collapse,
-        .container-fluid > .navbar-collapse {
-            margin-right: 0;
-            margin-left: 0;
-        }
-    }
+    // .container > .navbar-header,
+    // .container-fluid > .navbar-header,
+    // .container > .navbar-collapse,
+    // .container-fluid > .navbar-collapse {
+    //     margin-right: -15px;
+    //     margin-left: -15px;
+    // }
+    // @media (min-width: 768px) {
+    //     .container > .navbar-header,
+    //     .container-fluid > .navbar-header,
+    //     .container > .navbar-collapse,
+    //     .container-fluid > .navbar-collapse {
+    //         margin-right: 0;
+    //         margin-left: 0;
+    //     }
+    // }
     .navbar-static-top {
         z-index: 1000;
         border-width: 0 0 1px;
@@ -4278,12 +3180,12 @@
     .navbar-brand > img {
         display: block;
     }
-    @media (min-width: 768px) {
-        .navbar > .container .navbar-brand,
-        .navbar > .container-fluid .navbar-brand {
-            margin-left: -15px;
-        }
-    }
+    // @media (min-width: 768px) {
+    //     .navbar > .container .navbar-brand,
+    //     .navbar > .container-fluid .navbar-brand {
+    //         margin-left: -15px;
+    //     }
+    // }
     .navbar-toggle {
         position: relative;
         float: right;
@@ -4963,27 +3865,9 @@
     .jumbotron > hr {
         border-top-color: #d5d5d5;
     }
-    .container .jumbotron,
-    .container-fluid .jumbotron {
-        border-radius: 6px;
-    }
     .jumbotron .container {
         max-width: 100%;
     }
-    @media screen and (min-width: 768px) {
-        .jumbotron {
-            padding: 48px 0;
-        }
-        .container .jumbotron,
-        .container-fluid .jumbotron {
-            padding-right: 60px;
-            padding-left: 60px;
-        }
-        .jumbotron h1,
-        .jumbotron .h1 {
-            font-size: 63px;
-        }
-    }
     .thumbnail {
         display: block;
         padding: 4px;
@@ -6556,7 +5440,7 @@
     .modal-footer:before,
     .modal-footer:after {
         display: table;
-        content: " ";
+        // content: " ";
     }
     .clearfix:after,
     .dl-horizontal dd:after,
diff --git a/Source/themesource/atlas_core/web/core/base/_base.scss b/Source/themesource/atlas_core/web/core/base/_base.scss
index 4d64a016..60f9f0e1 100644
--- a/Source/themesource/atlas_core/web/core/base/_base.scss
+++ b/Source/themesource/atlas_core/web/core/base/_base.scss
@@ -16,28 +16,34 @@
 
     body {
         min-height: 100%;
-        color: $font-color-default;
-        background-color: $bg-color;
-        font-family: $font-family-base;
-        font-size: $font-size-default;
-        font-weight: $font-weight-normal;
-        line-height: $line-height-base;
+        color: var(--font-color-default);
+        background-color: var(--bg-color);
+        font-family: var(--font-family-base);
+        font-size: var(--font-size-default);
+        font-weight: var(--font-weight-normal);
+        line-height: var(--line-height-base);
     }
 
     a {
         transition: 0.25s;
-        color: $link-color;
+        color: var(--link-color);
+        text-decoration: none;
         -webkit-backface-visibility: hidden;
     }
 
     a:hover {
         text-decoration: underline;
-        color: $link-hover-color;
+        color: var(--link-hover-color);
     }
 
     // Address `outline` inconsistency between Chrome and other browsers.
     a:focus {
-        outline: thin dotted;
+        outline: 0;
+    }
+
+    // Improve accessibility when navigating using the keyboard
+    a:focus-visible {
+        @extend .focus-ring !optional;
     }
 
     // Improve readability when focused and also mouse hovered in all browsers
diff --git a/Source/themesource/atlas_core/web/core/base/_card.scss b/Source/themesource/atlas_core/web/core/base/_card.scss
new file mode 100644
index 00000000..1da8c249
--- /dev/null
+++ b/Source/themesource/atlas_core/web/core/base/_card.scss
@@ -0,0 +1,22 @@
+//
+// DISCLAIMER:
+// Do not change this file because it is core styling.
+// Customizing core files will make updating Atlas much more difficult in the future.
+// To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten.
+//
+@mixin card() {
+
+    /* ==========================================================================
+        Cards
+    ========================================================================== */
+    .card {
+        border: var(--card-border);
+        border-radius: var(--card-border-radius);
+        background-color: var(--card-bg);
+        overflow: hidden;
+        position: relative;
+        padding: var(--card-padding);
+        box-shadow: var(--card-shadow);
+        margin-bottom: var(--card-margin-bottom);
+    }
+}
diff --git a/Source/themesource/atlas_core/web/core/base/_flex.scss b/Source/themesource/atlas_core/web/core/base/_flex.scss
index 90eb0e69..aaef7b2e 100644
--- a/Source/themesource/atlas_core/web/core/base/_flex.scss
+++ b/Source/themesource/atlas_core/web/core/base/_flex.scss
@@ -10,55 +10,155 @@
    Flex classes
 ========================================================================== */
 @mixin flex() {
+    :root {
+        --flex-shrink: 0 1 auto;
+        --flex-auto: 1;
+        --flex-grow: 1 0 auto;
+        @for $i from 1 through 12 {
+            --flex-#{$i}: #{$i};
+        }
+        --flex-gap: var(--gutter-size);
+    }
+
     $important-flex-value: if($important-flex, " !important", "");
 
     // Flex layout
     .flexcontainer {
-        display: flex;
-        overflow: hidden;
-        flex: 1;
-        flex-direction: row;
-
-        .flexitem {
-            margin-right: $gutter-size;
-
-            &:last-child {
-                margin-right: 0;
-            }
-        }
-
-        .flexitem-main {
-            overflow: hidden;
-            flex: 1;
-        }
+        display: flex #{$important-flex-value};
+        gap: var(--flex-gap) #{$important-flex-value};
     }
 
     // These classes define the order of the children
     .flex-row {
-        flex-direction: row #{$important-flex-value};
+        @extend .flexcontainer;
+        @extend .row-alignments;
+        flex-flow: row #{$important-flex-value};
+        flex-wrap: wrap;
     }
 
     .flex-column {
+        @extend .flexcontainer;
+        @extend .column-alignments;
         flex-direction: column #{$important-flex-value};
     }
 
     .flex-row-reverse {
+        @extend .flexcontainer;
+        @extend .row-alignments;
         flex-direction: row-reverse #{$important-flex-value};
     }
 
     .flex-column-reverse {
+        @extend .flexcontainer;
+        @extend .column-alignments;
         flex-direction: column-reverse #{$important-flex-value};
     }
 
+    .row-alignments {
+        &.align-x-left {
+            @extend .justify-start;
+        }
+        &.align-x-center {
+            @extend .justify-center;
+        }
+        &.align-x-right {
+            @extend .justify-end;
+        }
+        &.align-x-stretch {
+            @extend .justify-stretch;
+        }
+        &.align-x-between {
+            @extend .justify-between;
+        }
+        &.align-x-around {
+            @extend .justify-around;
+        }
+        &.align-x-evenly {
+            @extend .justify-evenly;
+        }
+        &.align-y-top {
+            @extend .align-children-start;
+        }
+        &.align-y-center {
+            @extend .align-children-center;
+        }
+        &.align-y-bottom {
+            @extend .align-children-end;
+        }
+        &.align-y-stretch {
+            @extend .align-children-stretch;
+        }
+        &.align-y-baseline {
+            @extend .align-children-baseline;
+        }
+    }
+
+    .column-alignments {
+        &.align-x-left {
+            @extend .align-children-start;
+        }
+        &.align-x-center {
+            @extend .align-children-center;
+        }
+        &.align-x-right {
+            @extend .align-children-end;
+        }
+        &.align-x-stretch {
+            @extend .align-children-stretch;
+        }
+        &.align-x-baseline {
+            @extend .align-children-baseline;
+        }
+        &.align-y-top {
+            @extend .justify-start;
+        }
+        &.align-y-center {
+            @extend .justify-center;
+        }
+        &.align-y-bottom {
+            @extend .justify-end;
+        }
+        &.align-y-stretch {
+            @extend .justify-stretch;
+        }
+        &.align-y-between {
+            @extend .justify-between;
+        }
+        &.align-y-around {
+            @extend .justify-around;
+        }
+        &.align-y-evenly {
+            @extend .justify-evenly;
+        }
+    }
+
+    .flex-align-left {
+        align-items: center #{$important-flex-value};
+        justify-content: flex-start #{$important-flex-value};
+    }
+
+    .flex-align-center {
+        align-items: center #{$important-flex-value};
+        justify-content: flex-start #{$important-flex-value};
+    }
+
+    .flex-align-right {
+        align-items: center #{$important-flex-value};
+        justify-content: flex-start #{$important-flex-value};
+    }
+
     .flex-wrap {
+        @extend .flexcontainer;
         flex-wrap: wrap #{$important-flex-value};
     }
 
     .flex-nowrap {
+        @extend .flexcontainer;
         flex-wrap: nowrap #{$important-flex-value};
     }
 
     .flex-wrap-reverse {
+        @extend .flexcontainer;
         flex-wrap: wrap-reverse #{$important-flex-value};
     }
 
@@ -69,32 +169,32 @@
     }
 
     // These classes define the alignment of the children
-    .justify-content-start {
+    .justify-start {
         justify-content: flex-start #{$important-flex-value};
     }
 
-    .justify-content-end {
+    .justify-end {
         justify-content: flex-end #{$important-flex-value};
     }
 
-    .justify-content-center {
+    .justify-center {
         justify-content: center #{$important-flex-value};
     }
 
-    .justify-content-between {
+    .justify-between {
         justify-content: space-between #{$important-flex-value};
     }
 
-    .justify-content-around {
+    .justify-around {
         justify-content: space-around #{$important-flex-value};
     }
 
-    .justify-content-evenly {
+    .justify-evenly {
         // Not Supported in IE11
         justify-content: space-evenly #{$important-flex-value};
     }
 
-    .justify-content-stretch {
+    .justify-stretch {
         justify-content: stretch #{$important-flex-value};
     }
 
@@ -132,6 +232,10 @@
         align-content: center #{$important-flex-value};
     }
 
+    .align-content-baseline {
+        align-content: baseline #{$important-flex-value};
+    }
+
     .align-content-between {
         align-content: space-between #{$important-flex-value};
     }
@@ -169,6 +273,131 @@
         align-self: stretch #{$important-flex-value};
     }
 
+    .flex-width {
+        --flex-gap-parent: var(--flex-gap);
+        $flex-2-columns: calc(50% - var(--flex-gap) / 2);
+        $flex-items-2-columns: calc(50% - var(--flex-gap-parent) / 2);
+        $flex-3-columns: calc(33.33% - 2 * var(--flex-gap) / 3);
+        $flex-items-3-columns: calc(33.33% - 2 * var(--flex-gap-parent) / 3);
+        $flex-4-columns: calc(25% - 3 * var(--flex-gap) / 4);
+        $flex-items-4-columns: calc(25% - 3 * var(--flex-gap-parent) / 4);
+
+        &.flex-small,
+        &.flex-medium,
+        &.flex-large,
+        &.flex-items-small > *,
+        &.flex-items-medium > *,
+        &.flex-items-large > * {
+            flex-basis: 100%;
+            min-width: 0;
+        }
+
+        @media (min-width: $screen-sm) {
+            &.flex-small > {
+                flex-basis: $flex-2-columns;
+                min-width: 240px;
+            }
+            &.flex-items-small > * {
+                flex-basis: $flex-items-2-columns;
+                min-width: 240px;
+            }
+        }
+
+        @media (min-width: $screen-md) {
+            &.flex-small {
+                flex-basis: $flex-2-columns;
+                min-width: 240px;
+            }
+            &.flex-medium {
+                flex-basis: $flex-2-columns;
+                min-width: 300px;
+            }
+            &.flex-large {
+                flex-basis: 100%;
+                min-width: 400px;
+            }
+            &.flex-items-small > * {
+                flex-basis: $flex-items-2-columns;
+                min-width: 240px;
+            }
+            &.flex-items-medium > * {
+                flex-basis: $flex-items-2-columns;
+                min-width: 300px;
+            }
+            &.flex-items-large > * {
+                flex-basis: 100%;
+                min-width: 400px;
+            }
+        }
+
+        @media (min-width: $screen-lg) {
+            &.flex-small {
+                flex-basis: $flex-3-columns;
+                min-width: 240px;
+            }
+            &.flex-medium {
+                flex-basis: $flex-2-columns;
+                min-width: 300px;
+            }
+            &.flex-large {
+                flex-basis: 100%;
+                min-width: 400px;
+            }
+            &.flex-items-small > * {
+                flex-basis: $flex-items-4-columns;
+                min-width: 240px;
+            }
+            &.flex-items-medium > * {
+                flex-basis: $flex-items-2-columns;
+                min-width: 300px;
+            }
+            &.flex-items-large > * {
+                flex-basis: 100%;
+                min-width: 400px;
+            }
+        }
+
+        @media (min-width: $screen-xl) {
+            &.flex-small {
+                flex-basis: $flex-4-columns;
+                min-width: 240px;
+            }
+            &.flex-medium {
+                flex-basis: $flex-3-columns;
+                min-width: 300px;
+            }
+            &.flex-large {
+                flex-basis: $flex-2-columns;
+                min-width: 400px;
+            }
+            &.flex-items-small > * {
+                flex-basis: $flex-items-4-columns;
+                min-width: 240px;
+            }
+            &.flex-items-medium > * {
+                flex-basis: $flex-items-3-columns;
+                min-width: 300px;
+            }
+            &.flex-items-large > * {
+                flex-basis: $flex-items-2-columns;
+                min-width: 400px;
+            }
+        }
+    }
+
+    .flex-items-shrink > * {
+        flex: var(--flex-shrink);
+    }
+    .flex-items-auto > * {
+        flex: var(--flex-auto);
+    }
+    .flex-items-grow > * {
+        flex: var(--flex-grow);
+    }
+    .flex-items-fixed > * {
+        flex: none;
+    }
+
     @include flex-items($number: 12);
 }
 
diff --git a/Source/themesource/atlas_core/web/core/base/_focus-ring.scss b/Source/themesource/atlas_core/web/core/base/_focus-ring.scss
new file mode 100644
index 00000000..35a20c05
--- /dev/null
+++ b/Source/themesource/atlas_core/web/core/base/_focus-ring.scss
@@ -0,0 +1,20 @@
+//
+// DISCLAIMER:
+// Do not change this file because it is core styling.
+// Customizing core files will make updating Atlas much more difficult in the future.
+// To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten.
+//
+/* ==========================================================================
+   focus ring for keyboard tab indicators
+========================================================================== */
+@mixin focus-ring() {
+
+    .topbar-content, .region-bottombar{
+        --focus-outline-offset: 0;
+    }
+
+    .focus-ring {
+        outline: var(--focus-outline);
+        outline-offset: var(--focus-outline-offset);
+    }
+}
\ No newline at end of file
diff --git a/Source/themesource/atlas_core/web/core/base/_login.scss b/Source/themesource/atlas_core/web/core/base/_login.scss
index 70c68b97..c1f72300 100644
--- a/Source/themesource/atlas_core/web/core/base/_login.scss
+++ b/Source/themesource/atlas_core/web/core/base/_login.scss
@@ -63,7 +63,7 @@
         }
 
         .btn {
-            border-radius: $border-radius-default;
+            border-radius: var(--border-radius-default);
         }
 
         // Form label + input
@@ -77,11 +77,11 @@
             .control-label {
                 flex: 4;
                 margin-bottom: 0;
-                font-size: $font-size-default;
+                font-size: var(--font-size-default);
                 font-weight: 500;
                 @media only screen and (max-width: $screen-sm-max) {
                     flex: 1;
-                    margin-bottom: $spacing-small;
+                    margin-bottom: var(--spacing-small);
                 }
             }
 
@@ -102,23 +102,23 @@
 
                     position: absolute;
                     top: 50%;
-                    left: $form-input-padding-x;
+                    left: var(--form-input-padding-x);
                     transform: translateY(-50%);
 
                     &-eye-open:hover,
                     &-eye-close:hover {
                         cursor: pointer;
-                        color: $brand-primary;
+                        color: var(--brand-primary);
                     }
                 }
 
                 .form-control {
-                    padding: $form-input-padding-y $form-input-padding-x $form-input-padding-y 45px;
+                    padding: var(--form-input-padding-y) var(--form-input-padding-x) var(--form-input-padding-y) 45px;
                     width: 100%;
                 }
 
                 .form-control:focus ~ .glyphicon:before {
-                    color: $brand-primary;
+                    color: var(--brand-primary);
                 }
             }
         }
@@ -168,7 +168,7 @@
             height: 100%;
             animation: makePointer 1s ease-out both;
             background: left / cover no-repeat
-                    linear-gradient(to right, rgba($brand-primary, 0.9) 0%, rgba($brand-primary, 0.6) 100%),
+                    linear-gradient(to right, color-mix(in srgb, var(--brand-primary) 90%, transparent) 0%, color-mix(in srgb, var(--brand-primary) 60%, transparent) 100%),
                 left / cover no-repeat url("./resources/work-do-more.jpeg");
             -webkit-clip-path: polygon(0% 0%, 100% 0, 100% 50%, 100% 100%, 0% 100%);
             clip-path: polygon(0% 0%, 100% 0, 100% 50%, 100% 100%, 0% 100%);
diff --git a/Source/themesource/atlas_core/web/core/base/_spacing.scss b/Source/themesource/atlas_core/web/core/base/_spacing.scss
index a53fce2a..593de209 100644
--- a/Source/themesource/atlas_core/web/core/base/_spacing.scss
+++ b/Source/themesource/atlas_core/web/core/base/_spacing.scss
@@ -55,63 +55,63 @@
 
     // Spacing small
     .spacing-inner {
-        padding: $spacing-small #{$important-spacing-value};
+        padding: var(--spacing-small) #{$important-spacing-value};
     }
 
     .spacing-inner-top {
-        padding-top: $spacing-small #{$important-spacing-value};
+        padding-top: var(--spacing-small) #{$important-spacing-value};
     }
 
     .spacing-inner-right {
-        padding-right: $spacing-small #{$important-spacing-value};
+        padding-right: var(--spacing-small) #{$important-spacing-value};
     }
 
     .spacing-inner-bottom {
-        padding-bottom: $spacing-small #{$important-spacing-value};
+        padding-bottom: var(--spacing-small) #{$important-spacing-value};
     }
 
     .spacing-inner-left {
-        padding-left: $spacing-small #{$important-spacing-value};
+        padding-left: var(--spacing-small) #{$important-spacing-value};
     }
 
     .spacing-inner-vertical {
-        padding-top: $spacing-small #{$important-spacing-value};
-        padding-bottom: $spacing-small #{$important-spacing-value};
+        padding-top: var(--spacing-small) #{$important-spacing-value};
+        padding-bottom: var(--spacing-small) #{$important-spacing-value};
     }
 
     .spacing-inner-horizontal {
-        padding-left: $spacing-small #{$important-spacing-value};
-        padding-right: $spacing-small #{$important-spacing-value};
+        padding-left: var(--spacing-small) #{$important-spacing-value};
+        padding-right: var(--spacing-small) #{$important-spacing-value};
     }
 
     .spacing-outer {
-        margin: $spacing-small #{$important-spacing-value};
+        margin: var(--spacing-small) #{$important-spacing-value};
     }
 
     .spacing-outer-top {
-        margin-top: $spacing-small #{$important-spacing-value};
+        margin-top: var(--spacing-small) #{$important-spacing-value};
     }
 
     .spacing-outer-right {
-        margin-right: $spacing-small #{$important-spacing-value};
+        margin-right: var(--spacing-small) #{$important-spacing-value};
     }
 
     .spacing-outer-bottom {
-        margin-bottom: $spacing-small #{$important-spacing-value};
+        margin-bottom: var(--spacing-small) #{$important-spacing-value};
     }
 
     .spacing-outer-left {
-        margin-left: $spacing-small #{$important-spacing-value};
+        margin-left: var(--spacing-small) #{$important-spacing-value};
     }
 
     .spacing-outer-vertical {
-        margin-top: $spacing-small #{$important-spacing-value};
-        margin-bottom: $spacing-small #{$important-spacing-value};
+        margin-top: var(--spacing-small) #{$important-spacing-value};
+        margin-bottom: var(--spacing-small) #{$important-spacing-value};
     }
 
     .spacing-outer-horizontal {
-        margin-left: $spacing-small #{$important-spacing-value};
-        margin-right: $spacing-small #{$important-spacing-value};
+        margin-left: var(--spacing-small) #{$important-spacing-value};
+        margin-right: var(--spacing-small) #{$important-spacing-value};
     }
 
     // Spacing Medium
diff --git a/Source/themesource/atlas_core/web/core/base/mixins/_buttons.scss b/Source/themesource/atlas_core/web/core/base/mixins/_buttons.scss
index 42a9079d..96e50ef4 100644
--- a/Source/themesource/atlas_core/web/core/base/mixins/_buttons.scss
+++ b/Source/themesource/atlas_core/web/core/base/mixins/_buttons.scss
@@ -5,20 +5,25 @@
 // To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten.
 //
 
-@mixin button-variant($color, $background, $border, $hover) {
+@mixin button-variant($color, $background, $border, $hover, $active, $accent) {
     @if not $exclude-button {
         color: $color;
         border-color: $border;
         background-color: $background;
 
         &:hover,
-        &:focus,
-        &:active,
-        &.active,
         .open > &.dropdown-toggle {
             color: $color;
-            border-color: $hover;
             background-color: $hover;
+            border-color: $border;
+            @if $color == var(--btn-default-color) {
+                border-color: $color;
+            }
+        }
+        &:active,
+        &.active,
+        .open > &.dropdown-toggle {
+            background-color: $active;
         }
         &:active,
         &.active,
@@ -31,28 +36,57 @@
         fieldset[disabled] {
             &,
             &:hover,
-            &:focus,
             &:active,
             &.active {
-                border-color: $border;
                 background-color: $background;
             }
         }
+        &.btn-style-icon {
+            @if $color != var(--btn-default-color) {
+                color: $accent;
+                background: color-mix(in srgb, white, $background 15%);
+            }
+
+            &:hover,
+            .open > &.dropdown-toggle {
+                color: $color;
+                background-color: $border;
+                border-color: $border;
+                @if $color == var(--btn-default-color) {
+                    border-color: $color;
+                }
+            }
+            
+            &:active,
+            &.active,
+            .open > &.dropdown-toggle {
+                color: $color;
+                background-color: $active;
+                border-color: $border;
+            }
+        }
+
         // Button bordered
         &.btn-bordered {
             background-color: transparent;
-            @if $color != $btn-default-color {
+            @if $color != var(--btn-default-color) {
                 color: $border;
             }
 
             &:hover,
-            &:focus,
+            .open > &.dropdown-toggle {
+                color: $color;
+                background-color: $border;
+                border-color: $border;
+                @if $color == var(--btn-default-color) {
+                    border-color: $color;
+                }
+            }
             &:active,
             &.active,
             .open > &.dropdown-toggle {
                 color: $color;
-                border-color: $border;
-                background-color: $border;
+                background-color: $active;
             }
         }
         // Button as link
@@ -60,13 +94,13 @@
             text-decoration: none;
             border-color: transparent;
             background-color: transparent;
-            @if $color != $btn-default-color {
+            @if $color != var(--btn-default-color) {
                 color: $background;
             }
 
             &:hover {
-                border-color: $btn-link-bg-hover;
-                background-color: $btn-link-bg-hover;
+                border-color: var(--btn-link-bg-hover);
+                background-color: var(--btn-link-bg-hover);
             }
         }
     }
diff --git a/Source/themesource/atlas_core/web/core/base/mixins/_layout-spacing.scss b/Source/themesource/atlas_core/web/core/base/mixins/_layout-spacing.scss
index 4287d92c..e09b2508 100644
--- a/Source/themesource/atlas_core/web/core/base/mixins/_layout-spacing.scss
+++ b/Source/themesource/atlas_core/web/core/base/mixins/_layout-spacing.scss
@@ -14,78 +14,78 @@
         @if $device==responsive {
             @if $direction==all {
                 @media (max-width: $screen-sm-max) {
-                    #{$type}: #{$m-layout-spacing}#{$suffix};
+                    #{$type}: var(--m-layout-spacing) #{$suffix};
                 }
                 @media (min-width: $screen-md) {
-                    #{$type}: #{$t-layout-spacing}#{$suffix};
+                    #{$type}: var(--t-layout-spacing) #{$suffix};
                 }
                 @media (min-width: $screen-lg) {
-                    #{$type}: #{$layout-spacing}#{$suffix};
+                    #{$type}: var(--layout-spacing) #{$suffix};
                 }
             } @else if $direction==top {
                 @media (max-width: $screen-sm-max) {
-                    #{$type}-top: #{$m-layout-spacing-top}#{$suffix};
+                    #{$type}-top: var(--m-layout-spacing-top) #{$suffix};
                 }
                 @media (min-width: $screen-md) {
-                    #{$type}-top: #{$t-layout-spacing-top}#{$suffix};
+                    #{$type}-top: var(--t-layout-spacing-top) #{$suffix};
                 }
                 @media (min-width: $screen-lg) {
-                    #{$type}-top: #{$layout-spacing-top}#{$suffix};
+                    #{$type}-top: var(--layout-spacing-top) #{$suffix};
                 }
             } @else if $direction==right {
                 @media (max-width: $screen-sm-max) {
-                    #{$type}-right: #{$m-layout-spacing-right}#{$suffix};
+                    #{$type}-right: var(--m-layout-spacing-right) #{$suffix};
                 }
                 @media (min-width: $screen-md) {
-                    #{$type}-right: #{$t-layout-spacing-right}#{$suffix};
+                    #{$type}-right: var(--t-layout-spacing-right) #{$suffix};
                 }
                 @media (min-width: $screen-lg) {
-                    #{$type}-right: #{$layout-spacing-right}#{$suffix};
+                    #{$type}-right: var(--layout-spacing-right) #{$suffix};
                 }
             } @else if $direction==bottom {
                 @media (max-width: $screen-sm-max) {
-                    #{$type}-bottom: #{$m-layout-spacing-bottom}#{$suffix};
+                    #{$type}-bottom: var(--m-layout-spacing-bottom) #{$suffix};
                 }
                 @media (min-width: $screen-md) {
-                    #{$type}-bottom: #{$t-layout-spacing-bottom}#{$suffix};
+                    #{$type}-bottom: var(--t-layout-spacing-bottom) #{$suffix};
                 }
                 @media (min-width: $screen-lg) {
-                    #{$type}-bottom: #{$layout-spacing-bottom}#{$suffix};
+                    #{$type}-bottom: var(--layout-spacing-bottom) #{$suffix};
                 }
             } @else if $direction==left {
                 @media (max-width: $screen-sm-max) {
-                    #{$type}-left: #{$m-layout-spacing-left}#{$suffix};
+                    #{$type}-left: var(--m-layout-spacing-left) #{$suffix};
                 }
                 @media (min-width: $screen-md) {
-                    #{$type}-left: #{$t-layout-spacing-left}#{$suffix};
+                    #{$type}-left: var(--t-layout-spacing-left) #{$suffix};
                 }
                 @media (min-width: $screen-lg) {
-                    #{$type}-left: #{$layout-spacing-left}#{$suffix};
+                    #{$type}-left: var(--layout-spacing-left) #{$suffix};
                 }
             }
         } @else if $device==tablet {
             @if $direction==all {
-                #{$type}: #{$t-layout-spacing}#{$suffix};
+                #{$type}: var(--t-layout-spacing) #{$suffix};
             } @else if $direction==top {
-                #{$type}-top: #{$t-layout-spacing-top}#{$suffix};
+                #{$type}-top: var(--t-layout-spacing-top) #{$suffix};
             } @else if $direction==right {
-                #{$type}-right: #{$t-layout-spacing-right}#{$suffix};
+                #{$type}-right: var(--t-layout-spacing-right) #{$suffix};
             } @else if $direction==bottom {
-                #{$type}-bottom: #{$t-layout-spacing-bottom}#{$suffix};
+                #{$type}-bottom: var(--t-layout-spacing-bottom) #{$suffix};
             } @else if $direction==left {
-                #{$type}-left: #{$t-layout-spacing-left}#{$suffix};
+                #{$type}-left: var(--t-layout-spacing-left) #{$suffix};
             }
         } @else if $device==mobile {
             @if $direction==all {
-                #{$type}: #{$m-layout-spacing}#{$suffix};
+                #{$type}: var(--m-layout-spacing) #{$suffix};
             } @else if $direction==top {
-                #{$type}-top: #{$m-layout-spacing-top}#{$suffix};
+                #{$type}-top: var(--m-layout-spacing-top) #{$suffix};
             } @else if $direction==right {
-                #{$type}-right: #{$m-layout-spacing-right}#{$suffix};
+                #{$type}-right: var(--m-layout-spacing-right) #{$suffix};
             } @else if $direction==bottom {
-                #{$type}-bottom: #{$m-layout-spacing-bottom}#{$suffix};
+                #{$type}-bottom: var(--m-layout-spacing-bottom) #{$suffix};
             } @else if $direction==left {
-                #{$type}-left: #{$m-layout-spacing-left}#{$suffix};
+                #{$type}-left: var(--m-layout-spacing-left) #{$suffix};
             }
         }
     }
diff --git a/Source/themesource/atlas_core/web/core/base/mixins/_spacing.scss b/Source/themesource/atlas_core/web/core/base/mixins/_spacing.scss
index 939de645..7084788f 100644
--- a/Source/themesource/atlas_core/web/core/base/mixins/_spacing.scss
+++ b/Source/themesource/atlas_core/web/core/base/mixins/_spacing.scss
@@ -15,23 +15,23 @@
         }
         @if $direction==all {
             @media (max-width: $screen-sm-max) {
-                #{$type}: #{$m-spacing-large}#{$suffix};
+                #{$type}: var(--m-spacing-large) #{$suffix};
             }
             @media (min-width: $screen-md) {
-                #{$type}: #{$t-spacing-large}#{$suffix};
+                #{$type}: var(--t-spacing-large) #{$suffix};
             }
             @media (min-width: $screen-lg) {
-                #{$type}: #{$spacing-large}#{$suffix};
+                #{$type}: var(--spacing-large) #{$suffix};
             }
         } @else {
             @media (max-width: $screen-sm-max) {
-                #{$type}#{$dash}#{$direction}: #{$m-spacing-large}#{$suffix};
+                #{$type}#{$dash}#{$direction}: var(--m-spacing-large) #{$suffix};
             }
             @media (min-width: $screen-md) {
-                #{$type}#{$dash}#{$direction}: #{$t-spacing-large}#{$suffix};
+                #{$type}#{$dash}#{$direction}: var(--t-spacing-large) #{$suffix};
             }
             @media (min-width: $screen-lg) {
-                #{$type}#{$dash}#{$direction}: #{$spacing-large}#{$suffix};
+                #{$type}#{$dash}#{$direction}: var(--spacing-large) #{$suffix};
             }
         }
     }
@@ -47,23 +47,23 @@
         }
         @if $direction==all {
             @media (max-width: $screen-sm-max) {
-                #{$type}: #{$m-spacing-medium}#{$suffix};
+                #{$type}: var(--m-spacing-medium) #{$suffix};
             }
             @media (min-width: $screen-md) {
-                #{$type}: #{$t-spacing-medium}#{$suffix};
+                #{$type}: var(--t-spacing-medium) #{$suffix};
             }
             @media (min-width: $screen-lg) {
-                #{$type}: #{$spacing-medium}#{$suffix};
+                #{$type}: var(--spacing-medium) #{$suffix};
             }
         } @else {
             @media (max-width: $screen-sm-max) {
-                #{$type}#{$dash}#{$direction}: #{$m-spacing-medium}#{$suffix};
+                #{$type}#{$dash}#{$direction}: var(--m-spacing-medium) #{$suffix};
             }
             @media (min-width: $screen-md) {
-                #{$type}#{$dash}#{$direction}: #{$t-spacing-medium}#{$suffix};
+                #{$type}#{$dash}#{$direction}: var(--t-spacing-medium) #{$suffix};
             }
             @media (min-width: $screen-lg) {
-                #{$type}#{$dash}#{$direction}: #{$spacing-medium}#{$suffix};
+                #{$type}#{$dash}#{$direction}: var(--spacing-medium) #{$suffix};
             }
         }
     }
diff --git a/Source/themesource/atlas_core/web/core/helpers/_accordion.scss b/Source/themesource/atlas_core/web/core/helpers/_accordion.scss
index c13ee7ad..d881b966 100644
--- a/Source/themesource/atlas_core/web/core/helpers/_accordion.scss
+++ b/Source/themesource/atlas_core/web/core/helpers/_accordion.scss
@@ -17,51 +17,51 @@
         .widget-accordion-group {
             &.widget-accordion-brand-primary {
                 @include get-accordion-group-styles(
-                    $accordion-header-primary-bg,
-                    $accordion-header-primary-bg-hover,
-                    $accordion-header-primary-color,
-                    $accordion-header-primary-color,
-                    $accordion-primary-border-color
+                    var(--accordion-header-primary-bg),
+                    var(--accordion-header-primary-bg-hover),
+                    var(--accordion-header-primary-color),
+                    var(--accordion-header-primary-color),
+                    var(--accordion-primary-border-color)
                 );
             }
 
             &.widget-accordion-brand-secondary {
                 @include get-accordion-group-styles(
-                    $accordion-header-secondary-bg,
-                    $accordion-header-secondary-bg-hover,
-                    $accordion-header-secondary-color,
-                    $accordion-header-secondary-color,
-                    $accordion-secondary-border-color
+                    var(--accordion-header-secondary-bg),
+                    var(--accordion-header-secondary-bg-hover),
+                    var(--accordion-header-secondary-color),
+                    var(--accordion-header-secondary-color),
+                    var(--accordion-secondary-border-color)
                 );
             }
 
             &.widget-accordion-brand-success {
                 @include get-accordion-group-styles(
-                    $accordion-header-success-bg,
-                    $accordion-header-success-bg-hover,
-                    $accordion-header-success-color,
-                    $accordion-header-success-color,
-                    $accordion-success-border-color
+                    var(--accordion-header-success-bg),
+                    var(--accordion-header-success-bg-hover),
+                    var(--accordion-header-success-color),
+                    var(--accordion-header-success-color),
+                    var(--accordion-success-border-color)
                 );
             }
 
             &.widget-accordion-brand-warning {
                 @include get-accordion-group-styles(
-                    $accordion-header-warning-bg,
-                    $accordion-header-warning-bg-hover,
-                    $accordion-header-warning-color,
-                    $accordion-header-warning-color,
-                    $accordion-warning-border-color
+                    var(--accordion-header-warning-bg),
+                    var(--accordion-header-warning-bg-hover),
+                    var(--accordion-header-warning-color),
+                    var(--accordion-header-warning-color),
+                    var(--accordion-warning-border-color)
                 );
             }
 
             &.widget-accordion-brand-danger {
                 @include get-accordion-group-styles(
-                    $accordion-header-danger-bg,
-                    $accordion-header-danger-bg-hover,
-                    $accordion-header-danger-color,
-                    $accordion-header-danger-color,
-                    $accordion-danger-border-color
+                    var(--accordion-header-danger-bg),
+                    var(--accordion-header-danger-bg-hover),
+                    var(--accordion-header-danger-color),
+                    var(--accordion-header-danger-color),
+                    var(--accordion-danger-border-color)
                 );
             }
         }
@@ -69,23 +69,23 @@
         &.widget-accordion-preview {
             .widget-accordion-group {
                 &.widget-accordion-brand-primary {
-                    @include get-accordion-preview-group-styles($accordion-header-primary-color);
+                    @include get-accordion-preview-group-styles(var(--accordion-header-primary-color));
                 }
 
                 &.widget-accordion-brand-secondary {
-                    @include get-accordion-preview-group-styles($accordion-header-secondary-color);
+                    @include get-accordion-preview-group-styles(var(--accordion-header-secondary-color));
                 }
 
                 &.widget-accordion-brand-success {
-                    @include get-accordion-preview-group-styles($accordion-header-success-color);
+                    @include get-accordion-preview-group-styles(var(--accordion-header-success-color));
                 }
 
                 &.widget-accordion-brand-warning {
-                    @include get-accordion-preview-group-styles($accordion-header-warning-color);
+                    @include get-accordion-preview-group-styles(var(--accordion-header-warning-color));
                 }
 
                 &.widget-accordion-brand-danger {
-                    @include get-accordion-preview-group-styles($accordion-header-danger-color);
+                    @include get-accordion-preview-group-styles(var(--accordion-header-danger-color));
                 }
             }
         }
@@ -119,19 +119,19 @@
             > .widget-accordion-group:not(:is(.widget-accordion-brand-primary, .widget-accordion-brand-secondary, .widget-accordion-brand-success, .widget-accordion-brand-warning, .widget-accordion-brand-danger)):nth-child(2n
                     + 1) {
                 > .widget-accordion-group-header > .widget-accordion-group-header-button {
-                    background-color: $accordion-bg-striped;
+                    background-color: var(--accordion-bg-striped);
 
                     &.widget-accordion-group-header-button-clickable {
                         &:hover,
                         &:focus,
                         &:active {
-                            background-color: $accordion-bg-striped-hover;
+                            background-color: var(--accordion-bg-striped-hover);
                         }
                     }
                 }
 
                 > .widget-accordion-group-content {
-                    background-color: $accordion-bg-striped;
+                    background-color: var(--accordion-bg-striped);
                 }
             }
         }
@@ -139,11 +139,11 @@
         &.widget-accordion-compact {
             > .widget-accordion-group {
                 > .widget-accordion-group-header > .widget-accordion-group-header-button {
-                    padding: $spacing-smaller $spacing-small;
+                    padding: var(--spacing-smaller) var(--spacing-small);
                 }
 
                 > .widget-accordion-group-content {
-                    padding: $spacing-smaller $spacing-small $spacing-medium $spacing-small;
+                    padding: var(--spacing-smaller) var(--spacing-small) var(--spacing-medium) var(--spacing-small);
                 }
             }
         }
diff --git a/Source/themesource/atlas_core/web/core/helpers/_background.scss b/Source/themesource/atlas_core/web/core/helpers/_background.scss
index 9f757845..70cdac80 100644
--- a/Source/themesource/atlas_core/web/core/helpers/_background.scss
+++ b/Source/themesource/atlas_core/web/core/helpers/_background.scss
@@ -13,176 +13,176 @@
     ========================================================================== */
 
     .background-main {
-        background-color: $bg-color !important;
+        background-color: var(--bg-color);
     }
 
     //Brand variations
 
     .background-primary {
-        background-color: $brand-primary !important;
+        background-color: var(--brand-primary);
     }
 
     .background-primary-darker {
-        background-color: $color-primary-darker !important;
+        background-color: var(--brand-primary-700);
     }
 
     .background-primary.background-dark,
     .background-primary-dark {
-        background-color: $color-primary-dark !important;
+        background-color: var(--brand-primary-600);
     }
 
     .background-primary.background-light,
     .background-primary-light {
-        background-color: $color-primary-light !important;
+        background-color: var(--brand-primary-200);
     }
 
     .background-primary-lighter {
-        background-color: $color-primary-lighter !important;
+        background-color: var(--brand-primary-100);
     }
 
     .background-secondary {
-        background-color: $bg-color-secondary !important;
+        background-color: var(--bg-color-secondary);
     }
 
     .background-secondary.background-light {
-        background-color: $bg-color-secondary !important;
+        background-color: var(--bg-color-secondary);
     }
 
     .background-secondary.background-dark {
-        background-color: $bg-color-secondary !important;
+        background-color: var(--bg-color-secondary);
     }
 
     .background-brand-gradient {
-        background-image: $brand-gradient !important;
+        background-image: var(--brand-gradient);
     }
 
     //Semantic variations
 
     .background-success {
-        background-color: $brand-success !important;
+        background-color: var(--brand-success);
     }
 
     .background-success-darker {
-        background-color: $color-success-darker !important;
+        background-color: var(--brand-success-700);
     }
 
     .background-success.background-dark,
     .background-success-dark {
-        background-color: $color-success-dark !important;
+        background-color: var(--brand-success-600);
     }
 
     .background-success.background-light,
     .background-success-light {
-        background-color: $color-success-light !important;
+        background-color: var(--brand-success-200);
     }
 
     .background-success-lighter {
-        background-color: $color-success-lighter !important;
+        background-color: var(--brand-success-100);
     }
 
     .background-warning {
-        background-color: $brand-warning !important;
+        background-color: var(--brand-warning);
     }
 
     .background-warning-darker {
-        background-color: $color-warning-darker !important;
+        background-color: var(--brand-warning-700);
     }
 
     .background-warning.background-dark,
     .background-warning-dark {
-        background-color: $color-warning-dark !important;
+        background-color: var(--brand-warning-600);
     }
 
     .background-warning.background-light,
     .background-warning-light {
-        background-color: $color-warning-light !important;
+        background-color: var(--brand-warning-200);
     }
 
     .background-warning-lighter {
-        background-color: $color-warning-lighter !important;
+        background-color: var(--brand-warning-100);
     }
 
     .background-danger {
-        background-color: $brand-danger !important;
+        background-color: var(--brand-danger);
     }
 
     .background-danger-darker {
-        background-color: $color-danger-darker !important;
+        background-color: var(--brand-danger-700);
     }
 
     .background-danger.background-dark,
     .background-danger-dark {
-        background-color: $color-danger-dark !important;
+        background-color: var(--brand-danger-600);
     }
 
     .background-danger.background-light,
     .background-danger-light {
-        background-color: $color-danger-light !important;
+        background-color: var(--brand-danger-200);
     }
 
     .background-danger-lighter {
-        background-color: $color-danger-lighter !important;
+        background-color: var(--brand-danger-100);
     }
 
     //Bootstrap variations
 
     .background-default {
-        background-color: $brand-default !important;
+        background-color: var(--brand-default);
     }
 
     .background-default-darker {
-        background-color: $color-default-darker !important;
+        background-color: var(--brand-default-700);
     }
 
     .background-default-dark {
-        background-color: $color-default-dark !important;
+        background-color: var(--brand-default-600);
     }
 
     .background-default-light {
-        background-color: $color-default-light !important;
+        background-color: var(--brand-default-200);
     }
 
     .background-default-lighter {
-        background-color: $color-default-lighter !important;
+        background-color: var(--brand-default-100);
     }
 
     .background-inverse {
-        background-color: $brand-inverse !important;
+        background-color: var(--brand-primay-600);
     }
 
     .background-inverse-darker {
-        background-color: $color-inverse-darker !important;
+        background-color: var(--brand-primay-900);
     }
 
     .background-inverse-dark {
-        background-color: $color-inverse-dark !important;
+        background-color: var(--brand-primary-800);
     }
 
     .background-inverse-light {
-        background-color: $color-inverse-light !important;
+        background-color: var(--brand-primary-400);
     }
 
     .background-inverse-lighter {
-        background-color: $color-inverse-lighter !important;
+        background-color: var(--brand--primary-300);
     }
 
     .background-info {
-        background-color: $brand-info !important;
+        background-color: var(--brand-primary-300);
     }
 
     .background-info-darker {
-        background-color: $color-info-darker !important;
+        background-color: var(--brand-primary-500);
     }
 
     .background-info-dark {
-        background-color: $color-info-dark !important;
+        background-color: var(--brand-primary-400);
     }
 
     .background-info-light {
-        background-color: $color-info-light !important;
+        background-color: var(--brand-primary-100);
     }
 
     .background-info-lighter {
-        background-color: $color-info-lighter !important;
+        background-color: var(--brand-primary-50);
     }
 }
diff --git a/Source/themesource/atlas_core/web/core/helpers/_badge-button.scss b/Source/themesource/atlas_core/web/core/helpers/_badge-button.scss
index f08728dd..687619dd 100644
--- a/Source/themesource/atlas_core/web/core/helpers/_badge-button.scss
+++ b/Source/themesource/atlas_core/web/core/helpers/_badge-button.scss
@@ -16,26 +16,26 @@
     .btn-secondary,
     .btn-default {
         .badge {
-            color: $btn-default-bg;
-            background-color: $btn-primary-bg;
+            color: var(--btn-default-bg);
+            background-color: var(--btn-primary-bg);
         }
     }
 
     .btn-success {
         .badge {
-            color: $btn-success-bg;
+            color: var(--btn-success-bg);
         }
     }
 
     .btn-warning {
         .badge {
-            color: $btn-warning-bg;
+            color: var(--btn-warning-bg);
         }
     }
 
     .btn-danger {
         .badge {
-            color: $btn-danger-bg;
+            color: var(--btn-danger-bg);
         }
     }
 
@@ -43,60 +43,60 @@
 
     .btn-bordered.btn-primary {
         .badge {
-            background: $btn-primary-bg;
-            color: $btn-primary-color;
+            background: var(--btn-primary-bg);
+            color: var(--btn-primary-color);
         }
 
         &:hover,
         &:focus {
             .badge {
-                background-color: $btn-primary-color;
-                color: $btn-primary-bg;
+                background-color: var(--btn-primary-color);
+                color: var(--btn-primary-bg);
             }
         }
     }
 
     .btn-bordered.btn-success {
         .badge {
-            background: $btn-success-bg;
-            color: $btn-success-color;
+            background: var(--btn-success-bg);
+            color: var(--btn-success-color);
         }
 
         &:hover,
         &:focus {
             .badge {
-                background-color: $btn-success-color;
-                color: $btn-success-bg;
+                background-color: var(--btn-success-color);
+                color: var(--btn-success-bg);
             }
         }
     }
 
     .btn-bordered.btn-warning {
         .badge {
-            background: $btn-warning-bg;
-            color: $btn-warning-color;
+            background: var(--btn-warning-bg);
+            color: var(--btn-warning-color);
         }
 
         &:hover,
         &:focus {
             .badge {
-                background-color: $btn-warning-color;
-                color: $btn-warning-bg;
+                background-color: var(--btn-warning-color);
+                color: var(--btn-warning-bg);
             }
         }
     }
 
     .btn-bordered.btn-danger {
         .badge {
-            background: $btn-danger-bg;
-            color: $btn-danger-color;
+            background: var(--btn-danger-bg);
+            color: var(--btn-danger-color);
         }
 
         &:hover,
         &:focus {
             .badge {
-                background-color: $btn-danger-color;
-                color: $btn-danger-bg;
+                background-color: var(--btn-danger-color);
+                color: var(--btn-danger-bg);
             }
         }
     }
diff --git a/Source/themesource/atlas_core/web/core/helpers/_button.scss b/Source/themesource/atlas_core/web/core/helpers/_button.scss
index f8a6f310..41277a4b 100644
--- a/Source/themesource/atlas_core/web/core/helpers/_button.scss
+++ b/Source/themesource/atlas_core/web/core/helpers/_button.scss
@@ -15,47 +15,47 @@
     // Color variations
     .btn,
     .btn-default {
-        @include button-variant($btn-default-color, $btn-default-bg, $btn-default-border-color, $btn-default-bg-hover);
+        @include button-variant(var(--btn-default-color), var(--btn-default-bg), var(--btn-default-border-color), var(--btn-default-bg-hover), var(--btn-default-bg-active), var(--brand-default));
     }
 
     .btn-primary {
-        @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border-color, $btn-primary-bg-hover);
+        @include button-variant(var(--btn-primary-color), var(--btn-primary-bg), var(--btn-primary-border-color), var(--btn-primary-bg-hover), var(--btn-primary-bg-active), var(--brand-primary));
     }
 
     .btn-inverse {
-        @include button-variant($btn-inverse-color, $btn-inverse-bg, $btn-inverse-border-color, $btn-inverse-bg-hover);
+        @include button-variant(var(--btn-inverse-color), var(--btn-inverse-bg), var(--btn-inverse-border-color), var(--btn-inverse-bg-hover), var(--btn-inverse-bg-active), var(--brand-inverse));
     }
 
     .btn-success {
-        @include button-variant($btn-success-color, $btn-success-bg, $btn-success-border-color, $btn-success-bg-hover);
+        @include button-variant(var(--btn-success-color), var(--btn-success-bg), var(--btn-success-border-color), var(--btn-success-bg-hover), var(--btn-success-bg-active), var(--brand-success));
     }
 
     .btn-info {
-        @include button-variant($btn-info-color, $btn-info-bg, $btn-info-border-color, $btn-info-bg-hover);
+        @include button-variant(var(--btn-info-color), var(--btn-info-bg), var(--btn-info-border-color), var(--btn-info-bg-hover), var(--btn-info-bg-active), var(--brand-info));
     }
 
     .btn-warning {
-        @include button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border-color, $btn-warning-bg-hover);
+        @include button-variant(var(--btn-warning-color), var(--btn-warning-bg), var(--btn-warning-border-color), var(--btn-warning-bg-hover), var(--btn-warning-bg-active), var(--brand-warning));
     }
 
     .btn-danger {
-        @include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border-color, $btn-danger-bg-hover);
+        @include button-variant(var(--btn-danger-color), var(--btn-danger-bg), var(--btn-danger-border-color), var(--btn-danger-bg-hover), var(--btn-danger-bg-active), var(--brand-danger));
     }
 
     // Button Sizes
     .btn-lg {
-        font-size: $font-size-large;
+        font-size: var(--font-size-large);
 
         img {
-            height: calc(#{$font-size-small} + 4px);
+            height: calc(var(--font-size-small) + 4px);
         }
     }
 
     .btn-sm {
-        font-size: $font-size-small;
+        font-size: var(--font-size-small);
 
         img {
-            height: calc(#{$font-size-small} + 4px);
+            height: calc(var(--font-size-small) + 4px);
         }
     }
 
@@ -117,10 +117,19 @@
     .btn-icon-only {
         @extend .btn-icon;
         padding: 0;
-        color: $btn-default-icon-color;
+        color: var(--btn-default-icon-color);
         border: none;
     }
 
+    .btn-style-icon {
+        @extend .btn-icon;
+        font-size: x-large;
+        border-radius: 100%;
+        border: none;
+        padding: 12px;
+        display: flex;
+    }
+
     .btn-block {
         display: block;
         width: 100%;
diff --git a/Source/themesource/atlas_core/web/core/helpers/_data-grid.scss b/Source/themesource/atlas_core/web/core/helpers/_data-grid.scss
index f81e3165..38e30656 100644
--- a/Source/themesource/atlas_core/web/core/helpers/_data-grid.scss
+++ b/Source/themesource/atlas_core/web/core/helpers/_data-grid.scss
@@ -25,7 +25,7 @@
                 }
 
                 &:nth-child(odd) td {
-                    background-color: $grid-bg-striped;
+                    background-color: var(--grid-bg-striped);
                 }
             }
         }
@@ -37,12 +37,12 @@
             border: 1px solid;
 
             th {
-                border: 1px solid $grid-border-color;
+                border: 1px solid var(--grid-border-color);
             }
 
             tbody tr {
                 td {
-                    border: 1px solid $grid-border-color;
+                    border: 1px solid var(--grid-border-color);
                 }
             }
         }
@@ -50,7 +50,7 @@
         tfoot {
             > tr > th {
                 border-width: 0;
-                background-color: $grid-footer-bg;
+                background-color: var(--grid-footer-bg);
             }
 
             > tr > td {
@@ -81,11 +81,11 @@
         table {
             tbody tr {
                 &:hover td {
-                    background-color: $grid-bg-hover !important;
+                    background-color: var(--grid-bg-hover) !important;
                 }
 
                 &.selected:hover td {
-                    background-color: $grid-bg-selected-hover !important;
+                    background-color: var(--grid-bg-selected-hover) !important;
                 }
             }
         }
@@ -95,14 +95,14 @@
     .datagrid-lg.mx-datagrid {
         table {
             th {
-                padding: ($grid-padding-top * 2) ($grid-padding-right * 2) ($grid-padding-bottom * 2)
-                    ($grid-padding-left * 2);
+                padding: calc(var(--grid-padding-top) * 2) calc(var(--grid-padding-right) * 2)
+                    calc(var(--grid-padding-bottom) * 2) calc(var(--grid-padding-left) * 2);
             }
 
             tbody tr {
                 td {
-                    padding: ($grid-padding-top * 2) ($grid-padding-right * 2) ($grid-padding-bottom * 2)
-                        ($grid-padding-left * 2);
+                    padding: calc(var(--grid-padding-top) * 2) calc(var(--grid-padding-right) * 2)
+                        calc(var(--grid-padding-bottom) * 2) calc(var(--grid-padding-left) * 2);
                 }
             }
         }
@@ -111,14 +111,14 @@
     .datagrid-sm.mx-datagrid {
         table {
             th {
-                padding: ($grid-padding-top / 2) ($grid-padding-right / 2) ($grid-padding-bottom / 2)
-                    ($grid-padding-left / 2);
+                padding: calc(var(--grid-padding-top) / 2) calc(var(--grid-padding-right) / 2)
+                    calc(var(--grid-padding-bottom) / 2) calc(var(--grid-padding-left) / 2);
             }
 
             tbody tr {
                 td {
-                    padding: ($grid-padding-top / 2) ($grid-padding-right / 2) ($grid-padding-bottom / 2)
-                        ($grid-padding-left/ 2);
+                    padding: calc(var(--grid-padding-top) / 2) calc(var(--grid-padding-right) / 2)
+                        calc(var(--grid-padding-bottom) / 2) calc(var(--grid-padding-left) / 2);
                 }
             }
         }
diff --git a/Source/themesource/atlas_core/web/core/helpers/_group-box.scss b/Source/themesource/atlas_core/web/core/helpers/_group-box.scss
index 889d28c4..6667172c 100644
--- a/Source/themesource/atlas_core/web/core/helpers/_group-box.scss
+++ b/Source/themesource/atlas_core/web/core/helpers/_group-box.scss
@@ -15,47 +15,47 @@
     // Color variations
     .groupbox-secondary,
     .groupbox-default {
-        @include groupbox-variant($groupbox-default-color, $groupbox-default-bg);
+        @include groupbox-variant(var(--groupbox-default-color), var(--groupbox-default-bg));
     }
 
     .groupbox-primary {
-        @include groupbox-variant($groupbox-primary-color, $groupbox-primary-bg);
+        @include groupbox-variant(var(--groupbox-primary-color), var(--groupbox-primary-bg));
     }
 
     // Success appears as green
     .groupbox-success {
-        @include groupbox-variant($groupbox-success-color, $groupbox-success-bg);
+        @include groupbox-variant(var(--groupbox-success-color), var(--groupbox-success-bg));
     }
 
     // Warning appears as orange
     .groupbox-warning {
-        @include groupbox-variant($groupbox-warning-color, $groupbox-warning-bg);
+        @include groupbox-variant(var(--groupbox-warning-color), var(--groupbox-warning-bg));
     }
 
     // Danger and error appear as red
     .groupbox-danger {
-        @include groupbox-variant($groupbox-danger-color, $groupbox-danger-bg);
+        @include groupbox-variant(var(--groupbox-danger-color), var(--groupbox-danger-bg));
     }
 
     .groupbox-transparent {
         > .mx-groupbox-header {
-            padding: $spacing-small * 1.5 0;
-            color: $gray-darker;
+            padding: calc(var(--spacing-small) * 1.5) 0;
+            color: var(--gray-900);
             border-style: none;
             background: transparent;
-            font-weight: $font-weight-semibold;
+            font-weight: var(--font-weight-semibold);
         }
 
         .mx-groupbox-body {
-            padding: $spacing-small 0;
+            padding: var(--spacing-small) 0;
             border-radius: 0;
             border: 0;
-            border-bottom: 1px solid $groupbox-default-bg;
+            border-bottom: 1px solid var(--groupbox-default-bg);
             background-color: transparent;
         }
 
         .mx-groupbox-collapse-icon {
-            color: $brand-primary;
+            color: var(--brand-primary);
         }
     }
 
@@ -64,11 +64,11 @@
         > .mx-groupbox-header,
         > .mx-groupbox-body {
             border: 0;
-            background-color: $callout-primary-bg;
+            background-color: var(--callout-primary-bg);
         }
 
         > .mx-groupbox-header {
-            color: $callout-primary-color;
+            color: var(--callout-primary-color);
         }
 
         .mx-groupbox-header + .mx-groupbox-body {
@@ -79,58 +79,58 @@
     .groupbox-success.groupbox-callout {
         > .mx-groupbox-header,
         > .mx-groupbox-body {
-            background-color: $callout-success-bg;
+            background-color: var(--callout-success-bg);
         }
 
         > .mx-groupbox-header {
-            color: $callout-success-color;
+            color: var(--callout-success-color);
         }
     }
 
     .groupbox-warning.groupbox-callout {
         > .mx-groupbox-header,
         > .mx-groupbox-body {
-            background-color: $callout-warning-bg;
+            background-color: var(--callout-warning-bg);
         }
 
         > .mx-groupbox-header {
-            color: $callout-warning-color;
+            color: var(--callout-warning-color);
         }
     }
 
     .groupbox-danger.groupbox-callout {
         > .mx-groupbox-header,
         > .mx-groupbox-body {
-            background-color: $callout-danger-bg;
+            background-color: var(--callout-danger-bg);
         }
 
         > .mx-groupbox-header {
-            color: $callout-danger-color;
+            color: var(--callout-danger-color);
         }
     }
 
     //Bootstrap variations
 
     .groupbox-info {
-        @include groupbox-variant($groupbox-info-color, $groupbox-info-bg);
+        @include groupbox-variant(var(--groupbox-info-color), var(--groupbox-info-bg));
     }
 
     .groupbox-inverse {
-        @include groupbox-variant($groupbox-inverse-color, $groupbox-inverse-bg);
+        @include groupbox-variant(var(--groupbox-inverse-color), var(--groupbox-inverse-bg));
     }
 
     .groupbox-white {
-        @include groupbox-variant($groupbox-white-color, $groupbox-white-bg);
+        @include groupbox-variant(var(--groupbox-white-color), var(--groupbox-white-bg));
     }
 
     .groupbox-info.groupbox-callout {
         > .mx-groupbox-header,
         > .mx-groupbox-body {
-            background-color: $callout-info-bg;
+            background-color: var(--callout-info-bg);
         }
 
         > .mx-groupbox-header {
-            color: $callout-info-color;
+            color: var(--callout-info-color);
         }
     }
 }
diff --git a/Source/themesource/atlas_core/web/core/helpers/_helper-classes.scss b/Source/themesource/atlas_core/web/core/helpers/_helper-classes.scss
index 8d250342..663bcca4 100644
--- a/Source/themesource/atlas_core/web/core/helpers/_helper-classes.scss
+++ b/Source/themesource/atlas_core/web/core/helpers/_helper-classes.scss
@@ -166,27 +166,32 @@
         justify-content: center #{$important-helpers-value};
     }
 
+    .shadow-none {
+        box-shadow: none;
+    }
+
     .shadow-small {
-        box-shadow: $shadow-small $shadow-color;
+        box-shadow: var(--shadow-small) var(--shadow-color);
         margin-bottom: 5px;
         border-width: 1px #{$important-helpers-value};
         border-style: solid;
-        border-color: $shadow-color-border;
+        border-color: var(--shadow-color-border);
     }
+
     .shadow-medium {
-        box-shadow: $shadow-medium $shadow-color;
+        box-shadow: var(--shadow-medium) var(--shadow-color);
         margin-bottom: 15px;
         border-width: 1px #{$important-helpers-value};
         border-style: solid;
-        border-color: $shadow-color-border;
+        border-color: var(--shadow-color-border);
     }
 
     .shadow-large {
-        box-shadow: $shadow-large $shadow-color;
+        box-shadow: var(--shadow-large) var(--shadow-color);
         margin-bottom: 25px;
         border-width: 1px #{$important-helpers-value};
         border-style: solid;
-        border-color: $shadow-color-border;
+        border-color: var(--shadow-color-border);
     }
 
     // Media
@@ -342,6 +347,38 @@
         }
     }
 
+    @media (min-width: $screen-xl) and (max-width: $screen-xxl) {
+        .hide-xl,
+        .hidden-xl,
+        .d-xl-none {
+            display: none #{$important-helpers-value};
+        }
+        .d-xl-flex {
+            display: flex #{$important-helpers-value};
+        }
+        .d-xl-inline-flex {
+            display: inline-flex #{$important-helpers-value};
+        }
+        .d-xl-inline {
+            display: inline #{$important-helpers-value};
+        }
+        .d-xl-inline-block {
+            display: inline-block #{$important-helpers-value};
+        }
+        .d-xl-block {
+            display: block #{$important-helpers-value};
+        }
+        .d-xl-table {
+            display: table #{$important-helpers-value};
+        }
+        .d-xl-table-row {
+            display: table-row #{$important-helpers-value};
+        }
+        .d-xl-table-cell {
+            display: table-cell #{$important-helpers-value};
+        }
+    }
+
     @media (min-width: $screen-xl) {
         .hide-xl,
         .hidden-xl,
@@ -418,26 +455,26 @@
 
     //Border helpers
     .border {
-        border: 1px solid $border-color-default #{$important-helpers-value};
+        border: var(--border-default) #{$important-helpers-value};
     }
 
     .border-top {
-        border-top: 1px solid $border-color-default #{$important-helpers-value};
+        border-top: var(--border-default) #{$important-helpers-value};
     }
 
     .border-bottom {
-        border-bottom: 1px solid $border-color-default #{$important-helpers-value};
+        border-bottom: var(--border-default) #{$important-helpers-value};
     }
 
     .border-left {
-        border-left: 1px solid $border-color-default #{$important-helpers-value};
+        border-left: var(--border-default) #{$important-helpers-value};
     }
 
     .border-right {
-        border-right: 1px solid $border-color-default #{$important-helpers-value};
+        border-right: var(--border-default) #{$important-helpers-value};
     }
 
     .border-rounded {
-        border-radius: $border-radius-default #{$important-helpers-value};
+        border-radius: var(--border-radius-default) #{$important-helpers-value};
     }
 }
diff --git a/Source/themesource/atlas_core/web/core/helpers/_image.scss b/Source/themesource/atlas_core/web/core/helpers/_image.scss
index 701ec99e..125afed5 100644
--- a/Source/themesource/atlas_core/web/core/helpers/_image.scss
+++ b/Source/themesource/atlas_core/web/core/helpers/_image.scss
@@ -24,10 +24,10 @@
         height: auto;
         padding: 4px;
         transition: all 0.2s ease-in-out;
-        border: 1px solid $brand-default;
+        border: var(--border-default);
         border-radius: 4px;
-        background-color: #ffffff;
-        line-height: $line-height-base;
+        background-color: var(--bg-color-secondary);
+        line-height: var(--line-height-base);
     }
 
     img.img-circle,
diff --git a/Source/themesource/atlas_core/web/core/helpers/_label.scss b/Source/themesource/atlas_core/web/core/helpers/_label.scss
index 02663f05..fdbd6fd2 100644
--- a/Source/themesource/atlas_core/web/core/helpers/_label.scss
+++ b/Source/themesource/atlas_core/web/core/helpers/_label.scss
@@ -16,37 +16,37 @@
     // Color variations
     .label-secondary,
     .label-default {
-        color: $label-default-color;
-        background-color: $label-default-bg;
+        color: var(--label-default-color);
+        background-color: var(--label-default-bg);
     }
 
     .label-primary {
-        color: $label-primary-color;
-        background-color: $label-primary-bg;
+        color: var(--label-primary-color);
+        background-color: var(--label-primary-bg);
     }
 
     .label-success {
-        color: $label-success-color;
-        background-color: $label-success-bg;
+        color: var(--label-success-color);
+        background-color: var(--label-success-bg);
     }
 
     .label-inverse {
-        color: $label-inverse-color;
-        background-color: $label-inverse-bg;
+        color: var(--label-inverse-color);
+        background-color: var(--label-inverse-bg);
     }
 
     .label-info {
-        color: $label-info-color;
-        background-color: $label-info-bg;
+        color: var(--label-info-color);
+        background-color: var(--label-info-bg);
     }
 
     .label-warning {
-        color: $label-warning-color;
-        background-color: $label-warning-bg;
+        color: var(--label-warning-color);
+        background-color: var(--label-warning-bg);
     }
 
     .label-danger {
-        color: $label-danger-color;
-        background-color: $label-danger-bg;
+        color: var(--label-danger-color);
+        background-color: var(--label-danger-bg);
     }
 }
diff --git a/Source/themesource/atlas_core/web/core/helpers/_list-view.scss b/Source/themesource/atlas_core/web/core/helpers/_list-view.scss
index 1fc5d5ff..89c18e83 100644
--- a/Source/themesource/atlas_core/web/core/helpers/_list-view.scss
+++ b/Source/themesource/atlas_core/web/core/helpers/_list-view.scss
@@ -16,14 +16,14 @@
     // List items lined
     .listview-lined.mx-listview {
         & > ul > li {
-            border-top: 1px solid $grid-border-color;
+            border-top: 1px solid var(--grid-border-color);
 
             &:first-child {
-                border-top: 1px solid $grid-border-color;
+                border-top: 1px solid var(--grid-border-color);
             }
 
             &:last-child {
-                border-bottom: 1px solid $grid-border-color;
+                border-bottom: 1px solid var(--grid-border-color);
             }
         }
     }
@@ -31,11 +31,11 @@
     //List items Bordered
     .listview-bordered.mx-listview {
         & > ul > li {
-            border: 1px solid $grid-border-color;
+            border: 1px solid var(--grid-border-color);
             border-top: 0;
 
             &:first-child {
-                border-top: 1px solid $grid-border-color;
+                border-top: 1px solid var(--grid-border-color);
             }
 
             &:last-child {
@@ -46,16 +46,16 @@
     // List items striped
     .listview-striped.mx-listview {
         & > ul > li:nth-child(2n + 1) {
-            background-color: $grid-bg-striped;
+            background-color: var(--grid-bg-striped);
         }
     }
 
     // Items as seperated blocks
     .listview-seperated.mx-listview {
         & > ul > li {
-            margin-bottom: $spacing-medium;
-            border: 1px solid $grid-border-color;
-            border-radius: $border-radius-default;
+            margin-bottom: var(--spacing-medium);
+            border: 1px solid var(--grid-border-color);
+            border-radius: var(--border-radius-default);
         }
     }
 
@@ -93,14 +93,14 @@
             &:hover,
             &:focus,
             &:active {
-                background-color: $grid-bg-hover;
+                background-color: var(--grid-bg-hover);
             }
 
             &.selected {
                 &:hover,
                 &:focus,
                 &:active {
-                    background-color: $grid-bg-selected-hover;
+                    background-color: var(--grid-bg-selected-hover);
                 }
             }
         }
@@ -110,13 +110,13 @@
 
     .listview-sm.mx-listview {
         & > ul > li {
-            padding: $spacing-small;
+            padding: var(--spacing-small);
         }
     }
 
     .listview-lg.mx-listview {
         & > ul > li {
-            padding: $spacing-large;
+            padding: var(--spacing-large);
         }
     }
 
@@ -126,8 +126,8 @@
         & > ul {
             display: flex; // normal a table
             flex-wrap: wrap;
-            margin-right: -1 * $gutter-size;
-            margin-left: -1 * $gutter-size;
+            margin-right: calc(-1 * var(--gutter-size));
+            margin-left: calc(-1 * var(--gutter-size));
 
             &::before,
             &::after {
@@ -141,8 +141,8 @@
                 // bootstrap col
                 position: relative;
                 min-height: 1px;
-                padding-right: $gutter-size;
-                padding-left: $gutter-size;
+                padding-right: var(--gutter-size);
+                padding-left: var(--gutter-size);
                 border: 0;
                 @media (max-width: $screen-md-max) {
                     width: 100% !important;
diff --git a/Source/themesource/atlas_core/web/core/helpers/_navigation-bar.scss b/Source/themesource/atlas_core/web/core/helpers/_navigation-bar.scss
index 533bc872..c887d45c 100644
--- a/Source/themesource/atlas_core/web/core/helpers/_navigation-bar.scss
+++ b/Source/themesource/atlas_core/web/core/helpers/_navigation-bar.scss
@@ -15,47 +15,47 @@
     // When used in topbar
     .region-topbar {
         .mx-navbar {
-            background-color: $navtopbar-bg;
+            background: var(--navtopbar-bg);
             min-height: auto;
             ul.nav {
                 > .mx-navbar-item {
-                    margin-left: $spacing-small;
+                    margin-left: var(--spacing-small);
                 }
                 /* Navigation item */
                 & > li.mx-navbar-item > a {
-                    color: $navtopbar-color;
-                    font-size: $navtopbar-font-size;
+                    color: var(--navtopbar-color);
+                    font-size: var(--navtopbar-font-size);
                     line-height: 1.2;
                     /* Dropdown arrow */
                     .caret {
-                        border-top-color: $navtopbar-color;
-                        border-bottom-color: $navtopbar-color;
+                        border-top-color: var(--navtopbar-color);
+                        border-bottom-color: var(--navtopbar-color);
                     }
                     &:hover,
                     &:focus,
                     &.active {
-                        color: $navtopbar-color-hover;
-                        background-color: $navtopbar-bg-hover;
+                        color: var(--navtopbar-color-hover);
+                        background: var(--navtopbar-bg-hover);
                         .caret {
-                            border-top-color: $navtopbar-color-active;
-                            border-bottom-color: $navtopbar-color-active;
+                            border-top-color: var(--navtopbar-color-active);
+                            border-bottom-color: var(--navtopbar-color-active);
                         }
                     }
                     &.active {
-                        color: $navtopbar-color-active;
-                        background-color: $navtopbar-bg-active;
+                        color: var(--navtopbar-color-active);
+                        background: var(--navtopbar-bg-active);
                     }
 
                     /* Dropdown */
                     .mx-navbar-submenu::before {
-                        border-color: transparent transparent $navtopbar-border-color transparent;
+                        border-color: transparent transparent var(--navtopbar-border-color) transparent;
                     }
 
                     // Image
                     .glyphicon,
                     .mx-icon-lined,
                     .mx-icon-filled {
-                        font-size: $navtopbar-glyph-size;
+                        font-size: var(--navtopbar-glyph-size);
                     }
                 }
 
@@ -66,41 +66,40 @@
                 & > .mx-navbar-item.open > a,
                 & > .mx-navbar-item.open > a:hover,
                 & > .mx-navbar-item.open > a:focus {
-                    color: $navtopbar-color-hover;
-                    background-color: $navtopbar-bg-hover;
+                    color: var(--navtopbar-color-hover);
+                    background: var(--navtopbar-bg-active);
                     .caret {
-                        border-top-color: $navtopbar-color-hover;
-                        border-bottom-color: $navtopbar-color-hover;
+                        border-top-color: var(--navtopbar-color-hover);
+                        border-bottom-color: var(--navtopbar-color-hover);
                     }
                 }
 
                 & > .mx-navbar-item.open .dropdown-menu {
-                    border-radius: $border-radius-default;
-                    background-color: $navtopbar-sub-bg;
-                    padding: $spacing-small $spacing-small 0;
+                    border-radius: var(--navtopbar-border-radius);
+                    background: var(--navtopbar-sub-bg);
+                    padding: var(--spacing-small) var(--spacing-small) 0;
                     margin: 0;
                     border: 0;
                     box-shadow: 0px 2px 2px rgba(194, 196, 201, 0.30354);
                     & > li.mx-navbar-subitem a {
-                        border-radius: $border-radius-default;
-                        color: $navtopbar-color;
-                        font-size: $navtopbar-sub-font-size;
+                        padding: var(--spacing-small);
+                        color: var(--navtopbar-color);
+                        border-radius: var(--navtopbar-border-radius);
+                        margin-bottom: var(--spacing-small);
                         line-height: 1.2;
-                        margin: 0 0 $spacing-small;
-                        padding: $spacing-small;
                         &:hover,
                         &:focus {
-                            color: $navtopbar-color-hover;
-                            background-color: $navtopbar-sub-bg-hover;
+                            color: var(--navtopbar-color-hover);
+                            background: var(--navtopbar-sub-bg-hover);
                         }
                     }
                 }
                 & > .mx-navbar-item.open .dropdown-menu > li.mx-navbar-subitem.active a {
-                    color: $navtopbar-sub-color-active;
-                    background-color: $navtopbar-sub-bg-active;
+                    color: var(--navtopbar-sub-color-activ);
+                    background: var(--navtopbar-sub-bg-active);
                     .caret {
-                        border-top-color: $navtopbar-sub-color-active;
-                        border-bottom-color: $navtopbar-sub-color-active;
+                        border-top-color: var(--navtopbar-sub-color-active);
+                        border-bottom-color: var(--navtopbar-sub-color-active);
                     }
                 }
             }
@@ -108,18 +107,18 @@
                 ul.nav > li.mx-navbar-item > a {
                 }
                 .mx-navbar-item.open .dropdown-menu {
-                    background-color: $navtopbar-sub-bg;
+                    background: var(--navtopbar-sub-bg);
                     & > li.mx-navbar-subitem > a {
-                        color: $navtopbar-sub-color;
-                        font-size: $navtopbar-sub-font-size;
+                        color: var(--navtopbar-sub-color);
+                        font-size: var(--navtopbar-sub-font-size);
                         &:hover,
                         &:focus {
-                            color: $navtopbar-sub-color-hover;
-                            background-color: $navtopbar-sub-bg-hover;
+                            color: var(--navtopbar-sub-color-hover);
+                            background: var(--navtopbar-sub-bg-hover);
                         }
                         &.active {
-                            color: $navtopbar-sub-color-active;
-                            background-color: $navtopbar-sub-bg-active;
+                            color: var(--navtopbar-sub-color-active);
+                            background: var(--navtopbar-sub-bg-active);
                         }
                     }
                 }
@@ -130,43 +129,43 @@
     // When used in sidebar
     .region-sidebar {
         .mx-navbar {
-            background-color: $navsidebar-bg;
+            background: var(--navsidebar-bg);
             ul.nav {
                 /* Navigation item */
                 & > li.mx-navbar-item > a {
-                    color: $navsidebar-color;
-                    font-size: $navsidebar-font-size;
+                    color: var(--navsidebar-color);
+                    font-size: var(--navsidebar-font-size);
 
                     /* Dropdown arrow */
                     .caret {
-                        border-top-color: $navsidebar-color;
-                        border-bottom-color: $navsidebar-color;
+                        border-top-color: var(--navsidebar-color);
+                        border-bottom-color: var(--navsidebar-color);
                     }
                     &:hover,
                     &:focus,
                     &.active {
-                        color: $navsidebar-color-hover;
-                        background-color: $navsidebar-bg-hover;
+                        color: var(--navsidebar-color-hover);
+                        background: var(--navsidebar-bg-hover);
                         .caret {
-                            border-top-color: $navsidebar-color-active;
-                            border-bottom-color: $navsidebar-color-active;
+                            border-top-color: var(--navsidebar-color-active);
+                            border-bottom-color: var(--navsidebar-color-active);
                         }
                     }
                     &.active {
-                        color: $navsidebar-color-active;
-                        background-color: $navsidebar-bg-active;
+                        color: var(--navsidebar-color-active);
+                        background: var(--navsidebar-bg-active);
                     }
 
                     /* Dropdown */
                     .mx-navbar-submenu::before {
-                        border-color: transparent transparent $navsidebar-border-color transparent;
+                        border-color: transparent transparent var(--navsidebar-border-color) transparent;
                     }
 
                     // Image
                     .glyphicon,
                     .mx-icon-lined,
                     .mx-icon-filled {
-                        font-size: $navsidebar-glyph-size;
+                        font-size: var(--navsidebar-glyph-size);
                     }
                 }
 
@@ -177,19 +176,19 @@
                 & > .mx-navbar-item.open > a,
                 & > .mx-navbar-item.open > a:hover,
                 & > .mx-navbar-item.open > a:focus {
-                    color: $navsidebar-color-hover;
-                    background-color: $navsidebar-bg-hover;
+                    color: var(--navsidebar-color-hover);
+                    background: var(--navsidebar-bg-hover);
                     .caret {
-                        border-top-color: $navsidebar-color-hover;
-                        border-bottom-color: $navsidebar-color-hover;
+                        border-top-color: var(--navsidebar-color-hover);
+                        border-bottom-color: var(--navsidebar-color-hover);
                     }
                 }
                 & > .mx-navbar-item.open .dropdown-menu > li.mx-navbar-subitem.active a {
-                    color: $navsidebar-sub-color-active;
-                    background-color: $navsidebar-sub-bg-active;
+                    color: var(--navsidebar-sub-color-active);
+                    background: var(--navsidebar-sub-bg-active);
                     .caret {
-                        border-top-color: $navsidebar-sub-color-active;
-                        border-bottom-color: $navsidebar-sub-color-active;
+                        border-top-color: var(--navsidebar-sub-color-active);
+                        border-bottom-color: var(--navsidebar-sub-color-active);
                     }
                 }
             }
@@ -197,18 +196,18 @@
                 ul.nav > li.mx-navbar-item > a {
                 }
                 .mx-navbar-item.open .dropdown-menu {
-                    background-color: $navtopbar-sub-bg;
+                    background: var(--navtopbar-sub-bg);
                     & > li.mx-navbar-subitem > a {
-                        color: $navsidebar-sub-color;
-                        font-size: $navsidebar-sub-font-size;
+                        color: var(--navsidebar-sub-color);
+                        font-size: var(--navsidebar-sub-font-size);
                         &:hover,
                         &:focus {
-                            color: $navsidebar-sub-color-hover;
-                            background-color: $navsidebar-sub-bg-hover;
+                            color: var(--navsidebar-sub-color-hover);
+                            background: var(--navsidebar-sub-bg-hover);
                         }
                         &.active {
-                            color: $navsidebar-sub-color-active;
-                            background-color: $navsidebar-sub-bg-active;
+                            color: var(--navsidebar-sub-color-active);
+                            background: var(--navsidebar-sub-bg-active);
                         }
                     }
                 }
diff --git a/Source/themesource/atlas_core/web/core/helpers/_navigation-tree.scss b/Source/themesource/atlas_core/web/core/helpers/_navigation-tree.scss
index 9c01ff25..cf19073f 100644
--- a/Source/themesource/atlas_core/web/core/helpers/_navigation-tree.scss
+++ b/Source/themesource/atlas_core/web/core/helpers/_navigation-tree.scss
@@ -15,39 +15,39 @@
     // When used in topbar
     .region-topbar {
         .mx-navigationtree {
-            background-color: $navtopbar-bg;
+            background: var(--navtopbar-bg);
             .navbar-inner > ul {
                 & > li {
                     & > a {
-                        color: $navtopbar-color;
-                        border-color: $navtopbar-border-color;
-                        background-color: $navtopbar-bg;
-                        font-size: $navtopbar-font-size;
+                        color: var(--navtopbar-color);
+                        border-color: var(--navtopbar-border-color);
+                        background: var(--navtopbar-bg);
+                        font-size: var(--navtopbar-font-size);
                         .caret {
-                            border-top-color: $navtopbar-color;
-                            border-bottom-color: $navtopbar-color;
+                            border-top-color: var(--navtopbar-color);
+                            border-bottom-color: var(--navtopbar-color);
                         }
 
                         .glyphicon,
                         .mx-icon-lined,
                         .mx-icon-filled {
-                            font-size: $navtopbar-glyph-size;
+                            font-size: var(--navtopbar-glyph-size);
                         }
                     }
                     a:hover,
-                    a:focus,
-                    a.active {
-                        color: $navtopbar-color-hover;
-                        background-color: $navtopbar-bg-hover;
+                    a:focus {
+                        color: var(--navtopbar-color-hover);
+                        background: var(--navtopbar-bg-hover);
                         .caret {
-                            border-top-color: $navtopbar-color-active;
-                            border-bottom-color: $navtopbar-color-active;
+                            border-top-color: var(--navtopbar-color-hover);
+                            border-bottom-color: var(--navtopbar-color-hover);
                         }
                     }
+                    a:active,
                     a.active {
-                        color: $navtopbar-color-active;
-                        border-left-color: $navtopbar-color-active;
-                        background-color: $navtopbar-bg-active;
+                        color: var(--navtopbar-color-active);
+                        border-left-color: var(--navtopbar-color-active);
+                        background: var(--navtopbar-bg-active);
                     }
                 }
             }
@@ -55,21 +55,21 @@
             /* Sub navigation item specific */
             li.mx-navigationtree-has-items {
                 & > ul {
-                    background-color: $navtopbar-sub-bg;
+                    background: var(--navtopbar-sub-bg);
                     li {
                         a {
-                            color: $navtopbar-sub-color;
-                            background-color: $navtopbar-sub-bg;
-                            font-size: $navtopbar-sub-font-size;
+                            color: var(--navtopbar-sub-color);
+                            background: var(--navtopbar-sub-bg);
+                            font-size: var(--navtopbar-sub-font-size);
                             &:hover,
-                            &:focus,
-                            &.active {
-                                color: $navtopbar-sub-color-hover;
-                                background-color: $navtopbar-sub-bg-hover;
+                            &:focus {
+                                color: var(--navtopbar-sub-color-hover);
+                                background: var(--navtopbar-sub-bg-hover);
                             }
+                            &:active,
                             &.active {
-                                color: $navtopbar-sub-color-active;
-                                background-color: $navtopbar-sub-bg-active;
+                                color: var(--navtopbar-sub-color-active);
+                                background: var(--navtopbar-sub-bg-active);
                             }
                         }
                     }
@@ -81,39 +81,40 @@
     // When used in sidebar
     .region-sidebar {
         .mx-navigationtree {
-            background-color: $navsidebar-bg;
             .navbar-inner > ul {
+                background: transparent;
                 & > li {
                     & > a {
-                        color: $navsidebar-color;
-                        border-color: $navsidebar-border-color;
-                        background-color: $navsidebar-bg;
-                        font-size: $navsidebar-font-size;
+                        color: var(--navsidebar-color);
+                        border-color: var(--navsidebar-border-color);
+                        font-size: var(--navsidebar-font-size);
                         .caret {
-                            border-top-color: $navsidebar-color;
-                            border-bottom-color: $navsidebar-color;
+                            border-top-color: var(--navsidebar-color);
+                            border-bottom-color: var(--navsidebar-color);
+                            margin-left: var(--spacing-small);
+                            transition: transform 0.2s ease-in-out;
                         }
 
                         .glyphicon,
                         .mx-icon-lined,
                         .mx-icon-filled {
-                            font-size: $navsidebar-glyph-size;
+                            font-size: var(--navsidebar-glyph-size);
                         }
                     }
                     a:hover,
-                    a:focus,
-                    a.active {
-                        color: $navsidebar-color-hover;
-                        background-color: $navsidebar-bg-hover;
+                    a:focus {
+                        color: var(--navsidebar-color-hover);
+                        background: var(--navsidebar-bg-hover);
                         .caret {
-                            border-top-color: $navsidebar-color-active;
-                            border-bottom-color: $navsidebar-color-active;
+                            border-top-color: var(--navsidebar-color-hover);
+                            border-bottom-color: var(--navsidebar-color-hover);
                         }
                     }
+                    a:active,
                     a.active {
-                        color: $navsidebar-color-active;
-                        border-left-color: $navsidebar-color-active;
-                        background-color: $navsidebar-bg-active;
+                        color: var(--navsidebar-color-active);
+                        border-left-color: var(--navsidebar-color-active);
+                        background: var(--navsidebar-bg-active);
                     }
                 }
             }
@@ -121,25 +122,42 @@
             /* Sub navigation item specific */
             li.mx-navigationtree-has-items {
                 & > ul {
-                    background-color: $navsidebar-sub-bg;
+                    position: relative;
+                    border-radius: var(--navsidebar-border-radius);
                     li {
                         a {
-                            color: $navsidebar-sub-color;
-                            background-color: $navsidebar-sub-bg;
-                            font-size: $navsidebar-sub-font-size;
+                            border-radius: var(--navsidebar-border-radius);
+                            color: var(--navsidebar-sub-color);
+                            font-size: var(--navsidebar-sub-font-size);
                             &:hover,
-                            &:focus,
-                            &.active {
-                                color: $navsidebar-sub-color-hover;
-                                background-color: $navsidebar-sub-bg-hover;
+                            &:focus {
+                                color: var(--navsidebar-sub-color-hover);
+                                background: var(--navsidebar-sub-bg-hover);
                             }
+                            &:active,
                             &.active {
-                                color: $navsidebar-sub-color-active;
-                                background-color: $navsidebar-sub-bg-active;
+                                color: var(--navsidebar-sub-color-active);
+                                background: var(--navsidebar-sub-bg-active);
                             }
                         }
                     }
                 }
+                &:not(.mx-navigationtree-collapsed) {
+                    .caret {
+                        transform: rotate(180deg);
+                        transition: transform 0.2s ease-in-out;
+                    }
+                }
+            }
+        }
+    }
+    .mx-scrollcontainer:not(.mx-scrollcontainer-open) {
+        .region-sidebar {
+            .mx-navigationtree {
+                li.mx-navigationtree-has-items > ul {
+                    // sub-menu when sidebar is collapsed needs a non-transparent bg
+                    background: var(--navsidebar-sub-bg-collapsed);
+                }
             }
         }
     }
diff --git a/Source/themesource/atlas_core/web/core/helpers/_progress-bar.scss b/Source/themesource/atlas_core/web/core/helpers/_progress-bar.scss
index b461b41b..9daa402a 100644
--- a/Source/themesource/atlas_core/web/core/helpers/_progress-bar.scss
+++ b/Source/themesource/atlas_core/web/core/helpers/_progress-bar.scss
@@ -17,8 +17,8 @@
         width: 100%;
 
         .progress {
-            border-radius: $border-radius-default;
-            background-color: $bg-color;
+            border-radius: var(--border-radius-default);
+            background-color: var(--bg-color);
         }
     }
 
@@ -26,7 +26,7 @@
     .progress-bar-medium .progress-bar {
         height: 16px;
         line-height: 16px;
-        font-size: $font-size-small;
+        font-size: var(--font-size-small);
     }
 
     .progress-bar-small .progress,
@@ -45,7 +45,7 @@
     .progress-bar-large .progress-bar {
         height: 24px;
         line-height: 24px;
-        font-size: $font-size-default;
+        font-size: var(--font-size-default);
     }
 
     .widget-progress-bar-clickable:hover {
@@ -53,27 +53,27 @@
     }
 
     .widget-progress-bar.progress-bar-primary .progress-bar {
-        background-color: $brand-primary;
+        background-color: var(--brand-primary);
     }
 
     .widget-progress-bar.progress-bar-success .progress-bar {
-        background-color: $brand-success;
+        background-color: var(--brand-success);
     }
 
     .widget-progress-bar.progress-bar-warning .progress-bar {
-        background-color: $brand-warning;
+        background-color: var(--brand-warning);
     }
 
     .widget-progress-bar.progress-bar-danger .progress-bar {
-        background-color: $brand-danger;
+        background-color: var(--brand-danger);
     }
 
     .widget-progress-bar-alert.widget-progress-bar-text-contrast .progress-bar {
-        color: $color-danger-darker;
+        color: var(--brand-danger-700);
     }
 
     .widget-progress-bar-text-contrast .progress-bar {
-        color: $font-color-default;
+        color: var(--font-color-default);
     }
 
     .widget-progress-bar-negative {
diff --git a/Source/themesource/atlas_core/web/core/helpers/_progress-circle.scss b/Source/themesource/atlas_core/web/core/helpers/_progress-circle.scss
index 860bad2a..a4b6f8b8 100644
--- a/Source/themesource/atlas_core/web/core/helpers/_progress-circle.scss
+++ b/Source/themesource/atlas_core/web/core/helpers/_progress-circle.scss
@@ -16,41 +16,41 @@
     //== Progress circle and label colors
     .widget-progress-circle-primary {
         .widget-progress-circle-path {
-            stroke: $brand-primary;
+            stroke: var(--brand-primary);
         }
 
         .progressbar-text {
-            color: $brand-primary !important;
+            color: var(--brand-primary) !important;
         }
     }
 
     .widget-progress-circle-success {
         .widget-progress-circle-path {
-            stroke: $brand-success;
+            stroke: var(--brand-success);
         }
 
         .progressbar-text {
-            color: $brand-success !important;
+            color: var(--brand-success) !important;
         }
     }
 
     .widget-progress-circle-warning {
         .widget-progress-circle-path {
-            stroke: $brand-warning;
+            stroke: var(--brand-warning);
         }
 
         .progressbar-text {
-            color: $brand-warning !important;
+            color: var(--brand-warning) !important;
         }
     }
 
     .widget-progress-circle-danger {
         .widget-progress-circle-path {
-            stroke: $brand-danger;
+            stroke: var(--brand-danger);
         }
 
         .progressbar-text {
-            color: $brand-danger !important;
+            color: var(--brand-danger) !important;
         }
     }
 
diff --git a/Source/themesource/atlas_core/web/core/helpers/_range-slider.scss b/Source/themesource/atlas_core/web/core/helpers/_range-slider.scss
index 63bd758c..1ce636c0 100644
--- a/Source/themesource/atlas_core/web/core/helpers/_range-slider.scss
+++ b/Source/themesource/atlas_core/web/core/helpers/_range-slider.scss
@@ -16,18 +16,18 @@
     ========================================================================== */
 
     .widget-range-slider-primary {
-        @include slider-color-variant($brand-primary);
+        @include slider-color-variant(var(--brand-primary));
     }
 
     .widget-range-slider-success {
-        @include slider-color-variant($brand-success);
+        @include slider-color-variant(var(--brand-success));
     }
 
     .widget-range-slider-warning {
-        @include slider-color-variant($brand-warning);
+        @include slider-color-variant(var(--brand-warning));
     }
 
     .widget-range-slider-danger {
-        @include slider-color-variant($brand-danger);
+        @include slider-color-variant(var(--brand-danger));
     }
 }
diff --git a/Source/themesource/atlas_core/web/core/helpers/_rating.scss b/Source/themesource/atlas_core/web/core/helpers/_rating.scss
index f15d2d8e..27207cb7 100644
--- a/Source/themesource/atlas_core/web/core/helpers/_rating.scss
+++ b/Source/themesource/atlas_core/web/core/helpers/_rating.scss
@@ -14,27 +14,27 @@
     ========================================================================== */
 
     .widget-star-rating-full-primary {
-        color: $brand-primary;
+        color: var(--brand-primary);
     }
 
     .widget-star-rating-full-success {
-        color: $brand-success;
+        color: var(--brand-success);
     }
 
     .widget-star-rating-full-info {
-        color: $brand-info;
+        color: var(--brand-primary-300);
     }
 
     .widget-star-rating-full-warning {
-        color: $brand-warning;
+        color: var(--brand-warning);
     }
 
     .widget-star-rating-full-danger {
-        color: $brand-danger;
+        color: var(--brand-danger);
     }
 
     .widget-star-rating-full-inverse {
-        color: $brand-inverse;
+        color: var(--brand-primary-600);
     }
 
     .widget-rating {
diff --git a/Source/themesource/atlas_core/web/core/helpers/_simple-menu-bar.scss b/Source/themesource/atlas_core/web/core/helpers/_simple-menu-bar.scss
index ab46cbfd..f171e915 100644
--- a/Source/themesource/atlas_core/web/core/helpers/_simple-menu-bar.scss
+++ b/Source/themesource/atlas_core/web/core/helpers/_simple-menu-bar.scss
@@ -19,20 +19,20 @@
                 flex: 1;
                 a {
                     flex-direction: column;
-                    padding: $spacing-small $spacing-small $spacing-small/2;
+                    padding: var(--spacing-small) var(--spacing-small) calc(var(--spacing-small) / 2);
                     line-height: normal;
-                    font-size: $font-size-small;
+                    font-size: var(--font-size-small);
                     .glyphicon,
                     .mx-icon-lined,
                     .mx-icon-filled {
                         display: block;
-                        margin: 0 0 $spacing-small/2 0;
-                        font-size: $font-size-large;
+                        margin: 0 0 calc(var(--spacing-small) / 2) 0;
+                        font-size: var(--font-size-large);
                     }
                     img {
                         display: block;
-                        height: $font-size-large;
-                        margin: 0 0 $spacing-small/2 0;
+                        height: var(--font-size-large);
+                        margin: 0 0 calc(var(--spacing-small) / 2) 0;
                     }
                 }
             }
diff --git a/Source/themesource/atlas_core/web/core/helpers/_slider-color-variant.scss b/Source/themesource/atlas_core/web/core/helpers/_slider-color-variant.scss
index ded60164..f3ee2879 100644
--- a/Source/themesource/atlas_core/web/core/helpers/_slider-color-variant.scss
+++ b/Source/themesource/atlas_core/web/core/helpers/_slider-color-variant.scss
@@ -6,12 +6,12 @@
 
         .rc-slider-handle:focus {
             border-color: $color;
-            box-shadow: 0 0 0 5px lighten($color, 25%);
+            box-shadow: 0 0 0 5px color-mix(in srgb, $color, white 25%);
             outline: none;
         }
 
         .rc-slider-handle-click-focused:focus {
-            border-color: lighten($color, 25%);
+            border-color: color-mix(in srgb, $color, white 25%);
             box-shadow: unset;
         }
 
diff --git a/Source/themesource/atlas_core/web/core/helpers/_slider.scss b/Source/themesource/atlas_core/web/core/helpers/_slider.scss
index cc259d2a..721a4898 100644
--- a/Source/themesource/atlas_core/web/core/helpers/_slider.scss
+++ b/Source/themesource/atlas_core/web/core/helpers/_slider.scss
@@ -15,18 +15,18 @@
     ========================================================================== */
 
     .widget-slider-primary {
-        @include slider-color-variant($brand-primary);
+        @include slider-color-variant(var(--brand-primary));
     }
 
     .widget-slider-success {
-        @include slider-color-variant($brand-success);
+        @include slider-color-variant(var(--brand-success));
     }
 
     .widget-slider-warning {
-        @include slider-color-variant($brand-warning);
+        @include slider-color-variant(var(--brand-warning));
     }
 
     .widget-slider-danger {
-        @include slider-color-variant($brand-danger);
+        @include slider-color-variant(var(--brand-danger));
     }
 }
diff --git a/Source/themesource/atlas_core/web/core/helpers/_tab-container.scss b/Source/themesource/atlas_core/web/core/helpers/_tab-container.scss
index e4719d88..39cb5206 100644
--- a/Source/themesource/atlas_core/web/core/helpers/_tab-container.scss
+++ b/Source/themesource/atlas_core/web/core/helpers/_tab-container.scss
@@ -18,18 +18,18 @@
             border: 0;
 
             & > li {
-                margin-bottom: $spacing-small;
+                margin-bottom: var(--spacing-small);
             }
 
             & > li > a {
-                margin-right: $spacing-small;
-                color: $tabs-color;
-                border-radius: $border-radius-default;
-                background-color: $tabs-bg-pills;
+                margin-right: var(--spacing-small);
+                color: var(--tabs-color);
+                border-radius: var(--border-radius-default);
+                background-color: var(--tabs-bg-pills);
 
                 &:hover,
                 &:focus {
-                    background-color: $tabs-bg-hover;
+                    background-color: var(--tabs-bg-hover);
                 }
             }
 
@@ -37,8 +37,8 @@
             & > li.active > a:hover,
             & > li.active > a:focus {
                 color: #ffffff;
-                border-color: $tabs-bg-active;
-                background-color: $tabs-bg-active;
+                border-color: var(--tabs-bg-active);
+                background-color: var(--tabs-bg-active);
             }
         }
     }
@@ -49,18 +49,18 @@
             border-width: 1px;
 
             li {
-                margin-right: $spacing-large;
+                margin-right: var(--spacing-large);
 
                 & > a {
-                    padding: $spacing-medium 0 ($spacing-medium - $tabs-lined-border-width) 0; // border is 3px
-                    color: $tabs-color;
+                    padding: var(--spacing-medium) 0 calc(var(--spacing-medium) - var(--tabs-lined-border-width)) 0; // border is 3px
+                    color: var(--tabs-color);
                     border: 0;
-                    border-bottom: $tabs-lined-border-width solid transparent;
+                    border-bottom: var(--tabs-lined-border-width) solid transparent;
                     border-radius: 0;
 
                     &:hover,
                     &:focus {
-                        color: $tabs-color;
+                        color: var(--tabs-color);
                         border: 0;
                         border-color: transparent;
                         background: transparent;
@@ -70,9 +70,9 @@
                 &.active > a,
                 &.active > a:hover,
                 &.active > a:focus {
-                    color: $tabs-lined-color-active;
+                    color: var(--tabs-lined-color-active);
                     border: 0;
-                    border-bottom: $tabs-lined-border-width solid $tabs-lined-border-color;
+                    border-bottom: var(--tabs-lined-border-width) solid var(--tabs-lined-border-color);
                     background-color: transparent;
                 }
             }
@@ -109,10 +109,10 @@
         }
 
         & > .mx-tabcontainer-content {
-            padding: $spacing-small;
+            padding: var(--spacing-small);
             border-width: 0 1px 1px 1px;
             border-style: solid;
-            border-color: $tabs-border-color;
+            border-color: var(--tabs-border-color);
             background-color: transparent;
         }
     }
@@ -127,12 +127,12 @@
 
             &::before {
                 position: absolute;
-                top: $spacing-medium;
+                top: var(--spacing-medium);
                 display: block;
                 width: 100%;
                 height: 1px;
                 content: "";
-                background-color: $tabs-border-color;
+                background-color: var(--tabs-border-color);
             }
 
             & > li {
@@ -142,16 +142,16 @@
                 text-align: center;
 
                 & > a {
-                    width: calc((#{$spacing-medium} * 2) + 1px);
-                    height: calc((#{$spacing-medium} * 2) + 1px);
+                    width: calc((var(--spacing-medium) * 2) + 1px);
+                    height: calc((var(--spacing-medium) * 2) + 1px);
                     margin: auto;
                     padding: 0;
                     text-align: center;
-                    color: $brand-primary;
-                    border: 1px solid $tabs-border-color;
+                    color: var(--brand-primary);
+                    border: 1px solid var(--tabs-border-color);
                     border-radius: 100%;
-                    background-color: $bg-color;
-                    font-size: $font-size-large;
+                    background-color: var(--bg-color);
+                    font-size: var(--font-size-large);
                     font-weight: bold;
                     display: flex;
                     justify-content: center;
@@ -163,8 +163,8 @@
                     & > a:hover,
                     & > a:focus {
                         color: #ffffff;
-                        border-color: $tabs-bg-active;
-                        background-color: $tabs-bg-active;
+                        border-color: var(--tabs-bg-active);
+                        background-color: var(--tabs-bg-active);
                     }
                 }
             }
diff --git a/Source/themesource/atlas_core/web/core/helpers/_table.scss b/Source/themesource/atlas_core/web/core/helpers/_table.scss
index ce575a45..fba7db69 100644
--- a/Source/themesource/atlas_core/web/core/helpers/_table.scss
+++ b/Source/themesource/atlas_core/web/core/helpers/_table.scss
@@ -22,7 +22,7 @@
                 > td {
                     border-width: 1px 0;
                     border-style: solid;
-                    border-color: $grid-border-color;
+                    border-color: var(--grid-border-color);
                 }
             }
         }
@@ -39,7 +39,7 @@
                 > td {
                     border-width: 1px;
                     border-style: solid;
-                    border-color: $grid-border-color;
+                    border-color: var(--grid-border-color);
                 }
             }
         }
diff --git a/Source/themesource/atlas_core/web/core/helpers/_template-grid.scss b/Source/themesource/atlas_core/web/core/helpers/_template-grid.scss
index 71db23ec..b61012ec 100644
--- a/Source/themesource/atlas_core/web/core/helpers/_template-grid.scss
+++ b/Source/themesource/atlas_core/web/core/helpers/_template-grid.scss
@@ -24,13 +24,13 @@
         .mx-grid-content {
             border-top-width: 2px;
             border-top-style: solid;
-            border-top-color: $grid-border-color;
+            border-top-color: var(--grid-border-color);
         }
 
         .mx-templategrid-item {
-            border-top: 1px solid $grid-border-color;
+            border-top: 1px solid var(--grid-border-color);
             border-right: none;
-            border-bottom: 1px solid $grid-border-color;
+            border-bottom: 1px solid var(--grid-border-color);
             border-left: none;
         }
     }
@@ -76,14 +76,14 @@
     .templategrid-hover.mx-templategrid {
         .mx-templategrid-item {
             &:hover {
-                background-color: $grid-bg-hover !important;
+                background-color: var(--grid-bg-hover) !important;
             }
 
             &.selected {
-                background-color: $grid-bg-selected !important;
+                background-color: var(--grid-bg-selected) !important;
 
                 &:hover {
-                    background-color: $grid-bg-selected-hover !important;
+                    background-color: var(--grid-bg-selected-hover) !important;
                 }
             }
         }
@@ -92,15 +92,15 @@
     // Templategrid Row Sizes
     .templategrid-lg.mx-templategrid {
         .mx-templategrid-item {
-            padding: ($grid-padding-top * 2) ($grid-padding-right * 2) ($grid-padding-bottom * 2)
-                ($grid-padding-left * 2);
+            padding: calc(var(--grid-padding-top) * 2) calc(var(--grid-padding-right) * 2)
+                calc(var(--grid-padding-bottom) * 2) calc(var(--grid-padding-left) * 2);
         }
     }
 
     .templategrid-sm.mx-templategrid {
         .mx-templategrid-item {
-            padding: ($grid-padding-top / 2) ($grid-padding-right / 2) ($grid-padding-bottom / 2)
-                ($grid-padding-left / 2);
+            padding: (var(--grid-padding-top) / 2) (var(--grid-padding-right) / 2) (var(--grid-padding-bottom) / 2)
+                (var(--grid-padding-left) / 2);
         }
     }
 
@@ -113,8 +113,8 @@
 
         .mx-templategrid-row {
             display: block;
-            margin-right: -1 * $gutter-size;
-            margin-left: -1 * $gutter-size;
+            margin-right: calc(-1 * var(--gutter-size));
+            margin-left: calc(-1 * var(--gutter-size));
 
             &::before,
             &::after {
@@ -131,8 +131,8 @@
             display: block;
             float: left;
             min-height: 1px;
-            padding-right: $gutter-size;
-            padding-left: $gutter-size;
+            padding-right: var(--gutter-size);
+            padding-left: var(--gutter-size);
             border: 0;
             @media (max-width: 992px) {
                 width: 100% !important;
diff --git a/Source/themesource/atlas_core/web/core/helpers/_typography.scss b/Source/themesource/atlas_core/web/core/helpers/_typography.scss
index f8c9f20c..f108c9d4 100644
--- a/Source/themesource/atlas_core/web/core/helpers/_typography.scss
+++ b/Source/themesource/atlas_core/web/core/helpers/_typography.scss
@@ -14,36 +14,36 @@
     ========================================================================== */
     // Text size
     .text-small {
-        font-size: $font-size-small !important;
+        font-size: var(--font-size-small);
     }
 
     .text-large {
-        font-size: $font-size-large !important;
+        font-size: var(--font-size-large);
     }
 
     // Text Weights
     .text-light,
     .text-light > *,
     .text-light label {
-        font-weight: $font-weight-light !important;
+        font-weight: var(--font-weight-light);
     }
 
     .text-normal,
     .text-normal > *,
     .text-normal label {
-        font-weight: $font-weight-normal !important;
+        font-weight: var(--font-weight-normal);
     }
 
     .text-semibold,
     .text-semibold > *,
     .text-semibold label {
-        font-weight: $font-weight-semibold !important;
+        font-weight: var(--font-weight-semibold);
     }
 
     .text-bold,
     .text-bold > *,
     .text-bold label {
-        font-weight: $font-weight-bold !important;
+        font-weight: var(--font-weight-bold);
     }
 
     // Color variations
@@ -51,87 +51,87 @@
     .text-secondary:hover,
     .text-default,
     .text-default:hover {
-        color: $font-color-default !important;
+        color: var(--font-color-default);
     }
 
     .text-primary,
     .text-primary:hover {
-        color: $brand-primary !important;
+        color: var(--brand-primary);
     }
 
     .text-info,
     .text-info:hover {
-        color: $brand-info !important;
+        color: var(--brand-primary-300);
     }
 
     .text-success,
     .text-success:hover {
-        color: $brand-success !important;
+        color: var(--brand-success);
     }
 
     .text-warning,
     .text-warning:hover {
-        color: $brand-warning !important;
+        color: var(--brand-warning);
     }
 
     .text-danger,
     .text-danger:hover {
-        color: $brand-danger !important;
+        color: var(--brand-danger);
     }
 
     .text-header {
-        color: $font-color-header !important;
+        color: var(--font-color-header);
     }
 
     .text-detail {
-        color: $font-color-detail !important;
+        color: var(--font-color-detail);
     }
 
     .text-white {
-        color: #ffffff;
+        color: var(--font-color-contrast);
     }
 
     // Alignment options
     .text-left {
-        text-align: left !important;
+        text-align: left;
     }
     .text-center {
-        text-align: center !important;
+        text-align: center;
     }
     .text-right {
-        text-align: right !important;
+        text-align: right;
     }
     .text-justify {
-        text-align: justify !important;
+        text-align: justify;
     }
 
     // Transform options
     .text-lowercase {
-        text-transform: lowercase !important;
+        text-transform: lowercase;
     }
     .text-uppercase {
-        text-transform: uppercase !important;
+        text-transform: uppercase;
     }
     .text-capitalize {
-        text-transform: capitalize !important;
+        text-transform: capitalize;
     }
 
     // Wrap options
     .text-break {
-        word-break: break-all !important;
-        word-break: break-word !important;
-        -webkit-hyphens: auto !important;
-        hyphens: auto !important;
+        word-break: break-all;
+        word-break: break-word;
+        -webkit-hyphens: auto;
+        hyphens: auto;
     }
 
     .text-nowrap {
-        white-space: nowrap !important;
+        white-space: nowrap;
     }
 
     .text-nowrap {
-        overflow: hidden !important;
-        max-width: 100% !important;
-        white-space: nowrap !important;
-        text-overflow: ellipsis !important;
+        overflow: hidden;
+        max-width: 100%;
+        white-space: nowrap;
+        text-overflow: ellipsis;
     }
 }
diff --git a/Source/themesource/atlas_core/web/core/widgets/_accordion.scss b/Source/themesource/atlas_core/web/core/widgets/_accordion.scss
index 79415592..7504ada3 100644
--- a/Source/themesource/atlas_core/web/core/widgets/_accordion.scss
+++ b/Source/themesource/atlas_core/web/core/widgets/_accordion.scss
@@ -15,17 +15,17 @@
     .widget-accordion {
         .widget-accordion-group {
             @include get-accordion-group-styles(
-                $accordion-header-default-bg,
-                $accordion-header-default-bg-hover,
-                $accordion-header-default-color,
-                $brand-primary,
-                $accordion-default-border-color
+                var(--accordion-header-default-bg),
+                var(--accordion-header-default-bg-hover),
+                var(--accordion-header-default-color),
+                var(--brand-primary),
+                var(--accordion-default-border-color)
             );
         }
 
         &.widget-accordion-preview {
             .widget-accordion-group {
-                @include get-accordion-preview-group-styles($accordion-header-default-color);
+                @include get-accordion-preview-group-styles(var(--accordion-header-default-color));
             }
         }
     }
@@ -33,28 +33,28 @@
 
 @mixin get-accordion-group-styles($background-color, $background-color-hover, $color, $color-hover, $border-color) {
     border-color: $border-color;
-    background-color: $bg-color-secondary;
+    background-color: var(--bg-color-secondary);
 
     &:first-child {
-        border-top-left-radius: $border-radius-default;
-        border-top-right-radius: $border-radius-default;
+        border-top-left-radius: var(--border-radius-default);
+        border-top-right-radius: var(--border-radius-default);
 
         > .widget-accordion-group-header > .widget-accordion-group-header-button {
-            border-top-left-radius: calc(#{$border-radius-default} - 1px);
-            border-top-right-radius: calc(#{$border-radius-default} - 1px);
+            border-top-left-radius: calc(var(--border-radius-default) - 1px);
+            border-top-right-radius: calc(var(--border-radius-default) - 1px);
         }
     }
 
     &:last-child {
-        border-bottom-left-radius: $border-radius-default;
-        border-bottom-right-radius: $border-radius-default;
+        border-bottom-left-radius: var(--border-radius-default);
+        border-bottom-right-radius: var(--border-radius-default);
     }
 
     &.widget-accordion-group-collapsed:last-child,
     &.widget-accordion-group-collapsing:last-child {
         > .widget-accordion-group-header > .widget-accordion-group-header-button {
-            border-bottom-left-radius: calc(#{$border-radius-default} - 1px);
-            border-bottom-right-radius: calc(#{$border-radius-default} - 1px);
+            border-bottom-left-radius: calc(var(--border-radius-default) - 1px);
+            border-bottom-right-radius: calc(var(--border-radius-default) - 1px);
         }
     }
 
@@ -73,11 +73,11 @@
     > .widget-accordion-group-header > .widget-accordion-group-header-button {
         cursor: auto;
         background-color: $background-color;
-        padding: $spacing-medium;
+        padding: var(--spacing-medium);
 
         > :is(h1, h2, h3, h4, h5, h6) {
-            font-size: $font-size-h5;
-            font-weight: $font-weight-header;
+            font-size: var(--font-size-h5);
+            font-weight: var(--font-weight-header);
         }
 
         > :is(h1, h2, h3, h4, h5, h6, p, span) {
@@ -107,15 +107,15 @@
 
     > .widget-accordion-group-content-wrapper > .widget-accordion-group-content {
         border-color: $border-color;
-        padding: $spacing-small $spacing-medium $spacing-large $spacing-medium;
+        padding: var(--spacing-small) var(--spacing-medium) var(--spacing-large) var(--spacing-medium);
     }
 }
 
 @mixin get-accordion-preview-group-styles($color) {
     .widget-accordion-group-header-button {
         > div > :is(h1, h2, h3, h4, h5, h6) {
-            font-size: $font-size-h5;
-            font-weight: $font-weight-header;
+            font-size: var(--font-size-h5);
+            font-weight: var(--font-weight-header);
         }
 
         > div > :is(h1, h2, h3, h4, h5, h6, p, span) {
diff --git a/Source/themesource/atlas_core/web/core/widgets/_badge-button.scss b/Source/themesource/atlas_core/web/core/widgets/_badge-button.scss
index 80339487..267fb233 100644
--- a/Source/themesource/atlas_core/web/core/widgets/_badge-button.scss
+++ b/Source/themesource/atlas_core/web/core/widgets/_badge-button.scss
@@ -23,12 +23,12 @@
             top: unset;
             display: inline-block;
             margin: 0;
-            padding: $spacing-smaller $spacing-small;
+            padding: var(--spacing-smaller) var(--spacing-small);
             text-align: center;
             vertical-align: baseline;
             white-space: nowrap;
-            background-color: $btn-primary-color;
-            color: $btn-primary-bg;
+            background-color: var(--btn-primary-color);
+            color: var(--btn-primary-bg);
             font-size: 100%;
             line-height: 1;
         }
diff --git a/Source/themesource/atlas_core/web/core/widgets/_badge.scss b/Source/themesource/atlas_core/web/core/widgets/_badge.scss
index 0e1c997a..9611d506 100644
--- a/Source/themesource/atlas_core/web/core/widgets/_badge.scss
+++ b/Source/themesource/atlas_core/web/core/widgets/_badge.scss
@@ -15,7 +15,7 @@
     .badge {
         display: inline-block;
         margin: 0;
-        padding: $spacing-smaller $spacing-small;
+        padding: var(--spacing-smaller) var(--spacing-small);
         text-align: center;
         vertical-align: baseline;
         white-space: nowrap;
@@ -24,7 +24,7 @@
         line-height: 1;
 
         .form-control-static {
-            font-weight: $font-weight-normal;
+            font-weight: var(--font-weight-normal);
             all: unset;
         }
     }
@@ -36,8 +36,8 @@
     ========================================================================== */
 
     .widget-badge {
-        color: $label-primary-color;
-        background-color: $label-primary-bg;
+        color: var(--label-primary-color);
+        background-color: var(--label-primary-bg);
     }
 
     .widget-badge-clickable {
@@ -47,12 +47,12 @@
     .widget-badge.badge:empty {
         display: initial;
         /* Fix padding to stay round */
-        padding: $spacing-smaller calc(#{$spacing-small} + 2px);
+        padding: var(--spacing-smaller) calc(var(--spacing-small) + 2px);
     }
 
     .widget-badge.label:empty {
         display: initial;
         /* Fix padding to stay square */
-        padding: $spacing-smaller calc(#{$spacing-small} + 2px);
+        padding: var(--spacing-smaller) calc(var(--spacing-small) + 2px);
     }
 }
diff --git a/Source/themesource/atlas_core/web/core/widgets/_button.scss b/Source/themesource/atlas_core/web/core/widgets/_button.scss
index b1a642f3..5aca467c 100644
--- a/Source/themesource/atlas_core/web/core/widgets/_button.scss
+++ b/Source/themesource/atlas_core/web/core/widgets/_button.scss
@@ -24,23 +24,28 @@
         text-align: center;
         vertical-align: middle;
         white-space: nowrap;
-        color: $btn-default-color;
-        border: 1px solid $btn-default-border-color;
-        border-radius: $btn-border-radius;
-        background-color: $btn-default-bg;
+        color: var(--btn-default-color);
+        border: var(--border-width-default) solid var(--btn-default-border-color);
+        border-radius: var(--btn-border-radius);
+        background-color: var(--btn-default-bg);
         background-image: none;
         box-shadow: none;
         text-shadow: none;
-        font-size: $btn-font-size;
-        line-height: $line-height-base;
+        font-size: var(--btn-font-size);
+        line-height: var(--line-height-base);
 
-        &:hover,
-        &:focus,
-        &:active,
-        &:active:focus {
+        &:hover {
+            // border-color: var(--form-input-border-hover-color);
             outline: none;
             box-shadow: none;
         }
+        &:active {
+            outline: none;
+            box-shadow: none;
+        }
+        &:focus-visible {
+            @extend .focus-ring !optional;
+        }
 
         &[aria-disabled] {
             cursor: not-allowed;
@@ -56,17 +61,20 @@
     // Mendix button link
     .mx-link {
         padding: 0;
-        color: $link-color;
+        color: var(--link-color);
 
         &[aria-disabled="true"] {
             cursor: not-allowed;
             pointer-events: none;
             opacity: 0.65;
         }
+        &:focus-visible {
+            @extend .focus-ring !optional;
+        }
     }
 
     .link-back {
-        color: $font-color-detail;
+        color: var(--font-color-detail);
 
         .glyphicon,
         .mx-icon-lined,
@@ -81,7 +89,7 @@
     .mx-link {
         img {
             //height: auto; // MXUI override who set the height on 16px default
-            height: calc(#{$font-size-default} + 4px);
+            height: calc(var(--font-size-default) + 4px);
             margin-right: 4px;
             vertical-align: text-top;
         }
diff --git a/Source/themesource/atlas_core/web/core/widgets/_check-box.scss b/Source/themesource/atlas_core/web/core/widgets/_check-box.scss
index 3a67fda9..f2d17b0d 100644
--- a/Source/themesource/atlas_core/web/core/widgets/_check-box.scss
+++ b/Source/themesource/atlas_core/web/core/widgets/_check-box.scss
@@ -47,8 +47,8 @@
             width: 100%;
             height: 100%;
             content: "";
-            border: 1px solid $form-input-border-color;
-            border-radius: $form-input-border-radius;
+            border: var(--border-width-default) solid var(--form-input-border-color);
+            border-radius: var(--form-input-border-radius);
             background-color: transparent;
         }
 
@@ -66,12 +66,12 @@
 
         &:not(:disabled):not(:checked):hover:after {
             content: "";
-            border-color: $form-input-bg-hover; // color of checkmark on hover
+            border-color: var(--form-input-border-hover-color); // color of checkmark on hover
         }
 
         &:checked:before {
-            border-color: $form-input-border-focus-color;
-            background-color: $form-input-border-focus-color;
+            border-color: var(--form-input-border-focus-color);
+            background-color: var(--form-input-border-focus-color);
         }
 
         &:checked:after {
@@ -79,21 +79,26 @@
         }
 
         &:disabled:before {
-            background-color: $form-input-bg-disabled;
+            background-color: var(--form-input-bg-disabled);
         }
 
         &:checked:disabled:before {
             border-color: transparent;
-            background-color: rgba($form-input-border-focus-color, 0.4);
+            background-color: color-mix(in srgb, var(--form-input-border-focus-color) 40%, transparent);
         }
 
         &:disabled:after,
         &:checked:disabled:after {
-            border-color: $form-input-bg-disabled;
+            border-color: var(--form-input-bg-disabled);
         }
 
         & + .control-label {
-            margin-left: $form-label-gutter;
+            margin-left: var(--form-label-gutter);
+        }
+
+        &:focus-visible {
+            border-radius: var(--form-input-border-radius);
+            @extend .focus-ring !optional;
         }
     }
 }
diff --git a/Source/themesource/atlas_core/web/core/widgets/_checkboxradiobutton.scss b/Source/themesource/atlas_core/web/core/widgets/_checkboxradiobutton.scss
new file mode 100644
index 00000000..b1fcdb2b
--- /dev/null
+++ b/Source/themesource/atlas_core/web/core/widgets/_checkboxradiobutton.scss
@@ -0,0 +1,23 @@
+//
+// DISCLAIMER:
+// Do not change this file because it is core styling.
+// Customizing core files will make updating Atlas much more difficult in the future.
+// To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten.
+//
+
+@mixin checkboxradiobutton() {
+    /* ==========================================================================
+       Checkbox Radio Button selection
+    ========================================================================== */
+
+    .list-horizontal {
+        .widget-checkbox-radio-selection-list {
+            flex-direction: row;
+            gap: var(--checkboxradio-gap, var(--spacing-small));
+        }
+    }
+    
+    .widget-checkbox-radio-selection-list {
+        gap: var(--checkboxradio-gap, var(--spacing-none));
+    }
+}
diff --git a/Source/themesource/atlas_core/web/core/widgets/_data-grid.scss b/Source/themesource/atlas_core/web/core/widgets/_data-grid.scss
index b6b08e66..2ec85209 100644
--- a/Source/themesource/atlas_core/web/core/widgets/_data-grid.scss
+++ b/Source/themesource/atlas_core/web/core/widgets/_data-grid.scss
@@ -19,13 +19,14 @@
             /* Table header */
             th {
                 border-style: solid;
-                border-color: $grid-border-color;
+                border-color: var(--grid-border-color);
                 border-top-width: 0;
                 border-right: 0;
                 border-bottom-width: 1px;
                 border-left: 0;
-                background-color: $grid-bg-header;
-                padding: $grid-padding-top $grid-padding-right $grid-padding-bottom $grid-padding-left;
+                background-color: var(--grid-bg-header);
+                padding: var(--grid-padding-top) var(--grid-padding-right) var(--grid-padding-bottom)
+                    var(--grid-padding-left);
                 vertical-align: middle;
 
                 .mx-datagrid-head-caption {
@@ -37,13 +38,14 @@
             tbody tr {
                 td {
                     @include transition();
-                    padding: $grid-padding-top $grid-padding-right $grid-padding-bottom $grid-padding-left;
+                    padding: var(--grid-padding-top) var(--grid-padding-right) var(--grid-padding-bottom)
+                        var(--grid-padding-left);
                     vertical-align: middle;
                     border-width: 0;
-                    border-color: $grid-border-color;
+                    border-color: var(--grid-border-color);
                     border-bottom-width: 1px;
                     border-bottom-style: solid;
-                    background-color: $grid-bg;
+                    background-color: var(--grid-bg);
 
                     &:focus {
                         outline: none;
@@ -57,24 +59,26 @@
 
                 &.selected td,
                 &.selected:hover td {
-                    color: $grid-selected-color;
-                    background-color: $grid-bg-selected !important;
+                    color: var(--grid-selected-color);
+                    background-color: var(--grid-bg-selected) !important;
                 }
             }
 
             /* Table Footer */
             tfoot {
                 > tr > th {
-                    padding: $grid-padding-top $grid-padding-right $grid-padding-bottom $grid-padding-left;
+                    padding: var(--grid-padding-top) var(--grid-padding-right) var(--grid-padding-bottom)
+                        var(--grid-padding-left);
                     border-width: 0;
-                    background-color: $grid-footer-bg;
+                    background-color: var(--grid-footer-bg);
                 }
 
                 > tr > td {
-                    padding: $grid-padding-top $grid-padding-right $grid-padding-bottom $grid-padding-left;
+                    padding: var(--grid-padding-top) var(--grid-padding-right) var(--grid-padding-bottom)
+                        var(--grid-padding-left);
                     border-width: 0;
-                    background-color: $grid-bg;
-                    font-weight: $font-weight-bold;
+                    background-color: var(--grid-bg);
+                    font-weight: var(--font-weight-bold);
                 }
             }
 
diff --git a/Source/themesource/atlas_core/web/core/widgets/_data-view.scss b/Source/themesource/atlas_core/web/core/widgets/_data-view.scss
index 413ad5ba..7e51cdb0 100644
--- a/Source/themesource/atlas_core/web/core/widgets/_data-view.scss
+++ b/Source/themesource/atlas_core/web/core/widgets/_data-view.scss
@@ -18,6 +18,11 @@
         /* Dataview-content gives problems for nested layout grid containers */
         > .mx-dataview-content {
             flex-grow: 1;
+
+            .mx-placeholder > &{
+                overflow-y: auto;
+            }
+
             > .mx-container-nested {
                 > .row {
                     margin-right: 0;
@@ -28,33 +33,19 @@
 
         /* Dataview empty message */
         .mx-dataview-message {
-            color: $dataview-emptymessage-color;
-            background: $dataview-emptymessage-bg;
+            color: var(--dataview-emptymessage-color);
+            background: var(--dataview-emptymessage-bg);
         }
     }
 
     .mx-dataview-controls {
-        padding: $spacing-medium 0 0;
-        border-top: 1px solid $dataview-controls-border-color;
+        padding: var(--spacing-medium) 0 0;
+        border-top: 1px solid var(--dataview-controls-border-color);
         border-radius: 0;
-        background-color: $dataview-controls-bg;
-        /* Buttons */
-        .mx-button {
-            margin-right: $spacing-small;
-            margin-bottom: 0;
-
-            &:last-child {
-                margin-right: 0;
-            }
-        }
-
-        /* Fix for Dojo rendering in react client */
-        [id^="mxui_widget_Wrapper"]:has(> .mx-button) {
-            .mx-button {
-                margin-right: $spacing-small;
-            }
-        }
-
-        background-color: inherit;
+        background-color: var(--dataview-controls-bg);
+        display: flex;
+        gap: var(--gutter-size);
+        margin-bottom: 0;
+        text-align: var(--dataview-controls-alignment);
     }
 }
diff --git a/Source/themesource/atlas_core/web/core/widgets/_date-picker.scss b/Source/themesource/atlas_core/web/core/widgets/_date-picker.scss
index 8af59645..9e4ac3ef 100644
--- a/Source/themesource/atlas_core/web/core/widgets/_date-picker.scss
+++ b/Source/themesource/atlas_core/web/core/widgets/_date-picker.scss
@@ -17,9 +17,9 @@
         z-index: 10010 !important;
         padding: 8px;
         font-size: 12px;
-        background: $bg-color;
-        border-radius: $border-radius-default;
-        border: 1px solid $border-color-default;
+        background: var(--bg-color);
+        border-radius: var(--border-radius-default);
+        border: var(--border-default);
         box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.06);
 
         .mx-calendar-month-header {
@@ -40,7 +40,7 @@
         .mx-calendar-month-next,
         .mx-calendar-month-previous {
             &:hover {
-                color: $brand-primary;
+                color: var(--brand-primary);
             }
         }
 
@@ -56,7 +56,7 @@
         }
 
         th {
-            color: $brand-primary;
+            color: var(--brand-primary);
         }
 
         th,
@@ -67,26 +67,26 @@
         }
 
         td {
-            color: $font-color-default;
+            color: var(--font-color-default);
 
             &:hover {
                 cursor: pointer;
                 border-radius: 50%;
-                color: $brand-primary;
-                background-color: $brand-default;
+                color: var(--brand-primary);
+                background-color: var(--brand-default);
             }
         }
 
         .mx-calendar-day-month-next,
         .mx-calendar-day-month-previous {
-            color: lighten($font-color-default, 45%);
+            color: var(--brand-primary-300);
         }
 
         .mx-calendar-day-selected,
         .mx-calendar-day-selected:hover {
             color: #fff;
             border-radius: 50%;
-            background: $brand-primary;
+            background: var(--brand-primary);
         }
 
         //
@@ -94,10 +94,10 @@
         .mx-calendar-year-switcher {
             text-align: center;
             margin-top: 10px;
-            color: lighten($brand-primary, 30%);
+            color: var(--brand-primary-300);
 
             span.mx-calendar-year-selected {
-                color: $brand-primary;
+                color: var(--brand-primary);
                 margin-left: 10px;
                 margin-right: 10px;
             }
@@ -116,8 +116,8 @@
         position: absolute;
         top: 25px;
         padding: 2px 10px;
-        border-radius: $border-radius-default;
-        background-color: $bg-color;
+        border-radius: var(--border-radius-default);
+        background-color: var(--bg-color);
 
         div {
             cursor: pointer;
@@ -126,7 +126,7 @@
 
             &:hover,
             &:focus {
-                color: $brand-primary;
+                color: var(--brand-primary);
             }
         }
     }
diff --git a/Source/themesource/atlas_core/web/core/widgets/_demo-user-switcher.scss b/Source/themesource/atlas_core/web/core/widgets/_demo-user-switcher.scss
new file mode 100644
index 00000000..16fb4d9b
--- /dev/null
+++ b/Source/themesource/atlas_core/web/core/widgets/_demo-user-switcher.scss
@@ -0,0 +1,95 @@
+//
+// DISCLAIMER:
+// Do not change this file because it is core styling.
+// Customizing core files will make updating Atlas much more difficult in the future.
+// To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten.
+//
+
+@mixin demo-user-switcher() {
+    /* ==========================================================================
+       Demo user switcher widget
+    ========================================================================== */
+
+    .mx-demouserswitcher {
+        position: fixed;
+        top: 0;
+        right: 0;
+        width: 360px;
+        height: 100%;
+        z-index: 20000;
+        box-shadow: -1px 0 5px rgba(28, 59, 86, 0.2);
+    }
+
+    .mx-demouserswitcher-content {
+        padding: 48px 0 48px;
+        height: 100%;
+        color: var(--font-color-contrast);
+        font-size: var(--font-size-default);
+        overflow: auto;
+        background: var(--sidebar-bg);
+    }
+
+    .mx-demouserswitcher ul {
+        padding: 0;
+        margin: 48px 1px;
+        list-style-type: none;
+    }
+
+    .mx-demouserswitcher a {
+        display: block;
+        padding: 10px 0;
+        color: var(--font-color-contrast);
+        &:hover {
+            background: var(--navsidebar-bg-hover);
+            text-decoration: none;
+        }
+    }
+
+    .mx-demouserswitcher h2 {
+        margin: 0px 24px 5px;
+        color: var(--font-color-contrast);
+        font-size: var(--font-size-h2);
+    }
+
+    .mx-demouserswitcher h3 {
+        margin: 0 24px 2px;
+        color: var(--font-color-contrast);
+        font-size: var(--font-size-default);
+        font-weight: bold;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+
+    .mx-demouserswitcher .active {
+        border-left: 4px solid rgba(255, 255, 255, 0.8);
+        background: var(--navsidebar-bg-active);
+    }
+
+    .mx-demouserswitcher p {
+        margin-left: 24px;
+        margin-bottom: 0;
+        font-size: var(--font-size-small);
+        .active {
+            background: var(--navsidebar-bg-active);
+        }
+    }
+
+    .mx-demouserswitcher-toggle {
+        position: absolute;
+        top: 25%;
+        left: -35px;
+        width: 35px;
+        height: 38px;
+        margin-top: -40px;
+        cursor: pointer;
+        border-top-left-radius: 3px;
+        border-bottom-left-radius: 3px;
+        box-shadow: -1px 0 5px rgba(28, 59, 86, 0.2);
+        background: url(resources/switcher-toggle.png) center center no-repeat var(--brand-primary);
+
+        &:hover {
+            background-color: var(--brand-primary-600);
+        }
+    }
+}
diff --git a/Source/themesource/atlas_core/web/core/widgets/_div-container.scss b/Source/themesource/atlas_core/web/core/widgets/_div-container.scss
new file mode 100644
index 00000000..00ba1a50
--- /dev/null
+++ b/Source/themesource/atlas_core/web/core/widgets/_div-container.scss
@@ -0,0 +1,61 @@
+//
+// DISCLAIMER:
+// Do not change this file because it is core styling.
+// Customizing core files will make updating Atlas much more difficult in the future.
+// To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten.
+//
+
+@mixin div-container() {
+    /* ==========================================================================
+     Container
+
+     Widget styles
+  ========================================================================== */
+    :root {
+        --border-style-solid: solid;
+        --border-style-dashed: dashed;
+        --border-style-dotted: dotted;
+        --border-style-none: none;
+        --div-border-width: var(--border-width-default);
+        --div-border-color: var(--border-color-default);
+        --div-border-style: solid;
+        --overflow-auto: auto;
+        --overflow-hidden: hidden;
+        --overflow-visible: visible;
+        --none: none;
+    }
+
+    .div-overflow-auto {
+        overflow: auto;
+    }
+    .div-overflow-hidden {
+        overflow: hidden;
+    }
+    .div-overflow-visible {
+        overflow: visible;
+    }
+
+    .div-border-toggle-all {
+        border: var(--div-border-width) var(--div-border-style) var(--div-border-color);
+    }
+    .div-border-toggle-top {
+        border-top: var(--div-border-width) var(--div-border-style) var(--div-border-color);
+    }
+    .div-border-toggle-left {
+        border-left: var(--div-border-width) var(--div-border-style) var(--div-border-color);
+    }
+    .div-border-toggle-right {
+        border-right: var(--div-border-width) var(--div-border-style) var(--div-border-color);
+    }
+    .div-border-toggle-bottom {
+        border-bottom: var(--div-border-width) var(--div-border-style) var(--div-border-color);
+    }
+    .div-border-toggle-none {
+        border: none;
+    }
+
+    .div-stretch {
+        height: 100%;
+        flex: 1;
+    }
+}
diff --git a/Source/themesource/atlas_core/web/core/widgets/_glyphicon.scss b/Source/themesource/atlas_core/web/core/widgets/_glyphicon.scss
index 37ec8077..6e4b14fe 100644
--- a/Source/themesource/atlas_core/web/core/widgets/_glyphicon.scss
+++ b/Source/themesource/atlas_core/web/core/widgets/_glyphicon.scss
@@ -19,7 +19,7 @@
             margin-right: 0.4555555em;
             vertical-align: middle;
             font-family: "Glyphicons Halflings";
-            font-weight: $font-weight-normal;
+            font-weight: var(--font-weight-normal);
             font-style: normal;
             line-height: inherit;
             -webkit-font-smoothing: antialiased;
diff --git a/Source/themesource/atlas_core/web/core/widgets/_grid.scss b/Source/themesource/atlas_core/web/core/widgets/_grid.scss
index 047b4e20..9d2f5703 100644
--- a/Source/themesource/atlas_core/web/core/widgets/_grid.scss
+++ b/Source/themesource/atlas_core/web/core/widgets/_grid.scss
@@ -24,14 +24,14 @@
                 /* Buttons */
                 .mx-button {
                     padding: 8px;
-                    color: $grid-paging-color;
-                    border-color: $grid-paging-border-color;
-                    background-color: $grid-paging-bg;
+                    color: var(--grid-paging-color);
+                    border-color: var(--grid-paging-border-color);
+                    background-color: var(--grid-paging-bg);
 
                     &:hover {
-                        color: $grid-paging-color-hover;
-                        border-color: $grid-paging-border-color-hover;
-                        background-color: $grid-paging-bg-hover;
+                        color: var(--grid-paging-color-hover);
+                        border-color: var(--grid-paging-border-color-hover);
+                        background-color: var(--grid-paging-bg-hover);
                     }
                 }
 
diff --git a/Source/themesource/atlas_core/web/core/widgets/_group-box.scss b/Source/themesource/atlas_core/web/core/widgets/_group-box.scss
index a80e4e08..0c0474fc 100644
--- a/Source/themesource/atlas_core/web/core/widgets/_group-box.scss
+++ b/Source/themesource/atlas_core/web/core/widgets/_group-box.scss
@@ -17,52 +17,55 @@
 
         > .mx-groupbox-header {
             margin: 0;
-            color: $groupbox-default-color;
+            color: var(--groupbox-default-color);
             border-width: 1px 1px 0 1px;
             border-style: solid;
-            border-color: $groupbox-default-bg;
-            background: $groupbox-default-bg;
-            font-size: $font-size-h5;
-            border-radius: $border-radius-default $border-radius-default 0 0;
-            padding: $spacing-small * 1.5 $spacing-medium;
+            border-color: var(--groupbox-default-bg);
+            background: var(--groupbox-default-bg);
+            font-size: var(--font-size-h5);
+            border-radius: var(--border-radius-default) var(--border-radius-default) 0 0;
+            padding: calc(var(--spacing-small) * 1.5) var(--spacing-medium);
 
             .mx-groupbox-collapse-icon {
                 margin-top: 0.1em;
             }
+            &:focus-visible {
+                @extend .focus-ring !optional;
+            }
         }
 
         // Header options
         > h1.mx-groupbox-header {
-            font-size: $font-size-h1;
+            font-size: var(--font-size-h1);
         }
 
         > h2.mx-groupbox-header {
-            font-size: $font-size-h2;
+            font-size: var(--font-size-h2);
         }
 
         > h3.mx-groupbox-header {
-            font-size: $font-size-h3;
+            font-size: var(--font-size-h3);
         }
 
         > h4.mx-groupbox-header {
-            font-size: $font-size-h4;
+            font-size: var(--font-size-h4);
         }
 
         > h5.mx-groupbox-header {
-            font-size: $font-size-h5;
+            font-size: var(--font-size-h5);
         }
 
         > h6.mx-groupbox-header {
-            font-size: $font-size-h6;
+            font-size: var(--font-size-h6);
         }
 
         > .mx-groupbox-body {
-            padding: $spacing-small * 1.5 $spacing-medium;
+            padding: calc(var(--spacing-small) * 1.5) var(--spacing-medium);
             border-width: 1px;
             border-style: solid;
-            border-color: $groupbox-default-bg;
+            border-color: var(--groupbox-default-bg);
             background-color: #ffffff;
-            border-radius: $border-radius-default;
+            border-radius: var(--border-radius-default);
         }
 
         .mx-groupbox-header + .mx-groupbox-body {
@@ -75,6 +78,6 @@
 
     //With header
     .mx-groupbox-header ~ .mx-groupbox-body {
-        border-radius: 0 0 $border-radius-default $border-radius-default;
+        border-radius: 0 0 var(--border-radius-default) var(--border-radius-default);
     }
 }
diff --git a/Source/themesource/atlas_core/web/core/widgets/_header.scss b/Source/themesource/atlas_core/web/core/widgets/_header.scss
index 4ebcdfb1..da6b555e 100644
--- a/Source/themesource/atlas_core/web/core/widgets/_header.scss
+++ b/Source/themesource/atlas_core/web/core/widgets/_header.scss
@@ -16,11 +16,11 @@
         z-index: 100;
         display: flex;
         width: 100%;
-        height: $m-header-height;
+        height: var(--m-header-height);
         padding: 0;
         text-align: initial;
-        color: $m-header-color;
-        background-color: $m-header-bg;
+        color: var(--m-header-color);
+        background: var(--m-header-bg);
         box-shadow: 0px 2px 2px rgba(194, 196, 201, 0.30354);
 
         // Reset mxui
@@ -61,9 +61,9 @@
                 width: 100%;
                 margin: 0;
                 text-overflow: ellipsis;
-                color: $m-header-color;
-                font-size: $m-header-title-size;
-                line-height: $m-header-height;
+                color: var(--m-header-color);
+                font-size: var(--m-header-title-size);
+                line-height: var(--m-header-height);
             }
         }
 
@@ -92,19 +92,19 @@
 
             &:active {
                 transform: translateY(1px);
-                color: $link-hover-color;
+                color: var(--link-hover-color);
             }
         }
 
         .mx-link,
         .btn,
         img {
-            padding: 0 $spacing-medium;
+            padding: 0 var(--spacing-medium);
         }
 
         .mx-sidebartoggle {
             font-size: 24px;
-            line-height: $m-header-height;
+            line-height: var(--m-header-height);
 
             img {
                 height: 20px;
diff --git a/Source/themesource/atlas_core/web/core/widgets/_input.scss b/Source/themesource/atlas_core/web/core/widgets/_input.scss
index ee1cf7d3..98466904 100644
--- a/Source/themesource/atlas_core/web/core/widgets/_input.scss
+++ b/Source/themesource/atlas_core/web/core/widgets/_input.scss
@@ -15,17 +15,17 @@
         display: flex;
         flex: 1;
         min-width: 50px;
-        height: $form-input-height;
-        padding: $form-input-padding-y $form-input-padding-x;
+        height: var(--form-input-height);
+        padding: var(--form-input-padding-y) var(--form-input-padding-x);
         transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
-        color: $form-input-color;
-        border: 1px solid $form-input-border-color;
-        border-radius: $form-input-border-radius;
-        background-color: $form-input-bg;
+        color: var(--form-input-color);
+        border: var(--border-width-default) solid var(--form-input-border-color);
+        border-radius: var(--form-input-border-radius);
+        background-color: var(--form-input-bg);
         background-image: none;
         box-shadow: none;
-        font-size: $form-input-font-size;
-        line-height: $form-input-line-height;
+        font-size: var(--form-input-font-size);
+        line-height: var(--form-input-line-height);
         appearance: none;
         -moz-appearance: none;
         -webkit-appearance: none;
@@ -34,17 +34,20 @@
         }
 
         &::placeholder {
-            color: $form-input-placeholder-color;
+            color: var(--form-input-placeholder-color);
         }
     }
 
     .form-control:not([readonly]) {
         &:focus,
         &:focus-within {
-            border-color: $form-input-border-focus-color;
-            outline: 0;
-            background-color: $form-input-bg-focus;
+            background-color: var(--form-input-bg-focus);
             box-shadow: none;
+            @extend .focus-ring !optional;
+        }
+        &:hover:not(:focus):not([disabled]) {
+            border-color: var(--form-input-border-hover-color);
+            background-color: var(--form-input-bg-hover);
         }
     }
 
@@ -52,7 +55,7 @@
     .form-control[readonly],
     fieldset[disabled] .form-control {
         opacity: 1;
-        background-color: $form-input-bg-disabled;
+        background-color: var(--form-input-bg-disabled);
     }
 
     .form-control[disabled],
@@ -63,7 +66,7 @@
     // Lined
     .form-control-lined {
         border: 0;
-        border-bottom: 1px solid $form-input-border-color;
+        border-bottom: var(--border-width-default) solid var(--form-input-border-color);
         border-radius: 0;
         background-color: transparent;
 
@@ -77,13 +80,12 @@
         overflow: hidden;
         flex: 1;
         min-height: auto;
-        padding: $form-input-static-padding-y $form-input-static-padding-x;
-        //border-bottom: 1px solid $form-input-static-border-color;
-        font-size: $form-input-font-size;
-        line-height: $form-input-line-height;
+        padding: var(--form-input-static-padding-y) var(--form-input-static-padding-x);
+        font-size: var(--form-input-font-size);
+        line-height: var(--form-input-line-height);
 
         & + .control-label {
-            margin-left: $form-label-gutter;
+            margin-left: var(--form-label-gutter);
         }
     }
 
@@ -93,7 +95,7 @@
         padding-right: 30px;
         background-image: url($arrow);
         background-repeat: no-repeat;
-        background-position: calc(100% - #{$form-input-padding-x}) center;
+        background-position: calc(100% - var(--form-input-padding-x)) center;
         appearance: none;
         -moz-appearance: none;
         -webkit-appearance: none;
@@ -114,7 +116,7 @@
         display: block;
         width: 100%;
         text-align: right;
-        margin-top: $spacing-small;
+        margin-top: var(--spacing-small);
     }
 
     textarea.form-control {
@@ -126,9 +128,10 @@
         flex: 1;
         flex-wrap: wrap;
         max-width: 100%;
+        align-items: center;
 
         .btn {
-            margin-left: $spacing-small;
+            margin-left: var(--spacing-small);
         }
 
         .mx-validation-message {
@@ -138,31 +141,25 @@
     }
 
     .has-error .mx-validation-message {
-        margin-top: $spacing-small;
+        margin-top: var(--spacing-small);
         margin-bottom: 0;
-        padding: $spacing-small;
-        color: $alert-danger-color;
-        border-color: $alert-danger-border-color;
-        background-color: $alert-danger-bg;
+        padding: var(--spacing-small);
+        color: var(--alert-danger-color);
+        border-color: var(--alert-danger-border-color);
+        background-color: var(--alert-danger-bg);
     }
 
     // Form Group
     .form-group {
         display: flex;
         flex-direction: row;
-        margin-bottom: $form-group-margin-bottom;
+        margin-bottom: var(--form-group-margin-bottom);
 
         & > div[class*="col-"] {
             display: flex;
-            align-items: center;
             flex-wrap: wrap;
         }
 
-        & > [class*="col-"] {
-            padding-right: $form-group-gutter;
-            padding-left: $form-group-gutter;
-        }
-
         // Alignment content
         div[class*="textBox"] > .control-label,
         div[class*="textArea"] > .control-label,
@@ -176,9 +173,9 @@
             margin-bottom: 4px;
             text-align: left;
             text-overflow: ellipsis;
-            color: $form-label-color;
-            font-size: $form-label-size;
-            font-weight: $form-label-weight;
+            color: var(--form-label-color);
+            font-size: var(--form-label-size);
+            font-weight: var(--form-label-weight);
         }
 
         .mx-validation-message {
@@ -190,6 +187,41 @@
         }
     }
 
+    .page-form-vertical {
+        @extend .form-vertical;
+        .form-group:not(.label-after) {
+            flex-direction: column;
+        }
+    }
+
+    .page-form-horizontal {
+        @extend .form-horizontal;
+        @media not screen and (max-width: $screen-sm-max) {
+            .form-group.no-columns:not(.label-after){
+                // overwrite default no-columns behavior when
+                // page form orientation is set to horizontal
+                flex-direction: row;
+            }
+        }
+
+        $label-breakpoints: sm, md, lg, xl, xxl;
+        @each $bp in $label-breakpoints {
+            &:not([class*="form-label-width-"]){
+                // default label width 3 if none specified
+                .form-group > label {
+                    @extend .col-#{$bp}-3;
+                }
+            }
+            @for $i from 1 through 11 {
+                &.form-label-width-#{$i} {
+                    .form-group > label {
+                        @extend .col-#{$bp}-#{$i};
+                    }
+                }
+            }
+        }
+    }
+
     .form-group.label-after {
         .form-control-static {
             flex: unset;
@@ -208,16 +240,23 @@
 
     // Targets only webkit iOS devices
     .dj_webkit.dj_ios .form-control {
-        transform: translateZ(0);
+        transform: translate3d(0,0,0);
+        -webkit-transform: translate3d(0,0,0);
+
+        &.widget-dropdown-filter{
+            transform: inherit;
+            -webkit-transform: inherit;
+        }
     }
 
     @media only screen and (min-width: $screen-md) {
         .form-horizontal {
             .control-label {
                 margin-bottom: 0;
-                padding-top: $form-input-padding-y;
-                padding-bottom: $form-input-padding-y;
-                line-height: $form-input-line-height;
+                padding-top: var(--form-input-padding-y);
+                padding-bottom: var(--form-input-padding-y);
+                padding-right: var(--form-label-gutter);
+                line-height: var(--form-input-line-height);
             }
         }
     }
@@ -265,11 +304,11 @@
         select.form-control {
             padding-right: 30px;
             padding-left: 0;
-            background-position: #{$form-input-padding-x} center;
+            background-position: var(--form-input-padding-x) center;
         }
 
         .mx-compound-control .btn {
-            margin-right: $spacing-small;
+            margin-right: var(--spacing-small);
             margin-left: 0;
         }
     }
diff --git a/Source/themesource/atlas_core/web/core/widgets/_label.scss b/Source/themesource/atlas_core/web/core/widgets/_label.scss
index af9469dd..62bb4815 100644
--- a/Source/themesource/atlas_core/web/core/widgets/_label.scss
+++ b/Source/themesource/atlas_core/web/core/widgets/_label.scss
@@ -15,7 +15,7 @@
     .label {
         display: inline-block;
         margin: 0;
-        padding: $spacing-smaller $spacing-small;
+        padding: var(--spacing-smaller) var(--spacing-small);
         text-align: center;
         vertical-align: baseline;
         white-space: nowrap;
@@ -25,7 +25,7 @@
         line-height: 1;
 
         .form-control-static {
-            font-weight: $font-weight-normal;
+            font-weight: var(--font-weight-normal);
             all: unset;
         }
     }
diff --git a/Source/themesource/atlas_core/web/core/widgets/_layout-grid.scss b/Source/themesource/atlas_core/web/core/widgets/_layout-grid.scss
index 3aa38195..ec833ba1 100644
--- a/Source/themesource/atlas_core/web/core/widgets/_layout-grid.scss
+++ b/Source/themesource/atlas_core/web/core/widgets/_layout-grid.scss
@@ -4,8 +4,11 @@
 // Customizing core files will make updating Atlas much more difficult in the future.
 // To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten.
 //
-
 @mixin layout-grid() {
+    :root {
+        --max-screen-width: var(--screen-xxl);
+    }
+
     /* ==========================================================================
        Layout grid
 
@@ -15,16 +18,84 @@
         width: 100%;
         margin-right: auto;
         margin-left: auto;
-        padding-right: $gutter-size;
-        padding-left: $gutter-size;
+        display: flex;
+        flex-direction: column;
+        row-gap: var(--layoutgrid-row-gap);
+        --layoutgrid-column-bg: transparent;
+        --layoutgrid-column-gap: var(--gutter-size);
+        --layoutgrid-row-gap: var(--gutter-size);
+        --layoutgrid-column-border-radius: var(--border-radius-l);
+
+        &.cards {
+            // default column & row gap for card style
+            --layoutgrid-row-gap: var(--gutter-size); //var(--spacing-medium);
+            --layoutgrid-column-gap: var(--gutter-size); //var(--spacing-medium);
+            --layoutgrid-column-bg: var(--bg-color-secondary);
+            --card-bg-color: var(--layoutgrid-column-bg);
+            --card-border-radius: var(--layoutgrid-column-border-radius);
+
+            > .row {
+                > .col,
+                > [class*="col-"] {
+                    @extend .card;
+                }
+            }
+        }
+
+        &.layoutgrid-align-stretch {
+            height: 100%;
+            > .row {
+                height: 100%;
+            }
+        }
+
+        &.layoutgrid-align-top {
+            height: 100%;
+            justify-content: flex-start;
+        }
+
+        &.layoutgrid-align-center {
+            height: 100%;
+            justify-content: center;
+        }
+
+        &.layoutgrid-align-bottom {
+            height: 100%;
+            justify-content: flex-end;
+        }
+
+        > .row {
+            display: flex;
+            column-gap: var(--layoutgrid-column-gap);
+            row-gap: var(--layoutgrid-row-gap); // wrapped items
+            > .col,
+            > [class*="col-"] {
+                --column-gap: var(--layoutgrid-column-gap);
+                background-color: var(--layoutgrid-column-bg);
+                &.card {
+                    --layoutgrid-column-bg: var(--card-bg);
+                }
+
+                >* {
+                    // ensure column gap is scoped to layout grid columns
+                    --column-gap: 0px;
+                }
+            }
+
+            &.cards {
+                >.col,
+                >[class*="col-"] {
+                    @extend .card;
+                    background-color: var(--layoutgrid-column-bg);
+                }
+            }
+        }
     }
 
     // Row
     .row {
         display: flex;
         flex-wrap: wrap;
-        margin-right: -$gutter-size;
-        margin-left: -$gutter-size;
 
         &::before,
         &::after {
@@ -35,6 +106,7 @@
     .no-gutters {
         margin-right: 0;
         margin-left: 0;
+        --layoutgrid-column-gap: 0px;
     }
 
     .no-gutters > .col,
@@ -44,907 +116,70 @@
     }
 
     // Columns
-    .col-1,
-    .col-2,
-    .col-3,
-    .col-4,
-    .col-5,
-    .col-6,
-    .col-7,
-    .col-8,
-    .col-9,
-    .col-10,
-    .col-11,
-    .col-12,
     .col,
-    .col-auto,
-    .col-sm-1,
-    .col-sm-2,
-    .col-sm-3,
-    .col-sm-4,
-    .col-sm-5,
-    .col-sm-6,
-    .col-sm-7,
-    .col-sm-8,
-    .col-sm-9,
-    .col-sm-10,
-    .col-sm-11,
-    .col-sm-12,
-    .col-sm,
-    .col-sm-auto,
-    .col-md-1,
-    .col-md-2,
-    .col-md-3,
-    .col-md-4,
-    .col-md-5,
-    .col-md-6,
-    .col-md-7,
-    .col-md-8,
-    .col-md-9,
-    .col-md-10,
-    .col-md-11,
-    .col-md-12,
-    .col-md,
-    .col-md-auto,
-    .col-lg-1,
-    .col-lg-2,
-    .col-lg-3,
-    .col-lg-4,
-    .col-lg-5,
-    .col-lg-6,
-    .col-lg-7,
-    .col-lg-8,
-    .col-lg-9,
-    .col-lg-10,
-    .col-lg-11,
-    .col-lg-12,
-    .col-lg,
-    .col-lg-auto,
-    .col-xl-1,
-    .col-xl-2,
-    .col-xl-3,
-    .col-xl-4,
-    .col-xl-5,
-    .col-xl-6,
-    .col-xl-7,
-    .col-xl-8,
-    .col-xl-9,
-    .col-xl-10,
-    .col-xl-11,
-    .col-xl-12,
-    .col-xl,
-    .col-xl-auto {
+    [class^="col-"] {
         position: relative;
         width: 100%;
-        padding-right: $gutter-size;
-        padding-left: $gutter-size;
-    }
-
-    .col {
-        flex-basis: 0;
-        flex-grow: 1;
-        max-width: 100%;
-    }
-
-    .col-auto {
-        flex: 0 0 auto;
-        width: auto;
-        max-width: 100%;
-    }
-
-    .col-1 {
-        flex: 0 0 8.333333%;
-        max-width: 8.333333%;
-    }
-
-    .col-2 {
-        flex: 0 0 16.666667%;
-        max-width: 16.666667%;
-    }
-
-    .col-3 {
-        flex: 0 0 25%;
-        max-width: 25%;
-    }
-
-    .col-4 {
-        flex: 0 0 33.333333%;
-        max-width: 33.333333%;
-    }
-
-    .col-5 {
-        flex: 0 0 41.666667%;
-        max-width: 41.666667%;
-    }
-
-    .col-6 {
-        flex: 0 0 50%;
-        max-width: 50%;
-    }
-
-    .col-7 {
-        flex: 0 0 58.333333%;
-        max-width: 58.333333%;
-    }
-
-    .col-8 {
-        flex: 0 0 66.666667%;
-        max-width: 66.666667%;
-    }
-
-    .col-9 {
-        flex: 0 0 75%;
-        max-width: 75%;
-    }
-
-    .col-10 {
-        flex: 0 0 83.333333%;
-        max-width: 83.333333%;
-    }
-
-    .col-11 {
-        flex: 0 0 91.666667%;
-        max-width: 91.666667%;
-    }
-
-    .col-12 {
-        flex: 0 0 100%;
-        max-width: 100%;
-    }
-
-    .order-first {
-        order: -1;
-    }
-
-    .order-last {
-        order: 13;
-    }
-
-    .order-0 {
-        order: 0;
-    }
-
-    .order-1 {
-        order: 1;
-    }
-
-    .order-2 {
-        order: 2;
-    }
-
-    .order-3 {
-        order: 3;
-    }
-
-    .order-4 {
-        order: 4;
-    }
-
-    .order-5 {
-        order: 5;
-    }
-
-    .order-6 {
-        order: 6;
-    }
-
-    .order-7 {
-        order: 7;
-    }
-
-    .order-8 {
-        order: 8;
-    }
-
-    .order-9 {
-        order: 9;
-    }
-
-    .order-10 {
-        order: 10;
-    }
-
-    .order-11 {
-        order: 11;
-    }
-
-    .order-12 {
-        order: 12;
-    }
-
-    .offset-1,
-    .col-offset-1 {
-        margin-left: 8.333333%;
-    }
-
-    .offset-2,
-    .col-offset-2 {
-        margin-left: 16.666667%;
-    }
-
-    .offset-3,
-    .col-offset-3 {
-        margin-left: 25%;
-    }
-
-    .offset-4,
-    .col-offset-4 {
-        margin-left: 33.333333%;
-    }
-
-    .offset-5,
-    .col-offset-5 {
-        margin-left: 41.666667%;
-    }
-
-    .offset-6,
-    .col-offset-6 {
-        margin-left: 50%;
-    }
-
-    .offset-7,
-    .col-offset-7 {
-        margin-left: 58.333333%;
-    }
-
-    .offset-8,
-    .col-offset-8 {
-        margin-left: 66.666667%;
-    }
-
-    .offset-9,
-    .col-offset-9 {
-        margin-left: 75%;
-    }
-
-    .offset-10,
-    .col-offset-10 {
-        margin-left: 83.333333%;
-    }
-
-    .offset-11,
-    .col-offset-11 {
-        margin-left: 91.666667%;
     }
 
     // Responsiveness
-    @media (min-width: $screen-sm) {
-        .mx-layoutgrid-fixed {
-            max-width: 540px;
-        }
-    }
-
-    @media (min-width: $screen-md) {
-        .mx-layoutgrid-fixed {
-            max-width: 720px;
-        }
-    }
-
-    @media (min-width: $screen-lg) {
-        .mx-layoutgrid-fixed {
-            max-width: 960px;
-        }
-    }
-
-    @media (min-width: $screen-xl) {
-        .mx-layoutgrid-fixed {
-            max-width: 1140px;
-        }
-    }
-
-    @media (min-width: $screen-sm) {
-        .col-sm {
-            flex-basis: 0;
-            flex-grow: 1;
-            max-width: 100%;
-        }
-        .col-sm-auto {
-            flex: 0 0 auto;
-            width: auto;
-            max-width: 100%;
-        }
-        .col-sm-1 {
-            flex: 0 0 8.333333%;
-            max-width: 8.333333%;
-        }
-        .col-sm-2 {
-            flex: 0 0 16.666667%;
-            max-width: 16.666667%;
-        }
-        .col-sm-3 {
-            flex: 0 0 25%;
-            max-width: 25%;
-        }
-        .col-sm-4 {
-            flex: 0 0 33.333333%;
-            max-width: 33.333333%;
-        }
-        .col-sm-5 {
-            flex: 0 0 41.666667%;
-            max-width: 41.666667%;
-        }
-        .col-sm-6 {
-            flex: 0 0 50%;
-            max-width: 50%;
-        }
-        .col-sm-7 {
-            flex: 0 0 58.333333%;
-            max-width: 58.333333%;
-        }
-        .col-sm-8 {
-            flex: 0 0 66.666667%;
-            max-width: 66.666667%;
-        }
-        .col-sm-9 {
-            flex: 0 0 75%;
-            max-width: 75%;
-        }
-        .col-sm-10 {
-            flex: 0 0 83.333333%;
-            max-width: 83.333333%;
-        }
-        .col-sm-11 {
-            flex: 0 0 91.666667%;
-            max-width: 91.666667%;
-        }
-        .col-sm-12 {
-            flex: 0 0 100%;
-            max-width: 100%;
-        }
-        .order-sm-first {
-            order: -1;
-        }
-        .order-sm-last {
-            order: 13;
-        }
-        .order-sm-0 {
-            order: 0;
-        }
-        .order-sm-1 {
-            order: 1;
-        }
-        .order-sm-2 {
-            order: 2;
-        }
-        .order-sm-3 {
-            order: 3;
-        }
-        .order-sm-4 {
-            order: 4;
-        }
-        .order-sm-5 {
-            order: 5;
-        }
-        .order-sm-6 {
-            order: 6;
-        }
-        .order-sm-7 {
-            order: 7;
-        }
-        .order-sm-8 {
-            order: 8;
-        }
-        .order-sm-9 {
-            order: 9;
-        }
-        .order-sm-10 {
-            order: 10;
-        }
-        .order-sm-11 {
-            order: 11;
-        }
-        .order-sm-12 {
-            order: 12;
-        }
-        .offset-sm-0,
-        .col-sm-offset-0 {
-            margin-left: 0;
-        }
-        .offset-sm-1,
-        .col-sm-offset-1 {
-            margin-left: 8.333333%;
-        }
-        .offset-sm-2,
-        .col-sm-offset-2 {
-            margin-left: 16.666667%;
-        }
-        .offset-sm-3,
-        .col-sm-offset-3 {
-            margin-left: 25%;
-        }
-        .offset-sm-4,
-        .col-sm-offset-4 {
-            margin-left: 33.333333%;
-        }
-        .offset-sm-5,
-        .col-sm-offset-5 {
-            margin-left: 41.666667%;
-        }
-        .offset-sm-6,
-        .col-sm-offset-6 {
-            margin-left: 50%;
-        }
-        .offset-sm-7,
-        .col-sm-offset-7 {
-            margin-left: 58.333333%;
-        }
-        .offset-sm-8,
-        .col-sm-offset-8 {
-            margin-left: 66.666667%;
-        }
-        .offset-sm-9,
-        .col-sm-offset-9 {
-            margin-left: 75%;
-        }
-        .offset-sm-10,
-        .col-sm-offset-10 {
-            margin-left: 83.333333%;
-        }
-        .offset-sm-11,
-        .col-sm-offset-11 {
-            margin-left: 91.666667%;
-        }
-    }
-
-    @media (min-width: $screen-md) {
-        .col-md {
-            flex-basis: 0;
-            flex-grow: 1;
-            max-width: 100%;
-        }
-        .col-md-auto {
-            flex: 0 0 auto;
-            width: auto;
-            max-width: 100%;
-        }
-        .col-md-1 {
-            flex: 0 0 8.333333%;
-            max-width: 8.333333%;
-        }
-        .col-md-2 {
-            flex: 0 0 16.666667%;
-            max-width: 16.666667%;
-        }
-        .col-md-3 {
-            flex: 0 0 25%;
-            max-width: 25%;
-        }
-        .col-md-4 {
-            flex: 0 0 33.333333%;
-            max-width: 33.333333%;
-        }
-        .col-md-5 {
-            flex: 0 0 41.666667%;
-            max-width: 41.666667%;
-        }
-        .col-md-6 {
-            flex: 0 0 50%;
-            max-width: 50%;
-        }
-        .col-md-7 {
-            flex: 0 0 58.333333%;
-            max-width: 58.333333%;
-        }
-        .col-md-8 {
-            flex: 0 0 66.666667%;
-            max-width: 66.666667%;
-        }
-        .col-md-9 {
-            flex: 0 0 75%;
-            max-width: 75%;
-        }
-        .col-md-10 {
-            flex: 0 0 83.333333%;
-            max-width: 83.333333%;
-        }
-        .col-md-11 {
-            flex: 0 0 91.666667%;
-            max-width: 91.666667%;
-        }
-        .col-md-12 {
-            flex: 0 0 100%;
-            max-width: 100%;
-        }
-        .order-md-first {
-            order: -1;
-        }
-        .order-md-last {
-            order: 13;
-        }
-        .order-md-0 {
-            order: 0;
-        }
-        .order-md-1 {
-            order: 1;
-        }
-        .order-md-2 {
-            order: 2;
-        }
-        .order-md-3 {
-            order: 3;
-        }
-        .order-md-4 {
-            order: 4;
-        }
-        .order-md-5 {
-            order: 5;
-        }
-        .order-md-6 {
-            order: 6;
-        }
-        .order-md-7 {
-            order: 7;
-        }
-        .order-md-8 {
-            order: 8;
-        }
-        .order-md-9 {
-            order: 9;
-        }
-        .order-md-10 {
-            order: 10;
-        }
-        .order-md-11 {
-            order: 11;
-        }
-        .order-md-12 {
-            order: 12;
-        }
-        .offset-md-0,
-        .col-md-offset-0 {
-            margin-left: 0;
-        }
-        .offset-md-1,
-        .col-md-offset-1 {
-            margin-left: 8.333333%;
-        }
-        .offset-md-2,
-        .col-md-offset-2 {
-            margin-left: 16.666667%;
-        }
-        .offset-md-3,
-        .col-md-offset-3 {
-            margin-left: 25%;
-        }
-        .offset-md-4,
-        .col-md-offset-4 {
-            margin-left: 33.333333%;
-        }
-        .offset-md-5,
-        .col-md-offset-5 {
-            margin-left: 41.666667%;
-        }
-        .offset-md-6,
-        .col-md-offset-6 {
-            margin-left: 50%;
-        }
-        .offset-md-7,
-        .col-md-offset-7 {
-            margin-left: 58.333333%;
-        }
-        .offset-md-8,
-        .col-md-offset-8 {
-            margin-left: 66.666667%;
-        }
-        .offset-md-9,
-        .col-md-offset-9 {
-            margin-left: 75%;
-        }
-        .offset-md-10,
-        .col-md-offset-10 {
-            margin-left: 83.333333%;
-        }
-        .offset-md-11,
-        .col-md-offset-11 {
-            margin-left: 91.666667%;
-        }
-    }
-
-    @media (min-width: $screen-lg) {
-        .col-lg {
-            flex-basis: 0;
-            flex-grow: 1;
-            max-width: 100%;
-        }
-        .col-lg-auto {
-            flex: 0 0 auto;
-            width: auto;
-            max-width: 100%;
-        }
-        .col-lg-1 {
-            flex: 0 0 8.333333%;
-            max-width: 8.333333%;
-        }
-        .col-lg-2 {
-            flex: 0 0 16.666667%;
-            max-width: 16.666667%;
-        }
-        .col-lg-3 {
-            flex: 0 0 25%;
-            max-width: 25%;
-        }
-        .col-lg-4 {
-            flex: 0 0 33.333333%;
-            max-width: 33.333333%;
-        }
-        .col-lg-5 {
-            flex: 0 0 41.666667%;
-            max-width: 41.666667%;
-        }
-        .col-lg-6 {
-            flex: 0 0 50%;
-            max-width: 50%;
-        }
-        .col-lg-7 {
-            flex: 0 0 58.333333%;
-            max-width: 58.333333%;
-        }
-        .col-lg-8 {
-            flex: 0 0 66.666667%;
-            max-width: 66.666667%;
-        }
-        .col-lg-9 {
-            flex: 0 0 75%;
-            max-width: 75%;
-        }
-        .col-lg-10 {
-            flex: 0 0 83.333333%;
-            max-width: 83.333333%;
-        }
-        .col-lg-11 {
-            flex: 0 0 91.666667%;
-            max-width: 91.666667%;
-        }
-        .col-lg-12 {
-            flex: 0 0 100%;
-            max-width: 100%;
-        }
-        .order-lg-first {
-            order: -1;
-        }
-        .order-lg-last {
-            order: 13;
-        }
-        .order-lg-0 {
-            order: 0;
-        }
-        .order-lg-1 {
-            order: 1;
-        }
-        .order-lg-2 {
-            order: 2;
-        }
-        .order-lg-3 {
-            order: 3;
-        }
-        .order-lg-4 {
-            order: 4;
-        }
-        .order-lg-5 {
-            order: 5;
-        }
-        .order-lg-6 {
-            order: 6;
-        }
-        .order-lg-7 {
-            order: 7;
-        }
-        .order-lg-8 {
-            order: 8;
-        }
-        .order-lg-9 {
-            order: 9;
-        }
-        .order-lg-10 {
-            order: 10;
-        }
-        .order-lg-11 {
-            order: 11;
-        }
-        .order-lg-12 {
-            order: 12;
-        }
-        .offset-lg-0,
-        .col-lg-offset-0 {
-            margin-left: 0;
-        }
-        .offset-lg-1,
-        .col-lg-offset-1 {
-            margin-left: 8.333333%;
-        }
-        .offset-lg-2,
-        .col-lg-offset-2 {
-            margin-left: 16.666667%;
-        }
-        .offset-lg-3,
-        .col-lg-offset-3 {
-            margin-left: 25%;
-        }
-        .offset-lg-4,
-        .col-lg-offset-4 {
-            margin-left: 33.333333%;
-        }
-        .offset-lg-5,
-        .col-lg-offset-5 {
-            margin-left: 41.666667%;
-        }
-        .offset-lg-6,
-        .col-lg-offset-6 {
-            margin-left: 50%;
-        }
-        .offset-lg-7,
-        .col-lg-offset-7 {
-            margin-left: 58.333333%;
-        }
-        .offset-lg-8,
-        .col-lg-offset-8 {
-            margin-left: 66.666667%;
-        }
-        .offset-lg-9,
-        .col-lg-offset-9 {
-            margin-left: 75%;
-        }
-        .offset-lg-10,
-        .col-lg-offset-10 {
-            margin-left: 83.333333%;
-        }
-        .offset-lg-11,
-        .col-lg-offset-11 {
-            margin-left: 91.666667%;
-        }
-    }
-
-    @media (min-width: $screen-xl) {
-        .col-xl {
-            flex-basis: 0;
-            flex-grow: 1;
-            max-width: 100%;
-        }
-        .col-xl-auto {
-            flex: 0 0 auto;
-            width: auto;
-            max-width: 100%;
-        }
-        .col-xl-1 {
-            flex: 0 0 8.333333%;
-            max-width: 8.333333%;
-        }
-        .col-xl-2 {
-            flex: 0 0 16.666667%;
-            max-width: 16.666667%;
-        }
-        .col-xl-3 {
-            flex: 0 0 25%;
-            max-width: 25%;
-        }
-        .col-xl-4 {
-            flex: 0 0 33.333333%;
-            max-width: 33.333333%;
-        }
-        .col-xl-5 {
-            flex: 0 0 41.666667%;
-            max-width: 41.666667%;
-        }
-        .col-xl-6 {
-            flex: 0 0 50%;
-            max-width: 50%;
-        }
-        .col-xl-7 {
-            flex: 0 0 58.333333%;
-            max-width: 58.333333%;
-        }
-        .col-xl-8 {
-            flex: 0 0 66.666667%;
-            max-width: 66.666667%;
-        }
-        .col-xl-9 {
-            flex: 0 0 75%;
-            max-width: 75%;
-        }
-        .col-xl-10 {
-            flex: 0 0 83.333333%;
-            max-width: 83.333333%;
-        }
-        .col-xl-11 {
-            flex: 0 0 91.666667%;
-            max-width: 91.666667%;
-        }
-        .col-xl-12 {
-            flex: 0 0 100%;
-            max-width: 100%;
-        }
-        .order-xl-first {
-            order: -1;
-        }
-        .order-xl-last {
-            order: 13;
-        }
-        .order-xl-0 {
-            order: 0;
-        }
-        .order-xl-1 {
-            order: 1;
-        }
-        .order-xl-2 {
-            order: 2;
-        }
-        .order-xl-3 {
-            order: 3;
-        }
-        .order-xl-4 {
-            order: 4;
-        }
-        .order-xl-5 {
-            order: 5;
-        }
-        .order-xl-6 {
-            order: 6;
-        }
-        .order-xl-7 {
-            order: 7;
-        }
-        .order-xl-8 {
-            order: 8;
-        }
-        .order-xl-9 {
-            order: 9;
-        }
-        .order-xl-10 {
-            order: 10;
-        }
-        .order-xl-11 {
-            order: 11;
-        }
-        .order-xl-12 {
-            order: 12;
-        }
-        .offset-xl-0,
-        .col-xl-offset-0 {
-            margin-left: 0;
-        }
-        .offset-xl-1,
-        .col-xl-offset-1 {
-            margin-left: 8.333333%;
-        }
-        .offset-xl-2,
-        .col-xl-offset-2 {
-            margin-left: 16.666667%;
-        }
-        .offset-xl-3,
-        .col-xl-offset-3 {
-            margin-left: 25%;
-        }
-        .offset-xl-4,
-        .col-xl-offset-4 {
-            margin-left: 33.333333%;
-        }
-        .offset-xl-5,
-        .col-xl-offset-5 {
-            margin-left: 41.666667%;
-        }
-        .offset-xl-6,
-        .col-xl-offset-6 {
-            margin-left: 50%;
-        }
-        .offset-xl-7,
-        .col-xl-offset-7 {
-            margin-left: 58.333333%;
-        }
-        .offset-xl-8,
-        .col-xl-offset-8 {
-            margin-left: 66.666667%;
-        }
-        .offset-xl-9,
-        .col-xl-offset-9 {
-            margin-left: 75%;
-        }
-        .offset-xl-10,
-        .col-xl-offset-10 {
-            margin-left: 83.333333%;
-        }
-        .offset-xl-11,
-        .col-xl-offset-11 {
-            margin-left: 91.666667%;
+    $breakpoints: (
+        "" "" 0 0,
+        "sm" "-sm" $screen-sm,
+        "md" "-md" $screen-md,
+        "lg" "-lg" $screen-lg,
+        "xl" "-xl" $screen-xl,
+        "xxl" "-xxl" $screen-xxl
+    );
+
+    @each $size, $suffix, $max-width in $breakpoints {
+        @media (min-width: #{$max-width}) {
+            @if $size != "" {
+                .mx-layoutgrid-fixed {
+                    max-width: calc(min(var(--max-screen-width), #{$max-width}) - 40px);
+                }
+            }
+
+            .col#{$suffix} {
+                flex-grow: 1;
+                flex-basis: 0;
+                max-width: 100%;
+            }
+
+            .col#{$suffix}-auto {
+                flex: 0 0 auto;
+                width: auto;
+                max-width: 100%;
+            }
+
+            @for $i from 1 through 12 {
+                .col#{$suffix}-#{$i} {
+                    $col: calc(12 / #{$i});
+                $width: calc(100% / $col - var(--column-gap) / $col * ($col - 1));
+                    flex: 0 0 $width;
+                    max-width: $width;
+                }
+            }
+
+            .order#{$suffix}-first {
+                order: -1;
+            }
+            .order#{$suffix}-last {
+                order: 13;
+            }
+
+            @for $i from 0 through 12 {
+                .order#{$suffix}-#{$i} {
+                    order: #{$i};
+                }
+            }
+
+            @for $i from 0 through 11 {
+                .offset#{$suffix}-#{$i},
+                .col#{$suffix}-offset-#{$i} {
+                    margin-left: calc(100% * #{$i} / 12);
+                }
+            }
         }
     }
 }
diff --git a/Source/themesource/atlas_core/web/core/widgets/_list-view.scss b/Source/themesource/atlas_core/web/core/widgets/_list-view.scss
index efef3382..23255d7f 100644
--- a/Source/themesource/atlas_core/web/core/widgets/_list-view.scss
+++ b/Source/themesource/atlas_core/web/core/widgets/_list-view.scss
@@ -16,7 +16,7 @@
         padding: 0;
         /* Clear search button (overrides load more button stying) */
         & > ul {
-            margin: 0 0 $spacing-medium;
+            margin: 0 0 var(--gutter-size);
 
             .mx-listview-empty {
                 border-style: none;
@@ -25,12 +25,12 @@
 
             & > li {
                 @include transition();
-                background-color: #fff;
-                padding: $spacing-medium;
-                border-top: 1px solid $grid-border-color;
+                background-color: var(--bg-color-secondary);
+                padding: var(--spacing-medium);
+                border-top: 1px solid var(--grid-border-color);
 
                 &:last-child {
-                    border-bottom: 1px solid $grid-border-color;
+                    border-bottom: 1px solid var(--grid-border-color);
                 }
 
                 &:focus,
@@ -41,7 +41,7 @@
         }
 
         .selected {
-            background: $color-primary-light;
+            background: var(--brand-primary-100);
         }
 
         .mx-layoutgrid {
@@ -51,7 +51,7 @@
 
     // Search bar
     .mx-listview-searchbar {
-        margin-bottom: $spacing-medium;
+        margin-bottom: var(--spacing-medium);
 
         .btn {
             width: auto;
@@ -61,7 +61,7 @@
     /* Load more button */
     .btn.mx-listview-loadMore {
         width: 100%;
-        margin: 0 0 $spacing-medium;
+        margin: 0 0 var(--spacing-medium);
     }
 
     //== Phone specific
@@ -69,7 +69,7 @@
     .profile-phone .mx-listview {
         .mx-listview-searchbar {
             margin-bottom: 3px;
-            background: #ffffff;
+            background: var(--bg-color-secondary);
             box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
 
             input {
diff --git a/Source/themesource/atlas_core/web/core/widgets/_modal.scss b/Source/themesource/atlas_core/web/core/widgets/_modal.scss
index c7fa9865..e9fefbd1 100644
--- a/Source/themesource/atlas_core/web/core/widgets/_modal.scss
+++ b/Source/themesource/atlas_core/web/core/widgets/_modal.scss
@@ -13,37 +13,39 @@
     ========================================================================== */
     .modal-dialog {
         .modal-content {
-            border: 1px solid $modal-header-border-color;
+            border: var(--border-width-default) solid var(--modal-header-border-color);
             border-radius: 4px;
             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 
             .modal-header {
                 padding: 15px 20px;
-                border-bottom-color: $modal-header-border-color;
+                border-bottom-color: var(--modal-header-border-color);
                 border-radius: 0; // Because of the class .mx-window-active in mxui.css
-                background-color: $modal-header-bg;
+                background-color: var(--modal-header-bg);
 
-                h4 {
+                h2, h4 {
                     margin: 0;
-                    color: $modal-header-color;
+                    color: var(--modal-header-color);
                     font-size: 16px;
-                    font-weight: $font-weight-bold;
+                    font-weight: var(--font-weight-header);
                 }
 
                 .close {
                     margin-top: -3px;
                     opacity: 1;
+                    font-weight: var(--font-weight-normal);
                     /* For IE8 and earlier */
-                    color: $modal-header-color;
+                    color: var(--modal-header-color);
                     text-shadow: none;
-                    &:focus-visible {
+                    &:focus {
                         border-radius: 4px;
-                        outline: 2px solid $brand-primary;
+                        outline: 2px solid var(--brand-primary);
                     }
                 }
             }
 
             .modal-body {
+                background-color: var(--modal-body-bg);
             }
 
             .modal-footer {
@@ -52,6 +54,7 @@
                 margin-top: 0;
                 padding: 20px;
                 border-style: none;
+                background-color: var(--modal-footer-bg);
             }
         }
     }
@@ -74,8 +77,8 @@
                 justify-content: flex-end;
                 margin: 0;
                 padding: 20px;
-                text-align: left;
-                border-top: 1px solid $modal-header-border-color;
+                text-align: var(--dataview-controls-alignment);
+                border-top: 1px solid var(--modal-header-border-color);
             }
         }
 
@@ -103,13 +106,13 @@
             input {
                 height: 56px;
                 padding: 12px 12px;
-                border: 1px solid #eeeeee;
-                background: #eeeeee;
+                border: 1px solid var(--bg-color-secondary);
+                background: var(--bg-color-secondary);
                 box-shadow: none;
                 font-size: 16px;
 
                 &:focus {
-                    border-color: #66afe9;
+                    border-color: var(--brand-primary-200);
                 }
             }
         }
@@ -123,10 +126,10 @@
             font-size: 16px;
         }
 
-        h4 {
+        h2, h4 {
             color: #aaaaaa;
             font-size: 20px;
-            font-weight: $font-weight-bold;
+            font-weight: var(--font-weight-bold);
         }
     }
 }
diff --git a/Source/themesource/atlas_core/web/core/widgets/_navigation-bar.scss b/Source/themesource/atlas_core/web/core/widgets/_navigation-bar.scss
index ea9656e0..2bc8e119 100644
--- a/Source/themesource/atlas_core/web/core/widgets/_navigation-bar.scss
+++ b/Source/themesource/atlas_core/web/core/widgets/_navigation-bar.scss
@@ -15,7 +15,7 @@
         margin: 0;
         border-style: none;
         border-radius: 0;
-        background-color: $navigation-bg;
+        background: var(--navigation-bg);
 
         ul.nav {
             margin: 0; // weird -margin if screen gets small (bootstrap)
@@ -23,36 +23,36 @@
             & > li.mx-navbar-item > a {
                 display: flex;
                 align-items: center;
-                padding: $navigation-item-padding;
+                padding: var(--navigation-item-padding);
                 vertical-align: middle;
-                color: $navigation-color;
+                color: var(--navigation-color);
                 border-radius: 0;
-                font-size: $navigation-font-size;
-                font-weight: $font-weight-normal;
-                border-radius: $border-radius-default;
+                font-size: var(--navigation-font-size);
+                font-weight: var(--font-weight-normal);
+                border-radius: var(--navigation-border-radius);
 
                 /* Dropdown arrow */
                 .caret {
-                    border-top-color: $navigation-color;
-                    border-bottom-color: $navigation-color;
+                    border-top-color: var(--navigation-color);
+                    border-bottom-color: var(--navigation-color);
                 }
 
                 &:hover,
                 &:focus,
                 &.active {
                     text-decoration: none;
-                    color: $navigation-color-hover;
-                    background-color: $navigation-bg-hover;
+                    color: var(--navigation-color-hover);
+                    background: var(--navigation-bg-hover);
 
                     .caret {
-                        border-top-color: $navigation-color-active;
-                        border-bottom-color: $navigation-color-active;
+                        border-top-color: var(--navigation-color-active);
+                        border-bottom-color: var(--navigation-color-active);
                     }
                 }
 
                 &.active {
-                    color: $navigation-color-active;
-                    background-color: $navigation-bg-active;
+                    color: var(--navigation-color-active);
+                    background: var(--navigation-bg-active);
                     opacity: 1;
                 }
 
@@ -67,7 +67,7 @@
                     transform: rotate(360deg);
                     border-width: 0 9px 9px 9px;
                     border-style: solid;
-                    border-color: transparent transparent $navigation-border-color transparent;
+                    border-color: transparent transparent var(--navigation-border-color) transparent;
                 }
 
                 // Image
@@ -83,12 +83,12 @@
                     top: 0;
                     margin-right: 0.5em;
                     vertical-align: middle;
-                    font-size: $navigation-glyph-size;
+                    font-size: var(--navigation-glyph-size);
                 }
             }
 
             & > .mx-navbar-item.active a {
-                color: $navigation-color-active;
+                color: var(--navigation-color-active);
             }
 
             /* When hovering or the dropdown is open */
@@ -98,22 +98,22 @@
             & > .mx-navbar-item.open > a:hover,
             & > .mx-navbar-item.open > a:focus {
                 text-decoration: none;
-                color: $navigation-color-hover;
-                background-color: $navigation-bg-hover;
+                color: var(--navigation-color-hover);
+                background: var(--navigation-bg-hover);
 
                 .caret {
-                    border-top-color: $navigation-color-hover;
-                    border-bottom-color: $navigation-color-hover;
+                    border-top-color: var(--navigation-color-hover);
+                    border-bottom-color: var(--navigation-color-hover);
                 }
             }
 
             & > .mx-navbar-item.open .dropdown-menu > li.mx-navbar-subitem.active a {
-                color: $navigation-sub-color-active;
-                background-color: $navigation-sub-bg-active;
+                color: var(--navigation-sub-color-active);
+                background: var(--navigation-sub-bg-active);
 
                 .caret {
-                    border-top-color: $navigation-sub-color-active;
-                    border-bottom-color: $navigation-sub-color-active;
+                    border-top-color: var(--navigation-sub-color-active);
+                    border-bottom-color: var(--navigation-sub-color-active);
                 }
             }
         }
@@ -124,24 +124,24 @@
             .mx-navbar-item.open .dropdown-menu {
                 padding: 0;
                 border-radius: 0;
-                background-color: $navigation-sub-bg;
+                background: var(--navigation-sub-bg);
 
                 & > li.mx-navbar-subitem > a {
                     padding: 10px 24px;
-                    color: $navigation-sub-color;
+                    color: var(--navigation-sub-color);
                     border-radius: 0;
-                    font-size: $navigation-sub-font-size;
-                    font-weight: $font-weight-normal;
+                    font-size: var(--navigation-sub-font-size);
+                    font-weight: var(--font-weight-normal);
 
                     &:hover,
                     &:focus {
-                        color: $navigation-sub-color-hover;
-                        background-color: $navigation-sub-bg-hover;
+                        color: var(--navigation-sub-color-hover);
+                        background: var(--navigation-sub-bg-hover);
                     }
 
                     &.active {
-                        color: $navigation-sub-color-active;
-                        background-color: $navigation-sub-bg-active;
+                        color: var(--navigation-sub-color-active);
+                        background: var(--navigation-sub-bg-active);
                     }
                 }
             }
diff --git a/Source/themesource/atlas_core/web/core/widgets/_navigation-list.scss b/Source/themesource/atlas_core/web/core/widgets/_navigation-list.scss
index 9dd97888..03d93941 100644
--- a/Source/themesource/atlas_core/web/core/widgets/_navigation-list.scss
+++ b/Source/themesource/atlas_core/web/core/widgets/_navigation-list.scss
@@ -18,22 +18,25 @@
 
         li.mx-navigationlist-item {
             @include transition();
-            padding: $spacing-medium;
+            padding: var(--spacing-medium);
             border-width: 1px;
             border-style: none none solid none;
-            border-color: $grid-border-color;
+            border-color: var(--grid-border-color);
             border-radius: 0;
-            background-color: $grid-bg;
+            background-color: var(--grid-bg);
 
             &:hover,
             &:focus {
                 color: inherit;
-                background-color: $grid-bg-hover;
+                background-color: var(--grid-bg-hover);
+            }
+            &:focus-visible {
+                @extend .focus-ring !optional;
             }
 
             &.active {
                 color: inherit;
-                background-color: $grid-bg-selected;
+                background-color: var(--grid-bg-selected);
             }
         }
     }
diff --git a/Source/themesource/atlas_core/web/core/widgets/_navigation-tree.scss b/Source/themesource/atlas_core/web/core/widgets/_navigation-tree.scss
index e48fe1c0..0d9067e2 100644
--- a/Source/themesource/atlas_core/web/core/widgets/_navigation-tree.scss
+++ b/Source/themesource/atlas_core/web/core/widgets/_navigation-tree.scss
@@ -12,12 +12,11 @@
        Default Mendix navigation tree
     ========================================================================== */
     .mx-navigationtree {
-        background-color: $navigation-bg;
-
         /* Every navigation item */
         .navbar-inner > ul {
             margin: 0;
             padding-left: 0;
+            background: var(--navigation-bg);
 
             & > li {
                 padding: 0;
@@ -26,19 +25,16 @@
                 & > a {
                     display: flex;
                     align-items: center;
-                    height: $navigation-item-height;
-                    padding: $navigation-item-padding;
-                    color: $navigation-color;
-                    //border-bottom: 1px solid $navigation-border-color;
-                    //border-radius: 0;
-                    background-color: $navigation-bg;
+                    height: var(--navigation-item-height);
+                    padding: var(--navigation-item-padding);
+                    color: var(--navigation-color);
                     text-shadow: none;
-                    font-size: $navigation-font-size;
-                    font-weight: $font-weight-normal;
+                    font-size: var(--navigation-font-size);
+                    font-weight: var(--font-weight-normal);
 
                     .caret {
-                        border-top-color: $navigation-color;
-                        border-bottom-color: $navigation-color;
+                        border-top-color: var(--navigation-color);
+                        border-bottom-color: var(--navigation-color);
                     }
 
                     img {
@@ -53,7 +49,7 @@
                         top: 0;
                         margin-right: 0.5em;
                         vertical-align: middle;
-                        font-size: $navigation-glyph-size;
+                        font-size: var(--navigation-glyph-size);
                     }
                 }
 
@@ -61,19 +57,19 @@
                 a:focus,
                 a.active {
                     text-decoration: none;
-                    color: $navigation-color-hover;
-                    background-color: $navigation-bg-hover;
+                    color: var(--navigation-color-hover);
+                    background: var(--navigation-bg-hover);
 
                     .caret {
-                        border-top-color: $navigation-color-active;
-                        border-bottom-color: $navigation-color-active;
+                        border-top-color: var(--navigation-color-active);
+                        border-bottom-color: var(--navigation-color-active);
                     }
                 }
 
                 a.active {
-                    color: $navigation-color-active;
-                    border-left-color: $navigation-color-active;
-                    background-color: $navigation-bg-active;
+                    color: var(--navigation-color-active);
+                    border-left-color: var(--navigation-color-active);
+                    background: var(--navigation-bg-active);
                 }
             }
         }
@@ -83,7 +79,6 @@
             & > ul {
                 margin: 0;
                 padding-left: 0;
-                background-color: $navigation-sub-bg;
 
                 li {
                     margin: 0;
@@ -91,41 +86,43 @@
                     border: 0;
 
                     a {
-                        padding: $spacing-medium;
+                        padding: var(--navigation-item-padding);
                         text-decoration: none;
-                        color: $navigation-sub-color;
+                        color: var(--navigation-sub-color);
                         border: 0;
-                        background-color: $navigation-sub-bg;
                         text-shadow: none;
-                        font-size: $navigation-sub-font-size;
-                        font-weight: $font-weight-normal;
+                        font-size: var(--navigation-sub-font-size);
+                        font-weight: var(--font-weight-normal);
                         .glyphicon,
                         .mx-icon-lined,
                         .mx-icon-filled {
-                            margin-right: $spacing-small;
+                            margin-right: var(--spacing-small);
                         }
 
                         &:hover,
-                        &:focus,
                         &.active {
-                            color: $navigation-sub-color-hover;
-                            outline: 0;
-                            background-color: $navigation-sub-bg-hover;
+                            color: var(--navigation-sub-color-hover);
+                        }
+                        &:focus-visible {
+                            @extend .focus-ring !optional;
                         }
 
                         &.active {
-                            color: $navigation-sub-color-active;
+                            color: var(--navigation-sub-color-active);
                             border: 0;
-                            background-color: $navigation-sub-bg-active;
                         }
                     }
                 }
             }
+
+            &:not(.mx-navigationtree-collapsed) {
+                border-radius: var(--navigation-border-radius);
+                background-color: var(--navigation-sub-bg);
+            }
         }
 
-        /* remove focus */
-        &:focus {
-            outline: 0;
+        &:focus-visible {
+            @extend .focus-ring !optional;
         }
     }
 }
diff --git a/Source/themesource/atlas_core/web/core/widgets/_pagination.scss b/Source/themesource/atlas_core/web/core/widgets/_pagination.scss
index 1a60d75d..46641db9 100644
--- a/Source/themesource/atlas_core/web/core/widgets/_pagination.scss
+++ b/Source/themesource/atlas_core/web/core/widgets/_pagination.scss
@@ -20,14 +20,14 @@
 
             .btn {
                 &:hover {
-                    color: $btn-default-color;
-                    background-color: $btn-default-bg-hover;
+                    color: var(--btn-default-color);
+                    background-color: var(--btn-default-bg-hover);
                 }
 
                 &:focus {
                     outline: unset;
                     outline-offset: unset;
-                    box-shadow: 0 0 0 0.3rem $color-primary-light;
+                    box-shadow: 0 0 0 0.3rem var(--brand-primary-200);
                 }
             }
 
@@ -44,8 +44,8 @@
                     margin-right: 16px;
                     padding: 4px 8px;
                     transition: all 0.2s ease-in-out;
-                    color: $font-color-default;
-                    border-radius: $border-radius-default;
+                    color: var(--font-color-default);
+                    border-radius: var(--border-radius-default);
 
                     &:last-child {
                         margin-right: 0;
@@ -53,24 +53,24 @@
 
                     &:not(.break-view) {
                         &:hover {
-                            color: $btn-default-color;
-                            background-color: $btn-default-bg-hover;
+                            color: var(--btn-default-color);
+                            background-color: var(--btn-default-bg-hover);
                         }
 
                         &:focus {
                             outline: unset;
                             outline-offset: unset;
-                            box-shadow: 0 0 0 0.3rem $color-primary-light;
+                            box-shadow: 0 0 0 0.3rem var(--brand-primary-200);
                         }
 
                         &.active {
-                            color: $btn-primary-color;
-                            background-color: $btn-primary-bg;
+                            color: var(--btn-primary-color);
+                            background-color: var(--btn-primary-bg);
                         }
 
                         &.active:hover {
-                            color: $btn-primary-color;
-                            background-color: $btn-primary-bg-hover;
+                            color: var(--btn-primary-color);
+                            background-color: var(--btn-primary-bg-hover);
                         }
                     }
                 }
diff --git a/Source/themesource/atlas_core/web/core/widgets/_pop-up-menu.scss b/Source/themesource/atlas_core/web/core/widgets/_pop-up-menu.scss
index 30f2111c..791e4e8b 100644
--- a/Source/themesource/atlas_core/web/core/widgets/_pop-up-menu.scss
+++ b/Source/themesource/atlas_core/web/core/widgets/_pop-up-menu.scss
@@ -29,7 +29,7 @@
         flex-direction: column;
         width: max-content;
         border-radius: 8px;
-        background-color: $bg-color;
+        background-color: var(--bg-color);
         box-shadow: 0 2px 20px 1px rgba(5, 15, 129, 0.05), 0 2px 16px 0 rgba(33, 43, 54, 0.08);
 
         &.popupmenu-position-left:not(.popup-portal) {
@@ -81,44 +81,44 @@
     .popupmenu-basic-divider {
         width: 100%;
         height: 1px;
-        background-color: $brand-default;
+        background-color: var(--brand-default);
     }
 
     .popupmenu-basic-item {
         padding: 12px 16px;
-        color: $font-color-default;
+        color: var(--font-color-default);
         font-size: 14px;
 
         &:hover,
         &:focus,
         &:active {
             cursor: pointer;
-            border-color: $bg-color-secondary;
-            background-color: $bg-color-secondary;
+            border-color: var(--bg-color-secondary);
+            background-color: var(--bg-color-secondary);
         }
 
         &-inverse {
-            color: $brand-inverse;
+            color: var(--brand-primary-600);
         }
 
         &-primary {
-            color: $brand-primary;
+            color: var(--brand-primary);
         }
 
         &-info {
-            color: $brand-info;
+            color: var(--brand-primary-300);
         }
 
         &-success {
-            color: $brand-success;
+            color: var(--brand-success);
         }
 
         &-warning {
-            color: $brand-warning;
+            color: var(--brand-warning);
         }
 
         &-danger {
-            color: $brand-danger;
+            color: var(--brand-danger);
         }
     }
 
@@ -127,8 +127,8 @@
         &:focus,
         &:active {
             cursor: pointer;
-            border-color: $bg-color-secondary;
-            background-color: $bg-color-secondary;
+            border-color: var(--bg-color-secondary);
+            background-color: var(--bg-color-secondary);
         }
     }
 }
diff --git a/Source/themesource/atlas_core/web/core/widgets/_progress-bar.scss b/Source/themesource/atlas_core/web/core/widgets/_progress-bar.scss
index 474fb70d..801e4e7a 100644
--- a/Source/themesource/atlas_core/web/core/widgets/_progress-bar.scss
+++ b/Source/themesource/atlas_core/web/core/widgets/_progress-bar.scss
@@ -25,8 +25,8 @@
         transition: width 0.6s ease;
         text-align: center;
         color: #ffffff;
-        border-radius: $border-radius-default;
-        font-weight: $font-weight-semibold;
+        border-radius: var(--border-radius-default);
+        font-weight: var(--font-weight-semibold);
     }
 
     .progress-striped .progress-bar,
diff --git a/Source/themesource/atlas_core/web/core/widgets/_progress-circle.scss b/Source/themesource/atlas_core/web/core/widgets/_progress-circle.scss
index 86b28b51..658528f4 100644
--- a/Source/themesource/atlas_core/web/core/widgets/_progress-circle.scss
+++ b/Source/themesource/atlas_core/web/core/widgets/_progress-circle.scss
@@ -17,6 +17,6 @@
     }
 
     .widget-progress-circle-trail-path {
-        stroke: $bg-color;
+        stroke: var(--bg-color);
     }
 }
diff --git a/Source/themesource/atlas_core/web/core/widgets/_progress.scss b/Source/themesource/atlas_core/web/core/widgets/_progress.scss
index fc87d33f..9fa732c2 100644
--- a/Source/themesource/atlas_core/web/core/widgets/_progress.scss
+++ b/Source/themesource/atlas_core/web/core/widgets/_progress.scss
@@ -13,11 +13,11 @@
     ========================================================================== */
 
     .mx-progress {
-        color: $font-color-default;
-        background: $bg-color-secondary;
+        color: var(--font-color-default);
+        background: var(--bg-color-secondary);
 
         .mx-progress-message {
-            color: $font-color-default;
+            color: var(--font-color-default);
         }
 
         .mx-progress-indicator {
@@ -29,7 +29,7 @@
             margin: auto;
             padding: 0;
             border-radius: 0;
-            background: $gray-lighter;
+            background: var(--gray-50);
 
             &:before,
             &:after {
@@ -41,7 +41,7 @@
                 height: 2px;
                 content: "";
                 transform: translate3d(-100%, 0, 0);
-                background: $brand-primary;
+                background: var(--brand-primary);
             }
 
             &::before {
diff --git a/Source/themesource/atlas_core/web/core/widgets/_radio-button.scss b/Source/themesource/atlas_core/web/core/widgets/_radio-button.scss
index ad2771a3..5edc675c 100644
--- a/Source/themesource/atlas_core/web/core/widgets/_radio-button.scss
+++ b/Source/themesource/atlas_core/web/core/widgets/_radio-button.scss
@@ -54,7 +54,7 @@
             width: 100%;
             height: 100%;
             content: "";
-            border: 1px solid $form-input-border-color;
+            border: var(--border-width-default) solid var(--form-input-border-color);
             background-color: transparent;
         }
 
@@ -65,7 +65,12 @@
             height: 50%;
             transform: translate(-50%, -50%);
             pointer-events: none;
-            background-color: $form-input-border-focus-color;
+            background-color: var(--form-input-border-focus-color);
+        }
+        
+        &:focus-visible {
+            border-radius: 100%;
+            @extend .focus-ring !optional;
         }
 
         &:not(:checked):after {
@@ -74,7 +79,7 @@
         }
 
         &:not(:disabled):not(:checked):hover:after {
-            background-color: $form-input-bg-hover;
+            background-color: var(--form-input-bg-hover);
         }
 
         &:checked:after,
@@ -85,24 +90,24 @@
         }
 
         &:checked:before {
-            border-color: $form-input-border-focus-color;
-            background-color: $form-input-bg;
+            border-color: var(--form-input-border-focus-color);
+            background-color: var(--form-input-bg);
         }
 
         &:disabled:before {
-            background-color: $form-input-bg-disabled;
+            background-color: var(--form-input-bg-disabled);
         }
 
         &:checked:disabled:before {
-            border-color: rgba($form-input-border-focus-color, 0.4);
+            border-color: color-mix(in srgb, var(--form-input-border-focus-color) 40%, transparent);
         }
 
         &:checked:disabled:after {
-            background-color: rgba($form-input-border-focus-color, 0.4);
+            background-color: color-mix(in srgb, var(--form-input-border-focus-color) 40%, transparent);
         }
 
         & + label {
-            margin-left: $form-label-gutter;
+            margin-left: var(--form-label-gutter);
         }
     }
 }
diff --git a/Source/themesource/atlas_core/web/core/widgets/_range-slider.scss b/Source/themesource/atlas_core/web/core/widgets/_range-slider.scss
index 4cb59d45..7f84a95a 100644
--- a/Source/themesource/atlas_core/web/core/widgets/_range-slider.scss
+++ b/Source/themesource/atlas_core/web/core/widgets/_range-slider.scss
@@ -18,13 +18,13 @@
         padding: 5px 10px;
 
         .rc-slider-handle {
-            border-color: $brand-default;
+            border-color: var(--brand-default);
         }
 
         .rc-slider.rc-slider-with-marks {
             padding-bottom: 25px;
         }
 
-        @include slider-color-variant($brand-primary);
+        @include slider-color-variant(var(--brand-primary));
     }
 }
diff --git a/Source/themesource/atlas_core/web/core/widgets/_rating.scss b/Source/themesource/atlas_core/web/core/widgets/_rating.scss
index 14c65bef..047873d2 100644
--- a/Source/themesource/atlas_core/web/core/widgets/_rating.scss
+++ b/Source/themesource/atlas_core/web/core/widgets/_rating.scss
@@ -42,17 +42,10 @@
         }
 
         .rating-item {
-            &:focus:not(:focus-visible) {
-                .rating-image,
-                .rating-icon {
-                    outline: none;
-                }
-            }
-
             &:focus-visible {
                 .rating-image,
                 .rating-icon {
-                    outline: 1px solid $brand-primary;
+                    @extend .focus-ring !optional;
                 }
             }
         }
diff --git a/Source/themesource/atlas_core/web/core/widgets/_scroll-container-react.scss b/Source/themesource/atlas_core/web/core/widgets/_scroll-container-react.scss
index 451a43eb..871d5620 100644
--- a/Source/themesource/atlas_core/web/core/widgets/_scroll-container-react.scss
+++ b/Source/themesource/atlas_core/web/core/widgets/_scroll-container-react.scss
@@ -37,8 +37,6 @@
     // This is a duplication because we need to be able to use that value in calculation on
     // other levels of scroll container while --sidebar-size is available on the region level and not higher
 
-    $sidebar-animation-duration: 250ms;
-
     .mx-page {
         display: flex;
         flex-direction: column;
@@ -80,7 +78,7 @@
         .mx-scrollcontainer-left,
         .mx-scrollcontainer-right,
         .mx-scrollcontainer-center,
-        .mx-scrollcontainer-middle {
+        d .mx-scrollcontainer-middle {
             overflow: auto;
         }
     }
@@ -97,6 +95,8 @@
     .mx-scrollcontainer-middle,
     .mx-scrollcontainer-center {
         flex-grow: 1;
+        display: flex;
+        flex-direction: column;
     }
 
     // if there is a nested scroll container we always want
@@ -122,8 +122,8 @@
     // Animate transitions for toggleable sidebars
     .mx-scrollcontainer-left.mx-scrollcontainer-toggleable,
     .mx-scrollcontainer-right.mx-scrollcontainer-toggleable {
-        transition: flex-basis $sidebar-animation-duration ease-in, margin-right $sidebar-animation-duration ease-in,
-            margin-left $sidebar-animation-duration ease-in;
+        transition: flex-basis var(--navsidebar-animation-duration) var(--navsidebar-animation-function), margin-right var(--navsidebar-animation-duration) var(--navsidebar-animation-function),
+            margin-left var(--navsidebar-animation-duration) var(--navsidebar-animation-function);
         z-index: 1;
     }
 
@@ -168,7 +168,7 @@
 
     // Push content aside animation
     .mx-scrollcontainer-push > :not(.mx-scrollcontainer-toggleable) {
-        transition: transform $sidebar-animation-duration ease-in;
+        transition: transform var(--navsidebar-animation-duration) var(--navsidebar-animation-function);
     }
 
     .mx-scrollcontainer-push.mx-scrollcontainer-open > :not(.mx-scrollcontainer-toggleable) {
@@ -189,15 +189,9 @@
     }
 
     .mx-scrollcontainer-wrapper {
-        height: 100%;
-
         &:not(.mx-scrollcontainer-nested) {
             -webkit-overflow-scrolling: touch;
         }
-
-        & > .mx-placeholder {
-            height: 100%;
-        }
     }
 
     // for push aside and slide over the main part should be non-interactive if sidebar is open
@@ -210,7 +204,8 @@
         pointer-events: auto;
     }
 
-    .mx-scrollcontainer-center {
+    .mx-scrollcontainer-center,
+    .mx-scrollcontainer-middle {
         .mx-layoutgrid,
         .mx-layoutgrid-fluid {
             @include layout-spacing($type: padding, $direction: all, $device: responsive);
@@ -221,4 +216,30 @@
             }
         }
     }
-}
+
+
+    // make the first child of the MAIN part of the scroll container to grow full height
+    .region-content {
+        display: flex;
+        flex-direction: column;
+
+        & > .mx-scrollcontainer-wrapper{
+            height: 100%;
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+
+            & > .mx-placeholder{
+                height: 100%;
+                flex-grow: 1;
+                display: flex;
+                flex-direction: column;
+
+                & > *:only-child{
+                    height: 100%;
+                    flex-grow: 1;
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/Source/themesource/atlas_core/web/core/widgets/_simple-menu-bar.scss b/Source/themesource/atlas_core/web/core/widgets/_simple-menu-bar.scss
index f252fe19..1e45c262 100644
--- a/Source/themesource/atlas_core/web/core/widgets/_simple-menu-bar.scss
+++ b/Source/themesource/atlas_core/web/core/widgets/_simple-menu-bar.scss
@@ -12,7 +12,7 @@
     ========================================================================== */
     .mx-menubar {
         padding: 0;
-        background-color: $navigation-bg;
+        background: var(--navigation-bg);
 
         ul.mx-menubar-list {
             display: flex;
@@ -28,12 +28,12 @@
                     align-items: center;
                     justify-content: center;
                     height: 100%;
-                    padding: $navigation-item-padding;
+                    padding: var(--navigation-item-padding);
                     white-space: nowrap;
-                    color: $navigation-color;
+                    color: var(--navigation-color);
                     border-radius: 0;
-                    font-size: $navigation-font-size;
-                    font-weight: $font-weight-normal;
+                    font-size: var(--navigation-font-size);
+                    font-weight: var(--font-weight-normal);
 
                     img {
                         margin-right: 0.5em;
@@ -45,7 +45,7 @@
                         top: -1px;
                         margin-right: 0.5em;
                         vertical-align: middle;
-                        font-size: $navigation-glyph-size;
+                        font-size: var(--navigation-glyph-size);
                     }
                 }
 
@@ -55,13 +55,13 @@
                 &:focus a,
                 &.active a {
                     text-decoration: none;
-                    color: $navigation-color-hover;
-                    background-color: $navigation-bg-hover;
+                    color: var(--navigation-color-hover);
+                    background: var(--navigation-bg-hover);
                 }
 
                 &.active a {
-                    color: $navigation-color-active;
-                    background-color: $navigation-bg-active;
+                    color: var(--navigation-color-active);
+                    background: var(--navigation-bg-active);
                 }
             }
         }
@@ -74,7 +74,7 @@
 
     // Vertical variation specifics
     .mx-menubar-vertical {
-        background-color: $navigation-bg;
+        background: var(--navigation-bg);
 
         ul.mx-menubar-list {
             display: flex;
@@ -84,7 +84,7 @@
                 display: block;
 
                 a {
-                    border-bottom: 1px solid $navigation-border-color;
+                    border-bottom: 1px solid var(--navigation-border-color);
                 }
             }
         }
@@ -131,18 +131,18 @@
     // When used in topbar
     .region-topbar {
         .mx-menubar {
-            background-color: $navtopbar-bg;
+            background: var(--navtopbar-bg);
 
             ul.mx-menubar-list {
                 li.mx-menubar-item {
                     a {
-                        color: $navtopbar-color;
-                        font-size: $navtopbar-font-size;
+                        color: var(--navtopbar-color);
+                        font-size: var(--navtopbar-font-size);
 
                         .glyphicon,
                         .mx-icon-lined,
                         .mx-icon-filled {
-                            font-size: $navtopbar-glyph-size;
+                            font-size: var(--navtopbar-glyph-size);
                         }
                     }
 
@@ -151,13 +151,13 @@
                     &:hover a,
                     &:focus a,
                     &.active a {
-                        color: $navtopbar-color-hover;
-                        background-color: $navtopbar-bg-hover;
+                        color: var(--navtopbar-color-hover);
+                        background: var(--navtopbar-bg-hover);
                     }
 
                     &.active a {
-                        color: $navtopbar-color-active;
-                        background-color: $navtopbar-bg-active;
+                        color: var(--navtopbar-color-active);
+                        background: var(--navtopbar-bg-active);
                     }
                 }
             }
@@ -165,13 +165,13 @@
 
         // Vertical variation specifics
         .mx-menubar-vertical {
-            background-color: $navtopbar-bg;
+            background: var(--navtopbar-bg);
 
             ul.mx-menubar-list {
                 li.mx-menubar-item {
                     a {
-                        height: $navigation-item-height;
-                        border-color: $navtopbar-border-color;
+                        height: var(--navigation-item-height);
+                        border-color: var(--navtopbar-border-color);
                     }
                 }
             }
@@ -181,18 +181,18 @@
     // When used in sidebar
     .region-sidebar {
         .mx-menubar {
-            background-color: $navsidebar-bg;
+            background: var(--navsidebar-bg);
 
             ul.mx-menubar-list {
                 li.mx-menubar-item {
                     a {
-                        color: $navsidebar-color;
-                        font-size: $navsidebar-font-size;
+                        color: var(--navsidebar-color);
+                        font-size: var(--navsidebar-font-size);
 
                         .glyphicon,
                         .mx-icon-lined,
                         .mx-icon-filled {
-                            font-size: $navsidebar-glyph-size;
+                            font-size: var(--navsidebar-glyph-size);
                         }
                     }
 
@@ -201,13 +201,13 @@
                     &:hover a,
                     &:focus a,
                     &.active a {
-                        color: $navsidebar-color-hover;
-                        background-color: $navsidebar-bg-hover;
+                        color: var(--navsidebar-color-hover);
+                        background: var(--navsidebar-bg-hover);
                     }
 
                     &.active a {
-                        color: $navsidebar-color-active;
-                        background-color: $navsidebar-bg-active;
+                        color: var(--navsidebar-color-active);
+                        background: var(--navsidebar-bg-active);
                     }
                 }
             }
@@ -215,12 +215,12 @@
 
         // Vertical variation specifics
         .mx-menubar-vertical {
-            background-color: $navsidebar-bg;
+            background: var(--navsidebar-bg);
 
             ul.mx-menubar-list {
                 li.mx-menubar-item {
                     a {
-                        border-color: $navsidebar-border-color;
+                        border-color: var(--navsidebar-border-color);
                     }
                 }
             }
diff --git a/Source/themesource/atlas_core/web/core/widgets/_slider.scss b/Source/themesource/atlas_core/web/core/widgets/_slider.scss
index e4f1fce4..3c80e10a 100644
--- a/Source/themesource/atlas_core/web/core/widgets/_slider.scss
+++ b/Source/themesource/atlas_core/web/core/widgets/_slider.scss
@@ -15,17 +15,18 @@
     ========================================================================== */
 
     .widget-slider {
+        flex: auto;
         margin-bottom: 16px;
         padding: 5px 10px;
 
         .rc-slider-handle {
-            border-color: $brand-default;
+            border-color: var(--brand-default);
         }
 
         .rc-slider.rc-slider-with-marks {
             padding-bottom: 25px;
         }
 
-        @include slider-color-variant($brand-primary);
+        @include slider-color-variant(var(--brand-primary));
     }
 }
diff --git a/Source/themesource/atlas_core/web/core/widgets/_switch.scss b/Source/themesource/atlas_core/web/core/widgets/_switch.scss
index 01b89c4a..09de54a7 100644
--- a/Source/themesource/atlas_core/web/core/widgets/_switch.scss
+++ b/Source/themesource/atlas_core/web/core/widgets/_switch.scss
@@ -15,7 +15,7 @@ $default-ios-color: rgb(100, 189, 99);
 }
 
 @mixin bootstrap-style-android($brand-style) {
-    background-color: lighten($brand-style, 10%);
+    background-color: color-mix(in srgb, $brand-style, white 10%);
 }
 
 @mixin style($brand-key, $brand-variable) {
@@ -52,27 +52,27 @@ $default-ios-color: rgb(100, 189, 99);
             }
 
             &.widget-switch-btn-wrapper-success {
-                @include bootstrap-style-ios($brand-success);
+                @include bootstrap-style-ios(var(--brand-success));
             }
 
             &.widget-switch-btn-wrapper-info {
-                @include bootstrap-style-ios($brand-info);
+                @include bootstrap-style-ios(var(--brand-primary-300));
             }
 
             &.widget-switch-btn-wrapper-primary {
-                @include bootstrap-style-ios($brand-primary);
+                @include bootstrap-style-ios(var(--brand-primary));
             }
 
             &.widget-switch-btn-wrapper-warning {
-                @include bootstrap-style-ios($brand-warning);
+                @include bootstrap-style-ios(var(--brand-warning));
             }
 
             &.widget-switch-btn-wrapper-danger {
-                @include bootstrap-style-ios($brand-danger);
+                @include bootstrap-style-ios(var(--brand-danger));
             }
 
             &.widget-switch-btn-wrapper-inverse {
-                @include bootstrap-style-ios($brand-inverse);
+                @include bootstrap-style-ios(var(--brand-primary-600));
             }
         }
     }
@@ -91,50 +91,50 @@ $default-ios-color: rgb(100, 189, 99);
             }
 
             &.widget-switch-btn-wrapper-success {
-                @include bootstrap-style-android($brand-success);
+                @include bootstrap-style-android(var(--brand-success));
 
                 .widget-switch-btn {
-                    background: $brand-success;
+                    background: var(--brand-success);
                 }
             }
 
             &.widget-switch-btn-wrapper-info {
-                @include bootstrap-style-android($brand-info);
+                @include bootstrap-style-android(var(--brand-primary-300));
 
                 .widget-switch-btn {
-                    background: $brand-info;
+                    background: var(--brand-primary-300);
                 }
             }
 
             &.widget-switch-btn-wrapper-primary {
-                @include bootstrap-style-android($brand-primary);
+                @include bootstrap-style-android(var(--brand-primary));
 
                 .widget-switch-btn {
-                    background: $brand-primary;
+                    background: var(--brand-primary);
                 }
             }
 
             &.widget-switch-btn-wrapper-warning {
-                @include bootstrap-style-android($brand-warning);
+                @include bootstrap-style-android(var(--brand-warning));
 
                 .widget-switch-btn {
-                    background: $brand-warning;
+                    background: var(--brand-warning);
                 }
             }
 
             &.widget-switch-btn-wrapper-danger {
-                @include bootstrap-style-android($brand-danger);
+                @include bootstrap-style-android(var(--brand-danger));
 
                 .widget-switch-btn {
-                    background: $brand-danger;
+                    background: var(--brand-danger);
                 }
             }
 
             &.widget-switch-btn-wrapper-inverse {
-                @include bootstrap-style-android($brand-inverse);
+                @include bootstrap-style-android(var(--brand-primary-600));
 
                 .widget-switch-btn {
-                    background: $brand-inverse;
+                    background: var(--brand-primary-600);
                 }
             }
         }
@@ -143,16 +143,16 @@ $default-ios-color: rgb(100, 189, 99);
 
 @mixin switch() {
     .widget-switch-btn-wrapper {
-        &:focus {
-            outline: 1px solid $brand-primary;
+        &:focus-visible {
+            @extend .focus-ring !optional;
         }
     }
 
-    @include style("primary", $brand-primary);
-    @include style("secondary", $brand-default);
-    @include style("success", $brand-success);
-    @include style("warning", $brand-warning);
-    @include style("danger", $brand-danger);
+    @include style("primary", var(--brand-primary));
+    @include style("secondary", var(--brand-default));
+    @include style("success", var(--brand-success));
+    @include style("warning", var(--brand-warning));
+    @include style("danger", var(--brand-danger));
 
     // below is maintained for backwards compatibility prior to Switch 3.0.0.
     div {
diff --git a/Source/themesource/atlas_core/web/core/widgets/_tab-container.scss b/Source/themesource/atlas_core/web/core/widgets/_tab-container.scss
index 6720d8d3..b2907446 100644
--- a/Source/themesource/atlas_core/web/core/widgets/_tab-container.scss
+++ b/Source/themesource/atlas_core/web/core/widgets/_tab-container.scss
@@ -15,8 +15,8 @@
 
     .mx-tabcontainer {
         .mx-tabcontainer-tabs {
-            margin-bottom: $spacing-medium;
-            border-color: $tabs-border-color;
+            margin-bottom: var(--spacing-medium);
+            border-color: var(--tabs-border-color);
             display: flex;
 
             > li {
@@ -26,23 +26,25 @@
             & > li > a {
                 margin-right: 0;
                 transition: all 0.2s ease-in-out;
-                color: $tabs-color;
-                font-weight: $font-weight-normal;
-                border-radius: $border-radius-default $border-radius-default 0 0;
+                color: var(--tabs-color);
+                font-weight: var(--font-weight-normal);
+                border-radius: var(--border-radius-default) var(--border-radius-default) 0 0;
 
-                &:hover,
-                &:focus {
-                    background-color: $tabs-bg-hover;
+                &:hover {
+                    background-color: var(--tabs-bg-hover);
+                }
+                &:focus-visible {
+                    @extend .focus-ring !optional;
                 }
             }
 
             & > li.active > a,
             & > li.active > a:hover,
             & > li.active > a:focus {
-                color: $tabs-color-active;
-                border: 1px solid $tabs-border-color;
-                border-bottom-color: #fff;
-                background-color: $tabs-bg;
+                color: var(--tabs-color-active);
+                border: 1px solid var(--tabs-border-color);
+                border-bottom-color: var(--bg-color-secondary);
+                background-color: var(--tabs-bg);
             }
         }
     }
@@ -53,7 +55,7 @@
             margin: 0;
             text-align: center;
             border-style: none;
-            background-color: $brand-primary;
+            background-color: var(--brand-primary);
 
             li {
                 display: table-cell;
@@ -67,13 +69,13 @@
                 a {
                     padding: 16px;
                     text-transform: uppercase;
-                    color: #ffffff;
+                    color: var(--font-color-contrast);
                     border-width: 0 1px 0 0;
                     border-style: solid;
                     border-color: rgba(255, 255, 255, 0.3);
                     border-radius: 0;
                     font-size: 12px;
-                    font-weight: $font-weight-normal;
+                    font-weight: var(--font-weight-normal);
 
                     &:hover,
                     &:focus {
@@ -91,20 +93,20 @@
                     color: #ffffff;
                     border-style: none;
                     border-radius: 0;
-                    background-color: mix($brand-primary, #000000, 80%);
+                    background-color: var(--brand-primary-900);
                 }
             }
         }
     }
 
     .mx-tabcontainer-badge {
-        margin-left: $spacing-small;
-        border-radius: $font-size-small;
-        background-color: $label-primary-bg;
-        color: $label-primary-color;
-        font-size: $font-size-small;
-        font-weight: $font-weight-bold;
+        margin-left: var(--spacing-small);
+        border-radius: var(--font-size-small);
+        background-color: var(--label-primary-bg);
+        color: var(--label-primary-color);
+        font-size: var(--font-size-small);
+        font-weight: var(--font-weight-bold);
         line-height: 1;
-        padding: $spacing-small/2 $spacing-small;
+        padding: calc(var(--spacing-small) / 2) var(--spacing-small);
     }
 }
diff --git a/Source/themesource/atlas_core/web/core/widgets/_table.scss b/Source/themesource/atlas_core/web/core/widgets/_table.scss
index 0e8aa2c3..54d4727b 100644
--- a/Source/themesource/atlas_core/web/core/widgets/_table.scss
+++ b/Source/themesource/atlas_core/web/core/widgets/_table.scss
@@ -13,7 +13,7 @@
     ========================================================================== */
 
     th {
-        font-weight: $font-weight-bold;
+        font-weight: var(--font-weight-bold);
     }
 
     html body .mx-page table.mx-table {
@@ -31,13 +31,13 @@
             > tr {
                 /* Table header */
                 > th {
-                    padding: $padding-table-cell-top $padding-table-cell-right $padding-table-cell-bottom
-                        $padding-table-cell-left;
+                    padding: var(--padding-table-cell-top) var(--padding-table-cell-right)
+                        var(--padding-table-cell-bottom) var(--padding-table-cell-left);
 
                     s * {
-                        color: $form-label-color;
-                        font-weight: $font-weight-bold;
-                        font-weight: $form-label-weight;
+                        color: var(--form-label-color);
+                        font-weight: var(--font-weight-bold);
+                        font-weight: var(--form-label-weight);
                     }
 
                     > label {
@@ -48,8 +48,8 @@
 
                 /* Table cells */
                 > td {
-                    padding: $padding-table-cell-top $padding-table-cell-right $padding-table-cell-bottom
-                        $padding-table-cell-left;
+                    padding: var(--padding-table-cell-top) var(--padding-table-cell-right)
+                        var(--padding-table-cell-bottom) var(--padding-table-cell-left);
 
                     > div > label,
                     .mx-referenceselector-input-wrapper label {
@@ -67,8 +67,8 @@
             > tr {
                 > th,
                 > td {
-                    padding: $padding-table-cell-top $padding-table-cell-right $padding-table-cell-bottom
-                        $padding-table-cell-left;
+                    padding: var(--padding-table-cell-top) var(--padding-table-cell-right)
+                        var(--padding-table-cell-bottom) var(--padding-table-cell-left);
                 }
             }
         }
@@ -80,8 +80,8 @@
             > tr {
                 > th,
                 > td {
-                    padding: $padding-table-cell-top $padding-table-cell-right $padding-table-cell-bottom
-                        $padding-table-cell-left;
+                    padding: var(--padding-table-cell-top) var(--padding-table-cell-right)
+                        var(--padding-table-cell-bottom) var(--padding-table-cell-left);
                 }
             }
         }
diff --git a/Source/themesource/atlas_core/web/core/widgets/_template-grid.scss b/Source/themesource/atlas_core/web/core/widgets/_template-grid.scss
index 7c9ecdb9..db9f9b03 100644
--- a/Source/themesource/atlas_core/web/core/widgets/_template-grid.scss
+++ b/Source/themesource/atlas_core/web/core/widgets/_template-grid.scss
@@ -18,16 +18,17 @@
         }
 
         .mx-templategrid-item {
-            padding: $grid-padding-top $grid-padding-right $grid-padding-bottom $grid-padding-left;
+            padding: var(--grid-padding-top) var(--grid-padding-right) var(--grid-padding-bottom)
+                var(--grid-padding-left);
             cursor: default;
-            background-color: $grid-bg;
+            background-color: var(--grid-bg);
 
             &:hover {
                 background-color: transparent;
             }
 
             &.selected {
-                background-color: $grid-bg-selected !important;
+                background-color: var(--grid-bg-selected) !important;
             }
         }
 
diff --git a/Source/themesource/atlas_core/web/core/widgets/_timeline.scss b/Source/themesource/atlas_core/web/core/widgets/_timeline.scss
index f1815705..f18213bd 100644
--- a/Source/themesource/atlas_core/web/core/widgets/_timeline.scss
+++ b/Source/themesource/atlas_core/web/core/widgets/_timeline.scss
@@ -16,20 +16,20 @@
     .widget-timeline-date-header {
         display: flex;
         justify-content: center;
-        width: $timeline-grouping-size;
+        width: var(--timeline-grouping-size);
         overflow-wrap: break-word;
-        padding: $spacing-small;
-        border: 1px solid $timeline-grouping-border-color;
-        border-radius: $timeline-grouping-border-radius;
+        padding: var(--spacing-small);
+        border: 1px solid var(--timeline-grouping-border-color);
+        border-radius: var(--timeline-grouping-border-radius);
     }
 
     //Timeline entries
     .widget-timeline-events-wrapper {
         display: flex;
         flex: 1;
-        margin-left: $timeline-grouping-size/2;
-        padding: $spacing-large 0 0 0;
-        border-left: 1px solid $timeline-border-color;
+        margin-left: calc(var(--timeline-grouping-size) / 2);
+        padding: var(--spacing-large) 0 0 0;
+        border-left: 1px solid var(--timeline-border-color);
 
         ul {
             flex: 1;
@@ -44,8 +44,8 @@
         flex: 1;
         position: relative;
         margin-left: -1px;
-        padding: 0 $spacing-large $spacing-large $spacing-large;
-        margin-bottom: $spacing-medium;
+        padding: 0 var(--spacing-large) var(--spacing-large) var(--spacing-large);
+        margin-bottom: var(--spacing-medium);
 
         &.clickable {
             cursor: pointer;
@@ -71,7 +71,7 @@
         .glyphicon,
         .mx-icon-lined,
         .mx-icon-filled {
-            font-size: $timeline-icon-size;
+            font-size: var(--timeline-icon-size);
         }
 
         img {
@@ -91,7 +91,7 @@
         .widget-timeline-info-wrapper {
             flex: 1;
             order: 1;
-            margin-right: $spacing-medium;
+            margin-right: var(--spacing-medium);
         }
     }
 
@@ -100,7 +100,7 @@
 
         .widget-timeline-date-time-wrapper {
             order: 1;
-            margin-right: $spacing-medium;
+            margin-right: var(--spacing-medium);
         }
 
         .widget-timeline-info-wrapper {
@@ -111,10 +111,10 @@
 
     //Timeline entry components
     .widget-timeline-icon-circle {
-        width: $timeline-icon-size;
-        height: $timeline-icon-size;
+        width: var(--timeline-icon-size);
+        height: var(--timeline-icon-size);
         border-radius: 50%;
-        background-color: $timeline-icon-color;
+        background-color: var(--timeline-icon-color);
     }
 
     .widget-timeline-title {
@@ -129,15 +129,15 @@
 
     .widget-eventTime {
         @extend h5;
-        color: $timeline-event-time-color;
+        color: var(--timeline-event-time-color);
     }
 
     .timeline-entry-image {
         display: flex;
         justify-content: center;
         align-content: center;
-        border-radius: $border-radius-default;
-        height: $timeline-image-size;
-        width: $timeline-image-size;
+        border-radius: var(--border-radius-default);
+        height: var(--timeline-image-size);
+        width: var(--timeline-image-size);
     }
 }
diff --git a/Source/themesource/atlas_core/web/core/widgets/_typography.scss b/Source/themesource/atlas_core/web/core/widgets/_typography.scss
index 2b001f30..4ae6d595 100644
--- a/Source/themesource/atlas_core/web/core/widgets/_typography.scss
+++ b/Source/themesource/atlas_core/web/core/widgets/_typography.scss
@@ -11,51 +11,51 @@
     ========================================================================== */
 
     p {
-        line-height: $line-height-base * 1.25;
-        margin: 0 0 $spacing-small;
+        line-height: calc(var(--line-height-base) * 1.25);
+        margin: 0 0 var(--spacing-small);
     }
 
     .mx-title {
-        margin: $font-header-margin;
-        color: $font-color-header;
-        font-size: $font-size-h1;
-        font-weight: $font-weight-header;
+        margin: var(--font-header-margin);
+        color: var(--font-color-header);
+        font-size: var(--font-size-h1);
+        font-weight: var(--font-weight-header);
     }
 
     h1,
     .h1,
     .h1 > * {
-        font-size: $font-size-h1;
+        font-size: var(--font-size-h1);
     }
 
     h2,
     .h2,
     .h2 > * {
-        font-size: $font-size-h2;
+        font-size: var(--font-size-h2);
     }
 
     h3,
     .h3,
     .h3 > * {
-        font-size: $font-size-h3;
+        font-size: var(--font-size-h3);
     }
 
     h4,
     .h4,
     .h4 > * {
-        font-size: $font-size-h4;
+        font-size: var(--font-size-h4);
     }
 
     h5,
     .h5,
     .h5 > * {
-        font-size: $font-size-h5;
+        font-size: var(--font-size-h5);
     }
 
     h6,
     .h6,
     .h6 > * {
-        font-size: $font-size-h6;
+        font-size: var(--font-size-h6);
     }
 
     h1,
@@ -70,9 +70,9 @@
     .h4,
     .h5,
     .h6 {
-        margin: $font-header-margin;
-        color: $font-color-header;
-        font-weight: $font-weight-header;
+        margin: var(--font-header-margin);
+        color: var(--font-color-header);
+        font-weight: var(--font-weight-header);
         line-height: 1.3;
     }
 }
diff --git a/Source/themesource/atlas_core/web/core/widgetscustom/_dijit-widget.scss b/Source/themesource/atlas_core/web/core/widgetscustom/_dijit-widget.scss
index 8e338f7e..abe78e42 100644
--- a/Source/themesource/atlas_core/web/core/widgetscustom/_dijit-widget.scss
+++ b/Source/themesource/atlas_core/web/core/widgetscustom/_dijit-widget.scss
@@ -26,7 +26,7 @@
     .mx-tooltip {
         .dijitTooltipContainer {
             border-width: 1px;
-            border-color: $gray-light;
+            border-color: var(--gray-300);
             border-radius: 4px;
             background: #ffffff;
             box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
@@ -47,7 +47,7 @@
             border-width: 10px 10px 10px 0;
             border-style: solid;
             border-color: transparent;
-            border-right-color: $gray-light;
+            border-right-color: var(--gray-300);
         }
     }
 
@@ -141,7 +141,7 @@
             margin-top: 0; // No top margin because there is no parent with margin bottom
             padding: 12px 8px;
             border-radius: 3px;
-            background: $brand-inverse;
+            background: var(--brand-primary-600);
 
             &:after {
                 position: absolute;
@@ -154,7 +154,7 @@
                 pointer-events: none;
                 border: medium solid transparent;
                 border-width: 8px;
-                border-bottom-color: $brand-inverse;
+                border-bottom-color: var(--brand-primary-600);
             }
 
             // Menu item
@@ -176,7 +176,7 @@
                     background: none;
 
                     .dijitMenuItemLabel {
-                        background: $brand-primary;
+                        background: var(--brand-primary);
                     }
                 }
             }
@@ -184,7 +184,7 @@
             // New label
             .tg_newlabelmenuitem {
                 .dijitMenuItemLabel {
-                    font-weight: $font-weight-bold;
+                    font-weight: var(--font-weight-bold);
                 }
             }
 
diff --git a/Source/themesource/atlas_core/web/design-properties.json b/Source/themesource/atlas_core/web/design-properties.json
index 91cf6724..e7fafb98 100644
--- a/Source/themesource/atlas_core/web/design-properties.json
+++ b/Source/themesource/atlas_core/web/design-properties.json
@@ -1,6 +1,123 @@
 {
+    "FormBase": [
+        {
+            "name": "Screen width",
+            "type": "ToggleButtonGroup",
+            "property": "--max-screen-width",
+            "options": [
+                {
+                    "name": "XXL",
+                    "variable": "--screen-xxl"
+                },
+                {
+                    "name": "XL",
+                    "variable": "--screen-xl"
+                },
+                {
+                    "name": "L",
+                    "variable": "--screen-lg"
+                },
+                {
+                    "name": "M",
+                    "variable": "--screen-md"
+                },
+                {
+                    "name": "S",
+                    "variable": "--screen-sm"
+                }
+            ]
+        },
+        {
+            "name": "Default item gap",
+            "type": "ToggleButtonGroup",
+            "property": "--gutter-size",
+            "options": [
+                {
+                    "name": "S",
+                    "variable": "--spacing-small"
+                },
+                {
+                    "name": "M",
+                    "variable": "--spacing-medium"
+                },
+                {
+                    "name": "L",
+                    "variable": "--spacing-large"
+                }
+            ]
+        },
+        {
+            "category": "Form",
+            "name": "Form orientation",
+            "description": "Determines the form orientation of input fields on the page.",
+            "type": "ToggleButtonGroup",
+            "options": [
+                {
+                    "name": "Vertical",
+                    "class": "page-form-vertical"
+                },
+                {
+                    "name": "Horizontal",
+                    "class": "page-form-horizontal"
+                }
+            ]
+        },
+        {
+            "category": "Form",
+            "name": "Label width",
+            "description": "Determines the width of the input fields on the page.",
+            "type": "Dropdown",
+            "options": [
+                {
+                    "name": "1",
+                    "class": "form-label-width-1"
+                },
+                {
+                    "name": "2",
+                    "class": "form-label-width-2"
+                },
+                {
+                    "name": "3",
+                    "class": "form-label-width-3"
+                },
+                {
+                    "name": "4",
+                    "class": "form-label-width-4"
+                },
+                {
+                    "name": "5",
+                    "class": "form-label-width-5"
+                },
+                {
+                    "name": "6",
+                    "class": "form-label-width-6"
+                },
+                {
+                    "name": "7",
+                    "class": "form-label-width-7"
+                },
+                {
+                    "name": "8",
+                    "class": "form-label-width-8"
+                },
+                {
+                    "name": "9",
+                    "class": "form-label-width-9"
+                },
+                {
+                    "name": "10",
+                    "class": "form-label-width-10"
+                },
+                {
+                    "name": "11",
+                    "class": "form-label-width-11"
+                }
+            ]
+        }
+    ],
     "Widget": [
         {
+            "category": "Appearance",
             "name": "Spacing",
             "type": "Spacing",
             "description": "The spacing around a widget",
@@ -162,92 +279,1681 @@
             ]
         },
         {
-            "name": "Align self",
-            "oldNames": ["Align Self"],
-            "type": "ToggleButtonGroup",
-            "description": "Float the element to the left or to the right.",
+            "name": "Align self",
+            "oldNames": ["Align Self"],
+            "type": "ToggleButtonGroup",
+            "description": "Float the element to the left or to the right.",
+            "options": [
+                {
+                    "name": "Left",
+                    "icon": "Atlas_Core.Atlas.align-left",
+                    "class": "pull-left"
+                },
+                {
+                    "name": "Right",
+                    "icon": "Atlas_Core.Atlas.align-right",
+                    "class": "pull-right"
+                }
+            ]
+        },
+        {
+            "name": "Hide on",
+            "description": "Hide on device type",
+            "multiSelect": true,
+            "type": "ToggleButtonGroup",
+            "options": [
+                {
+                    "name": "Phone",
+                    "icon": "Atlas_Core.Atlas.mobile-phone",
+                    "class": "hide-phone",
+                    "oldNames": ["Hide on phone", "Hide On Phone"]
+                },
+                {
+                    "name": "Tablet",
+                    "icon": "Atlas_Core.Atlas.tablet",
+                    "class": "hide-tablet",
+                    "oldNames": ["Hide on tablet", "Hide On Tablet"]
+                },
+                {
+                    "name": "Desktop",
+                    "icon": "Atlas_Core.Atlas.desktop",
+                    "class": "hide-desktop",
+                    "oldNames": ["Hide on desktop", "Hide On Desktop"]
+                }
+            ]
+        }
+    ],
+    "DivContainer": [
+        {
+            "category": "Flex",
+            "name": "Flex container",
+            "type": "ToggleButtonGroup",
+            "description": "Sets the display type of the container to flex to align and distributes child elements within a flexible container.",
+            "options": [
+                {
+                    "name": "Horizontal (row)",
+                    "class": "flex-row",
+                    "icon": "Atlas_Core.Atlas_Styling.direction-horizontal"
+                },
+                {
+                    "name": "Vertical (column)",
+                    "class": "flex-column",
+                    "icon": "Atlas_Core.Atlas_Styling.direction-vertical"
+                }
+            ]
+        },
+        {
+            "category": "Flex",
+            "name": "Item gap",
+            "property": "--flex-gap",
+            "type": "ToggleButtonGroup",
+            "description": "Adjust the space between items inside the flex container.",
+            "options": [
+                {
+                    "name": "None",
+                    "variable": "--none"
+                },
+                {
+                    "name": "Small",
+                    "variable": "--spacing-small"
+                },
+                {
+                    "name": "Medium",
+                    "variable": "--spacing-medium"
+                },
+                {
+                    "name": "Large",
+                    "variable": "--spacing-large"
+                }
+            ]
+        },
+        {
+            "category": "Flex",
+            "name": "Align items X",
+            "type": "ToggleButtonGroup",
+            "description": "Distributes space between and around content items along the X axis.",
+            "options": [
+                {
+                    "name": "Left",
+                    "class": "align-x-left",
+                    "icon": "Atlas_Core.Atlas_Styling.aligncontent-horizontal-left"
+                },
+                {
+                    "name": "Center",
+                    "class": "align-x-center",
+                    "icon": "Atlas_Core.Atlas_Styling.aligncontent-horizontal-center"
+                },
+                {
+                    "name": "Right",
+                    "class": "align-x-right",
+                    "icon": "Atlas_Core.Atlas_Styling.aligncontent-horizontal-right"
+                },
+                {
+                    "name": "Space between (only for horizontal containers)",
+                    "class": "align-x-between",
+                    "icon": "Atlas_Core.Atlas_Styling.aligncontent-horizontal-space-between"
+                },
+                {
+                    "name": "Space around (only for horizontal containers)",
+                    "class": "align-x-around",
+                    "icon": "Atlas_Core.Atlas_Styling.aligncontent-horizontal-space-around"
+                },
+                {
+                    "name": "Space evenly (only for horizontal containers)",
+                    "class": "align-x-evenly",
+                    "icon": "Atlas_Core.Atlas_Styling.aligncontent-horizontal-space-even"
+                }
+            ]
+        },
+        {
+            "category": "Flex",
+            "name": "Align items Y",
+            "type": "ToggleButtonGroup",
+            "description": "Distributes space between and around content items along the Y axis.",
+            "options": [
+                {
+                    "name": "Top",
+                    "class": "align-y-top",
+                    "icon": "Atlas_Core.Atlas_Styling.aligncontent-vertical-top"
+                },
+                {
+                    "name": "Center",
+                    "class": "align-y-center",
+                    "icon": "Atlas_Core.Atlas_Styling.aligncontent-vertical-center"
+                },
+                {
+                    "name": "Bottom",
+                    "class": "align-y-bottom",
+                    "icon": "Atlas_Core.Atlas_Styling.aligncontent-vertical-bottom"
+                },
+                {
+                    "name": "Space between (only for vertical containers)",
+                    "class": "align-y-between",
+                    "icon": "Atlas_Core.Atlas_Styling.aligncontent-vertical-space-between"
+                },
+                {
+                    "name": "Space around (only for vertical containers)",
+                    "class": "align-y-around",
+                    "icon": "Atlas_Core.Atlas_Styling.aligncontent-vertical-space-around"
+                },
+                {
+                    "name": "Space evenly (only for vertical containers)",
+                    "class": "align-y-evenly",
+                    "icon": "Atlas_Core.Atlas_Styling.aligncontent-vertical-space-even"
+                }
+            ]
+        },
+        {
+            "category": "Flex",
+            "name": "Grow / shrink items",
+            "type": "ToggleButtonGroup",
+            "description": "Sets a responsive minimum width for its flex items.",
+            "options": [
+                {
+                    "name": "Fill container (only grow)",
+                    "class": "flex-items-grow",
+                    "icon": "Atlas_Core.Atlas_Styling.grow-shrink-auto-fill"
+                },
+                {
+                    "name": "Hug content (only shrink)",
+                    "class": "flex-items-shrink",
+                    "icon": "Atlas_Core.Atlas_Styling.grow-shrink-auto-fit"
+                },
+                {
+                    "name": "Auto (grow or shrink)",
+                    "class": "flex-items-auto",
+                    "icon": "Atlas_Core.Atlas.text-font"
+                },
+                {
+                    "name": "Fixed (neither shrink nor grow)",
+                    "class": "flex-items-fixed",
+                    "icon": "Atlas_Core.Atlas_Styling.grow-shrink-none-fixed"
+                }
+            ]
+        },
+        {
+            "category": "Flex",
+            "name": "Grow / shrink (self)",
+            "type": "Dropdown",
+            "property": "flex",
+            "description": "Defines whether it grows / shrinks relative to its parent based on available space. Use numbers to set a width relative to its siblings.",
+            "options": [
+                {
+                    "name": "Fill container (only grow)",
+                    "variable": "--flex-grow",
+                    "icon": "Atlas_Core.Atlas_Styling.grow-shrink-auto-fill"
+                },
+                {
+                    "name": "Hug content (only shrink)",
+                    "variable": "--flex-fit-content",
+                    "icon": "Atlas_Core.Atlas_Styling.grow-shrink-auto-fit"
+                },
+                {
+                    "name": "Fixed (neither shrink nor grow)",
+                    "variable": "--none",
+                    "icon": "Atlas_Core.Atlas_Styling.grow-shrink-none-fixed"
+                },
+                {
+                    "name": "1 (auto)",
+                    "variable": "--flex-1"
+                },
+                {
+                    "name": "2",
+                    "variable": "--flex-2"
+                },
+                {
+                    "name": "3",
+                    "variable": "--flex-3"
+                },
+                {
+                    "name": "4",
+                    "variable": "--flex-4"
+                },
+                {
+                    "name": "5",
+                    "variable": "--flex-5"
+                },
+                {
+                    "name": "6",
+                    "variable": "--flex-6"
+                },
+                {
+                    "name": "7",
+                    "variable": "--flex-7"
+                },
+                {
+                    "name": "8",
+                    "variable": "--flex-8"
+                },
+                {
+                    "name": "9",
+                    "variable": "--flex-9"
+                },
+                {
+                    "name": "10",
+                    "variable": "--flex-10"
+                },
+                {
+                    "name": "11",
+                    "variable": "--flex-11"
+                },
+                {
+                    "name": "12",
+                    "variable": "--flex-12"
+                }
+            ]
+        },
+        {
+            "category": "Flex",
+            "name": "Default item size",
+            "type": "ToggleButtonGroup",
+            "description": "Sets a preferred responsive size (flex-basis and minimum width) for its flex items.",
+            "options": [
+                {
+                    "name": "Small",
+                    "class": "flex-width flex-items-small"
+                },
+                {
+                    "name": "Medium",
+                    "class": "flex-width flex-items-medium"
+                },
+                {
+                    "name": "Large",
+                    "class": "flex-width flex-items-large"
+                }
+            ]
+        },
+        {
+            "category": "Flex",
+            "name": "Preferred size (self)",
+            "type": "ToggleButtonGroup",
+            "description": "Sets a preferred responsive size (flex-basis and minimum width) for itself.",
+            "options": [
+                {
+                    "name": "Small",
+                    "class": "flex-width flex-small"
+                },
+                {
+                    "name": "Medium",
+                    "class": "flex-width flex-medium"
+                },
+                {
+                    "name": "Large",
+                    "class": "flex-width flex-large"
+                }
+            ]
+        },
+        {
+            "category": "Flex",
+            "name": "Disable row wrap",
+            "type": "Toggle",
+            "class": "flex-nowrap"
+        },
+        {
+            "category": "Appearance",
+            "name": "Card style",
+            "type": "Toggle",
+            "description": "Render container as card",
+            "class": "card"
+        },
+        {
+            "category": "Appearance",
+            "name": "Background color",
+            "type": "ColorPicker",
+            "description": "Change the background color of the container.",
+            "options": [
+                {
+                    "name": "Background Primary",
+                    "oldNames": ["Background Default"],
+                    "preview": "--bg-color",
+                    "class": "background-main"
+                },
+                {
+                    "name": "Background Secondary",
+                    "oldNames": ["Background Dashboard"],
+                    "preview": "--bg-color-secondary",
+                    "class": "background-secondary"
+                },
+                {
+                    "name": "Brand Primary",
+                    "oldNames": ["Primary"],
+                    "preview": "--brand-primary",
+                    "class": "background-primary"
+                },
+                {
+                    "name": "Brand Secondary",
+                    "oldNames": ["Default", "Brand Default"],
+                    "class": "background-default",
+                    "preview": "--brand-default"
+                },
+                {
+                    "name": "Brand Success",
+                    "oldNames": ["Success"],
+                    "preview": "--brand-success",
+                    "class": "background-success"
+                },
+                {
+                    "name": "Brand Warning",
+                    "oldNames": ["Warning"],
+                    "preview": "--brand-warning",
+                    "class": "background-warning"
+                },
+                {
+                    "name": "Brand Danger",
+                    "oldNames": ["Danger"],
+                    "preview": "--brand-danger",
+                    "class": "background-danger"
+                }
+            ]
+        },
+        {
+            "category": "Appearance",
+            "name": "Shade",
+            "type": "ColorPicker",
+            "options": [
+                {
+                    "name": "50 (lightest)",
+                    "class": "shade-50",
+                    "preview": "--gray-50"
+                },
+                {
+                    "name": "100",
+                    "class": "shade-100",
+                    "preview": "--gray-100"
+                },
+                {
+                    "name": "200",
+                    "class": "shade-200",
+                    "oldNames": ["Light"],
+                    "preview": "--gray-200"
+                },
+                {
+                    "name": "300",
+                    "class": "shade-300",
+                    "preview": "--gray-300"
+                },
+                {
+                    "name": "400",
+                    "class": "shade-400",
+                    "preview": "--gray-400"
+                },
+                {
+                    "name": "500 (medium)",
+                    "class": "shade-500",
+                    "preview": "--gray-500"
+                },
+                {
+                    "name": "600",
+                    "class": "shade-600",
+                    "oldNames": ["Dark"],
+                    "preview": "--gray-600"
+                },
+                {
+                    "name": "700",
+                    "class": "shade-700",
+                    "preview": "--gray-700"
+                },
+                {
+                    "name": "800",
+                    "class": "shade-800",
+                    "preview": "--gray-800"
+                },
+                {
+                    "name": "900 (darkest)",
+                    "class": "shade-900",
+                    "preview": "--gray-900"
+                }
+            ]
+        },
+        {
+            "category": "Borders",
+            "name": "Borders",
+            "type": "ToggleButtonGroup",
+            "multiSelect": true,
+            "description": "Show a border on specific sides only",
+            "options": [
+                {
+                    "name": "None",
+                    "class": "div-border-toggle-none",
+                    "icon": "Atlas_Core.Atlas_Styling.none"
+                },
+                {
+                    "name": "All",
+                    "class": "div-border-toggle-all",
+                    "icon": "Atlas_Core.Atlas_Styling.borders-all"
+                },
+                {
+                    "name": "Top",
+                    "class": "div-border-toggle-top",
+                    "icon": "Atlas_Core.Atlas_Styling.borders-top"
+                },
+                {
+                    "name": "Right",
+                    "class": "div-border-toggle-right",
+                    "icon": "Atlas_Core.Atlas_Styling.borders-right"
+                },
+                {
+                    "name": "Left",
+                    "class": "div-border-toggle-left",
+                    "icon": "Atlas_Core.Atlas_Styling.borders-left"
+                },
+                {
+                    "name": "Bottom",
+                    "class": "div-border-toggle-bottom",
+                    "icon": "Atlas_Core.Atlas_Styling.borders-bottom"
+                }
+            ]
+        },
+        {
+            "category": "Borders",
+            "name": "Border style",
+            "property": "--div-border-style",
+            "type": "ToggleButtonGroup",
+            "options": [
+                {
+                    "name": "Solid",
+                    "variable": "--border-style-solid",
+                    "icon": "Atlas_Core.Atlas_Styling.border-style-solid"
+                },
+                {
+                    "name": "Dashed",
+                    "variable": "--border-style-dashed",
+                    "icon": "Atlas_Core.Atlas_Styling.border-style-dashed"
+                },
+                {
+                    "name": "Dotted",
+                    "variable": "--border-style-dotted",
+                    "icon": "Atlas_Core.Atlas_Styling.border-style-dotted"
+                }
+            ]
+        },
+        {
+            "category": "Borders",
+            "name": "Border width",
+            "type": "ToggleButtonGroup",
+            "property": "border-width",
+            "options": [
+                {
+                    "name": "Thin",
+                    "variable": "--border-width-thin",
+                    "icon": "Atlas_Core.Atlas_Styling.border-width-thin"
+                },
+                {
+                    "name": "Medium",
+                    "variable": "--border-width-medium",
+                    "icon": "Atlas_Core.Atlas_Styling.border-width-medium"
+                },
+                {
+                    "name": "Thick",
+                    "variable": "--border-width-thick",
+                    "icon": "Atlas_Core.Atlas_Styling.border-width-thick"
+                }
+            ]
+        },
+        {
+            "category": "Borders",
+            "name": "Border color",
+            "type": "ColorPicker",
+            "property": "border-color",
+            "options": [
+                {
+                    "name": "Default",
+                    "variable": "--border-color-default"
+                },
+                {
+                    "name": "Primary",
+                    "variable": "--brand-primary"
+                },
+                {
+                    "name": "Success",
+                    "variable": "--brand-success"
+                },
+                {
+                    "name": "Warning",
+                    "variable": "--brand-warning"
+                },
+                {
+                    "name": "Danger",
+                    "variable": "--brand-danger"
+                }
+            ]
+        },
+        {
+            "category": "Borders",
+            "name": "Border radius",
+            "type": "ToggleButtonGroup",
+            "description": "Set a border radius for rounded borders",
+            "property": "border-radius",
+            "options": [
+                {
+                    "name": "None",
+                    "variable": "--none",
+                    "icon": "Atlas_Core.Atlas_Styling.none"
+                },
+                {
+                    "name": "Small",
+                    "variable": "--border-radius-s",
+                    "icon": "Atlas_Core.Atlas_Styling.border-radius-small"
+                },
+                {
+                    "name": "Medium",
+                    "variable": "--border-radius-m",
+                    "icon": "Atlas_Core.Atlas_Styling.border-radius-medium"
+                },
+                {
+                    "name": "Large",
+                    "variable": "--border-radius-l",
+                    "icon": "Atlas_Core.Atlas_Styling.border-radius-large"
+                }
+            ]
+        },
+        {
+            "category": "Appearance",
+            "name": "Shadow",
+            "oldNames": ["Add shadow"],
+            "type": "ToggleButtonGroup",
+            "description": "Add a shadow to this element",
+            "options": [
+                {
+                    "name": "None",
+                    "class": "shadow-none"
+                },
+                {
+                    "name": "Small",
+                    "class": "shadow-small"
+                },
+                {
+                    "name": "Medium",
+                    "class": "shadow-medium"
+                },
+                {
+                    "name": "Large",
+                    "class": "shadow-large"
+                }
+            ]
+        },
+        {
+            "name": "Overflow",
+            "type": "ToggleButtonGroup",
+            "options": [
+                {
+                    "name": "Visible",
+                    "class": "div-overflow-visible"
+                },
+                {
+                    "name": "Hidden",
+                    "class": "div-overflow-hidden"
+                },
+                {
+                    "name": "Auto",
+                    "class": "div-overflow-auto"
+                }
+            ]
+        },
+        {
+            "name": "Align content (deprecated)",
+            "type": "Dropdown",
+            "oldNames": ["Align content"],
+            "description": "Align content of this element left, right or center it. Align elements inside the container as a row or as a column.",
+            "options": [
+                {
+                    "name": "Left align as a row",
+                    "oldNames": ["Left align as row"],
+                    "class": "row-left"
+                },
+                {
+                    "name": "Center align as a row",
+                    "oldNames": ["Center align as row"],
+                    "class": "row-center"
+                },
+                {
+                    "name": "Right align as a row",
+                    "oldNames": ["Right align as row"],
+                    "class": "row-right"
+                },
+                {
+                    "name": "Left align as a column",
+                    "oldNames": ["Left align as column"],
+                    "class": "col-left"
+                },
+                {
+                    "name": "Center align as a column",
+                    "oldNames": ["Center align as column"],
+                    "class": "col-center"
+                },
+                {
+                    "name": "Right align as a column",
+                    "oldNames": ["Right align as column"],
+                    "class": "col-right"
+                }
+            ]
+        }
+    ],
+    "Button": [
+        {
+            "category": "Appearance",
+            "name": "Size",
+            "type": "ToggleButtonGroup",
+            "description": "Size of the buttons",
+            "options": [
+                {
+                    "name": "Small",
+                    "icon": "Atlas_Core.Atlas.resize-small",
+                    "class": "btn-sm"
+                },
+                {
+                    "name": "Large",
+                    "icon": "Atlas_Core.Atlas.resize-full",
+                    "class": "btn-lg"
+                }
+            ]
+        },
+        {
+            "category": "Appearance",
+            "name": "Weight",
+            "oldNames": ["Font Weight"],
+            "type": "ToggleButtonGroup",
+            "description": "Emphasize the text with a heavier or lighter font weight",
+            "options": [
+                {
+                    "name": "Light",
+                    "class": "text-light"
+                },
+                {
+                    "name": "Normal",
+                    "class": "text-normal"
+                },
+                {
+                    "name": "Semibold",
+                    "class": "text-semibold"
+                },
+                {
+                    "name": "Bold",
+                    "class": "text-bold"
+                }
+            ]
+        },
+        {
+            "category": "Appearance",
+            "name": "Align icon",
+            "type": "ToggleButtonGroup",
+            "description": "Place the icon to the right or on top of the button.",
+            "options": [
+                {
+                    "name": "Right",
+                    "icon": "Atlas_Core.Atlas.align-right",
+                    "class": "btn-icon-right"
+                },
+                {
+                    "name": "Top",
+                    "icon": "Atlas_Core.Atlas.align-top",
+                    "class": "btn-icon-top"
+                }
+            ]
+        },
+        {
+            "category": "Appearance",
+            "name": "Style",
+            "type": "ToggleButtonGroup",
+            "description": "Set button style",
+            "options": [
+                {
+                    "name": "Icon button",
+                    "class": "btn-style-icon"
+                }
+            ]
+        },
+        {
+            "category": "Appearance",
+            "name": "Full width",
+            "type": "Toggle",
+            "description": "Extend the button to the full width of the container it is placed in.",
+            "class": "btn-block"
+        },
+        {
+            "category": "Appearance",
+            "name": "Border",
+            "oldNames": ["Bordered"],
+            "type": "Toggle",
+            "description": "Style the button with a transparent background, a colored border, and colored text.",
+            "class": "btn-bordered"
+        }
+    ],
+    "ListView": [
+        {
+            "name": "Style",
+            "type": "ToggleButtonGroup",
+            "description": "Change the appearance of rows in the list view.",
+            "options": [
+                {
+                    "name": "Lined",
+                    "class": "listview-lined"
+                },
+                {
+                    "name": "Striped",
+                    "class": "listview-striped"
+                },
+                {
+                    "name": "Bordered",
+                    "class": "listview-bordered"
+                },
+                {
+                    "name": "No styling",
+                    "oldNames": ["No Styling"],
+                    "class": "listview-stylingless"
+                }
+            ]
+        },
+        {
+            "name": "Hover style",
+            "type": "Toggle",
+            "description": "Highlight a row when hovering over it. Only useful when the row is clickable.",
+            "class": "listview-hover"
+        },
+        {
+            "name": "Row size",
+            "oldNames": ["Row Size"],
+            "type": "ToggleButtonGroup",
+            "description": "Change the row spacing of the list view.",
+            "options": [
+                {
+                    "name": "Small",
+                    "icon": "Atlas_Core.Atlas.resize-small",
+                    "class": "listview-sm"
+                },
+                {
+                    "name": "Large",
+                    "icon": "Atlas_Core.Atlas.resize-full",
+                    "class": "listview-lg"
+                }
+            ]
+        }
+    ],
+    "LayoutGrid": [
+        {
+            "category": "Column style",
+            "name": "Cards style",
+            "type": "Toggle",
+            "description": "Makes the columns appear as cards.",
+            "class": "cards"
+        },
+        {
+            "category": "Column style",
+            "name": "Background color",
+            "oldNames": [
+                "Column background"
+            ],
+            "type": "ColorPicker",
+            "property": "--layoutgrid-column-bg",
+            "description": "Change the background color of the columns.",
+            "options": [
+                {
+                    "name": "Background Primary",
+                    "variable": "--bg-color"
+                },
+                {
+                    "name": "Background Secondary",
+                    "variable": "--bg-color-secondary"
+                },
+                {
+                    "name": "Brand Primary",
+                    "variable": "--brand-primary"
+                },
+                {
+                    "name": "Brand Secondary",
+                    "variable": "--brand-default"
+                },
+                {
+                    "name": "Brand Success",
+                    "variable": "--brand-success"
+                },
+                {
+                    "name": "Brand Warning",
+                    "variable": "--brand-warning"
+                },
+                {
+                    "name": "Brand Danger",
+                    "variable": "--brand-danger"
+                }
+            ]
+        },
+        {
+            "category": "Gap",
+            "name": "Column gap",
+            "property": "--layoutgrid-column-gap",
+            "type": "ToggleButtonGroup",
+            "description": "Sets a gap between the layout grid columns.",
+            "options": [
+                {
+                    "name": "None",
+                    "variable": "--spacing-none"
+                },
+                {
+                    "name": "Small",
+                    "variable": "--spacing-small"
+                },
+                {
+                    "name": "Medium",
+                    "variable": "--spacing-medium"
+                },
+                {
+                    "name": "Large",
+                    "variable": "--spacing-large"
+                }
+            ]
+        },
+        {
+            "category": "Gap",
+            "name": "Row gap",
+            "property": "--layoutgrid-row-gap",
+            "type": "ToggleButtonGroup",
+            "description": "Sets a gap between the layout grid rows.",
+            "options": [
+                {
+                    "name": "None",
+                    "variable": "--none"
+                },
+                {
+                    "name": "Small",
+                    "variable": "--spacing-small"
+                },
+                {
+                    "name": "Medium",
+                    "variable": "--spacing-medium"
+                },
+                {
+                    "name": "Large",
+                    "variable": "--spacing-large"
+                }
+            ]
+        }
+    ],
+    "LayoutGridRow": [
+        {
+            "category": "Appearance",
+            "name": "Spacing",
+            "type": "Spacing",
+            "description": "The spacing around a widget",
+            "margin": [
+                {
+                    "name": "None",
+                    "top": {
+                        "class": "spacing-outer-top-none"
+                    },
+                    "right": {
+                        "class": "spacing-outer-right-none"
+                    },
+                    "bottom": {
+                        "class": "spacing-outer-bottom-none"
+                    },
+                    "left": {
+                        "class": "spacing-outer-left-none"
+                    }
+                },
+                {
+                    "name": "S",
+                    "top": {
+                        "class": "spacing-outer-top"
+                    },
+                    "right": {
+                        "class": "spacing-outer-right"
+                    },
+                    "bottom": {
+                        "class": "spacing-outer-bottom"
+                    },
+                    "left": {
+                        "class": "spacing-outer-left"
+                    }
+                },
+                {
+                    "name": "M",
+                    "top": {
+                        "class": "spacing-outer-top-medium"
+                    },
+                    "right": {
+                        "class": "spacing-outer-right-medium"
+                    },
+                    "bottom": {
+                        "class": "spacing-outer-bottom-medium"
+                    },
+                    "left": {
+                        "class": "spacing-outer-left-medium"
+                    }
+                },
+                {
+                    "name": "L",
+                    "top": {
+                        "class": "spacing-outer-top-large"
+                    },
+                    "right": {
+                        "class": "spacing-outer-right-large"
+                    },
+                    "bottom": {
+                        "class": "spacing-outer-bottom-large"
+                    },
+                    "left": {
+                        "class": "spacing-outer-left-large"
+                    }
+                }
+            ],
+            "padding": [
+                {
+                    "name": "None",
+                    "top": {
+                        "class": "spacing-inner-top-none"
+                    },
+                    "right": {
+                        "class": "spacing-inner-right-none"
+                    },
+                    "bottom": {
+                        "class": "spacing-inner-bottom-none"
+                    },
+                    "left": {
+                        "class": "spacing-inner-left-none"
+                    }
+                },
+                {
+                    "name": "S",
+                    "top": {
+                        "class": "spacing-inner-top"
+                    },
+                    "right": {
+                        "class": "spacing-inner-right"
+                    },
+                    "bottom": {
+                        "class": "spacing-inner-bottom"
+                    },
+                    "left": {
+                        "class": "spacing-inner-left"
+                    }
+                },
+                {
+                    "name": "M",
+                    "top": {
+                        "class": "spacing-inner-top-medium"
+                    },
+                    "right": {
+                        "class": "spacing-inner-right-medium"
+                    },
+                    "bottom": {
+                        "class": "spacing-inner-bottom-medium"
+                    },
+                    "left": {
+                        "class": "spacing-inner-left-medium"
+                    }
+                },
+                {
+                    "name": "L",
+                    "top": {
+                        "class": "spacing-inner-top-large"
+                    },
+                    "right": {
+                        "class": "spacing-inner-right-large"
+                    },
+                    "bottom": {
+                        "class": "spacing-inner-bottom-large"
+                    },
+                    "left": {
+                        "class": "spacing-inner-left-large"
+                    }
+                }
+            ]
+        },
+        {
+            "name": "Hide on",
+            "description": "Hide on device type",
+            "multiSelect": true,
+            "type": "ToggleButtonGroup",
+            "options": [
+                {
+                    "name": "Phone",
+                    "icon": "Atlas_Core.Atlas.mobile-phone",
+                    "class": "hide-phone"
+                },
+                {
+                    "name": "Tablet",
+                    "icon": "Atlas_Core.Atlas.tablet",
+                    "class": "hide-tablet"
+                },
+                {
+                    "name": "Desktop",
+                    "icon": "Atlas_Core.Atlas.desktop",
+                    "class": "hide-desktop"
+                }
+            ]
+        },
+        {
+            "category": "Column style",
+            "name": "Cards style",
+            "type": "Toggle",
+            "description": "Makes the columns appear as cards.",
+            "class": "cards"
+        },
+        {
+            "category": "Column style",
+            "name": "Background color",
+            "type": "ColorPicker",
+            "property": "--layoutgrid-column-bg",
+            "description": "Change the background color of the columns.",
+            "options": [
+                {
+                    "name": "Background Primary",
+                    "variable": "--bg-color"
+                },
+                {
+                    "name": "Background Secondary",
+                    "variable": "--bg-color-secondary"
+                },
+                {
+                    "name": "Brand Primary",
+                    "variable": "--brand-primary"
+                },
+                {
+                    "name": "Brand Secondary",
+                    "variable": "--brand-default"
+                },
+                {
+                    "name": "Brand Success",
+                    "variable": "--brand-success"
+                },
+                {
+                    "name": "Brand Warning",
+                    "variable": "--brand-warning"
+                },
+                {
+                    "name": "Brand Danger",
+                    "variable": "--brand-danger"
+                }
+            ]
+        },
+        {
+            "category": "Gap",
+            "name": "Column gap",
+            "property": "--layoutgrid-column-gap",
+            "type": "ToggleButtonGroup",
+            "description": "Sets a gap between the layout grid columns.",
+            "options": [
+                {
+                    "name": "None",
+                    "variable": "--spacing-none"
+                },
+                {
+                    "name": "Small",
+                    "variable": "--spacing-small"
+                },
+                {
+                    "name": "Medium",
+                    "variable": "--spacing-medium"
+                },
+                {
+                    "name": "Large",
+                    "variable": "--spacing-large"
+                }
+            ]
+        }
+    ],
+    "LayoutGridColumn": [
+        {
+            "category": "Appearance",
+            "name": "Spacing",
+            "type": "Spacing",
+            "description": "The spacing around a widget",
+            "margin": [
+                {
+                    "name": "None",
+                    "top": {
+                        "class": "spacing-outer-top-none"
+                    },
+                    "right": {
+                        "class": "spacing-outer-right-none"
+                    },
+                    "bottom": {
+                        "class": "spacing-outer-bottom-none"
+                    },
+                    "left": {
+                        "class": "spacing-outer-left-none"
+                    }
+                },
+                {
+                    "name": "S",
+                    "top": {
+                        "class": "spacing-outer-top"
+                    },
+                    "right": {
+                        "class": "spacing-outer-right"
+                    },
+                    "bottom": {
+                        "class": "spacing-outer-bottom"
+                    },
+                    "left": {
+                        "class": "spacing-outer-left"
+                    }
+                },
+                {
+                    "name": "M",
+                    "top": {
+                        "class": "spacing-outer-top-medium"
+                    },
+                    "right": {
+                        "class": "spacing-outer-right-medium"
+                    },
+                    "bottom": {
+                        "class": "spacing-outer-bottom-medium"
+                    },
+                    "left": {
+                        "class": "spacing-outer-left-medium"
+                    }
+                },
+                {
+                    "name": "L",
+                    "top": {
+                        "class": "spacing-outer-top-large"
+                    },
+                    "right": {
+                        "class": "spacing-outer-right-large"
+                    },
+                    "bottom": {
+                        "class": "spacing-outer-bottom-large"
+                    },
+                    "left": {
+                        "class": "spacing-outer-left-large"
+                    }
+                }
+            ],
+            "padding": [
+                {
+                    "name": "None",
+                    "top": {
+                        "class": "spacing-inner-top-none"
+                    },
+                    "right": {
+                        "class": "spacing-inner-right-none"
+                    },
+                    "bottom": {
+                        "class": "spacing-inner-bottom-none"
+                    },
+                    "left": {
+                        "class": "spacing-inner-left-none"
+                    }
+                },
+                {
+                    "name": "S",
+                    "top": {
+                        "class": "spacing-inner-top"
+                    },
+                    "right": {
+                        "class": "spacing-inner-right"
+                    },
+                    "bottom": {
+                        "class": "spacing-inner-bottom"
+                    },
+                    "left": {
+                        "class": "spacing-inner-left"
+                    }
+                },
+                {
+                    "name": "M",
+                    "top": {
+                        "class": "spacing-inner-top-medium"
+                    },
+                    "right": {
+                        "class": "spacing-inner-right-medium"
+                    },
+                    "bottom": {
+                        "class": "spacing-inner-bottom-medium"
+                    },
+                    "left": {
+                        "class": "spacing-inner-left-medium"
+                    }
+                },
+                {
+                    "name": "L",
+                    "top": {
+                        "class": "spacing-inner-top-large"
+                    },
+                    "right": {
+                        "class": "spacing-inner-right-large"
+                    },
+                    "bottom": {
+                        "class": "spacing-inner-bottom-large"
+                    },
+                    "left": {
+                        "class": "spacing-inner-left-large"
+                    }
+                }
+            ]
+        },
+        {
+            "name": "Hide on",
+            "description": "Hide on device type",
+            "multiSelect": true,
+            "type": "ToggleButtonGroup",
+            "options": [
+                {
+                    "name": "Phone",
+                    "icon": "Atlas_Core.Atlas.mobile-phone",
+                    "class": "hide-phone"
+                },
+                {
+                    "name": "Tablet",
+                    "icon": "Atlas_Core.Atlas.tablet",
+                    "class": "hide-tablet"
+                },
+                {
+                    "name": "Desktop",
+                    "icon": "Atlas_Core.Atlas.desktop",
+                    "class": "hide-desktop"
+                }
+            ]
+        },
+        {
+            "category": "Flex",
+            "name": "Flex container",
+            "type": "ToggleButtonGroup",
+            "description": "Sets the display type of the container to flex to align and distributes child elements within a flexible container.",
+            "options": [
+                {
+                    "name": "Horizontal (row)",
+                    "class": "flex-row",
+                    "icon": "Atlas_Core.Atlas_Styling.direction-horizontal"
+                },
+                {
+                    "name": "Vertical (column)",
+                    "class": "flex-column",
+                    "icon": "Atlas_Core.Atlas_Styling.direction-vertical"
+                }
+            ]
+        },
+        {
+            "category": "Flex",
+            "name": "Item gap",
+            "property": "--flex-gap",
+            "type": "ToggleButtonGroup",
+            "description": "Adjust the space between items inside the flex container.",
+            "options": [
+                {
+                    "name": "None",
+                    "variable": "--none"
+                },
+                {
+                    "name": "Small",
+                    "variable": "--spacing-small"
+                },
+                {
+                    "name": "Medium",
+                    "variable": "--spacing-medium"
+                },
+                {
+                    "name": "Large",
+                    "variable": "--spacing-large"
+                }
+            ]
+        },
+        {
+            "category": "Flex",
+            "name": "Align items X",
+            "type": "ToggleButtonGroup",
+            "description": "Distributes space between and around content items along the X axis.",
+            "options": [
+                {
+                    "name": "Left",
+                    "class": "align-x-left",
+                    "icon": "Atlas_Core.Atlas_Styling.aligncontent-horizontal-left"
+                },
+                {
+                    "name": "Center",
+                    "class": "align-x-center",
+                    "icon": "Atlas_Core.Atlas_Styling.aligncontent-horizontal-center"
+                },
+                {
+                    "name": "Right",
+                    "class": "align-x-right",
+                    "icon": "Atlas_Core.Atlas_Styling.aligncontent-horizontal-right"
+                },
+                {
+                    "name": "Space between (only for horizontal containers)",
+                    "class": "align-x-between",
+                    "icon": "Atlas_Core.Atlas_Styling.aligncontent-horizontal-space-between"
+                },
+                {
+                    "name": "Space around (only for horizontal containers)",
+                    "class": "align-x-around",
+                    "icon": "Atlas_Core.Atlas_Styling.aligncontent-horizontal-space-around"
+                },
+                {
+                    "name": "Space evenly (only for horizontal containers)",
+                    "class": "align-x-evenly",
+                    "icon": "Atlas_Core.Atlas_Styling.aligncontent-horizontal-space-even"
+                }
+            ]
+        },
+        {
+            "category": "Flex",
+            "name": "Align items Y",
+            "type": "ToggleButtonGroup",
+            "description": "Distributes space between and around content items along the Y axis.",
+            "options": [
+                {
+                    "name": "Top",
+                    "class": "align-y-top",
+                    "icon": "Atlas_Core.Atlas_Styling.aligncontent-vertical-top"
+                },
+                {
+                    "name": "Center",
+                    "class": "align-y-center",
+                    "icon": "Atlas_Core.Atlas_Styling.aligncontent-vertical-center"
+                },
+                {
+                    "name": "Bottom",
+                    "class": "align-y-bottom",
+                    "icon": "Atlas_Core.Atlas_Styling.aligncontent-vertical-bottom"
+                },
+                {
+                    "name": "Space between (only for vertical containers)",
+                    "class": "align-y-between",
+                    "icon": "Atlas_Core.Atlas_Styling.aligncontent-vertical-space-between"
+                },
+                {
+                    "name": "Space around (only for vertical containers)",
+                    "class": "align-y-around",
+                    "icon": "Atlas_Core.Atlas_Styling.aligncontent-vertical-space-around"
+                },
+                {
+                    "name": "Space evenly (only for vertical containers)",
+                    "class": "align-y-evenly",
+                    "icon": "Atlas_Core.Atlas_Styling.aligncontent-vertical-space-even"
+                }
+            ]
+        },
+        {
+            "category": "Flex",
+            "name": "Grow / shrink",
+            "type": "ToggleButtonGroup",
+            "description": "Sets a responsive minimum width for its flex items.",
+            "options": [
+                {
+                    "name": "Fill container (only grow)",
+                    "class": "flex-items-grow",
+                    "icon": "Atlas_Core.Atlas_Styling.grow-shrink-auto-fill"
+                },
+                {
+                    "name": "Hug content (only shrink)",
+                    "class": "flex-items-shrink",
+                    "icon": "Atlas_Core.Atlas_Styling.grow-shrink-auto-fit"
+                },
+                {
+                    "name": "Auto (grow or shrink)",
+                    "class": "flex-items-auto",
+                    "icon": "Atlas_Core.Atlas.text-font"
+                },
+                {
+                    "name": "Fixed (neither shrink nor grow)",
+                    "class": "flex-items-fixed",
+                    "icon": "Atlas_Core.Atlas_Styling.grow-shrink-none-fixed"
+                }
+            ]
+        },
+        {
+            "category": "Flex",
+            "name": "Default item size",
+            "type": "ToggleButtonGroup",
+            "description": "Sets a preferred responsive size (flex-basis and minimum width) for its flex items.",
+            "options": [
+                {
+                    "name": "Small",
+                    "class": "flex-width flex-items-small"
+                },
+                {
+                    "name": "Medium",
+                    "class": "flex-width flex-items-medium"
+                },
+                {
+                    "name": "Large",
+                    "class": "flex-width flex-items-large"
+                }
+            ]
+        },
+        {
+            "category": "Flex",
+            "name": "Disable row wrap",
+            "type": "Toggle",
+            "class": "flex-nowrap"
+        },
+        {
+            "category": "Appearance",
+            "name": "Card style",
+            "type": "Toggle",
+            "description": "Render container as card",
+            "class": "card"
+        },
+        {
+            "category": "Appearance",
+            "name": "Background color",
+            "type": "ColorPicker",
+            "property": "--layoutgrid-column-bg",
+            "description": "Change the background color of the columns.",
+            "options": [
+                {
+                    "name": "Background Primary",
+                    "variable": "--bg-color"
+                },
+                {
+                    "name": "Background Secondary",
+                    "variable": "--bg-color-secondary"
+                },
+                {
+                    "name": "Brand Primary",
+                    "variable": "--brand-primary"
+                },
+                {
+                    "name": "Brand Secondary",
+                    "variable": "--brand-default"
+                },
+                {
+                    "name": "Brand Success",
+                    "variable": "--brand-success"
+                },
+                {
+                    "name": "Brand Warning",
+                    "variable": "--brand-warning"
+                },
+                {
+                    "name": "Brand Danger",
+                    "variable": "--brand-danger"
+                }
+            ]
+        },
+        {
+            "category": "Borders",
+            "name": "Borders",
+            "type": "ToggleButtonGroup",
+            "multiSelect": true,
+            "description": "Show a border on specific sides only",
+            "options": [
+                {
+                    "name": "None",
+                    "class": "div-border-toggle-none",
+                    "icon": "Atlas_Core.Atlas_Styling.none"
+                },
+                {
+                    "name": "All",
+                    "class": "div-border-toggle-all",
+                    "icon": "Atlas_Core.Atlas_Styling.borders-all"
+                },
+                {
+                    "name": "Top",
+                    "class": "div-border-toggle-top",
+                    "icon": "Atlas_Core.Atlas_Styling.borders-top"
+                },
+                {
+                    "name": "Right",
+                    "class": "div-border-toggle-right",
+                    "icon": "Atlas_Core.Atlas_Styling.borders-right"
+                },
+                {
+                    "name": "Left",
+                    "class": "div-border-toggle-left",
+                    "icon": "Atlas_Core.Atlas_Styling.borders-left"
+                },
+                {
+                    "name": "Bottom",
+                    "class": "div-border-toggle-bottom",
+                    "icon": "Atlas_Core.Atlas_Styling.borders-bottom"
+                }
+            ]
+        },
+        {
+            "category": "Borders",
+            "name": "Border style",
+            "property": "--div-border-style",
+            "type": "ToggleButtonGroup",
+            "options": [
+                {
+                    "name": "Solid",
+                    "variable": "--border-style-solid",
+                    "icon": "Atlas_Core.Atlas_Styling.border-style-solid"
+                },
+                {
+                    "name": "Dashed",
+                    "variable": "--border-style-dashed",
+                    "icon": "Atlas_Core.Atlas_Styling.border-style-dashed"
+                },
+                {
+                    "name": "Dotted",
+                    "variable": "--border-style-dotted",
+                    "icon": "Atlas_Core.Atlas_Styling.border-style-dotted"
+                }
+            ]
+        },
+        {
+            "category": "Borders",
+            "name": "Border width",
+            "type": "ToggleButtonGroup",
+            "property": "border-width",
+            "options": [
+                {
+                    "name": "Thin",
+                    "variable": "--border-width-thin",
+                    "icon": "Atlas_Core.Atlas_Styling.border-width-thin"
+                },
+                {
+                    "name": "Medium",
+                    "variable": "--border-width-medium",
+                    "icon": "Atlas_Core.Atlas_Styling.border-width-medium"
+                },
+                {
+                    "name": "Thick",
+                    "variable": "--border-width-thick",
+                    "icon": "Atlas_Core.Atlas_Styling.border-width-thick"
+                }
+            ]
+        },
+        {
+            "category": "Borders",
+            "name": "Border color",
+            "type": "ColorPicker",
+            "property": "border-color",
             "options": [
                 {
-                    "name": "Left",
-                    "icon": "Atlas_Core.Atlas.align-left",
-                    "class": "pull-left"
+                    "name": "Default",
+                    "variable": "--border-color-default"
                 },
                 {
-                    "name": "Right",
-                    "icon": "Atlas_Core.Atlas.align-right",
-                    "class": "pull-right"
+                    "name": "Primary",
+                    "variable": "--brand-primary"
+                },
+                {
+                    "name": "Success",
+                    "variable": "--brand-success"
+                },
+                {
+                    "name": "Warning",
+                    "variable": "--brand-warning"
+                },
+                {
+                    "name": "Danger",
+                    "variable": "--brand-danger"
                 }
             ]
         },
         {
-            "name": "Hide on",
-            "description": "Hide on device type",
-            "multiSelect": true,
+            "category": "Borders",
+            "name": "Border radius",
             "type": "ToggleButtonGroup",
+            "description": "Set a border radius for rounded borders",
+            "property": "border-radius",
             "options": [
                 {
-                    "name": "Phone",
-                    "icon": "Atlas_Core.Atlas.mobile-phone",
-                    "class": "hide-phone",
-                    "oldNames": ["Hide on phone", "Hide On Phone"]
+                    "name": "None",
+                    "variable": "--none",
+                    "icon": "Atlas_Core.Atlas_Styling.none"
                 },
                 {
-                    "name": "Tablet",
-                    "icon": "Atlas_Core.Atlas.tablet",
-                    "class": "hide-tablet",
-                    "oldNames": ["Hide on tablet", "Hide On Tablet"]
+                    "name": "Small",
+                    "variable": "--border-radius-s",
+                    "icon": "Atlas_Core.Atlas_Styling.border-radius-small"
                 },
                 {
-                    "name": "Desktop",
-                    "icon": "Atlas_Core.Atlas.desktop",
-                    "class": "hide-desktop",
-                    "oldNames": ["Hide on desktop", "Hide On Desktop"]
+                    "name": "Medium",
+                    "variable": "--border-radius-m",
+                    "icon": "Atlas_Core.Atlas_Styling.border-radius-medium"
+                },
+                {
+                    "name": "Large",
+                    "variable": "--border-radius-l",
+                    "icon": "Atlas_Core.Atlas_Styling.border-radius-large"
                 }
             ]
-        }
-    ],
-    "DivContainer": [
+        },
         {
-            "name": "Align content",
-            "type": "Dropdown",
-            "description": "Align content of this element left, right or center it. Align elements inside the container as a row or as a column.",
+            "category": "Appearance",
+            "name": "Shadow",
+            "type": "ToggleButtonGroup",
+            "description": "Add a shadow to this element",
             "options": [
                 {
-                    "name": "Left align as a row",
-                    "oldNames": ["Left align as row"],
-                    "class": "row-left"
+                    "name": "None",
+                    "class": "shadow-none"
                 },
                 {
-                    "name": "Center align as a row",
-                    "oldNames": ["Center align as row"],
-                    "class": "row-center"
+                    "name": "Small",
+                    "class": "shadow-small"
                 },
                 {
-                    "name": "Right align as a row",
-                    "oldNames": ["Right align as row"],
-                    "class": "row-right"
+                    "name": "Medium",
+                    "class": "shadow-medium"
                 },
                 {
-                    "name": "Left align as a column",
-                    "oldNames": ["Left align as column"],
-                    "class": "col-left"
+                    "name": "Large",
+                    "class": "shadow-large"
+                }
+            ]
+        },
+        {
+            "name": "Overflow",
+            "type": "ToggleButtonGroup",
+            "options": [
+                {
+                    "name": "Visible",
+                    "class": "div-overflow-visible"
                 },
                 {
-                    "name": "Center align as a column",
-                    "oldNames": ["Center align as column"],
-                    "class": "col-center"
+                    "name": "Hidden",
+                    "class": "div-overflow-hidden"
                 },
                 {
-                    "name": "Right align as a column",
-                    "oldNames": ["Right align as column"],
-                    "class": "col-right"
+                    "name": "Auto",
+                    "class": "div-overflow-auto"
                 }
             ]
-        },
+        }
+    ],
+    "DataView": [
         {
+            "category": "Appearance",
             "name": "Background color",
             "type": "ColorPicker",
-            "description": "Change the background color of the container.",
+            "description": "Change the background color of the main container.",
             "options": [
                 {
                     "name": "Background Primary",
@@ -290,151 +1996,117 @@
                     "oldNames": ["Danger"],
                     "preview": "--brand-danger",
                     "class": "background-danger"
-                },
-                {
-                    "name": "Brand Gradient",
-                    "preview": "--brand-gradient",
-                    "class": "background-brand-gradient"
                 }
             ]
         },
         {
+            "category": "Appearance",
             "name": "Shade",
-            "type": "ToggleButtonGroup",
-            "description": "Apply a shade to your background color",
+            "type": "ColorPicker",
             "options": [
                 {
-                    "name": "Light",
-                    "class": "background-light"
+                    "name": "50 (lightest)",
+                    "class": "shade-50",
+                    "preview": "--gray-50"
                 },
                 {
-                    "name": "Dark",
-                    "class": "background-dark"
-                }
-            ]
-        },
-        {
-            "name": "Shadow",
-            "oldNames": ["Add shadow"],
-            "type": "ToggleButtonGroup",
-            "description": "Add a shadow to this element",
-            "options": [
+                    "name": "100",
+                    "class": "shade-100",
+                    "preview": "--gray-100"
+                },
                 {
-                    "name": "Small",
-                    "class": "shadow-small"
+                    "name": "200",
+                    "class": "shade-200",
+                    "oldNames": ["Light"],
+                    "preview": "--gray-200"
                 },
                 {
-                    "name": "Medium",
-                    "class": "shadow-medium"
+                    "name": "300",
+                    "class": "shade-300",
+                    "preview": "--gray-300"
                 },
                 {
-                    "name": "Large",
-                    "class": "shadow-large"
-                }
-            ]
-        }
-    ],
-    "Button": [
-        {
-            "name": "Size",
-            "type": "ToggleButtonGroup",
-            "description": "Size of the buttons",
-            "options": [
+                    "name": "400",
+                    "class": "shade-400",
+                    "preview": "--gray-400"
+                },
                 {
-                    "name": "Small",
-                    "icon": "Atlas_Core.Atlas.resize-small",
-                    "class": "btn-sm"
+                    "name": "500 (medium)",
+                    "class": "shade-500",
+                    "preview": "--gray-500"
                 },
                 {
-                    "name": "Large",
-                    "icon": "Atlas_Core.Atlas.resize-full",
-                    "class": "btn-lg"
-                }
-            ]
-        },
-        {
-            "name": "Align icon",
-            "type": "ToggleButtonGroup",
-            "description": "Place the icon to the right or on top of the button.",
-            "options": [
+                    "name": "600",
+                    "class": "shade-600",
+                    "oldNames": ["Dark"],
+                    "preview": "--gray-600"
+                },
                 {
-                    "name": "Right",
-                    "icon": "Atlas_Core.Atlas.align-right",
-                    "class": "btn-icon-right"
+                    "name": "700",
+                    "class": "shade-700",
+                    "preview": "--gray-700"
                 },
                 {
-                    "name": "Top",
-                    "icon": "Atlas_Core.Atlas.align-top",
-                    "class": "btn-icon-top"
+                    "name": "800",
+                    "class": "shade-800",
+                    "preview": "--gray-800"
+                },
+                {
+                    "name": "900 (darkest)",
+                    "class": "shade-900",
+                    "preview": "--gray-900"
                 }
             ]
         },
         {
-            "name": "Full width",
-            "type": "Toggle",
-            "description": "Extend the button to the full width of the container it is placed in.",
-            "class": "btn-block"
-        },
-        {
-            "name": "Border",
-            "oldNames": ["Bordered"],
-            "type": "Toggle",
-            "description": "Style the button with a transparent background, a colored border, and colored text.",
-            "class": "btn-bordered"
-        }
-    ],
-    "ListView": [
-        {
-            "name": "Style",
-            "type": "ToggleButtonGroup",
-            "description": "Change the appearance of rows in the list view.",
+            "category": "Appearance",
+            "name": "Background footer",
+            "type": "ColorPicker",
+            "oldNames": ["Background color footer"],
+            "property": "--dataview-controls-bg",
+            "description": "Change the background color of the footer.",
             "options": [
                 {
-                    "name": "Lined",
-                    "class": "listview-lined"
+                    "name": "Background Primary",
+                    "oldNames": ["Background Default"],
+                    "variable": "--bg-color"
                 },
                 {
-                    "name": "Striped",
-                    "class": "listview-striped"
+                    "name": "Background Secondary",
+                    "oldNames": ["Background Dashboard"],
+                    "variable": "--bg-color-secondary"
                 },
                 {
-                    "name": "Bordered",
-                    "class": "listview-bordered"
+                    "name": "Brand Primary",
+                    "oldNames": ["Primary"],
+                    "variable": "--brand-primary"
                 },
                 {
-                    "name": "No styling",
-                    "oldNames": ["No Styling"],
-                    "class": "listview-stylingless"
-                }
-            ]
-        },
-        {
-            "name": "Hover style",
-            "type": "Toggle",
-            "description": "Highlight a row when hovering over it. Only useful when the row is clickable.",
-            "class": "listview-hover"
-        },
-        {
-            "name": "Row size",
-            "oldNames": ["Row Size"],
-            "type": "ToggleButtonGroup",
-            "description": "Change the row spacing of the list view.",
-            "options": [
+                    "name": "Brand Secondary",
+                    "oldNames": ["Default", "Brand Default"],
+                    "variable": "--background-default"
+                },
                 {
-                    "name": "Small",
-                    "icon": "Atlas_Core.Atlas.resize-small",
-                    "class": "listview-sm"
+                    "name": "Brand Success",
+                    "oldNames": ["Success"],
+                    "variable": "--brand-success"
                 },
                 {
-                    "name": "Large",
-                    "icon": "Atlas_Core.Atlas.resize-full",
-                    "class": "listview-lg"
+                    "name": "Brand Warning",
+                    "oldNames": ["Warning"],
+                    "variable": "--brand-warning"
+                },
+                {
+                    "name": "Brand Danger",
+                    "oldNames": ["Danger"],
+                    "variable": "--bg-danger"
                 }
             ]
         }
     ],
     "DataGrid": [
         {
+            "category": "Appearance",
             "name": "Style",
             "type": "ToggleButtonGroup",
             "description": "Choose one of the following styles to change the appearance of the data grid.",
@@ -454,12 +2126,14 @@
             ]
         },
         {
+            "category": "Appearance",
             "name": "Hover style",
             "type": "Toggle",
             "description": "Enable data grid hover to make the rows hoverable.",
             "class": "datagrid-hover"
         },
         {
+            "category": "Appearance",
             "name": "Row size",
             "type": "ToggleButtonGroup",
             "description": "Increase or decrease the row spacing of the data grid row.",
@@ -479,6 +2153,7 @@
     ],
     "TemplateGrid": [
         {
+            "category": "Appearance",
             "name": "Style",
             "type": "ToggleButtonGroup",
             "description": "Choose one of the following styles to change the appearance of the template grid.",
@@ -502,6 +2177,7 @@
             ]
         },
         {
+            "category": "Appearance",
             "name": "Hover style",
             "type": "Toggle",
             "description": "Enable template grid hover to make the rows hoverable.",
@@ -510,6 +2186,7 @@
     ],
     "GroupBox": [
         {
+            "category": "Appearance",
             "name": "Style",
             "type": "ColorPicker",
             "description": "Choose one of the following styles to change the appearance of the groupbox.",
@@ -552,6 +2229,7 @@
             ]
         },
         {
+            "category": "Appearance",
             "name": "Callout style",
             "type": "Toggle",
             "description": "Enable the groupbox callout functionality to highlight the importance of the groupbox.",
@@ -560,6 +2238,7 @@
     ],
     "StaticImageViewer": [
         {
+            "category": "Appearance",
             "name": "Style",
             "type": "ToggleButtonGroup",
             "description": "Choose the style of your image.",
@@ -579,12 +2258,14 @@
             ]
         },
         {
+            "category": "Appearance",
             "name": "Center",
             "type": "Toggle",
             "description": "Align the image in the center of an element.",
             "class": "img-center"
         },
         {
+            "category": "Appearance",
             "name": "Fit",
             "type": "Dropdown",
             "description": "Choose the image fit.",
@@ -610,6 +2291,7 @@
     ],
     "DynamicImageViewer": [
         {
+            "category": "Appearance",
             "name": "Style",
             "type": "ToggleButtonGroup",
             "description": "Choose the style of your image.",
@@ -629,12 +2311,14 @@
             ]
         },
         {
+            "category": "Appearance",
             "name": "Center",
             "type": "Toggle",
             "description": "Align the image in the center of an element.",
             "class": "img-center"
         },
         {
+            "category": "Appearance",
             "name": "Fit",
             "type": "Dropdown",
             "description": "Choose the image fit.",
@@ -660,6 +2344,7 @@
     ],
     "Label": [
         {
+            "category": "Appearance",
             "name": "Style",
             "type": "ColorPicker",
             "description": "Change the appearance of a label.",
@@ -699,6 +2384,7 @@
     ],
     "TabContainer": [
         {
+            "category": "Appearance",
             "name": "Style",
             "type": "ToggleButtonGroup",
             "description": "Change the appearance of the tab container",
@@ -722,6 +2408,7 @@
             ]
         },
         {
+            "category": "Appearance",
             "name": "Tab position",
             "oldNames": ["Tab Position"],
             "type": "ToggleButtonGroup",
@@ -745,6 +2432,7 @@
             ]
         },
         {
+            "category": "Appearance",
             "name": "Justify",
             "type": "Toggle",
             "description": "Justify the tabs to 100%",
@@ -753,6 +2441,7 @@
     ],
     "DynamicText": [
         {
+            "category": "Typography",
             "name": "Size",
             "type": "ToggleButtonGroup",
             "description": "Make the text smaller or larger.",
@@ -770,6 +2459,7 @@
             ]
         },
         {
+            "category": "Typography",
             "name": "Weight",
             "oldNames": ["Font Weight"],
             "type": "ToggleButtonGroup",
@@ -794,6 +2484,7 @@
             ]
         },
         {
+            "category": "Typography",
             "name": "Color",
             "type": "ColorPicker",
             "description": "Change the color of text.",
@@ -815,9 +2506,9 @@
                     "preview": "--brand-primary"
                 },
                 {
-                    "name": "Brand Secondary",
-                    "oldNames": ["Default", "Brand Default"],
-                    "class": "text-secondary",
+                    "name": "Default",
+                    "oldNames": ["Default", "Brand Default", "Brand Secondary"],
+                    "class": "text-default",
                     "preview": "--font-color-default"
                 },
                 {
@@ -839,13 +2530,68 @@
                     "preview": "--brand-danger"
                 },
                 {
-                    "name": "White",
+                    "name": "Contrast",
                     "class": "text-white",
-                    "preview": "white"
+                    "preview": "--font-color-contrast",
+                    "oldNames": ["White"]
+                }
+            ]
+        },
+        {
+            "category": "Typography",
+            "name": "Color shade",
+            "type": "ColorPicker",
+            "description": "Set the shade of the brand color.",
+            "options": [
+                {
+                    "name": "100",
+                    "class": "shade-100",
+                    "preview": "--gray-100"
+                },
+                {
+                    "name": "200",
+                    "class": "shade-200",
+                    "preview": "--gray-200"
+                },
+                {
+                    "name": "300",
+                    "class": "shade-300",
+                    "preview": "--gray-300"
+                },
+                {
+                    "name": "400",
+                    "class": "shade-400",
+                    "preview": "--gray-400"
+                },
+                {
+                    "name": "500",
+                    "class": "shade-500",
+                    "preview": "--gray-500"
+                },
+                {
+                    "name": "600",
+                    "class": "shade-600",
+                    "preview": "--gray-600"
+                },
+                {
+                    "name": "700",
+                    "class": "shade-700",
+                    "preview": "--gray-700"
+                },
+                {
+                    "name": "800",
+                    "class": "shade-800",
+                    "preview": "--gray-800"
+                },
+                {
+                    "name": "900",
+                    "class": "shade-900",
+                    "preview": "--gray-900"
                 }
             ]
         },
         {
+            "category": "Typography",
             "name": "Alignment",
             "type": "ToggleButtonGroup",
             "description": "Align the text.",
@@ -868,6 +2614,7 @@
             ]
         },
         {
+            "category": "Typography",
             "name": "Letter case",
             "oldNames": ["Transform"],
             "type": "ToggleButtonGroup",
@@ -890,6 +2637,7 @@
             ]
         },
         {
+            "category": "Typography",
             "name": "Wrap options",
             "type": "ToggleButtonGroup",
             "description": "Break long words and sentences into multiple lines.",
@@ -908,6 +2656,7 @@
     ],
     "Table": [
         {
+            "category": "Appearance",
             "name": "Style",
             "type": "ToggleButtonGroup",
             "description": "Change the appearance of cells in the table.",
@@ -923,6 +2672,7 @@
             ]
         },
         {
+            "category": "Appearance",
             "name": "Compact",
             "type": "Toggle",
             "description": "Change the spacing between cells to be compact.",
@@ -931,6 +2681,7 @@
     ],
     "com.mendix.widget.custom.badge.Badge": [
         {
+            "category": "Appearance",
             "name": "Style",
             "type": "ColorPicker",
             "description": "The brand style affecting this element's appearance.",
@@ -965,12 +2716,14 @@
     ],
     "com.mendix.widget.custom.progressbar.ProgressBar": [
         {
+            "category": "Appearance",
             "name": "Striped bar",
             "type": "Toggle",
             "description": "Striped progress bar",
             "class": "progress-striped"
         },
         {
+            "category": "Appearance",
             "name": "Bar color",
             "type": "ColorPicker",
             "description": "Color of the progress bar",
@@ -998,6 +2751,7 @@
             ]
         },
         {
+            "category": "Appearance",
             "name": "Size",
             "type": "ToggleButtonGroup",
             "description": "Size of the progress bar",
@@ -1019,6 +2773,7 @@
     ],
     "com.mendix.widget.custom.badgebutton.BadgeButton": [
         {
+            "category": "Appearance",
             "name": "Style",
             "type": "ColorPicker",
             "description": "The brand style affecting this element's appearance.",
@@ -1051,6 +2806,7 @@
             ]
         },
         {
+            "category": "Appearance",
             "name": "Size",
             "type": "ToggleButtonGroup",
             "description": "Size of the buttons",
@@ -1068,12 +2824,14 @@
             ]
         },
         {
+            "category": "Appearance",
             "name": "Full width",
             "type": "Toggle",
             "description": "Extend the button to the full width of the container it is placed in.",
             "class": "btn-block"
         },
         {
+            "category": "Appearance",
             "name": "Border",
             "oldNames": ["Bordered"],
             "type": "Toggle",
@@ -1083,6 +2841,7 @@
     ],
     "com.mendix.widget.custom.progresscircle.ProgressCircle": [
         {
+            "category": "Appearance",
             "name": "Bar color",
             "type": "ColorPicker",
             "description": "Color of the progress bar",
@@ -1110,6 +2869,7 @@
             ]
         },
         {
+            "category": "Appearance",
             "name": "Size",
             "type": "ToggleButtonGroup",
             "description": "Thickness of the progress circle",
@@ -1131,6 +2891,7 @@
     ],
     "com.mendix.widget.custom.switch.Switch": [
         {
+            "category": "Appearance",
             "name": "Style",
             "type": "ColorPicker",
             "description": "The brand style affecting this element's appearance.",
@@ -1163,6 +2924,7 @@
             ]
         },
         {
+            "category": "Appearance",
             "name": "Device style",
             "type": "ToggleButtonGroup",
             "description": "The general appearance of the switch. When no option selected iOS styles are applied",
@@ -1204,6 +2966,7 @@
     ],
     "com.mendix.widget.custom.starrating.StarRating": [
         {
+            "category": "Appearance",
             "name": "Size",
             "type": "ToggleButtonGroup",
             "description": "Change size of the rating icon/image. Default is medium.",
@@ -1223,6 +2986,7 @@
     ],
     "com.mendix.widget.web.accordion.Accordion": [
         {
+            "category": "Appearance",
             "name": "Borders",
             "type": "ToggleButtonGroup",
             "description": "Change the border appearance. By default, only horizontal borders between groups are applied.",
@@ -1242,12 +3006,14 @@
             ]
         },
         {
+            "category": "Appearance",
             "name": "Striped",
             "type": "Toggle",
             "description": "Add alternating background colors to groups in the accordion.",
             "class": "widget-accordion-striped"
         },
         {
+            "category": "Appearance",
             "name": "Compact",
             "type": "Toggle",
             "description": "Make groups in the accordion more compact.",
@@ -1256,6 +3022,7 @@
     ],
     "com.mendix.widget.web.image.Image": [
         {
+            "category": "Appearance",
             "name": "Align content",
             "type": "Dropdown",
             "description": "Align content of this element left, right or center it. Align elements inside the container as a row or as a column.",
@@ -1287,6 +3054,7 @@
             ]
         },
         {
+            "category": "Appearance",
             "name": "Image style",
             "type": "ToggleButtonGroup",
             "description": "Change the image style.",
@@ -1306,12 +3074,14 @@
             ]
         },
         {
+            "category": "Appearance",
             "name": "Center image",
             "type": "Toggle",
             "description": "Center the image.",
             "class": "img-center"
         },
         {
+            "category": "Appearance",
             "name": "Image fit",
             "type": "Dropdown",
             "description": "Change the fit of the image.",
@@ -1339,6 +3109,7 @@
             ]
         },
         {
+            "category": "Appearance",
             "name": "Opacity",
             "type": "ToggleButtonGroup",
             "description": "Change the opacity of the image.",
@@ -1356,10 +3127,40 @@
                     "class": "img-opacity-high"
                 }
             ]
+        },
+        {
+            "category": "Icon",
+            "name": "Icon color",
+            "type": "ColorPicker",
+            "property": "color",
+            "description": "Sets the color of icons.",
+            "options": [
+                {
+                    "name": "Brand Primary",
+                    "variable": "--brand-primary"
+                },
+                {
+                    "name": "Brand Success",
+                    "variable": "--brand-success"
+                },
+                {
+                    "name": "Brand Warning",
+                    "variable": "--brand-warning"
+                },
+                {
+                    "name": "Brand Danger",
+                    "variable": "--brand-danger"
+                },
+                {
+                    "name": "Link color",
+                    "variable": "--link-color"
+                }
+            ]
         }
     ],
     "com.mendix.widget.custom.slider.Slider": [
         {
+            "category": "Appearance",
             "name": "Style",
             "type": "ColorPicker",
             "description": "The brand style affecting this element's appearance.",
@@ -1397,6 +3198,7 @@
     ],
     "com.mendix.widget.custom.RangeSlider.RangeSlider": [
         {
+            "category": "Appearance",
             "name": "Style",
             "type": "ColorPicker",
             "description": "The brand style affecting this element's appearance.",
diff --git a/Source/themesource/atlas_core/web/layouts/_layout-atlas-phone.scss b/Source/themesource/atlas_core/web/layouts/_layout-atlas-phone.scss
index a9957e3e..f2c7c289 100644
--- a/Source/themesource/atlas_core/web/layouts/_layout-atlas-phone.scss
+++ b/Source/themesource/atlas_core/web/layouts/_layout-atlas-phone.scss
@@ -6,9 +6,9 @@
 @mixin layout-atlas-phone() {
     .layout-atlas-phone {
         .region-topbar {
-            min-height: $m-header-height;
+            min-height: var(--m-header-height);
             border-style: none;
-            background-color: $m-header-bg;
+            background: var(--m-header-bg);
 
             &::before {
                 display: none;
@@ -20,7 +20,7 @@
                 .glyphicon,
                 .mx-icon-lined,
                 .mx-icon-filled {
-                    margin-right: $spacing-medium;
+                    margin-right: var(--spacing-medium);
                 }
             }
         }
diff --git a/Source/themesource/atlas_core/web/layouts/_layout-atlas-responsive.scss b/Source/themesource/atlas_core/web/layouts/_layout-atlas-responsive.scss
index ad6945e2..383e53c5 100644
--- a/Source/themesource/atlas_core/web/layouts/_layout-atlas-responsive.scss
+++ b/Source/themesource/atlas_core/web/layouts/_layout-atlas-responsive.scss
@@ -4,18 +4,37 @@
    Extra styling for responsive layouts
 ========================================================================== */
 @mixin layout-atlas-responsive() {
-    $sidebar-icon-height: 52px;
-    $sidebar-icon-width: 52px;
+    .layout-atlas {
+        .mx-scrollcontainer {
+            &:not(.mx-scrollcontainer-open) {
+                .region-sidebar {
+                    .mx-scrollcontainer-wrapper {
+                        transition: padding var(--navsidebar-animation-duration) var(--navsidebar-animation-function);
+                    }
+                }
+            }
+            &.mx-scrollcontainer-open {
+                .region-sidebar {
+                    .mx-scrollcontainer-wrapper {
+                        padding-left: var(--spacing-medium);
+                        padding-right: var(--spacing-medium);
+                        transition: padding var(--navsidebar-animation-duration) var(--navsidebar-animation-function);
+                    }
+                }
+            }
+        }
+    }
 
     .layout-atlas-responsive,
-    .layout-atlas-responsive-default {
+    .layout-atlas-responsive-default,
+    .layout-atlas-responsive-sidebar {
         @media (min-width: $screen-md) {
-            --closed-sidebar-width: #{$navsidebar-width-closed};
+            --closed-sidebar-width: var(--navsidebar-width-closed);
             .mx-scrollcontainer-shrink:not(.mx-scrollcontainer-open) > .region-sidebar,
             .mx-scrollcontainer-push:not(.mx-scrollcontainer-open) > .region-sidebar,
             .mx-scrollcontainer-slide:not(.mx-scrollcontainer-open) > .region-sidebar {
                 @if (not $use-modern-client) {
-                    width: $navsidebar-width-closed !important;
+                    width: var(--navsidebar-width-closed) !important;
                 }
 
                 .mx-scrollcontainer-wrapper .mx-navigationtree ul li {
@@ -26,12 +45,12 @@
                     &.mx-navigationtree-has-items:hover > ul {
                         position: absolute;
                         z-index: 100;
-                        top: $topbar-minimalheight;
+                        top: var(--topbar-minimalheight);
                         bottom: 0;
-                        left: $sidebar-icon-width;
+                        left: var(--navsidebar-icon-width);
                         display: block;
                         min-width: auto;
-                        padding: $spacing-small 0;
+                        padding: var(--spacing-small) 0;
 
                         & > li.mx-navigationtree-has-items:hover > ul {
                             top: 0;
@@ -39,8 +58,8 @@
                         }
                     }
 
-                    &.mx-navigationtree-collapsed,
-                    &.mx-navigationtree-has-items {
+                    &.mx-navigationtree-has-items,
+                    &.mx-navigationtree-collapsed {
                         ul {
                             display: none;
                         }
@@ -56,16 +75,16 @@
                             z-index: 100;
                             top: 0;
                             bottom: 0;
-                            left: $sidebar-icon-width;
+                            left: var(--navsidebar-icon-width);
                             display: block;
                             overflow-y: auto;
                             min-width: auto;
-                            padding: $spacing-small 0;
+                            padding: var(--spacing-small) 0;
                         }
                     }
 
-                    &.mx-navigationtree-collapsed,
-                    &.mx-navigationtree-has-items {
+                    &.mx-navigationtree-has-items,
+                    .mx-navigationtree-collapsed {
                         ul {
                             display: none;
                         }
@@ -81,7 +100,7 @@
                 }
 
                 &.mx-scrollcontainer-open > .region-sidebar {
-                    width: $navsidebar-width-closed !important;
+                    width: var(--navsidebar-width-closed) !important;
 
                     & > .mx-scrollcontainer-wrapper {
                         position: relative;
@@ -90,7 +109,7 @@
 
                 .region-sidebar > .mx-scrollcontainer-wrapper {
                     z-index: 2;
-                    left: -$navsidebar-width-closed;
+                    left: calc(-1 * var(--navsidebar-width-closed));
                     background-color: inherit;
                 }
             }
@@ -109,8 +128,13 @@
 
         // Sidebar
         .region-sidebar {
+            scrollbar-color: transparent transparent;
+            &:hover {
+                scrollbar-color: var(--navigation-scrollbar-color);
+            }
+
             .toggle-btn {
-                width: $sidebar-icon-width;
+                width: var(--navsidebar-icon-width);
                 border-color: transparent;
                 border-radius: 0;
                 background: transparent;
@@ -119,14 +143,14 @@
             .mx-scrollcontainer-wrapper {
                 .toggle-btn-wrapper {
                     display: flex;
-                    padding: $spacing-small;
+                    padding: var(--spacing-small);
                     align-items: center;
-                    min-height: calc(#{$topbar-minimalheight} + 4px);
-                    background: $navsidebar-sub-bg;
+                    min-height: calc(var(--topbar-minimalheight) + 4px);
+                    background: var(--navsidebar-sub-bg);
                 }
 
                 .toggle-btn {
-                    padding: $spacing-medium;
+                    padding: var(--spacing-medium);
 
                     img {
                         width: 24px;
@@ -141,10 +165,12 @@
 
                 .mx-navigationtree .navbar-inner > ul > li {
                     & > a {
-                        height: $sidebar-icon-height;
-                        padding: $spacing-small 0;
+                        height: var(--navsidebar-icon-height);
+                        padding: var(--spacing-small) 0;
+                        margin: var(--spacing-small) 0 0 0;
                         white-space: nowrap;
                         overflow: hidden;
+                        border-radius: var(--navsidebar-border-radius);
                         // Glyph icon
                         .glyphicon,
                         .mx-icon-lined,
@@ -152,19 +178,27 @@
                             display: flex;
                             align-items: center;
                             justify-content: center;
-                            width: $sidebar-icon-width;
-                            height: $sidebar-icon-height;
-                            padding: $spacing-small $spacing-medium;
-                            border-radius: $border-radius-default;
+                            width: var(--navsidebar-icon-width);
+                            height: var(--navsidebar-icon-height);
+                            padding: var(--spacing-small) var(--spacing-medium);
+                            border-radius: var(--navsidebar-border-radius);
+                        }
+                        img {
+                            width: var(--navsidebar-icon-width);
+                            padding: var(--spacing-small) var(--spacing-medium);
                         }
                     }
+                    &.mx-navigationtree-has-items:not(.mx-navigationtree-collapsed) > a {
+                        border-radius: var(--navsidebar-border-radius) var(--navigation-border-radius) 0 0;
+                        background-color: var(--navsidebar-sub-bg-header);
+                    }
                 }
             }
         }
 
         // Topbar
         .region-topbar {
-            padding: 0 $spacing-small;
+            padding: 0 var(--spacing-small);
 
             .toggle-btn {
                 padding: 0;
@@ -176,7 +210,7 @@
 
             .mx-icon-filled,
             .mx-icon-lined {
-                font-size: 20px;
+                font-size: 18px;
             }
         }
     }
@@ -184,21 +218,117 @@
     // Topbar variant
     .layout-atlas-responsive-topbar {
         .region-topbar {
-            padding: 0 $spacing-medium;
+            padding: 0 var(--spacing-medium);
             @media (max-width: $screen-sm-max) {
-                padding: 0 $spacing-small;
+                padding: 0 var(--spacing-small);
+            }
+        }
+
+        .mx-scrollcontainer-slide {
+            &:not(.mx-scrollcontainer-open) > .region-sidebar {
+                overflow: hidden;
             }
 
-            .mx-scrollcontainer-wrapper {
-                .mx-layoutgrid,
-                .mx-layoutgrid-fluid {
-                    padding: 0 $gutter-size;
+            &.mx-scrollcontainer-open > .region-sidebar {
+                z-index: 100;
+            }
+        }
+
+        @if (not $use-modern-client) {
+            .mx-scrollcontainer-slide {
+                &:not(.mx-scrollcontainer-open) > .region-sidebar {
+                    overflow: hidden;
+                }
+
+                &.mx-scrollcontainer-open > .region-sidebar {
+                    & > .mx-scrollcontainer-wrapper {
+                        position: relative;
+                        background: var(--sidebar-bg);
+                        width: var(--navsidebar-width-open);
+                        z-index: 100;
+                    }
                 }
             }
 
-            .mx-icon-filled,
-            .mx-icon-lined {
-                font-size: 20px;
+            // Push aside for mobile
+            @media (max-width: $screen-sm-max) {
+                .mx-scrollcontainer-open:not(.mx-scrollcontainer-slide) {
+                    width: 1100px;
+                }
+
+                .mx-scrollcontainer-slide .toggle-btn {
+                    display: inline-block !important;
+                }
+            }
+        }
+    }
+
+    .layout-atlas-responsive-sidebar {
+        .sidebar-wrapper {
+            padding: var(--spacing-medium) 0 var(--spacing-medium) 0;
+            transition: padding var(--navsidebar-animation-duration) var(--navsidebar-animation-function);
+        }
+
+        .mx-scrollcontainer-shrink {
+            .toggle-btn-sidebar {
+                width: var(--navsidebar-toggle-size);
+                height: var(--navsidebar-toggle-size);
+                border: 1px solid var(--border-color-default);
+                opacity: 0;
+                padding: 0;
+                overflow: hidden;
+                position: absolute;
+                background: var(--color-base);
+                border-radius: 100%;
+                transition: all var(--navsidebar-animation-duration) var(--navsidebar-animation-function);
+                color: var(--font-color-header);
+                left: calc(var(--navsidebar-width-closed) - var(--navsidebar-toggle-size) / 2);
+                .mx-icon-filled,
+                .mx-icon-lined {
+                    line-height: var(--line-height-base);
+                }
+            }
+
+            .region-sidebar:hover {
+                .toggle-btn-sidebar {
+                    opacity: 1;
+                    &:hover {
+                        background-color: var(--brand-primary);
+                        color: var(--font-color-contrast);
+                        transform: scale(1.1);
+                        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
+                    }
+                }
+            }
+
+            &.mx-scrollcontainer-open {
+                .toggle-btn-sidebar {
+                    left: calc(var(--sidebar-size, var(--navsidebar-width-open)) - var(--navsidebar-toggle-size) / 2);
+                    rotate: 180deg;
+                }
+            }
+
+            @media (max-width: $screen-sm-max) {
+                :not(&.mx-scrollcontainer-open) {
+                    .toggle-btn-sidebar-mobile {
+                        // shown only for mobile
+                        color: var(--brand-primary-800);
+                        background: transparent;
+                        border: 0;
+                    }
+                }
+            }
+        }
+
+        .widget-language-selector {
+            .current-language-text {
+                color: var(--font-color-header);
+            }
+            .language-arrow {
+                color: var(--font-color-header);
+                .arrow-image {
+                    filter: none;
+                }
             }
         }
     }
diff --git a/Source/themesource/atlas_core/web/layouts/_layout-atlas-tablet.scss b/Source/themesource/atlas_core/web/layouts/_layout-atlas-tablet.scss
index 7937f0e6..a3193e37 100644
--- a/Source/themesource/atlas_core/web/layouts/_layout-atlas-tablet.scss
+++ b/Source/themesource/atlas_core/web/layouts/_layout-atlas-tablet.scss
@@ -6,9 +6,9 @@
 @mixin layout-atlas-tablet() {
     .layout-atlas-tablet {
         .region-topbar {
-            min-height: $m-header-height;
+            min-height: var(--m-header-height);
             border-style: none;
-            background-color: $m-header-bg;
+            background: var(--m-header-bg);
 
             &::before {
                 display: none;
@@ -20,7 +20,7 @@
                 .glyphicon,
                 .mx-icon-lined,
                 .mx-icon-filled {
-                    margin-right: $spacing-medium;
+                    margin-right: var(--spacing-medium);
                 }
             }
         }
diff --git a/Source/themesource/atlas_core/web/layouts/_layout-atlas.scss b/Source/themesource/atlas_core/web/layouts/_layout-atlas.scss
index 17e1022a..335be9e5 100644
--- a/Source/themesource/atlas_core/web/layouts/_layout-atlas.scss
+++ b/Source/themesource/atlas_core/web/layouts/_layout-atlas.scss
@@ -30,38 +30,34 @@
 
         // Sidebar
         .region-sidebar {
-            background-color: $navsidebar-bg;
+            background: var(--navsidebar-bg);
             @if not $use-modern-client {
                 z-index: 101;
             }
-            box-shadow: 0 0 4px rgb(0 0 0 / 14%), 2px 4px 8px rgb(0 0 0 / 28%);
+            box-shadow: var(--navsidebar-shadow);
 
             .mx-scrollcontainer-wrapper {
                 display: flex;
                 flex-direction: column;
-                padding: $spacing-small 0;
+                padding: var(--spacing-small) 0;
             }
 
             .mx-navigationtree .navbar-inner > ul > li > a {
-                padding: $spacing-medium;
+                padding: var(--spacing-medium);
 
                 .glyphicon,
                 .mx-icon-lined,
                 .mx-icon-filled {
-                    margin-right: $spacing-small;
+                    margin-right: var(--spacing-small);
                 }
             }
 
-            .sidebar-heading {
-                background: $navsidebar-sub-bg;
-            }
-
             .toggle-btn {
-                margin-right: $spacing-small;
+                margin-right: var(--spacing-small);
                 border-color: transparent;
                 border-radius: 0;
                 background: transparent;
-                padding: $spacing-medium;
+                padding: var(--spacing-medium);
             }
         }
 
@@ -69,20 +65,20 @@
         .region-topbar {
             position: relative;
             z-index: 60; // Show dropshadow
-            min-height: $topbar-minimalheight;
-            background-color: $navtopbar-bg;
+            min-height: var(--topbar-minimalheight);
+            background: var(--navtopbar-bg);
 
             // Topbar Content
             .topbar-content {
                 display: flex;
                 align-items: center;
-                min-height: $topbar-minimalheight;
+                min-height: var(--topbar-minimalheight);
             }
 
             // Toggle btn
             .toggle-btn {
                 padding: 0;
-                margin-right: $spacing-medium;
+                margin-right: var(--spacing-medium);
                 border-color: transparent;
                 border-radius: 0;
                 background: transparent;
@@ -96,28 +92,28 @@
                 padding: 0;
                 line-height: inherit;
                 font-size: 16px;
-                margin-right: $spacing-small;
+                margin-right: var(--spacing-small);
 
                 img {
                     display: inline-block;
-                    margin-right: $spacing-small;
+                    margin-right: var(--spacing-small);
                     @if $brand-logo !=false {
                         width: 0;
                         height: 0;
-                        padding: ($brand-logo-height / 2) ($brand-logo-width / 2);
-                        background-image: url($brand-logo);
+                        padding: calc(var(--brand-logo-height / 2)) calc(var(--brand-logo-width / 2));
+                        background-image: url(var($brand-logo));
                         background-repeat: no-repeat;
                         background-position: left center;
-                        background-size: $brand-logo-width;
+                        background-size: var(--brand-logo-width);
                     } @else {
                         width: auto;
-                        height: $brand-logo-height;
+                        height: var(--brand-logo-height);
                     }
                 }
 
                 a {
-                    margin-left: $spacing-small;
-                    color: $navbar-brand-name;
+                    margin-left: var(--spacing-small);
+                    color: var(--navbar-brand-name);
                     font-size: 20px;
 
                     &:hover,
diff --git a/Source/themesource/atlas_core/web/main.scss b/Source/themesource/atlas_core/web/main.scss
index 563c96be..3b43b4f1 100644
--- a/Source/themesource/atlas_core/web/main.scss
+++ b/Source/themesource/atlas_core/web/main.scss
@@ -2,14 +2,22 @@
 @import "exclusion-variables-defaults";
 @import "../../../theme/web/exclusion-variables";
 @import "generated-exclusion-variables";
+@import "themes/theme-default";
+@import "color-variants";
 @import "../../../theme/web/custom-variables";
-@import "variables";
-@import "variables-css-mappings";
+@import "variables"; // support for legacy modules using sass variables
+
+// support for legacy themes using sass variables
+@import "css-variables-mappings";
+@if not $use-css-variables {
+    @include legacy-variables();
+}
 
 // Font Family Import
 @if $font-family-import != false {
     @import url($font-family-import);
 }
+@import "./poppins";
 
 //=============================== Bootstrap ================================\\
 
@@ -54,6 +62,14 @@
 @if not $exclude-login {
     @include login();
 }
+@import "core/base/card";
+@if not $exclude-card {
+    @include card();
+}
+@import "core/base/focus-ring";
+@if not $exclude-focus-ring {
+    @include focus-ring();
+}
 
 // Widgets
 @import "core/widgets/input";
@@ -106,6 +122,11 @@
     @include check-box();
 }
 
+@import "core/widgets/checkboxradiobutton";
+@if not $exclude-check-box-radio-button {
+    @include checkboxradiobutton();
+}
+
 @import "core/widgets/grid";
 @if not $exclude-grid {
     @include grid();
@@ -131,6 +152,16 @@
     @include date-picker();
 }
 
+@import "core/widgets/demo-user-switcher";
+@if not $exclude-demo-user-switcher {
+    @include demo-user-switcher();
+}
+
+@import "core/widgets/div-container";
+@if not $exclude-div-container {
+    @include div-container();
+}
+
 @import "core/widgets/header";
 @if not $exclude-header {
     @include header();
diff --git a/Source/themesource/atlas_core/web/poppins.scss b/Source/themesource/atlas_core/web/poppins.scss
new file mode 100644
index 00000000..42a73c0c
--- /dev/null
+++ b/Source/themesource/atlas_core/web/poppins.scss
@@ -0,0 +1,125 @@
+@font-face {
+  font-family: 'Poppins';
+  src: url('/resources/fonts/poppins/Poppins-Thin.ttf') format('truetype');
+  font-weight: 100;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Poppins';
+  src: url('/resources/fonts/poppins/Poppins-ThinItalic.ttf') format('truetype');
+  font-weight: 100;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Poppins';
+  src: url('/resources/fonts/poppins/Poppins-ExtraLight.ttf') format('truetype');
+  font-weight: 200;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Poppins';
+  src: url('/resources/fonts/poppins/Poppins-ExtraLightItalic.ttf') format('truetype');
+  font-weight: 200;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Poppins';
+  src: url('/resources/fonts/poppins/Poppins-Light.ttf') format('truetype');
+  font-weight: 300;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Poppins';
+  src: url('/resources/fonts/poppins/Poppins-LightItalic.ttf') format('truetype');
+  font-weight: 300;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Poppins';
+  src: url('/resources/fonts/poppins/Poppins-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Poppins';
+  src: url('/resources/fonts/poppins/Poppins-Italic.ttf') format('truetype');
+  font-weight: 400;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Poppins';
+  src: url('/resources/fonts/poppins/Poppins-Medium.ttf') format('truetype');
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Poppins';
+  src: url('/resources/fonts/poppins/Poppins-MediumItalic.ttf') format('truetype');
+  font-weight: 500;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Poppins';
+  src: url('/resources/fonts/poppins/Poppins-SemiBold.ttf') format('truetype');
+  font-weight: 600;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Poppins';
+  src: url('/resources/fonts/poppins/Poppins-SemiBoldItalic.ttf') format('truetype');
+  font-weight: 600;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Poppins';
+  src: url('/resources/fonts/poppins/Poppins-Bold.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Poppins';
+  src: url('/resources/fonts/poppins/Poppins-BoldItalic.ttf') format('truetype');
+  font-weight: 700;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Poppins';
+  src: url('/resources/fonts/poppins/Poppins-ExtraBold.ttf') format('truetype');
+  font-weight: 800;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Poppins';
+  src: url('/resources/fonts/poppins/Poppins-ExtraBoldItalic.ttf') format('truetype');
+  font-weight: 800;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Poppins';
+  src: url('/resources/fonts/poppins/Poppins-Black.ttf') format('truetype');
+  font-weight: 900;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Poppins';
+  src: url('/resources/fonts/poppins/Poppins-BlackItalic.ttf') format('truetype');
+  font-weight: 900;
+  font-style: italic;
+}
diff --git a/Source/themesource/atlas_core/web/themes/_theme-default.scss b/Source/themesource/atlas_core/web/themes/_theme-default.scss
new file mode 100644
index 00000000..09793e74
--- /dev/null
+++ b/Source/themesource/atlas_core/web/themes/_theme-default.scss
@@ -0,0 +1,602 @@
+@import "../breakpoints";
+
+:root {
+  /* Brand Colors */
+  --brand-primary: #264ae5;
+  --brand-success: #16aa16;
+  --brand-warning: #cd8501;
+  --brand-danger: #EA3337;
+  --brand-default: color-mix(in srgb, var(--brand-primary) 10%, #e7e7e9);
+  --gray: #B8BABF;
+
+  /* Base and contrast colors (default white and black for light theme) */
+  --color-base: #fff;
+  --color-contrast: #000;
+
+  /* Hover Color Variants */
+  --brand-default-hover: var(--brand-default-100);
+  --brand-primary-hover: var(--brand-primary-700);
+  --brand-success-hover: var(--brand-success-700);
+  --brand-warning-hover: var(--brand-warning-700);
+  --brand-danger-hover: var(--brand-danger-700);
+
+  /* Brand Logo */
+  --brand-logo-height: 24px;
+  --brand-logo-width: 32px;
+  --brand-gradient: linear-gradient(to bottom, var(--brand-primary-900), var(--brand-primary-700));
+
+  /* Default Font Size & Color */
+  --font-size-default: 14px;
+  --font-color-default: var(--gray-900);
+  --font-color-contrast: var(--color-base);
+
+  /* Global Border */
+  --border-color-default: var(--brand-default-300);
+  --border-radius-s: 4px;
+  --border-radius-m: 8px;
+  --border-radius-l: 12px;
+  --border-radius-default: var(--border-radius-s);
+  --border-width-thin: 1px;
+  --border-width-medium: 2px;
+  --border-width-thick: 3px;
+  --border-width-default: var(--border-width-thin);
+  --border-default: var(--border-width-default) solid var(--border-color-default);
+
+  /* Focus indicators for accessibility */
+  --focus-outline: 2px solid var(--form-input-border-focus-color);
+  --focus-outline-offset: 2px;
+
+  /* Topbar */
+  --topbar-bg: linear-gradient(to bottom, var(--brand-primary-500), var(--brand-primary-600));
+  --topbar-minimalheight: 48px;
+  --topbar-border-color: var(--border-color-default);
+
+  /* Sidebar */
+  --sidebar-bg: linear-gradient(to bottom, var(--brand-primary-600), var(--brand-primary-700));
+
+  /* Topbar mobile */
+  --m-header-height: 45px;
+  --m-header-bg: var(--topbar-bg);
+  --m-header-color: var(--font-color-contrast);
+  --m-header-title-size: 16px;
+
+  /* Navbar Brand Name */
+  --navbar-brand-name: var(--font-color-default);
+
+  /* Background Colors */
+  --bg-color: var(--brand-default-100);
+  --bg-color-secondary: var(--color-base);
+
+  /* Default Link Color */
+  --link-color: var(--brand-primary);
+  --link-hover-color: var(--brand-primary-400);
+
+  /* Font Family */
+  --font-family-base: "Poppins", sans-serif;
+
+  /* Font Sizes */
+  --font-size-large: 18px;
+  --font-size-small: 12px;
+
+  /* Font Weights */
+  --font-weight-light: 300;
+  --font-weight-normal: 400;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  /* Header Font Sizes */
+  --font-size-h1: 34px;
+  --font-size-h2: 26px;
+  --font-size-h3: 24px;
+  --font-size-h4: 16px;
+  --font-size-h5: var(--font-size-default);
+  --font-size-h6: 12px;
+
+  /* Header Font Weight */
+  --font-weight-header: var(--font-weight-semibold);
+
+  /* Line Height */
+  --line-height-base: 1.428571429;
+
+  /* Header Margin */
+  --font-header-margin: 0 0 8px 0;
+
+  /* Font Colors */
+  --font-color-detail: var(--brand-primary-700);
+  --font-color-header: var(--brand-primary-800);
+
+  /* Navigation */
+  --navigation-item-height: unset;
+  --navigation-item-padding: var(--spacing-medium);
+  --navigation-border-radius: var(--border-radius-m);
+  --navigation-scrollbar-color: rgba(255, 255, 255, 0.5) transparent;
+
+  --navigation-font-size: var(--font-size-default);
+  --navigation-sub-font-size: var(--font-size-small);
+  --navigation-glyph-size: 20px;
+
+  --navigation-color: var(--font-color-contrast);
+  --navigation-color-hover: var(--font-color-contrast);
+  --navigation-color-active: var(--font-color-contrast);
+
+  --navigation-sub-color: var(--navigation-color);
+  --navigation-sub-color-hover: var(--navigation-color-hover);
+  --navigation-sub-color-active: var(--navigation-color-active);
+
+  /* Sidebar Navigation */
+  --navigation-bg: var(--topbar-bg);
+  --navigation-bg-hover: rgba(0, 0, 0, 0.2);
+  --navigation-bg-active: rgba(0, 0, 0, 0.3);
+
+  --navigation-sub-bg: rgba(0, 0, 0, 0.2);
+  --navigation-sub-bg-hover: var(--navigation-bg-hover);
+  --navigation-sub-bg-active: var(--navigation-bg-active);
+
+  --navigation-border-color: var(--navigation-bg-hover);
+
+  --navsidebar-bg: var(--sidebar-bg);
+  --navsidebar-bg-hover: var(--navigation-bg-hover);
+  --navsidebar-bg-active: var(--navigation-bg-active);
+
+  --navsidebar-sub-bg: rgba(0, 0, 0, 0.2);
+  --navsidebar-sub-bg-hover: var(--navigation-bg-hover);
+  --navsidebar-sub-bg-active: var(--navigation-bg-active);
+  --navsidebar-sub-bg-header: rgba(0, 0, 0, 0.2);
+  --navsidebar-sub-bg-collapsed: var(--brand-primary-700);
+
+  --navsidebar-border-color: var(--border-color-default);
+  --navsidebar-border-radius: var(--navigation-border-radius);
+  --navsidebar-shadow: 0 0 4px rgb(0 0 0 / 14%), 2px 4px 8px rgb(0 0 0 / 28%);
+
+  --navsidebar-font-size: var(--font-size-default);
+  --navsidebar-sub-font-size: var(--font-size-small);
+  --navsidebar-glyph-size: 20px;
+
+  --navsidebar-color: var(--navigation-color);
+  --navsidebar-color-hover: var(--navigation-color-hover);
+  --navsidebar-color-active: var(--navigation-color-active);
+
+  --navsidebar-sub-color: var(--navigation-color);
+  --navsidebar-sub-color-hover: var(--navigation-color-hover);
+  --navsidebar-sub-color-active: var(--navigation-color-active);
+
+  --navsidebar-width-closed: 48px;
+  --navsidebar-width-open: 232px;
+  --navsidebar-toggle-size: 32px;
+
+  --navsidebar-icon-height: 48px;
+  --navsidebar-icon-width: 48px;
+  --navsidebar-animation-duration: 250ms;
+  --navsidebar-animation-function: ease-in;
+
+  /* Topbar Navigation */
+  --navtopbar-font-size: var(--font-size-small);
+  --navtopbar-sub-font-size: var(--font-size-small);
+  --navtopbar-glyph-size: 1.2em;
+
+  --navtopbar-bg: var(--topbar-bg);
+  --navtopbar-bg-hover: var(--navigation-bg-hover);
+  --navtopbar-bg-active: var(--navigation-bg-active);
+  --navtopbar-color: var(--navigation-color);
+  --navtopbar-color-hover: var(--navigation-color-hover);
+  --navtopbar-color-active: var(--navigation-color-active);
+
+  --navtopbar-sub-bg: var(--navtopbar-bg);
+  --navtopbar-sub-bg-hover: var(--navtopbar-bg-hover);
+  --navtopbar-sub-bg-active: var(--navtopbar-bg-active);
+  --navtopbar-sub-color: var(--navigation-color);
+  --navtopbar-sub-color-hover: var(--navigation-color-hover);
+  --navtopbar-sub-color-active: var(--navigation-color-active);
+
+  --navtopbar-border-color: var(--topbar-border-color);
+  --navtopbar-border-radius: var(--navigation-border-radius);
+
+    /* Shadows */
+  --shadow-color-border: var(--border-color-default);
+  --shadow-color: var(--brand-default-300);
+  --shadow-small: 0 2px 4px 0;
+  --shadow-medium: 0 4px 6px 0;
+  --shadow-large: 0 8px 10px 0;
+
+  /* Form Inputs */
+  --form-label-color: var(--font-color-default);
+  --form-label-size: var(--font-size-default);
+  --form-label-weight: var(--font-weight-normal);
+  --form-label-gutter: 8px;
+
+  --form-input-height: auto;
+  --form-input-padding-y: 8px;
+  --form-input-padding-x: 8px;
+  --form-input-static-padding-y: 8px;
+  --form-input-static-padding-x: 0;
+  --form-input-font-size: var(--form-label-size);
+  --form-input-line-height: var(--line-height-base);
+  --form-input-border-radius: 6px;
+  
+  --form-input-bg: var(--color-base);
+  --form-input-bg-focus: var(--color-base);
+  --form-input-bg-hover: var(--color-base);
+  --form-input-bg-disabled: var(--bg-color);
+  --form-input-color: var(--font-color-default);
+  --form-input-focus-color: var(--form-input-color);
+  --form-input-disabled-color: var(--gray-700);
+  --form-input-placeholder-color: var(--gray-600);
+  --form-input-border-color: var(--brand-default);
+  --form-input-border-focus-color: var(--brand-primary);
+  --form-input-border-hover-color: color-mix(in srgb, var(--form-input-border-color), var(--form-input-border-focus-color) 50%);
+
+  --form-input-static-border-color: var(--gray-200);
+
+  --form-group-margin-bottom: 16px;
+  --form-group-gutter: 16px;
+
+    /* Buttons */
+  --btn-font-size: var(--font-size-default);
+  --btn-border-radius: var(--border-radius-default);
+
+  --btn-default-bg: var(--color-base);
+  --btn-primary-bg: var(--brand-primary-600);
+  --btn-success-bg: var(--brand-success-600);
+  --btn-warning-bg: var(--brand-warning-600);
+  --btn-danger-bg: var(--brand-danger-600);
+
+  --btn-default-border-color: var(--brand-default);
+  --btn-primary-border-color: var(--brand-primary-600);
+  --btn-success-border-color: var(--brand-success-600);
+  --btn-warning-border-color: var(--brand-warning-600);
+  --btn-danger-border-color: var(--brand-danger-600);
+
+  --btn-default-color: var(--brand-primary);
+  --btn-primary-color: var(--font-color-contrast);
+  --btn-success-color: var(--font-color-contrast);
+  --btn-warning-color: var(--font-color-contrast);
+  --btn-danger-color: var(--font-color-contrast);
+
+  --btn-default-icon-color: var(--gray);
+
+  --btn-default-bg-hover: var(--brand-default-hover);
+  --btn-primary-bg-hover: var(--brand-primary-hover);
+  --btn-success-bg-hover: var(--brand-success-hover);
+  --btn-warning-bg-hover: var(--brand-warning-hover);
+  --btn-danger-bg-hover: var(--brand-danger-hover);
+  --btn-link-bg-hover: var(--brand-default-hover);
+
+  --btn-default-bg-active: var(--brand-default-300);
+  --btn-primary-bg-active: var(--brand-primary-500);
+  --btn-success-bg-active: var(--brand-success-500);
+  --btn-warning-bg-active: var(--brand-warning-500);
+  --btn-danger-bg-active: var(--brand-danger-500);
+  --btn-link-bg-active: var(--brand-default-500);
+
+  /* Header */
+  --header-min-height: 240px;
+  --header-bg-color: var(--brand-primary);
+  --header-bgimage-filter: brightness(60%);
+  --header-text-color: var(--color-base);
+  --header-text-color-detail: rgba(0, 0, 0, 0.2);
+
+  /* Grid */
+  --grid-border-color: var(--border-color-default);
+
+  --grid-bg: transparent;
+  --grid-bg-header: transparent;
+  --grid-bg-hover: var(--brand-default-hover);
+  --grid-bg-selected: var(--brand-default);
+  --grid-bg-selected-hover: var(--brand-default-600);
+  --grid-bg-striped: var(--brand-default-50);
+  --grid-footer-bg: var(--brand-default);
+
+  --grid-selected-color: var(--font-color-default);
+
+  --grid-paging-bg: transparent;
+  --grid-paging-bg-hover: transparent;
+  --grid-paging-border-color: transparent;
+  --grid-paging-border-color-hover: transparent;
+  --grid-paging-color: var(--gray-300);
+  --grid-paging-color-hover: var(--brand-primary);
+
+  /* Tabs */
+  --tabs-color: var(--font-color-default);
+  --tabs-color-active: var(--font-color-detail);
+  --tabs-lined-color-active: var(--font-color-detail);
+
+  --tabs-lined-border-width: 3px;
+  --tabs-border-color: var(--border-color-default);
+  --tabs-lined-border-color: var(--brand-primary);
+  --tabs-bg: transparent;
+  --tabs-bg-pills: var(--brand-default-200);
+  --tabs-bg-hover: var(--brand-default-300);
+  --tabs-bg-active: var(--brand-primary-600);
+
+  /* Modal */
+  --modal-header-bg: transparent;
+  --modal-header-border-color: var(--border-color-default);
+  --modal-header-color: var(--font-color-header);
+  --modal-body-bg: var(--bg-color-secondary);
+  --modal-footer-bg: var(--bg-color-secondary);
+
+  /* Data View */
+  --dataview-controls-bg: inherit;
+  --dataview-controls-border-color: var(--border-color-default);
+  --dataview-controls-alignment: left;
+
+  --dataview-emptymessage-bg: var(--bg-color);
+  --dataview-emptymessage-color: var(--font-color-default);
+
+  /* Cards */
+  --card-shadow: var(--shadow-small) var(--shadow-color);
+  --card-border: var(--border-default);
+  --card-border-radius: var(--border-radius-m);
+  --card-padding: var(--spacing-large);
+  --card-margin-bottom: var(--spacing-smaller);
+  --card-bg: var(--bg-color-secondary);
+
+  /* Alerts */
+  --alert-primary-bg: var(--brand-primary-50);
+  --alert-success-bg: var(--brand-success-50);
+  --alert-warning-bg: var(--brand-warning-50);
+  --alert-danger-bg: var(--brand-danger-50);
+
+  --alert-primary-color: var(--brand-primary-700);
+  --alert-success-color: var(--brand-success-700);
+  --alert-warning-color: var(--brand-warning-700);
+  --alert-danger-color: var(--brand-danger-700);
+
+  --alert-primary-border-color: var(--brand-primary-600);
+  --alert-success-border-color: var(--brand-success-600);
+  --alert-warning-border-color: var(--brand-warning-600);
+  --alert-danger-border-color: var(--brand-danger-600);
+
+  /* Wizard */
+  --wizard-step-height: 48px;
+  --wizard-step-number-size: 64px;
+  --wizard-step-number-font-size: var(--font-size-h3);
+
+  --wizard-default-bg: var(--color-base);
+  --wizard-default-color: var(--color-base);
+  --wizard-default-step-color: var(--font-color-default);
+  --wizard-default-border-color: var(--border-color-default);
+
+  --wizard-active-bg: var(--brand-primary-200);
+  --wizard-active-color: var(--brand-primary-700);
+  --wizard-active-step-color: var(--brand-primary-700);
+  --wizard-active-border-color: var(--brand-primary-700);
+
+  --wizard-visited-bg: var(--brand-success-200);
+  --wizard-visited-color: var(--brand-success-700);
+  --wizard-visited-step-color: var(--brand-success-700);
+  --wizard-visited-border-color: var(--brand-success-700);
+
+  /* Labels */
+  --label-default-bg: var(--brand-default);
+  --label-primary-bg: var(--brand-primary-600);
+  --label-success-bg: var(--brand-success-600);
+  --label-warning-bg: var(--brand-warning-600);
+  --label-danger-bg: var(--brand-danger-600);
+
+  --label-default-border-color: var(--brand-default-600);
+  --label-primary-border-color: var(--brand-primary-600);
+  --label-success-border-color: var(--brand-success-600);
+  --label-warning-border-color: var(--brand-warning-600);
+  --label-danger-border-color: var(--brand-danger-600);
+
+  --label-default-color: var(--font-color-default);
+  --label-primary-color: var(--color-base);
+  --label-success-color: var(--color-base);
+  --label-warning-color: var(--color-base);
+  --label-danger-color: var(--color-base);
+
+  /* Groupbox */
+  --groupbox-default-bg: var(--brand-default);
+  --groupbox-primary-bg: var(--brand-primary-600);
+  --groupbox-success-bg: var(--brand-success-600);
+  --groupbox-warning-bg: var(--brand-warning-600);
+  --groupbox-danger-bg: var(--brand-danger-600);
+  --groupbox-white-bg: var(--color-base-600);
+
+  --groupbox-default-color: var(--font-color-default);
+  --groupbox-primary-color: var(--font-color-contrast);
+  --groupbox-success-color: var(--font-color-contrast);
+  --groupbox-warning-color: var(--font-color-contrast);
+  --groupbox-danger-color: var(--font-color-contrast);
+  --groupbox-white-color: var(--font-color-default);
+
+  /* Callouts */
+  --callout-primary-color: var(--brand-primary-600);
+  --callout-default-color: var(--font-color-default);
+  --callout-success-color: var(--brand-success-700);
+  --callout-warning-color: var(--brand-warning-700);
+  --callout-danger-color: var(--brand-danger-600);
+
+  --callout-primary-bg: var(--brand-primary-100);
+  --callout-default-bg: var(--gray-50);
+  --callout-success-bg: var(--brand-success-100);
+  --callout-warning-bg: var(--brand-warning-100);
+  --callout-danger-bg: var(--brand-danger-100);
+
+  /* Timeline */
+  --timeline-icon-color: var(--brand-primary);
+  --timeline-border-color: var(--border-color-default);
+  --timeline-event-time-color: var(--brand-primary);
+  --timeline-icon-size: 18px;
+  --timeline-image-size: 36px;
+  --timeline-grouping-size: 120px;
+  --timeline-grouping-border-radius: 30px;
+  --timeline-grouping-border-color: var(--timeline-border-color);
+
+  /* Accordion */
+  --accordion-header-default-bg: var(--bg-color-secondary);
+  --accordion-header-default-bg-hover: var(--brand-default-hover);
+  --accordion-header-default-color: var(--font-color-header);
+  --accordion-default-border-color: var(--border-color-default);
+  --accordion-bg-striped: var(--brand-default-200);
+  --accordion-bg-striped-hover: var(--brand-default-hover);
+
+  --accordion-header-primary-bg: var(--brand-primary-600);
+  --accordion-header-secondary-bg: var(--bg-color-secondary);
+  --accordion-header-success-bg: var(--brand-success-600);
+  --accordion-header-warning-bg: var(--brand-warning-600);
+  --accordion-header-danger-bg: var(--brand-danger-600);
+
+  --accordion-header-primary-bg-hover: var(--brand-primary-hover);
+  --accordion-header-secondary-bg-hover: var(---brand-default-hover);
+  --accordion-header-success-bg-hover: var(--brand-success-hover);
+  --accordion-header-warning-bg-hover: var(--brand-warning-hover);
+  --accordion-header-danger-bg-hover: var(--brand-danger-hover);
+
+  --accordion-header-primary-color: var(--font-color-contrast);
+  --accordion-header-secondary-color: var(--brand-primary);
+  --accordion-header-success-color: var(--font-color-contrast);
+  --accordion-header-warning-color: var(--font-color-contrast);
+  --accordion-header-danger-color: var(--font-color-contrast);
+
+  --accordion-primary-border-color: var(--brand-primary);
+  --accordion-secondary-border-color: var(--gray-200);
+  --accordion-success-border-color: var(--brand-success);
+  --accordion-warning-border-color: var(--brand-warning);
+  --accordion-danger-border-color: var(--brand-danger);
+
+  /* Spacing */
+  --spacing-none: 0px;
+  --spacing-smallest: 2px;
+  --spacing-smaller: 4px;
+  --spacing-small: 8px;
+  --spacing-medium: 16px;
+
+  --t-spacing-medium: 16px;
+  --m-spacing-medium: 16px;
+
+  --spacing-large: 24px;
+  --t-spacing-large: 24px;
+  --m-spacing-large: 16px;
+
+  --spacing-larger: 32px;
+  --spacing-largest: 48px;
+
+  --layout-spacing-top: 24px;
+  --layout-spacing-right: 24px;
+  --layout-spacing-bottom: 24px;
+  --layout-spacing-left: 24px;
+
+  --t-layout-spacing-top: 24px;
+  --t-layout-spacing-right: 24px;
+  --t-layout-spacing-bottom: 24px;
+  --t-layout-spacing-left: 24px;
+
+  --m-layout-spacing-top: 16px;
+  --m-layout-spacing-right: 16px;
+  --m-layout-spacing-bottom: 16px;
+  --m-layout-spacing-left: 16px;
+
+  --layout-spacing: var(--layout-spacing-top) var(--layout-spacing-right) var(--layout-spacing-bottom) var(--layout-spacing-left);
+  --m-layout-spacing: var(--m-layout-spacing-top) var(--m-layout-spacing-right) var(--m-layout-spacing-bottom) var(--m-layout-spacing-left);
+  --t-layout-spacing: var(--t-layout-spacing-top) var(--t-layout-spacing-right) var(--t-layout-spacing-bottom) var(--t-layout-spacing-left);
+
+  --gutter-size: var(--spacing-medium);
+
+  --padding-table-cell-top: 8px;
+  --padding-table-cell-bottom: 8px;
+  --padding-table-cell-left: 8px;
+  --padding-table-cell-right: 8px;
+
+  /* Brand Variants */
+  --btn-inverse-bg: var(--brand-primary-400);
+  --btn-info-bg: var(--brand-primary-300);
+  --btn-inverse-border-color: var(--brand-primary-400);
+  --btn-info-border-color: var(--brand-primary-300);
+
+  --btn-inverse-color: var(--color-base);
+  --btn-info-color: var(--color-base);
+
+  --btn-inverse-bg-hover: var(--brand-primary-300);
+  --btn-info-bg-hover: var(--brand-primary-300);
+
+  /* Alerts */
+  --alert-info-bg: var(--brand-primary-50);
+  --alert-info-color: var(--brand-primary-600);
+  --alert-info-border-color: var(--brand-primary);
+
+  /* Labels */
+  --label-info-bg: var(--brand-primary-300);
+  --label-inverse-bg: var(--brand-primary-600);
+
+  --label-info-border-color: var(--brand-primary-300);
+  --label-inverse-border-color: var(--brand-primary-600);
+
+  --label-info-color: var(--color-base);
+  --label-inverse-color: var(--color-base);
+
+  /* Groupbox */
+  --groupbox-inverse-bg: var(--brand-primary-600);
+  --groupbox-info-bg: var(--brand-primary-300);
+
+  --groupbox-inverse-color: var(--color-base);
+  --groupbox-info-color: var(--color-base);
+
+  /* Callouts */
+  --callout-info-color: var(--brand-primary-300);
+  --callout-info-bg: var(--brand-primary-50);
+
+  --screen-xs: #{$screen-xs};
+  --screen-sm: #{$screen-sm};
+  --screen-md: #{$screen-md};
+  --screen-lg: #{$screen-lg};
+  --screen-xl: #{$screen-xl};
+  --screen-xxl: #{$screen-xxl};
+
+  /* Legacy variables */
+  --gray-lighter: var(--gray-50);
+  --gray-light: var(--gray-300);
+  --gray-primary: var(--gray-200);
+  --gray-dark: var(--gray-700);
+  --gray-darker: var(--gray-800);
+
+  /* Color variations */
+  --color-default-darker: var(--gray-700);
+  --color-default-dark: var(--gray-600);
+  --color-default-light: var(--gray-100);
+  --color-default-lighter: var(--gray-50);
+
+  --color-primary-darker: var(--brand-primary-700);
+  --color-primary-dark: var(--brand-primary-600);
+  --color-primary-light: var(--brand-primary-100);
+  --color-primary-lighter: var(--brand-primary-50);
+
+  --color-success-darker: var(--brand-success-700);
+  --color-success-dark: var(--brand-success-600);
+  --color-success-light: var(--brand-success-100);
+  --color-success-lighter: var(--brand-success-50);
+
+  --color-warning-darker: var(--brand-warning-700);
+  --color-warning-dark: var(--brand-warning-600);
+  --color-warning-light: var(--brand-warning-100);
+  --color-warning-lighter: var(--brand-warning-50);
+
+  --color-danger-darker: var(--brand-danger-700);
+  --color-danger-dark: var(--brand-danger-600);
+  --color-danger-light: var(--brand-danger-100);
+  --color-danger-lighter: var(--brand-danger-50);
+
+  --grid-padding-top: 16px;
+  --grid-padding-right: 16px;
+  --grid-padding-bottom: 16px;
+  --grid-padding-left: 16px;
+
+  --listview-padding-top: 16px;
+  --listview-padding-right: 16px;
+  --listview-padding-bottom: 16px;
+  --listview-padding-left: 16px;
+}
+
+// SASS theme options
+$brand-logo: false !default;
+$font-family-import: false !default; // "https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,700&display=swap" !default;
+$form-input-style: default !default;
+$btn-bordered: false !default; // Default value false, set to true if you want this effect
+
+//== Settings
+//## Enable or disable your desired framework features
+// Use of !important
+$important-flex: false !default; // ./base/flex.scss
+$important-spacing: true !default; // ./base/spacing.scss
+$important-helpers: false !default; // ./helpers/helperclasses.scss
diff --git a/Source/themesource/atlas_web_content/.version b/Source/themesource/atlas_web_content/.version
index 19811903..ee74734a 100644
--- a/Source/themesource/atlas_web_content/.version
+++ b/Source/themesource/atlas_web_content/.version
@@ -1 +1 @@
-3.8.0
+4.1.0
diff --git a/Source/themesource/atlas_web_content/web/buildingblocks/_alert.scss b/Source/themesource/atlas_web_content/web/buildingblocks/_alert.scss
index a07c84f3..839e143a 100644
--- a/Source/themesource/atlas_web_content/web/buildingblocks/_alert.scss
+++ b/Source/themesource/atlas_web_content/web/buildingblocks/_alert.scss
@@ -13,14 +13,14 @@
 
 .alert {
     margin-top: 0;
-    padding: $spacing-medium;
-    border: 1px solid;
-    border-radius: $border-radius-default;
-    padding: $spacing-medium;
+    padding: var(--spacing-medium);
+    border: var(--border-width-default) solid;
+    border-radius: var(--border-radius-default);
+    padding: var(--spacing-medium);
 }
 
 .alert-icon {
-    font-size: $font-size-h3;
+    font-size: var(--font-size-h3);
 }
 
 .alert-title {
@@ -35,40 +35,34 @@
 
 .alert-primary,
 .alert {
-    color: $alert-primary-color;
-    border-color: $alert-primary-border-color;
-    background-color: $alert-primary-bg;
-}
-
-.alert-secondary {
-    color: $alert-secondary-color;
-    border-color: $alert-secondary-border-color;
-    background-color: $alert-secondary-bg;
+    color: var(--alert-primary-color);
+    border-color: var(--alert-primary-border-color);
+    background-color: var(--alert-primary-bg);
 }
 
 // Semantic variations
 .alert-success {
-    color: $alert-success-color;
-    border-color: $alert-success-border-color;
-    background-color: $alert-success-bg;
+    color: var(--alert-success-color);
+    border-color: var(--alert-success-border-color);
+    background-color: var(--alert-success-bg);
 }
 
 .alert-warning {
-    color: $alert-warning-color;
-    border-color: $alert-warning-border-color;
-    background-color: $alert-warning-bg;
+    color: var(--alert-warning-color);
+    border-color: var(--alert-warning-border-color);
+    background-color: var(--alert-warning-bg);
 }
 
 .alert-danger {
-    color: $alert-danger-color;
-    border-color: $alert-danger-border-color;
-    background-color: $alert-danger-bg;
+    color: var(--alert-danger-color);
+    border-color: var(--alert-danger-border-color);
+    background-color: var(--alert-danger-bg);
 }
 
 //== State
 //## Styling when component is in certain state
 //-------------------------------------------------------------------------------------------------------------------//
 .has-error .alert {
-    margin-top: $spacing-small;
+    margin-top: var(--spacing-small);
     margin-bottom: 0;
 }
diff --git a/Source/themesource/atlas_web_content/web/buildingblocks/_breadcrumb.scss b/Source/themesource/atlas_web_content/web/buildingblocks/_breadcrumb.scss
index d6a4bbf3..76aa11e0 100644
--- a/Source/themesource/atlas_web_content/web/buildingblocks/_breadcrumb.scss
+++ b/Source/themesource/atlas_web_content/web/buildingblocks/_breadcrumb.scss
@@ -8,8 +8,8 @@
     padding: 0;
     border-radius: 0;
     background-color: transparent;
-    font-size: $font-size-default;
-    margin-bottom: $spacing-large;
+    font-size: var(--font-size-default);
+    margin-bottom: var(--spacing-large);
 }
 
 //== Elements
@@ -18,7 +18,7 @@
     display: inline-block;
     margin: 0;
     &:last-child {
-        color: $font-color-default;
+        color: var(--font-color-default);
         a {
             text-decoration: none;
         }
@@ -27,19 +27,19 @@
 .breadcrumb-item + .breadcrumb-item {
     &::before {
         display: inline-block;
-        padding-right: $spacing-small;
-        padding-left: $spacing-small;
+        padding-right: var(--spacing-small);
+        padding-left: var(--spacing-small);
         content: "/";
-        color: $gray-light;
+        color: var(--gray-300);
     }
 }
 
 //== Variations
 //-------------------------------------------------------------------------------------------------------------------//
 .breadcrumb-large {
-    font-size: $font-size-h3;
+    font-size: var(--font-size-h3);
 }
 .breadcrumb-underline {
-    padding-bottom: $spacing-medium;
-    border-bottom: 1px solid $border-color-default;
+    padding-bottom: var(--spacing-medium);
+    border-bottom: var(--border-default);
 }
diff --git a/Source/themesource/atlas_web_content/web/buildingblocks/_card.scss b/Source/themesource/atlas_web_content/web/buildingblocks/_card.scss
index 7f71a8fa..87e483c5 100644
--- a/Source/themesource/atlas_web_content/web/buildingblocks/_card.scss
+++ b/Source/themesource/atlas_web_content/web/buildingblocks/_card.scss
@@ -1,29 +1,10 @@
-/* ==========================================================================
-   Cards
-
-========================================================================== */
-.card {
-    border: 0;
-    border-radius: $border-radius-default;
-    background-color: #ffffff;
-    overflow: hidden;
-    position: relative;
-    padding: $spacing-large;
-    margin-bottom: $spacing-large;
-}
-
 //== Card components
 //-------------------------------------------------------------------------------------------------------------------//
 .card-body {
-    padding: $spacing-large;
+    padding: var(--spacing-large);
 }
 
 .card-overlay {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    background: rgba(0, 0, 0, 0.6);
     background: linear-gradient(
         to bottom,
         rgba(255, 255, 255, 0) 0%,
@@ -31,7 +12,6 @@
         rgba(0, 0, 0, 0.99) 121%,
         #000 100%
     );
-    padding: $spacing-large;
 }
 
 .card-title {
@@ -41,6 +21,10 @@
     width: 100%;
     height: auto;
 }
+.card-image > img {
+    width: 100%;
+    height: auto;
+}
 
 .card-supportingtext {
 }
@@ -49,7 +33,7 @@
 }
 
 .card-icon {
-    font-size: $font-size-h1;
+    font-size: var(--font-size-h1);
 }
 
 //== Variations
diff --git a/Source/themesource/atlas_web_content/web/buildingblocks/_chat.scss b/Source/themesource/atlas_web_content/web/buildingblocks/_chat.scss
index 2fe5ce92..8572711d 100644
--- a/Source/themesource/atlas_web_content/web/buildingblocks/_chat.scss
+++ b/Source/themesource/atlas_web_content/web/buildingblocks/_chat.scss
@@ -6,7 +6,7 @@
     display: flex;
     flex-direction: column;
     height: 100%;
-    background-color: $bg-color-secondary;
+    background-color: var(--bg-color-secondary);
 }
 
 //== Elements
@@ -25,7 +25,7 @@
         ul {
             display: flex;
             flex-direction: column-reverse;
-            margin-bottom: $m-spacing-large;
+            margin-bottom: var(--m-spacing-large);
         }
 
         li {
@@ -49,7 +49,7 @@
             width: 50%;
             margin: 15px auto;
             color: #ffffff;
-            background-color: $brand-primary;
+            background-color: var(--brand-primary);
             box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.05);
         }
     }
@@ -75,7 +75,7 @@
     flex-direction: column;
     padding: 10px 15px;
     border-radius: 5px;
-    background-color: $bg-color;
+    background-color: var(--bg-color);
 
     &::after {
         position: absolute;
@@ -86,7 +86,7 @@
         content: "";
         border: 10px solid transparent;
         border-top: 0;
-        border-right-color: $bg-color;
+        border-right-color: var(--bg-color);
         border-left: 0;
     }
 }
@@ -101,8 +101,8 @@
 
 .chat-footer {
     z-index: 1;
-    padding: $m-spacing-large;
-    background-color: $bg-color;
+    padding: var(--m-spacing-large);
+    background-color: var(--bg-color);
     box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.05);
 }
 
@@ -111,7 +111,7 @@
 
     .chat-textbox {
         flex: 1;
-        margin-right: $spacing-large;
+        margin-right: var(--spacing-large);
         margin-bottom: 0;
 
         .form-control {
@@ -130,14 +130,14 @@
     }
 
     .chat-message-balloon {
-        background-color: $color-primary-lighter;
+        background-color: var(--brand-primary-100);
 
         &::after {
             left: 100%;
             border: 10px solid transparent;
             border-top: 0;
             border-right: 0;
-            border-left-color: $color-primary-lighter;
+            border-left-color: var(--brand-primary-100);
         }
     }
 
diff --git a/Source/themesource/atlas_web_content/web/buildingblocks/_controlgroup.scss b/Source/themesource/atlas_web_content/web/buildingblocks/_controlgroup.scss
index 9ce1f840..a9d3e300 100644
--- a/Source/themesource/atlas_web_content/web/buildingblocks/_controlgroup.scss
+++ b/Source/themesource/atlas_web_content/web/buildingblocks/_controlgroup.scss
@@ -6,8 +6,8 @@
 .controlgroup {
     .btn,
     .btn-group {
-        margin-right: $spacing-small;
-        margin-bottom: $spacing-small;
+        margin-right: var(--spacing-small);
+        margin-bottom: var(--spacing-small);
 
         &:last-child {
             margin-right: 0;
diff --git a/Source/themesource/atlas_web_content/web/buildingblocks/_formblock.scss b/Source/themesource/atlas_web_content/web/buildingblocks/_formblock.scss
index c6a22645..fb1b1c6b 100644
--- a/Source/themesource/atlas_web_content/web/buildingblocks/_formblock.scss
+++ b/Source/themesource/atlas_web_content/web/buildingblocks/_formblock.scss
@@ -5,7 +5,7 @@
 ========================================================================== */
 .formblock {
     width: 100%;
-    margin-bottom: $spacing-large;
+    margin-bottom: var(--spacing-large);
 }
 
 //== Elements
diff --git a/Source/themesource/atlas_web_content/web/buildingblocks/_heroheader.scss b/Source/themesource/atlas_web_content/web/buildingblocks/_heroheader.scss
index e5e8fd45..8dc3cf7b 100644
--- a/Source/themesource/atlas_web_content/web/buildingblocks/_heroheader.scss
+++ b/Source/themesource/atlas_web_content/web/buildingblocks/_heroheader.scss
@@ -5,22 +5,22 @@
 
 .headerhero {
     width: 100%;
-    min-height: $header-min-height;
-    background-color: $header-bg-color;
+    min-height: var(--header-min-height);
+    background-color: var(--header-bg-color);
     position: relative;
     overflow: hidden;
-    padding: $spacing-large;
-    margin-bottom: $spacing-large;
+    padding: var(--spacing-large);
+    margin-bottom: var(--spacing-large);
 }
 
 //== Elements
 //-------------------------------------------------------------------------------------------------------------------//
 .headerhero-title {
-    color: $header-text-color;
+    color: var(--header-text-color);
 }
 
 .headerhero-subtitle {
-    color: $header-text-color;
+    color: var(--header-text-color);
 }
 
 .headerhero-backgroundimage {
@@ -29,11 +29,11 @@
     top: 0;
     height: 100%;
     width: 100%;
-    filter: $header-bgimage-filter;
+    filter: var(--header-bgimage-filter);
 }
 
 .btn.headerhero-action {
-    color: $header-text-color;
+    color: var(--header-text-color);
 }
 
 .heroheader-overlay {
diff --git a/Source/themesource/atlas_web_content/web/buildingblocks/_master-detail.scss b/Source/themesource/atlas_web_content/web/buildingblocks/_master-detail.scss
index 4cb80dd9..55ca5a46 100644
--- a/Source/themesource/atlas_web_content/web/buildingblocks/_master-detail.scss
+++ b/Source/themesource/atlas_web_content/web/buildingblocks/_master-detail.scss
@@ -6,10 +6,10 @@
 .masterdetail {
     background: #fff;
     .masterdetail-master {
-        border-right: 1px solid $border-color-default;
+        border-right: var(--border-default);
     }
     .masterdetail-detail {
-        padding: $spacing-large;
+        padding: var(--spacing-large);
     }
 }
 
@@ -18,9 +18,9 @@
 .masterdetail-vertical {
     background: #fff;
     .masterdetail-master {
-        border-bottom: 1px solid $border-color-default;
+        border-bottom: var(--border-default);
     }
     .masterdetail-detail {
-        padding: $spacing-large;
+        padding: var(--spacing-large);
     }
 }
diff --git a/Source/themesource/atlas_web_content/web/buildingblocks/_pageheader.scss b/Source/themesource/atlas_web_content/web/buildingblocks/_pageheader.scss
deleted file mode 100644
index f649e9aa..00000000
--- a/Source/themesource/atlas_web_content/web/buildingblocks/_pageheader.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-/* ==========================================================================
-   Pageheader
-========================================================================== */
-
-//== Default
-//-------------------------------------------------------------------------------------------------------------------//
-.pageheader {
-    width: 100%;
-    margin-bottom: $spacing-large;
-}
-
-//== Elements
-//-------------------------------------------------------------------------------------------------------------------//
-.pageheader-title {
-}
-
-.pageheader-subtitle {
-}
-
-.pageheader-image {
-}
diff --git a/Source/themesource/atlas_web_content/web/buildingblocks/_wizard.scss b/Source/themesource/atlas_web_content/web/buildingblocks/_wizard.scss
index 91cd9d85..e837395d 100644
--- a/Source/themesource/atlas_web_content/web/buildingblocks/_wizard.scss
+++ b/Source/themesource/atlas_web_content/web/buildingblocks/_wizard.scss
@@ -3,7 +3,7 @@
     display: flex;
     justify-content: space-between;
     width: 100%;
-    margin-bottom: $spacing-large;
+    margin-bottom: var(--spacing-large);
 }
 
 //Wizard step
@@ -21,13 +21,13 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    width: $wizard-step-number-size;
-    height: $wizard-step-number-size;
-    color: $wizard-default-step-color;
-    font-size: $wizard-step-number-font-size;
+    width: var(--wizard-step-number-size);
+    height: var(--wizard-step-number-size);
+    color: var(--wizard-default-step-color);
+    font-size: var(--wizard-step-number-font-size);
     border-radius: 50%;
-    background-color: $wizard-default-bg;
-    border-color: $wizard-default-border-color;
+    background-color: var(--wizard-default-bg);
+    border-color: var(--wizard-default-border-color);
 }
 
 //Wizard step text
@@ -36,7 +36,7 @@
     white-space: nowrap;
     text-decoration: none;
     text-overflow: ellipsis;
-    color: $wizard-default-step-color;
+    color: var(--wizard-default-step-color);
 }
 
 //Wizard circle
@@ -45,54 +45,54 @@
     &::before {
         position: absolute;
         z-index: 0;
-        top: $wizard-step-number-size / 2;
+        top: calc(var(--wizard-step-number-size) / 2);
         display: block;
         width: 100%;
         height: 2px;
         content: "";
-        background-color: $wizard-default-border-color;
+        background-color: var(--wizard-default-border-color);
     }
 }
 
 //Wizard arrow
 .wizard-arrow .wizard-step {
-    height: $wizard-step-height;
-    margin-left: calc(0px - (#{$wizard-step-height} / 2));
-    padding-left: ($wizard-step-height / 2);
-    background-color: $wizard-default-bg;
+    height: var(--wizard-step-height);
+    margin-left: calc(0px - (var(--wizard-step-height) / 2));
+    padding-left: calc(var(--wizard-step-height) / 2);
+    background-color: var(--wizard-default-bg);
     justify-content: flex-start;
-    border: 1px solid $wizard-default-border-color;
+    border: 1px solid var(--wizard-default-border-color);
     &::before,
     &::after {
         position: absolute;
         z-index: 1;
         left: 100%;
-        margin-left: calc(0px - ((#{$wizard-step-height} / 2) - 1px));
+        margin-left: calc(0px - ((var(--wizard-step-height) / 2) - 1px));
         content: " ";
         border-style: solid;
         border-color: transparent;
     }
     &::after {
         top: 0;
-        border-width: calc((#{$wizard-step-height} / 2) - 1px);
-        border-left-color: $wizard-default-bg;
+        border-width: calc((var(--wizard-step-height) / 2) - 1px);
+        border-left-color: var(--wizard-default-bg);
     }
     &::before {
         top: -1px;
-        border-width: $wizard-step-height / 2;
-        border-left-color: $wizard-default-border-color;
+        border-width: calc(var(--wizard-step-height) / 2);
+        border-left-color: var(--wizard-default-border-color);
     }
 
     &:first-child {
         margin-left: 0;
         padding-left: 0;
-        border-top-left-radius: $border-radius-default;
-        border-bottom-left-radius: $border-radius-default;
+        border-top-left-radius: var(--border-radius-default);
+        border-bottom-left-radius: var(--border-radius-default);
     }
 
     &:last-child {
-        border-top-right-radius: $border-radius-default;
-        border-bottom-right-radius: $border-radius-default;
+        border-top-right-radius: var(--border-radius-default);
+        border-bottom-right-radius: var(--border-radius-default);
         &::before,
         &::after {
             display: none;
@@ -103,37 +103,37 @@
 //Wizard states
 .wizard-circle .wizard-step-active {
     .wizard-step-number {
-        color: $wizard-active-color;
-        border-color: $wizard-active-border-color;
-        background-color: $wizard-active-bg;
+        color: var(--wizard-active-color);
+        border-color: var(--wizard-active-border-color);
+        background-color: var(--wizard-active-bg);
     }
     .wizard-step-text {
-        color: $wizard-active-step-color;
+        color: var(--wizard-active-step-color);
     }
 }
 .wizard-circle .wizard-step-visited {
     .wizard-step-number {
-        color: $wizard-visited-color;
-        border-color: $wizard-visited-border-color;
-        background-color: $wizard-visited-bg;
+        color: var(--wizard-visited-color);
+        border-color: var(--wizard-visited-border-color);
+        background-color: var(--wizard-visited-bg);
     }
     .wizard-step-text {
-        color: $wizard-visited-step-color;
+        color: var(--wizard-visited-step-color);
     }
 }
 
 .wizard-arrow .wizard-step-active {
-    background-color: $wizard-active-bg;
+    background-color: var(--wizard-active-bg);
     .wizard-step-text {
-        color: $wizard-active-color;
+        color: var(--wizard-active-color);
     }
     &::after {
-        border-left-color: $wizard-active-bg;
+        border-left-color: var(--wizard-active-bg);
     }
 }
 
 .wizard-arrow .wizard-step-visited {
     .wizard-step-text {
-        color: $link-color;
+        color: var(--link-color);
     }
 }
diff --git a/Source/themesource/atlas_web_content/web/main.scss b/Source/themesource/atlas_web_content/web/main.scss
index df04c6f5..86ffb8a6 100644
--- a/Source/themesource/atlas_web_content/web/main.scss
+++ b/Source/themesource/atlas_web_content/web/main.scss
@@ -1,7 +1,3 @@
-// Default variables
-@import "../../atlas_core/web/variables";
-@import "../../../theme/web/custom-variables";
-
 // Building blocks
 @import "buildingblocks/alert";
 @import "buildingblocks/breadcrumb";
@@ -9,7 +5,6 @@
 @import "buildingblocks/chat";
 @import "buildingblocks/controlgroup";
 @import "buildingblocks/pageblocks";
-@import "buildingblocks/pageheader";
 @import "buildingblocks/heroheader";
 @import "buildingblocks/formblock";
 @import "buildingblocks/master-detail";
diff --git a/Source/themesource/atlas_web_content/web/pagetemplates/_dashboard_page_settings.scss b/Source/themesource/atlas_web_content/web/pagetemplates/_dashboard_page_settings.scss
new file mode 100644
index 00000000..760b3e0b
--- /dev/null
+++ b/Source/themesource/atlas_web_content/web/pagetemplates/_dashboard_page_settings.scss
@@ -0,0 +1,4 @@
+.gallery-selector {
+    z-index: 1;
+    position: relative;
+}
diff --git a/Source/themesource/atlas_web_content/web/pagetemplates/_list-tab.scss b/Source/themesource/atlas_web_content/web/pagetemplates/_list-tab.scss
index ff29615d..93f4b319 100644
--- a/Source/themesource/atlas_web_content/web/pagetemplates/_list-tab.scss
+++ b/Source/themesource/atlas_web_content/web/pagetemplates/_list-tab.scss
@@ -1,26 +1,26 @@
 .listtab-tabs.mx-tabcontainer {
-    background: $bg-color-secondary;
+    background: var(--bg-color-secondary);
     .mx-tabcontainer-tabs {
-        background: $brand-primary;
+        background: var(--brand-primary);
         margin-bottom: 0;
         li {
             > a {
-                color: #fff;
+                color: var(--font-color-contrast);
                 opacity: 0.6;
                 &:hover,
                 &:focus {
-                    color: #fff;
+                    color: var(--font-color-contrast);
                 }
             }
             &.active {
                 > a {
                     opacity: 1;
-                    color: #fff;
-                    border-color: #fff;
+                    color: var(--font-color-contrast);
+                    border-color: var(--color-base);
                     &:hover,
                     &:focus {
-                        color: #fff;
-                        border-color: #fff;
+                        color: var(--font-color-contrast);
+                        border-color: var(--color-base);
                     }
                 }
             }
diff --git a/Source/themesource/datawidgets/.version b/Source/themesource/datawidgets/.version
index 8de9f111..e5b82034 100644
--- a/Source/themesource/datawidgets/.version
+++ b/Source/themesource/datawidgets/.version
@@ -1 +1 @@
-2.31.0
\ No newline at end of file
+3.5.0
\ No newline at end of file
diff --git a/Source/themesource/datawidgets/LICENSE b/Source/themesource/datawidgets/LICENSE
index 51dfbf50..8c705ebe 100644
--- a/Source/themesource/datawidgets/LICENSE
+++ b/Source/themesource/datawidgets/LICENSE
@@ -1,4 +1,4 @@
-Apache License
+				Apache License
                            Version 2.0, January 2004
                         http://www.apache.org/licenses/
 
@@ -186,7 +186,7 @@ Apache License
       same "printed page" as the copyright notice for easier
       identification within third-party archives.
 
-   Copyright 2020 Mendix Technology BV
+   Copyright 2022 Mendix Technology B.V.
 
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
@@ -198,4 +198,4 @@ Apache License
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
-   limitations under the License.
+   limitations under the License.
\ No newline at end of file
diff --git a/Source/themesource/datawidgets/web/_datagrid-design-properties.scss b/Source/themesource/datawidgets/web/_datagrid-design-properties.scss
index 82d97c59..bcaf6485 100644
--- a/Source/themesource/datawidgets/web/_datagrid-design-properties.scss
+++ b/Source/themesource/datawidgets/web/_datagrid-design-properties.scss
@@ -1,48 +1,48 @@
 .table-compact {
     .th {
-        padding: var(--spacing-small, $dg-spacing-small);
+        padding: var(--spacing-small, $spacing-small);
 
         .filter-selectors {
-            margin: 0 var(--spacing-small, $dg-spacing-small);
+            margin: 0 var(--spacing-small, $spacing-small);
         }
     }
 
     &:has(.th .column-container .filter:not(:empty)) {
         .th {
             &.column-selector {
-                padding: var(--spacing-small, $dg-spacing-small) 0;
+                padding: var(--spacing-small, $spacing-small) 0;
             }
             &.widget-datagrid-col-select {
-                padding-bottom: calc(var(--spacing-small, $dg-spacing-small) + 11px);
+                padding-bottom: calc(var(--spacing-small, $spacing-small) + 11px);
             }
         }
     }
 
     .td {
-        padding: var(--spacing-small, $dg-spacing-small);
+        padding: var(--spacing-small, $spacing-small);
     }
 
     .dropdown-container .dropdown-list {
-        margin: 0 var(--spacing-small, $dg-spacing-small);
+        margin: 0 var(--spacing-small, $spacing-small);
     }
 
     .column-selector {
         /* Column content */
         .column-selector-content {
-            padding-right: var(--spacing-small, $dg-spacing-small);
+            padding-right: var(--spacing-small, $spacing-small);
         }
     }
 }
 
 .table-striped {
     .tr:nth-child(odd) > .td {
-        background-color: var(--grid-bg-striped, $dg-grid-bg-striped);
+        background-color: var(--grid-bg-striped, $grid-bg-striped);
     }
 }
 
 .table-hover {
     .tr:hover > .td {
-        background-color: var(--grid-bg-hover, $dg-grid-bg-hover);
+        background-color: var(--grid-bg-hover, $grid-bg-hover);
     }
 }
 
diff --git a/Source/themesource/datawidgets/web/_datagrid-dropdown-filter.scss b/Source/themesource/datawidgets/web/_datagrid-dropdown-filter.scss
index b77663d6..c25ddaea 100644
--- a/Source/themesource/datawidgets/web/_datagrid-dropdown-filter.scss
+++ b/Source/themesource/datawidgets/web/_datagrid-dropdown-filter.scss
@@ -106,6 +106,12 @@ $root: ".widget-dropdown-filter";
         }
     }
 
+    &-menu-item-text {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
     &-checkbox-slot {
         display: flex;
         margin-inline-end: var(--wdf-outer-spacing);
@@ -138,7 +144,6 @@ $root: ".widget-dropdown-filter";
     &-clear {
         @include btn-with-cross;
         align-items: center;
-        align-self: center;
         display: flex;
         flex-shrink: 0;
         justify-self: end;
@@ -150,6 +155,11 @@ $root: ".widget-dropdown-filter";
         &:has(+ #{$root}-toggle) {
             border-inline-end: 1px solid var(--gray, #787d87);
         }
+
+        &:focus-visible {
+            outline-offset: -2px;
+            outline: var(--brand-primary, $brand-primary) solid 1px;
+        }
     }
 
     &-state-icon {
@@ -262,9 +272,13 @@ $root: ".widget-dropdown-filter";
         justify-content: center;
         line-height: 1.334;
         padding: var(--wdf-tag-padding);
+        margin: var(--spacing-smallest, 2px);
         &:focus-visible {
             outline: var(--brand-primary, #264ae5) auto 1px;
         }
+        &:focus {
+            background-color: var(--color-primary-light, $color-primary-light);
+        }
     }
 
     #{$root}-input {
@@ -273,6 +287,14 @@ $root: ".widget-dropdown-filter";
         width: initial;
     }
 
+    &:not(:focus-within):not([data-empty]) {
+        #{$root}-input {
+            opacity: 0;
+            flex-shrink: 1;
+            min-width: 1px;
+        }
+    }
+
     #{$root}-clear {
         border-color: transparent;
     }
diff --git a/Source/themesource/datawidgets/web/_datagrid-filters.scss b/Source/themesource/datawidgets/web/_datagrid-filters.scss
index edba2595..7e32a1ef 100644
--- a/Source/themesource/datawidgets/web/_datagrid-filters.scss
+++ b/Source/themesource/datawidgets/web/_datagrid-filters.scss
@@ -1,19 +1,14 @@
-$dg-hover-color: #f8f8f8;
-$dg-background-color: #fff;
-$dg-selected-color: #dadcde;
-$dg-border-color: #ced0d3;
-$dg-spacing-small: 8px;
-$arrow: "resources/dropdown-arrow.svg";
-$dg-item-min-height: 32px;
-
 @import "date-picker";
 
 @font-face {
     font-family: "datagrid-filters";
     src: url("./fonts/datagrid-filters.eot");
-    src: url("./fonts/datagrid-filters.eot") format("embedded-opentype"),
-        url("./fonts/datagrid-filters.woff2") format("woff2"), url("./fonts/datagrid-filters.woff") format("woff"),
-        url("./fonts/datagrid-filters.ttf") format("truetype"), url("./fonts/datagrid-filters.svg") format("svg");
+    src:
+        url("./fonts/datagrid-filters.eot") format("embedded-opentype"),
+        url("./fonts/datagrid-filters.woff2") format("woff2"),
+        url("./fonts/datagrid-filters.woff") format("woff"),
+        url("./fonts/datagrid-filters.ttf") format("truetype"),
+        url("./fonts/datagrid-filters.svg") format("svg");
     font-weight: normal;
     font-style: normal;
 }
@@ -69,11 +64,13 @@ $dg-item-min-height: 32px;
     left: 0;
     padding: 0;
     margin: 0;
-    background: var(--bg-color-secondary, $dg-background-color);
+    background: var(--bg-color-secondary, $bg-color-secondary);
     z-index: 51;
     border-radius: 8px;
     list-style-type: none;
-    box-shadow: 0 2px 20px 1px rgba(5, 15, 129, 0.05), 0 2px 16px 0 rgba(33, 43, 54, 0.08);
+    box-shadow:
+        0 2px 20px 1px rgba(5, 15, 129, 0.05),
+        0 2px 16px 0 rgba(33, 43, 54, 0.08);
     overflow: hidden;
 
     .filter-listitem,
@@ -89,13 +86,13 @@ $dg-item-min-height: 32px;
         }
 
         &.filter-selected {
-            background-color: var(--gray-lighter, $dg-hover-color);
-            color: var(--brand-primary, $dg-brand-primary);
+            background-color: var(--gray-lighter, $gray-lighter);
+            color: var(--brand-primary, $brand-primary);
         }
 
         &:hover,
         &.filter-highlighted {
-            background-color: var(--gray-lighter, $dg-hover-color);
+            background-color: var(--gray-lighter, $gray-lighter);
         }
     }
 }
@@ -109,9 +106,9 @@ $dg-item-min-height: 32px;
         display: flex;
         align-items: center;
         font-weight: normal;
-        min-height: var(--spacing-larger, $dg-item-min-height);
+        min-height: var(--spacing-larger, $spacing-larger);
         cursor: pointer;
-        padding: 0 var(--spacing-small, $dg-spacing-small);
+        padding: 0 var(--spacing-small, $spacing-small);
 
         .filter-label {
             overflow: hidden;
@@ -120,13 +117,13 @@ $dg-item-min-height: 32px;
         }
 
         &.filter-selected {
-            background-color: var(--gray-lighter, $dg-hover-color);
-            color: var(--brand-primary, $dg-brand-primary);
+            background-color: var(--gray-lighter, $gray-lighter);
+            color: var(--brand-primary, $brand-primary);
         }
 
         &:hover,
         &:focus {
-            background-color: var(--gray-lighter, $dg-hover-color);
+            background-color: var(--gray-lighter, $gray-lighter);
         }
 
         label {
@@ -141,17 +138,21 @@ $dg-item-min-height: 32px;
 }
 
 :not(.dropdown-content) > .dropdown-list {
-    background: var(--bg-color-secondary, $dg-background-color);
+    background: var(--bg-color-secondary, $bg-color-secondary);
     border-radius: 8px;
-    box-shadow: 0 2px 20px 1px rgba(5, 15, 129, 0.05), 0 2px 16px 0 rgba(33, 43, 54, 0.08);
+    box-shadow:
+        0 2px 20px 1px rgba(5, 15, 129, 0.05),
+        0 2px 16px 0 rgba(33, 43, 54, 0.08);
     max-height: 40vh;
     z-index: 102;
 }
 
 .dropdown-content {
-    background: var(--bg-color-secondary, $dg-background-color);
+    background: var(--bg-color-secondary, $bg-color-secondary);
     border-radius: 8px;
-    box-shadow: 0 2px 20px 1px rgba(5, 15, 129, 0.05), 0 2px 16px 0 rgba(33, 43, 54, 0.08);
+    box-shadow:
+        0 2px 20px 1px rgba(5, 15, 129, 0.05),
+        0 2px 16px 0 rgba(33, 43, 54, 0.08);
     max-height: 40vh;
     z-index: 140;
 }
@@ -167,7 +168,7 @@ $dg-item-min-height: 32px;
     display: flex;
     flex-flow: row nowrap;
     align-items: center;
-    padding: 0 var(--spacing-small, $dg-spacing-small);
+    padding: 0 var(--spacing-small, $spacing-small);
     min-height: 40px;
 }
 
@@ -196,13 +197,15 @@ $dg-item-min-height: 32px;
 
     .dropdown-list {
         left: 0;
-        margin: 0 var(--spacing-small, $dg-spacing-small);
+        margin: 0 var(--spacing-small, $spacing-small);
         padding: 0;
-        background: var(--bg-color-secondary, $dg-background-color);
+        background: var(--bg-color-secondary, $bg-color-secondary);
         z-index: 102;
         border-radius: 8px;
         list-style-type: none;
-        box-shadow: 0 2px 20px 1px rgba(5, 15, 129, 0.05), 0 2px 16px 0 rgba(33, 43, 54, 0.08);
+        box-shadow:
+            0 2px 20px 1px rgba(5, 15, 129, 0.05),
+            0 2px 16px 0 rgba(33, 43, 54, 0.08);
         overflow-x: hidden;
         max-height: 40vh;
 
@@ -210,9 +213,9 @@ $dg-item-min-height: 32px;
             display: flex;
             align-items: center;
             font-weight: normal;
-            min-height: var(--spacing-larger, $dg-item-min-height);
+            min-height: var(--spacing-larger, $spacing-larger);
             cursor: pointer;
-            padding: 0 var(--spacing-small, $dg-spacing-small);
+            padding: 0 var(--spacing-small, $spacing-small);
 
             .filter-label {
                 overflow: hidden;
@@ -221,13 +224,13 @@ $dg-item-min-height: 32px;
             }
 
             &.filter-selected {
-                background-color: var(--gray-lighter, $dg-hover-color);
-                color: var(--brand-primary, $dg-brand-primary);
+                background-color: var(--gray-lighter, $gray-lighter);
+                color: var(--brand-primary, $brand-primary);
             }
 
             &:hover,
             &:focus {
-                background-color: var(--gray-lighter, $dg-hover-color);
+                background-color: var(--gray-lighter, $gray-lighter);
             }
 
             label {
diff --git a/Source/themesource/datawidgets/web/_datagrid.scss b/Source/themesource/datawidgets/web/_datagrid.scss
index c40d78d6..d4cda7ed 100644
--- a/Source/themesource/datawidgets/web/_datagrid.scss
+++ b/Source/themesource/datawidgets/web/_datagrid.scss
@@ -2,32 +2,12 @@
 @import "export-progress";
 @import "pseudo-modal";
 
-$dg-background-color: #fff;
-$dg-icon-color: #606671;
-$dg-icon-size: 14px;
-$dg-pagination-button-color: #3b4251;
-$dg-pagination-caption-color: #0a1325;
-$dragging-color-effect: rgba(10, 19, 37, 0.8);
-$dg-dragging-effect-size: 4px;
-
-$dg-grid-bg-striped: #fafafb;
-$dg-grid-bg-hover: #f5f6f6;
-$dg-spacing-small: 8px;
-$dg-spacing-medium: 16px;
-$dg-spacing-large: 24px;
-$dg-grid-border-color: #ced0d3;
-
-$dg-brand-primary: #264ae5;
-$dg-brand-light: #e6eaff;
-$dg-grid-selected-row-background: $dg-brand-light;
-$dg-skeleton-background: linear-gradient(90deg, rgba(194, 194, 194, 0.2) 0%, #d2d2d2 100%);
-
 $root: ".widget-datagrid";
 
 .table {
     position: relative;
     border-width: 0;
-    background-color: var(--bg-color-secondary, $dg-background-color);
+    background-color: var(--bg-color-secondary, $bg-color-secondary);
 
     /* Pseudo Row, to target this object please use .tr > .td or .tr > div */
     .tr {
@@ -39,10 +19,10 @@ $root: ".widget-datagrid";
         :where(.widget-datagrid-grid .th) {
             display: flex;
             align-items: flex-start;
-            background-color: var(--bg-color-secondary, $dg-background-color);
+            background-color: var(--bg-color-secondary, $bg-color-secondary);
             border-width: 0;
-            border-color: var(--grid-border-color, $dg-grid-border-color);
-            padding: var(--spacing-medium, $dg-spacing-medium);
+            border-color: var(--grid-border-color, $grid-border-color);
+            padding: var(--spacing-medium, $spacing-medium);
             top: 0;
             min-width: 0;
             position: relative;
@@ -63,7 +43,7 @@ $root: ".widget-datagrid";
             position: absolute;
             top: 0;
             height: 100%;
-            width: var(--spacing-smaller, $dg-dragging-effect-size);
+            width: var(--spacing-smaller, $spacing-smaller);
             background-color: $dragging-color-effect;
 
             z-index: 1;
@@ -100,10 +80,10 @@ $root: ".widget-datagrid";
             margin-right: -12px;
 
             &:hover .column-resizer-bar {
-                background-color: var(--brand-primary, $dg-brand-primary);
+                background-color: var(--brand-primary, $brand-primary);
             }
             &:active .column-resizer-bar {
-                background-color: var(--brand-primary, $dg-brand-primary);
+                background-color: var(--brand-primary, $brand-primary);
             }
 
             .column-resizer-bar {
@@ -129,7 +109,7 @@ $root: ".widget-datagrid";
 
         /* Header text */
         .column-header {
-            margin: 1px 1px calc((-1 * var(--spacing-smaller, $dg-dragging-effect-size)) + 2px);
+            margin: 1px 1px calc((-1 * var(--spacing-smaller, $spacing-smaller)) + 2px);
             display: flex;
             align-items: baseline;
             font-weight: 600;
@@ -145,9 +125,9 @@ $root: ".widget-datagrid";
 
             svg {
                 margin-left: 8px;
-                flex: 0 0 var(--btn-font-size, $dg-icon-size);
-                color: var(--gray-dark, $dg-icon-color);
-                height: var(--btn-font-size, $dg-icon-size);
+                flex: 0 0 var(--btn-font-size, $btn-font-size);
+                color: var(--gray-dark, $gray-dark);
+                height: var(--btn-font-size, $btn-font-size);
                 align-self: center;
             }
 
@@ -156,7 +136,7 @@ $root: ".widget-datagrid";
             }
 
             &:focus-visible {
-                outline: 1px solid var(--brand-primary, $dg-brand-primary);
+                outline: 1px solid var(--brand-primary, $brand-primary);
             }
         }
 
@@ -174,7 +154,7 @@ $root: ".widget-datagrid";
     &:has(.th .column-container .filter:not(:empty)) {
         .th {
             &.column-selector {
-                padding: var(--spacing-medium, $dg-spacing-medium) 0;
+                padding: var(--spacing-medium, $spacing-medium) 0;
             }
             /*adjust filter-selector icon to be mid-bottom aligned */
             .column-selector-content {
@@ -185,7 +165,7 @@ $root: ".widget-datagrid";
             /*adjust checkbox toggle to be mid-bottom aligned */
             &.widget-datagrid-col-select {
                 align-items: flex-end;
-                padding-bottom: calc(var(--spacing-medium, $dg-spacing-medium) + 11px);
+                padding-bottom: calc(var(--spacing-medium, $spacing-medium) + 11px);
             }
         }
     }
@@ -197,7 +177,7 @@ $root: ".widget-datagrid";
         /* Column content */
         .column-selector-content {
             align-self: center;
-            padding-right: var(--spacing-medium, $dg-spacing-medium);
+            padding-right: var(--spacing-medium, $spacing-medium);
             /* Button containing the eye icon */
             .column-selector-button {
                 $icon-margin: 7px;
@@ -207,8 +187,8 @@ $root: ".widget-datagrid";
                 padding: 0;
                 margin: 0;
 
-                height: calc(var(--btn-font-size, $dg-icon-size) + $icon-margin * 2 + $icon-slack-size);
-                width: calc(var(--btn-font-size, $dg-icon-size) + $icon-margin * 2 + $icon-slack-size);
+                height: calc(var(--btn-font-size, $btn-font-size) + $icon-margin * 2 + $icon-slack-size);
+                width: calc(var(--btn-font-size, $btn-font-size) + $icon-margin * 2 + $icon-slack-size);
 
                 svg {
                     margin: $icon-margin;
@@ -221,7 +201,7 @@ $root: ".widget-datagrid";
                 right: 0;
                 margin: 8px;
                 padding: 0 16px;
-                background: var(--bg-color-secondary, $dg-background-color);
+                background: var(--bg-color-secondary, $bg-color-secondary);
                 z-index: 102;
                 overflow-y: auto;
                 width: fit-content;
@@ -254,10 +234,10 @@ $root: ".widget-datagrid";
         display: flex;
         justify-content: space-between;
         align-items: center;
-        padding: var(--spacing-medium, $dg-spacing-medium);
+        padding: var(--spacing-medium, $spacing-medium);
         border-style: solid;
         border-width: 0;
-        border-color: var(--grid-border-color, $dg-grid-border-color);
+        border-color: var(--grid-border-color, $grid-border-color);
         border-bottom-width: 1px;
         min-width: 0;
 
@@ -270,7 +250,7 @@ $root: ".widget-datagrid";
             outline-width: 1px;
             outline-style: solid;
             outline-offset: -1px;
-            outline-color: var(--brand-primary, $dg-brand-primary);
+            outline-color: var(--brand-primary, $brand-primary);
         }
 
         &.clickable {
@@ -332,20 +312,20 @@ $root: ".widget-datagrid";
     white-space: nowrap;
     align-items: baseline;
     margin: 16px;
-    color: $dg-pagination-caption-color;
+    color: $pagination-caption-color;
 
     .paging-status {
-        padding: 0 8px 8px;
+        padding: 0 8px 0;
     }
 
     .pagination-button {
         padding: 6px;
-        color: var(--gray-darker, $dg-pagination-button-color);
+        color: var(--gray-darker, $gray-darker);
         border-color: transparent;
         background-color: transparent;
 
         &:hover {
-            color: var(--brand-primary, $dg-brand-primary);
+            color: var(--brand-primary, $brand-primary);
             border-color: transparent;
             background-color: transparent;
         }
@@ -360,7 +340,7 @@ $root: ".widget-datagrid";
         }
 
         &:focus-visible {
-            outline: 1px solid var(--brand-primary, $dg-brand-primary);
+            outline: 1px solid var(--brand-primary, $brand-primary);
         }
     }
     .pagination-icon {
@@ -379,7 +359,7 @@ $root: ".widget-datagrid";
     right: 0;
     margin: 8px 0;
     padding: 0 16px;
-    background: var(--bg-color-secondary, $dg-background-color);
+    background: var(--bg-color-secondary, $bg-color-secondary);
     z-index: 102;
     overflow-y: auto;
     width: fit-content;
@@ -410,7 +390,15 @@ $root: ".widget-datagrid";
     position: relative;
 
     &-grid {
-        display: grid !important;
+        &.table {
+            display: grid !important;
+            min-width: fit-content;
+            margin-bottom: 0;
+        }
+    }
+
+    &-content {
+        overflow-x: auto;
     }
 
     &-grid-head {
@@ -423,7 +411,7 @@ $root: ".widget-datagrid";
 
     &.widget-datagrid-selection-method-click {
         .tr.tr-selected .td {
-            background-color: $dg-grid-selected-row-background;
+            background-color: $grid-selected-row-background;
         }
     }
 
@@ -475,7 +463,7 @@ $root: ".widget-datagrid";
 
         &-loader {
             animation: skeleton-loading 1s linear infinite alternate;
-            background: var(--dg-skeleton-background, $dg-skeleton-background);
+            background: var(--skeleton-background, $skeleton-background);
             background-size: 300% 100%;
             border-radius: 4px;
             height: 16px;
@@ -502,7 +490,7 @@ $root: ".widget-datagrid";
             --widget-combobox-spinner-loader: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;
             animation: rotate 1s infinite linear;
             aspect-ratio: 1;
-            background: var(--brand-primary, $dg-brand-primary);
+            background: var(--brand-primary, $brand-primary);
             border-radius: 50%;
             mask: var(--widget-combobox-spinner-loader);
             mask-composite: subtract;
@@ -541,6 +529,33 @@ $root: ".widget-datagrid";
     z-index: 1;
 }
 
+:where(#{$root}-paging-bottom) {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+}
+
+:where(#{$root}-pb-start, #{$root}-pb-end, #{$root}-pb-middle) {
+    flex-grow: 1;
+    flex-basis: 33.33%;
+    min-height: 20px;
+}
+
+:where(#{$root}-pb-start) {
+    margin-block: var(--spacing-medium);
+    padding-inline: var(--spacing-medium);
+}
+
+#{$root}-clear-selection {
+    cursor: pointer;
+    background: transparent;
+    border: none;
+    text-decoration: underline;
+    color: var(--link-color);
+    padding: 0;
+    display: inline-block;
+}
+
 @keyframes skeleton-loading {
     0% {
         background-position: right;
diff --git a/Source/themesource/datawidgets/web/_date-picker.scss b/Source/themesource/datawidgets/web/_date-picker.scss
index fb424da3..0fdcaa7a 100644
--- a/Source/themesource/datawidgets/web/_date-picker.scss
+++ b/Source/themesource/datawidgets/web/_date-picker.scss
@@ -10,7 +10,7 @@ $dg-border-color: #d7d7d7;
 
 .react-datepicker {
     font-size: 1em;
-    border: 1px solid $dg-border-color;
+    border: 1px solid $border-color-default;
 }
 
 .react-datepicker-wrapper {
@@ -25,7 +25,7 @@ $dg-border-color: #d7d7d7;
 
 .react-datepicker__header {
     padding-top: 0.8em;
-    background-color: var(--bg-color, $dg-background-color);
+    background-color: var(--bg-color, $bg-color);
     border-color: transparent;
 }
 
@@ -59,13 +59,13 @@ $dg-border-color: #d7d7d7;
 
     &:hover {
         border-radius: 50%;
-        color: var(--brand-primary, $dg-brand-primary);
-        background-color: var(--gray-ligter, $dg-hover-color);
+        color: var(--brand-primary, $brand-primary);
+        background-color: var(--gray-ligter, $gray-lighter);
     }
 }
 
 .react-datepicker__day-name {
-    color: var(--brand-primary, $dg-brand-primary);
+    color: var(--brand-primary, $brand-primary);
     font-weight: bold;
 }
 
@@ -75,8 +75,8 @@ $dg-border-color: #d7d7d7;
 
 .react-datepicker__day--today:not(.react-datepicker__day--in-range),
 .react-datepicker__day--keyboard-selected {
-    color: var(--brand-primary, $dg-brand-primary);
-    background-color: var(--gray-ligter, $dg-hover-color);
+    color: var(--brand-primary, $brand-primary);
+    background-color: var(--gray-ligter, $gray-lighter);
 }
 
 .react-datepicker__month-select:focus-visible,
@@ -90,12 +90,12 @@ $dg-border-color: #d7d7d7;
 .react-datepicker__day--range-start,
 .react-datepicker__day--range-end,
 .react-datepicker__day--in-selecting-range.react-datepicker__day--selecting-range-start {
-    background-color: var(--brand-primary, $dg-brand-primary);
+    background-color: var(--brand-primary, $brand-primary);
     color: var(--header-text-color, $dg-text-color);
 
     &:hover {
         border-radius: 50%;
-        background-color: var(--brand-primary, $dg-brand-primary);
+        background-color: var(--brand-primary, $brand-primary);
         color: var(--header-text-color, $dg-text-color);
     }
 }
@@ -112,13 +112,13 @@ $dg-border-color: #d7d7d7;
     color: $dg-day-range-color;
 
     &:hover {
-        background-color: var(--brand-primary, $dg-brand-primary);
+        background-color: var(--brand-primary, $brand-primary);
         color: var(--header-text-color, $dg-text-color);
     }
 }
 
 button.react-datepicker__close-icon::after {
-    background-color: var(--brand-primary, $dg-brand-primary);
+    background-color: var(--brand-primary, $brand-primary);
 }
 
 .react-datepicker__current-month {
diff --git a/Source/themesource/datawidgets/web/_drop-down-sort.scss b/Source/themesource/datawidgets/web/_drop-down-sort.scss
index c6228288..cf2bbb7a 100644
--- a/Source/themesource/datawidgets/web/_drop-down-sort.scss
+++ b/Source/themesource/datawidgets/web/_drop-down-sort.scss
@@ -6,7 +6,8 @@
 @font-face {
     font-family: "dropdown-sort";
     src: url("./fonts/dropdown-sort.eot?46260688");
-    src: url("./fonts/dropdown-sort.eot?46260688#iefix") format("embedded-opentype"),
+    src:
+        url("./fonts/dropdown-sort.eot?46260688#iefix") format("embedded-opentype"),
         url("./fonts/dropdown-sort.woff2?46260688") format("woff2"),
         url("./fonts/dropdown-sort.woff?46260688") format("woff"),
         url("./fonts/dropdown-sort.ttf?46260688") format("truetype"),
@@ -25,7 +26,7 @@
     }
 
     .btn-sort {
-        padding: var(--spacing-small, $dg-spacing-small);
+        padding: var(--spacing-small, $spacing-small);
         border-bottom-left-radius: 0;
         border-top-left-radius: 0;
 
diff --git a/Source/themesource/datawidgets/web/_export-alert.scss b/Source/themesource/datawidgets/web/_export-alert.scss
index b94b48f1..b3e54606 100644
--- a/Source/themesource/datawidgets/web/_export-alert.scss
+++ b/Source/themesource/datawidgets/web/_export-alert.scss
@@ -1,5 +1,3 @@
-$brand-primary: #264ae5 !default;
-
 .widget-datagrid-export-alert {
     background-color: rgba(255, 255, 255, 1);
     border-radius: 4px;
diff --git a/Source/themesource/datawidgets/web/_gallery-design-properties.scss b/Source/themesource/datawidgets/web/_gallery-design-properties.scss
index 0fc17c23..a8e08045 100644
--- a/Source/themesource/datawidgets/web/_gallery-design-properties.scss
+++ b/Source/themesource/datawidgets/web/_gallery-design-properties.scss
@@ -7,14 +7,14 @@
 // All borders
 .widget-gallery-bordered-all {
     .widget-gallery-item {
-        border: 1px solid var(--grid-border-color, $dg-grid-border-color);
+        border: 1px solid var(--grid-border-color, $grid-border-color);
     }
 }
 
 // Vertical borders
 .widget-gallery-bordered-vertical {
     .widget-gallery-item {
-        border-color: var(--grid-border-color, $dg-grid-border-color);
+        border-color: var(--grid-border-color, $grid-border-color);
         border-style: solid;
         border-width: 0;
         border-left-width: 1px;
@@ -25,7 +25,7 @@
 // Horizontal orders
 .widget-gallery-bordered-horizontal {
     .widget-gallery-item {
-        border-color: var(--grid-border-color, $dg-grid-border-color);
+        border-color: var(--grid-border-color, $grid-border-color);
         border-style: solid;
         border-width: 0;
         border-top-width: 1px;
@@ -33,11 +33,26 @@
     }
 }
 
+.widget-gallery-divided-horizontal {
+    .widget-gallery-item {
+        position: relative;
+        &:not(:last-child)::after {
+            content: "";
+            display: block;
+            position: absolute;
+            left: 0;
+            right: 0;
+            border-bottom: 1px solid var(--grid-border-color, $grid-border-color);
+            margin-top: calc(var(--spacing-small, $spacing-small) / 2);
+        }
+    }
+}
+
 // Hover styles
 .widget-gallery-hover {
     .widget-gallery-items {
         .widget-gallery-item:hover {
-            background-color: var(--grid-bg-hover, $dg-grid-bg-hover);
+            background-color: var(--grid-bg-hover, $grid-bg-hover);
         }
     }
 }
@@ -45,7 +60,7 @@
 // Striped styles
 .widget-gallery-striped {
     .widget-gallery-item:nth-child(odd) {
-        background-color: var(--grid-bg-striped, $dg-grid-bg-striped);
+        background-color: var(--grid-bg-striped, $grid-bg-striped);
     }
     .widget-gallery-item:nth-child(even) {
         background-color: #fff;
@@ -62,21 +77,21 @@
 // Grid spacing small
 .widget-gallery.widget-gallery-gridgap-small {
     .widget-gallery-items {
-        gap: var(--spacing-small, $dg-spacing-small);
+        gap: var(--spacing-small, $spacing-small);
     }
 }
 
 // Grid spacing medium
 .widget-gallery.widget-gallery-gridgap-medium {
     .widget-gallery-items {
-        gap: var(--spacing-medium, $dg-spacing-medium);
+        gap: var(--spacing-medium, $spacing-medium);
     }
 }
 
 // Grid spacing large
 .widget-gallery.widget-gallery-gridgap-large {
     .widget-gallery-items {
-        gap: var(--spacing-large, $dg-spacing-large);
+        gap: var(--spacing-large, $spacing-large);
     }
 }
 
diff --git a/Source/themesource/datawidgets/web/_gallery.scss b/Source/themesource/datawidgets/web/_gallery.scss
index 743dd900..1269d26e 100644
--- a/Source/themesource/datawidgets/web/_gallery.scss
+++ b/Source/themesource/datawidgets/web/_gallery.scss
@@ -3,8 +3,8 @@
 
    Override styles of Gallery widget
 ========================================================================== */
-$gallery-screen-lg: 992px;
-$gallery-screen-md: 768px;
+$gallery-screen-lg: $screen-lg;
+$gallery-screen-md: $screen-md;
 
 @mixin grid-items($number, $suffix) {
     @for $i from 1 through $number {
@@ -25,7 +25,7 @@ $gallery-screen-md: 768px;
 .widget-gallery {
     .widget-gallery-items {
         display: grid;
-        grid-gap: var(--spacing-small, $dg-spacing-small);
+        grid-gap: var(--spacing-small, $spacing-small);
 
         /*
          Desktop widths
@@ -57,14 +57,14 @@ $gallery-screen-md: 768px;
         }
 
         &:focus-visible {
-            outline: 1px solid var(--brand-primary, $dg-brand-primary);
+            outline: 1px solid var(--brand-primary, $brand-primary);
             outline-offset: -1px;
         }
     }
 
     &:not(.widget-gallery-disable-selected-items-highlight) {
         .widget-gallery-item.widget-gallery-clickable.widget-gallery-selected {
-            background: $dg-brand-light;
+            background: $brand-light;
         }
     }
 
@@ -88,3 +88,29 @@ $gallery-screen-md: 768px;
 .widget-gallery-item-button {
     width: inherit;
 }
+
+:where(.widget-gallery-footer-controls) {
+    display: flex;
+    flex-flow: row nowrap;
+}
+
+:where(.widget-gallery-fc-start) {
+    margin-block: var(--spacing-medium);
+    padding-inline: var(--spacing-medium);
+}
+
+:where(.widget-gallery-fc-start, .widget-gallery-fc-middle, .widget-gallery-fc-end) {
+    flex-grow: 1;
+    flex-basis: 33.33%;
+    min-height: 20px;
+}
+
+.widget-gallery-clear-selection {
+    cursor: pointer;
+    background: transparent;
+    border: none;
+    text-decoration: underline;
+    color: var(--link-color);
+    padding: 0;
+    display: inline-block;
+}
diff --git a/Source/themesource/datawidgets/web/_refresh-indicator.scss b/Source/themesource/datawidgets/web/_refresh-indicator.scss
new file mode 100644
index 00000000..bcbd983a
--- /dev/null
+++ b/Source/themesource/datawidgets/web/_refresh-indicator.scss
@@ -0,0 +1,83 @@
+.mx-refresh-container {
+    grid-column: 1 / -1;
+    padding: 0;
+    position: relative;
+
+    &-padding {
+        padding: var(--spacing-small) 0;
+    }
+}
+
+.mx-refresh-indicator {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    background-color: var(--border-color-default, #ced0d3);
+    border: none;
+    border-radius: 2px;
+    color: var(--brand-primary, $brand-primary);
+    height: 4px;
+    width: 100%;
+    position: absolute;
+    left: 0;
+    right: 0;
+
+    &::-webkit-progress-bar {
+        background-color: transparent;
+    }
+
+    &::-webkit-progress-value {
+        background-color: currentColor;
+        transition: all 0.2s;
+    }
+
+    &::-moz-progress-bar {
+        background-color: currentColor;
+        transition: all 0.2s;
+    }
+
+    &::-ms-fill {
+        border: none;
+        background-color: currentColor;
+        transition: all 0.2s;
+    }
+
+    &:indeterminate {
+        background-size: 200% 100%;
+        background-image: linear-gradient(
+            to right,
+            transparent 50%,
+            currentColor 50%,
+            currentColor 60%,
+            transparent 60%,
+            transparent 71.5%,
+            currentColor 71.5%,
+            currentColor 84%,
+            transparent 84%
+        );
+        animation: progress-linear 3s infinite linear;
+    }
+
+    &:indeterminate::-moz-progress-bar {
+        background-color: transparent;
+    }
+
+    &:indeterminate::-ms-fill {
+        animation-name: none;
+    }
+
+    @keyframes progress-linear {
+        0% {
+            background-size: 200% 100%;
+            background-position: left -31.25% top 0%;
+        }
+        50% {
+            background-size: 800% 100%;
+            background-position: left -49% top 0%;
+        }
+        100% {
+            background-size: 400% 100%;
+            background-position: left -102% top 0%;
+        }
+    }
+}
diff --git a/Source/themesource/datawidgets/web/_three-state-checkbox.scss b/Source/themesource/datawidgets/web/_three-state-checkbox.scss
index 867c39b1..3ca401f3 100644
--- a/Source/themesource/datawidgets/web/_three-state-checkbox.scss
+++ b/Source/themesource/datawidgets/web/_three-state-checkbox.scss
@@ -11,6 +11,11 @@ input[type="checkbox"].three-state-checkbox {
     -webkit-appearance: none;
     transform: translateZ(0);
 
+    &:disabled {
+        // reset default disabled cursor
+        cursor: initial;
+    }
+
     &:before,
     &:after {
         position: absolute;
@@ -41,7 +46,7 @@ input[type="checkbox"].three-state-checkbox {
     }
 
     &:indeterminate:after {
-        // Checkmark
+        // Dash-mark for indeterminate
         width: 8px;
         height: 4px;
         margin: 5px 4px;
@@ -72,13 +77,13 @@ input[type="checkbox"].three-state-checkbox {
         background-color: #f8f8f8;
     }
 
+    &:indeterminate:disabled:before,
     &:checked:disabled:before {
         border-color: transparent;
         background-color: rgba(#264ae5, 0.4);
     }
 
-    &:disabled:after,
-    &:checked:disabled:after {
+    &:disabled:after {
         border-color: #f8f8f8;
     }
 
diff --git a/Source/themesource/datawidgets/web/_tree-node-design-properties.scss b/Source/themesource/datawidgets/web/_tree-node-design-properties.scss
index 92166b01..b56e5e01 100644
--- a/Source/themesource/datawidgets/web/_tree-node-design-properties.scss
+++ b/Source/themesource/datawidgets/web/_tree-node-design-properties.scss
@@ -4,12 +4,9 @@
 //== Design Properties
 //## Helper classes to change the look and feel of the component
 ========================================================================== */
-$dg-grid-border-color: #ced0d3;
-$dg-grid-bg-hover: #f5f6f6;
-
 .widget-tree-node-hover {
     .widget-tree-node-branch:hover > .widget-tree-node-branch-header {
-        background-color: var(--grid-bg-hover, $dg-grid-bg-hover);
+        background-color: var(--grid-bg-hover, $grid-bg-hover);
     }
 }
 
@@ -18,12 +15,12 @@ $dg-grid-bg-hover: #f5f6f6;
         border-width: 0;
         border-bottom-width: 1px;
         border-bottom-style: solid;
-        border-bottom-color: var(--grid-border-color, $dg-grid-border-color);
+        border-bottom-color: var(--grid-border-color, $grid-border-color);
     }
 }
 
 .widget-tree-node-bordered-all {
-    border: 1px solid var(--grid-border-color, $dg-grid-border-color);
+    border: 1px solid var(--grid-border-color, $grid-border-color);
     border-radius: 8px;
     overflow: hidden;
 
diff --git a/Source/themesource/datawidgets/web/design-properties.json b/Source/themesource/datawidgets/web/design-properties.json
index 565cb5d4..c58b1bdd 100644
--- a/Source/themesource/datawidgets/web/design-properties.json
+++ b/Source/themesource/datawidgets/web/design-properties.json
@@ -59,6 +59,10 @@
                 {
                     "name": "Horizontal",
                     "class": "widget-gallery-bordered-horizontal"
+                },
+                {
+                    "name": "Horizontal divider",
+                    "class": "widget-gallery-divided-horizontal"
                 }
             ]
         },
diff --git a/Source/themesource/datawidgets/web/main.scss b/Source/themesource/datawidgets/web/main.scss
index 19fbcb88..a9c5fb31 100644
--- a/Source/themesource/datawidgets/web/main.scss
+++ b/Source/themesource/datawidgets/web/main.scss
@@ -1,4 +1,5 @@
 @import "../../../theme/web/custom-variables";
+@import "variables";
 @import "datagrid";
 @import "datagrid-filters";
 @import "datagrid-dropdown-filter";
@@ -6,6 +7,7 @@
 @import "drop-down-sort";
 @import "gallery";
 @import "gallery-design-properties";
+@import "refresh-indicator";
 @import "three-state-checkbox";
 @import "tree-node";
 @import "tree-node-design-properties";
diff --git a/Source/themesource/datawidgets/web/variables.scss b/Source/themesource/datawidgets/web/variables.scss
new file mode 100644
index 00000000..f8422d31
--- /dev/null
+++ b/Source/themesource/datawidgets/web/variables.scss
@@ -0,0 +1,37 @@
+// Atlas UI compatible variable naming for data widgets
+// Background colors
+$bg-color: #fff !default;
+$bg-color-secondary: #f5f8fd !default;
+$grid-bg-striped: #fafafb !default;
+$grid-bg-hover: #f5f6f6 !default;
+$hover-color: #f8f8f8 !default;
+$selected-color: #dadcde !default;
+
+// Brand colors
+$brand-primary: #264ae5 !default;
+$brand-light: #e6eaff !default;
+$grid-selected-row-background: $brand-light !default;
+
+// Text and icon colors
+$gray-dark: #606671 !default;
+$gray-darker: #3b4251 !default;
+$pagination-caption-color: #0a1325 !default;
+
+// Border colors
+$border-color-default: #ced0d3 !default;
+$grid-border-color: #ced0d3 !default;
+
+// Sizing and spacing
+$btn-font-size: 14px !default;
+$spacing-smaller: 4px !default;
+$spacing-small: 8px !default;
+$spacing-medium: 16px !default;
+$spacing-large: 24px !default;
+$spacing-larger: 32px !default;
+
+// Effects and animations
+$dragging-color-effect: rgba(10, 19, 37, 0.8) !default;
+$skeleton-background: linear-gradient(90deg, rgba(194, 194, 194, 0.2) 0%, #d2d2d2 100%) !default;
+
+// Assets
+$arrow: "resources/dropdown-arrow.svg" !default;
diff --git a/Source/themesource/feedbackmodule/web/_failed.scss b/Source/themesource/feedbackmodule/web/_failed.scss
deleted file mode 100644
index 92239be3..00000000
--- a/Source/themesource/feedbackmodule/web/_failed.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.mxfeedback-failed {
-    // TODO: Feels like it can be replaced in the future
-    &__message {
-        align-self: center;
-        margin: $spacing-small;
-    }
-
-    &__error-image {
-        margin-top: 30px;
-    }
-}
diff --git a/Source/themesource/feedbackmodule/web/_feedbackForm.scss b/Source/themesource/feedbackmodule/web/_feedbackForm.scss
deleted file mode 100644
index e1a83e8e..00000000
--- a/Source/themesource/feedbackmodule/web/_feedbackForm.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.mxfeedback-feedback-form {
-    &__cancel-button {
-        border: 0;
-    }
-}
diff --git a/Source/themesource/feedbackmodule/web/_labelGroup.scss b/Source/themesource/feedbackmodule/web/_labelGroup.scss
deleted file mode 100644
index 9be7c5b9..00000000
--- a/Source/themesource/feedbackmodule/web/_labelGroup.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-/// Styles the label plus tooltip icon.
-
-.mxfeedback-label-group {
-    display: flex;
-    align-items: center;
-    gap: calc(#{$gutter-size} / 2);
-    margin-bottom: $spacing-smaller;
-
-    &__label.control-label {
-        margin-bottom: 0;
-    }
-}
diff --git a/Source/themesource/feedbackmodule/web/_lightbox.scss b/Source/themesource/feedbackmodule/web/_lightbox.scss
deleted file mode 100644
index 4427bd33..00000000
--- a/Source/themesource/feedbackmodule/web/_lightbox.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-/// The lightbox displays a preview of the screenshot when clicking on the thumbnail. 
-
-.mxfeedback-lightbox {
-    position: fixed;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    overflow: auto;
-    padding-top: 10vh;
-    padding-bottom: 10vh;
-    background-color: $mxfeedback-lightbox-background-color;
-    z-index: $mxfeedback-z-index-lightbox;
-
-    &__image {
-        margin: auto;
-        display: block;
-        max-width: 70%;
-
-        @include mq($screen-md) {
-            max-width: calc(100% - 16px);
-        }
-    }
-
-    .mxfeedback-close-button {
-        &__icon {
-            width: $mxfeedback-icon-size-sm;
-            height: $mxfeedback-icon-size-sm;   
-        }
-    }
-}
diff --git a/Source/themesource/feedbackmodule/web/_result.scss b/Source/themesource/feedbackmodule/web/_result.scss
deleted file mode 100644
index d597a8f7..00000000
--- a/Source/themesource/feedbackmodule/web/_result.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-/// Style the image on the successfully submitted page
-
-.mxfeedback-result {
-  &__result-image {
-      align-self: center;
-      width: auto;
-      max-width: 50%;
-  }
-
-  .mxfeedback-dialog__body-text {
-    margin: auto;
-  }
-
-  &__result-image {
-    margin-top: 30px;
-  }
-}
\ No newline at end of file
diff --git a/Source/themesource/feedbackmodule/web/_screenshotPreview.scss b/Source/themesource/feedbackmodule/web/_screenshotPreview.scss
deleted file mode 100644
index 36838b5f..00000000
--- a/Source/themesource/feedbackmodule/web/_screenshotPreview.scss
+++ /dev/null
@@ -1,61 +0,0 @@
-/// Styles the screenshot preview container in the form.
-
-.mxfeedback-screenshot-preview {
-    position: relative;
-    margin: 20px auto;
-    height: $mxfeedback-screenshot-preview-height;
-    cursor: pointer;
-
-    &__image {
-        display: block;
-        object-fit: contain;
-        height: 100%;
-        aspect-ratio: 16 / 9;
-        border: 1px solid $gray;
-        border-radius: $border-radius-default;
-    }
-
-    &__overlay {
-        position: absolute;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        width: 100%;
-        opacity: 0;
-        transition: 0.3s ease;
-        background-color: $gray-darker;
-        border: 1px solid $gray-dark;
-        border-radius: $border-radius-default;
-
-        &:hover {
-            opacity: 0.5;
-        }
-
-        &:focus-visible {
-            opacity: 0.5;
-        }
-    }
-
-    &__preview-icon {
-        width: $mxfeedback-icon-size-md;
-        height: $mxfeedback-icon-size-md;
-        fill: $gray-lighter;
-    }
-
-    &__delete-icon {
-        position: absolute;
-        top: 0;
-        right: 0;
-        transform: translate(50%, -50%);
-        width: $mxfeedback-icon-size-md;
-        height: $mxfeedback-icon-size-md;
-        stroke: $gray-dark;
-        fill: $gray-lighter;
-        z-index: 1;
-        cursor: pointer;
-    }
-}
diff --git a/Source/themesource/feedbackmodule/web/_startButton.scss b/Source/themesource/feedbackmodule/web/_startButton.scss
deleted file mode 100644
index 241bcff7..00000000
--- a/Source/themesource/feedbackmodule/web/_startButton.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-/// Creates the blue start button for the feedback widget.
-/// This can be replaced by several starting points in the future.
-
-.mxfeedback-start-button {
-    position: fixed;
-    top: 50%;
-    right: 0;
-    transform: translate(50%, -50%) rotate(270deg);
-    transform-origin: bottom center;
-    padding: $spacing-smaller $spacing-small;
-    border: none;
-    border-radius: $border-radius-default $border-radius-default 0 0;
-    background-color: $btn-primary-bg;
-    color: $btn-primary-color;
-    font-size: $m-header-title-size;
-    box-shadow: $mxfeedback-start-button-shadow;
-    z-index: $mxfeedback-z-index-start-button;
-
-    &:focus,
-    &:hover {
-        background-color: $btn-primary-bg-hover;
-    }
-}
diff --git a/Source/themesource/feedbackmodule/web/_tooltip.scss b/Source/themesource/feedbackmodule/web/_tooltip.scss
deleted file mode 100644
index 0c5424f9..00000000
--- a/Source/themesource/feedbackmodule/web/_tooltip.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-/// Create a Tooltip on hover effect.
-
-$_block: ".mxfeedback-tooltip";
-#{$_block} {
-    $_offset: 32px;
-    display: flex;
-    position: relative;
-
-    &__icon {
-        width: $mxfeedback-icon-size-sm;
-        height: $mxfeedback-icon-size-sm;
-
-        &:hover ~ #{$_block}__tip {
-            visibility: visible;
-        }
-    }
-
-    &__tip {
-        visibility: hidden;
-        position: absolute;
-        top: calc(100% + #{$spacing-small});
-        left: calc(50% - #{$_offset});
-        width: $mxfeedback-tooltip-width;
-        max-width: calc(100vw - #{$spacing-larger});
-        padding: 6px 8px; // not using variables here as its padding should be precise
-        margin-bottom: 0;
-        border-radius: 2px; // not using variables here as its border radius should be precise
-        background-color: $gray-darker;
-        color: $label-primary-color;
-        font-size: $font-size-small;
-        line-height: 1.5;
-        z-index: 1;
-        transition: visibility 100ms ease-in-out;
-
-        &::after {
-            content: "";
-            position: absolute;
-            top: 0;
-            left: $_offset;
-            transform: translate(-50%, -50%) rotate(45deg);
-            width: 12px;
-            height: 12px;
-            background-color: inherit;
-            text-align: center;
-            pointer-events: none;
-        }
-    }
-}
diff --git a/Source/themesource/feedbackmodule/web/annotation/_annotation-canvas.scss b/Source/themesource/feedbackmodule/web/annotation-canvas.scss
similarity index 100%
rename from Source/themesource/feedbackmodule/web/annotation/_annotation-canvas.scss
rename to Source/themesource/feedbackmodule/web/annotation-canvas.scss
diff --git a/Source/themesource/feedbackmodule/web/annotation/_annotation-frame.scss b/Source/themesource/feedbackmodule/web/annotation-frame.scss
similarity index 100%
rename from Source/themesource/feedbackmodule/web/annotation/_annotation-frame.scss
rename to Source/themesource/feedbackmodule/web/annotation-frame.scss
diff --git a/Source/themesource/feedbackmodule/web/button/_buttonGroup.scss b/Source/themesource/feedbackmodule/web/button-group.scss
similarity index 86%
rename from Source/themesource/feedbackmodule/web/button/_buttonGroup.scss
rename to Source/themesource/feedbackmodule/web/button-group.scss
index 8819aff7..2c13fb53 100644
--- a/Source/themesource/feedbackmodule/web/button/_buttonGroup.scss
+++ b/Source/themesource/feedbackmodule/web/button-group.scss
@@ -4,18 +4,18 @@
 .mxfeedback-button-group {
     display: flex;
     justify-content: flex-end;
-    gap: $gutter-size;
+    gap: $spacing-small;
 
     &--screenshot-container {
         flex-direction: row-reverse;
     }
 
     &--gap-md {
-        gap: $gutter-size * 2;
+        gap: $spacing-small * 2;
     }
 
     &--gap-lg {
-        gap: $gutter-size * 4;
+        gap: $spacing-small * 4;
     }
 
     &--justify-start {
diff --git a/Source/themesource/feedbackmodule/web/button/_button.scss b/Source/themesource/feedbackmodule/web/button.scss
similarity index 92%
rename from Source/themesource/feedbackmodule/web/button/_button.scss
rename to Source/themesource/feedbackmodule/web/button.scss
index c4cb387f..831cbd84 100644
--- a/Source/themesource/feedbackmodule/web/button/_button.scss
+++ b/Source/themesource/feedbackmodule/web/button.scss
@@ -5,7 +5,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    gap: $gutter-size;
+    gap: $spacing-small;
 
     svg {
         width: $mxfeedback-icon-size-sm;
diff --git a/Source/themesource/feedbackmodule/web/dialog/_closeButton.scss b/Source/themesource/feedbackmodule/web/dialog/_closeButton.scss
deleted file mode 100644
index 137dd997..00000000
--- a/Source/themesource/feedbackmodule/web/dialog/_closeButton.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-/// Styles the close button to follow the same styling as ATLAS UI close button.
-/// | `btn-primary-color` | To show the close button in white color.|
-
-.mxfeedback-close-button {
-    right: $spacing-medium;
-    top: 12px; // not using variables here as its position should be precise
-    padding: 0;
-    background-color: transparent;
-    border: none;
-    position: absolute;
-    
-    &__icon {
-        width: 12px;
-        height: 12px;
-        color: $font-color-default;
-        stroke: $font-color-default;
-    }
-
-    &--white > &__icon {
-        fill: $btn-primary-color;
-    }
-}
diff --git a/Source/themesource/feedbackmodule/web/dialog/_dialog.scss b/Source/themesource/feedbackmodule/web/dialog/_dialog.scss
deleted file mode 100644
index 5fe66475..00000000
--- a/Source/themesource/feedbackmodule/web/dialog/_dialog.scss
+++ /dev/null
@@ -1,30 +0,0 @@
-/// Styles the dialogs.
-/// The styling is shared between the different windows.
-
-.mxfeedback-dialog {
-    display: flex;
-    flex-direction: column;
-    position: fixed;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    padding: $spacing-large;
-    width: $mxfeedback-dialog-width;
-    max-width: calc(100% - #{$mxfeedback-dialog-spacing});
-    max-height: calc(100% - #{$mxfeedback-dialog-spacing});
-    background-color: $bg-color-secondary;
-    border: 1px solid $border-color-default;
-    border-radius: $border-radius-default;
-    box-shadow: $mxfeedback-shadow-small $mxfeedback-shadow-color;
-    overflow: hidden auto;
-    z-index: $mxfeedback-z-index-underlay;
-
-    &__title {
-        font-size: $font-size-large;
-        font-weight: $font-weight-semibold;
-        line-height: 120%;
-        margin: 0 0 $spacing-medium;
-        color: $font-color-default;
-        align-self: center;
-    }
-}
diff --git a/Source/themesource/feedbackmodule/web/feedback-button.scss b/Source/themesource/feedbackmodule/web/feedback-button.scss
new file mode 100644
index 00000000..5bdf48e7
--- /dev/null
+++ b/Source/themesource/feedbackmodule/web/feedback-button.scss
@@ -0,0 +1,54 @@
+/* 
+About: =========================================================
+----------------------------------------------------------------
+This styling targets the main Feedback Button rendered on your page.
+The Feedback widget button can be rendered on page in 3 formats.
+
+Render Modes: ==================================================
+----------------------------------------------------------------
+Each render mode can be selected by double clicking the Feedback widget settings in Studio Pro.
+
+'Side Tab' - Fixes the button to the right hand margin and rotates by 270 degrees.
+'Button' - Mimics a normal Mendix button.
+'Do not render' - Hides the button on the live website but is still visible in the page editor for developers.
+
+CSS BEM Enumeration values: ====================================
+----------------------------------------------------------------
+At a code level each render mode selected has a coresspoinding CSS BEM modifier value.
+Use these BEM modifiers to custom style each render mode.
+
+Side Tab = "side"
+Button = "normal"
+Do not render = "none"
+
+*/
+.mxfeedback-start-button {
+
+    // &--normal {
+        // Use this if you want to style the Feedback Button when set Render mode = 'Button'
+    // }
+
+    &--none {
+        display: none !important;
+    }
+    &--side {
+        position: fixed;
+        top: 50%;
+        right: 0;
+        transform: translate(50%, -50%) rotate(270deg);
+        transform-origin: bottom center;
+        padding: $spacing-smaller $spacing-small;
+        border: none;
+        border-radius: $border-radius-default $border-radius-default 0 0;
+        background-color: $btn-primary-bg;
+        color: $btn-primary-color;
+        font-size: $m-header-title-size;
+        box-shadow: $mxfeedback-start-button-shadow;
+        z-index: $mxfeedback-z-index-start-button;
+
+        &:focus,
+        &:hover {
+            background-color: $btn-primary-bg-hover;
+        }
+    }
+}
\ No newline at end of file
diff --git a/Source/themesource/feedbackmodule/web/includes/_helpers.scss b/Source/themesource/feedbackmodule/web/helpers.scss
similarity index 100%
rename from Source/themesource/feedbackmodule/web/includes/_helpers.scss
rename to Source/themesource/feedbackmodule/web/helpers.scss
diff --git a/Source/themesource/feedbackmodule/web/includes/_atlasVariables.scss b/Source/themesource/feedbackmodule/web/includes/_atlasVariables.scss
deleted file mode 100644
index 6635d868..00000000
--- a/Source/themesource/feedbackmodule/web/includes/_atlasVariables.scss
+++ /dev/null
@@ -1,52 +0,0 @@
-/// Based on ATLAS UI 3
-
-$gray-darker: #0a1325;
-$gray-dark: #474e5c;
-$gray: #787d87;
-$gray-light: #a9acb3;
-$gray-primary: #e7e7e9;
-$gray-lighter: #f8f8f8;
-
-$brand-default: $gray-primary;
-$brand-primary: #264ae5;
-$brand-success: #3cb33d;
-$brand-warning: #eca51c;
-$brand-danger: #e33f4e;
-
-$font-size-default: 14px;
-$font-color-default: #0a1325;
-
-$border-color-default: #ced0d3;
-$border-radius-default: 4px;
-
-$m-header-title-size: 16px;
-
-$bg-color-secondary: #fff;
-
-$font-size-large: 18px;
-$font-size-small: 12px;
-
-$font-weight-semibold: 600;
-$font-weight-bold: bold;
-
-$btn-primary-bg: $brand-primary;
-$btn-primary-bg-hover: mix($btn-primary-bg, black, 80%);
-$btn-primary-color: #fff;
-
-$label-primary-color: #fff;
-
-$spacing-smallest: 2px;
-$spacing-smaller: 4px;
-$spacing-small: 8px;
-$spacing-medium: 16px;
-$spacing-large: 24px;
-$spacing-larger: 32px;
-$spacing-largest: 48px;
-
-$gutter-size: 8px;
-
-$screen-xs: 480px;
-$screen-sm: 576px;
-$screen-md: 768px;
-$screen-lg: 992px;
-$screen-xl: 1200px;
diff --git a/Source/themesource/feedbackmodule/web/main.scss b/Source/themesource/feedbackmodule/web/main.scss
index 0221c429..6ef1b8cd 100644
--- a/Source/themesource/feedbackmodule/web/main.scss
+++ b/Source/themesource/feedbackmodule/web/main.scss
@@ -1,35 +1,29 @@
 /* 
     ==| Variables |=========================================================================================
 */
-@import "includes/atlasVariables"; 
-@import "includes/variables";
-@import "includes/helpers";
+@import "../../../theme/web/custom-variables.scss"; 
+@import "variables";
+@import "helpers";
 
 /* 
     ==| Widget blocks |=====================================================================================
     These blocks contains styles directly related to the widget's appearance and are mostly unique styles
     needed to display the widget's UI correctly.
 */
-@import "lightbox";
-@import "startButton";
-@import "annotation/annotation-canvas";
-@import "annotation/annotation-frame";
-@import "failed";
-@import "result";
-@import "feedbackForm";
+
+@import "feedback-button";
+@import "annotation-canvas";
+@import "annotation-frame";
 
 /* 
     ==| Generic blocks |====================================================================================
     These blocks are generic blocks. These styles are styles that apply to the widget's entire UI and
     outline the basic styles of the widget (in accordance with Atlas UI).
 */
-@import "dialog/dialog";
-@import "dialog/underlay";
-@import "dialog/closeButton";
-@import "toolbar/toolbar";
-@import "toolbar/toolButton";
-@import "labelGroup";
-@import "button/buttonGroup";
-@import "button/button";
-@import "screenshotPreview";
-@import "tooltip";
+
+@import "toolbar";
+@import "tool-button";
+@import "button-group";
+@import "button";
+@import "screenshot-preview";
+@import "underlay";
diff --git a/Source/themesource/feedbackmodule/web/screenshot-preview.scss b/Source/themesource/feedbackmodule/web/screenshot-preview.scss
new file mode 100644
index 00000000..908bec70
--- /dev/null
+++ b/Source/themesource/feedbackmodule/web/screenshot-preview.scss
@@ -0,0 +1,45 @@
+/// Styles the screenshot preview container in the form.
+
+.mxfeedback-screenshot-preview {
+  display: flex;
+  justify-content: left;
+  position: relative;
+  margin: $spacing-large auto;
+  cursor: pointer;
+
+  &__image > img {
+    display: block;
+    object-fit: contain;
+    height: 100%;
+    aspect-ratio: 16 / 9;
+    border: 1px solid $gray;
+    border-radius: $border-radius-default;
+
+    &:hover {
+      background-color: $gray-lighter;
+      border: 1px solid $gray-dark;
+      border-radius: $border-radius-default;
+      opacity: 0.5;
+    }
+  }
+
+  &__preview-icon {
+    width: $mxfeedback-icon-size-md;
+    height: $mxfeedback-icon-size-md;
+    fill: $gray-lighter;
+  }
+
+  &__delete-button {
+    position: absolute;
+    top: 0;
+    right: 0;
+    transform: translate(50%, -50%);
+    z-index: 1;
+    color: $btn-default-color;
+    border-radius: 50%;
+    height: 20px;
+    width: 20px;
+    padding: 0;
+    font-size: 12px;
+  }
+}
diff --git a/Source/themesource/feedbackmodule/web/toolbar/_toolButton.scss b/Source/themesource/feedbackmodule/web/tool-button.scss
similarity index 100%
rename from Source/themesource/feedbackmodule/web/toolbar/_toolButton.scss
rename to Source/themesource/feedbackmodule/web/tool-button.scss
diff --git a/Source/themesource/feedbackmodule/web/toolbar/_toolbar.scss b/Source/themesource/feedbackmodule/web/toolbar.scss
similarity index 100%
rename from Source/themesource/feedbackmodule/web/toolbar/_toolbar.scss
rename to Source/themesource/feedbackmodule/web/toolbar.scss
diff --git a/Source/themesource/feedbackmodule/web/dialog/_underlay.scss b/Source/themesource/feedbackmodule/web/underlay.scss
similarity index 100%
rename from Source/themesource/feedbackmodule/web/dialog/_underlay.scss
rename to Source/themesource/feedbackmodule/web/underlay.scss
diff --git a/Source/themesource/feedbackmodule/web/includes/_variables.scss b/Source/themesource/feedbackmodule/web/variables.scss
similarity index 96%
rename from Source/themesource/feedbackmodule/web/includes/_variables.scss
rename to Source/themesource/feedbackmodule/web/variables.scss
index 77f5208a..eb5aca17 100644
--- a/Source/themesource/feedbackmodule/web/includes/_variables.scss
+++ b/Source/themesource/feedbackmodule/web/variables.scss
@@ -9,7 +9,6 @@ $mxfeedback-z-index-frame: 1000004 !default;
 $mxfeedback-dialog-width: 560px;
 $mxfeedback-tooltip-width: 240px;
 $tool-list-width: 144px;
-$mxfeedback-screenshot-preview-height: 192px;
 $mxfeedback-dialog-spacing: 40px;
 
 //== Background colors
diff --git a/Source/widgets/Charts.mpk b/Source/widgets/Charts.mpk
index f68080b5..31ac24fe 100644
Binary files a/Source/widgets/Charts.mpk and b/Source/widgets/Charts.mpk differ
diff --git a/Source/widgets/SprintrFeedbackWidget.mpk b/Source/widgets/SprintrFeedbackWidget.mpk
index eeb13281..cd1ca9a1 100644
Binary files a/Source/widgets/SprintrFeedbackWidget.mpk and b/Source/widgets/SprintrFeedbackWidget.mpk differ
diff --git a/Source/widgets/com.mendix.widget.web.Datagrid.mpk b/Source/widgets/com.mendix.widget.web.Datagrid.mpk
index 2455e9fc..d70a8295 100644
Binary files a/Source/widgets/com.mendix.widget.web.Datagrid.mpk and b/Source/widgets/com.mendix.widget.web.Datagrid.mpk differ
diff --git a/Source/widgets/com.mendix.widget.web.DatagridDateFilter.mpk b/Source/widgets/com.mendix.widget.web.DatagridDateFilter.mpk
index 075c3fb8..cbd3b86a 100644
Binary files a/Source/widgets/com.mendix.widget.web.DatagridDateFilter.mpk and b/Source/widgets/com.mendix.widget.web.DatagridDateFilter.mpk differ
diff --git a/Source/widgets/com.mendix.widget.web.DatagridDropdownFilter.mpk b/Source/widgets/com.mendix.widget.web.DatagridDropdownFilter.mpk
index d19bc683..3ab46839 100644
Binary files a/Source/widgets/com.mendix.widget.web.DatagridDropdownFilter.mpk and b/Source/widgets/com.mendix.widget.web.DatagridDropdownFilter.mpk differ
diff --git a/Source/widgets/com.mendix.widget.web.DatagridNumberFilter.mpk b/Source/widgets/com.mendix.widget.web.DatagridNumberFilter.mpk
index 36ef14a3..0db97583 100644
Binary files a/Source/widgets/com.mendix.widget.web.DatagridNumberFilter.mpk and b/Source/widgets/com.mendix.widget.web.DatagridNumberFilter.mpk differ
diff --git a/Source/widgets/com.mendix.widget.web.DatagridTextFilter.mpk b/Source/widgets/com.mendix.widget.web.DatagridTextFilter.mpk
index b5dec479..c5d32c67 100644
Binary files a/Source/widgets/com.mendix.widget.web.DatagridTextFilter.mpk and b/Source/widgets/com.mendix.widget.web.DatagridTextFilter.mpk differ
diff --git a/Source/widgets/com.mendix.widget.web.DropdownSort.mpk b/Source/widgets/com.mendix.widget.web.DropdownSort.mpk
index 085f7962..fa1d5499 100644
Binary files a/Source/widgets/com.mendix.widget.web.DropdownSort.mpk and b/Source/widgets/com.mendix.widget.web.DropdownSort.mpk differ
diff --git a/Source/widgets/com.mendix.widget.web.Gallery.mpk b/Source/widgets/com.mendix.widget.web.Gallery.mpk
index 91409463..b0be10db 100644
Binary files a/Source/widgets/com.mendix.widget.web.Gallery.mpk and b/Source/widgets/com.mendix.widget.web.Gallery.mpk differ
diff --git a/Source/widgets/com.mendix.widget.web.SelectionHelper.mpk b/Source/widgets/com.mendix.widget.web.SelectionHelper.mpk
index befd5a96..737a1a48 100644
Binary files a/Source/widgets/com.mendix.widget.web.SelectionHelper.mpk and b/Source/widgets/com.mendix.widget.web.SelectionHelper.mpk differ
diff --git a/Source/widgets/com.mendix.widget.web.TreeNode.mpk b/Source/widgets/com.mendix.widget.web.TreeNode.mpk
index ae561c10..4dfbb19a 100644
Binary files a/Source/widgets/com.mendix.widget.web.TreeNode.mpk and b/Source/widgets/com.mendix.widget.web.TreeNode.mpk differ