@import '../onlineHilfe/onlineHilfe.css';
@import '../va/verwAktMarkierungen.css';
@import '../va/verwAkt.css';
@import '../zst/zst.css';

:root {
  /* Corporate Design: Farben */
  --ldeDunkelBlau: #002663;  /* LogoData-Dunkelblau */
  --ldeHellBlau: #2a6ebb;    /* LogoData-Hellblau */
  --juhiOrange: #f4aa00;     /* Jugendhilfe */
  --gruveBlau: #00aecb;      /* Grundsatz und Verwaltung */
  --kitaGruen: #719500;      /* Kindertageseinrichtungen */

  --transparenz: 0.2;

  /* Software-Farben */
  --textDefaultBlau: #1F327F;       /* Standard-Textfarbe: Blau */
  --tableSelectBlau: #00008B;
  --textPassivGrau: #778899;        /* Passiver Text (z.B. passivTab): Grau */
  --textPassivGrauBg: #dae4ee;      /* Hintergund für passiven Text (z.B. passivTab): Grau */
  --textPassivGrauDark: #515779;    /* Passiver Text (z.B. passivTab): Grau */
  --boxRequestFensterGrau: #E3ECF3; /* Hintergrund-Grau: Request-Fenster (Head & Foot) */
  --boxRequestFensterGrauT: rgba(227, 236, 243, var(--transparenz));   /* Hintergrund-Grau: Request-Fenster (Head & Foot) */
  --boxBackgroundGrau01: #eef3f7;   /* Hintergrund-Grau: Standard-Grau */
  --boxBackgroundGrau02: #e3ecf2;   /* Hintergrund-Grau: dunkleres Grau */

  --contentColor:#FFFFFF;

  /* Border-Colors */
  --borderColorGrauGruen: #ccdddd;  /* Standard-Rahmenfarbe: Grau-Grün */
  --borderColorLightBlue: #caddec;  /* Standard-Rahmenfarbe: Grau-Blau */
  --borderColorLightBlueT: rgba(203, 222, 236, var(--transparenz));  /* Standard-Rahmenfarbe: Grau-Blau */
  --borderColorGrau: #ccdede80;  /* Standard-Rahmenfarbe: Grau */

  /* Messages */
  --successGruen: #2fbe59;
  --successGruenBg: #c6ffc0;

  --alertRot: #e1344a;
  --alertRotBg: #ffe1e5;
  --alertRotDarker: #ca0047;

  --infoBlau: #006bbc;
  --infoBlauBg: #c0e4ff;
  --infoBlauDarker: #00569c;
  --infoBlauLighter: #308fe7;

  --infoGelb: #B98100;
  --infoGelbBg: #FEFCE8;

  /* ... */
  --backgroundLightBlue: #E7F4FF;

  /* Border */
  --defaultBorderThin: 1px solid var(--borderColorGrauGruen);
  --defaultBorderThick: 2px solid var(--borderColorGrauGruen);
  --blauBorderThin: 1px solid var(--borderColorLightBlue);
  --blauBorderThick: 2px solid var(--borderColorLightBlue);

  /* Border-Radius */
  --borderRadiusDefault: 4px;
  --borderRadiusDefaultOben: 4px 4px 0px 0px;
  --borderRadiusStrong: 6px;
  --borderRadiusLight: 2px;
}

html {
  height: 101%;
}

html.darkMode {
  filter: hue-rotate(180deg) saturate(120%) invert(90%);
}

.materneModus {
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--boxBackgroundGrau01);
  background-image: url(../background_ball.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: .8em;
  padding: 2px;
  margin: 0;
}

.calendarInput {
  background-repeat: no-repeat;
  background-position: right center;
  background-image: url(../ldeLayout/kalendar.png);
  padding-right: 1px;
}

img {
  border: 0;
}

a {
  text-decoration: none;
  color: #000000;
}

a.text {
  font-weight: bold;
}

a.text:hover {
  text-decoration: none;
}

/* Ãœberschriften */
.header3 {
  font-size: 1.3em;
  font-weight: bold;
}

fieldset {
  border-width: 1px;
  border-style: solid solid solid solid;
  border-color: var(--borderColorGrauGruen);
  padding: .8em;
  margin: 2px;
}

/* td - Angaben */
td {
  /* font-size: 12px; */
  padding-right: 15px;
  padding-top: 1px;
  vertical-align: top;
}

td.listeHaken {
  width: 15px;
}

td.listeHakenX {
  background-image: url(../ldeLayout/haken.png);
  background-repeat: no-repeat;
  background-position: center;
  width: 15px;
}

td.listeHakenN {
  background-image: url(../ldeLayout/kreuz.png);
  background-repeat: no-repeat;
  background-position: center;
  width: 15px;
}

tr.l td {
  background-color: #E4EEF7;
}

tr.b td {
  background-color: #A5DBEB;
}

.zelleZeigen {
  visibility: hidden;
}

.zelleZeigenX {
  visibility: visible;
}

td.tableheader {
  font-weight: bold;
  text-align: left;
}

th.tableheader {
  font-weight: bold;
  text-align: left;
  /*  font-size: 12px; */
}

label {
  margin: .1em;
  vertical-align: middle;
}

label.normal {
  margin-right: 1em;
  vertical-align: middle;
}

label.loginleft {
  float: left;
  text-align: right;
  width: 8em;
  margin-right: 2em;
}

.row {
  width: 100%;
  margin: 0;
  padding: .1em;
  background-color: transparent;
  display: block;
}

div.two_col_layout_left {
  float: left;
  width: 50%;
  z-index: 200;
}

div.two_col_layout_right {
  float: right;
  width: 50%;
  z-index: 200;
}

div.left {
  float: left;
  width: auto;
  margin-right: 2em;
}

div.end {
  clear: both;
}

div.leftborder {
  margin-left: 200px;
}

span.bolditalic {
  font-weight: bold;
  font-style: italic
}

.orange {
  color: #e58c00;
}

.orangeTitel {
  color: #EBD986;
}

.dodgerblue {
  color: dodgerblue;
}

#main {
  width: auto;
  margin: 0;
  padding: 0;
  /*
  border-style: solid solid solid solid;
  border-width: 1px;
  border-color: #000000; */
  border: 0;
}

br.end {
  clear: both;
}

#xmlrequest_wait {
  background-color: transparent;
  visibility: hidden;
  display: none;
  position: absolute;
  left: 48%;
  top: 48%;
  width: 70px;
  height: 70px;
  z-index: 999;
}

#main {
  margin-left: 1px;
  background: #FFFFFF url(bgright.jpg) repeat-y scroll right;
  width: 100%;
  min-width: 975px;
}

#content {
  padding-left: 10px;
}

#header {
  background-image: url(headxrepeat.jpg);
  background-repeat: repeat-x;
  height: 110px;
}

#layout_bg {
  background: transparent url(bgleft.jpg) repeat-y left;
  min-height: 200px;
}

#header_left {
  background: url(head_hpv_left.jpg) no-repeat left;
  background-position: 0 0;
  height: 110px;
  float: left;
  min-width: 532px;
}

#header_left_test {
  background: url(banner_links_test.jpg) no-repeat left;
  background-position: 0 0;
  height: 110px;
  float: left;
  min-width: 532px;
}


#header_right {
  background: url(head_hpv_right.jpg) no-repeat right;
  background-position: 0 0;
  height: 110px;
  float: right;
  min-width: 442px;
}

#header_headline {
  color: #ffffff;
  float: left;
  font-size: large;
  font-weight: bold;
  left: 10%;
  left: 12vw;
  position: absolute;
  top: 40px;
  z-index: 500;
  text-shadow:
    -1px -1px 1px #234283,
    1px -1px 1px #234283,
    -1px 1px 1px #234283,
    1px 1px 1px #234283;
}

#footer {
  background-image: url(footxrepeat.jpg);
  height: 30px;
  clear: both;
  text-align: center;
  font-size: 0.8em;
  font-weight: bold;
}

#footer_left {
  background: url(footleft2.jpg) no-repeat;
  float: left;
  min-width: 24px;
  height: 30px;
}

#footer_right {
  background: url(footright2.jpg) no-repeat;
  float: right;
  width: 25px;
  min-width: 25px;
  height: 30px;
}

.footer_headline {
  float: left;
  margin-left: 20px;
  margin-top: 10px;
}

div.anzeigeModus,
div.am {
  float: left;
  padding-top: 0.4em;
  font-weight: bold;
}

div.anzeigeModus2 {
  float: left;
  margin-top: 0.4em;
  font-weight: bold;
}


span.anzeigeModus {
  padding-top: 0.4em;
  font-weight: bold;
}

.currentStateMenuButton {
  text-align: center;
  margin-top: 8px;
  cursor: pointer;
}

.currentStateMenuSaveImage {
  cursor: pointer;
  border: none;
  width: 48px;
  height: 48px;
  background-color: transparent;
}

.currentStateMenuSaveImage:hover {
  background-color: transparent;
}

.currentStateMenuSaveText {
  cursor: pointer;
  color: black;
  border: none;
  margin: 0;
  background-color: transparent;
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

.currentStateMenuSaveText:hover {
  background-color: transparent;
}

#currentStateMenu {
  width: 15%;
  float: left;
  margin-right: 5px;
  padding-bottom: 15px;
  /*margin-bottom: 15px;*/
}

#currentStateMenu>fieldset {
  font-weight: bold;
}

label {
  color: #000;
  font-weight: normal;
  padding-top: 0.3em;
}

label.left {
  float: left;
  text-align: right;
  width: 150px;
  color: #000;
  margin-right: 1em;
}

label.leftNeu {
  float: left;
  text-align: right;
  width: 170px;
  color: #000;
  margin-right: 1em;
}

label.leftklein {
  float: left;
  text-align: right;
  width: 50px;
  margin-right: 1em;
}

label.right {
  text-align: right;
  color: #000;
  margin-left: 2em;
}

/*#ldeHilfeContainer {
  visibility: hidden;
  display: none;
  position: absolute;
  left: 50px;
  top: 50px;
  border: 1px solid black;
  background-color: #FFFFFF;
  padding: 5px;
  z-index: 999;
  width: 40%;
  
}

#hilfeTextContainer {
  height: 500px;
  overflow: auto;
  width: 100%;
}*/

/* Auswahloptionen usw... */
#navigation {
  font-weight: bold;
  margin-bottom: 0;
  width: 100%;
  float: left;
  /* position: relative; */
  /* z-index: 5; */
}

div.function {
  cursor: pointer;
  float: left;
  margin: 15px 30px 10px 0;
  vertical-align: middle;
}

div.function img {
  vertical-align: middle;
}

/* Tabellen */
table.ldeTable {
  border-collapse: collapse;
  background-color: var(--boxBackgroundGrau01);
  font-weight: bold;
  color: var(--textDefaultBlau);
}

tr.ldeTableRow {
  background-color: var(--boxBackgroundGrau01);
}

tr.ldeTableRowAlternative {
  background-color: #DAF3F7;
}

tr.ldeTableRowKorr {
  color: white !important;
  background-color: orange !important;
}

tr.ldeTableRowInvert {
  color: white !important;
  background-color: red !important;
}

tr.ldeTableRowSelected,
tr.normalSelected,
tr.alternativeSelected,
tr.alternative2Selected,
tr.ldeTableRowInvertSelected,
tr.ldeTableRowKorrSelected,
tr.ldeTableRowAlternativeSelected {
  background-color: darkblue;
  color: white;
}

table.noClickTable {
  border-collapse: collapse;
  background-color: var(--boxBackgroundGrau01);
  font-weight: bold;
  color: var(--textDefaultBlau);
}

th {
  background-color: #1E327F;
  color: #E4EEF7;
  /* font-size: 13px; */
  font-weight: bold;
  max-width: 100%;
  padding-right: 15px;
  text-align: left;
  vertical-align: top;
}



.hiddenSelectionElement {
  visibility: hidden;
  display: none;
}

div.scrollTableContainer {
  height: 400px;
  overflow: auto;
}

.listButton:hover {
  background-color: transparent;
}

.listButton {
  padding: 0;
  background-color: transparent;
  background-position: left bottom;
  background-repeat: no-repeat;
  border: medium none;
  font-weight: bold;
  cursor: pointer;
  vertical-align: baseline;
  color: black;
  margin: 0;
}

.navigationButton {
  background-repeat: no-repeat;
  background-color: transparent;
  text-align: left;
  font-weight: bold;
  /* font-size: 13px; */
  border: none;
  width: auto;
  height: 25px;
  margin: 15px 30px 10px 0;
  padding-left: 27px;
  cursor: pointer;
}

.navigationButtonSmall {
  background-repeat: no-repeat;
  background-color: transparent;
  text-align: left;
  font-weight: bold;
  /* font-size: 13px; */
  border: none;
  width: auto;
  height: 20px;
  margin: 15px 20px 10px 0;
  padding-left: 16px;
  cursor: pointer;
}

.navigationButtonDropdown select {
  display: none;
}

.navigationButtonDropdown>span {
  cursor: pointer;
  padding: 3px 0;
  border-radius: 6px;
  display: block;
  position: relative;
  transition: all 0.3s ease;
  color: var(--textDefaultBlau);
  user-select: none;
  font-size: 13.3px;
  top: 1px;
}

.navigationButtonDropdown>span:before,
.navigationButtonDropdown>span:after {
  content: "";
  display: block;
  position: absolute;
  width: 8px;
  height: 2px;
  border-radius: 1px;
  top: 50%;
  right: 15px;
  background: var(--textDefaultBlau);
  transition: all 0.3s ease;
}

.navigationButtonDropdown>span:before {
  margin-right: 4px;
  transform: scale(0.96, 0.8) rotate(50deg);
}

.navigationButtonDropdown>span:after {
  transform: scale(0.96, 0.8) rotate(-50deg);
}

.navigationButtonDropdown ul {
  background: #fafafa;
  margin: 0;
  padding: 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  max-height: 340px;
  top: 15px;
  left: 0;
  z-index: 1;
  right: 0;
  border-radius: 6px;
  overflow-x: hidden;
  overflow-y: auto;
  transform-origin: 0 0;
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.3s cubic-bezier(0.4, 0.6, 0.5, 1.32);
  transform: scale(0.8) translate(0, 4px);
  border: 1px solid lightgrey;
}

.navigationButtonDropdown ul li {
  opacity: 0;
  transform: translate(6px, 0);
  transition: all 0.3s ease;
}

.navigationButtonDropdown ul li:hover {
  background: rgb(238, 243, 247);
  transition: .0.5s all linear;
}

.navigationButtonDropdown ul li a {
  cursor: pointer;
  display: block;
  padding: 10px 16px;
  text-decoration: none;
  outline: none;
  position: relative;
  transition: all 0.3s ease;
  user-select: none;
  color: var(--textDefaultBlau);
  font-weight: 600;
}

.navigationButtonDropdown ul li.active a:before,
.navigationButtonDropdown ul li.active a:after {
  --scale: .6;
  content: "";
  display: block;
  width: 10px;
  height: 2px;
  position: absolute;
  right: 17px;
  top: 50%;
  opacity: 0;
  transition: all 0.2s ease;
}

.navigationButtonDropdown ul li.active a:before {
  transform: rotate(45deg) scale(var(--scale));
}

.navigationButtonDropdown ul li.active a:after {
  transform: rotate(-45deg) scale(var(--scale));
}

.navigationButtonDropdown ul li.active a:hover:before,
.navigationButtonDropdown ul li.active a:hover:after {
  --scale: .9;
  opacity: 1;
}

.navigationButtonDropdown ul li:first-child a {
  border-radius: 6px 6px 0 0;
}

.navigationButtonDropdown ul li:last-child a {
  border-radius: 0 0 6px 6px;
}

.navigationButtonDropdown.open>span:before {
  transform: scale(0.96, 0.8) rotate(-50deg);
}

.navigationButtonDropdown.open>span:after {
  transform: scale(0.96, 0.8) rotate(50deg);
}

.navigationButtonDropdown.open ul {
  opacity: 1;
  visibility: visible;
  transform: scale(1) translate(0, 12px);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.4, 0.6, 0.5, 1.32);
}

.navigationButtonDropdown.open ul li {
  opacity: 1;
  transform: translate(0, 0);
}

.navigationButtonDropdown.open ul li:nth-child(1) {
  transition-delay: 80ms;
}

.navigationButtonDropdown.open ul li:nth-child(2) {
  transition-delay: 160ms;
}

.navigationButtonDropdown.open ul li:nth-child(3) {
  transition-delay: 240ms;
}

.navigationButtonDropdown.open ul li:nth-child(4) {
  transition-delay: 320ms;
}

.navigationButtonDropdown.open ul li:nth-child(5) {
  transition-delay: 400ms;
}

.navigationButtonDropdown.open ul li:nth-child(6) {
  transition-delay: 480ms;
}

.navigationButtonDropdown.open ul li:nth-child(7) {
  transition-delay: 560ms;
}

.navigationButtonDropdown.open ul li:nth-child(8) {
  transition-delay: 640ms;
}

.navigationButtonDropdown.open ul li:nth-child(9) {
  transition-delay: 720ms;
}

.navigationButtonDropdown.open ul li:nth-child(10) {
  transition-delay: 800ms;
}

select.navigationButtonDropdown {
  border: none;
  line-height: 22px;
  font-size: 13.3px;
  font-family: inherit;
  -webkit-appearance: none;
  user-select: none;
  font-weight: 600;
  ;
}

.fieldsetButton {
  background-repeat: no-repeat;
  background-color: transparent;
  background-position: right;
  background-image: url(../ldeLayout/minimize.png);
  text-align: left;
  font-weight: bold;
  color: #000000;
  border: none;
  width: auto;
  padding-right: 18px;
  cursor: pointer;
}

.navigationButton:hover,
.activTabButton:hover,
.passivTabButton:hover,
.scrollingButton:hover {
  background-color: cornsilk;
}

li.tabButton {
  display: inline;
}

.passivTabButton {
  margin: 0;
  padding-left: 27px;
  height: 25px;
  font-weight: bold;
  background-repeat: no-repeat;
  background-color: transparent;
  border: 1px solid var(--borderColorGrauGruen);
  background-position: 5px center;
  text-align: left;
  /* font-size: 13px; */
  color: lightslategrey;
  width: auto;
  cursor: pointer;
}

.activTabButton {
  margin: 0;
  padding-left: 27px;
  height: 25px;
  font-weight: bold;
  background-repeat: no-repeat;
  background-color: var(--boxBackgroundGrau01);
  border: 1px solid var(--borderColorGrauGruen);
  border-bottom: none;
  background-position: 5px center;
  text-align: left;
  /*  font-size: 13px; */
  color: var(--textDefaultBlau);
  width: auto;
  cursor: pointer;
}

.scrollingButton {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  background-repeat: no-repeat;
  font-weight: bold;
  font-size: 0px;
  border: none;
  height: 25px;
  padding-left: 15px;
  background-color: transparent;
  cursor: pointer;
  width: 30px;
}

.actionButton {
  background-repeat: no-repeat;
  font-weight: bold;
  /* font-size: 13px; */
  border: none;
  height: 25px;
  padding-left: 25px;
  width: 25px;
  background-color: transparent;
  cursor: pointer;
}

.actionButtonSmall {
  background-repeat: no-repeat;
  font-weight: bold;
  /* font-size: 13px; */
  border: none;
  height: 16px;
  background-color: transparent;
  cursor: pointer;
}

.actionButton:hover {
  background-color: transparent;
}

/* Anzeigemodus */
div.anzeige {
  background-color: var(--boxBackgroundGrau01);
  border: 1px solid var(--borderColorGrauGruen);
  font-weight: bold;
  color: var(--textDefaultBlau);
  padding-left: 10px;
  padding-right: 10px;
  float: left;
  margin-bottom: 10px;
  padding-bottom: 10px;
  width: 100%;
}

.seite {
  float: left;
  width: 90%;
  text-align: center;
  margin-top: 5px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  background-repeat: no-repeat;
  font-weight: bold;
  /* font-size: 13px; */
  color: var(--textDefaultBlau);
}

.labeltext {
  padding-top: 0.4em;
  display: block;
  float: left;
}

span.anzeigeText {
  color: #000;
}

/* Tabellenfarben */
tr.normal {
  background-color: var(--boxBackgroundGrau01);
  color: var(--textDefaultBlau);
}

tr.alternative {
  background-color: #DAF3F7;
}

tr.alternative2 {
  background-color: #BAD3F7;
}

hr {
  background-color: var(--borderColorGrauGruen);
  color: var(--borderColorGrauGruen);
}

#divOverlay {
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 501;
  visibility: hidden;
  display: none;
  opacity: 0.4;
  /*  KHTMLOpacity: 0.4; */
  /*  MozOpacity: 0.4; */
  top: 0;
  left: 0;
  position: absolute;
}

select {
  border: 1px solid var(--borderColorGrauGruen);
  color: var(--textDefaultBlau);
  vertical-align: middle;
}

select:enabled,
input:enabled[type=radio],
input:enabled[type=checkbox],
input:enabled[type=text],
input:enabled[type=password],
textarea:enabled {
  margin: .1em;
  font-size: 1em;
  background-color: white;
}

input[type="radio"],
input[type="checkbox"] {
  border: none;
}

input[type="radio"],
input[type="checkbox"] {
  margin-top: 0.4em;
}

input [type=radio].left,
input [type=checkbox].left {
  margin-right: .2em;
}

input[type=text].geldText {
  width: 70px;
  text-align: right;
}

textarea {
  width: 500px;
  /* textarea soll beim resize nicht aus dem container wachsen */
  max-width: 99%;
  height: 300px;
  /* font-size: 12px; */
  font-family: Verdana, Arial, Helvetica, sans-serif;
  color: var(--textDefaultBlau);
  border: 1px solid var(--borderColorGrauGruen);
}

#bankenListe {
  visibility: hidden;
  display: none;
  position: absolute;
  left: 50px;
  top: 50px;
  border: 1px solid black;
  background-color: var(--boxBackgroundGrau01);
  padding: 5px;
  width: 800px;
  z-index: 999;
}

fieldset.hidden {
  border: 0;
  margin: 0;
  padding: 0;
}

fieldset.pflege {
  border: 0 none;
  margin: 0;
  padding: 0;
}

input {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  vertical-align: middle;
  border: 1px solid var(--borderColorGrauGruen);
  color: var(--textDefaultBlau);
}

input.button {
  border: 1px solid #000000;
}

input:hover {
  background-color: cornsilk;
}

#persDatenConnectorContainerOrig {
  position: absolute;
  left: 50px;
  top: 80px;
  border: 1px solid black;
  background-color: var(--boxBackgroundGrau01);
  visibility: hidden;
  display: none;
  padding: 5px;
}

#colorAuswahlContainer {
  position: absolute;
  left: 50px;
  top: 80px;
  border: 1px solid black;
  background-color: var(--boxBackgroundGrau01);
  width: 860px;
  visibility: hidden;
  display: none;
  padding: 5px;
  z-index: 600;
}


#persAuswahlContainer {
  /*position: absolute;*/
  left: 50px;
  top: 40px;
  /*border: 1px solid black;*/
  /*background-color: var(--boxBackgroundGrau01);*/
  width: 930px;
  visibility: hidden;
  display: none;
  /*padding: 5px;*/
  z-index: 750;
}

#chronologieContainer {
  position: absolute;
  left: 50px;
  width: 850px;
  visibility: hidden;
  display: none;
  z-index: 750;
}

#dokAuswahlContainer {
  position: absolute;
  left: 50px;
  top: 80px;
  border: 1px solid black;
  background-color: var(--boxBackgroundGrau01);
  width: 850px;
  visibility: hidden;
  display: none;
  padding: 5px;
  z-index: 750;
}

#personExists {
  position: absolute;
  top: 80px;
  left: 50px;
  width: 80%;
  /*border: 1px solid black;*/
  padding: 5px;
  z-index: 750;
}

#personNotify {
  position: absolute;
  top: 80px;
  left: 50px;
  min-width: 750px;
  width: 80%;
  border: 1px solid black;
  padding: 5px;
}

ul.currentStateMenu {
  margin: 0;
  padding-left: 10px;
  list-style-type: circle;
  line-height: 20px;
}

div.checkGroup,
div.radioGroup {
  vertical-align: middle;
  float: left;
}

div.checkGroup {
  padding-top: .2em;
}

/* Fallübersicht Personendarstellung */
div.strukturPerson {
  position: relative;
  width: 250px;
  border: 1px dashed var(--borderColorGrauGruen);
  left: 35%;
  cursor: pointer;
  padding: 5px;
}

div.strukturPersonPartner {
  position: relative;
  width: 250px;
  border-top: 1px dashed var(--borderColorGrauGruen);
  cursor: pointer;
}

div.strukturPersonListe {
  width: 250px;
  border: 1px dashed var(--borderColorGrauGruen);
  float: left;
  margin-right: 15px;
  cursor: pointer;
  padding: 5px;
}

div.strukturPerson:hover,
/*div.strukturPersonPartner:hover,*/
div.strukturPersonListe:hover {
  box-shadow: 0 0 7px lightslategray;
  background-color: cornsilk;
}

span.anzeigeList {}

span.anzeigeListX {
  color: green;
}

#terminErinnerung {
  color: red;
  font-weight: bold;
  position: absolute;
  left: 20%;
  top: 120px;
}

/* Druckoptionen/DokumentAuswahl */
#dokOptDruckOptionen {
  width: 80%;
  top: 40px;
  left: 50px;
  /*top: 90px;
  left: 10%;*/
  position: absolute;
  z-index: 550;
  visibility: hidden;
  display: none;
}

#dokOptTermin {
  visibility: hidden;
  display: none;
}

#dokOptDokgruppe {
  visibility: hidden;
  display: none;
}

#dokOptAdressAuswahl {
  visibility: hidden;
  display: none;
}

#dokOptAdressAuswahl {
  visibility: hidden;
  display: none;
}

#hideAll {
  visibility: hidden;
  display: none;
  background-color: transparent;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 500;
}

#showAll {
  background-color: transparent;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 500;
}

.alteDatenVisible {
  visibility: visible;
  display: block;
}

.alteDatenHidden {
  visibility: hidden;
  display: none;
}

.textareaHidden {
  visibility: hidden;
  display: none;
}

div.amtAnzeige {
  float: left;
  max-width: 60%;
  margin-top: 5px;
}

/* Meldungen */
div.saveMsg {
  font-weight: bold;
  color: green;
  margin: 5px 0 5px 5px;
}

div.errorMsg {
  font-weight: bold;
  color: red;
  margin: 5px 0 5px 5px;
}

div.korrMsg {
  font-weight: bold;
  color: orange;
  margin: 5px 0 5px 5px;
}

div.infoBox {
  background-color: #efefef;
  border: 1px solid #999;
  padding: 5px;
  margin: 5px;
}

/* Allgemeines für den Informationscontainer */
.infoContainer,
#infoContainer {
  position: absolute;
  visibility: hidden;
  display: none;
  z-index: 800;
  border: 1px solid grey;
  background-color: #FFFFE1;
  padding: 10px;
  float: left;
  margin-bottom: 10px;
  font-weight: bold;
  color: var(--textDefaultBlau);
  width: 650px;
  font-size: 0.9em;
}

/* Allgemeines für den Kopftpl */
.kopf {
  float: left;
  margin-right: 25px;
  font-weight: bold;
}

.kopf label {
  padding-top: 0;
  padding-bottom: 0.3em;
}

.spacerRow>td {
  height: 45px;
  vertical-align: middle;
}

.topRow {
  border-top: solid 1px var(--borderColorGrauGruen);
  border-left: solid 1px var(--borderColorGrauGruen);
  border-right: solid 1px var(--borderColorGrauGruen);
  font-weight: normal;
  color: black;
  background-color: #E3ECF3;
}

.middleRow {
  border-left: solid 1px var(--borderColorGrauGruen);
  border-right: solid 1px var(--borderColorGrauGruen);
  font-weight: normal;
  color: black;
  background-color: #E3ECF3;
}

.bottomRow {
  border-bottom: solid 1px var(--borderColorGrauGruen);
  border-left: solid 1px var(--borderColorGrauGruen);
  border-right: solid 1px var(--borderColorGrauGruen);
  font-weight: normal;
  color: black;
  background-color: #E3ECF3;
}

.bottomRow>td {
  padding-bottom: 10px;
  padding-top: 5px;
}

.dataContainer,
#dataContainer {
  position: absolute;
  left: 50px;
  top: 40px;
  visibility: hidden;
  display: none;
  z-index: 600;
  border: 1px solid black;
  background-color: var(--boxBackgroundGrau01);
  padding: 10px;
  float: left;
  font-weight: bold;
  color: var(--textDefaultBlau);
}

.frameBox {
  position: absolute;
  left: 50px;
  top: 40px;
  visibility: hidden;
  display: none;
  z-index: 600;
  float: left;
  font-weight: bold;
  color: var(--textDefaultBlau);
  background-color: transparent;
  background-image: url(../ldeLayout/hide_all_grauerDunkel.png);
  padding: 5px;
  border: none;
  box-Shadow: 5px 5px 5px lightslategray;
}

.frameContainer {
  background-color: transparent !important;
  background-image: url(../ldeLayout/hide_all_grauerBlau50.png);
  padding: 7.5px;
  border: none !important;
  /*position: fixed;*/
  position: absolute;
  left: 50px;
  top: 40px;
  visibility: hidden;
  display: none;
  z-index: 600;
  float: left;
  font-weight: bold;
  color: var(--textDefaultBlau);
  width: auto;
}

.draggable {
  cursor: grab;
}

.nodraggable {
  cursor: auto;
}

.frameKopf {
  font-size: 1.1em;
  width: 100%;
  float: left;
  background-color: #E3ECF3;
}

.frameKopf>h4 {
  line-height: 25px;
  margin: 0;
  padding-left: 15px;
  font-weight: bold;
}

.frameContent {
  width: 100%;
  border: none;
  margin: 0;
  float: left;
  background-color: #F5F8FB;
  padding: 5px 0 5px 0;
}

.frameContent>div {
  scrollbar-width: thin;
  scrollbar-color: lightslategrey #F5F8FB;
}

.frameFuss {
  width: 100%;
  float: left;
  background-color: #E3ECF3;
  text-align: right;
  height: 35px;
  padding-top: 15px;
}

.frameFuss>input {
  margin: 0px 5px 0px 0px;
}

.frameParallel {
  width: 45% !important;
}


.showPrintOutput {
  visibility: hidden;
  display: none;
}

.konto {
  margin: 0.5%;
  border: 1px solid var(--borderColorGrauGruen);
  padding: 0.8em;
  background-color: #EEFCEB;
}

.registerDiv {
  width: 98%;
  float: left;
  overflow: auto;
  border: 1px solid var(--borderColorGrauGruen);
  padding: 10px;
}

h3.menuHead {
  /*  font-size: 12px; */
  min-height: 0;
  height: 20px;
  line-height: 20px;
  border: 1px solid var(--borderColorGrauGruen);
  margin: 5px 5px 5px 0;
  padding: 0 3px;
  background-color: var(--boxBackgroundGrau01);
}

h3.menuHead>span {
  background-repeat: no-repeat;
  background-position: left center;
  background-image: url(../ldeLayout/maximize.png);
  padding-left: 18px;
}

h3.menuStatic {
  /* font-size: 12px; */
  height: auto;
  line-height: 20px;
  border: 1px solid var(--borderColorGrauGruen);
  margin: -1px -1px 5px -1px;
  padding: 0 3px;
  background-color: var(--boxBackgroundGrau01);
}

h3.menuHeadStatic {
  /* font-size: 12px; */
  height: auto;
  line-height: 20px;
  border: 1px solid var(--borderColorGrauGruen);
  margin: 5px 5px 5px 0;
  padding: 0 3px;
  background-color: var(--boxBackgroundGrau01);
}

h3.menuStatic>span,
h3.menuHeadStatic>span {
  padding-left: 18px;
  display: inline-block;
  color: var(--textDefaultBlau);
  font-size: 0.9em;
}

.menuExpand>ul,
.menuExpandStatic>ul {
  line-height: 20px;
  list-style-type: circle;
  margin: 0;
  padding-left: 10px;
}

.menuExpand {
  border: 1px solid var(--borderColorGrauGruen);
  padding-left: 10px;
  margin: -6px 5px 0 0;
  font-weight: bold;
  visibility: hidden;
  display: none;
  height: 0;
  overflow: hidden;
}

.menuExpandStatic {
  border: 1px solid var(--borderColorGrauGruen);
  padding-left: 10px;
  margin: -6px 5px 0 0;
  font-weight: bold;
  overflow: hidden;
  height: auto;
}

.verHistoryLabel {
  color: #000;
  float: left;
  margin-right: 1em;
  text-align: right;
  width: 110px;
  padding-top: 0;
}

.verHistoryTd {
  border-bottom: 1px solid black;
  background-color: white;
}

.verHistoryText {
  color: black;
  background-color: white;
  width: 510px;
  overflow-x: hidden;
  overflow-y: auto;
  font-weight: normal;
}



.mainmenucontainer {
  opacity: 0.6;
}

.mainmenucontainer:hover {
  opacity: 1;
}

.userKasten {
  text-align: right;
  font-size: 10px;
  font-weight: normal;
  line-height: 12px;
}

.userKasten>div {
  color: lightslategrey;
  float: right;
  margin-left: 3px;
}

.datenKasten {
  width: 98%;
  padding: 5px;
  background-color: #E3ECF3;
  float: left;
  cursor: pointer;
}

.datenKastenHead {
  color: lightslategrey;
  font-size: 0.9em;
  float: left;
  cursor: help;
}


/** Box Layout, genutzt von Christian und Alex - 23.03.2017
 * Box Klassen 
 * Verwendung:
 *  
 * <div class="boxHead" style="width:74%;">
 *  <h4>Ãœberschrift</h4>l
 *  <div class="boxInhalt">
 *      <!-- Inhalt -->
 *  </div>
 * </div>
 *
 * Die Breite im ersten div ist optional. Standard sind 100%
 **/
.boxHead {
  /** anzeige **/
  font-weight: bold;
  color: var(--textDefaultBlau);

  /** shadow light **/
  zoom: 1;
  filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=2, OffY=2, Color=var(--borderColorGrauGruen));
  -webkit-box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, 0.15);
  box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, 0.15);

  /** box head **/
  float: left;
  padding: 0;

  border: 1px solid var(--borderColorGrauGruen);
  width: 100%;
  margin: 8px auto 10px;
  background-color: #E3ECF3;
}

div.boxHead>h4 {
  text-align: left;
  width: 100%;
  float: left;
  line-height: 20px;
  margin: 0;
  color: var(--textDefaultBlau);
  padding-left: 10px;

}

div.boxHead>div.boxInhalt {
  padding: 0.8em;
  margin-top: 20px;
  background-color: white;
}

div.floatdiv {
  position: absolute;
  display: block;
  background: transparent;
  top: 7px;
  color: white;
  max-width: 100%;
  word-break: break-all;
  line-height: initial;
  float: left;
}


@media screen and (-webkit-min-device-pixel-ratio: 0) {

  /* Chrome */
  .kopf label {
    padding-bottom: 0.16em;
    line-height: 0;
    display: inline-block;
  }
}

span.autoclose {
  cursor: pointer;
  float: right;
  margin-right: 3px;
  margin-top: 1px;
  font-weight: bold;
  color: darkslategray;
  line-height: 60%;
  margin-bottom: -2px;
  font-size: 1.8em;
  border-radius: 100%;
  background-color: transparent;
  padding: 0px 2px 2px 2px;
}

span.autoclose:hover {
  color: black;
}


div.tooltip {
  width: auto;
  display: inline-block;
}

div.tooltip div.frameContainer {
  display: none;
  visibility: hidden;
}

/*
div.tooltip:hover div.frameContainer {
  display: block !important;
  visibility: visible !important;
  position: fixed; 
  z-index: 900;  
}
*/
.flxt {
  border-top: 1px solid lightgray;
  max-width: 15vw;
  word-wrap: break-word;
  text-align: left;
}

.flxr {
  text-align: right;
  border-top: 1px solid lightgray;
}

.flxfltr {
  list-style: none;
  text-align: left;
}

.flxAuswTable>thead>tr>th {
  border: 1px solid gray;
}

.flxAuswTable>tbody>tr>td {
  border-left: 1px solid lightgray;
  border-top: 1px solid lightgray;
}

.unselectable {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
}

/* ----------------
    Responsiveness
   ---------------- */
/* @see http://bookstack.logodata.intern/books/grundsystem/page/responsives-design---zusammenfassung#bkmrk-bei-weitergehender-e */

@media screen and (min-width: 320px) and (max-width: 1200px) {

  /* Hilfsmittelklassen */
  .overflow-hidden {
    overflow: hidden !important;
  }

  .onlyOverflowX {
    overflow-x: scroll !important;
  }

  /* Seiteninhalt, oberster Wrapper */
  #content {
    padding-right: 10px;
  }

  #content.contentClearfix {
    overflow: auto;
    padding-left: 10px;
    padding-right: 5px;
    width: 97% !important;
  }

  /* Fußleiste */
  #footer_right {
    position: absolute;
    right: 1px;
  }

  /* Formulare */
  #currentStateMenu~div:not(#expandRequestContainer) {
    overflow: hidden;
    /* Final Fallback */
  }

  /* Seiteninhalt, Hauptwrapper */
  #currentStateMenu~div>fieldset,
  #currentStateMenu~div>fieldset>fieldset {
    min-width: auto !important;
    height: auto !important;
    width: 98% !important;
  }

  #currentStateMenu~div .menuHeadStatic,
  #currentStateMenu~div .menuExpandStatic {
    margin-right: 0;
  }

  /* Container für responsive Tabellen */
  .scrollTableContainer {
    overflow: auto !important;
    height: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
  }

  .scrollTableContainer table,
  .scrollTableContainer .landscape {
    width: 100% !important;
  }

  #navigation~div {
    width: 100% !important;
  }

  #navigation fieldset:last-child {
    margin-bottom: 10px;
  }

  .scrollTableContainer::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
  }

  .scrollTableContainer::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 4px solid #fff;
    background-color: rgba(0, 0, 0, .3);
    padding-bottom: 20px;
    margin-bottom: 20px;
  }

  /* Modalelemente */
  #dataContainer,
  #dokOptDruckOptionen,
  #tpflLeistungsBerechnung,
  #tpl_engine_print_options,
  #prfProtokoll,
  #dlg_person,
  #newNodeForm,
  div.frameContainer,
  div.dataContainer,
  div.hpvMenuStandContainer,
  /* !div.tooltip>div.frameContainer */
  div.tooltip>div.frameContainer {
    width: fit-content !important;
    max-width: 90vw;
    left: 50% !important;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
  }

  #newNodeForm {
    top: 25vh !important;
    position: fixed !important;
  }
}

@media screen and (min-width: 320px) and (max-width: 992px) {

  /* Basis */
  th {
    vertical-align: inherit;
  }

  textarea {
    /*width: auto !important;*/
    width: 100% !important;
    height: auto !important;
  }

  #layout_bg {
    min-height: unset;
  }

  .clearfix {
    clear: both;
  }

  .clearfix:after {
    clear: both;
    content: "";
    display: table;
  }

  .fullWidth {
    width: 100% !important;
    max-width: 100% !important;
  }

  .noPadding {
    padding: 0 !important;
  }

  .unsetHeight {
    height: unset !important;
  }

  .cardHorizCentered {
    float: unset !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 5px !important;
    horiz-align: center;
    min-height: 170px !important;
  }

  .cardHorizCentered:first-child {
    margin-top: initial !important;
  }

  form.responsiveContainer>fieldset,
  form.responsiveContainer div.anzeige {
    width: 100% !important;
    margin: 0 !important;
  }

  form.responsiveContainer div.anzeige {
    min-width: auto !important;
  }

  .responsiveContainer fieldset {
    min-width: auto !important;
  }

  .responsiveContainer,
  .responsiveContainer div.anzeige {
    padding: 0 !important;
  }

  /* Personenkarten */
  #evContainer>div {
    width: calc(50% - 5px) !important;
    margin-right: 0 !important;
  }

  fieldset.personCard {
    margin: 0 !important;
  }

  .personCard>div.shadowLight {
    min-width: auto !important;
    width: 97% !important;
    margin-left: auto;
    margin-right: auto;
  }

  .personCard>div[data-pers_id]>div[data-pers_id] {
    width: 100% !important;
  }

  fieldset.daten>div.anzeigeModus {
    width: 100%;
  }

  /* Seitennavigation */
  #menu_container {
    position: relative;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
  }

  #menu_container>div.mainmenucontainer {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    flex: 1 0 auto;
  }

  #menu_container>div.mainmenucontainer>div {
    height: 100%;
  }

  #main {
    min-width: auto;
  }

  /* Fullsized Canvas und allgemeiner responsiver Container */
  #workbench {
    position: relative;
  }

  #workbench #canvasWindow {
    float: unset !important;
    width: 100% !important;
  }

  #workbench #canvas {
    overflow: hidden;
  }

  div#desktop,
  .responsiveContainer {
    min-width: auto !important;
    width: 100% !important;
    margin: 0 !important;
  }

  /* Custom Scrollbar */
  #workbench #canvas~.canvasScroll.bg-gray {
    background: #a9a9a9;
  }

  #workbench #canvas~#canvasScrollX {
    width: 100%;
    height: 20px;
    position: absolute;
    bottom: 0;
    border-radius: 10px;
    overflow: hidden;
  }

  #workbench #canvas~#canvasScrollY {
    position: absolute;
    height: calc(100% - 20px);
    width: 20px;
    right: 0;
    top: 0;
    border-radius: 10px;
    overflow: hidden;
  }

  /* Custom Scrollbar - X-Achse */
  #workbench #canvas~.canvasScroll .scrollBtnX {
    width: 49%;
    position: absolute;
    bottom: 0;
    top: 0;
    background: #dedede;
  }

  #workbench #canvas~.canvasScroll .scrollBtnX:first-child {
    left: 0;
    /*border-right: 3px solid #000;*/
  }

  #workbench #canvas~.canvasScroll .scrollBtnX:last-child {
    right: 0;
  }

  /* Custom Scrollbar - Y-Achse */
  #workbench #canvas~.canvasScroll .scrollBtnY {
    height: 49%;
    position: absolute;
    left: 0;
    right: 0;
    background: #dedede;
  }

  #workbench #canvas~.canvasScroll .scrollBtnY:first-child {
    top: 0;
    /*border-bottom: 3px solid #000;*/
  }

  #workbench #canvas~.canvasScroll .scrollBtnY:last-child {
    bottom: 0;
  }

  /* Seiteninhalt, Subwrapper */
  div.anzeige>div:not(.scrollTableContainer):not(#navigation):not(.anzeigeModus) {
    width: 100% !important;
    min-width: auto !important;
    margin-left: 0 !important;
  }

  div.anzeige>form>fieldset {
    min-width: auto;
  }

  /* Seitennavigation */
  #navigation {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    padding-left: 20px;
    width: calc(100% - 20px);
    border-radius: 2px;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.14), 0 2px 4px rgba(0, 0, 0, 0.28) !important;
  }

  #navigation input {
    flex-basis: 25%;
  }

  div.anzeige>fieldset {
    min-width: auto;
  }

  div.anzeige fieldset.daten {
    position: relative;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    left: 50% !important;
    /*width: auto;*/
    width: 80%;
  }

  /* Headerleiste */
  #header {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  #header #header_left {
    position: relative;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    overflow: hidden;
  }

  #header #header_left_test {
    position: relative;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    overflow: hidden;
  }

  #header #header_left:before {
    position: absolute;
    top: 0;
    right: -5px;
    width: 30px;
    height: 98px;
    content: '';
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../../layout/ldeLayout/head_right_corner.jpg);
  }

  #header #header_left_test:before {
    position: absolute;
    top: 0;
    right: -5px;
    width: 30px;
    height: 98px;
    content: '';
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../../layout/ldeLayout/head_right_corner.jpg);
  }

  #header #header_left:after {
    position: absolute;
    content: '';
    top: 45%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 20px;
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../../layout/ldeLayout/nichtsuche.png);
  }

  #header #header_left_test:after {
    position: absolute;
    content: '';
    top: 45%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 20px;
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../../layout/ldeLayout/nichtsuche.png);
  }

  div.no-burger #header #header_left:after {
    display: none;
  }

  div.no-burger #header #header_left_test:after:after {
    display: none;
  }

  #header #header_left #header_headline {
    max-width: 80%;
    margin-bottom: 10px;
    position: relative;
    top: unset;
    left: 0;
  }

  #header #header_left_test #header_headline {
    max-width: 80%;
    margin-bottom: 10px;
    position: relative;
    top: unset;
    left: 0;
  }


  #header #header_right {
    min-width: auto;
  }

  /* Seiteninhalt, Hauptwrapper */
  #currentStateMenu~div:not([id]):not([class]),
  #currentStateMenu~div.anzeige,
  #currentStateMenu~fieldset {
    width: 96% !important;
    min-width: auto !important;
    float: unset !important;
    margin: 0 auto !important;
  }

  /* Burgermenue */
  #currentStateMenu {
    width: 375px !important;
    max-width: unset !important;
    height: auto !important;
    position: absolute;
    background: white;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    z-index: 500;
    -webkit-transform: translateX(-110%);
    -moz-transform: translateX(-110%);
    -ms-transform: translateX(-110%);
    -o-transform: translateX(-110%);
    transform: translateX(-110%);
    padding: 10px;
    transition: 0.2s all ease-in-out;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, .1);
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.14), 0 2px 4px rgba(0, 0, 0, 0.28);
  }

  #currentStateMenu.burgerMenuToggled {
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    -ms-transform: translateX(0%);
    -o-transform: translateX(0%);
    transform: translateX(0%);
  }

  #currentStateMenu>fieldset {
    /* width: 40%; */
    width: 35%;
    float: left;
    min-height: 55px;
    flex-grow: 1;
    order: 1;
  }

  #currentStateMenu fieldset:last-of-type,
  #currentStateMenu fieldset:nth-last-of-type(2) {
    margin-bottom: 10px;
  }

  #currentStateMenu .currentStateMenuButton,
  #currentStateMenu .menuExpandStatic {
    /* width: 32%; */
    width: 35%;
    float: left;
    order: 2;
    flex-grow: 1;
    align-self: center;
    padding: .8em;
    margin: 2px;
  }

  #currentStateMenu .burgerMenuItem,
  #currentStateMenu .burgerMenuItem h3.menuHeadStatic {
    width: 100% !important;
    position: relative !important;
    margin-bottom: 0 !important;
  }

  #currentStateMenu .burgerMenuItem .menuExpandStatic {
    width: 93.1% !important;
    margin-top: 0 !important;
  }

  #currentStateMenu .burgerMenuItem {
    position: relative;
  }

  #currentStateMenu h3.menuHeadStatic {
    height: fit-content;
    position: absolute;
    text-align: center;
    padding: 0;
    margin-top: -5px;
  }

  #currentStateMenu h3.menuHeadStatic.menuHeadStaticCopy {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #currentStateMenu .menuHeadStatic span.headline {
    padding-left: 2px;
  }

  #currentStateMenu .menuExpandStatic {
    margin-top: 8%;
    /* fallback: 20px */
  }

  #currentStateMenu .menuExpandStatic ul li a,
  #currentStateMenu .menuExpandStatic ul li span {
    word-break: break-all;
  }

  /* Tabulatorswitch */
  .passivTabButton,
  .activTabButton {
    width: 100% !important;
  }

  /* Modalelemente */
  div.pleasewait,
  div.frameBox {
    left: 50% !important;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
  }

  div.frameBox {
    /*top: -10.5rem !important;*/
    width: auto !important;
    min-width: 80% !important;
  }

  #errorHandlerFootDiv {
    visibility: hidden !important;
  }
}

@media screen and (min-width: 320px) and (max-width: 930px) {

  /* Seitenhauptelemente */
  fieldset.hidden {
    padding-right: 5px !important;
  }

  fieldset.hidden,
  fieldset.hidden>fieldset {
    min-width: auto;
  }

  fieldset.hidden>fieldset>div[style*="width"] {
    width: 100% !important;
    margin-left: 0 !important;
  }

  #menu_container {
    margin-bottom: 20px;
  }

  div.anzeige>div:not(#navigation):not(.anzeigeModus) {
    width: 100% !important;
  }

  div.anzeige {
    padding-left: 0;
    padding-right: 3px;
  }

  /* Fußleiste */
  .footer_headline {
    margin-top: 2px;
  }

  #footer_left {
    width: 97%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }
}

@media screen and (min-width: 320px) and (max-width: 825px) {

  /* Headerbar der Startseite */
  body>div:first-of-type>#umgebungForm>fieldset>div:last-of-type {
    width: 100% !important;
    text-align: center !important;
  }

  /* Formulare */
  /*
    @note: Wenn im Formular-Kontext unerwarteterweise label und input Elemente in einem div Container **ohne Klasse** eingeschlossen sind,
           benoetigt dieser width: 100%. Da es aber in JS nahezu unmoeglich ist, diesen Container zu erkennen,
           ohne global etwas anderes zu zerstören, aber trotzdem alle betroffenen Stellen anzusprechen, bricht diese Stelle im Layout momentan.
           Auch mit CSS ist es unumgaenglich etwas anderes kaputt zu machen, da es keinen Parent Selektor gibt
    @see:  @frontend: Terminseite - Uebernahme Elternbeitrag
  */
  div[id].left br.end~div.left,
  div[id].left div.left:first-child~div.left,
  div[id].left div.left:first-child {
    text-align: left;
    -webkit-transform: translateX(10%);
    -moz-transform: translateX(10%);
    -ms-transform: translateX(10%);
    -o-transform: translateX(10%);
    transform: translateX(10%);
  }

  label.left,
  label.left+select+label,
  label.left+input+label,
  label.left+textarea+label,
  label.left+div.radioGroup+label,
  label.left+div.checkGroup+label,
  label.left+div.anzeigeModus+label,
  label.left+div.am+label {
    text-align: right;
    clear: both;
  }

  div[id].left div.left,
  fieldset.hidden>fieldset>div>input.navigationButton,
  table tr td input~label.left,
  label.left,
  label.left+select+label,
  label.left+input+label,
  label.left~select,
  label.left~input:not(.passivTabButton):not(.activTabButton),
  label.left~textarea+label,
  label.left~textarea,
  label.left~div.radioGroup+label,
  label.left~div.radioGroup,
  label.left~div.checkGroup+label,
  label.left~div.checkGroup,
  label.left~div.anzeigeModus+label,
  label.left~div.anzeigeModus,
  label.left~div.am+label,
  label.left~div.am {
    float: left;
    margin: 5px 0 0 0 !important;
    width: calc(50% - 2rem) !important;
    overflow-wrap: break-word;
  }

  table tr td {
    /*display: flex;*/
  }

  table tr td label.left {
    width: 100% !important;
  }

  table tr td input[type="checkbox"] {
    float: right;
    text-align: right;
  }

  label.left~select~input.actionButton,
  label.left~input~input.actionButton,
  label.left~textarea~input.actionButton {
    width: fit-content !important;
  }

  fieldset.hidden>fieldset>div>input.navigationButton~br.end {
    display: none;
  }

  div[id].left div.left>input[type="text"] {
    width: 100%;
  }

  /* Tabulatorswitch */
  input.passivTabButton,
  input.activTabButton {
    width: 100% !important;
  }
}

@media screen and (min-width: 320px) and (max-width: 753px) {

  /* Headerleiste */
  #header {
    overflow: hidden;
  }

  #header #header_headline {
    font-size: 16px;
  }
}

@media screen and (min-width: 320px) and (max-width: 555px) {

  /* Headerleiste */
  #header_left {
    min-width: unset !important;
  }

  #header_left_test {
    min-width: unset !important;
  }

  #header #header_headline {
    font-size: 14px;
  }
}

.plswait-fading-circle {
  margin: 0px auto;
  width: 60px;
  height: 60px;
  position: relative;
}

.plswait-fading-circle .plswait-circle {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.plswait-fading-circle .plswait-circle:before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 18%;
  height: 18%;
  background-color: #385693;
  border-radius: 100%;
  -webkit-animation: plswait-circleFadeDelay 1.2s infinite ease-in-out both;
  animation: plswait-circleFadeDelay 1.2s infinite ease-in-out both;
}

.plswait-fading-circle .plswait-circle2 {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

.plswait-fading-circle .plswait-circle3 {
  -webkit-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  transform: rotate(60deg);
}

.plswait-fading-circle .plswait-circle4 {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

.plswait-fading-circle .plswait-circle5 {
  -webkit-transform: rotate(120deg);
  -ms-transform: rotate(120deg);
  transform: rotate(120deg);
}

.plswait-fading-circle .plswait-circle6 {
  -webkit-transform: rotate(150deg);
  -ms-transform: rotate(150deg);
  transform: rotate(150deg);
}

.plswait-fading-circle .plswait-circle7 {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.plswait-fading-circle .plswait-circle8 {
  -webkit-transform: rotate(210deg);
  -ms-transform: rotate(210deg);
  transform: rotate(210deg);
}

.plswait-fading-circle .plswait-circle9 {
  -webkit-transform: rotate(240deg);
  -ms-transform: rotate(240deg);
  transform: rotate(240deg);
}

.plswait-fading-circle .plswait-circle10 {
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
}

.plswait-fading-circle .plswait-circle11 {
  -webkit-transform: rotate(300deg);
  -ms-transform: rotate(300deg);
  transform: rotate(300deg);
}

.plswait-fading-circle .plswait-circle12 {
  -webkit-transform: rotate(330deg);
  -ms-transform: rotate(330deg);
  transform: rotate(330deg);
}

.plswait-fading-circle .plswait-circle2:before {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.plswait-fading-circle .plswait-circle3:before {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}

.plswait-fading-circle .plswait-circle4:before {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.plswait-fading-circle .plswait-circle5:before {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

.plswait-fading-circle .plswait-circle6:before {
  -webkit-animation-delay: -0.7s;
  animation-delay: -0.7s;
}

.plswait-fading-circle .plswait-circle7:before {
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}

.plswait-fading-circle .plswait-circle8:before {
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}

.plswait-fading-circle .plswait-circle9:before {
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}

.plswait-fading-circle .plswait-circle10:before {
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}

.plswait-fading-circle .plswait-circle11:before {
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
}

.plswait-fading-circle .plswait-circle12:before {
  -webkit-animation-delay: -0.1s;
  animation-delay: -0.1s;
}

@-webkit-keyframes plswait-circleFadeDelay {

  0%,
  39%,
  100% {
    opacity: 0.2;
  }

  40% {
    opacity: 1;
  }
}

@keyframes plswait-circleFadeDelay {

  0%,
  39%,
  100% {
    opacity: 0;
  }

  40% {
    opacity: 1;
  }
}

/* Ajax Dateiupload - Start */
.ajax_up_box_shadow {
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}

#ajax_up_div_up_out {
  padding: 20px;
}

/* #ajax_up_div_drag {border: #1E327F 5px dashed;border-radius:15px;background:#EEE;width:400px;padding:20px;text-align:center;} */
/*  #ajax_up_div_drag:hover {background:#D2FFD2;} */
#ajax_up_fileA {
  display: none;
}

#ajax_up_div_over_bg {
  display: none;
  /*background:rgba(0,0,0,0.5);position:fixed;left:0;top:0;width:100%;height:100%;z-index:100;*/
}

#ajax_up_div_upload_out {
  /*background:#FFF;border-radius:5px;z-index:101;*/
  width: 800px;
  /*display:table;margin:200px auto 0 auto;padding:20px 0 20px 0;text-align:center;*/
}

/*#ajax_up_div_upload_out #ajax_up_return_ajax {margin:10px 0 0 0;}*/
/*#ajax_up_div_upload_out*/
#ajax_up_ip {
  padding: 20px 0 0 0;
}

#ajax_up_progress,
#ajax_up_prozent {
  visibility: hidden;
}

#ajax_up_progress {
  width: 100%;
  /*height:20px;margin-top:10px;*/
}



#ajax_up_div_upload_files_flex {
  font-weight: normal;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

#ajax_up_div_upload_files_flex:after {
  content: "";
  display: block;
  height: 50px;
  width: 100%;
}

#ajax_up_div_upload_files_flex div {
  margin: 5px 10px 20px 10px;
  width: 230px;
  background: #EEE;
  border-radius: 3px;
}

#ajax_up_div_upload_files_flex div table {
  width: 100%;
}

#ajax_up_div_upload_files_flex div table td {
  border: 0;
  padding: 0;
}

#ajax_up_div_upload_files_flex div .td_file {
  text-align: left;
  white-space: nowrap;
}

#ajax_up_div_upload_files_flex div .td_file input {
  width: 200px;
}

#ajax_up_div_upload_files_flex div #ajax_up_del_item {
  border: 2px outset #FFF;
  background: #A00;
  color: #FFF;
  padding: 1px 3px 1px 3px;
  margin: 0 0 0 1px;
}


#ajax_up_div_upload_files_flex div #ajax_up_del_item:hover {
  border: 2px inset #FFF;
  cursor: pointer;
  background: #CCC;
  color: #000;
}

#ajax_up_div_upload_files_flex div .td_pic {
  width: 50%;
  height: 75;
}

#ajax_up_div_upload_files_flex div .td_pic span {
  width: 100px;
  height: 75px;
  display: block;
  text-align: center;
}

#ajax_up_div_upload_files_flex div .td_pic span img {
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
}

#ajax_up_div_upload_files_flex div .td_pic span svg {
  filter: drop-shadow(2px 2px 1px rgba(0, 0, 0, 0.3));
}

#ajax_up_div_upload_files_flex div .td_file_dat {
  padding: 0 3px 0 0;
  text-align: right;
}

#ajax_up_div_upload_files_flex div .td_bez textarea {
  width: 217px;
  height: 50px;
}

#ajax_up_div_upload_files_flex div .td_doc {
  text-align: left;
}

#ajax_up_div_upload_files_flex div .td_doc select {
  width: 224px;
}


#ajax_up_loading {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 3px solid rgba(000, 000, 000, .3);
  border-radius: 50%;
  border-top-color: #FFF;
  -webkit-animation: spin 1s ease-in-out infinite;
  animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
  }
}

/* Ajax Dateiupload - Ende */

/* Blätterfunktion */

.pages{
  width: 99%;
}