:root {
    --bs-primary: rgba(1, 254, 18, 1); /* Bright green */
}

.btn {
    height: 22px !important; /* Set the height */
    display: flex !important; /* Enable Flexbox */
    align-items: center !important; /* Center the text vertically */
    justify-content: center !important; /* Center the text horizontally */
}
.btn-primary {
    background-color: rgba(1, 254, 18, 1) !important;
    border-color: rgba(1, 254, 18, 1) !important;
    color: black !important;
}

.btn-primary:hover {
    background-color: rgba(1, 200, 15, 1) !important; /* Slightly darker green on hover */
    border-color: rgba(1, 200, 15, 1) !important;
    color: black !important;
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.top-menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: black;
    color: white;
    padding: 0 12px;
    flex-wrap: nowrap;
}
.project-name {
    flex-shrink: 0;
}
.top-menu a {
    color: white;
    text-decoration: none;
    margin-left: 10px;
}
.top-menu a:hover {
    text-decoration: none;
}

.logo {
    height: 48px;
    width: auto;
    max-width: 280px;
    transition: height 0.2s, max-width 0.2s;
}


.profile-picture, .history-profile-picture {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}
.user-menu {
    display: flex;
    align-items: center;
    gap: 10px;
}
.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 140px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    z-index: 1000;
    display: none; 
    left: auto !important;
}
.dropdown-menu a {
    text-decoration: none;
    color: black;
    display: block;
    padding: 5px 10px;
}

.dropdown-menu a:hover {
    background-color: #f1f1f1;
}

.history-dropdown {
    position: relative;
    display: inline-block;
    margin-right: -10px;
}
.history-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%; /* Position below the dropdown trigger */
    right: 0; /* Align to the right edge of the parent container */
    z-index: 1000; /* Ensure it appears above other elements */
    max-width: 400px; /* Optional: Limit the width */
    min-width: 220px;
    word-wrap: break-word; /* Break long words to fit within the container */
    overflow-wrap: break-word; /* Ensure long text wraps */
    background-color: #fff; /* Optional: Add a background color */
    border: 1px solid #ccc; /* Optional: Add a border */
    border-radius: 8px; /* Optional: Add rounded corners */
    padding: 10px; /* Optional: Add padding */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional: Add a shadow */
}

.history-dropdown-menu a {
    text-decoration: none;
    color: black !important;
    display: block;
    padding: 5px 10px;
}
.history-dropdown-menu a:hover {
    background-color: white !important;
}

.menu-icon, .profile-picture, .profile-fallback, .history-profile-picture{
    height: 40px;
    width: 40px;
    object-fit: cover;
    border-radius: 50%;
    vertical-align: middle;
}

.menu-icon {
    background: white; /* Remove the white background */
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    /* margin-right: 10px; */
    border: none; /* Remove any default border */
    padding: 0; /* Remove any default padding */
}

.title {
    margin: 0px;
}


.no-vehicles {
    display:none;
}
.main-content {
    display:none;
}

.subtitle {
    margin: 0px;
}
.profile-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #4285f4;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
}


.click-okay-modal {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.click-okay-modal-content {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    width: 80%;
    max-width: 600px;
}

#click-okay {
    display: flex;
    align-items: flex-start; /* Align items to the top */
    gap: 16px; /* Space between the image and text */
}

#click-okay-image {
    width: 64px;
    height: 64px;
    object-fit: contain; /* Ensure the image fits within its container */
}

#click-okay-message {
    flex: 1; /* Allow the text to take up remaining space */
    word-wrap: break-word; /* Ensure long text wraps */
    font-weight: normal;
}

#click-okay-title {
    text-align: center;
    margin-bottom: 16px;
}

#click-okay-button {
    padding: 10px 20px; /* Add padding for better appearance */
    font-size: 16px; /* Adjust font size */
    border-radius: 4px; /* Optional: Add rounded corners */
}
/* .profile-fallback {
  width: 40px;
  height: 40px;
  background: #4285f4;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: bold;
} */
.form-group label {
    white-space: nowrap; /* Prevent labels from wrapping to the next line */
}

h1 {
    font-size: 2.5rem;
    text-align: center;
}

.treeview .list-group-item {
    border: none;
    padding: 0.5rem 1rem;
}

.treeview .btn-link {
    text-decoration: none;
    font-weight: bold;
    color: #007bff;
}

.treeview .btn-link:hover {
    text-decoration: underline;
}
.modal {

    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

body.modal-open {
    padding-right: 0 !important; /* Prevent extra padding when the modal is open */
}
.modal-content {
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    max-width: 400px; /* Set a maximum width for the modal content */
    margin: 0 auto; /* Center the modal content */
}

.nav-pills .nav-link {
    white-space: nowrap; /* Prevent text wrapping */
    overflow: hidden; /* Hide overflow text */
    text-overflow: ellipsis; /* Add ellipsis for overflowing text */
    font-size: 1rem; /* Default font size */
    padding: 0.5rem 0.75rem; /* Adjust padding for smaller buttons */
    color: black;
}

.nav-pills {
    display: flex;
    flex-wrap: wrap; /* Allow buttons to wrap to the next row */
    justify-content: center; /* Center buttons */
}

.nav-pills .nav-link.active {
    background-color: rgba(1, 200, 15, 1) !important; /* Green background for active nav pills */
    color: black !important; 
}

#vehicle-image-container {
    display: flex; /* Use flexbox for layout */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    text-align: center; /* Center text inside the container */
}

#images-container img {
    display: block; /* Make each image appear on its own line */
    margin: 10px auto; /* Add spacing and center the images */
}
.lazy-image {
    opacity: 0; /* Initially hide the image */
    transition: opacity 0.3s ease-in-out; /* Smooth transition when loaded */
}

.lazy-image.loaded {
    opacity: 1; /* Show the image once loaded */
}

#vehicle-cards {
    display: flex;
    flex-wrap: wrap; /* Allow cards to wrap to the next line if they don't fit */
    gap: 20px; /* Add spacing between cards */
    justify-content: center; /* Center the cards horizontally */
    align-items: flex-start; /* Ensure cards align at the top and have independent heights */
}
.card {
    display: flex; /* Use flexbox for layout */
    flex-wrap: wrap; /* Allow items to wrap to the next line if they don't fit */
    flex-direction: row !important;
    gap: 20px; /* Add spacing between items */
    justify-content: center; /* Align items to the left */
    align-items: flex-start; /* Align items to the top */
    width: 100%; /* Ensure the card spans the full width of the container */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: Add a shadow for better visuals */
    border: 1px solid #ccc; /* Optional: Add a border */
    border-radius: 8px; /* Optional: Add rounded corners */
    padding: 15px; /* Add padding inside the card */
    box-sizing: border-box; /* Include padding and border in width calculation */
    flex-direction: row; /* Ensure child divs are laid out in a row */
    position: relative; /* Allow positioning of the title */
}

/* Style for the title (h5) inside the card */
.card h5 {
    position: relative; /* Position the title at the top */
    top: 0; /* Align it to the top of the card */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Adjust for centering */
    margin: 0; /* Remove default margin */
    padding: 1px 0 1px 0; /* Add padding for spacing */
    width: 100%; /* Ensure the title spans the full width */
    text-align: center; /* Center the text */
    background-color: white; /* Optional: Add a background color */
    border-bottom: 1px solid #ddd; /* Optional: Add a bottom border */
    font-size: 1.2rem; /* Adjust font size */
    z-index: 1; /* Ensure it appears above the flex content */

}

/* Style for the child divs inside the card */
.card > div {
    flex: 1 1 calc(33.33% - 20px); /* Make each child div take up 1/3 of the row with spacing */
    max-width: 300px; /* Set a maximum width for each child div */
    box-sizing: border-box; /* Include padding and border in width calculation */
    border: 1px solid #ddd; /* Optional: Add a border */
    border-radius: 8px; /* Optional: Add rounded corners */
    padding: 10px; /* Add padding inside the child div */
    text-align: center; /* Center the content inside the child div */
}



#p-card-container .card {
    width: 100%; /* Make the card take up the full width of the container */
    max-width: none; /* Remove any max-width restrictions */
    box-sizing: border-box; /* Include padding and border in the width calculation */
    margin-top: 20px; /* Add spacing between cards */
}

#mypage-p-card-container .card {
    width: 100%; /* Make the card take up the full width of the container */
    max-width: none; /* Remove any max-width restrictions */
    box-sizing: border-box; /* Include padding and border in the width calculation */
    margin-top: 20px; /* Add spacing between cards */
}
/* .card {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease-in-out;
} */

/* .card:hover {
    transform: scale(1.05);
} */
/* Modal container */
.lrg-image-modal {
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8); /* Black background with opacity */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Modal content */
.lrg-image-modal-content {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    max-width: 90%;
    max-height: 90%;
    text-align: center;
}

/* Close button */
.lrg-image-close {
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
}

.lrg-image-close:hover,
.lrg-image-close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.lrg-image-modal-icon {
    font-size: 24px;
    color: white;
    cursor: pointer;
    transition: color 0.2s ease;
}

.lrg-image-modal-icon:hover {
    color: #ccc; /* Change color on hover */
}


.visitor-counter {
    position: absolute; /* Fix the counter at the top */
    top: 36px;
    left: 5px; /* Align it to the left */
    width: 100%; /* Make it span the full width */
    color: black; /* Text color */
    text-align: center; /* Center the text */
    padding: 10px 0; /* Add some padding */
    z-index: 900; /* Ensure it appears above other elements */
    pointer-events: none; 
    font-size: 12px;
}

.odometer {
    display: inline-block;
    font-size: 12px; /* Larger font size for the odometer */
    color: black; /* Odometer text color */
    top: -1px;
}


.cookie-policy-modal {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    z-index: 1100; /* Ensure it appears above other elements */
}

.cookie-policy-modal-content {
    position: relative;
    margin: 10% auto;
    padding: 20px;
    background: white;
    width: 80%;
    max-width: 600px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.cookie-policy-modal-content h2 {
    margin-top: 0;
}

#close-cookie-policy {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 24px;
    cursor: pointer;
}

#cookie-policy-content {
    max-height: 400px;
    overflow-y: auto; /* Enable scrolling for long content */
}
/* Medium screens (tablets) */
@media (max-width: 900px) {
    .nav-pills .nav-link {
        font-size: 1rem; /* Reduce font size */
        padding: 0.1rem 0.4rem; /* Reduce padding */
    }
    h1 {
        font-size: 2rem;
    }

}

@media (max-width: 576px) {
    .nav-pills .nav-link {
        font-size: 0.85rem; /* Reduce font size */
        padding: 0.1rem 0.2rem; /* Reduce padding */
    }
}

@media (max-width: 400px) {
    .nav-pills .nav-link {
        font-size: 0.65rem; /* Reduce font size */
        padding: 0.1rem 0.2rem; /* Reduce padding */
    }
}

/* Medium screens (tablets) */
@media (max-width: 900px) {
    h1 {
        font-size: 2rem;
    }
}

/* Small screens (phones) */
@media (max-width: 600px) {
    h1 {
        font-size: 1.3rem;
    }
}

@media (max-width: 700px) {
    .logo {
        height: 40px;
        /* max-width: 110px; */
    }
    .user-menu {
        gap: 5px;
    }
    .visitor-counter {
        top: 30px;
    }
}
@media (max-width: 500px) {
    .logo {
        height: 24px;
        /* max-width: 70px; */
    }
    .user-menu {
        gap: 2px;
    }
}