body{
	font-family: "Helvetica Neue",Arial,sans-serif;
    background-color: #1e1e1e;
    color: #C0C0C0;
    height: 95vh;
}
.headerImage{
    height: 50px;
}
.navigation{  
    display: flex;
    height: calc(100% - 50px);
    flex-direction: column;
    justify-content: center;
}
.pointer{
    cursor: pointer;
}
.langSelector{
	position: sticky;
	height: fit-content;
	width: 48px;
	z-index: 1;
	top: 10px;
	right: 10px;
}
.cardModify{
	position: absolute;
	top: 5px;
	right: 5px;
}
.langSelector .dropdown {
	list-style: none;
	padding: 0;
	display: none;
}
.dropdown .image-wrapper,
.selectPlaceholder .image-wrapper {
	display: inline-block;
}
.dropdown img, .selectPlaceholder img {
	max-width: 100%;
}
.selectPlaceholder {
	display: flex;
	align-items: center;
	cursor: pointer;
	position: relative;
}
.langSelector.active .selectPlaceholder::after {
	right: 20px;
}
.langSelector.active .selectPlaceholder::before {
	right: 15px;
}
.dropdown.active{
	display: block;
	position: absolute;
}
.langSelector.active .dropdown {
	flex-direction: column;
	box-shadow: 1px 1px 6px 1px #ddd;
	position: absolute;
	top: 40px;
	right: 0;
	left: 0;
	min-width: 200px;
	display: block;
}
.hidden{
	display: none !important;
	visibility: hidden !important;
}
.hiddenAlot{
	display: none !important;
	visibility: hidden !important;
}
.packageSelector{
	display: flex;
	justify-content: center;
	font-size: large;
	margin-top: 40px;
}
.packageHeader{
	height: 100%;
	height: min-content;
	margin-left: 1em;
  	margin-right: 1em;
	width: min-content;
	opacity: 0.75;
}
.packageHeader:hover{
	opacity: 1 !important;
}
.packageImage{
	height: 100%;
	max-width: 25vw;
  	min-width: 5vw;
}
.packageTitle {
	position: relative;
	bottom: 54px;
	left: 0px;
	background-color: #1e1e1e;
	width: 80%;
	height: 50px;
	text-align: left;
	align-content: center;
	padding-left: 15px;
	line-break: anywhere;
	text-wrap: balance;
	color:white;
}
.packageTitleText{
	display: inline-block;
	font-size:large;
}
.packagePlus.active{
	transform: translateX(10px) rotate(180deg);
}
.packagePlus{
	position: relative;
	float:right;
	font-size:large;
	margin-right:30px;
	color:#e63312;
	transition:transform .4s ease;
}
.formHeaderNotLoggedIn{
	font-size:medium;
	color:white;
	text-align: center;
}
.formNotLoggedInInfo{
	font-size:medium;
	text-align: center;
}
.headerTopScroll{
	animation-name: topScroll;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}
@keyframes topScroll {
	0% {height: 90vh;font-size: xx-large;}
	100% {height: 25vh;font-size: medium;}
}
@keyframes fadeOut {
	100% {opacity: 0.25;}
}
@keyframes fadeIn {
	100% {opacity: 1;}
}
.headerSelected{
	animation-name: fadeIn;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}
.headerUnselected{
	animation-name: fadeOut;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}
.cleanContainer, .controlContainer, .repairContainer{
	width: 100%;
}
.cleanInfo, .controlInfo, .repairInfo{
	margin-top:20px;
	font-size:medium;
}
.packageInfo{
	text-align: left;
	font-size: large;
	margin-left: auto;
	margin-right: auto;
}
.packageList{
  	margin: auto;
	text-align:left;
	list-style-type: none;
	font-size:medium;
}
.packageList li::before{
	content: '';
	position: relative !important;
	top: 13px !important;
	left: -15px !important;
	display: block !important;
	-webkit-clip-path: polygon(65% 0,100% 50%,65% 100%,0 100%,30% 50%,0 0) !important;
	clip-path: polygon(65% 0,100% 50%,65% 100%,0 100%,30% 50%,0 0) !important;
	background: #e63312 !important;
	width: 10px !important;
	height: 10px !important;
}
.listHeader{
	margin-bottom: 0px;
	text-align: left;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px !important;
	font-size: medium;
	color:white;
}
.overviewTable{
	border: 5px solid #c0c0c0;
	border-radius: 15px;
	width: 90%;
	border-spacing: 0px;
	margin: auto;
}
.overviewRows th td{
	border: 1px solid #c0c0c0;
	width: 20%;
	font-size: smaller;
}
.tableHeader{
	margin-bottom: 0px;
	text-align: left;
	margin-left: auto;
	margin-right: auto;
}
.open{
	display:block;
	animation:dropdownOpen .45s ease forwards;
}
.closing{
	animation:dropdownClose .35s ease forwards;
}
/* OPEN ANIMATION */
@keyframes dropdownOpen{
	0%{
		opacity:0;
		transform:translateY(-20px);
		transform-origin:top;
	}

	70%{
		opacity:1;
		transform:translateY(0px);
	}

	100%{
		opacity:1;
		transform:translateY(0);
	}
}
/* CLOSE ANIMATION */
@keyframes dropdownClose{
	0%{
		opacity:1;
		/*transform:translateY(0) scaleY(1);*/
		transform:translateY(0);
	}

	100%{
		opacity:0;
		/*transform:translateY(-15px) scaleY(.8);*/
		transform:translateY(-15px);
		transform-origin:top;
	}
}
.articleFormGrid{
	display: grid;
	grid-template-columns: 48.75% 2.5% 48.75%;
	grid-template-areas:
	"packageSelection		packageSelection	packageSelection" 
	"articleSelection		articleSelection	articleSelection" 
	"problemDescription		problemDescription	problemDescription" 
	"images					images				images" 
	"imageViewer			imageViewer			imageViewer" 
	"addSelectedButton		addSelectedButton	addSelectedButton"
	"costEstimateRelease	costEstimateRelease	costEstimateRelease" 
	"articleInfo			articleInfo			articleInfo" 
	"previousButton			gridButton			nextButton";
}
.articleInfo{
	grid-area: articleInfo;
}
.articleSelection{
	grid-area: articleSelection;
	height: fit-content;
	border: 2px inset #C0C0C0;
	border-radius: 10px;
	margin-left: 5px;
	margin-top: 10px;
	margin-bottom: 10px;
}
.packageSelection{
	grid-area: packageSelection;
}
.images{
	grid-area: images;
}
.imageViewer{
	grid-area: imageViewer;
}
.problemDescription{
	grid-area: problemDescription;
}
.costEstimateRelease{
	grid-area: costEstimateRelease;
}
.previousButton{
	grid-area: previousButton;
	text-align: center;
}
.addSelectedButton{
	grid-area: addSelectedButton;
	text-align: center;
}
.addAddressButton{
	display: block !important;
	align-content: center;
	order: 100;
}
.addAddressButtonPlus{
	text-align: center;
	align-content: center;
	font-size: 50px;
	font-weight: bolder;
}
.addAddressButtonText{
	font-size: medium !important;
	text-align: center;
}
.cardHolderGrid:hover{
	background-color: rgb(50, 50, 50);
}
.cardHolderGrid{
	display: grid;
	position: relative;
	grid-template-columns: 70% 30%;
	grid-template-areas:
	"defaultCard	defaultCard"
	"companyCard	checkmarkParent"
	"nameCard		z"
	"address1Card	z"
	"address2Card	z"
	"dividerAddress	z"	
	"streetCard		z"
	"czcCard		z"
	"divider		z"	
	"mailCard		z"
	"telefonCard	z"
	"dividerVat	z"
	"vatIDCard	z";
	align-content: baseline;
	border: 1px inset #C0C0C0;
	border-radius: 5px;
	max-height: fit-content;
	height: fit-content;
	/*min-height: 85px;*/
	min-height:min-content;
	padding: 5px;
	margin: 0 2.5px 10px 2.5px;
	overflow-wrap: break-word;
	width:90%;
}
.dividerAddress{
	grid-area: dividerAddress;
	height: 10px;
}
.divider{
	grid-area: divider;
	height: 10px;
}
.dividerVat{
	grid-area: dividerVat;
	height: 10px;
}
.nameCard{
	grid-area: nameCard;
}
.czcCard{
	grid-area: czcCard;
}
.adress1Card{
	grid-area: address1Card;
}
.adress2Card{
	grid-area: address2Card;
}
.streetCard{
	grid-area: streetCard;
}
.mailCard{
	grid-area: mailCard;
}
.telefonCard{
	grid-area: telefonCard;
}
.vatIDCard{
	grid-area: vatIDCard;
}
.defaultCard{
	grid-area: defaultCard;
}
.companyCard{
	grid-area: companyCard;
}
.activeCard{
	background-color: rgb(90, 90, 90);
}
.customerFormGrid{
	display: grid;
	grid-template-columns: 12.1% 12.1% 12.1% 12.1% 2.5% 24.42% 24.43%;
	grid-template-areas:
	"titleArea	titleArea	titleArea	titleArea	titleArea	r				r"
	"adress1	adress1		adress1		adress1		x			firstname		surename" 
	"adress2	adress2		adress2		adress2		x	    	mail			telefon" 
	"street		street		street		street		x			vatID			vatID" 
	"country	zipcode		city		city		x			customerNumber	customerNumber"
	"gridButton	gridButton	gridButton	gridButton	gridButton	nextButton	nextButton"
	"createAdressButton	createAdressButton	createAdressButton	createAdressButton	createAdressButton	createAdressButton	createAdressButton";
	/*border: 2.5px inset #C0C0C0;*/
	border-radius: 15px;
	padding: 5px;
	margin: 2.5px;
	height: 350px;
}
.customerAddressGrid{
	display: grid;
	grid-template-columns: 12.1% 12.1% 12.1% 12.1% 2.5% 24.42% 24.43%;
	grid-template-areas:
	"titleArea	titleArea	titleArea	titleArea	titleArea	r				r"
	"adress1	adress1		adress1		adress1		x	    	firstname	surename" 
	"adress2	adress2		adress2		adress2		x	    	mail		telefon	" 
	"street		street		street		street		x			vatID		vatID" 
	"country	zipcode		city		city		x			customerNumber	customerNumber"
	"gridButton	gridButton	gridButton	gridButton	gridButton	nextButton	nextButton"
	"createAdressButton	createAdressButton	createAdressButton	createAdressButton	createAdressButton	createAdressButton	createAdressButton";
	/*border: 2.5px inset #C0C0C0;*/
	border-radius: 15px;
	padding: 5px;
	margin: 2.5px;
	height: 350px;
}
.deliveryAddressGrid{
	display: grid;
	grid-template-columns: 12.1% 12.1% 12.1% 12.1% 2.5% 24.42% 24.43%;
	grid-template-areas:
	"titleArea	titleArea	titleArea	titleArea	titleArea	r				r"
	"adress1	adress1		adress1		adress1		x			firstname		surename" 
	"adress2	adress2		adress2		adress2		x	    	mail			telefon" 
	"street		street		street		street		x			vatID			vatID" 
	"country	zipcode		city		city		x			customerNumber	customerNumber"
	"gridButton	gridButton	gridButton	gridButton	gridButton	nextButton	nextButton"
	"createAdressButton	createAdressButton	createAdressButton	createAdressButton	createAdressButton	createAdressButton	createAdressButton";
	/*border: 2.5px inset #C0C0C0;*/
	border-radius: 15px;
	padding: 5px;
	margin: 2.5px;
	height: 350px;
}
.invoiceAddressGrid{
	display: grid;
	grid-template-columns: 12.1% 12.1% 12.1% 12.1% 0.5% 24.42% 24.43%;
	grid-template-areas:
	"titleArea	titleArea	titleArea	titleArea	titleArea	r				r"
	"adress1	adress1		adress1		adress1		x			firstname		surename" 
	"adress2	adress2		adress2		adress2		x	    	mail			telefon" 
	"street		street		street		street		x			vatID			vatID" 
	"country	zipcode		zipcode		city		x			customerNumber	customerNumber"
	"gridButton	gridButton	gridButton	gridButton	gridButton	nextButton	nextButton"
	"createAdressButton	createAdressButton	createAdressButton	createAdressButton	createAdressButton	createAdressButton	createAdressButton";
	/*border: 2.5px inset #C0C0C0;*/
	border-radius: 15px;
	padding: 5px;
	margin: 2.5px;
	height: 350px;
}
.articleTypeTable span:not(:first-child){
	border-left: 2px solid #C0C0C0;
	padding-left: 4px;
  	margin-left: 4px;
}
.customerNumber{
	grid-area: customerNumber;
}
.titleArea{
	grid-area: titleArea;
	margin-top: 25px;
  	margin-bottom: 5px;
	margin-left: 10px;
	font-weight: bold;
	/*font-size: larger;*/
	font-size: 30px;
	/*text-align: center;*/
	text-align: left;
	flex-basis: 100%;
	color:white;
}
.firstName{
	grid-area: firstname;
}
.sureName{
	grid-area: surename;
}
.company{
	display: none;
	grid-area: company;
}
.zipcode{
	grid-area: zipcode;
}
.country{
	grid-area: country;
}
.city{
	grid-area: city;
}
.adress1{
	grid-area: adress1;
}
.adress2{
	grid-area: adress2;
}
.street{
	grid-area: street;
}
.mail{
	grid-area: mail;
}
.phone{
	grid-area: telefon;
}
.vatID{
	grid-area: vatID;
}
.gridButton{
	grid-area: gridButton;
}
.nextButton{
	grid-area: nextButton;
	text-align: center;
}
.formGridItem{
	padding-left: 5px;
	padding-right: 5px;
	margin-left: 5px;
	margin-right: 5px;
	color:white;
}
.formGridItem label{
	/*width: 100%;
	display: block;*/
	text-align: left;
	margin-top: 15px;
	margin-bottom: 5px;
}
.formGridItem input{
	width: 100%;
	border-radius: 6px;
	border: 1px solid #C0C0C0;
	background-color: #1e1e1e;
	color: #C0C0C0;
	height: 27px;
	padding-left: 4px;
	align-content: center;
}
.formGridItem select{
	width: 100%;
	border-radius: 6px;
	border: 1px solid #C0C0C0;
	background-color: #1e1e1e;
	color: #C0C0C0;
	height: 32px;
	align-content: center;
	overflow: hidden;
}
.customerNumberField{
	width: 100%;
	border-radius: 10px;
	border: 2px inset #C0C0C0;
	background-color: #1e1e1e;
	color: #C0C0C0;
	height: 30px;
	align-content: center;

}
.formGridItem textarea{
	width: 100%;
	border-radius: 10px;
	border: 1px solid #C0C0C0;
	background-color: #1e1e1e;
	color: #C0C0C0;
	height: 35px;
	resize: none;
	max-height: 80px;
}
.formGridItem input:focus{
	background-color: white;
	color: black;
}
.formGridItem textarea:focus{
	background-color: white;
	color: black;
}
.formHeaderLoggedIn{
	margin-bottom: 0px;
	margin-left: 4px;
	text-align: left;
	width: 90%;
}
.formSubHeaderLoggedIn{
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 4px;
	text-align: left;
	width: 90%;
}
.imageContainer{
	width: 100%;
	border-radius: 10px;
	border: 2px inset #C0C0C0;
	background-color: #1e1e1e;
	color: #C0C0C0;
	height: fit-content;
	min-height: 50px;
	max-height: 100px;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: space-evenly;
	padding-top: 10px;
	padding-bottom: 10px;
	overflow: scroll;
}
.innerAlertPopUp{
	align-content: center;
	margin: 10px;
	text-align: center;
	font-size: x-large;
	padding: 0px 40px 0px 40px;
}
.formPanelCloseButton{
	margin-top: 10px;
	all: unset;
  	cursor: pointer;
	color:#e63312;
}
.popUpP{
	position: fixed;
	width: 100vw;
	height: 100vh;
	z-index: 200;
	top: 115px;
}
.alertPopUp{
	background: rgb(40, 40, 40);
	border: 2px solid #c0c0c0;
	max-width: fit-content;
	border-radius: 20px;
	position: absolute;
	left: 50%;
	transform: translate(-50%, 0%);
	min-width: 250px;
	min-height: 150px;
	max-height: fit-content;
	top: 5%;
}
.registerGrid{
	display: grid;
	grid-template-columns: 25% 25% 25% 25%;
	grid-template-areas:
	"logo logo logo logo"
	"loginInfo loginInfo loginInfo loginInfo"
	"exisitingcustomer exisitingcustomer newcustomer newcustomer" 
	"user user mail mail" 
	"password password passwordConfirm passwordConfirm" 
	"firstname firstname surename surename"
	"customerNumber customerNumber serialNumber serialNumber"
	"registerbutton registerbutton registerbutton registerbutton";
	width: 30vw;
	font-size: 15px;
	margin-left: auto;
  	margin-right: auto;
}
.loginGrid{
	display: grid;
	grid-template-columns: 25% 25% 25% 25%;
	grid-template-areas:
	"logo logo logo logo"
	"user user password password" 
	"registerbutton registerbutton registerbutton registerbutton";
	width: 30vw;
	font-size: 15px;
	margin-left: auto;
  	margin-right: auto;
}
.OuterRegisterPopUp{
	width: 35vw;
}
.logo{
	grid-area: logo;
	margin-left: auto;
	margin-right: auto;
	height: 225px;
	align-content: center;
	background: radial-gradient(circle,rgb(30, 30, 30) 0%, rgb(50, 50, 50) 65%);
}
.loginInfo{
	grid-area: loginInfo;
	margin-bottom: 10px;
}
.logo img{
	height: 200px;
}
.exisitingcustomer{
	grid-area: exisitingcustomer;
	margin-left: auto;
}
.newcustomer{
	grid-area: newcustomer;
	margin-right: auto;
}
.user{
	grid-area: user;
}
.password{
	grid-area: password;
}
.passwordConfirm{
	grid-area: passwordConfirm;
}
.firstname{
	grid-area: firstname;
}
.surName{
	grid-area: surename;
}
.mail{
	grid-area: mail;
}
.customerNumber{
	grid-area: customerNumber;
}
.serialNumber{
	grid-area: serialNumber;
}
.registerbutton{
	grid-area: registerbutton;
}
.formPanelCloseButton{
	position: absolute;
	right: 10px;
	top: 10px;
}
.customerlabel{
	width: fit-content !important;
	height: fit-content !important;
	display: inline !important;
}
.customerradio{
	width: fit-content !important;
	height: fit-content !important;
	display: inline !important;
}
.descInputTable{
	height: 20px !important;
	width: auto !important;
}
.submitButton{
	border-radius: 25px;
	background-color: #e63312;
	border-color: #e63312;
	margin-top: 10px;
	color: white;
	height: 40px;
	width: 33%;
	border-style: none;
	font-size: large;
	font-weight: bold;
	min-width: max-content;
}
.submitButtonSmall{
	border-radius: 25px;
	background-color: #e63312;
	border-color: #e63312;
	margin-top: 20px;
	color: white;
	height: 20px;
	width: 100%;
	border-style: none;
	font-size:small !important;
	font-weight: bold;
	vertical-align:middle;
	padding: 5px;
}
.formNotLoggedInLink{
	text-decoration: underline;
}
.userArea{
	right: 75px;
	top: 12px;
	text-align: end;
	z-index: 99;
}
.userAreaButton {
	border-radius: 25px;
	background-color: #C0C0C0;
	border-color: #C0C0C0;
	color: rgb(70, 70, 70);
	border-style: none;
	font-size: large;
	height: 40px;
	width: 40px;
	width: fit-content;
	padding-left: 10px;
	padding-right: 10px;
}
.submitButton:hover, .userAreaButton:hover{
	background: #c5c6c6;
	color: #1e1e1e;
	border-color: #c5c6c6;
}
.submitButton:disabled{
	opacity: .3;
	pointer-events: none;
}
.redInputBorder{
	border-color: #e63312;
}
.articleOverview{
	position: fixed;
	top: 10%;
	width: 100%;
}
.orderForm{
	width: 70%;
	margin-left: auto;
	margin-right: auto;
	background: #464646;
	padding: 10px;
	border-radius: 25px;
	border: 2.5px solid white;
	position: fixed;
	height: fit-content;
	top: 1.5vh;
	left: 15vw;
	right: 15vw;
	max-height: 90vh;
	z-index: 100;
	overflow: scroll;
}
.artDescDiv{
	width: 185px;
}
.snDiv{
	width: 185px;
}
.ovDiv{
	height: 25vh;
	overflow: scroll;
	display: block;
	overflow-x: hidden;
	border: 2px solid #C0C0C0;
	border-radius: 10px;
}
.checkBoxHeader{
	width: 25px !important;
}
.articleOverviewTable{
	border-spacing: 0px;
	border: 1px solid #C0C0C0;
	table-layout: fixed;
	font-size: 14px;
	width: 100%;
	text-align: center;
}
.articleOverviewTable tr th{
	border: 1px solid #C0C0C0;
}
.articleOverviewTable tr td{
	border: 1px solid #C0C0C0;
}
.articleOrderOverviewTable{
	border-spacing: 0px;
	/*border: 1px solid #C0C0C0;*/
	table-layout: fixed;
	font-size: 14px;
	width: 100%;
	text-align: center;
	border-radius: 5px;
}
.articleOrderOverviewTable tr th{
	border: 1px solid #C0C0C0;
}
.articleOrderOverviewTable tr:first-child th:first-child{
	border-top-left-radius: 5px;
}
.articleOrderOverviewTable tr:first-child th:last-child{
	border-top-right-radius: 5px;
}
.articleOrderOverviewTable tr td{
	border: 1px solid #C0C0C0;
}
.articleOrderOverviewTable tr:last-child td:first-child{
	border-bottom-left-radius: 5px;
}
.articleOrderOverviewTable tr:last-child td:last-child{
	border-bottom-right-radius: 5px;
}
.serviceRow{
	width: 15%;
}
.articleOverviewRows{
	height:40px;
	color:#C0C0C0;
}
.articleOverviewRows:hover{
	background-color: #c0c0c050;
}
.articleOverviewRows.selected{
	background-color: #c0c0c025;
}
.selctedArticleOverviewTable{
	border-spacing: 0px;
	border: 1px solid #C0C0C0;
	font-size: 14px;
	width: 100%;
	text-align: left;
	border-radius: 10px;
}
.selctedArticleOverviewTable tr th{
	border: 1px solid #C0C0C0;
}
.selctedArticleOverviewTable tr:first-child th:first-child{
	border-top-left-radius: 10px;
}
.selctedArticleOverviewTable tr:first-child th:last-child{
	border-top-right-radius: 10px;
}
.selctedArticleOverviewTable tr td{
	border: 1px solid #C0C0C0;
}
.selctedArticleOverviewTable tr:last-child td:first-child{
	border-bottom-left-radius: 10px;
}
.selctedArticleOverviewTable tr:last-child td:last-child{
	border-bottom-right-radius: 10px;
}
.serialNumberTable{
	border: 1px solid white;
	min-width: fit-content;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	width: 12%;
}
.articleNumberTable{
	border: 1px solid white;
	min-width: fit-content;
	text-align: center;
	width: 12%;
}
.articleDescriptionTable{
	border: 1px solid white;
	min-width: fit-content;
	text-align: center;
	width: 45%;
}
.articleTypeTable{
	border: 1px solid white;
	min-width: fit-content;
	text-align: center;
	width: 15%;
}
.descInputTableElement{
	border: 1px solid white;
}
.checkBoxTable{
	border: 1px solid white;
}
.closeSelectorButton{
	position: absolute;
	right: 0px;
	top: 0px;
}
.topBar{
	position: relative;
	display: grid;
	grid-template-columns: 200px 200px auto 200px;
}
.articleOverviewRowsHeader{
	border: 1px solid white;
}
.articleSelectorDiv{
	text-align: left;
	width: 100%;
	border-radius: 10px;
	border: 2px inset #C0C0C0;
	background-color: #1e1e1e;
	color: #C0C0C0;
	height: 30px;
	align-content: center;
	padding: 1px 2px 1px 2px;
}
.articleSelectorTableDiv{
	height: 75%;
}
.articleSelector{
	height: 100%;
}
.selectorTable{
	border: 1px solid white;
	width: 50px;
	text-align: center;
}
.header{
	/*background: #464646;*/
	height:40px;
	background:#1e1e1e;
	top: 0px;
	position: sticky;
}
.loader {
	bottom: 25vh;
    width: 48px;
    height: 48px;
    border: 5px solid #FFF;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
	text-align: center;
    }

    @keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.imagePreview{
	width: 72px;
	height: 90px;
}
.removeIMGButton {
	position: absolute;
	background: none;
	border: none;
	color: #e63312;
	font-weight: bold;
	margin-left: 1px;
	margin-top: 1px;
	font-size: larger;
}
.selected{
	background-color: #666666;
}
.packageSelectorDiv{
	text-align: left;
	width: 100%;
	border-radius: 10px;
	border: 2px inset #C0C0C0;
	background-color: #1e1e1e;
	color: #C0C0C0;
	height: fit-content;
	align-content: center;
	padding: 1px 2px 1px 2px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
}
.checkBox{
	height: 20px !important;
	width: 20px !important;
}
.formCheckbox{
	width: fit-content !important;
}
.checkboxLabel{
	width: fit-content !important;
	align-self: center;
	margin-bottom: 5px !important;
}
.ofPackageSelector{
	width: fit-content;
	display: flex;
	word-break: break-all;
}
.ofButtons{
	min-width: 50%;
	max-width: 100%;
	width: fit-content;
	padding-left: 15px;
	padding-right: 15px;
	height: fit-content;
  	min-height: 40px;
}

.popUpSelector{
	position: absolute;
	width: fit-content;
	height: fit-content;
	z-index: 101;
	background-color: rgb(100,100,100);
	right: 25px;
	border-radius: 25px;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 2.5px;
	padding-bottom: 2.5px;
	box-shadow: -2.5px -2.5px 15px -1px rgb(40,40,40),
				2.5px 2.5px 15px -1px rgb(40,40,40);
}
.popUpSelectorNotify{
	position: absolute;
	width: 390px;
	height: fit-content;
	z-index: 101;
	background-color: rgb(100,100,100);
	right: 10px;
	border-radius: 25px;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	box-shadow: -2.5px -2.5px 15px -1px rgb(40,40,40),
				2.5px 2.5px 15px -1px rgb(40,40,40);
	font-size: small;
	margin-top: 10px;
}
.popupInfo{
	font-size: 11px;
	word-break: break-word;
}
.popupInfo h1{
	width: 100%;
}
.overviewGrid{
	display: grid;
	grid-template-columns: 38.75% 2.5% 58.75%;
	grid-template-areas:
	"headerDiv	headerDiv	headerDiv"
	"customerOverview	x	articleOrderData"
	"deliveryOverview	x	articleOrderData"
	"invoiceOverview	x	carrierSelect"
	"previousButton		x	submitFormButton";
	margin-left: auto;
  	margin-right: auto;
}
.carrierText{
	font-weight: bold;
  	font-size: large;
	color: white;
}
.carrierSelect{
	grid-area: carrierSelect;
	padding: 5px;
	margin: 5px 5px 20px 5px;
}
.carrierSelectDiv{
	display: flex;
	justify-content: space-around;
	margin: 0px;
	margin-top: 10px;
	margin-bottom: 10px;
}
.carrierSelectDiv img{
	width: 250px;
	height: 100px;
	border: 2px solid #C0C0C050;
	border-radius: 10px;
	padding: 10px;
}
.carrierSelect img:hover{
	background-color: #C0C0C050;
}
.carrierSelect img.selected{
	background-color: #C0C0C025;
}
.customerOverview{
	grid-area: customerOverview;
	height: fit-content;
	padding: 5px;
	margin: 5px;
	font-size: 12px;
	border-radius: 5px;
}
.deliveryOverview{
	grid-area: deliveryOverview;
	height: fit-content;
	padding: 5px;
	margin: 5px;
	font-size: 12px;
	border-radius: 5px;
}
.invoiceOverview{
	grid-area: invoiceOverview;
	height: fit-content;
	padding: 5px;
	margin: 5px;
	font-size: 12px;
	border-radius: 5px;
}
.articleOrderData{
	grid-area: articleOrderData;
	height: fit-content;
	max-height: 60vh;
	overflow: scroll;
	padding: 5px;
	margin: 5px;
	font-size: 12px;
	color:white;
}
.articleOrderData div span{
	font-weight: bold;
	font-size: large;
}
.articleOrderData div{
	margin-bottom: 15px;
}
.submitFormButton{
	grid-area: submitFormButton;
	text-align: center;
}
.articleDetails{
	max-height: 80vh;
}
.stepItem{
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1;
	@media (max-width: 768px) {
		font-size: 12px;
	}
}
.stepItem::before {
	position: absolute;
	content: "";
	border-bottom: 2px solid #8b8b8b;
	width: 100%;
	top: 20px;
	left: -50%;
	z-index: 2;
}
.stepItem::after {
	position: absolute;
	content: "";
	border-bottom: 2px solid #8b8b8b;
	width: 100%;
	top: 20px;
	left: 50%;
	z-index: 2;
}
.stepItem .stepCounter {
	position: relative;
	z-index: 5;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #8b8b8b;
	margin-bottom: 6px;
}
.stepName{
	display: none;
}
.infoPopupButton{
	display: none;
	background: none;
	border: #C0C0C0 1px solid;
	color: #C0C0C0;
	width: 20px;
	height: 20px;
	border-radius: 100%;
	font-weight: bold;
}
.infoPopupButton.active{
	display: block;
}
.stepItem.active {
	font-weight: bold;
}

.stepItem.finished .stepCounter {
	background-color: #e63312;
}
.stepItem.active .stepName {
	display: block;
}
.stepItem.finished .stepName {
	display: block;
}
.stepItem.finished::after {
	position: absolute;
	content: "";
	border-bottom: 2px solid #e63312;
	width: 100%;
	top: 20px;
	left: 50%;
	z-index: 3;
}

.stepItem:first-child::before {
	content: none;
}
.stepItem:last-child::after {
	content: none;
}
.stepWrapper{
	margin-top: 20px;
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px;
}
.orderFormButton{
	text-align: center;
}
.closePopup{
	width: 30px;
	height: 30px;
	position: absolute;
	right: 5px;
	top: 5px;
}
.cartPopup{
	position: fixed;
	width: 40%;
	height: 25%;
	max-height: 90vh;
	top: 15%;
	left: 30vw;
	right: 30vw;
	background: rgb(50, 50, 50);
	padding: 10px;
	border-radius: 25px;
	border: 2.5px solid white;
	z-index: 101;
	overflow: scroll;
}
.deleteButton {
	font-weight: bold;
	color: #e63312;
	right: 50px;
	position: absolute;
}
.multyFormGrid{
	display: grid;
	grid-template-columns: 25% 25% 25% 25%;
	grid-template-areas:
	"dataSelector dataSelector dataSelector z"
	"customerAddress customerAddress customerAddress customerAddress"
	"deliveryAddress deliveryAddress invoiceAddress invoiceAddress"
	"y y y saveButton";
	/*font-size: 12px;*/
}
.formGrid{
	display: grid;
	grid-template-columns: 25% 25% 25% 25%;
	grid-template-areas:
	"dataSelector dataSelector dataSelector z"
	"customerAddress customerAddress customerAddress customerAddress"
	"y y y saveButton"
}
.customerAddress{
	grid-area: customerAddress;
}
.deliveryAddress{
	grid-area: deliveryAddress;
	display: flex;
	flex-wrap: wrap;
	height: 300px;
	/*overflow: scroll;*/
	/*overflow: visible;*/
	overflow: hidden;
	/*border: 1px inset #C0C0C0;*/
	border-radius: 15px;
	padding: 5px;
  	margin: 2.5px;
	justify-content: space-around;
}
.deliveryAddressContainer{
	margin-top:20px;
	height: 80%;
	overflow: scroll;
	display: flex;
	flex-direction: column;
	width:100%;
	/*padding-top: 24px;
	padding-bottom: 50px;*/
}
.addAddress{
	height:100px;
	width:90%;
	border: 1px inset #C0C0C0;
	border-radius: 5px;
	padding: 5px;
	margin: -5px 2.5px 10px 2.5px;	
}
.addAddress:hover{
	background-color: rgb(50, 50, 50);
}
.deliveryCard{
	grid-area:defaultCard;
}
.invoiceAddress{
	grid-area: invoiceAddress;
	display: flex;
	flex-wrap: wrap;
	height: 300px;
	/*overflow: scroll;*/
	/*overflow: visible;*/
	overflow: hidden;
	/*border: 1px inset #C0C0C0;*/
	border-radius: 15px;
	padding: 5px;
  	margin: 2.5px;
	justify-content: space-around;
}
.dataSelector{
	grid-area: dataSelector;
	margin-left: 18px;
}
.cartPopupParent{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
}
.typeOverviewData{
	font-weight: bold;
	font-size: large;
	margin-bottom: 5px;
	color:white;
}
.checkmark:before {
	content: '\2713';
	display: inline-block;
	color: #e63312;
	padding: 0 6px 0 0;
	font-size: 25px;
	font-weight: bolder;
}
.checkmark{
	float:right;
}
.checkmarkParent{
	grid-area: checkmarkParent;
	width:100%;
}
.overlay{
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 101;
	top: 0px;
	left: 0px;
	background: #0006;
}
.formPopup{
	position: relative;
	z-index: 101;
	width: 70%;
	height: 70%;
	background-color: #444;
	margin-left: auto;
	margin-right: auto;
	top: 20%;
	height: fit-content;
  	border-radius: 25px;
}
.createAdressButton{
	grid-area: createAdressButton;
	margin-left: auto;
	margin-right: auto;
}
.newAdressForm{
	padding: 15px;
}
.linkList{
	background-color: rgb(70, 70, 70);
	padding: 10px;
	border-radius: 25px;
	border: 2px inset #C0C0C0;
	margin-top: 5px;
	position: absolute;
}
.linkListItem{
	padding: 2.5px;
}
.linkListItem:hover{
	background-color: rgb(90, 90, 90);
}
/*
.linkList div:last-child{
	margin-top: 15px;
}
*/
.articleOverviewText{
	margin-left: 25px;
}

.newArtikelFormGrid{
	display: grid;
	grid-template-columns: 42.5% 5% 42.5%;
	grid-template-areas:
	"newSerialNumber		x						newArtikelDesc"
	"newArtikelNumber		x						newArtikelType" 
	"createArticleButtonDiv	createArticleButtonDiv 	createArticleButtonDiv";
	border: 2.5px inset #C0C0C0;
	border-radius: 15px;
	padding: 5px;
	margin: 2.5px;
	height: 225px;
}
.serialCBDiv{
	padding: 0px !important;
	display: flex;
  	align-items: center;
}
.newSerialNumber{
	grid-area: newSerialNumber;
}
.newArtikelNumber{
	grid-area: newArtikelNumber;
}
.newArtikelDesc{
	grid-area: newArtikelDesc;
}
.newArtikelType{
	grid-area: newArtikelType;
}
.createArticleButtonDiv {
	grid-area: createArticleButtonDiv;
	text-align: center;
}
.createArticleButton {
	width: 200px;
}
.articleFormPopup{
	position: relative;
	z-index: 101;
	width: 500px;
	height: 70%;
	background-color: #444;
	margin-left: auto;
	margin-right: auto;
	top: 20%;
	height: fit-content;
	border-radius: 25px;
}
.passwordInfoPopup{
	background: rgb(90, 90, 90);
	max-width: fit-content;
	position: absolute;
	width: 225px;
	min-height: 50px;
	max-height: fit-content;
	border-radius: 20px;
	transform: translate(0%, -100%);
	align-content: center;
	font-size: small;
	text-align: left;
	padding-left: 10px;
	padding-right: 10px;
}
.passwordInfoPopup ul{
	padding-left: 25px;
	margin-top: 0px;
}
.passwordInfoPopup p{
	margin-bottom: 0px;
}
.passwordInfoPopupParrent{
	position: relative;
	transform: translate(0%, -50px);
}
.border1S{
	border: 1px Solid #C0C0C0;
}
.border1SChilds{
	border: 1px Solid #C0C0C0;
}
.border1SChilds:first-child{
	border: 1px Solid #C0C0C0;
}
.noBorderSpacing{
	border-spacing: 0px;
}
.repImage{
	width: 95%;
	height: 200px;
}
.noticeText{
	font-size: x-small;
}
.bold{
	font-weight: bold;
}
.bottomText{
	align-content: end;
}
.selectedIMG{
	width: 15px;
	padding-left: 5px;
	height: 10px;
}
.selectedOverviewGrid{
	padding: 10px;
	display: grid;
	grid-template-columns: 25% 25% 25% 25%;
	grid-template-areas:
	"selectedOverviewULElement	selectedOverviewFrontElement	selectedOverviewBackElement	selectedOverviewFInfoElement"
	"selectedOverviewULElement	selectedOverviewFrontElement	selectedOverviewBackElement	selectedOverviewRepairInputElement"
	"selectedOverviewCInfoElement	selectedOverviewCInfoElement	selectedOverviewCInfoElement	selectedOverviewButtonElement";
}
.selectedOverviewULElement{
	grid-area: selectedOverviewULElement;
}
.selectedOverviewFrontElement{
	grid-area: selectedOverviewFrontElement;
}
.selectedOverviewBackElement{
	grid-area: selectedOverviewBackElement;
}
.selectedOverviewFInfoElement{
	grid-area: selectedOverviewFInfoElement;
}
.selectedOverviewCInfoElement{
	grid-area: selectedOverviewCInfoElement;
}
.selectedOverviewButtonElement{
	grid-area: selectedOverviewButtonElement;
}
.repInputHeader{
	margin-bottom: 5px;
}
.repInputDiv{
	grid-area: selectedOverviewRepairInputElement;
	align-content: end;
}
.repInput{
	border-radius: 10px;
	border: 1px solid #C0C0C0;
	background-color: #1e1e1e;
	color: #C0C0C0;
	height: 26px;
	padding: 0px;
	margin: 0px;
	width: 100%;
}
.articleFormHolder{
	display: grid;
	grid-template-columns: 50% 50%;
	grid-template-areas:
	"configHeaderDiv	configHeaderDiv"
	"searchDiv	searchDiv"
	"articleDiv	articleDiv"
	"costReleaseDiv	costReleaseDiv"
	"overviewDiv	overviewDiv"
	"previousButton	nextButton";
}
.configHeaderDiv{
	grid-area: configHeaderDiv;
	display: flex;
	align-items: center;
	margin-left: 17px;
	margin-bottom: 10px;
	color: white;
}
.searchDiv{
	grid-area: searchDiv;
	display: grid;
	grid-template-columns: 15% 15% 15% 40% 15%;
	grid-template-areas:
	"searchInput	searchSelect	createButton	x	resetHelp";
	column-gap: 0%;
	margin-top: 25px;
	margin-bottom: 15px;
}
.resetHelp{
	grid-area: resetHelp;
	width: 100%;
	background: none;
	border: none;
	text-align: end;
	color: #C0C0C0;
	display: flex;
	align-items: center;
	
}
.resetQuestionMark{
	border: 1px solid #C0C0C0;
	width: 16px;
	height: 16px;
	text-align: center;
	border-radius: 10px;
	margin-right: 5px;
	filter: invert();
	background-color: rgb(70,70,70);
}
.articleDiv{
	grid-area: articleDiv;
} 
.costReleaseDiv{
	grid-area: costReleaseDiv;
	margin-bottom: 50px;
	font-weight: normal !important;
	font-size: medium !important;
	position: relative;
	color:#C0C0C0;
	margin-top: 15px;
}
.resetButton{
	position: absolute;
	top: 0px;
	right: 0px;
	width: 200px;
	height: 50px;
}
.costReleaseHeader{
	margin-bottom: 15px;
}
.overviewDiv{
	grid-area: overviewDiv;
	margin-bottom: 25px;
}
.overviewHeader{
	margin-bottom: 15px;
}
.searchDiv input{
	border-radius: 10px;
	border: 1px solid #C0C0C0;
	background-color: #1e1e1e;
	color: #C0C0C0;
	height: 26px;
	padding: 0px;
	margin: 0px;
}
.searchDiv select{
	border-radius: 10px;
	border: 1px solid #C0C0C0;
	background-color: #1e1e1e;
	color: #C0C0C0;
	height: 30px;
	padding: 0px;
	margin: 0px;
	margin-left: 10px;
  	margin-right: 10px;
}
.serialCB{
	width: fit-content !important;
	display: inline !important;
}
.inputs{
	border-radius: 10px;
	border: 1px solid #C0C0C0;
	background-color: #1e1e1e;
	color: #C0C0C0;
	height: 30px;
	padding: 0px;
	margin: 0px;
}
.searchInput{
	grid-area: searchInput;

}
.searchType{
	grid-area: searchSelect;

}
.addNewArticle{
	grid-area: createButton;
	width: 100%;
	background: none;
	border: none;
	text-align: end;
	color: #C0C0C0;
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
}
.addNewArticle div{
	height: 100%;
	align-content: center;
}
.plus{
	color: #e63312;
	margin-left: 2.5px;
	font-size: large;
}
.icons{
	width: 16px;
	height: 16px;
}
.headerDiv{
	grid-area: headerDiv;
	display: flex;
	align-items: center;
}
.headerLogo{
	width: 24px;
	height: 24px;
}
.homeHeaderDiv{
	color:white;
}
.addressLogo{
	float:left;
}
.topNavbar{
	display: flex;
	height: 80px;
	position: fixed;
	width: 100%;
	z-index: 1000;
	top: 0px;
	left: 0px;
	right: 0px;
	align-items: center;
	justify-content: center;
	column-gap: 30px;
	background: #1e1e1e;
	border-bottom: 1px solid #C0C0C055;
}
.topNavbar a{
	color: white !important;
	text-decoration: none;
	font-weight: bold;
}
.topNavbar a:visited{
	color: inherit;
}
.topNavbar a:hover{
	text-decoration: underline;
	text-decoration-color: #e63312;
}
.subNavbar{
	display: flex;
	height: 35px;
	position: fixed;
	width: 100%;
	z-index: 1000;
	top: 81px;
	left: 0px;
	right: 0px;
	align-items: center;
	justify-content: center;
	column-gap: 30px;
	background: #1e1e1e;
	border-bottom: 1px solid #C0C0C055;
}
.subNavbar a{
	color: white !important;
	text-decoration: none;
	font-weight: bold;
}
.subNavbar a:visited{
	color: inherit;
}
.subNavbar a:hover{
	text-decoration: underline;
	text-decoration-color: #e63312;
}
.mainContent{
	top: 110px;
	position: relative;
  	width: 80%;
	margin-left: auto;
	margin-right: auto;
}
.emptyHeaderElement{
	width: 10px;
}
.mainFormContent{
	top: 80px;
	position: relative;
  	width: 65%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
}
.headerText{
	text-transform: uppercase;
	font-weight: bold;
	color:white;
}
.headerText2{
	/*text-transform: uppercase;*/
	/*display: block;*/
	font-weight: bold;
	font-size: xx-large;
	margin-top: 20px;

}
.confirmButton{
	margin-left: 15px;
	margin-right: 15px;
}
.finishingPopUp{
	text-align: justify;
	white-space: pre-line;
}

.chainDiv{
    position: fixed;
    top: 115px;
    background-color: rgb(67, 67, 67);
    border: 3px solid rgb(192, 192, 192);
    border-radius: 25px;
    padding: 25px;
    padding-top: 10px;
    width: 500px;
    margin-left: 10px;
    margin-top: 25px;
}
.chainTrackingStatuses{
	text-align: center;
	width: 50%;
	position: relative;
	display: block;
}
.chainTrackingStatuses .isCompleted{
	display: block;
	position: relative;
	border-radius: 50%;
	height: 20px;
	width: 20px;
	border: 0px solid #AFAFAF;
	background-color: #C0C0C0;
	margin: 0 auto;
	transition: background 0.25s linear;
	-webkit-transition: background 0.25s linear;
	z-index: 2;
}
.chainTrackingStatuses::before {
	content: '';
	display: block;
	height: 3px;
	width: 100%;
	background-color: #C0C0C0;
	top: 8.5px;
	position: absolute;
	left: -50%;
	z-index: 0;
}
.chainTrackingStatuses.completed .isCompleted{
	border-color: #FFFFFF;
	border-width: 0px;
	background-color: #FFFFFF;
}
.chainTrackingStatuses.completed .isCompleted:after {
	border-color: #13751e;
	border-width: 0px 2px 2px 0;
	width: 3px;
	left: 7px;
	opacity: 1;
}
.chainTrackingStatuses .isCompleted:after {
	display: block;
	position: absolute;
	content: '';
	height: 14px;
	width: 7px;
	top: -2px;
	bottom: 0;
	left: 5px;
	margin: auto 0;
	border: 0px solid #AFAFAF;
	border-width: 0px 2px 2px 0;
	transform: rotate(45deg);
	opacity: 0;
}
.chainTrackingStatuses p {
	color: #A4A4A4;
	font-size: 16px;
	margin-top: 8px;
	margin-bottom: 0;
	line-height: 20px;
}
.chainTrackingStatuses p span {
    font-size: 14px;
}
.chainTrackingStatuses.completed p{
    color: #C0C0C0;
}
.chainTrackingStatuses:first-child:before{
    display: none;
}
.chainTrackingStatuses.completed:before{
    background-color: #FFFFFF;
}


.chainTracking{
	text-align: center;
	width: 33.33%;
	position: relative;
	display: block;
}
.chainTracking .isCompleted{
	display: block;
	position: relative;
	border-radius: 50%;
	height: 30px;
	width: 30px;
	border: 0px solid #AFAFAF;
	background-color: #C0C0C0;
	margin: 0 auto;
	transition: background 0.25s linear;
	-webkit-transition: background 0.25s linear;
	z-index: 2;
}
.chainTracking.completed .isCompleted{
	border-color: #FFFFFF;
	border-width: 0px;
	background-color: #FFFFFF;
}
.chainTracking.completed .isCompleted:after {
	border-color: #13751e;
	border-width: 0px 3px 3px 0;
	width: 7px;
	left: 11px;
	opacity: 1;
}
.chainTracking .isCompleted:after {
	display: block;
	position: absolute;
	content: '';
	height: 14px;
	width: 7px;
	top: -2px;
	bottom: 0;
	left: 5px;
	margin: auto 0;
	border: 0px solid #AFAFAF;
	border-width: 0px 2px 2px 0;
	transform: rotate(45deg);
	opacity: 0;
}
.chainTracking p {
	color: #A4A4A4;
	font-size: 16px;
	margin-top: 8px;
	margin-bottom: 0;
	line-height: 20px;
}
.chainTracking p span {
    font-size: 14px;
}
.chainTracking.completed p{
    color: #C0C0C0;
}
.chainTracking::before {
	content: '';
	display: block;
	height: 3px;
	width: 100%;
	background-color: #C0C0C0;
	top: 13px;
	position: absolute;
	left: -50%;
	z-index: 0;
}
.chainTracking:first-child:before{
    display: none;
}
.chainTracking.completed:before{
    background-color: #FFFFFF;
}
.chainOverviewDiv{
    padding: 10px;
    display: flex;
    justify-content: center;
}
.chainMainDivStatuses{
	width: 45%;
}
.chainMainDiv{
    margin: 5px;
	margin-bottom: 50px;
}
.chainHeaderPStatuses{
    text-align: center;
    width: fit-content;
    margin-left: 0px;
    margin-left: 15px;
    font-weight: bold;
}
.chainHeaderPStatuses span:first-child{
	margin-right: 15px;
	color: white;
}
.chainHeaderPStatuses span{
	font-size: 12px;
}
.chainHeaderP{
    text-align: center;
    width: fit-content;
    margin-left: 15px;
    font-size: large;
    font-weight: bold;
}
.chainHeaderP span:first-child{
	margin-right: 15px;
	font-size: larger;
	color: white;
}
.chainHeaderP span{
	font-size: 12px;
}
.bold{
    font-weight: bolder;
}
.noTopSpacing{
    line-height: 0.75 !important;
	font-size: 12px !important;
}
.myUserMainHeaderDiv{
	margin-top: 50px;
	/*display: flex;*/
}
.secondHeader{
	font-size: x-large;
	font-weight: bold;
	margin-bottom: 15px;
	color: white;
}
.userOverviewTable{
	border: solid 1px rgb(90,90,90);
	border-radius: 5px;
	border-spacing: 0px;
	width: 50%;
	max-width: 50%;
	min-width: fit-content;
	text-align: center;
}
.userOverviewRow th, .userOverviewRow td {
	border: solid 1px rgb(90,90,90);
}
.userOverviewRow:first-child th:first-child{
	border-top-left-radius: 5px;
}
.userOverviewRow:first-child th:last-child{
	border-top-right-radius: 5px;
}
.userOverviewRow:last-child td:first-child{
	border-bottom-left-radius: 5px;
}
.userOverviewRow:last-child td:last-child{
	border-bottom-right-radius: 5px;
}
.serviceSpan:first-child{
	border: none;
}
.serviceSpan{
	border-left:solid 1px #C0C0C0;
	padding-left: 3px;
	padding-right: 3px;
}
.userOrderOverview{
	border: solid 1px rgb(90,90,90);
	border-radius: 5px;
	border-spacing: 0px;
	width: 35%;
	max-width: 35%;
	min-width: fit-content;
	position: relative;
	padding: 15px;
}
.serviceStatusGridElement{
	display: flex;
	justify-content: space-evenly;
}
.kvGridElement{
	margin-bottom: 5px;
}
.orderWindows{
	display: flex;
	height: 350px;
	gap: 50px;
	justify-content: space-around;
	padding-bottom: 50px;
}
.orderWindowTableDiv{
	overflow: scroll;
	overflow-x: scroll;
	display: block;
	overflow-x: hidden
}
.userOverviewRow th{
	position: sticky;
	background: #464646;
	top: 0px;
}
.articleCounterGridElement{
	position: absolute;
	bottom: 15px;
	right: 15px;
}
.dateGridElement{
	position: absolute;
	bottom: 15px;
}
.orderNumberGridElement{
	font-weight: bold;
	font-size: larger;
	margin-bottom: 10px;
}
.articleDescGridElement{
	margin-bottom: 15px;
}
.articleRepairGridElement{
	margin-bottom: 15px;
}
.serviceGridElement{
	position: absolute;
	top: 15px;
	right: 15px;
	font-size: small;
}
.fullServicesDiv{
	display: flex;
}
.fullServicesDiv div:not(:first-child)::before{
	content: ', '; 
}
.userArticleOverviewData{
	border: solid 1px rgb(90,90,90);
}
.userOverviewRow:first-child th:first-child{
	border-top-left-radius: 5px;
}
.userOverviewRow:first-child th:last-child{
	border-top-right-radius: 5px;
}
.userOverviewRow:last-child td:first-child{
	border-bottom-left-radius: 5px;
}
.userOverviewRow:last-child td:last-child{
	border-bottom-right-radius: 5px;
}
.userArticleOverviewTable{
	border: solid 1px rgb(90,90,90);
	border-radius: 5px;
	border-spacing: 0px;
	width: 50%;
	max-width: 50%;
	min-width: fit-content;
	text-align: center;
	margin-top: 50px;
	margin-left: auto;
	margin-right: auto;
}
.articleTableDiv{
	overflow: scroll;
	display: block;
	overflow-x: hidden;
	height: 70vh;
}
.addressesContainer{
	margin-top: 30px;
	display:flex;
	align-items: flex-start;
}
.addressHeader, .deliveryHeader, .invoiceHeader{ 
	color:white;
	width: 100%;
	margin-right: 20px;
}
.myUserAddressDataField{
	color: #C0C0C0;
	font-size: 12px;
	margin-top: 20px;
	justify-content: space-evenly;
}
.myUserAddressDataField div{
	width: 350px;
}
.inArticleParagraph{
	font-size: 12px !important;
}
.resetImage{
	width: 20px;
	height: 20px;
}

.speechPopupParent {
  position: absolute;
  z-index: 9999;
  color: #000;
  height: 0px;
}
.speechPopup {
  transform: translate(0px, -105%);
  position: relative;
  padding: 14px 18px;
  border-radius: 20px;
  background: #C0C0C0cc;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  max-width: 280px;
}

/* Tail */
.speechPopupTail {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 24px;
  width: 12px;
  height: 12px;
  background: inherit;
  transform: rotate(45deg);
}
.cbDiv{
	display: flex;
	align-items: center;
	font-size: 11px;
	margin-top: 10px;
}
.TutB{
	right: 0%;
}
.TutC{
	transform: translate(0px, -25%);
}
.carriereDeselect{
	color: #e63312;
	font-weight: bold;
	font-size: larger;
	margin-left: 5px;
	bottom: 5px;
	position: relative;
}
.removeAricleButton{
	color: #e63312;
	font-weight: bold;
	font-size: larger;
	margin-right: 15px;
	vertical-align: middle;
}
.authFormFooter{
	width: 85%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 25px;
	display: flex;
	justify-content: space-between;
}
.authLink{
	text-decoration: underline;
}
.authLink:hover{

}
.passwordVisibilityEye{
	width: 32px;
	position: absolute;
	margin-left: -36px;
}