﻿/* Loaded */
.loaded main {
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.5s 0.3s ease-out;
    transition: all 0.5s 0.3s ease-out;
}

    .loaded main .dank-ass-loader {
        opacity: 0;
        -webkit-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
    }

/* Elite Dangerous Inspired Loader */
main {
    position: absolute;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #455a64;
    z-index: 2000;
}

main .dank-ass-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
}

    main .dank-ass-loader .row {
        display: flex;
    }

        main .dank-ass-loader .row .arrow {
            width: 0;
            height: 0;
            margin: 0 -6px;
            border-left: 12px solid transparent;
            border-right: 12px solid transparent;
            border-bottom: 21.6px solid #bbbbbb;
            -webkit-animation: blink 1s infinite;
            animation: blink 1s infinite;
            -webkit-filter: drop-shadow(0 0 18px #bbbbbb);
            filter: drop-shadow(0 0 18px #bbbbbb);
        }

            main .dank-ass-loader .row .arrow.down {
                -webkit-transform: rotate(180deg);
                transform: rotate(180deg);
            }

            main .dank-ass-loader .row .arrow.outer-1 {
                -webkit-animation-delay: -0.0555555556s;
                animation-delay: -0.0555555556s;
            }

            main .dank-ass-loader .row .arrow.outer-2 {
                -webkit-animation-delay: -0.1111111111s;
                animation-delay: -0.1111111111s;
            }

            main .dank-ass-loader .row .arrow.outer-3 {
                -webkit-animation-delay: -0.1666666667s;
                animation-delay: -0.1666666667s;
            }

            main .dank-ass-loader .row .arrow.outer-4 {
                -webkit-animation-delay: -0.2222222222s;
                animation-delay: -0.2222222222s;
            }

            main .dank-ass-loader .row .arrow.outer-5 {
                -webkit-animation-delay: -0.2777777778s;
                animation-delay: -0.2777777778s;
            }

            main .dank-ass-loader .row .arrow.outer-6 {
                -webkit-animation-delay: -0.3333333333s;
                animation-delay: -0.3333333333s;
            }

            main .dank-ass-loader .row .arrow.outer-7 {
                -webkit-animation-delay: -0.3888888889s;
                animation-delay: -0.3888888889s;
            }

            main .dank-ass-loader .row .arrow.outer-8 {
                -webkit-animation-delay: -0.4444444444s;
                animation-delay: -0.4444444444s;
            }

            main .dank-ass-loader .row .arrow.outer-9 {
                -webkit-animation-delay: -0.5s;
                animation-delay: -0.5s;
            }

            main .dank-ass-loader .row .arrow.outer-10 {
                -webkit-animation-delay: -0.5555555556s;
                animation-delay: -0.5555555556s;
            }

            main .dank-ass-loader .row .arrow.outer-11 {
                -webkit-animation-delay: -0.6111111111s;
                animation-delay: -0.6111111111s;
            }

            main .dank-ass-loader .row .arrow.outer-12 {
                -webkit-animation-delay: -0.6666666667s;
                animation-delay: -0.6666666667s;
            }

            main .dank-ass-loader .row .arrow.outer-13 {
                -webkit-animation-delay: -0.7222222222s;
                animation-delay: -0.7222222222s;
            }

            main .dank-ass-loader .row .arrow.outer-14 {
                -webkit-animation-delay: -0.7777777778s;
                animation-delay: -0.7777777778s;
            }

            main .dank-ass-loader .row .arrow.outer-15 {
                -webkit-animation-delay: -0.8333333333s;
                animation-delay: -0.8333333333s;
            }

            main .dank-ass-loader .row .arrow.outer-16 {
                -webkit-animation-delay: -0.8888888889s;
                animation-delay: -0.8888888889s;
            }

            main .dank-ass-loader .row .arrow.outer-17 {
                -webkit-animation-delay: -0.9444444444s;
                animation-delay: -0.9444444444s;
            }

            main .dank-ass-loader .row .arrow.outer-18 {
                -webkit-animation-delay: -1s;
                animation-delay: -1s;
            }

            main .dank-ass-loader .row .arrow.inner-1 {
                -webkit-animation-delay: -0.1666666667s;
                animation-delay: -0.1666666667s;
            }

            main .dank-ass-loader .row .arrow.inner-2 {
                -webkit-animation-delay: -0.3333333333s;
                animation-delay: -0.3333333333s;
            }

            main .dank-ass-loader .row .arrow.inner-3 {
                -webkit-animation-delay: -0.5s;
                animation-delay: -0.5s;
            }

            main .dank-ass-loader .row .arrow.inner-4 {
                -webkit-animation-delay: -0.6666666667s;
                animation-delay: -0.6666666667s;
            }

            main .dank-ass-loader .row .arrow.inner-5 {
                -webkit-animation-delay: -0.8333333333s;
                animation-delay: -0.8333333333s;
            }

            main .dank-ass-loader .row .arrow.inner-6 {
                -webkit-animation-delay: -1s;
                animation-delay: -1s;
            }

    main .dank-ass-loader .message {
        color: #bbbbbb;
        font-style: italic;
        text-align: center;
    }

    main .dank-ass-loader .subMessage {
        color: #bbbbbb;
        font-style: italic;
        text-align: center;
    }

@-webkit-keyframes blink {
    0% {
        opacity: 0.1;
    }

    30% {
        opacity: 1;
    }

    100% {
        opacity: 0.1;
    }
}

@keyframes blink {
    0% {
        opacity: 0.1;
    }

    30% {
        opacity: 1;
    }

    100% {
        opacity: 0.1;
    }
}

/* Bootstrap 5.2.3 Fix */
main .dank-ass-loader .row .arrow {
    padding: 0px !important;
}