html {
  font-size: 14px;
  --app-min-width: 550px;
  
}

* { box-sizing:border-box; 

}

body.layout-display {
    min-width: calc(var(--app-min-width) + 30px);
}

/* ************* Layout */
.webapp-base { margin: 0px; padding: 0px; }
.webapp-ground { 
    column-gap:20px; padding:20px; background:#fff; width:100%; height: 100vh;
    display:flex; flex-direction:row; 
    min-width: calc(var(--app-min-width) + 20px);
    justify-content:center;
}
.webapp-ground > div {
    border: 1px solid #444;
    background:#fff;
    overflow-y:auto;
    overflow-x:hidden;
}
.webapp-ground > div:nth-child(1) { position:fixed; width:200px; min-width:200px; padding:10px;}
.webapp-ground > div:nth-child(2) { width:var(--app-min-width); min-width:var(--app-min-width); padding:0px; overflow:hidden;}
.webapp-ground > div:nth-child(3) { display: none; flex-grow:2; overflow-x:auto; height:100%; max-height:100%; }

.webapp-ground .webapp-menu { display:none; background-color: #fff; color: #eee; z-index:5; }
.webapp-menu a { display:block; }
.webapp-menu a.menuentry { display:block; padding:5px;}
.webapp-menu a.menuentry img { height:30px; width:30px; margin-right:10px; }

.webapp-menu .protomenu { display: none; background-color: #eee; color: #333; }
.webapp-menu .protomenu a.menuentry { padding: 5px 10px;}

.webapp-menu.menuHide { display:none; }
.webapp-menu.menuShow { display:block; }

/* ************* Layout - Prototyp */
@media (min-width: 1200px) {
    .webapp-base.prototyp .webapp-ground { background: #ddd; }
    .webapp-base.prototyp > .webapp-ground > div:nth-child(1) { position:unset; } 
    .webapp-base.prototyp > .webapp-ground > div:nth-child(3) {  display: block; } 

    .webapp-base.prototyp .appbase .apphead img { display: none;}
    .webapp-base.prototyp .webapp-ground .webapp-menu { display: block; background-color: #666;}

    .prototyp .webapp-menu.menuHide { display:block; }
    .prototyp .webapp-menu.menuShow { display:block; }

}



.webapp-base.prototyp .webapp-menu .protomenu { display: block; }


/* ************* Weiteres */

p.warn, div.warn { border: 1px solid #fbaa03; background-color: #fff1d3; color: #423009; padding:10px; word-break: break-word; }

/* ************* Webview */

/* ************* Layout - Accordion */
.ppAccordion { display:flex; flex-direction:column; height:100%; width:100%; }
.ppAccordion > div { padding:10px; }
.ppAccordion > .ppAccordionHeader { background-color:#666; color:#fff; font-weight:bold; flex-shrink:0; border-bottom:1px solid #aaa; }
.ppAccordion > .ppAccordionHeader:hover {cursor:pointer; background-color:#888;}
.ppAccordion > .ppAccordionBody { display:none; flex-shrink:4; flex-grow: 4; overflow-y:auto; }



/* ************* Input WECH */
.inputField {
    display: inline-block;
    width:100%;
    margin-bottom:8px;
}

.inputField.text > input,
.inputField.password > input {
    padding:3px;
    width: 100%;
}

.inputField.text > label,
.inputField.password > label { position:relative;  top:-3px; font-size: 0.9em; }
.inputField.checkbox > label { display:inline; }

.inputField.valErr { border: 2px dotted;}
.inputField.valErr > label { 
    color: #eee;
    /*
    display:none;
    
    */
}
.inputField > .valErr {
    /*
    position:relative;  
        */
    display:block;
    font-size: 1.0em; 
    padding:4px 2px; font-weight:bold;
}

/* ************* Input Bootstrap */
.form-floating label { color: #575656; } /* Dunkengrau*/
.form-floating>.form-control-plaintext~label::after, .form-floating>.form-control:focus~label::after, .form-floating>.form-control:not(:placeholder-shown)~label::after, .form-floating>.form-select~label::after {
    background-color:transparent !important; 
}

.form-floating { margin-bottom: 8px; } 
.invalid-feedback { color: #575656; } /* Dunkengrau*/
.form-control.is-invalid { border-color: #575656; } /* Dunkengrau*/

:root{
--bs-form-valid-border-color:#575656;
--bs-form-invalid-border-color:#575656;
}

/* ************* Input Individuell */
.input-check{ 
    margin-bottom:8px; 
}
.input-check input[type=checkbox] { 
    position:absolute;
    margin-top:5px;
    transform: scale(1.5); 
}
.input-check label { 
    padding-left:25px;
}