/* calendar.css */
body {
    font-family: Arial, sans-serif;
}

#calendar-container {
    max-width: 600px;
    margin: auto;
    text-align: center;
}

#calendar {
    width: 100%;
    border-collapse: collapse;
    border: 5px solid #000;
}
#calendar-month {
    color: #007bff; /* Blue color */
    font-size: 24px; /* Larger font size */
    font-weight: bold; /* Make font bold */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Text shadow for depth */
}


#calendar th, #calendar td {
    border: 1px solid #ddd;
    padding: 8px;
    border: 2px solid #4c4c4c;
}
.calendar-popup {
    position: absolute;
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 10px;
    display: none; /* Hidden by default */
}
.day.selected {
    background-color: #007bff;
    color: #fff;
}


#calendar th {
    background-color: #007bff;
    color: white;
}

#calendar td {
    height: 50px;
}
#calendar-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.month-banner {
    background: linear-gradient(135deg, #007bff 0%, #004785 100%);
    color: #ffffff; /* Text color */
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 20px; /* Adjust as needed */
    font-weight: bold; /* Bold font */
    text-align: center;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5); /* Optional text shadow for depth */
    margin: 0 20px; /* Spacing between elements */
    width: 50%;
}

.nav-button {
    background: linear-gradient(135deg, #007bff 0%, #004785 100%);
    color: #ffffff; /* Button text color */
    border: none;
    padding: 10px 15px;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
}

.nav-button:hover {
    background: linear-gradient(135deg, #007bff 0%, #004785 50%);
}

.day {
    cursor: pointer;
}
.has-event {
    cursor: pointer; /* Indicates the day is clickable */
}

.event-title {
    font-family: 'Roboto', sans-serif; /* Example of a clean, professional font */
    font-size: 14px; /* Adjust font size as needed */
    border: 1px solid #ccc; /* Thin border around the event title */
    padding: 2px 5px; /* Add some padding inside the border */
    margin-bottom: 2px; /* Space between consecutive events */
    border-radius: 4px; /* Optional: adds rounded corners to the border */
    background-color: #f9f9f9; /* Slight background color for contrast */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Optional: adds a subtle shadow for depth */
    color: #333; /* Font color */
    display: block; /* Ensure each title is on its own line */
    overflow: hidden; /* Ensures the content fits within the borders */
    text-overflow: ellipsis; /* Adds an ellipsis for overflow text */
    white-space: nowrap; /* Prevents the text from wrapping */
}


.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
    background-color: #fefefe;
    margin: 10% auto; /* Adjust as needed */
    padding: 20px;
    border: 1px solid #888;
    width: 60%; /* Adjust based on preference */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Subtle shadow */
    border-radius: 10px; /* Rounded corners */
}

.event-details {
    border: 1px solid #ccc; /* Border around each event for separation */
    padding: 10px;
    margin-bottom: 10px; /* Space between events */
    border-radius: 5px; /* Slightly rounded corners for each event */
    background-color: #f9f9f9; /* Light background for each event */
}

.event-details:last-child {
    margin-bottom: 0; /* Removes margin from the last event for consistency */
}

.event-title, .event-description, .event-info {
    margin-bottom: 5px;
}

.event-title {
    font-size: 18px; /* Larger, standout title */
    font-weight: bold;
}

.event-description, .event-info {
    font-size: 14px; /* Smaller font for details */
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
.select2-container--default .select2-selection--multiple {
    min-height: 34px; /* Adjust based on your preference */
    width: 100%; /* Ensures it takes full width */
}

.select2-container .select2-selection--single {
    height: 38px; /* Adjust if you're using single select and it's also affected */
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    width: 98%; /* Ensures the search field inside the dropdown is almost full width */
}
/* Directly target the Select2 container for the specific select box */
#s2id_shareWithUser {
    width: 100% !important; /* Ensure it takes the full width */
}

/* Alternatively, if the above doesn't work, target all Select2 containers */
.select2-container {
    width: 100% !important; /* Ensure it takes the full width of its parent */
}

/* Ensure the select element itself is also not constrained */
#shareWithUser {
    width: 100% !important;
}

#addEventForm {
    background-color: #fff; /* Consistent with modal */
    padding: 15px;
    border-radius: 5px; /* Slightly rounded corners */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Subtle shadow */
    margin-top: 20px; /* Space from the event listing */
}

#addEventForm input[type="text"],
#addEventForm textarea,
#addEventForm select,
#addEventForm input[type="date"],
#addEventForm input[type="color"] {
    width: 100%; /* Full width */
    padding: 8px;
    margin: 8px 0; /* Margin for spacing */
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px; /* Rounded borders */
    box-sizing: border-box; /* Box sizing */
}

#addEventForm input[type="submit"] {
    width: 100%;
    background-color: #007bff;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

#addEventForm input[type="submit"]:hover {
    background-color: #0056b3;
}

/* Additional styles for select2 to match the form */
.select2-container--default .select2-selection--multiple {
    border: 1px solid #ccc;
    border-radius: 4px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #007bff;
    color: white;
    padding: 0 5px;
    border: 1px solid #004885;
    border-radius: 3px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: white;
}

/* Style adjustments for the color picker */
#addEventForm input[type="color"] {
    padding: 0;
    height: 34px; /* Match the height of other form elements */
}