/* apply a natural box layout model to all elements */
/*check all boxes that use padding and borders they have to be adjusted : BORDERBOX ADJUSTED*/
/* needed because font rendering gives different heights on IE than on other systems; also helps in subdividing a column further- see below */

/* width (border-box) = left_border_w + left_padding_w + content + right_padding_w + right_border_w

/* if before and after is used that this ia also applied */
*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.noBorder {
    border: 0px none;
}

/*add this clearfix to the container (with the floated elements); appBtnBar (see appLayout.css) always floates buttongroups left or right */
.clearFix::after {
    content: "";
    clear: both;
    display: table;
}


/* initial commit cover */

/*.commitCoverContainer {*/
/*    position: fixed;*/
/*    z-index: 1997;*/
/*    top: 0;*/
/*    left: 0;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    display: none;*/
/*}*/

.commitCover {

    position: absolute;
    z-index: 1999;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;

    visibility: hidden;
    transition-property: opacity, visibility;
    transition-duration: 0.5s;
    transition-delay: 0.4s;

/*    animation-delay: 5s;*/
/*animation-name: fadeIn;*/
/*    animation-duration: 1s;*/

    background-color: rgba(100, 100, 100, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
}

.commitCover.active {
    /*animation-name: fadeIn;*/
    /*animation-duration: 0.2s;*/
    /*animation-delay: 3s;*/
    visibility: visible;
    opacity: 1;
}

.commitCover.passive {
    opacity: 0;
    visibility: hidden;
}

.commitCoverLoader {

    background-image: url("/KevuSWeb/javax.faces.resource/loading/logo_80opaque.svg.jsf?ln=images&sbnv=2025-12-15_164944");
    background-repeat: no-repeat;
    background-position: center;
    width: 40px;
    height: 40px;
    z-index: 1999;
}

.active .commitCoverLoader {
    /*animation-name: rotateCW, pulseSize150, pulseOpacity50;*/
    /*animation-duration: 1s, 1s, 1s;*/
    /*animation-iteration-count: infinite;*/

    animation-name: rotateCCW;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}


.waitForPdfDiv {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: var(--gray10);
    color:var(--darkBlue100);
}

.waitForPdfDiv .waitForPdfIcon {

    font-size: 72px;
    animation-name: pulseSize150, pulseOpacity50;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
}

.waitForPdfText,
.errorForPdfText {
    margin-top: 35px;
    text-decoration: none;
    font-family: sbn_sans_serif, Times New Roman, Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
}

.waitForPdfDiv .errorForPdfIcon {
    color: var(--orange100);
    font-size: 72px;
}

.errorForPdfText {
    color: var(--orange100);
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
     opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes  rotateCW {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(359deg);
    }
}

@keyframes  rotateCCW {
    from {
        transform: rotate(359deg);
    }

    to {
        transform: rotate(0deg);
    }
}

@keyframes  pulseSize150 {
    from {
        transform: scale(1);
    }

    50% {
        transform: scale(1.5);
    }

    to {
        transform: scale(1);
    }
}

@keyframes  pulseFontSize48To72 {
    from {
        font-size: 48px;
    }

    50% {
        font-size: 72px;
    }

    to {
        font-size: 48px;
    }
}

@keyframes  pulseOpacity50 {

    from {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }

    to {
        opacity: 1;
    }

}


/* used by custom components
**/

.forceRight {
    text-align: right !important;
}

.forceLeft {
    text-align: left !important;
}

#contentDiv {
    /*marker class for scrolling ; style see appCtnArea in appLayout.css*/
}

/*NOTE on width ol lblCol and compCol:
Col width defined in Pixel and the conten of a col can take 25%, 50%, 75%, 100%
so the width has to be dividable by 4 to avoid rounding errors and so layout defects like line breaks/overflow
*/
.formLabelCol {
    text-align: right;
    width: 196px; /* div by 4 -> 49*/
    display: inline-block;
    vertical-align: top;
    padding-right: 2px;
    padding-top: 4px;
}

.formLabelColX3Left {
    text-align: left;
    padding-right: 2px;
    padding-left: 2px;
    width: 644px; /*the sum of lblCol(196) + compCol(252) + lblCol(196)*/
    display: inline-block;
    vertical-align: top;
}

.formCompCol {
    width: 252px; /* div by 4 -> 63*/
    display: inline-block;
    vertical-align: top;

}

.formCompInLblCol {
    width: 196px;
    display: inline-block;
    vertical-align: top;
}

.formCompInLblColX2 {
    width: 448px; /*the sum of lblCol(196) + compCol(252)*/
    display: inline-block;
    vertical-align: top;
}

.formCompColX2 {
    width: 448px; /*the sum of compCol(252) + lblCol(196)*/
    display: inline-block;
    vertical-align: top;
}

.formCompColX3 {
    width: 700px; /*the sum of compCol(252)+ lblCol(196) + compCol(252)*/
    display: inline-block;
    vertical-align: top;
}

/*special: ONLY FOR lblTxt extends into the first reserved lblCol*/
.formCompColX4 {
    width: 896px; /*the sum of lblCol(196) + compCol(252)+ lblCol(196) + compCol(252)*/
    display: inline-block;
    vertical-align: top;
}


/* PROBLEM WITH EMPTY TEXT NODES in the columns, caused by html formating
    see below

    THIS is NOW set in the .inputRow

    - the word spacing needs to be reset for the contained text > word-spacing: 0; (yes this is funny but now we have the browser defined text spacing)
*/

/*.formCompCol,
.formCompInLblCol,
.formCompColX2,
.formCompColX3,
.formCompColX4 {
    word-spacing: -0.3em; //should work in most modern browsers: needs to be tested
}*/

/*The form comp width in 25, 50, 75, 100% of the surrounding comp col*/

.formLabel100 {
    width: 100%;
    display: inline-block;
    padding-right: 4px;
}

.formComp100,
.formComp100.ui-selectonemenu,
.p-datepicker.formComp100,
.p-datepicker.formComp100 .ui-inputfield {
    width: 100%;
    min-width: 100px !important;
}

.formComp75,
.formComp75.ui-selectonemenu,
.p-datepicker.formComp75,
.p-datepicker.formComp75 .ui-inputfield {
    width: 75%;
}

.formComp50,
.formComp50.ui-selectonemenu,
.p-datepicker.formComp50,
.p-datepicker.formComp50 .ui-inputfield {
    width: 50%;
}

.formComp48,
.formComp48.ui-selectonemenu,
.p-datepicker.formComp48,
.p-datepicker.formComp48 .ui-inputfield {
    width: 48%;
}

.formSpacer2 {
    display: inline-block;
    width: 1%; /*not set to '2%' because in % we might experience different rounding problems in different browsers*/
}

.formComp25,
.formComp25.ui-selectonemenu {
    width: 25%;
}

/*
* prefix and suffix test
*/

.formText100 {
    vertical-align: top;
    padding-top: 4px;
    width: 100%;
    display: inline-block;
}

.formCompColX3 .formText100.readonly,
.formCompColX2 .formText100.readonly,
.formCompCol .formText100.readonly,
.formCompCol .formText75.readonly,
.formCompCol .formText50.readonly,
.formCompCol .formText25.readonly,
.formCompCol .formText0.readonly {
    vertical-align: top;
    padding-top: 4px;
    width: 100%;
    display: inline-block;
    padding-left: 5px;
}


.formText75 {
    vertical-align: top;
    padding-top: 4px;
    width: 75%;
    display: inline-block
}

.formText50 {
    vertical-align: top;
    padding-top: 4px;
    width: 50%;
    display: inline-block
}

.formText25 {
    vertical-align: top;
    padding-top: 4px;
    width: 25%;
    display: inline-block
}

.formText0 {
    vertical-align: top;
    padding-top: 4px;
    width: 0%;
    display: inline-block
}

.formTextForPrefixSuffix {
    text-align: right;
}

.compPrefix {
    text-align: right;
    padding-right: 3px;
}

.compSuffix {
    text-align: left;
    padding-left: 3px;
}

select,
.ui-widget select {
    font-family: sbn_sans_serif, Arial, Helvetica, sans-serif;
    font-size: 13px;
    height: 22px; /*needed explicit for IE (incl 10), but produces mild artefacts in firefox now (sometimes the popup with the options is missing its lower border) */
}

/*radiobuttons equal columns in horizontal layout;
works together with stgt tag there the css class is set.
We do not expect more than 6 radiobuttons*/
table.radioEqCol2 tr td {
    width: 50%;
}

table.radioEqCol3 tr td {
    width: 33%;
}

table.radioEqCol4 tr td {
    width: 25%;
}

table.radioEqCol5 tr td {
    width: 20%;
}

table.radioEqCol6 tr td {
    width: 16.5%;
}

table.radioHorizontal tr,
table.radioVertical tr {
    vertical-align: top;
}

table.radioHorizontal td input[type="radio"],
table.radioVertical td input[type="radio"] {
    float: left;
}

table.radioHorizontal td label,
table.radioVertical td label {
    vertical-align: sub;
    display: table-cell;
    clear: both;
}

table.radioHorizontal td,
table.radioVertical td {
    text-align: left;
}

/*autocomplete (for beruf) */

/*panel has w of content*/
.autoCompletePanel {
    width: unset !important;
}

.ui-autocomplete.formComp100 {
    width: 100%;
}

.ui-autocomplete.formComp100 input {
    width: 100%;
}

.p-datepicker .ui-datepicker {
    width: 300px;
}

/*PROBLEM WITH EMPTY TEXT NODES in the columns, caused by html formating
    see above
*/
.formLabel100,
.formComp100,
.formComp75,
.formComp50,
.formComp48,
.formSpacer2,
.formComp25,
.formText100,
.formText75,
.formText50,
.formText25,
.formText0,
.compPrefix,
.compSuffix,
.resetWordspacing {
    word-spacing: 0; /*reset wordspacing from parent*/
}

.inputRow.resetWordspacing {
    word-spacing: 0; /*reset wordspacing from parent*/
}

.ui-button-text,
.ui-dialog-title {
    word-spacing: 0; /*reset wordspacing from parent*/
}

.disabledText,
input[type="radio"][disabled] + label {
    color: var(--textColorDisabledStd);  /*there is no disabled text ?? */
}

/* REQUIRED .req see theme.css*/



/*The special list edit component */

.listEditInput {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 34px;
    grid-template-rows: 30px 30px 30px;
}

.ui-selectonelistbox.listEditList {
    border-style: solid;
    border-width: 1px;
    border-color: var(--gray30);
    width: 100%;
    overflow: auto;
    word-spacing: 0;
    grid-column: 1;
    grid-row: 1 / 4;
}

.ui-button.ui-state-default.listEditAddBtn,
.ui-button.ui-state-default.listEditRemoveBtn {
    margin-right: 0px;
    margin-left: 10px;
}

.listEditAddBtn {
    grid-column: 2;
    grid-row: 1;
}

.listEditRemoveBtn {
    grid-column: 2;
    grid-row: 2;
}

/*Non Editable list component (Berater) dataList*/
.nonEditable.ui-datalist .ui-datalist-content {
    border: none;
    font-weight: bold;
}

.nonEditable.ui-datalist .ui-datalist-content ul {
    margin-top: 2px;
    margin-bottom: 0px;
    padding-left: 10px;
    list-style-type: none;
}

/*.ui-selectonelistbox.listEditList.ui-state-focus {

    border-color:#74B2E2;
}*/

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*
* input groups
*/

/* replaces .UeberschriftenFormular*/
/* the input group title */
.inputGroupTitle {
    font-family: sbn_sans_serif, Times New Roman, Arial, Helvetica, sans-serif;
    font-size: var(--defaultTextSize);
    line-height: 15px;
    font-weight: bold;
    text-align: left;
    color: var(--darkBlue100);
    background-color: var(--gray10);
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 15px;
    padding-right: 5px;
    margin-top: 5px;
    margin-bottom: 10px;
    margin-left: 5px;
    margin-right: 5px;
}

.inputGroupTitle.inForm {
    background-color: transparent;
}

/* if there is no inputGroup Title, we still close the box at the top */
.inputGroupTitleEmpty {
    height: 0px;
    border-style: none;
    border-top-width: 0px;
    border-left-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
}

.inputFormSeparatorTitle {

    font-family: sbn_sans_serif, Times New Roman, Arial, Helvetica, sans-serif;
    font-size: var(--defaultTextSize);
    font-weight: bold;
    color: var(--darkBlue100);
    background-color: var(--gray10);
    padding-top: 3px;
    padding-bottom: 3px;

    text-align: center;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 5px;
    margin-right: 5px;
    line-height: 21px;
    text-indent: 0px;

}

/* replaces old table structure for input */
/* the bottom part: only works with preceeding inputgroup title or empty title */
.inputGroup {
    font-family: sbn_sans_serif, Arial, Helvetica, sans-serif;
    font-size: var(--defaultTextSize);
    text-align: left;
    background-color: #FFFFFF;
    /*width:900px;*/ /*BORDERBOX ADJUSTED*/ /* 900 + 2xpadding + 2xborder -> 906*/

    border:none;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0px;
    margin-bottom: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 2px;
    padding-right: 2px;
}

/*completely closed inputgroup without title*/
.inputGroupClosed {
    font-family: sbn_sans_serif, Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #000000;
    text-align: left;
    background-color: #FFFFFF;
    /*width:900px;*/ /*BORDERBOX ADJUSTED*/ /* 900 + 2xpadding + 2xborder -> 906*/

    border-color: #c3c3c3;
    /*border-style:solid; 30.5.2018. No border should be visible anymore so for right now we disable it*/
    border-style: none;
    border-top-width: 1px;
    border-left-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-radius: 0px 10px 10px 10px;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0px;
    margin-bottom: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 2px;
    padding-right: 2px;
}


tr.ui-widget-content td {
    border: none;
}


/*
Problems with table structure that was used before: use of colspan and use of rowspan

*/

/* PROBLEM WITH EMPTY TEXT NODES in the columns, caused by html formating
    - we eliminate the text-spacing
    - the word spacing needs to be reset for the contained text > word-spacing: 0; (yes this is funny but now we have the browser defined text spacing)
*/

.inputRow {
    /*line-height: 24px;*/
    padding-bottom: 4px; /*30.5.2018 padding top/bottom 2px->4px*/
    padding-top: 4px;
    word-spacing: -0.3em;
}


/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/**
*  new styles TABBED PANE, INDEXED PANE
*/

.tabArea, .indexArea {
    width: 100%;
    border: 0px none;
    padding-left: 5px;
    padding-right: 5px;
}

.tabArea {
    margin-top: 5px;
}

.tabRow, .indexRow {

    font-family: sbn_sans_serif, Arial, Helvetica, sans-serif;
    font-size: var(--defaultTextSize);
    line-height: 15px;
    text-align: center;
    display: flex;
}

.tabRow {
    background-color: var(--blue100);
    padding-bottom: 5px;
}

.indexRow {

    background-color: var(--blue10);
    padding-top: 10px;
}

/* tabbed */
.tabSelected,
.tabUnselected,
.indexSelected,
.indexUnselected {

    flex-basis: 100%; /* need any width so all tabs have the same size: together with table-layout:fixed*/
    height: 44px;

    border-style: solid;
    border-top-width: 2px;
    border-bottom-width: 2px;
    border-left-width: 2px;
    border-right-width: 2px;

    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 5px;
    padding-left: 5px;

    /*border-top-left-radius: var(--borderRadiusStd);*/
    /*border-top-right-radius: var(--borderRadiusStd);*/

}
.tabSelected,
.tabUnselected {

    padding-top: 11px;
    padding-bottom: 7px;
    padding-left: 1px;
    padding-right: 1px;
}

.tabUnselected {
    color: white;
    background-color: var(--darkBlue100);
    border-color: white;
    /* need to be reassign for jsf link*/
    text-decoration: none;
    text-align: center;
    cursor: pointer;
}

.tabUnselected:hover {
    background-color: var(--darkBlue80);
}

.tabSelected {

    color: white;
    background-color: var(--blue100);
    border-top-color: var(--blue100);
    border-bottom-color: var(--blue100);
    /*border-left-color: white;*/
    /*border-right-color: white;*/
    border-left-width: 0px;
    border-right-width: 0px;
}

.tabRow .tabSelected:first-child,
.indexRow .indexSelected:first-child,
.tabRow .tabUnselected:first-child,
.indexRow .indexUnselected:first-child {
    border-left: none;
}

.tabRow .tabSelected:last-child,
.indexRow .indexSelected:last-child,
.tabRow .tabUnselected:last-child,
.indexRow .indexUnselected:last-child {
    border-right: none;
}


/* indexed */
.indexSelected,
.indexUnselected {

    /*display: block;*/
    /*flex-basis: 100%;*/

    padding-top: 5px;
    padding-bottom: 9px;
    padding-left: 1px;
    padding-right: 1px;

    /*border-style: solid;*/
    /*border-top-width: 2px;*/
    /*border-bottom-width: 2px;*/
    /*border-left-width: 1px;*/
    /*border-right-width: 1px;*/

    /*border-top-left-radius: var(--borderRadiusStd);*/
    /*border-top-right-radius: var(--borderRadiusStd);*/


}

.indexSelected {

    /*color: var(--blue100);*/
    color: var(--darkBlue100);
    /*background-color:white;*/
    background-color:var(--blue10);
    border-color: var(--blue10);
    /*border-left-color: var(--gray10);*/
    /*border-right-color: var(--gray10);*/
    border-left-width: 0px;
    border-right-width: 0px;
}

.indexUnselected {
    /*color: var(--darkBlue100);*/
    color: var(--darkBlue80);
   background-color:var(--gray20);
   border-color: var(--gray10);

   /* need to be reassign for jsf link*/
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.indexUnselected:hover {
    background-color: var(--gray30);
}

/*
.indexUnselected label {
    cursor:pointer;
}*/

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/


.inputGroupTitle.footNoteTitle,
.inputGroupTitle.errorPaneTitle {
    color: var(--darkBlue100);
    margin-bottom: 0px;
}

.inputGroupTitle.footNoteTitle {
    background-color: var(--gray10);
}
.inputGroupTitle.errorPaneTitle {
    background-color: var(--red20);
}

.errorPane,
.footNote {
    font-size: var(--defaultTextSize);
    line-height: 15px;
    color: var(--darkBlue100);
    margin: 0px 5px 5px 5px;
    padding: 10px 15px;
}

.errorPane{
    background-color: var(--red10);
}

.footNote {
    background-color: var(--gray6);
}


.formHelpBtn,
.ui-button.ui-state-default.formHelpBtn {
    border-radius: 8px;
    width: 16px;
    height: 16px;
    float: right;
    vertical-align: bottom;
    margin-right: 10px;
    margin-top: 0px;
}

.ui-button.ui-state-default.ui-button-icon-only.formHelpBtn span.info-icon-bkgnd {
    width: 16px;
    height: 16px;
    background-image: url("/KevuSWeb/javax.faces.resource/help/info_i.svg.jsf?ln=images&sbnv=2025-12-15_164944");
    background-repeat: no-repeat;
    background-position: left top;
}

/***
Note: Fonts are defined within the primeface theme, so they can also be used there for all primeface and JSF components
The primeface theme is a variartion of a JQueryUI theme
**/

/* the p:dialog with styleClass:sbnDlg*/

.sbnDlg {
    min-width: 400px; /*p:dialog has problems with min width*/
    max-width: 600px;
}

/* this style is used for the save dialogue */

.sbnDlgSmall {
    min-width: 250px; /*p:dialog has problems with min width*/
    max-width: 600px;
}

.sbnDlg.ui-widget.ui-widget-content,
.sbnDlgSmall.ui-widget.ui-widget-content {
    border-radius: 8px;
    border: none;
}


.ui-dialog.ui-widget-content .ui-dialog-titlebar {
    padding: 7px 10px;
}

.ui-dialog.ui-widget-content .ui-dialog-content {
    /*max-height:350px;*/
    padding: 10px;
}

.ui-dialog.ui-widget-content .ui-dialog-footer.ui-widget-content,
.ui-dialog.ui-widget-content .ui-dialog-buttonpane.ui-widget-content,
.ui-dialog.ui-widget-content .ui-dialog-content.ui-widget-content .dlgBtnBntRight {
    border: none;
    padding: 7px 10px;
    background-color: var(--gray10);
}

.ui-dialog.ui-widget-content .ui-dialog-content.ui-widget-content .dlgBtnBntRight {
    /*special fix due to Primefaces bug, also see above */
    margin-top: 10px;
    margin-left: -11px;
    margin-right: -11px;
    margin-bottom: -11px;
}

.ui-dialog.ui-widget-content .ui-dialog-buttonpane.ui-widget-content {
    margin-top: 0px;
}

/*special Help Dialog*/
.helpDlg.ui-dialog-content.ui-widget-content {
    padding-bottom: 0px;
}

.dlgBtnBntRight {
    display: flex;
    align-items: end;
    justify-content: right;
}

.unselectable {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none; /*Introduced in IE 10. See http://ie.microsoft.com/testdrive/HTML5/msUserSelect*/
    user-select: none;
}

.activateJavascriptBox {

    position: absolute;
    left: 300px;
    top: 100px;
    width: 400px;
    height: 200px;
    background-color: #FFFFFF;
    border-color: #000000;
    border-width: 2px;
    border-style: double;
    z-index: 1001;
}

.activateJavascriptText {
    position: absolute;
    top: 50%;
    width: 100%;
    color: #FF0000;
    font-weight: bold;
    text-align: center;
}

/***********************
* TARIF INFO BAR title: above tarif input
************************/
.tarifInfoBar {
    width: 930px;
    padding: 10px;
}

.tarifInfoArrow {
    font-size: var(--defaultTextSize);
    vertical-align: middle;
}

.tarifInfo {

    font-family: sbn_sans_serif, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: var(--darkBlue100);
}

.tarifInfoLbl {
    font-weight: bold;
    padding-left: 4px;
    padding-right: 4px;
}

/* Tarifrechner nextTabBtn
*/

.nextTabBtn {

    cursor: pointer;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 11px;
    text-decoration: none;
    background-color: transparent;
    border: 0px none !important;
}

.nextTabBtn:hover,
.nextTabBtn:focus {

    color: #BDE4F7;
}

/*
 * PAGES : general, error
 */


.inputPageHeader,
.errorPageHeader,
.pageHeader {

    background-color: var(--darkBlue100);
    line-height: 20px;
    font-family: sbn_serif, serif;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    color: white;
    /*width:900px;*/ /*BORDERBOX ADJUSTED*/ /* width of tableinput2 + padding of input group + borderwidth of input group*2 - own padding*/
    padding: 10px 25px;

    margin-bottom: 5px;
}

.errorPageDescription,
.pageDescription {

    font-family: sbn_sans_serif, Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #000000;
    text-align: left;
    background-color: #FFFFFF;
    padding-left: 25px;
}

/***** bigger so display on highRes Smartphone displays is ok ********/
.errorBigHeader,
.bigHeader {

    line-height: 54px !important;
    font-size: 48px !important;
}

.errorBigText,
.bigText {

    font-size: 48px !important;
}

/***** for startAsyncViaLink.xhtml bigger so display on highRes Smartphone displays is ok ********/
.bigText36,
.bigHeader36,
.bigField36 {
    font-size: 36px !important
}

.bigHeader36 {
    line-height: 48px !important;
}

.bigField36 {
    height: unset !important;
}

.btnForbig36 {
    font-size: 24px !important;
    height: 44px !important;
}

/*****************/

/*for iphone/ipad to supress automatic text change in landscape/portrait switching*/
@media only screen and (min-device-width: 320px) and (max-device-width: 1024px) {

    html {
        -moz-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
        -webkit-text-size-adjust: 100%;
    }
}

/*Gruene Rente
*/
.ui-selectbooleancheckbox.grueneRente .ui-chkbox-label {
    background-image: url("/KevuSWeb/javax.faces.resource/tarifrechner/GrueneRente.png.jsf?ln=images&sbnv=2025-12-15_164944") !important;
    background-repeat: no-repeat;
    display: inline-block;
    width: 142px;
    height: 35px;
    vertical-align: top;
}

/* vers.diagnose
*/
/*logo instead of radio button text*/
.gfAuswahlRadio tr td:nth-child(2) label {
    background-image: url("/KevuSWeb/javax.faces.resource/tarifrechner/versdiagnoseLogo.jpg.jsf?ln=images&sbnv=2025-12-15_164944");
    background-repeat: no-repeat;
    display: inline-block;
    width: 190px;
    height: 30px;
    margin-top: -7px;
    margin-left: 5px;
}

.versdiagnoseHinweis {
    display: inline-block;
    width: 350px;
    margin-top: 3px;
    word-spacing: 0;
}

.versdiagnoseCheckmark {
    display: inline-block;
    background-image: url("/KevuSWeb/javax.faces.resource/tarifrechner/versDiagnoseCheck.png.jsf?ln=images&sbnv=2025-12-15_164944");
    background-repeat: no-repeat;
    background-size: 16px 16px;
    width: 16px;
    height: 16px;
    margin-right: 7px;
}

.versdiagnose2Wochen {
    font-size: 11px;
}

.versdiagnoseWarning {
    color: var(--red100);
    padding-left: 10px;
    font-weight: bold;
}

/*
Primefaces p:tabview problem: used in Tarif details

with custom themes (based on theme roller):
render or re-render a TabView component with/without Ajax

>> all tabs' contents are displayed, one underneath the other.

Workaraound
With jQuery ThemeRoller themes, the css selector for tabviews has a "display:block;" directive:


.ui-tabs .ui-tabs-panel { display: block; ...}


This overrides the "display:none" directive from ".ui-helper-hidden":

.ui-helper-hidden {display: none;}


we generate a new directive
 */

.ui-tabs .ui-tabs-panel.ui-helper-hidden {
    display: none;
}


/********
* FONDS *
*********/

/* ext fondspilot btn*/
button.ui-button.ui-state-default .ui-icon.sbn-fondspilot {
    background-image: url("/KevuSWeb/javax.faces.resource/tarifrechner/fondspilot_radar_inaktiv.png.jsf?ln=images&sbnv=2025-12-15_164944");
    background-size: 16px 16px;
}

button.ui-button.ui-state-default.ui-state-focus .ui-icon.sbn-fondspilot,
button.ui-button.ui-state-default.ui-state-hover .ui-icon.sbn-fondspilot,
button.ui-button.ui-state-default.ui-state-active .ui-icon.sbn-fondspilot {
    background-image: url("/KevuSWeb/javax.faces.resource/tarifrechner/fondspilot_radar_hover.png.jsf?ln=images&sbnv=2025-12-15_164944");
    background-size: 16px 16px;
}

/* ext link fondsuniversum btn*/
button.ui-button.ui-state-default .ui-icon.sbn-fondsuniversum {
    background-image: url("/KevuSWeb/javax.faces.resource/tarifrechner/fonduniversum_16.png.jsf?ln=images&sbnv=2025-12-15_164944");
}

button.ui-button.ui-state-default.ui-state-focus .ui-icon.sbn-fondsuniversum,
button.ui-button.ui-state-default.ui-state-hover .ui-icon.sbn-fondsuniversum,
button.ui-button.ui-state-default.ui-state-active .ui-icon.sbn-fondsuniversum {
    background-image: url("/KevuSWeb/javax.faces.resource/tarifrechner/fonduniversum_white_16.png.jsf?ln=images&sbnv=2025-12-15_164944");
}

/*****************
* FONDS NEW
*****************/

/* FONDS SLOTS */

.fondsSlotInstrutions {
    margin-left: 28px;
    margin-bottom: 15px;
    font-weight: bold;
}

.fondsSlotContainer {

}

.fondsSlotHeader {
    padding-top: 10px;
    padding-bottom: 10px;
    font-weight: bold;
    background-color: var(--gray10);
}

.fondsSlotRow {
    border-top-color: white;
    border-top-width: 1px;
    border-top-style: solid;
    padding-top: 2px;
    padding-bottom: 2px;
}


.fondsSlotSummaryRow {
    margin-top: 3px;
    padding-top: 8px;
    margin-bottom: 15px;

    border-top-color: var(--darkBlue100);
    border-top-style: solid;
    border-top-width: 1px;
    background-color: var(--gray10);
    font-weight: bold;
}

.fondsSlotIndex {
    font-size: var(--defaultTextSize);
    font-weight: bold;
    padding-left: 12px;
    vertical-align: middle;
    display: inline-block;
    width: 40px;
}

.fondsSlotName {
    display: inline-block;
    width: 486px;
}

.fondsSlotHeader .fondsSlotName {
    text-align: left;
}

.fondsSlotPercent {
    display: inline-block;
    width: 70px;
}

.fondsSlotHeader .fondsSlotPercent {
    text-align: left;
}

.fondsSlotPercent .fondsPercent {
    width: 50px;
    display: inline-block;
}

.fondsSlotPercent .fondsPercentSuffix {
    display: inline-block;
    width: 16px;
    text-align: right;
}

.fondsSlotNachhaltigkeitsAbgleich {
    display: inline-block;
    width: 100px;
    padding-left: 35px;
}
.fondsSlotHeader .fondsSlotNachhaltigkeitsAbgleich {
    padding-left: unset;
    text-align: center;
}

.fondsSlotPdf {
    display: inline-block;
    width: 70px;
    padding-left: 24px;
}

.fondsSlotHeader .fondsSlotPdf {
    padding-left: unset;
    text-align: center;
}

.fondsSlotClear {
    display: inline-block;
    width: 70px;
    padding-left: 24px;
}
.fondsSlotHeader .fondsSlotClear {
    padding-left: unset;
    text-align: center;
}

.fondsSlotSummaryRow .fondsSlotPercent .fondsPercent {
    padding-left: 5px;
    padding-top: 4px;
    padding-bottom: 4px;
    background-color: var(--gray10);
}

.ui-button.ui-state-default.fondsNachhaltigkeitMatchOk {
    background: var(--green100);
    border-color: var(--green100);
}

.ui-button.ui-state-default.fondsNachhaltigkeitMatchNotOk {
    background: var(--orange100);
    border-color:var(--orange100);
}

.ui-button.ui-state-default.ui-state-hover.fondsNachhaltigkeitMatchOk,
.ui-button.ui-state-default.ui-state-focus.fondsNachhaltigkeitMatchOk {
    background-color: var(--green80);
}

.ui-button.ui-state-default.ui-state-hover.fondsNachhaltigkeitMatchNotOk,
.ui-button.ui-state-default.ui-state-focus.fondsNachhaltigkeitMatchNotOk {
    background-color: var(--orange80);
}

.fondsGreenLeaf {
    margin-left:3px;
    display:inline-block;
    color: var(--green100);
    font-size: 18px;
    vertical-align: middle;
}

/* FONDS CATALOGUE */

.fondsSearchArea .basicSearchCont {
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.fondsSearchArea .basicSearchCont .fondsSearch,
.fondsSearchArea .basicSearchCont .fondsCategoryCombo {
    min-width: 200px;
}


.inputGroup.fondsSearchArea {
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 15px;
    padding-bottom: 20px;
    text-align: left;
}

/* @see idd.css and theme.css for accordion */

.nachhaltigkeitsExclusionItem {
    display:inline-block;
    margin-right:17px;
    margin-bottom:2px;
    width:250px;
}

.nachhaltigkeitBoldGreen {
    font-weight: bold;
    color:var(--green100);
}

.inset20 {
    padding-left: 20px;
}

.formCompColX2.nachhaltigkeitSpacerOffenlegung {
    width: 470px;
}

.nachhaltigkeitFilterAccordion.ui-accordion.ui-widget .ui-accordion-header {
    display: flex;
    justify-content: start;
    align-items: center;
}

.nachhaltigkeitsFilterText {
    padding-left:15px;
}
.nachhaltigkeitFilterAccordion.ui-accordion.ui-widget .ui-accordion-header .fondsGreenLeaf {
    flex-grow: 1;
}

.nachhaltigkeitFilterAccordion.ui-accordion.ui-widget .ui-accordion-content {

    background-color: var(--grayContentBkgnd);
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 15px;
}


.nachhaltigkeitFilterAccordion.sbnAccordion.ui-accordion.ui-widget .ui-accordion-header .ui-icon.ui-icon-triangle-1-e,
.nachhaltigkeitFilterAccordion.sbnAccordion.ui-accordion.ui-widget .ui-accordion-header .ui-icon.ui-icon-triangle-1-s {
    width: 24px;
    height: 24px;
    font-size: 18px;
}

.nachhaltigkeitFilterAccordion .formLabelCol.valueSliderLblCol {
    width: 30px;
}

.nachhaltigkeitFilterAccordion .formLabelCol.valueSliderLblCol .minInvestSliderLbl{
    margin-left:0px;
}

.nachhaltigkeitFilterAccordion div.weitereFilterAccordion.sbnAccordion {
    padding: 0px;
}

.nachhaltigkeitFilterAccordion div.weitereFilterAccordion.sbnAccordion.ui-accordion .ui-accordion-header {
    padding-top: 0px;
}

.nachhaltigkeitFilterAccordion div.weitereFilterAccordion.sbnAccordion.ui-accordion .ui-accordion-header .weitereFilterText {
    padding-left: 10px;
}

.nachhaltigkeitFilterAccordion div.weitereFilterAccordion.sbnAccordion.ui-accordion.ui-widget .ui-accordion-header .ui-icon {
    background-color: var(--darkBlue100);
    width: 24px;
    height: 24px;
    font-size: 18px;
}

.nachhaltigkeitFilterAccordion.ui-accordion.ui-widget div.weitereFilterAccordion.sbnAccordion.ui-accordion.ui-widget .ui-accordion-content {
    background-color: white;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 0px;
    padding-bottom: 0px;
}

/*.ui-panel.additionalNachhaltigkeitsFilter {*/
/*    border: none;*/
/*}*/
/*.ui-panel.additionalNachhaltigkeitsFilter .ui-panel-titlebar {*/
/*    background-color: #ffffff;*/
/*    line-height: normal;*/
/*    border: none;*/
/*}*/


/*.ui-panel.additionalNachhaltigkeitsFilter .ui-panel-title {*/
/*    float: left;*/
/*    color: #000000;*/
/*    margin-right: 5px;*/
/*}*/

/*.ui-widget-content .ui-state-default,*/
/*.ui-widget-header .ui-state-default {*/

/*}*/

/*.ui-panel.additionalNachhaltigkeitsFilter .ui-panel-titlebar-icon,*/
/*.ui-panel.additionalNachhaltigkeitsFilter .ui-panel-titlebar-icon.ui-state-hover,*/
/*.ui-panel.additionalNachhaltigkeitsFilter .ui-panel-titlebar-icon.ui-state-focus,*/
/*.ui-panel.additionalNachhaltigkeitsFilter .ui-panel-titlebar-icon:hover,*/
/*.ui-panel.additionalNachhaltigkeitsFilter .ui-panel-titlebar-icon:focus {*/
/*    margin-top:0px;*/
/*    margin-left: 0px;*/
/*    float:left;*/
/*    border: none;*/
/*    background-color: #FFFFFF;*/
/*    color :#1e7e34;*/
/*    width: 20px;*/
/*    height: 20px;*/
/*}*/

/*.ui-panel.additionalNachhaltigkeitsFilter .ui-panel-titlebar-icon.ui-state-hover,*/
/*.ui-panel.additionalNachhaltigkeitsFilter .ui-panel-titlebar-icon.ui-state-focus {*/
/*    background-color: #1e7e34;*/
/*    color: #FFFFFF;*/
/*}*/

/*.ui-panel.additionalNachhaltigkeitsFilter .ui-panel-titlebar-icon .ui-icon {*/

/*    font-family: iconSbn;*/
/*    font-size: 16px;*/
/*    background: none;*/
/*    text-indent: unset;*/
/*    display: inline-block;*/
/*    width: 20px;*/
/*    height: 20px;*/
/*    margin-top: 2px;*/
/*    margin-left: 2px;*/
/*}*/

/*.ui-panel.additionalNachhaltigkeitsFilter .ui-panel-titlebar-icon .ui-icon.ui-icon-plusthick::before {*/
/*    content: "\f101"; !*.icon-sbn-accordionArrowUp:before*!*/
/*}*/

/*.ui-panel.additionalNachhaltigkeitsFilter .ui-panel-titlebar-icon .ui-icon.ui-icon-minusthick::before {*/
/*    content: "\f102"; !*.icon-sbn-accordionArrowUp:before*!*/
/*}*/


/*.fondsCatalog.ui-datatable {*/
/*    !*margin-left: 20px;*!*/
/*    !*margin-right: 20px;*!*/
/*}*/

/*.fondsCatalog.ui-datatable .ui-widget-header.ui-datatable-scrollable-header,*/
/*.fondsCatalog.ui-datatable .ui-widget-header.ui-datatable-footer {*/
/*    color: #000000;*/
/*    background: none;*/
/*}*/

.fondsCatalog.ui-datatable .ui-widget-header.ui-datatable-footer {
    border:none;
    background-color: var(--gray10);
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 10px;
    font-weight: bold;
}

/* headerLabel centered */
.fondsCatalog.ui-datatable .ui-widget-header.ui-datatable-scrollable-header thead tr th {
    text-align: center !important;
    line-height: 30px;
    border: none;
    /*color: var(--darkBlue100);*/
    /*background-color: var(--gray10);*/
}

/* headerLabel left for 1st: Name */
.fondsCatalog.ui-datatable .ui-widget-header.ui-datatable-scrollable-header thead tr th:first-child {
    text-align: left !important;
}

.fondsCatalog.ui-datatable tbody td.fondsCatalogIsinCol {
    text-align: center !important;
}

.fondsCatalog.ui-datatable tbody td.fondsCatalogPdfCol {
    display: inline-block;
    padding-left: 25px !important;

}

.fondsCatalog.ui-datatable tbody td.fondsCatalogAddCol {
    display: inline-block;
    padding-left: 35px !important;
}


.fondsCatalog.ui-datatable tbody td.fondsCatalogAddCol .icon-check {
    font-size: 24px;
    padding-left: 5px;
}

.fondsCatalog.ui-datatable tbody td {
    border: none;
}

.fondsCatalog.ui-datatable .ui-datatable-scrollable-body,
.fondsCatalog.ui-datatable .ui-datatable-scrollable-header {
    padding-left:5px;
    padding-right:5px;
}

.fondsCatalog .ui-datatable-scrollable-body tr.ui-widget-content {
    border-left: none;
    border-right: none;
    border-top: 3px solid #fff;
    background: #f0f0f0;
    color: #000000;
}

.fondsCatalog .ui-datatable-scrollable-body thead tr th {
    border: none;
}

.fondsCatalog .ui-datatable-header.ui-widget-header {
    background: transparent;
    border: none;
    padding-left: 0px;
    padding-right: 0px;
}

.fondsCatalog.ui-datatable tbody.ui-datatable-data {
    border: none;
}

.fondsCatalog .ui-datatable-empty-message td {
    text-align: center !important;
    padding: 30px !important;
    background: white;
    font-size: 18px;
    color: var(--gray80);
}


button.ui-button.ui-state-default.fondsPdfBtn,
button.ui-button.ui-state-default.fondsRemoveBtn,
button.ui-button.ui-state-default.fondsAddBtn,
button.ui-button.ui-state-default.fondsCheck,
button.ui-button.ui-state-default.ui-state-disabled.fondsPdfBtn,
button.ui-button.ui-state-default.ui-state-disabled.fondsRemoveBtn,
button.ui-button.ui-state-default.ui-state-disabled.fondsAddBtn,
button.ui-button.ui-state-default.ui-state-disabled.fondsCheck {
    background-color: transparent;
    border: none;
    width: 100%;
    margin: 0px;
}

button.ui-button.ui-state-default.ui-state-focus.fondsPdfBtn,
button.ui-button.ui-state-default.ui-state-focus.fondsRemoveBtn,
button.ui-button.ui-state-default.ui-state-focus.fondsAddBtn,
button.ui-button.ui-state-default.ui-state-focus.fondsCheck {
    background-color: transparent;
    border: none;
    width: 100%;
    margin: 0px;
}

button.ui-button.ui-state-default.ui-state-hover.fondsPdfBtn,
button.ui-button.ui-state-default.ui-state-hover.fondsRemoveBtn,
button.ui-button.ui-state-default.ui-state-hover.fondsAddBtn,
button.ui-button.ui-state-default.ui-state-hover.fondsCheck,
button.ui-button.ui-state-default.ui-state-active.fondsPdfBtn,
button.ui-button.ui-state-default.ui-state-active.fondsRemoveBtn,
button.ui-button.ui-state-default.ui-state-active.fondsAddBtn,
button.ui-button.ui-state-default.ui-state-active.fondsCheck,
button.ui-button.ui-state-default.ui-state-focus.ui-state-hover.fondsPdfBtn,
button.ui-button.ui-state-default.ui-state-focus.ui-state-hover.fondsRemoveBtn,
button.ui-button.ui-state-default.ui-state-focus.ui-state-hover.fondsAddBtn,
button.ui-button.ui-state-default.ui-state-focus.ui-state-hover.fondsCheck,
button.ui-button.ui-state-default.ui-state-focus.ui-state-active.fondsPdfBtn,
button.ui-button.ui-state-default.ui-state-focus.ui-state-active.fondsRemoveBtn,
button.ui-button.ui-state-default.ui-state-focus.ui-state-active.fondsAddBtn,
button.ui-button.ui-state-default.ui-state-focus.ui-state-active.fondsCheck {
    background-color: #00a0e1;
    border: none;
    width: 100%;
    margin: 0px;
}

button.ui-button.ui-state-default.fondsRemoveBtn .ui-icon.ui-icon-fondsRemove {
    background-image: url("/KevuSWeb/javax.faces.resource/fonds/trashBlue.png.jsf?ln=images&sbnv=2025-12-15_164944");
    margin-left: -8px;
    left: 50%;
}

button.ui-button.ui-state-default.ui-state-active.fondsRemoveBtn .ui-icon.ui-icon-fondsRemove,
button.ui-button.ui-state-default.ui-state-hover.fondsRemoveBtn .ui-icon.ui-icon-fondsRemove {
    background-image: url("/KevuSWeb/javax.faces.resource/fonds/trashWhite.png.jsf?ln=images&sbnv=2025-12-15_164944");
}

button.ui-button.ui-state-default.fondsAddBtn .ui-icon.ui-icon-fondsAdd,
button.ui-button.ui-state-default.fondsAddBtn .ui-icon.ui-icon-fondsAddDisabled {
    background-image: url("/KevuSWeb/javax.faces.resource/fonds/add.png.jsf?ln=images&sbnv=2025-12-15_164944");
    margin-left: -8px;
    left: 50%;
}

button.ui-button.ui-state-default.fondsAddBtn .ui-icon.ui-icon-fondsAddDisabled {
    background-image: url("/KevuSWeb/javax.faces.resource/fonds/addDisabled.png.jsf?ln=images&sbnv=2025-12-15_164944");
}

span.ui-icon-fondsCheck {
    background-image: url("/KevuSWeb/javax.faces.resource/fonds/checkBlue.png.jsf?ln=images&sbnv=2025-12-15_164944");
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: -8px;
    left: 50%;
    position: relative;
}

/*
button.ui-widget-content .ui-button.ui-state-default.ui-state-focus.fondsPdfBtn,
button.ui-button.ui-state-default.ui-state-focus.fondsPdfBtn,
button.ui-widget-content .ui-button.ui-state-default.ui-state-focus.fondsAddBtn,
button.ui-button.ui-state-default.ui-state-focus.fondsAddBtn {
    background-color: transparent;
}*/
/*
button.ui-widget-content .ui-button.ui-state-default.ui-state-focus.ui-state-hover.fondsPdfBtn,
button.ui-button.ui-state-default.ui-state-focus.ui-state-hover.fondsPdfBtn,
button.ui-widget-content .ui-button.ui-state-default.ui-state-focus.ui-state-hover.fondsAddBtn,
button.ui-button.ui-state-default.ui-state-focus.ui-state-hover.fondsAddBtn {
    background-color: inherit;
}
*/
.noFondsSelectedMsg {
    font-size: 16px;
    font-weight: bold;
    color: var(--gray80);

    padding-top: 10px;
    display: inline-block;
}

/***************
* FONDSFAVORIT *
****************/

.showFondsFavMgrBtn {
    float: right;
    padding-right: 10px;
}

#fondsFavListDiv {
    width: 260px;
    float: left;
    margin-left: 5px;
    margin-top: 7px;
    margin-right: 5px;
    height: 220px;
    margin-bottom: 7px;
}

#fondsFavActionBtnDiv {
    width: 150px;
    float: right;
    padding-left: 5px;
    padding-right: 5px;
}

.fondsFavActionBtn {
    width: 100%;
}

/***************
* FAVORIT *
****************/

.favListDiv {
    width: 70%;
    float: left;
    padding-left: 11px;
}

.favActionBtnDiv {
    width: 30%;
    float: right;
    padding-left: 5px;
    padding-right: 11px;
}

.favActionBtn {
    width: 100%;
}

/* Primefaces datatable: the empty message style
*/

.ui-datatable-empty-message {
    text-align: center;
    font-size: 14px;
    font-weight: bold;
}

.ui-datatable tbody tr.ui-datatable-empty-message td {
    text-align: center;
    padding:15px;
}

/***************
* Berufselection *
****************/

.berufSelectList {

    width: 100% !important;

    /*Used for h:selectOneListbox*/
    /*
    height:180px;
    overflow:auto;
    border-style:solid;
    border-width:1px;
    padding:0px;
    */

    /*the below: needed if PF v4.0, but not in PF 5.2*/
    /*
    list-style:none;
    height:160px;
    overflow:auto;
    border-color:#000000;
    border-style:solid;
    border-width:1px;
    margin:2px;
    padding:0px;*/
}

.berufSelectList .ui-selectlistbox-list {

    width: 100%;
}


.textBold {
    font-weight: bold;
}

.verticalScroll {
    overflow-y: scroll !important;
    resize: none !important;
}


/*********************
* KOMPOSIT Unfall VORSCHLAG Tabelle START
**********************/

.vorschlagTableContainerDiv {
    width: 100%;
    padding-left: 10px;
    padding-top: 10px;
}

.vorschlagTableDescriptionDiv {
    display: inline-block;
    width: 38%;
    vertical-align: top;
}

.vorschlagTableSuggestionsDiv {
    display: inline-block;
    /*border: 1px solid black;*/
    width: 61%;
    overflow-y: hidden;
    overflow-x: scroll;
}

.vorschlagDescrTable,
.vorschlagTable {
    width: 100%;
    border-collapse: collapse;
    word-spacing: 0;
    font-family: Stuttgarter, Arial, Helvetica, sans-serif;
    font-size: var(--defaultTextSize);
    font-weight: normal;
    line-height: 15px;
}

.vorschlagDescrTable tr th,
.vorschlagDescrTable tr td,
.vorschlagTable tr th,
.vorschlagTable tr td {

    padding: 5px;
    border:none;
}

.vorschlagDescrTable tr td,
.vorschlagTable tr td {

    border-color: var(--gray20);
    border-style: solid;
    border-width: 1px;
}

.vorschlagDescrTable tr td {
    border-left-color: transparent;
    text-align: left;
}

.vorschlagTable tr th {
    text-align: right;
    background-color: var(--darkBlue100);
    color: white;
}
.vorschlagTable tr th:hover {
    background-color: var(--darkBlue80);
    cursor: pointer;
}
.vorschlagTable tr td:hover {
    cursor: pointer;
}

.vorschlagTable tr th.sel,
.vorschlagTable tr th.sel:hover {
    background-color: var(--blue100);
    color: white;
    cursor: default;
}

.vorschlagTable tr td {
    text-align: right;
    color: var(--darkBlue100);
}

.vorschlagTable tr td.sel {
    font-weight: bold;
}

.disabled .vorschlagTable tr th {
    background-color: var(--gray10);
    color: var(--gray30);
}

.disabled .vorschlagTable tr th.sel {
    background-color: var(--gray80);
    color: white;
}

.disabled .vorschlagTable tr td {
    color: var(--gray30);
}
.disabled .vorschlagTable tr td.sel {
    color: var(--gray80);
}





/*********************
* KOMPOSIT Unfall VORSCHLAG Tabelle END
**********************/


/**********************
* Unfall Tabelle (right now only UnfallMarkler// Unfall aktiv)
***********************/


/* NEW NEW NEW */
.unfallTableContainerDiv {
    width: 100%;
    word-spacing: -0.3em;
}

.unfallTable1DescriptionDiv,
.unfallMarklerTable1DescriptionDiv {
    width: 42%;
    display: inline-block;
    vertical-align: top;
    word-spacing: 0;
}

.unfallMarklerTable1DescriptionDiv {
    width: 42%;
}

.unfallTable2ContentDiv,
.unfallMarklerTable2ContentDiv,
.unfallTable2ContentScrollDiv {

    display: inline-block;
    width: 57%;
    overflow-y: hidden;
    word-spacing: 0;
}

.unfallMarklerTable2ContentDiv {
    width: 57%;
}

.unfallTable2ContentScrollDiv {

    overflow-x: scroll;
}

/*********************
* END Unfall Tabelle (right now only UnfallMarkler)
**********************/

/*********************
* Special Function Button styles
**********************/
.emailBtn {
    margin-top: -4px !important;
}


/*************************
* HACK for Firefox; FF displays a native FF-Tooltip: 'Keine Datei ausgewaehlt' on <input type="file">
to suppress this we hide the element
**************************/

.ui-fileupload .ui-fileupload-buttonbar .ui-button.ui-fileupload-choose input[type=file] {
    display: none;
}

/*********************
* Berater Overview
**********************/

.beraterOverview .formLabelCol,
.beraterOverview .formCompCol {
    vertical-align: baseline;
}

.beraterOverview .beraterLbl {
    font-size: 18px;
    vertical-align: baseline;
    font-weight: bold;
}

.beraterOverview .beraterTxt {
    font-size: 24px;
    vertical-align: baseline;
    color: #00a0e1;
    font-weight: bold;
    padding-left: 10px;
}

.beraterOverview .ui-datatable .ui-datatable-footer {
    text-align: right;
    background-color: #FFF;
}


.beraterOverview .ui-datatable .ui-datatable-tablewrapper {
    min-height: 385px;
}


/*********************
* Special Berater Upload Logo
**********************/
.beraterLogoUpload .ui-fileupload-content {
    display: none;
}

.beraterLogoUpload .ui-fileupload-buttonbar {
    background-color: #ffffff;
    background-image: none;
    border: 0 none;
    padding: 0px;
}

.beraterLogoUpload .ui-icon {
    display: none;

}


.beraterLogoUpload .ui-button.ui-state-default.ui-button-text-icon-left .ui-button-text {
    padding:0px
}

.beraterLogoImage {

    max-height: 95px;
    max-width: 440px;
}

/*********************
* Special Berater Auswahl / AngebotBerater right now only Inhouse
**********************/
.beraterAuswahlTable.sbnDataTable.ui-datatable tbody.ui-datatable-data tr td {
    height: 35px; /* there is a combobox as content */
    vertical-align: middle;
}

/*********************
* Special Testfall Upload
**********************/

.testfallUpload.ui-fileupload.ui-widget {
    display: inline-block;
}

.testfallUpload .ui-fileupload-content {
    display: none;
}

.testfallUpload .ui-fileupload-buttonbar {
    background-color: rgba(0, 0, 0, 0);
    background-image: none;
    border: 0 none;
    padding: 0px;
}

.testfallUpload .ui-icon {
    display: none;

}

/*****************
* Esignatur Info
******************/
.eSigninitialInfoContainer {
    background-color: var(--orange100);
}

.eSigninitialInfoText {
    font-size: 16px;
    font-weight: bold;
    color: white;
    padding-top: 10px;
    padding-bottom: 10px;
}

.eSigninitialInfoEm {
    text-decoration-style: solid;
    text-decoration-line: underline;
    text-decoration-thickness: 2px;
    font-size: 18px;
}




/*********************
* Special eSignatur Upload
**********************/
.esignaturUploadInfoList {
    padding-left: 25px;
    word-spacing: 0;
    list-style-type: disc;
}

.uploadedPdfContainer {
    display: block;
    max-height: 300px;
    overflow-y: auto;
}

.uploadedPdfEntry {
    display: grid;
    grid-template-columns: 10px 260px 30px 280px 20px 30px;
    grid-column-gap: 10px;
    align-items: center;
    word-spacing: 0;
    font-size: var(--defaultTextSize);
    background-color: var(--gray10);
    padding-left: 10px;
    padding-top: 4px;
    padding-bottom: 4px;
}

.uploadedPdfEntry .pdfCounter {

    color: var(--darkBlue100);
}

.uploadedPdfEntry .pdfName {

}

.uploadedPdfEntry .pdfDisplay {
    justify-self: center;
}

.uploadedPdfEntry .pdfCategory {
    width: 280px;
}

.uploadedPdfEntry .pdfCategoryOk {
    width: 18px;
    height: 18px;
    font-size: 18px;
    justify-self: center;
    color: var(--darkBlue100);
}

.uploadedPdfEntry .pdfDelete {
    justify-self: center;
}

.esignaturUpload.ui-fileupload.ui-widget {
    background-color: var(--gray10);
    width: 700px;
    height: 100px;
    border-radius: var(--borderRadiusStd);
}

.esignaturUpload .ui-fileupload-content {
    display: none;
}

.esignaturUpload .ui-fileupload-buttonbar {
    background-color: rgba(0, 0, 0, 0);
    background-image: none;
    border: 0 none;
    padding: 0px;
    width: 100%;
    height: 100%;
}

.esignaturUpload .ui-button.ui-state-default.ui-fileupload-choose {
    border: none;
    background-color: var(--gray10);
    color: var(--darkBlue100);
    width: 100%;
    height: 100%;
    margin: 0px;
    text-transform: none;
    flex-direction: column;
}

.esignaturUpload .ui-button.ui-state-default.ui-fileupload-choose .ui-button-icon-left.ui-icon.ui-c {
    background-color: var(--darkBlue100);
    color: white;
    width: 25px;
    height: 25px;
    padding: 5px;
    margin-bottom: 10px;
}


.esignaturUpload .ui-button.ui-state-default.ui-fileupload-choose .ui-icon::before {
    content: "\e13d";
    font-family: lucide;
    font-size: 15px;
    display: inline-block;
    background: none;
    width: 15px;
    height: 15px;
}

.esignaturUpload .ui-button.ui-state-default.ui-fileupload-choose.ui-state-disabled .ui-icon {

    color: var(--gray80);
}

.esignaturUpload .ui-button.ui-state-default.ui-fileupload-choose .ui-button-text {
    display: inline-block;
    font-size: var(--defaultTextSize);
    font-weight: normal;
    color: var(--darkBlue100);
}

.esignaturUpload .ui-button.ui-state-default.ui-fileupload-choose.ui-state-disabled .ui-button-text {
    color: var(--gray80);
}

/*******************************
* ANTRAG completeness check
********************************/
.incompletenessResult {
    padding: 15px;
}

.completenessIncompleteInfo {
    margin-top: 5px;
    margin-bottom: 5px;
    white-space: pre-wrap;
}

.completenessIncompleteTopInfo {
    display: flex;
    justify-content: start;
    align-items: start;
    margin-top: 5px;
    margin-bottom: 5px;
}


.completenessRow {
   padding: 5px 15px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: var(--gray20);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.completenessRow.sectionSeparator {
    border-bottom-color: var(--darkBlue100);
}

.completenessInstructions {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.completenessInstructionItem {

    display: flex;
    justify-content: start;
    align-items: center;
}

.completenessIncompleteTopInfo .completenessIncompleteTopInfoIcon,
.completenessInstructions .checkComplete,
.completenessInstructions .checkRequired,
.completenessInstructions .checkOptionalRequired,
.ui-button.ui-state-default.ui-button-icon-only.checkComplete .ui-icon.ui-c,
.ui-button.ui-state-default.ui-button-icon-only.checkRequired .ui-icon.ui-c,
.ui-button.ui-state-default.ui-button-icon-only.checkOptionalRequired .ui-icon.ui-c {
    font-size: 18px;
    line-height: 18px;
    width: 18px;
    height: 18px;
}

.completenessIncompleteTopInfo .completenessIncompleteTopInfoIcon,
.completenessInstructions .checkComplete,
.completenessInstructions .checkRequired,
.completenessInstructions .checkOptionalRequired {
    color: var(--darkBlue100);
    margin-right: 15px;
}

.completenessInstructions .checkRequired {
    color: var(--orange100);
}

.ui-button.ui-state-default.checkComplete {
    background-color: transparent;
}
.ui-button.ui-state-default.ui-button-icon-only.checkComplete .ui-icon.ui-c {
    color: var(--darkBlue100);
}

.completenessInstructions .checkRequired,
.ui-button.ui-state-default.checkRequired {
    /*color: var(--orange100);*/
}

.ui-button.ui-state-default.checkRequired {
    background-color: var(--orange80);
}

.ui-button.ui-state-default.ui-state-hover.checkRequired {
    background-color: var(--orange60);
}

.ui-button.ui-state-default.checkOptionalRequired {
    background-color: var(--darkBlue70);
}
.ui-button.ui-state-default.ui-state-hover.checkOptionalRequired {
    background-color: var(--darkBlue60);
}

/*******************************
* Overviews with PF DataTable
********************************/

.sbnDataTable.ui-datatable .ui-datatable-header.ui-widget-header {
    background: none;
    font-weight: normal;
    font-size: 14px;
    padding: 10px;
}

.sbnDataTable.ui-datatable .ui-paginator.ui-paginator-bottom {
    background: none;
    padding-top: 5px;
    padding-bottom: 5px;
}

/*Explicit controll the lineheight to have same crossbrowser experience*/
.sbnDataTable.ui-datatable tbody.ui-datatable-data tr td {
    line-height: 18px; /*font size is 14px*/
    vertical-align: top;
    padding: 5px;
}

.sbnDataTable.ui-datatable thead th .ui-chkbox {
    float: left;
    margin-right: 5px;
}

.sbnDataTable.ui-datatable  thead tr th.entryIconCol,
.sbnDataTable.ui-datatable  tbody.ui-datatable-data tr td.entryIconCol {
    width: 24px;
    padding: 4px;
}

.sbnDataTable.ui-datatable  tbody.ui-datatable-data tr td.entryIconCol {
    font-size: 16px;
}

.sbnDataTable.ui-datatable.inputHighlight thead tr th {
    background-color: var(--orange80);
}

.sbnDataTable.ui-datatable.inputHighlight tbody.ui-datatable-data.ui-widget-content tr td{
    border-color: var(--orange80);
}

.sbnDataTable.ui-datatable .entitySearch {
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 5px;
}

/*******************************
* PersonOverview icons
********************************/

/*.personHerrIcon {*/
/*    background-image: url("/KevuSWeb/javax.faces.resource/person/overview/personOverviewIcons.png.jsf?ln=images&sbnv=2025-12-15_164944");*/
/*    background-repeat: no-repeat;*/
/*    display: inline-block;*/
/*    margin-top: 1px;*/
/*    width: 15px;*/
/*    height: 15px;*/
/*    background-position: 0px 0px;*/
/*}*/

/*.personFrauIcon {*/
/*    background-image: url("/KevuSWeb/javax.faces.resource/person/overview/personOverviewIcons.png.jsf?ln=images&sbnv=2025-12-15_164944");*/
/*    background-repeat: no-repeat;*/
/*    display: inline-block;*/
/*    margin-top: 1px;*/
/*    width: 15px;*/
/*    height: 15px;*/
/*    background-position: -15px 0px;*/
/*}*/

/*.personFirmaIcon {*/
/*    background-image: url("/KevuSWeb/javax.faces.resource/person/overview/personOverviewIcons.png.jsf?ln=images&sbnv=2025-12-15_164944");*/
/*    background-repeat: no-repeat;*/
/*    display: inline-block;*/
/*    margin-top: 1px;*/
/*    width: 15px;*/
/*    height: 15px;*/
/*    background-position: -30px 0px;*/
/*}*/

/*.personOhneAnredeIcon {*/
/*    background-image: url("/KevuSWeb/javax.faces.resource/person/overview/personOverviewIcons.png.jsf?ln=images&sbnv=2025-12-15_164944");*/
/*    background-repeat: no-repeat;*/
/*    display: inline-block;*/
/*    margin-top: 1px;*/
/*    width: 15px;*/
/*    height: 15px;*/
/*    background-position: -45px 0px;*/
/*}*/

/*******************************
* Step indication (right now used in ESignatur)
********************************/
.stepContainer {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.stepIndicator {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    color: var(--darkBlue100);
    background-color: var(--grayContentBkgnd);
}

.stepIcon {
    font-weight: bold;
    font-size: 20px;
    line-height: 25px;
    font-family: sbn_serif, serif;
}

.stepText {
    padding:5px;
}


.stepIndicator .stepCheckAndArrow {
    position: absolute;
    top: 0px;
    right: 0px;
    height: 100%;
    width: 90px;
    /*display: flex;*/

    display:none; /* deactivated */
    align-items: center;
    margin-right: -25px;
}

.stepIndicator.active .stepCheckAndArrow {
    background-image:url("/KevuSWeb/javax.faces.resource/tarifmenu/blueArrowRight.svg.jsf?ln=images&sbnv=2025-12-15_164944");
    background-position: right;
    background-repeat: no-repeat;
    background-color: transparent;
    border: none;
    z-index: 999;
    background-size: 25px auto;
}

.stepContainer .stepIndicator.active:last-child .stepCheckAndArrow {
    background: none;
}


.stepIndicator .stepCheckAndArrow .checkMark {
    color:transparent;
    font-size: 20px;
}


.stepIndicator.inactive {
    color: var(--grayContentColor);
}

.stepIndicator.active {
    color: white;
    background-color: var(--blue100);
}



.stepIndicator.complete .stepCheckAndArrow .checkMark {
    color: var(--darkBlue100);
}



/*******************************
* ESignatur
********************************/
.esignaturDocRow,
.esignaturDocInfoRow {
    display:grid;
    margin-left:220px;
    align-items: center;
    justify-content: start;
    word-spacing: 0;
    font-size: var(--defaultTextSize);
}
.esignaturDocRow {
    grid-template-columns: 310px auto;
    grid-column-gap: 10px;
}

.esignaturDocRow input[type="checkbox"].mandatorySelected,
.esignaturDocRow input[type="checkbox"].presignature{
    visibility: hidden;
}

.esignaturDocRow label.mandatorySelected {
    font-weight: bold;
}


.ui-button.ui-state-default.esignaturDocBtn {
    width:115px;
    margin-top: 0px;
    margin-bottom: 0px;
}

.esignaturBtn_StatusCol {
    display: inline-grid;
    grid-template-columns: auto auto;
    align-items: center;
    grid-column-gap: 10px;
}

.esignaturStatusTextIncomplete,
.esignaturStatusTextComplete {
    font-weight: bold;
}

.esignaturStatusTextIncomplete {
    color: var(--orange100);
}

.esignaturStatusTextComplete {
    color: var(--darkBlue100);
}

.esignaturDocStatus .esignaturStatusIconComplete,
.esignaturDocStatus .esignaturStatusIconIncomplete {
    font-size: 16px;
}

.esignaturStatusIconComplete {
    color: var(--blue100);
}

.esignaturStatusIconIncomplete {
    color: var(--orange100)
}

.signMethodDiv {

    padding: 15px;
    display: grid;
    grid-gap: 15px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    margin-bottom: 30px;
}

/*
*Sign method location title
*/
.signMethodSameLocationTitle,
.signMethodInSeparateLocationTitle {
    display: inline-block;
    word-spacing: 0px;
    font-size: var(--defaultTextSize);
    border-bottom-style: solid;
    border-bottom-width: 1px;
    vertical-align: bottom;

    color: var(--darkBlue100);
    border-bottom-color: var(--darkBlue100);
}

.signMethodSameLocationTitle {
    grid-row: 1 / 2;
    grid-column: 1 / 3;
}

.signMethodInSeparateLocationTitle {
    grid-row: 1 / 2;
    grid-column: 3 / 4;
}


.signMethodSameLocationTitle .locationText {
    padding-top: 3px;
    display: inline-block;
}

/*
*Sign method buttons
*/


.signMethodSelectionBtn.ui-button.ui-widget.ui-state-default {

    background-color: var(--grayContentBkgnd);
    color: var(--gray100);
    width: 100%;
    border-radius: var(--borderRadiusStd);
    border-style: none;
    border-width: 0px;
    box-shadow: none;
    font-weight: normal;
    flex-direction: column;
}

.signMethodSelectionBtn.ui-button.ui-state-default .ui-icon.ui-c {
    background-color: var(--grayContentColor);
    width:75px;
    height:75px;
    margin-bottom: 10px;
    margin-right:0px;
}

.signMethodSelectionBtn.ui-button.ui-state-default.ui-state-hover .ui-icon.ui-c,
.signMethodSelectionBtn.ui-button.ui-state-default.ui-state-active .ui-icon.ui-c {
    background-color: var(--grayContentColorHover);

}

.signMethodSelectionBtn.ui-button.ui-state-default.ui-state-disabled .ui-icon.ui-c {
    /*background-color: var(--darkBlue100);*/
    background-color: white;
}

/*if disabled then this option is selected*/
.signMethodSelectionBtn.ui-button.ui-state-default.ui-state-disabled {
    /*color: var(--darkBlue100);*/
    color: white;
    background-color: var(--blue100);
}

.sameDevice.signMethodSelectionBtn.ui-button.ui-state-default {
    grid-row: 2 / 3;
    grid-column: 1 / 2;
}

.sameDevice.signMethodSelectionBtn.ui-button.ui-state-default .ui-icon.ui-c {
    mask: url("/KevuSWeb/javax.faces.resource/esignatur/signmethod/signOnTablet.svg.jsf?ln=images&sbnv=2025-12-15_164944");
}

.viaQRCode.signMethodSelectionBtn.ui-button.ui-state-default {
    grid-row: 2 / 3;
    grid-column: 2 / 3;
}
.viaQRCode.signMethodSelectionBtn.ui-button.ui-state-default .ui-icon.ui-c {
    mask: url("/KevuSWeb/javax.faces.resource/esignatur/signmethod/qrToPhone.svg.jsf?ln=images&sbnv=2025-12-15_164944");}

a.qrScannerLink {
    color: var(--blue100);
    text-decoration: none;
}

.viaLink.signMethodSelectionBtn.ui-button.ui-state-default {
    grid-row: 2 / 3;
    grid-column: 3 / 4;
}
.viaLink.signMethodSelectionBtn.ui-button.ui-state-default .ui-icon.ui-c {
    mask: url("/KevuSWeb/javax.faces.resource/esignatur/signmethod/linkToPhone.svg.jsf?ln=images&sbnv=2025-12-15_164944");
}

.signMethodDiv.jurPersonGesundheitsFragen .viaLink.signMethodSelectionBtn.ui-button.ui-state-default {
    grid-row: 2 / 3;
    grid-column: 2 / 3;
}

.signMethodDiv.jurPersonGesundheitsFragen .signMethodInSeparateLocationTitle {
    grid-row: 1 / 2;
    grid-column: 2 / 3;
}


.signMethodTitle {

    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
}

.formLabelCol.sendSignLinkRow {
    display: inline-grid;
    align-items: center;
    grid-template-columns: auto auto;
    grid-column-gap: 15px;
}

.sendSignLinkRow .ui-button.ui-state-default {
    margin-left: 10px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-right: 0px;
}

.signLinkSent,
.signLinkUnsent {
    color:transparent;
    font-size: 24px;
    line-height: 27px;
    width: 24px;
    height: 24px;
    margin-top: -4px;
    margin-left: 5px;
    display: inline-block;
}

.signLinkSent {
   color: var(--blue100);
}

.boldOrange {
    color: #F58200;
    font-weight: bold;
}

.generateQrCodeBtn {
    margin-left: 15px !important;
}

/*******************************
* AngebotOverview
********************************/

.angeboteForPerson {
    font-weight: bold;
}

.angebotEntwurfMarker {
    color: var(--orange100);
}
.ui-state-highlight .angebotEntwurfMarker {
    color: white;
}

.angebotEntwurfMarker,

.eAntragIcon,
.eAntragIncompleteIcon,


.eAntragStatus_error_stgt,
.eAntragStatus_success_stgt,
.eAntragStatus_progress_stgt,
.eAntragStatus_progress_user {

    display: inline-block;
    font-family: lucide;
    width: 16px;
    height: 16px;
    vertical-align: text-bottom;
    font-size: 16px;
    line-height: 16px;
}

/* TODO: other eantrag icon places: ergebnisseite AntragInput */
.eAntragIcon {

    /*mask: url("/KevuSWeb/javax.faces.resource/eantrag/svg/file-e-2.svg.jsf?ln=images&sbnv=2025-12-15_164944");*/
    mask: url("/KevuSWeb/javax.faces.resource/stgt-svg/eantrag/edit-e.svg.jsf?ln=images&sbnv=2025-12-15_164944");
    mask-size: cover;
    width: 16px;
    height: 16px;
    background-color: var(--darkBlue100);
}
tr.ui-state-highlight td .eAntragIcon {
    background-color: white;
}

/*.eAntragIncompleteIcon::before {*/
/*    content: "\e30d"; !* lucide icon-file-clock *!*/
/*}*/

/*!* eAntrag status*!*/

/*.eAntragStatus_error_stgt::before {*/
/*    content: "\e1a5"; !* lucide icon-x *!*/
/*}*/

/*.eAntragStatus_success_stgt::before {*/
/*    content: "\e074"; !* lucide icon-check:before *!*/
/*}*/

.eAntragStatus_progress_user {
    mask: url("/KevuSWeb/javax.faces.resource/stgt-svg/eantrag/progress-user.svg.jsf?ln=images&sbnv=2025-12-15_164944");
    mask-size: cover;
    width: 16px;
    height: 16px;
    background-color: var(--darkBlue100);
}
tr.ui-state-highlight td .eAntragStatus_progress_user {
    background-color: white;
}

.eAntragStatus_progress_stgt {
    /*mask: url("/KevuSWeb/javax.faces.resource/angebot/overview/progress.svg.jsf?ln=images&sbnv=2025-12-15_164944");*/
    mask: url("/KevuSWeb/javax.faces.resource/stgt-svg/eantrag/progress-stuttgarter.svg.jsf?ln=images&sbnv=2025-12-15_164944");
    mask-size: cover;
    width: 16px;
    height: 16px;
    background-color: var(--darkBlue100);
}
tr.ui-state-highlight td .eAntragStatus_progress_stgt {
    background-color: white;
}

.eAntragStatus_error_stgt {
    mask: url("/KevuSWeb/javax.faces.resource/stgt-svg/eantrag/x-circle.svg.jsf?ln=images&sbnv=2025-12-15_164944");
    mask-size: cover;
    width: 16px;
    height: 16px;
    background-color: var(--darkBlue100);
}
tr.ui-state-highlight td .eAntragStatus_error_stgt {
    background-color: white;
}

.eAntragStatus_success_stgt {
    mask: url("/KevuSWeb/javax.faces.resource/stgt-svg/eantrag/circle-check-big.svg.jsf?ln=images&sbnv=2025-12-15_164944");
    mask-size: cover;
    width: 16px;
    height: 16px;
    background-color: var(--darkBlue100);
}
tr.ui-state-highlight td .eAntragStatus_success_stgt {
    background-color: white;
}




.eAntragStatusTextLong {
    padding-left: 8px;
}




/***
* EAntragAuswahl
*/

.esignaturSelectionItem {
    margin-top: 5px;
    margin-bottom: 5px;
}

.ui-widget .esignaturSelectionItem a.ui-commandlink {
    color: var(--blue100);
    font-weight: bold;
    text-decoration: none;
    font-size: 16px;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 5px;
    display: inline-block;
}

/***
* Angebot/AntragDetail
*/
.angebotDetailHtmlCol,
.antragDetailHtmlCol {
    display: inline-block;
    width: 80%;
    word-spacing: 0;
}

.antragDetailStornoCol {
    display: inline-block;
    width: 20%;
    word-spacing: 0;
    vertical-align: top;
    text-align: right;
}

.angebotDetailsTable,
.antragDetailsTable {
    width: 100%;
    table-layout: fixed;
}

.angebotDetailsTable tr td.keyCol,
.angebotDetailsTable tr td.valueCol,
.antragDetailsTable tr td.keyCol,
.antragDetailsTable tr td.valueCol {
    width: 48%;
}

.angebotDetailsTable tr td.spacerCol,
.antragDetailsTable tr td.spacerCol {
    width: 4%;
}

.angebotDetailPdfCol,
.antragDetailPdfCol {
    margin-left: 52%;
}

.antragDetailSeparator {
    border-top-color: #000000;
    border-top-style: solid;
    border-top-width: 1px;
    margin-left: 5px;
    margin-right: 5px;
}

/****************************
* Whats New
****************************/
.whatsNewDlg {
    min-width: 500px; /*p:dialog has problems with min width*/
    max-width: 500px;
}

.whatsNewDlg .ui-dialog-footer.ui-widget-content {
    border-top-width: 0px;
}

.whatsNewTitle,
.whatsNewBody {
    font-family: sbn_sans_serif, Arial, Helvetica, sans-serif;
}

.whatsNewTitle {
    font-size: 14px;
    font-weight: bold;
    margin-left: 6px;
    vertical-align: top;
}

.whatsNewBody {
    font-size: 13px;
}


.whatsNewStar {
    background-image: url("/KevuSWeb/javax.faces.resource/appstartpage/icons/orange_star_16.png.jsf?ln=images&sbnv=2025-12-15_164944");
    background-repeat: no-repeat;
    display: inline-block;
    background-size: 16px 16px;
    width: 16px;
    height: 16px;
    background-position: 0px 0px;
}


/***************************************
* Styling of Checkboxes and Radiobuttons
****************************************/

/*div[class="inputRow"] input[type="checkbox"] {*/
/*    width: 15px;*/
/*    height: 15px;*/
/*    vertical-align: middle;*/
/*    margin-right: 6px;*/
/*}*/

/*div[class="inputRow"] input[type="radio"] {*/
/*    width: 15px;*/
/*    height: 15px;*/
/*    vertical-align: bottom;*/
/*    margin-left: 2px;*/
/*}*/

/*****************************
 * Final Email Versand EAntrag
 *****************************/

.ui-tabs.ui-widget.emailTabbedPane {
    margin-left:120px;
    margin-right:20px;
    /*border-color: #A5A5A5;*/
    border: none;
}

.ui-tabs.ui-widget.emailTabbedPane .ui-tabs-nav {
    border-bottom-color: var(--gray30);
    border-block-width: 1px;
    border-bottom-style: solid;
    background: none;
}

.ui-tabs.ui-widget.emailTabbedPane .ui-tabs-nav .ui-tabs-header.ui-state-default {
    border:none;
}

.ui-tabs.ui-widget.emailTabbedPane .ui-tabs-nav .ui-tabs-header.ui-state-default a {
    color:var(--darkBlue100);
}

/*.ui-tabs.ui-widget.emailTabbedPane .ui-tabs-nav .ui-tabs-header.ui-state-default {*/

/*    border-top-right-radius: 10px;*/
/*    background-color: white;*/
/*    border-bottom-width: 2px;*/
/*    border-bottom-style: solid;*/
/*    border-bottom-color: white;*/
/*}*/

/*.ui-tabs.ui-widget.emailTabbedPane .ui-tabs-nav .ui-tabs-header.ui-state-default.ui-state-hover {*/
/*    !*background-color:#dddddd;*!*/
/*}*/

/*.ui-tabs.ui-widget.emailTabbedPane .ui-tabs-nav .ui-tabs-header.ui-state-default.ui-tabs-selected {*/

/*    !*background-color: #00a0e1;*/
/*    color: #fff;*!*/
/*    border-bottom-color: var(--blue100);*/
/*}*/

.ui-tabs.ui-widget.emailTabbedPane .ui-tabs-nav li.ui-tabs-header.ui-state-default a {
    padding: 10px 25px;
    color: white;
    background-color:  var(--darkBlue100);
}

.ui-tabs.ui-widget.emailTabbedPane .ui-tabs-nav .ui-tabs-header.ui-state-default.ui-tabs-selected a {
    font-weight: bold;
    color: white;
    background-color: var(--blue100);
}


.emailTabTitle {
    display: inline-grid;
    float: none;
    grid-column-gap: 10px;
    grid-template-columns: auto auto;
    align-items: center;
}

/*.emailTabTitle.tabTitleText {*/
/*    font-weight: normal;*/
/*}*/

/*.ui-tabs-header.ui-state-default.ui-tabs-selected.ui-state-active .emailTabTitle .tabTitleText {*/
/*    font-weight: bold;*/
/*}*/

.ui-tabs.ui-widget.emailTabbedPane .tabTitleIcon {
    font-size: 16px;
    line-height: 16px;
    width: 16px;
    height: 16px;
}


.ui-tabs.emailTabbedPane .ui-tabs-panel.ui-widget-content {
    padding:10px;
}

.ui-tabs.emailTabbedPane .ui-tabs-panel.ui-widget-content .inputRow .formLabelCol {
    width:90px;
}

.ui-tabs.emailTabbedPane .ui-tabs-panel.ui-widget-content .inputRow .formCompCol {
    width:282px;
}

.ui-tabs.emailTabbedPane .ui-tabs-panel.ui-widget-content .inputRow .formCompColX2 {
    width: 654px;
}

.textRecipient {
    font-size: 14px;
}

.emailTabBodyAttachmentContainer {
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

.emailTabBodyAttachmentContainer .emailBody {
    width: 420px;
}

.emailTabBodyAttachmentContainer .emailAttachment {

    width: 360px;
    margin-right: 5px;
    margin-top: 5px;
    margin-bottom: 7px;
    background: var(--gray10);
    padding: 10px;
}

.emailAttachment .attachmentTitle {

    margin-bottom: 10px;
    font-weight: bold;
}

.emailAttachment .attachmentItem {
    margin-left: 10px;
    margin-top:4px;
    margin-bottom:4px;

}

.emailAttachment .attachmentItem .attachmentIcon {
    margin-right: 10px;
}


.vnvpHinweis {
    padding: 5px;
    background-color: var(--grayContentBkgnd);
}

.vnvpHinweis ul {
    column-count: 3;
    padding-left: 14px;
}

.defaultSvgTriangleRight {
    fill:var(--darkBlue100);
    stroke:none;
    stroke-width:0px;
    stroke-linecap:butt;
    stroke-linejoin:miter;
    stroke-opacity:1;
    fill-opacity:1
}