/*
 * -----------------------------------------------------------------------------
 * 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: BundesSans Web;
    font-weight: normal;
    font-style: normal;
    src: url("../fonts/ozg/BundesSansWeb-Regular.ttf") format("truetype");
}

@font-face {
    font-family: BundesSans Web Bold;
    font-weight: bold;
    font-style: normal;
    src: url("../fonts/ozg/BundesSansWeb-Bold.ttf") format("truetype");
}

@font-face {
    font-family: BundesSans Web Italic;
    font-weight: normal;
    font-style: italic;
    src: url("../fonts/ozg/BundesSansWeb-Italic.ttf") format("truetype");
}

@font-face {
    font-family: BundesSans Web BoldItalic;
    font-weight: bold;
    font-style: italic;
    src: url("../fonts/ozg/BundesSansWeb-BoldItalic.ttf") format("truetype");
}

@font-face {
    font-family: BundesSerif Web;
    font-weight: normal;
    font-style: normal;
    src: url("../fonts/ozg/BundesSerifWeb-Regular.ttf") format("truetype");
}

@font-face {
    font-family: BundesSerif Web Bold;
    font-weight: bold;
    font-style: normal;
    src: url("../fonts/ozg/BundesSerifWeb-Bold.ttf") format("truetype");
}

@font-face {
    font-family: BundesSerif Web Italic;
    font-weight: normal;
    font-style: italic;
    src: url("../fonts/ozg/BundesSerifWeb-Italic.ttf") format("truetype");
}

@font-face {
    font-family: BundesSerif Web BoldItalic;
    font-weight: bold;
    font-style: italic;
    src: url("../fonts/ozg/BundesSerifWeb-BoldItalic.ttf") format("truetype");
}

:root {
    --font-base: BundesSans Web, Calibri, Verdana, Arial, Helvetica, sans-serif;
    --color-primary: #004B76;;
    --color-interaction: #0077B6;
    --color-interaction-dark: #00659B;

    --color-border: #798183;
    --color-danger: #E12522;
    --color-muted: #576164;
}

body {
    font-family: BundesSans Web, Calibri, Verdana, Arial, Helvetica, sans-serif;
}

main .content {
    padding: 0 10px;
}

@media (min-width: 768px) {
    main .content {
        padding: 0 12px;
    }
}

a {
    color: #0077B6;;
}

a:hover,
a:focus,
a:active {
    color: #00659B;;
}

input[type="time"]::-webkit-calendar-picker-indicator {
    display: none;
}

#lip_formBean .form div.InputField.componentWrapper .formControl {
    padding: 0 20px;
}

.footer > div > div.flex-container {
    margin: 0 auto;
    box-sizing: border-box;
}

.footer div[id*="footer:FormFooterCopyright"] > .flex-container {
    max-width: 100%;
}

.ButtonPrimaryS:focus,
.ButtonPrimaryS:hover {
    background-color: #00659B !important;;
    text-decoration: underline;
}

.resumable .drop-icon svg {
    display: none;
}

.resumable .drop-icon::before {
    content: "";
    display: inline-block;
    height: 40px;
    width: 40px;
    margin-bottom: 17px;
    background: url("../images/svg/ozg/upload.svg") no-repeat center / contain;
}

/****** Dropdown modifications *************** */

.selectize-dropdown.plugin-lip_select {
    color: #111314; /* TODO: Neuer Theme-Parameter ab nächster Lieferung */
    border: 0;
    box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 26%);
    font-size: 16px;
    letter-spacing: 0;
    line-height: 24px;
    background-color: #FFFFFF;
}

.selectize-dropdown.plugin-lip_select .active {
    border-left: 2px solid #0077B6;;
}

.selectize-dropdown [data-selectable] {
    border-left: 2px solid transparent;
    padding: 14px 20px;

}
/*
.selectize-dropdown [data-selectable] + div {
    border-top: 1px solid #EFF0F1;
    background-color: #FFFFFF;
}
*/
/*
.selectize-dropdown.active {
    background-color: rgb(238, 238, 238);
    color: blue;
    text-decoration: underline;
 }
*/

.selectize-control.single .selectize-input::after {
    content: url("../images/svg/ozg/dropdown_top.svg");
    border: 0;
    top: 0;
    right: 0;
    width: auto;
    height: auto;
    margin: 0 18px 0 0;
    line-height: 46px;
    transform: rotateX(180deg);
    transition: transform 0.2s ease;
}

.selectize-control.single.plugin-lip_customization.plugin-lip_select.plugin-accessibility[data-styleclass^="LanguageDropDown"] {
    flex: none !important;
    margin: 5px -10px 7px 2px !important;
}

.selectize-control.single .selectize-input.LanguageDropDown::after {
    content: "../images/svg/ozg/dropdown_language_top.svg");
    margin: 2px 26px 0 0;
    line-height: 20px;
}

.selectize-input.items.has-options.LanguageDropDown.formControl.formControlText.selectized.full.has-items.focus.ffw_focussed,
.selectize-input.items.has-options.LanguageDropDown.formControl.formControlText.selectized.full.has-items {
    display: inline-block;
    padding-left: 10px;
    margin: 0 26px 0 0;
}

.selectize-input.items.has-options.LanguageDropDown.formControl.formControlText.selectized.full.has-items.focus.ffw_focussed.dropdown-active {
    display: inline-block;
    padding-left: 10px;
    margin: 2px 26px 0 0;
}

.selectize-control[data-styleclass^="LanguageDropDown"] {
    padding-top: 2px;
    width: 135px !important;
}

.selectize-input.items.has-options.LanguageDropDown.formControl.formControlText.selectized.full.has-items.focus.input-active.ffw_focussed {
    margin: 0 10px 0 0 !important;
    width: 135px !important;
}

.selectize-control.plugin-lip_select .selectize-input.LanguageDropDown [data-value] {
    padding-right: 16px;
    padding-left: 6px;
}

.selectize-control.single .selectize-input.dropdown-active::after {
    right: 0;
    margin-top: 0;
    border: 0;
    transform: rotateX(0deg) translateY(-1px);
}

/****** Formhelp/Formnavigation modifications *************** */

/* TODO: Neue Theme-Parameter nach nächster Lieferung */

.formBody .form-main aside.left,
.formBody .form-main aside.right .sticky-content {
    box-shadow: none !important;
}

.formBody .form-main aside.right {
    width: 210px !important;
    /* padding: 0 48px 0 48px; Hilfstexte sind in mobiler Sicht (320 x nnn) nicht vollst. sichtbar; desw. raus genommen */
}

.formBody .form-main aside.right .sticky-content{
    width: 210px !important;
}

.formBody .form-main aside.left .sticky-content,
.formBody .form-main aside.left {
    background-color: transparent;
    padding-left: 24px;
}

@media (max-width: 767px) {
    .formBody .form-main aside.left .sticky-content,
    .formBody .form-main aside.left {
        background-color: #F5F8FA;
    }
}

.formBody .form-main aside.left .sticky-content,
.formBody .form-main aside.left,
.formBody .form-main aside.widescreen.left .sticky-content {
    overflow: hidden;
}


.formBody .form-main .sidebar-visibility-switch button[title~="schließen"] {
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Wenn FormNav eingeklappt, soll sich der Öffnen-Button etwas vom Formular abheben */
.formBody .form-main .sidebar-visibility-switch button[title~="öffnen"] {
    background-color: #FFFFFF !important;
}


.formBody .form-main .sidebar-visibility-switch button:hover,
.formBody .form-main .sidebar-visibility-switch button:focus,
.formBody .form-main .sidebar-visibility-switch button:active {
    background-color: #00659B;;
    border: 2px solid #FFFFFF;
}

.formBody .form-main .sidebar-visibility-switch svg {
    fill: #00659B !important;;
}

/****** Placeholder modifications *************** */

::placeholder {
    font-style: italic;
    font-size: 16px;
    color: #707779;
}

/****** Viewembedding Error modifications *************** */

/* TODO: neue Theme-Parameter ab nächser Lieferung */

/*
ul.ffw_errorLabel > li::before {
    content: url("../images/svg/ozg/alert-circle-alert.svg");
    margin-right: 5px;
    color: #c0003c !important;
}

ul.ffw_errorLabelMin > li::before {
    content: url("../images/svg/ozg/alert-circle-alert.svg");
    margin-right: 5px;
    color: #c0003c !important;
}
*/
.viewEmbeddings {
    font-family: BundesSans Web, Calibri, Verdana, Arial, Helvetica, sans-serif;
}

.viewEmbeddings .headline {
    margin-top: 10px;
    font-size: 12pt;
}

.viewEmbeddings .error {
    margin-top: 64px;
    padding-bottom: 30px;
    background-color: #FAF0F3;
}

.viewEmbeddings .error .content {
    padding: 0;
}

.viewEmbeddings .error .icon {
    background-image: url("../images/svg/ozg/alert-circle-white.svg");
    background-size: 60%;
}

.viewEmbeddings .error .errorLink a {
    font-family: BundesSans Web, Calibri, Verdana, Arial, Helvetica, sans-serif;
    background-position: -10px center;
    background-color: #FAF0F3;
    padding-left: 15px;
    margin: 0;
    background-image: url("../images/svg/menu-right.svg");
}

/****** Checkbox/Radiobutton modifications *************** */
.lip_checkbox > div > .before,
.lip_checkbox > div > .after,
.lip_checkbox > div > .after::before {
	width: 20px !important;
    height: 19px !important;
    font-size: 1rem;
	line-height: 1rem;
    text-align: center;
    color: white;
	border-radius: 0;
}

/* Radiobutton */
.lip_checkbox input[type="radio"]:checked ~ div > .after::before,
.lip_checkbox div[data-type="radio"][data-checked="checked"] ~ div > .after::before {
    background-color: #0077B6 !important;;
    color: #FFFFFF;
}

.lip_checkbox input[type="radio"]:checked ~ div > .after::before,
.lip_checkbox div[data-type="radio"][data-checked="checked"] ~ div > .after::before {
    transform: scale(0.6);
    border-width: 1px !important;
}

/* checked + focus + nicht hover */
.lip_checkbox input[type="radio"]:checked:focus ~ div > .after::before,
.lip_checkbox div[data-type="radio"][data-checked="checked"]:focus ~ div > .after::before {
	border: 2px solid #0077B6 !important;
}
/* hover */
.lip_checkbox input[type="radio"]:hover~div>.before,
.lip_checkbox div[data-type="radio"]:hover~div>.before {
	border: 1px solid #0077B6 !important;
}

/* Checkbox */
/* checked + nicht focus + nicht hover */
.lip_checkbox input[type="checkbox"]:checked ~ div > .after::before,
.lip_checkbox div[data-type="checkbox"][data-checked="checked"] ~ div > .after::before {
    color: #0077B6 ;
	background-color: #FFFFFF !important;
	border: 1px solid #798183 !important;
}
/* checked + focus + nicht hover */
.lip_checkbox input[type="checkbox"]:checked:focus ~ div > .after::before,
.lip_checkbox div[data-type="checkbox"][data-checked="checked"]:focus ~ div > .after::before {
    color: #0077B6 ;
	background-color: #FFFFFF !important;
	border: 2px solid #0077B6 !important;
}
/* checked + focus + hover */
.lip_checkbox input[type="checkbox"]:checked:focus:hover ~ div > .after::before,
.lip_checkbox div[data-type="checkbox"][data-checked="checked"]:focus:hover ~ div > .after::before {
    color: #0077B6 ;
	background-color: #FFFFFF !important;
	border: 2px solid #0077B6 !important;
}
/* checked + nicht focus + hover */
.lip_checkbox input[type="checkbox"]:checked:hover ~ div > .after::before,
.lip_checkbox div[data-type="checkbox"][data-checked="checked"]:hover ~ div > .after::before {
    color: #0077B6 ;
	background-color: #FFFFFF !important;
	border: 1px solid #0077B6 !important;
}
/* nicht checked + hover */
.lip_checkbox input[type="checkbox"]:hover~div>.before,
.lip_checkbox div[data-type="checkbox"]:hover~div>.before {
	border: 1px solid #0077B6 !important;
}

*/
/****** Datepicker modifications *************** */

.datepicker .smallgrid table,
.datepicker table {
    font-size: 16px;
    line-height: 30px;
    border-collapse: separate;
}

.datepicker table tr td.focused.today.active.day,
.datepicker table tr td.month.focused.active,
.datepicker table tr td.month.focused,
.datepicker table tr td.active:active,
.datepicker table tr td.focused {
    border-radius: 50% !important;
}

.datepicker table tr td.year.active,
.datepicker table tr td.today.day,
.datepicker table tr td.today {
    border-radius: 50% !important;
}

.datepicker table tr td.active:active:hover,
.datepicker table tr td.active.highlighted:active:hover,
.datepicker table tr td.active.active:hover,
.datepicker table tr td.active.highlighted.active:hover,
.datepicker table tr td.active:active:focus,
.datepicker table tr td.active.highlighted:active:focus,
.datepicker table tr td.active.active:focus,
.datepicker table tr td.active.highlighted.active:focus,
.datepicker table tr td.active:active.focus,
.datepicker table tr td.active.highlighted:active.focus,
.datepicker table tr td.active.active.focus,
.datepicker table tr td.active.highlighted.active.focus,
.datepicker table tr td.active.highlighted:active,
.datepicker table tr td.active.highlighted.active {
    border-radius: 50%;
}

.datepicker table tr td.active:active,
.datepicker table tr td.active.highlighted:active,
.datepicker table tr td.active.active,
.datepicker table tr td.active.highlighted.active {
    border-radius: 50%;
}

.datepicker table tr td.century:hover,
.datepicker table tr td.decade:hover,
.datepicker table tr td.century.focused:hover,
.datepicker table tr td.decade.focused:hover,
.datepicker table tr td.day:hover {
    border-radius: 50% !important;
    background-color: #F6F9FA !important;
    border: 1px solid #0077B6 !important;;
    color: #111314 !important;
}

.datepicker table tr td.year.focused,
.datepicker table tr td.month.focused,
.datepicker table tr td.focused.day,
.datepicker table tr td.century.focused,
.datepicker table tr td.decade.focused {
    border-radius: 50% !important;
    background-color: transparent !important;
    border: 1px transparent solid !important;
    color: #111314 !important;
}

.datepicker table tr th {
    color: #004B76;;
}

.datepicker table tr th:hover,
.datepicker table tr th.focused {
    background-color: #F6F9FA;
}

.datepicker table tr td {
    border: 1px transparent solid;
}

.datepicker table tr th.datepicker-1-days-switch,
.datepicker table tr th.datepicker-1-months-switch,
.datepicker table tr th.datepicker-switch {
    color: #111314;
}

.datepicker table tr th.dow {
    border-radius: 0;
    border-bottom: 1px #E5E8E9 solid;
}

.datepicker table tfoot tr th.today {
    border-top: 1px #E5E8E9 solid;
    color: #0077B6;;
    font-weight: normal;
}

.datepicker table .datepicker-switch:hover,
.datepicker table .prev:hover,
.datepicker table .next:hover,
.datepicker table tfoot tr th.today:hover,
.datepicker table tfoot tr th.today.focused {
    background-color: #F6F9FA;
}

.datepicker table th.next,
.datepicker table th.prev {
    color: transparent;
}

.datepicker table th.prev::after,
.datepicker table th.next::after {
    font-size: 20px;
    color: #0077B6;;
}

.datepicker table th.prev::after {
    content: "<";
}

.datepicker table th.next::after {
    content: ">";
}

.datepicker table tr td.active:active,
.datepicker table tr td.active.highlighted:active,
.datepicker table tr td.active.active,
.datepicker table tr td.active.highlighted.active {
    color: #FFFFFF !important;
    border-radius: 50%;
}

.datepicker table tr td.year:hover,
.datepicker table tr td.month:hover {
    border-radius: 50%;
    background-color: #F6F9FA;
    border: 1px solid #0077B6;;
}

/* Uploadcontrol modifications *************** */
.resumable .drop-icon::before {
    margin-top: 30px;
}

.UploadDialog div.resumable:hover {
    background-color: #F2F3F4;
}

/* Lookup-List modifications *************** */

/* Lookup-Liste */

.lookupWindow .dialog .header h2{
    font-size: 24px;
    line-height: 32px;
    color: #004B76;;
    font-weight: bold;
    padding-left: 17px;
}

.lookupWindow .dialog {
    min-width: 596px;
}

.lookupWindow .dialog .header {
    padding-top: 48px;
    padding-right: 54px;
    box-shadow: none;
    border-bottom: 0;
    height: auto;
}

.lookupWindow .dialog .description {
    font-size: 16px;
    line-height: 24px;
    color: #111314;
    padding-top: 0;
}

.lookupWindow .dialog .content {
    padding: 8px 48px 0;
}

.lookupWindow .dialog .footer {
    border-top: 0;
}

.lookupWindow .dialog .matchcode {
    padding-top: 16px;
    padding-bottom: 32px;
}

.lookupWindow .dialog .matchcode div {
    padding-right: 0;
}

.lookupWindow .dialog .content .matchcode input {
    height: 46px;
    border-radius: 2px;
    max-width: 94.9%;
    margin: 0;
}

.lookupWindow .dialog .content .matchcode input[type="text"] {
    margin-right: 12px;
    padding: 0 0 0 16px !important;
    background: white url("../images/svg/ozg/search.svg") no-repeat right / contain;
    background-position-x: 98%;
    background-size: 18px;
}

.lookupWindow .dialog .content .matchcode input[type="text"]:hover {
    box-shadow: none;
    border: 1px solid #0077B6;;
}

.lookupWindow .dialog .content .matchcode input[type="text"]:focus {
    border: 2px solid #0077B6;;
    box-shadow: none;
    max-width: 94.42%;
    height: 44px;
}

.lookupWindow .dialog .content .matchcode .button input[type="submit"],
.lookupWindow .dialog .content .matchcode .button {
    border-radius: 4px;
    margin: 0;
}

.lookupWindow .dialog .content .matchcode .button input[type="submit"]:focus,
.lookupWindow .dialog .content .matchcode .button input[type="submit"]:hover {
    text-decoration: underline;
    background-color: #004B76;;
}

.lookupWindow .dialog .content .matchcode .button input {
    height: 48px;
    width: 93px;
    border-radius: 2px;
    border-color: #0077B6;;
    color: #FFFFFF;
    font-size: 14px;
    line-height: 16px;
    background-color: #0077B6;;
}

.lookupWindow .dialog .content .pages {
    float: right;
    margin-top: -10px;
}

.lookupWindow .dialog .content .pages input {
    font-size: 14px;
    border: none;
    border-radius: 0;
    height: auto;
    min-height: 30px;
    min-width: 30px;
    margin-right: 0;
    font-weight: bold;
}

.lookupWindow .dialog .content .pages input:focus,
.lookupWindow .dialog .content .pages input:hover {
    border: none;
    box-shadow: none;
    border-radius: 0;
    text-decoration: underline;
}

.lookupWindow .dialog .content .pages input.current:focus,
.lookupWindow .dialog .content .pages input.current:hover {
    background-color: #0077B6 !important;;
    color: #FFFFFF;
    border: none;
    box-shadow: none;
    border-radius: 50%;
}

.lookupWindow .dialog .content .pages input.current:active {
    border-color: transparent !important;
}

.lookupWindow .dialog .content .pages input.current {
    background-color: #0077B6 !important;;
    color: #FFFFFF;
    border: none;
    box-shadow: none;
    border-radius: 50%;
}

.lookupWindow .dialog .content .pages input[value^="<<"] {
    margin-right: 13px;
}

.lookupWindow .dialog .content .pages input[value^=">>"] {
    margin-left: 13px;
}

.lookupWindow .dialog .content .pages input[value^=">>"],
.lookupWindow .dialog .content .pages input[value^=">|"] {
    font-size: 10px;
    border-left: 1px #E5E8E9 solid;
}

.lookupWindow .dialog .content .pages input[value^="<<"],
.lookupWindow .dialog .content .pages input[value^="|<"] {
    font-size: 10px;
    border-right: 1px #E5E8E9 solid;
}

.lookupWindow .dialog .content [role^="status"] {
    font-style: italic;
    font-size: 14px;
    line-height: 18px;
}

.lookupWindow .dialog .content .list {
    border: none !important;
    overflow: visible !important;
    background-color: #F6F9FA;
}

.lookupWindow .dialog .content .list .table {
    border-spacing: 0 !important;
}

.lookupWindow .dialog .content .list .table .tHeader .tCell{
    color: #004B76 !important;;
    font-weight: bold !important;
    font-size: 16px;
    padding-top: 18px;
    padding-bottom: 18px;
}

.lookupWindow .dialog .content .list .table .tBody .tCell {
    border-top: 1px #E5E8E9 solid;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
    width: 30%;
}

.lookupWindow .dialog .content .list .table .tBody .tCell a,
.lookupWindow .dialog .content .list .table .tHeader .tCell span{
    padding-left: 28px;
    padding-right: 42px;
}

.lookupWindow .dialog .content .list .table .tBody .tRow {
    background-color: #FFFFFF !important;
    font-size: 14px;
    line-height: 24px;
    color: #000000;
}

.lookupWindow .dialog .footer {
    height: 36px !important;
}

.lookupWindow .dialog .footer .button {
    display: none;
}

.lookupWindow .dialog div.content .list .table .tBody .tRow:hover {
    background: url("../images/svg/ozg/hover-bar.svg") no-repeat left / contain;
}

.lookupWindow .dialog div.content .list .table .tBody .tRow:hover .tCell a {
    color: #004B76 !important;;
}

.lookupWindow .dialog .content .error {
    background: url("../images/svg/ozg/alert-circle-alert.svg") no-repeat left / contain;
    background-size: 16px;
    padding-left: 20px;
    font-size: 14px;
    line-height: 18px;
    padding-bottom: 0;
}

.lookupWindow .dialog .header button {
    font-size: 12px;
    border-radius: 0;
    width: 20px;
    height: 30px;
    position: absolute;
    box-shadow: none;
    top: 0;
    right: 6px;
}

.lookupWindow .dialog .header .cross-box {
    position: absolute;
    box-shadow: none;
    top: 16px;
    right: 0;
}

.lookupWindow .dialog .header .cross-inner,
.lookupWindow .dialog .header .cross-inner::after {
    width: 16px;
    height: 2px;
    position: absolute;
    top: 0;
    right: 0;
    box-shadow: none;
}

.lookupWindow .dialog .header button:hover,
.lookupWindow .dialog .header button:focus {
    border: 2px solid transparent;
    box-shadow: none;
}

/* Custom Dialogs */
.viewEmbeddings .info,
.DialogQuestion {
    max-width: 551px !important;
    position: relative;
    padding: 50px 20px 20px 60px;
    background-color: #FFFFFF;
    border-radius: 4px;
    box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 5%);
}

.viewEmbeddings .info
{
    min-width: 200px;
}

.viewEmbeddings .info .headline,
.DialogQuestion .headline {
    font-size: 18px;
    line-height: 26px;
    font-weight: bold;
    color: #111314;
    margin-bottom: 16px;
}

.viewEmbeddings .info .buttons,
.DialogQuestion .content .buttons {
    padding-top: 48px;
    display: flex;
    justify-content: end;
}

.DialogQuestion .content .buttons input[data-event-click-params*='"progress"'] {
    border-radius: 2px;
    flex-basis: auto !important;
    min-height: unset !important;
    cursor: pointer;
    font-size: 14px;
    padding: 0 16px;
    height: 32px;
    background-color: #FFFFFF;
    color: #0077B6;;
}

.DialogQuestion .content .text {
    font-size: 16px;
    line-height: 24px;
    color: #000000;
}

.DialogQuestion .icon {
    background-color: #FEFAEB;
    background-image: url("../images/svg/help-circle-yellow.svg");
    padding-right: 3px;
}

.viewEmbeddings .info .icon {
    background-color: #FEFAEB;
    background-image: url("../images/svg/information-outline.svg");
    padding-right: 3px;
}

.DialogQuestion .content .buttons input[data-event-click-params*='"progress"']:focus,
.DialogQuestion .content .buttons input[data-event-click-params*='"progress"']:hover
{
    text-decoration: underline;
    background-color: #FFFFFF;
    border-color: #FFFFFF;
    box-shadow: none;
}

.DialogInfo {
    max-width: 551px !important;
    position: relative;
    padding: 50px 20px 20px 60px;
    background-color: #FFFFFF;
    border-radius: 4px;
    box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 5%);
}
.DialogInfo .headline {
    font-size: 18px;
    line-height: 26px;
    font-weight: bold;
    color: #111314;
    margin-bottom: 16px;
}

.DialogInfo .content .buttons {
    padding-top: 48px;
    display: flex;
    justify-content: end;
}

.DialogInfo .content .buttons input[data-event-click-params*='"progress"'] {
    border-radius: 2px;
    flex-basis: auto !important;
    min-height: unset !important;
    cursor: pointer;
    font-size: 14px;
    padding: 0 16px;
    height: 32px;
    background-color: #FFFFFF;
    color: #0077B6;;
}

.DialogInfo .content .text {
    font-size: 16px;
    line-height: 24px;
    color: #000000;
}

.DialogInfo .icon {
    background-color: #FEFAEB;
    background-image: url("../images/svg/information-outline.svg");
    background-size: 24px;
    padding-right: 3px;
}

.DialogInfo .content .buttons input[data-event-click-params*='"progress"']:focus,
.DialogInfo .content .buttons input[data-event-click-params*='"progress"']:hover
{
    text-decoration: underline;
    background-color: #FFFFFF;
    border-color: #FFFFFF;
    box-shadow: none;
}

.viewEmbeddings .buttons input[data-event-click-params*='"close"'],
.DialogQuestion .content .buttons input[data-event-click-params*='"cancel"'],
.DialogInfo .content .buttons input[data-event-click-params*='"cancel"']{
    border-radius: 2px;
    flex-basis: auto !important;
    min-height: unset !important;
    cursor: pointer;
    font-size: 14px;
    padding: 0 16px;
    height: 32px;
    border: 1px solid #0077B6;;
    background-color: #0077B6;;
    color: #FFFFFF;
}

.viewEmbeddings .buttons input[data-event-click-params*='"close"']:focus,
.viewEmbeddings .buttons input[data-event-click-params*='"close"']:hover,
.DialogQuestion .content .buttons input[data-event-click-params*='"cancel"']:focus,
.DialogQuestion .content .buttons input[data-event-click-params*='"cancel"']:hover,
.DialogInfo .content .buttons input[data-event-click-params*='"cancel"']:focus,
.DialogInfo .content .buttons input[data-event-click-params*='"cancel"']:hover {
    border: 1px solid #004B76;;
    background-color: #004B76;;
    text-decoration: underline;
    box-shadow: none;
}

.viewEmbeddings .buttons input {
    font-family: BundesSans Web, Calibri, Verdana, Arial, Helvetica, sans-serif;
}

#lip_formBean .pageContent__Start .ffw_errorLabel{
    color: #c0003c !important;
 }
 #lip_formBean .pageContent__Allgemeines .ffw_errorLabel{
    color: #c0003c !important;
 }
 #lip_formBean .pageContent__Dienstzeiten .ffw_errorLabel{
    color: #c0003c !important;
 }
 #lip_formBean .pageContent__Zuschlaege .ffw_errorLabel{
    color: #c0003c !important;
 }
 #lip_formBean .pageContent__Altersanspruch .ffw_errorLabel{
    color: #c0003c !important;
 }
 #lip_formBean .pageContent__Versorgungsausgleich .ffw_errorLabel{
    color: #c0003c !important;
 }
 #lip_formBean .pageContent__Zusammenfassung .ffw_errorLabel{
    color: #c0003c !important;
 }
 #lip_formBean .pageContent__Berechnung .ffw_errorLabel{
    color: #c0003c !important;
 }

/* Anpassungen Modus "minimales Rendering" mobile Sicht */
.responsive-min .flex-container {
    padding: 10px 0px;
}

/* Startseite FAQ-Frage in blau */
summary {
	font-family: Arial;
	font-size: 18px;
	line-height: 26px;
	font-weight: bold;

	color: #0077B6;
}

summary:hover {
	border: 1px solid #0077B6;
	border-radius: 2px;
}

summary:focus {
	border: 1px solid #0077B6;
	border-radius: 2px;
}

/*  CSS FAQ */
/* Startseite FAQ-Frage in blau anpassen für "minimales Rendering" mobile Sicht */
@media only screen and (max-width: 599px) {
	summary {
	font-family: Arial;
	font-size: 15px;
	font-weight: bold;
	color: #0077B6;
	}
}
/* Startseite FAQ-Frage h3 inline, damit marker (Pfeil) und Frage auf einer Höhe */
details summary h3 {
	display: inline;
}

.faq-list {
	padding-left: 0px;
}


/* Fix for FormNavigation pushed downwards with spacing */
.formBody .form-main aside .sticky-spacer {
    display: block;
    flex-grow: 0 !important;
}

.headerPanel .companyLogo2 a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    margin-right: 10px;
}

.headerPanel .companyLogo2 img {
    max-width: 100%;
    max-height: 100%;
    border: solid 2px transparent;
    border-radius: 3px;
    box-sizing: border-box;
    margin-right: 10px;
}

/** im Formular den footer als relative anzeigen, damit nichts überlagert wird. **/
:not(body>#footer)>.footerPanel {
    position: relative;
	width: unset;
}

/** folgenden 4 Abschnitte: Anpassungen für Responsivität Footer **/
.footerPanel .textcontainer {
    display: flex;
    justify-content: space-between;
}
  
.footerPanel .textcontainer .sitemap>ul{
    list-style:none;
    margin: 0;
    padding-left: 0;
    display: flex;
} 

/* bei Breite < 1023 sollen Links im Footer untereinander dargestellt werden*/ 
@media (max-width: 1023px) {
    .footerPanel .textcontainer>*:not(:first-child){
        padding-top: 1rem;
    }

    .footerPanel .textcontainer,
    .footerPanel .textcontainer .sitemap ul {
        flex-direction: column;        
    }
}

/** Anpassungen der Contenbreite für verschiedene Bildschirmbreiten **/
/* Contentbreite = 936px ab Desktopbreite von 1120px gemäß Styleguide */
@media (min-width: 1120px){
.formBody .form-main .inner-content {
  margin: 0 12px !important;
}
}

/* Contentbreite = 656px ab Tabletbreite von 768px gemäß Styleguide */
@media only screen and (min-width: 768px) and (max-width: 1119px) {
.formBody .form-main .inner-content {
  margin: 0 44px !important;
}
}

/* Contentbreite = 320px ab Mobilbreite (S) von 375px gemäß Styleguide */
@media (max-width: 767px) {
.formBody .form-main .inner-content {
  margin: 0 17.5px !important;
}
}

/* CSS für modalen Dialog mit Hinweistext bei "Berechnung starten"  */
.modalBezuege svg {
   height: 100px;
}

@media (min-width: 500px) {
.modalBezuege {
    background-color: #FFFFFF;
    border: 1px solid #0077B6;
    height: 180px;
    width: 450px;
    box-shadow: 5px 5px 5px rgb(0, 75, 118);
}
}

@media (max-width: 499px) {
.modalBezuege {	
	background-color: #FFFFFF;
    border: 1px solid #0077B6;
    height: 180px;
    width: 300px;
    box-shadow: 5px 5px 5px rgb(0, 75, 118);
} 
}

.calculationInProgress {
    color: #0077B6 ;
	background-color: #FFFFFF !important;
	padding: 15px 10px 0px 10px;
    text-align: center;
}

.toolbar li.button {
    display: grid;
    grid-template-columns: [input]auto [label]auto;
}
.toolbar li.button>label{
    align-self: center;
    font-size: 14px;
    color: #576164;
}

/* Die max-width der beiden Logos im Header werden unterhalb einer Screen-Breite von 420px von 165px auf 130 verringert, damit Session-Timer komplett angezeigt wird  */
@media only screen and (max-width: 420px) {
.formToolbar .logo .lip_companyLogoLink > img {
	max-width: 130px;
}
}

/* Die font-size der "Ändern"-Button auf Zsf-Seite muss für Screen-Breite 800 bis einschl. 884 verringert werden, damit Buttontext komplett lesbar ist. */
@media only screen and (min-width: 800px) and (max-width: 884px) {
#lip_formBean .pageContent__Zusammenfassung .fmsButtonSecondary2 {
	font-size: 13px !important;
}