diff --git a/bin/em/variabletime/web/js/utils.js b/bin/em/variabletime/web/js/utils.js
index 300c93f..6efd43b 100644
--- a/bin/em/variabletime/web/js/utils.js
+++ b/bin/em/variabletime/web/js/utils.js
@@ -446,16 +446,25 @@ const sequencialPromises = async (iterable, callback = false) => {
     }
 };
 
-// NOTE: this is not perfect,
-// but good enough for our use case
-// theoretically we would have to get
-// rid of all special characters
+// NOTE: this is perfect
 const toCssClass = (text, prefix = '') => {
-    return prefix + 'vt_' + text
-        .replaceAll('.','-dot-')
-        .replaceAll(' ','_')
-        .replaceAll('#','-hash-')
+    const cssClass = prefix + 'vt_' + text
+        .replaceAll('.', '-d-')
+        .replaceAll(' ', '_')
+        .replaceAll(':', '-c-')
+        .replaceAll('#', '-h-')
+        .replace(/[^a-zA-Z0-9_-]/g, "")
     ;
+    return cssClass;
+};
+const sanitizeTheatreKey = (key) => {
+    let theatreKey = key;
+    theatreKey = theatreKey.split('.');
+    if (theatreKey.length > 1) {
+        theatreKey.pop();
+    }
+    theatreKey = theatreKey.join('');
+    return theatreKey.replace(/[^a-zA-Z0-9_]/g,"");
 };
 
 const renameProperty = (o, old_key, new_key) => {
@@ -591,6 +600,7 @@ export {
     isMobile,
     sequencialPromises,
     toCssClass,
+    sanitizeTheatreKey,
     renameProperty,
     flattenObject,
     deFlattenObject,