/* trade button spinner */
.spinner {
    display: inline-block;

    -webkit-animation-name: spin;
    -webkit-animation-duration: 4000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 4000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 4000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;

    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@-moz-keyframes spin {
    from {
        -moz-transform: rotate(0deg);
    }
    to {
        -moz-transform: rotate(360deg);
    }
}

@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.loading.active {
    text-indent: -9999px;
}

/* price increase/decreases */
.price {
    -webkit-animation-duration: 0.3s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;

    -moz-animation-duration: 300ms;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: linear;

    -ms-animation-duration: 300ms;
    -ms-animation-iteration-count: 1;
    -ms-animation-timing-function: linear;

    animation-duration: 300ms;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}

.price.increase {
    -webkit-animation-name: price-increase;
    -moz-animation-name: price-increase;
    -ms-animation-name: price-increase;
    animation-name: price-increase;
}

.price.decrease {
    -webkit-animation-name: price-decrease;
    -moz-animation-name: price-decrease;
    -ms-animation-name: price-decrease;
    animation-name: price-decrease;
}

.price.increase .buy, .price.increase .sell, .price.decrease .buy, .price.decrease .sell {
    color: #fff;
}

@-webkit-keyframes price-increase {
    0% {
        background-color: rgb(0, 150, 215);
    }
    100% {
        background-color: none;
    }
}

@-webkit-keyframes price-decrease {
    0% {
        background-color: rgb(217, 46, 38);
    }
    100% {
        background-color: none;
    }
}

@-moz-keyframes price-increase {
    0% {
        background-color: rgb(0, 150, 215);
    }
    100% {
        background-color: none;
    }
}

@-moz-keyframes price-decrease {
    0% {
        background-color: rgb(217, 46, 38);
    }
    100% {
        background-color: none;
    }
}

@-ms-keyframes price-increase {
    0% {
        background-color: rgb(0, 150, 215);
    }
    100% {
        background-color: none;
    }
}

@-ms-keyframes price-decrease {
    0% {
        background-color: rgb(217, 46, 38);
    }
    100% {
        background-color: none;
    }
}

@-o-keyframes price-increase {
    0% {
        background-color: rgb(0, 150, 215);
    }
    100% {
        background-color: none;
    }
}

@-o-keyframes price-decrease {
    0% {
        background-color: rgb(217, 46, 38);
    }
    100% {
        background-color: none;
    }
}

@keyframes price-increase {
    0% {
        background-color: rgb(0, 150, 215);
    }
    100% {
        background-color: none;
    }
}

@keyframes price-decrease {
    0% {
        background-color: rgb(217, 46, 38);
    }
    100% {
        background-color: none;
    }
}


/* keyframes for tabs blinking on counter changes */
.highlight {
    animation: highlight 1500ms ease-in-out;
    -webkit-animation: highlight 1500ms ease-in-out;
}

@-webkit-keyframes highlight {
    0% {
        background-color: #5bc0de;
    }
    100% {
        background-color: inherit;
        background-color: initial;
    }
}

@keyframes highlight {
    0% {
        background-color: #5bc0de;
    }
    100% {
        background-color: inherit;
        background-color: initial;
    }
}