/* Spinner Styles */





/* Spinner Styles */
.loading {
    width: 70px;
    height: 70px;
    border: 5px solid transparent;
    border-top: 5px solid red;
    border-right: 5px solid blue;
    border-bottom: 5px solid green;
    border-left: 5px solid yellow;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    position: relative; /* To position the text inside */
}

/* Text inside the spinner */
.loading-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px; /* Adjust the font size */
    font-family: 'Century Schoolbook';
    /*font-family: Arial, sans-serif;*/ /* Adjust the font family */
    color: blue; /* Adjust the text color */
    text-align: center;
    z-index: 10000; /* Ensure the text is above the spinner */
    pointer-events: none; /* Ensure the text doesn't interfere with cursor events */
}

/* Overlay Styles */
.overlay {
    display: none; /* Initially hidden */
    position: fixed; /* Cover the entire page */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    z-index: 9999; /* Ensure it is on top */
    display: flex; /* Use flexbox */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
}

/* Keyframes for the spin animation */
@keyframes spin {
    0% {
        transform: rotate(0deg); /* Start at 0 degrees */
    }

    100% {
        transform: rotate(360deg); /* End at 360 degrees */
    }
}

.loading::before,
.loading::after {
    content: '';
}







/*.loading {
    width: 70px;
    height: 70px;
    border: 5px solid transparent;
    border-top: 5px solid red;
    border-right: 5px solid blue;
    border-bottom: 5px solid green;
    border-left: 5px solid yellow;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    position: relative;*/ /* To position the text inside */
/*}*/

/* Text inside the spinner */
/*.loading-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;*/ /* Adjust the font size */
    /*font-family: 'Century Schoolbook';*/
    /*font-family: Arial, sans-serif;*/ /* Adjust the font family */
    /*color: blue;*/ /* Adjust the text color */
    /*text-align: center;
    z-index: 10000;*/ /* Ensure the text is above the spinner */
    /*pointer-events: none;*/ /* Ensure the text doesn't interfere with cursor events */
/*}*/

/* Overlay Styles */
/*.overlay {
    display: none;*/ /* Initially hidden */
    /*position: fixed;*/ /* Cover the entire page */
    /*top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);*/ /* Semi-transparent background */
    /*z-index: 9999;*/ /* Ensure it is on top */
    /*display: flex;*/ /* Use flexbox */
    /*justify-content: center;*/ /* Center horizontally */
    /*align-items: center;*/ /* Center vertically */
/*}*/

/* Keyframes for the spin animation */
/*@keyframes spin {
    0% {
        transform: rotate(0deg);*/ /* Start at 0 degrees */
    /*}

    100% {
        transform: rotate(360deg);*/ /* End at 360 degrees */
    /*}
}

.loading::before,
.loading::after {
    content: '';
}*/