/* main css updated 2026-09-20 19:35:20 */
/* ajax */
#ajaxLoader {

	position: absolute;
	left: 0;
	top: 0;
	
	width: 100%;
	height: 100%;
	
	margin: 0;
	
	z-index: 999;
	
	background-color: #fff;
	
	display: none;

}

#ajaxImgTextWrapper {

	margin: 0 auto;
	margin-top: 25%;
	
	width: 70px;

}

#ajaxLoaderImg {

	display: block;
	margin: 0 auto;
	
}

#ajaxText {

	margin: 0 auto;
	
	margin-top: 5px;
	
	font-size: 0.8em;
	
	text-align: center;
	
}

/* Classes in case there is more than one ajax loader for one page needed */

.ajaxLoader {

	position: absolute;
	left: 0;
	top: 0;
	
	width: 100%;
	height: 100%;
	
	margin: 0;
	
	z-index: 999;
	
	background-color: #fff;
	
	display: none;

}

.ajaxImgTextWrapper {

	margin: 0 auto;
	margin-top: 25%;
	
	width: 70px;

}

.ajaxLoaderImg {

	display: block;
	margin: 0 auto;
	
}

.ajaxText {

	margin: 0 auto;
	
	margin-top: 5px;
	
	font-size: 0.8em;
	
	text-align: center;
	
}

/* apipage */
/* API-Bereich (vorerst backdoor-only) */

/*
 * body steht auf 112.5% (18px), die Inhaltsbereiche des Haendlerbereichs
 * ziehen daraus mit 0.8em ihre 14.4px herunter. Ohne diese Zeile erbt der
 * API-Bereich die vollen 18px und wirkt neben allem anderen aufgeblasen.
 * Alle Groessen darunter sind relativ dazu.
 */
.apiPage {

	margin: 10px;
	font-size: 0.8em;
	color: #333333;

}

/*
 * Die Farben und Muster kommen aus dem Bestand und sind bewusst nicht neu
 * erfunden: #1b3749 fuer Ueberschriften wie in der DealerBOX, #d0d0d0 fuer
 * Rahmen, und Zeilen wechseln zwischen #FFF und #f4f3f3 statt durch
 * Trennlinien gegliedert zu werden - so machen es DataStats, ClickOrder,
 * Branches und DataTab auch. Die einzige waagrechte Linie im Bereich ist die
 * unter einer Abschnittsueberschrift.
 */

/* ---- Bloecke ---- */

.apiBlock {

	margin: 0 0 20px 0;

}

.apiBlockTitle {

	margin: 0 0 8px 0;
	padding: 0 0 4px 0;
	font-size: 1.05em;
	font-weight: bold;
	color: #1b3749;
	border-bottom: 1px solid #d0d0d0;

}

.apiBlockTitleSpaced {

	margin-top: 18px;

}

.apiText {

	max-width: 720px;
	margin: 0 0 8px 0;
	line-height: 1.5;

}

/* ---- Formulare ---- */

.apiPeriodForm {

	margin: 0 0 12px 0;

}

.apiPeriodForm label {

	margin: 0 5px 0 0;

}

.apiPeriodForm input[type="date"] {

	padding: 3px 5px;
	margin: 0 10px 0 0;
	border: 1px solid #d0d0d0;
	background: #ffffff;

}

/*
 * Schrift und Zeilenhoehe ausdruecklich setzen: ein <button> erbt beides
 * nicht, ein <a> schon. Ohne das steht der Kontakt-Link hoeher und groesser
 * neben den echten Knoepfen - in derselben Reihe gut zu sehen.
 */
.apiButton {

	padding: 3px 12px;
	border: 1px solid #3a7ec4;
	background: #4a90d9;
	font-family: inherit;
	font-size: inherit;
	line-height: 1.4;
	color: #ffffff;
	cursor: pointer;

}

.apiButton:hover {

	background: #5aa0e8;

}

/*
 * Gesperrt, aber lesbar: der Knopf bleibt sichtbar und nur blass, damit man
 * ihn findet und merkt, dass er zu dieser Stelle gehoert. pointer-events
 * aus, damit der Zeiger der Huelle durchschlaegt - Firefox laesst sonst
 * auch auf abgeschalteten Knoepfen noch hovern.
 */
.apiButton:disabled {

	opacity: 0.45;
	pointer-events: none;

}

.apiSubmitBlocked {

	display: inline-block;
	cursor: not-allowed;

}

/* ---- Tabellen ---- */

/*
 * Eigener Scroll-Rahmen fuer breite Tabellen. #content scrollt unterhalb von
 * 1059px zwar ohnehin, dann wandert aber die ganze Seite samt Fusszeile mit -
 * hier soll nur die Tabelle wandern.
 */
.apiTableScroll {

	overflow-x: auto;

}

.apiTable {

	border-collapse: collapse;
	width: 100%;

}

.apiTable th,
.apiTable td {

	padding: 4px 8px;
	text-align: left;
	vertical-align: top;

}

.apiTable th {

	background: #f0f0f0;
	font-weight: bold;
	white-space: nowrap;

}

/* Zebra statt Trennlinien - wie im uebrigen Haendlerbereich */
.apiTable tr:nth-child(even) td {

	background: #f4f3f3;

}

.apiTable tr:nth-child(odd) td {

	background: #ffffff;

}

.apiTable .apiNumeric {

	text-align: right;

}

.apiTable .apiCenter {

	text-align: center;

}

/* "2025-10" darf nicht auf zwei Zeilen brechen */
.apiTable .apiMonthCell {

	white-space: nowrap;

}

/*
 * In der Vertragstabelle traegt jede Zeile Beschriftung und Wert. Die
 * Beschriftung bekommt deshalb keinen eigenen Hintergrund, sondern laeuft im
 * Zebra der Zeile mit - sonst haette man zwei Muster uebereinander.
 */
.apiTableKeyValue th {

	width: 260px;
	color: #333333;

}

.apiTableKeyValue tr:nth-child(even) th {

	background: #f4f3f3;

}

.apiTableKeyValue tr:nth-child(odd) th {

	background: #ffffff;

}

/* Ausnahme vom Zebra: Auslastung geht vor Zeilenwechsel */
.apiTable tr.apiRowWarn td {

	background: #fff6e0;

}

.apiTable tr.apiRowOver td {

	background: #ffe3e3;

}

/* ---- Kacheln ---- */

/*
 * Gemeinsame Flaeche von Kacheln und Funktions-Chips. Die beiden sind zwei
 * Groessen derselben Sache und sollen sich nicht auseinanderentwickeln -
 * deshalb steht die Fuellung hier einmal und nicht in jeder Regel.
 *
 * #faf9f9 ist eine Stufe heller als die Zebra-Zeilen (#f4f3f3), gleicher
 * warmer Ton.
 */
.apiTile,
.apiActionItem {

	background: #faf9f9;
	border: 1px solid #d0d0d0;

}

.apiTileRow {

	display: flex;
	flex-wrap: wrap;
	margin: 0 -5px;

}

.apiTile {

	display: block;
	flex: 1 1 190px;
	min-width: 190px;
	margin: 0 5px 10px 5px;
	padding: 8px 10px;

}

.apiTileLabel {

	font-size: 0.8em;
	line-height: 1.4;
	color: #666;

}

/* Zeilenumbruch in der Kachelreihe - wie .apiPlanBreak bei den Tarifen */
.apiTileBreak {

	flex-basis: 100%;
	height: 0;

}

/* Auslastung neben der Zahl, in derselben Groesse - sie gehoert dazu */
.apiTilePct {

	margin: 0 0 0 6px;

}

/* Bezugsgroesse unter der Zahl: kleiner und leiser, es ist der Nebensatz */
.apiTileHint {

	display: block;
	margin: 2px 0 0 0;
	font-size: 0.75em;
	font-weight: normal;
	color: #666;

}

.apiTileValue {

	margin: 0 0 2px 0;
	font-size: 1.1em;
	font-weight: bold;
	color: #1b3749;

}

a.apiTileLink {

	text-decoration: none;
	color: inherit;

}

a.apiTileLink:hover {

	background: #ffdd62;

}

/* Tarif hinter einem eigenen Vertragsnamen - Zusatz, nicht Ueberschrift */
.apiPlanBase {

	color: #888;
	font-weight: normal;

}

/* ---- Schluessel ---- */

/*
 * Der frisch erzeugte Schluessel. Auffaellig, weil er genau einmal dasteht -
 * wer ihn hier uebersieht, muss einen neuen anlegen.
 */
.apiNewKey {

	margin: 0 0 12px 0;
	padding: 10px 12px;
	background: #fffbe6;
	border: 1px solid #d9c26a;

}

.apiNewKeyLabel {

	margin: 0 0 6px 0;
	font-weight: bold;

}

.apiNewKeyValue {

	display: inline-block;
	padding: 4px 8px;
	background: #fff;
	border: 1px solid #d0d0d0;
	font-size: 0.95em;
	user-select: all;

}

/*
 * Die Bearbeitungszeile ist zugeklappt, bis jemand "aendern" klickt. Offen
 * in jeder Zeile wuerde aus der Tabelle ein Formularfeld-Dickicht - genau
 * das war der erste Entwurf.
 */
.apiKeyEditRow {

	display: none;

}

.apiKeyEditRow.apiKeyEditOpen {

	display: table-row;

}

/*
 * Hoehere Spezifitaet als die Zebra-Regel, sonst gewinnt die.
 * .apiKeyEditRow td waere (0,1,1), .apiTable tr:nth-child(odd) td ist
 * (0,2,2) - die aufgeklappte Zeile stand deshalb weiss da und las sich
 * nicht als Fortsetzung der Zeile darueber.
 */
.apiTable tr.apiKeyEditRow td {

	background: #eeeded;

}

/*
 * Die Zebra-Regel zaehlt tr:nth-child, und jede Schluesselzeile zieht eine
 * zweite, eingeklappte nach sich - damit waren alle Datenzeilen gerade und
 * es gab gar keinen Wechsel mehr. Die Streifen kommen deshalb aus PHP.
 */
.apiTable tr.apiKeyRowOdd td {

	background: #ffffff;

}

.apiTable tr.apiKeyRowEven td {

	background: #f4f3f3;

}

/* Zurueckgezogen: steht nur noch da, damit man sieht, dass es ihn gab */
.apiTable tr.apiKeyGone td {

	color: #999;

}

/* Erklaerung unter einem Wert, nicht daneben - sonst bricht sie mit ihm um */
.apiHintBlock {

	display: block;
	margin: 2px 0 0 0;
	font-size: 0.85em;
	color: #666;

}

/*
 * Das Wiedererkennungsmerkmal steht immer unter der Bezeichnung, nie
 * daneben: hinter einem kurzen Namen passte es in die Zeile, hinter einem
 * langen rutschte es in die naechste - dieselbe Tabelle sah damit je nach
 * Inhalt anders aus.
 */
.apiKeyHint {

	display: block;
	margin: 1px 0 0 0;
	color: #666;
	font-size: 0.9em;

}

/*
 * Die Tabellen liefen als einzige Elemente der Seite bis zum Rand von
 * #content, waehrend Text, Diagramm und Beispielkasten bei 720px enden. Der
 * Browser verteilte den Ueberschuss auf fuenf kurze Spalten - daher die
 * klaffenden Zwischenraeume und das weit rechts stehende "aendern".
 */
.apiTableKeys,
.apiTableNarrow {

	/*
	 * Beides zusammen, und zwar absichtlich: width haelt die Breite fest,
	 * max-width deckelt sie.
	 *
	 * Ohne width bestimmte der Inhalt die Breite - und der aendert sich beim
	 * Aufklappen der Bearbeitungszeile, weil deren Erklaersatz ueber alle
	 * Spalten laeuft. Ein Klick auf "aendern" zog damit die ganze Tabelle
	 * breiter und verschob jede Spalte.
	 *
	 * Ohne max-width lief sie als einziges Element der Seite bis zum Rand von
	 * #content, waehrend Text und Beispielkasten bei 720px enden - daher die
	 * klaffenden Spaltenzwischenraeume im ersten Entwurf.
	 */
	width: 100%;
	max-width: 720px;

}

/*
 * Keine erzwungene Spaltenbreite: mit width:100% auf der zweiten Spalte
 * presste der Browser alle anderen auf ihr Minimum, und "bisherige
 * Passphrase" brach mitten im Wort um. Mit width:auto richtet sich die
 * Tabelle nach ihrem Inhalt und waechst bei langen Adresslisten bis 720px.
 */
.apiTableKeys td,
.apiTableKeys th {

	padding-right: 18px;

}

.apiTableNarrow th {

	width: 140px;

}

/* Leerer Spaltenkopf mit vollem Kopfgrund sieht aus wie eine vergessene Spalte */
.apiTable th.apiThEmpty {

	background: transparent;

}

/* Unterabschnitt: kleiner und ohne Linie - die Linie gehoert der Abschnittsueberschrift */
.apiBlockSubTitle {

	margin: 14px 0 6px 0;
	font-size: 1.05em;
	font-weight: bold;
	color: #1b3749;

}

.apiKeyForm {

	display: inline-block;
	margin: 0;

}

/* Der Knopf steht auf der Grundlinie der Felder, nicht darueber */
.apiKeyForm .apiButton {

	vertical-align: bottom;

}

/*
 * Beschriftung ueber dem Feld, nicht davor.
 *
 * Nebeneinander brauchte jedes Paar die Breite von Text plus Feld, und der
 * Knopf am Ende der Zeile fiel dadurch in die naechste. Uebereinander ist
 * jedes Paar so breit wie sein Feld, die Zeile passt - und wenn sie es
 * einmal nicht tut, bricht sie zwischen zwei Feldern statt mitten im
 * Formular.
 *
 * inline-flex mit Spaltenrichtung kommt ohne zusaetzliches Markup aus: der
 * Text und das Feld sind schon die beiden Kinder des label.
 */
.apiKeyFieldLabel {

	display: inline-flex;
	flex-direction: column;
	vertical-align: bottom;
	margin: 0 10px 0 0;
	font-size: 0.85em;
	color: #666;
	white-space: nowrap;

}

/*
 * Das Feld traegt die normale Schriftgroesse, nicht die kleine der
 * Beschriftung - sonst schrumpft der eingegebene Wert mit.
 */
.apiKeyFieldLabel input {

	font-size: 1.15em;

}

.apiKeyEditNote {

	margin: 0 0 6px 0;
	/* Laengster Inhalt der Zeile - ohne Deckel bestimmt er die Tabelle */
	max-width: 680px;

}

.apiKeyForm input {

	margin: 0 4px 0 0;
	padding: 3px 5px;
	background: #ffffff;
	border: 1px solid #d0d0d0;

}

/* Traegt nur die versteckten Felder - ausgeloest wird es vom Link oben */
.apiKeyRevokeForm {

	display: none;

}

.apiNowrap {

	white-space: nowrap;

}

.apiSeenIps {

	margin: 4px 0 0 0;
	font-size: 0.85em;

}

/* Etwas Luft zwischen den Abschnitten, damit drei Bloecke als drei lesbar sind */
.apiBlock {

	margin-bottom: 28px;

}

/* ---- Diagramm ---- */

.apiChart {

	width: 100%;
	max-width: 720px;
	height: auto;

}

.apiBarBatched {

	fill: #4a90d9;

}

.apiBarGetAll {

	fill: #1b3749;

}

/*
 * Der Teil oberhalb der Grenze. Halbdurchlaessig, damit die Aufteilung in
 * regulaere Requests und get_all darunter sichtbar bleibt - die Farbe sagt
 * "zu viel", nicht "woher".
 */
.apiBarOver {

	fill: #d64545;
	fill-opacity: 0.55;

}

.apiChartLimit {

	stroke: #d64545;
	stroke-width: 1;
	stroke-dasharray: 4 3;

}

/* laufender Monat: noch nicht voll, deshalb blasser */
.apiBarCurrent {

	opacity: 0.45;

}

.apiChartLabel {

	font-size: 11px;
	fill: #666;

}

.apiChartLegend {

	margin: 0 0 8px 0;

}

.apiLegendItem {

	margin: 0 15px 0 0;

}

.apiLegendSwatch {

	display: inline-block;
	width: 10px;
	height: 10px;
	margin: 0 5px 0 0;

}

.apiSwatchBatched {

	background: #4a90d9;

}

.apiSwatchGetAll {

	background: #1b3749;

}

.apiSwatchOver {

	background: #d64545;

}

/* ---- Hinweise ---- */

.apiBadge {

	display: inline-block;
	padding: 1px 6px;
	background: #ffdd62;
	font-size: 0.8em;

}

.apiNotice {

	padding: 6px 8px;
	background: #f4f3f3;

}

.apiError {

	padding: 6px 8px;
	background: #ffe3e3;

}

.apiHint {

	font-size: 0.85em;
	color: #666;

}

.apiBlock > .apiHint {

	margin: 6px 0 0 0;

}

.apiHint code {

	font-family: monospace;
	color: #333333;

}

.apiErrorInline {

	color: #c00000;

}

/* ---- Actions ---- */

.apiActionList {

	display: flex;
	flex-wrap: wrap;
	margin: 0 0 6px 0;
	padding: 0;
	list-style: none;

}

/* Ueberschrift ueber einer Chip-Liste - klebte vorher direkt darauf */
.apiActionGroup {

	margin: 14px 0 8px 0;
	font-size: 0.85em;
	color: #666;

}

.apiActionGroup:first-child {

	margin-top: 4px;

}

.apiActionItem {

	margin: 0 8px 8px 0;
	padding: 4px 10px;
	font-family: monospace;
	font-size: 0.95em;

}

/* ---- Konsole ---- */

.apiConsoleRow {

	margin: 0 0 6px 0;

}

.apiConsoleRow label {

	margin: 0 8px 0 0;

}

.apiConsoleInput {

	width: 100%;
	max-width: 720px;
	box-sizing: border-box;
	padding: 6px;
	border: 1px solid #d0d0d0;
	font-family: monospace;
	font-size: 0.95em;

}

.apiConsoleOutput {

	max-width: 720px;
	max-height: 420px;
	overflow: auto;
	margin: 8px 0 0 0;
	padding: 8px;
	background: #f4f3f3;
	border: 1px solid #d0d0d0;
	font-family: monospace;
	font-size: 0.9em;
	line-height: 1.45;
	white-space: pre;

}

/* ---- Balken und Tabellenzeile zeigen denselben Monat ---- */

/*
 * Gleiche Spezifitaet wie die Zebra-Regel und weiter unten im File, damit die
 * Hervorhebung den Zeilenwechsel uebersteuert.
 */
.apiTable tr.apiMonthHover td {

	background: #ffdd62;

}

.apiMonthHover .apiBarBatched {

	fill: #7fb3e8;

}

.apiMonthHover .apiBarGetAll {

	fill: #3d6f96;

}

/*
 * Dieselbe Farbe, die der Balken oberhalb der Linie hat - der rote Schleier
 * auf dem dunklen get_all-Blau ergibt genau diesen Ton. Zwei Darstellungen
 * derselben Sache sollen auch gleich aussehen.
 */
.apiOverLimit,
.apiTable td.apiOverLimit {

	color: #823f47;
	font-weight: bold;

}

/* unvollstaendige Monate stehen blass - beim Zeigen trotzdem gut sichtbar */
.apiBarCurrent.apiMonthHover {

	opacity: 0.8;

}

/* ---- Doku-Seite ---- */

.apiDocList {

	margin: 10px 0 0 0;

}

.apiDocRow {

	display: flex;
	align-items: center;
	padding: 7px 10px;

}

.apiDocList .apiDocRow:nth-child(even) {

	background: #f4f3f3;

}

.apiDocLang {

	flex: 0 0 170px;

}

.apiDocLink {

	display: inline-block;
	margin: 0 8px 0 0;
	padding: 3px 12px;
	background: #ffffff;
	border: 1px solid #d0d0d0;
	border-radius: 2px;
	color: #1b3749;
	text-decoration: none;

}

.apiDocLink:hover {

	background: #ffdd62;

}

/* Der Knopf klebte am Auswahlfeld */
.apiConsoleRow .apiButton {

	margin-left: 10px;

}

/* der Senden-Knopf steht unter dem Feld, nicht daneben */
.apiConsoleSubmit {

	margin-top: 12px;

}

.apiConsoleSubmit .apiButton {

	margin-left: 0;

}

/* ---- Kurzdoku zur gewaehlten Funktion ---- */

.apiDocBox {

	margin: 4px 0 18px 0;
	padding: 14px 16px;
	background: #faf9f9;
	border: 1px solid #d0d0d0;

}

.apiDocDesc {

	margin: 0 0 6px 0;
	font-weight: bold;
	color: #1b3749;

}

.apiDocSection {

	margin: 18px 0 6px 0;
	font-family: monospace;
	color: #1b3749;

}

.apiDocTable {

	max-width: 620px;

}

.apiDocTable th,
.apiDocTable td {

	padding: 5px 10px;

}

.apiDocFlags {

	margin: 6px 0 12px 0;

}

.apiDocFlags .apiActionItem {

	margin: 0 7px 7px 0;
	padding: 3px 9px;
	background: #ffffff;
	font-size: 0.9em;

}

.apiDocMore {

	margin: 6px 0 0 0;

}

.apiDocMore summary {

	cursor: pointer;
	font-size: 0.85em;
	color: #666;

}

/* ---- Zugangsdaten ---- */

.apiSecret {

	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;

}

.apiSecretValue {

	margin: 0 14px 0 0;
	font-family: monospace;
	letter-spacing: 1px;

}

/* in normaler Knopfgroesse - sie sind das Bedienelement der Seite */
.apiSecret .apiButton {

	margin: 0 8px 0 0;

}

/* Das Beispiel ist zum Mitnehmen da, nicht zum Nachschlagen - deshalb hell
   wie das Eingabefeld der Konsole und nicht grau wie eine Ausgabe. */
.apiExampleBox {

	background: #ffffff;

}

.apiExampleWrap {

	position: relative;
	max-width: 720px;

}

.apiExampleCopy {

	position: absolute;
	top: 8px;
	right: 8px;

}

/* Platz fuer den Knopf, damit der Text nicht darunter laeuft */
.apiExampleWrap .apiExampleBox {

	padding-right: 110px;

}

/* Funktionen fuehren in die Konsole */
.apiActionItemLink {

	padding: 0;

}

.apiActionItemLink a {

	display: block;
	padding: 4px 10px;
	color: #1b3749;
	text-decoration: none;

}

.apiActionItemLink:hover {

	background: #ffdd62;

}

/* Gruppenzeile ueber einer Flag-Liste - stand vorher auf den Chips */
.apiDocBox .apiHint {

	margin-top: 10px;

}

.apiDocBox .apiDocDesc + .apiHint,
.apiDocBox .apiDocSection + .apiHint {

	margin-top: 0;

}

/* ---- Flags als Schalter ---- */

.apiFlagItem {

	cursor: pointer;
	user-select: none;

}

.apiFlagItem:hover {

	background: #ffdd62;

}

/* gesetzt = steht im Anfrageinhalt */
.apiFlagItem.apiFlagActive {

	background: #1b3749;
	border-color: #1b3749;
	color: #ffffff;

}

/* Solange das JSON nicht lesbar ist, waere ein Klick ein Ratespiel */
.apiFlagsBlocked .apiFlagItem {

	cursor: not-allowed;
	opacity: 0.5;

}

.apiFlagsBlocked .apiFlagItem:hover {

	background: #faf9f9;

}

/* ---- Parameter-Bedienelemente ---- */

.apiParamControl {

	padding: 3px 6px;
	border: 1px solid #d0d0d0;
	background: #ffffff;
	font-family: inherit;
	font-size: 0.95em;

}

input.apiParamControl {

	width: 150px;

}

select.apiParamControl {

	min-width: 90px;

}

/* Erklaerung zu einem Parameter - darf umbrechen, anders als die Kurzform */
.apiParamNote {

	display: block;
	max-width: 380px;
	white-space: normal;
	font-size: 0.85em;
	color: #666;

}

/* ---- Spaltenauswahl ---- */

/* Steht in der Wert-Spalte, wo bei den anderen Parametern das Feld sitzt */
.apiColumnCount {

	font-size: 0.85em;
	color: #666;

}

/*
 * Steht unter dem Beschreibungstext in derselben Spalte - die Liste gehoert
 * zur Erklaerung. Als Raster statt im Flattersatz: gleich breite Felder in
 * festen Spalten sind eine Liste, die man ueberfliegen kann.
 */
.apiColumnList {

	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 6px;
	/*
	 * !important, weil .DealerBOX_Content ul in DealerTPBox.css jedes ul im
	 * Haendlerbereich auf margin: 0 setzt - Spezifitaet (0,1,1) gegen (0,1,0)
	 * hier. Ohne das wirkt der Abstand nicht, egal welche Zahl dasteht.
	 */
	margin: 8px 0 0 0 !important;
	max-width: 430px;

}

/*
 * Nebenaktion, kein Bedienelement der ersten Reihe: als Textlink und nicht
 * als Knopf, damit sie neben den Chips nicht um Aufmerksamkeit kaempft.
 */
.apiColumnInvert {

	margin: 10px 0 0 0;
	padding: 0;
	border: 0;
	background: none;
	color: #1b3749;
	font-size: 0.85em;
	text-decoration: underline;
	cursor: pointer;

}

.apiColumnInvert:hover {

	color: #4a90d9;

}

.apiColumnItem {

	cursor: pointer;
	font-size: 0.85em;
	padding: 3px 8px;
	margin: 0;

}

/*
 * Platz fuer die Position, auch wenn keine da ist: sonst ruecken gewaehlte
 * und ungewaehlte Chips unterschiedlich ein und das Raster franst aus.
 */
.apiColumnItem::before {

	content: attr(data-pos);
	display: inline-block;
	min-width: 1.5em;
	margin-right: 4px;
	font-weight: bold;
	opacity: 0.7;

}

/*
 * Gewaehlt ist dunkel - genau wie bei den Flags darueber. Vorher war es hier
 * umgekehrt (blass = gewaehlt), also dieselbe Optik mit der entgegengesetzten
 * Bedeutung auf einer Seite.
 */
.apiColumnItem.apiColumnUsed {

	background: #1b3749;
	border-color: #1b3749;
	color: #ffffff;

}

/* nach der Auswahl-Regel, damit der Hinweis auch auf gewaehlten Chips greift */
.apiColumnItem:hover {

	background: #ffdd62;
	border-color: #d0d0d0;
	color: #1b3749;

}

/*
 * Die Zelle mit der Spaltenauswahl darf umbrechen. width: 1% heisst hier
 * "so schmal wie der Inhalt zulaesst" - ohne das nimmt sich die Wert-Spalte
 * den halben Tisch und die Beschreibung bekommt den Rest.
 */
.apiDocTable td:last-child {

	white-space: normal;
	width: 1%;

}

/* ---- Free-Zugang freischalten ---- */

.apiActivateForm {

	margin-top: 14px;

}

/* Das Haekchen und sein Text gehoeren zusammen - als label, damit auch ein
   Klick auf den Satz es setzt. */
.apiActivateAccept {

	display: block;
	font-size: 0.9em;
	cursor: pointer;

}

.apiActivateAccept input {

	margin: 0 6px 0 0;

}

.apiActivateActions {

	margin-top: 14px;

}

/* ---- Nutzungsbedingungen ---- */

/*
 * Vertragstext: laengere Absaetze, die man am Stueck liest. Deshalb enger
 * begrenzt als der uebrige Inhalt - ueber die volle Spaltenbreite findet das
 * Auge den Zeilenanfang nicht mehr zuverlaessig.
 */
.apiTermsText {

	max-width: 640px;
	line-height: 1.5;

}

.apiTermsText h1 {

	margin: 0 0 4px 0;
	font-size: 1.2em;
	color: #1b3749;

}

.apiTermsText h2 {

	margin: 22px 0 8px 0;
	font-size: 1.0em;
	color: #1b3749;

}

.apiTermsText p {

	margin: 0 0 10px 0;

}

/* Die Fassungsnummer steht ueber dem Text und ist keine Aussage des Textes */
.apiTermsText .termsVersion {

	margin-bottom: 16px;
	font-size: 0.85em;
	color: #666;

}

.apiTermsText ol {

	margin: 0 0 10px 0;
	padding-left: 22px;

}

.apiTermsText li {

	margin-bottom: 8px;

}

/* ---- Tarifauswahl ---- */

/*
 * Gleich hohe Karten nebeneinander, und sie brechen um, wenn die Spalte zu
 * schmal wird. stretch, damit der Knopf bei allen auf derselben Hoehe sitzt -
 * unterschiedlich lange Merkmallisten wuerden ihn sonst verspringen lassen.
 */
.apiPlanGrid {

	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 10px;
	margin: 14px 0 18px 0;

}

.apiPlanCard {

	display: flex;
	flex-direction: column;
	width: 195px;
	padding: 12px;
	background: #faf9f9;
	border: 1px solid #d0d0d0;

}

.apiPlanName {

	margin-bottom: 4px;
	font-weight: bold;
	color: #1b3749;

}

.apiPlanPrice {

	margin-top: 2px;
	font-size: 1.05em;

}

/* min-height, damit die Zeile auch leer ihren Platz haelt - siehe
   createPlanCard(): sonst fluchten die Kacheln nicht */
.apiPlanBilling {

	min-height: 1.3em;
	font-size: 0.8em;
	color: #666;

}

/*
 * Was der Tarif kostet, steht ueber der Linie - was man dafuer bekommt,
 * darunter. Ohne die Trennung lief in der Kachel alles zu einem Block
 * zusammen, in dem Preis, Abrechnung und Merkmale gleich aussahen.
 *
 * list-style mit !important, weil .DealerBOX_Content ul in DealerTPBox.css
 * jedes ul im Haendlerbereich auf none setzt - (0,1,1) gegen (0,1,0). Ohne
 * das fehlen die Punkte, und die Merkmale lesen sich als Fliesstext.
 */
.apiPlanFacts {

	margin: 10px 0 0 0 !important;
	padding: 10px 0 0 15px !important;
	border-top: 1px solid #e4e4e4;
	list-style: disc outside !important;
	font-size: 0.85em;
	line-height: 1.35;
	color: #444;

}

.apiPlanFacts li {

	margin-bottom: 5px;

}

/* Der Preis ist die Zahl, auf die zuerst geschaut wird */
.apiPlanPrice {

	font-weight: bold;

}

/* margin-top: auto schiebt die Aktion an den unteren Rand der Karte */
.apiPlanAction {

	margin-top: auto;
	padding-top: 12px;

}

/*
 * Alle Knoepfe gleich breit. Sonst richtet sich die Breite nach dem Text,
 * und "Kontakt" steht neben "kostenpflichtig wechseln" wie ein Versehen.
 */
.apiPlanAction .apiButton {

	display: block;
	width: 100%;
	box-sizing: border-box;
	text-align: center;

}

/*
 * Der laufende Tarif. Er ist die Bezugsgroesse fuer alles daneben - man
 * vergleicht ja gegen ihn -, deshalb faellt er auf, ohne wie ein Angebot
 * auszusehen: heller Grund, kraeftiger Rahmen, kein Farbakzent.
 */
.apiPlanCurrent {

	background: #ffffff;
	border-color: #1b3749;
	box-shadow: inset 0 0 0 1px #1b3749;

}

.apiPlanCurrent .apiPlanWhen {

	font-weight: bold;
	color: #1b3749;

}

/* ---- Zustimmung und Bestellabschluss ---- */

/*
 * Ohne JavaScript ist das hier ein gewoehnlicher Block unter den Kacheln:
 * Bedingungen lesen, Haken setzen, auf einer Kachel buchen. Der Abschluss-
 * knopf bleibt dabei verborgen - er traegt keinen Plan und koennte nichts
 * ausloesen.
 */
.apiConfirm {

	max-width: 720px;
	margin: 18px 0 0 0;

}

.apiConfirmTitle,
.apiConfirmChoice,
.apiConfirmActions {

	display: none;

}

.apiConfirmTermsTitle {

	margin: 0 0 4px 0;
	font-weight: bold;
	color: #1b3749;

}

.apiConfirmTermsFile {

	margin-left: 8px;
	font-weight: normal;
	font-size: 0.85em;

}

.apiKeyLegacyNote {

	max-width: 720px;
	margin: 8px 0 0 0;

}

.apiTermsMeta {

	margin: 0 0 8px 0;

}

/*
 * Die Bedingungen im Volltext, aber in einem Kasten: sonst schoebe der
 * Paragraph 8 den Haken so weit nach unten, dass niemand ihn findet.
 */
.apiConfirmTerms {

	max-height: 240px;
	margin: 0 0 10px 0;
	padding: 10px 12px;
	overflow-y: auto;
	background: #ffffff;
	border: 1px solid #d0d0d0;
	font-size: 0.85em;
	line-height: 1.45;

}

/* ---- ab hier der Dialog ---- */

.apiConfirmJs {

	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1000;
	max-width: none;
	margin: 0;
	padding: 20px;
	overflow-y: auto;
	background: rgba(0, 0, 0, 0.45);
	display: none;

}

.apiConfirmJs.apiConfirmOpen {

	display: block;

}

.apiConfirmJs .apiConfirmBox {

	max-width: 620px;
	margin: 0 auto;
	padding: 16px 18px;
	background: #f4f3f3;
	border: 1px solid #1b3749;

}

.apiConfirmJs .apiConfirmTitle,
.apiConfirmJs .apiConfirmChoice,
.apiConfirmJs .apiConfirmActions {

	display: block;

}

.apiConfirmTitle {

	margin: 0 0 10px 0;
	font-weight: bold;
	font-size: 1.1em;
	color: #1b3749;

}

/*
 * Die Wahl noch einmal, Zeile fuer Zeile aus der Kachel uebernommen. Wer
 * hier etwas anderes liest als dort, hat sich vertan - und soll es merken.
 */
.apiConfirmChoice {

	margin: 0 0 12px 0;
	padding: 10px 12px;
	background: #ffffff;
	border: 1px solid #d0d0d0;

}

.apiConfirmLine {

	line-height: 1.5;

}

.apiConfirmLine:first-child {

	font-weight: bold;
	color: #1b3749;

}

.apiConfirmActions {

	margin-top: 12px;

}

.apiConfirmCancel {

	margin-left: 12px;
	padding: 3px 12px;
	border: 1px solid #d0d0d0;
	background: #ffffff;
	font-family: inherit;
	font-size: inherit;
	line-height: 1.4;
	color: #333333;
	cursor: pointer;

}

/* ---- Tarifempfehlung ---- */

/*
 * Derselbe Kasten wie beim frisch erzeugten Schluessel: auffaellig, aber
 * nicht alarmierend - es ist ein Rat und keine Warnung.
 */
.apiPlanAdvice {

	max-width: 720px;
	margin: 14px 0 0 0;
	padding: 10px 12px;
	background: #fffbe6;
	border: 1px solid #d9c26a;

}

.apiPlanAdviceTitle {

	margin: 0 0 4px 0;
	font-weight: bold;
	color: #1b3749;

}

.apiPlanAdviceText {

	margin: 0;
	line-height: 1.5;

}

/* Die gemeinte Kachel traegt dieselbe Farbe wie der Kasten - der Stern allein
   findet sich in einer Reihe von fuenf zu langsam. */
.apiPlanAdvised {

	background: #fffbe6;
	border-color: #d9c26a;

}

.apiPlanAdvisedMark {

	margin-left: 1px;
	color: #a8862a;

}

/* Der eine Satz, in dem sich die drei Wege unterscheiden */
.apiPlanWhen {

	margin-top: 6px;
	font-size: 0.8em;
	color: #666;

}

/* Was es nur auf Anfrage gibt - abgesetzt unter der Auswahl */
.apiPlanOnRequest {

	margin-top: 16px;
	padding-top: 12px;
	border-top: 1px solid #e4e4e4;

}

/*
 * Der Kontakt-Knopf der Enterprise-Kachel ist ein Link, kein Knopf - er
 * schaltet nichts frei, er fuehrt weg. Damit er neben den echten Knoepfen
 * nicht verrutscht, bekommt er deren Innenabstand und Zeilenhoehe.
 */
a.apiPlanContact {

	display: inline-block;
	text-decoration: none;

}

a.apiPlanContact:hover {

	color: #ffffff;

}

/*
 * Abzeichen am Tarifnamen: Standardtarif oder angepasst. Zurueckhaltender
 * als das Trial-Abzeichen daneben - es ist eine Einordnung, keine Neuigkeit.
 */
.apiBadgePlan {

	background: #eeeeee;
	color: #666;
	font-weight: normal;

}

/*
 * Erzwungener Zeilenumbruch im Kachelraster. Volle Breite bei Hoehe null:
 * die Flexbox bricht davor um, ohne dass etwas sichtbar wird.
 */
.apiPlanBreak {

	flex-basis: 100%;
	height: 0;

}

/* branches */
#branchesPageContentBlock {

	margin: 5px;

}

#branchesPageContentBlockSelection {

	margin: 5px;
	border: 1px solid #999999;
	background-color: #fff;
	padding: 5px;
	padding-top: 10px;
	
}


#branchesSelectArea {

}

.branchInputField {

	font-size: 0.8em;

	margin-right: 5px;
	
}

.branchLabel {

	display: block;
	float: left;	

	font-size: 0.8em;

	width: 170px;
	
	margin-right: 10px;
	
	text-align: right;
	
}

.branchLabelInline {

	font-size: 0.8em;

}

.branchButton {

	font-size: 0.8em;
	margin-top: 10px;
	
	width: 120px;
	height: 30px;
	
	float: left;

}

.branchButtonPositioning {

	margin-left: 187px;

}

.branchInputFieldSize {

	width: 240px;
	box-sizing: border-box;

}

.branchInputFieldSizeMiddle {

	width: 120px;
	margin-right: 5px;
	box-sizing: border-box;

}


.branchInputFieldSizeSmall {

	width: 50px;
	margin-right: 5px;
	box-sizing: border-box;

}

/* City sits next to ZIP (50px + 5px gap): 50+5+185=240 */
#inputCity {

	width: 185px;

}

/* Remove trailing margin so right edges align */
.branchInputFieldWrapper > input:last-child,
.branchInputFieldWrapper > select:last-child {

	margin-right: 0;

}

#branchInputFormWrapper {

	padding: 5px;
	border: 1px solid #999999;
	background-color: #fff;

}

.branchInputFieldWrapper {

	overflow: hidden;
	
	padding: 3px 0;

}

.branchError {

	float: right;
	
	width: 486px;
	
	margin: 5px 50px 5px 100px; 
	
	padding: 5px;
	
	background-color: #FFDD62;
    border: 1px solid #FFDD62;
    
	color: #000000;
	
	font-size: 0.8em;

}

#branchesSelectionList {

	margin-left: 180px;

}

.branchesSelectionListItemNew {
	background-color: #fff;
	border-bottom: 1px solid #999999;
	
	height: 20px;
	
	font-size: 0.8em;
	margin-right: 10px;
	
	padding-top: 0;
	padding-bottom: 10px;
}

.branchesSelectionListItem {

	padding: 8px 0 8px 0;
	font-size: 0.8em;
	margin-right: 10px;

}

.branchesSelectionListItem:hover {
	background-color: #ffdd62;
}

.branchesSelectionListItemEven {background-color: #fff;}
.branchesSelectionListItemOdd {background-color: #F4F3F3;}


.branchesSelectionListReference {

	color: #0000b7;
	text-decoration: none;	
	margin-left: 3px;

}

.branchesSelectionListReferenceNew {

	color: #0000b7;
	text-decoration: none;

}

.branchesSelectionListReferenceNew:hover {

	text-decoration: underline;

}

/* breadcrumbs */
.breadCrumbsReference {

	text-decoration: none;

}

.breadCrumbsReference:hover {

	text-decoration: none;

}


.breadCrumbsText {

}

/* clickinvoices */
#clickInvoicesContentBlock {

	margin: 5px;

}

/**** INVOICE TABLE ****/

.invoiceDetailsBox {

	padding: 5px;
	padding-left: 15px;
	margin: 2px 0 0 0;
	
	border-bottom: solid 1px #536d7d;

	font-size: 0.8em;
	
	height: 25px;
	
}

.invoiceNoInvoicesBox {

	padding: 10px;
	margin: 2px;
	font-size: 0.8em;
	
}

.invoiceDetailsReference {

	text-decoration: none;
	color: #000;


}

.invoiceDetailsReference:hover {

	text-decoration: underline;
	
}

#invoiceTable {

	width: 100%;

	border: 1px solid #999999;
	background-color: #fff;
	
}

#invoiceTableHeadline {

	width: 100%;

}

.invoiceTableHeadline {

	font-size: 0.8em;
	font-weight: bold;
    padding: 5px 3px;
  

}

.invoiceTableHeaderRow {


}

.invoiceTableContentRow {


}

.invoiceTableContentRowEven {background: #f4f3f3; }
.invoiceTableContentRowOdd {background: #FFF; }

.invoiceTableContentRowEven:hover {background: #ffdd62; }
.invoiceTableContentRowOdd:hover {background: #ffdd62; }

.invoiceTableDetailsRow {

}

.invoiceTableHeaderRow>td:nth-child(2) {
	text-align: center;
}
.invoiceTableHeaderRow>td:nth-child(3) {
	text-align: center;
}

.invoiceTableContentRowEven>td:nth-child(3) {
	text-align: center;
}
.invoiceTableContentRowEven>td:nth-child(2) {
	text-align: center;
}

.invoiceTableContentRowOdd>td:nth-child(3) {
	text-align: center;
}
.invoiceTableContentRowOdd>td:nth-child(2) {
	text-align: center;
}



.invoiceTableContent {

	padding: 8px 15px;
	font-size: 0.8em;

}

.invoiceShowDetailsRef {

	
}

.invoiceNumbersRefToShowDetails {

	text-decoration: none;
	
	color: #000;

}

.infoInvoicePaid {

	width: 80px;

	padding: 2px;
	margin: 2px;
	
	font-size: 0.75em;
	
	border: 1px solid #05e900;
	background-color: #d7ffd4;
	
	text-align: center;

}

.infoInvoiceStorno {

	width: 80px;

	padding: 2px;
	margin: 2px;
	
	font-size: 0.75em;
	
	border: solid 1px #fec29e;
	background-color: #fceadf;
	
	text-align: center;

}

.infoInvoicePartlyPaid {

	width: 80px;

	padding: 2px;
	margin: 2px;
	
	font-size: 0.75em;

	border: solid 1px #fec29e;
	background-color: #fceadf;
	
	text-align: center;

}

.infoInvoiceNotPaid {

	width: 80px;

	padding: 2px;
	margin: 2px;
	
	font-size: 0.75em;

	border: 1px solid #e90000;
	background-color: #ffd4d4;
	
	text-align: center;

}

#refInvoicesShowMore {

	float: right;
	
	font-size: 0.75em;
	
	text-decoration: none;
	
	color: #000;

	padding: 1px 4px;
	margin: 10px 10px 5px 1px;
	
	background-image:url('/images/buttonBackground.png');
	border: none;
	border-radius: 3px;
	
}


.referenceCursor {

	cursor: pointer;

}



/**** SEARCH FORM *****/

#invoiceFilterWrapper {

	margin: 5px 0 10px 0;
	
	padding: 5px;
	padding-top: 10px;
	
	height: 60px;
	
	border: 1px solid #999999;
	background-color: #fff;
}


#invoiceSearchInput {

	font-size: 0.8em;
	width: 210px;
	margin-right: 40px;

}

#invoiceSearchLabel {

	font-size: 0.8em;
	
}

#invoiceDateStartInput {

	font-size: 0.8em;
	width: 80px;
	
}

#invoiceDateStartLabel {

	font-size: 0.8em;
	margin-left: 10px;

}

#invoiceDateEndInput {

	font-size: 0.8em;
	width: 80px;

}

#invoiceDateEndLabel {

	font-size: 0.8em;

}

#invoiceFilterSubmit {

	display: block;
	
	float: right;

	font-size: 0.8em;
	margin-right: 60px;
	margin-top: 10px;
	
}

#removeFilter {

	width: 110px;

	font-size: 0.8em;
	
	margin: 5px;
	margin-left: 95px;
	
	padding: 1px 3px;
	
	background-image:url('/images/buttonBackground.png');
	border: none;
	border-radius: 3px;
    cursor: pointer;
  
    text-align: center;
 

}

.txtToDownloadInvoice {

	float: left;
	margin-right: 5px;

}

.txtToDownloadInvoice:hover {

	text-decoration: underline;

}

.imageToDownloadInvoice {

	float: left;

}

.imageToOpenInvoiceDetails {

	display: block;

	background-image:url('/images/sprites.png');
	background-position:-165px -273px;
	width: 19px;
	height: 19px;

}

/* clickorder */
#clickOrdersPageContentWrapper {

	margin: 5px;
	overflow-x: auto;

}

#ordersInfoBox {

	font-size: 0.8em;
	
	overflow: hidden;
	
	margin: 10px 0;

}

.ordersHighlightedText {

	font-size: 1em;
	
	width: 70px;
	height: 25px;
	
    margin-right: 5px;
    text-decoration: underline;

    display: block;
    float: left;
    
}

#ordersOverviewBox {

	font-size: 0.8em;
	
	margin: 5px 0;


}

.ordersOverviewBoxHeadline {

	padding: 5px;
	
	font-weight: bold;

}

.ordersOverviewTableRowBasicStyling {

		
}

.ordersOverviewTableCellsBasicStyling {

	padding: 10px 5px 10px 5px;

		
}

.ordersOverviewTableCellsStylingUnderline {
	
	border-bottom: 1px solid #bbb;

}

.ordersOverviewTableResultStyling {

	 border-bottom: double 3px #000000;

}

.ordersOverviewTableResultStylingNegative {

	color: #ff0000;
	 border-bottom: double 3px #ff0000;

}

#ordersClickAllocationInfoBox {

	margin: 20px 0 10px 0;
	font-size: 0.8em;
	
	overflow: hidden;
	
}

#ordersClickInvoicesUnpaidInfoBox {

	margin: 20px 0 10px 0;
	font-size: 0.8em;
	
	overflow: hidden;
	
}

.orderRelatedShops {


	margin-top: 5px;
	margin-left: 75px;

}

#ordersNoEstimationBox {

	margin: 5px 0;
	font-size: 0.75em;
	
	overflow: hidden;

}

#ordersTable {

	margin: 5px 0;
	border: 1px solid #999999;
	background-color: #fff;
	
}


.clickOrdersTableHeadline {

	font-size: 0.8em;

	font-weight: bold;
	
	white-space: nowrap;
        
        border-bottom: 1px solid #999999;
        background-color: #ccc;

}

.clickOrdersTableRowBasicStyling {

		font-size: 0.8em;

}

.clickOrdersTableCellBasicStyling {

	padding: 9px 2px 9px 8px;

}

.clickOrdersTableRowBasicStylingEven {background: #FFF; }
.clickOrdersTableRowBasicStylingOdd {background: #f4f3f3; }

.clickOrdersTableRowRecommended {

}

.clickOrdersTableRowNotRecommended {
	color: #888;
}

.clickOrderReferenceRelatedShop {

	color: #0000B7;
    text-decoration: none;
}

.clickOrderReferenceRelatedShop:hover {

    text-decoration: underline;
}


.clickOrderReference {

	text-decoration: none;
	color: #00006f;
	
	width: 90px;
	padding-right: 5px;
}


.clickOrderReference:hover {

	text-decoration: underline;
	
	color: #24bd00;
}

.orderImportantInfo {

	color: #E90000;

}

#infoPricePerMoth {

	font-size: 0.75em;
	margin: 10px 10px 0 10px;
	
}

#infoRecommendationClickPackage {

	font-size: 0.75em;
	margin: 10px 10px 0 10px;

}

#infoMinClicksPerMonth {

	font-size: 0.75em;
	margin: 10px 10px 0 10px;

}

.orderOverviewTab {

	border: 1px solid #999999;
	background-color: #fff;
	
}

#ordersInvAddress {
    overflow: hidden;
    font-size: 0.8em;
    margin-bottom: 20px;
   
}

.ordersInvLbl {
    margin-bottom: 10px;
    text-decoration: underline;
}

.ordersInvTxt {
    
     margin-left: 75px;
    
}

.clickOrderChangeAddressRef {
    
}

.clickOrderPageServerFailure {
    
    color: red;
    padding: 5px;
    border: 1px solid #000;
    margin: 40px 0;
    font-size: 0.9em;
    text-align: center;
}

/* clicktransfer */
#clickTransferPageContentBlock {

    margin: 5px;

}

#clickTransferTable {

	border: 1px solid #999999;
	background-color: #fff;

}

#clickTransferTableHeadline {

	

}

.clickTransferTableRowHeadline {

	font-size: 0.8em;

}

.clickTransferTableRow {

	font-size: 0.8em;

}


.clickTransferTableRowEven {

	background-color: #F4F3F3;
	
	}
	
.clickTransferTableRowOdd {

	background-color: #fff;
	
	}

.clickTransferTableCellDate {

	padding: 8px 5px;

}

.clickTransferTableCellClicks {

	padding: 8px 5px;

}

.clickTransferTableCellCompany {

}

.clickTransferTableCellHeader {

	padding: 5px 5px;
	height: 30px;
	font-weight: bold;

}

/* datastats */
#dataStatsOverviewWrapper {

	margin: 10px;

}

.dataStatsOverviewLineWrapper {

	overflow: hidden;
	padding: 3px 5px;

}

.dataStatsOverviewLineWrapperEven {

	background: #FFF;
	
	}
	
.dataStatsOverviewLineWrapperOdd {

	background: #f4f3f3; 
	
	}

.dataStatsOverviewLineWrapperHover:hover {

	background-color: #FFDD62;
	cursor: pointer;

}

.dataStatsOverviewLabel {

	display: block;
	float: left;
	width: 400px;
	height: 20px;

}

.dataStatsOverviewInfo {

	display: block;
	float: right;
	width: 100px;
	height: 20px;
	
	text-align: center;
	
}


.dataStatsMoreInfoRef {

	text-decoration: none;
	color: #0000b7;

}

.dataStatsDownloadAsCsVRef {

	font-size: 0.9em;

	padding: 3px;
	
	margin: 5px 15px 5px 15px;
	display: block;

	text-decoration: none;
	color: #0000b7;
	cursor: pointer;


}

.dataStatsDownloadAsCsVRef:hover {

	text-decoration: underline;
	
}

.dataStatsOverviewDescription {

	font-size: 0.9em;
	margin: 3px 220px 3px 20px;

}

#dataStatsHideDescriptionText {

	float: right;

	top: 0;
	right: 0;
	
	background-image: url("/images/sprites.png");
    background-position: -166px -254px;
    height: 13px;
    width: 13px;
    
    margin-left: 10px;
	
}
	
#dataStatsShowMoreDescriptionText {

	float: right;
	top: 0;
	right: 0;


	background-image: url("/images/sprites.png");
    background-position: -182px -254px;
    height: 13px;
    width: 13px;

}

#dataStatsShowMoreDescriptionButtonBackground {

	float: right;
	position: absolute;
	bottom: 0;
	left: 0;
	
	background-image: url("/images/fade.png");
    height: 20px;
    width: 100%;

}

/* datatab */
#offerOverviewHeadline {

	overflow: hidden;
	padding-left: 10px;

}

.offerOverviewHeadlineItem {

	float: left;

	width: auto;
	min-width: 130px;
	padding: 0 8px;
	height: 25px;

	text-align: center;
	margin: 5px 2px 0 0;
	color: #fff;

	background-image:url(/images/tab_inactive.gif);
	background-size: 100% 100%;

}

.offerOverviewHeadlineItem:hover {

	background-image:url(/images/tab_active.gif);
	background-size: 100% 100%;
	color: #000;

}

.offerOverviewHeadlineItemSelected {

	background-image:url(/images/tab_active.gif);
	background-size: 100% 100%;
	color: #000;
	margin: 5px 2px 0 0;

}

.offerOverviewHeadlineReference {

	display: block;
	
	height: 100%;
	
	font-size: 0.8em;
	color: #fff;
	text-decoration: none;
	white-space:nowrap;
	padding: 2px;
	padding-top: 4px;

}

.offerOverviewHeadlineReference:hover {

	font-size: 0.8em;
	color: #000;
	text-decoration: none;
	white-space:nowrap;
	padding: 2px;
	padding-top: 4px;
	
}

.offerOverviewHeadlineReferenceSelected {

	display: block;

	height: 100%;

	font-size: 0.8em;
	color: #000;
	text-decoration: none;
	white-space:nowrap;
	padding: 2px;
	padding-top: 4px;
	
}

#offerOverviewContent {

	border: solid 1px #999999;
	background-color: #fff;
	margin: 0 5px 5px 5px;

	padding: 5px;
	
	font-size: 0.8em;


}

#offerOverviewUserInterfaceWrapper {

}

#offerOverviewListWrapper {

	overflow: hidden;
	position: relative;

}

#inputFilter {

}

.offerOverviewInputWrapper {

	margin: 3px 0;
	overflow: hidden;

}

.offerOverviewInfoText {

	position: relative;
	margin-bottom: 15px;
	overflow: hidden;

	background-color:lightBlue;
	border-radius:3px;
	padding:5px;
}

.offerOverviewListEmptyMessage {

	margin-top: 10px;
	padding: 8px 5px;
	color: #555;

}

.offerOverviewInputField {

	display: block;
	float: left;
	width: 250px;
	
}

.offerOverviewInputFieldSmall {

	display: block;
	float: left;
	width: 50px;

}

.offerOverviewLabel {

	display: block;
	float: left;
	width: 250px;

	text-align: right;
	
	padding-right: 15px;
	
	margin: 0 5px 0 0;

	
}

.offerOverviewLabelInline {

	display: block;
	float: left;
	
	text-align: center;
	
	padding: 0 15px;
	
	margin: 0 5px;

}

#offerOverviewSubmit {

	margin: 15px 0 10px 255px;

}

#offerOverviewNaviBar {

	overflow: hidden;

	padding: 3px 3px;
	
	margin: 10px 0 3px 0;
	
	height: 25px;
	
}

#offerOverviewNaviBarBottom {

	overflow: hidden;

	padding: 3px 3px;
	
	margin: 10px 0 3px 0;
	
	height: 25px;
	
}

#offerOverviewNaviBarBottom {

	overflow: hidden;

	padding: 3px 3px;
	
	margin: 10px 0 3px 0;
	
	height: 25px;
	
}

#offerOverviewNaviBarInfoPart {

	float: left;

}

#offerOverviewNaviBarInfoPartBottom {

	float: left;

}

#offerOverviewNaviBarReferencePart {

	float: right;

}

#offerOverviewNaviBarReferencePartBottom {

	float: right;

}

#offerOverviewNaviBarReferenceList {

	overflow: hidden;

}

#offerOverviewNaviBarReferenceListBottom {

	overflow: hidden;

}

.offerOverviewNaveBarReferenceListItem {

	float: left;
	padding: 0 1px;

}

#offerOverviewNaviBarGoForwardRef {

	margin-left: 5px;
	float: right;
	text-decoration: none;
	color: #686868;
}

#offerOverviewNaviBarGoBackwardRef {
	float: right;
	text-decoration: none;
	color: #686868;
}

#offerOverviewNaviBarGoForwardRef:hover {

	margin-left: 5px;
	float: right;
	text-decoration: none;
	color: #000;

}


#offerOverviewNaviBarGoBackwardRef:hover {

	float: right;
	text-decoration: none;
	color: #000;

}

.offerOverviewNaviBarReferenceExport {

	text-decoration: none;
	color: #686868;

	
}

.offerOverviewNaviBarReferenceExport:hover {

	text-decoration: none;
	color: #000;

}


.offerOverviewNaviBarReference {

	text-decoration: none;
	color: #686868;

	
}

.offerOverviewNaviBarReference:hover {

	text-decoration: none;
	color: #000;

}

.offerOverviewNaviBarReferenceSelected {

	text-decoration: none;
	color: #ff0000;

}

.offerListHeadlineWrapper {

	margin: 0;
	padding: 3px 3px;

	overflow: hidden;
	
	border-top: 1px solid #999999;
	border-bottom: 1px solid #999999;

	font-weight: bold;

}

#offerListHeadlineProductName {

	display: block;
	float: left;
	
	width: 500px;

}

.offerListHeadlineInfo {

	display: block;
	float: right;

	width: 110px;
	
}

.offerOverviewListWrapper {

	overflow: hidden;

	padding: 10px 3px 10px 5px;
	
	min-height: 34px;
	
}

#offerDetailsWrapper {

	position: relative;

}

.offerOverviewListWrapperEven {background:  #FFF;}
.offerOverviewListWrapperOdd {background: #f4f3f3; }

.offerOverviewListWrapper:hover {
	background: #ffdd62; 
	cursor: pointer;
}

.offerOverviewListInfoWrapper {

	float: left;
	
	width: 490px;
	
}

.offerOverviewListProductReference {

	display: block;

	text-decoration: none;
	color: #0000b7;
	
	margin-left: 20px;
	font-size: 0.75em;
	
}

.offerOverviewListProductReference:hover {

	display: block;

	text-decoration: underline;
	color: #0000b7;
	
	margin-left: 20px;
	font-size: 0.75em;
	
}

.offerOverviewListInfoNotMapped {
	
	display: block;
	color: #fc7700;
	
	margin-left: 20px;
	font-size: 0.75em;
	
}

.offerOverviewListInfoDetails {

	display: block;

	text-decoration: none;
	color: #000;

}

.offerOverviewListAdditionalInfo {

}

.offerOverviewListAdditionalInfoWrapper {

	width: 200px;
	height: 25px;

	float: right;

	text-align: center;
	
	
}

.offerOverviewListPriceWrapper {

	width: 110px;
	height: 25px;

	float: right;

}

.offerOverviewListPriceInfo {

	display: block;

}

.offerOverviewListPriceInfoRed {

	color: red;

}

.offerOverviewListPriceInfoGreen {

	color: green;

}


#offerDetailsNavigationBar {

	padding: 0 10px;
	margin: 5px 0 4px 0;
	
	height: 20px;
	

}

.offerDetailsInfoHeadline {

	margin: 0;
	padding: 8px 10px;
	overflow: hidden;
	
	background-color: #ffffc9;
	
	border-top: 1px solid #999999;
	border-bottom: 1px solid #999999;

}

.offerDetailsContactTpHeadline {

	margin-top: 25px;

}

.offerDetailsProblemHeadline {

	margin: 0;
	padding: 8px 10px;
	overflow: hidden;
	
	background-color: #febf9f;
	
	border-top: 1px solid #999999;
	border-bottom: 1px solid #999999;

}

.offerDetailsInfoWrapper {

	padding: 8px 10px;
	overflow: hidden;
		
}

.offerDetailsInfoWrapperEven {background: #FFF; }
.offerDetailsInfoWrapperOdd {background: #f4f3f3; }

.offerDetailsInfoLabel {

	display: block;
	float: left;

}

.offerDetailsInfo {

	display: block;
	float: right;

}

.offerDetailsReference {

	text-decoration: none;
	color: #0000b7;

}

.offerDetailsReference:hover {

	text-decoration: underline;
	
}


#offerDetailsInputFormWrapper {

	margin: 15px 10px;

}

.offerOverviewListInfoNoProductsAvailable {

	margin: 5px;
	
	padding: 15px 5px;
	
	background-color: #FFDD62;
	border: solid 1px #FFDD62;

}

.dataTabJsFailureMsgInline {

	font-size: 0.8em;

	margin: 5px 50px 5px 255px;
	padding: 10px;
	background-color: #FFDD62;
	border: 1px solid #FFDD62;
	
}


.dataTabRefSymbol {

	text-decoration: none;
	color: #d30000;
	
}

.dataTabRefSymbol:hover {

	text-decoration: none;
	color: #0000b7;

}

#dataTabAjaxWrapper {

	position: relative;
	min-height: 400px;

}

.imageGoForwardInDataList {

	display: block;	

	margin-left: 5px;
	
	background-image:url('/images/sprites.png');
	background-position:-184px -299px;
	width: 17px;
	height: 21px;

}

.imageGoBackwardInDataList {

	display: block;

	margin-right: 5px;

	background-image:url('/images/sprites.png');
	background-position:-165px -299px;
	width: 17px;
	height: 21px;

}

.imageGoForwardInOfferList {

	float: right;

	background-image:url('/images/sprites.png');
	background-position:-184px -299px;
	width: 17px;
	height: 21px;

}

.imageGoBackwardInOfferList {

	float: right;
	
	margin-right: 5px;

	background-image:url('/images/sprites.png');
	background-position:-165px -299px;
	width: 17px;
	height: 21px;

}

.imageGoBackToDataList {

	float: left;

	margin-right: 5px;
	
	background-image:url('/images/sprites.png');
	background-position:-155px -384px;
	width: 20px;
	height: 20px;

}

.dataTabDetailsContactInput {

	display: block;
	font-size: 1em;

}

.dataTabDetailsContactLabel {

	display: block;
	float: left;
	width: 160px;
	min-height: 1px;
	
	font-size: 1em;
	text-align: right;
	padding-right: 10px;
	
	margin-right: 5px;
	

}

.dataTabDetailsContactInfo {

	margin: 5px 0 5px 170px;
	font-size: 1em;

}

#DataTabDetailsContactPersonMail {

	width: 340px;

}

#DataTabDetailsContactPersonName {

	width: 130px;

}

#DataTabDetailsContactPersonFirstName {

	width: 130px;
	float: left;
	margin-right: 5px;

}

#DataTabDetailsContactPersonPhone {

	width: 340px;

}

#dataTabDetailsContactBtn {

	margin-left: 165px;

}

.offerOverviewListAddInfoFixedWrapper {
    
}

.offerOverviewProbFixedInfo {
    color: green;
}

.offerOverviewProbFixedRef {
    color: orangered;
    
}

.offerOverviewProbFixedRef:hover {
    color: green;
    cursor: pointer;
}

/* datepicker */
/* calendar root element */
#calroot {
	/* place on top of other elements. set a higher value if nessessary */
	z-index:10000;
	
	margin-top:-1px;
	width:198px;
	padding:2px;
	background-color:#fff;
	font-size:11px;
	border:1px solid #ccc;
	
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	
	-moz-box-shadow: 0 0 15px #666;
	-webkit-box-shadow: 0 0 15px #666;	
}

/* head. contains title, prev/next month controls and possible month/year selectors */
#calhead {	
	padding:2px 0;
	height:22px;
} 

#caltitle {
	font-size:14px;
	color:#0150D1;	
	float:left;
	text-align:center;
	width:155px;
	line-height:20px;
	text-shadow:0 1px 0 #ddd;
}

#calnext, #calprev {
	display:block;
	width:20px;
	height:20px;
	background:transparent url(/images/datepicker/prev.gif) no-repeat scroll center center;
	float:left;
	cursor:pointer;
}

#calnext {
	background-image:url(/images/datepicker/next.gif);
	float:right;
}

#calprev.caldisabled, #calnext.caldisabled {
	visibility:hidden;	
}

/* year/month selector */
#caltitle select {
	font-size:10px;	
}

/* names of the days */
#caldays {
	height:14px;
	border-bottom:1px solid #ddd;
}

#caldays span {
	display:block;
	float:left;
	width:28px;
	text-align:center;
}

/* container for weeks */
#calweeks {
	background-color:#fff;
	margin-top:4px;
}

/* single week */
.calweek {
	clear:left;
	height:22px;
}

/* single day */
.calweek a {
	display:block;
	float:left;
	width:27px;
	height:20px;
	text-decoration:none;
	font-size:11px;
	margin-left:1px;
	text-align:center;
	line-height:20px;
	color:#666;
	-moz-border-radius:3px;
	-webkit-border-radius:3px; 		
} 

/* different states */
.calweek a:hover, .calfocus {
	background-color:#ddd;
}

/* sunday */
a.calsun {
	color:red;		
}

/* offmonth day */
a.caloff {
	color:#ccc;		
}

a.caloff:hover {
	background-color:rgb(245, 245, 250);		
}


/* unselecteble day */
a.caldisabled {
	background-color:#efefef !important;
	color:#ccc	!important;
	cursor:default;
}

/* current day */
#calcurrent {
	background-color:#498CE2;
	color:#fff;
}

/* today */
#caltoday {
	background-color:#333;
	color:#fff;
}

/* deactivateautomail */
#deactivateAutomailContentBlock {

	margin: 5px;

}

#deactivateAutomailMessage {

	width: 855px;
	
	margin: auto;
	

}



.deactivateAutomailMessageSuccess {

	padding: 10px;
	
	background-color: lightgreen;
	color: #000;

	font-size: 0.8em;
	
	border: 1px solid green;
	border-radius: 3px;
	

}



.deactivateAutomailMessageError {

	padding: 10px;

	background-color: #d30000;
	color: #fff;
	
	font-size: 0.8em;
	
	border: 1px solid red;
	border-radius: 3px;
	
}

/* dealertpbox */
/*Box!*/
div.NaviBoxRight {
	float:right;
	width:162px;
}
div.FreeNaviBoxRight {
	float:right;
	width:162px;
}
div.NaviBoxLeft {
	width:124px;
}
div.NaviBoxLeft .DealerBOX_Content {
	padding:0px;
}

div.NaviBoxLeft ul li {
	font-size:11px;
}

div.NaviBoxLeft ul li a {
	padding-left:4px;
}

.DealerBOX_Content {
	background:url(/images/box/px_333333.png) top repeat-x;
	padding: 10px 3px 3px 0;
	background-color:#f0f0f0;
	
	border-left: 1px solid #d0d0d0;
	border-right: 1px solid #d0d0d0;
	
}
.DealerBOX_Content_noShadow {
	border:1px solid #333333;
	border-top:0;
	margin:0;
}

.DealerBOX_Header_Content {
	background:url(/images/box/header_bg_333333.png) top repeat-x;
	background-color:#1b3749;
	height:23px;
	line-height:23px;
	font-size:12px;
	font-weight:bold;
	margin-left:2px;
	margin-right:2px;
	padding:2px;
	color:#ffffff;
}
.DealerBOX_Header_Content a {
	color:#ffffff;
}
.DealerBOX_Header_Content a:hover {
	/* text-decoration:underline; */
}
.DealerBOX_Header_noShadow {
	border-right:1px solid #333333;
	border-left:1px solid #333333;
	margin:0;
}
.DealerBOX_Header_Left {
	background:url(/images/box/header_bg_left.png) top left no-repeat;
}

.DealerBOX_Header_Right {
	background:url(/images/box/header_bg_right.png) top right no-repeat;
}

.DealerBOX_Footer_Content {
	background:url(/images/box/footer_bg.png) top repeat-x;
	height:5px;
	margin: 0 2px 10px;
}


.DealerBOX_Footer_Left {
	background:url(/images/box/footer_left.png) top left no-repeat;
}

.DealerBOX_Footer_Right {
	background:url(/images/box/footer_right.png) top right no-repeat;
}

.DealerBOX_Content ul {
	list-style:none;
	margin:0;
	padding:0;
}
.DealerBOX_Content ul li {

}
* HTML .DealerDealerBOX_Content ul {
	width:100%;
}
.DealerBOX_Content ul li a {

}
.DealerBOX_Content ul li a:hover {

}

.DealerBOX_Header_Content .breadcrumbSeparator {
	display:inline-block;
	width:0px;height:0px;
	border-top: 3px solid transparent;
	border-bottom: 3px solid transparent;
	border-left: 6px solid white;
	margin:0px 0px 1px 5px;
}

.DealerBOX_Header_Content .breadcrumbSeparator.hovering {
	border-left: 3px solid transparent;
	border-right: 3px solid transparent;
	border-top: 6px solid black;
	margin:0px 0px 1px 3px;
	border-bottom: 0px;
}

/* dialog */
#dialogWrapper {
    
    position: absolute;
    display: none;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1000;
}

#dialogWrapper #dialogBackground {
    background-color: #333;
    z-index: 1500;
    opacity: 0.8;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

#dialogWrapper #dialogBox {
    overflow: hidden;
    background-color: #6a8394;
    border: 1px solid #1b3749;
    -webkit-box-shadow:  3px 3px 3px 3px rgba(0, 0, 0, 0.5);
    box-shadow:  3px 3px 3px 3px rgba(0, 0, 0, 0.5);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    width: 550px;
    min-height: 100px;
    position: absolute;
    left: 50%;
    margin-left: -275px;
    z-index: 2000;
}

#dialogWrapper #dialogBox .diaAjaxWrap {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3000;
    overflow: hidden;
    position: absolute;
    display: none;
}

#dialogWrapper #dialogBox .diaAjaxWrap .diaAjaxBg {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3500;
    background-color: #fff;
    position: absolute;
    overflow: hidden;
}

#dialogWrapper #dialogBox .diaAjaxWrap .diaAjaxLoad {
    left: 50%;
    position: absolute;
    margin-left: -20px;
    width: 40px;
    height: 40px;
    background-color: green;
    top: 50%;
    margin-top: -30px;
    z-index: 4000;
}

#dialogWrapper #dialogBox #dialogHeader {
    background-color: #6a8394;
    border-bottom: 1px solid #1b3749;
    padding: 5px;
    padding-left: 10px;
    -webkit-border-top-left-radius: 4px;
    -webkit-border-top-right-radius: 4px;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-topright: 4px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    overflow: hidden;
}

#dialogWrapper #dialogBox #dialogHeader .closeBtn {
    float: right;
    width: 13px;
    height: 13px;
    margin-top: 2px;
    background: url('/images/closeDialogIcon.png') 0 0;
}

#dialogWrapper #dialogBox #dialogHeader .closeBtn:hover {
    background-color: red;
    cursor: pointer;
}

#dialogWrapper #dialogBox #dialogHeader #dialogHeaderContent {
    float: left;
    color: #fff;
    font-size: 0.9em;
}

#dialogWrapper #dialogBox #dialogContent {
    padding: 10px;
    font-size: 0.9em;
    background-color: #fff;
    min-height: 280px;
}

/* fonts */
/* roboto-regular */
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	src: local('Roboto'), local('Roboto-Regular'),
	     url('/files/fonts/roboto-v18-latin/roboto-v18-latin-regular.woff2') format('woff2'),
	     url('/files/fonts/roboto-v18-latin/roboto-v18-latin-regular.woff') format('woff');
}

/* roboto-700 */
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 700;
	src: local('Roboto Bold'), local('Roboto-Bold'),
	     url('/files/fonts/roboto-v18-latin/roboto-v18-latin-700.woff2') format('woff2'),
	     url('/files/fonts/roboto-v18-latin/roboto-v18-latin-700.woff') format('woff');
}

/* frame */
#frame {

	margin: 0 auto;
	margin-top: 10px;

	min-height: 650px;
	width: 1060px;
	
}


#header {

	position: relative;

	background:url(/images/frame/header_background.jpg) top;

	height: 87px;

	margin-bottom: 15px;

}

#raeppliDiv {

	position: absolute;
	top: 13px;
	left: 30px;

}

#headerTextWrapper {
		
	overflow: hidden;
	margin-left: 150px;

}

#headerText {

	float: left;
	margin-top: 40px;
	text-shadow: 0.05em 0.1em 0.2em #a4a4a4;
	
}

#headerLanguage {

	float: right;

	margin-right: 14px;
	margin-top: 0;

	display: flex;
	align-items: center;
	height: 87px;
	gap: 4px;

}

.langWrapper {

	display: inline-block;

}

.headerLangRef {

	display: inline-block;
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 0.72em;
	font-weight: bold;
	letter-spacing: 0.04em;
	text-decoration: none;
	transition: background 0.15s, color 0.15s;

	background: transparent;
	color: #777;
	border: 1px solid #ccc;

}

.headerLangRef:hover {

	background: #e0e0e0;
	color: #333;
	border-color: #aaa;

}

.headerLangRef.langActive {

	background: #555;
	color: #fff;
	border-color: #555;

}


#naviAndContent {

	margin-top: 5px;
	
	overflow: hidden;

}


#navigation {


	float: left;
	
	width: 180px;

}


#contentWrapper {

	margin-left: 185px;
	overflow: hidden;
	width: 875px;

}

#content {

	margin-top: 5px;


}

#message {

	width: 855px;
	margin: 10px 25px 25px 10px;

}




.messageSuccess {

	padding: 10px;
	
	background-color: lightgreen;
	color: #000;

	font-size: 0.8em;
	
	
	border: 1px solid green;
	border-radius: 3px;
	

}



.messageInfo {

	padding: 10px;
	
	background-color: #ffdd62;
	color: #000000;
	
	font-size: 0.8em;
	
	
	border: 1px solid yellow;
	border-radius: 3px;
}



.messageError {

	padding: 10px;

	background-color: #d30000;
	color: #fff;
	
	font-size: 0.8em;
	
	border: 1px solid red;
	border-radius: 3px;
	
}

.messageTemporaryInfo {

	width: 855px;
	margin: 10px 25px 25px 0;

	padding: 10px;
	
	background-color: #ffdd62;
	color: #000000;
	
	font-size: 0.8em;
	
	border: 1px solid yellow;
	border-radius: 3px;
	
}

#messageHidden {

	display: none;

}



#shopOverview {

	overflow-x: hidden;
	overflow-y: auto;
	min-height: 64px;
	max-height: 124px;
	position: relative;
	padding-left: 114px;

}

.dealerLogoWrapper {

	display: block;
	float: left;
	margin-right: 5px;
	height: 56px;

}

#shopOverview.shopOverviewZoomed .dealerLogoWrapper {

	zoom: 75%;

}

.dealerLogoWrapperMaster {

	display: block;
	position: absolute;
	top: 0;
	left: 0;
	margin-right: 5px;
	height: 56px;

}

.dealerLogoStyling {

	border: 1px #999 solid;
	display: block;
	margin-bottom: 5px;
	
}

.dealerLogoMastershop {

	margin-right: 10px;

}

.dealerLogo {


}

.dealerLogoCurrent {

	width: 104px;
	height: 4px;
	background-color: #00c42a;
	border: 1px solid #999;

}

.dealerLogoOther {

	width: 104px;
	height: 4px;
	background-color: #fff;

}

#loginContent {

}

.dealerAreaFooter {

	height: 100px;
	width: 100%;

}

/* Footer directly in #naviAndContent (outside contentWrapper) needs left offset */
#naviAndContent > .dealerAreaFooter {

	margin-left: 185px;
	width: 875px;

}

.dealerAreaFooterTopWrapper {

	overflow: hidden;

}

.dealerAreaFooterTopRight {

	height: 2px;
	width: 2px;
	background:url(/images/footer/footer_top_right.png);

	float: right; 

}

.dealerAreaFooterTopLeft {

	height: 2px;
	width: 2px;
	background:url(/images/footer/footer_top_left.png);

	float: left; 

}

.dealerAreaFooterTopBackground {

	background:url(/images/footer/footer_top_bg.png) top repeat-x;
	height:2px;
	
}

.dealerAreaFooterBottomWrapper {

	overflow: hidden;

}

.dealerAreaFooterBottomRight {

	height: 2px;
	width: 2px;
	background:url(/images/footer/footer_bottom_right.png);

	float: right; 

}

.dealerAreaFooterBottomLeft {

	height: 2px;
	width: 2px;
	background:url(/images/footer/footer_bottom_left.png);

	float: left; 

}

.dealerAreaFooterBottomBackground {

	background:url(/images/footer/footer_bottom_bg.png) top repeat-x;
	height:2px;
	
}

.dealerAreaFooterContentWrapper {

	overflow: hidden;

}

.dealerAreaContentRight {

	height: 23px;
	width: 2px;
	background:url(/images/footer/footer_right_bg.png) repeat-y;

	float: right; 

}

.dealerAreaContentLeft {

	height: 23px;
	width: 2px;
	background:url(/images/footer/footer_left_bg.png) repeat-y;

	float: left; 

}

.dealerAreaContentBackground {

	height: 40px;

	background-color: #f2f2f2;
	
	text-align: center;
	
	
}

.footerReference {

	font-size: 0.8em;

	text-decoration: none;
	color: #0000B7;

}

.footerReference:hover {

	text-decoration: underline;

}

.footerText {

	font-size: 0.8em;
	margin-right: 10px;

}

/* homepage */
#homepageContentWrapper {

	margin: 5px;
	
	background-color: #FFFFFF;
    border: 1px solid #999999;
    padding: 10px 0px 0px;
    
    min-height: 150px;

}

.homepageSalutationText {

	margin-bottom: 15px;
	padding: 0 5px;
	font-size: 0.8em;
	font-weight: bold;
	
}

.homepageStatsOverviewWrapper {

	overflow: hidden;
	padding: 5px;
}

.homepageStatsOverviewTimeSelectionWrapper {

	margin-top: 10px;
	
	padding: 5px;
}

.homepageShopSelectionWrapper {

	margin-top: 5px;
	overflow: hidden;

}

#homepageInputFieldShopSelection {
	font-size: 0.8em;
	float: right;
}

.homepageInputFieldShopSelectionItem {

	padding-right: 20px;

}

#homepageInputFieldTimeSelection {

	font-size: 0.8em;
	float: right;

}

.homepageInputFieldTimeSelectionItem {

	padding-right: 20px;
	
}

#homepageInputFieldSubmitBtn {

}

.homepageInfoNoActiveShopAvailable {

	margin: 5px;
	font-size: 0.8em;

}

#homepageStatsDetailsTable {

	width: 100%;
	
	border: 1px solid #999999;
	border-left: none;
	
}

.homepageStatsDetailsTableRow {

}

.homepageStatsDetailsTableCellHeadline {

	padding: 10px;
	font-weight: bold;
	font-size: 0.8em;
	background-color: #ffdd62;
	border-bottom: 1px solid #999;
	
}

.homepageStatsDetailsTableCellContentSubHeadline {

	background-color: #FFFFC9;
	height: 30px;
	border-top: 1px solid #999;
	border-bottom: 1px solid #999;

}

.homepageStatsDetailsTableCellHeadlineWithMinWidth {

	min-width: 250px;
	height: 30px;
	padding: 10px;
	
}

.homepageStatsDetailsTableCellBorderRight {

	border-right: 1px solid #999;
	border-left: 1px solid #999;
	
}

.homepageStatsDetailsTableCellContentHeadline {

	padding: 10px;
	font-weight: bold;
	font-size: 0.8em;
	width: 80px;
	
}

.homepageStatsDetailsTableOfferCol {

	width: 220px;

}

.homepageStatsDetailsTableCellContent {

	padding: 10px;
	font-size: 0.8em;

}

.homepageStatsDetailsTextWrapper {

	display: block;
	height: 33px;
	overflow: hidden;

}

.homepageStatsDetailsTableCellContentBold {

	font-weight: bold;

}

.homepageStatsDetailsTableCellContentEven {

}

.homepageStatsDetailsTableCellContentOdd {

	background-color: #F4F3F3;

}

.homepageOfferInactiveText {

	font-size: 0.8em;
	color: #E90000;

}

.homepageOfferInactiveTextLabeling {

	color: #888;

}

.homepageReferenceToOfferDetails {

	text-decoration: none;
	color: #000;

}

.homepageReferenceToOfferDetails:hover {

	text-decoration: underline;
	
}

.homepageOfferInfoWrapperHover:hover {

	background-color: #FFDD62;

}

.homepageOfferInfoClicks {

	float: right;
	height: 20px;
	width: 65px;
	
}

.homepageStatsDetailsWrapper {

	padding: 5px;

}

#homepageAjaxLoaderAndResultWrapper {

	overflow: hidden;
	position: relative;

}

.homepageUpArrow {

	background-image:url('/images/trend/halfup.gif');
	width: 13px;
	height: 13px;
	
}

.homepageDownArrow {

	background-image:url('/images/trend/halfdown.gif');
	width: 13px;
	height: 13px;

}

.homepageNeutralArrow {

	background-image:url('/images/trend/neutral.gif');
	width: 13px;
	height: 13px;

}


#homepageInputFieldSubmitBtn {

	font-size: 0.8em;
	margin-left: 5px;

}

#homepageInputFieldSubmitTimeBtn {

	font-size: 0.8em;
	margin-left: 5px;

}

.homepageShortInfoWrapper {

	overflow: hidden;
	padding: 5px;
    font-size: 0.8em;
}

.homepageShortInfoWrapperPartLeft {

	width: 48%;
	
}


.homepageShortInfoWrapperPartRight {

	overflow: hidden;
    position: relative;

	width: 48%;	
	height: 220px;
	
	float: right;
	
	border: 1px solid #999999;
	
}

.homepageShortInfoDateHeadline {

	border: 1px solid #999999;
	
	padding: 5px;
	padding-bottom: 5px;
	
	overflow: hidden;

}

.homepageShortInfoStatusOK {

	display: block;
	float: right;
	
	width: 10px;
	height: 10px;
	background-color: #0000ff;

}

.homepageShortInfoStatusFailure {

	display: block;
	float: right;

	width: 10px;
	height: 10px;
	background-color: #ff0000;	

}

.homepageShortInfoNormalBackground {

	background-color: #FFFFC9;

}

.homepageShortInfoFailureBackground {

	background-color: #711515;

}

.homepageShortInfoDownloadReferences {

	margin-top: 10px;
	border: 1px solid #999999;
	
	background-color: #FFFFC9;


}

.homepageDownloadAsCsVRefMapped {

}

.homepageDownloadAsCsVRefNotMapped {

}

.homepageDownloadAsCsVRef {

	display: block;

	text-decoration: none;
	color: #000000;
	cursor: pointer;
	
	margin: 5px;
	margin-left: 5px;
	

}

.homepageDownloadAsCsVRef:hover {

	text-decoration: underline;

}

#homepageStatsInfo {
	
	display: block;
	text-align: center;
	padding-top: 5px;
	padding-bottom: 5px;
	
}

#homePageStatClicks  {

	text-align: center;

}

.homepageShortInfoOfferProblems {

    border: 1px solid #999999;
    margin-top: 10px;
    overflow: hidden;
    padding: 5px;
}

.homepageShortInfoOfferProblemsReference {

	text-decoration: none;

	display: block;

	
	cursor: pointer;
	
	margin: 5px;
	margin-left: 0;
	
}

.homepageShortInfoOfferProblemsReferenceNormal {

	color: #000000;
	
}

.homepageShortInfoOfferProblemsReferenceFailure {

	color: #fff;
	
}

.homepageShortInfoOfferProblemsReference:hover {

	text-decoration: underline;

}

.homepageShortInfoNewsWrapper {

	font-size: 0.8em;
	border: 1px solid #ffa200; 
	background-color: #FFFFC9; 
	margin: 5px;
    margin-bottom: 10px;
    overflow: hidden;
    padding: 5px;
    

}

.homepageShortInfoNewsHeadline {

	
	margin-bottom: 5px;

}

.homepageShortInfoNewsHeadlineRef:hover {

	text-decoration: underline;

}

.homepageShortInfoNewsHeadlineRef {

	color: #000;
	font-weight: bold;
	text-decoration: none;

}

.homepageShortInfoNewsContent {

	margin-bottom: 5px;

}

.homepageRefToNewsPage {

 	color: #4572a7;
    cursor: pointer;
    margin: 0 5px;
    text-decoration: none;

}

.homepageRefToNewsPage:hover {

    text-decoration: underline;

}
/* Hinweis auf die API - steht ueber der Begruessung */
/*
 * Steht im grauen Bereich ueber dem weissen Kasten, mittig.
 *
 * Das Bild liegt in doppelter Aufloesung vor und wird auf die 855px der
 * Content-Spalte heruntergerechnet - buendig mit dem Kasten darunter. Nach
 * unten skalieren ist der gutmuetige Fall; auf Bildschirmen mit doppelter
 * Punktdichte steht es dadurch nahezu in seiner echten Aufloesung da.
 * Auf schmalen Fenstern schrumpft es mit.
 */
.homepageApiBannerWrapper {

	margin: 0 5px 10px 5px;
	text-align: center;

}

.homepageApiBanner {

	display: block;
	line-height: 0;

}

.homepageApiBanner img {

	width: 100%;
	height: auto;
	border: 1px solid #d0d0d0;

}

/* loginpage */
#loginContent {

	width: 350px;
	overflow: hidden;
	
	margin: auto;

}

.loginLabel {

	margin-left: 25px;
	font-size: 0.8em;

}

.loginInput {

	float: right;
	
	margin-right: 25px;
	font-size: 0.8em;

}

#loginSubmitButton {
	margin-right: 25px;
}



.loginOptionalInfo {

	font-size: 0.75em;
	margin-left: 25px;
	margin-bottom: 10px;
}

.loginOptionalPasswordForgotten {

	float: right;
	font-size: 0.75em;
	margin-right: 25px;
	margin-bottom: 10px;
	
}

.loginOptionalInfoWrapper {

	overflow: hidden;

}

.loginPageContactMailAddress {

	color: #0000b7;
	text-decoration: none;

}

.loginPageContactMailAddress:hover {

	text-decoration: underline;

}

.dealerLoginWrapper {

	overflow: hidden;
	padding-bottom: 5px;	
	padding-top: 5px;

}

.loginFailure {

	padding: 10px;
	
	border: solid 1px #fceb8f;
	background-color: #fafcdf;
	color: #000000;
	
	font-size: 0.8em;
	
	margin: 0 5px 10px 5px;
	
	text-align: center;

}

.loginLabelPointOut {

	font-weight: bold;

}

/* main */
body {

	margin: 1px;
	padding: 0;
	overflow-y: scroll;
	font-size: 112.5%; /* 18px base → 0.8em content = 14.4px Roboto */

}

body,div,li,input,select,option {
	font-family: roboto, tahoma, verdana, arial;
}

button, input[type="submit"], input[type="button"], input[type="reset"] {
	cursor: pointer;
}

.submitButtonStyling {

	background: linear-gradient(to bottom, #4a90d9 0%, #2e6db4 100%);
	color: #fff;
	border: none;
	border-radius: 4px;
	margin-right: 5px;

	padding: 4px 20px;

	box-shadow: 1px 1px 3px rgba(0,0,0,0.25);
}

.submitButtonStyling:hover {
	background: linear-gradient(to bottom, #5aa0e8 0%, #3a7ec4 100%);
	box-shadow: 1px 1px 4px rgba(0,0,0,0.35);
}

.submitButtonStyling:active {
	margin-top: 3px;
	margin-left: 3px;
	margin-bottom: -3px;
	margin-right: 12px;
	box-shadow: none;
}

input[type="text"], input[type="password"], input[type="email"],
input[type="number"], input[type="tel"], select, textarea {
	border: 1px solid #bbb;
	border-radius: 3px;
	padding: 4px 6px;
	background-color: #fff;
	transition: border-color 0.15s;
}

input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus,
input[type="number"]:focus, input[type="tel"]:focus, select:focus, textarea:focus {
	border-color: #4a90d9;
	outline: none;
}

.inputFieldInnerPadding {

	padding: 5px 5px;

}

.labelInnerPadding {

	padding: 5px 0;

}

/* maintenance */
#maintenancePageContentBlock {

	margin: 5px;
	
}

.maintenanceInput {

	font-size: 0.8em;
	font-family: roboto, tahoma, verdana, arial;

}

.maintenanceLabel {

	float: left;
	width: 170px;

	display: block;

	text-align: right;
	margin-right: 10px;

	font-size: 0.8em;

}

.maintenanceLabelInline {

}

.maintenanceInputWrapper {

	position: relative;

	padding-top: 5px;
	padding-bottom: 5px;

	overflow: hidden;

}

/* Last input in a row gets no trailing margin so right edges align */
.maintenanceInputWrapper > input:last-child,
.maintenanceInputWrapper > select:last-child {

	margin-right: 0;

}

.maintenanceInputFieldWrapper {

	border: 1px solid #999999;
	background-color: #fff;
	margin-bottom: 10px;

}

.maintenanceInputWrapperInline {

	display: block;

	padding: 3px;
}

.maintenanceInputHeadlines {

	padding: 5px;
	
	font-size: 0.8em;
	font-weight: bold;
	
}

.maintenanceInputFieldSize {

	width: 380px;
	box-sizing: border-box;

}

.maintenanceInputFieldSizeMiddle {

	width: 80px;
	margin-right: 5px;
	box-sizing: border-box;

}


.maintenanceInputFieldSizeSmall {

	width: 90px;
	margin-right: 5px;
	box-sizing: border-box;

}

.maintenanceInputFieldSizeMiddlePlus {

	width: 187px;
	margin-right: 6px;
	box-sizing: border-box;

}




#maintenanceAccContactInfo {

	margin-left: 180px;
	

}

#maintenanceAccContactInfoWrapper {

	overflow: hidden;


}

#detailsHpMailWrapper {

	display: inline;
	float: right;
	
	margin-right: 25px;
	
	font-size: 0.8em;
}

#detailsHpMailLabel {

	margin-left: 10px;


}

.maintenanceError {

	float: right;
	
	width: 490px;
	
	margin: 5px 55px 5px 190px; 
	
	padding: 5px;
	
	background-color: #FFDD62;
    border: 1px solid #FFDD62;
    
	color: #000000;
	
	font-size: 0.8em;

}

.maintenanceInput#detailsAddress {
	font-family: tahoma,verdana,arial;
}

#MaintenanceSubmitBtn {

	margin: 10px 0 10px 186px;

}

#maintenanceInputTextStartDate {

}

/* manufacturer */
#manufacturerPageContentBlock {

	margin: 5px;
	padding: 5px;
	
	border: 1px solid #999999;
	background-color: #fff;

}


#manuShortcutWrapper {

	margin-left: 15px;
	min-height: 25px;
	height: auto;

}

#manuInfoTextWrapper {

	font-size: 0.8em;

	margin-left: 15px;
	min-height: 25px;
	height: auto;

}

.manuShortcutRef {

	font-size: 0.8em;
	color: #343434;
	
	text-decoration: none;

}

.manuShortcutRefSelected {

	font-size: 0.8em;
	color: #e30000;
	
	text-decoration: none;

}

.manuShortcutInactive {

	font-size: 0.8em;
	
}

.manuShortcutInline {

	color: #b9b9b9;

}

#manuWrapper {

}

#manuGrid {

	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	padding: 5px;

}

@media (max-width: 600px) {

	#manuGrid {
		grid-template-columns: repeat(2, 1fr);
	}

}

@media (max-width: 350px) {

	#manuGrid {
		grid-template-columns: 1fr;
	}

}

.manuTableCell {

	min-width: 0;

}

.manuCellWrapper {

	cursor: pointer;

	position: relative;

	margin: 0 auto;
	width: auto;
	max-width: 200px;
	min-height: 50px;
	height: auto;

	background-color: #fff;
	border: 1px solid #000;

	padding: 5px;


}

.manuTableImage {

	display: block;
	margin: 0 auto;
	margin-bottom: 8px;

}

.manuTableImagePlaceholder {

	text-align:center;
	display: block;
	margin: 0 auto;
	margin-bottom: 8px;


}

.manuCellInfo {

}

.inlineBrand {

	display: block;	
	font-size: 0.8em;

}

.inlineInfo {

	display: block;
	font-size: 0.7em;

}

.inlineMail {

	margin: 3px 0;

	padding: 3px 0;
	
	display: block;
	font-size: 0.7em;
	
	text-decoration: none;
	
	color: #0000b7;
	

}

.inlineMail:hover {

	text-decoration: underline;
	
}

.manuCheckMarkImg {

	height: 27px;
	width: 27px;
	
	position: absolute;
	
	bottom: -10px;
	right: -10px;
	
	z-index: 100;
	
	background-image:url('/images/sprites.png');
	background-position:-176px -221px;

}

.showDetailsIcon {

	position: absolute;
	top: 2px;
	right: 2px;

	height: 13px;
	width: 13px;
	
	background-image:url('/images/sprites.png');
	background-position:-182px -254px;

}

.hideDetailsIcon {

	position: absolute;
	top: 2px;
	right: 2px;
	
	height: 13px;
	width: 13px;

	background-image:url('/images/sprites.png');
	background-position:-166px -254px;

}

.manuShortcutToDownloadManuList {

	float: right;
	
}

/* masterpassword */
#masterPasswordPageContentWrapper {

	margin: 5px;

}

.inputMasterPW {

	font-size: 0.8em;
	width: 200px;

}

.masterPasswordInputFieldWrapper {

	padding: 5px;
	border: 1px solid #999999;
	background-color: #fff;

}

.labelMasterPW {

	float: left;
	width: 160px;

	font-size: 0.8em;
	
	margin-right: 10px;
	
	text-align: right;
	
}

.inputWrapperMasterPW {

	padding-bottom: 5px;
	padding-top: 5px;
	

}

.inputWrapperMasterPWSubmitWrapper {

	height: 35px;
	

}

#inputMasterPWSubmitBtn {

	margin-top: 10px;
	margin-left: 175px;
	font-size: 0.8em;

}

/* navi */
#menuList {

	padding-bottom: 20px;

}

.menuItemFirstLevel {

	padding-top: 10px;
	
	font-size: 0.8em;
	font-weight: bold;

}

.menuWrapperSecondLevel {

	font-size: 0.9em;
	font-weight: normal;

}

.menuItemSecondLevel {

	margin-left: 40px;
	/* links etwas mehr, sonst klebt das "\203a" am Rahmen */
	padding: 2px 1px 2px 3px;
	cursor: pointer;

}

.menuItemSecondLevel:hover {

	background-color: #ffdd62;
	border: 1px solid #d0d0d0;
	/* Rahmenbreite vom Innenabstand abziehen, damit der Text stehen bleibt */
	padding: 1px 0 1px 2px;
	border-radius: 2px;

}

.naviRefFirstLevel {

	color: #000;
	text-decoration: none;
	

}


.naviRefSecondLevel {

	color: #000;
	text-decoration: none;

}

.naviRefSecondLevelMarkedRed {

	color: #ff0000;
	text-decoration: none;


}

.menuItemSecondLevel:before {
	
	content: "\203a  ";

}

.naviRefSecondLevelAttention {

	color: #ff0000;
	
}
/* Aktuelle Seite: helle Fuellung, sonst nichts. */
.menuItemSecondLevelActive {

	background-color: #e8f0f8;
	border: 1px solid #b9d4ee;
	/* Rahmenbreite vom Innenabstand abziehen, damit der Text stehen bleibt */
	padding: 1px 0 1px 2px;
	border-radius: 2px;

}

.menuItemSecondLevelActive .naviRefSecondLevel {

	color: #1b3749;

}

/* der Bereich, in dem die aktuelle Seite liegt */
.naviGroupActive,
.naviGroupActive > .naviRefFirstLevel {

	color: #1b3749;

}

/* newpassword */
#newPasswordContent {

	width: 100%;
	overflow: hidden;
	
	margin: auto;

}

.newPasswordLabel {

	width: 120px;

	margin-left: 25px;

	display: block;
	float: left;

}

.newPasswordInput {

	margin-right: 25px;

	display: block;

}

#newPasswordSubmitButton {
	margin-left: 145px;
}

.newPasswordOptionalInfo {

	font-size: 0.75em;
	margin-left: 25px;
	margin-bottom: 10px;
}

.newPasswordPageContactMailAddress {

	color: #0000b7;
	text-decoration: none;

}

.newPasswordPageContactMailAddress:hover {

	text-decoration: underline;

}

.newPasswordLoginWrapper {

	overflow: hidden;
	padding-bottom: 5px;	
	padding-top: 5px;

}

.newPasswordFailure {

	padding: 25px 10px;

	
	border: solid 1px #fceb8f;
	border-radius: 3px;
	background-color: #fafcdf;
	color: #000000;
	
	font-size: 0.8em;
	
	margin: 15px;
	

}

.newPasswordSuccess {

	padding: 25px 10px;
	
	border: 1px solid #999;
	border-radius: 3px;
	
	background-color: #fff;
	color: #000;

	font-size: 0.8em;
	
	
	margin: 15px;
	

}

.newPasswordReference {

	text-decoration: underline;
	color: #00025d;

}

.newPasswordReference:hover {

	color: #000;
	
}

.newPasswordNewPasswordField {

	padding: 5px 50px;
	
	border: 1px solid green;
	border-radius: 3px;
	
	background-color: lightgreen;
	color: #000;

	font-weight: bold;
	
	margin-left: 20px;

}

.newPasswordLabelPointOut {

	font-weight: bold;

}

/* news */
#newsPageContentBlock {

	margin: 5px;

}

#newsPageNewsWrapper {


}

.newsPageContentHeadline {

	font-size: 0.8em;
    font-weight: bold;
    padding: 5px;

}

.newsPageNewsSwitchRefForwardWrapper {

	width: 50px;
	float: right;
	
}

.newsPageNewsSwitchRefBackward {

	width: 50px;
	float: left;

}

.newsPageNewsReferencesInTheMiddleWrapper {

	margin: 0 60px;
	text-align: center;

}

.newsPageNewsSwitchRefToAnotherPage {

	color: #0000B7;
    font-size: 0.8em;
    text-decoration: none;
    margin: 0 2px;

}

.newsPageNewsSwitchRefToAnotherPage:hover {

    text-decoration: underline;

}

.newsPageNewsSwitchRefToCurrentPage {

	color: #007c03;
    font-size: 0.8em;
    text-decoration: none;
    font-weight: bold;
    margin: 0 2px;

}

.newsPageNewsSwitchRefToCurrentPage:hover {

    text-decoration: underline;

}

.newsPageNewsSwitchRefBackward {

	color: #0000B7;
    font-size: 0.8em;
    text-decoration: none;

}

.newsPageNewsSwitchRefBackward:hover {

	text-decoration: underline;

}

.newsPageNewsSwitchRefForward {

	color: #0000B7;
    font-size: 0.8em;
    text-decoration: none;

}

.newsPageNewsSwitchRefForward:hover {

	text-decoration: underline;

}

.newsPageNewsSwitchRefWrapper {

	margin: 0 100px;

}

.newsPageNewsContentWrapper {

	background-color: #FFFFFF;
    border: 1px solid #999999;
    margin: 5px 0;
    padding: 10px 5px;

}

.newsPageNewsContentDate {

	font-size: 0.7em;
	margin-bottom: 10px;

}

.newsPageNewsContentHeadline {

	font-size: 0.85em;
	font-weight: bold;

}

.newsPageNewsContentTeaser {

	font-size: 0.8em;
	font-weight: bold;
	margin-top: 15px;
	margin-bottom: 5px;
}

.newsPageNewsContentText {

	font-size: 0.8em;
	margin-top: 15px;

}

/* offeroverview */
/* 	

	currently no styling required.
	all required styling elements are set in DataTab.css
	
*/

#offerOverviewHideDescriptionText {

	float: right;

	top: 0;
	right: 0;
	
	background-image: url("/images/sprites.png");
    background-position: -166px -254px;
    height: 13px;
    width: 13px;
    
    margin-left: 10px;
	
}
	
#offerOverviewShowMoreDescriptionText {

	float: right;
	top: 0;
	right: 0;


	background-image: url("/images/sprites.png");
    background-position: -182px -254px;
    height: 13px;
    width: 13px;

}

#offerOverviewShowMoreDescriptionButtonBackground {

	float: right;
	position: absolute;
	bottom: 0;
	left: 0;
	
	background-image: url("/images/fade.png");
    height: 20px;
    width: 100%;

}

#offerOverviewNaviBarReloadPage {

}

.offerOverviewSendProblemInfoWrapper {
    overflow: hidden;
    margin-bottom: 20px;
    padding-bottom: 10px;
}

.offerOverviewSendProblemInfoWrapper div {
    margin-bottom: 10px;
}

.offerOverviewProblemInfoText {
    padding: 10px;
    border: 1px solid #add8e6;
}

.offerOverviewProblemSuccessMsg {
    padding: 10px;
    padding-bottom: 20px;
    border: 1px solid green;
    border-radius: 3px;
    background-color: lightgreen;
    color: #000;
}

#offerOverviewSendProblemBtn {
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
}

/* passwordforgotton */
#pwForgottenContent {

	width: 350px;
	overflow: hidden;

	margin: auto;

}

.pwForgottenLabel {

	margin-left: 25px;
	font-size: 0.8em;

}

.pwForgottenInput {

	float: right;
	margin-right: 25px;
	font-size: 0.8em;

}

#pwForgottenSubmitButton {
	margin-right: 25px;
	float: right;
}

.pwForgottenOptionalInfo {

	font-size: 0.75em;
	margin-left: 25px;
	margin-bottom: 10px;
}

.pwForgottenPageContactMailAddress {

	color: #0000b7;
	text-decoration: none;

}

.pwForgottenPageContactMailAddress:hover {

	text-decoration: underline;

}

.pwForgottenWrapper {

	overflow: hidden;
	padding-bottom: 5px;	
	padding-top: 5px;

}

.pwForgottenFailure {

	padding: 10px;
	
	border: solid 1px #fceb8f;
	border-radius: 3px;
	background-color: #fafcdf;
	color: #000000;
	
	font-size: 0.8em;
	
	margin: 0 15px 10px 15px;
	

}

.pwForgottenSuccess {

	padding: 10px;
	
	border: 1px solid green;
	border-radius: 3px;
	
	background-color: lightgreen;
	color: #000;

	
	font-size: 0.8em;
	
	margin: 0 15px 10px 15px;
	

}

.pwForgottenLabelPointOut {

	font-weight: bold;

}

/* ratinglisting */
#ratingListingContentBlock {

	margin: 5px;

}

#ratingListingContentBlock .tpInfoText {
    padding: 10px;
    margin-top: 10px;
    background: beige;
    border: 1px solid yellow;
    margin-bottom: 5px;
    font-size: 0.8em;
}

#ratingListingInputFieldWrapper {

	padding: 10px 5px;
	
	border: 1px solid #999999;
	background-color: #fff;

}

.ratingListingInputWrapper {

 overflow: hidden;

}

.ratingListingInput {

	font-size: 0.8em;
	width: 80px;
	
}

.ratingListingLabel {

	font-size: 0.8em;

}

#ratingListingSubmit {

	font-size: 0.8em;
	margin-left: 5px;

}

#ratingListingInfoBox {

	margin: 5px 0;

	padding: 10px;
	
	font-size: 0.8em;

}

.ratingListingShortcut {

	color: #000;
	text-decoration: none;

	display: block;
	float: left;

	font-size: 0.75em;
	
	padding: 1px 3px;
	
	margin: 10px 5px 4px 0;
	
	background-image:url('/images/buttonBackground.png');
	border: none;
	border-radius: 3px;

	cursor: pointer;

}


#shortcutTodayRatList {

	margin-left: 140px;

}

#ratingListingTableWrapper {

	margin-top: 15px;

	padding: 5px;
	position: relative;
	border: 1px solid #999999;
	background-color: #fff;
	
	font-size: 0.8em;
	
}

#ratingReadUnreadInp {
    display: block;
    float: left;
}

#ratingReadUnreadInpLabel {
    
    float: left;
    display: block;
    width: 140px;
    
}

#ratingListingWrapper {
    overflow: hidden;
}

.ratingReadUnreadWrap {
    margin-top: 10px;
}orderReference_notAv

#ratingListingWrapper .ratingWrapper {
    overflow: hidden;
    margin: 5px;
    margin-bottom: 10px;
    border: 1px solid #999;
}

#ratingListingWrapper .ratingWrapper .headline {
    padding: 10px;
    background-color: #F4F3F3;
}

#ratingListingWrapper .ratingWrapper .line {
    overflow: hidden;
}

#ratingListingWrapper .ratingWrapper .line .left {
    float: left;
    width: 50%;
    
}

#ratingListingWrapper .ratingWrapper .line .left .dLine {
    overflow: hidden;
    
    padding: 2px 10px 2px 5px;
    
}

#ratingListingWrapper .ratingWrapper .line .left .dLine .label {
    float: left;
    width: 150px;
    overflow: hidden;
}

#ratingListingWrapper .ratingWrapper .line .left .dLine .label .smilie {
    width: 30px;
    height: 30px;
    margin: 5px;
    margin-left: 0;
    float: left;
}

#ratingListingWrapper .ratingWrapper .line .left .dLine .text {
    float: right;
    overflow: hidden;
}

#ratingListingWrapper .ratingWrapper .line .left .dLine .text > .icon {
    float: left;
    margin-right: 5px;
}

#ratingListingWrapper .ratingWrapper .line .left .dLine .text > .iconsWrap {
    overflow: hidden;
}

#ratingListingWrapper .ratingWrapper .line .left .dLine .text > .iconsWrap > .icon {
    float: left;
    margin-right: 2px;
    width: 8px;
    height: 8px;
    margin-top: 4px;
}

#ratingListingWrapper .ratingWrapper .line .left .dLine .text > .iconsWrap > .empty {
    border: 1px solid #ccc;
}

#ratingListingWrapper .ratingWrapper .line .left .dLine .recommendation {
    color: green;
}

#ratingListingWrapper .ratingWrapper .line .left .dLine .norecommendation {
    color: red;
}

#ratingListingWrapper .ratingWrapper .line .right {
    float: right;
    width: 50%;
    
}

#ratingListingWrapper .ratingWrapper .line .right .ratingText {
    margin: 10px;
    padding: 5px;
    background-color: #FDF3E4;
    font-style: italic;
}

#ratingListingWrapper .ratingWrapper .line .right .ratingText .changedByUser {
    font-style: italic;
    color: #686868;
    margin-top: 10px;
    margin-bottom: 10px;
}


#ratingListingWrapper .ratingWrapper .line .right .ratingComment {
    margin: 10px;
    padding: 5px;
    font-size: 0.9em;
    background-color: #FDF3E4;
}

#ratingListingWrapper .ratingWrapper .line .right .ratingComment .deactivatedByTp {
    margin-top: 10px;
    color: red;
}

#ratingListingWrapper .ratingWrapper .line .right .orderReference {
    padding: 10px;
}

#ratingListingWrapper .ratingWrapper .line .right .orderReference_notAv {
    color: red;
}

#ratingListingWrapper .ratingWrapper .line .right .orderReference_av {
    color: green;
}

#ratingListingWrapper .ratingWrapper .line .right .orderDeactive {
    border: 1px solid red;
    padding: 7px 5px;
    margin: 10px;
    background-color: #FFFFC9;
}


#ratingListingWrapper .ratingWrapper .line .right .actions {
    overflow: hidden;
    padding: 10px;
}

#ratingListingWrapper .ratingWrapper .line .right .actions .btn {
    float: left;
    margin-right: 10px;
    width: 20px;
    height: 20px;
}

#ratingListingWrapper .ratingWrapper .line .right .actions .markAsReadBtn {
    background: url('/images/ratingIcons3232.png') 0 0;
    width: 32px;
    height: 32px;
    background-position: -39px -33px;
}

#ratingListingWrapper .ratingWrapper .line .right .actions .markAsReadBtn:hover {
    background: url('/images/ratingIcons3232.png') 0 0;
    width: 32px;
    height: 32px;
    background-position: -39px -1px;
    cursor: pointer;
}

#ratingListingWrapper .ratingWrapper .line .right .actions .markAsReadBtn_read {
    background: url('/images/ratingIcons3232.png') 0 0;
    width: 32px;
    height: 32px;
    background-position: -39px -65px;
}

#ratingListingWrapper .ratingWrapper .line .right .actions .writeCommentBtn {
    background: url('/images/ratingIcons3232.png') 0 0;
    width: 32px;
    height: 32px;
    background-position: -1px -33px;
}

#ratingListingWrapper .ratingWrapper .line .right .actions .writeCommentBtn:hover {
    background: url('/images/ratingIcons3232.png') 0 0;
    width: 32px;
    height: 32px;
    background-position: -1px -1px;
    cursor: pointer;
}

#ratingListingWrapper .ratingWrapper .line .right .actions .writeCommentBtn_written {
    background: url('/images/ratingIcons3232.png') 0 0;
    width: 32px;
    height: 32px;
    background-position: -1px -65px;
    filter: grayscale(100%);
    cursor: pointer;
}

#ratingListingWrapper .ratingWrapper .line .right .actions .writeCommentBtn_written:hover {
    filter: none;
    cursor: pointer;
}

#ratingListingWrapper .ratingWrapper .line .right .actions .requestOrderRef {
    background: url('/images/ratingIcons3232.png') 0 0;
    width: 32px;
    height: 32px;
    background-position: -77px -33px;
}

#ratingListingWrapper .ratingWrapper .line .right .actions .requestOrderRef:hover {
    background: url('/images/ratingIcons3232.png') 0 0;
    width: 32px;
    height: 32px;
    background-position: -77px -1px;
    cursor: pointer;
}


#ratingListingNaviBar {

	overflow: hidden;

	padding: 3px 3px;
	
	margin: 10px 0 3px 0;
	
	height: 30px;

}

#ratingListingNaviBarInfoPart {

	float: left;

}

#ratingListingNaviBarReferencePart {

	float: right;

}

.ratingListingNaviBarReference {

	text-decoration: none;
	color: #686868;

}

.ratingListingNaviBarReferenceSelected {

	text-decoration: none;
	color: #ff0000;

}

#ratingListingNaviBarReferenceList {

	list-style: none;
	margin: 0;
	padding: 0;

}

.ratingListingNaviBarReferenceListItem {

	display: inline-block;
	padding: 0 1px;

}

#ratingListingPageDownloadAsPdfIcon {

	float: left;
	margin-right: 10px;
	margin-left: 2px;

}



/* Datepicker styling */

.ui-datepicker {

	font-size: 0.7em;

}

.ui-datepicker-header {}

.ui-datepicker-prev {}

.ui-datepicker-next {}

.ui-datepicker-title {}

.ui-datepicker-month {}

.ui-datepicker-year {}

.ui-datepicker-calendar {}

.ui-datepicker-week-end {}

.ui-datepicker-other-month {}

.ui-datepicker-buttonpane {}

.ui-datepicker-current {}

.ui-datepicker-close {}

.ui-datepicker-trigger {
display: none;
}

#ratingListingLabelFrom {
    
}

.ratingListingInputFromTo {
    width: 20px;
}

.ratingListingInputAvRatingWrapper {
    margin-top: 20px;
    margin-bottom: 10px;
}

#ratListPageAjaxMarkAsReadMsg {
    overflow: hidden;
}

#ratListPageAjaxMarkAsReadMsg .image {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    background-color: green;
    float: left;
}

#ratListPageAjaxMarkAsReadMsg .msg {
    
}

#ratingCommentWrapper {
    overflow: hidden;
}

#ratingCommentWrapper .failureMsg {
    
    margin: 5px 0;
    background-color: #D30000;
    border: 1px solid #FF0000;
    border-radius: 3px 3px 3px 3px;
    color: #FFFFFF;
    padding: 5px;
    
}

#ratingCommentWrapper .infotxt {
    margin-bottom: 20px;
}

#ratingCommentWrapper .line {
    overflow: hidden;
    margin-bottom: 20px;
}

#ratingCommentWrapper .line .label {
    
    display: block;
    float: left;
    width: 100px;
    margin-right: 10px;
    
}
    
#ratingCommentWrapper .line .txtinput {
    
    width: 380px;
    height: 200px;
    resize: vertical;
}

#ratingCommentWrapper .line .txtinput_preview {
    margin-left: 110px;
    font-style: italic
}

    
#ratingCommentWrapper .line .submit {
    
    margin-left: 110px;
    padding: 0 10px;
    max-width: 200px;
    margin-bottom: 5px;
    text-align: center;
    
}

#ratingCommentWrapper .line .submit:hover {
    cursor: pointer;
}

#ratingCommentWrapper .successMsg {
 
    background-color: #90EE90;
    border: 1px solid #008000;
    border-radius: 3px 3px 3px 3px;
    padding: 10px;
    margin-bottom: 20px;
    
}

#ratingCommentWrapper .successComment {
   margin-bottom: 20px;
   padding: 5px;
   background-color: #FDF3E4;
}

#requestOrderWrap {
    overflow: hidden;
}

#requestOrderWrap .line {
    overflow: hidden;
    margin-bottom: 20px;
}
    
#requestOrderWrap .line .question {
}
        
#requestOrderWrap .line .submit {
    
        width: 170px;
        text-align: center;
        margin-bottom: 5px;
    
    
}

#requestOrderWrap .line .submit:hover {
    cursor: pointer;
}
        
#requestOrderWrap .line .successMsg {
    background-color: #90EE90;
    border: 1px solid #008000;
    border-radius: 3px 3px 3px 3px;
    padding: 5px;
    margin-bottom: 20px;
}
        
.ratingListingManagementWrap {
    overflow: hidden;
    margin-top: 10px;
}

.ratingListingManagementWrap > .ref {
    font-size: 0.8em;
    color: #686868;
    float: left;
    padding: 0 10px 0 0;
    min-width: 100px;
}

.ratingListingManagementWrap > .ref:hover {
    cursor: pointer;
    color: #000;
}

.ratingListingManagementWrap > .seperator {
    float: left;
    padding: 0 10px 0 0;
    min-width: 1px;
    font-size: 0.8em;
    color: #666;
}
    
.ratingListingManagementForm {
    overflow: hidden;
}

.ratingListingManagementForm .info {
    padding-bottom: 10px;
    margin-bottom: 20px;
    border-bottom: 1px solid #999;
}

.ratingListingManagementForm .mailinfo {
    font-size: 0.9em;
    margin-bottom: 10px;
    margin-left: 120px;
}

.ratingListingManagementForm .userinfo {
    font-size: 0.9em;
    display: block;
    float: right;
    width: 410px;
}

.ratingListingManagementForm .userinfocheck {
    display: block;
    margin-left: 90px;
    float: left;
}

.ratingListingManagementForm .line {
    overflow: hidden;
    min-height: 35px;
    margin-bottom: 10px;
}

.ratingListingManagementForm .line .label {
    display: block;
    width: 160px;
    float: left;
}

.ratingListingManagementForm .line .input {
    display: block;
    width: 350px;
}

.ratingListingManagementForm .line .submit {

    margin-left: 160px;
    width: 120px;
    margin-bottom: 5px;
    text-align: center;
    
}

.ratingListingManagementForm .line .submit:hover {
    cursor: pointer;
}

.ratingListingManagementForm .success {
    background-color: #90EE90;
    border: 1px solid #008000;
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 3px 3px 3px 3px;
}

.ratingListingManagementForm .failure {
    background-color: #D30000;
    border: 1px solid #FF0000;
    border-radius: 3px 3px 3px 3px;
    color: #FFFFFF;
    padding: 10px;
    margin-bottom: 20px;
}


.ratingSmilieBg_0 {
    background-color: #ececec;
    border: 1px solid #ccc;
}

.ratingSmilieBg_1 {
    background-color: #980e0e;
    border: 1px solid #980e0e;
}

.ratingSmilieBg_2 {
    background-color: #db0000;
    border: 1px solid #db0000;
}

.ratingSmilieBg_3 {
    background-color: #f08400;
    border: 1px solid #f08400;
}

.ratingSmilieBg_4 {
    background-color: #f1cf11;
    border: 1px solid #f1cf11;
}

.ratingSmilieBg_5 {
    background-color: #89c740;
    border: 1px solid #89c740;
}

.ratingSmilieBg_6 {
    background-color: #00a300;
    border: 1px solid #00a300;
}

.ratingSmilieface19 {
    background: url('/images/ratingSprite_19_30_60.png') 0 0;
    width: 19px;
    height: 19px;
}

.ratingSmilieface19_0 {
    background-position: 0 -19px;
}

.ratingSmilieface19_1 {
    background-position: -114px -19px;
}

.ratingSmilieface19_2 {
    background-position: -95px -19px;
}

.ratingSmilieface19_3 {
    background-position: -76px -19px;
}

.ratingSmilieface19_4 {
    background-position: -57px -19px;
}

.ratingSmilieface19_5 {
    background-position: -38px -19px;
}

.ratingSmilieface19_6 {
    background-position: -19px -19px;
}




.ratingSmilieface30 {
    background: url('/images/ratingSprite_19_30_60.png') 0 0;
    width: 30px;
    height: 30px;
}

.ratingSmilieface30_0 {
    background-position: 0 -68px;
}

.ratingSmilieface30_1 {
    background-position: -180px -68px;
}

.ratingSmilieface30_2 {
    background-position: -150px -68px;
}

.ratingSmilieface30_3 {
    background-position: -120px -68px;
}

.ratingSmilieface30_4 {
    background-position: -90px -68px;
}

.ratingSmilieface30_5 {
    background-position: -60px -68px;
}

.ratingSmilieface30_6 {
    background-position: -30px -68px;
}





.ratingSmilieface60 {
    background: url('/images/ratingSprite_19_30_60.png') 0 0;
    width: 60px;
    height: 60px;
}

.ratingSmilieface60_0 {
    background-position: 0 -158px;
}

.ratingSmilieface60_1 {
    background-position: -360px -158px;
}

.ratingSmilieface60_2 {
    background-position: -300px -158px;
}

.ratingSmilieface60_3 {
    background-position: -240px -158px;
}

.ratingSmilieface60_4 {
    background-position: -180px -158px;
}

.ratingSmilieface60_5 {
    background-position: -120px -158px;
}

.ratingSmilieface60_6 {
    background-position: -60px -158px;
}


.ratingSpriteTrend19 {
    background: url('/images/ratingSprite_19_30_60.png') 0 0;
    width: 19px;
    height: 19px;
}

.ratingSpriteTrend19_up {
    background-position: -133px 0;
}

.ratingSpriteTrend19_down {
    background-position: -114px 0;
}

.ratingSpriteTrend19_same {
    background-position: -95px 0;
}

.ratingSpriteTrend30 {
    background: url('/images/ratingSprite_19_30_60.png') 0 0;
    width: 30px;
    height: 30px;
}

.ratingSpriteTrend30_up {
    background-position: -210px -38px;
}

.ratingSpriteTrend30_down {
    background-position: -180px -38px;
}

.ratingSpriteTrend30_same {
    background-position: -150px -38px;
}



.ratingSpriteTrend60 {
    background: url('/images/ratingSprite_19_30_60.png') 0 0;
    width: 60px;
    height: 60px;
}

.ratingSpriteTrend60_up {
    background-position: -420px -98px;
}

.ratingSpriteTrend60_down {
    background-position: -360px -98px;
}

.ratingSpriteTrend60_same {
    background-position: -300px -98px;
}

.ratingSpriteColoredOK_19 {
    background: url('/images/ratingSprite_19_30_60.png') 0 0;
    width: 19px;
    height: 19px;
    background-position: 0 0;
}

.ratingSpriteColoredFAIL_19 {
    background: url('/images/ratingSprite_19_30_60.png') 0 0;
    width: 19px;
    height: 19px;
    background-position: -19px 0;
}

.ratingSpriteColoredOK_30 {
    background: url('/images/ratingSprite_19_30_60.png') 0 0;
    width: 30px;
    height: 30px;
    background-position: 0 -38px;
}

.ratingSpriteColoredFAIL_30 {
    background: url('/images/ratingSprite_19_30_60.png') 0 0;
    width: 30px;
    height: 30px;
    background-position: -30px -38px;
}

.ratingSpriteColoredOK_60 {
    background: url('/images/ratingSprite_19_30_60.png') 0 0;
    width: 60px;
    height: 60px;
    background-position: 0 -98px;
}

.ratingSpriteColoredFAIL_60 {
    background: url('/images/ratingSprite_19_30_60.png') 0 0;
    width: 60px;
    height: 60px;
    background-position: -60px -98px;
}

/* savepage */
#contentHeader  {

}

#dealerLogo {

}

#dealerLogoBlock {

}

/* sprites */
.spriteWrapper {

	position: relative;

}

.pageTitle {

	margin-left: 55px;

}

.spriteSize {

	height: 40px;
	width: 40px;
	
	position: absolute;
	top: -10px;
	left: 5px;
	
}

.spriteClicks {
	background-image:url('/images/sprites.png');
	background-position:-12px -12px;
	}
	
.spriteStats {
	background-image:url('/images/sprites.png');
	background-position:-12px -66px;
	}

.spriteMaintenance {
	background-image:url('/images/sprites.png');
	background-position:-13px -114px;
	}

.spriteAccount {
	background-image:url('/images/sprites.png');
	background-position:-62px -114px;
	}
	
.spriteLogin {
	background-image:url('/images/sprites.png');
	background-position:-62px -114px;
	}
	
.spriteXmas {
	background-image:url('/images/sprites.png');
	background-position:-12px -165px;
	}
	
.spriteWidgetRating {
	background-image:url('/images/sprites.png');
	background-position:-216px -332px;
	}
	
.spriteRunningMan {
	background-image:url('/images/sprites.png');
	background-position:-62px -206px;
	}

.spriteDownload {
	background-image:url('/images/sprites.png');
	background-position:-13px -322px;
	}

.spriteData {
	background-image:url('/images/sprites.png');
	background-position:-60px -375px;
}
	
.spriteLogout {
	background-image:url('/images/sprites.png');
	background-position:-13px -374px;
	}
	
.spriteContact {
	background-image:url('/images/sprites.png');
	background-position:-13px -478px;
}

.spriteHomepage {
	background-image:url('/images/sprites.png');
	background-position:-13px -426px;
}

.spriteNews {
	background-image:url('/images/sprites.png');
	background-position:-13px -426px;
}

.spriteRating {
	background-image:url('/images/sprites.png');
	background-position:-13px -426px;
}

	
/* Thumbnail-Size: 20x20 px*/
	

.thumbnailSize {

	display: block;

	height: 20px;
	width: 20px;
	
	float: left;
	
	margin-right: 10px;
	margin-left: 10px;

}


.thumbnailHomepage {
	background-image:url('/images/sprites.png');
	background-position:-130px -436px;
}

.thumbnailNews {
	background-image:url('/images/sprites.png');
	background-position:-130px -436px;
}

.thumbnailClicks {
	background-image:url('/images/sprites.png');
	background-position:-130px -29px;
}

.thumbnailStats {
	background-image:url('/images/sprites.png');
	background-position:-129px -76px;
}

.thumbnailMaintenance {
	background-image:url('/images/sprites.png');
	background-position:-130px -124px;
}

.thumbnailAccount {
	background-image:url('/images/sprites.png');
	background-position:-179px -124px;
}

.thumbnailLogin {
	background-image:url('/images/sprites.png');
	background-position:-179px -124px;
}

.thumbnailXmas {
	background-image:url('/images/sprites.png');
	background-position:-129px -175px;
}

.thumbnailEvents {
	background-image:url('/images/sprites.png');
	background-position:-179px -176px;
}

.thumbnailDownload {
	background-image:url('/images/sprites.png');
	background-position:-130px -332px;
}

.thumbnailData {
	background-image:url('/images/sprites.png');
	background-position:-155px -384px;
}

.thumbnailContact {
	background-image:url('/images/sprites.png');
	background-position:-130px -488px;
}

.thumbnailLogout {
	background-image:url('/images/sprites.png');
	background-position:-130px -384px;
}

.iconLangGermanActive {

	display: block;

	background-image:url('/images/sprites.png');
	background-position:-165px -5px;
	width: 33px;
	height: 27px;

}

.iconLangGermanInactive {

	display: block;

	background-image:url('/images/sprites.png');
	background-position:-208px -5px;
	width: 33px;
	height: 27px;

}

.iconLangEnglishActive {

	display: block;

	background-image:url('/images/sprites.png');
	background-position:-164px -39px;
	width: 33px;
	height: 27px;

}

.iconLangEnglishInactive {

	display: block;

	background-image:url('/images/sprites.png');
	background-position:-206px -40px;
	width: 33px;
	height: 27px;

}

.iconLangFrenchActive {

	display: block;

	background-image:url('/images/sprites.png');
	background-position:-164px -76px;
	width: 33px;
	height: 27px;

}

.iconLangFrenchInactive {

	display: block;

	background-image:url('/images/sprites.png');
	background-position:-207px -75px;
	width: 33px;
	height: 27px;

}

.iconLangItalianActive {

	display: block;

	background-image:url('/images/lang/imgLangIt.png');
	background-position: 0 0;
	background-size: 33px 27px;
	width: 33px;
	height: 27px;

}

.iconLangItalianInactive {

	display: block;

	background-image:url('/images/lang/imgLangIt.png');
	background-position: 0 0;
	background-size: 33px 27px;
	width: 33px;
	height: 27px;

	opacity: 0.55;

}

.iconToDownloadAsPdf {

	display: block;

	background-image:url('/images/sprites.png');
	background-position:-154px -332px;
	width: 20px;
	height: 20px;

}

.iconEditData {

	display: block;

	float: left;
	
	margin: 0 5px;
	
	background-image:url('/images/sprites.png');
	background-position:-154px -436px;
	width: 20px;
	height: 20px;

}

.iconAddNewData {

	display: block;

	float: left;
	
	margin: 0 5px;
	
	background-image:url('/images/sprites.png');
	background-position:-154px -488px;
	width: 20px;
	height: 20px;

}

.iconDataOK {

	display: block;

	float: right;
	
	margin: 0 5px;
	
	background-image:url('/images/sprites.png');
	background-position:-236px -129px;
	width: 15px;
	height: 15px;

}

.iconDataFailure {

	display: block;

	float: right;
	
	margin: 0 5px;
	
	background-image:url('/images/sprites.png');
	background-position:-215px -128px;
	width: 15px;
	height: 15px;

}

/* statsclicks */
#statsClicksPageContentBlock {

	margin: 5px;
	
}

#statsInputFieldWrapper {

	margin: 5px;
	padding: 10px 5px;
	
	border: 1px solid #999999;
	background-color: #fff;

}


#periodShortcutWrapper {

	margin-left: 75px;
	height: 25px;

}

.statChangeDateShortcut {

	font-size: 0.8em;
	
	padding: 1px 3px;
	
	margin: 2px 2px 2px 5px;
	
	background-image:url('/images/buttonBackground.png');
	border: none;
	border-radius: 3px;


	cursor: pointer;
	
}

.statsInputFieldWrapper {

	margin: 5px 0;
	
	overflow: hidden;

}

.statsTargetShopWrapper {

	overflow: hidden;

}

.statsUserInput {

	font-size: 0.8em;

}

.statsUserInputRadio {

}

.statsUserLabel {

	font-size: 0.8em;
	
	margin-top: 5px;
	
}

.statsClicksPageDateInput {
	
	width: 80px;

}


#statsUserInfo {

	display: inline;
	width: 450px;
	margin: 5px;
	margin-left: 0;

}

#statsUserInfoLabel {

	color: #ff0000;
	
	margin: 5px;
	margin-left: 10px;

}

#statRefTopFlop {

	display: block;

	width: 210px;
	
	font-size: 0.8em;
	
	background-color: #eeeeee;
    border: 1px solid #6b6b6b;
    color: #000000;
    
    margin: 5px;
    margin-bottom: 0;
    
    padding: 1px 4px;
    
    
    text-decoration: none;

}

#statRefTopFlop:hover {

	background-color: #e4e4e4;
    border: 1px solid #383838;

}

#statsClicksWrapper {

	position: relative;
	
}

#statsClicksStatsContentWrapper {

	margin: 15px 5px 0 5px;
	
	padding: 5px;
	
	border: 1px solid #999999;
	background-color: #fff;

}

#statsClicksWrapperDownloadRef {

	background-color: #FFDD62;
	width: 100%;
	overflow: hidden;

}

#statsClicksDownloadRef:hover {

	text-decoration: underline;

}

#statsClicksDownloadRef {

	color: #000000;
    cursor: pointer;
    display: block;
    float: left;
    font-size: 0.8em;
    margin: 3px 3px 3px 5px;
    padding: 1px 0;
    text-decoration: none;

}

#statClicks {


	font-size: 0.8em;

    color: #000000;
    
    margin: 20px 5px;
    
    height: 400px;
    
    padding: 5px;
    
    
    text-decoration: none;


}


.statsHide {
	
	display: none;

}

/* Datepicker styling */

.ui-datepicker {

	font-size: 0.7em;

}

.ui-datepicker-header {}

.ui-datepicker-prev {}

.ui-datepicker-next {}

.ui-datepicker-title {}

.ui-datepicker-month {}

.ui-datepicker-year {}

.ui-datepicker-calendar {}

.ui-datepicker-week-end {}

.ui-datepicker-other-month {}

.ui-datepicker-buttonpane {}

.ui-datepicker-current {}

.ui-datepicker-close {}

.ui-datepicker-trigger {
display: none;
}


/* Chart styling */

.hideDateInputDiv {

	visibility: hidden;

}

.targetShopRadioWrapper {

	margin-top: 10px;

}

/* statsoffercountpage */
#statsOfferCountPageContentBlock {

}

.statsOfferCountPageInputFieldWrapper {

	margin: 5px;
	padding: 10px 5px;
	
	border: 1px solid #999999;
	background-color: #fff;

}

.statsOfferCountPageStatWrapper {

	background-color: #FFFFFF;
    border: 1px solid #999999;
    margin: 15px 5px 0;
    padding: 5px;
    position: relative;

}

.statsOfferCountPagePeriodSelectionWrapper {

	margin-top: 5px;

}

.statsOfferCountPageInputLabel {

	font-size: 0.8em;
	
	margin-top: 5px;

}

.statsOfferCountPageCheckboxWrapper {

}

.statsOfferCountPageCheckboxes {

	margin-left: 100px; 
	font-size: 0.8em;

}

.statsOfferCountPageCheckboxLabel {

	font-size: 0.8em;
	margin-left: 5px;

}

.statsOfferCountPageCheckboxSectionWrapper {

}

#statsOfferCountPageInputLabelDateStart {

	display: block;
	float: left;

	width: 100px;

}

.statsOfferCountPageInputField {

	font-size: 0.8em;
	
	width: 80px;

}

.statsOfferCountPageShortcutWrapper {

	margin-top: 10px;
	margin-bottom: 10px;

}

#statsOfferCountPageShortcutDistance {

	width: 95px;
	float: left;

}

.statsOfferCountPageDateShortcut {

	font-size: 0.8em;
	
	padding: 1px 3px;
	
	margin: 2px 2px 2px 5px;
	
	background-image:url('/images/buttonBackground.png');
	border: none;
	border-radius: 3px;


	cursor: pointer;

}

#statsOfferCountPageStatField {	

	font-size: 0.8em;

    color: #000000;
    
    margin: 20px 5px;
    
    height: 400px;
    
    padding: 5px;
    
    
    text-decoration: none;
 }
 
 .statsOfferCountPageUserInfo {
 
 	overflow: hidden;
 	float: right; 
 	width: 400px;
 
 }
 
 .statsOfferCountPageUserInfoHeadline {
 
 	display: block;
 	float: left;
 	width: 35px;
 	color: #ff0000;
 	font-size: 0.8em;
 
 }
 
 .statsOfferCountPageUserInfoText {
 
 	display: block;
 	font-size: 0.8em;
 
 }

/* statsproducts */
#statsProductsContentBlock {

	margin: 5px;
	
}

#statsProductsInputFieldWrapper {

	padding: 10px 5px;
	
	border: 1px solid #999999;
	background-color: #fff;

}

.statsProductsInputWrapper {

 overflow: hidden;

}

.statsProductsInput {

	font-size: 0.8em;
	
	width: 80px;

}

.statsProductsLabel {

	font-size: 0.8em;

}

#statsProductsSubmit {

	font-size: 0.8em;
	margin-left: 5px;

}

#statsProductsInfoBox {

	margin: 5px 0;

	padding: 10px;
	


	font-size: 0.8em;

}

.statsProductsShortcut {

	color: #000;
	text-decoration: none;

	display: block;
	float: left;

	font-size: 0.75em;
	
	padding: 1px 3px;
	
	margin: 10px 5px 4px 0;
	
	background-image:url('/images/buttonBackground.png');
	border: none;
	border-radius: 3px;

	cursor: pointer;

}

#csvExportRef {

	color: #000;
	text-decoration: none;

	display: block;
	float: left;

	font-size: 0.8em;
	
	padding: 1px 0;
	
	margin: 3px;
	margin-left: 5px;
	
	cursor: pointer;

}

#csvExportRef:hover {

	text-decoration: underline;
	
}

#shortcutToday {

	margin-left: 88px;

}

#statsProductsTableWrapper {

	margin-top: 15px;

	padding: 5px;
	position: relative;
	border: 1px solid #999999;
	background-color: #fff;
	
}

#statsProductsTable {


}

.statsProductsTableRow {

}

.statsProductsTableRow:hover {
	background-color: #ffdd62;
}

.statsProductsTableRowExport {

	background: #FFDD62;
	
}

.statsProductsTableCellExport {


}

.statsProductsTableRowEven {background: #FFF; }
.statsProductsTableRowOdd {background: #f4f3f3; }

.statsProductsTableCell {

	font-size: 0.8em;
	padding: 8px 5px;

}

.statsProductsDetailsRef {

	color: #000;
	text-decoration: none;

}

/* Datepicker styling */

.ui-datepicker {

	font-size: 0.7em;

}

.ui-datepicker-header {}

.ui-datepicker-prev {}

.ui-datepicker-next {}

.ui-datepicker-title {}

.ui-datepicker-month {}

.ui-datepicker-year {}

.ui-datepicker-calendar {}

.ui-datepicker-week-end {}

.ui-datepicker-other-month {}

.ui-datepicker-buttonpane {}

.ui-datepicker-current {}

.ui-datepicker-close {}

.ui-datepicker-trigger {
display: none;
}

/* statstopproducts */
#statsTopProductsContentBlock {

	 margin: 5px;

}

#statsTopProductsPageInputInfo {

}

#statsTopProductsPageInputFormWrapper {

	background-color: #FFFFFF;
    border: 1px solid #999999;
    padding: 10px 5px;
    
}

.statsTopProductsPageInputWrapper {

	font-size: 0.8em;
	overflow: hidden;
	margin-bottom: 10px;
	
}

.statsTopProductsPageInputLabel {

	display: block;
	float: left;
	width: 120px;

}

.statsTopProductsPageInputInputfield {

}

#statsTopProductsPageSubmitBtn {
	
	background-image: url("/images/buttonBackground.png");
    border: medium none;
    border-radius: 3px 3px 3px 3px;
    color: #000000;
    cursor: pointer;
    display: block;
    float: left;
    font-size: 0.8em;
    margin: 10px 5px 4px 65px;
    padding: 1px 3px;
   
}

#statsTopProductsPageDownloadLinkWrapper:not(:empty) {

	margin-top: 15px;
	background-color: #FFFFFF;
	border: 1px solid #999999;
	padding: 10px 5px;
	font-size: 0.8em;

}


#statsTopProductsPageDownloadLink {

	margin-bottom: 5px;

}

.statsTopProductsPageDownloadReference {

	color: #0000B7;	
    text-decoration: none;
    
}

#statsTopProductsPageCopyForm {
	width: 95%;
	
	padding: 10px;
	font-family: tahoma,verdana,arial;
	display: block;
	border: 1px solid #999999;
	font-size: 0.9em;
	resize: none;
	
}

.statsTopProductsPageDownloadReference:hover {

	text-decoration: underline;

}

/* tpbox */
/*Box!*/


/*
div.NaviBoxRight {
	float:right;
	width:162px;
}
div.FreeNaviBoxRight {
	float:right;
	width:162px;
}
div.NaviBoxLeft {
	width:124px;
}
div.NaviBoxLeft .BOX_Content {
	padding:0px;
}

div.NaviBoxLeft ul li {
	font-size:11px;
}

div.NaviBoxLeft ul li a {
	padding-left:4px;
}

.BOX_Right {
	background:url(/images/box/border_right.png) right repeat-y;
}

.BOX_Left {
	background:url(/images/box/border_left.png) left repeat-y;
}

.BOX_Content {
	background:url(/images/box/px_333333.png) top repeat-x;
	margin-left:3px;
	margin-right:3px;
	padding:0px;
	background-color:#f0f0f0;
}
.BOX_Content_noShadow {
	border:1px solid #333333;
	border-top:0;
	margin:0;
}

.BOX_Header_Content {
	background:url(/images/box/header_bg_333333.png) top repeat-x;
	background-color:#5d8aad;
	line-height:18px;
	font-size:12px;
	font-weight:bold;
	margin-left:3px;
	margin-right:3px;
	padding:2px;
	color:#ffffff;
}
.BOX_Header_Content a {
	color:#ffffff;
}
.BOX_Header_Content a:hover {
	text-decoration:underline;
}
.BOX_Header_noShadow {
	border-right:1px solid #333333;
	border-left:1px solid #333333;
	margin:0;
}
.BOX_Header_Left {
	background:url(/images/box/header_bg_left.png) top left no-repeat;
}

.BOX_Header_Right {
	background:url(/images/box/header_bg_right.png) top right no-repeat;
}

.BOX_Footer_Content {
	background:url(/images/box/footer_bg.png) top repeat-x;
	height:5px;
	margin: 0 4px 10px;
}


.BOX_Footer_Left {
	background:url(/images/box/footer_left.png) top left no-repeat;
}

.BOX_Footer_Right {
	background:url(/images/box/footer_right.png) top right no-repeat;
}

.BOX_Content ul {
	list-style:none;
	margin:0;
	padding:0;
}
.BOX_Content ul li {

}
* HTML .BOX_Content ul {
	width:100%;
}
.BOX_Content ul li a {
	display:block;
	font-weight:bold;
	line-height:18px;
	border:1px solid #F0F0F0;
	border-left: none;
	border-right: none;

	padding: 3px 6px;
}
.BOX_Content ul li a:hover {
	text-decoration:underline;
	background-color:#FEDD6B;
	border-top: 1px solid #fee690;
	border-bottom: 1px solid #b39c4c;
	
	border-left: 1px solid #fee27f;
	border-right: 1px solid #d0b558;

	padding: 3px 5px; 
}

.BOX_Header_Content .breadcrumbSeparator {
	display:inline-block;
	width:0px;height:0px;
	border-top: 3px solid transparent;
	border-bottom: 3px solid transparent;
	border-left: 6px solid white;
	margin:0px 0px 1px 5px;
}

.BOX_Header_Content .breadcrumbSeparator.hovering {
	border-left: 3px solid transparent;
	border-right: 3px solid transparent;
	border-top: 6px solid black;
	margin:0px 0px 1px 3px;
	border-bottom: 0px;
}

*/

/* tpcontact */
#tpContactFormContentBlock {

	margin: 5px;

}

.contactPageInputFieldSize {

	width: 352px;
	box-sizing: border-box;

}

.contactPageInputFieldSizeMiddle {

	width: 130px;
	margin-right: 5px;
	box-sizing: border-box;

	float: left;

}


.contactPageInputFieldSizeSmall {

	width: 82px;
	margin-right: 5px;
	box-sizing: border-box;

}

/* Remove trailing margin so right edges align */
.tpContactWrapper > input:last-child,
.tpContactWrapper > select:last-child,
.tpContactInput > input:last-child,
.tpContactInput > select:last-child {

	margin-right: 0;

}

.contactPageInputWrapper {

	padding: 5px;

	border: 1px solid #999999;
	background-color: #fff;

}

.tpContactInput {

	display: block;
	font-size: 0.8em;
	

}

.tpContactLabel {

	display: block;
	float: left;
	width: 160px;
	min-height: 1px;
	
	font-size: 0.8em;
	text-align: right;
	padding-right: 10px;
	
	margin-right: 5px;
	
}

.tpContactWrapper {

	overflow: hidden;
	
	padding: 4px 0;
	
}

.tpContactSubmitWrapper {

	min-height: 30px;

}

.tpContactInfo {

	margin: 5px 0 5px 181px;
	font-size: 0.8em;

}

#tpContactBtn {

	margin-top: 10px;
	margin-left: 181px;
	font-size: 0.8em;

}

#ContactPersonTitle {

	float: left;
	font-size: 0.9em;

	margin-right: 5px;
	
}

#ContactPersonFirstName {

	font-size: 1em;

}

#ContactPersonName {

	font-size: 1em;

}

.tpContactError {

	float: right;
	
	width: 490px;
	
	margin: 5px 60px 5px 200px; 
	
	padding: 5px;
	
	background-color: #FFDD62;
    border: 1px solid #FFDD62;
	color: #000000;
	
	font-size: 0.8em;

}

#tpContactRefArea {
	font-size: 0.8em;
	
}

#tpContactMsg {
	font-family: tahoma, verdana, arial;
}

/* tptabbedbox */
/*Box!*/
div.NaviBoxRight {
	float:right;
	width:162px;
}
div.FreeNaviBoxRight {
	float:right;
	width:162px;
	margin-right:1px;
}
div.NaviBoxLeft {
	width:124px;
}
.TabBOX_Right {
	background:url(/images/box/border_right.png) right repeat-y;
}

.TabBOX_Left {
	background:url(/images/box/border_left.png) left repeat-y;
}

.TabBOX_Content {
	background:url(/images/box/px_333333.png) top repeat-x;
	margin-left:3px;
	margin-right:3px;
	padding:2px;
	background-color:#f0f0f0;
}
.TabBOX_Content_noShadow {
	border:1px solid #333333;
	border-top:0;
	margin:0;
}

.TabBOX_Header_Content {
	white-space:nowrap;
	list-style:none inside;
	padding:0px 2px;
	margin:0px 2px;
	vertical-align:bottom;
	bottom:0px;
	position:absolute;

}

.TabBOX_Header {
	vertical-align:bottom;
	height:33px;
	overflow-x:visible;
	overflow-y:visible;
	position:relative;
}

.TabBOX_Header_Content li {
	display:inline-block;
	text-align:center;
	vertical-align:bottom;
	height:20px;
}

.TabBOX_Header_Content li.tab {
	padding: 0px 9px 0px 6px;
	background:url(/images/tabs/verlauf_mitte.png) repeat-x;
}

.TabBOX_Header_Content li.selectedTab {
	padding:0px 9px 0px 6px;
	height:25px;
	background:url(/images/tabs/gelb_mitte.png) repeat-x;
}

.TabBOX_Header_Content li a {
	margin-top:3px;
	color:white;
	display:block;
	font-size:11px;
}

.TabBOX_Header_Content li.selectedTab a {
	margin-top:4px;
	font-weight:bold;
	color:black;
}

.TabBOX_Header_Content li a:hover {
	text-decoration:underline;
}

.TabBOX_Header_Content li.tabBorderBetween {
	width:6px;
	height:20px;
	background:url(/images/tabs/verlauf_zwischen.png) no-repeat;
}

.TabBOX_Header_Content li.tabBorderFirst {
	width:5px;
	height:20px;
	background:url(/images/tabs/verlauf_anfang.png) no-repeat;
}

.TabBOX_Header_Content li.tabBorderLast {
	width:5px;
	height:20px;
	background:url(/images/tabs/verlauf_ende.png) no-repeat;
}

.TabBOX_Header_Content li.selectedTabBorderFirst {
	width:3px;
	height:25px;
	background:url(/images/tabs/gelb_links.png) top left no-repeat;
}

.TabBOX_Header_Content li.selectedTabBorderLast {
	width:3px;
	height:25px;
	background:url(/images/tabs/gelb_rechts.png) top right no-repeat;
}

.TabBOX_Header_Content li.selectedTabBorderBetweenLeft{
	width:4px;
	height:20px;
	background:url(/images/tabs/verlauf_links.png) no-repeat;
}

.TabBOX_Header_Content li.selectedTabBorderBetweenRight{
	width:4px;
	height:20px;
	background:url(/images/tabs/verlauf_rechts.png) no-repeat;
}

.TabBOX_Header_Left {
	background:url(/images/box/header_bg_left.png) top left no-repeat;
}

.TabBOX_Header_Right {
	background:url(/images/box/header_bg_right.png) top right no-repeat;
}

.TabBOX_Header_noShadow {
	border-right:1px solid #333333;
	border-left:1px solid #333333;
	margin:0;
}

.TabBOX_Footer_Content {
	background:url(/images/box/footer_bg.png) top repeat-x;
	height:5px;
	margin: 0 4px 10px;
}


.TabBOX_Footer_Left {
	background:url(/images/box/footer_left.png) top left no-repeat;
}

.TabBOX_Footer_Right {
	background:url(/images/box/footer_right.png) top right no-repeat;
}

.TabBOX_Content ul {
	list-style:none;
	margin:0;
	padding:0;
}
.TabBOX_Content ul li {

}
* HTML .TabBOX_Content ul {
	width:100%;
}
.TabBOX_Content ul li a {
	display:block;
	padding-left:4px;padding-right:4px;
	font-weight:bold;
	height:20px;
	line-height:18px;
	border-top:1px solid #F0F0F0;
	border-bottom:1px solid #F0F0F0;
}
.TabBOX_Content ul li a:hover {
	text-decoration:underline;
	background-color:#FEDD6B;
	border-top:1px solid #E5C760;
	border-bottom:1px solid #E5C760;
}

.badgeWrapper {
	position:relative;
}

.badge {
	height:19px;
	font-weight:bold;
	font-size:10px;
	color:white;
	padding-top:4px;
	text-align:center;
	vertical-align:middle;
	position:absolute;
	bottom:0.6em;
	right:-12px;
	z-index:100;
}

.badge_1 {
	width:19px;
	background: url(/images/badges/badge_1.png) no-repeat center;
}

.badge_2 {
	width:24px;
	background: url(/images/badges/badge_2.png) no-repeat center;
}

.badge_3 {
	width:28px;
	background: url(/images/badges/badge_3.png) no-repeat center;
}

.badge_4 {
	width:32px;
	background: url(/images/badges/badge_4.png) no-repeat center;
}

/* usermanagement */
#userManagementContentBlock {

	margin: 5px;

}

#userManagementContentBlockSelection {

	margin: 5px;
	padding: 5px;
	padding-top: 10px;
	
	border: 1px solid #999999;
	background-color: #fff;

}

.userManagementInputFieldWrapper {

	padding: 5px;
	
	border: 1px solid #999999;
	background-color: #fff;

}

.userManagementInput {

	display: block;
	font-size: 0.8em;

}

.userManagementLbl {

	display: block;
	float: left;
	width: 180px;
	
	text-align: right;
	
	font-size: 0.8em;
	
	margin-right: 10px;

}

.userManagementWrapper {

	overflow: hidden;
	margin-bottom: 5px;

}

.userManagementInputFieldSize {

	width: 335px;
	box-sizing: border-box;

}

.userManagementInputFieldSizeMiddle {

	width: 120px;
	margin-right: 5px;
	box-sizing: border-box;

	float: left;

}


.userManagementInputFieldSizeSmall {

	width: 85px;
	margin-right: 5px;
	box-sizing: border-box;

}

/* Remove trailing margin so right edges align */
.userManagementWrapper > input:last-child,
.userManagementWrapper > select:last-child,
.userManagementInput > input:last-child,
.userManagementInput > select:last-child {

	margin-right: 0;

}

#userManagementTitleAndNameWrapper {

	margin-top: 20px;

}

#userManagementSubmitButton {

	margin: 20px 0 20px 196px;
	
	font-size: 0.8em;

}

#contactPersonName {

	font-size: 1em;

}

#contactPersonTitle {

	font-size: 1em;	

}

#contactPersonFirstName {

	font-size: 1em;

}

#userManagementDeleteButton {

	margin: 20px 0 20px 10px;
	
	font-size: 0.8em;

}

#userManagementSuperUserWrapper {

	margin-top: 20px;
	margin-bottom: 20px;

}

.userManagementInput #contactPersonTitle  {

	float: left;
	margin-right: 5px;

}

.userError {

	float: right;
	
	width: 478px;
	
	margin: 5px 50px 5px 200px; 
	
	padding: 5px;
	
	background-color: #FFDD62;
    border: 1px solid #FFDD62;
	color: #000000;
	
	font-size: 0.8em;

}

#userManagementUserSelectionList {

	margin-left: 190px;

}

.userManagementUserSelectionListItem {

	padding: 8px 3px;
	font-size: 0.8em;
	margin-right: 10px;
	
}

.userManagementUserSelectionListItem:hover {
	background-color: #ffdd62;
}

.userManagementUserSelectionListItemNew {
background-color: #fff;
	border-bottom: 1px solid #999999;
	padding: 3px;
	padding-top: 0;
	padding-bottom: 10px;
	font-size: 0.8em;
	margin-right: 10px;
}

.userManagementUserSelectionListItemEven {
	background-color: #fff;
}

.userManagementUserSelectionListItemOdd {
	background-color: #F4F3F3;
}


.userManagementUserSelectionListReference {

	color: #0000b7;
	text-decoration: none;

}

.userManagementUserSelectionListReferenceAddNew {

	color: #0000b7;
	text-decoration: none;

}

.userManagementUserSelectionListReferenceAddNew:hover {

	text-decoration: underline;

}


.userManagementHeaderTd {

	padding: 3px 3px;
	
	height: 50px;
	width: 95px;
	

	
}

.userManagementHeaderTdPseudo {

	padding: 3px 3px;
	
	height: 50px;
	width: 95px;
	

	width: 99%;

}

.userManagementHeaderRow {


}

.userManagementBodyRow {

}

.userManagementBodyRowEven {

		background-color: #fff;
		
	}
	
.userManagementBodyRowOdd {

	background-color: #F4F3F3;
	
	}



.userManagementBodyTd {

	height: 45px;

}

.userManagementBodyTdSelectAll {

	border-top: 1px solid #999999;
	border-bottom: 1px solid #999999;

}

.userManagementBodyTdPseudo {

	height: 45px;

}

.userManagmentTabZoneNameWrapper {

	padding-right: 10px;
	text-align: right;
	font-size: 0.8em;

}

.userManagementWrapperTableHeadlines {

	margin-top: 15px;

	width: 230px;
	float: left;
	
	border: 1px solid #999999;
	background-color: #fff;

	border-right: 0;
}

.userManagementWrapperTableContent {

	overflow-x: auto;
	margin-top: 15px;
	
	border: 1px solid #999999;
	background-color: #fff;

	border-left: 0;
	

}

#userManagementRightManagementCheckboxWrapper {

	float: left;

}

.userManagementCheckboxPositioning {

	float: left;

}

/* userpassword */
#userPasswordPageContentWrapper {

	margin: 5px;
	
}

.userPasswordInputFieldWrapper {

	padding: 5px;
	border: 1px solid #999999;
	background-color: #fff;

}

.inputUserPW {

	font-size: 0.8em;
	width: 200px;


}

.labelUserPW {

	float: left;
	width: 160px;

	font-size: 0.8em;
	
	margin-right: 10px;
	
	text-align: right;
	
}

.inputWrapperUserPW {

	padding-bottom: 5px;
	padding-top: 5px;
	

}

.inputWrapperUserPWSubmitWrapper {

	height: 35px;
	

}
	

#inputUserPWSubmitBtn {

	margin-top: 10px;
	margin-left: 175px;
	font-size: 0.8em;
	
}

/* widgetrating */
#widgetRatingContentBlock {

	margin: 5px;

}

#widgetRatingFormWrapper {

}

.widgetRatingTopicWrapper {

}

.widgetRatingTopicHeadline {

	font-size: 0.8em;
    font-weight: bold;
    padding: 5px;

}

.widgetRatingTopicContentWrapper {

	background-color: #FFFFFF;
    border: 1px solid #999999;
    margin-bottom: 10px;
    
    overflow: hidden;

    font-size: 0.8em;
    
}

.widgetRatingTopicContentWrapperCentered {

	text-align: center;

}

.widgetRatingTopicSelectionWrapperFloatBig {

	overflow: hidden;

	width: 200px;
	
	margin-right: 10px;
	
	display:-moz-inline-stack;
	display:inline-block;
	zoom:1;
	*display:inline;
	
	vertical-align: middle;
	
}


.widgetRatingTopicSelectionWrapperFloatSmall {

	overflow: hidden;
	float: left;
	
	width: 150px;
	margin-right: 10px;
	margin-top: 10px;
	
	margin: 5px 10px 5px 10px;
	
}

.widgetRatingTopicSelectionWrapper {
	
	overflow: hidden;
	
}

.widgetRatingTopicSelectionLabelBig {

 	display: block;
 	margin: 0 auto;
 	
}

.widgetRatingTopicSelectionLabel {

	cursor: pointer;

 	display: block;
    margin-right: 10px;
    margin-left: 25px;
    margin-top: 1px;
    width: 140px;
    white-space: nowrap;

	

}

.widgetRatingTopicSelectionInput {

	display: block;
	float: left;
	width: 20px;

	
}

#widgetRatingResultImageWrapper {
	
	padding: 15px 5px;
	
	border: 1px solid #999999;
	background-color: #fff;
	
	font-size: 0.8em;
	
	overflow: hidden;
	
	
}

.widgetRatingTemplateImage {

	margin: 5px auto;
	padding: 5px;
	border: 3px solid #fff;
	display: block;

	cursor: pointer;
	
}

.widgetRatingTemplateSelectionRadio {

	margin: 0 auto;
	margin-top: 10px;

}

#widgetRatingResultImageDetailWrapper {

	display: block;
	float: left;
	width: 300px;
	
	overflow: hidden;
	
}

.widgetRatingResultImage {

	margin: 0 auto;
	display: block;
}

#widgetRatingResultAjaxWrapper {

	position: relative;

}

#widgetRatingAjaxImgTextWrapper {

	margin: 0 auto;
	margin-top: 10%;
	
	width: 70px;

}

#widgetRatingResultSourceWrapper {

	margin-left: 310px;

}

.widgetRatingTemplateContentBlockWrapper {

}

#widgetRatingAcceptWrapper {


}

#widgetRatingAcceptInfo {


}

#widgetRatingAcceptSubmit {

	margin-top: 10px;
	background-image: url("/images/buttonBackground.png");
    border: medium none;
    border-radius: 3px 3px 3px 3px;
    cursor: pointer;
   
    padding: 1px 3px;
    
}

#widgetRatingResultSourceHeadline {

	font-weight: bold;

}

#widgetRatingTermsOfUseReference {

	color: #0000B7;

    text-decoration: none;

}

#widgetRatingTermsOfUseReference:hover {

    text-decoration: underline;

}

.widgetRatingSelectedTemplatePseudoClass {

	margin: 5px auto;
	padding: 5px;
	border: 3px solid #00ed70;
	display: block;

}

#widgetRatingResultSourceCode {

	display: block;
	font-size: 11px;
}

.widgetRatingTopicSelectionWrapperImageWidth {

	margin: 5px 10px;
	overflow: hidden;
	display: inline-block;
	vertical-align: middle;

}

#widgetRatingTopicSelectionWidthLabel {

	float: left;
	margin: 6px 8px;
	width: 50px;
	text-align: center;
}

#widgetRatingSizeSelectionInput {
	
	width: 360px;
	margin: 5px 15px;
	float: left;

}

.widgetRatingSizeSelectionInputTitles {

	margin: 3px 0;
	display: block;
	float: left;
	width: auto;
	min-width: 55px;
	white-space: nowrap;
	padding-right: 6px;

}

/* xmaspage */
#xmasOverviewContentBlock {

	margin: 5px;

}

#xmasOverviewSentPricesWrapper {

	margin: 5px;	
	margin-bottom: 15px;
	
	border: 1px solid #999999;
	background-color: #fff;
	
	font-size: 0.8em;
	
	padding: 15px 5px;

}

.xmasPagePriceTableWrapper {

	margin: 5px;

}

.xmasPagePriceTable  {

	width: 100%;
	
	
	border: 1px solid #999999;
	background-color: #fff;
	
	font-size: 0.8em;
	
}

.xmasPagePriceTableHeaderRow {

	background: #f4f3f3;

}

.xmasPagePriceTableHeaderRowActive {

	background: #ffdd62;

}


.xmasPagePriceTableHeaderCell {

	padding: 5px;
	

}

.xmasPagePriceTableInputDate {

	width: 80px;

}

.xmasPagePriceTableInputTrackingNumber {

	width: 310px;

}

.xmasPagePriceTableHeaderDate {

	display: block;
	height: 20px;

}

.xmasPagePriceTableHeaderProduct {

	display: block;
	height: 20px;

}

.xmasPagePriceTableHeaderStatus {

	display: block;
	height: 20px;

}

.xmasPagePriceTableHeaderStatusSent {

	color: #00C42A;

}

.xmasPagePriceTableHeaderStatusOpen {

	color: #D30000;

}

.xmasPagePriceTableWinnerWrapper {

	padding-bottom: 5px;

}

.xmasPagePriceTableContentRow {

}

.xmasPagePriceTableContentCell {

	padding: 5px;

}

.xmasPagePriceInputForm {

}

.xmasPagePriceInputWrapper {

	overflow: hidden;
	margin-bottom: 5px;
	padding: 5px 0;
	height: 35px;

}

.xmasPagePriceTableLabel {

	display: block;
	float: left;
	width: 190px;

}

.xmasPagePriceTableInput {

	display: block;
	float: left;
	
	margin-right: 190px;

}

.xmasPagePriceTableText {
	display: block;
	float: left;
}

.xmasPagePriceTableSubmit {

	

}

/* zzz_responsive */
/* ============================================================
   Responsive — fluid frame, mobile hamburger nav, table scroll
   Breakpoints:
     ≥ 1060px  desktop  (no layout change from original)
     768–1059  tablet   (fluid frame, nav stays sidebar)
      < 768px  mobile   (hamburger off-canvas nav)
   ============================================================ */


/* ── 1. Fluid frame: tablet + mobile ─────────────────────── */

@media screen and (max-width: 1059px) {

	body {
		margin: 0;
	}

	#frame {
		width: 100%;
		max-width: 1060px;
		box-sizing: border-box;
		padding: 0 6px;
		margin-top: 6px;
	}

	#contentWrapper {
		width: auto;
		min-width: 0;
		box-sizing: border-box;
	}

	#message,
	.messageTemporaryInfo {
		width: auto;
		max-width: 855px;
		box-sizing: border-box;
	}

	#naviAndContent > .dealerAreaFooter {
		width: auto;
		box-sizing: border-box;
	}

	/* tables + tab rows: horizontal scroll rather than layout-break */
	/* padding-top leaves room for .spriteSize { top:-10px } inside DealerTPBox */
	#content {
		overflow-x: auto;
		padding-top: 12px;
	}

	/* DataStats tab row: allow horizontal scroll instead of clip */
	#offerOverviewHeadline {
		overflow-x: auto;
		overflow-y: visible;
	}

	/* shop logos: scroll horizontally if too many to fit */
	#shopOverview {
		overflow-x: auto;
		white-space: nowrap;
		padding-left: 0;
	}

	#shopOverview .dealerLogoWrapper {
		display: inline-block;
		float: none;
		white-space: normal;
		vertical-align: top;
	}

	/* Der Master-Shop liegt auf dem Desktop absolut in der 114px breiten
	   Spalte links, die #shopOverview per padding-left freihaelt. Hier oben
	   faellt dieses padding weg - das Master-Logo legt sich damit ueber das
	   erste Subshop-Logo, und man sieht nur noch eines von beiden. Also auch
	   den Master in den Fluss zurueck, wie die anderen. Die vorhandene Regel
	   fuer [style*="position:absolute"] greift hier nicht: die Positionierung
	   kommt aus dem Stylesheet, nicht aus einem style-Attribut. */
	#shopOverview .dealerLogoWrapperMaster {
		position: static;
		display: inline-block;
		float: none;
		white-space: normal;
		vertical-align: top;
	}

	/* master-shop logo: no longer absolutely positioned */
	#shopOverview .dealerLogoWrapper[style*="position:absolute"],
	#shopOverview .dealerLogoWrapper[style*="position: absolute"] {
		position: relative !important;
		top: auto !important;
		left: auto !important;
	}

}


/* ── 2. Mobile: hamburger + off-canvas nav ───────────────── */

/* Hamburger button — hidden on desktop/tablet, no positioning here */
.navToggle {
	display: none;
	background: #1b3749;
	color: #fff;
	border: none;
	border-radius: 4px;
	padding: 7px 11px;
	font-size: 1.1em;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 1px 4px rgba(0,0,0,0.3);
	flex: 0 0 auto;
}

.navToggle:hover {
	background: #2a4f6a;
}


@media screen and (max-width: 767px) {

	#frame {
		margin-top: 0;
		padding: 0;
	}

	/* Header: flexbox row — hamburger left | logo centered | language right */
	#header {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 0 8px;
		height: auto;
		min-height: 56px;
		box-sizing: border-box;
		/* keep position:relative for absolute child centering */
		position: relative;
	}

	/* Language buttons: right side */
	#headerTextWrapper {
		margin-left: auto;
		flex: 0 0 auto;
		display: flex;
		align-items: center;
	}

	#headerLanguage {
		float: none;
		height: auto;
		margin-right: 0;
		padding: 0;
		/* 2×2 pill grid: halves the horizontal footprint, prevents logo overlap */
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 3px;
		align-items: center;
	}

	#headerLanguage .langWrapper {
		display: flex;
	}

	#headerLanguage .headerLangRef {
		flex: 1;
		text-align: center;
	}

	/* Logo: centered via absolute positioning within header */
	#raeppliDiv {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	#raeppliDiv img {
		width: 120px;
		height: auto;
		display: block;
	}

	/* Hamburger: left side (order:-1 puts it before language in flex), above overlay */
	.navToggle {
		display: block;
		order: -1;
		position: relative;
		z-index: 1001;
	}

	/* nav: fixed off-canvas, slides in from left */
	#navigation {
		position: fixed;
		top: 0;
		left: 0;
		height: 100%;
		width: 220px;
		z-index: 1000;
		background: #fff;
		border-right: 1px solid #ccc;
		box-shadow: 3px 0 10px rgba(0,0,0,0.2);
		transform: translateX(-100%);
		transition: transform 0.25s ease;
		overflow-y: auto;
		padding-top: 56px;
		box-sizing: border-box;
	}

	/* nav open: slide in */
	#naviAndContent.navOpen #navigation {
		transform: translateX(0);
	}

	/* overlay backdrop when nav is open */
	#naviAndContent.navOpen::before {
		content: '';
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.38);
		z-index: 999;
	}

	/* content: full width, no left margin */
	#contentWrapper {
		margin-left: 0;
		width: 100%;
	}

	#naviAndContent > .dealerAreaFooter {
		margin-left: 0;
		width: 100%;
	}

	/* shop overview: compact on mobile */
	#shopOverview {
		padding-left: 0;
	}

	/* homepage split-columns: stack on mobile */
	.homepageShortInfoWrapperPartLeft,
	.homepageShortInfoWrapperPartRight {
		width: 100%;
		float: none;
		height: auto;
	}

	/* DataStats float row: label + info side by side */
	.dataStatsOverviewLabel {
		width: calc(100% - 90px);
		height: auto;
		min-height: 20px;
	}

	.dataStatsOverviewInfo {
		width: 80px;
		height: auto;
		min-height: 20px;
	}

	/* DataStats description text: reduce large right margin */
	.dataStatsOverviewDescription {
		margin-right: 10px;
	}

	/* Maintenance page: error box + wide inputs */
	.maintenanceError {
		float: none;
		width: auto;
		margin: 5px;
		box-sizing: border-box;
	}

	.maintenanceInputFieldSize {
		width: 100%;
		max-width: 380px;
		box-sizing: border-box;
	}

	/* Rating/comment form wide inputs */
	#ratingCommentWrapper .line .txtinput,
	.ratingListingManagementForm .line .input {
		width: 100%;
		max-width: 380px;
		box-sizing: border-box;
	}

	/* dialog box: full width on mobile */
	#dialogBox {
		width: 90% !important;
		left: 5% !important;
		margin-left: 0 !important;
		box-sizing: border-box;
	}

}


/* ── 3. Multi-shop switcher: logos on desktop/tablet, select on mobile ── */

/* Mobile select: hidden by default (desktop/tablet see logo bar) */
.shopOverviewMobileSelect {
	display: none;
}

@media screen and (max-width: 767px) {

	/* hide logo bar, show dropdown instead */
	#shopOverview {
		display: none;
	}

	.shopOverviewMobileSelect {
		display: block;
		padding: 4px 6px 8px;
	}

	.shopOverviewMobileSelectBox {
		width: 100%;
		font-size: 0.9em;
		box-sizing: border-box;
	}

}


/* ── 4. Mobile form fixes ────────────────────────────────── */

@media screen and (max-width: 767px) {

	/* ── Contact form (TPContact.css) ── */

	/* stack label above inputs instead of float:left side-by-side */
	.tpContactLabel {
		float: none;
		width: auto;
		text-align: left;
		padding-right: 0;
		margin-right: 0;
		margin-bottom: 2px;
	}

	.tpContactWrapper {
		overflow: visible;
	}

	/* full-width inputs */
	.contactPageInputFieldSize {
		width: 100%;
		max-width: 100%;
	}

	.contactPageInputFieldSizeMiddle {
		float: none;
		display: block;
		width: 100%;
		max-width: 100%;
		margin-right: 0;
		margin-bottom: 4px;
	}

	.contactPageInputFieldSizeSmall {
		width: auto;
	}

	/* remove large left indent used for 160px label */
	.tpContactInfo {
		margin-left: 0;
	}

	#tpContactBtn {
		margin-left: 0;
	}

	.tpContactError {
		float: none;
		width: auto;
		margin: 5px 0;
	}


	/* ── Angebotskontrolle filter form (DataTab.css) ── */

	/* Wrapper als Flex-Container: Label nimmt volle Breite,
	   danach liegen [min] und [max] nebeneinander */
	.offerOverviewInputWrapper {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 4px;
		overflow: visible;
	}

	.offerOverviewLabel {
		flex: 0 0 100%;
		float: none;
		width: auto;
		text-align: left;
		padding-right: 0;
		margin: 2px 0 0;
	}

	.offerOverviewInputField {
		flex: 1 1 auto;
		float: none;
		width: auto;
		max-width: 100%;
		font-size: 16px;
	}

	.offerOverviewInputFieldSmall {
		flex: 0 0 auto;
		float: none;
		width: 80px;
		font-size: 16px;
	}

	/* "und" / "kg" inline ohne Float */
	.offerOverviewLabelInline {
		flex: 0 0 auto;
		float: none;
		padding: 0 4px;
		margin: 0;
	}

	/* Submit-Button: Desktop hat margin-left:255px → auf Mobile 0 */
	#offerOverviewSubmit {
		margin-left: 0;
	}

	/* ── Angebotsliste (DataTab.css) ── */

	#offerListHeadlineProductName {
		float: none;
		width: auto;
	}

	.offerOverviewListInfoWrapper {
		float: none;
		width: auto;
	}

}


/* ── 5. HomePage mobile fixes ────────────────────────────── */

@media screen and (max-width: 767px) {

	/* shop/time dropdowns: remove float:right, stack block */
	#homepageInputFieldShopSelection,
	#homepageInputFieldTimeSelection {
		float: none;
		display: block;
		text-align: right;
	}

	/*
	 * Rechtsbuendig ist nur die geschlossene Anzeige gemeint. Die
	 * aufgeklappte Liste bleibt linksbuendig - rechts ausgerichtete
	 * Eintraege liest niemand.
	 *
	 * Das padding-right kommt aus der Desktop-Ansicht, wo die Auswahl
	 * rechts schwebt und Abstand zum Rand braucht. Hier haelt es den Wert
	 * 20px vom rechten Rand weg, und genau das sah nicht buendig aus.
	 */
	#homepageInputFieldShopSelection option,
	#homepageInputFieldTimeSelection option {
		text-align: left;
		padding-right: 0;
	}

	/* allow stats table to scroll within #content instead of clipping */
	#homepageAjaxLoaderAndResultWrapper {
		overflow: visible;
	}

	/* stats table: show only current period (right column).
	   col1 = label (Zeitraum/Klicks-total/Top5/row-numbers)
	   col2 = left-period date / left offer name
	   col3 = left-period clicks / separator in header+total rows
	   → hide all three; keeps current-period date, total, offer+clicks */
	#homepageStatsDetailsTable tr > td:nth-child(1),
	#homepageStatsDetailsTable tr > td:nth-child(2),
	#homepageStatsDetailsTable tr > td:nth-child(3) {
		display: none;
	}
	/* also hide Pos arrows (nth-child(4) in top5 rows, has borderRight class) */
	#homepageStatsDetailsTable .homepageStatsDetailsTableCellBorderRight {
		display: none;
	}

	/* stats table: date headers can be narrower */
	.homepageStatsDetailsTableCellHeadlineWithMinWidth {
		min-width: 80px;
	}

	/* offer column: shrink from 220px */
	.homepageStatsDetailsTableOfferCol {
		width: auto;
		min-width: 100px;
	}

	/* short info right: remove fixed 220px height */
	.homepageShortInfoWrapperPartRight {
		height: auto;
		min-height: 0;
	}

	/* stats text wrapper: remove fixed 33px height that clips text */
	.homepageStatsDetailsTextWrapper {
		height: auto;
		overflow: visible;
	}

}


/* ── 6. Bestellen (ClickOrderPage) mobile fixes ──────────── */

@media screen and (max-width: 767px) {

	/* invoice address: remove 75px left indent from label layout */
	.ordersInvTxt,
	.orderRelatedShops {
		margin-left: 0;
	}

	/* highlighted text badge: don't float, let it sit inline */
	.ordersHighlightedText {
		float: none;
		display: inline-block;
		width: auto;
		height: auto;
	}

	/* allow order table and info boxes to scroll instead of clip */
	#ordersInfoBox,
	#ordersClickAllocationInfoBox,
	#ordersClickInvoicesUnpaidInfoBox,
	#ordersNoEstimationBox {
		overflow: visible;
	}

	/* table headers: allow text to wrap so columns don't force huge width */
	.clickOrdersTableHeadline {
		white-space: normal;
	}

	/* Widgets / Signets: stack preview + code vertically instead of side-by-side */
	#widgetRatingResultImageDetailWrapper {
		float: none;
		width: auto;
	}

	#widgetRatingResultSourceWrapper {
		margin-left: 0;
	}

	#widgetRatingResultSourceCode {
		width: 100%;
		box-sizing: border-box;
	}

}


/* ── 7. Rechnungen (ClickInvoices) mobile fixes ──────────── */

@media screen and (max-width: 767px) {

	/* remove fixed height so wrapper expands to fit stacked rows */
	#invoiceFilterWrapper {
		height: auto;
	}

	/* search input: full width, own line */
	#invoiceSearchInput {
		display: block;
		width: 100%;
		box-sizing: border-box;
		margin-right: 0;
		margin-bottom: 4px;
		/* prevent iOS Safari auto-zoom on focus (requires font-size >= 16px) */
		font-size: 16px;
	}

	/* "Im Zeitraum vom": force onto new line */
	#invoiceDateStartLabel {
		display: block;
		margin-left: 0;
	}

	/* date inputs: 16px prevents iOS Safari from zooming on focus */
	#invoiceDateStartInput,
	#invoiceDateEndInput {
		font-size: 16px;
	}

	/* "Filter entfernen" button: inline next to date fields, small gap */
	#removeFilter {
		display: inline-block;
		margin-left: 8px;
		margin-top: 0;
		vertical-align: middle;
	}

	/* Invoice table: reduce padding so columns fit without horizontal scroll */
	.invoiceTableContent,
	.invoiceTableHeadline {
		padding: 5px 6px;
	}

	/* ▼ details column: narrow and centered, no wasted space */
	#invoiceTable tr > td:last-child {
		width: 28px;
		padding: 4px 2px;
		text-align: center;
	}

}

/* ── 8. Bewertungen / RatingListingPage ≤767px ───────────── */

@media screen and (max-width: 767px) {

	/* Datum-Zeile: Flexbox → "Zeitraum von" volle Breite, dann
	   [von-Input] bis [bis-Input] auf einer Zeile nebeneinander.
	   Flatpickr blendet Original-Inputs aus und fügt Alt-Inputs ein
	   (display:inline-block) — Flex ignoriert float-Angaben der Inline-Styles */
	.ratingListingInputWrapper {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 3px;
		overflow: visible;
	}

	#startDateInputLabel {
		flex: 0 0 100%;
		float: none !important;
		width: auto !important;
		display: block !important;
		margin-bottom: 0;
	}

	/* Flatpickr Alt-Inputs und "bis"-Label: Flex-Items, kein Float */
	.ratingListingInputWrapper .ratingListingInput {
		flex: 0 0 auto;
		float: none !important;
		width: 105px;
		font-size: 16px;
	}

	.ratingListingInputWrapper label[for="endDateInput"] {
		flex: 0 0 auto;
		float: none !important;
		padding: 0 2px;
		margin: 0;
	}

	/* "Heute"-Shortcut: margin-left:140px entfernen → alle Buttons linksbündig */
	#shortcutTodayRatList {
		margin-left: 0;
	}

	/* "Bewertungsschnitt von": eigene Zeile (flex: 0 0 100%) */
	#ratingListingLabelFrom {
		flex: 0 0 100%;
		display: block !important;
		width: auto !important;
	}

	/* Bewertungsschnitt-Inputs: 52px — !important nötig weil
	   .ratingListingInputWrapper .ratingListingInput (oben) 105px setzt */
	.ratingListingInputFromTo {
		width: 52px !important;
		font-size: 16px;
	}

	/* Status-Label: Float weg → Dropdown direkt nach Label */
	#ratingReadUnreadInpLabel {
		float: none;
		width: auto;
	}

	#ratingReadUnreadInp {
		float: none;
		display: inline-block;
	}

}

/* ── 8b. Bewertungen: Datum-Inputs bei sehr schmalen Viewports ≤375px ─ */
/* Bei 360px ist der Wrapper nur ~246px breit; 2×119px + 23px "bis" = 261px
   passt nicht. Inputs auf 90px reduzieren → 2×104px + 23px + 6px gap = 237px ✓ */

@media screen and (max-width: 375px) {

	.ratingListingInputWrapper .ratingListingInput {
		width: 90px;
	}

}

/* ── 9. Ihre Daten / MaintenancePage ≤767px ──────────────── */

@media screen and (max-width: 767px) {

	/* label: kein Float, volle Breite, linksbündig */
	.maintenanceLabel {
		float: none;
		width: auto;
		text-align: left;
		margin-right: 0;
		margin-bottom: 2px;
	}

	/* grosse Einzelfelder (Adresse etc.): volle Breite */
	.maintenanceInputFieldSize {
		width: 100%;
	}

	/* Vorname + Name: je 50% nebeneinander */
	.maintenanceInputFieldSizeMiddlePlus {
		width: calc(50% - 5px);
	}

	/* Inputs: 16px verhindert iOS-Zoom beim Antippen */
	.maintenanceInput {
		font-size: 16px;
	}

}

/* ── 10. Statistik Klicks ≤767px ────────────────────────── */

@media screen and (max-width: 767px) {

	/* Shortcut-Buttons: Desktop hat margin-left:75px + height:25px
	   → auf Mobile links bündig und Höhe freigeben damit Buttons umbrechen */
	#periodShortcutWrapper {
		margin-left: 0 !important;
		height: auto !important;
		overflow: visible !important;
	}

	/* Shortcut-Buttons: kein Zeilenumbruch innerhalb eines Buttons
	   (gilt für alle Stats-Seiten mit ähnlichen Shortcut-Klassen) */
	.statChangeDateShortcut,
	.statsProductsShortcut,
	.statsOfferCountPageDateShortcut {
		white-space: nowrap;
	}

	/* StatsOfferCount: Spacer-Div entfernen → Buttons linksbündig */
	#statsOfferCountPageShortcutDistance {
		float: none;
		width: 0;
	}

	/* Datumseingaben: 16px verhindert iOS-Zoom */
	.statsClicksPageDateInput {
		font-size: 16px;
	}

}

/* ── 11. Widgets / Signets ≤767px ───────────────────────── */

@media screen and (max-width: 767px) {

	/* Desktop: Vorschau float:left 300px + Quellcode margin-left:310px
	   → auf Mobile untereinander stapeln */
	#widgetRatingResultImageDetailWrapper {
		float: none;
		width: auto;
	}

	#widgetRatingResultSourceWrapper {
		margin-left: 0;
	}

	/* Breite-Slider: Desktop 360px → auf Mobile volle Breite */
	#widgetRatingSizeSelectionInput {
		width: calc(100% - 30px);
		max-width: 320px;
	}

}