html, body {
    height: 100%;
}

app {
    display: block;
    height: 100%;
}

.header-logo {
    flex-shrink: 0;
    background-color: #e1001a;
    -webkit-mask: url('../images/Logo.png');
    mask: url('../images/Logo.png');
    -webkit-mask-position: left;
    mask-position: left;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    width: 100%;
    height: 100%;
}

#blazor-error-ui {
    background: inherit;
    bottom: 0;
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 100001;
}

/* Splash Screen */
.loading {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 500px;
    height: 200px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    /*   background: #ffffff;*/
    overflow: hidden;
}

.slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(190, 30, 30, 0.1), rgba(190, 30, 30, 0.6), rgba(190, 30, 30, 0.1));
    
    animation: slide 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes slide {
    0% {
        transform: translateX(-100%);
    }

    50% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-100%);
    }
}

/* LSP */

#main-view-content {
    color: #222121;
}

.logon-main-container {
    background-image: url('../images/iStock-1422742644_ohne_Text.jpg');
    /*background-image: url('../images/iStock-515959127_SW.jpg');*/
    
    background-size: cover;
    background-position: top Left;
    background-repeat: no-repeat;
}

.xaf-sidebar {
    background-color: #efefef;
}


.header[role=banner] {
    border-image: linear-gradient(to right, #ffb81c 20%, #e96143 40%, #d0006f, #d0006f 55%, #3cc1f1 65%, #0d52b2) 100;
    border-top: 4px solid;
}

/* Navigation Item without Hyperlink unterline */
.clickable-xaf-nav-item > a .xaf-nav-link, .clickable-xaf-nav-item > div > a .xaf-nav-link {
    text-decoration: none !important;
}

/* Active Navigation Item decoration */
.dxbl-accordion .dxbl-accordion-group .dxbl-accordion-item:not(.dxbl-accordion-group):not(.dxbl-disabled):not(:disabled).dxbl-active > .dxbl-accordion-item-content {
    background-color: #ffa6a6 !important;
    color: black !important;
    border-left: #ff0000;
    border-left-style: solid !important;
    border-left-width: 5px !important;
}
/*.main-ribbon*/
/*{*/
/*    background-image: url('../images/Header.png');*/
/*    background-size: unset;*/
/*    background-position: top right;*/
/*    background-repeat: no-repeat;*/
/*}*/

.header-right-side-light
{
        background-image: url('../images/Header.png');
        background-size: unset;
        background-position: top right;
        background-repeat: no-repeat;
}

/*#region CustomCSSClassNames*/

/* list-vs-set-height-100vhM20rem (for virtual scrolling lists) */
.list-vs-set-height-100vhM20rem .nested-content > .grid-content.grid-virtual-scrolling-mode dxbl-grid {
    max-height: unset;
    height: calc(100vh - 18rem);
}

/* list-vs-set-height-30rem (for virtual scrolling lists) */
.list-vs-set-height-30rem .nested-content > .grid-content.grid-virtual-scrolling-mode dxbl-grid {
    max-height: unset;
    height: 30rem;
}

/*#endregion*/

button.action-button-wrapper-div-issue-workaround {
    border: none !important;
    outline: none !important;

    &:not(:hover) {
        background: transparent !important;
    }

    &:focus-visible:not(:disabled) {
        border: none;
        box-shadow: none;
    }
}