.wrap-panel{
    position:relative;
    width:100%;
    height:100%;
    overflow:hidden;
}

.rpanel{
    position:fixed;
    top: 0px;
    left:0px;
    width:100%;
    overflow: auto;
    overflow-x:hidden;
    background:white;
    padding-top:env(safe-area-inset-top);
    height:100vh;
    overflow-y:scroll;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;

    

}

.rpanel-transparent{
    background:transparent !important;
}


.rpanel-depress{
    opacity:0.5;
    transform:scale(0.9);

}

.spanel{
    position:fixed;
    top: 0px;
    left:0px;
    width:100%;
    overflow: auto;
    overflow-x:hidden;
    background:white;
    padding-top:env(safe-area-inset-top);
    height:100vh;
    overflow-y:scroll;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    box-shadow:0px 0px 200px rgba(0,0,0,0.9);
    

}

.spanel.pad,.rpanel.pad{
    padding:4%;
}


.spanel-l1{
    z-index:10;
    background:#ffffff;
}

.spanel-l2{
    z-index:20;
    background:#ffffff;
}

.spanel.bggrey{
    background:#f8f8f8;
}


.spanel-l3{
    z-index:30;
}

.spanel-hide{
    transform: translateX(-200%) !important;
    opacity:0;

}

.spanel-willclose{
}


.push-down-panel{
    width:100%;
    height:100%;
    background:white;
    transition:all 0.3s;
    overflow-y:scroll;
}

.push-down-panel.push-down-panel-hide{
    height:0px;
}