/*Custom Loader*/
#spinner-overlay {
    position: fixed !important;
    z-index: 100;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
}

.spinner {
    display: inline-block;
    position: relative;
    height: 40px;
    width: 40px;
}

    .spinner .spinner-left, .spinner .spinner-right {
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
        height: 100%;
        overflow: hidden;
    }

    .spinner .spinner-right {
        top: 0;
        left: 49.4%;
        height: 100%;
        right: 0;
    }

.spinner {
    display: inline-block;
    position: relative;
    height: 50px;
    width: 50px;
}

    .spinner.spinner-small {
        width: 24px;
        height: 24px;
    }

    .spinner .spinner-left,
    .spinner .spinner-right {
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
        height: 100%;
        overflow: hidden;
    }

        .spinner .spinner-left:after,
        .spinner .spinner-right:after {
            border: 2px solid rgba(130, 71, 181, 1);
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            z-index: 100;
            transition: border-color 100ms ease-out 0s;
        }

        .spinner .spinner-left:after {
            transform-origin: right center;
            transform: rotate(180deg);
            border-radius: 100% 0 0 100% / 50% 0 0 50%;
            border-right: none;
            animation: spinner-left-rotation 1.6s ease-in infinite;
        }

    .spinner .spinner-right {
        top: 0;
        left: 49.4%;
        height: 100%;
        right: 0;
    }

        .spinner .spinner-right:after {
            opacity: 0;
            transform: rotate(180deg);
            transform-origin: left center;
            border-left: none;
            border-radius: 0 100% 100% 0 / 0 50% 50% 0;
            animation: spinner-right-rotation 1.6s ease-out infinite;
        }

    .spinner.spinner-success .spinner-left:after,
    .spinner.spinner-success .spinner-right:after {
        border-color: rgba(91, 181, 99, 1);
    }

    .spinner.spinner-danger .spinner-left:after,
    .spinner.spinner-danger .spinner-right:after {
        border-color: rgba(224, 80, 67, 1);
    }

    .spinner.spinner-full .spinner-left:after {
        animation: none;
        transform: rotate(0deg);
    }

    .spinner.spinner-full .spinner-right:after {
        animation: spinner-right-rotation-full 100ms ease-out;
        animation-fill-mode: forwards;
        opacity: 1;
    }

    .spinner.spinner-empty .spinner-left:after {
        transform: rotate(0deg);
        animation: spinner-left-rotation-empty 1.2s linear;
        animation-fill-mode: forwards;
    }

    .spinner.spinner-empty .spinner-right:after {
        transform: rotate(0deg);
        animation: spinner-right-rotation-empty 1.2s ease-out;
        animation-fill-mode: forwards;
    }

@keyframes spinner-left-rotation {
    0% {
        transform: rotate(180deg);
        opacity: 1;
    }

    12.5% {
        transform: rotate(0deg);
    }

    25% {
        opacity: 1;
        transform: rotate(0deg);
    }

    62.5% {
        transform: rotate(-180deg);
        opacity: 1;
    }

    62.51% {
        opacity: 0;
    }

    100% {
        opacity: 0;
        transform: rotate(-180deg);
    }
}

@keyframes spinner-right-rotation {
    0% {
        transform: rotate(180deg);
        opacity: 0;
    }

    12.49% {
        opacity: 0;
    }

    12.5% {
        opacity: 1;
        transform: rotate(180deg);
    }

    25% {
        transform: rotate(0deg);
    }

    62.5% {
        transform: rotate(0deg);
    }

    100% {
        opacity: 1;
        transform: rotate(-180deg);
    }
}

@keyframes spinner-right-rotation-full {
    100% {
        transform: rotate(0deg);
    }
}

@keyframes spinner-left-rotation-empty {
    0% {
        transform: rotate(0deg);
        opacity: 1;
    }

    50% {
        transform: rotate(-180deg);
        opacity: 1;
    }

    50.01% {
        opacity: 0;
    }

    100% {
        opacity: 0;
        transform: rotate(-180deg);
    }
}

@keyframes spinner-right-rotation-empty {
    0% {
        transform: rotate(0deg);
        opacity: 1;
    }

    50% {
        transform: rotate(0deg);
        opacity: 1;
    }

    99.99% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: rotate(-180deg);
    }
}