.waitdiv {
    position: relative;
    width: 90% !important; 
    max-width: 350px !important; 
    margin: 20px auto !important; 
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center; 
}

.progress-container {
    border: 3px solid #00008b;
    width: 100% !important;
    height: 35px;
    background: #FFFFFF;
    border-radius: 20px;
    padding: 1px;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    overflow: hidden;
    animation: hideContainer 0.4s ease-out forwards;
    animation-delay: 10s;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 500;
}

.progress-bar {
    height: 100%;
    width: 0%;
    border-radius: 20px;
    background-image: linear-gradient(
        135deg,
        #0000CD 25%,
        #00008B 25%,
        #00008B 50%,
        #0000CD 50%,
        #0000CD 75%,
        #00008B 75%,
        #00008B
    );
    background-size: 40px 40px;
    box-shadow: inset 0 8px 8px rgba(255, 255, 255, 0.3), 
                inset 0 -8px 8px rgba(0, 0, 0, 0.2),
                2px 0 5px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    animation: fillProgress 10s linear forwards, moveStripes 1s linear infinite;
}

.progress-text {
    color: #ffffff;
    font-size: 14px;
    font-weight: bold;
    padding-right: 15px;
    white-space: nowrap;
    display: flex;
    gap: 4px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.progress-text::after {
    counter-reset: percent var(--num);
    content: " " counter(percent) "%";
    animation: countNumbers 10s linear forwards;
}

.Downloadbutton {
    border: 2px solid #000080;
    width: 100% !important;
    box-sizing: border-box;
    
    align-items: center;
    justify-content: center;
    background-color: #FFFFFF;
    color: #000080;
    padding: 12px;
    font-size: 15px;
    font-weight: 300;
    text-decoration: none;
    border-radius: 20px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: background-color 0.3s, color 0.3s;
    
    position: relative;
    margin: -35px auto 14px auto !important; 
    
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    
    animation: showButton 0.5s ease-out forwards;
    animation-delay: 10s;
}

.Downloadbutton:hover {
    background-color: #00008B;
    color: #FFFFFF;
}

@property --num {
    syntax: "<integer>";
    initial-value: 0;
    inherits: false;
}

@keyframes countNumbers {
    from { --num: 0; }
    to { --num: 100; }
}

@keyframes fillProgress {
    0% { width: 0%; }
    100% { width: 100%; }
}

@keyframes moveStripes {
    0% { background-position: 0 0; }
    100% { background-position: 40px 0; }
}

@keyframes hideContainer {
    0% {
        opacity: 1;
        visibility: visible;
        height: 35px;
    }
    100% {
        opacity: 0;
        visibility: hidden;
        height: 0px;
        margin: 0;
        padding: 0;
    }
}

@keyframes showButton {
    0% {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        margin-top: -35px !important;
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        margin-top: 0px !important;
        transform: scale(1);
    }
}