/* <style> */
        /* Estilos básicos e centralização */
    body {
        font-family: Arial, sans-serif;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        margin: 0;
        background-color: rgba(164, 241, 248, 0.156);
    }

    .login-container {
        width: 100%;
        max-width: 300px;
        padding: 20px;
        border: 1px solid #ccc;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        text-align: center;
        background-color: #fff;
    }

    .login-container h2 {
        margin-top: 0;
        font-size: 1.5em;
    }

    input[type="text"],
    input[type="password"] {
        width: 100%;
        padding: 12px;
        margin: 10px 0;
        border: 1px solid #ccc;
        border-radius: 5px;
        box-sizing: border-box;
        font-size: 1em;
    }

    button {
        width: 100%;
        padding: 12px;
        background-color: #28a745;
        color: #fff;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 1em;
        margin-top: 10px;
        transition: background-color 0.3s;
    }

    button:hover {
        background-color: #218838;
    }

    .message {
        margin-top: 10px;
        font-weight: bold;
        font-size: 0.9em;
    }

    /* Media Queries para Responsividade */

    /* Dispositivos móveis em modo retrato (smartphones menores) */
    @media (max-width: 480px) {
        .login-container {
            padding: 15px;
            max-width: 90%;
        }

        input[type="text"],
        input[type="password"] {
            padding: 10px;
            font-size: 0.9em;
        }

        button {
            padding: 10px;
            font-size: 0.9em;
        }

        .login-container h2 {
            font-size: 1.3em;
        }
    }

    /* Tablets e dispositivos maiores */
    @media (min-width: 481px) and (max-width: 768px) {
        .login-container {
            max-width: 400px;
        }
    }

    button.loading {
    background-color: #1826e9; /* Cor diferente para indicar o estado de carregamento */
    cursor: not-allowed; /* Cursor de espera */
    position: relative;
    }

    button.loading::after {
        content: "";
        width: 16px;
        height: 16px;
        border: 2px solid #fff;
        border-top: 2px solid #218838;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        from {
            transform: translate(-50%, -50%) rotate(0deg);
        }
        to {
            transform: translate(-50%, -50%) rotate(360deg);
        }
    }

    /* </style> */