@view-transition {
	navigation: auto;
}

/* Variables */

:root {
	interpolate-size: allow-keywords;

	--fontFamily: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
	--fontSizeSmall: 1.1rem;
	--fontSize: 1.3rem;
	--fontSizeH3: 1.4rem;
	--fontSizeH2: 1.6rem;
	--fontSizeH1: 1.8rem;
	--textLineHeight: 1.4;
	--colorText: #1e2d37;
	--colorTextLight: #fafafa;

	--hoverValue: #000 16%;
	--ghostValue: transparent 76%;
	--gradientStart: #4eb3e9;
	--gradientEnd: #6cdfa0;
	--gradient: linear-gradient(135deg, var(--gradientStart) 0%, var(--gradientEnd) 100%);
	--colorPrimary: #2fc0ee;
	--colorPrimaryGhost: color-mix(in oklab, var(--colorPrimary), var(--ghostValue));
	--colorPrimaryHover: color-mix(in oklab, var(--colorPrimary), var(--hoverValue));
	--colorSecondary: #5352ed;
	--colorSecondaryGhost: color-mix(in oklab, var(--colorSecondary), var(--ghostValue));
	--colorSecondaryHover: color-mix(in oklab, var(--colorSecondary), var(--hoverValue));
	--colorSuccess: #2fd98e;
	--colorSuccessGhost: color-mix(in oklab, var(--colorSuccess), var(--ghostValue));
	--colorSuccessHover: color-mix(in oklab, var(--colorSuccess), var(--hoverValue));
	--colorWarning: #ffa502;
	--colorWarningGhost: color-mix(in oklab, var(--colorWarning), var(--ghostValue));
	--colorWarningHover: color-mix(in oklab, var(--colorWarning), var(--hoverValue));
	--colorDanger: #fc466a;
	--colorDangerGhost: color-mix(in oklab, var(--colorDanger), var(--ghostValue));
	--colorDangerHover: color-mix(in oklab, var(--colorDanger), var(--hoverValue));
	--colorNeutral: #57606f;
	--colorNeutralGhost: color-mix(in oklab, var(--colorNeutral), var(--ghostValue));
	--colorNeutralHover: color-mix(in oklab, var(--colorNeutral), var(--hoverValue));
	--colorMuted: #8d9bb1;
	--colorMutedGhost: color-mix(in oklab, var(--colorMuted), transparent 85%);
	--colorMutedHover: color-mix(in oklab, var(--colorMuted), var(--hoverValue));
	--colorModalOverlay: rgba(30, 45, 55, .85);
	--bgTooltip: rgba(30, 45, 55, 0.9);
	--shadow: 0 15px 30px rgba(17, 58, 113, 0.15);
	--shadowNegative: 0 -15px 30px rgba(17, 58, 113, 0.15);
	--shadowSmall: 0 4px 12px rgba(17, 58, 113, 0.15);

	--inputHeight: 3.2rem;
	--inputHeightXL: 4.2rem;
	--panelRadius: .4rem;
	--bgApp: #ecf0f7;
	--bgPanel: #fff;
	--bgPanelGhost: color-mix(in oklab, var(--bgPanel), transparent 60%);
	--tableRowHover: brightness(96%);
	--inputBg: #f1f2f9;
	--inputBgHover: #e9eaf2;
	--colorInputDisabled: #778092;
	--colorBorder: #d9dce3;
	--toggleOffBg: #bbc3cf;
	--radioAndCheckboxBg: #ededf7;
	--radioAndCheckboxBorder: #d5d6e3;
	--multiselectSearchBg: #cfd0de;
	--multiSelectSearchInputBg: #fff;
	--multiSelectRowHover: #e4e5ef;
	--dropdownIcon: url('data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220%200%20448%20512%22%3E%3Cpath fill%3D%22%231e2d37%22 d%3D%22M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z%22%2F%3E%3C%2Fsvg%3E');
	--dropdownIconDisabled: url('data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220%200%20448%20512%22%3E%3Cpath fill%3D%22%23A2AFC7%22 d%3D%22M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z%22%2F%3E%3C%2Fsvg%3E');
	--dropdownIconPosition: top 50% right var(--spacingSmall);
	--dropdownIconSize: 10px;
	--buttonSmallSize: 2.4rem;
	--buttonXlSize: 4.8rem;
	--imageOverlay: rgba(102, 102, 153, 0.05);

	--gutterXSmall: .4rem;
	--gutterSmall: .8rem;
	--gutter: 1.6rem;
	--spacingXSmall: .4rem;
	--spacingSmall: .8rem;
	--spacing: 1.6rem;
	--spacingLarge: 2.4rem;
	--spacingXLarge: 3.2rem;

	--avatarSize: 200px;
	--avatarThumbSize: 40px;
}

/* Box sizing */

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

/* Wrappers */

* {
	margin: 0;
	padding: 0;
}

html {
	font-size: 62.5%;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	scroll-padding-top: 200px;
}

html, body {
	min-height: 100%;
}

body {
	background: var(--bgApp);
	color: var(--colorText);
	font-family: var(--fontFamily);
	font-size: var(--fontSize);
	font-style: normal;
	font-weight: 400;
}

::selection {
	background-color: var(--colorPrimary);
	color: var(--colorTextLight);
}

input, select, textarea, option, .select2 {
	font-family: var(--fontFamily);
	font-size: var(--fontSize);
}

.wrapper {
	margin-inline: auto;
}

.wrapper--small {
	max-width: 60rem;
}

.wrapper--medium {
	max-width: 96rem;
}

/* Header */

#header {
	position: sticky;
	display: flex;
	align-items: center;
	gap: var(--spacing);
	top: 0;
	width: 100%;
	height: 64px;
	padding-inline: var(--spacing);
	background: var(--bgPanel);
	z-index: 30;
}

#tidsrapporter_logo {
	display: block;
	width: 132px;
	height: 40px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	box-sizing: content-box;
}

#tidsrapporter_logo img {
	width: auto;
	height: 100%;
	font-size: 10px;
}

#user_nav {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
}

#user_nav .user-nav-link {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	min-width: 40px;
	height: 40px;
	background: var(--colorMutedGhost);
	color: var(--colorNeutral);
	border-radius: 20px;
	-webkit-transition: color .25s;
	transition: color .25s;
}

#user_nav .user-nav-link--user-menu {
	display: flex;
	gap: 4px;
	padding: 0 12px;
	cursor: pointer;
}

#user_nav .user-nav-link--recommend {
	gap: .6rem;
	background-color: transparent;
	color: var(--colorWarning);
	font-size: 1rem;
	padding-inline: 1.2rem;
	border: 1px solid var(--colorWarning);
	transition: .25s;

	&:is(:hover, :focus) {
		background-color: var(--colorWarning);
		color: var(--colorTextLight);
	}

	.user-nav-link__recommend__text {
		display: flex;
		flex-direction: column;

		strong {
			font-weight: 700;
		}
	}

	.user-nav-link__icon {
		transition: none;
	}
}

.user-nav-link__container {
	position: relative;
}

#user_nav .user-nav-link__badge {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	top: 0;
	right: 0;
	height: 16px;
	min-width: 16px;
	padding: 0 4px;
	background: var(--colorDanger);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	border-radius: 10px;
}

#user_nav .user-nav-link__badge--small {
	width: 10px;
	height: 10px;
	min-width: 0;
}

.user-nav-link__icon {
	font-size: 1.6rem;
	transition: all .2s ease-in-out;
}

.user-nav-link__icon--small {
	font-size: 1rem;
}

.user-nav-link__dropdown-drawer {
	position: absolute;
	display: flex;
	flex-direction: column;
	gap: 4px;
	top: 100%;
	right: 0;
	min-width: 200px;
	padding: var(--spacing);
	background: var(--bgPanel);
	border-radius: 4px;
	box-shadow: 0 15px 30px 0 rgba(17,58,113,0.15);
	transform: translateY(12px);
	transition: all .16s ease;
	opacity: 0;
	pointer-events: none;
}

.user-nav-link__dropdown-drawer.is-open {
	transform: translateY(4px);
	opacity: 1;
	pointer-events: auto;
}

.user-nav-link__dropdown-drawer__item {
	display: grid;
	grid-template-columns: 20px auto;
	align-items: center;
	gap: 4px;
	padding: 8px;
	margin-inline: -8px;
	color: var(--colorText);
	border-radius: 4px;
}

.user-nav-link__dropdown-drawer__item:is(:hover, :focus) {
	background: var(--colorMutedGhost);
	color: var(--colorText);
}

.user-nav-link__dropdown-drawer__item--danger,
.user-nav-link__dropdown-drawer__item--danger .user-nav-link__dropdown-drawer__item__icon {
	color: var(--colorDanger);
}

.user-nav-link__dropdown-drawer__item__icon {
	color: var(--colorMuted);
	background-position: center left !important;
}

.user-nav-link__dropdown-drawer__thumbnail {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	object-fit: cover;
}

.header-secondary-menu-opener {
	display: none;
}

#employee_impersonate_shortcut {
	margin: 0;
}

#notifications_app {
	display: inline-block;
	position: relative;
}

#notification_drawer {
	overflow: auto;
	position: absolute;
	display: flex;
	flex-direction: column;
	gap: 16px;
	top: 60px;
	right: 0;
	transform: translateY(0);
	width: 400px;
	max-height: 400px;
	padding: 16px;
	background: #fff;
	border-radius: 4px;
	box-shadow: 0 15px 30px 0 rgba(17,58,113,0.15);
	box-sizing: border-box;
}

#notification_drawer__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#notification_drawer__heading {
	margin: 0;
}

#notification_drawer__delete-all {
	cursor: pointer;
}

.pop-slide-enter-active,
.pop-slide-leave-active {
	transition: all .16s ease;
}

#notification_drawer.pop-slide-enter,
#notification_drawer.pop-slide-leave-to {
	transform: translateY(8px);
	opacity: 0;
}

#notification_drawer.pop-slide-enter-to,
#notification_drawer.pop-slide-leave {
	transform: translateY(0);
	opacity: 1;
}

#notification_drawer_close {
	position: absolute;
	padding: 10px;
	top: 0;
	right: 0;
	height: auto;
}

.notification_drawer__list-container {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: normal;
}

.notification-item {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: 16px 46px 16px 16px;
	border-radius: 4px;
	background: #F2F4F7;
}

.notification-item__content {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.notification-item__message {
	margin: 0;
	line-height: 1.3;
}

.notification-item__created-time {
	margin: 0;
	color: #8D9BB1;
	font-size: 11px;
}

.notification-item__delete-button {
	position: absolute;
	top: 0;
	right: 0;
	background: none;
	color: #8D9BB1;
	line-height: normal;
}

.notification-item__delete-button:is(:hover, :focus) {
	background: none;
}

#notification__empty-msg {
	display: flex;
	flex-direction: column;
	gap: 4px;
	text-align: center;
	color: #8D9BB1;
	margin-block: var(--spacing);
}

#notification__empty-msg .far {
	vertical-align: middle;
	margin-right: 5px;
	font-size: 24px;
}

/* Avatar */

.avatar-with-name {
	display: flex;
	align-items: center;
	gap: 8px;
}

.avatar {
	width: var(--avatarSize);
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	object-fit: cover;

	&.avatar--thumbnail {
		width: var(--avatarThumbSize);
	}
}

/* Navigation */

.js-mobile-menu-opener {
	display: none;
}

#navigation {
	position: sticky;
	top: 64px;
	width: 100%;
	padding: 4px;
	background: #fff;
	background: var(--gradient);
	z-index: 20;
}

#navigation ul {
	display: flex;
	list-style: none;
	padding: 0;
	margin: 0;
	white-space: nowrap;
}

#navigation ul li {
	line-height: 1;
	letter-spacing: normal;
}

#navigation ul li a {
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	border-radius: 6px;
}

#navigation > ul > li.current > a,
#navigation > ul > li:hover > a,
#navigation > ul > li > a:focus {
	color: #fff;
	background: rgba(255, 255, 255, .2);
}

#navigation > ul > li {
	position: relative;
	display: inline-block;
}

#navigation > ul > li > a {
	display: block;
	font-weight: 700;
	padding: 12px;
}

#navigation > ul > li.has-submenu > a:after {
	content: '\f0d7';
	font-family: 'Font Awesome 5 Pro';
	font-size: 10px;
	font-weight: 900;
}

#navigation li:hover > ul,
#navigation li.is-open > ul {
	transform: translateY(0);
	opacity: 1;
	pointer-events: auto;
}

#navigation > ul > li ul {
	display: flex;
	flex-direction: column;
	gap: 4px;
	position: absolute;
	z-index: 30;
	top: 40px;
	background: #fff;
	padding: 8px 16px;
	border-radius: 4px;
	box-shadow: var(--shadow);
	opacity: 0;
	transform: translateY(8px);
	transition: all .3s ease-in-out;
	pointer-events: none;
}

#navigation ul li ul li a {
	color: var(--colorText);
	padding: 10px 8px;
	margin-inline: -8px;
	font-weight: 400;
	border-radius: 4px;
}

#navigation ul li ul li a:is(:hover, :focus) {
	color: var(--colorText);
	background: var(--colorMutedGhost);
}

#navigation > ul > li {
	position: relative;
}

#navigation > ul > li ul a {
	display: block;
	padding: 5px 15px;
}

#navigation > ul > li > ul > li {
	position: relative;
}

#navigation > ul > li > ul > li > a {
	padding-right: 30px;
}

#navigation > ul > li > ul > li.has-submenu > a:after {
	content: '\f0da';
	position: absolute;
	top: 50%;
	right: 0px;
	color: var(--colorMuted);
	font-family: 'Font Awesome 5 Pro';
	font-size: 11px;
	font-weight: 900;
	-ms-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

#navigation > ul > li > ul > li > ul {
	top: -8px;
	left: calc(100% + 10px);
}

#navigation > ul > li > a.system-mode-toggle {
	display: none
}

/* Content */

#content {
	padding: var(--spacing);
	padding-bottom: 1px;

	header {
		position: sticky;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		gap: 8px;
		top: 109px;
		width: -webkit-fill-available;
		width: -moz-available;
		height: calc(var(--inputHeight) + var(--spacingLarge));
		background: #fff;
		padding: 0 12px 0 var(--spacing);
		margin-bottom: var(--spacing);
		border-radius: var(--panelRadius);
		z-index: 10;

		h1 {
			color: var(--colorText);
			margin: 0 auto 0 0;
		}

		> span {
			display: flex;
			align-items: center;
			gap: var(--spacingSmall);
		}

		button, .button {
			margin: 0;
		}
	}
}

.grid-row > header {
	margin-inline: calc(var(--spacing) / 2);
}

.content,
*[class*='content-1'],
*[class*='content-2'],
*[class*='content-3'],
*[class*='content-4'] {
	position: relative;
	display: inline-block;
	vertical-align: top;
	background-color: var(--bgPanel);
	padding: var(--spacing);
	padding-bottom: 1px;
	border-radius: var(--spacingXSmall);
	margin-right: calc(var(--spacing) - var(--spacingXSmall));
	margin-bottom: var(--spacing);
	box-sizing: border-box;
}

.content {
	width: 100%;
	margin-right: 0;

	&.content--narrow {
		padding-top: calc(var(--spacingXSmall) * 3);

		.content-header {
			margin-bottom: calc(var(--spacingXSmall) * 3);

			.content-header-actions {
				.accordion-toggle {
					font-size: var(--fontSize);
				}
			}
		}
	}

	&.border {
		border: 1px solid var(--colorBorder);
	}

	.content-header {
		display: flex;
		align-items: center;
		gap: var(--spacing);
		margin-bottom: var(--spacing);

		h1, h2, h3, p {
			margin: 0;
		}

		.content-header-actions {
			display: flex;
			align-items: center;
			gap: var(--spacingSmall);
			margin-left: auto;

			button, .button {
				margin: 0;
			}
		}
	}
}

.accordion-toggle {
	color: var(--colorMuted);
	font-size: var(--fontSizeH2);
	margin-left: var(--spacingSmall) !important;
	transition: .25s;

	&:is(:hover, :focus) {
		color: var(--colorMuted);
	}

	&.open {
		transform: rotate(180deg);
	}
}

.content-1-2 {
	width: calc(100% / 2 - var(--spacing));
}

.content-1-3 {
	width: calc(100% / 3 - var(--spacing));
}

.content-2-3 {
	width: calc(100% / 3 * 2 - var(--spacing));
}

.content-1-4 {
	width: calc(100% / 4 - var(--spacing));
}

.content-3-4 {
	width: calc(100% / 4 * 3 - var(--spacing));
}

.content-1-5 {
	width: calc(100% / 5 -  var(--spacing));
}

.content-2-5 {
	width: calc(100% / 5 * 2 - var(--spacing));
}

.content-3-5 {
	width: calc(100% / 5 * 3 - var(--spacing));
}

.content-4-5 {
	width: calc(100% / 5 * 4 - var(--spacing));
}

/* Buttons */

.button, button {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	vertical-align: middle;
	gap: var(--spacingXSmall);
	width: fit-content;
	height: var(--inputHeight);
	width: fit-content;
	background-color: var(--colorPrimary);
	color: var(--colorTextLight);
	font-family: var(--fontFamily);
	font-size: var(--fontSize);
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	padding-inline: var(--spacingSmall);
	border: 1px solid transparent;
	border-radius: var(--panelRadius);
	cursor: pointer;
	transition: .25s;

	i {
		pointer-events: none;
	}

	&.button--icon-only {
		width: var(--inputHeight);
		padding-inline: 0;
	}

	&:is(:hover, :focus) {
		background-color: var(--colorPrimaryHover);
		color: var(--colorTextLight);
	}

	&.button--link {
		background-color: transparent;
		color: var(--colorPrimary);
	}

	.badge {
		font-size: var(--fontSizeSmall);
		padding: .2rem .4rem;
	}
}

.button--block {
	width: 100%;
}

.button-small,
.button--small {
	height: var(--buttonSmallSize);
	padding-inline: var(--spacingXSmall);

	&.button--icon-only {
		width: var(--buttonSmallSize);
	}
}

.button--xl {
	height: var(--buttonXlSize);

	&.button--icon-only {
		width: var(--buttonXlSize);
	}
}

button[disabled],
button[disabled]:is(:hover, :focus) {
	background-color: var(--inputBg);
	color: var(--colorMuted);
	border-color: transparent;
	cursor: not-allowed;
}

.button-ghost,
.button--ghost {
	background-color: var(--colorPrimaryGhost);
	color: var(--colorPrimaryHover);

	&:is(:hover, :focus) {
		background-color: var(--colorPrimary);
		color: var(--colorTextLight);
	}
}

.button-border,
.button--border {
	background-color: transparent;
	color: var(--colorPrimary);
	border-color: var(--colorPrimary);

	&:is(:hover, :focus) {
		background-color: var(--colorPrimary);
		color: var(--colorTextLight);
	}
}

.button-white-blue,
.button--seamless {
	background-color: transparent;
	color: var(--colorPrimary);

	&:is(:hover, :focus) {
		background-color: var(--colorPrimaryGhost);
		color: var(--colorPrimaryHover);
	}
}

.button--secondary {
	background-color: var(--colorSecondary);
	color: var(--colorTextLight);

	&:is(:hover, :focus) {
		background-color: var(--colorSecondaryHover);
	}

	&.button--ghost {
		background-color: var(--colorSecondaryGhost);
		color: var(--colorSecondary);

		&:is(:hover, :focus) {
			background-color: var(--colorSecondary);
			color: var(--colorTextLight);
		}
	}

	&.button--border {
		background-color: transparent;
		color: var(--colorSecondary);
		border-color: var(--colorSecondary);

		&:is(:hover, :focus) {
			background-color: var(--colorSecondary);
			color: var(--colorTextLight);
		}
	}

	&.button--seamless {
		background-color: transparent;
		color: var(--colorSecondary);

		&:is(:hover, :focus) {
			background-color: var(--colorSecondaryGhost);
			color: var(--colorSecondaryHover);
		}
	}

	&.button--link {
		background-color: transparent;
		color: var(--colorSecondary);
	}
}

.button-green,
.button--success {
	background-color: var(--colorSuccess);
	color: var(--colorTextLight);

	&:is(:hover, :focus) {
		background-color: var(--colorSuccessHover);
	}

	&.button--ghost {
		background-color: var(--colorSuccessGhost);
		color: var(--colorSuccessHover);

		&:is(:hover, :focus) {
			background-color: var(--colorSuccess);
			color: var(--colorTextLight);
		}
	}

	&.button--border {
		background-color: transparent;
		color: var(--colorSuccess);
		border-color: var(--colorSuccess);

		&:is(:hover, :focus) {
			background-color: var(--colorSuccess);
			color: var(--colorTextLight);
		}
	}

	&.button--seamless {
		background-color: transparent;
		color: var(--colorSuccess);

		&:is(:hover, :focus) {
			background-color: var(--colorSuccessGhost);
			color: var(--colorSuccessHover);
		}
	}

	&.button--link {
		background-color: transparent;
		color: var(--colorSuccess);
	}
}

.button-red,
.button--danger {
	background-color: var(--colorDanger);

	&:is(:hover, :focus) {
		background-color: var(--colorDangerHover);
	}

	&.button--ghost {
		background-color: var(--colorDangerGhost);
		color: var(--colorDangerHover);

		&:is(:hover, :focus) {
			background-color: var(--colorDanger);
			color: var(--colorTextLight);
		}
	}

	&.button--border {
		background-color: transparent;
		color: var(--colorDanger);
		border-color: var(--colorDanger);

		&:is(:hover, :focus) {
			background-color: var(--colorDanger);
			color: var(--colorTextLight);
		}
	}

	&.button--seamless {
		background-color: transparent;
		color: var(--colorDanger);

		&:is(:hover, :focus) {
			background-color: var(--colorDangerGhost);
			color: var(--colorDangerHover);
		}
	}

	&.button--link {
		background-color: transparent;
		color: var(--colorDanger);
	}
}

.button-white-red {
	background-color: var(--bgPanel);
	color: var(--colorDanger);

	&:is(:hover, :focus) {
		background-color: var(--colorDangerGhost);
		color: var(--colorDangerHover);
	}
}

.button--warning {
	background-color: var(--colorWarning);

	&:is(:hover, :focus) {
		background-color: var(--colorWarningHover);
	}

	&.button--ghost {
		background-color: var(--colorWarningGhost);
		color: var(--colorWarningHover);

		&:is(:hover, :focus) {
			background-color: var(--colorWarning);
			color: var(--colorTextLight);
		}
	}

	&.button--border {
		background-color: transparent;
		color: var(--colorWarning);
		border-color: var(--colorWarning);

		&:is(:hover, :focus) {
			background-color: var(--colorWarning);
			color: var(--colorTextLight);
		}
	}

	&.button--seamless {
		background-color: transparent;
		color: var(--colorWarning);

		&:is(:hover, :focus) {
			background-color: var(--colorWarningGhost);
			color: var(--colorWarningHover);
		}
	}

	&.button--link {
		background-color: transparent;
		color: var(--colorWarning);
	}
}

.button--neutral {
	background-color: var(--colorNeutral);

	&:is(:hover, :focus) {
		background-color: var(--colorNeutralHover);
	}

	&.button--ghost {
		background-color: var(--colorNeutralGhost);
		color: var(--colorNeutralHover);

		&:is(:hover, :focus) {
			background-color: var(--colorNeutral);
			color: var(--colorTextLight);
		}
	}

	&.button--border {
		background-color: transparent;
		color: var(--colorNeutral);
		border-color: var(--colorNeutral);

		&:is(:hover, :focus) {
			background-color: var(--colorNeutral);
			color: var(--colorTextLight);
		}
	}

	&.button--seamless {
		background-color: transparent;
		color: var(--colorNeutral);

		&:is(:hover, :focus) {
			background-color: var(--colorNeutralGhost);
			color: var(--colorNeutralHover);
		}
	}

	&.button--link {
		background-color: transparent;
		color: var(--colorNeutral);
	}
}

.button--link {
	height: auto;
	padding: 0;

	&:is(:hover, :focus) {
		background-color: transparent !important;
	}
}

.button--muted {
	background-color: var(--colorMuted);

	&:is(:hover, :focus) {
		background-color: var(--colorNeutralHover);
	}

	&.button--ghost {
		background-color: var(--colorNeutralGhost);
		color: var(--colorMuted);

		&:is(:hover, :focus) {
			background-color: var(--colorMuted);
			color: var(--colorTextLight);
		}
	}

	&.button--border {
		background-color: transparent;
		color: var(--colorNeutralHover);
		border-color: var(--colorMuted);

		&:is(:hover, :focus) {
			background-color: var(--colorMuted);
			color: var(--colorTextLight);
		}
	}

	&.button--seamless {
		background-color: transparent;
		color: var(--colorMuted);

		&:is(:hover, :focus) {
			background-color: var(--colorNeutralGhost);
		}
	}
}

.button-white,
.button--input {
	background-color: var(--inputBg);
	color: var(--colorText);

	&:is(:hover, :focus) {
		background-color: var(--inputBgHover);
		color: var(--colorText);
	}
}

.button--link {
	height: auto;
	line-height: normal;
	padding: 0;

	&:is(:hover, :focus) {
		background-color: transparent !important;
	}
}

.dynamic-delete {
	height: auto;
	background-color: transparent;
	color: var(--colorDanger);
	line-height: 1;
	padding: 0;
}

.dynamic-delete:is(:hover, :focus) {
	background-color: transparent;
	color: var(--colorDangerHover);
}

.button-white-red {
	background-color: var(--bgPanel);
	color: var(--colorDanger);

	&:is(:hover, :focus) {
		background-color: var(--bgPanel);
		color: var(--colorDangerHover);
	}
}

.button--link {
	height: auto;
	padding: 0;

	&:is(:hover, :focus) {
		background-color: transparent !important;
	}
}

.dynamic-delete {
	height: auto;
	background-color: transparent;
	color: var(--colorDanger);
	line-height: 1;
	padding: 0;
}

.dynamic-delete:is(:hover, :focus) {
	background-color: transparent;
	color: var(--colorDangerHover);
}

.button-seamless {
	height: unset;
	background: unset;
	line-height: unset;
	padding: unset;
}

.button-seamless:hover,
.button-seamless:focus {
	background: unset;
}

.button--collapsed {
	padding: 0;
	height: auto;
}

.button--stacked {
	display: flex;
	flex-direction: column;
	gap: var(--spacingXSmall);
	font-size: var(--fontSizeSmall);
	font-weight: 400;
	padding: 4px;
	height: auto;
}

.content {
	button + button,
	button + .button,
	.button + button,
	.button + .button {
		margin-left: 7px;
	}
}

.button-block,
.button--block {
	width: 100%;
}

.button-block + .button-block {
	margin-left: 0;
	margin-top: var(--spacingSmall);
}

.button-input {
	min-width: var(--inputHeight);
	height: var(--inputHeight);
	padding-inline: 0;
}

/* Fix for Firefox rendering buttons wrong */
button::-moz-focus-inner {
	margin-top: -1px;
	margin-bottom: 4px;
	padding: 0;
	border: 0
}

.button-icon {
	height: auto;font-size: var(--fontSizeSmall);
	line-height: 1;
	padding: 1px 2px;
	margin-left: var(--spacingXSmall);
	vertical-align: middle;
}

.button-row {
	line-height: 28px;
}

.button-row > button,
.button-row > .button {
	margin-top: 5px;
	margin-bottom: 5px;
}

/* Text */

h1 {
	font-size: var(--fontSizeH1);
	font-weight: 700;
	margin-bottom: var(--spacing);
}

h2 {
	font-size: var(--fontSizeH2);
	font-weight: 600;
	margin-bottom: var(--spacing);
}

h3 {
	font-size: var(--fontSizeH3);
	font-weight: 600;
	margin-bottom: var(--spacing);
}

p {
	line-height: var(--textLineHeight);
	margin-bottom: var(--spacing);
}

b, strong {
	font-weight: 600;
}

ul, ol {
	margin: 20px 0;
	padding-left: 30px;
	line-height: var(--textLineHeight);
	list-style-position: outside;
}

.bordered-list {
	list-style: none;
	padding: 0;
	margin-top: 0;

	li,
	.bordered-list__item {
		display: flex;
		align-items: center;
		gap: var(--spacing);
		padding-block: var(--spacingSmall);

		&:not(:last-child) {
			border-bottom: 1px solid var(--colorBorder);
		}

		label {
			display: flex;
			align-items: center;
			gap: var(--spacingSmall);
		}

		.bordered-list__item__actions {
			display: flex;
			align-items: center;
			gap: var(--spacingSmall);
			margin-left: auto;
		}
	}
}

a {
	text-decoration: none;
	color: var(--colorPrimary);
	transition: .25s;

	&:is(:hover, :focus) {
		color: var(--colorPrimaryHover);
	}
}

*:target {
	border: 1px solid var(--colorWarning) !important;
}

a img {
	border: 0;
}

img {
	max-width: 100%;
}

dl {
	letter-spacing: -0.2em;
}

dt, dd {
	display: inline-block;
	vertical-align: top;
	width: 50%;
	margin-top: 5px;
	letter-spacing: 0;
}

dt {
	font-weight: 700;
}

.second-row {
	display: block;
	color: var(--colorMuted);

	&.second-row--small {
		font-size: var(--fontSizeSmall);
	}
}

/* Misc */

.t-success,
.ok,
.green {
	color: var(--colorSuccess) !important;
}

.t-primary {
	color: var(--colorPrimary);
}

.t-secondary {
	color: var(--colorSecondary);
}

.t-danger,
.error,
.red {
	color: var(--colorDanger) !important;
}

.t-warning,
.yellow {
	color: var(--colorWarning) !important;
}

.t-neutral {
	color: var(--colorNeutral);
}

.t-muted {
	color: var(--colorMuted) !important;
}

.attention-box {
	position: relative;
	background-color: var(--colorWarningGhost);
	line-height: 1.4;
	padding: var(--spacing);
	padding-left: 4.8rem;
	border-left: 0.4rem solid var(--colorWarning);
	border-radius: var(--panelRadius);
	margin-bottom: var(--spacing);

	&:not([hidden]) {
		display: block;
	}

	&:before {
		content: '\f071';
		position: absolute;
		top: 50%;
		left: var(--spacing);
		font-family: 'Font Awesome 5 Pro';
		font-weight: 900;
		color: var(--colorWarning);
		transform: translateY(-50%);
	}

	&.info,
	&.attention-box--info {
		background-color: var(--colorPrimaryGhost);
		border-color: var(--colorPrimary);

		&:before {
			content: '\f05a';
			color: var(--colorPrimary);
		}
	}

	&.success,
	&.attention-box--success {
		background-color: var(--colorSuccessGhost);
		border-color: var(--colorSuccess);

		&:before {
			content: '\f058';
			color: var(--colorSuccess);
		}
	}

	&.danger,
	&.attention-box--danger {
		background-color: var(--colorDangerGhost);
		border-color: var(--colorDanger);

		&:before {
			color: var(--colorDanger);
		}
	}

	&:has(.attention-box__actions) {
		display: flex;
		align-items: center;
		gap: var(--spacing);

		@media screen and (max-width: 1024px) {
			flex-direction: column;
			align-items: start;
			gap: var(--spacingSmall);
		}

		.attention-box__actions {
			display: flex;
			align-items: center;
			gap: var(--spacingSmall);
			margin-left: auto;

			button, .button {
				margin: 0;
			}

			@media screen and (max-width: 1024px) {
				margin-left: unset;
			}
		}
	}

	&:has(.button-seamless) {
		padding-right: calc(var(--spacing) * 3 - var(--spacingXSmall));

		.button-seamless {
			position: absolute;
			top: var(--spacingSmall);
			right: var(--spacingSmall);
			padding: var(--spacingSmall);

			&:is(:hover, :focus) {
				background-color: rgb(0 0 0 / 10%);
			}
		}
	}
}

.attention-box a:not(.button) {
	color: var(--colorWarning);
}

.attention-box a:not(.button):is(:hover, :focus) {
	color: var(--colorWarningHover);
}

.floatleft {
	float: left;
}

.floatright {
	float: right;
}

.clear {
	clear: both;
}

.inline-block {
	display: inline-block;
}

.padding-box {
	display: inline-block;
	margin-right: 5px;
	margin-bottom: 5px;
}

.hide-desktop {
	display: none !important;
}

/* Badges */

.badge {
	display: inline-block;
	min-width: 15px;
	background: #ff5252;
	color: #fff;
	text-align: center;
	line-height: 1;
	padding: 1px 5px 2px 5px;
	border-radius: 10px;
	margin-left: 2px;
	box-sizing: border-box;
}

.badge.badge-green {
	background: #39b563;
}

/* Pills */

.pill {
	display: inline-flex;
	align-items: center;
	gap: var(--spacingXSmall);
	width: fit-content;
	background-color: var(--inputBgHover);
	color: var(--colorNeutral);
	font-size: .9rem;
	font-weight: 600;
	line-height: var(--fontSizeSmall);
	text-transform: uppercase;
	padding: var(--spacingXSmall) var(--spacingSmall);
	border-radius: var(--inputHeight);
	white-space: nowrap;

	&.pill--primary {
		background-color: var(--colorPrimaryGhost);
		color: var(--colorPrimaryHover);
	}

	&.pill--secondary {
		background-color: var(--colorSecondaryGhost);
		color: var(--colorSecondaryHover);
	}

	&.success,
	&.pill--success {
		background-color: var(--colorSuccessGhost);
		color: var(--colorSuccessHover);
	}

	&.pill--warning {
		background-color: var(--colorWarningGhost);
		color: var(--colorWarningHover);
	}

	&.danger,
	&.pill--danger {
		background-color: var(--colorDangerGhost);
		color: var(--colorDangerHover);
	}
}

/* Tables */

table {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	margin-bottom: var(--spacing);
	background-color: var(--colorPrimary);
	background: var(--gradient);
	border-top-right-radius: var(--panelRadius);
	border-top-left-radius: var(--panelRadius);
}

@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {
	table {
		background: var(--colorPrimary);
	}
}

table > thead > tr:first-of-type {
	background: transparent !important;
}

table > thead > tr > th {
	padding: 0 8px;
	height: 35px;
	border: 0;
	color: #fff;
	font-weight: 600;
	line-height: 1;
}

table th {
	padding-left: 10px;
	padding-bottom: 15px;
	padding-top: 15px;
	border-bottom: 2px solid #222;
	color: #1299c7;
	font-weight: 700;
	text-align: left;
	word-break: break-word;
	overflow-wrap: break-word;
	box-sizing: content-box;
}

table tr {
	background-color: var(--bgPanel);
	border-bottom: 1px solid var(--colorBorder);
}

table:not(.no-hover, .txp-table) tr:hover td,
table:not(.no-hover. .txp-table) tr:hover td a {
	color: #1299c7;
}

table tr.data-table-sum-row {
	background: #eee !important;
}

table td {
	color: #222;
	padding: 8px;
	word-wrap: break-word;
	box-sizing: content-box;
}

table td a {
	color: #222;
}

table tr.row-deleted td {
	opacity: 0.6;
	text-decoration: line-through;
}

table tr td span.report-change {
	color: red;
}

.data-table-sum-row > td {
	padding-left: 10px;
	padding-bottom: 15px;
	padding-top: 15px;
	border-top: 2px solid #222;
	font-weight: 700;
	font-size: 16px;
}

.gray {
	color: #a4b0be !important;
}

.black {
	color: #333 !important;
}

th.small {
	width: 200px;
	box-sizing: content-box;
}

td.tight, th.tight, col.tight {
	width: 100px;
}

th.flag-tight {
	width: 50px;
}

th.sort-tight {
	width: 0;
}

th.very-tight {
	width: 70px;
}

th.tight-date {
	min-width: 70px;
}

td.center, th.center {
	text-align: center;
}

td.right, th.right, .right {
	text-align: right;
}

.vertical-align--bottom {
	vertical-align: bottom;
}

.currency,
.percent {
	font-variant-numeric: tabular-nums;
	text-align: right;
}

th.currency {
	width: 80px;
}

.js-data-cell-action {
	cursor: pointer;
}

.inactive td {
	opacity: 0.4;
}

.center {
	text-align: center;
}

.text {
	color: var(--colorText);

	&.text--small {
		font-size: var(--fontSizeSmall);
	}

	&.text--muted {
		color: var(--colorMuted);
	}
}

.text--small {
	font-size: var(--fontSizeSmall);
}

.text--truncate {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
	text-overflow: ellipsis;
}

.loading-container {
	position: relative;

	:before {
		content: '';
		background: rgba(255, 255, 255, .9);
		position: absolute;
		inset: 0;
	}

}


/* TXP Tables */

.txp-table {
	background: none;
	margin-bottom: var(--spacing);

	@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {
		.txp-table {
			background-color: var(--bgPanel);
		}
	}

	&.txp-table--narrow {
		th,
		td {
			padding: 3px 2px;
		}
	}

	&.txp-table--narrow {
		th,
		td {
			padding: 3px 2px;
		}
	}

	tr {
		background-color: var(--bgPanel) !important;
		border-bottom: 1px solid var(--colorBorder);

		&.txp-table-sum {
			background-color: Var(--colorMutedGhost) !important;

			td {
				font-weight: 600;
			}
		}
	}

	.txp-table__thumbnail {
		display: flex;
		align-items: center;
		gap: var(--spacing);
		--imageSize: 5rem;

		@media screen and (max-width: 1024px) {
			--imageSize: 10rem;
		}

		.txp-table__thumbnail__container {
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0.4rem;
			width: var(--imageSize);
			min-width: var(--imageSize);
			border-radius: var(--panelRadius);
			box-sizing: border-box;

			&:hover {
				transform: scale(2);
				box-shadow: var(--shadow);
			}

			&:before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: var(--imageOverlay);
				border-radius: var(--panelRadius);
			}

			&.txp-table__thumbnail__container--round {
				padding: 0;
				border-radius: 50%;
				overflow: hidden;

				.txp-table__thumbnail__image {
					width: var(--imageSize);
					min-width: var(--imageSize);
				}
			}

			.txp-table__thumbnail__image {
				width: calc(var(--imageSize) - 0.8rem);
				min-width: calc(var(--imageSize) - 0.8rem);
				aspect-ratio: 1 / 1;
				object-fit: cover;
				border-radius: var(--panelRadius);
			}
		}

		.txp-table__thumbnail__icon {
			display: flex;
			justify-content: center;
			align-items: center;
			width: var(--imageSize);
			min-width: var(--imageSize);
			aspect-ratio: 1 / 1;
			border-radius: var(--panelRadius);
			background-color: var(--imageOverlay);
			color: var(--colorMuted);
		}

		.txp-table__thumbnail__content {
			display: flex;
			flex-direction: column;
		}
	}

	thead {
		position: relative;

		tr {
			border-bottom: 0;

			th {
				height: auto;
				color: var(--colorText);
				line-height: 1.4;
				padding: var(--spacingSmall);
				box-sizing: border-box;
			}

			th {
				font-weight: 600;

				.sort-column {
					color: var(--colorText);

					&:after {
						color: var(--colorMuted);
					}
				}
			}
		}

		/* Styling for Safari only */
		@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {
			tr {
				border-bottom: 2px solid var(--colorPrimary);
			}
		}

		&:after {
			content: '';
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 2px;
			background: var(--gradient);
		}

		/* Styling for Safari only */
		@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {
			&:after {
				display: none;
			}
		}
	}

	tbody {
		tr {
			background-color: var(--bgPanel) !important;
			border-bottom: 1px solid var(--colorBorder);
			transition: filter .25s;

			&:hover {
				filter: var(--tableRowHover);
			}

			&:last-child {
				border-bottom: 0;
			}

			td {
				height: auto;
				color: var(--colorText);
				font-weight: 400;
				line-height: 1.4;
				padding: var(--spacingSmall);
				box-sizing: border-box;

				p {
					margin: 0;
				}

				.form-group {
					margin-bottom: 0;
				}

				label {
					font-weight: 400;
				}

				&.txp-table-actions {
					text-align: right;

					.button + .button {
						margin-top: 0 !important;
						margin-left: .4rem !important;
					}
				}

				&.empty-result {
					color: var(--colorMuted);
					font-style: italic;
					line-height: 1.4;
				}

				textarea {
					min-height: var(--inputHeight);
					padding-block: .6rem;
				}
			}
		}
	}

	.txp-table-sum {
		background-color: Var(--colorMutedGhost) !important;

		td {
			font-weight: 600;
		}
	}

	tfoot {
		tr {
			border-top: 1px solid var(--colorBorder);
			border-bottom: 0;

			th {

			}

			td {
				font-weight: 600;

				&:has(button) {
					padding: var(--spacing) 0 0 0;
				}
			}
		}
	}
}

/* PDF preview */
.pdf-preview,
.panel.pdf-preview {
	padding: 3rem 6rem 4rem 6rem;

	table {
		th {
			font-weight: 700;
			word-break: break-word;
			overflow-wrap: break-word;
			box-sizing: content-box;
			/* Reset old css */
			padding-left: 0;
			padding-bottom: 0;
			padding-top: 0;
			border-bottom: none;
			color: initial;
			/* End reset */
		}

		tr {
			border-bottom: none;
		}
	}
}

.action-link {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	position: relative;
	height: auto;
	background-color: transparent;
	color: var(--colorText);
	padding: var(--spacingSmall);
	border-radius: var(--spacingXSmall);
	margin: 0;
	cursor: pointer;
	transition: .25s;

	&.action-link--small {
		padding: var(--spacingXSmall);
	}

	&[disabled] {
		background-color: transparent;
	}

	&:is(:hover, :focus) {
		background-color: var(--colorNeutralGhost);
		color: var(--colorText);
	}

	&.action-link--danger {
		color: var(--colorDanger);

		&:is(:hover, :focus) {
			background-color: var(--colorDangerGhost);
		}
	}

	&.action-link--warning {
		color: var(--colorWarning);

		&:is(:hover, :focus) {
			background-color: var(--colorWarningGhost);
		}
	}

	&.action-link--success {
		color: var(--colorSuccess);

		&:is(:hover, :focus) {
			background-color: var(--colorSuccessGhost);
		}
	}


	&.red:is(:hover, :focus),
	&.t-danger:is(:hover, :focus) {
		background-color: var(--colorDangerGhost);
	}

	&.action-link--warning {
		color: var(--colorWarning);

		&:is(:hover, :focus) {
			background-color: var(--colorWarningGhost);
		}
	}

	&.action-link--success {
		color: var(--colorSuccess);

		&:is(:hover, :focus) {
			background-color: var(--colorSuccessGhost);
		}
	}

	/* Fallback, remove when we only use action-link modifiers */
	&.red:is(:hover, :focus),
	&.t-danger:is(:hover, :focus){
		background-color: var(--colorDangerGhost);
	}

	&.t-warning:is(:hover, :focus) {
		background-color: var(--colorWarningGhost);
	}

	&.t-success:is(:hover, :focus) {
		background-color: var(--colorSuccessGhost);
	}
	/* End fallback */

	.badge {
		position: absolute;
		top: 0;
		right: 0;
		background-color: var(--colorMuted);
		font-size: var(--fontSizeSmall);
		padding: calc(var(--spacingXSmall) / 2);
		margin: 0;
	}
}

.js-data-li-action {
	cursor: pointer;
}

th .sort-column {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: #fff;
}

th .sort-column:after {
	content: '\f0dc';
	font-family: 'Font Awesome 5 Pro';
	font-size: 10px;
	font-weight: 900;
}

th .sort-column-asc:after {
	content: '\f0d7';
}

th .sort-column-desc:after {
	content: '\f0d8';
}

.use-dynamic-table {
	display: flex;
	flex-direction: column;
	gap: var(--spacing);

	> *,
	.txp-table {
		margin: 0;
	}
}

/* Forms */

fieldset {
	appearance: none;
	border: inherit;
}

.input-small {
	width: 4em;
	box-sizing: content-box;
}

.input-medium {
	width: 7em;
	box-sizing: content-box;
}

.input-full {
	box-sizing: border-box;
	width: 100%;
}

.form-control {
	padding-top: 10px;
	text-align: right;
	clear: both;
	margin-right: 1%;
}

.inner-content .form-control {
	margin-right: 0;
}

.form-group-inline label {
	margin-right: 10px;
}

.js-symetric-search {
	position: absolute;
	right: 0;
	bottom: 0;
}

.label-flex {
	display: flex;
	justify-content: space-between;
	width: 100%;
}

.label-flex-boxed-content {
	color: #19aae2;
}

.label-flex-boxed-content:hover {
	cursor: pointer;
}

.check-all-label {
	display: inline-flex;
	align-items: center;
	gap: var(--spacingXSmall);
	background-color: var(--colorPrimaryGhost);
	font-size: var(--fontSizeSmall);
	padding: var(--spacingXSmall) var(--spacingSmall);
	border-radius: var(--spacing);
	margin-bottom: var(--spacing);
	user-select: none;

	label {
		display: flex;
		align-items: center;
		gap: var(--spacingXSmall);
	}

	input {
		background-color: var(--bgPanel) !important;
	}
}

h3 label {
	font-weight: 600 !important;

	.check-all-label {
		font-weight: 400;
		margin-bottom: 0;
		margin-left: var(--spacingSmall);
	}
}

label {
	font-weight: 600;
	cursor: pointer;

	&:has(input[type="checkbox"], input[type="radio"]) {
		font-weight: 400;
	}
}

.form-group,
.setting-form-group {
	position: relative;
	line-height: normal;
	margin-block: 0 var(--spacing);

	@media screen and (min-width: 1024px) {
		&:has(input[type="date"]):not(:has(.input-full)) {
			width: fit-content;
		}
	}

	&:has(*:required):not(:has(.t-danger)) label:not(.toggle):first-of-type:after {
		content: '*';
		color: var(--colorDanger);
	}

	.form-group__label-container {
		display: flex;
		align-items: center;
		gap: var(--spacingXSmall);
	}

	.form-group__label {
		display: flex;
		align-items: center;
		font-weight: 600;
		margin-bottom: .4rem;
		cursor: pointer;
	}

		.form-group__actions {
			display: flex;
			align-items: center;
			gap: var(--spacingXSmall);
			padding-left: var(--spacingSmall);
			margin-left: auto;

			&:before {
				content: '';
				width: var(--spacing);
			}

		button {
			margin: 0;
		}
	}

	&.form-group--flex {
		display: flex;
		flex-direction: column;
		gap: var(--spacingXSmall);

		label {
			margin-bottom: 0;
		}
	}

	.faux-input {
		display: block;
		height: var(--inputHeight);
		align-content: center;
	}

	.input-group,
	[data-suffix] {
		position: relative;
		display: inline-flex;
		align-items: center;
		width: 100%;
		background-color: var(--inputBg);
		border-radius: var(--panelRadius);
		transition: .25s;

		&.input-group--auto-width {
			width: auto;
		}

		&:is(:hover, :focus, :focus-within),
		&:has(.select2-container--open) {
			background-color: var(--inputBgHover);
			box-shadow: inset 0 0 0 1px var(--colorBorder);
		}

		&:after {
			content: attr(data-suffix);
			color: var(--colorMuted);
			white-space: nowrap;
			padding-right: var(--spacingSmall);
			margin-left: auto;
			transition: .25s;
		}

		&.input-group--pre-icon {
			padding-left: var(--spacingSmall);

			&:before {
				content: attr(data-pre-icon);
				font-family: 'Font Awesome 6 Pro', serif;
			}

			&:after {
				padding-right: 0;
			}
		}

		input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"]),
		textarea,
		select,
		.select2-selection--single,
		.vs__dropdown-toggle,
		.vs__dropdown-toggle:is(:hover, :focus),
		.vs--open .vs__dropdown-toggle {
			width: 100%;
			background-color: transparent !important;
			border-color: transparent !important;
		}
	}
}

.form-control-group {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--spacingSmall);
	margin-bottom: var(--spacing);

	&:has(*:required):not(:has(.t-danger)) label:not(.toggle):first-of-type:after {
		content: '*';
		color: var(--colorDanger);
		margin-left: calc(var(--spacingSmall) * -1 + 2px);
	}

	label {
		display: flex;
		align-items: center;
		gap: var(--spacingSmall);
		width: fit-content;

		> span {
			display: contents;

			.blur-state {
				position: static;
				order: 1;
			}
		}
	}

	p {
		margin: 0;
	}

	+ .form-control-group {
		margin-top: calc(var(--spacingSmall) * -1);
	}
}

.form-group-checkboxes {
	margin-bottom: var(--spacing);

	legend {
		font-weight: 600;
	}

	label {
		display: flex;
		align-items: center;
		gap: var(--spacingXSmall);
		margin-top: var(--spacingXSmall);
	}
}

.form-group label,
.setting-form-group label,
.quotation-form-group label,
.easyinvoice-form-group {
	display: flex;
	align-items: center;
	gap: 2px;
	margin-bottom: var(--spacingXSmall);
}

label:has(input),
label:has(textarea),
label:has(select) {
	input, textarea, select {
		margin-top: var(--spacingXSmall);
	}
}

.form-control-group {
	position: relative;
	margin-bottom: var(--spacing);

	label {
		display: flex;
		align-items: center;
		gap: var(--spacingSmall);

		> span {
			display: contents;

			.blur-state {
				position: static;
				order: 1;
			}
		}
	}

	+ .form-control-group {
		margin-top: calc(var(--spacingSmall) * -1);
	}
}

.form-group-button {
	position: relative;

	button,
	.button {
		position: absolute;
		bottom: var(--spacingXSmall);
		right: var(--spacingXSmall);
		height: calc(var(--inputHeight) - var(--spacingSmall));
		font-size: var(--fontSizeSmall);
		padding-inline: var(--spacingXSmall);
	}
}

input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"]),
textarea,
select {
	appearance: none;
	max-width: 100%;
	height: var(--inputHeight);
	background-color: var(--inputBg);
	color: var(--colorText);
	font-family: var(--fontFamily);
	font-size: var(--fontSize);
	padding-inline: var(--spacingSmall);
	border: 1px solid var(--inputBg);
	border-radius: var(--panelRadius);
	transition: .25s;

	&:is(:hover, :focus) {
		background-color: var(--inputBgHover);
		border-color: var(--colorBorder);
		outline: 0;
	}
}

input:is(.input--xl) {
	height: 4.2rem;
}

input[type="checkbox"] {
	position: relative;
	width: 1.3rem;
	min-width: 1.3rem;
	height: 1.3rem;
	min-width: 1.3rem;
	margin: 0;
	background-color: var(--radioAndCheckboxBg);
	border: 1px solid var(--radioAndCheckboxBorder);
	border-radius: 0.2rem;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;

	&:disabled {
		opacity: .5;
	}
}

input[type="checkbox"]:before {
	content: '\f00c';
	position: absolute;
	display: grid;
	place-content: center;
	top: -1px;
	left: -1px;
	width: 1.3rem;
	height: 1.3rem;
	font-family: 'Font Awesome 6 Pro', serif;
	font-weight: 700;
	font-size: 1rem;
	color: #fff;
	border-radius: 0.2rem;
	transform: scale(0);
	transition: 0.15s transform ease-in-out;
	background: var(--gradient);
}

input[type="checkbox"]:checked {
	border-color: transparent;
}

input[type="checkbox"]:checked:before {
	transform: scale(1);
}

input[type="radio"] {
	display: inline-grid;
	place-content: center;
	position: relative;
	width: 1.3rem;
	height: 1.3rem;
	min-width: 1.3rem;
	margin: 0;
	background-color: var(--radioAndCheckboxBg);
	border: 1px solid var(--radioAndCheckboxBorder);
	border-radius: 50%;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}

input[type="radio"]:before {
	content: '';
	width: 0.9rem;
	height: 0.9rem;
	color: var(--colorTextLight);
	border-radius: 50%;
	transform: scale(0);
	transition: 0.15s transform ease-in-out;
	background: var(--gradient);
}

input[type="radio"]:checked {
	border-color: var(--gradientStart);
}

input[type="radio"]:checked:before {
	transform: scale(1);
}

input[type="number"] {
	font-variant-numeric: tabular-nums;
}

.toggle {
	position: relative;
	display: inline-block;
	width: 3.2rem;
	height: 1.8rem;
	background-color: var(--toggleOffBg);
	border-radius: .9rem;

	input {
		opacity: 0;
		width: 0;
		height: 0;

		&:disabled {
			opacity: 0;
		}
	}

	&:before {
		content: '';
		position: absolute;
		top: .2rem;
		left: .2rem;
		display: block;
		width: 1.4rem;
		height: 1.4rem;
		background-color: #fff;
		border-radius: .8rem;
		transition: .25s;
	}

	&:is(:focus, :active):before {
		width: 2rem;
	}

	&:has(input:focus-visible) {
		outline: auto;
	}

	&:has(input:checked) {
		background-color: var(--colorSuccess);

		&:before {
			transform: translateX(1.4rem);
		}

		&:is(:focus, :active):before {
			width: 2rem;
			transform: translateX(.8rem);
		}
	}

	&:has(input:disabled) {
		opacity: .5;
		cursor: not-allowed;
	}

	.blur-state {
		top: 50%;
		bottom: auto;
		right: calc(var(--fontSize) * -1 - var(--spacingSmall));
		transform: translateY(-50%);
	}
}

.toggle-list {
	list-style: none;
	padding: 0;
	margin-block: 0 var(--spacing);

	.toggle-list-item {
		display: flex;
		align-items: center;
		gap: var(--spacingXSmall);
		line-height: 1;

		&:not(:last-child) {
			padding-bottom: var(--spacingSmall);
			border-bottom: 1px solid var(--colorBorder);
			margin-bottom: var(--spacingSmall);
		}

		.toggle-list-item__label {
			font-weight: 400;
		}

		.toggle {
			margin-left: auto;
		}
	}
}

input[type="color"] {
	padding-block: var(--spacingSmall);
}

input[type="color"]::-moz-color-swatch {
	border: 0;
	border-radius: var(--spacingXSmall);
	margin: 0;
}

input[type="color"]::-webkit-color-swatch-wrapper {
	padding: 0;
}

input[type="color"]::-webkit-color-swatch {
	border: 0;
	border-radius: var(--spacingXSmall);
	margin: 0;
}

input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 var(--inputHeight) var(--inputBg) inset;
	-webkit-text-fill-color: var(--colorText);
}

input:disabled,
textarea:disabled,
select:disabled,
label:has(*:disabled),
label:has(+ *:disabled) {
	opacity: 1;
	color: var(--colorInputDisabled);
	cursor: not-allowed;
}

textarea {
	resize: vertical;
	padding: var(--spacingSmall);
	min-height: calc(var(--inputHeight) * 2);
}

select {
	background-image: var(--dropdownIcon);
	background-position: var(--dropdownIconPosition);
	background-repeat: no-repeat;
	background-size: var(--dropdownIconSize);
	padding-right: var(--spacingLarge);
	cursor: pointer;
}

select:disabled {
	background-image: var(--dropdownIconDisabled);
}

::-webkit-input-placeholder {
	color: var(--colorMuted) !important;
}

::-moz-placeholder {
	color: var(--colorMuted) !important;
}

:-ms-input-placeholder {
	color: var(--colorMuted) !important;
}

:-moz-placeholder {
	color: var(--colorMuted) !important;
}

.progress-bar {
	display: block;
	appearance: none;
	width: 100%;
	height: 8px;
	background-color: var(--inputBg);
	border: 0;
	border-radius: 6px;

	--barBg: var(--colorPrimary);

	&.progress-bar--danger {
		--barBg: var(--colorDanger);
	}

	&.progress-bar--warning {
		--barBg: var(--colorWarning);
	}

	&.progress-bar--success {
		--barBg: var(--colorSuccess);
	}

	&.progress-bar--secondary {
		--barBg: var(--colorSecondary);
	}

	&.progress-bar--compact {
		height: 6px;
	}

	&::-webkit-progress-bar {
		background-color: transparent;
		border-radius: 6px;
	}

	&::-webkit-progress-value {
		background-color: var(--barBg);
		border-radius: 6px;
	}

	&::-moz-progress-bar {
		background-color: var(--barBg);
		border-radius: 6px;
	}
}

.input-help {
	display: block;
	color: var(--colorNeutral);
	font-size: var(--fontSizeSmall);
	line-height: 1.2;
	margin-top: var(--spacingXSmall);
}

.form-group + .input-help {
	margin-top: calc(var(--spacing) * -1 + var(--spacingXSmall));
	margin-bottom: var(--spacing);
}

.cke {
	border: 0 !important;
	box-shadow: none !important;
	margin-top: var(--spacingXSmall) !important;

	.cke_top {
		background-color: var(--inputBg);
		border: 0;
		border-top-right-radius: var(--panelRadius);
		border-top-left-radius: var(--panelRadius);
	}

	.cke_contents {
		border-left: 1px solid var(--inputBg);
		border-right: 1px solid var(--inputBg);
	}

	.cke_bottom {
		background-color: var(--inputBg) !important;
	}

	.cke_resizer {
		border-color: transparent var(--colorMuted) transparent transparent;
	}

	.cke_path_item {
		color: var(--colorText);
	}
}

.input-flex,
.flex-container {
	display: flex;
	align-items: flex-end;
	gap: var(--gutter);
	width: 100%;

	&.flex-container--vertical {
		flex-direction: column;
		align-items: flex-start;
	}

	&.input-flex--small,
	&.flex-container--small {
		gap: var(--gutterSmall);
	}

	&.input-flex--x-small,
	&.flex-container--x-small {
		gap: var(--gutterXSmall);
	}

	&.input-flex--align-center,
	&.flex-container--align-center {
		align-items: center;
	}

	&.input-flex--align-start,
	&.flex-container--align-start {
		align-items: flex-start;
	}

	&.input-flex--wrap-desktop {
		flex-wrap: wrap;
	}

	&.input-flex--align-top {
		align-items: flex-start;
	}

	&.input-flex--wrap {
		flex-wrap: wrap;
	}
}

/* Select2 */

.select2-container .select2-selection--single {
	min-height: var(--inputHeight);
	height: auto;
}

.select2-container--open {
	z-index: 900;
}

.select2-container--default .select2-selection--single {
	background-color: var(--inputBg);
	border-color: var(--inputBg);
	border-radius: var(--panelRadius);
	transition: .25s;
}

.select2-container--default .select2-selection--single:is(:hover, :focus),
.select2-container--open .select2-selection--single {
	background-color: var(--inputBgHover);
	border-color: var(--colorBorder);
	outline: none;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: var(--inputHeight);
	padding-right: calc(var(--fontSizeSmall) * 2 + var(--spacingSmall) * 3);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 0;
	bottom: 0;
	height: auto;
	background-image: var(--dropdownIcon);
	background-position: var(--dropdownIconPosition);
	background-repeat: no-repeat;
	background-size: var(--dropdownIconSize);
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
	display: none;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
	color: var(--colorMuted);
}

.select2-dropdown {
	border-color: var(--colorBorder);
	z-index: unset;
}

.select2-search--dropdown {
	background-color: var(--multiselectSearchBg);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
	height: var(--inputHeight);
	background-color: var(--multiSelectSearchInputBg);
	padding: 0 var(--spacingSmall);
	border: none;
	border-radius: var(--spacingXSmall);
	margin-top: 0;
}

.select2-selection__clear {
	position: absolute !important;
	bottom: calc((var(--inputHeight) - var(--spacingSmall)) / 2);
	right: calc(var(--fontSizeSmall) + var(--spacing));
	width: var(--spacingSmall);
	height: var(--spacingSmall);
	background-image: url("../images/site/dropdown-clear.svg");
	background-repeat: no-repeat;
	font-size: 0;
}

.select2-container--default .select2-results>.select2-results__options {
	background-color: var(--inputBg);
	padding-block: var(--spacingSmall);
}

.select2-results__group {
	background-color: var(--inputBg);
	color: var(--colorMuted);
	line-height: 1.4;
	padding: var(--spacingSmall) var(--spacing) !important;
}

.select2-results__option {
	line-height: 1.4;
	padding: var(--spacingSmall) !important;
	border-radius: var(--spacingXSmall);
	margin-inline: var(--spacingSmall);
}

.select2-results__option[role=group] {
	padding: 0 !important;
	margin-inline: 0 !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[aria-selected=true] {
	background-color: var(--multiSelectRowHover);
	color: var(--colorText);
}

.select2-container--default .select2-selection--multiple {
	background-color: var(--inputBg);
	border-color: var(--inputBg);
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
	border-color: var(--colorBorder);
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
	display: flex;
	align-items: flex-start;
	gap: var(--spacingXSmall);
	flex-wrap: wrap;
	padding: var(--spacingXSmall);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
	display: flex;
	align-items: center;
	gap: var(--spacingXSmall);
	background-color: var(--colorBorder);
	line-height: 1.25;
	padding: var(--spacingXSmall) var(--spacingSmall);
	border: none;
	border-radius: var(--panelRadius);
	margin: 0;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
	color: var(--colorMuted);
	margin: 0;
}

.select2-selection--multiple .select2-search__field {
	height: auto;
}

.select2-container--default.select2-container--disabled .select2-selection--single {
	background: var(--inputBg);
	cursor: not-allowed;
}

.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__rendered {
	color: var(--colorInputDisabled);
}

.select2-container--default.select2-container--disabled .select2-selection__arrow {
	background-image: var(--dropdownIconDisabled);
}

/* Select2 with pills */

.select2-selection__rendered:has(.select2-selection__content) {
	white-space: normal !important;
}

.select2-selection__content {
	display: flex;
	align-items: center;
	gap: var(--spacingSmall);
}

.select2-selection__text-truncate {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.select2-selection__rendered {
	.select-2-row-with-muted {
		padding-top: 8px;
		padding-bottom: 8px;
	}
}

.select-2-row-with-muted {
	display: flex;
	flex-direction: column;
	gap: 4px;
	line-height: 1;

	.select-2-row-with-muted__title {
		height: auto;
	}

	.select-2-row-with-muted__muted {
		height: auto;
		color: var(--colorMuted);
		font-size: var(--fontSizeSmall);
	}
}

/* Vue Select */

.vs__dropdown-toggle {
	gap: var(--spacingSmall);
	height: var(--inputHeight);
	background-color: var(--inputBg) !important;
	border-color: var(--inputBg) !important;
	padding: 0 var(--spacingSmall) !important;
	border-radius: var(--panelRadius);
	transition: .25s;
}

.vs__dropdown-toggle:is(:hover, :focus),
.vs--open .vs__dropdown-toggle {
	background-color: var(--inputBgHover) !important;
	border-color: var(--colorBorder) !important;
}

.vs__selected-options {
	flex-wrap: nowrap !important;
	white-space: nowrap;
	overflow: hidden;
	padding: 0 !important;
}

.vs__selected {
	padding: 0 !important;
	margin: 0 !important;
}

.vs--single.vs--loading .vs__selected,
.vs--single.vs--open .vs__selected {
	position: static !important;
	opacity: 1 !important;
}

.vs__search {
	background-color: transparent !important;
	font-size: var(--fontSize) !important;
	padding: 0 !important;
	border: 0 !important;
	margin: 0 !important;
}

.vs__actions {
	gap: var(--spacingXSmall);
	padding: 0 !important;
}

.vs__clear {
	width: var(--spacingSmall) !important;
	height: var(--spacingSmall) !important;
	background-image: url("../images/site/dropdown-clear.svg");
	line-height: 1 !important;
	margin: 0 !important;
}

.vs__clear:is(:hover, :focus) {
	background-color: transparent !important;
}

.vs__clear svg {
	display: none;
}

.vs__open-indicator {
	width: var(--dropdownIconSize);
	background-image: var(--dropdownIcon);
	background-position: top 50% right 0;
	background-size: var(--dropdownIconSize);
	background-repeat: no-repeat;
}

.vs__open-indicator path {
	display: none;
}

.vs__dropdown-menu {
	background-color: var(--inputBg) !important;
	padding-block: var(--spacingSmall) !important;
	border-color: var(--colorBorder) !important;
	box-shadow: none !important;
}

.vs__dropdown-option {
	line-height: 1.4 !important;
	white-space: unset !important;
	padding: var(--spacingXSmall) var(--spacingSmall) !important;
	border-radius: var(--spacingXSmall);
	margin-inline: var(--spacingSmall);
}

.vs__dropdown-option--disabled {
	background-color: var(--inputBg) !important;
	color: var(--colorMuted) !important;
}

.vs__dropdown-option--highlight {
	background-color: var(--multiSelectRowHover) !important;
	color: var(--colorText) !important;
}

.vs__dropdown-menu button {
	justify-content: flex-start;
	width: calc(100% - var(--spacing));
	height: auto;
	background-color: transparent;
	color: var(--colorPrimaryHover);
	line-height: 1.4;
	padding: var(--spacingXSmall) var(--spacingSmall);
	margin-inline: var(--spacingSmall);
	margin-bottom: var(--spacingXSmall);

	&:is(:hover, :focus) {
		background-color: var(--colorPrimaryGhost);
		color: var(--colorPrimaryHover);
	}
}

.vs--disabled .vs__open-indicator {
	background-image: var(--dropdownIconDisabled);
	background-color: transparent !important;
}

.vs--disabled .vs__selected {
	color: var(--colorInputDisabled);
}

.vs--disabled .vs__clear {
	opacity: 0;
}

/* Vue Multiselect */

.vs--multiple {
	.vs__dropdown-toggle {
		height: auto;
		min-height: var(--inputHeight);
		padding: var(--spacingXSmall) !important;
		padding-right: var(--spacingSmall) !important;

		.vs__selected-options {
			display: flex;
			align-items: center;
			gap: var(--spacingXSmall);
			flex-wrap: wrap !important;

			.vs__selected {
				display: flex;
				align-items: center;
				gap: var(--spacingXSmall);
				background-color: var(--colorBorder) !important;
				line-height: 1.25 !important;
				padding: var(--spacingXSmall) var(--spacingSmall) !important;
				border: none !important;
				border-radius: var(--panelRadius);

				.vs__deselect {
					width: var(--spacingSmall) !important;
					height: var(--spacingSmall) !important;
					background-color: transparent;
					background-image: url(../images/site/dropdown-clear.svg) !important;
					margin: 0 !important;

					&:is(:hover, :focus) {
						background: transparent;
					}

					svg {
						display: none;
					}
				}
			}

			.vs__search {
				position: absolute;
				width: 0;
				height: auto;
			}
		}
	}

	.vs__dropdown-menu {
		display: flex;
		flex-direction: column;
		gap: var(--spacingXSmall);

		.vs__dropdown-option--selected {
			background-color: var(--multiSelectRowHover);
		}
	}

	&.vs--open {
		.vs__search {
			position: static !important;
		}
	}
}

/* Search form */

.search-form {
	display: flex;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: var(--spacingSmall);
	margin-bottom: var(--spacing);

	.form-group {
		margin: 0;

		&:has(input[type="search"]:not(.vs__search)) {
			flex: 1;
		}

		label {
			font-size: var(--fontSizeSmall);
		}

		input {
			width: 100%;
		}
	}

	.form-group:has(.select2) {
		label {
			display: initial;
		}
	}

	button,
	.button {
		background-color: var(--inputBg);
		color: var(--colorText);

		&:is(:hover, :focus) {
			background-color: var(--inputBgHover);
			color: var(--colorText);
		}
	}
}

/* Hide element visually */

.offscreen {
	overflow: hidden;
	position: absolute;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	width: 1px;
	height: 1px;
	white-space: nowrap;
}

/* Tabs */

.tab-navigation ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.tab-navigation:not(.vertical-navigation, .txp-tabs, .workplace-tabs) {
	margin-bottom: var(--spacing);

	&:after {
		content: '';
		display: table;
		clear: both;
	}

	> ul {
		float: left;

		> li {
			position: relative;
			margin-right: -5px;
			display: inline-block;

			> a,
			> button {
				display: block;
				height: 40px;
				padding: 0 25px;
				background: var(--bgPanel);
				border: 1px solid var(--colorBorder);
				border-radius: 0;
				color: var(--colorPrimary);
				font-weight: 600;
				line-height: 40px;
			}

			&.current {
				> a,
				> button {
					background-color: var(--colorPrimary);
					color: var(--colorTextLight);
					border: 1px solid var(--colorPrimary);
				}
			}

			&:first-of-type {
				> a,
				> button {
					border-top-left-radius: 5px;
				}
			}

			&:last-of-type {
				> a,
				> button {
					border-top-right-radius: 5px;
				}
			}
		}
	}

	> .tab-navigation-actions {
		float: right;
		margin: 0;
	}
}

.tab-content, .dialog-content .content.tab-content, .tab-area {
	display: none;
}

.tab-content.current, .dialog-content .content.tab-content.current {
	display: block;
}

.tab-area.current {
	display: block;
}

/* Standalone tabs */

.standalone-tabs:not(.txp-tabs) {
	margin-bottom: var(--spacing);

	> ul > li:first-of-type > a {
		border-top-left-radius: var(--panelRadius);
		border-bottom-left-radius: var(--panelRadius);
	}

	> ul > li:last-of-type > a {
		border-top-right-radius: var(--panelRadius);
		border-bottom-right-radius: var(--panelRadius);
	}
}

.tab-content.standalone-tab {
	background: transparent;
	padding: 0;
	border: 0;
	margin-top: 0;
}

/* TXP Tabs */

.txp-tabs {
	z-index: 1;
	overflow-x: auto;

	&.standalone-tabs {
		margin-bottom: 0;
	}

	> ul {
		display: flex;
		align-items: center;

		> li {
			a,
			button {
				position: relative;
				display: flex;
				align-items: center;
				gap: var(--spacingXSmall);
				height: auto;
				background-color: transparent;
				color: var(--colorText) !important;
				font-weight: 400;
				line-height: 1.4;
				white-space: nowrap;
				padding: var(--spacing);
				border-radius: 0;
				margin-top: var(--spacingXSmall);
				transition: background-color .25s;

				&:hover,
				&:focus {
					background-color: var(--bgPanelGhost);
				}

				.badge {
					position: absolute;
					top: var(--spacingXSmall);
					right: var(--spacingXSmall);
					display: flex;
					justify-content: center;
					align-items: center;
					min-width: var(--fontSizeH2);
					height: var(--fontSizeH2);
					background-color: var(--colorMuted);
					color: var(--colorTextLight);
					font-size: var(--fontSizeSmall);
					font-weight: 700;
					line-height: 0;
					padding: 0 calc(var(--spacingSmall) / 2);
				}
			}

			&.current {
				a,
				button {
					background-color: var(--bgPanel);
					font-weight: 600;

					&:before {
						content: '';
						position: absolute;
						top: calc(var(--spacingXSmall) * -1);
						left: 0;
						width: 100%;
						height: var(--spacingXSmall);
						background: var(--gradient);
						border-top-right-radius: var(--spacingXSmall);
						border-top-left-radius: var(--spacingXSmall);
					}
				}
			}
		}
	}

	&:has(> ul > li:first-child.current) {
		+ .content,
		+ .panel {
			border-top-left-radius: 0;
		}

		+ .grid-row > [class*='col-']:first-child {
			> .content:first-child,
			> .panel:first-child {
				border-top-left-radius: 0;
			}
		}
	}
}

.txp-tabs--inline {
	box-shadow: inset 0 -1px 0 var(--colorBorder);

	& > ul {
		& > li {
			a,
			button {
				margin-top: 0;
			}

			&.current {
				a,
				button {
					&:before {
						top: auto;
						bottom: 0;
					}
				}
			}
		}
	}
}

.txp-tabs--no-overflow {
	overflow: initial;
}

/* Report Product */

.report-product-row {
	display: inline-block;
	width: 33%;
}

.report-product-row label {
	display: inline-block;
	min-width: 160px;
}

/*
 * Datepicker
 */

#dateup_calendar {
	display: none;
	position: absolute;
	width: 260px;
	padding: 2px;
	background: #fff;
	border: 1px solid #d2d5d6;
	text-align: center;
	z-index: 100;
}

#dateup_calendar select {
	margin-bottom: 5px;
	width: auto;
}

#dateup_calendar table {
	width: 100%;
	border-collapse: collapse;
}

#dateup_calendar .today {
	background: #d2d5d6;
}

#dateup_calendar .today a {
	color: #fff;
}

#dateup_calendar td.disabled {
	background: #ededed;
}

#dateup_calendar .disabled {
	color: #d7d7d7;
}

#dateup_calendar td a {
	display: block;
	text-align: center;
	text-decoration: none;
}

#dateup_calendar th {
	padding: 1px;
	font-weight: bold;
	text-align: center;
}

#dateup_calendar td {
	padding: 5px 1px;
}

/*
 * Pagination
 */

.pagination-links {
	display: flex;
	justify-content: flex-end;
	align-items: flex-start;
	gap: var(--spacingXSmall);

	.pagination-link,
	.pagination-jump {
		display: flex;
		justify-content: center;
		align-items: center;
		min-width: 2.4rem;
		height: 2.4rem;
		background-color: var(--bgPanel);
		color: var(--colorText);
		font-weight: 400;
		padding-inline: var(--spacingXSmall);
		border-radius: var(--panelRadius);

		&:not(.pagination-jump, .disabled):is(:hover, :focus) {
			background-color: var(--colorMutedGhost);
		}

		&.current {
			font-weight: 600;
			background-color: var(--colorPrimary);
			color: var(--colorTextLight);

			&:is(:hover, :focus) {
				background-color: var(--colorPrimaryHover);
				color: var(--colorTextLight);
			}
		}

		&.disabled {
			color: var(--colorMuted);
			cursor: not-allowed;
		}
	}
}

/* Login */

.user-logged-out {
	background-color: var(--bgPanel);

	#header,
	#navigation {
		display: none;
	}

	#content {
		margin: 0;
		padding: 0;

		.login__container {
			display: grid;
			grid-template-columns: 44% 1fr;
			min-height: 100vh;
		}

		.login__hero {
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			height: 100vh;
			padding: 40px;
		}

		.login__hero__slideshow {
			position: absolute;
			background-size: cover;
			background-position: center;
			transition: opacity .5s ease-in-out;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			z-index: -1;

			&:after {
				content: '';
				position: absolute;
				right: 0;
				bottom: 0;
				left: 0;
				height: 250px;
				background: linear-gradient(0deg, rgba(18,24,34,0.50) 0%, rgba(18,24,34,0) 100%);
			}

			img {
				position: absolute;
				width: 100%;
				height: 100%;
				object-fit: cover;
				opacity: 0;
				transition: opacity 2s ease-in-out;

				&.js-active {
					opacity: 1;
				}
			}
		}

		.login__hero__title {
			font-size: 3.2rem;
			font-weight: 700;
			max-width: 500px;
			color: var(--colorTextLight);
			margin: 0;
		}

		.login__form-container {
			position: relative;
			display: grid;
			justify-content: center;
			align-items: center;
			padding-inline: 4.5rem;

			.form-group {
				margin: 0;
			}
		}

		.login__forgot-password__container {
			display: flex;
			justify-content: center;
			align-items: center;
			grid-column: 1/-1;
			width: 100%;
			height: 100vh;

			.login__forgot-password__form {
				display: flex;
				flex-direction: column;
			}
		}

		.login__logo {
			position: absolute;
			top: 40px;
			left: 50%;
			max-width: 170px;
			transform: translateX(-50%);
		}

		.login__form {
			display: flex;
			flex-direction: column;
			gap: var(--spacing);
			max-width: 300px;

			> * {
				margin: 0;
			}

			.login__inputs-container {
				display: flex;
				flex-direction: column;
				gap: 1px;
			}
		}

		.login__title {
			font-size: 3.2rem;
			margin: 0;
		}

		#login_error {
			text-align: center;
		}

		.login-form-group {
			position: relative;
			margin-bottom: var(--spacingSmall);

			> .far {
				position: absolute;
				top: 50%;
				left: var(--spacing);
				transform: translateY(-50%);
			}

			input {
				width: 100%;
				height: calc(var(--inputHeight) + var(--spacing));
				padding-left: calc(var(--fontSize) + var(--spacing) * 2);
			}
		}

		.formgroup {
			margin-bottom: var(--spacingSmall);
		}

		.login-form-button {
			width: 100%;
			height: calc(var(--inputHeight) + var(--spacing));
		}

		.site-slogan {
			text-align: center;
			margin-top: var(--spacing);
		}
	}

	#support_menu {
		position: fixed;
		bottom: var(--spacingLarge);
		right: var(--spacingLarge);

		p {
			position: relative;
			margin: 0;

			&:before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 5px;
				height: 100%;
				background: var(--bgPanel);

			}

			a {
				color: var(--colorText);
				font-size: var(--fontSizeSmall);
			}
		}
	}

	button + button,
	button + .button,
	.button + button,
	.button + .button {
		margin-left: 0;
	}
}

/* Error page */

.error-page {
	background-attachment: fixed;
}

.error-page #content {
	margin: 0;
	width: auto;
	height: auto;
	max-width: 900px;
	max-height: 100vh;
	text-align: center;
	margin-inline: auto;
}

.error-content {
	padding: 20px 30px 30px 30px;
	background: #eee;
	border-radius: 10px;
	text-align: left;
	word-wrap: break-word;
}

.error-page #content dt,
.error-page #content dd {
	display: inline;
	width: auto;
	margin: 0;
}

.error-page #content dt {
	margin-right: 5px;
}

.error-page #content dd::after {
	content: '\A';
	white-space: pre-line;
}

.error-page .error-content > pre {
	overflow: auto;
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid #ccc;
}

.error-support-frame {
	width: 0;
	height: 0;
	background: none;
	border: 0;
}

/* Inactivated system */

#system_inactivated {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	height: 100dvh;
	background: var(--bgPanel);
}

#system_inactivated_content {
	position: relative;
	width: calc(100% - 20px);
	max-width: 360px;
 	background-color: #fff;
	padding: 60px 30px 45px 30px;
	border-radius: 5px;
	box-sizing: border-box;
}

#system_inactivated_content i {
	position: absolute;
	top: 0;
	left: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 70px;
	height: 70px;
	background-color: #a4b0be;
	color: #fff;
	font-size: 24px;
	border: 10px solid #f1f2f6;
	border-radius: 50%;
	transform: translate(-50%, -50%);
}

#system_inactivated_content hr {
	border: 1px solid #ddd;
	margin-block: 30px;
}

#system_inactivated_content h1 {
	margin-block: 0 10px;
}

#system_inactivated_content p {
	margin: 0;
}

#system_inactivated .logo {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	max-width: 100px;
	margin-top: 20px;
}

/* Statistics on e.inside */

.einside-chart {
	position: relative;
	height: 15vw;
	margin-bottom: 20px;
}

.einside-stat-company {
	height: 15vw;
	letter-spacing: -0.32em;
	margin: 0 -10px 20px -10px;
}

.einside-stat-company div {
	position: relative;
	display: inline-block;
	width: calc(100% / 3 - 20px);
	height: 100%;
	text-align: center;
	border: 1px solid #ccc;
	border-radius: 5px;
	margin: 0 10px;
	vertical-align: top;
	box-sizing: border-box;
}

.einside-stat-company dl {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	line-height: 1;
	-ms-transform: translate(-50%, -50%);
	-webkut-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.einside-stat-company i {
	display: block;
	font-size: 36px;
	color: #19AAE2;
	margin: 0 0 5px 0;
}

.einside-stat-company dt {
	display: block;
	width: 100%;
	font-weight: 400;
	line-height: 16px;
	margin: 0 0 5px 0;
}

.einside-stat-company dd {
	display: block;
	width: 100%;
	font-size: 18px;
	font-weight: 600;
	margin: 0;
}

.tag {
	background-color: var(--colorMutedGhost);
	white-space: nowrap;
	padding: var(--spacingXSmall) var(--spacingSmall);
	border-radius: var(--panelRadius);
}

/* Employees */

.user-avatar {
	display: flex;
	align-items: center;
	gap: var(--spacingSmall);

	.user-avatar__image-container {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 3.6rem;
		height: 3.6rem;
		border-radius: 50%;
		overflow: hidden;
	}

	.user-avatar__image {
		min-width: 100%;
		min-height: 100%;
		object-fit: cover;
	}
}

.progress-bar {
	display: block;
	appearance: none;
	width: 100%;
	height: 8px;
	background-color: var(--inputBg);
	border: 0;
	border-radius: 6px;

	--barBg: var(--colorPrimary);

	&.progress-bar--danger {
		--barBg: var(--colorDanger);
	}

	&.progress-bar--warning {
		--barBg: var(--colorWarning);
	}

	&.progress-bar--success {
		--barBg: var(--colorSuccess);
	}

	&.progress-bar--secondary {
		--barBg: var(--colorSecondary);
	}

	&.progress-bar--compact {
		height: 6px;
	}

	&::-webkit-progress-bar {
		background-color: transparent;
		border-radius: 6px;
	}

	&::-webkit-progress-value {
		background-color: var(--barBg);
		border-radius: 6px;
	}

	&::-moz-progress-bar {
		background-color: var(--barBg);
		border-radius: 6px;
	}
}

.dynamic-list {
	position: relative;
	list-style: none;
	padding: 0;
	margin: 0;

	.dynamic-list__item {
		display: flex;
		align-items: center;
		padding-block: var(--spacingSmall);
		border-bottom: 1px solid var(--colorBorder);

		&.dynamic-list__item--placeholder {
			display: none;
		}

		&:last-child {
			border-bottom: 0;
		}

		.dynamic-list__item__actions {
			display: flex;
			align-items: center;
			gap: var(--spacing);
			margin-left: auto;

			* {
				margin: 0;
			}

			.dynamic-list__item__actions__icon {
				pointer-events: none;
			}
		}
	}
}

.dynamic-list__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacingSmall);
	color: var(--colorMuted);
	font-style: italic;
	padding: var(--spacing);
	border: 1px solid var(--colorBorder);
	border-radius: var(--panelRadius);

	.dynamic-list__empty__icon {
		font-size: 3.2rem;
		font-style: normal;
		line-height: 1;
		color: var(--toggleOffBg);
	}
}

/* My profile */

.my-profile-grid {
	display: grid;
	grid-template-columns: 16rem auto;
	align-items: center;
	gap: var(--spacing);
	margin-bottom: var(--spacing);

	.my-profile-image {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		aspect-ratio: 1 / 1;
		border-radius: 50%;
		overflow: hidden;
	}

	.bordered-data-list {
		margin-bottom: 0;
	}
}

.my-profile-capabilities {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacingXSmall);
	margin-bottom: var(--spacing);

	span {
		background-color: var(--inputBgHover);
		padding: var(--spacingXSmall) var(--spacingSmall);
		border-radius: var(--panelRadius);
	}
}

.bordered-data-list {
	margin-bottom: var(--spacing);

	> div {
		display: flex;
		justify-content: space-between;
		align-content: center;
		padding-block: var(--spacingSmall);
		border-bottom: 1px solid var(--colorBorder);

		&:last-child {
			border-bottom: 0;
		}

		dt, dd {
			width: auto;
			font-weight: 400;
			padding: 0;
			margin: 0;
		}
	}
}

/* Sortable */

[draggable] {
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
}

.sort-handle {
	display: inline-block;
	width: 20px;
	cursor: move;
	cursor: -webkit-grabbing;
}

/* Leaflet maps */

.leaflet-container {
	z-index: 1;
}

.leaflet-div-icon {
	background: transparent;
	border: 0;
	outline: none;
	font-size: 36px;
}

/* Help section */

.search-form .helparticle-search-button {
	min-width: 0;
	margin: 0 0 0 10px;
}

.helparticle-list {
	padding: 0 10px;
	list-style-type: none;
}

.helparticle-list li {
	border-right: 1px solid #dadada;
	border-left: 3px solid #19aee2;
	margin-top: -1px;
	-webkit-transition: .25s;
	transition: .25s;
}

.helparticle-list li:hover {
	background-color: #f1f1f1;
	-webkit-transition: .25s;
	transition: .25s;
}

.helparticle-list li:last-child {
	border-bottom: 1px solid #dadada;
}

.helparticle-list li a {
	padding: 5px 20px;
	display: block;
	width: 100%;
	color: #333;
	box-sizing: border-box;
}

.helparticle-list li a:after {
	content: '\f105';
	font-family: 'Font Awesome 5 Pro';
	color: #0f7092;
	float: right;
}

.helparticle-list li.helparticle-module-name {
	padding: 7.5px 10px 5px 10px;
	font-weight: 700;
	border-top: 1px solid #dadada;
}

.helparticle-list li.helparticle-module-name:hover {
	background-color: #fff;
}

/* Flash messages */

.flash-messages {
	position: fixed;
	top: 185px;
	right: 13.5px;
	max-width: 400px;
	margin: 0 6.5px 0 3.5px;
	padding: 0;
	overflow: hidden;
	list-style: none;
	font-weight: 600;
	font-size: 13px;
	color: #fff;
	z-index: 20;
	border-radius: 5px;
}

.dialog-opened .flash-messages {
	z-index: 9999;
}

.flash-messages .flash-message-prefix-icon {
	display: flex;
	align-items: center;
	margin: 0 10px;
}

.flash-messages .flash-message-content {
	display: flex;
	align-items: stretch;
	margin: 0 10px;
	width: 100%;
}

.flash-messages .flash-message-prefix-icon + .flash-message-content {
	margin-left: 0;
}

.flash-messages .flash-message-suffix-icon {
	display: flex;
	align-items: center;
	margin: 0 10px;
}

.flash-messages .flash-message-content + .flash-message-suffix-icon {
	margin-left: 0;
}

.flash-messages li {
	display: flex;
	padding: 10px 10px;
}

.flash-messages li a {
	color: #fff;
}

.flash-messages .is-closable .flash-message-content {
	cursor: pointer;
}

.flash-messages .error-message {
	background: var(--colorDanger);
}

.flash-messages .success-message {
	background: var(--colorSuccess);
}

.flash-messages .info-message {
	background: var(--colorPrimary);
}

.flash-messages .fa,
.flash-messages .far {
	font-size: 1.3em;
}

.flash-messages .is-hidden {
	display: none;
}

.flash-messages .is-animated-in {
	animation: slide-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.flash-messages .is-animated-out {
	animation: slide-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes slide-left {
	0% {
		transform: translateX(100%);
	}
	60% {
		transform: translateX(-5%);
	}
	100% {
		transform: translateX(0);
	}
}

@keyframes slide-right {
	0% {
		transform: translateX(0);
	}
	60% {
		transform: translateX(-5%);
	}
	100% {
		transform: translateX(100%);
	}
}

/* Clipboard */

.js-clipboard-copy-text {
	cursor: pointer;
}

/* Accordions */

.accordion {
	min-height: auto;
	border: 1px solid #ddd;
	border-radius: 2.5px;
	margin-bottom: 20px;
}

.accordion > .open-accordion {
	display: block;
	width: 100%;
	background: rgba(25, 175, 226, .15);
	text-align: left;
	padding: 0 15px;
}

.accordion.current > .open-accordion {
	border-radius: 2.5px 2.5px 0 0;
}

.accordion > .open-accordion > h2 {
	font-size: 13px;
	font-weight: 600;
	margin: 0;
	color: var(--colorText);
}

.accordion > .open-accordion > h2:before {
	content: '\f055';
	color: rgb(25, 175, 226);
	font-family: 'Font Awesome 5 Pro';
	font-weight: 900;
	margin-right: 5px;
}

.accordion.current > .open-accordion > h2:before {
	content: '\f056';
}

.accordion .accordion-content {
	padding: 0 15px;
}

.uploaded-image {
	position: relative;
	width: auto !important;

	.uploaded-image__image-link {
		display: block;
	}

	.uploaded-image__image {
		height: 12rem;
		border-radius: var(--panelRadius);
	}

	.uploaded-image__delete-button {
		position: absolute;
		top: 0;
		right: 0;
		height: auto;
		background-color: var(--bgPanel);
		color: var(--colorDanger);
		padding: .6rem;
		border-radius: 0 0 0 .4rem;

		&:is(:hover, :focus) {
			color: var(--colorDangerHover);
		}
	}
}

/* Document templates */

.document-template-list {
	padding: 0;
	list-style: none;
	line-height: normal;
}

.document-template-list li a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border-radius: 4px;
	color: #333;
}

.document-template-list li[aria-current="true"] > a,
.document-template-list li:hover > a {
	background-color: #f1f2f6;
}

.document-template-items {
	padding: 0;
	list-style: none;
}

h3 + .document-template-items {
	margin-top: -10px;
}

.document-template-items > li {
	display: flex;
	justify-content: space-between;
	padding: 10px 0;
	border-bottom: 1px solid #DFE4EA;
}

.document-template-item-info {
	display: flex;
	align-items: center;
	gap: 10px;
}

.document-template-item-info i {
	padding: 6px 8px;
	background-color: #f1f2f6;
	border-radius: 3px;
}

.document-template-item-info .fa-file-excel {
	background-color: rgba(46, 213, 115, 0.1);
	color: rgb(46, 213, 115)
}

.document-template-item-info .fa-file-pdf {
	background-color: rgba(255, 71, 87, 0.1);
	color: rgb(255, 71, 87)
}

.document-template-item-info .fa-file-word {
	background-color: rgba(55, 66, 250, 0.1);
	color: rgb(55, 66, 250);
}

/* Grid */

.grid-row {
	display: flex;
	flex-wrap: wrap;
	margin-inline: calc(var(--gutterSmall) * -1);
}

.grid-row--no-gutter {
	margin-inline: 0;

	.col,
	[class*='col-'] {
		padding-inline: 0;
	}
}

.gap {
	gap: var(--gutter);
}

[class*='col-'] {
	min-width: 0;
}

.col {
	flex: 1 0 0;
	padding-inline: var(--gutterSmall);
}

.col-1-1 {
	flex: 0 0 100%;
	padding-inline: var(--gutterSmall);
}

.col-1-2 {
	flex: 0 0 calc(100% / 2);
	padding-inline: var(--gutterSmall);
}

.col-1-3 {
	flex: 0 0 calc(100% / 3);
	padding-inline: var(--gutterSmall);
}

.col-2-3 {
	flex: 0 0 calc(100% / 3 * 2);
	padding-inline: var(--gutterSmall);
}

.col-1-4 {
	flex: 0 0 calc(100% / 4);
	padding-inline: var(--gutterSmall);
}

.col-2-4 {
	flex: 0 0 calc(100% / 2);
	padding-inline: var(--gutterSmall);
}

.col-3-4 {
	flex: 0 0 calc(100% / 4 * 3);
	padding-inline: var(--gutterSmall);
}

.col-1-5 {
	flex: 0 0 calc(100% / 5);
	padding-inline: var(--gutterSmall);
}

.col-2-5 {
	flex: 0 0 calc(100% / 5 * 2);
	padding-inline: var(--gutterSmall);
}

.col-3-5 {
	flex: 0 0 calc(100% / 5 * 3);
	padding-inline: var(--gutterSmall);
}

.col-4-5 {
	flex: 0 0 calc(100% / 5 * 4);
	padding-inline: var(--gutterSmall);
}

.col-1-6 {
	flex: 0 0 calc(100% / 6);
	padding-inline: var(--gutterSmall);
}

.col-2-6 {
	flex: 0 0 calc(100% / 3);
	padding-inline: var(--gutterSmall);
}

.col-3-6 {
	flex: 0 0 calc(100% / 2);
	padding-inline: var(--gutterSmall);
}

.col-4-6 {
	flex: 0 0 calc(100% / 3 * 2);
	padding-inline: var(--gutterSmall);
}

.col-5-6 {
	flex: 0 0 calc(100% / 6 * 5);
	padding-inline: var(--gutterSmall);
}

.col--right-center {
	justify-content: flex-end;
	align-items: center;
}

.col-right {
	flex: 0 0 auto;
	margin-left: auto;
	padding-inline: var(--gutterSmall);
}

.grid-row--no-gutter {
	.col-1-1 {
		flex: 0 0 100%;
	}

	.col-1-2 {
		flex: 0 0 calc(100% / 2);
	}

	.col-1-3 {
		flex: 0 0 calc(100% / 3);
	}

	.col-2-3 {
		flex: 0 0 calc(100% / 3 * 2);
	}

	.col-1-4 {
		flex: 0 0 calc(100% / 4);
	}

	.col-2-4 {
		flex: 0 0 calc(100% / 4 * 2);
	}

	.col-3-4 {
		flex: 0 0 calc(100% / 4 * 3);
	}

	.col-1-5 {
		flex: 0 0 calc(100% / 5);
	}

	.col-2-5 {
		flex: 0 0 calc(100% / 5 * 2);
	}

	.col-3-5 {
		flex: 0 0 calc(100% / 5 * 3);
	}

	.col-4-5 {
		flex: 0 0 calc(100% / 5 * 4);
	}

	.col-1-6 {
		flex: 0 0 calc(100% / 6);
	}

	.col-5-6 {
		flex: 0 0 calc(100% / 6 * 5);
	}
}

/* Flex utility */

.flex {
	display: flex !important;
	flex-wrap: wrap;
}

.flex--align-center {
	align-items: center;
}

.flex--pull-right {
	margin-left: auto;
}

.flex-grow {
	flex: 1;

	input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"]),
	textarea,
	select {
		width: 100%;
	}
}

.gap-xs {
	gap: var(--gutterXSmall);
}

.gap-sm {
	gap: var(--gutterSmall);
}

.gap {
	gap: var(--gutter);
}

.display-contents,
form {
	display: contents;
}

/* Unset multi column layout when displayed in a dialog */
.dialog .grid-row.no-grid-dialog {
	display: block;
}

/* Sidebar */

.vertical-navigation-grid {
	display: grid;
	grid-template-columns: 1fr 4fr;
	align-items: start;
	gap: var(--spacing);
}

.vertical-navigation {
	position: sticky;
	top: calc(100px + var(--spacing));
	max-height: calc(100vh - 100px - var(--spacing) * 2);
	background-color: var(--bgPanel);
	padding: var(--spacing);
	border-radius: var(--panelRadius);
	box-sizing: border-box;
	overflow-y: auto;

	ul {
		display: flex;
		flex-direction: column;
		gap: var(--spacingXSmall);
		list-style: none;
		padding: 0;
		margin: 0;

		li {
			&:hover,
			&.current {
				> a:not([href="#"]) {
					background-color: var(--inputBg);
				}
			}

			a {
				display: flex;
				align-items: center;
				gap: var(--spacingSmall);
				color: var(--colorText);
				line-height: 1.25;
				padding: var(--spacingSmall);
				border-radius: var(--panelRadius);

				i {
					width: var(--fontSizeH2);
					color: var(--colorMuted);
					text-align: center;
				}

				&[href="#"] {
					i {
						display: none;
					}
				}
			}

			.vertical-navigation-category {
				display: flex;
				align-items: center;
				height: var(--inputHeight);
				color: var(--colorMuted);
				font-size: var(--fontSizeSmall);
				font-weight: 600;
				text-transform: uppercase;
				padding-inline: var(--spacingSmall);
				cursor: default;
			}
		}
	}
}

.fa-bjorn-lunden,
.fa-acconomy,
.fa-boomr,
.fa-dstx,
.fa-fortnox,
.fa-tripletex,
.fa-visma,
.fa-bankid,
.fa-spiris {
	height: 13px;
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
}

#content .vertical-navigation-grid header {
	border-radius: var(--panelRadius);
	margin: 0 0 var(--spacing) 0;
}

.fa-acconomy {
	background-image: url("../images/icons/icon-acconomy.svg");
}

.fa-boomr {
	background-image: url("../images/icons/icon-boomr.svg");
}

.fa-dstx {
	background-image: url("../images/icons/icon-dstx.svg");
}

.fa-fortnox {
	background-image: url("../images/icons/icon-fortnox.svg");
}

.fa-tripletex {
	background-image: url("../images/icons/icon-tripletex.svg");
}

.fa-visma {
	background-image: url("../images/icons/icon-visma.svg");
}

.fa-bjorn-lunden {
	background-image: url("../images/icons/icon-bjorn-lunden.svg");
}

.fa-bankid {
	background-image: url("../images/icons/icon-bankid.svg");
}

.fa-spiris {
	background-image: url("../images/icons/icon-spiris.svg");
}

/* Timereport */

.reported-rows-list {
	padding: 0;
	margin: 0;
	margin-bottom: calc(var(--spacingXSmall) * 3);

	li {
		display: flex;
		align-items: center;
		line-height: 1;
		width: 100%;
		padding-bottom: var(--spacingSmall);
		border-bottom: 1px solid var(--colorBorder);
		margin-bottom: var(--spacingSmall);

		.reported-row-content {
			display: flex;
			flex-direction: column;

			> span {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
				text-overflow: ellipsis;
				line-height: var(--fontSizeH2);
			}
		}

		.reported-row-actions {
			margin-left: auto;
		}

		&:last-child {
			border-bottom: 0;
			margin-bottom: 0;
		}
	}
}

.reported-products-list {
	display: flex;
	flex-direction: column;
	gap: var(--spacingXSmall);
	margin-bottom: var(--spacing);

	> div {
		display: flex;
		align-items: center;

		dt {
			color: var(--colorMuted);
			font-size: var(--fontSizeSmall);
			font-weight: 600;
			text-transform: uppercase;
			margin: 0;
		}

		dd {
			text-align: right;
			margin: 0;
		}
	}
}

/* Timereport (Team) */

.product-report-form {
	> .panel {
		border: 1px solid var(--colorBorder);
	}
}

/* Add 2 homescreen prompt */

#a2hs_prompt {
	display: none !important;
}

/* Partner pages */

.partner-panel {
	background-color: var(--bgPanel);
	padding: var(--spacingXLarge);
	padding-bottom: var(--spacing);
	border-radius: var(--panelRadius);
	margin-bottom: var(--spacing);

	.partner__banner {
		margin: calc((var(--spacingXLarge) - var(--spacingXSmall)) * -1);
		margin-bottom: var(--spacingXLarge);
		border-radius: var(--panelRadius);
		line-height: 0;
		overflow: hidden;

		p {
			line-height: 0;
			margin: 0;
		}
	}

	.check-list {
		list-style: none;
		padding-left: 0;
		margin-block: 0 var(--spacing);

		> li {
			&:before {
				content: '\f00c';
				font-family: 'Font Awesome 6 Pro';
				font-weight: 900;
				color: var(--colorSuccess);
				margin-right: var(--spacingSmall);
			}
		}

		ul {
			padding-left: calc(var(--spacing) * 3);
			margin: 0;
		}
	}

	.panel-1-2 {
		width: calc(50% - var(--spacingSmall));
	}

	iframe {
		border: 0;
	}

	button {
		width: 100%;

		i {
			display: none;
		}
	}
}

.bullet-list {
	padding-left: var(--spacing);
	margin-block: 0 var(--spacing);
}

.dialog:has(.bullet-list) {
	min-width: 60rem;
}

/* Inventory */

.inventory-image {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	border-radius: var(--panelRadius);
	overflow: hidden;

	.inventory-image__input {
		display: none;
	}

	.inventory-image__label {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: var(--spacingXSmall);
		width: 100%;
		height: 290px;
		background-color: var(--inputBg);
		color: var(--colorMuted);
		border: 1px solid transparent;
		border-radius: var(--panelRadius);
		transition: .25s;

		&:is(:hover, :focus) {
			background-color: var(--inputBgHover);
			border-color: var(--colorBorder);
		}

		.inventory-image__icon {
			font-size: 3.2rem;
		}
	}

	.inventory-image__image {
		width: 100%;
	}
}

/* Safari browser specific */

@media not all and (min-resolution:.001dpcm) {
	@supports (-webkit-appearance:none) and (stroke-color:transparent) {
		input[type="date"] {
			font-family: sans-serif;
		}
	}
}

/* Responsive */

@media screen and (min-width: 800px) {
	.view-header {
		transition: all .15s ease-in-out;
	}

	#content .view-header.js-is-sticky {
		margin-inline: calc(var(--spacing) * -1);
		border-radius: 0;
		box-shadow: var(--shadow);
	}

	#content .grid-row .view-header.js-is-sticky {
		margin-inline: calc(var(--gutterSmall) * -1);
	}
}

@media screen and (min-width: 1024px) {
	table.sticky-thead thead {
		position: sticky;
		top: 0;
		background-color: var(--colorPrimary);
		background: var(--gradient);
	}

	.txp-table.sticky-thead thead {
		background-color: var(--bgPanel);
		background: var(--bgPanel);
	}

	/*
	 * Position below #header, #navigation and #content.
	 * #content prevents us from applying style in dialogs.
	*/
	#content table.sticky-thead thead {
		top: 165px;
		z-index: 1;
	}

	table.sticky-thead th:last-child {
		border-radius: 0 5px 0 0;
	}

	table.sticky-thead th:first-child {
		border-radius: 5px 0 0 0;
	}

	.scrollable-table:has(.scrollable-table-desktop) {
		overflow-x: auto;
	}

	.scrollable-table-desktop {
		width: auto;
		min-width: 100%;
		white-space: nowrap;
	}

	.scrollable-table:has(.scrollable-table-desktop) thead {
		position: static;
	}

	.scrollable-table:has(.scrollable-table-desktop.txp-table) thead {
		position: relative;
	}
}

@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {
	table.sticky-thead thead {
		background: var(--colorPrimary);
	}
}

@media screen and (max-width: 1024px) {

	/* Misc */
	.floatleft,
	.floatright {
		float: none;
	}

	.inline-block {
		display: block;
	}

	.hide-desktop {
		display: block !important;
	}

	.hide-mobile {
		display: none !important;
	}

	/* Header */
	#header {
		box-shadow: 0 10px 25px rgba(0, 0, 0, .05);
	}

	#header .wrapper {
		display: flex;
		justify-content: end;
		align-items: center;
		height: 100%;
		margin-right: 55px;
	}

	.secondary-menu-is-open #header {
		box-shadow: none;
	}

	#user_nav {
		position: static;
		display: flex;
		gap: 10px;
	}

	#user_nav .user-nav-link {
		font-size: 0;
		padding: 11px;
		background-color: #f1f2f6;
		border-radius: 50%;
	}

	#user_nav .user-nav-link .badge {
		top: 0;
		left: auto;
		right: 0;
	}

	#user_nav .user-nav-link > i {
		margin: 0;
	}

	#navigation ul li a.system-mode-toggle {
		display: flex;
		background-color: #f1f2f6;
		font-size: 13px;
		font-weight: 400;
		padding: 10.5px 10px;
		border-radius: 3px;
	}

	.system-mode-toggle i {
		font-size: 18px;
		color: #09d8bf;
	}

	.header-secondary-menu-opener {
		display: block;
		background: #f1f2f6;
		padding: 14px 10px;
		border-radius: 50%;
	}

	.user-nav-link__container {
		display: none;
	}

	.header-menu-bar {
		display: block;
		background: black;
		width: 20px;
		height: 2px;
		transition: all .25s ease-in-out;
	}

	.header-menu-bar + .header-menu-bar {
		margin-top: 3px;
	}

	.secondary-menu-is-open .header-menu-bar:first-of-type {
		transform: translateY(5px) rotate(45deg);
	}

	.secondary-menu-is-open .header-menu-bar:nth-child(2) {
		transform: scale(2);
		opacity: 0;
	}

	.secondary-menu-is-open .header-menu-bar:last-of-type {
		transform: translateY(-5px) rotate(-45deg);
	}

	#notifications_app {
		position: static;
	}

	#notification_drawer {
		left: 0;
		width: 100%;
		box-shadow: none;
		transform: none;
	}

	#notification_drawer.pop-slide-enter,
	#notification_drawer.pop-slide-enter-to,
	#notification_drawer.pop-slide-leave,
	#notification_drawer.pop-slide-leave-to {
		transform: none;
	}

	#notifications_app[aria-expanded=true]:before,
	#notifications_app[aria-expanded=true]:after {
		display: none;
	}

	.secondary-menu {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		transform: translateX(100vw);
		transition: all .2s ease-in-out;
		box-sizing: border-box;
		z-index: 100;
	}

	.secondary-menu-is-open .secondary-menu {
		transform: translateX(0);
	}

	#navigation {
		position: fixed;
		height: 100vh;
		padding: 0;
		border: 0;
		background: var(--bgPanel);
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
	}

	#navigation ul {
		display: flex;
		flex-direction: column;
		padding: 10px 0 150px 0;
	}

	#navigation > ul > li.has-submenu:hover:before,
	#navigation > ul > li.has-submenu:hover:after,
	#navigation > ul > li > ul > li > ul:before,
	#navigation > ul > li > ul > li > ul:after {
		display: none;
	}

	#navigation ul li a {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 15px;
		font-weight: 600;
	}

	#navigation > ul > li {
		padding: 0 15px;
	}

	#navigation > ul > li > a {
		font-size: 15px;
		padding: 17px 10px;
		color: var(--colorText);
		border-bottom: 1px solid #f1f1f1;
		border-radius: 0;
	}

	#navigation > ul > li.current > a,
	#navigation > ul > li:hover > a,
	#navigation > ul > li > a:focus {
		color: var(--colorText);
	}

	#navigation > ul > li ul {
		position: static;
		padding: 0 0 0 15px;
		border: 0;
		margin-left: 0;
		display: none;
	}

	#navigation li:hover > ul {
		display: none;
	}

	#navigation li.is-open > ul {
		display: block;
	}

	#navigation > ul > li.has-submenu > a:after,
	#navigation > ul > li > ul > li.has-submenu > a:after {
		content: '\f078';
		position: static;
		transition: .25s;
	}

	#navigation li.is-open > a:after {
		transform: rotate(180deg);
	}

	#navigation > ul > li ul {
		padding: 12px 12px 12px 24px;
		box-shadow: none;
	}

	#navigation > ul > li ul a {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 17px 10px;
	}

	#navigation > ul > li > ul > li > a {
		padding-right: 10px;
	}

	#employee_impersonate_shortcut {
		display: none;
	}

	/* Grids */
	.content,
	*[class*='content-1'],
	*[class*='content-2'],
	*[class*='content-3'],
	*[class*='content-4'],
	*[class*='content-5'],
	*[class*='content-6'],
	*[class*='content-7'],
	*[class*='content-8'],
	*[class*='content-9'] {
		width: 100%;
		margin-bottom: var(--spacingSmall);
	}

	.content.border {
		margin-bottom: var(--spacing);

		&.no-panel-mobile {
			padding: 0;
			border: 0;
			margin-bottom: 0;
		}
	}

	*[class*='panel-1'],
	*[class*='panel-2'] {
		width: 100% !important;
	}

	.col,
	*[class*='col-'] {
		flex: none;
		min-width: 0;
		width: 100%;
		padding: 0;
	}

	.col--right-center {
		justify-content: start;
		margin-bottom: 15px;
	}

	.grid-row {
		display: grid;
		margin-inline: 0;
	}

	.order-first-mobile {
		order: -1;
	}

	/* Content */

	#content {
		padding-top: 0;
		overflow-x: hidden;
	}

	.inner-content {
		max-width: calc(100vw - 50px);
	}

	.inner-content p img {
		max-width: 100% !important;
		height: auto !important;
	}

	.standalone-tab {
		padding: 0 !important;
	}

	#content header {
		display: flex;
		flex-wrap: wrap;
		gap: var(--spacing);
		background: transparent;
		position: static;
		width: 100%;
		height: auto;
		text-align: left;
		padding: 0;
	}

	#content header span,
	#content header form {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		gap: var(--spacing);
	}

	#content header h1 {
		grid-column: -1 / 1;
		position: static;
		width: calc(100% + var(--spacing) * 2);
		height: auto;
		background: var(--gradient);
		font-size: var(--fontSizeH2);
		color: var(--colorTextLight);
		text-align: center;
		line-height: normal;
		padding: var(--spacing);
		border-radius: 0;
		margin-inline: calc(var(--spacing) * -1);
	}

	#content header button,
	#content header .button {
		flex: 2 1 calc(50% - var(--spacingSmall));
		min-width: auto;
		margin: 0;
	}

	.content-header:not(.no-wrap-mobile) {
		flex-direction: column;
		align-items: flex-start;

		.content-header-actions {
			flex-wrap: wrap;
			width: 100%;

			button,
			.button {
				width: 100%;
			}
		}
	}

	.content-header-actions button,
	.content-header-actions .button {
		width: 100%;
	}

	/* Filters */

	.search-form {
		flex-direction: column;

		.form-group {
			width: 100%;

			input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"]),
			textarea,
			select {
				width: 100%;
			}
		}

		button,
		.button {
			width: 100%;
			margin-top: var(--spacingSmall);
		}
	}

	/* Tabs */
	.tab-navigation:not(.txp-tabs) {
		width: 100%;
		margin: 0 0 10px 0;
		white-space: nowrap;
		overflow-x: scroll;
	}

	.tab-navigation > ul {
		float: none;
	}

	.tab-navigation > .tab-navigation-actions {
		float: left;
		margin-top: 10px;
	}

	.tab-navigation > .tab-navigation-actions > span {
		display: flex;
		gap: 10px;
	}

	.tab-navigation > .tab-navigation-actions > span .button {
		margin: 0 !important;
	}

	/* Tables */
	table:not(.workplace-calendar, .txp-table),
	.txp-table--scroll {
		display: inline-block;
		overflow-x: auto;
		white-space: nowrap;
		width: auto;
		max-width: 100%;
		transform: translate(0);

		td {
			padding-inline: 10px;

			input {
				min-width: 100px;
			}

			select {
				min-width: 150px;
			}

			textarea {
				display: block;
				min-width: 200px;
			}

			.select2 {
				min-width: 200px;
			}

			input[type="checkbox"],
			input[type="radio"] {
				min-width: auto;
			}
		}
	}

	.report-product-row {
		display: flex;
		align-items: center;
		gap: 10px;
		width: 100%;
		margin: 10px 0;
	}

	.dynamic-delete {
		height: 30px;
		line-height: 30px;
		padding: 0 8px;
	}

	/* TXP Tables */

	.txp-table-responsive {
		colgroup,
		thead {
			display: none;
		}

		tbody {
			tr {
				display: flex;
				flex-direction: column;
				gap: var(--spacing);
				width: auto;
				padding: var(--spacing);
				border-bottom: var(--spacingSmall) solid var(--bgApp) !important;
				margin-inline: calc(var(--spacing) * -1);

				&:last-child {
					border-bottom: 0;
				}

				&:first-of-type {
					padding-top: 0;
				}

				&:last-of-type {
					border-bottom: 0 !important;
				}

				&.txp-table-sum {
					background-color: Var(--bgPanel) !important;
				}

				td {
					text-align: left;
					padding: 0;

					&:empty,
					&:empty:before {
						display: none;
					}

					&:before {
						display: flex;
						content: attr(data-title);
						font-weight: 600;
						line-height: 1;
						margin-bottom: var(--spacingXSmall);
					}

					&.txp-table-actions {
						display: flex;
						justify-content: center;
						text-align: center;
						gap: var(--spacingXSmall);
						border-top: 1px solid var(--colorBorder);
						margin-inline: calc(var(--spacing) * -1);
						padding-top: var(--spacingSmall);
						margin-bottom: calc(var(--spacingSmall) * -1);

						.button + .button {
							margin-left: .4rem !important;
						}
					}

					input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"]),
					textarea,
					select {
						width: 100%;
					}

					.button-small {
						width: 100%;
						height: var(--inputHeight);
						font-size: var(--fontSize);
						padding-inline: var(--spacing);
					}
				}
			}
		}

		tfoot {
			tr {
				display: flex;
				flex-direction: column;
				gap: var(--spacing);
				width: auto;
				padding: var(--spacing) var(--spacing) 0 var(--spacing);
				margin-inline: calc(var(--spacing) * -1);
				border-top: var(--spacingSmall) solid var(--bgApp);

				td {
					font-weight: 400;
					padding: 0;
					text-align: left;

					&:before {
						display: flex;
						content: attr(data-title);
						font-weight: 600;
						line-height: 1;
						margin-bottom: var(--spacingXSmall);
					}

					&:has(button) {
						padding: 0;

						&:before {
							display: none;
						}
					}
				}

				+ tr {
					border-top: 0;
					margin-top: 0;
				}
			}
		}
	}

	.panel--border {
		.txp-table-responsive {
			tr:not(:last-child) {
				border-bottom: 1px solid var(--colorBorder) !important;
			}

			.txp-table-actions {
				padding: 0;
				border-top: 0;
			}
		}
	}

	.wear-product-table {
		thead {
			display: none;
		}

		tbody {
			tr {
				display: flex;
				align-items: flex-end;
				gap: var(--spacingSmall);
				padding-bottom: var(--spacingSmall);

				td {
					padding: 0;

					&:before {
						content: attr(data-title);
						font-size: var(--fontSize);
						font-weight: 600;
						line-height: 1;
						margin-bottom: var(--spacingXSmall);
					}

					&:not(.txp-table-actions) {
						flex: 1;
					}
				}

				+ tr {
					padding-top: var(--spacingSmall);
				}

				&:not(:first-child) {
					td:before {
						display: none;
					}
				}
			}
		}
	}

	/* Buttons & inputs */

	.button--block-mobile {
		width: 100%;
	}

	.button-input {
		margin: 0 !important;
	}

	button + button,
	button + .button,
	.button + button,
	.button + .button {
		margin: 5px 0 0 0;
	}

	.inner-content > p > button,
	.inner-content > p > .button,
	.inner-content > form > p > button,
	.inner-content > form > p .button {
		width: 100%;
	}

	input[type="date"] {
		-webkit-appearance: none;
	}

	input::-webkit-date-and-time-value {
		text-align: left;
	}

	.select2-container {
		max-width: calc(100vw - 50px) !important;
	}

	.select2-container.select2-container--default.select2-container--open {
		left: 25px !important;
		width: calc(100vw - 50px) !important;
	}

	.select2-container.select2-container--default.select2-container--open.select2-container--above,
	.select2-container.select2-container--default.select2-container--open.select2-container--below {
		left: auto !important;
	}

	.input-flex:not(.input-flex--nowrap, .flex-container--nowrap),
	.flex-container:not(.input-flex--nowrap, .flex-container--nowrap){
		flex-direction: column;
		align-items: flex-start;
		gap: var(--spacing);

		> * {
			width: 100%;
		}

		&.input-flex--nowrap,
		.flex-container--nowrap {
			flex-direction: row;
		}
	}

	/* Vue Select */

	table:not(.txp-table) td .vs__dropdown-menu {
		position: fixed;
		bottom: 10px;
		max-height: 200px;
		overflow: auto;
		top: auto;
		left: 10px;
		right: 10px;
		width: calc(100% - 20px) !important;
	}

	.vs__dropdown-option {
		padding-inline: 10px !important;
	}

	/* Flash messages */

	.flash-messages {
		top: auto;
		right: 10px;
		bottom: 10px;
		left: 10px;
		margin: 0;
	}

	/* Sidebar */

	.vertical-navigation-grid {
		display: flex;
		flex-direction: column;
		align-items: unset;
		gap: 0;
	}

	.vertical-navigation-grid > div:not(.vertical-navigation),
	.vertical-navigation-grid > div > form {
		display: contents;
	}

	.vertical-navigation-grid > .vertical-navigation {
		position: static;
		display: block;
		width: 100%;
		max-height: none;
		margin-bottom: var(--spacingSmall);
	}

	.vertical-navigation-grid > .vertical-navigation > ul {
		max-height: 150px;
		overflow-y: auto;
	}

	#content .vertical-navigation-grid header {
		order: -1;
		width: 100%;
		margin: 0 0 10px 0;
	}

	#content .vertical-navigation-grid .grid-row header {
		margin: 0 0 10px 0;
	}

	#content .vertical-navigation-grid header h1 {
		border-radius: initial;
	}

	.vertical-navigation-grid form.content-1-2 .grid-row {
		background: #fff;
		padding-inline: 15px;
		margin-bottom: 10px;
	}

	.vertical-navigation-grid form.content-1-2 h2 {
		background-color: #fff;
		padding: 15px;
		margin: 0;
	}

	/* Document templates */

	.document-template-list {
		max-height: 125px;
		overflow-y: auto;
	}

	/* My profile */

	.my-profile-grid {
		grid-template-columns: 1fr;
		gap: 15px;
		margin-bottom: 15px;
	}

	.my-profile-grid h2 {
		margin-bottom: 15px;
	}

	.my-profile-grid .bordered-list {
		margin-block: 0 15px;
	}

	/* Help articles */

	.helparticle-list {
		padding-inline: 0;
		max-height: 150px;
		overflow-y: auto;
	}

	/* CMS pages */

	.legal-widget-content {
		width: 100% !important;
	}

	.legal-widget-aside {
		position: static !important;
		width: 100% !important;
		height: auto !important;
	}

	.legal-widget-aside img {
		position: static !important;
		transform: none !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-bottom: 20px;
	}

	/* Partner pages */

	.partner-panel {
		margin-block: var(--spacingSmall) 0;
	}

	.dialog:has(.bullet-list) {
		min-width: auto;
	}

	/* Wear products */

	.wear-product {
	}

	/* Add 2 home screen prompt */

	#a2hs_prompt {
		display: none;
		position: fixed;
		top: 50%;
		left: 10px;
		right: 10px;
		transform: translateY(-50%);
		padding: 20px;
		background: #fff;
		border-radius: 2px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
		font-size: 20px;
		text-align: center;
	}

	#a2hs_prompt button {
		display: inline-block;
		width: 48%;
	}

	/* Logged out */

	.user-logged-out {
		background-color: var(--bgPanel);

		#content {
			.login__container {
				grid-template-columns: 1fr;
				grid-template-rows: 1fr 1fr;
				height: 100vh;
				height: 100dvh;
				min-height: initial;
			}

			.login__logo {
				position: static;
				width: 120px;
				margin-bottom: 20px;
				transform: none;
			}

			.login__hero {
				height: auto;
			}

			.login__hero__title {
				display: none;
			}

			.login__form-container {
				display: block;
				background: var(--bgPanel);
				width: 100%;

				&:before {
					content: '';
					position: absolute;
					left: 0;
					top: -40px;
					width: 100%;
					height: 40px;
					background: var(--bgPanel);
					border-top-right-radius: 40px;
					border-top-left-radius: 40px;
				}
			}

			.login__form {
				max-width: none;
			}

			#support_menu {
				display: none;
			}
		}

		#support_menu {
			right: auto;
			left: 50%;
			transform: translateX(-50%);
			white-space: nowrap;
		}
	}
}

[hidden] {
	display: none !important;
}