@import url("fontawesome-all.min.css");
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,700italic|Open+Sans+Condensed:700");

/*
	TXT by HTML5 UP
	html5up.net | @ajlkn
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/

/********************************************
 * HAFABRA DATA — DESIGN SYSTEM
 ********************************************/

/* -----------------------------------------
   COLOR VARIABLES
----------------------------------------- */
:root {
    
    /* -------------------------------------- */
    /*  PRIMARY BRAND GREEN                   */
    /* -------------------------------------- */
    --primary-dark:   #3D8C41;
    --primary:        #4CAF50;
    --primary-light:  #7ECF82;
    --primary-ultralight: #e9f5e9;
    
    /* -------------------------------------- */
    /*  GOLD ACCENT PALETTE                   */
    /* -------------------------------------- */
    --secondary-dark:   #8A6E2F;
    --secondary:        #C9A74A;
    --secondary-light:  #E4D28B;
    --secondary-ultralight: #F9F4DE;
    --secondary-bg:     #FBF8EC;
    
    /* -------------------------------------- */
    /*  NEUTRALS (GRAYS)                      */
    /* -------------------------------------- */
    --gray-900: #1A1A1A;
    --gray-800: #2E2E2E;
    --gray-700: #4B4B4B;
    --gray-600: #6D6D6D;
    --gray-500: #9A9A9A;
    --gray-400: #C7C7C7;
    --gray-300: #E0E0E0;
    --gray-200: #EFEFEF;
    --gray-100: #F7F7F7;
    --white: #FFFFFF;

    /* -------------------------------------- */
    /*  FEEDBACK COLORS                       */
    /* -------------------------------------- */
    --success: var(--green);
    --success-light: var(--green-light);

    --warning: var(--gold);
    --warning-light: var(--gold-light);

    --error: #D64545;
    --error-light: #F6D4D4;
    
    --info: #698FCB;

    /* -------------------------------------- */
    /*  UI ELEMENT COLORS                     */
    /* -------------------------------------- */

    /* Links */
    --link-color: var(--primary-dark);
    --link-hover: var(--primary);
    
    /* Borders & lines */
    --border:         #E5E9E7;
    --border-input:   var(--gray-300);
    --border-hover:   var(--primary);

    /* Shadows */
    --shadow-soft: 0 2px 6px rgba(0,0,0,0.08);
    --shadow-medium: 0 4px 12px rgba(0,0,0,0.12);
    --shadow-dark: 0 6px 16px rgba(0,0,0,0.16);
    
    /* Backgrounds */
    --bg-main:        #F8FAF9;
    --bg-white:       #FFFFFF;
    --bg-card:        #FFFFFF;
    --bg-alt:         #C1CAC5;
    --bg-gray:        #8b9790;
    --bg-dark:        #6B7770;
    --bg-ultradark:   #353c37;

    /* Typography */
    --text-heading:   var(--gray-700);
    --text-main:      var(--gray-800);
    --text-secondary: var(--gray-600);
    --text-soft:      #6B7280;
    --text-muted:     var(--gray-500);
    --text-white:     var(--white);

    /* Radii */
    --radius-sm:      6px;
    --radius-md:      12px;
    --radius-lg:      18px;

    /* Spacing scale (8px baseline) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
}

/* This is some default stuff */

html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

	blockquote:before, blockquote:after, q:before, q:after {
		content: '';
		content: none;
	}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

body {
	-webkit-text-size-adjust: none;
}

/* Dit is voor arceringen */
mark {
	background-color: transparent;
	color: inherit;
}

/* Iets voor Firefox */
input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

input, select, textarea {
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	appearance: none;
}

/* Basic */

	html {
		box-sizing: border-box;
	}

	*, *:before, *:after {
		box-sizing: inherit;
	}

	body {
		background: var(--bg-main);
	}

	body.is-preload *, body.is-preload *:before, body.is-preload *:after {
		-moz-animation: none !important;
		-webkit-animation: none !important;
		-ms-animation: none !important;
		animation: none !important;
		-moz-transition: none !important;
		-webkit-transition: none !important;
		-ms-transition: none !important;
		transition: none !important;
	}

	body, input, textarea, select {
		font-family: 'Open Sans', sans-serif;
		color: var(--text-main);
		background: var(--bg-main);
		font-weight: 400;
		font-size: 13pt;
		line-height: 1.8;
	}

	h1, h2, h3, h4, h5, h6 {
		font-family: 'Open Sans Condensed', sans-serif;
		text-align: center;
		font-weight: 700;
		color: var(--text-heading);
		margin: 0 0 var(--space-4);
		text-transform: uppercase;
	}

	h1 { font-size: 2.1rem; }
    h2 { font-size: 1.7rem; }
	    h2.major {
			position: relative;
			border-top: solid 5px var(--bg-alt);
			font-size: 1.65em;
			text-align: center;
			margin: 0 0 3em 0;
			top: 1em;
		}

			h2.major span {
				background: var(--bg-white);
				position: relative;
				display: inline-block;
				top: -1em;
				padding: 0 1.25em 0 1.25em;
			}

    h3 { font-size: 1.4rem; }
    h4 { font-size: 1.2rem; }
	
	a {
        color: var(--link-color);
        text-decoration: none;
        transition: 0.15s ease;
    }
        a:hover {
            color: var(--link-hover);
            text-decoration: underline;
        }




	b, strong {
		font-weight: 700;
		color: var(--text-secondary);
	}

	i, em {
		font-style: italic;
	}

	br.clear {
		clear: both;
	}

	p, ul, ol, dl, table {
		margin: 0 0 var(--space-4);
		color: var(--text-main);
	}

/* Section/Article */

	section, article {
		margin-bottom: 2em;
	}

		section > :last-child, section:last-child, article > :last-child, article:last-child {
			margin-bottom: 0;
		}

	header > p {
		display: block;
		font-family: 'Open Sans Condensed', sans-serif;
		font-weight: 700;
		text-transform: uppercase;
		color: var(--text-muted);
	}

 /* Flexbox for form fields */
      .fields {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
      }
    
      /* Half-width fields for larger screens */
      .field.half {
        flex: 1 1 calc(50% - 15px);
      }
    
      /* Ensure fields take full width on mobile */
      .field {
        flex: 1 1 100%;
      }
    
      /* Adjust layout for small screens (mobile first) */
      @media (max-width: 736px) {
        .field.half {
          flex: 1 1 100%;
        }
      }
	
/* Search functions */

    .search-container {
        text-align: center;
        margin-top: 0;
        position: relative;
    }
    
    .search-form {
        display: inline-block;
        width: 350px;
        max-width: 95%;
        position: relative;
    }
    
    .search-input {
        width: 350px;
        max-width: 100%;
        padding: 10px;
        font-size: 16px;
        border: 1px solid var(--border-input);
        border-radius: var(--radius-md);
        box-sizing: border-box;
    }
    
    .search-input:hover {
        border-color: var(--primary);
    }

    .suggestions-dropdown {
        position: absolute;
        top: calc(100% + 4px); /* Place suggestions below the input field */
        left: 0;
        width: 350px; /* Matches the width of the search form */
        max-width: 100%; /* Allow the dropdown to shrink with the search bar */
        background-color: var(--bg-white);
        border: 1px solid var(--border-input);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-medium);
        max-height: 300px;
        overflow-y: auto;
        z-index: 1000;
        display: none;
    }
    
    .suggestions-box {
        display: none; /* Hidden by default */
        position: absolute;
        background: var(--bg-white);
        border: 1px solid var(--border-input);
        border-radius: var(--radius-sm);
        max-height: 150px;
        overflow-y: auto;
        z-index: 1000;
        padding: 5px;
        box-shadow: var(--shadow-medium);
    }

    .suggestion-item {
        padding: 10px;
        font-size: 14px;
        color: var(--text-secondary);
        cursor: pointer;
        border-bottom: 1px solid var(--border-hover);
    }

    .suggestion-item:hover {
        background-color: var(--primary-ultralight);
    }

    .suggestion-item:last-child {
        border-bottom: none;
    }

    .search-results {
        margin-top: 20px;
        text-align: center;
    }
    
    .search-results ul {
        list-style-type: none; /* Removes the default bullet points */
        padding: 0; /* Removes any default padding */
        margin: 0; /* Removes any default margin */
    }
    
    .search-results li {
        margin-bottom: 5px; /* Adds spacing between each list item */
    }
    
    .suggestions-box {
        display: none; /* Hidden by default */
        position: absolute;
        background: var(--bg-white);
        border: 1px solid var(--border-input);
        border-radius: 5px;
        max-height: 200px;
        overflow-y: auto;
        z-index: 1000;
        padding: 5px;
        box-shadow: var(--shadow-medium);
    }
    
    .suggestions-box div {
        padding: 8px;
        cursor: pointer;
    }
    .suggestions-box .highlighted {
        background: var(--primary-ultralight) !important;
    }
    .suggestions-box div:hover {
        background-color: var(--primary-ultralight);
    }

/* Container */

	.container {
	    text-align: center;
		margin: 0 auto;
		max-width: 100%;
		width: 64em;
	}
		@media screen and (max-width: 1680px) {
			.container {
				width: 60em;
			}
		}
		@media screen and (max-width: 1280px) {
			.container {
				width: calc(100% - 150px);
			}
		}
		@media screen and (max-width: 980px) {
			.container {
				width: calc(100% - 100px);
			}

		}
		@media screen and (max-width: 736px) {
			.container {
				width: calc(100% - 70px);
			}
		}
		@media screen and (max-width: 480px) {
			.container {
				width: calc(100% - 20px);
			}

		}


/* Image */

	.image {
		position: relative;
		display: inline-block;
		border-radius: 8px;
	}
		.image img {
			display: block;
			width: 100%;
			border-radius: 8px;
		}
		.image:before {
			content: '';
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background: url("images/overlay.png");
			border-radius: 8px;
		}
		.image.fit {
			display: block;
			width: 100%;
		}
		.image.featured {
			display: block;
			width: 100%;
			margin: 0 0 2em 0;
		}
		.image.left {
			float: left;
			margin: 0 2em 2em 0;
		}
		.image.centered {
			display: block;
			margin: 0 0 2em 0;
		}
			.image.centered img {
				margin: 0 auto;
				width: auto;
			}

/* Button */

	input[type="button"],
	input[type="submit"],
	input[type="reset"],
	button,
	.button {
		-webkit-appearance: none;
		display: inline-block;
		font-family: 'Open Sans Condensed', sans-serif;
		font-weight: 700;
		text-transform: uppercase;
		text-decoration: none;
        background: var(--primary);
        color: var(--text-white);
		border: 0;
		line-height: 1em;
		border-radius: var(--radius-md);
		outline: 0;
		cursor: pointer;
		-moz-transition: background-color .2s ease-in-out;
		-webkit-transition: background-color .2s ease-in-out;
		-o-transition: background-color .2s ease-in-out;
		-ms-transition: background-color .2s ease-in-out;
		transition: 0.2s ease;
		font-size: 1.25rem;
		padding: var(--space-3) var(--space-5);
		margin: 15px 0 15px 0;
		text-align: center;
	}

		input[type="button"]:hover,
		input[type="submit"]:hover,
		input[type="reset"]:hover,
		button:hover,
		.button:hover {
			background: var(--primary-dark);
            box-shadow: var(--shadow-medium);
            color: var(--text-white);
            text-decoration: none;
		}

		input[type="button"]:active,
		input[type="submit"]:active,
		input[type="reset"]:active,
		button:active,
		.button:active {
			background: var(--primary-dark);
		}

		input[type="button"].large,
		input[type="submit"].large,
		input[type="reset"].large,
		button.large,
		.button.large {
			font-size: 1.65em;
		}
    
/* List */

	ul {
		list-style: disc;
		padding-left: 1em;
	}
	ul li {
		padding-left: 0.5em;
	}
	ol {
		list-style: decimal;
		padding-left: 1.25em;
	}
		ol li {
			padding-left: 0.25em;
		}


/* Menu [ONLY USED FOR FOOTER] */

	ul.menu {
		list-style: none;
		padding-left: 0;
	}
		ul.menu li {
			border-left: solid 1px var(--bg-main);
			display: inline-block;
			padding: 0 0 0 0.75em;
			margin: 0 0 0 0.75em;
		}
			ul.menu li:first-child {
				border-left: 0;
				margin-left: 0;
				padding-left: 0;
			}


/* Forms */

	form label {
		display: block;
		margin: 0 0 5px 0;
		font-family: 'Open Sans Condensed', sans-serif;
		font-weight: 700;
		text-transform: uppercase;
		color: var(--text-secondary);
	}
	form input[type="text"],
	form input[type="email"],
	form input[type="password"],
	form select,
	form input[type="date"],
	form input[type="number"],
	form textarea {
		-webkit-appearance: none;
		display: block;
		width: 100%;
		border-radius: var(--radius-md);
		border: solid 2px var(--border-input);
		background: var(--bg-card);
	}
		form input[type="text"]:focus,
		form input[type="email"]:focus,
		form input[type="password"]:focus,
		form select:focus,
		form textarea:focus {
			border-color: var(--border-hover);
		}
	form input[type="text"],
	form input[type="email"],
	form input[type="password"],
	form input[type="date"],
	form input[type="number"],
	form select {
		line-height: 3em;
		padding: 0 1em;
	}
	form textarea {
		min-height: 9em;
		padding: 1em;
	}
	form ::-webkit-input-placeholder {
		color: var(--text-muted) !important;
	}
	form :-moz-placeholder {
		color: var(--text-muted) !important;
	}
	form ::-moz-placeholder {
		color: var(--text-muted) !important;
	}
	form :-ms-input-placeholder {
		color: var(--text-muted) !important;
	}
	form ::-moz-focus-inner {
		border: 0;
	}
    input[type='date'], input[type='time'] {
        -webkit-min-logical-height: 50px; /* dirty fix for field having no height on IOS */
    }
    form input:hover {
        outline: none !important;
        border: solid 2px var(--primary-light);
        box-shadow: var(--shadow-soft);
    }
    form input:focus {
        outline: none !important;
        border: solid 2px var(--primary);
        box-shadow: var(--shadow-medium);
    }
    form select:hover {
        outline: none !important;
        border: solid 2px var(--primary-light);
        box-shadow: var(--shadow-soft);
    }
     form select:focus {
        outline: none !important;
        border: solid 2px var(--primary);
        box-shadow: var(--shadow-medium);
    }
    form textarea:hover {
        outline: none !important;
        border: solid 2px var(--primary-light);
        box-shadow: var(--shadow-soft);
    }
    form textarea:focus {
        outline: none !important;
        border: solid 2px var(--primary);
        box-shadow: var(--shadow-medium);
    }

/* Tables */

	table {
        width: 80%; /* Set the table width to 80% of the page */
        max-width: 1000px; /* Limit the maximum width of the table */
        margin: 0 auto; /* Center the table horizontally */
        border-collapse: collapse;
        margin-top: 20px;
    }

    table, th, td {
        border: 1px solid var(--border-input);
    }

    th, td {
        padding: 8px;
        text-align: left;
    }

    /* Make table headers bold */
    th {
        font-weight: bold;
        background-color: var(--bg-main); /* Optional: Give a background color to headers */
    }

    /* Add some responsive design */
    @media screen and (max-width: 736px) {
        table {
            width: 97%; /* For small screens, make the table a bit wider */
        }
    }

/* Box */

	.box.highlight {
		text-align: center;
	}
		.box.highlight h2 {
			font-size: 2em;
			line-height: 1;
		}
		.box.highlight header > p {
			font-size: 1.5em;
		}


/* Icons */

	.icon {
		text-decoration: none;
		position: relative;
		text-decoration: none;
	}

		.icon:before {
			-moz-osx-font-smoothing: grayscale;
			-webkit-font-smoothing: antialiased;
			display: inline-block;
			font-style: normal;
			font-variant: normal;
			text-rendering: auto;
			line-height: 1;
			text-transform: none !important;
			font-family: 'Font Awesome 5 Free';
			font-weight: 400;
		}

		.icon:before {
			line-height: inherit;
		}

		.icon > .label {
			display: none;
		}

		.icon.solid:before {
			font-weight: 900;
		}

		.icon.brands:before {
			font-family: 'Font Awesome 5 Brands';
		}

/* Page Wrapper */

	#page-wrapper > section {
		margin-bottom: 0;
	}

/* Header */

    #header {
        text-align: center;
        font-size: 1.7em;
        font-family: 'Open Sans Condensed', sans-serif;
        font-weight: 700;
        text-transform: uppercase;
        padding: 20px 0;
        background: var(--bg-white);
        margin: 0 auto;
    }
    
    #header .logo {
        position: relative;
        text-align: center;
    }
    
    #header .logo div {
        background: var(--bg-white);
        position: relative;
        display: inline-flex; /* Change to flexbox for alignment */
        align-items: center;  /* Vertically center items */
        justify-content: center; /* Horizontally center items */
        padding: 0 1.5em;
        top: -0.75em;
        gap: 10px; 
    }
    
    #header h1,h2 {
        line-height: 1;
    }
    
    #header .logo img {
        max-height: 100px; /* Size the logo */
        width: auto; /* Maintain aspect ratio */
    }
    
    #header .logo p {
        display: inline; /* Ensure text is inline with the logo */
        margin: 0; /* Reset margin for alignment */
        color: var(--gray-500);
        font-size: 1em; /* Adjust font size as needed */
        line-height: 1; /* Ensure no extra spacing */
    }

    /* Ensure the logo-container uses Flexbox */
    .logo-container {
        display: flex; /* Arrange items in a horizontal row */
        align-items: center; /* Vertically center the logo and text */
        justify-content: center; /* Center the content horizontally */
        gap: 10px; /* Add spacing between the logo and the text */
    }
    
    /* Styling for the text container */
    .text-container {
        display: flex;
        flex-direction: column; /* Stack the h2 and h1 vertically */
        align-items: flex-start; /* Align text to the left (or change to 'center' if preferred) */
    }
    
    /* Styling for the logo link and image */
    .logo img {
        max-height: 100px; /* Set a max width for the logo image */
        height: auto; /* Maintain the aspect ratio */
        display: block; /* Ensure it respects box alignment rules */
    }
    
    /* Styling for the h2 text next to the logo */
    .logo-text {
        font-size: 1.5rem; /* Adjust the text size as needed */
        margin: 0; /* Remove default margins */
        white-space: nowrap; /* Prevent text wrapping */
        color: var(--text-secondary);
    }
    
    /* Styling for the h1 below the h2 */
    .page-title {
        font-size: 2rem; /* Adjust font size for the h1 */
        margin: 0; /* Remove default margins */
        color: var(--text-primary); /* Adjust text color */
        padding-top: 5px; /* Add some spacing above the h1 */
    }


/* Nav */

	body {
		padding-top: 3.25em;
	}

	#nav {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1000;
		background-color: rgba(235, 235, 235, 0.95);
		background-image: url("images/overlay.png");;
		width: 100%;
		height: 3.25em;
		line-height: 3.25em;
		text-align: center;
		font-family: 'Open Sans Condensed', sans-serif;
		font-weight: 700;
		text-transform: uppercase;
		cursor: default;
	}

		#nav ul {
			position: relative;
			z-index: 1001;
		}

		#nav li {
			display: inline-block;
			margin: 0 0.5em 0 0.5em;
			top: 0;
			position: relative;
			-moz-transition: top .15s ease-in-out;
			-webkit-transition: top .15s ease-in-out;
			-o-transition: top .15s ease-in-out;
			-ms-transition: top .15s ease-in-out;
			transition: top .15s ease-in-out;
		}

			#nav li > ul {
				display: none;
			}

			#nav li a, #nav li span {
				-moz-transition: background-color .075s ease-in-out, color .075s ease-in-out;
				-webkit-transition: background-color .075s ease-in-out, color .075s ease-in-out;
				-ms-transition: background-color .075s ease-in-out, color .075s ease-in-out;
				transition: background-color .075s ease-in-out, color .075s ease-in-out;
				position: relative;
				display: block;
				text-decoration: none;
				color: var(--text-secondary);
				top: -6px;
				padding: 6px 1.5em 0.25em 1.5em;
				border-bottom-left-radius: 6px;
				border-bottom-right-radius: 6px;
				outline: 0;
			}

			#nav li:hover, #nav li.active {
				top: 3px;
			}

			#nav li:hover a, #nav li:hover span {
				background: var(--bg-gray);
				color: var(--text-white);
			}

			#nav li.active a, #nav li.active span {
				background: var(--primary-light);
				color: var(--text-white);
			}

			#nav li.current a {
				background: var(--primary);
				color: var(--text-white);
			}

	.dropotron {
		list-style: none;
		background: var(--bg-dark);
		color: var(--text-white);
		border-radius: 6px;
		line-height: 2.75em;
		text-align: center;
		font-family: 'Open Sans Condensed', sans-serif;
		font-weight: 700;
		text-transform: uppercase;
		padding: 1em 0;
		text-align: left;
		min-width: 14em;
		margin-top: -1em;
		box-shadow: var(--shadow-medium)
	}

		.dropotron li {
			padding-left: 0;
		}

			.dropotron li > a, .dropotron li > span {
				display: block;
				color: var(--gray-200);
				text-decoration: none;
				padding: 0 1.25em;
			}

			.dropotron li:hover > a, .dropotron li:hover > span {
				color: var(--text-white);
				background: var(--bg-gray);
			}

			.dropotron li.active > a, .dropotron li.active > span {
				color: var(--text-white);
				background: var(--bg-gray);
			}

			.dropotron li:first-child {
				border-top: 0;
			}

		.dropotron.level-0 {
			margin-top: 1em;
			font-size: 0.9em;
		}

			.dropotron.level-0:before {
				content: '';
				position: absolute;
				left: 50%;
				margin-left: -1em;
				top: -0.65em;
				border-bottom: solid 1em var(--bg-dark);
				border-left: solid 1em transparent;
				border-right: solid 1em transparent;
			}


/* Main */

	#main {
		background: var(--bg-white);
		border-top: solid 5px var(--primary-light);
		border-bottom: solid 5px var(--bg-gray);
		border-top-width: 12px;
		border-bottom-width: 10px;
		padding: 1em 0 3em 0;
	}


/* Footer */

	#footer {
		text-align: center;
		padding: 2em 0 2em 0;
	}

		#footer a {
			color: inherit;
		}

		#footer h2.major {
			margin: 0 0 1.5em 0;
		}

			#footer h2.major span {
				background: var(--bg-main);
			}

/* Copyright */

	#copyright {
		display: inline-block;
		background: var(--border);
		padding: 0.75em 2em 0.75em 2em;
		border-radius: var(--radius-lg);
		color: var(--bg-dark);
		margin: 4em 0 0 0;
	}

		#copyright .menu {
			margin: 0;
		}

			#copyright .menu li {
				border-color: var(--text-muted);
				border-width: 2px;
				line-height: 1em;
			}

/* ======================================= SCREEN SIZE ADJUSTMENTS/* ======================================= */

    /* XLarge */
    
    	@media screen and (max-width: 1680px) {
    		body, input, textarea, select {
    			font-size: 12pt;
    			line-height: 1.75em;
    		}
    	}
    
    /* Large */
    
    	@media screen and (max-width: 1280px) {
    		body, input, textarea, select {
    			font-size: 11pt;
    		}
    		ul.special li a:before {
    			font-size: 60px;
    		}
    		.box.highlight h2 {
    			font-size: 2em;
    		}
    		.box.highlight header > p {
    			font-size: 1.25em;
    		}
    		.box.post h3 {
    			font-size: 2.5em;
    		}
    		.box.post header > p {
    			font-size: 1.25em;
    		}
    
    		#header {
    			font-size: 1.5em;
    		}
    		#main {
    			border-top-width: 20px;
    			border-bottom-width: 10px;
    		}
    		#footer {
    			padding: 6em 0 6em 0;
    		}
    	}
    
    /* Medium */
    
    	#navPanel, #titleBar {
    		display: none;
    	}
    
    	@media screen and (max-width: 980px) {
    		html, body {
    			overflow-x: hidden;
    		}
    		.box br {
    			display: none;
    		}
    		#header {
    			display: none;
    		}
    		#banner {
    			padding: calc(14em + 44px) 0 14em 0;
    		}
    		#nav {
    			display: none;
    		}
    		#main {
    			border-top-width: 0;
    		}
    		.sidebar {
    			border-top: solid 2px var(--bg-main);
    			padding-top: 50px;
    		}
    		body {
    			padding-top: 44px;
    		}
    			body.homepage {
    				padding-top: 0;
    			}
    		#page-wrapper {
    			-moz-backface-visibility: hidden;
    			-webkit-backface-visibility: hidden;
    			-ms-backface-visibility: hidden;
    			backface-visibility: hidden;
    			-moz-transition: -moz-transform 0.5s ease;
    			-webkit-transition: -webkit-transform 0.5s ease;
    			-ms-transition: -ms-transform 0.5s ease;
    			transition: transform 0.5s ease;
    			padding-bottom: 1px;
    		}
    
    		#titleBar {
    			-moz-backface-visibility: hidden;
    			-webkit-backface-visibility: hidden;
    			-ms-backface-visibility: hidden;
    			backface-visibility: hidden;
    			-moz-transition: -moz-transform 0.5s ease;
    			-webkit-transition: -webkit-transform 0.5s ease;
    			-ms-transition: -ms-transform 0.5s ease;
    			transition: transform 0.5s ease;
    			display: block;
    			height: 44px;
    			left: 0;
    			position: fixed;
    			top: 0;
    			width: 100%;
    			z-index: 10001;
    			background-color: rgba(235, 235, 235, 0.95);
    			background-image: url("images/overlay.png");
    		}
            
    			#titleBar .title {
                    display: flex; /* Align items horizontally */
                    align-items: center; /* Vertically align items */
                    justify-content: center; /* Center content within the bar */
                    gap: 10px; /* Add space between the logo and the text */
                    position: relative;
                    font-family: 'Open Sans Condensed', sans-serif;
                    font-weight: 700;
                    text-transform: uppercase;
                    font-size: 1.25em;
                    line-height: 44px;
                    color: var(--text-white);
                    z-index: 1000;
                    text-align: center; /* Center the text */
                }
                
                /* Ensure the logo fits properly */
                #titleBar .title img {
                    max-height: 36px; /* Adjust logo height */
                    width: auto; /* Maintain aspect ratio */
                    display: inline-block; /* Ensure it's inline with text */
                }
                
                /* Page title styling */
                #titleBar .nav-title {
                    font-size: 1em; /* Adjust font size for mobile */
                    white-space: nowrap; /* Prevent wrapping */
                    overflow: hidden; /* Hide overflowing text */
                    text-overflow: ellipsis; /* Add ellipsis for long titles */
                    color: var(--gray-200); /* Adjust text color for better contrast */
                }
    
    			#titleBar .toggle {
    				text-decoration: none;
    				position: absolute;
    				left: 0;
    				top: 0;
    				width: 80px;
    				height: 60px;
    				z-index: 1001;
    			}
    
    				#titleBar .toggle:before {
    					-moz-osx-font-smoothing: grayscale;
    					-webkit-font-smoothing: antialiased;
    					display: inline-block;
    					font-style: normal;
    					font-variant: normal;
    					text-rendering: auto;
    					line-height: 1;
    					text-transform: none !important;
    					font-family: 'Font Awesome 5 Free';
    					font-weight: 900;
    				}
    
    				#titleBar .toggle:before {
    					display: inline-block;
    					text-decoration: none;
    					position: absolute;
    					left: 0;
    					top: 0;
    					background: var(--primary-light);
    					width: 44px;
    					height: 44px;
    					content: '\f0c9';
    					color: var(--text-white);
    					text-align: center;
    					line-height: 44px;
    					font-size: 20px;
    				}
    
    				#titleBar .toggle:active:before {
    					background-color: var(--primary);
    				}
    				#titleBar .toggle:hover:before {
    					background-color: var(--primary);
    				}
    
    		#navPanel {
    			-moz-backface-visibility: hidden;
    			-webkit-backface-visibility: hidden;
    			-ms-backface-visibility: hidden;
    			backface-visibility: hidden;
    			-moz-transform: translateX(-275px);
    			-webkit-transform: translateX(-275px);
    			-ms-transform: translateX(-275px);
    			transform: translateX(-275px);
    			-moz-transition: -moz-transform 0.5s ease;
    			-webkit-transition: -webkit-transform 0.5s ease;
    			-ms-transition: -ms-transform 0.5s ease;
    			transition: transform 0.5s ease;
    			display: block;
    			height: 100%;
    			left: 0;
    			overflow-y: auto;
    			position: fixed;
    			top: 0;
    			width: 275px;
    			z-index: 10002;
    			background-color: var(--bg-ultradark);
    			background-image: url("images/overlay.png"), -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
    			background-image: url("images/overlay.png"), -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
    			background-image: url("images/overlay.png"), -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
    			background-image: url("images/overlay.png"), linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
    			background-repeat: repeat, no-repeat;
    			background-size: auto, 100% 100%;
    			font-family: 'Open Sans Condensed', sans-serif;
    			font-weight: 700;
    			text-transform: uppercase;
    			font-size: 1.25em;
    			box-shadow: inset -3px 0px 10px 0px rgba(0, 0, 0, 0.25);
    		}
    
    			#navPanel nav {
    				position: relative;
    				z-index: 1000;
    			}
    
    			#navPanel .link {
    				display: block;
    				color: inherit;
    				text-decoration: none;
    				height: 44px;
    				line-height: 44px;
    				padding: 0 1em 0 1em;
    				color: rgba(255, 255, 255, 0.75);
    				border-top: solid 2px rgba(87, 93, 89, 0.15);
    				font-size: 0.8em;
    			}
    
    				#navPanel .link:first-child {
    					border-top: 0;
    				}
    
    			#navPanel .indent-1 {
    				display: inline-block;
    				width: 1em;
    			}
    
    			#navPanel .indent-2 {
    				display: inline-block;
    				width: 2em;
    			}
    
    			#navPanel .indent-3 {
    				display: inline-block;
    				width: 3em;
    			}
    
    			#navPanel .indent-4 {
    				display: inline-block;
    				width: 4em;
    			}
    
    			#navPanel .indent-5 {
    				display: inline-block;
    				width: 5em;
    			}
    
    			#navPanel .depth-0 {
    				color: var(--text-white);
    			}
    
    		body.navPanel-visible #page-wrapper {
    			-moz-transform: translateX(275px);
    			-webkit-transform: translateX(275px);
    			-ms-transform: translateX(275px);
    			transform: translateX(275px);
    		}
    
    		body.navPanel-visible #titleBar {
    			-moz-transform: translateX(275px);
    			-webkit-transform: translateX(275px);
    			-ms-transform: translateX(275px);
    			transform: translateX(275px);
    		}
    
    		body.navPanel-visible #navPanel {
    			-moz-transform: translateX(0);
    			-webkit-transform: translateX(0);
    			-ms-transform: translateX(0);
    			transform: translateX(0);
    		}
    
    	}
    
    /* Small */
    
    	@media screen and (max-width: 736px) {
    		body, input, textarea, select {
    			font-size: 11pt;
    		}
    		h2 {
    			font-size: 1.4em;
    		}
    			h2.major {
    				font-size: 1.4em;
    				margin: 0 0 2em 0;
    			}
    
    				h2.major span {
    					padding: 0 1em;
    				}
			h3 {
			    font-size: 1.3em;
			}
    		section, article {
    			margin-bottom: 2em;
    		}
    
    		input[type="button"],
    		input[type="submit"],
    		input[type="reset"],
    		button,
    		.button {
    			display: block;
    			width: 100%;
    			font-size: 1.1em;
    		}
    
    			input[type="button"].large,
    			input[type="submit"].large,
    			input[type="reset"].large,
    			button.large,
    			.button.large {
    				font-size: 1.25em;
    			}
    
    		ul.actions li {
    			display: block;
    			margin: 1em 0 0 0;
    		}
    			ul.actions li:first-child {
    				margin-top: 0;
    			}
    
    		ul.special {
    			margin: -0.75em 0 2em -0.75em;
    		}
    			ul.special li {
    				padding: 0.75em 0 0 0.75em;
    			}
    				ul.special li a:before {
    					font-size: 28px;
    				}
    
    		.box.highlight h2 {
    			font-size: 2em;
    		}
    		.box.highlight header > p {
    			font-size: 1.25em;
    		}
    		.box.post h3 {
    			font-size: 2em;
    		}
    		.box.post header > p {
    			font-size: 1.25em;
    		}
    		.box.page-content h2 {
    			font-size: 2em;
    		}
    		.box.page-content header > p {
    			font-size: 1.25em;
    		}
    
    		#main {
    			padding: 0 0;
    		}
    		.sidebar {
    			border-top: solid 2px var(--bg-main);
    			padding-top: 50px;
    			margin-top: 30px;
    		}
    
    		#footer {
    			padding: 3em 0;
    		}
    
    		#copyright .menu li {
    			display: block;
    			border-left: 0;
    			padding-left: 0;
    			line-height: 1.75em;
    		}
    
    	}
    
    	@media screen and (max-width: 480px) {
    		body, input, textarea, select {
    			font-size: 10pt;
    		}
    	}
    	

/*  INFO BOX  */

    
    /* ---- info-box bullet arrows ---- */
    .info-box ul {
        list-style: none;
        padding-left: 1em;
    }
    
    .info-box li {
        position: relative;
        padding-left: 24px;
        margin-bottom: 8px;
    }
    
    .info-box li::before {
        content: "➜";
        position: absolute;
        left: 0;
        top: 0;
        color: var(--primary);
        font-weight: bold;
    }
    
    .info-box {
        max-width: 750px;
        margin: 1.5rem auto 1rem auto;
        padding: 1.25rem .2rem;
    
        background: var(--bg-white);
        border-radius: var(--radius-md);
        border: 1px solid var(--bg-main);
    
        box-shadow: var(--shadow-medium);
    
        line-height: 1.7;
        color: var(--text-primary);
    
        transition: box-shadow 0.2s ease;
    }
    
    .info-box p {
        margin: .5em .5em;
    }
    
    .info-box a {
        color: var(--primary);   /* Subtle green matching your navbar highlight */
        font-weight: 600;
        text-decoration: none;
    }
    
    .info-box a:hover {
        text-decoration: underline;
    }
    
    .info-box strong {
        font-weight: 600;
    }
    
    
    /* 🔥 MOBILE OPTIMIZATION */
    @media (max-width: 736px) {
        .info-box {
            margin: 0.5rem 0.5rem;          /* Add side margin on phones */
            font-size: 0.9rem;            /* Slightly smaller font */
            line-height: 1.6;
            border-radius: var(--radius-sm);           /* Smooth, less bulky on phones */
        }
    }
    



/* RESULTS TABLE  */
    
    .resultstable-header {
        padding: 30px;
        background-color: var(--secondary-ultralight);
        border-left: 4px solid var(--secondary);
        margin-bottom: 30px;
        text-align: center;
        box-shadow: var(--shadow-dark);
        margin-left: auto;
        margin-right: auto;
        margin-top: 25px;
    }
    
    .resultstable-header h2 {
        margin: 10px;
    }
    
    .resultstable-header h3 {
        margin: 10px;
        color: var(--primary);
    }
    
    .resultstable-header p {
        color: var(--text-primary);
        margin: 10px 0;
        line-height: 1.2;
    }
    
    @media (max-width: 736px) {
        .resultstable-header p {
            font-size: .9em;
        }
        .resultstable-header h2 {
            line-height: 1.3em;
        }
        .resultstable-header h3 {
            line-height: 1.3em;
        }
    }
    @media (max-width: 480px) {
        .resultstable-header p {
            font-size: .85em;
        }
    }
    

    .styled-results-table {
        width: 95%;
        border-collapse: collapse;
        background-color: var(--bg-white);
        box-shadow: var(--shadow-dark);
        border-radius: 12px;
        overflow: hidden;
    }
    
    .styled-results-table th,
    .styled-results-table td {
        padding: 14px 16px;
        border-bottom: 1px solid var(--gray-300);
        vertical-align: middle;
        text-align: center;
        word-wrap: break-word;
        white-space: normal;
    }
    
    .styled-results-table td:first-child,
    .styled-results-table th:first-child {
        text-align: left;
    }
    
    .styled-results-table th {
        background-color: var(--bg-white);
        color: var(--text-primary);
        font-weight: 600;
        font-size: 0.95rem;
    }
    
    .styled-results-table td {
        font-size: 0.95rem;
        color: var(--text-primary);
    }
    
    .styled-results-table tbody tr.main-row:hover {
        background: var(--primary-ultralight);
        cursor: pointer;
    }
    
    .main-link {
        text-decoration: none;
        color: var(--primary);
        font-weight: 600;
    }
    
    .main-link .city {
        display: block;
        color: var(--text-secondary);
        font-weight: normal;
        font-size: 0.85rem;
    }
    
    .main-link .small {
        display: inline;
        color: var(--text-secondary);
        font-weight: normal;
        font-size: 0.85rem;
    }
    
    .second-link {
        text-decoration: none;
        color: var(--secondary);
        font-weight: 600;
    }
    
    .view-performance:hover,
    .main-link:hover {
        text-decoration: underline;
    }
    
    
    
    /* Division Subheading (for championships) */
    .division-subheading {
        background-color: var(--primary-ultralight);
        border-left: 4px solid var(--primary);
        padding: 16px 20px;
        margin: 30px 0 10px;
        text-align: center;
    }
    
    .division-subheading h3 {
        font-size: 20px;
        margin-bottom: 6px;
        color: var(--text-primary);
    }
    
    .division-subheading p {
        margin: 4px 0;
        font-size: 14px;
        color: var(--text-secondary);
    }
    
    @media (max-width: 736px) {
        .styled-results-table th,
        .styled-results-table td {
            padding: 10px;
            font-size: 0.85rem;
        }
    
        .main-link .city {
            font-size: 0.8rem;
        }
    }
    
    /* MEDAL */
        .medal {
            font-size: 20px;
            margin-right: 4px;
            vertical-align: middle;
        }
        
    
    /* DETAILS ROWS */
        
        /* TOGGLE FOR DETAILS */
            
            .details-row {
                display: none;
            }
            
            .details-row.open {
                display: table-row;
                background: var(--bg-main);
            }
            
            .details-inner {
                padding: 10px 5px;
            }
            
            .details-row {
                overflow: hidden;
                max-height: 0;
                transition: max-height 0.35s ease, opacity 0.25s ease;
                opacity: 0;
            }
            
            .details-row.open {
                max-height: 500px; /* large enough to fit content */
                opacity: 1;
            }
            
            .caret {
                display: inline-block;
                transition: transform 0.25s ease;
                cursor: pointer;
                font-size: 1.1em;
            }
            
            .details-row.open + .caret,
            .caret.open {
                transform: rotate(90deg);
            }
            
            /* Subtle global toggle */
            .global-toggle-row td {
                background: var(--bg-main);
                padding: 6px 10px;
                text-align: right;
                font-size: 0.9em;
                color: var(--text-muted);
            }
        
        /* PIECE CARDS */
            
            .pieces-section {
                margin: 10px 0 14px;
            }
            
            .pieces-label {
                font-weight: 600;
                font-size: .8rem;
                text-transform: uppercase;
                margin-bottom: 4px;
                color: var(--text-secondary);
            }
            
            .intro-label {
                color: var(--text-secondary); /* possibly set different color */
            }
            
            .pieces-list {
                display: grid;
                gap: 6px;
                grid-template-columns: 1fr;
            }
            
            @media (min-width: 736px) {
                .pieces-list {
                    grid-template-columns: 1fr 1fr;
                }
            }
            
            @media (min-width: 1680px) {
                .pieces-list {
                    grid-template-columns: 1fr 1fr 1fr;
                }
            }
            
            .pieces-item {
                padding: 10px 14px;
                border-left: 3px solid var(--gray-500);
                background: var(--bg-white);
                border-radius: 4px;
                display: flex;
                justify-content: space-between;
                transition: background 0.2s ease;
                box-shadow: var(--shadow-soft);
            }
            
            .pieces-item:hover {
                background: var(--gray-200);
            }
            
            .piece-title {
                font-size: 0.9rem;
                font-weight: 600;
            }
            
            .piece-meta {
                font-size: 0.8rem;
                font-weight: 500;
                color: var(--text-secondary);
            }
            
            .piece-points {
                font-size: 0.9rem;
                margin-left: 10px;
                white-space: nowrap;
                font-weight: 600;
            }
            
    /* Navigation to different results table */
    
.nav-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
    gap: 40px; /* default spacing */
    padding: 0 10px; /* distance from edges */
}

/* Buttons */
.nav-buttons button {
    padding: 12px 16px;
    font-size: 1rem;
    border-radius: var(--radius-sm);
}

/* --- Responsive behavior --- */
/* When screen gets smaller, push buttons outward */
@media (max-width: 600px) {
    .nav-buttons {
        justify-content: space-between;
        gap: 10px; /* no fixed gap, they hug the sides */
        padding: 0 10px; /* distance from edges */
    }
    .nav-buttons button{
        font-size: .8rem;
        padding: 8px 3px;
    }
}
        

        
    /* RESPONSIVE DESIGN */

        @media screen and (max-width: 736px) {
            body {
                font-size: 14px; /* Slightly smaller font for mobile */
            }

            table {
                font-size: 12px; /* Adjust table font size for small screens */
            }
            

            /* Adjust table width to be responsive on smaller screens */
            th, td {
                word-wrap: break-word;
                white-space: nowrap; /* Prevent text from wrapping in the table */
            }
            th:first-child,
            td:first-child {
                max-width: 30%; /* Limit the width of the first column */
                word-wrap: break-word; /* Allow wrapping at word boundaries */
                white-space: normal; /* Allow text to wrap to the next line */
            }
        }

        /* Center align text in specific columns */
        td.center, th.center {
            text-align: center;
        }
        
        th {
            cursor: pointer;
            position: relative;
            padding-right: 20px;
        }



/* Orkesten graph */
.graph-container {
    background: var(--bg-white);
    padding: 20px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-input);
    box-shadow: var(--shadow-dark);
    margin-top: 20px;
}
#chartjs-tooltip {
    background: white;
    color: #222;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 14px 16px;
    font-size: 13px;
    line-height: 1.45;
    max-width: 240px;
    position: absolute;
    pointer-events: none;
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
    z-index: 9999;
}

.tooltip-content strong {
    font-size: 14px;
}


    
    
/* Event cards  */ 

    .suggestions-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(160px, 200px));
        gap: 10px;
        margin: 16px auto 0;      /* center container */
        max-width: 1000px;
        justify-content: center;  /* center grid tracks */
        align-items: stretch;
    }

    .suggestions-card {
        background: var(--bg-white);
        border-radius: 12px;
        box-shadow: var(--shadow-medium);
        padding: 16px;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        cursor: pointer;
        text-align: center;
    }
    
    .suggestions-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-dark);
    }
    
    .suggestions-huge {
        font-weight: 700;
        color: var(--secondary);
        margin-bottom: 2px;
        font-size: 2rem;
    }
    .suggestions-large {
        font-weight: 600;
        color: var(--primary);
        margin-bottom: 2px;
        font-size: 1.3rem;
    }
    .suggestions-sub {
        font-size: 0.875rem;
        color: var(--color-muted);
        margin-top: 0.25rem;
    }
    .suggestions-main {
        font-weight: 600;
        color: var(--primary);
        margin-bottom: 2px;
        font-size: 1rem;
        word-wrap: break-word;
        hyphens: auto;
        overflow-wrap: break-word;
    }
    
    .suggestions-second {
        font-size: 0.9rem;
        color: var(--text-secondary);
    }
    
    .suggestions-third {
        margin-top: 3px;
        font-size: 0.8rem;
        color: var(--text-muted);
    }
    
     /* 🔁 Responsive Scaling */
    @media (max-width: 736px) {
        .suggestions-card {
            padding: 10px;
        }
        .suggestions-main {
            font-size: 0.9rem;
        }
        .suggestions-second {
            font-size: 0.9rem;
        }
        .suggestions-third {
            font-size: 0.75rem;
        }
        .suggestions-grid {
            grid-template-columns: repeat(auto-fit, minmax(135px, 180px));
        }
    }
    
    @media (max-width: 480px) {
        .suggestions-card {
            padding: 8px;
        }
    
        .suggestions-main {
            font-size: 0.85rem;
        }
    
        .suggestions-second {
            font-size: 0.85rem;
        }
    
        .suggestions-third {
            font-size: 0.7rem;
        }
        .suggestions-grid {
            grid-template-columns: repeat(auto-fit, minmax(100px, 160px));
        }
    }

    .button-fixed {
        width: 150px;
    }
    @media (max-width: 736px) {
        .button-fixed {
            width: 150px;
            display: inline-block;
        }
    }
    

    



/* Interactive map: Overview bar charts */
    .orchestra-bars {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1.5em;
        max-width: 900px;
        margin: 0 auto;
    }
    
    .orchestra-type {
        display: flex;
        flex-direction: column;
        gap: 0.4em;
    }
    
    .orchestra-header {
        display: flex;
        justify-content: space-between;
        font-size: 1rem;
        color: var(--text-secondary);
    }
    
    .orchestra-bar-bg {
        background: var(--gray-200);
        border-radius: var(--radius-sm);
        height: 20px;
        overflow: hidden;
        position: relative;
    }
    
    .orchestra-bar-fill {
        height: 100%;
        border-radius: var(--radius-sm);
        width: 0;
        transition: width 0.6s ease-in-out;
    }
    
    
/* Dropdown menus */

    /* --- Container --- */
    .filters {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
        margin: 1.5rem auto 1rem auto;
        padding: 1.25rem .2rem;
        background-color: var(--bg-main);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-dark);
        border: 2px solid var(--border-input);
        max-width: 750px;
    }
    
    /* 🔥 MOBILE OPTIMIZATION */
    @media (max-width: 736px) {
        .filters {
            margin: 0.5rem 0.5rem;          /* Add side margin on phones */
            font-size: 0.9rem;            /* Slightly smaller font */
            line-height: 1.6;
        }
    }
    
    /* --- Each item (label + select or label + toggle) --- */
    .filter-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 200px;
    }
    
    /* Label */
    .filter-item label {
        font-size: 1.1em;
        font-weight: 600;
        margin-bottom: 5px;
        font-family: 'Open Sans Condensed', sans-serif;
        color: var(--text-secondary);
    }
    
    /* --- Selects --- */
    .filter-item select {
        width: 100%;
        min-width: 150px;
        padding: 10px;
        font-size: 16px;
        color: var(--text-secondary);
        border: 2px solid var(--border-input);
        border-radius: var(--radius-sm);
        background: white;
        appearance: none;
    }
    
    .filter-item select:hover {
        border-color: var(--border-hover);
        cursor: pointer;
    }
    
    /* --- Toggle switch --- */
    .toggle-item {
        justify-content: center; /* vertically center */
    }
    
    /* Hide checkbox */
    .toggle-checkbox {
        display: none;
    }
    
    /* Slider */
    .toggle-slider {
        position: relative;
        display: inline-block;
        width: 50px;
        height: 25px;
        background: var(--gray-400);
        border-radius: 25px;
        cursor: pointer;
        transition: background 0.3s;
        margin-top: 4px;
    }
    
    /* Knob */
    .toggle-slider::before {
        content: "";
        position: absolute;
        top: 3px;
        left: 3px;
        width: 19px;
        height: 19px;
        background: white;
        border-radius: 50%;
        transition: transform 0.3s ease;
    }
    
    /* Checked */
    .toggle-checkbox:checked + .toggle-slider {
        background: var(--primary);
    }
    
    .toggle-checkbox:checked + .toggle-slider::before {
        transform: translateX(25px);
    }
    
    /* --- Responsive for small screens --- */
    @media (max-width: 500px) {
        .filter-item {
            width: 100%;
        }
    }
    
/* Small toggle for results tables */
    
    
    /* Container */
    .switch {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        font-size: 0.85em;
        color: var(--gray-400);
    }
    
    /* Hide the native checkbox */
    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
        position: absolute;
    }
    
    /* Slider background */
    .switch .slider {
        position: relative;
        width: 32px;
        height: 18px;
        background-color: var(--gray-300);
        border-radius: 18px;
        transition: 0.25s;
    }
    
    /* Slider knob */
    .switch .slider::before {
        content: "";
        position: absolute;
        height: 14px;
        width: 14px;
        left: 2px;
        bottom: 2px;
        background-color: white;
        border-radius: 50%;
        transition: 0.25s;
    }
    
    /* When checked */
    .switch input:checked + .slider {
        background-color: var(--primary);
    }
    
    /* Move knob */
    .switch input:checked + .slider::before {
        transform: translateX(14px);
    }
    
    .toggle-label {
        font-size: 1em;
        color: var(--text-secondary);
    }
    
    
/* Formulieren */

    .form-container {
        width: 80%;
        max-width: 700px;
        margin: 0 auto;
        padding: 20px;
        background-color: var(--bg-main);
        box-shadow: var(--shadow-medium);
        border-radius: var(--radius-md);
    }

    .form-group {
        margin-bottom: 15px;
    }
    
    /* ---- form sections ---- */
    .form-section {
        background: var(--bg-white);
        padding: 20px 25px;
        margin-bottom: 28px;
        border-radius: 10px;
        box-shadow: var(--shadow-soft);
    }
    
    .section-title {
        margin-top: 0;
        margin-bottom: 15px;
        font-size: 1.3rem;
        color: var(--text-primary);
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    
    .input-container {
        display: flex;
        gap: 10px; /* Space between the inputs */
    }

    .input-container input {
        flex: 1; /* Make inputs take equal width */
        padding: 10px;
        border: 1px solid var(--border-input);
        border-radius: 5px;
    }
    
    .input-container input:hover {
        border-color: var(--primary);
    }
    
    .input-wrapper {
        position: relative;
        flex: 1; /* Each input-wrapper takes equal space */
    }
    
    .input-wrapper input {
        width: 100%;
        padding: 10px;
        border: 1px solid var(--border-input);
        border-radius: 5px;
    }
    
    /* Media Queries for mobile devices */
    @media (max-width: 736px) {
        .form-container {
            width: 95%;
            padding: 8px;
        }
        .form-section {
            padding: 15px 12px;   /* was 20–25px → tighter on mobile */
        }
        input, select, textarea {
            font-size: .85rem; /* Make font size a bit smaller for mobile */
            padding: 0 .3em;
        }
        .input-container input {
            padding: 5px;
        }
        .input-wrapper input {
            padding: 5px;
        }
        .form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            box-sizing: border-box;
        }
    }


    
    
/*  Statistics Page */

    .coming-soon {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 200px;               /* roughly similar to your charts */
        text-align: center;
        color: #666;
        background: repeating-linear-gradient(
            -45deg,
            #fafafa,
            #fafafa 10px,
            #f5f5f5 10px,
            #f5f5f5 20px
        );
        border-radius: 8px;
        position: relative;
        font-family: "Segoe UI", Roboto, sans-serif;
    }
    
    .coming-icon {
        font-size: 48px;
        margin-bottom: 8px;
        margin-top: 8px;
        opacity: 0.8;
    }
    
    .coming-text strong {
        font-size: 20px;
        color: #333;
    }
    
    .coming-text span {
        font-size: 14px;
        color: #777
    }
    
    
/* Ranglijsten Page */

    .trend-icon {
      font-size: 1.5em;
      font-weight: bold;
      display: inline-block;
      width: 1.2em;
      text-align: center;
    }
    .trend-up {
      color: green;
    }
    .trend-down {
      color: red;
    }
    .trend-neutral {
      color: gray;
    }
    
    .badge {
        display: inline-block;
        padding: 0.2rem 0.6rem;
        font-weight: bold;
        border-radius: 6px;
        font-size: 0.9rem;
        margin: 0 0 5px 0;
    }
    

    .badge-gray {
        background-color: var(--gray-300);
        color: var(--text-secondary);
    }
    
    .badge-yellow {
        background-color: var(--secondary-light);
        color: var(--text-secondary);
    }
    
    .info-icon {
      display: inline-block;
      position: relative;
      margin-left: 5px;
      cursor: pointer;
      font-weight: bold;
      color: var(--text-secondary);
      border: 1px solid var(--border-input);
      border-radius: 50%;
      width: 16px;
      height: 16px;
      font-size: 12px;
      text-align: center;
      line-height: 14px;
    }
    
    .tooltip {
      display: none;
      position: absolute;
      top: 20px;
      left: -180px;
      width: 200px;
      background-color: var(--bg-dark);
      color: var(--text-white);
      padding: 8px;
      font-size: 1em;
      font-weight:400;
      border-radius: var(--radius-md);
      z-index: 10;
      box-shadow: var(--shadow-medium)
    }
    
    .info-icon:hover .tooltip,
    .info-icon:focus .tooltip {
      display: block;
    }
    
    .highlight_old {
        background-color: var(--gray-200); /* Very soft pink background */
        border-left: 4px solid var(--gray-500); /* Pale red border for subtle alert */
    }

    .highlight_promotion {
        background-color: var(--secondary-bg); /* Lighter gray for a cleaner look */
        border-left: 5px solid var(--secondary-light); /* Darker gray stripe to differentiate */
    }
    
    
/* For hiding the selection dropdowns */

    /* The bar shown when filters are hidden */
    .filter-toggle-bar {
        display: flex;
        justify-content: center;
        margin-bottom: 15px;
    }
    
    .filter-toggle-bar.hidden {
        display: none;
    }
    
    #toggleFiltersBtn {
        background: var(--secondary);
        border: 1px solid var(--border-input);
        padding: 8px 16px;
        border-radius: var(--radius-lg);
        cursor: pointer;
        transition: all 0.2s ease;
        max-width: 300px;
        align-items: center;
    }
    
    #toggleFiltersBtn:hover {
        background: var(--secondary-dark);
        box-shadow: var(--shadow-medium);
    }
    
    /* Smooth collapse animation */
    .filters.collapsed {
        max-height: 0 !important;
        overflow: hidden;
        padding: 0 !important;
        margin: 0 !important;
        opacity: 0;
    }
    
    .filters {
        transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
    }
    
    /* Optional: hide info-box too */
    .info-box.hidden-box {
        display: none;
    }
    #suggestionBox.hidden-box {
        display: none !important;
    }
    #graphBox.hidden-box {
        display: none !important;
    }