/* put your own styles to customize and override the theme */

/*body {
    background-color: color-mix(in srgb,var(--dnf-brand-color),#0000 50%);
}*/

#components-reconnect-modal {
    z-index: @ThemingConstants.ZIndexConnectionLost;
    visibility: hidden;
    opacity: 0;
}

    #components-reconnect-modal.components-reconnect-show,
    #components-reconnect-modal.components-reconnect-failed,
    #components-reconnect-modal.components-reconnect-rejected {
        animation: fadeIn 1s;
        animation-delay: 2s;
        animation-fill-mode: forwards;
        visibility: visible;
    }

    #components-reconnect-modal div.components-reconnect-content {
        display: none;
        flex-direction: column;
        text-align: center;
    }

    #components-reconnect-modal.components-reconnect-show #components-reconnect-show-content {
        display: flex;
    }

    #components-reconnect-modal.components-reconnect-failed #components-reconnect-failed-content {
        display: flex;
    }

    #components-reconnect-modal.components-reconnect-rejected #components-reconnect-rejected-content {
        display: flex;
    }

.popover-glossary {
    max-width: min(50%, 40em);
    z-index: 10000;
}

[data-dnf-glossary-click] {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
    text-decoration-skip-ink: none;
    cursor: help;
}

[data-dnf-glossary], [data-dnf-glossary-before] {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
    text-decoration-skip-ink: none;
    position: relative;
}

    [data-dnf-glossary]:hover:after, [data-dnf-glossary-before]:hover:before {
        display: inline-block;
        position: absolute;
        font: var(--fa-font-light);
        content: "\e0c0";
        cursor: help;
        top: 50%;
        transform: translateY(-50%);
    }

    [data-dnf-glossary-before]:hover:before {
        left: -1.5em;
        padding-right: 0.5em;
    }

    [data-dnf-glossary]:hover:after {
        padding-left: 0.5em;
    }

    [data-dnf-glossary]:not(th):hover:after {
        right: -1.5em;
    }

.form-control::-moz-placeholder {
    opacity: 0.5;
}

.form-control::placeholder {
    opacity: 0.5;
}

.form-select,
.cursor-pointer {
    cursor: pointer;
}

    .form-select:disabled {
        cursor: default;
    }

.form-label-compact {
    display: block;
    margin-left: 0.25rem;
    margin-bottom: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.form-subtext {
    color: var(--dnf-text-muted-color);
    font-size: 0.875em;
    margin-left: 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scale-lg {
    transform: scale(1.25);
}

.card {
    --bs-card-border-width: 0;
}

.card-hoverable:hover {
    box-shadow: 0 6px 18px rgba(0,0,0,0.08) !important;
    cursor: pointer;
    transition: box-shadow 0.2s;
}

.cursor-zoom-in {
    cursor: zoom-in;
}

.highlightable {
    -webkit-transition: background-color 0.5s; /* For Safari 3.1 to 6.0 */
    transition: background-color 0.5s;
}

    .highlightable.bg-highlight {
        background-color: lightgreen !important;
    }

.table.table-skipbodytopbordersincenohead > tbody > tr:first-child > td {
    border: none;
}

.transitionBorderColor {
    transition: border-top-color 1s, border-bottom-color 1s, border-left-color 1s, border-right-color 1s;
}

.bg-highlight {
    background-color: lightgreen;
}

.bg-highlight-warn {
    background-color: #ffcc80 !important;
}

.bg-highlight-critical {
    background-color: tomato !important;
}

.bg-dunning {
    background-color: fuchsia !important;
}

/* 2023-05-30 DNF-SaS: sollte eigentlich mit :not(:has(.form-floating)) auf inputs ohne floating-label beschränkt werden, :has() wird aber von FF nicht ausreichend supported (https://connect.mozilla.org/t5/discussions/when-is-has-css-selector-going-to-be-fully-implemented-in/td-p/23794) */
/*.is-flowwer-required {
    background-color: #fffb85 !important;
}*/

label.is-flowwer-required {
    background-color: #fffb85 !important;
}

.form-floating.is-flowwer-required > .form-control,
.form-floating.is-flowwer-required > .form-control-plaintext,
.form-floating.is-flowwer-required > .form-select {
    background-color: #fffb85;
}

    /* 2023-05-30 DNF-SaS: muss so, damit auch die floating labels den required-background bekommen */
    .form-floating.is-flowwer-required > .form-control:focus ~ label::after,
    .form-floating.is-flowwer-required > .form-control:not(:placeholder-shown) ~ label::after,
    .form-floating.is-flowwer-required > .form-control-plaintext ~ label::after,
    .form-floating.is-flowwer-required > .form-select ~ label::after {
        background-color: #fffb85;
    }

.text-required-red {
    color: #fb191d;
}

.badge-dunning {
    background-color: fuchsia;
    color: #fff;
}

.action-btn {
    border: none;
    background: transparent;
    padding: .25rem .5rem;
    border-radius: .25rem;
    transition: background-color .15s ease, color .15s ease;
}

    .action-btn:hover,
    .action-btn:focus {
        background-color: rgba(0,0,0,.05); /* dezentes Hover */
    }

button:disabled, btn:disabled {
    cursor: not-allowed;
}

.badge-datev, .badge-important {
    text-shadow: 0 0.1rem 0 rgba(255,255,255,0.6);
    color: rgba(15,15,15,0.85);
    border: 0 solid #8d8b8b;
    background-image: linear-gradient(rgb(211, 236, 173), rgb(177, 222, 112));
}

.btn-datev {
    text-shadow: 0 0.1rem 0 rgba(255,255,255,0.6);
    font-weight: 600;
    color: rgba(15,15,15,0.85);
    box-shadow: 0 0.1rem 0.55rem rgba(75,80,89,0.55);
    -webkit-transition: background 200ms;
    -o-transition: background 200ms;
    transition: background 200ms;
    border: 0 solid #8d8b8b;
    /*border-top: .1rem solid #fff;*/
    border-bottom: .1rem solid #8d8b8b;
    background-image: linear-gradient(rgb(211, 236, 173), rgb(177, 222, 112));
    border-bottom-color: #677e46;
}

    .btn-datev:hover {
        color: rgba(15,15,15,0.95);
        background-color: rgba(0, 0, 0, 0);
        background-image: linear-gradient(rgb(199, 231, 153), rgb(161, 215, 81));
    }

    .btn-datev:disabled {
        color: rgba(15,15,15,0.85);
    }

.btn-datev-error {
    border: 1px solid #a42628;
    background-image: inherit;
    background-color: #fad7d7;
}

.title-hint, .title-hint > .form-check-label {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
    cursor: help;
    text-decoration-skip-ink: none;
}

.btn-cyclevalue {
    text-decoration: underline;
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
    cursor: pointer;
    border-bottom: 0;
    text-decoration-skip-ink: none;
}

.menu-link.active {
    background-color: rgb(67, 139, 198);
    border-radius: 3px;
    padding: 1px 0.33em;
    color: white !important;
}

.swagger-ui .topbar {
    background-color: rgb(76, 76, 76);
    border-bottom: 3px solid #547f00;
}

/* Hide Up/Down-Arrows */
input[type='number'] {
    -moz-appearance: textfield;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.text-rainbow {
    background-image: linear-gradient(-135grad, violet, indigo, green, orange, red);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.border-highlight {
    border-color: lightgreen !important;
}

.border-rainbow {
    border: 2px solid;
    border-image-slice: 1;
    border-width: 2px;
    border-image-source: linear-gradient(-135grad, violet, indigo, green, orange, red);
}

.border-bottom-2 {
    border-width: 0 0 2px 0 !important;
}

.border-2 {
    border-width: 2px 2px 2px 2px !important;
}

.vh-minmax-60-80 {
    min-height: 60vh;
    max-height: 80vh;
}

.dvh-100 {
    height: 100vh !important;
    height: 100dvh !important;
}

.bm-header .bm-title, .bm-header-copy .bm-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* flowwer-transmissionstatus-XXX is a combination of list-group-item-XXX (inset box-shadow) and btn-subtle-XXX (background-color) */
.flowwer-transmissionstatus-NotStarted {
    box-shadow: inset 4px 0 0 0 #f6f7f9;
}

.flowwer-transmissionstatus-Transmitted {
    box-shadow: inset 4px 0 0 0 #387eb8;
    background-color: rgba(67,139,198,.08);
}

.flowwer-transmissionstatus-Successful {
    box-shadow: inset 4px 0 0 0 #449343;
    background-color: rgba(76,164,75,.08);
}

.flowwer-transmissionstatus-Error {
    box-shadow: inset 4px 0 0 0 #b92a2d;
    background-color: rgba(206,47,50,.08);
}

.flowwer-transmissionlogitem {
    display: flex;
    padding: 0.25rem;
    padding-left: 0.5rem;
    padding-right: 1rem;
    border-left: 4px solid transparent;
}

    .flowwer-transmissionlogitem.flowwer-transmissionlogitem-info {
        border-left: 4px solid #ddd !important;
        background-color: rgba(225,225,225,.08);
        align-items: center;
    }

    .flowwer-transmissionlogitem.flowwer-transmissionlogitem-error {
        border-left: 4px solid #b92a2d !important;
        background-color: rgba(206,47,50,.08);
    }

/* Ersatz für in BS5.3 nicht vorhandenes overflow-lg-auto */
@media (min-width: 992px) {
    .scrollable-lg {
        height: 100%;
        overflow-y: auto;
    }
}

@media (prefers-reduced-motion) {
    div.blazored-modal-fade-in,
    div.blazored-modal-overlay {
        -webkit-animation-timing-function: steps(1) !important;
        animation-timing-function: steps(1) !important;
        -webkit-animation-duration: 0s !important;
        animation-duration: 0s !important;
    }
}

.table-xs td, .table-xs th {
    padding: .1rem .3rem;
}

.verticalNavLayer1 {
    z-index: 2;
    box-shadow: 0 .5rem 1rem rgba(20, 20, 31, .15) !important;
    background-color: var(--dnf-bg-workspace, white);
    width: 18%;
    min-width: 18em;
    max-width: 25em;
}

.verticalNavLayer2 {
    z-index: 1;
    box-shadow: 0 .5rem 1rem rgba(20, 20, 31, .15) !important;
    background-color: var(--dnf-bg-workspace, white);
    width: 20em;
    padding-left: 0.5rem;
}

.verticalNavLayer3 {
    box-shadow: 0 .5rem 1rem rgba(20, 20, 31, .15) !important;
    background-color: var(--dnf-bg-workspace, white);
    width: 20em;
    padding-left: 0.5rem;
}

.dnf-text-muted {
    filter: brightness(85%);
}

.text-bg-warning-subtle {
    color: var(--dnf-warning-subtle-color);
    background-color: var(--dnf-warning-subtle-bg);
}

.text-bg-danger-subtle {
    color: var(--dnf-danger-subtle-color);
    background-color: var(--dnf-danger-subtle-bg);
}

.text-bg-disabled, .text-bg-disabled:focus {
    color: var(--dnf-text-muted-color);
    background-color: var(--bs-secondary-bg);
}

.text-bg-primary {
    color: var(--bs-primary-text-emphasis) !important;
    background-color: var(--bs-primary-bg-subtle) !important;
}

.text-bg-secondary {
    color: var(--bs-secondary-text-emphasis) !important;
    background-color: var(--bs-secondary-bg-subtle) !important;
}

.text-decoration-underline-hover:hover {
    text-decoration: underline;
}

.rowContainerWithFocus {
}

    .rowContainerWithFocus:has(:focus-visible), .rowContainerWithFocus:focus-within {
        background-color: #fbfbfb;
    }

.fs-inherit {
    font-size: inherit !important;
}

.fs-lg {
    font-size: 1.25rem;
}

.fs-xl {
    font-size: 1.5rem;
}

.fs-xxl {
    font-size: 1.75rem;
}

.fs-3xl {
    font-size: 2rem;
}

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

.w-67 {
    width: 67% !important;
}

.w-33 {
    width: 33% !important;
}

.w-4rem {
    width: 4rem !important;
}

.mw-10rem {
    max-width: 10rem;
}

.mw-50rem {
    max-width: 50rem;
}

.mw-30-50 {
    min-width: 30% !important;
    max-width: 50% !important;
}

.mw-70 {
    max-width: 70% !important;
}

/* am Ende lassen (nicht alphabetisch einsortieren: !important gewinnt sonst ggf. nicht) */

.border-tenantmaster {
    border: 2px solid !important;
    border-image-slice: 1 !important;
    border-width: 2px !important;
    border-image-source: repeating-linear-gradient(-45deg, dimgray 0 10px, orange 10px 20px) !important;
}

.bg-tenantmaster {
    background-image: repeating-linear-gradient(-45deg, dimgray 0 10px, orange 10px 20px) !important;
}

.bg-hover:hover {
    background: rgb(60 60 60 / 20%) !important;
}

.leftColList .list-group-item {
    padding-right: 0.25rem;
    transition: box-shadow 0.2s, background 0.2s;
    border: none;
}

    .leftColList .list-group-item.active {
        background: rgba(13,110,253,0.08);
        color: #212529;
        box-shadow: 0 4px 16px 0 rgba(13,110,253,0.10);
        position: relative;
        margin-top: inherit;
    }

        .leftColList .list-group-item.active::before {
            content: "";
            position: absolute;
            left: 0.1rem;
            top: 0.25rem;
            bottom: 0.25rem;
            width: 4px;
            border-radius: 2px;
            background: var(--dnf-factory-brand-color, #0d6efd);
        }

    .leftColList .list-group-item:hover:not(.active) {
        background: rgba(13,110,253,0.04);
        box-shadow: 0 2px 8px 0 rgba(0,0,0,0.05);
    }

.counterBadge {
    display: block;
    height: 1.25rem;
    line-height: 1.15rem;
    font-size: 1rem;
    border-radius: var(--bs-border-radius);
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    color: #fff;
    background-color: RGBA(var(--bs-secondary-rgb), 0.5)
}

.dnf-tab.nav-link {
    --dnf-nav-link-border-bottom-height: .2rem;
    --dnf-nav-underline-color: var(--bs-primary);
    border: 0;
    background: none;
    color: var(--bs-body-color);
    padding: .25rem .5rem .35rem;
    font-weight: 500;
    text-decoration: none;
    border-bottom: var(--dnf-nav-link-border-bottom-height) solid transparent;
    transition: color .15s ease, border-color .15s ease;
    font-size: 110%;
    min-width: 0; /* DNF-SaS 2025-08-26: damit flexbox shrinken kann (klingt doof, ist aber so) */
}

    .dnf-tab.nav-link:hover {
        border-bottom-color: rgba(var(--bs-primary-rgb), .5);
        color: var(--bs-body-color);
    }

    .dnf-tab.nav-link.active {
        border-bottom-color: var(--dnf-nav-underline-color);
    }

    .dnf-tab.nav-link .nav-text {
        transition: color .15s ease, font-weight .15s ease;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .dnf-tab.nav-link.active .nav-text {
        font-weight: 700;
    }

    /* Tastaturfokus */
    .dnf-tab.nav-link:focus-visible {
        outline: 0;
        box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .25);
        border-bottom-color: var(--dnf-nav-underline-color);
    }

    .dnf-tab.nav-link.disabled,
    .dnf-tab.nav-link:disabled,
    .dnf-tab.nav-link[aria-disabled="true"] {
        opacity: .5;
        pointer-events: none;
        border-bottom-color: transparent;
    }

/* Dark-Mode/Theme respektieren (Bootstrap 5.3 data-bs-theme) */
[data-bs-theme="dark"] .dnf-tab.nav-link:hover {
    border-bottom-color: rgba(var(--bs-primary-rgb), .6);
}