/*-----------------------------
	Loading & Spinner Styles
------------------------------*/
@keyframes spinner {
    0% {
    transform: translate3d(-50%, -50%, 0) rotate(0deg);
    }
    100% {
    transform: translate3d(-50%, -50%, 0) rotate(360deg);
    }
}
.spin::before {
    animation: .85s linear infinite spinner;
    animation-play-state: inherit;
    border: solid 5px #cfd0d1;
    border-bottom-color: #1c87c9;
    border-radius: 50%;
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    will-change: transform;
}
.mini-spin::before {
    height: 20px;
    width: 20px;
}
.normal-spin::before {
    height: 40px;
    width: 40px;
}
.large-spin::before {
    height: 80px;
    width: 80px;
    border-width: 6px;
}
#jdr-loading-screen {
    background-color: rgba(0,0,0,.5);
    display: none;
    height: 100%;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999999999;
}

/*--------------------
    Form Validation
---------------------*/
@keyframes shake-fields {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-15px); }
    75% { transform: translateX(15px); }
}