#login_box
{
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3000;
    border-top-left-radius: calc(10 * var(--margin) );
    border-bottom-left-radius: calc(10 * var(--margin) );
    border-bottom-right-radius: calc(10 * var(--margin) );
    width: 85%;
    background-color: var(--color_blue_lt);
    box-shadow: 3px 3px 10px black;
    border-color: white;
}
    dialog::backdrop
    {
        background-color: rgba(0,0,0, 0.8);
    }
    #login_box *
    {
        display: block;
    }
        #login_box *:not(header)
        {
            padding: calc( 1 * var(--margin) );
        }
        #login_box label
        {
            color: white;
        }
        #login_box input
        {
            font-size: 2rem;
            padding: calc( 2 * var(--margin) );
            width: calc(100% - 15px);
            border-radius: calc( 3 * var(--margin) );
            border: 1px solid var(--color_blue_lt);
        }
        #login_box .button_row
        {
            display: flex;
            justify-content: flex-end;
            margin-top: calc(3 * var(--margin));
        }
            #login_box button
            {
                font-size: 2rem;
                background-color: var(--color_blue);
                padding: calc(1 * var(--margin));
                padding-left: calc(9 * var(--margin));
                padding-right: calc(9 * var(--margin));
                border: 1px solid var(--color_blue_lt);
                border-radius: var(--border-radius);
                color: white;
            }
                #login_box button:hover
                {
                    cursor: pointer;
                    background-color: var(--color_blue_lt);
                }

#login_box .error
{
    outline: 2px dashed red;
    outline-offset: 3px;
}

.shake_me
{
    /* Start the shake animation and make the animation last for 0.5 seconds */
    animation: shake 0.5s linear;

    /* When the animation is finished, start again */
    animation-iteration-count: infinite;
}

@keyframes shake {
    0% { transform: translate(-40%, -50%) }
    10% { transform: translate(-50%, -50%)  }
    20% { transform: translate(-40%, -50%)  }
    30% { transform: translate(-50%, -50%)  }
    40% { transform: translate(-40%, -50%) }
    50% { transform: translate(-50%, -50%)  }
    60% { transform: translate(-40%, -50%)  }
    70% { transform: translate(-50%, -50%)  }
    80% { transform: translate(-40%, -50%)  }
    90% { transform: translate(-50%, -50%)  }
    100% { transform: translate(-50%, -50%)  }
}
@keyframes shaker {
    0% { transform: rotate(0deg); translate(-50%, -50%) }
    10% { transform: rotate(-1deg); translate(-50%, -50%)  }
    20% { transform:  rotate(1deg); translate(-50%, -50%)  }
    30% { transform: rotate(0deg); translate(-50%, -50%)  }
    40% { transform: rotate(1deg); translate(-50%, -50%) }
    50% { transform: rotate(-1deg); translate(-50%, -50%)  }
    60% { transform: rotate(0deg); translate(-50%, -50%)  }
    70% { transform: rotate(-1deg); translate(-50%, -50%)  }
    80% { transform:  rotate(1deg); translate(-50%, -50%)  }
    90% { transform: rotate(0deg); translate(-50%, -50%)  }
    100% { transform: rotate(-1deg); translate(-50%, -50%)  }
}