@charset "UTF-8";     
 
/*===========================================================

	Project:    Identity Access Management
	Client:		ITHO Daalderop
	Company:	IlionX Den Bosch
	Developer:	Jasper Zuidhof 
	E-mail:		jzuidhof@ilionx.com
	DOB: 		Februari 2020 

===========================================================*/

/*===========================================================

	Chapter

===========================================================*/

/**************************

	Section

***************************/

/*
	Subsection
*/


/* State */


/*===========================================================

	Font Definitions

===========================================================*/

@import url("https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css");

@font-face {
	font-family: Barlow-regular;
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	src: url("https://assets.bettyblocks.com/2c0e717501424d48b7981a84525fbc60_assets/files/932c49e60b3e48e4a9565b4d964e497b") format("truetype");
}


/*===========================================================

	Scrollbar / Text Selection / Focus Box

===========================================================*/

::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #efefef;
}

::-webkit-scrollbar {
	width: 6px;
	background-color: #efefef;
}

::-webkit-scrollbar-thumb {
	background-color: #1c4eaa;
}

/* Text Selection */
::selection {
    background-color: #1c4eaa;
    color: white;
}

/* Focus Box */

a,
input,
select,
textarea,
button {
	outline-color: transparent;
	transition: outline-color .2s ease-in-out;
}

input:focus,
select:focus,
textarea:focus{
	outline-offset: -3px;
	outline-width: 3px;
	outline-style: solid;
	outline-color: rgba(28, 78, 170,0.5);
}

button:focus,
a:focus {
	outline: none
}

#noButton{
	display: inline-block;
    justify-content: center;
    align-items: center;
    color: #1c4eaa;
    font-weight: 500;
    border-style: none;
    background: transparent;
    border-color: transparent;
    border-width: 0px;
    padding: 0;
    line-height: 1;
    border-radius: 15px;
}

/*===========================================================

	Global

===========================================================*/

html,
body {
	font-family: "Barlow-regular",Georgia,serif;
	font-size: 16px;
	min-height: 100vh;
	color: #58585a;
}

html {
	box-sizing: border-box;
}

* {
	box-sizing: inherit;
	font-family: inherit;
	color: inherit;
}

:before,
:after {
	box-sizing: inherit;
}

[hidden],
.hidden {
	display: none !important;
}

[disabled] {
	opacity: 0.5;
}


input[type="checkbox"],
input[type="boolean"],
.accessibilityHidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
	/* Extra overrules */
	display: block !important;
	transform: scale(0.1) !important;
	max-width: 1px !important;
	max-height: 1px !important;
	line-height: 1px !important;
	border: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

[data-optional-now="true"] .ilx-required-astrix,
[data-hidden="true"]{
	display: none !important;
}

[data-hidden="false"]{
	display: block !important;
}

/*===========================================================

	Elements

===========================================================*/

a,
a:hover,
a:focus {
	text-decoration: none;
	color: inherit;
}

/*
	Paragraph Links
*/

p a {
	color: #1c4eaa;
}
p a:hover,
p a:focus {
	color: #ff6d2a;
}

a[href^="mailto:"] {

}

img {
	object-fit: contain;
	object-position: center;
}

fieldset {
	border: 0;
	padding: 0;
	margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: #1c4eaa;
	font-weight: normal;
}

p {
	line-height: 2;
    margin: 2rem 0;
}



/*===========================================================

	Transitions / Animations

===========================================================*/

a,
button,
li,
tr,
[role="row"] {
	transition: 
	background .2s ease-in-out,
	color .2s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes zoomIn {
    0% {transform: scale(1);}
    100% {transform: scale(1.5);}
}


/*===========================================================

	Main Wrappers

===========================================================*/

.ilx-wrapper {
	min-height: 100vh;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	position: relative;
	border-left: .5rem solid #1c4eaa;
}

.ilx-wrapper > * {
	min-height: inherit;
	display: flex;
	flex-direction: column;
	flex: 1;
	animation: .2s fadeIn linear forwards;
}

/*===========================================================

	Main Aside

===========================================================*/

.ilx-main-aside {
	position: relative;
    z-index: 1;
    box-shadow: 0px 0px 8px rgba(0,0,0,0.25);
}

.ilx-main-aside > * {
	width: 100%;
	/*max-width: calc(960px / 2);*/
	padding: 0 6rem;
}

/**************************

	Main Logo

***************************/

.ilx-main-logo {
	order: 1;
    margin-top: auto;
}

.ilx-main-logo > a {
	display: flex;
	flex: 1;
}

.ilx-main-logo img {
	display: block;
	width: 100%;
	max-width: 260px;
	padding: 2rem;
	padding-left: 3rem;
}


/**************************

	Main Title

***************************/

.ilx-main-title {
	padding: 3rem;
	border-bottom: 1px solid #1c4eaa;
}

.ilx-main-title h1 {
	color: #1c4eaa;
	font-size: 2.5rem;
	margin: 0;
}

/**************************

	Main Nav

***************************/

.ilx-main-nav ul,
.ilx-main-nav ul li {
	padding: 0;
	margin: 0;
	list-style: none;
	display: block;
}

/*
	First level
*/

.ilx-main-nav nav > ul > li {
	padding: 2rem;
	padding-left: 3rem;
	border-bottom: 1px solid #1c4eaa;
}

.ilx-main-nav nav > ul > li > a {
	font-size: 1.5rem;
	font-weight: normal;
	display: block;
	padding-bottom: .5rem;
	color: #1c4eaa;
}

/*
	Second level
*/

.ilx-main-nav nav > ul > li ul {
	padding-left: 2rem;
}

.ilx-main-nav nav > ul > li ul li {
	display: list-item;
	list-style: disc;
	color: #58585a;
	line-height: 1.5rem;
}

/*
	ilx-active
*/

.ilx-main-nav nav .ilx-active {
	background: #1c4eaa;
	color: white;
}

.ilx-main-nav nav .ilx-active * {
	color: white;
}

/**************************

	Main Sub Nav

***************************/

.ilx-main-sub-nav {
	list-style: none;
	padding: 4rem 0 0 0;
	margin: 0;
}

.ilx-main-sub-nav a {
	color: #dedede;
    padding: .33rem;
    display: flex;
    font-weight: 500;
}

.ilx-main-sub-nav a:hover,
.ilx-main-sub-nav a:focus {
	color: #1c4eaa;
}

/*===========================================================

	Main Article

===========================================================*/

.ilx-main-center {
	justify-content: center;
	align-items: center;
	padding: 2rem;
	position: relative;
	z-index: 1;
}

.ilx-main-center > * {
	width: 100%;
    max-width: 960px;
}

/**************************

	Wallpaper

***************************/

.ilx-wallpaper {
	position: absolute;
	z-index: -1;
	max-width: none;
	top:0; right: 0; bottom: 0; left: 0;
}

.ilx-wallpaper > div {
	position: absolute;
	top:0; right: 0; bottom: 0; left: 0;
	overflow: hidden;
}

.ilx-wallpaper img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}

/**************************

	Tabels

***************************/

.ilx-table-wrapper {
	padding: 0 1rem;
	font-size: 1rem;
	font-weight: 300;
}

table,
[role="table"] {
    display: flex;
    flex-direction: column;
}

thead,
tbody,
[role="rowgroup"] {
	display: flex;
	flex: 1;
	flex-direction: column;
}

tr,
[role="row"] {
	display: flex;
	flex: 1;
	border-bottom: 1px dashed #dedede;
}

th,
[role="columnheader"] {
	font-weight: bold;
	display: flex;
	flex: 1;
}

th  > *,
[role="columnheader"]  > * {
	padding: .5rem 1rem;
}

td,
[role="cell"] {
	display: flex;
	flex: 1;
	align-items: center;
}

td > *,
[role="cell"] > * {
	padding: .5rem 1rem;
}


/*
	Tbody
*/

tbody:nth-child(odd),
[role="rowgroup"]:nth-child(odd) {

}

tbody:nth-child(even),
[role="rowgroup"]:nth-child(even) {
	background: white;
}


/*
	Row
*/

tr:nth-child(odd),
[role="row"]:nth-child(odd) {

}

tr:nth-child(even),
[role="row"]:nth-child(even) {

}

tr:hover,
[role="row"]:hover {
	background: rgba(28, 78, 170, 0.25);
}

/*
	Expandable / Active
*/

/* Button */

.ilx-table-wrapper .ilx-row-expandable-button-wrapper {
	padding: 0;
	margin-left: auto;
}

.ilx-table-wrapper .ilx-row-expandable-button {
	border: 0;
	background: transparent;
	color: #707070;
}

/* Row */

.ilx-table-wrapper .ilx-row-expandable {
	display: none;
	background: white;
	padding: 1rem;
}

.ilx-table-wrapper .ilx-active > .ilx-row-expandable {
	display: inherit;
}

.ilx-table-wrapper .ilx-active > .ilx-row-expandable > * {
	display: flex;
}

.ilx-table-wrapper .ilx-active {
	font-weight: bold;
}


/*===========================================================

	Main Form

===========================================================*/'

::-webkit-input-placeholder,
::-moz-placeholder,
:-ms-input-placeholder,
:-moz-placeholder,
::placeholder {
	font-weight: 300 !important;
	color: #cccccc;
}

fieldset > .ilx-input-row:not(:first-of-type) {
	margin-top: 1rem;
}

.ilx-input-row {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
    align-items: start;
}

.ilx-input-row > * {
	padding: 1rem .25rem;
	width: 100%;
	max-width: calc(960px / 2);
}

.ilx-input-select {
	display: flex;
	flex: 1;
}

.ilx-required-astrix {
	opacity: 0.5;
  	color: #bd0000;
}

/**************************

	Labels

***************************/

.ilx-input-label {
	font-size: 2rem;
    color: #1c4eaa;
    padding-left: 2rem;
    padding-right: 2rem;
}

.ilx-input-label-small {
	padding: 0;
    color: #58585a;
}

.ilx-input-label-small + .ilx-input-text,
.ilx-input-label-small + .ilx-input-text-and-button {
	padding: 0;
	margin-bottom: 1rem;
}

.ilx-input-label-small ~ .ilx-input-text:last-of-type,
.ilx-input-label-small ~ .ilx-input-text-and-button:last-of-type {
	margin-bottom: 0;
}

/*
	Label Icon
*/

.glyphicon {
	top: 0px;
}

span + .glyphicon,
.glyphicon + span,
.glyphicon + label {
	margin-left: .5rem;
}

/**************************

	Inputs / Buttons / Anchors

***************************/

input, button, select, textarea {
	width: 100%;
	font-weight: 300;
}

.contact-button{
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: 500;
    border-style: solid;
    background: #1c4eaa;
    border-color: #1c4eaa;
    border-width: 0px;
    padding: .75rem 1rem;
    line-height: 1;
    border-radius: 15px;
}

/*
	Input
*/
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"] {
	color: #1c4eaa;
	padding: 0.75rem;
	padding-top: calc(0.75rem + 1px); /* Required for Glyphicon */
	line-height: 1;
	color: #1c4eaa;
	border: 0;
	border-bottom: 1px solid #ccc;
}
/*
	Select
*/

select {
    color: #1c4eaa;
    font-weight: 500;
    padding: .5rem;
    border-color: #ccc;
    border-width: 1px;
}

/*
	Checkbox
*/

input[type="checkbox"] + label:before {
	content: "";
    display: inline-block;
    vertical-align: top;
    border: 1px solid #cccccc;
    width: 1rem;
    height: 1rem;
    margin-left: 1rem;
    margin-right: 1rem;
    margin-top: .25rem;
}

input[type="checkbox"]:checked + label:before {
	background-color: #1e50aa;
	box-shadow: inset 0 0 0 2px rgb(255, 255, 255);
}

input[type="checkbox"] + label {
	display: inline-block;
	vertical-align: top;
	font-weight: normal;
	cursor: pointer;
	user-select: none;
}

/*
	Button
*/

form a,
form button {
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	font-weight: 500;
	border-style: solid;
	background: #1c4eaa;
	border-color: #1c4eaa;
	border-width: 0px;
	padding: .75rem 1rem;
	line-height: 1;
	border-radius: 15px;
}

form a:hover,
form button:hover,
form a:focus,
form button:focus {
	color: white;
	background: #ff6d2a;
}

form a ~ *,
form button ~ * {
	margin-left: 1rem;
}

/**************************

	Justification Messages

***************************/

.ilx-justification-wrapper {
	display: flex;
	margin-bottom: 2rem;
}

.ilx-justification-wrapper:empty {
	display: none;
}

.ilx-justification-message {
	position: relative;
	padding: .75rem;
    flex: 1;
}

.ilx-justification-message:before {
	content: "";
	width: .75rem;
	height: .75rem;
	display: inline-block;
	vertical-align: middle;
	margin-right: 1rem;
	transform: translateY(-2px);
	z-index: 1;
	border-radius: 100%;
	animation: .5s fadeIn ease-in-out infinite alternate;
}

/* Succes */
.ilx-justification-message.succes {
	border-color: #84bd00;
}
.ilx-justification-message.succes:before {
	background-color: #84bd00;
}

/* Error */
.ilx-justification-message.error {
	border-color: #bd0000;
}
.ilx-justification-message.error:before {
	background-color: #bd0000;
}

/**************************

	Input Validation Messages

***************************/

.ilx-required-message,
.ilx-validation-message {
	font-size: .8rem;
	padding: .5rem .8rem 0 .8rem;
	display: none;
}

.ilx-validation-message  {
	color: #b24c1d;
}

/*
	Judgement
*/
.ilx-input-required-invalid ~ .ilx-required-message,
.ilx-input-invalid ~ .ilx-validation-message {
	display: block;
  	color: #bd0000
}

.ilx-input-required-invalid.ilx-input-invalid ~ .ilx-validation-message {
	display: none;
}

/**************************

	Input Text and Button

***************************/

.ilx-input-text-and-button {
	display: flex;
	align-items: center;
	padding: 0;
	margin-bottom: .5rem;
}

.ilx-input-text-and-button > *:nth-child(1){
	flex: 1;
}

.ilx-input-text-and-button .ilx-input-text input {
	border-right: 0;
}

.ilx-input-text-and-button .ilx-input-button .glyphicon {
	font-size: calc(1rem + 4px);
}

/*
	Colors
*/

.ilx-input-text-and-button .ilx-input-button button,
.ilx-input-text-and-button .ilx-input-button a {
	background: transparent;
	color: #707070;
}

.ilx-input-text-and-button .ilx-input-button button:hover,
.ilx-input-text-and-button .ilx-input-button button:focus,
.ilx-input-text-and-button .ilx-input-button a:hover,
.ilx-input-text-and-button .ilx-input-button a:focus {
	color: #ff6d2a;
}

/**************************

	Checkbox

***************************/

.ilx-input-checkbox {
	margin-top: .5rem;
}

/*===========================================================

	Form Fieldset Wizard

===========================================================*/

[data-form-fieldset-wizard] .ilx-form-wizard-nav {
	display: flex;
	margin-top: 2rem;
 	width: 100%;
    max-width: calc(960px / 2);
}

[data-form-fieldset-wizard] .ilx-form-wizard-nav > * {
	flex: 1;
}

[data-form-fieldset-wizard] .ilx-form-wizard-step-active { 
	animation: .5s fadeIn ease-in-out forwards;
}

/*
	Clickability 
*/
.ilx-form-wizard-nav .next.disabled, 
.ilx-form-wizard-nav .prev.disabled,
.last.ilx-form-wizard-step-active ~ .ilx-form-wizard-nav .next,
.first.ilx-form-wizard-step-active ~ .ilx-form-wizard-nav .prev {
	pointer-events: none;
	opacity: 0.2;
}

.last.ilx-form-wizard-step-active ~ .ilx-form-wizard-nav .next,
.first.ilx-form-wizard-step-active ~ .ilx-form-wizard-nav .prev{
	visibility: hidden;
}

/*===========================================================

	Toggle Visibility 

===========================================================*/

fieldset[data-ilx-toggle-visibility],
fieldset[data-ilx-toggle-visibility].ilx-toggle-active.hidden {
	display: none;
}

fieldset[data-ilx-toggle-visibility].ilx-toggle-active.ilx-form-wizard-step-active {
	display: inherit;
}


/*===========================================================

	Slide View ilx-slide-view

===========================================================*/

[data-ilx-slide-view]:not(a):not(.ilx-slide-view-active) {
	display: none;
}

[data-ilx-slide-back] {
	position: absolute;
	top: 2rem;
	left: 2rem;
}

/*
	Back button
*/

.ilx-slide-view-active {
	animation: .5s fadeIn ease-in-out forwards;
}

/*
	Wallpaper
*/

[class*="ilx-wp"].ilx-slide-view-active {
	animation: .25s fadeIn linear forwards;
}

[class*="ilx-wp"].ilx-slide-view-active img {
/* 	animation: zoomIn 120s linear forwards; */
}

@media screen and (min-width: 0px) and (max-width: 425px) {
	[data-ilx-slide-back] {
		position: static;
		display: inline-block;
		margin-bottom: 1rem;
	}
}


/*===========================================================

	RESPONSIVE
	- 1024
	- 768
	- 425
	- 375
	- 320

===========================================================*/

@media screen and (min-width: 0px) and (max-width:1024px) {
	html,
	body {
		font-size: 14px;
	}
}

@media screen and (min-width: 0px) and (max-width:768px) {
	html,
	body {
		font-size: 12px;
	}
	.ilx-main-logo img {
		padding: 1rem;
	}
    .ilx-input-row {
      
    }
}

@media screen and (min-width: 0px) and (max-width: 425px) {
	.ilx-wrapper {
		border-left: 0;
	}
}

@media screen and (min-width: 0px) and (max-width:375px) {

}

@media screen and (min-width: 0px) and (max-width:320px) {

}


/*===========================================================

	Login Template

===========================================================*/

/*
	Left ~ Login
*/

.ilx-login .ilx-main-aside {
	justify-content: center;
	align-items: center;
	flex-basis: 40%;
	padding: 2rem;
	padding-top: calc(110px / 2);
	padding-bottom: 110px;
}

.ilx-login .ilx-main-aside .ilx-main-logo {
	position: absolute;
	bottom: 0;
	left: 0;
}

.ilx-login h1 {
	font-size: 3rem;
	margin: 0 0 2rem 0;
}

/*
	Right ~ Wallpaper
*/

.ilx-login .ilx-main-center {
	flex-basis: 60%;
}

/*
	Responsive
*/
@media screen and (min-width: 0px) and (max-width:1600px) {
	.ilx-main-aside > * {
   	 	width: 100%;
    	padding: 0 2rem;
	}
}

@media screen and (min-width: 0px) and (max-width:1340px) {
	.ilx-login .ilx-main-aside {
		flex-basis: 50%;
	}
	.ilx-main-aside > * {
   	 	width: 100%;
    	padding: 0 2rem;
	}
	.ilx-login .ilx-main-center {
		flex-basis: 50%;
	}
    [class*="ilx-wp"].ilx-slide-view-active img {
      animation: none;
 	}
}

@media screen and (min-width: 0px) and (max-width:1024px) {
	.ilx-login .ilx-main-aside {
		flex-basis: 50%;
	}
	.ilx-main-aside > * {
   	 	width: 100%;
    	padding: 0;
	}
	.ilx-login .ilx-main-center {
		flex-basis: 50%;
	}
    [class*="ilx-wp"].ilx-slide-view-active img {
      animation: none;
 	}
}

@media screen and (min-width: 0px) and (max-width:768px) {
	.ilx-login .ilx-main-aside {
		flex-basis: 100%;
	}
	.ilx-main-aside > * {
   	 	width: 100%;
    	padding: 0;
	}
    fieldset h4,
    .ilx-input-row {
       align-items: center;
    }
	.ilx-login .ilx-main-center {
		display: none;
	}
    [class*="ilx-wp"].ilx-slide-view-active img {
      animation: none;
 	}
}

@media screen and (min-width: 0px) and (max-width: 425px) {
	.ilx-login h1 {
		font-size: 3rem;
	}
	.ilx-login .ilx-main-aside {
		padding-top: 2rem;
	}
	.ilx-login .ilx-main-center {
		display: none;
	}
}

/*===========================================================

	Contentpage Template

===========================================================*/

/*
	Left ~ Login
*/

.ilx-contentpage .ilx-main-aside {
	justify-content: center;
	align-items: center;
	border-right: 0;
	flex-basis: 50%;
	padding: 2rem;
	padding-top: calc(110px / 2);
	padding-bottom: 110px;
}

.ilx-contentpage .ilx-main-aside .ilx-main-logo {
	position: absolute;
	bottom: 0;
	left: 0;
}

.ilx-contentpage h1 {
	font-size: 4rem;
	margin: 0 0 2rem 0;
}

.ilx-contentpage form {
	margin-bottom: 2rem;
}

/*
	Right ~ Wallpaper
*/

.ilx-contentpage .ilx-main-center {
	flex-basis: 50%;
}

/*
	Responsive
*/

@media screen and (min-width: 0px) and (max-width:1024px) {

}

@media screen and (min-width: 0px) and (max-width:768px) {

}

@media screen and (min-width: 0px) and (max-width: 425px) {
	.ilx-contentpage h1 {
		font-size: 3rem;
	}
	.ilx-contentpage .ilx-main-aside {
		padding-top: 2rem;
	}
	.ilx-contentpage .ilx-main-center {
		display: none;
	}
}

/*===========================================================

	ProcesPage Template

===========================================================*/

.ilx-procespage .ilx-main-aside {
	flex-basis: 25%;
}

/*
	Right ~ ProcesPage
*/

.ilx-procespage .ilx-main-center {
	flex-basis: 75%;
}


/*===========================================================

	Internet Explorer Overrules (IE11)

===========================================================*/

/* IE11 flexbox fixes */

.ilx-internet-explorer:before {
	content: "IE Compatibility Mode";
	background: red;
	pointer-events: none;
	color: white;
	padding: 1rem;
	display: inline-block;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 999;
}

.ilx-internet-explorer table, 
.ilx-internet-explorer [role='table'],
.ilx-internet-explorer thead,
.ilx-internet-explorer tbody,
.ilx-internet-explorer [role='rowgroup'],
.ilx-internet-explorer .ilx-input-select {
	display: block;
}

/*
	Login
*/

.ilx-internet-explorer.ilx-login .ilx-main-aside {
	max-width: 40%;
}

.ilx-internet-explorer.ilx-login .ilx-main-center {
	max-width: 60%;
}

@media screen and (min-width: 0px) and (max-width: 768px) {
	.ilx-internet-explorer.ilx-login .ilx-main-aside {
		max-width: none;
	}
}


@media screen and (min-width: 0px) and (max-width: 425px) {
	.ilx-internet-explorer.ilx-login .ilx-main-aside {
		max-width: none;
	}
}

/*==================================

	Error pagina

==================================*/

.ilx-slide-view-active.login_failed .error {
    background-color: #FFCCBA;
    border: 2px solid #bd0000;
    padding: 15px 10px 15px 50px;
  	width: 100%;
    max-width: calc(960px / 2);
}


.ilx-main-aside .ilx-main-logo{
	display: none;
}

.itho-info p {
	width: 100%;
    max-width: calc(960px / 2);
    color: #1c4eaa;
    border: 2px solid #1c4eaa;
    padding: 10px 20px;
    background-repeat: no-repeat;
    background-position: 10px center;
    background-color: #BBDEFB;
    margin: 0;
    font-size: 15px;
    margin-bottom: 5px;
}


/*==================================

	custom radio button styling

==================================*/

.custom-radio-button #radioButton {
  float: left;
}

.custom-radio-button input[type="radio"] + label:before {
  content: "";
  display: inline-block;
  vertical-align: top;
  border: 1px solid #cccccc;
  width: 1rem;
  height: 1rem;
  margin-left: 1rem;
  margin-right: 1rem;
  margin-top: .25rem;
  border-radius: 10px;
}

.custom-radio-button input[type="radio"]:checked + label:before {
  background-color: #1e50aa;
  box-shadow: inset 0 0 0 2px rgb(255, 255, 255);
}

.custom-radio-button input[type="radio"] + label {
  display: inline-block;
  vertical-align: top;
  font-weight: normal;
  cursor: pointer;
  user-select: none;
}

.custom-radio-button .ilx-input-radio {
  margin-top: .5rem;
}

.custom-radio-button input[type="radio"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  /* Extra overrules */
  display: block !important;
  transform: scale(0.1) !important;
  max-width: 1px !important;
  max-height: 1px !important;
  line-height: 1px !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}