/* stylelint-disable function-url-quotes */
/* stylelint-disable color-hex-length */
/* stylelint-disable font-family-name-quotes */
/* stylelint-disable alpha-value-notation */
/* stylelint-disable selector-pseudo-element-colon-notation */
/* stylelint-disable plugin/no-unsupported-browser-features */

/*
 * -----------------------------------------------------------------------------
 * Lucom Interaction Platform
 * (C) Lucom GmbH, Erkrath. All rights reserved.
 *
 * $$
 * -----------------------------------------------------------------------------
 */

/*
 * Add your custom CSS code to this file. This file will be included as last CSS
 * file in the form and main view. The file may also include theme macros.
 */
@font-face {
	font-family: Benton Sans;
	src: url(./fonts/BentonSans-Regular.ttf);
	font-weight: normal;
}

@font-face {
	font-family: Benton Sans;
	src: url(./fonts/BentonSans-Bold.ttf);
	font-weight: bold;
}

@font-face {
	font-family: Open Sans;
	src: url(./fonts/OpenSans-Regular.ttf);
	font-weight: normal;
}

@font-face {
	font-family: Open Sans;
	src: url(./fonts/OpenSans-Bold.ttf);
	font-weight: bold;
}

@font-face {
	font-family: Open Sans;
	src: url(./fonts/OpenSans-Light.ttf);
	font-weight: lighter;
}

:root {
	/* stylelint-disable-next-line value-keyword-case */
	--nrw-font: BentonSans, OpenSans, NotoSans, sans-serif;
	--nrw-c-green-logo: #00a650;
	--nrw-c-green-dark: #00732b;
	--nrw-c-green-portal: #009036;
	--nrw-c-lime-portal: #b1c800;
	--nrw-c-red-logo: #ed1c24;
	--nrw-c-red-dark: #c83200;
	--nrw-c-red-portal: #a7003b;
	--nrw-c-orange-portal: #f29400;
	--nrw-c-grey: #a4a7b3;
	--nrw-c-grey-dark: #8d95a5;
	--nrw-c-grey-light: #dadce1;
	--nrw-c-grey-portal: #acacac;
	--nrw-c-blue: #006397;
	--nrw-c-blue-dark: #233755;
	--nrw-c-blue-light: #3c506e;
	--nrw-c-cyan-portal: #009ee0;
	--nrw-c-white: #fff;
	--nrw-c-white-2: #f0f1f5;
	--nrw-c-black: #000;
	--font-size-xs: 0.8rem;
	--font-size-s: 1rem;
	--font-size-m: 1.25rem;
	--font-size-l: 2rem;
	--font-size-xl: 3rem;
	--color-border: #dadce1;
	--height-footer: 64px;
}

:root {
	--v-c-primary: var(--nrw-c-blue-dark);
	--v-c-secondary: var(--nrw-c-blue-light);
	--v-c-background: var(--nrw-c-white-2);
	--v-c-surface: var(--nrw-c-white);
	--v-c-error: var(--nrw-c-red-portal);
	--v-c-info: var(--nrw-c-grey-portal);
	--v-c-success: var(--nrw-c-green-portal);
	--v-c-warning: var(--nrw-c-orange-portal);
	--v-c-action: var(--nrw-c-cyan-portal);
	--c-font: var(--nrw-c-blue-dark);
	--font-family: var(--nrw-font);
	--color-text: var(--nrw-c-blue-dark);
}

::placeholder {
	color: var(--nrw-c-grey-dark) !important;
	font-style: italic !important;
}

.responsive-min.form-main .inner-content {
	margin: 0 4px !important;
}

.responsive-min .viewEmbeddings {
	padding: 0;
}

/* Formular-Hintergrund transparent */
#lip_formBean,
#lip-resources-insert-location,
.form .page {
	background-color: transparent;
}

#lip_applyMatchcode,
.button.primary,
.button-primary {
	background-color: var(--nrw-c-blue-dark);
	border-color: transparent;
}

.lip_checkbox input[type='checkbox']:checked ~ div > .after,
.lip_checkbox div[data-type='checkbox'][data-checked='checked'] ~ div > .after,
.button.link,
.dialog .header {
	color: var(--nrw-c-blue-dark);
}

.InputCheckbox.ffw_notEditable.ffw_checkboxBorder ~ .after {
	color: black !important;
}

.form button.datePickerOpener:hover svg,
.pageBrowser .button:not([disabled]):hover .svg-container,
.form button.lookupOpener:hover svg {
	fill: currentColor;
}

.form button.datePickerOpener.ffw_focussed {
	border: 2px solid var(--nrw-c-blue-dark) !important;
	outline-color: var(--nrw-c-blue-dark) !important;
	outline-offset: -3px !important;
}

.formControlCheckbox,
.ffw_checkboxBorder,
.lip_checkbox {
	width: 1rem !important;
	height: 1rem !important;
	font-size: 1rem !important;
}

.viewEmbedding .fixedToolbar::after {
	background: none !important;
}

span[data-icon='chevron-right']::after {
	content: '';
	background-size: var(--font-size-m);
	background-repeat: no-repeat;
	background-image: url('data:image/svg+xml;utf8,<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z" /></svg>');
	width: var(--font-size-m) !important;
	height: var(--font-size-m) !important;
	display: inline-block;
	vertical-align: middle;
}

.lip_icon span[data-svg-icon='dots-horizontal'],
.lip_icon span[data-svg-icon='chevron-down'] {
	font-size: 1rem;
}

#lip-footer {
	background-color: var(--nrw-c-blue-light);
}

#lip-footer .links .item:focus,
#lip-footer .links .item:hover {
	box-shadow: none;
	outline-style: solid;
	outline-width: 2px;
	outline-color: white;
}

#lip-footer .links .item:hover {
	text-decoration: underline;
	color: white;
}

#lip-header-main .logo a,
#lip-header-main .logo img {
	width: 80px;
	height: 80px;
}

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

.selectizeWrapper div[id^='icon:'],
.selectizeIcon {
	height: 100% !important;
}

.selectize-control.plugin-lip_select.plugin-remove_button [data-value].tags .remove {
	color: var(--nrw-c-black);
	font-size: var(--font-size-xs);
}

.selectize-control.plugin-lip_select.plugin-remove_button [data-value].tags .remove:hover {
	color: var(--nrw-c-red-portal);
}

.selectize-control.multi.plugin-lip_customization.plugin-lip_select.plugin-accessibility.plugin-remove_button.lookup.multiline {
	height: auto !important;
}

/* Link innerhalb eines Textes */
#L_HINWEIS_FORM_PERSON {
	display: unset;
}

/* FMSDBMEXT-505 Formular-Hilfe Überschrift wird vom Header überdeckt */
.formBody .form-main .sidebar.right .sticky-content {
	top: var(--height-footer);
}

/* leere Segmente im Formular "Mitarbeitende" unsichtbar machen */
.ffw_segmentGroup.att,
.ffw_segmentGroup.prof,
.ffw_segmentGroup.education,
.ffw_segmentGroup.taet {
	padding-bottom: unset !important;
}

.responsive-min .ffw_segmentGroup.att,
.responsive-min .ffw_segmentGroup.prof,
.responsive-min .ffw_segmentGroup.education,
.responsive-min .ffw_segmentGroup.taet {
	padding-top: unset !important;
}

.LabelStatus {
	font-size: var(--font-size-s);
	border-radius: 1em;
	padding: 8px 16px;
}

.LabelStatusPrimary {
	background-color: var(--nrw-c-blue-dark);
	color: var(--nrw-c-white);
}

.LabelStatusAction {
	background-color: var(--nrw-c-cyan-portal);
	color: var(--nrw-c-black);
}

.LabelStatusWarning {
	background-color: var(--v-c-warning);
	color: var(--nrw-c-black);
}

.LabelStatusError {
	background-color: var(--v-c-error);
	color: var(--nrw-c-white);
}

.LabelStatusSuccess {
	background-color: var(--v-c-success);
	color: var(--nrw-c-black);
}

.LabelStatusDefault {
	background-color: var(--nrw-c-grey-portal);
	color: var(--nrw-c-black);
}

/* ENUEG-996 */
.InputMultiline.ffw_notEditable {
	word-break: break-word;
}

/* ENUEG-393 Normal text size */
.dialog,
.viewEmbeddings,
.viewEmbeddings .message,
.fileAttachment .dialog div.content table.list a,
.fileAttachment .dialog div.content h3 span,
.dialog .footer button,
.dialog input[type="submit"],
.dialog .header h2,
.contentPanel h2,
.contentPanel a,
#lip_formBean .pageContent__Seite1 #L_ZWECK_TEXT,
/* Text on Startpage */
.login,
.login .button,
.login .button.link,
.login .content,
.logoff .contentFrame,
.dialog .content .text,
#lip_autoGatherForm input:not([type='submit']),
#lip_formBean input[type='button'],
.viewEmbeddings .modal .content,
.selectize-control .selectize-input,
.selectize-dropdown .selectize-dropdown-content,
.viewEmbeddings .buttons input[type="button"],
.viewEmbeddings .button input[type="button"],
.viewEmbeddings .buttons input[type="submit"],
.viewEmbeddings .button input[type="submit"] {
	font-size: var(--font-size-s) !important;
	line-height: normal !important;
}

.dialog .header h2 {
	white-space: wrap !important;
}

/* ENUEG-393 Small text size */
.dropdown-menu,
/* Datepicker */
.lookupWindow .dialog div.content,
.viewEmbeddings .error .errorLink a,
.viewEmbeddings .error .errorLink {
	font-size: var(--font-size-xs);
	line-height: normal;
}

/* ENUEG-393 Large text size */
.viewEmbedding .headline {
	font-size: 1.1rem;
	line-height: normal;
}

.viewEmbedding .buttons button {
	font-size: var(--font-size-s);
}

.InputCheckbox + .after {
	font-size: var(--font-size-m) !important;
	line-height: normal !important;
	height: var(--font-size-m) !important;
	width: var(--font-size-m) !important;
}

.InputDropdown input {
	height: 100%;
}

.selectize-dropdown[data-styleclass*='InputDropdown'] > .selectize-dropdown-content > div {
	white-space: break-spaces !important;
}

.selectize-dropdown-content {
	max-height: unset !important;
}

/* 3 Punkte */
.form input.lookupOpener {
	background-size: 1.75rem;
	width: 1.75rem !important;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M16,12A2,2 0 0,1 18,10A2,2 0 0,1 20,12A2,2 0 0,1 18,14A2,2 0 0,1 16,12M10,12A2,2 0 0,1 12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12M4,12A2,2 0 0,1 6,10A2,2 0 0,1 8,12A2,2 0 0,1 6,14A2,2 0 0,1 4,12Z" /></svg>');
}

.InputMultiline.selectize-input.has-items {
	padding-right: 2rem !important;
}

.fileAttachment .dialog div.content .info {
	line-height: normal !important;
}

.fileAttachment .dialog div.content .info.error .icon {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M13,13H11V7H13M13,17H11V15H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" /></svg>');
}

/* Hide Lucom headers and skip link from Screenreader */
h1.invisible,
h2.invisible,
p.invisible > a.a11y-tab-only {
	display: none !important;
	visibility: hidden !important;
}

#lipFormBody .formBody .ffw_fullWidthSegments.footer.sticky {
	position: unset;
}

/*  ENUEG-1020 Footer extrem groß */
#lipFormBody .formBody .ffw_fullWidthSegments.footer.sticky > div.ffw_segmentInstance,
#lipFormBody .formBody .ffw_fullWidthSegments.footer.sticky {
	height: fit-content;
}

#lipFormBody .formBody .form-main {
	flex-basis: calc(100vh - var(--height-footer)) !important;
}

/* Fokus auf Radiobutton/Checkbox */
.lip_checkbox > input[type='checkbox']:focus ~ div .InputCheckbox,
.InputCheckbox:focus ~ div .InputCheckbox {
	outline: 2px solid var(--nrw-c-blue-light);
}

.resumable .disabled,
.lip_checkbox input[disabled] ~ div,
.lip_checkbox input[disabled] ~ div .after,
.lip_checkbox div[data-type='checkbox'] ~ div,
.lip_checkbox div[data-type='checkbox'] ~ div .after,
.lip_checkbox div[data-type='radio'] ~ div,
.lip_checkbox div[data-type='radio'] ~ div .after {
	opacity: 1;
}

/* Größe des Radiobutton Punktes */
.lip_checkbox div > .after .lip_icon > span {
	height: 80% !important;
}

.FileLink::after {
	content: '';
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><title>Link öffnet in neuem Tab</title><path d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z" /></svg>');
	background-size: 1rem;
	background-repeat: no-repeat;
	background-position: right center;
	width: 1em;
	height: 1em;
	display: inline-block;
}

/* Fokus auf nicht editierbaren Feldern in Passwort ändern Formular */
.NotEditableStatic:focus {
	border-bottom: 2px solid var(--nrw-c-blue-dark) !important;
}

/* ENUEG-972 Fokus springt bei Formular-Hilfe nach oben */
.formBody .form-main .sidebar.right {
	position: fixed;
	height: calc(100% - 64px);
	top: 64px;
	right: 0;
}

.formBody .form-main .sidebar .sticky-content,
.formBody .form-main .sidebar {
	width: clamp(330px, 20em, 25vw);
	word-break: break-word;
}

/* Upload */
.InputUpload .drop-text {
	text-align: center;
	word-break: break-word;
}

.InputUpload .drop > .drop-text > ul {
	list-style-type: none;
	display: flex;
	flex-direction: row;
	padding-inline-start: 0;
	justify-content: center;
}

.responsive-min .InputUpload .drop > .drop-text > ul {
	flex-direction: column;
}

.responsive-min .InputUpload .drop > .drop-text > ul > li {
	border-left: none;
}

.InputUpload .drop-text > ul > li {
	padding-left: 1em;
	padding-right: 1em;
	border-left: 1px solid var(--nrw-c-grey-portal);
}

.InputUpload .drop-text > ul > li:first-child {
	border-left: none;
}

.InputUpload .disabled .drop-icon {
	display: none;
}

.DefinitionList h3 {
	font-size: var(--font-size-s);
}

.DefinitionList dl {
	width: 100%;
}

.DefinitionList dt,
.DefinitionList dd {
	box-sizing: border-box;
	padding: 8px;
}

.DefinitionList dt {
	float: left;
	width: 30%;
	padding-bottom: 0;
	font-weight: bold;
}

.DefinitionList dd {
	margin-left: 30%;
}

.DefinitionList dd:after {
	content: '';
	display: block;
	clear: both;
}

.responsive-min .DefinitionList dt {
	float: none;
	width: 100%;
}

.responsive-min .DefinitionList dd {
	margin-left: 1em;
}

.DefinitionList > div {
	width: 100%;
}

.form .IconButton svg {
	height: 1.75rem;
	width: 1.75rem;
}

.form .IconButton [data-svg-icon='trash-can-outline'] svg {
	color: var(--nrw-c-red-portal);
}

.form .IconButton:hover [data-svg-icon='trash-can-outline'] svg {
	color: var(--nrw-c-red-dark);
}

.form .IconButton [data-svg-icon='key'] svg {
	color: var(--nrw-c-blue-dark);
}

.left {
	text-align: left;
}

.screenreader-only {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ENUEG-1543 */
.formControl .disabled[tabindex='0']:where(:focus, :focus-visible, :focus-within),
[role='checkbox']:where(:focus, :focus-visible) + div .ffw_notEditable.ffw_checkboxBorder,
.formControl[aria-readonly="true"]:where(:focus, :focus-visible),
.formControl.ffw_notEditable[tabindex='0']:where(:focus, :focus-visible) {
	outline: 2px solid var(--nrw-c-black) !important;
	outline-offset: -2px !important;
}

/* ------------------------------------ */
/* Seiten, die im Footer verlinkt sind */

#lip_modalWindowContent #header-dialog .header,
#lip_modalWindowContent #footer-dialog .header {
	display: none; /* BITV doppeltes H2 */
}

.footer-page .text {
	max-width: 60em;
}

.footer-page h1 {
	color: var(--nrw-c-blue-dark);
	margin-top: 16px;
	margin-bottom: 8px;
	line-height: normal;
}

.custom-text h2,
.footer-page h2 {
	margin-top: 16px;
	margin-bottom: 4px;
	font-weight: bold;
	font-size: var(--font-size-m);
	color: var(--nrw-c-blue-dark);
	border-bottom: 1px solid var(--nrw-c-grey-dark);
	line-height: normal;
}

.custom-text h3,
.footer-page h3 {
	margin-top: 16px;
	margin-bottom: 2px;
	color: var(--nrw-c-blue-dark);
	text-decoration: underline;
	font-weight: bold;
	font-size: var(--font-size-s);
	line-height: normal;
}

.custom-text h4,
.footer-page h4 {
	margin-top: 16px;
	margin-bottom: 0;
	color: var(--nrw-c-blue-dark);
	font-weight: bold;
	font-size: var(--font-size-s);
	line-height: normal;
}

.footer-page ul.list__normal {
	padding-inline-start: 2em !important;
}

.footer-page .datenschutz-kontakt {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 16px 32px;
}

.custom-text a,
.link__fax,
.link__tel,
.link__mail,
.link__newtab {
	font-style: italic;
}

.link__fax::before,
.link__tel::before,
.link__mail::before,
.link__newtab::after {
	content: '';
	background-size: 1rem;
	background-repeat: no-repeat;
	width: 1em;
	height: 1em;
	display: inline-block;
}

.link__newtab::after {
	margin: 0 0.25em;
	background-position: right center;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><title>Link öffnet in neuem Tab</title><path d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z" /></svg>');
}
.link__fax::before {
	margin: 0 0.25em 0 0.5em;
	background-position: left bottom;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><title>Fax</title><path d="M19 9H18V4H8V20H22V12C22 10.34 20.66 9 19 9M10 6H16V9H10V6M14 17H10V12H14V17M16 17C15.45 17 15 16.55 15 16C15 15.45 15.45 15 16 15C16.55 15 17 15.45 17 16C17 16.55 16.55 17 16 17M16 14C15.45 14 15 13.55 15 13S15.45 12 16 12C16.55 12 17 12.45 17 13S16.55 14 16 14M19 17C18.45 17 18 16.55 18 16C18 15.45 18.45 15 19 15S20 15.45 20 16C20 16.55 19.55 17 19 17M19 14C18.45 14 18 13.55 18 13S18.45 12 19 12 20 12.45 20 13 19.55 14 19 14M4.5 8C3.12 8 2 9.12 2 10.5V18.5C2 19.88 3.12 21 4.5 21S7 19.88 7 18.5V10.5C7 9.12 5.88 8 4.5 8Z" /></svg>');
}
.link__tel::before {
	margin: 0 0.25em 0 0.5em;
	background-position: left bottom;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><title>Telefon</title><path d="M6.62,10.79C8.06,13.62 10.38,15.94 13.21,17.38L15.41,15.18C15.69,14.9 16.08,14.82 16.43,14.93C17.55,15.3 18.75,15.5 20,15.5A1,1 0 0,1 21,16.5V20A1,1 0 0,1 20,21A17,17 0 0,1 3,4A1,1 0 0,1 4,3H7.5A1,1 0 0,1 8.5,4C8.5,5.25 8.7,6.45 9.07,7.57C9.18,7.92 9.1,8.31 8.82,8.59L6.62,10.79Z" /></svg>');
}
.link__mail::before {
	margin: 0 0.25em 0 0.5em;
	background-position: left bottom;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><title>E-Mail</title><path d="M22 6C22 4.9 21.1 4 20 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6M20 6L12 11L4 6H20M20 18H4V8L12 13L20 8V18Z" /></svg>');
}

/* Login */

.login {
	width: clamp(250px, 30rem, 80vw);
	max-width: 80vw;
}

#lip_formBean .pageContent__forgot__password .Header1,
.login .viewEmbedding :where(h1, h2, h3, h4, h5, h6),
.custom-text h1,
.login h1 {
	font-size: var(--font-size-l) !important;
	line-height: normal;
	color: var(--nrw-c-blue-dark);
}

.pageBrowser .current,
.login .button.with-sub-text .sub-text,
#lip-footer,
#lip-footer .links .item,
#lip-header,
#lip-header .item {
	font-size: var(--font-size-xs);
	line-height: normal;
}

#lip-footer,
#lip-footer.collapsed {
	min-height: clamp(2em, 15vh, 250px);
	max-height: unset;
}

.dialog .content {
	word-break: break-word;
}

.dialog .button {
	font-size: var(--font-size-s);
	height: fit-content;
}

.lip-modal-window-content {
	border: 1px solid transparent;
}

.lip-modal-window .dialog {
	max-width: min(80em, calc(100vw - 20px));
}

.formBody .form-main .content {
	max-width: clamp(800px, 100%, 90vw);
}

#lip_formBean .pageContent__forgot__password :where(.Label, .LabelLegend, .Input),
.viewEmbedding .buttons button,
.viewEmbedding {
	font-size: var(--font-size-s) !important;
}

#lip_formBean #page\:forgot_password {
	background-color: transparent !important;
}

#ffw._tooltip,
.tooltip,
.tooltip-visible {
	display: none !important;
}

/* Help Button outline color wird von LIP überschrieben */
.form .componentWrapper button:focus {
	outline-color: unset !important;
}