/* Inlogformulier op de homepage (gravityformsuserregistration-login.php) */

.inlogformulier { position: relative; margin-bottom: 20px; padding-bottom: 20px; }

/* Gebruikersnaam en wachtwoord naast elkaar */
.inlogformulier .inlog-velden { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 10px; }
.inlogformulier .inlog-veld label { display: block; margin: 0; padding-top: 7px; color: #fff; }
.inlogformulier .inlog-invoer { position: relative; padding-top: 7px; }
.inlogformulier .inlog-invoer input { display: block; width: 100%; margin: 0; padding: 10px 15px !important; }

.inlogformulier .inlog-knop { display: block; margin: 17px 0 0; padding: 10px 40px; border: 2px solid #fff; }
.inlogformulier .inlog-knop:disabled { opacity: 0.6; cursor: progress; }

/* Melding boven het formulier */
.inlogformulier .inlog-melding { display: none; margin: 0 0 5px; padding: 10px; color: #333; border-radius: 3px; }
.inlogformulier .inlog-melding-fout { display: block; background-color: #FFEBE8; border: 1px solid #C00; }

/* Knop 'toon wachtwoord' in het wachtwoordveld (het oogje is een dashicon) */
.inlogformulier .toon-wachtwoord { position: absolute; top: 7px; bottom: 0; right: 30px; display: flex; align-items: center; width: 20px; min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: inherit; font: inherit; cursor: pointer; }
.inlogformulier .toon-wachtwoord::before { content: "\f530"; font-family: dashicons; line-height: 1; }
.inlogformulier .toon-wachtwoord.zichtbaar::before { content: "\f177"; }

@media (max-width: 1249px) {
    .inlogformulier { padding-bottom: 60px; }
}

/* Smalle schermen: velden onder elkaar */
@media screen and (max-width: 29.9999em) {
    .inlogformulier .inlog-velden { display: block; }
    .inlogformulier .inlog-veld { padding-bottom: 20px; }
    .inlogformulier .inlog-knop { margin-top: 7px; }
}