body {
     font-family: Arial, sans-serif;
     background-color: #D4F0D4;
    /* Light green for body background */
     color: #000;
     display: flex;
     flex-direction: column;
     align-items: center;
     padding: 20px;
}
 .h2-loader {
     font-size: 2em;
     font-weight: bold;
     color: #2E8B57;
     position: absolute;
     top: 20px;
     left: 50%;
     transform: translateX(-50%);
     z-index: 9999;
}
 .background {
     position: fixed;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     background: #FAF1E6;
     z-index: 9998;
     transition: opacity 1s ease-out;
}
 .loader {
     display: flex;
     justify-content: center;
     align-items: center;
     position: fixed;
     width: 164px;
     height: 70px;
    /* Adjusted to fit the animation */
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     z-index: 9999;
     transition: opacity 1s ease-out;
}
 .loader div {
     position: absolute;
     width: 10px;
     height: 30px;
     background-color: #99BC85;
     border-radius: 5px;
     animation: loader_51899 1.5s ease-in-out infinite;
     z-index: 9999;
}
 .loader .bar1 {
     left: 0px;
     animation-delay: 0s;
     z-index: 9999;
}
 .loader .bar2 {
     left: 20px;
     animation-delay: 0.15s;
     z-index: 9999;
}
 .loader .bar3 {
     left: 40px;
     animation-delay: 0.3s;
     z-index: 9999;
}
 .loader .bar4 {
     left: 60px;
     animation-delay: 0.45s;
     z-index: 9999;
}
 .loader .bar5 {
     left: 80px;
     animation-delay: 0.6s;
     z-index: 9999;
}
 .loader .bar6 {
     left: 100px;
     animation-delay: 0.75s;
     z-index: 9999;
}
 .loader .bar7 {
     left: 120px;
     animation-delay: 0.9s;
     z-index: 9999;
}
 .loader .bar8 {
     left: 140px;
     animation-delay: 1.05s;
     z-index: 9999;
}
 .loader .bar9 {
     left: 160px;
     animation-delay: 1.2s;
     z-index: 9999;
}
 @keyframes loader_51899 {
     0% {
         height: 30px;
         transform: translate(0, 0);
    }
     50% {
         height: 70px;
         transform: translate(0, 35px);
    }
     100% {
         height: 30px;
         transform: translate(0, 0);
    }
}
 .popup {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: #E4EFE7;
    /* Semi-transparent main green for popup overlay */
     display: flex;
     justify-content: center;
     align-items: center;
     z-index: 9000;
}
 .popup div {
     width: 100%;
     max-width: 400px;
     padding: 40px;
     border-radius: 12px;
     background-color: #E4EFE7;
    /* Light green for popup background */
     border: 2px solid #2E8B57;
    /* Darker green for border */
     box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
     color: #000;
}
 .popup input, .popup button {
     width: 90%;
     padding: 10px;
     margin-top: 10px;
     border-radius: 12px;
     border: 2px solid #2E8B57;
    /* Darker green for input/button borders */
     font-size: 16px;
     background-color: #FDFAF6;
    /* Light green for input/button background */
     color: #000;
}
 button {
     background-color: FDFAF6;
    /* Main green for button background */
     height: 40px;
     width: 75px;
     color: #fff;
    /* White text for contrast */
     cursor: pointer;
     border-radius: 12px;
     border: 2px solid #2E8B57;
    /* Darker green for button border */
     transition: background-color 0.2s ease;
}
 button:hover {
     background-color: #24964F;
    /* Hover green for button hover */
}
 #chat {
     width: 60%;
     height: 300px;
     overflow-y: auto;
     background-color: #ffffff;
    /* Light green for chat background */
     padding: 10px;
     border-radius: 12px;
     border: 2px solid #2E8B57;
    /* Darker green for chat border */
     color: #000;
     margin-bottom: 10px;
}
 .defaultInput {
     width: 60%;
     height: 40px;
     border-radius: 12px;
     padding: 0 12px;
     border: 2px solid #2E8B57;
    /* Darker green for input border */
     font-size: 16px;
     background-color: #D4F0D4;
    /* Light green for input background */
     color: #000;
     margin: 10px 0;
}
 .bottomspacing {
     margin-bottom: 10px;
}
 .hidden {
     display: none;
}
 form {
     display: flex;
     align-items: center;
     gap: 10px;
}
 #roomForm input {
     display: flex;
     gap: 10px;
     align-items: center;
}
 #roomForm button {
     background-color: #2CA85E;
    /* Main green for room form button */
     height: 40px;
     width: 75px;
     color: #fff;
    /* White text for contrast */
     cursor: pointer;
     border-radius: 12px;
     border: 2px solid #2E8B57;
    /* Darker green for button border */
     transition: background-color 0.2s ease;
}
 #roomForm button:hover {
     background-color: #24964F;
}
 .chatbutton {
     background-color: #2CA85E;
    /* Main green for room form button */
     height: 40px;
     width: 75px;
     color: #fff;
    /* White text for contrast */
     cursor: pointer;
     border-radius: 12px;
     border: 2px solid #2E8B57;
    /* Darker green for button border */
     transition: background-color 0.2s ease;
}
 .chatbutton:hover {
     background-color: #24964F;
}
 .top-spacing {
     margin-top: 10px;
}