/* ============================================================
   INCEPTION V16

   - STEP 2 contact Ketua = informational, bukan input ulang
   - dropdown Provinsi / Kota / Sekolah diperbaiki
   - LEFT AUTH TIDAK DISENTUH
   ============================================================ */


/* ============================================================
   STEP 2 - CONTACT KETUA
   ============================================================ */

#inception-register-v50-host
.v15-contact-summary{

    grid-column:
        1 / -1!important;

    width:
        100%!important;

    box-sizing:
        border-box!important;

    margin-top:
        1px!important;

    padding:
        12px
        14px!important;

    border:
        1px solid
        #e0e6f0!important;

    border-radius:
        11px!important;

    background:
        #f8faff!important;
}


#inception-register-v50-host
.v15-contact-summary-head{

    display:flex!important;

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

    gap:
        14px!important;

    margin-bottom:
        10px!important;
}


#inception-register-v50-host
.v15-contact-summary-head
> div{

    display:flex!important;

    align-items:baseline!important;

    gap:
        7px!important;
}


#inception-register-v50-host
.v15-contact-summary-head
span{

    color:
        #38435a!important;

    font-size:
        10.5px!important;

    font-weight:
        800!important;
}


#inception-register-v50-host
.v15-contact-summary-head
small{

    color:
        #9099aa!important;

    font-size:
        9px!important;

    font-weight:
        550!important;
}


#inception-register-v50-host
.v15-contact-summary-head
b{

    padding:
        5px
        8px!important;

    border-radius:
        7px!important;

    background:
        #eef2ff!important;

    color:
        #5c75c4!important;

    font-size:
        8.5px!important;

    line-height:
        1!important;

    font-weight:
        750!important;
}


#inception-register-v50-host
.v15-contact-summary-values{

    display:grid!important;

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

    align-items:center!important;

    gap:
        15px!important;
}


#inception-register-v50-host
.v15-contact-summary-values
> div:not(.v15-contact-divider){

    min-width:
        0!important;

    display:flex!important;

    flex-direction:column!important;

    gap:
        4px!important;
}


#inception-register-v50-host
.v15-contact-summary-values
span{

    color:
        #8a94a7!important;

    font-size:
        8.5px!important;

    font-weight:
        650!important;
}


#inception-register-v50-host
.v15-contact-summary-values
strong{

    display:block!important;

    min-width:
        0!important;

    overflow:
        hidden!important;

    color:
        #344057!important;

    font-size:
        10.5px!important;

    font-weight:
        700!important;

    text-overflow:
        ellipsis!important;

    white-space:
        nowrap!important;
}


#inception-register-v50-host
.v15-contact-divider{

    width:
        1px!important;

    height:
        29px!important;

    background:
        #e2e7ef!important;
}



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


/*
 * Container dropdown tetap floating.
 */

#inception-register-v50-host
.v50-search-menu{

    width:
        100%!important;

    min-width:
        100%!important;

    max-width:
        100%!important;

    max-height:
        218px!important;

    padding:
        6px!important;

    box-sizing:
        border-box!important;

    overflow-x:
        hidden!important;

    overflow-y:
        auto!important;

    border:
        1px solid
        #dce3ed!important;

    border-radius:
        11px!important;

    background:
        #ffffff!important;

    box-shadow:
        0
        14px
        34px
        rgba(39,53,86,.14)!important;
}



/*
 * PENTING:
 *
 * CSS V3 sebelumnya memberi ukuran 30x30 ke seluruh button
 * di dalam .v50-searchable.
 *
 * Karena option juga berupa <button>, option ikut jadi
 * kecil sehingga teks Provinsi/Kota/Sekolah pecah.
 *
 * V16 override button YANG ADA DI DALAM MENU.
 */

#inception-register-v50-host
.inc-ux-province
.v50-search-menu
button,

#inception-register-v50-host
.inc-ux-city
.v50-search-menu
button,

#inception-register-v50-host
.inc-ux-school
.v50-search-menu
button,

#inception-register-v50-host
.v50-search-menu
.v50-menu-item,

#inception-register-v50-host
.v50-search-menu
[role="option"]{

    position:
        relative!important;

    top:
        auto!important;

    right:
        auto!important;

    bottom:
        auto!important;

    left:
        auto!important;

    width:
        100%!important;

    min-width:
        100%!important;

    max-width:
        100%!important;

    height:
        auto!important;

    min-height:
        40px!important;

    display:flex!important;

    align-items:center!important;

    justify-content:
        flex-start!important;

    margin:
        0
        0
        2px!important;

    padding:
        9px
        11px!important;

    box-sizing:
        border-box!important;

    transform:
        none!important;

    border:
        0!important;

    border-radius:
        8px!important;

    background:
        transparent!important;

    color:
        #344057!important;

    box-shadow:
        none!important;

    font-size:
        11.5px!important;

    line-height:
        1.35!important;

    font-weight:
        550!important;

    text-align:
        left!important;

    white-space:
        nowrap!important;

    overflow:
        hidden!important;

    text-overflow:
        ellipsis!important;

    cursor:
        pointer!important;
}



/*
 * Kalau option punya span/div di dalam button,
 * teks juga dipaksa tetap satu baris.
 */

#inception-register-v50-host
.v50-search-menu
button
span,

#inception-register-v50-host
.v50-search-menu
button
div,

#inception-register-v50-host
.v50-search-menu
.v50-menu-item
span{

    min-width:
        0!important;

    max-width:
        100%!important;

    overflow:
        hidden!important;

    text-overflow:
        ellipsis!important;

    white-space:
        nowrap!important;
}



/* HOVER */

#inception-register-v50-host
.v50-search-menu
button:hover,

#inception-register-v50-host
.v50-search-menu
.v50-menu-item:hover,

#inception-register-v50-host
.v50-search-menu
[role="option"]:hover{

    background:
        #f2f5ff!important;

    color:
        #4564bd!important;
}



/* SELECTED */

#inception-register-v50-host
.v50-search-menu
button.active,

#inception-register-v50-host
.v50-search-menu
button.selected,

#inception-register-v50-host
.v50-search-menu
.v50-menu-item.active,

#inception-register-v50-host
.v50-search-menu
.v50-menu-item.selected,

#inception-register-v50-host
.v50-search-menu
[aria-selected="true"]{

    background:
        #edf2ff!important;

    color:
        #3f5fb8!important;

    font-weight:
        700!important;
}



/* SCROLLBAR */

#inception-register-v50-host
.v50-search-menu{

    scrollbar-width:
        thin!important;

    scrollbar-color:
        #c8d0dd
        transparent!important;
}


#inception-register-v50-host
.v50-search-menu::-webkit-scrollbar{

    width:
        6px!important;
}


#inception-register-v50-host
.v50-search-menu::-webkit-scrollbar-track{

    background:
        transparent!important;
}


#inception-register-v50-host
.v50-search-menu::-webkit-scrollbar-thumb{

    border-radius:
        999px!important;

    background:
        #c8d0dd!important;
}



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

@media(max-width:760px){

    #inception-register-v50-host
    .v15-contact-summary-values{

        grid-template-columns:
            1fr!important;

        gap:
            9px!important;
    }


    #inception-register-v50-host
    .v15-contact-divider{

        width:
            100%!important;

        height:
            1px!important;
    }

}