.credit-application .input-group-text {
    width: 11.5em;
    justify-content: right;
}
.credit-application .input-group-text.short {
    width: 3em;
}
.required::before {
    color: red;
    transform: translate( -0.25em, -0.25em );
    content: '\2605';
}

/* .financial-background { */
.credit-application {
    background-color: whitesmoke;
    padding: 1em;
}
.financial-form-card {
    background: #ffffff;
    border-radius: 10px;
    padding: 1em;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.down-payment-background {
    background: #eef2f5;
    padding: 1em;
}
.down-payment-form-card {
    background: #ffffff;
    border-radius: 10px;
    padding: 1em;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.trade-in-vehicle-background {
    background: #eef2f5;
    padding: 1em;
}
.trade-in-vehicle-form-card {
    background: #ffffff;
    border-radius: 10px;
    padding: 1em;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.comments-and-certifications-background {
    background: #eef2f5;
    padding: 1em;
}
.comments-and-certifications-form-card {
    background: #ffffff;
    border-radius: 10px;
    padding: 1em;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* For the error check button */
.status-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

/* Give a little space between input groups on the
    credit app when viewport is very narrow */
.x-input-group {
    margin-top: 1em;
}