@charset "utf-8";
/* CSS Document */

@grey: #BCBEC0;
@stress:#EB504C;
@rust:#97F0F2;
@oranje:#E2A55C;

h1{
	font-size:28px;
	&#maandnaam{
		border-bottom: 1px solid @grey;
		margin-left:-15px;
		margin-right:-15px;
		margin-top:0;
		padding:30px 15px 30px 15px;
		background-color:@grey;
		color:white;
	}
}
.buttonreset{
	display:block;
	margin-left:auto;
	margin-right:auto;
	margin-top:20%;
	max-width:100%;
	padding: 50px;
	font-size:24px;
	bottom:0;
}
.dagvanmaand{
	float:left;
	font-size:18px;
	padding-left:10px;
	padding-right:10px;
	padding-top:15px;
	padding-bottom:20px;
	border-bottom: 1px solid @grey;
	text-align:center;
	a{
		color:black;
		&:hover{
			text-decoration:none;
			color: @grey;
		}
	}
	.rood{
		display:inline;
		padding:8px;
		background-color:@stress;
		&:hover{
			background-color:grey;
		}
	}
	.oranje{
		display:inline;
		padding:8px;
		background-color:@oranje;
		&:hover{
			background-color:grey;
		}
	}
	.blauw{
		display:inline;
		padding:8px;
		background-color:@rust;
		&:hover{
			background-color:grey;
		}
	}
}

.nopadding{
	padding:0;
}
.row{
	margin:0;
}
#datetoday{
	padding:30px 15px 30px 15px;
	background-color:@grey;
	color:white;
	margin:0;
}
.formulier{
	margin-top:20px;
	.form-control{
		padding:5px;
	}
	.form-control[readonly]{
		background-color:white;
		border:none;
		padding:0;
		box-shadow:none;
		height:20px;
	}
	.thebuttons{
		text-align:center;
	}
	#toevoegen{
		color:green;
		font-size:60px;
		border:none;
		background:none;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		padding:10px;
	}
	#verwijderen{
		color:red;
		font-size:60px;
		border:none;
		background:none;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		padding:10px;
	}
}

a{
	&.stressmomentlinkbox{
		color:black;
		font-size:16px;
		display:block;
		background-color:#EB854C;
		padding:30px 10px 30px 10px;
		border-top: solid 2px white;
		.stresstitel{
			margin:0;
		}
		.stresstime{
			text-align:right;
			margin:0;
		}
		&:hover{
			background-color:#D17865;
		}
	}
	&.rustmomentlinkbox{
		color:black;
		display:block;
		font-size:16px;
		background-color:#A7DFD0;
		padding: 30px 10px 30px 10px;
		border-top: solid 2px white;
		.rusttitel{
			margin:0px;
		}
		.rusttime{
			text-align:right;
			margin:0px;
		}
		&:hover{
			background-color:#66BAC9;
		}
	}
	&.calendaricon{
		margin-left:auto;
		margin-right:auto;
		background-image: url("calendar.png");
		background-repeat: no-repeat;
		background-position: center; 
		background-size:contain;
		min-height:150px;
		max-width:200px;
		text-align:center;
		margin-top:50px;
		margin-bottom:20px;
		display:block;
		&:hover{
			background-image: url("calendar-hover.png");
		}
		img{
			max-width:60%;
		}
	}
	&.calendariconagenda{
			background-image: url("calendar-hover.png");
			background-repeat: no-repeat;
			background-position: center; 
			height:60px;
			margin-top:10px;
			background-size:contain;
			display:block;
			&:hover{
				background-image: url("calendar-hoverdarker.png");
			}
			img{
				max-width:60%;
			}
	}
	&.backtodate{
		&:hover{
			text-decoration:none;
			h1{
				color:grey!important;
			}
		}
	}
}
.greyback{
	background-color:@grey; 
	height:100%;
	width:100%;
	padding:10px;
}
.tijdvak{
	border:1px solid @grey;
	height:60px;
	text-align:right;
	padding:5px;
}
.momentvak{
	border:1px solid @grey;
	border-left:0px;
	height:60px;
	h2{
		font-size:18px;
		margin-top:10px;
		margin-bottom:0;
	}
	p{
		font-style:italic;
		&.mogoorzaak{
			max-height:100%;
			overflow:hidden;
			white-space:nowrap;
		}
	}
	.bewerklink{
		font-size:30px;
		margin-top:auto;
		margin-bottom:auto;
		vertical-align:middle;
		text-align:right;
		float:right;
		display:block;
		margin-top:10px;
		color:#555;
		&:hover{
			color: black;
			text-decoration:none;
		}
	}
}
.stresscolor0{
	background-color: @rust;
}
.stresscolor1{
	background-color: @rust;
}

.stresscolor2{
	background-color: #A7DFD0;
}

.stresscolor3{
	background-color: #B8CEAF;
}

.stresscolor4{
	background-color: #D1B57D;
}

.stresscolor5{
	background-color: @oranje;
}

.stresscolor6{
	background-color: #EB854C;
}

.stresscolor7{
	background-color: #EB764C;
}

.stresscolor8{
	background-color: #EB674C;
}

.stresscolor9{
	background-color: #EB574C;
}

.stresscolor10{
	background-color: @stress;
}