* {
    box-sizing: border-box;
   -moz-user-select: none;
    user-select: none;
}

.second{ position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    height: 100%;
    background-color: white;
    overflow: auto;
    max-width: 720px;
}

.third { position: fixed;
    top: 0;
    left: 0;
    z-index: 20;
    height: 100%;
    background-color: white;
    overflow: auto;
    max-width: 720px;
}

.cluster {
	width: 100%;
	display: /*inline-*/flex;
	float: Left;
}

/* desktop / maus vorhanden */
@media (hover: hover) and (pointer: fine) {
      /* Desktop: Icons sichtbar, Mobile versteckt */
      .desktop {
            display: inline-flex;         /* nebeneinander, Abstand über gap */
            gap: 0.5em;
      }
      .mobile-toggle { display: none; }
      .mobile-menu { display: none; }
}

/* Mobile / Touch Geraet */
@media ((hover: none) and (pointer: coarse)) or (max-width: 400px){
      .desktop { display: none; }
      .mobile-toggle { display: inline-block; }
      .mobile-menu { display: inline-block; }
}

.mobile-menu > li > button {
      background-color: rgba(0,0,0,0);
      border: none;
}
.mobile-menu {
      position: relative;
      top: 0;
      left: -19vw;
      /*right: -100%;
      top: 50%;
      right: 50%;*/
      /*position: absolute;
      top: 100%;
      left: 100%;*/

      margin: 0;
      min-width: 150px;
      background: rgba(0,0,0,.15);
      box-shadow: 0 4px 12px rgba(0,0,0,.35);
      display: none;                /* wird per JS eingeblendet */
      list-style: none;
      padding-left: 0.2em;
}


/* Optional: kleine Animation, damit das Öffnen flüssiger wirkt*/
.mobile-menu.show {
      display: block;
      animation: fadeIn .15s ease-out forwards;
}

@keyframes fadeIn {
      from { opacity: 0; transform: translateY(-4px); }
      to   { opacity: 1; transform: translateY(0); }
}

.content { width: 100%; font-family: Helvetica,Impact,arial,sans-serif; font-weight: 600; }

.middle{ position: absolute; top: 20%;}
body {
	margin: 0;
	padding: 0;
	width: 100%;
	max-width: 720px;
	margin: 0 /*auto*/;
}
textarea, input {
	font-family: inherit;
	font-size: 14px;
}
td{
	color: #424251;
	font-size: 14px;
	line-height: 150%;
}


.logoimage {height: 75px}

a { text-decoration:none;
    color: #000;
	cursor: pointer;
}

a:hover {
   text-decoration:underline;
}

a:visited:hover {
   text-decoration:underline;
}

.logo { position: relative; padding: 4px 4px 0px 4px; }
.box {position: absolute; width: 20%; top:200px; right: 1em; z-index: 4;}
.block {display: block;}

.borderbottom {border-bottom: 1px solid; padding: 5px 5px;}
.dborderbottom {border-bottom: 4px solid; padding: 0px 5px;}
.noborderbottom { padding: 5px 5px;}

.footerarea {padding: 8px; }
.footerbody {font-size: 18px; color: #ffffff;}
.footerversion {font-size: 10px; color: #ffffff;}

/*.case {clear: both;} */

.sizeS {border: 0px; width: 20%; float: left;}
.sizeSr {border: 0px; width: 20%; float: right;}
.sizeM {border: 0px; width: 40%;}
.sizeL {border: 0px; width: 50%;}
.sizeX {border: 0px; width: 100%;}
.size85 {border: 0px; width: 95%;}
.size15 {border: 0px; width: 5%;}

.AuftBmrkg { width: 100%; overflow-y: auto; resize: none; }

.search{ height: 24px; width: auto; float: left; cursor: pointer; }
.more{ height: 28px; width: auto; float:right; }
.plus{ height: 16px; width: auto; float:right; margin-top:2px; padding-left:10px; cursor: pointer; }
.icon { height: 16px; width: auto; float:right; margin-top:2px; padding: 0px 10px; }
.iconS { height: 16px; width: auto; margin-top:2px; padding: 0px 40px; }

.nameAlign { padding-left: 15px; padding-right: 15px; }


.but{ border: 1px solid #424251; padding: 6px; border-radius: 2px;
		background-color: #e6e6e6;}
.butInp{ border: 1px solid #424251; padding: 6px; border-radius: 2px;
		background-color: #91e8ec; cursor: pointer; }
.butFlt{ border: 1px solid #424251; padding: 6px; border-radius: 2px;
		background-color: #91e8ec; }
.butFlt input { width: 85% }
.butFlt img { cursor: pointer; }
.butInpRose{ border: 1px solid #424251; padding: 6px; border-radius: 2px;
		background-color: #ffaec9; cursor: pointer; }
.butFix{ border: 1px solid #424251; padding: 6px; border-radius: 2px;
		background-color: #91ec9b; }
.butFixRose{ border: 1px solid #424251; padding: 6px; border-radius: 2px;
		background-color: #ffaec9; }
.butPast{ border: 1px solid #424251; padding: 6px; border-radius: 2px;
		background-color: #ecc291; }


.butPush{ border: 2px solid #424251; padding: 0px 10px 4px 10px;
            border-radius: 10px; text-align: center; min-height: 60px; cursor: pointer;}
.butTxt{ min-width: 100px; }

.butDate{
      background-color: #91e8ec;
      border: 0px solid #333333;
      width: 90%;
      height: 20px;
      text-align: left;
}

.butDateRose{
      background-color: #ffaec9;
      border: 0px solid #333333;
      width: 90%;
      height: 20px;
      text-align: left;
}
.butCheck{width: 10%; display: flex; justify-content: space-between; }

.clickable{ cursor: pointer; }

select{ border: none;
      color: #424251;
      background-color: #91e8ec;
      width: 100%;
      height: 21px;
      font-size: 14px;
      -webkit-appearance: none;
      cursor: pointer;
}

option {
  font-size: 14px;
  padding: 0;

}
.optionHighlight
{
      background-color: #e6e6ff;
}


.green{ background-color: #58ef80; cursor: pointer; }
.red{ background-color: #f3220c; cursor: pointer; }
.rose{ background-color: #ffaec0; }
.grey{ background-color: #b4b2b2; }

.raporttextS{ width: 16%; display: flex; justify-content: space-between; }
.raporttextC{ width: 25%; display: flex; justify-content: space-between; }
.raporttextM{ width: 44%; display: flex; justify-content: space-between; }
.raporttextL{ width: 80%; display: flex; justify-content: space-between; }
.raporttextX{ width: 100%; display: flex; justify-content: space-between; }

.picflex { display: flex; justify-content: space-between; }

.TxtIcon { width: 80%; }
.TxtIcnSnd {
      width: 90%;

      resize: none;
      border: none;
      outline: none;

      padding: 6px;
}
.TxtIcnSnd:focus {
    outline: none;
}
.TxtAll { width: 100%; }
.TxtItem { width: border: 0px; padding: 0px; border-spacing: 0px; width: 40%; }
.IconTxtIcon { width: 80%; }
.IconTxtStar { width: 60%; }
.IconSmall { width: 5%; margin-left: auto }
.IconMsg { display: inline-block; max-height: 96px; width: auto; margin-left: 10%; margin-top: 10%; }

.searchtxt { width: 45%; }
.searchfld { width: 100%; height: 105%; z-index:2; color: black;
		 border:1px solid black;  background-color: white;
		 text-align: left; font-size: inherit; }
.searchcontain { width: 50%; padding-left: 1.5%; }
.searchpic { width: 3.5%; }

.messagetxt {width: 60%; }
.messagecnt {width: 5.5%; height: 19%; margin-left: auto }

.logtxtcontain {width: 40%; float: left; }
.logintxt { width: 100%; z-index:2; color: black;
		 padding-top: 8px;  background-color: white;
		 text-align: left; font-size: 24px; }

.logcontain {width: 60%; float: right; }
.loginfld { width: 100%; z-index:2; color: black;
		 border:1px solid black;  background-color: white;
		 text-align: left; font-size: 28px; margin-bottom: 4px; }

.loginbut {width: 100%; height: 64px; font-size: 28px; font-weight: 600;
		 text-align: center; border: 1px solid #424251; padding: 6px;
		  border-radius: 2px; background-color: #e6e6e6;}
.h28 {
      height: 28px;
}
.dokGrid {
	overflow: hidden;
	width: 100%;
	display: grid;
	justify-content: space-evenly;
	/* nur eine Kolonne bei Smartphone, sprich hier ist jedes item einfach 12 breit, aber fuer alle
       anderen style sheets werden 12 kolonnen verwendet, um diese gut unterteilen zu koennen. Meist
	   wird einfach zb. 5/ 7 geteilt Text&Bild angezeigt.
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; */
	grid-template-columns: repeat(12, 1fr);
}
.grid1-1of12
{
	grid-column: 1 / span 1;
}
.grid1-2of12
{
	grid-column: 1 / span 2;
}
.grid2-12of12
{
	grid-column: 2 / span 11;
}
.grid1-6of12
{
	grid-column: 1 / span 6;
}
.grid1-10of12
{
	grid-column: 1 / span 10;
}
.grid7-12of12
{
	grid-column: 7 / span 6;
}
.grid3-6of12
{
	grid-column: 3 / span 4;
}
.grid7-10of12
{
	grid-column: 7 / span 4;
}
.grid11-12of12
{
	grid-column: 11 / span 2;
}
.textDotDot
{
	white-space: nowrap;        /* kein automatischer Umbruch */
      overflow: hidden;           /* falls der Text doch zu lang wird */
      text-overflow: ellipsis;    /* optional: "…" am Ende anzeigen */
}

/* Grid Content, verhaeltnisse */
.dokGridName
{
	grid-column: 1 / span 4;
	white-space: nowrap;        /* kein automatischer Umbruch */
      overflow: hidden;           /* falls der Text doch zu lang wird */
      text-overflow: ellipsis;    /* optional: "…" am Ende anzeigen */
}
.dokGridAuthor
{
	grid-column: 5 / span 3;
	white-space: nowrap;        /* kein automatischer Umbruch */
      overflow: hidden;           /* falls der Text doch zu lang wird */
      text-overflow: ellipsis;    /* optional: "…" am Ende anzeigen */
}
.dokGridDate
{
	grid-column: 8 / span 2;
	white-space: nowrap;        /* kein automatischer Umbruch */
      overflow: hidden;           /* falls der Text doch zu lang wird */
      text-overflow: ellipsis;    /* optional: "…" am Ende anzeigen */
}
.dokGridAction
{
	grid-column: 11 / span 2;
	position: relative;   /* nötig, damit das absolute Menü
                             sich relativ zu diesem Block ausrichtet */
      z-index: auto;        /* kein eigener hoher z-index */
      overflow: visible;
}
.dokGridIconTitle
{
	grid-column: 12 / span 1;
}
.dokGridIcon
{
	grid-column: 13 / span 1;
}
.dokLine {
	padding: 0.5em;
	margin-top: 0.5em;

	border-radius: 0.5em;
	background-color: #e6e6ff;    /* hightlight */
	opacity: 0.8;
}
.dokLineAuftrag
{
	background-color: #e6e6e6;
}
.dokLine:hover {
	opacity: 1;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.dokAction
{
	visibility: hidden;
}
.dokAction > *
{
	max-height: 1em;
	text-decoration: none;
}
.dokLine:hover .dokAction {
	visibility: visible;
}

.vscrollpage {max-height: 300px; overflow-y:auto;}

.dlgbut {border: 1px solid #424251; padding: 6px;
		  border-radius: 2px; background-color: white;}

#x {
    position: absolute;
    background: red;
    border-radius: 12px;
    color: white;
    top: -10px;
    right: -10px;
}

#dokDropzone.hover {
    background-color: #f0f8ff;
    border-color: #3399ff;
}

.nav_icon {
      width: 100%;
      height: 100%;
      cursor: pointer;
      display: block;
}
.icon-wrapper {
      position: relative;               /* für das absolute Positionieren des Bubbles */
      width: 28px;
      height: 28px;
      margin: 0px 6px;
      display: inline-block;            /* mehrere Icons nebeneinander */
}

/* Das Notification-Bubble */
.badge {
      position: absolute;
      top: -4px;                         /* leicht über den Rand schieben */
      right: -4px;                       /* leicht nach rechts schieben */
      min-width: 16px;                  /* genug Platz für ein‑ oder zweistellige Zahlen */
      height: 16px;
      padding: 0 4px;                   /* horizontale Polsterung für mehrstellige Zahlen */
      background: #e53935;              /* roter Hintergrund */
      color: #fff;
      font-size: 10px;
      line-height: 16px;                /* vertikale Zentrierung */
      text-align: center;
      border-radius: 8px;               /* runde Ecken → Kreis/Oval */
      box-shadow: 0 0 2px rgba(0,0,0,0.3);
      pointer-events: none;             /* Klicks passieren durch zum Icon */
}
.badge:empty,
.badge[data-count="0"] {
    display: none;            /* keine notification bubble wenn count = 0 */
}


.overlay {
    position: fixed;
    inset: 0;                     /* top/right/bottom/left = 0 */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;                /* über allen anderen Elementen */
}

/* Hintergrund – leicht verdunkelt */
.overlay-bg {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
}

/* Inhalt des Overlays */
.overlay-content {
    position: relative;
    background: #fff;
    padding: 1.5rem;
    max-width: 90%;
    max-height: 80vh;
    width: 600px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    /*overflow: auto;*/
}

/* Textarea – fuellt den verfuegbaren Raum */
.overlayInput {
    flex: 1;
    width: 100%;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    resize: none;
    font-family: monospace;
    font-size: 1rem;
    padding: 0.5rem;
    /*border: none;
    outline: none;
}
.overlayInput:focus {
    outline: none;*/
}

/* Buttons */
.editorActions {
      margin-top: 0.4rem;
      margin-bottom: 0.4rem;
      display: flex;
      justify-content: flex-end;
      gap: 0.5rem;
}
.editorActions button {
      padding: 0.4rem 0.8rem;
      cursor: pointer;
}
/* Buttons */
.gruppenActions {
      margin-bottom: 0.5rem;
      display: flex;
      justify-content: flex-end;
      gap: 0.5rem;
}
.gruppenActions button {
      padding: 0.4rem 0.8rem;
      cursor: pointer;
      color: red;
}

/* Versteckt-Status */
.hidden { display: none !important; }

.comments {
    margin-top: 1rem;
    max-height: 50vh;
    overflow: auto;
    padding: 0;
    list-style: none;
}
.comment {
    border-bottom: 1px solid #ddd;
    padding: 0.5rem 0;
}
.comment-author {
    font-weight: bold;
    margin-right: 0.5rem;
}
.comment-text {
    display: block;
    margin-top: 0.2rem;
}

.hightScroll80vh
{
      max-height: 80vh;
      overflow: auto;
}
#chatov-list {
      display: inline-table;
      table-layout: fixed;
}
.chatOvEntry {
      display: flex;
      justify-content: space-between;
      padding: 2px;
      margin: 1px 2px;
}
.chat_icon {
      width: max( 24px, min(min(6vw, 6vh), 36px));
      height: max( 24px, min(min(6vw, 6vh), 36px));
      display: flex;
      align-items: center;
      justify-content: center;

      border-radius: max( 24px, min(min(6vw, 6vh), 36px));          /* Eck - Radius */
      overflow: hidden;
}
.chat_icon img {
      max-width: 100%;
      max-height: 100%;
      width: auto;
      height: auto;

      border-radius: max( 24px, min(min(6vw, 6vh), 36px));          /* gleicher Radius wie wrapper */
}
.chat_sendIcon {
      width: max( 24px, min(min(6vw, 6vh), 36px));
      height: max( 24px, min(min(6vw, 6vh), 36px));
      display: flex;
      align-items: center;
      justify-content: center;
      margin: auto auto;

      overflow: hidden;
}
.chat_iconBar {
      display: flex;
      justify-content: flex-end;
      /*border-bottom: 1px solid gray;*/
      background-color: rgba(200,200,200,0.2);
      padding: 2px 10px;
      gap: 0.5rem;
}
.chat_iconSmall {
      width: max( 14px, min(min(6vw, 6vh), 24px));
      height: max( 14px, min(min(6vw, 6vh), 24px));
      display: flex;
      align-items: center;
      justify-content: center;

      object-fit:contain
      overflow: hidden;
}
.chat_iconSmall img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
}

.newChatTable
{
      width:100%;
      border: 0;
}
.overflowAuto
{
      overflow: auto;
}

.chat_sendIcon img {
      max-width: 100%;
      max-height: 100%;
      width: auto;
      height: auto;
}
.chatov_chatname
{
      width: 40%;
      margin: auto;
      padding: 0 10px;

      white-space: nowrap;        /* kein automatischer Umbruch */
      overflow: hidden;           /* falls der Text doch zu lang wird */
      text-overflow: ellipsis;    /* falls zu lange: "…" am Ende anzeigen */
}
.chatov_chatpreview
{
      width: 40%;
      margin: auto;

      white-space: nowrap;        /* kein automatischer Umbruch */
      overflow: hidden;           /* falls der Text doch zu lang wird */
      text-overflow: ellipsis;    /* falls zu lange: "…" am Ende anzeigen */
}
.chatov_unreadMsg
{
      min-width: 1.2rem;
      height: 1.2rem;
      border-radius: 999px;
      margin: auto 0;
      background-color: #e10;
      color: #fff;
      font-size: 0.6rem;
      font-weight: 600;
      line-height: 1.2rem;
      text-align: center;
}

.color1 {background-color: #e6e6e6;}
.mainbubble { max-height: 450px; height: 75vh; overflow-y:auto; border-top: 1px solid rgba( 170, 170, 170, 1.0 ); border-bottom: 1px solid rgba( 170, 170, 170, 1.0 ); padding: 6px; /*border-radius: 2px;*/ background-image: url("../pics/chat-background.jpg");
      display: grid;
	justify-content: space-evenly;
	grid-template-columns: repeat(12, 1fr);
	row-gap: 0;
      align-content: start;
}
.chatbubble div {
      /*width: fit-content;*/
}
.chatbubble {
      /*width: fit-content;*/
      min-width: 40%;
      margin-top: 6px;
      border-radius: 8px;
}
.infobubbleWrapper {
      grid-column: 4 / span 6;
      width: 100%;
}
.infobubble {
      padding: 3px 10%;
      font-size: 9px;
      background-color: rgba( 170, 170, 170, 100 );
}
.infobubble div {
      margin-left: auto;
      margin-right: auto;
      width: fit-content;
}
.leftbubbleWrapper {
      grid-column: 1 / span 8;
      width: 100%;
}
.leftbubble {
      border: 1px solid black;
      padding: 6px;
      background-color: white;

      width: fit-content;
}
.rightbubbleWrapper {
      grid-column: 5 / span 8;
      width: 100%;
}
.rightbubble {
      border: 1px solid black;
      padding: 6px;
      background-color: rgba( 175, 255, 152, 0.9 );
      float: right;
}
.messageContent{ white-space: pre-wrap; }
.maxWidth100{ max-width: 100%; }

#notificationCheckbox
{
      width: 15px;
      height: 15px;
      margin: auto;
}
#notif a
{
      color: blue;
}

h6 { margin: 0; }