/*
--------------------------------------------------------------------------------
  Start Stylesheet: elida_common/css/fonts.css
--------------------------------------------------------------------------------
*/

@font-face {
    font-display: swap;
    font-family: "BMWGroupTNCondensedPro";
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/BMWGroupTNCondensedPro-Bold.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: "BMWGroupTNCondensedPro";
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/BMWGroupTNCondensedPro-Light.woff2') format('woff2');
}

@font-face {
  font-family: 'BMWGroupTN';
  font-style: normal;
  font-weight: normal;
  src: url('../fonts/BMWGroupTNPro-Regular.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: "BMWGroupTN";
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/BMWGroupTNPro-Medium.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: "BMWGroupTN";
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/BMWGroupTNPro-Bold.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: "BMWGroupTN";
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/BMWGroupTNPro-Light.woff2') format('woff2');
}

/*
--------------------------------------------------------------------------------
  End Stylesheet: elida_common/css/fonts.css
--------------------------------------------------------------------------------
*/



/*
--------------------------------------------------------------------------------
  Start Stylesheet: css/app.css
--------------------------------------------------------------------------------
*/




body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;font-family: BMWGroupTNCondensedPro, Arial, Helvetica, sans-serif;color: #000000;font-size: 13px;}

option, select, button {
	font-family: BMWGroupTNCondensedPro, Arial, Helvetica, sans-serif;
}

body { 
	font-size: 13px; /*_F5_*/
}


strong, b, .bold {
	font-family: BMWGroupTNCondensedPro, Arial, Helvetica;
	font-weight: bold;
}

ul{
    list-style: disc;
}

ol {
    list-style: decimal;
}


.green {
	background-color:green;
}
.red {
	background-color:red;
}
.blue {
	background-color:blue;
}

html {
    height: 100%;
    position: fixed;
}

body {
    -webkit-touch-callout: none;
    -webkit-text-size-adjust: none;
    -webkit-user-select: none;
    -ms-content-zooming: none;
    -ms-user-select: none;
    overflow: hidden;
    width: 100%;
    height: 100%;
    position: relative;
}


div.prevlandscape {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
    width: 100.0vw;
    height: 100%;
	background: #FFFFFF url(../img/iPhone_landscape.png) no-repeat center;
	background-size: 50%;
	display: none;
}

@media screen and (orientation: landscape) { 
	div.prevlandscape {
		display: block;
		z-index: 100;
	}
}

.user {
	position: fixed;
	top: 12px;
	right: 70px;
	width: 160px;
	text-align: end;
}

.user>div {
	text-overflow: ellipsis;
	white-space: nowrap; 
    overflow: hidden;
}

.user div,
.user span{
	font-size: 11px;
}

.language {
	height: 18px; 
	width:20px;
	position: fixed;
	top: 18px;
	right: 40px;
}
.language span {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
}

.language:before {
	height: 20px; 
	content: " ";
	border-left: 1px solid #eeefea;
	display: block;
	width: 1px;
	position: fixed;
	top: 15px;
	right: 63px;
}

.menutoggle {
	height: 20px; 
	width:30px;
	background: url(../img/nav_menu.png) no-repeat center;
	background-size: 20px;
	position: fixed;
	top: 15px;
	right: 5px;
}
.menutoggle.open {
	background: url(../img/nav_menu_close.png) no-repeat center;
	background-size: 20px;
}

.menutoggle:before {
	height: 20px; 
	content: " ";
	border-left: 1px solid #eeefea;
	display: block;
	width: 1px;
	position: fixed;
	top: 15px;
	right: 33px;
}

#header {
    background: url(../img/bmw_group_logo.svg) no-repeat left center;
	/*background: url(../img/bmw_group_logo-retina.png) no-repeat left center;*/
	background-position: 10px 15px;
	background-size: 200px;
	height: 90px; /*_HH_*/
    width: 100vw;
    position: fixed;
    /*z-index: 850;*/
    left: 0;
    top: 0;
}

body.no_header #header {
	display:none;
}


#header:after {
    content: " ";
    display: block;
    height: 2px;
    background-color: #eeefea;
    min-width: 60vw;
    margin: 82px 10px 0 10px;
}

#header-title {
	font-family: BMWGroupTNCondensedPro, Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 24px; /*_F1_*/
	left: 10px;
	position: fixed;
	top: 45px;
}

a.headerlink {
	color: #000000;
    text-decoration: none;
}

.headlines {
	height: 30px;
    padding-top: 8px;
	position:relative;
}
.headlines:after {
    content: " ";
    display: block;
    height: 2px;
    background-color: #eeefea;
    min-width: 60vw;
    margin: 28px 10px 0 10px;
}


.headlines div.appheadline {
	position:absolute;
	font-family: BMWGroupTNCondensedPro, Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 20px; /*_F7_*/
	margin-left: 10px;
	width: calc(100vw - 20px);
	/*text-align: center;*/
}

.menuContainer .headlines div.appheadline {
	width: 80.0vw; /*_WMENU_*/
}


.buttonheadline {
	height: 38px;
    margin: 2px 0px 0px 0px;
	padding-top: 10px;
	position:relative;
}
.buttonheadline:after {
    content: " ";
    display: block;
    height: 2px;
    background-color: #eeefea;
    min-width: 60.53333333333333vw;
    margin: 38px 10px 0px 10px;
}

.iconbutton {
	position: absolute;
	height: 30px; 
	width: 30px;
	
}

.iconbutton.goback {
	left: 13px;
	background: url(../img/icon_nav_left.png) no-repeat center;
	background-size:30px;
}
.iconbutton.plus {
	right: 8px;
	background: url(../img/icon_circle_plus.png) no-repeat center;
	background-size:30px;
}
.iconbutton.minus {
	right: 58px;
	background: url(../img/icon_circle_minus.png) no-repeat center;
	background-size:30px;
}
.iconbutton.print {
	right: 108px;
	background: url(../img/print.png) no-repeat center;
	background-size:30px;
}


div#contentarea {
	position: absolute;
	left: 0px;
	bottom: 0px;
	top: 0px;
	width: 100.0vw; /*_WFULL_*/
	overflow: hidden;
	pointer-events:none;
}

div#contentarea>div,
div#contentarea>div div.subpage {
    position:absolute;
	display: flex;
	bottom: 0px;
	left:-1px;
	border-left: 1px solid #666666;
	border-right: 1px solid #666666;
	width: 100.0vw; /*_WFULL_*/
	flex-direction: column;
	pointer-events:auto;
	background-color:#FFFFFF;
	overflow:hidden;
	padding-bottom: 40px;
}

.no_footer div#contentarea>div div.subpage {
	padding-bottom: 0px;
}

div.footer {
	position:absolute;
	bottom: 0px;
	color: #666666;
	padding: 4px 10px;
	font-size: 11px;
	line-height: 14px;
}

.no_footer div.footer {
	display: none;
}

div#contentarea>div {
	top: 91px; /*_HH_*/ /* +1px? */
	padding-top:5px;
	/* aktiviert Hardwareaccelaration!! Dadurch funktioniert scrolling touch stabiler!! SCHEISSZEUG!! */
	-webkit-transform: translateZ(0px);
}


body.no_header div#contentarea>div {
	top: 0px;
}

div#contentarea>div div.subpage {
	top: 0px;
}
div#contentarea div.content {
    flex: 1;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
	height: 0px;
}

div.buttons>div {
	padding: 18px 10px; 
}


.buttons>div ~ div {
	margin-top: -28px;
}

button.button {
	width: calc(100vw - 20px); 
	height: 54px; /*_HBUTT_*/
	border: 0px solid black;
	white-space: nowrap;
	overflow: hidden;
	font-size: 17px; /*_F4_*/
	color: #FFFFFF; /*_CF_*/
	background-color: #92A2BD;
	
}



.listgroupheader:before {
    content: " ";
    display: block;
    height: 2px;
    background-color: #eeefea;
    margin-top: 4px;
    margin-bottom: 8px;
}

.listgroupheader {
	background-color: #FFFFFF;
	padding-top: 20px;
	margin-left: 10px;
	margin-right: 10px;
	position: -webkit-sticky;
	position: sticky;
	top: 0;
}
.listgroupheaderitem {
	background-color: #FFFFFF;
	font-family: BMWGroupTNCondensedPro, Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 15px; 
    padding-bottom: 5px;
}






.infooutput {
	margin-left: 10px;
	margin-right: 10px;
	margin-top:8px;
    background-color: #FFFFFF;
}

.newsitem {
	margin-left: 10px;
	margin-right: 10px;
	margin-top:8px;
    background-color: #FFFFFF;
}
/*Nicht der erste */
.newsitem  ~ .newsitem {
    margin-top:4px;
}

.listitem {
	margin-left: 10px;
	margin-right: 10px;
	margin-top:8px;
    background-color: #FFFFFF;
}

.listitem:after {
    content: " ";
    display: block;
    height: 1px;
    background-color: #eeefea;
    margin-top: 4px;
}
.listitem.first:before {
    content: " ";
    display: block;
    height: 1px;
    background-color: #eeefea;
    margin-bottom: 4px;
}

.listitem.withbutton {
	background-image: url(../img/icon_triangle.png);
	background-repeat: no-repeat;
	background-position: calc(100% - 5px) center;
	background-size: 15px;
}





/*Nicht der erste */
.listitem  ~ .listitem {
    margin-top:4px;
}


/*Statt defaults --> :not()!*/
.listitem>div:not(.multirow) {
	text-overflow: ellipsis;
	white-space: nowrap; 
    overflow: hidden;
}
.listitem.withbutton>div {
	width: calc(100vw - 60px);
}


.detailheader:before {
    content: " ";
    display: block;
    height: 2px;
    background-color: #eeefea;
    margin-top: 4px;
    margin-bottom: 8px;
}

.detailheader {
	padding-top: 25px;
	background-color: #FFFFFF;
	padding-left: 10px;
	padding-right: 10px;
	/*position: sticky;
	position: -webkit-sticky;
	top: 0;*/
}


.detailheaderitem {
	background-color: #FFFFFF;
	font-family: BMWGroupTNCondensedPro, Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 15px; 
    padding-top: 5px;
	padding-bottom: 5px;
}

.detailheaderitemwrap {
	background-color: #FFFFFF;
	font-family: BMWGroupTNCondensedPro, Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 15px; 
}


.detailitemwrapper {
	margin-bottom: 2px;
	padding: 3px 10px 3px 10px;
}
.detailitemwrapper ~ .detailitemwrapper {
	margin-top: 2px;
}


.appmenuseparater {
	background-color: #FFFFFF;
	padding-top: 28px;
	padding-left: 10px;
	padding-bottom: 5px;
}
.appmenuheaderitemsmall {
	font-family: BMWGroupTNCondensedPro, Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 13px; /*_F6_*/ 
    padding-bottom: 5px;
}

.appmenuitemwrapper {
	margin-bottom: 1px;
	padding: 5px 5px 5px 10px;
}
.appmenuitemwrapper ~ .appmenuitemwrapper {
	margin-top: 1px;
}

.appmenuseparater:after {
    content: " ";
    display: block;
    height: 2px;
    background-color: #eeefea;
    margin-top: 4px;
	margin-right: 10px;
}


.appmenuitemwrapper:after {
    content: " ";
    display: block;
    height: 2px;
    background-color: #eeefea;
    margin-top: 4px;
	margin-right: 5px;
}

a.menu-link {
	display:block;
	font-family: BMWGroupTNCondensedPro, Arial, Helvetica, sans-serif;
    color: #000000;
    font-size: 13px;
	text-decoration: none;
	height: 18px;
}

div.menu-div {
	font-family: BMWGroupTNCondensedPro, Arial, Helvetica, sans-serif;
    color: #000000;
    font-size: 13px;
	height: 18px;
}

/*
	linksbündig zweizeilig
.test_output2 .detailitem {
	overflow: hidden;
	clear:both;
}

.test_output2 .detailitem>.caption {
	min-width: 23.2vw;
	margin-right:0.8vw;
	float:left;
	font-family: BMWGroupTNCondensedPro, Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 13px;
}
.test_output2 .detailitem>.field {
	min-width: 58.666666666666664vw;
	max-width: 58.666666666666664vw;
	float:right;
	text-align: left;
	padding-right: 8.0vw;
	font-family: BMWGroupTNCondensedPro, Arial, Helvetica, sans-serif;
	font-size: 13px;
}
*/
/*
	linksbündig zwei arten
*/

.detailitem {
	display: flex;
	flex-direction: row;
}

/*passen die breiten?*/
.detailitem>.caption {
	width: 125px;
	margin-right:3px;
	font-family: BMWGroupTNCondensedPro, Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 13px;
}
.detailitem>.field {
	width: calc(100vw - 165px);
	max-width: calc(100vw - 165px);
	text-align: left;
	padding-right: 20px;
	font-family: BMWGroupTNCondensedPro, Arial, Helvetica, sans-serif;
	font-size: 13px;
}


.detailitem.fieldonly>.field {
	width: calc(100vw - 25px);
	max-width: calc(100vw - 25px);
}
.detailitem.captiononly>.caption {
	width: calc(100vw - 25px);
	max-width: calc(100vw - 25px);
}
.listitem .redoutput,
.detailitem .field.redoutput,
.detailitem .field .redoutput {
	color: #FE6700; /*_CH_*/
}

.detailitem .field.greenoutput,
.detailitem .field .greenoutput {
	color: #959500; /*_CG_*/
}


.detailitem>.field  select {
	width: 49.333333333333336vw;
	font-family: BMWGroupTNCondensedPro, Arial, Helvetica, sans-serif;
	font-size: 13px;
	height: 6.666666666666667vw;
}

.detailitem>.field  input[type=text] {
	width: 49.333333333333336vw;
	height: 6.666666666666667vw;
}

.detailitem>.field  textarea {
	width: 49.333333333333336vw;
}

.detailitem>.field  span.textlink {
	color: -webkit-link;
    cursor: pointer;
    text-decoration: underline;
}


/*.detailitem {
/*	display: flex;
/*	flex-direction: row;
/*	justify-content: space-between;
/*	/*overflow: hidden;
/*	clear:both;*/
/*}
/*
/*.detailitem>.caption {
/*	/*width: 24.0vw;*/
/*	margin-right:0.8vw;
/*	/*float:left;
/*	margin-bottom: 0.6666666666666666vw;
/*	margin-top: 0.6666666666666666vw;*/
/*	font-family: BMWGroupTNCondensedPro, Arial, Helvetica, sans-serif;
/*	font-weight: bold;
/*	font-size: 13px; /*_F6_*/ 
/*}
/*.detailitem>.field {
/*	/*width: 66.66666666666667vw;
/*	max-width: 66.66666666666667vw;*/
/*	/*float:right;
/*	margin-top: 0.6666666666666666vw;
/*	margin-bottom: 0.6666666666666666vw;
/*	*/
/*	text-align: right;
/*	padding-right: 8.0vw;
/*	font-family: BMWGroupTNCondensedPro, Arial, Helvetica, sans-serif;
/*	font-size: 13px; /*_F5_*/
/*}
/**/

div.detailitem.grey {
	background: #989898; /*_CJ_*/
}

div.detailitem.grey>.caption {
	color: #FFFFFF; /*_CF_*/
}
div.detailitem.grey>.field {
	color: #FFFFFF; /*_CF_*/
}

pre {
	white-space: pre-line;
}

.detailitem>.field>div ~ div{
	margin-top:0.4vw;
}

.ellipsisoverflow {
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;  
}

.page.swipeIn {
	 
}

.subpage.ng-leave,
.page.ng-leave        {
	animation:stay;
	animation-duration: 0.4s;
}
.subpage.swipeOut.ng-leave,
.page.swipeOut.ng-leave        {
	animation:slideOutRight;
	animation-duration: 0.4s;
	animation-timing-function: ease-in;   
	z-index: 5;
}
.subpage.swipeIn.ng-enter,
.page.swipeIn.ng-enter 		{  
    animation:slideInRight;
	animation-duration: 0.4s;
	animation-timing-function: ease-in;  
	z-index: 5;
}



@keyframes slideInRight {
	0% 	 { left:100%; }
	100% { left: 0; }
}
@keyframes slideOutRight {
	100% { left:100%; }
}
@keyframes stay {
    0%   { opacity: 1; }
    99%   { opacity: 1; }
    100% { opacity: 0; }
}

.mainModal {
	position: absolute;
	z-index: 8;
	top:0;
	bottom:0;
	left:0;
	width:100.0vw; /*_WFULL_*/
	pointer-events:none;
}
.mainModal>div {
	pointer-events:auto;
}


div.modalMessages {
	z-index: 9;
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	width:100.0vw; /*_WFULL_*/
	display:flex;
	justify-content: flex-end;
	flex-direction: column;
	background:rgba(0,0,0,0.5);
	overflow-y: scroll; /* verhindert, dass das Scrollen an das untere div gegeben wird*/
	-webkit-overflow-scrolling: touch;
	/* aktiviert Hardwareaccelaration!! Dadurch funktioniert scrolling touch stabiler!! SCHEISSZEUG!! */
	-webkit-transform: translateZ(0px);
}

div.modalMessages>div.form {
	margin-top: 40.0vw;
	display:flex;
	flex-direction: column;
	background: #FFF;
}

div.modalMessages>div.form div.content {
	flex: 0;
	flex-basis: auto;
	height: auto;
	min-height: 70vw;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
	/* aktiviert Hardwareaccelaration!! Dadurch funktioniert scrolling touch stabiler!! SCHEISSZEUG!! */
	-webkit-transform: translateZ(0px);
}

div.modalMessages>div.form div.content div.messagewrapper {
	display: flex;
	flex-direction: row;
	padding: 15px;
}

div.modalMessages>div.form div.headline {
	font-family: BMWGroupTNCondensedPro, Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 17px; /*_F3_*/ 
    padding-top: 30px;
	padding-bottom: 5px;
	padding-left: 30px; /*_P1_*/
}

/*
div.modalMessages>div.form div.content div.info {
	background: url(../img/info.png) no-repeat;
	background-position: center;
	background-size: contain;
	height: 6.666666666666667vw;
	width:2.6666666666666665vw;
}

div.modalMessages>div.form div.content div.info.ERROR {
	background: url(../img/info_red.png) no-repeat;
	background-position: center;
	background-size: contain;
}
div.modalMessages>div.form div.content div.info.WARN {
	background: url(../img/info_orange.png) no-repeat;
	background-position: center;
	background-size: contain;
}
*/
div.modalMessages>div.form div.content div.message {
	margin-left:15px;
	flex: 1;
	font-size: 17px; /*_F3_*/
}

div.modalMessages.ng-hide-remove {
	animation-name:slideInBottom, fadeInOpacity;
	animation-duration: 0.6s;
	animation-timing-function: ease-out;  
}

div.modalMessages.ng-hide-add {
	animation-name:slideOutBottom, fadeOutOpacity;
	animation-duration: 0.4s;
	animation-timing-function: ease-in;  
}

div.modalFilter {
	z-index: 1;
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	width:100.0vw; /*_WFULL_*/
	display:flex;
	justify-content: flex-end;
	flex-direction: column;
	overflow-y: scroll; /* verhindert, dass das Scrollen an das untere div gegeben wird*/
	-webkit-overflow-scrolling: touch;
	/* aktiviert Hardwareaccelaration!! Dadurch funktioniert scrolling touch stabiler!! SCHEISSZEUG!! */
	-webkit-transform: translateZ(0px);
}

div.modalForm {
	z-index: 1;
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	width:100.0vw; /*_WFULL_*/
	display:flex;
	justify-content: flex-end;
	flex-direction: column;
	background:rgba(0,0,0,0.5);
	overflow-y: scroll; /* verhindert, dass das Scrollen an das untere div gegeben wird*/
	-webkit-overflow-scrolling: touch;
	/* aktiviert Hardwareaccelaration!! Dadurch funktioniert scrolling touch stabiler!! SCHEISSZEUG!! */
	-webkit-transform: translateZ(0px);
}

div.modalForm>div.form {
	margin-top: 40.0vw;
	display:flex;
	flex-direction: column;
	background: #FFF;
	-webkit-transform: translateZ(0px);
}

div#contentarea div.modalForm>div.form div.content {
	flex: 0;
	flex-basis: auto;
	height: auto;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
	/* aktiviert Hardwareaccelaration!! Dadurch funktioniert scrolling touch stabiler!! SCHEISSZEUG!! */
	-webkit-transform: translateZ(0px);
}

div#contentarea div.modalForm>div.form div.buttons {
	/* aktiviert Hardwareaccelaration!! Dadurch funktioniert scrolling touch stabiler!! SCHEISSZEUG!! */
	-webkit-transform: translateZ(0px);
}

div.modalForm.ng-enter {
	animation-name:slideInBottom, fadeInOpacity;
	animation-duration: 0.4s;
	animation-timing-function: ease-out;  
}

div.modalForm.ng-leave {
	animation-name:slideOutBottom, fadeOutOpacity;
	animation-duration: 0.4s;
	animation-timing-function: ease-in;  
}

div.menuContainer {
	z-index: 6;
	position:absolute;
	top: 90px; /*_HH_*/
	bottom:0;
	left:0;
	width:100.0vw; /*_WFULL_*/
	background:rgba(0,0,0,0.5);
	/* aktiviert Hardwareaccelaration!! Dadurch funktioniert scrolling touch stabiler!! SCHEISSZEUG!! */
	-webkit-transform: translateZ(0px);
}
/*TODO: no_header?*/

div.menuContainer>div.menuContent {
	
	position:absolute;
	top:0;
	bottom:0;
	right:0;
	width: 80.0vw; /*_WMENU_*/
	display:flex;
	flex-direction: column;
	background: #FFF;
}

div.menuContent>div.content {
	flex: 0;
	flex-basis: auto;
	height: auto;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;	
}

div.menuContainer.ng-enter {
	animation-name:slideInFromRight, fadeInOpacity;
	animation-duration: 0.4s;
	animation-timing-function: ease-in;  
}

div.menuContainer.ng-leave {
	animation-name:slideOutToRight, fadeOutOpacity;
	animation-duration: 0.4s;
	animation-timing-function: ease-in;  
}

@keyframes slideInFromRight {
	0% 	 { transform: translateX(100%); }
	66%   { transform: translateX(0); }
	100% { transform: translateX(0); }
}

@keyframes slideOutToRight {
	0% 	 { transform: translateX(0); }
	5%	 { transform: translateX(0); }
	100% { transform: translateX(100%); }
}


@keyframes slideInLeft {
	0% 	 { transform: translateX(-100%); }
	66%   { transform: translateX(0); }
	100% { transform: translateX(0); }
}

@keyframes slideOutLeft {
	0% 	 { transform: translateX(0); }
	5%	 { transform: translateX(0); }
	100% { transform: translateX(-100%); }
}

@keyframes slideInBottom {
	0% 	 { transform: translateY(100%); }
	66%   { transform: translateY(0); }
	100% { transform: translateY(0); }
}

@keyframes fadeInOpacity {
	0%   { background:rgba(0,0,0,0); }
	66%   { background:rgba(0,0,0,0); }
	100% { background:rgba(0,0,0,0.5); }
}

@keyframes slideOutBottom {
	0% 	 { transform: translateY(0); }
	5%	 { transform: translateY(0); }
	100% { transform: translateY(100%); }
}

@keyframes fadeOutOpacity {
	0% { background:rgba(0,0,0,0.5); }
	5%   { background:rgba(0,0,0,0); }
	100% { background:rgba(0,0,0,0); }
}


.inputitemwrapper {
	margin-bottom: 1px;
	padding: 3px;
	padding-left: 10px; 
	padding-right: 10px;
}
.inputitemwrapper ~ .inputitemwrapper {
	margin-top: 1px;
}


.inputitem {
	display: flex;
	flex-direction: row;
}

.inputitem>.caption {
	width: calc(100vw - 250px);
	font-family: BMWGroupTNCondensedPro, Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 13px;
	padding-top: 8px;
}
.inputitem>.field {
	width: 230px;
	max-width: 230px;
	text-align: left;
	padding-top: 1px;
	font-family: BMWGroupTNCondensedPro, Arial, Helvetica, sans-serif;
	font-size: 13px;
}

.inputitem>.field input {
	width: 230px;
	font-size: 13px;	
	font-family: BMWGroupTNCondensedPro, Arial, Helvetica, sans-serif;
	height: 25px;
}

.inputitem>.field input[type=date] {
	-webkit-border-radius:0px;
	border-radius: 0;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	width: 200px;
	font-size: 13px;	
	font-family: BMWGroupTNCondensedPro, Arial, Helvetica, sans-serif;
	height: 25px;
	border:none;
	background-color: white;
	background-image: 
		url(../img/bg_date_input.png),
		linear-gradient(#ffffff, #ffffff),
		linear-gradient(#f6f6f6, #f6f6f6),
		linear-gradient(#8f8f8f, #8f8f8f);
    background-position: 
		100% 0px,
		100% 0px,
		0px 0px,
		0px 24px;
    background-size: 
		auto 75px,
		24px 75px,
		100% 24px,
		100% 1px;
    background-repeat: no-repeat;
    padding-right: 30px;
	outline: none;
}
.inputitem>.field input[type=date]::-webkit-inner-spin-button,
.inputitem>.field input[type=date]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

.inputitem>.field input[type=date]:focus,
.inputitem>.field input[type=date]:active {
	background-image: 
		url(../img/bg_date_input.png),
		linear-gradient(#ffffff, #ffffff),
		linear-gradient(#f6f6f6, #f6f6f6),
		linear-gradient(#92a2bd, #92a2bd);
    background-position: 
		100% -50px,
		100% 0px,
		0px 0px,
		0px 24px;
}
.inputitem>.field input.ngvalidation.ng-dirty.ng-invalid[type="date"], 
.inputitem>.field input.ngvalidation.validate-pristine.ng-invalid[type="date"], 
.inputitem>.field input.ngvalidation.custom-invalid[type="date"] {
	background-image: 
		url(../img/bg_date_input.png),
		linear-gradient(#ffffff, #ffffff),
		linear-gradient(#f6f6f6, #f6f6f6),
		linear-gradient(#cc3333, #cc3333);
    background-position: 
		100% -25px,
		100% 0px,
		0px 0px,
		0px 24px;
}



.inputitem>.field select {
	-webkit-border-radius:0px;
	border-radius: 0;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	width: 230px;
	font-size: 13px;	
	font-family: BMWGroupTNCondensedPro, Arial, Helvetica, sans-serif;
	height: 25px;
	border:none;
	background-color: white;
	background-image: 
		url(../img/bg_select_arrow.png),
		linear-gradient(#f6f6f6, #f6f6f6),
		linear-gradient(#8f8f8f, #8f8f8f);
    background-position: 
		100% 0px,
		0px 0px,
		0px 24px;
    background-size: 
		auto 75px,
		100% 24px,
		100% 1px;
    background-repeat: no-repeat;
    padding-right: 30px;
	outline: none;
}

.inputitem>.field select:focus,
.inputitem>.field select:active {
	background-image: 
		url(../img/bg_select_arrow.png),
		linear-gradient(#f6f6f6, #f6f6f6),
		linear-gradient(#92a2bd, #92a2bd);
    background-position: 
		100% -50px,
		0px 0px,
		0px 24px;
}
.inputitem>.field select.ngvalidation.ng-dirty.ng-invalid,
.inputitem>.field select.ngvalidation.validate-pristine.ng-invalid, 
.inputitem>.field select.ngvalidation.custom-invalid {
	background-image: 
		url(../img/bg_select_arrow.png),
		linear-gradient(#f6f6f6, #f6f6f6),
		linear-gradient(#cc3333, #cc3333);
    background-position: 
		100% -25px,
		0px 0px,
		0px 24px;
}

body[class*=" modal-is-active-"],
body[class^="modal-is-active-"] {
overflow:hidden;
}

div.modal-communication div.modal-overlay {
/*z-index:1004;*/
position:absolute;
top:0;
bottom:0;
left:0;
width:100%;
background:#000;
opacity:0;
filter:  alpha(opacity=0);
}


div.modal-communication  div.modal-content-container{
/*z-index:1005;*/
position:absolute;
top:0;
bottom:0;
left:0;
width:100%;
text-align: center;
overflow: auto;
}

div.modal-communication  div.modal-content-table {
width:100%;
height:100%;
display:table;
/*border: 0.4vw solid white;*/
}


div.modal-communication  div.modal-content-cell {
display:table-cell;
vertical-align:middle;
/*border: 0.4vw solid pink;*/
}


div.modal-communication  span.modal-content-wrapper {
margin-left:auto;
margin-right:auto;
/*border: 0.4vw solid red;*/
}

div.modal-communication div.modal-content {
padding: 5px;
margin-top:40px;
margin-bottom:40px;
background:#FFF;
border: 1px solid black;
text-align:left;
display:inline-block;
}

/*hide during animation //--> funktioniert so leider nicht im IE, bleibt aus irgendeinem Grund bis zu einem digest, Klick, etc hidden :( --> wieder im JS
div.modalfade-animation.ng-animate + div div.modal-content.show-after-anim
{
	display:none;
}
*/

div.loading-spinner-container div.loading-spinner-table {
	display:table;
}
div.loading-spinner-container  div.loading-spinner-table>div {
	display:table-cell;
}

div.loading-spinner-container div.loading-spinner {
	width: 20px;
	height: 20px;
	background: transparent url(../img/loader.gif) no-repeat center;
	background-size: 15px;
}

div.loading-spinner-container div{
	font-family: BMWGroupTNCondensedPro, Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 13px; /*_F6_*/ 
}


input.textbox, textarea {
    background: url(../img/form_input_bg_shadow.png) no-repeat;
    border: 1px solid #999;
    padding: 1px 2px;
	font-family: BMWGroupTNCondensedPro, Arial, Helvetica, sans-serif;
	font-size: 13px; /*_F5_*/
}


div.feError {
    color: #c00;
    font-family: BMWGroupTNCondensedPro, Arial, Helvetica, sans-serif;
	font-size: 13px; /*_F5_*/
}

input.ngvalidation.ng-dirty.ng-invalid, 
textarea.ngvalidation.ng-dirty.ng-invalid, 
select.ngvalidation.ng-dirty.ng-invalid, 
input.ngvalidation.validate-pristine.ng-invalid, 
textarea.ngvalidation.validate-pristine.ng-invalid, 
select.ngvalidation.validate-pristine.ng-invalid, 
input.ngvalidation.custom-invalid, 
textarea.ngvalidation.custom-invalid, 
select.ngvalidation.custom-invalid, 
div.ngvalidation.custom-invalid {
    border-color: #C33 !important;
}

/*Filterinputs*/

div.filterform {
	display: flex;
    flex-direction: row;
}

div.filterinputs {
	width:calc(100vw - 155px);
}

.filterinputwrapper .inputitem .caption {
	width: calc(100vw - 295px);
}
.filterinputwrapper .inputitem .field {
	width: 120px;
}
.filterinputwrapper .inputitem .field input[type="date"] {
	width: 90px;
}

.filterinputwrapper {
	margin-bottom: 1px;
	padding: 3px 5px 3px 10px;
}
.filterinputwrapper ~ .filterinputwrapper {
	margin-top: 1px;
}
.filterbutton {
	width: 155px;
}
.filterbutton button.button {
	width: 135px;
    margin-top: 5px;
	margin-left:10px;
	margin-bottom: 4px;
}


.inputs.filterregister .inputitem .caption {
    width: calc(100vw - 295px);
}
.inputs.filterregister .inputitem>.field {
    width: 275px;
	max-width: 275px;
}
.inputs.filterregister .inputitem>.field select {
    width: 275px;
}


/*PDF*/

div.pdfcanvaswrapper {
	flex:1;
	display: flex;
	flex-direction: column;
    background: #eeefea;
    margin: 15px 10px;
    /*padding: 0.5333333333333333vw;*/
	border: 2px solid #eeefea;
	overflow: hidden;
}

div.pdfcanvas_paddingfix canvas {
	 margin-left: 2px;
}

div.pdfcanvas_paddingfix {
	flex:1;
	overflow: auto;
	-webkit-overflow-scrolling: touch;	
    margin-left: -2px;
}



#logout_error_section.hidden,
#logout_success_section.hidden {
	display:none !important;
}


/*
--------------------------------------------------------------------------------
  End Stylesheet: css/app.css
--------------------------------------------------------------------------------
*/