.ios .button {
    border: 1px solid #007aff;
    border-radius: 5px;
    line-height: 26px;
}	
.ios .button.button-round, .ios .button.button-round-ios {
    border-radius: 29px;
}
.ios .button.button-big {
    font-size: 17px;
    height: 44px;
    line-height: 42px;
}

.page {
	
	i.fa.fa span.badge.badge.badge {
		line-height: 16px;
	    height: 16px;
	    border-radius: 16px;
	    padding: 0 4px;
	    font-family: -apple-system SF UI Text,Helvetica Neue,Helvetica,Arial,sans-serif;
	    font-size: 10px;
	    position: absolute;
	    margin-left: -10px;
	    top: 2px;
	}

	.veldapps-copyright-since {
		color: rgb(77, 87, 109); 
		text-shadow: rgb(250, 250, 250) 0px 2px 0px; 
		text-align: center; 
		font-size: 14px; 
		font-weight: bold;	
	}
	.bg-color-teal { background-color: teal; }
	
	.flex1 { flex: 1; } .flex2 { flex: 2; } .flex3 { flex: 3; } .flex4 { flex: 4; }
	.flex5 { flex: 5; } .flex6 { flex: 6; } .flex7 { flex: 7; } .flex8 { flex: 8; }
	.flex9 { flex: 9; } .flex10 { flex: 10; } .flex11 { flex:11; } .flex12 { flex: 12; }
	
	.flip-horizontal { transform: scaleX(-1); }
	
	.bold { font-weight:  bold; }
	.bold100 { font-weight: 100; } .bold200 { font-weight: 200; }
	.bold300 { font-weight: 300; } .bold400 { font-weight: 400; }
	.bold500 { font-weight: 500; } .bold600 { font-weight: 600; }
	.bold700 { font-weight: 700; } .bold800 { font-weight: 800; }
	.bold-100 { font-weight: 100; } .bold-200 { font-weight: 200; }
	.bold-300 { font-weight: 300; } .bold-400 { font-weight: 400; }
	.bold-500 { font-weight: 500; } .bold-600 { font-weight: 600; }
	.bold-700 { font-weight: 700; } .bold-800 { font-weight: 800; }
	
	.full-width { width: 100%; }
	.dowrap, .lines-wrap { white-space: pre-line; }
	.nowrap { white-space: nowrap; }	
	.ta-right { text-align: right; }	
	.ta-center { text-align: center; }	
	.color-black { color: black; }
	.item-title.bold { font-weight: 600; }
	.display-none, .invisible { display: none; }
	.display-flex, { display: flex; }
	.opaque { visibility: hidden; }

	.toolbar .toolbar-inner {
		font-size: 28px;
		a.link.selected { 
			color: white; 
			background-color: #007aff;
		}
	}
	
	&:not(.loading) .hide-when-page-not-loading {
		display: none;
	}
	&.loading .hide-when-page-loading {
		display: none;
	}
	
	.list .item-subtitle.smaller { font-size:10pt; }
	.list.bro .item-text { max-height: none; }

	&:not(.map) .page-content {
		max-width: 600px;
		margin-left: auto; margin-right: auto;
	}

	.page-content {
		.center { text-align: center; }
		.center.title { padding-left: 15px; padding-right: 15px; }
		.title { font-size: 32pt; font-weight: 600;}
		.title.smaller { font-size: 24pt; }
		.title.chip.chip-label { height:auto;line-height:normal;color:black;
			border-radius:30px; padding: 6px 12px; }

		.subtitle.chip.chip-label { height:auto;line-height:normal;color:black;
			border-radius:25px; padding: 4px 8px; }
			
		.subtitle { font-size: 20pt; }
		.subtitle-smaller { font-size: 17pt; }
		
		.title-block {
			margin-left:auto;
			margin-right:auto;
			width: 90%;
			text-align: center;
		}
		.button-block {
			padding-top:16px;
			margin-left:auto;
			margin-right:auto;
			width: 340px;
			display:flex;
			a {
				margin-right:8px;
				margin-left:8px;
			}
			.button-forward {
				padding-right:12px;
				padding-left-:0;
				font-size:12pt;
				i.icon-forward { 
					/*- todo function for transform and use again in button-next */
					transform: scale3d(0.7,0.7,1) translate3d(-2px,-2px,0); 
					position:absolute;right:10px;top:13px; 
				}
			}
			.button-back {
				padding-left:12px;
				padding-right-:0;
				font-size:12pt;
				i.icon-back { 
					/*- todo function for transform and use again in button-next */
					transform: scale3d(0.7,0.7,1) translate3d(-2px,-2px,0); 
					position:absolute;left:12px;top:13px; 
				}
			}
			.button-new.button-new.button-new {
				text-align:center;
				font-size:9.5pt;
				padding-top:8px;
				font-weight: 500;
				i.fa-plus {left:0;position:absolute;width:100%;}
			}
		}
	
		.list {
			span.opmerking > .value { 
				color: orange;
				&.is-dirty {
					border-bottom: 2px solid rgba(0, 123, 255, 0.75);
				}
			}
			.is-dirty { 
				color: rgb(0, 123, 255); 
			}
			
			&.summary_, .summary_ {
				.is-dirty { 
					color: inherit;
					border-bottom: 2px solid rgba(0, 123, 255, 0.75); 
					background-color: rgba(0, 123, 255, 0.125);
					padding: 0px 2px;
					border-radius: 5px;
				}
			}

			&.list-input-elements {
				
				.item-content .item-after { 
					font-size: 12pt; 
					color: #333;
				}
				.item-inner {
					.item-title { 
						flex-shrink: 0; font-size: 13px; 
						text-transform: lowercase; 
					}
					.item-after {
						font-weight: bold; font-size: 14px;
						text-overflow: ellipsis; flex-shrink: 1;
						display: block; overflow: hidden;
						color: black;
						&.is-dirty { 
							color: rgb(0, 123, 255); 
						}
					}
				}
				.item-inner.reverse-styles {
					.item-title { flex-shrink: 0; font-weight: normal; }
					.item-after {
						text-overflow: ellipsis; flex-shrink: 1;
						display:block; overflow:hidden;
						font-size: 15px; color:black;
						font-weight: 600;
					}
				}
			}
			&.item-title-full-width .item-title {
				width: auto;
			}
			
			&.item-after-shrink .item-inner {
				.item-title {
					flex-shrink: 0;
				}
				.item-after {
					flex-shrink: 1;
					display:block;
					overflow:hidden;
					text-overflow:ellipsis;
				}
			}
			&.item-title-full-width .item-title {
				width: auto;
			}

			.item-inner.left-padded {
				padding-left: 8px;
			}
			
			.item-content .item-inner.active-state {
				background-color: #d9d9d9;
			}
			.item-footer.required {
				font-weight: bold;
				color: red;
			}
			.item-inner .changed { 
				color: #007aff; 
				font-weight: bold;
			}
		}
	
		.menu-icon {
			padding: 4px 2px; border-radius: 6px;
			border:1px solid transparent;
			box-sizing: content-box;
			padding-top: 5px;
			font-size: 18px;
			
			&.opaque { 
				background: transparent; color: transparent; 
				visibility: hidden; display: inline-block; 
			}
		} 
		.item-title.label.icon-only { font-size: 20pt; text-align: center; }
		
	}
}
.page.va-menu .button-block .button.new {
	text-transform: lowercase;
}

.swipe-handle {
	position:absolute;
	width: 50px;
	top:60%; height:20%; 

	&.left { left:0px; }
	&.right { right:0px; .inner { opacity: 0; }}
	
	z-index:6000;
	
	.inner {
		position: absolute;
		border-radius: 65px;
		left:10px; right:10px;
		top:20px; bottom:0;
	}

	&.border {
		.inner {
			border: 1.5px solid rgba(210, 210, 210, 0.25);
		}
	}
	&.black .inner {
		background-color: black;
	}
	&.blur .inner {
		background-color: rgba(255, 255, 255, 0.25);
		-webkit-backdrop-filter: blur(3px);
	}
	
}

.panel.panel-left { width: 100%; max-width: 375px; }
.device-ios:not(.with-statusbar) .panel-left {
	padding-top: 18px;
	background-color: rgb(247, 247, 248);
}
.iphonex:not(.with-statusbar) .panel-left {
	padding-top: env(safe-area-inset-top);
	background-color: rgb(247, 247, 248);
}

.color-black { color: black; }

/* menu.html: 375px */ 
html.with-panel-left-reveal .framework7-root>.view, html.with-panel-left-reveal .panel-backdrop, html.with-panel-left-reveal .views {
	-webkit-transform-style: translate3d(375px,0,0);
	transform: translate3d(375px,0,0);	
}

/**
 * Framework7 Plugin 3D Panels 2.0.0
 * Framework7 plugin to add 3d effect for side panels
 * http://framework7.io/plugins/
 *
 * Copyright 2014-2018 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: February 24, 2018
 */
.with-panels-3d .framework7-root {
  -webkit-perspective: 1100px;
  perspective: 1100px;
  overflow: hidden;
}
.with-panels-3d .framework7-root .views {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.with-panels-3d .panel-reveal.panel-left {
  -webkit-transform: translate3d(-375px, 0, 0);
  transform: translate3d(-375px, 0, 0);
}
.with-panels-3d .panel-reveal.panel-right {
  -webkit-transform: translate3d(375px, 0, 0);
  transform: translate3d(375px, 0, 0);
}
.with-panels-3d.with-panel-left-reveal .framework7-root > .views,
.with-panels-3d.with-panel-left-reveal .framework7-root > .view {
  -webkit-transform: translate3d(375px, 0, 0) rotateY(-30deg);
  transform: translate3d(375px, 0, 0) rotateY(-30deg);
  -webkit-transform-origin: right center;
  transform-origin: right center;
}
.with-panels-3d.with-panel-left-reveal .panel-left {
  -webkit-transform: translate3d(0px, 0, 0);
  transform: translate3d(0px, 0, 0);
}
.with-panels-3d.with-panel-right-reveal .framework7-root > .views,
.with-panels-3d.with-panel-right-reveal .framework7-root > .view {
  -webkit-transform: translate3d(-375px, 0, 0) rotateY(30deg);
  transform: translate3d(-375px, 0, 0) rotateY(30deg);
  -webkit-transform-origin: left center;
  transform-origin: left center;
}
.with-panels-3d.with-panel-right-reveal .panel-right {
  -webkit-transform: translate3d(0px, 0, 0);
  transform: translate3d(0px, 0, 0);
}
.with-panels-3d.with-panel-left-reveal .framework7-root > .views,
.with-panels-3d.with-panel-right-reveal .framework7-root > .views,
.with-panels-3d.with-panel-left-reveal .framework7-root > .view,
.with-panels-3d.with-panel-right-reveal .framework7-root > .view {
  -webkit-transition-property: -webkit-transform-origin, -webkit-transform;
  transition-property: -webkit-transform-origin, -webkit-transform;
  transition-property: transform-origin, transform;
  transition-property: transform-origin, transform, -webkit-transform-origin, -webkit-transform;
}
.md.with-panels-3d.with-panel-left-reveal .framework7-root > .views,
.md.with-panels-3d.with-panel-right-reveal .framework7-root > .views,
.md.with-panels-3d.with-panel-left-reveal .framework7-root > .view,
.md.with-panels-3d.with-panel-right-reveal .framework7-root > .view {
  -webkit-box-shadow: none;
  box-shadow: none;
}