/***********************************************/
/* hbSoftBoot.css
*/



/***********************************************/
/* 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;
}

/* 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;
}

/* 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 angepaßte 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;
}

/*
/* 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;
}

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

/* 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;
}

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

/*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 24px, damit es in der Hoehe buendig abschliesst mit dem Input-Feld*/
	height: 24px;
}

/* 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
	{
	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
}

/* Warenkorb:  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;
}

@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;
}

/*
/* 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: 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 großen 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: 120px;
	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;
}

/* 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*/

/*
/* 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%;
	padding: 5px;
	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;
}

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

.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
/***********************************************/

/***********************************************/
/* 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öße */
@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: 999;
	border: 1px solid grey;
	position: fixed;
	display: table;
	top: 150px;
	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;
}

/* 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;
}

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

/***********************************************/
/* Filter + Suche in Suchlisting :  B E G I N N   */
.hb-hr {
	height: 2px;
	margin-top: 0px;
	margin-bottom: 9px;
	clear: both;
	background-color: #e7e7e7;
	border: none;
	/* WH: 04.07.2019 - css-Klasse hb-hr erweitert 
	width auf 100%, weil sonst durch hr aus Stylesheet
	https://www.softcarrier.de/tms/shared/styles/2700.css ueberschrieben
	in Markenwelten*/
	width: 100%;
}

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; img /vtmp/ 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;
}

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;
}

/*
/* Filter + Suche in Suchlisting :  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
/***********************************************/

/***********************************************/
/* TMS / Markenwelten BEGINN:  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
*/

/* 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-size: 12px;
}

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

#tmsMenuLinks
 
.nav_head {
	width: 100%;
}

#tmsMenuLinks
 
.nav_rahmen {
	width: 100%;
}

#tmsMenuLinks
 
.markenlogo {
	width: 70%;
}

#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-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%;
}

/* Styles für Banner #tmsBanner:  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;*/
}

/*
/* TMS / Markenwelten:  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;
}
/*
/* TMS / Markenwelten-Übersicht:  E N D E
/***********************************************/

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

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

/*
/* 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
/***********************************************/

/***********************************************/
/* 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
/***********************************************/

/***********************************************/
/* TMS / Markenwelten BEGINN:  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
*/

/* 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-size: 12px;
}

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

#tmsMenuLinks .nav_head {
	width: 100%;
}

#tmsMenuLinks .nav_rahmen {
	width: 100%;
}

#tmsMenuLinks .markenlogo {
	width: 70%;
}

#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-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%;
}

/* Styles für Banner #tmsBanner:  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;*/
}

/*
/* TMS / Markenwelten:  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;
}
/*
/* TMS / Markenwelten-Übersicht:  E N D E
/***********************************************/

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

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

/*
/* 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: " * ";
}

.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;
}
/*
/* 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%;
}
#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
}
/*
/* Kundenstamm:  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 {
	padding:10px;
}

#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: fuer Fehlermeldungen im Formular*/
.hb-text-error {
	color: red;
	/*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-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 {
	
}


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

/***********************************************/
/* sShop-Retoure:  B E G I N N   */

/*
/* 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
/***********************************************/

/***********************************************/
/* 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
/***********************************************/