:root {
	/**** Width ****/
	--dt-container: 1170px;
	--mb-container: 95%;

	/**** Radius ****/
	--btn-rad: 0.3rem;
	--med-rad: 0.7rem;
	--rad: 1.1rem;

	/**** Theme Colours ****/
	--background: var(--lightest);
	--foreground: var(--darker);
	--primary: #169fdb;
	--secondary: #484690;
	--greyscale: #c0c0c0;
	--greyscale-light: #ebebeb;
	--greyscale-accent: #f9f9f9;
	--lighter-table-row: #fff;
	--darker-table-row:#f4f7f9;
	--dark: #555;
	--darker: #333;
	--dark-text: #007B94;
	--light: #f6fbfe;
	--lightest: #fff;
	--darkest: #000;
	
	/**Accents/Hovers **/
	--primary-border: #1f81ac49;
	--primary-accent: #f0faff;
	--secondary-accent: #e0dbf7;
	--table-li-hover: #C9E8FB;
	--primary-lighter: #68ccf1;
	--secondary-lighter: #7d6fc6;


	/**** Standard Colours ****/
	--warn:#9b7e00;
	--error: #f03d3d;
	--info: #008eb9;
	--succes: #009900;
	
	/**** Hover/less vibrant ****/
	--warn-lighter: #ffed9c;
	--error-lighter: #f17f7f;
	--info-lighter: #bff0ff;
	--succes-lighter: #caffca;

	/**** Accent ****/
	--warn-accent: #fff9dc;
	--error-accent: #ffcece;
	--info-accent: #e2f8ff;
	--succes-accent: #e5ffe5;

	/**** effects ****/
	--transition-bg: background-color 0.07s ease;
	--transition-box-shadow: box-shadow 0.07s ease;
	--transition-border: border 0.07s ease;

	--shadow: 1px 1px 1px rgba(0,0,0,.03), -1px 1px 1px rgba(0,0,0,.03), 0 3px 4px rgba(0,0,0,.03);
	--icon-color: invert(50%) sepia(100%) saturate(1700%) hue-rotate(165deg) brightness(81%) contrast(120%);
	--chb-uch-gr: invert(50%) sepia(100%) saturate(70%) hue-rotate(165deg) brightness(81%) contrast(120%);

}

/* 
Dit later verwerken in de pagina's
als een class op de desbetreffende buttons 

class = btn-highlight
*/
input[type='button'][value='Opslaan'],
input[type='button'][value='Doorgaan'],
input[type='button'][value='Tonen'],
input[type='button'][value='Zoeken'],
input[type='button'][value='Verplaatsen'],
input[type='button'][value='Volgorde opslaan'],
input[type='submit'][value='Opslaan'],
input[type='submit'][value='Tonen']{

    background: var(--secondary);

}
input:hover[type='button'][value='Opslaan'],
input:hover[type='button'][value='Doorgaan'],
input:hover[type='button'][value='Tonen'],
input:hover[type='button'][value='Zoeken'],
input:hover[type='button'][value='Verplaatsen'],
input:hover[type='button'][value='Volgorde opslaan'],
input:hover[type='submit'][value='Opslaan'],
input:hover[type='submit'][value='Tonen'] {

    background: var(--secondary-lighter);

}

.btn-highlight {
	background: var(--secondary) !important;
}
	.btn-highlight:hover {
		background: var(--secondary-lighter) !important;
	}

.verwijderButton {
	background-color: #f03d3d !important;
}

/**** Standard styles ****/

body {
	display: none;
	background-color: var(--background) !important;
	color: var(--foreground);
	font-family:Trebuchet, "Trebuchet MS", Tahoma, Arial, sans-serif;
	transition: background-color 500ms, color 500ms
}

h3 {
	color: var(--secondary-lighter);
	font-size:16px;
	font-weight:bold;
	text-transform: uppercase;
}

h3 + .divButtons {
	padding-top:0;
}

/**** Meldingen/Alerts ****/
.alert, .melding, .letop {
	position:fixed;
	bottom:-20px;
	height:auto;
	background:var(--error);
	color:var(--error-lighter);
	width:100%;
	text-align:center;
	padding-top:10px;
	padding-bottom:10px;
	z-index:999;
}

.melding {
	background: #1AC531;
	bottom:0;
}

.letop {
	background: #EC8A23;
	bottom:0;
}
.msg-bottom {
	border-radius: var(--med-rad);
	box-shadow: var(--shadow);
	margin: 0.9rem 0;
	padding: 1.2rem 0.5rem;
	width: var(--dt-container);
	text-align: center;
	position: fixed;
	bottom: 1rem;
	left: 50%;
	transform: translate(-50%, 0);
}
.msg-inline {
	border-radius: var(--med-rad);
	margin: 0.9rem 0;
	padding: 0.5rem;
	text-align: center;
}
	.msg-succes {
		background: var(--succes-accent);
		color: var(--succes);
		border: 0.1rem solid var(--succes-lighter);
	}
	.msg-info {
		background: var(--info-accent);
		color: var(--info);
		border: 0.1rem solid var(--info-lighter);
	}
	.msg-warning {
		background: var(--warn-accent);
		color: var(--warn);
		border: 0.1rem solid var(--warn-lighter);
	}
	.msg-error {
		background: var(--error-accent);
		color: var(--error);
		border: 0.1rem solid var(--error-lighter);
	}

.h3MinderRuimte {
	margin-top:0;
}
.h3ZonderBottom {
	margin-bottom:0 !important;
}

.divForm h3:first-child {
	margin-top:-4px;
}
.divForm h3 {
	color: var(--primary);
}
.divForm h3 a {
	color: var(--secondary-lighter);
}
.divForm h3 a:hover {
	color: var(--secondary);
}

.divForm .divFormHolderInklap {
	margin-top:0;
}

a, a:hover {
	color:var(--txt-color-dark);
}

.container {
	padding: 0;
	margin: 2rem auto;
	width: var(--dt-container);
}

.row {
	margin-left: 0;
	margin-right: 0;
}

#divHeader {
	height:189px;
}

#divHeaderMenu {
	/* width: 65%; */
	padding-right:0;
	text-align:center;
	display: flex;
    justify-content: end;
    -webkit-justify-content: end;
    float: right;
}

#divHeaderMenu span.divHeaderMenuSpan {
	color: var(--lightest);
	background-color: var(--primary);
	border-radius: var(--med-rad);
	padding: 10px;
	margin-left: 15px;
}
#aUitloggen{
	background-color:var(--error);
	color:var(--lightest);
	border-radius: var(--med-rad);
	padding:10px;
	margin-left:15px;
}
#aUitloggen:hover{
	background-color:var(--error-lighter);
	text-decoration:none;
	transition: var(--transition-bg);
}
#divDuikertje img {
	cursor:pointer;
	width:125px;
}

#divHomeMenu {
	background-color:var(--primary);
	color:var(--light);
	border-radius: var(--rad);
	height:56px;
	margin-top:23px;
	padding-left:0;
}

#imgHomeMenu {
	cursor:pointer;
	border-radius: var(--rad) 0 0 var(--rad);
	overflow: hidden;
}

#zoeken {
	border: 1px solid var(--primary);
	border-radius: var(--med-rad);
	background:var(--light);
	background-image:url(../images/search-paars.png);
	background-size:24px;
	background-repeat:no-repeat;
	background-position:calc(100% - 10px) 5px;
	color:var(--secondary);
	float:right;
	height:36px;
	margin:10px -5px 10px 10px;
	padding-left:15px;
	width:283px;
}
#zoeken:focus-visible {
	border:1px solid #aaa9d6;
}

.container-fluid {
	padding-left: 0;
	padding-right: 0;
}

.containerHeader {
	width: var(--dt-container);
	margin: 0 auto;
}

.containerKruimelpad {
	width: var(--dt-container);
	margin: 0 auto;
}

.divMenu {
	margin-top:35px;
}

.divHoofdmenu {
    margin-top:15px;
}

.divMenuknop {
	color:var(--primary);
	cursor:pointer;
	font-weight:bold;
	height:165px;
	padding:22px 7.5px 0px 7.5px;
	margin:7.5px 7.5px 0 7.5px;
	text-transform:uppercase;
	text-align:center;
	border: solid var(--primary-border) 0.1rem;
	border-radius: 1.1rem;
	transition: var(--transition-bg);
	transition: var(--transition-border);
	transition: var(--transition-box-shadow);
}
.divMenuknop:hover {
	background-color:var(--primary-accent);
	box-shadow: var(--shadow);
	border: solid #2eb9f588 0.1rem;
}

.divMenuknop img {
    max-width:64px;
	margin-bottom:10px;
}

#divMededeling {
	padding-top:25px;
}
.divSidebar {
	border-radius: 1.1rem;
	border: solid var(--secondary) 0.1rem;
	overflow: hidden;
	margin: 0 0 25px 0;
	padding: 0 0 1.8rem 0;
}
	.divSidebar h2 {
		color: var(--secondary);
		font-weight: bold;
	}

	#divMededelingIcon {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-around;
	}

	.divMededelingIcon {
		color: var(--primary);
		font-size: 0.9em;
		border: solid #B9E6FB 0.1rem;
		border-radius: var(--med-rad);
		text-align: center;
		margin: 7px;
		padding: 14px;
		width: 42%;
	}

	.divMededelingIcon:hover {
		background: var(--primary-accent);
		box-shadow: var(--shadow);
		cursor: pointer;
	}

	.row::before {
		content: "" !important;
	}

#divMededelingTitel, #divServicedeskTitel, #divDashboardTitel {
	color: var(--secondary);
	font-weight:bold;
	padding:10px 15px;
	text-transform:uppercase;
	font-size: 1.3em;
}

#divServicedeskTekst .divMededelingIcon a {
	font-size: 0.7em !important;
}

.divMededelingTitel {
	font-weight:bold;
	margin-bottom:15px;
}

#divMededelingTekst, #divServicedeskTekst, #divDashboardTekst {
    padding: 0 1.8rem;

}

#divServicedeskTekst {

}

#divMededelingTekst a {
	color:var(--primary);
	margin:15px 0 0 0;
	display:block;
	text-decoration:none;
}

#divDashboardTitel {
    font-weight:bold;
}

#divDashboardTekst {
    background-color:var(--txt-color-light);
    margin-left:-15px;
    margin-right:-15px;
    padding:15px 20px 20px 15px;
}

#divDashboardTekst strong {
	color: var(--primary);
}

#divDashboardTekst ul {
	margin-top: 20px;
    list-style: none;
    padding-left: 0;
}

#divDashboardTekst ul li {
	padding: 3px 0;
}

#divDashboardTekst img {
	float: right;
	cursor: pointer;
}

#divDoelgroep {
	background-color: var(--light);
	border:solid var(--primary-border) 0.1rem;
	border-radius: 1.1rem;
	box-shadow: var(--shadow);
	color:var(--txt-color-dark);
	display:none;
	margin-top:35px;
	padding:10px;
	position:absolute;
	right: 220px;
	top: 20px;
	text-align:left;
	min-width:293px;
	z-index:999;
}

#divDoelgroep .aUitloggen {
	float:right;
}

#divDoelgroep ul {
	margin:0 0 10px 0;
	padding:0;
	list-style:none;
}

#divDoelgroep li {
	cursor:pointer;
	padding: 7px 0 2px 7px;
}

#divDoelgroep li:hover {
	background-color:var(--table-li-hover);
}

#divDoelgroep img {
	margin-right:10px;
	width:12px;
}

#divDoelgroep a {
	color:var(--primary);
	text-decoration:none;
}

/* Zoekresultaat zoekbalk */
#divHeaderZoekResultaat {
	border: solid var(--primary-border) 0.1rem;
	border-top:0;
	border-radius: var(--rad);
	box-shadow: var(--shadow);
	position:absolute;
	background:var(--light);
	color:var(--primary);
	padding:10px 15px 10px 15px;
	display:none;
	margin-right:14px;
	margin-top:-9px;
	right:-5px;
	z-index:999;
}

#divHeaderZoekResultaatUl, .ZoekResultaatMenu ul {
	color:var(--txt-color-dark) !important;
	margin:5px 0 5px 0;
	padding:0;
	list-style:none;
	text-align:left;
}

 .ZoekResultaatMenu ul {
	margin:0.4rem 0 0.8rem 0;
 }

.ZoekResultaatMenu span {
	color: var(--secondary);
	border-bottom: 0.1rem solid var(--secondary-accent);
	display:block;
	font-weight:bold;
	margin-bottom:5px;
	padding:5px;
	width:253px;
}

.ZoekResultaatProgramma {
	cursor:pointer;
	padding-left: 0.6rem;
}
.ZoekResultaatLeerling {
	padding: 0.6rem;
}
.ZoekResultaatLeerlingKnoppen {
	float:right;
}

.ZoekResultaatLeerlingKnoppen img {
	cursor:pointer;
}
	
.ZoekResultaatLeerlingKnop {
	float: left;
	color: var(--lightest);
	margin-left: 5px;
	width: 25px;
	height: 25px;
	font-size: 15px;
}

#divKruimelpad {
	color: var(--primary);
	font-size: 1.9em;
	margin: 2.5rem 0 0 0;
	padding: 9px 10px 10px 42px;
	border-bottom: 0.1rem solid var(--secondary);
	text-transform: uppercase;
}

#divKruimelpad img {
	margin-left:-42px;
	position:absolute;
	bottom: 7px;
	width:27px;
}

/**** Submenu ****/
.divSubmenuTitel {
	font-weight:bold;
	color:var(--primary);
	font-size: 1.3em;
	padding: 0 0 1.1rem 0;
	border-bottom: 0.1rem solid var(--secondary-accent);
}

.divSubmenu {
	margin-bottom: 2rem;
	font-size: 1.1em;
	padding: 1.8rem;
	border: 0.1rem solid var(--secondary);
	border-radius: var(--rad);
}

.divSubmenu .divSubmenuTitel {
	margin-top:40px;
}

.divSubmenu .divSubmenuTitel:first-child {
	margin-top:0;
}

.ulSubmenu {
	list-style:none;
	/*font-weight: 600;*/
	padding:0;
	margin:0;
	
}

.ulSubmenu li {
	cursor:pointer;
	padding:10px 15px;
}

.ulSubmenu li:nth-child(even) {
	/*background-color:#F6F6F6; */
}

.ulSubmenu li:hover {
	background-color:var(--primary-accent);
}

.divMenuContainer {
	padding-left:0;
	padding-right:0;
}
#aDoelgroep{
	padding:10px;
	margin-left: 15px;
	border-radius: 0.7rem;
	background-color: var(--primary);
	color:var(--lightest);
	transition: var(--transition-bg);
}
#aDoelgroep:hover{
	background-color: var(--primary-lighter);
	text-decoration:none;
}

.divLogoIZM {
	width: 35%;
}
#imgLogoIZM {
	cursor:pointer;
	margin-left:0;
	width:240px;
}

.form-inline {
	display:flex;
	min-height:34px;
}

.form-inline label:first-child {
	background-color:var(--primary-accent);
	color:var(--primary);
	font-weight:bold;
	min-height:100%;
	margin-bottom:0;
	margin-right:20px;
	padding:8px 14px;
	position:relative;
	text-transform:uppercase;
	width:250px;
	border-right: 0.1rem solid var(--primary-lighter);
}

.divForm, .h3ExtraRuimte, .divSubmenuHolder, .mt-groot {
	margin-top: 25px;
}

.divForm:first-child {
	padding-left:0;
}

.divForm:last-child {
	padding-right:0;
}

.divFormFull {
	padding-left:0;
	padding-right:0;
}

.divFormFull thead {
	position: sticky;
	top: 0;
	z-index: 1;
}

.form-control {
	-webkit-appearance:none;
	background: var(--light);
	border:1px solid #d2ebf9;
	border-radius: 0.4rem;
	color:var(--txt-color-dark);
	box-shadow:none;
}

.briefMailSelect {
	display: unset !important;
	width: auto !important;
}

.form-inline .form-control {
	height:36px;
	vertical-align:initial;
	width:calc(100% - 270px);
}

.form-inline textarea:not(.textareavrijveld):not(.autosize):not(.fr-code):not(.noautosize) {
    height: 150px !important;
}

.form-inline input[type="radio"] + label, .form-inline input[type="checkbox"] + label, .divOverzichtFilterCheckbox input[type="radio"] + label, .divOverzichtFilterCheckbox input[type="checkbox"] + label {
	height:auto;
	margin-bottom:0;
	margin-right:15px;
	padding:8px 0 0 0;
	position:initial;
}

.form-inline input[type="radio"] + label:last-child, .form-inline input[type="checkbox"] + label:last-child {
    padding-bottom:9px;
}

.form-aanvullend {
	margin-bottom:0 !important;
}

.divOverzichtFilterCheckbox input[type="radio"] + label, .divOverzichtFilterCheckbox input[type="checkbox"] + label {
	float:left;
	padding-top:0;
}

.divOverzichtFilter .divFormInklapHolder, .divFormInklapHolder {
	margin-bottom: 35px;
}

.divFormInklapHolder .divButtons {
	padding-bottom:0;
}
.divFormInklapHolder {
	padding: 1.4rem 0;
}

.divOverzichtFilter {
	margin-bottom:35px;
}

.divOverzichtFilterCheckbox {
	display:inline-block;
}

input[type="checkbox"], input[type="radio"] {
	display:none;
}

input[type="checkbox"] + label, input[type="radio"] + label {
	color:var(--txt-color-dark);
	display:inline-block;
	font-weight:normal;
	text-transform:none;
	white-space:nowrap;
	width:auto;
	padding:0 15px 0 0;
}
/* Checkbox leeg */
input[type="checkbox"] + label span, input[type="radio"] + label span {
	background-image:url('../images/checkbox_uch.svg');
	background-repeat:no-repeat;
	background-position:top left;
	background-size:auto 20px;
	opacity: 0.7;
	cursor:pointer;
	display:inline-block;
	margin-right:10px;
	margin-top:0;
	vertical-align:top;
	height:20px;
	width:20px;
}
/* Checkbox Checked */
input[type="checkbox"]:checked + label span, input[type="radio"]:checked + label span {
	background-image:url('../images/checkbox_ch.svg');
	filter: var(--icon-color);
	opacity: 1;
}
/* Checkbox leeg disabled */
input[type="checkbox"]:disabled + label span, input[type="radio"]:disabled + label span {
	background-image:url('../images/checkbox_uch.svg');
	filter: var(--chb-uch-gr);
	opacity: 0.7;
	cursor: not-allowed;
}
/* Checkbox checked disabled */
input[type="checkbox"]:checked:disabled + label span, input[type="radio"]:checked:disabled + label span {
	background-image: url('../images/checkbox_gr.svg');
	filter: var(--icon-color);
	opacity: 1;
	cursor: not-allowed;
}

.form-group {
	margin-bottom:15px;
}
.form-group label {
	text-align: right !important;
}


/* legenda */
.ppi-legend td {
	padding: 0.7rem;
}

.ppi-legend span {
	width: 2rem;
	height: 2rem;
	display: block;
}


.divCheckboxHolder {
	float:right;
	width:64%;
	padding:8px 10px;
}
.divCheckboxBlock label {
	text-align: left !important;
}

.divButtons {
	padding-top:20px;
	padding-bottom:35px;
}

.divButtonsTop {
	padding-top:0;
}

.divButtonsExtrRuimte {
	padding-top:35px;
}

.divButtonsOnderCheckbox {
	padding-top:14px;
}

.divButtonsExtraRuimte {
	padding-top:25px;
}
.btn {
	margin: 0.7rem;
}

.btn-hl {
	background-color: var(--secondary) !important;
}
.btn-hl:hover {
	background-color: var(--secondary-lighter) !important;
}

.btn-primary {
	background-color:var(--primary);
	border:0;
	border-radius: var(--btn-rad);
	color:var(--lightest);
	cursor:pointer;
	min-width:7.6rem;
	padding:8px 10px;
	text-align:center;
	width:auto;
}
.btn-primary:hover {
	background: var(--primary-lighter);
}
.btn-active, .btn-active:hover {
	background-color: var(--primary) !important;
}
.btn-mini, .btn-mini:hover {
	min-width: 40px;
}

.divButtons .btn-primary, .divVolgordeOpslaan .btn-primary {
}

 .divVolgordeOpslaan .btn-primary:last-child {
	margin-right:0;
 }

#divKruimelpadIcon {
	float:right;
	margin-top:-2px;
}

#divKruimelpadIcon img {
	margin-left:15px;
	margin-right:0;
	position:relative;
	width:26px;
}

.ulinputFormSel {
	list-style: none;
	padding:0;
	margin:0;
}

.ulinputFormSel li {
	padding:10px 15px;
	cursor:pointer;
}

.ulinputFormSel li:nth-child(even) {
	background:var(--light);
}


.ulinputFormSel li, .ulinputFormSel li:nth-child(even) {
	background-image: url('../images/edit.png');
	background-size: 24px;
	background-repeat: no-repeat;
	background-position: calc(100% - 10px) 7px;
}

.ulinputFormSel .liVerwijder, .ulinputFormSel .liVerwijder:nth-child(even) {
	background-image:url('../images/prullenbak.png');
}

.ulinputFormSel .liGeen, .ulinputFormSel .liGeen:nth-child(even) {
	background-image:none;
}

.ulinputFormSel li:hover {
	background-color:var(--table-li-hover);
}
.ulinputFormSel li:active {
	background-color: var(--table-li-active) !important;
}

.modal-dialog {
	top:calc(50% - 117px);
}

.modal-content {
	border-radius: var(--rad) !important;
	box-shadow: var(--shadow);
	-webkit-box-shadow: var(--shadow);
}

#divHomeKruimelpad {
	margin-left:74px;
	position:absolute;
	top:18px;
}

#divHomeKruimelpad a {
	color:var(--lightest);
}

#divHomeKruimelpad a:hover {
	text-decoration:none;
}

.ulOpsomming {
	margin:15px 0 15px 20px;
	padding:0;
}

.ulOpsomming li {
	margin-bottom:15px;
}

.divFormHolderInklap {
	border-radius: 1.1rem;
	overflow: hidden;
	margin: 20px 0 20px 0;
	padding: 0;
}

.divFormHolderHeader {
	background-color:var(--primary);
	color:var(--lightest);
	cursor:pointer;
	font-weight:bold;
	padding:10px 0 10px 10px;
	text-transform:uppercase;

}


.divFormWrapper {
	border-radius: var(--rad);
	overflow: hidden;
	margin-bottom: 0;
}

.divFormHolderHeader img {
	float:right;
	margin-right:10px;
	margin-top:-6px;
	width:32px;
}

.divSelectieContent {
	float:left;
	width:45%;
}

.divSelectieContent .form-control {
	margin-left:0;
	width:100%;
}

.ulSelectie {
	list-style:none;
	margin:0;
	padding:0;
}

.ulSelectie li {
	cursor: pointer;
	background-repeat:no-repeat;
	background-position-y:2px;
	margin-bottom:1px;
	padding:5px 5px 5px 10px;
}

.ulSelectie li:nth-child(even) {
	background: var(--light);
}

.ulSelectie li:hover {
	background: var(--table-li-hover);
}

.divSelectie {
	float:left;
	height:195px;
	overflow:auto;
	width:100%;
}

.divSelectieKnoppen {
	float:left;
	margin-top:90px;
	text-align:center;
	width:10%;
}

.divSelectieKnoppen .btn-primary:first-child {
	margin-bottom:5px;
}

.divSelectieKnoppen .btn-primary {
	margin-right:0;
	min-width:41px !important;
	width:41px !important;
}

.inputZoek {
	background-image: url('../images/searchblue.png');
	background-size: 24px;
	background-repeat: no-repeat;
	background-position: calc(100% - 10px) 5px;
}

.btnConfirm {
	margin-right:15px !important;
}

.form-inline .fr-box {
	width:calc(100% - 270px) !important;
}

.fr-box.fr-basic .fr-element {
	color:var(--txt-color-dark) !important;
}

.divHulp {
	border:1px solid #D7D7D7;
	margin-bottom:35px;
	width:182px;
	padding:6px 10px 4px 12px;
}

table.tabOverzicht {
	word-wrap: break-word;
}

.tabOverzicht + .divHulp {
	margin-top:35px;
}

#tabSignaleringen .form-control {
	display: unset !important;
}

.divHulpKnop {
	cursor:pointer;
	margin-left:-6px;
	text-transform:uppercase;
}

.divHulpKnop span {
	font-weight:bold;
	margin-left:1px;
	margin-top:1px;
}

.divHulpKnop img {
	margin-left:1px;
	margin-top:-1px;
	width:25px;
}
.divHulpContent {
	display:none;
	margin-bottom:10px;
	padding-left:1px;
}

.ulVolgorde {
	margin:35px 0 0 0;
	padding:0;
	list-style:none;
	width:100%;
}

.ulVolgorde li {
	background-color:var(--primary);
	background-image:url('../images/volgorde.png');
	background-repeat:no-repeat;
	background-position:11px 6px;
	color:var(--lightest);
	cursor:pointer;
	margin-bottom:15px;
	padding:8px 5px 8px 47px; 
	border-radius: var(--med-rad);
}

.divAanvullend {
	 float:left;
	 width:50%;
}

.divAanvullend ul, #ulInstructeur {
	padding-left:20px;
}

.divAanvullend li, #ulInstructeu li {
	margin-bottom:7px;
	padding-left:10px;
}

#ulInstructeur .divSelectieHolder {
	margin-left:0;
}

.form-group .divSelectieHolder {
	width:calc(100% - 270px) !important;
}

.tabOverzicht, .tabLijst {
	border-collapse:separate;
	width:100%;
	border-spacing:0;
}

.tabOverzicht.tab-overflow {
	table-layout: fixed;
	width: 100%;
}

.tabOverzicht thead {
	box-sizing: border-box;
}

.tabOverzicht th, .tabLijst th {
	background: var(--lightest);
	border-right:2px solid var(--lightest);
	border-bottom: 0.2rem solid var(--secondary);
	color: var(--primary);
	padding: 10px;
	text-align: left;
	vertical-align: bottom;
}

.tabLijst th {
	vertical-align: middle;
	border-bottom: 2px solid var(--lightest); /* Of maak je niet zo die witte onderkant? :') */
}

.tabOverzicht th:last-child, .tabLijst th:last-child {
	border-right:0;
}

.tabOverzicht th a, .tabLijst th a {
	color:var(--primary-lighter) !important;
}
.tabOverzicht th a:hover, .tabLijst th a:hover {
	color: var(--primary) !important;
}

.tabOverzicht tr:nth-child(odd) {
	background: var(--lighter-table-row);
}

.tabOverzicht tr:nth-child(even) {
	background: var(--darker-table-row);
}

.tabOverzicht td, .tabLijst td {
	border-right:2px solid var(--lighter-table-row);
	padding: 0.7rem;
	vertical-align:top;
	overflow-wrap: break-word;
}

.tabOverzicht td:last-child, .tabLijst td:last-child {
	border-right:0;
}

.tabOverzicht:not(.tabOverzichtNoBg) tr:nth-child(odd) .nogbg, .tabLijst:not(.tabOverzichtNoBg) {
	background: var(--light) !important;
}

.tabOverzicht:not(.tabOverzichtNoBg) tbody tr.nobg:hover:nth-child(even), .tabLijst:not(.tabOverzichtNoBg) tbody tr.nobg:hover:nth-child(even) {
	background: var(--lightest);
}

.tabOverzicht tr.nobg:nth-child(odd), .tabLijst tr.nobg:nth-child(odd) {
	background-color:var(--lighter-table-row) !important;
}

.tabOverzicht .trLichtOranje, .tabOverzicht tr.trLichtOranje:nth-child(even), .tabLijst .trLichtOranje, .tabLijst tr.trLichtOranje:nth-child(even) {
	background-color:var(--primary-accent);
	color:var(--lightest) !important;
}

.tabOverzicht .trLichtOranje th, .tabLijst .trLichtOranje th {
	background-color:var(--primary-accent) !important;
}

.tabOverzicht .trLichtOranje a, .tabLijst .trLichtOranje a {
	color:var(--lightest) !important;
}

.tabOverzicht .trWit {
	background: white !important;
}

.trOverzichtActie {
	cursor:pointer;
}

.tabOverzicht .btn-primary, .tabLijst .btn-primary {
	margin-top:0 !important;
	margin-right:0 !important;
}

.tabOverzicht .tdTotaal, .tabLijst .tdTotaal {
	border-top:2px solid var(--primary) !important;
	font-weight:bold;
	text-align:right;
}

.tabOverzicht .tdIcon, .tabLijst .tdIcon,
.tabOverzicht .tdIconLeftMargin, .tabLijst .tdIconLeftMargin,
.tabOverzicht .tdIconRightFloat, .tabLijst .tdIconRightFloat {
	padding:8px 0 0 15px;
}

.tabOverzicht .tdIcon img, .tabLijst .tdIcon img,
.tabOverzicht .tdIconLeftMargin img, .tabLijst .tdIconLeftMargin img,
.tabOverzicht .tdIconRightFloat img, .tabLijst .tdIconRightFloat img {
	cursor:pointer;
	margin-right:13px;
	margin-bottom: 7px;
	height:25px;
	width:auto;
}

.tabOverzicht .tdIconLeftMargin img, .tabLijst .tdIconLeftMargin img {
	margin-left:13px !important;
}

.tdIconRightFloat {
	float: right;
	padding:8px 0 0 0 !important;
}

.tabOverzicht .tdButton, .tabLijst .tdButton {
	padding:2px 12px 2px 12px
}

.tabOverzicht label, .tabLijst label, .TableRowFormTekst {
	margin-bottom:0;
	margin-top: 7px;
}

.tabOverzicht[data-select-action] tbody tr {
	cursor: pointer;
}
.tdEisen textarea, .tdInstructie textarea {
	height: 100px;
	width: 100%;
	margin-top: 0.7rem;
}

.TableRowFormTekst {
	display: block;
}

table.tablesorter tr.even:hover td, table.tablesorter tr.odd:hover td {
	background-color: var(--greyscale);
}

.grouped-header {
	color: var(--secondary-lighter) !important;
}
.no-text-transform {
	text-transform: none !important;
}

.tabOverzicht .tdInput, .tabLijst .tdInput {
	padding: 3px 8px 0 8px !important;
}

.divFormHolderInklap .tabOverzicht th {
	background-color: var(--primary-accent) !important;
	color: var(--primary);
}

.divIcons img {
	height: 26px;
	padding:8px 0 0 15px;
	box-sizing: content-box;
}

.tabOverzichtHalf {
	float:left;
	width:50%;
}

.divTekst {
	padding:8px 0 8px 0;
	width:calc(100% - 270px) !important;
}

.divTekst p:last-child {
	margin-bottom:0;
}

.form-inline .divTekst input[type="radio"] + label {
	margin-left:10px;
}

#divMobielIcon {
	display:none;
}

.divOnderdeelSel, .divFormHolder {
	width:calc(100% - 270px);
}

.divFormHolder {
	/*padding-bottom:8px;*/
	/*
	2017/11/06 Niek: De padding weer weggehaald. In programma's met bijv. maand - jaar moet die padding er niet op;
	*/
}

.signalFormInput {
	margin: 0 10px 0 10px;
}

.signalFormInputRight {
	margin-right: 10px;
}

.divFormHolder .fr-box, .divFormHolder .form-control {
	width:100% !important;
}

.form-controlKlein, .divFormHolder .form-controlKlein {
	display:inline-block;
	margin-left:6px;
	margin-right:6px;
	width:100px !important;
}

.form-inline .form-control50 {
	width:50px !important;
}

.form-controlKlein:first-child {
	margin-left:0;
}

.inputOnderdeelSel {
	width:100% !important;
}

.form-inline .inputFormHalf {
	display:inline-block;
	width:calc(50% - 7.5px) !important;
}

.divFormStreepje, .divFormKleinStreepje {
	display:inline-block;
	padding-top:9px;
	text-align:center;
	width:15px;
}

.divFormKleinStreepje {
	width:6.5px;
}

.ui-datepicker {
	z-index:10 !important;
}

.ui-datepicker-month {
	margin: 1px 2px !important;
}
.ui-datepicker-month, .ui-datepicker-year{
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-webkit-appearance:none;
	border:1px solid #000;
	border-radius:0 !important;
	box-sizing:border-box;
	background-color:var(--lightest);
	color:#000;
	height:33px;
	padding-left:10px;

}
/**** Overzichten ****/
/* diplomazwemmen */

.header-diploma {
	color: var(--secondary) !important;
}

/**** brief E-mail / SMS ****/

.sortCategorie, .sortBriefEmail {
	list-style:none;
	margin:0;
	padding:0;
}

.sortCategorie, .sortBriefEmail {
	list-style:none;
	margin:0 0 2rem 0;
	padding:0;
}

.divLiCategorie a, .divLiBriefEmail a {
	float:right;
	margin-left:15px;
}

.divLiCategorie a img, .divLiBriefEmail a img {
	margin-top:-2px;
	width:22px;
}

.divLiCategorie {
	border-bottom: 0.1rem solid var(--secondary);
	padding: 1.5rem;
}
.divLiBriefEmail {
	padding: 2rem 1.5rem;
	background: url(images/volgorde-blauw.png);
	background-position-y: center;
}

.nietSortable, .nietSortable > .divLiBriefEmail {
	cursor:default;
	background-image:none;
}

.nietSortable li:nth-child(odd) {
	background: var(--lighter-table-row);
}
.briefMailCkbHolder {
	display:inline-block;
	float:right;
}
.briefMailCkbHolder label {
	padding:0 !important;
}
.briefMailCkbHolder span {
	margin:0 !important;
}
.ui-sortable-handle > div {
	cursor:move;
}
li.briefEmailSort:nth-child(odd) {
	background: var(--lighter-table-row) ;
}
.ui-sortable-handle div.divLiBriefEmail, .ui-sortable-handle div.divLiCategorie {
	padding-left: 4rem;
}

.divLiCategorie a, .divLiBriefEmail a {
	float:right;
	margin-left:15px;
}

.divLiCategorie a img, .divLiBriefEmail a img {
	margin-top:-2px;
	width:22px;
}

.nietSortable .divLiCategorie, .nietSortable > .divLiBriefEmail {
	cursor:default;
	background-image:none;
	padding:10px;
}

.nietSortable .divLiCategorie, .nietSortable .divLiBriefEmail {
	min-height:40px;
}
.sortBriefEmail li:nth-child(even) {
	background: var(--darker-table-row);
}
.sortBriefEmail li:nth-child(odd) {
	background: var(--lighter-table-row);
}

.briefMailCkbHolder {
	display:inline-block;
	float:right;
}
.briefMailCkbHolder label {
	padding:0 !important;
}
.briefMailCkbHolder span {
	margin:0 !important;
}
/* In en Excasso / iDEAL */

tr.finance-reason-fault {
	background: #ff000059 !important;
}
tr.finance-reason-fault:nth-child(even) {
	background: #d8000059 !important
}
.finance-reason-fault td{
	color: var(--foreground) !important;
}

tr.finance-reason:nth-child(even) {
	background: var(--darker-table-row);
}
.finance-reason td{
	color: var(--foreground);
}

tr.finance-reason-accept {
	background: var(--succes-lighter) !important;
}
.finance-reason-accept td{
	color: var(--succes);
}

/* Score & Presentie */

.inputOpmerking {
    min-height: 66px;
}

/* Logboek */

.log-tekst {
	max-width: 500px;
}

/* Beheer Webkassa */


/* Deze heb ik in eerste instantie voor mobiel gemaakt. */
.divPopUpBG {
	background:black;
	filter:alpha(opacity=50);
	opacity:0.5;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

.divBlokkeerPopUpBG {
	background:var(--darkest);
	filter:alpha(opacity=50);
	opacity:0.5;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
}


.divPopUp {
	position:fixed;
	top:5%;
	left:5%;
	height:90%;
	width:90%;
	background:var(--light);
	padding:2%;
	box-sizing:border-box;
	overflow:auto;
	border:2px solid #D7D7D7;
	z-index:99;
}

.divBlokkeerPopUp {
	position:fixed;
	top:5%;
	left:5%;
	height:90%;
	width:90%;
	background:var(--light);
	padding:2%;
	box-sizing:border-box;
	overflow:auto;
	border:2px solid #D7D7D7;
	z-index:99;
}
.divPopUpKlein {
	top:15%;
	left:15%;
	height:70%;
	width:70%;
}

.divBlokkeerPopUpKlein {
	top:15%;
	left:15%;
	height:70%;
	width:70%;
}

.divPopUpKleiner {
	top:30%;
	left:30%;
	height:40%;
	width:40%;
}

.divPopUp .divPopUpContent{
	width:100%;
	box-sizing:border-box;
}

.divPopUpContent h3 {
	margin-top:-6px;
}

.divPopUp .divPopUpFooter {
	height: calc(0.9em + 17px);
	margin-top: 15px;
	width: 100%;
}

.divPopUp .submitKnop{
	margin-top:0;
}

.closeImg{
	width: 25px;
	position: fixed;
	cursor: pointer;
	top: 16%;
	right: 15.5%;
}

.divLosseTekst {
	margin-top:31px;
	margin-bottom:10px;
}

.divTip {
	background-repeat:no-repeat;
	color:var(--txt-color-dark);
	display:none;
	margin-left:9px;
	margin-top:-2px;
}

.divTip img {
	filter: var(--icon-color);
}

.ipadTooltipHack {
	position: absolute;
	right: 12px;
	top: 14px;
}

.divTip-planbord {
    position:absolute;
    right:5px;
    top:10px;
}

.divTip-planbord img {
    background-color: white;
    border-radius: 15px;
}

.verplaatsbolletje img {
    background-color: white;
    border-radius: 15px;
}

.tooltip-inner {
	background:white;
	color:var(--dark);
	border-radius: 0;
	border: 1px solid #D7D7D7;
	padding: 10px;
	text-align:left;
	box-shadow: var(--shadow);
}

.tooltip {
	width:200px;
	position: fixed !important;
}

.tooltip.top .tooltip-arrow {
	display: none;
}

.tooltip.top {
	margin-top:0;
}

.tooltip.in {
	filter: alpha(opacity=100);
	opacity: 1;
}

.tabOverzicht td, .tabLijst td {
	position:relative;
}
/* Voor Pasfoto */
#afbeeldingKnop {
	border-radius: var(--btn-rad);
}

#afbeeldingKnop:hover {
	background: var(--primary-lighter);
	border-right: 10px solid var(--primary-lighter);
}
/* Voor score */
.tooltip td {
	text-align:left;
}

.inputFile {
	width:0.1px;
	height:0.1px;
	opacity:0;
	overflow:hidden;
	position:absolute;
	z-index:-1;
}

.inputFile + label {
	background:var(--primary);
	border-right:10px solid var(--primary);
	color:white;
	cursor:pointer;
	display:block;
	font-weight:normal;
	height:36px;
	overflow:hidden;
	margin-bottom:0 !important;
	padding-bottom:8px;
	padding-left:10px;
	padding-top:7px;
	text-align:center;
	white-space:nowrap;
	width:160px;
}

.inputFile:focus + label {
	outline: 1px dotted #000;
	outline: -webkit-focus-ring-color auto 5px;
}

.mobileOnly {
	display:none;
}

.divFormTekst {
	padding: 8px 0;
	width: calc(100% - 270px);
}

.tabOverzicht + .divButtons {
	padding-top:35px;
}

.tabOverzicht + h3 {
	margin-bottom:32px;
	margin-top:31px;
}

.tabOverzicht + .form-inline {
    margin-top: 35px;
}

.tabOverzicht .inputFormHalf {
	display:inline-block;
	width:48% !important;
}

.form-group .inputFormKlein {
	margin-right:15px;
	width:100px !important;
}

.tabOverzicht .divFormHolderHeader {
	margin-bottom:0;
}

.tabOverzicht .divFormInklapHolder {
	margin-top:2px;
}

.divFormInklapHolder .tabOverzicht th {
	background-color:var(--primary-lighter);
}

.imgKnop {
	cursor:pointer;
	width:22px;
}

.divLabelKleur {
	width:45px;
}

.b0, .b1, .b2, .b3, .b4, .b5, .b6, .b7, .b8, .b9, .b10, .b11, .b12 {
	display:inline-block;
	width:20px;
	height:20px;
	position:relative;
	padding:0 !important;
	text-align:center;
}
select.b0, select.b1, select.b2, select.b3, select.b4, select.b5, select.b6, select.b7, select.b8, select.b9, select.b10, select.b11, select.b12 select.selLabelKleur {
	width: 100%;
	height: 34px !important;
	padding: 6px 12px !important;
}

label .b1, label .b2, label .b3, label .b4, label .b5, label .b6, label .b7, label .b8, label .b9, label .b10, label .b11, label .b12 {
	margin-right:5px;
}

.bNONE {
	background-color:white;
}

.b1 {
	background-color:#ffff00 !important;
}

.b2 {
	background-color:orange !important;
}

.b3 {
	background-color:hotpink !important;
}

.b4 {
	background-color:red !important;
	color:white;
}

.b5 {
	background-color:palegreen !important;
}

.b6 {
	background-color:forestgreen !important;
	color:white;
}

.b7 {
	background-color:skyblue !important;
}

.b8 {
	background-color:purple !important;
	color:white;
}

.b9 {
	background-color:darkblue !important;
	color:white;
}

.b10 {
	background-color:silver !important;
}

.b0 {
	background-color:var(--lightest) !important;
}

.b11 {
	background-color:gray !important;
	color:white;
}

.b12 {
	background-color:black !important;
	color:white;
}

#divFilterKnop {
	margin-bottom:30px;
	margin-top:-5px;
}


.divFormHolder .btn-primary {
	margin-bottom:7px;
}

.divLabelMargin label {
	margin-right:5px;
}

.tabOverzichtHightlight tbody tr:hover, .tabOverzichtHightlight tbody tr:nth-child(even):hover {
	background-color:var(--table-li-hover) !important;
}

.datepickertheme .ui-state-default, .datepickertheme .ui-widget-content .ui-state-default, .datepickertheme .ui-widget-header .ui-state-default {
	height:33px !important;
	width:33px !important;
}

select.form-control {
	background-image: url('../images/triangle_down.png') !important;
	background-repeat: no-repeat !important;
	background-size: 20px!important;
	background-position-y: 8px!important;
	background-position-x: calc(100% - 7px)!important;
}

.divFormBlock label {
	display:block !important;
	text-align: left !important;
}

.form-tekst {
	margin-bottom:16px;
	margin-top:-5px;
}

.form-tekst + .divButtons {
	margin-top:-1px;
    padding:0;
}

.ulOnderdelen {
	-moz-columns: 3;
	-webkit-columns: 3;
	columns: 3;
	list-style: none;
	margin: 15px 0 0 0;
	padding: 0;
}

.ulOnderdelen li {
	background-color: var(--primary-accent);
	cursor: pointer;
	color: var(--primary);
	font-weight: bold;
	margin-top: 15px;
	padding: 8px 0 8px 10px;
	text-transform: uppercase;
	font-size: 0.9em;
}

.ulOnderdelen li:first-child {
	margin-top: 0;
}

.ulOnderdelen li img {
	float: right;
	margin-top: -2px;
	margin-right: 15px;
	width: 25px;
}

.ulOnderdelen .liLeeg {
	cursor: initial;
}

#divOnderdeelOmschrijving, #divOnderdeelOmschrijving2, #divOnderdeelOmschrijvingPopup {
	border:2px solid #B9E6FB;
	line-height:22px;
	margin-top:5px;
	margin-bottom:30px;
	padding:10px;
	display:none;
}

#divOnderdeelOmschrijving strong, #divOnderdeelOmschrijving2 strong, #divOnderdeelOmschrijvingPopup strong {
	color: var(--primary);
	text-transform: uppercase;
}

#divOnderdeelOmschrijving img, #divOnderdeelOmschrijving2 img, #divOnderdeelOmschrijvingPopup img {
	display: none;
}

.divOnderdeelOmschrijvingSluit {
	display: block !important;
	float: right;
	width: 16px;
	cursor: pointer;
}

.form-score {
	background: var(--lightest);
	height: 30px;
	margin: 5px auto;
	padding: 0;
	text-align: center;
	width: 30px !important;
}

.tdScore {
	padding: 0 !important;
}

.tdScore.ongewijzigd img {
	opacity: 0.4;
}

.tabScores label {
	margin-top: 0;
}
.tabOudeScores .tdIcon {
	padding-top:4px !important;
}

@-moz-document url-prefix() {
	.tabOverzicht + h3 {
		margin-top: 32px;
	}

	.form-inline + h3 {
		margin-top: 31px;
	}

	form + h3 {
		margin-top: 31px;
	}

	#divOnderdeelOmschrijving {
		margin-top:15px;
	}
}

.minicolors-theme-default .minicolors-swatch {
	cursor: pointer;
	left: 2px;
	top: 10px;
}

.minicolors-theme-default .minicolors-input {
	cursor: pointer;
	height: 22px;
	margin-top: 8px;
	padding-left: 8px;
}

.inputJoeToep {
	display: block;
	width: 100%;
}

.imgYoutube {
	margin-left: 10px;
	width: 22px;
}

.divYouTube {
	margin-bottom: 25px;
}

.form-inline + .tabOverzicht {
	margin-top: 35px;
}

#trGroeples td {
	border-bottom:33px solid var(--background);
}

#trGroeples .tdIcon, .tdIconLeftMargin {
	padding-top: 14px;
}

#trPlus {
	padding-left:10px;
	padding-top:20px;
}

#trPlus img {
	height:25px;
	margin-bottom:39px;
	width:auto;
}

.lblExtraMargin {
	margin-left: 7px;
}

.divFormInklapHolder h3:first-child {
	margin-top:32px;
}

.divButtons + h3 {
	margin-top:-3px;
}
.imgIcon {
	height:25px;
	cursor: pointer;
}

/*Editor*/
.fr-box .variabelen {
	overflow: auto;
	height: 300px;
}
.fr-box .variabelen ul {
	list-style: none;
	padding:0;
	margin:0;
	columns: 3;
}
.fr-box .variabelen ul li {
	padding:10px;
	cursor:pointer;
}
.fr-box .variabelen ul li:hover{
	background-color: var(--table-li-hover);
}

#divFroalaBestandsbeheer {
	overflow: auto;
	height: 350px;
	width: 720px;
}
#divFroalaBestandsbeheer ul {
	list-style: none;
	padding:0;
	margin:0;
	columns: 2;
}
#divFroalaBestandsbeheer ul li {
	padding:10px;
	cursor:pointer;	
	height:40px;
	display: block;
}
#divFroalaBestandsbeheer ul li:hover{
	background-color: var(--table-li-hover);
}
#divFroalaBestandsbeheer ul#froalaFileSelection li span.froalabestandsnaam {
	width: 280px;
	float:left;
}

.froalaBestandsbeheerIcons {
}
#divFroalaBestandsbeheer ul#froalaFileSelection li i {
	width: 20px;
}
/****************/

.fr-popup {
	margin-bottom:35px;
}

.tdMobileShow {
    display: none !important;
}

.divDoelgroepVierkant {
    background-color:var(--primary);
    height:20px;
    width:20px;
}

.form-inline .fr-code {
    height:300px !important;
}

.printonly {
	display: none!important;
}

.inhaaltegoedtekst {
	margin-top: 5px;
}

.tdLabel {
    width:70px;
}

.divMededelingIcon a {
    color: var(--primary);
    font-weight: bold;
    text-transform: uppercase;
}

.divMededelingIcon a:hover {
    text-decoration: none;
}

.divMededelingIcon img {
    padding-bottom: 0rem;
	height: 42px;
}

.divMenuknopUit {
	background: var(--greyscale-accent);
	border: 0.1rem solid var(--greyscale);
	color: var(--greyscale);
}
.divMenuknopUit:hover{
	cursor: not-allowed;
	background: var(--greyscale-light);
	border: 0.1rem solid var(--greyscale);
}

.divKnopInloggenAls {
	margin-left: -16px;
}

.divMededeling {
	border-bottom: 1px solid var(--primary);
	padding-bottom: 15px;
	margin-bottom: 25px;
}

.divMededeling:last-child {
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 15px;
}

.divMededeling strong.MededelingItemTitel {
	color: var(--primary);
}

#divWachtlijstTijden .ulTijden {
	list-style:none;
	padding:0;
}

#divWachtlijstTijden .ulTijden li label {
    white-space: normal;
}

.divPopUpAuto {
	height:auto !important;
}

.privacy-verklaring {
	padding-left: 10px !important;
}
.privacy-verklaring div {
	padding: 0
}
/** Select 2 stylen zoals de normale select box **/
.select2-container--default .select2-selection--single {
	border-radius: 0 !important;
	border: 1px solid #D7D7D7 !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
	margin-top: 5px !important;
	border-color: #000 transparent transparent transparent !important;
}

.select2-container .select2-selection--single {
	height: 35px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 35px !important;
	color: var(--dark) !important;
}

.select2-container .select2-selection--single .select2-selection__rendered {
	padding-left: 10px !important;
}
select.inputForm.select2-hidden-accessible {
	width: 1px !important;
}

.select2-container--open .select2-dropdown--above {
	border-radius: 0 !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 18px !important;
	right: 5px !important;
}

.lblNoMargin {
	margin: 0 !important;
}
/** Einde select 2 **/

.tableHeadRow {
	position: relative;
    display: flex;
    margin-right: -15px;
    margin-left: -15px;
}

.tableHeadCol {
    flex-basis: 0;
    flex-grow: 1;
}

.textButton {
	position: absolute;
	bottom: 0;
}

.divInformatie {
	border: 1px solid #D7D7D7;
    margin-bottom: 35px;
    padding: 6px 10px 4px 12px;
}

.infoTitel {
	margin: 0 0 1px 1px;
    text-transform: uppercase;
	font-weight: bold;
	color: #ff0000;
}

.infoBody {
	margin-bottom: 10px;
    padding-left: 1px;
}

#gta {
	overflow: auto !important;
}

.grid-container {
	display: inline-grid;
	grid-template-columns: auto auto auto auto;
  }
  
  .grid-item {
	text-align: center;
	border-bottom: 1px solid black;
  }
.tablesorter th {
	cursor:pointer;
}

th.table-sort:hover {
	cursor: pointer;
	color: var(--primary-lighter) !important;
}

::-webkit-scrollbar {
    width: 10px;
	height: 110%;
}

::-webkit-scrollbar-thumb {
    background: var(--secondary);
    border-radius: 15px;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--secondary-lighter);
}

.padded-grey-background {
	background-color: #ededed;
	padding: 5px
}

.inputFormThird{
	display: inline-block;
    width: calc(25% - 7.5px) !important
}

/* Filter Keuze */

.filterKeuzesDiv {
	border: 1.1rem solid var(--primary-border);
	border-right: none !important;
	background-color: transparent !important;
	border-radius: 1.1rem 0 0 1.1rem;
	box-shadow: var(--shadow);
}
.filterKeuzesHead {
	border-radius: 1.1rem 0 0 0;
}
.filterKeuzesBody {
	background: var(--lightest) !important;
	border-radius: 0 0 0 1.1rem;
}
/**** Col bootstrap overide ****/
.col-lg-2 {
	width: 16.6666667%;
}
#dark-mode-btn {
	height: 2.5rem;
    margin-top: 0.65rem;
	cursor: pointer;
}

.tutorial-highlight {
	position: relative;
    z-index: 9999; /* Ensure the highlighted element is above the overlay */
    pointer-events: auto; /* Allow interaction with the highlighted element */
	background: var(--background);
	border-radius: 15px;

}
.tutorial-dark-overlay{
	position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Adjust the opacity as needed */
    z-index: 9998; /* Ensure it is on top of other elements but below the highlighted div */
    pointer-events: none; /* Allow clicks through the overlay */
}
.tutorial-text-box {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    z-index: 10000;
	width: 40%;
	border-style: solid;
	border-width: 5px;
	border-color: var(--secondary);
	border-radius: 15px;
}
.currentBalanceDiv {
	float: right;
	width: 150px;
	height:120px;
	border: 4px solid #008000;
	border-radius: 15px;
	text-align:center;
}
.OuderModus {
	font-size: larger;
}
.w-60{
	width: 60% !important;
}