new chat window, bugfixes, component update

web/css/buttons.css

@@ -308,6 +308,47 @@ input[type="range"]::-moz-range-thumb {
 
 /*  End Toggle Switch  */
 
+.switch {
+    user-select: none;
+}
+.switch input[type=checkbox] {
+    height: 0;
+    width: 0;
+    visibility: hidden;
+}
+.switch input[type=checkbox]:checked + label {
+    background: var(--color-4);
+}
+.switch input[type=checkbox]:checked + label::after {
+    left: calc(100% - 4px);
+    transform: translateX(-100%);
+    background-color: var(--color-1);
+}
+.switch label {
+    cursor: pointer;
+    min-width: 64px;
+    max-width: 64px;
+    height: 38px;
+    background-color: var(--color-1);
+    transition: 0.35s background-color;
+    display: block;
+    border-radius: 24px;
+    margin: 0;
+    position: relative;
+    border: 2px solid var(--color-3);
+}
+.switch label::after {
+    content: "";
+    position: absolute;
+    top: 4px;
+    left: 4px;
+    width: 26px;
+    height: 26px;
+    background: var(--color-5);
+    border-radius: 16px;
+    transition: 0.3s;
+}
+
 select {
     height: 42px;
     width: 150px;

web/css/helpers.css

@@ -119,6 +119,10 @@
     align-items: center;
 }
 
+.flex-column {
+    flex-direction: column;
+}
+
 .hover-brighten {
     transition: 0.3s ease background-color;
 }
@@ -302,6 +306,10 @@ table .input-text {
     .flex-phone-column {
         flex-flow: column;
     }
+    .flex-phone-center {
+        align-items: center;
+        justify-content: center;
+    }
     .hide-phone {
         display: none;
     }

web/css/modal.css

@@ -86,10 +86,6 @@ body.modal-open {
     background-color: var(--color-main);
 }
 
-.modal-panel .flex-container {
-    align-items: stretch;
-}
-
 .modal-panel h1 {
     font-size: 42px;
 }
@@ -124,7 +120,6 @@ body.modal-open {
 
 .modal-panel label {
     width: 200px;
-    margin: auto;
 }
 
 .modal-panel-chat {
@@ -147,6 +142,37 @@ body.modal-open {
     border-radius: 15px 15px 0px 0px;
 }
 
+/* Popup Windows */
+.popup-window {
+    width: 500px;
+    background: var(--color-1-transparent);
+    backdrop-filter: blur(5px);
+    position: absolute !important;
+    border-radius: 15px;
+    display: none;
+    overflow: hidden;
+    border: 3px solid var(--color-1);
+    z-index: 100;
+  }
+
+  .popup-header {
+    padding: 8px;
+    cursor: move;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .popup-close {
+    background: none;
+    border: none;
+    color: var(--color-3);
+    font-size: 16px;
+    cursor: pointer;
+    max-width: 24px;
+    margin-left: auto;
+  }
+
 @media only screen and (max-width: 768px) {
     .modal-content {
         min-width: 90% !important;
@@ -165,11 +191,9 @@ body.modal-open {
     .modal-panel {
         width: 100%;
     }
-    .modal-panel-chat {
-        height: 510px;
-    }
-    #chat-chatbox {
-        height: 333px !important;
+
+    .popup-window {
+        width: 90%;
     }
 }
 

web/css/panels.css

@@ -69,6 +69,9 @@
     .panel-75 {
         width: 90%;
     }
+    .no-bg-phone {
+        background-color: transparent;
+    }
     .panel-33 h2 {
         padding: 20px;
         padding-top: 5px;
@@ -81,7 +84,6 @@
         margin: auto;
         width: 90%;
         margin-bottom: 20px;
-        background-color: transparent;
     }
     *[class^="panel-"]:not(.no-bg):not(.no-filter):not(#ps-container),
     .panel-100.w-100::before {