.validate-error {
    border-color: #d10000!important
}

.validate-popup {
    transition: opacity ease 500ms;
    cursor: pointer;
    position: relative;
    background-color: #d10000;
    color: #fff;
    font-size: 12px;
    line-height: 1;
    padding: 8px 12px;
    z-index: -1;
    opacity: 0;
    top: -20px;
    border-radius: 8px;
    margin-top: -28px;
}

.validate-popup.active {
    top: 0;
    z-index: 99999;
}

.validate-popup:after {
    position: absolute;
    bottom: 0;
    left: 0;
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 5px 0;
    border-color: #d10000 transparent transparent transparent;
    margin-left: 8px;
    margin-bottom: -5px
}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@-moz-keyframes fadeOut {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@-o-keyframes fadeOut {
    0% {
        opacity: 1;
    }
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.fadeOut {
    animation-fill-mode: forwards;
    animation: fadeOut ease-in;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation: fadeOut 2s ease-in;
    -moz-animation: fadeOut 2s ease-in;
    -o-animation: fadeOut 2s ease-in;
}