:root {
    --w4-typo-default-font-family: 'Inter', 'Sans-serif';
    --w4-typo-symbols-family: 'w4-icons';
    --w4-typo-body-weight: 400;
    --w4-typo-headline-weight: 600;

    /** corp start **/
    --w4-corp-neutral-0: 255, 255, 255;
    --w4-corp-neutral-50: 246, 247, 248;
    --w4-corp-neutral-100: 229, 230, 237;
    --w4-corp-neutral-200: 202, 203, 212;
    --w4-corp-neutral-250: 167, 169, 181;
    --w4-corp-neutral-300: 121, 115, 140;
    --w4-corp-neutral-400: 82, 82, 96;
    --w4-corp-neutral-500: 60, 60, 73;
    --w4-corp-neutral-600: 51, 51, 63;
    --w4-corp-neutral-700: 45, 45, 54;
    --w4-corp-neutral-800: 40, 40, 48;
    --w4-corp-neutral-900: 36, 36, 43;
    --w4-corp-neutral-970: 23, 23, 29;
    --w4-corp-neutral-1000: 0, 0, 0;

    --w4-corp-blue-100: 214, 225, 251;
    --w4-corp-blue-200: 174, 195, 247;
    --w4-corp-blue-300: 133, 166, 242;
    --w4-corp-blue-400: 93, 136, 238;
    --w4-corp-blue-500: 52,106,234;
    --w4-corp-blue-600: 39,80,175;
    --w4-corp-blue-700: 26, 53, 117;
    --w4-corp-blue-800: 17, 35, 77;
    --w4-corp-blue-900: 10, 21, 47;
    --w4-corp-blue-950: 36, 36, 64;

    --w4-corp-dark-blue-500: 53, 63, 105;

    --w4-corp-red-100: 255, 237, 237;
    --w4-corp-red-200: 237, 176, 176;
    --w4-corp-red-300: 255, 117, 117;
    --w4-corp-red-400: 255, 98, 98;
    --w4-corp-red-500: 210,57,57;
    --w4-corp-red-600: 168, 46, 46;
    --w4-corp-red-700: 126, 34, 34;
    --w4-corp-red-800: 84, 23, 23;
    --w4-corp-red-900: 42, 11, 11;

    --w4-corp-grey-50: 246, 247, 248;
    --w4-corp-grey-100: 229, 230, 237;
    --w4-corp-grey-200: 202, 203, 212;
    --w4-corp-grey-300: 121, 115, 140;
    --w4-corp-grey-400: 82, 82, 96;
    --w4-corp-grey-500: 51, 51, 63;
    --w4-corp-grey-600: 51, 51, 63;
    --w4-corp-grey-700: 45, 45, 54;
    --w4-corp-grey-800: 40, 40, 48;
    --w4-corp-grey-900: 36, 36, 43;

    --w4-corp-green-100: 230, 255, 253;
    --w4-corp-green-200: 194, 255, 249;
    --w4-corp-green-300: 152, 227, 220;
    --w4-corp-green-400: 85, 197, 187;
    --w4-corp-green-500: 28, 164, 152;
    --w4-corp-green-600: 21, 131, 122;
    --w4-corp-green-700: 14, 85, 79;
    --w4-corp-green-800: 9, 57, 53;
    --w4-corp-green-900: 5, 33, 30;

    --w4-corp-yellow-100: 255, 239, 209;
    --w4-corp-yellow-500: 255, 207, 119;
    --w4-corp-yellow-700: 201, 131, 2;

    --w4-corp-orange-100: 250, 225, 215;
    --w4-corp-orange-200: 246, 196, 176;
    --w4-corp-orange-300: 241, 166, 136;
    --w4-corp-orange-400: 237, 137, 97;
    --w4-corp-orange-500: 232, 107, 57;
    --w4-corp-orange-600: 186, 86, 46;
    --w4-corp-orange-700: 139, 64, 34;
    --w4-corp-orange-800: 93, 43, 23;
    --w4-corp-orange-900: 46, 21, 11;

    --w4-corp-light-blue-100: 230, 244, 253;
    --w4-corp-light-blue-200: 163, 216, 255;
    --w4-corp-light-blue-300: 140, 202, 247;
    --w4-corp-light-blue-400: 58, 164, 241;
    --w4-corp-light-blue-500: 9, 141, 238;
    --w4-corp-light-blue-600: 7, 113, 190;
    --w4-corp-light-blue-700: 5, 85, 143;
    --w4-corp-light-blue-800: 4, 55, 93;
    --w4-corp-light-blue-900: 2, 28, 48;

    --w4-corp-pink-100: 249, 217, 242;
    --w4-corp-pink-200: 243, 180, 229;
    --w4-corp-pink-300: 238, 142, 215;
    --w4-corp-pink-400: 232, 105, 202;
    --w4-corp-pink-500: 226, 67, 189;
    --w4-corp-pink-600: 169, 50, 142;
    --w4-corp-pink-700: 113, 34, 95;
    --w4-corp-pink-800: 79, 23, 66;
    --w4-corp-pink-900: 45, 13, 38;
    /* corp end */
}

:root[data-color-schema="light"]{

    /** sys start **/
    --w4-sys-color-primary-rgb: var(--w4-corp-blue-500);
    --w4-sys-color-on-primary-rgb: var(--w4-corp-neutral-0);
    --w4-sys-color-primary-hover-rgb: var(--w4-corp-blue-600);
    --w4-sys-color-on-primary-hover-rgb: var(--w4-corp-neutral-0);

    --w4-sys-color-surface-rgb: var(--w4-corp-neutral-0);
    --w4-sys-color-on-surface-rgb:var(--w4-corp-neutral-900);
    --w4-sys-color-surface-hover-rgb: var(--w4-corp-neutral-100);
    --w4-sys-color-on-surface-hover-rgb: var(--w4-corp-neutral-900);
    --w4-sys-color-on-surface-secondary-rgb: var(--w4-corp-neutral-300);
    --w4-sys-color-on-surface-tertiary-rgb: var(--w4-corp-neutral-100);


    --w4-sys-color-error-rgb: var(--w4-corp-red-500);
    --w4-sys-color-on-error-rgb: var(--w4-corp-neutral-0);
    --w4-sys-color-error-hover-rgb: var(--w4-corp-red-600);
    --w4-sys-color-on-error-hover-rgb: var(--w4-corp-neutral-0);

    /** sys end **/

}

:root[data-color-schema="dark"]{

    /** sys start **/
    --w4-sys-color-primary-rgb: var(--w4-corp-blue-500);
    --w4-sys-color-on-primary-rgb: var(--w4-corp-neutral-0);
    --w4-sys-color-primary-hover-rgb: var(--w4-corp-blue-400);
    --w4-sys-color-on-primary-hover-rgb: var(--w4-corp-neutral-0);

    --w4-sys-color-surface-rgb: var(--w4-corp-neutral-970);
    --w4-sys-color-on-surface-rgb: var(--w4-corp-neutral-100);
    --w4-sys-color-surface-hover-rgb: var(--w4-corp-neutral-800);
    --w4-sys-color-on-surface-hover-rgb: var(--w4-corp-neutral-0);
    --w4-sys-color-on-surface-secondary-rgb: var(--w4-corp-neutral-250);
    --w4-sys-color-on-surface-tertiary-rgb: var(--w4-corp-neutral-400);

    --w4-sys-color-error-rgb: var(--w4-corp-red-500);
    --w4-sys-color-on-error-rgb: var(--w4-corp-neutral-0);
    --w4-sys-color-error-hover-rgb: var(--w4-corp-red-400);
    --w4-sys-color-on-error-hover-rgb: var(--w4-corp-neutral-0);

    /** sys end **/
}

/* colors **/
:root[data-color-schema="dark"] {
    --w4-sys-color-red-background: rgb(var(--w4-corp-red-500));
    --w4-sys-color-red-foreground: rgb(var(--w4-corp-neutral-0));

    --w4-sys-color-yellow-background: rgb(var(--w4-corp-yellow-500));
    --w4-sys-color-yellow-foreground: rgb(var(--w4-corp-neutral-900));

    --w4-sys-color-pink-background: rgb(var(--w4-corp-pink-500));
    --w4-sys-color-pink-foreground: rgb(var(--w4-corp-neutral-900));

    --w4-sys-color-green-background: rgb(var(--w4-corp-green-500));
    --w4-sys-color-green-foreground: rgb(var(--w4-corp-green-900));

    --w4-sys-color-light-blue-background: rgb(var(--w4-corp-blue-300));
    --w4-sys-color-light-blue-foreground: rgb(var(--w4-corp-blue-900));


    --w4-sys-color-surface-1-background-rgb: var(--w4-corp-neutral-800);
    --w4-sys-color-surface-1-background: rgb(var(--w4-sys-color-surface-1-background-rgb));

    --w4-sys-color-surface-2-background-rgb: var(--w4-corp-neutral-700);
    --w4-sys-color-surface-2-background: rgb(var(--w4-sys-color-surface-2-background-rgb));

    --w4-sys-color-surface-3-background-rgb: var(--w4-corp-neutral-600);
    --w4-sys-color-surface-3-background: rgb(var(--w4-sys-color-surface-3-background-rgb));

    --w4-sys-color-surface-4-background-rgb: var(--w4-corp-neutral-500);
    --w4-sys-color-surface-4-background: rgb(var(--w4-sys-color-surface-4-background-rgb));

    --w4-sys-color-surface-5-background-rgb: var(--w4-corp-neutral-400);
    --w4-sys-color-surface-5-background: rgb(var(--w4-sys-color-surface-5-background-rgb));
}

:root[data-color-schema="light"] .tech-chip-red,
:root[data-color-schema="light"] .w4-chip--color-red {
    --w4-comp-chip-border-color-rgb:var(--w4-corp-red-500);
    --w4-comp-chip-container-color-rgb: transparent;
    --w4-comp-chip-on-color-rgb: var(--w4-corp-red-500);

    --w4-comp-chip-container-color-hover-rgba: rgba(var(--w4-corp-red-500), .05);
    --w4-comp-chip-on-color-hover-rgba:  rgba(var(--w4-corp-red-500), 1);
    --w4-comp-chip-border-color-hover-rgba: rgba(var(--w4-corp-red-500), 1);
    --w4-comp-chip-container-color-focus-rgba: rgba(var(--w4-corp-red-500), .07);
    --w4-comp-chip-on-color-focus-rgba: rgba(var(--w4-corp-red-500), 1);
    --w4-comp-chip-border-color-focus-rgba: rgba(var(--w4-corp-red-500), 1);
    --w4-comp-chip-box-shadow-rgba: rgba(var(--w4-corp-red-500), .5);
}

:root[data-color-schema="dark"] .tech-chip-red,
:root[data-color-schema="dark"] .w4-chip--color-red {
    --w4-comp-chip-border-color-rgb:var(--w4-corp-red-400);
    --w4-comp-chip-container-color-rgb: transparent;
    --w4-comp-chip-on-color-rgb: var(--w4-corp-red-400);

    --w4-comp-chip-container-color-hover-rgba: rgba(var(--w4-corp-red-400), .05);
    --w4-comp-chip-on-color-hover-rgba:  rgba(var(--w4-corp-red-400), 1);
    --w4-comp-chip-border-color-hover-rgba: rgba(var(--w4-corp-red-400), 1);
    --w4-comp-chip-container-color-focus-rgba: rgba(var(--w4-corp-red-400), .07);
    --w4-comp-chip-on-color-focus-rgba: rgba(var(--w4-corp-red-400), 1);
    --w4-comp-chip-border-color-focus-rgba: rgba(var(--w4-corp-red-400), 1);
    --w4-comp-chip-box-shadow-rgba: rgba(var(--w4-corp-red-400), .5);
}

:root[data-color-schema="light"] .tech-badge-green,
:root[data-color-schema="light"] .w4-badge--color-green {
    --w4-comp-badge-container-color-rgb: var(--w4-corp-green-400);
    --w4-comp-badge-on-color-rgb: var(--w4-corp-green-800);
}
:root[data-color-schema="dark"] .tech-badge-green,
:root[data-color-schema="dark"] .w4-badge--color-green {
    --w4-comp-badge-container-color-rgb: var(--w4-corp-green-400);
    --w4-comp-badge-on-color-rgb: var(--w4-corp-green-800);

}

:root[data-color-schema="light"] .tech-badge-red,
:root[data-color-schema="light"] .w4-badge--color-red {
    --w4-comp-badge-container-color-rgb: var(--w4-corp-red-400);
    --w4-comp-badge-on-color-rgb: var(--w4-corp-red-800);
}
:root[data-color-schema="dark"] .tech-badge-red,
:root[data-color-schema="dark"] .w4-badge--color-red {
    --w4-comp-badge-container-color-rgb: var(--w4-corp-red-400);
    --w4-comp-badge-on-color-rgb: var(--w4-corp-red-800);
}

/** workspace **/
:root[data-color-schema="dark"] .w4-layout-workspace {
    --w4-layout-ws-background: rgb(var(--w4-corp-blue-950));
    --w4-layout-ws-foreground: rgb(var(--w4-corp-neutral-970));
}

:root[data-color-schema="light"] .w4-layout-workspace__header-brand-image svg {
    fill: rgb(var(--w4-sys-color-primary-rgb));
}
:root[data-color-schema="dark"] .w4-layout-workspace__header-brand-image svg {
    fill: rgb(var(--w4-sys-color-on-surface-rgb));
}
.w4-layout-workspace__header-brand-image svg text {
    font-family: 'Wkfont';
    font-size: 145px;
}

:root[data-color-schema="light"] .w4-layout-workspace__header-brand-image svg text {
    fill: rgb(var(--w4-sys-color-on-primary-rgb));
}
:root[data-color-schema="dark"] .w4-layout-workspace__header-brand-image svg text {
    fill: rgb(var(--w4-sys-color-surface-rgb));
}
@media(max-width: 1499px) {
    :root[data-color-schema="dark"] .w4-layout-workspace__page.w4-layout-workspace__page--sidebar {
        box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(5, 5, 6, 0.4) 0px 0px 2px 0px, rgba(5, 5, 6, 0.4) 0px 0px 2px 0px, rgba(5, 5, 6, 0.4) 0px 4px 12px 0px;
    }
}

.w4-badge.w4-badge--small[data-flag-id="new"]{
    background-color: var(--w4-sys-color-green-background);
    color: var(--w4-sys-color-green-foreground);
}

.w4-badge.w4-badge--small[data-flag-id="beta"]{
    background-color: var(--w4-sys-color-light-blue-background);
    color: var(--w4-sys-color-light-blue-foreground);
}

.w4-badge.w4-badge--small[data-flag-id="deprecated"]{
    background-color: var(--w4-sys-color-surface-2-background);
}


/** dialog **/
:root[data-color-schema="dark"]{
    --w4-comp-dialog-container-color-rgb: var(--w4-sys-color-surface-1-background-rgb);
}
@media(min-width: 600px){
	.w4-app__body {
		background-color: rgb(var(--w4-sys-color-primary-rgb));
		color: rgb(var(--w4-sys-color-on-primary-rgb));
	}
}

.iam-container {
	flex: auto;
	postition: relative;
}

@media(min-width: 600px){
	.iam-container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
}

.iam-primary-card {
	background-color: rgb(var(--w4-corp-neutral-0));
	color: rgb(var(--w4-sys-color-on-surface-rgb));
	padding: 16px;
}

@media(min-width: 600px){
	.iam-primary-card__body {
		margin-bottom: 48px;
	}
}

.iam-primary-card__logo svg {
	fill: rgb(var(--w4-sys-color-primary-rgb));
	height: 60px;
}

.iam-primary-card__logo svg text {
	fill: rgb(var(--w4-sys-color-on-primary-rgb));
	font-family: Wkfont;
	font-size: 145px;
}

.iam-primary-card__headline {
	margin-top: 24px;
	margin-bottom: 32px;
}

.iam-primary-card__legal {
	padding-left: 16px;
	padding-right: 16px;
}

			
.iam-primary-card__default-form {
	display: flex;
	flex-direction: column;
}

.iam-primary-card__subline {
	margin-top: 16px;
}

.iam-background {
	display: none;
}

@media(min-width: 600px){
	.iam-primary-card,
	.iam-primary-card__legal {
		width: 480px;
	}
	
	.iam-primary-card {
		min-height: 528px;
		border-radius: 28px;
		padding: 24px;
	}
	
	.iam-primary-card__legal {
		padding-left: 24px;
		padding-right: 24px;
		margin-top: 14px;
	}
	
	.iam-background {
		position: absolute;
		right: 0;
		z-index: -1;
		overflow: hidden;
		display: flex;
		width: 500px;
		height: 500px;
		padding: 250px;
		justify-content: flex-end;
		align-items: center;
		border-radius: 530px;
		top: -206px;
		left: calc(50% + -50px);
	}	
}

@media(min-width: 840px){
	.iam-primary-card,
	.iam-primary-card__legal {
		width: 840px;
	}
	
	.iam-primary-card {
		min-height: 384px;
		border-radius: 28px;
		padding: 36px;
	}
	
	.iam-primary-card__legal {
		padding-left: 36px;
		padding-right: 36px;
		margin-top: 20px;
	}
	
	.iam-primary-card {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 36px;
	}
	
	.iam-primary-card__body {
		margin-top: 86px;
	}
	
	.iam-background {
		position: absolute;
		right: 0;
		z-index: -1;
		overflow: hidden;
		display: flex;
		width: 1010px;
		height: 1010px;
		padding: 553px 242px 145px 706px;
		justify-content: flex-end;
		align-items: center;
		border-radius: 530px;
		top: -473px;
		left: calc(50% + -50px);
	}
	
}



#iam-fa2-form {
	display: flex;
	flex-direction: column;
}
	
#iam-fa2-form input {
	width: 36px;
	text-align: center;
	font-size: 24px;
	line-height: 30px;
	padding: 8px;
	border-radius: 8px;
	border: 2px solid rgb(var(--w4-sys-color-primary-rgb));
	font-family: inherit;
}

#iam-fa2-form input:focus {
	border: 3px solid rgb(var(--w4-sys-color-primary-rgb));
}