/**
 * ==============================================
 * Dot Typing
 * ==============================================
 */
.dot-typing {
    position: relative;
    left: -9999px;
    width: 6px;
    height: 6px;
    border-radius: 9px;
    background-color: #6c757d;
    color: #6c757d;
    box-shadow: 9984px 0 0 0 #6c757d, 9999px 0 0 0 #6c757d, 10014px 0 0 0 #6c757d;
    -webkit-animation: dot-typing 1.5s infinite linear;
    animation: dot-typing 1.5s infinite linear;

    /*margin-left: 30px;*/
    
    /*bottom: 124px;*/
}

@-webkit-keyframes dot-typing {
    0% {
        box-shadow: 9984px 0 0 0 #6c757d, 9999px 0 0 0 #6c757d, 10014px 0 0 0 #6c757d;
    }
    16.667% {
        box-shadow: 9984px -10px 0 0 #6c757d, 9999px 0 0 0 #6c757d, 10014px 0 0 0 #6c757d;
    }
    33.333% {
        box-shadow: 9984px 0 0 0 #6c757d, 9999px 0 0 0 #6c757d, 10014px 0 0 0 #6c757d;
    }
    50% {
        box-shadow: 9984px 0 0 0 #6c757d, 9999px -10px 0 0 #6c757d, 10014px 0 0 0 #6c757d;
    }
    66.667% {
        box-shadow: 9984px 0 0 0 #6c757d, 9999px 0 0 0 #6c757d, 10014px 0 0 0 #6c757d;
    }
    83.333% {
        box-shadow: 9984px 0 0 0 #6c757d, 9999px 0 0 0 #6c757d, 10014px -10px 0 0 #6c757d;
    }
    100% {
        box-shadow: 9984px 0 0 0 #6c757d, 9999px 0 0 0 #6c757d, 10014px 0 0 0 #6c757d;
    }
}

@keyframes dot-typing {
    0% {
        box-shadow: 9984px 0 0 0 #6c757d, 9999px 0 0 0 #6c757d, 10014px 0 0 0 #6c757d;
    }
    16.667% {
        box-shadow: 9984px -10px 0 0 #6c757d, 9999px 0 0 0 #6c757d, 10014px 0 0 0 #6c757d;
    }
    33.333% {
        box-shadow: 9984px 0 0 0 #6c757d, 9999px 0 0 0 #6c757d, 10014px 0 0 0 #6c757d;
    }
    50% {
        box-shadow: 9984px 0 0 0 #6c757d, 9999px -10px 0 0 #6c757d, 10014px 0 0 0 #6c757d;
    }
    66.667% {
        box-shadow: 9984px 0 0 0 #6c757d, 9999px 0 0 0 #6c757d, 10014px 0 0 0 #6c757d;
    }
    83.333% {
        box-shadow: 9984px 0 0 0 #6c757d, 9999px 0 0 0 #6c757d, 10014px -10px 0 0 #6c757d;
    }
    100% {
        box-shadow: 9984px 0 0 0 #6c757d, 9999px 0 0 0 #6c757d, 10014px 0 0 0 #6c757d;
    }
}


.typing_loader{
    width: 6px;
    height: 6px;
    border-radius: 50%;
    -webkit-animation: typing 1s linear infinite alternate;
    -moz-animation: typing 1s linear infinite alternate;
    -ms-animation: typing 1s linear infinite alternate;
    animation: typing 1s linear infinite alternate;
    position: relative;
    left: -12px;
    margin: 7px 15px 6px;
}
.to .typing_loader {
    animation: typing-black 1s linear infinite alternate;
}