html, body {
    height: 100%;
    margin: 0;
    position: relative;
}
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Full viewport height */
    margin: 0; /* Remove default body margin */
    background-image: url('../../custom/image/manager_bg_01.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: white;
}

#logreg-forms {
    width: 412px;
    background-color: #f3f3f3;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}

/* Mobile */
@media screen and (max-width: 500px) {
    #logreg-forms {
        width: 300px;
    }
}

.file-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
}
.modal-footer {
    display: flex;
    justify-content: space-between;
}

#waitingLayer {
    display: none; /* Initially hidden */
    position: fixed; /* Stay in the same place */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center the layer */
    z-index: 9999; /* Ensure it's on top */
}

#waiting_layer_image {
    animation: spin 2s linear infinite; /* Apply the spin animation */
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}