.popup {
    display: none; 
    position: fixed;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    background-color: #fff;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    z-index: 1000;
}

.popup-content {
    padding: 20px;
    text-align: center;
}
/* 
.close-popup {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
} */
/*loader*/
.pure-material-progress-linear {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    height: 0.25em;
    color:black;
    /* background-color: black; 
    color: rgb(var(--pure-material-primary-rgb, 33, 150, 243)); */
    background-color: rgba(var(--pure-material-primary-rgb, 33, 150, 243), 0.12);
    font-size: 16px;
}

.pure-material-progress-linear::-webkit-progress-bar {
    background-color: transparent;
}

/* Determinate */
/* .pure-material-progress-linear::-webkit-progress-value {
    background-color: currentColor;
    transition: all 0.2s;
} */

/* .pure-material-progress-linear::-moz-progress-bar {
    background-color: currentColor;
    transition: all 0.2s;
} */

/* .pure-material-progress-linear::-ms-fill {
    border: none;
    background-color: currentColor;
    transition: all 0.2s;
} */

/* Indeterminate */
.pure-material-progress-linear:indeterminate {
    background-size: 200% 100%;
    background-image: linear-gradient(to right, transparent 50%, currentColor 50%, currentColor 60%, transparent 60%, transparent 71.5%, currentColor 71.5%, currentColor 84%, transparent 84%);
    animation: pure-material-progress-linear 2s infinite linear;
}

/* .pure-material-progress-linear:indeterminate::-moz-progress-bar {
    background-color: transparent;
} */

/* .pure-material-progress-linear:indeterminate::-ms-fill {
    animation-name: none;
} */

@keyframes pure-material-progress-linear {
    0% {
        background-size: 200% 100%;
        background-position: left -31.25% top 0%;
    }
    50% {
        background-size: 800% 100%;
        background-position: left -49% top 0%;
    }
    100% {
        background-size: 400% 100%;
        background-position: left -102% top 0%;
    }
}

   /* CSS for the close button */
   .close-button {
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 14px;
    margin-top: 10px;
    outline: none;
    border-radius: 4px;
}

/* CSS for the error message */
.error-message {
    color: #797676;
    font-size: 16px;
    margin: 0;
}

/* CSS for the error container (centering and styling) remains the same */
.error-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
    border: 2px solid rgb(242, 221, 221);
    z-index: 9999;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    display: none; 
}
.close-button {
    position: absolute;
    top: 0px;
    right: 10px;
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #000; /* Adjust the color as needed */
}
#ok-button{
    display: none;
}