/*==========  Mobile First Method  ==========*/

#agenda {
    margin-top: 30px;
}  
  
#popup #agenda {
    margin-top: 10px;
    
}    
.dag {
	position: relative;
	margin-bottom:15px;
	padding: 0;
	width: 100%;
}
.dag .datumkort span, #agenda .datumkort span {
	display: block;
	width: 50px;
	height: 50px;
	margin-left: -10px;
	font-size: 16px;
	line-height: 20px;
	text-align: center;
	border-radius: 50%;
	background-color: rgba(58,162,215, 0.1);
	margin-bottom: 5px;
	padding:5px;
}
.dag .datumkort span p, #agenda .datumkort span p{
	text-transform: uppercase;
}
.dag .datumlang, #agenda .datumlang  {
	height: 50px;
	line-height: 50px;
	font-size: 18px;
}
.uren {
	border: thin solid #e1e1e1;
	border-radius: 5px;
	position: absolute;
	width: 100%;
	//margin-left:-60px;
	margin-right: 15px;
}
.uur {
	height: 60px;
}
.uur .deelvanuur {
	height: 30px;
	border-bottom: thin dashed #e1e1e1;
}
.deelvanuur:last-of-type {
	border: none;
}
.uur:nth-child(odd) {
	background-color: rgba(58,162,215, 0.05);
}	

.uur.disabled {
	background-color: #fafafa;
	cursor: default;
}
#agenda .uur.disabled .deelvanuur {
	border-bottom: thin dashed #fafafa;
}

.uur .deelvanuur .tijd{
	height: 30px;
	line-height: 30px;
	padding-left: 5px;
}
.uur .deelvanuur .regel{
	height: 30px;
	line-height: 30px;
}	

.afspraak {
	position: relative;
	margin-bottom: 1px;
	
}

.afspraak .detail{ 
	background-color: rgba(58,162,215,0.5);
	//border: 1px solid rgba(245,163,51,1);
	height: 100%;
	box-sizing:border-box;
	border-radius: 5px;
	padding: 10px;
	overflow:hidden;
	text-overflow: ellipsis;
	position: relative;
	text-align: center;
}

.afspraak:nth-of-type(3) .detail {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.afspraak .detail:hover{
	background-color: rgba(58,162,215,0.8);
} 
.afspraak .detail{ 
     padding: 3px; 
}
.afspraak .detail .info{ 
     font-size: 18px;   
}

.afspraak .detail .info{ 
    
}
.afspraak .detail .sign{ 
     font-size: 48px;   
     opacity: 0.7;
}
/* Klein */
.afspraak.heelklein .detail .info{ 
    font-size: 10px;
        text-align: left;
}
.afspraak.heelklein .detail .sign{ 
    font-size: 18px;   
    float: left;
    margin-right: 10px;
}
.afspraak.heelklein .detail .tijd{ 
    font-size: 10px;
        text-align: left;

}

.afspraak.heelklein .detail .icon {
    right: 2px;
    bottom: 2px;
    padding: 2px 5px;
    font-size: 10px;
}


/* Klein */
.afspraak.klein .detail .info{ 
    font-size: 12px;
    padding-top: 5px;
    text-align: left;
}
.afspraak.klein .detail .sign{ 
    font-size: 36px;   
    float: left;
    margin-right: 10px;
}
.afspraak.klein .detail .tijd{ 
    font-size: 12px;
    text-align: left;

}

.afspraak.klein .detail .icon {
    right: 4px;
    bottom: 4px;
    padding: 2px 5px;
    font-size: 14px;
}

/* middel */
.afspraak.middel .detail .info{ 
    font-size: 13px;
    padding-top: 2px;
    line-height:16px;
}

.afspraak.middel .detail .sign{ 
    font-size: 26px;   
    
}


.afspraak.middel .detail .tijd{ 
    font-size: 13px;

}

.afspraak.middel .detail .icon {
    right: 4px;
    bottom: 4px;
    padding: 2px 5px;
    font-size: 14px;
}



.afspraak .detail.vrij {
    background-color: rgba(208,208,208,0);
    color:  rgba(208,208,208,0);
}
.afspraak .detail.vrij:hover {
	background-color: rgba(208,208,208,0.8);
	background-color: #dff0d8;
	color: #3c763d;

	cursor: pointer;  
}
.afspraak .detail.vrij.niet:hover {
	background-color: rgba(208,208,208,0);
	color: #3c763d;

	cursor: default;  
}


.afspraak .detail.bezet {
    background-color: rgba(208,208,208,0.5);
    color: rgba(0,0,0,0.5);
}
.afspraak .detail.telaat {
    background-color: #fafafa;
    border-left: thin solid #e1e1e1;
    border-right: thin solid #e1e1e1;
    cursor: default;
}
.afspraak .detail.bezet:hover {
	background-color: rgba(208,208,208,0.5);
	
}

.afspraak .detail.backoffice.bezet {
    background-color: rgba(208,208,208,0.5);
    background-color: #006db7;
    color: #ffffff;
    font-size: 15px;
}


.afspraak .detail.eigen, #agenda .thumbnail.gebruikt {
    background-color: #d9edf7;
    color: #31708f;
}    
.afspraak .detail.eigen:hover, #agenda .thumbnail.gebruikt:hover {
	background-color: #bce8f1;
	cursor: pointer;  
} 
#backoffice #agenda .thumbnail.gebruikt:hover, #popup #agenda .thumbnail.gebruikt:hover {
    background-color: #d9edf7;
    color: #31708f;
    cursor: default;
}
.afspraak .detail.backoffice.niks, .afspraak .detail.backoffice.niks:hover {
    background-color: rgba(208,208,208,0);
    color: rgba(208,208,208,0);
    cursor: default;  
}



.afspraak .detail .icon, #agenda .thumbnail .icon {
    display: none;
    position: absolute;
    right: 5px;
    bottom: 5px;
}
.afspraak .detail:hover .icon, #agenda .thumbnail:hover .icon {
    display: inline;
}
.afspraak .detail.backoffice .icon {
    right: 5px;
    top: 5px;  
    bottom: auto;
    
}
.afspraak .detail.backoffice.niks:hover .icon {
    display: none;
}
#agenda .thumbnail {
    height: 110px;
    padding: 15px;
    position: relative;
}

#agenda .thumbnail .datum {
	height: 80px;
	width: 80px;
	float: left;
	margin-right: 15px;
	text-align: center;
}
#agenda .thumbnail .datum strong{
	display:block;
	background-color: rgba(58,162,215, 1);
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	color: #ffffff;
	height: 50px;
	line-height: 50px;
	font-size: 24px;
}
#agenda .thumbnail .datum p{
	display:block;
	background-color: rgba(58,162,215, 1);
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	color: #ffffff;
	height: 30px;
	line-height: 20px;
	padding: 0;
	text-transform: uppercase;
	font-size: 18px;
	font-weight: 400;
}
#agenda .thumbnail .tijd {
    height: 80px;
    line-height: 80px;
    font-size: 16px;
}

#agenda .thumbnail .vrij {
    height: 80px;
    line-height: 80px;
    font-size: 16px;
}
.vorige, .volgende {
	//position: absolute;

	float: left;
}
.agenda {
	position:relative;
}
 .volgende {
	left: auto;
	right: -60px;
	float: right;
 }
 .vorige span, .volgende span {
	display: inline-block;
	width: 30px;
	height: 30px;
	font-size: 16px;
	line-height: 30px;
	text-align: center;
	border-radius: 50%;
	background-color: rgba(58,162,215, 0.1);
	margin-bottom: 5px;
	//padding:5px;
	float: left;
}
.vorige i, .volgende i {
	line-height: 30px;
	float:left;
	margin-left: 15px;
}

.volgende i{
	margin-right: 15px;
}
.volgende span, .volgende i {
	float:right;
}	



#agenda .datumkort{
	width: 60px;
	float:left;
	padding-left: 10px;
}
#agenda .datumlang{
	padding-left: 15px;
	float:left;
}
#agenda .datumselect{

	line-height: 50px;
	height: 50px;
	margin-bottom: 10px;
}
#agenda .datumselect span.morgen, #agenda .datumselect span.gister{
	float: right;
	line-height:50px;
	display: block;
	margin-top:13px;
    width: 25px;
    height: 25px;
    font-size: 16px;
    line-height: 25px;
    text-align: center;
    border-radius: 50%;
    background-color: rgba(58,162,215, 0.1);
    margin-left: 15px;
    margin-right: 0px;

}
 #agenda .datumselect span.gister {
     float: left;
     margin-left: 0px;
     margin-right: 15px;
 }
#agenda .datumselect a span:hover{
    background-color: rgba(58,162,215,0.4);
}
#agenda .datumselect .has-feedback{
	width: 175px;
	float:right;
	margin: 8px 5px 0 5px;
}
.has-feedback input.form-control{
	padding-right: 26px;
}
.has-feedback span{
	font-size: 18px;
	color: rgba(0,0,0,0.5);
}	
#agenda .uren{
	margin-top: 135px; /* Hoogte datum + hoogte info monteur */
}
#backoffice #agenda .uren {
    margin-top: 169px; /* Hoogte datum + hoogte info monteur + hoote knoppen*/
}



#agenda #dagvandeweek{
 margin-left: 60px;
 width: auto;
 border: none;
}

.weekdag{
	max-width: 300px;
	min-width: 125px;
	width: calc(100% / 7 - 15px);
	position: relative;
	height: 100%;
	float: left;
	min-width:130px;

}
.weekdag:nth-child(odd) {
	
	
}

.weekdag ~ .weekdag {
	margin-left: 15px;
}
.weekdag .titel {
	margin: 0;
	height: 75px;
	background-color: rgba(58,162,215, 1);
	color: #ffffff;
	padding: 5px 5px;
	position: relative;
	line-height: 20px;
	font-size: 16px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}
.weekdag .titel p {
	display: block;
	width: 100%;
	float:left;
	margin: 0;
	padding: 0;
	line-height: 20px;

}
.weekdag .titel .label{
	font-size: 10px;
	float:left;	
	margin-right: 2px;
}
.weekdag .titel .links {
	position: absolute;
	right: 3px;
	top: 3px;
}
.weekdag .titel .links span {
	float: right;
	font-size: 15px;
	//line-height: 60px;
	margin-left: 5px;
	margin-top: 3px;
}
.weekdag .titel a {
	color: rgba(255,255,255,0.7);
	height: 15px;
	width: 15px;
}
.weekdag .titel a:hover {
	color: rgba(255,255,255,0.9);
}
#backoffice #agenda #dagvandeweek .uren ,#agenda .weekdag .uren{
	margin-top: 0px; /* */
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}
#agenda .tijd{
	padding-left:5px;
	padding-right:5px;
}


option:disabled {
	color: rgba(0,0,0,0.3);
}

	/* Custom, iPhone Retina */ 
	@media only screen and (min-width : 320px) {
		
	}

	/* Extra Small Devices, Phones */ 
	@media only screen and (min-width : 480px) {

	}

	/* Small Devices, Tablets */
	@media only screen and (min-width : 768px) {
	.dag {
			padding-left:15px;
			padding-right: 15px;
		}	
		.dag .datumkort span {
			display: block;
			width: 50px;
			height: 50px;
			margin-left: -10px;
			font-size: 16px;
			line-height: 20px;
			text-align: center;
			border-radius: 50%;
			background-color: rgba(58,162,215, 0.1);
			margin-bottom: 5px;
			padding:5px;
		}
		.dag .datumkort span p{
			text-transform: uppercase;
		}
		.dag .datumlang {
			height: 50px;
			line-height: 50px;
			font-size: 18px;
		}	
		.agenda .uren {
			width: 95%;
			width: calc(100% - 30px);
		}
		.agenda .uur .deelvanuur .tijd{
			padding-left: 15px;
		}
		.vorige, .volgende {
			position: absolute;
			left: -60px;
			top: 50%;
			
		}
		.agenda {
			position:relative;
		}
		 .volgende {
			left: auto;
			right: -60px;
		 }
		 .vorige span, .volgende span {
			display: block;
			width: 50px;
			height: 50px;
			font-size: 22px;
			line-height: 50px;
			text-align: center;
			border-radius: 50%;
			background-color: rgba(58,162,215, 0.1);
			margin-bottom: 5px;
			//padding:5px;
		}	
		.vorige span:hover, .volgende span:hover {
			background-color: rgba(58,162,215, 0.4);
		}
		
		#agenda .thumbnail .tijd {
            font-size: 22px;
		}
		#agenda .thumbnail .vrij {
		    font-size: 22px;
		} 
	}

	/* Medium Devices, Desktops */
	@media only screen and (min-width : 992px) {

	}

	/* Large Devices, Wide Screens */
	@media only screen and (min-width : 1200px) {
        .dag {
             max-width: 100%;   
        }
	}