/* Desktop */

html, body {
	height: 100%;
}

body {
	background: #f0f0f0;
}

/* Hand pointer bij mouseover */
a, td {
	cursor: pointer!important;
}


/* Header */

#header {
	float: left;
	width: calc(100% - 200px);
	height: 70px;
	background: #fff;
	line-height: 70px;
	border-bottom: 1px solid #d9d9d9;
}

#header > .row > .col {
	padding: 0 15px;
}



#tools {
	float: right;
}

#tools ::placeholder {
	color: #3b384c;
	opacity: 1;
}
#tools :-ms-input-placeholder {
	color: #3b384c;
}
#tools ::-ms-input-placeholder {
	color: #3b384c;
}

#tools input, #tools select, #tools a.button {
	float: left;
	margin: 19px 0 19px 10px;
	font-size: 14px;
}

#tools input, #tools select {
	width: 180px;
	width: 160px;
}

/* Menu */

#logo {
	float: left;
	margin: 0 0 45px 20px;
}

#logo img {
	vertical-align: middle;
	height: auto;
}



#menu {
	position: relative;
	float: left;
	width: 20%;
	max-width: 200px;
	height: 100vh;
	background: #a70228;
	padding: 35px 10px 30px 0;
	overflow-y: scroll;
}

#menu ul {
	font-weight: 400;
	font-size: 14px;
}

#menu ul li {
	float: left;
	width: 100%;
	padding: 5px 0;
}
#menu ul li a:hover {
	color: #51bcbc;
}

#menu ul li a {
	float: left;
	display: block;
	width: 100%;
	padding: 4px 10px 4px 25px;
	color: #fff;
	text-decoration: none;
	border-radius: 0 10px 10px 0;
	transition: 0.1s;
}

#menu ul li a img {
	margin-top: -2px;
	margin-right: 5px;
	vertical-align: middle;
}



#menu > ul > li#active > a {
	background: #51bcbc;
	color: #fff;
}

#menu ul li#active ul li.active a {
	color: rgba(243, 0, 27);
}





/* Wrapper */

#wrapper {
	background: #f0f0f0;
}





/* Main */

#main {
	width: calc(100% - 200px);
	height: calc(100% - 70px);
}



#main > .row {
	margin-bottom: 30px;
}

#main > .row > .col {}

#main > .row > .col .block {
	margin-bottom: 30px;
	padding: 30px 15px;
	background: #fff;
	box-shadow: 0 0 20px 0 rgba(0,0,0,0.08);
}
#main > .row > .col .block:last-child {
	margin-bottom: 0;
}

#main > .row > .col .block table {
	width: calc(100% + 30px);
	margin-left: -15px;
	margin-right: -15px;
}

#main > .row > .col .block.starts-with-table {
	padding-top: 0;
	padding-bottom: 30px;
}

#main > .row > .col .block.ends-with-table {
	padding-top: 30px;
	padding-bottom: 0;
}

#main > .row > .col .block.starts-with-table.ends-with-table {
	padding-top: 0;
	padding-bottom: 0;
}

#main > .row > .col .block.starts-with-table table {
	margin-bottom: 30px;
}

#main > .row > .col .block.ends-with-table table {
	margin-top: 20px;
}



#main > .row > .col .block.alt {
	background: #51bcbc4d;
	box-shadow: none;
}

#main > .row > .col .block.alt th, #main > .row > .col .block.alt td {
	border-color: #56bcbb;
}

#main > .row > .col .block.alt th {
	background-color: #51bcbc;
}



#main > .row > .col .block.note {
	padding: 30px;
	background: #f2d36d url(../img/corner.gif) right bottom/40px no-repeat;
	font-size: 13px;
	line-height: 22px;
	box-shadow: none;
}

#main > .row > .col .block.note strong {
	padding: 7px 12px;
	background: #e0c058;
	border-radius: 4px;
}

#main > .row > .col .block.note textarea {
    padding: 0;
	background: transparent;
	border: 0;
}

/* Login */

#login {
	width: 360px;
	margin: 120px auto;
	box-shadow: 0 0 6px #00000029;
}