.field-invalid{ border-color:#a94442; } .field-invalidmsg{ color:#a94442; } .field-validmsg{ color:#3c763d; } .field-tooltipWrap{ position:absolute; left:0; top:0; width:100%; z-index:19891014; } .field-tooltipInner { pointer-events:none; display:table; position:fixed; left:0; top:0; width:100%; height:100%; } .field-tooltip { display:table-cell; vertical-align:middle; text-align:center; } .field-tooltip .field-invalidmsg, .field-tooltip .field-validmsg { color:#fff; } .field-tooltip .zvalid-resultformat { display:inline-block; position:relative; background-color:rgba(0,0,0,.8); color:#fff; padding:10px 15px; font-size:14px; border-radius:6px; box-shadow:0 0 8px rgba(0,0,0,.1); pointer-events:auto; animation-name:fieldTipBounceIn; -webkit-animation-name:fieldTipBounceIn; -webkit-animation-fill-mode:both; animation-fill-mode:both; -webkit-animation-duration:.18s; animation-duration:.18s } @-webkit-keyframes fieldTipBounceIn { 0% { opacity:0; -webkit-transform:scale3d(.3, .3, .3); transform:scale3d(.3, .3, .3); } 100% { opacity:1; -webkit-transform:scale3d(1, 1, 1); transform:scale3d(1, 1, 1); } } @keyframes { 0% { opacity:0; -webkit-transform:scale3d(.3, .3, .3); transform:scale3d(.3, .3, .3); } 100% { opacity:1; -webkit-transform:scale3d(1, 1, 1); transform:scale3d(1, 1, 1); } }