@charset "UTF-8";
/* ------------------------------------------------------------------------------------------------ 
/*  Haupt css-File für den WebShop: hbSoftBoot.css		
/* 
/* Styles Herr Peter: 
/*		- siehe /home/soft/softcarrier.de/www/htdocs/sccms/templates/softcarrier/css/hiblue.css
/*  	- HB_CMS_HIBLUE_CSS wird in OnlineKatalogFrameset2021P.php benötigt => haben Auswirkung für Online Katalog
/*		- analog für andere Sites
/* 
/*  WH: 21.02.2023 - Umstellung auf UTF-8
/* ------------------------------------------------------------------------------------------------ */

/***********************************************/
/*
*/

/***********************************************/
/* Parameter ganze Applikation:  B E G I N N   
/*
/* Hinweis: sc arbeitet im Bereich eines halben Bildschirmes (Bildschirm: 1920x1200 => Abstimmung auf 1200x1200 )
*/

/* Alle Radien entfernen 
//  klee 04.04.2019 - Neues soft-carrier-Layout:
{
  border-radius: 0 !important;
}
*/

/*
Standardschrift fuer die gesamte Applikation
*/
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	/* Klee: Scrollleiste / Scrollbalken permanent einschalten */
	overflow-y: scroll;
	min-height: 1024px;
	/* background-color: yellow; */
	color: #666666;
	/* WH: 17.05.2017 - Styles angepasst wg Einbindung bootstrap.css*/
	/* deswegen die Styles, die bootstrap fuer hr vorgibt, hier ueberschreiben*/
	line-height: normal;
}

p, tr, td, li, ul, ol, h1, h2, h3, h4, h5, h6 {
	font-family: Arial, Helvetica, sans-serif;
}

/*  WH: 01.08.2019 - neue Klasse hbDisplayNoneLogOut
Ausblenden von Bereichen im ausgeloggten Zustand */
.hbDisplayNoneLogout {
	display: none;
}

/*Ausblenden beliebiger  Bereiche*/
.hbDisplayNone {
	display: none;
}

/* um einen Text unsichtbar zu machen, aber den Raum lassen, den er einnimmt*/
.hbUnsichtbar {
	color: transparent !important;
}

/* Scroll-Leiste permanent einschalten -- auch wenn Modal-Popup erscheint*/
.modal-open {
	overflow: scroll;
}

/* Änderungen von den CMS Seiten */
h1, h2, h3, h4, h5, h6 {
	color: #84c2e5;
	font-weight: bold;
}

/* layout Variante_1 */
.sc_logo {
	width: 100%;
}
/* layout Variante_1 */
.sc_slogan {
	width: 100%;
}

/* klee: 04.09.2019 - softch: Sponsor Bild Niels ins neue Layout integriert */
.hbScBasisColorHellblau {
	color: #00AEEF;
}

/* layout Variante_1 */
.div_marken_logo {
	text-align: right;
}

/* Alle Links ohne Unterstreichung in dunkelblau */
a, a:link, a:visited, a:active {
	color: #00389A;
	text-decoration: none;
	cursor: pointer;
}

a:hover {
	color: #00AEEF;
	text-decoration: none;
}

.centered {
	margin: 0 auto;
}

.jumbotron {
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 15px;
	margin-bottom: 0px;
	margin-left: 1px;
	margin-right: 1px;
	color: inherit;
	background-image: url(/cms/vtmpde/de/img/bg_titel.jpg);
	background-size: 100% 100%;
}

.jumbotron p {
	color: #fff;
	font-size: 18px;
	font-weight: bold;
	padding-top: 8px;
	padding-bottom: 8px;
	margin-bottom: 1px;
}

.list-group-item {
	font-size: 12px;
}

/*WH: 24.03.2022 - container analog zu vtmp wegen Darstellung der integrierten CMS-Seiten*/
/*WH: 16.09..2022 - cols analog zu vtmp wegen Darstellung dereinzelnen Markenwelt*/
@media ( min-width :1200px) and (max-width:1519px) {
	.container {
		width: 900px;
	}
	.col-md-12 {
		width: 100%
	}
	.col-md-11 {
		width: 91.66666667%
	}
	.col-md-10 {
		width: 83.33333333%
	}
	.col-md-9 {
		width: 75%
	}
	.col-md-8 {
		width: 66.66666667%
	}
	.col-md-7 {
		width: 58.33333333%
	}
	.col-md-6 {
		width: 50%
	}
	.col-md-5 {
		width: 41.66666667%
	}
	.col-md-4 {
		width: 33.33333333%
	}
	.col-md-3 {
		width: 25%
	}
	.col-md-2 {
		width: 16.66666667%
	}
	.col-md-1 {
		width: 8.33333333%
	}
	.col-md-pull-12 {
		right: 100%
	}
	.col-md-pull-11 {
		right: 91.66666667%
	}
	.col-md-pull-10 {
		right: 83.33333333%
	}
	.col-md-pull-9 {
		right: 75%
	}
	.col-md-pull-8 {
		right: 66.66666667%
	}
	.col-md-pull-7 {
		right: 58.33333333%
	}
	.col-md-pull-6 {
		right: 50%
	}
	.col-md-pull-5 {
		right: 41.66666667%
	}
	.col-md-pull-4 {
		right: 33.33333333%
	}
	.col-md-pull-3 {
		right: 25%
	}
	.col-md-pull-2 {
		right: 16.66666667%
	}
	.col-md-pull-1 {
		right: 8.33333333%
	}
	.col-md-pull-0 {
		right: auto
	}
	.col-md-push-12 {
		left: 100%
	}
	.col-md-push-11 {
		left: 91.66666667%
	}
	.col-md-push-10 {
		left: 83.33333333%
	}
	.col-md-push-9 {
		left: 75%
	}
	.col-md-push-8 {
		left: 66.66666667%
	}
	.col-md-push-7 {
		left: 58.33333333%
	}
	.col-md-push-6 {
		left: 50%
	}
	.col-md-push-5 {
		left: 41.66666667%
	}
	.col-md-push-4 {
		left: 33.33333333%
	}
	.col-md-push-3 {
		left: 25%
	}
	.col-md-push-2 {
		left: 16.66666667%
	}
	.col-md-push-1 {
		left: 8.33333333%
	}
	.col-md-push-0 {
		left: auto
	}
	.col-md-offset-12 {
		margin-left: 100%
	}
	.col-md-offset-11 {
		margin-left: 91.66666667%
	}
	.col-md-offset-10 {
		margin-left: 83.33333333%
	}
	.col-md-offset-9 {
		margin-left: 75%
	}
	.col-md-offset-8 {
		margin-left: 66.66666667%
	}
	.col-md-offset-7 {
		margin-left: 58.33333333%
	}
	.col-md-offset-6 {
		margin-left: 50%
	}
	.col-md-offset-5 {
		margin-left: 41.66666667%
	}
	.col-md-offset-4 {
		margin-left: 33.33333333%
	}
	.col-md-offset-3 {
		margin-left: 25%
	}
	.col-md-offset-2 {
		margin-left: 16.66666667%
	}
	.col-md-offset-1 {
		margin-left: 8.33333333%
	}
	.col-md-offset-0 {
		margin-left: 0
	}
}

/* klee 04.04.2019 - Neues soft-carrier-Layout: Orig: 
.row {
	margin-left: -5px;
	margin-right: -5px;
}
*/
hr {
	height: 2px;
	margin-top: 5px;
	margin-bottom: 10px;
	clear: both;
	/*background-color -- sc dunkelblau: rgb(0, 56, 154) = #00389A;*/
	/* grau rgb(231, 231, 231) = #e7e7e7*/
	background-color: #e7e7e7;
	border: none;
}

.float-right {
	margin-bottom: 5px;
	float: right;
}

.clearfix {
	overflow: auto;
}

/* Auswirkungen auf Suchbaum */
img {
	margin: 5px;
}

/* 
klee: 26.03.2020 - vtmp: Korrekturen neues Layout: Grid überarbeitet 
Auswirkungen auf Markenlogo
*/
.hbGridImgMarkenlogo {
	max-width: 100%;
	margin: 0px;
	margin-top: 0px;
}

.hbGridImgNew {
	max-width: 100%;
	margin: 0px;
	margin-top: 1px;
	width: 40px;
	height: 13px"
}

.hbGridVorlage {
	max-width: 100%;
	margin: 0px;
	margin-top: 2px;
}

/*WH: 29.04.2020 : damit die Buttons im Suchlisting der Bestellvorlage sichtbar bleiben*/
@media ( max-width : 1092px) {
	.hbGridVorlage {
		margin-top: -5px;
	}
}

/* Definition der Grundfarben Farben */
.well {
	background-color: #f5f5f5;
}

/* List Group */
.list-group {
	margin-bottom: 10px;
}

.list-group-item {
	padding: 5px 5px;
}

/*
.list-group-item-active {
	color: #fff;
	background-color: #00389A;
	border-color: #337ab7;
	
}
*/
.list-group-item-a {
	font-size: 14px !important;
}

/* ----------------------------------------------------------- */
/* klee -- speziell angepasste Styles 2019er Layout             */
/* ----------------------------------------------------------- */
.link_kat {
	font-family: arial;
	font-size: 13px;
	padding: 1px;
	color: #000;
	text-decoration: none;
}
/* klee: Size für das new_icon im  menue_links_2019.html */
.new_icon {
	width: 40px;
	height: 13px;
	margin: 0px;
}

/* ************************************************** */
.pfadrod {
	color: #00aeef;
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	line-height: 100%;
	background: transparent;
}

.important {
	color: #00aeef;
	/* font-size: 11px; */
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 125%;
	font-weight: normal;
}

a.vielMehr:link {
	color: #00aeef
}

a.vielMehr:visited {
	color: #00aeef
}

a.vielMehr:hover {
	color: #666666
}

.searchListHeader {
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	/* font-size: 11px; */
	font-size: 12px;
	line-height: 100%;
	font-weight: bold;
}

a.searchListHeader:link {
	color: #333333;
}

a.searchListHeader:visited {
	color: #cc0000
}

a.searchListHeader:hover {
	color: #cc0000
}

* /
	/* 'login' im Info-Frame */   
	                                            
.logintext {
	color: #333333;
	/*font-size: 11px;*/
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 120%;
	background: #FFFFFF;
}

/* WH: 25.10.2021 - Spinner waehrend Laden des Shops*/
/* Startseite, Laden des Shops: Style fuer das Loader-Img, den sich drehenden Kreis*/
.hbLoaderImgStartStyle {
	border: solid 5px;
	/*WH : heigth = 1500px, bei 100% deckt es unten nicht alles zu*/
	height: 1500px;
	/*WH Abstand zu oben nur wenige px, damit die Links im Menue deaktiviert sind*/
	/*top: 5px;*/
	/* klee: 14.04.2021 - showLoaderImg in top=0px + left=0px gesetzt */
	top: 0px;
	left: 0px;
	/*position: absolute;*/
	/* WH: 01.03.2019 - Neues VTMP-Layout: Style Erweiterungen*/
	/* position fixed, damit der ganze Browser-Viewport ueberdeckt wird*/
	position: fixed;
	width: 100%;
	z-index: 99999;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity = 50);
	opacity: 0.3;
	background-color: white;
	color: #00aeef;
	text-align: center;
	padding: 100px;
	/* font-size setzen, damit der Spinner im Div groesser wird*/
	font-size: 35px;
}

/*
/* Parameter ganze Applikation:  E N D E
/***********************************************/

/***********************************************/
/* Style für die Modal-Window in Angular-Formularen z.B. EKR
/* AUTHOR: WH
/***********************************************/
/* WH: 17.05.2017 - Styles angepasst wg Einbindung bootstrap.css 
 Klasse modal umbenannt in hbmodal, weil bootstrap auch Klasse modal hat */
div.m-modals {
	/*WH: Deckkraft herabgesetzt von 0,8 auf 0.5,background-color: rgba( 0, 0, 0, 0.8 ) ;*/
	background-color: rgba(0, 0, 0, 0.5);
	bottom: 0px;
	left: 0px;
	position: fixed;
	right: 0px;
	top: 0px;
	/*WH: z-index hinzugefuegt*/
	z-index: 249;
}

div.m-modals.ng-hide {
	background-color: rgba(0, 0, 0, 0);
}

div.m-modals.ng-hide-add.ng-hide-add-active, div.m-modals.ng-hide-remove.ng-hide-remove-active
	{
	transition: 250ms ease all;
}

div.m-modals>.hbmodal {
	background-color: #FAFAFA;
	border-radius: 3px 3px 3px 3px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	padding: 20px 20px 20px 20px;
	position: fixed;
	left: 50%;
	margin-left: -200px;
	top: 200px;
	width: 400px;
	z-index: 999;
}

div.m-modals.ng-hide>.hbmodal.ng-enter {
	top: -200px;
	transition: 250ms ease top;
}

div.m-modals.ng-hide>.hbmodal.ng-enter.ng-enter-active {
	top: 200px;
}

/**
* Styles fuer den Angular-File-Upload
*/
/*fuer den Thumbnail einer hochzuladenden Datei*/
.hbThumb {
	/* float: left; */
	height: 40px;
	padding-right: 10px;
	width: 40px;
}

/*fuer den Thumbnail einer hochzuladenden Datei*/
.hbcanvas {
	background-color: #f3f3f3;
	-webkit-box-shadow: 3px 3px 3px 0 #e3e3e3;
	-moz-box-shadow: 3px 3px 3px 0 #e3e3e3;
	box-shadow: 3px 3px 3px 0 #e3e3e3;
	border: 1px solid #c3c3c3;
	/* height: 100px; */
	margin: 6px 0 0 6px;
	width: 30px;
	height: 30px;
}

/* ************************************************** */

/* alle Input-Felder schmaler machen in der Hoehe */
.form-control {
	background-color: #ffffff;
	background-image: none;
	border: 1px solid #ccc;
	border-radius: 3px;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
	color: #555;
	display: block;
	/*font-size: 14px;*/
	font-size: 12px;
	/* height: 20px;*/
	height: 23px;
	line-height: 1.42857;
	/* padding: 6px 12px; */
	padding: 2px;
	transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s
		ease-in-out 0s;
	width: 100%;
}

/* klee: Suchfeld + Login-Formular */
.form-control-login {
	/*font-size: 14px;*/
	height: 33px;
	padding: 6px 12px;
	margin-top: 1px;
}

/* Sonderfall fuer Selectboxen, die werden zu schmal in der Hoehe, schneiden den Text ab
deswegen Padding auf 0px */
select.form-control {
	padding: 0px 0px;
}

/*WH: fuer nicht korrekte Input-Felder: Text rot, Rahmen rot,
aber erst wenn User mit dem Feld interagiert hat und es den Focus verliert*/
input.ng-touched.ng-invalid {
	color: red;
	border-color: red;
}

/*WH: Grid fuer Versand-Frachtkostenauswahl*/
.gridFrachtkosten {
	width: 100%;
	height: 120px;
}

/* WH  Selected Row mit Rahmen oben und unten*/
#gridfrachtkostenHb .ui-grid-row.ui-grid-row-selected {
	border-bottom-style: solid;
	border-bottom-width: thin;
	border-bottom-color: #000000;
	border-top-style: solid;
	border-top-width: thin;
	border-top-color: #000000;
}

/* WH: selected Table row im responsive table*/
.frachtkosten-row-selected {
	background-color: rgb(217, 237, 247) !important;
}

/*WH: Hintergrund und Rand fuer eine Leiste von nebeneinanderstehenden Buttons */
.hb-button-leiste {
	background-color: #f5f5f5;
	border-color: #dddddd;
	display: block;
}

/*WH: Abstand fuer jeden button in der hb-button-leiste*/
.hb-btn-margin {
	margin-left: 1%;
	margin-right: 1%;
}

/* klee: für Filter wichtig */
input[type=checkbox] {
	margin: 0;
	padding: 0;
	/*WH: 13.02.2019 - vertical align middle, um Checkbox mittig zu umschliessenden Label zu platzieren */
	vertical-align: middle;
}

/* WH: 13.02.2019 radio button align mit label*/
input[type=radio] {
	margin-top: -1px;
}

/*********************************/
/* Lieferanschriften:  B E G I N N   */
/*WH: Grid fuer Lieferanschriften */
.gridLieferanschriften {
	width: 100%;
	/*height: 100%; */
	/*WH Height veraendern, damit buendiger Abschluss mit Eingabemaske Lieferanschriften*/
	/*height: 350px;*/
	height: 320px;
}

/* WH: 05.06.2020 - sShop und vtmp: Style-Anpassung Lieferanschrift*/
/* Div um das Grid mit den Lieferanschriften, Hoehe setzen, damit buendiger Abschluss mit dem nebenstehenden Formular*/
.divUmGridLieferanschriften {
	height: 328px;
}

/* WH  Selected Row mit Rahmen oben und unten*/
#gridLieferanschriftenHb .ui-grid-row.ui-grid-row-selected {
	border-bottom-style: solid;
	border-bottom-width: thin;
	border-bottom-color: #000000;
	border-top-style: solid;
	border-top-width: thin;
	border-top-color: #000000;
}

/* WH: 24.01.2023 - Lieferanschriften: Standard-Lieferanschrift */

/* Farbe fuer den Btn Standard-Lieferanschrift*/
.btnStandardLiefer {
	color: #ffffff !important;
	font-family: inherit;
	/*background-color: #8f3a84; brombeer*/
	background-color: #00389A;
	font-weight: bold;
	margin: 1px;
}

.hbCellClassLieferRechnung {
	color: black;
}

.hbCellClassLieferStandard {
	color: #00389A;
}

/* Lieferanschriften:  E N D E
*/
/***********************************************/

/* alle Input-Felder Original-Bootstrap-Params */
.form-control-home {
	display: block;
	width: 100%;
	height: 34px;
	padding: 6px 12px;
	padding-right: 12px;
	font-size: 14px;
	line-height: 1.42857143;
	color: #555;
	background-color: #fff;
	background-image: none;
	border: 1px solid #ccc;
	border-radius: 4px;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
	-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow
		ease-in-out .15s;
	-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out
		.15s;
	transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
	min-width: 180px;
}
/*Styles fuer buttons an einer input-group, z.b. die Lupe am Suchfeld, in der das input-Feld die class form-control hat
 statt die Groessenangaben von Bootstrap wie btn-sm, btn-xs etc*/
.btn-hb-form-control {
	border-radius: 3px;
	font-size: 12px;
	line-height: 1.5;
	padding: 0px 10px 0px;
	/*height auf 23px, damit es in der Hoehe buendig abschliesst mit dem Input-Feld*/
	height: 23px;
}

/* WH Bootstrap well ueberschreiben mit weissem Hintergrund*/
.hb-well {
	background-color: #ffffff;
}

/* To display an red asterisk on the right of the label 
ersetzt durch webfaden vorlage control-label pflicht-feld*/
.form-group.hb-required .control-label:after {
	/*	color: #d00;
	content: "*";
	position: absolute;
	margin-left: 8px;
	top: 7px; */
	
}

/* WH: roter Rand um einen Button, um ihn besonders hervorzuheben
 z.B. im Zusammenspiel mit ng-class, important, weil sonst durch andere Button-Styles ueberschrieben*/
.hb-btn-border-red {
	border: 2px solid red !important;
}

/* WH: 22.05.2017 - ENDE Styles fuer bootstrap Formulare*/

/* MS: 17.01.2019 styles für Recommendations im Warenkorb 
div.scrollmenu {
	background-color: #00aeff;
	max-width: 1100px;
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	.
	card
	{
	flex
	:
	0
	0
	auto;
}*/
div.scrollmenu a {
	display: inline-block;
	color: white;
	text-align: center;
	padding: 14px;
	text-decoration: none;
}

div.scrollmenu a:hover {
	background-color: #777;
}

/***********************************************/
/* PANEL:  B E G I N N
*/

/* Allgemeines panel */

/* klee: primary Bootstrap Panel -- default  Bootstrap Panel s.o. */
.panel-primary {
	border-color: #00389A;
}

.panel-primary>.panel-heading {
	color: #fff;
	background-color: #00389A;
	border-color: #00389A;
}

.panel {
	margin-bottom: 20px;
	background-color: #fff;
	border: 1px solid transparent;
	border-radius: 3px;
	-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

.panel-body {
	padding: 15px;
}

.panel-body:before, .panel-body:after {
	content: " ";
	display: table;
}

.panel-body:after {
	clear: both;
}

.panel-heading {
	padding: 10px 15px;
	border-bottom: 1px solid transparent;
	border-top-right-radius: 3px;
	border-top-left-radius: 3px;
}

.panel-heading>.dropdown .dropdown-toggle {
	color: inherit;
}

.panel-title {
	margin-top: 0;
	margin-bottom: 0;
	font-size: 16px;
	color: inherit;
}

.panel-title>a, .panel-title>small, .panel-title>.small, .panel-title>small>a,
	.panel-title>.small>a {
	color: inherit;
}

.panel-default {
	border-color: #dddddd;
	margin-bottom: 9px;
}

.panel-default>.panel-heading {
	color: #00389A;
	/*color: #333333;*/
	background-color: #f5f5f5;
	/*border-color: #dddddd;*/
	border-color: #ffffff;
}

.panel-default>.panel-heading+.panel-collapse>.panel-body {
	border-top-color: #dddddd;
}

.panel-default>.panel-heading .badge {
	color: #f5f5f5;
	background-color: #333333;
}

.panel-default>.panel-footer+.panel-collapse>.panel-body {
	border-bottom-color: #dddddd;
}

/*
/* PANEL:  E N D E
/***********************************************/

/***********************************************/
/* Warenkorb:  B E G I N N
*/

/* Default-Values fuer table border collapse und spacing */
/* klee: gibt mit Detail-Kataloganzeige Probleme: verurasacht weisser Strich in Header */
table {
	border-collapse: separate;
	border-spacing: 2px;
}

/* WH: 12.11.2019 - Layout-Aenderungen nach Wuenschen von sc
Table ohne sichtbare Zwischenabstaende bei Zeilen und Spalten */
.table-wk-hb {
	border-collapse: collapse;
	border-spacing: 0px;
}

.formtext.formhinweis {
	margin: 7px 100px 15px;
	font-style: italic;
}

hr.light {
	height: 1px;
	margin-top: 10px;
	margin-bottom: 10px;
	clear: both;
	color: #e3e3e3;
	background-color: #e3e3e3;
	border: none;
}

.service-info, .order-list {
	margin-bottom: 20px;
}

.service-info .panel-heading, .service-info .panel-heading button {
	font-size: 110%;
	text-transform: none;
	color: rgb(102, 102, 102);
}

.service-info .btn-toggle {
	padding: 0;
	width: 100%;
	background: transparent;
	text-align: left;
}

.service-info .btn-toggle, .service-info .btn-toggle:hover,
	.service-info .btn-toggle:focus, .service-info .btn-toggle:active {
	-webkit-box-shadow: none;
	box-shadow: none
}

.service-info .btn-toggle i {
	float: right;
	line-height: 26px;
}

/*.service-info form:last-child .form-group:last-child {
	margin-bottom: 0;
}
*/
/*: WH: form-group:last-child entfernt,damit Schnellerfassung Component Abstand zwischen
select-box und input-feld*/
.service-info form:last-child {
	margin-bottom: 0;
}

/* WH: 12.11.2019 - Layout-Aenderungen nach Wuenschen von sc
Panel-Heading in der Hoehe schmaler, neue css-Anweisung fuer panel-heading innerhalb von service-info*/
.service-info .panel-heading {
	/*padding: 10px 15px; */
	padding: 5px 15px;
	border-bottom: 1px solid transparent;
	border-top-right-radius: 3px;
	border-top-left-radius: 3px;
}

label {
	font-weight: bold;
}

input.form-control.menge {
	max-width: 50px;
	/*WH: text-align ergaenzt*/
	text-align: right;
}

input.form-control.button-plus {
	width: calc(100% - 35px);
	margin-right: 5px;
	display: inline-block;
}

input.form-control.button-plus+button {
	display: inline-block;
}

/*bootswatch-Eigenschaften überschreiben*/
.service-info select, .order-list select, .service-info select.form-control,
	.order-list select.form-control {
	-webkit-appearance: menulist;
	-moz-appearance: menulist;
	appearance: menulist;
	background-color: #ffffff;
	background-image: none;
	border: 1px solid #ccc;
	border-radius: 3px;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
	color: #555;
	height: 24px;
	line-height: 1.42857;
	padding: 4px;
	font-size: inherit;
}
/*bootswatch-Eigenschaften ueberschreiben*/
.service-info textarea, .service-info textarea.form-control,
	.service-info input.form-control, .service-info input[type=text],
	.service-info input[type=password], .service-info input[type=email],
	.service-info input[type=number], .service-info [type=text].form-control,
	.service-info [type=password].form-control, .service-info [type=email].form-control,
	.service-info [type=tel].form-control, .service-info [contenteditable].form-control,
	.order-list textarea, .order-list textarea.form-control, .order-list input.form-control,
	.order-list input[type=text], .order-list input[type=password],
	.order-list input[type=email], .order-list input[type=number],
	.order-list [type=text].form-control, .order-list [type=password].form-control,
	.order-list [type=email].form-control, .order-list [type=tel].form-control,
	.order-list [contenteditable].form-control {
	/* WH: damit das Kreuzchen der Direktive hb-clear-text-and-reset-fkt erscheint 
	und nicht durch background:none ueberschrieben wird */
	/* background-image: none; */
	border: 1px solid #ccc;
	border-radius: 3px;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
	color: #555;
	height: 24px;
	line-height: 1.42857;
	padding: 4px;
	font-size: inherit;
}
/*bootswatch-Eigenschaften ueberschreiben*/
.service-info select:focus, .order-list select:focus, .service-info select.form-control:focus,
	.order-list select.form-control:focus, .service-info textarea:focus,
	.service-info textarea.form-control:focus, .service-info input.form-control:focus,
	.service-info input[type=text]:focus, .service-info input[type=password]:focus,
	.service-info input[type=email]:focus, .service-info input[type=number]:focus,
	.service-info [type=text].form-control:focus, .service-info [type=password].form-control:focus,
	.service-info [type=email].form-control:focus, .service-info [type=tel].form-control:focus,
	.service-info [contenteditable].form-control:focus, .order-list textarea:focus,
	.order-list textarea.form-control:focus, .order-list input.form-control:focus,
	.order-list input[type=text]:focus, .order-list input[type=password]:focus,
	.order-list input[type=email]:focus, .order-list input[type=number]:focus,
	.order-list [type=text].form-control:focus, .order-list [type=password].form-control:focus,
	.order-list [type=email].form-control:focus, .order-list [type=tel].form-control:focus,
	.order-list [contenteditable].form-control:focus {
	border-color: #66afe9;
	outline: 0;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px
		rgba(102, 175, 233, 0.6);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px
		rgba(102, 175, 233, 0.6);
}

.menge-group label, .menge-group input, .menge-group button {
	display: inline-block;
}

.menge-group button.btn-link:hover, .menge-group button.btn-link:active,
	.menge-group button.btn-link:focus {
	background-color: transparent;
}

/*WH: Mengenfeld Schnellerfassung*/
.menge-group .menge-schnell {
	width: 35%;
}

/*WH: bootstrap padding ueberschreiben*/
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th,
	.table>thead>tr>td, .table>thead>tr>th {
	padding: 5px;
}

.table-order-list {
	max-width: 100%
}

.table.table-order-list>thead:first-child>tr:first-child>th {
	border-top: 1px solid #dddddd;
	/* WH: 12.11.2019 - Layout-Aenderungen nach Wuenschen von sc
	Kopfzeile der Tabelle so hoch wie Fusszeile, deswegen eigenes Padding geaendert*/
	/*padding: 11px 8px;*/
	padding: 8px 8px;
	background-color: #f5f5f5;
}

.table-order-list tbody td:nth-child(4) {
	text-align: center;
}

.table-order-list tbody td:nth-child(4) input {
	display: inline-block;
}

.table-order-list tbody td:nth-child(3) {
	text-align: right;
}

/* WH: 5. Spalte (Rest) Text zentrieren*/
.table-order-list tbody td:nth-child(5) {
	text-align: center;
}

.table-order-list td:nth-child(2)>div {
	/*margin-bottom:10px;*/
	margin-bottom: 0px;
}

.table-order-list td:nth-child(2) button.btn-artopt-toggle {
	padding: 0;
	font-weight: bold;
	background: transparent;
	text-align: left;
}

.table-order-list td:nth-child(2) button.btn-artopt-toggle:hover,
	.table-order-list td:nth-child(2) button.btn-artopt-toggle:focus,
	.table-order-list td:nth-child(2) button.btn-artopt-toggle:active {
	-webkit-box-shadow: none;
	box-shadow: none
}

.table-order-list td:nth-child(2) .art-opt-body {
	margin: 5px 0;
	padding: 5px;
	border-top: 1px solid #dddddd;
	border-bottom: 1px solid #dddddd;
}

.table-order-list td:nth-child(2) .art-funct select {
	max-width: 170px;
	display: inline-block;
}

.table.table-order-list>tfoot>tr:first-child>th, .table.table-order-list>tfoot>tr:first-child>td
	{
	border-top-width: 2px;
	background-color: #f5f5f5;
}

/*WH: Div Aktionsbuttons mit fester Breite*/
.art-funct {
	width: 95px;
	white-space: nowrap;
}

/* WH: Mengenfeld kleiner im WK*/
.table-order-list input.form-control.menge {
	max-width: 100px;
	text-align: right;
}

/*WH: Preis netto mit Sternchen nach dem Preis, 
das fuehrt aber zu Umbruch zwischen Text und Sternchen in Tabellen-Header*/
.preis_netto:after {
	content: '*';
	color: #007EBC;
}

/* WH: 12.11.2019 - Layout-Aenderungen nach Wuenschen von sc */
.preis_netto_sternchen {
	color: #007EBC;
}

#sternchenLegende {
	/*WH: kein Abstand zu Table Positionen im WK*/
	/*margin-top: 30px;*/
	
}
/*WH: Anchor, die als buttons gestyled sind mit weisser Schrift*/
a.btn {
	color: #ffffff;
}

@media ( max-width : 770px) {
	.table-order-list th, .table-order-list td {
		display: block;
	}
	/* WH: Spaltenkoepfe ausblenden*/
	/* nth-child(1): Spalte Bestellnr*/
	.table-order-list thead th:nth-child(1), .table-order-list thead td:nth-child(1),
		/* nth-child(2): Spalte Artikel*/
		/* nth-child(3): Spalte Gewicht*/ .table-order-list thead th:nth-child(3),
		.table-order-list thead td:nth-child(3), /* nth-child(3): */
		.table-order-list thead th:nth-child(3), .table-order-list thead td:nth-child(3),
		/* nth-child(4): Spalte Lieferbar*/ .table-order-list thead th:nth-child(4),
		.table-order-list thead td:nth-child(4),
		/* nth-child(5): Spalte Rest*/ .table-order-list thead th:nth-child(5),
		.table-order-list thead td:nth-child(5),
		/* nth-child(6):  ActionButtons */ .table-order-list thead th:nth-child(6),
		.table-order-list thead td:nth-child(6),
		/* nth-child(7): Spalte Preis zzgl Mwst*/ .table-order-list thead th:nth-child(7),
		.table-order-list thead td:nth-child(7),
		/* nth-child(8): Spalte Menge*/ .table-order-list thead th:nth-child(8),
		.table-order-list thead td:nth-child(8),
		/* nth-child(9): Spalte Summe*/ .table-order-list thead th:nth-child(9),
		.table-order-list thead td:nth-child(9) {
		display: none;
	}
	.table-order-list tbody th:nth-child(3), .table-order-list tbody td:nth-child(3),
		.table-order-list tbody th:nth-child(4), .table-order-list tbody td:nth-child(4),
		.table-order-list tbody th:nth-child(5), .table-order-list tbody td:nth-child(5),
		.table-order-list tbody th:nth-child(7), .table-order-list tbody td:nth-child(7),
		.table-order-list tbody th:nth-child(8), .table-order-list tbody td:nth-child(8),
		.table-order-list tbody th:nth-child(9), .table-order-list tbody td:nth-child(9)
		{
		float: left;
		width: 33.0%;
		/*width:15.0%;*/
	}
	.table-order-list tbody td:nth-child(3), .table-order-list tbody td:nth-child(4),
		.table-order-list tbody td:nth-child(5) {
		text-align: left;
	}
	.table-order-list tbody td:nth-child(6) .art-funct, .table-order-list tbody td:nth-child(8) input
		{
		display: inline-block;
	}
	.table-order-list tbody td:nth-child(6), .table-order-list tbody td:nth-child(8)
		{
		text-align: right;
	}
	.table-order-list tbody td:nth-child(7), .table-order-list tbody td:nth-child(8),
		.table-order-list tbody td:nth-child(9) {
		background-color: rgba(91, 192, 222, 0.2);
	}
	.table-order-list tbody td:nth-child(1)::before {
		content: "Bestellnr.: ";
		font-weight: bold;
	}
	.table-order-list tbody td:nth-child(3)::before {
		content: "Gewicht: ";
		font-weight: bold;
	}
	.table-order-list tbody td:nth-child(4)::before {
		content: "Lieferbar: ";
		font-weight: bold;
	}
	.table-order-list tbody td:nth-child(5)::before {
		content: "Rest: ";
		font-weight: bold;
	}
	.table-order-list tfoot th, .table-order-list tfoot td {
		float: left;
		width: 66.5%;
	}
	.table-order-list tfoot th:last-child, .table-order-list tfoot td:last-child
		{
		width: 33.0%;
	}
}

.no-wrap {
	white-space: nowrap;
}

.clear {
	clear: both;
}

.hbListtextNotiz {
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	/*color: #000000;*/
	/*WH: Notiz immer in gruener schrift*/
	color: #007700 !important;
	line-height: 125%;
	font-weight: bold;
}

a.hbListtextNotiz:link {
	color: #007700
}

a.hbListtextNotiz:visited {
	color: #007700
}

a.hbListtextNotiz:hover {
	color: #FF5D00
}

/* Wunschliefertermin im Warenkorb*/
/*Schriftfarbe fuer Datumsauswahl disabled: ganz schwaches Grau*/
#wltHbDiv .text-muted {
	color: #b1afaf;
}

/* Abstaende nach oben und unten verringern */
#wltHbDiv .radio {
	margin-top: 2px;
	margin-bottom: 2px;
}

#kontaktLadrHbDiv .text-muted {
	color: #b1afaf;
}

/* Warenkorb:  E N D E
*/
/***********************************************/

/***********************************************/
/* Schnellerfassung:  B E G I N N
* Styles uebergreifend fuer die Bereiche Warenkorb und Bestellvorlage
*/

/*WH: ub-dropdown Schnellerfassung Button in Hoehe schmaler*/
.schnell-select-button {
	padding: 0px !important;
}
/* Schnellerfassung:  E N D E
*/
/***********************************************/

/*********************************/
/*  WH: 10.12.2019 - Redesign Formular Auswahl Lieferanschrift und Frachtkosten im Bestellprozess*/
/* Auswahl Lieferanschrift und Frachtkosten im Bestellprozess :  B E G I N N   */
#ladrBestellungHbDiv .panel-heading, #ladrBestellungHbDiv .panel-heading button
	{
	font-size: 110%;
	text-transform: none;
	color: rgb(102, 102, 102);
}

#ladrBestellungHbDiv .panel-default {
	margin-bottom: 15px;
}

#ladrBestellungHbDiv .panel-heading {
	/*padding: 10px 15px; */
	padding: 5px 15px;
	border-bottom: 1px solid transparent;
	border-top-right-radius: 3px;
	border-top-left-radius: 3px;
}

#ladrBestellungHbDiv .btn-toggle {
	padding: 0;
	width: 100%;
	background: transparent;
	text-align: left;
}

#ladrBestellungHbDiv .btn-toggle-frachtkosten {
	width: 100%;
}

#ladrBestellungHbDiv .btn-toggle-erg-direktlieferung {
	width: 100%;
}

#ladrBestellungHbDiv fieldset {
	margin-bottom: 0px;
}

/* die Legend im Fieldset kleiner machen*/
#ladrBestellungHbDiv legend {
	font-size: 14px;
}

#ladrBestellungHbDiv .panel-body {
	padding: 5px;
}

#ladrBestellungHbDiv .btn-toggle, #ladrBestellungHbDiv .btn-toggle:hover,
	#ladrBestellungHbDiv .btn-toggle:focus, #ladrBestellungHbDiv .btn-toggle:active
	{
	-webkit-box-shadow: none;
	box-shadow: none
}

#ladrBestellungHbDiv .btn-toggle i {
	/*Abstand zum links stehenden Text*/
	margin-left: 5px;
	line-height: 26px;
	float: right;
}

/* Div im PanelHeading zum Andruck der gewaehlten Lieferanschrift*/
#gewLieferadrHbDiv {
	padding: 5px;
	float: right;
	width: 50%;
}

/* Text muted bei disabled Elementen, ein ganz schwaches Grau, weil
sonst schlecht unterscheidbar von der normal dunkelgrauen Schrift*/
#ladrBestellungHbDiv .text-muted {
	color: #b1afaf;
}

/* WH  min height setzen, fuer buendigen Abschluss der beiden Cols mit 
Frachtkosten und Handling bei abweichender Lieferanschrift*/
.rowBestellLieferanschrift {
	min-width: 400px;
}

/* damit die Panels fuer Frachtkosten und fuer Abw. Lieferanschrift gleich hoch sind*/
.panelFrachtHbDivAufgeklappt {
	min-height: 375px;
}

.panelAbLieferanschrHbDivAufgeklappt {
	min-height: 375px;
}

/* WH: 08.09.2021 - Direktlieferung: Bug fix Felder l_kundenreferenznr, l_weiterereferenz*/
/* Schrift normal in den  Input-Feldern zur Direktlieferung, nicht bold */
#direktlieferungHbDiv input {
	font-weight: normal;
}

@media screen and (max-width: 770px) {
	#ladrBestellungHbDiv .btn-toggle {
		/* bei kleinem Display Button ueber ganze Breite, damit er klickbar ist*/
		width: 100%;
	}
}

/* Auswahl Lieferanschrift und Frachtkosten im Bestellprozess:  E N D E
*/
/***********************************************/

/*********************************/
/* BUTTON :  B E G I N N   */

/* Farben und btn-Classen aus OldStyle*/

/* btn-info mit hellblauem HG*/
.btn-info {
	color: #fff;
	background-color: #5bc0de;
	border-color: #46b8da;
}

.btn-info:focus, .btn-info.focus {
	color: #fff;
	background-color: #31b0d5;
	border-color: #1b6d85;
}

.btn-info:hover {
	color: #fff;
	background-color: #31b0d5;
	border-color: #269abc;
}

.btn-info:active, .btn-info.active, .open>.btn-info.dropdown-toggle {
	color: #fff;
	background-color: #31b0d5;
	border-color: #269abc;
}

.btn-info:active:hover, .btn-info:active:focus, .btn-info:active.focus,
	.btn-info.active:hover, .btn-info.active:focus, .btn-info.active.focus,
	.open>.btn-info.dropdown-toggle:hover, .open>.btn-info.dropdown-toggle:focus,
	.open>.btn-info.dropdown-toggle.focus {
	color: #fff;
	background-color: #269abc;
	border-color: #1b6d85;
}

.btn-info:active, .btn-info.active, .open>.btn-info.dropdown-toggle {
	background-image: none;
}

.btn-info.disabled, .btn-info.disabled:hover, .btn-info.disabled:focus,
	.btn-info.disabled.focus, .btn-info.disabled:active, .btn-info.disabled.active,
	.btn-info[disabled], .btn-info[disabled]:hover, .btn-info[disabled]:focus,
	.btn-info[disabled].focus, .btn-info[disabled]:active, .btn-info[disabled].active,
	fieldset[disabled] .btn-info, fieldset[disabled] .btn-info:hover,
	fieldset[disabled] .btn-info:focus, fieldset[disabled] .btn-info.focus,
	fieldset[disabled] .btn-info:active, fieldset[disabled] .btn-info.active
	{
	background-color: #5bc0de;
	border-color: #46b8da;
}

.btn-info .badge {
	color: #5bc0de;
	background-color: #fff;
}
/*bootswatch-Eigenschaften überschreiben*/
.btn-default, .btn.primary, .btn-success, .btn-info, .btn-warning,
	.btn-danger, .hbBtnStandardOk, .hbBtnStandardInsert,
	.hbBtnStandardOkRefresh, .hbBtnStandardCritical, .hbBtnStandardOkSmart
	{
	-webkit-box-shadow: none;
	box-shadow: none;
	border: 1px solid rgba(0, 0, 0, 0.1);
}
/*bootswatch-Eigenschaften überschreiben*/
.btn-xs, .btn-group-xs>.btn {
	padding: 1px 5px;
}

/*
/* BUTTON :  E N D E
/***********************************************/

/* ***********************************/
/* Style fürs Blättern:  B E G I N N
/* klee 11.04.2019
*/
.hbColBlaetternPaginationBox {
	margin-bottom: -2px;
}

/* klee: 16.04.2020 - Suchlisting Anzeige von 6 Artikeln pro Seite */
.hbColBlaetternPaginationBoxRowUnten {
	margin-top: 3px;
}

.blaetternArtikelProSeiteBox {
	float: left;
	margin-left: 10%;
}

.blaetternPaginationBox {
	float: right;
	margin-left: 5%;
}

/* klee: 18.03.2020 - vtmp: Korrekturen neues Layout */
.blaetternPaginationUl {
	margin: 0px;
}

/* klee: 18.03.2020 - vtmp: Korrekturen neues Layout */
.blaetternPaginationToggle {
	float: right;
	margin-top: -2px;
}

/* klee: 04.05.2020 - Neues Layout + Angular-Umbau für sShop (Phase-2): CSS-HB analog zu VTMP eingearbeitet */
/* Pagination-Farben: Blätterboxen */
.pagination-xs>li>a, .pagination>li>span {
	background-color: white !important;
	color: #00389A !important;
}
/* Pagination-Farben: aktive Box */
.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover,
	.pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover
	{
	background-color: #00AEEF !important;
	color: white !important;
	border-color: #00AEEF !important;
}

@media ( max-width : 770px) {
	.hbPaginationMarginLeftHandy {
		margin-left: -32px !important;
	}
}

/* WH: 15.03.2019 - Suchseite Blaettern in bootstrap-Layout*/
/*neue Klasse pagination-xs analog zu pagination-sm in bootstrap.css*/
.pagination-xs>li>a, .pagination-xs>li>span {
	padding: 1px 5px;
	font-size: 11px;
	line-height: 1.5;
	color: #00389A;
	/* WH: 23.04.2020 - Suche: Blaettern-Leiste mit festen Breiten*/
	width: 25px;
}

.pagination-xs>li:first-child>a, .pagination-xs>li:first-child>span {
	border-bottom-left-radius: 3px;
	border-top-left-radius: 3px;
}

.pagination-xs>li:last-child>a, .pagination-xs>li:last-child>span {
	border-bottom-right-radius: 3px;
	border-top-right-radius: 3px;
}

/* WH: 23.04.2020 - Suche: Blaettern-Leiste mit festen Breiten*/
.hb-pagination-count {
	float: right;
	padding: 4px;
	color: #00389A;
}
/*
/* Style fürs Blättern:  E N D E
/*
/***********************************************/

/* ***********************************************/
/* Style fürs Buttons:  B E G I N N
/* klee 11.04.2019
*/
.btn-primary {
	color: #fff;
	/*background-color: #00389A;*/
	background-color: #00389A;
	/* border-color: #2e6da4; */
	border-color: #00389A;
}

.btn-primary:hover {
	color: #fff;
	/* Bootstrap-Farbe: */
	/* background-color: #286090; */
	/* background-color: red; */
	background-color: #00AEEF;
	border-color: #204d74;
}

.btn-primary:focus {
	color: #fff;
	background-color: #00389A;
	border-color: #00389A;
}

.btn.disabled, .btn[disabled], fieldset[disabled] .btn {
	cursor: not-allowed;
	filter: alpha(opacity = 65);
	-webkit-box-shadow: none;
	box-shadow: none;
	opacity: 0.20;
}

/*WH: LastwagenSymbol in Suchliste fuer Verfuegbarkeitsauskunft*/
.hbTruckSymbolVerfuegbar {
	color: #00389A;
}

/* WH Stylen Warenkorbsymbol aus font-awesome*/
.hbShoppingCartSymbolWk {
	margin-left: 15px;
	color: #00389A;
}

/* ShoppingCart Symbol bei soft-carrier rechts oben im Header*/
.hbShoppingCartSymbolHeader {
	margin-left: 2px;
	color: #00389A;
	margin-top: 12px;
	margin-bottom: 3px;
}

.hbShoppingCartSymbolHeader:hover {
	color: #00AEEF;
}

.hbBtnLinkStueckInWK {
	color: #ffffff !important;
	/*HB_COLOR_BUTTON_OK*/
	background-color: #00389A;
	font-weight: bold;
	width: 230px;
	margin: 1px;
}

/* WH: 27.11.2017 - Styles fuer Applikations-Standard-Buttons zur Verwendung mit bootstrap*/
/* Button mit der OK-Farbe fuer den Hintergrund*/
.hbBtnStandardOk {
	color: #ffffff !important;
	font-family: Arial, Helvetica, sans-serif;
	/*HB_COLOR_BUTTON_OK*/
	background-color: #00389A;
	font-weight: bold;
	margin: 1px;
}

/* Button mit der Critical-Farbe fuer den Hintergrund*/
.hbBtnStandardCritical {
	color: #ffffff !important;
	font-family: Arial, Helvetica, sans-serif;
	/*HB_COLOR_BUTTON_CRITICAL : rot*/
	background-color: #CC0000;
	font-weight: bold;
	margin: 1px;
}

/* Button mit der OK-Refresh-Farbe fuer den Hintergrund*/
.hbBtnStandardOkRefresh {
	color: #ffffff !important;
	font-family: Arial, Helvetica, sans-serif;
	/*HB_COLOR_BUTTON_OK_REFRESH : hell-orange */
	background-color: #ff965a;
	font-weight: bold;
	margin: 1px;
}

/* Button mit der Insert-Farbe fuer den Hintergrund*/
.hbBtnStandardInsert {
	color: #ffffff !important;
	font-family: Arial, Helvetica, sans-serif;
	/*HB_COLOR_BUTTON_INSERT */
	background-color: #999999;
	font-weight: bold;
	margin: 1px;
}

/* Button mit der HB_COLOR_BUTTON_COPY fuer den Hintergrund*/
.hbBtnStandardCopy {
	color: #ffffff !important;
	font-family: Arial, Helvetica, sans-serif;
	/* HB_COLOR_BUTTON_COPY : helles Pink */
	background-color: #D08FCC;
	font-weight: bold;
	margin: 1px;
}

/* Button mit der OK-Refresh-Farbe fuer den Hintergrund*/
.hbBtnStandardPreview {
	color: #ffffff !important;
	font-family: Arial, Helvetica, sans-serif;
	background-color: #00AEEF;
	font-weight: bold;
	margin: 1px;
}

/* WH: 11.11.2021 - Stylesheets: Styles fuer Outline-Buttons ergaenzt */
.btn-outline {
	color: inherit;
	background-color: transparent;
	transition: all .5s;
}

.btn-primary.btn-outline {
	color: #00389A;
}

.btn-success.btn-outline {
	color: #5cb85c;
}

.btn-info.btn-outline {
	color: #5bc0de;
}

.btn-warning.btn-outline {
	color: #f0ad4e;
}

.btn-danger.btn-outline {
	color: #d9534f;
}

.btn-primary.btn-outline:hover, .btn-success.btn-outline:hover,
	.btn-info.btn-outline:hover, .btn-warning.btn-outline:hover,
	.btn-danger.btn-outline:hover {
	color: #fff;
}

.btn-primary.btn-outline:focus, .btn-success.btn-outline:focus,
	.btn-info.btn-outline:focus, .btn-warning.btn-outline:focus,
	.btn-danger.btn-outline:focus {
	color: #fff;
}

/*
/* Style Style fürs Buttons:  E N D E
/*
/***********************************************/

/* ***********************************************/
/*  Style Tooltips:  B E G I N N
/* klee 11.04.2019
*/

/* Alle Tooltips in der Farbe ändern */
.tooltip .tooltip-inner {
	color: white;
	background-color: #00389A;
	border-radius: 5px;
}

/* klee: 08.04.2021 - Alle Tooltips undurchsichtig machen */
.tooltip.in {
	opacity: 1;
	filter: alpha(opacity = 100);
}

/* klee: 19.03.2020 - vtmp: Korrekturen neues Layout: Tooltip für Beschreibungstexte im Grid 
Hinweis-1: hbTooltipGridArtikelTxt ist eine Kunst-Klasse, 
mit der  i.V.m. der HTML-ID uiGridStyleResponsive wir es schaffen tooltip-inner nur für die 
Artikel-Texte zu setzen und damit gezielt die Breite für diese Tooltips zu verändern. 
Die Breite aller anderen Tooltips im Grid bleibt auf die Standardbreite gesetzt 
Hinweis-2: white-space: pre-wrap; dient dazu im Tooltip eine Zeilenumbruch mit \n zu bekommen
*/
/* WH: 06.05.2020 - Neue Bestellvorlagen: Anzahl Artikel im Grid abhaengig von Shopsite
deswegen wird ID des Grids programmatisch gesetzt im sucheHbCtr*/
/*
#uiGridStyleResponsive .hbTooltipGridArtikelTxt .tooltip-inner {
	color: white;
	background-color: #00389A;
	border-radius: 5px;
	width: 500px;
	max-width: 800px !important;
	white-space: pre-wrap;
}
*/
/* 
Ausblenden des Tooltips Artikel-Texte bei grossen Browser-Fenster 
damit alle Texte txt1-4 auch in das Fenster passen
*/
@media ( min-width :991px) {
	#uiGridStyleResponsive .hbTooltipGridArtikelTxt {
		display: none;
	}
}

.tooltip.top .tooltip-arrow {
	border-top-color: #00389A !important;
}

.tooltip.bottom .tooltip-arrow {
	border-bottom-color: #00389A !important;
}

.tooltip.left .tooltip-arrow {
	border-left-color: #00389A !important;
}

/* //(klee: 22.11.2013 Einbau schneller Tooltips fuer Anker ueber Styles) */
/* Beispiel: <a href="" class="tooltip">überqueren Sie mich mit der Maus!<span>Ich bin ein ToolTip der aus einem Text besteht</span></a> */
/* Beispiel: <a href="" class="tooltip">überqueren Sie mich mit der Maus!<span><img src="/test.png" /></span></a> */
a.tooltip {
	position: relative;
	text-decoration: none;
	color: black;
}

a.tooltip span {
	display: none;
}

a.tooltip:hover span {
	position: absolute;
	display: block;
	top: 1.5em;
	left: 2em;
	border: 1px solid black;
	background-color: white;
	padding: 0.2em;
	z-index: 999;
}

/* WH: 30.01.2017 - Markenshop-Logo als Link in die Markenwelt*/
/* WH Tooltips speziell fuer die Markenwelt an beliebigen Elementen*/
/* Tooltip container */
.tooltipMarkenwelt {
	position: relative;
	display: inline-block;

	/*border-bottom: 1px dotted black;*/
	/* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltipMarkenwelt .tooltiptextMarkenwelt {
	visibility: hidden;
	font-size: 12px;
	width: 150px;
	background-color: black;
	color: #fff;
	text-align: center;
	padding: 5px 0;
	border-radius: 6px;
	/* Position the tooltip text - see examples below! */
	position: absolute;
	z-index: 1;
	/* Margin-left setzen, damit Tooltip sich nicht unter den rechten Rand im Grid schiebt*/
	margin-left: -40px;
}

/* Tooltip text Markenwelt vorhanden */
.tooltipMarkenwelt .tooltiptextMarkenweltExists {
	/*Farbe wie die Navigationsbuttons*/
	background-color: #00389A;
}
/* Tooltip text keine Markenwelt vorhanden */
.tooltipMarkenwelt .tooltiptextMarkenweltNot {
	/*Farbe wie die Navigationsbuttons*/
	background-color: #00389A;
	/*WH:  opacity durchscheinend*/
	opacity: 0.4;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltipMarkenwelt:hover .tooltiptextMarkenwelt {
	visibility: visible;
}

/* WH ENDE Tooltips Markenwelt*/

/* WH: Tooltip fuer Lieferfaehigkeit*/
/* Tooltip container */
.tooltipLieferfaehig {
	position: relative;
	display: inline-block;
	/*border-bottom: 1px dotted black;*/
	/* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltipLieferfaehig .tooltiptextLieferfaehig {
	font-family: Arial, Helvetica, sans-serif;
	visibility: hidden;
	font-size: 12px;
	width: 120px;
	/*background-color: black;*/
	/*Farbe wie die Navigationsbuttons*/
	background-color: #00389A;
	color: #fff;
	text-align: center;
	padding: 5px 0;
	border-radius: 6px;
	/* Position the tooltip text - see examples below! */
	position: absolute;
	z-index: 1;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltipLieferfaehig:hover .tooltiptextLieferfaehig {
	visibility: visible;
}

/* WH: ENDE Tooltip fuer Lieferfaehigkeit*/

/* WH: Tooltip fuer Infoservice Artikel*/
/* Tooltip container */
.tooltipInfSrvArt {
	position: relative;
	display: inline-block;
	/*border-bottom: 1px dotted black;*/
	/* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltipInfSrvArt .tooltiptextInfSrvArt {
	font-family: Arial, Helvetica, sans-serif;
	visibility: hidden;
	font-size: 12px;
	/*width: 120px; */
	width: 200px;
	/*background-color: black;*/
	/*Farbe wie die Navigationsbuttons*/
	background-color: #00389A;
	color: #fff;
	text-align: center;
	padding: 5px 0;
	border-radius: 6px;
	/* Position the tooltip text - see examples below! */
	position: absolute;
	z-index: 1;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltipInfSrvArt:hover .tooltiptextInfSrvArt {
	visibility: visible;
}

/*Margin-left, damit sich der Tooltip nicht am rechten Rand unter das Grid schiebt*/
.tooltiptextInfSrvArt.left {
	margin-left: -60px;
}

/* WH: ENDE Tooltip fuer Infoservice Artikel*/

/*  WH: 03.05.2023 - Suchergebnislisting Bilder vergroessern bei Mouseover*/
/* Popover statt Tooltip*/
.hbPopover {
	max-width: unset;
}

/*
/* Style Tooltips:  E N D E
/*
/***********************************************/

/***********************************************/
/* K A P I T E L - P A N E L:  B E G I N N   */

/* Gesamt Panel Frontpage */
.frontpage-panel {
	/* Kasten entfernen */
	border: 0px solid transparent;
}

/* List Group */
.frontpage-panel-list-group {
	margin-bottom: 10px;
	/* center durch: margin-left: 45%; */
}

.frontpage-panel-list-group-item {
	padding: 4px 5px;
	border: 0px;
}

.frontpage-panel-heading {
	font-size: 12px;
	height: 40px;
	font-weight: bold;
	padding-left: 45%;
	/* klee: 22.09.2022 -- css-Anpassung Einstiegsseite */
	/* padding: 5px; */
	padding: 5px !important;
	color: #00389A;
}

/* HINWEIS: .frontpage-panel-body und .frontpage-panel-body>a,a:link,a:visited,a:active arbeiten zusammen */
@media screen and (min-width: 1280px) {
	.frontpage-panel-body {
		height: 465px;
		padding: 0px !important;
		overflow: hidden;
		margin-bottom: 9px !important;
	}
}

@media screen and (min-width: 970px) and (max-width: 1280px) {
	.frontpage-panel-body {
		height: 550px;
		padding: 0px !important;
		overflow: hidden;
		margin-bottom: 9px !important;
	}
}
/* Warum hier nicht 750 funktioniert versteht klee nicht */
@media screen and (min-width: 770px) and (max-width: 970px) {
	.frontpage-panel-body {
		height: 650px;
		padding: 0px !important;
		overflow: hidden;
		margin-bottom: 9px !important;
	}
}

@media screen and (max-width: 770px) {
	.frontpage-panel-body {
		padding: 0px !important;
		overflow: hidden;
		margin-bottom: 9px !important;
	}
}

/* HINWEIS: .frontpage-panel-body und .frontpage-panel-body>a,a:link,a:visited,a:active arbeiten zusammen */
/* Warum hier nicht 750 bzw. 970 funktionieren versteht klee nicht */
.frontpage-panel-body a:hover {
	color: #00AEEF
}

/*
/* K A P I T E L - P A N E L:  E N D E
/***********************************************/

/***********************************************/
/* FOOTER:  B E G I N N   */

/* klee: brand version Footer tuning 
.ft_version {
	font-size: 9px;
}
*/
.hb-footer-p {
	margin-bottom: 4px;
}

.hb-bg-info {
	background-color: #FFFFFF;
}

/* FOOTER:  E N D E
/***********************************************/

/***********************************************/
/* Styles  NAV-BAR:  B E G I N N   */
.hbSearchTextRechtschreibVorschlag {
	margin-top: 5px;
}

/*  WH: 12.04.2023 - Layoutaenderung 'Aehnliche Suche'*/
.textAehnlicheSuche {
	color: black;
	font-weight: normal;
	padding: 0px;
}

/* Text 'Aehnliche Suche' linksbuendig mit Suchfeld*/

/* klee: 16.04.2020 - Anpassung soft Login-Felder */
.hbLoginPasswd {
	width: 44% !important;
}

/* WH: 17.08.2023 - Passwortfeld mit Auge zur Anzeige des PW im Klartext */
#hbFormLogin .hb-pwd-toggle {
	/* das Div mit dem Icon nach links ins Input-Feld schieben*/
	margin-left: -30px !important;
	margin-top: 2px !important;
	/* position absolute, damit das Auge immer sichtbar bleibt, auch bei Klick in Feld*/
	position: absolute !important;
	z-index: 3 !important;
	padding-top: 5px;
}

#passwortAendernHbDiv .hb-pwd-toggle {
	/* das Div mit dem Icon nach links ins Input-Feld schieben*/
	margin-left: 80% !important;
	margin-top: -27px !important;
	/* position absolute, damit das Auge immer sichtbar bleibt, auch bei Klick in Feld*/
	position: absolute !important;
	z-index: 3 !important;
	padding-top: 5px;
}

/* Selbstregistrierung in scShops*/
#hbSelbstRegForm .hb-pwd-toggle {
	/* das Div mit dem Icon nach links ins Input-Feld schieben*/
	margin-left: 70% !important;
	margin-top: -27px !important;
	/* position absolute, damit das Auge immer sichtbar bleibt, auch bei Klick in Feld*/
	position: absolute !important;
	z-index: 3 !important;
	padding-top: 5px;
}

/*Sonderfall fuer AP1*/
#selbsRegSpanAP1 .hb-pwd-toggle {
	/* das Div mit dem Icon nach links ins Input-Feld schieben*/
	margin-left: 85% !important;
	margin-top: -27px !important;
	/* position absolute, damit das Auge immer sichtbar bleibt, auch bei Klick in Feld*/
	position: absolute !important;
	z-index: 3 !important;
	padding-top: 5px;
}

.hb-pwd-eyes {
	/* font groesser*/
	font-size: 16px !important;
	color: #00389A;
}

.hbLogin {
	width: 44% !important;
	margin-right: 10px;
}

.hbPasswortVergessenButton {
	margin-left: 2px !important;
}

@media ( max-width : 770px) {
	.hbPasswortVergessenButton {
		display: none;
	}
}

.hbLogoutButton {
	/* abgerundete Ecken */
	border-top-right-radius: 3px !important;
	border-bottom-right-radius: 3px !important;
	/*padding: 0px;*/
}

.hbNavbarFooter {
	margin-bottom: 0px;
}

/* klee 12.03.2019 - WK-Icon normiert auf fa */
.fa-hb-wk {
	/* klee: mit font-size kann man Icon-Grösse unabhängig von fa-2x steuern */
	font-size: 16px !important;
	width: 20px;
}

.hbGlyphiconSuchbaum {
	/* klee: mit font-size kann man Icon-Grösse unabhängig von fa-2x steuern */
	font-size: 14px !important;
	width: 20px;
}

/* klee: Styles für Nav-Bar-Login-Text: Benutzer Info */
.hbNavbarLoginTxtLeft {
	color: #00389A;
	font-size: 12px !important;
	padding-left: 0px;
	padding-right: 0px;
	margin-top: 10px;
}
/*@media screen and (min-width: 770px) {
	.hbNavbarLoginTxtLeft {
		color: #00389A;
		font-size: 12px;
		padding-left: 40px;
		padding-right: 10px;
	}
}

@media screen and (max-width: 770px) {
	.hbNavbarLoginTxtLeft {
		color: #00389A;
		font-size: 12px !important;
		padding-left: 0px;
		padding-right: 0px;
	}
}
*/

/* klee: Styles für Nav-Bar-Login-Text: Benutzer Info */
@media screen and (min-width: 1152px) {
	.hbNavbarLoginTxtRight {
		color: #00389A;
		font-size: 12px;
		padding-left: 0px;
		padding-right: 10px;
	}
}

/* Langer Text zur vollständigen Anzeige des eingeloggten Benutzers */
@media screen and (max-width: 1152px) {
	.hbNavbarLoginTxtRight {
		color: #00389A;
		font-size: 12px !important;
		padding-left: 0px;
		padding-right: 0px;
		display: none;
	}
}

/*  */
@media screen and (max-width: 770px) {
	.hbNavbarLoginForm {
		display: flex;
		justify-content: space-between;
	}
}

/* klee: Styles für Nav-Bar: Sprachauswahl über Flaggen */
.dropdown-menu-lang-selection {
	/* Original in dropdown-menu min-width: 160px; */
	min-width: 10px;
	/* Original in dropdown-menu top: 100%; */
	top: 73%;
	margin-right: 8px;
	padding: 0px 0;
}

/* klee: Home-Icon Markenwelten */
.fa-home-marken {
	color: #ff5d00;
	font-weight: bold;
	/*color: red*/
}

/* navbar - Höhe einstellen: siehe alle anderen so markierten Stellen */
.navbar {
	min-height: 20px;
	/* abgerundete Ecken */
	border-radius: 3px;
	margin-bottom: 0px;
}

/* navbar - Höhe einstellen: siehe alle anderen so markierten Stellen */
.navbar-brand {
	/* navbar - Höhe einstellen: siehe alle anderen so markierten Stellen */
	padding: 1px 1px;
	height: 20px;
	line-height: 20px;
}

/* navbar - Höhe einstellen: siehe alle anderen so markierten Stellen */
.navbar-nav>li>a {
	padding-top: 7px;
	padding-bottom: 7px;
}

/* navbar - Höhe einstellen: siehe alle anderen so markierten Stellen */
/*.navbar-btn .btn-xs {
	margin-top: 7px;
	margin-bottom: 7px;
}*/
.hbNavbarButton {
	margin-right: 2px;
	margin-top: 6px;
	/*width: 55px; */
}

.hbNavbarButtonFlaggen {
	/* klee 08.04.2019 - Neues soft-carrier-Layout: margin-right: 9px;*/
	/* margin-top: 7px; */
	/* width: 55px; */
	background-color: #00389A;
	color: #FFFFFF;
	margin-left: 2px !important;
}

/* Damit Telefonhörer + Online-Kataloge + Sprachen-Flaggen einen passenden Abstand zur hr haben */
@media screen and (min-width: 770px) {
	.navbar-sprache {
		margin-bottom: -2px;
		margin-top: 8px;
	}
}

@media screen and (max-width: 770px) {
	.navbar-sprache {
		margin-bottom: -4px;
		margin-top: 0px;
		display: flex;
		justify-content: space-between;
	}
}

.navbar-default {
	/* Hintergrundfarbe für nav-bar */
	background-color: #00AEEF;
}

/* Hintergrundfarbe+Farbe+Schrift für nav-bar-Menü */
.navbar-default .navbar-nav>li>a {
	color: #FFFFFF !important;
	background-color: #00AEEF;
	font-size: 14px;
	/* font-weight: bold; */
}

.navbar-right {
	margin-right: 0px !important;
}

/* Korrektur bei Handy-Layout */
@media ( min-width : 770px) {
	.navbar-search {
		padding-left: 0px !important;
	}
}
/* Korrektur bei Handy-Layout */
@media ( max-width : 770px) {
	.navbar-search {
		padding-left: 0px !important;
		padding-right: 0px;
		padding-top: 0px;
		padding-bottom: 0px;
		margin-top: 2px;
		padding-top: 0px;
	}
}
/* Korrektur bei Handy-Layout */
@media ( max-width : 770px) {
	.navbar-form {
		padding-left: 0px !important;
		padding-right: 0px;
		padding-top: 0px;
		padding-bottom: 0px;
		margin-top: 2px;
	}
}

/* Korrektur bei Handy-Layout: hb-clearable.x wird ansonsten verdeckt  */
@media ( max-width : 770px) {
	.hbNavbarSearchInput {
		width: 95% !important;
	}
}

/*  WH: 04.02.2019 - Direktive hbClearText*/
.hb-clearable.x {
	background: #fff url(/hbdb/scShared/img/shared/kleines-x.png) no-repeat
		right -10px center;
	background-size: 16px 16px;
	background-position: right 5px center;
	/* WH: Abstand des rechts stehenden Kreuzchens zum Eingabestring*/
	padding-right: 30px;
}

.hb-clearable.onX {
	cursor: pointer;
}

/* WH Stylen Telefonsymbol aus font-awesome*/
.hbPhoneSymbolNavBar {
	margin-top: 6px;
	margin-left: 10px;
	vertical-align: top;
	color: #00389A;
	font-size: 2em !important;
}

.hbPhoneSymbolNavBar:hover {
	color: #00AEEF !important;
}

/* Korrektur bei Handy-Layout */
@media ( max-width : 770px) {
	.margin-left-handy {
		margin-left: 15px !important;
	}
}
/* Korrektur bei Handy-Layout */
@media ( max-width : 770px) {
	.margin-footer-handy {
		margin: 0px;
	}
}

/*  Für Grid -- col- */
.hbGridNoPadingLeft {
	padding-left: 0px;
}

.hbGridNoPadingRight {
	padding-right: 0px;
}

/* Styles  NAV-BAR:  E N D E
/***********************************************/

/***********************************************/
/* Parameter Autosuggest Typeahead mit ui-grid:  B E G I N N   */

/*WH: Styles fuer Typeahead custom popup Template*/
.hb-typeahead-custom-popup-wrapper {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1000;
	display: none;
	background-color: #f9f9f9;
}

.hb-typeahead-custom-popup-wrapper>.message {
	padding: 10px 20px;
	border-bottom: 1px solid #dddddd;
	color: #868686;
}

.hb-typeahead-custom-popup-wrapper>.dropdown-menu {
	position: static;
	float: none;
	display: block;
	min-width: 160px;
	background-color: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
}
/* Klasse fuer das Grid innerhalb des Templates fuer Autosuggest von Artikelnr*/
.hb-typeahead-custom-popup-wrapper>.gridAutosuggest {
	width: 100%;
	height: 200px;
}
/* Parameter Autosuggest Typeahead mit ui-grid:  ENDE  */
/***********************************************/

/***********************************************/
/* FOOTER:  B E G I N N   */

/* klee: brand version Footer tuning 
.ft_version {
	font-size: 9px;
}
*/
.hb-footer-p {
	margin-bottom: 4px;
}

.hb-bg-info {
	background-color: #FFFFFF;
}

/* FOOTER:  E N D E
/***********************************************/

/***********************************************/
/* BREADCRUMBS:  B E G I N N   */

/* breadcrumb */
.breadcrumb-wrap {
	margin-top: 0px;
}

.hbBreadcrumb {
	padding-top: 5px;
	padding-bottom: 5px;
	/* klee: 22.09.2022 -- css-Anpassung Einstiegsseite */
	/* padding-left: 0px; */
	padding-left: 6px;
	margin-top: 0px;
	margin-bottom: 9px;
	list-style: none;
	/*background-color: #ffffff;*/
	background-color: #f5f5f5;
	border-radius: 4px;
	/* font-size: 120%; */
	font-size: 12px;
}

/*
.hb-hr{
	height: 2px;
	margin-top: 0px;
	margin-bottom: 0px;
	clear: both;
	background-color: #e7e7e7;
	border: none;
	width: 100%;
}
*/

/* BREADCRUMBS:  E N D E
/*      
/***********************************************/

/***********************************************/
/* SUCHBAUM:  B E G I N N   */
/* Styles fuer den Suchbaum  */

/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
/* Zusätzlich überschriebene Styles von DOJO siehe auch in SuchbaumFrameset2019.php: dijitTreeIcon ...  */
/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
.hbSuchbaumClickHinweis {
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	background: transparent;
	color: #00389A;
	background-color: white;
	width: 100%;
	padding-top: 6px;
}

.hbSuchbaumSelected {
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
	background: transparent;
	color: white;;
	/* 
	sc-hellblau: background-color: #00AEEF !important;
	Dojo-Default: background-color: #e2ebfe !important; */
	background-color: #00389A !important;
	font-weight: normal;
	vertical-align: middle;
	font-weight: normal;
}

.hbSuchbaumKategorieHauptgruppe {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	background: transparent;
	background-color: white;
	color: #00389A;
	vertical-align: middle;
	margin-left: -14px !important;
}

.hbSuchbaumUntergruppe {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	background: transparent;
	color: #00389A;
	background-color: white;
	vertical-align: middle;
}

.hbSuchbaum-panel-default {
	margin-left: 5px;
}

/* Ausblenden des Suchbaumes bei Handy-Grösse */
@media screen and (max-width: 770px) {
	div.suchbaumResponsive {
		display: none;
	}
}

.hbSuchbaum-panel-heading {
	color: #FFFFFF !important;
	background-color: #00AEEF !important;
	height: 34px;
}

/*
@media ( min-width : 1181px) {
	.hbSuchbaum-panel-heading {
		height: 34px;
	}
}
@media ( max-width : 1180px) {
	.hbSuchbaum-panel-heading {
		height: 68px;
	}
}
@media ( max-width : 1036px) {
	.hbSuchbaum-panel-heading {
		height: 93px;
	}
}
*/

/*
/* SUCHBAUM:  E N D E
/***********************************************/

/***********************************************/
/* Detailansicht :  B E G I N N   
*/
#artDetail .hb-btn-best-vor {
	/* color: red; */
	margin-top: -1px;
}

/* WH Stylen Telefonsymbol aus font-awesome*/
#artDetail .hbPhoneSymbol {
	margin-top: 0px;
	margin-left: 10px;
	vertical-align: top;
	color: #00389A;
	font-size: 2em;
}

#artDetail .hbPhoneSymbol:hover {
	color: #00AEEF;
}

/*
/* Style für Bilder-Slideshow in der
/*		 Artikeldetailsseite
/* AUTHOR:FG
/* mri: 28.7.2016 - Bildergalerie Artikeldetailseite Style änderung
*/
div.slideShowDiv {
	outline: 0;
	width: 220px;
	height: 220px;
	max-width: 220px;
	max-height: 220px;
	background-color: white;
	z-index: 9999;
	border: 1px solid grey;
	position: fixed;
	display: table;
	top: 220px;
	left: 345px;
}

@media screen and (max-width: 770px) {
	div .slideShowDiv {
		outline: 0;
		width: 220px;
		height: 220px;
		max-width: 220px;
		max-height: 220px;
		background-color: white;
		z-index: 9999;
		border: 1px solid grey;
		position: fixed;
		display: table;
		top: 150px;
		left: 32px;
	}
}

#artDetail .detailcaptions {
	color: #333333;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	line-height: 100%;
	/*padding-left: 5px;*/
}

/* klee: 22.07.2019 - Spalten in Detailansicht auf Responsive anpasssen */
@media screen and (max-width: 770px) {
	#artDetail .detailcaptions {
		color: #333333;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 11px;
		font-weight: bold;
		line-height: 100%;
		padding-left: 15px;
	}
}

/* favicons bei Faktor 2x auf 1.75 runterscalieren*/
#artDetail .fa-2x {
	font-size: 1.75em;
	/*font-size: 1.60em; */
}
/* klee: 22.07.2019 - Katalog in Detailansicht bei Handy-View ausblenden */
@media screen and (max-width: 770px) {
	div.hbKatalogOffHandy {
		display: none;
	}
}

/* klee: 22.07.2019 - Katalog in Detailansicht bei Handy-View ausblenden */
@media screen and (max-width: 770px) {
	.detailsOffHandy {
		display: none !important;
	}
}

/* klee: 22.07.2019 - Katalog in Detailansicht bei Handy-View ausblenden */
/*@media screen and (max-width: 1280px) { */
@media screen and (max-width: 1280px) {
	.headerKatalogOff {
		display: none !important;
	}
}

.hbShoppingCartSymbolSearch {
	margin-left: 19px;
	color: #00389A;
}

.hbShoppingCartSymbolSearch:hover {
	color: #00AEEF;
}

.hbDetailKatalogBox {
	padding: 0px;
	/* min-height, damit Footer nicht nach oben springt bei Blaettern*/
	min-height: 200px;
}

/* klee: 26.07.2019 - Detailansicht: Vorschaubilder responsive */
.hbMiniPicBig {
	cursor: pointer;
	max-width: 140px;
	max-height: 140px
}

@media screen and (min-width: 770px) and (max-width: 1152px) {
	.hbMiniPicBig {
		max-width: 50%;
		max-height: 50%
	}
}

#artDetail .hbLinkKonfig {
	text-decoration: none;
	font-size: 11px;
	font-family: inherit;
	color: #00389A;
	line-height: 100%;
	font-weight: bold;
}

#artDetail a.hbLinkKonfig:link {
	color: #00389A;
}

#artDetail a.hbLinkKonfig:visited {
	color: #00389A;
}

#artDetail a.hbLinkKonfig:hover {
	color: #00AEEF;
}

#artDetail .hbInputMengeCell {
	margin-top: 2px;
}

/* ohne #artDetail */
.hbShoppingCartSymbolDetail {
	/*margin-left: 20px;
	color: #023f63;*/
	color: #ffffff !important;
	font-family: inherit;
	background-color: #00389A;
	font-weight: bold;
	/*margin: 1px;*/
}

.hbShoppingCartSymbolDetail:hover {
	color: #00AEEF;
}

#artDetail .hbBilderGalerie {
	margin-top: 10px;
	padding-right: 5px;
	padding-left: 5px;
}

#artDetail .hbSpalteLinksTop {
	margin-top: 10px;
	padding-right: 0px;
}

#artDetail .hbTrennerTop {
	border-top: 1px solid #00AEEF;
	padding-top: 5px;
	padding-bottom: 5px;
}

/* wird für Rückmeldungen im Header benutzt */
.hbTrennerBottom {
	border-bottom: 1px solid #00AEEF;
	padding: 5px;
}

.hbBtnLinkAlternativProdukt {
	color: #ffffff !important;
	/*HB_COLOR_BUTTON_OK*/
	background-color: #00389A;
	font-weight: bold;
	width: 120px;
	margin: 1px;
}

#artDetail .standardtext {
	/* grau: color: #999999; */
	color: #666666;
	font-size: 12px;
	font-weight: normal;
	line-height: 100%;
}

#artDetail .standardtextBig {
	/* grau: color: #999999; */
	color: #000000;
	font-size: 13px;
	font-weight: bold;
	line-height: 100%;
}

#artDetail .standardtextHellgrau {
	color: #999999;
	font-size: 11px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	line-height: 100%;
}

#artDetail .hbPreisTabRow {
	padding-top: 5px;
	padding-bottom: 5px;
}

#artDetail .hbLieferterminTabRow {
	padding-top: 5px;
	padding-bottom: 5px;
	/*padding-left: 5px;*/
}

#artDetail .hbGrundPreisHeadline {
	padding-left: 10px
}

@media screen and (max-width: 770px) {
	#artDetail .hbBtnLinkMehrInfo {
		display: none;
	}
}

#artDetail .detailNoArticle {
	color: #333333;
	font-size: 12px;
	font-weight: bold;
	line-height: 100%;
	background: transparent;
	padding-left: 30%;
	padding-top: 5%;
	padding-bottom: 5%;
}

#artDetail .detailtitle {
	color: #333333;
	font-size: 12px;
	font-weight: bold;
	line-height: 100%;
	background: transparent;
}

#artDetail .detailtext {
	color: #585858;
	font-size: 12px;
	line-height: 120%;
	text-align: justify;
	background: transparent;
}

/* // WH: 08.11.2021 - ArtikelDetail: Layout
/* Detailansicht 2021 :  B E G I N N   
*/

/* min-height, damit Footer nicht nach oben springt bei Blaettern*/
#artDetail .art-detail {
	margin-bottom: 0px;
	min-height: 500px;
}

#artDetail fieldset {
	margin-bottom: 10px;
	padding-bottom: 5px;
	padding-top: 5px;
	padding-left: 10px;
	padding-right: 10px;
}

#artDetail fieldset legend {
	font-size: 15px;
	display: inline-block;
	/* WH: 18.10.2022 - ArtikelDetail: Layout-Verbesserungen*/
	/* damit der linke Blaetterpfeil nicht direkt unter dem legend-Text steht*/
	margin-left: 3%;
}

/* wenn mehrere Artikelbilder vorhanden sind*/
/* #artDetail .hbSlide {
	height: 200px; 
}*/

/* wenn nur ein Artikelbild vorhanden ist*/
/*#artDetail .hbSlideOne {
	height: 200px; 
}*/

/* Abstand Logos zu Bilder-Carousel*/
#artikelLogoHbDiv {
	margin-bottom: 13px;
}

#artikelLogoHbDiv .tmsIcon {
	margin: 1px;
}

/* Schriftzug unter dem Bild statt im Bild*/
#artDetail .hb-carousel-caption {
	position: inherit;
	color: black;
	text-shadow: none;
	padding-bottom: 0px;
}

#artDetail #hbMiniPicDiv {
	text-align: center;
	display: table-cell;
	vertical-align: middle;
	border: 1px solid grey;
	height: 40px;
	width: 40px;
	margin-top: 5px;
	margin-right: 2.5px;
	margin-left: 2.5px
}

/* roter Rahmen um kleines Bild, was gerade im Carousel angezeigt wird*/
#artDetail #hbMiniPicDiv.bildActive {
	border-color: red;
}

#artDetail .hbMiniPic {
	margin: auto;
	padding: 0;
	max-width: 40px;
	max-height: 40px;
}

/* Fieldset Preis padding links und rechts verringern, damit Preise in sShop besser Platz haben*/
/* bei soft-carrier das Padding vom fieldset belassen*/
/*#fsArtikelPreis {
	padding-left: 10px;
}
*/
#mengeInsertDiv {
	/*margin-top: 10px;*/
	margin: 5px;
	padding: 5px;
	/*background-color: #f5f5f5;*/
}

#mengeInsertDiv .form-group {
	margin-bottom: 0px;
}

/* Mengenfeld breiter machen*/
#mengeInsertDiv .menge {
	max-width: unset;
}

/* das Input-Feld wie in normalem Bootstrap*/
#mengeInputField .form-control {
	height: 34px;
}

#tableWeitereInfo.table {
	margin-bottom: 0px;
	border-collapse: collapse;
}

#tableWeitereInfo tr td.detailcaptions {
	width: 40%;
}

/* ijm Table weitereInfo bei den Zellen der ersten Zeile die obere Linie weglassen*/
#tableWeitereInfo>tbody>tr:first-child>td {
	border-top: 0px;
}

/* Gefahrgutinfo: Rahmen weg und padding weg, weil im Fieldset*/
#artDetail #fsGefahrgut #gefahrgutDiv {
	border: 0px;
	padding: 0px
}

/* Div mit Link Versandkosten*/
#hinweisVersandkostenDiv hr {
	height: 1px;
	margin-bottom: 5px;
}

/* Aufklappcontainer Gefahrguthinweis*/
/* unsichtbarer Rahmen*/
#artDetail #fsGefahrgut {
	border: 0px;
	padding: 0px;
}

#artDetail #fsGefahrgut .panel-heading {
	background-color: transparent;
}

/*Blaetterpfeile Suchlisting oben dichter ranruecken*/
#artDetail #artikelRowPaging {
	margin-top: -15px;
}
/*Blaetterpfeile Suchlisting nicht ganz so gross*/
#artDetail #artikelRowPaging .fa-3x {
	font-size: 2.5em;
}

/*
/* Detailansicht 2021:  E N D E


/*
/* Detailansicht:  E N D E
/***********************************************/

/***********************************************/
/* Filter + Suche in Suchlisting :  B E G I N N   */
div.keineTreffer {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	padding-top: 5%;
	padding-left: 20%;
	line-height: 125%;
	text-decoration: none;
	color: #00389A;
	float: left;
	cursor: pointer;
}

div.keineTreffer:hover {
	color: #00AEEF;
}

/*
.col-sm-search-filter-hb {
	width: 20%;
	padding-left: 0px;
}*/

/* width-%-Angabe korrespondiert mit col-sm-search-filter-hb <--> col-sm-search-result-hb */
.col-sm-search-filter-hb {
	width: 25%;
	padding-left: 15px;
	padding-right: 5px;
}

/*
.col-sm-search-result-hb {
	width: 80%;
	padding-right: 0px;
}
*/

/* width-%-Angabe korrespondiert mit col-sm-search-filter-hb <--> col-sm-search-result-hb */
.col-sm-search-result-hb {
	width: 75%;
	padding-right: 15px;
}

@media screen and (max-width: 770px) {
	/* WH: 18.03.2019 - Suchseite responsive: Ausblenden von Filtern*/
	div .filterResponsive {
		display: none;
	}
	.col-sm-search-filter-hb {
		width: 0%;
		padding-left: 0px;
	}
	.col-sm-search-result-hb {
		width: 100%;
		padding-right: 0px;
		padding-left: 0px;
	}
}

/* klee: 18.03.2020 - vtmp: Korrekturen neues Layout */
.hbfilterHeadline {
	float: left;
}

/* Use a media query to add a breakpoint at 770px: */
/*  WH 06.03.2019 - Neues VTMP-Layout: bei responsive: Font kleiner fuer alle Elemente */
/* The width is 100%, when the viewport is 770px or smaller */
/* font-size: small !important; */
/*@media screen and (max-width: 770px) {
	* {
		font-size: 11px;
	}
}*/

/*  */
div.filterSort {
	vertical-align: middle;
}

/* klee: 18.03.2020 - vtmp: Korrekturen neues Layout */
.hbfilterSortInput {
	vertical-align: middle;
	margin-top: -2px !important;
}

div.sucheAufSuche {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	line-height: 125%;
	text-decoration: none;
	color: #00389A;
	float: none;
	cursor: pointer;
	margin-top: 10px;
	margin-bottom: 5px;
}

div.sucheAufSuche:hover {
	color: #00AEEF;
}

.hbSearchSuchbegriffAufSuche {
	font-style: normal;
	font-weight: normal;
}

/* klee: 18.03.2020 - vtmp: Korrekturen neues Layout */
.hbFilterInput {
	vertical-align: middle;
}

/* WH: 28.02.2019 - css-Class hbFilterLink */
.hbFilterLink {
	color: #00389A;
	cursor: pointer;
	font-size: 11px !important;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
}

a.hbFilterLink:hover {
	color: #00AEEF;
	text-decoration: none;
	font-size: 11px !important;
	font-weight: normal;
}

/* Korrespondiert mit @media für hbuiSearchDetailTextLink in ui-grid-vtmp.css */
@media screen and (max-width: 990px) {
	.hbFilterLink {
		font-size: 10px !important;
	}
	a.hbFilterLink:hover {
		font-size: 10px !important;
	}
}

div.filterResponsive div.filter {
	margin-left: 2px;
	margin-bottom: 4px;
	width: 100%;
	/* siehe auch max-height div.filterResponsive div.filterOffen*/
	max-height: 180px;
	overflow-x: hidden;
	font-size: 11px;
	white-space: nowrap;
	text-align: left;
}

div.filterResponsive div.filterContainer, td.filter {
	width: 100%;
	font-size: 11px;
}

div.filterResponsive div.filterOffen {
	width: 100%;
	/* max-height sollte um ca. 30px > sein als max-height div.filterResponsive div.filter */
	max-height: 210px;
	border: solid 1px;
	border-color: rgba(204, 204, 204, 0.9) !important;
	border-color: #ccc;
	margin: 5px auto;
	/* runde Ecken*/
	border-radius: 4px;
}

div.filterResponsive div.filterZu {
	width: 100%;
	border: 1px solid #ccc;
	background-color: #dddddd;
	cursor: pointer;
	color: #00389A;
	font-weight: bold;
	padding-left: 5px;
	padding-right: 5px;
	margin: 5px auto;
}

div.filterResponsive div.filterTitel {
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 2px;
	padding-bottom: 3px;
	/* muss um 1px groesser sein als padding-bottom */
	margin-bottom: 3px;
	font-weight: bold;
	color: #00389A;
	width: 100%;
	/*background-color: #dddddd;*/
	background-color: #f5f5f5;
}

div.filterResponsive div.filterMenu {
	position: relative;
	margin-top: 0px;
	float: left;
	width: 100%;
	min-height: 50px;
	margin-right: 10px;
	clear: both;
}

div.filterResponsive div.moreFilter {
	color: #00389A;
	text-decoration: underline;
	cursor: pointer !important;
	text-align: center;
}

div.ergebnisLimit {
	float: left;
	margin-right: 2px;
	/*WH: margin-top 4px fuer buendig mit Navigationspfeilen*/
	margin-top: 4px;
	width: 30px;
	height: 20px;
	/*line-height: 175%;*/
	font-size: 11px;
	border: 1px solid black;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	font-weight: bolder;
	color: white;
	background-color: #00389A;
	height: 20px;
}

div.ergebnisLimitChecked {
	float: left;
	margin-right: 2px;
	/*WH: margin-top 4px fuer buendig mit Navigationspfeilen*/
	margin-top: 4px;
	width: 30px;
	height: 20px;
	/* line-height: 175%; */
	font-size: 11px;
	text-align: center;
	vertical-align: middle;
	border: 1px solid black;
	cursor: pointer;
	font-weight: bolder;
	color: white;
	background-color: #00AEEF;
}

button.ergebnisLimit {
	float: left;
	margin-right: 2px;
	/* line-height: 175%; */
	font-size: 11px;
	border: 1px solid black;
	text-align: center;
	vertical-align: middle;
	font-weight: bolder;
	color: white !important;
	background-color: #00389A;
}

button.ergebnisLimit:hover {
	background-color: #00AEEF;
	color: white;
}

button.ergebnisLimitChecked {
	float: left;
	margin-right: 2px;
	/* line-height: 175%; */
	font-size: 11px;
	text-align: center;
	vertical-align: middle;
	border: 1px solid black;
	font-weight: bolder;
	color: white !important;
	background-color: #00AEEF;
}

button.ergebnisLimitChecked:hover {
	background-color: #00AEEF;
	color: white;
}

.hbAbverkaufsartikel {
	color: #00b300;
	font-weight: bold;
	margin-right: 5px;
}

/*  WH: 13.04.2024 - Optimierung Darstellung Filter in Suche*/
.filterBtnDiv {
	padding: 1px;
}

.hbBtnFilter {
	text-align: left;
}

/*  WH: 11.05.2023 - Optimierung Darstellung Filter: Layout-Aenderungen*/
/* zur besseren Kennzeichnung des geklickten Buttons*/
.btn-primary.hbBtnFilter.active {
	background-color: #00AEEF;
	border-color: #204d74;
}

.hbBtnFilter.btn-xs {
	font-size: 11px;
}

#sucheFilterHbDiv .panel-heading {
	color: #00AEEF;
}

#sucheFilterHbDiv fieldset {
	margin-bottom: 0px;
	padding-top: 10px;
}

#sucheFilterHbDiv fieldset .legend {
	margin-bottom: 0px;
}

/* Cursor als Move-Symbol, um anzuzeigen, dass der Modal-Content draggable (verschiebbar) ist*/
.hb-modal-draggable {
	cursor: move;
}

/* WH: 22.05.2023 - Filter-Modal resizable */

/* Handles fuer das Resize*/
/* Pfeil nach links*/
#hbSucheFilterModalWindow .hb-resizable-w {
	left: 4px;
	top: 10px;
}
/* Pfeil rechts*/
#hbSucheFilterModalWindow .hb-resizable-e {
	right: 14px;
	top: 10px;
}

#hbSucheFilterModalWindow .ui-resizable-handle {
	position: absolute;
	width: 12px;
	height: 12px;
	/*background: rgb(255, 0, 106); */
	/*border-width: 1.5px;
  border-style: solid;
  border-color: rgb(255, 255, 255);
  border-image: initial;
  border-radius: 999px; */
}

#hbSucheFilterModalWindow .resizable-wrapper {
	width: 8px;
	height: 16px;
}

/* Bsp fuer Positionierung der Handles left, right, top left, etc*/
/*
.l {
  left: -4px;
  top: calc(50% - 10px);
  font-family: "FontAwesome";	
	content: "\f177";
	font-weight: 900;
}

.r {
  right: -4px;
  top: calc(50% - 10px);
}

.tl {
  left: -6px;
  top: -6px;
}

.tr {
  right: -6px;
  top: -6px;
}

.bl {
  left: -6px;
  bottom: -6px;
}

.br {
  right: -6px;
  bottom: -6px;
}
*/

/* Font Awesome Icon Haekchen*/
.hbFilterTextChecked::before {
	font-family: "FontAwesome";
	content: "\f00c";
	font-weight: 900;
}

/* Abstand der angedruckten  gewaehltenFilter linker Rand*/
.hbFilterChecked {
	padding: 2px;
}

/* Alle Tooltips in der Farbe ändern fuer die Tooltips an den dunkelblauen Buttons */
.filterBtnDiv .tooltip .tooltip-inner {
	color: black;
	background-color: white;
	border-radius: 5px;
}

/* linker Seite mit Filter-Buttons schmaler*/
.col-sm-search-filter-hb-2023 {
	width: 16%;
	/* damit die Buttons beim Verkleinern des PopUps immer sichtbar bleiben*/
	min-width: 120px;
}

/*Rechte Seite mit Suchergebnis-Grid breitet*/
.col-sm-search-result-hb-2023 {
	width: 83%;
}

/*Rechte Seite mit Filter-Checkboxen*/
.col-sm-filter-liste-hb-2023 {
	padding-left: 0px;
	padding-right: 0px;
}

/* linke Seite Filter Buttons im Popup*/
.col-sm-search-filter-btn-popup {
	/* damit die Buttons beim Verkleinern des PopUps immer sichtbar bleiben*/
	min-width: 120px;
}

ul.filter-liste {
	-moz-column-count: 3;
	-webkit-column-count: 3;
	column-count: 3;
	padding-left: 0em;
	list-style-type: none;
}

/* Checkbox margin-top auf 0px, damit alle filter-liste  columns oben buendig abschliessen*/
ul.filter-liste li>.checkbox {
	margin-top: 0px;
	margin-bottom: 3px;
}

/* WH: 15.05.2023 - Optimierung Darstellung Filter: Layout-Aenderungen */
/* fuer Layout im Modal-Window*/
.hbFilterModalClass {
	font-size: 11px;
}

/* Modal Dialog an rechten Rand*/
.hbFilterModalClass .modal-dialog {
	float: right;
	margin-right: 7px;
	/* position fixed und left gesetzt, damit beim Resize der Dialog stehenbleibt*/
	position: fixed;
	left: 49%;
}

/* ausgegrauten Hintergrund heller machen, damit man unterliegendes Listing besser sieht*/
.hbFilterModalBackdropClass {
	opacity: .2 !important;
}

/* Buttons zum Resize des Filter-Modals*/
#hbFilterResizeDiv {
	float: left;
	cursor: pointer;
	margin-left: 20px;
	border-style: solid;
	border-width: thin;
}


/*  WH: 19.12.2024 - Css-Styles fuer Bild Gross in Suche */
@media screen and (min-width: 1280px) {
	.sucheBildGross {
		max-width: 550px; 
		max-height: 550px;
	}
}

@media screen and (min-width: 970px) and (max-width: 1280px) {
	.sucheBildGross {
		max-width: 400px; 
		max-height: 400px;
	}
}
/* Warum hier nicht 750 funktioniert versteht klee nicht */
@media screen and (min-width: 770px) and (max-width: 970px) {
	.sucheBildGross {
		max-width: 300px; 
		max-height: 300px;
	}
}

@media screen and (max-width: 770px) {
	.sucheBildGross {
		max-width: 200px; 
		max-height: 200px;
	}
}

/*
/* Filter + Suche in Suchlisting :  E N D E
/***********************************************/

/***********************************************/
/* TMS / Markenwelten:  B E G I N N   */

/* klee: die festen width (aus z.B. /home/soft/data/tms/shared/styles/8600.css etc.) überschreiben 
#tmsMenuLinks .nav_box { width: 100%; } korrespondiert mit id="tmsMenuLinks" 
und bedeutet, das alle Styles .nav_box-Klassen mit width: 100%; überschrieben werden
*/

/* klee: die festen width (aus z.B. /home/soft/data/tms/shared/styles/8600.css etc.) überschreiben 
#tmsMenuLinks .nav_box { width: 100%; } korrespondiert mit id="tmsMenuLinks" 
und bedeutet, das alle Styles .nav_box-Klassen mit width: 100%; überschrieben werden
*/

/* 	klee: body:not(.home) .hbTmsContainer { 
	funktioniert wg. ng-class an dieser Stelle nicht
	=> 2 Styles: hbTmsContainerHome hbTmsContainerNotHome */
.hbTmsContainerHome {
	padding-bottom: 30px;
}

.hbTmsContainerNotHome {
	padding-top: 0px;
	padding-bottom: 30px;
}

/* WH: 16.09.2022 - Markenwelten: Styleaenderungen auf Wunsch sc*/
.hbTmsMarkenlogo {
	/*max-height: 80px;
	max-width: 80px; */
	height: 80px;
	padding-top: 12px;
	/* max-width auf 100%, weil sonst einige breite Logos ueber den rechten Rand ragen*/
	max-width: 100%;
}

/* TM Header :  B E G I N N  */

/* klee: 31.01.2020 - vtmp-Grundlayout Webfaden: Neue Einbettung Markenwelten */
.hbTmsHeaderContainer {
	padding-top: 0px;
}

#tmsHeader {
	margin-bottom: 15px;
	font-family: 'Roboto', Arial, sans-serif !important;
}

#tmsHeader .h1 {
	font-size: 12px;
	line-height: 28px;
	color: #fff;
	font-weight: bold;
	text-align: center;
	margin: 0;
	padding: 0;
}

#tmsHeader .marken_box {
	padding-top: 10px;
	padding-bottom: 10px;
}

.row-flex {
	-ms-display: flex;
	display: flex;
	-ms-flex-align: center;
	align-items: center;
}

/*WH: 16.09.2022 Layoutanpassung*/
div.tmHeaderContent {
	margin-left: 5px;
}

.tmHeaderContent>* {
	display: inline-block;
}

.tmHeaderContent>* {
	display: inline-block;
}

.tmHeaderContent .navbar-form {
	padding: 0;
	margin: 0 0 0 15px;
}

/* klee: Suchfelder sonst immer rot => .tmHeaderContent button eingeführt
.tmHeaderContent a.btn {
	color: #CC3333;
}*/
.tmHeaderContent button {
	/*color: #CC3333 !important;*/
	font-family: 'Roboto', Arial, sans-serif !important;
	font-weight: normal !important;
	font-size: 14px !important;
}

.tmHeaderContent .btn-default.focus, .tmHeaderContent .btn-default:focus
	{
	color: inherit;
	/* klee: falls geklickter Button nicht in grau erscheinen soll =>
    background-color: #FFFFFF; */
}

/* klee: aus Infogründen bitte erhalten:
.tmHeaderContent .btn-default.hover, .tmHeaderContent .btn-default:hover {
     color: inherit;
}
*/

/* klee: Input-Feld analog zu tmHeaderContent button stylen */
.tmHeaderContent input {
	font-family: 'Roboto', Arial, sans-serif;
	font-weight: normal !important;
	font-size: 14px !important;
}

.tmFormSearch {
	margin: 0px !important;
}

/* klee: aus Infogründen bitte erhalten
Placeholder und Input auf Markenwelt-Farbe setzen: 
	dazu  <input class="content_kapitel"
	+
	weitere Feinheiten durch untere Style-Möglichkeiten 
	
.tmHeaderContent input::placeholder { 
	color: inherit; 
}
*/

/* TM Header :  E N D E */

/* tmsMenuLinks :  B E G I N N */
.hbTmsMenuLinks { /*margin-right: -2%;*/
	padding-left: 0px;
	padding-right: 0px;
}

#tmsMenuLinks * {
	/* font-family: Arial, Helvetica, sans-serif; */
	font-family: 'Roboto', Arial, sans-serif;
	font-size: 12px;
}

#tmsMenuLinks .nav_box {
	width: 100%;
	/*margin-left: -15px;*/
}

#tmsMenuLinks .nav_head {
	width: 100%;
	margin-left: -2px;
}

#tmsMenuLinks .nav_rahmen {
	width: 100%;
}

#tmsMenuLinks .markenlogo {
	width: 0%;
}

#tmsMenuLinks .nav_headline {
	text-align: center;
}

#tmsMenuLinks .nav_text {
	text-align: center;
}

/* tmsContent:  B E G I N N  */
.hbTmsContent {
	padding-right: 4px;
	padding-left: 0px;
}

#tmsContent * {
	/* font-family: Arial, Helvetica, sans-serif; */
	font-family: 'Roboto', Arial, sans-serif;
	/* font-size: 12px; */
}

#tmsContent .content_box {
	width: 100%;
	/*margin-right: -15px;*/
}

#tmsContent .content_head {
	width: 100%;
}

#tmsContent .content_rahmen {
	width: 100%;
}

#tmsContent .content_table {
	width: 100%;
}

/*WH: Markenwelt als Component*/
#tmsContent .content_table_tms {
	width: 100%;
	border-collapse: unset;
	border-spacing: 10px;
}

#tmsContent .content_kapitel {
	font-size: 14px;
}

.hbTmsMainHeading {
	padding-left: 0px;
	padding-right: 0px;
}

/*WH: TMS Markenwelt als Componet*/
/* gerundete Ecken*/
#hbMarkenweltDiv .nav_head {
	border-radius: 4px;
}

#hbMarkenweltDiv .content_head {
	border-radius: 4px;
}

#hbMarkenweltDiv .nav_rahmen {
	border-radius: 4px;
	border: none;
}

#hbMarkenweltDiv .content_td {
	border-radius: 4px;
}

/* fieldset Abstand nach oben und innen*/
#hbMarkenweltDiv fieldset {
	margin-top: -15px;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 0px;
	padding-right: 10px;
}

/*
/* TMS / Markenwelten:  E N D E
/***********************************************/

/***********************************************/
/* Styles für Banner TMS:  B E G I N N   */
.hbTmsBanner {
	padding-left: 0px;
	padding-right: 0px;
	margin-left: 0px;
	margin-right: 0px;
}

#tmsBanner .ft_box {
	text-align: center;
	padding-left: 0px;
	padding-right: 0px;
	margin-top: 5px;
	margin-left: 0px;
	margin-right: 0px;
	width: 100%;
	/*max-height: 100%;*/
}

/* <hr> ausblenden */
#tmsBanner hr {
	display: none;
}

#tmsBanner .ft_banner {
	margin-left: 0px !important;
	margin-right: 0px !important;
	width: 33.3% !important;
	float: left;
	margin-top: -7px;

	/*max-height: 125px;
	max-width: 430px;*/
}

@media ( max-width : 770) {
	#tmsBanner .ft_banner {
		margin-top: 30px;
	}
}

#tmsBanner .ft_showcase {
	margin-left: 0px !important;
	margin-right: 0px !important;
	width: 33.3% !important;
	float: right;
	/*margin-top: -19px;*/
	margin-top: -7px;
	max-height: 125px;
	max-width: 180px;
}

@media ( max-width : 360px) {
	#tmsBanner .ft_showcase {
		margin-top: 30px;
	}
}

#tmsBanner .ft_images {
	border: solid 1px #ccc;
	width: 99%;
	margin-left: -3px;
	margin-right: -3px;

	/*max-height: 125px;
	max-width: 430px;*/
}

/*
/* Styles für Banner TMS:  E N D E
/***********************************************/

/***********************************************/
/* Styles für Banner Gesamtkatalog:  B E G I N N   */

/* banner Gesamtkatalog  */
/*
.ft_images_gesamtKatalog {
	margin: 0px;
	width: 33.0%;
	border-color: rgb(204, 204, 204);
	border-style: solid;
	border-width: 1px;
}
.ft_box_gesamtKatalog {
	text-align: center;
	padding-left: 0px;
	padding-right: 0px;
	margin-top: -6px;
	margin-bottom: 2px;
}
*/
.ft_images_gesamtKatalog {
	border-color: rgb(204, 204, 204);
	border-style: solid;
	border-width: 1px;
	/* mit width kann man Space zwischen Bannern steuern */
	width: 100%;
}

.ft_box_gesamtKatalog {
	text-align: center;
	padding-left: 0px;
	padding-right: 0px;
	margin-top: -6px;
	margin-bottom: 2px;
	margin-left: -5px;
	display: flex;
	justify-content: space-between;
}

/*
/* Styles für Banner Gesamtkatalog:  E N D E
/***********************************************/

/***********************************************/
/* Warenkorb Auswahl Liste:  B E G I N N   */
/*Modal Header*/
#wkAuswahlModalDiv h4.modal-title {
	color: #00389A;
	font-weight: normal;
}

#wkAuswahlModalDiv  fieldset {
	margin-bottom: 1px;
}

/*table*/
#wkAuswahlModalDiv .table
.table-wk-wahl-list>thead
:first-child>tr
:first-child>th {
	border-top: 1px solid #ddd;
	padding: 11px 8px;
	background-color: #f5f5f5;
}

#wkAuswahlModalDiv  .table {
	margin-bottom: 0px;
}

#wkAuswahlModalDiv  td {
	padding-bottom: 1px;
	padding-top: 1px;
	vertical-align: middle;
}

@media ( max-width : 770px) {
	#wkAuswahlModalDiv .table-wk-wahl-list th, .table-wk-wahl-list td {
		display: block;
	}
	/* WH: Spaltenkoepfe ausblenden*/
	/* nth-child(1): Spalte Warenkorb-Bezeichnung bleibt*/
	/* nth-child(2): Spalte Positionen/Artikel bleibt*/
	/* nth-child(3): Spalte In Bearbeitung*/
	#wkAuswahlModalDiv .table-wk-wahl-list thead th:nth-child(3),
		.table-wk-wahl-list thead td:nth-child(3),
		/* nth-child(4): Spalte Zum Warenkorb*/ #wkAuswahlModalDiv .table-wk-wahl-list thead th:nth-child(4),
		.table-wk-wahl-list thead td:nth-child(4) {
		display: none;
	}

	/* Text der Spalte Positionen/Artikel nach rechts*/
	#wkAuswahlModalDiv .table-wk-wahl-list thead th:nth-child(2) {
		text-align: right;
	}

	/* 3. und 4. Spalte nach links schieben*/
	#wkAuswahlModalDiv .table-wk-wahl-list tbody th:nth-child(3),
		#wkAuswahlModalDiv .table-wk-wahl-list tbody td:nth-child(3),
		#wkAuswahlModalDiv .table-wk-wahl-list tbody th:nth-child(4),
		#wkAuswahlModalDiv .table-wk-wahl-list tbody td:nth-child(4) {
		float: left;
		width: 33.0%;
		/*width:15.0%;*/
	}
}
/*
/* Warenkorb Auswahl Liste:  E N D E
/***********************************************/

/***********************************************/
/* WARTUNGS-HINWEIS:  B E G I N N   */

/* Style für jquery-overlay */
.hbJqueryOverlay {
	background: #FFFFFF;
	width: 80%;
	margin-top: 100px;
	padding: 10px;
	border: 1px solid red;
}

.hbJqueryOverlayCloseButton {
	border: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: white;
	line-height: 120%;
	text-decoration: none;
	vertical-align: middle;
	horizontal-align: right;
	background-color: #00aeef;
	cursor: pointer !important;
	cursor: hand;
}
/*Overlay um Formulare als deaktiv zu markieren*/
.hb-overlay {
	/* position:absolute; */
	top: 0;
	/* left:10%;*/
	background: grey;
	color: white;
	opacity: 0.5;
	/*  width:90%;*/
	width: 100%;
	height: 100%;
}
/*
/* WARTUNGS-HINWEIS:  E N D E
/***********************************************/

/***********************************************/
/* TMS / Markenwelten-übersicht:  B E G I N N   */

/* klee: Markenwelten-übersicht -- übernommen von https://www.softcarrier.de/cms/softde/de/info/marken.html */
.hbMarkeLogoHeading {
	font-size: large;
	font-weight: bold;
}

.hbMarkeLogoPanel {
	border: #FFFFFF !important;
	/*margin-bottom: 9px;*/
}

.hbMarkeLogoPanelBody {
	padding: 15px !important;
	text-align: center;
}

.hbMarkeLogoNavbarForm {
	margin-top: 0px;
}

.hbMarkeLogoSearchButton {
	border-bottom-right-radius: 3px !important;
	border-top-right-radius: 3px !important;
}

.hbMarkeLogoContainer {
	width: 90px;
	height: 80px;
	margin: 0;
	/*float: left;*/
}

.hbMarkeLogoImage {
	margin: 5px;
}

/* klee: 10.10.2022 -- Umstellung Markenwelten im webShop auf Marken */
.hbMarkeLogoImageUebersicht {
	margin: 0px !important;
}

.brands-wrap.d-flex {
	margin-left: -7px;
	margin-right: -8px;
}

.justify-content-center {
	-ms-flex-pack: center !important;
	justify-content: center !important;
}

.flex-fill {
	-ms-flex: 1 1 auto !important;
	flex: 1 1 auto !important;
}

.flex-wrap {
	-ms-flex-wrap: wrap !important;
	flex-wrap: wrap !important;
}

.d-flex {
	display: -ms-flexbox !important;
	display: flex !important;
}

.brand-item-out-wrap {
	width: 95px;
	height: 99px;
	padding: 0px 8px 37px 7px;
}

.brand-logo-wrap {
	position: relative;
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	margin: 0;
	font-size: 10px;
}

.brand-logo-wrap.brand-logo-wrap span.d-block {
	border: 1px solid #d2d2d2;
	padding: 3px;
	width: 80px;
	height: 70px;
	margin: 0;
	text-align: center;
}

.brand-logo-wrap.brand-logo-wrap img.brand-logo {
	max-width: 100%;
	max-height: 100%;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	transition: all .2s ease-in-out;
}

.d-block {
	display: block !important;
}

brand-logo-wrap.brand-logo-wrap span.d-block {
	text-align: center;
}

.brand-logo-wrap.brand-logo-wrap img.brand-logo {
	max-width: 100%;
	max-height: 100%;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	transition: all .2s ease-in-out;
}

.marken-shop-hover {
	position: absolute;
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	background: transparent;
	white-space: nowrap;
	opacity: 1;
	width: 100%;
	height: 20px;
	bottom: -20px;
	left: 0%;
	font-size: 12px;
	line-height: 16px;
	color: #212121;
	text-align: center;
	transition: all .2s ease-in-out;
}

/*
/* TMS / Markenwelten-übersicht:  E N D E
/***********************************************/

/***********************************************/
/* Style für die Farben für Table EKR
/* AUTHOR:Klee , WH
/***********************************************/

/***********************************************/
/* EKR:  B E G I N N   */
.bgcolorEKR {
	background-color: #DDDDDD;
}

/* RadioButtons im Ekr-Formular*/
#hbEkrDiv .radio {
	padding-left: 10px;
}

/* Padding der Cols verringern*/
#hbEkrDiv .col-lg-4 {
	padding-right: 5px;
	padding-left: 5px;
}

/* Padding des fieldsetzs verringen*/
#hbEkrDiv fieldset {
	padding-right: 5px;
	padding-left: 5px;
}

#hbEkrDiv .control-label {
	font-weight: bold;
}
/* in den Tables die linke Spalte schmaler setzen, damit die Selectboxen mehr Platz haben*/
#hbEkrDiv .table-ekr-zahlung td {
	width: 30%;
}

/* Preisfelder schmaler*/
#hbEkrDiv .table-ekr-zahlung td.formtext input {
	width: 50%;
}

/*
/* EKR:  E N D E
/***********************************************/

/***********************************************/
/* Style fuer Artikelhinweise 
/* AUTHOR:Webfaden
/* WH: 10.10.2019 - Webfaden-Styles fuer Warenkorb-Artikelhinweise integriert
/***********************************************/

/***********************************************/
/* Artikelhinweise:  B E G I N N   */
/*Modal Header*/
h3.modal-title {
	color: #00389A;
	font-weight: normal;
}
/*table*/
.table.table-wk-hinweise-list>thead:first-child>tr:first-child>th {
	border-top: 1px solid #ddd;
	padding: 11px 8px;
	background-color: #f5f5f5;
}

.table.table-wk-hinweise-list td:nth-child(4), .table.table-wk-hinweise-list td:nth-child(8)
	{
	text-align: center
}

.table.table-wk-hinweise-list td:nth-child(6), .table.table-wk-hinweise-list td:nth-child(7)
	{
	text-align: right
}

@media screen and (max-width:991px) {
	.table
.table-wk-hinweise-list>thead
:first-child>tr
:first-child>th {
		display: none;
	}
	.table
.table-wk-hinweise-list
 
td {
		display: inline-block;
	}
	.table
.table-wk-hinweise-list
 
td
:before {
		content: "";
		font-weight: bold;
	}
	.table
.table-wk-hinweise-list
 
td
:nth-child(1) {
		width: 100%;
		border-color: #00389A;
	}
	.table
.table-wk-hinweise-list
 
td
:nth-child(1)
:before {
		content: "Best.-Nr.: ";
	}
	.table
.table-wk-hinweise-list
 
td
:nth-child(2) {
		width: 100%;
		border: 0;
	}
	.table
.table-wk-hinweise-list
 
td
:nth-child(2)
:before {
		content: "Artikel: ";
	}
	.table
.table-wk-hinweise-list
 
td
:nth-child(3) {
		width: 100%;
	}
	.table
.table-wk-hinweise-list
 
td
:nth-child(3)
 
span
.fa {
		display: none;
	}
	.table
.table-wk-hinweise-list
 
td
:nth-child(4) {
		width: 32.5%;
		text-align: left;
	}
	.table
.table-wk-hinweise-list
 
td
:nth-child(4)
:before {
		content: "VPE: ";
	}
	.table
.table-wk-hinweise-list
 
td
:nth-child(5) {
		width: 66%;
		text-align: left;
	}
	.table
.table-wk-hinweise-list
 
td
:nth-child(5)
:before {
		content: "Lieferbar: ";
	}
	.table
.table-wk-hinweise-list
 
td
:nth-child(6) {
		width: 32.5%;
		text-align: right;
		padding-right: calc(32.5% - 
 
 80px);
		position: relative;
	}
	.table
.table-wk-hinweise-list
 
td
:nth-child(6)
:before {
		content: "ab Stück: ";
		position: absolute;
		top: 5px;
		left: 5px;
	}
	.table
.table-wk-hinweise-list
 
td
:nth-child(7) {
		width: 32.5%;
		text-align: right;
		padding-right: calc(32.5% - 
 
 100px);
		position: relative;
	}
	.table
.table-wk-hinweise-list
 
td
:nth-child(7)
:before {
		content: "Preis*: ";
		position: absolute;
		top: 5px;
		left: 5px;
	}
	.table
.table-wk-hinweise-list
 
td
:nth-child(8) {
		width: 32.5%;
		text-align: left;
	}
	.table
.table-wk-hinweise-list
 
td
:nth-child(8)
:before {
		content: "Menge: ";
	}
	.table
.table-wk-hinweise-list
 
td
:nth-child(9) {
		width: 100%;
		background-color: rgba(0, 0, 0, 0.10);
	}
	.table
.table-wk-hinweise-list
 
td
:nth-child(9)>* {
		display: inline-block;
		margin: 0 10px 0 0;
		width: auto;
	}
	.table
.table-wk-hinweise-list
 
td
:nth-child(9)>.radio
.reaktion-wrap {
		position: relative;
		bottom: -5px;
		margin-bottom: 5px;
	}
	.table
.table-wk-hinweise-list
 
td
:nth-child(9)
:before {
		content: "Aktion pro Artikel: ";
		margin-right: 20px;
	}
}

.radio.reaktion-wrap {
	margin-top: -2px;
	text-align: center;
}

.radio.reaktion-wrap label span.fa {
	width: 25px;
}

.reaktion-wrap input[type="radio"] {
	margin-top: 7px;
}

input.form-control.menge {
	max-width: 180px;
	text-align: right;
}

.table.table-wk-hinweise-list td:nth-child(9) select {
	min-width: 170px;
}

.table.table-wk-hinweise-list td:nth-child(9) select.form-control.blue {
	color: #00389A;
}

.table.table-wk-hinweise-list td:nth-child(9) select.form-control.red {
	color: #e51c23;
}
/*Color*/
.lightblue {
	color: #66afe9;
}

.blue {
	color: #00389a;
}

.green {
	color: #4caf50;
}

.yellow {
	color: #f0ad4e;
}

.red {
	color: #e51c23;
}
/*WH: Styles von hiblue fuer die textliche Auszeichnung von Artikelhinweisn*/
.artikelhinweisHeadline {
	font-weight: bold;
	color: #cc0000
}

.artikelhinweisText {
	/*Hier noch kein eigenes Styling*/
	
}

.artikelhinweisTextHervorhebung {
	font-weight: bold;
}

.artikelhinweisMengeFeld {
	margin-right: 7%;
	margin-bottom: 12%;
}

/*
/* Artikelhinweise:  E N D E
/***********************************************/

/***********************************************/
/* WARTUNGS-HINWEIS:  B E G I N N   */

/* Style für jquery-overlay */
.hbJqueryOverlay {
	background: #FFFFFF;
	width: 80%;
	margin-top: 100px;
	padding: 10px;
	border: 1px solid red;
}

.hbJqueryOverlayCloseButton {
	border: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: white;
	line-height: 120%;
	text-decoration: none;
	vertical-align: middle;
	horizontal-align: right;
	background-color: #00aeef;
	cursor: pointer !important;
	cursor: hand;
}

/*
/* WARTUNGS-HINWEIS:  E N D E
/***********************************************/

/***********************************************/
/* EINGABEFORMULARE:  B E G I N N   */
/* Vorlage von webfaden mit Rahmen mit runden Ecken*/
.form_margin_bottom {
	margin-bottom: 30px;
}

fieldset {
	margin-bottom: 30px;
	padding: 20px;
	border: 1px solid rgba(0, 0, 0, .15);
	border-radius: 4px;
}

legend {
	/* display: inline-block; */
	/* WH: 04.12.2019 - Styleaenderung wegen IE11 und Edge
    fkt auch fuer FF und Chrome*/
	display: flex;
	width: auto;
	border: none;
	padding: 0 10px;
	margin-bottom: 5px;
	color: #00389A;
}

/* Hier Bsp fuer die Erkennung der MicrosoftBrowser IE und Edge */
/*WH: 04.12.2019 - Styleaenderung wegen IE11
 IE11 erkennung */
/* damit legend Text links oben innerhalb des Rahmens von fieldset erscheint*/
/*@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    legend {
        display:flex;
    }
}
*/

/* Edge Erkennung */
/* damit legend Text links oben innerhalb des Rahmens von fieldset erscheint*/
/*@supports (-ms-ime-align:auto) {
	legend {
        display:flex;
    }
}
*/
.form-horizontal .form-inline .form-group {
	margin-right: 0;
	margin-left: 0;
}

.control-label {
	color: #999;
}

.control-label.pflicht-feld {
	color: #212121;
}

.control-label.pflicht-feld.newsletter {
	text-align: left;
}

.control-label.pflicht-feld::after {
	content: " * ";
}

.pflicht-checkbox-label {
	color: #212121;
}

.pflicht-checkbox::before {
	content: " * ";
}

.form-control#lkz, .form-control#plz, .form-control#ort {
	display: inline-block;
}

.form-control#lkz {
	width: 50px;
}

.form-control#lkz+span {
	display: inline-block;
	width: 10px;
	text-align: center;
}

.form-control#plz {
	width: 70px;
	margin-right: 10px;
}

.form-control#ort {
	width: calc(100% - 150px);
}

i.input-comment {
	display: block;
	margin-top: 5px;
	font-size: 95%;
	color: #777;
}

.alert.alert-info.pp-windows {
	position: absolute;
	background-color: #ffffff;
	width: 80%;
	height: 80vh;
	top: 10vh;
	left: 10%;
	overflow-y: auto;
	padding: 20px;
	border: 1px solid rgba(0, 0, 0, .15);
	border-radius: 4px;
	-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
	box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
	z-index: 99999;
}

.alert.alert-info.pp-windows button {
	float: right;
}

.clear {
	float: none;
	clear: both;
}

/* WH: 30.03.2021 alert-shop-default mit den StandardFarben fuer den Shop als Rahmen und als Schrift */
/* als Ergaenzung zu bootstrap class alert */
.alert-shop-default {
	background-color: #f5f5f5;
	border-color: #00389A;
}
/*
/* EINGABEFORMULARE:  E N D E
/***********************************************/

/***********************************************/
/* Bestellvorlagen :  B E G I N N   */
.vorlageBezeichnung-wrap {
	margin-top: 5px;
	margin-bottom: 5px;
}

/* WH: 10.01.2020 - Table-Definitionen entfernen, falls nicht mehr gebraucht*/
/*table*/
.table.table-bv>thead:first-child>tr:first-child>th {
	border-top: 1px solid #ddd;
	padding: 11px 8px;
	background-color: #f5f5f5;
}
/*W: Padding minimiert wegen Platzersparnis*/
.table.table-bv td {
	padding: 2px;
}

.table.table-bv td span.bv-name {
	display: inline-block;
	width: calc(100% - 250px);
	min-width: 220px;
	/* WH: font-weight entfernt fuer Platzersparnis */
	/*font-weight: bold;*/
}

.table.table-bv td span.bv-action {
	display: inline-block;
	/* WH: width entfernt, damit Zeile nicht umbricht im Table*/
	/*width:240px; */
	width: 240px;
	white-space: nowrap;
}

/* Hervorhebung Artikel bereits in Bestellvorlage enthalten*/
.artikel-in-bv-enthalten {
	color: #00389A;
	/* WH: font-weight entfernt fuer Platzersparnis */
	/*font-weight: bold;*/
}

/*WH: fuer das Listing der Bestellvorlagen in Warenkorb oder Detailansicht zum Uebernehmen eines Artikels*/
ul.bv-liste {
	-moz-column-count: 3;
	-webkit-column-count: 3;
	column-count: 3;
	padding-left: 0em;
	list-style-type: none;
}

/*WH: Checkbox Div innerhalb der Liste soll keinen Abstand nach oben haben,
weil sonst die Listenelemente versetzt erscheinen zu den anderen Spalten*/
ul.bv-liste li .checkbox {
	margin-top: 0px;
}

#bestellvorlageHbDiv .panel {
	margin-bottom: 10px;
}

/*WH: fuer die Bestellvorlagen-Verwaltung : alles im Div mit id = #bestellvorlageHbDiv */
#bestellvorlageHbDiv .panel-heading, .service-info .panel-heading button
	{
	font-size: 110%;
	text-transform: none;
	color: rgb(102, 102, 102);
}

#bestellvorlageHbDiv .btn-toggle {
	padding: 0;
	width: 100%;
	background: transparent;
	text-align: left;
}

#bestellvorlageHbDiv .btn-toggle, #bestellvorlageHbDiv .btn-toggle:hover,
	#bestellvorlageHbDiv .btn-toggle:focus, #bestellvorlageHbDiv .btn-toggle:active
	{
	-webkit-box-shadow: none;
	box-shadow: none
}

#bestellvorlageHbDiv .btn-toggle i {
	line-height: 26px;
	float: right;
}

#vorlageVerwaltungDiv {
	/* margin-top setzen, um Abstand zwischen Ueberschrift Bestellvorlagen und Panel zu verringern*/
	margin-top: -20px;
}

/*WH: Abstand der Elemente im Panel-Heading nach oben*/
#bestellvorlageHbDiv .margin-top-heading {
	/*margin-top: 15px; */
	
}

/* WH: 
Panel-Heading in der Hoehe schmaler, neue css-Anweisung fuer panel-heading innerhalb von #bestellvorlageHbDiv*/
#bestellvorlageHbDiv .panel-heading {
	padding-top: 5px;
	padding-bottom: 2px;
	padding-left: 15px;
	padding-right: 15px;
	border-bottom: 1px solid transparent;
	border-top-right-radius: 3px;
	border-top-left-radius: 3px;
}

/*WH: Dropdown Liste Button in Hoehe schmaler*/
#bestellvorlageHbDiv .btn-block {
	padding: 2px;
}

/*WH: Aufklapppfeil eigenen Klasse damit buendig */
#bestellvorlageHbDiv .toggleVorlageVerwaltung {
	float: right;
	margin-top: -20px;
	padding-right: 15px;
}

/*WH: Einpassen Schnellerfassung in Bestellvorlage*/
#bestellvorlageHbDiv .hb-art-schnell-row {
	width: 85%;
}

#bestellvorlageHbDiv .hb-art-schnell-select {
	padding-right: 0px;
}

#bestellvorlageHbDiv .hb-art-schnell-select .form-group {
	margin-bottom: 0px;
}

#bestellvorlageHbDiv .hb-art-schnell-input {
	padding-right: 0px;
}

#bestellvorlageHbDiv .hb-art-schnell-input .form-group {
	margin-bottom: 0px;
}

#bestellvorlageHbDiv .hb-padding {
	padding-right: 0px;
}

/*WH: Positionieren des Buttons rechts neben Input-Feld der Schnellerfassung Component*/
#bestellvorlageHbDiv .hb-col-btn-artikel-schnell {
	margin-left: -120px;
}

#bestellvorlageHbDiv .hb-btn-artikel-schnell {
	/*margin-top: 20px;*/
	
}

/*Bestellvorlage: Div mit Listing nicht mehr lieferbarer Artikel*/
#bestellvorlageArtNichtLieferbarDiv .panel-heading {
	padding-top: 0px;
	padding-bottom: 0px;
}

#bestellvorlageArtNichtLieferbarDiv .hb-panel-border {
	border-style: solid;
	border-width: thin;
	border-color: red;
}

#bestellvorlageArtNichtLieferbarDiv .hb-ueberschrift {
	font-weight: bold;
}

#bestellvorlageArtNichtLieferbarDiv .btn-toggle i {
	line-height: 26px;
	float: right;
}

/* Text muted bei disabled Elementen, ein ganz schwaches Grau, weil
sonst schlecht unterscheidbar von der normal dunkelgrauen Schrift*/
#bestellvorlageArtNichtLieferbarDiv .text-muted {
	color: #b1afaf;
}

/* Kreuzchen zum Schliessen des Edit-Bereichs bei Neuanlegen/Aendern Bestellvorlage
am rechten oberen Rand des Fieldsets*/
#bestellvorlageHbDiv fieldset .hbCloseIcon {
	float: right;
	margin-left: -10px;
}

@media ( min-width : 1519px) {
	ul
.bv-liste {
		-moz-column-count: 4;
		-webkit-column-count: 4;
		column-count: 4;
	}
}

@media ( max-width : 991px) {
	ul
.bv-liste {
		-moz-column-count: 2;
		-webkit-column-count: 2;
		column-count: 2;
		-webkit-hyphens: auto;
		-moz-hyphens: auto;
		-ms-hyphens: auto;
		hyphens: auto;
	}
}

@media ( max-width : 499px) {
	ul
.bv-liste {
		-ms-word-break: break-all;
		word-break: break-all;
		word-break: break-word;
	}
}
/*
/* Bestellvorlagen:  E N D E
/***********************************************/

/***********************************************/
/* Artikelnotiz:  B E G I N N   */
/* Formular zum Eingeben einer Notiz zum Artikel in Bestellvorlagen oder Warenkorb*/
#artikelNotizHbDiv.artikel-notiz {
	margin-bottom: 0px;
	padding: 5px;
}

/* Abstand nach oben zur legend des fieldset, Abstand nach unten zum Input-Feld*/
#artikelNotizHbDiv .artikel-notiz-bezeichnung {
	margin-top: -10px;
	margin-bottom: 15px;
	font-weight: bold;
}

/* margin-botton ueberschreiben, weil sonst viel Abstand unten im Modal-Dialog*/
#artikelNotizHbDiv fieldset {
	margin-bottom: 0px;
}

/*
/* Artikelnotiz:  E N D E
/***********************************************/

/***********************************************/
/* Header #top-header-tabs:  B E G I N N   */
/* (Webfaden: 19.06.2020) */
.head-tabs-wrap {
	padding-top: 7px;
	border-bottom: 1px solid #00328a;
}

.nav-tabs {
	border-bottom: none;
}

.nav-tabs .nav-item {
	margin-right: 3px;
	margin-bottom: -1px;
}

/* klee: 19.06.2020 - Einbau der COM-Snippets von Webfaden */
/*
.head-tabs-wrap .nav-tabs .dropdown-menu {
	width: 100%;
	top: 100% !important;
	left: -1px !important;
	z-index: 10000;
}
*/
.head-tabs-wrap .nav-tabs .dropdown-menu {
	min-width: 100%;
	min-width: calc(100% + 1px);
	width: auto;
	top: 100% !important;
	left: -1px !important;
	z-index: 10000;
}

.head-tabs-wrap .nav-tabs .nav-link {
	/*border-color: #e9ecef #e9ecef #00328a; */
	border-color: #e9ecef #e9ecef #e9ecef #e9ecef;
	text-transform: none;
	font-size: 14px;
	text-transform: none;
}

.head-tabs-wrap .nav-tabs .nav-link:hover, .head-tabs-wrap .nav-tabs .nav-link:focus
	{
	/*border-color: #00aeef #00aeef #00328a;*/
	border-color: #00aeef #00aeef #FFFFFF;
	background-color: #fff;
}

.head-tabs-wrap .nav-tabs .nav-link.active {
	color: #fff;
	background-color: #00389a;
	border-color: #00328a #00328a #00389a;
}

.logo-tab-img {
	height: 18px;
	line-height: 18px;
	display: inline-block;
	margin-top: 0;
	margin-bottom: 0;
	width: auto;
	-webkit-transition: all 0.5s;
	/* Safari */
	transition: all 0.5s;
}

/* klee: 19.06.2020 - Einbau der COM-Snippets von Webfaden */
.hb-nav-tabs-li-logo {
	margin-bottom: 0px !important;
}

.hb-nav-tabs-li-shop {
	/* unter Windows passt das dann -- unter Linux nur ungefaehr */
	margin-top: 0px;
	margin-right: 3px;
}

/*
/* Header #top-header-tabs:  E N D E
/***********************************************/

/***********************************************/
/* Kundenstamm:  B E G I N N   */
#hbKundenstammForm  .datenschutzBox .datenschutzContentBox {
	/* Width auf 115%, damit Fenster auch den Suchbaum ueberdeckt*/
	width: 115%;
	/* WH: 06.07.2022 - Datenschutzerklaerung Layout anpassen */
	background-color: #f5f5f5;
}

#hbKundenstammForm .form-horizontal .control-label {
	padding-top: 3px;
}

#hbKundenstammForm .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td,
	.table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
	border-top: 0px
}

/* WH: 23.10.2020 - Kundenstammdaten Styles */
/* div fuer lkz mit float setzen, damit plz und Ort rechts daneben rutschen*/
#hbKundenstammForm .hb-lkz {
	float: left;
	width: 10%;
}
/* den Auswahlbutton fuer LKZ den Input-Feldern anpassen*/
#hbKundenstammForm .hb-lkz button {
	padding-top: 2px;
	padding-right: 5px;
	padding-bottom: 2px;
	padding-left: 5px;
	width: 100%;
}

/* das Input-Feld fuer den Ort bis zum Ende des umgebenden Divs*/
#hbKundenstammForm .form-control#ort {
	width: calc(100% - 137px);
}

/* Panel mit Rand, analog zu panel-shopshop*/
#hbKundenstammForm .panel-kdstamm {
	border-color: #e3e3e3
}

/* Datenschutzererklaerung Inhalt positionieren*/
#hbKundenstammContainer .datenschutzBox .datenschutzContentBox {
	width: 150%;
}

@media screen and (max-width: 1520px) {
	#hbKundenstammContainer .datenschutzBox .datenschutzContentBox {
		top: -750px;
	}
}

@media screen and (max-width: 1200px) {
	#hbKundenstammContainer .datenschutzBox .datenschutzContentBox {
		top: -800px;
	}
}

@media screen and (max-width: 991px) {
	#hbKundenstammContainer .datenschutzBox .datenschutzContentBox {
		top: -1250px;
	}
}

@media screen and (max-width: 770px) {
	#hbKundenstammContainer .datenschutzBox .datenschutzContentBox {
		top: -1450px;
	}
}

@media screen and (max-width: 499px) {
	#hbKundenstammContainer .datenschutzBox .datenschutzContentBox {
		top: -1650px;
	}
}

/* Padding im Div fuer den Button Speichern, damit der mittig zur Datenschutzbox ist*/
#hbKundenstammContainer .hb-kd-speichern {
	padding-top: 20px;
}

/* Abstand fuer Text neben den Selectboxen im Panel Newsletter*/
#hbKundenstammContainer .hb-flag-text {
	padding-left: 0px;
}

#hbKundenstammContainer .hb-katalogflag {
	padding-top: 5px;
}

/* Anpassungen wegen Steuernr Schweiz*/
#hbKundenstammContainer .input-group {
	width: 100%
}

#hbKundenstammContainer .input-group .input-group-addon {
	padding: 0px;
	font-size: 12px;
}

/* selectboxen fuer Newsletter mit rotem Rand, wenn keine Auswahl getroffen*/
#hbKundenstammContainer select.hb-invalid {
	color: red;
	border-color: red;
}

/*  WH: 31.01.2023 - Standard-Lieferanschrift in Kundendaten*/
#hbKundenstammContainer .standardLieferText {
	color: #666666;
}

#hbKundenstammContainer .colStandardLieferText {
	margin-top: 2px;
}

/*  WH: 02.08.2023 - Neukundenregistrierung scShops: Gewerbenachweis hochladen*/
#hbKundenstammContainer input[type="file"] {
	/* input Feld im Browserstyling nicht andrucken*/
	display: none;
}

/*
/* Kundenstamm:  E N D E
/***********************************************/

/***********************************************/
/* Selbstregistrierung:  B E G I N N   */
#hbSelbstRegContainer * fieldset {
	padding: 10px;
}

#hbSelbstRegContainer * .well-sm {
	padding: 5px;
	margin-bottom: 5px;
}

#hbSelbstRegContainer .form-control#kundennr {
	width: 160px;
}

#hbSelbstRegContainer .form-control#plz {
	width: 160px;
}

#hbSelbstRegContainer .panel-kdstamm {
	border-color: #e3e3e3;
}

/* position relative, damit das ueberdeckende Div den panel-body komplett ueberdeckt
falls der AP nicht editierbar ist*/
#hbSelbstRegContainer .panel-body-selbstreg {
	position: relative;
}

/* Ueberdeckendes DIV bei nicht editierbaren APs im Formular*/
.hbNotEditable {
	/*border: solid 1px; */
	/*WH : heigth = 1500px, bei 100% deckt es unten nicht alles zu*/
	/*height: 1500px; */
	/*WH Abstand zu oben nur wenige px, damit die Links im Menue deaktiviert sind*/
	/*top: 5px;*/
	/* klee: 14.04.2021 - showLoaderImg in top=0px + left=0px gesetzt */
	top: 0px;
	left: 0px;
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 9;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity = 50);
	opacity: 0.6;
	background-color: #dfdbdb;
}

.table-selbstreg-kdnr {
	margin-bottom: 0px;
	border-spacing: 0px;
}

#hbSelbstRegContainer table.table-selbstreg-kdnr tr:first-child>td {
	border-top: 0px;
	width: 25%
}

/* Datenschutzererklaerung Inhalt positionieren*/
#hbSelbstRegContainer .datenschutzBox .datenschutzContentBox {
	width: 150%;
}

/* fuer Sonderfall Registrieren von AP 1, damit Panel Kdstamm rechtsbuendig zu Datenschutz box */
.selbstRegAp1 {
	width: 99%;
}

@media screen and (max-width: 1520px) {
	#hbSelbstRegContainer .datenschutzBox .datenschutzContentBox {
		top: -1200px;
	}
}

@media screen and (max-width: 1200px) {
	#hbSelbstRegContainer .datenschutzBox .datenschutzContentBox {
		top: -1200px;
	}
}

@media screen and (max-width: 991px) {
	#hbSelbstRegContainer .datenschutzBox .datenschutzContentBox {
		top: -2300px;
	}
}

@media screen and (max-width: 770px) {
	#hbSelbstRegContainer .datenschutzBox .datenschutzContentBox {
		top: -2700px;
	}
}

@media screen and (max-width: 499px) {
	#hbSelbstRegContainer .datenschutzBox .datenschutzContentBox {
		top: -3000px;
	}
}

/*
/* Selbstregistrierung:  E N D E
/***********************************************/

/***********************************************/
/* BANNER:  B E G I N N   */
#hbBannerVerwaltung .hb-label-kein-pflichfeld {
	margin-top: -3px;
	color: #212121;
}

#hbBannerVerwaltung .form-horizontal .control-label {
	padding-top: 3px;
}
/* Action-Buttons */
#hbBannerVerwaltung .hb-action-button {
	min-width: 114px;
}

#hbBannerVerwaltung .hb-panel-msg {
	color: red;
	padding-left: 110px;
}

#hbBannerVerwaltung .gridBanner {
	width: 100%;
	/*height: 100%; */
	/*WH Height veraendern, damit buendiger Abschluss mit Eingabemaske Lieferanschriften*/
	/*height: 320px;*/
	height: 450px;
}

#hbBannerVerwaltung .ui-grid-header {
	height: 32px;
}

#hbBannerVerwaltung .hb-search-txt-item {
	color: #00389A;
	font-weight: bold;
}

#hbBannerVerwaltung .hb-row {
	min-height: 21px;
}

#hbBannerVerwaltung .ui-grid-header-cell .ui-grid-cell-contents {
	height: 32px !important;
	white-space: nowrap;
}

#hbBannerVerwaltung .ui-grid-header-cell .ui-grid-cell-contents {
	height: 32px !important;
	white-space: nowrap;
}

#hbBannerVerwaltung .hb-date-input {
	min-width: 70px;
}

#hbBannerVerwaltung .hb-input-search-field {
	min-height: 27px;
}

#hbBannerVerwaltung .hb-img-search {
	margin-top: 0px;
	margin-bottom: 0px;
}

#hbBannerVerwaltung .hb-search-filter-row {
	margin-top: 5px;
	/* margin-bottom: 5px; */
}

#hbBannerVerwaltung .hb-form-disabled {
	color: rgb(153, 153, 153);
	opacity: 0.60;
}
/*
/* BANNER:  E N D E
/***********************************************/

/***********************************************/
/* Datenschutz :  B E G I N N   */
/* WH: 26.06.2020 - Direktive Datenschutz bestaetigen responsiv gemacht*/

/* Popup beim Einloggen in Shop, falls aktuelle Datenschutzerklaerung noch nicht bestaetigt*/
#datenschutzShopDiv h1 {
	font-size: 20px;
}

#datenschutzHbDiv input {
	display: block;
	width: 13px;
	float: left;
}

#datenschutzHbDiv label {
	/*display: block; */
	width: calc(100% - 20px);
	/*float: right;*/
}

#datenschutzHbDiv fieldset {
	/* klee: 25.03.2022 -- Neukunde werden -- Styles korrigiert #datenschutzHbDiv fieldset */
	/* padding: 10px; */
	padding: 20px;
}

#datenschutzHbDiv input[type="checkbox"] {
	/* damit auf gleicher Hoehe wie nebenstehender Text*/
	margin: 0px;
}

/* Datenschutzerklarung im Popup siehe <datenschutz-hb></datenschutz-hb> */
/* klee 13.12.2018 - in datenschutzHbDiv class="well" gegen class="datenschutzBox" ausgetauscht */
.datenschutzBox {
	background-color: #f5f5f5;
}

.datenschutzBox .container {
	width: 100%;
}

/* Datenschutzerklarung im Popup siehe <datenschutz-hb></datenschutz-hb> */
.datenschutzBox .jumbotron p {
	color: #fff;
	font-size: 18px;
	font-weight: bold;
	padding-top: 8px;
	padding-bottom: 8px;
	margin-bottom: 1px;
}

.datenschutzBox .datenschutzContentBox {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 99999;
	margin-top: -5%;
	width: 100%
}

.datenschutzBox .datenschutzContent {
	padding-top: 40px;
}
/*
/* Datenschutz:  E N D E
/***********************************************/

/***********************************************/
/* ETC:  B E G I N N   */

/* WH: Schriftfarben fuer die Shoptypen */
.color-softcarrier {
	color: #00389A;
}

.color-vtmp {
	color: #ff5d00;
}

.color-liefert-es {
	color: #fe9100;
}

/*WH: fuer Fehlermeldungen im Formular*/
.hb-text-error {
	color: red !important;
	/*font-size: 11px;*/
	font-size: 12px;
}

/* WH: Klasse, um Element z.B. span, tr, als Clickbar zu kennzeichnen*/
.hb-clickable {
	cursor: pointer;
}

/*WH: fuer nicht korrekte text-area: Rahmen rot*/
textarea.ng-invalid {
	border-color: red;
	background-color: pink;
}

/* klee: 15.11.2018 für Linke Close Kreuz Alert-Box z.B. Cookies-Hinweis */
.closeLeft {
	float: left;
}

.responsiveTable {
	width: 100%;
}

/* klee: 23.01.2020 - Selbstregistrierung: responsiveTable eingeführt */
#selbstRegHb .responsiveTable {
	width: 90%;
}

.hbHeaderIdentifiziert {
	font-size: 11px;
	margin-top: 2px;
}

.detailcaptions {
	font-size: 12px;
	font-weight: bold;
}

.formInputText {
	color: #000000;
	/*font-size: 11px; */
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 125%;
	font-weight: normal;
}

.formtext {
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	/* font-size: 11px; */
	font-size: 12px;
	color: #000000;
	line-height: 125%;
	font-weight: normal;
}

a.formtext:link {
	color: #00389A;
}

a.formtext:visited {
	color: #00AEEF;
}

a.formtext:hover {
	color: #00AEEF;
}

/* klee:17.07.2017 --  Korrektur Bootstrap-Styles: Problem Browser-Print-Funktionalität(zerschlägt komplett den Ausdruck) 
Verhinderung des Andruckes von Link-Adressen hinter Links (zerschlägt komplett den Ausdruck) */
@media print {
	a[href]:after {
		content: none
	}
}

/* klee fuer DSGVO Abfrage */
@media ( min-width : 992px) {
	.modal-hb-lg {
		width: 1300px;
	}
}

/*WH: Modal Breite 100% 
 Verwendung im Modal - size: 'hb-width-100-prozent'*/
.modal-hb-width-100-prozent {
	width: 100%;
}

.modal-hb-width-90-prozent {
	width: 90%;
}

.modal-hb-width-75-prozent {
	width: 75%;
}

.modal-hb-width-60-prozent {
	width: 60%;
}

.modal-hb-width-50-prozent {
	width: 50%;
}

.modal-hb-width-30-prozent {
	width: 30%;
}

/*WH: fuer nicht korrekte text-area: Rahmen rot*/
textarea.ng-invalid {
	border-color: red;
	background-color: pink;
}

/*WH: Hintergrund und Rand fuer eine Leiste von nebeneinanderstehenden Buttons */
.hb-button-leiste {
	background-color: #f5f5f5;
	border-color: #dddddd;
	display: block;
}

/*WH: Abstand fuer jeden button in der hb-button-leiste*/
.hb-btn-margin {
	margin-left: 1%;
	margin-right: 1%;
}

.hbFooterPreisspruch {
	
}

.hbLangsamesInternet {
	margin-bottom: 8px;
	padding-left: 0px;
	color: red;
	font-weight: bold;
}

.hbAnzahlArtWk {
	/*font-size: 15px;*/
	
}

.hbMenueAdminButton {
	font-size: 14px;
	padding: 3px 20px;
}

/*
/* ETC:  E N D E
/***********************************************/

/***********************************************/
/* scShop-Retoure:  B E G I N N   */
.reklamation-upload {
	display: none !important;
}

.hintLarge {
	font-family: Arial, Helvetica, sans-serif;
	color: #00aa00;
	font-size: 12px;
	line-height: 100%;
	font-weight: bold;
}

/*Mengenfeld mit rosa Hintergrund solang invald*/
#reklamMenge.ng-invalid {
	background-color: pink;
}

/*WH: Grid fuer Meine Daten - Retoure-Reklamation*/
.gridRetRechnungen {
	width: 100%;
	height: 150px;
}

/*WH: Grid fuer Meine Daten - Retoure-Reklamation*/
.gridRetArtikel {
	width: 100%;
	height: 150px;
}

/*WH: Grid fuer Meine Daten - Retouren*/
.gridRetouren {
	width: 100%;
	height: 300px;
}
/*
/* scShop-Retoure:  E N D E
/***********************************************/

/***********************************************/
/* sShop-Retoure:  B E G I N N   */
/*  keine styles fuer sShop*/
/*
/* sShop-Retoure:  E N D E
/***********************************************/

/***********************************************/
/* Bestellübersicht:  B E G I N N   */

/*AF - 07.07.2020 : B E G I N N 
*/

/* WH: Panel-Def innerhalb Bestelluebersicht*/
#hbBestelluebersichtDiv .panel {
	border-color: #e3e3e3
}

#hbBestelluebersichtDiv .headline, .panel>.panel-heading {
	padding: 5px 10px;
	color: #00389A;
	font-weight: 600;
	background-color: #f5f5f5;
	border: 1px solid #e3e3e3;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}

/* Panels fuer EKR-Tool*/
.panel-info.panel-sc {
	border-color: #bce8f1
}

.panel-info.panel-sc>.panel-heading {
	background-color: #d9edf7;
	border: 1px solid #bce8f1;
}

/*Bestellübersicht*/

/*Bestellübesicht Headline*/
.row.order-overview-headline {
	display: flex;
	flex-wrap: wrap;
}

.row.order-overview-headline-add {
	display: flex;
	flex-wrap: wrap;
	justify-content: end;
}

.order-overview-headline .panel {
	height: calc(100% - 20px);
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-direction: column;
}

.order-overview-headline .panel .panel-body {
	padding: 5px;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
}

.order-overview-headline .panel .table {
	margin-bottom: 0;
}

.order-overview-headline .panel .table+div {
	margin-top: 10px;
}

.order-overview-headline .panel .table tr>td {
	padding: 3px 5px;
}

.order-overview-headline .panel .table tr:first-child>td {
	border: 0;
}

.detailcaptions-add, .formtext-add {
	background-color: #d9edf7;
}

.order-overview-submit {
	margin-bottom: 30px;
}

/*Formatierung Ergänzung */
.align-right {
	text-align: right;
}

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

/*responsive Ergänzung*/
@media ( max-width :575px) {
	.col-xs-6 {
		float: none;
		width: 100%;
	}
}

/*WH: Buttons Bestellen und Abbrechen*/
#hbBestelluebersichtDiv .hb-btn-bestell {
	font-weight: bold;
}

#sperrgutModalDiv p {
	font-size: 14px;
}

#sperrgutModalDiv ul {
	font-size: 14px;
}

#sperrgutModalDiv .hb-btn-bestell {
	font-weight: bold;
}

/*
/* Bestellübersicht:  E N D E
/***********************************************/

/***********************************************/
/* Auftragsinfo:  B E G I N N   */

/* WH: Panel-Def innerhalb Bestelluebersicht*/
#hbAuftragsinfoDiv .panel {
	border-color: #e3e3e3
}

#hbAuftragsinfoDiv .headline, .panel>.panel-heading {
	padding: 5px 10px;
	color: #00389A;
	font-weight: 600;
	background-color: #f5f5f5;
	border: 1px solid #e3e3e3;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}

/* Panels fuer EKR-Tool*/
#hbAuftragsinfoDiv .panel-info.panel-sc {
	border-color: #bce8f1
}

#hbAuftragsinfoDiv .panel-info.panel-sc>.panel-heading {
	background-color: #d9edf7;
	border: 1px solid #bce8f1;
}

/* Auftragsinfo Headline */
#hbAuftragsinfoDiv .row.order-overview-headline {
	display: flex;
	flex-wrap: wrap;
}

#hbAuftragsinfoDiv .row.order-overview-headline-add {
	display: flex;
	flex-wrap: wrap;
	justify-content: end;
}

#hbAuftragsinfoDiv .order-overview-headline .panel {
	height: calc(100% - 20px);
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-direction: column;
}

#hbAuftragsinfoDiv .order-overview-headline .panel .panel-body {
	padding: 5px;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
}

#hbAuftragsinfoDiv .order-overview-headline .panel .table {
	margin-bottom: 0;
}

#hbAuftragsinfoDiv .order-overview-headline .panel .table+div {
	margin-top: 10px;
}

#hbAuftragsinfoDiv .order-overview-headline .panel .table tr>td {
	padding: 3px 5px;
}

#hbAuftragsinfoDiv .order-overview-headline .panel .table tr:first-child>td
	{
	border: 0;
}

#hbAuftragsinfoDiv .detailcaptions-add, .formtext-add {
	background-color: #d9edf7;
}

#hbAuftragsinfoDiv .order-overview-submit {
	margin-bottom: 30px;
}

/*Formatierung Ergänzung */
#hbAuftragsinfoDiv .align-right {
	text-align: right;
}

#hbAuftragsinfoDiv .align-center {
	text-align: center;
}

#auftragsInfoPaketTrackDiv .panel-body {
	padding: 0px;
}

#auftragsInfoPaketTrackDiv .table {
	margin-bottom: 0px;
	border: none;
	/* um den Strich oben am Table wegzukriegen*/
	border-collapse: collapse;
}

#auftragsInfoPaketTrackDiv .hbGridTrackingCellButtonDiv {
	padding-top: 0px;
}

.gridAuftragsinfo {
	width: 100%;
	/*height: 100%; */
	height: 200px;
}

.gridTracking {
	width: 100%;
	/*height: 100%; */
	height: 130px;
}

.hbAufInfoPadding {
	/* um den Button am Suchfeld rechts buendig mit dem Grid abzuschliessen*/
	padding-right: 25px;
}

/* responsive Ergänzung */
@media ( max-width :575px) {
	.col-xs-6 {
		float: none;
		width: 100%;
	}
}

/* klee: 24.02.2021 - Auftragsübersicht für vtmp */
.hbAufInfoSucheHr {
	margin-bottom: 10px;
	margin-top: 10px;
}

/* klee: 09.03.2021 - Auftragsübersicht Lupe */
.hbAufInfoSucheBtnLupe {
	width: 75px;
}

/* klee: 09.03.2021 - Auftragsübersicht Lupe */
.hbAufInfoSucheInput {
	margin-top: 1px;
}

/*Hintergrundfarbe fuer Kennzeichnung offene Positionen im Listing*/
.hbOffenPos {
	background-color: #FAF0E0 !important;
}

/* Grid im PopUP*/
.gridAufOffenePos {
	width: 100%;
	height: 550px;
}

/* margin-bottom vom fieldset verringern, damit es keinen grossen weissen Rand am Modal gibt*/
#aufOffenePosHbDiv fieldset {
	margin-bottom: 3px;
}

/*WH: 08.12.2020 Suchfelder-Bereich als Table Layout*/
.table-aufinfo-suche {
	/* margin-bottom verringern*/
	margin-bottom: 5px;
}

.table-aufinfo-suche>tbody>tr>td {
	/* keine sichtbaren Border*/
	border-top: none;
	/*Elemente vertikal zentrieren*/
	vertical-align: middle;
}

/* Tabellenspalte mit Label Suche nach*/
.table-aufinfo-suche-1 tbody td:nth-child(1) {
	width: 17%;
}
/* Tabellenspalte mit Selectbox*/
.table-aufinfo-suche-1 tbody td:nth-child(2) {
	width: 25%;
}

/* 26.06.2024 - Retoure/Reklamation: Auftragsinfo erweitern um Suche nach Rechnungsnr und Lieferschein*/
/* Spalte Suchfeld fuer Auftragsnummer, etc, auf top, damit unter den Button offene Positione noch ein Button passt*/
.table-aufinfo-suche-2 tbody td:nth-child(1) {
	vertical-align: top;
}

/* WH: 15.07.2024 -  Retoure/Reklamation: Ansteuerung Auftragsinfo*/
/* Hinweis auf Ausloesen einer Retoure*/
.retHinweisFieldset {
	padding-top: 0px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 0px;
	margin-bottom: 10px;
	border-color: rgb(0, 174, 239);
}

/* klee: 27.04.2021 - Umsetzung Storn (Phase 1: Grafische Einbettung) */

/* Formatierung Ergänzung */
#hbStornoDiv .hbFloatRight {
	float: right;
}

/* Normierung Storno Buttons */
#hbStornoDiv .hbBtnStorno {
	min-width: 150px;
}

#hbStornoDiv .hb-panel-border {
	border-style: solid;
	border-width: thin;
	border-color: red !important;
}

/*WH: Styles fuer die Storno-Component*/
/* Rahmen um die Action Buttons in eingebetteten Components wie ladrBestellungHb und kontaktLadrHb*/
#stornoAnfrageHbDiv .action-btn-div {
	border-color: #00389A;
	border-style: solid;
	padding: 3px;
	border-width: thin;
}

.gridStorno {
	width: 100%;
	/*height: 100%; */
	height: 150px;
}

#hbStornoDiv .panel-body {
	background-color: #f9f9f9;
}

/* klee: 22.09.2021 - Storno: Detail-Ansicht Hintergrund  */
.hbstornoDetailPanelBody {
	/*background-color: #c9dde1 !important;*/
}

/*
/* Auftragsinfo:  E N D E
/***********************************************/

/***********************************************/
/* WH: 10.08.2021 - Storno-Component */
/* Storno :  B E G I N N   */
/* Formular zum Eingeben einer Notiz zum Artikel in Bestellvorlagen oder Warenkorb*/
#stornoAnfrageHbDiv.storno-form {
	margin-bottom: 0px;
	padding: 5px;
}

/* Abstand nach oben zur legend des fieldset, Abstand nach unten zum Input-Feld*/
#stornoAnfrageHbDiv .storno-art {
	margin-top: -10px;
	margin-bottom: 15px;
	font-weight: bold;
	font-size: large;
}

/* margin-botton ueberschreiben, weil sonst viel Abstand unten im Modal-Dialog*/
#stornoAnfrageHbDiv fieldset {
	margin-bottom: 0px;
}

#stornoAnfrageHbDiv input.form-control.menge {
	max-width: 50px;
	float: right;
}

/*  WH: 22.09.2021 - Storno: Layout-Verbesserungen */
#stornoHbFieldset {
	/* Padding verringern*/
	padding: 10px;
}

#stornoHbFieldset legend {
	/*Schrift kleiner*/
	font-size: 17px;
}

#stornoHbFieldset .well-sm {
	/* Padding verringern*/
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 5px;
	padding-right: 5px;
}

/* fuer Storno gesamten Auftrag das Padding lassen*/
#stornoHbFieldset .well-sm-komplett-auftrag {
	/* Padding erhoehen auf Default-Werte fuer well-sm*/
	padding-top: 9px;
	padding-bottom: 9px;
	padding-left: 5px;
	padding-right: 5px;
}

/* fuer die Fieldsets innerhalb des stornoHbFieldset*/
#stornoHbFieldset  fieldset {
	/* Padding verringern*/
	padding: 10px;
}

/*Die Lieferanschriften Comp innerhalb der Storno-Comp: der Bereich Direktlieferung*/
#stornoHbFieldset .panelAbLieferanschrHbDivAufgeklappt {
	min-height: 5px;
}

/* Table für Position innerhalb der  der Storno-Comp*/
#stornoHbFieldset table {
	margin-bottom: 0px;
}

/* fuer die Teilueberschriften Stornierung oder Aenderung, damit sie buendig zu den Buttons sind*/
#hbStornoDiv .labelInWell {
    font-size: 12px;
    font-weight: 600;
    width: fit-content;
    border: none;
    margin-bottom: 0px;
    background-color: unset;
   
	-webkit-box-shadow:  inset 0 0px 0px rgba(0,0,0,.05); 
	box-shadow: inset 0 0px 0px rgba(0,0,0,.05);

}

/* WH: Hintergrund fuer Zeile, die eine Anfrage fuer Storno oder Aenderung beinhaltet  */
#hbStornoDiv .hbStornoZeileAnfrage {
	background-color: #c9dde1 !important;
}

/* WH: Table fuer die Storno/Aenderung-Details*/
#hbStornoDiv .hbStornoTableDetail {
	margin-bottom: 0px;
}

/* WH: Panels fuer die Details einer Anfrage */
#hbStornoDiv .hbStornoPanel{
	border-color: #00389A;
}

/*
/* Storno:  E N D E
/***********************************************/

/***********************************************/
/* Newsletter Startseite :  B E G I N N   */
#hbNewsEinstiegDiv .frontpage-panel-heading {
	text-align: center;
}

/* Blaetterleiste und PageCount mittig andrucken*/
#hbNewsEinstiegDiv .blaetternPaginationBox {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	float: unset;
}

/* Kreuzchen zum Schliessen*/
#hbNewsEinstiegDiv .hbNewsClose {
	float: right;
	/*margin-top: -35px;*/
}

/* Inhaltsseite zentrieren */
#hbNewsEinstiegDiv #newsContent {
	display: inline-block;
}

/* WH: 14.02.2024 - Integration BPW (Produktinfo) als JPG: Bild 'responsive' machen */
#hbNewsEinstiegDiv #bpwContent {
	display: inline-block;
}

#hbNewsEinstiegDiv .bpwImg {
	width: 100%;
}

/*
/* Newsletter Startseite :  E N D E
/***********************************************/

/***********************************************/
/* Angebot der Woche in eigener Component :  B E G I N N   */

/*fuer Hervorhebungen fuer Fragen von hiblue*/
.hb-frage-color {
	color: fuchsia;
}
/* WH: 14.06.2023 - Angebot der Woche hervorheben*/
#aDWHbDiv .adWFieldsetHeader {
	padding-top: 0px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 0px;
	margin-bottom: 10px;
	border-color: rgb(0, 174, 239);
}

#aDWHbDiv .table-adw {
	max-width: 100%;
}

#aDWHbDiv .td-adw {
	text-align: center;
}

/* Spalten des Tables untereinanderschieben bei kleinem Bildschirm*/
@media ( max-width : 770px) {
	.table-adw td {
		display: block;
	}
	/* Bilder uebereinanderschieben*/
	.table-adw tbody tr:nth-child(1) td:nth-child(1), .table-adw tbody tr:nth-child(1) td:nth-child(2),
		.table-adw tbody tr:nth-child(1) td:nth-child(3), .table-adw tbody tr:nth-child(1) td:nth-child(4),
		.table-adw tbody tr:nth-child(1) td:nth-child(5), .table-adw tbody tr:nth-child(1) td:nth-child(6),
		.table-adw tbody tr:nth-child(1) td:nth-child(7) {
		float: left;
		width: 33.0%;
	}

	/* Zeile mit Text ausblenden*/
	.table-adw tbody tr:nth-child(2) {
		display: none;
	}
}

/*
/* Angebot der Woche in eigener Component :  E N D E
/***********************************************/

/***********************************************/
/* CMS-Seiten im Webshop:  B E G I N N   */
/* Styles fuer die Transformation der der HTML-Seiten bei Integration in den Shop */
#hbCmsDiv .flagge_klein {
	width: 26px;
	height: 15px;
	border: none;
	vertical-align: middle;
	padding-bottom: 2px;
}

/* Styles fuer das Oeffnen der Seite in eigenem Browser-Fenster*/
#hbCmsDiv .hb-cms-fieldset-in-browser {
	margin-left: 10px;
	margin-right: 10px;
}

/* keine extra Border-Farbe, sondern Border wie Hintergrundfarbe*/
#hbCmsDiv .navbar-cms-browser {
	border-color: #00AEEF;
}

/* Hintergrundfarbe fuer Ueberschrift */
#hbCmsDiv .hb-header-cms-in-browser {
	text-align: center;
}

/* Textfarbe fuer Ueberschrift */
#hbCmsDiv .hb-header-cms-in-browser h3 {
	color: white;
	margin-top: 10px;
	margin-bottom: 10px;
}

/* Fuer das Einbinden des Logos in Seite in eigenem Fenster */
#hbCmsDiv .cms_head_logo {
	width: 427px;
	height: 64px;
}

/*WH: 20.04.2022 - Integration scShop CMS-Seiten: in vshop : Sonderbehandlung  Hilfe-Preiskalkulation.html */
#hbCmsDiv .div_sub {
	width: unset !important;
}

/* WH: 07.09.2022 - vshop CMS-Seite Markenshop als Component*/
#hbCmsDiv .logo_container {
	width: 90px;
	height: 80px;
	margin: 0;
	float: left;
}
/*
/* CMS-Seiten im Webshop:  E N D E
/***********************************************/

/***********************************************/
/* Infoservice Artikel :  B E G I N N        */

/* Fieldset ohne Margin-bottom, weil sonst unten weisser Rand im Modal*/
#infSrvArtHbDiv * fieldset {
	margin-bottom: 0px;
}

/* Button in text-danger Farbe*/
.btn-inf-srv-art {
	background-color: #a94442;
	color: white;
	border-color: #a94442;
}

.btn-inf-srv-art.btn-outline {
	color: #a94442;
	background-color: transparent;
}

/* Infoservice in ArtikelDetail in rotem Alert mit Abstand*/
.inv-srv-art-in-art-detail {
	margin-top: 1%;
}

/* Infoservice in ArtikelDetail in blauem Alert : soll einzeilig sein*/
.text-inf-srv-alert-info {
	width: 60%;
	/* margin-right: -30px; */
	text-align: right;
}

.inf-srv-art-in-art-detail-alert-info {
	float: right;
	margin-top: -20px;
	/* margin-left: 20%; */
	margin-right: 35%;
}

/* Infoservice in ArtikelDetail in rotem Alert : soll einzeilig sein*/
.text-inf-srv-alert-danger {
	float: left;
	margin-top: 4px
}

.inf-srv-art-in-art-detail-alert-danger {
	/*float: right;
	margin-right: 47%;*/
	float: left;
	margin-left: 2px;
}

/* Infoservice Artikel :  E N D E         */
/***********************************************/

/***********************************************/
/* FATAL ERROR :  B E G I N N        */
.hbFatalErrDetailtitle {
	color: #333333;
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	line-height: 100%;
	background: transparent;
}

.hbFatalErrHeadline {
	font-family: Arial, Helvetica, sans-serif;
	/*color: #00aeef;*/
	color: #333333;
	font-size: 14px;
	font-weight: bold;
	background: transparent;
	/* klee 25.08.06: da unter MS-IE das Ä nicht lesbar war */
	line-height: 108%;
	/*letter-spacing:0.03em;*/
}

.hbFatalErrDetailtext {
	color: #585858;
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 120%;
	text-align: justify;
	background: transparent;
}

.hbFatalErrWarnColor {
	color: red;
}

/* FATAL ERROR :  E N D E         */
/***********************************************/

/***********************************************/
/* ALTE PHP-Webshop:  B E G I N N   */
/* klee: vermutlich nach Umstellung auf NG obsolet */

/* WH Anpassung fuer NG-Button*/
/* Button als Link gestylt */
.hb-btn-link {
	color: #333333;
	font-weight: bold;
}

.hb-btn-link-transparent {
	/*color: #333333;*/
	font-weight: bold;
	background-color: transparent;
}

.pdflink {
	text-decoration: none;
	font-size: 11px;
	font-family: Arial, Helvetica, sans-serif;
	color: #00aeef;
	line-height: 100%;
	font-weight: bold;
}

a.pdflink:link {
	color: #00AEEF;
}

a.pdflink:visited {
	color: #00AEEF;
}

a.pdflink:hover {
	color: #00389A;
}

#auftragsinfo .headline {
	font-size: 16px;
}

#auftragsinfo .hbDruckicon {
	margin-bottom: -6px;
}

a.stueckbtn {
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #ffffff;
	font-weight: bold;
	line-height: 120%;
	background: transparent;
	vertical-align: middle;
}

a.stueckbtn:link {
	color: #ffffff
}

a.stueckbtn:visited {
	color: #ffffff
}

a.stueckbtn:hover {
	color: #000000
}
/*
/* ALTE PHP-Webshop:  E N D E
/***********************************************/

/***********************************************/
/* Kumuliertes Hinzuefuegen von Artikeln:  B E G I N N   */
/* Formular mit Hinweis und Moeglichkeit Korrektur der Menge*/
/* Height auf 30, damit plus und minus-Symbole buendig abschliessen */
#artKumHbDiv .kum-form-control {
	height: 30px;
}

#artKumHbDiv input[type=number] {
	text-align: right;
	padding-right: 5px;
}
/* Ausblenden der Pfeile rechts zum Runter-und Hochzaehlen*/
/* Chrome, Safari, Edge, Opera */
#artKumHbDiv input::-webkit-outer-spin-button, #artKumHbDiv input::-webkit-inner-spin-button
	{
	-webkit-appearance: none;
	margin: 0;
}

/* Firefox */
#artKumHbDiv input[type=number] {
	-moz-appearance: textfield;
}

#artKumHbDiv fieldset {
	margin-bottom: 0px;
}

#artKumHbDiv .detailcaptions.text-center {
	color: #333333;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	line-height: 100%;
	margin-bottom: 20px;
}

/*
/* Kumuliertes Hinzuefuegen von Artikeln:  E N D E
/***********************************************/

/***********************************************/
/* Vertreter-Eingabe :  B E G I N N        */
#HbVertreterForm .form-group {
	margin-bottom: 5px;
}

.hbVertreterBgColor_1 {
	background-color: #fdfda0;
	padding-top: 15px;
	margin-left: 0px;
	margin-right: 0px;
}

.hbVertreterBgColor_2 {
	background-color: rgb(217, 237, 247);
	padding-top: 15px;
	margin-left: 0px;
	margin-right: 0px;
}

.hbVertreterInsertButtonListing {
	margin-bottom: 8px;
	margin-left: 0px;
}

.hbVertreterStatus {
	margin-top: 5px;
}

/* Grid fuer Vertreter-Grids */
.gridVertreter {
	width: 100%;
	height: 300px;
}

/* Grid fuer Vertreter-Grids */
.gridPanelVertreter {
	width: 100%;
}

/* Klasse um nicht ausgefüllten Pflichtfelder mit bg-color pink zu hinterlegen
.hbVertreterInputBgColor.ng-invalid {
    background-color: pink;
}
*/

/* Alle nicht ausgefüllten Pflichtfelder mit bg-color pink interlegen
#HbVertreterForm .ng-invalid {
    background-color: pink;
}
*/

/* Vertreter-Eingabe :  E N D E        */
/***********************************************/

/***********************************************/
/* Superadmin-Kundenverwaltung :  B E G I N N  */
#hbSuperKundeVerwaltung .gridSuperKunde {
	width: 100%;
	height: 100px;
}

/* fuer die Einbettung im vshop muss die line-heigt explizit gesetzt werden,
weil sich sonst die Felder in den Panels verschieben */
#hbSuperKundeVerwaltung {
	line-height: normal !important;
}

/* Superadmin-Kundenverwaltung :  E N D E      */
/***********************************************/

/***********************************************/
/* Markenshop :  B E G I N N  */

/*WH: Grid fuer Meine Daten - Markenshop*/
.gridMarkenshopPos {
	width: 100%;
	height: 400px;
}

/* fuer die Schrift in den Div Wells mit Umsatzzahlen*/
.mshopUmsatz {
	font-size: 14px;
	font-weight: 700;
	width: fit-content;
	margin-bottom: 2px;
}

/* Markenshop :  E N D E      */
/***********************************************/

/***********************************************/
/* Icons :  B E G I N N  */
/* klee: 08.10.2024 --  Integration flag-icons-main im Verzeichnis tools (SVG zur Generierung von kostenlosen Flaggen) */
.fi-ch {
	/* background: #fff url(/hbdb/scShared/img/shared/flag_ch_4x3.svg) no-repeat center;*/
	background: #fff no-repeat center;
	/* background-image: url(../flags/4x3/ch.svg); */
	background-image: url(/hbdb/scShared/img/shared/flag_ch_4x3.svg); 
	/* background-size: 25px 25px; */
}

.fi-dropdown-menue-hb {
	width: 25px
}

/* Icons:  E N D E      */
/***********************************************/