html, body 
{
    height: 100%;
    margin: 0;
    font-family: ProjectFont
}
div,a,p,span{
    user-select: none;
}
div.topMenu{
    position:fixed;
    left:0px;
    right:0px;
    top:2vh;
    height:4vh;
    background-color:green;
    opacity:1;
    z-index:100;
}
div.appcontent{
    position:fixed;
    left:0px;
    right:0px;
    top:0vh;
    bottom:2vh;
    z-index:2;
}
div.contentArea{
    display:none;
    position:absolute;
    top:0vw;
    right:1vw;
    left:1vw;
    bottom:1vw;
    z-index:2;
}
div.contentArea>div.title{
    position:absolute;
    top:0px;
    height:7vh;
    
    width:100%;
    display:flex;
    justify-content: center;
    align-items:center;
}

div.contentArea>div.title>h1{
    margin:0px;
    font-size:5vh;
}


div.contentArea>div.menu>a:not(last-child)>div{
    
    
}
a.padLR>div{
    padding-left:1vw !important;
    padding-right:1vw !important;
}
a.button.active>div
{
    border-style:solid;
    border-color:black;
    border-radius:3px;
}
div.contentArea>div.menu>a.active>div{
    border-style:solid;
    border-color:black;
    border-width:0px;
    border-bottom-width:2px;
}
span.subtitle:not(:empty)::before{
    content:" | "
}
div.contentArea>div.menu>a:hover>div
{
    background-color:lightblue;
}
div.contentArea>div.menu>a>div{
    height:100%;
    box-sizing: border-box;
    max-width:fit-content;
    min-width:10vw;
    padding-left:2vw;
    padding-right:2vw;
    background-color:transparent;
    color:black;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:2vh;
}
div.contentArea>div.appmenu{
    position:absolute;
    top:8vh;
    height:4vh;
    left:0vw;
    right:10vw;
    display:flex;
    justify-content: start;
    gap:1vw;
}
div.contentArea>div.content{
    position:absolute;
    top:14vh;
    bottom:5vh;
    width:100%;
    background-color:transparent;
}
div.appcontent>div.contentArea>div.closeButton>a>div>img,
div.appcontent>div.logout>a>div>img
{
    width:3vh;
    height:3vh;
}
div.appcontent>div.logout>a>div{
    font-weight:900;
    font-size:2em;
    line-height: 1;   
}
a.button.img>div
{
    padding:0px !important;
}
div.contentArea>div.closeButton>a>div{
    display:flex;
    position:absolute;
    top:1vw; 
    height:4vh;
    width:4vh;
    left:0vw;
    display:flex;
    z-index:1000;
}
div.contentArea>div.closeButton>a:hover>div{
background-color:#cFc041
}
div.appcontent>div.logout{
    position:absolute;
    top:1vw; 
    height:4vh;
    width:4vh;
    right:1vw;
    display:flex;
    z-index:1000;
    
    
}
div.contentArea>div.sectionmenu{
    position:absolute;
    bottom:0vh;
    height:4vh;
    
    right:0vw;
    
    display:flex;
    justify-content: end;
    gap:1vw;
    
}
div.contentArea>div.content.centered{
    display:flex;
    justify-content:center;
    align-items:center;
}

div.tilelayer{
    position:relative;
    display:flex;
    padding-top:10vw;
    padding-right:10vw;
    padding-left:10vw;
    padding-bottom:10vw;
    z-index:2;
    flex-direction: row;
    gap:3vw;
}
a>div.tile{
    cursor:pointer;
}
a:hover>div.tile>div.title{
    background-color:#f5f2e9;
}
a:hover>div.tile>div.bg{
    opacity:0.4;
}


div.tile{
    display:flex;
    width:15vw;
    height:15vw;
    position:relative;    
}
div.tile>div.bg.customerManagement{
    position:absolute;
    width:100%;
    height:100%;
    max-width:100%;
    background-image:url(/images/customer.svg);
    background-size: cover;
    background-position: center;
}
div.tile>div.bg.lekafManagement{
    position:absolute;
    width:100%;
    height:100%;
    max-width:100%;
    background-image:url(/images/lekaf.svg);
    background-size: cover;
    background-position: center;
}

div.tile>div.bg.settings{
    position:absolute;
    width:100%;
    height:100%;
    max-width:100%;
    background-image:url(/images/settings.svg);
    background-size: cover;
    background-position: center;
}
div.tile>div.bg.contentManagement{
    position:absolute;
    width:100%;
    height:100%;
    background-image:url(/images/subjects.png);
    background-size: cover;
    background-position: center;
}

div.tile>div.title{
    position:absolute;
    bottom:0px;
    width:100%;
    height:3vw;
    background-color:#ffffffaa;
    display:flex;
    justify-content:center;
    align-items:center;
}
div.tile>div>h1{
    margin:.2vh;
    font-size:1.5vw;
}

div.centeredcontent
{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    height:100%;
    flex-direction: column;
}
div.centeredcontenttop
{
    display:flex;
    justify-content:start;
    align-items:center;
    width:100%;
    height:100%;
    flex-direction: column;
}
div.backgroundrome
{
    background-image:url(/images/background.jpg);
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center;
    z-index: 1; /* Hinter den Inhalt schieben */
}
div.backgroundrome.faded{
    opacity: 0.05; /* Opazität nur für das Bild */
}
div.centeredcontenttop>div.errormessage{
    display:flex;
    margin-top:5em;
    width:50vw;
    height:20vh;
    background-color:#f5f2e9;
    flex-direction: column;
}
div.centeredcontenttop>div.errormessage>div.title{
    height:5vh;
    background-color:red;
    color:white;
    width:100%;
    display:flex;
    justify-content: center;
    align-items: center;
    font-size:3vh;
}
div.centeredcontenttop>div.errormessage>div.content{
    height:5vh;
    width:100%;
    padding:1vw;
        
}
a>div{
    cursor:pointer;
}

div.centerline{
    margin-top:2vh;
    display:flex;
    width:100%;
    max-height:max-content;
    justify-content:center;
    align-content: center;
}

a.charButton:hover>div
{
    background-color:lightblue;
}
a.charButton{
   
   width:4vh;
   height:4vh;
}
a.charButtonEmpty>div
{
    border-style:solid;
    border-width:1px;
    background-color:transparent !important;
}
a.imageButton:hover>div
{
    background-color:lightblue;
}
a.imageButton>div>img{
    width:4vh;
    height:4vh;
}
a.imageButton>div{
    cursor:pointer;
    display:inline-flex;
    max-width:4vh;
    padding-right:2vh;
    padding-left:2vh;
    padding-top:1vh;
    padding-bottom:1vh;
    width:4vh;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    height: 4vh;
    border-radius:2vh;
}

a.charButtonEmpty:hover>div
{
    background-color:lightblue !important;
}
a.charButton>div{
    cursor:pointer;
    display:inline-flex;
    max-width:4vh;
    padding-right:2vh;
    padding-left:2vh;
    padding-top:1vh;
    padding-bottom:1vh;
    width:auto;
    font-size:2vh;
    font-weight:500;
    background-color:#F5af41;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    height: 4vh;
    place-items: center;
    border-radius:2vh;
}

div.fakeButton{
    display:inline-block;
    max-width:max-content;
    padding-right:2vh;
    padding-left:2vh;
    padding-top:1vh;
    padding-bottom:1vh;
    width:auto;
    font-size:1.5vh;
    background-color:#c0c0c0;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 5vh;
    font-weight:bold;
}

div.centeredcontenttop.backgrounderror
{
    background-image:url(/images/error.png);
    background-size: cover;
    
}
div.centeredcontent>div.login>form
{
    display:flex;
    flex-direction: column;

}
div.centeredcontent>div.login:hover{
    opacity: 1;
}
div.centeredcontent>div.login{
        background: white;
        opacity: .0;
        height:auto;
        width:50vw;
        display:flex;
        flex-direction:column;
        justify-content: center;
        align-items: center;
        padding-bottom:2vh;
        padding-top:2vh;
        border-radius:3px;
}
div.centeredcontent>div.login>div.authContent>div.formContent>form{
        display:flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    
}
div.centeredcontent>div.login>div.authContent>div.formContent>div.ttl{
    display:flex;
    width:100%;
    text-align:center;
}
div.centeredcontent>div.login>div.authContent
{
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items:center; 
    
    width:70%
}
div.centeredcontent>div.login>div.authContent>div.title{
    display:flex;
    padding-top:.5em;
    padding-bottom:1vh;
    font-size:3em;
    justify-content: center;
    align-items: center;
}
div.centeredcontent>div.login>div.authContent>div.title>img{
    width:80%;
}
div.centeredcontent>div.login>div.authContent>div.formContent
{
    width:80%;
    padding-top:0vw;
}
div.centeredcontent>div.login>div.authContent>div.formContent>form>div.fieldname{
    
    width:100%;
    height:100%;
    margin-bottom:.5vh;
}
div.centeredcontent>div.login>div.authContent>div.formContent>form>div.action
{
    background-color:transparent;
    width:100%;
    height:100%;
    margin-bottom:.5vh;
    box-sizing:border-box;
}
a{
    cursor:pointer;
    color:blue;
}
a.button.lowHeight>div{
    height:3vh !important;
}
a.button>div.fill{
    width:100%;
    min-width:4vh;
}

a.button>div{
    cursor:pointer;
    display:inline-block;
    max-width:max-content;
    padding-right:1vh;
    padding-left:1vh;
    padding-top:.5vh;
    padding-bottom:.5vh;
    width:auto;
    font-size:1.5vh;
    background-color:#f31748;
    color:white;
    border-radius:5px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 4vh;

}
a.button:hover>div{
    background-color:#f31748AA;
}
a.button.small>div{
    padding:.25vw !important;
    height:3vh;
}
a.button.fullwidth>div{
    width:100%;
}
a.button{
    cursor:pointer;
}
a.button.fullwidth>div{
    width:100%;
}
a.button.fullwidth>div{
    box-sizing:border-box;
    max-width:inherit !important;
    width:100% !important;
    display:flex;
    align-items:center;
    align-content: center;
    justify-content:center;
    
}
input[type="checkbox"]
{
    box-sizing: border-box;
    height:3em;
    width:3em;
    font-size:18px;
    
    padding-left:1vw;
    padding-right:1vw;
    margin-bottom:1.5vh;
    border-style:none;
}

input:focus {
  outline: none; /* Entfernt den Standardrahmen */
  border-style:solid !important;
  border-width: 2px !important;
  border-color:#f31748 !important; /* Blaue Umrandung */
  background-color: white !important; /* Hellblauer Hintergrund */
  
  box-sizing: border-box;
}
input[type="text"].error{
    background-color:red;
    color:white;
}
input[type="text"]
{
    background-color:white;
    -webkit-appearance: none;
    appearance: none;
    font-size:1.5em;
    width:100%;
    padding:0px;
    padding-left:1vw;
    padding-right:1vw;
    margin-bottom:1.5vh;
    border-style:solid;;
    border-width:1px;
    border-color:#c0c0c0;
}
input {
  all: unset;
  font-size: 16px;
  padding: 6px 10px;
  height: 36px;
  box-sizing: border-box;
}
input[type="text"],
input[type="password"]{
    box-sizing: border-box;
    height:3em;
    height: 3em !important;
    line-height: 1;
}
div.messageAfterAction{
    display:none;
}
input[type="password"]
{
    -webkit-appearance: none;
  appearance: none;
    
    font-size:1.5em;
    width:100%;
    padding-left:1vw;
    padding-right:1vw;
    margin-bottom:1.5vh;
    border-style:none;
}

input.error{
    background-color:red;
}

.scrollable {
    overflow-y: auto; /* Aktiviert vertikales Scrollen */
}

/* Scrollbalken für Webkit-basierte Browser */
.scrollable::-webkit-scrollbar {
    width: 6px; /* Breite des vertikalen Scrollbalkens */
    height: 6px; /* Höhe des horizontalen Scrollbalkens */
}

/* Track (der Bereich, auf dem der Scrollbar läuft) */
.scrollable::-webkit-scrollbar-track {
    background: transparent; /* Kann auch eine Farbe wie #f0f0f0 sein */
}

/* Griff (der bewegliche Teil des Scrollbalkens) */
.scrollable::-webkit-scrollbar-thumb {
    background: #888; /* Farbe des Griffs */
    border-radius: 10px; /* Runde Kanten */
}

/* Griff bei Hover */
.scrollable::-webkit-scrollbar-thumb:hover {
    background: #555; /* Etwas dunkler bei Hover */
}

div.milkyFullScreen
{
    position:fixed;
    left:0px;
    right:0px;
    bottom:0px;
    top:0px;
    z-index:1000;
    background-color:#ffffFFCC;
}
div.lostpw{
    width:100%;
    text-align: center;
}
div.lostpw>a{
    cursor:pointer;
    color:blue;
}
div.clickable{
    cursor:pointer;
}
div.fullSizeContent{
    width:100%;
    height:100%;
    overflow-y:scroll;
}
div.stackedOverlay{
    position: absolute;
    left:0px;
    right:0px;
    top:0px;
    bottom:0px;
    background-color:transparent;
}
div.stackedOverlay>a.closeButton>div{
    position:absolute;
    right:0px;
    height:7vh;
    aspect-ratio: 1;
    display:flex;
    background-color:#c0c0c004;
    
    
    box-sizing: border-box;
   
}
div.stackedOverlay>a.closeButton>div:after{
    content:"schließen";
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
     font-size: 1.5em !important;
  transition: all 0s !important;
  box-shadow: 0 0 0 1000px white inset; /* optional: Hintergrund neutralisieren */
  -webkit-text-fill-color: black !important;
  -webkit-animation: autofill 0s forwards;
  animation: autofill 0s forwards;
}
@keyframes autofill {
  100% {
    background: transparent;
    color: inherit;
    font-size: 1.5em;
  }
}
input:-internal-autofill-previewed {
  font-size: 22px !important;
}
@-webkit-keyframes autofill {
  100% {
    background: transparent;
    color: inherit;
    font-size: inherit;
  }
}
table>tbody>tr>td
{
    height:4vh;
    white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
table.clickable>tbody>tr>td
{
    cursor: pointer;
}

table>thead>tr>th
{
    background-color:#F5af4133;
    height:4vh;
}
table>tbody>tr:nth-child(odd)>td
{
    background-color:#F5af4111;   
}
table>tbody>tr:hover>td
{
    background-color:#F5af41FF;
}

div.infoline
{
    display:flex;
    flex-direction:column;
    width:100%;
    box-sizing: border-box;
    margin-bottom:4vh;
    padding-left:3vw;
    padding-right:3vw;
    
}
div.layoutcontainer{
    position:relative;
    display:flex;
    flex-direction:row;
    width:100%;
    height:100%;
    gap:1vw;
    
}
div.halfWidth{
    width:50%;
}
div.fullWidth{
    display:flex;
    width:100%;
}
div.fullHeight{
    display:flex;
    height:100%;
}
div.fillFull{
    display:flex;
    height:100%;
    width:100%;
    align-items: flex-start;
}
div.fillFullBGWhite{
    display:flex;
    height:100%;
    width:100%;
    align-items: center;
    flex-direction:column;
    justify-content: center;
    background-color: white;
}
div.padspace{
    box-sizing: border-box;
    padding:2vw;
}
div.halfHeight{
    display:flex;
    height:50%;
}
div.actionContainer
{
    background-color:transparent;
    display:flex;
    flex-direction: column;
    
}
div.rightFullHeight{
    display:flex;
    flex-direction: column;
    
    position:absolute;
    right:0px;
    top:0px;
    gap:1vw;
    height:100%;
}
textarea.cbArea{
    resize: none;
    width:100%;
    height: 30%;
}
div.leftFullHeight
{
    display:flex;
    flex-direction: column;
    background-color:transparent;
    position:absolute;
    left:0px;
    top:0px;
    height:100%;
}


div.namedContent
{
    display:flex;
    width:100%;
    flex-direction: column;
}
div.namedContent>div.title{
    display:flex;
    width:100%;
    height:1em;
    font-size:1em;
    align-items: center;
}
div.namedContent>div.content>input
{
    width:100%;
    
}
div.namedContent>div.content{
    display:flex;
    width:100%;
    height:2.0em;
    font-size:1.2em;
    background-color:#f0f0f0;
    align-items: center;
}

div.tooltip
{
    position:fixed;
    width:auto;
    height:3vh;
    background-color:green;
    font-weight: bold;
    color:white;
    display:flex;
    justify-content: center;
    align-items: center;
    z-index:10000;
    padding-left:1vw;
    padding-right:1vw;
}

div.fullContainer{
    width:100%;
    height:100%;
    position:absolute;
    top:0px;
    right:0px;
    bottom:0px;
    left:0px;
    background-color:transparent;
}