@font-face {
    font-family: 'Kollektif Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Kollektif Regular'), url('Kollektif.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Kollektif Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Kollektif Italic'), url('Kollektif-Italic.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Kollektif Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Kollektif Bold'), url('Kollektif-Bold.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Kollektif Bold Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Kollektif Bold Italic'), url('Kollektif-BoldItalic.woff') format('woff');
    }

:root {
	--color-purple: #3A1E84;
	--color-blackish: #222426;
	--color-grey: #C5C5C5;
}

html, body, #page {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
    font-family: 'Kollektif Regular';
    color: #3B1E84;
}

#topContent{
	width: 100%;
	padding-bottom: 120px;
}


.clearfix {
  overflow: auto;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

#logo{
	width: 180px;
}

header, section{
  clear: both;

}

#topPage .left{
	margin-top: 120px;
}
#topPage .left p {
	padding-bottom: 35px;
}
#mainHeader, #wContainer h2{
	font-size: 50px;
	font-family: 'Kollektif Bold';
}

#topContent, #bottomContent{
 	width: 1200px;
  	margin: auto;
}

#topPage .right img{
	display: inline-block;
	width: 100%;
	margin-top: 70px;
}

#logoContainer,#languageContainer{
	float: left;
	width: 50%;
}


#languageContainer .languages{
	float: right;
	font-family: 'Kollektif Regular';
	font-style: normal;
	font-weight: 700;
	font-size: 12px;
	color: #D1D1D1;
	text-decoration:none;
	margin: 0px 7px 0 7px;
	cursor: pointer;
}
#languageContainer .languages.active {
	color: #3A1E84;
	cursor: default;
}


#languageContainer .languages.separator{
	border-left: 1px solid #D1D1D1;
  	margin: 0px 7px 0 0px;
  	padding-left:7px;
}
#frontPageKpi{
	width: 900px;
	margin: auto;
	padding-top: 120px;
}

#content{
	width: 100%;
	background: #FBF9F6;
	padding-top: 110px;
}

#s1{
	width: 100%;
}

#s1 .left{
	width: 40%;
	float: left;
}

#s1 .right{
	width: 60%;
	float: left;
}

#complioShield img{
	float: left;
	width: 540px;
}


/* custom checkbox start */

.checkbox-container {
	display: flex;
	justify-content: start;
	align-items: center;
	/*display: block;*/
	position: relative;
	padding-left: 35px;
	/*margin-bottom: 10px;*/
	cursor: pointer;
	/* font-size: 22px;*/
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	/*background-color: red;*/
	/*height: 22px;*/
}

	/* Hide the browser's default checkbox */
	.checkbox-container input {
		position: absolute;
		opacity: 0;
		cursor: pointer;
		height: 0;
		width: 0;
	}

/* Create a custom checkbox */
.checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 20px;
	width: 20px;
	/*background-color: #eee;*/
	border: 1px solid #222426;
	border-radius: 4px;
}

/* On mouse-over, add a grey background color */
.checkbox-container:hover input ~ .checkmark {
	background-color: #B5B5B5;
}

/* When the checkbox is checked, add a blue background */
.checkbox-container input:checked ~ .checkmark {
	background-color: var(--color-purple);
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
	content: "";
	position: absolute;
	display: none;
}

/* Show the checkmark when checked */
.checkbox-container input:checked ~ .checkmark:after {
	display: block;
}

/* Style the checkmark/indicator */
.checkbox-container .checkmark:after {
	left: 6px;
	top: 2px;
	width: 5px;
	height: 10px;
	border: solid white;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

/* custom checkbox end */

.button {
	height: 45px;
	padding-right: 30px;
	padding-left: 30px;
	background: var(--color-purple);
	border-radius: 4px;
	display: inline-block;
	text-align: center;
	color: #F08B7E;
	text-decoration: none;
	border: none;
	cursor: pointer;
	font-family: "Kollektif Bold";
}

.button-secondary {
	border: 1px solid var(--color-purple);
	background-color: white;
	color: var(--color-purple);
}

.button-container {
	margin-top: 2rem;
}

.button#login {
	height: 30px;
	float: right;
	padding-right: 20px;
	padding-left: 20px;
	margin-top: -8px;
	margin-left: 40px;
}
#bulletList{
	float: left;
	width: 360px;
	margin-left: -50px;
	margin-top: 45px;
	font-family: 'Kollektif Bold';
}
.listElement{
	margin-top: 15px;
}

.listElement img{
	min-width: 60px;
	height: 60px;
}

.listElement .text{
	margin-top: 18px;
    font-size: 20px;
    margin-left: 10px;
}

#bulletList .listElement div{
	float: left;
}

#bulletList .listElement .checkIcon{
	width: 30px;
	margin-right: 40px;
}


#topPage{
	margin-bottom: 80px;
}

#page2{
	margin-top: 100px;
  	margin-bottom:100px;
}
#page2 .left{
	float: left;
	width: 40%;
}
#page2 .right{
	float: left;
	width: 60%;
	text-align: right;
}
#page2 .left img{
	width: 100%;
}

#wContainer{
	padding-left: 20%;
	padding-top: 40px;

}

#wContainer p{
	padding-bottom: 35px;
	padding-top: 5px;
}

#page3{
	margin-top: 100px;
	padding-bottom: 100px;
}

#page3 h2{
	color: #EF8375;
	font-size: 50px;
	width: 80%;
	margin-left: 10%;
	margin-bottom: 80px;
	text-align: center;

}
#companies{
	width: 80%;
	margin-left: 10%;
}
#companies .company.first{
	margin-left: 2%;
}

#companies .company{
	width: 20%;
	height: 80px;
	float: left;
	margin-left: 5%;
}
#page4{
	width: 100%;
}

#page4Background{
	width: 35%;
	margin: auto;
	background: #ECE0D3;
	border-radius: 17px;
	padding: 70px ;
	margin-bottom: 100px;
	text-align: center;
	padding-bottom: 600px;
}
#page4 img{
	width: 64%;
	padding-left: 18%;
	margin-top: -1200px;
	margin-bottom: 100px;

}
#page4Background{


}
hr{
	 border-top: 1px solid #D4D4D4;
}

#signup{
	padding-top: 100px;
}
#signup .left,#signup .right {
	width: 40%;
	float: left
}
#signup .left h3{
	font-size: 50px;
	font-family: 'Kollektif Bold';
	margin-top: 0;
}

#signup .right h3 , #page4Background h2{
	font-size: 40px;

	margin-top: 0;
}
#signup p{
	line-height: 1.5em;
}
#signup input{
	background: #FFFFFF;
	border: 1px solid #C5C5C5;
	border-radius: 4px;
	/*width: 100%;*/
	height: 45px;
	color: #545454;
	padding-left: 20px;
}
#signup button, #signup input{
	/*margin-top: 25px;*/
	font-family: 'Kollektif Bold';
}

input::placeholder {
    color: #B5B5B5;
}
#signup input[type=checkbox]{
	border: 1px solid #C5C5C5;
	border-radius: 2px;
	height: 12px;
	width: 12px;
	margin-top: 60px;
}

#signup .right {
	margin-left: 18%;
}

#campaignBox{
	margin-top: 40px;
	color:#F08B7E;
	border: 1px solid #F08B7E;
	border-radius: 4px;
	padding: 15px;
	line-height: 1.5em;
}

.campaignHeadText{
	font-weight: 600; 
}

#signUpIllustration{
	width: 100%;
	margin-top: 50px;
	padding-bottom: 50px;
}
#signUpIllustration img{
	width: 40%;
	display: inline-block;;
	margin-left: 30%;
}

body footer .left a{
	text-decoration: none;
	color: #545454;
}
body footer {
	padding-top: 60px;
  	padding-bottom: 100px;
}
body footer .left-col1,body footer .right-col3{
	color: #545454;
    line-height: 1.5em;
}

body footer a{
	color: #545454;
}

body footer .right{
	text-align: right;

}
body footer .right img{
	float: right;
	display: inline-block;
	
}
.left-col1, .center-col2, .right-col3{
	width:33%;
  	float: left;
}
.center-col2{
	text-align:center;
  
}
.right-col3{
	text-align:right;
}

.signup-container {
	display: flex;
	flex-direction: column;	
	gap: 25px;
}

	.signup-container .checkbox-container {
		margin-top: 1rem;
	}

.signup-validation-error {
	color: red;
	border: 1px solid red;
	border-radius: 5px;
	padding: 1rem;
}

/* modal */
.modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: #0D0D0D80;
	z-index: 1000;
}

/*.modal input {
    height: 43px;
}*/

.modal-active {
	display: flex;
	justify-content: center;
	align-items: center;
}

.modal-container {
	display: flex;
	flex-direction: column;
	padding: 5%;
	background-color: white;
	width: 50%;
	height: 50%;
	min-height: 600px;
	min-width: 500px;
	/*row-gap: 14px;*/
	border-radius: 4px;	
}

.modal-header {
	font-size: calc(35em / 16);
	font-weight: 700;
	line-height: 42px;
	color: var(--color-purple);
	margin-bottom: 2rem;
}

.modal-subheader {
	color: var(--color-blackish);
	font-size: calc(30em / 16);
	font-weight: 700;
	margin-bottom: 0.4rem;
}

.modal-subsubheader {
	color: var(--color-purple);
	/*font-size: calc(35em / 16);*/
	font-weight: 400;
	margin-bottom: 2rem;
}


.modal-content-container {
	border: 1px solid #C5C5C5;
	border-radius: 8px;
	padding: 1.5rem 0.5rem 1.5rem 1.5rem;
	height: 50%;
}

.modal-content {
	background: #FFFFFF;
	color: var(--color-blackish);
	overflow-y: auto;
	height: 100%;
	padding-right: 1rem;
	line-height: 22px;	

	letter-spacing: 0.015429px;
}

	.modal-content h1 {
		font-size: calc(26em / 16);
		font-weight: 700;
	}

.modal-button-container {
	display: flex;
	column-gap: 12px;
	justify-content: center;
	margin-top: auto;
	/*background-color: cyan;*/
	padding-top: 2rem;
}

/* modal end*/

/* custom scrollbar - start */

/* width */
::-webkit-scrollbar {
	width: 4px;
	height: 4px;
}

/* Track */
::-webkit-scrollbar-track {
	background: white;
}

/* Handle */
::-webkit-scrollbar-thumb {
	background: var(--color-grey);	
	height: 78px;
	border-radius: 2px;
}

	/* Handle on hover */
	::-webkit-scrollbar-thumb:hover {
		background: var(--color-purple);
	}

/* custom scrollbar - end */

a {
	/*text-decoration: none;*/
	color: var(--color-purple);
}


@media only screen and (max-width: 1240px) and (min-width: 971px) {
#logo{
width: 160px;
	}
  #topContent, #bottomContent{
 	width: 960px;
	}
  #signup .right {
    margin-left: 16%;
	}

	#mainHeader, #wContainer h2, #signup .right h3, #signup .left h3 {
  	    font-size: 40px;
  	}

 	#complioShield img {
    width: 400px;
	}

	#frontPageKpi{
  	width: 760px;
  }

	#bulletList {
    	float: left;
	    width: 360px;
	    margin-left: -0px;
	    margin-top: 32px;
	}
	#page4Background{
	padding-bottom: 470px;
	}
	#page4 img{
		margin-top: -1030px;

	}
    .listElement img{
        min-width: 40px;
        height: 40px;
    }

    .listElement .text{
        margin-top: 9px;
    	font-size: 18px;
    	margin-left: -10px;
    }

}

@media only screen and (min-width: 651px) and (max-width: 970px) {
  #logo{
		width: 150px;
	}
  #topContent, #bottomContent{
 	width: 600px;
	}
  #mainHeader, #wContainer h2, #signup .right h3, #signup .left h3, #page4Background h2 {
  	    font-size: 30px;
  }
  #frontPageKpi{
  	width: 600px;
  }
  #signup .right {
    margin-left: 15%;
	}
  #complioShield img {
    width: 300px;
	}
	#bulletList {
    	float: left;
	    width: 300px;
	    margin-left: -0px;
	    margin-top: 10px;
	}
	#topPage .right img{
		margin-top: 70px;
	}
	#topPage .left {
   	 	margin-top: 50px;
	}
	#page4Background{
	padding-bottom: 410px;
	}
	#page4 img{
		margin-top: -680px;

	}
    .listElement img{
        min-width: 30px;
        height: 30px;
     }

     .listElement .text{
        margin-top: 6px;
        font-size: 16px;
        margin-left: -20px;
     }
  #page4 img {
    width: 90%;
    padding-left: 5%;
    
	}
}

@media only screen and (max-width: 650px) {
  
  #logo{
		width: 140px;
	}

  #s1 .left, #s1 .right{
  	width: 100%;
    float: none;
    padding-left: 0;
    padding-right: 0;
  }
  #page2 .left img {
    width: 70%;
    margin-left:15%;
	}
  
 	#content {
    	padding-top: 60px;
	}
  #page4Background {
    width: 65%;
    padding: 40px;
}

  #languageContainer{
  	display: none;
  }

  #companies .company {
  	float: none;
  	width: 80%;
  	text-align: center;
  }
  #signup input {
  	width: 90%;
  	display: inline-block;;
  }
  #signup .right {
  	margin-left: 0;
    margin-top: 60px;
  }

  #topContent, #bottomContent{
 	width: 80%;
    padding-left:10%
    padding-right:10%;
	}
  #mainHeader, #wContainer h2, #signup .right h3, #signup .left h3, #page4Background h2 {
  	    font-size: 28px;
  }
  #page3 h2 {
    font-size: 30px;
}
  #frontPageKpi{
  	width: 100%;
    padding-top: 0px;
  }
  #wContainer {
    padding-left: 0;
    text-align:center;
}
  #complioShield img {
    width: 300px;
	}
	#bulletList {
    	float: left;
	    width: 300px;
	    margin-left: -0px;
	    margin-top: 10px;
	}
	#topPage .right img{
		margin-top: 70px;
	}
	#topPage .left {
   	 	margin-top: 50px;
	}
	#page4Background{
	padding-bottom: 40px;
	}
	#page4 img{
		margin-top: -55px;

	}
  	#signup input {
      padding-left: 4%;
	}
  	#complioShield{
      display:none;
  	}
  	#page4 img {
      width: 120%;
      padding-left: 0;
      margin-left:-10%;
	}
  #page4Background {
  	margin-bottom:0;
  }
  footer .center-col2{
  	display:none;
  }
  footer .left-col1, footer .right-col3{
  	display:inline-block;
    width: 100%;
    text-align:left;
  }

	.modal-container {
		min-height: 600px;
		min-width: 85vw;
	}
}





/* Thank you page */

body#thankyou{
	background: #FBF9F6;
	text-align: center;
}
body:has(#thankyou) {
	background: #FBF9F6;
	text-align: center;
}

#thankyouContainer{
	width: 50%;
	padding-top: 200px;
	margin: auto;

}

#thankyou #logo{
	margin: auto;
	margin-top: 30px;
	display: inline-block;
}
#man, #textContainer h1{
	font-family: 'Kollektif Bold';
}
#textContainer{
	padding-top:30px;
}
#man, #textContainer{
	width: 50%;
	display: inline-block;
	float: left;
	text-align: left;
}

/* Policy page */
	#policy{
	width:60%;
  	margin:auto;
  	padding-top: 80px;
}

#policy .backbutton{
	margin-bottom: 100px;
  	margin-top:20px;
}

#policy hr{
    margin-top: 40px;
    margin-bottom: 40px;
}

#blazor-error-ui {
	background: lightyellow;
	bottom: 0;
	box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
	display: none;
	left: 0;
	padding: 0.6rem 1.25rem 0.7rem 1.25rem;
	position: fixed;
	width: 100%;
	z-index: 1000;
}

	#blazor-error-ui .dismiss {
		cursor: pointer;
		position: absolute;
		right: 0.75rem;
		top: 0.5rem;
	}

.blazor-error-boundary {
	background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
	padding: 1rem 1rem 1rem 3.7rem;
	color: white;
}

	.blazor-error-boundary::after {
		content: "An error has occurred."
	}