@font-face {
    font-family: 'Calvert';
    src: url('./fonts/CalvertMTStd-Bold.woff') format('woff'),
        url('./fonts/CalvertMTStd-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Calvert';
    src: url('./fonts/CalvertMTStd.woff') format('woff'),
        url('./fonts/CalvertMTStd.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Calvert';
    src: url('./fonts/CalvertMTStd-Light.woff') format('woff'),
        url('./fonts/CalvertMTStd-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

/* voor testen */
@media only screen and (min-width: 800px) {
	body{
		background: #f1f1f1;	
	}
	ion-nav-view{
		max-width:600px;
		left:50%;
		transform: translateX(-50%);
		position: relative;
	}
	
	#heading{
		font-size: 3vw!important;
		hyphens: auto;
	}
	
	.input-label span, .item-toggle span{
		font-size:15px;
		color:#000
	}
}
.back-text{
	color:#fff;
}

#header-image{
	display: block; 
	width: 100%; 
	height: auto; 
	margin-left: auto;
	margin-right: auto;
}

#canvas{
	position: absolute;
	z-index: 20;
	top:0px;
	left:0px;
	height: 240px;
	width:320px;
}

.list{
	padding-bottom:32px!important;
}

.item-thumbnail-left > img:first-child, .item-thumbnail-left .item-image, .item-thumbnail-left .item-content > img:first-child, .item-thumbnail-left .item-content .item-image{
	height: auto;
	width:auto;
}

.modal-backdrop-bg  {
   z-index: 0!important;
    display:none!important;
}

img.header{
	display: block; 
	max-width: 100%; 
	height: auto; 
	margin-left: auto; 
	margin-right: auto;
	smax-height:40vh	;
}
/**** FORM VALIDATION ****/
html,body{
	 font-family: 'Calvert';
	 height:100%;
}

ion-headers-bar .title, .bar-header .title{
	font-family: 'Calvert';
	line-height: 48px!important;
	text-align: center!important;
}

h1#heading{
	font-family: 'Calvert';
	font-size:6.5vw;
	font-weight: normal;
	letter-spacing: 0px;
	text-transform: uppercase
}

.scroll{
	height:100%;
}

.center{
	text-align: center;
}

.left{
	text-align: left;
}

.right{
	text-align: right;
}

p.p16{
	padding:0 16px
}

.bar-footer{
	background: rgba(255,255,255,1);
	min-height:56px;
	wwidth:100%
}

.bar-footer .button{
	margin-top:0px;
}

ion-toolbar{
	height:46px;
	width:100%	
}

.taskbar{
	padding:16px 16px 0px 16px;
	display:flex;
	width:100%;
	background:rgba(0,0,0,0);
}

.button.taak{
	min-width:65px!important;
	min-height: 37px;
	text-align:center;
	overflow:visible; 
	position: relative;
	border-radius:0px 0px 0px 0px;
	font-size:10.5px;
}

.button.taak:not(:last-child){
	margin-right:0px;
}

.button.taak.outer span{
	margin-top:32px;
	left:0;
	position: absolute;
	font-size:10.5px;
	line-height: 12px;
	width:100%;
	z-index:3;
	color:#000;
}

.taak:before{
    content:"";
    position:absolute;
    top:100%;
    left:0%;
    width:100%;
    border-width:0px 32.5px 19.5px 32.5px;
    border-style:solid;
    border-color:transparent transparent #FFB501 transparent;
    transform: translate(-1px, -55px)
}

.taak:after{
    content:"";
    position:absolute;
    top:103%;
    left:-1px;
    width:100%;
    border-width:20px 32.5px 0px 32.5px;
    border-style:solid;
    border-color:#FFB501 transparent transparent transparent;
    transform: translate(0px, 0px)
}


.taak.activated, .taak.activated i,
a.slanted.activated, a.slanted.activated span{
	background:#000!important;
	color:#fff;
	border:1px solid #000!important
}

.taak.activated:before{
	border-color:transparent transparent #000 transparent;
}

.taak.activated:after{
	border-color:#000 transparent transparent transparent;
}


a.slanted.activated:before{
	border-color:transparent #000 transparent transparent;
}

a.slanted.activated:after{
	border-color:transparent transparent transparent #000;
}

.button.slanted{
	width:144px;
	border-radius:0px;
	border:0;
	font-family: 'Calvert';
	font-size: 20px;
	text-transform: lowercase;
	line-height: 46px;
	height:46px;	
}

.slanted:before {
    content:"";
    position:absolute;
    top:100%;
    left:0;
    border-width:22.5px 23.5px 23px 23px;
    border-style:solid;
    border-color:transparent #FFB501 transparent transparent;
    transform: translate(-100%, -100%)
}

.slanted:after {
    content:"";
    position:absolute;
    top:100%;
    left:100%;
    border-width:23px 23.5px 23.5px 23px;
    border-style:solid;
    border-color:transparent transparent transparent #FFB501;
    transform: translate(0%, -100%)
}

.taken-bar{
	 display: table;
	 width:100%;
	 align-items: center;
}

.taken-bar > div{
	width: 50%;
	height: 100px;
	padding:16px;
	display: table-cell; 
	vertical-align: middle;
}


#ng-webcam-container{
	width:100%;
	height:100%;
	top:0px;
}


.range .icon.range-center{
	position: absolute;
	left:50%;
	transform: translate(-50%,75%)
}

input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  margin: 13.8px 0;
}

input[type=range]:focus {
  outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  cursor: pointer;
  background: #000;
  border: 0px solid #010101;
}

input[type=range]::-webkit-slider-thumb {
  border: 1px solid #000000;
  height: 16px;
  width: 16px;
  border-radius: 8px;
  background: #ffffff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -6px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #FFB501;
}

input[type=range]::-moz-range-track {
  width: 100%;
  height: 4px;
  cursor: pointer;
  background: #000;
}
input[type=range]::-moz-range-thumb {
  border: 1px solid #000000;
  height: 16px;
  width: 16px;
  border-radius: 8px;
  background: #ffffff;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #2a6495;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
  background: #3071a9;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
  height: 8.4px;
}
input[type=range]:focus::-ms-fill-lower {
  background: #3071a9;
}
input[type=range]:focus::-ms-fill-upper {
  background: #367ebd;
}

.no-border{
	border:0px;
}

.bar-subheader {
    top: 44px;
    height:intrinsic!important
}

.all-disabled{
	opacity: .3;
	color: #c0c0c0;
}

.item-select select {
	max-width: 50%!important;
}

ng-webcam, .ng-webcam{
	width:100%;
	height:100%;
	display: block;
}

#ng-webcam-container video{
	width:100%!important;
	height: 100%!important;
	object-fit: fill;
}

.fade{
  transition:0.5s linear all;
  opacity:0;
  overflow:hidden;
  position:relative;
  min-height:0px;
  height:0px;
}

.legendas, .legendas option{
	font-size:10px!important;
}

.item > div > .color{
	position:absolute;
	width:40px;
	height:40px;
	border-radius: 50%;
	left:8px;
	top:8px;
}

#image-container{
	padding:0px;
}