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

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

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

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

  --upman-fontWeightDesc: bold;

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

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

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

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

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

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

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

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

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

.margin_t_25 {margin-top: 25px;}

.bold {font-weight: var(--upman-fontWeightDesc);}
.border_round10 {border-radius: 10px 10px 10px 10px;}
.butColor {background-color: var(--upman-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(--upman-dunkelblau);
  text-shadow:var(--upman-textShadowBtn);
  border-color:var(--upman-trans);
  background-color:var(--upman-bgColorBtnH);
  box-shadow:var(--upman-boxShadowBtn);
  background-image: var(--upman-bgImageBtn);
  height: 2.2em;
  padding: 5px;
  border: var(--upman-borderWidthBtn);

  font-weight: normal;
  font-size: var(--upman-fontSizeBtn);
  white-space: nowrap;
  word-wrap: normal;
  vertical-align: middle;
  cursor: pointer;
  border-radius: var(--upman-borderRadiusBtn);
  text-decoration:none;
  text-transform: var(--upman-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(--upman-LoaderBorder);
  background-color: var(--upman-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(--upman-LoaderBorder);
  background-color: var(--upman-weiss);
}
.allLeftIn3a{
  min-height: 110px;
}

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

.waitLoaderShow{
  position: absolute;
  width: 650px;
  height: max-content;
  max-height: 635px;
  top:90px;
  left: calc(100% - 670px);
  background-color: var(--upman-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(--upman-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(--upman-LoaderBorder);
  background-color: var(--buttonHellblau);
  top: 10px;
  font-weight: bold;
  cursor: pointer;
}

.upmanHead{
  text-align: var(--upman-headlineTextAlign2);
  font-size: var(--upman-headlineFontSize2);
  font-weight: var(--upman-headlineFontWeight2);
  color: var(--upman-headlineFontColor2);
  /*padding: 20px 10px;*/
  text-transform: var(--upman-headlineTextTransform2);
  visibility: var(--upman-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(--upman-borderRadiusBtn);
  border: var(--upman-borderWidthBtn);
  background-color: var(--upman-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(--upman-weiss);
  border: 1px solid var(--upman-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(--upman-bgChooseFormatIn);
  border-radius: var(--upman-showCatBorderRadius);
  box-shadow: var(--upman-showCatBoxShadow);
  border: var(--upman-borderWidthChoose);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.upman_divZoomImg{
  max-width: 1920px;
  max-height: 1200px;
  background-color: var(--upman-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.73em;
  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: stretch;

}

.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(--upman-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(--upman-LoaderBorder);
}

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

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

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

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

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

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

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

.picSelSendClass{
  position: relative;
  float: left;
  width: max-content;
  height: 1.6em;
  font-size: var(--upman-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;
}
}

/* ==========================================================================
   v100 – UploadManager nach Designvorlage
   Bestehende PHP-Struktur bleibt erhalten:
   je Datensatz-Zeile ein Bild-Row und direkt darunter ein Text-Row.
   Die Spaltenanzahl wird weiterhin ausschließlich über $picsToRow bestimmt.
   ========================================================================== */

.showPicsOutClass {
  box-sizing: border-box;
  width: calc(100% - 3px);
  height: max-content;
  padding: 0;
  background: #fff;
  border: 1px solid #b9cedd;
  overflow: hidden;
}

/* Beide getrennten Zeilen bilden optisch gemeinsam die Kartenreihe. */
.showPicRowClass {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  gap: 0;
  box-sizing: border-box;
}

/* Die von PHP gesetzte Prozentbreite bleibt maßgeblich.
   flex-shrink:0 verhindert, dass Browser die Zellen unterschiedlich verkleinern. */
.showPicImageCellClass,
.showPicTextCellClass {
  flex-grow: 0;
  flex-shrink: 0;
  min-width: 0;
  box-sizing: border-box;
}

/* Bildzeile: das höchste natürlich skalierte Bild bestimmt die Zeilenhöhe.
   Die anderen Zellen werden durch align-items:stretch gleich hoch. */
.showPicImageRowClass {
  align-items: stretch;
}

.showPicImageCellClass {
  height: auto;
  min-height: 0;
  overflow: hidden;
  background: #fff;
}

.showPicImageCellClass > a {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  line-height: 0;
}

.showPicImageFrameClass {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  box-sizing: border-box;
  line-height: 0;
}

.showPicImageClass {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 110px;
  margin: 0 auto;
  padding: 0;
  object-fit: contain;
}

/* Textzeile bleibt ein eigener Container direkt unter der Bildzeile.
   Der längste Text bestimmt die Zeilenhöhe; alle Zellen werden gleich hoch. */
.showPicTextRowClass {
  align-items: stretch;
}

.showPicTextCellClass {
  height: auto;
  min-height: 0;
  overflow-wrap: anywhere;
  background: #fff;
  line-height: 1.25;
}

/* Ruhiger, kompakter Eindruck entsprechend der Designvorlage. */
.showPicImageCellClass,
.showPicTextCellClass {
  border-color: #b9cedd !important;
}

.showPicTextCellClass a {
  text-decoration: none;
}


/* v101: Vorschaubilder bleiben Thumbnails.
 * Die Originalgröße wird ausschließlich über Highslide geöffnet.
 */
.showPicImageCellClass > a {
  height: 100%;
}

.showPicImageFrameClass {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 0;
}

.showPicImageClass {
  flex: 0 1 auto;
}


/* v102: alte schwarze Einzelrahmen der Thumbnail-/Textzellen entfernt.
 * Nur dezente Spaltentrennung passend zur Designvorlage.
 */
.showPicImageCellClass,
.showPicTextCellClass {
  border: 0 !important;
}

.showPicImageCellClass:not(:last-child),
.showPicTextCellClass:not(:last-child) {
  border-right: 1px solid #d8e4ec !important;
}

.showPicImageFrameClass,
.showPicImageClass {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}