/**
 * @project HairWare.Zentrale
 * 
 * $Id$
 * 
 * Autor: Daniel Schwarz *1977 Bochum
 *
 * (C)opyright 2014-2021 - HairWare, LA Hair Consulting GmbH
 */

@import url(./jquery/jquery-ui.css);
@import url(./termin.css);
@import url(./planung.css);
@import url(./video.css);
@import url(./uploadprogress.css);

/***************************************************************************
** CSS Overrides 
***************************************************************************/

/* PHP XDebug */
.xdebug-error {
  color:black;
}

/* Tooltipster */

.tooltipster-sidetip .tooltipster-box {
	box-shadow: 5px 5px 2px 0 rgba(0,0,0,0.4);
  background:lightgoldenrodyellow;
  border: 2px solid black;
  color:black;
}

.tooltipster-sidetip .tooltipster-content {
	padding: 8px;
  color:black;
}

.tooltipster-sidetip .tooltipster-arrow-background {
	border: 10px solid transparent;
}

.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-background {
	border-bottom-color: lightgoldenrodyellow;
}

.tooltipster-sidetip.tooltipster-left .tooltipster-arrow-background {
	border-left-color: lightgoldenrodyellow;
}

.tooltipster-sidetip.tooltipster-right .tooltipster-arrow-background {
	border-right-color: lightgoldenrodyellow;
}

.tooltipster-sidetip.tooltipster-top .tooltipster-arrow-background {
	border-top-color: lightgoldenrodyellow;
}

/* CSS Override JQuery UI - Resize Handler */
.ui-resizable-handle {
  transition: background 0.4s ease-in-out;
  width:10px;
  /*z-index:99999999;*/
}
.ui-resizable-handle:hover,
.ui-resizable-handle:active {
  background:rgba(255,224,0,0.5);
}

/***************************************************************************
** HTML Global
***************************************************************************/

* {
  font-family: arial, helvetica, sans-serif;
  font-size: 11pt;
  -moz-box-sizing: border-box; 
  box-sizing: border-box; 

  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: -moz-none;
  -o-user-select: none;
  -ms-user-select: none;
  user-select: none;

  margin:0px;
  padding:0px;		

  cursor:default;
}

/* Browser Scrollbars - WebKit / Chrome */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background-color: transparent;
  margin-left: 2px;
  margin-right: 2px;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(255,255,255,0.4); 
    transition: background 0.4s ease-in-out;
}

::-webkit-scrollbar-thumb:vertical:hover,
::-webkit-scrollbar-thumb:horizontal:hover {
  background-color: rgba(255,255,255,0.9); 
}

::-webkit-scrollbar-thumb:vertical:active,
::-webkit-scrollbar-thumb:horizontal:active {
  background-color: yellow; 
}

::-webkit-scrollbar-corner {
  background: transparent; 
}

/* Browser Scrollbars - Firefox */

@media(min--moz-device-pixel-ratio:0) {
  * {
    scrollbar-color: rgba(255,255,255,0.4) transparent !important;
    scrollbar-width: thin !important;
  }
}

A,
A:hover,
A:active,
A:visited {
  color: white;
  text-decoration: none;
  cursor: pointer;
}

A:hover {
  text-decoration: underline;
}

HTML {
  width: 100%;
  height: 100%;
  margin:0px;
  padding:0px;
}

BODY {
  background: #252525;
  color: white;
  margin:0px;
  padding:0px;
  height:100%;
  width:100%;
}


H1 {
  display:block;
  font-size:16pt;
  font-weight: bold;
  padding:0;
  margin:0;
  margin-bottom:4px;
}

H2 {
  display:block;
  font-size:14pt;
  font-weight: bold;
  padding:0px;
  margin:0px;
  margin-bottom:4px;
}

H3 {
  display:block;
  font-size:12pt;
  font-weight: bold;
  padding:0;
  margin:0;
  margin-bottom:4px;
}

P {
  display:block;
  margin:0px;
  padding:0px;
  margin-bottom: 5pt;
}

FORM {
  display:block;
  padding:0px;
  margin:0px;
  border:0px;
}

PRE {
  font-family: monospace;
}


/* Error */
PRE.error,
P.error {
  background: #990000;
  color:yellow;	
  white-space: pre-wrap;
  padding:2px;  
}

/** Clear Class */
.clear {
  clear:both;
}

/* Macht ein Element Selectierbar, inkl. Hover Border, ohne Unterelemente */
.userselect {
  -webkit-user-select: text;
  -khtml-user-select: text;
  -moz-user-select: text;
  -o-user-select: text;
  -ms-user-select: text;
  user-select: text;
  cursor: text;
  border: 1px solid transparent;
}

.userselect:hover {
  border: 1px dotted yellow;
}

/* Macht ein Element ink. Unterelemente Selektierbar */
.selectable,
.selectable * {
  -webkit-user-select: text;
  -khtml-user-select: text;
  -moz-user-select: text;
  -o-user-select: text;
  -ms-user-select: text;
  user-select: text;
  cursor: text;  
}

.scrollContainer {
  display:block;
  width:100%;
  height:100%;  
  overflow:auto;
}

/** Allgemeines Drag Over Element */
.dragOver {
  background:lightcoral;
  color:black;
}

/* Allgemeiner PopUp-Hintergrund für Dialog-Fenster */
.dialogBackground {
  background: black;
  opacity:0.7;
}

/* Negative Preise */
.preisNegativ {
  color:#FF8888;
}

/* Positive Preise */
.preisPositiv {
  color:#88FF88;
}

/* Einfache Line Bottom */
.einfacheLinieUnten {
  border-bottom:1px solid white;
}

/* Doppelte Linie Bottom */
.doppelteLinieUnten {
  border-bottom:3px double white;
}

/* Einfache Line Top */
.einfacheLinieOben {
  border-top:1px solid white;
}

.standardBorder {
  border:1px solid white;
}

.standardBlock {
  display:block;
  width:100%;
}

/* Doppelte Linie Top */
.doppelteLinieOben {
  border-top:3px double white;
}

TR.produktpool * {
 color:cyan;
}

/* Hervorheben, inkl. SELECT OPTION */

.hervorhebenHg,
SELECT option.hervorhebenHg {
  background: rgba(0,255,255,0.5);
}

SELECT option.hervorhebenHg:nth-child(even) {
  background: rgba(0,255,255,0.3);  
} 


.hervorhebenText {
  color: cyan;
}

.warnungHg {
  background: rgba(163,163,0,0.5);
}

/* Warnung */
TD.warnung,
P.warnung,
SPAN.warnung {
  background: rgba(163,163,0,0.5);
  color: white;
  padding:5px;	
}

.kritischHg {
  background: rgba(102,17,17,0.5);
}

/* Kritisch */
TD.kritisch,
P.kritisch,
SPAN.kritisch {
  background: rgba(102,17,17,0.5);
  color: yellow;
  padding:5px;	
}


TABLE.standardList TD.kritisch,
TABLE.standardList TR.kritisch > TD {
  background: rgba(102,17,17,0.5);
  color:yellow;
}

TABLE.standardList TD.kritisch A,
TABLE.standardList TR.kritisch > TD A {
  color:yellow;
}

TABLE.standardList TD.positiv,
TABLE.standardList TR.positiv > TD {
  background: rgba(0,102,0,0.5);
  color:white;
}

TABLE.standardList TD.alternativ,
TABLE.standardList TR.alternativ > TD {
  background: rgba(127,127,127,0.5);
  color:white;
}

TABLE.standardList TD.inaktiv,
TABLE.standardList TR.inaktiv > TD {
  color:lightgray;
  font-style:italic;
}

/* Seiten Navigation */

.seitenNavigation {
  display:block;
  width:100%;	
  margin-bottom:5px;
  line-height: 25px;
}
.seitenNavigation  SPAN {
  line-height: 25px;
}

.seitenNavigation BUTTON {
  min-width:26px;
  padding:0;
  min-height:24px;
  margin-left: 3px;
}

.seitenNavigation BUTTON[disabled=disabled] {
  background: #BBBBBB;
  text-decoration: underline;
}

/* Bitte Warten */

#BitteWarten {
  display:none;
  position:absolute;
  left:0;right:0;top:0;bottom:0;
  z-index:100000;
  background: rgba(0,0,0,0.5);
  
  background-image: url(../icons/laden_weiss.svg);
  background-size: 150px 50px;
  background-position: center center;
  background-repeat: no-repeat;
  background-origin:content-box;  
}

/* Hilfe auf / zu klapp */

LABEL.HilfeIcon {
  width:16pt;
  height:16pt;
  
  background-image: url(../icons/hilfe_blau.svg);
  background-size:contain;
  background-position: center center;
  background-repeat: no-repeat;
  background-origin:content-box;  
  
  cursor: pointer;
}

INPUT[type=checkbox].HilfeSchalter {
  display:none;
}

INPUT[type=checkbox].HilfeSchalter:checked + P.HilfeText {
  display:block;
}

P.HilfeText {
  display:none;
}

/***************************************************************************
** Grundlayout: Kopf
***************************************************************************/

.KopfContainer {
  position:fixed;
  top:0px;	left:0px;	right:0px;
  width:100%;
  height:46px;
  background:linear-gradient(#0C5CA7, #063867);
  line-height:46px;
  padding-right:5px;
  padding-left:5px;
  overflow: hidden;
}

/** Kopf Daten **/

.KopfButtonAbmelden,
.KopfButtonAbmelden:active, 
.KopfButtonAbmelden:hover,
.KopfButtonAbmelden:focus {
  display:inline;
  vertical-align: middle;
  margin-bottom: 5px;
  border:0;
  border-radius: 0;
  background-color: transparent;
  background-image: url(../icons/abmelden_weiss.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;

  width:30px;
  height:30px;
}

/* Kopf Texte, je nach Screen breite sollen sie ein oder ausgeblendet werden */

.KopfLogo {
  display:none;
  float:left;
  background-image: url(../images/starschnitt_logo.svg);
  background-position:center;
  background-size: 80% 80%;
  background-repeat: no-repeat;
  background-clip: content-box;
  width: 46px;
  height:46px;	
}

.KopfFranchiseNehmer {
  display:inline;
  float:left;
  font-size:14pt;
  font-weight:bold;
  text-shadow: 0px 0px 8px #000000;
}
.KopfSalon {
    display:inline;
  float:left;
  font-size:14pt;
  font-weight:bold;
  text-shadow: 0px 0px 8px #000000;
}
.KopfKasse {
    display:inline;
  float:left;
  font-size:12pt;
  text-shadow: 0px 0px 8px #000000;
}
.KopfMitarbeiter {
    display:inline;
  float:left;
  font-size:12pt;
  text-shadow: 0px 0px 8px #000000;
}

.KopfMitarbeiter,
.KopfMitarbeiter > A,
.KopfMitarbeiter > A:hover,
.KopfMitarbeiter > A:active,
.KopfMitarbeiter > A:visited {
  font-size:12pt;
  text-shadow: 0px 0px 8px #000000;  
}

.KopfUhr {
  display:inline;
  float:right;
  font-size:12pt;
  padding-right:5px;
  padding-left:5px;
  text-shadow: 0px 0px 8px #000000;
}

.KopfUhr:hover {
  text-decoration: underline;
}


/***************************************************************************
** Grundlayout: Modul Container / Menü
***************************************************************************/

.ModulContainer {
  display:block;
  width:130px;
  height:100%;

  background: #4F4F4F;
}

.ModulContainer .RegionHead {
  background:linear-gradient(#888888, #666666);  
  text-shadow: 0px 0px 8px #000000;
}

.ModulInhaltContainer {
  width:100%;
  padding:0px; 
  margin:0px; 
  height:100%;
}

.ModulScrollContainer {
  display:block;
  width:100%;
  height:100%;  
  overflow-y:auto;  
  overflow-x:hidden;  
}


.ModulButton:active,
.ModulButton:focus,
.ModulButton {
  display:block;
  height:auto;
  background:transparent;
  border:0;
  border-radius:5px;
  padding:2px;
  margin:5px;

  text-decoration: none;
  cursor:pointer;
  outline:0;
}

.ModulButton.selected {
  background:#094b89;
}
.ModulButton.selected:hover {
  background:#094b89;
}

.ModulButton:hover {
  background:#666666;

  -webkit-transition: background 0.4s ease-out;
  -moz-transition: background 0.4s ease-out;
  -o-transition: background 0.4s ease-out;
  -ms-transition: background 0.4s ease-out;
  transition: background 0.4s ease-out;	
}


.ModulButton .Icon {
  height:36px;

  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;	
  margin:0 auto;
  cursor:pointer;
}

.ModulButton .Text {
  color:white;
  font-size:10pt;
  margin:0 auto;
  cursor:pointer;
  text-decoration: none;
}




/***************************************************************************
** Grundlayout: Container
***************************************************************************/

.InhaltContainer {
  display:block;
  height:100%;
  padding-top:46px;
  width:100%;
  min-height: 100%;
  overflow:hidden;

  top:0px;	left:0px;	right:0px; bottom:0px;  
  
  background: #363636;	
}

.AnmeldenContainer {
  height:100%;  
  width:100%;
  padding:0px; 
  margin:0px; 
  overflow:auto;

  background-image: url(../images/starschnitt_bg_grau.svg);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  background-origin:content-box;  
}

.StandardContainer {
  display:block;
  height:100%;
  width:100%;
  min-height:100%;
  overflow:hidden;		
}

.StandardContainer .RegionHead {
  background:linear-gradient(#707070, #505050);
}
.StandardContainer .RegionHead .iconButton {
  background:linear-gradient(#707070, #505050); 
}

.RechnungPositionContainer {
  display:block;
  height:100%;
  width:100%;
  overflow:hidden;		
}

.RechnungPositionContainer .RegionHead {
  background-color: #555555;
}

.ProduktGruppenContainer {
  display:block;
  height:100%;
  width:100%;
  overflow:hidden;		

  background-color: #333333;
}

.ProduktGruppenContainer .RegionHead {
  background:linear-gradient(#707070, #505050); 
}

/***************************************************************************
** Grundlayout: Region
***************************************************************************/

.Region {
  display:block;
  height:100%;
  width:100%;
  padding: 0px;
  margin:0px;
  min-height:100%;
}

.RegionBorder {
  /*border:1px solid white;	*/
}

/* Region Köpfe */

.RegionHead {
  height:22px;
  line-height:22px;
  color:white;
  font-weight:bold;	
  margin:0px;
  padding:0px;
}

.RegionHead .text {
  float:left; 
  padding-left:5px;
  padding-right:5px;
}

.RegionHead .iconButton {
  float:right; 
  color:white; 
  text-align:center; 
  text-decoration: none;
  padding-left:2px;
  padding-right:2px;
  font-weight:normal; 
  width:auto; 
  height:22px;
  min-width:22px;

  background:linear-gradient(#707070, #505050); 

  background-repeat: no-repeat;
  background-position: center;
  background-size: 70% 70%;	
}

.RegionHead .iconButton.links {
  float:left; 
  border-left:0;
}

.RegionHead .iconButton:hover {
  background-color:#666666;
  transition: background-color 0.4s ease-out;	
}

/***************************************************************************
** Grundlayout: ScrollContainer
***************************************************************************/

.ScrollContent {
  display:block;
  width:100%;
  height:100%;
  padding:10px;
  margin:0;
}

/***************************************************************************
** Dialog: Standard
***************************************************************************/

BODY.standardDialog {
  background: #555555;
  border:0px;
  color:white;
  margin:0;
  padding:0;
}

DIV.standardDialog {
  background: #555555;
  border:5px solid white;
  border-radius:5px;
  color:white;
}

DIV.standardDialog .title {
  display:block;
  font-weight:bold;
  color:white;
  
  background:linear-gradient(#555555, #333333); 
  text-shadow: 0px 0px 6px #000000;
  
  padding:4px;	
}

DIV.standardDialog .close {
  background-image: url(../icons/loeschen_weiss.svg);
  background-position:center;
  background-size: 80% 80%;
  background-repeat: no-repeat;
  background-clip: content-box;
  width: 18px;
  height:18px;
  cursor: pointer;
}

BODY.standardDialog {
  background: #555555;
  color: white;
  margin:0px;
  padding:0px;
  border:0px;
  height:100%;
  width:100%;
}

A.vncButton {
 color:yellow;
 background:limegreen;
 border: 1px solid blue;
 padding-left:3px;
 padding-right:3px;
 border-radius: 3px;
}

A.vncButton:hover {
  text-decoration: underline;
}
  

.listButton,
.listButton:visited,
.listButton:active {
  background:transparent;
  
  border:0;
  margin:0;
  padding:2px;
  color:white;
  height:auto;
  display: block;
  width:100%;
  outline:0;
  text-align: left;
  
  text-decoration: none;
}


.listButton.selected,
.listButton.selected:hover {
  background: rgba(255,255,0,0.5);
}

.listButton:hover {
  background: rgba(255,255,255,0.3);
}


/***************************************************************************
** Tabelle: StandardTable (Keine border, cellpadding cellspacing))
***************************************************************************/

TABLE.standardTable {
  background: transparent;
  border:0;
  margin:0;
  padding:0;
  empty-cells: show;
  border-spacing: 0;
}


TABLE.standardTable TR > TD,
TABLE.standardTable TR:hover > TD {
  background: transparent;
  border:0px;
  margin:0px;
  padding:2px;		
  padding-top:3px;
}



TABLE.standardTable TR > TH,
TABLE.standardTable TR:hover > TH {
  background: white;
  color:black;
  font-weight: bold;
  text-align:left;
  height:26px;	
}



TABLE.standardTable.nopadding TR > TD,
TABLE.standardTable.nopadding TR:hover > TD{
  background: transparent;
  border:0px;
  margin:0px;
  padding:0px;		
  padding-top:0px;
}

TABLE.standardTable.nopadding TR > TH,
TABLE.standardTable.nopadding TR:hover > TH {
  background: white;
  color:black;
  font-weight: bold;
  text-align:left;
  padding:2px;
}

TABLE.standardTable.nopadding TR > TH {
  background: white;
  color:black;
  font-weight: bold;
  text-align:left;
}

/***************************************************************************
** Tabelle: standardList (mit kopf und outlines)
***************************************************************************/

TABLE.standardList {
	border-left: 1px solid white;
	border-right: 1px solid white;
	border-top: 1px solid white;
	height: auto;
	empty-cells:show;
	border-spacing:0px;
  border-radius:5px 5px 0px 0px;
  overflow:hidden;
}

TABLE.standardList TH {
	background: white;
	color:black;
	font-weight: bold;
	border-right: 1px solid black;
	border-bottom: 1px solid white;
	padding:2px;
}

TABLE.standardList TH:last-child {
	border-right: 1px solid white;
}

TABLE.standardList TD:last-child {
	border-right: 0px solid white;
}


TABLE.standardList TR TH,
TABLE.standardList TR TH:hover {
  background-color: white;
  color:black;
  font-weight: bold;
  border-right: 1px solid black;
  border-bottom: 1px solid white;
  padding:3px;
  text-align: left;
}

/* Tabellen mit Sql asc / desc */

TABLE.standardList TR TH A,
TABLE.standardList TR TH A:active {
  display:block;
  color:black;
  text-decoration: none;
  width:100%;
  height:100%;
  cursor:pointer;  

  padding-right:20px;
}

TABLE.standardList TR TH A.asc {
  background-image: url(../icons/pfeil_oben_schwarz.svg);
  background-repeat:no-repeat;
  background-position: right;
  background-size: 16px 16px;
  background-origin: border-box; 
}

TABLE.standardList TR TH A.desc {
  background-image: url(../icons/pfeil_unten_schwarz.svg);
  background-repeat:no-repeat;
  background-position: right;
  background-size: 16px 16px;
  background-origin: border-box;  
}

TABLE.standardList TR TH A:hover {
  color:black;
  text-decoration: underline;
}

TABLE.standardList TR TH:last-child {
  border-right: 1px solid white;
}

TABLE.standardList TR > TD,
TABLE.standardList TR:hover > TD {
  border-right: 1px solid white;
  border-bottom: 1px solid white;	
  padding:2px;
  padding-left:4px;
  padding-right:4px;
  height:23px;
}

TABLE.standardList TR:hover > TD:last-child {
  border-right: 0px;
  border-bottom: 1px solid white;	
  padding:2px;
  padding-left:4px;
  padding-right:4px;
  height:23px;
}



TABLE.standardList TR TD[draggable=true] {
  background: lightgray;
  color:black;
}

TABLE.standardList TR:hover > TD {
  background: rgba(230,230,180,0.8);
  color:black;

  -webkit-transition: background 0.4s ease-out;
  -moz-transition: background 0.4s ease-out;
  -o-transition: background 0.4s ease-out;
  -ms-transition: background 0.4s ease-out;
  transition: background 0.4s ease-out;
}

TABLE.standardList TR.kritisch:hover > TD *,
TABLE.standardList TR:hover > TD * {
  color:black;
}

TABLE.standardList TR:hover > TD[draggable=true] {
  background: darkgray;

  color:white;
  -webkit-transition: background 0.4s ease-out;
  -moz-transition: background 0.4s ease-out;
  -o-transition: background 0.4s ease-out;
  -ms-transition: background 0.4s ease-out;
  transition: background 0.4s ease-out;	
  cursor: pointer;
}

TABLE.standardList TD[selected]:hover,
TABLE.standardList TD[selected] {
  border-right: 1px solid white;
  border-bottom: 1px solid white;	
  padding:2px;
  padding-left:4px;
  padding-right:4px;
  color:black;
  background: rgba(255,255,0,0.8);
}

TABLE.standardList TR > TD[selected]:hover BUTTON.fullCell,
TABLE.standardList TR > TD[selected] BUTTON.fullCell {
  color:black;	
}

TABLE.standardList TR > TD[selected]:hover BUTTON.fullCell.selectArrow,
TABLE.standardList TR > TD[selected] BUTTON.fullCell.selectArrow {
  background-image: url(../icons/pfeil_rechts_schwarz.svg);
  background-repeat:no-repeat;
  background-position: right;
  background-size: contain;
  background-origin: content-box;
}

TABLE.standardList.alternierend TR:nth-child(odd) > TD {
  background:rgba(128,128,128,0.4);
}
TABLE.standardList.alternierend TR:nth-child(odd):hover > TD {
  background: rgba(230,230,180,0.8);
  color:black;

  -webkit-transition: background 0.4s ease-out;
  -moz-transition: background 0.4s ease-out;
  -o-transition: background 0.4s ease-out;
  -ms-transition: background 0.4s ease-out;
  transition: background 0.4s ease-out;

}

TABLE.standardList TR > TD.kritisch {
  border-right: 1px solid white;
  border-bottom: 1px solid white;	
  padding:2px;
  padding-left:4px;
  padding-right:4px;
  background: rgba(102,17,17,0.5);
}

TABLE.standardList TR > TD.positiv {
  border-right: 1px solid white;
  border-bottom: 1px solid white;	
  padding:2px;
  padding-left:4px;
  padding-right:4px;
  background: rgba(0,102,0,0.5);
}

TABLE.standardList TR > TD.warnung {
  border-right: 1px solid white;
  border-bottom: 1px solid white;	
  padding:2px;
  padding-left:4px;
  padding-right:4px;
  background: rgba(163,163,0,0.5);
}

TABLE.standardList TR.aktiv > TD,
TABLE.standardList TR.aktiv > TD:hover,
TABLE.nohover TR.aktiv TD,
TABLE.nohover TR.aktiv TD:hover{
  background: rgba(128,128,128,0.3);
  color:white;
}

.nohover,
TR.nohover:hover > TD,
TABLE.standardList TR.nohover:hover > TD
{  
  background: transparent;
  color:white;
  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: none;
  -ms-transition: none;
  transition: none;
}




TABLE.standardList .linkButton {
background:transparent;
  
  border:0;
  margin:0;
  padding:0;
  color:black;
  height:auto;
  display: block;
  width:100%;
  height:100%;
  outline:0;
  text-align: left;
  
  padding-right: 20px;
  
  text-decoration: none;
}



TABLE.standardList .linkButtonAsc {
background:transparent;
  
  border:0;
  margin:0;
  padding:0;
  color:black;
  height:auto;
  display: block;
  width:100%;
  height:100%;
  outline:0;
  text-align: left;
  background-image: url(../icons/pfeil_oben_schwarz.svg);
  background-repeat:no-repeat;
  background-position: right;
  background-size: 16px 16px;
  background-origin: border-box;  
  
  padding-right: 20px;
  
  text-decoration: underline;
}

TABLE.standardList .linkButtonDesc {
  background:transparent;
  
  border:0;
  margin:0;
  padding:0;
  color:black;
  height:auto;
  display: block;
  width:100%;
  height:100%;
  outline:0;
  text-align: left;
  background-image: url(../icons/pfeil_unten_schwarz.svg);
  background-repeat:no-repeat;
  background-position: right;
  background-size: 16px 16px;
  background-origin: border-box;   
  
  padding-right: 20px;
  
  text-decoration: underline;
}


/***************************************************************************
** Eingabe Formulare
***************************************************************************/

DIV.formularBlock {
  display:block;
  width:100%;
}

DIV.formularElement {
  display:inline-block; 
  width:auto;
  margin-bottom:10px;
  margin-right:10px;
}

DIV.formularBlock DIV.formularElement {
  position:relative;	
  float:left; 
  width:50%; 
  min-width: 100px;
  padding-bottom: 6px;
  padding-right: 6px;
  margin:0px;
}

@media (max-width: 500px) {

  DIV.formularBlock DIV.formularElement {
    position:relative;	
    float:none;
    width:100%; 
    min-width: 100px;
    padding-bottom: 6px;
    padding-left: 0px;
    margin:0px;
  }    
}

LABEL,
DIV.formularElement LABEL {
  display:block;
  min-height: 23px;
  line-height: 23px;
  vertical-align: middle;
  padding-right:5px;
}

LABEL.error,
DIV.formularElement.error SPAN,
DIV.formularElement.error LABEL
{
  color:#ff7777;
}

TEXTAREA.error,
INPUT.error,
INPUT[type=text].error,
INPUT[type=number].error,
INPUT[type=password].error,
SELECT.error,
DIV.formularElement.error TEXTAREA,
DIV.formularElement.error INPUT {
  border:1px solid #ff7777;
}

DIV.formularElement.error SELECT {
  border:1px solid #ff7777;
  background-image: url(../icons/pfeil_unten_error.svg);
}

/***************************************************************************
* Steuerelement: Button
***************************************************************************/

BUTTON {
  background-color:white;
  color:black;
  border: 1px solid white;
  border-radius: 3px;
  padding: 2px;
  padding-left: 8px;
  padding-right: 8px;
  cursor:pointer;

  min-height: 22px;
  outline:none;
}

BUTTON[disabled] {
  background-color:lightgray;
}

BUTTON:focus {
  text-decoration: underline;
}

BUTTON.icon {
  padding:0px; 
  margin:0px; 
  min-width:23px;
  min-height:23px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  
  text-align: center;
  vertical-align: middle; 
}

BUTTON.icon[disabled] {
  padding:0; 
  margin:0; 
  width:23px;
  height:23px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  text-align: center;
  vertical-align: middle; 
  background-color: lightgray;
}

BUTTON.highlight {
  background: orange;
}

/***************************************************************************
* Steuerelement: Button innerhalb von TH
***************************************************************************/

TH BUTTON {
  background-color:rgba(33, 33, 33, .08);	
  color:black;
  border: 1px solid gray;
  padding: 2px;
  padding-left: 8pt;
  padding-right: 8pt;
  cursor:pointer;
  min-height: 22px;
  outline:none;
}

TH BUTTON:focus {
  text-decoration: underline;
  border: 1px solid red;
}

TH BUTTON.icon {
  padding:0; 
  margin:0; 
  width:23px;
  height:23px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  text-align: center;
  vertical-align: middle; 
}

/***************************************************************************
* Steuerelement: Button Cell (Tabellen Zellen o. änl.)
***************************************************************************/

BUTTON.cellIcon {
  padding:0px; 
  margin:0; 
  width:23px;
  height:23px;
  background-color:transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  text-align: center;
  vertical-align: middle; 
  border:1px solid transparent;
}

BUTTON.cellIcon:focus {
  background:transparent;
}
BUTTON.cellIcon:hover {
  border:1px solid white;
}

/***************************************************************************
* Steuerelement: Button FullCell (zur Selektion innerhalb von Tabellen via POST)
***************************************************************************/
BUTTON.fullCell {
  border:0; 
  margin:0; 
  padding:0; 
  width:100%; 
  height:100%; 
  padding:2px;
  background:transparent;
  color:white;
  text-align: left;
}

BUTTON.fullCell:hover.selectArrow {
  background-image: url(../icons/pfeil_rechts_weiss.svg);
  background-repeat:no-repeat;
  background-position: right;
  background-size: contain;
  background-origin: content-box;
}


/***************************************************************************
* Steuerelement: Button Kritisch
***************************************************************************/

BUTTON.kritisch:hover,
BUTTON.kritisch:focus,
BUTTON.kritisch {
  width:auto; 
  background: red; 
  color:white;
  border: 1px solid white;
}

/***************************************************************************
* Steuerelement: Button Positiv (z.B. Kassieren)
***************************************************************************/

BUTTON.positiv:hover,
BUTTON.positiv:focus,
BUTTON.positiv {
  width:auto; 
  background: green; 
  color:white;
  font-family: sans-serif;
  font-weight:bold; 
  border: 1px solid white;
}

/***************************************************************************
* Steuerelement: Button Kassieren
***************************************************************************/

BUTTON.kassieren:hover,
BUTTON.kassieren:focus,
BUTTON.kassieren {
  display:block;
  width:100%; 
  background: green; 
  color:white;
  font-size:16px;
  font-weight:bold; 
  height:36px;
  border: 1px solid white;
  padding:2px;
}

BUTTON.kassieren[disabled]:hover,
BUTTON.kassieren[disabled]:focus,
BUTTON.kassieren[disabled] {
  display:block;
  width:100%; 
  background: red; 
  color:white;
  font-size:12px;
  height:36px;
  font-weight:bold; 
  border: 1px solid white;
  padding:2px;
  cursor:default;
}

/***************************************************************************
* Steuerelement: Button Warnung (z.B. Storno Kassieren)
***************************************************************************/

BUTTON.warnung:hover,
BUTTON.warnung:focus,
BUTTON.warnung {
  background: #c3b300; 
  color:red;
  font-family: sans-serif;
  font-weight:bold; 
  border: 1px solid white;
}

/***************************************************************************
* Steuerelement: Button Zahlungsart
***************************************************************************/

BUTTON.zahlArt {
  display:block;
  background-color: transparent;
  border:0px;
  margin:0px;
  padding:0px;
  height:auto;
  width:80px;
  text-align: center;
  border-radius: 5px;
  border:1px solid transparent;
  cursor:pointer;
}

BUTTON.zahlArt:hover {
  border:1px solid white;
  border-radius: 5px;	
} 

BUTTON.zahlArt * {
  cursor:pointer;
}

BUTTON.zahlArt:active, 
BUTTON.zahlArt:focus {
  background-color: transparent;
  background-image: none;
}

BUTTON.zahlArt .icon {
  display:block;
  background-position:center;
  background-size: contain;
  background-repeat: no-repeat;
  background-clip: content-box;
  background-color: transparent;
  width: 50px;
  height:50px;
  border:0px;
  margin:0 auto;
  padding:0px;
}

BUTTON.zahlArt .text {
  display:block;
  color:white;
  white-space:nowrap;
}


/***************************************************************************
* Steuerelement: Button (Vor)laden
***************************************************************************/

BUTTON.laden:hover,
BUTTON.laden:focus,
BUTTON.laden[disabled],
BUTTON.laden {
  background: white; 
  color:black;
  font-family: sans-serif;
  font-weight:bold; 
  border: 1px solid white;
}

BUTTON.laden DIV {
  position:relative;
}

BUTTON.laden DIV DIV.text {
  position:relative;
  visibility: hidden;
}

BUTTON.laden DIV DIV.preload {
  position:absolute;
  width:100%;
  height:100%;
  left:0; top:0; bottom:0; top:0;
  background-image: url(../icons/preload.svg);
  background-repeat:no-repeat;
  background-size: 100%;
}


TEXTAREA[readonly],
INPUT[readonly], 
SELECT[readonly] {
  border:1px solid gray;
}

/***************************************************************************
* Steuerelement: Radio
***************************************************************************/

INPUT[type=radio] {
  display:none;
}

INPUT[type=radio] + LABEL
{
  display:inline;
  vertical-align: middle;

  background-image: url(../icons/radio.svg);
  background-repeat:no-repeat;
  background-position: left;
  background-size:contain;
  height: 16px;
  width: 16px;
  padding: 0;
  padding-left:20px;
  line-height: 20px;
  vertical-align: middle;

  white-space:nowrap;
}

INPUT[type=radio]:checked + LABEL
{
  background-image: url(../icons/radio_checked.svg);
}

INPUT[type=radio]:focus + LABEL
{
  color:yellow;
}

INPUT[type=radio] + LABEL:focus
{
  color:yellow;
}


/***************************************************************************
* Steuerelement: Checkbox
***************************************************************************/

INPUT[type=checkbox] {
  display:none;
}

INPUT[type=checkbox] + LABEL {
  display:inline-block;
  vertical-align: middle;

  background-image: url(../icons/checkbox.svg);
  background-repeat:no-repeat;
  background-position: left;
  background-size:contain;
  height: 16px;
  width: auto;
  padding: 0px;
  padding-left:22px;
  vertical-align: middle;	

  margin-left: -3px; /* siehe background-image */
  white-space:nowrap;
}


INPUT[type=checkbox]:checked + LABEL {
  background-image: url(../icons/checkbox_checked.svg);	
}

/* CheckBox - geändert */
INPUT[type=checkbox][geaendert=true] + LABEL,
INPUT[type=checkbox][geaendert=true]:focus + LABEL {
  background-image: url(../icons/checkbox_geandert.svg);
}

INPUT[type=checkbox][geaendert=true]:checked + LABEL,
INPUT[type=checkbox][geaendert=true]:focus:checked + LABEL {
  background-image: url(../icons/checkbox_checked_geandert.svg);
}

/***************************************************************************
* Steuerelement: Select
***************************************************************************/

SELECT {
  display:block;
  border: 1px solid white;
  border-radius: 3px;

  background-color:rgba(255, 255, 255, .08);	

  background-image: url(../icons/pfeil_unten_weiss.svg);
  background-repeat: no-repeat;
  background-position: right;
  background-size: 12px 12px;
  background-origin: content-box;

  padding:1px;
  margin:0px;
  padding-left:2px;
  padding-right:3px;
  color:white;
  width:100%;
  min-height:23px;
  font-family: monospace;
  font-size:12px;	

  -webkit-appearance: none;
  outline:0;
}

SELECT[size],
SELECT[multiple] {
  background-image: none;
}

SELECT[disabled] {
  background-image: none;
  border: 1px solid lightgray;
}


SELECT:focus {
  border: 1px solid yellow;
  color:white;
}

SELECT option { 
  padding: 0px;
  margin:0px;
  background:#EEEEEE;
  color: black;
  padding-left:3px;
  padding-right:3px;
}
SELECT option[selected] { 
  font-weight:bold;
}
SELECT option:nth-child(even) { 
  background-color:#DDDDDD; 
}

SELECT + .inputErrorTooltip {
  display:none;
  visibility:collapse;
}

SELECT:focus + .inputErrorTooltip {
  display:none;
  visibility:collapse;
}

SELECT:focus:hover + .inputErrorTooltip {
  display:none;
  visibility:collapse;
}

SELECT:hover + .inputErrorTooltip
{
  display:block;
  visibility: visible;

  z-index: 10;
  position:absolute;
  background: #990000;
  margin: 0 auto;
  margin-top:10px;
  border:1px solid #FFFF00;
  border-radius:4px;
  box-shadow: 5px 5px 8px #FFFF00;
  padding:5px;
  color:yellow;	
  max-width:300px;
}

SELECT + .inputErrorTooltip .pointer {
  z-index:20;
  position:absolute;
  left:30px;
  top:-15px;
  background-image: url(../icons/tooltip_error_pointer_oben.svg);
  background-position:center;
  background-size: contain;
  background-repeat: no-repeat;
  background-clip: content-box;
  width: 20px;
  height:20px;	
  padding-bottom: 5px;	
}

SELECT + .inputErrorTooltip .pointer + SPAN {
  color:yellow;
  word-wrap: break-word;
}


SELECT.transparentBorder {
  border: 1px solid transparent;
} 

/***************************************************************************
* Steuerelement: Select multible (listbox)
***************************************************************************/

SELECT[multible] {
  padding:0px;
  margin:0px;
  background: none; /* IE: Image geht nicht weg ? */
  background-image: url();
}

SELECT[multiple] OPTION {
  padding:2px;
  margin:0px;
  color:white;
  background-color: rgba(128,128,128,0.3);
}

SELECT[multible] option:nth-child(even) { 
  padding:2px;
  margin:0px;
  color:white;
  background-color: rgba(128,128,128,0.5);
}

/***************************************************************************
* Steuerelement: Select innerhalb von TH
***************************************************************************/

TH SELECT {
  display:block;
  border: 1px solid gray;

  background-color:rgba(33, 33, 33, .08);	

  background-image: url(../icons/pfeil_unten_schwarz.svg);
  background-repeat: no-repeat;
  background-position: right;
  background-size: 12px 12px;
  background-origin: content-box;

  padding:1px;
  margin:0px;
  padding-left:0px;
  padding-right:3px;
  color:black;
  width:100%;
  min-height:23px;
  font-family: monospace;
  font-size:12px;	

  -webkit-appearance: none;
  outline:0;
}

TH SELECT:focus {
  border: 1px solid red;
  color:black;
}

TH SELECT option { 
  padding: 0px;
  margin:0px;
  background:#EEEEEE;
  color: black;
}
TH SELECT option[selected] { 
  font-weight:bold;
}
TH SELECT option:nth-child(even) { 
  background-color:#DDDDDD; 
}

TH SELECT + .inputErrorTooltip {
  display:none;
  visibility:collapse;
}

TH SELECT:focus + .inputErrorTooltip {
  display:none;
  visibility:collapse;
}

TH SELECT:focus:hover + .inputErrorTooltip {
  display:none;
  visibility:collapse;
}

TH SELECT:hover + .inputErrorTooltip
{
  display:block;
  visibility: visible;

  z-index: 10;
  position:absolute;
  background: #990000;
  margin: 0 auto;
  margin-top:10px;
  border:1px solid #FFFF00;
  border-radius:4px;
  box-shadow: 5px 5px 8px #FFFF00;
  padding:5px;
  color:yellow;	
  max-width:300px;
}

TH SELECT + .inputErrorTooltip .pointer {
  z-index:20;
  position:absolute;
  left:30px;
  top:-15px;
  background-image: url(../icons/tooltip_error_pointer_oben.svg);
  background-position:center;
  background-size: contain;
  background-repeat: no-repeat;
  background-clip: content-box;
  width: 20px;
  height:20px;	
  padding-bottom: 5px;	
}

TH SELECT + .inputErrorTooltip .pointer + SPAN {
  color:yellow;
}

/***************************************************************************
* Steuerelement: Input Text
***************************************************************************/
INPUT[type=password],
INPUT[type=number],
INPUT[type=text] {
  display:block;
  border: 1px solid white;
  border-radius: 3px;

  background-color:rgba(255, 255, 255, .08);	

  padding:1px;
  padding-left:3px;
  padding-right:3px;
  color:white;
  width:100%;

  min-height:23px;

  font-family: monospace;
  font-size:12px;	

  -webkit-user-select: text;
  -khtml-user-select: text;
  -moz-user-select: text;
  -o-user-select: text;
  -ms-user-select: text;
  user-select: text;	

  outline: 0;

  cursor: text;
}

INPUT[disabled] {
  border: 1px solid lightgray;
}

/* INPUT geaendert */
TEXTAREA[geaendert=true],
TEXTAREA[geaendert=true]:focus,
INPUT[type=text][geaendert=true],
INPUT[type=text][geaendert=true]:focus,
INPUT[type=password][geaendert=true],
INPUT[type=password][geaendert=true]:focus,
INPUT[type=number][geaendert=true],
INPUT[type=number][geaendert=true]:focus,
SELECT[geaendert=true],
SELECT[geaendert=true]:focus
{
  border: 1px solid lightskyblue;
}

TH INPUT[type=password],
TH INPUT[type=number],
TH INPUT[type=text] {
  display:block;

  border: 1px solid gray;
  background-color:rgba(33, 33, 33, .08);		
  color:black;

  font-family: monospace;
  font-size:14px;	


  padding:1px;
  padding-left:3px;
  padding-right:3px;
  width:100%;
  min-height:23px;

  -webkit-user-select: text;
  -khtml-user-select: text;
  -moz-user-select: text;
  -o-user-select: text;
  -ms-user-select: text;
  user-select: text;	
  outline: 0;
  cursor: text;
}


INPUT[type=password]:focus,
INPUT[type=number]:focus,
INPUT[type=text]:focus {
  border: 1px solid yellow;
}


TH INPUT[type=password]:focus,
TH INPUT[type=number]:focus,
TH INPUT[type=text]:focus {
  border: 1px solid red;
}

INPUT[type=password].neuBorder,
INPUT[type=number].neuBorder,
INPUT[type=text].neuBorder {
  border: 1px solid yellowgreen;
}

INPUT[type=password].transparentBorder,
INPUT[type=number].transparentBorder,
INPUT[type=text].transparentBorder {
  border: 1px solid transparent;
}

INPUT[type=password]+ .inputErrorTooltip,
INPUT[type=number] + .inputErrorTooltip,
INPUT[type=text] + .inputErrorTooltip {
  display:none;
  visibility:collapse;
  position:absolute;  
  z-index: 10;
  background: #990000;
  margin: 0 auto;
  margin-top:10px;
  display:block;
  border:1px solid #FFFF00;
  border-radius:4px;
  box-shadow: 5px 5px 8px #FFFF00;
  padding:5px;
  color:yellow;	
  max-width:300px;
  opacity:0;
  background:transparent;
}

/*
Deaktiviert ErrorPopUp wenn focus
INPUT[type=number]:focus:hover + .inputErrorTooltip,
INPUT[type=text]:focus:hover + .inputErrorTooltip {
  display:none;
  visibility:collapse;
}
*/

INPUT[type=password]:focus + .inputErrorTooltip,
INPUT[type=number]:focus + .inputErrorTooltip,
INPUT[type=text]:focus + .inputErrorTooltip,
INPUT[type=password]:hover + .inputErrorTooltip,
INPUT[type=number]:hover + .inputErrorTooltip,
INPUT[type=text]:hover + .inputErrorTooltip {
  display:block;
  visibility: visible;
  background:#990000;
  opacity:1;		
  transition: opacity 1s;
}

INPUT[type=password] + .inputErrorTooltip .pointer,
INPUT[type=number] + .inputErrorTooltip .pointer,
INPUT[type=text] + .inputErrorTooltip .pointer {
  z-index:20;
  position:absolute;
  left:30px;
  top:-15px;
  background-image: url(../icons/tooltip_error_pointer_oben.svg);
  background-position:center;
  background-size: contain;
  background-repeat: no-repeat;
  background-clip: content-box;
  width: 20px;
  height:20px;	
  padding-bottom: 5px;	
}

INPUT[type=password] + .inputErrorTooltip .pointer + SPAN,
INPUT[type=number] + .inputErrorTooltip .pointer + SPAN,
INPUT[type=text] + .inputErrorTooltip .pointer + SPAN {
  color:yellow;
  word-wrap: break-word;
}

/* DateTime Picker */

INPUT[type=text].datePicker {
  background-image: url(../icons/calendar.svg);
  background-position:right;
  background-size: contain;
  background-repeat: no-repeat;
  background-origin: content-box;
}

INPUT[type=text]:focus.datePicker {
  border: 1px solid yellow;
  color:white;
}

INPUT.positivInteger,
INPUT.positivFloat,
INPUT.positivGeld {
  text-align: left;
}


/***************************************************************************
* Steuerelement: TextArea
***************************************************************************/

TEXTAREA {
  display:block;
  border: 1px solid white;
  border-radius: 3px;

  background-color:rgba(255, 255, 255, .08);	

  padding:1px;
  padding-left:3px;
  padding-right:3px;
  color:white;
  width:100%;

  padding:1px;
  font-family: monospace;
  font-size:12px;	

  -webkit-user-select: text;
  -khtml-user-select: text;
  -moz-user-select: text;
  -o-user-select: text;
  -ms-user-select: text;
  user-select: text;

  outline:0;
  resize: none;
  cursor: text;
}

TEXTAREA:focus {
  border: 1px solid yellow;
  color:white;
}

TEXTAREA + .inputErrorTooltip {
  display:none;
  visibility:collapse;
  position:absolute;  
  z-index: 10;
  background: #990000;
  margin: 0 auto;
  margin-top:10px;
  display:block;
  border:1px solid #FFFF00;
  border-radius:4px;
  box-shadow: 5px 5px 8px #FFFF00;
  padding:5px;
  color:yellow;	
  max-width:300px;
  opacity:0;
  background:transparent;
}

TEXTAREA + .inputErrorTooltip  .pointer + SPAN {
  color: yellow;
}

/*
TEXTAREA:focus:hover + .inputErrorTooltip {
  display:none;
  visibility:collapse;
}*/

TEXTAREA:focus + .inputErrorTooltip,
TEXTAREA:hover + .inputErrorTooltip {
  display:block;
  visibility: visible;
  background:#990000;
  opacity:1;		
  transition: opacity 1s;
}

TEXTAREA + .inputErrorTooltip .pointer {
  z-index:20;
  position:absolute;
  left:30px;
  top:-15px;
  background-image: url(../icons/tooltip_error_pointer_oben.svg);
  background-position:center;
  background-size: contain;
  background-repeat: no-repeat;
  background-clip: content-box;
  width: 20px;
  height:20px;	
  padding-bottom: 5px;	
}

/***************************************************************************
* Steuerelement: ContextMenu
***************************************************************************/


#CONTEXT_MENU {
  position:absolute;
  background:#333333;
  border:1px solid white;
  padding:1px;
  width:auto;
  height:auto;
  visibility:hidden;
  min-width:150px;
}

#CONTEXT_MENU BUTTON {
  display:block;
  width:100%;
  padding:1px;
  margin:1px;
  border:0px;
  left:0px; right:0px;
  background:transparent;
  color:white;
  text-align: left;
  
}

#CONTEXT_MENU BUTTON:hover {
  border:0px;
  background:#666666;
  color:white;
}


/***************************************************************************
* Steuerelement: Tree (DatabaseTreeRenderer)
***************************************************************************/

/** START: Tree jQuery Resizeable */

.formTree {
  width:100%; 
  height:100%; 
  margin:0px; 
  margin-top:-1px; 
  overflow:auto;
  
  width:220px;
  padding:2px;
}

/* Tree Region Head */

.treeRegionHead {
  display:block; 
  width:100%; 
  white-space: nowrap; 
  overflow:hidden;

  background:linear-gradient(#666666, #444444);  
  text-shadow: 0px 0px 8px #000000;
  height:22px;
  line-height:22px;
  color:white;
  font-weight:bold;	
  margin:0px;
  padding-left:5px;
  padding-right:5px;


}

.treeRegionHead .text {
  float:left; 
  padding-left:5px;
  padding-right:5px;
}

.treeRegionHead .iconButton {
  float:right; 
  color:white; 
  text-align:center; 
  text-decoration: none;
  padding-left:2px;
  padding-right:2px;
  font-weight:normal; 
  width:auto; 
  height:22px;
  min-width:22px;

  /*background-color: #404040;*/
  background:linear-gradient(#707070, #505050); 

  background-repeat: no-repeat;
  background-position: center;
  background-size: 70% 70%;	
}

.treeRegionHead .iconButton.links {
  float:left; 
  border-left:0;
}

.treeRegionHead .iconButton:hover {
  background-color:#777777;
  transition: background-color 0.4s ease-out;	
}

/** ENDE: Tree jQuery Resizeable */

TREE {
  display:block;
  width:100%;
  
  height:100%; 
  padding:0; 
  margin:0; 
  /*overflow:hidden; */
}


.istOnline {
  color:green;
}
TREE .istOnline {
  color: lightgreen;
}


.nichtAktiv,
TREE .nichtAktiv {
  font-style:italic;
  color:#999999;
}


.nichtOnline {
 color: red;
}

TREE .nichtOnline {
  color:lightcoral;
}




TREE .folderIcon {
  display:inline-block;
  width:12px;
  height:12px;	
  border-radius: 0;
  background-color: transparent;
  background-image: url(./../icons/pfeil_rechts_weiss.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;

  vertical-align: middle;

  margin-right:3px;
}

TREE .folderIcon.open {
  background-image: url(./../icons/pfeil_unten_weiss.svg);
}


TREE li {
  display:block;
  width:100%;
  list-style: none;
  white-space: nowrap;
  line-height: 20px;
  margin:0;
  padding:0;
}


TREE ol {
  display:block;
  width:100%;
  margin:0px;
  padding:0px;
  padding-left:16px;
}
TREE > ol{
  padding:0px;
}

TREE li > DIV.text + input[type=checkbox] {
  display:none;
  opacity: 0;             
}                

TREE li > DIV.text {
  cursor: pointer;     
  display:inline-block;
  padding-left:4px;
  padding-right:4px;
  border-radius:0px;
}                        


TREE li DIV.text:hover {
  background:#666666;
  border-radius: 3px;

  -webkit-transition: background 0.4s ease-out;
  -moz-transition: background 0.4s ease-out;
  -o-transition: background 0.4s ease-out;
  -ms-transition: background 0.4s ease-out;
  transition: background 0.4s ease-out;
} 


TREE li > DIV.text.dragOver {
  border-radius: 3px;
}

TREE li > DIV.text[selected] {
  background:#094b89;
  border-radius: 3px;
}    

TREE li > DIV.text[selected].dragOver {
  background:lightcoral;
  color:white;
}  

TREE li > DIV.text + input[type=checkbox] + ol > li
{
  display: none;         
}

TREE li > DIV.text + input[type=checkbox]:checked + ol > li
{
  display: block;        
}

/***************************************************************************
* TREE Spezial farben
***************************************************************************/

TREE .nichtAktiverMitarbeiter {
  color: lightgray;
  font-style:italic;
  cursor:pointer;
}

/***************************************************************************
* Steuerelement: TabControl - Standard
***************************************************************************/

.TabControl {
  width:100%;
  height:100%;
  border-spacing: 0;
  empty-cells:show;
  min-height:100%; 
}


.TabScrollContainer {
  display:block;
  width:100%;
  height:100%;  
  overflow:auto;
}

.TabItemContainer {
  width:100%;
  height:100%;
  background:#444444;
  min-height:100%; 

  background-image: url(../images/starschnitt_bg_grau.svg);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  background-origin:content-box;
}

.TabItemHeaderContainer {
  width:100%;
  height:1%;
}

.TabItem:focus,
.TabItem:active,
.TabItem {
  display:inline;
  padding:2px;
  padding-left:5px;
  padding-right:5px;
  border:0;
  border-radius:0px;
  border-right: 1px solid #999999;
  height:22px;
  float:left;
  
  background:linear-gradient(#555555, #333333);  
  background-repeat: no-repeat;
  background-position: center;
  text-shadow: 0px 0px 8px #000000;
  
  color:lightgray;
  text-decoration: none;
  cursor: pointer;
  outline:0;
}

.TabItem:hover {
  text-shadow: 0px 0px 6px #EEEEEE;
  transition: text-shadow 0.4s ease-out;	  
  
  color:white;
}

.TabItem.aktiv:hover {
  background:linear-gradient(#666666, #444444);  
  transition: background 0.4s ease-out;
  color:white;
}

.TabItem.aktiv {
  background:linear-gradient(#666666, #444444);  
  text-shadow: 0px 0px 8px #000000;
  color:white;
}


.TabItem.dragOver {
  background:lightcoral;
  color:black;
}

/***************************************************************************
* Spezial Dialoge und deren TabControls
***************************************************************************/

BODY.kundeDialog,
BODY.mitarbeiterDialog,
BODY.rechnungDialog,
BODY.produktDialog {
  background: #094b89;
  border:0px;
  color:white;
  overflow: hidden;
}

BODY.mitarbeiterDialog .buttonProduktArtAuswahl,
BODY.rechnungDialog .buttonProduktArtAuswahl,
BODY.produktDialog .buttonProduktArtAuswahl {
  width:115px;
  height:115px;
  border: 1px solid white;
  background: #094b89;
  color:yellow;
  float:left;
  margin:5px;
  margin-right:0px;
}

DIV.kundeDialog,
DIV.mitarbeiterDialog,
DIV.rechnungDialog,
DIV.produktDialog {
  background: #094b89;
  border:5px solid white;
  border-radius: 5px;
  color:white;
  width:10px;
  height:10px;
}

DIV.kundeDialog .title,
DIV.mitarbeiterDialog .title,
DIV.rechnungDialog .title,
DIV.produktDialog .title {
  display:block;
  font-weight:bold;
  color:white;

  background:linear-gradient(#04447f, #001d38); 
  text-shadow: 0px 0px 6px #000000;    
  padding:4px;
}

DIV.kundeDialog .close,
DIV.mitarbeiterDialog .close,
DIV.rechnungDialog .close,
DIV.produktDialog .close {
  background-image: url(../icons/loeschen_weiss.svg);
  background-position:center;
  background-size: 80% 80%;
  background-repeat: no-repeat;
  background-clip: content-box;
  width: 18px;
  height:18px;
  cursor: pointer;
}



BODY.kundeDialog .TabControl,
BODY.mitarbeiterDialog .TabControl,
BODY.rechnungDialog .TabControl,
BODY.produktDialog .TabControl {
  width:100%;
  height:100%;
  border-spacing: 0;
  empty-cells:show;
}

BODY.kundeDialog .TabItemContainer,
BODY.mitarbeiterDialog .TabItemContainer,
BODY.rechnungDialog .TabItemContainer,
BODY.produktDialog .TabItemContainer {
  width:100%;
  height:100%;
  background:#063867;
  background-image: url(../images/starschnitt_bg_blau.svg);	
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  background-origin:content-box;
}

BODY.kundeDialog .TabItemHeaderContainer,
BODY.mitarbeiterDialog .TabItemHeaderContainer,
BODY.rechnungDialog .TabItemHeaderContainer,
BODY.produktDialog .TabItemHeaderContainer {
  width:100%;
  height:1%;
}

BODY.kundeDialog .TabItem:focus,
BODY.kundeDialog .TabItem:active,
BODY.kundeDialog .TabItem,
BODY.mitarbeiterDialog .TabItem:focus,
BODY.mitarbeiterDialog .TabItem:active,
BODY.mitarbeiterDialog .TabItem,
BODY.rechnungDialog .TabItem:focus,
BODY.rechnungDialog .TabItem:active,
BODY.rechnungDialog .TabItem,
BODY.produktDialog .TabItem:focus,
BODY.produktDialog .TabItem:active,
BODY.produktDialog .TabItem {
  display:inline;
  padding:2px;
  padding-left:5px;
  padding-right:5px;
  border:0;
  border-radius:0px;
  border-right: 1px solid #999999;	
  height:22px;
  float:left;
  background:linear-gradient(#003464, #002547);
  text-shadow: 0px 0px 8px #000000;
  color:white;
  text-decoration: none;
  cursor: pointer;
}

BODY.kundeDialog .TabItem:hover,
BODY.mitarbeiterDialog .TabItem:hover,
BODY.rechnungDialog .TabItem:hover,
BODY.produktDialog .TabItem:hover {
  text-shadow: 0px 0px 6px #EEEEEE;
  transition: text-shadow 0.4s ease-out;	 
}

BODY.kundeDialog .TabItem.aktiv,
BODY.mitarbeiterDialog .TabItem.aktiv,
BODY.rechnungDialog .TabItem.aktiv,
BODY.produktDialog .TabItem.aktiv {
  background:linear-gradient(#0C5CA7, #063867);
}

BODY.kundeDialog .TabItem.aktiv:hover,
BODY.mitarbeiterDialog .TabItem.aktiv:hover,
BODY.rechnungDialog .TabItem.aktiv:hover,
BODY.produktDialog .TabItem.aktiv:hover {
  background:linear-gradient(#0C5CA7, #063867);
}

/***************************************************************************
* Toolbar
***************************************************************************/

.toolBar {
  display:block;
  background: rgba(250,250,250,0.2);
  overflow: hidden;
  width:100%;
}


.toolBar BUTTON.icon {
	background-color:rgba(255,255,255,0.0);
	color:white;
	border: 1px solid transparent;
	padding: 2px;
	padding-left: 8pt;
	padding-right: 8pt;
	cursor:pointer;  
  border-radius: 3px;
	min-height: 22px;
	outline:none;
  
  transition: background 0.4s ease-in-out;
}


.toolBar BUTTON.icon:hover {
	background-color:rgba(255,255,255,0.4);
}


.toolBar BUTTON.icon:focus {
	text-decoration: underline;
}

.toolBar BUTTON.icon {
	padding:0; 
	margin:0; 
	width:23px;
	height:23px;
  padding:2px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
  
	text-align: center;
  vertical-align: middle; 
}


/***************************************************************************
* ToolTip: Info 
***************************************************************************/

a.infoTooltip {
  margin-top:1px;
  display:inline-block;
  background-image: url(../icons/tooltip_info_weiss.svg);
  background-position:center;
  background-size: contain;
  background-repeat: no-repeat;
  width: 1em;
  height:1em;
  vertical-align: top;
  outline:none;	
}


a.infoTooltip.rechts:hover span,
a.infoTooltip.links:hover span,
a.infoTooltip.oben:hover span,
a.infoTooltip.unten:hover span
{
  display:inline; 
  position:absolute; 
  color:#111111;
  border:1px solid #DCA000; 
  background:#fffAF0;
  opacity:1;		
  transition: opacity 1s;	
}

a.infoTooltip.rechts .pointer {
  z-index:20;
  position:absolute;
  top:25px;
  left:-15px;	
  border:0;	
  background-image: url(../icons/tooltip_info_pointer_links.svg);
  background-position:center;
  background-size: contain;
  background-repeat: no-repeat;
  background-clip: content-box;
  width: 20px;
  height:20px;	
  padding-right: 5px;
}

a.infoTooltip.links .pointer {
  z-index:20;
  position:absolute;
  top:25px;
  right:-15px;	
  border:0;	
  background-image: url(../icons/tooltip_info_pointer_rechts.svg);
  background-position:center;
  background-size: contain;
  background-repeat: no-repeat;
  background-clip: content-box;
  width: 20px;
  height:20px;	
  padding-left: 5px;
}
a.infoTooltip.oben .pointer {
  z-index:20;position:absolute;bottom:-15px;border:0;left:145px;	
  background-image: url(../icons/tooltip_info_pointer_unten.svg);
  background-position:center;
  background-size: contain;
  background-repeat: no-repeat;
  background-clip: content-box;
  width: 20px;
  height:20px;	
  padding-top: 5px;
}
a.infoTooltip.unten .pointer {
  z-index:20;position:absolute;top:-14px;border:0;left:146px;	
  background-image: url(../icons/tooltip_info_pointer_oben.svg);
  background-position:center;
  background-size: contain;
  background-repeat: no-repeat;
  background-clip: content-box;
  width: 20px;
  height:20px;	
  padding-bottom: 5px;	
}

a.infoTooltip H1 {
  font-size:1em;
  font-weight:bold;
  padding:0;
  margin:0;
}

a.infoTooltip span {
  display:none; 
  position:absolute; 
  color:#111;
  border:1px solid #DCA000; 
  background:#fffAF0;	

  padding:10px;
  font-size:1em;
  min-height: 70px;

  opacity: 0;
  transition: opacity 1s;	
  white-space: normal;
}



a.infoTooltip.rechts span {
  display:none; 
  z-index:10;
  margin-top:-30px; 
  margin-left:28px;
  width:300px; 
  line-height:16px;
}
a.infoTooltip.links span {
  display:none; 
  z-index:10;
  margin-top:-30px; 
  margin-left:-318px;
  width:300px; 
  line-height:16px;
  opacity:0;
}
a.infoTooltip.oben span {
  display:none; 
  z-index:10;
  margin-top:-100px; 
  margin-left:-150px;
  width:300px; 
  height:100px;
  line-height:16px;
  opacity:0;
}

a.infoTooltip.unten span {
  display:none; 
  z-index:10;
  margin-top:30px; 
  margin-left:-150px;
  width:300px; 
  line-height:16px;
  opacity:0;
}

a.infoTooltip span
{
  opacity:0;
  border-radius:4px;
  box-shadow: 5px 5px 8px #CCCCCC;
}

/***************************************************************************
* ToolTip: Error 
***************************************************************************/

a.errorTooltip {
  margin-top:1px;
  display:inline-block;
  background-image: url(../icons/tooltip_error_rot.svg);
  background-position:center;
  background-size: contain;
  background-repeat: no-repeat;
  width: 1em;
  height:1em;
  vertical-align: top;
  outline:none;
}

a.errorTooltip.rechts:hover span,
a.errorTooltip.links:hover span,
a.errorTooltip.oben:hover span,
a.errorTooltip.unten:hover span
{
  display:inline; 
  position:absolute; 
  color:yellow;
  border:1px solid yellow; 
  background: #990000;
}

a.errorTooltip.rechts .pointer {
  z-index:20;
  position:absolute;
  top:25px;
  left:-15px;	
  border:0;	
  background-image: url(../icons/tooltip_error_pointer_links.svg);
  background-position:center;
  background-size: contain;
  background-repeat: no-repeat;
  background-clip: content-box;
  width: 20px;
  height:20px;	
  padding-right: 5px;
}

a.errorTooltip.links .pointer {
  z-index:20;
  position:absolute;
  top:25px;
  right:-15px;	
  border:0;	
  background-image: url(../icons/tooltip_error_pointer_rechts.svg);
  background-position:center;
  background-size: contain;
  background-repeat: no-repeat;
  background-clip: content-box;
  width: 20px;
  height:20px;	
  padding-left: 5px;
}
a.errorTooltip.oben .pointer {
  z-index:20;position:absolute;bottom:-15px;border:0;left:145px;	
  background-image: url(../icons/tooltip_error_pointer_unten.svg);
  background-position:center;
  background-size: contain;
  background-repeat: no-repeat;
  background-clip: content-box;
  width: 20px;
  height:20px;	
  padding-top: 5px;
}
a.errorTooltip.unten .pointer {
  z-index:20;position:absolute;top:-14px;border:0;left:146px;	
  background-image: url(../icons/tooltip_error_pointer_oben.svg);
  background-position:center;
  background-size: contain;
  background-repeat: no-repeat;
  background-clip: content-box;
  width: 20px;
  height:20px;	
  padding-bottom: 5px;	
}

a.errorTooltip H1 {
  font-size:1em;
  font-weight:bold;
  padding:0;
  margin:0;
}

a.errorTooltip span {
  padding:10px;
  font-size:1em;
  min-height: 70px;
}


a.errorTooltip.rechts span {
  display:none; 
  z-index:10;
  margin-top:-30px; 
  margin-left:28px;
  width:300px; 
  line-height:16px;
}

a.errorTooltip.rechts span {
  display:none; 
  z-index:10;
  margin-top:-30px; 
  margin-left:28px;
  width:300px; 
  line-height:16px;
}
a.errorTooltip.links span {
  display:none; 
  z-index:10;
  margin-top:-30px; 
  margin-left:-318px;
  width:300px; 
  line-height:16px;
}
a.errorTooltip.oben span {
  display:none; 
  z-index:10;
  margin-top:-100px; 
  margin-left:-150px;
  width:300px; 
  height:100px;
  line-height:16px;
}

a.errorTooltip.unten span {
  display:none; 
  z-index:10;
  margin-top:30px; 
  margin-left:-150px;
  width:300px; 
  line-height:16px;
}

a.errorTooltip span
{
  border-radius:4px;
  box-shadow: 5px 5px 8px #FFFF00;
}

/***************************************************************************
* Icons
***************************************************************************/

.iconZahlArt_bar {
  background-image: url(../icons/zahlart_bar.svg);
}
.iconZahlArt_ec_karte {
  background-image: url(../icons/zahlart_ec_karte.svg);
}
.iconZahlArt_scheck {
  background-image: url(../icons/zahlart_scheck.svg);
}

.iconAuge {
  background-image: url(../icons/auge_schwarz.svg);	
}

.iconStornieren {
  background-image: url(../icons/stornieren_schwarz.svg);	
}

.iconPasswort {
  background-image: url(../icons/schloss_geoeffnet_schwarz.svg);	
}

.iconHilfe {
  background-image: url(../icons/hilfe_weiss.svg);
}

.iconFensterSchliessen {
  background-image: url(../icons/loeschen_weiss.svg);
}

.iconBearbeiten {
  background-image: url(../icons/bearbeiten_schwarz.svg);
}
.iconBearbeitenWeiss {
  background-image: url(../icons/bearbeiten_weiss.svg);
}

.iconSuchen {
  background-image: url(../icons/suchen_schwarz.svg);
}

.iconAbmelden {
  background-image: url(../icons/abmelden_weiss.svg);
}

.iconBestaetigen {
  background-image: url(../icons/bestaetigen_schwarz.svg);
}
.iconKundeAnmelden {
  background-image: url(../icons/kunde_anmelden_schwarz.svg);
}
.iconLoeschen {
  background-image: url(../icons/loeschen_schwarz.svg);
}

.iconAbbrechen {
  background-image: url(../icons/abbrechen_schwarz.svg);
}

.iconRechnung {
  background-image: url(../icons/rechnung_schwarz.svg);
}

.iconZurueck {
  background-image: url(../icons/zurueck_schwarz.svg);
}
.iconZurueck.weiss {
  background-image: url(../icons/zurueck_weiss.svg);	
}

.iconWeiter {
  background-image: url(../icons/weiter_schwarz.svg);
}
.iconWeiter.weiss {
  background-image: url(../icons/weiter_weiss.svg);	
}

.iconKunde {
  background-image: url(../icons/kunde_schwarz.svg);
}

.iconKunde.weiss {
  background-image: url(../icons/kunde_weiss.svg);	
}

.iconPfeilLinks {
  background-image: url(../icons/pfeil_links_schwarz.svg);
}
.iconPfeilRechts {
  background-image: url(../icons/pfeil_rechts_schwarz.svg);
}


.iconPfeilLinksWeiss {
	background-image: url(../icons/pfeil_links_weiss.svg);
}
.iconPfeilRechtsWeiss {
	background-image: url(../icons/pfeil_rechts_weiss.svg);
}


.iconPfeilUnten {
  background-image: url(../icons/pfeil_unten_schwarz.svg);
}
.iconPfeilOben {
  background-image: url(../icons/pfeil_oben_schwarz.svg);
}
.iconSchliessen {
  background-image: url(../icons/schliessen_schwarz.svg);
}

/***************************************************************************
* Heatmap Rot Grün Gelb - 9 Wertig
***************************************************************************/

.Heatmap.RYG .q0-9{fill:rgb(216,49,38)}
.Heatmap.RYG .q1-9{fill:rgb(245,108,66)}
.Heatmap.RYG .q2-9{fill:rgb(252,175,96)}
.Heatmap.RYG .q3-9{fill:rgb(253,225,138)}
.Heatmap.RYG .q4-9{fill:rgb(255,254,192)}
.Heatmap.RYG .q5-9{fill:rgb(216,238,138)}
.Heatmap.RYG .q6-9{fill:rgb(167,218,107)}
.Heatmap.RYG .q7-9{fill:rgb(103,187,98)}
.Heatmap.RYG .q8-9{fill:rgb(27,154,81)}

/***************************************************************************
* MessageBox: Standard Layout (JS)
***************************************************************************/

#MESSAGE_BOX {	background: white;	border:5px solid white;	border-radius:8px;	color:white;}
#MESSAGE_BOX .title {	display:block; font-weight:bold;	color:white;	background: #333333;	padding:5px;	padding-left:8px;	border-radius: 5px 5px 0 0;	}
#MESSAGE_BOX .buttons {	background:#666666;	border-radius: 0 0 5px 5px;}
#MESSAGE_BOX .buttons BUTTON {	background-color:white;	border: 1px solid white;	}
#MESSAGE_BOX .content {	background:#666666;	padding:5px;}
#MESSAGE_BOX .message {	padding:3px; white-space: pre-wrap;	-webkit-user-select: text;	-khtml-user-select: text;	-moz-user-select: text;	-o-user-select: text;	-ms-user-select: text;	user-select: text;		cursor: text;}
#MESSAGE_BOX .messageContainer {	border: 1px dotted transparent;	min-height:40px; 	max-height:200px; 	min-width:200px; 	max-width:500px;}
#MESSAGE_BOX .messageContainer:hover {	border: 1px dotted yellow;}
#MESSAGE_BOX .detailsButton {	color:white;	background-color: #555555;	background-image: url(../icons/pfeil_rechts_weiss.svg);	background-repeat: no-repeat;	background-position: left center;	background-size: 12px;	padding:1px;	padding-left:14px;	font-size:14px;	vertical-align:middle;	border: 1px solid transparent;	cursor: pointer;}
#MESSAGE_BOX .detailsButton:hover {	border: 1px dotted yellow;}
#MESSAGE_BOX .detailsButton.expanded {	background-image: url(../icons/pfeil_unten_weiss.svg);}
#MESSAGE_BOX .detailsButton.collapsed {	background-image: url(../icons/pfeil_rechts_weiss.svg);}
#MESSAGE_BOX .detailsContentContainer {	padding:3px;	background-color: #444444;	border: 1px dotted transparent;	min-height:40px; 	max-height:200px; }
#MESSAGE_BOX .detailsContentContainer:hover {	border: 1px dotted yellow;}
#MESSAGE_BOX .detailsContent {  color:white;	-webkit-user-select: text;	-khtml-user-select: text;	-moz-user-select: text;	-o-user-select: text;	-ms-user-select: text;	user-select: text;	/*white-space: pre-wrap;*/	cursor: text;}

/***************************************************************************
* MessageBox: Error (Genutzt bei Systemfehlern) (JS)
***************************************************************************/

#MESSAGE_BOX.error {	background:yellow;	border:5px solid yellow;	border-radius:8px;}
#MESSAGE_BOX.error .title {	display:block;	font-weight:bold;	color:white;	background:#330000;	padding:2px;	padding-left:8px;	border-radius: 5px 5px 0 0;	}
#MESSAGE_BOX.error .buttons {	background:#990000;	border-radius: 0 0 5px 5px;	}
#MESSAGE_BOX.error .buttons BUTTON {	background-color:yellow;	border: 1px solid yellow;}
#MESSAGE_BOX.error .content {	background:#990000;	padding:5px;}
#MESSAGE_BOX.error .message {	padding:3px; white-space: pre-wrap;	-webkit-user-select: text;	-khtml-user-select: text;	-moz-user-select: text;	-o-user-select: text;	-ms-user-select: text;	user-select: text;		cursor: text;}
#MESSAGE_BOX.error .messageContainer {	border: 1px dotted transparent;	width:440px;	/*		min-height:40px; 	max-height:200px; 	min-width:200px; 	max-width:500px;*/}
#MESSAGE_BOX.error .messageContainer:hover {	border: 1px dotted yellow;}
#MESSAGE_BOX.error .detailsButton {	color:white;	background-color: #770000;	background-image: url(../icons/pfeil_rechts_weiss.svg);	background-repeat: no-repeat;	background-position: left center;	background-size: 12px;	padding:1px;	padding-left:14px;	font-size:14px;	vertical-align:middle;	border: 1px solid transparent;	cursor: pointer;}
#MESSAGE_BOX.error .detailsButton:hover {	border: 1px dotted yellow;}
#MESSAGE_BOX.error .detailsButton.expanded {	background-image: url(../icons/pfeil_unten_weiss.svg);}
#MESSAGE_BOX.error .detailsButton.collapsed {	background-image: url(../icons/pfeil_rechts_weiss.svg);}
#MESSAGE_BOX.error .detailsContentContainer {	background-color: #660000;	border: 1px dotted transparent;}
#MESSAGE_BOX.error .detailsContentContainer:hover {border: 1px dotted yellow;}
#MESSAGE_BOX.error .detailsContent {	padding:3px;	-webkit-user-select: text;	-khtml-user-select: text;	-moz-user-select: text;	-o-user-select: text;	-ms-user-select: text;	user-select: text;	white-space: pre;	cursor: text;}

/***************************************************************************
* MessageBox: Fail Layout (Genutzt bei benutzer Fehlern) (JS)
***************************************************************************/

#MESSAGE_BOX.failure {	background:#FF5555;	border:5px solid #FF5555;	border-radius:8px;}
#MESSAGE_BOX.failure .title {	display:block;	font-weight:bold;	color:white;	background:#330000;	padding:2px;	padding-left:8px;	border-radius: 5px 5px 0 0;	}
#MESSAGE_BOX.failure .buttons {	background:#880000;	border-radius: 0 0 5px 5px;	}
#MESSAGE_BOX.failure .buttons BUTTON {	background-color:#FF5555;	border: 1px solid #FF5555;}
#MESSAGE_BOX.failure .content {	background:#880000;	padding:5px;}
#MESSAGE_BOX.failure .message {	padding:3px; white-space: pre-wrap;	-webkit-user-select: text;	-khtml-user-select: text;	-moz-user-select: text;	-o-user-select: text;	-ms-user-select: text;	user-select: text;		cursor: text;}
#MESSAGE_BOX.failure .messageContainer {	border: 1px dotted transparent;}
#MESSAGE_BOX.failure .messageContainer:hover {	border: 1px dotted yellow;}
#MESSAGE_BOX.failure .detailsButton {	color:white;	background-color: #770000;	background-image: url(../icons/pfeil_rechts_weiss.svg);	background-repeat: no-repeat;	background-position: left center;	background-size: 12px;	padding:1px;	padding-left:14px;	font-size:14px;	vertical-align:middle;	border: 1px solid transparent;	cursor: pointer;}
#MESSAGE_BOX.failure .detailsButton:hover {	border: 1px dotted yellow;}
#MESSAGE_BOX.failure .detailsButton.expanded {	background-image: url(../icons/pfeil_unten_weiss.svg);}
#MESSAGE_BOX.failure .detailsButton.collapsed {	background-image: url(../icons/pfeil_rechts_weiss.svg);}
#MESSAGE_BOX.failure .detailsContentContainer {	background-color: #660000;	border: 1px dotted transparent;}
#MESSAGE_BOX.failure .detailsContentContainer:hover {	border: 1px dotted yellow;}
#MESSAGE_BOX.failure .detailsContent {	padding:3px;	-webkit-user-select: text;	-khtml-user-select: text;	-moz-user-select: text;	-o-user-select: text;	-ms-user-select: text;	user-select: text;	/*white-space: pre;*/	cursor: text;}

/***************************************************************************
* MessageBox: Success Layout (Erfolsmeldungen) (JS)
***************************************************************************/

#MESSAGE_BOX.success {	background: #d0f62c;	border:5px solid #d0f62c;	border-radius:8px;}
#MESSAGE_BOX.success .title {	display:block;	font-weight:bold;	color:white;	background:#003300;	padding:2px;	padding-left:8px;	border-radius: 5px 5px 0 0;	}
#MESSAGE_BOX.success .buttons {	background:#009900;	border-radius: 0 0 5px 5px;	}
#MESSAGE_BOX.success .buttons BUTTON {	background-color:#d0f62c;	border: 1px solid #d0f62c;}
#MESSAGE_BOX.success .content {	background:#009900;	padding:5px;}
#MESSAGE_BOX.success .message {	padding:3px; white-space: pre-wrap;	-webkit-user-select: text;	-khtml-user-select: text;	-moz-user-select: text;	-o-user-select: text;	-ms-user-select: text;	user-select: text;		cursor: text;}
#MESSAGE_BOX.success .messageContainer {	border: 1px dotted transparent;}
#MESSAGE_BOX.success .messageContainer:hover {	border: 1px dotted yellow;}
#MESSAGE_BOX.success .detailsButton {	color:white;	background-color: #007700;	background-image: url(../icons/pfeil_rechts_weiss.svg);	background-repeat: no-repeat;	background-position: left center;	background-size: 12px;	padding:1px;	padding-left:14px;	font-size:14px;	vertical-align:middle;	border: 1px solid transparent;	cursor: pointer;}
#MESSAGE_BOX.success .detailsButton:hover {	border: 1px dotted yellow;}
#MESSAGE_BOX.success .detailsButton.expanded {	background-image: url(../icons/pfeil_unten_weiss.svg);}
#MESSAGE_BOX.success .detailsButton.collapsed {	background-image: url(../icons/pfeil_rechts_weiss.svg);}
#MESSAGE_BOX.success .detailsContentContainer {	background-color: #006600;	border: 1px dotted transparent;}
#MESSAGE_BOX.success .detailsContentContainer:hover {	border: 1px dotted yellow;}
#MESSAGE_BOX.success .detailsContent {	padding:3px;	-webkit-user-select: text;	-khtml-user-select: text;	-moz-user-select: text;	-o-user-select: text;	-ms-user-select: text;	user-select: text;	/*white-space: pre;*/	cursor: text;}

/***************************************************************************
* MessageBox: Warning Layout (Warnmeldungen) (JS)
***************************************************************************/

#MESSAGE_BOX.warning {	background: #ffc22d;	border:5px solid #ffc22d;	border-radius:8px;	color:white;}
#MESSAGE_BOX.warning .title {	display:block;	font-weight:bold;	color:white;	background: #873101;	padding:2px;	padding-left:8px;	border-radius: 5px 5px 0 0;}
#MESSAGE_BOX.warning .buttons {	background:#dd4400;	border-radius: 0 0 5px 5px;}
#MESSAGE_BOX.warning .buttons BUTTON {	background-color:#ffc22d;	border: 1px solid #ffc22d;	color:black;}
#MESSAGE_BOX.warning .content {	background:#dd4400;	padding:5px;}
#MESSAGE_BOX.warning .message {	padding:3px; white-space: pre-wrap;	-webkit-user-select: text;	-khtml-user-select: text;	-moz-user-select: text;	-o-user-select: text;	-ms-user-select: text;	user-select: text;		cursor: text;}
#MESSAGE_BOX.warning .messageContainer {	border: 1px dotted transparent;}
#MESSAGE_BOX.warning .messageContainer:hover {	border: 1px dotted yellow;}
#MESSAGE_BOX.warning .detailsButton {	color:white;	background-color: #bb6600;	background-image: url(../icons/pfeil_rechts_weiss.svg);	background-repeat: no-repeat;	background-position: left center;	background-size: 12px;	padding:1px;	padding-left:14px;	font-size:14px;	vertical-align:middle;	border: 1px solid transparent;	cursor: pointer;}
#MESSAGE_BOX.warning .detailsButton:hover {	border: 1px dotted yellow;}
#MESSAGE_BOX.warning .detailsButton.expanded {	background-image: url(../icons/pfeil_unten_weiss.svg);}
#MESSAGE_BOX.warning .detailsButton.collapsed {	background-image: url(../icons/pfeil_rechts_weiss.svg);}
#MESSAGE_BOX.warning .detailsContentContainer {	background-color: #aa5500;	border: 1px dotted transparent;}
#MESSAGE_BOX.warning .detailsContentContainer:hover {	border: 1px dotted yellow;}
#MESSAGE_BOX.warning .detailsContent {	padding:3px;  color:white;	-webkit-user-select: text;	-khtml-user-select: text;	-moz-user-select: text;	-o-user-select: text;	-ms-user-select: text;	user-select: text;	/*white-space: pre;*/	cursor: text;}


/***************************************************************************
* MessageBox: - Information (Informationsmeldungen) (JS)
***************************************************************************/

#MESSAGE_BOX.information {	background: lightblue;	border:5px solid lightblue;	border-radius:8px;	color:white;}
#MESSAGE_BOX.information .title {	display:block;	font-weight:bold;	color:white;	background: #1b226a;	padding:2px;	padding-left:8px;	border-radius: 5px 5px 0 0;}
#MESSAGE_BOX.information .buttons {	background:#3d4ad2;	border-radius: 0 0 5px 5px;}
#MESSAGE_BOX.information .buttons BUTTON {	background-color:lightblue;	border: 1px solid lightblue;	}
#MESSAGE_BOX.information .content {	background:#3d4ad2;	padding:5px;}
#MESSAGE_BOX.information .message {	padding:3px; white-space: pre-wrap;	-webkit-user-select: text;	-khtml-user-select: text;	-moz-user-select: text;	-ms-user-select: text;	-o-user-select: text;	-ms-user-select: text;	user-select: text;		cursor: text;}
#MESSAGE_BOX.information .messageContainer {	border: 1px dotted transparent;}
#MESSAGE_BOX.information .messageContainer:hover {	border: 1px dotted yellow;}
#MESSAGE_BOX.information .detailsButton {	color:white;	background-color: #4a65c5;	background-image: url(../icons/pfeil_rechts_weiss.svg);	background-repeat: no-repeat;	background-position: left center;	background-size: 12px;	padding:1px;	padding-left:14px;	font-size:14px;	vertical-align:middle;	border: 1px solid transparent;	cursor: pointer;}
#MESSAGE_BOX.information .detailsButton:hover {	border: 1px dotted yellow;}
#MESSAGE_BOX.information .detailsButton.expanded {	background-image: url(../icons/pfeil_unten_weiss.svg);}
#MESSAGE_BOX.information .detailsButton.collapsed {	background-image: url(../icons/pfeil_rechts_weiss.svg);}
#MESSAGE_BOX.information .detailsContentContainer {	background-color: #203993;	border: 1px dotted transparent;}
#MESSAGE_BOX.information .detailsContentContainer:hover {	border: 1px dotted yellow;}
#MESSAGE_BOX.information .detailsContent {	padding:3px;  color:yellow;	-webkit-user-select: text;	-khtml-user-select: text;	-moz-user-select: text;	-o-user-select: text;	-ms-user-select: text;	user-select: text;	/*white-space: pre;*/	cursor: text;}


/***************************************************************************
* SupportBox (Js))
***************************************************************************/

#SUPPORT_BOX {	background:#990000;	border:5px solid yellow;	border-radius:8px;}
#SUPPORT_BOX .title {	display:block;	font-weight:bold;	color:white;	background:#330000;	padding:2px;	padding-left:8px;	border-radius: 5px 5px 0 0;	}
#SUPPORT_BOX .buttons {	background:#990000;	border-radius: 0 0 5px 5px;	}
#SUPPORT_BOX .buttons BUTTON {	background-color:yellow;	border: 1px solid yellow;}
#SUPPORT_BOX .content {	background:#990000;	padding:5px;}


/*ende*/