html, body {
	/*Replaced on Friday to center all content */
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Prevent horizontal scroll */
    display: flex;
    justify-content: center; /* Center content horizontally */
}


/* Loading message style */
.loading-message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    color: #007bff;
    font-weight: bold;
    animation: blinker 1.2s linear infinite;
	   text-align: center;
    width: 100%; /* Center horizontally within its container */
}

/* Blink animation */
@keyframes blinker {
    50% {
        opacity: 0;
    }
}

.premium_edition {
	max-width: 960px; /* Control the max width of the content */
    width: 100%;
    margin: auto; /* Center the app */
}


/* Style for premium prompt clickable text */
.premium-prompt {
    color: #007bff;
    cursor: pointer;
    text-decoration: underline;
	text-align: center;
}

/* Pop-up Overlay */
.popup-overlay {
    display: none; /* Hidden by default */
    position: absolute;
    bottom: 0; /* Anchors the overlay to the bottom of ui-content */
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    justify-content: center;
    align-items: flex-end; /* Aligns content to the bottom */
    z-index: 1000; /* Ensures it appears above other content */
}

/* Pop-up Content */
.popup-content {
    background: blue;
    padding: 20px;
    width: 90%; /* Smaller to ensure it fits horizontally */
    max-width: 400px;
    border-radius: 8px 8px 0 0; /* Rounded corners only on top */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    text-align: center;
    position: relative;
	margin-bottom: 200px;
}

/* Message Text */
.popup-content p {
    color: yellow; /* Yellow text */
    margin-bottom: 15px;
}

/* Upgrade Link */
.upgrade-link {
    color: #ff4500;
    font-weight: bold;
    text-decoration: none;
}

/* Close Button */
.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    background-color: #333;
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}


.close-btn:hover {
    background-color: #555;
}




h1 {
margin-bottom: -5px;	
}






.app-container {
	/*Added Friday to center all content */
    max-width: 960px; /* Control the max width of the content */
    width: 100%;
    margin: auto; /* Center the app */
    height: 100%; /* Fill the available height */
    display: flex;
    flex-direction: column; /* Allow vertical alignment */
    position: relative;
}


.container7 {
position : relative;
width : 100%;
height : 0;
padding-bottom : 56.25%;
z-index : 110;
visibility : visible;
}

.video7 {
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 100%;
visibility : visible;
z-index : 110;
}

.ui-content {
    max-width: 960px;
    width: 100%;
    margin: auto;
    padding-bottom: 50px;
    margin-top: 50px;
    margin-bottom: 50px;
				overflow: hidden;  /*Added Friday to center all content */
				position: relative; /*Added Friday to center all content */
				padding-top: 0 !important; /*Added Friday to center all content */
	
}


/* ~~~~~~~~~~~~~~~ THIS CENTERED THE TWO BLOCKS HORIZONTALLY ON THE PAGE ~~~~~~~~~~~~ */
.ui-content, .map-container-standalone {
    box-sizing: border-box;
}


		
/*~~~~~~~~~~~~~~~~~~~~~~~ ADDED FROM LAST WORKING VERSION ~~~~~~~~~~~~~~~~~~~~~~~~~~*/
[data-role='page'] {
			width: 100%;
			max-width: 960px;
            z-index: 3;
			padding: 0;
            padding-top: 35px; /* Adjust this value based on the height of the home button */
            margin: 0 auto; /* Ensure there is no margin */
            box-shadow: none; /* Remove any box shadow */
            background-color: #fff; /* Match the page background color */
	display: flex; /*Added Friday to center all content */
    flex-direction: column; /*Added Friday to center all content */
    align-items: center; /*Added Friday to center all content */

        }		 



/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Basic styling for header, content, footer */
.header-fixed {
			top: 0;
            position: fixed;
           width: 100%; 
			max-width: 960px;
            background-color: #fff;
            z-index: 10;
            padding: 10px;
            text-align: center;
            border-bottom: 1px solid #ccc;
        }
		
	
.footer-fixed {
			display: grid;
			grid-template-columns: auto 1fr auto; /* Left button | Center text | Right button */
			align-items: top; /* Vertically center items */
			width: 100%; 
			max-width: 960px;
			margin: 0 auto;
			padding: 10px;
			background-color: #f8f8f8;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 11;
			box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1);
			height: 25px;
			line-height: 25px;
		border-bottom: 1px solid #ccc;
		}



/* Styling for the pinch-zoomable content */
.pinchable {
            width: 100%;
            max-width: 960px;
            height: auto;
            transform-origin: center center;
            transition: transform 0.2s ease;
        }

.pinch-zoom {
/* touch-action: auto; */ /* allows finger pan when set alone; unsmooth swipe (Snap back occurs) */
/* touch-action: pan-y pinch-zoom;  */ /* No finger pan when set alone; Allows SMOOTH PAN, vertical scroll and pinch zoom */
 touch-action: pan-x pan-y pinch-zoom;  /* Best solution even though there is snap-back  */
    height: auto;
    transform-origin: center center;
    transition: transform 0.2s ease;
   will-change: transform; 
  overscroll-behavior: contain; /* Prevents bounce during interaction */
}



/* ~~~~~~~~~~~~~~~~~~~~~ ADDED FOR TOP NAVIGATION ----------------- */
.top-navigation-container {
    position: fixed !important; /* Fix to the top of the viewport */
    top: 0; /* Align to the top */
    width: 100%;
    max-width: 960px; /* Limit the width to 960px */
    height: 35px; /* Set a height for the container */
    z-index: 7; /* Ensure it’s above other elements */
    display: flex; /* Flexbox layout */
    justify-content: space-between; /* Center items horizontally */
    align-items: center; /* Center items vertically */
    background-color: #fff; /* Background color */
    border-bottom: 1px solid #ccc; /* Optional border to separate from content */
   /* transform-origin: top center; *//* Ensure the origin remains fixed */
      margin: 0 auto;*/ /* Center the container horizontally */
    /*  left: 0;*/
    /*  right: 0; */
	    padding: 0 10px; /* Add padding for spacing from screen edges */

}

/* New Home button styling for Navigation Container*/
/* Separate styling for each button */
.top-home-button {
    flex: none;
    text-align: center;
    padding: 0.5em;
    margin-right: 5px; /* Adjust as needed to balance position */
    background-color: #fff;
    box-shadow: none;
}

.top-exit-button {
    flex: none;
    text-align: center;
    padding: 0.5em;
    margin-left: 5px; /* Adjust as needed to balance position */
    background-color: #fff;
    box-shadow: none;
}



.mid-footer-text {
    flex: 1;  /* Allow home button to take up space */
    text-align: center; /* Center text within */
    padding: 0.5em; /* Adjust padding as needed */
    background-color: #fff; /* Background to avoid transparency issues */
    box-shadow: none; /* Remove any shadow */
}

/* Optional: Adjustments for screen width constraints */
@media (max-width: 600px) {
    .top-navigation-container {
        padding: 0 5px; /* Adjust padding for smaller screens */
    }
}

/* Additional style for the navigation container for informational pages */
.info-page-navigation {
    justify-content: center; /* Center the content in the navigation bar */
    padding: 0 1em; /* Optional padding for visual spacing */
}


.ui-btn {
    margin: 0; /* Remove any margin around the button */
    padding: 0; /* Remove any padding */
}

.ui-btn.ui-icon-arrow-r {
	margin-right: 15px;
}



.left-nav-button
{
	margin-left: 0.5em;  /* Adjust space from left edge */
    justify-self: start; /* Left button aligns to the start of the grid cell */
}

.right-nav-button {
    justify-self: end; /* Right button aligns to the end of the grid cell */
	    margin-right: 0.5em;  /* Adjust space from right edge */
}




/* ~~~~~~~~~~~~~~~~~~~~~ ADDED FOR MAP CONTAINER ----------------- */
.map-container-standalone {
	    border-top: 1px solid gray;
    height: 300px; /* Desired height */
    width: 100%; /* Full width within ui-content */
	max-width: 960px;
	margin: 0 auto;
	background-color: #fff; /* Background to avoid transparency issues */
    overflow: visible; /* Ensure map is not clipped */
    touch-action: none; /* Ensure map gestures work */
    position: relative; /* was relative Adjust as necessary */
	z-index: 3; /* was 3 Higher than pinch-zoom */
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
	padding: 0;
}


/* ~~~~~~~~~~~~~~~~~~~~~ ADDED FOR BASIC FORMATTING ----------------- */
.heading {font-weight: bold; font-size:1.2rem; margin-bottom:0px !important;}
span.small {font-size:.75rem;}
.centerit {text-align:center; vertical-align:top;}


/* ~~~~~~~~~~~~~~~~~~~~THIS ELIMINATED THE VERTICAL SPACE BETWEEN THE TWO CONTAINERS--- */
.ui-content, .map-container-standalone {
    display: block;
    margin-top: 0;
    margin-bottom: 0;
}


.plaque {
text-align : center;
padding : 14px;
margin : 5px;
margin-bottom : 10px;
border : black solid 2px;
border-radius : 5px;
max-width : 75%;
}