:root {
	--border-radius-elements: 6px;
	--border-radius: 8px;

	--menu-width: 280px;
	--margin-size: 20px;

	--transition-speed: 0.3s;

	--font-size: 13px;
	--button-font-size: 13px;
	--label-font-size: 11px;
	--modal-footer-font-size: 11px;
	--header1-font-size: 19px;
	--header2-font-size: 17px;
	--header3-font-size: var(--header1-font-size);
	--header4-font-size: 11px;
	--header5-font-size: 9px;
	--input-font-size: var(--font-size);
	--input-font-size-small: var(--label-font-size);
}

@media (max-width: 992px) {
	:root {
		--input-font-size: 16px;
		--input-font-size-small: 16px;
	}
}

/* 2. Semantiske farve-roller (Light Mode er standard) */
:root {
	--color-blue: 0, 120, 255;
	--color-blue-hover: 0, 65, 220;

	--color-brown: 160, 130, 95;
	--color-brown-hover: 170, 140, 105;

	--color-cyan: 50, 175, 230;
	--color-cyan-hover: 100, 210, 255;

	--color-green: rgba(50, 200, 90, 1);
	--color-green-orange: rgba(50, 210, 90, 1);

	--color-indigo: 90, 85, 215;
	--color-indigo-hover: 95, 90, 230;

	--color-mint: 0, 200, 190;
	--color-mint-hover: 100, 230, 225;

	--color-orange: rgba(255, 150, 0, 1);
	--color-orange-hover: rgba(255, 160, 10, 1);

	--color-pink: rgba(255, 45, 85, 1);
	--color-pink-hover: rgba(255, 55, 95, 1);

	--color-purple: 175, 80, 220;
	--color-purple-hover: 190, 90, 240;

	--color-red: rgba(255, 60, 50, 1);
	--color-red-hover: rgba(215, 0, 20, 1);

	--color-teal: rgba(50, 175, 200, 1);
	--color-teal-hover: rgba(65, 200, 225, 1);

	--color-yellow: rgba(255, 205, 0, 1);
	--color-yellow-hover: rgba(255, 215, 10, 1);

	--menu-background: 250, 250, 250;
	--menu-a-hover-background: rgba(245, 245, 245, 1);
	--menu-overlay-background: rgba(5, 5, 5, 0.3);
	--text-on-menu: rgba(15, 15, 15, 1);

	--modal-overlay-background: rgba(5, 5, 5, 0.3);
	--modal-h4-background: rgba(245, 245, 245, 1);

	--page-background: rgba(250, 250, 250, 1);
	--panel-background: rgba(250, 250, 250, 1);
	--shadow-color: 15, 15, 15;

	--text-primary: rgba(15, 15, 15, 1);
	--text-on-input: rgba(15, 15, 15, 1);

	--accent-primary: rgba(50, 50, 50, 1);
	--accent-primary-hover: rgba(70, 70, 70, 1);
	--text-on-accent: rgba(250, 250, 250, 1);

	--border-color: rgba(220, 220, 220, 1);
	--border-focus-color: rgba(180, 180, 180, 1);

	--table-head-background: rgba(245, 245, 245, 1);
	--table-head-button-hover-background: rgba(220, 220, 220, 1);
	--table-body-hover-background: rgba(245, 245, 245, 1);
	--table-body-2n-background: rgba(255, 255, 255, 1);
	--table-body-button-hover-background: rgba(235, 235, 235, 1);

	--outline-color: rgba(var(--color-cyan), 0.7);

	--icon-fa-classic-solid-magnifying-glass-border-color: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path fill="rgba(220, 220, 220, 1)" d="M480 272C480 317.9 465.1 360.3 440 394.7L566.6 521.4C579.1 533.9 579.1 554.2 566.6 566.7C554.1 579.2 533.8 579.2 521.3 566.7L394.7 440C360.3 465.1 317.9 480 272 480C157.1 480 64 386.9 64 272C64 157.1 157.1 64 272 64C386.9 64 480 157.1 480 272zM272 416C351.5 416 416 351.5 416 272C416 192.5 351.5 128 272 128C192.5 128 128 192.5 128 272C128 351.5 192.5 416 272 416z"/></svg>');

	--icon-fa-classic-solid-magnifying-glass-border-focus-color: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path fill="rgba(180, 180, 180, 1)" d="M480 272C480 317.9 465.1 360.3 440 394.7L566.6 521.4C579.1 533.9 579.1 554.2 566.6 566.7C554.1 579.2 533.8 579.2 521.3 566.7L394.7 440C360.3 465.1 317.9 480 272 480C157.1 480 64 386.9 64 272C64 157.1 157.1 64 272 64C386.9 64 480 157.1 480 272zM272 416C351.5 416 416 351.5 416 272C416 192.5 351.5 128 272 128C192.5 128 128 192.5 128 272C128 351.5 192.5 416 272 416z"/></svg>');

	--icon-fa-classic-solid-ellipsis-vertical-border-color: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path fill="rgba(220, 220, 220, 1)" d="M320 208C289.1 208 264 182.9 264 152C264 121.1 289.1 96 320 96C350.9 96 376 121.1 376 152C376 182.9 350.9 208 320 208zM320 432C350.9 432 376 457.1 376 488C376 518.9 350.9 544 320 544C289.1 544 264 518.9 264 488C264 457.1 289.1 432 320 432zM376 320C376 350.9 350.9 376 320 376C289.1 376 264 350.9 264 320C264 289.1 289.1 264 320 264C350.9 264 376 289.1 376 320z"/></svg>');

	--icon-fa-classic-solid-square-text-primary: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path fill="rgba(15, 15, 15, 1)" d="M160 96L480 96C515.3 96 544 124.7 544 160L544 480C544 515.3 515.3 544 480 544L160 544C124.7 544 96 515.3 96 480L96 160C96 124.7 124.7 96 160 96z"/></svg>');

	--icon-fa-classic-solid-square-check-text-primary: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path fill="rgba(15, 15, 15, 1)" d="M480 96C515.3 96 544 124.7 544 160L544 480C544 515.3 515.3 544 480 544L160 544C124.7 544 96 515.3 96 480L96 160C96 124.7 124.7 96 160 96L480 96zM438 209.7C427.3 201.9 412.3 204.3 404.5 215L285.1 379.2L233 327.1C223.6 317.7 208.4 317.7 199.1 327.1C189.8 336.5 189.7 351.7 199.1 361L271.1 433C276.1 438 283 440.5 289.9 440C296.8 439.5 303.3 435.9 307.4 430.2L443.3 243.2C451.1 232.5 448.7 217.5 438 209.7z"/></svg>');

	--icon-fa-classic-solid-square-minus-text-primary: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path fill="rgba(15, 15, 15, 1)" d="M160 96C124.7 96 96 124.7 96 160L96 480C96 515.3 124.7 544 160 544L480 544C515.3 544 544 515.3 544 480L544 160C544 124.7 515.3 96 480 96L160 96zM232 296L408 296C421.3 296 432 306.7 432 320C432 333.3 421.3 344 408 344L232 344C218.7 344 208 333.3 208 320C208 306.7 218.7 296 232 296z"/></svg>');

	--icon-fa-classic-regular-square-text-primary: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path fill="rgba(15, 15, 15, 1)" d="M480 144C488.8 144 496 151.2 496 160L496 480C496 488.8 488.8 496 480 496L160 496C151.2 496 144 488.8 144 480L144 160C144 151.2 151.2 144 160 144L480 144zM160 96C124.7 96 96 124.7 96 160L96 480C96 515.3 124.7 544 160 544L480 544C515.3 544 544 515.3 544 480L544 160C544 124.7 515.3 96 480 96L160 96z"/></svg>');

	--icon-fa-classic-regular-square-check-text-primary: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path fill="rgba(15, 15, 15, 1)" d="M480 96C515.3 96 544 124.7 544 160L544 480C544 515.3 515.3 544 480 544L160 544C124.7 544 96 515.3 96 480L96 160C96 124.7 124.7 96 160 96L480 96zM160 144C151.2 144 144 151.2 144 160L144 480C144 488.8 151.2 496 160 496L480 496C488.8 496 496 488.8 496 480L496 160C496 151.2 488.8 144 480 144L160 144zM390.7 233.9C398.5 223.2 413.5 220.8 424.2 228.6C434.9 236.4 437.3 251.4 429.5 262.1L307.4 430.1C303.3 435.8 296.9 439.4 289.9 439.9C282.9 440.4 276 437.9 271.1 433L215.2 377.1C205.8 367.7 205.8 352.5 215.2 343.2C224.6 333.9 239.8 333.8 249.1 343.2L285.1 379.2L390.7 234z"/></svg>');

	--icon-fa-classic-regular-square-minus-text-primary: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path fill="rgba(15, 15, 15, 1)" d="M160 144C151.2 144 144 151.2 144 160L144 480C144 488.8 151.2 496 160 496L480 496C488.8 496 496 488.8 496 480L496 160C496 151.2 488.8 144 480 144L160 144zM96 160C96 124.7 124.7 96 160 96L480 96C515.3 96 544 124.7 544 160L544 480C544 515.3 515.3 544 480 544L160 544C124.7 544 96 515.3 96 480L96 160zM232 296L408 296C421.3 296 432 306.7 432 320C432 333.3 421.3 344 408 344L232 344C218.7 344 208 333.3 208 320C208 306.7 218.7 296 232 296z"/></svg>');

	--icon-fa-classic-solid-toggle-off-text-primary: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path fill="rgba(15, 15, 15, 1)" d="M416 192C486.7 192 544 249.3 544 320C544 390.7 486.7 448 416 448L224 448C153.3 448 96 390.7 96 320C96 249.3 153.3 192 224 192L416 192zM608 320C608 214 522 128 416 128L224 128C118 128 32 214 32 320C32 426 118 512 224 512L416 512C522 512 608 426 608 320zM224 400C268.2 400 304 364.2 304 320C304 275.8 268.2 240 224 240C179.8 240 144 275.8 144 320C144 364.2 179.8 400 224 400z"/></svg>');

	--icon-fa-classic-solid-toggle-on-text-primary: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path fill="rgba(15, 15, 15, 1)" d="M224 128C118 128 32 214 32 320C32 426 118 512 224 512L416 512C522 512 608 426 608 320C608 214 522 128 416 128L224 128zM416 224C469 224 512 267 512 320C512 373 469 416 416 416C363 416 320 373 320 320C320 267 363 224 416 224z"/></svg>');

	--icon-fa-classic-solid-ellipsis-vertical-border-focus-color: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path fill="rgba(180, 180, 180, 1)" d="M320 208C289.1 208 264 182.9 264 152C264 121.1 289.1 96 320 96C350.9 96 376 121.1 376 152C376 182.9 350.9 208 320 208zM320 432C350.9 432 376 457.1 376 488C376 518.9 350.9 544 320 544C289.1 544 264 518.9 264 488C264 457.1 289.1 432 320 432zM376 320C376 350.9 350.9 376 320 376C289.1 376 264 350.9 264 320C264 289.1 289.1 264 320 264C350.9 264 376 289.1 376 320z"/></svg>');

	--icon-fa-classic-solid-circle-check-green: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path fill="rgba(50, 200, 90, 1)" d="M320 576C178.6 576 64 461.4 64 320C64 178.6 178.6 64 320 64C461.4 64 576 178.6 576 320C576 461.4 461.4 576 320 576zM438 209.7C427.3 201.9 412.3 204.3 404.5 215L285.1 379.2L233 327.1C223.6 317.7 208.4 317.7 199.1 327.1C189.8 336.5 189.7 351.7 199.1 361L271.1 433C276.1 438 282.9 440.5 289.9 440C296.9 439.5 303.3 435.9 307.4 430.2L443.3 243.2C451.1 232.5 448.7 217.5 438 209.7z"/></svg>');

	--icon-fa-classic-solid-circle-exclamation-red: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path fill="rgba(255, 60, 50, 1)" d="M320 576C178.6 576 64 461.4 64 320C64 178.6 178.6 64 320 64C461.4 64 576 178.6 576 320C576 461.4 461.4 576 320 576zM320 384C302.3 384 288 398.3 288 416C288 433.7 302.3 448 320 448C337.7 448 352 433.7 352 416C352 398.3 337.7 384 320 384zM320 192C301.8 192 287.3 207.5 288.6 225.7L296 329.7C296.9 342.3 307.4 352 319.9 352C332.5 352 342.9 342.3 343.8 329.7L351.2 225.7C352.5 207.5 338.1 192 319.8 192z"/></svg>');

	--icon-fa-classic-solid-circle-up-green: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path fill="rgba(50, 200, 90, 1)" d="M320 576C461.4 576 576 461.4 576 320C576 178.6 461.4 64 320 64C178.6 64 64 178.6 64 320C64 461.4 178.6 576 320 576zM331.3 188.7L435.3 292.7C439.9 297.3 441.2 304.2 438.8 310.1C436.4 316 430.5 320 424 320L368 320L368 416C368 433.7 353.7 448 336 448L304 448C286.3 448 272 433.7 272 416L272 320L216 320C209.5 320 203.7 316.1 201.2 310.1C198.7 304.1 200.1 297.2 204.7 292.7L308.7 188.7C314.9 182.5 325.1 182.5 331.3 188.7z"/></svg>');

	--icon-fa-classic-solid-exclamation-red: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path fill="rgba(255, 60, 50, 1)" d="M320 496C342.1 496 360 513.9 360 536C360 558.1 342.1 576 320 576C297.9 576 280 558.1 280 536C280 513.9 297.9 496 320 496zM320 64C346.5 64 368 85.5 368 112C368 112.6 368 113.1 368 113.7L352 417.7C351.1 434.7 337 448 320 448C303 448 289 434.7 288 417.7L272 113.7C272 113.1 272 112.6 272 112C272 85.5 293.5 64 320 64z"/></svg>');

	--icon-fa-classic-solid-meta-text-on-accent: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path fill="rgba(250, 250, 250, 1)" d="M640 381.9C640 473.2 600.6 530.4 529.7 530.4C467.1 530.4 433.9 495.8 372.8 393.8L341.4 341.2C333.1 328.7 326.9 317 320.2 306.2C300.1 340 273.1 389.2 273.1 389.2C206.1 505.8 168.5 530.4 116.2 530.4C43.4 530.4 0 473.1 0 384.5C0 241.5 79.8 106.4 183.9 106.4C234.1 106.4 277.7 131.1 328.7 195.9C365.8 145.8 406.8 106.4 459.3 106.4C558.4 106.4 640 232.1 640 381.9zM287.4 256.2C244.5 194.1 216.5 175.7 183 175.7C121.1 175.7 69.2 281.8 69.2 385.7C69.2 434.2 87.7 461.4 118.8 461.4C149 461.4 167.8 442.4 222 357.6C222 357.6 246.7 318.5 287.4 256.2zM531.2 461.4C563.4 461.4 578.1 433.9 578.1 386.5C578.1 262.3 523.8 161.1 454.9 161.1C421.7 161.1 393.8 187 360 239.1C369.4 252.9 379.1 268.1 389.3 284.5L426.8 346.9C485.5 441 500.3 461.4 531.2 461.4z"/></svg>');
}

/* 3. Semantiske farve-roller for Dark Mode */
@media (prefers-color-scheme: dark) {
	:root {
		--color-blue: 10, 130, 255;
		--color-blue-hover: 66, 155, 255;

		--color-brown: rgba(125, 100, 70, 1);
		--color-brown-hover: rgba(180, 150, 105, 1);

		--color-cyan: 0, 115, 165;
		--color-cyan-hover: 110, 215, 255;

		--color-green: rgba(35, 140, 60, 1);
		--color-green-hover: rgba(50, 220, 90, 1);

		--color-indigo: rgba(55, 50, 165, 1);
		--color-indigo-hover: rgba(125, 120, 255, 1);

		--color-mint: rgba(10, 130, 125, 1);
		--color-mint-hover: rgba(100, 210, 205, 1);

		--color-orange: rgba(200, 50, 0, 1);
		--color-orange-hover: rgba(255, 180, 65, 1);

		--color-pink: rgba(210, 15, 70, 1);
		--color-pink-hover: rgba(255, 100, 130, 1);

		--color-purple: 135, 70, 170;
		--color-purple-hover: 220, 145, 255;

		--color-red: rgba(255, 70, 60, 1);
		--color-red-hover: rgba(255, 105, 100, 1);

		--color-teal: rgba(0, 130, 155, 1);
		--color-teal-hover: rgba(95, 230, 255, 1);

		--color-yellow: rgba(180, 80, 0, 1);
		--color-yellow-hover: rgba(255, 210, 40, 1);

		--menu-background: 15, 15, 15;
		--menu-a-hover-background: rgba(20, 20, 20, 1);
		--menu-overlay-background: rgba(5, 5, 5, 0.3);
		--text-on-menu: rgba(250, 250, 250, 1);

		--modal-overlay-background: rgba(5, 5, 5, 0.3);
		--modal-h4-background: rgba(20, 20, 20, 1);

		--page-background: rgba(15, 15, 15, 1);
		--panel-background: rgba(15, 15, 15, 1);
		--shadow-color: 250, 250, 250;

		--text-primary: rgba(250, 250, 250, 1);
		--text-on-input: rgba(250, 250, 250, 1);

		--accent-primary: rgba(215, 215, 215, 1);
		--accent-primary-hover: rgba(195, 195, 195, 1);
		--text-on-accent: rgba(15, 15, 15, 1);

		--border-color: rgba(45, 45, 45, 1);
		--border-focus-color: rgba(85, 85, 85, 1);

		--table-head-background: rgba(20, 20, 20, 1);
		--table-head-button-hover-background: rgba(45, 45, 45, 1);
		--table-body-hover-background: rgba(20, 20, 20, 1);
		--table-body-2n-background: rgba(10, 10, 10, 1);
		--table-body-button-hover-background: rgba(30, 30, 30, 1);

		--outline-color: rgba(var(--color-cyan), 0.7);

		--icon-fa-classic-solid-magnifying-glass-border-color: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path fill="rgba(45, 45, 45, 1)" d="M480 272C480 317.9 465.1 360.3 440 394.7L566.6 521.4C579.1 533.9 579.1 554.2 566.6 566.7C554.1 579.2 533.8 579.2 521.3 566.7L394.7 440C360.3 465.1 317.9 480 272 480C157.1 480 64 386.9 64 272C64 157.1 157.1 64 272 64C386.9 64 480 157.1 480 272zM272 416C351.5 416 416 351.5 416 272C416 192.5 351.5 128 272 128C192.5 128 128 192.5 128 272C128 351.5 192.5 416 272 416z"/></svg>');

		--icon-fa-classic-solid-magnifying-glass-border-focus-color: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path fill="rgba(85, 85, 85, 1)" d="M480 272C480 317.9 465.1 360.3 440 394.7L566.6 521.4C579.1 533.9 579.1 554.2 566.6 566.7C554.1 579.2 533.8 579.2 521.3 566.7L394.7 440C360.3 465.1 317.9 480 272 480C157.1 480 64 386.9 64 272C64 157.1 157.1 64 272 64C386.9 64 480 157.1 480 272zM272 416C351.5 416 416 351.5 416 272C416 192.5 351.5 128 272 128C192.5 128 128 192.5 128 272C128 351.5 192.5 416 272 416z"/></svg>');

		--icon-fa-classic-solid-ellipsis-vertical-border-color: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path fill="rgba(45, 45, 45, 1)" d="M320 208C289.1 208 264 182.9 264 152C264 121.1 289.1 96 320 96C350.9 96 376 121.1 376 152C376 182.9 350.9 208 320 208zM320 432C350.9 432 376 457.1 376 488C376 518.9 350.9 544 320 544C289.1 544 264 518.9 264 488C264 457.1 289.1 432 320 432zM376 320C376 350.9 350.9 376 320 376C289.1 376 264 350.9 264 320C264 289.1 289.1 264 320 264C350.9 264 376 289.1 376 320z"/></svg>');

		--icon-fa-classic-solid-square-text-primary: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path fill="rgba(250, 250, 250, 1)" d="M160 96L480 96C515.3 96 544 124.7 544 160L544 480C544 515.3 515.3 544 480 544L160 544C124.7 544 96 515.3 96 480L96 160C96 124.7 124.7 96 160 96z"/></svg>');

		--icon-fa-classic-solid-square-check-text-primary: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path fill="rgba(250, 250, 250, 1)" d="M480 96C515.3 96 544 124.7 544 160L544 480C544 515.3 515.3 544 480 544L160 544C124.7 544 96 515.3 96 480L96 160C96 124.7 124.7 96 160 96L480 96zM438 209.7C427.3 201.9 412.3 204.3 404.5 215L285.1 379.2L233 327.1C223.6 317.7 208.4 317.7 199.1 327.1C189.8 336.5 189.7 351.7 199.1 361L271.1 433C276.1 438 283 440.5 289.9 440C296.8 439.5 303.3 435.9 307.4 430.2L443.3 243.2C451.1 232.5 448.7 217.5 438 209.7z"/></svg>');

		--icon-fa-classic-solid-square-minus-text-primary: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path fill="rgba(250, 250, 250, 1)" d="M160 96C124.7 96 96 124.7 96 160L96 480C96 515.3 124.7 544 160 544L480 544C515.3 544 544 515.3 544 480L544 160C544 124.7 515.3 96 480 96L160 96zM232 296L408 296C421.3 296 432 306.7 432 320C432 333.3 421.3 344 408 344L232 344C218.7 344 208 333.3 208 320C208 306.7 218.7 296 232 296z"/></svg>');

		--icon-fa-classic-regular-square-text-primary: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path fill="rgba(250, 250, 250, 1)" d="M480 144C488.8 144 496 151.2 496 160L496 480C496 488.8 488.8 496 480 496L160 496C151.2 496 144 488.8 144 480L144 160C144 151.2 151.2 144 160 144L480 144zM160 96C124.7 96 96 124.7 96 160L96 480C96 515.3 124.7 544 160 544L480 544C515.3 544 544 515.3 544 480L544 160C544 124.7 515.3 96 480 96L160 96z"/></svg>');

		--icon-fa-classic-regular-square-check-text-primary: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path fill="rgba(250, 250, 250, 1)" d="M480 96C515.3 96 544 124.7 544 160L544 480C544 515.3 515.3 544 480 544L160 544C124.7 544 96 515.3 96 480L96 160C96 124.7 124.7 96 160 96L480 96zM160 144C151.2 144 144 151.2 144 160L144 480C144 488.8 151.2 496 160 496L480 496C488.8 496 496 488.8 496 480L496 160C496 151.2 488.8 144 480 144L160 144zM390.7 233.9C398.5 223.2 413.5 220.8 424.2 228.6C434.9 236.4 437.3 251.4 429.5 262.1L307.4 430.1C303.3 435.8 296.9 439.4 289.9 439.9C282.9 440.4 276 437.9 271.1 433L215.2 377.1C205.8 367.7 205.8 352.5 215.2 343.2C224.6 333.9 239.8 333.8 249.1 343.2L285.1 379.2L390.7 234z"/></svg>');

		--icon-fa-classic-regular-square-minus-text-primary: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path fill="rgba(250, 250, 250, 1)" d="M160 144C151.2 144 144 151.2 144 160L144 480C144 488.8 151.2 496 160 496L480 496C488.8 496 496 488.8 496 480L496 160C496 151.2 488.8 144 480 144L160 144zM96 160C96 124.7 124.7 96 160 96L480 96C515.3 96 544 124.7 544 160L544 480C544 515.3 515.3 544 480 544L160 544C124.7 544 96 515.3 96 480L96 160zM232 296L408 296C421.3 296 432 306.7 432 320C432 333.3 421.3 344 408 344L232 344C218.7 344 208 333.3 208 320C208 306.7 218.7 296 232 296z"/></svg>');

		--icon-fa-classic-solid-toggle-off-text-primary: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path fill="rgba(250, 250, 250, 1)" d="M416 192C486.7 192 544 249.3 544 320C544 390.7 486.7 448 416 448L224 448C153.3 448 96 390.7 96 320C96 249.3 153.3 192 224 192L416 192zM608 320C608 214 522 128 416 128L224 128C118 128 32 214 32 320C32 426 118 512 224 512L416 512C522 512 608 426 608 320zM224 400C268.2 400 304 364.2 304 320C304 275.8 268.2 240 224 240C179.8 240 144 275.8 144 320C144 364.2 179.8 400 224 400z"/></svg>');

		--icon-fa-classic-solid-toggle-on-text-primary: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path fill="rgba(250, 250, 250, 1)" d="M224 128C118 128 32 214 32 320C32 426 118 512 224 512L416 512C522 512 608 426 608 320C608 214 522 128 416 128L224 128zM416 224C469 224 512 267 512 320C512 373 469 416 416 416C363 416 320 373 320 320C320 267 363 224 416 224z"/></svg>');

		--icon-fa-classic-solid-ellipsis-vertical-border-focus-color: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path fill="rgba(85, 85, 85, 1)" d="M320 208C289.1 208 264 182.9 264 152C264 121.1 289.1 96 320 96C350.9 96 376 121.1 376 152C376 182.9 350.9 208 320 208zM320 432C350.9 432 376 457.1 376 488C376 518.9 350.9 544 320 544C289.1 544 264 518.9 264 488C264 457.1 289.1 432 320 432zM376 320C376 350.9 350.9 376 320 376C289.1 376 264 350.9 264 320C264 289.1 289.1 264 320 264C350.9 264 376 289.1 376 320z"/></svg>');

		--icon-fa-classic-solid-circle-check-green: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path fill="rgba(35, 140, 60, 1)" d="M320 576C178.6 576 64 461.4 64 320C64 178.6 178.6 64 320 64C461.4 64 576 178.6 576 320C576 461.4 461.4 576 320 576zM438 209.7C427.3 201.9 412.3 204.3 404.5 215L285.1 379.2L233 327.1C223.6 317.7 208.4 317.7 199.1 327.1C189.8 336.5 189.7 351.7 199.1 361L271.1 433C276.1 438 282.9 440.5 289.9 440C296.9 439.5 303.3 435.9 307.4 430.2L443.3 243.2C451.1 232.5 448.7 217.5 438 209.7z"/></svg>');

		--icon-fa-classic-solid-circle-up-green: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path fill="rgba(35, 140, 60, 1)" d="M320 576C461.4 576 576 461.4 576 320C576 178.6 461.4 64 320 64C178.6 64 64 178.6 64 320C64 461.4 178.6 576 320 576zM331.3 188.7L435.3 292.7C439.9 297.3 441.2 304.2 438.8 310.1C436.4 316 430.5 320 424 320L368 320L368 416C368 433.7 353.7 448 336 448L304 448C286.3 448 272 433.7 272 416L272 320L216 320C209.5 320 203.7 316.1 201.2 310.1C198.7 304.1 200.1 297.2 204.7 292.7L308.7 188.7C314.9 182.5 325.1 182.5 331.3 188.7z"/></svg>');

		--icon-fa-classic-solid-circle-exclamation-red: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path fill="rgba(255, 70, 60, 1)" d="M320 576C178.6 576 64 461.4 64 320C64 178.6 178.6 64 320 64C461.4 64 576 178.6 576 320C576 461.4 461.4 576 320 576zM320 384C302.3 384 288 398.3 288 416C288 433.7 302.3 448 320 448C337.7 448 352 433.7 352 416C352 398.3 337.7 384 320 384zM320 192C301.8 192 287.3 207.5 288.6 225.7L296 329.7C296.9 342.3 307.4 352 319.9 352C332.5 352 342.9 342.3 343.8 329.7L351.2 225.7C352.5 207.5 338.1 192 319.8 192z"/></svg>');

		--icon-fa-classic-solid-exclamation-red: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path fill="rgba(255, 70, 60, 1)" d="M320 496C342.1 496 360 513.9 360 536C360 558.1 342.1 576 320 576C297.9 576 280 558.1 280 536C280 513.9 297.9 496 320 496zM320 64C346.5 64 368 85.5 368 112C368 112.6 368 113.1 368 113.7L352 417.7C351.1 434.7 337 448 320 448C303 448 289 434.7 288 417.7L272 113.7C272 113.1 272 112.6 272 112C272 85.5 293.5 64 320 64z"/></svg>');
	}
}

@font-face {
	font-family: "Brandon-Text-Web-Regular";
	src: url("http://cdn.complian.app/fonts/Brandon-Text-Web-Regular/Brandon-Text-Web-Regular.eot");
	src: url("http://cdn.complian.app/fonts/Brandon-Text-Web-Regular/Brandon-Text-Web-Regular.eot?#iefix") format("embedded-opentype"),
		url("http://cdn.complian.app/fonts/Brandon-Text-Web-Regular/Brandon-Text-Web-Regular.woff2") format("woff2"),
		url("http://cdn.complian.app/fonts/Brandon-Text-Web-Regular/Brandon-Text-Web-Regular.woff") format("woff");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "Magistral-Light";
	src: url("http://cdn.complian.app/fonts/Magistral-Light/Magistral-Light.eot");
	src: url("http://cdn.complian.app/fonts/Magistral-Light/Magistral-Light.eot?#iefix") format("embedded-opentype"), url("http://cdn.complian.app/fonts/Magistral-Light/Magistral-Light.woff2") format("woff2"), url("http://cdn.complian.app/fonts/Magistral-Light/Magistral-Light.woff") format("woff"), url("http://cdn.complian.app/fonts/Magistral-Light/Magistral-Light.ttf") format("truetype");
}

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

*::-webkit-scrollbar {
	height: 8px;
	width: 8px;
}
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
	background-color: var(--accent-primary);
	border: 1px solid var(--panel-background);
	border-radius: 5px;
	transition: background-color var(--transition-speed) ease-in-out;
}
*::-webkit-scrollbar-thumb:hover { background-color: var(--accent-primary-hover); }

html {
	font-size: var(--font-size);
}

body {
	font-family: Arial;
	background-color: var(--page-background);
	color: var(--text-primary);
	display: grid;
	grid-template-columns: var(--menu-width) 1fr;
	transition: grid-template-columns var(--transition-speed) ease-in-out;
}

[data-trigger-click-simulate-form-submit]:not(:empty),
[data-trigger-click-load]:not(:empty),
[data-trigger-click-modal-opener]:not(:empty),
[data-trigger-dblclick-modal-opener]:not(:empty) {
	cursor: pointer;
}

h1 {
	font-family: "Brandon-Text-Web-Regular";
	font-size: var(--header1-font-size);
	font-weight: normal;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

h2 {
	font-family: "Brandon-Text-Web-Regular";
	font-size: var(--header2-font-size);
	font-weight: normal;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

h3 {
	font-family: "Brandon-Text-Web-Regular";
	font-size: var(--header3-font-size);
	font-weight: normal;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

h4 {
	font-family: "Brandon-Text-Web-Regular";
	font-size: var(--header4-font-size);
	font-weight: normal;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

h5 {
	font-family: "Brandon-Text-Web-Regular";
	font-size: var(--header5-font-size);
	font-weight: normal;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

hr {
	background: linear-gradient(to right, transparent, var(--border-color), transparent);
	border: none;
	height: 1px;
	margin-bottom: 30px;
	margin-top: 30px;
	width: 100%;
}

/* Utility Classes */
.align-items-center { align-items: center !important; }
.align-items-flex-start { align-items: flex-start !important; }
.background-color-transparent { background-color: transparent !important;}
.background-image-none { background-image: none !important;}
.border-none { border: none !important; }
.border-bottom-none { border-bottom: none !important; }
.border-top-none { border-top: none !important; }
.box-shadow-none { box-shadow: none !important; }
.cursor-not-allowed { cursor: not-allowed !important; }
.cursor-pointer { cursor: pointer !important; }
.display-flex { display: flex !important; }
.display-none { display: none !important; }
.fill-green { fill: var(--color-green) !important; }
.fill-red { fill: var(--color-red) !important; }
.flex-direction-column { flex-direction: column !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }
.flex-wrap-nowrap { flex-wrap: nowrap !important; }
.flex-wrap-wrap { flex-wrap: wrap !important; }
.height-1em { height: 1em !important; }
.height-6em { height: 6em !important; }
.height-70px { height: 70px !important; }
.height-75pct { height: 75% !important; }
.height-100pct { height: 100% !important; }
.height-300px { height: 300px !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-space-between { justify-content: space-between !important; }
.justify-content-end { justify-content: end !important; }
.left-0 { left: 0 !important; }
.margin-0 { margin: 0 !important; }
.margin-bottom-12d5pct { margin-bottom: 12.5% !important; }
.margin-bottom-30px { margin-bottom: 30px !important; }
.margin-top-12d5pct { margin-top: 12.5% !important; }
.margin-top-30px { margin-top: 30px !important; }
.min-height-100pct { min-height: 100% !important; }
.min-height-200px { min-height: 200px !important; }
.min-width-100pct { min-width: 100% !important; }
.object-fit-cover { object-fit: cover !important; }
.opacity-0 { opacity: 0 !important; }
.opacity-0d35 { opacity: 0.35 !important; }
.overflow-hidden { overflow: hidden !important; }
.overflow-y-auto { overflow-y: auto !important; }
.padding-0 { padding: 0 !important; }
.position-absolute { position: absolute !important; }
.position-fixed { position: fixed !important; }
.position-sticky { position: sticky !important; }
.text-align-center { text-align: center !important; }
.text-align-left { text-align: left !important; }
.text-align-right { text-align: right !important; }
.text-decoration-none { text-decoration: none !important; }
.text-overflow-ellipsis { text-overflow: ellipsis !important; }
.text-transform-uppercase { text-transform: uppercase !important; }
.translate-0-calc-50pct-plus-6px { translate: 0 calc(50% + 6px); }
.transition-transform { transition: transform var(--transition-speed) ease-in-out !important; }
.top-0 { top: 0 !important; }
.whitespace-nowrap { white-space: nowrap !important; }
.width-1em { width: 1em !important; }
.width-6em { width: 6em !important; }
.width-35pct { width: 35% !important; }
.width-49pct { width: 49% !important; }
.width-50pct { width: 50% !important; }
.width-52d5px { width: 52.5px !important; }
.width-65pct { width: 65% !important; }
.width-74d5px { width: 74.5px !important; }
.width-75pct { width: 75% !important; }
.width-96d5px { width: 96.5px !important; }
.width-99pct { width: 99% !important; }
.width-100pct { width: 100% !important; }
.width-127d0625 { width: 127.0625px !important; }
.width-140d5px { width: 140.5px !important; }
.width-calc-100pct-minus-52d5px { width: calc(100% - 52.5px) !important; }
.width-calc-100pct-minus-74d5px { width: calc(100% - 74.5px) !important; }
.width-calc-100pct-minus-96d5px { width: calc(100% - 96.5px) !important; }
.width-calc-100pct-minus-52d5px-minus-52d5px { width: calc(100% - 52.5px - 52.5px) !important; }
.width-calc-100pct-minus-52d5px-minus-74d5px { width: calc(100% - 52.5px - 74.5px) !important; }
.width-calc-100pct-minus-52d5px-minus-96d5px { width: calc(100% - 52.5px - 96.5px) !important; }
.width-calc-100pct-minus-52d5px-minus-140d5px { width: calc(100% - 52.5px - 140.5px) !important; }
.width-calc-100pct-minus-52d5px-minus-127d0625px-minus-74d5px { width: calc(100% - 52.5px - 127.0625px - 74.5px) !important; }
.width-calc-100pct-minus-52d5px-minus-127d0625px-minus-96d5px { width: calc(100% - 52.5px - 127.0625px - 96.5px) !important; }
.width-calc-calc-100pct-div-2-minus-52d5px-minus-74d5px { width: calc(calc(100% / 2) - 52.5px - 74.5px) !important; }
.width-calc-calc-100pct-div-2-minus-52d5px-minus-96d5px { width: calc(calc(100% / 2) - 52.5px - 96.5px) !important; }
.width-calc-calc-100pct-div-3-minus-52d5px-minus-96d5px { width: calc(calc(100% / 3) - 52.5px - 96.5px) !important; }
.width-calc-calc-100pct-div-4-minus-52d5px-minus-96d5px { width: calc(calc(100% / 4) - 52.5px - 96.5px) !important; }
.width-calc-calc-100pct-div-5-minus-52d5px-minus-96d5px { width: calc(calc(100% / 5) - 52.5px - 96.5px) !important; }
.width-calc-calc-100pct-div-2-minus-52d5px-minus-127d0625px-minus-74d5px { width: calc(calc(100% / 2) - 52.5px - 127.0625px - 74.5px) !important; }
.width-calc-calc-100pct-div-2-minus-52d5px-minus-127d0625px-minus-96d5px { width: calc(calc(100% / 2) - 52.5px - 127.0625px - 96.5px) !important; }
.width-calc-calc-100pct-div-5-minus-52d5px-minus-140d5px { width: calc(calc(100% / 5) - 52.5px - 140.5px) !important; }
.width-fit-content { width: fit-content !important; }
.z-index-1 { z-index: 1 !important; }
.z-index-10 { z-index: 10 !important; }
.z-index-998 { z-index: 998 !important; }
.z-index-1000 { z-index: 1000 !important; }
.z-index-1001 { z-index: 1001 !important; }

/* Special utility classes */
.border { border: 1px solid var(--border-color) !important; }
.border-bottom { border-bottom: 1px solid var(--border-color) !important; }
.border-right { border-right: 1px solid var(--border-color) !important; }
.border-radius-elements { border-radius: var(--border-radius-elements) !important; }
.font-size-label-font-size { font-size: var(--label-font-size) !important; }
.height-screen { height: 100vh !important; }
.margin-0d25xmargin-size { margin: calc(0.25 * var(--margin-size)) !important; }
.margin-bottom-0d75xmargin-size { margin-bottom: calc(0.75 * var(--margin-size)) !important; }
.margin-right-0d75xmargin-size { margin-right: calc(0.75 * var(--margin-size)) !important; }
.margin-top-0d25xmargin-size { margin-top: calc(0.25 * var(--margin-size)) !important; }
.margin-top-0d5xmargin-size { margin-top: calc(0.5 * var(--margin-size)) !important; }
.margin-top-0d75xmargin-size { margin-top: calc(0.75 * var(--margin-size)) !important; }
.padding-0d75xmargin-size { padding: calc(0.75 * var(--margin-size)) !important; }
.padding-left-0d25xmargin-size { padding-left: calc(0.25 * var(--margin-size)) !important; }
.padding-0-0d75xmargin-size-0d75xmargin-size-0d75xmargin-size { padding: 0 calc(0.75 * var(--margin-size)) calc(0.75 * var(--margin-size)) calc(0.75 * var(--margin-size)) !important; }
.padding-2xmargin-size { padding: calc(2 * var(--margin-size)) !important; }
.padding-margin-size { padding: var(--margin-size) !important; }
.padding-margin-size-margin-size-margin-size-2xmargin-size { padding: var(--margin-size) var(--margin-size) var(--margin-size) calc(2 * var(--margin-size)) !important; }
.padding-margin-size-2xmargin-size-margin-size-2xmargin-size { padding: var(--margin-size) calc(2 * var(--margin-size)) var(--margin-size) calc(2 * var(--margin-size)) !important; }
.width-calc-50pct-plus-0d5x0d75margin-size { width: calc(50% + 0.5 * (0.75 * var(--margin-size))) !important; }

/* Komponent-specifik styling */
body.menu-hidden-desktop {
	grid-template-columns: 0 1fr;
}
#side-menu {
	background-color: rgba(var(--menu-background), 1);
	border-right: 1px solid var(--border-color);
	color: var(--text-on-menu);
	transform: none;
}

#side-menu ul {
	padding-top: var(--margin-size);
}
#side-menu ul li a {
	color: var(--text-on-menu);
	display: block;
	padding: calc(0.75 * var(--margin-size)) var(--margin-size);
}
#side-menu ul li a:hover {
	background-color: var(--menu-a-hover-background);
}

#menu-toggle {
	background: none;
	border: 1px solid transparent;
	border-radius: var(--border-radius-elements);
	margin-right: 1em;
	padding: 4px;
	transition: border-color var(--transition-speed) ease-in-out;
}

#menu-toggle:hover {
	border-color: var(--text-primary);
}

#menu-toggle svg {
	fill: var(--text-primary);
	height: 1em;
	transition: fill var(--transition-speed) ease-in-out;
	width: 1em;
}

#menu-overlay {
	backdrop-filter: blur(3px);
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 998;
	background-color: var(--menu-overlay-background);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--transition-speed) ease-in-out;
}

body.menu-open #menu-overlay {
	opacity: 1;
	pointer-events: auto;
}

header svg {
	fill: var(--accent-primary);
	height: var(--header1-font-size);
	transition: fill var(--transition-speed) ease-in-out;
	width: var(--header1-font-size);
}

header:hover svg {
	fill: var(--accent-primary-hover);
}

.panel {
	background-color: var(--panel-background);
}

.mfa-qr {
	text-align: center;
}

.mfa-qr svg {
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-elements);
	box-shadow: rgba(var(--shadow-color), 0.05) 0px 1px 2px 0px;
}

/* Modal styling */
.modal-overlay {
	backdrop-filter: blur(3px);
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--modal-overlay-background);
	z-index: 2000;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--transition-speed) ease-in-out;
}

.modal-overlay.is-visible {
	opacity: 1;
	pointer-events: auto;
}

.modal {
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	position: fixed;
	box-shadow:
		rgba(var(--shadow-color), 0.1) 0px 10px 15px -3px,
		rgba(var(--shadow-color), 0.1) 0px 4px 6px -4px;
	display: flex;
	flex-direction: column;
	max-height: calc(100dvh - var(--margin-size) - var(--margin-size));
	outline: 0px solid transparent;
	outline-offset: 1px;
	pointer-events: none;
	transition:
		transform var(--transition-speed) ease-in-out,
		opacity var(--transition-speed) ease-in-out,
		outline var(--transition-speed) ease-in-out;
	will-change: transform;
	z-index: 2001;
}

.modal:focus {
	outline: 3px solid var(--outline-color);
}

.modal:not([data-position="top-mini"]):not([data-position="bottom-mini"]) .modal-body::after {
	background: var(--border-color);
	bottom: 65px;
	content: "";
	left: calc(100% * 2 / 3);
	pointer-events: none;
	position: fixed;
	top: 54px;
	width: 1px;
}

.modal[data-position="left"] {
	backface-visibility: hidden;
	height: calc(100dvh - var(--margin-size) - var(--margin-size));
	left: var(--margin-size);
	opacity: 0;
	top: var(--margin-size);
	transform: translate3d(-100%, 0, 0);
	width: min(50vw, 900px);
	will-change: transform, opacity;
}

.modal[data-position="right"]{
	backface-visibility: hidden;
	height: calc(100dvh - var(--margin-size) - var(--margin-size));
	opacity: 0;
	right: var(--margin-size);
	top: var(--margin-size);
	transform: translate3d(100%, 0, 0);
	width: min(50vw, 900px);
	will-change: transform, opacity;
}

.modal[data-position="top"]{
	backface-visibility: hidden;
	height: calc(100dvh - var(--margin-size) - var(--margin-size));
	left: 50%;
	opacity: 0;
	top: var(--margin-size);
	transform: translate3d(-50%, -100%, 0);
	width: min(50vw, 900px);
	will-change: transform, opacity;
}

.modal[data-position="top-mini"] {
	backface-visibility: hidden;
	left: 50%;
	opacity: 0;
	top: -100%;
	transform: translate3d(-50%, -50%, 0);
	transition: top var(--transition-speed) ease-in-out;
	width: min(50vw, 450px);
	will-change: top, opacity;
}

.modal[data-position="bottom"] {
	backface-visibility: hidden;
	bottom: var(--margin-size);
	height: calc(100dvh - var(--margin-size) - var(--margin-size));
	left: 50%;
	opacity: 0;
	transform: translate3d(-50%, 100%, 0);
	width: min(50vw, 900px);
	will-change: transform, opacity;
}

.modal[data-position="bottom-mini"] {
	backface-visibility: hidden;
	bottom: 100%;
	left: 50%;
	opacity: 0;
	transform: translate3d(-50%, 50%, 0);
	transition: bottom var(--transition-speed) ease-in-out;
	width: min(50vw, 450px);
	will-change: bottom, opacity;
}

.modal-overlay.is-visible .modal{ pointer-events: auto; }

.modal-overlay.is-visible .modal[data-position="left"] {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

.modal-overlay.is-visible .modal[data-position="right"] {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

.modal-overlay.is-visible .modal[data-position="top"] {
	opacity: 1;
	transform: translate3d(-50%, 0, 0);
}

.modal-overlay.is-visible .modal[data-position="top-mini"] {
	opacity: 1;
	top: 50%;
}

.modal-overlay.is-visible .modal[data-position="bottom"] {
	opacity: 1;
	transform: translate3d(-50%, 0, 0);
}

.modal-overlay.is-visible .modal[data-position="bottom-mini"] {
	bottom: 50%;
	opacity: 1;
}

.modal[data-position="bottom-mini"] .modal-body {
	contain: layout paint;
}

.modal-header {
	border-bottom: 1px solid var(--border-color);
	padding: calc(0.75 * var(--margin-size)) var(--margin-size);
	display: flex;
	flex: 0 0 auto;
	justify-content: space-between;
	align-items: center;
}

.modal-header h3 { margin: 0; }

.modal-spinner-image {
	background: var(--panel-background);
	border-radius: 50%;
	box-shadow:
		rgba(var(--shadow-color), 0.1) 0px 10px 15px -3px,
		rgba(var(--shadow-color), 0.1) 0px 4px 6px -4px;
	display: none;
	cursor: wait;
	height: 24px;
	padding: 3px;
	position: absolute;
	right: -15px;
	top: -15px;
	width: 24px;
}

.modal-close-button {
	background: var(--panel-background);
	border: none;
	border-radius: 50%;
	box-shadow:
		rgba(var(--shadow-color), 0.1) 0px 10px 15px -3px,
		rgba(var(--shadow-color), 0.1) 0px 4px 6px -4px;
	display: none;
	cursor: pointer;
	height: 30px;
	position: absolute;
	right: -15px;
	top: -15px;
	width: 30px;
}

.modal-close-button svg {
	fill: var(--accent-primary);
	height: 30px;
	transition: fill var(--transition-speed) ease-in-out;
	width: 30px;
}

.modal-close-button:hover svg {
	fill: var(--accent-primary-hover);
}

.modal-body {
	align-items: flex-start;
	display: flex;
	justify-content: space-between;
	flex: 1 1 auto;
	height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: 0;
	position: relative;
}

.modal[data-position="top-mini"] .modal-body,
.modal[data-position="bottom-mini"] .modal-body {
	height: unset;
}

.modal-body button.tile-button {
	background-color: transparent;
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-elements);
	box-shadow: rgba(var(--shadow-color), 0.05) 0px 1px 2px 0px;
	color: var(--text-primary);
	cursor: pointer;
	font-size: var(--label-font-size);
	height: 6em;
	margin-right: calc(0.75 * var(--margin-size));
	width: 6em;
}

.modal-body button.tile-button:last-of-type {
	margin-right: 0;
}

.modal-body button.tile-button svg {
	fill: var(--accent-primary);
	height: 75%;
	margin-bottom: 12.5%;
	margin-top: 12.5%;
	transition: fill var(--transition-speed) ease-in-out;
	width: 75%;
}

.modal-body button.tile-button:hover svg {
	fill: var(--accent-primary-hover);
}

.modal-body > div:first-child {
	width: 100%;
}

.modal-body .h4-container {
	align-items: center;
	background-color: var(--modal-h4-background);
	border-bottom: 1px solid var(--border-color);
	border-top-left-radius: inherit;
	border-top-right-radius: inherit;
	display: flex;
	justify-content: space-between;
	padding: 10px 15px;
}

.modal-body .h4-container h4 {
	display: flex;
}

.modal-body .h4-container div {
	display: flex;
}

.modal-body .h4-container div button {
	align-items: center;
	background-color: transparent;
	border: none;
	border-radius: var(--border-radius-elements);
	box-shadow: rgba(var(--shadow-color), 0) 0px 1px 2px 0px;
	cursor: pointer;
	display: flex;
	height: 2em;
	justify-content: center;
	padding: 5px;
	transition:
		background-color var(--transition-speed) ease-in-out,
		box-shadow var(--transition-speed) ease-in-out;
	width: 2em;
}

.modal-body .h4-container div button:not(:first-of-type) {
	margin-right: calc(0.25 * var(--margin-size));
}

.modal-body .h4-container div button:hover {
	background-color: var(--table-body-button-hover-background);
	box-shadow: rgba(var(--shadow-color), 0.05) 0px 1px 2px 0px;
}

.modal-body .h4-container div button svg {
	fill: var(--accent-primary);
	height: 1em;
	transition: fill var(--transition-speed) ease-in-out;
	width: 1em;
}

.modal-body .h4-container div button:hover svg {
	fill: var(--accent-primary-hover);
}

.modal-body .modal-item-img-container {
	height: 200px;
	margin-bottom: var(--margin-size);
	overflow: hidden;
	text-align: center;
	width: 100%;
}

.modal-body .modal-item-img-container img {
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-elements);
	box-shadow: rgba(var(--shadow-color), 0.05) 0px 1px 2px 0px;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.modal-body .modal-item-img-container img.circle {
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	height: auto;
	max-width: 200px;
	width: 100%;
}

.modal-footer {
	align-items: center;
	background-color: var(--border-color);
	border-bottom-left-radius: var(--border-radius);
	border-bottom-right-radius: var(--border-radius);
	border-top: 1px solid var(--border-color);
	box-shadow: rgba(var(--shadow-color), 0.1) 0px -4px 6px -4px;
	display: flex;
	height: 65px;
	justify-content: flex-start;
	overflow-x: auto;
}

.modal-footer button {
	align-items: center;
	appearance: none;
	-webkit-appearance: none;
	background-color: var(--table-body-hover-background);
	border: none;
	color: var(--text-on-menu);
	cursor: pointer;
	display: flex;
	flex: 1 1 150px;
	flex-direction: column;
	font-size: var(--modal-footer-font-size);
	height: 100%;
	justify-content: center;
	line-height: 1;
	margin-right: 1px;
	outline: 0px solid transparent;
	outline-offset: 1px;
	padding: var(--border-radius);
	text-align: center;
	text-overflow: ellipsis;
	text-transform: uppercase;
	transition:
		background-color var(--transition-speed) ease-in-out,
		outline var(--transition-speed) ease-in-out;
}

.modal-footer button:focus {
	outline: 3px solid var(--outline-color);
	outline-offset: -3px;
}

.modal-footer button:last-of-type {
	margin-right: 0;
}

.modal-footer button[aria-selected="true"] {
	background-color: var(--table-body-button-hover-background);
}

.modal-footer button:hover {
	background-color: var(--table-body-button-hover-background);
}

.modal-footer button svg {
	fill: var(--accent-primary);
	height: 1.5em;
	margin-bottom: 6px;
	transition: fill var(--transition-speed) ease-in-out;
	width: 1.5em;
}

.modal-footer button[aria-selected="true"] svg {
	fill: var(--accent-primary-hover);
}

.modal-footer button:hover svg {
	fill: var(--accent-primary-hover);
}

.modal-form-grid {
	align-items: flex-start;
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

.modal[data-position="top-mini"] .modal-form-grid,
.modal[data-position="bottom-mini"] .modal-form-grid {
	grid-template-columns: 1fr;
	align-items: stretch;
}

.modal-form-grid > div:first-child{
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow-y: auto;
}

.modal-form-grid > div:last-child{
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow-y: auto;
}

.modal-form-grid > * {
	min-width: 0;
	width: 100%;
}

.modal-form-grid > div:nth-of-type(2) button {
	align-items: center;
	background-color: transparent;
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-elements);
	box-shadow: rgba(var(--shadow-color), 0.05) 0px 1px 2px 0px;
	cursor: pointer;
	display: flex;
	height: 3em;
	justify-content: center;
	padding: 5px;
	transition: border-color var(--transition-speed) ease-in-out;
	width: 3em;
}

.modal-form-grid > div:nth-of-type(2) button:hover {
	border-color: var(--border-focus-color);
}

.modal-form-grid > div:nth-of-type(2) button svg {
	fill: var(--accent-primary);
	height: 3em;
	transition: fill var(--transition-speed) ease-in-out;
	width: 3em;
}

.modal-form-grid > div:nth-of-type(2) button:hover svg {
	fill: var(--accent-primary-hover);
}

@media (max-width: 992px) {
	.modal {
		max-height: calc(100dvh - calc(var(--margin-size) / 4) - calc(var(--margin-size) / 4));
	}

	.modal[data-position="left"] {
		height: calc(100dvh - calc(var(--margin-size) / 4) - calc(var(--margin-size) / 4));
		left: calc(var(--margin-size) / 4);
		top: calc(var(--margin-size) / 4);
		width: calc(100dvw - calc(var(--margin-size) / 4) - calc(var(--margin-size) / 4));
	}

	.modal[data-position="right"] {
		height: calc(100dvh - calc(var(--margin-size) / 4) - calc(var(--margin-size) / 4));
		right: calc(var(--margin-size) / 4);
		top: calc(var(--margin-size) / 4);
		width: calc(100dvw - calc(var(--margin-size) / 4) - calc(var(--margin-size) / 4));
	}

	.modal[data-position="top"] {
		height: calc(100dvh - calc(var(--margin-size) / 4) - calc(var(--margin-size) / 4));
		left: 50%;
		top: calc(var(--margin-size) / 4);
		width: calc(100dvw - calc(var(--margin-size) / 4) - calc(var(--margin-size) / 4));
	}

	.modal[data-position="top-mini"] {
		width: calc(100dvw - calc(var(--margin-size) / 2) - calc(var(--margin-size) / 2));
	}

	.modal[data-position="bottom"] {
		bottom: calc(var(--margin-size) / 4);
		height: calc(100dvh - calc(var(--margin-size) / 4) - calc(var(--margin-size) / 4));
		left: 50%;
		width: calc(100dvw - calc(var(--margin-size) / 4) - calc(var(--margin-size) / 4));
	}

	.modal[data-position="bottom-mini"] {
		width: calc(100dvw - calc(var(--margin-size) / 2) - calc(var(--margin-size) / 2));
	}

	.modal-form-grid {
		grid-template-columns: 1fr;
		align-items: stretch;
	}

	.modal-body::after {
		display: none;
	}

	.modal-body .modal-item-img-container {
		height: auto;
		overflow: visible;
	}

	.modal-body .modal-item-img-container img {
		height: auto;
		object-fit: unset;
	}

	.modal-close-button {
		right: 12px;
		top: 12px;
	}

	.modal-spinner-image {
		right: 12px;
		top: 12px;
	}
}

/* Card styling */
.card {
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	box-shadow: rgba(var(--shadow-color), 0.05) 0px 1px 2px 0px;
	margin-bottom: 0;
	width: 100%;
}

.card:has(+ .card, + button) {
	margin-bottom: calc(1.5 * var(--margin-size));
}

/* Table styling */
.table-container {
	overflow: auto;
	width: 100%;
}

.table-container table {
	border-collapse: collapse;
	table-layout: fixed;
	width: 100%;
}

.table-container table th {
	background-color: var(--table-head-background);
	border: 1px solid var(--border-color);
	padding: calc(0.75 * var(--margin-size));
}

.table-container table th:first-of-type {
	border-left: none;
}

.table-container table th:last-of-type {
	border-right: none;
}

.table-container table th button {
	background-color: transparent;
	border: none;
	border-radius: var(--border-radius-elements);
	box-shadow: rgba(var(--shadow-color), 0) 0px 1px 2px 0px;
	color: var(--text-primary);
	cursor: pointer;
	font-size: var(--button-font-size);
	padding: 8px;
	text-transform: uppercase;
	transition:
		background-color var(--transition-speed) ease-in-out,
		box-shadow var(--transition-speed) ease-in-out;
}

.table-container table th button svg {
	fill: var(--text-primary);
	height: 0.7em;
	width: 1em;
}

.table-container table th button:hover {
	background-color: var(--table-head-button-hover-background);
	box-shadow: rgba(var(--shadow-color), 0.05) 0px 1px 2px 0px;
}

.table-container table td {
	background-color: transparent;
	border: 1px solid var(--border-color);
	color: var(--text-primary);
	font-size: var(--font-size);
	padding: calc(0.75 * var(--margin-size));
	transition: background-color var(--transition-speed) ease-in-out;
}

.table-container table td.no-content {
	font-family: "Brandon-Text-Web-Regular";
	font-size: var(--header1-font-size);
	font-weight: normal;
	height: 300px;
	letter-spacing: 0.05em;
	text-align: center;
	text-transform: uppercase;
}

.table-container table td.no-content img {
	height: 25em;
	width: 25em;
}

.table-container table td.no-content svg {
	fill: var(--accent-primary);
	height: 10em;
	width: 10em;
}

.table-container table:not(:has(thead)) tbody tr:first-of-type td {
	border-top: none;
}

.table-container table td:first-of-type {
	border-left: none;
}

.table-container table td:last-of-type {
	border-right: none;
}

.table-container table td:not(.no-content):last-of-type button {
	align-items: center;
	background-color: transparent;
	border: none;
	border-radius: var(--border-radius-elements);
	box-shadow: rgba(var(--shadow-color), 0) 0px 1px 2px 0px;
	cursor: pointer;
	display: flex;
	height: 2em;
	justify-content: center;
	padding: 5px;
	transition:
		background-color var(--transition-speed) ease-in-out,
		box-shadow var(--transition-speed) ease-in-out;
	width: 2em;
}

.table-container table td:not(.no-content):last-of-type button:hover {
	background-color: var(--table-body-button-hover-background);
	box-shadow: rgba(var(--shadow-color), 0.05) 0px 1px 2px 0px;
}

.table-container table td:not(.no-content):last-of-type button svg {
	fill: var(--accent-primary);
	height: 1em;
	transition: fill var(--transition-speed) ease-in-out;
	width: 1em;
}

.table-container table td:not(.no-content):last-of-type button:hover svg {
	fill: var(--accent-primary-hover);
}

.table-container table tbody tr:nth-child(2n) td {
	background-color: var(--table-body-2n-background);
}

.table-container table tbody tr:hover td:not(.no-content) {
	background-color: var(--table-body-hover-background);
}

.table-container table tfoot tr:last-of-type td {
	border-bottom: none;
}

/* Input styling */
button:not(.modal-footer button),
input,
select,
textarea {
	outline: 0px solid transparent;
	outline-offset: 1px;
	transition: outline var(--transition-speed) ease-in-out;
}

button:not(.modal-footer button):focus,
input:focus,
select:focus,
textarea:focus {
	outline: 3px solid var(--outline-color);
}

input[type="checkbox"] {
	display: none;
}

input[type="checkbox"] + label {
	padding: 0;
}

input[type="checkbox"] + label[for] {
	cursor: pointer;
}

input[type="checkbox"] + label::before {
	background-image: var(--icon-fa-classic-regular-square-text-primary);
	background-repeat: no-repeat;
	background-size: contain;
	content: '';
	cursor: pointer;
	display: inline-block;
	height: 22px;
	vertical-align: middle;
	width: 27px;
}

th input[type="checkbox"] + label::before {
	background-image: var(--icon-fa-classic-solid-square-text-primary);
}

input.toggle[type="checkbox"] + label::before {
	background-image: var(--icon-fa-classic-solid-toggle-off-text-primary);
}

input[type="checkbox"] + label:empty::before {
	width: 22px;
}

input[type="checkbox"]:checked + label::before {
	background-image: var(--icon-fa-classic-regular-square-check-text-primary);
}

th input[type="checkbox"]:checked + label::before {
	background-image: var(--icon-fa-classic-solid-square-check-text-primary);
}

input[type="checkbox"]:indeterminate + label::before {
	background-image: var(--icon-fa-classic-regular-square-minus-text-primary);
}

th input[type="checkbox"]:indeterminate + label::before {
	background-image: var(--icon-fa-classic-solid-square-minus-text-primary);
}

input.toggle[type="checkbox"]:checked + label::before {
	background-image: var(--icon-fa-classic-solid-toggle-on-text-primary);
}

input:not([type="checkbox"], [type="radio"]),
select,
textarea {
	appearance: none;
	-webkit-appearance: none;
	background-color: transparent;
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-elements);
	box-shadow: rgba(var(--shadow-color), 0.05) 0px 1px 2px 0px;
	color: var(--text-on-input);
	font-family: Arial;
	font-size: var(--input-font-size);
	line-height: 1;
	overflow-x: hidden;
	transition: border-color var(--transition-speed) ease-in-out;
	width: 100%;
}

input {
	padding: 10px;
}

input:invalid,
textarea:invalid {
	background-image: var(--icon-fa-classic-solid-exclamation-red);
	background-position: calc(100% - 10px) center;
	background-repeat: no-repeat;
	background-size: 1em 1em;
	padding: 10px calc(10px + 1em + 10px) 10px 10px;
}

select {
	background-image: var(--icon-fa-classic-solid-ellipsis-vertical-border-color);
	background-position: calc(100% - 10px) center;
	background-repeat: no-repeat;
	background-size: 1em 1em;
	padding: 10px calc(10px + 1em + 10px) 10px 10px;
}

select:invalid {
	background-image:
		var(--icon-fa-classic-solid-ellipsis-vertical-border-color),
		var(--icon-fa-classic-solid-exclamation-red);
	background-position: calc(100% - 10px) center, calc(100% - 10px - 1em - 1em) center;
	background-repeat: no-repeat, no-repeat;
	background-size: 1em 1em, 1em 1em;
	padding: 10px calc(10px + 1em + 1em + 1em + 10px) 10px 10px;
}

select:focus {
	background-image: var(--icon-fa-classic-solid-ellipsis-vertical-border-focus-color);
	border-color: var(--border-focus-color);
}

select:invalid:focus {
	background-image:
		var(--icon-fa-classic-solid-ellipsis-vertical-border-focus-color),
		var(--icon-fa-classic-solid-exclamation-red);
	background-position: calc(100% - 10px) center, calc(100% - 10px - 1em - 1em) center;
	background-repeat: no-repeat, no-repeat;
	background-size: 1em 1em, 1em 1em;
	padding: 10px calc(10px + 1em + 1em + 1em + 10px) 10px 10px;
}

input.loading,
textarea.loading,
select.loading {
	background-image: url('https://cdn.complian.app/icons/spinner.gif');
	background-position: calc(100% - 10px) center;
	background-repeat: no-repeat;
	background-size: 1em 1em;
	padding: 10px calc(10px + 1em + 10px) 10px 10px;
}

textarea {
	field-sizing: content;
	min-height: 25em;
	padding: 10px;
	resize: none;
}

input[type="search"] {
	background-image: var(--icon-fa-classic-solid-magnifying-glass-border-color);
	background-position: 10px center;
	background-repeat: no-repeat;
	background-size: 1em 1em;
	padding: 10px 10px 10px calc(10px + 1em + 10px);
}

input[type="search"]:focus {
	background-image: var(--icon-fa-classic-solid-magnifying-glass-border-focus-color);
}

input:focus,
textarea:focus {
	border-color: var(--border-focus-color);
}

input:read-only,
textarea:read-only {
	border: 1px dashed var(--border-color);
}

input:disabled,
select:disabled,
textarea:disabled {
	border: 1px solid transparent;
	box-shadow: none;
}

input[type="date"]::-webkit-date-and-time-value {
	line-height: 1;
	text-align: left;
}

input[type="date"]::-webkit-datetime-edit {
}

input[type="date"]::-webkit-calendar-picker-indicator {
	cursor: pointer;
}

input[type="date"]::-webkit-datetime-edit-month-field {
}
input[type="date"]::-webkit-datetime-edit-day-field {
}
input[type="date"]::-webkit-datetime-edit-year-field {
}

input[type="date"]::-webkit-inner-spin-button {
	cursor: pointer;
}

input[type="date"]::-webkit-clear-button {
	cursor: pointer;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	cursor: pointer;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
	cursor: pointer;
}

input::placeholder {
	color: var(--border-color);
	transition: color var(--transition-speed) ease-in-out;
}

input:focus::placeholder {
	color: var(--border-focus-color);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--text-on-input);
	-webkit-box-shadow: rgba(var(--shadow-color), 0.05) 0px 1px 2px 0px;
}

input.loading,
textarea.loading {
	background-image: url('https://cdn.complian.app/icons/spinner.gif');
	background-position: calc(100% - 10px) center;
	background-repeat: no-repeat;
	background-size: 1em 1em;
	padding: 10px calc(10px + 1em + 10px) 10px 10px;
}

.modal-info-panel input {
	border: none;
	box-shadow: none;
	font-size: var(--input-font-size-small);
	margin-bottom: 15px;
	margin-top: 0;
	padding: var(--border-radius-elements);
}

/* .modal-info-panel input:last-of-type {
	margin-bottom: 15px;
} */

.modal-info-panel select {
	border: 1px solid var(--border-color);
	box-shadow: rgba(var(--shadow-color), 0.05) 0px 1px 2px 0px;
	font-size: var(--input-font-size-small);
	margin-bottom: 15px;
	margin-top: 0;
	padding: var(--border-radius-elements);
}

label:not(input[type="checkbox"] + label) {
	display: block;
	font-size: var(--label-font-size);
	overflow: hidden;
	padding: 0 var(--border-radius-elements) var(--border-radius-elements) var(--border-radius-elements);
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
	width: 100%;
}

.modal-info-panel label {
	font-size: var(--label-font-size);
	font-weight: bold;
	padding: 0 var(--border-radius-elements) var(--border-radius-elements) var(--border-radius-elements);
	text-transform: uppercase;
}

/* Link styling */
a {
	outline: 0px solid transparent;
	outline-offset: 1px;
	transition: outline var(--transition-speed) ease-in-out;
}

a:focus {
	outline: 3px solid var(--outline-color);
}

a:link {
	color: rgba(var(--color-cyan), 1);
	text-decoration: none;
}

a:visited {
	color: rgba(var(--color-cyan), 1);
	text-decoration: none;
}

a:hover {
	color: rgba(var(--color-cyan-hover), 1);
	text-decoration: none;
}

a:active {
	color: rgba(var(--color-cyan), 1);
	text-decoration: none;
}

a.sign-in-with {
	align-items: center;
	background-color: transparent;
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-elements);
	box-shadow: rgba(var(--shadow-color), 0.05) 0px 1px 2px 0px;
	color: var(--text-on-input);
	cursor: pointer;
	display: flex;
	font-family: "Brandon-Text-Web-Regular";
	font-size: var(--label-font-size);
	justify-content: center;
	padding: 10px;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: border-color var(--transition-speed) ease-in-out;
}

a.sign-in-with:hover {
	border-color: var(--border-focus-color);
}

a.sign-in-with svg {
	fill: var(--accent-primary);
	height: 2em;
	margin-right: 0.5em;
	transition: fill var(--transition-speed) ease-in-out;
	width: 2em;
}

a.sign-in-with:hover svg {
	fill: var(--accent-primary-hover);
}

button:not(:has(svg), button.no-content-button) {
	background-color: var(--accent-primary);
	border: 1px solid var(--accent-primary-hover);
	border-radius: var(--border-radius-elements);
	box-shadow: rgba(var(--shadow-color), 0.05) 0px 1px 2px 0px;
	color: var(--text-on-accent);
	cursor: pointer;
	font-family: "Brandon-Text-Web-Regular";
	font-size: var(--button-font-size);
	margin-bottom: calc(0.75 * var(--margin-size));
	padding: 10px;
	text-transform: uppercase;
	transition:
		background-color var(--transition-speed) ease-in-out,
		border-color var(--transition-speed) ease-in-out;
	width: 100%;
}

button:not(:has(svg), button.no-content-button):hover {
	background-color: var(--accent-primary-hover);
	border-color: var(--accent-primary);
}

button.default-button {
	background-color: transparent;
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-elements);
	box-shadow: rgba(var(--shadow-color), 0.05) 0px 1px 2px 0px;
	cursor: pointer;
	height: 3em;
	transition: border-color var(--transition-speed) ease-in-out;
	width: 3em;
}

button.default-button:hover {
	border-color: var(--border-focus-color);
}

button.default-button:not(:first-of-type) {
	margin-left: calc(0.25 * var(--margin-size));
}

button.default-button svg {
	fill: var(--accent-primary);
	height: 1.5em;
	transition: fill var(--transition-speed) ease-in-out;
	width: 1.5em;
}

button.default-button:hover svg {
	fill: var(--accent-primary-hover);
}

button.no-content-button {
	background-color: transparent;
	border: 1px solid var(--accent-primary);
	border-radius: var(--border-radius-elements);
	box-shadow: rgba(var(--shadow-color), 0.05) 0px 1px 2px 0px;
	color: var(--accent-primary);
	cursor: pointer;
	font-family: "Brandon-Text-Web-Regular";
	font-size: var(--button-font-size);
	margin-bottom: calc(0.75 * var(--margin-size));
	padding: 10px;
	text-transform: uppercase;
	transition:
		background-color var(--transition-speed) ease-in-out,
		border-color var(--transition-speed) ease-in-out;
	width: fit-content;
}

button.no-content-button:hover {
	border-color: var(--accent-primary-hover);
	color: var(--accent-primary-hover);
}

/* Uploader */
.status-processing {
	background-image: url('https://cdn.complian.app/icons/spinner.gif');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 1.5em 1.5em;
}

.status-uploadet {
	background-image: var(--icon-fa-classic-solid-circle-check-green);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 1.5em 1.5em;
}

.status-ready-for-upload {
	background-image: var(--icon-fa-classic-solid-circle-up-green);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 1.5em 1.5em;
}

.status-error {
	background-image: var(--icon-fa-classic-solid-circle-exclamation-red);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 1.5em 1.5em;
}

.delete-file-btn {
	background-color: #dc3545;
	color: white;
	border: none;
	padding: 5px 10px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 12px;
}

.delete-file-btn:hover {
	background-color: #c82333;
}

.fullscreen-drop-overlay {
	align-items: center;
	backdrop-filter: blur(3px);
	background-color: rgba(var(--color-blue), 0.1);
	border: 3px dashed rgba(var(--color-blue), 1);
	border-radius: var(--border-radius);
	display: none;
	justify-content: center;
	height: 100%;
	left: 0;
	pointer-events: none;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 9999;
}

.fullscreen-drop-overlay.visible {
	display: flex;
}

.fullscreen-drop-overlay-content {
	font-family: "Brandon-Text-Web-Regular";
	font-size: var(--header1-font-size);
	font-weight: normal;
	letter-spacing: 0.05em;
	text-align: center;
	text-transform: uppercase;
}

.progress-bar-background {
	background-color: var(--accent-primary);
	border-radius: var(--border-radius-elements);
	height: 38px;
	overflow: hidden;
	width: 100%;
}

.progress-bar-foreground {
	background-color: rgba(var(--color-blue), 1);
	height: 100%;
	transition: width 0.2s ease-in-out;
	width: var(--progress-percent, 0%);
}

.progress-bar-success {
	background-color: #28a745;
}

.progress-bar-error {
	background-color: #dc3545;
}


/* VIDEO BG*/
.video-bg {
	background-image: url('https://cdn.complian.app/img/bg-light.png');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.5s ease;
}

.video-toggle-dark { opacity: 0; z-index: 0; }
.video-toggle-light { opacity: 1; z-index: 1; }

@media (prefers-color-scheme: dark) {
	.video-bg { background-image: url('http://cdn.complian.app/img/bg-dark.png'); }
	.video-toggle-dark { opacity: 1; z-index: 1; }
	.video-toggle-light { opacity: 0; z-index: 0; }
}

/* RESPONSIVE DESIGN */
@media (max-width: 992px) {
	body,
	body.menu-hidden-desktop { grid-template-columns: 1fr; }

	#side-menu {
		position: fixed;
		transform: translate3d(-100%, 0, 0);
	}

	body.menu-open #side-menu { transform: translate3d(0, 0, 0 ); }

	body.menu-open { overflow:hidden; }
	.main-container { height: auto; min-height: 100vh; }
	main { overflow-y: visible; }
}

@media (prefers-reduced-motion: reduce){
	* { scroll-behavior: auto !important }

	#side-menu,
	.modal-overlay,
	body,
	header,
	main,
	modal {
		transition: none !important;
		animation: none !important
	}
}