/* styles.css */

#loading {
    display: none;
    text-align: center;
    margin-top: 20px;
}

/* Reset some default styling */
body, h1, h2, p, ul, li {
    margin: 0;
    padding: 0;
}

/* Apply styles to the navigation */
nav {
    background-color: #333;
    padding: 10px;
    position: relative; /* Add position relative */
}

nav ul {
    list-style-type: none;
    display: flex;
    flex-direction: column; /* Change to column */
}

nav li {
    margin: 5px 0;          /* Adjust vertical spacing */
}

nav a {
    text-decoration: none;
    color: #fff;
    padding: 8px 12px;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

nav a:hover {
    background-color: #aba9a9;
}

/* Add styles for the Login and Sign Up buttons */
.login-buttons {
    position: absolute; /* Position absolute for top right alignment */
    top: 10px;
    right: 10px; /* Add margin space on the right */
    display: flex;
    align-items: center;
}

.login-buttons a,
.login-buttons button {
    background-color: #007bff; /* Green background color */
    color: white; /* White text color */
    padding: 8px 12px;
    border: none;
    border-radius: 4px;
    margin-left: 10px; /* Add spacing between buttons */
    text-decoration: none; /* Remove underline for anchor tag */
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.login-buttons a:hover,
.login-buttons button:hover {
    background-color: #005eff; /* Darker green on hover */
}

/* Add styles for the Logout button */
.logout-buttons {
    position: absolute; /* Position absolute for top right alignment */
    top: 10px;
    right: 10px; /* Add margin space on the right */
    display: flex;
    align-items: center;
}

/* Add styles for the Logout button */
.logout-buttons .custom-logout-button {
    background-color: #e3a7a7; /* Dark red background color */
    color: rgb(0, 0, 0); /* White text color */
    padding: 8px 12px;
    border: none;
    border-radius: 4px;
    margin-left: 10px; /* Add spacing between buttons */
    margin-right: 10px; /* Add right margin */
    text-decoration: none; /* Remove underline for anchor tag */
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.logout-buttons .custom-logout-button:hover {
    background-color: #555; /* Dark gray on hover */
    color: white; /* Maintain white text color on hover */
}

/* Fix the issue with white links on a white background */
.logout-buttons .custom-logout-button:active,
.logout-buttons .custom-logout-button:focus {
    background-color: #8B0000; /* Dark red background color on active/focus */
}


/* Media query for additional adjustments if needed */
@media only screen and (max-width: 600px) {
    nav ul {
        align-items: flex-start; /* Left-align items */
    }

    /* Add any additional styles for smaller screens if needed */
}

/* Additional style for the close button */
.close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px;
    cursor: pointer;
}

/* Add these styles for centering and enlarging */
.section-shaped {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.card {
    width: 100%; /* Set to 100% width */
    max-width: 400px; /* Set the maximum width for larger screens */
    margin: 0 auto; /* Center the card */
}

body {
    background-color: #f8f9fa; /* Light gray background color */
}

.navbar {
    background-color: #007bff; /* Blue navbar background color */
}

.navbar-light .navbar-nav .nav-link {
    color: #ffffff; /* White text color for navbar links */
}

.navbar-light .navbar-toggler-icon {
    background-color: #ffffff; /* White color for navbar toggler icon */
}

h1, label, .form-control, .btn {
    margin-bottom: 1rem; /* Add space between elements */
}

.mt-4 {
    margin-top: 1.5rem; /* Add top margin for spacing */
}

.form-container {
    background-color: #ffffff; /* White background color for form container */
    padding: 20px; /* Add padding to the form container */
    border-radius: 8px; /* Add border-radius for rounded corners */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Add box shadow for depth */
}

/* Add styles for navbar buttons */
.login-buttons a {
    margin-left: 10px; /* Adjust margin for spacing */
}

.nav-item a {
    color: #000000 !important; /* Set text color to black for navbar links */
}

.nav-item a:hover {
    color: #ffffff !important; /* Set text color to white on hover for navbar links */
}


.forgot-password-link,
.create-account-link {
    color: #343a40; /* Set the color to a contrasting color, e.g., dark gray (#343a40) */
    display: block;
    text-align: center;
    margin-top: 10px; /* Adjust the margin as needed for spacing */
}

/* Ensure proper visibility for submenu items */
.navbar-light .navbar-nav .nav-link,
.navbar-light .navbar-nav .dropdown-item {
    color: #000 !important;
}

.navbar-light .navbar-nav .nav-item:hover > .nav-link,
.navbar-light .navbar-nav .nav-item:hover > .dropdown-item {
    color: #fff !important;
    background-color: #bfbfbf; /* You can adjust the color code as needed */
}
.dropdown-item:hover {
    background-color: #d9d9d9;
    color: #d9d9d9;
}
.text-success {
    color: green;
}

.text-warning {
color: orange;
}

.text-danger {
color: red;
}