.kop.form-rij {
	display: none;
}

.bewerk-modus .update-laatst-gezien {
	display: block;
}
.update-laatst-gezien {
	font-size: 10px;
	height: 29px;
	display: none;
}



/* wrap om input en button heen indien beide in form-vel cq bij laatst gezien */
.cel-vervanger {
	display: flex;
	flex-direction: row;
}

input,
textarea {
	border-radius: 0;
	padding: 3px 8px;
	line-height: 20px;
}

input.pers-input,
textarea.pers-input {
	display: none;
}
.pers-lezen {
	display: block;
}
.pers-lezen:hover {
	position: relative;
}
.pers-lezen::after {
	transition: 0.1s linear 0.05s;
	opacity: 0;
	content: attr(data-naam);
	font-size: 0.66em;
	margin-left: 0.33em;
	display: inline-block;
	position: relative;
	top: -1px;
	left: 5px;
	text-transform: lowercase;
}
.pers-lezen:hover::after {
	transition: 0.2s linear 2s;
	opacity: 0.7;
}

/*als input leeg, dan print naam in pers-lezen*/
.pers-input.geen-data + .pers-lezen::before {
	content: attr(data-naam);
	opacity: 0.4;
}
.bewerk-modus input.pers-input,
.bewerk-modus textarea.pers-input {
	display: block;
}
.bewerk-modus .cel-aantekening textarea {
	font-size: .75em;
	font-variant: normal;	
	height: 200px;
	max-height: 50vh;
}
.bewerk-modus .pers-lezen {
	display: none;
}

.form-rij.bewerk-modus {
	border-left: 15px solid #4ebcde;
	min-width: 540px;
	max-width: 90vw;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: white !important;
	background: none !important;
			background-color: rgba(0, 0, 0, 0);
	background-color: white !important;
	z-index: 10;
}

input.pers-input,
textarea.pers-input {
	border: none;
	background-color: transparent;
	font-family: "Segoe UI";
	font-variant: small-caps;
	font-weight: 600;
}
.pers-lezen {
	font-family: "Segoe UI";
	font-variant: small-caps;
	font-weight: 600;
	line-height: 0.8em;
}
.pers-lezen__aantekening {
	font-variant: normal;
	font-weight: 400;
	margin-top: 5px;
	font-size: .75em;
	line-height: .9em;
	max-height: 3.7em;
	overflow: hidden;

}

form.crm-formulier {
	padding: 20px;
	padding-right: 20px;
	min-width: calc(100% - 65px);
}

form.crm-formulier {
	/* background-color: #e9e8ec; */
}

.form-tabel {
	border-spacing: 5px;
	margin: 0 -10px;
	display: flex;
	flex-wrap: wrap;
}

.form-rij {
	width: 270px;
	padding: 5px;
	box-shadow: -1px 2px 3px #999;
	background-color: rgba(255, 255, 230, 0.04);
	display: flex;
	flex-wrap: wrap;
	margin: 0 10px 20px;
	position: relative;
	background-color: #f7f7f7;
	justify-content: space-between;
	border-left: 5px solid #353535;
	order: 1;
	flex-grow: 1;
	background: linear-gradient(
		65deg,    
		#d1947c70,
		#c0242477
	); /* wordt gecorrigeerd naar random in js*/
	font-size: 1rem;
}
.form-rijen-lijst {
	margin-bottom: -20px; /* correctie voor rijen */
}
/* .form-tabel textarea {
	min-width: 330px;
} */
.form-tabel textarea[style]:focus {
	max-height: none;
}
.beeindig-bewerken-cel, 
.beeindig-bewerken-multi,
.start-bewerken-cel,
.rij-in-handmatige-selectie,
.transfer-cel {
	width: 28px;
	position: absolute;
	bottom: 0;
	right: 0px;
	text-align: center;
	font-weight: bold;
	background-color: #4ebcde;
	background-position: center center;
	background-repeat: no-repeat;
}

.beeindig-bewerken-cel,
.beeindig-bewerken-multi {
	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0Ij48cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+PHBhdGggZmlsbD0nd2hpdGUnIGQ9Ik0xOCA3bC0xLjQxLTEuNDEtNi4zNCA2LjM0IDEuNDEgMS40MUwxOCA3em00LjI0LTEuNDFMMTEuNjYgMTYuMTcgNy40OCAxMmwtMS40MSAxLjQxTDExLjY2IDE5bDEyLTEyLTEuNDItMS40MXpNLjQxIDEzLjQxTDYgMTlsMS40MS0xLjQxTDEuODMgMTIgLjQxIDEzLjQxeiIvPjwvc3ZnPgoK);	
}
.beeindig-bewerken-cel, 
.transfer-cel {
	display: none;
}
.beeindig-bewerken-cel:hover,
.start-bewerken-cel:hover,
.beeindig-bewerken-multi:hover {
	background-color: #4ebcde;
  filter: brightness(110%)
}
.transfer-cel {
	bottom: 70px;
	background-color: rgb(75, 75, 221);
}
.transfer-cel:hover {
	background-color: rgb(42, 42, 214);
}
.start-bewerken-cel {
	display: block;
	/* background-image: url("/img/account-edit.png"); zie head*/
	background-size: 25px;
}

.cel-labels {
	position: absolute;
	bottom: 35px;
	right: 0;
	background-color: #211b1b;
}
.persoon-label {
	width: 28px;
	height: 30px;
	display: block;
	background-position: center;
	background-size: 20px 20px;
	background-repeat: no-repeat;
}

.rij-in-handmatige-selectie {
	display: none;
	background: transparent;
	/* background-image: url("/img/select-group.png"); zie head*/
	background-size: 25px;
	background-position: center;
	background-color: rgba(0,0,0,0.3);	
	background-repeat: no-repeat;
}

.rij-in-handmatige-selectie:hover {
	background-color: rgba(0,0,0,0.5);	
	cursor: pointer
}

.bewerk-modus .beeindig-bewerken-cel {
	display: block;
}
.bewerk-modus .transfer-cel {
	display: block;
}
.bewerk-modus .start-bewerken-cel {
	display: none;
}

.was-in-bewerk-modus {
	order: 0;
	border-left: 20px solid #60c360;
}
[data-handmatige-selectie] .beeindig-bewerken-cel ,
[data-handmatige-selectie] .start-bewerken-cel {
	display: none;
}
[data-handmatige-selectie] .rij-in-handmatige-selectie{
	display: block;
}
[data-handmatige-selectie] .form-rij {
	opacity: 0.5;
}
[data-handmatige-selectie] .form-rij.in-handmatige-selectie {
	opacity: 1;
}

[data-multi-bewerking] .form-rij {
	opacity: .5;
}
[data-multi-bewerking] .form-rij.multi-rij {
	opacity: 1;
	margin-right: 0;
	width: calc(100% - 40px);
	height: calc(100vh - 40px);
	font-size: 1.5rem;
}
.multi-rij-buiten {
	flex-basis: 100%;
}
.multi-rij-uitleg {
	padding: 20px;
	margin: 10px;
	background-color: #f5f5f5;
	font-size: 1rem;	
	width:100%;
}
.form-rij-tekst {
	max-width:65ch
}
.form-rij-lijst {
	padding-left: 15px;
	font-size: .66rem;
	columns: 6;
}

.rij-verwijderen {
	width: 28px;
	position: absolute;
	bottom: 35px;
	right: 0;
	text-align: center;
	font-weight: bold;
	background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjI0cHgiIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAwIDQzOC41MjkgNDM4LjUyOSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDM4LjUyOSA0MzguNTI5OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTQxNy42ODksNzUuNjU0Yy0xLjcxMS0xLjcwOS0zLjkwMS0yLjU2OC02LjU2My0yLjU2OGgtODguMjI0TDMwMi45MTcsMjUuNDFjLTIuODU0LTcuMDQ0LTcuOTk0LTEzLjA0LTE1LjQxMy0xNy45ODkgICAgQzI4MC4wNzgsMi40NzMsMjcyLjU1NiwwLDI2NC45NDUsMGgtOTEuMzYzYy03LjYxMSwwLTE1LjEzMSwyLjQ3My0yMi41NTQsNy40MjFjLTcuNDI0LDQuOTQ5LTEyLjU2MywxMC45NDQtMTUuNDE5LDE3Ljk4OSAgICBsLTE5Ljk4NSw0Ny42NzZoLTg4LjIyYy0yLjY2NywwLTQuODUzLDAuODU5LTYuNTY3LDIuNTY4Yy0xLjcwOSwxLjcxMy0yLjU2OCwzLjkwMy0yLjU2OCw2LjU2N3YxOC4yNzQgICAgYzAsMi42NjQsMC44NTUsNC44NTQsMi41NjgsNi41NjRjMS43MTQsMS43MTIsMy45MDQsMi41NjgsNi41NjcsMi41NjhoMjcuNDA2djI3MS44YzAsMTUuODAzLDQuNDczLDI5LjI2NiwxMy40MTgsNDAuMzk4ICAgIGM4Ljk0NywxMS4xMzksMTkuNzAxLDE2LjcwMywzMi4yNjQsMTYuNzAzaDIzNy41NDJjMTIuNTY2LDAsMjMuMzE5LTUuNzU2LDMyLjI2NS0xNy4yNjhjOC45NDUtMTEuNTIsMTMuNDE1LTI1LjE3NCwxMy40MTUtNDAuOTcxICAgIFYxMDkuNjI3aDI3LjQxMWMyLjY2MiwwLDQuODUzLTAuODU2LDYuNTYzLTIuNTY4YzEuNzA4LTEuNzA5LDIuNTctMy45LDIuNTctNi41NjRWODIuMjIxICAgIEM0MjAuMjYsNzkuNTU3LDQxOS4zOTcsNzcuMzY3LDQxNy42ODksNzUuNjU0eiBNMTY5LjMwMSwzOS42NzhjMS4zMzEtMS43MTIsMi45NS0yLjc2Miw0Ljg1My0zLjE0aDkwLjUwNCAgICBjMS45MDMsMC4zODEsMy41MjUsMS40Myw0Ljg1NCwzLjE0bDEzLjcwOSwzMy40MDRIMTU1LjMxMUwxNjkuMzAxLDM5LjY3OHogTTM0Ny4xNzMsMzgwLjI5MWMwLDQuMTg2LTAuNjY0LDguMDQyLTEuOTk5LDExLjU2MSAgICBjLTEuMzM0LDMuNTE4LTIuNzE3LDYuMDg4LTQuMTQxLDcuNzA2Yy0xLjQzMSwxLjYyMi0yLjQyMywyLjQyNy0yLjk5OCwyLjQyN0gxMDAuNDkzYy0wLjU3MSwwLTEuNTY1LTAuODA1LTIuOTk2LTIuNDI3ICAgIGMtMS40MjktMS42MTgtMi44MS00LjE4OC00LjE0My03LjcwNmMtMS4zMzEtMy41MTktMS45OTctNy4zNzktMS45OTctMTEuNTYxVjEwOS42MjdoMjU1LjgxNVYzODAuMjkxeiIgZmlsbD0iI0ZGRkZGRiIvPgoJCTxwYXRoIGQ9Ik0xMzcuMDQsMzQ3LjE3MmgxOC4yNzFjMi42NjcsMCw0Ljg1OC0wLjg1NSw2LjU2Ny0yLjU2N2MxLjcwOS0xLjcxOCwyLjU2OC0zLjkwMSwyLjU2OC02LjU3VjE3My41ODEgICAgYzAtMi42NjMtMC44NTktNC44NTMtMi41NjgtNi41NjdjLTEuNzE0LTEuNzA5LTMuODk5LTIuNTY1LTYuNTY3LTIuNTY1SDEzNy4wNGMtMi42NjcsMC00Ljg1NCwwLjg1NS02LjU2NywyLjU2NSAgICBjLTEuNzExLDEuNzE0LTIuNTY4LDMuOTA0LTIuNTY4LDYuNTY3djE2NC40NTRjMCwyLjY2OSwwLjg1NCw0Ljg1MywyLjU2OCw2LjU3QzEzMi4xODYsMzQ2LjMxNiwxMzQuMzczLDM0Ny4xNzIsMTM3LjA0LDM0Ny4xNzJ6IiBmaWxsPSIjRkZGRkZGIi8+CgkJPHBhdGggZD0iTTIxMC4xMjksMzQ3LjE3MmgxOC4yNzFjMi42NjYsMCw0Ljg1Ni0wLjg1NSw2LjU2NC0yLjU2N2MxLjcxOC0xLjcxOCwyLjU2OS0zLjkwMSwyLjU2OS02LjU3VjE3My41ODEgICAgYzAtMi42NjMtMC44NTItNC44NTMtMi41NjktNi41NjdjLTEuNzA4LTEuNzA5LTMuODk4LTIuNTY1LTYuNTY0LTIuNTY1aC0xOC4yNzFjLTIuNjY0LDAtNC44NTQsMC44NTUtNi41NjcsMi41NjUgICAgYy0xLjcxNCwxLjcxNC0yLjU2OCwzLjkwNC0yLjU2OCw2LjU2N3YxNjQuNDU0YzAsMi42NjksMC44NTQsNC44NTMsMi41NjgsNi41N0MyMDUuMjc0LDM0Ni4zMTYsMjA3LjQ2NSwzNDcuMTcyLDIxMC4xMjksMzQ3LjE3MnogICAgIiBmaWxsPSIjRkZGRkZGIi8+CgkJPHBhdGggZD0iTTI4My4yMiwzNDcuMTcyaDE4LjI2OGMyLjY2OSwwLDQuODU5LTAuODU1LDYuNTctMi41NjdjMS43MTEtMS43MTgsMi41NjItMy45MDEsMi41NjItNi41N1YxNzMuNTgxICAgIGMwLTIuNjYzLTAuODUyLTQuODUzLTIuNTYyLTYuNTY3Yy0xLjcxMS0xLjcwOS0zLjkwMS0yLjU2NS02LjU3LTIuNTY1SDI4My4yMmMtMi42NywwLTQuODUzLDAuODU1LTYuNTcxLDIuNTY1ICAgIGMtMS43MTEsMS43MTQtMi41NjYsMy45MDQtMi41NjYsNi41Njd2MTY0LjQ1NGMwLDIuNjY5LDAuODU1LDQuODUzLDIuNTY2LDYuNTdDMjc4LjM2NywzNDYuMzE2LDI4MC41NSwzNDcuMTcyLDI4My4yMiwzNDcuMTcyeiIgZmlsbD0iI0ZGRkZGRiIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=);
	background-size: 20px 20px;
	background-position: center center;
	background-repeat: no-repeat;
	height: 35px;
}

/** alleen verwijderen in bewerk modus */
div.rij-verwijderen {
	display: none;
}
.bewerk-modus div.rij-verwijderen {
	display: inline-block;
}


.pers-input {
	width: 100%;
}

.cel-naam {
	width: 100%;
}

.form-cel:not(.rij-verwijderen) {
	flex-basis: 50%;
}
.form-cel.cel-naam {
	/* flex-basis: 70%; */
}
.form-cel.cel-naam {
	font-size: 26px;
	font-weight: bold;
}
.form-cel.cel-groep {
	/* flex-basis: 20%; 
	position: relative;
	left: -10%; */
}
.multi-rij .form-cel.cel-groep {
	flex-basis: 90%;
	position: relative;
	left: auto;
}
.form-cel.cel-groep .pers-input {
	height: 100%;
}
.form-cel.cel-aantekening {
	flex-basis: calc(100% - 30px);
	overflow-x:hidden;
}


/** VIEW STIJLEN **/
.crm-formulier[data-form-stijl="lijst"] .cel-sector,
.crm-formulier[data-form-stijl="lijst"] .cel-contact,
.crm-formulier[data-form-stijl="lijst"] .cel-email,
.crm-formulier[data-form-stijl="lijst"] .cel-telefoon,
.crm-formulier[data-form-stijl="lijst"] .cel-laatst_gezien,
.crm-formulier[data-form-stijl="lijst"] .cel-aantekening {
	display: none;
}

.crm-formulier[data-form-stijl="blokken"] .cel-sector,
.crm-formulier[data-form-stijl="blokken"] .cel-contact,
.crm-formulier[data-form-stijl="blokken"] .cel-woonplaats,
.crm-formulier[data-form-stijl="blokken"] .cel-aantekening {
	display: none;
}

/** nee zelfs nu willen we niet alle aantekeningen zien. */

.crm-formulier[data-form-stijl="blokken"] .cel-aantekening {
	overflow: hidden;
	max-height: 200px;
}
.crm-formulier[data-form-stijl="blokken"] .pers-lezen__aantekening {
	white-space: nowrap;
	text-overflow: ellipsis;
}
.crm-formulier [data-form-stijl="blokken"] .bewerk-modus .cel-aantekening {
	overflow: initial;
	max-height: initial;
}
.crm-formulier[data-form-stijl="blokken"]
	.bewerk-modus
	.pers-lezen__aantekening {
	white-space: initial;
	text-overflow: initial;
}

/** wel altijd in bewerken  en ook in 'uitgebreid'*/
.crm-formulier .bewerk-modus .form-cel {
	display: block;
}

.json-invoer {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	width: calc(100% - 30px);
	margin-top: 10px;
	margin-left: 5px;
}
.json-invoer-element {
	flex-basis: calc(50% - 10px);
	font-family: "Segoe UI";
	font-variant: small-caps;
	font-weight: 600;
	color: #333;	
	line-height:.9;
	font-size: .75em;
}
.json-invoer-element--label:hover {
	cursor: pointer;
}
.json-invoer-element--textarea {
	border: 1px solid #f5f5f5;
}