﻿@keyframes hurricane-loading {
	0% {
		animation-timing-function: cubic-bezier(0,0.5,0.5,1);
		top: 105px
	}

	30% {
		animation-timing-function: cubic-bezier(0.5,0,1,0.5);
		top: 75px
	}

	60% {
		animation-timing-function: cubic-bezier(0.5,0.5,0.5,0.5);
		top: 105px
	}

	100% {
		top: 105px
	}
}
.circle-one {
    left: 45px;
    animation-delay: -0.6s !important;
}
.circle-two {
    left: 75px;
    animation-delay: -0.44999999999999996s !important;
}
.circle-three {
    left: 105px;
    animation-delay: -0.3s !important;
}
.circle-four {
    left: 135px;
    animation-delay: -0.15s !important;
}
.hurricane-loading div {
    position: absolute;
    background: var(--primary-color);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: hurricane-loading 1s infinite;
}

.hurricane-loadingio-spinner-typing {
	width: 200px;
	height: 200px;
	display: inline-block;
}

.hurricane-loading {
	width: 100%;
	height: 100%;
	position: relative;
	transform: translateZ(0) scale(1);
	backface-visibility: hidden;
	transform-origin: 0 0; /* see note above */
}

	.hurricane-loading div {
		box-sizing: content-box;
	}

.dataTables_processing .hurricane-loading {
    width: 200px !important;
    height: 200px !important;
    background:none !important;
    animation:none !important;
}

.small-spinner > .hurricane-loadingio-spinner-typing {
    width: 75px;
    height: 32px;
    justify-content: end;
    margin-left: 70px;
    margin-top: -5px;
}
.small-notification-spinner > .hurricane-loadingio-spinner-typing {
    width: 75px;
    height: 32px;
}
    .small-spinner > .hurricane-loadingio-spinner-typing > .hurricane-loading {
        transform: translateZ(0) scale(0.5) translateX(-30%) translateY(-160%);
    }
    .small-spinner > .hurricane-loadingio-spinner-typing > .hurricane-loading div {
        width: 10px;
        height: 10px;
    }

        .small-spinner > .hurricane-loadingio-spinner-typing > .hurricane-loading div.circle-one {
            left: 30px;
            animation-delay: -0.6s !important;
        }

        .small-spinner > .hurricane-loadingio-spinner-typing > .hurricane-loading div.circle-two {
            left: 50px;
            animation-delay: -0.44999999999999996s !important;
        }

        .small-spinner > .hurricane-loadingio-spinner-typing > .hurricane-loading div.circle-three {
            left: 70px;
            animation-delay: -0.3s !important;
        }

        .small-spinner > .hurricane-loadingio-spinner-typing > .hurricane-loading div.circle-four {
            left: 90px;
            animation-delay: -0.15s !important;
        }