.login-container {
                background-color: #fff;
                padding: 20px;
                border-radius: 8px;
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
                width: 300px;
            }
            
            .login-container h1 {
                text-align: center;
                margin-bottom: 20px;
                color: #333;
            }
            
            .login-container hr {
                border: 1px solid #ddd;
                margin-bottom: 20px;
            }
            
            .form-control {
                width: 100%;
                padding: 10px;
                margin-bottom: 15px;
                border: 1px solid #ccc;
                border-radius: 4px;
                box-sizing: border-box;
            }
            
            .login-button {
                background-color: #007bff;
                color: white;
                padding: 10px 15px;
                border: none;
                border-radius: 4px;
                cursor: pointer;
                width: 100%;
                font-size: 16px;
            }
            
            .login-button:hover {
                background-color: #0056b3;
            }
            
            .theme-btn-s3 {
                /* Remove default styling that might be interfering */
                appearance: none;
                -webkit-appearance: none;
                -moz-appearance: none;
                background-color: #007bff; /* Example theme color */
                color: white;
                border: none;
            }
            
            .login-button.loading {
                position: relative;
                pointer-events: none; /* Disable button clicks during loading */
            }
            
            .login-button.loading::after {
                content: '';
                position: absolute;
                top: 50%;
                left: 50%;
                width: 26px;
                height: 26px;
                margin-top: -8px;
                margin-left: -8px;
                border-radius: 50%;
                border: 3px solid #fff;
                border-color: #fff transparent #fff transparent;
                animation: spin 1.4s linear infinite;
            }
            
            @keyframes spin {
                0% { transform: rotate(0deg); }
                100% { transform: rotate(360deg); }
            }
            
            /* Modal styles */
            .modal {
                display: none; /* Hidden by default */
                position: fixed; /* Stay in place */
                z-index: 1; /* Sit on top */
                left: 0;
                top: 0;
                width: 100%; /* Full width */
                height: 100%; /* Full height */
                overflow: auto; /* Enable scroll if needed */
                background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
            }
            
            /* Modal Content/Box */
            .modal-content {
                background-color: #fefefe;
                margin: 15% auto; /* 15% from the top and centered */
                padding: 20px;
                border: 1px solid #888;
                width: 300px; /* Could be more or less, depending on screen size */
                border-radius: 8px;
                box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
                margin: 15% 0 15% auto; /* Adjusted to move to the right */
                right: 0; /* Align to the right */
                left: auto; /* Override default left margin if any */
            }
            
            /* The Close Button */
            .close-button {
                color: #aaa;
                float: right;
                font-size: 28px;
                font-weight: bold;
            }
            
            .close-button:hover,
            .close-button:focus {
                color: black;
                text-decoration: none;
                cursor: pointer;
            }
            
            /* Button to open the modal */
           
            
            /* Responsive adjustments */
            @media (max-width: 768px) {
                .login-container {
                    width: 90%; /* Adjust login container width for smaller screens */
                    max-width: 400px; /* Optionally set a max width */
                    padding: 15px;
                }
            
                .modal-content {
                    margin: 10% auto; /* Adjust modal margin for smaller screens */
                    width: 90%; /* Make modal content wider on smaller screens */
                    max-width: 400px; /* Optionally set a max width for modal content */
                    padding: 15px;
                    margin: 10% 0 10% auto; /* Adjusted for smaller screens */
                }
            }
            
            @media (max-width: 480px) {
                .login-container {
                    width: 95%;
                    padding: 10px;
                }
                .modal-content {
                    width: 95%;
                    margin: 10% auto;
                    padding: 10px;
                    margin: 10% 0 10% auto; /* Adjusted for even smaller screens */
                }
            
                .form-control,
                .login-button,
                #login-modal-btn {
                    padding: 8px;
                    font-size: 14px;
                }
            
                .login-container h1 {
                    font-size: 20px;
                    margin-bottom: 15px;
                }
            }