:root {
    --background: #f7f3e2;
    --background-75: rgb(247, 243, 226, 0.75);
    --baseDark: #666666;
    --baseDarker: #4d4d4d;
    --baseLight: #999999;
    --highlight: #ab9a6d;
    --highlightLight: #bcae8a;
    --highlightLight-25: rgba(171,154,109,0.25);
    --highlightLight-50: rgba(171,154,109,0.50);
    --highlightRed: #ed1f24;
    --highlightRedTransparent: rgba(237,33,36,0);
    --text: #333333;

    --marker_PT_selected_fillColor: #f3865a;
    --marker_PT_selected_strokeColor: var(--baseDarker);
    --marker_PT_notselected_fillColor: #fdbba1;
    --marker_PT_notselected_strokeColor: var(--baseLight);
    --marker_PT_nodata_fillColor: var(--whiteYellow-75);
    --marker_PT_nodata_strokeColor: var(--marker_PT_selected_fillColor);

    --marker_ALT_selected_fillColor: #56b899;
    --marker_ALT_selected_strokeColor: var(--marker_PT_selected_strokeColor);
    --marker_ALT_notselected_fillColor: #9ce2cb;
    --marker_ALT_notselected_strokeColor: var(--marker_PT_notselected_strokeColor);
    --marker_ALT_nodata_fillColor: var(--marker_PT_nodata_fillColor);
    --marker_ALT_nodata_strokeColor: var(--marker_ALT_selected_fillColor);

    --greyBBB: #bbb;
    --greyCCC: #ccc;
    --greyDDD: #ddd;
    --greyD8D8D8: #d8d8d8;
    --greyE8E8E8: #e8e8e8;
    --greyEEE: #eee;
    --greyF8: #f8f8f8;
    --grey80: #808080;
    --grey333: #333;
    --grey555: #555;
    --grey777: #777;
    --greyLight: lightgrey;

	--whiteGrey: whitesmoke;
	--whiteYellow: floralwhite;
	--whiteYellow-05: rgba(255, 250, 240, 0.05);
	--whiteYellow-15: rgba(255, 250, 240, 0.15);
	--whiteYellow-25: rgba(255, 250, 240, 0.25);
    --whiteYellow-50: rgba(255, 250, 240, 0.50);
    --whiteYellow-75: rgba(255, 250, 240, 0.75);
    --whiteYellow-92: rgba(255, 250, 240, 0.92);

    --black-0: rgba(0, 0, 0, 0);
    --black-05: rgba(0, 0, 0, 0.05);
    --black-10: rgba(0, 0, 0, 0.10);
    --black-20: rgba(0, 0, 0, 0.20);
    --black-25: rgba(0, 0, 0, 0.25);
	--black-30: rgba(0, 0, 0, 0.30);
	--black-40: rgba(0, 0, 0, 0.40);
	--black-50: rgba(0, 0, 0, 0.50);
    --black-75: rgba(0, 0, 0, 0.75);

    --grey-25: rgba(128, 128, 128, 0.25);
    --grey-50: rgba(128, 128, 128, 0.50);
    --grey-75: rgba(128, 128, 128, 0.75);

	--white-25: rgba(255, 255, 255, 0.25);
    --white-40: rgba(255, 255, 255, 0.40);
	--white-50: rgba(255, 255, 255, 0.50);
    --white-70: rgba(255, 255, 255, 0.70);
    --white-75: rgba(255, 255, 255, 0.75);
    --white-85: rgba(255, 255, 255, 0.85);

    --yes: rgba(172, 216, 167, 0.75);
    --yes-solid: rgba(172, 216, 167, 1);
    --no: rgba(235, 192, 192, 0.75);
    --inbetween: #ffffa1;

    --font-thin: 100;
    --font-extra-light: 200;
    --font-light: 300;
    --font-regular: 400;
    --font-medium: 500;
    --font-semi-bold: 600;
    --font-bold: 700;
    --font-extra-bold: 800;
    --font-black: 900;

    --headerHeight: 70px;
    --footerHeight: 50px;
    --mapHeaderHeight: 45px;
    --selectHeaderHeight: 35px;
    --fontDefault: 'Source Sans Pro', 'Quire Sans Pro', 'Aptops', 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;

    --svgUrlBasket: url('data:image/svg+xml;charset=UTF-8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="22" viewBox="0 0 19 16.93"><path fill="white" d="M17.48,5.89h-1.04c0.02,0.12,0.04,0.24,0.04,0.36c0,1.22-0.99,2.2-2.2,2.2s-2.2-0.98-2.2-2.2 c0-0.12,0.02-0.24,0.04-0.36H6.89c0.02,0.12,0.04,0.24,0.04,0.36c0,1.22-0.98,2.2-2.2,2.2c-1.21,0-2.2-0.98-2.2-2.2 c0-0.12,0.02-0.24,0.04-0.36H1.52C0.68,5.89,0,6.57,0,7.41c0,0.84,0.68,1.52,1.52,1.52h0.17L2.8,15.7c0.12,0.71,0.73,1.23,1.45,1.23 h10.5c0.72,0,1.33-0.52,1.45-1.23l1.11-6.78h0.17c0.84,0,1.52-0.68,1.52-1.52C19,6.57,18.32,5.89,17.48,5.89z M6.48,15.18 c-0.05,0.01-0.09,0.01-0.14,0.01c-0.44,0-0.83-0.32-0.9-0.78L4.81,10.2C4.74,9.7,5.08,9.24,5.58,9.17c0.5-0.07,0.96,0.27,1.04,0.77 l0.63,4.21C7.32,14.64,6.98,15.1,6.48,15.18z M10.41,14.27c0,0.5-0.41,0.91-0.91,0.91c-0.5,0-0.91-0.41-0.91-0.91v-4.21 c0-0.5,0.41-0.91,0.91-0.91s0.91,0.41,0.91,0.91V14.27z M13.56,14.41c-0.07,0.45-0.46,0.78-0.9,0.78c-0.05,0-0.09,0-0.14-0.01 c-0.5-0.07-0.84-0.54-0.77-1.04l0.63-4.21c0.07-0.5,0.54-0.84,1.04-0.77c0.5,0.07,0.84,0.54,0.77,1.04L13.56,14.41z"/><path fill="white" d="M3.98,7.46C4.21,7.6,4.47,7.67,4.73,7.67C5.2,7.67,5.67,7.43,5.94,7c0.25-0.4,0.27-0.88,0.11-1.28l2.71-4.38 C9,0.94,8.88,0.42,8.48,0.18C8.34,0.09,8.19,0.05,8.04,0.05c-0.28,0-0.56,0.14-0.72,0.4L4.62,4.83C4.18,4.86,3.76,5.09,3.51,5.5 C3.1,6.17,3.31,7.04,3.98,7.46z"/><path fill="white" d="M12.95,5.71C12.79,6.12,12.81,6.6,13.06,7c0.27,0.44,0.74,0.68,1.21,0.68c0.26,0,0.52-0.07,0.75-0.21 c0.67-0.41,0.88-1.29,0.46-1.96c-0.25-0.4-0.66-0.63-1.1-0.67l-2.71-4.38c-0.16-0.26-0.43-0.4-0.72-0.4c-0.15,0-0.3,0.04-0.44,0.13 c-0.4,0.25-0.52,0.76-0.27,1.16L12.95,5.71z"/></svg>');
    --svgUrlBasketFull: url('data:image/svg+xml;charset=UTF-8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="22" viewBox="0 0 19 16.93"><path fill="rgb(171,154,109)" d="M17.48,5.89h-1.04c0.02,0.12,0.04,0.24,0.04,0.36c0,1.22-0.99,2.2-2.2,2.2s-2.2-0.98-2.2-2.2 c0-0.12,0.02-0.24,0.04-0.36H6.89c0.02,0.12,0.04,0.24,0.04,0.36c0,1.22-0.98,2.2-2.2,2.2c-1.21,0-2.2-0.98-2.2-2.2 c0-0.12,0.02-0.24,0.04-0.36H1.52C0.68,5.89,0,6.57,0,7.41c0,0.84,0.68,1.52,1.52,1.52h0.17L2.8,15.7c0.12,0.71,0.73,1.23,1.45,1.23 h10.5c0.72,0,1.33-0.52,1.45-1.23l1.11-6.78h0.17c0.84,0,1.52-0.68,1.52-1.52C19,6.57,18.32,5.89,17.48,5.89z M6.48,15.18 c-0.05,0.01-0.09,0.01-0.14,0.01c-0.44,0-0.83-0.32-0.9-0.78L4.81,10.2C4.74,9.7,5.08,9.24,5.58,9.17c0.5-0.07,0.96,0.27,1.04,0.77 l0.63,4.21C7.32,14.64,6.98,15.1,6.48,15.18z M10.41,14.27c0,0.5-0.41,0.91-0.91,0.91c-0.5,0-0.91-0.41-0.91-0.91v-4.21 c0-0.5,0.41-0.91,0.91-0.91s0.91,0.41,0.91,0.91V14.27z M13.56,14.41c-0.07,0.45-0.46,0.78-0.9,0.78c-0.05,0-0.09,0-0.14-0.01 c-0.5-0.07-0.84-0.54-0.77-1.04l0.63-4.21c0.07-0.5,0.54-0.84,1.04-0.77c0.5,0.07,0.84,0.54,0.77,1.04L13.56,14.41z"/><path fill="rgb(171,154,109)" d="M3.98,7.46C4.21,7.6,4.47,7.67,4.73,7.67C5.2,7.67,5.67,7.43,5.94,7c0.25-0.4,0.27-0.88,0.11-1.28l2.71-4.38 C9,0.94,8.88,0.42,8.48,0.18C8.34,0.09,8.19,0.05,8.04,0.05c-0.28,0-0.56,0.14-0.72,0.4L4.62,4.83C4.18,4.86,3.76,5.09,3.51,5.5 C3.1,6.17,3.31,7.04,3.98,7.46z"/><path fill="rgb(171,154,109)" d="M12.95,5.71C12.79,6.12,12.81,6.6,13.06,7c0.27,0.44,0.74,0.68,1.21,0.68c0.26,0,0.52-0.07,0.75-0.21 c0.67-0.41,0.88-1.29,0.46-1.96c-0.25-0.4-0.66-0.63-1.1-0.67l-2.71-4.38c-0.16-0.26-0.43-0.4-0.72-0.4c-0.15,0-0.3,0.04-0.44,0.13 c-0.4,0.25-0.52,0.76-0.27,1.16L12.95,5.71z"/></svg>');
    --svgUrlBasketClear: url('data:image/svg+xml;charset=UTF-8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="22" viewBox="0 0 19 16.93"><path fill="white" d="M17.48,5.89h-1.04c0.02,0.12,0.04,0.24,0.04,0.36c0,1.22-0.99,2.2-2.2,2.2s-2.2-0.98-2.2-2.2 c0-0.12,0.02-0.24,0.04-0.36H6.89c0.02,0.12,0.04,0.24,0.04,0.36c0,1.22-0.98,2.2-2.2,2.2c-1.21,0-2.2-0.98-2.2-2.2 c0-0.12,0.02-0.24,0.04-0.36H1.52C0.68,5.89,0,6.57,0,7.41c0,0.84,0.68,1.52,1.52,1.52h0.17L2.8,15.7c0.12,0.71,0.73,1.23,1.45,1.23 h10.5c0.72,0,1.33-0.52,1.45-1.23l1.11-6.78h0.17c0.84,0,1.52-0.68,1.52-1.52C19,6.57,18.32,5.89,17.48,5.89z M6.48,15.18 c-0.05,0.01-0.09,0.01-0.14,0.01c-0.44,0-0.83-0.32-0.9-0.78L4.81,10.2C4.74,9.7,5.08,9.24,5.58,9.17c0.5-0.07,0.96,0.27,1.04,0.77 l0.63,4.21C7.32,14.64,6.98,15.1,6.48,15.18z M10.41,14.27c0,0.5-0.41,0.91-0.91,0.91c-0.5,0-0.91-0.41-0.91-0.91v-4.21 c0-0.5,0.41-0.91,0.91-0.91s0.91,0.41,0.91,0.91V14.27z M13.56,14.41c-0.07,0.45-0.46,0.78-0.9,0.78c-0.05,0-0.09,0-0.14-0.01 c-0.5-0.07-0.84-0.54-0.77-1.04l0.63-4.21c0.07-0.5,0.54-0.84,1.04-0.77c0.5,0.07,0.84,0.54,0.77,1.04L13.56,14.41z"/><path fill="white" d="M3.98,7.46C4.21,7.6,4.47,7.67,4.73,7.67C5.2,7.67,5.67,7.43,5.94,7c0.25-0.4,0.27-0.88,0.11-1.28l2.71-4.38 C9,0.94,8.88,0.42,8.48,0.18C8.34,0.09,8.19,0.05,8.04,0.05c-0.28,0-0.56,0.14-0.72,0.4L4.62,4.83C4.18,4.86,3.76,5.09,3.51,5.5 C3.1,6.17,3.31,7.04,3.98,7.46z"/><path fill="white" d="M12.95,5.71C12.79,6.12,12.81,6.6,13.06,7c0.27,0.44,0.74,0.68,1.21,0.68c0.26,0,0.52-0.07,0.75-0.21 c0.67-0.41,0.88-1.29,0.46-1.96c-0.25-0.4-0.66-0.63-1.1-0.67l-2.71-4.38c-0.16-0.26-0.43-0.4-0.72-0.4c-0.15,0-0.3,0.04-0.44,0.13 c-0.4,0.25-0.52,0.76-0.27,1.16L12.95,5.71z"/><line x1="2" y1="15" x2="17" y2="2" stroke-linecap="round" stroke="red" stroke-width="4" style="opacity: 0.75" /></svg>');

    --svgUrlLogin: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 220 220" fill="none"><rect width="220" height="220" x="0" y="0" fill="%234d4d4d"/><circle cx="110" cy="220" r="110" fill="white" /><circle cx="110" cy="60" r="66" fill="white" stroke="%234d4d4d" stroke-width="22"/></svg>');
    --svgUrlMapSettings: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 220 220"><line x1="40" y1="10" x2="40" y2="210" stroke-linecap="round" stroke="white" stroke-width="15" /><line x1="110" y1="10" x2="110" y2="210" stroke-linecap="round" stroke="white" stroke-width="15" /><line x1="180" y1="10" x2="180" y2="210" stroke-linecap="round" stroke="white" stroke-width="15" /><circle cx="40" cy="170" r="30" fill="white" /><circle cx="110" cy="30" r="30" fill="white" /><circle cx="180" cy="130" r="30" fill="white" /></svg>');
    --svgUrlShare: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 220 220"><line x1="155" y1="40" x2="60" y2="110" stroke-linecap="round" stroke="white" stroke-width="15" /><line x1="60" y1="110" x2="155" y2="180" stroke-linecap="round" stroke="white" stroke-width="15" /><circle cx="155" cy="40" r="35" fill="white" /><circle cx="60" cy="110" r="35" fill="white" /><circle cx="155" cy="180" r="35" fill="white" /></svg>');

    --svgPlus: url('data:image/svg+xml;charset=UTF-8,<svg width="22" height="22" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" style="fill: rgb(153,153,153); stroke: rgb(238,238,238); stroke-width: 5; "/><polyline points="25,50 75,50" style="stroke: rgb(0,225,0); stroke-width: 15; stroke-linecap: round;" /><polyline points="50,25 50,75" style="stroke: rgb(0,225,0); stroke-width: 15; stroke-linecap: round;" /></svg>');
    --svgMinus: url('data:image/svg+xml;charset=UTF-8,<svg width="22" height="22" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" style="fill: rgb(153,153,153); stroke: rgb(238,238,238); stroke-width: 5; "/><polyline points="25,50 75,50" style="stroke: rgb(255,0,0); stroke-width: 15; stroke-linecap: round;" /></svg>');
    --svgPlusHover: url('data:image/svg+xml;charset=UTF-8,<svg width="22" height="22" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" style="fill: rgb(102,102,102); stroke: rgb(238,238,238); stroke-width: 5; "/><polyline points="25,50 75,50" style="stroke: rgb(0,225,0); stroke-width: 15; stroke-linecap: round;" /><polyline points="50,25 50,75" style="stroke: rgb(0,225,0); stroke-width: 15; stroke-linecap: round;" /></svg>');
    --svgMinusHover: url('data:image/svg+xml;charset=UTF-8,<svg width="22" height="22" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" style="fill: rgb(102,102,102); stroke: rgb(238,238,238); stroke-width: 5; "/><polyline points="25,50 75,50" style="stroke: rgb(255,0,0); stroke-width: 15; stroke-linecap: round;" /></svg>');

    --svgUrlArrow: url('data:image/svg+xml;charset=UTF-8,<svg width="15" height="15" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polyline points="25,10, 25,90 75,50 25,10" style="fill: rgb(153,153,153); stroke: rgb(153,153,153); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round;" /></svg>');
    --svgUrlArrowHighlightLight: url('data:image/svg+xml;charset=UTF-8,<svg width="15" height="15" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polyline points="25,10, 25,90 75,50 25,10" style="fill: rgb(171,154,109); stroke: rgb(171,154,109); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round;" /></svg>');

    --svgSortingBothHighlight: url('data:image/svg+xml;charset=UTF-8,<svg width="10" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 200"><polygon points="2,93 50,2 98,93" fill="rgb(171,154,109)" /><polygon points="2,107 50,198 98,107" fill="rgb(171,154,109)" /></svg>');
    --svgSortingBothHighlightLight: url('data:image/svg+xml;charset=UTF-8,<svg width="10" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 200"><polygon points="2,93 50,2 98,93" fill="rgb(171,154,109)" /><polygon points="2,107 50,198 98,107" fill="rgb(171,154,109)" /></svg>');
    --svgSortingDownHighlight: url('data:image/svg+xml;charset=UTF-8,<svg width="10" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 200"><polygon points="2,107 50,198 98,107" fill="rgb(171,154,109)" /></svg>');
    --svgSortingUpHighlight: url('data:image/svg+xml;charset=UTF-8,<svg width="10" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 200"><polygon points="2,93 50,2 98,93" fill="rgb(171,154,109)" /></svg>');

    --svgDownloadButton: url('data:image/svg+xml;charset=UTF-8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-2.1 -2.1 25 24.2" width="24" height="24" fill="white"><g fill-rule="evenodd"><g transform="translate(-139, -480)"><g transform="translate(56, 160)"> <path d="M93.5,336.243 L88.81175,331 L92.45,331 L92.45,324 L94.55,324 L94.55,331 L98.25755,331.032 L93.5,336.243 Z M85.1,338 L101.9,338 L101.9,322 L85.1,322 L85.1,338 Z M83,340 L104,340 L104,320 L83,320 L83,340 Z"></path></g></g></g></svg>');

    --svgOrcid: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="24" height="24"><circle cx="128" cy="128" r="128" fill="%23A6CE39"/><path fill="%23FFFFFF" d="M86.3,186.2H70.9V79.1h15.4v48.4V186.2z"/><path fill="%23FFFFFF" d="M108.9,79.1h41.6c39.6,0,57,28.3,57,53.6c0,27.5-21.5,53.6-56.8,53.6h-41.8V79.1z M124.3,172.4h24.5c34.9,0,42.9-26.5,42.9-39.7c0-21.5-13.7-39.7-43.7-39.7h-23.7V172.4z"/><circle fill="%23FFFFFF" cx="78.6" cy="56.8" r="10.1"/></svg>');

    --svgROR: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="24" height="24"><circle cx="128" cy="128" r="128" fill="%2347A45F"/><text x="50%" y="71%" font-size="165" font-family="Arial,sans-serif" font-weight="bold" text-anchor="middle" fill="%23FFFFFF">R</text></svg>');

    --svgDOI: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="1 1 128 128"><circle style="fill:%23fcb425" cx="65" cy="65" r="64"/><path style="fill:%23231f20" d="m49.819127,84.559148-11.854304,0 0,-4.825665c-1.203594,1.510894-4.035515,3.051053-5.264716,3.742483-2.151101,1.203585-5.072066,1.987225-7.812161,1.987225-4.430246,0-8.373925-1.399539-11.831057-4.446924-4.122946-3.636389-6.060246-9.19576-6.060246-15.188113 0-6.094791 2.112691-10.960381 6.338065-14.59676 3.354695-2.893745 7.457089-5.209795 11.810505-5.209795 2.535231,0 5.661807,0.227363 7.889738,1.302913 1.280414,0.614601 3.572628,2.060721 4.929872,3.469179l0-25.420177 11.854304,0z m-12.1199-18.692584c0-2.253538-0.618258-4.951555-2.205973-6.513663-1.587724-1.587724-4.474153-2.996182-6.727691-2.996182-2.509615,0-4.834476,1.825511-6.447807,3.720535-1.306031,1.536501-1.959041,3.905269-1.959041,5.877114 0,1.971835 0.740815,4.165004 2.046836,5.701505 1.587714,1.895025 3.297985,3.193739 5.833216,3.193739 2.279145,0 4.989965-0.956662 6.552083-2.51877 1.587714-1.562108 2.908377-4.185134 2.908377-6.464278z"/><path style="fill:%23fff" d="M105.42764,25.617918c-1.97184,0-3.64919,0.69142-5.03204,2.074271-1.357247,1.357245-2.035864,3.021779-2.035864,4.993633 0,1.971835 0.678617,3.649193 2.035864,5.032034 1.38285,1.382861 3.0602,2.074281 5.03204,2.074281 1.99744,0 3.67479-0.678627 5.03203-2.035861 1.38285-1.382861 2.07428-3.073012 2.07428-5.070454 0-1.971854-0.69143-3.636388-2.07428-4.993633-1.38285-1.382851-3.0602-2.074271-5.03203-2.074271zM74.219383,45.507921c-7.323992,0-12.970625,2.283009-16.939921,6.848949-3.277876,3.782438-4.916803,8.118252-4.916803,13.008406 0,5.430481 1.626124,10.009834 4.878383,13.738236 3.943689,4.538918 9.475093,6.808622 16.59421,6.808622 7.093512,0 12.612122-2.269704 16.555801-6.808622 3.252259-3.728402 4.878393-8.1993 4.878393-13.413648 0-5.160323-1.638938-9.604602-4.916803-13.332994-4.020509-4.56594-9.398263-6.848949-16.13326-6.848949zm24.908603,1.386686 0,37.634676 12.599304,0 0-37.634676-12.599304,0z M73.835252,56.975981c2.304752,0 4.263793,0.852337 5.877124,2.554426 1.638928,1.675076 2.458402,3.727881 2.458402,6.159457 0,2.458578-0.806671,4.538022-2.419992,6.240111-1.613331,1.675086-3.585175,2.514099-5.915534,2.514099-2.612051,0-4.737546-1.027366-6.376474-3.080682-1.331637-1.648053-1.997451-3.539154-1.997451-5.673528 0-2.107362 0.665814-3.985138 1.997451-5.633201 1.638928-2.053316 3.764423-3.080682 6.376474-3.080682z"/></svg>');

    --imprint-email1: "awi";
    --imprint-email2: "de";
}

.imprint-email-part1::after {
    content: "\0040" var(--imprint-email1);
}
.imprint-email-part2::before {
    content: ".";
}
.imprint-email-part2::after {
    content: var(--imprint-email2);
}

@font-face {
    /* https://github.com/nteract/assets/tree/master/fonts/source-sans-pro */
    font-family: 'Source Sans Pro';
    src: url('../fonts/source-sans-pro/SourceSans3VF-Upright.ttf.woff2') format('woff2'),
         url('../fonts/source-sans-pro/SourceSans3VF-Upright.ttf.woff') format('woff');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    /* https://github.com/nteract/assets/tree/master/fonts/source-sans-pro */
    font-family: 'Source Sans Pro';
    src: url('../fonts/source-sans-pro/SourceSans3VF-Italic.ttf.woff2') format('woff2'),
         url('../fonts/source-sans-pro/SourceSans3VF-Italic.ttf.woff') format('woff');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

.fade-in {
    opacity: 0;
    animation: fadeIn 1s ease-out forwards;
}
@keyframes fadeIn {
    to { opacity: 1; }
}
.blur-in {
    opacity: 0;
    filter: blur(5px);
}
.blur-in.visible {
    animation: blurIn 1s ease-out forwards; /* forwards keeps final state */
}
@keyframes blurIn {
    to {
        opacity: 1;
        filter: blur(0);
    }
}


html,
body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    font-family: var(--fontDefault);
    /*background-color: var(--background); */
}

/* grid layout */
article {
    height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 1fr;
    grid-template-areas:
        "header"
        "main"
        "footer";
}

header {
    grid-area: header;
    height: var(--headerHeight);
    width: 100%;
    background-color: var(--baseDarker);
    box-shadow: 0px 5px 5px 0 var(--black-40);
    z-index: 1010;
    /* overflow: visible; -> cart button tool-tip */
    display: grid;
    align-items: center;
    grid-template-columns: 33% 34% 33%;
    grid-template-areas:
        "header-logo header-nav header-controls";
}
#header-logo {
    grid-area: header-logo;
    justify-self: left;
}
#header-nav {
    grid-area: header-nav;
    justify-self: center;
}
#header-controls {
    grid-area: header-controls;
    justify-self: right;
    padding-right: 1.25em;
}
#header-logo img {
    padding-left: 1.25em;
}
#header-logo img#logo-gtnp {
    height: 60px;
    padding-top: 5px;
}
#footer-logos a, #header-logo  a img {
    opacity: 1;
    transition: opacity 0.5s;
}
#footer-logos a:hover, #header-logo a img:hover {
    opacity: 0.66;
}

#header-logo a#gtnp-platform {
    color: var(--baseLight);
    position: absolute;
    top: 30px;
    left: 160px;
    font-size: 140%;
    line-height: 0.9;
    font-weight: 700;
    border-top: solid 3px var(--highlightRed);
    border-bottom: solid 3px var(--highlightRed);
    padding: 2px 0;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
}
#header-logo a#gtnp-platform:hover {
    color: white;
    text-decoration: none;
    border-top: solid 3px var(--baseLight);
    border-bottom: solid 3px var(--baseLight);
}

.bouncy-link:hover span {
  animation: bounceShrinkFast 0.4s ease forwards;
}


@keyframes bounceShrinkFast {
  0%   { transform: scale(1); }
  40%  { transform: scale(0.7); }
  70%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}


footer {
    grid-area: footer;
    height: var(--footerHeight);
    background-color: var(--baseDarker);
    box-shadow: 0px -5px 5px 0 var(--black-40);
    z-index: 1010;
    overflow: hidden;
    display: grid;
    align-items: center;
    justify-items: center;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 3fr 1fr;
    grid-template-areas:
        "footer-blank footer-nav footer-logos";
}
#footer-blank {
    grid-area: footer-blank;
    justify-self: left;
    padding: 0 1em;
}
#footer-nav {
    grid-area: footer-nav;
    justify-self: center;
    padding: 0 1em;
}
#footer-logos {
    grid-area: footer-logos;
    justify-self: right;
    padding: 0 1em;
}
#footer-logos a {
    opacity: 1;
    transition: opacity 0.5s;
}
#footer-logos a:hover {
    opacity: 0.5;
}

main {
    grid-area: main;
    /*background-color: var(--background);*/
    display: grid;
    overflow: auto;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 3px 1fr;
    grid-template-areas:
        "contentSection border mapSection";
    transition: grid-template-columns 0.66s ease;
}
#mapSection {
    container: mapContainer;
    container-type: inline-size;
    grid-area: mapSection;
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 45px auto;
    grid-template-areas:
        "map-header"
        "map";
}
#map-header {
    grid-area: map-header;
    position: relative;
    background-color: var(--baseDark);
    box-shadow: 0px 5px 5px 0 var(--black-40);
    z-index: 1000;
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: 1fr;
    grid-template-areas:
        "map-header-nav map-header-actions";
    position: sticky;
    top: 0;
}
#map-header-actions {
    grid-area: map-header-actions;
    justify-self: right;
    align-self: center;
    display: block;
}

#map {
    grid-area: map;
    overflow: hidden;
    background-color: var(--whiteGrey);
    width: 100%;
    height: 100%;
    display: block;
}
#table {
    grid-area: map;
    overflow: hidden;
    /* background-color: var(--whiteGrey);*/
    display: none;
    position: fixed;
    overflow: auto;
    height: calc(100% - 165px);
    width: 50%;
    margin-top: 45px;
}
#table table {
    background-color: var(--background-75);
}
#contentSection {
    container: contentContainer;
    container-type: inline-size;
    grid-area: contentSection;
    position: relative;
    isolation: isolate; /* ensures blending is contained to this element */
    height: 100%;
    width: 100%;
    display: inline;
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
    /*transition: background-color 0.25s ease;    */
    scroll-snap-type: y proximity; /* scroll behavior {mandatory; proximity}  */
    scroll-behavior: smooth;
}
#contentSection::-webkit-scrollbar {
    display: none;
}
#contentWrapperSection {
    padding: 1em 2em;
}
#contentSection::before, #mapSection::before {
    content: "";
    position: fixed;
    top: var(--headerHeight);
    bottom: var(--footerHeight);
    left: 0;
    right: 0;

    background-image: url('../pics/background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    filter: contrast(0.7) brightness(1.5) opacity(0.6) blur(3px);
    z-index: -2;
    pointer-events: none;
}
#contentSection::after, #mapSection::after {
    content: "";
    position: fixed;
    top: var(--headerHeight);
    bottom: var(--footerHeight);
    left: 0;
    right: 0;
    background-color: var(--highlight);
    mix-blend-mode: color;
    opacity: 0.5;
    z-index: -1;
    pointer-events: none;
}

main#mainFullPage {
    position: relative;
    isolation: isolate; /* ensures blending is contained to this element */
    z-index: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
}
main#mainFullPage::before {
    content: "";
    position: fixed;
    top: var(--headerHeight);
    bottom: var(--footerHeight);
    left: 0;
    right: 0;
    background-image: url('../pics/background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: contrast(0.7) brightness(1.5) opacity(0.6) blur(3px);
    z-index: -2;
    pointer-events: none;
}
main#mainFullPage::after {
    content: "";
    position: fixed;
    top: var(--headerHeight);
    bottom: var(--footerHeight);
    left: 0;
    right: 0;
    background-color: var(--highlight);
    mix-blend-mode: color;
    opacity: 0.5;
    z-index: -1;
    pointer-events: none;
}

#mainFullPage #contentWrapperFullPage  {
    padding: 1em 2em;
    margin-left: auto;
    margin-right: auto;
    width: 1470px;
    background-color: var(--white-75);
    backdrop-filter: blur(10px);
    box-shadow: 0 0 5px 0 var(--black-30);
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    flex-grow: 1;
}

#tableWrapper {
    padding: 0.5em 1em 1.5em 1em;
}
#data-table-PT, #data-table-ALT {
    border: 2px solid var(--whiteYellow);
}
#border {
    grid-area: border;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: var(--highlight);
}

/* Navigation */
#header-nav ul, #footer-nav ul, #map-nav ul {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    list-style: none;
    align-items: center;
    padding: 0;
    margin: 0;
}
.select-nav ul {
    display: flex;
    flex-direction: column;
    width: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
}
.select-nav li {
    width: 100%;
}
.select-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;

    width: 100%;
    height: 100%;
    box-sizing: border-box;

    font-size: 1.1rem;
    font-weight: bold;
    color: var(--text); /* var(--whiteYellow)*/
    background-color: var(--highlightLight-50);   /* baseDark */

    padding: 0.2em 0.5em;
    margin: 0;

    text-decoration: none;
    overflow: hidden;
    position: relative;
    transition: background-color 0.25s ease;
    word-break: break-word;
    border-bottom: 2px solid var(--whiteYellow);
}
.select-nav ul li a:hover, .select-nav ul li a.active  {
    text-decoration: none;
    background-color: var(--highlightLight);   /* highlight */
}

#contentWrapperFullPage .select-nav a {
    flex-direction: row;
    background-color: var(--baseDark); /* var(--highlight); */
    color: var(--whiteYellow);
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    border-bottom: none;
    transition: color 0.25s ease;
}
#contentWrapperFullPage .select-nav a:hover {
    color: var(--highlightLight);
}


#header-nav ul li a, #footer-nav ul li a, #map-nav ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    margin: 0;
    padding: 0 1em;
    color: var(--whiteYellow);
    font-weight: bold;
}
#header-nav ul li a {
    height: var(--headerHeight);
    font-size: 1.6rem;
    background-color: var(--highlightRedTransparent);
    transition: text-decoration-color 0.25s ease, background-color 0.5s ease;
}
#footer-nav ul li a  {
    height: var(--footerHeight);
    font-size: 1.05rem;
}
#map-nav ul li a  {
    height: var(--mapHeaderHeight);
    font-size: 1.15rem;
    letter-spacing: 0.1em;
}

#header-nav ul li a:hover, #header-nav ul li a.active {
    background-color: var(--highlight);
}
#header-nav ul li a.active {
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-decoration-color: var(--highlightRed);
    text-underline-offset: 8px;
}
#header-nav ul li a.active:hover{
    background-color: var(--highlight);
    text-decoration-color: var(--highlightRedTransparent);
}

#map-nav ul li a {
    text-transform: uppercase;
}

#footer-nav ul li a.active, #footer-nav ul li a, #map-nav ul li a.active, #map-nav ul li a {
    text-decoration-color: var(--highlightRedTransparent);
    transition: text-decoration-color 0.25s ease;
}
#footer-nav ul li a.active, #map-nav ul li a.active {
    background-color: var(--highlight);
}
#footer-nav ul li a:hover, #map-nav ul li a:hover {
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-decoration-color: var(--highlightRed);
    text-underline-offset: 6px;
}



/* SVG styling
svg#gtnp-db-logo {
    padding-left: 1em;
    position: relative;
    top: 2px;
}
svg#gtnp-db-logo polygon {
    fill: var(--highlightRed);
    stroke: none;
}
svg#gtnp-db-logo text {
    fill: var(--grey80);
    font-size: 250px;
    font-weight: bold;
    font-family: var(--fontDefault);
    transition: fill 1s ease;
}
svg#gtnp-db-logo circle {
    fill: var(--highlight);
    transition: cy 1s ease, fill 1s ease;

}
svg#gtnp-db-logo:hover circle {
    cy: 390px;
    fill: var(--highlightRed);
}
svg#gtnp-db-logo polygon {
    transition: fill 1s ease;
}
svg#gtnp-db-logo:hover polygon {
    fill: white;
}
svg#gtnp-db-logo:hover text {
    fill: var(--highlight);
}*/

/* buttons */
button.button-header:hover {
    cursor: pointer;
    color: var(--highlight);
}
button.button-header {
    width: 100px;
    height: 30px;
    padding-left: 0.5em;
    margin: 0 0.33em;
    background: transparent;
    border: 2px solid var(--whiteYellow);
    color: var(--whiteYellow);
    font-family: var(--fontDefault);
    font-size: 0.95rem;
    font-weight: bold;
    text-transform: uppercase;
    text-align: left;
    transition: color 0.25s ease;
}
#button-data-basket {
    position: relative;
    background-image: var(--svgUrlBasket);
    background-repeat: no-repeat;
    background-position-x: 93%;
    background-position-y: 2px;
    z-index: 1;
}
#button-data-basket #cart-count {
    position: absolute;
    top: -2px;
    right: 5px;
    transform: translate(50%, -50%);
    background-color: rgba(0,0,0,0.66);
    color: white;
    border-radius: 1em;
    padding: 0 5px;
    font-size: 0.7rem;
    font-weight: var(--font-medium);
    white-space: nowrap;
    pointer-events: none;
}
#button-data-basket.has-items {
    background-image: var(--svgUrlBasketFull);
}
#button-login {
    background-image: var(--svgUrlLogin);
    background-repeat: no-repeat;
    background-position-x: 93%;
    background-position-y: 2px;
}
#button-login:hover::after, #button-data-basket:hover::after  {
    position: absolute;
    width: 182px;
    background-color: var(--highlight);
    color: var(--whiteGrey);
    border-radius: 2px;
    box-shadow: 1px 1px 5px 0 var(--black-40);
    text-align: right;
    text-transform: none;
    font-weight: bold;
    font-size: 90%;
    line-height: 1.2em;
    padding: 5px 7px;
    z-index: 1000;
    opacity: 0.925;
}
#button-login:hover::after {
    content: "Login for data UPLOAD.";
    right: 23px;
    top: 53px;
}
#button-data-basket:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    white-space: pre; /* allows \A to render as a line break */
    right: -3px;
    top: 31px;
    z-index: 1000;
}

.heading-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}
.heading-row h1 {
    flex: 1 1 auto;
    min-width: 0;
}
.heading-row .actions {
    display: flex;
    gap: 0.25rem; /* consistent spacing between buttons */
    flex-shrink: 0;  /* prevents buttons from overflowing */
    margin-top: 0.75rem;
}
.api {
    border: solid 2px var(--whiteYellow);
    padding: 0.25rem 0.5rem;
    border-radius: 3px;
    background: var(--greyCCC);
    box-shadow: 0px 0px 4px 0 var(--black-20);
    margin-top: 0;
    margin-left: 0.25rem;
    margin-right: 1px;
    font-size: 1.05rem;
    font-family: var(--fontDefault);
    font-weight: var(--font-bold);
    color: var(--grey80);
    text-decoration: none;
    transition: background-color 0.25s ease;
}
.api:hover {
    color: var(--highlight);
    background-color: var(--highlightLight-50);
    text-decoration: none;
}

.copy-pid {
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22" fill="none"><polygon points="8,7 18,7 18,20 8,20" fill="%23eee" stroke="%23808080" stroke-width="1.5" stroke-linejoin="round" /><polyline points="14,3 4,3 4,16" fill="none" stroke="%23808080" stroke-width="1.5" stroke-linejoin="round" stroke-linecap="round" /></svg>');
    background-position: calc(100% - 2px) center;
    background-repeat: no-repeat;
    padding-right: 27px;
}
.copy-pid:hover {
    cursor: pointer;
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22" fill="none"><polygon points="8,7 18,7 18,20 8,20" fill="%23eee" stroke="%23ab9a6d" stroke-width="1.5" stroke-linejoin="round" /><polyline points="14,3 4,3 4,16" fill="none" stroke="%23ab9a6d" stroke-width="1.5" stroke-linejoin="round" stroke-linecap="round" /></svg>');
}
.copy-tooltip {
    position: fixed;
    background-color: var(--yes-solid);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    border: solid 1px var(--greyBBB);
    font-size: 0.9rem;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    z-index: 2000;
    white-space: nowrap;
}
.copy-tooltip.show {
    opacity: 0.9;
    transform: translateY(0);
    cursor: pointer;
}

@keyframes tremble {
    0%   { transform: translateX(0); }
    25%  { transform: translateX(-2px); }
    50%  { transform: translateX(2px); }
    75%  { transform: translateX(-2px); }
    100% { transform: translateX(0); }
}
.tremble {
    animation: tremble 0.3s ease;
}

.button-map-rect, .button-map-square {
    background: var(--whiteYellow-15);
    border: 2px solid var(--whiteYellow);
    color: var(--whiteYellow);
    font-family: var(--fontDefault);
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    transition: background-color 0.25s ease, height 0.25s ease;
}
.button-map-rect:hover, .button-map-square:hover {
    cursor: pointer;
    background-color: var(--whiteYellow-25);
}
.button-map-rect:hover {
    height: 24px;
}
.button-map-rect {
    width: 70px;
    height: 21px;
    margin: 0 0.25em;
    position: relative;
    top: -4px;
    font-size: 0.9em;
}
.button-map-rect.active, .button-map-square.active {
    background: var(--highlight);
    transition: background-color 0.25s ease, height 0.1s ease;
}
.button-map-rect.active {
    height: 24px;
}


.button-map-square {
    width: 30px;
    height: 30px;
    padding-left: 0.5em;
    margin: 4px 0.25em 0 0.25em;
}
#button-map-settings {
    margin-right: 1.85em;
    margin-left: 0.5em;
    background-image: var(--svgUrlMapSettings);
    background-repeat: no-repeat;
    background-position: center;
}
#button-map-share {
    margin-left: 1.25em;
    background-image: var(--svgUrlShare);
    background-repeat: no-repeat;
    background-position: center;
}
.rgv {
    color: var(--grey-75);
    text-decoration: line-through;
    text-decoration-style: dotted;
}
button.rgv {
    color: var(--greyBBB);
}
.netcdf {
    color: var(--grey-25);
    text-decoration: line-through;
}
a.netcdf:hover {
    background: var(--greyCCC);
    color: var(--grey-25);
    text-decoration: line-through;
    cursor: default;
}

.type-icon {
    width: 24px;
    height: 24px;
    float: right;
    border: solid 1px var(--greyBBB);
    position: relative;
    top: -3px;
}
.type-icon-td {
    vertical-align: middle;
    height: 28px;
    padding-bottom: 0;
    position: relative;
    top: 3px;
}


button.add-to-basket  {
    padding: 0.66em 0.5em 0.66em 33px ;
    margin: 0.5em;
    background: var(--baseDark);
    border: solid 2px var(--baseLight);
    box-shadow: 0px 0px 4px 0 var(--black-20);
    color: var(--whiteYellow);
    font-family: var(--fontDefault);
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.25s ease, height 0.25s ease;

    background-image: var(--svgUrlBasket);
    background-repeat: no-repeat;
    background-position-x: 4px;
    background-position-y: 5px;
}
button.add-to-basket:hover {
    background-color: var(--highlight);
}

button.add-to-basket-small {
    height: 32px;
    width: 32px;
    background: var(--baseDark);
    border: solid 2px var(--baseLight);
    box-shadow: 0px 0px 4px 0 var(--black-20);
    cursor: pointer;
    transition: background-color 0.25s ease, height 0.25s ease;
    background-image: var(--svgUrlBasket);
    background-repeat: no-repeat;
    background-position-x: 2px;
    background-position-y: 3px;
}
td:has(.add-to-basket-small) {
    padding: 0 0.25em !important;
}
button.add-to-basket-small:hover {
    background-color: var(--highlight);
}

.add-to-basket-wrapper {
    text-align: right !important;
    padding-right: 0.35em;
    padding-bottom: 0.35em;
}
.add-to-basket-wrapper button.add-to-basket {
    margin-top: 0.15em;
}

button.add-to-basket.clear  {
    background-image: var(--svgUrlBasketClear);
}

button.add-plus, button.remove-minus {
    height: 22px;
    width: 22px;
    cursor: pointer;
    background: transparent;
    border: none;
    background-repeat: no-repeat;
}
button.add-plus {
    background-image: var(--svgPlus);
}
button.remove-minus {
    background-image: var(--svgMinus);
}
button.add-plus:hover {
    background-image: var(--svgPlusHover);
}
button.remove-minus:hover {
    background-image: var(--svgMinusHover);
}
.popupwrapper button.add-plus, .popupwrapper button.remove-minus {
    float: right;
    margin-right: 5px;
    margin-top: 5px;
}


/* Text */
h1, h2, h3, h4 {
    line-height: 1.2;
    color: var(--text);
}
h1 {
    font-size: 1.6em;
    margin-top: 0.5em;
}
h2 {
    font-size: 1.4em;
    margin-top: 0.75em;
}
h3 {
    font-size: 1.2em;
    margin-top: 1em;
}
h4 {
    font-size: 1.05em;
    margin-top: 1em;
}

p {
    font-size: 1.05em;
    line-height: 1.5;
    color: var(--text);
}

a {
    color: var(--highlight);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 2px;
    text-decoration-thickness: 2px;
    transition: 0.25s;
}
a:hover {
    text-decoration: underline;
    text-decoration-color: 2px solid var(--highlight);
    text-underline-offset: 2px;
    text-decoration-thickness: 2px;
}
.slideshow-modal a:hover {
    text-decoration: none;
}

hr {
    border: none;
    border-top: 3px solid var(--highlightLight);
    margin: 2em 10%;
    border-radius: 3px;
}
hr.small {
    border-top: 2px solid var(--highlightLight);
    margin: 0.75em 10%;
}

.medium {
    font-weight: var(--font-medium) !important;
}
.semi-bold {
    font-weight: var(--font-semi-bold) !important;
}
.bold {
    font-weight: var(--font-bold) !important;
}

.code {
    border: solid 1px var(--greyBBB);
    border-radius: 4px;
    padding: 0 0.3rem;
    background-color: var(--greyEEE);
    margin: 0 0.1rem;
    font-weight: var(--font-semi-bold);
    font-family: Consolas, monospace;
    font-size: 90%;
}
a .code {
    border: solid 1px var(--grey777);
    background-color: var(--grey555);
    color: var(--greyCCC);
    margin-left: 0.25rem;
    margin-right: 0.25rem;
    font-size: 100%;
}

/* Boxes, select and filter data */
.box-outer {
    border: solid 2px var(--whiteYellow);
    box-shadow: 0px 0px 4px 0 var(--black-20);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    background-color: var(--white-75);
    backdrop-filter: blur(10px);
    box-sizing: border-box;
}
.box-outer.contactcard {
    border: none;
    background-color: var(--black-05);
}
.text-box {
    background-color: var(--white-75);
    backdrop-filter: blur(10px);
    padding: 0.5rem 0.75rem 0.1px 0.75rem;
    margin: 1rem 0 1.25rem 0;
    box-shadow: 0px 0px 4px 1px var(--white-75);
    border-radius: 3px;
}

.text-box dl {
    margin: 0;
}

.text-box dt {
  font-size: 75%;
  color: var(--baseLight);
  text-decoration: underline;
  margin-top: 0.33rem;
}
.text-box dt:first-child {
  margin-top: 0;
}
.text-box dd {
  margin: 0 0 0.33rem 0;
  font-size: 1rem;
  font-weight: var(--font-medium);
}


#select-and-filter, #modelled-data {
    width: 100%;
    margin-bottom: 1rem;
}
.select-nav {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
#modelled-data .select-nav ul li a {
    justify-content: left;
}
#input-container {
    margin-top: 10px;
    width: 100%;
    display: flex;
    justify-content: center;
}

.columns-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}
.columns-1 {
    margin-bottom: 1rem;
}


.flex-item.summary {
    margin-top: 0.5em;
    padding: 0;
    background-color: var(--background-75);
}
.flex-item.summary h4 {
    margin: 0 0 0.25em 0;
    padding: 0.2rem;
    background: var(--highlightLight);
    text-align: center;
    font-size: 1rem;
}

.columns-1 .summary-wide {
    padding: 0.25rem 0.5rem;
}
.flex-item.input .summary-wide {
    padding: 0.33em 0.5em 0.25em 0.5em;
    margin-bottom: 0.5em;
    background-color: var(--highlightLight-50);
}
.columns-1 .summary-wide h4 {
    margin: 0.25em 0 0 0;
    padding: 0;
    background: transparent;
    text-align: left;
    font-size: 1.05em;
}


.columns-2 h2, .columns-1 h2, h3.list-header  {
    text-align: center;
    margin: 0 0;
    padding: 0.3rem 0;
    background: var(--highlightLight);
    font-size: 1.1em;
}
h3.list-header {
    text-align: left;
    padding: 0.3rem 0.75rem;
}

#select-and-filter label {
    font-size: 0.85rem;
}
#select-and-filter .include-select.input {
    padding: 0.5em;
}

span.filter-counter, h3.filter-counter {
    position: absolute;
    right: 1rem;
    font-weight: normal;
    font-size: 0.95rem;
}

/* Filter reset button inside counter */
.filter-reset-btn {
    margin-left: 0.5em;
    padding: 0.15em 0.5em;
    font-size: 0.85em;
    font-weight: bold;
    background-color: var(--highlight);
    color: var(--white);
    border: 1px solid var(--highlight);
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-reset-btn:hover {
    background-color: var(--highlightDark);
    border-color: var(--whiteYellow);
}

.filter-reset-btn:active {
    transform: scale(0.95);
}

.select-flex-container {
    display: flex;
    flex-direction: row;
    gap: 0.75em;
    padding: 0.75em 0.75em 0.25em 0.75em;
    box-sizing: border-box;
}
.flex-column {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.select-flex-container .flex-item {
    background-color: var(--background-75);
    padding: 0;
    box-sizing: border-box;
    border: solid 1px var(--baseLight);
    box-shadow: 0px 0px 4px 0 var(--black-20);
    margin-bottom: 1em;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;

}
.select-flex-container .flex-item:last-child  {
    margin-bottom: 0.5em;
}
.select-flex-container .flex-item.nobox {
    background-color: transparent;
    border: none;
    box-shadow: none;
}
.select-flex-container .flex-item.nobox p {
    font-size: 0.95rem;
    margin-top: 0;
    margin-bottom: 0.25rem;
}

.select-flex-container h3 {
    width: calc(100% - 1em);
    background-color: var(--baseDark);
    color: var(--whiteYellow);
    font-size: 1rem;
    margin: 0;
    padding: 0.35em 0.5em;
    font-weight: var(--font-semi-bold);
    position: relative;
}

.filter-note {
    padding: 0 0 0.25rem 0;
    margin-top: -0.5rem;
    margin-bottom: 0;
    font-size: 0.95rem;
}

.select-flex-container h3::after, .select-nav.collapsible a::after, .map-item-container h3::after {
    content: '';
    position: absolute;
    right: 0.5em;
    top: 50%;
    transform: translateY(-50%);
    width: 1em;
    height: 1em;
    background: var(--svgUrlArrow) no-repeat center center;
    transform: rotate(90deg) translateX(-8px) translateY(-2px);
}
.map-item-container h3::after {
    top: 1rem;
}

.toggle-dataset-details {
    width: 1em;
    height: 1em;
    padding-left: 0.33em;
    background: var(--svgUrlArrow) no-repeat center center;
    transform: rotate(90deg) translateX(0px) translateY(0px);
    cursor: pointer;
}
.toggle-dataset-details.collapsed {
    transform: rotate(0deg) translateX(0px) translateY(0px);
}

#toggleIntro {
    position: absolute;
    bottom: -0.5rem;
    right: 0.5rem;
    font-size: 90%;
    text-align: right;
    margin: 1rem 0.25rem;
}

.select-flex-container h3.non-collapsible::after {
    content: '';
    background: none;
    transform: none;
    width: 0;
    height: 0;
}
.select-flex-container h3:hover, .map-item-container h3:hover {
    cursor: pointer;
    color: var(--highlightLight);
    transition: color 0.25s ease;
}
.map-item-container h3:hover {
    color: var(--grey80);
}
.select-flex-container h3:hover::after, .select-nav.collapsible a:hover::after, .map-item-container h3:hover::after {
    color: var(--highlightLight);
    transition: color 0.25s ease, transform 0.25s ease;
    background: var(--svgUrlArrowHighlightLight) no-repeat center center;
}
.select-flex-container h3.collapsed::after, .select-nav.collapsible a.collapsed::after, .map-item-container h3.collapsed::after {
    transform: rotate(180deg) translateX(-1px) translateY(8px);
}
.select-flex-container h3:hover.collapsed::after, .select-nav.collapsible a:hover.collapsed::after, .map-item-container h3:hover.collapsed::after {
    background: var(--svgUrlArrowHighlightLight) no-repeat center center;
}

#modelled-data .select-nav a {
    background: var(--baseDark);
    color: var(--whiteYellow);
    font-weight: var(--font-semi-bold);
    border-bottom: none;
}
#modelled-data .select-nav a:hover {
    color: var(--highlightLight);
    transition: color 0.25s ease;
}

.map-item-container .collapsed {
    margin: 0;
}
.select-full-container {
    margin: 0.75em
}
.select-full-container h3 {
    margin: 0.75em 0 0.5em 0;
    line-height: 1.25;
    font-size: 0.95em;
    font-weight: bold;
}
.select-full-container p {
    margin: 0 0 0.5em 0;
    line-height: 1.25;
}
.select-content {
    padding: 0.5em;
    overflow-wrap: anywhere;
}
.map-item-container .select-content {
    padding: 0;
}
p.smallhint {
    font-size: 0.6em;
    color: var(--grey80);
    line-height: 1.15;
    margin: 0.25em 0 0 0;
}
p.smallhint.clear {
    margin-top: 0.25em;
    text-align: right;
    font-weight: bold;
}
p.smallhint.clear a, p.clear-all a {
    color: var(--highlight);
}
p.smallhint.clear a:hover, p.clear-all a:hover {
    text-decoration: none;
    color: var(--highlightLight);
}
p.clear-all {
    text-align: right;
    font-weight: bold;
}
.hint {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
    font-style: italic;
}

.flex2col-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    align-content: stretch;
    height: 100%;
    padding: 0;
    gap: 1rem;
}

/* Data tables - shared styles for all PT/ALT tables */
.data-table {
    width: 100%;
    font-size: 1rem;
}
.data-table, .data-table th, .data-table td {
    /*border: 1px solid var(--white-50);*/
    border: none;
    border-collapse: collapse;
}

.data-table th {
    position: relative;
    text-align: left;
    padding: 0.5em 1.25em 0.5em 0.5em;
    cursor: default;
}
.data-table .header-row th {
    cursor: pointer;
}
.data-table thead {
    background-color: var(--baseDark);
    color: var(--whiteYellow);
}
.data-table thead :hover {
    background-color: var(--grey555);
    transition: all 0.25s ease;
}
.table-slider-container-wrapper {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}
.table-slider-container-wrapper:hover, .table-slider-container:hover {
    background-color: transparent !important;
}

.data-table thead :hover > th[data-type="string"]::after, .data-table thead :hover > th[data-type="number"]::after {
    content: var(--svgSortingBothHighlightLight);
    transition: all 0.25s ease;
}
.data-table td {
    text-align: left;
    padding: 0.25em 0.5em;
    font-style: normal;
}
tr:nth-child(even) {
    background-color: var(--highlightLight-25);
    transition: all 0.25s ease;
}
tr:nth-child(odd) {
    background-color: transparent;
    transition: all 0.25s ease;
}
/* Manual classes for filtered tables - these override nth-child */
tr.manual-even {
    background-color: var(--highlightLight-25) !important;
    transition: all 0.25s ease;
}
tr.manual-odd {
    background-color: transparent !important;
    transition: all 0.25s ease;
}
tr:nth-child(even):not(.header-row):hover, tr:nth-child(odd):not(.header-row):hover {
    background-color: var(--highlightLight-50);
    transition: all 0.25s ease;
}
tr.manual-even:not(.header-row):hover, tr.manual-odd:not(.header-row):hover {
    background-color: var(--highlightLight-50) !important;
    transition: all 0.25s ease;
}

/* Disable hover effect for empty table messages */
tr.no-hover:hover {
    background-color: transparent !important;
}

/* datasets table */
table.datasets-table tr {
    background-color: var(--highlightLight-25) !important;
}
table.datasets-table tr:hover {
    background-color: var(--highlightLight-50) !important;
}
table.datasets-table tr.details {
    background-color: var(--greyDDD) !important;
}

/* details table (additional & stats) */
.details table.info-table {
    background-color: transparent;
    font-size: 0.9rem;
}
.details table.info-table tr {
    background-color: var(--highlightLight-25);
}
.details table.info-table td {
    padding: 0.33em ;
}

.details .select-content {
    padding: 0;
}

.datasets-table .outerbox {
    border: solid 1px var(--greyBBB);
    background-color: var(--greyEEE);
    margin: 0.25em 0.4em;
    padding: 1em 1em 0.5em 1em
}
.datasets-table .innerbox {
    border: solid 1px var(--greyBBB);
    box-shadow: 0px 0px 4px 0 var(--black-20);
    background-color: white;

    padding: 1em;
}

td.text-align-right {
    text-align: right !important;
}
td.text-align-center {
    text-align: center !important;
}
#data-table-wrapper {
    overflow-x: auto;
}
.data-table th[data-type="string"]::after, .data-table th[data-type="number"]::after {
    content: var(--svgSortingBothHighlight);
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
}
.data-table th.sorted-asc::after {
    content: var(--svgSortingUpHighlight);
}
.data-table th.sorted-desc::after {
    content: var(--svgSortingDownHighlight);
}
.data-table th[data-type="none"]::after {
    content: "";
}
.data-table th.sorted-desc, .data-table th.sorted-asc {
    font-style: italic;
}
table.info-table {
    width: 100%;
    border: solid 1px var(--greyBBB);
    font-size: 1rem;
}
table.info-table td {
    padding: 0.2em 0.33em;
    font-style: normal;
}
table td:first-child, table.datasets-table .info-table td:first-child{
    font-weight: var(--font-semi-bold);
}
table.datasets-table td:first-child {
    font-weight: normal;
}

table td.right {
    text-align: right;
}

table.info-table.columnstyle th {
    text-align: left;
    padding: 0.33em 0.33em;
    background-color: var(--highlightLight-50);
}

table.info-table.columnstyle th:hover {
    background-color: var(--highlightLight-50) !important;
}

table.info-table.columnstyle tr:nth-child(odd) {
    background-color: var(--highlightLight-25);
}
table.info-table.columnstyle tr:nth-child(even) {
    background-color: transparent;
}
table.info-table.columnstyle tr:nth-child(even):hover, table.info-table.columnstyle tr:nth-child(odd):hover  {
    background-color: var(--highlightLight-50);
}
table.info-table.columnstyle td:first-child{
    font-weight: normal;
}

table.datasets-table {
    width: 100%;
    border: solid 1px var(--greyCCC);
    font-size: 1rem;
}
table.datasets-table th {
    padding: 0.5em 0.33em;
    background-color:  var(--baseDark);
    color: var(--whiteYellow);
    font-weight: var(--font-semi-bold);
    text-align: left;
}
.datasets-table tr:not(:first-child) th {
    padding: 0.33em 0.75em;
    background-color: var(--greyCCC);
    color: var(--text);
}

td.download-table-heading  {
    padding: 0.33em 0.75em;
    background-color: var(--greyCCC);
    color: var(--text);
    column-span: all;
}

.download-table-wrapper {
    display: block;
    max-height: 50vh;
    overflow-y: scroll;
    border: 2px solid var(--whiteYellow);
    box-shadow: 0px 0px 3px 0 var(--black-10);
}
.download-table-wrapper thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    box-shadow: 0px 0px 4px 0 var(--black-20);
    background-color: var(--baseDark);
}

/* Filter row styling - sticky below header */
.download-table-wrapper thead .filter-row th {
    top: 2.5em; /* Position below header row */
    padding: 0.2em 0.5em;
    font-weight: normal;
    box-shadow: 0px 2px 3px 0 var(--black-20);
    background-color: var(--grey777);
}

.download-table-wrapper thead .filter-row select.table-filter {
    width: 100%;
    font-size: 0.75em;
    border: 1px solid var(--greyCCC);
    border-radius: 3px;
    background-color: var(--white);
    cursor: pointer;
}

/* Text input filters for name columns */
.download-table-wrapper thead .filter-row input.table-text-filter {
    width: 100%;
    font-size: 0.75em;
    border: 1px solid var(--greyCCC);
    border-top: none;
    border-right: none;
    border-left: none;
    border-radius: 0;
    background-color: var(--white);
    padding: 0.1rem 0.3rem;
    box-sizing: border-box;
}

.download-table-wrapper thead .filter-row input.table-text-filter:focus {
    outline: none;
    border-color: var(--highlight);
}

.download-table-wrapper thead .filter-row input.table-text-filter::placeholder {
    color: var(--greyAAA);
    font-style: italic;
}
.filter-row, .filter-row:hover {
    background-color: var(--grey777) !important;
}

/* Compact table slider for elevation filter */
.table-slider-container {
    position: relative;
    width: 100%;
    min-width: 100px;
    height: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Custom background track */
.table-slider-track {
    position: absolute;
    width: 100%;
    height: 4px;
    background: var(--highlightLight);
    border-radius: 2px;
    top: 4px;
    left: 0;
    z-index: 1;
    pointer-events: none;
}

.table-slider-container input[type=range] {
    position: absolute;
    width: 100%;
    height: 4px;
    pointer-events: none;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    padding: 0;
    top: 6px;
    left: 0;
}

/* Hide the default track completely */
.table-slider-container input[type=range]::-webkit-slider-track {
    height: 4px;
    background: transparent;
    border: none;
}

.table-slider-container input[type=range]::-moz-range-track {
    height: 4px;
    background: transparent;
    border: none;
}

/* Style the thumbs with high z-index */
.table-slider-container input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--whiteGrey);
    border: 2px solid var(--highlight);
    cursor: pointer;
    pointer-events: all;
    margin-top: -3px;
}

.table-slider-container input[type=range]::-moz-range-thumb {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--whiteGrey);
    border: 2px solid var(--highlight);
    cursor: pointer;
    pointer-events: all;
}

/* Both sliders at same level, above the track */
.table-slider-container #table-elevation-min {
    z-index: 3;
}

.table-slider-container #table-elevation-max {
    z-index: 3;
}

/* When either slider is being dragged, bring it to front */
.table-slider-container #table-elevation-min:active,
.table-slider-container #table-elevation-min:focus {
    z-index: 4;
}

.table-slider-container #table-elevation-max:active,
.table-slider-container #table-elevation-max:focus {
    z-index: 4;
}

/* Compact OK button for elevation filter */
.table-filter-ok-btn {
    padding: 0.2rem 0.4rem;
    font-size: 0.7rem;
    background-color: var(--highlightDark);
    color: var(--greyCCC);
    border: 1px solid var(--greyCCC);
    border-radius: 3px;
    cursor: pointer;
    white-space: nowrap;
    min-width: 35px;
    font-weight: 600;
    transition: background-color 0.2s ease;
}
.table-filter-ok-btn:hover {
    background-color: var(--highlight);
    border-color: var(--highlightDark);
}

.table-slider-values {
    position: absolute;
    bottom: -6px;
    left: 0;
    right: 0;
    font-size: 0.7rem;
    text-align: center;
    white-space: nowrap;
    color: var(--greyCCC);
    pointer-events: none;
}

#PT-datasets-table, #ALT-datasets-table {
    margin: 0;
}
#download-hint {
    padding: 0.5em 0.75em;
    background: var(--highlightLight-50);
    border: solid 1px var(--highlightLight-50);
    border-radius: 4px;
}

table.download {
    padding: 0.5rem;
}
table.download tbody {
    box-shadow: 0 0 3px 1px var(--black-10);
}
table.download th {
    padding: 0.5rem;
}
table.download th {
    background-color: var(--highlightLight-50);
}
table.download th:first-child {
    width: 25%;
}
table.download td {
    padding: 0.66rem 0.5rem;
}
table a.api {
    padding: 0.125rem 0.5rem;
    font-size: 1rem;
    font-weight: var(--font-semi-bold)
}

.options-filters h4 {
    margin: 1em 0 0.5em 0;
}
.two-containers {
  display: flex;
  gap: 1rem;
  align-items: stretch;
}
.first-container {
  max-width: 350px;
  flex: 0 0 auto;
  width: 100%;
  padding-bottom: 0.5em;
}
.second-container {
  flex: 1 1 auto;
  padding-bottom: 0.5em;
  border-left: solid 4px var(--highlightLight-50);
  padding-left: 1em;
}

.three-containers {
  display: flex;
  gap: 1rem;
  align-items: stretch;
}
.three-containers .first-container,
.three-containers .second-container {
  flex: 0 0 22%;
  max-width: 22%;
  padding-bottom: 0.5em;
}
.three-containers .second-container {
  border-left: solid 4px var(--highlightLight-50);
  padding-left: 1em;
}
.three-containers .third-container {
  flex: 1 1 auto;
  max-width: 56%;
  padding-bottom: 0.5em;
  border-left: solid 4px var(--highlightLight-50);
  padding-left: 1em;
  box-sizing: border-box;
}
.three-containers.download {
  padding: 0 1em;
  margin-bottom: 1em;
  background-color: var(--background-75);
  border: solid 1px var(--baseLight);
  box-shadow: 0px 0px 4px 0 var(--black-20);
}

button#download-button {
    padding: 0.66em 2.66em 0.66em 0.75em;
    margin: 0;
    background: var(--highlight);
    border: solid 2px var(--whiteYellow);
    box-shadow: 0px 0px 4px 0 var(--black-20);
    color: var(--white-75);
    font-family: var(--fontDefault);
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.25s ease;
    background-image: var(--svgDownloadButton);
    background-repeat: no-repeat;
    background-position-x: 94%;
    background-position-y: 9px;
    font-size: 1rem;
}
button#download-button:hover {
    background-color: var(--highlightLight);
}
button#download-button:disabled,
button#download-button.disabled {
    /* opacity: 0.5; pointer-events: none; */
    cursor: not-allowed;
    background-color: var(--baseLight);
}
button#download-button:disabled:hover,
button#download-button.disabled:hover {
    background-color: var(--baseLight);
}

table.datasets-table tr, table.datasets-table th, table.datasets-table td {
    border-collapse: collapse;
    border: none;
}
table.datasets-table {
    border-collapse: collapse;
    box-sizing: border-box;
    border: solid 1px var(--baseLight);
    box-shadow: 0px 0px 4px 0 var(--black-20);
    margin-bottom: 0.5rem;
}

table.datasets-table td {
    padding: 0.66em 0.33em;
    font-style: normal;
}
.download-table-wrapper table.datasets-table td {
    padding: 0.33em 0.33em;
}
.table-link {
    font-size: 1rem;
    margin-right: 0.5rem;
    white-space:nowrap;
}

.showme {
    display: block;
}
table.showme {
    display: table;
}
.hideme {
    display: none;
}

.showme-ease {
    opacity: 1;
    transition: opacity 0.33s ease;
}
.hideme-ease {
    opacity: 0;
    transition: opacity 0.33s ease;
}

.nonebold {
    font-weight: normal;
}

.error {
    color: var(--highlightRed);
    font-weight: var(--font-bold);
    font-size: 125%;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}
.reset-filters {
    margin: 0;
    padding: 0.25rem 0 0.5rem 0;
    line-height: 1;
    font-weight: var(--font-semi-bold);
    text-align: center;
}

.view-select-filter {
    margin: 0.25rem 0.125rem;
    padding: 2px 6px;
    background-color: var(--highlightLight-50);
    border: solid 1px var(--highlightLight);
    border-radius: 3px;
}
.singular-view-link {
    text-align: right;
    padding: 0 0.75rem 0 0;
    margin: 0;
    font-size: 0.9rem;
    font-weight: var(--font-medium);
}

.leaflet-popup-content-wrapper .active, .leaflet-popup-content-wrapper .inactive, .hover-hint .active, .hover-hint .inactive,
.data-table .active, .data-table .inactive,
#contentWrapperFullPage .active:not(#select-and-filter .active),
#contentWrapperFullPage .inactive:not(#select-and-filter .inactive),
#contentWrapperFullPage .inbetween:not(#select-and-filter .inbetween) {
    border-radius: 5px;
    padding: 1px 4px;
    margin-left: 0;
    font-weight: normal;
}
.leaflet-popup-content-wrapper .active, .leaflet-popup-content-wrapper .inactive {
    color: var(--text);
    margin-left: 5px !important;
}
.active {
    background-color: var(--yes);
}
.inactive {
    background-color: var(--no);
}
.deselected-variable {
    color: var(--greyBBB);
}
.inbetween {
    background-color: var(--inbetween);
}

.select-content input[type=text], .select-content input[type=date]  {
    border: solid 1px var(--baseLight);
    border-radius: 4px;
    padding: 0.25em 0.5em;
    font-family: Consolas, sans-serif, system-ui;
    color: var(--text);
    box-shadow: 0px 0 2px 0 var(--greyBBB);
}
.select-content input[type=text].placeholder {
    color: var(--greyBBB) !important;
}
.dateWithPlaceholder {
    color: var(--greyBBB) !important;
}

.date-range-aligned {
    display: grid;
    grid-template-columns: max-content auto;
    gap: 0.25em 0.75em;
    width: fit-content;
}
.date-range-aligned label {
    display: contents;
}
.date-range-aligned input {
    justify-self: start;
}

.slider-container {
    width: 100%;
    position: relative;
    margin: 10px auto;
}

.range-track {
    position: absolute;
    height: 5px;
    background: var(--highlightLight);
    width: 100%;
    border-radius: 3px;
}
.range-fill {
    position: absolute;
    height: 5px;
    background: var(--highlight);
    border-radius: 3px;
    z-index: 1;
}
input[type=range] {
    position: absolute;
    width: 100%;
    pointer-events: none;
    background: none;
    z-index: 2;
    top: 50%;
    transform: translateY(-50%);
    left: -2.5px;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: 12px;
    width: 12px;
    border-radius: 50%;
    background: var(--whiteGrey);
    border: 3px solid var(--highlight);
    cursor: pointer;
    pointer-events: all;
    position: relative;
    z-index: 3;
}
input[type=range]::-moz-range-thumb {
    height: 12px;
    width: 12px;
    border-radius: 50%;
    background: var(--whiteGrey);
    border: 3px solid var(--highlight);
    cursor: pointer;
    pointer-events: all;
}
.range-values  {
    margin-top: 1.75em;
}
.range-values p {
    margin-bottom: 0;
    font-size: 0.85rem;
}

.button-collection {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
    align-content: stretch;
    gap: 0.5em;
}
.button-collection button, .select-button {
    flex: 1 1 25%;
    padding: 0.25em 1em;
    background-color: white;
    border: solid 1px var(--baseLight);
    border-radius: 4px;
    box-shadow: 0px 0 2px 0 var(--greyBBB);
    color: var(--text);
}
.button-collection.flex20 button {
    flex: 1 1 20%;
}
.button-collection.flex33 button {
    flex: 1 1 33%;
}
.button-collection button.active:hover {
    background-color: var(--highlightLight);
    transition: background-color 0.25s ease;
}
.select-button.ok {
    padding: 0.25em 0.5em 0.25em 0.25em;
    margin-left: 0.66em;
}
.button-collection button:hover, .select-button:hover, .button-collection button.active  {
    cursor: pointer;
    background-color: var(--highlight);
    color: white;
    transition: background-color 0.25s ease, color 0.25s ease;
}
.button-collection .large {
    min-height: 3em;
    min-width: 6em;
}
.select-selectlist {
    padding: 0.5em;
    text-align: center;
}
.select-selectlist select {
    cursor: pointer;
    padding: 0.25em 1em;
    background-color: white;
    border: solid 1px var(--baseLight);
    border-radius: 4px;
    box-shadow: 0px 0 2px 0 var(--greyBBB);
    color: var(--text);
    text-align: center;
}
.select-selectlist.wide select {
    width: 85%;
}
/* use Javascript to highlight _selected_ element ... */
.select-selectlist.wide select:hover  {
    background: var(--highlight);
}

/* toggle-on-off-like input element, switch container */
.switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}
.select-full-container .switch {
    margin: 0.125em 0;
}
/* Hide the default checkbox */
.switch input {
    display: none;
}
/* The slider (the moving circle) */
.slider {
    position: relative;
    width: 34px;
    min-width: 34px;
    height: 17px;
    margin-right: 0.66em;
    background-color: var(--greyBBB);
    transition: 0.4s;
    border-radius: 17px;
    box-shadow: 0px 0px 4px 0 var(--black-20);
}
.slider:before {
    position: absolute;
    content: "";
    height: 13px;
    width: 13px;
    left: 3px;
    bottom: 2px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
    box-shadow: 0px 0px 4px 0 var(--black-20);
}
/* When the checkbox is checked, move the slider */
input:checked + .slider {
    background-color: var(--highlight);
}
input:checked + .slider:before {
    transform: translateX(15px); /* Move the circle */
}

.download select {
    background-color: var(--baseLight);
    border: none;
    padding: 0.33em 0.66em;
    border-radius: 5px;
    font-size: 95%;
}
.download option {
    background-color: var(--highlight) !important;
}


label.switch .lable-text {
    font-size: 1rem;
}
.map-settings label.switch .lable-text {
    font-size: 0.75rem;
}
.map-settings h4 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.25rem !important;
}
.map-settings h4:first-of-type {
    margin-top: 0 !important;
}

#PT-name, #PT-site-name, #ALT-name, #ALT-site-name {
    width: calc(100% - 34px - 1.66em);
}

ul#autocomplete-list {
    margin: 0;
}
.autocomplete-items {
    position: absolute;
    border: 1px solid #d4d4d4;
    border-bottom: none;
    border-top: none;
    z-index: 99;
    font-size: 0.9em;
    max-height: 250px;
    overflow-y: auto;
}
.autocomplete-items div {
    padding: 0.15em 0.5em;
    cursor: pointer;
    background-color: #fff;
    border-bottom: 1px solid var(--baseLight);
}
.autocomplete-items div:hover {
    background-color: var(--highlightLight);
}
.autocomplete-active {
    background-color: DodgerBlue !important;
    color: #ffffff;
}

/* ORCID icon for links with class "orcid-link" */
.orcid-link, .ror-link, .doi-link {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    margin-right: 0.05rem;
    margin-bottom: 2px;

    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: text-bottom;
    text-decoration: none;
}
.orcid-link {
    background-image: var(--svgOrcid);
}
.ror-link {
    background-image: var(--svgROR);
}
.doi-link {
    background-image: var(--svgDOI);

}
.download td:has(.doi-link) {
    text-align: center;
}
.download td .doi-link {
    width: 1.25rem;
    height: 1.25rem;
}

.orcid-link:hover, .ror-link:hover, .doi-link:hover {
    transform: scale(1.1);
}
.orcid-link, .ror-link, .doi-link {
    transition: transform 200ms ease-in-out;
}

.blink_me {
    animation: blinker 0.5s linear infinite;
  }

@keyframes blinker {
50% { opacity: 0; }
}

.spinner-loader {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: inline-block;
    border-top: 4px solid #FFF;
    border-right: 4px solid transparent;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}
.spinner-loader::after {
    content: '';
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 0;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border-left: 4px solid var(--highlight);
    border-bottom: 4px solid transparent;
    animation: rotation 0.5s linear infinite reverse;
}
@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.browse-through-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--highlightLight-50);
    padding: 0.3rem;
    margin: 0;
}
.browse-through-head #prev-entry::before,
.browse-through-head #prev-entry-pt::before,
.browse-through-head #prev-entry-alt::before {
    content: '';
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    background: var(--svgUrlArrow) no-repeat center center;
    background-size: contain;
    position: relative;
    rotate: -180deg;
    left: -2px;
}
.browse-through-head #next-entry::before,
.browse-through-head #next-entry-pt::before,
.browse-through-head #next-entry-alt::before {
    content: '';
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    background: var(--svgUrlArrow) no-repeat center center;
    background-size: contain;
    position: relative;
    left: 1px;
}
.browse-through-head button {
    background: var(--whiteGrey);
    border: solid 2px var(--greyBBB);
    cursor: pointer;
    font-size: 1.4em;
    line-height: 1;
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10rem;
    width: 2.5rem;
    height: 1.75rem;
}
.browse-through-head button:hover {
    background: var(--highlightLight-50);
    transition: all 0.3s ease;
}

#legendCCIimage img {
    background: var(--white-70);
    padding: 2px;
    border-radius: 4px;
}

.view-subdetails {
    font-size: 1rem;
    padding-top: 0.5em;
}

#slideshow-modal {
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
}
#slideshow-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
}
#slideshow-image {
    max-height: 95%;
    max-width: 95%;
    border: 5px solid var(--white-70);
    border-radius: 10px;
    z-index: 10000;
    position: relative;
}
#slideshow-close {
    position: absolute;
    top: 15px;
    right: 25px;
    font-size: 40px;
    color: var(--white-70);;
    cursor: pointer;
    z-index: 10000;
}
#slideshow-caption {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 10000;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 10px 15px;
    border-radius: 5px;
}
#slideshow-caption p {
    color: white;
    margin: 0;
}
#caption-name {
    font-weight: bold;
    margin: 0;
}
#caption-description {
    margin: 0;
}
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 16px;
    color: var(--white-70);
    font-size: 40px;
    border-radius: 50%;
    z-index: 10000;
    user-select: none;
    text-decoration: none;
}
.prev {
    left: 20px;
}
.next {
    right: 20px;
}
.next:hover, .prev:hover, #slideshow-close:hover{
    color: var(--highlight);
    text-decoration: none;
}
#slideshow-image:hover {
    border-color: var(--highlightLight);
}
#slideshow-images img {
    cursor: pointer;
    border: solid 1px var(--greyCCC);
    max-width: 150px;
}
.columns-2.equal #slideshow-images img {
    max-width: 100%;
}


#smallmap {
    width: 100%;
    height: 250px;
    border: solid 1px var(--greyCCC);
}
#smallmap.site {
    height: 500px;
}


.columns-2.equal {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}
.columns-2.equal .text-col {
    flex: 1;
}
.columns-2.equal .image-col {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    border: solid 1px var(--greyCCC);
    box-shadow: 0px 0px 4px 0 var(--black-20);
}
.columns-2.equal .image-col img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}
.columns-2.equal .preview-wrapper {
    position: relative;
    width: 100%;
    height: 100%; /* JS will sync this to text column */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
.columns-2.equal .preview-img.slideshow {
  position: absolute;
  inset: 0; /* stretch to wrapper */
  width: 100%;
  height: 100%;
  object-fit: cover;          /* fill box, crop excess */
  object-position: center;    /* center crop */
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  border: none !important;
  cursor: pointer;
}
.columns-2.equal .preview-img.slideshow.active {
  opacity: 1;
  pointer-events: auto;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin-left: 0 !important;
  cursor: pointer;
}
.columns-2.equal .preview-prev,
.columns-2.equal .preview-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    -webkit-text-stroke: 2px var(--white-75);
    border: none;
    font-size: 1.75rem;
    cursor: pointer;
    border-radius: 50%;
    z-index: 10;
}
.columns-2.equal .preview-prev:hover,
.columns-2.equal .preview-next:hover {
    -webkit-text-stroke: 2px var(--highlight);
    transition: all 0.3s ease;
}
.columns-2.equal .preview-prev {
    left: 0.25rem;
    padding: 50% 1rem 50% 0.25rem;
}
.columns-2.equal .preview-next {
    right: 0.25rem;
    padding: 50% 0.25rem 50% 1rem;
}



/* privacy page */
.siteWrapper--fullWidth ul {
    list-style-type: square;
    font-size: 0.95em;
    line-height: 1.5;
    color: var(--text);
}
#c26590 iframe {
    width: 50%;
    height: auto;
}
article.teaserBlueBorder {
    width: 100%;
    height: auto !important;
}

#menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.8rem;
    color: var(--whiteYellow);
    cursor: pointer;
    justify-self: end;
    margin-right: 1rem;
}
#header-nav .upload {
    display: none; /* hide Upload from nav */
}

/* notifications */
.notification {
    font-weight: var(--font-semi-bold);
    padding: 1rem 1.25rem 1rem 1.25rem;
    border: solid 2px var(--whiteYellow);
    box-shadow: 0px 0px 4px 0 var(--black-20);
    border-radius: 6px;
}
.notification.small {
    padding: 0.5rem 1rem 0.5rem 1rem;
}
.notification.is-danger {
    background-color: #f14668;
    color: #fff;
}
.notification.is-success {
    background-color:#48c78e;
    color:#fff;
}
.notification.is-neutral {
    background-color: var(--greyCCC);
    color: #000;
}
a button.notification {
    cursor: pointer;
}

.contact-role {
    font-weight: var(--font-semi-bold);
    line-height: 1.75rem;
    position: relative;
    top: -2px;
    font-size: 1.05rem;
}


/* abbr, mobile safe */
@media screen and (min-width: 0px) {
    abbr {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    abbr::after {
        content: '?';
        display: inline-block;
        width: 1em;
        height: 1em;
        border-radius: 50%;
        background: var(--grey-75);
        color: white;
        text-align: center;
        font-size: 95%;
        font-weight: normal;
        line-height: 1;
    }
    abbr[data-title] {
        position: relative;
        cursor: help;
    }
    abbr[data-title]:hover::before,
    abbr[data-title]:focus::before {
        content: attr(data-title);
        position: absolute;
        left: -135px;
        bottom: 17px;
        width: 270px;
        background-color: var(--highlight);
        color: var(--whiteGrey);
        border-radius: 2px;
        box-shadow: 1px 1px 5px 0 var(--black-40);
        font-size: 90%;
        line-height: 1.1em;
        font-weight: normal;
        padding: 5px 7px;
        z-index: 1000;
    }
}

@media (max-width: 1500px) {
    #mainFullPage #contentWrapperFullPage  {
        width: calc(100% - 3em);
    }
}

@media (max-width: 1100px) {
    #mainFullPage #contentWrapperFullPage  {
        width: 100%;
    }
    #header-nav ul li a  {
        padding: 0 0.5rem;
    }

    /* Responsive 3-column grid: reduce to 2 columns on tablets */
    #contentWrapperFullPage .text-box > div[style*="grid-template-columns: repeat(3, 1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* data selection */
    .select-flex-container {
        flex-direction: column;
        gap: 0.5em;
    }
    .flex-column {
        flex: none;
    }
    /* text */
    h1, h2, h3, h4 {
        line-height: 1.15;
    }
    h1 {
        font-size: 1.35em;
    }
    h2 {
        font-size: 1.15em;
    }
    h3 {
        font-size: 1em;
    }

    p {
        font-size: 0.9em;
        line-height: 1.3;
    }
    /* menu text */
    #header-nav ul li a {
        font-size: 1.25rem;
    }
    #footer-nav ul li a  {
        font-size: 1rem;
    }
}

@media (max-width: 925px) {
    #header-logo img#logo-gtnp {
        height: 40px;
    }
    #header-logo a#gtnp-platform {
        font-size: 90%;
        top: 28px;
        left: 115px;
    }
    #contentWrapperFullPage  {
        padding: 0.5em 1em;
    }
    #contentWrapperFullPage .columns-2 {
        grid-template-columns: 1fr;
    }

    /* Responsive 3-column grid for contacts */
    #contentWrapperFullPage .text-box > div[style*="grid-template-columns: repeat(3, 1fr)"] {
        grid-template-columns: 1fr !important;
    }

    .two-containers, .three-containers {
        flex-direction: column;
    }
    .first-container,
    .second-container,
    .third-container {
        width: 100%;
        max-width: none;
        border-left: none;
        padding-left: 0;
    }
    .second-container, .third-container {
        border-top: solid 4px var(--highlightLight-50);
    }
    .three-containers .first-container,
    .three-containers .second-container,
    .three-containers .third-container {
        width: 100%;
        max-width: 100%;
    }
    .three-containers .second-container,
    .three-containers .third-container {
        border-left: none;
        padding-left: 0;
    }
}

@media (max-width: 750px) {
    #footer-nav ul li a {
        font-size: 0.9rem;
        padding: 0 0.5rem;
    }
    #footer-nav, #footer-logos {
        padding: 0 0.25em;
    }
    footer {
        grid-template-columns: 0.001fr 3fr 1fr;
    }
    #footer-logos img {
        height: 35px;
    }

    /* burger menu */
    header {
        grid-template-columns: 1fr auto auto;
        grid-template-areas:
            "header-logo header-controls header-nav";
        position: relative;
    }

    #menu-toggle {
        display: block;
        position: relative;
        width: 30px;
        height: 22px;
        background: none;
        border: none;
        cursor: pointer;
    }

    /* Burger bars */
    #menu-toggle::before,
    #menu-toggle::after,
    #menu-toggle span {
        content: "";
        position: absolute;
        right: 4px;
        width: 100%;
        height: 3px;
        background: var(--whiteYellow);
        transition: all 0.3s ease;
        border-radius: 2px;
    }

    #menu-toggle span {
        top: 50%;
        transform: translateY(-50%);
    }
    #menu-toggle::before {
        top: 0;
    }
    #menu-toggle::after {
        bottom: 0;
    }

    /* Cross state */
    #menu-toggle.open span {
        opacity: 0;
    }
    #menu-toggle.open::before {
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
    }
    #menu-toggle.open::after {
        bottom: auto;
        top: 50%;
        transform: translateY(-50%) rotate(-45deg);
    }

    #header-controls {
        display: flex;
    }
    #header-controls #button-login { /* Upload in controls */
        display: none; /* hide on mobile */
    }
    #header-nav {
        display: none;
        position: absolute;
        top: var(--headerHeight);
        right: 0;
        background: var(--baseDarker);
        width: 170px;
        box-shadow: 0 5px 5px rgba(0,0,0,0.3);
    }

    #header-nav ul {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        padding: 0;
        margin: 0;
        list-style: none;
    }
    #header-nav li {
        width: 100%;
        text-align: right;
        margin: 0;
    }
    #header-nav li a,
    #header-nav li button {
        display: block;
        width: 100%;
        padding: 0.75rem 1rem;
        text-align: right;
    }
    #header-nav ul li a  {
        padding: 0;
    }
    #header-nav .upload { /* Upload inside nav */
        display: block;
    }
    #header-nav.show {
        display: block;
    }
    #contentWrapperFullPage table.download {
        padding: 0;
    }
    #mainFullPage #contentWrapperFullPage {
        padding: 0.5em 1em;
    }
    #contentWrapperFullPage table th, #contentWrapperFullPage table tr, #contentWrapperFullPage table td, #contentWrapperFullPage label, #contentWrapperFullPage .lable-text{
        font-size: 0.9rem;
    }
    #contentWrapperFullPage table.download td {
        padding: 0.33rem 0.25rem;
    }
}

@container contentContainer (max-width: 690px) {
    /* Only columns-2 that are NOT descendants of .summary */
    #contentSection .columns-2 {
        grid-template-columns: 1fr; /* stack by default */
    }
    /* Revert columns inside summary */
    #contentSection .summary .columns-2 {
        grid-template-columns: 1fr 1fr;
    }
    .summary-wide .columns-2 {
        gap: 0;
    }
    #contentWrapperSection {
        padding: 0.5em 1em;
    }
}
@container contentContainer (max-width: 460px) {
    .select-flex-container {
        flex-direction: column;
    }
}

@container contentContainer (max-width: 365px) {
    .columns-2 h2, .columns-1 h2 {
        padding: 0.2rem 0;
        font-size: 0.95em;
    }
    .select-flex-container h3 {
        font-size: 0.9rem;
    }
    .filter-note {
        font-size: 0.85rem;
    }
    .flex-item.summary h4 {
        padding: 0.1rem;
        font-size: 0.9rem;
    }
    .select-nav a {
        font-size: 0.9rem;
    }
    .select-flex-container .flex-item.nobox p {
        font-size: 0.85rem;
    }
    label.switch .lable-text {
        font-size: 0.85rem;
    }
    .columns-1 .summary-wide h4 {
        font-size: 0.9rem;
    }
    button.add-to-basket {
        padding: 0.25em 0.5em;
        margin: 0.25em;
        background-image: none;
    }
    button.add-to-basket.clear {
        background-image:  none;
    }
    .button-collection button, .select-button {
        padding: 0.125em 0.25em;
    }
    #contentWrapperSection {
        padding: 0.33rem;
    }
}

@container mapContainer (max-width: 540px) {
    #map-nav ul li a  {
        font-size: 1rem;
        letter-spacing: 0.1em;
    }
    .button-map-rect {
        width: 50px;
    }
    #button-map-settings {
        margin-right: 0.5em;
        margin-left: 0.25em;
    }
    #button-map-share {
        margin-left: 0.25em;
    }
}

@container mapContainer (max-width: 415px) {
    #map-nav ul li a {
        padding: 0 0.5rem;
    }
}

@container mapContainer (max-width: 372px) {
  #map-header {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "map-header-nav"
      "map-header-actions";
  }
  #map-header-actions {
    position: absolute;
    left: 0.5rem;
    top: 0.5rem;
    padding: 0.25rem;
    margin-right: 2rem;
    border: 2px solid rgba(0,0,0,0.2);
    background-color: var(--black-20);
    backdrop-filter: blur(10px);
    box-shadow: 0px 0px 4px 0 var(--black-20);
  }
}
@container mapContainer (max-width: 315px) {
    .button-map-rect {
        width: 36px;
    }
    .button-map-square {
        width: 25px;
        height: 25px;
    }
}
@container mapContainer (max-width: 265px) {
    .button-map-rect{
        width: 34px;
        margin: 0 0.125em;
    }
     #button-map-share {
        margin-left: 0;
    }
    .button-map-square {
        margin: 0;
    }
    #button-map-settings {
        margin-right: 0.125em;
    }
    .button-map-rect {
        font-size: 0.8em;
    }
}