.listview {
    border: 1px solid rgba(0,0,0,.125);
    border-radius: 0.25rem;
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
}

    .listview .listview-header {
        padding: 1rem;
        border-bottom-color: inherit;
        border-bottom-width: 1px;
        border-bottom-style: solid;
    }

    .listview.is-vertical .listview-body {
        display: block;
    }

    .listview .listview-body {
        padding: 1rem 0 0 1rem;
        position: relative;
        overflow: auto;
        display: flex;
        flex-flow: row wrap;
        flex: 1;
    }

        .listview .listview-body .listview-item {
            margin: 0 1rem 1rem 0;
        }

            .listview .listview-body .listview-item:hover .card {
                cursor: pointer;
                border: 1px solid #409eff;
            }

            .listview .listview-body .listview-item .card {
                box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
            }

        .listview .listview-body .listview-item-group {
            flex-basis: 100%;
            margin: 1rem 0;
            font-weight: bold;
            position: relative;
        }

            .listview .listview-body .listview-item-group:after {
                content: "";
                position: absolute;
                top: calc(-50%);
                left: -1rem;
                right: 0;
                background-color: rgba(0,0,0,.1);
                height: calc(200%);
            }

    .listview .listview-footer {
        padding: 1rem;
        border-top-color: inherit;
        border-top-width: 1px;
        border-top-style: solid;
    }
