.alignTop {
    vertical-align: top;
}

.kommentarHeader {
    font-weight: bold;
}


.ui-button .ui-button-text {
    user-select: none;
}

.kommentarBody {
    margin-left: 20px;
}

.kommentarBody * {
    display: inline-block !important;
}

.kommentarExpansion li:nth-child(odd) {
    background-color: #f9f9f9;
    border-bottom: 1px solid #dddddd;
}

.kommentarExpansion li:nth-child(even) {
    background-color: #ffffff;
    border-bottom: 1px solid #dddddd;
}

.kommentarIcon {
    text-align: right;
}

.kommentarExpansion > td > * {
    margin-left: 40px;
    margin-right: 40px;
}

.calendar-mobile-workaround > div > div {
    max-width: 100%;
}

.maxContentWidth {
    width: max-content !important;
}

.autoContentWidth {
    width: auto !important;
}

.dashedLink {
    border-bottom: 1px dashed;
}

.maxWidth,
.maxWidth > input.hasDatepicker,
.maxWidth > label.ui-selectonemenu-label,
.maxWidth > input.ui-autocomplete-input {
    width: 100% !important;
    box-sizing: border-box;
}

.maxWidthMinus5,
.maxWidthMinus5 > input.hasDatepicker,
.maxWidthMinus5 > label.ui-selectonemenu-label,
.maxWidthMinus5 > input.ui-autocomplete-input {
    width: 95% !important;
    box-sizing: border-box;
}

.maxWidthMinus3,
.maxWidthMinus3 > input.hasDatepicker,
.maxWidthMinus3 > label.ui-selectonemenu-label,
.maxWidthMinus3 > input.ui-autocomplete-input {
    width: 97% !important;
    box-sizing: border-box;
}

.maxWidthMinusButton {
    width: calc(100% - 50px);
}

.autoWidth {
    width: auto !important;
}

.small-button,
.small-selectbooleanbutton {
    min-width: 25px;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50%;
}

.small-selectbooleanbutton > .ui-icon {
    left: 0.35em;
}

.small-button-long {
    width: 60px;
    min-width: 60px;
    height: 25px;
    border-radius: 50% !important;
}

/* Klasse für Dialoge mit ScrollPanel, die die ScrollBar deaktivieren, damit diese nicht doppelt erzeugt werden. */
.dialog-noscroll .ui-dialog-content {
    overflow: hidden !important;
}

#myForm\:reportTreeTable tbody > tr:nth-child(odd),
.revauditTreeTableButton tr:nth-child(odd) {
    background-color: #f9f9f9;
}

.exportMenuSelectDiv,
.valign-toolbar-input:not(.toolbar-text) {
    vertical-align: middle !important;
}

.toolbar-text {
    vertical-align: initial !important;
}

.align-center {
    margin-left: auto;
    margin-right: auto;
}

.text-align-center {
    text-align: center !important;
}

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

.text-align-justify {
    text-align: justify;
}

.forceLineBreak {
    word-wrap: break-word;
    word-break: break-all;
    white-space: break-spaces;
}

.forceWordBreak {
    word-wrap: break-word;
    word-break: break-word;
    white-space: break-spaces;
}

.benutzeredit-radio > tbody > tr > td:nth-child(odd) > *,
.grunddatendefinitionedit-radio > tbody > tr > td:nth-child(odd),
.grunddatenerfassung-radio > tbody > tr > td:nth-child(odd) {
    width: 25px;
}

.grunddatenerfassung-button-abschnittskommentare {
    position: absolute !important;
    left: 0px;
    top: 0px;
}

.grunddatenerfassung-button-planerfassung {
    position: absolute !important;
    right: 0px;
    top: 0px;
}


.MathJax {
    font-size: 100% !important;
}

/*
 * Keyboard-Shortcut-Icons: https://github.com/michaelhue/keyscss
 */
/* Base style, essential for every key. */
kbd, .key {
    display: inline;
    display: inline-block;
    min-width: 1em;
    padding: .2em .3em;
    font: normal .85em/1 "Lucida Grande", Lucida, Arial, sans-serif;
    text-align: center;
    text-decoration: none;
    -moz-border-radius: .3em;
    -webkit-border-radius: .3em;
    border-radius: .3em;
    border: none;
    cursor: default;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

kbd[title], .key[title] {
    cursor: help;
}

/* Dark style for display on light background. This is the default style. */
kbd.dark, .dark-keys kbd, .key, .key.dark, .dark-keys .key {
    background: rgb(80, 80, 80);
    background: -moz-linear-gradient(top, rgb(60, 60, 60), rgb(80, 80, 80));
    background: -webkit-gradient(linear, left top, left bottom, from(rgb(60, 60, 60)), to(rgb(80, 80, 80)));
    color: rgb(250, 250, 250);
    text-shadow: -1px -1px 0 rgb(70, 70, 70);
    -moz-box-shadow: inset 0 0 1px rgb(150, 150, 150), inset 0 -.05em .4em rgb(80, 80, 80), 0 .1em 0 rgb(30, 30, 30), 0 .1em .1em rgba(0, 0, 0, .3);
    -webkit-box-shadow: inset 0 0 1px rgb(150, 150, 150), inset 0 -.05em .4em rgb(80, 80, 80), 0 .1em 0 rgb(30, 30, 30), 0 .1em .1em rgba(0, 0, 0, .3);
    box-shadow: inset 0 0 1px rgb(150, 150, 150), inset 0 -.05em .4em rgb(80, 80, 80), 0 .1em 0 rgb(30, 30, 30), 0 .1em .1em rgba(0, 0, 0, .3);
}

/* Light style for display on dark background. */
kbd, kbd.light, .light-keys kbd, .key.light, .light-keys .key {
    background: rgb(250, 250, 250);
    background: -moz-linear-gradient(top, rgb(210, 210, 210), rgb(255, 255, 255));
    background: -webkit-gradient(linear, left top, left bottom, from(rgb(210, 210, 210)), to(rgb(255, 255, 255)));
    color: rgb(50, 50, 50);
    text-shadow: 0 0 2px rgb(255, 255, 255);
    -moz-box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9);
    -webkit-box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9);
    box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9);
}

.tableCellLineBreak {
    white-space: pre-line;
    display: table-cell;
}

.toolbar-text {
    vertical-align: middle;
}

.hide-tree {
    display: none;
}

.ui-treenode-label.ui-state-highlight .prognose-bestaetigt {
    color: #00FF7F;
}

.ui-treenode-label:not(.ui-state-highlight) .prognose-bestaetigt {
    color: #1ECA18;
}

.ui-treenode-label.ui-state-highlight .prognose-partiell-bestaetigt {
    color: #F9ED8A;
}

.ui-treenode-label:not(.ui-state-highlight) .prognose-partiell-bestaetigt {
    color: #D09912;
}

.dialog-header-button {
    float: right;
}

body #myForm\:cboElementtyp_table .ui-state-disabled {
    opacity: 1.0 !important;
    font-weight: bold !important;
}

.datalist-without-borders > div,
.datalist-without-borders-inline > div,
.standortbestimmungDataList > div {
    border: none;
    padding: 0;
    background: inherit;
}

.datalist-without-borders-inline ul {
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 0;
}

.datalist-without-borders-inline li {
    display: inline;
}

.datalistwithoutborder > div {
    border-style: hidden !important;
}

.hilfe-dropdown {
    position: relative;
    display: inline-block;
}

.hilfe-dropdown a:first-child span,
.link-benutzername span,
.link-revert span,
.link-logout span,
.link-supportanfragen span,
.link-schulungen span {
    margin-right: 7px;
}

.hilfe-dropdown-content {
    text-align: left;
    display: none;
    position: absolute;
    /* background-color: #f9f9f9;  */
    min-width: 270px;
    /* box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); */
    padding: 6px;
    right: 0px;
}

.hilfe-dropdown-content li {
    display: block !important;
    margin-top: 0.25em;
    margin-bottom: 0.25em;
}

.hilfe-dropdown.ui-state-hover .hilfe-dropdown-content {
    display: block;
    z-index: 2000;
}

.hilfe-dropdown-content a, .hilfe-dropdown-content a:visited {
    color: #747b80 !important;
    transition: background-color 0.25s;
}

.hilfe-dropdown-content a:hover, hilfe-dropdown-content a:focus {
    color: #000 !important;
    background-color: #e0e0e0 !important;
    transition: background-color 0.25s;
}

.iconFlag {
    height: 20px;
    vertical-align: text-top;
}

.nobackground,
.nobackground tr,
.nobackground .ui-panelgrid-content {
    background: none !important;
}

.nobackground-direct {
    background: none !important;
}

.dialogtemplate-scrollPanel {

}

.gridwithoutBorder tr, .gridwithoutBorder td,
.gridwithoutBorder .ui-widget-content, .gridwithoutborder .ui-widget-content,
.gridwithoutborder tr, .gridwithoutborder td,
.clear-panelgrid tr, .clear-panelgrid td,
.gridwithoutborder > .ui-grid {
    border-style: hidden !important;
}

.gridwithoutbordertop > * > tr,
.gridwithoutbordertop > * > tr > td {
    border-style: hidden !important;
}

.plainText {
    text-align: left;
}

.dialog-with-button > div > span {
    width: 90%;
}

.dialog-header-button {
    float: right;
}

.ui-widget.ui-widget-no-background,
.ui-widget.ui-widget-no-background > .ui-widget-content {
    background-color: unset;
    padding: 0;
    border: unset;
}

.message-cell {
    padding: 0 !important;
}

.legacy-picklist-button-div {
    text-align: center;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.legacy-picklist-button {
    display: inline-block;
}

@media screen and (max-width: 40em) {
    body .legacy-picklist-button .fa-arrow-right::before {
        content: "\f063";
    }

    body .legacy-picklist-button .fa-arrow-left::before {
        content: "\f062";
    }
}

.staticMessage-standalone {
    margin: 10px 0 !important;
}

.clear-datalist > div {
    background: none;
    border: none;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.flex-vertical-center {
    display: flex;
    align-items: center;
    height: 100%;
}

.flex-column {
    flex-direction: column;
}

.flex-break {
    flex-basis: 100%;
    height: 0;
}

body .md-inputfield.black input:focus ~ label,
body .md-inputfield.black input.ui-state-filled ~ label,
body .md-inputfield.black textarea:focus ~ label,
body .md-inputfield.black textarea.ui-state-filled ~ label,
body .md-inputfield.black .ui-selectonemenu.ui-state-focus ~ label,
body .md-inputfield.black .ui-selectonemenu.ui-state-filled ~ label,
body .md-inputfield.black .md-inputwrapper-focus ~ label,
body .md-inputfield.black .md-inputwrapper-filled ~ label {
    color: #212121;
}

.mathJax {
    overflow: scroll;
}

body .zero-margin,
body .ui-messages.zero-margin > * {
    margin: 0;
}

body .ui-messages.zero-margin {
    margin-bottom: 1em;
}

body .zero-padding {
    padding: 0;
}

body .zero-padding-important {
    padding: 0 !important;
}

.ColumnType-Header-Value[role="columnheader"],
.ColumnType-Header-Difference[role="columnheader"],
.ColumnType-Header-Sum[role="columnheader"],
.ColumnType-Header-Percentage[role="columnheader"],
.ColumnType-Header-Rating[role="columnheader"],
.ColumnType-Header-AllYearsValue[role="columnheader"],
.ColumnAlignSetting-Right[role="columnheader"] {
    text-align: right !important;
}

.ColumnType-Header-Label[role="columnheader"],
.ColumnType-Header-LabelWithoutGliederung[role="columnheader"],
.ColumnType-Header-Gliederung[role="columnheader"],
.ColumnType-Header-Zusatztext[role="columnheader"],
.ColumnType-Header-EditableText[role="columnheader"],
.ColumnAlignSetting-Left {
    text-align: left !important;
}

.ColumnType-Header-Unit[role="columnheader"],
.ColumnAlignSetting-Center {
    text-align: center !important;
}


.small-button-width1 {
    width: 50px;
}

.small-button-width4 {
    width: 150px;
}

/* Klassen für responsive picklist-Buttons, um die Richtung der Pfeile zu ändern und die Position zu steuern. */
.picklist-button {
    width: 30px;
    margin: 2px;
    display: block;
}

.transfer-buttons {
    width: 30px;
    margin: auto;
    display: block;
}

@media only screen and (max-width: 1024px) {

    .picklist-button {
        display: inline-block;
        margin: 2px;
        transform: rotate(90deg);
    }

    .transfer-buttons {
        width: 136px;
        display: block;
        margin: auto;
    }

}

/* Klasse für PanelGrids, die die Paddings für td's verringert, sodass mehr Platz für Daten und zum Darstellen von Inhalten vorhanden ist. */
.panelgrid-nopadding > tbody > tr > td[role="gridcell"] {
    padding-left: 1px;
    padding-right: 1px;
}

.boldText {
    font-weight: bold;
}

/*
    Klassen, die nur für Ansichten gelten, solange kein reflow zu einer mobilen Ansicht geschehen ist.
 */
@media only screen and (min-width: 641px) {

    /* Limitiert die Breite eines Panels in einer Ansicht mit aufgeklapptem Hierarchiebaum */
    .viewport-hierarchy-panel {
        max-width: 58vw !important;
        min-width: 550px;
    }

}

/*
    reflow-strict styleClass für Datatables, die das Verhalten von reflow imitiert, dabei aber strikter ist.
    Überschreibt custom-styles teilweise mit !important, da diese für die Mobilansicht keinen Sinn mehr ergeben. (z.B. width in px)
    (Bzw. lässt Custom-Styles für andere Ansichten explizit zu.)
    Lässt außerdem kein wrap-around zu, sodass eine klare Tabellenstruktur für Mobilansichten entsteht.
 */
@media only screen and (max-width: 640px) {

    .reflow-strict .ui-datatable-data td[role="gridcell"] {
        display: flex !important;
    }

    .reflow-strict .ui-datatable-data td[role="gridcell"] .ui-column-title {
        float: left;
        font-weight: bold;
        max-width: 40% !important;
        text-align: left !important;
        margin: 0;
        padding: 0;
    }

    .reflow-strict .ui-datatable-data td[role="gridcell"] > span,
    .reflow-strict .ui-datatable-data td[role="gridcell"] > label,
    .reflow-strict .ui-datatable-data td[role="gridcell"] > div,
    .reflow-strict .ui-datatable-data td[role="gridcell"] > input,
    .reflow-strict .ui-datatable-data td[role="gridcell"] > p {
        float: right;
        max-width: 60% !important;
        width: 60% !important;
        white-space: normal !important;
    }

    /*
        Klasse für Elemente, die innerhalb von reflow-strict zum rechten Rand der Table floaten sollen. Z.B. für Finanzdaten,
        die untereinander gelistet werden sollen.
     */
    .reflow-strict .ui-datatable-data td[role="gridcell"] > .reflow-strict-right {
        text-align: right;
    }

    .limitedWidthMobile {
        max-width: 250px;
    }

}

/*
    Verändert das Spacing von Radiobuttons in einer SelectOneRadio-Auswahl.
 */
.ampel-bewertung-spacing .ui-g > * {
    padding: 12px !important;
}

@media only screen and (max-width: 1024px) {

    .disable-custom-width-md {
        width: auto !important;
    }

}

body .export-chart-model-button-menu {
    width: 15em;
}

.display-none {
    display: none;
}

.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #a4096d;
    color: #ffffff;
    padding: 8px;
    z-index: 100000;
    border: 1px solid #747b80;
    border-radius: 4px;
}

.skip-link:focus {
    top: 0;
}

/*
   Klasse für die Darstellung der Kostenarten-Strings
 */
.kostenart-inline > p {
    padding-left: 7px;
    margin-bottom: 0.25em;
    margin-top: 0.25em;
}

.eigenschaften-include {
    border: 1px solid #dbdbdb;
    border-radius: 4px;
    box-shadow: 0px 0px 4px #dbdbdb;
}

.label-cell label,
.label-cell span {
    word-break: break-word;
}

.css-counter-init {
    counter-reset: panel-counter;
}

.css-counter-caption:before {
    content: counter(panel-counter) '. ';
    counter-increment: panel-counter;
}

.disable-link-highlight {
    border: 0 !important;
}

.tableNoBorderSpacing {
    border-spacing: 0px;
}

/*
    td und th Styles müssen für Tabellen mit generierten Border Styles teilweise von gridWithoutBorder überschrieben werden,
    da dort bereits td/th Styles mit !important gesetzt werden.
 */
.generatedTableBorderHorizontal td,
.gridwithoutBorder .generatedTableBorderHorizontal td {
    border-bottom: 1px solid !important;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    border-style: solid !important;
    border-color: inherit !important;
}

.generatedTableBorderHorizontal th,
.gridwithoutBorder .generatedTableBorderHorizontal th,
.generatedTableBorderHorizontal tr,
.gridwithoutBorder .generatedTableBorderHorizontal tr {
    border-bottom: 1px solid !important;
    border-top: 1px solid !important;
    border-left: 0px !important;
    border-right: 0px !important;
    border-style: solid !important;
    border-color: inherit !important;
}

/*
    Gilt nur für das erste td/th einer generierten Tabelle.
 */
.generatedTableBorderVertical td,
.gridwithoutBorder .generatedTableBorderVertical td,
.generatedTableBorderVertical th,
.gridwithoutBorder .generatedTableBorderVertical th {
    border-bottom: 0px;
    border-top: 0px;
    border-left: 1px solid !important;
    border-right: 1px solid !important;
    border-style: solid !important;
    border-color: inherit !important;
}

/*
    Gilt für alle td/th außer für das erste td/th Element einer Tabelle.
 */
.generatedTableBorderVertical td ~ td,
.gridwithoutBorder .generatedTableBorderVertical td ~ td,
.generatedTableBorderVertical th ~ th,
.gridwithoutBorder .generatedTableBorderVertical th ~ th {
    border-bottom: 0px;
    border-top: 0px;
    border-left: 0px !important;
    border-right: 1px solid !important;
    border-style: solid !important;
    border-color: inherit !important;
}

.ui-selectmanycheckbox.correct-label .ui-g > .ui-g-12,
.ui-selectoneradio.correct-label .ui-g > .ui-g-12 {
    display: flex !important;
}

/*
    Klasse, die den Style von "gridwithoutBorder td" wieder überschreibt, damit Tabellen einen Custom-Style darstellen können, der z.B. im CK-Editor erstellt wurde.
    Ansonsten steht border-style auf hidden und es wird kein Style angezeigt.
 */

.formatierungsvorlageStyle table tbody,
.formatierungsvorlageStyle table tbody tr,
.formatierungsvorlageStyle table tbody tr td,
.formatierungsvorlageStyle table thead tr,
.formatierungsvorlageStyle table thead th,
.formatierungsvorlageStyle table th {
    border: inherit;
    border-style: solid !important;
}

.reportimage-align-left {
    float: left;
}

.reportimage-align-right {
    float: right;
}

.reportimage-align-center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.dialog-content-maxwidth {
    max-width: 900px;
    margin: 0 auto;
}

.scrollpanel {
    border: initial;
}

.w3-badge {
    background-color: #000;
    color: #fff;
    display: inline-block;
    padding-left: 8px;
    padding-right: 8px;
    text-align: center
}

.w3-badge {
    border-radius: 50%
}

.w3-red {
    color: #fff !important;
    background-color: #e62a10 !important;
}

.row-style-green:not(:hover) {
    background-color: rgba(0, 255, 0, 0.2) !important;
}

.selectManyCheckboxSpacedOut {
    border-collapse: separate;
    border-spacing: 1.8em 1.8em;
}

.paket-Support_Plus_Enabled {
    transform: scale(1.5);
}

.paket-any {
    transition: transform .2s;
}

.paket-any:hover {
    transform: scale(2.5);
}

.revauditTreeTableButton-fix,
body .ui-widget-header .revauditTreeTableButton-fix .ui-icon {
    color: #212121 !important;
    font-weight: normal !important;
}

/* Primefaces-Icons erhalten mit PF11 ohne konkretere Definition falsche Fonts von Fontawesome vererbt */
body .ui-button .pi {
    font-family: 'primeicons';
}

.externalLink {
    cursor: pointer !important;
}

.externalLink input {
    cursor: pointer !important;
}

.hideEmptyLink {
    color: inherit;
}

.icon-enlarged {
    font-size: 1.2rem;
}

body .erfassungsstatusToggle .ui-selectbooleanbutton.ui-state-active {
    background-color: #0060b8;
}

body .erfassungsstatusToggle .ui-selectbooleanbutton {
    background-color: #a4096d;
}