﻿input, select {
    cursor:pointer;
}

.txt-anim {
    border: 1px solid #333;
    padding: 7px 5px !important;
    transition: 0.4s;
    background: transparent !important;
    height: 33px;
    font-size: 13px;
    border-radius: 5px !important;
}

    .txt-anim ~ .focus-border:before,
    .txt-anim ~ .focus-border:after {
        content: "";
        position: absolute;
        top: -1px;
        left: 50%;
        width: 0;
        height: 2px;
        transition: 0.4s;
    }

    .txt-anim ~ .focus-border:after {
        top: auto;
        bottom: 0;
    }

    .txt-anim ~ .focus-border i:before,
    .txt-anim ~ .focus-border i:after {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        width: 2px;
        height: 0;
        transition: 0.6s;
    }

    .txt-anim ~ .focus-border i:after {
        left: auto;
        right: 0;
    }

    .txt-anim:focus ~ .focus-border:before,
    .txt-anim:focus ~ .focus-border:after {
        left: 0;
        width: 100%;
        transition: 0.4s;
    }

    .txt-anim:focus ~ .focus-border i:before,
    .txt-anim:focus ~ .focus-border i:after {
        top: -1px;
        height: 100%;
        transition: 0.6s;
    }

    .txt-anim ~ label {
        position: absolute;
        text-align: left;
        margin: 0;
        left: 25px;
        width: 90%;
        top: 8px;
        color: #333 !important;
        transition: 0.3s;
        letter-spacing: 0.5px;
        font-size: 13px !important;
        font-weight: 300;
        z-index:-1;
    }

    .txt-anim:focus ~ label, .has-content.txt-anim ~ label {
        top: -22px;
        left: 14px;
        font-size: 12px;
        color: #FFF;
        transition: 0.3s;
    }

    .txt-anim ~ .focus-border:before,
    .txt-anim ~ .focus-border:after,
    .txt-anim ~ .focus-border i:before,
    .txt-anim ~ .focus-border i:after {
        border: 0px solid #fafafa !important;
    }

.dv-anim.input-effect.animationdive input, .dv-anim.input-effect.animationdive select {
    border: 1px solid #ddd;
    border-radius: 2px !important;
}

.dv-anim.input-effect.animationdive input:focus, .dv-anim.input-effect.animationdive select:focus {
    border: 1px solid #191310 !important;
    outline: none !important;
}
