﻿@import 'reset.css';
@import 'colors.css';
@import 'fonts.css';
@import 'typography.css';
@import 'buttons.css';
@import 'inputs.css';
@import 'cookie-banner.css';
@import 'danol-cookie-banner.css';
@import 'load-transitions.css';
@import 'tabs.css';
@import '/_content/OlgerdinVeva.Theme/assets/icons/font/icons.css';
@import 'checklist.css';
@import 'dropdown.css';
@import 'scrollbar.css';
@import 'tables.css';
@import 'chat.css';

:root {
	font-size: 16px;
	--transition-timing: 0.7s cubic-bezier(0.22, 1, 0.36, 1);
	--border-radius-xsmall: 0.25rem;
	--border-radius-small: 0.5rem;
	--border-radius-medium: 0.75rem;
	--border-radius-large: 1.5rem;
	--border-radius-xlarge: 2rem; /* Danol */ 
	--device-spacing: 1.25rem;
	--header-size: 76px;
	/* Gap */
	--gap-x-largest: 4rem;
	--gap-largest: 3.25rem;
	--gap-3x-large: 3rem;
	--gap-2x-large: 2rem;
	--gap-x-large: 1.75rem;
	--gap-large: 1.5rem;
	--gap-medium: 1.25rem;
	--gap-small: 1rem;
	--gap-x-small: 0.5rem;
	--gap-smallest: 0.25rem;
	/* Padding */
	--padding-xlarge: 2rem;
	--padding-large: 1.75rem;
	--padding-medium: 1.5rem;
	--padding-small: 1.25rem;
	--padding-xsmall: 1rem;
	/*Spacing*/
	--spacing-small: 64px;
	--spacing-medium: 80px;
	--spacing-large: 96px;
	--spacing-xlarge: 112px;
	/* Border radius */
	--border-radius-medium: 0.75rem;
	--border-radius-large: 1.5rem;
	--border-radius-xlarge: 1.25rem;
	--border-radius-small: 0.5rem;
	/* Font */
	--font-line-height-xxs: 14px;
	--font-line-height-xs: 18px;
	--font-line-height-s: 22px;
	--font-line-height-m: 24px;
	--font-line-height-xl: 24px;
	--font-line-height-2xl: 36px;
	--font-line-height-3xl: 40px;
	--font-line-height-4xl: 48px;
	--font-line-height-5xl: 52px;
	--font-line-height-6xl: 64px;
	/* Scroll */
	--scrollbar-width: 4px;
	--scrollbar-width-firefox: thin;
	/* Color */
	--focus-outline-color: var(--secondary-s-02);
}

@media (min-width: 1239px) {
	:root {
		/*Spacing*/
		--spacing-small: 80px;
		--spacing-large: 160px;
		--spacing-xlarge: 200px;
		--border-radius-large: 0.75rem;
		--border-radius-xlarge: 1.5rem;
		/* Font */
		--font-line-height-xxs: 14px;

		--font-line-height-m: 24px;
		--font-line-height-xl: 32px;
		--font-line-height-2xl: 40px;
		--font-line-height-3xl: 52px;
		--font-line-height-4xl: 64px;
		--font-line-height-5xl: 80px;
		--font-line-height-6xl: 96px;
		/* Scroll */
		--scrollbar-width: 6px;
		--scrollbar-width-firefox: auto;
	}
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(76px + 2rem);
}

body {
	background-color: var(--base-background);
}

	body:has(dialog[open]) {
		overflow: hidden;
	}

a, label[for] {
	cursor: pointer;
	outline: 3px solid transparent;
	outline-offset: 0px;
	transition: outline var(--transition-timing), outline-offset var(--transition-timing);
	text-decoration:none;
}

	a:focus-visible,
	label[for]:focus-visible {
		outline: 3px solid var(--focus-outline-color);
		outline-offset: 3px;
	}

/* Medium screens: 768px - 1279px */
@media (min-width: 768px) and (max-width: 1279px) {
	:root {
		--device-spacing: 2rem;
		/* Gap */
		--gap-x-largest: 4rem;
		--gap-largest: 4rem;
		--gap-3x-large: 3.25rem;
		--gap-2x-large: 2.5rem;
		--gap-x-large: 1.75rem;
		--gap-large: 1.5rem;
		--gap-medium: 1.25rem;
		--gap-small: 1rem;
		--gap-x-small: 0.5rem;
		--gap-smallest: 0.25rem;
		/* Padding */
		--padding-xlarge: 3.5rem;
		--padding-large: 2.5rem;
		--padding-medium: 2.25rem;
		--padding-small: 1.75rem;
		--padding-xsmall: 1.25rem;
	}
}

/* Large screens: 1280px - 1919px */
@media (min-width: 1280px) and (max-width: 1919px) {
	:root {
		--device-spacing: 3rem;
		/* Gap */
		--gap-x-largest: 7.75rem;
		--gap-largest: 5rem;
		--gap-3x-large: 4rem;
		--gap-2x-large: 3rem;
		--gap-x-large: 2rem;
		--gap-large: 1.5rem;
		--gap-medium: 1.25rem;
		--gap-small: 1rem;
		--gap-x-small: 0.5rem;
		--gap-smallest: 0.25rem;
		/* Padding */
		--padding-xlarge: 4rem;
		--padding-large: 3rem;
		--padding-medium: 2.5rem;
		--padding-small: 2rem;
		--padding-xsmall: 1.5rem;
	}
}

/* X-Large screens: ≥ 1920px */
@media (min-width: 1920px) {
	:root {
		--device-spacing: 5rem;
		/* Gap */
		--gap-x-largest: 13rem;
		--gap-largest: 5rem;
		--gap-3x-large: 4rem;
		--gap-2x-large: 3rem;
		--gap-x-large: 2rem;
		--gap-large: 1.5rem;
		--gap-medium: 1.25rem;
		--gap-small: 1rem;
		--gap-x-small: 0.5rem;
		--gap-smallest: 0.25rem;
		/* Padding */
		--padding-xlarge: 4rem;
		--padding-large: 3rem;
		--padding-medium: 2.5rem;
		--padding-small: 2rem;
		--padding-xsmall: 1.5rem;
	}
}




.swiper-component::part(button-next) {
	display: none !important;
}

.swiper-component::part(button-prev) {
	display: none !important;
}

.swiper-component::part(pagination) {
	opacity: 0;
}

.svg-icon svg {
	width: var(--width);
	max-width: 100%;
	max-height: 100%;
	color: var(--color);
	fill: var(--color);
}

.veva-grid-column {
	height: 100%;
}

.crown::before {
	content: '';
	display: block;
	height: 1em;
	margin-bottom: 0.5em;
	background-image: url("data:image/svg+xml,%3Csvg width='62' height='16' viewBox='0 0 62 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.3545 16H3.4674C1.71753 16 0.299805 14.5823 0.299805 12.8324V0L20.3525 16H20.3545Z' fill='%23FCBA16' /%3E%3Cpath d='M41.6507 16H58.5337C60.2836 16 61.7013 14.5823 61.7013 12.8324V0L41.6487 16H41.6527H41.6507Z' fill='%23FCBA16' /%3E%3Cpath d='M41.6507 16L31.0016 2.11443L20.3545 16H41.6507Z' fill='%23FCBA16' /%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: left top;
}

.crown--center::before {
	background-position: center top;
}

.crown--small::before {
	height: 0.5em;
}

.crown--xsmall::before {
	height: 0.3em;
}

/* Hide the crown icon only on Danól */
:root:has(#page-container.danol) .offset-card-container .crown::before {
	display: none;
}

.org-chart__line {
	width: 100%;
	height: 1px;
	border: none;
	height: 1px;
	border: none;
	border-top: 1px solid var(--secondary-s-05);
}

hr {
	border: none;
	border-top: 1px solid var(--secondary-s-04);
}

.auto-complete {
	border: 1px solid var(--secondary-s-05);
	top: 64px;
	padding: var(--padding-small) 0;

	border-bottom-left-radius: 8px !important;
	border-bottom-right-radius: 8px !important;
}

.auto-complete-items-item a {
	padding: 16px var(--padding-xsmall) !important;
	display: flex !important;
	align-content: center;
	align-items: center;
	gap: var(--gap-medium);
	font-weight: 400;
	font-size: clamp(1.25rem, 1.204rem + 0.19vw, 1.375rem);
	line-height: var(--font-line-height-xl);
	letter-spacing: 0px;
	color: var(--primary-p-01) !important;
}

	.auto-complete-items-item a:focus {

		border-radius: 3px;
		outline-color: var(--secondary-s-02);
		outline-width: 3px;
	}


	.auto-complete-items-item a:hover {
		background: var(--secondary-s-04);
		border-radius: 4px;
	}
	.auto-complete-items-item a:hover {
		background: var(--secondary-s-04);
		border-radius: 4px;
	}

	.auto-complete-items-item a:active {
		background: var(--extra-s04-pressed);
		border-radius: 4px;
	}


	.auto-complete-items-item a::before {
	content: '';
	display: inline-block;
	width: 24px;
	height: 24px;
	background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_3914_8274)'%3E%3Cpath d='M18 9.75C18 8.66659 17.7866 7.5938 17.372 6.59286C16.9574 5.59193 16.3497 4.68245 15.5836 3.91637C14.8175 3.15029 13.9081 2.5426 12.9071 2.12799C11.9062 1.71339 10.8334 1.5 9.75 1.5C8.66659 1.5 7.5938 1.71339 6.59286 2.12799C5.59193 2.5426 4.68245 3.15029 3.91637 3.91637C3.15029 4.68245 2.5426 5.59193 2.12799 6.59286C1.71339 7.5938 1.5 8.66659 1.5 9.75C1.5 10.8334 1.71339 11.9062 2.12799 12.9071C2.5426 13.9081 3.15029 14.8175 3.91637 15.5836C4.68245 16.3497 5.59193 16.9574 6.59286 17.372C7.5938 17.7866 8.66659 18 9.75 18C10.8334 18 11.9062 17.7866 12.9071 17.372C13.9081 16.9574 14.8175 16.3497 15.5836 15.5836C16.3497 14.8175 16.9574 13.9081 17.372 12.9071C17.7866 11.9062 18 10.8334 18 9.75ZM16.0922 17.1562C14.3906 18.6187 12.1734 19.5 9.75 19.5C4.36406 19.5 0 15.1359 0 9.75C0 4.36406 4.36406 0 9.75 0C15.1359 0 19.5 4.36406 19.5 9.75C19.5 12.1734 18.6187 14.3906 17.1562 16.0922L23.7797 22.7203C24.0703 23.0109 24.0703 23.4891 23.7797 23.7797C23.4891 24.0703 23.0109 24.0703 22.7203 23.7797L16.0922 17.1562Z' fill='%23002643'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_3914_8274'%3E%3Crect width='24' height='24' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
}

.input-container inpup {
	z-index:1001;
}

.auto-complete-group-heading {display: none;}

.genesys-chat.active.chat-container {
	display:flex;
}

body.nav-open .hamburger-icon {
	display:none;
}

body.nav-open .close-icon {
	display:block !important;
}

:root:has(#page-container.danol) {
	--focus-outline-color: var(--secondary-s-06);
}

.page-section--text-normal :is(h1,h2,h3,h4,h5,h6,.veva-paragraph) {
	max-width: 1920px;
	margin: 0 var(--device-spacing);
}

.page-section--text-full :is(h1,h2,h3,h4,h5,h6,.veva-paragraph) {
	margin-left: var(--device-spacing);
}

.page-section--text-narrow :is(h1,h2,h3,h4,h5,h6,.veva-paragraph) {
	max-width: 1920px;
	margin: 0 var(--device-spacing);
}

.page-section--text-xnarrow :is(h1,h2,h3,h4,h5,h6,.veva-paragraph) {
	color: red !important;
	max-width: 1920px;
	margin: 0 var(--device-spacing);
}

.page-section--text-rightoverflow :is(h1,h2,h3,h4,h5,h6,.veva-paragraph) {
	margin-left: var(--device-spacing);
}

.page-section--text-narrow :is(h1,h2,h3,h4,h5,h6,.veva-paragraph) {
	padding-left: unset;
	padding-right: unset;
}

@media (min-width: 767px) {
	.page-section--text-xnarrow :is(h1,h2,h3,h4,h5,h6,.veva-paragraph) {
		padding-left: calc(100% / 4);
		padding-right: calc(100% / 4);
	}
}


@media (min-width: 1279px) {
	.page-section--text-narrow :is(h1,h2,h3,h4,h5,h6,ol,ul,.veva-paragraph) {
		padding-left: calc(100% / 12);
		padding-right: calc(100% / 12);
	}
}