/* Pas custom.css aan */
body, #root {
    background-image: url('/background.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    background-color: transparent !important;
}

/* Transparanter inlogblokje voor het gewenste effect */
.MuiPaper-root {
    background-color: rgba(30, 30, 30, 0.8) !important;
    backdrop-filter: blur(8px);
    border: none !important;
}

/* Het inlogblok voorzien van een witte rand, afgeronde hoeken en opvulling */
.MuiContainer-maxWidthXs {
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    background-color: rgba(192, 192, 192, 0.1) !important;
    backdrop-filter: blur(8px) !important;
    border-radius: 12px !important;
    padding: 24px !important;
}

/* Blauwe rand van actief invoerveld vervangen door wit */
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
    border-color: #ffffff !important;
}

/* Blauwe tekst van actieve labels (Username *, Password *) naar wit */
.MuiFormLabel-root.Mui-focused {
    color: #ffffff !important;
}

/* Sign In knop: grijs met witte tekst */
#sign-in-button {
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    background-color: rgba(255, 255, 255, 0.1) !important; /* #6e6e6e !important;*/
    color: #fefefe !important;
}

#sign-in-button:hover {
    background-color: rgba(16, 16, 16, 0.1) !important; /*#6e6e6e !important;*/
}

/* Checkbox (Remember me) op wit zetten bij aanvinken */
.MuiCheckbox-colorPrimary.Mui-checked {
    color: #ffffff !important;
}

/* Links (zoals "Reset password?" en "Powered by Authelia") naar lichtgrijs/wit */
#reset-password-button,
.MuiLink-root {
    color: #cccccc !important;
}

#reset-password-button:hover,
.MuiLink-root:hover {
    color: #ffffff !important;
}

/* Logo opschalen en verhoudingen netjes houden */
.MuiContainer-maxWidthXs img[alt="Logo"] {
    width: 80px !important;
    height: auto !important;
}

/* "Sign in" header verbergen en witruimte opruimen */
.MuiContainer-maxWidthXs h5 {
    display: none !important;
}