diff --git a/WebNanoflowActions.mpr b/WebNanoflowActions.mpr
index 0f0ba19..e2768bd 100644
Binary files a/WebNanoflowActions.mpr and b/WebNanoflowActions.mpr differ
diff --git a/javascriptsource/webactions/actions/TakePicture.js b/javascriptsource/webactions/actions/TakePicture.js
index 3e3e3aa..d65fa5d 100644
--- a/javascriptsource/webactions/actions/TakePicture.js
+++ b/javascriptsource/webactions/actions/TakePicture.js
@@ -5,6 +5,7 @@
 // - 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
@@ -53,13 +54,8 @@ export async function TakePicture(picture, showConfirmationScreen, pictureQualit
     return new Promise(async (resolve, reject) => {
         let error;
         let stream;
-        const styleElements = [];
         let videoIsReady = false;
         let shouldFaceEnvironment = true;
-        for (const styleElement of createStyleElements(createStyles())) {
-            styleElements.push(styleElement);
-            document.head.appendChild(styleElement);
-        }
         const {
             video,
             wrapper,
@@ -116,204 +112,6 @@ export async function TakePicture(picture, showConfirmationScreen, pictureQualit
             videoContext === null || videoContext === void 0 ? void 0 : videoContext.drawImage(video, 0, 0);
             return videoCanvas;
         }
-        function createStyles() {
-            return [
-                `
-                .take-picture-wrapper {
-                    height: 100%;
-                    width: 100%;
-                    position: absolute;
-                    top: 0;
-                    right: 0;
-                    bottom: 0;
-                    left: 0;
-                    display: flex;
-                    flex-direction: column-reverse;
-                    justify-content: space-between;
-                    /* Should be higher than the the video. */
-                    z-index: 111;
-                };
-                `,
-                `
-                .take-picture-video-element {
-                    position: absolute;
-                    /* Should be higher than the z-index of '.layout-atlas .region-sidebar' so it sits on top of the page. */
-                    z-index: 110;
-                    top: 0;
-                    left: 0;
-                    right: 0;
-                    bottom: 0;
-                    object-fit: cover;
-                    width: 100%;
-                    height: 100%;
-                    background-color: black;
-                };
-                `,
-                `
-                .take-picture-action-control-wrapper {
-                    display: flex;
-                    justify-content: center;
-                    flex-direction: row;
-                    align-items: center;
-                    /* should be higher than the video. */
-                    z-index: 111;
-                    margin-bottom: 74px;
-                };
-                `,
-                `
-                .take-picture-action-switch-control-wrapper {
-                    display: flex;
-                    justify-content: space-between;
-                    flex-direction: row;
-                    align-items: center;
-                    /* should be higher than the video. */
-                    z-index: 111;
-                    margin-bottom: 74px;
-                };
-                `,
-                `
-                .take-picture-close-control-wrapper {
-                    display: flex;
-                    justify-content: flex-start;
-                    flex-direction: column;
-                    align-items: flex-start;
-                    /* should be higher than the video. */
-                    z-index: 111;
-                };
-                `,
-                `
-                .take-picture-action-control {
-                    background-color: transparent;
-                    border-style: none;
-                    padding: 0;
-                };
-                `,
-                `
-                .take-picture-action-spacing {
-                    flex: 1;
-                    display: flex;
-                    justify-content: center;
-                    align-items: center;
-                };
-                `,
-                `
-                .take-picture-switch-spacing {
-                    display: flex;
-                    flex: 1;
-                    justify-content: flex-end;
-                    align-items: center;
-                };
-                `,
-                `
-                .take-picture-spacing-div {
-                    flex: 1;
-                };
-                `,
-                `
-                .take-picture-action-control-inner {
-                    border-radius: 50%;
-                    background-color: white;
-                    border: 1px solid black;
-                    width: 58px;
-                    height: 58px;
-                };
-                `,
-                `
-                .take-picture-button-wrapper {
-                    display: flex;
-                    flex-direction: row;
-                    justify-content: space-between;
-                    z-index: 111;
-                };
-                `,
-                `
-                .take-picture-save-button {
-                    color: white;
-                    background-color: #264AE5;
-                    width: 100%;
-                    border-radius: 4px;
-                    height: 40px;
-                    font-size: 14px;
-                    line-height: 20px;
-                    text-align: center;
-                    border-style: none;
-                };
-                `,
-                `
-                .take-picture-switch-control {
-                    background-color: transparent;
-                    border-style: none;
-                    padding: 0;
-                    margin-right: 22.33px;
-                };
-                `,
-                `
-                .take-picture-close-control {
-                    margin: 30px 0 0 30px;
-                    border-style: none;
-                    padding: 0;
-                    background-color: transparent;
-                };
-                `,
-                `
-                .take-picture-save-control {
-                    margin: 30px 30px 0 0;
-                    border-style: none;
-                    padding: 0;
-                    background-color: transparent;
-                };
-                `,
-                `
-                .take-picture-confirm-wrapper {
-                    position: absolute;
-                    top: 0;
-                    right: 0;
-                    bottom: 0;
-                    left: 0;
-                    width: 100%;
-                    height: 100%;
-                    background-color: white;
-                    /* should be higher than the wrapper. */
-                    z-index: 112;
-                    display: flex;
-                    flex-direction: column;
-                    justify-content: space-between;
-                }
-                `,
-                `
-                .take-picture-image {
-                    position: absolute;
-                    /* Should be higher than the z-index of '.layout-atlas .region-sidebar' so it sits on top of the page. */
-                    z-index: 110;
-                    top: 0;
-                    left: 0;
-                    right: 0;
-                    bottom: 0;
-                    object-fit: cover;
-                    width: 100%;
-                    height: 100%;
-                    background-color: black;
-                }
-                `,
-                `
-                /* Overwrite 'atlas_core/web/core/_legacy/_mxui.scss' for this particular widget because otherwise
-                 iOS Safari will in certain cases put the top and/or bottom bar on top of the overlay of this widget. */
-                 
-                .mx-scrollcontainer-wrapper:not(.mx-scrollcontainer-nested) {
-                    -webkit-overflow-scrolling: auto;
-                }
-                `
-            ];
-        }
-        function createStyleElements(styles) {
-            const styleElements = [];
-            for (const style of styles) {
-                const styleElement = document.createElement("style");
-                styleElement.appendChild(document.createTextNode(style));
-                styleElements.push(styleElement);
-            }
-            return styleElements;
-        }
         function createFirstScreenElements() {
             const wrapper = document.createElement("div");
             wrapper.setAttribute("role", "dialog");
@@ -454,9 +252,6 @@ export async function TakePicture(picture, showConfirmationScreen, pictureQualit
         function closeControlHandler() {
             stopCamera();
             document.body.removeChild(wrapper);
-            for (const styleElement of styleElements) {
-                document.head.removeChild(styleElement);
-            }
         }
         async function startCamera(facingMode) {
             var _a;
diff --git a/themesource/webactions/web/_take-picture.scss b/themesource/webactions/web/_take-picture.scss
new file mode 100644
index 0000000..8203f9c
--- /dev/null
+++ b/themesource/webactions/web/_take-picture.scss
@@ -0,0 +1,153 @@
+/* ==========================================================================
+  Take picture styles
+========================================================================== */
+
+.take-picture-wrapper {
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    flex-direction: column-reverse;
+    justify-content: space-between;
+    /* Should be higher than the the video. */
+    z-index: 111;
+}
+.take-picture-video-element {
+    position: absolute;
+    /* Should be higher than the z-index of '.layout-atlas .region-sidebar' so it sits on top of the page. */
+    z-index: 110;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+    background-color: black;
+}
+.take-picture-action-control-wrapper {
+    display: flex;
+    justify-content: center;
+    flex-direction: row;
+    align-items: center;
+    /* should be higher than the video. */
+    z-index: 111;
+    margin-bottom: 74px;
+}
+.take-picture-action-switch-control-wrapper {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row;
+    align-items: center;
+    /* should be higher than the video. */
+    z-index: 111;
+    margin-bottom: 74px;
+}
+.take-picture-close-control-wrapper {
+    display: flex;
+    justify-content: flex-start;
+    flex-direction: column;
+    align-items: flex-start;
+    /* should be higher than the video. */
+    z-index: 111;
+}
+.take-picture-action-control {
+    background-color: transparent;
+    border-style: none;
+    padding: 0;
+}
+.take-picture-action-spacing {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.take-picture-switch-spacing {
+    display: flex;
+    flex: 1;
+    justify-content: flex-end;
+    align-items: center;
+}
+.take-picture-spacing-div {
+    flex: 1;
+}
+.take-picture-action-control-inner {
+    border-radius: 50%;
+    background-color: white;
+    border: 1px solid black;
+    width: 58px;
+    height: 58px;
+}
+.take-picture-button-wrapper {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    z-index: 111;
+}
+.take-picture-save-button {
+    color: white;
+    background-color: #264AE5;
+    width: 100%;
+    border-radius: 4px;
+    height: 40px;
+    font-size: 14px;
+    line-height: 20px;
+    text-align: center;
+    border-style: none;
+}
+.take-picture-switch-control {
+    background-color: transparent;
+    border-style: none;
+    padding: 0;
+    margin-right: 22.33px;
+}
+.take-picture-close-control {
+    margin: 30px 0 0 30px;
+    border-style: none;
+    padding: 0;
+    background-color: transparent;
+}
+.take-picture-save-control {
+    margin: 30px 30px 0 0;
+    border-style: none;
+    padding: 0;
+    background-color: transparent;
+}
+.take-picture-confirm-wrapper {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: white;
+    /* should be higher than the wrapper. */
+    z-index: 112;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+.take-picture-image {
+    position: absolute;
+    /* Should be higher than the z-index of '.layout-atlas .region-sidebar' so it sits on top of the page. */
+    z-index: 110;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+    background-color: black;
+}
+/* Overwrite 'atlas_core/web/core/_legacy/_mxui.scss' for this particular widget because otherwise
+    iOS Safari will in certain cases put the top and/or bottom bar on top of the overlay of this widget. */
+    
+.mx-scrollcontainer-wrapper:not(.mx-scrollcontainer-nested) {
+    -webkit-overflow-scrolling: auto;
+}
diff --git a/themesource/webactions/web/main.scss b/themesource/webactions/web/main.scss
index 122370f..ad1ac28 100644
--- a/themesource/webactions/web/main.scss
+++ b/themesource/webactions/web/main.scss
@@ -1,2 +1,3 @@
-@import '../../../theme/web/custom-variables';
+@import "../../../theme/web/custom-variables";
+@import "take-picture";