.has-tooltip span.tooltip {
    right:0px;
    position:absolute;
    top:0px;
    padding: 10px 6px 7px 5px;
    /*border: 1px solid red;*/
    color:#8e8e8e;
}

.has-tooltip span.tooltip:hover p, span.tooltip:focus p, span.tooltip:active p{
    display:block;
    transform-origin: 100% 0%;
    -webkit-animation: fadeIn 0.3s ease-in-out;
    animation: fadeIn 0.3s ease-in-out;
}
.has-tooltip .tooltip p{    /* The tooltip */
    display: none;
    text-align: left;
    background-color: #363d49;
    padding: 20px;
    max-width: 400px;
    min-width: 200px;
    position: absolute;
    border-radius: 3px;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    right: -4px;
    color: #FFF;
    font-size: 13px;
    line-height: 1.4;
    z-index: 10;
}
.has-tooltip input {
    padding-right: 40px !important;
}

.has-tooltip .tooltip p:before{ /* The pointer of the tooltip */
    position: absolute;
    content: '';
    width:0;
    height: 0;
    border:6px solid transparent;
    border-bottom-color:#363d49;
    right:16px;
    top:-12px;
}

/* CSS animation */

@-webkit-keyframes fadeIn {
    0% { 
        opacity:0; 
        transform: scale(0.6);
    }

    100% {
        opacity:100%;
        transform: scale(1);
    }
}

@keyframes fadeIn {
    0% { opacity:0; }
    100% { opacity:100%; }
}