[data-type="forms-viewcomponent"] {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-areas:
        "search search"
        "tag list"
        "tag pager";
    grid-template-columns: 20% 80%;
    gap: 1rem;
}

[data-type="forms-viewcomponent"] .matched {
    color: blue;
}

[data-type="forms-viewcomponent"] > [data-type="forms-search-viewcomponent"] {
    grid-area: search;
    position: fixed;
    top: 0;
    width: calc(100% - 1rem);
    height: 2rem;
    font-size: 1rem;
    padding-left: 2rem;
}

[data-type="forms-viewcomponent"] > [data-type="forms-tag-viewcomponent"] {
    grid-area: tag;
    position: fixed;
    top: 2.5rem;
    left: 0.5rem;
    width: 20%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    cursor: pointer;
}

[data-type="forms-viewcomponent"] > [data-type="forms-list-viewcomponent"] {
    grid-area: list;
    width: calc(100% - 1rem);
    margin-top: 0;
}

[data-type="forms-viewcomponent"] > [data-type="forms-pager-viewcomponent"] {
    grid-area: pager;
    position: fixed;
    bottom: 0;
    width: calc(80% - 1rem);
    background: white;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    margin-top: 0.5rem;
    height: 5rem;
    max-height: 15rem;
}