
 #map {
    position: relative; /* Allows absolute positioning for child elements, such as your buttons */
    width: 70vw; /* 70% of the viewport width */
    height: 70vh; /* 70% of the viewport height */
    /* Remove the float:left; if you want the map to be centered use margin: auto; */
}
#stores-table, #stores-table th, #stores-table td {
    border: 1px solid black;
    border-collapse: collapse;
    padding: 8px;
    text-align: left;
	height:40px;
}
.green-hue { 
			filter: hue-rotate(240deg); /* Adjust as necessary for the green shade you desire */
		}

		.orange-hue { 
			filter: hue-rotate(185deg); /* Adjust as necessary for the yellow shade you desire */
		}
		.blue-hue { 
			filter: hue-rotate(360deg); /* Adjust as necessary for the yellow shade you desire */
		}
.blue-delivery {
    background-color: blue;
    color: white; /* Adjust text color if needed for readability */
}

.red-delivery {
    background-color: red;
    color: white;
}

.green-delivery {
    background-color: green;
}

.yellow-delivery {
    background-color: orange;
}

    .report-list {
        width: 30%;
        height: 600px; /* Adjust as needed */
        overflow-y: auto;
        padding: 10px;
        box-sizing: border-box;
    }

    .whiskey-submission {
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
    }

		 .content-container {
        display: flex;
        flex-direction: column;
        margin-top: 104px !important;
		height:     calc(100vh - 104px) !important;
    }

    .map-container {
        height: 80%;
        width: 100%;
        overflow: hidden; /* Prevents internal scroll within the map */
		 margin-top: 104px !important;
		height:     calc(100vh - 104px) !important;
    }

    .whiskey-submission {
        height: 20%;
        overflow-y: scroll; /* Allows scrolling within this container */
    }
		/* CSS for Desktop View */
	.report-list {
		width: 30%; /* Adjust as needed */
		height: 600px; /* Adjust as needed */
		overflow-y: auto;
		padding: 10px;
		box-sizing: border-box;
		position: absolute;
		top: 10px; /* Adjust the distance from the top as needed */
		right: 10px; /* Adjust the distance from the right as needed */
		z-index: 1000; /* Ensure the list is above the map */
	}

	#map {
    width: calc(70% - 20px); /* Adjust as needed */
    height: 780px; /* Adjust as needed */
    margin-right: 20px; /* Adjust as needed */
    float: left; /* Float the map to the left */
}	
.abc-boards, #stores-table {
    width: calc(30% - 20px); /* Adjust as needed */
    float: left; /* Float the abc-boards section to the left */
    margin-top: 10px; /* Adjust as needed */
}

.btn-flip {
  opacity: 1;
  outline: 0;
  color: #fff;
  line-height: 40px;
  position: relative;
  text-align: center;
  letter-spacing: 1px;
  display: inline-block;
  text-decoration: none;
  font-family: 'Open Sans', sans-serif;
  text-transform: uppercase;
  cursor: pointer; /* Added for clickability */
}

.btn-flip:hover:after {
  opacity: 1;
  transform: translateY(0) rotateX(0);
}

.btn-flip:hover:before {
  opacity: 0;
  transform: translateY(50%) rotateX(90deg);
}
.map-overlay-button {
    /* Set specific sizes for the buttons */
    width: 100px; /* Example width, adjust as needed */
    height: 50px; /* Example height, adjust as needed */
    background-color: #FFF; /* Example background color, change as needed */
    color: #000; /* Example text color, change as needed */
    border: 1px solid #000; /* Example border, adjust as needed */
    text-align: center; /* Center the text inside the button */
    padding: 5px 10px; /* Padding inside the button, adjust as needed */
    font-size: 1rem; /* Text size, adjust as needed */
    cursor: pointer; /* Change cursor to pointer on hover */
	z-index:9000;
    /* ...other styles like border-radius, font-family etc... */
}


#meck-button {
    top: 10px; /* Position the button over the map as desired */
    right: 20px; /* Adjust as necessary */
}

#wake-button {
    top: 70px; /* Position the button over the map as desired */
    right: 20px; /* Adjust as necessary */
}
#nh-button {
    top: 70px; /* Position the button over the map as desired */
    right: 20px; /* Adjust as necessary */
}

.btn-flip:after {
  top: 0;
  left: 0;
  opacity: 0;
  width: 100%;
  color: #fff; /* Text color */
  display: block;
  transition: 0.5s; /* Adjusted from SCSS variable */
  position: absolute;
  background: orange; /* Back content background */
  content: attr(data-back);
  transform: translateY(-50%) rotateX(90deg);
}

.btn-flip:before {
  top: 0;
  left: 0;
  opacity: 1;
  color: #fff; /* Text color */
  display: block;
  padding: 0 30px;
  line-height: 40px;
  transition: 0.5s; /* Adjusted from SCSS variable */
  position: relative;
  background: green; /* Front content background */
  content: attr(data-front);
  transform: translateY(0) rotateX(0);
}
#start-tour-btn {
  background-color: #4CAF50; /* Green background */
  color: white; 
  border: none;
  cursor: pointer;
  margin-right: auto;
}

#start-tour-btn:hover {
  background-color: #45a049;
}

.navigation-buttons {
    display: flex;
    justify-content: center;
    gap: 15px; /* Space between buttons */
}
.navigation-buttons button {
    background-color: #a00; /* Red background */
    color: white; /* White text */
    padding: 10px 20px; /* Adjust padding as needed */
    font-size: 16px; /* Initial font size */
    border: none;
    cursor: pointer;
    display: inline-block; /* Allows the use of position relative for the ::before pseudo-element */
    position: relative; /* Required for the positioning of the ::before pseudo-element */
    border-radius: 20px; /* Rounded corners */
    transition: all 0.3s ease; /* Smooth transition for effects */
}

.navigation-buttons button::before {
    content: '';
    position: absolute;
    top: -5px; left: -5px;
    right: -5px; bottom: -5px;
    border: 2px solid transparent; /* Invisible initially */
    border-radius: 25px; /* Slightly more rounded than the button itself for visual effect */
    transition: border-color 0.3s ease; /* Smooth transition for the border color */
}

.navigation-buttons button:hover::before {
    border-color: white; /* White circle appears on hover */
}
.map-overlay-button {
    background-color: #cc5500; /* Example background color */
    color: black; /* Text color */
    padding: 8px 16px; /* Padding around text */
    font-family: 'Verdana', sans-serif; /* Font family */
    font-weight: bold; /* Make text bold */
    text-decoration: none; /* Remove underline from text */
    border-radius: 10px; /* Rounded corners */
    border: 1px solid transparent; /* Transparent border */
    cursor: pointer; /* Change mouse cursor to pointer */
    transition: background-color 0.3s, color 0.3s; /* Smooth transition for hover effects */
	min-width: 120px; 
}

.map-overlay-button:hover {
    background-color: #a00; /* Change background color on hover */
    color: white; /* Change text color on hover */
    border: 1px solid white; /* Optional: add a white border on hover */
}
.navigation {
    display: flex;
    align-items: center; /* Align the items vertically */
}

.tour-btn {
    margin-right: auto; /* Pushes the button to the left */
    /* Other styles to match your design */
	padding: 10px 20px; /* Adjust padding as needed */
    font-size: 12px; /* Initial font size */
    border: none;
    cursor: pointer;
    display: inline-block; /* Allows the use of position relative for the ::before pseudo-element */
    position: relative; /* Required for the positioning of the ::before pseudo-element */
    border-radius: 20px; /* Rounded corners */
    transition: all 0.3s ease; /* Smooth transition for effects */
}

.tour-button button:hover::before {
    border-color: white; /* White circle appears on hover */
}

.navigation-buttons {
    display: flex;
    justify-content: center;
    flex-grow: 1; /* Allows this div to take up the remaining space */
    /* Remove margin if it's causing misalignment */
}
#animated-truck-container {
    
    left: 0;
    top: 70%; /* Adjust as needed to vertically position the truck */
    z-index: 9000; /* High z-index to ensure the truck is above other elements */
    pointer-events: none; /* Ensure clicks pass through to elements underneath */
}

#animated-truck {
    position: absolute;
    left: -100%; /* Start off-screen to the left */
    animation: driveTruck 6s linear forwards; /* Animation will run once and stay at the end state */
}

@keyframes driveTruck {
    to {
        left: 70%; /* End off-screen to the right */
    }
}


@media only screen and (max-width: 732px) and (-webkit-min-device-pixel-ratio: 1), only screen and (max-width: 732px) and (-moz-device-pixel-ratio: 1), only screen and (max-width: 732px) and (-o-device-pixel-ratio: 1 / 1), only screen and (max-width: 732px) and (min-resolution: 1dppx)
{
    .main-content {
        flex-direction: column; /* Stack map and list vertically */
    }
	 .tour-btn {
        display: none; /* Hide the tour button on mobile */
    }
	.login-text {
			position: absolute;
			bottom: -2px; /* Adjust as needed to position at the bottom of the logo */
			left: 10%; /* Center horizontally */
			transform: translateX(-25%); /* Center horizontally */
			font-family: 'Helvetica', sans-serif; /* Specify Helvetica */
			font-size: 1.3em; /* Adjust as needed */
			color: black; /* Adjust as needed */
			padding: 0.5em; /* Adjust as needed */
			background: Transparent; /* Optional: adds a semi-transparent background */
		}

    #map {
        width: 100%; /* Full width for the map */
        height: 320px; /* 80% of the original 600px */
    }
	 #map, .abc-boards, #stores-table {
        width: 100%; /* Full width on mobile */
        float: none; /* Revert to normal flow */
        margin-right: 0; /* Reset margin */
        margin-top: 0; /* Reset margin */
    }
		.navigation-buttons button {
			padding: 8px 15px; /* Smaller padding for smaller screens */
			font-size: 14px; /* Smaller font size for better readability */
			margin: 5px 0; /* Add margin for vertical spacing between buttons */
			display: block; /* Stack buttons vertically */
			width: auto; /* Button width adjusts to content */
		}

    .report-list {
        width: 100%; /* Full width for the report list */
        /* Adjust the height as needed or leave as is */
    }
    .header-title {
        font-size: 18px; /* Smaller font size for mobile */
        text-align: center; /* Ensures the text is centered */
        flex-grow: 1; /* Allows the title to fill the space and center itself */
		 
    }
	  .leaflet-popup-content-wrapper {
        width: auto; /* Set width to auto to adjust based on content */
    }

    .leaflet-popup-content {
        max-width: none; /* Disable maximum width to allow content to expand */
    }

    .leaflet-popup-content div {
        margin-bottom: 5px; /* Add margin between each field */
    }

    .leaflet-popup-content div strong {
        display: inline-block; /* Display strong elements as inline-block */
        width: 120px; /* Set a fixed width for labels */
    }

    
	
    .sidebar {
        display: none; /* Hide sidebars on small screens */
    }


    .header, .footer {
        padding: 5px; /* Reduces padding in header and footer */
		justify-content:center;
		background-color: #cc5500;
    }
	 .report-list {
        width: 100%; /* Full width on mobile */
        position: static; /* Revert to static positioning */
        top: auto;
        right: auto;
    }


    .swal2-popup {
        width: 90% !important; /* Adjust the width of the modal */
        left: 5% !important; /* Center the modal horizontally */
        right: 5% !important;
    }

    .swal2-title {
        font-size: 1.2em; /* Adjust title font size for mobile */
    }

    .swal2-content {
        font-size: 1em; /* Adjust content font size for mobile */
    }

    .header, .footer {
        padding: 5px; /* Reduces padding in header and footer */
		justify-content:center;
		background-color: #cc5500;
    }

    .submission-table, #map-container, .additional-content {
        float: none;
        width: 100%; /* Each section takes full width on small screens */
        padding: 2px 0;
    }

    #map-container iframe {
        width: 100%; /* Make the map iframe responsive */
        height: 320px; /* Adjust height accordingly */
    }
	 #map-container, .report-list {
        position: relative; /* Ensure they are part of the regular document flow */
    }
	    .whiskey-sighting-form,
    .report-list table {
        width: 100%;
        box-sizing: border-box;
    }

    #storeTable {
        table-layout: fixed; /* Use a fixed table layout */
    }
	
    #storeTable th,
    #storeTable td {
        word-wrap: break-word;
    }

    /* Targeting the second column specifically */
    #storeTable td:nth-child(2) {
        max-width: 50%; /* Set maximum width for the dropdown cell */
        overflow: hidden; /* Hide overflow */
        box-sizing: border-box;
    }

    .whiskey-sighting-form select {
        width: 100%; /* Full width of the cell */
        box-sizing: border-box;
        margin-bottom: 10px;
    }




#meck-button {
    bottom: 10px; /* Adjust the distance from the bottom of #map as needed */
    left: 10px; /* Position from the left of #map */
}

#wake-button {
    bottom: 10px; /* Adjust the distance from the bottom of #map as needed */
    left: 100px; /* Position from the left of #map, assuming the first button is less than 90px wide */
}
#nh-button {
    bottom: 10px; /* Adjust the distance from the bottom of #map as needed */
    left: 190px; /* Position from the left of #map, assuming the first button is less than 90px wide */
}

.abc-boards,#stores-table {
    width: 30vw; /* Adjust the width as a percentage of the viewport width */
    /* Other styles as needed */
}
    .whiskey-sighting-form button,
    .whiskey-sighting-form input[type="text"] {
        width: 100%;
        box-sizing: border-box;
        margin-top: 10px;
    }

    

    .whiskey-sighting-form {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }
	
	/* end mobile */
}
