:root {
      --nav-backup: hsl(198.3, 64.9%, 43.5%);
      --nav-bg: hsl(198.3, 48%, 29%);
	  --header-bg: hsl(0, 0%, 95%);
      --button-bg: hsl(185.1, 66.9%, 68.6%);
      --button-teal: hsl(201, 46%, 45%);
	  --text-color: #ffffff;
      --font: system-ui, sans-serif;
    }

	html {
		overflow-y: auto !important;
	  }

	body {
		min-height: 0 !important;  /* Try 0 instead of auto */
		height: auto !important;   /* Explicitly auto height */
		box-sizing: border-box !important; /* Ensure padding doesn't add height */
    	top: 0px !important;
		font-family: var(--font);
      	line-height: 1.5;
      	background: var(--header-bg);
	  	transform: none !important;
		  overflow-y: hidden;	  
	}

	/* Lock the body and html scroll when the nav is open */
	body.nav-is-open,
	html.nav-is-open {
		overflow: hidden;
	}
	
	html, body {
		margin-top: 0 !important;
		padding-top: 0 !important;
		overflow-x: hidden;
		position: relative;
		top: 0 !important;            /* Crucial if banner space removed */
	  }




		/* --- Attempt to negate Google Translate Banner --- */

	/* Hide the banner iframe */
	body > iframe.goog-te-banner-frame {
		display: none !important;
		visibility: hidden !important; /* Extra measure */
		height: 0 !important;        /* Extra measure */
	}

	/* Some versions might add a div wrapper for the banner */
	body > .skiptranslate, /* Container div often used */
	body > iframe.goog-te-banner-frame, /* The banner itself */
	#goog-gt-tt { /* Tooltip element sometimes adds space */
		display: none !important;
		height: 0 !important;
		width: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		border: none !important;
		overflow: hidden !important;
		visibility: hidden !important;
		position: absolute !important; /* Rip it completely out of flow */
		top: -9999px !important;      /* Move it way off-screen */
		left: -9999px !important;
	}

	/* Google Translate might add classes to the body - reset padding/margin */
	body.translated-ltr,
	body.translated-rtl {
		padding-top: 0 !important;
		margin-top: 0 !important;
		position: relative !important; /* Ensure position isn't changed to static */
		top: 0 !important; /* Force top position if banner is hidden */
	}


	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	  }

	  
    header {
		color: black;
      	background-color: var(--header-bg);
      	color: var(--text-color);
      	padding: 1rem 2rem 1rem;
      	display: flex;
      	justify-content: space-between;
      	align-items: center;
      	flex-wrap: wrap;
      	position: sticky;
      	top: 0;
      	z-index: 1000;
    }


    .header-right {
      display: flex;
      gap: 1rem;
      align-items: center;
    }

	.search-form input {

	}

	.search-form input:focus {
	outline: auto; /* Or a specific outline style, e.g., 2px solid blue; */
	}

	/* Search form */
	.search-form {
		display: flex;
		gap: 5px;
	}
	
	.search-form input {
		padding: 8px;
		border: 1px solid var(--nav-bg);
		border-radius: 4px;
		width: 200px;
		height: 44px; /* Match dropdown height */
	}
	

	.header-button {
		padding: 8px 12px;
		border: none;
		background-color: var(--button-teal);
		color: #FFFFFF;
		cursor: pointer;
		margin-left: 5px;
		border-radius: 4px;
		height: 44px;
		font-size: 16px;
	}

	.header-button:hover {
		background-color: #37A5AF;
		transform: translateY(-1px);
	}

    .payment-button {
      background-color: #37A5AF;
      border: none;
      padding: 12px 24px;
      border-radius: 4px;
      color: #ffffff;
      cursor: pointer;
	  height: 44px;
	  font-size: 16px;
    }

    .payment-button:hover {
      background-color: #D75FD7 ;
      transform: translateY(-1px);
    }

	.translate-pay-wrapper {
		display: flex;
		gap: 1em; /* Space between items */
	}

	/* Media Query for small screens */
	@media (max-width: 770px) { /* Adjust breakpoint as needed */

		.svg-searchdots {
			display: none;
		}
	}
	
	/* Media Query for small screens */
	@media (max-width: 600px) { /* Adjust breakpoint as needed */
		.translate-pay-wrapper {
			display: flex;
			align-items: center; /* Vertically align items */
			justify-content: space-between; /* Or space-around, flex-start, etc. */
			flex-wrap: wrap; /* Allow wrapping IF they still don't fit */
			gap: 1em; /* Space between items */
		}
		#google_translate_element {
			margin-bottom: 0; /* Remove bottom margin when side-by-side */
			flex-grow: 1; /* Optional: Allow translate to grow */
			flex-shrink: 1; /* Allow shrinking */
			/* Control basis if needed */
		}
		.paybutton {
			flex-shrink: 0; /* Prevent button from shrinking too much */
			/* Control basis if needed */
		}
	}

	.marquee-banner {
		
		color: #333; /* Dark text for contrast */
		padding: 8px 12px;
		text-align: center;
		width: 100%;
		box-sizing: border-box; /* Ensures padding is included in the width */
		font-weight: normal;
	}

		/* OUTER CONTAINER */
		.tcontainer {
			width: 100%;
			overflow: hidden; /* Hide scroll bar */
		}	 
		/* MIDDLE CONTAINER */
		.ticker-wrap1 {
			width: 100%;
			padding-left: 100%; /* Push contents to right side of screen */
		}	
		/* INNER CONTAINER */
		@keyframes ticker {
			0% { transform: translate3d(0, 0, 0); }
			100% { transform: translate3d(-100%, 0, 0); }
		}
		.ticker-move {
			/* Basically move items from right side of screen to left in infinite loop */
			display: inline-block;
			white-space: nowrap;
			padding-right: 80%;
			animation-iteration-count: infinite;
			animation-timing-function: linear;
			animation-name: ticker;
			animation-duration: 30s;
		}
		.ticker-move:hover{
			animation-play-state: paused; /* Pause scroll on mouse hover */
		}
		/* ITEMS */
		.ticker-item{
			display: inline-block; /* Lay items in a horizontal line */
			padding: 0 2rem;
			font-size: 1.4em;
			color: var(--nav-bg);
		}

/* =================================================== */
/* ============== NAV MENU (MASTER) ============== */
/* =================================================== */

.nav-wrapper {
    background-color: var(--nav-bg);
    z-index: 1001;
}

nav {
    display: flex;
    justify-content: center;
    width: 70%;
    max-width: 70%;
    margin: 0 auto;
}

.nav-menu {
    list-style: none;
    display: flex;
    white-space: nowrap;
    margin: 0;
    padding: 0;
}

.submenu-toggle {
    display: none !important;
}

/* Base style for ALL top-level list items */
.nav-menu > li {
    margin: 0 !important;
    padding: 0;
    position: relative;
}

/* Style for clickable elements (links and labels) */
.nav-menu > li > a,
.nav-menu > li > label {
    display: block;
    color: white;
    padding: 12px 24px;
    text-decoration: none;
    cursor: pointer;
}

.nav-menu > li:hover {
    background-color: #37A5AF;
}

/* Submenu rules for DESKTOP ONLY */
/* Dropdown menu hidden by default */
.dropdown {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 100%;
    left: 0;
    background: #f2f7f7;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    min-width: 360px;
    z-index: 1000;
    margin: 0;
    padding: 10px 0; /* Re-apply only the vertical padding we want */
    max-height: 75vh; /* Max height is 75% of the viewport height */
    overflow-y: auto;

}

.nav-menu li:hover > .dropdown {
    display: block;
    opacity: 1;
    visibility: visible;
}

/* Styles for links/headers inside the dropdown */
/* Styling for items inside the dropdown (ALL SIZES) */
.dropdown li {
    list-style: none;
}
.dropdown a {
    display: block;
    padding: 6px 24px; /* Default padding with indentation */
    color: black; /* Default for desktop's light background */
    text-decoration: none;
}
.dropdown a:hover {
    background-color: #3AA5AF;
    color: white; /* Ensure text is readable on hover */
}
.dropdown-header {
    font-weight: bold;
    padding: 8px 12px; /* Default padding with less indentation */
    color: #ffffff;
    background-color: var(--nav-bg);
}

/* =================================================== */
/* ============== MOBILE OVERRIDE RULES ============== */
/* =================================================== */
@media (max-width: 768px) {
    nav, .nav-menu {
        width: 100%;
        max-width: 100%;
        flex-direction: column;
    }

    .nav-menu > li:hover {
        background-color: transparent;
    }

    .nav-menu > li {
        display: block;
        position: static;
    }
    
    .nav-menu > li:has(.submenu-toggle:checked) {
        background-color: #37A5AF;
    }

    /* Default "closed" state for the mobile dropdown */
    .dropdown {
        position: static;
        display: block;
        opacity: 1;
        visibility: visible;
        background-color: transparent;
        max-height: 0;
        overflow: hidden; /* Hide content when closed */
        padding-top: 0;
        padding-bottom: 0;
        border-top: none;
        box-shadow: none;
        transition: max-height 0.35s ease-out, padding 0.35s ease-out;
    }
    
    /* "Open" state for the mobile dropdown */
    .submenu-toggle:checked ~ .dropdown {
        max-height: 75vh; /* Animate height to reveal content */
        overflow: auto; /* CRITICAL FIX: Allow content to be visible and scroll */
        padding: 10px 0;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
        transition: max-height 0.35s ease-in, padding 0.35s ease-in;
    }

    /* Style the links and headers inside the mobile dropdown */
    .dropdown a {
        color: white;
        padding-left: 48px;
    }
    .dropdown a:hover {
        background-color: rgba(0, 0, 0, 0.2);
    }
    .dropdown .dropdown-header {
        background-color: transparent;
        color:var(--nav-bg);
        padding-left: 32px;
    }
}

/* =================================================== */
/* ============== RESPONSIVE NAVIGATION ============== */
/* =================================================== */

/* --- 1. DESKTOP STYLES (Default) --- */

/* The hamburger is hidden on desktop by default */
.hamburger-toggle,
.hamburger-icon {
    display: none;
}

/* Your existing desktop styles for the nav bar are correct */
.nav-menu {
    list-style: none;
    display: flex; /* This creates the horizontal desktop menu */
    margin: 0;
    padding: 0;
}

/* --- 2. MOBILE OVERRIDES --- */

@media (max-width: 768px) {
    .nav-wrapper {
        position: relative;
        min-height: 54px; /* Ensure wrapper has height for the icon */
    }

    /* Show the hamburger icon on mobile */
    .hamburger-icon {
        display: flex; /* a flex container for the lines */
        flex-direction: column;
        justify-content: space-around;
        width: 30px;
        height: 24px;
        position: absolute;
        top: 15px;
        right: 20px;
        cursor: pointer;
        z-index: 99999;
    }
    .hamburger-icon span {
        width: 100%;
        height: 3px;
        background-color: white;
        border-radius: 3px;
        transition: all 0.3s ease-in-out;
    }

    /* Hide the entire nav menu container by default on mobile */
    nav {
        display: none; 
    }
    
    /* When the hamburger is checked, show the nav container */
    .hamburger-toggle:checked ~ nav {
        display: block;
    }
    

	/* Style the menu as a full-screen, fixed overlay WHEN IT'S SHOWN */
.hamburger-toggle:checked ~ nav .nav-menu {
    display: flex;
    flex-direction: column;
    position: fixed;
    background-color: var(--nav-bg);
    z-index: 99998;
    padding-top: 60px;

    /* 1. Anchor to all four corners to robustly fill the viewport */
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    /* 2. Enable internal scrolling for long content */
    overflow-y: auto;

    /* 3. (Safety) Ensure long menu item text can wrap */
    white-space: normal;
}


    /* Animate the hamburger icon to an "X" when the menu is open */
    .hamburger-toggle:checked ~ .hamburger-icon {
        position: fixed;
    }
    .hamburger-toggle:checked ~ .hamburger-icon span:nth-of-type(1) { transform: rotate(45deg) translate(5px, 5px); }
    .hamburger-toggle:checked ~ .hamburger-icon span:nth-of-type(2) { opacity: 0; }
    .hamburger-toggle:checked ~ .hamburger-icon span:nth-of-type(3) { transform: rotate(-45deg) translate(7px, -7px); }
}


	.hero-image {
		position: relative;
		width: 100%; /* Keeps container responsive horizontally */
		
		/* REMOVED: aspect-ratio: 1920 / 400; */
	
		/* ADDED: Set a minimum height */
		/* Adjust this value (px, vh, rem) to your needs */
		min-height: 350px; /* Example: Won't get shorter than 350px */
		background-repeat: no-repeat;
		background-position: top left; /* Anchor image to the left */
	
		/* Keep image height matched to container height */
		background-size: auto 100%;
		/* Alternative: 'cover' might work well here too */
		/* background-size: cover; */
	
		margin-top: 0;
		z-index: 0;
		display: flex;
		justify-content: space-between;
		align-items: flex-start; /* Content aligns top */
		padding: 1rem;
		box-sizing: border-box;
		overflow: hidden; /* Clip overflowing background/content */
	}
	
	/* Optional: Styles for children remain useful */
	.hero-image > * {
		flex-shrink: 1;
		/* max-width: 45%; */ /* Adjust as needed */
	}

	  .info-box-right {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		padding: 1rem;
		box-sizing: border-box;
		border-radius: 4px;
		margin: 0px 40px;
		/* background: rgba(255, 255, 255, 0.75); /* Make sure you still have this */
		/* height: auto; */ /* Remove or comment out any height: auto; */
		/* height: 100%; */ /* Remove or comment out any height: 100%; */
		/* min-height: 100%; */ /* Remove or comment out any min-height: 100%; */
	}

	
	.info-box-right > div:first-child {
		flex-basis: auto; /* Allow the first div to take its natural width */
	}
	.info-box-left {
	background: rgba(255, 255, 255, 0.85);
	padding: 1rem;
	margin: 28px 40px;
	max-width: 800px; /* Adjust as needed */
	border-radius: 4px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
	z-index: 2;
	}


	/* ============================================== */
/* ============== HERO MOBILE STYLES ============== */
/* ============================================== */

@media (max-width: 768px) {
  
  /* 1. Stack the main container's items vertically */
  .hero-image {
    flex-direction: column;
  }

  /* 2. Make both info boxes take up the full width */
  .info-box-left,
  .info-box-right {
    max-width: 100%; /* Ensure they don't overflow */
    width: 100%;
	margin: 18px 0px;
  }

  /* 3. Adjust spacing for the vertical layout */
  .info-box-right {
    margin: 0; /* Remove the horizontal margin */
    margin-top: 2rem; /* Add some space above the second box */
  }
}


.bbz-container {
		display: flex;
		/* Let container take necessary width, often 100% by default */
		width: 100%; 
		justify-content: space-between; /* Space out the two items */
		align-items: flex-start; /* Align items to the top */
		
		/* --- KEY CHANGE: Prevent wrapping by default --- */
		flex-wrap: nowrap; 
		
		box-sizing: border-box;
	}

/* Target the DIRECT children (tables or divs wrapping tables) */
/* Use the flex shorthand: flex: grow shrink basis */
/* grow=0 (don't grow), shrink=1 (can shrink), basis=48% */
.bbz-container > * { 
    flex: 0 1 48%; 
    box-sizing: border-box;
    /* Reset margins to prevent interference */
    margin: 0; 
}

	.bbz-container > div > table { /* Target tables inside the wrapper */
		flex-basis: 48%;
		box-sizing: border-box; /* Good practice */
   }


/* --- Media Query for smaller screens (<= 1100px) --- */

/* --- Media Query for smaller screens (<= 1100px) --- */

@media (max-width: 1100px) {
    .bbz-container {
        /* Change direction to vertical */
        flex-direction: column; 
        /* Allow wrapping now if needed (though column handles stacking) */
        flex-wrap: wrap; 
        /* Ensure items stretch to full width */
        align-items: stretch; 
    }

    /* Target direct children */
    .bbz-container > * {
        /* Override flex-basis to take full width */
        flex-basis: 100%; 
        width: 100%; /* Explicit width */
        /* Add space below items when stacked */
        margin-bottom: 1em; 
    }

    /* Remove margin from the very last item */
    .bbz-container > *:last-child {
        margin-bottom: 0;
    }
}

  .welcome-section {
    padding: 2rem;
    background: #ffffff;
    border-left: 6px solid var(--nav-bg);
    margin: 2rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    position: relative;
    top: 0;
    z-index: 2;
  }
    .tiles-section {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	  gap: 2rem;
	  padding: 25px 250px;
    }
/* --- Media Query for smaller screens (<= 1118px) --- */
@media (max-width: 1118px) {
    .tiles-section {
        /* Override padding for narrower screens */
        padding: 25px 100px; 
    }
}
    .tile {
      position: relative;
      overflow: hidden;
      border-radius: 4px;
      cursor: pointer;
    }

	.tile img {
		width: 100%;
		/* height: auto;  <-- Remove this */
		display: block;
		
		/* --- Aspect Ratio Control --- */
		aspect-ratio: 3 / 2;  /* Example: 16:9 ratio. Use 1/1 for square, 4/3, etc. */
		object-fit: cover;     /* How the image fills the space:
								  'cover': Fills the space, crops if necessary. (Usually best for tiles)
								  'contain': Fits the whole image, may leave empty space (letterboxing).
								  'fill': Stretches/squishes to fill (distorts).
								  'none': Original size, potentially cropped.
								  'scale-down': Like 'none' or 'contain', whichever is smaller. */
		/* --- End Aspect Ratio Control --- */
	
		transition: transform 0.3s ease;
	}

    .tile:hover img {
      transform: scale(1.05);
    }

    .tile-text {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0, 0, 0, 0.5);
      color: #fff;
      padding: 0.5rem;
      text-align: center;
      transition: background 0.3s ease;
    }

    .tile:hover .tile-text {
      background: rgba(0, 0, 0, 0.7);
    }

    footer {
      background: #222;
      color: #fff;
      padding: 2rem;
      text-align: center;
    }



/* OLD CSS BELOW HERE */


	ul, ol {
		margin-left: 8px;
		padding-left: 0; /* Avoids default browser padding */
		margin-bottom: 4px; /* Clean spacing for list items */
	}
	
	li {
		margin-bottom: 4px; /* Clean spacing for list items */
	}


.shadowbox {
    border-radius: 7px;
    box-shadow: 2px 2px 4px #AAA;
}

.main-section {
	display: flex; /* Establishes a flex container */
	flex-wrap: wrap; /* Optional: Helps if content might force wrapping on small screens */
	gap: 20px; /* Optional: Adds space between the columns */
	/* max-width: 1400px;  changed to a variable.  default 1400 set in pagetemplate  */
	margin: 0 auto;
	width: 100%;
  }
		.footer-content {
			display: flex;
			max-width: 1400px;
			margin: 0 auto;
			padding: 0px;
		  }		  

		.container {
		    display: flex;
		    flex-wrap: nowrap; /* Prevents wrapping */
		    width: 100%;
		    margin: 0 auto;
		    flex: 1; /* Allows the main content to expand and push the footer down */
		}

		.left-column {
			flex: 3; /* Takes 3 parts of the available space (75% when right col exists) */
			min-width: 0; /* Important: Allows the column to shrink below its content's intrinsic width */
			/* flex-basis: 0;  <-- Included in the flex: 3 shorthand */
		  }
		  
		  .right-column {
			flex: 1; /* Takes 1 part of the available space (25% when left col exists) */
			min-width: 0; /* Important: Allows shrinking */
			/* max-width: 25%; <-- The flex: 1 ratio effectively achieves this when left is flex: 3. */
							 /* You could use flex-basis: 25%; flex-grow: 0; instead if you wanted a more rigid 25% */
			/* flex-basis: 0; <-- Included in the flex: 1 shorthand */
		  }

		.left-column, .right-column {
		    margin: 0;
		    padding: 20px;
		}

		.left-column img { max-width: 100%; height: auto; }
		
				
		/* Optional: Basic responsive adjustments */
		@media (max-width: 768px) {
			.main-section {
			flex-direction: column; /* Stack columns vertically on smaller screens */
			}
			.right-column {
			/* Reset flex properties if needed when stacking */
			flex-basis: auto; /* Let it take its natural height */
			width: 100%; /* Ensure it takes full width when stacked */
			}
			.left-column {
			flex-basis: auto;
			width: 100%;
			}
		}

		/* This is now a simple container for the footer content */
		.footer-nav {
			padding: 5px 0px;
			width: 100%;
			text-align: left;
		}

		/* CRITICAL: Apply flexbox to the direct parent of the groups */
		.footer-content {
			display: flex; /* Makes the groups align horizontally */
			flex-wrap: wrap; /* Allows the groups to wrap to a new line on small screens */
			justify-content: space-around;
			align-items: flex-start;
		}
				
		/* This rule remains the same and is correct */
		.footer-group {
			flex: 1; /* Allows groups to grow/shrink */
			min-width: 220px; /* Sets the minimum width before a group wraps */
			text-align: left;
			padding: 20px;
			box-sizing: border-box;
		}

		.footer-group p {
			text-align: left;
		}
				
		.footer-nav p.copyright {
			width: 100%;
			text-align: center;
			margin-top: 20px;
		}
				
		.footer-group h4 {
			border-bottom: 1px solid black;
			padding-bottom: 5px;
		}

		* { box-sizing: border-box; }
		

        @media (max-width: 768px) {
            .container { 
			    display: flex; 
			    padding: 20px;
			    flex-direction: column; /* Stacks the columns vertically */
			}
				
			.header-content {
		        flex-direction: column;
		        align-items: center;
		        text-align: center;
		        gap: 10px;
			}
			.logo {
			    margin-bottom: 10px; /* Add some spacing between the logo and search form */
			    justify-content: center; /* Center the logo horizontally */
        		width: 100%; /* Ensure the logo takes full width of the header */
			}
			
			.header-right {
		        width: 100%;
		        justify-content: center;
		        flex-direction: column;
		        gap: 10px;
		        margin-top: 0;
		    }

		    .left-column, .right-column {
		        width: 100%; /* Make both columns take full width */
		        max-width: 100%; /* Override any previous max-width settings */
		    }
		    /* Push search box directly below the logo */
		    .search-form {
		        width: 100%; /* Take up full width */
		        justify-content: center;
		        display: flex;
		        flex-direction: row;
		        gap: 5px;
		    }
		
		    .search-form input,
		    .search-form button {
		        width: 80%; 
		        max-width: 400px;
		    }

		    .footer-nav {
		        flex-direction: column;
		        align-items: center; /* Centers the footer groups */
		        text-align: center; /* Centers the text inside */
		    }
		    .footer-group {
		        width: 100%; /* Ensures each section takes full width */
		        text-align: left; /* Keeps text left-aligned inside the div */
		    }
			


		}

 .VIpgJd-ZVi9od-ORHb-OEVmcd {
    display: none;
}
/* Translate box */
#google_translate_element {
    padding: 3px;
    border: solid 1px var(--nav-bg);
    border-radius: 4px;
    font-size: 14px;
    background-color: #fff;
    color: #000;
    outline: none;
    box-shadow: none;
}

/* Remove padding and border from inner select */
.goog-te-gadget select {
    padding: 0 !important;
}


/* Override border and margin from Google's external stylesheet */
.goog-te-combo {
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Override iframe styling */
.goog-te-gadget iframe,
.goog-te-menu-frame iframe {
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    background-color: transparent !important;
}



.goog-te-menu-frame {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}



@keyframes repaint {
    from { opacity: 1; }
    to { opacity: 1; }
}

#google_translate_element a.VIpgJd-ZVi9od-xl07Ob-lTBxed span {
    animation: repaint 1s infinite;
}


/* Ensure dropdown shows in a single column */
.goog-te-menu2 {
    display: block !important;
    overflow-x: hidden !important;
}

/* Language items styling */
.goog-te-menu2-item {
    display: block !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    color: #000 !important;
    background-color: #fff !important;
    white-space: nowrap !important;
}

/* Remove border from dropdown options */
.goog-te-menu2-item span,
.goog-te-menu2-item div {
    color: #000 !important;
    background-color: #fff !important;
    border: none !important; /* Removed border here */
    border-radius: 0 !important;
    padding: 8px !important;
}

/* Hover effect to match search box */
.goog-te-menu2-item:hover {
    background-color: #3AA5AF !important;
    color: #fff !important;
}

/* Remove Google Translate banner */
.goog-te-banner-frame {
    display: none !important;
    height: 0 !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Remove inner iframe border */
.goog-te-gadget iframe {
    border: none !important;
}

/* Optional: Improve focus styles */
#google_translate_element select:focus {
    border-color: #3AA5AF;
    box-shadow: 0 0 4px rgba(58, 165, 175, 0.5);
}

/* General Body Text */
body {
    color: #333; /* Dark gray text for readability */
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    color: #222; /* Slightly darker for emphasis */
}

/* Links */
a {
    color: #0056B3; /* Dark blue - high contrast and colorblind-friendly */
    text-decoration: none;
}
a:hover, a:focus {
    color: #003D80; /* Even darker blue for hover/focus */
    text-decoration: underline;
}

.button {
    font-size: 16px; /* Larger font for better readability */
    font-weight: 600; /* Slightly bold for better definition */
    color: #ffffff; /* White text for contrast */
    padding: 12px 24px; /* Balanced padding for a more substantial button size */
    background-color: #27596F; /* Professional dark teal */
    border: 2px solid #27596F; /* Defined border for better visibility */
    border-radius: 5px; /* Softer corners for a modern feel */
    text-transform: uppercase; /* Optional for a more formal look */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Soft shadow for depth */
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    text-decoration: none;
}

.button:hover {
    background-color: #3AA5AF; /* Lighter teal for contrast on hover */
    border-color: #3AA5AF; /* Update border color to match hover state */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Stronger shadow for feedback */
}

.button:active {
    background-color: #1A3E4D; /* Darker teal when clicked */
    border-color: #1A3E4D;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Reduce shadow to simulate click depth */
}

.button:focus {
    outline: 3px solid #FFA500; /* High-contrast focus ring for accessibility */
    outline-offset: 2px;
}
/* Footer */
.footer-nav {
    background-color: #D7F0FF; 
    color: #000000 ; /* menu text */
}
.footer-nav a {
    color: #000000 ; /* Light gray text for readability */
}
.footer-nav a:hover {
    color: #27596F; /* offset hover color for menu items */
}
.footer-nav h4 {
    color: #000000 ; /* menu header text color */
}

/* Accessibility Focus Indicators */
*:focus {
    outline: 3px solid #FFA500; /* Orange focus outline for visibility */
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    body {
        background: #000; /* Black background */
        color: #FFF; /* White text */
    }
    a {
        color: #0FF; /* Cyan for high visibility */
    }
}

p {
    font-size: 16px; /* Default text size */
    line-height: 1.2; /* 150% spacing for readability */
    margin-bottom: 16px; /* Adds spacing between paragraphs */
}

/* For large text (headings, banners, etc.) */
h1, h2, h3 {
    line-height: 1.4; /* Slightly tighter spacing for large text */
}


table {
	padding: 0;
	border-collapse: collapse;
	font-size: 100%;
	width: 100%;
	text-align: center;
	border-spacing: 2px;
	}

th, td {
  padding: 4px 4px;
  -webkit-font-smoothing: antialiased;
}

.cellborder {
	border: solid 1px #c0c0c0;	
	padding: 5px;
	}

.tddot {
    border-bottom: 1px #999999 dotted;
    padding: 1px;
    vertical-align: top;
    font-size: .8em;
    line-height: 18px;
}

.dotted {
	border-bottom: 1px #CCCCCC dotted;
}
.tdhed {
	border: 1px #999999 solid;
	background-color: #D5D5D5;
	vertical-align: top;
	font-size: .8em;
}

.tdhed3 {
	border: 1px #999999 solid;
	background-color: #A5A5A5;
	padding: 1px;
	vertical-align: top;
	font-size: .8em;
}

.tdsubhedg {
	border: 1px #999999 solid;
	background-color: #D7FFD7;
	padding: 1px;
	vertical-align: top;
	font-size: .8em;
}

.tdsubhed {
	border: 1px #999999 solid;
	background-color: #D7F0FF;
	padding: 1px;
	vertical-align: top;
	font-size: .8em;
}

.tdcell {
	border: 1px #999999 solid;
	padding: 1px;
	vertical-align: top;
	font-size: .7em;
}

.tdcellwhite {
	border: 1px #999999 solid;
	vertical-align: top;
	font-size: .9em;
	background-color: #FFFFFF;
}


.button {
	font-size: 0.8em;
	color: #ffffff;
	padding: 3px;
	border-radius: 1px;
	background-color: #27596F;
	text-decoration: none;
	font-weight: normal;
	box-shadow: 0 2px 3px #000;
	}

.button:hover {
	color: #ffffff;
	padding: 3px;
	border-radius: 1px;
	background-color: #3e81a6;
	text-decoration: none;
	font-weight: normal;
	box-shadow: 0 2px 3px #000;
	}
.bolder {
	font-weight: bold;
}

/* Style for the scroll-to-top button */
.scroll-to-top {
    position: fixed; /* Keeps it fixed in place */
    bottom: 20px; /* Distance from the bottom of the screen */
    right: 20px; /* Distance from the right of the screen */
    width: 50px;
    height: 50px;
    background-color: #3E81A6; /* Button background color */
    color: white; /* Arrow color */
    font-size: 30px;
    text-align: center;
    line-height: 50px;
    border-radius: 50%; /* Circular shape */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Subtle shadow */
    text-decoration: none;
    opacity: 0; /* Hidden by default */
    transition: opacity 0.3s ease, background-color 0.3s ease;
    z-index: 999; /* Ensure it stays on top */
}

.scroll-to-top:hover {
    background-color: #27596F; /* Darker shade on hover */
}

.scroll-to-top.show {
    opacity: 1; /* Make it visible */
}
.highlight {background-color: #3AA5AF; color: #FFFFFF;}
.lowlight {background-color: #27596F; color: #FFFFFF;}

.fullpanel {
	border: 1px solid #999999; 
	background-color: #F0F0F0; 
	border-radius: 5px; 
	width: 98%; 
	padding: 7px; 
	box-shadow: 2px 2px 5px #CCC;
	font-size: .9em;
}
.paneldrop {
    padding: 7px;
    border: 1px solid #999999;
    border-radius: 5px;
    background-color: #F0F0F0;
    font-size: .9em;
    box-shadow: 2px 2px 5px #CCC;
}
.contentBox2 {
    float: left;
    width: 48%;
    text-align: left;
    line-height: 1.4em;
    margin: 0 1%;
}
/* ======== MISCELLANEOUS CLASSES ======== */
.center {text-align: center;}  
.tiny {font-size: 75%; text-align: center;}
.right {text-align: right;}
.left {text-align: left;}

h1 {font: 1.6em Arial, Helvetica, sans-serif; color: #27596F; margin: .3em 0 .3em 0; letter-spacing: 1px;}
h2 {font: 1.2em Arial, Helvetica, sans-serif; color: #404040; margin: .3em 0; letter-spacing: 1px; text-align: left; border-bottom: 1px solid}
h3 {font: 1.4em Arial, Helvetica, sans-serif; color: #27596F; margin: .2em 0; padding: 0;}
h4 {font: normal 1.2em Arial, Helvetica, sans-serif; color: #27596F; margin: .3em 0;}
h5 {font: normal 1.2em Arial, Helvetica, sans-serif; color: #27596F; margin: .3em 0; text-align: left; border-bottom : 1px solid;}
h6 {font: bold 1.2em Arial, Helvetica, sans-serif; color: #26596F; margin: .3em 0;}
h1.alternate {font: 1.6em Arial, Helvetica, sans-serif; color: #27596F; margin: .3em 0 .3em 0; letter-spacing: 1px; text-shadow: 1px 1px 3px #333}

.qalt {  
	color: #800000; /* Red warning color */
}

.quot {
	color: #27596F;
	font-weight: bold;
	font-size: 1.2em;
}
dt {
    display: block;
    unicode-bidi: isolate;
}
dd {
    display: block;
    margin-inline-start: 40px;
    unicode-bidi: isolate;
}
.butstyle {
	font-family: Arial;
	font-size: 8pt;
	color: black;
	font-weight: bold;
}
.rich-editor {
	background: #fff;
	border: 1px solid #ccc;
	padding: 10px;
	min-height: 150px;
	color: #000;
  }
  .rte-toolbar {
    display:flex; gap:6px; flex-wrap:wrap;
    margin:6px 0; padding:6px; background:#f7f7f7; border:1px solid #ddd; border-radius:6px;
  }
  .rte-toolbar button {
    margin-right: 6px;padding:4px 8px; border:1px solid #bbb; background:#fff; border-radius:4px; cursor:pointer;
  }
	.rte{
	width: 100%;
	min-height: 140px;
	max-height: 70vh;       /* optional cap */
	padding: 8px;
	border: 1px solid #ccc;
	border-radius: 6px;
	box-sizing: border-box;
	overflow: auto;         /* REQUIRED for resize handle to show */
	resize: vertical;       /* shows the bottom-right grippy */
	background: #fff;
	}
	.rte:focus { outline: 2px solid #9ec9ff; }
.panel {
	padding:7px; 
	border: 1px solid #999999; 
	border-radius: 5px; 
	background-color: #f4f4f9;
	font-size: .9em;
}
.addresspanel {
	border: 1px solid #CCCCCC; 
	background-color: #F5F5F5; 
	border-radius: 5px; 
	width: 300px; 
	padding: 5px; 
	box-shadow: 2px 2px 5px #EEE;
}
.names {
	color: #27596F;
	font-weight: bold;
	text-shadow: 1px 1px 2px #DDD; 
	font-size: 1.1em;

}
#address {
	position: absolute;
	top: 10px;
	right:5px;
	height: 100px;
	width: 500px;
	text-align: right;
	font: 20px 'Agency FB', Verdana, Helvetica, sans-serif; 
	color: #fff;
	font-weight: normal;
	font-style: normal;
	text-shadow: 1px 1px 3px #333;
	}

/* Segmented selector (button-like radios) */
.segmented { display:flex; gap:8px; flex-wrap:wrap; }
.segmented input[type="radio"] { 
  position:absolute; 
  opacity:0; 
  pointer-events:none; 
}
.segmented label {
  display:inline-block;
  padding:6px 10px;
  border:1px solid #27596F;
  border-radius:6px;
  background:#f6f9fb;
  color:#27596F;
  font-weight:600;
  cursor:pointer;
  user-select:none;
}
.segmented input[type="radio"]:checked + label {
  background:#27596F;
  color:#fff;
}

/* due badge */
.due-badge{display:inline-block;padding:2px 6px;border-radius:12px;border:1px solid #bbb;background:#f6f6f6;color:#333;font-size:.85em}
.due-red { background:#ffe4e6; border-color:#fb7185; color:#7f1d1d; }
.due-bold{ font-weight:700; }
.meta.due.due-soon   { background:#ffecec; border-color:#f19999; color:#7f1d1d; } /* 3–4 business days */
.meta.due.due-urgent { background:#ffe4e6; border-color:#fb7185; color:#7f1d1d; } /* <=2, today, overdue */
.meta.due.due-bold   { font-weight:700; }
/* Make badges look clickable, not like the card drag surface */
.badge { cursor: pointer; }

.badge.prio { border:1px solid #aaa; }
.badge.prio.high   { background:#fff; color:#7f1d1d; border-color:#7f1d1d; }
.badge.prio.medium { background:#fff; color:#92400e; border-color:#92400e; }
.badge.prio.low    { background:#fff; color:#166534; border-color:#166534; }

/* Base difficulty badge */
.badge.diff {
  font-weight:700;
  letter-spacing:.02em;
  border:1px solid transparent;
  color:#fff; /* all variants below are dark enough for white text */
}

/* Difficulty spectrum (darker hues for contrast) */
.badge.diff.diff-1 { background:#166534; border-color:#14532d; } /* green 700 */
.badge.diff.diff-2 { background:#4d7c0f; border-color:#3f6212; } /* lime 700 */
.badge.diff.diff-3 { background:#92400e; border-color:#78350f; } /* amber 800 */
.badge.diff.diff-4 { background:#9a3412; border-color:#7c2d12; } /* orange 800 */
.badge.diff.diff-5 { background:#7f1d1d; border-color:#7f1d1d; } /* red 800 */

/* Optional fallback if value is missing/out of range */
.badge.diff.is-unknown { background:#6b7280; border-color:#4b5563; } /* gray */

.hide-status-badge .badge.status { display:none; }


/* Overlay shell sits above the page and lets only the card receive clicks */
.badge-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;        /* clicks pass through except on the card */
}

/* The floating picker card – positioned by JS via top/left */
.badge-overlay-card {
  position: fixed;          /* REQUIRED so top/left works */
  min-width: 260px;
  background: #fff;
  border: 1px solid #cfcfcf;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  padding: 10px;
  pointer-events: auto;        /* clickable */
}

.badge-overlay .segmented {
  display: inline-grid;
  grid-auto-flow: column;
  gap: 6px;
}
.badge-overlay .segmented input { display: none; }
.badge-overlay .segmented label {
  padding: 6px 10px;
  border: 1px solid #334155;       /* slate-700 */
  border-radius: 18px;
  cursor: pointer;
  user-select: none;
  font-size: .9rem;
}
.badge-overlay .segmented input:checked + label {
  background: #334155; color: #fff;
}

/* small header text in overlay (optional) */
.badge-overlay .overlay-title {
  font-weight: 700;
  margin-bottom: 8px;
  color: #1f2937; /* gray-800 */
}

/* Save button "dirty" state */
#save-order.is-dirty {
  background: #D75FD7;        /* pink */
  border-color: #D75FD7;      /* darker pink border */
  color: #fff;
}
#save-order.is-dirty:hover {
  color: #490549;        /* hover while dirty */
}

/* ===== Asbestos page polish (scoped) ===== */
.asb-section { margin: 1.5rem 0 0; }
.asb-section > h2 {
  font-size: 1.25rem;
  margin: 0 0 .75rem 0;
  padding-bottom: .35rem;
  border-bottom: 2px solid var(--nav-bg);
}

/* Grid & equal-height cards */
.asb-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); 
  gap: 1rem; 
  align-items: stretch;
}
.asb-card { 
  background: #fff; 
  border: 1px solid #e6e6e6; 
  border-left: 6px solid var(--nav-bg);
  border-radius: 10px; 
  padding: 1rem; 
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
  display: flex; 
  flex-direction: column;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.asb-card:hover { 
  transform: translateY(-1px); 
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
  border-color: var(--button-teal);
}
.asb-card h3 { margin: 0 0 .35rem 0; font-size: 1.1rem; color: #1f2937; }
.asb-card p { margin: 0 0 .85rem 0; color: #374151; }

/* Actions pinned to bottom */
.asb-actions { margin-top: auto; display:flex; flex-wrap:wrap; gap:.5rem; }

/* Button variants layered on top of your existing .button */
.button.asb-primary { 
  background-color: var(--nav-bg); border-color: var(--nav-bg);
}
.button.asb-primary:hover { 
  background-color: var(--button-teal); border-color: var(--button-teal);
}
.button.asb-secondary {
  background-color: #f3f4f6; color: #111827; border-color: #d1d5db; 
}
.button.asb-secondary:hover {
  background-color: #e5e7eb; border-color: #cbd5e1; color: #111827;
}

/* Tighter button density inside cards */
.asb-actions .button { 
  padding: .5rem .75rem; 
  border-radius: 8px; 
  text-transform: none; 
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

.asb-card[data-type="notice"]  { background-image: url('/images/icon-clipboard.svg'); }
.asb-card[data-type="amend"]   { background-image: url('/images/icon-edit.svg'); }
.asb-card[data-type="guide"]   { background-image: url('/images/icon-book.svg'); }
.asb-card[data-type] {
  background-repeat: no-repeat; background-position: calc(100% - 12px) 12px; background-size: 24px;
}

.asb-section + .asb-section { margin-top: 2rem; }

/* Optional: fix long-page scroll if needed (your CSS sets body {overflow-y:hidden}) */
html, body { overflow-y: auto; }

/* Optional tighter label spacing */
.fi .help { font-size:.85em; color:#666; margin-top:4px; }

.two-col .col > h3 {
  text-align: center;
}

.contentBox3 {
	float: left;
	width: 31.333%;
	text-align: left;
	line-height: 1.4em;
	margin: 0 1%;
}
/* ======== SECTION BLOCKS ======== */
/* This style remains the same */
.box-row {
    display: flex;
    gap: 2%;
    margin-bottom: 1em;
}

/* MODIFIED: This now targets any 'div' directly inside a 'box-row'.
  It will apply to both your '.contentBox2' divs and the single '.panel' div.
*/
.box-row > div {
    flex: 1; /* This is the key change! */
    min-width: 0; /* Prevents content from overflowing in some cases */

    /* These properties are still needed */
    text-align: left;
    line-height: 1.4em;
    display: flex;
    flex-direction: column;
}

/* This makes the panel inside the container grow to match heights */
.box-row > div .panel {
    flex-grow: 1;
}
/* Add this new rule to your CSS */
.simple-content {
    display: block !important; /* Override the flex settings from the general rule */
}
/* ======== IMAGE FORMATTING ======== */
img {border: none;}
.imageleft {margin: 0 10px 0 0; float: left;}
.imageright {margin: 0 0 0 10px; float: right;}
.imageleft-border {background-color: #ffffff; margin: 0 10px 0 0; padding: 3px; float: left; border: 1px #d0d0d0 solid;}
.imageright-border {background-color: #ffffff; margin: 0 0 0 10px; padding: 3px; float: right; border: 1px #d0d0d0 solid;}
.image-catalog {border: 1px #d0d0d0 solid; padding: 1%;margin: 1% 2%; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);}
.image-gallery {border: 1px #d0d0d0 solid; padding: 1%; margin: 1% 2%;}
.lgproduct-image {float: left; width: 350px; padding: 1%; margin: 2%;}
.lgproduct-text {float: left; width: 200px; padding: 1%; margin: 2%; text-align:center;}
figure {float:left; width: 150px; text-align:center;}
figcaption {text-align: center; font-size: .90em;}

.halfpanel {
	border: 1px solid #CCCCCC; 
	background-color: #F5F5F5; 
	border-radius: 5px; 
	width: 500px; 
	padding: 5px; 
	box-shadow: 2px 2px 5px #EEE;
}

.bolder {
	font-weight: bold;
}
.std {
	
	font-weight: normal;
}
.names {
	color: #27596F;
	font-weight: bold;
	text-shadow: 1px 1px 2px #DDD; 
	font-size: 1.1em;

}
.new {
	color: #CC0000;
	font-weight:bold;
	font-style: italic;	
}
.sorted {
	background-color: #D5E7FF;
	border-bottom: 1px #CCCCCC dotted;
}

thead th {
    position: sticky;
    top: 0;
    background: #fff; /* or your preferred background */
    z-index: 2;
    border-bottom: 2px solid #333;
}
.clearfix::after {
	content: "";
	display: table;
	clear: both;
  }
  .clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}
.dropcap {
	float: left; 
	color: #3e81a6; 
	font: 60px/50px Georgia, Times, "Times New Roman", serif;
	padding: 3px 4px 0 0;
	}

p.dropcap {overflow: hidden;}

  .notification-group {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: 1em;
	gap: 1em;
  }
  
  .notification-label {
	white-space: nowrap;
	flex-shrink: 0;
	font-weight: bold; /* Make label text bold */
  }
  

  
  .notification-county-wrapper {
	display: flex;
	justify-content: flex-end;
	flex-shrink: 1;
	overflow-x: auto;
  }
  
  .notification-counties {
	display: flex;
	flex-wrap: wrap;      /* Allow checkboxes to wrap onto new lines */
	gap: 0.75em;
	justify-content: flex-end;
  }

  .facility-group {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 1em;
  }
  
  .facility-label {
	font-weight: bold;
	flex: 1 1 200px;
	min-width: 200px;
  }
  
  .facility-selectors {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	flex: 1 1 300px;
	min-width: 300px;
	gap: 0.5em;
  }
  
.indent {
	margin-left: 30px;
}

.indent2 {
	margin-left: 60px;
}

.indent3 {
	margin-left: 90px;
}

.indent4 {
	margin-left: 120px;
}

.indent5 {
	margin-left: 170px;
}

.edit-container {
	font-family: Arial, sans-serif;
	background-color: #f4f4f9;
	color: #333;
	margin: 20px;
	padding: 10px;
}
.edit-container {
	background-color: #ffffff;
	padding: 20px;
	border: 1px solid #ccc;
	box-shadow: 0 2px 10px rgba(0,0,0,0.1);
	border-radius: 5px;
	max-width: 1200px;
	margin: 0 auto;
}
.edit-title {
	color: #444;
	border-bottom: 2px solid #007bff;
	padding-bottom: 10px;
	font-size: 22px;
}
.edit-form-group label {
	display: block;
	margin-top: 10px;
	font-weight: bold;
	color: #555;
}
.edit-form-group input[type=text], .edit-form-group select {
	width: 100%;
	padding: 8px;
	margin-top: 5px;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
}
.edit-submit {
	background-color: #007bff;
	color: white;
	padding: 10px 15px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	margin-top: 15px;
	font-size: 16px;
	display: block;
	width: 100%;
	transition: background-color 0.2s ease-in-out;
}
.edit-submit:hover {
	background-color: #0056b3;
}
.edit-success {
	margin-top: 10px;
	padding: 10px;
	background-color: #d4edda;
	color: #155724;
	border: 1px solid #c3e6cb;
	border-radius: 4px;
}
.no-wrap {
	white-space: nowrap;
  }
  .honeypot-field {
        display: none;
}