/* de 'navigatie' modules zijn klonen van menu nav, en dan wat aangepast. 
de stijling is dus ook éérst nav, daarna de rest als overschrijving, erdoorheen*/

/* dit bestand is een verwarring in samenspan met controls.css vanwege... dingen die eerst hier dan daar etc. gebouwd worden en nu staat het over al. */

.crm-nav__samen-wrapper {
	position: relative;
	width: 65px;
}

/* #region menu */
/* lomp de uitsteek eraf hakken*/
.crm-nav__wrapper {
	/* padding-left: 60px; */
	/* overflow-x: hidden; */
	/* position: relative; */
}

.crm-nav__button-groep {
	position: sticky;
	top: 20px;
}

.crm-nav {
	position: fixed;
	top: 0;
	right: -570px;
	width: 570px;
	font-size: 30px;
	transition: 0.2s cubic-bezier(0.95, 0.42, 0.61, 1.57) 0.2s;
	padding: 20px;
	transform: translateX(0);
	z-index: 10;
	cursor: move;
}

.crm-nav[data-nav-open],
.crm-nav.is-gesleept {
	z-index: 11;
	transform: translateX(-630px);
	/* transform: scale(0.5) translateX(-250px) translateY(-50%); */
}



.crm-nav.is-gesleept {
	transition-property: right, top;
	transition-duration: 0s, 0s;
}
.crm-nav.op-zijn-plek-gezet {
	width: auto;
	min-width: 330px;
	transform: translateX(-630px) scale(0.66);
}

.crm-nav select,
.crm-nav button,
.crm-nav option {
	text-transform: uppercase;
	font-weight: 800;
}
.crm-nav .labels-als-button {
	text-transform: uppercase;
	font-weight: 800;
}

.labels-als-button,
.actieknoppen {
	position: relative;
	background-color: #877;
}
.labels-als-button:hover,
.actieknoppen:hover {
	background-color: rgb(98, 86, 86);
}

/* in filters */
.labels-als-button label {
	display: block;
	width: calc(100% + 20px);
	height: calc(100% + 20px);
	margin: -10px;
}
/* in acties */
.labels-als-button label.lijst-namen-label {
	width: calc(100% + 20px);
	height: calc(100% + 20px);
	margin: -10px;
	margin-top: -10px;
	margin-right: -10px;
	margin-left: -10px;
	margin-top: -10px;
	margin-right: -10px;
	margin-left: -10px;
	margin-top: -10px;
	padding-bottom: 10px;
	font-size: 0.5em;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	letter-spacing: -1px;
	margin-left: -9px;
}
.labels-als-button input {
	display: none;
}

.labels-als-button label::after {
	display: block;
	margin-top: 18px;
	font-weight: 800;
}

.labels-als-button input:checked + label::after {
	display: block;
}
.labels-als-button label.filters-samen-label::after {
	content: "filters apart";
}

.labels-als-button input:checked + label.filters-samen-label::after {
	content: "filters samen";
}
.labels-als-button label.lijst-namen-label::after {
	content: "lijst z. namen";
}

.labels-als-button input:checked + label.lijst-namen-label::after {
	content: "lijst met namen";
}

.crm-nav--klaar {
	/* opacity: 1; na berekeningen */
}


.crm-nav__inner {
	position: relative;
	box-shadow: 6px 2px 6px #888;
	background-color: #f2f2f2;
	display: flex;
	flex-direction: row;
}
.crm-nav__lijst {
	margin: 0;
	padding: 0;
	list-style-type: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-wrap: wrap;
	justify-content: flex-end;
	padding: 20px;
}

.crm-nav__icon {
	min-width: 45px;
	display: inline-block;
	text-align: center;
	vertical-align: middle;
}

.crm-nav__stuk {
	padding: 7.5px 0;
}
.crm-nav__inhoud {
}

.crm-nav__inhoud--filters,
.crm-nav__inhoud--acties,
.crm-nav__inhoud--config {
	padding: 20px;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: flex-end;
	flex-grow: 1;
}

.crm-nav__angled-knop {
	background-color: #c02424;
	color: white;
	letter-spacing: 2.5px;
	z-index: 1;
	line-height: 1;
	font-weight: bold;
	text-transform: uppercase;
	transition: 0.1s ease-in-out 0.4s;
	width: 80px;
	min-width: 80px;
	flex-grow: 0;
	padding: 15px 0;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	flex-wrap: nowrap;
	position: relative;
	right: 0px;
	margin-top: 5px;
	box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
}

.crm-nav__button-turned-letters {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	font-family: "Segoe UI";
}
.crm-nav__button-letter {
	display: block;
	transform: rotate(90deg);
}
.crm-nav__button-letter ~ .crm-nav__button-letter {
	margin-bottom: -2px;
	margin-top: -2px;
}
.crm-nav__button-letter.crm-nav__button-letter--m {
}
.crm-nav__button-letter.crm-nav__button-letter--e {
	margin-top: -3px;
	margin-bottom: -4px;
}
.crm-nav__button-letter.crm-nav__button-letter--n {
}
.crm-nav__button-letter.crm-nav__button-letter--u {
	/* margin-top: -4px; */
}
.crm-nav__button-letter.crm-nav__button-letter--f {
}
.crm-nav__button-letter.crm-nav__button-letter--i {
	margin-bottom: -3px;
	margin-top: -7px;
}
.crm-nav__button-letter.crm-nav__button-letter--l {
	margin-bottom: -2px;
	margin-top: -3px;
}
.crm-nav__button-letter.crm-nav__button-letter--t {
	margin-bottom: -2px;
	margin-top: -3px;
}
.crm-nav__button-letter.crm-nav__button-letter--r {
	margin-top: -1px;
}
.crm-nav__button-letter.crm-nav__button-letter--a {
}
.crm-nav__button-letter.crm-nav__button-letter--c {
	margin-bottom: -2px;
	margin-top: -2px;
}
.crm-nav__button-letter.crm-nav__button-letter--s {
	margin-bottom: -2px;
	margin-top: -2px;
}

.crm-nav__link {
	font-weight: bold;
	text-transform: uppercase;
	vertical-align: middle;
	text-decoration: none;
	color: #353535;
	font-size: 0.8em;
}

.crm-nav__link:focus,
.crm-nav__link:hover {
	color: #d73f3f;
}
.crm-nav__link--actief {
	filter: blur(0.25px);
	opacity: 0.65;
}
.crm-nav__link--actief:hover {
	color: #353535;
	cursor: none;
}
.crm-nav__actief-icon {
	font-size: 0.5em;
	vertical-align: middle;
	position: relative;
	top: -4px;
}
.filter-nav-input,
.instelling-nav-input {
	font-size: 0.5em;
	text-align: center;
}
.selectie-ongedaan {
	min-height: 50px;
}
.crm-nav__knop-icon {
	display: inline-block;
	display: none !important;
}
.crm-nav__knop-icon--gesloten {
	transform: rotate(-9deg);
}
.crm-nav__knop-icon--open {
	transform: rotate(10deg);
}
.crm-nav[data-nav-open] .crm-nav__knop-icon--open {
	display: inline-block;
}
.crm-nav__knop-icon--gesloten {
	display: none;
}
.crm-nav[data-nav-open] .crm-nav__knop-icon--gesloten {
	display: none;
}
 
/* #endregion menu */

.crm-nav__tekst { 
	font-size: 0.5em;
	line-height: 0.5em;
} 
 
.actieknoppen {
	font-size: 0.5em;
}

.herladen.verborgen{
	transform: translate(-150%, -50%) ;
}
.herladen {
	text-transform: uppercase;
	background: linear-gradient(135deg, #aCaD9C15 25%, transparent 25%) -50px 0, linear-gradient(225deg, #aCaD9C20 25%, transparent 25%) -50px 0, linear-gradient(315deg, #ECEDDC25 25%, transparent 25%), linear-gradient(45deg, #ECEDDC30 25%, transparent 25%);
			background-color: rgba(0, 0, 0, 0);
			background-position-x: -50px, -50px, 0%, 0%;
			background-position-y: 0px, 0px, 0%, 0%;
			background-size: auto, auto, auto, auto;
	background-size: 8% 120%;
	background-color: #ac2525;
	border: 2px solid #c0242433;
	position: fixed;
	z-index: 1000;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) ;
	background-position: center -48%;
}
.herladen:hover {
	background: linear-gradient(135deg, #aCaD9C55 25%, transparent 25%) -50px 0, linear-gradient(225deg, #aCaD9C20 25%, transparent 25%) -50px 0, linear-gradient(315deg, #ECEDDC25 25%, transparent 25%), linear-gradient(45deg, #ECEDDC30 25%, transparent 25%);
			background-color: rgba(0, 0, 0, 0);
			background-position-x: -50px, -50px, 0%, 0%;
			background-position-y: 0px, 0px, 0%, 0%;
			background-size: auto, auto, auto, auto;	
	background-size: 8% 150%;
}

@media (max-width: 900px) {
.crm-nav[data-nav-open]{
	transform: scale(0.66) translateX(-700px);
}

.crm-nav__angled-knop {
width: 50px;
    min-width: 50px;
padding: 10px 0;
}

}