html, body {  font-family: Calibri, Arial; height: 100%;  }
body { margin: 0px; padding: 0px;  }
h1, h2, h3, h4, p { margin-top:0px; margin-bottom:3px; padding-top:2px; padding-bottom: 2px;  }

a {  text-decoration: none; color: #000; }
/*  a:hover { background-color: #aaa; }  */
a, a:visited, a:active { color: #000; }

img { border: 0px; }

.blockScreen { z-index: 9997; background-color: #d3d3d3; opacity: 0.5; position: fixed; top: 0px; left: 0px; width: 100%;height: 100%; } 

* { box-sizing: border-box; }
/* ***************  proto */
body.proto { background-color: #d0d0d0; }
.cols { display: flex; flex-direction: row; column-gap:20px; height: 100vh; padding: 20px; }
.cols > div { overflow:auto; border: 1px solid #888; background-color:#fff;}
.cols > div:nth-child(1) { width: 230px; padding: 10px; }
.cols > div:nth-child(2) { flex: 2; max-width:700px;  }
.cols > div:nth-child(3) { flex: 1; padding: 10px;  }
.cols h1 { font-size: 20px; margin-bottom:5px; margin-top: 5px; text-align:center;  }
.cols h2 { font-size: 18px; padding-bottom: 2px;margin-bottom: 10px;margin-top: 5px;text-align: center;border-bottom: 1px dotted #808080;}
.cols h3 { font-size: 18px; padding-bottom: 2px; margin-bottom: 7px;margin-top: 5px;text-align: center;}

.nav .appTargetLink > .img { max-width: 32px;margin-right:15px; }
.nav .appTargetLink > .img > img { width: 24px; height: 24px; max-width:24px; max-height:24px;  }

.nav { color: #f0f0f0; }
.nav hr { border-top: 1px dashed #e0e0e0; border-bottom: 0px; }
.nav p { padding: 10px; word-break: break-all;}

.proto .nav {  background-color: #343434; padding-top:20px; }
.proto .nav a { margin-bottom: 5px; margin-top: 2px; font-size:18px;  color: #fff; text-decoration:none; font-weight: 500; margin-left:10px;}
.proto .nav a.menu { margin-bottom: 2px; margin-top: 2px; display:block; }
.nav a:hover { background-color: #555; }  
.proto .nav h2 { color: #fff; }
.proto .nav a { }

.proto .nav select { margin-bottom: 5px; margin-top: 2px; font-size:18px; margin-left:10px; padding: 4px; }


.proto div.login { width: 260px; margin-left:auto; margin-right:auto; padding:0px;  }
.proto .login label { display: inline-block; width:100px;}
.proto .login input { width:150px;}
.proto .login .Button { width:100%; text-align:center; }
.proto .login p { border: 0px;}

.context textarea { width: calc(100% - 15px); height:60px;}
.context input { width: calc(100% - 15px); height:20px;}
.context .Button { display:block; margin-top:0px; margin-bottom:20px; text-align:center;  }
.context code { font-size: 12px; }


/* ***************  APP  */
body.app { background-color: #fff;font-size:14pt;  }

.app { margin: 0px; }
/*
.app .appdisplay { display:flex; flex-direction:column; height:100vh; background: #fafafa; }
.app .appdisplay .appcontent { flex:auto; overflow:auto; width:100%; max-width: 800px; min-width:300px; margin-left:auto; margin-right:auto; }
*/

.appdisplay { display:flex; flex-direction:column; background: #fafafa; }
.app .appdisplay { height: 100vh; }
.appdisplay .appcontent { flex:auto; overflow:auto; width:100%; max-width: 800px; min-width:300px; margin-left:auto; margin-right:auto; }
.app .appcontent { background: #ffffff; }

/* KP 220704 das hier muss wieder zurück gesetzt werden !!!!! 
    .apphead {  background-color: #343434; color:#fff; }
*/
.apphead {  background-color: #292929; color:#fff; }

.app .appHeadline { width:100%; max-width: 800px; min-width:300px; margin-left:auto; margin-right:auto;}

/* .app .appdisplay .appItem { background-color: #fff;}
    */


.app .title { background-color: #E2001A; color:#fff; }
.app h3.title { margin: 0px;}

.app .nav { display: none; position:fixed; top:3px; min-width:350px; z-index: 9998; }
.app .nav { background-color: #343434; color: #fff; }
.app .nav a { color: #fff; font-size:16pt; }
.app .nav a:visited, a:active { color: #fff; }
.app .nav .appTargetLink { min-height: 40px; text-decoration:none;}
.app .nav .appTargetLink.menu > .img { width: 45px; margin-right:5px; } 
.app .nav .appTargetLink.menu > .img > img { max-width:40px; max-height: 40px;}

.app div.login { align-content: center; text-align:center; padding: 0px; }
.app .login input { width: 80%; font-size: 14pt; }

.app a.Button { background-color: #E2001A; color: #fff; background-image:none; border:none; font-weight:bold; padding: 5px 30px 4px 30px; margin: 6px 5px 6px 0px; display: inline-block; text-decoration: none; }
.app .context { display:none;}

.app .footer { margin-top: 45px; margin-bottom:45px;  text-align: center; color:#666; text-transform:uppercase; font-size:12px; }
.app .footer p { display: inline-block; margin-right: 20px; margin-left: 20px;}
.app .footer a { text-decoration: underline;  color: #666; }

/* ************************* GVO DE */
.mandDE .subhead { height:6px; background-color: #E40A1A; margin-top:-1px;}
.mandYP .subhead { height:6px; background-color: #EE7C00; margin-top:-1px;}
.mand .subhead { height:6px; background-image: url(../_images/login-header-subline.jpg); background-size:cover; margin-top: -1px;}

.mandYP div {
    font-family: UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
    line-height:30px;
}
.mandDE div, .mandAT div {
    font-family: Roboto,Arial,sans-serif;
    line-height:30px;
}

/* ******************* AppHeadline */
.appHeadline { display:flex; align-items:center; min-height:40px; text-decoration: none;  padding: 5px 20px; }
.appHeadline > .menu { max-width: 40px; margin-right:10px; }
.appHeadline > .back { max-width: 40px; margin-right:10px;}
.appHeadline > .pagetitle { flex:auto;  }
.appHeadline > .pagetitle > img { max-height: 42px; height:42px;}
.appHeadline > .mand { max-width: 40px; margin-right:10px; }
.appHeadline > .mand > img { max-height: 40px; }
.appHeadline a { display: inline-block;}


@media (min-width: 880px) {
    .app .appHeadline .mand { position:fixed; left:10px; top:20px;}
    .app .appHeadline > .mand > img { 
        max-height: 60px; 
        box-shadow: 0px 4px 2px #ccc;

    }
}
@media (min-width: 980px) {
    .app .appdisplay .menu { margin-left: -60px;}
 }




/* ******************* ITEMS */

.appTargetLink { display:flex; }
.appTargetLink > .img { width: 20px; margin-right:5px; } 
.appTargetLink > .img > img { max-width:18px; max-height: 18px; }
.appTargetLink > .text { flex:auto; }



.appItem { padding: 5px 20px; }
.appItem a { text-decoration: underline;}

.itemHeadline { font-weight:bold; font-size: 24px; margin-top:10px; margin-bottom: 15px; text-align:center;  }
.itemSubHeadline{ font-weight:bold; font-size: 20px; margin-top:10px; margin-bottom: 10px; }
.itemSubHeadline > img.ico24 { width: 24px; height: 24px; margin-top: 3px; margin-right: 4px; float: left; }

.itemTextblock { display:flex; margin-bottom: 10px; }
.itemTextblock > .imgfree { flex:auto; }
.itemTextblock > .imgfree > img { max-width:100%; margin-right:10px;}
.itemTextblock > .imgmiddle > img { max-width:200px; max-height:60px; margin-right:10px;}
.itemTextblock > .imgsmall > img { max-width:32px; max-height:32px; margin-right:10px;}
.itemTextblock > .text { flex:auto; }
.itemTextblock > .imgCenter { width: 100%; text-align:center;  }

a.itemListview { display:flex;  min-height:36px; border-bottom: 1px solid #f0f0f0; border-top: 1px solid #f0f0f0; text-decoration: none; margin-top:-1px;}
a.itemListview > .icon img { width:35px; max-width:35px; margin-right:15px; }
a.itemListview > .text { flex:auto; margin-top:auto; margin-bottom:auto;}
a.itemListview > .next { max-width: 35px; margin-top: 5px;}
a.itemListview > .next > img { max-width: 15px;}
a.itemListview:hover > .text { opacity:0.7; }
a.itemListview:hover > .next { transform:scale(1.1);}
a.itemListview:hover > .icon { transform:scale(1.1);}

.itemButton a, .itemSplitbutton a,  a.itemButton { display: block; padding:5px; text-align:center;  margin: 3px 20px 10px 20px; border-radius: 6px; background-color: #E2001A; color: #fff; font-size: 18px;  text-decoration: none; }
.itemButton a:hover, .itemSplitbutton a:hover, a.itemButton:hover  { font-weight: 600;}

 .mandYP .itemButton a, .mandYP .itemSplitbutton a, .mandYP a.itemButton { background-color: #EE7C00; }

.itemSplitbutton { display: flex; column-gap:1px;}
.itemSplitbutton >a { flex: 1; margin-left: 0px; margin-right: 0px; border-radius: 0px;}
.itemSplitbutton > a:first-child { border-top-left-radius: 7px; border-bottom-left-radius: 7px; }
.itemSplitbutton > a:last-child { border-top-right-radius: 7px; border-bottom-right-radius: 7px; }
.itemSplitbutton > .appTargetLink > .img { margin:auto; }
.itemSplitbutton > .appTargetLink > .img > img { width:35px; height:35px; max-width:35px; max-height:35px; }
.itemSplitbutton > .appTargetLink:hover > .img > img { transform:scale(1.1);}

.itemDropdown > .drop { position: relative; margin-bottom: 50px; display: block; }
.itemDropdown > .drop > ul { padding: 0px; margin: 0px; border: 1px solid #888; position: absolute; width: 100%; }
.itemDropdown > .drop > ul > span { background-color: #eee; display: block; padding: 5px 10px; background-image: url(../_images/down.png); background-position-x:right; background-position-y:center;background-repeat:no-repeat;}
.itemDropdown > .drop > ul > li  { display: none; background-color: #fff;  padding: 5px 10px; z-index:999; }
.itemDropdown > .drop > ul > li:hover  { background-color: #eee; }
.itemDropdown > .drop > ul > li > a { text-decoration: none; display:block; }

.itemDropdown > .drop.open > ul { z-index: 9998; }
.itemDropdown > .drop.open > ul > li  { display: block; }
.itemDropdown > .drop.open > ul > span  { border-bottom: 1px solid #888; }

.itemDropdown.fifty { display: flex; }
.itemDropdown.fifty > div { flex: 1; }

.itemCheckbox  { display: flex; }
.itemCheckbox > div { flex: 1; }
.itemCheckbox .check > a > img { width:75px; }
.itemCheckbox .check > a.on { display: none; }
.itemCheckbox .check > a.off { display: block; }
.itemCheckbox .check.on > a.on { display: block; }
.itemCheckbox .check.on > a.off { display: none; }

.googleMap {width: 100%; height:250px;}

.itemGoogle {  }
.itemUnknown { }
.app .itemWebView > iframe { height: calc(100vh - 80px); box-sizing:border-box; border:none; padding:0px; width:100%;  }
.proto .itemWebView > iframe { height: calc(100vh - 130px); box-sizing:border-box; border:none; padding:0px; width:100%;  }

.itemCam > canvas { display:none; }
.itemCam > .uploadInfo { border:none; margin-bottom:20px; } 
    #details { border:none; margin-bottom:20px;}
    #progress { border:none; margin-bottom:20px;}

input[type=file] {
    width: 100%;
    border: 1px solid #666;
    background: #dbd7d7;
    padding: 10px;
}
input[type=file]::file-selector-button {
    padding: 5px 20px;
}


/* ************************ Loader */
.loader { border: 6px solid #d3d3d3; border-radius: 50%; border-top: 6px solid #343435; border-left: 6px solid #343435; 
    width: 40px; height: 40px; -webkit-animation: spin 1s linear infinite; animation: spin 1s linear infinite;}

.loader24 {
    border: 4px solid #d3d3d3; border-radius: 50%; border-top: 4px solid #343435; border-left: 4px solid #343435;
    width: 24px; max-width:24px; height: 24px; max-height:24px;  -webkit-animation: spin 1s linear infinite; animation: spin 1s linear infinite; }

/* Safari */
@-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }


.overlayBlock { z-index: 18000; background-color: #d3d3d3; opacity: 0.3; position: fixed; top: 0px; left: 0px; width: 100%;height: 100%; }
.overlayBlock.transparent { background-color:transparent; }
.overlayPopup { z-index: 18001; display: inline-block; position: fixed;top: 0; bottom: 0; left: 0; right: 0; width: 200px; height: 100px; margin: auto; padding: 0px; overflow: hidden; background-color: #fff;border: 1px solid #808080;  display:flex; flex-direction:column;}
.overlayPopup > iframe { border: 0px;}
.overlayContent { flex-grow:1; overflow:auto; margin:0px; text-align:left;}
.overlayContent .loader { margin: auto; }
.overlayContent > div { margin: 10px; text-align:center;}
.overlayFooter { margin-top: auto; margin-bottom:2px; text-align:center }
.overlayFooter button { padding:5px;}

.fullBlock { z-index: 9997;   position: fixed; top: 0px; left: 0px; width: 100%;height: 100%; } /* background-color: #d3d3d3; opacity: 0.5; */


/* ******************* Real-WebPages realpage ***********  */
.realpage .block { background-color: #fff; padding: 5px 20px;}

.realpage h1 { background-color: #fff; padding: 5px 20px; font-weight:bold; font-size: 24px; margin-top:10px; margin-bottom: 15px; text-align:center;  }
.realpage h2 { font-weight:bold; font-size: 20px; margin-top:10px; margin-bottom: 10px; }

/*.realpage a { text-decoration: underline; }*/

.realpage .button { display: block; padding:5px; text-align:center;  margin: 3px 20px 10px 20px; border-radius: 6px; 
                    /* weicheres rot für alle:  #EA4235 | Gvo-Rot: #E2001A*/
                    background-color: #EA4235; 
                    color: #fff; font-size: 18px;  text-decoration: none; }
.realpage a.button:hover { font-weight: 600;}

.realpage .mand .itemButton a, .realpage .mand .itemSplitbutton a, .realpage .mand a.itemButton { background-color: #EA4235; }

.realpage .appInput { display:block; margin-bottom: 8px; width:100%; }
.realpage .appInput label { display:block; font-size:12pt; width:100%; color:#666; }
.realpage .appInput input { padding: 5px; border: 1px solid #d3d3d3; font-size: 14pt; width:100% ; font-family: Calibri, Arial;}




/* *** Login */
/*
    .pageLogin .subhead { height:6px; background-image: url(../_images/login-header-subline.jpg); background-size:cover; margin-top: -1px;}
    .pageLogin .appItem .imgbig img { max-height: 64px; height:64px; }

*/

.pageLogin .appItem.itemTextblock { text-align:center; color: #343434; font-size:20px; }
.pageLogin .itemTextblock { display: block;}
.pageLogin .appItem input { padding: 10px 20px; border: 1px solid #e0e0e0; border-radius:10px; margin-top:5px; margin-bottom:8px; margin-left:auto; margin-right:auto; width: 250px; display:block;  }
.pageLogin a.login { margin-top:5px; margin-bottom:8px; padding: 10px 20px; margin-left:auto; margin-right:auto; width: 150px; }
.pageLogin .appdisplay .appItem { background-color: transparent;}
.pageLogin .appcontent { background-color:#ffffff;  background-image: url(../_images/login-background.jpg); background-size: cover; background-repeat:no-repeat; background-position-y:100px; }

/*.app .pageLogin .appdisplay { height:100vh; }*/
.pageLogin .loader { margin-right: auto; margin-left: auto;}
.pageLogin .keep > div { display: inline-block; vertical-align:top; margin-top:10px; margin-bottom:5px;}
.pageLogin .keep > div input { width:auto;}
.pageLogin .keep > div:nth-child(2) { max-width:215px; text-align:left; color:#666; font-size:14px;}
.pageLogin .appdisplay .appItem.loginError { border: 1px solid #EA4235; background:#fff; margin-left:30px; margin-right:30px; }

/* *** Welcome 
.pageWelcome .subhead {
    height: 6px;
    background-image: url(../_images/login-header-subline.jpg);
    background-size: cover;
    margin-top: -1px;
}

.pageWelcome .appItem .imgbig img {
    max-height: 64px;
    height: 64px;
}

.pageWelcome .appItem p {
    text-align: center;
    color: #343434;
    font-size: 20px;
}

.pageWelcome .appItem input {
    padding: 10px 20px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    margin-top: 5px;
    margin-bottom: 8px;
    margin-left: auto;
    margin-right: auto;
    width: 250px;
    display: block;
}

.pageWelcome a.login {
    margin-top: 5px;
    margin-bottom: 8px;
    padding: 10px 20px;
    margin-left: auto;
    margin-right: auto;
    width: 150px;
}

.pageWelcome .appdisplay .appItem {
    background-color: transparent;
}

.pageWelcome .appcontent {
    background-color: #ffffff;
    background-image: url(../_images/login-background.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position-y: 100px;
}

.pageWelcome .loader {
    margin-right: auto;
    margin-left: auto;
}

.pageWelcome .keep > div {
    display: inline-block;
    vertical-align: top;
    margin-top: 10px;
    margin-bottom: 5px;
}

.pageWelcome .keep > div input {
    width: auto;
}

.pageWelcome .keep > div:nth-child(2) {
    max-width: 300px;
    text-align: left;
    color: #666;
    font-size: 14px;
}

    */


/* ******************* Page: App-Help  */
@media (max-width: 1200px)  {
    .apphelp img.help { border: 1px solid #dbd7d7; padding:4px; width:90%; max-width:400px; }
}
@media (min-width: 1200px)  {
    .apphelp img.help { border: 1px solid #dbd7d7; padding:4px; width:60%; max-width:400px; }
}
.apphelp .collapsible-body a { text-decoration: underline;}



div.context { height: 100%; max-height: 100%; }
div.ppVerticalTab { display: flex; flex-direction: column; height: 100%; border: 1px solid #eee; }
div.ppVerticalTab > div { flex-grow: 1; min-height: 0px; overflow-y: auto; overflow-x: auto; padding: 5px; }

div.ppVerticalTab > h1, div.ppVerticalTab > h2 {  margin-top:0px; margin-bottom: 0px; padding: 10px; }
div.ppVerticalTab > h1 { background-color: #343434; color: #f0f0f0; }
div.ppVerticalTab > h2 { background-color: #c0c0c0; color: #555; }
div.ppVerticalTab > h2:hover {  cursor: pointer; background: #d0d0d0; color: #222; }
div.ppVerticalTab > h2.vhOpen {  background: #606060; color: #f5f5f5; }


/* Materialize Update für z.b. App-Help */
div.collapsible-header { background-color: #ddd;}
div.collapsible-header.active { background-color: #292929; color: white; }