/* Generic Loading Spinner */
.loading-wrapper {
    width: 100%;
    display: block;
    margin: 5px auto;
    padding: 0px;
}

.loading-inner-wrapper {
    width: 150px;
    text-align: start;
}

.loading-spinner {
    float: left;
    padding-right: 10px;
    width: 50px;
}

.loading-spinner-icon {
    float: left;
    width: 30px;
}

.loading-spinner-large {
    float: left;
}

.loading-spinner-large-icon {
    float: left;
    width: 60px;
}

.loading-text {
    padding: 10px 0px 0px 0px;
}

/* Loading Dots */
.loading-dots {
    width: 10px;
    aspect-ratio: 1;
    border-radius: 50%;
    animation: l5 1s infinite linear alternate;
}

@keyframes l5 {
    0% {
        box-shadow: 20px 0 #000, -20px 0 #0002;
        background: #000
    }

    33% {
        box-shadow: 20px 0 #000, -20px 0 #0002;
        background: #0002
    }

    66% {
        box-shadow: 20px 0 #0002,-20px 0 #000;
        background: #0002
    }

    100% {
        box-shadow: 20px 0 #0002,-20px 0 #000;
        background: #000
    }
}

/* Loading Button Indicator */
.loading-button-indicator {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(0,0,0,0.9);
    animation: pulse 1.2s infinite ease-in-out;
}

@keyframes pulse {
    0% {
        transform: scale(0.8);
        opacity: 0.5;
    }

    50% {
        transform: scale(1.2);
        opacity: 1;
    }

    100% {
        transform: scale(0.8);
        opacity: 0.5;
    }
}

/* Processing Tasks Loading Spinner */
.processing-tasks-spinner {
    float: left;
    padding-right: 10px;
    width: 100px;
}

.processing-tasks-spinner-icon {
    float: left;
    width: 100px;
}

/* Downloading File Spinner */
.downloading-file-spinner {
    float: left;
    width: 30px;
}

.downloading-file-text {
    font-size: 16px;
    margin-left: 10px;
    padding-top: 6px;
}

/* Full Page Loading Spinner - Used in login process */
.page-loading {
    bottom: 0;
    display: block;
    height: 2em;
    left: 0;
    margin: auto;
    overflow: visible;
    position: fixed;
    right: 0;
    top: 0;
    width: 2em;
    z-index: 999;
}

    .page-loading:before {
        background-color: rgba(0,0,0,0);
        content: '';
        display: block;
        height: 100%;
        left: 0;
        position: fixed;
        top: 0;
        width: 100%;
    }

    .page-loading:not(:required) {
        background-color: transparent;
        border: 0;
        color: transparent;
        font: 0/0 a;
        text-shadow: none;
    }

        .page-loading:not(:required):after {
            animation: spinner 1500ms infinite linear;
            border-radius: 0.5em;
            box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
            content: '';
            display: block;
            height: 1em;
            font-size: 10px;
            margin-top: -0.5em;
            width: 1em;
            -moz-animation: spinner 1500ms infinite linear;
            -ms-animation: spinner 1500ms infinite linear;
            -o-animation: spinner 1500ms infinite linear;
            -webkit-animation: spinner 1500ms infinite linear;
            -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
        }

/* Search Loading Spinner */
.search-loading {
    padding: 30px 0px 0px 0px;
    float: left;
}

    .search-loading:not(:required) {
        background-color: transparent;
        border: 0;
        color: transparent;
        font: 0/0 a;
        text-shadow: none;
    }

        .search-loading:not(:required):after {
            animation: spinner 1500ms infinite linear;
            border-radius: 0.5em;
            box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
            content: '';
            display: block;
            height: 1em;
            font-size: 5px;
            margin-top: -0.5em;
            width: 1em;
            -moz-animation: spinner 1500ms infinite linear;
            -ms-animation: spinner 1500ms infinite linear;
            -o-animation: spinner 1500ms infinite linear;
            -webkit-animation: spinner 1500ms infinite linear;
            -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
        }

@keyframes spinner {
    0% {
        transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
}

@-moz-keyframes spinner {
    0% {
        transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
}

@-o-keyframes spinner {
    0% {
        transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
}

@-webkit-keyframes spinner {
    0% {
        transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
}

/* Robot Loading Spinner - For AI loading stuff */
.robot-loading {
    animation: robotspinner 3000ms infinite linear;
    -moz-animation: robotspinner 3000ms infinite linear;
    -ms-animation: robotspinner 3000ms infinite linear;
    -o-animation: robotspinner 3000ms infinite linear;
    -webkit-animation: robotspinner 3000ms infinite linear;
}

@keyframes robotspinner {
    0% {
        transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }

    25% {
        transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }

    100% {
        transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
}

@-moz-keyframes robotspinner {
    0% {
        transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }

    25% {
        transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }

    100% {
        transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
}

@-o-keyframes robotspinner {
    0% {
        transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }

    25% {
        transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }

    100% {
        transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
}

@-webkit-keyframes robotspinner {
    0% {
        transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }

    25% {
        transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }

    100% {
        transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
}