html, body {
    height: 100%; /* Ensure that the document height covers the entire page */
    font-family: Arial, sans-serif; /* Set a consistent font for better visual appeal */
    overflow-x: hidden; /* Prevent horizontal scrolling */
}

body {
    padding-top: 60px;
    padding-bottom: 60px;
    display: flex; /* Use flexbox to structure the page vertically */
    flex-direction: column; /* Arrange the elements in a column */
    min-height: 100vh; /* Ensure the minimum height is equal to the viewport height */
}

body::before {
    content: "";
    background: url('../images/bluesign_background.webp') no-repeat center center fixed;
    background-size: cover;
    opacity: 0.40;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}

.container {
    flex: 1; /* The container takes all available space, pushing the footer down */
}

.card-title {
    font-weight: bold;
    color: #0363C4;
}

.form-label, .navbar, .navbar *, body, h1, h2, h3, h4, h5, h6, p, span, a, li, label {
    color: #024487;
}

/* Style for readonly and disabled fields */
input[readonly],
textarea[readonly],
select[disabled],
input[type="checkbox"][disabled],
input[type="radio"][disabled],
input[type="file"][disabled] {
    background-color: #e9ecef;  /* Light grey background */
    cursor: not-allowed;        /* Indicate non-interactive fields */
    border-color: #ced4da;
}

input[type="checkbox"][disabled]:checked {
    background-color: #000;
    border-color: #ced4da;
    cursor: not-allowed;
}

/* Style for disabled buttons and links */
button:disabled,
a.disabled,
button.btn:disabled,             /* Target Bootstrap button classes */
button.btn-primary:disabled,
button.btn-secondary:disabled,
button.btn-danger:disabled,
button.btn-success:disabled {
    cursor: not-allowed;
    opacity: 0.65;               /* Visually indicate disabled state */
    pointer-events: none;        /* Disable interactions for links */
    color: #6c757d !important;   /* Muted color for readability */
    background-color: #e9ecef !important; /* Light grey background */
    border-color: #ced4da !important;     /* Consistent border color */
}

/* Optional: Placeholder styling for readonly inputs */
input[readonly]::placeholder,
textarea[readonly]::placeholder {
    color: #6c757d;               /* Muted color for placeholder text */
}

/* Custom styles for colored checkboxes */
.checkbox-custom-warning {
    border-color: #ffc107; /* Warning orange */
    background-color: #fff; /* White background */
}

.checkbox-custom-warning:checked {
    background-color: #ffc107;
    border-color: #ffc107;
}