.nav-tabs-dark .nav-link {
    color: #fff;
}

.nav-tabs-dark .nav-item.active .nav-link {
    border-color: var(--bs-nav-tabs-link-hover-border-color);
    isolation: isolate;
}

.fixed-top.report-navbar {
    left: 260px;
}

@media (min-width: 1px) and (max-width: 991.98px) {
    .fixed-top.report-navbar {
        left: 0;
    }
}

.sidebar.sidebar-right.collapsed {
    min-width: 0;
    margin-left: 0;
}

.opened-right-bar .app-main__outer {
    padding-right: 450px;
}

/*.nct-result-table-container {*/
/*    width: calc(100vw - 400px);*/
/*    overflow-x: auto;*/
/*}*/

.closed-sidebar.opened-right-bar.fixed-sidebar .query-editor-panel {
    width: calc(100vw - 580px);
}

.opened-right-bar.fixed-sidebar .query-editor-panel {
    width: calc(100vw - 780px);
    overflow-x: auto;
}

/*.closed-sidebar.opened-right-bar.fixed-sidebar .nct-result-table-container {*/
/*    width: calc(100vw - 602px);*/
/*}*/

/*.opened-right-bar.fixed-sidebar .nct-result-table-container {*/
/*    width: calc(100vw - 827px);*/
/*    overflow-x: auto;*/
/*}*/

.opened-right-bar.fixed-sidebar .app-header__content {
    padding-right: 475px;
}

.opened-right-bar.fixed-sidebar .app-main__outer {
    padding-right: 450px;
}

/*.closed-sidebar.fixed-sidebar .nct-result-table-container {*/
/*    width: calc(100vw - 200px);*/
/*}*/

.blockOverlay {
    opacity: 0.33;
}

.app-drawer-wrapper {
    height:100vh
}

.drawer-content-wrapper {
    height: 100vh;
}

.badge-pill {
    padding-right: .6em;
    padding-left: .6em;
    border-radius: 10rem
}

.badge-primary {
    color: #fff;
    background-color: #3f6ad8
}

.badge-outline-primary {
    color: #3f6ad8;
    background-color: transparent;
    border: 1px solid #3f6ad8;
    font-size: 0.88rem;
    border-radius: 0.25rem;
}

a.badge-primary:hover, a.badge-primary:focus {
    color: #fff;
    background-color: #2651be
}

.badge-secondary {
    color: #fff;
    background-color: #6c757d
}

.badge-outline-secondary {
    color: #6c757d;
    background-color: transparent;
    border: 1px solid #6c757d;
    font-size: 0.88rem;
    border-radius: 0.25rem;
}

a.badge-secondary:hover, a.badge-secondary:focus {
    color: #fff;
    background-color: #545b62
}

.badge-success {
    color: #fff;
    background-color: #3ac47d
}

.badge-outline-success {
    color: #3ac47d;
    background-color: transparent;
    border: 1px solid #3ac47d;
    font-size: 0.88rem;
    border-radius: 0.25rem;
}

a.badge-success:hover, a.badge-success:focus {
    color: #fff;
    background-color: #2e9d64
}

.badge-info {
    color: #fff;
    background-color: #16aaff
}

.badge-outline-info {
    color: #16aaff;
    background-color: transparent;
    border: 1px solid #16aaff;
    font-size: 0.88rem;
    border-radius: 0.25rem;
}

a.badge-info:hover, a.badge-info:focus {
    color: #fff;
    background-color: #0090e2
}

.badge-warning {
    color: #212529;
    background-color: #f7b924
}

.badge-outline-warning {
    color: #f7b924;
    background-color: transparent;
    border: 1px solid #f7b924;
    font-size: 0.88rem;
    border-radius: 0.25rem;
}

a.badge-warning:hover, a.badge-warning:focus {
    color: #212529;
    background-color: #e0a008
}

.badge-danger {
    color: #fff;
    background-color: #d92550
}

.badge-outline-danger {
    color: #d92550;
    background-color: transparent;
    border: 1px solid #d92550;
    font-size: 0.88rem;
    border-radius: 0.25rem;
}

a.badge-danger:hover, a.badge-danger:focus {
    color: #fff;
    background-color: #ad1e40
}

.badge-light {
    color: #212529;
    background-color: #eee
}

.badge-outline-light {
    color: #eee;
    background-color: transparent;
    border: 1px solid #eee;
    font-size: 0.88rem;
    border-radius: 0.25rem;
}


a.badge-light:hover, a.badge-light:focus {
    color: #212529;
    background-color: #d5d5d5
}

.badge-dark {
    color: #fff;
    background-color: #343a40
}

.badge-outline-dark {
    color: #343a40;
    background-color: transparent;
    border: 1px solid #343a40;
    font-size: 0.88rem;
    border-radius: 0.25rem;
}

a.badge-dark:hover, a.badge-dark:focus {
    color: #fff;
    background-color: #1d2124
}

.badge-focus {
    color: #fff;
    background-color: #444054
}

.badge-outline-focus {
    color: #444054;
    background-color: transparent;
    border: 1px solid #444054;
    font-size: 0.88rem;
    border-radius: 0.25rem;
}

a.badge-focus:hover, a.badge-focus:focus {
    color: #fff;
    background-color: #2d2a37
}

.badge-alternate {
    color: #fff;
    background-color: #794c8a
}

.badge-outline-alternate {
    color: #794c8a;
    background-color: transparent;
    border: 1px solid #794c8a;
    font-size: 0.88rem;
    border-radius: 0.25rem;
}

a.badge-alternate:hover, a.badge-alternate:focus {
    color: #fff;
    background-color: #5c3a69
}

.gallery-main-container .gallery_product {
    padding: 10px;
}

.chart-js-replacement.active .card {
    background: beige;
}

.form-control {
    appearance: auto !important;
}

.closed-sidebar .app-header__logo {
    padding: 0;
}
.closed-sidebar .app-header__logo img {
    width: 81px;
}

.list-group-item.active a {
    color: #fff;
}

/* === FILE UPLOAD COMPONENT - STRUCTURAL STYLES === */

/* File Upload Area - Structure */
.file-upload-area {
    border: 2px dashed;
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.file-upload-area.drag-over,
.file-upload-area.dragover {
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

.file-upload-area .upload-content {
    position: relative;
    z-index: 1;
}

/* File List - Horizontal Layout */
.file-list-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 1rem;
}

.file-item {
    flex: 0 0 auto;
    min-width: 250px;
    max-width: 350px;
    margin-bottom: 12px;
}

.file-card {
    border: 1px solid;
    border-radius: 8px;
    padding: 12px;
    transition: all 0.2s ease;
    height: auto;
}

.file-card:hover {
    transform: translateY(-2px);
}

.file-content {
    width: 100%;
}

.file-content .d-flex {
    align-items: center;
    width: 100%;
}

/* File Icons and Names */
.file-icon {
    font-size: 1.2rem;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.file-name {
    font-weight: 500;
    word-break: break-word;
}

/* File Download Links */
.file-download-link {
    text-decoration: none;
    transition: color 0.2s ease;
    cursor: pointer;
    flex-grow: 1;
    margin-right: 8px;
}

.file-download-link:hover {
    text-decoration: underline;
}

.file-download-link:focus {
    outline: 2px solid;
    outline-offset: 2px;
    border-radius: 2px;
}

/* File Actions */
.file-actions {
    flex-shrink: 0;
}

.file-remove-btn {
    background: transparent !important;
    padding: 4px 8px;
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

.file-remove-btn:focus {
    outline: 2px solid;
    outline-offset: 2px;
}

.file-remove-btn i {
    font-size: 0.875rem;
}

/* Upload Messages */
.upload-message {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    font-weight: 500;
}

.upload-message.success,
.alert-success {
    border: 1px solid;
}

.upload-message.error,
.alert-danger {
    border: 1px solid;
}

.upload-message.warning,
.alert-warning {
    border: 1px solid;
}

/* File Input */
.file-upload-area input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 10;
}

/* Accessibility */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Focus indicators */
.file-upload-area:focus-visible {
    outline: 3px solid;
    outline-offset: 2px;
}

.file-actions .btn:focus-visible {
    outline: 3px solid;
    outline-offset: 2px;
}

.red {
    color: #dc3545;
}

/* Browsers ignore the native disabled attribute on <a> and <label>, so
   addAjaxWait's $btn.attr('disabled', 'disabled') doesn't actually block
   clicks on icon-wait anchors / file-upload labels. Make it meaningful. */
a[disabled], label.btn[disabled] {
    pointer-events: none;
    opacity: 0.65;
}

/* "Show Nav" overlay icon used by RimmDropDownFieldFormControlPlugin and
   RimmAutoCompleteFieldFormControlPlugin. Hidden by default; fades in on
   hover of the wrapper so the icon doesn't crowd the input until the user
   reaches for it. Right-offset clears the native <select> chevron. */
.dropdown-nav-wrapper {
    position: relative;
}
.dropdown-nav-btn {
    position: absolute;
    right: 28px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease-in;
    color: var(--bs-secondary, #6c757d);
    text-decoration: none;
    z-index: 3;
}
.dropdown-nav-btn--autocomplete {
    right: 10px; /* no native chevron on <input> — pull closer to the edge */
}
.dropdown-nav-wrapper:hover .dropdown-nav-btn,
.dropdown-nav-btn:focus {
    opacity: 1;
    pointer-events: auto;
}

/* =============================================================================
   DokieProgress — slim page-top progress bar (see window.DokieProgress in common-d.js).
   Shared by chart cross-filter clicks and every icon-wait action button. Theme-safe:
   colours come from the active theme's --bs-* custom properties, with plain fallbacks.
   ============================================================================= */
.dokie-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    z-index: 20000;
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s ease;
}
.dokie-progress--on {
    opacity: 1;
}
.dokie-progress__fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--bs-primary, #3f6ad8), var(--bs-info, #30b1ff));
    box-shadow: 0 0 10px rgba(0, 0, 0, .25);                                         /* fallback */
    box-shadow: 0 0 10px color-mix(in srgb, var(--bs-primary, #3f6ad8) 65%, transparent),
                0 0 4px color-mix(in srgb, var(--bs-info, #30b1ff) 55%, transparent);
    border-radius: 0 2px 2px 0;
    transition: width .18s ease;
}
/* =============================================================================
   Wait spinner injected by addAjaxWait() in common-d.js.

   It is positioned ABSOLUTELY on top of the icon it replaces, and sized from that
   icon's own box. That is what makes it work on every button: .btn-sm (16px icon),
   default (17px), .btn-lg (25px), .btn-icon-only, and the breadcrumb buttons whose
   <i> is injected client-side by IconAjaxLink.js all get a proportional ring in the
   right place. The previous implementation hardcoded 20x20 at left:-5px/top:-4px
   next to the icon, so it drifted on any other button size AND pushed the label
   sideways (the hidden <i> keeps its box, so an inline spinner added a second one).

   Colour is currentColor, so the ring is readable on a filled primary button, an
   outline button and a glass/ghost button alike — the old one was hardcoded #fff
   and disappeared on light surfaces.

   Own keyframes on purpose: base.css (which defines `rotate` for .ball-clip-rotate)
   is only rendered for architect/author pages, while common.css is unconditional.
   ============================================================================= */
.nct-wait-spinner {
    position: absolute;
    display: block;
    pointer-events: none;
    z-index: 1;
}

.nct-wait-spinner > div {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border-style: solid;
    border-color: currentColor;
    border-bottom-color: transparent;
    border-radius: 50%;
    background: transparent !important;
    animation: nctWaitSpin .75s linear infinite;
}

@keyframes nctWaitSpin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .nct-wait-spinner > div {
        animation-duration: 2s;
    }
}


/* === FILE UPLOAD: ATTACHMENT CARDS AND PREVIEW ===========================================
   Colours are var(--token, <fallback>) rather than plain values on purpose. A skin here is a
   whole-stylesheet swap and `standard` defines none of the file-* colours at all, so a rule that
   named a colour outright would be right on four skins and wrong on the fifth. Structure lives
   here; a theme may still override any of these tokens. */

.nct-fu-files { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1rem; }
.nct-fu-files:empty { margin-top: 0; }
/* A collection lays out as a grid of cards; a single attachment gets the full width, because a
   one-item grid still reads as "there could be more". */
.nct-fu-grid > .nct-fu-item { flex: 1 1 260px; max-width: 360px; }
.nct-fu-solo > .nct-fu-item { flex: 1 1 100%; max-width: 100%; }

.nct-fu-item { position: relative; display: flex; align-items: stretch; }

.nct-fu-card {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--comment, var(--bs-border-color, #d7dee5));
    border-radius: 8px;
    background: var(--current-line, var(--bs-tertiary-bg, #f5f7f9));
    color: var(--foreground, var(--bs-body-color, #1a1a1a));
    text-decoration: none;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.nct-fu-card:hover,
.nct-fu-card:focus-visible {
    border-color: var(--cyan, var(--bs-primary, #2f8fd0));
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -10px rgba(0, 0, 0, .55);
}
.nct-fu-card:focus-visible { outline: 2px solid var(--cyan, var(--bs-primary, #2f8fd0)); outline-offset: 2px; }

.nct-fu-figure {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    overflow: hidden;
    background: var(--background, var(--bs-body-bg, #fff));
}
.nct-fu-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.nct-fu-icon { font-size: 22px; line-height: 1; }

.nct-fu-meta { min-width: 0; display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; }
/* The name is the one part that must never wrap the card out of shape. */
.nct-fu-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nct-fu-kind { font-size: 11px; opacity: .7; }
.nct-fu-go { font-size: 13px; opacity: .45; flex: 0 0 auto; }
.nct-fu-card:hover .nct-fu-go { opacity: .9; }

.nct-fu-remove {
    flex: 0 0 auto;
    align-self: center;
    margin-left: 6px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: 1px solid var(--red, var(--bs-danger, #e0483a));
    color: var(--red, var(--bs-danger, #e0483a));
    cursor: pointer;
}
.nct-fu-remove:hover { background: var(--red, var(--bs-danger, #e0483a)); color: #fff; }
.nct-fu-remove:focus-visible { outline: 2px solid var(--red, var(--bs-danger, #e0483a)); outline-offset: 2px; }

/* --- preview overlay ------------------------------------------------------------------- */

body.nct-viewer-open { overflow: hidden; }

.nct-viewer {
    position: fixed;
    inset: 0;
    z-index: 1080; /* above Bootstrap's modal backdrop (1050) so a preview opened from a dialog wins */
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .82);
    padding: 56px 16px 24px;
}
.nct-viewer[hidden] { display: none; }

.nct-viewer-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 48px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 12px;
    color: #fff;
    background: rgba(0, 0, 0, .45);
}
.nct-viewer-title { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nct-viewer-count { font-size: 12px; opacity: .75; flex: 1 1 auto; }
.nct-viewer-actions { display: flex; gap: 6px; flex: 0 0 auto; }

.nct-viewer-btn {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 6px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    cursor: pointer;
    text-decoration: none;
}
.nct-viewer-btn:hover { background: rgba(255, 255, 255, .25); color: #fff; }
.nct-viewer-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.nct-viewer-stage {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Two stacked layers, not one <img>: the outgoing picture has to stay on screen while the
   incoming one travels in, and a single element cannot be in two places at once. */
.nct-viewer-shots {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden; /* a layer on its way out must not spill over the arrows */
}
.nct-viewer-img {
    position: absolute;
    inset: 0;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 4px;
    opacity: 0;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
    will-change: transform, opacity;
    /* Out fast, in slow — the eye follows the arriving picture, not the leaving one. */
    transition: transform .42s cubic-bezier(.22, .61, .36, 1), opacity .28s ease-out;
}
/* Set while a layer is being parked off-stage, so the browser paints that position instead of
   animating towards it. Without it both writes land in one frame and nothing moves. */
.nct-viewer-img.anim-off { transition: none !important; }

/* Shown only while the next picture is still decoding — the stage keeps the current picture
   underneath, so this reads as "loading", never as "gone". */
.nct-viewer-spin {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 34px;
    height: 34px;
    margin: -17px 0 0 -17px;
    border: 3px solid rgba(255, 255, 255, .25);
    border-top-color: #fff;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease .25s; /* a delay: a cached picture must not flash a spinner */
    animation: nct-viewer-spin 0.8s linear infinite;
}
.nct-viewer-shots.is-loading .nct-viewer-spin { opacity: 1; }
@keyframes nct-viewer-spin { to { transform: rotate(360deg); } }

/* The filmstrip: where you are among the pictures, and one click to any of them. */
.nct-viewer.has-strip { padding-bottom: 108px; }
.nct-viewer-strip {
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    max-width: calc(100% - 32px);
    padding: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 10px;
    background: rgba(255, 255, 255, .08);
    scrollbar-width: thin;
}
.nct-viewer-thumb {
    flex: 0 0 auto;
    width: 62px;
    height: 62px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 8px;
    background: rgba(0, 0, 0, .35);
    cursor: pointer;
    overflow: hidden;
    opacity: .55;
    transition: opacity .2s ease, transform .2s ease, border-color .2s ease;
}
.nct-viewer-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nct-viewer-thumb:hover { opacity: .9; transform: translateY(-2px); }
.nct-viewer-thumb.is-active {
    opacity: 1;
    border-color: #fff;
    transform: translateY(-2px);
}
.nct-viewer-thumb:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Motion is decoration here; the viewer works identically without it. */
@media (prefers-reduced-motion: reduce) {
    .nct-viewer-img { transition: none; }
    .nct-viewer-spin { animation: none; }
    .nct-viewer-thumb { transition: none; }
    .nct-viewer-thumb:hover,
    .nct-viewer-thumb.is-active { transform: none; }
}
/* The PDF gets the whole stage: a reader in a letterbox is unreadable. */
.nct-viewer-frame { width: 100%; height: 100%; border: 0; border-radius: 4px; background: #fff; }

/* Shown instead of the frame when the document could not be read — an empty frame tells the
   user nothing, so the viewer offers the tab it can still open. */
.nct-viewer-fallback {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: #fff;
    text-align: center;
}
.nct-viewer-fallback p { margin: 0; font-size: 13px; opacity: .85; }
.nct-viewer-fallback a { width: auto; padding: 0 14px; }

.nct-viewer-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    cursor: pointer;
}
.nct-viewer-nav:hover { background: rgba(255, 255, 255, .28); }
.nct-viewer-nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.nct-viewer-nav.prev { left: 12px; }
.nct-viewer-nav.next { right: 12px; }

@media (max-width: 640px) {
    .nct-viewer { padding: 52px 8px 12px; }
    .nct-viewer.has-strip { padding-bottom: 84px; }
    .nct-viewer-nav { width: 38px; height: 38px; }
    .nct-viewer-thumb { width: 48px; height: 48px; }
    .nct-fu-grid > .nct-fu-item { flex: 1 1 100%; max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .nct-fu-card { transition: none; }
    .nct-fu-card:hover, .nct-fu-card:focus-visible { transform: none; }
}