/* ============================================================
   BOLEPIX — TOPO EXATO DO CLIENTE V5696AF
   Estrutura real:
   #app > header.top
   #app > .layout > #m3dLoggedSideMenuV16Q.side
   ============================================================ */

html.bp-client-top-exact-v5696af
body
#app {
    position: relative !important;

    min-height: 100vh !important;

    /*
     * O header ficará fixed e sairá do fluxo.
     * Esta reserva impede o conteúdo de ficar atrás dele.
     */
    padding-top:
        var(
            --bp-client-top-height-v5696af,
            58px
        ) !important;
}

html.bp-client-top-exact-v5696af
body
#app
> header.top {
    position: fixed !important;

    top: 0 !important;
    right: 0 !important;
    left: 0 !important;

    z-index: 2147482000 !important;

    width: 100% !important;
    max-width: none !important;

    height:
        var(
            --bp-client-top-height-v5696af,
            58px
        ) !important;

    min-height:
        var(
            --bp-client-top-height-v5696af,
            58px
        ) !important;

    max-height:
        var(
            --bp-client-top-height-v5696af,
            58px
        ) !important;

    margin: 0 !important;

    overflow: visible !important;

    transform: none !important;
    translate: none !important;

    box-sizing: border-box !important;

    box-shadow:
        0 5px 18px rgba(0, 0, 0, .24) !important;
}

/*
 * Impede que logotipo, sino ou nome do cliente sejam cortados.
 */
html.bp-client-top-exact-v5696af
body
#app
> header.top
> * {
    flex-shrink: 0 !important;
}

/*
 * O layout começa depois da reserva feita no #app.
 */
html.bp-client-top-exact-v5696af
body
#app
> .layout {
    min-height:
        calc(
            100vh -
            var(
                --bp-client-top-height-v5696af,
                58px
            )
        ) !important;

    align-items: start !important;
}

/*
 * Menu lateral real do cliente.
 */
html.bp-client-top-exact-v5696af
body
#app
> .layout
> #m3dLoggedSideMenuV16Q.side {
    position: sticky !important;

    top:
        calc(
            var(
                --bp-client-top-height-v5696af,
                58px
            )
            + 8px
        ) !important;

    align-self: start !important;

    max-height:
        calc(
            100vh -
            var(
                --bp-client-top-height-v5696af,
                58px
            )
            - 16px
        ) !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    z-index: 10020 !important;
}

/*
 * Caso exista aviso de cobrança, ele aparece no fluxo abaixo do topo.
 */
html.bp-client-top-exact-v5696af
body
#app
> .billing-lock-banner {
    position: relative !important;
    z-index: 20 !important;
}

/*
 * No celular, a barra continua fixa, mas o menu lateral mantém
 * o comportamento de gaveta já existente no sistema.
 */
@media (max-width: 900px) {
    html.bp-client-top-exact-v5696af
    body
    #app
    > .layout
    > #m3dLoggedSideMenuV16Q.side {
        position: fixed !important;

        top:
            var(
                --bp-client-top-height-v5696af,
                58px
            ) !important;

        max-height:
            calc(
                100vh -
                var(
                    --bp-client-top-height-v5696af,
                    58px
                )
            ) !important;
    }
}