﻿.dis-flex {
    display: inline-flex;
}

.w-100 {
    width: 100%
}

.m-auto {
    margin: auto;
}
.loading-box-cus {
    height: 100%;
    width: 100%;
    display: inline-flex;
    background-color: #333;
    opacity: 0.3;
    left: 0;
    top: 0;
}

    .loading-box-cus .lds-ring {
        display: inline-block;
        position: relative;
        margin: auto;
        width: 80px;
        height: 80px;
    }

        .loading-box-cus .lds-ring div {
            box-sizing: border-box;
            display: block;
            position: absolute;
            width: 64px;
            height: 64px;
            margin: 8px;
            border: 8px solid #fff;
            border-radius: 50%;
            animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
            border-color: #fff transparent transparent transparent;
        }

            .loading-box-cus .lds-ring div:nth-child(1) {
                animation-delay: -0.45s;
            }

            .loading-box-cus .lds-ring div:nth-child(2) {
                animation-delay: -0.3s;
            }

            .loading-box-cus .lds-ring div:nth-child(3) {
                animation-delay: -0.15s;
            }

    .loading-box-cus .loading-center {
        vertical-align: bottom;
        display: grid;
        height: 100%;
        width: fit-content;
        padding: 10px;
        pointer-events: none;
    }

        .loading-box-cus .loading-center .fa-spinner {
            color: white;
            margin: auto;
        }

.loading-absolute {
    position: absolute;
    top: 0px;
    opacity: 0.6;
    border-radius: 5px;
}

@keyframes lds-ring {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.waviy {
    margin-right: -20px;
    position: relative;
    -webkit-box-reflect: below -20px linear-gradient(transparent, rgba(0,0,0,.2));
}

    .waviy span {
        position: relative;
        display: inline-block;
        font-size: 18px;
        color: #fff;
        text-transform: uppercase;
        animation: waviy 1s infinite;
        animation-delay: calc(.1s * var(--i))
    }

@keyframes waviy {
    0%,40%,100% {
        transform: translateY(0)
    }

    20% {
        transform: translateY(-20px)
    }
}
