/* ------------------------------ */
/* GENERAL */
/* ------------------------------ */
	
	/* WCAG Wrapper */

	.wrapper.wcag {
		display: flex;
		flex-direction: column;
		row-gap: var(--sp200);
		column-gap: ;	

		background-color: var(--n96);
		padding: 4rem;
	}
	.wrapper.wcag section {
		display: flex;
		flex-direction: column;
		row-gap: var(--sp0);
		column-gap: ;		
	}	

	/* ------------------------------ */

	.form-wrapper form {
		display: flex;
		flex-direction: row;	
		justify-content: flex-start;		
		align-items: stretch;		
		flex-wrap:  nowrap;
		column-gap: var(--sp400);
		row-gap: var(--sp400);

	}


	/* Label */

	.input-wrapper label,
	.input-wrapper-slider label {
		font-family: 'Barlow', sans-serif;
		font-size: 1.8rem;
		font-weight: 600;
		line-height: 3.2rem;
	}	
	.input-wrapper span.icon,
	.input-wrapper-slider span.icon,
	.input-wrapper-slider label.icon {
	  	background-repeat: no-repeat;
	  	background-size: 2rem;
	  	background-position: center;	
	  	width: 2.5rem;
	  	height: 2.5rem;
	  	overflow: visible !important;
	}	

	.icon.ic-brightness {
		background-image: url("../resources/ic/ic_brightness_n20.svg");
	}	


/* ------------------------------ */
/* VALIDATION AND CONFORMITY */
/* ------------------------------ */
	
	.validation-note {
		display: flex;
		flex-direction: row;
		column-gap: 0.75rem;
		/*justify-content: center;*/
		align-items: center;
	}
	.validation-note .ic-validation {
	  	background-repeat: no-repeat;
	  	background-size: 1.75rem;
	  	background-position: center;	
	  	width: 1.75rem;
	  	height: 2.75rem;
	}	
	.validation-note .lb-validation {
		font-weight: 600;
		padding-right: 0.5rem;	
	}


	.validation-note.passed {

	}
	.validation-note.passed .ic-validation {
		background-image: url("../resources/ic/ic_conformity_passed.svg");
	}	
	.validation-note.passed .lb-validation {
		color:  var(--sg100);
	}	

	.validation-note.failed .ic-validation {
		background-image: url("../resources/ic/ic_conformity_failed.svg");
	}	
	.validation-note.failed .lb-validation {
		color:  var(--sr100);
	}	


/* ------------------------------ */
/* INPUT */
/* ------------------------------ */
	
	/* Invers ------------------------------ */

		.input-wrapper.invert {
			color: var(--n100);
		}
		.input-wrapper.invert textarea,
		.input-wrapper.invert input {
			color: var(--n100);
		}
		.input-wrapper.invert textarea::placeholder,
		.input-wrapper.invert input::placeholder {
			color: var(--n80);
		}

		textarea {
			resize: none;
		}		



	/* ------------------------------ */

		.input-wrapper {
			display:  flex;
			flex-direction: column;	
			row-gap: var(--sp50);
			width:  100%;
		}
		.input-wrapper.inline {
			position: relative;
		}


		/* Helper text */

		.input-wrapper p.helper-text {
			font-family: 'Barlow', sans-serif;
			font-size: 1.4rem;
			font-weight: 400;
			line-height: 2.2rem;
		}

		.rb-wrapper p.helper-text {
			font-family: 'Barlow', sans-serif;
			font-size: 1.4rem;
			font-weight: 400;
			line-height: 2.2rem;			
		}

		/* Label */

		.input-wrapper.inline label {
			position: absolute;
			top: 0.75rem;
			z-index: 1;	
			padding-left: 1rem;		
		}

		.input-wrapper.inline input::placeholder {
			
		}


		.input-wrapper .wrapper {		
			position: relative;	
		}	

		.input-wrapper .wrapper .option-wrapper {
			position: absolute;

			right:  0.5rem;
			top: 50%;
			transform: translateY(-50%);		

			display: flex;
			flex-direction: row;
			
			justify-content: flex-end;		
			align-items: center;	
			/*column-gap: 1rem;*/	
		}			

	/* ------------------------------ */

		textarea,
		textarea[multiselect],
		input[type="number"], 
		input[type="text"],
		input[select] {	
			min-height: 4.8rem;
			padding-left: 1rem;
			padding-right: 1rem;

			position: relative;

			border:  0;
			outline:  0;
			background-color: rgba(255, 255, 255, 0);

			font-family: 'Barlow', sans-serif;
			font-size: 1.8rem;
			font-weight: 400;
			line-height: 3.2rem;

			color: var(--n20);

			-webkit-transition: all 0.15s ease-in-out;
			transition: all 0.15s ease-in-out;	

		}

		/*
		input[select] {
			padding-left: 1rem;
			padding-right: 1rem;
		}*/


		textarea[readonly]:not([select]),
		textarea[multiselect][readonly]:not([select]), 
		input[type="number"][readonly]:not([select]), 
		input[type="text"][readonly]:not([select]),
		input[type="number"][readonly]:not([select]):hover,
		input[type="text"][readonly]:not([select]):hover {
			box-shadow: 0px 0px 0px var(--n20);
			-webkit-box-shadow: 0px 0px 0px var(--n20);
			-moz-box-shadow: 0px 0px 0px var(--n20);
			outline:  0px solid var(--n20);
			padding-left: 0;		
		}	

		.wrapper textarea,
		.wrapper input {
			width:  100%;
			-webkit-appearance: none;
			border-radius: 0;
		}	


	/* ------------------------------ */
	/* Placeholder */

		::-webkit-input-placeholder {
		  color: var(--n60);
		}
		:-ms-input-placeholder {
		  color: var(--n60);
		}
		::placeholder {
		  color: var(--n60);
		}	

	/* ------------------------------ */
	/* Disabled */
		input[disabled]{
			color: var(--n20) !important;;
			-webkit-text-fill-color: var(--n20) !important;
			opacity: 1 !important; /* required on iOS */		
		}


	/* ------------------------------ */
	/* Types */

		textarea.box,
		textarea[multiselect].box,
		input[type="number"].box, 
		input[type="text"].box,
		input[readonly][select].box {	
			outline:  1px solid var(--n20);
		}
		textarea.underline,
		textarea[multiselect].underline,
		input[type="number"].underline, 
		input[type="text"].underline,
		input[select].underline {	
			box-shadow: 0px 1px 0px var(--n20);
			-webkit-box-shadow: 0px 1px 0px var(--n20);
			-moz-box-shadow: 0px 1px 0px var(--n20);			
		}	

		textarea:not([readonly]).box:focus,
		textarea[multiselect]:not([readonly]).box:focus, 
		input[type="number"]:not([readonly]).box:focus, 
		input[type="text"]:not([readonly]).box:focus, 
		textarea:not([readonly]).box.active,
		textarea[multiselect]:not([readonly]).box.active,
		input[type="number"]:not([readonly]).box.active, 
		input[type="text"]:not([readonly]).box.active, 
		textarea:not([readonly]).box:hover,
		textarea[multiselect]:not([readonly]).box:hover,
		input[type="number"]:not([readonly]).box:hover, 
		input[type="text"]:not([readonly]).box:hover,
		input[select].box:focus,
		input[select].box:hover {
			outline:  2px solid var(--n20);
		}
		textarea:not([readonly]).underline:focus,
		textarea[multiselect]:not([readonly]).underline:focus,
		input[type="number"]:not([readonly]).underline:focus, 
		input[type="text"]:not([readonly]).underline:focus,
		textarea:not([readonly]).underline.active,
		textarea[multiselect]:not([readonly]).underline.active, 
		input[type="number"]:not([readonly]).underline.active, 
		input[type="text"]:not([readonly]).underline.active,
		textarea:not([readonly]).underline:hover,
		textarea[multiselect]:not([readonly]).underline:hover,
		input[type="number"]:not([readonly]).underline:hover,
		input[type="text"]:not([readonly]).underline:hover,
		input[select].underline:focus,
		input[select].underline:hover {
			box-shadow: 0px 2px 0px var(--n20);
			-webkit-box-shadow: 0px 2px 0px var(--n20);
			-moz-box-shadow: 0px 2px 0px var(--n20);
		}


		input[select] {
			caret-color: transparent;
		}

		/* Invers ------------------------------ */

		.input-wrapper.invert textarea.box,
		.input-wrapper.invert textarea[multiselect].box, 
		.input-wrapper.invert input[type="number"].box, 
		.input-wrapper.invert input[type="text"].box,
		.input-wrapper.invert input[readonly][select].box {	
			outline:  1px solid var(--n100);
		}
		.input-wrapper.invert textarea.underline,
		.input-wrapper.invert textarea[multiselect].underline,
		.input-wrapper.invert input[type="number"].underline, 
		.input-wrapper.invert input[type="text"].underline,
		.input-wrapper.invert input[select].underline {	
			box-shadow: 0px 1px 0px var(--n100);
			-webkit-box-shadow: 0px 1px 0px var(--n100);
			-moz-box-shadow: 0px 1px 0px var(--n100);
		}	

		.input-wrapper.invert textarea:not([readonly]).box:focus,
		.input-wrapper.invert textarea[multiselect]:not([readonly]).box:focus,
		.input-wrapper.invert input[type="number"]:not([readonly]).box:focus, 
		.input-wrapper.invert input[type="text"]:not([readonly]).box:focus, 
		.input-wrapper.invert textarea:not([readonly]).box.active,
		.input-wrapper.invert textarea[multiselect]:not([readonly]).box.active, 
		.input-wrapper.invert input[type="number"]:not([readonly]).box.active, 
		.input-wrapper.invert input[type="text"]:not([readonly]).box.active, 
		.input-wrapper.invert textarea:not([readonly]).box:hover,
		.input-wrapper.invert textarea[multiselect]:not([readonly]).box:hover, 
		.input-wrapper.invert input[type="number"]:not([readonly]).box:hover, 
		.input-wrapper.invert input[type="text"]:not([readonly]).box:hover,
		.input-wrapper.invert input[select].box:focus,
		.input-wrapper.invert input[select].box:hover {
			outline:  2px solid var(--n100);
		}
		.input-wrapper.invert textarea:not([readonly]).underline:focus,
		.input-wrapper.invert textarea[multiselect]:not([readonly]).underline:focus, 
		.input-wrapper.invert input[type="number"]:not([readonly]).underline:focus, 
		.input-wrapper.invert input[type="text"]:not([readonly]).underline:focus,
		.input-wrapper.invert textarea:not([readonly]).underline.active,
		.input-wrapper.invert textarea[multiselect]:not([readonly]).underline.active, 
		.input-wrapper.invert input[type="number"]:not([readonly]).underline.active, 
		.input-wrapper.invert input[type="text"]:not([readonly]).underline.active,
		.input-wrapper.invert textarea:not([readonly]).underline:hover,
		.input-wrapper.invert textarea[multiselect]:not([readonly]).underline:hover,
		.input-wrapper.invert input[type="number"]:not([readonly]).underline:hover,
		.input-wrapper.invert input[type="text"]:not([readonly]).underline:hover,
		.input-wrapper.invert input[select].underline:focus,
		.input-wrapper.invert input[select].underline:hover {
			box-shadow: 0px 2px 0px var(--n100);
			-webkit-box-shadow: 0px 2px 0px var(--n100);
			-moz-box-shadow: 0px 2px 0px var(--n100);			
		}

	/* ------------------------------ */
	/* Unit */

		span.input-unit {

			font-family: 'Barlow', sans-serif;
			font-size: 1.8rem;
			font-weight: 400;
			line-height: 3.2rem;

			text-align: right;
			margin-right: 1rem;

			position: relative;

		}


/* ------------------------------ */
/* INPUT STEPPER */
/* ------------------------------ */

	input[type="number"]::-webkit-outer-spin-button, 
	input[type="text"]::-webkit-outer-spin-button,
	input[type="number"]::-webkit-inner-spin-button,
	input[type="text"]::-webkit-inner-spin-button {
		-webkit-appearance: none;
		margin: 0;
	}
	input[type=number] {
		-moz-appearance: textfield;
	}

	span.stepper {
		position: relative;
	}
	span.stepper div {
		width:  3.2rem;
		height:  1.75rem;

	  	background-repeat: no-repeat;
	  	background-size: ;
	  	background-position: 50% 50%;

		-webkit-transition: all 0.15s ease-in-out;
		transition: all 0.15s ease-in-out;			  	
	}	
	span.stepper div.up {
		background-image: url("../resources/ic/ic_form-arrow-up_n20.svg");
	}
	span.stepper div.down {
		background-image: url("../resources/ic/ic_form-arrow-down_n20.svg");
	}

	span.stepper div:hover {
		cursor: pointer;
		background-color: var(--n20);
	}

	span.stepper div:hover.up {
		background-image: url("../resources/ic/ic_form-arrow-up_white.svg");
	}
	span.stepper div:hover.down {
		background-image: url("../resources/ic/ic_form-arrow-down_white.svg");
	}	


	span.stepper div:active.up {
		background-position: 50% 35%;
	}
	span.stepper div:active.down {
		background-position: 50% 65%;
	}	

	/* Invers ------------------------------ */

	.input-wrapper.invert span.stepper div:hover.up {
		background-image: url("../resources/ic/ic_form-arrow-up_n20.svg");
	}
	.input-wrapper.invert span.stepper div:hover.down {
		background-image: url("../resources/ic/ic_form-arrow-down_n20.svg");
	}	
	.input-wrapper.invert span.stepper div.up {
		background-image: url("../resources/ic/ic_form-arrow-up_white.svg");
	}
	.input-wrapper.invert span.stepper div.down {
		background-image: url("../resources/ic/ic_form-arrow-down_white.svg");
	}

	.input-wrapper.invert span.stepper div:hover {
		cursor: pointer;
		background-color: var(--n100);
	}


/* ------------------------------ */
/* SELECT */
/* ------------------------------ */

	span.select {
		width:  3.2rem;
		height:  3.2rem;

	  	background-repeat: no-repeat;
	  	background-size: ;
	  	background-position: 50% 50%;

		-webkit-transition: all 0.15s ease-in-out;
		transition: all 0.15s ease-in-out;	

		background-image: url("../resources/ic/ic_form-arrow-down_n20.svg");		
	}

	/* Invers ------------------------------ */

	.input-wrapper.invert span.select {
		background-image: url("../resources/ic/ic_form-arrow-down_white.svg");
	}


/* ------------------------------ */
/* SELECT LIST */
/* ------------------------------ */
	
	.inputList {

		display:  none;

		font-family: 'Barlow', sans-serif;
		font-size: 1.8rem;
		font-weight: 400;
		line-height: 3.2rem;

		color:  var(--n20);

		/*padding: 0.8rem 0;*/

		background-color: var(--n100);

		position: absolute;
		top: calc(4.8rem - 1px);
		width: 100%;			

		/**/
		max-height:  20rem;
		z-index: 999;
		overflow-y: scroll;
		overflow-x: hidden;
		/*z-index: 999;*/
		
	}

	.inputList {
		box-shadow: 2px 2px 0px var(--n20), -2px 2px 0px var(--n20);
		-webkit-box-shadow: 2px 2px 0px var(--n20), -2px 2px 0px var(--n20);
		-moz-box-shadow: 2px 2px 0px var(--n20), -2px 2px 0px var(--n20);
	}
	.inputList.hide {
		box-shadow: 1px 1px 0px var(--n20), -1px 1px 0px var(--n20);	
		-webkit-box-shadow: 1px 1px 0px var(--n20), -1px 1px 0px var(--n20);
		-moz-box-shadow: 1px 1px 0px var(--n20), -1px 1px 0px var(--n20);
	}
	textarea[multiselect].underline.list,
	input[type="number"].underline.list,
	input[type="text"].underline.list,
	textarea[multiselect].box.list,
	input[type="number"].box.list,
	input[type="text"].box.list,	
	input[select].list {	
		outline:  2px solid var(--n20);
		-webkit-transition: all 0s ease-in-out;
		transition: all 0s ease-in-out;			
	}			

	/* Options */

		.inputList option {
			padding: 0.8rem 1.5rem 0.8rem 1rem;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-between;	
			row-gap: 0.5rem;
			column-gap: 1rem;	
		}
		.inputList option:hover {
			cursor: pointer;
			background-color: var(--n96);
		}

		.inputList option item {
			line-height: 3.2rem;
		}

		.inputList option span {
			color: var(--n60);
			max-width:  100%;
			overflow: hidden;
		}


		.inputList item {
			/*padding: 0.4rem 1rem 0.4rem 0.5rem;*/
			padding: 0.8rem 1.5rem 0.8rem 1rem;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-between;	
			row-gap: 0.5rem;
			column-gap: 1rem;	
		}
		.inputList item:hover {
			cursor: pointer;
			background-color: var(--n96);
		}

		.inputList item item {
			line-height: 3.2rem;
		}

		.inputList item span {
			color: var(--n60);
			max-width:  100%;
			overflow: hidden;
		}				

	/* Section */

		.inputList section {
			padding: 0.8rem 0;
		}
		.inputList .section-header {
			position: sticky;
			top: 0;
			z-index: 99;
		}		

		.inputList .section-header p {
			font-family: 'Barlow', sans-serif;
			font-size: 1.4rem;
			font-weight: 600;
			line-height: 2.2rem;	

			color: var(--n60);

			padding: 0.8rem 1.5rem 0.8rem 1rem;	

			border-bottom: 1px solid var(--n80);
			background-color: var(--n100);
		}


/* ------------------------------ */
/* MULTISELECT */
/* ------------------------------ */
	
	input[multiselect] {
		/* padding-left: max(1rem, 75%) !important; <3<3<3<3<3<3<3<3<3<3<3*/
	}

	.inputList label.cb-wrapper {
		width: 100% !important;
		display: inline-flex;
	}
	.inputList label.cb-wrapper:hover {
		background-color: var(--n96);
	}

	.wrapper .pill-wrapper-scroll {
		overflow: hidden;
		max-width: 100% !important;
		margin: 0 0rem 0 0rem;
		display: inline-flex;
		background-color: red;


	}

	.wrapper .pill-wrapper {
		
		overflow-x: scroll;
		
		display: inline-flex;
		flex-direction: row;
		row-gap: var(--sp50);
		column-gap: var(--sp50);

		/*max-width: calc(100% - 2rem);*/
		flex-wrap: nowrap;
		
		position: absolute;
		left: 1rem;
		top: 1rem;
		
		/**/
		max-width: 70%;
		/**/

		z-index: 9999 !important;

		-webkit-transition: all 0.15s ease-in-out;
		transition: all 0.15s ease-in-out;		

		-ms-overflow-style: none;  /* IE and Edge */
		scrollbar-width: none;  /* Firefox */						
				
	}

	.wrapper .pill-wrapper::-webkit-scrollbar {
		display: none;
	}		

	.wrapper .pill-wrapper .pill p {
		line-height: 3rem;
		margin-right: 0.5rem;
	}
	.wrapper .pill-wrapper .pill {
		/*width: 20px;
		height: 20px;*/
		background-color: var(--n96);
		position: relative;
		display: flex;
		padding: 0 0.5rem 0 1rem;	
		cursor: pointer;	
	}
	.wrapper .pill-wrapper .pill[type="default"] span {

		width:  2.2rem;
		height:  100%;

	  	background-repeat: no-repeat;
	  	background-size: 100%;
	  	background-position: 50% 50%;

		background-image: url("../resources/ic/ic_cross_n20.svg");		

	}
	.wrapper .pill-wrapper .pill[type="default"]:hover {
		background-color: var(--n90);
	}
	.wrapper .pill-wrapper .pill[type="more"]:hover {
		background-color: var(--n20);
		color: var(--n100);
	}	
	.wrapper .pill-wrapper .pill[type="more"].active {
		color: var(--n100);
		background-color: var(--b84);
	}


	.wrapper .pill-wrapper > div {
		position: relative;		
	}
	.wrapper .pill-wrapper > div .more-list {

		display: none;
		flex-direction: column;

		background-color: var(--b84);
		color: var(--n100);
		padding: 1rem 0 1rem 0;

		position: absolute;
		top: 3rem;
		left: 0;
		z-index: 1 !important;

		max-height: 20rem;

		overflow-y: scroll;

		min-width: 20rem;
		
	}


	.wrapper .pill-wrapper > div .more-list ul {
		margin: 0;
		padding: 0;
		text-decoration: none;
	}
	.wrapper .pill-wrapper > div .more-list ul li {
		display: flex;
		justify-content: space-between;
		height: 3.2rem;
		padding: 0.25rem 1.4rem 0.25rem 1.4rem;
	}		
	.wrapper .pill-wrapper > div .more-list ul li:hover {
		cursor: pointer;
		background-color: rgba(255,255,255,0.15);
	}
	.wrapper .pill-wrapper > div .more-list ul li span {

		width:  2.2rem;
		height:  100%;

	  	background-repeat: no-repeat;
	  	background-size: 100%;
	  	background-position: 50% 50%;

		background-image: url("../resources/ic/ic_cross_white.svg");	

	}	


	.wrapper .pill-wrapper .pill[type="more"] .more-list.active {
		display: flex;
		/*visibility: visible;
		cursor: default;*/
	}


/* ------------------------------ */
/* RADIOBUTTON */
/* ------------------------------ */
	
	/* Label + Container */

	label.rb-wrapper[helper="true"] {
		display: flex !important;
		flex-direction: column !important;
	}

	label.rb-wrapper {

		/*display:  block;*/
		display: inline-flex;
		width: fit-content;

		position: relative;
		cursor: pointer;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;	
		padding:  0.5rem;	

		font-family: 'Barlow', sans-serif;
		font-size: 1.8rem;
		font-weight: 400;
		line-height: 3.2rem;
		padding-left:  4rem;		
		padding-right:  2rem;
		min-width:  10rem;
	}

	/* Checkmark */

	.rb-wrapper .checkmark {
		position: absolute;
		top: 0;
		left: 0;
		height: 2.2rem;
		width: 2.2rem;
		border-radius: 50%;
		margin: 1rem;
		border:  2px solid var(--n20);
	    box-sizing: border-box;
	    -moz-box-sizing: border-box;
	    -webkit-box-sizing: border-box;	

		-webkit-transition: all 0.15s ease-in-out;
		transition: all 0.15s ease-in-out;		    	
	}

	.rb-wrapper:hover input ~ .checkmark {
		border:  4px solid var(--n20);
	}
	.rb-wrapper input:disabled ~ .checkmark {
		border:  2px solid var(--n60);
	}	
	.rb-wrapper input:disabled {
		/*color: red !important;*/
	}
	.rb-wrapper input:checked ~ .checkmark {
		border:  7px solid var(--n20);
	}
	.rb-wrapper input:checked:disabled ~ .checkmark {
		border:  7px solid var(--n60);
	}		

	input[type="radio"] {
		position: absolute;
		opacity: 0;
		cursor: pointer;
		height: 0;
		width: 0;
	}

	.rb-group {
		display: flex;		
		justify-content: flex-start;		
		align-items: stretch;		
		flex-wrap:  nowrap;
		column-gap: 2rem;
		row-gap: 0rem;		
	}


	.rb-group.horizontal {
		flex-direction: row;		
	}
	.rb-group.vertical {
		flex-direction: column;
	}	


/* ------------------------------ */
/* CHECKBOX */
/* ------------------------------ */

	/* Label + Container */

	label.cb-wrapper {

		/*display:  block;*/
		display: inline-flex;
		width: fit-content;

		position: relative;
		cursor: pointer;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;	
		padding:  0.5rem;	

		font-family: 'Barlow', sans-serif;
		font-size: 1.8rem;
		font-weight: 400;
		line-height: 3.2rem;
		padding-left:  4rem;		
		padding-right:  2rem;
		min-width:  10rem;
	}
	label.cb-wrapper.disabled {
		color: var(--n60);
	}

	/* Checkmark */

	.cb-wrapper .checkmark {
		position: absolute;
		top: 0;
		left: 0;
		height: 2.2rem;
		width: 2.2rem;
		margin: 1rem;
		border:  2px solid var(--n20);
	    box-sizing: border-box;
	    -moz-box-sizing: border-box;
	    -webkit-box-sizing: border-box;	
		-webkit-transition: all 0.15s ease-in-out;
		transition: all 0.15s ease-in-out;	
	}
	.cb-wrapper input:disabled ~ .checkmark {
		border:  2px solid var(--n60);
	}	

	.cb-wrapper:hover input:not([disabled]) ~ .checkmark {
		border:  3px solid var(--n20);
	}
	.cb-wrapper:hover input:not([disabled]):checked ~ .checkmark {
		outline:  1px solid var(--n20);
	}	
	.cb-wrapper input:checked ~ .checkmark {
		background-color: var(--n20);
	}
	.cb-wrapper input:checked:disabled ~ .checkmark {
		background-color: var(--n60);
	}	
	.cb-wrapper input:checked ~ .checkmark:after {		
		display: block;
		background-image: url("../resources/ic/ic_check_white_b.svg");
	  	background-repeat: no-repeat;
	  	background-size: 1.75rem;
	  	background-position: center;	
	  	content:  "";
	  	width: 100%;
	  	height: 100%;
		top: 0;	
		position: absolute;  	
	}			


	input[type="checkbox"] {
		position: absolute;
		opacity: 0;
		cursor: pointer;
		height: 0;
		width: 0;
	}

	.cb-group {
		display: flex;
		justify-content: flex-start;		
		align-items: stretch;		
		flex-wrap:  nowrap;
		column-gap: 2rem;
		row-gap: 0rem;		
	}


	.cb-group.horizontal {
		flex-direction: row;
	}
	.cb-group.vertical {
		flex-direction: column;
	}	


/* ------------------------------ */
/* SWITCH */
/* ------------------------------ */

	/* Switch + Container */

	.sw-group .switch {
		position: relative;
		display: inline-block;
		width: 5.6rem;
		height: 3.2rem;	
		cursor: pointer;	
	}
	.sw-group .switch input {
		opacity: 0;
		width: 0;
		height: 0;
	}	


	/* Slider */

	.sw-group .slider {

		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;	

		/*background-color: #ccc;*/
		border-radius: 1.6rem;
		border:  2px solid var(--n20);
	    box-sizing: border-box;
	    -moz-box-sizing: border-box;
	    -webkit-box-sizing: border-box;	
		-webkit-transition: .15s;
		transition: .15s;	    	
	}
	.sw-group.disabled .slider {
		border:  2px solid var(--n60);
	}
	.sw-group.disabled p {
		color:  var(--n60);
	}
	.sw-group.disabled .slider:before {	
		background-color: var(--n60);
	}

	.sw-group .switch:hover input:not([disabled]) .slider {
		outline:  1px solid var(--n20);
	}
	.sw-group .switch:hover input:not([disabled]) + .slider:before {
		width: 2.4rem;
	}
	.sw-group .switch:hover input:not([disabled]):checked + .slider:before {
		width: 2.4rem;	
		-webkit-transform: translateX(2rem);
		-ms-transform: translateX(2rem);
		transform: translateX(2rem);			
	}		

	.sw-group .slider:before {
		position: absolute;
		content: "";
		height: 2rem;
		width: 2rem;
		left: 4px;
		bottom: 4px;
		border-radius: 1rem;

		background-color: var(--n20);

		-webkit-transition: .15s;
		transition: .15s;		
	}

	.sw-group input:checked + .slider {
		background-color: var(--n20);
	}
	.sw-group input:disabled:checked + .slider {
		background-color: var(--n60);
	}	

	.sw-group input:focus + .slider {
				
	}

	.sw-group input:checked + .slider:before {
		-webkit-transform: translateX(calc(5.6rem - 2rem - 12px));
		-ms-transform: translateX(calc(5.6rem - 2rem - 12px));
		transform: translateX(calc(5.6rem - 2rem - 12px));
		background-color: var(--n100);
	}

	.sw-group {
		display: flex;			
		justify-content: flex-start;		
		align-items: stretch;		
		flex-wrap:  nowrap;
		column-gap: 2rem;
		row-gap: 0rem;		
	}


/* ------------------------------ */
/* COLOR SLIDER */
/* ------------------------------ */


		.inp-color-wrapper {
			position: relative;
		}
		.input-wrapper .colorpreview {
			width: 2.5rem;
			height: 2.5rem;
			position: absolute;
			right: 1.25rem;
			top: 50%;
			transform: translateY(-50%);			
		}

		.input-wrapper .colorpreview.border {
			outline: 1px solid var(--n60);
		}


		.input-wrapper-slider.inline.color .input-wrapper {
			min-width: 4rem;
			width: 7rem;
		}
		.input-wrapper-slider.inline.color .slider-wrapper {
			width: 100%;
		}		
		.input-wrapper-slider.inline.color label {			
			min-width: 2.5rem;
		}
		.input-wrapper-slider.inline.color {
			column-gap: var(--sp100);
			padding: 0rem 2rem;
		}		

		.inputList.color {
			max-height: 40rem;
			overflow: hidden;
		}

		.slider.brightness {
			/*background: linear-gradient(90deg, rgb(0,0,0), rgb(255,0,0)) !important;*/
		}
		.slider.red {
			
		}
		.slider.green {
			
		}
		.slider.blue {
			
		}

		/* ------------------------------ */
		/* Color thumb */

		.slider-wrapper input.color::-webkit-slider-thumb {
			background: none;
			border: 2px solid var(--n20);
		}	
		.slider-wrapper input.color::-moz-range-thumb {
			background: none;
			border: 2px solid var(--n20);
			position: relative;
		}				


/* ------------------------------ */
/* SLIDER */
/* ------------------------------ */

	/* ------------------------------ */
	/* Wrapper */

		.input-wrapper-slider {
			display: flex;				
		}

		.input-wrapper-slider.inline {
			flex-direction: row;
			align-items: center;
			column-gap: var(--sp400);
			justify-content: flex-start;
			align-content: stretch;
		}

		.input-wrapper-slider.inline label {
			/*min-width: 20rem;
			width: 40%;				*/
		}
		.input-wrapper-slider.inline .slider-wrapper {
			width: 100%;
		}		
		.input-wrapper-slider.inline .input-wrapper {
			min-width: 10rem;
			width: 20%;
		}		

		.slider-wrapper {
			
		}

	/* ------------------------------ */
	/* Slider */

		.slider-wrapper .slider {
			-webkit-appearance: none;
			appearance: none;
			width: 100%;
			height: 0.75rem;
			background: #d3d3d3; 
			outline: none; 
			opacity: 1;
			transition: all .2s; 
		}	

		/* Mouse-over effects */
		.slider-wrapper .slider:hover {
			opacity: 1; 		
		}

		.slider-wrapper .slider:hover::-webkit-slider-thumb {
			/*width: 0.75rem;*/
		}
		.slider-wrapper .slider:hover::-moz-range-thumb {
			/*width: 0.75rem;*/
		}	
		

		.slider-wrapper .slider::-webkit-slider-thumb {
			-webkit-appearance: none; 
			appearance: none;
			width: 1.75rem;
			height: 1.75rem;
			background: var(--n20);
			border: none;
			border-radius: 1.25rem;
			/*outline: 2px solid var(--n100);*/
			-webkit-box-shadow: 0px 0px 0px 2px #fff; 
			box-shadow: 0px 0px 0px 2px #fff;			
			cursor: pointer;	
			transition: all .2s; 
		}

		.slider-wrapper .slider::-moz-range-thumb {
			width: 1.75rem;
			height: 1.75rem;
			background: var(--n20);
			border: none;
			border-radius: 1.25rem;
			outline: 2px solid var(--n100);
			cursor: pointer;
			transition: all .2s; 
			
		}	


/* ------------------------------------------------------------ */
/* ------------------------------ */
/* RESPONSIVE */
/* ------------------------------ */
/* < 640 ------------------------------------------------------------ */
	@media screen and (max-width: 640px) {
		
		.form-wrapper form {		
			/*flex: 0 0 calc((100% - 16rem)/5);*/
			flex-direction: column;
		}

		.rb-group.horizontal {
			flex-direction: column;
		}

		.inputList option {
			flex-direction: column;
		}
		.inputList item {
			flex-direction: column;
		}		

	}
/* 640 ------------------------------------------------------------ */
	@media (max-width:767px) and (min-width:640px) {	

		.form-wrapper form {		
			/*flex: 0 0 calc((100% - 16rem)/5);*/
			flex-direction: column;
		}

	}
/* 768 ------------------------------------------------------------ */
	@media (max-width:1023px) and (min-width:768px) {

		.form-wrapper form {		
			flex-wrap:  wrap;
		}	

		.form-wrapper form .input-wrapper {	
			width:  calc(50% - 2rem);
		}
								
	}
/* 1024 ------------------------------------------------------------ */
	@media (max-width:1279px) and (min-width:1024px) {

		.form-wrapper form {		
			flex-wrap:  wrap;
		}	

		.form-wrapper form .input-wrapper {	
			width:  calc(50% - 2rem);
		}

	}	
/* 1280 ------------------------------------------------------------ */
	@media (max-width:1919px) and (min-width:1280px) {

		.wrapper.wcag section {
			max-width: 80%;
		}

	}
/* 1440 ------------------------------------------------------------ */
	@media (max-width:1919px) and (min-width:1440px) {

		.wrapper.wcag section {
			max-width: 80%;
		}

	}	
/* 1920 ------------------------------------------------------------ */
	@media (max-width:2559px) and (min-width:1920px) {

		.wrapper.wcag section {
			max-width: 80%;
		}

	}
/* > 2560 ------------------------------------------------------------ */
	@media screen and (min-width: 2560px) {

		.wrapper.wcag section {
			max-width: 80%;
		}

	}