/* *POP UP */
/* =============================================== */

/* POP Left */
[data-animasi="left"] {
    width: 250px;
    height: 100vh;
    top: 0;
    left: 0;
    left: -250px;
    position: fixed;
    transition: 0.2s all ease;
    z-index: 10004;
    display: none;
    display: block;

    background: #fff;
}


/*  Modal Bottom */
[data-animasi="bottom"] {
    width: 100%;
    height: auto;
    max-height: 455px;
    bottom: 0;
    bottom: -65vh;
    position: fixed;
    transition: 0.2s all ease;
    z-index: 10004;
    display: none;
    display: block;
    border-radius: 20px 20px 0 0;
    
    background: #fff;
}

@media (min-width: 576px) {
    [data-animasi="bottom"] {
        width: 300px;
        height: 0;
        height: auto;
        max-height: 455px;
        left: 50%;
        top: 300%;
        position: fixed;
        transition: 0.3s all ease;
        z-index: 10004;
        padding: auto;
        bottom: unset !important;

        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);

        border-radius: 20px;
        background: #fff;
    }
}

/* Modal Center */
[data-animasi="center"] {
    width: 300px;
    height: 0;
    height: auto;
    max-height: 455px;
    left: 50%;
    top: 300%;
    position: fixed;
    transition: 0.3s all ease;
    z-index: 10004;
    padding: auto;

    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

    border-radius: 20px;
    background: #fff;
}


/* Modal Full */
[data-animasi="full"] {
    display:none;
    width: 100%;
    height: 0;
    height: auto;
    max-height: 455px;
    left: 50%;
    top: 50%;
    position: fixed;
    transition: 0.3s all ease;
    z-index: 10004;
    padding: auto;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border-radius: 25px;
    background: #fff;
}


/* *Background POP */
.bg-hitam{
    position: fixed;
    background: rgba(2, 2, 2, .9);
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    display:none;
    z-index: 10004;
}


/* *POP Material */
.box-dash-pop-menu-title{
    width: 100%;
    height: 62px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    font-size: 18px;
    font-family: 'dash-bold';
    line-height: 100%;
    border-bottom: 1px solid #E9ECFC;
    /* background-color: antiquewhite; */
}

.dash-pop-scroll-left{
    width: 100%;
    height: 100%;
    padding: 0 24px;
    padding-top: 22px;
    padding-bottom: 175px;
    /* background-color: aquamarine; */
    overflow: scroll;
    position: relative;
}

.dash-pop-scroll-left::-webkit-scrollbar {
    display: none;
}

.dash-pop-scroll-bottom{
    width: 100%;
    height: 100%;
    padding: 0 24px;
    padding-top: 20px;
    /* padding-bottom: 24px; */
    max-height: 393px;
    overflow: scroll;
    padding-bottom: 20px;
}

.dash-pop-scroll-bottom::-webkit-scrollbar {
    display: none;
}

.dash-pop-scroll-center{
    width: 100%;
    height: 100%;
    padding: 0 24px;
    padding-top: 22px;
    padding-bottom: 24px;
    max-height: 393px;
    overflow: scroll;
}

.dash-pop-scroll-center::-webkit-scrollbar {
    display: none;
}


/* *bg-modal */
.dash-bg-modal{
    position: relative;
}


/* *Keypad */
.dash-pin-keypad{
    width: 100%;
    height: auto;
    min-height: 50px;
    display: block;
    margin-top: 2px;
}

.dash-pin-keypad-list{
    display: flex;
    align-items: center;
}

.dash-pin-keypad-flex{
    height: 60px;
    flex: 100%;
    display: grid;
    align-items: center;
    text-align: center;
    font-size: 24px;
    margin: 2px;
}