/* Set background color and font family for the entire page */
html, body {
    background-color: #f8f9fa; /* Light grayish background */
    font-family: 'Roboto', sans-serif; /* Use Roboto font with a fallback */
}

/* Ensure footer stays above most content */
footer {
  z-index: 101; /* Keeps the footer above most other elements */
}

/* Responsive styles for screens smaller than 992px */
@media (max-width: 992px) {
  /* Adjust margin and alignment for centering content */
  .justify-content-center {
    margin-top: 20px; /* Adds spacing from the top */
    justify-content: flex-start !important; /* Forces left alignment */
  }

  /* Adjust footer styles for smaller screens */
  footer {
    z-index: 99; /* Lower priority than larger screens */
    padding-bottom: 20px; /* Adds bottom padding for better spacing */
  }
}

/* Styling for textareas with scrolling enabled */
.scrollable-textarea {
   height: 300px; /* Fixed height */
   resize: none; /* Prevents manual resizing */
   overflow-y: auto; /* Enables vertical scrolling */
}

/* Large spinner style */
.spinner-border-large {
    width: 5rem; /* Larger width */
    height: 5rem; /* Larger height */
}

/* Style for text accompanying a loading spinner */
.spinner-text {
    margin-top: 15px; /* Spacing above text */
    font-size: 1.5rem; /* Larger font size */
    font-weight: bold; /* Makes the text bold */
}

/* Overlay screen for loading animations */
.loading-overlay {
    position: fixed; /* Stays in place while scrolling */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.9); /* Semi-transparent white background */
    display: flex; /* Enables flexbox centering */
    align-items: center; /* Centers items vertically */
    justify-content: center; /* Centers items horizontally */
    z-index: 100; /* Stays above most elements */
    opacity: 0; /* Initially hidden */
    visibility: hidden; /* Prevents interaction when hidden */
    transition: opacity 0.25s ease-in-out, visibility 0.25s ease-in-out; /* Smooth fade-in/out */
}

/* Make overlay visible when the 'active' class is added */
.loading-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Spinner inside the loading overlay */
.loading-overlay .spinner-border {
    width: 3rem;
    height: 3rem;
    color: #4285F4; /* Google blue color */
}

/* Adjust validation styles for form elements */
.was-validated .form-control:invalid,
.was-validated .invalid-feedback {
    position: relative;
    z-index: 5; /* Ensures error messages stay visible */
}