﻿.loading-text {
    direction: ltr !important;
}

    .loading-text span {
        display: inline-block;
        margin: 0 5px;
        color: #fff;
        font-size: 25px;
    }

        .loading-text span:nth-child(1) {
            filter: blur(0px);
            -webkit-animation: blur-text 1.5s 0s infinite linear alternate;
            animation: blur-text 1.5s 0s infinite linear alternate;
        }

        .loading-text span:nth-child(2) {
            filter: blur(0px);
            -webkit-animation: blur-text 1.5s 0.2s infinite linear alternate;
            animation: blur-text 1.5s 0.2s infinite linear alternate;
        }

        .loading-text span:nth-child(3) {
            filter: blur(0px);
            -webkit-animation: blur-text 1.5s 0.4s infinite linear alternate;
            animation: blur-text 1.5s 0.4s infinite linear alternate;
        }

        .loading-text span:nth-child(4) {
            filter: blur(0px);
            -webkit-animation: blur-text 1.5s 0.6s infinite linear alternate;
            animation: blur-text 1.5s 0.6s infinite linear alternate;
        }

        .loading-text span:nth-child(5) {
            filter: blur(0px);
            -webkit-animation: blur-text 1.5s 0.8s infinite linear alternate;
            animation: blur-text 1.5s 0.8s infinite linear alternate;
        }

        .loading-text span:nth-child(6) {
            filter: blur(0px);
            -webkit-animation: blur-text 1.5s 1s infinite linear alternate;
            animation: blur-text 1.5s 1s infinite linear alternate;
        }

        .loading-text span:nth-child(7) {
            filter: blur(0px);
            -webkit-animation: blur-text 1.5s 1.2s infinite linear alternate;
            animation: blur-text 1.5s 1.2s infinite linear alternate;
        }

@-webkit-keyframes blur-text {
    0% {
        filter: blur(0px);
        transform: translateY(0px) scale(1);
        font-weight: 900;
    }

    100% {
        filter: blur(4px);
        transform: translateY(5px) scale(1.01);
        font-weight: 100;
    }
}

@keyframes blur-text {
    0% {
        filter: blur(0px);
        transform: translateY(0px) scale(1);
        font-weight: 900;
    }

    100% {
        filter: blur(4px);
        transform: translateY(5px) scale(1.01);
        font-weight: 100;
    }
}




.loader-dots-spiner {
    width: 35px;
    height: 35px;
    display: grid;
}

    .loader-dots-spiner::before,
    .loader-dots-spiner::after {
        content: "";
        grid-area: 1/1;
        --c: radial-gradient(farthest-side,#562BA8 92%,#0000);
        background: var(--c) 50% 0, var(--c) 50% 100%, var(--c) 100% 50%, var(--c) 0 50%;
        background-size: 6px 6px;
        background-repeat: no-repeat;
        animation: dotsspiner 1s infinite;
    }

    .loader-dots-spiner::before {
        margin: 2px;
        filter: hue-rotate(45deg);
        background-size: 4px 4px;
        animation-timing-function: linear
    }

@keyframes dotsspiner {
    100% {
        transform: rotate(.5turn)
    }
}


/*#region cardLoader*/
.PreLoader .PL-icon {
    width: 30px;
    height: 30px;
    margin: 5px 0 5px 5px;
    border-radius: 3px;
}

.PreLoader .PL-title {
    width: 120px;
    height: 12px;
    border-radius: 3px;
}

.PreLoader .PL-card {
    height: 160px;
    border-radius: 3px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 15px;
}

    .PreLoader .PL-card .PL-image {
        width: 120px;
        height: 120px;
        border: 3px solid white;
        border-radius: 5px;
        display: flex;
    }

    .PreLoader .PL-card .PL-cardText {
        display: flex;
        flex-direction: column;
        width: calc(100% - 130px);
        height: 100%;
        justify-content: space-around;
        padding: 10px;
    }

.PL-card .PL-cardText * {
    width: 100%;
    height: 4px;
    background-color: white;
}


.gradLoad {
    background: linear-gradient(90deg, #eee 25%, #ddd 50%, #eee 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

.PL-Category {
    display: flex;
    width: 150px;
    height: 150px;
    margin: 5px;
    border-radius: 20% 10%;
    overflow: hidden;
    border: 1px solid #cfcfcf;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}

.PL-Category div{
    width: 90%;
    height: 10px;
    border-radius: 3px;
    background-color: white;
}

@keyframes shimmer {
    0% {
        background-position: -100% 0;
    }

    100% {
        background-position: 100% 0;
    }
}
/*#endregion cardLoader*/
