/* =========================================================
   FERMENTA SALES — BRANDING V1
   Logo oficial
========================================================= */


/* =========================================================
   ICONE — SIDEBARS
========================================================= */

.sidebar-brand .brand-symbol,
.sidebar-brand .logo {
    width: 40px !important;
    height: 40px !important;

    min-width: 40px !important;
    min-height: 40px !important;

    flex:
        0 0 40px !important;

    padding: 0 !important;

    border: 0 !important;

    border-radius:
        11px !important;

    background-color:
        transparent !important;

    background-image:
        url("/uploads/icone-sales.png") !important;

    background-repeat:
        no-repeat !important;

    background-position:
        center !important;

    background-size:
        contain !important;

    color:
        transparent !important;

    font-size:
        0 !important;

    line-height:
        0 !important;

    overflow:
        hidden !important;

    box-shadow:
        none !important;
}


/* =========================================================
   LOADING
========================================================= */

.loading-logo,
#loading .logo,
.loading .logo {
    background-color:
        transparent !important;

    background-image:
        url("/uploads/icone-sales.png") !important;

    background-repeat:
        no-repeat !important;

    background-position:
        center !important;

    background-size:
        contain !important;

    color:
        transparent !important;

    font-size:
        0 !important;

    border:
        0 !important;

    box-shadow:
        none !important;
}


/* =========================================================
   LOGIN PRINCIPAL
   Usa logo completa
========================================================= */

.login-brand .brand-symbol {
    width:
        190px !important;

    height:
        72px !important;

    min-width:
        190px !important;

    flex:
        0 0 190px !important;

    border:
        0 !important;

    border-radius:
        0 !important;

    background-color:
        transparent !important;

    background-image:
        url("/uploads/logo-sales.png") !important;

    background-repeat:
        no-repeat !important;

    background-position:
        left center !important;

    background-size:
        contain !important;

    color:
        transparent !important;

    font-size:
        0 !important;

    box-shadow:
        none !important;
}

.login-brand .brand-symbol + div {
    display:
        none !important;
}

.login-brand {
    align-items:
        center !important;
}


/* =========================================================
   LOGIN ALTERNATIVO / SETTINGS AUTH
========================================================= */

.login-panel .brand .logo {
    width:
        190px !important;

    height:
        72px !important;

    min-width:
        190px !important;

    flex:
        0 0 190px !important;

    border:
        0 !important;

    border-radius:
        0 !important;

    background-color:
        transparent !important;

    background-image:
        url("/uploads/logo-sales.png") !important;

    background-repeat:
        no-repeat !important;

    background-position:
        left center !important;

    background-size:
        contain !important;

    color:
        transparent !important;

    font-size:
        0 !important;

    box-shadow:
        none !important;
}

.login-panel .brand .logo + div {
    display:
        none !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 760px) {

    .sidebar-brand .brand-symbol,
    .sidebar-brand .logo {
        width:
            36px !important;

        height:
            36px !important;

        min-width:
            36px !important;

        min-height:
            36px !important;

        flex:
            0 0 36px !important;
    }

    .login-brand .brand-symbol,
    .login-panel .brand .logo {
        width:
            160px !important;

        min-width:
            160px !important;

        height:
            62px !important;

        flex:
            0 0 160px !important;
    }
}



/* =========================================================
   LOGIN_VIEWPORT_FIT_V1
   Desktop completo sem scroll
========================================================= */

@media (min-width: 851px) {

    #login-view.login-view {
        height:
            100vh !important;

        height:
            100dvh !important;

        min-height:
            0 !important;

        max-height:
            100dvh !important;

        overflow:
            hidden !important;
    }


    #login-view .login-card,
    #login-view .login-visual {
        height:
            100% !important;

        min-height:
            0 !important;

        overflow:
            hidden !important;
    }


    /* =============================================
       COLUNA ESQUERDA
    ============================================= */

    #login-view .login-card {
        display:
            flex !important;

        flex-direction:
            column !important;

        justify-content:
            center !important;

        padding:
            clamp(24px, 3.2vh, 34px)
            clamp(42px, 4.4vw, 68px)
            !important;
    }


    #login-view .login-brand {
        flex:
            0 0 auto;

        margin:
            0
            0
            clamp(18px, 2.6vh, 28px)
            !important;
    }


    /*
     * Logo maior que no print anterior,
     * mas sem roubar altura do formulário.
     */

    #login-view
    .login-brand
    .brand-symbol {
        width:
            230px !important;

        min-width:
            230px !important;

        height:
            74px !important;

        min-height:
            74px !important;

        flex:
            0 0 230px !important;

        background-size:
            contain !important;

        background-position:
            left center !important;
    }


    #login-view .login-copy {
        margin:
            0
            0
            18px
            !important;
    }


    #login-view
    .login-copy
    .eyebrow {
        margin-bottom:
            9px !important;
    }


    #login-view
    .login-copy
    h1 {
        max-width:
            445px !important;

        margin:
            0
            0
            13px
            !important;

        font-size:
            clamp(
                38px,
                3.05vw,
                48px
            )
            !important;

        line-height:
            .99 !important;

        letter-spacing:
            -.045em !important;
    }


    #login-view
    .login-copy
    p {
        max-width:
            430px !important;

        margin:
            0 !important;

        font-size:
            14px !important;

        line-height:
            1.45 !important;
    }


    /* =============================================
       FORMULARIO
    ============================================= */

    #login-view
    #login-form {
        gap:
            11px !important;
    }


    #login-view
    #login-form
    label {
        gap:
            6px !important;

        font-size:
            11.5px !important;
    }


    #login-view
    #login-form
    input {
        height:
            42px !important;

        min-height:
            42px !important;
    }


    #login-view
    #login-button {
        height:
            43px !important;

        min-height:
            43px !important;
    }


    #login-view
    .login-security {
        margin-top:
            11px !important;

        font-size:
            10px !important;

        line-height:
            1.35 !important;
    }


    /* =============================================
       COLUNA DIREITA
    ============================================= */

    #login-view
    .login-visual {
        display:
            flex !important;

        align-items:
            center !important;

        padding:
            clamp(
                46px,
                5.5vw,
                82px
            )
            !important;
    }


    #login-view
    .login-visual
    h2 {
        margin:
            0
            0
            16px
            !important;

        font-size:
            clamp(
                40px,
                4vw,
                58px
            )
            !important;

        line-height:
            1 !important;

        letter-spacing:
            -.045em !important;
    }


    #login-view
    .login-visual
    p {
        margin:
            0 !important;

        font-size:
            15px !important;

        line-height:
            1.5 !important;
    }
}


/* =========================================================
   NOTEBOOKS COM MENOS ALTURA
========================================================= */

@media
    (min-width: 851px)
    and
    (max-height: 720px) {

    #login-view
    .login-card {
        padding:
            18px
            56px
            !important;
    }


    #login-view
    .login-brand {
        margin-bottom:
            13px !important;
    }


    #login-view
    .login-brand
    .brand-symbol {
        width:
            205px !important;

        min-width:
            205px !important;

        height:
            62px !important;

        min-height:
            62px !important;

        flex:
            0 0 205px !important;
    }


    #login-view
    .login-copy {
        margin-bottom:
            13px !important;
    }


    #login-view
    .login-copy
    h1 {
        margin-bottom:
            9px !important;

        font-size:
            39px !important;

        line-height:
            .98 !important;
    }


    #login-view
    .login-copy
    p {
        font-size:
            12.5px !important;

        line-height:
            1.4 !important;
    }


    #login-view
    #login-form {
        gap:
            8px !important;
    }


    #login-view
    #login-form
    input {
        height:
            39px !important;

        min-height:
            39px !important;
    }


    #login-view
    #login-button {
        height:
            40px !important;

        min-height:
            40px !important;
    }


    #login-view
    .login-security {
        margin-top:
            8px !important;

        font-size:
            9.5px !important;
    }


    #login-view
    .login-visual
    h2 {
        font-size:
            46px !important;
    }
}


/* =========================================================
   MOBILE
   Pode rolar naturalmente.
========================================================= */

@media (max-width: 850px) {

    #login-view.login-view {
        height:
            auto !important;

        max-height:
            none !important;

        min-height:
            100dvh !important;

        overflow:
            visible !important;
    }


    #login-view
    .login-card {
        height:
            auto !important;

        min-height:
            100dvh !important;

        overflow:
            visible !important;
    }


    #login-view
    .login-brand
    .brand-symbol {
        width:
            210px !important;

        min-width:
            210px !important;

        height:
            76px !important;

        min-height:
            76px !important;

        flex:
            0 0 210px !important;
    }
}