main {
    max-width: 500px;
    margin: auto;
    margin-top: 150px;
}

form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

svg {
    height: 20px;
    width: 20px;
}

[data-provider=google] {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 48 48'%3E%3Cdefs%3E%3Cpath id='a' d='M44.5 20H24v8.5h11.8C34.7 33.9 30.1 37 24 37c-7.2 0-13-5.8-13-13s5.8-13 13-13c3.1 0 5.9 1.1 8.1 2.9l6.4-6.4C34.6 4.1 29.6 2 24 2 11.8 2 2 11.8 2 24s9.8 22 22 22c11 0 21-8 21-22 0-1.3-.2-2.7-.5-4z'/%3E%3C/defs%3E%3CclipPath id='b'%3E%3Cuse xlink:href='%23a' overflow='visible'/%3E%3C/clipPath%3E%3Cpath clip-path='url(%23b)' fill='%23FBBC05' d='M0 37V11l17 13z'/%3E%3Cpath clip-path='url(%23b)' fill='%23EA4335' d='M0 11l17 13 7-6.1L48 14V0H0z'/%3E%3Cpath clip-path='url(%23b)' fill='%2334A853' d='M0 37l30-23 7.9 1L48 0v48H0z'/%3E%3Cpath clip-path='url(%23b)' fill='%234285F4' d='M48 48L17 24l-4-3 35-10z'/%3E%3C/svg%3E")' fill='%23FBBC05' d='M0 37V11l17 13z'/%3E%3Cpath clip-path='%23b' fill='%23EA4335' d='M0 11l17 13 7-6.1L48 14V0H0z'/%3E%3Cpath clip-path='url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 48 48'%3E%3Cdefs%3E%3Cpath id='a' d='M44.5 20H24v8.5h11.8C34.7 33.9 30.1 37 24 37c-7.2 0-13-5.8-13-13s5.8-13 13-13c3.1 0 5.9 1.1 8.1 2.9l6.4-6.4C34.6 4.1 29.6 2 24 2 11.8 2 2 11.8 2 24s9.8 22 22 22c11 0 21-8 21-22 0-1.3-.2-2.7-.5-4z'/%3E%3C/defs%3E%3CclipPath id='b'%3E%3Cuse xlink:href='%23a' overflow='visible'/%3E%3C/clipPath%3E%3Cpath clip-path='url(%23b)' fill='%23FBBC05' d='M0 37V11l17 13z'/%3E%3Cpath clip-path='url(%23b)' fill='%23EA4335' d='M0 11l17 13 7-6.1L48 14V0H0z'/%3E%3Cpath clip-path='url(%23b)' fill='%2334A853' d='M0 37l30-23 7.9 1L48 0v48H0z'/%3E%3Cpath clip-path='url(%23b)' fill='%234285F4' d='M48 48L17 24l-4-3 35-10z'/%3E%3C/svg%3E")' fill='%2334A853' d='M0 37l30-23 7.9 1L48 0v48H0z'/%3E%3Cpath clip-path='%23b' fill='%234285F4' d='M48 48L17 24l-4-3 35-10z'/%3E%3C/svg%3E);
}

main > div {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.actions {
    display: flex;
    gap: 15px;
}

.actions button {
    min-width: 80px;
}


#local {
    display: grid;
    gap: 15px;
    grid-template-columns: 150px 1fr;
    grid-template-rows: auto;
    grid-template-areas:
        "label editor"
        "label editor"
        "label editor"
        "label editor"
        ". login-actions"
        ". validation-errors"
}

    #local > label {
        text-align: right;
        align-self: center;
    }

.login-actions {
    grid-area: login-actions;
}

    .login-actions > #btnLogin {
        width: 10em;
    }

.validation-errors {
    grid-area: validation-errors
}

.hr-text {
    border: 0;
    line-height: 1em;
    position: relative;
    text-align: center;
    height: 1.5em;
    font-size: 14px;
    margin: 15px 15px;
}

    .hr-text::before {
        content: "";
        background: linear-gradient(to right, transparent, black, transparent);
        position: absolute;
        left: 0;
        top: 50%;
        width: 100%;
        height: 1px;
    }

    .hr-text::after {
        content: attr(data-content);
        position: relative;
        padding: 0 7px;
        line-height: 1.5em;
        background-color: white;
    }