
<style type="text/css">
    html, body
    {
        height: 100%;
        margin: 0;
        padding: 0;
    }

    body, p, td
    {
        font-family: "Raleway", sans-serif;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;
    }

    html
    {
        background: url("/images/bg1.jpg") no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        overflow: hidden;
    }

    .login-container
    {
        position: absolute;
        left: 20px;
        top: 20px;
        width: 50%;
        min-width: 800px;
        bottom: 20px;
        border-radius: 24px;
        background-color: rgba(255, 255, 255, 0.8);
    }

    @media (max-width: 1000px) {
        .login-container {
            width: 80%;
            min-width: unset;
            max-width: 80%;
        }
    }

    .logo-container
    {
        position: absolute;
        top: 0%;
        bottom: 50%;
        left: 50%;
        width: 52%;
        transform: translate(-50%, 0%);
        display: flex;
        flex-direction: column;
        justify-content: center; /* Horizontaal centreren */
        align-items: center; /* Verticaal centreren */
    }

    #logo
    {
        width: 100%;
        max-height: 70%;
        aspect-ratio: 325 / 225; /* Verhouding breedte : hoogte */
        object-fit: contain; /* Zorg dat de afbeelding mooi gevuld wordt */
        display: block; /* Verwijdert ongewenste witruimte rond de afbeelding */
    }

    .form-container
    {
        position: absolute;
        top: 46%;
        width: 52%;
        left: 50%;
        transform: translate(-50%, 0%);
        display: flex;
        flex-direction: column;
        overflow-y: auto;
    }

    .form-container input,
    {
        margin-bottom: calc(50%);
    }

    input[type="text"],
    input[type="password"]
    {
        width: 100%;
        padding: 2%;
        border: 2px solid #abcaea; /* Helderwitte rand bij focus */
        border-radius: 3% / 30%; /* Afgeronde hoeken */
        background-color: #abcaea; /* Transparante achtergrond */
        color: black; /* Witte tekstkleur */
        font-size: 16px;
        outline: none; /* Geen standaard focusrand */
        transition: border 0.3s ease; /* Animatie voor focus */
        box-sizing: border-box;
    }

    input[type="text"]::placeholder,
    input[type="password"]::placeholder
    {
        color: rgba(255, 255, 255, 0.7); /* Semi-transparante placeholder tekst */
        font-style: italic; /* Placeholder tekst cursief */
    }

    input[type="text"]:focus,
    input[type="password"]:focus
    {
        border: 2px solid white; /* Helderwitte rand bij focus */
        color: black;
    }

    input[type="text"]:focus::placeholder,
    input[type="password"]:focus::placeholder
    {
        color: transparent; /* Placeholder verdwijnt bij focus */
    }

    button
    {
        cursor: pointer;
    }

    .submit-btn
    {
        width: 100%;
        padding: 2%;
        border: 2px solid #005dbe; /* Helderwitte rand bij focus */
        border-radius: 3% / 30%; /* Afgeronde hoeken */
        background-color: #005dbe; /* Transparante achtergrond */
        color: white; /* Witte tekstkleur */
        font-size: 16px;
        outline: none; /* Geen standaard focusrand */
        transition: border 0.3s ease; /* Animatie voor focus */
    }

    .submit-btn:hover
    {
        border: 2px solid rgba(0, 93, 190, 0.5); /* Helderwitte rand bij focus */
    }

    .hpfp
    {
        width: 100%;
    }

    .hpfp a
    {
        text-decoration: none;
        color: #004dae;
    }

    .hpfp a:hover
    {
        text-decoration: underline;
        color: #106dce;
    }

    #btnHomepage
    {
    }

    #btnPasswordReset
    {
        position: absolute;
        right: 0;
    }

    .divError
    {
        color: #c00;
    }
</style>
    