form#sparkLoopForm * {
    box-sizing: border-box;
}

form#sparkLoopForm {
    max-width: 960px;
}

form#sparkLoopForm label,
form#sparkLoopForm input {
    display: block;
}

form#sparkLoopForm label {
    margin-bottom: 5px;
    font-size: 13px;
}

form#sparkLoopForm input[type=text],
form#sparkLoopForm input[type=email],
form#sparkLoopForm input[type=phone] {
    padding: 12px 10px;
    outline: none;
    max-width: 360px;
    border: 1px solid #eee;
    width: 100%;
    background-color: #fafafa;
    border-radius: 4px;
}

form#sparkLoopForm input[type=text]:focus,
form#sparkLoopForm input[type=email]:focus,
form#sparkLoopForm input[type=phone]:focus {
    border: 1px solid rgb(255, 109, 60);
}

form#sparkLoopForm input[type=text]:invalid:not(:placeholder-shown),
form#sparkLoopForm input[type=email]:invalid:not(:placeholder-shown),
form#sparkLoopForm input[type=phone]:invalid:not(:placeholder-shown) {
    border: 1px solid red;
}

form#sparkLoopForm input[type=text]:valid,
form#sparkLoopForm input[type=email]:valid,
form#sparkLoopForm input[type=phone]:valid {
    border: 1px solid green;
}

form#sparkLoopForm button {
    margin-top: 10px;
    padding: 12px 15px;
    width: 100%;
    border-radius: 4px;
    border: 1px solid rgb(255, 109, 60);
    background-color: rgb(255, 109, 60);
    cursor: pointer;
    transition: transform 0.1s ease, background-color 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    font-weight: 500;
    text-align: center;
    max-width: 360px;
    color: white;
}

form#sparkLoopForm button:hover {
    background-color: #4054B2 !important;
    border: 1px solid #4054B2;
    color: #FFF;
}
form#sparkLoopForm button:active {
    transform: scale(0.97);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

span.required {
    color: red;
    font-size: 15px;
    margin-top: -3px;
}

.sparkloop-forms--success,
.sparkloop-forms--error {
    font-weight: bold;
}

/*
styles for after a form submits
 */

.sparkloop-forms--success {
    color: green;
}

.sparkloop-forms--error {
    color: red;
}

.sparkloop-forms--loading-inner {
    display: flex;
    align-items: center;
    text-align: center;
    padding: 10px;
}