body {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0;

    /*
    display: flex;
    flex-direction: column;
    flex-wrap: none;
    align-items: flex-start;
    */
}

div.page {
    /* width: 100%; */
    /* max-width: 1500px; */
    width: max-content;
    display: flex;
    flex-direction: column;
    align-items: stretch;

    margin-left: auto;
    margin-right: auto;

    gap: 0.5em;
    padding: 0.5em;
}

div.header {
    display: flex;
    width: 100%;
    flex-direction: row;
    align-items: flex-end;

    a {
        margin-right: auto;
        margin-left: auto;
        margin-top: 0.2rem;
        margin-bottom: 0.2rem;
        img {
        }
    }
}

div.menu {
    display: flex;
    width: 100%;
    height: 2em;
}

div.body {
    display: flex;
    /* width: 100%; */
    min-width: 800px;
    flex-grow: 3;
    /* max-width: 1500px; */
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;

    gap: 0.5em;
}

div.body form {
    display: flex;
    max-width: 28em;
}

div h1 {
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 80%;
}

div.search {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;

    padding: 0.2rem;
    padding-left: 0.2em;
    padding-right: 0.2em;


    div.search-group {
        display: flex;
        flex-direction: column;
        gap: 0.2em;

        padding: 0;

        div.filter-scroll {
            display: flex;
            flex-direction: column;

            max-height: 8rem;
            overflow-y: scroll;
            scrollbar-gutter: stable;

            div.filter-group {
                display: flex;
                flex-direction: column;
            }
        }

        div.search-item {
            display: flex;
            flex-direction: row;
            align-items: center;

            .search-radiobox  {
                margin-top 0.1rem;
                margin-bottom: 0.1rem;
            }

            .search-textbox {
                min-width: 6em;
                flex-grow: 2;
                margin-left: 0.2em;
                margin-right: 0.2em;
            }

            .search-textbox:focus {
                outline: none;
            }

            .search-checkbox {
                margin-top: 0.1rem;
                margin-bottom: 0.1rem;
            }

            span {
                margin-left: 0.5ex;
            }
        }

    }

    div.search-group div.search-item:last-child {
        margin-bottom: 0.2em;
    }

}


div.content {
    display: flex;
    flex-direction: column;
    flex-grow: 3;
    gap: 0.2em;

    table {
        flex-grow: 2;
        border-spacing: 0;

        img {
            vertical-align: bottom;
        }

        th {
            line-height: 75%;

            a {
            }
        }
    }

    /* "Preview" display mode, with no table */
    div.search-result {

        display: flex;
        flex-direction: row;
        justify-content: space-between;


        div.hover {
            img {
                height: 100%;
                max-height: 8em;
            }
            img.preview {
                display: block;
                pointer-events: none;
            }

            img.animation {
                display: none;
                pointer-events: none;
            }
        }
        div.hover:hover {
            img.preview {
                display: none;
            }

            img.animation {
                display: block;
            }
        }


        h1 {
            padding: 0.2rem;
        }

        div.links {
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            margin-right: 0.5em;
            margin-left: 0.5em;

            div {
                flex: 0 1 auto;
                /* vertical-align: center; */
                img {
                    display: block;
                }

            }
        }

        div.description {
            flex-grow: 3;
            display: grid;
            grid-template-columns: auto 1fr auto 1fr;
            grid-auto-columns: fit-content(5cm);
            margin-left: 0.3rem;

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

            .label :nth-of-type(2n+0){
                grid-column-start: 1;
                grid-column-end: 1;
            }
            .value :nth-of-type(2n+0){
                grid-column-start: 2;
                grid-column-end: 2;
            }
            .label :nth-of-type(2n+1){
                grid-column-start: 3;
                grid-column-end: 3;
            }
            .value :nth-of-type(2n+1){
                grid-column-start: 4;
                grid-column-end: 4;
            }

            .label.field-archive {
                display: none
            }
            .value.field-archive {
                display: none
            }

            .label.field-repo_path {
                display: none
            }
            .value.field-repo_path {
                display: none
            }

            .label.field-description {
                grid-column-start: 1;
                grid-column-end: 1;
            }
            .value.field-description {
                grid-column-start: 2;
                grid-column-end: 5;
            }
        }
    }
}

div.footer {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 36px;

    justify-content: center;
    align-items: center;

    gap: 1em;

    p {
        display: inline;
        margin: 0;
    }

    a {
        img {
            display: block;
        }
    }

}

div.counter {
    display: inline-flex;
    flex-direction: row;
    flex-grow: 0;
    align-items: stretch;
    width: max-content;
    gap: 1px;

    span.counter-digit {
        padding-left: 0.2rem;
        padding-right: 0.2rem;
        text-align: center;
        vertical-align: middle;
    }
}