/* =========================================================
   APP FINAL LIMPO
   ========================================================= */

.tutorial-panel[data-panel="app"] .step{
    position:relative !important;
}


/* CARD DA IMAGEM */

.tutorial-panel[data-panel="app"] .step-shot.app-shot{
    position:relative !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    height:300px !important;
    min-height:300px !important;

    padding:14px !important;

    background:#f7f5f2 !important;

    border:1px solid #ddd6cf !important;
    border-radius:18px !important;

    overflow:hidden !important;

    box-shadow:0 12px 28px rgba(8,42,99,.06) !important;
}


/* LIMPA TODOS OS AVATARES, OKs E MASCARAS ANTIGAS */

.tutorial-panel[data-panel="app"] .step-shot.app-shot::after{
    content:none !important;
    display:none !important;
}


/* BARRA SUPERIOR */

.tutorial-panel[data-panel="app"] .step-shot.app-shot::before{
    content:"" !important;

    display:block !important;

    position:absolute !important;

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

    width:auto !important;
    height:4px !important;

    border:0 !important;
    border-radius:0 !important;

    background:#264bbb !important;

    z-index:3 !important;
}


/* IMAGEM */

.tutorial-panel[data-panel="app"] .step-shot.app-shot img{
    display:block !important;

    position:relative !important;

    width:auto !important;
    height:265px !important;

    max-width:100% !important;
    max-height:265px !important;

    object-fit:contain !important;
    object-position:center !important;

    filter:none !important;
    transform:none !important;
    opacity:1 !important;

    background:transparent !important;

    border-radius:10px !important;

    z-index:1 !important;
}


/* ETIQUETA */

.tutorial-panel[data-panel="app"] .shot-label{
    position:absolute !important;

    top:12px !important;
    left:12px !important;

    z-index:10 !important;

    padding:6px 10px !important;

    border-radius:999px !important;

    background:#264bbb !important;
    color:#fff !important;

    font-size:9px !important;
    font-weight:800 !important;

    letter-spacing:.06em !important;
}


/* PASSO 01 */

.tutorial-panel[data-panel="app"] .step:nth-of-type(1) .step-no{
    color:#264bbb !important;
}

.tutorial-panel[data-panel="app"] .step:nth-of-type(1) .step-shot::before{
    background:#264bbb !important;
}


/* PASSO 02 */

.tutorial-panel[data-panel="app"] .step:nth-of-type(2) .step-no{
    color:#f16c76 !important;
}

.tutorial-panel[data-panel="app"] .step:nth-of-type(2) .step-shot::before,
.tutorial-panel[data-panel="app"] .step:nth-of-type(2) .shot-label{
    background:#f16c76 !important;
}


/* PASSO 03 */

.tutorial-panel[data-panel="app"] .step:nth-of-type(3) .step-no{
    color:#7d8ff2 !important;
}

.tutorial-panel[data-panel="app"] .step:nth-of-type(3) .step-shot::before,
.tutorial-panel[data-panel="app"] .step:nth-of-type(3) .shot-label{
    background:#7d8ff2 !important;
}


/* PASSO 04 */

.tutorial-panel[data-panel="app"] .step:nth-of-type(4) .step-no{
    color:#747c8b !important;
}

.tutorial-panel[data-panel="app"] .step:nth-of-type(4) .step-shot::before,
.tutorial-panel[data-panel="app"] .step:nth-of-type(4) .shot-label{
    background:#747c8b !important;
}


/* PASSO 05 */

.tutorial-panel[data-panel="app"] .step:nth-of-type(5) .step-no{
    color:#00a874 !important;
}

.tutorial-panel[data-panel="app"] .step:nth-of-type(5) .step-shot::before,
.tutorial-panel[data-panel="app"] .step:nth-of-type(5) .shot-label{
    background:#00a874 !important;
}


/* MOBILE */

@media(max-width:650px){

    .tutorial-panel[data-panel="app"] .step-shot.app-shot{
        height:280px !important;
        min-height:280px !important;
    }

    .tutorial-panel[data-panel="app"] .step-shot.app-shot img{
        height:245px !important;
        max-height:245px !important;
    }

}