@media (pointer: fine) {
    li button.star.on:hover::before,
    li button.star.off:hover::before {
        color: var(--light-base);
        -webkit-text-fill-color: var(--light-base);
    }

    li:hover          { background-color: var(--soft-white-dark); }
    li.favorite:hover { background-color: var(--white-base-dark); }

    #filters {
        margin-left: 60px;
    }
}

@media (max-width: 768px) {
    :root {
        --app-width: calc(100% - 30px);
    }

    body {
        max-width: 100%;
        margin: 0px;
        padding: 0px;
        border: 0px;
        overflow-x: hidden;
    }

    #app {
        width: var(--app-width);
        height: calc(100vh - 15px);
        padding: 15px;
        padding-bottom: 0px;
        margin: 0px;
        border-radius: 0px;
    }

    li {
        height: 50px;
    }

    #menu::before {
        left: -15px;
        right: -15px;
    }

    #menu select,
    #menu button {
        font-size: 14px;
        padding: 8px;
    }

    #progress {
        width: 80px !important;
    }

    .spaces {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin-bottom: 10px;
        margin-right: 10px;
        align-items: center;
    }

    .available_places {
        order: 1;
        padding-left: 0;
    }

    .places {
        margin: 0px;
    }

    #progress {
        order: 2;
        width: 160px !important;
    }

    .name {
        width: 160px;
        overflow-wrap: anywhere;
    }

    #popup.show .content {
        top: 25%;
    }

    #popup.show .content,
    #popup:not(.show) .content {
        left: calc(100vw / 2 - var(--width) / 2);
    }

}