body {
     background-color: white;
     padding-top: 56px;
     display: flex;
     font-family: 'Inter', sans-serif;
 }

 .sidebar {
     width: 65px;
     background-color: #f8f9fa;
     height: 100vh;
     position: fixed;
     top: 0;
     left: 0;
     padding-top: 56px;
     /* Adjust for navbar */
     overflow-y: hidden;
     flex-shrink: 0;
     display: flex;
     flex-direction: column;
     align-items: center;
 }

 .sidebar-icon {
     padding: 15px 0;
     width: 100%;
     text-align: center;
     color: #6c757d;
 }

 .sidebar-icon:hover {
     background-color: #e2e6ea;
     color: #495057;
 }

 .content {
     flex-grow: 1;
     margin-left: 65px;
     /* Adjust for sidebar */
     padding: 20px;
 }

 /* Make Bell icon white on black background */
 .navbar-brand .fa-bell {
     color: white;
 }

 .navbar {
     border-bottom-left-radius: 10px;
     border-bottom-right-radius: 10px;
 }

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

 .card-img-top {
     border-top-left-radius: 10px;
     border-top-right-radius: 10px;
 }

 /* Styles for the pop-up bubble */
 .popup-bubble {
     position: absolute;
     background-color: #fff;
     padding: 20px;
     border-radius: 15px;
     box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
     z-index: 100;
     opacity: 0;
     transform: scale(0.1);
     transform-origin: top left;
     transition: transform 0.4s cubic-bezier(0.6, 0.05, 0.01, 0.99), opacity 0.4s cubic-bezier(0.6, 0.05, 0.01, 0.99);
     visibility: hidden;
 }

 .popup-bubble.is-open {
     opacity: 1;
     transform: scale(1);
     visibility: visible;
 }

 .close-btn {
     position: absolute;
     top: 10px;
     right: 15px;
     font-size: 1.25rem;
     cursor: pointer;
     color: #6c757d;
     opacity: 0;
     transition: opacity 0.3s ease;
 }

 .popup-bubble.is-open .close-btn {
     opacity: 1;
 }

 .map-main-container {
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100%;
     padding: 2rem;
 }

 /* This wrapper helps contain the animations and positioning */
 #map-wrapper {
     position: relative;
     max-width: 1200px;
     width: 100%;
     border-radius: 1rem;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
     background-color: #ffffff;
     padding: 1rem;
 }

 /* This container holds the image and the parking spaces */
 .map-container {
     position: absolute;
     top: 1rem;
     left: 1rem;
     right: 1rem;
     bottom: 1rem;
 }

 .map-sizer {
     width: 100%;
     height: auto;
     visibility: hidden;
     /* Takes up space, but is not visible */
     border-radius: 0.5rem;
 }

 .map-image {
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: 0.5rem;
     display: block;
     /* Removes bottom space under the image */
 }

 .parking-space {
     position: absolute;
     border: 2px solid rgba(0, 0, 0, 0.7);
     border-radius: 4px;
     box-sizing: border-box;
     cursor: pointer;
     transition: all 0.2s ease-in-out;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
 }

 .parking-space:hover {
     transform: scale(1.1);
     border-width: 3px;
     z-index: 10;
 }

 /* State colors */
 .state-available {
     background-color: rgba(76, 175, 80, 0.7);
 }

 .state-taken {
     background-color: rgba(244, 67, 54, 0.7);
 }

 .state-unavailable {
     background-color: rgba(158, 158, 158, 0.7);
 }

 /* Floor controls */
 .floor-controls {
     position: fixed;
     bottom: 2rem;
     left: 2rem;
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
     z-index: 1000;
 }

 .floor-controls .btn {
     width: 50px;
     height: 50px;
     font-size: 1.5rem;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 #floor-display {
     background-color: #fff;
     padding: 0.5rem 1rem;
     border-radius: 0.5rem;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
     text-align: center;
     font-weight: 600;
     font-size: 1.2rem;
     color: #333;
 }

 /* Tooltip style */
 .ui-tooltip {
     padding: 10px;
     border-radius: 8px;
     background-color: #333;
     color: white;
     border: none;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
     font-size: 0.9rem;
 }

 .mapContainer {
    padding-left: 100px;
 }

 .login-container {
            flex-grow: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 1rem;
        }

        .login-card {
            width: 100%;
            max-width: 420px;
            padding: 2rem;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
            border: none;
        }

        /* Style for the temporary success message */
        #loginMessage {
            display: none;
            margin-top: 1rem;
        }