/** PWA **/

.menu {
    /* display: none; */
    position: fixed;
    background-color: #FFF;
    z-index: 101;
    overflow: scroll;
    transition: all 350ms ease;
    -webkit-overflow-scrolling: touch;
}

.menu-box-detached {
    opacity: 0;
}

.menu-active.menu {
    opacity: 1 !important;
    transition: all 350ms ease;
    pointer-events: all !important;
}

.menu-box-bottom {
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: auto;
    transform: translate3d(0, 110%, 0);
}

.menu-box-bottom.menu-active {
    transform: translate3d(0%, 0, 0) !important;
}

.menu-box-bottom.menu-box-detached {
    bottom: 10px;
    left: 10px;
    right: 10px;
    z-index: 10000;
}

.boxed-text-xl, .boxed-text-l, .boxed-text-m, .boxed-text-s {
    display: block;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.boxed-text-xl {
    width: 90%;
    max-width: 340px;
}

.menu-hider {
    position: fixed;
    top: -100px;
    bottom: -100px;
    left: 0px;
    right: 0px;
    background-color: rgba(0, 0, 0, 0.35);
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transition: all 350ms ease;
}

.menu-active {
    opacity: 1 !important;
}

.menu-hider.menu-active {
    transition: all 350ms ease;
    opacity: 1;
    pointer-events: all;
}

.offline-message {
    position: fixed;
    transform: translateY(-200%);
    padding-bottom: 0px;
    text-align: center;
    text-transform: uppercase;
    font-weight: 900;
    transition: all 350ms ease;
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: 9999;
    line-height: 55px;
}

.offline-message-active {
    transform: translateY(0%);
}

.offline-overlay-active {
    position: absolute;
    background-color: #000!important;
    opacity: 0.7;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 1000;
}

.online-message {
    position: fixed;
    transform: translateY(-200%);
    padding-bottom: 0px;
    text-align: center;
    text-transform: uppercase;
    font-weight: 900;
    transition: all 350ms ease;
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: 9999;
    line-height: 55px;
}

.online-message-active {
    transform: translateY(0%);
}