.page-header {
    background: linear-gradient(rgba(53, 53, 53, .7), rgba(53, 53, 53, .7)), url(/static/assets/treasury-background.png) center center no-repeat;
    background-size: cover;
}

.footer-menu a {
    color:white;
    display:block;
    margin-top: 10px;
    text-decoration: none;
}

.modal-title {
    color:white;
}

.homepage-link, .homepage-link:hover, .homepage-link:focus {
    text-decoration: none;
    color: black;
}
.homepage-img {
    height: 275px;
    object-fit: cover;
}

.bg-muted {
    background-color:#FBFBFB;
}

/* Style for create-resource-modal */
#create-resource-modal .modal-dialog {
    max-width: 90%; /* Set the width of the modal */
    margin: 20px auto; /* Center the modal with some margin */
}

#create-resource-modal .modal-content {
    border-radius: 10px; /* Rounded corners */
    border: 1px solid #ccc; /* Light border for visual separation */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

#create-resource-modal .modal-header {
    background-color: #f8f9fa; /* Light gray background */
    border-bottom: 1px solid #ddd; /* Light border */
}

#create-resource-modal .modal-body {
    padding: 0; /* Remove default padding */
}

#create-resource-modal iframe {
    width: 100%;
    height: 80vh; /* Set height to 80% of the viewport height */
    border: none;
    display: block;
}

/* Disabled links */
.disabled {
    color: gray;               /* Gray color to indicate it's disabled */
    pointer-events: none;      /* Prevents the link from being clickable */
    text-decoration: none;     /* Removes underline (optional) */
    cursor: not-allowed;       /* Changes cursor to indicate it's disabled */
    opacity: 0.6;              /* Optional: reduces opacity to make it look more disabled */
}

.wide-modal {
    max-width: 75vw; /* Adjust the width as needed */
    width: auto;    /* Make it responsive */
}

/* Full screen modal adjustments */
#mapModal .modal-dialog {
    width: 100vw;        /* Full viewport width */
    height: 100vh;       /* Full viewport height */
    margin: 0;           /* Remove all margins */
    max-width: 100vw;    /* Ensure no maximum width limit */
    max-height: 100vh;   /* Ensure no maximum height limit */
}

#mapModal .modal-content {
    height: 100vh;       /* Full height of the viewport */
    border-radius: 0;    /* Remove border radius to cover the full screen */
}

#create-resource-container {
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

#create-resource-container .row {
    min-height: 100vh; /* Makes the row take the full viewport height */
    padding-top: 5rem;
}

#create-resource-container h5 {
    font-size: 1.25rem;
    color: #343a40; /* Dark grey for the title text */
    margin-bottom: 1.5rem;
    text-align: center;
}

#create-resource-container label {
    font-weight: bold;
    color: #495057; /* Medium dark grey for label text */
}

#create-resource-container .form-select {
    padding: 0.75rem;
    border: 1px solid #ced4da;
    border-radius: 4px;
    transition: border-color 0.3s ease;
}

#create-resource-container .form-select:focus {
    border-color: #80bdff;
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Blue shadow on focus */
}

#create-resource-container .btn-primary {
    width: 100%;
    padding: 0.75rem;
    font-size: 1rem;
    font-weight: bold;
    background-color: #007bff;
    border-color: #007bff;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

#create-resource-container .btn-primary:hover {
    background-color: #0056b3; /* Darker blue on hover */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15); /* Shadow effect on hover */
}