.box {
    margin-bottom: 1rem;
    background-color: var(--white-light);
    border-radius: .5em;
    padding: .5em;
    border: 1px solid var(--primary-color-hover);
    /*box-shadow: 0 0 1em .4em var(--gray-200);*/
}

.header {
    padding-top: 1em;
    font-weight: bold;
}

.header .btn {
    margin-top: -.5em;
}

.page {
    height: 100%;
    display: grid;
    overflow: hidden;
    grid-template:
            "content form" 100%
            / auto min(17em, 0%);
}

.side-by-side {
    display: grid;
    overflow: hidden;
    grid-template:
            "X Y" 100%
            / calc(50% - .5em) calc(50% - .5em);
    grid-gap: 1em;
}

.page>.form {
    padding: 1em;
    grid-area: form;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 2;
    /*box-shadow: .75rem 0 1rem 1rem var(--gray-400);*/
}

.page>.area {
    padding: 1em;
    grid-area: content;

    /*overflow: visible;*/
}

.area {
    max-height: 100%;
    display: grid;
    grid-template:
            "header" fit-content(100%)
            "menu" fit-content(100%)
            "content" auto
            / 100%;
}

.area>.page {
    grid-area: content;
}

.area>.item {
    grid-area: header;
}

.area>.side-by-side {
    grid-area: content;
}

.side-by-side>area {
    padding: 1em;
    grid-area: content;
    overflow: hidden;
}


.area>.header {
    grid-area: header;
    padding-left: 1em;
}

.area>.filter {
    grid-area: menu;
}

.area>.page-menu {
    grid-area: menu;
}

.area>.list {
    grid-area: content;
}

.list,.item {
    overflow-x: hidden;
    overflow-y: auto;
}

.page-menu {
    margin-bottom: -1px;
}

.page-menu .page-item {
    padding: .5em;
    border-right: 1px solid var(--gray-light);
}

.page-menu .page-item:hover {
    /*color: var(--gray-700);*/
    background-color: var(--gray-dark);
}

.page-menu .page-item.current {
    background-color: var(--secundary-color);
}