.sign-up--inline {
    background-color: aliceblue;
    margin: 1rem auto;
    padding: 3rem 2rem;
    width: 100%;
    display: flex;
    align-items: center;
}

.sign-up--inline .sign-up__container {
    flex-wrap: wrap;
}

.sign-up--inline .sign-up__text,
.sign-up--inline .sign-up__confirmation {
    text-align: center;
}

.sign-up--inline .sign-up__text {
    flex: 0 1 100%;
}

.sign-up--inline .sign-up__form {
    padding: 1rem 0 2rem;
    max-width: 400px;
    margin: 0 auto;
}

.sign-up--inline .sign-up__headline {
    margin: 1.5rem auto 0.5rem;
}

.sign-up--inline .sign-up__container #emailAddress {
    margin-top: 0;
    border: 1px solid #CCC;
}

.sign-up--inline .sign-up__container .has-error#emailAddress {
    border: 1px solid #C62030;
}

.sign-up--inline .form-control {
    box-shadow: none; /* Should we add this to the 'form-control' class in Bootstrap Patch CSS file? */
    box-sizing: content-box;
    padding: 0.5rem 0;
    font-size: 17px;
    line-height: 35px;
    text-indent: 15px;
    margin: 5px 0;
}

.sign-up--inline .sign-up__form button.sign-up__button {
    font-weight: 400;
    height: 4.6rem;
    line-height: 4.6rem;
    width: auto;
    padding: 0 2rem;
    font-size: 1.5rem;
    letter-spacing: .05rem;
    color: #fff;
    background-color: #D9534F;
    border: 0 none;
    border-radius: 3px;
}

.sign-up--inline .sign-up__confirmation {
    width: 100%;
    opacity: 1; /* This overrides an existing style from the original Article Signup component, may not be needed if the source javascript sets it */
    visibility: visible;
}

.sign-up--inline .sign-up__confirmation > p {
    font-size: 1.8rem;
    line-height: 150%;
    font-weight: 400;
    margin: 0;
    vertical-align: middle;
}

.sign-up__validation {
    font-size: 1.6rem;
    color: red;
    width: 100%;
}

@media (min-width: 768px) {
    .sign-up--inline {
        margin: 1rem auto;
        padding: 3rem 5rem;
    }
}