fixed

public/css/Room.css

@@ -4,6 +4,24 @@
 # Keyframes
 --------------------------------------------------------------*/
 
+
+:root {
+    --primary-red: #e53935;
+    --dark-red: #c62828;
+    --light-red: #ff5252;
+    --accent-red: #ff8a80;
+    --text-dark: #333333;
+    --text-light: #666666;
+    --background: #f9f9f9;
+    --white: #ffffff;
+    --gray-light: #f5f5f5;
+    --gray-medium: #e0e0e0;
+    --shadow: 0 4px 12px rgba(229, 57, 53, 0.15);
+    --shadow-hover: 0 6px 20px rgba(229, 57, 53, 0.25);
+}
+
+
+
 @-webkit-keyframes fadeIn {
     from {
         opacity: 0;
@@ -67,29 +85,34 @@ body {
 --------------------------------------------------------------*/
 
 #loadingDiv {
-    color: #fff;
+    color: var(--text-dark);
     padding: 30px;
     text-align: center;
     border-radius: 10px;
-    background: rgba(0, 0, 0, 0.7);
+    background: var(--white);
+    box-shadow: var(--shadow);
+    border: 1px solid var(--gray-medium);
 }
+
 #loadingDiv h1 {
     padding: 10px;
     font-size: 60px;
-    font-family: 'Montserrat';
-    border-radius: 10px;
-}
-#loadingDiv img {
-    margin-top: 5px;
-    margin-bottom: 10px;
+    font-family: 'IBM Plex Sans';
     border-radius: 10px;
+    color: var(--primary-red);
 }
+
+
+
 #loadingDiv pre {
     padding: 10px;
-    font-family: 'Montserrat';
+    font-family: 'IBM Plex Sans';
     border-radius: 10px;
 }
 
+
+
+
 /*--------------------------------------------------------------
 # Init User
 --------------------------------------------------------------*/
@@ -154,7 +177,7 @@ body {
     width: 100%;
     margin-top: 15px;
     padding: 10px;
-    background-color: var(--select-bg) !important;
+    background-color: red !important;
     color: white;
     border: var(--border);
     border-radius: 5px;
@@ -171,7 +194,8 @@ body {
     font-size: 1.2rem;
     border: var(--border);
     border-radius: 5px;
-    background-color: transparent;
+    background-color: red;
+    color: black !important;
 }
 
 .init-user button:hover {
@@ -404,7 +428,6 @@ body {
 /*--------------------------------------------------------------
 # Bottom buttons
 --------------------------------------------------------------*/
-
 #bottomButtons {
     z-index: 3;
     position: fixed;
@@ -556,7 +579,7 @@ body {
 #mySettings p {
     display: inline-flex;
     margin: auto;
-    color: #fff;
+    color: black;
     padding: 5px;
     background: transparent;
 }
@@ -1060,7 +1083,7 @@ body {
 
 #notificationsModeDiv input[type='text'] {
     width: 100%;
-    color: #fff;
+    color: black;
     padding: 10px;
     margin: 10px 0;
     border: var(--border);
@@ -1374,6 +1397,10 @@ body {
 # swal2
 --------------------------------------------------------------*/
 
+
+.swal2-styled.swal2-confirm{
+    background-color: red !important;
+}
 .swal2-popup {
     /* border: var(--border) !important; */
     /* border: 0.5px solid rgb(255 255 255 / 32%) !important; */
@@ -1389,7 +1416,7 @@ body {
 .swal2-content,
 .swal2-input {
     text-align: center;
-    color: #fff !important;
+    color: black !important;
     background-color: transparent !important;
 }
 .swal2-html-container {