.sd-form-error {
max-height: 500px;
opacity: 1;
display: block;
overflow: hidden;
position: relative;
font-size: 13px;
background-color: rgba(255,0,0, 0.2);
color: #F00;
border-radius: 4px;
font-weight: 400;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
margin-bottom: 20px;
margin-left: 3px;
margin-right: 3px;
margin-top: 10px;
padding: 10px;
padding-left: 40px;
}
.sd-form-error:empty {
max-height: 0;
opacity: 0;
margin: 0;
padding: 0;
}
.sd-form-error:not(:empty):before {
content: "\00d7";
color: #F00;
display: inline-block;
position: absolute;
left: 15px;
}
.sd-form-field-invalid {
border-color: #F00 !important;
}
.sd-form-field-valid {
border-color: #76e081 !important;
animation-name: sd-form-field-valid-fadeout;
animation-duration: 1s;
animation-delay: 1.5s;
}
@keyframes sd-form-field-valid-fadeout {
from { border-color: #76e081 !important; }
to { border-color: transparent !important; }
}