/*
 * Visual feedback only. These rules activate solely after the user tries to
 * submit the certificate form and a field is found to be invalid/incomplete.
 */

.tg-cert-invalid-field {
    border-color: #b42318 !important;
    background-color: #fff2f0 !important;
    box-shadow: 0 0 0 4px rgba(180, 35, 24, 0.20) !important;
    outline: 2px solid #b42318 !important;
    outline-offset: 1px !important;
}

.tg-cert-invalid-group {
    border: 3px solid #b42318 !important;
    border-radius: 6px !important;
    background: #fff6f5 !important;
    box-shadow: 0 0 0 4px rgba(180, 35, 24, 0.12) !important;
    padding: 12px !important;
}

.tg-cert-invalid-label,
.tg-cert-invalid-group > label,
.tg-cert-invalid-group legend {
    color: #9f1710 !important;
    font-weight: 700 !important;
}

.tg-cert-inline-error {
    display: block !important;
    width: 100% !important;
    margin: 8px 0 2px !important;
    color: #9f1710 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}

.tg-cert-error-summary {
    display: block !important;
    margin: 0 0 22px !important;
    padding: 16px 18px !important;
    border: 3px solid #b42318 !important;
    border-left-width: 8px !important;
    border-radius: 6px !important;
    background: #fff2f0 !important;
    color: #7a1712 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
}

.tg-cert-error-summary:focus {
    outline: 3px solid #111 !important;
    outline-offset: 3px !important;
}

@media (max-width: 767px) {
    .tg-cert-invalid-field {
        box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.22) !important;
    }

    .tg-cert-error-summary {
        padding: 14px !important;
        font-size: 15px !important;
    }
}