/* Farben. */
:root {
	--c-white: #FFFFFF;
	--c-black: #000000;
	--c-sonepar-dark-blue: #27348B;		/* Primary 1, Tiles, Illus, BGs */
	--c-sonepar-light-blue: #009ee3;	/* Primary 2, Tiles, Links */
	--c-sonepar-light-blue-10: #e5f5fc;
	--c-sonepar-blue: #009ee3;			/* Primary & Secondary Buttons */
	--c-sonepar-blue-hover: #31afe6;	/* Primary & Secondary Buttons onHover */
	--c-sonepar-purple: #683E82;		/* Secondary 1, Tiles, Highlights */
	--c-sonepar-red: #cd3a45;			/* Secondary 2, Tiles, Highlights */
	--c-sonepar-darkgrey: #272a37;		/* Body-Text-Color */
	--c-sonepar-darkgrey-80: #52555f;
	--c-sonepar-darkgrey-60: #7d7f87;
	--c-sonepar-darkgrey-40: #a9aaaf;
	--c-sonepar-darkgrey-20: #d4d4d7;	/* Disabled */
	--c-sonepar-darkgrey-3: #f4f4f4;	/* Inputfield */
	--c-sonepar-orange: #ee7203;		/* On Hover */
	--c-sonepar-orange-80: #f18e35;		/* Primary 3, Shop-CTA Initial */
	--c-sonepar-orange-20: #fce3cd;		/* Disabled */
	--c-sonepar-green: #047d5c;
	--c-sonepar-yellow: #f3c200;
}

/* Farben und Farbüberschreibungen */
.red {
	color: #cd3a45;
	color: var(--c-sonepar-red);
}

.green {
	color: #047d5c;
	color: var(--c-sonepar-green);
}

.text-primary {
	color: #009ee3!important;
	color: var(--c-sonepar-blue)!important;
}

.text-white {
	color: #ffffff;
}

text-grey {
	color: #7d7f87ff;
	color: var(--c-sonepar-darkgrey-60);
}

/* Schriften. */
@font-face {
	font-family: "Roboto";
	font-weight: 300;
	font-style: normal;
	src: url("../fonts/Roboto-Light.ttf");
}

@font-face {
	font-family: "Roboto";
	font-weight: 400;
	font-style: normal;
	src: url("../fonts/Roboto-Regular.ttf");
}

@font-face {
	font-family: "Roboto";
	font-weight: 500;
	font-style: normal;
	src: url("../fonts/Roboto-Medium.ttf");
}



/* Spacing Helpers and Overwrites */
.margin-top-40-growing {
	margin-top: 40px;
}

.margin-top-30 {
	margin-top: 30px;
}

/* Basic styles */
html {
	position: relative;
	min-height: 100%;
}

body {
	color: #272a37;
	color: var(--c-sonepar-darkgrey);
	font-family: "Roboto", Arial, sans-serif;
	font-size: 14px;
	line-height: 20px;
	font-weight: 400;
}

hr {
	border: 2px solid #F4F4F4;
	border: 2px solid var(--c-sonepar-darkgrey-3);
}

@media (min-width: 720px) {
	body {
		font-size: 17px;
		line-height: 24px;
	}
}

@media (min-width: 1440px) {
	.margin-top-40-growing {
		margin-top: 60px;
	}
}

/** Überschriften */
h1 {
	color: #272a37;
	color: var(--c-sonepar-darkgrey);
	font-family: "Roboto", Arial, sans-serif;
	font-size: 24px;
	font-weight: 300;
	line-height: 32px;
	margin-bottom: 20px;
	font-weight: 300;
}

h1 i {
	font-size: 28px;
	height: 37px;
	vertical-align: middle;
}

h2 {
	color: #272a37;
	color: var(--c-sonepar-darkgrey);
	font-family: "Roboto", Arial, sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 24px;
	margin-bottom: 5px;
}

h3 {
	color: #272a37;
	color: var(--c-sonepar-darkgrey);
	font-family: "Roboto", Arial, sans-serif;
	font-size: 16px;
	line-height: 20px;
}

h3.sonepar-teaser {
	color: #009ee3;
	color: var(--c-sonepar-light-blue);
	font-family: "Roboto", Arial, sans-serif;
	font-size: 22px;
	line-height: 33px;
	font-weight: 400;
}

@media (min-width: 720px) {
	h1 {
		font-size: 36px;
		line-height: 44px;
	}

	h2 {
		font-size: 24px;
		line-height: 32px;
		margin-bottom: 10px;
	}

	h3 {
		color: #272a37;
		color: var(--c-sonepar-darkgrey);
		font-family: "Roboto", Arial, sans-serif;
		font-size: 20px;
		line-height: 20px;
		font-weight: 300;
	}
}

@media (min-width: 1280px) {
	h1 {
		margin-bottom: 30px;
	}
}

/** Texte & Links */
.sonepar-small {
	color: #272a37;
	color: var(--c-sonepar-darkgrey);
	font-size: 14px;
	line-height: 18px;
}

a, .sonepar-text-link {
	color: #009ee3;
	color: var(--c-sonepar-light-blue);
	border-bottom: 2px solid;
	padding-bottom: 2px;
	font-weight: 500;
}

a:hover, .sonepar-text-link:hover {
	color: #009ee3;
	color: var(--c-sonepar-light-blue);
	border-bottom: 3px solid;
	text-decoration: none;
}

.sonepar-logo-link, .sonepar-logo-link:hover {
	border-bottom: none;
}

a.sonepar-back-link {
	color: #7D7F87;
	color: var(--c-sonepar-darkgrey-60);
	border-bottom: none;
}

a .fa-arrow-right,
.sonepar-text-link .fa-arrow-right {
	margin-right: 10px;
}

.sonepar-text-link {
	cursor: pointer;
}

.sonepar-link-spearator {
	margin: 0 10px;
}

.disabled {
	color: #d4d4d7;
	color: var(--c-sonepar-darkgrey-20);
}

/** Container */
@media (min-width: 1280px) {
	#main-container {
		min-height: 100vh;
	}
}

/** Content */
#content-main-column header {
	margin-bottom: 40px;
}

#content-main-column ul {
	margin-block-start: 0;
	margin-block-end: 0;
	padding-inline-start: 0;
	list-style: none;
}

#content-main-column ul li::before {
	content: "• ";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
	color: var(--c-sonepar-blue);
	color: #009ee3;
}

#content-main-column ul li>ul {
	margin-left: 1rem;
}

#logo-notagline {
	height: 1.6rem;
}

#logo-website {
	height: 3rem;
}

#content-main-column {
	padding: 20px 20px 30px 20px;
}

@media (min-width: 720px) {
	#content-main-column {
		padding: 30px 24px 40px 24px;
	}
}

@media (min-width: 1280px) {
	#content-main-column {
		padding: 40px 72px 60px 72px;
	}
}

@media (min-width: 1440px) {
	#content-main-column {
		padding: 60px 80px 60px 80px;
	}

	#content-main-column header {
		margin-bottom: 60px;
	}
}

/* Registration-Teaser */
#sonepar-registration-teaser-wrapper {
	height: 500px;
	background-image: url('../img/registrationteaser-bg-sm.jpg');
	background-position: center;
	position: relative;
}

#sonepar-registration-teaser-textbox {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 80%;
	background-color: var(--c-sonepar-blue);
	background-color: #009ee3;
	color: white;
	padding: 20px;
}

#sonepar-registration-teaser-textbox ul {
	list-style-type: none;
	padding-inline-start: 0;
	margin-top: 20px;
	margin-bottom: 20px;
}

#sonepar-registration-teaser-textbox li {
	margin-bottom: 9px;
}

#sonepar-registration-teaser-textbox ul li::before {
	content: "\f058";
	font-family: "Font Awesome 5 Free";
	margin-right: 12px;
	font-size: 20px;
}


@media (min-width: 720px) {
	#sonepar-registration-teaser-wrapper {
		height: 600px;
		background-image: url('../img/registrationteaser-bg-md.jpg');
		background-size: cover;
	}

	#sonepar-registration-teaser-textbox {
		padding: 40px;
	}

	#sonepar-registration-teaser-textbox ul {
		margin-top: 30px;
		margin-bottom: 30px;
	}
}

@media (min-width: 1280px) {
	#sonepar-registration-teaser-wrapper {
		/*height: 720px;*/
		height: 100vh;
		position: sticky;
		top: 0;
		background-image: url('../img/registrationteaser-bg-lg.jpg');
	}

	#sonepar-registration-teaser-textbox {
		width: 60%;
	}
}

@media (min-width: 1440px) {
	#sonepar-registration-teaser-wrapper {
		height: 100vh;
		background-image: url('../img/registrationteaser-bg-xl.jpg');
	}
}

	/* Footer */
footer.sonepar-footer {
	color: #7d7f87ff;
	color: var(--c-sonepar-darkgrey-60);
	background: #f4f4f4 0 0 no-repeat padding-box;
	background: var(--c-sonepar-darkgrey-3) 0 0 no-repeat padding-box;
	width: 100%;
	font-size: 12px;
	min-height: 70px;
	padding: 20px;
	position: absolute;
	font-weight: 400;
}

footer.sonepar-footer a {
	color: #7d7f87ff;
	color: var(--c-sonepar-darkgrey-60);
	border-bottom: none;
}

@media (min-width: 720px) {
	footer.sonepar-footer {
		font-size: 14px;
		padding: 20px 24px;
	}
}

@media (min-width: 1280px) {
	footer.sonepar-footer {
		padding: 20px 72px;
	}
}

@media (min-width: 1440px) {
	footer.sonepar-footer {
		padding: 20px 80px;
	}
}

/** Formulare. */

.sonepar-form {
	width: 100%;
}

.sonepar-form#registrationStep2 .form-panel {
	margin-left: 35px;
}

/**
 * Formulare - Formular-Felder.
 */
.sonepar-form .sonepar-input:not([type='checkbox']),
.sonepar-form select {
	border: 2px solid #A9AAAF;
	border: 2px solid var(--c-sonepar-darkgrey-40);
	border-radius: 5px;
	color: #7d7f87ff;
	color: var(--c-sonepar-darkgrey-60);
	font-family: "FiraSans-Regular", Arial, sans-serif;
	font-size: 16px;
	line-height: 20px;
	height: 50px !important;
	line-height: 32px;
	margin-top: 10px;
	padding: 0px 14px 0 20px;
	width: 100%;
}

.sonepar-form .sonepar-input.disabled {
	background-color: #F4F4F4;
	background-color: var(--c-sonepar-darkgrey-3);
}

.sonepar-form .sonepar-input:focus,
.sonepar-form select:focus
{
	border-color: #009ee3;
	border-color: var(--c-sonepar-light-blue);
}

.sonepar-form select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	-o-appearance: none;
	background: none;
}

.sonepar-form select::-ms-expand {
	display: none;
}

/** Formulare - Select Chevron. */
.sonepar-form select + i.s-icon {
	background-color: #ffffff;
	background-color: var(--c-white);
	float: right;
	margin-top: -32px;
	margin-right: 20px;
	pointer-events: none;
	position: relative;
}

/** Formulare - Icon - Passwort zeigen/verbergen. */
.sonepar-form .sonepar-password .sonepar-pw-eye {
	color: #A9AAAF;
	color: var(--c-sonepar-darkgrey-40);
	cursor: pointer;
	padding: 28px 20px;
	position: absolute;
	right: 0;
	top: -10px;
}

.sonepar-form .sonepar-password .sonepar-input:focus ~ .sonepar-pw-eye {
	color: #009ee3;
	color: var(--c-sonepar-light-blue);
}

/**
 * Formulare - Floating Label.
 */
.sonepar-floating-label {
	position: relative;
	margin-bottom: 15px;
}

.sonepar-floating-label .sonepar-label {
	color: #7D7F87;
	color: var(--c-sonepar-darkgrey-60);
	cursor: text;
	display: block;
	font-size: 16px;
	line-height: 20px;
	left: 0;
	margin-bottom: 0;
	padding: 15px 22px;
	pointer-events: none;
	position: absolute;
	transition: all .1s ease-in-out;
	-moz-transition: all .1s ease-in-out;
	-webkit-transition: all .1s ease-in-out;
	width: 100%;
}

.sonepar-floating-label .sonepar-input ~ .sonepar-label {
	top: 0;
}

.sonepar-floating-label select ~ .sonepar-label {
	top: 10px;
}

.sonepar-floating-label .sonepar-input::placeholder,
.sonepar-floating-label select::placeholder {
	color: transparent;
	opacity: 0;
}

.sonepar-floating-label .sonepar-input::-webkit-input-placeholder,
.sonepar-floating-label select::-webkit-input-placeholder {
	color: transparent;
}

/*.sonepar-floating-label .sonepar-input::-moz-placeholder,*/
/*.sonepar-floating-label select::-moz-placeholder {*/
/*	color: transparent;*/
/*}*/

.sonepar-floating-label .sonepar-input::-ms-input-placeholder,
.sonepar-floating-label select::-ms-input-placeholder {
	color: transparent;
}

.sonepar-floating-label .sonepar-input:-ms-input-placeholder,
.sonepar-floating-label select:-ms-input-placeholder {
	color: transparent;
}

.sonepar-floating-label .sonepar-input:focus:placeholder-shown,
.sonepar-floating-label .sonepar-input:not(:placeholder-shown) {
	padding-top: 14px;
}

/*.sonepar-floating-label .sonepar-input:focus:-moz-placeholder,*/
/*.sonepar-floating-label .sonepar-input:not(:-moz-placeholder) {*/
/*	padding-top: 14px;*/
/*}*/

.sonepar-floating-label .sonepar-input:focus:-ms-input-placeholder,
.sonepar-floating-label .sonepar-input:not(:-ms-input-placeholder) {
	padding-top: 14px;
}

.sonepar-floating-label .sonepar-input:not(:placeholder-shown) ~ .sonepar-label {
	padding-top: 2px;
	font-size: 11px;
}

/*.sonepar-floating-label .sonepar-input:not(:-moz-placeholder) ~ .sonepar-label {
	padding-top: 2px;
	font-size: 11px;
}*/

.sonepar-floating-label .sonepar-input:not(:-ms-input-placeholder) ~ .sonepar-label {
	padding-top: 2px;
	font-size: 11px;
}

.sonepar-floating-label .sonepar-input:not(::-ms-input-placeholder) ~ .sonepar-label {
	padding-top: 2px;
	font-size: 11px;
}

.sonepar-floating-label .sonepar-input:-webkit-autofill::first-line {
	font-size: 18px;
}

.sonepar-floating-label .sonepar-input:-webkit-autofill ~ .sonepar-label {
	padding-top: 2px;
	font-size: 11px;
}

.sonepar-floating-label .sonepar-input:focus ~ .sonepar-label,
.sonepar-floating-label select:focus ~ .sonepar-label,
.sonepar-floating-label select:not([data-value=""]):valid ~ .sonepar-label,
.sonepar-floating-label select:required ~ .sonepar-label{
	padding-top: 2px;
	font-size: 11px;
}

/**
 * IE > 8:
 * - hide clear-button ('x') inside text-input-fields
 * - hide revela-Button (eye) inside password-input-fields
 */
::-ms-clear,
::-ms-reveal {
	display: none;
}

/** Formulare - Markierung Pflichtfeld. */
.sonepar-form .sonepar-label.mandatory:after {
	content: " *";
}

/** Formulare - Checkboxen. */
.sonepar-form .sonepar-custom-checkbox {
	width: fit-content;
	width: -moz-fit-content;
}

.sonepar-form .sonepar-checkbox {
	display: block;
	margin-top: 10px;
	margin-bottom: 0;
}

.sonepar-form .sonepar-checkbox-input {
	display: -ms-inline-grid;
	display: inline-grid;
	-ms-grid-columns: auto auto;
	grid-template-areas: "checkbox label";
}

.sonepar-form .sonepar-checkbox-label {
	-ms-grid-column: 2;
	grid-area: label;
	margin-left: 5px;
}

.sonepar-form .sonepar-checkbox-label #termsAndConditionLink {
	color: #272a37;
	color: var(--c-sonepar-darkgrey);
}

.sonepar-form .sonepar-checkbox .input-errors {
	-ms-grid-column: 1/-1;
	grid-column: 1/-1;
}

.sonepar-form .sonepar-checkbox-input input {
	-ms-grid-column: 1;
	grid-area: checkbox;
	opacity: 0;
	height: 20px;
	width: 20px;
}

.sonepar-form .sonepar-checkbox-control {
	border: 2px solid #A9AAAF;
	border: 2px solid var(--c-sonepar-darkgrey-40);
	border-radius: 5px;
	display: -ms-inline-grid;
	display: inline-grid;
	-ms-grid-column: 1;
	grid-area: checkbox;
	transform: translateY(4px);
	height: 20px;
	width: 20px;
}

.sonepar-form .sonepar-checkbox-input input:checked ~ .sonepar-checkbox-control {
	background-color: #009ee3;
	background-color: var(--c-sonepar-light-blue);
	border-color: #009ee3;
	border-color: var(--c-sonepar-light-blue);
}

.sonepar-form .sonepar-checkbox-input input:focus ~ .sonepar-checkbox-control {
	border-color: #009ee3;
	border-color: var(--c-sonepar-light-blue);
}

.sonepar-form .sonepar-checkbox-input .sonepar-checkbox-control svg {
	display: none;
	color: white;
}

.sonepar-form .sonepar-checkbox-input input:checked + .sonepar-checkbox-control svg {
	display: block;
}

/**
 * Formulare - Buttons und Actions.
 */
.sonepar-form .sonepar-form-actions {
	margin-top: 30px;
}

.sonepar-form input[type='submit'],
button {
	border: none;
	border-radius: 25px;
	color: #ffffff;
	color: var(--c-white);
	display: inline-block;
	font-size: 14px;
	line-height: 20px;
	height: 40px;
	padding: 10px 30px;
	width: auto;
	margin-right: 15px;
	font-weight: 500;
}

@media (min-width: 720px) {
	.sonepar-form input[type='submit'],
	button {
		font-size: 17px;
		line-height: 24px;
		height: 50px;
	}
}

.sonepar-form input[type='submit'].sonepar-button,
button.sonepar-button {
	background-color: #0F91FF;
	background-color: var(--c-sonepar-blue);
}

.sonepar-form input[type='submit'].sonepar-button:hover,
button.sonepar-button:hover {
	background-color: #0070F6;
	background-color: var(--c-sonepar-blue-hover);
	box-shadow: 0 2px 4px #d4d4d7;
	box-shadow: 0 2px 4px var(--c-sonepar-darkgrey-20);
}

.sonepar-form input[type='submit'].sonepar-button-cta,
button.sonepar-button-cta {
	background-color: #ee7203;
	background-color: var(--c-sonepar-orange);
}

.sonepar-form input[type='submit'].sonepar-button-cta:hover,
button.sonepar-button-cta:hover {
	background-color: #f18e35;
	background-color: var(--c-sonepar-orange-80);
	box-shadow: 0 2px 4px #d4d4d7;
	box-shadow: 0 2px 4px var(--c-sonepar-darkgrey-20);
}

.sonepar-form input[type='submit'].sonepar-button-cta-sec,
button.sonepar-button-cta-sec {
	background-color: transparent;
	border: 2px solid #f18e35;
	border: 2px solid var(--c-sonepar-orange-80);
	color: #ee7203;
	color: var(--c-sonepar-orange);
}

.sonepar-form input[type='submit'].sonepar-button-cta-sec:hover,
button.sonepar-button-cta-sec:hover {
	background-color: transparent;
	border-color: #ee7203;
	border-color: var(--c-sonepar-orange);
	box-shadow: 0 2px 4px #d4d4d7;
	box-shadow: 0 2px 4px var(--c-sonepar-darkgrey-20);
}

.sonepar-form input[type='submit']:disabled,
button:disabled,
.sonepar-form input[type='submit']:disabled:hover,
button:disabled:hover {
	background-color: #d4d4d7;
	background-color: var(--c-sonepar-darkgrey-20);
}

.sonepar-form input[type='submit'].sonepar-button-cta-sec:disabled,
button.sonepar-button-cta-sec:disabled,
.sonepar-form input[type='submit'].sonepar-button-cta-sec:disabled:hover,
button.sonepar-button-cta-sec:disabled:hover {
	background-color: transparent;
	border-color: #d4d4d7;
	border-color: var(--c-sonepar-darkgrey-20);
	color: #d4d4d7;
	color: var(--c-sonepar-darkgrey-20);
}

/**
 * Formular-Validierung.
 */

/** Formular-Validierung - Feld-Fehlermeldungen. */
.sonepar-form .input-errors {
	color: #CD3A45;
	color: var(--c-sonepar-red);
	font-size: 12px;
	line-height: 16px;
	margin-top: 5px
}

.sonepar-form .sonepar-input.is-invalid,
.sonepar-form select.is-invalid {
	background: none;
	border-color: #CD3A45;
	border-color: var(--c-sonepar-red);
}

.sonepar-form .sonepar-input.is-invalid ~ .sonepar-label,
.sonepar-form select.is-invalid ~ .sonepar-label {
	color: #CD3A45;
	color: var(--c-sonepar-red);
}

/** Formular-Validierung - Select Chevron. */
.sonepar-form select.is-invalid + i.fa {
	color: #CD3A45;
	color: var(--c-sonepar-red);
}

/** Formular-Validierung - Icon - Passwort zeigen/verbergen. */
.sonepar-form .sonepar-password .sonepar-input.is-invalid ~ .sonepar-pw-eye,
.sonepar-form .sonepar-password .sonepar-input.is-invalid:focus ~ .sonepar-pw-eye {
	color: #CD3A45;
	color: var(--c-sonepar-red);
}

/** Formular-Validierung - Checkboxen. */
.sonepar-form .sonepar-checkbox-input input.is-invalid ~ .sonepar-checkbox-control {
	border-color: #CD3A45;
	border-color: var(--c-sonepar-red);
}

/** Hinweis- & Fehlermeldungen */
.sonepar-alert {
	background-color: #ffffff;
	background-color: var(--c-white);
	box-shadow: 0 0 34px 0 rgba(39,42,55,.08);
	border-radius: 6px;
	color: #52555F;
	color: var(--c-sonepar-darkgrey-80);
	display: table;
	margin-bottom: 20px;
	min-height: 48px;
	padding-left: 58px;
	padding-right: 14px;
	position: relative;
	width: 100%;
}

.sonepar-alert .icon {
	height: 100%;
	left: 0;
	padding-top: 15px;
	position: absolute;
	text-align: center;
	top: 0;
	width: 40px;
	background-color: #009ee3;
	background-color: var(--c-sonepar-light-blue);
	border-top-left-radius: 6px;
	border-bottom-left-radius: 6px;
}

.sonepar-alert .icon i {
	color: #ffffff;
	color: var(--c-white);
	font-size: 20px;
	left: 9px;
	position: absolute;
	top: calc(50% - 12px);
}

.sonepar-alert .message {
	padding: 10px 0;
}

.sonepar-alert.sonepar-alert-error .icon {
	background-color: #CD3A45;
	background-color: var(--c-sonepar-red);
	border: none;
}

.sonepar-alert.sonepar-alert-info .icon {
	background-color: #009ee3;
	background-color: var(--c-sonepar-light-blue);
	border: none;
}

/**
 * Password Security Panel.
 */
#sonepar-security-panel-slider {
	display: none;
	margin-bottom: 16px;
}

.sonepar-security-panel {
	display: table;
	line-height: 22px;
	padding: 10px 12px 10px 40px;
	position: relative;
	width: 100%;
}

.sonepar-security-panel .icon {
	height: 100%;
	left: 0;
	position: absolute;
	text-align: center;
	top: 0;
	width: 40px;
}

.sonepar-security-panel .icon i {
	color: #272a37;
	color: var(--c-sonepar-darkgrey);
	font-size: 18px;
	left: 10px;
	position: absolute;
	top: 16px;
}

/** Verschiedenes. */
@media (min-width: 1280px) {
	.max-width-600-lg {
		max-width: 600px;
	}
}

.h-300p {
	min-height: 300px;
}

.sonepar-plain-table td {
	padding: 0 10px 3px 0;
}

#saveChoiceCheckboxInfoText {
	font-style: italic;
	margin: 20px 0 0 0;
}

.sonepar-toggle-tab-active {
	border-color: #009ee3!important;
	border-color: var(--c-sonepar-blue)!important;
	border-bottom: 2px solid;
	color: var(--c-sonepar-blue);
	color: #009ee3;
	cursor: default;
}

.sonepar-toggle-tab {
	cursor: pointer;
}