html {
	overflow-y: scroll;
	height: auto;
}

body,
td {
	font-family: 'Fira Sans', Verdana, Arial, sans-serif;
	font-size: 14px;
	height: 100%;
	padding-top: 5px;
}

#container {
	font-size: 12px;
	/* Voor Verdana*/
	font-size: 13px;
	/* Fira sans*/
	padding-top: 2px;
	padding-bottom: 5px;
	width: 95%;
	height: 700px;
	margin: auto;
	background-color: #cccccc;
	display: table;
}

#tabmenu {
	width: 95%;
	height: 30px;
	margin: auto;
	font-size: 12px;
	font-family: 'Fira Sans', Verdana, Arial, sans-serif;
}

#menu {
	height: auto;
	width: 172px;
	margin-top: 12px;
	margin-left: 12px;
	float: left;
	font-size: 13px;
}

#inhoud {
	margin-top: 12px;
	float: left;
	max-width: calc(100vw - 320px);
}

#inhoud.paginas {
	margin: 10px;
	width: 100%;
}

#inhoud.todopage {
	width: calc(100vw - 170px);
}

.halfpage {
	width: 50%;
	float: left;
	min-height: 100px;
}

#tabs {
	margin-top: 40px;
	background-color: #c8c8c8;
	padding: 0;
}

#tabs ul#planner li#weken {
	background-color: #c8c8c8;
}

#inhoud ul.ui-tabs-nav {
	margin: 0;
	padding: 0;
	border-top: 0;
	border-left: 0;
	border-right: 0;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active {
	background-color: #c8c8c8;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
	background: #dddddd;
}

.ui-datepicker-calendar .ui-state-hover {
	background-color: #bbb;
}

.ui-datepicker-today .ui-state-default,
.ui-datepicker-today .ui-widget-content .ui-state-default {
	background-color: #cccccc;
	color: #da0707;
	border-color: #b8b8b8;
}

.ui-datepicker-current-day .ui-state-active,
.ui-datepicker-current-day .ui-widget-content .ui-state-active {
	border-color: #0077bd;
	background-color: #8eFF8e;
	background-color: #5ba4cf;
	color: #fff;
}

.ui-datepicker-next:before {
	content: " >> ";
	line-height: 27px;
}

.ui-datepicker-prev:before {
	content: " << ";
	line-height: 27px;
}

.ui-tabs .ui-tabs-panel {
	padding: 2em 1.4em;
}

#overzicht {
	width: 960px;
	overflow-x: auto;
	clear: both;
	padding-top: 10px;
}

#overzicht ul,
#afspraken ul {
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 0;
	padding-left: 0;
	padding-right: 0;
}

#afspraken ul li,
#contactpersonen ul li {
	font-size: 12px;
	border: 1px solid #AAA;
	margin-top: -1px;
	clear: both;
}

#afspraken ul li.tab,
#contactpersonen ul li.tab {
	width: 110px;
	padding-bottom: 10px;
	padding-top: 3px;
	height: 8px;
	padding-left: 5px;
	float: left;
	border-bottom: 0;
	margin-top: 1px;
}

#afspraken ul li.toevoegen {
	float: right;
	clear: none;
	border-bottom: 0;
	margin-top: -4px;
	width: 33px;
	border: none;
	background-color: transparent;
}

#afspraken ul li.toevoegen a {
	width: auto;
	text-decoration: none;
	padding-bottom: 12px;
	padding-top: 2px;
	height: 7px;
	padding-left: 11px;
	background-color: #C0C0C0;
	border: 1px solid #AAA;
	border-bottom: 0;
	-moz-border-radius: 8px 8px 0px 0px;
	-webkit-border-radius: 8px 8px 0px 0px;
	border-radius: 8px 8px 0px 0px;
}

#afspraken ul li a span.datum,
#afspraken ul li a span.naam,
#afspraken ul li a span.soort {
	width: 66px;
	display: inline-block;
	text-align: right;
	margin-left: 4px;
}

#afspraken ul li a span.naam,
#afspraken ul li a span.soort {
	width: 90px;
}

#afspraken ul li a span.soort {
	margin-right: 8px;
}

#afspraken ul li a span.meer {
	margin-left: 175px;
}

#afspraken ul li a {
	width: 270px;
	display: block;
	padding: 3px 0;
	cursor: pointer;
}

#afspraken ul li.aktief a,
#afspraken ul li.aktief a:hover {
	background-color: #FF8E8E;
}

#afspraken ul li a:hover {
	background-color: #AAA;
}

#contactpersonen ul li {
	padding-left: 6px;
	width: 286px;
	float: left;
}

#contactpersonen ul li.cpformulier {
	padding-top: 8px;
	padding-bottom: 8px;
}

#contactpersonen ul li a {
	width: 100%;
	display: block;
	padding: 3px 0;
	cursor: pointer;
}

#contactpersform {
	margin-top: 10px;
}

#contactpersform label {
	margin-left: 0;
	width: 110px;
}

#contactpersform input[type=text] {
	width: 160px;
}

#linkerkolom,
#rechterkolom {
	width: 271px;
	display: table-cell;
	background-color: #D6D6D6;
	padding: 6px;
	line-height: 16px;
}

#rechterkolom {
	padding: 6px 0 6px 6px;
}

#afspraak {
	width: 570px;
}

#linkerkolom {
	height: auto;
	display: block;
	float: left;
	padding-bottom: 8px;
}

#contactpersonen {
	height: auto;
	width: 570px;
	display: table-cell;
	padding-bottom: 5px;
}

.knop:hover {
	color: #000;
}

.afspraaktitel {
	height: 25px;
}

.tussendiv {
	width: 20px;
	background-color: transparent;
	display: table-cell;
}

.tussendiv.horizontaal {
	height: 20px;
	display: block;
	background-color: #C8C8C8;
	width: 283px;
	margin: 10px 0 10px -6px;
}

.tussendiv.horizontaal.extra {
	width: 576px;
	margin-top: 8px;
}

#linkerkolom select,
#linkerkolom input {
	float: none;
}

#afspraak textarea {
	width: 400px;
	height: 200px;
	margin-left: 156px;
	margin-top: 2px;
}

#bijzonderheden textarea {
	width: 200px;
	height: 100px;
}

#klantkaart .bedrijfsnaam {
	font-weight: 500;
}

#klantkaart .adres,
#klantkaart .postadres,
#klantkaart .telefoon,
#klantkaart .email,
#klantkaart .wijzigen {
	margin-top: 6px;
}

#klantkaart .wijzigen {
	height: 20px;
}

#klantkaart .wijzigen input {
	float: right;
}

.edit label {
	width: 80px;
	font-weight: normal;
	margin-left: 0;
}

#afspraak label {
	margin-left: 4px;
}

ul#planner {
	width: 940px;
	background: url(../images/planoverzicht.png);
	position: relative;
	overflow: hidden;
}

ul#planner li {
	height: 40px;
	margin-bottom: 10px;
	border: 1px solid #aaa;
}

ul#planner li#nu {
	position: absolute;
	top: 18px;
	height: 100%;
	border: none;
	border-left: 2px solid #ff0000;
}

ul#planner span {
	float: left;
	margin-top: 10px;
	margin-left: 3px;
	font-size: 12px;
}

#tabs ul#planner span {
	margin-top: 6px;
}


ul#planner li#weken {
	border: 0;
	background-color: #ccc;
	height: 18px;
	padding-left: 119px;
}

ul#planner li#weken span {
	width: 30px;
	margin: 0 110px 0 0;
	text-align: center;
	font-size: 12px;
}

ul#planner li#weken span.last,
ul#planner li#weken span.vorige,
ul#planner li#weken span.volgende {
	margin: 0;
}

ul#planner li#weken span.vorige,
ul#planner li#weken span.volgende {
	width: 35px;
	text-align: left;
	margin-top: -1px;
}

ul#planner li#weken span.volgende {
	text-align: right;
}

ul#planner li ul {
	width: 840px;
	margin-left: 100px;
}

ul#planner li ul li {
	border: none;
	position: relative;
}

ul#planner li ul li a {
	height: 40px;
	width: 140px;
	background-color: #ff0000;
	display: block;
	color: #000;
	font-size: 11px;
	text-decoration: none;
	position: absolute;
	opacity: .6;
	filter: Alpha(opacity=60);
	word-wrap: break-word;
	overflow: hidden;
}

ul#planner li ul li a.optie {
	opacity: .4;
	background-color: #ffffff !important;
	color: #000 !important;
}

ul#planner li ul li a:hover {
	opacity: 1;
	filter: Alpha(opacity=100);
}

ul#planner li ul li a.logolink {
	height: 6px;
}

a.logolink.nr2 {
	top: 6px;
}

a.logolink.nr3 {
	top: 12px;
}

a.logolink.nr4 {
	top: 18px;
}

a.logolink.nr5 {
	top: 24px;
}

a.logolink.nr6 {
	top: 30px;
}

.vorige a,
.volgende a {
	text-decoration: none;
	color: #000;
	font-size: 12px;
	padding: 0 6px 1px 6px;
}

.vorige a:hover,
.volgende a:hover {
	background-color: #ddd;
}

#query {
	float: left;
	width: auto;
	width: 600px;
	margin-top: 30px;
}

.campagne,
.klanten,
.tab,
.opbrengsten,
.pdfs,
.factuur,
.project,
.projectitems {
	border: 1px solid #aaa;
	margin-top: -1px;
	height: auto;
	width: 100%;
}

li.tab.extratab {
	float: left;
	width: auto;
	padding: 0;
	height: 29px;
	margin-bottom: -1px;
	box-sizing: border-box;
}

ul.lopend li.tab.extratab,
ul.mijn li.tab.extratab {
	margin-bottom: 0;
}

ul.lopend li.tab.extratab.aktief,
ul.mijn li.tab.extratab.aktief {
	margin-top: -4px;
	height: 32px;
}

ul.lopend li.tab.extratab.aktief a,
ul.mijn li.tab.extratab.aktief a {
	padding: 9px 10px;
}

li.tab.extratab.aktief {
	background-color: #d6d6d6;
	border-bottom: none;
}

li.tab.extratab a {
	padding: 6px 10px;
	display: block;
	text-decoration: none;
	color: #000;
}

li.project {
	clear: both;
}

ul.lopend .project.lichtgrijs.tooltip.first,
ul.mijn .project.lichtgrijs.tooltip.first {
	border-top: none;
}

ul.mijn.taken {
	width: 846px;
}

ul.mijn.taken .project.rood,
ul.mijn.taken .project.rood.dieprood {
	background-image: none;
}

ul.mijn.taken .leden>span {
	display: none;
}

#inhoud ul.mijn.taken li ul li {
	display: block;
	clear: both;
	padding-left: 30px;
	border-bottom: 1px solid #aaa;
	padding-right: 10px;
}

#inhoud ul.mijn.taken li ul li a {
	padding: 0;
	height: auto;
	text-decoration: none;
}

#inhoud ul.mijn.taken li ul li a:hover {
	background-color: transparent;
}

#inhoud ul.mijn.taken li ul {
	background-color: #cccccc;
	padding: 0;
	margin: 0 12px 14px;
}

#inhoud ul.mijn.taken li.lichtgrijs ul {
	background-color: #D6D6D6;
}

ul.mijn.taken li ul li input.checkdone {
	display: none;
}

ul.mijn.taken li ul li .leden {
	float: right;
}

ul.mijn.taken li ul li .leden>span {
	display: table-cell;
}

ul.resultaten {
	width: 330px;
}

ul.resultaten li.klanten {}

ul.resultaten li.klanten a {
	color: #000;
	text-decoration: none;
	display: block;
	height: 24px;
	line-height: 20px;
	padding-left: 8px;
}

ul.resultaten li.klanten a:hover {
	background-color: #bbb;
}

.pdfs {
	width: 550px;
}

.warning {
	padding: 6px 12px;
	width: 376px;
	background-color: #FF8E8E;
}

.factuur.totaal.letop {
	background-color: #FF8E8E;
}

input.letop {
	background-color: #ffd8d8;
}

.factuur.totaal a {
	padding: 16px 0 12px;
}

form#pdfupl {
	padding: 20px 0;
}

.spacer {
	height: 20px;
}

.tab,
.toevoegen {
	width: 130px;
	padding-bottom: 10px;
	padding-top: 6px;
	height: 10px;
	padding-left: 14px;
	background-color: #C0C0C0;
	-moz-border-radius: 8px 8px 0px 0px;
	-webkit-border-radius: 8px 8px 0px 0px;
	border-radius: 8px 8px 0px 0px;
}

.tab.extra {
	width: 160px;
}

.tab.extra.extrabreed {
	width: 220px;
}

#opbrengsten ul li.tab {
	float: left;
	border-bottom: none;
}

#opbrengsten ul li.tab.nav {
	float: right;
	width: 40px;
	cursor: pointer;
	-moz-border-radius: 0px 8px 0px 0px;
	-webkit-border-radius: 0px 8px 0px 0px;
	border-radius: 8px 0px 0px 0px;
}

#opbrengsten ul li.tab.nav.right {
	text-align: right;
	padding-right: 14px;
	padding-left: 0px;
	-moz-border-radius: 8px 0px 0px 0px;
	-webkit-border-radius: 8px 0px 0px 0px;
	border-radius: 0px 8px 0px 0px;
	border-left: none;
	border-right: 1px solid #aaa;
}

.tab.breed {
	width: 160px;
}

.opbrengsten {
	width: 750px;
	padding: 8px 0 13px 8px;
	height: 10px;
	clear: both;
}

.opbrengsten.cumulatief {
	width: auto;
}

.titel.vorige {
	margin-left: 80px;
}

.opbrengsten .opbrengst {
	text-align: right;
	width: 130px;
	font-size: 12px;
}

.opbrengsten.cumulatief .opbrengst {
	width: 70px;
}

.opbrengsten .opbrengst.now {
	font-weight: bold;
}

.campagne a,
.factuur a,
.project a {
	display: block;
	padding-bottom: 9px;
	padding-top: 12px;
	width: 100%;
	height: 16px;
	color: #000;
	cursor: pointer;
}

.project>span {
	display: inline-block;
	padding-bottom: 10px;
	padding-top: 10px;
	width: 100%;
	color: #000;
	min-width: 704px;
}

#opmerkingen .project>span {
	padding-top: 20px;
	padding-bottom: 10px;
}

#projectmappen .map {
	width: auto;
	float: left;
}

#projectmappen .map a {
	padding: 9px 10px 6px;
	width: auto;
}

ul#projectitems {
	display: inline-block;
	padding: 4px 0;
	width: 100%;
	color: #000;
	min-width: 704px;
}

.projectitems .item,
.mijn.taken .item {
	cursor: pointer;
	padding: 10px 0;
	position: relative;
}

.projectitems .item.rood,
.mijn.taken .item.rood {
	background-image: url(/images/alert.gif);
}

.projectitems .item.rood.dieprood,
.mijn.taken .item.rood.dieprood {
	background-image: url(/images/redalert.gif);
}

.projectitems .item.gedaan {
	color: #989898;
	text-decoration: line-through;
}

.projectitems .item.gedaan .leden span {
	text-decoration: line-through;
	background-color: #e0e0e0;
	border-color: #989898;
}

#projectitems.geopend .item {
	cursor: unset;
}

.item .leden {
	width: 130px;
	float: right;
	margin-top: -7px;
	border-spacing: 3px 0;
}

.item.geopend .leden,
.itemtoevoegen .leden {
	float: none;
	margin: 0px 42px 20px;
	width: auto;
	border-spacing: 3px 0;
	padding-top: 13px;
}

.item.geopend .leden.created {
	float: right;
	margin: -12px 76px 0 0;
	color: #666;
}

.leden.created .createdate {
	margin-top: 6px;
	margin-left: -27px;
}

.item.geopend .leden span,
.itemtoevoegen .leden span {
	color: #666;
	cursor: pointer;
}

.item.geopend .leden span.aktief,
.itemtoevoegen .leden span.aktief {
	color: #fff;
	background-color: #027300;
	border: none;
}

#projectitems:not(.geopend) .item:hover,
#projectitems:not(.geopend) .item.deze {
	background-color: #e7e7e7;
}

#projectitems.geopend .item.geopend {
	background-color: #c0c0c0;
	padding: 16px 0;
	background-image: none;
}

form.itemdetails div {
	clear: both;
}

.item .deadline {
	width: 82px;
	text-align: right;
	float: right;
	padding-right: 4px;
	min-height: 10px;
}

.item input.checkdone {
	margin: 0 18px 0 14px;
}

span.opmerk {
	position: absolute;
	top: 10px;
	margin-left: 5px;
	border: 1px solid #757575;
	font-size: 8px;
	line-height: 9px;
	border-radius: 2px;
	color: #4a4a4a;
}

.geopend label {
	width: 32px;
}

.itemtoevoegen,
.maptoevoegen {
	height: 40px;
	padding: 10px 40px 0;
}

.itemtoevoegen.geopend {
	height: 290px;
	padding: 30px 0 0;
	background-color: #c0c0c0;
}

.maptoevoegen.geopend {
	height: 250px;
	padding: 30px 0 0;
}

.project .edit,
.projectitems .edit {
	cursor: pointer;
}

form.projectdetails input.naam {
	width: 522px;
}

form.projectdetails textarea {
	width: 520px;
	height: 110px;
	resize: none;
}

.pdfs a {
	padding-bottom: 9px;
	padding-top: 11px;
	padding-left: 12px;
	width: 538px;
	text-decoration: none;
	display: block;
	color: #000;
	cursor: pointer;
}

.pdfs a span {
	width: 120px;
	float: right;
}

.klantnaam {
	float: left;
}

a.toegevoegd {
	color: #000;
}

.veld2 a {
	padding: 0 0 0 3px;
	display: initial;
}

.campagne a:hover,
.project a:hover {
	background-color: #b0b0b0;
	background-color: #e7e7e7;
}

#details .pdf a:hover {
	background-color: #e7e7e7;
}

.veld2 a:hover {
	background-color: transparent;
}

.campagne a.toevoegen {
	text-decoration: none;
}

.campagne a.toevoegen:hover {
	background-color: transparent;
	text-decoration: underline;
}

.campagne.detail,
.klanten.detail,
.project.detail {
	height: auto;
	display: table-cell;
	padding-top: 6px;
	padding-bottom: 6px;
	min-width: 455px;
}

.campagne ul.periodes,
.campagne ul.pdf,
.campagne ul.facturen {
	width: 750px;
	float: left;
	clear: both;
}

.campagne ul.periodes,
.campagne ul.pdf {
	background-color: #c0c0c0;
}

.campagne ul.periodes li textarea {
	width: 480px;
	height: 100px;
	float: left;
}

.klanten.detail input[type=text] {
	width: 250px;
}

.klanten.detail div {
	height: 26px;
}

.klanten.detail .postadres,
.klanten.detail .telefoon,
.klanten.detail .contactpers {
	margin-top: 10px;
}

.klanten.detail label.error,
#contactpersform label.error {
	display: none !important;
}

input.error {
	border-color: #ff0000;
}

ul.ui-autocomplete {
	width: 252px !important;
	border: 1px solid #999999;
	background-color: #efefef;
	padding: 0;
	border-radius: 0px !important;
}

#planningbody ul.ui-autocomplete {
	width: auto !important;
}

li.ui-autocomplete-category {
	padding: 11px 4px 0;
	font-weight: 500;
}

input#klant,
input#campagne {
	width: 250px;
}

input#project {
	width: 400px;
}

li.ui-menu-item {
	font-size: 12px;
}

.ui-menu .ui-menu-item a {
	border-radius: 0px !important;
}

form {
	display: table-cell;
}

.factuur form {
	padding: 16px;
}

.factuur form input[type='checkbox'] {
	margin: 4px 4px 10px 10px
}

.factuur form .barter {
	padding-top: 4px;
	display: inline-block;
}

.factuur a span.barter {
	margin-left: 20px;
}

.factuur a div.datum {
	width: 110px;
}

.factuur a div.extra {
	width: 280px;
	margin-left: 20px;
	display: inline-block;
}

.kleurcode,
.titel,
.roulerend,
.site,
.klant,
.positie,
.periode,
.opbrengst,
.verwijder,
div.datum,
.bedrag,
.comment,
.omschrijving {
	float: left;
}

.roulerend {
	width: 20px;
	height: 20px;
	margin-left: 4px;
	margin-top: -2px;
}

.titel {
	width: 150px;
}

.campagne .titel {
	width: 290px;
}

.project .titel {
	width: 300px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.project .leden {
	width: 250px;
	float: left;
	margin-top: -8px;
	border-spacing: 3px 0;
	min-height: 28px;
}

.project .voortgang {
	width: 65px;
	float: left;
	font-size: 16px;
	color: #616161;
}

div#details {
	width: 805px;
	float: left;
}

div#opmerkingen {
	width: 510px;
	float: left;
	height: auto;
}

form#opmerking {
	padding-bottom: 30px;
}

div#opmerkingen input.opmerk {
	width: 420px;
	padding: 2px 4px;
}

div#opmerkingen textarea.opmerk {
	background: #fff !important;
	box-sizing: content-box;
	box-shadow: none;
	height: 40px;
	margin: 0;
	min-height: 20px;
	width: 420px;
	padding: 2px 4px;
	resize: none;
	overflow: hidden;
	overflow-wrap: break-word;
	border-radius: 4px;
}

.opm_opslaan {
	clear: both;
	padding: 10px 40px;
	display: none;
}

div#opmerkingen .leden {
	width: 40px;
	margin-top: -2px;
	border-spacing: 6px 0;
}

div.datumtijd {
	float: left;
	width: 200px;
	margin-top: 5px;
	color: #666;
}

div.opmerking {
	clear: both;
	background-color: #e7e7e7;
	width: 422px;
	margin-left: 40px;
	padding: 3px 4px;
	border: 1px solid #c5c5c5;
	border-radius: 4px;
	line-height: 18px;
}

.voortgang span {
	font-size: 11px;
	/* Verdana */
	font-size: 12px;
	/* Fira sans */
	height: auto;
	width: auto;
	vertical-align: middle;
	text-align: center;
	box-sizing: border-box;
	margin-top: -1px;
	display: inline-block;
	padding: 0 3px;
	color: #000000;
}

div.percentage {
	color: #5e6c84;
	font-size: 11px;
	/* Verdana */
	font-size: 12px;
	/* Fira sans */

	line-height: 10px;
	position: absolute;
	left: 0;
	top: -1px;
	text-align: center;
	width: 32px;
}

li.progress {
	margin: 6px 14px 14px 8px;
	position: relative;
}

div.bar {
	background: rgba(9, 30, 66, .08);
	border-radius: 4px;
	clear: both;
	height: 8px;
	margin: 0 0 0 40px;
	overflow: hidden;
	position: relative;
}

.bar-current {
	background: #5ba4cf;
	bottom: 0;
	left: 0;
	position: absolute;
	top: 0;
	transition: width .5s ease-in, background .5s ease-in;
}

.project .prio {
	width: 75px;
	float: left;
	margin-top: -4px;
	border-spacing: 10px 0;
}

.project .periode {
	width: 130px;
}

.project .sluiten {
	width: auto;
	float: right;
	margin-left: 40px;
}

.leden span {
	display: table-cell;
	background-color: #C0C0C0;
	border-radius: 50%;
	font-size: 12px;
	height: 28px;
	width: 28px;
	vertical-align: middle;
	text-align: center;
	border: 1px solid #999;
	box-sizing: border-box;
}

.prio span {
	display: table-cell;
	background-color: #C0C0C0;
	border-radius: 50%;
	font-size: 12px;
	height: 22px;
	width: 22px;
	vertical-align: middle;
	text-align: center;
	color: #fff;
	box-sizing: border-box;
}

.prio span.inex {
	color: #000;
	border: 1px solid #999;
}

.prio.prio1 span:not(.inex) {
	background-color: #ff3232;
}

.prio.prio2 span:not(.inex) {
	background-color: #dc395c;
}

.prio.prio3 span:not(.inex) {
	background-color: #ab4498;
}

.prio.prio4 span:not(.inex) {
	background-color: #794fd5;
}

.prio.prio5 span:not(.inex) {
	background-color: #5657ff;
}

.leden span.zelf {
	background-color: #f44336;
	color: #fff;
	border: none;
}

.projectitems .item.gedaan .leden span.zelf,
#opmerkingen .leden span.zelf,
.leden.prleider span.zelf,
.leden.created span.zelf {
	background-color: rgba(244, 67, 54, 0.10196078431372549);
	border-color: #f44336;
	color: #f44336;
	border: 1px solid #f44336;
}

.opmerking_div {
	margin-bottom: 12px;
}

.ledencheckbox {
	display: none;
}

input.iteminput {
	margin-left: 44px;
	width: 480px;
	margin-bottom: 4px;
	padding: 2px 4px;
}

input.iteminput:disabled,
form.itemdetails textarea:disabled {
	background-color: #e7e7e7;
	color: #000;
	border: 1px solid #c5c5c5;
}

input.datum.iteminput {
	width: 75px;
}

label.boven {
	margin-left: 48px;
	width: auto;
}

form.itemdetails textarea {
	width: 486px;
	height: 80px;
	margin-left: 44px;
	resize: none;
}

.project .omschrijving {
	width: 680px;
	float: none;
	margin-left: 14px;
	margin-top: 40px;
	text-decoration: none;
	line-height: 1.5em;
}

.tab.pr_naam {
	min-width: 130px;
	width: max-content;
	padding-right: 14px;
}

.tab.map_naam {
	width: max-content;
	padding-right: 14px;
	margin-left: 20px;
	background-color: #e7e7e7;
	cursor: pointer;
	margin-top: 12px;
}

.opbrengsten .titel {
	width: 110px;
	text-align: right;
	font-size: 12px;
	font-weight: 600;
	margin-left: 0;
	padding-right: 10px;
}

.positie {
	width: 195px;
	width: 275px;
}

.periode {
	width: 209px;
	margin-right: 10px;
	text-align: right;
}

div.datum {
	width: 200px;
	margin-left: 38px;
}

.factuur div.bedrijfsnaam {
	width: 200px;
	margin-left: 12px;
	float: left;
}

.bedrag {
	width: 100px;
	text-align: right;
}

.comment {
	width: 250px;
	margin-left: 25px;
}

.verwijder,
.opbrengst {
	width: 90px;
	padding-right: 10px;
	text-align: right;
}

.titel,
.site {
	margin-left: 14px;
}

.site {
	width: 180px;
}

.klant {
	width: 290px;
}

.kleurcode {
	width: 20px;
	height: 26px;
	margin-top: -5px;
	margin-left: 3px;
}

.lichtgrijs {
	background-color: #D6D6D6;
}

.grijs {
	background-color: #CCCCCC;
}

.campagne.rood,
.factuur.rood,
.project.rood,
table#todo tr.rood {
	background-image: url('/images/redalert.gif');
	background-image: url('/images/alert.gif');
	border-bottom: 1px solid #cccccc;
}

.project.rood {
	border-bottom: 1px solid #aaa;
}

.project.rood.dieprood {
	background-image: url('/images/redalert.gif');
}

.campagne ul.logging,
ul.logging {
	width: 1100px;
	float: left;
	clear: both;
	background-color: #cccccc;
}

ul.logging li.logs {
	height: auto;
	display: inline-block;
	width: 1100px;
}

li.logs div {
	float: left;
	margin-left: 0;
}

li.logs .datum {
	width: 110px;
}

li.logs .tijd {
	width: 80px;
}

li.logs .user {
	width: 100px;
}

li.logs .camp_naam {
	width: 300px;
}

li.logs .aanpassing {
	width: 150px;
}

li.logs .log {
	width: 300px;
	height: auto;
	display: table-cell;
}

label {
	float: left;
	clear: both;
	width: 150px;
	margin-top: 5px;
	margin-left: 12px;
}

label.factregel {
	width: 290px;
	margin-left: 35px;
	margin-bottom: 6px;
	font-style: italic;
}

input,
select {
	float: left;
	margin-right: 12px;
	font-family: 'Fira Sans';
	font-size: 13px;
}

textarea {
	font-family: 'Fira Sans';
	font-size: 13px;
	line-height: 18px;
}

form#factuur input[type=text] {
	text-align: right;
}

.label2 {
	float: left;
	width: 150px;
	padding-top: 6px;
	padding-left: 40px;
}

.label3 {
	float: left;
	width: 50px;
	padding-top: 6px;
	padding-left: 12px;
}

.invoer3 {
	width: 250px;
	float: left;
}

.veld2,
.veld1 {
	height: 24px;
	padding-top: 6px;
	font-family: 'Fira Sans', Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;
	width: auto;
}

.veld1 .invoer {
	float: left;
}

.invoer2 {
	padding-top: 3px;
	width: auto;
	float: left;
}

.knop {
	font-size: 13px;
	line-height: 14px;
	/*color:#777777;*/
	color: #9a9a9a;
	width: auto;
	margin-top: 3px;
	margin-left: -2px;
	-moz-border-radius: 8px 8px 0px 0px;
	-webkit-border-radius: 8px 8px 0px 0px;
	border-radius: 8px 8px 0px 0px;
	height: 19px;
	padding-top: 6px;
	padding-left: 10px;
	padding-right: 10px;
	float: left;
	background-color: #eaeaea;
	border-top: 2px solid #aeaeae;
	border-left: 2px solid #aeaeae;
	border-bottom: 0px;
	border-right: 0px;
	border-top-style: ridge;
	border-left-style: ridge;
	text-align: center;
	cursor: pointer;
}

.knopaktief {
	margin-top: 0px;
	height: 20px;
	background-color: #cccccc;
	border: 0px none;
	padding-top: 10px;
	padding-right: 12px;
	color: #000000;
}

.knop1 {
	margin-left: 0px;
}

.next {
	margin-left: 0px;
	border-left: 0px none;
}

.last {
	padding-left: 0px;
	padding-right: 0px;
	height: 15px;
	margin-top: 7px;
}

.knopadmin {
	float: right;
	margin-right: 2px;
}

.knopadmin.knopaktief {
	margin-right: 0;
}

.knoploguit {
	float: right;
	background-color: #ff9a9a;
	color: #b95454;
	border-right: 2px solid #aeaeae;
	border-right-style: ridge;
	margin-left: -2px;
}

.knophelp {
	width: 70px;
	height: 19px;
	padding-top: 8px;
	float: right;
	background-color: #ffffd9;
	border: solid #bbbbbb;
	border-width: 2px 0 0px 2px;
	border-top-style: ridge;
	text-align: center;
}

.knopover {
	color: #000000;
}

.label {
	float: left;
	width: 140px;
	padding-top: 6px;
	padding-left: 20px;
	padding-bottom: 6px;
}

.label1 {
	float: left;
	width: 150px;
	padding-top: 6px;
	padding-left: 200px;
}

.invoer {
	padding-top: 3px;
}

.veld {
	height: 24px;
	padding-top: 6px;
	font-family: 'Fira Sans', Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	width: auto;
	float: left;
	padding-left: 3px;
}

.veld3 {
	height: 135px;
	font-family: 'Fira Sans', Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	width: 700px;
}

.nodisplay {
	display: none;
}

div#pos_checkbox div {
	margin-top: 8px;
}

div#pos_checkbox div span {
	line-height: 21px;
	float: left;
	width: 160px;
}

div#pos_checkbox div span input {
	width: 65px;
}

ul#add {
	display: inline-block;
	padding: 0;
	font-size: 13px;
	margin-left: 20px;
}

#menu ul li a,
#menu ul li.aktief,
ul#add li a,
ul#add li.aktief,
ul li.periodeknop a,
a.afronden,
a.openen,
a.item_tvg,
a.map_tvg,
a.opm_tvg {
	display: block;
	height: auto;
	width: 134px;
	line-height: 13px;
	padding: 3px 0 5px 8px;
	color: #333333;
	/*background-color:#eaeaea;*/
	background: #d6d6d6 url(images/transparant.png) top repeat-x;
	border: 1px solid #9a9a9a;
	font-family: 'Fira Sans', Verdana, Arial, sans-serif;
	/*	font-size: 1em; */
	text-decoration: none;
	-moz-border-radius: 0px 8px 0px 8px;
	-webkit-border-radius: 0px 8px 0px 8px;
	border-radius: 0px 8px 0px 8px;
	margin-bottom: 8px;
}

ul li.periodeknop a,
a.afronden,
a.openen,
a.item_tvg,
a.map_tvg,
a.opm_tvg {
	float: left;
	font-size: 13px;
	line-height: 15px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	margin-bottom: 0px;
	margin-right: 15px;
	width: auto;
	padding: 4px 8px;
}

a.item_tvg,
a.opm_tvg,
a.map_tvg {
	cursor: pointer;
}

ul li.periodeknop.last {
	clear: both;
}

#menu ul li.aktief,
#menu ul li a:hover,
ul#add li a:hover,
ul li.periodeknop a:hover,
a.afronden:hover,
a.openen:hover,
a.item_tvg:hover,
a.map_tvg:hover,
a.opm_tvg:hover {
	color: #000000;
	/*background-color:#65a0ba;*/
	background: url("images/transparant.png") repeat-x scroll center center #46B51B;
	background: url("images/transparant.png") repeat-x scroll center center #5ba4cf;

}

#menu ul li a.submenu,
#menu ul li.submenu {
	margin-left: 14px;
}

.knopnieuw {
	margin-bottom: 10px;
}

.menulink.user {
	color: #000;
}

.label1.clear form {
	padding-bottom: 6px;
}

/* Z-index of #mask must lower than #boxes .window */
#mask {
	position: absolute;
	z-index: 9000;
	background-color: #686868;
	display: none;
	top: 0;
	left: 0;
}

#boxes {
	position: absolute;
	top: -1px;
	left: 0;
}

#boxes .window {
	position: absolute;
	width: 440px;
	height: 200px;
	display: none;
	z-index: 9999;
	padding: 20px;
}


/* Customize your modal window here, you can add background image too */
#boxes .box {
	width: 375px;
	height: auto;
	padding-bottom: 40px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	background: #ffffff url(images/cmstar.png) no-repeat;
	background-position: left bottom;
	border: 2px solid #4f4f4f;
}

#boxes .box form {
	margin-top: 10px;
	margin-left: 18px;
}

#boxes .box input[type=text],
form#user input[type=text] {
	width: 150px;
}

#boxes .box select[name="parent"] {
	width: 200px;
}

#boxes .box .veld {
	width: auto;
}

.even {
	background-color: #eaeaea;
}

.oneven {}

.vet {
	font-weight: 500;
}

.clear {
	clear: both;
}

.paginas ul#planner li ul {
	margin-left: 170px;
}

.paginas ul#planner {
	width: 1010px;
	background-image: url(../images/planoverzicht2.png);
}

.paginas #overzicht {
	width: 1020px;
}

.paginas ul#planner li#weken {
	padding-left: 189px;
}

form#factform {
	padding: 12px 0 0 12px;
}

a.exceldownload {
	display: inline-block;
	width: auto;
	padding: 3px 8px;
	border: 1px outset #f0f0f0;
	text-align: center;
	text-decoration: none;
	color: #000;
	background-color: gold;
}

body#facturatiebody #inhoud {
	max-width: 100%;
	width: 100%;
}

ul.facturatiemaand {
	width: 100%;
	box-sizing: border-box;
}

ul.facturatiemaand>li {
	padding: 20px 10px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: flex-start;
	justify-content: space-between;
	align-items: flex-start;
}

ul.facturatiemaand>li.top>span {
	font-weight: 500;
}

ul.facturatiemaand>li>span,
span.regels ul li span {
	width: 110px;
	display: inline-block;
	vertical-align: top;
}

ul.facturatiemaand li span.bedrijf,
ul.facturatiemaand li span.campnaam,
ul.facturatiemaand li span.factomschrijving {
	width: 210px;
}

ul.facturatiemaand>li>span.regels {
	width: 480px;
}

span.regels ul li span.factomschrijving {
	width: 210px;
}

span.factomschrijving strong {
	background-color: #ffe500;
	padding: 2px;
}

span.regels ul li span.factcode {}

ul.facturatiemaand li span.campnaam a {
	color: #000;
}

ul.facturatiemaand li span.factcode {
	width: 50px;
}

ul.facturatiemaand li span.deb {
	width: 80px;
}


ul.facturatiemaand li span.bijzonderheden,
ul.facturatiemaand li span.contactpers {
	width: 230px;
}

ul.facturatiemaand li span.factbedrag {
	text-align: right;
}

ul.facturatiemaand li span.korting {
	text-align: center;
}

#inhoud ul.codes {
	width: 100%;
	display: inline-block;
	padding: 0;
}

#inhoud ul.codes li {
	padding-bottom: 8px;
}

/*Confirm box*/
#popup_container {
	font-size: 12px;
	min-width: 300px;
	/* Dialog will be no smaller than this */
	max-width: 600px;
	/* Dialog will wrap after this width */
	background: #FFF;
	border: 1px solid #868686;
	color: #000;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
}

#popup_title {
	text-align: center;
	height: 23px;
	color: #000;
	background: #47829c url(images/transparant.png) top repeat-x;
	border-bottom: solid 1px #1f5a74;
	cursor: default;
	padding-top: 2px;
	-moz-border-radius: 8px 8px 0 0;
	-webkit-border-radius: 8px 8px 0 0;
	border-radius: 8px 8px 0 0;
}

#popup_content {
	background: 16px 16px no-repeat url(images/info.gif);
	padding: 1em 1.75em;
	margin: 0em;
}

#popup_content.alert {
	background-image: url(images/info.gif);
}

#popup_content.confirm {
	background-image: url(images/important.gif);
}

#popup_content.prompt {
	background-image: url(images/help.gif);
}

#popup_message {
	padding-left: 48px;
}

#popup_panel {
	text-align: center;
	margin: 1em 0em 0em 1em;
}

#popup_prompt {
	margin: .5em 0em;
}

/*Einde Confirm box*/

#todo,
#done {
	clear: both;
	margin-top: 30px;
}

#done {
	color: #808080;
	margin-left: 80px;
}

table#todo td,
table#done td {
	padding: 7px;
	line-height: 20px;
}

table#todo td input,
table#done td input {
	margin: 0;
}

td.omschr div {
	font-size: 13px;
	font-style: normal;
}

td.omschr div a {
	color: #000;
	text-decoration: none;
}

td.omschr {
	font-size: 12px;
	font-style: italic;
}

/** Tooltip **/

.tooltip {
	/*	border-bottom: 1px dotted #000000; color: #000000; outline: none;*/
	/*	cursor: help; */
	text-decoration: none;
	position: relative;
}

.tooltip span.info {
	border-radius: 3px 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.2);
	position: absolute;
	right: auto;
	left: 300px;
	top: 10px;
	z-index: 99;
	margin-left: -999em;
	position: absolute;
	background: #b8d7ead9;
	border: 1px solid #4eceff;
	padding: 4px 8px;
	line-height: 17px;
}

.project.tooltip:hover span.info {
	margin-left: 0;
	max-width: 350px;
	transition-delay: 0.8s;
}

.item.tooltip span.info {
	display: none;
}

.item.aan.tooltip span.info {
	display: block;
}

.item.tooltip:hover span.info {
	margin-left: 0;
	left: auto;
	right: 215px;
	max-width: 260px;
}

.tooltip:hover img {
	border: 0;
	margin: -10px 0 0 -55px;
	float: left;
	position: absolute;
}

.tooltip:hover em {
	font-size: 14px;
	font-weight: 500;
	display: block;
	padding: 1px 0;
	font-style: normal;
}

#inhoud #projectitems hr {
	margin: 10px 12px 20px;
}

.aantalitems span {
	display: inline-block;
	margin-left: 20px;
	margin-bottom: 6px;
}

#inhoud ul.itemsorter:not(#map_0) {
	padding: 0px;
	border: 1px solid #aaa;
	margin: -1px 20px 15px;
	background-color: #e7e7e7;
}

#inhoud ul.itemsorter:not(#map_0) li.item {
	display: none;
}

#inhoud ul.itemsorter.zichtbaar:not(#map_0) li.item {
	display: block;
}

#inhoud ul.itemsorter:not(#map_0) li.aantalitems {
	display: block;
}

#inhoud ul.itemsorter:not(#map_0) li.aantalitems span {
	cursor: pointer;
	color: #5e6c84;
}

#inhoud ul.itemsorter.zichtbaar:not(#map_0) li.aantalitems {
	display: none;
}

#inhoud ul#map_0 {
	border-top: none;
}

#inhoud #labeltabmenu {
	padding: 0;
}

#labeltabmenu li {
	width: auto;
	display: inline-block;
	margin-right: -1px;
}

#labeltabmenu li a {
	display: inline-block;
	border: 1px solid #9a9a9a;
	padding: .6em 1.8em;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	background-color: #bbbbbb;
	text-decoration: none;
	color: #000;
}

#labeltabmenu li a.active {
	background-color: #e8e8e8;
	border-color: #e8e8e8;
}

.labeltabdiv {
	display: none;
	border: 1px solid #e8e8e8;
	background-color: #e8e8e8;
}

#label1.labeltabdiv {
	display: block;
}

.kwrij {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: flex-start;
	justify-content: flex-start;
}

.kwrij:first-of-type {
	font-weight: 600;
}

.kwrij span {
	margin-left: 90px;
	text-align: right;
	width: 60px;
	box-sizing: border-box;
	padding: 4px 0;
}

.kwrij span:first-of-type {
	margin-left: 0;
}