html, body {
    font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 100%;
    color: #333333;
}

body {
    background: transparent url('../images/hintergrundbild.jpg') 0% 0% no-repeat padding-box;
    background-attachment: fixed;
}

*, *:focus, *:hover {
    outline: none;
}

a, .btn-link {
    color: black;
    cursor: pointer;
}

a {
    text-decoration: none !important;
}

app {
    position: relative;
    display: flex;
    flex-direction: column;
}

.top-row {
    height: 110px;
    display: flex;
    align-items: normal;
}

.bgDefault {
    /*background: #F8F8F8 0% 0% no-repeat;*/
    /*opacity: 0.85;*/
    background: rgba(248, 248, 248, 0.85);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
}

.bgDefaultDarker {
    /*background: #F8F8F8 0% 0% no-repeat;*/
    /*opacity: 0.9;*/
    background: rgba(248, 248, 248, 0.9);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
}

h1 {
    font-size: 24px;
    font-size: 1.5rem;
    font-weight: bold;
    color: black;
    margin-bottom: 2rem;
}

h2 {
    font-size: 18px;
    font-size: 1.125rem;
    font-weight: bold;
    color: black;
}

h3 {
    font-size: 16px;
    font-size: 1rem;
    font-weight: bold;
    color: black;
}

.hellgrau {
    color: #727272;
}

a.hellgrau:hover {
    color: #727272;
}

.rot {
    color:red;
}
.orange {
    color:orange;
}
.gruen {
    color:green;
}

span.h1 {
    font-size: 24px;
    font-size: 1.5rem;
    font-weight: bold;
    color: black;
}

span.h2 {
    font-size: 18px;
    font-size: 1.125rem;
    font-weight: bold;
    color: black;
}

span.h3 {
    font-size: 16px;
    font-size: 1rem;
    font-weight: bold;
    color: black;
}

.bottomLeft {
    position: relative;
    left: 0;
    bottom: 0;
}

.bottomRight {
    position: absolute;
    right: 0;
    /*bottom: 0;*/
}


.langChooser a {
    display: inline-block;
    border: 1px solid lightgray;
    padding: 3px;
}

a.expandButton {
    display: block;
    background: url('../images/icon-pfeil-rechts.svg') no-repeat left center;
    padding-left: 20px;
    margin-top: 10px;
}

a.expandButton.expanded {
    background: url('../images/icon-pfeil-links.svg') no-repeat left center;
}


.collapsed {
    overflow-y: hidden;
    max-height: 190px;
}

img.navigationHamburger:hover {
    cursor: pointer;
}

.navigation {
    padding-top: 50px;
    position: relative;
}

.navigation a {
}

.navigation ul {
    list-style-type: none;
    padding-left: 0px;
}

.navigation ul li {
    border-top: 1px solid #707070;
    padding-top: 8px;
    margin-bottom: 15px;
    position: relative;
}

.navigation ul li a, .navigation ul li span {
    font-size: 18px;
    font-size: 1.125rem;
    font-weight: bold;
    color: black;
}

.navigation ul li span:hover {
    cursor: pointer;
}

.navigation ul li ul {
    margin: 20px 0 20px 0px; /*28px;*/
}

.navigation ul li ul li {
    border: none;
    color: #333333;
    padding: 0;
    margin: 0px 0px 5px 0px;
}

.navigation ul li ul li a, .navigation ul li ul li span {
    font-size: 16px;
    font-size: 1rem;
    color: #333333;
}

.navigation ul li ul li a.active {
    font-weight: bold;
    color: black;
}

/* blaues Quadrat für aktive Menüpunkte
.navigation ul li ul li a.active::after {
    content: '';
    background: url("../images/icon-quadrat.svg") no-repeat;
    height: 10px;
    width: 10px;
    position: absolute;
    left: -24px;
    top: 7px;
    display: block;
}
*/

.navigation ul li ul li a i {
    display:inline-block;
    width:24px;
    margin-left:27px;
    margin-right:3px;
}

.navigation ul li a i .imgActive {
    display:none;
}
.navigation ul li a.active i .imgActive {
    display: inline;
}

.navigation ul li a i .imgInactive {
    display:inline;
}
.navigation ul li a.active i .imgInactive {
    display: none;
}

#navMenuCollapser {
    position:relative;
    top:-7px;
    margin-left: 7px;
}

#navDiv.menuHidden {
    width: 70px !important;
    flex: initial;
}
#navDiv.menuHidden a.menuFavorit {
    display:none;
}

#navDiv.menuHidden i {
    margin-left:0px !important;
}

.menuCollapsed {
    display: none;
}

.navigation a.menuFavorit {
    position:absolute;
    display:block;
    right:0px;
    top:0px;
    width:18px;
    height:18px;
}
.navigation a.menuFavorit span {
    width: 18px;
    height: 18px;    
}
.navigation a.menuFavorit span {
    color: #c9c9c9;
}
.navigation a.menuFavorit span.favorit {
    color:black;
}

table.fixedWordWrap {
    table-layout: fixed;
    width: 100%;
}
table.fixedWordWrap td {
    word-wrap:break-word;
}

.row.wordWrap {
    word-wrap:break-word;
    word-break:break-word;
}

.container-striped .row:not(.not-striped):nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.05);
}

a.datenselektion {
    font-style: italic;
    font-weight: bold;
}

.treeViewOrganisation {
    max-height: 700px;
}

.form-group {
    position: relative;
}

img.helpIcon {
    cursor: pointer;
}

img.helpIcon.hi-Simple {
    margin-top:-3px;
}

img.helpIcon.hi-Textbox {
    position: absolute;
    right: -24px;
    bottom: 3px;
}

img.helpIcon.hi-Combobox {
    position: absolute;
    right: -24px;
    bottom: 3px;
}

img.helpIcon.hi-DateEdit {
    position: absolute;
    right: -24px;
    bottom: 3px;
}

img.helpIcon.hi-Checkbox {
    margin-top:-6px;
}

img.helpIcon.hi-SpinEdit {
    position: absolute;
    right: -24px;
    bottom: 3px;
}

img.helpIcon.hi-Textarea {
    position: absolute;
    right: -24px;
    top: 3px;
}

img.helpIcon.lessPadding {
    right: -12px !important;
}
img.helpIcon.top {
    bottom:initial;
    top:27px;
}

img.showPassword {
    cursor: pointer;
}

img.showPassword.sp-Simple {
    position: absolute;
    right: 3px;
    bottom: 3px;
}

img.showPassword.sp-WithHelpIcon {
    position: absolute;
    right: 33px;
    bottom: 3px;
}

button span.oi {
    margin-right: 0.5em;
}

.buttonInFormLayoutWithoutCaption {
    margin-top:-10px;
}

.mapContainerPopup {
    width: 1000px;
    min-height: 500px;
    height: 90%;
    margin: 0 auto;
    background:rgba(0, 0, 0, 1);
}

.mapButtonContainer {
    position:absolute;
    right:0px;
    top:-30px;
}

.map {
    min-height: 200px;
    min-width: 200px;
    width: 100%;
    height: 100%;
}

.layer-switcher.shown {
    bottom:0.5em !important;
}

.TreeViewCollapser {
    padding-bottom:5px;
}

.TreeViewCollapser img:hover {
    cursor:pointer;
}

.tooltip-inner {
    max-width: 400px !important;
}

    /*
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}
*/
.dxbs-textbox.valid.modified .form-control, .dxbs-spin-edit.valid.modified .form-control, .dxbs-combobox.valid.modified .form-control, .dxbs-date-edit.valid.modified .form-control, .dx-listbox-scrollable.valid.modified .form-control, .dx-listbox-scrollable.valid.modified .form-control, .dxbs-listbox.valid.modified .form-control, .dxbs-listbox.valid.modified .form-control {
    border-color: #cbc8d0;
}

.comboBoxLarge .dxbs-listbox {
    max-height:500px !important;
}

.validation-message {
    color: red;
}

.widthMinus10 {
    max-width:calc(100% - 10px);
}

.LegendeMenu .dx-menu-title {
    font-weight:normal !important;
    font-size:1rem !important;
    padding-left:0 !important;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

@keyframes blink-animation {
    0% {
        opacity: 0;
    }
    50% {
        opacity: .5;
    }
    100% {
        opacity: 1;
    }
}

p.loading {
    animation: blink-animation 1s steps(5, start) infinite;
    -webkit-animation: blink-animation 1s steps(5, start) infinite;
}


.diagrammContainer {
    height: calc(100% - 35px);
}


/* Modal Dialog */
.blazored-modal-container {
    display: flex;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 100;
}

.blazored-modal-overlay {
    display: block;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 101;
}

.blazored-modal {
    display: flex;
    flex-direction: column;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 4px;
    border: 1px solid #fff;
    padding: 1.5rem;
    box-shadow: 0 2px 2px rgba(0,0,0,.25);
}

.blazored-modal-helptext {
    position: absolute;
    height: calc(100vh - 110px);
    top: 110px;
    right: 0;
    width: 30%;
}

.blazored-modal-helptext h1 {
    margin-top: 1.5rem;
}

.blazored-modal-title {
    font-size: 18px;
    font-size: 1.125rem;
    font-weight: bold;
    color: black;
}

.blazored-modal-close {
    padding-top: 0.4rem;
    padding-left: 1rem;
}

.blazored-modal-close button {
    background-color: transparent;
    border: 0;
    -webkit-appearance: none;
    cursor: pointer;
    font-size: 1.5rem;
    font-weight: bold;
}

.blazored-modal-content {
    position: relative;
}

.blazored-modal-wrapper {
    z-index: 102;
}

.blazored-modal-wrapper.resizable {
    resize: both;
    overflow: auto;
}

.blazored-modal-wrapper.draggable {
    position:absolute;
}
.blazored-modal-wrapper.draggable .blazored-modal-title {
    cursor: move;
}

.blazored-modal-center {
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.blazored-modal-topleft .blazored-modal-wrapper {
    position: absolute;
    top: 32px;
    left: 32px;
}

.blazored-modal-topright .blazored-modal-wrapper {
    position: absolute;
    top: 32px;
    right: 32px;
}

.blazored-modal-bottomleft .blazored-modal-wrapper {
    position: absolute;
    bottom: 32px;
    left: 32px;
}

.blazored-modal-bottomright .blazored-modal-wrapper {
    position: absolute;
    bottom: 32px;
    right: 32px;
}


/* End of Modal Dialog */

/*
.btn.disabled, .btn:disabled {
    opacity: .3 !important;
    color: white;
}
*/

.pageInactive {
    position: fixed;
    display: block;
    overflow: hidden;
    inset: 0px;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.8);
}

.spinner-container {
    z-index: 2010;
    text-align: center;
}

.spinner-border {
    width: 3rem;
    height: 3rem;
    margin-left: 1rem;
}

@media (max-width: 991.98px) {
    .main .top-row.auth {
        justify-content: space-between;
    }

    .main .top-row a, .main .top-row .btn-link {
        margin-left: 0;
    }

    .kontaktLinks {
        width: 100%;
        margin: 10px 0;
        text-align: center;
        font-size: 14px;
        font-size: 0.8rem;
        color: white;
    }

    .kontaktLinks a {
        color: white;
    }

    .blazored-modal {
        width: 100%;
    }

    .blazored-modal-helptext {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100%;
    }

    .flexDataGrid {
        max-width: 100%;
    }

    a.logout {
        position:initial;
    }
}

@media (max-width: 1600px) {

    .blazored-modal-helptext {
        width: 50%;
    }
}

@media (min-width: 992px) {

    html, body {
        height: 100%;
    }

    body {
        overflow: hidden;
    }

    app {
        flex-direction: row;
        height: 100%;
    }

    .container-fluid.main {
        height: 100%;
    }

    .main .top-row {
        position: sticky;
        top: 0;
    }

    .top-row span {
        position: absolute;
        bottom: 17px;
        right: 300px;
    }

    span.version {
        position: initial;
        color: red;
        font-weight: bold;
        font-size: 150%;
    }

    .content-row {
        height: calc(100vh - 110px);
    }

    .navigation {
        max-width: 380px;
        height: calc(100vh - 110px); /* 110 px = Höhe Top-Row */
        position: sticky;
    }

    .content {
        height: calc(100vh - 110px - 8rem); /* 110 px = Höhe Top-Row, 8rem = 3rem top-margin + 5rem bottom-margin */
        overflow: auto;
    }

    .loginBox {
        width: 100%;
        margin: 0 auto;
        max-width: 1024px;
    }

    a.logout {
        position: absolute;
        right:200px;
        bottom:20px;
        padding:0.2rem .75rem;
    }

    .kontaktLinks {
        position: absolute;
        bottom: 2rem;
        right: 3rem;
        font-size: 14px;
        font-size: 0.8rem;
        color: white;
    }

    .kontaktLinks a {
        color: white;
    }

    .flexDataGrid {
        max-width: 100%; /* 80% */
    }
}

@media (min-width: 1200px) {
    .loginBox {
        width: 70%;
    }
}

.flexDataGridFullHeight.dxbs-gridview {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.flexDataGridFullHeight.dxbs-gridview > .card {
    display: flex;
    height: 100%;
}

.flexDataGridFullHeight.dxbs-gridview > .card > .dxbs-grid-vsd {
    flex: 1 1 auto;
    height: auto;
}

.flexDataGridFullHeight.dxbs-gridview > .card > div:not(.dxbs-grid-vsd) {
    flex: 1 0 auto;
}

.flexDataGrid thead > tr:first-child th, .flexDataGrid thead > tr:first-child th a, .flexDataGridFullHeight thead > tr:first-child th, .flexDataGridFullHeight thead > tr:first-child th a { 
    word-wrap: break-word !important;
    word-break: break-word !important;
    white-space: initial !important;
    overflow: initial !important;
    text-overflow: initial !important;
}

.flexDataGridHeightFromParent {
    height: calc(100vh - 110px - 8rem - 150px);
}

.filter-type-container {
    display: flex;
}

.filter-type-container > div {
    width: 100%;
}

.filter-type-button {
    margin-right: 5px;
    padding:2px;
}

.grid-icon {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    min-width: 1rem;
    min-height: 1rem;
    background-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background-position: center center;
    background-color: currentColor;
    vertical-align: middle;
}

.grid-icon-check {
    mask-image: url("/images/check.svg");
    -webkit-mask-image: url("/images/check.svg");
}

.dxbl-grid {
    --dxbl-grid-focus-bg: #0082c0;
}
.dxbl-btn-primary {
    --dxbl-btn-disabled-opacity:0.3;
}
.dxbl-btn-secondary {
    --dxbl-btn-disabled-opacity: 0.3;
}
.dxbl-text-edit {
    --dxbl-text-edit-focus-border-color: #B1D8EB;
}
.dxbl-checkbox {
    --dxbl-checkbox-check-element-checked-bg: #0082c0;
    --dxbl-checkbox-check-element-checked-hover-bg: #0082c07a;
}

.dxbl-pager .dxbl-pager-active-page-btn {
    background-color: #0082c0;
}

.dxbl-treeview .dxbl-treeview-item > .dxbl-treeview-item-content > .dxbl-treeview-item-container:not(.dxbl-disabled):not(:disabled).dxbl-active {
    background-color: #0082c0;
}

.dxbl-accordion-item.inactive .dxbl-accordion-item-text {
    font-style: italic!important;
}

.editor-icon {
    width: 1rem;
    height: 1rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    opacity: 0.7;
}

.editor-icon-date {
    background-image: url(/images/editor-icon-date.svg);
}

.editor-icon-clear {
    background-image: url(/images/editor-icon-clear.svg);
}