/* Lange Engineering CSS */
:root {
  /******   Farben       ************/
  --hellblau:                 rgba(0, 204, 255, 0.4);
  --loginBlau:                #0B6AB4; /*#00CCFF;*/
  --loginHellblau:            #C6E0F4; /*#61DFFF;*/
  --loginHoverBlau:           #65ACE2; /*#61DFFF;*/
  --loginLichtblau:           #00CCFF;
  --waitGrau:                 #999999;
  --mainWeiss:                rgba(255, 255, 255, 0.8);
  --mainschwarz-trans:        rgba(0,0,0,0.2);
  --schwarz:                  #000000;
  --weiss:                    #FFFFFF;
  --weiss-dunkel:             #f9f9f9;
  --lichtgrau:                #EBEBEB;
  --buttonHellgrau:           #CCCCCC;
  --buttonMittelgrau:         #ADADAD;
  --buttonDunkelgrau:         #878787;
  --buttonWeiss:              #FFFFFF;
  --buttonMinBlau:            #E0EEFA;
  --buttonHellblau:           #CCE4F7;
  --buttonLichtblau:          #00CCFF;
  --statistikLichtblau:       #4DDBFF;
  --statistikDunkelBlau:      #0000CC;
  --statistikMittelBlau:      #4B9EDD;
  --buttonBlau:               #0078D7;
  --buttonSchwarz:            #111111;
  --mittelSchwarz:            #444444;
  --transparent:              transparent;
  --errorRed:                 #FF2424;
  --errorRed2:                #FF6666;
  --errorRedStat:             #FF7575;
  --errorGreen:               #00CC00;
  --errorGreenStat:           #00CC00;
  --errorBlueStat:            #4B9EDD;
  --errorYellowStat:          #FFFF00;
  --errorOrangewStat:         #FFCC00;
  --buttonDarkWhite1:         #EEEEEE;

  --skillRowBlau:             #0B6AB4;
  --skillRowLichtblau:        #00C0F0;
  --skillRowHellblau:         #65ACE2;
  --skillRowWeiss:            #FFFFFF;

  --selfSelectBack:           #65ACE2;
  --selfSelectTop:            transparent;
  --selfSelectBottom:         #4B9EDD;
  --selfSelectOption:         #00CCFF;
  --selfSelectOptionActive:   #0B6AB4;
  --selfSelectOptionHover:    #0078D7;
  --selfSelectTopColor:       #FFFFFF;
  --selfSelectOptionColor:    #FFFFFF;
  --selfSelectOptionHellgrau: #CCCCCC;
  --selfSelectWhite:          #FFFFFF;

  --certSearchTableBack1:     #E3E3E3;
  --certSearchTableBack2:     #00CC00;
  --certSearchTableBack3:     #FFCC00;
  --certSearchTableBack4:     #00CCFF;
  --certSearchTableBack5:     #FFFFFF;

  --fieldBackActive:          #FFCC33;
  --mailGreen:                #008000;

  --font-size-Cell:           1.5em;
  --font-size-Roll:           1em;
  --font-size-RollLeft:       0.8em;
  --font-size-RollRight:      0.8em;

  --font-size-moduls1:        1.5em;
  --font-size-moduls2:        1.2em;
  --font-size-moduls3:        1.1em;
  --font-size-moduls4:        1.0em;
  --font-size-moduls5:        0.9em;
  --font-size-moduls6:        0.8em;
  --font-size-moduls6a:       0.75em;
  --font-size-moduls7:        0.7em;
  --font-size-moduls8:        0.6em;

  --font-size-modulsBig:      1.8em;

  --font-size-rem1:           1.1em;

  --scrollbarWidth:           thin;
  --scrollbarBack:            #00CCFF;
  --scrollbarOutline:         #0B6AB4;

  --userInactive:             #FF9933;
  --weissTrans:               rgba(255,255,255,0.4);


body {
  border: none;
  padding: 0px;
  margin: 0px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
  overflow: hidden;
  /*background-image: url(../images/lange_background1.jpg);*/
  background-image: url(../images/back.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  scrollbar-color: var(--scrollbarOutline) var(--scrollbarBack);
  scrollbar-width: var(--scrollbarWidth);
}

.backgroundColorWhite{
  background-color: var(--weiss);
}

.borderNormal{
  border: solid 1px var(--schwarz);
}

.errorClass{
  font-size: 1em;
  font-weight: bold;
  color: var(--errorRed);
}

.okClass{
  font-size: 1em;
  font-weight: bold;
  color: var(--mailGreen);
}

.flex_right{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: end;
}

.textBold{
  font-weight: bold !important;
}

/*    Scrollbars    */
div {
  scrollbar-color: var(--scrollbarOutline) var(--scrollbarBack);
  scrollbar-width: var(--scrollbarWidth);
  }

div:hover{
  scrollbar-color: var(--scrollbarOutline) var(--scrollbarBack);
}

div:active{
  scrollbar-color: var(--scrollbarOutline) var(--scrollbarBack);
}

.pointer{
  cursor: pointer;
}

.setWidth100{
  width: 100% !important;
}

.setWidth100_rem1{
  width: 100% !important;
  font-size: var(--font-size-rem1);
}

.scrollRight {
  overflow-y: auto;
  overflow-x: hide;
}

/* wait */
.waitTimeClass {
  display: none;
}

.waitTimeClassShow {
  position: absolute;
  z-index: 8000;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: var(--mainWeiss);
  color: var(--waitGrau);
  display: block;
}

.waitTimeInClass{
  position: absolute;
  border: none;
  width: 50%;
  height: 50%;
  left: 25%;
  top: 25%;
  font-size: 2em;
}

.protectAllClass{
  position: absolute;
  top: 0px;
  left; 0px;
  width: 100%;
  height: 100%;
  z-index: 7900;
  background-color: var(--transparent);
}

.marginAllTop{
  margin-top: 10px;
}

.marginAllBottom{
  margin-bottom: 5px;
}

.marginAllLeft{
  margin-left: 5px;
}

.noBorder{
  border: none !important;
}

.underline{
  text-decoration: underline;
}

.clickDownYes{
  pointer-events: none;
}

.clickDownNo{
  pointer-events: auto;
}

.zIndex50{
  z-index: 50 !important;
}

.divWidth65{
  width: 65em !important;
}

.divWidth85{
  width: 85em !important;
}

/* main, footer div */
.topMainClass{
  position: relative;
  height: 3em;
  width: 100%;
  margin: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}

.mainClass {
  position: absolute;
  left: 0px;
  top: 0px;
  padding: 5px;           /*Standardrand, muss im JS setMainSize() bei der Berechnung berücksichtigt werden*/
  margin: 0px;
  width: calc(100% - 10px);
  height: calc(100% - 5px);
  background-color: var(--mainWeiss);
  overflow: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.innerMainClass{
  position: relative;
  margin: auto;
  overflow: auto;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  /*border: solid 1px var(--schwarz);*/
}

.footerClass{
  position: relative;
  height: 3em;
  width: 90%;
  margin: auto;
  font-size: var(--font-size-moduls6);
}

.footerInClass{
  position: absolute;
  width: 100%;
  height: max-content;
  bottom: 5px;
}

/* login */
.loginDivClass{
  position: relative;
  width: 30em;
  height: 20em;
  border: none;
  border-bottom-left-radius: 0.5em;
  border-bottom-right-radius: 0.5em;
  margin: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: top;
  align-items: center;
}

.loginOutDivClass{
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
}

.showLoginErrorClass{
  position: relative;
  border: none;
  width: 30em;
  height: 3em;
  top: calc(100%/2 - 5em/2);
  margin: auto;
  margin-top: 15px;
  padding-left: 2em;
  font-size: 1em;
  color: var(--errorRed);
}

.tabDivClass{
  position: relative;
  width: 100%;
  height: 3em;
  margin: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.underTabClass{
  position: relative;
  border: none;
  width: 100%;
  height: 17em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: var(--loginLichtblau);
}

.containerTab{
  flex: 1;                    /*alle Tabs in gleicher Größe*/
}

.loginTab{
  position: relative;
  float: left;
  width: 100%;
  height: 100%;
  -webkit-clip-path: polygon(0.5em 0%, 0% 0.5em, 0% 100%, 100% 100%, 100% 0.5em, calc(100% - 0.5em) 0%);
  clip-path: polygon(0.5em 0%, 0% 0.5em, 0% 100%, 100% 100%, 100% 0.5em, calc(100% - 0.5em) 0%);
  padding-top: 0.4em;
  text-align: center;
  font-size: 0.9em;
  cursor: pointer;
}

.loginTabBackgroundActive{
  background-color: var(--loginLichtblau);
  color: var(--weiss);
}

.loginTabBackgroundInActive{
  background-color: var(--loginHellblau);
  color: var(--buttonDunkelgrau);
}


.loginMaskClass{
  position: relative;
  width: 100%;
  height: 100%;
  border: none;
  display: flex;
  flex-direction:column;
  justify-content: center;
  align-items: center;
  margin: auto;
}

.showTabActiveClass{
  display: block;
  width: 40%;
  min-width: 120px;
}

.showTabInActiveClass{
  display: none;
}

.forgotPassClass{
  position: absolute;
  top: 20px;
  margin: auto;
  width: 90%;
  height: 80%;
  min-width: 120px;
  background-color: var(--buttonLichtblau);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
}

.forgotPassInactiveClass{
  display: none;
  width: 90%;
  min-width: 120px;
}

.userFieldClass{
  width: 100%;
  height: max-content;
  border: none;
  padding: 3px;
}

.buttonWidthClassLogin{
  width: 13.4em;
  height: 2em;
}

.forgotText{
  font-size: var(--font-size-moduls6);
  cursor: pointer;
  margin-top: 10px;
}

.forgotTextClass{
  position: relative;
  width: 95%;
  margin-bottom: 10px;
  height: max-content;
  font-size: var(--font-size-moduls6);
  color: var(--weiss);
  text-align: center;
  margin: auto;
}

.forgotTextBottomClass{
  position: relative;
  width: 90%;
  margin-top: 5px;
  height: max-content;
  max-height: 50px;
  overflow: auto;
  font-size: var(--font-size-moduls6);
  color: var(--errorRed);
  text-align: center;
  margin: auto;
}

.forgotTextBottomClassOK{
  position: relative;
  width: 90%;
  margin-top: 5px;
  height: max-content;
  max-height: 50px;
  overflow: auto;
  font-size: var(--font-size-moduls6);
  color: var(--errorGreen);
  background-color: var(--mailGreen);
  text-align: center;
  margin: auto;
}

/* top panel (über Main) show path, user, roll, datue*/
.actUserClass, .actRollClass, .actDateClass{
  position: relative;
  width: 18%;
  font-size: var(--font-size-Roll);
  display: flex;
  flex-direction: column;
  justify-content: left;
  align-items: left;
}

.actPlaceClass{
  position: relative;
  width: 38%;
  font-size: var(--font-size-Roll);
}

.actHelpClass{
  position: relative;
  width: 8%;
  font-size: var(--font-size-Roll);
}

.actPlaceInLeftClass, .actUserInLeftClass, .actRollInLeftClass, .actDateInLeftClass{
  position: relative;

  width: max-content;
  padding-left: 5px;
  text-align: right;
  font-size: var(--font-size-RollLeft);
}

.actPlaceInRightClass, .actUserInRightClass, .actRollInRightClass, .actDateInRightClass{
  position: relative;

  width: max-content;
  padding-left: 5px;
  text-align: left;
  font-size: var(--font-size-RollRight);
}


/* begin main menu */
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.li_h {
  float: left;
  padding-top: 5px;
  padding-bottom: 3px;
  padding-left: 12px;
  padding-right: 12px;
  min-width: 50px;
  text-align: center;
  cursor: pointer;
}

.li_v, .li_v_start {
  padding-top: 5px;
  padding-bottom: 3px;
  padding-left: 12px;
  padding-right: 12px;
  min-width: 50px;
  text-align: left;
  cursor: pointer;
 /* background-color: var(--selfSelectOption);*/
  margin-bottom: 1px;
}

.li_v{
   border-top: solid 2px var(--selfSelectOption);
}

.li_h:hover {

  background-color: var(--hellblau);
}

.li_v:hover, .li_v_start:hover {

  background-color: var(--hellblau);
}

.li_h.dropdown {
  display: inline-block;
  padding-bottom: 3px;
  padding-left: 8px;
  padding-right: 8px;
}

.dropdown
  display: inline-block;
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 8px;
  padding-right: 8px;
}

.dropdown-content {
  display: none;
  position: absolute;
  margin-top: 2px;
  margin-left: 30px;
  background-color: var(--weiss-dunkel);
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px var(--mainschwarz-trans);
  z-index: 50;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.showMenuOutClass{
  position: relative;
  width: 90%;

  height: calc(100% - 4em);
  /*border: solid 1px #000;*/
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: auto;
}

.showMenuInTopClass{
  position: relative;
  width: 100%;
  min-height: 3em;
  /*border: solid 1px #000;*/
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

}

.showMenuInTopLeftClass{
  position: relative;
  width: calc(100% - 115px);
  height: 100%;
  /*border: solid 1px #000;*/
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: top;
  padding-left: 5px;
  padding-right: 5px;
 /* background-color: var(--selfSelectOption); */
}

.showMenuInTopRightClass{
  position: relative;
  width: 240px;
  height: 100%;
  /*border: solid 1px #000;*/
  flex-direction: row;
  justify-content: right;
  align-items: top;
  padding-left: 5px;
  padding-right: 5px;
  /*background-color: var(--selfSelectOption); */
}

.showMenuInShowClass{
  position: relative;
  width: 100%;

  height: calc(100% - 50px) !important;
  /*border: solid 1px #000;*/
  overflow: auto;
}
/* End main menu */

/* begin button css */
button:disabled, button:disabled:hover, button:disabled:active,
input[type=button]:disabled, input[type=button]:disabled:hover, input[type=button]:disabled:active{
  background-color: var(--buttonHellgrau);
  /*197,197,197*/
  -webkit-box-shadow: 0px 0px 0px 1px var(--buttonHellgrau),
                      0px 0px 0px 2px var(--buttonMittelgrau);
  box-shadow: 0px 0px 0px 1px var(--buttonHellgrau),
              0px 0px 0px 2px var(--buttonMittelgrau);
  color: var(--buttonMittelgrau);
}

button, input[type=button]{
  outline: none;
  font-family: sans-serif;
  font-size: 0.8rem !important;
  background-color: var(--buttonHellblau);
  padding: 3px 8px;
  border: 1px solid var(--buttonSchwarz);
  color: black;
}

button:hover, input[type=button]:hover {
  /*-webkit-box-shadow: 3px 2px 0px 0px var(--buttonMittelgrau);
  box-shadow: 3px 2px 0px 0px var(--buttonMittelgrau);*/
  background-color: var(--loginHoverBlau);
}

button:active, input[type=button]:active{
  background-color: var(--buttonBlau);
}

.buttonWidthSmall{
  width: 5em !important;
  border: 1px solid var(--buttonSchwarz) !important;
}

.buttonWidthSmallActive{
  width: 5em !important;
  border: 2px solid var(--statistikDunkelBlau) !important;
}

.buttonWidthMedium{
  width: 10em !important;
  border: 1px solid var(--buttonSchwarz) !important;
}

.buttonWidthMediumActive{
  width: 10em !important;
  border: 2px solid var(--statistikDunkelBlau) !important;
}

.buttonWidthLarge{
  width: 15em !important;
  border: 1px solid var(--buttonSchwarz) !important;
}

.buttonWidthLargeActive{
  width: 15em !important;
  border: 2px solid var(--statistikDunkelBlau) !important;
}

.buttonWidthBig{
  width: 20em !important;
  border: 1px solid var(--buttonSchwarz) !important;
}

.buttonWidthBigActive{
  width: 20em !important;
  border: 2px solid var(--statistikDunkelBlau) !important;
}

.buttonWidthBigBig{
  width: 25em !important;
  border: 1px solid var(--buttonSchwarz) !important;
}

.buttonWidthBigBigActive{
  width: 25em !important;
  border: 2px solid var(--statistikDunkelBlau) !important;
}

.buttonTextBold{
  font-weight: bold;
  border: 1px solid var(--buttonSchwarz) !important;
}

.buttonWidthAll{
  width: 100%;
  border: 1px solid var(--buttonSchwarz) !important;
}

.buttonWidthAllActive{
  width: 100%;
  border: 2px solid var(--buttonSchwarz) !important;
}

/*  eigene Buttons  */
.saveSkillButtonClass {
  position: relative;
  width: max-content;
  height: max-content;
  border: solid 2x var(--buttonBlau);
  background-color: var(--buttonHellblau);
  padding: 3px;
  font-weight: normal;
  color: var(--buttonBlau);
  z-index: 2500;
  margin-right: 5px;
}

.saveSkillButtonClass a: {text-decoration: none;}
.saveSkillButtonClass a:link {text-decoration: none;}
.saveSkillButtonClass a:active {text-decoration: none;}
.saveSkillButtonClass a:visited {text-decoration: none;}
.saveSkillButtonClass a:hover {text-decoration: none;}

/*    end Button CSS     */

/* input, textarea, select */
input[type=text],
input[type=password]{
  border: solid 1px var(--buttonSchwarz);
  width: 14em;
  background-color: var(--buttonDarkWhite1);
  color: var(--buttonBlau);
  height: 2em;
}

textarea {
  background-size: 100%;
  border-radius:6px;
  border:2px solid silver;
  outline: none;
}

select {
  background-color: var(--buttonHellblau);
  width: 180px;
  font-size: 0.9em;
  font-family: inherit;
  font-weight: normal;
}

.selectAllStandard {
  background-color: var(--buttonHellblau);
  width: 180px;
  font-size: 0.9em;
  font-family: inherit;
  font-weight: normal;
}

/*#showPicsQuart option:hover{
  background-color: #CCFF66;
}

.selectOptionHover{
       background-color: #CCFF66;
}

.selectOptionHover.hover{
  background-color: #CC9900;
}*/

.selectOptionNoHover{
  display: block;
}

.textFieldShort, .textFieldMiddle, .textFieldLong{
  position: relative;
  border: solid 1px var(--buttonBlau);
  color: var(--buttonBlau);
  height: 2em;
}

.textFieldShort{
  width: 40px !important;
}

.textFieldMiddle{
  width: 100px !important;
}

.textFieldLong{
  width: 220px !important;
}

.textFieldLong2{
  width: 206px !important;
}

.userDataText{
  width: 15em !important;
}

.userDataTextLong{
  width: 18em !important;
}


/* misc, disclaimer */
#copyright{
  position: relative;
  width: max-content;
  /*border: solid 1px #000;*/
  margin: auto;
}

.disclaimerClass{
  position: absolute;
  left: 0px;
  top: 0px;
  height: 100%;
  width: 100%;
  background-color: transparent;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.disclaimerClassNoShow {
  position: absolute;
  left: 0px;
  top: 0px;
  height: 100%;
  width: 100%;
  background-color: transparent;
  display: none;
}

.discInClass{
  position: relative;
  width: 55%;
  height: 45%;
  background-color: var(--weiss-dunkel);
  text-align: center;
  vertical-align: top;
  overflow: auto;
}

.discTableClass{
  height: 100%;
  width: 100%;
}

.discTableTopClass{
  height: 80%;
  font-size: var(--font-size-moduls3);
}

.discTableBottomClass{
  height: 80%;
  vertical-align: bottom;
}

.discButtonAgree {
  cursor: pointer;
  border: solid 4px var(--errorGreen) !important;
}

.discButtonNoAgree {
  cursor: pointer;
  border: solid 4px var(--errorRed) !important;
}

.boxShadow{
  box-shadow: 10px 15px 10px silver;
}

.boxShadowSmall{
  box-shadow: 5px 7px 5px silver;
}

/* user expertises, skills  */
.modulTopShowDataClass{
  position: relative;
  left: 10px;
  top: 0px;
  width: 840px;
  height: 2.5em;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  overflow: hidden;
  background-color: var(--skillRowBlau);
  font-size: 1em;
  z-index: 2;
  margin-bottom: 5px;
}

.fontBold{
  font-weight: bold;
}

.fontTestSmall{
  font-size: 0.8em;
}

.modulTopShowDataSelectClass{
  position: relative;
  left: 10px;
  top: 0px;
  width: 840px;
  height: 2.5em;
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
  overflow: hidden;
  font-size: 1em;
  z-index: 2;
  margin-bottom: 5px;
}

.modulTopShowDataAdminClass{
  position: relative;
  left: 10px;
  top: 0px;
  width: 1140px;
  height: 2.5em;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  overflow: hidden;
  background-color: var(--skillRowBlau);
  font-size: 1em;
  z-index: 2;
  margin-bottom: 5px;
}

.modulTopShowDataInLeftClass{
  position: relative;
  width: 10em;
  height: max-content;
  color: var(--weiss);
  font-weight: bold;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.modulTopShowDataInRightClass{
  position: relative;
  width: calc(100% - 10em - 55px);
  height: max-content;
  color: var(--weiss);
  display: flex;
  flex-direction: row;
  justify-content: right;
  align-items: center;
  padding-right: 40px;
}

.report_1_class, .report_2_class, .report_3_class, .report_4_class, .report_5_class  {
  position: relative;
  width: max-content;
  height: max-content;
  color: var(--weiss);
  font-weight: bold;
  margin-right: 10px;
}

.report_2_class{
  margin-right: 40px !important;
}

.report_5_class{
  font-weight: normal !important;
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-content: center;
  padding-right: 10px;
}

.userExpertiseOutClass, .userSkillsOutClass {
  position: relative;
  left: 10px;
  top: 0px;
  width: 850px;
  height: calc(100% - 10em);
  overflow: auto;
  /*border: solid 1px #000; */
  background-color: var(--transparent);
  z-index: 2;
}

.userExpertiseOutAdminClass, .userSkillsOutAdminClass, .userEmplOutAdminClass {
  position: relative;
  left: 10px;
  top: 0px;
  width: 1150px;
  height: calc(100% - 2.5em);
  overflow: auto;
  /*border: solid 1px #000; */
  background-color: var(--transparent);
  z-index: 2;
}

.userEmplOutAdminClass{
  width: 1500px;
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: left;
}

.showModulsForUserClass{
  width: 530px;
  min-height: 400px;
  border: none;
  background-color: var(--skillRowLichtblau);
  margin-left: 10px;
  color: var(--skillRowWeiss);
  font-weight: bold;
  padding: 5px;
}

.InOutSameDiv{
  position: relative;
  width: calc(100% - 10px);
  height: calc(100% - 40px);
  top: 10px;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  font-weight: normal;
}

.InOutSameDivTop{
  position: relative;
  width: 100%;
  height: 25px;
  top: 0px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
}

.InOutSameDivBottomActive{
  position: relative;
  width: calc(100% - 4px);
  padding-top: 5px;
  padding-bottom: 5px;
  height: calc(100% - 30px);
  top: 0px;
  border: solid 2px var(--skillRowWeiss);
  overflow: auto;
  display: block;
}

.InOutSameDivBottomInActive{
  position: relative;
  width: calc(100% - 4px);
  padding-top: 5px;
  padding-bottom: 5px;
  height: calc(100% - 30px);
  top: 0px;
  border: solid 2px var(--skillRowWeiss);
  overflow: auto;
  display: none;
}

.sameTopMenuActive, .sameTopMenuInActive {
  position: relative;
  height: 100%;
  padding-left: 5px;
  border-left: solid 2px var(--skillRowWeiss);
  border-top: solid 2px var(--skillRowWeiss);
  border-right: solid 2px var(--skillRowWeiss);
  flex: 1;
}

.sameTopMenuActive {
  background-color: var(--skillRowWeiss);
  color: var(--skillRowLichtblau);
  font-weight: bold;
}

.sameTopMenuInActive {
  background-color: var(--transparent);
  color: var(--skillRowWeiss);
}

.userExpertiseInClass, .userSkillsInClass, .userDataOutClass {
  position: relative;
  left: 0px;
  top: 0px;
  width: 840px;
  height: calc(100% - 1em);
  background-color: var(--transparent);
}

.userExpertiseInAdminClass, .userSkillsInAdminClass, .userDataOutAdminClass, .userEmplInAdminClass {
  position: relative;
  left: 0px;
  top: 0px;
  width: 1140px;
  overflow: hidden;
  height: max-content;
  background-color: var(--transparent);
}

.userEmplInAdminClass{
  width: 950px !important;
}


.userExpertiseRowClass, .userSkillsRowClass, .userRowOutClass, .userRowOutMaxClass, .userRowOutHeadClass {
  position: relative;
  top: 0px;
  left: 0px;
  width: 100%;
  height: max-content;
  border: none;
  background-color: var(--skillRowBlau);
  margin-top: 1px;
  color: var(--skillRowWeiss);
  font-weight: bold;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
}

.userRowOutClass{
  background-color: var(--skillRowLichtblau) !important;
  height: 40px !important;
}

.userRowOutMaxClass{
  background-color: var(--errorBlueStat) !important;
}

.userRowOutHeadClass{
  background-color: var(--errorBlueStat) !important;
  height: 40px !important;
}


.userExpertiseRowLeftClass, .userSkillsRowLeftClass{
  position: relative;

  width: calc(100% - 240px);
  height: 100%;
  background-color: var(--transparent);
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
  padding-left: 15px;
}

.userExpertiseRowLeftAdminClass, .userSkillsRowLeftAdminClass{
  position: relative;
  float: left;
  width: calc(100% - 350px);
  height: 100%;
  background-color: var(--transparent);
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
  padding-left: 15px;
}

.userRowLeftTableClass{
  font-weight: normal;
  
}

.userExpertiseRowRightClass, .userSkillsRowRightClass {
  position: relative;

  width: 240px;
  height: 100%;
  background-color: var(--transparent);
  display: flex;
  flex-direction: row;
  justify-content: right;
  align-items: center;
  margin-right: 0px;
}

.userExpertiseRowRightDownClass, .userSkillsRowRightDownClass {
  position: relative;
  float: left;
  width: 240px;
  background-color: var(--transparent);
  display: flex;
  flex-direction: row;
  justify-content: right;
  align-items: center;
}

.userExpertiseRowRightAdminClass, .userSkillsRowRightAdminClass {
  position: relative;
  float: left;
  width: 340px;
  height: 100%;
  background-color: var(--transparent);
  display: flex;
  flex-direction: row;
  justify-content: right;
  align-items: center;
}

.userRowInLeftClass {
  position: relative;
  float: left;
  width: calc(100% - 365px);
  height: 100%;
  padding-left: 5px;
  background-color: var(--transparent);
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
}

.userRowInRightClass {
  position: relative;
  float: left;
  width: 355px;
  height: 100%;
  background-color: var(--transparent);
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
}

.userRowInRightClassRight {
  position: relative;
  float: left;
  width: 355px;
  height: 100%;
  background-color: var(--transparent);
  display: flex;
  flex-direction: row;
  justify-content: right;
  align-items: center;
}

.buttonActive{
  border: solid 3px var(--buttonBlau) !important;
}

/* Unterpunkte */
.userExpertiseRowDownOutClass, .userSkillsRowDownOutClass, .userExpertiseRowDownOutAdminClass, .userSkillsRowDownOutAdminClass, .userEmplRowDownOutAdminClass {
  position: relative;
  top: 0px;
  width: 100%;
  height: max-content;
  background-color: var(--transparent);
  z-index: 3;
  display: block;
}

/* ausgeblendet */
.userExpertiseRowDownOutNoClass, .userSkillsRowDownOutNoClass {
  display: none;
}

.userExpertiseRowDownInEvenClass, .userSkillsRowDownInEvenClass, .userEmplRowDownInEvenClass {
  position: relative;
  top: 0px;
  left: 0px;
  width: 100%;
  border: none;
  background-color: var(--skillRowLichtblau);
  margin-top: 1px;
  color: var(--mainWeiss);
  font-size: var(--font-size-moduls5);
  font-weight: normal;
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: stretch;
}

.userEmplRowDownInEvenOddTextClass{
  align-items: flex-start !important;
}

.userExpertiseRowDownInEvenAdminClass, .userSkillsRowDownInEvenAdminClass, .userEmplRowDownInEvenAdminClass {
  position: relative;
  top: 0px;
  left: 0px;
  width: 100%;
  border: none;
  background-color: var(--skillRowLichtblau);
  margin-top: 1px;
  color: var(--mainWeiss);
  font-size: var(--font-size-moduls5);
  font-weight: normal;
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
}

/*Wenn ungerade Zeilen anders aussehen sollen, dann hier ändern*/
.userExpertiseRowDownInOddClass, .userSkillsRowDownInOddClass, .userEmplRowDownInOddClass {
  position: relative;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  border: none;
  background-color: var(--skillRowLichtblau);
  margin-top: 1px;
  color: var(--mainWeiss);
  font-size: var(--font-size-moduls5);
  font-weight: normal;
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: stretch;
}

.userExpertiseRowDownInOddAdminClass, .userSkillsRowDownInOddAdminClass, .userEmplRowDownInOddAdminClass {
  position: relative;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  border: none;
  background-color: var(--skillRowLichtblau);
  margin-top: 1px;
  color: var(--mainWeiss);
  font-size: var(--font-size-moduls5);
  font-weight: normal;
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
}

.userEmplRowDownInEvenAdminClass, .userEmplRowDownInOddAdminClass{
  min-height: 40px;
  max-height: max-content;
}

.userExpertiseRowDownPraeClass, .userSkillsRowDownPraeClass,.userExpertiseRowDownTLClass {
  position: relative;
  float: left;
  width: 19px;
  background-color: var(--skillRowBlau);
  color: var(--skillRowWeiss);
  border-right: solid 2px var(--skillRowWeiss);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.userExpertiseRowDownPraeAdminClass, .userSkillsRowDownPraeAdminClass {
  position: relative;
  float: left;
  width: 20px;
  background-color: var(--skillRowBlau);
  border-right: solid 2px var(--skillRowWeiss);
  color: var(--skillRowWeiss);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.userExpertiseRowDownPraeActiveClass, .userSkillsRowDownPraeActiveClass {
  position: relative;
  float: left;
  width: 20px;
  background-color: var(--fieldBackActive);
  border-right: solid 2px var(--skillRowWeiss);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  color: var(--skillRowBlau);
}

.userExpertiseRowDownPraeActiveAdminClass, .userSkillsRowDownPraeActiveAdminClass {
  position: relative;
  float: left;
  width: 20px;
  background-color: var(--fieldBackActive);
  color: var(--skillRowBlau);
  border-right: solid 2px var(--skillRowWeiss);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.userExpertiseRowDownLeftClass, .userSkillsRowDownLeftClass {
  position: relative;
  float: left;
  width: calc(100% - 302px);
  min-height:40px;
  max-height:max-content;
  background-color: var(--transparent);
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
  padding-left: 5px;
  padding-right: 5px;
  color: var(--mittelSchwarz);
}

.userExpertiseRowDownLeftAdminClass, .userSkillsRowDownLeftAdminClass {
  position: relative;
  float: left;
  width: calc(100% - 420px);
  min-height:40px;
  max-height:max-content;
  background-color: var(--transparent);
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
  padding-left: 5px;
  padding-right: 5px;
  left: 20px;
}

.userExpertiseRowDownRightClass, .userSkillsRowDownRightClass {
  position: relative;
  float: left;
  width: 250px;
  background-color: var(--transparent);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.userExpertiseRowDownRightAdminClass, .userSkillsRowDownRightAdminClass {
  position: relative;
  width: 350px;
  background-color: var(--transparent);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.showSumDownClass{
  position: relative;
  width: 120px;
  height:30px;
  margin-left: 5px;
  text-align: left;
  border: solid 1px var(--transparent);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: left;
}

.managerValueClass, .empValueClass{
  position: relative;
  width: 80px !important;
  height: 20px !important;
  margin-left: 10px;
}

.managerValueClass{
  cursor: pointer;
}

.managerValueExpertiseClass{
  cursor: pointer;
  width: 140px !important;
  max-width: max-content;
}

.empValueClass{
  max-width: max-content;
}

.empValueExpertiseClass{
  width: 140px !important;
}

/*  Hilfe Icons    */
.helpAll {
  position: absolute;
  top: 10px;
  left: 120px;
  width: max-content;
  height: 20px;
}

.helpAllAdmin {
  position: relative;
  min-width: 90px;
  width: max-content;
  height: 20px;
}

.helpAllExpert {
  position: absolute;
  top: 10px;
  left: 165px;
  width: max-content;
  height: 20px;
}

.helpInfo {
  position: relative;
  float: left;
  width: 30px;
  height: 100%;
  background-image: url(../ressources/icons/261.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
}

.helpPic {
  position: relative;
  float: left;
  width: 30px;
  height: 100%;
  background-image: url(../ressources/icons/146.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
}

.helpFiles,.helpFilesCert {
  position: relative;
  float: left;
  width: 30px;
  height: 100%;
  background-image:url(../ressources/icons/042.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
}

.helpFilesCert{
  height: 30px !important;
}

.maCertEndetClass{
  color: var(--errorRed);
  font-size: var(--font-size-moduls3);
  font-weight: bold;
  text-decoration: underline;
  padding-left: 30px;
  padding-bottom: 8px;
}

.certMultiArrow{
  position: relative;
  width: 15px;
  transform: rotate(-90deg);
  margin-right: 5px;
}

.certInfo{
  position: relative;
  width: 15px;
  margin-left: 10px;
}

.helpText {
  position: relative;
  float: left;
  width: 30px;
  height: 100%;
  background-image:url(../ressources/icons/083.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
}

.helpTextSize{
  font-size: 0.9em !important;
}

.helpTextSize2{
  font-size: 0.8em !important;
}

.helpTextPadLeft{
  padding-left: 5px;
}

.helpTextStartClass{
  font-size: var(--font-size-moduls7);
}

.changeManagerShow{
  position: relative;
  float: left;
  width: 30px;
  height: 100%;
  background-image:url(../ressources/icons/072.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
}

.changeManagerShowGroup{
  position: relative;
  float: left;
  width: 30px;
  height: 100%;
  background-image:url(../ressources/icons/155.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
}

.changeManagerNoShow{
  position: relative;
  float: left;
  width: 30px;
  height: 100%;
  background-image:url(../ressources/icons/072.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  visibility: hidden;
}

.placeholder{
  position: relative;
  width: 30px;
  float: left;
}

/*   Mitarbeiter und Mitarbeiter Admin  */
.userEmplRowDownInLeftAdminClass{
  position: relative;
  width: 185px;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
  color: var(--mainWeiss);
  font-weight: bold;
  padding: 5px;
}

.userEmplRowDownInRightAdminClass{
  position: relative;
  width: calc(100% - 200px);
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
  color: var(--mainWeiss);
}

.userEmplRowDownInRightAdminCheckClass{
  position: relative;
  width: max-content;
  margin-right: 100px;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
  color: var(--mainWeiss);
}

.userEmplRowDownInRightAdmin2Class{
  position: relative;
  width: calc(100% - 400px);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: top;
  align-items: left;
  color: var(--mainWeiss);
}

.userEmplRowDownInRightAdmin3Class{
  position: relative;
  width: 200px;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: right;
  align-items: center;
  color: var(--mainWeiss);
}

.userEmplRowDownInRightAdmin4Class{
  position: relative;
  width: calc(100% - 185px);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  color: var(--mainWeiss);
}

.userEmplRowDownInRightAdmin5Class{
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  color: var(--mainWeiss);
}

.miExtRightClass{
  position: relative;
  width: max-content;
  padding-left: 10px;
  padding-right: 10px;
  height: 100%;
}

.buttonBottomAllDiv{
  /*width: calc(100% - 10px); */
  width: 850px;
  text-align: right;
  margin-top: 5px;
  padding-right: 10px;
  height: 3em;
}

/*  Textbox für Infos zu den Modulen  */
.textBoxClass{
  position: absolute;
  width: max-content;
  min-width: 400px;
  max-width: 300px;
  min-height: 70px;
  height: max-content;
  max-height: 50%;
  border: solid 2px var(--skillRowBlau);
  background-color: var(--skillRowWeiss);
  z-index: 3002;
  overflow: auto;
}


.textBoxInTopClass{
  position:relative;
  width: 100%;
  height: 25px;
  background-color: var(--skillRowHellblau);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.textBoxInBottomClass{
  font-size: 0.8em;
  color: var(--skillRowBlau);
  padding: 5px;
  width: calc(100% - 10px);

  white-space: normal;
}

.textBoxShowTextClass{
  border-top: solid 1px var(--skillRowBlau);
  padding-top: 5px;
}

/* Auswahlcontainer für Zahlen  */
.changeValueFieldNoClass{
  position: absolute;
  width: max-content;
  height: 13em;
  display: none;
}

.changeValueFieldClass{
  position: absolute;
  width: max-content;
  height: 13em;
  border: solid 2px var(--skillRowBlau);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  z-index: 3100;
  background-color: var(--weiss);
  padding-top: 5px;
  padding-bottom: 5px;
}

.changeValueFieldDoubleClass{
  position: relative;
  width: 12em;
  height: 13em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 3100;
  background-color: var(--weiss);
}


.changeValueFieldDoubleRightClass{
  position: relative;
  width: max-content;
  max-width: 18em;
  height: 13em;
  border-left: solid 2px var(--skillRowBlau);
  z-index: 3100;
  background-color: var(--weiss);
  overflow: auto;
  padding: 5px;
  display: block;
}

.changeValueFieldDoubleRightNoClass{
  position: relative;
  width: max-content;
  max-width: 18em;
  height: 13em;
  display: none;
}

.topAroundClass {
  position: relative;
  width: 100%;
  height: calc(100% - 4em);
  border: none;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
}

.bottomAroundClass{
  position: relative;
  width: 100%;
  height: 2em;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}

.topAroundTextClass{
  position: relative;
  width: 100%;
  height: calc(100% - 4em);
  display: flex;
  flex-direction: column;
  justify-content: cen ter;
  align-items: left;
  margin-top: 10px;
  overflow: auto;
}

.changeValueFieldInClass{
  position: relative;
  width: 2em;
  height: 100%;
  border: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.changeValueFieldTopClass{
  position: relative;
  width: 100%;
  height: 30%;
  background-image: url(../ressources/icons/508.png);
  background-size: contain;
  background-repeat: no-repeat;
  cursor: pointer;
}

.changeValueFieldMiddleClass{
  position: relative;
  width: 100%;
  height: 40%;
}

.changeValueFieldBottomClass{
  position: relative;
  width: 100%;
  height: 30%;
  background-image: url(../ressources/icons/509.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position:center;
  cursor: pointer;
}

.selectChoiseValueField{
  position: relative;
  width: 100% !important;
  height: 100% !important;
  padding: 0px !important;
  text-align: center;
  background-color: var(--weiss) !important;
  border: solid 1px var(--skillRowBlau);
  font-size: 1em;
  color: var(--skillRowBlau);
}


/* Selectfeld für Auswahl des Wissensstandes */
.downModulSelClass {
  position: relative;
  width: 100px;
  margin: auto;
  border: solid 1px var(--skillRowBlau);
  background-color: var(--skillRowHellblau);
  cursor: pointer;
}

.downModulSelClass option {
  background-color:  var(--skillRowHellblau);
  border: none;
}

.showSelectClass {
  position: absolute;
  width: 100px;
  top: 10px;
  margin: auto;
  border: none;
  background-color: var(--selfSelectBack);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: left;
  align-items: center;
  overflow: hidden;
}

.showSelectAdminClass {
  position: relative;
  width: 100px;
  margin: auto;
  border: none;
  background-color: var(--selfSelectBack);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: left;
  align-items: center;
  overflow: hidden;
}

.showSelectClassExpert {
  position: absolute;
  width: 160px;
  min-width: max-content;
  top: 10px;
  margin: auto;
  border: none;
  background-color: var(--selfSelectBack);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: left;
  align-items: center;
  overflow: hidden;
}

.showSelectClassExpert2 {
  position: absolute;
  width: 160px;
  min-width: max-content;
  top: 10px;
  margin: auto;
  margin-left: 30px;
  border: none;
  background-color: var(--selfSelectBack);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: left;
  align-items: center;
  overflow: hidden;
}

.showSelectClass:hover {
  min-width: 100px;
  width: max-content;
}

.showSelectTopClass {
  position: relative;
  width: 100%;
  height: max-content;
  background-color: var(--selfSelectTop);
  color: var(--selfSelectTopColor);
  padding-top: 2px;
  padding-left: 10px;
  padding-bottom: 2px;
  font-size: var(--font-size-moduls4);
  white-space: nowrap;
}

.showSelectBottomClass {
  display: none;
}

.showSelectBottomClassActive {
  position: relative;
  width: 100%;
  height: max-content;
  background-color: var(--selfSelectBottom);
  color: var(--selfSelectOptionColor);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: left;
  font-size: var(--font-size-moduls4);
}

.optionClass {
  position: relative;
  width: calc(100% - 10px);
  height: max-content;
  background-color: var(--selfSelectTop);
  color: var(--selfSelectOptionColor);
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 5px;
  padding-right: 5px;
}

.optionClassActive {
  position: relative;
  width: calc(100% - 10px);
  height: max-content;
  background-color: var(--selfSelectOptionActive);
  color: var(--selfSelectOptionColor);
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 5px;
  padding-right: 5px;

}

.optionClass:hover {
  background-color: var(--selfSelectOptionHellgrau);
}

/*  eigenes Selectfeld allgemein  */
.showSelectAllClass {
  position: relative;
  width: 100%;
  margin: auto;
  border: solid 1px #000;
  background-color: var(--buttonHellblau);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: left;
  align-items: center;
  overflow: hidden;
}

.showSelectAllClass:hover {
  /*min-width: 100px;
  width: max-content;*/
}

.showSelectAllTopClass {
  position: relative;
  width: 100%;
  height: max-content;
  background-color: var(--buttonHellblau);
  color: var(--schwarz);

  padding-left: 10px;
  padding-bottom: 2px;
  padding-top: 2px;
  font-size: var(--font-size-moduls5);
  white-space: nowrap;
}

.showSelectAllBottomClass {
  display: none;
}

.showSelectAllBottomClassActive {
  position: relative;
  width: 100%;
  height: max-content;
  background-color: var(--buttonHellblau);
  color: var(--schwarz);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: left;
  font-size: var(--font-size-moduls5);
}

.optionAllClass {
  position: relative;
  width: calc(100% - 10px);
  height: max-content;
  background-color: var(--selfSelectTop);
  color: var(--schwarz);
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 5px;
  padding-right: 5px;
}

.optionAllClassActive {
  position: relative;
  width: calc(100% - 10px);
  height: max-content;
  background-color: var(--selfSelectOptionActive);
  color: var(--schwarz);
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 5px;
  padding-right: 5px;
}

.optionAllClass:hover {
  background-color: var(--selfSelectOptionHover);
}

.showPicQuartSelOutClass{
  position: relative;
  float: left;
  width: 98px;
  height: 1.2em;
}

.showPicYearSelOutClass{
  position: relative;
  float: left;
  width: 65px;
  margin-left: 5px;
  height: 1.2em;
}

.showPicTextClass{
  position: relative;
  float: left;
  width: max-content;
  height: 1.2em;
  margin-right: 5px;
}

/* Zahleneingabefeld für Mitarbeiter Fähigkeiten und Kenntnisse */
.showIntChoiseClass {
  position: relative;
  width: 80px;
  height: 1.7em;
  background-color: var(--transparent);
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.showIntChoiseLeftClass {
  position: relative;
  float: left;
  width: 40px;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.showIntChoiseLeftLeftClass {
  position: relative;
  float: left;
  width: 20px;
  height: 100%;
  background-image: url(../ressources/icons/pfeil_einfach_hoch.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top;
  cursor: pointer;
}

.showIntChoiseLeftRightClass {
  position: relative;
  float: left;
  width: 20px;
  height: 100%;
  background-image: url(../ressources/icons/pfeil_doppelt_hoch.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}

.showIntChoiseMiddleClass {
  position: relative;
  float: left;
  width: 55px;
  height: 100%;
  padding-left: 2px;
  padding-right: 0px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.showIntChoiseRightClass {
  position: relative;
  float: left;
  margin-left: -2px;
  width: 20px;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background-image: url(../ressources/icons/062.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: 5px;
  cursor: pointer;
}

.showIntChoiseRightClassVoid {
  position: relative;
  float: left;
  margin-left: -2px;
  width: 20px;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: 5px;
  cursor: pointer;
}

.showIntChoiseRightLeftClass {
  position: relative;
  float: left;
  width: 20px;
  height: 100%;
  background-image: url(../ressources/icons/pfeil_doppelt_runter.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}

.showIntChoiseRightRightClass {
  position: relative;
  float: left;
  width: 20px;
  height: 100%;
  background-image: url(../ressources/icons/pfeil_einfach_runter.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom;
  cursor: pointer;
}

.showIntChoiseFieldClass {
  width: 100% !important;
  height: 1.6em !important;
}

.showIntChoiseFieldRedClass{
  width: 100% !important;
  height: 1.6em !important;
  border: solid 3px var(--errorRed) !important;
}

.showIntChoiseFieldRedClassInactive{
  width: 100% !important;
  height: 1.6em !important;
  border: solid 3px var(--errorRed) !important;
  background-color: var(--errorRed2) !important;
  color: var(--weiss) !important;
  cursor: pointer;
}

.managerValueIntClass{
  width: 80px !important;
  height: 1.6em !important;
  margin-left: 10px;
}

.middleAround {
  width: 90%;
  text-align: center;
  height: max-content;
  font-size: 0.8em;
  color: var(--buttonBlau)!important;
  }

/*   Texteingabe    */
.picSelSendTextClass{
  position: relative;
  float: left;
  width: max-content;
  height: 1.55em;
  font-size: var(--font-size-moduls5)!important;
  top: 0px;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  padding-left: 5px;
  padding-right: 5px;
  left: 12px;
  background-color: var(--skillRowHellblau)!important;
}

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


.picSelSendTextClass:hover, .picSelSendNewClass:hover{
  background-color: var(--buttonBlau)!important;
  color: var(--weiss);
}

.userSelfTextClass{
  position: relative;
  width: 98%;
  height: 5em;
  font-size: var(--font-size-moduls2)!important;
}

.fieldSetText{
  position: relative;
  width: calc(100% - 32px);
  height: 6.5em;
  text-align: center;
  font-size: var(--font-size-moduls6)!important;
  border-radius: 8px;
  border-color: var(--buttonBlau);
  color: var(--buttonBlau);
  margin-bottom: 5px;
}

.fieldSetStat{
  position: relative;
  width: max-content;
  height: max-content;
  border-radius: 5px;
  border-width: 2px;
  border-color: var(--buttonBlau);
  color: var(--buttonBlau);
  padding: 5px;
}

.fieldSetCert{
  position: relative;
  width: class(100% - 10px);
  height: max-content;
  min-height: 6em;
  max-height: 28em;
  border-radius: 5px;
  border-width: 2px;
  border-color: var(--buttonBlau);
  color: var(--schwarz);
  padding: 5px;
  background-color: var(--buttonHellblau);
  overflow: auto;

}

/*  Admin, Manager, QM  */
/* skillsEmployees */
.modulChoiseEmployeesOutClass{
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: top;
  align-items: left;
  z-index: 2;
  overflow: auto;
  overflow-y: hidden;
}

.statTopName{
  position: relative;
  width: max-content;
  height: max-content;
  left: 0px;
  top: 0px;
  border: none;
  padding: 0px;
  margin: 0px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.modulChoiseEmployeesClass, .modulChoiseEmployeesClassSelect{
  position: relative;
  width: max-content;
  height: max-content;
  left: 10px;
  top: 0px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.modulChoiseEmployeesClassSelect{
  width: 67.9em !important;
}

.modulChoiseEmployeesWidthClass{
  width: 57em;
}

.modulChoiseEmployeesWidthClass2{
  width: 60em;
}

.modulChoiseEmployeesActClass{
  position: relative;
  width: 13em;
  height: 1.6em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: var(--buttonBlau);
  color: var(--mainWeiss);
}

.modulChoiseEmployeesActTextClass{
  position: relative;
  width: 13em;
  height: 1.6em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /*margin-top: 0.1em;  */
  background-color: var(--buttonBlau);
  color: var(--mainWeiss);
}

.modulChoiseEmployeesHighClass {
  height: 3.2em;
}

.modulChoiseEmployeesNewClass{
  position: relative;
  width: 11em;
  height: 3.2em;
  left: 0px;
  top: 0px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /*margin-left: 1em;*/
  background-color: var(--buttonLichtblau);
  cursor: pointer;
}

.modulChoiseEmployeesNewClass2{
  position: relative;
  width: 12em;
  height: 3.2em;
  left: 0px;
  top: 0px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /*margin-left: 1em; */
  background-color: var(--errorGreenStat);
  cursor: pointer;
}

.modulChoiseEmployeesCSV_Class{
  position: relative;
  width: 11em;
  height: 3.2em;
  left: 0px;
  top: 0px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /*margin-left: 1em;*/
  background-color: var(--errorGreenStat);
  cursor: pointer;
  visibility: hidden;
}

.modulChoiseEmployeesCSVShowClass{
  position: relative;
  width: max-content;
  height: 1em;
  left: 0px;
  top: 0px;
  margin-top: 0.5em;
  background-color: var(--transparent);
}

.modulChoiseSkillsCSVShowClass{
  position: relative;
  width: max-content;
  height: 1em;
  left: 0px;
  top: 0px;
  margin-top: 0.5em;
  background-color: var(--transparent);
}

.modulChoiseSkillsDateShowClass{
  position: relative;
  width: max-content;
  height: 2em;
  left: 0px;
  top: 0px;
  margin-top: 0.5em;
  background-color: var(--transparent);
}

.modulPrintEmploeesDataClass{
  position: relative;
  width: 68.2em;
  height: 3.5em;
  left: 0px;
  top: 0px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-left: 0.5em;
  margin-top: 10px;
  margin-bottom: 10px;
  /*padding: 0.5em;
  border: solid 2px var(--buttonBlau);*/
}

.printQuarterField{
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  margin-top: 0.8em;
  padding: 0.3em;
  padding-bottom: 0.8em;
  border: solid 2px var(--buttonBlau);
  font-size: var(--font-size-moduls5) !important;
}

.printQuarterFieldLegend{
  font-size: var(--font-size-moduls5) !important;
}

.pastPDF_Field{
  position: relative;
  width: calc(100% - 27px);
  height: max-content;
  font-size: var(--font-size-moduls6);
  margin-bottom: 5px;
}

.tableCellPDF{
  border: solid 1px var(--schwarz);
  width: 32px;
  height: 32px;
  text-align: center;
  font-size: var(--font-size-Cell);
  font-weight: bold;
}

.modulChoiseEmployeesDataClass{
  position: relative;
  width: max-content;
  height: calc(100% - 10em);
  left: 0px;
  top: 0px;
  margin-top: 1em;
  background-color: var(--transparent);
}

.modulChoiseEmploeesContClass{
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: var(--transparent);
  z-index: 3;
}

.modulChoiseEmploeesContClassNo{
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: var(--transparent);
  display: none;
}

.modulChoiseEmploeesContCertClass{
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: var(--mainWeiss);
  z-index: 26;
}

.modulChoiseEmploeesContCertClassNo{
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: var(--transparent);
  display: none;
}

.modulChoiseEmploeesContDataClass{
  position: relative;
  width: 30em;
  height: max-content;
  min-height: 250px;
  max-height: 80%;
  padding-top: 5px;
  padding-bottom: 5px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  margin: auto;
  margin-top: 40px;
  overflow: auto;
  background-color: var(--buttonLichtblau);
  z-index: 3;
}

.modulChoiseEmploeesContDataCertClass{
  position: relative;
  width: 30em;
  height: max-content;
  min-height: 250px;
  max-height: 80%;
  padding-top: 5px;
  padding-bottom: 5px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  margin: auto;
  margin-top: 40px;
  overflow: auto;
  background-color: var(--buttonLichtblau);
  opacity: 1;
  z-index: 4;
}

.modulChoiseEmploeesContDataSelectClass{
  position: relative;
  width: 25em;
  height: max-content;
  padding: 1px;
  margin-bottom: 2px;
  background-color: var(--transparent);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.modulChoiseEmploeesLeftClass{
  position: relative;
  width: 17em;
  height: 3em;
  padding: 0px;
  margin: 0px;
  background-color: var(--buttonHellblau);
  color: var(--buttonBlau);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.modulChoiseEmploeesLeftProbeClass{
  position: relative;
  width: 17em;
  height: 3em;
  padding: 0px;
  margin: 0px;
  background-color: var(--errorYellowStat);
  color: var(--buttonBlau);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.modulChoiseEmploeesLeftDeleteClass{
  position: relative;
  width: 17em;
  height: 3em;
  padding: 0px;
  margin: 0px;
  background-color: var(--errorRed);
  color: var(--buttonBlau);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.modulChoiseEmploeesLeftNoStatClass{
  position: relative;
  width: 17em;
  height: 3em;
  padding: 0px;
  margin: 0px;
  background-color: var(--errorOrangewStat);
  color: var(--buttonBlau);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.modulChoiseEmploeesLeftInactiveClass{
  position: relative;
  width: 17em;
  height: 3em;
  padding: 0px;
  margin: 0px;
  background-color: var(--userInactive);
  color: var(--buttonBlau);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.modulChoiseEmploeesRightClass{
  position: relative;
  width: 7.5em;
  height: 3em;
  padding: 0px;
  margin-left: 0.5em;
  background-color: var(--buttonHellblau);
  color: var(--buttonBlau);
  font-weight: bold;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.closeDivButClass{
  position: relative;
  width: 30em;
  height: 2em;
  background-color: var(--buttonHellblau);
  color: var(--buttonBlau);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  margin: auto;
  margin-top: 5px;
  border: solid 1px var(--buttonBlau);
  font-weight: bold;
}

/*  Mitarbeiter direkt, Mitarbeiter admin */
.miTextClass{
  position: relative;
  width: 48em;
  height: 3em;
  color: var(--buttonBlau);
}

.miRollSelClass{
  position: relative;
  width: 15em;
  height: 2.3em;
  border: solid 1px var(--buttonBlau);
}

.miRollSelClassHeight{
  position: relative;
  width: 15em;
  height: 2.3em;
  max-height: 15em;
  border: solid 1px var(--buttonBlau);
}

.statSelClass{
  position: relative;
  width: 14em;
  height: 3.50em;
  border: solid 1px var(--buttonBlau);
  /*margin-right: 5px;*/
}

.statSelClassQuarter{
  position: relative;
  width: 11em;
  height: 1.5em;
  border: solid 1px var(--buttonBlau);
}

.countrySelClass{
  position: relative;
  width: 100%;
  height: 1.9em;
  border: solid 1px var(--buttonBlau);
  background-color: var(--buttonDarkWhite1);
}

.miSaveButtonClass{
  margin-right: 5px;
  cursor: pointer;
}

.bigCheck{
  transform: scale(2);
}

.spaceClass{
  height: 2em !important;
}

.spaceClass2{
  height: 0.6em !important;
}

.spaceClass3{
  height: 1em !important;
}

.spaceClass4{
  height: 0.3em !important;
}

.helpChangeAdmin{
  position: absolute;
  right: 2px;
  top: 2px;
  width: 10px;
  height: 10px;
  cursor: help !important;
  background-color: var(--errorRed);
}

.helpChangeAdminInt{
  position: absolute;
  right: 25px;
  top: 0px;
  width: 10px;
  height: 10px;
  cursor: help !important;
  background-color: var(--errorRed);
}

.helpChangeAdminText{
  position: absolute;
  right: -120px;
  top: -20px;
  width: 200px;
  height: 100px;
  background-color: var(--weiss);
  border-color: var(--buttonHellblau);
  color: var(--schwarz);
  z-index: 10000 !important;
}

.helpChangeAdminSkill{
  position: absolute;
  right: 125px;
  top: 2px;
  width: 10px;
  height: 10px;
  cursor: help !important;
  background-color: var(--errorRed);
}

.helpChangeAdminSkillInt{
  position: absolute;
  right: 158px;
  top: 0px;
  width: 10px;
  height: 10px;
  cursor: help !important;
  background-color: var(--errorRed);
}



/*       Statistiken           */
.allStatistikOutClass{
  position: relative;
  min-width: 1410px;
  width: initial;
  border: none;
  height: 100%;
  max-height: calc(100% - 4em);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-content: flex-start;
}

.allStatistikLeftClass{
  position: relative;
  width: 100%;
  height: 100%;
  /*max-height: 1040px;*/
  background-color: solid 1px var(--mainWeiss);
  display: flex;
  flex-direction: column;
  justify-content: top;
  align-content: center;
  overflow: auto;
}

.allStatistikLeftFieldClass{
  position: relative; width: 48%;
  left: 10px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-content: center;
  }

.allStatistikRightClass{
  position: relative;
  width: 48%;
  height: 100%;
 /*   max-height: 1040px;*/
  background-color: var(--mainWeiss);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-content: center;
  overflow: auto;
}

.userSkillsRowStatistikClass, .userSkillsRowStatistikClassTop{
  position: relative;
  width: 100%;
  min-height: 1.4em;
  max-height: max-content;
  background-color: var(--skillRowBlau);
  margin-bottom: 0.2em;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-content: center;
}

.userSkillsRowLeftStatistikClass{
  position: relative;
  float: left;
  width: calc(100% - 125px);
  max-width: 740px;
  height: 100%;
  background-color: var(--transparent);
  color: var(--mainWeiss);
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
  padding-left: 5px;
  font-size: 0.9em;
  overflow-x: auto;
}

.userSkillsRowRightStatistikClass{
  position: relative;
  float: right;
  width: 125px;
  background-color: var(--transparent);
  color: var(--mainWeiss);
  font-weight: bold;
  display: flex;
  flex-direction: row;
  justify-content: right;
  align-items: center;
  padding-right: 10px;
  font-size: 0.9em;
}

.userSkillsRowRightStatistikClassTop{
  position: relative;
  float: right;
  width: 340px;
  background-color: var(--transparent);
  color: var(--mainWeiss);
  font-weight: bold;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  padding-right: 10px;
  font-size: 0.9em;
}

.userExpertiseRowLeftStatistikClass{
  position: relative;
  float: left;
  width: calc(100% - 185px);
  max-width: 740px;
  height: 100%;
  background-color: var(--transparent);
  color: var(--mainWeiss);
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
  padding-left: 5px;
  font-size: 0.9em;
  overflow-x: auto;
  top: 0.5em;
}

.userExpertiseRowRightStatistikClass{
  position: relative;
  float: right;
  width: 180px;
  background-color: var(--transparent);
  color: var(--mainWeiss);
  font-weight: bold;
  display: flex;
  flex-direction: row;
  justify-content: right;
  align-items: center;
  padding-right: 10px;
  font-size: 0.9em;
}

.userSkillsRowLeftStatistikHeadClass{
  position: relative;
  float: left;
  min-width: 320px;
  width: 100%;
  height: 2em;
  background-color: var(--transparent);
  color: var(--mainWeiss);
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
  padding-left: 5px;
  font-size: 0.9em;
  font-weight: bold;
}

.showSumDownStatistikClass, .showSumDownStatistikClassTop{
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: right;
  align-items: center;
  white-space: nowrap;
  font-family: Arial, Helvetica, sans-serif;
  font-size: var(--font-size-moduls4);
  }

.showSumDownExpertStatistikClass{
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  }

.statSelDayClass{
  position: relative;
  width: 3.5em;
  height: 1.5em;
  border: solid 1px var(--buttonBlau);
}

.statSelYearClass{
  position: relative;
  width: 5em;
  height: 1.5em;
  border: solid 1px var(--buttonBlau);
}

.statSelDayClass2{
  position: relative;
  width: 3.5em;
  height: 1.35em;
  margin-top: 2px;
  border: solid 1px var(--buttonBlau);
}

.statSelYearClass2{
  position: relative;
  width: 5em;
  height: 1.35em;
  margin-top: 2px;
  border: solid 1px var(--buttonBlau);
}

.statSelQuarterClass{
  position: relative;
  width: 8em;
  height: 1.55em;
  border: solid 1px var(--buttonBlau);
}

.statSelQuarter2Class {
  position: relative;
  width: 7.5em;
  height: 1.55em;
  border: solid 1px var(--buttonBlau);
}

.statSelQuarter3Class{
  position: relative;
  width: 7.5em;
  height: 1.45em;
  border: solid 1px var(--buttonBlau);
}

.statSelQuarter3Class{
  margin-top: 2px;
}

.statAdminSelQuarterClass{
  position: relative;
  width: 8em;
  height: 1.67em;
  border: solid 1px var(--buttonBlau);
}

.adminSkillChoiseDateTopClass{
  position: relative;
  width: max-content;
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
  margin-top: 5px;
  margin-left: 10px;
  visibility: hidden;
}

.statSelDayClass2, .statSelYearClass2, .statSelQuarter2Class, .statSelQuarter3Class{
  font-size: var(--font-size-moduls6) !important;
}

.selSetTime{
  font-size: var(--font-size-moduls6) !important;
  height: 1.6em !important;
}

.sendQuarterButton{
  cursor: pointer;
  background-color: var(--buttonLichtblau) !important;
  border-color: var(--buttonLichtblau) !important;
  font-size: var(--font-size-moduls4) !important;
  margin-top: 2px;
  height: 3.7em;
}

.printHelpTextClass{
  position: relative;
  font-size: 0.77em;
  width: 88.3em;
  height: 1.2em;
  left: 10px;
  top: 10px;
  background-color: var(--errorRed);
  color: var(--weiss);
  padding-top: 4px;
  padding-bottom: 4px;
  text-align: center;
}

.innerSkillTop{
  width: 100%;
  text-align: right;
  font-family: Arial, Helvetica, sans-serif;
  font-size: var(--font-size-moduls4);
}

/*   große Statistik    */
.allStatistikOutAllClass{
  position: relative;
  max-width: 100%;
  border: none;
  height: calc(100% - 112px);
  overflow: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-content: center;
}

.allStatistikOut2Class{
  position: relative;
  width: 100%;
  max-width: 1850px;
  min-width: max-content;
  border: none;
  height: max-content;
}

.allStatistikOutTopClass{
  position: relative;
  width: 100%;
  min-width: max-content;
  max-width: 1850px;
  border: none;
  height: max-content;
}

.allStatistikInAllClass{
  position: relative;
  width: max-content;
  max-width: 100%;
  border: none;
  height: max-content;
  padding-right: 5px;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-content: center;
}


.allStatistikInLeftClass, .allStatistikInLeftClassSum, .allStatistikInSkillClass{
  position: relative;
  width: 300px;
  border: none;
  height: max-content;
  overflow: hidden;
  display: flex;
  padding-left: 5px;
  padding-top: 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--schwarz);
  background-color: var(--buttonLichtblau);
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-content: center;
  font-size: 0.8em;
}

.allStatistikInSkillClass{
  border-bottom: none;
  min-height: 30px;
}

.allStatistikInLeftClassSum{
  width: 290px !important;
  justify-content: right !important;
  padding-right: 10px;
}

.allStatistikInLeftClassSpace{
  position: relative;
  width: 300px;
  border: none;
  height: 18px;
  overflow: hidden;
  padding-left: 5px;
  padding-top: 4px;
  padding-bottom: 4px;
  font-size: 0.8em;
}

.allStatistikNoBackLeftClass{
  position: relative;
  width: 300px;
  border: none;
  height: max-content;
  overflow: hidden;
  display: flex;
  padding-left: 5px;
  padding-top: 4px;
  padding-bottom: 4px;
  background-color: var(--transparent);
  display: flex;
  flex-direction: column;
  justify-items: center;
  align-items: left;
}

.allStatistikInRightClass{
  position: relative;
  width: calc(100% - 300px);
  border: none;
  overflow: hidden;
  display: flex;
  padding-left: 5px;
  flex-direction: row;
  justify-content: left;
  align-content: center;
}

.allStatistikInRightTopClass{
  position: relative;
  width: calc(100% - 300px);
  height: max-content;
  border: none;
  overflow: hidden;
  padding-left: 5px;
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-content: center;
}

.allStatistikInRightTopClassDeg{
  position: relative;
  width: calc(100% - 300px);
  border: none;
  overflow: hidden;
  padding-left: 5px;
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-content: center;
  height: 105px;
}

.statistikTopSpaceClass{
  position: relative;
  width: 90%;
  border: none;
  height: 5px;

}

.allStatistikInRight3FieldsClass, .allStatistikInRight3FieldsFirstClass, .allStatistikInRight3FieldsEndClass, .allStatistikInRight3FieldsTopEndClassAdmin,
.allStatistikInRight3FieldsFirstTopClass, .allStatistikInRight3FieldsTopEndClass, .allStatistikInRight3FieldsFirstClassSUM,
.allStatistikInRight3FieldsEndClassSUM, .allStatistikInRight3FieldsFirstTopClassSUM, .allStatistikInRight3FieldsTopEndClassSUM{
  position: relative;
  width: 70px;
 /* height: 100%;*/
  margin-right: 8px !important;
  border-left: 2px solid var(--schwarz);
  border-right: 2px solid var(--schwarz);
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-content: center;
  font-size: 0.8em;
}

.allStatistikInRight3FieldsTopClass, .allStatistikInRight1FieldsSecondNameClass{
  position: relative;
  width: 70px;
  height: 100%;
  margin-right: 8px !important;
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-content: center;
  font-size: 0.8em;
  border-left: solid 2px var(--buttonLichtblau);
  border-right: solid 2px var(--buttonLichtblau);
}

.allStatistikInRight1FieldsSecondNameClass {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-weight: normal;
  }

.allStatistikInRight3FieldsTopClass_noVisibleMargin{
  position: relative;
  width: 68px;
  height: calc(100% - 8px);
  margin-right: 8px !important;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-content: center;
  font-size: 0.8em;
  padding-top: 4px;
  padding-left: 1px;
  padding-right: 1px;
  border-left: solid 2px var(--transparent);
  border-right: solid 2px var(--transparent);
}

/*.allStatistikInRight3FieldsTopClass_noVisibleMargin{
  border-left: solid 2px var(--transparent);
  border-right: solid 2px var(--transparent);
}*/

.allStatistikInRight1FieldsTopClass{
  position: relative;
  width: 64px;
  height: 100%;
  margin-right: 8px !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  font-size: 0.8em;
}

.allStatistikInRight1FieldsTopClassAdmin{
  position: relative;
  width: 68px;
  height: calc(100% - 4px);
  margin-right: 8px !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  font-size: 0.8em;
  /*border-left: 2px solid var(--buttonHellblau);
  border-right: 2px solid var(--buttonHellblau);*/
  border-left: 2px solid var(--buttonHellblau);
  border-top: 2px solid var(--buttonHellblau);
  border-bottom: 2px solid var(--buttonHellblau);
  border-right: 2px solid var(--buttonHellblau);
  padding-left: 2px;
}

.allStatistikInRight1FieldsTopClassEvenAdmin{
  position: relative;
  width: 68px;
  height: calc(100% - 4px);
  margin-right: 8px !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  font-size: 0.8em;
  /*border-left: 2px solid var(--buttonHellblau);
  border-right: 2px solid var(--buttonHellblau);*/
  border: 2px solid var(--statistikDunkelBlau);
  padding-left: 2px;
}

.allStatistikInRight3FieldsClass{
  border-top: 1px solid var(--schwarz);
}

.allStatistikInRight3FieldsFirstClass{
  border-top: 2px solid var(--schwarz);
}

.allStatistikInRight3FieldsFirstClassSUM{
  justify-content: center !important;
  border-top: 2px solid var(--schwarz);
  padding-top: 3px;
  height: calc(100% - 3px) !important;
}

.allStatistikInRight3FieldsEndClass{
  border-top: 1px solid var(--schwarz);
  border-bottom: 2px solid var(--schwarz);
  height: calc(100% - 3px) !important;
}

.allStatistikInRight3FieldsEndClassSUM{
  justify-content: center !important;
  border-top: 2px solid var(--schwarz);
  border-bottom: 2px solid var(--schwarz);
  height: calc(100% - 7px) !important;
  padding-top: 3px;
}

.allStatistikInRight3FieldsTopEndClass{
  background-color: var(--weiss);
  border-top: 2px solid var(--schwarz);
  border-bottom: 2px solid var(--schwarz);
  height: calc(100% - 4px) !important;
}

.allStatistikInRight3FieldsTopEndClassAdmin{
  background-color: var(--weiss);
  border-top: 2px solid var(--schwarz);
  border-bottom: 2px solid var(--schwarz);
  height: calc(100% - 4px) !important;
  padding-top: 2px;
  padding-bottom: 2px;
 /* width: 68px !important;  */
}

.allStatistikInMarginClass{
  margin-right: 5px;
}

.allStatistikInMarginEndClass{
  margin-right: 0px;
}

.allStatistikInMarginAllEndClass{
  border-left: 1px solid var(--schwarz) !important;
  border-right: 1px solid var(--schwarz) !important;
}

.allStatistikInBackEvenClass{
  background-color: var(--buttonHellblau);
}

.allStatistikInBackOddClass{
  background-color: var(--buttonMinBlau);
}

.allStatistikInBackMainClass{
  background-color: var(--buttonLichtblau);
}

.allStatistikInBackTransClass{
  background-color: var(--transparent);
}

.allStatistikInBackMainClass2{
  background-color: var(--buttonHellblau);
}

.allStatistikInBackMainClass3{
  background-color: var(--buttonLichtblau);
}

.allStatistikInBackMainClass4{
  color: var(--statistikDunkelBlau);
  white-space: nowrap;
  overflow: auto;
}



.allStatistikInRight3FieldsFirstTopClass{
  border-top: 2px solid var(--schwarz);
  height: 155px !important;
  overflow: auto;
  background-color: var(--weiss);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-content: center;
}

.allStatistikInRight3FieldsFirstTopClassAdmin{
  border-top: 2px solid var(--schwarz);
  height: 155px !important;
  overflow: auto;
  background-color: var(--weiss);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-content: center;
  width: 70px !important;
}

.allStatistikInRight3FieldsFirstTopClassSUM{
  border: none !important;
  background-color: var(--transparent) !important;
}

.allStatistikInRight3FieldsTopEndClassSUM{
  border: 2px solid var(--schwarz) !important;
  background-color: var(--weiss) !important;
  justify-content: center !important;
  align-items: center;
  /*padding-top: 4px; */
}

.statistikExt{
  justify-content: center !important;
  height: calc(100% - 4px) !important;
  padding-top: 4px !important;
  background-color: var(--weiss) !important;
}

.statistikExt2{
  height: calc(100% - 7px) !important;
}

.statistikExt3{
  justify-content: center !important;
  height: 100% !important;
}

.statExpBigOut{
  position: relative;
  width: 180px;
  height: max-content;
  background-color: var(--transparent);
  display: flex; flex-direction: column;
  justify-content: space-between;
  align-content: center;
  padding: 3px;
}

.statExpBigIn3{
  position: relative;
  width: 100%;
  height: max-content;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-content: center;
  background-color: var(--transparent);
}

.statExpBigInRow5, .statExpBigInRow5Middle{
  position: relative;
  width: 15%;
  height: 22px;
  border: solid 1px #000;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-size: var(--font-size-moduls5);
  background-color: var(--weiss) !important;
}

.statExpBigInRow5Middle{
  font-weight: bold;
  font-size: var(--font-size-moduls5);
}

.statExpBigIn1{
  position: relative;
  width: 20%;
  height: 22px;
  border: solid 1px #000;
  color: #000000;
  background-color: var(--weiss) !important;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-size: var(--font-size-moduls5);
}

.statExpBigInNo{
  position: relative;
  width: 20%;
  height: 22px;
  border-left: solid 1px transparent;
  border-right: solid 1px transparent;
  text-align: center;
  background-color: var(--transparent);
}

.showSumExp{
  position: relative;
  width: max-content;
  min-height: 40px;
  height: max-content;
  font-size: var(--font-size-moduls3);
  font-weight: bold;
  top: 10px;
  left: 10px;
}

.userSkillsRowLeftStatistikClassSum{
  position: relative;
  float: left;
  width: calc(100% - 185px);
  max-width: 740px;
  height: 100%;
  background-color: var(--transparent);
  color: var(--skillRowBlau);
}



/*   TOP schräg  */
.allStatistikInRight3FieldsFirstTopClassDeg {
  position: relative;
  border: 2px solid var(--schwarz);
  height: 49px !important;
  overflow: auto;
  background-color: var(--weiss);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-content: flex-end;
  transform: rotate(-45deg);
  left: -3px;
  top: 47px;
  width: 139px;
  margin-right: -61px !important;
}

.allStatistikInRight3FieldsFirstTopClassDegAdmin {
  position: relative;
  border: 2px solid var(--schwarz);
  height: 49px !important;
  overflow: auto;
  background-color: var(--weiss);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-content: flex-end;
  transform: rotate(-45deg);
  left: -3px;
  top: 47px;
  width: 140px;
  margin-right: -62px !important;
}

.tableTopDeg{
  width: 100%;
  font-size: 0.8em;
  text-align: right;
  /*color: var(--buttonBlau);  */
}

.adminSkillStatistikField, .adminSkillStatistikFieldTop, .adminSkillStatistikFieldBottom, .adminSkillStatistikFieldBottomRight{
  position: relative;
  width: 72px;
  height: calc(100% - 2px);
  margin-right: 8px !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-content: flex-end;
  font-size: 0.8em;
  text-align: right;
  background-color: var(--weiss)
}

.adminSkillStatistikFieldTop{
  justify-content: flex-start !important;
}

.adminSkillStatistikFieldBottom{
  justify-content: flex-end !important;
}

.adminSkillStatistikFieldBottomRight{
  margin-left: 1px;
}

.allStatistikInRight3FieldsFirstTopClass a {text-decoration: none;}
.allStatistikInRight3FieldsFirstTopClass a:link{text-decoration: none;}
.allStatistikInRight3FieldsFirstTopClass a:visited{text-decoration: none;}
.allStatistikInRight3FieldsFirstTopClass a:active{text-decoration: none;}
.allStatistikInRight3FieldsFirstTopClass a:hover{text-decoration: none;}

.allStatistikInRight1FieldClass{
  position: relative;
  width: calc(100% / 3);
  height: calc(100% - 2px);
  border: none;
  overflow: hidden;
  /*border-right: 1px solid var(--schwarz);  */
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-content: center;
  padding-top: 2px;
}

.allStatistikInRight1FieldBottomClass{
  position: relative;
  width: calc(100% / 3);
  height: 100%;
  border: none;
  overflow: hidden;
  /*border-right: 1px solid var(--schwarz);  */
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  /*align-content: center;*/
}

.allStatistikInRight1FieldEndClass{
  position: relative;
  width: calc(100% / 3);
  height: calc(100% - 4px);
  overflow: hidden;
  border-bottom: 2px solid var(--schwarz);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-content: center;
  padding-top: 2px;
}

.allStatistikInRight1FieldMiddleEndClass{
  position: relative;
  width: calc(100% / 3);
  height: calc(100% - 4px);
  overflow: hidden;
  border-bottom: 2px solid var(--schwarz);
  border-left: 1px solid var(--schwarz);
  border-right: 1px solid var(--schwarz);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-content: center;
  padding-top: 2px;
}

.statisticRed{
  background-color: var(--errorRedStat);
}

.statisticGreen{
  background-color: var(--errorGreenStat);
}

.statisticBlue{
  background-color: var(--buttonLichtblau);
}

.statisticWhite{
  background-color: var(--weiss);
}

.statisticRedText{
  color: var(--errorRedStat);
}

.statisticGreenText{
  color: var(--errorGreenStat);
}

.statisticBlueText{
  color: var(--errorBlueStat);
}

.statisticWhiteText{
  color: var(--weiss);
}

.statistikLightBlue{
  background-color: var(--buttonHellblau);
}

.statNorm{
  color: var(--schwarz);
  font-weight: bold;
}

.statDown{
  color: var(--errorRedStat);
  font-weight: bold;
}

.statUp{
  color: var(--errorGreenStat);
  font-weight: bold;
}

.legendTable1, .legendTable2, .legendTable3, .legendTable4{
  position: relative;
  width: 10px;
  height: max-content;
  white-space: nowrap;
  font-weight: bold;
  color: var(--schwarz);
}

.legendTable1{
 background-color: var(--transparent);
}

.legendTable2{
 background-color: var(--errorBlueStat);
}

.legendTable3{
 background-color: var(--errorGreenStat);
}

.legendTable4{
 background-color: var(--errorRedStat);
}

.legendTable5, .legendTable6{
  position: relative;
  height: max-content;
  white-space: nowrap;
  font-weight: normal;
  background-color: var(--transparent);
  color: var(--schwarz);
  padding-left: 2px;
  padding-right: 5px;
}

.legendTable5{
  width: 70px;
}

.legendTable6{
  width: 80px;
}

.allStatistikInMiddle1FieldClass{
  position: relative;
  width: calc(100% / 3);
  height: 100%;
  border: none;
  overflow: hidden;
  border-left: 1px solid var(--schwarz);
  border-right: 1px solid var(--schwarz);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-content: center;
  padding-top: 2px;
}

.statistikLegendClass{
  position:relative;
  width: 100%;
  height: max-content;
  color: var(--buttonBlau);
  font-size: 0.8em;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-content: center;
}

.statistikLegendTableClass{
  border: 1px solid var(--buttonBlau);
  padding-left: 10px;
  padding-right: 10px;
  background-color: var(--weiss);
}

.statistikBoldClass{
  font-weight: bold;
  color:var(--buttonBlau);
}

.statistikBoldClass2{
  font-weight: bold;
  color:var(--schwarz);
}

/*  menu admin  */
.adminMenuOut{
  position: relative;
  width: calc(100% - 50px);
 /* min-width: 1000px;*/
  height: calc(100% - 20px);
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: top;
  padding: 5px;
  border: none;
 /* overflow: auto; */
  /*overflow-x: hidden; */
}

.adminEmployeesOut{
  max-width: 60em;
  border: solid 1px var(--schwarz);
  position: relative;
  height: calc(100% - 20px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 5px;
  border: none;
}

.adminEmployeesSumOut{
  max-width: 80em;
  border: solid 1px var(--schwarz);
  position: relative;
  height: calc(100% - 20px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 5px;
  border: none;
}

.adminEmployeesInBottom{
  position: relative;
  width: 100%;
  height: calc(100% - 30px);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  border: solid 1px var(--schwarz);
  margin-top: 2px;
  background-color: var(--weissTrans);
}

.adminEmployeesInTop, .adminEmployeesInTop2, .adminEmployeesInTop2_active{
  position: relative;
  width: calc(100% - 5px);
  height: 30px;
  background-color: var(--buttonLichtblau);
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding-left: 5px;
}

.adminEmployeesInTop2{
  height: 1px !important;
}

.adminEmployeesInTop2_active{
  background-color: var(--weiss) !important;
  height: 30px !important;
}

.adminEmployeesInBottomBonus{
  position: relative;
  width: 100%;
  height: calc(100% - 100px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  border: solid 1px var(--schwarz);
  margin-top: 2px;
  background-color: var(--weissTrans);
}

.adminEmployeesBonusTopClass{
  position: relative;
  width: calc(100% - 5px);
  height: max-content;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding-left: 5px;
  margin-top: 10px;
}

.adminEmployeesBonusClass {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 15px;
  font-size: var(--font-size-moduls5);
  background-color: var(--weissTrans);
  overflow: auto;
}

.tdBonusHead{
  font-weight: bold;
  color: var(--schwarz);
  background-color: var(--buttonLichtblau);
  padding: 2px;
}

.tdBonusFirst{
  font-weight: normal;
  color: var(--schwarz);
  background-color: var(--buttonLichtblau);
  padding: 2px;
}

.tdBonus, .tdBonusSum{
  font-weight: normal;
  font-size: var(--font-size-moduls6);
  color: var(--schwarz);
  background-color: var(--buttonHellblau);
  padding: 2px;

}

.tdBonusVoid{
  font-weight: normal;
  color: var(--schwarz);
  background-color: var(--weiss);
  height: 10px;
}

.tdBonusHorVoid{
  font-weight: normal;
  color: var(--schwarz);
  background-color: var(--weiss);
  width: 5px;
}

.bonusText{
  font-weight: normal;
  width: 60px !important;
  height: 100%;
  border: none !important;
}

.tdBonusSum{
  font-weight: bold;
}

.bonusButMonth, .bonusButMonthActive, .bonusButSave, .bonusButSaveExcel{
  width: 90px !important;
}

.bonusButMonthActive {
  border-width: 2px !important;
}

.bonusButSave{
  margin-right: 5px;
  background-color: var(--buttonHellblau) !important;
}

.bonusButSaveExcel{
  width: 175px !important;
  margin-right: 5px;
}

.bonusRowOut{
  position: relative;
  width: 100%;
  height: max-content;
  border: none;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.bonusRowIn,.bonusRowInBlanco{
  position: relative;
  width: max-content;
  height: max-content;
  border: none;
  padding: 0px;
  margin: 0px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
}

.bonusRowIn{
  margin-left: 5px;
}

.blancoFrame{
  border: solid 3px var(--fieldBackActive);
  margin-left: 5px;
  }

.bonusField,.bonusFieldEnd,.bonusFieldL,.bonusFieldR,.bonusFieldBottom,.bonusFieldRPic,.bonusFieldL2 {
  position: relative;
  height: 1.8em !important;
  border-left: 1px solid var(--schwarz);
  border-bottom: 1px solid var(--schwarz);
  padding: 0px;
  margin: 0px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

}

.bonusFieldText,.bonusFieldTextR,.bonusFieldTextM,.bonusFieldTextL{
  position: relative;
  height: calc(100% - 0.5em) !important;
  width: calc(100% - 0.5em) !important;
  padding: 1px !important;
  margin: 1px !important;
  border: none !important;
  background-color: var(--weiss) !important;
  color: var(--statistikDunkelBlau) !important;
}

.bonusFieldTextR{
  text-align: right;
}

.bonusFieldTextM{
  text-align: center;
  font-weight: bold;
  color: var(--schwarz) !important;
}

.bonusFieldTextL{
  text-align: left;
  font-weight: bold;
  color: var(--schwarz) !important;
}

.bonusFieldRPic{
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}

.bonusFieldStart{
  height: 1.6em !important;
}

.bonusFieldEnd{
  border-right: 1px solid var(--schwarz);
}

.bonusFieldL{
  align-items: flex-start;
  padding-left: 2px;
}

.bonusFieldL2{
  align-items: flex-start;
  padding-left: 8px;
}

.bonusFieldR{
  align-items: flex-end;
}

.bonusFieldTop{
  border-top: 1px solid var(--schwarz);
}

.bonusFieldWidth50{
  width: 50px;
}

.bonusFieldWidth80{
  width: 80px;
}

.bonusFieldWidth100{
  width: 100px;
}

.bonusFieldWidth150{
  width: 150px;
}

.bonusFieldWidth200{
  width: 200px;
}

.bonusFieldWidth200a{
  width: 194px;
}

.bonusFieldWidth250{
  width: 250px;
}

.bonusFieldBackBlue1{
  background-color: var(--buttonLichtblau);
}

.bonusFieldBackBlue2{
  background-color: var(--buttonHellblau);
}

.bonusFieldBackStr{
  background-color: var(--lichtgrau) !important;
}

.bonusFieldBold{
  font-weight: bold;
}

.bonusFieldRow{
  flex-direction: row !important;
}

.bonusSelectOut{
  position: relative;
  width: max-content;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-content: center;
}

.bonusSelectSave{
  position: relative;
  width: 100px;
  width: max-content;
  height: max-content;
  margin-right: 17px;
  flex-direction: column;
  justify-content: space-between;
  align-content: center;
}

.bonusMonthSelClass{
  position: relative;
  width:10em;
  height: 1.8em;
  border: solid 1px var(--buttonBlau);
}

.bonusYearSelClass{
  position: relative;
  width:5em;
  height: 1.8em;
  border: solid 1px var(--buttonBlau);
}

.bonusFontSize{
  font-size: var(--font-size-moduls5);
  height: 2.0em !important;
}

.showOK{
  font-weight: bold;
  color: var(--errorGreen);
}

.showNoOK{
  font-weight: bold;
  color: var(--errorRed);
}

.layerMain{
  position: relative;
  top: 2px;
  width: max-content;
  font-weight: bold;
  font-size: 0.95em;
  white-space: nowrap;
  cursor: pointer;
}

.bonusTopClass{
  font-size: var(--font-size-moduls6);
}

.bonusTopClass2{
  font-size: var(--font-size-moduls6);
  padding-left: 25px;
  height: 29px;
  display: flex;
  flex-direction: row;
  justify-items: left;
  align-items: flex-end;
}

.bonusTopClass2In{
  width: max-content;
  height: 1.2em;
  margin-right: 10px;
  display: flex;
  flex-direction: row;
  justify-items: left;
  align-items: center;
}

.bonusRefresh{
  height: 19px !important;
  font-size: var(--font-size-moduls6) !important;
  margin-top:2px !important;
  cursor: pointer;
 }

.bonusBlancoColor{
  background-color: var(--fieldBackActive);
}

.layerDown{
  position: relative;
  top: 2px;
  width: calc(100% - 50px);
  padding-right: 20px;
  font-weight: normal;
  font-size: 0.9em;
  white-space: wrap;
  cursor: pointer;
}

.layerMainActive{
  position: relative;
  top: 2px;
  width: max-content;
  font-weight: bold;
  font-size: 0.95em;
  white-space: nowrap;
  background-color: var(--loginLichtblau);
  cursor: pointer;
}

.layerDownActive{
  position: relative;
  top: 2px;
  width: calc(100% - 50px);
  padding-right: 20px;
  font-weight: normal;
  font-size: 0.9em;
  white-space: wrap;
  background-color: var(--loginHellblau);
  cursor: pointer;
}

.adminMenuInLeft, .adminMenuInLeft2, .employeesGroupsOutLeft{
  position: relative;
  width: max-content;
  max-width: 600px;
  min-width: 450px;
  height: calc(100% - 20px);
  display: flex;
  flex-direction: column;
  justify-content: top;
  align-items: left;
  padding: 5px;
  border: solid 1px var(--schwarz);
  overflow: auto;
}

.adminMenuInLeft{
  /*overflow-x: hidden;  */
}

.adminMenuInMiddle, .adminEmployeesGroupsMiddleClass{
  position: relative;
  width: max-content;
  min-width: 430px;
  height: calc(100% - 20px);
  display: flex;
  flex-direction: column;
  justify-content: top;
  align-items: left;
  padding: 5px;
  overflow: auto;
  margin-left: 20px;
}

.adminMenuInMiddleIn, .adminMenuInMiddleInText{
  position: relative;
  /*width: max-content;*/
  height: max-content;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}

.adminMenuInMiddleInText {
  width: 32em !important;
  font-size: var(--font-size-moduls7) !important;
  color: var(--errorRed);
  display: block;
}

.adminMenuInMiddleInTextHelp{
  width: 21em !important;
  font-size: var(--font-size-moduls5) !important;
  color: var(--buttonSchwarz);
  display: block;
}

.adminMenuInMiddleIn2{
  position: relative;
  width: calc(100% - 10px);
  height: max-content;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding-left: 5px;
  padding-right: 5px;
  margin-bottom: 10px;
}

.adminMenuInMiddleIn2Right{
  position: relative;
  width: 100%;
  height: max-content;
  display: flex;
  flex-direction: row;
  justify-content: right;
  align-items: center;
  padding-left: 5px;
  padding-right: 5px;
  margin-bottom: 10px;
}

.adminMenuInRight, .adminEmployeesGroupsRightClass{
  position: relative;
  width: max-content;
  min-width: 200px;
  height: calc(100% - 20px);
  display: flex;
  flex-direction: column;
  justify-content: top;
  align-items: left;
  padding: 5px;
  /*border: solid 1px var(--schwarz);*/
  overflow: auto;
  overflow-x: hidden;
  margin-left: 20px;
}

.saveAdminButtonClass {
  position: relative;
  width: max-content;
  height: 1.80em !important;
  border: solid 2px var(--buttonBlau);
  background-color: var(--buttonHellblau);
  padding-left: 10px !important;
  padding-right: 10px !important;
  font-weight: normal;
  color: var(--buttonBlau);
  z-index: 25;
}

.saveAdminButtonClassNoShow {
  display: none;
  width: 0px;
}

.adminMenuText{
  position: relative;
  width: 100%;
  height: max-content;
  text-align: center;
  font-size: var(--font-size-moduls6);
  margin-bottom: 3px;
}

.adminMenuTextLeft, .adminMenuTextLeft2{
  position: relative;
  width: 100%;
  height: max-content;
  text-align: left;
  font-size: var(--font-size-moduls6);
  margin-bottom: 3px;
  padding-left: 5px;
}

.adminMenuTextLeft2{
  padding-left: 0px;
}

.adminDataText, .adminDataTextArea{
  height:1.8em;
  width: 28em !important;
  padding: 0px !important;
  padding-left: 3px !important;
  background-color: var(--mainWeiss) !important;
}

.adminDataTextArea{
  height: 5em;
  color: var(--loginBlau);
}

.adminDataTextShort{
  height:1.8em;
  width: 5em !important;
  margin-right: 5px;
  padding: 0px !important;
  background-color: var(--mainWeiss) !important;
}

.adminAreaText{
  position: relative;
  width: calc(100% - 15px);
  height: max-content;
  text-align: left;
  font-size: var(--font-size-moduls6);
  margin-bottom: 3px;
  font-size: var(--font-size-moduls5) !important;
}

.fieldsetModul{
  position: relative;
  width: calc(100% - 33px);
  border-color: var(--loginBlau);
  border-radius: 8px;
  padding-top: 10px;
}

.fieldsetModulLegend{
  font-size: var(--font-size-moduls6);
}

.miRollSelClass2{
  position: relative;
  width:100%;
  height: 2.3em;
  border: solid 1px var(--buttonBlau);
}

/* Gruppen und Stammdaten */
.adminEmployeesGroupsClass{
  position: relative;
  width: 60%;
  height: calc(100% - 0.6em);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;

}

.adminEmployeesGroupsMiddleClass{
  border: none !important;
  max-width: 40%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;

}

.adminEmployeesGroupsRightClass{
  border: none !important;
  max-width: 33%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;

}

.employeesGroupsOutLeft{
  border: none !important;
  width: 100% !important;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
}

.employeesGroupsOutRight{
  /*border: none !important; */
  width: 30% !important;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  margin-right:3em;
  margin-left: 2em;
}

.employeesGroupsInLeft{
  position: relative;
  height: max-content;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: left;
  width: 70% !important;

}

.employeesGroupsOutFrame{
  position: relative;
  height: 115px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: left;

}

.employeesGroupsOutCheckFrame{
  position: relative;
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: left;
  align-items: flex-start;

}

.checkClass{
  position: relative;
  height: 50px;
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
  margin-bottom: 20px;
}

.nameText{
  position: relative;
  height: 20px;
  font-size: var(--font-size-moduls5);
  margin-bottom: 5px;
}

.nameTextDouble{
  position: relative;
  height: 40px;
  font-size: var(--font-size-moduls5);
  margin-bottom: 5px;
}

.nameSelect{
  position: relative;
  height: max-content;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-content: center;
}

.nameSelect2{
  position: relative;
  height: max-content;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-content: center;
}

.employeesGroupDescFieldClass{
  position: relative;
  width: 17em;
  height: 4em;
}

.nameCheck{
  position: relative;
  font-size: var(--font-size-moduls5);
  width: max-content;
  height: max-content;
  margin-right: 10px;
}

.emplGroupsButtons{
  position: relative;
  width: 100%;
  height: 7em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: normal;
  margin-top: 1.5em;

}

.showGroupEplNames{
  position: relative;
  width: calc(100% - 10px);
  height: max-content;
  max-height: calc(100% - 8em);
  min-height: 10em;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  border: solid 1px #000;
  margin-bottom: 10px;
  overflow: auto;
}

.showGroupEplSendBut{
  width: calc(100% - 10px);
  cursor: pointer;
}

.emplGroupRow{
  position: relative;
  width: 100%;
  height: max-content;
}

.emplGroupRowTableClass{
  width: 100%;
}

.emplGroupRowTDleftClass{
  width: 30px;
  text-align: left;
}

.emplGroupRowTDrightClass{
  text-align: left;
}

.emplGroupInactive {
  background-color: var(--errorRedStat);
}

.emplGroupsNameText{
  width: 15.8em !important;
  margin-top: 5px;
}

.adminEvaluationOut,.adminEvaluationTopOut,.adminEvaluationTopOutClick,.adminEvaluationTopOutTrans{
  position: relative;
  min-width: 105em;
  width: 110em;
  height: calc(100% - 2em);
  min-height: 600px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: normal;
  overflow: auto;
  padding-left: 10px;
}

.adminEvaluationTopOutClick{
  position: absolute;
  top: 0px;
  background-color: transparent;
  z-index: 30;
}

.adminEvaluationLeft,.adminEvaluationLeft2,.adminEvaluationLeft3,.adminEvaluationTopLeft,.adminEvaluationTopLeftTwo,.adminEvaluationTopLeftWhite {
  position: relative;
  width: 34.9em;
  height: 99%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background-color: var(--weissTrans);
}

.adminEvaluationTopLeftWhite{
  background-color: var(--weiss);
}

.adminEvaluationTopLeftTwo{
  width: 70em !important;
}

.adminEvaluationLeft2{
  width: 48em !important;
}

.adminEvaluationLeft3{
  width: 51em !important;
}

.adminEvaluationMiddle,.adminEvaluationTopMiddle,.adminEvaluationMiddleCert,.adminEvaluationMiddleCert2,.adminEvaluationTopMiddleExtern {
  position: relative;
  width: 35em;
  height: 99%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background-color: var(--weissTrans);
}

.adminEvaluationMiddleCert,.adminEvaluationMiddleCert2{
  margin-left: 5px;
}

.adminEvaluationMiddleCert2{
  width: 36em !important ;
}

.adminEvaluationTopMiddleExtern{
  background-color: var(--transparent) !important;
  width: 35.8em;
}

.adminEvaluationRight,.adminEvaluationTopRight,.adminEvaluationTopRight2,.adminEvaluationRightCert,.adminEvaluationTopRightWhite,.adminEvaluationTopRightWhite2 {
  position: relative;
  width: 39em;
  height: 99%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background-color: var(--weissTrans);
}

.adminEvaluationTopRight2{
  margin-left: 12px;
}

.adminEvaluationTopRightWhite,.adminEvaluationTopRightWhite2{
  background-color: var(--weiss);
}

.adminEvaluationTopRightWhite2{
  margin-left: 16px;
}

.adminEvaluationRightCert{
  margin-left: 5px;
}

.adminEvaluationInTop,.adminEvaluationInTopNoShow {
  position: relative;
  width: calc(100% - 4px);
  height: 2em;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  background-color: var(--buttonLichtblau);
  padding-left: 5px;
}

 .adminEvaluationInBottom,.adminEvaluationInBottomNoShow {
  position: relative;
  width: calc(100% - 12px);
  height: calc(100% - 2.2em - 11px);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border: solid 1px #000;
  padding: 5px;
}

 .adminEvaluationInBottom2{
  position: relative;
  width: calc(100% - 12px);
  height: calc(100% - 2.2em - 10px);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  border: solid 1px #000;
  padding: 5px;
  overflow: auto;
}

.adminEvaluationInBottomNoShow{
  display: none;
}

.adminEvaluationTopOut,.adminEvaluationTopOutTrans{
  position: absolute;
  top: 0px;
  background-color: var(--weiss);
  z-index: 30;
}

.adminEvaluationTopOutTrans{
  background-color: var(--transparent);
}

.adminEvaluationTopOutNoShow{
  display: none;
}

.adminEvaluationInTopNoShow{
  visibility: hidden;
}

.adminEvaluationInLeft, .adminEvaluationInLeft2{
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.adminEvaluationInLeft{
  width: 19em;
  overflow: auto;
  font-size: var(--font-size-moduls5);
}

.adminEvaluationInLeft2{
  width: 19em;
}


.evalGroupEntryScroll, .evalGroupEntryScroll2, .evalGroupEntryScroll3{
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  overflow: auto;
}

.evalGroupEntryScroll{
  margin-top: 10px;
}

.evalGroupEntryScroll2{
  max-height: 28.8em;
  min-height: 20em;
  font-size: var(--font-size-moduls5);
  overflow: auto;
  padding-top: 0.5em;
}

.evalGroupEntryScroll3{
  max-height: clac(100% - 20em);
  font-size: var(--font-size-moduls5);
  overflow: auto;
}

.adminEvaluationInRight{
  position: relative;
  width: 18em;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  font-size: var(--font-size-moduls6);
}

.adminEvaluationInRight2{
  position: relative;
  width: 19em;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.evalGroupEntry, .evalGroupEntry2{
  position: relative;
  width: calc(100% - 4px);
  margin-bottom: 4px;
  height: 1.5em;
  margin-left: 2px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  background-color: var(--transparent);
  cursor: pointer;
}

.evalGroupEntryActive{
  position: relative;
  width: calc(100% - 4px);
  margin-bottom: 4px;
  height: 1.5em;
  margin-left: 2px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  background-color: var(--buttonHellblau);
  cursor: pointer;
}

.evalGroupEntry2{
  padding: 5px;
  width: calc(100% - 14px) !important;
  height: max-content !important;
}

.evalGroupEntry3{
  padding-left: 5px;
  width: calc(100% - 10px) !important;
  height: 1.5em !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.evalGroupEntryLeft, .evalGroupEntryLeft2{
  position: relative;
  width: 50px;
  height: max-content;
  margin-right: 2px;
}

.evalGroupEntryLeft2{
  width: 30px;
}

.evalGroupEntryRight, .evalGroupEntryRight2{
  position: relative;
  width: calc(100% - 32px);
  height: max-content;
}

.evalGroupEntryRight{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.evalGroupEntryRight2{
 width: calc(100% - 40px);
}

.evalGroupEntryField{
  position: relative;
  width: 100%;
  height: max-content;
}

.evalGroupEntryFieldBut{
  position: relative;
  min-width: max-content;
  width: 7vw !important;
  height: max-content;
  font-size: var(--font-size-rem1) !important;
}

.evalGroupArea {
  position: relative;
  width: calc(100% - 1.8em);
  height: 5em;
}

.evalCheckOut{
  position: relative;
  width: 7em;
  height: max-content;
  margin: 0px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.statEvalClass{
  position: relative;
  width:16em;
  height: 2.0em;
  border: solid 1px var(--buttonBlau);
  /*margin-right: 5px;*/
}

.statPathClass{
  position: relative;
  width:19em;
  height: 2.0em;
  border: solid 1px var(--buttonBlau);
  /*margin-right: 5px;*/
}

.evalFontRight{
  font-size: var(--font-size-moduls6) !important;
}

.evalFontRight2{
  font-size: var(--font-size-moduls6a) !important;
}

.useEvalBackBlue{
  background-color: var(--statistikLichtblau);
}

/* Admin Mitarbeiter-Daten bearbeiten */
.emplChangeDataOutClass{
  position: relative;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  padding: 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
}

.emplChangeDataInRowClass {
  position: relative;
  width: 100%;
  height: calc(100% / 4);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-content: center;
}

.emplChangeDataInRecClass{
  position: relative;
  width: calc((100% - 14px) / 4);
  height: calc(100% - 14px);
  padding: 2px;
  margin: 5px;
  display: flex;
  flex-direction: column;
  justify-content: top;
  align-items: center;
  border: solid 1px #000000;
  border-radius: 5px;
  font-size: var(--font-size-moduls5);
}

.emplChangeButClass{
  position: relative;
  width: 90%;
  height: max-content;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-content: center;
  margin-bottom: 5px;
}

.emplChangeTextClass{
  position: relative;
  width: 100%;
  height: max-content;
  text-align: center;
  margin-bottom: 20px;
  margin-top: 5px;
}

.emplChangeTextErrorClass, .emplChangeTextClassSuccess, .emplChangeTextClassError{
  position: relative;
  width: 100%;
  height: max-content;
  text-align: center;
  margin-bottom: 0px;
  margin-top: 20px;
  background-color: var(--transparent);
  font-size: var(--font-size-moduls5);
  color: var(--errorRed);
}

.emplChangeTextClassSuccess{
  background-color: var(--errorGreen);
  color: var(--weiss);
}

.emplChangeTextClassError{
  background-color: var(--errorRed);
  color: var(--weiss);
}

/* Cert */
.educationListHead{
  width: calc(100% - 12px);
  height: max-content;
  font-weight: bold;
  font-size: 1em;
  border: none;
  text-align: left;
  padding-top: 4px;
}

.educationRowOutClass, .educationRowOutClassCheck{
  position: relative;
  width: calc(100% - 7px);
  height: max-content;
  display: flex;
  flex-direction: row;
  justify-items: flex-start;
  align-items: left;
  font-weight: nomrmal;
  padding-top:4px;
  padding-left: 4px;
}

.educationRowOutClass{
  cursor: pointer;
}

.educationRowOutClassActive{
  position: relative;
  width: calc(100% - 7px);
  height: max-content;
  display: flex;
  flex-direction: row;
  justify-items: flex-start;
  align-items: left;
  font-weight: nomrmal;
  padding-top:4px;
  padding-left: 4px;
  background-color: var(--lichtgrau);
  cursor: pointer;
}

.providerRowOutListClass{
  position: relative;
  width: calc(100% - 7px);
  height: max-content;
  display: flex;
  flex-direction: row;
  justify-items: flex-start;
  align-items: left;
  font-weight: nomrmal;
  padding-top:4px;
  padding-left: 4px;
  background-color: var(--transparent);
  cursor: pointer;
}

.providerRowOutListClassActive{
  position: relative;
  width: calc(100% - 7px);
  height: max-content;
  display: flex;
  flex-direction: row;
  justify-items: flex-start;
  align-items: left;
  font-weight: nomrmal;
  padding-top:4px;
  padding-left: 4px;
  background-color: var(--lichtgrau);
  cursor: pointer;
}

.educationRowOutClassRight{
  position: relative;
  width: calc(100% - 7px);
  height: max-content;
  display: flex;
  flex-direction: row;
  justify-items: flex-start;
  align-items: left;
  font-weight: nomrmal;
  padding-top:4px;
  padding-left: 4px;
  font-weight: bold;
  background-color: var(--buttonLichtblau);
  margin-top: 2px;
}

.educationRowPraefixClass{
  position: relative;
  width: 75px;
  height: max-content;
  text-align: left;
  border: none;
}

.educationListClass{
  position: relative;
  width: calc(100% - 80px);
  height: max-content;
  border: none;
}

.providerListClass{
  position: relative;
  width: 100%;
  height: max-content;
  border: none;
  margin-bottom: 5px;
}

.educationListClassRight{
  position: relative;
  width: calc(100% - 100px);
  height: max-content;
  border: none;
}

.educationRowCheckClass{
  position: relative;
  width: 20px;
  height: max-content;
  text-align: left;
  border: none;
}

.adminEducationInBottomList,.adminEducationInBottomListForm,.adminEducationInBottomListTop{
  position: relative;
  width: calc(100% - 7px);
  height: calc(100% - 2.2em - 35px);
  display: flex;
  flex-direction: column;
  justify-items: flex-start;
  align-items: left;
  border: solid 1px var(--schwarz);
  padding-left: 5px;
  padding-top: 5px;
  padding-bottom: 5px;
  overflow-y: auto;
  overflow-x: hidden;
}

.adminEducationInBottomListForm{
  position: relative;
  height: 100%;
  border: none !important;
}

.adminEducationInBottomListTop{
  height: calc(100% - 2.2em - 12px) !important;
}

.adminEducationInBottomListTop2{
  position: relative;
  width: 100%;
  height: 50%;
  overflow: auto;
  }

.eduFieldCont,.eduFieldContHide{
  position: relative;
  height: max-content;
  width: calc(100% - 30px);
  margin-left: 12px;
  text-align: left;
  font-size: 0.85em;
}

.eduFieldContHide{
  display: none;
}

.eduFieldContSmall{
  position: relative;
  height: max-content;
  width: calc(100% - 30px);
  margin-left: 12px;
  text-align: left;
  font-size: 0.7em;
}

.eduFieldContMore,.eduFieldContPath{
  position: relative;
  height: max-content;
  width: calc(100% - 30px);
  margin-left: 12px;
  margin-top: 10px;
  margin-bottom: 10px;
  text-align: left;
  font-size: 0.85em;
}

.eduFieldContPath{
  margin-left: 0px !important;
}

.eduFieldContPathList{
  position: relative;
  height: max-content;
  max-height: 300px;
  width: calc(100% - 30px);
  margin-bottom: 10px;
  text-align: left;
  font-size: 0.85em;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-content: flex-start;
  overflow: auto;
}

.pathTop5{
  margin-top: 5px;
}

.pathTop7{
  margin-top: 7px;
}

.pathTop10{
  margin-top: 10px;
}

.educationText{
  position: relative;
  height: 1.6em !important;
  width: calc(100% - 5px) !important;
  text-align: left;
  font-size: 0.9em;
}

.educationText2{
  position: relative;
  height: 1.6em !important;
  width: 90px !important;
  text-align: left;
  font-size: 0.9em;
}

.educationText3{
  position: relative;
  height: 1.6em !important;
  width: 300px !important;
  text-align: left;
  font-size: 0.9em;
}

.educationTextSmall{
  position: relative;
  height: 1.6em !important;
  width: 80px !important;
  text-align: left;
  font-size: 0.9em;
}

.educationTextSmall1{
  position: relative;
  height: 1.6em !important;
  width: 70px !important;
  text-align: left;
  font-size: 0.9em;
}


.educationTextSmall2{
  position: relative;
  height: 1.2em !important;
  width: 60px !important;
  text-align: left;
  font-size: 0.9em;
}

.educationTextSmall3{
  position: relative;
  height: 1.2em !important;
  width: 30px !important;
  text-align: left;
  font-size: 0.9em;
}

.educationTextSmall4{
  position: relative;
  height: 1.2em !important;
  width: 35px !important;
  text-align: left;
  font-size: 0.9em;
}

.educationArea,.educationArea2,.educationArea3{
  position: relative;
  height: 10em;
  width: calc(100% - 5px);
  text-align: left;
  font-size: 1.1em;
}

.educationArea2{
  height: 9.5em !important;
}

.educationArea3{
  height: 4.5em !important;
  width: calc(100% - 10px) !important;
}

.eduFieldContSel{
  position: relative;
  height: 25em;
  width: 100%;
  font-size: 1.1em;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  overflow: auto;
  margin-top: 12px;
}

.eduVoidRow{
  margin-top: 10px;
}

.tableInCert{
  height: 0.5em;
}

.tableInCertMessage{
  height: 1.2em;
  padding-bottom: 8px;
}

.eduFieldButton{
  position: relative;
  height: 30px !important;
  width: calc(100% - 15px);
  text-align: right;
  margin-top: 5px;
}

.allExpCheckFormClass,.allExpCheckFormClass2{
  position: relative;
  width: calc(100% - 7px);
  height: calc(100% - 2.2em - 30px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  border: solid 1px var(--schwarz);
  padding-left: 5px;
  padding-top: 5px;
  padding-bottom: 5px;
  overflow-y: auto;
  overflow-x: hidden;
}

.allExpCheckFormClass2{
  margin-left: 5px;
  width: calc(100% - 5px)!important;  
}

.allTrainingCheckFormClass{
  position: relative;
  width: calc(100% - 2px);
  height: 100% !important;
  display: flex;
  flex-direction: column;
  justify-items: flex-start;
  align-items: flex-start;
  border: solid 1px var(--schwarz);
  overflow-y: auto;
  overflow-x: hidden;
}

.allTrainingCheckFormCertClass{
  position: relative;
  width: calc(100% - 2px);
  height: 100% !important;
  display: flex;
  flex-direction: row;
  justify-items: flex-start;
  align-items: left;
  border: none;
  overflow-y: hidden;
  overflow-x: hidden;
}

.allExpCheckFormClassNoShow{
  position: relative;
  width: calc(100% - 7px);
  height: calc(100% - 2.2em - 30px);
  padding-left: 5px;
  padding-top: 5px;
  padding-bottom: 5px;
}

.certNoClass{
  width: 15px;
  background-image: url(../ressources/icons/262.png);
  background-size: contain;
  background-repeat: no-repeat;
}

.certOkClass{
  width: 15px;
  background-image: url(../ressources/icons/277.png);
  background-size: contain;
  background-repeat: no-repeat;
}

.certStatusClass{
  width: 90px;
  padding-left: 5px;
  text-align: left;
}

.certTimeClass{
  width: max-content;
  text-align: left;
  padding-right: 10px;
}

.certTimeClass1{
  width: 90px;
  text-align: left;
}

.certTimeClass2{
  width: 70px;
  text-align: left;
}

.certTimeClass3{
  width: 50px;
  text-align: left;
}

.certTimeClass4{
  width: 45px;
  text-align: left;
}

.adminEducationInBottomButton,.adminEducationInBottomButtonRight,.adminEducationInBottomButtonLeft{
  position: relative;
  width: 100%;
  height: 1.5em;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background-color: var(--weiss);
  margin-top: 3px;
  margin-bottom: 4px;
}

.saveSortButtonClass, .saveSortButtonClassActive, .saveSortButtonClassNoShow {
  position: relative;
  width: max-content;
  height: max-content !important;
  background-color: var(--buttonHellblau);
  font-weight: normal;
  font-size: var(--font-size-moduls6) !important;
  color: var(--buttonBlau);
}

.saveSortButtonClass{
  border: solid 1px var(--buttonBlau) !important;
}

.saveSortButtonClassActive{
  border: solid 2px var(--buttonBlau) !important;
}

.saveSortButtonClassNoShow{
  display: none;
}

.saveSortButtonClassPadding{
  padding: 3px 5px !important;
}

.adminEducationInBottomButtonRight{
  justify-content: flex-end !important;
}

.adminEducationInBottomButtonLeft{
  justify-content: flex-start !important;
}

.arrowRot{
  width: 1.5em;
  transform: rotate(180deg);
  cursor: pointer;
}

.arrowRot90{
  width: 1.5em;
  transform: rotate(-90deg);
  cursor: pointer;
}

.arrowNormal{
  width: 1.5em;
  cursor: pointer;
}

.certListBottomClass{
  position: relative;
  width: calc(100% - 30px);
  height: max-content;
  font-size: var(--font-size-moduls7);
  margin-bottom: 6px;
}

.showCertTimeDayClass{
  position: relative;
  width: 45px;
  height: 1.1em;
  border: solid 1px var(--schwarz);
  margin-right: 2px;
  font-size: var(--font-size-moduls4);
}

.showLifeTimeClass{
  position: relative;
  width: 35px !important;
  height: 0.9em !important;
  border: solid 1px var(--schwarz) !important;
  margin-left: 5px;
  margin-right: 5px;
}

.certConfirm,.certConfirmSug{
  position: relative;
  width: calc(100% - 22px);
  border: solid 1px var(--schwarz);
  height: max-content;
  margin-bottom: 10px;
  padding: 5px;
  font-size: var(--font-size-moduls5);
  }

.certConfirmSug{
  background-color: var(--errorOrangewStat);
}

.certTableDataClassBig{
  width: calc(100% - 40px);
  padding-bottom: 3px;
 }

.certTableDataClassBigBold{
  width: calc(100% - 40px);
  font-weight: bold;
 }

.certTableDataClassSmall{
  width: 20px;
  text-align: right;
  }

.certSearchLeft{
  width: calc(100% - 20px);
}

.tableCertCheckClass{
  height: 1.85em;
}

.certSearchLeft2{
  width: 100px;
}

.certSearchRight{
  width: 100px;
}

.educationTextArea{
  width: calc(100% - 10px) !important;
  height: 3.4em !important;
}

.educationTextArea2{
  width: calc(100% - 10px) !important;
  height: 4em !important;
}

.educationTextArea3{
  width: calc(100% - 10px) !important;
  height: 5em !important;
}

.educationTextArea4{
  width: calc(100% - 10px) !important;
  height: 2.4em !important;
}

.certSearchLeftSmall{
  font-size: var(--font-size-moduls6);
  }

.certSearchLeftBig,.certSearchLeftBigTop{
  font-size: var(--font-size-moduls2);
  }

.certSearchName{
  font-size: var(--font-size-moduls2);
  }

.certSearchLeftBigTop{
  margin-top: 15px;
  }

.certSearchRightSmall{
  font-size: var(--font-size-moduls6);
  }

.certSearchTR1{
  background-color: var(--certSearchTableBack1);
}

.certSearchTR2{
  background-color: var(--certSearchTableBack2);
}

.certSearchTR3{
  background-color: var(--certSearchTableBack3);
}

.certSearchTR4{
  background-color: var(--certSearchTableBack4);
}

.certSearchResult{
  position: relative;
  width: calc(100% - 10px);
  padding: 0px;
  border: solid 3px var(--buttonBlau);
  margin-bottom: 10px;
  font-size: var(--font-size-moduls6);
}

.searchShowClass{
  position: relative;
  width: 20em;
  height: max-content;
  text-align: right;
}

.searchShowSelectClass{
  position: relative;
  width: 100%;
  height: max-content;
  border: none;
  text-align: right;
}

.searchShowClassName{
  font-size: var(--font-size-moduls4);
}

.certSearchResultData{
  position: relative;
  width: calc(100% - 20px);
  height: max-content;
  border: solid 3px var(--buttonBlau);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin-top: 10px;
  padding: 5px;
  font-size: var(--font-size-moduls6);
}

.certSearchResultDataTop{
  position: relative;
  width: 100%;
  height: max-content;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 3px;
}

.certSearchResultDataTopInLeft,.certSearchResultDataTopInRight{
  position: relative;
  height: max-content;
  border: none;
}

.certSearchResultDataTopInLeft{
  width: 20%;
}

.certSearchResultDataTopInRight{
  width: 80%;
}

.certSearchResultDataBottom{
  position: relative;
  width: calc(100% - 6px);
  height: max-content;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  border: solid 1px var(--buttonBlau);
  padding: 3px;
  margin-bottom: 2px;
}

.certSearchResultDataBottomIn{
  position: relative;
  width: 100%;
  height: max-content;
  /*border: solid 1px var(--buttonBlau);*/
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 3px;
}

.certSearchResultDataBottomInLeft,.certSearchResultDataBottomInRight{
  position: relative;
  height: max-content;
  max-height: 47px;
}

.certSearchResultDataBottomInLeft{
  width: 20%;
}

.certSearchResultDataBottomInRight{
  width: 80%;
  overflow: auto;
}

.adminCertInBottomList{
  position: relative;
  width: calc(100% - 7px);
  height: calc(100% - 2.2em - 10px);
  display: flex;
  flex-direction: column;
  justify-items: flex-start;
  align-items: left;
  border: solid 1px var(--schwarz);
  padding-left: 5px;
  padding-top: 5px;
  padding-bottom: 5px;
  overflow-y: auto;
  overflow-x: hidden;
}

.certSearchResultDataPDFLink{
  position: relative;
  width: calc(100% - 7px);
  height: max-content;
  min-height: 20px;
  border: none;
  margin-bottom: 1px;
  font-size: var(--font-size-moduls5);
}

.showCertPathAll{
  position: relative;
  width: 100%;
  height: 1.8em;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-content: flex-start;
  }

.showCertPath,.showCertPathDel,.showCertPathStd{
  position: relative;
  width: 76%;
  height: 1.6em;
  }

.showCertPathDel{
  width: 12% !important;
}

.showCertPathStd{
  width: 10% !important;
}

.externImportAll,.externImportAllScroll,.externImportAllScrollDown,.externImportAllButton,.externImportAllButtonDown{
  position: relative;
  width: 100%;
  height: max-content;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
}

.externImportAllScroll,.externImportAllScrollDown{
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  height: calc(100% - 380px) !important;
}

.externImportAllScrollDown{
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  height: 300px !important;
}

.externImportAllButton,.externImportAllButtonDown{
  height: 40px !important;
}

.externImportAllButtonDown{
  width: calc(100% - 5px)!important;
  padding-right: 5px;
  }

.externImportAllLeft{
  position: relative;
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
}

.externImportAllRight{
  position: relative;
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
}

.externImportLeftCheck{
  position: relative;
  width: 20px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.externImportLeftName{
  position: relative;
  width: calc(100% - 25px);
  padding-left: 5px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
}

.externImportLeftDate{
  position: relative;
  width: 30%;
  padding-left: 5px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
}

.showKeyColumnOut{
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}

.showKeyColumnIn{
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.takeOverClass,.takeOverClassNoShow{
  position: relative;
  width: 95%;
  height: max-content;
  margin-top: 20px !important ;
  font-size: var(--font-size-moduls5)!important;
  color: var(--mailGreen)!important;
  display: block !important;
}

.takeOverClassNoShow{
  display: none !important;
}




@media (max-width: 1550px){
.userSkillsRowStatistikClassTop{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: self-end;
  }

.userSkillsRowLeftStatistikHeadClass{
  margin-right: auto;
  }

.showSumDownStatistikClassTop{
  margin-left: auto;
  }
}

@media (max-width: 1350px){
.adminDataText{
  width: 19em !important;
}

.errorClass{
  font-size: var(--font-size-moduls6);
}

.adminMenuInMiddleInText {
  width: 17em !important;
}
}

@media (max-width: 1100px){
.adminMenuInLeft{
  overflow: auto;
}

.errorClass{
  font-size: var(--font-size-moduls7);
}

}

@media (max-height: 650px) or (max-width: 1500px){
.showSelectAllBottomClassActive {
  font-size: var(--font-size-moduls7);
  }

.showSelectAllTopClass {
  font-size: var(--font-size-moduls7);
  }

.showPicQuartSelOutClass{
  width: 85px;
  height: 0.8em;
}

.showPicYearSelOutClass{
  width: 70px;
  height: 0.8em;
}

.showPicTextClass{
  margin-top: 2px;
  height: 1.0em;
  font-size: var(--font-size-moduls6)
}

/*   Texteingabe    */
.picSelSendTextClass{
  height: 1.3em;
  font-size: var(--font-size-moduls6)!important;
  margin-top: 5px;
}

.picSelSendNewClass{
  height: 1.3em;
  font-size: var(--font-size-moduls6)!important;
  margin-top: 5px;
}

.fieldSetText{
  height: 6.7em;
  font-size: var(--font-size-moduls8)!important;
}

.footerClass{
  height: 50px;
}

.allStatistikOutAllClass{
  height: calc(100% - 143px);
}

/*end @media */
}