:root {
    /******   Farben       ************/

  --hellgrau:    #E7EAED;
  --dunkelgrau:   #616264;
  --weiss:        #FFFFFF;
  --orange:       #FF7600;
  --hellgelb:     #FFF7DD;
  --hellgruen:    #01BFB0;
  --hellgruen2:   #28C9BC;
  --dunkelgruen:  #008E83;
  --rot:          #FF0000;
  --hellblau:     #5989B9;
  --dunkelblau:   #235579;
  --schwarz:      #000000;
  --trans:        transparent;
  --LoaderBorder: #0B6AB4;
  --hellblauPsy: #CCE4F7;

   /* allgemeines style */
  --fontFamily: Arial, Helvetica, sans-serif;
  --globalBorderColor: var(--dunkelgrau);                  	/* default Wert */
  --globalBorder: 1px solid var(--globalBorderColor);       /* allgemeine Rahmen */
  --globalBorderRadius: 0px;                                /* allgemeine BorderRadius */
  --globalBoxShadow: 0px 0px 0px var(--trans);              /* allgemeine BorderRadius */
  --globalVisibility: visible;                              /* einige Elemente ausblenden */
  --globalDisplay: block;									/* einige Elemente ausblenden */
  --bgEditor: var(--weiss);                             	/* Hintergrundfarbe für Editor*/
  --bgColorHeader: var(--dunkelblau);                       /* Hintergrundfarbe für Header*/
  --bodyFontColor: var(--dunkelgrau);                       /* allgemeine Schriftfarbe  */
  --scrollbarColor: var(--dunkelgrau) var(--hellgrau);      /* sets the color of the scrollbar track and thumb */
  --scrollbarWidth: thin;    								/* set the maximum thickness of an element’s scrollbars */
  --activeColor: var(--orange);
  --inActiveColor: var(--trans);

  --fontsize1:  1.2em;
  --fontsize2:  1.1em;
  --fontsize3:  1.0em;
  --fontsize4:  0.8em;
  --fontsize5:  0.7em;
  --fontsize6:  0.6em;

  --fontWeightDesc: bold;

  /* Buttons Style*/
  --bgColorBtnH: var(--hellblauPsy);                         /* Hintergrundfarbe für Buttons ( HELL ) */
  --bgColorBtnD: var(--dunkelgruen);                         /* Hintergrundfarbe für Buttons ( DUNKEL ) z.B. "in den Warenkorb" */
  --borderWidthBtn: 1px solid var(--schwarz);     			/* Border width für Buttons */
  --borderRadiusBtn: 0px;                         			/* Border Radius für Buttons */
  --fontColorBtn: var(--weiss);
  --fontSizeBtn: 1em;
  --fontSizeBtn2: 0.7em;
  --bgCloseBtn: var(--orange);                          /* Schließbutton Hintergrund */
  --textTransformBtn: uppercase;
  --textShadowBtn: none;
  --boxShadowBtn: none;
  --bgImageBtn: none;

 /* Überschriften */
  --headlineFontSize: 38px;                               /* 1. Groß */
  --headlineFontColor: var(--dunkelblau);
  --headlineTextTransform: uppercase;
  --headlineTextAlign: center;
  --headlineFontWeight: bold;
  --headlineMarginTop: 2%;

  --headlineFontSize2: 30px;                              /* 2. Klein */
  --headlineFontSize2a: 15px;                              /* 2. Klein */
  --headlineFontColor2: var(--dunkelgrau);
  --headlineTextTransform2: none;
  --headlineTextAlign2: center;
  --headlineFontWeight2: bold;
  --headlineMarginTop2: 1%;

  /* Auswahl Module oder einzelnen Matten */
  --bgChooseFormatOut:var(--weiss);                    /* Hintergrundfarbe für äußere DIV */
  --bgChooseFormatIn: var(--hellgrau);                   /* Hintergrundfarbe für innere DIV oben mit Bild */
  --bgChooseFormatIn2: var(--trans);                    /* Hintergrundfarbe für innere DIV unten mit Beschreibung */
  --boxShadowChoose: 0px 0px var(--weiss);
  --borderWidthChooseMain: 2px;
  --borderWidthChoose: var(--borderWidthChooseMain) solid var(--hellgrau);
  --borderRadiusChoose: 0px;
  --borderTopChoose: 0px solid var(--hellgrau);
  --fontWeightChoose: bold;
  --borderRadiusMenuChoose: 0px;

  --hoverColorActive: var(--hellgruen);                    /* aktive Farbe */
  --hoverColorDeact: var(--hellgrau);                      /* nicht aktive Farbe */
  --hoverColorOut: var(--hoverColorActive);       		   /* für äußere DIV */
  --hoverColorIn: var(--hoverColorDeact);                  /* für innere DIV */

  --freeSizeBorder: 0px solid var(--trans);                /* Freie Größe */
  --freeSizeBorderRadius: 0px;                             /* Freie Größe */

  --marginModulSelectionTop: 5px;                          /* Modulauswahl: Abstand für Bild   */

  /*  Kategorie */
  --showCatBoxShadow: 0px 0px var(--trans);
  --showCatBorderRadius: 0px;
  --showCatBorderOut: var(--borderWidthChoose);
  --showCatBorderBottom: 0px solid var(--schwarz);
  --showCatBorderRadiusBottom: 0 0 var(--showCatBorderRadius) var(--showCatBorderRadius);
  --showCatMinHeight: 44px;
  --showCatMarginTop: 10px;
  --showCatCarpetBg: var(--hellgrau);
  --showCatCarpetHeight: 40px;
  --showCatCarpetFilterBorderColor: var(--trans);
  }

/*body{
  font-family: var(--fontFamily);
  font-size: 1em;
  color: var(--bodyFontColor);
  padding: 7px;
}*/

.margin_t_25 {margin-top: 25px;}

.bold {font-weight: var(--fontWeightDesc);}
.border_round10 {border-radius: 10px 10px 10px 10px;}
.butColor {background-color: var(--trans);}
.font_size_0  {font-size: 1.0em;}
.font_size_1  {font-size: 1.1em;}
.font_size_2  {font-size: 1.2em;}
.font_size_3  {font-size: 1.3em;}
.font_size_4  {font-size: 1.4em;}
.font_size_5  {font-size: 1.5em;}
.buttonstandard1, .buttonstandard2, .buttonstandard3, .buttonstandard4 {
  color:var(--dunkelblau);
  text-shadow:var(--textShadowBtn);
  border-color:var(--trans);
  background-color:var(--bgColorBtnH);
  box-shadow:var(--boxShadowBtn);
  background-image: var(--bgImageBtn);
  height: 2.2em;
  padding: 5px;
  border: var(--borderWidthBtn);

  font-weight: normal;
  font-size: var(--fontSizeBtn);
  white-space: nowrap;
  word-wrap: normal;
  vertical-align: middle;
  cursor: pointer;
  border-radius: var(--borderRadiusBtn);
  text-decoration:none;
  text-transform: var(--textTransformBtn);
  }

.button_width1  {width:30px;}
.button_width2  {width:50px;}
.button_width3  {width:60px;}
.button_width4  {width:80px;}
.button_width5  {width:100px;}
.button_width7  {width:120px;}
.button_width8  {width:150px;}
.button_width9  {width:165px;}
.button_width10 {width:180px;}
.button_width100 {width:max-content;}

.allLeftIn1 {
  position: relative;
  width: 100%;
  text-align: center;
  height: 115px;
  border: solid 2px var(--LoaderBorder);
  background-color: var(--weiss);
  }
.allLeftIn2 {width: 220px;}
.allLeftIn3, .allLeftIn3a {
  position: relative;
  width: calc(100% - 10px);
  padding: 5px;
  overflow: auto;
  min-height: 150px;
  height: max-content;
  max-height: 500px;
  }
.allLeftIn3{
  position: relative;
  margin-top: 10px;
  border: solid 2px var(--LoaderBorder);
  background-color: var(--weiss);
}
.allLeftIn3a{
  min-height: 110px;
}

.waitLoader{
  position: absolute;
  width: 650px;
  height: max-content;
  max-height: 650px;
  top:70px;
  left: calc(100% - 670px);
  background-color: var(--weiss);
  opacity: 92%;
  display: none;
  z-index: 2600;
  }

.waitLoaderShow{
  position: absolute;
  width: 650px;
  height: max-content;
  max-height: 635px;
  top:70px;
  left: calc(100% - 670px);
  background-color: var(--trans);
  opacity: 92%;
  display: block;
  z-index: 2600;
  padding-bottom: 2px;
  }




.innerWaitOut{
  position: relative;
  height: 40px;
  width: 100%;
  background-color: transparent;
  z-index: 2601;
  margin-top: 30px;
  display: none;
}

.innerWaitOutShow{
  position: relative;
  height: 40px;
  width: 100%;
  background-color: transparent;
  z-index: 2601;
  margin-top: 30px;
  display: block;
}

.innerWait{
  position: relative;
  height: 20px;
  width: 100%;
  background-color: var(--trans);
  top: 0px;
  left: 0px;
  z-index: 1002;
}

.innerWaitBottom{
  position: relative;
  height: 20px;
  width: 100%;
  background-color: transparent;
  top: 0px;
  left: 0px;
  text-align: center;
  z-index: 1002;
}

.innerWaitIn{
  position: relative;
  height: 100%;
  width: 10px;
  left: 0px;
  top: 0px;
  background-color: #01BFB0;
  z-index: 1003;
}

.waitLoaderScriptDataClass {
  position: relative;
  width: 100%;
  height: max-content;
  padding: 0px;
  border: none;
  margin: auto;
}

.closeLoaderClass {
  position: relative;
  width: 100%;
  height: max-content;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  border: solid 2px var(--LoaderBorder);
  background-color: var(--buttonHellblau);
  top: 10px;
  font-weight: bold;
  cursor: pointer;
}

.upmanHead{
  text-align: var(--headlineTextAlign2);
  font-size: var(--headlineFontSize2);
  font-weight: var(--headlineFontWeight2);
  color: var(--headlineFontColor2);
  /*padding: 20px 10px;*/
  text-transform: var(--headlineTextTransform2);
  visibility: var(--globalVisibility);
}

.upmanParHead{
  font-weight: bold;
  margin: 5px 0;
}

.upman_showUserImage, .upman_showUserImage2 {
  background-size: contain;
  background-repeat: no-repeat;
  text-align: center;
  width: 250px;
  height: 167px;
  background-position: center;
  cursor: pointer;
  margin-top: 5px;
}

.upman_showUserImage2{
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2em;
  cursor: text;
}

.upman_selfPicDel, .upman_zoomBtn, .upman_divZoomImgClose{
  position: absolute;
  left: 95%;
  top: -10px;
  padding-bottom: 3px;
  margin-right: 5px;
  border-radius: var(--borderRadiusBtn);
  border: var(--borderWidthBtn);
  background-color: var(--bgCloseBtn);
  width: 22px;
  height: 18px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: end;
  cursor: pointer;
  }

.upman_zoomBtn{
  top: 25px;
  background-color: var(--weiss);
  border: 1px solid var(--dunkelgrau);
}

.upman_divZoomImgClose{
  left: 97%;
  top: 5px;
}

.upman_btnClosePic{
  width: 16px;
}

.upman_userImageInfo{
  font-size: 11px;
  padding-bottom: 5px;
}

.upman_userImageInfo p{
  margin: 5px 0 0 0;
  padding: 0px;
}

.upman_divUserImage{
  position: relative;
  float: left;
  margin: 12px 20px 15px 0px;
  width: max-content;
  height: auto;
  background-color: var(--bgChooseFormatIn);
  border-radius: var(--showCatBorderRadius);
  box-shadow: var(--showCatBoxShadow);
  border: var(--borderWidthChoose);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.upman_divZoomImg{
  max-width: 1920px;
  max-height: 1200px;
  background-color: var(--bgChooseFormatIn);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 80%;
  height: 80%;
  /*display: none; */
  position: relative;

}

.upman_coverDivZoomImg{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255,255,255,0.85);
  display: none;
}

.picFree{
  margin-right: 7px;
}

/* Erweiterung Loader */
.nameDateClass, .showPicsQuartClass {
  position: relative;
  width: 150px;
  height: 23px;
  border: solid 1px #000;
  font-size: var(--font-size-moduls5)!important;
}

.nameDayClass, .showPicsYearClass {
  position: relative;
  width: 69px;
  height: 23px;
  border: solid 1px #000;
  font-size: var(--font-size-moduls5)!important;
}

.nameMonthClass {
  position: relative;
  width: 68px;
  height: 23px;
  border: solid 1px #000;
  font-size: var(--font-size-moduls5)!important;
}

.picSelSendClass{
  position: relative;
  float: left;
  width: max-content;
  height: 1.55em;
  font-size: var(--font-size-moduls5)!important;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  padding-left: 5px;
  padding-right: 5px;
  left: 5px;
}

/** Nutzung im Psygonis Framework **/
.showPicsOutClass {
  position: relative;
  width: calc(100% - 3px);
  height: max-content;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  margin-top: 35px;
}

.showPicRowClass {
  position: relative;
  width: 100%;
  height: max-content;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

}

.selfUploadTextClass{
  font-size: 0.8em;
}

.showPicsTopClass {
  position: relative;
  width: 100%;
  height: max-content;
  margin-bottom: 8px;
}

@media (max-height: 650px) or (max-width: 1500px){
.allLeftIn1 {
  position: relative;
  width: 100%;
  text-align: center;
  height: 100px;
  border: solid 2px var(--LoaderBorder);
  }

.allLeftIn3, .allLeftIn3a {
  position: relative;
  width: calc(100% - 10px);
  overflow: auto;
  /*height: calc(100% - 135px);*/
  height: max-content;
  max-height: 380px;
  padding-bottom: 2px;
  padding-top: 2px;
  }

.allLeftIn3{
  position: relative;
  margin-top: 10px;
  border: solid 2px var(--LoaderBorder);
}

.waitLoaderShow{
  position: absolute;
  width: 400px;
  height: max-content;
  max-height: 507px;
  top:50px;
  left: calc(100% - 420px);
  background-color: var(--trans);
  opacity: 92%;
  display: block;
  z-index: 2600;
  padding-bottom: 2px;
  }

.upmanHead{
  font-size: var(--headlineFontSize2a);
  }

.buttonstandard1, .buttonstandard2, .buttonstandard3, .buttonstandard4 {
  color:var(--dunkelblau);
  text-shadow:var(--textShadowBtn);
  border-color:var(--trans);
  background-color:var(--bgColorBtnH);
  box-shadow:var(--boxShadowBtn);
  background-image: var(--bgImageBtn);
  height: 2.2em;
  padding: 2px;
  border: var(--borderWidthBtn);

  font-weight: normal;
  font-size: var(--fontSizeBtn2);
  white-space: nowrap;
  word-wrap: normal;
  vertical-align: middle;
  cursor: pointer;
  border-radius: var(--borderRadiusBtn);
  text-decoration:none;
  text-transform: var(--textTransformBtn);
  }

/* Erweiterung Loader */
.nameDateClass, .showPicsQuartClass {
  position: relative;
  width: 120px;
  height: 18px;
  border: solid 1px #000;
  font-size: var(--fontsize5)!important;
}

.nameDayClass, .showPicsYearClass {
  position: relative;
  width: 54px;
  height: 18px;
  border: solid 1px #000;
  font-size: var(--fontsize5)!important;
}

.nameMonthClass {
  position: relative;
  width: 53px;
  height: 18px;
  border: solid 1px #000;
  font-size: var(--fontsize5)!important;
}

.picSelSendClass{
  position: relative;
  float: left;
  width: max-content;
  height: 1.6em;
  font-size: var(--fontsize5)!important;
  top: 0px;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  padding-left: 5px;
  padding-right: 5px;
  left: 5px;
}

.selfUploadTextClass{
  font-size: 0.7em;
}

.showPicsTopClass {
  height: max-content;
  margin-bottom: 8px;
}

.showPicsOutClass {
  margin-top: 45px;
}
}