/* ============================================================
   INCEPTION REGISTER FINAL UI V1B
   MOCKUP APPROVED
   ============================================================ */


/* ============================================================
   DESKTOP
   ============================================================ */

@media (min-width:761px){


    body.inception-register-v50-active{
        margin:0!important;
        padding:0!important;

        width:100vw!important;
        height:100vh!important;

        overflow:hidden!important;
    }


    #inception-register-v50-host{
        position:fixed!important;

        inset:0!important;

        width:100vw!important;
        height:100vh!important;

        overflow:hidden!important;
    }


    /* ========================================================
       LEFT 50%
       ======================================================== */

    #inception-register-v50-host
    .v50-auth-brand{

        position:fixed!important;

        top:0!important;
        bottom:0!important;
        left:0!important;

        width:50vw!important;
        height:100vh!important;

        min-width:50vw!important;
        max-width:50vw!important;

        min-height:100vh!important;
        max-height:100vh!important;

        display:block!important;

        overflow:hidden!important;

        background:
            linear-gradient(
                135deg,
                #2142ad 0%,
                #2e65bf 100%
            )!important;
    }


    #inception-register-v50-host
    .v50-brand-inner{
        position:static!important;

        width:100%!important;
        height:100%!important;

        margin:0!important;
        padding:0!important;

        display:block!important;

        transform:none!important;

        text-align:center!important;
    }


    /* Logo */
    #inception-register-v50-host
    .v50-brand-logo{
        position:absolute!important;

        top:31.5%!important;
        left:50%!important;

        width:90px!important;
        height:90px!important;

        margin:0!important;

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

        background:none!important;
        border:0!important;
        box-shadow:none!important;
    }


    #inception-register-v50-host
    .v50-big-logo{
        width:90px!important;
        height:90px!important;

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

        max-width:90px!important;
        max-height:90px!important;

        margin:0!important;

        object-fit:contain!important;
    }


    /* INCEPTION VOL. 2 */
    #inception-register-v50-host
    .v50-brand-inner > small{
        position:absolute!important;

        top:45.8%!important;
        left:0!important;

        width:100%!important;

        margin:0!important;

        color:
            rgba(
                255,
                255,
                255,
                .9
            )!important;

        font-size:11px!important;
        line-height:1!important;

        font-weight:800!important;

        letter-spacing:.18em!important;

        text-align:center!important;
    }


    /* Welcome */
    #inception-register-v50-host
    .v50-brand-inner h2{
        position:absolute!important;

        top:49.5%!important;
        left:50%!important;

        width:470px!important;
        max-width:72%!important;

        margin:0!important;

        transform:
            translateX(
                -50%
            )!important;

        color:#fff!important;

        font-size:58px!important;
        line-height:1.02!important;

        font-weight:800!important;

        letter-spacing:
            -.045em!important;

        text-align:center!important;
    }


    #inception-register-v50-host
    .v50-brand-inner p{
        position:absolute!important;

        top:65.5%!important;
        left:50%!important;

        width:320px!important;
        max-width:68%!important;

        margin:0!important;

        transform:
            translateX(
                -50%
            )!important;

        color:
            rgba(
                255,
                255,
                255,
                .92
            )!important;

        font-size:14px!important;
        line-height:1.72!important;

        font-weight:500!important;

        text-align:center!important;
    }


    #inception-register-v50-host
    .v50-brand-line{
        position:absolute!important;

        top:76.2%!important;
        left:50%!important;

        width:76px!important;
        height:3px!important;

        margin:0!important;

        transform:
            translateX(
                -50%
            )!important;

        border-radius:999px!important;

        background:
            linear-gradient(
                90deg,
                #91bcff 0 50%,
                #ff8b82 50% 100%
            )!important;
    }



    /* ========================================================
       RIGHT 50%
       ======================================================== */

    #inception-register-v50-host
    .v50-auth-form{

        position:fixed!important;

        top:0!important;
        right:0!important;
        bottom:0!important;
        left:50vw!important;

        width:50vw!important;
        height:100vh!important;

        min-width:50vw!important;
        max-width:50vw!important;

        margin:0!important;

        padding:
            30px
            46px!important;

        display:flex!important;

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

        box-sizing:border-box!important;

        overflow:hidden!important;

        background:
            linear-gradient(
                135deg,
                #d94f50 0%,
                #ef6b60 100%
            )!important;
    }



    /* ========================================================
       ONE WHITE CARD
       ======================================================== */

    #inception-register-v50-host
    .inc-final-shell{

        width:
            min(
                720px,
                calc(50vw - 92px)
            )!important;

        max-width:
            min(
                720px,
                calc(50vw - 92px)
            )!important;

        height:auto!important;

        max-height:
            calc(
                100vh - 58px
            )!important;

        min-width:0!important;

        margin:auto!important;

        padding:
            25px
            28px
            24px!important;

        box-sizing:border-box!important;

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

        scrollbar-width:none!important;

        border:
            1px solid
            rgba(
                255,
                255,
                255,
                .82
            )!important;

        border-radius:24px!important;

        background:#fff!important;

        box-shadow:
            0
            22px
            52px
            rgba(
                77,
                39,
                47,
                .17
            )!important;
    }


    #inception-register-v50-host
    .inc-final-shell::-webkit-scrollbar{
        display:none!important;
    }


    /* hilangkan card dalam card */
    #inception-register-v50-host
    .inc-final-inner-card{

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

        height:auto!important;
        max-height:none!important;

        min-height:0!important;

        margin:
            20px
            0
            0!important;

        padding:0!important;

        overflow:visible!important;

        border:0!important;

        border-radius:0!important;

        background:
            transparent!important;

        box-shadow:
            none!important;
    }



    /* ========================================================
       HAPUS:
       PENDAFTARAN PESERTA
       DAFTAR TIM
       DESCRIPTION
       ======================================================== */

    #inception-register-v50-host
    .inc-final-hidden{
        display:none!important;
    }



    /* ========================================================
       BACK BUTTON
       ======================================================== */

    #inception-register-v50-host
    .inc-final-back{

        min-height:36px!important;

        display:inline-flex!important;

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

        margin:0!important;

        padding:
            0
            13px!important;

        border:
            1px solid
            #dce3ef!important;

        border-radius:10px!important;

        background:#fff!important;

        color:#4168cb!important;

        font-size:10px!important;

        font-weight:750!important;

        text-decoration:none!important;

        box-shadow:none!important;
    }



    /* ========================================================
       STEPPER
       ======================================================== */

    #inception-register-v50-host
    .inc-final-stepper{

        width:100%!important;

        display:grid!important;

        grid-template-columns:
            repeat(
                3,
                minmax(0,1fr)
            )!important;

        gap:10px!important;

        margin:
            27px
            0
            0!important;

        padding:0!important;
    }


    #inception-register-v50-host
    .inc-final-stepper
    > *{

        min-width:0!important;

        height:48px!important;

        display:flex!important;

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

        padding:
            0
            10px!important;

        box-sizing:border-box!important;

        border:
            1px solid
            #d9e0ec!important;

        border-radius:11px!important;

        background:#fff!important;

        color:#7a8397!important;

        font-size:10px!important;

        font-weight:750!important;

        text-align:center!important;

        box-shadow:none!important;
    }


    #inception-register-v50-host
    .inc-final-stepper
    > .active,

    #inception-register-v50-host
    .inc-final-stepper
    > [aria-current="step"]{

        border-color:
            transparent!important;

        color:#fff!important;

        background:
            linear-gradient(
                90deg,
                #416fd8 0%,
                #7778c1 48%,
                #f46b61 100%
            )!important;
    }



    /* ========================================================
       STEP 1 = 2 KOLOM x 4 BARIS
       ======================================================== */

    #inception-register-v50-host
    .inc-final-step1
    .inc-final-grid{

        width:100%!important;

        display:grid!important;

        grid-template-columns:
            minmax(0,1fr)
            minmax(0,1fr)!important;

        gap:
            15px
            18px!important;

        margin:0!important;

        padding:0!important;
    }


    #inception-register-v50-host
    .inc-final-step1-field{

        width:100%!important;
        min-width:0!important;

        grid-column:auto!important;

        order:
            var(
                --inc-order
            )!important;

        margin:0!important;
    }


    #inception-register-v50-host
    .inc-field-school{

        grid-column:auto!important;
    }



    /* ========================================================
       LABELS
       SATU WARNA
       ======================================================== */

    #inception-register-v50-host
    .inc-final-step1-field
    > span,

    #inception-register-v50-host
    .inc-final-step1-field
    .v50-label{

        display:block!important;

        margin:
            0
            0
            7px!important;

        color:#354058!important;

        font-size:11px!important;

        line-height:1.2!important;

        font-weight:750!important;
    }



    /* ========================================================
       INPUT
       ======================================================== */

    #inception-register-v50-host
    .inc-final-step1-field
    input:not([type="checkbox"]),

    #inception-register-v50-host
    .inc-final-step1-field
    select,

    #inception-register-v50-host
    .inc-final-step1-field
    textarea{

        width:100%!important;

        min-width:0!important;

        height:50px!important;

        min-height:50px!important;

        box-sizing:border-box!important;

        padding:
            0
            14px!important;

        border:
            1px solid
            #d9e0ea!important;

        border-radius:11px!important;

        background:
            #fbfcff!important;

        color:#253149!important;

        font-size:12px!important;

        font-weight:600!important;

        box-shadow:none!important;

        outline:none!important;
    }


    #inception-register-v50-host
    .inc-final-step1-field
    input::placeholder{

        color:#9ba4b6!important;

        opacity:1!important;
    }


    #inception-register-v50-host
    .inc-final-step1-field
    input:focus,

    #inception-register-v50-host
    .inc-final-step1-field
    select:focus{

        border-color:
            #7590da!important;

        background:#fff!important;

        box-shadow:
            0
            0
            0
            3px
            rgba(
                82,
                111,
                196,
                .09
            )!important;
    }



    /* ========================================================
       DROPDOWN
       ======================================================== */

    #inception-register-v50-host
    .inc-final-step1-field
    .v50-searchable{

        position:relative!important;

        width:100%!important;
    }


    #inception-register-v50-host
    .inc-final-step1-field
    .v50-search-menu{

        z-index:30000!important;

        width:100%!important;

        border:
            1px solid
            #d9e0ea!important;

        border-radius:11px!important;

        background:#fff!important;

        box-shadow:
            0
            14px
            32px
            rgba(
                38,
                52,
                83,
                .13
            )!important;
    }



    /* ========================================================
       ACTION BUTTON
       ======================================================== */

    #inception-register-v50-host
    .inc-final-actions{

        width:100%!important;

        display:flex!important;

        align-items:center!important;

        justify-content:flex-end!important;

        margin:
            20px
            0
            0!important;

        padding:
            20px
            0
            0!important;

        border-top:
            1px solid
            #edf0f5!important;
    }


    #inception-register-v50-host
    .inc-final-next{

        width:auto!important;

        min-width:210px!important;

        height:48px!important;

        min-height:48px!important;

        margin:0!important;

        padding:
            0
            20px!important;

        border:0!important;

        border-radius:10px!important;

        color:#fff!important;

        background:
            linear-gradient(
                90deg,
                #416fd8 0%,
                #7778c1 47%,
                #f46b61 100%
            )!important;

        font-size:11px!important;

        font-weight:750!important;

        box-shadow:
            0
            9px
            20px
            rgba(
                65,
                111,
                216,
                .14
            )!important;
    }

}



/* ============================================================
   VIEWPORT PENDEK
   ============================================================ */

@media
(min-width:761px)
and
(max-height:820px){

    #inception-register-v50-host
    .inc-final-shell{

        max-height:
            calc(
                100vh - 34px
            )!important;

        padding:
            19px
            24px!important;
    }


    #inception-register-v50-host
    .inc-final-stepper{

        margin-top:
            19px!important;
    }


    #inception-register-v50-host
    .inc-final-step1
    .inc-final-grid{

        gap:
            10px
            16px!important;
    }


    #inception-register-v50-host
    .inc-final-step1-field
    input:not([type="checkbox"]),

    #inception-register-v50-host
    .inc-final-step1-field
    select{

        height:44px!important;
        min-height:44px!important;
    }


    #inception-register-v50-host
    .inc-final-actions{

        margin-top:
            12px!important;

        padding-top:
            12px!important;
    }


    #inception-register-v50-host
    .inc-final-next{

        height:44px!important;
        min-height:44px!important;
    }

}



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

@media (max-width:760px){

    #inception-register-v50-host
    .v50-auth-brand{
        display:none!important;
    }


    #inception-register-v50-host
    .v50-auth-form{

        position:relative!important;

        inset:auto!important;

        width:100%!important;
        height:auto!important;

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

        min-height:100vh!important;
        max-height:none!important;

        padding:14px!important;

        overflow:visible!important;

        background:#fff!important;
    }


    #inception-register-v50-host
    .inc-final-shell{

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

        height:auto!important;
        max-height:none!important;

        margin:0!important;

        padding:
            18px
            15px!important;

        border:0!important;

        border-radius:0!important;

        background:#fff!important;

        box-shadow:none!important;

        overflow:visible!important;
    }


    #inception-register-v50-host
    .inc-final-stepper{

        grid-template-columns:
            repeat(
                3,
                minmax(0,1fr)
            )!important;

        gap:6px!important;

        margin-top:
            18px!important;
    }


    #inception-register-v50-host
    .inc-final-stepper
    > *{

        height:auto!important;

        min-height:44px!important;

        padding:
            7px
            5px!important;

        font-size:9px!important;

        line-height:1.25!important;
    }


    #inception-register-v50-host
    .inc-final-step1
    .inc-final-grid{

        grid-template-columns:
            1fr!important;

        gap:14px!important;
    }


    #inception-register-v50-host
    .inc-final-step1-field{

        grid-column:1!important;
    }


    #inception-register-v50-host
    .inc-final-next{

        width:100%!important;
        min-width:0!important;
    }

}