:root {
    --dreso-blue: rgb(0, 41, 101);
    --rz-primary: rgb(0, 41, 101);
}

.drop-zone {
    padding: 20px;
    width: 100%;
    min-height: 100px;
    border: 2px dashed #0087F7;
    border-radius: 5px;
}

    .drop-zone.hover {
        border-style: solid;
    }
/* HTML: <div class="ds-loader"></div> */
.ds-loader {
    width: fit-content;
    font-size: 17px;
    font-family: monospace;
    line-height: 1.4;
    font-weight: bold;
    background: linear-gradient(#000 0 0) left, linear-gradient(#000 0 0) right;
    background-repeat: no-repeat;
    border-right: 5px solid #0000;
    border-left: 5px solid #0000;
    background-origin: border-box;
    position: relative;
    animation: ds-l9-0 2s infinite;
}

    .ds-loader::before {
        content: "Loading";
    }

    .ds-loader::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 0;
        width: 22px;
        height: 60px;
        background: linear-gradient(90deg,#000 4px,#0000 0 calc(100% - 4px),#000 0) bottom /22px 20px, linear-gradient(90deg,red 4px,#0000 0 calc(100% - 4px),red 0) bottom 10px left 0/22px 6px, linear-gradient(#000 0 0) bottom 3px left 0 /22px 8px, linear-gradient(#000 0 0) bottom 0 left 50%/8px 16px;
        background-repeat: no-repeat;
        animation: ds-l9-1 2s infinite;
    }

@keyframes ds-l9-0 {
    0%,25% {
        background-size: 50% 100%
    }

    25.1%,75% {
        background-size: 0 0,50% 100%
    }

    75.1%,100% {
        background-size: 0 0,0 0
    }
}

@keyframes ds-l9-1 {
    25% {
        background-position: bottom, bottom 54px left 0,bottom 3px left 0,bottom 0 left 50%;
        left: 0
    }

    25.1% {
        background-position: bottom, bottom 10px left 0,bottom 3px left 0,bottom 0 left 50%;
        left: 0
    }

    50% {
        background-position: bottom, bottom 10px left 0,bottom 3px left 0,bottom 0 left 50%;
        left: calc(100% - 22px)
    }

    75% {
        background-position: bottom, bottom 54px left 0,bottom 3px left 0,bottom 0 left 50%;
        left: calc(100% - 22px)
    }

    75.1% {
        background-position: bottom, bottom 10px left 0,bottom 3px left 0,bottom 0 left 50%;
        left: calc(100% - 22px)
    }
}

/* Other loader*/
/* HTML: <div class="loader"></div> */
.ds-loader-blob {
    width: 100px;
    aspect-ratio: 1;
    padding: 10px;
    box-sizing: border-box;
    display: grid;
    background: #fff;
    filter: blur(5px) contrast(10);
    mix-blend-mode: darken;
}

    .ds-loader-blob:before,
    .ds-loader-blob:after {
        content: "";
        grid-area: 1/1;
        background: linear-gradient(#000 0 0) left, linear-gradient(#000 0 0) right;
        background-size: 20px 40px;
        background-origin: content-box;
        background-repeat: no-repeat;
    }

    .ds-loader-blob:after {
        height: 20px;
        width: 20px;
        margin: auto 0;
        border-radius: 50%;
        background: #000;
        animation: ds-blob-l10 1s infinite;
    }

@keyframes ds-blob-l10 {
    90%,100% {
        transform: translate(300%)
    }
}