html {
    background : #fff !important;
}
.overlay {
    position: fixed; /* Sit on top of the page content */
    display: block; /* Hidden by default */
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
}
.fill-available {
    height : 100%;
    height: -webkit-fill-available;
}
.overlay-translucent {
    background-color: rgba(0,0,0,0.5);    
}
.overlay-white {
    background-color: rgba(255, 255, 255,0.7);    
}

@media (max-width: 30em) {
    .overlay-translucent {
        background-color: rgba(255, 255, 255);    
    }
}