/* CSS Document */
div.productBox {
	/*
	text-align:center;
	margin:auto;
	*/
}

textarea {
	font-family: inherit;
}

#imageContainer {
float:right;		
}

.zusatzInfo2 p.stammkunde input {
	float:none;	
}
.gesamtrabatt {
	text-align:right;	
}

.wkInputButton {
	cursor:pointer;
}

.cleardiv {
	clear:left;
}
.mediumProductSpan {
	float:right;	
}
.outofdutytext {
	color:black;
	background-color:white;	
}
input.invalid{
	color: white;
	background-color: #c00 !important;
	background-image:none;
}

#textMaintenanceTable {
	width: 100%;
}

#textMaintenanceTable #editedText {
	width:100%;
	height: 100px;
}

#textMaintenanceModeEditView {
	z-index: 3;
    position: fixed;
    background-color: #FFF;
    top: calc(50% - 120px);
    left: calc(50% - 200px);
    border: 5px solid gray;
    border-radius: 10px;
    width: 400px;
    padding: 15px;
}

td#textMaintenanceColEditTextSave #textMaintenanceBtnEditTextSave,  td#textMaintenanceColEditTextAbort #textMaintenanceBtnEditTextAbort {
	color: white;
    border-width: 0px;
    outline: 0px;
    margin: 0px;
    border-radius: 10px;
    padding: 8px 10px;
    cursor: pointer;
}

td#textMaintenanceColEditTextSave #textMaintenanceBtnEditTextSave {
	background-color: #5cb85c;
}

td#textMaintenanceColEditTextAbort {
	text-align: right;
}

td#textMaintenanceColEditTextAbort #textMaintenanceBtnEditTextAbort {
	background-color: #c9302c;
}
.viewToast {
	visibility: hidden; 
	min-width: 250px; 
	margin-left: -125px; /* Divide value of min-width by 2 */
	background-color: #333; 
	color: #fff; 
	border-radius: 2px; 
	padding: 16px;
	position: fixed; 
	z-index: 2; 
	left: 50%;
	bottom: 30px; 
	display:flex;
	gap: 10px;
	justify-content: center;
}
.viewToast > div{
	display: flex;
	align-items: center;
	
	&:first-child{
		font-size: 1.5em;
	}
}
.viewToast.viewToastSuccess{
	color: #fff;
	background-color: #198754;
	border-color: #198754;
}
.viewToast.viewToastDanger{
	color: #fff;
	background-color: #dc3545;
	border-color: #dc3545;
}
.viewToast.viewToastWarning{
	background-color: #fbc02d;
	border-color: #f9a825;
	color: #664d03;
}
.viewToast.viewToast-lg{
	width: 620px;
	margin-left: -310px;
}
.viewToast.show {
	visibility: visible; /* Show the snackbar */
	/* Add animation: Take 0.5 seconds to fade in and out the snackbar.
	However, delay the fade out process for 2.5 seconds */
	-webkit-animation: slide-up 0.5s, fadeout 0.5s 9.5s;
	animation: slide-up 0.5s, fadeout 0.5s 9.5s;
}
@media screen and (max-width: 620px) {
	.viewToast.viewToast-lg{
		width: 100vw;
		margin-left: calc(100vw / -2)
	}
}
@media screen and (max-width: 400px) {
	.viewToast{
		width: 100vw;
		margin-left: calc(100vw / -2)
	}
}

.d-flex{
	display:flex;
}
.floatingLabel {
	position: relative;
	margin-top: 20px;
}
.floatingLabel input{
	font-size: 1.2em;
	width: 100%;
	padding: 4px 0;
	padding-right: 30px;
	color: #333;
	border: none;
	border-bottom: 2px solid #b3b0b0;
	transition: border-color 250ms;
	background-color: transparent;
	border-radius: 0;
}	
.floatingLabel input:focus {
	outline: none;
	border-bottom-color: #777;
}
.floatingLabel input::placeholder {
	color: transparent;
}
.floatingLabel input::-webkit-contacts-auto-fill-button {
	visibility: hidden;
	pointer-events: none;
	position: absolute;
}
.floatingLabel input:focus + .label,
.floatingLabel input:not(:placeholder-shown) + .label {
	transform: translateY(-103%) scale(0.95);
}
.floatingLabel .label {
	position: absolute;
	top: 8px;
	left: 0;
	color: #43454e;
	pointer-events: none;
	transform-origin: left center;
	transition: transform 250ms;
}
.floatingLabel .clear {
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	position: absolute;
	top: -2px;
	right: -7px; /* To visually align with inputs right edge*/
	/*transform: translateY(-50%);*/
	background: none;
	border: none;
	border-radius: 50%;
	height: 30px;
	width: 30px;
	color: #a9a8a8;
	transition: color 250ms;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30px;
}
.floatingLabel .clear:hover,
.floatingLabel .clear:focus {
	color: #ee0707;
}
.floatingLabel input:placeholder-shown + .label + .clear {
  display: none;
}

.editUserInfoForm{
	position: relative;
}
.editUserInfoForm .loadingOverlay {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background-color: #f5f5f5;
	color: #333;
	opacity: 0.8;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;	
}
.editUserInfoForm .loadingOverlay img{
	width: 80px;
}

#articleFeatures {
	position: relative;
}

#articleFeatures .loadingOverlay {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background-color: #f5f5f5;
	color: #333;
	opacity: 0.8;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
}

#articleFeatures .loadingOverlay img {
	width: 80px;
}

#main > .loadingOverlay {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background-color: #f5f5f5;
	color: #333;
	opacity: 0.8;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
}

#main > .loadingOverlay > div{
	position: fixed;
    top: 50%;
    left: 50%;
    z-index: 100;
}
#main > .loadingOverlay img {
	width: 80px;
}
	
.privacyInfoBox{
    color: #856404;
    background-color: #fff3cd;
    padding: 10px;
    margin-top: 5px;
    margin-bottom: 10px;
	border: 1px solid #ffeeba;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
.privacyInfoBox a {
	color: #23b9ce !important;
	text-decoration: underline;
}	

#payConfirmTopBanner{
	background-color: #ffe0b2;
    padding: 10px;
    box-shadow: 0 0 4px 1px #ff5722;
	display: flex;
	margin-top: 10px;
    margin-bottom: 10px;
}
#payConfirmTopBanner > div{
	margin-top: auto;
    margin-bottom: auto;
}
#payConfirmTopBanner .bannerIconWrapper{
    padding-right: 8px;	
}
#payConfirmTopBanner .bannerIconWrapper span{
	color: #e65100;
    font-size: 1.5em;
}

.paymentInformation.paid{
	justify-content: center;
	margin-bottom: 10px;
}
.paymentInformation.paid > div{
	background-color: #c8e6c9;
    padding: 10px;
    box-shadow: 0 0 9px 1px #43a047;
}
.paymentInformation.paid > div > div:first-child{
	width: 80px;
    margin-top: auto;
    margin-bottom: auto;
    margin-right: 10px;
	min-width: 10%;
}

.paymentRequirementToOrderHint {
	background-color: #ffe0b2;
    padding: 10px;
    box-shadow: 0 0 4px 1px #ff5722;
	display: flex;
	margin-bottom: 20px;
}
.paymentRequirementToOrderHint > div{
	margin-top: auto;
    margin-bottom: auto;
}
.paymentRequirementToOrderHint > div:first-child{
    padding-right: 8px;	
}
.paymentRequirementToOrderHint > div:first-child span{
	color: #e65100;
    font-size: 1.5em;
}

.shoppingCartTable td.PositionGrouping {
	text-align: center;
}

.tooltip {
	background-color: #ffa;
	border: 1px solid #cc9;
	padding: 3px;
	font-size: 13px;
	box-shadow: 2px 2px 11px #666;
}

.shortMessageWrapper{
	background-color: #FFE373;
}

.shortMessage{
	max-width:80%;
	min-width:79%;
	text-align:right;
	display:inline-block;
}

.shortMessageControlls{
	display:inline-blocK;
	margin-left:10px;
}

.gpsrContent {
	overflow: hidden;
	transition: max-height 0.15s ease-out;
}
.expandable {
	cursor: pointer;
	border-bottom: 1px solid lightgray;
	margin-top: .8vw;
}

wishlistDetails .wishlistOrderActionUnavailableInfo{
    display: flex;
    flex-direction: column;
    padding: 15px;
    background-color: #ffe082;
    font-size: 1.2em;
    border-radius: 5px;
    margin-left: 5%;
    margin-right: 5%;
}
#wishlistDetails .wishlistOrderActionUnavailableInfo > div:last-child{
	text-align: center;
	justify-content: center;
}
#wishlistDetails .wishlistOrderActionUnavailableInfo .wishlistLoginBtnContainer a{
	font-weight: bold;
	padding: 8px 10px;
}
.wishlistOrderActionUnavailableInfo .wishlistLoginBtnContainer a{
	padding: 8px 10px;
	font-weight: bold;
	color: white;
	margin-top:5px;
	background-color: #234da0;
	border-radius: 5px;
}

@media only screen and (max-width: 1130px) {
	.userInfoPage .contactPersonAreaWrapper .contactPersonTable th.cpDepartment,
	.userInfoPage .contactPersonAreaWrapper .contactPersonTable td.cpDepartment {
		display: none;
	}
}

@media only screen and (max-width: 960px) {
	.userInfoPage .contactPersonAreaWrapper .contactPersonTable th.cpPhone,
	.userInfoPage .contactPersonAreaWrapper .contactPersonTable td.cpPhone {
		display: none;
	}
}

@media only screen and (max-width: 555px) {
	.userInfoPage .contactPersonAreaWrapper .contactPersonTable th.cpMobilePhone,
	.userInfoPage .contactPersonAreaWrapper .contactPersonTable td.cpMobilePhone {
		display: none;
	}
}