:root {
    --bs-primary: #37A6D6;
}

body {
    font-family: 'Roboto', sans-serif;
    color: #333;
}

/* Navbar Styles */
.navbar {
    background-color: #37A6D6 !important; /* Navbar background color */
}

.navbar-brand img {
    max-height: 50px;
}

.navbar .navbar-brand,
.navbar .navbar-nav .nav-link {
    color: white; /* Navbar text color */
}

.navbar-brand svg {
    fill: white; /* Make sure the logo color matches your design */
    //height: 50px; /* Adjust the size if needed */
    height: 27px; /* Adjust the size if needed */
    width: auto;
}

.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link:hover {
    color: #37A6D6; /* Active/hover state for navbar links */
}

/* Navbar toggle button (for mobile) */
.navbar-toggler {
    border-color: rgba(255, 255, 255, 0.5); /* Light border for the toggle button */
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%28255, 255, 255, 1%29' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.nav-item.dropdown .dropdown-menu {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    visibility: hidden; /* Prevents clickability when hidden */
}

.nav-item.dropdown:hover .dropdown-menu {
    display: block;
    opacity: 1;
    visibility: visible;
    margin-top: 0; /* Ensures alignment */
}

.hidden {
   display: none;
}

.jumbotron {
    background-image: url('/img/csm_OAY_versie12_c415ea364f.webp');
    background-size: cover;
    background-position: center;
    background-color: #37A6D6; /* Background color for the hero section */
}

.jumbotron .btn-light {
    background-color: #37A6D6;
    border-color: #37A6D6;
    color: #fff;
}

.jumbotron .btn-light:hover {
    background-color: #2f8ab3;
    border-color: #2f8ab3;
}

.card-title {
    font-weight: 700;
}

.btn-primary {
    background-color: #37A6D6;
    border-color: #37A6D6;
}

.btn-primary:hover {
    background-color: #2f8ab3;
    border-color: #2f8ab3;
}

.footer {
    background-color: #1a1a1a;
}

.footer a {
    text-decoration: none;
    color: #37A6D6;
}

.footer a:hover {
    text-decoration: underline;
}

/* Navbar Styles */
.navbar {
    background-color: #37A6D6 !important; /* Navbar background color */
}

.navbar .navbar-brand,
.navbar .navbar-nav .nav-link {
    color: white; /* Navbar text color */
}

.navbar .navbar-nav .nav-link.active,
.navbar .navbar-nav .nav-link:hover {
    color: #dcdcdc; /* Slightly lighter color for active/hovered links */
}

/* Navbar toggle button (for mobile) */
.navbar-toggler {
    border-color: rgba(255, 255, 255, 0.5); /* Light border for the toggle button */
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%28255, 255, 255, 1%29' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}


/* Remove bullets on UL/LI */
.no-bullets {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.no-bullets li {
    margin-bottom: 0.5rem; /* Adjust this value to control the spacing between list items */
}

#buildingSelect, .buildingSelect option {
    max-width: 300px; /* Set the desired width for the dropdown */
    overflow: hidden;  /* Hide overflow content */
    text-overflow: ellipsis; /* Add ellipsis (...) for overflow text */
    white-space: nowrap; /* Prevent text from wrapping to a new line */
}


@keyframes blink {
    0%, 80% { opacity: 1; }
    81%, 100% { opacity: 0; }
    //0% { opacity: 1; }
    //50% { opacity: 0; }
    //100% { opacity: 1; }
}

#env {
    animation: blink 5s infinite;
    font-weight: bold;
    color: white;
}


/* Added for horizontal lists */
.horizontal-list {
    list-style-type: none; /* Remove bullets */
    padding: 0;
    margin: 0;
    display: flex; /* Align items horizontally */
    gap: 20px; /* Add spacing between items */
    align-items: stretch;   /* Ensure all items have the same height */
}

.horizontal-list li {
    padding: 10px 20px; /* Padding inside each item */
    border: 1px solid #ccc; /* Add border */
    border-radius: 5px; /* Optional: Rounded corners */
    text-align: center; /* Center align text */
    flex: 1; /* Make each item take equal width */
}

.horizontal-list li:not(:last-child) {
    margin-right: 15px; /* Add margin between items */
}

.horizontal-list li:hover {
    background-color: #f1f1f1; /* Add hover effect (optional) */
}


/* 
 * Added css code for noaccess container
 */
        .no-access-container {
            text-align: center;
            background-color: #fff;
            padding: 40px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        .no-access-container h1 {
            color: #dc3545;
            font-size: 36px;
            margin-bottom: 20px;
        }
        .no-access-container p {
            font-size: 18px;
            color: #6c757d;
            margin-bottom: 30px;
        }
        .no-access-container a {
            padding: 10px 20px;
        }