.disable-scroll {
    overflow: hidden;
}

#spz-form {
    input[type="search"] {
        color: #555;
        font-family: Consolas, monospace;
        font-weight: bold;
        letter-spacing: .15em;
        text-align: center;
    }

    p {
        text-align: center;
    }

    p:empty {
        margin-bottom: 0;
    }
}


.layout #menu {
    h2, h3 {
        margin: .75em 0 .25em 0;
    }

    a[aria-current]:not(:hover) {
        text-decoration: underline dotted 1px;
    }
}

@media screen and (max-width: 767px) {
    .layout #menu {
        display: none;
    }

    .layout #menu.active {
        display: block;
        position: fixed;

        z-index: 10;
        bottom: 0;
        left: 0;
        width: 100%;
        max-height: 60vh;
        overflow-y: auto;
        overflow-x: hidden;
        padding: .5rem .5rem 6rem;
        border-top: 1rem solid var(--p-form-element-background-color);
        background: var(--p-form-element-background-color);
        box-shadow: 0 -3px 5px 1px var(--p-secondary-underline);
    }

    #buttons {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        justify-content: center;
        z-index: 11;

        background: var(--p-form-element-background-color);
        border-top: 1px solid var(--p-muted-border-color);

        button {
            //box-shadow: 0 0 5px 1px var(--p-contrast-underline);
        }
    }

    i.menu {
        --url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M16 132h416c8.8 0 16-7.2 16-16V76c0-8.8-7.2-16-16-16H16C7.2 60 0 67.2 0 76v40c0 8.8 7.2 16 16 16zm0 160h416c8.8 0 16-7.2 16-16v-40c0-8.8-7.2-16-16-16H16c-8.8 0-16 7.2-16 16v40c0 8.8 7.2 16 16 16zm0 160h416c8.8 0 16-7.2 16-16v-40c0-8.8-7.2-16-16-16H16c-8.8 0-16 7.2-16 16v40c0 8.8 7.2 16 16 16z'/%3E%3C/svg%3E");
    }
}

@media screen and (min-width: 768px) {
    .layout {
        display: grid;
        grid-template-columns: 250px 2fr;
        gap: 0 2em;
    }

    #buttons {
        display: none;
    }
}

// ------------------------------------------------------------------------------------------------------------------------------------------------------


// month calendar

.month-calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
}

.month-calendar .out {
    color: var(--p-muted-color);
}

.month-calendar .weekend {
    background: var(--p-contrast-inverse);
}


// modify lightbox for vin

.lightbox {
    text-align: center;
}

.lightbox a {
    overflow: hidden;
    text-overflow: ellipsis;
}

.lightbox a > div {
    font-family: Consolas, monospace;
}

.lightbox a > small {
    color: var(--p-secondary);
    white-space: nowrap;
}


// data table

.data-table table tr > * {
    text-align: right;
}

.data-table table tr :nth-child(2) {
    text-align: left;
}

.data-table table .more {
    cursor: pointer;
    text-align: center;
}

.data-table table .more:hover {
    background: var(--p-form-element-border-color);
    border-radius: 4px;
}

.data-table table .more i {
    --url: var(--p-icon-chevron);
}

.data-table table .more.active i {
    transform: rotate(180deg);
    margin-top: -.2em;
}