/*  ===========================================================================  
    FORMS
    =========================================================================== */

.cidk-groupui-label {
	font-family: var(--groupui-sys-font-family-primary);
	font-size: var(--groupui-sys-font-size-400);
	color: var(--groupui-sys-color-on-light-basic-default);
}

.cidk-groupui-input {
	display: block;
	box-sizing: border-box;
	width: 100%;
	border: var(--groupui-sys-border-width-s) solid
		var(--groupui-sys-color-text-weakest);
	border-radius: var(--groupui-sys-border-radius-s);
	padding: var(--groupui-sys-spacing-200) var(--groupui-sys-spacing-400);
	background-color: var(--groupui-sys-color-action-basic-default-inverse);
	color: var(--groupui-sys-color-text-normal);
	font-size: var(--groupui-sys-font-size-400);
	line-height: var(--groupui-sys-line-height-xxl);
	font-family: var(--groupui-sys-font-family-primary);
	margin-top: var(--groupui-sys-spacing-400);
}

/*  Layout
    =========================================================================== */
form {
	margin: var(--groupui-sys-spacing-600) 0;
}

.cidk-content-wrapper {
	padding: 5% 5% 2% 5%;
}

.cidk-content-width-limiter {
	max-width: 504px;
	margin: auto;
}

.cidk-form-header {
	display: flex;
	justify-content: center;
	margin-bottom: var(--groupui-sys-spacing-1200);
}

.cidk-form-header-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	margin-bottom: var(--groupui-sys-spacing-300);
}

.cidk-form-container {
	justify-content: center;
}

.cidk-form-options {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin-bottom: 1.875rem;
}

/*  Labels and inputs  
    =========================================================================== */

/* Hide the eye icon on MS Edge */
input::-ms-reveal,
input::-ms-clear {
	display: none;
}

.cidk-label {
	position: relative;
	display: block;
	margin-bottom: var(--groupui-sys-spacing-600);
}

.cidk-label--checkbox {
	display: flex;
	align-items: center;
	padding-top: var(--groupui-sys-spacing-100);
}

.cidk-label-text {
	display: block;
	font-size: var(--groupui-sys-font-size-350);
	letter-spacing: var(--groupui-sys-letter-spacing-400);
	font-family: var(--groupui-sys-font-family-primary), sans-serif;
	font-weight: var(--groupui-sys-font-weight-bold);
}

.cidk-label-text--checkbox {
	display: flex;
	align-items: center;
	font-size: var(--groupui-sys-font-size-400);
	cursor: pointer;
}

.cidk-label-text--checkbox::before {
	content: '';
	margin-right: var(--groupui-sys-spacing-400);
	box-sizing: content-box;
	width: var(--groupui-sys-spacing-500);
	height: var(--groupui-sys-spacing-500);
	border: solid var(--groupui-sys-border-width-s) #006384;
	border-radius: var(--groupui-sys-border-radius-s);
	background-color: var(--groupui-sys-color-action-basic-default-inverse);
}

.cidk-label--checkbox input:checked + .cidk-label-text--checkbox::before {
	background-color: #006384;
	background-image: url(../img/check-white.svg);
	background-position: 0 0;
	background-repeat: no-repeat;
}

.cidk-label--checkbox:focus-within {
	outline: auto #005fcc;
}

.cidk-label:hover .cidk-groupui-input,
.cidk-label:active .cidk-groupui-input,
.cidk-label:focus .cidk-groupui-input,
.cidk-groupui-input:hover,
.cidk-groupui-input:active,
.cidk-groupui-input:focus {
	outline: none;
	border-color: #006384;
}

.cidk-groupui-input-typeToggler {
	display: flex;
	border: 0;
	padding: 1.1rem 1.5rem;
	background-image: url(../img/eye.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-color: transparent;
	position: absolute;
	height: 100%;
	top: 0;
	right: 0;
	outline: none;
	cursor: pointer;
}

.cidk-groupui-input-eye-active {
	background-image: url(../img/eye-active.svg);
}

.cidk-groupui-input-typeToggler:focus {
	outline: auto #005fcc;
}

.cidk-pw-input-wrapper {
	position: relative;
	margin-bottom: var(--groupui-sys-spacing-1000);
}

.ordered-list {
	padding-left: var(--groupui-sys-spacing-800);
	margin-top: 0;
}