form .invalid {
    border-color: #dc3545;
    padding-right: calc(1.5em + .75rem);
    background-image: url("data:image/svg+xml;utf8,<svg class='svg-danger' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24px' height='24px' viewBox='0 0 24 24' version='1.1'><g transform='translate(12.000000, 12.000000) rotate(-45.000000) translate(-12.000000, -12.000000) translate(4.000000, 4.000000)' fill='%23000000'><rect fill='%23dc3545' x='0' y='7' width='16' height='2' rx='1'/><rect fill='%23F1416C' opacity='0.5' transform='translate(8.000000, 8.000000) rotate(-270.000000) translate(-8.000000, -8.000000) ' x='0' y='7' width='16' height='2' rx='1'/></g></svg>");
    background-repeat: no-repeat;
    background-position: right calc(.375em + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}


form .valid {
    border-color: #198754;
    padding-right: calc(1.5em + .75rem);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24px' height='24px' viewBox='0 0 24 24' version='1.1'><g stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><polygon points='0 0 24 0 24 24 0 24'/><path d='M6.26193932,17.6476484 C5.90425297,18.0684559 5.27315905,18.1196257 4.85235158,17.7619393 C4.43154411,17.404253 4.38037434,16.773159 4.73806068,16.3523516 L13.2380607,6.35235158 C13.6013618,5.92493855 14.2451015,5.87991302 14.6643638,6.25259068 L19.1643638,10.2525907 C19.5771466,10.6195087 19.6143273,11.2515811 19.2474093,11.6643638 C18.8804913,12.0771466 18.2484189,12.1143273 17.8356362,11.7474093 L14.0997854,8.42665306 L6.26193932,17.6476484 Z' fill='%2350CD89' fill-rule='nonzero' transform='translate(11.999995, 12.000002) rotate(-180.000000) translate(-11.999995, -12.000002) '/></g></svg>");
    background-repeat: no-repeat;
    background-position: right calc(.375em + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}

form .error-message {
    color: #F1416C;
    font-size: 1rem;
    font-weight: 400;
    margin-top: 0.25rem;
}


form .svg-danger [fill]:not(.permanent):not(g) {
    transition: fill 0.3s ease;
    fill: #F1416C;
}

form .svg-success [fill]:not(.permanent):not(g) {
    transition: fill 0.3s ease;
    fill: #50CD89;
}