:root {
	/* Colors */
	/* Basic Colors */
	--white: #FFFFFF;
	--black: #000000;
	--green: #00AB8E;
	--red: red;
	/* Blue color for sections */
	--blue: #006F9C;
	/* Blue color for headlines */
	--text-blue: #141E38;
	/* Alternative colors within the Design guide */
	--jkf-blue: #204485;
	--moss-green: #3E625A;
	--beige: #D9CCBF;
	--light-blue: #90C0CC;
	--blue-green: #6DC3C4;
	--brown: #4C3E29;
	--navy-blue: #21325E;
	/* Grey colors */
	--dark-grey: #3C3C3B;
	--grey: #DADADA;
	--darker-light-grey: #B2B2B2;
	--medium-light-grey: #C0C0C0;
	--light-grey: #F5F5F5;
	--dull-grey: #F6F6F6;
	/* Custom colors */
	--ecademy-blue: #0D6EFD;
	--faq-grey: #6A6A6A;
	/* Background Colors */
	/* Fonts */
	/* And what ever that can be made a varibel */
}

/* Custom CSS Classes */
body {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

footer {
	margin-top: auto;
}

/* Headers */
.header-1 {
	font-size: 3.8rem;
	color: #141E38;
	font-weight: 550;
}

.header-2 {
	font-size: 2.8rem;
	color: #141E38;
	font-weight: 550;
}

.header-3 {
	font-size: 2.2rem;
	color: #141E38;
	font-weight: 550;
}

.header-4 {
	font-size: 1.4rem;
	color: #141E38;
	font-weight: 550;
}

.header-5 {
	font-size: 2.8rem;
	color: #141E38;
	font-weight: 650;
}

.margin-bottom-m25 {
	margin-bottom: -25px;
}

/* Used for text under pictures, where the text is a little bigger than the paragraph */
.header-below-photo {
	font-size: 1.3rem;
	margin-top: 2%;
}

.video-header-white {
	pointer-events: none;
	font-family: 'Exo', sans-serif;
	color: #FFFFFF;
	font-size: 4.4rem;
	font-weight: bold;
	text-align: center;
	margin: auto;
	margin-top: 4%;
	z-index: 1;
}

.video-header-black {
	pointer-events: none;
	font-family: 'Titillium Web', sans-serif;
	color: #000;
	font-size: 4.4rem;
	font-weight: bold;
	text-align: center;
	margin: auto;
	margin-top: 4%;
	z-index: 1;
}

/* Animation for frontpage-video texts*/
@keyframes fade {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

.paragraph-1 {
	font-size: 1rem !important;
}

.paragraph-1-5 {
	font-size: 0.9rem !important;
}

.paragraph-2 {
	font-size: 0.8rem !important;
}

.paragraph-2-5 {
	font-size: 0.7rem !important;
}

.paragraph-3 {
	font-size: 0.6rem !important;
}

/* Buttons */
/* Primary button that leads to other pages (CTA) */
.button-cta {
	background: #00AB8E !important;
	color: #FFFFFF !important;
	/* display: flex!important;
     */
	font-size: 1.4rem !important;
	justify-content: center !important;
	align-items: center !important;
	font-family: 'Exo', serif !important;
	font-weight: 500 !important;
	border: none !important;
}

/*If the background is NOT white */
.button-download-white {
	font-family: 'Exo', serif;
	font-weight: 500;
	font-size: 1rem;
	background: #FFFFFF;
	color: #006F9C;
}

/*If the background is white*/
.button-download-blue {
	font-family: 'Exo', serif !important;
	font-weight: 500 !important;
	font-size: 1rem !important;
	background: #006F9C !important;
	color: #FFFFFF !important;
}

.button-download-green {
	font-family: 'Exo', serif !important;
	font-weight: 500 !important;
	font-size: 1rem !important;
	background: #00AB8E !important;
	color: #FFFFFF !important;
}

.button-download-lightblue {
	font-family: 'Exo', serif !important;
	font-weight: 500 !important;
	font-size: 1rem !important;
	background: #90C0CC !important;
	color: #FFFFFF !important;
}

/*The 3 buttons below are only used on the 404 page atm */
.button-cta-2 {
	background: #006f9c !important;
	color: #FFFFFF !important;
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	font-family: 'Exo', serif !important;
	font-weight: 500 !important;
}

.button-cta-3 {
	background: #90c0cc;
	color: #FFFFFF;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: 'Exo', serif;
	font-weight: 500;
}

.button-cta-4 {
	background: #6dc3c4 !important;
	color: #FFFFFF;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: 'Exo', serif;
	font-weight: 500;
}

.button-cta-5 {
	background: #3E625A !important;
	box-shadow: 0px 2.29532px 2.29532px rgba(0, 0, 0, 0.25) !important;
	border-radius: 9px !important;
	color: white !important;
}

.button-back {
	background: #FFFFFF;
	color: #000000;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: 'Exo', serif;
	font-weight: 500;
}

.button-back-registration {
	background: #FFFFFF !important;
	color: #000000 !important;
	font-size: 1.4rem !important;
	justify-content: center !important;
	align-items: center !important;
	font-family: 'Exo', serif !important;
	font-weight: 500 !important;
}

.button-link-faq {
	background: #90C0CC !important;
	color: #FFFFFF !important;
	justify-content: center !important;
	align-items: center !important;
	font-family: 'Exo', serif !important;
	border: none !important;
}

.button-create-entity {
	background: #00AB8E !important;
	color: #FFFFFF !important;
	justify-content: center !important;
	align-items: center !important;
	font-family: 'Exo', serif !important;
	border: none !important;
}

.button-delete-entity {
	background: #ab001d !important;
	color: #FFFFFF !important;
	justify-content: center !important;
	align-items: center !important;
	font-family: 'Exo', serif !important;
	border: none !important;
}

.button-update-entity {
	background-color: white !important;
	color: black !important;
	justify-content: center !important;
	align-items: center !important;
	font-family: 'Exo', serif !important;
}

/* COLOURS */
/* Primary Colours */
.white {
	color: var(--white) !important;
}

.black {
	color: var(--black) !important;
}

.green {
	color: var(--green) !important;
}

.blue {
	color: var(--blue) !important;
}

.red {
	color: var(--red) !important;
}

/* Blue colour for headlines */
.textblue {
	color: var(--text-blue) !important;
}

/* Alternative colours within the Design guide */
.jkfblue {
	color: var(--jkf-blue) !important;
}

.mossgreen {
	color: var(--moss-green) !important;
}

.beige {
	color: var(--beige) !important;
}

.lightblue {
	color: var(--light-blue) !important;
}

.bluegreen {
	color: var(--blue-green) !important;
}

.brown {
	color: var(--brown) !important;
}

.navyblue {
	color: var(--navy-blue) !important;
}

.black2 {
	color: #2B2926;
}

/* Grey colours */
.darkgrey {
	color: var(--dark-grey) !important;
}

.grey {
	color: var(--grey) !important;
}

.darkerlightgrey {
	color: var(--darker-light-grey) !important;
}

.mediumlightgrey {
	color: var(--medium-light-grey) !important;
}

.lightgrey {
	color: var(--light-grey) !important;
}

.dullgrey {
	color: var(--dull-grey) !important;
}

.ecademy-blue {
	color: var(--ecademy-blue) !important;
}

.faq-grey {
	color: var(--faq-grey) !important;
}

.textgrey {
	color: #808080;
}

/* Fill svg footer*/
.svg-fill {
	fill: white;
}

/* BACKGROUND COLOURS */
/* Primary Colours */
.container-white {
	background-color: #FFFFFF !important;
}

.container-green {
	background-color: var(--green) !important;
}

.container-ecademy-grey {
	background-color: #f3f3f37e !important;
}

.container-whitecream {
	background-color: #FBFBFB !important;
}

.container-black {
	background-color: #000000 !important;
}

.containter-jkfblue {
	background-color: var(--jkf-blue) !important;
}

.container-white-jkfblue-outline {
	background-color: #F6F9FC !important;
	border: 0.1rem solid var(--jkf-blue) !important;
}

/* Blue colour for sections */
.container-blue {
	background-color: #006F9C !important;
}

/*Blue color for dropdown */
.container-blue-navbar {
	background: #204485 !important;
}

/* Blue colour for headlines */
.container-textblue {
	background-color: #141E38 !important;
}

/*Gradient color - used for navbar */
.gradient-background {
	background: linear-gradient(90deg, #204485 66.67%, #276091 100%);
}

.gradient-background-footer {
	background: #081938;
}

/* Alternative colours within the Design guide */
.container-jkfblue {
	background-color: #204485 !important;
}

.container-mossgreen {
	background-color: #3E625A !important;
}

.container-beige {
	background-color: #D9CCBF !important;
}

.container-lightblue {
	background-color: #90C0CC !important;
}

.container-bluegreen {
	background-color: #6DC3C4 !important;
}

.container-brown {
	background-color: #4C3E29 !important;
}

.container-navyblue {
	background-color: #21325E !important;
}

.container-cyanblue {
	background-color: #89D0F5 !important;
}

.container-ecademy-blue {
	background-color: #A3CBDB !important;
}

.container-ecademy-lightblue {
	background-color: #CCE2EB !important;
}

.grey-background-frontpage {
	background-color: #F7F8FB !important;
}

/* Grey colours */
.container-darkgrey {
	background-color: #3C3C3B !important;
}

.container-grey {
	background-color: #DADADA !important;
}

.container-darkerlightgrey {
	background-color: #B2B2B2 !important;
}

.container-lightgrey {
	background-color: #F5F5F5 !important;
}

.container-dullgrey {
	background-color: #F6F6F6 !important;
}

.container-pcgrey {
	background-color: #E1E1E1 !important;
}

/* Fonts */
.exo {
	font-family: 'Exo', serif;
}

.titillium {
	font-family: 'Titillium Web', sans-serif !important;
}

.custom-large {
	font-family: 'Titillium Web', sans-serif;
	font-weight: 400;
	font-size: 1.2rem;
	line-height: 150%;
}

.custom-large-bold {
	font-family: 'Titillium Web', sans-serif;
	font-weight: 700;
	font-size: 1.2rem;
	line-height: 150%;
}

/*For longer texts the fonts below can be used */
.arial {
	font-family: Arial, sans-serif;
}

.montserrat {
	font-family: 'Montserrat', sans-serif;
}



/*General rules for Nav tabs*/
#aTab2,
.conftab {
	background-color: #90C0CC !important;
}

.bg-lightgrey {
	background-color: #DADADA !important;
}

/* banner on pages */
.banner-position {
	position: relative !important;
}

.banner-text-position {
	position: absolute;
}

/* Configurator*/
.horizontal_line {
	background-color: black;
	width: 100%;
	height: 2px;
	line-height: 100%;
}

/* Links, ul, li decorations */
/* Remove link underline*/
.remove-underline {
	text-decoration: none;
}

/* Remove ul dots */
.remove-ul-dots {
	list-style-type: none;
}

.square-ul {
	list-style-type: square;
}

/* Add underline */
.add-underline {
	text-decoration: underline;
}

/* Remove arrows from number input*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	/* display: none;
     <- Crashes Chrome on hover */
	-webkit-appearance: none;
	margin: 0;
	/* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number] {
	-moz-appearance: textfield;
	/* Firefox */
}

/* remove resize option textarea*/
textarea {
	resize: none;
}

/*Custom fontsize Font sizes */
.fs-08vw {
	font-size: 0.8vw !important;
}

.fs-09-rem {
	font-size: 0.9rem !important;
}

.fs-09vw {
	font-size: 0.9vw !important;
}

.fs-12-rem {
	font-size: 1.2rem !important;
}

.fs-13-rem {
	font-size: 1.3rem !important;
}

.fs-10-px {
	font-size: 10px !important;
}

.fs-12-px {
	font-size: 12px !important;
}

.fs-16-px {
	font-size: 16px !important;
}

.fs-17-px {
	font-size: 1px !important;
}

.fs-18-px {
	font-size: 18px !important;
}

.fs-20-px {
	font-size: 20px !important;
}

.fs-25-px {
	font-size: 25px !important;
}

.fs-80-px {
	font-size: 80px
}

/* z-index*/
/* Is used on hover dropdown navbar*/
.z-index-0 {
	z-index: 0;
}

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

.z-index-99 {
	z-index: 99;
}

.z-index--15 {
	z-index: -15;
}

.z-index-10000000 {
	z-index: 10000000;
}

.z-index--10000000 {
	z-index: -10000000;
}

.z-index-20000000 {
	z-index: 20000000;
}

.z-index-200000001 {
	z-index: 200000001;
}

/* Custom widths */
.width-10 {
	width: 10%;
}

.width-15 {
	width: 15%;
}

.width-20 {
	width: 20%;
}

.width-30 {
	width: 30%;
}

.width-35 {
	width: 35%;
}

.width-40 {
	width: 40%;
}

.width-48 {
	width: 48%;
}

.width-60 {
	width: 60%;
}

.width-70 {
	width: 70%;
}

.width-80 {
	width: 80%;
}

.width-90 {
	width: 90%;
}

.width-100 {
	width: 100%;
}

/* Custom borders */
.border-25px {
	border-radius: 25px !important;
}

.border-20px {
	border-radius: 20px !important;
	;
}

.border-12px {
	border-radius: 12px !important;
	;
}

.border-18px {
	border-radius: 18px !important;
	;
}

/* Cursors */
/* Pointer */
.pointer-cursor {
	cursor: pointer
}

/* Box shadows */
/* Shadow used product center filter*/
.box-shadow-1 {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.box-shadow-ecademy {
	box-shadow: 0px 19.22px 64px rgba(0, 0, 0, 0.07), 0px 8px 27px rgba(0, 0, 0, 0.05), 0px 4.29px 14.31px rgba(0, 0, 0, 0.04), 0px 2.41px 8px rgba(0, 0, 0, 0.035), 0px 1.28px 4.26px rgba(0, 0, 0, 0.03), 0px 0.53px 1.77px rgba(0, 0, 0, 0.02);
}

/* Meget specifik men er nødvendigt*/
.height-model-name-productcenter {
	min-height: 80px;
}

/* Specifikke links*/
.product-center-download-links {
	background: none !important;
	border: none;
	/*optional*/
	font-family: arial, sans-serif;
	/*input has OS specific font-family*/
	color: black;
	cursor: pointer;
	text-decoration: underline;
}

/* navbar */
.navbar-list li:hover {
	color: #FFFFFF;
	text-decoration: underline;
	text-decoration-color: #FFFFFF;
	text-decoration-thickness: 2px;
	text-underline-offset: 8px;
}

.selected-page-underline {
	text-decoration-color: #BCB6AF;
	text-decoration-thickness: 2px;
	text-underline-offset: 8px;
}

.dropdown-elements-navbar .dropdown-menu a {
	background: #204485 !important;
}

.dropdown-menu li:hover {
	text-decoration: underline;
	text-decoration-color: white;
	background-color: linear-gradient(90deg, #204485 66.67%, #276091 100%);
}

.dropdown-elements-navbar:hover .dropdown-menu {
	display: block;
}

.bi-chevron-down {
	display: inline-block;
}

.bi-chevron-up {
	display: none;
}

.dropdown-elements-navbar:hover .bi-chevron-down {
	display: none;
}

.dropdown-elements-navbar:hover .bi-chevron-up {
	display: inline-block;
}

.arrow-icon-container {
	font-size: 10px;
}

.navbar-list p {
	padding: 1rem;
}

.dropdown-elements-navbar a {
	color: #FFFFFF !important;
	text-decoration: none;
	font-family: 'Titillium Web', sans-serif;
	font-weight: 700;
	font-size: 1.2rem;
	line-height: 150%;
}

.dropdown-elements-navbar .dropdown-plain-text {
	font-family: 'Titillium Web', sans-serif;
	font-weight: 400;
	font-size: 1.2rem;
	line-height: 150%;
}

.on-mouse-over:hover a {
	color: #FFFFFF;
}

.login-profil-and-arrow {
	display: inline-block;
}

.login-profil-and-arrow,
.profil-picture-login {
	display: inline;
}

/* Product center */
.nav-pills .nav-link.active {
	background-color: #89D0F5 !important;
	color: #000 !important;
	border-radius: 0px !important;
}

.max-height-pc-dropdown {
	max-height: 280px;
}

.nav-bar-pc {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
}

.underline-h1 {
	border-bottom: 8px solid #006F9C;
}

/* Filter Tool */
#tabsOverviewFilter .nav-link.active {
	background-color: #00AB8E !important;
}

#Tab3_4_Body .nav-link.active {
	background-color: #006F9C !important;
}

.height-description {
	height: 30px;
}

.height-material-and-volume {
	height: 29px;
}

.adjust-svg-tab2 {
	margin-top: -5px;
	margin-left: 19%;
}

.option-selection-image-size {
	height: 280px;
	width: 300px;
	overflow-x: hidden;
	object-fit: contain;
}

.option-selection-image-size2 {
	height: 415px;
	width: 450px;
	overflow-x: hidden;
	object-fit: contain;
}


.tab1-image-carousel {
	height: 280px;
	overflow-x: hidden;
	object-fit: contain;
	margin-inline: auto;
}

.adjust-image-div {
	max-height: 250px;
	overflow-x: hidden;
	object-fit: contain;
}

.adjust-tab1-div {
	height: 325px;
}

.adjust-tab1-div-BF {
	height: 305px;
}

.adjust-filter-button {
	position: absolute;
	bottom: 0;
	margin-top: 2px;
	height: 50px;
	width: 54%;
}

.adjust-filter-image-size {
	height: 280px;
	overflow-x: hidden;
	object-fit: contain;
}

.shadow-tab2 {
	box-shadow: 1px 1.5px 1.5px 1.5px #6DC3C4;
}

#hoverFiltername span {
	cursor: pointer;
}
.make-content-box {
	box-sizing: content-box;
}
/*for hovering over the filtername description part on tab2*/
.hovertext {
	position: relative;
	cursor: pointer;
}

.hovertext:before {
	content: attr(data-hover);
	visibility: hidden;
	opacity: 0;
	width: 145px;
	background-color: #90C0CC;
	color: #fff;
	text-align: left;
	border-radius: 5px;
	padding: 3px;
	font-size: 12px;
	transition: opacity 1s ease-in-out;
	position: absolute;
	z-index: 3;
	left: 0;
	top: 270%;
}

.hovertext:hover:before {
	opacity: 1;
	visibility: visible;
}

.filter-item img {
	object-fit: contain;
	height: 370px;
	width: 100%; 
  }  
  
/* Digital tools landing page */
.section-height-300 {
	height: 300px
}

.section-height-400 {
	height: 400px
}

.section-height-550 {
	height: 550px;
}

/* Front page */
.display-semibold-2 {
	font-family: 'Titillium Web', sans-serif;
	font-weight: 600;
	font-size: 6.1875rem;
	line-height: 120%;
}

.display-semibold-3 {
	font-family: 'Titillium Web', sans-serif;
	font-weight: 600;
	font-size: 5.16rem;
	line-height: 120%;
}

.body-large {
	font-family: 'Titillium Web', sans-serif;
	font-weight: 400;
	font-size: 1.2rem;
	line-height: 150%;
}

.body-regular {
	font-family: 'Titillium Web', sans-serif;
	font-weight: 400;
	font-size: 1rem;
	line-height: 180%;
}

.body-regular-bold {
	font-family: 'Titillium Web', sans-serif;
	font-weight: 700 !important;
	font-size: 1rem;
	line-height: 180%;
}

.header-bold-1 {
	font-family: 'Titillium Web', sans-serif;
	font-weight: 700;
	font-size: 3.5825rem;
	line-height: 130%;
}

.header-bold-2 {
	font-family: 'Titillium Web', sans-serif;
	font-weight: 700;
	font-size: 2.985rem;
	line-height: 130%;
}

.header-semibold-2 {
	font-family: 'Titillium Web', sans-serif;
	font-weight: 600;
	font-size: 2.985rem;
	line-height: 130%;
}

.header-semibold-4 {
	font-family: 'Titillium Web', sans-serif;
	font-weight: 600;
	font-size: 1.075rem;
	line-height: 140%;
}

.thick-button {
	height: 3rem;
	font-family: 'Titillium Web', sans-serif;
	font-weight: 400;
	font-size: 1.2rem !important;
	line-height: 150%;
}

.freq-q-button::before .bi-plus {
	display: inline-block;
}

.freq-q-button .bi-dash {
	display: none;
}

.freq-q-button[aria-expanded="true"] .bi-plus {
	display: none;
}

.freq-q-button[aria-expanded="true"] .bi-dash {
	display: inline-block;
}

.card-bottom-element {
	margin-top: auto;
}

/* About us*/
.hero-container-about-us {
	position: relative;
	height: 500px;
}

.video-container-about-us {
	position: relative;
	height: 100%;
	/* Make the video container take the full height of the parent */
	overflow: hidden;
	/* Hide the overflowing video */
}

.video-container-about-us video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Ensure the video covers the entire container */
}

/* Progress Bar */
#progressbar {
    margin: 0 0 30px;
    padding: 0;
    overflow: hidden;
    counter-reset: step;
    display: flex;
    justify-content: space-between;
}

#progressbar li {
    list-style-type: none;
    color: var(--grey-600);
    text-align: center;
    font-size: 13px;
    width: calc(100%/4);
    float: left;
    position: relative;
    font-family: 'Titillium Web', sans-serif;
    font-weight: 500;
}

#progressbar li:before {
    content: counter(step);
    counter-increment: step;
    width: 50px;
    height: 50px;
    line-height: 50px;
    display: block;
    font-size: 20px;
    color: var(--grey-600);
    background: var(--grey-200);
    border-radius: 50%;
    margin: 0 auto 10px auto;
    transition: all 0.3s ease;
}

#progressbar li:after {
    content: '';
    width: 100%;
    height: 4px;
    background: var(--grey-200);
    position: absolute;
    left: -50%;
    top: 25px;
    z-index: -1;
    transition: all 0.3s ease;
}

#progressbar li:first-child:after {
    content: none;
}

#progressbar li.active {
    color: var(--primary-600-main);
}

#progressbar li.active:before {
    background: var(--primary-600-main);
    color: white;
}

#progressbar li.active:after {
    background: var(--primary-600-main);
}

#progressbar li.completed:before {
    background: var(--primary-600-main);
    color: white;
}

#progressbar li.completed:after {
    background: var(--primary-600-main);
}

.register input::placeholder {
	color: white;
	opacity: 0.25;
}

.register input:-webkit-autofill,
.register input:-webkit-autofill:focus {
	transition: background-color 600000s 0s, color 600000s 0s;
}

/* PART OF REGISTER.HTML : This was some old css i did not made for a 'password streng visualizer' */
*:focus {
	outline-style: none;
}

#progressBar {
	height: 20px;
	width: 100%;
	margin-top: 0.6em;
	border-radius: 50px;
	border: 2px solid #ddd
}

#progress-bar {
	width: 0%;
	height: 100%;
	transition: width 500ms linear;
	border-radius: 50px;
	box-shadow: 0px 1px 5px #555
}

.progress-bar-danger {
	background: #d00;
}

.progress-bar-warning {
	background: #f50;
}

.progress-bar-success {
	background: #080;
}

#password_output {
	text-align: center;
}

#h2Divregister {
	display: flex;
	justify-content: center;
}

#sliderPasswordStrength {
	display: flex;
	justify-content: center;
}

/* PART OF REGISTER.HTML : Creates an 'required' star on the input fileds with the class 'required' */
.required .control-label:after {
	content: "*";
	color: red;
}

/* PART OF REGISTER.HTML : specific box-shadow for the last page of register*/
.registration-box- {
	box-shadow: 0px 4px 4px 4px #C6C6C6;
}

/* hover background color on navbar dropdown */
.on-hover>li>a:hover {
	background: linear-gradient(90deg, #204485 66.67%, #276091 100%);
	;
}

/* white space*/
.white-space-nowrap {
	white-space: nowrap;
}

/* Text-overflow*/
.text-overflow-ellipsis {
	text-overflow: ellipsis;
}

/* Fantool */
.LandingGreyBox {
	box-sizing: border-box;
	width: 390px;
	height: 332px;
	left: 377px;
	top: 804px;
	background: #F5F5F5;
	border-top: 1px solid #FFFFFF;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
	border-radius: 10px;
}

.LandingInfoTopper {
	height: 30px;
	left: 1294px;
	top: 649px;
	background: #006F9C;
}

.LandingInfoBottom {
	height: 30px;
	left: 1294px;
	top: 649px;
	background: #EAEAEA;
}

.LandingInfoWhite {
	height: 30px;
	left: 1294px;
	top: 409px;
	background: #EAEAEA;
}

.LandingInfoGrey {
	height: 30px;
	left: 1294px;
	top: 439px;
	background: #FFFFFF;
}

.nonunderline {
	text-decoration: none;
}

/* Ecademy */
.card-height {
	height: 200px !important;
}

.card-height-big {
	height: 200px !important;
}

.card-height-title {
	height: 85px;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	/* Number of lines to show */
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.card-height-description {
	height: 100px;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	/* Number of lines to show */
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.card-height-description-specific {
	height: 85px;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	/* Number of lines to show */
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.learning-div {
	display: flex;
	align-items: center;
}

.learning-text {
	flex-grow: 1;
}

.hr-line-for-learning {
	flex-grow: 99;
	height: 0;
	border-top: 2px solid black;
	margin-left: 10px;
}

.card-radius {
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}

.faq-textarea-size {
	height: 100px;
	width: 100%;
}

.faq-on-hover {
	cursor: pointer;
}

.faq-min-height-page {
	min-height: 800px;
}

.related-video-size {
	height: 150px;
}

.related-video-img-container {
	position: relative;
	display: flex;
	justify-content: center;
}

.related-video-icon {
	position: absolute;
	width: 100px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
}

.carousel-control-next-icon {
	width: 50px;
	height: 50px;
}

.carousel-control-prev-icon {
	width: 50px;
	height: 50px;
}

/*Ecademy - Filter/Sorting tool*/
.video-icon {
	position: absolute;
	width: 125px;
	top: 22%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
}

.carousel-control-next-icon {
	width: 70px;
	height: 70px;
}

.carousel-control-prev-icon {
	width: 70px;
	height: 70px;
}

.filter-header-img {
	float: right;
}

.industries-ecademy a {
	color: black;
	text-decoration: none;
	background-color: none;
}

.height-fit-content {
	height: fit-content !important;
}

.section-height-200 {
	height: 200px;
}

.button-clear-all {
	float: right;
	margin-right: -15px;
	font-size: 16px;
	background-color: white;
	border: none
}

.button-filters-selected {
	/*Need to use correct colors var*/
	float: left;
	background-color: #F3F3F3;
	border-color: black;
	border-radius: 110px;
	border-width: 0.5px;
	color: black;
	text-align: center;
	font-size: 13.33px;
	cursor: pointer;
	margin-left: -15px;
	padding: 2.5px 7.5px;
}

.viicondeo {
	position: absolute;
	width: 125px;
	top: 22%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
}

.button-cta-maintag {
	background: white !important;
	color: black !important;
	/* display: flex!important;
     */
	font-size: 1.4rem !important;
	justify-content: center !important;
	align-items: center !important;
	font-family: 'Exo', serif !important;
	font-weight: 500 !important;
}

.button-cta-maintag-selected {
	background: #00AB8E !important;
	color: white !important;
	/* display: flex!important;
     */
	font-size: 1.4rem !important;
	justify-content: center !important;
	align-items: center !important;
	font-family: 'Exo', serif !important;
	font-weight: 500 !important;
}

.card-title-height {
	min-height: 48px;
}

.width-250px {
	width: 250px;
}

/* myJKF */
/* Link to get filter: https://codepen.io/sosuke/pen/Pjoqqp*/
.svg-change-color:hover {
	filter: invert(100%) sepia(16%) saturate(7377%) hue-rotate(204deg) brightness(97%) contrast(87%);
}

.sidebar-selected {
	filter: invert(55%) sepia(80%) saturate(2973%) hue-rotate(202deg) brightness(92%) contrast(97%);
	border-right: 3px solid var(--green);
}

.sidebar-mt {
	margin-top: 2em;
}

.sidebar-my {
	margin-top: 1em;
	margin-bottom: 1em;
}

.sidebar-mb {
	margin-bottom: 3em;
}

.sidebar {
	height: fit-content;
}

.center-content {
	height: 42.25em;
}

.right-content {
	height: 45em;
}

.noti-text-size-1 {
	font-size: 14 px;
}

.noti-text-size-2 {
	font-size: 10 px;
}

.scrollbar {
	float: left;
	width: 100%;
	overflow-y: scroll;
}

#style-7::-webkit-scrollbar-track {
	background-color: var(--light-grey);
	border-radius: 10px;
}

#style-7::-webkit-scrollbar {
	width: 10px;
	background-color: var(--light-grey);
}

#style-7::-webkit-scrollbar-thumb {
	border-radius: 10px;
	background-color: var(--jkf-blue);
}

.page-link.active {
	background-color: var(--green);
	color: var(--white);
	border: none;
}

.avatar {
	vertical-align: middle;
	width: 25px;
	height: 25px;
	border-radius: 50%;
}

.custom-rounded {
	border-radius: 10px;
	/* Adjust the value to control the level of rounding */
}

.custom-rounded-1 {
	border-radius: 8px;
}

.form-check-input:checked{
    background-color: #A6CDD6;
    border-color: #A6CDD6; 
}

.form-label{
    font-weight: bold;
}

.normal_background{
    border-radius: 4.8px;
    background: var(--secondary-secondary-1100, #E9F2F5);
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.15);
}

.active_background{
    border-radius: 4.8px;
    background: var(--secondary-secondary-1700-main, #90C0CC);
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.15);
}

    /* Remove the outline around the button when pressed */
    .btn.btn-outline-dark:focus {
        box-shadow: none;
    }

    .active_number{
        color: #0DCAF0 !important;
    }

/*Circle with user initials */
.circle {
	width: 25px;
	height: 25px;
	border-radius: 50%;
	background-color: #f5f5f5;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 7px;
	font-weight: bold;
}

/*chances the darkness of the backdrop on modals */
.modal-backdrop {
	background-color: rgba(0, 0, 0, 0.2) !important;
	/* Adjust the opacity as needed (0.5 for 50% opacity) */
}

/*TD på table i MYjkf*/
.td_myjkf_project {
	word-wrap: break-word;
	word-break: break-all;
}

.first-th {
	border-left: 0.5px solid #d1d1d1 !important;
	border-top: 0.5px solid #bcbcbd !important;
	border-bottom: 0.5px solid #bcbcbd !important;
	border-radius: 5px 0 0 5px;
}

.th-label {
	color: var(--neutral-dark-500, #49566D);
	/* Body/Regular/Rg Bold */
	font-family: Titillium Web;
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: 180%;
}

.middle-th {
	border-top: 0.5px solid #bcbcbd !important;
	border-bottom: 0.5px solid #bcbcbd !important;
}

.last-th {
	border-right: 0.5px solid #bcbcbd !important;
	border-top: 0.5px solid #bcbcbd !important;
	border-bottom: 0.5px solid #bcbcbd !important;
	border-radius: 0 5px 5px 0;
}

.first-td {
	background-color: #EFF1F6 !important;
	border-left: 0.5px solid #bcbcbd !important;
	border-top: 0.5px solid #bcbcbd !important;
	border-bottom: 0.5px solid #bcbcbd !important;
	border-radius: 5px 0 0 5px;
}

.middle-td {
	background-color: #EFF1F6 !important;
	border-top: 0.5px solid #bcbcbd !important;
	border-bottom: 0.5px solid #bcbcbd !important;
}

.last-td {
	background-color: #EFF1F6 !important;
	border-right: 0.5px solid #bcbcbd !important;
	border-top: 0.5px solid #bcbcbd !important;
	border-bottom: 0.5px solid #bcbcbd !important;
	border-radius: 0 5px 5px 0;
}

.first-label {
	color: var(--shades-black-100, #0E0209);
	/* Body/Regular/Rg Bold */
	font-family: Titillium Web;
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: 180%;
	/* 28.8px */
}

.other-label {
	color: var(--shades-black-100, #0E0209);
	/* Body/Regular/Rg */
	font-family: Titillium Web;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 180%;
	/* 28.8px */
}

/*Contact us*/
.header-container {
	background-size: cover;
	/* Adjust the background size as needed */
	background-position: center;
	/* Center the background image */
	height: 200px;
	/* Set the height as needed */
	/* Add any other CSS properties for your header container */
}
/*Slider on fan tool*/
#toleranceSP {
	-webkit-appearance: none;
	width: 100%;
	height: 15px;
	border-radius: 5px;  
	background: #d3d3d3;
	outline: none;
	opacity: 0.7;
	-webkit-transition: .2s;
	transition: opacity .2s;
	}

	#toleranceSP::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 15px;
	height: 15px;
	border-radius: 50%; 
	background: #204485;
	cursor: pointer;
	}

	#toleranceSP::-moz-range-thumb {
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: #204485;
	cursor: pointer;
	}

/* FILTER TOOL TABLES */
/* Order of color of stripes on table - overskrevet boostrap til filtertool*/
.table-striped.filter-table> tbody > tr:nth-of-type(even) {
	background-color: var(--grey-200);
	--bs-table-accent-bg: var(--bs-table-striped-bg); 
  }
  
.table-striped.filter-table> tbody > tr:nth-of-type(odd) {
	background-color: var(--grey-50) !important; /* Brugt !important for at undgå at omskrive i bootstrap.css */
	--bs-table-accent-bg: var(--grey-50); 
}

/* Separerer alle rækker i choose-filter tabellen */
.table.choose-filter{
	border-collapse: separate;
	border-spacing: 0 5px; 
} 

/* Separerer thead og tbody i summary tabellen */
 table.summary-table tbody:before {
    line-height:5px;
    content:".";
    color: transparent; 
    display:block;
	border: none;
}

/* Separerer tbody og thead i summary tabellen */
table.summary-table tfoot:before {
	line-height: 5px;
    content:".";
    color: transparent; 
    display:block;
	border: none;
}

/* Fjerner alle tidligere borders på th og td (bootstrap) for at undgå dobbelte borders */
.table.filter-table th,
.table.filter-table td {
	border-style: solid;
	border-color: var(--grey-500);
	border-width: 0;
}

/* Afrundede hjørner og borders på hver række/hver sektion i choose-filter og summary tabellerne */
.table.choose-filter tr td:first-child,
.table.choose-filter tr th:first-child {
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
	border-left: 1px solid var(--grey-500);
}

.table.choose-filter tr td:last-child,
.table.choose-filter tr th:last-child {
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
	border-right: 1px solid var(--grey-500);
}

.table.summary-table tr {
	border-right: 1px solid var(--grey-500);
	border-left: 1px solid var(--grey-500);
}
  
.table.filter-table td,
.table.filter-table th {
	border-top: 1px solid var(--grey-500) !important;
	border-bottom: 1px solid var(--grey-500) !important;
}

td .row { 
	margin-right: 0 !important; }


/* SOLUTION */
.solution-banner {
	width: 100%;
	height: 750px;
	background: url('../images/solution/solutionhero.png');
	background-size: cover; 
	background-position: center;
}


.timeline {
	position: relative;
  }
  .indicators {
    left: 2rem;
	top: 0;
	margin: 25vh 0;
    height: 100vh; 
    width: 2vw; 
    position: absolute;
    display: flex;
    flex-direction: column;
	will-change: transform;
}

.indicator-image {
    width: 100%;
    position: absolute; 
    top: 0;
    left: 0;
    opacity: 0; 
    z-index: 1;
	will-change: transform; 
}

.indicator-image.active {
    opacity: 1; 
    z-index: 2; 
}

  .timeline .point {
	height: 100vh;
	width: 100%;
	display: flex;
	align-items: center;
	padding: 5rem;
	will-change: transform;
  }
  
  .timeline .wrapper {
	height: 100vh;
	width: 100%;
  }
  
  .point article {
	flex-basis: 60%;
	margin-left: 25px;
	will-change: transform;
  }
  
  .point img {
	padding-top: 5rem;
	flex-basis: 25%;
	height: 70vh;
	max-width: auto;
	will-change: transform;
  }

.solution-footer {
	width: 100%;
	height: 750px;
	background: url('../images/solution/solution-footer.png');
	background-size: cover; 
	background-position: center;
}

#solution-title {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    line-height: 7.2rem;
}

.char {
    transform: translateY(250px);
    transition: transform .5s;
}

.custom-shape-divider-bottom-1714944096 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
	margin: -2px;
}

.custom-shape-divider-bottom-1714944096 svg {
    position: relative;
    display: block;
    width: 100%;
    height: 106px;
    transform: rotateY(180deg);
}

.custom-shape-divider-bottom-1714944096 .shape-fill {
    fill: #FFFFFF;
}

.solution-spacer {
	width:100%;
	height:15vh;
	background:#FFFFFF;
	overflow: hidden;
}

.custom-shape-divider-top-1724329131 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.custom-shape-divider-top-1724329131 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 126px;
}

.custom-shape-divider-top-1724329131 .shape-fill {
    fill: #FFFFFF;
}

.custom-shape-divider-top-1715203477 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.custom-shape-divider-top-1715203477 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 100px;
}

.custom-shape-divider-top-1715203477 .shape-fill {
    fill: transparent;
}

.blue-gradient-bg {
    background: linear-gradient(90deg, #4D699D 6%, #304977 29%, #132950 100%);
}

.light-gradient-bg {
    background: linear-gradient(90deg, #D9CCBF 43%, #EBE5DE 86%, #F7F5F2 100%);
}

.custom-shape-divider-bottom-1715205574 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.custom-shape-divider-bottom-1715205574 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 380px;
    transform: rotateY(180deg);
}

.custom-shape-divider-bottom-1715205574 .shape-fill {
    fill: #F7F8FB;
}

.custom-shape-divider-top-1721339137 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.custom-shape-divider-top-1721339137 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 54px;
    transform: rotateY(180deg);
}

.custom-shape-divider-top-1721339137 .shape-fill {
    fill: #FFFFFF;
}

/* CASE STORIES BACKGROUNDS */
.custom-shape-divider-bottom-1723714328 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.custom-shape-divider-bottom-1723714328 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 72px;
}

.custom-shape-divider-bottom-1723714328 .shape-fill {
    fill: #F7F8FB;
}

.custom-shape-divider-bottom-1723715186 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
    overflow: hidden;
    line-height: 0;
	transform: rotate(180deg);
}

.custom-shape-divider-bottom-1723715186 svg {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
}

.custom-shape-divider-top-1723802788 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.custom-shape-divider-top-1723802788 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 65px;
}

.custom-shape-divider-top-1723802788 .shape-fill {
    fill: #FFFFFF;
}
/* ^ CASE STORIES BACKGROUNDS ^ */



/* CONTACT PAGE */

#contact .nav-link.active, .nav-pills .show>.nav-link {
    background-color: #FFFFFF !important;
    color: var(--primary-600-main);
    text-decoration: underline;
    text-decoration-color: var(--primary-600-main);
    text-decoration-thickness: 5px;
    text-underline-offset: 8px;
	padding-left: 0rem;
	padding-right: 0rem;
}

#contact .nav-link {
	color: var(--dark-400);
	padding-left: 0rem;
	padding-right: 0rem;
}

#contact .nav-link h5 {
    font-family: 'Titillium Web', sans-serif;
    font-weight: 400; 
    font-size: 1.7275rem;
}

#contact .nav-link.active h5 {
    font-family: 'Titillium Web', sans-serif;
    font-weight: 600; 
    font-size: 1.7275rem;
}

.map-container {
    width: 100%;
    padding: 0;
    margin: 0;
}

.text-gradient-5 {
    background: linear-gradient(to right, #132950 0%, #204485 25%, #739AA3 50%, #A4CDD6 75%, #AEA399 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    background-size: 100%; 
}

.gradient-background-light {
	width: 100%;
	margin-top: 0;
	background-image: linear-gradient(
		to bottom,
		#E4E8F0 5%,
		#EFF1F6 77%,
		#FFFFFF 100%
	);
}

.filter-background-img {
	background-image: url("/static/images/contact/filter-background.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;

}

.contact-line-height {
    line-height: 1.2; 
}

.bg-gray-100-angled {
	background-image: url("/static/images/contact/bg-gray-100-angled.png");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center 300px;
}

.bg-angled-img {
    background-image: url("/static/images/contact/bg-angled-img.jpg");
    background-repeat: no-repeat;
    background-position: bottom 0px center;  
    background-size: cover;  
	width: 100%;
	margin-bottom: -10px;
}

@media (max-width: 991.98px) {
    .bg-angled-img {
		background-image: none;
    }
}

.btn-inactive {
	color: #fff;
	background-color: var(--primary-400);
	border-color: var(--primary-700);
	pointer-events: none;
    opacity: 0.7;
}

.bg-triangles {
	background-image: url("/static/images/contact/bg-triangles.png");
	background-size: cover;
	background-repeat: no-repeat;
}

.newsletter-img {
    object-fit: cover; 
    max-width: 100vw; 
    width: 100%;   
    max-height: 100vh; 
    height: auto;       
    margin: 0;
    padding: 0;
}

@media (max-width: 991.98px) {
    .bg-newsletter-img {
        background-image: url("/static/images/contact/bg-waves-mobile.png"); 
        background-size: cover; 
        background-repeat: no-repeat;
        background-position: center center;
        height: 60vh; 
        width: 100%; 
        background-color: #f0f0f0;
    }
}

.newsletter-img-green {
    object-fit: cover; 
    max-width: 100vw; 
    width: 100%;   
    max-height: 100vh; 
    height: auto;       
    margin: 0;
    padding: 0;
}

@media (max-width: 991.98px) {
    .bg-newsletter-img-green {
        background-image: url("/static/images/contact/bg-waves-green-mobile.png"); 
        background-size: cover; 
        background-repeat: no-repeat;
        background-position: center center;
        height: 60vh; 
        width: 100%; 
        background-color: #f0f0f0;
    }
}

.overlay {
	background:transparent; 
	position:relative; 
	width:100%;
	height:1000px;
	top:1000px;
	margin-top:-1000px;
 }

.custom-file-input {
    opacity: 0; 
    position: absolute;
    z-index: -1; 
    width: 0;
    height: 0;
}

.custom-file-input + label {
    display: inline-block;
    background-color:  var(--secondary-2-700);
    color: white;
    padding: 5px 20px;
    text-align: center;
    cursor: pointer;
    border-radius: 5px;
	border-color: var(--secondary-2-800);
    margin-top: 10px;
}

.custom-file-input + label:hover {
    background-color: var(--secondary-2-800);
}

input[type="file"]:not(:-webkit-file-upload-button) {
    font-family: "Arial", sans-serif;
    font-size: 14px;
    color: transparent;
    text-align: center;
}

.contact-form {
	background-color: #FFFFFF;
	border: 2px solid var(--grey-300);
    border-radius: 10px;
}

.hidemapbar {
	clip-path: polygon(0% 12%, 100% 12%, 100% 100%, 0% 100%);
	top: -30em;
	border: inherit;
	line-height: 0 !important;
  }


/* Products */ 

.card-filters-and-separators {
	background: url("/static/images/products/card-filters-and-separators.png"); 
}

.card-fan-systems {
	background: url("/static/images/products/card-fan-systems.png");
}

.card-duct-systems {
	background: url("/static/images/products/card-duct-systems.png");
}

.card-filters-and-separators,
.card-fan-systems, 
.card-duct-systems {
    background-size: cover; 
    background-position: center;
    background-repeat: no-repeat;
    height: 100%;
}

.card-products {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 750px;
}

.btn-white-outline {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    border: 2px solid white; 
    border-radius: 0.375rem; 
    background-color: transparent; 
    color: white; 
    transition: all 0.3s ease; 
}

.btn-white-outline:hover, .btn-white-outline:focus {
    background-color: white; 
    color: #000000; 
    border-color: white; 
}

.btn-white-outline:active {
    background-color: #f8f9fa; 
    border-color: #e2e6ea;
    color: #000000; 
}

.btn-white-outline:focus {
    box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.5);
}

.general-page-content {
    word-wrap: break-word; 
    overflow-wrap: break-word; 
    white-space: normal;
}

.general-page-content span {
    display: inline; 
    margin: 0; 
    padding: 0;
}

.bg-mountain-banner {
    width: 100%;
    background-image: url("/static/images/Illustrations/mountain-banner.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
}

@media (max-width: 768px) {
    .bg-mountain-banner {
        background-position: top 50% right 40%; 
    }
}


#downloads-tabs .nav-tabs .nav-link {
    background-color: transparent; 
    color: var(--primary-600-main); 
    transition: all 0.3s ease; 
    }
    
    #downloads-tabs .nav-tabs .nav-link:hover {
    color: var(--primary-600-main); 
    }
    
    #downloads-tabs .nav-tabs .nav-link.active {
    background-color: white !important; 
    color: black;
    }
      
    .btn-general-catalogue {
        background-color: var(--secondary-2-100);
        color: var(--primary-800); 
        border: 0; 
        padding: 10px 20px; 
        transition: background-color 0.3s ease, color 0.3s ease; 
      }
      
    a.btn.btn-general-catalogue:hover {
        background-color: var(--secondary-2-100) !important; 
        color: var(--primary-800); 
      }
    
      a.btn.btn-general-catalogue:focus,
      a.btn.btn-general-catalogue:active {
        background-color: var(--secondary-1-300) !important;
        color: var(--primary-800) !important;
      }
    
    #downloads-tabs .accordion-button {
        background-color: var(--grey-200) !important;
        color: var(--primary-800) !important;
        border: none !important;
    }
    
    #downloads-tabs .accordion-button.collapsed {
        background-color: var(--grey-200) !important;
        color: var(--primary-800) !important;
    }
    
    #downloads-tabs .accordion-button:not(.collapsed) {
        color: inherit;
    }
    
    #downloads-tabs button.accordion-button:focus {
        box-shadow: inherit;
    }
    
    #downloads-tabs .accordion-button::after {
        content: '';
        display: inline-block;
        width: 22px;
        height: 22px;
        background-image: url("/static/images/icons/plus-square.svg");
        background-size: contain;
        background-position: center;
        transition: transform 0.3s ease-in-out;
    }
    
    #downloads-tabs .accordion-button.collapsed::after {
        background-image: url("/static/images/icons/plus-square.svg");
        transform: rotate(0deg);
    }
    
    #downloads-tabs .accordion-button:not(.collapsed)::after {
        background-image: url("/static/images/icons/dash-square.svg");
        transform: rotate(0deg);
    }
    
    
    /* Tabs turned into accordions on mobile view with different styling than above accordions */
    #mobileAccordion .mobile-accordion {
        background-color: var(--mobile-grey-200) !important;
        color: var(--mobile-primary-800) !important;
        border: none !important;
    }
    
    #mobileAccordion .mobile-accordion.collapsed {
        background-color: var(--mobile-grey-200) !important;
        color: var(--mobile-primary-800) !important;
    }
    
    #mobileAccordion .mobile-accordion:not(.collapsed) {
        color: inherit;
    }
    
    #mobileAccordion .mobile-accordion button.accordion-button:focus {
        box-shadow: inherit;
    }
    
    @media (max-width: 767px) {
        #mobileAccordion .accordion-button::after {
            content: '';
            display: inline-block;
            width: 22px;
            height: 22px;
            background-image: url("/static/images/icons/down_arrow_icon.svg") !important;
            background-size: contain;
            background-position: center;
            transition: transform 0.3s ease-in-out;
        }
    
        #mobileAccordion .accordion-button.collapsed::after {
            background-image: url("/static/images/icons/down_arrow_icon.svg") !important;
            transform: rotate(0deg);
        }
    
        #mobileAccordion .accordion-button:not(.collapsed)::after {
            background-image: url("/static/images/icons/up_icon.svg") !important;
            transform: rotate(0deg);
        }
    
        #downloads-tabs .accordion-button::after {
            content: '';
            display: inline-block;
            width: 22px;
            height: 22px;
            background-image: url("/static/images/icons/plus-square.svg") !important;
            background-size: contain;
            background-position: center;
            transition: transform 0.3s ease-in-out;
        }
    
        #downloads-tabs .accordion-button.collapsed::after {
            background-image: url("/static/images/icons/plus-square.svg") !important;
            transform: rotate(0deg);
        }
    
        #downloads-tabs .accordion-button:not(.collapsed)::after {
            background-image: url("/static/images/icons/dash-square.svg") !important;
            transform: rotate(0deg);
        }
    }
    
    
    .text-gradient-5-full-width {
        background: linear-gradient(to right, #132950 0%, #204485 25%, #739AA3 50%, #A4CDD6 75%, #AEA399 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    
	.bg-products-banner {
		width: 100%;
		background-image: url("/static/images/products/products-banner.png");
		background-size: cover;
		background-repeat: no-repeat;
		background-position: top center;
		min-height: 350px; 
	  }
	  
	  .product-banner-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		z-index: 1;
	  }

.rotating-text-wrapper {
	display: inline-flex; 
	align-items: center; 
	justify-content: flex-start;
	flex-wrap: wrap;

}

.rotating-text-wrapper h1 {
	line-height: 1.2;
	margin: 0; 
	min-height: 250px; 

}

.rotating-text {
	margin-left: 0;
	display: block; 
	position: relative;
  }
  
  .rotating-word {
	display: block; 
	white-space: nowrap;
	visibility: hidden;
	transition: opacity 0.5s ease-in-out, visibility 0s 0.5s; 
  } 


@media (max-width: 768px) {

	.bg-products-banner {
	  min-height: 350px;
	}

	.rotating-text-wrapper h1 {
	  font-weight: 600 !important;
	  font-size: 48px !important;
	  line-height: 62px !important; 
	}

	.rotating-text {
	  margin-left: 0;
	  display: block; 
	  position: relative; 
	  text-align: left; 
	}
  
	.rotating-word {
	  position: absolute;
	  visibility: hidden;
	  padding-bottom: 100px;
	  font-weight: 600 !important;
	  font-size: 48px !important;
	  line-height: 62px !important; 
	}

  }

.hover-area {
	pointer-events: auto;
	cursor: pointer;
    transition: transform 0.3s ease;
  }
  
  .indicator {
	pointer-events: none; 
  }
  
  .indicator-group-1,
  .indicator-group-2,
  .indicator-group-3 {
	display: none;
  }
  
  .indicator-container:nth-of-type(1):hover .indicator-group-1,
  .indicator-group-1:hover {
	display: block;
	transform: translate(23px, -12px); 
  }
  
  .indicator-container:nth-of-type(2):hover .indicator-group-2,
  .indicator-group-2:hover {
	display: block;
	transform: translate(-27px, 43px);
  }
  
  .indicator-container:nth-of-type(3):hover .indicator-group-3,
  .indicator-group-3:hover {
	display: block;
	transform: translate(-32px, -25px);
  }
  
  .svg-container {
	width: 100%; 
	position: relative;
	height: auto; 
	display: flex; 
	justify-content: center; 
	align-items: center;
  }
  
  .svg-container svg {
	width: 100%; 
	height: auto; 
  }

.tooltip-mobile {
    background: white; 
    opacity: 0.80;
    color: var(--bs-primary-700);
    border: 1px solid var(--bs-primary-700); 
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    z-index: 10;
    font-size: 0.8rem;
    position: absolute;
}

.slide-2-tooltip::after {
    content: '';
    position: absolute;
    left: -15px; 
    top: 50%;
    border-width: 8px;
    border-style: solid;
    border-color: transparent white transparent transparent; 
    transform: rotate(90deg) translateY(-50%); 
}

.slide-3-tooltip::after {
    content: '';
    position: absolute;
    left: -15px; 
    top: 50%; 
    border-width: 8px;
    border-style: solid;
    border-color: transparent white transparent transparent; 
    transform: rotate(90deg) translateY(-50%); 
}

.slide-4-tooltip::after {
    content: '';
    position: absolute;
    right: -15px; 
    top: 50%; 
    border-width: 8px;
    border-style: solid;
    border-color: transparent transparent transparent white; 
    transform: rotate(-90deg) translateY(-50%);
}

.languageDropdown .dropdown-toggle::after {
    -ms-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
	float:right;
}

.product-description .container * {
    color: white !important;
}


.neumorphic-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    background: #ffffff;
    border-radius: 0.40rem;
    box-shadow: 
        -0.5rem -0.5rem 1rem hsl(0 0% 100% / 0.75), 
        0.5rem 0.5rem 1rem hsl(0 0% 50% / 0.5);
    transition: all 0.2s ease-in-out;
    overflow: hidden;
	height: 375px;
}

.neumorphic-card .hover-line {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 5px;
    background: var(--primary-600-main);
    border-radius: 0 0 0.4rem 0.4rem; 
    transition: width 0.3s ease-out, left 0.3s ease-out;
}

.neumorphic-card:hover .hover-line {
    left: 0;
    width: 100%;
}

.neumorphic-card .card-body {
    position: relative;
}

/* Password visibility toggle button */
.password-toggle {
    background: none;
    border: none;
    color: var(--dark-400);
    cursor: pointer;
    padding: 0.375rem 0.75rem;
    transition: color 0.15s ease-in-out;
}

.password-toggle:hover {
    color: var(--dark-800);
}

.password-toggle:focus {
    outline: none;
    box-shadow: none;
}

.password-toggle i {
    font-size: 1.25rem;
    line-height: 1.5;
}

.form-control,
.form-select {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--black);
    background-color: var(--white);
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.form-control:focus,
.form-select:focus {
    color: var(--black);
    background-color: #fff;
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.15rem rgba(13,110,253,.25);
}

.form-control::placeholder {
    color: var(--grey-600);
    opacity: 1;
}

.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.form-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    padding-right: 2.25rem;
}

.was-validated .form-control:valid, .form-control.is-valid {
    border-color: #198754;
    padding-right: calc(1.5em + .75rem);
    background-color: #fff;
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(13,110,253,.25)
}

.form-control-sm {
    min-height: calc(1.5em + .5rem + 2px);
}

#progressBar {
    height: 4px;
    width: 100%;
    background-color: var(--grey-200);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 0.5rem;
}

#progress-bar {
    width: 0%;
    height: 100%;
    transition: width 300ms ease-in-out;
    border-radius: 2px;
}

.progress-bar-danger {
    background-color: var(--danger-600);
}

.progress-bar-warning {
    background-color: var(--primary-600);
}

.progress-bar-success {
    background-color: var(--success-600);
}

.alert {
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.alert-danger {
    background-color: var(--danger-50);
    border-color: var(--danger-100);
    color: var(--danger-700);
}

.alert-success {
    background-color: var(--success-50);
    border-color: var(--success-100);
    color: var(--success-700);
}

#chat-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
}

#chat-bubble {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    animation: pulse 2s infinite;
}

#chat-bubble:hover {
    transform: scale(1.1);
}

#chat-bubble i {
    font-size: 1.5rem;
    color: var(--white);
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(32, 68, 133, 0.7);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(32, 68, 133, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(32, 68, 133, 0);
    }
}

#chat-window {
    position: absolute;
    bottom: 80px;
    right: 0;
    width: 400px;
    height: 600px;
    background-color: var(--white);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    transition: var(--transition);
}

#chat-window.hidden {
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
}

.chat-header {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: var(--white);
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
}

#chat-close {
    background: none;
    border: none;
    color: var(--white);
    font-size: 1.2rem;
    cursor: pointer;
    transition: var(--transition);
}

#chat-close:hover {
    transform: rotate(90deg);
}

.chat-body {
    height: calc(100% - 55px);
    position: relative;
    overflow: hidden;
}

#webchat-container {
    height: 100%;
    width: 100%;
}

#webchat-container > * {
    height: 100%;
}

/* Fix ordered/unordered lists in chat messages */
#webchat-container ol,
#webchat-container ul {
    padding-left: 1.5em;
    margin: 0.5em 0;
}

#webchat-container ol {
    list-style-type: decimal;
}

#webchat-container ul {
    list-style-type: disc;
}

#webchat-container li {
    margin-bottom: 0.25em;
}

/* Force white text on user bubbles */
#webchat-container [class*="from-user"] p,
#webchat-container [class*="from-user"] span,
#webchat-container [class*="fromUser"] p,
#webchat-container [class*="fromUser"] span {
    color: #ffffff !important;
}

/* Loading state */
.chat-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.chat-loading .spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #f0f0f0;
    border-top-color: #204485;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 15px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.chat-loading p {
    color: #666;
    font-size: 0.9rem;
}

/* Error state */
.chat-error {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    padding: 20px;
}

.chat-error i {
    font-size: 2.5rem;
    color: #dc3545;
    margin-bottom: 10px;
}

.chat-error p {
    color: #666;
    margin-bottom: 15px;
}

.chat-error button {
    background: #204485;
    color: white;
    border: none;
    padding: 10px 25px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.3s ease;
}

.chat-error button:hover {
    background: #276091;
}