html *{
    font-size: var(--fontDefault);
}

a {
	color:var(--colorBlueFull);
}

innertable {
	display: table;
	width:100%;
}
innertr{
	display: table-row;
}
innerth{
	display: table-cell;
	padding: 0.25rem 0.25rem;
	background-color:var(--colorBlack005);
	border-bottom:1px solid var(--colorBlack025);
}
innertd{
	display: table-cell;
	padding: 0.25rem 0.25rem;
	border-bottom:1px solid var(--colorBlack025);
}
innertd:nth-child(2){
	width:13%;
}
innertd:nth-child(3),
innertd:nth-child(4),
innertd:nth-child(5){
	width:22%;
}

/*@media (orientation: landscape) {*/
    
	h1 {
		font-size: var(--fontHeader1);
		margin-bottom: 0.2rem;
	}                        
	h2 {                     
		font-size: var(--fontHeader2);
		margin-bottom: 0.1rem;
	}                        
	.smallfont,
	.smallfont * {                   
		font-size: var(--fontSmall1);
    }
	.smallfont2,
	.smallfont2 * {                   
		font-size: var(--fontSmall2);
    }

	
	.headermenu {
		position: fixed;
		top: 0px;
		left: 0px;
		width: calc(100% - 2rem);
		height: 2.5rem;
		padding: 0.5rem 1rem;
		z-index: 500;
		color: var(--colorBrightGrayFull);
		user-select: none;
		display: block;
		/*color: white;
		mix-blend-mode: screen;*/
	}

	.headermenu .background {
		position: absolute;
		top: 0;
		left: 0;
		background-color: var(--colorBlack025);
		transition: background-color var(--transitionSemi);
		/*top: 1rem;
		height: calc(100% - 1rem);
		width: calc(100% - 1rem);*/
	/*	-webkit-mask-image: linear-gradient(90deg ,var(--colorBlackFull) 0%, var(--colorBlack050) 25%,  var(--colorBlack050) 75%, var(--colorBlackFull) 100%);
		mask-image: linear-gradient(90deg ,var(--colorBlackFull) 0%, var(--colorBlack050) 25%, var(--colorBlack050) 75%,  var(--colorBlackFull) 100%);
	*/
		/*opacity: 0.75;*/
		top: 0;
		height: 100%;
		width: 100%;
		
	}
	
	.headermenu .background.blue {
		background: unset;
		background-color: var(--colorBlueFull);
	}
	
	.headermenu .links {
		display: flex;
		position: relative;
		top: 0.3rem;
		height: 100%;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;
	}
	
	.headermenusmall .links {
		display: flex;
		position: relative;
		top: 0.3rem;
		height: 100%;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;
	}

	.headermenu img {
		height:67%;
		float: left;
		margin-right: 3rem;
	}
	
	.headermenu text {
		font-family: 'Montserrat';
		letter-spacing: -0.025rem;
		margin: 0.5rem 0rem 0rem 0.5rem;
		color: var(--colorWhiteFull);
		opacity: 0.75;
		cursor: pointer;
		font-size: var(--fontHeader1);
		float: left;
		/*text-shadow: 0px 0px 1rem 2rem var(--colorBlackFull);*/
		transition: opacity var(--transitionSemi) ease;
		position: relative;
	}
	
	

	*/
	#pagelinksoptions,
	#pagelinksmore
 	{
		display: inline-block;
	}
	#pagelinksoptions .links,
	#pagelinksmore .links{
		font-family: 'Montserrat';
		letter-spacing: -0.025rem;
		color: var(--colorBlack075);
		opacity: 0.75;
		cursor: pointer;
		font-size: var(--fontHeader1);
		transition: opacity var(--transitionQuick);
		position: relative;
		display: inline-block;
		margin-bottom: 1rem;
	}
	
	.headermenu text:hover,
	#pagelinksoptions .links:hover,
	#pagelinksmore .links:hover {
		opacity: 1;
	}
	.frontendpage .breadcrump text:after,
	.headermenu text:after, 
	#pagelinksoptions .links:after,
	#pagelinksmore .links:after,
	.footerlink:after{
	  content: '';
	  position: absolute;
	  width: 0; 
	  height: 1px;
	  display: block;
	  margin-top: 0.1rem;
	  right: 0;
	  background: var(--colorOrangeFull);
	  transition: width var(--transitionSemi) ease;
	  -webkit-transition: width var(--transitionSemi) ease;
	}
	
	.mainmenu text:after{
	  content: '';
	  position: absolute;
	  width: 0; 
	  height: 1px;
	  display: block;
	  margin-top: 0.1rem;
	  right: 0;
	  background: var(--colorOrangeFull);
	  transition: width var(--transitionSemi) ease;
	  -webkit-transition: width var(--transitionSemi) ease;
	}
	
	.frontendpage .breadcrump text:hover:after,	
	.mainmenu text:hover:after,
	.headermenu text:hover:after,
	#pagelinksmore .links:hover:after,
	#pagelinksoptions .links:hover:after,
	.footerlink:hover:after{
	  width: 100%;
	  left: 0;
	  background:  var(--colorOrangeFull);
	}
	

	
	.headermenu img[buttonlink="normal"] {
		height: 0.9rem;
		width: unset;
		margin-right: 0.1rem;
		opacity:1;
	}
	
	
	.headermenu .options {
		float: right;
		position: relative;
		top: 0.5rem;
		cursor: pointer;
		background-image: url(/img/64/options.png);
		opacity:0.75;
		background-repeat: no-repeat;
		background-position: center;
		background-size: 100%;
		width: 1.5rem;
		height: 1.5rem;
	}
	
	.headermenu .options:hover {
		opacity:1;
	}


	
	.cookienotice {
		position:fixed;
		bottom:0px;
		left:0px;
		width:100%;
		height: 2rem;
		padding: 0.7rem 1rem;
		color: var(--colorWhiteFull);
		background-color: var(--colorBlack075);
		z-index:500;
		text-align: center;
		border-top: solid 1px var(--colorWhiteFull);
	}
	
	.cookienotice *{
		font-size: var(--fontHeader1);
	}
	
.form {
    text-align: center;
}
	
.formInput {
	position: relative;
    margin: auto;
    display: block;
	height: 3rem;
	width: 22rem;
}	
.formInputButton {
	position: relative;
}

.formInputButton label {
  position: absolute;
    top: -0.9rem;
    margin: auto;
    font-size: 0.8rem;
    left: 1rem;
    transition: all 0.3s ease-in-out;
    z-index: 1;
    color: var(--colorBlack050);
    padding: 0 0.25rem;
}


.formInputSelect {
    display: block;
	position:relative;
	top: 0;
	left: 0;
	height: 3rem;
}

.formInput.nobreak, 
.formInputSelect.nobreak {
    display: inline-block;
}

.formInputSelect label{
	position: absolute;
    top: -0.2rem;
    left: 0.5rem;
    transition: all 0.3s ease-in-out;
    z-index: 1;
    color: var(--colorBlack050);
    background-color: var(--colorWhiteFull);
    padding: 0 0.25rem;
    border-radius: 25%;
    font-size: var(--fontSmall3);
}

.formInputArea {
	position: relative;
    margin: 0.5rem auto;
    display: block;
	/*height: 6rem;*/
	width: 44rem;
}

.formInputArea textarea {
	width: 41rem;
    height: 10rem;
}

.formInputCaptcha {
	position: relative;
    margin: 0.2rem auto 0.5rem auto;
	height: 3rem;
    width: 20rem;
    display: block;
	border: solid 1px var(--colorBlack025);
	border-radius: 0.5rem;
	background-color: var(--colorWhiteFull);	
}

.formInputCaptcha img{
	height: 90%;
	padding: 0.25rem 1rem;
	display:inline-block;
}
.formInputArea label,
.formInput label{
  position: absolute;
  top: 0.5rem;
  left: 1.5rem;
  transition: all 0.3s ease-in-out;
  z-index: 1;
  color: var(--colorBlack050);
}


.formInputB {
	position: relative;
    margin: auto;
    display: block;
	height: 3rem;
	width: 22rem;
}

.formInputD {
	position: relative;
    margin: auto;
    display: block;
	height: 3rem;
}

.formInputD label,
.formInputB label{
  position: absolute;
  top: 0.75rem;
  left: 1.0rem;
  transition: all 0.3s ease-in-out;
  z-index: 1;
  color: var(--colorBlack050);
}

.formInputC {
	position: relative;
    margin: auto;
    display: block;
	height: 3rem;
	width: 22rem;
}

.formInputC.nolable {
	width: unset;
	height: unset;
}

.formInputC.nowidth {
	width: unset;
}

.formInputC label:not(.switch) {
  position: absolute;
  top: 0.5rem;
  left: 3.0rem;
  transition: all 0.3s ease-in-out;
  z-index: 1;
  color: var(--colorBlack050);
}

.formCheckbox {
	display: block;
    position: relative;
    width: 33rem;
    height: 2rem;
}

#contactform .formCheckbox {
	margin: 1rem auto auto auto;
    width: 40rem;
    text-align: left;
    padding-left: 2rem;
}

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

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 1.1rem;
  width:  1.1rem;
  background-color: var(--colorWhiteFull);
  border: solid 1px var(--colorBlack025);
  border-radius: 0.25rem;
}

.formCheckbox input:checked ~ .checkmark {
  background-color:  var(--colorBlueFull);
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

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

/* Style the checkmark/indicator */
.formCheckbox .checkmark:after {
     left: 0.3rem;
    width: 0.3rem;
    height: 0.7rem;
    border: solid var(--colorWhiteFull);
    border-width: 0 0.2rem 0.2rem 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.formInputRegisterCheckbox .formCheckbox{
	margin:auto;
	width: 18rem;
	height: 4rem;
	text-align: left;
    padding-left: 2rem;
}


input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0px 1000px var(--colorWhiteFull) inset !important;
}

select:focus,
input:focus {
	outline: none;
}

textarea:focus {
	border: solid 1px var(--colorBlack025);
	outline: none;
}

textarea:focus + label,
textarea:not(:placeholder-shown) + label,
input:focus + label,
input:not(:placeholder-shown) + label {
    top: -0.2rem;
    font-size: var(--fontSmall3);
    line-height: var(--fontSmall2);
    background-color: var(--colorWhiteFull);
    padding: 0rem 0.5rem;
	border-radius:var(--fontSmall3);
}


.formInputB input:focus + label,
.formInputB input:not(:placeholder-shown) + label {
    top: -0.2rem;
	left: 0.5rem;
    font-size: var(--fontSmall3);
    line-height: var(--fontSmall2);
    background-color: var(--colorWhiteFull);
    padding: 0rem 0.5rem;
	border-radius:var(--fontSmall3);
}

.forminfo {
	top: -0.15rem;
    font-size: var(--fontSmall3);
    background-color: var(--colorWhiteFull);
    padding: 0rem 0.5rem;
	color: var(--colorBlack050);
}

	
	button,
	input[type="submit"],
	input[type="button"] {
		padding: 0.25rem 1rem;
		display:inline-block;
		margin: 0rem 1rem;
		color: var(--colorBlack075);
		border: solid 1px var(--colorBlack025);
		cursor: pointer;
		border-radius: 0.5rem;
		background-color: var(--colorWhiteFull);
		transition: color var(--transitionQuick), background-color var(--transitionQuick);
		user-select: none;
	}
	
	button:hover,
	input[type="submit"]:hover, 
	input[type="button"]:hover	{
		background-color: var(--colorBlue005Opa);
		border: solid 1px var(--colorBlack050);
	}
	
	button:disabled,
	input[type="submit"]:disabled,
	input[type="button"]:disabled,
	button:disabled:hover,
	input[type="submit"]:disabled:hover,
	input[type="button"]:disabled:hover {
		background-color: var(--colorBlack010);
	}
	
	.darkbutton {
		background-color: var(--colorBlack025);
		border: solid 1px var(--colorWhite075);
		color: var(--colorWhiteFull);
	}
	
	.darkbutton:hover {
		background-color: var(--colorLightGray025);
		border: solid 1px var(--colorWhiteFull);
		color: var(--colorWhiteFull);
	}
	
	.landingPage {
		padding: 0.5rem 1rem;
		font-size: var(--fontHeader1);
	}
	
	.switch.right,
	input[type="submit"].right,
	button.right {
		float:right;
		/*border-radius: 0.5vw 0vw 0vw 0.5vw;*/
	}
	
	input[type="submit"].left,
	button.left {
		float:left;
		/*border-radius: 0vw 0.5vw 0.5vw 0vw;*/
	}
	
	
	
	button.mini{
		padding: 0.1rem 0.1rem;
		border-radius: 0.4rem;
		margin: 0 0.1rem;
	}
	
	
	
	
	textarea,
	input[type="text"],
	input[type="number"],
	input[type="password"] {
		border: solid 1px var(--colorBlack025);
		margin: 0.25rem 0rem;
		border-radius: 0.25rem;
		padding: 0rem 0.5rem;
		width: 19rem;
		font-size: var(--fontDefault);
		line-height:2rem;
		color: var(--colorBlack075);
	}
	textarea {
		padding-top: 0.25rem;
		border-radius: 0.5rem;
		line-height:1.5rem;
		height: 5rem;
	}
	
	input[type="range"] {
		-webkit-appearance: none;
		appearance: none;
		width: 20rem;
		height: 1rem;
		background: var(--colorBlueFull); /* Grey background */
		outline: none; /* Remove outline */
		border-radius: 1rem;
		padding: 0.2rem;
		/*left: 0.2rem;
		bottom: 0.2rem;*/
	}
	
	input[type="range"]::-webkit-slider-thumb {
		-webkit-appearance: none; /* Override default look */
		appearance: none;
		width: 1rem; /* Set a specific slider handle width */
		height: 1rem; /* Slider handle height */
		background: var(--colorWhiteFull); /* Green background */
		cursor: pointer; /* Cursor on hover */
		border-radius: 0.5rem;
	}
	
	input[type="range"]::-moz-range-thumb {
		width: 1rem; /* Set a specific slider handle width */
		height: 1rem; /* Slider handle height */
		background: var(--colorWhiteFull); /* Green background */
		cursor: pointer; /* Cursor on hover */
		border-radius: 0.5rem;
	}
	
	.brightInput {
		background: var(--colorWhiteFull) !important;
	}
	
	._minibutton{
		padding: 0.1rem 0.1rem;
		display: inline;
		background-color: var(--colorWhiteFull);
		color: var(--colorBlackFull);
		border: solid 1px var(--colorBlack050);
		cursor: pointer;
		border-radius: 0.4rem;
		margin: 0 0.1rem;
		user-select: none;
		transition: color var(--transitionQuick), background-color var(--transitionQuick);
	}

	._minibutton:hover {
		background-color: var(--colorBlue005Opa);
		border: solid 1px var(--colorBlackFull);
	}

	
	/* The switch - the box around the slider */
	.switch {
		position: relative;
		display: inline-block;
		width: 2.4rem;
		height: 1.4rem;
		margin: 0.4rem 0;
	}

	/* Hide default HTML checkbox */
	.switch input {
	  opacity: 0;
	  width: 0;
	  height: 0;
	}

	/* The slider */
	.slider {
	  position: absolute;
	  cursor: pointer;
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  background-color: var(--colorOrange075);
	  -webkit-transition: var(--transitionQuick);
	  transition: var(--transitionQuick);
	  transition-timing-function: cubic-bezier(0.88, 0, 0.2, 1.03);
	}
	
	

	.slider:before {
		position: absolute;
		content: "";
	    height: 1rem;
		width: 1rem;
		left: 0.2rem;
		bottom: 0.2rem;
		background-color: var(--colorWhiteFull);
		-webkit-transition: var(--transitionQuick);
		transition: var(--transitionQuick);
		transition-timing-function: cubic-bezier(0.88, 0, 0.2, 1.03);
	}

	input:disabled + .slider {
		background-color: var(--colorBlack025);
	}
	
	input:checked + .slider {
	  background-color: var(--colorBlueFull);
	}

	input:checked + .slider:before {
	  -webkit-transform: translateX(1rem);
	  -ms-transform: translateX(1rem);
	  transform: translateX(1rem);
	}
	
	input:checked:disabled + .slider {
		background-color: var(--colorBlack050);
	}

	/* Rounded sliders */
	.slider.round {
	  border-radius: 1rem;
	}

	.slider.round:before {
	  border-radius: 0.5rem;
	}

	
	select {
		background-color: var(--colorWhiteFull);
		border: solid 1px var(--colorBlack025);
		padding: 0.25rem;
		margin: 0.25rem 0rem;
		border-radius: 0.25rem;
		width: 19rem;
		font-size: var(--fontDefault);
		line-height:2rem;
		height: 2.1rem;
	}
	
	a {
		opacity: 0.75;
		transition: opacity var(--transitionQuick);
	}
	a:hover {
		opacity: 1;
	
	}
	
	img[buttonlink="normal"]{
		opacity: 0.75;
		cursor: pointer;
		transition: opacity var(--transitionQuick);
	}
	
	img[buttonlink="normal"]:hover {
		opacity: 1;
	}
	
	img[buttonlink="noshadow"] {
		opacity: 0.75;
		cursor: pointer;
		transition: opacity var(--transitionQuick);
	}
	
	img[buttonlink="noshadow"]:hover {
		opacity: 1;
	}
	

	.error {
		color: var(--colorRedFull) !important;
	}
	
	.loginblack {
		background-image: url(/img/64/chevron_r_black.png);
		background-size: 1rem;
		background-repeat: no-repeat;
		background-position: 0.25rem center;
		padding-left: 1.75rem !important;
	}
/*}*/


/*
@media (orientation: portrait) {
    body {
		font-size: max(3vw, 8px);
    }
	h2 {
		font-size: 4vh;
	}

}

*/




.mainlogo {
	width: 30vmin;
    padding-bottom: 0.5rem;
}

.handimage {
	width: 15rem;
}


.contentpage {
	width: 100%;
    min-height: 100vh;
    /*overflow: hidden;*/
    background-color: var(--colorWhiteFull);
    /* background: linear-gradient(175deg, var(--colorWhite025) 50%, var(--colorGrayishBlue025) 100%); */
    display: flex;
    position: relative;
    z-index: 0;
    align-items: center;
}

div[name="content_page_3"],
div[name="content_page_5"],
div[name="content_page_7"],
.backgrey {
	background-color: var(--colorBackGrayFull) !important; 
}

div[name="content_page_7"]{
	min-height: calc(100vh - 3rem);
}

.contentpage h1 {
	font-size: var(--fontHomeHeader1);
	line-height: var(--fontHomeHLineHeight);
	color: var(--colorHeaderBlueBright);
}
.contentpage h1 text {
	font-size: var(--fontHomeHeader1);
	line-height: var(--fontHomeHLineHeight);
	color: var(--colorHeaderBluedark);
}

.contentpage .subtext {
	padding-top: 1rem;
	width: 30%;
    position: relative;
    left: 35%;
    display: block;
	font-size: var(--fontDefault);
}

.contentpage .contentstart {
    display: block;
    width: 100%;
    z-index: 10;
    font-family: 'Montserrat';
    letter-spacing: -0.025rem;
    position: relative;

	font-size: 1.5rem;
    line-height: 2rem;
	
}

.contentpage .contentstart .highlight{
	font-size: 1.5rem;
    line-height: 2rem;
	font-family: 'Montserrat';
    letter-spacing: -0.025rem;
	font-weight: 500;
	color: rgb(255 208 160) !important;

}

.contentpage .contentend {
	padding-top:5rem;
	display: table-cell;
	width: 100%;
	color: var(--colorBlack075);
	position: relative;
	z-index: 10;
}


.contentpage .content {
	line-height: var(--fontHomeLineHeight);
	color: var(--colorHomeText);
	display: table-cell;
    width: 100%;
	padding-top: 5rem;
	padding-left: 4rem;
	padding-right: 4rem;
	padding-bottom: 5rem;
}

.nobreak {
	white-space: nowrap;
}

.section-header {
	width: 80%;
    margin: 0rem auto 0rem auto;
	text-align: center;
}

.contentpage .contentend .section-header {
	margin: 2rem auto 0rem auto;
	width: 60%;
}

.section-title,
.section-title * {
	font-family: 'Montserrat';
	font-size: 3.2rem;
	line-height: 3.8rem;
	font-weight: 400;
}

.section-subtitle {
	font-family: 'Montserrat';
	font-size: 1.4rem;
    margin: 0.9rem auto 0rem auto;
}

.section-subtext {
	font-family: 'Montserrat';
	font-size: 1.2rem;
    margin: 0.9rem auto 0rem auto;
	text-align:left;
}

.section-subtext strong{
	font-family: 'Montserrat';
	font-size: 1.2rem;
    font-weight:600;
}


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

.section-subtitle .highlight {
	font-size: 1.2rem;
}

.problem-grid {
	display: flex;
    gap: 2rem;
    margin: 4rem auto auto auto;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
}
.problem-card {
    width: 30%;
	aspect-ratio:3.7;
    text-align: center;
    padding: 2rem;
    background-color: var(--colorBackGrayFull);
    border-radius: 2rem;
}

.features-grid {
	display: flex;
    gap: 2rem;
    margin: 4rem auto auto auto;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
}


.feature-card {
	 width: 20%;
	aspect-ratio:1.7;
    text-align: center;
    padding: 2rem;
    background-color: var(--colorWhiteFull);
    border-radius: 2rem;
}

.audience-grid {
    width: 70%;
    padding-top: 3rem;
    margin: 0rem auto 0rem auto;
}

.audience-icon {
	height: 5rem;
	width: 3.5rem;
    position: relative;
}
.audience-icon .icon {
    width: 	3.5rem;
    height: 3.5rem;
    color: var(--colorBlueFull);
	position: absolute;
    left: 0px;
    top: 1rem;
}
.audience-text {
	display:inline-block;
	position: relative;
	border-bottom: 1px solid var(--colorBlack075);
	width: calc(100% - 3.5rem);
	padding-bottom: 0.5rem;
	margin-bottom: 1rem;
	margin-left: 1rem;
	margin-top: 1rem;

}



.feature-card h3,
.problem-card h3{
	font-size: 1.4rem;
	margin-bottom: 1rem;
}

.audience-text h3 {
	font-size: 1.4rem;
	padding-bottom:0.4rem;
}

.audience-text p, 
.feature-card p,
.problem-card p{
	font-size: 1.3rem;
}

.feature-icon,
.problem-icon {
    margin-bottom: 1rem;
}

.problem-icon .icon {
    width: 3rem;
    height: 3rem;
    /*color: var(--colorOrangeFull);*/
	color: var(--colorBlueFull);
}

.feature-icon .icon {
    width: 3rem;
    height: 3rem;
    color: var(--colorBlueFull);
}


.workflow-steps {
	display: flex;
    gap: 2rem;
    margin: 4rem auto auto auto;
    flex-wrap: nowrap;
    justify-content: center;
}
.workflow-step {
    text-align: center;
	width: 21%;
}

.step-number {
    width: 4rem;
    height: 4rem;
    background: var(--colorBlueFull);
    color: var(--colorWhiteFull);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 auto 1.5rem;
}

.step-content p {
	text-align:left;
	width: 80%;
    margin: 3rem auto;
	font-size: 1.3rem;
}

.patcharrow {
    aspect-ratio: 2.55;
    mask-image: url(../img/arrowmask_r.png);
    mask-repeat: no-repeat;
    mask-size: 100%;
    margin-bottom: 1rem;
    position: relative;
	
}

.patcharrow text {
	font-weight: bold;
    color: var(--colorBlack065);
    font-size: 1.4rem;
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
}


.patchPlaning {
    aspect-ratio: 2.55;
    border-radius: 2rem;
    mask-repeat: no-repeat;
    mask-size: 100%;
    margin-bottom: 1rem;
    position: relative;
}

.patchPlaning text {
	font-weight: bold;
    color: var(--colorWhiteFull);
    font-size: 1.5rem;
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
	
}

.patcharrow1 {
	background-color: var(--colorLightBlue1);
}
.patcharrow2 {
	background-color: var(--colorLightBlue2);
}
.patcharrow3 {
	background-color: var(--colorLightBlue3);
}
.patcharrow4 {
	background-color: var(--colorLightGreen1);
}

.contact-left {
	position: absolute;
	margin: 2rem 0 0 10%;
}

.contact-grid {
    margin: 2rem auto 0rem auto;
}

.contact-grid td{
	text-align: center;
}

.contact-left h3,
.contact-grid h3 {
	font-size: var(--fontHomeDefault);
	margin-top:0.5rem;
}
.contact-left p,
.contact-grid p {
	color: var(--colorBlack050);
	margin-bottom:1rem;
}
#customeruserdata_response {
	margin-bottom: 1rem;
}
#contact_response{
	margin-top: 1rem;
}


.contentpage * ul {
	padding-left: 1.3rem;
}

.contentpage .content2x {
	line-height: var(--fontHomeLineHeight);
	color: var(--colorHomeText);
	display: table-cell;
    width: 50%;
	padding-top: 5rem;
	padding-left: 4rem;
	padding-right: 4rem;
	padding-bottom: 1rem;
    vertical-align: top;
}


.footer {
	/*display: table-footer-group;*/
	z-index: 10;
    position: relative;
	bottom: 0px;
	width: 100%;
	border-top: solid 1px var(--colorWhiteFull);
	background-color: var(--colorBlack075);
}

.footer .content {
	color: var(--colorWhite075);
    padding: 1rem 0rem;
    margin: auto;
    width: 80%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.footer-left {
	width:30%;
}

.footer .content a{
	color: var(--colorWhite075);
	text-decoration:none;
	position:relative;
}


.footer .content a:hover{
	color: var(--colorWhiteFull);
}

.centered {
	text-align: center;
}

.fullline {
	width: 100%;
	text-align: center;
}

.backblue {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
	color: var(--colorWhiteFull);
}

.backlightblue {
	background-color: var(--colorBlue025);
}

.bg1 {
	background-image: url(../img/back_higher.png);
}

.bg2 {
	background-image: url(../img/bg2.jpg);
}
.bg3 {
	background-color: var(--colorBlackFull);
	background-image: url(../img/back_a_last.jpg);
}

.bgbw {
	background-attachment: fixed;
	background-image: url(../img/bgbw.jpg);
	background-size: cover;
}

table {
	table-layout: fixed;
	border-spacing: 0px;
}

table tr td,
table tr th {
	vertical-align: top;
	text-align:left;
	/*overflow: auto;*/
	padding: 0px;
}

table.middlealign td {
	vertical-align:middle;
}

.hovertablecontainer {
	overflow-y:auto;
    max-height: calc(100vh - 7rem);
    border-radius: 0.5rem 0.5rem 0rem 0rem;
	border-radius: 0.5rem;
}

table.hovertable {
	background-color: var(--colorWhiteFull);
	
	width: 100%;
    table-layout: auto;
}

table.hovertable .center{
    text-align: center;
}

table.hovertable tr{
	transition: color var(--transitionQuick), background-color var(--transitionQuick);
}

table.hovertable td {
	padding: 0.75rem 0.5rem;
	border-top:1px solid var(--colorWhiteFull);
	border-bottom:1px solid var(--colorBlack025);
}

table.hovertable tr{
	background-color: var(--colorWhite025);
}

/*
table.hovertable tr:nth-child(odd){
	background-color: var(--colorLightGray075);
}

table.hovertable tr:nth-child(even){
	background-color: var(--colorWhite025);
}*/

table.hovertable th.edit {
	background-color: var(--colorOrange075HTFull);
	text-align:center;
}

table.hovertable th{
	padding: 0.5rem 0.5rem;
	background-color: var(--colorBrightGrayHTFull);
    /*color: var(--colorWhiteFull);*/
	text-overflow: ellipsis;
    overflow: hidden;
	position:sticky;
	top:0;
	z-index: 1;
}

/*
table.hovertable th{
	padding: 0.5rem 0.5rem;
	background-color: var(--colorBlueFull);
    color: var(--colorWhiteFull);
	text-overflow: ellipsis;
    overflow: hidden;
}*/

table.hovertable td.edit {
	cursor: grab;
	background-image: url(/img/64/edit_black_50.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 1.5rem;
}



table.hovertable td.edit.alarm {
	cursor: grab;
	background-image: url(/img/64/bell_black_50.png);
	background-repeat: no-repeat;
	background-position: 0.5rem;
	background-size: 1.5rem;
}

table.hovertable td.edit.alarm ul {
	list-style: none;
}

table.hovertable tr:hover :not(th):not(text):not(li):not(ul):not(a):not(innertable):not(innerth):not(innertr):not(innertd):not(span){
	background-color: var(--colorBlue025);
}


table.hovertable tr:hover td.edit {
	/*background-image: url(/img/64/edit.png);*/
	background-color: var(--colorOrange025);
	transition: color var(--transitionQuick), background-color var(--transitionQuick);
}

table.hovertable tr:hover td.edit.alarm {
	/*background-image: url(/img/64/bell.png);*/
	background-color: var(--colorOrange025);
	transition: color var(--transitionQuick), background-color var(--transitionQuick);
}

table.hovertable tr:hover td.edit:hover {
	background-image: url(/img/64/edit.png);
	background-color: var(--colorOrangeFull);
	color: var(--colorWhiteFull);
}
table.hovertable tr:hover td.edit.alarm:hover {
	background-image: url(/img/64/bell.png);
	background-color: var(--colorOrangeFull);
	color: var(--colorWhiteFull);
}

.innerhovertable td {
	padding: 0rem 0rem;
	border-top:1px solid var(--colorWhiteFull);
	border-bottom:1px solid var(--colorBlack025);
}

.autotransform {
	text-transform: capitalize;
}

.gridlist {
	display: flex;
	width: 100%;
    justify-content: center;
}

.gridcell{
	width: 20%;
}

.gridcell ul {
	position: relative;
	left: 15%;
}

.hidden {
	display: none !important;
	opacity: 0 !important;
}

.optionpanel.hidden,
.userpanel.hidden {
	display: none !important;
	opacity: 0 !important;
	transition-property: display, opacity;
	transition-duration: var(--transitionQuick);
	transition-behavior: allow-discrete;
}


#scanner_alert_config {
	height: unset;
	opacity: 1;
	transition: var(--transitionSemi);
}

.invisible {
	height: 0rem;
	opacity: 0 !important;
}

.invisible2 {
	visibility: hidden;
}

.mandotory:after{
	content: ' *';
}

.optionpanel {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100vw;
	height:100vh;
	overflow: hidden;
    backdrop-filter: blur(2px) grayscale(0.5);
	background: radial-gradient(circle, var(--colorDarkGray025) 0%, var(--colorBlack025) 100%);
	z-index:501;
	
	opacity:1;
	display:block;
	transition-property: display, opacity;
	transition-duration: var(--transitionQuick);
	transition-behavior: allow-discrete;
	@starting-style {
		opacity:0;
	}
}

.optionpanel .inner {
    position: absolute;
    right: 1.5rem;
    top: 1rem;
    width: 23rem;
    display: inline-block;
    overflow: hidden;
    background-color: var(--colorWhiteFull);
    padding: 0.5rem;
    color: var(--colorBlackFull);
    border-radius: 0.5rem;
	box-shadow: 0 0 1rem var(--colorBlack050);
	padding: 1rem;
}


.optionpanel .inner>img {
	height: 1.5rem;
	margin-bottom: 1rem;
}


.optionpanel .inner .languagesbox {
	position: relative;
    bottom: 0.5rem;
}
.optionpanel .inner .languages text{
	font-family: 'Montserrat';
    letter-spacing: -0.025rem;
    color: var(--colorBlack075);
    opacity: 0.75;
    cursor: pointer;
    font-size: var(--fontHeader1);
}

.optionpanel .inner .languages:hover {
	opacity: 1;
}
	

.userpanel {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100vw;
	height:100vh;
	overflow: hidden;
    backdrop-filter: blur(2px) grayscale(0.5);
	background: radial-gradient(circle, var(--colorDarkGray025) 0%, var(--colorBlack025) 100%);
	z-index:2;
	opacity:1;
	display:block;
	transition-property: display, opacity;
	transition-duration: var(--transitionQuick);
	transition-behavior: allow-discrete;
	@starting-style {
		opacity:0;
	}
}


/*
.userpanel .inner  *{
    scrollbar-width: auto;
    scrollbar-color: var(--colorBlueFull) var(--colorWhiteFull);
}*/

/* Other browsers */
/*
.userpanel .inner  *::-webkit-scrollbar{
    width: auto;
}

.userpanel .inner  *::-webkit-scrollbar-track{
    background: var(--colorWhiteFull);
}

.userpanel .inner  *::-webkit-scrollbar-thumb{
    background-color: var(--colorBlueFull);
    border-radius: 0px;
    border: 1px solid var(--colorWhiteFull);
}
*/

.userpanel .inner {
	min-width: 30vw;
    border-radius: 0.5rem;
    position: relative;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    top: 50%;
    display: inline-block;
	overflow:hidden;
	box-shadow: 0 0 1rem var(--colorBlack050);
}

.userpanel .big {
	width: 90%;
	height: 80%;
}

.userpanel .inner form {
	white-space: nowrap;
}

 
.userpanel > .inner > .title {
	height: 2.5rem;
	text-align: center;
	vertical-align: middle;
	background-color: var(--colorWhiteFull);
	color: var(--colorBlack075);
	border: solid 1px var(--colorBlack025);
}

.userpanel .inner .title .back {
	height: 2.5rem;
    width: 2.5rem;
    color: var(--colorWhiteFull);
    position: absolute;
    right: 0%;
    top: 0.0rem;
    background-color: var(--colorWhite000);
	transition: background-color var(--transitionQuick);
    cursor: pointer;
    background-image: url(/img/64/chevron_l_black.png);
    background-size: 1.1rem;
	background-position:center;
    background-repeat: no-repeat;
}
.userpanel .inner .title .back:hover {
	background-color: var(--colorOrange025);
}

.userpanel .inner .title .back.close {	
    background-image: url(/img/64/close_black.png);
}

.userpanel .inner .title text {
	font-family: 'Montserrat';
	letter-spacing: -0.025rem;
	font-size: 1.4rem;
	position:relative;
	top: 0.4rem;
}

.userpanel .inner .title.delete {
	color: var(--colorWhiteFull);
	background-color: var(--colorRedFull);
}

.userpanel .inner .title.delete .back{
	background-image: url(/img/64/chevron_l_white.png);
}



.userpanel .inner .content {
	background-color: var(--colorWhiteFull);
	padding: 1rem 0.5rem 1rem 0.5rem;
	height: 100%;
	overflow: auto;
	max-height: 90vh;
    max-width: 96vw;
}

#searchfilterproduct.userpanel .inner .content {
	min-height: 60vh;
}
/*#searchalarmproduct.userpanel .inner .content {
	min-height: 60vh;
}*/


.userpanel td {
	padding: 0rem 0.5rem;
}

#password_strength_indicator_invite,
#password_strength_indicator_change,
#password_strength_indicator {
	width: 20rem;
    margin: auto;
    height: 1.5rem;
    position: relative;
	
}

#password_strength_indicator_back_invite,
#password_strength_indicator_back_change,
#password_strength_indicator_back {
	width: 1%;
    background-color: red;
    height: 1rem;
	border-radius: 0.25rem;
	transition: var(--transitionNormal);
	margin-top: 0.25rem;
	border: solid 1px var(--colorBlack025);
}

#password_strength_indicator_text_invite,
#password_strength_indicator_text_change,
#password_strength_indicator_text {
    position: absolute;
    top: 2px;
    text-align: center;
    width: 100%;
	/*text-shadow: 0px 1px 2px var(--colorWhiteFull);*/
	transition: var(--transitionNormal);
	font-size: var(--fontSmall3);
	color: var(--colorBlack050);
}

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

.mainpages {
	z-index: 1;
}
.teaserContainer {
	position: absolute;
    top: 68vh;
    left: 2rem;
    height: 28vh;
	-webkit-perspective: 100px;
    perspective: 500px;
	perspective-origin: left center;
	z-index: 2;
	aspect-ratio: 2;
}




.teaser {
	position: absolute;
    top: 0rem;
    left: 0rem;
    width: calc(100% - 1rem);
	padding: 0.5rem;
    
	aspect-ratio:2;
    color: var(--colorWhite075);
    overflow: hidden;
	transform-origin: left center;
	-webkit-transform-origin: left center;
	transform: translate(0rem) rotateY(0deg);
    -webkit-transform: translate(0rem) rotateY(0deg);
	opacity:1;
	transition: var(--transitionQuick);
	transition-timing-function: ease-in-out;
	transform-style: preserve-3d;
    transition-behavior: allow-discrete;
	
	background-color: var(--colorBlue033);
	border: solid 1px var(--colorWhite075);
	color: var(--colorWhiteFull);
	border-radius: 0.5rem;
}


.turnedaway {
	color: var(--colorOrange075);
	/*opacity:0;*/
	/*transform: translate(-5rem) rotateY(90deg);
    -webkit-transform: translate(-5rem) rotateY(90deg);*/
	transform: translate(-80rem) rotateY(0deg);
    -webkit-transform: translate(-80rem) rotateY(0deg);
}

.teaser:hover {
	background-color: var(--colorLightGray025);
	border: solid 1px var(--colorWhiteFull);
	color: var(--colorWhiteFull);
	transform: translate(0rem) rotateY(0deg);
    -webkit-transform: translate(0rem) rotateY(0deg);
}


.teaserTitle {
	font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
    padding: 0.5rem 0 0.8rem 0;
	/*text-shadow: 0.0rem 0.0rem 0.3rem var(--colorBlackFull);*/
}

.teaserText {
	/*text-shadow: 0.0rem 0.0rem 0.2rem var(--colorBlackFull);*/
}

.teaserBackground {
    /*background-image: url(/img/back_cvecard_blue_a.png); */
    /*background-image: url(/img/test_animation.gif);*/
	
	border-radius:1.5rem;
    background-size: 128px 128px;
    /*background-repeat: no-repeat;*/
    position: absolute;
    top: 0;
    left: 0;
    top: 0;
    height: 99%;
    width: 99%;
    filter: opacity(0.5);
	border: 1px solid;
	border-color: var(--colorWhite025);
    background-color: var(--colorBlueFull);
}


#chart-cves {
	width: 40vw;
	aspect-ratio: 16 / 9;
	background-color: var(--colorWhiteFull);
}


#productSearchResutlts {
    max-height: 80vh;
}



.autocomplete {
  position: absolute;
  background-color: var(--colorWhiteFull);
  box-shadow: 0.1rem 0.1rem 1rem var(--colorBlack025);
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  border-radius:0.5rem;
  min-width:12rem;
  z-index:2;
}
.autocomplete ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.autocomplete ul li {
  padding: 0.5rem 0;
}
.autocomplete ul li:hover {
  background: var(--colorLightGray025);
}

.inputsmall {
	width:5rem;
}




.cpestring {
	padding-top: 0.5rem !important;
}
.cpestring text {
	padding-left: 0.25rem;
	padding-right: 0.25rem;
}

.cpestring text:not(.grey) {
	cursor:pointer;
}
/*
.cpestring text:hover:not(.grey) {
	background-color: var(--colorBlue025);
}*/

.inputCPEHighlight,
.stringCPEHighlight {
	color: var(--colorWhiteFull) !important;
	background-color: var(--colorBlue050) !important;
}


.grey {
	color:  var(--colorDarkGrayFull);
}

.inactive {
	color:  var(--colorHalfGrayFull);
}

.sizeResTableA {
	width:13%;
}

.deletebutton {
	color: var(--colorRedFull);
}

.deletebutton:hover {
	color: var(--colorWhiteFull);
	background-color: var(--colorRedFull);
}

.deletebuttonaction {
	width: 9rem;
	user-select:none;
}

.table33 {
	width:33%;
}

.table66 {
	width:66%;
	vertical-align:top !important;
}

.table40 {
	width:40%;
}

.table60 {
	width:60%;
}

.table33 input:not([type="radio"]){
	width: 95%;
}

.table33smallselect{
	width: 100%;
}

.leftspace1 {
	padding-left:1%;
}

.footerTable {
	position: absolute;
    bottom: 2vh;
}

#ProductSearchResultListPager, 
#productSearchResutltsPager,
#ProductProductCveListPager {
	display: flex;
	justify-content: center;
	align-items: center;
}

#ProductSearchResultListPager button,   
#productSearchResutltsPager button,
#ProductProductCveListPager button{
	margin: 0.5vw;
}

#ProductSearchResultListPager button.selected, 
#productSearchResutltsPager button.selected,
#ProductProductCveListPager button.selected {
	background-color: var(--colorBlack010);
}

mark{
	background-color: var(--colorOrangeFull);
	color: var(--colorWhiteFull);
	font-weight: bold;
}

.clickable {
	cursor: pointer;
}

.help {
		cursor: help;
}

.cvePanel {
	width: 100%;
	position:relative;
	background-color: var(--colorWhiteFull);
	border-radius: 0.5rem;
	overflow:hidden;
}

.cvePanel .cvetitleid {
	text-align: center;
	background-color: var(--colorBlack010);
	color: var(--colorBlackFull);
	padding: 0.3rem;
	font-size: 1.4rem;
}


.cvePanel .cvenumber {
	position:absolute; 
	left: 1rem;
    top: 1.0rem;
    font-size: var(--fontHeader1);
}

.cvePanel .siderect {
	float: right;
    display: table;
    margin: 1rem;
    width: 18%;
    position: relative;
    font-size: var(--fontSmall12);
}

.cvePanel .siderect *{
    font-size: var(--fontSmall2);
}


.cvePanel .detailrect {
	display: table;
	width: calc(100% - 1rem);
	background-color:var(--colorBlack005);
	position:relative;
	top: 0rem;
	right: 0rem;	
	padding: 0.5rem;
	font-size: var(--fontSmall2);
}

.cvePanel .detailrect *{
	font-size: var(--fontSmall2);
}

.cvePanel .detailrect.detailrectB {
	position:relative;
	margin-top: 1rem;
}

.cvePanel .detailrect .cve_detailrect_main_title {
	font-size: 1rem;
	font-weight:bold;
	text-transform: uppercase;
}
.cvePanel .detailrect .cve_detailrect_sub_title {
	font-size: 0.75rem;
	font-weight:bold;
	text-transform: uppercase;
}


.cvePanel .cveData {
	display: flow-root;
	margin: 1rem;
}

.cvePanel .cveData .cveDataSplit{
	display: inline-block;
    width: calc(50% - 1rem);
    vertical-align: top;
}
.cvePanel .cveData .cveDataSplit.left{
	margin-right:2rem;
}



.cvePanel .catTitle {
	display: table;
	width: calc(100% - 0.75rem);
	position:relative;
	padding: 0.25rem;
	padding-left: 0.5rem;
	border-radius: 0.5rem 0.5rem 0 0;
	font-weight:bold;
	background-color: var(--colorWhiteFull);
    color: var(--colorBlackFull);
    border-bottom: solid 1px var(--colorBlack025);
    user-select: none;
}

.cvePanel ._minibutton {
	display: block;
    width: 10%;
    text-align: center;
    margin: 0.1rem 40%;
}

.cvePanel .catContent {
	display: table;
	width: calc(100% - 1rem);
	padding: 0.5rem;
	background-color:var(--colorWhiteFull);
	border-radius: 0 0 0.5rem 0.5rem;
}

.cvePanel .catContent.history {
	margin-bottom: 1rem;
}

.cvePanel .catTitleSub {
	display: table;
	width: calc(100% - 0.75rem);
	position:relative;
	padding: 0.25rem;
	padding-left: 0.5rem;
	border-radius: 0.5rem 0.5rem 0 0;
	font-weight:bold;
	background-color: var(--colorBlack005);
    color: var(--colorBlack075);
    border-bottom: solid 1px var(--colorBlack025);
    user-select: none;
}


.cvePanel .productsRect {
	display: table;
	width:100%;
	left: 0rem;
	padding: 0.5rem;
	background-color: var(--colorBlack001);
	border: 1px solid var(--colorBlack010);
}

.cvePanel .productsRect .shortside {
	width:15%;
}

.cvePanel .productsRect .vulnerable {
	color: var(--colorRedFull);
}

.cvePanel .productsRect .title {
	font-weight:bold;
}

.cvePanel .productsRect .cpe {
	text-decoration: italic;
}

.cvePanel .productsRect .conjunction {
	font-weight:bold;
    color: var(--colorBlue050);
}
/*
.cvePanel .cvemoredetails{
	width: calc(100% - 2rem);
    margin: 1rem;
	display: table;
}*/

.mainmenu {
	position:fixed;
	top:0px;
	left:0px;
	width: 17rem;
	height: calc(100% - 2rem);
	padding: 1rem 0rem;
	color: var(--colorBlack075);
	user-select: none;
	display: table-cell;
	line-height: 1.5rem;
}

.bodyloggedin {
	
    height: 100vh;
	background-color: var(--colorWhiteFull);
   /* background-image: url(/img/back_bez_a.jpg);
    background-attachment: fixed;
    background-size: cover;
    background-position: left top;*/
}

.mainmenu .cat {
	width:100%;
	margin: 1rem 0rem;
	padding:0.75rem 2.5rem 0.5rem 0rem;
	opacity:0.75;
	background-position: 0.2rem center;
	background-repeat: no-repeat;
	background-size: 1.5rem;
	padding-left: 2.5rem;
}

.mainmenu .cat.sub {
	width: 100%;
    margin: 0.5rem 0rem;
    padding: 0rem 2.5rem;
    opacity: 0.75;
}

.mainmenu .cat.sub text {
	font-size: 1rem;
}

.mainmenu .catactive {
	opacity:1;
	background-color: var(--colorBlueFull);
	color: var(--colorWhiteFull);
}

.mainmenu>img {
	margin-left:0.5rem;
	width:6rem;
}

.mainmenu text {
	margin: 0rem 0rem;
	position: relative;
	transition: var(--transitionQuick);

	cursor: pointer;
	font-size: var(--fontHeader1);
}

.mainmenu>div:has(> *:hover) {
	opacity:1;
}

.mainmenu .languages {
	position:absolute;
	bottom:1rem;
	left: 1rem;
}


#cat_Dashboard {
	background-image: url(../img/64/home_black.png);	
}
#cat_Dashboard.catactive {
	background-image: url(../img/64/home.png);	
}

#cat_Projects {
	background-image: url(../img/64/dart_black.png);	
}
#cat_Projects.catactive {
	background-image: url(../img/64/dart.png);	
}
#cat_Projects_Scanners {
	background-image: url(../img/filterlist_black.svg);	
}
#cat_Projects_Scanners.catactive {
	background-image: url(../img/filterlist.svg);	
}

#cat_CVE {
	background-image: url(../img/64/shield_black.png);	
}
#cat_CVE.catactive {
	background-image: url(../img/64/shield.png);	
}

#cat_Profile {
	background-image: url(../img/gear_black.svg);	
}
#cat_Profile.catactive {
	background-image: url(../img/gear.svg);	
}

#cat_Usermanager {
	background-image: url(../img/user_black.svg);	
}
#cat_Usermanager.catactive {
	background-image: url(../img/users.svg);	
}

#cat_Teammanager {
	background-image: url(../img/users_black.svg);	
}
#cat_Teammanager.catactive {
	background-image: url(../img/users.svg);	
}

#cat_Logout {
	background-image: url(../img/64/logout_black.png);	
}


/*
#cat_Dashboard {
	background-image: url(../img/64/home.png);	
}*/

.loggedin {
	display: table-cell;
}

.frontendpage {
	
	position: absolute;
    left: 17rem;
	width:  calc(100% - 17rem);
	min-height: 100vh;
	display: table-cell;
	vertical-align: top;
}

.frontendpage .contentwrap {
	background: var(--colorBackGrayFull);
	height: fit-content;
	min-height: calc(100vh - 2rem);
}

.frontendpage .content {
	display: table;
    width: calc(100% - 2rem);
	padding-top: 1rem;
	padding-left: 1rem;
	padding-right: 1rem;
	padding-bottom: 1rem;
}

.frontendpage .imagebutton {
	width: 0.6rem;
	padding-right: 0.2rem;
}

.frontendpage .breadcrumpwrap {
	height: 2rem;
	display: flex;
    width: 100%;
}
/*
.breadcrumpspace {
	background: var(--colorLightGrayFull);
	height: 2rem;
	width: -webkit-fill-available;
}
*/
.frontendpage .breadcrump {
	padding: 0.5rem 1rem;
    height: 1rem;
	white-space:nowrap;
	color: var(--colorBlack075);
}

.frontendpage .breadcrump text{
	display: inline-block;
    cursor: pointer;
    color: var(--colorBlack075);
    opacity: 0.75;
    position: relative;
}

.frontendpage .breadcrump text:hover{
	opacity:1;
}

.loading {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100vw;
	height:100vh;
	overflow: hidden;
    backdrop-filter: blur(2px);
	background-color: var(--colorBlack050);
	z-index:1000;
	display:table-cell;
	text-align:center;
	vertical-align:middle;
	opacity: 1;
	transition: opacity var(--transitionNormal);
}


.loading h2 {
	color: var(--colorWhiteFull);
    position: absolute;
    top: calc(50% - 0.5rem);
    left: calc(50% - 5rem);
}


.hiddenanim {
	visibility: hidden;
	opacity: 0;
}

.loader {
    position: absolute;
    top: calc(50% + 1.5rem);
    left: calc(50% - 1.5rem);
    width: 3rem;
    height: 3rem;
    padding: 0.2rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: 
			conic-gradient(var(--colorWhiteFull) 0%, var(--colorWhiteFull) 45%, var(--colorBlueFull) 50%, var(--colorWhiteFull) 50% , var(--colorWhiteFull) 95%, var(--colorOrangeFull) 100%);
    --_m: 
			conic-gradient(var(--colorBlack000) 20%, var(--colorBlackFull) 50%, var(--colorBlack000) 50%, var(--colorBlack000) 70%, var(--colorBlackFull) 100%), linear-gradient(var(--colorBlackFull) 0 0) content-box;
    -webkit-mask: var(--_m);
    mask: var(--_m);
    -webkit-mask-composite: source-out;
    mask-composite: subtract;
    animation: scroller 4s infinite linear
}
@keyframes scroller {to{transform: rotate(1turn)}}


.cards {
	display: flex;
    justify-content: left;
    flex-direction: row;
    flex-wrap: wrap;
	gap: 1rem;
}

.cards>div {
	width: calc(33% - 0.5rem);
    min-height: 6vw;
	position: relative;
	box-shadow: 0px 0px 1rem var(--colorBlack000);
	transition: var(--transitionQuick);
	border-radius: 0.5rem;
	overflow:hidden;
	background-color:var(--colorWhiteFull);
	cursor: pointer;
}

#ProductSearchTermCards.cards>div {
    min-height: 10vw;
}

#ProductProductCveCards.cards>div {
    min-height: 17vw;
}

.cards>div:hover {
	transform-style: preserve-3d;
    transform: perspective(50cm) rotateX(-1deg) scale(1.015);
	z-index:1;
	box-shadow: 0px 0px 1rem var(--colorBlack010);
}
.cards>div:hover .edit {
    background-color: var(--colorOrange075);
}


.cards table {
	width: 100%;
}

.cards .title {
    position: relative;
    top: 0px;
	height: 1rem;
    width: calc(100% - 1rem);
    left: 0.0rem;
    padding: 0.5rem;
    font-weight: bold;
    background-color: var(--colorBlueFull);
    color: var(--colorWhiteFull);
	text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.cards .title.inactive {
    background-color: var(--colorBlue050);
}


.cards .edit {
	position: absolute;
    bottom: 0px;
    right: 0rem;
    padding: 0.25rem;
    font-weight: bold;
	background-color: var(--colorBlack025);
    color: var(--colorWhite075);
    cursor: grab;
    transition: var(--transitionQuick);
    height: 2rem;
    min-width: 2rem;
    border-top-left-radius: 0.5rem;
    overflow: hidden;
    text-align: center;
    vertical-align: middle;
}

.cards .edit.alarm {
	position: absolute;
    bottom: 0px;
    left: 0rem;
    padding: 0.25rem;
    font-weight: bold;
    background-color: var(--colorBlack025);
    color: var(--colorWhite075);
    cursor: grab;
    transition: var(--transitionQuick);
    height: 2rem;
    min-width: 2rem;
    border-radius: 0 0.5rem;
    overflow: hidden;
    text-align: center;
    vertical-align: middle;
    aspect-ratio: 1;
}

.cards .edit text {
	position: relative;
    top: 0.5rem;
}

.cards .edit img {
	position: relative;
    top: 0.3rem;
    height: 1.4rem;
}

.cards>div:has(> *:hover) .edit:hover {
	background-color: var(--colorOrangeFull);
}

.cards .cvss {
	padding: 0.5rem 0;
	width: calc(100% - 2.5rem);
    height: 2rem;
    cursor: pointer;
    color: var(--colorBlack050);
}

.cards .description {
	height: calc(100% - 2rem);
	padding: 0.5rem;
	transition: 0.25s;
	position: relative;
	text-overflow: ellipsis;
    overflow: hidden;
}

#ProductProductCveCards .description {
	max-height: calc(100% - 11rem);
	-webkit-mask-image: linear-gradient(180deg, var(--colorBlackFull) 70%, var(--colorBlack000) 90%);
    mask-image: linear-gradient(180deg, var(--colorBlackFull) 70%, var(--colorBlack000) 90%);
}

.cards .metric {
	display: table;
	padding: 0.5rem;
    position: absolute;
    bottom: 2.5rem;
    height: 4rem;
    cursor: pointer;
	color: var(--colorBlack075);
}

.cards .metricversion {
	display: table-cell;
}

.cards .footer {
	padding: 0.5rem;
    position: absolute;
    bottom: 0.25rem;
    height: 2rem;
    cursor: pointer;
    color: var(--colorBlack075);
}

.cards .amount {
	padding: 0.5rem 0;
    position: relative;
    height: 1rem;
    cursor: pointer;
    color: var(--colorBlack050);
}
.innerform.left,
.innercard.left {
	width: 25%;
}

#userprofile table{
	table-layout: unset;
}
.innerform.right,
.innercard.right {
	width: 65%;
}
.innerform.left>div,
.innercard.left>div{
    display: inline-block;
    border-radius: 0.5rem;
    overflow: hidden;
    background-color: var(--colorWhiteFull);
    margin-bottom: 1rem;
	width: 100%;
}

.innerform.right>div,
.innercard.right>div{
	margin-left:1rem;
    display: block;
    border-radius: 0.5rem;
    overflow: hidden;
    background-color: var(--colorWhiteFull);
    margin-bottom: 1rem;
	position: relative;
	width: 100%;
}

.innerform .title ,
.innercard .title {
    position: relative;
    top: 0px;
    width: calc(100% - 1rem);
    left: 0.0rem;
    padding: 0.5rem;
    font-weight: bold;
    background-color: var(--colorBlueFull);
    color: var(--colorWhiteFull);
	text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.innerform .title ,
.innercard .title {
	background-color: var(--colorBlack010);
    color: var(--colorBlackFull);
}


.innerform .innercardcontent ,
.innercard .innercardcontent {
	padding: 0.5rem;
}
/*
.innerform .innerformcontent table td:first-child ,
.innercard .innercardcontent table td:first-child {
	width: 10rem;
}
*/
#impressum .inner .content,
#dataprotection .inner .content{
	max-height: 70vh;
	max-width: 70vw;
}

dialog {
	border: none;
	max-width: 100% !important;
    max-height: 100% !important;
}

.formtable{
	width:100%;
	transition: var(--transitionQuick);
}

.formtable td{
	vertical-align: middle;
}

.formtable text{
	width:10rem;
}

.formtable .right{
	text-align: right;
}
.formtable .center{
    text-align: center
}

.formtable .selecttype{
    width: 7rem;
}
.formtable .product_vendor{
    width: 10rem;
}
.formtable .product_product{
    width: 15rem;
}

.formtable .inputsmaller{
    width: 7rem;
}

.formtable td.firstline {
    width: 11rem;
}
.formtable td.firstlineb {
    width: 5rem;
}
#cve_alert_config_flags > tbody > tr > td.firstlineb {
	vertical-align: middle;
	width: 50%;
}

#product_search_advanced_cpe_visualizer {
   height: 1.8rem;
}

.userdataconfig{
	position:relative;
	width: 40rem;
}
.mailconfig{
	position:relative;
	width: 40rem;
}

#mail_customerpreview,
#mailpreview {
	text-align: center;
	position: absolute;
    right: 0;
    top: 3rem;
	width: 20rem;
	
}
#mail_customerpreview img,
#mailpreview img{
	width: 50%;
}

#mail_alert_detail {
	padding: 0rem 1rem;
}


.edit.alarm {
	padding-left: 3rem;
}

.dontstretch {
	height: 2rem;
}

.collabsable {
	
}

.collabsed {
	height: 10rem !important;
    overflow: hidden;
    display: block !important;
	/*-webkit-mask-image: linear-gradient(180deg, var(--colorWhiteFull) 60%, var(--colorBlack000) 70%);
    mask-image: linear-gradient(180deg, var(--colorWhiteFull) 60%, var(--colorBlack000) 70%);*/
	/*background-image: url(/img/64/chevron_d_black.png);
	background-size: 1rem;
	background-repeat: no-repeat;
	background-position: center 9rem;*/
}

.collabsed .collabsedinner {
	height: 10rem !important;
    overflow: hidden;
    display: block !important;
	-webkit-mask-image: linear-gradient(180deg, var(--colorWhiteFull) 80%, var(--colorBlack000) 90%);
    mask-image: linear-gradient(180deg, var(--colorWhiteFull) 80%, var(--colorBlack000) 90%);
}


.icon_active {
	background-image: url(/img/64/check.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 1rem;
}
.icon_inactive {
	background-image: url(/img/64/close_gray.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 1rem;
}

#mail_alert_custom_detail > td:nth-child(3),
#mail_alert_default_detail > td:nth-child(3) {
	    padding: 0rem 1rem;
}

#mail_alert_default_detail > td:nth-child(3) td {
	    padding: 0.25rem 0rem;
}


#cve_alert_config_global > tbody > tr > td:nth-child(2){
	    padding: 0rem 1rem;
}

.backgroundvideo {
	position: absolute;
    bottom: 0;
    right: 0;
    z-index: 0;
	width: 100%;
    height: 100%;
    object-fit: cover;
}

/*
background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom right;
	*/
/*
div[name="content_page_6"] .backgroundvideo {
	right: unset;
	left: 0;
}*/


#header_main_project,
#header_main_scanner {
	text-align:center;
	border-bottom: 1px solid var(--colorGray153Full);
}
var(--colorWhiteFull)
#header_main_project,
#header_project_active,
.productSearchTermListBorder tr td:nth-child(2) {
	border-right: 1px solid var(--colorGray153Full);
}


.cveview_reftable,
.cveview_metrictable,
.cveview_metrictableinner {
	width:100%;
}
.cveview_metrictableinner tr:nth-child(odd){
	background-color: var(--colorLightGray010);
}

.cveview_metrictableinner tr:nth-child(even){
	/*background-color: var(--colorWhite025);*/
}

.cveview_reftable th,
.cveview_metrictable th {
	padding: 0.25rem;
    padding-left: 0.5rem;
    background-color: var(--colorBlack005);
    color: var(--colorBlack075);
    border-bottom: solid 1px var(--colorBlack025);
	line-height: 1.4rem;
}
.cveview_reftable td,
.cveview_metrictableinner td {
	padding: 0.25rem;
	border-top: 1px solid var(--colorWhiteFull);
	border-bottom: 1px solid var(--colorGray204Full);
}

.cveview_reftable tr th:nth-child(2) {
	width:23%;
}
.cveview_reftable tr th:nth-child(3) {
	width:16%;
}

.cveview_metrictableinner {
	table-layout: fixed;
}
.cveview_metrictableinner th,
.cveview_metrictableinner td{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

 

#projectList th:nth-child(1){
	width:5%;
}
#projectList th:nth-child(2){
	width:15%;
}
#projectList th:nth-child(4){
	width:5%;
}
#projectList th:nth-child(5){
	width:5%;
}
#projectList th:nth-child(6){
	width:5%;
}
#projectList th:nth-child(7){
	width:5%;
}

.sharetableContainer {
	overflow-y:auto;
	overflow-x:hidden;
	max-height: 30vh;
}

#project_shares_user,
#project_shares,
#project_shares_team,
#members_team,
#membership_team,
.sharetable {
    width: 100%;
	min-width: 30vw;
    table-layout: auto;
}

#project_teams,
#project_shares,
#membership_team,
#members_team,
#project_shares_team,
#project_shares_user {
	min-width: 30vw;
}

.sharetable .title {
	font-family: 'Montserrat';
    height: 1.5rem;
    text-align: center;
    vertical-align: middle;
    background-color: var(--colorWhiteFull);
    color: var(--colorBlack075);
    border-bottom: solid 1px var(--colorBlack025);
	margin-bottom:0.5rem;
}

.sharetable th{
	padding: 0.5rem 0.5rem;
    background-color: var(--colorBrightLightGrayFull);
    text-overflow: ellipsis;
    overflow: hidden;
	position:sticky;
	top:0;
	z-index: 100;
}

#project_shares tr:nth-child(2),
#project_teams tr:nth-child(2),
#members_team tr:nth-child(2),
#project_shares_team tr:nth-child(2),
#membership_team tr:nth-child(2),
#project_shares_user tr:nth-child(2){
    background-color: var(--colorBrightLightGrayFull);
}

#project_shares_user td,
#project_shares td {
	border-bottom: solid 1px var(--colorBlack010);
	vertical-align:middle;
}

#project_shares_user th:nth-child(1),
#project_shares th:nth-child(1),
#project_shares_user th:nth-child(3),
#project_shares th:nth-child(3),
#project_shares_user th:nth-child(4),
#project_shares th:nth-child(4),
#project_shares_user th:nth-child(5),
#project_shares th:nth-child(5){
	width:5rem;
}



/*
#project_shares_user th:nth-child(2){
	width:20rem;
}*/

#ProductSearchTermList > tbody > tr > th:nth-child(2) {
	width:5%;
}
#ProductSearchTermList > tbody > tr > th:nth-child(3) {
	width:5%;
}

#ProductSearchTermList td {
	overflow:hidden;
}

#ProductSearchTermList > tbody > tr > th:nth-child(7) {
	width:5%;
}

.nomargin {
    margin: unset;
}


/*
severityCritical	Critical (9.0–10.0): Immediate, severe risk; often allows remote code execution and complete system compromise.
severityHigh 		High (7.0–8.9): Serious risk; likely to result in significant data theft or unauthorized access.
severityMedium		Medium (4.0–6.9): Moderate risk; may allow information disclosure or limited system access.
severityLow			Low (0.1–3.9): Low risk; minimal impact on system security.
severityNone		None (0.0): No security impact
*/
.severity {
    border-radius: 1rem;
    padding: 0.2rem 0rem 0.1rem 0rem;
    text-align: center;
    display: block;
    line-height: var(--fontDefault);
}
	
.severityCritical {
	background-color: var(--colorRedFull);
	color: white;
}

.severityHigh {
	background-color: red;
	color: white;
}
.severityMedium {
	background-color: orange;
}
.severityLow {
	background-color: yellow;
}
.severityNone {
	background-color: lime;
}



#dashboard  #dashboard_import_protocol {
	width:100%;
	max-height: 90vh;
}

#dashboard #dashboard_import_protocol .title{
    display: table;
    width: calc(100% - 0.75rem);
    position: relative;
    padding: 0.25rem;
    padding-left: 0.5rem;
    border-radius: 0.5rem 0.5rem 0 0;
    font-weight: bold;
    color: var(--colorBlackFull);
    border-bottom: solid 1px var(--colorBlack025);
    user-select: none;
}

#dashboard #dashboard_import_protocol .overviewdialog{
	height: 31rem;
	position:relative;
	top:0;
	left:0;
}

#dashboard #dashboard_import_protocol .overviewdialog .diagram{
	height: 30rem;
	width:	60rem;
	/*background-color: #cc0000;*/
	position:absolute;
	top:0;
	left:0;
	display: inline-block;
	/*border: 1px solid gray;*/
}

#dashboard #dashboard_import_protocol .overviewdialog .options{
	height: calc(30rem - 2rem);
	width:	25rem;
	padding: 1rem;
	position:absolute;
	top:0;
	left: 60rem;
	display: inline-block;
	/*background-color:#00cc00;*/
}

#dashboard #dashboard_import_protocol .overviewdialog .filterselection{
	height: calc(30rem - 2rem);
	width:	calc(100% - 86rem);
	padding: 1rem;
	position:absolute;
	top:0;
	right: 0;
	display: inline-block;
}


#dashboard #dashboard_import_protocol .hovertablecontainer{
	height: calc(90vh - 30rem);
}


#importDiagramCanvasContainer {
	width: 30rem;
	height: 30rem;
}
#importDiagramCanvas {
	width: 100%;
	height: 100%;
	margin: 0.5rem;
}

#infoElementHover {
	display: inline-block;
	box-shadow: 0px 0px 0.2rem var(--colorBlackFull);
    position: absolute;
    top: 0;
    left: 0;
	padding: 0.25rem;
	background-color: var(--colorWhiteFull);
}

.limited {
	position: fixed;
    top: 0;
    right: 0;
    padding: 0.25rem;
	background-color: var(--colorBlueFull);
    color: var(--colorWhiteFull);
}

.diagramtext {
	font-size: 10px;
}


.slice {
	opacity: 1;
	transition: filter var(--transitionSemi), opacity var(--transitionSemi);
}

.slice:hover {
	opacity: 0.5;
	filter: drop-shadow(0px 0px 0.2rem var(--colorBlackFull));
}

.hint::after { 
	content : "🛈";
}

.historytable {
	width: 100%;
}
.historydetailtable {
	margin-top: 1rem;
	width: 100%;
}

.maxinfo {
	position: absolute;
    top: 4rem;
    left: 50%;
    transform: translate(-50%, -50%);
}

.beta {
	position: absolute;
    top: -0.5rem;
    left: 53%;
    font-size: 1.2rem;
    text-shadow: 0 0 rgba(0, 0, 0, 0) !important;
}

/*DARK MODE */

.dark .bg1 {
	background-image: url(../img/back_dark_higher.png);
}

.dark .contentpage {
    background-color: var(--colorDarkestGrayFull);
}

.dark div[name="content_page_3"],
.dark div[name="content_page_5"],
.dark div[name="content_page_7"],
.dark .backgrey {
	background-color: var(--colorDarkerGrayFull) !important; 
}


.dark .contentpage .content {
    color: var(--colorHomeTextDark);
}

.dark .problem-card {
	background-color: var(--colorDarkerGrayFull);
}

.dark .problem-icon .icon {
	color: var(--colorBlueBrightFull);
}

.dark .feature-card {
	background-color: var(--colorDarkGrayFull);
}

.dark .feature-icon .icon {
	color: var(--colorBlueBrightFull);
}

.dark .patcharrow1 {
	background-color: var(--colorLightBlue3);
}
.dark .patcharrow2 {
	background-color: var(--colorLightBlue4);
}
.dark .patcharrow3 {
	background-color: var(--colorLightBlue5);
}
.dark .patcharrow4 {
	background-color: var(--colorLightGreen1);
}

.dark .patcharrow text {
	color: var(--colorBlackFull);
}

.dark .audience-icon .icon {
	color: var(--colorBlueBrightFull);
}

.dark .audience-text {
    border-bottom: 1px solid var(--colorWhite075);
}

.dark textarea, 
.dark input[type="text"], 
.dark input[type="number"], 
.dark input[type="password"] {
    border: solid 1px var(--colorWhite025);
    color: var(--colorWhite075);
	background-color: var(--colorHalfGrayFull);
}

.dark .formInputArea label, 
.dark .formInput label {
	color: var(--colorWhite075);
}


.dark textarea:focus + label,
.dark textarea:not(:placeholder-shown) + label,
.dark input:focus + label,
.dark input:not(:placeholder-shown) + label {
    background-color: var(--colorHalfGrayFull);
}


.dark .formInputB input:focus + label,
.dark .formInputB input:not(:placeholder-shown) + label {
    background-color: var(--colorHalfGrayFull);
}

.dark a{
    color: var(--colorBlueBrightFull);
}

.dark .checkmark {
    background-color: var(--colorHalfGrayFull);
    border: solid 1px var(--colorWhite025);
}
	
.dark .formCheckbox input:checked ~ .checkmark {
    background-color: var(--colorBlueBrightFull);
}

.dark button, 
.dark input[type="submit"], 
.dark input[type="button"] {
    color: var(--colorWhite075);
    border: solid 1px var(--colorWhite025);
    background-color: var(--colorHalfGrayFull);
}