.mdctable {
        border-collapse: collapse;
        width: 100%;
    }

    .mdctable th,
    .mdctable td {
        border: 1px solid #dee2e6; /* Bootstrap's default border color */
        padding: 8px; /* Optional: add padding to cells */
    }

    .mdctable thead th {
        background-color: #f8f9fa; /* Optional: add a light background to header */
    }

.star-rating {
        direction: rtl;
        display: inline-block;
        font-size: 1.5rem;
        position: relative;
    }

    .star-rating input {
        display: none;
    }

    .star-rating label {
        color: #ddd;
        cursor: pointer;
        font-size: 1.5rem;
        padding: 0 3px;
    }

    .star-rating input:checked ~ label {
        color: #fc0;
    }

    .star-rating label:hover,
    .star-rating label:hover ~ label {
        color: #f5a623;
    }

    .null-star {
        color: #fc0 !important; /* Yellow color to match the stars */
        font-size: 1.6rem; /* Size of the symbol */
        display: inline-block; /* To ensure it's inline with the stars */
        margin-left: 10px; /* Optional: space between stars and cross */
    }

.navbar-custom {
  background-color: #343a40; /* Dark background color */
  color: #ffffff; /* Light text color */
}

.navbar-custom .navbar-brand,
.navbar-custom .nav-link {
  color: #ffffff !important; /* Ensure text is white */
}

.navbar-custom .navbar-toggler-icon {
  filter: invert(1); /* Optional: Invert the toggler icon color */
}

.navbar-custom .dropdown-menu {
  background-color: #495057; /* Darker background for dropdown */
}

.navbar-custom .dropdown-item {
  color: #ffffff; /* Light text for dropdown items */
}

.navbar-custom .btn-outline-light {
  color: #ffffff;
  border-color: #ffffff;
}

.navbar-custom .btn-outline-light:hover {
  background-color: #ffffff;
  color: #343a40;
}

.navbar-custom .nav-link.active {
  font-weight: bold; /* Makes the text bold */
  font-size: 1.1rem; /* Increases font size */
  color: #f0f0f0 !important; /* Ensures text color stands out against the dark background */
  background-color: #495057; /* Optionally, add a background color to highlight the active link */
}

.navbar-custom .nav-link.active:hover {
  color: #ffffff; /* Ensures text color remains visible on hover */
  background-color: #6c757d; /* Optionally change background on hover */
}

.custom-close-button .btn-close {
  width: 1rem; /* Adjust width */
  height: 1rem; /* Adjust height */
  font-size: 0.75rem; /* Adjust font size for the "X" */
}

.fc-daygrid-day a {
  color: inherit;
  text-decoration: none;
}

.fc-daygrid-day a:hover {
  text-decoration: none;
}

.fc-col-header-cell-cushion {
  color: inherit; /* Ensure text color is not affected by Bootstrap */
  text-decoration: none; /* Remove text decoration if applied by Bootstrap */
}

.fc-col-header-cell {
  background-color: #f8f9fa; /* Optional: Set a background color to make headers distinct */
  border: 1px solid #dee2e6; /* Optional: Add a border for better separation */
}

.table .description-actions-cell {
    max-width: 500px; /* Set maximum width */
    overflow: hidden; /* Hide overflow */
    text-overflow: ellipsis; /* Add ellipsis (...) for overflow text */
    word-break: break-word; /* Break long words */
}

.description-text {
    max-height: 50px; /* Set maximum height */
    overflow-y: auto; /* Add a vertical scrollbar if the content exceeds the height */
    white-space: nowrap; /* Prevent text wrapping */
    margin: 0 0 0 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); /* Inner shadow effect */
}

.actions-container {
    max-height: 50px; /* Set maximum height */
    overflow-y: auto; /* Add a vertical scrollbar if the content exceeds the height */
    margin-top: 0px; /* Add some space between description and actions */
    margin-left: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); /* Inner shadow effect */
}

/* Ensure all buttons have rounded corners */
.btn {
    border-radius: .375rem !important; /* Force apply with !important */
}

/* Ensure btn-group buttons are spaced and have rounded corners */
.btn-group {
    display: flex;
    gap: 10px; /* Space between buttons */
}

.btn-group .btn {
    border-radius: .375rem !important; /* Force apply with !important */
    margin: 0; /* Reset any default margin */
}

/* Remove space between the last button and the container */
.btn-group .btn:last-child {
    margin-right: 0;
}

/* Ensure button height and line height are consistent */
.custom-btn {
    height: calc(2.4rem + 2px); /* Adjust based on design requirements */
    line-height: 1.5; /* Ensure vertical alignment of text */
}

/* Toggle Switch */
.switch {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 20px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 20px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 12px;
    width: 12px;
    border-radius: 50%;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
}

input:checked + .slider {
    background-color: #4CAF50;
}

input:checked + .slider:before {
    transform: translateX(14px);
}

/* Rounded slider */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

.fc-event {
    cursor: pointer;
}

.category-badge {
    text-decoration: none; /* Removes underline */
}

.category-badge:hover {
    text-decoration: none; /* Ensures underline does not appear on hover */
}

.text-bg-badge-custom-pink {
    background-color: #e83e8c; color: #fff;
}

.text-bg-badge-primary-subtle { background-color: #cfe2ff; color: #084298; }
.text-bg-badge-success-subtle { background-color: #d9f99d; color: #1c7430; }
.text-bg-badge-danger-subtle { background-color: #f8d7da; color: #842029; }
.text-bg-badge-warning-subtle { background-color: #fff3cd; color: #664d03; }
.text-bg-badge-info-subtle { background-color: #d1ecf1; color: #0c5460; }
.text-bg-badge-light-subtle { background-color: #fefefe; color: #6c757d; }
.text-bg-badge-dark-subtle { background-color: #d3d3d3; color: #212529; }

/*.nav-tabs .nav-link {
    color: #495057;
    border: 1px solid transparent;
    border-radius: 0.25rem;
}*/

/* Set a max width for each tab and enable text wrapping */
.nav-tabs .nav-link {
    max-width: 120px; /* Adjust this value as needed */
    white-space: normal; /* Allow text to wrap */
    text-align: center; /* Center align the text */
    overflow: hidden; /* Hide any overflowed text */
    text-overflow: ellipsis; /* Show ellipsis for overflowed text */
    word-wrap: break-word; /* Break long words if necessary */
    padding: 10px; /* Adjust padding for better spacing */
    color: #495057;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    display: flex; /* Use flexbox for vertical centering */
    align-items: center; /* Vertically center text */
    justify-content: center; /* Horizontally center text */
}

/* Optional: Adjust font size for tabs to improve readability */
.nav-tabs .nav-link {
    font-size: 15px; /* Adjust font size as needed */
    max-height: 70px; /* Adjust this value as needed */
    height: 70px;
}

/* Add some bottom margin to ensure spacing between lines */
.nav-tabs .nav-item {
    margin-bottom: 5px;
}

.nav-tabs .nav-link.active {
    color: #ffffff; /* Text color for active tab */
    background-color: #1c7430; /* Background color for active tab */
    border-color: #1c7430; /* Border color for active tab */
    font-weight: bold; /* Make text bold */
}

.nav-tabs .nav-link:hover {
    background-color: #e9ecef; /* Background color on hover */
    color: #1c7430; /* Text color on hover */
}

select.form-select option:checked {
    background-color: #007bff; /* Bootstrap primary blue color */
    color: white; /* Ensures text is readable against the blue background */
}

.btn-spectacles {
    background-color: #2196f3;
    color: white; /* Ensure text is readable */
}

.btn-spectacles:hover {
    background-color: #2196f3; /* Maintain background color on hover */
    color: white; /* Ensure text is readable on hover */
    opacity: 0.7; /* Optional: add slight transparency effect on hover */
}

.btn-voyages {
    background-color: #ff5722;
    color: white; /* Ensure text is readable */
}

.btn-voyages:hover {
    background-color: #ff5722;
    color: white; /* Ensure text is readable */
    opacity: 0.7;
}

.rounded-image {
    border-radius: 7px; /* Adjust the radius as needed */
    width: 300px; /* Set the width */
    height: auto; /* Maintain aspect ratio */
}

.tooltip-icon {
        color: #007bff;  /* Bootstrap blue */
        font-weight: bold;
        font-size: 1.2em;
        cursor: pointer;
        margin-left: 5px;
        text-decoration: none;
    }

    .tooltip-icon:hover {
        color: #0056b3; /* Darker shade of blue on hover */
        text-decoration: underline;
    }

    .tooltip-inner {
        font-size: 1.1em; /* Increase font size */
        padding: 10px;     /* Add padding for readability */
        max-width: 300px;  /* Optional: Set a max width */
        background-color: #333; /* Dark background for contrast */
        color: #fff;       /* White text for readability */
    }

    /* Optional: Arrow styling */
.tooltip.bs-tooltip-top .arrow::before {
    border-top-color: #333;
}

.photo-id {
    font-size: 20px; /* Font size */
    font-weight: bold; /* Bold text */
    color: #fff; /* Text color white */
    background-color: #000; /* Background color black */
    padding: 10px; /* Increased padding for a more spacious look */
    border-radius: 15px; /* More rounded corners */
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); /* Slight shadow for depth */
    display: inline-block; /* Make it inline block */
    text-align: center; /* Center the text */
    border: 2px solid #fff; /* White border for emphasis */
    min-width: 50px; /* Minimum width to ensure visibility */
    max-width: 60px; /* Maximum width to maintain proportion */
}

/* Darkroom Safe Mode Styling for Alert Success */
.darkroom-light-safe .alert-success {
    background-color: #440000; /* Darker red background */
    color: #ff4500; /* Dim orange text for better contrast */
    border: 1px solid #ff4500; /* Orange border */
    box-shadow: 0 2px 4px rgba(255, 69, 0, 0.6); /* Slight shadow to enhance visibility */
}

.darkroom-light-safe .alert-success h4 {
    color: #ff6347; /* Brighter orange color for headings */
}

.darkroom-light-safe .alert-success ul {
    list-style-type: none; /* Remove list bullets */
    padding-left: 0; /* Remove left padding */
}

.darkroom-light-safe .alert-success li {
    color: #ff6347; /* Brighter orange for list items */
}
