/* Demo instance marker - this file is only loaded when appSetting isDemo=true.
   The body is the scroll container in the helpdesk, so a sticky first child stays on top. */

.jpDemoBanner {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    height: 24px;
    z-index: 1035; /* below modal backdrop (1040) */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    white-space: nowrap;
    background: repeating-linear-gradient(135deg, #f5b400 0, #f5b400 12px, #1f1f1f 12px, #1f1f1f 24px);
    font-family: "Arial", sans-serif;
    font-size: 12px;
    line-height: 16px;
    user-select: none;
    cursor: default;
}

.jpDemoBannerLabel {
    background: #f5b400;
    color: #1f1f1f;
    padding: 2px 14px;
    border-radius: 3px;
    font-weight: bold;
    letter-spacing: 3px;
}

.jpDemoBannerHint {
    margin-left: 10px;
    font-weight: normal;
    letter-spacing: 0;
}

/* Full-screen dialogs (task detail / create, see site.css --browser-height): keep the banner visible
   above them and start the dialog below it. Confirm dialogs stay centered and are not affected. */
body.jpDemoMode .jpDemoBanner {
    z-index: 1055; /* above modal (1050) and backdrop (1040) */
}

body.jpDemoMode .bootbox:not(.bootbox-confirm):not(#restoreDialogBox) {
    top: 24px;
}

body.jpDemoMode .bootbox:not(.bootbox-confirm):not(#restoreDialogBox) .modal-content {
    height: calc(var(--browser-height) - 24px);
    max-height: calc(var(--browser-height) - 24px);
}

body.jpDemoMode .bootbox:not(.bootbox-confirm):not(#restoreDialogBox) .modal-body,
body.jpDemoMode .bootbox:not(.bootbox-confirm):not(#restoreDialogBox) .bootbox-body {
    height: calc(var(--browser-height) - 170px) !important;
}

@media (max-width: 480px) {
    .jpDemoBannerHint {
        display: none;
    }
}

@media print {
    .jpDemoBanner {
        display: none !important;
    }
}