/* =========================================================
   FLOW EVERMORE LOGIN v1.1.2
   ========================================================= */

html,
body{
    width:100%;
    min-height:100%;
}

body{
    margin:0 !important;
    min-height:100vh !important;

    position:relative !important;

    /*
     * VAŽNO:
     * login i globalni footer više nisu flex-itemi jedan
     * pokraj drugoga.
     */
    display:block !important;

    overflow:hidden;

    color:#fff;

    background:
        linear-gradient(
            90deg,
            rgba(1,8,20,.82) 0%,
            rgba(1,8,20,.68) 24%,
            rgba(1,8,20,.36) 50%,
            rgba(1,8,20,.12) 76%,
            rgba(1,8,20,.18) 100%
        ),
        url('/assets/branding/naslovna.png?v=112')
        center center / cover no-repeat fixed
        !important;
}


/* =========================================================
   LOGIN KARTICA
   ========================================================= */

.card,
body > form{
    position:fixed !important;

    left:50% !important;

    top:50% !important;

    transform:translate(-50%, -50%) !important;

    width:min(
        360px,
        calc(100vw - 40px)
    ) !important;

    margin:0 !important;

    padding:
        20px
        28px
        22px !important;

    box-sizing:border-box;

    border-radius:22px !important;

    background:
        linear-gradient(
            145deg,
            rgba(2,12,27,.72),
            rgba(2,10,22,.58)
        ) !important;

    border:
        1px solid
        rgba(14,165,233,.52)
        !important;

    box-shadow:
        0 18px 55px rgba(0,0,0,.38),
        0 0 24px rgba(14,165,233,.08)
        !important;

    backdrop-filter:
        blur(7px);

    -webkit-backdrop-filter:
        blur(7px);

    text-align:center;

    z-index:20;
}


/* =========================================================
   NOVI FLOW EVERMORE LOGO
   ========================================================= */

.flowever-login-logo{
    display:block;

    width:min(
        250px,
        88%
    );

    height:auto;

    margin:
        -24px auto
        -18px;

    object-fit:contain;

    background:transparent !important;

    border:0 !important;

    border-radius:0 !important;

    box-shadow:none !important;

    filter:
        drop-shadow(
            0 0 16px
            rgba(0,170,255,.18)
        );
}


/*
 * Stari F više nam ne treba.
 */
.logo{
    background:transparent;
}


/* =========================================================
   PODNASLOV
   ========================================================= */

.sub{
    margin:
        2px 0
        20px
        !important;

    color:#9bcdf5 !important;

    font-size:16px !important;

    font-weight:700;

    letter-spacing:.32em !important;
}


/* =========================================================
   INPUTI
   ========================================================= */

input{
    width:100% !important;

    min-height:44px;

    margin:
        8px 0 !important;

    padding:
        0 14px !important;

    box-sizing:border-box;

    border:
        1px solid
        rgba(14,165,233,.88)
        !important;

    border-radius:
        11px !important;

    background:
        rgba(0,5,14,.78)
        !important;

    color:#fff !important;

    outline:none;

    font-size:15px;
}

input::placeholder{
    color:#7d8793;
}

input:focus{
    border-color:#38bdf8 !important;

    box-shadow:
        0 0 0 2px
        rgba(56,189,248,.13),
        0 0 18px
        rgba(56,189,248,.10)
        !important;
}


/* =========================================================
   PRIJAVA
   ========================================================= */

button{
    width:82% !important;

    min-height:42px;

    margin:
        15px auto 0
        !important;

    border:0 !important;

    border-radius:
        11px !important;

    background:
        linear-gradient(
            90deg,
            #078bd0,
            #2869eb
        )
        !important;

    color:#fff !important;

    font-size:14px !important;

    font-weight:900 !important;

    letter-spacing:.03em;

    cursor:pointer;

    box-shadow:
        0 10px 28px
        rgba(37,99,235,.16);
}

button:hover{
    filter:brightness(1.08);
}


/* =========================================================
   ERROR / TIMEOUT
   ========================================================= */

.err{
    margin-top:
        14px !important;

    padding:
        10px 12px;

    border:
        1px solid
        rgba(239,68,68,.62);

    border-radius:
        9px;

    background:
        rgba(105,12,18,.84);

    color:#ffd5d5 !important;

    font-size:13px;

    font-weight:500 !important;

    text-align:center;
}


/* =========================================================
   FOOT UNUTAR LOGIN KARTICE
   ========================================================= */

.foot{
    margin-top:
        20px !important;

    color:#74869a !important;

    font-size:
        12px !important;

    text-align:center;
}


/* =========================================================
   GLOBALNI FLOW FOOTER
   ========================================================= */

.fe-global-footer{
    position:fixed !important;

    left:50% !important;
    right:auto !important;
    bottom:10px !important;

    transform:
        translateX(-50%) !important;

    width:auto !important;

    margin:0 !important;
    padding:5px 12px !important;

    border:0 !important;

    background:
        rgba(1,8,20,.18)
        !important;

    border-radius:999px;

    backdrop-filter:
        blur(3px);

    -webkit-backdrop-filter:
        blur(3px);

    color:
        rgba(148,163,184,.72)
        !important;

    font-size:
        10px !important;

    white-space:nowrap;

    text-align:center;

    text-shadow:
        0 1px 3px
        rgba(0,0,0,.95);

    z-index:30;
}


/* =========================================================
   MANJI EKRANI
   ========================================================= */

@media (max-width:760px){

    body{
        overflow:auto;

        background-position:
            56% center !important;
    }

    .card,
    body > form{
        position:relative !important;

        top:auto !important;
        left:auto !important;

        transform:none !important;

        width:
            calc(100% - 32px)
            !important;

        max-width:
            420px !important;

        margin:
            34px auto
            80px
            !important;

        padding:
            30px 24px
            26px !important;
    }

    .flowever-login-logo{
        width:
            min(
                280px,
                92%
            );
    }
}