.form-grid
{
    position:relative;
    display:grid;
    gap:1em;
    grid-template-columns:auto auto;
    justify-content:center;
    justify-items:center;
    align-content:center;
    margin:0 auto;
}

.login
{
    grid-column:2;
    grid-row:1 / span 2;

    height:7em;
    width:3em;
    padding:1em;
    font-size:1em;

    border:0;
    border-radius:1em;
    
    cursor:pointer;

    background-color:var(--blue);
    background-image:url('../img/lock.svg');
    background-repeat:no-repeat;
    background-position:center;
    background-size:1.2em;
    box-shadow:0px 4px 5px -5px rgba(0,0,0,0.2);
}

.login-reset
{
    grid-column:2;
    grid-row:1 / span 3;

    height:11em;
    width:3em;
    padding:1em;
    font-size:1em;

    border:0;
    border-radius:1em;

    background:var(--blue);
    cursor:pointer;
}

.login:hover, .login-reset:hover
{
    background-color:var(--blue-dark);
}

.keep
{
    cursor:pointer;
}

.center
{
    grid-column:1 / span 2;
    margin-top:0.8rem;
    text-align:center;
}

.announcement
{
    margin:0 auto;
    font-size:1.2em;
    font-weight:bold;
}

.bottom-grid
{
    grid-column:1 / span 2;

    display:grid;
    gap:1em;
    grid-template-columns:auto auto;
    width:100%;

    font-size:1em;
}

.language-select
{
    display:grid;
    gap:1rem;
    margin:2rem auto;
    justify-items:center;
}

.language-flag
{
    width:2rem;
}

/* customer_invite.php does not fit the login layout. .form-grid is two columns with the
   button parked in the second one across the rows - that works for the two fields of the
   login and the three of the password reset. The invite has four fields, a checkbox and a
   button, so the tall narrow button ends up floating next to a broken column.
   One column here, as wide as the fields themselves, and a button that looks like one. */
.invite-grid
{
    display:grid;
    gap:0.8em;
    width:19rem;
    max-width:100%;
    margin:0 auto;
}

/* input.pass is 17rem wide plus 1rem padding on each side, and its height:1rem is meant the
   content-box way - the padding comes ON TOP, so the field is 3rem tall.
   Here it has to follow the column instead of a fixed width, which needs border-box - and that
   changes what height means: the padding now counts INTO it, and 1rem was the whole field.
   So the height is restated as the 3rem it renders as everywhere else. */
.invite-grid input.pass
{
    width:100%;
    box-sizing:border-box;
    height:3rem;
}

.invite-button
{
    height:3em;
    padding:0 1em;
    font-size:1em;

    border:0;
    border-radius:1em;
    cursor:pointer;

    color:var(--font);
    background-color:var(--blue);
    box-shadow:0px 4px 5px -5px rgba(0,0,0,0.2);
}

.invite-button:hover
{
    background-color:var(--blue-dark);
}

.invite-tac
{
    text-align:left;
    font-size:0.9rem;
    line-height:1.4;
}

/* the password rule is a hint, not an error - red said "something went wrong" before
   anybody had typed a single character */
.invite-hint
{
    font-size:0.8rem;
    color:var(--grey-dark);
    text-align:center;
}

@media screen and (max-width:1000px)
{
    .form-grid
    {
        grid-template-columns:auto;
    }

    .login
    {
        grid-column:1;
        grid-row:3;

        padding:0;
        width:19rem;
        height:3em;
        font-size:1em;
    }

    .login-reset
    {
        grid-column:1;
        grid-row:4;

        width:19em;
        height:3em;
    }

    .bottom-grid
    {
        grid-column:1;
    }

    .announcement
    {
        grid-column:1;
    }

    .center
    {
        grid-column:1;
    }
}