.drawer{
    position: fixed;
    max-width: 100%;
    z-index: 1000;
    background-color: white;
    transition: 0.3s ease-in-out;
    animation-duration:  0.3s ;
}
.drawer_overlay{
    z-index: 10000;
    background-color:rgb(46, 46, 46,0.7);
}





@keyframes bottomSlide {
    from{
        opacity: 0;
        bottom: -100%;
    }
    to{
        opacity: 1;
        bottom: 0;
    }
}

@keyframes rightSlide {
    from{
        opacity: 0;
        right: -100%;
    }
    to{
        opacity: 1;
        right: 0;
    }
}

@keyframes leftSlide {
    from{
        opacity: 0;
        left: -100%;
    }
    to{
        opacity: 1;
        left: 0;
    }
}

@keyframes topSlide {
    from{
        opacity: 0;
        top: -100%;
    }
    to{
        opacity: 1;
        top: 0;
    }
}