/* Floating frontend header bar — shared by login and demo pages. */
.frontend-floating-header #header-bar {
    position: absolute;
    top: 24px;
    left: 50%;
    width: min(1320px, calc(100% - 56px));
    margin: 0;
    transform: translateX(-50%);
}

.login-page.frontend-floating-header #header-bar {
    z-index: 3;
}

.demo-page.frontend-floating-header #header-bar {
    z-index: 10;
}

@media (min-width: 821px) and (max-height: 800px) {
    .login-page.frontend-floating-header #header-bar {
        top: 16px;
    }
}

@media (max-width: 820px) {
    .frontend-floating-header #header-bar {
        top: 12px;
        left: 12px;
        width: calc(100% - 24px);
        transform: none;
    }

    .frontend-floating-header .header-bar-logo {
        scale: 2.4;
    }
}

@media (max-width: 560px) {
    .frontend-floating-header .header-bar-separator,
    .frontend-floating-header .header-bar-sub-title {
        display: none;
    }
}