/* Styles for the MudNavMenu to justify and center the text */
.nav-menu {
    display: flex;
    justify-content: center; /* Center the entire menu */
    align-items: center; /* Center align the items vertically */
}

.nav-link {
    color: black;
    text-align: center; /* Center text within each link */
    white-space: nowrap; /* Prevent text from wrapping to the next line */
    display: inline-block; /* Change to inline-block for proper spacing */
    margin-right: 0px; /* Set a margin to space out the items */
}

    /* Remove the margin from the last item to prevent extra space */
    .nav-link:last-child {
        margin-right: 0; /* Remove margin from the last item */
    }

/* Active navigation link styles */



/*Public Member Registration and Login Forms*/
.custom-login-background {
    background-image: url('/images/court_lesotho.jpg'); /* Path to your image */
    background-color: white; /* Path to your image */
    background-size: cover; /* Cover the entire area */
    background-position: center; /* Center the image */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    color: white; /* Change text color for better readability */
    display: flex; /* Use flexbox */
    flex-direction: column; /* Align children vertically */
    align-items: center; /* Center children horizontally */
    justify-content: center; /* Center children vertically */
    min-height: 100vh; /* Full height of the viewport */
}


.custom-login-form {
    background-color: rgba(254, 238, 219, 0.8); /* Change to transparent background */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    max-width: 1000px; /* Set a max width for the form */
    width: 200%; /* Ensure the form takes the full width up to max-width */
    margin: 0 auto; /* Center the form horizontally */
}


.custom-input {
    margin-bottom: 10px; /* Reduce margin between inputs */
}

.custom-checkbox {
    display: flex; /* Align the checkbox and text on the same line */
    align-items: center; /* Vertically center-align the checkbox and text */
    margin-bottom: 20px; /* Reduce space between checkbox and the "Log in" button */
}

.custom-button {
    margin-top: 10px; /* Reduce space above the "Log in" button */
    background-color: #F7AA4E; /* Apply the new color */
    color: white;
    border-radius: 5px;
}

    .custom-button:hover {
        background-color: #F0953C; /* Darker shade on hover */
    }


.link-container {
    display: flex; /* Use flexbox to arrange items in a row */
    justify-content: space-between; /* Space them to the edges */
    position: relative; /* Use position relative for finer control */
}

.left-link {
    align-self: flex-start; /* Align the first link to the left */
}

.center-link {
    position: absolute;
    left: 50%; /* Move the link to the center */
    transform: translateX(-50%); /* Center the link horizontally */
}

/*.right-link {
    align-self: flex-end;*/ /* Align the third link to the right */
/*}*/

.custom-input .mud-input {
    border-width: 1px; /* Increase border thickness */
    border-color: black; /* Optional: Set the border color */
    border-radius: 5px; /* Optional: Rounded corners */
}

    .custom-input .mud-input:hover {
        border-color: #F7AA4E; /* Change border color on hover */
    }

/*For notification drawer*/
.notification-unread .title, .notification-unread .message {
    color: red;
}

.notification-read .title, .notification-read .message {
    color: black;
}

.card-custom {
    border-radius: 8px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    padding: 16px;
}

.card-text-title {
    font-weight: bold;
    text-align: center;
}

.card-text {
    margin-top: 8px;
    text-align: center;
}

.card-contact {
    text-align: center;
}