/* 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);
}

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

.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 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-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: 5rem;
	height: 5rem;
}

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

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

.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: 0.5em 1em;
}

.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,
#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: var(--font-size-m) !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: var(--font-size-s);
}

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

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

.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: var(--font-size-m) !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>');
}

.FormHelp .markdown p {
	overflow-wrap: break-word;
}

/* Hide Lucom headers from Screenreader */
h1.invisible,
h2.invisible {
	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);
}

.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: 0.75;
}

.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: 330px;
}

/* 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;
}

.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;
}

.DefinitionList dl {
	width: 100%;
}

.DefinitionList dt,
.DefinitionList dd {
	box-sizing: border-box;
	padding: 0.5em;
}

.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 */
[role='checkbox']:where(:focus, :focus-visible) + div .ffw_notEditable.ffw_checkboxBorder,
.formControl.ffw_notEditable[tabindex='0']:where(:focus, :focus-visible) {
	border-width: 2px !important;
	outline: 1px solid var(--nrw-c-black) !important;
}

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

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

.footer-page h1 {
	color: var(--nrw-c-blue-dark);
	margin-top: 1em;
	margin-bottom: 0.5em;
}

.footer-page h2 {
	margin-top: 1em;
	margin-bottom: 0.25em;
	font-weight: bold;
	color: var(--nrw-c-blue-dark);
	border-bottom: 1px solid var(--nrw-c-grey-dark);
}

.footer-page h3 {
	margin-top: 1em;
	margin-bottom: 0.125em;
	color: var(--nrw-c-blue-dark);
	text-decoration: underline;
	font-weight: bold;
}

.footer-page h4 {
	margin-top: 1em;
	margin-bottom: 0;
	color: var(--nrw-c-blue-dark);
	font-weight: bold;
}

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

.footer-page .datenschutz-kontakt {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 1em 2em;
}

.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>');
}