/*
    Fonts
*/
/* @font-face {
    font-family: 'Fira Sans';
    src: url('https://145452286.fs1.hubspotusercontent-eu1.net/hubfs/145452286/assets/fonts/fira-sans-light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Fira Sans';
    src: url('https://145452286.fs1.hubspotusercontent-eu1.net/hubfs/145452286/assets/fonts/fira-sans-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Fira Code';
    src: url('https://145452286.fs1.hubspotusercontent-eu1.net/hubfs/145452286/assets/fonts/fira-code.woff2') format('woff2 supports variations'),
         url('https://145452286.fs1.hubspotusercontent-eu1.net/hubfs/145452286/assets/fonts/fira-code.woff2') format('woff2-variations');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
} */
:root {
	/* ----------------------------------------
		Spaces
	---------------------------------------- */
	--space-25: clamp(0.1875rem, 0.1563rem + 0.1042vw, 0.25rem);
	--space-50: clamp(0.375rem, 0.3125rem + 0.2083vw, 0.5rem);
	--space-75: clamp(0.5625rem, 0.4688rem + 0.3125vw, 0.75rem);
	--space-100: clamp(0.75rem, 0.625rem + 0.4167vw, 1rem);
	--space-150: clamp(1.125rem, 0.9375rem + 0.625vw, 1.5rem);
	--space-200: clamp(1.5rem, 1.25rem + 0.8333vw, 2rem);
	--space-250: clamp(1.875rem, 1.5625rem + 1.0417vw, 2.5rem);
	--space-300: clamp(2.25rem, 1.875rem + 1.25vw, 3rem);
	--space-400: clamp(3rem, 2.5rem + 1.6667vw, 4rem);
	--space-500: clamp(3.75rem, 3.125rem + 2.0833vw, 5rem);
	--space-600: clamp(4.5rem, 3.75rem + 2.5vw, 6rem);
	--space-800: clamp(6rem, 5rem + 3.3333vw, 8rem);
	--space-1000: clamp(7.5rem, 6.25rem + 4.1667vw, 10rem);

	/* ----------------------------------------
		Font sizes
	---------------------------------------- */

	--font-size-25: clamp(0.625rem, 0.5625rem + 0.2083vw, 0.75rem);
	--font-size-50: clamp(0.75rem, 0.6875rem + 0.2083vw, 0.875rem);
	--font-size-75: clamp(0.875rem, 0.8125rem + 0.2083vw, 1rem);
	--font-size-100: clamp(1rem, 0.9375rem + 0.2083vw, 1.125rem);
	--font-size-200: clamp(1.125rem, 1rem + 0.4167vw, 1.375rem);
	--font-size-300: clamp(1.25rem, 1rem + 0.8333vw, 1.75rem);
	--font-size-400: clamp(1.375rem, 1.0625rem + 1.0417vw, 2rem);
	--font-size-500: clamp(1.5rem, 1rem + 1.6667vw, 2.5rem);

	/* ----------------------------------------
		Border radius
	---------------------------------------- */
	--radius-50: 0.25em;
	--radius-75: 0.375em;
	--radius-100: 0.5em;
	--radius-360: 360px;

	/* ----------------------------------------
		Border width
	---------------------------------------- */
	--border-width-50: 1px;
	--border-width-75: 2px;
	--border-width-100: 4px;


	/* ----------------------------------------
		Colors
	---------------------------------------- */
	/*
		Grey
	*/
	--color-white: #FFFFFF;
	--color-grey-50: #F9F9F9;
	--color-grey-100: #F3F3F4;
	--color-grey-200: #E8E8E8;
	--color-grey-300: #DCDDDD;
	--color-grey-400: #9D9FA0;
	--color-grey-500: #707274;
	--color-grey-600: #404245;
	--color-grey-700: #313436;
	--color-grey-800: #212427;
	--color-grey-900: #121315;
	--color-black: #000000;

	--color-white-008: #ffffff14;
	--color-white-016: #ffffff28;
	--color-white-024: #FFFFFF3D;
	--color-white-032: #FFFFFF51;
	--color-white-040: #FFFFFF66;
	--color-white-048: #FFFFFF7A;
	--color-grey-200-008: #E8E8E814;
	--color-grey-200-016: #E8E8E828;
	--color-grey-200-024: #E8E8E83D;
	--color-grey-200-032: #E8E8E851;
	--color-grey-200-040: #E8E8E866;
	--color-grey-200-048: #E8E8E87A;
	--color-grey-400-48: #9D9FA07A;
	--color-grey-900-001: #12131502;
	--color-grey-900-004: #1213150A;
	--color-grey-900-008: #12131514;
	--color-grey-900-012: #1213151E;
	--color-grey-900-016: #12131528;
	--color-grey-900-024: #1213153D;
	--color-grey-900-032: #12131551;
	--color-grey-900-040: #12131566;
	--color-grey-900-048: #1213157A;
	--color-grey-900-080: #121315CC;

	/*
	   Artic blue
	*/
	--color-arctic-blue-50: #F5FAFF;
	--color-arctic-blue-100: #EBF5FF;
	--color-arctic-blue-200: #D9EAFF;
	--color-arctic-blue-300: #C8DEFF;
	--color-arctic-blue-400: #7A9EEA;
	--color-arctic-blue-500: #5971A6;
	--color-arctic-blue-600: #3A415D;
	--color-arctic-blue-700: #303246;
	--color-arctic-blue-800: #23222F;
	--color-arctic-blue-900: #141218;

	/*
		Aurora green
	*/
	--color-aurora-green-50: #F3FBF7;
	--color-aurora-green-100: #E7F8EF;
	--color-aurora-green-200: #CEF0DF;
	--color-aurora-green-300: #B4E8CF;
	--color-aurora-green-400: #00B581;
	--color-aurora-green-500: #0D825D;
	--color-aurora-green-600: #164B37;
	--color-aurora-green-700: #153A2C;
	--color-aurora-green-800: #12281F;
	--color-aurora-green-900: #0B1611;

	/*
		Elmo purple
	*/
	--color-elmo-purple-50: #FBF8FF;
	--color-elmo-purple-100: #F7F1FF;
	--color-elmo-purple-200: #EEE4FF;
	--color-elmo-purple-300: #E5D6FF;
	--color-elmo-purple-400: #A88CFF;
	--color-elmo-purple-500: #7964BE;
	--color-elmo-purple-600: #463B6B;
	--color-elmo-purple-700: #362E51;
	--color-elmo-purple-800: #252036;
	--color-elmo-purple-900: #15121B;

	--color-elmo-purple-400-48: #A88CFF7A;


	/*
		Power blue
	*/
	--color-power-blue-650: #0000FF;
	--color-power-blue-700: #0000B5;
	--color-power-blue-800: #000086;
	--color-power-blue-900: #000055;

	/*
		Blue
	*/
	--color-blue-50: #F9F9FB;
	--color-blue-100: #F3F3F7;
	--color-blue-200: #E6E8EF;
	--color-blue-300: #DADCE7;
	--color-blue-400: #969EB9;
	--color-blue-500: #637198;
	--color-blue-600: #244272;
	--color-blue-700: #003366;
	--color-blue-800: #0F2343;
	--color-blue-900: #0E1320;
	--color-blue-200-008: #E6E8EF14;
	--color-blue-200-016: #E6E8EF28;
	--color-blue-200-024: #E6E8EF3D;

	/*
		Orange
	*/
	--color-orange-50: #FFF8F2;
	--color-orange-100: #FFF1E6;
	--color-orange-200: #FFE3CC;
	--color-orange-300: #FFD5B2;
	--color-orange-400: #F08200;
	--color-orange-500: #AB5E0F;
	--color-orange-600: #623811;
	--color-orange-700: #4B2C10;
	--color-orange-800: #331F0D;
	--color-orange-900: #1C1106;

	--color-orange-200-008: #FFE3CC14;
	--color-orange-200-016: #FFE3CC28;
	--color-orange-200-024: #FFE3CC3D;
	--color-orange-400-004: #F082000A;
	--color-orange-400-008: #F0820014;
	--color-orange-400-016: #F0820028;
	--color-orange-400-024: #F082003D;

	/*
		System colors
	*/
	--color-system-red-100: #FFDAD5;
	--color-system-red-200: #F9968B;
	--color-system-red-300: #D92B3A;
	--color-system-red-400: #7C1F2C;

	--color-system-green-100: #D1E7E0;
	--color-system-green-200: #7FBDA8;
	--color-system-green-300: #4A7B6C;
	--color-system-green-400: #2D473F;

	--color-system-yellow-100: #FADFB2;
	--color-system-yellow-200: #DBA917;
	--color-system-yellow-300: #936B1C;
	--color-system-yellow-400: #583D17;

	/* ----------------------------------------
		Layout
	---------------------------------------- */
	--layout-size-small: 720px;
	--layout-size-medium: 920px;
	--layout-size-large: 1200px;
	--layout-size-xlarge: 1512px;

	--layout-h-gap: var(--space-150);

	@media (min-width: 768px) {
		--layout-h-gap: var(--space-300);
	}

	--layout-v-gap: var(--space-300);
}
:root, [theme="light"] {
    --text-color-brand: var(--color-blue-700);
    --text-color-primary: var(--color-grey-900);
    --text-color-secondary: var(--color-grey-600);
    --text-color-tertiary: var(--color-grey-500);
    --text-color-on-color: var(--color-white);
    --text-color-inverse: var(--color-grey-900);

    --surface-color-100: var(--color-white);
    --surface-color-100-hovered: var(--color-grey-100);
    --surface-color-100-pressed: var(--color-white);
    --surface-color-200: var(--color-grey-100);
    --surface-color-200-hovered: var(--color-grey-200);
    --surface-color-200-pressed: var(--color-grey-100);
    --surface-color-300: var(--color-grey-200);
    --surface-color-300-hovered: var(--color-grey-300);
    --surface-color-300-pressed: var(--color-grey-200);
    --surface-color-400: var(--color-grey-400);
    --surface-color-brand-100: var(--color-grey-100);
    --surface-color-brand-200: var(--color-orange-400);
    --surface-color-brand-300: var(--color-grey-200);
    --surface-color-inverse: var(--color-grey-900);

    --surface-color-child: var(--surface-color-200);
    --surface-color-child-hovered: var(--surface-color-200-hovered);
    --surface-color-child-pressed: var(--surface-color-200-pressed);


    --surface-color-child-ext: var(--surface-color-200);
    --surface-color-child-ext-hovered: var(--surface-color-200-hovered);
    --surface-color-child-ext-pressed: var(--surface-color-200-pressed);
    --surface-color-child-alt-ext: var(--surface-color-100);

    &[surface="200"] {
            --surface-color-child-ext: var(--surface-color-100);
            --surface-color-child-ext-hovered: var(--surface-color-100-hovered);
            --surface-color-child-ext-pressed: var(--surface-color-100-pressed);
            --surface-color-child-alt-ext: var(--surface-color-200);
    }

    --border-color-primary: var(--color-grey-400);
    --border-color-secondary: var(--color-grey-300);
    --border-color-brand: var(--color-orange-400);
    --border-color-inverse: var(--color-grey-800);

    --button-color-text: var(--color-grey-900);
    --button-color-primary-fill: var(--color-orange-400-008);
    --button-color-primary-hovered: var(--color-orange-400-016);
    --button-color-primary-pressed: var(--color-orange-400-024);
    --button-color-secondary: var(--color-grey-900);
    --button-color-secondary-fill: transparent;
    --button-color-secondary-hovered: var(--color-grey-900-004);
    --button-color-secondary-pressed: var(--color-grey-900-008);
    --button-color-tertiary: var(--color-grey-900);
    --button-color-tertiary-fill: var(--color-grey-900-004);
    --button-color-tertiary-hovered: var(--color-grey-900-008);
    --button-color-tertiary-pressed: var(--color-grey-900-012);
    --button-color-tertiary-activated: var(--color-grey-900-008);
    --button-color-tertiary-activated-hovered: var(--color-grey-900-012);
    --button-color-tertiary-activated-pressed: var(--color-grey-900-016);
    --button-color-ghost: var(--color-grey-900);
    --button-color-ghost-hovered: var(--color-grey-900-004);
    --button-color-ghost-pressed: var(--color-grey-900-008);
    --button-color-ghost-activated: var(--color-grey-900-004);
    --button-color-ghost-activated-hovered: var(--color-grey-900-008);
    --button-color-ghost-activated-pressed: var(--color-grey-900-012);

    --link-color-primary: var(--color-power-blue-650);
    --link-color-primary-hovered: var(--color-power-blue-700);
    --link-color-primary-pressed: var(--color-power-blue-800);
    --link-color-primary-activated: var(--color-power-blue-800);
    --link-color-secondary: var(--color-grey-900);
    --link-color-secondary-hovered: var(--color-grey-800);
    --link-color-secondary-pressed: var(--color-grey-700);
    --link-color-secondary-activated: var(--color-grey-700);

    --interactive-color-primary-text: var(--color-grey-900);
    --interactive-color-primary-fill: var(--color-grey-900-008);
    --interactive-color-primary-hovered: var(--color-grey-900-016);
    --interactive-color-primary-pressed: var(--color-grey-900-024);
    --interactive-color-secondary-text: var(--color-white);
    --interactive-color-secondary-fill: var(--color-grey-700);
    --interactive-color-secondary-hovered: var(--color-grey-800);
    --interactive-color-secondary-pressed: var(--color-grey-900);

    --key-color-blue-700: var(--color-blue-700);
    --key-color-blue-800: var(--color-blue-800);
    --key-color-blue-900: var(--color-blue-900);
    --key-color-power-blue-650: var(--color-power-blue-650);
    --key-color-orange-400: var(--color-orange-400);
    --key-color-orange-900: var(--color-orange-900);
    --key-color-arctic-blue-400: var(--color-arctic-blue-400);
    --key-color-aurora-green-500: var(--color-aurora-green-500);
    --key-color-aurora-green-400: var(--color-aurora-green-400);
    --key-color-aurora-green-300: var(--color-aurora-green-300);
    --key-color-elmo-purple-400: var(--color-elmo-purple-400);
    --key-color-elmo-purple-400-48: var(--color-elmo-purple-400-48);
    --key-color-grey-1000: var(--color-black);

    --shadows-color-100: var(--color-grey-400-48);

    --support-color-success: var(--color-aurora-green-500);
    --support-color-error: var(--color-system-red-300);
    --support-color-info: var(--color-arctic-blue-400);
    --support-color-focused: var(--color-elmo-purple-400);
    --support-color-disabled: var(--color-grey-500);
    --support-color-positive: var(--color-system-green-200);
    --support-color-negative: var(--color-system-red-200);

    --support-border-default: var(--border-width-50);
    --support-border-hover: var(--border-width-75);
    --support-border-focused: var(--border-width-100);

    --radius-radius-0: 0;
    --radius-radius-25: var(--radius-2);
    --radius-radius-50: var(--radius-4);
    --radius-radius-75: var(--radius-8);
    --radius-radius-100: var(--radius-16);
    --radius-radius-150: var(--radius-24);
    --radius-radius-300: var(--radius-48);
    --radius-radius-max: var(--radius-360);
}
[theme="dark"] {
    --text-color-brand: var(--color-white);
    --text-color-primary: var(--color-white);
    --text-color-secondary: var(--color-grey-300);
    --text-color-tertiary: var(--color-grey-400);
    --text-color-on-color: var(--color-white);
    --text-color-inverse: var(--color-grey-900);

    --surface-color-100: var(--color-grey-900);
    --surface-color-100-hovered: var(--color-black);
    --surface-color-100-pressed: var(--color-grey-900);
    --surface-color-200: var(--color-grey-800);
    --surface-color-200-hovered: var(--color-grey-700);
    --surface-color-200-pressed: var(--color-grey-800);
    --surface-color-300: var(--color-grey-700);
    --surface-color-300-hovered: var(--color-grey-600);
    --surface-color-300-pressed: var(--color-grey-700);
    --surface-color-400: var(--color-black);
    --surface-color-brand-100: var(--color-blue-900);
    --surface-color-brand-200: var(--color-orange-400);
    --surface-color-brand-300: var(--color-orange-900);
    --surface-color-inverse: var(--color-white);

    /* --surface-color-child: var(--surface-color-200);
    --surface-color-child-hovered: var(--surface-color-200-hovered);
    --surface-color-child-pressed: var(--surface-color-200-pressed); */

    --border-color-primary: var(--color-grey-600);
    --border-color-secondary: var(--color-grey-700);
    --border-color-brand: var(--color-orange-400);
    --border-color-inverse: var(--color-grey-200);

    --button-color-text: var(--color-white);
    --button-color-primary-fill: var(--color-orange-400-008);
    --button-color-primary-hovered: var(--color-orange-400-016);
    --button-color-primary-pressed: var(--color-orange-400-024);
    --button-color-secondary: var(--color-orange-50);
    --button-color-secondary-fill: transparent;
    --button-color-secondary-hovered: var(--color-orange-200-008);
    --button-color-secondary-pressed: var(--color-orange-200-016);
    --button-color-tertiary: var(--color-white);
    --button-color-tertiary-fill: var(--color-white-008);
    --button-color-tertiary-hovered: var(--color-white-016);
    --button-color-tertiary-pressed: var(--color-white-024);
    --button-color-tertiary-activated: var(--color-white-016);
    --button-color-tertiary-activated-hovered: var(--color-white-024);
    --button-color-tertiary-activated-pressed: var(--color-white-032);
    --button-color-ghost: var(--color-white);
    --button-color-ghost-hovered: var(--color-white-008);
    --button-color-ghost-pressed: var(--color-white-016);
    --button-color-ghost-activated: var(--color-white-008);
    --button-color-ghost-activated-hovered: var(--color-white-016);
    --button-color-ghost-activated-pressed: var(--color-white-024);

    --link-color-primary: var(--color-grey-200);
    --link-color-primary-hovered: var(--color-grey-100);
    --link-color-primary-pressed: var(--color-grey-200);
    --link-color-primary-activated: var(--color-grey-50);
    --link-color-secondary: var(--color-grey-300);
    --link-color-secondary-hovered: var(--color-white);
    --link-color-secondary-pressed: var(--color-grey-300);
    --link-color-secondary-activated: var(--color-grey-50);

    --interactive-color-primary-text: var(--color-white);
    --interactive-color-primary-fill: var(--color-white-008);
    --interactive-color-primary-hovered: var(--color-white-016);
    --interactive-color-primary-pressed: var(--color-white-024);
    --interactive-color-secondary-text: var(--color-grey-900);
    --interactive-color-secondary-fill: var(--color-white);
    --interactive-color-secondary-hovered: var(--color-grey-100);
    --interactive-color-secondary-pressed: var(--color-grey-200);

    --key-color-blue-700: var(--color-blue-700);
    --key-color-blue-800: var(--color-blue-800);
    --key-color-blue-900: var(--color-blue-900);
    --key-color-power-blue-650: var(--color-power-blue-650);
    --key-color-orange-400: var(--color-orange-400);
    --key-color-orange-900: var(--color-orange-900);
    --key-color-arctic-blue-400: var(--color-arctic-blue-400);
    --key-color-aurora-green-500: var(--color-aurora-green-500);
    --key-color-aurora-green-400: var(--color-aurora-green-400);
    --key-color-aurora-green-300: var(--color-aurora-green-300);
    --key-color-elmo-purple-400: var(--color-elmo-purple-400);
    --key-color-elmo-purple-400-48: var(--color-elmo-purple-400-48);
    --key-color-grey-1000: var(--color-black);

    --shadows-color-100: var(--color-grey-900-048);

    --support-color-success: var(--color-aurora-green-400);
    --support-color-error: var(--color-system-red-200);
    --support-color-info: var(--color-arctic-blue-400);
    --support-color-focused: var(--color-elmo-purple-400);
    --support-color-disabled: var(--color-grey-600);

    &[surface="100"] {
        [surface="child"] {
            --surface-color-child: var(--surface-color-200);
            --surface-color-child-hovered: var(--surface-color-200-hovered);
            --surface-color-child-pressed: var(--surface-color-200-pressed);
        }
    }

    &[surface="200"] {
        [surface="child"] {
            --surface-color-child: var(--surface-color-100);
            --surface-color-child-hovered: var(--surface-color-100-hovered);
            --surface-color-child-pressed: var(--surface-color-100-pressed);
            --surface-color-child-alt-ext: var(--surface-color-200);
        }
    }

    --surface-color-child-ext: var(--surface-color-200);
    --surface-color-child-ext-hovered: var(--surface-color-200-hovered);
    --surface-color-child-ext-pressed: var(--surface-color-200-pressed);
    --surface-color-child-alt-ext: var(--surface-color-100);

    &[surface="200"] {
            --surface-color-child-ext: var(--surface-color-100);
            --surface-color-child-ext-hovered: var(--surface-color-100-hovered);
            --surface-color-child-ext-pressed: var(--surface-color-100-pressed);
            --surface-color-child-alt-ext: var(--surface-color-200);
    }

}
/* Box sizing rules */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Prevent font size inflation */
html {
	font-family: "Fira Sans", Arial, sans-serif;
	-moz-text-size-adjust: none;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
    -webkit-font-smoothing: antialiased;  /* For WebKit browsers */
    -moz-osx-font-smoothing: grayscale;   /* For macOS Firefox */
    text-rendering: optimizeLegibility;   /* Enhances kerning & ligatures */
    font-variant-ligatures: common-ligatures;  /* Better typographic control */
	scroll-behavior: smooth;
	/* scroll-padding-top: 180px; */
	background: var(--color-white);
	margin: 0;

	@media (prefers-reduced-motion: reduce) {
		scroll-behavior: auto;
	}
}

body {
	margin: 0;
}

/* Remove default margin in favour of better control in authored CSS */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
	margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
	list-style: none;
}

/* Set core body defaults */
body {
	min-height: 100vh;
	line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1,
h2,
h3,
h4,
button,
input,
label {
	line-height: 1.1;
}

/* Balance text wrapping on headings */
h1,
h2,
h3,
h4 {
	text-wrap: balance;
}

/* Make images easier to work with */
img,
picture {
	max-width: 100%;
	display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
	font-family: inherit;
	font-size: inherit;
}

button {
	color: inherit;
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
	min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
	scroll-margin-block: 5ex;
}
[surface] {
    background-color: var(--surface-color-100);
}

[surface="100"] {
    background-color: var(--surface-color-100);

    [surface="child"] {
        --surface-color-child: var(--surface-color-200);
        --surface-color-child-hovered: var(--surface-color-200-hovered);
        --surface-color-child-pressed: var(--surface-color-200-pressed);

        background-color: var(--surface-color-200);
    }
}

[surface="200"] {
    background-color: var(--surface-color-200);

    [surface="child"] {
        --surface-color-child: var(--surface-color-100);
        --surface-color-child-hovered: var(--surface-color-100-hovered);
        --surface-color-child-pressed: var(--surface-color-100-pressed);

        background-color: var(--surface-color-100);
    }
}

[surface="300"] {
    background-color: var(--surface-color-300);
}

[surface="400"] {
    background-color: var(--surface-color-400);
}

[surface="brand-100"] {
    background-color: var(--surface-color-brand-100);
}

[surface="brand-200"] {
    background-color: var(--surface-color-brand-200);
}

[surface="brand-300"] {
    background-color: var(--surface-color-brand-300);
}

[surface="brand-gradient"] {
    background: linear-gradient(180deg, var(--color-blue-900), var(--color-blue-800));
}
.biotage-row {
    display: grid;
    padding: var(--layout-v-gap) var(--layout-h-gap);

    &.no-spacing-top {
        padding-top: 0;
    }

    &.no-spacing-bottom {
        padding-bottom: 0;
    }

    & > * {
        display: grid;
    }
}

/* Size */

[size="small"] {
    width: 100%;
    max-width: var(--layout-size-small);
}

[size="medium"] {
    width: 100%;
    max-width: var(--layout-size-medium);
}

[size="large"] {
    width: 100%;
    max-width: var(--layout-size-large);
}

[size="xlarge"] {
    width: 100%;
    max-width: var(--layout-size-xlarge);
}

[size="wide"] {
    max-width: none;
    /* margin-right: calc(var(--layout-h-gap) * -1);
    margin-left: calc(var(--layout-h-gap) * -1); */
}

/* Alignments */

[alignment="left"] {
    justify-self: start;
}

[alignment="center"] {
    justify-self: center;
}

[alignment="right"] {
    justify-self: end;
}


.biotage-layout {
    display: grid;
    gap: var(--layout-v-gap);

    .layout__sidebar {
        position: sticky;
        top: var(--biotage-header-height);
        z-index: 100;
    }

    .layout__main {
        display: grid;
        gap: var(--layout-v-gap);
    }

    /** Standardisera namn så att det blir enklare att återanvända */
    @media (min-width: 1024px) {
        gap: 0 var(--layout-v-gap);

        &.biotage-layout--landing {
            grid-template-columns: 1fr min(50%, 680px);
            grid-template-areas: "main sidebar";
        }

        &.biotage-layout--sidebar-right {
            grid-template-columns: 1fr min(34%, 580px);
            grid-template-areas: "main sidebar";
        }

        &.biotage-layout--sidebar-left {
            grid-template-columns: 300px 1fr;
            grid-template-areas: "sidebar main";
        }

        .layout__sidebar {
            position: static;
        }

        .layout__sidebar > * {
            position: sticky;
            top: var(--biotage-header-height);
            z-index: 100;
        }

        .layout__sidebar.layout__sidebar-noblock > * {
            top: calc(var(--biotage-header-height) + var(--space-100));
        }

        .layout__main {
            display: grid;
            grid-template-columns: 1fr;
            gap: var(--layout-v-gap);
            grid-area: main;
        }

        .layout__sidebar {
            grid-area: sidebar;
        }
    }
}

[data-anchor-label] {
    scroll-margin-top: var(--space-1000);
}


/* [theme] {
    color: #000;

    &[surface=primary] {
        background: var(--color-white);
    }

    &[surface=secondary] {
        background-color: var(--color-grey-200);
        color: #000;
    }
}

[theme=dark] {

    &[surface=primary] {
        background-color: var(--color-arctic-blue-900);
        color: #fff;
    }

    &[surface=secondary] {
        background-color: var(--color-arctic-blue-800);
        color: #fff;
    }
} */
.screen-reader {
    border: 0;
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    font-size: 0;
    width: 1px;
    word-wrap: normal !important;
}
h1,h2,h3,h4,h5,h6,p,blockquote,span {
    margin: 0;
    padding: 0;
    color: var(--text-color-primary);
}

p {
    font-size: var(--font-size-100);
    font-weight: 300;
    line-height: 1.5;
}

.heading-01, h1 {
    font-size: var(--font-size-500);
    font-weight: 400;
    line-height: 1.1;
}

.heading-02, h2 {
    font-size: var(--font-size-300);
    font-weight: 400;
    line-height: 1.2;
}

.heading-03, h3 {
    font-size: var(--font-size-200);
    font-weight: 400;
    line-height: 1.2;
}

.heading-04, h4 {
    font-size: var(--font-size-100);
    font-weight: 400;
    line-height: 1.2;
}

.heading-05, h5,
.heading-06, h6 {
    font-size: var(--font-size-75);
    font-weight: 400;
    line-height: 1.2;
}

.heading--featured {
    display: flex;
    align-items: center;
    gap: var(--space-100);
}

.heading--featured:before {
    content: '';
    display: inline-block;
    width: 0.4em;
    height: 0.4em;
    background: var(--key-color-orange-400);
    border-radius: 50%;
}

.heading--featured-green:before {
    background: var(--key-color-aurora-green-400);
}

.heading--featured-purple:before {
    background: var(--key-color-elmo-purple-400);
}

.paragraph-200 {
    font-size: var(--font-size-200);
    font-weight: 300;
    line-height: 1.5;

    & > p {
        font-size: inherit;
    }
}

.paragraph-100 {
    font-size: var(--font-size-100);
    font-weight: 300;
    line-height: 1.5;

    & > p {
        font-size: inherit;
    }
}

.paragraph-75 {
    font-size: var(--font-size-75);
    font-weight: 300;
    line-height: 1.5;

    & > p {
        font-size: inherit;
    }
}

.label-100 {
    font-size: var(--font-size-100);
    font-weight: 400;
    line-height: 1.5;
}

.label-75 {
    font-size: var(--font-size-75);
    font-weight: 400;
    line-height: 1.5;
}

.label-50 {
    font-size: var(--font-size-50);
    font-weight: 400;
    line-height: 1.5;
}

.label-25 {
    font-size: var(--font-size-25);
    font-weight: 400;
    line-height: 1.5;
}

.label--secondary {
    font-family: "Fira Code", monospace;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.label--featured {
    display: flex;
    align-items: center;
    gap: var(--space-50);
}

.label--featured:before {
    content: '';
    display: inline-block;
    width: 0.4em;
    height: 0.4em;
    background: var(--key-color-orange-400);
    border-radius: 50%;
}

.label--featured-green:before {
    background: var(--key-color-aurora-green-400);
}

.quote-200 {
    font-size: var(--font-size-400);
    font-weight: 400;
    line-height: 1.25;
}

.quote-100 {
    font-size: var(--font-size-200);
    font-weight: 500;
    line-height: 1.25;
}

.color--brand {

}

.color--secondary {

}
.biotage-button,
button[data-hsfc-id=Button].hsfc-Button,
.mfn-sub-submit {
    display: inline-flex;
	position: relative;
	align-items: center;
	justify-content: center;
	gap: var(--space-75);
	width: fit-content;
	color: var(--button-color-text);
	background: var(--button-color-primary-fill);
	border: none;
    border: 1px solid var(--border-color-brand);
	padding: var(--space-75) var(--space-150);
	font-size: inherit;
	font-weight: 400;
	line-height: 1.3335;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	flex-shrink: 0;
    border-radius: var(--radius-50);

	@media (hover: hover) {
		&:hover {
			background-color: var(--button-color-primary-hovered);
		}
	}

	&:focus-visible {
		outline: var(--support-border-focused) solid var(--support-color-focused);
	}

	&:active {
		background-color: var(--button-color-primary-pressed);
	}

	svg {
		width: 1.5em;
		height: 1.5em;
		pointer-events: none;
	}

	&[disabled] {
		pointer-events: none;
		opacity: 0.3;
	}

	&:after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		min-width: 44px;
		min-height: 44px;
		height: 100%;
		width: 100%;
		transform: translate(-50%, -50%);
	}

    &.button--secondary {
        background: var(--button-color-secondary-fill);
        border: 1px solid var(--border-color-primary);

        @media (hover: hover) {
            &:hover {
                background-color: var(--button-color-secondary-hovered);
            }
        }

        &:active {
            background-color: var(--button-color-secondary-pressed);
        }
    }

    &.button--tertiary {
		background: var(--button-color-tertiary-fill);
        border: 1px solid var(--border-color-tertiary);

        @media (hover: hover) {
            &:hover {
                background-color: var(--button-color-tertiary-hovered);
            }
        }

        &:active {
            background-color: var(--button-color-tertiary-pressed);
        }
    }

	&.button--ghost {
		background: transparent;
		border: none;

        @media (hover: hover) {
            &:hover {
                background-color: var(--button-color-ghost-hovered);
            }
        }

        &:active {
            background-color: var(--button-color-ghost-pressed);
        }
    }

    &.button--loader {
        position: relative;
		overflow: hidden;
		transform: translateZ(0);
		user-select: none;

		&:after {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			z-index: -1;
			width: 100%;
			content: '';
			background: var(--button-primary-background-color-hover);
			transform: translate(-102%, 0);
		}

		&.button--secondary:after {
			background: var(--color-brand-100);
		}

		&[loading] {
			pointer-events: none;

			&::after {
				animation: progress 5000ms forwards;
			}
		}
    }

	&.button--small {
		font-size: var(--font-size-75);
		padding: var(--space-50) var(--space-100);
	}

	&.button--fill {
		width: 100%;
	}

	@media print {
		display: none;
	}
}

.hsfc-Renderer button[data-hsfc-id=Button].hsfc-Button {
	&:hover {
    	transform: translateY(0);
    	filter: none;
	}
}


@keyframes progress {
	0% {
		transform: translate(-100%, 0);
	}
	25% {
		transform: translate(-25%, 0);
	}
	100% {
		transform: translate(-10%, 0);
	}
}
a:not(.biotage-button, .no-style) {
	color: var(--link-color-primary);
	text-decoration: underline;
	text-decoration-thickness: 0.075em;
	text-underline-offset: 0.2em;
	word-break: break-word;
	cursor: pointer;
	position: relative;

	@media (hover: hover) {
		&:hover {
			text-decoration: underline;
			text-decoration-thickness: 0.125em;
			color: var(--link-color-primary-hovered);
		}
	}

	&:active {
		text-decoration-thickness: 0.075em;
		color: var(--link-color-primary-pressed);
	}

	&:after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		min-width: 44px;
		min-height: 44px;
		height: 100%;
		width: 100%;
		transform: translate(-50%, -50%);
	}

	&:focus-visible {
		outline: var(--support-border-focused) solid var(--support-color-focused);
		outline-offset: 0.5em;
		border-radius: 1rem;
		text-decoration: none;
	}

	&.link--secondary {
		color: var(--link-color-secondary);

		@media (hover: hover) {
			&:hover {
				color: var(--link-color-secondary-hovered);
			}
		}

		&:active {
			color: var(--link-color-secondary-pressed);
		}
	}

	&.link--expand {
		position: static;

		&:after {
			position: absolute;
			top: 0;
			right: 0;
			left: 0;
			bottom: 0;
			content: '';
		}
	}
}

.biotage-link {
    display: inline-block;
    color: var(--link-color-primary);
	text-decoration: underline;
	text-decoration-thickness: 0.075em;
	text-underline-offset: 0.2em;
    word-break: break-word;
	cursor: pointer;
	position: relative;

    @media (hover: hover) {
        &:hover {
			text-decoration: underline;
			text-decoration-thickness: 0.125em;
            color: var(--link-color-primary-hovered);
        }
    }

    &:active {
        text-decoration-thickness: 0.075em;
        color: var(--link-color-primary-pressed);
    }

    &:after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		min-width: 44px;
		min-height: 44px;
		height: 100%;
		width: 100%;
		transform: translate(-50%, -50%);
	}

    &:focus-visible {
		outline: var(--support-border-focused) solid var(--support-color-focused);
		outline-offset: 0.5em;
		border-radius: 1rem;
		text-decoration: none;
	}

    &.link--secondary {
        color: var(--link-color-secondary);

        @media (hover: hover) {
            &:hover {
                color: var(--link-color-secondary-hovered);
            }
        }

        &:active {
            color: var(--link-color-secondary-pressed);
        }
    }

    &.link--expand {
		position: static;

		&:after {
			position: absolute;
			top: 0;
			right: 0;
			left: 0;
			bottom: 0;
			content: '';
		}
	}

	&.link--no-underline {
		text-decoration: none;

		@media (hover: hover) {
			&:hover {
				color: var(--link-color-primary-hover);
				text-decoration: underline;
				text-decoration-thickness: 0.125em;
			}
		}

		&:active {
			text-decoration-thickness: 0.075em;
			color: var(--link-color-primary-active);
		}
	}

	&:has(svg) {
		display: flex;
		align-items: center;

		svg {
			width: 1.5em;
			height: 1.5em;
		}
	}
}
ul, ol {
    color: var(--text-color-primary);
}
.biotage-rte {
    color: var(--text-color-brand);
    max-width: var(--layout-size-small);
    word-break: break-word;

    * {
        margin-bottom: var(--space-50);
    }

    & > *:first-child {
        margin-top: 0;
    }

    h2 {
        &:not(:first-child) {
            margin-top: var(--space-300);
            margin-bottom: var(--space-50);
        }
    }

    h3 {
        &:not(:first-child) {
            margin-top: var(--space-300);
            margin-bottom: var(--space-50);
        }
    }

    h4 {
        &:not(:first-child) {
            margin-top: var(--space-300);
            margin-bottom: var(--space-50);
        }
    }

    h5 {
        &:not(:first-child) {
            margin-top: var(--space-300);
            margin-bottom: var(--space-50);
        }
    }

    /* Use the typography settings from p */
    & > span {
        font-size: var(--font-size-100);
        font-weight: 300;
        line-height: 1.5;
    }

    & > span,
    p {
        margin-top: var(--space-50);
        margin-bottom: var(--space-100);
    }

    & > span + & > span,
    p + p {
        margin-top: var(--space-100);
    }

    ul, ol {
        margin-top: var(--space-100);
        margin-left: 1.2rem;
    }

    li {
        font-size: var(--font-size-100);
        font-weight: 300;
        line-height: 1.5;
    }

    li + li {
        margin-top: var(--space-50);
    }

    a {
        display: inline;
    }

    *:last-child:not(img) {
        margin-bottom: 0;
    }

    img {
        margin-top: var(--space-150);
        margin-bottom: var(--space-150);
    }

    table {
        width: 100%!important;
        border-collapse: collapse;
        background: var(--surface-color-200)!important;
        padding-right: var(--space-150)!important;
        padding-left: var(--space-150)!important;
        border: none!important;


        border-collapse: separate!important;     /* keep rounded corners clean */
        border-spacing: 0!important;
        border-radius: 4px;
        overflow: hidden;


        tr {
            margin-bottom: 0!important;
        }

        td {
            border-top: none!important;
            border-right: none!important;
            border-left: none!important;
            border-bottom: 1px solid var(--border-color-secondary)!important;
            padding: var(--space-100) var(--space-75)!important;

            ul {
                padding-inline-start: 5px;
            }
        }

        tr:last-child td {
            border-bottom: none!important;
        }

        th, td {
            padding: var(--space-100);
            border: 1px solid var(--border-color);
        }

        th {
            font-weight: 600;
        }
    }
}
.biotage-searchInput, .mfn-toolbar > div {
    position: relative;
    display: inline-block;
    width: 100%;
    .biotage-form-searchInput, .mfn-search-input, .mfn-select {
        padding-right: 44px;
        border-radius: var(--radius-50);
        border: 1px solid var(--border-color-primary);
        background: var(--surface-color-100);
        font-size: var(--font-size-75);
        color: var(--text-color-primary);
        padding: 14px 44px 14px 14px;
        width: 100%;

        &:hover {
            border: 2px solid var(--surface-color-inverse);
            padding: 13px 43px 13px 13px;
        }

        &:focus, &:focus-visible {
            border: 4px solid var(--support-color-focused);
            padding: 11px 41px 11px 11px;
            box-shadow: none;
        }
    }
    a {
        position: absolute;
        top:0;
        right:0;
        width:44px;
        height:44px;
    }
    svg {
        position: absolute;
        height: 25px;
        width: 25px;
        right: 14px;
        top: 12px;
    }

    &.searchInput-secondary {
        input {
            border-radius: var(--radius-radius-max);
        }

    }
}

.biotage-searchWrapper-secondary {
    max-width:240px;
}

html .biotage-tag, .mfn-clear button, .mfn-tag {
    border: 0px solid var(--interactive-color-primary-fill);
    background: var(--interactive-color-primary-fill);
    border-radius: var(--radius-radius-max);
    padding: var(--space-25) var(--space-50);
    font-size: var(--font-size-25);
    font-weight: 400;
    line-height: 1.5;
    color: var(--interactive-color-primary-text);
    display: flex;
    gap: var(--space-25);
    align-items: center;
    text-decoration: none;

    svg {
        width: 14px;
        height: 14px;
    }


    &.tag--selectable {
    }

    &.tag--input {
    }

    &.tag--operation, &.mfn-clear-button {
        padding: var(--space-50) var(--space-75);
        background: var(--button-color-tertiary-fill);
        text-decoration: none;
        font-size: var(--font-size-50);

        &:hover{
            text-decoration: none;
            background: var(--interactive-color-primary-hovered);
        }
    }

    &:has(a) {
        &:hover {

    }
}

.biotage-tag[href]:hover {
    background: var(--interactive-color-primary-hovered);
    text-decoration: underline;
    color: var(--interactive-color-primary-text);
}

.biotage-tag[href]:active {
    background: var(--interactive-color-primary-pressed);
    text-decoration: underline;
    color: var(--interactive-color-primary-text);
}
.biotage-table {
    overflow-x: auto;
    max-width: 100%;
    text-align: left;

    table {
        width: 100%;
        border-collapse: collapse;
        background: none;
        color: var(--text-color-primary);

        th, td {
            color: var(--text-color-primary);
            padding: var(--space-150);
            border-bottom: 1px solid var(--color-grey-200);
            background: none;
        }
    }
}

.two-cols {
    display: grid;
    grid-template-columns: 480px 1fr;
    gap: var(--layout-h-gap);
}