/* Modal styles */
       
        .modal {
            display: none;
            position: fixed;
            z-index: 9999 !important;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.6);
            padding-top: 60px;

        }
      
        .modal-content {
            background-color: #fefefe;
            margin: 5% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 60%;
            max-width: 500px;
            border-radius: 12px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
            animation: fadeIn 0.5s;
             z-index: 10000 !important;
        }
       
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }
        .close:hover,
        .close:focus {
            color: #000;
            text-decoration: none;
            cursor: pointer;
        }
        
        .close_msg {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }
        .close_msg:hover,
        .close_msg:focus {
            color: #000;
            text-decoration: none;
            cursor: pointer;
        }
        
         .close_signup {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }
        .close_signup:hover,
        .close_signup:focus {
            color: #000;
            text-decoration: none;
            cursor: pointer;
        }

#loginForm{

    display: flex;
    justify-content: space-between;
    align-items: center;
}

        .form-group button[type = "submit"], input[type="submit"] {
            background: #1554FF !important;
            color: white;
            padding: 12px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;

        }
        .form-group button[type = 'submit'], input[type="submit"]:hover {
            background: #1554FF !important;
        }

        .form-group {
            margin-bottom: 20px;

        }

        #content-button{
          width: 100%;
          display: flex;
        }
        
        
        @keyframes slideLeft {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(-100%); opacity: 0; }
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

.hidden {
    display: none;
}

#loginModal.slide-out {
    animation: slideLeft 0.5s forwards;
}

#signupModal.fade-in {
    display: block;
    animation: fadeIn 0.5s forwards;
}