/*~~~~~~~~~~~~~~~~~*/




/*---------------------------------------- Header --------------------------------------------------*/



.header {
	background: #39006c;
	color: #fff;
	font-family: 'Maax-Medium';
	font-size: 18px;
	z-index: 1000;
	position: sticky;
	/* stays at top of the grid */
	top: 0;

}

.header-title a,
.header-title a:hover,
.header-title a:focus {
  color: inherit; /* Keeps the same color */
  text-decoration: none; /* Optional: remove underline */
}


.header-row {
	display: flex;
	margin-left: 24px;
	margin-right: 24px;
}


.container {
	width: 100%;
	padding-left: 0px;
	padding-right: 12px;
	margin-left: 0px;
	margin-right: auto;
}


img.logo {
	width: 56px;
	height: 56px;
	margin: 9px;
}


img.home {
	width: 24px;
	height: auto;
	display: none;

}


.header-title {
	align-content: center;
	margin-left: 24px;
	margin-right: 10px;
	width: 90%;
}





/* -------------------------Page------------------------------------- */

/* The only scrollable area */

.page {
	overflow-y: scroll;
	/* scrollbar always visible */
	overflow-x: hidden;
	padding: 0 40px;
}


.page.main {
	display: flex;
	flex: auto;

}


/*--- only DialoX page--*/

.breadcrumb {
	list-style: none;
	display: flex;
	row-gap: 8px;
	padding: 4px 8px 4px 0;
	margin: 0;
}

.breadcrumb li>a::after {
	content: url('./images/right.svg');
	margin-left: 16px;
	margin-right: 16px;

}



.breadcrumb a {
	text-decoration: none;
	color: #7A16F8;
	font-family: "Maax-Bold";
}





.title {
	display: block;
	cursor: default;

}

.title.center {

	margin-top: 150px;
}


.title.left {
	align-self: flex-start;

}

.title.left>h6 {

	text-align: left;
	font-size: min(4.5vw, 24px);

}

.main-nav {
	align-content: center;
	margin-left: auto;
}




/* Body */


/* Upper Block ----------------------------------------- Upper Block ------------------------------ */

.central-block {

	display: flex;
	margin: auto;
	max-width: 800px;
	flex-direction: column;
	gap: 24px;


}


.upper-block {

	display: flex;
	margin: 15px auto 0px auto;
	max-width: 1184px;
	flex-direction: column;
	gap: 0px;
	position: relative;

}






.upper-block.top> :nth-child(1) {
	margin-bottom: 35px;
}

.upper-block.top> :nth-child(2) {
	margin-bottom: 24px;
}

.upper-block.top> :nth-child(3) {
	margin-bottom: 40px;
}

.upper-block.top> :nth-child(4) {
	margin-bottom: 16px;
}

.upper-block.top> :nth-child(5) {
	margin-bottom: 0;
}




h1 {
	align-self: stretch;
	color: #39006c;
	text-align: center;
	font-family: 'Halvar-Bold', sans-serif;
	font-size: min(9vw, 55px);
	font-style: normal;
	line-height: normal;

}

h1#main {

	font-size: min(9vw, 80px);
	text-align: left;


}




h6 {
	color: #39006C;
	font-family: 'Halvar-Bold', sans-serif;
	font-size: 24px;
	font-style: normal;
	line-height: 30px;
	text-align: center;

}




/*------------------------------------------- Card --------------------------------------------------------------*/



.card.main {

	position: relative;
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: center;
	flex-direction: row;
	padding: 24px;
	border-radius: 16px;
	font-family: 'Maax-Bold', sans-serif;
	line-height: normal;
	font-size: 16px;
	overflow: hidden;
	cursor: pointer;
	user-select: none;
	white-space: nowrap;
	text-overflow: ellipsis;


}




.card.main .icon,
.card.main .text-block {
	display: flex;
	align-items: center;
	justify-content: center;
	width: auto;

}

.card.main .icon img {
	display: block;
	width: 32px;
	height: 32px;

}



.card.main .text-block {
	color: #fff;
}


.card.main.contact {
	border: 2px solid #AC8CC9;
	background-image: url(./images/contact.svg);
	background-position: center;
}


.card.main.contact:hover {
	background-image: url(./images/contact_hov.svg);

}




.card.main.swyx {

	border: solid 2px #C98C8D;
	background-image: url(./images/swyx.svg);
	background-position: center;

}


.card.main.swyx:hover {
	background-image: url(./images/swyx_hov.svg);

}



.card.main.dialox {

	border: solid 2px #282828;
	background-image: url(./images/dialox.svg);
	background-position: center;


}

.card.main.dialox:hover {
	background-image: url(./images/dialox_hov.svg);

}


.card.jump {
	color: #000;
	display: flex;
	align-items: center;
	padding: 24px;
	border-radius: 16px;
	text-align: center;
	font-family: 'Maax-Bold', sans-serif;
	line-height: normal;
	font-size: 16px;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer;
	user-select: none;
	white-space: nowrap;
	text-overflow: ellipsis;
	border: solid 2px #000
}





.card.jump {

	border: 2px solid #E1DCFF;
	background: #F3F1FF;
	padding: 8px 24px 8px 16px;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 4px;


}




.card.jump:hover {

	background: #E1D8F6;
	border: 2px solid #C9BBEF;
}


@media (hover: none) {

	.card.jump:active {

		background: #E1D8F6;
		border: 2px solid #C9BBEF;
	}

}



.card .icon {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	/* Prevent icon from shrinking */
	margin-right: 4px;
	/* Optional spacing between icon and text */

}

.card.jump .icon img {
	height: 28px;
	width: 28px;
	flex-shrink: 0;
	/* Ensures image also doesn't shrink */

}




.subtitle {
	display: none;
}

.subtitle,
.name {
	margin: 0;
}


.text-block {
	display: flex;
	margin-left: 5px;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	color: #000;

	/* vertically center the text group */
}


.card.jump .text-block {
	margin-top: 3px;
}


.text-block .subtitle {

	font-family: 'Maax-Regular', sans-serif;
	font-size: 12px;
	font-style: normal;
	line-height: normal;
	text-align: left;


}

.text-block .name {
	font-size: 16px;


}

.text-block.main .name {
	font-size: min(5vw, 24px);


}



::selection {
	text-decoration: none;
}




/*--------------------- Search block -------------------*/


.search-bar {
	display: flex;
	align-items: center;
	max-width: 800px;
	border: solid #E7E5E5 1px;
	border-radius: 50px;
	height: 56px;
	padding: 11px 16px;
	gap: 14px;
	background: #FCFCFC;
	box-shadow: 0 0 60px rgba(107, 7, 183, 0.12);
}


.search-bar .icon {
	width: 24px;
	height: auto;
}

.search-bar .text-field {
	flex: 1;
	font-family: "Maax-Regular";
	font-style: normal;
	font-size: 16px;
	line-height: normal;
	border: none;
	background: none;
	outline: none;
}

.search-bar .text-field input::placeholder {

	text-align: left;
	color: #ACA6A7;
	text-overflow: ellipsis;


}

/* filter text bar */

.filter-text-bar {
	display: flex;
	align-items: center;
	max-width: 1184px;
	border-bottom: 2px solid #E7E5E5;
	height: 44px;
	padding: 10px;
	gap: 8px;
	align-self: stretch;
	align-items: center;

}


.filter-text-bar .icon {
	width: 24px;
	height: auto;
}

.filter-text-bar .text-field {
	flex: 1;
	font-family: "Maax-Regular";
	font-size: 16px;
	line-height: 24px;
	border: none;
	background: none;
	outline: none;
}


.filter-text-bar .icon.close {
	display: none;
	/* hidden by default */
	cursor: pointer;
}

.filter-text-bar .icon.loupe {
	display: block;


}


.filter-text-bar .text-field input::placeholder {
	color: #958d97;
	text-align: left;
}

.text-field input {

	font-family: 'Maax-Regular', sans-serif;
	font-size: 16px;
	font-style: normal;
	padding: 5px;
	width: 100%;
	text-align: center;
	background: transparent;
	border: none;
	background: none;
	outline: none;
	caret-shape: block;
	caret-color: #958d97;

}

/* -----------Language filter buttons ---------------------*/

.filter-langs {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;


}

.filter-langs .button {

	display: flex;
	border: solid #E7E5E5 2px;
	border-radius: 16px;
	padding: 4px 16px;
	justify-content: center;
	align-items: center;
	gap: 8px;
	color: #808080;
	font-family: 'Maax-Bold', sans-serif;
	font-size: 14px;
	font-style: normal;
	line-height: 20px;
	cursor: pointer;
	user-select: none;

}

.filter-langs .button:hover {


	border: 2px solid #C9BBEF;

}

@media (hover: none) {

	.filter-langs .button:active {


		border: 2px solid #C9BBEF;

	}

}


.filter-langs .button.active {

	border: 2px solid #E1DCFF;
	background: #F3F1FF;
	color: #000000;

}


.filter-langs .button.active:hover {

	background: #E1D8F6;
	border: 2px solid #C9BBEF;


}



.filter-langs .button .icon {
	display: flex;
	align-items: center;
}



/* Lower Block ----------------------------------------- Lower Block ------------------------------ */

.lower-block {
	max-width: 1184px;
	margin: auto auto 50px auto;


}


.grid-container {
	display: grid;
	row-gap: 24px;
	column-gap: 24px;
	align-self: flex-start;


}

.grid-container {

	grid-template-rows: repeat(1, minmax(0, 1fr));
	grid-template-columns: repeat(3, minmax(0, 1fr));



}



.button-container {

	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	align-content: flex-start;
	gap: 16px;
	align-self: stretch;



}






/*---------------------------------------- Listing --------------------------------*/


.category {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height 1s ease, opacity 0.3s ease;

	transition: max-height 0.4s ease, opacity 0.4s ease, margin 0.4s ease;
	max-height: fit-content;
	opacity: 1;
	margin-top: 20px;

}



.category.hidden {
	max-height: 0;
	opacity: 0;
	margin-top: 0;
	pointer-events: none;
	
}



.list-title {
	margin: 40px 0px 20px 0px;
	align-self: stretch;
	color: #39006c;
	text-align: left;
	font-family: 'Halvar-Bold', sans-serif;
	font-size: min(7vw, 40px);
	font-style: normal;
	line-height: normal;
	cursor: default;


}


.list {
	display: grid;
	grid-template-columns: auto;
	border: solid #E7E5E5 2px;
	border-radius: 16px;
	overflow: visible;

}


.list.single {
	margin-top: 40px;
	/*---- Single List on the DioloX page --- */
}




.list-row {
	display: grid;
	grid-template-columns: minmax(350px, 3fr) 1fr minmax(auto, 250px);
	gap: 1rem;
	padding: 12px 0 12px 16px;

}






.list-row:not(.head) {
	border-top: solid #E4E4E4 2px;

}


/* Normal hover for devices with hover capability */
@media (hover: hover) {
	.list-row:not(.head):hover {
		background-color: #F3F1FF;
	}
}

/* No hover changes on touch devices */
@media (hover: none) {
	.list-row:hover {
		background-color: initial;
		/* keeps the original color of each row */
	}
}

.list-row.head {
	background-color: transparent;
	color: #271A1D;
	text-align: left;
	font-variant-numeric: lining-nums proportional-nums;
	font-family: 'Maax-Bold';
	font-size: 14px;
	font-style: normal;
	line-height: 24px;
	letter-spacing: 0.8px;
	padding: 8px 0 8px 16px;
	cursor: default;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;



}

.list-row.head> :first-child,
.list-row.head> :nth-child(2) {
	border-right: solid #E4E4E4 2px;
	padding-right: 12px;

}




.list-row.odd {
	background-color: var(--Neutral-neutral-100, #F6F6F6);

}

.list-row.odd:last-child {
	border-radius: 0 0 14px 14px;
}

.list-row.even {
	background-color: transparent;
}





.cell {
	display: flex;
	align-items: center;
	overflow-wrap: anywhere;

}



/*--------------------------- Cell language --------------------------- */




.cell.language,
.cell.type {
	line-height: 0px;
	text-wrap-mode: nowrap;


}


.cell.language {

	display: inline-flex;
	align-items: center;


}



.cell.language.en::before {
	content: url('./images/en.svg');
	margin-right: 0.5rem;



}


.cell.language.en::after {
	content: "English";

}



.cell.language.de::before {
	content: url('./images/de.svg');
	margin-right: 0.5rem;



}


.cell.language.de::after {
	content: "German";

}



.cell.language.nl::before {
	content: url('./images/nl.svg');
	margin-right: 0.5rem;


}


.cell.language.nl::after {
	content: "Dutch";

}



.cell.language.fr::before {
	content: url('./images/fr.svg');
	margin-right: 0.5rem;



}


.cell.language.fr::after {
	content: "French";

}



.cell.language.it::before {
	content: url('./images/it.svg');
	margin-right: 0.5rem;

}


.cell.language.it::after {
	content: "Italian";

}


.cell.language.es::before {
	content: url('./images/es.svg');
	margin-right: 0.5rem;



}


.cell.language.es::after {
	content: "Spanish";

}


/*--------------------------- Cell type --------------------------- */



.cell.type {

	display: inline-flex;
	padding: 0px 8px;

	justify-content: flex-start;
	align-items: center;
	gap: 8px;
	align-self: stretch;
	font-family: "Maax-Medium";
	color: #39006C;

}





.cell.type .pdf a,
.cell.type .web a,
.cell.type .docx a {


	padding: 8px 3px 1px 3px;

}





.cell.type>div:not(:last-child)::after {
	content: "";
	display: inline-block;
	width: 2px;
	height: 27px;
	vertical-align: sub;
	background: #d0d0d0;
	border-radius: 50px;
	margin-left: 7px;


}




.cell.type .pdf a::before {
	content: url('./images/pdf.svg');

}



.cell.type .pdf a:hover::before {
	content: url('./images/pdf_hov.svg');

}




.cell.type .web a::before {
	content: url('./images/html.svg');


}


.cell.type .web a:hover::before {
	content: url('./images/html_hov.svg');

}



.cell.type .docx a::before {
	content: url('./images/docx.svg');


}

.cell.type .docx a:hover::before {
	content: url('./images/docx_hov.svg');



}








.up-arrow {
	position: fixed;
	overflow: visible;
	bottom: 50px;
	right: 10vw;
	margin-right: 20px;
	width: 50px;
	height: 50px;
	border-radius: 50px;
	padding: 4px 4px 4px 4px;
	background-color: transparent;
	text-align: center;
	font-size: 1.45em;
	box-shadow: 1px 1px 4px 1px #999898;
	cursor: pointer;
	z-index: 1000;
	transition: opacity 1s ease;

}


body:not(:has(#TOP:in-view)) .up-arrow {
	opacity: 1;
	pointer-events: auto;
}

body:has(#TOP:in-view) .up-arrow {
	opacity: 0;
	pointer-events: none;
}



@media (hover: hover) {
	.up-arrow:hover {

		background-color: #F3F1FF;
	}

}

@media (hover: none) {
	.up-arrow:hover {
		background-color: initial;
	}
}


.up-arrow a::before {
	content: url('./images/up.svg');
	color: #000000;
	display: inline-flex;
	padding: 5px 14px;

}






/*  ----------------------------------- Footer --------------------------------------------- */

#footer {
	height: 88px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	/* or remove 'position' entirely */
}







/*  ----------------------------------- Media Queries ------------------------------------------ */





@media (max-width: 1980px) {

	.upper-block,
	.lower-block {

		max-width: 844px;

	}

	.grid-container.contact {

		grid-template-rows: repeat(2, minmax(0, 1fr));
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}


}







@media (max-width: 1200px) {



	.grid-container.contact {
		grid-template-rows: repeat(2, minmax(0, 1fr));
		grid-template-columns: repeat(2, minmax(0, 1fr));


	}


	.grid-container.swyx {
		grid-template-rows: repeat(2, minmax(0, 1fr));
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}



}


@media (max-width: 890px) {


	* {
		scrollbar-width: thin;
	}





	.cell.language.en::after {
		content: "EN";

	}


	.cell.language.de::after {
		content: "DE";

	}


	.cell.language.nl::after {
		content: "NL";

	}


	.cell.language.fr::after {
		content: "FR";

	}

	.cell.language.it::after {
		content: "IT";

	}

	.cell.language.es::after {
		content: "ES";

	}




	.list-row {
		grid-template-columns: minmax(350px, 2fr) 0.8fr minmax(auto, 250px);
	}

}


@media (max-width: 870px) {


	.page {
		padding: 0 30px;
	}


}




@media (max-width: 860px) {




	.page {
		padding: 0 30px;
	}





	.list-row {

		grid-template-columns: minmax(350px, 2fr) 1fr minmax(auto, 250px);
		gap: 1rem;
		padding: 12px 0 12px 16px;


	}

}


@media (max-width: 850px) {






	.grid-container.main {

		grid-template-rows: repeat(1, minmax(0, 1fr));
		grid-template-columns: repeat(2, minmax(0, 1fr));

	}





	.filter-langs .button {

		padding: 3px 9px;
	}




}




@media (max-width: 800px) {



	.list-row {

		grid-template-columns: minmax(300px, 2fr) 1fr minmax(auto, 250px);
		gap: 1rem;
		padding: 12px 0 12px 16px;


	}

}



@media (max-width: 750px) {


	.title.center {

		margin-top: 54px;
	}


	.button-container,
	.filter-langs {
		gap: 10px
	}


	.list-row {

		grid-template-columns: minmax(400px, 2fr) minmax(120px, 1fr) minmax(auto, 80px);


	}


	.list-row.head .list-head:nth-child(3) {
		font-size: 0;
		/* kills text layout */


	}


	.list-row.head .list-head:nth-child(3)::after {
		content: "View";
		font-size: 14px;


	}



	.cell.type {
		position: relative;
		display: flex;
		row-gap: 8px;
		justify-content: center;
		align-items: center;
		cursor: pointer;
	}


	.cell.type>div:not(:last-child)::after {
		display: none;



	}




	/* hide links by default */
	.cell.type>div {
		display: none;
		position: relative;
		/* so they stay inside the tooltip box */
	}

	.cell.type::after {
		content: url(./images/dots.svg);

	}



	/* reveal all children stacked inside the box */

	/* anchor for absolute children */
	.cell.type {
		position: relative;
		overflow: visible;
	}

	/* base hover card style (no bottom here) */
	.cell.type:hover>div,
	.cell.type:focus-within>div {
		display: inline-flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 40px;
		position: absolute;
		left: -10px;
		transform: translateX(-50%);
		background: #e0dbfd;
		padding: 16px 24px;
		border-radius: 16px;
		min-width: 120px;
		transition: bottom .12s ease, transform .12s ease, opacity .12s ease;


	}



	/* stagger: each next card sits a bit higher and stacks above */
	.cell.type:hover>div:nth-child(1),
	.cell.type:focus-within>div:nth-child(1) {
		bottom: 15px;
		z-index: 1200;
	}

	.cell.type:hover>div:nth-child(2),
	.cell.type:focus-within>div:nth-child(2) {
		bottom: calc(15px + 38px);
		/* tweak 28px step as needed */
		z-index: 1201;
	}

	.cell.type:hover>div:nth-child(3),
	.cell.type:focus-within>div:nth-child(3) {
		bottom: calc(15px + 76px);
		z-index: 1202;
	}

	.cell.type:hover>div:nth-child(4),
	.cell.type:focus-within>div:nth-child(4) {
		bottom: calc(15px + 104px);
		z-index: 1203;
	}

	/* add more nth-child rules if you need more cards */




	.page {
		padding: 0 20px;
	}


}


@media (max-width: 700px) {




	.text-block {
		margin-left: 0;
	}

	.list-row {

		grid-template-columns: minmax(350px, 2fr) 1fr minmax(auto, 100px);


	}

	.cell.title {
		user-select: none;
	}

}


@media (max-width: 600px) {


	.header {
		font-size: 16px;
	}

	.list-row {

		grid-template-columns: minmax(300px, 2fr) 1fr minmax(auto, 90px);



	}

	.page {
		padding: 0 12px;
	}



}



@media (max-width: 550px) {


	.grid-container.main {


		grid-template-columns: repeat(1, minmax(0, 1fr));
		align-self: normal;

	}



	.list-row {

		grid-template-columns: minmax(250px, 3fr) 1fr 1fr;


	}

	.subtitle {
		display: none;
	}


	.page {
		padding: 0 10px;
	}

	.upper-block.top {
		margin-top: 20px;
	}

	.grid-container {
		row-gap: 16px;
		column-gap: 16px;
	}

}

@media (max-width: 500px) {

	.header {
		font-size: 14px;
	}

	.list-row {

		grid-template-columns: minmax(240px, 3fr) 1fr 1fr;



	}


}


@media (max-width: 450px) {



	.list-row {

		grid-template-columns: minmax(200px, 3fr) 1fr 1fr;


	}


}


@media (max-width: 430px) {


	.text-block .name {
		font-size: 14px;
	}

	.button-container {
		gap: 5px
	}

}




@media (max-width: 400px) {



	.list-row {

		grid-template-columns: minmax(150px, 3fr) 1fr 1fr;



	}


}