/* === FIX #1: Add universal box-sizing for more predictable layouts === */
	    * {
	        box-sizing: border-box;
	    }

	    body { font-family: sans-serif; line-height: 1.6; margin: 0; padding: 0; background-color: #ffffff; color: #000000; }
    
		body a:visited {
		        color: #0066cc; /* Set to the same as the default link color */
		    }
			
		body a {
		        color: #0066cc; /* Set to the same as the default link color */
		    }
	
	    /* Header and Menu Styles */
	    .site-header {
	        background-color: #e8f4f8;
	        padding: 15px 20px;
	        box-shadow: 0 0px 0px rgba(0,0,0,0);
	        margin-bottom: 10px;
	        display: flex;
	        justify-content: space-between;
	        align-items: center;
	        position: sticky; /* Make header sticky */
	        top: 0; /* Stick to the top */
	        width: 100%; /* Full width */
	        z-index: 1000; /* Ensure it stays on top of other content */
	        position: relative; /* For absolute positioning of mobile menu */
	    }
	    .site-logo {
	        font-size: 1.5em;
	        font-weight: bold;
	        color: #333;
	        text-decoration: none;
	        flex-shrink: 0; /* Prevent logo from shrinking */
	        margin-right: 20px; /* Space between logo and menu */
	    }
	    .site-logo:hover {
	        color: #0066cc;
	    }

	    /* Main Navigation (Desktop) */
	    .main-navigation {
	        display: flex; /* Use flexbox for desktop navigation */
	        flex-grow: 1; /* Allow navigation to take available space */
	        justify-content: flex-end; /* Align items to the right */
	        align-items: center;
	        min-width: 0; /* Allows flex item to shrink below content size */
	        overflow: visible;  /* Prevents internal content from causing external overflow */
	    }
	    .main-navigation ul {
	        list-style: none;
	        padding: 0;
	        margin: 0;
	        display: flex; /* Horizontal layout for items within ul */
	        gap: 10px; /* Adjusted gap for more items to fit */
	        flex-wrap: nowrap; /* Prevent items from wrapping by default */
	    }

	    .main-navigation li {
	        position: relative; /* For dropdown positioning */
	        flex-shrink: 0; /* Prevent individual list items from shrinking */
	    }
	    .main-navigation li a {
	        padding: 10px 15px;
	        color: #0066cc;
	        text-decoration: none;
	        display: block;
	        white-space: nowrap; /* Prevent top-level items from wrapping their text */
	    }
	    /* === FIX: Keep main navigation link color the same after visited === */
	    .main-navigation li a:visited {
	        color: #0066cc; /* Set to the same as the default link color */
	    }
	    .main-navigation li a:hover,
	    .main-navigation li a.active {
	        color: #0066cc;
	        background-color: #e9f5ff;
	        border-radius: 5px;
	    }

	    /* Dropdown Menu Styles */
	    .main-navigation .has-dropdown > .desktop-only-dropdown-toggle::after {
	        content: ' ▼'; /* Dropdown indicator */
	        font-size: 0.7em;
	        vertical-align: middle;
	        margin-left: 5px;
	        transition: transform 0.2s;
	    }
	    .main-navigation .has-dropdown.open > .desktop-only-dropdown-toggle::after {
	        transform: rotate(180deg);
	    }

	    .main-navigation .submenu {
	        display: none; /* Hidden by default */
	        position: absolute;
	        top: 100%; /* Position below parent link */
	        right: 0; /* Aligns right edge of dropdown with right edge of parent li */
	        background-color: #fff;
	        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	        list-style: none;
	        padding: 0px 0;
	        margin: 0;
	        min-width: 220px; /* Minimum width for dropdown */
	        z-index: 2000; /* Increased z-index */
	        border-radius: 5px;
	        max-height: 400px; /* Limit height for scrollable dropdowns */
	        overflow-y: auto; /* Enable scrolling for long lists */
	    }
	    .main-navigation li:hover > .submenu,
	    .main-navigation li.open > .submenu { /* For JS toggling */
	        display: block;
	    }
	    .main-navigation .submenu li a {
	        padding: 8px 15px;
	        color: #0066cc;
	        white-space: nowrap;
	    }
	    /* === FIX: Keep submenu link color the same after visited === */
	    .main-navigation .submenu li a:visited {
	        color: #0066cc; /* Set to the same as the default submenu link color */
	    }
	    .main-navigation .submenu li a:hover {
	        background-color: #f0f0f0;
	        color: #0066cc;
	    }
	    .submenu-header {
	        color: #777;
	        font-size: 0.85em;
	        padding: 8px 15px;
	        margin-top: 10px;
	        border-bottom: 1px solid #eee;
	        margin-bottom: 5px;
	    }
	    .submenu-divider {
	        border: 0;
	        border-top: 1px solid #eee;
	        margin: 10px 0;
	    }


	    /* Hamburger Menu Button */
	    .menu-toggle {
	        display: none; /* Hidden by default on desktop */
	        flex-direction: column;
	        justify-content: space-around;
	        width: 30px;
	        height: 25px;
	        background: transparent;
	        border: none;
	        cursor: pointer;
	        padding: 0;
	        z-index: 1001; /* Above the navigation to be clickable */
	        margin-left: 15px; /* Space between last menu item and toggle */
	    }
	    .menu-toggle span {
	        display: block;
	        width: 100%;
	        height: 3px;
	        background: #333;
	        border-radius: 3px;
	        transition: all 0.3s ease-in-out;
	    }

	    /* Hamburger icon to X transformation */
	    .menu-toggle.open span:nth-child(1) {
	        transform: translateY(11px) rotate(45deg);
	    }
	    .menu-toggle.open span:nth-child(2) {
	        opacity: 0;
	    }
	    .menu-toggle.open span:nth-child(3) {
	        transform: translateY(-11px) rotate(-45deg);
	    }

	    /* Main two-column layout */
	    .page-container {
	        max-width: 1200px;
	        margin: auto;
	        display: flex;
	        align-items: flex-start;
	        gap: 30px;
	        padding: 0 20px;
	    }
	    .main-content {
	        flex: 3;
	        background: #fff;
	        padding: 20px;
	        border-radius: 0px;
	        box-shadow: 0 0 0px rgba(0,0,0,0.1);
	    }
	    .sidebar-wrapper {
	        flex: 1;
	        position: sticky;
	        top: 20px; /* Adjust if header height changes, relative to viewport */
	        align-self: flex-start; /* Ensure sidebar starts at the top */
	    }
    
	    /* Sidebar specific styles */
	    .sidebar {
	        background: #fff;
	        padding: 20px;
	        border-radius: 8px;
	        box-shadow: 0 0 0px rgba(0,0,0,0.1);
	    }
	    .sidebar h3 { margin-top: 0; }
	    .sidebar h4 { margin-bottom: 5px; color: #333; }
	    .sidebar ul { list-style: none; padding-left: 10px; margin: 0 0 20px 0; }
	    .sidebar li { padding: 2px 0; }
	    .sidebar li a { text-decoration: none; color: #0066cc; }
	    /* === FIX: Keep sidebar link color the same after visited === */
	    .sidebar li a:visited {
	        color: #0066cc; /* Set to the same as the default sidebar link color */
	    }
	    .sidebar li a:hover { text-decoration: underline; }

	    /* Other existing styles */
	    .uc-table { width: 100%; }
	    .uc-table td { padding: 10px; }
	    .breadcrumbs ol { list-style: none; padding: 0; margin: 0 0 20px 0; }
	    .breadcrumbs li { display: inline; }
	    .breadcrumbs li+li:before { padding: 8px; color: #555; content: "/\00a0"; }
	    .conversion-table { width: 100%; max-width: 400px; border-collapse: collapse; text-align: center; margin-top: 15px; }
	    .conversion-table th, .conversion-table td { padding: 8px; border: 1px solid #ddd; }
	    .conversion-table tr:nth-child(even){background-color: #f9f9f9;}
	    .conversion-table th { background-color: #f2f2f2; }

	    /* === NEW: Grey stipled line for desktop only === */
	    @media (min-width: 769px) { /* Applies only for screens wider than 768px */
	        .main-content {
	            border-right: 3px dotted #cccccc; /* 1px dotted line, light grey */
	        }
	    }

	    html.no-scroll {
	        overflow: hidden;
	        height: 100%; /* Ensures overflow: hidden works reliably on html */
	    }
		

	    /* Mobile Responsiveness */
	    @media (max-width: 768px) {
	        .site-header {
	            justify-content: space-between; /* Keep logo and hamburger separate */
	        }
	        .site-logo {
	            margin-right: 0; /* Remove right margin on mobile */
	        }
	        .menu-toggle {
	            display: flex; /* Show hamburger on mobile */
	            margin-left: 0; /* No left margin for toggle */
	        }
	        .main-navigation {
	             display: none; /* Hidden by default */
	             width: 100%;
	             flex-direction: column;
	             position: fixed; /* CHANGE: Changed from absolute to fixed */
	             top: 60px;       /* CHANGE: Position it directly below the header. Adjust 60px if your header height is different. */
	             left: 0;
	             bottom: 0;       /* CHANGE: Make it fill the rest of the viewport height */
	             background-color: #f8f9fa; /* Consistent background color */
	             box-shadow: 0 2px 4px rgba(0,0,0,0.05);
	             padding: 10px 0;
	             overflow-y: auto; /* Keep: Allows menu content to scroll internally */
	             max-height: none; /* REMOVE/CHANGE: No longer needed as 'bottom: 0' and 'top' define its height */
	             z-index: 999;    /* CHANGE: Ensure it's below the header (which is z-index: 1000) but above other content */
	         }
	         .main-navigation.menu-open {
	             background-color: #f8f9fa;
	             display: flex; /* Show navigation when menu is open */
	         }
	        .main-navigation ul {
	            flex-direction: column; /* Stack menu items vertically */
	            width: 100%;
	            align-items: flex-start; /* Align items to the left */
	            gap: 0; /* Remove gap between mobile items */
	        }
	        .main-navigation li {
	            width: 100%;
	        }
	        .main-navigation li a {
	            padding: 10px 20px; /* Add horizontal padding for mobile links */
	            width: 100%;
	            text-align: left;
	            box-sizing: border-box; /* Include padding in width, crucial for mobile overflow */
	            white-space: normal; /* Allow text to wrap on mobile */
	        }
	        /* Hide desktop dropdown indicators on mobile */
	        .main-navigation .has-dropdown > .desktop-only-dropdown-toggle::after {
	            display: none;
	        }
	        /* Ensure submenus are always visible and flat in mobile menu */
	        .main-navigation .submenu {
	            position: static; /* Remove absolute positioning */
	            display: flex; /* Always display */
	            flex-direction: column;
	            width: 100%;
	            padding: 0;
	            box-shadow: none; /* Remove shadow */
	            border-radius: 0;
	            max-height: none; /* No max height for submenus in mobile */
	            overflow-y: visible; /* No scroll for submenus in mobile */
	        }
	        .main-navigation .submenu li a {
	            padding-left: 30px; /* Indent submenu items */
	        }
	        .submenu-header {
	            padding-left: 25px;
	        }
	        .page-container {
	            flex-direction: column; /* Stack main content and sidebar vertically on small screens */
	            padding: 0 10px; /* Reduce horizontal padding on mobile */
	        }
	        .sidebar-wrapper {
	            position: static; /* Remove sticky positioning on mobile */
	            width: 100%;
	            margin-top: 20px;
	        }
	        /* Hide the More... dropdown on mobile as all items are flattened */
	        #activeMoreDropdown {
	            display: none !important;
	        }
	    }
		
		
		
		.site-footer {
		    background-color: #f8f9fa; /* Light grey background */
		    padding: 40px 20px;
		    border-top: 1px solid #e0e0e0;
		    color: #555;
		    margin-top: 50px; /* Add some space above the footer */
		}
		.site-footer h5 {
		    color: #333;
		    font-size: 1.1em;
		    margin-bottom: 15px;
		}
		.site-footer .footer-links {
		    padding-left: 0; 
		}
		.site-footer .footer-links li {
		    display: inline-block; /* <-- ADD THIS LINE */
		    margin-right: 15px;    /* <-- ADD THIS for spacing between links */
		    margin-bottom: 8px;    /* This can be kept or removed */
		}
		.site-footer .footer-links li {
		    margin-bottom: 8px;
		}
		.site-footer .footer-links li a {
		    color: #0066cc;
		    text-decoration: none;
		}
		.site-footer .footer-links li a:hover {
		    text-decoration: underline;
		}
		.site-footer .text-muted {
		    font-size: 0.9em;
		}
		/* Responsive footer */
		@media (max-width: 768px) {
		    .site-footer .text-md-start,
		    .site-footer .text-md-end {
		        text-align: center !important;
		    }
		    .site-footer .col-md-4 {
		        margin-bottom: 20px;
		    }
		    .site-footer .col-md-4:last-child {
		        margin-bottom: 0;
		    }
		}