/** buergerkonto.client.pub CSS **/


/* Colors
 *   orange:      #FF8723 (255 135 35)
 *   lightgrey:   #F5F5F5 (245 245 245)
 *   contourgrey: #D7D7D7 (215 215 215)
 *   darktype:    #2A2A2A (42 42 42)
 *   normaltype:  #7A7A7A (122 122 122)
 *   symbol:      #505050 (80 80 80)
 */

/************************** shared rules ************************/

.break-words {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

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

* {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
}

html {
    overflow-x: hidden;
    width: 100%;
    font-size: 16px;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.classAppRootPanel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.main {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.main-layout {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    position: relative;
    height: 100vh;
}

.main-layout.with-main-overlay {
    overflow: hidden;
}

.main-layout header {
    z-index: 1000 !important;
}

.main-layout .main-overlay {
    top: 64px;
    height: calc(100vh - 64px);
}

/* Webservice Login Panel Styling */

#loginPanel,
#loginPanel * {
    box-sizing: border-box;
}

#loginPanel {
    max-width: 320px;
    padding: 1rem;
    position: relative;
}

#loginPanel .logo {
    width: 100% !important;
}

#loginPanel .headline {
    font-width: bold;
}

#loginPanel .field {
    margin-top: 1em;
    margin-bottom: 1em;
}

#loginPanel .field.centered_field {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#loginPanel .hint,
#loginPanel .hint p {
    margin-top: 1em;
    margin-bottom: 1em;
}

#loginPanel .field .label {
    display: block;
    width: 100%;
}

#loginPanel .field.centered_field .label {
    width: auto;
}

#loginPanel .field .label::after {
    content: ':';
}

#loginPanel .field .input {
    display: block;
    width: 100%;
}

#loginPanel .field .btn, #loginPanel .field .gwt-ListBox, #loginPanel img.npalogo {
    margin-top: 10px;
}

#loginPanel img.npalogo {
    width: 48px !important;
    height: 48px !important;
    background-size: 48px 48px !important;
    cursor: pointer;
}

#loginPanel .buttonBar {
    margin-top: 1em;
    margin-bottom: 1em;
    text-align: left;
}

#loginPanel .buttonBar button {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
}

#loginPanel .befugnisHintTitlePanel .classButtonStd {
    background: none;
    border: none;
}

#loginPanel .befugnisHintPanel {
    display: none;
    padding: 1ex;
}

#loginPanel .befugnisHintPanel .hint {
    margin: 0;
}

#loginPanel .befugnisHintPanel.open {
    display: block;
}

#loginPanel .validation-label {
    margin-top: 10px;
    color: red;
}

#loginPanel .black_circle_container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#loginPanel .black_circle {
    background-color: black;
    border-radius: 50%;
    width: 3.5em;
    height: 3.5em;
    display: flex;
    justify-content: center;
    align-items: center;
}

#loginPanel .black_circle .white_text {
    color: white;
    font-size: 0.8rem;
    font-weight: bold;
}

#loginPanel div.hr {
    width: 100%;
    height: 4px;
    background: #ddd;
    border: none;
    margin-top: 16px;
    margin-bottom: 16px;
}

/* End Webservice Login Panel Styling */

/***************** ServicekontoTitle ****************/

.servicekonto-title {
    padding-bottom: 1rem;
}

.servicekonto-title .title-text {
    padding-left: 1rem;
}

.servicekonto-title .title-text h1 {
    font-size: 2.28rem !important;
    font-weight: 300;
    margin: 1.14rem 0 .912rem 0;
}


.servicekonto-title .title-text h2 {
    font-size: 2rem; !important;
    font-weight: 300;
    margin: 1.14rem 0 .912rem 0;
}

.servicekonto-title h4 {
    font-weight: 300 !important;
}

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

/***************** ServicekontoHint ****************/

.servicekonto-hint {
    display: flex;
    align-items: center;
    position: relative;
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px grey solid;
}

.servicekonto-hint.hidden {
    display: none;
}

.servicekonto-hint .warning-icon {
    color: red;
}

.servicekonto-hint .servicekonto-hint-wrapper {
    flex: 1 1 100%;
}

.servicekonto-hint-wrapper p {
    margin: 0 !important;
}

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

/***************** ServicekontoSearch ***************/

.servicekonto-search {
    min-width: 296px;
    flex: 1 1 auto;
}

.servicekonto-search .button-collapse {
    display: none;
}

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

/***************** ServicekontoDialog ************/

.servicekonto-dialog.modal {
    max-height: 80%;
}

.servicekonto-dialog .modal-header {
    padding: 24px 24px 0 24px;
}

.servicekonto-dialog .modal-content {
    display: flex;
    flex-direction: column;
    padding: 0 24px 24px !important;
}

.servicekonto-dialog .modal-content.scrollable-dialog-content {
    height: 100%;
    max-height: 100%;
    flex: 0 1 auto;
    overflow-y: auto;
}

/* last-child/first-child must be interchanged here because buttons in MaterialDialogFooter have float: right, so the order is inverted */
.servicekonto-dialog .modal-footer .btn:not(:last-child),
.servicekonto-dialog .modal-footer .btn-large:not(:last-child),
.servicekonto-dialog .modal-footer .btn-flat:not(:last-child) {
    margin-left: 0.5rem;
}

.servicekonto-dialog .modal-footer .btn:not(:first-child),
.servicekonto-dialog .modal-footer .btn-large:not(:first-child),
.servicekonto-dialog .modal-footer .btn-flat:not(:first-child) {
    margin-right: 0.5rem;
}

.close-icon-small {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    font-size: 1.2rem;
    cursor: pointer;
}

.close-icon-large {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 2rem;
    cursor: pointer;
}

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

/****************** SlidingOverlay ***************/

.sliding-overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /* z-index has to be exactly 998 so the NavBar shadow is still visible but the search icon, that has a z-index of 998 as well, is not  */
    z-index: 998;
    background: white;
    display: flex;
    flex-direction: column;
}

.sliding-overlay .sliding-overlay-title {
    display: flex;
    padding: 0 3rem;
    height: 6rem;
}

.sliding-overlay > .sliding-overlay-content {
    height: 100%;
    display: flex;
    overflow: auto;
    padding-left: 3rem;
    padding-right: 3rem;
    padding-bottom: 3rem;
}

.sliding-overlay > .sliding-overlay-content > * {
    flex: 1 1 auto;
}

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

/****************** ServicekontoDetailBox ********/

.detail-box {
    position: relative;
    padding-top: 1.2rem;
}

.detail-box.with-helper {
    padding-bottom: 1.2rem;
}

.detail-box .detail-label {
    position: absolute;
    top: 0;
    font-size: 0.8rem;
    color: #9e9e9e;
}

.detail-box .detail-helper {
    position: absolute;
    bottom: 0;
    font-size: 0.8rem;
    color: #9e9e9e;
}

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

/****************** Header *******************/

.main-nav .nav-wrapper a.button-collapse {
    display: flex !important;
    justify-content: center;
    align-items: center;
}

.main-nav .nav-wrapper a.button-collapse.hidden {
    display: none !important;
}

.main-nav .brand-logo {
    height: inherit;
}

.main-nav .nav-bar-content-wrapper {
    display: flex;
}

.main-nav .nav-bar-content, .main-nav .nav-bar-logout {
    margin-right: 1rem;
    display: flex;
    align-items: center;
}

.main-nav .nav-bar-content {
    margin-left: auto;
}

.main-nav .nav-bar-content .nav-bar-content-item {
    margin-right: 1rem;
    display: flex;
}

.main-nav .nav-bar-vertretung-content {
    margin-left: auto;
    color: #F00;
    font-weight: bold;
}

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

/****************** SideNav ******************/

.side-nav .side-profile {
    border-bottom: 1px grey solid;
}

.side-nav.expanded .side-profile .side-profile-icon {
    font-size: 6rem;
    width: 6rem;
}

.side-nav .side-profile .side-profile-details {
    display: none;
}

.side-nav.expanded .side-profile .side-profile-details {
    display: block;
}

.side-nav .side-profile .side-profile-details .side-profile-befugnis {
    margin-top: 2rem;
}

.side-nav .side-profile .side-profile-details .side-profile-befugnis span {
    text-align: initial;
}

ul.side-nav a, ul.side-nav.fixed a, ul.side-nav .collapsible li {
    position: relative;
}

ul.side-nav .collapsible-body li {
    display: flex;
}

ul.side-nav .collapsible li a .gmm-status-icon {
    margin-left: auto;
}

ul.side-nav.hidden {
    visibility: hidden;
}

#sidenavMiniExpand>li {
    line-height: inherit;
    background: inherit;
}

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

/****************** Content ******************/

main {
    display: flex !important;
    flex: 1 0 auto;
    margin-top: 64px;
    padding-bottom: 0 !important;
}

main .main-container {
    display: flex;
    flex: 1 1 auto;
    position: relative;
    max-width: 100%;
    padding: 3rem;
}

main .main-container > div.listViewer {
    margin: 0;
}

main .main-container p {
    margin: 1rem 0;
}

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

/****************** Footer *******************/

footer.page-footer {
    flex: 0 1 auto;
    margin-top: initial !important;
}

footer.page-footer .footer-content-row {
    max-width: initial;
}

footer.page-footer .footer-columns {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

footer.page-footer .footer-columns::before {
    content: ' ';
}

footer.page-footer .footer-columns::after {
    content: ' ';
}

footer.page-footer .footer-buttons {
    display: flex;
    flex-direction: column;
}

footer.page-footer .footer-buttons a.footer-button {
    width: 100%;
}

footer.page-footer .footer-contact-data {
    display: flex;
    flex-direction: column;
}

footer.page-footer .footer-contact-data .footer-contact {
    display: flex;
    align-items: center;
}

footer.page-footer .footer-copyright {
    display: flex;
    align-items: center;
    height: auto !important;
    min-height: 50px;
    line-height: initial !important;
}

footer.page-footer .footer-copyright .copyright-label {
    text-align: center;
}

body footer.page-footer ul {
    padding-left: 0;
}

body footer.page-footer ul li {
    list-style-type: none;
}

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

/***************** WelcomeWidget *******************/

.welcome-content {
    padding: 1rem;
    margin: auto !important;
    max-width: 1200px;
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .welcome-content {
        max-width: none;
    }
}

.welcome-content .welcome, .welcome-content .login {
    flex: 1 1 50%;
    padding: 1rem;
    min-width: 17rem;
    /* Fix für IE11, da im IE flex-basis nicht box-sizing: border-box und damit keine paddings/margins berücksichtigt  */
    -ms-flex-preferred-size: calc(50% - 2.5em);
}

.welcome-content .welcome {
    border-right: 1px lightgrey dashed;
}

.welcome-content .login {
    display: flex;
    flex-direction: column;
    max-width: 100%;
}

.welcome-content .login .login-button {
    margin: 1rem 0;
}

.welcome-content .login .register-links {
    display: flex;
    flex-direction: column;
}

.welcome-content .login .register-links > * {
    margin: 0.2rem 0;
}

.welcome-content .login .register-links .npa-auth {
    display: flex;
    align-items: center;
}

.welcome-content .login .register-links .npa-auth .npalogo {
    width: 1.5rem !important;
    height: 1.5rem !important;
    margin-left: 0.5rem;
}

.welcome-content .welcome a,
.welcome-content .welcome a:hover,
.welcome-content .welcome a:active,
.welcome-content .welcome a:link {
    text-decoration: none;
    font-weight: bold;
}

.welcome-content .welcome ul {
    list-style-type: none;
    padding: 1rem;
}

.welcome-content .welcome ul li {
    font-weight: bold;
}

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

/*********************** BefugnisseWidget *********************/

.befugnis-group .data-list .add-icon {
    display: none;
}

.befugnis-group .befugnis-group-title {
    font-weight: 500;
    font-size: 1.2rem;
}

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

/************************* AsyncDataTable *********************/

.async-data-table.table-container {
    height: auto;
}

.async-data-table .tool-panel #stretch {
    display: none;
}

.async-data-table .async-data-table-filter {
    float: right;
}

.async-data-table .x-scroll {
    display: none;
}

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

/*********************** Rechte DataTable *********************/

.rechte-data-table .top-panel {
    display: none;
}

.rechte-data-table .table-body table.table tbody td,
.rechte-data-table .table-body table.table thead th {
    padding: 1.2rem !important;
}

.rechte-data-table .table-body .fachverfahren-label {
    font-weight: bold;
}

.rechte-data-table .x-scroll {
    display: none;
}

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

/********************* MitarbeiterListWidget ********************/

.mitarbeiter-list-widget {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
}

.mitarbeiter-list-widget .mitarbeiter-list .listViewerItem .description {
    display: flex;
    flex-wrap: wrap;
}

.mitarbeiter-list-widget .mitarbeiter-list .listViewerItem .description .description-befugnis {
    display: flex;
    align-items: center;
}

.mitarbeiter-list-widget .mitarbeiter-list .listViewerItem .description .description-befugnis:not(:last-child) {
    border-right: 1px solid;
    padding-right: 0.5rem;
    margin-right: 0.5rem;
}

.mitarbeiter-list-widget .mitarbeiter-list .listViewerItem .description .description-befugnis > i {
    margin-left: 0.5rem;
}

.mitarbeiter-list .mitarbeiter-list-icon {
    margin-left: auto;
}


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

/********************* VerlaufWidget ****************************/

.verlauf-widget {
    flex: 1 1 auto;
    width: 100%;
}

.verlauf-widget .tabs {
    width: 100% !important;
    padding-left: 0;
}

.benutzersitzung-log-details .collection {
    margin: 0;
}

.benutzersitzung-log-details .collection .collection-item {
    display: flex;
    flex-wrap: wrap;
}

.benutzersitzung-log-details .collection .collection-item .log-detail-value {
    margin-left: auto;
}

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

/******************* Filters Popup ******************************/

.servicekonto-dropdown-content {
    padding: 1rem;
    overflow-y: visible !important;
}

.servicekonto-dropdown-content .filter-box {
    color: #616161;
}

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

/***************** ZertifikateDownloadWidget ********************/

.zertifikate-download-widget {
    width: 100%;
}

.zertifikate-download-widget .zertifikat-description {
    margin: 1rem 0;
}

.zertifikate-download-widget .zertifikat-link-date {
    display: flex;
    align-items: baseline;
}

.zertifikate-download-widget .zertifikat-link-date span.zertifikat-date {
    margin-left: 1em;
    font-size: smaller;
    font-style: italic;
    color: gray;
}

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

/*************************** NPA ********************************/

.remote-authentication-widget {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.remote-authentication-widget .npa-authentication-content {
    display: flex;
    flex: 1 1 auto;
    margin-top: 1rem;
}

.remote-authentication-widget .npa-authentication-content > div {
    display: flex;
    flex-direction: column;
}

.remote-authentication-widget .npa-logo {
    height: 3rem;
    width: 3rem;
    cursor: pointer;
    margin-top: 1rem;
}

.remote-authentication-registration .remote-authentication-registration-data {
    display: flex;
    flex-direction: column;
}

.remote-authentication-registration .remote-authentication-registration-data .remote-authentication-data-label {
    margin-top: 1rem;
}

.remote-authentication-registration .remote-authentication-registration-data .remote-authentication-data {
    margin: 1rem 0;
}

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

/*********************** StandorteListWidget ********************/

.standorte-list-widget {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
}

.standort-loeschen-hinweis {
    font-weight: bold;
}

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

/*********************** StandortListItem ********************/

.standort-list-item.unapproved-standort {
    color: lightgray;
}

.standort-list-item .standort-name {
    margin-right: 0.5rem;
}

.standort-list-item .standort-list-icon {
    margin-left: auto;
}

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

/*********************** StandortDetailsWidget ******************/

.standort-details {
    width: 100%;
    padding: 1rem;
    overflow: auto;
}

.standort-details .detail-box:not(:first-child) {
    margin-top: 0.5rem;
}

.standort-details .standort-name {
    margin-right: 0.5rem;
}

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

/*********************** StandortEditWidget ******************/

.standort-edit {
    width: 100%;
    padding: 1rem;
}

.standort-edit .save-button {
    margin-left: auto;
}

/************** sjf Dokument-Viewer ******************/

.dokument-info-panel .classImageViewer {
    text-align: center;
}

.dokument-info-panel .classImageViewer .classImageViewerContent {
    width: 100%;
}

.dokument-info-panel .classImageViewer .classLayoutManagerSingleRow div {
    overflow: auto !important;
}

div.classDocumentViewer > div:has(.sjf-docviewer-splitBar) {
    width: 100% !important;
    left: unset !important;
    height: calc(100% - 2px) !important;
}

/* Diese Css-Klassen Gehören dem DocumentViewer und aus app.css vom SJF-Packages kopiert*/
/* ************************************************************  */

.documentViewerWrapper .classHPanelSingleItem {
    position: relative;
}

.classHPanelLeftItem {
    position: relative;
    display: inline-block;
    margin-right: 1px;
}

.classHPanelCenterItem {
    position: relative;
    display: inline-block;
    margin-left: 1px;
    margin-right: 1px;
}

.classHPanelRightItem {
    position: relative;
    display: inline-block;
    margin-left: 1px;
}

.classAlignLeft {
    align: left;
}

.classAlignRight {
    align: right;
}

.classVPanel {

}

.classVPanelSingleItem {
    position: relative;
}

.classVPanelTopItem {
    position: relative;
    margin-bottom: 1px;
    display: block;
}

.classVPanelMiddleItem {
    position: relative;
    margin-top: 1px;
    margin-bottom: 1px;
    display: block;
}

.classVPanelBottomItem {
    position: relative;
    margin-top: 1px;
    display: block;
}


.classPDFPreviewView-loading, .classPDFPreviewField-loading {
    background: url(images/dataLoading.gif) no-repeat center;
    top: 30px;
}

.classDocumentViewer, .classImageViewer, .classReportViewer {
    margin: 0;
    background: gray;
}

.classImageViewerContent, .classReportViewerContent {
    box-sizing: border-box;
}

.classDocumentViewerFunctionPopup, .classReportViewerFunctionPopup {
    margin: 0;
    min-width: 9em;
}

.classDocumentViewerFunctionDetail, .classReportViewerFunctionDetail {
    margin: 0;
    border-radius: 3px 3px 3px 3px;
    background: url(images/bgbar.png) repeat-x 0 -41px;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    padding: 2px;
    border: 1px solid #bbbbbb;
    font-size: 11px;
    color: #192681;
}

.classDocumentViewerInfoPopup, .classReportViewerInfoPopup {
    margin: 0;
    border-radius: 3px 3px 3px 3px;
    border: 1px solid whitesmoke;
    background: url(images/bgdark.png) repeat;
    color: whitesmoke;
    font-weight: bolder;
    font-size: medium;
    padding: 5px 10px;
}

.classDocumentViewerInfoPopup-error, .classReportViewerInfoPopup-error {
    color: red;
}

.classDocumentViewerThumbnails .classVPanel {
    float: left;
    margin-bottom: 14px;
    display: block;
    border: 1px solid #eeeeee;
}

.classDocumentViewerThumbnails .classButtons {
    text-align: center;
}

.classDocumentViewerThumbnails img {
    border: 1px solid #D9DAD9;
    box-shadow: 2px 4px 5px 0 #D9D9D9;
    margin: 0 13px;
}

.classDocumentViewerActivityPopup, .classReportViewerActivityPopup {
    border-radius: 3px 3px 3px 3px;
    margin: 0;
    padding: 3px 8px 3px 8px;
    cursor: default;
    border: 1px solid #E2D27B;
    color: #000000;
    background-color: #F1ED88 !important;
    font-size: 11px;
    font-weight: bold;
    white-space: nowrap;
}

.classFunctionButton {
    border-radius: 3px;
    padding: 2px 4px;
    font-size: 12px;
    cursor: default;
    border: 1px solid #bbbbbb;
    color: #000000;
    font-weight: bold;
    background-color: #DBDBD9 !important;
}

.classFunctionButton:active {
    border: 1px inset #cccccc;
    color: black;
}

.classFunctionButton:hover, .classFunctionButton:focus {
    background: url(images/bginformative.png) repeat-x 0 0;
    border: 1px solid #99abc9;
    color: #ffffff;
    opacity: 1.0;
    filter: alpha(opacity=100);
}

.classFunctionButton[disabled], .classFunctionButton-disabled, .classFunctionButton[disabled]:hover, .classFunctionButton-disabled:hover {
    background: none;
    border: 1px solid #bbbbbb;
    color: #000000 !important;
    opacity: 0.40;
    filter: alpha(opacity=40);
}

.gwt-PopupPanelGlass {
    background-color: #000000;
    opacity: 0.2;
    filter: alpha(opacity=20);
    z-index: 4;
}

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

.gwt-CheckBox label {
    color: black;
}

.seperator-line:before {
    content: '';
    background: #DDD;
    z-index: 0;
    top: 0;
    right: 0;
    width: 1px;
    position: absolute;
    display: block;
}


.startseite-imagerow {
    margin: 0 !important;
    max-width: initial !important;
}

.startseite-imagerow .columns {
    padding: 0;
}

.hint-message-title {
    font-size: 24px;
}

/* ------------- Neu nach GWT 2.8.2/GWT Material Umstellung ------------- */

/* ------------- Anpassungen an Servicekonto Komponenten ---------------- */

/* listViewer */

.listViewer {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1 1 auto;
}

.listViewer .actions-row {
    min-height: 64px;
    display: flex;
    width: 100%;
}

.listViewer .actions-row.outer {
    border: 1px solid #dddddd;
}

.listViewer .actions {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    max-width: 100%;
}

.listViewer .actions .col {
    padding: 0;
}

.listViewer .actions .action-buttons {
    display: flex;
    flex-wrap: wrap;
}

.listViewer .actions .list-action-button {
    margin: 1rem;
}

.listViewer .actions .list-viewer-filter-search {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: space-between;
}

.listViewer .actions .search-box-nav, .listViewer .actions .search-box-nav .input-field, .listViewer .actions .search-box-nav .search-result {
    box-shadow: none;
    background-color: initial !important;
}

.listViewer .actions .search-box-nav .search-result {
    border-top: none;
}

.listViewer .actions .search-box-nav .search-box {
    display: flex;
    align-items: center;
}

.listViewer .actions .search-box-nav .search-box input {
    height: 3rem;
    line-height: normal;
}

.listViewer .content-row {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
}

.listViewer .content-row .collection-column {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    max-height: 100%;
    border-left: 1px solid #dddddd;
    border-right: 1px solid #dddddd;
    border-bottom: 1px solid #dddddd;
}

.listViewer .content-row .collection-column .collection-column-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding-top: 0.5rem;
    border-bottom: 1px solid #dddddd;
}

.listViewer .content-row .collection-column .collection-column-header .sort-row {
    flex-flow: row wrap;
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.listViewer .content-row .collection-column .collection-column-header .select-all {
    display: flex;
    margin: 4px 1rem 8px 1rem;
}

.listViewer .content-row .collection-column .collection-column-header .selectAllLabel {
    margin-left: 2px;
    margin-top: 13px;
    cursor: pointer;
}

.listViewer .content-row .collection-column .collection-column-header .sortListBox {
    flex: 1 1 auto;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

.listViewer .content-row .collection-column .collection-wrapper {
    overflow: auto;
}

.listViewer .content-row .collection-column .collection-wrapper .collapsible {
    border: none;
    box-shadow: none;
    margin: 0;
}

.listViewer .content-row .collection-column .collection-wrapper .collapsible .collapsible-header {
    line-height: 1.5rem;
    padding: 0.5rem 0.5rem 1rem 1rem;
}

.listViewer .content-row .collection-column .collection-wrapper .collapsible .collapsible-header .checkbox-collapsible-item-content {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.listViewer .content-row .collection-column .collection-wrapper .collapsible .collapsible-header i {
    font-size: 1.5rem;
    line-height: 1.5rem;
    margin-right: 0;
    width: auto;
}

.listViewer .content-row .collection-column .collection-wrapper .collapsible .collapsible-header .gwt-CheckBox {
    line-height: 0;
}

.listViewer .content-row .collection-column .collection-wrapper .collapsible .collapsible-header [type="checkbox"] + label {
    height: 20px;
}

.listViewer .content-row .collection-column .collection-wrapper .collapsible .collapsible-body {
    padding: 1rem 2rem;
}

.listViewer .detail-container {
    padding: 1rem !important;
    max-height: 100%;
    position: relative;
    border-bottom: 1px solid #dddddd;
    border-right: 1px solid #dddddd;
}

.listViewer .detail-container > * {
    flex: 1 1 auto;
}

.listViewer > .row {
    width: 100%;
}

.listViewer .listViewerItem {
    cursor: pointer;
    background: #FFFFFF;
    position: relative;
    display: flex;
    flex-direction: column;
}

.listViewer .listViewerItem.mitarbeiter_invitation_not_accepted_row > * {
    opacity: 0.4 !important;
}

.listViewer .listViewerItem .gwt-HTML {
    width: 100%;
}

.listViewer .listViewerItem .gwt-CheckBox input[type="checkbox"] {
    height: 100%;
}

.listViewer .listViewerItem .title {
    font-size: 1.2em;
    font-weight: bold;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 11em;
    width: 90%;
    margin-left: 0;
}

.listViewer .listViewerItem .subtitle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 14em;
}

.listViewer .listViewerItem .description {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
}

.listViewer .listViewerItem .description,
.listViewer .listViewerItem .status {
    opacity: 0.66;
    min-height: 1em;
}

.listViewer .listViewerItem .description i.fa {
    margin-right: 0.5ex;
    font-size: 0.7em;
    vertical-align: middle;
}

.listViewerItem .typeIcon {
    float: right;
}

.listViewer .listViewerItem.selected {
    color: #FFFFFF;
}

.listViewer .listViewerItem.invalid:after {
    position: absolute;
    right: 0;
    top: 0;
    width: 1em;
    padding: 4px;
    content: '\f071';
    /* fa-exclamation-triangle */
    background-color: transparent;
    pointer-events: none;
    /* Copied from FontAwesome */
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

/* search-box-nav soll kein nav mehr sein (falsches semantisches Element) darum müssen wir hier die relevanten Stile nachbilden */
.search-box-nav {
    height: 64px;
    line-height: 64px;
}

.search-box-nav i {
    height: 64px;
    line-height: 64px;
    display: block;
    font-size: 2rem;
}

.search-box-nav .search-box label,
.search-box-nav .search-box label.active {
    transform: translateY(0);
    top: 0;
}

.search-box-nav .search-box {
    height: 100%;
    margin: 0;
}

.search-box-nav .input-field input {
    font-size: 1.2rem;
    border: 0;
}

.meine-dokumente, .meine-nachrichten {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.meine-nachrichten .nachricht-list-item .nachricht-list-item-row {
    display: flex;
}

.meine-nachrichten .nachricht-list-item .nachricht-list-item-row .nachricht-list-item-row-primary {
    flex: 1 1 auto;
    width: 0px;
    min-width: 0px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.meine-nachrichten .listViewer .content-row .collection-column .collection-wrapper .collapsible .collapsible-header .nachricht-list-item-row-secondary {
    margin-left: auto;
    min-width: 40px;
    text-align: right;
}

.meine-nachrichten .listViewer .content-row .collection-column .collection-wrapper .collapsible .collapsible-header i.nachricht-list-item-row-secondary {
    font-size: 1rem;
    line-height: 1rem;
}

.meine-nachrichten .listViewer .content-row .collection-column .collection-wrapper .collapsible .collapsible-header .nachricht-list-item .betreff-link i {
    margin-right: 4px;
    width: initial;
}

.nachricht-detail-widget .nachricht-aktionen > *:not(:first-child) {
    margin-left: 1rem;
}

.nachricht-detail-widget button.icon-only i {
    margin-right: 0;
}

.nachricht-detail-widget .nachricht-detail-anhang {
    margin: 0.5rem;
}

.nachricht-detail-widget .nachricht-inhalt img {
    max-width: 100%;
}

.meine-nachrichten .hinweis-text {
    display: flex;
    flex-wrap: wrap;
}

.meine-nachrichten .hinweis-text .hinweis-message {
    margin-left: 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.meine-nachrichten .hinweis-text .hinweis-message .hinweis-message-link {
    margin-left: 1rem;
}

.meine-nachrichten .hinweis-text a {
    color: #FF8723;
    font-weight: bold;
}

.nachricht-editor {
    margin: auto;
    width: 100%;
}

.nachricht-editor .row {
    max-width: 100%;
}

.nachricht-editor .nachricht-editor-meta,
.nachricht-editor .nachricht-editor-inhalt,
.nachricht-editor .nachricht-editor-uploader {
    padding-top: 1rem;
}

.nachricht-editor .empfaenger-autocomplete .multiValueSuggestBox-input-token,
.nachricht-editor .empfaenger-autocomplete input {
    width: 100%;
}

.nachricht-editor .nachricht-editor-buttons {
    display: flex;
}

.nachricht-editor .nachricht-editor-buttons .nachricht-editor-button-panel {
    margin-left: auto;
}

.nachricht-editor .note-editable ol, .nachricht-editor .note-editable ul {
    padding-left: 40px;
}

.nachricht-editor .note-editable ol li {
    list-style-position: inside;
}

.no-pointer {
    cursor: default !important;
}

.inlineSelector select {
    display: block;
}

.layoutless-manager {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.mitarbeiter-details {
    height: 100%;
    overflow: auto;
    padding: 1rem;
}

.mitarbeiter-details .mitarbeiter-details-rechte {
    display: flex;
    flex-direction: column;
}

.mitarbeiter-details .mitarbeiter-details-rechte > .tree-item {
    margin-left: 0;
}

.mitarbeiter-details .mitarbeiter-details-rechte > .tree-item:first-child {
    margin-top: 0;
}

.mitarbeiter-details .standort-collapsible-header {
    margin: auto 0;
}

.mitarbeiter-details .no-pointer i.material-icons {
    cursor: default !important;
}

.mitarbeiter-details .tree-item.single-branch {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
}

@media screen and (min-width: 705px) {
    .single-branch .tree-header:not(:last-child):after {
        content: '>';
        margin-left: 1em;
        font-weight: 900;
        font-family: sans-serif;
    }
}

.stepper {
    width: 100%;
}

.stepper .step:hover {
    background: none !important;
    cursor: default;
}

.stepper .step .classLayoutManager div {
    position: static !important;
}

.stepper .step .classLayoutManager > div:first-child {
    display: none;
}

.stepper .step .classLayoutManager > div {
    height: 100% !important;
}

.stepper .step.active .body {
    padding: 0 !important;
}

.mitarbeiter-edit-stepper,
.mitarbeiter-edit-stepper .mitarbeiter-edit-step-one,
.mitarbeiter-edit-stepper .mitarbeiter-edit-step-one > div:last-child,
.mitarbeiter-edit-stepper .mitarbeiter-edit-step-one > div:last-child .body {
    height: 100%;
}

.mitarbeiter-edit-stepper .mitarbeiter-edit-step-one > div:last-child .body {
    max-height: 100%;
}

.mitarbeiter-edit-stepper .mitarbeiter-edit-step-one > div:last-child .body > .layoutless-manager {
    flex: 1 1 auto;
}

.stepper.mitarbeiter-edit-stepper .row {
    margin: 0;
    max-width: initial;
}

.stepper.mitarbeiter-edit-stepper .step > div:first-child {
    display: none;
}

.mitarbeiter-edit-stepper.stepper .step {
    padding: 0;
}

.mitarbeiter-edit-stepper.stepper .step > div:last-child {
    margin-left: 0;
    padding-left: 0;
}

.stepper .step .classLayoutManager div .select-wrapper {
    position: relative !important;
}

.stepper .step .title strong {
    font-weight: bold;
}

.classLayoutManager {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

/* override the material rule
    .collapsible .collection {
       border: none;
    }
    for data lists */
.collapsible-body .data-list .collection {
    border: 1px solid #e0e0e0;
}

.data-list .data-list-row, .data-list .data-list-row .data-list-row-widget {
    display: flex;
    flex: 1 1 auto;
}

.data-list .data-list-row, .data-list .data-list-row .data-list-row-widget .material-label {
    display: flex;
    align-items: center;
}

.data-list .data-list-row .data-list-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
}

.data-list .data-list-row i {
    padding: 1rem !important;
}

.data-list .add-icon {
    margin-top: 1rem;
}

.kontaktdaten-row-wrapper {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
}

.kontaktdaten-row-wrapper .kontakt-input {
    padding: 5px;
    min-width: 200px;
}

.kontaktdaten-row-wrapper .kontakt-input.half {
    flex: 1 1 50%;
}

.kontaktdaten-row-wrapper .kontakt-input.one-third {
    flex: 1 1 33%;
}

.kontaktdaten-row-wrapper .kontaktdaten-remove-button {
    margin-left: auto;
    align-self: center;
}

.kontaktdaten-row-wrapper i.kontaktdaten-aenderungsantrag-tooltip.material-icons {
    display: flex;
    align-items: center;
}

.mitarbeiter-detail-content-row {
    display: flex;
    flex: 1 1 auto;
}

.mitarbeiter-detail-content {
    flex: 1 1 auto;
    width: 100%;
}

.mitarbeiter-detail .mitarbeiter-edit-tab-content > * {
    width: 100%;
}

.mitarbeiter-detail .mitarbeiter-edit-tab-content .tab-content .columns {
    padding-left: 0;
    padding-right: 0;
}

.mitarbeiter-detail .nat-person-edit {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.mitarbeiter-detail .mitarbeiter-fachverfahren-rechte .keine-befugnisse-msg,
.mitarbeiter-detail .befugnis-kontaktdaten-wrapper .keine-befugnisse-msg {
    margin-top: 5px;
}

.scope-selector {
    padding-bottom: 1rem;
}

.mitarbeiter-detail .befugnis-kontaktdaten,
.mitarbeiter-detail .befugnis-kontaktdaten .befugnis-kontaktdaten-wrapper {
    display: flex;
    height: 100%;
}

.mitarbeiter-detail .befugnis-kontaktdaten .befugnis-selection {
    margin-top: 10px;
}

.mitarbeiter-detail .befugnis-kontaktdaten .mitarbeiter-kontaktdaten-wrapper {
    display: flex;
    margin-top: 5px;
}

.view-kontaktdaten {
    display: flex;
    flex-direction: column;
}

.view-kontaktdaten .kontaktdaten-list .collection-item {
    padding: 20px 20px 10px 20px;
}

.view-kontaktdaten .kontaktdatenantrag-list {
    margin-bottom: 1rem;
}

.view-kontaktdaten .kontaktdatenantrag-list i.add-icon {
    display: none;
}

.mitarbeiter-detail .small-12.columns {
    padding: 0;
    margin: 0;
}

.data-list .collection {
    overflow: visible;
}

.mitarbeiter-detail-recht-editor .label-rechte,
.mitarbeiter-detail-recht-editor .recht-listbox,
.mitarbeiter-detail-abteilungen-editor .label-abteilungen,
.mitarbeiter-detail-abteilungen-editor .abteilung-listbox {
    padding-bottom: 1rem;
}

.mitarbeiter-detail-recht-editor-list {
    display: flex;
    flex-direction: column;
}

.material-label.field-error-label {
    white-space: pre-wrap;
}

.material-label.selectable-collection-item-label {
    display: inline-block;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.modal .modal-footer .ok-cancel-dialog-button {
    margin-left: 1rem;
}

.vertretungen-widget {
    width: 100%;
    overflow: visible;
    flex: 1 1 auto;
}

.vertretungen-widget .vertretungen-list-label {
    margin-top: 1rem;
    font-weight: bold;
}

.vertretungen-widget .vertreter-panel .data-list .add-icon {
    display: none;
}

.vertretungen-widget .vertretung-widget {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
}

.vertretungen-widget .vertretung-widget .picker__clear {
    display: none;
}

.vertretungen-widget .vertretung-widget > * {
    flex: 1 1 auto;
    margin-left: 1rem;
    margin-right: 1rem;
}

.vertretungen-widget .vertretung-widget .vertretung-dauerhaft {
    align-self: center;
}

.mitarbeiter-vertretungen,
.mitarbeiter-neu {
    width: 100%;
}

.mitarbeiter-neu .einladen-button {
    margin-top: 20px;
    margin-left: auto;
}

.classVPanel .classVPanelTopItem,
.classVPanel .classVPanelBottomItem {
    position: relative;
    display: block;
}

.mitarbeiter-postfach-settings {
    padding: 2rem;
    height: 100%;
    overflow: auto;
}

.mitarbeiter-postfach-settings .servicekonto-title p {
    display: none
}

.mitarbeiter-postfach-settings .postfach-settings .servicekonto-title .title-text {
    display: none;
}

.mitarbeiter-postfach-settings .befugnis-postfach-zugriffsberechtigungen {
    display: flex;
    flex-direction: column;
}

.mitarbeiter-postfach-settings .befugnis-postfach-zugriffsberechtigungen .befugnis-postfach-zugriffsberechtigungen-wrapper {
    margin: 1rem 0;
}

.mitarbeiter-postfach-settings .befugnis-postfach-zugriffsberechtigungen button {
    margin-left: auto;
}

.postfach-settings {
    width: 100%;
}

.postfach-settings .postfach-settings-wrapper {
    display: flex;
    flex-direction: column;
}

.postfach-settings-wrapper .postfach-settings-option {
    margin-top: 1rem;
}

.postfach-settings-email-selector {
    display: flex;
    align-items: center;
}

.postfach-settings-email-selector .postfach-settings-email-list {
    width: 100%;
}

.postfach-settings-email-selector .postfach-settings-email-info-icon {
    margin-left: 0.5rem;
}

.postfach-settings-wrapper .postfach-settings-zugangseroeffnung {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    height: 3.5rem;
    margin-top: 1rem;
}

.postfach-settings-wrapper .postfach-settings-zugangseroeffnung .postfach-settings-zugangseroeffnung-befristung {
    display: flex;
    align-items: center;
}

.postfach-settings-wrapper .postfach-settings-zugangseroeffnung .gwt-CheckBox {
    margin-right: 1rem;
}

.postfach-settings-wrapper .postfach-settings-zugangseroeffnung .input-field {
    flex: 1 1 auto;
    margin-top: initial;
}

.postfach-settings-wrapper .postfach-settings-zugangseroeffnung .input-field input {
    margin: initial;
}

.postfach-settings .postfach-settings-wrapper .postfach-settings-save {
    margin-left: auto;
}

.sk-material-radio-group {
    display: flex;
    border: none;
}

.sk-material-radio-group-with-legend {
    display: flex;
    flex-direction: column;
}

.sk-material-radio-group.radio-group-horizontal {
    flex-direction: row;
}

.sk-material-radio-group.radio-group-vertical {
    flex-direction: column;
}

.file-uploader-wrapper .file-uploader-files {
    margin-top: 1rem;
}

/************************ Collapsible ***********************/
.servicekonto-collapsible-item .collapsible-header {
    padding: 0.5rem 1rem;
}

.servicekonto-collapsible-item .collapsible-header .icon-wrapper {
    display: flex;
    margin-left: auto;
}

.servicekonto-collapsible-item .collapsible-header .icon-wrapper .closed-icon {
    display: block;
}

.servicekonto-collapsible-item .collapsible-header .icon-wrapper .opened-icon {
    display: none;
}

.servicekonto-collapsible-item .collapsible-header.active .icon-wrapper .closed-icon {
    display: none;
}

.servicekonto-collapsible-item .collapsible-header.active .icon-wrapper .opened-icon {
    display: block;
}

.servicekonto-collapsible-item .collection-item {
    display: flex;
    align-items: center;
}

.servicekonto-collapsible-item .secondary-content {
    display: flex;
    margin-left: auto;
}

.servicekonto-collapsible-item .collapsible-item-header {
    display: flex;
    align-items: center;
    font-weight: 500;
}

.servicekonto-collapsible-item .collapsible-item-header .invalid {
    color: #F44336;
}

.servicekonto-collapsible-item .collapsible-item-header i:not(.collapsible-icon) {
    margin-left: auto;
}

.servicekonto-collapsible-item .collapsible-item-header .collapsible-item-header-content {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
}

.servicekonto-collapsible-item .collapsible-item-header .collapsible-item-header-title {
    flex: 1 1 auto;
}

.servicekonto-collapsible-item .collapsible-item-header .collapsible-item-header-widget {
    padding: 0 1rem;
}

.servicekonto-collapsible-item .servicekonto-collapsible-content {
    padding-top: 1rem;
}

/******************* EditWidget ********************************/
.edit-widget {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 5px;
}

.edit-widget .edit-widget-content {
    flex: 1 1 auto;
}

.edit-widget .edit-widget-button-panel {
    display: flex;
}

.edit-widget .edit-widget-button-panel .edit-widget-additional-buttons {
    margin-left: auto;
}

.edit-widget .edit-widget-button-panel > button {
    margin-left: 0.5rem;
}

.edit-widget .edit-widget-button-panel .edit-widget-additional-buttons > button {
    margin: 0 0.5rem;
}

/***********Field footnote**************/

.field-footnote {
    color: #FF8723;
    font-style: italic;
    font-size: 12px;
    cursor: default;
}

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

/*********** Tabs **********************/

.tab-content {
    padding: 1rem;
}

.tab-content .tab-content-description {
    margin-bottom: 1rem;
}

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

/*********Datenänderungen (Konto Historie) - START ************/
.konto-historie-widget {
    width: 100%;
    height: 100%;
    flex-shrink: 1;
}

.historie-content-widget {
    display: flex;
}

.historie-content-widget .ereignis-list-selected-version {
    width: 50%;
    overflow: auto;
}

.historie-content-widget .ereignis-list-previous-version {
    width: 50%;
    overflow: auto;
}

.historie-content-widget .version-header-title {
    font-size: 2em;
}

.historie-content-widget .versions-category-heading {
    font-size: 1.5em;
}

.ereignis-list-timestamp-label {
    color: #9e9e9e;
}

.historychanged {
    background-color: #ffff00;
}

.historyadded {
    background-color: #00e64d;
}

.historydeleted {
    background-color: #ff8070;
}

/*********Datenänderungen (Konto Historie) - ENDE ************/

/*********Datepicker - START ************/

.picker__footer .picker__close,
.picker__footer .picker__today,
.picker__footer .picker__clear {
    color: #343434;
    font-size: 1rem;
}

/*********Datepicker - ENDE ************/

/***** ul-Listen anzeigbar machen  *****/

body ul {
    padding-left: 40px;
}

body ul li {
    list-style-type: initial;
}

.collapsible-body > ul,
ul.side-nav,
ul.collapsible,
ul.dropdown-content,
ul.collection {
    padding-left: 0;
}

ul.collection {
    overflow: auto;
}

.collapsible-body > ul > li,
ul.side-nav > li,
ul.collapsible > li,
ul.dropdown-content > li,
ul.collection > li {
    list-style-type: none;
}

.multiValueSuggestBox-list li {
    list-style-type: none;
}

/*****************Account Reactivation***********************/

.sicherheitsfrage {
    margin-top: 5em;
}

.bottom-button-panel {
    display: flex;
    align-items: flex-end;
    flex: 1 1 auto;
    justify-items: right;
    margin-left: auto;
}

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

.widthInitial {
    width: initial !important;
}

/*****************Dashboard******************/

.dashboard-widget {
    flex: 1 1 auto;
    min-width: 0;
}

.dashboard-content {
    display: flex;
}

.dashboard-content .dashboard-card {
    display: flex;
    flex: 1 1 50%;
    max-width: 50%;
    overflow-x: hidden;
}

.dashboard-card .card-title h2{
    margin-top: 0.5em;
    font-size: 24px;
    font-weight: 300;
}

.dashboard-content .dashboard-card:nth-of-type(odd) {
    margin-right: 0.6rem;
}

.dashboard-content .dashboard-card:nth-of-type(even) {
    margin-left: 0.6rem;
}

.dashboard-content .dashboard-card .card-content {
    flex: 1 1 auto;
    max-width: 100%;
}

.dashboard-content .dashboard-card .collection-item {
    display: flex;
    align-items: center;
}

.dashboard-content .dashboard-card .collection-item .actions-section {
    display: flex;
    margin-left: auto;
}

.dashboard-content .dashboard-card .collection-item .actions-section .dokument-delete-button {
    margin-left: 1rem;
}

.dashboard-content .dashboard-card ul.collection {
    max-height: 100%;
    overflow: auto;
}

.dashboard-content .dashboard-card .card-content .card-title i {
    margin-top: 0;
}

/* Dropzone, die anderen Content umschließt */

.wrapping-dropzone {
    -webkit-transition: background-color 250ms;
    -ms-transition: background-color 250ms;
    transition: background-color 250ms;
}

.wrapping-dropzone.dz-drag-hover {
    background-color: rgba(0, 0, 0, 0.25);
}

/******************** FavoritenWidget ********************/
.favoriten-widget .collapsible-body {
    padding: 0;
}

.favoriten-widget .collapsible-body .favoriten-content .favorit-add-button {
    margin: 0 15px 15px 15px;
}

.favoriten-widget .collapsible-body .favoriten-content.empty .favorit-add-button {
    margin-top: 15px;
}

.favorites-list-item.collection-item:hover {
    cursor: pointer;
}

.favorites-list-item {
    display: flex;
    align-items: center;
}

.favorites-list-item .favorit-wrapper-wrapper {
    display: flex;
    align-items: center;
    cursor: pointer;
    max-width: 100%;
    flex: 1 1 100%;
    min-width: 0;
}

.favorites-list-item.favorites-list-item-dragging {
    cursor: move;
}

.favorites-list-item .favorites-list-item-icon {
    padding: 1rem;
}

.favorites-list-item .favorit-wrapper {
    max-width: 100%;
    flex: 1 1 100%;
    min-width: 0;
    pointer-events: none;
}

.favorites-list-item .favorit-buttons-panel {
    align-items: center;
    display: flex;
}

.favorites-list-item .favorit-buttons-panel i {
    margin-left: 1rem;
}

.favorite-list hr {
    display: block;
    width: 100%;
    height: 4px;
    color: gray;
    background: lightgray;
    border-style: solid;
    border-radius: 1px;
}

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

/******************** DokumentListItem *****************************/

.dokument-list-item {
    display: flex;
    flex: 1 1 100%;
    min-width: 0;
}

.dokument-list-item .dokument-list-item-icon-wrapper {
    display: flex;
    flex-direction: column;
}

.dokument-list-item .dokument-list-item-icon {
    margin: auto;
    padding: 1rem;
}

.dokument-list-item .dokument-list-item-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    pointer-events: none;
}

.dokument-list-item .dokument-list-item-content .dokument-list-item-content-wrapper {
    margin: auto 0;
}

.dokument-list-item .dokument-list-item-content .dokument-list-item-first-line {
    display: flex;
    justify-content: space-between;
}

.dokument-list-item .dokument-list-item-content .dokument-list-item-first-line .dokument-list-item-date {
    color: grey;
    margin-right: 1rem;
    font-size: 12px;
}

.ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

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

.cursor--pointer {
    cursor: pointer;
}


.dokument-info-panel {
    padding: 10px;
    background: white;
}

#document-info-download {
    list-style-type: none;
}

#document-info-show {
    list-style-type: none;
}

/* Damit absolute positionierte Unterelemente sich auf das umgebende Element beziehen*/
.relative-panel {
    position: relative;
}

.bi-col-panel {
    display: flex;
}

.bi-col-panel .left-col {
    flex: 1 1 auto;
    margin-right: 5px;
}

.bi-col-panel .right-col {
    flex: 1 1 auto;
    margin-left: 5px;
}

/* Damit SelectionList wieder angezeigt wird */
/* TODO: entfernen, wenn der PermissionsEditor überarbeitet wird */
select.bk_selectmany {
    display: inline-block;
}

/******************** PasswortVergessen ***********************/

.save-new-pin-button,
.new-password-speichern-button,
.button-panel {
    width: 100%;
    margin: 1rem 0;
}

.security-panel {
    display: flex;
    flex-flow: column;
}

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

/******************** ServicekontoStatusFields ******************/

.field-status-wrapper {
    display: flex;
}

.field-status {
    display: flex;
    align-items: center;
    margin-left: 0.5rem;
}

.pin-resend-wrapper {
    display: flex;
    align-items: center;
}

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

/******************** UpdatePassword ***********************/

.update-password-wrapper {
    display: flex;
    width: 100%;
    flex-direction: column;
    flex: 1 1 auto;
}

.update-password-wrapper .change-password-wrapper {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}

.update-password-wrapper .change-password-wrapper button {
    margin-left: auto;
    margin-top: auto;
}

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

/******************** Befugnis Kontaktdaten ***********************/

.befugnis-kontaktdaten {
    width: 100%;
}

.befugnis-kontaktdaten-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.befugnis-kontaktdaten-wrapper .befugnis-kontaktdaten-button {
    margin-left: auto;
    margin-top: auto;
}

.befugnis-kontaktdaten-wrapper i.confirmation-icon {
    display: flex;
    align-items: center;
}

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

/******************** Befugnis Kontaktdaten ***********************/

.abteilungen-widget {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.abteilungen-widget .input-field {
    width: 100%;
}

.abteilungen-widget .abteilungen-save-button {
    margin-left: auto;
    margin-top: auto;
}

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

/******************** Dokumente Viewer ***********************/

.document-info {
    width: 100%;
    height: 100%;
}

.documentViewerWrapper {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: calc(100% - 3.5rem);
    min-height: 400px;
}

.documentViewerWrapper .classDocumentViewer {
    position: relative;
    height: 100%;
}

.document-info-pnl {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #eeeeee;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 1rem;
    min-height: 3.5rem;
}

.document-info-pnl .document-info-grp {
    margin-right: 1em;
    display: inline-block;
}

.document-info-pnl .document-info-lbl,
.document-info-pnl .document-info-val {
    display: inline-block;
}

.document-info-pnl .document-info-lbl {
    color: #7A7A7A;
    /* normaltype */
    margin-right: 0.5ex;
}

.document-info-pnl .document-info-val {
    color: #2A2A2A;
    /* darktype */
}

.document-info-empty {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 36px;
    text-align: center;
    color: #2A2A2A;
    background: gray;
    /* same as in sJF document viewer */
    text-shadow: 0 0 4px #F5F5F5;
    padding-top: 40%;
    height: 100%;
}

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

/************************ Firmenpostfächer ********************/

.firmenpostfaecher-widget {
    flex: 1 1 auto;
}

.firmenpostfaecher-widget .firmenpostfach-auswahl {
    flex: 1 1 auto;
    margin-right: 1rem;
}

.firmenpostfaecher-widget .neues-postfach-button {
    margin-top: 1rem;
}

.firmenpostfaecher-widget .neues-postfach-hinweis {
    margin-top: 1rem;
}

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

/************** Datenschutz, Nutzungsbedingungen, etc. *************/

.impressum, .datenschutz, .nutzungsbedingungen, .barrierefreiheit {
    flex: 1 1 auto !important;
}

.impressum h1, .datenschutz h1, .nutzungsbedingungen h1, .barrierefreiheit h1 {
    font-size: 2.5em;
}

.impressum h2, .datenschutz h2, .nutzungsbedingungen h2, .barrierefreiheit h2 {
    font-size: 2em;
}

.federated-login-datenschutz-dialog .datenschutz-dialog, .nutzungsbedingungen-dialog, .poststelle-nutzungsbedingungen-dialog {
    height: 80%;
}

.servicekonto-dialog.poststelle-nutzungsbedingungen-dialog h1 {
    font-size: 3rem;
}

.servicekonto-dialog.poststelle-nutzungsbedingungen-dialog h2 {
    font-size: 2.5rem;
}

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

/******************** ServicekontoDataPickerField *****************/

.servicekonto-date-picker-field {
    display: flex;
}

.servicekonto-date-picker-field .input-field-wrapper {
    width: 100%;
}

.servicekonto-date-picker-field .switchIcon-panel {
    display: flex;
    align-items: center;
}

.servicekonto-date-picker-field .switchIcon-panel .material-icons {
    padding: 1rem;
}

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

/************************ Link Button *****************************/

button.btn-link, button.btn-link:focus {
    background: transparent none;
    border: none;
}

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

/************************ Nav-Bar Botton *****************************/
.nav-bar-button:not(.dropdown-content .nav-bar-button) {
    margin-left: 1rem;
    margin-right: 1rem;
}

.nav-bar-button span {
    display: none;
}
/******************************************************************/

/************************ File-Uploader ********************/

.fileuploader .upload-label {
    min-width: 17em !important;
}

.total-upload-progress {
    position: absolute;
    top: 51px;
    left: 0;
}

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

/************************ BITV *****************************/
.visually-hidden {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.p-wrapper {
    margin: 0 !important;
    padding: 0 !important;
}

.input-field label, ::placeholder, .dropdown-content li>span {
    color: #595858 !important;
}

.tab-switcher>span {
    color: white;
    top: -20em;
    position: absolute;
    z-index: 1000;
    background-color: gray;
    opacity: 0.9;
    padding: 0.2em;
    font-size: 2em;
    cursor: pointer;
}

.tab-switcher>span.switcher-on{
    top: 0!important;
}

.dropdown-item-hover {
    background-color: #eee;
}

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

/************************ Kontrast ********************************/

.contrast *,
.contrast ul.side-nav .collapsible-body li.active,
.contrast .input-field label,
.contrast .input-field.disabled label{
    color: black !important;
    background-color: white !important;
    border-color: black !important;
}

.contrast .grey.lighten-3 {
    background-color: white !important;
}

.contrast .grey-text {
    color: black !important;
}

.contrast .dropdown-content li:hover,
.contrast .dropdown-content li.active,
.contrast .dropdown-content li.selected,
.contrast .btn,
.contrast .material-tooltip{
    border: solid 1px;
}

.contrast .select2-selection__arrow {
    top: 0px !important;
}

.contrast .combobox .select2-container--open .select2-selection__arrow b, .contrast .combobox .select2-selection__arrow b {
    border-color: transparent transparent black !important;
}

.contrast i.material-icons {
    color: black !important;
}

.contrast .field-error {
    border-bottom-color: black !important;
    box-shadow: none !important;
}

.contrast a span, .contrast .btn-link, .contrast .welcome a {
    text-decoration-line: underline !important;
}

.contrast div[role='navigation'] a span,
.contrast nav a span,
.contrast .collapsible-header a span {
    text-decoration-line: none !important;
}

.contrast .nav-wrapper a, .contrast .side-nav a {
    text-decoration-line: none !important;
}
.contrast a:hover, .contrast .btn-link:hover {
    font-weight: bolder;
}

.contrast .disabled {
    opacity: 0.6;
    font-style: italic;
}

.contrast .btn.disabled {
    background-color: white !important;
}

.contrast .btn:hover {
    border: solid 2px;
    transition: none;
}

.contrast input[type="text"],
.contrast input[type="password"],
.contrast input[type="email"],
.contrast input[type="url"],
.contrast input[type="time"],
.contrast input[type="date"],
.contrast input[type="datetime-local"],
.contrast input[type="tel"],
.contrast input[type="number"],
.contrast input[type="search"],
.contrast textarea.materialize-textarea,
.contrast .input-field.combobox,
.contrast .collapsible-header,
.contrast .collapsible-body,
.contrast ul.multiValueSuggestBox-list{
    transition: none;
    box-shadow: none !important;
}

.contrast .select2.select2-container.select2-container--default{
    border-bottom: 1px solid black !important;
}

.contrast input[type="text"]:focus,
.contrast input[type="password"]:focus,
.contrast input[type="email"]:focus,
.contrast input[type="url"]:focus,
.contrast input[type="time"]:focus,
.contrast input[type="date"]:focus,
.contrast input[type="datetime-local"]:focus,
.contrast input[type="tel"]:focus,
.contrast input[type="number"]:focus,
.contrast textarea.materialize-textarea:focus,
.contrast .input-field.combobox.select2-container--focus.select2-selection {
    border-bottom: 2px black solid;
}

.contrast .input-field.combobox .select2-container--focus .select2-selection {
    box-shadow: 0 1px 0 0 black !important;
    border-bottom: 1px solid black !important;
}

.contrast .side-nav .collapsible li:hover,
.contrast .side-nav .collapsible li.active,
.contrast ul.side-nav .collapsible-body li.active,
.contrast .select2-results__options li.select2-results__option:hover {
    border: solid black 1px;
}

.contrast footer.page-footer, .contrast .footer-copyright{
    border-top: solid 1px;
}

.contrast footer.page-footer .footer-buttons {
    min-width: 24rem;
}

.contrast [type="checkbox"].filled-in:checked + label::after {
    border: 2px solid black;
    background-color: white;
}
.contrast [type="checkbox"].filled-in:checked + label::before, .contrast [type="checkbox"]:checked:disabled + label::before {
    border-right: 2px solid black;
    border-bottom: 2px solid black;
}

.contrast .sjf-docviewer-page-selected {
    box-shadow: 0 0 5px 3px black;
}

.contrast .sjf-docviewer-splitBar {
    padding: 2px;
    display: inline-block;
    border: 2px solid;
}

.contrast .select-wrapper.gwt-ListBox * {
    background-color: transparent !important;
    color: transparent !important;
}

.contrast .select-wrapper.gwt-ListBox ul *{
    background-color: white !important;
    color: black !important;
}

.contrast .select-wrapper.gwt-ListBox input{
    color: black !important;
}

.contrast .input-field .select-wrapper.gwt-ListBox .caret::before {
    border-color: transparent transparent black;
}

.contrast input::placeholder {
    color: black;
}

.contrast .picker--opened .picker__holder {
    background-color: rgba(0,0,0,.32) !important;
}

.contrast .landscape .picker__box {
    height: 350px;
}

.contrast .landscape .picker__footer {
    top: 310px;
}

.contrast .picker__nav--prev.picker__nav--disabled::before {
    border-right: 0.75em solid black !important;
}

.contrast .picker__nav--next.picker__nav--disabled::before {
    border-left: 0.75em solid black !important;
}

.contrast .picker__nav--prev::before {
    border-right: .75em solid black;
}

.contrast .stepper .step > div:first-child .circle,
.contrast .stepper .step.inactive > div:first-child .circle{
    background-color: white !important;
    border: solid 1px ;
}

.contrast [type="checkbox"] + label::before {
    border-color: black;
}

.contrast [type="checkbox"]:checked + label::before {
    border-right: 2px solid black;
    border-bottom: 2px solid black;
}

.contrast [type="radio"]:checked + label::after {
    border: 2px solid black;
    background-color: black;
}

.contrast .arrow-prev.disabled {
    color: black !important;
}

.contrast .tab-content {
    border-left: solid;
    border-left-color: currentcolor;
    border-right: solid;
    border-right-color: currentcolor;
    border-bottom: solid;
    border-bottom-color: currentcolor;
}

.contrast .tabs {
    border-bottom: solid;
}

.contrast .tabs .tab a.active {
    border: solid;
    font-weight: bolder;
}

.contrast .tabs .tab a:hover {
    border: solid;
}

.contrast .table-container .data-pager.row {
    border-top: none;
}

.contrast .table-container .action-page-panel .material-icons {
    color: black !important;
}

.contrast .listViewer .detail-container .card {
    box-shadow: none;
    border: solid 1px;
}

.contrast .loader-wrapper {
    background-color: rgba(255, 255, 255, .701961) !important;
}

.contrast .preloader-wrapper.active, .contrast .preloader-wrapper.active div {
    background: transparent !important;
}

.contrast .historychanged {
    border: dotted 1px;
}

.contrast .note-editor {
    border: none !important;
}
.contrast .note-editor .btn-large:hover, .contrast .note-editor .btn:hover {
    background-color: white !important;
}

.contrast .btn i {
    line-height: normal;
    margin-top: 0.3em;
}

.contrast .field-error-label, .contrast .field-success-label{
    color: black !important;
}

.contrast .focused-border {
    border-color: black !important;
}

.contrast .terms-and-conditions-widget span a,
.contrast .servicekonto-hint a{
    text-decoration-line: underline;
}

.contrast .fileuploader .upload-label, .contrast .fileuploader .upload-label i{
    background-color: white !important;
    color: black !important;
}

.contrast .chip {
    border: solid 1px;
    padding-bottom: 2.5em;
}

.contrast .toast {
    border: solid 1px;
}

.contrast #toast-container {
    background-color: transparent !important;
}

.contrast .badge {
    border: solid black 1px;
    color: black !important;
    background-color: white !important;
}

.contrast .dropdown-item-hover, .contrast .select2-container--default .select2-results__option--highlighted[aria-selected] {
    font-weight: bolder;
    border: 1px solid black;
}

.contrast .btn i.npa-icon {
    margin-top: 0;
}

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

/********************* RLP_CD-Manual-Internet__Stand **************/

.linked-text a, p  a , a>span, button.btn-link>span{
    text-decoration-line: underline !important;
}

.linked-text a:hover, p a:hover, a:hover, button.btn-link>span:hover, a.gwt-Anchor:hover {
    color: #4a4a4a !important;
}

#side-navigator a>span, .collapsible-header a>span, #side-navigator a:hover, .collapsible-header a:hover {
    text-decoration-line: none !important;
}

.input-field>input,
.input-field>.select-wrapper>input,
.input-field li.multiValueSuggestBox-input-token input {
    padding-left: 2px !important;
}

.input-field>input:not([type="number"]):not(.disabled):not(.invalid),
.input-field>input:active,
.input-field>input:focus,
.input-field>.select-wrapper>input:not(.disabled):not(.invalid),
.input-field>.select-wrapper>input:active,
.input-field>.select-wrapper>input:focus {
    background-color: #EEEEEE !important;
    border: 1px solid #949494 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    box-sizing: border-box;
}

.gwt-SuggestBox,
.gwt-SuggestBox:active,
.gwt-SuggestBox:focus,
.gwt-SuggestBox:valid,
.multiValueSuggestBox-input-token:focus,
ul.multiValueSuggestBox-list li.multiValueSuggestBox-input-token input[type=text]:focus:not([readonly]) {
    background-color: #EEEEEE !important;
    border: 1px solid #949494 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    box-sizing: border-box;
}

input.invalid,
input.field-error,
.gwt-SuggestBox:invalid,
.input-field>input:invalid,
.multiValueSuggestBox-list.field-error,
.input-field>.select-wrapper>input:invalid {
    background-color: #EEEEEE !important;
    border: 1px solid #f44336 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    box-sizing: border-box;
}

.input-field .select-wrapper.gwt-ListBox .caret::before {
    pointer-events: none;
    z-index: 1;
}

ul.multiValueSuggestBox-list {
    border-bottom: none !important;
    box-shadow: none !important;
}

.borderd-autocompletion.autocomplete-text .multiValueSuggestBox-input-token input
.multiValueSuggestBox-input-token, .multiValueSuggestBox-input-token input {
    width: calc(100% - 1px) !important;
}

.gwt-SuggestBox:focus input, .gwt-SuggestBox:valid input
{
    border: 1px solid #949494 !important;
}

button.btn:not(.dropdown):not(.disabled) {
    background-color: #ac2541 !important;
    color: #FFFFFF !important;
}

button.btn:hover:not(.disabled){
    background-color: #4A4A4A !important;
}

.collapsible-header-content {
    border-left: 1px solid black;
    padding-left: 10px;
    display: flex;
    height: 2em;
    align-items: center;
    width: 97%;
}

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

/***************** Dynamisches Passwort-Anweisungen ***************/

.password-hints {
    left: 5%;
    z-index: 999 !important;
}

.password-hints>.triangle {
    border-bottom-color: #ac2541 !important;
}

.password-hints>.collection {
    border: none !important;
}

.password-hints>.close-icon {
    position: absolute;
    display: flex;
    flex-direction: row-reverse;
    width: 100%;
    padding-right: 1em;
    font-size: medium;
}

.password-hints>.collection>.collection-item {
    display: flex;
    border-bottom: none;
    padding: 0;
}

.password-hints>.collection>.collection-item .material-icons {
    cursor: unset !important;
}
/*****************************************************************/

@media screen and (min-height: 430px) {
    /* Der Default für max-height ist 70vh, wir wollen das minimum aus 70vh und 300px.
     Bei 430px Viewport-Höhe sind beide Angaben ungefähr gleich. */
    .listViewer .sortListBox ul.dropdown-content {
        max-height: 300px !important;
    }
}

@media only screen and (max-width: 400px) {
    .side-nav:not(.expanded) {
        width: 0 !important;
        visibility: hidden;
    }

    main.with-menu {
        padding-left: 0 !important;
    }

    .main-layout .main-overlay {
        left: 0 !important;
        padding: 0.5rem;
    }

    main .main-container {
        padding: 0.5rem;
    }

    .sliding-overlay .sliding-overlay-title,
    .sliding-overlay > .sliding-overlay-content {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .dokument-list-item .dokument-list-item-icon {
        padding: 0.5rem;
    }
}

@media only screen and (min-width: 401px) and (max-width: 600px) {
    .main-layout .main-overlay {
        left: 64px !important;
        padding: 1rem;
    }

    main .main-container {
        padding: 1rem;
    }

    .sliding-overlay .sliding-overlay-title,
    .sliding-overlay > .sliding-overlay-content {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media only screen and (max-width: 600px) {
    main {
        margin-top: 56px;
    }

    .main-layout .main-overlay {
        top: 56px;
        height: calc(100vh - 56px);
    }

    .welcome-content {
        flex-direction: column-reverse;
    }

    .welcome-content .welcome {
        border-right: none;
        border-top: 1px grey dashed;
    }

    .collection .collection-item {
        padding: 5px;
    }

    .card .card-content {
        padding: 10px;
    }

    .dokument-list-item-first-line {
        flex-direction: column-reverse;
    }

    .dashboard-content .dashboard-card .collection-item .actions-section .dokument-delete-button {
        margin-left: 0.5rem;
    }

    .btn {
        min-height: 36px;
        height: auto;
    }

    .stepper .step.active .body {
        max-height: none !important;
    }

    .impressum, .datenschutz, .nutzungsbedingungen, .barrierefreiheit {
        hyphens: auto;
    }
}

@media screen and (min-width: 401px) and (max-width: 992px) {
    main .main-container.with-menu {
        margin-left: 64px;
    }

    .main-layout footer.with-menu {
        padding-left: 64px !important;
    }
}

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

    .main-layout main {
        padding-bottom: 0 !important;
    }

    main .main-container.with-menu {
        overflow-x: hidden;
    }

    .collapsible {
        margin-right: 1px;
    }

    .input-field input[type=search] {
        width: 100% !important;
        margin: 0 56px;
    }

    .data-list .data-list-row .data-list-actions {
        flex-direction: column;
    }

    /********************* zweispaltiges Panel *********************/
    .bi-col-panel {
        flex-wrap: wrap;
    }

    .bi-col-panel .left-col, .bi-col-panel .right-col {
        width: 100%;
        margin: 0;
    }

    /***************************************************************/
    /*********************** Dashboard *****************************/
    .dashboard-content {
        flex-direction: column;
    }

    .dashboard-content .dashboard-card:nth-of-type(odd), .dashboard-content .dashboard-card:nth-of-type(even) {
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        flex: 1 1 auto;
    }

    /***************************************************************/
    /*********************** Konto Historie ************************/
    .historie-content-widget .ereignis-list-selected-version {
        width: 100%;
    }

    .historie-content-widget .ereignis-list-previous-version {
        width: 100%;
    }

    .historie-content-widget {
        flex-wrap: wrap;
    }

    /**************************************************************/
}

/***************************** DataTable **************************/
@media only screen and (max-width: 841px), (max-device-width: 840px) and (min-device-width: 0px) {

    table.table thead {
        display: none;
    }

    table.table tbody {
        display: table;
        width: 100%;
        background: #e9e9e9;
    }

    table.table tbody td {
        padding: 12px !important;
        line-height: 150% !important;
        border-top: 1px solid #e9e9e9;
        position: relative;
        width: 100% !important;
        display: block !important;
        left: 0 !important;
        height: auto !important;
        border-bottom: none !important;
    }

    table.table tbody tr.data-row td:first-child:before {
        padding-right: 6px !important;
    }

    tr.data-row td:before {
        content: attr(data-title);
        color: #000000;
        padding-right: 8px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    tr.data-row td:before, table.table tbody td > div {
        width: 50%;
        display: inline-block;
        vertical-align: middle;
        text-align: left;
    }

    .selection-none table.table tbody tr.data-row, table.table tbody tr.data-row {
        display: table;
        width: 94% !important;
        margin: auto !important;
        margin-top: 12px !important;
        margin-bottom: 12px !important;
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
        background: #ffffff;
        position: relative;
    }


}

/* IE11 only rules */
@media all and (-ms-high-contrast: none) {
    .befugnisse-rechte-dialog {
        height: 0;
        min-height: 80vh;
    }
}


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

/* ------------ Anpassungen an GWT/GWT Material Komponenten ------------ */

input:focus {
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
}

.stepper .step {
    cursor: default !important;
}

.stepper .step .body {
    padding-bottom: 0 !important;
}

.stepper .step .body .row {
    margin-bottom: 0;
}

.modal h4 {
    margin-top: 0 !important; /* MaterialTitle widgets should not have their default (inlined) margin-top: 60px in modals */
}

.modal .modal-footer {
    padding: 4px 24px !important; /* align the modal footer with the modal content */
}

.tabs .tab a {
    color: #ff8723;
}

.tabs .tab a:hover {
    opacity: 0.8;
}

.gwt-RadioButton label {
    color: black;
}

.tree .tree-item i {
    color: black;
}

/* fixes listBox label positioning in collapsibles */
.collapsible li.active .collapsible-body .input-field .select-wrapper + label {
    top: 0.8rem;
}

.collapsible .collapsible-body {
    cursor: initial;
}

/* Damit Dropdown listen sich immer an das längste Item der liste orientieren */
.select-wrapper .dropdown-content.select-dropdown {
    width: auto !important;
    min-width: 100%;
    scrollbar-width: thin;
}

/* Damit ComboBox wieder angezeigt wird */
select.fieldSelect {
    display: inline-block;
}

.tabs .indicator {
    background-color: #ff8723;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 46px !important;
}

.table-container .top-panel .btn-flat {
    color: white;
}

.table-container .top-panel .picker .btn-flat {
    color: initial;
}

.table-container .top-panel .content-panel input {
    color: #9e9e9e;
}

.table-container .table-body {
    height: auto;
}

.table-container .table-body .table .table-header {
    max-width: initial;
}

table.table .widget-cell {
    display: flex;
}

.row div.input-field label.active,
.row div.input-field.autocomplete label.active {
    left: 0 !important;
}

/* Dieser Fall hat eine Überschreibung, bei der das Label immer über dem Feld angezeigt wird, darum hier keine Verschiebung */
.collapsible li.active .collapsible-body .input-field label:not(.active) {
    left: 0 !important;
}

/* Label mit etwas Abstand zum Rahmen des Eingabefelds anzeigen, wenn es innerhalb des Felds angezeigt wird */
.input-field label:not(.active),
.row div.input-field label:not(.active),
.row div.input-field.autocomplete label:not(.active) {
    left: 2px !important;
}

.toast {
    flex-direction: column;
}

/* AutoComplete Dialoge scrollable */
.gwt-SuggestBoxPopup {
    overflow: auto !important;
    max-height: 220px !important;
}

ul.collection .collection-item .secondary-content i {
    margin-top: 0 !important;
}

.picker__nav--prev.picker__nav--disabled:before {
    border-right: 0.75em solid #F5F5F5 !important;
}

.picker__nav--next.picker__nav--disabled:before {
    border-left: 0.75em solid #F5F5F5 !important;
}



.registrationInfo .collapsible-body p {
    padding: 0;
}

/* Die Workflow-Buttons verwenden jetzt float. Der folgende Code sorgt dafür, dass sie vollständig vom Container
   erfasst werden. */
.sjf-public-workflowbuttons:after {
    content: "";
    clear: both;
    display: table;
}

/* GWT erzeugt in LayoutImpl.createRuler div-Elemente mit festgelegten Maßen z.B. in cm, um die Einheiten in Pixel
   umzurechnen. Leider kann das div bei kleinen Bildschirmgrößen das Layout kaputt machen. Durch position:fixed (statt absolute)
   lösen wir es vollständig aus dem Layout, ohne die Funktion zu stören. */
body > div[style*="visibility: hidden"][style*="z-index: -32767"] {
    position: fixed !important;
}