The css is working again (The responsive will be optimized on a later date)

app/styles/Login.css

@@ -1,3 +1,13 @@
+/* Container for the login layout */
+.login-container {
+    display: grid;
+    grid-template-columns: 1fr 3fr; /* 1fr for sidebar, 3fr for main content */
+    grid-auto-flow: column;
+    overflow-x: hidden;
+    height: 100%; /* Ensure it takes full height */
+}
+
+/* Button for login action */
 .login-button {
     position: absolute;
     top: 5px;
@@ -43,6 +53,7 @@
     width: 300px;
     text-align: center;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+    position: relative; /* For positioning the close button */
 }
 
 /* Input styles */
@@ -61,20 +72,28 @@
     outline: none; /* Remove default outline */
 }
 
-/* Close button */
+/* Close button styles */
 .close-popup {
     background: var(--close-button-color); /* Use variable for close button color */
-    color: var(--text-color);
+    color: white; /* Use white for text color */
     border: none;
     border-radius: 5px;
     padding: 5px 10px;
     cursor: pointer;
-    margin-top: 20px;
+    position: absolute; /* Position the button absolutely */
+    top: 10px; /* Distance from the top */
+    right: 10px; /* Distance from the right */
+    transition: background 0.3s;
 }
 
+.close-popup:hover {
+    background: darkred; /* Optional hover effect */
+}
+
+/* Log In button styles */
 .log-into-account {
-    background: var(--login-button-color); /* Use variable for login button color */
-    color: var(--text-color);
+    background: green; /* Use variable for login button color */
+    color: white;
     border: none;
     border-radius: 5px;
     padding: 5px 10px;
@@ -82,7 +101,7 @@
     margin-top: 20px;
 }
 
-/* Footer section */
+/* Footer section for popups */
 .popup-footer {
     margin-top: 15px;
 }
@@ -110,6 +129,7 @@
     text-decoration: underline;
 }
 
+/* Paragraph styles within popup */
 .popup-content p {
     color: var(--popup-text-color); /* Use variable for paragraph text color */
     margin: 10px;

app/styles/Settings.css

@@ -97,23 +97,23 @@
 
 /* Close button positioning */
 .close-popup {
-    background-color: var(--close-button-color);
-    color: var(--user-message-text-color);
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    padding: 10px 20px;
+    background: var(--close-button-color); /* Use variable for close button color */
+    color: white; /* Use white for text color */
     border: none;
     border-radius: 5px;
+    padding: 5px 10px;
     cursor: pointer;
-    position: absolute; /* Position absolute to top right */
-    top: 20px; /* Distance from top */
-    right: 20px; /* Distance from right */
+    position: absolute; /* Position the button absolutely */
+    top: 10px; /* Distance from the top */
+    right: 10px; /* Distance from the right */
     transition: background 0.3s;
 }
 
 .close-popup:hover {
-    background-color: var(--close-button-hover-color); /* Darker red on hover */
+    background: darkred; /* Optional hover effect */
 }
 
+
 /* Additional styles for inputs and options */
 .settings-option {
     margin-bottom: 20px; /* Adds space between each setting option */

app/styles/container.css

@@ -14,6 +14,8 @@
     transition: width 0.3s ease, opacity 0.3s ease, visibility 0.3s ease; /* Smooth transitions for all properties */
     background-color: var(--left-panel-background-color); /* Use variable for background color */
     border-radius: 0 1em 0 0;
+    margin-left: 0;
+    padding-right: 1em;
 }
 
 .left-panel.hidden {

app/styles/global.css

@@ -45,3 +45,7 @@ input {
 input:hover {
     border-color: var(--button-hover-background-color);
 }
+
+select{
+    background-color: var(--input-background-color);
+}

app/styles/history.css

@@ -1,7 +1,7 @@
 .history-background {
     grid-column: 1/2;
     grid-row: 1/2;
-    height: 40vh;
+    height: 45vh;
     overflow: hidden;
     background-color: var(--history-background-color);
     padding: 1em;

app/styles/output.css

@@ -12,8 +12,7 @@
     font-size: 1em;
     overflow-y: auto;
     width: calc(100% - 2em); /* Corrected calculation for width */
-    height: 70vh;
-    margin-bottom: 1vh;
+    height: 75vh;
 }
 
 #conversation {

app/styles/user-ai-messages.css

@@ -15,7 +15,7 @@
     color: var(--text-color);
     border-bottom-right-radius: 0;
     margin-left: auto;
-    text-align: right;
+    text-align: left;
 }
 
 .ai-message {

app/styles/variables.css

@@ -18,6 +18,7 @@
     --left-panel-background-color: #79832e; /* Background color for left panel */
     --conversation-background-color: #79832e; /* Background color for conversation container */
     --doc-background-color: #ffffff; /* Background color for documents */
+    --close-button-color: red;  
     
     /* FAQ Colors */
     --faq-background-color: #474D22; /* Background color for FAQ section */