*, 
*:before, 
*:after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}
html {
    -webkit-user-select: none;
    user-select: none; 
	height: 100%;
}

html::-webkit-scrollbar {
    display: none;
}


body {
	height:100%;
    height: inherit;
    cursor: default !important;
	-webkit-user-select: none;
	user-select: none;  
    -webkit-font-smoothing: antialiased;
	padding: 0;
	margin: 0;
}

div::-webkit-scrollbar {
    display: none;
    width: 15px;
}


@media (max-device-width: 414px) {
	body {
		display:-webkit-box;
		display:-webkit-flex;
		display:box;
		display:flex;
		-webkit-box-orient:vertical;
		-webkit-flex-direction:column;
		flex-direction:column;
		overflow:hidden;
	}

	.scrollable {
		min-height:0;
		-webkit-box-flex:1;
		box-flex:1;
		-webkit-flex:1;
		flex:1;
		overflow-y:auto;
		-webkit-overflow-scrolling:touch
	}
}

div.centered_content {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

div#login {
	max-width: 300px;
}

div#info {
	width: 100%;
}

div#content {
    position: absolute;
/*  top: 8.1vh; */
    top: 0px;
	width: 100%;
	max-height: 90vh;
	overflow: hidden;
	overflow-y:auto;
	-webkit-overflow-scrolling: touch;
	max-width: 100vw;
    min-height: 80vh;
}

div#menu {
	position: fixed;
/*	top:0px;*/
    bottom: 1vh;
	width: 100%;
	max-width: 100vw;
	height: 8.2vh;
	padding-top: 0.3vh;
	background-clip: padding-box; 
	overflow: hidden;
	z-index: 1000;
}

#load-bar {
  position: fixed;
/*  top: 8.1vh; */
    bottom: 9.6vh;
    width: 100%;
    min-height: 8px;
    z-index: 1000;
}
#bar {
  content: "";
  display: block;
  position: relative;
  width: 100%;
  min-height: 8px;
  left: 50%;
  text-align: center;
  background-color: transparent;
}
#bar.loading {
  animation: loading 3s linear infinite;
}

#bar.tracking {
  animation: loading 3s linear infinite;
}

#bar.error {
    left: 0px;
    width: 100%;
}

#bar.longpress {
    animation: loading 3s linear infinite;
}

#versioninfo {
    position: fixed;
    bottom: 0px;
    z-index: 9000;
    text-indent: 2px;
    color: darkgray;
}

#quickjump {
    position: fixed;
    right: 3px;
/*    top: 14vh; */
    bottom: 11vh;
    height: 82vh;
    border-radius: 15px;
    font-size: 2.7vh;
    line-height: 3.1vh;
    text-align: center;
    font-weight: bolder;
    padding: 1vh 1vh 0 1vh;
}

#quickjump div {
    width: 3.3vh;
}

@keyframes loading {
    from {left: 50%; width: 0;z-index:100;}
    70% {left: 0; width: 100%;z-index: 10;}
    to {left: 0; width: 100%;}
}


div.right {
  position: absolute;
  right: 15px;
  font-size: x-large;
  padding-right: 15px;
  top: 5px;
}

div.menuicon {
	background-clip: border-box;
	background-size: 90% 90%;
	background-position: center;
	background-repeat: no-repeat;
	padding-left: 3px;
	padding-right: 3px;
	cursor: pointer;
	height: 6.6vh;
	width: 6.6vh;
	max-width: 12%;
	margin-top: 5px;
	margin-left: 5px;
	margin-right: 5px;
}

div.page {
	width: calc(100% - 10px);
	max-width: 100vw;
	top: 0px;
}


div.menupage {
    width: 100vw;
}

label.error {
	text-indent: initial !important;
}

label {
	display: block;
	padding: 5vw;
	margin: 1vh;
	min-height: 6vh;
	border: 0px;
	border-radius: 15px;
	font-weight: bold;
	font-size: 4.5vw;
}

label.topic {
    min-height: initial !important;
    width: 100% !important;
}
label.button {
	background-repeat: no-repeat;
	background-position: 95% 50%;
	background-size: 7vh 7vh; 
/*    background-size: 42pt; */
    height: 100%;
	text-align: left;
}

label.konto {
    padding-left: initial !important;
}

label.konto span {
    padding-left: 2% !important;
}

label.vorgang {
    padding-left: initial !important;
}
label.vorgang span {
    padding-left: 2% !important;
}

label.auftrag {
    padding-left: initial !important; 
}

label.auftrag span {
    padding-left: 2% !important;
}

.centered {
	font-size: 6vh;
}

label.button span {
	pointer-events: none;
	display: block;
	min-height: 6vh;
	background-repeat: no-repeat;
	background-position: 0px 50%;
	background-size: 6vh;
	padding-left: 19%;
}

label > span > input {
    height: 6vh;
    width: 60vw;
}
input {
	border: none;
	text-indent: 2px;
	height: 6vh;
	width: 70vw;
	font-size: 100%;
	border:solid 1px #ccc;
	border-radius: 5px;
}

@media (orientation:landscape) {
    div.menuicon.portrait {
        display: none !important;
    }
}
@media (orientation:portrait) {
    div.menuicon.landscape {
        display: none !important;
    }
}

@media (orientation:landscape) {
    div#menu {
        height: 11vh;
        padding-top: 1vh;
    }
    #load-bar {
        bottom: 12.1vh;
    }
    div#content {
        bottom: 10vh;
        max-height: 90.5vh;
    }
    div.menuicon {
        height: 9.5vh;
        width:  9.5vh;
    }
    label {
        font-size: 6vh;
    }
    label.button span {
            min-height: 12vh;
            background-size: 11vh;
    }
/*
    input {
        font-size: 5vh;
    }
*/    
}




div.menuicon[data-badgenumber]:after {
    content:attr(data-badgenumber);
    display: none;
    position:relative;
    font-size: 3vh;
    top: -0.1vh;
    right: -3.5vh;
    width: 3.5vh;
    height: 3.5vh;
    line-height:3.5vh;
    text-align:center;
    font-family:"Helvetica Neue";
    font-size: 3.2vh;
    font-weight:bold;
    background-color: darkred;
    color:#fff;
    text-shadow:0px 1px 0px rgba(0,0,0,.15);
    box-shadow:
        inset 0px 1px 0px rgba(255,255,255,.35),
        0px 1px 1px rgba(0,0,0,.2);
    border-radius:4em;
    opacity:0.9;
}

div.menuicon.badge[data-badgenumber]:after {
    display: inline-block;
}

@media only screen and (orientation:portrait) { 
    .addtohomescreen {
        display: block !important;
        position: absolute;
        border: 0px;
        border-radius: 15px;
        font-weight: bold;
        font-size: 4.5vw;
        margin: 2vw;
        line-height: 160%;
        text-align: center;
        bottom: 5px;
        text-indent: 50px;
        padding: 2vw 5vw;
        background-size: 20px 28px;
        background-position: 10% 5%;
        background-repeat: no-repeat;
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAcCAYAAABh2p9gAAAA7ElEQVRIx2NgGAjAWvWbC4jPAjELxYaxVP7iYa78+Z2x/Nt/IPsD0FBWSlzGDTTsK1PF9x9Aw/4DDf3LUvXrI1CcgxzD2Fkqf35iqvjxman8uwqQDzLQF2j4F6Dh74F8HlIMYwFqego06DcQa0DF/oNooKFhQLnnQP5rksMUqIENif0fmzgl4fmf2kmHeANBSQIXxmYgXvVAghHK2QPETUDciIQP4jDQA4iLoLgQSs+DOwBqYDklXgbpp7aBFTQ3sGLYu7B8YGOZiMxBmpcHwsDB72Wqu5D2Xqa6gZuhZRs6LsAhjo43oxtIFQwA4xh4sAyrR2cAAAAASUVORK5CYII=');
    }
}

@media (max-device-width: 320px) {
    div.menuicon {
        height: 6.5vh;
        width: 6.5vh;
        margin-left: 4px;
        margin-right: 4px;
    }

}


@media (max-device-width: 414px) {
	div.page {
		position: relative;
		top: 0px;
		width: inherit;
		max-width: inherit;
	}
	div#menu {
        max-width: 100vw;
	}

}


/* DEVICEC SPECIFIC */ 

/* iphone 5/SE */
@media only screen and (min-device-width: 320px) 
    and (max-device-height: 568px) 
    and (-webkit-device-pixel-ratio: 2) { 
    div.menuicon[data-badgenumber]:after {
        /* font-family: 'iphone 5/SE'; */
        content:attr(data-badgenumber);
        font-size: 3vh;
        top: -0.1vh;
        right: -3.5vh;
    }
}


/* S5 */
@media only screen and (min-device-width : 360px) 
    and (max-device-width : 640px) 
    and (-webkit-device-pixel-ratio : 3) 
    and (orientation : portrait)  {
    div.menuicon[data-badgenumber]:after {
        /* font-family: 'Galaxy S5'; */

        content:attr(data-badgenumber);
        font-size: 3vh;
        top: -0.1vh;
        right: -3.5vh;
    }
}
@media only screen and (min-device-width : 360px) 
    and (max-device-width : 640px) 
    and (-webkit-device-pixel-ratio : 3)  
    and (orientation : landscape)  {
    div.menuicon[data-badgenumber]:after {
        /* font-family: 'Galaxy S5'; */
        content:attr(data-badgenumber);
        font-size: 4.2vh;
        top: -1vh;
        right: -4.5vh;
        width: 5.5vh;
        height: 5.5vh;
        line-height:5.5vh;
    }
}

/* iphone 6,7,8 */
@media only screen and (min-device-width : 375px) 
    and (max-device-width : 667px) 
    and (-webkit-device-pixel-ratio : 2)  
    and (orientation : portrait)  {
    div.menuicon[data-badgenumber]:after {
        /* font-family: 'iphone 6/7/8'; */
        content:attr(data-badgenumber);
        font-size: 3vh;
        top: -0.1vh;
        right: -3.5vh;
    }
}
@media only screen and (min-device-width : 375px) 
    and (max-device-width : 667px) 
    and (-webkit-device-pixel-ratio : 2)  
    and (orientation : landscape)  {
    div.menuicon[data-badgenumber]:after {
        /* font-family: 'iphone 6/7/8'; */
        content:attr(data-badgenumber);
        font-size: 4.2vh;
        top: -1vh;
        right: -4.5vh;
        width: 5.5vh;
        height: 5.5vh;
        line-height:5.5vh;
    }
}


/* iphone x / xs / 11pro / 6+,7+,8+*/
@media only screen and (min-device-width : 375px) 
    and (max-device-width : 812px) 
    and (-webkit-device-pixel-ratio : 3) 
    and (orientation : portrait) { 
    div.menuicon[data-badgenumber]:after {
        /* font-family: 'iphone X XS 11pro'; */
        content:attr(data-badgenumber);
        font-size: 3.2vh;
        top: -0.4vh;
        right: -2.4vh;
    }
}
@media only screen and (min-device-width : 375px) 
    and (max-device-width : 812px) 
    and (-webkit-device-pixel-ratio : 3)
    and (orientation : landscape) { 
    div.menuicon[data-badgenumber]:after {
        /* font-family: 'iphone X XS 11pro'; */
        content:attr(data-badgenumber);
        font-size: 4.2vh;
        top: -0.6vh;
        right: -4.5vh;
        width: 5.5vh;
        height: 5.5vh;
        line-height:5.5vh;
    }
    label.button span {
        
    }
}



/* iphone xr/11 */
@media only screen and (min-device-width : 414px) 
    and (max-device-height : 896px) 
    and (-webkit-device-pixel-ratio : 2) 
    and (orientation : portrait) { 
    div.menuicon[data-badgenumber]:after {
        /* font-family: 'iphone XR/11'; */
        content:attr(data-badgenumber);
        font-size: 3vh;
        top: -0.4vh;
        right: -2.4vh;
    }
}

@media only screen and (min-device-width : 414px) 
    and (max-device-height : 896px) 
    and (-webkit-device-pixel-ratio : 2) 
    and (orientation : landscape) { 
    div.menuicon[data-badgenumber]:after {
        /* font-family: 'iphone XR/11'; */
        content:attr(data-badgenumber);
        font-size: 4.2vh;
        top: -0.6vh;
        right: -4.5vh;
        width: 5.5vh;
        height: 5.5vh;
        line-height:5.5vh;
    }
}


@media screen and (min-device-width:1024px) and (orientation:landscape) {
    label {
        width: 38vw;
        float: left;
        font-size: 3vh;
    }
    label.thisdevice {
        border: 4px solid red;
        width: calc(38vw - 8px);
    }
    label.centered{
        width: 88vw !important;
        font-size: 5vh !important;
    }
    
    label.error,label.vorgang,label.auftrag {
        width: 88vw !important;
        padding-left: 5vw !important;
    }
    label.button span {
        min-height: 9vh;
        background-size: 8vh;
    }    
    label > span > input {
        width: 100%;
    }
    
    label.search {
        width: 88vw;
    }
    div.menuicon {
        /* background-size: 7.5vh 7.5vh; */
    }
    
}


/* ipad */
@media only screen and (min-device-width : 768px) 
    and (max-device-width : 1024px) 
    and (-webkit-device-pixel-ratio : 2)  
    and (orientation : portrait)  {
    div.menuicon[data-badgenumber]:after {
        /* font-family: 'ipad'; */
        content:attr(data-badgenumber);
        font-size: 3vh;
        top: -0.1vh;
        right: -3.5vh;
    }
    label.button span {
            background-size: 7vh;
    }
    
}
@media only screen and (min-device-width : 768px) 
    and (max-device-width : 1024px) 
    and (-webkit-device-pixel-ratio : 2)  
    and (orientation : landscape)  {
    div.menuicon[data-badgenumber]:after {
        /* font-family: 'ipad'; */
        content:attr(data-badgenumber);
        font-size: 4.2vh;
        top: -0.6vh;
        right: -4.3vh;
        width: 5.5vh;
        height: 5.5vh;
        line-height:5.5vh;
    }
}


/* ipad pro */
@media only screen and (min-device-width : 1024px) 
    and (max-device-width : 1366px) 
    and (-webkit-device-pixel-ratio : 2)  
    and (orientation : portrait)  {
    div.menuicon[data-badgenumber]:after {
        /* font-family: 'ipad pro'; */
        content:attr(data-badgenumber);
        font-size: 2.4vh;
        top: -0.1vh;
        right: -3.5vh;
    }
}
@media only screen and (min-device-width : 1024px) 
    and (max-device-width : 1366px) 
    and (-webkit-device-pixel-ratio : 2)  
    and (orientation : landscape)  {
    div.menuicon[data-badgenumber]:after {
        /* font-family: 'ipad pro'; */
        content:attr(data-badgenumber);
        font-size: 4.2vh;
        top: -0.4vh;
        right: -4.3vh;
        width: 5.5vh;
        height: 5.5vh;
        line-height:5.5vh;
    }
}


@media (min-device-width: 1367px) {
    div.menuicon[data-badgenumber]:after {
        font-size: 4.2vh;
        top: -0.4vh;
        right: -4.3vh;
        width: 5.5vh;
        height: 5.5vh;
        line-height:5.5vh;
    }
}

@media screen and (min-device-width:1460px) {
    label.button span {
        background-size: 7vh;
    }

    div.menuicon[data-badgenumber]:after {
        top: -0.4vh;
    }
}
@media screen and (min-device-width:1920px) {
    div.menuicon[data-badgenumber]:after {
        top: -2.4vh;
    }
}