/* Set the default background color for all pages */
body {
    background-color: #f2f5f7; /* Light gray background color */
    color: #faf8f8f5; /* Default text color */
}

/* #324d70; */

/* Button styles */
.submit-button, 
.send-emails-button, 
.upload-file-button, 
.login-button {
    width: 150px; /* Set the width of the button */
    height: 40px; /* Set the height of the button */
    font-size: 16px; /* Set button font size */
    border: none; /* Remove button border */
    border-radius: 5px; /* Apply border radius to button */
    cursor: pointer; /* Change cursor to pointer on hover */
    margin: 10px 5px; /* Add consistent margin to buttons for spacing */
}

.submit-button {
    background-color: #007bff; /* Set button background color */
    color: #fff; /* Set button text color */
}

.upload-file-button {
    background-color: #007bff; /* Set button background color */
    color: #fff; /* Set button text color */
}

.send-emails-button {
    background-color: #4CAF50; /* Green */
    color: white;
}

.login-button {
    background-color: #6c757d; /* Set button background color */
    color: #fff; /* Set button text color */
}

.submit-button:hover {
    background-color: #0056b3; /* Change background color on hover */
}

.send-emails-button:hover {
    background-color: #4CAF50; /* Green */
    color: white;
}

.login-button:hover {
    background-color: #5a6268; /* Change background color on hover */
}

.form-inline {
    margin-bottom: 20px; /* Add some margin between the form and other elements */
}

.error-message {
    color: red; /* Style error messages in red */
}

.messages {
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid transparent;
    border-radius: .25rem;
    color: #000; /* Default text color */
}

/* Success message */
.alert-success {
    background-color: #d4edda; /* Light green background */
    border-color: #c3e6cb; /* Green border */
    color: #155724; /* Dark green text color */
}

/* Error message */
.alert-danger {
    background-color: #f8d7da; /* Light red background */
    border-color: #f5c6cb; /* Red border */
    color: #721c24; /* Dark red text color */
}

/* Warning message */
.alert-warning {
    background-color: #fff3cd; /* Light yellow background */
    border-color: #ffeeba; /* Yellow border */
    color: #856404; /* Dark yellow text color */
}

/* Info message */
.alert-info {
    background-color: #d1ecf1; /* Light blue background */
    border-color: #bee5eb; /* Blue border */
    color: #0c5460; /* Dark blue text color */
}

/* Ensure message list items are styled properly */
.messages ul {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
}

.messages li {
    margin-bottom: 0.5rem; /* Spacing between messages */
}


/* Prevent profile image from changing color on hover */
.nav-link img {
    transition: none; /* Disable transition effects */
}

.nav-link:hover img {
    filter: none; /* Remove any filter effects */
    background-color: transparent; /* Ensure background color remains transparent */
}

/* Dropdown menu styles */
.dropdown-menu {
    display: none; /* Hide by default */
    position: absolute; /* Position it absolutely */
    z-index: 2000; /* Ensure it is above other elements */
    background-color: white; /* Ensure it has a background color */
    border: 1px solid #ccc; /* Add a border */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add a subtle box shadow */
    max-width: 300px; /* Set a maximum width for the dropdown */
    word-wrap: break-word; /* Ensure long words or URLs wrap to the next line */
    white-space: normal; /* Allow text to wrap */
    text-align: left;
}

.dropdown-menu.show {
    display: block !important; /* Force show when dropdown is active */
}

/* Adjustments for smaller screens */
@media (max-width: 768px) {
    .dropdown-menu {
        max-width: 100%; /* Allow the dropdown to take up the full width */
        padding: 0.5rem; /* Add padding for better spacing */
    }

    .dropdown-item {
        font-size: 0.9rem; /* Slightly reduce font size for smaller screens */
        padding: 0.5rem 0.75rem; /* Adjust padding for smaller screens */
    }
}


/* Register page styles */
.register-container, .profile-page-container {
    display: flex;
    justify-content: center; /* Centers the content horizontally */
    align-items: center; /* Centers the content vertically */
    flex-direction: column; /* Ensure everything is stacked vertically */
    margin: 0 auto;
    max-width: 500px; /* Limits the width of the container */
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.form-register {
    width: 100%;
    padding: 15px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.text-center {
    text-align: center;
    width: 100%; /* Ensures the width spans the entire container */
    margin-top: 10px; /* Adds space above this section */
}

.submit-button {
    background-color: #007bff; /* Set button background color */
    color: #fff; /* Set button text color */
    width: 150px; /* Set the width of the button */
    height: 40px; /* Set the height of the button */
    font-size: 16px; /* Set button font size */
    border: none; /* Remove button border */
    border-radius: 5px; /* Apply border radius to button */
    cursor: pointer; /* Change cursor to pointer on hover */
    margin: 10px 0px; /* Add consistent margin to buttons for spacing */
}

.submit-button:hover {
    background-color: #0056b3; /* Change background color on hover */
}

/* Specific label styles for form-register and form-signin */
.form-register label,
.form-signin label,
.form-register legend,
.form-signin legend,
.register-container h2,
.profile-page-container label,
.profile-page-container h2,
.form-signin h2 {
    color: #333; /* Set the text color to a dark color */
    font-weight: bold; /* Make the text bold */
    margin-bottom: 5px; /* Add some margin below the label */
    display: block; /* Ensure the label takes up the full width */
}

/* Required field asterisk */
.asteriskField {
    color: red; /* Set the color of the asterisk to red */
}

/* Center the form fields in the middle of the page */
.form-wrapper {
    max-width: 400px; /* Set a maximum width for the form */
    margin: 0 auto; /* Center the form horizontally */
    padding: 20px; /* Add some padding around the form */
    background-color: #ffffff; /* Set a background color for the form */
    border-radius: 8px; /* Add rounded corners to the form */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add a subtle box shadow */
}

/* Specific styles for form fields */
.form-register .form-group,
.form-signin .form-group {
    margin-bottom: 15px; /* Add margin between form fields */
}

.form-register .form-control,
.form-signin .form-control {
    width: 100%; /* Ensure the input boxes take up the full width of their container */
    padding: 10px; /* Add padding for better appearance */
    border: 1px solid #ccc; /* Add a border */
    border-radius: 4px; /* Add rounded corners */
    box-sizing: border-box; /* Ensure padding and border are included in the element's total width and height */
}

/* Align the profile page content to the left */
.profile-page-container {
    display: flex;
    justify-content: center; /* Align the content to the left */
    align-items: center; /* Align the content to the top */
    flex-direction: column; /* Stack the content vertically */
    min-height: 100vh; /* Ensure the container takes up the full height of the viewport */
}

/* Add spacing between Profile Info and the profile picture */
.profile-info {
    margin-bottom: 20px; /* Adjust the value as needed */
}

/* Specific styles for login form fields */
.login-form-wrapper #div_id_username, 
.login-form-wrapper #div_id_password{
    max-width: 400px; /* Set a maximum width for the input boxes */
    margin: 0 auto; /* Center the input boxes horizontally */
}

.login-form-wrapper #div_id_username .form-control, 
.login-form-wrapper #div_id_password .form-control{
    width: 100%; /* Ensure the input boxes take up the full width of their container */
    padding: 10px; /* Add padding for better appearance */
    border: 1px solid #ccc; /* Add a border */
    border-radius: 4px; /* Add rounded corners */
    box-sizing: border-box; /* Ensure padding and border are included in the element's total width and height */
}

/* Center the update button */
.profile-form-wrapper .form-group.text-center {
    display: flex;
    justify-content: center; /* Center the button horizontally */
}

/* Ensure form control elements have enough padding and consistent width */
.profile-form-wrapper .form-control {
    padding: 10px; /* Add padding for better appearance */
    width: 175%; /* Ensure the input boxes take up the full width of their container */
    max-width: 600px; /* Set a maximum width for the input boxes */
    box-sizing: border-box; /* Ensure padding and border are included in the element's total width and height */
}

/* Style for the legend element */
.profile-form-wrapper legend {
    font-size: 1.5em; /* Increase the font size */
    font-weight: bold; /* Make the text bold */
    color: #333; /* Set the text color */
    border-bottom: 2px solid #ccc; /* Add a bottom border */
    padding-bottom: 10px; /* Add padding below the text */
    margin-bottom: 20px; /* Add margin below the legend */
}

/* Form text and muted text color specific to profile-form */
.profile-form .form-text.text-muted {
    color: #d8d8d8 !important; /* Example color, adjust as needed */
}

.profile-form .form-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 20px;
    padding-bottom: 10px;
}

/* Text secondary color specific to profile-form */
.media-body .text-secondary {
    color: #000000fb !important; /* Example color, adjust as needed */
}


/* Add margin-bottom to the media element */
.media {
    margin-bottom: 20px; /* Adjust the value as needed */
}

/* Set text color for elements within the ck ck-content class */
.ck.ck-content p {
    color: #000; /* Set the text color to black or any other color that contrasts with the background */
}


.centered-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 0 auto;
    max-width: 600px; /* Adjust the max-width as needed */
    padding: 20px;
}

.centered-container form {
    width: 100%; /* Ensure the form takes up the full width of the container */
    text-align: left; /* Align text to the left within the form */
}

.centered-container form p,
.centered-container form ul,
.centered-container form label,
.centered-container form input,
.centered-container form button {
    text-align: left; /* Align text to the left for form elements */
    width: 100%; /* Ensure form elements take up the full width of the container */
}

.centered-container form ul {
    padding-left: 20px; /* Add padding to the left for the list */
}

.centered-container form button {
    text-align: center; /* Center the button text */
}

.editable-email-content img {
    max-width: 100%; /* Ensure images are responsive */
    height: auto; /* Maintain aspect ratio */
    width: auto; /* Maintain original width if specified */
}

.errorlist {
    color: red;
    list-style-type: none; /* Remove default list styling */
    padding: 0;
}

/* Specific styling for non-field errors */
.errorlist.nonfield {
    margin-top: 20px;
    background-color: #f8d7da; /* Light red background */
    border: 1px solid #f5c6cb; /* Red border */
    border-radius: 5px; /* Rounded corners */
    padding: 10px; /* Padding inside the box */
}

/* Style each error message */
.errorlist li {
    margin-bottom: 10px; /* Add spacing between error messages */
    display: flex;
    align-items: center;
}

/* Icon for error messages */
.error-icon {
    margin-right: 10px; /* Space between icon and text */
    color: #721c24; /* Dark red color for icon */
}

/* Error message text */
.error-text {
    color: #721c24; /* Dark red color for text */
}

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    background-color: #14539293;
}
.navbar-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.header-container {
    display: flex;
    align-items: center;
    margin-bottom: 0; /* Remove bottom margin */
}
.header-title {
    margin-right: 10px;
}

.outlined-text {
    text-shadow: 
        -1px -1px 0 rgba(0, 0, 0, 0.5),  
        1px -1px 0 rgba(0, 0, 0, 0.5),
        -1px 1px 0 rgba(0, 0, 0, 0.5),
        1px 1px 0 rgba(0, 0, 0, 0.5); /* Create a faint black outline around the text */
}

.header-title a {
    text-decoration: none !important; /* Remove underline from link */
    color: #fff !important; /* Keep the text color white */
}
.header-title a:hover {
    text-decoration: none !important; /* Remove underline on hover */
    color: #e7e7e7 !important; /* Keep the text color white on hover */
}
.cloud-db-logo {
    width: 50px;
    height: 50px;
}

.tagline {
    margin-top: 5px; /* Adjust top margin */
    margin-bottom: 0; /* Remove bottom margin */
    padding-bottom: 10px;
}


.navbar-right {
    display: flex;
    align-items: center;
}
.navbar ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}
.navbar ul li {
    margin-left: 20px;
}
.navbar ul li a {
    text-decoration: none;
    color: #fff;
}
.profile-container {
    display: flex;
    align-items: center;
}
.profile-dropdown {
    margin-left: 20px;
}

.nav-link.dropdown-toggle {
    color: white; /* Make the arrow white */
    font-size: 18px; /* Increase the size of the arrow */
}

p {
    color: #000000e7; /* Set paragraph text color */
}

li {
    color:#000000e7;
}

#profileDropdownMenu {
    display: none;
    visibility: hidden;
    position: absolute; /* Position the dropdown relative to the navbar */
    top: 100%; /* Align it just below the navbar */
    left: auto !important; /* Reset the left position */
    right: 0; /* Align it to the right edge of the navbar */
    z-index: 2000; /* Ensure it appears above other elements */
    transform: none !important; /* Reset any transform applied */
    max-width: 300px; /* Set a maximum width for the dropdown */
    overflow-wrap: break-word; /* Break long words to prevent overflow */
    white-space: normal; /* Allow text to wrap */
    word-wrap: break-word; /* Ensure long words wrap */
    overflow-y: auto; /* Add a vertical scrollbar if content exceeds the height */
    max-height: 400px; /* Limit the height of the dropdown */
    padding: 10px; /* Add padding for better spacing */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
    background-color: white; /* Ensure the dropdown has a background color */
    border: 1px solid #ccc; /* Add a border */
    border-radius: 5px; /* Add rounded corners */
}

#profileDropdownMenu.show {
    display: block;
    visibility: visible;
}

#notificationBadge {
    position: absolute; /* Position the badge relative to the dropdown menu */
    bottom: 4px; /* Adjust to position it slightly below the dropdown menu */
    right: 15px; /* Adjust to position it slightly to the right of the dropdown menu */
    background-color: red;
    color: white;
    border-radius: 50%; /* Ensure it remains circular */
    width: 20px; /* Explicitly set the width */
    height: 20px; /* Explicitly set the height */
    line-height: 20px; /* Center the text vertically */
    font-size: 12px; /* Set the font size */
    font-weight: bold; /* Make the text bold */
    text-align: center; /* Center the text horizontally */
    padding: 0; /* Remove padding to prevent stretching */
    display: inline-block;
    z-index: 1000; /* Ensure it appears above other elements */
}

@media (max-width: 768px) {

    .profile-container {
        justify-content: center; /* Center the profile container on smaller screens */
        position: relative; /* Ensure the profile container is the positioning context */
    }

    #profileDropdownMenu {
        position: absolute; /* Position it relative to the navbar */
        top: 100%; /* Place it directly below the navbar */
        left: 0; /* Align it to the left edge of the navbar */
        right: 0; /* Stretch it to the right edge of the navbar */
        margin: 0; /* Remove any margin */
        width: 40%; /* Make it span the full width of the screen */
        z-index: 2000; /* Ensure it appears above other elements */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
        border: 1px solid #ccc; /* Add a border for separation */
        border-radius: 0; /* Remove rounded corners */
        background-color: white; /* Ensure the dropdown has a background color */
    }

    #notificationBadge {
        position: absolute; /* Keep the badge positioned relative to the profile container */
        bottom: -15px;
        right: 20px; /* Position it at the right of the profile container */
        transform: translate(50%, -50%); /* Adjust to ensure it stays in the top-right corner */
        width: 20px; /* Keep the same width as desktop */
        height: 20px; /* Keep the same height as desktop */
        line-height: 20px; /* Keep the text vertically centered */
        font-size: 12px; /* Keep the font size consistent */
        padding: 0; /* Ensure no extra padding is applied */
        text-align: center; /* Center the text horizontally */
        border-radius: 50%; /* Ensure it remains circular */
        background-color: red; /* Keep the red background */
        color: white; /* Keep the white text */
        font-weight: bold; /* Ensure the text is bold */
        z-index: 1000; /* Ensure it appears above other elements */
    }


}

#notificationsList p {
    color: #000; /* Set text color */
    background-color: #f8f9fa; /* Set background color */
    font-weight: bold; /* Make the text bold */
    padding: 0.25rem 1.5rem; /* Match the padding of .dropdown-item */
    margin: 0; /* Remove default margin */
    word-wrap: break-word; /* Break long words to prevent overflow */
    overflow-wrap: break-word; /* Ensure long words wrap */
    white-space: normal; /* Allow text to wrap to the next line */
    text-align: left; /* Align text to the left */
    display: block; /* Ensure it behaves like a block element */
}

#notificationsList p.dropdown-item {
    margin: 0.5rem 0; /* Add spacing between notifications */
    padding: 0.5rem 1rem; /* Adjust padding for better readability */
    font-size: 0.9rem; /* Adjust font size for smaller screens */
    background-color: #64646465; /* Optional: Add a subtle background color */
    border-radius: 4px; /* Optional: Add rounded corners */
    word-wrap: break-word; /* Ensure long words wrap */
    overflow-wrap: break-word; /* Break long words */
    white-space: normal; /* Allow text to wrap */
    text-align: left; /* Align text to the left */
}

/* Override dropdown-item color to black */
.dropdown-menu .dropdown-item,
.dropdown-item {
    color: #000 !important;
}

/* Make the Requests dropdown link a specific font size */
#requestsDropdown {
    font-size: 1.0rem; /* Change to your desired size */
}