/***********************************************/
/* Parameter ganze Applikation:  B E G I N N   */

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

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

img {
	margin: 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;
}

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

.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*/
input.ng-invalid {
	color: red;
	border-color: red;
}

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

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

/*WH: Grid fuer Lieferanschriften */
.gridLieferanschriften {
	width: 100%;
	/*height: 100%; */
	/*WH Height veraendern, damit buendiger Abschluss mit Eingabemaske Lieferanschriften*/
	height: 385px;
}

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

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

/* klee: 15.11.2018 für Linke Close Kreuz Alert-Box z.B. Cookies-Hinweis */
.closeLeft {
	float: left;
}
/* klee 13.12.2018 - in datenschutzHbDiv class="well" gegen class="datenschutzBox" ausgetauscht */
.datenschutzBox {
	background-color: #f5f5f5;
}

/* 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 */
.panel {
	margin-bottom: 5px;
}

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

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

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 überschreiben*/
.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: 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;
	padding: 11px 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),.table-order-list tbody td:nth-child(5)
	{
	text-align: right;
}

.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: 80px;
	white-space: nowrap;
}

/*WH: Preis netto mit Sternchen nach dem Preis*/
.preis_netto:after {
	content: '*';
	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: "Leferbar: ";
		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;
}

/* Warenkorb:  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
*/
.blaetternArtikelProSeiteBox {
	float: left;
	margin-left: 20%;
}

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

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

/* Farbe für gewählte Seite setzen */
.pagination>.active>a,.pagination>.active>a:focus,.pagination>.active>a:hover,.pagination>.active>span,.pagination>.active>span:focus,.pagination>.active>span:hover
	{
	z-index: 3;
	color: #fff;
	cursor: default;
	background-color: #00AEEF;
	border-color: #00AEEF;
}

/* 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: 12px;
	line-height: 1.5;
	color: #00389A;
}

.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;
}
/*
/* 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*/
.hbShoppingCartSymbolSearch {
	margin-left: 2px;
	color: #00389A;
}

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

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

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

.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 OK-Refresh-Farbe fuer den Hintergrund*/
.hbBtnStandardOkRefresh {
	color: #ffffff !important;
	font-family: Arial, Helvetica, sans-serif;
	/*HB_COLOR_BUTTON_OK_REFRESH : hell-orange */
	background-color: #ff965a;
	font-weight: bold;
	margin: 1px;
}

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

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

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

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

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

/*
/* Style fürs Blättern:  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;
}

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


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

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

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

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

/***********************************************/
/* Styles  NAV-BAR:  B E G I N N   */

.hbSearchTextRechtschreibVorschlag{
	margin-top: 5px;
}


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

.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*/
.hbPhoneSymbol {
	margin-top: 6px;
	margin-left: 10px;
	vertical-align: top;
	color: #00389A;
	font-size: 2em !important;
}

.hbPhoneSymbol: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;
	}
}

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

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

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

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

/***********************************/
/* Detailansicht :  B E G I N N   
*/
.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%
	}
}

/*WH: Styles fuer die Buttons im DetailFrameset im Zuge der Umstellung auf bootstrap-Buttons
s. auch properties.inc.php*/
.hbBtnFrageProdukt {
	color: #ffffff;
	/*HB_COLOR_BUTTON_INSERT*/
	background-color: #999999;
	font-weight: bold;
	width: 120px;
	margin: 1px;
}



/* 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) {
	.headerKatalogOff {
		display: none !important;
	}
}

.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) {
	.detailcaptions {
		color: #333333;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 11px;
		font-weight: bold;
		line-height: 100%;
		padding-left: 15px;
	}
}

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

/*@media screen and (max-width: 770px) {
	.standardtextHellgrau {
	color: #333333;
	font-size: 11px;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 100%;
	}
	
}
*/
.hbBtnLinkMehrInfo {
	color: #ffffff !important;
	background-color: #00389A;
	font-weight: bold;
	width: 150px;
	margin: 1px;
}

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

div.mehrInfoBtn {
	width: 150px;
	background-color: #00389A;
	/*font-size: 11px; */
	font-size: 12px;
	line-height: 18px;
	font-weight: bold;
	text-align: center;
}

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

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

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

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

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

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

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

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

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

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

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

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

div.filterResponsive div.filterOffen {
	width: 100%;
	max-height: 200px;
	border: solid 1px;
	border-color: rgba(204, 204, 204, 0.9) !important;
	border-color: #ccc;
	margin: 5px auto;
}

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: 12px;
	border: 1px solid black;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	font-weight: bolder;
	color: white;
	background-color: #00389A;
}

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