._comp_menupanel {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 101;

    visibility: collapse;
}

._comp_menupanel .panelClose {
    background-color: rgba(0, 0, 0, 0.3);
    height: 100%;
}

._comp_menupanel .panel {

    z-index: 102;

    position: absolute;
    background-color: var(--crush40-gray);
    width: 100%;
    height: 400px;
    bottom: 0;

    box-shadow: 0 -2px 1px rgba(0, 0, 0, 0.2);

    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "titlebar"
        "cont";
}

._comp_menupanel .panel .contents {
    grid-area: cont;

    width: 100%;
    height: 100%;
    border: none;
}

._comp_menupanel .panel .page {
    width: 100%;
    height: 100%;
}

._comp_menupanel .panel .titlebar {
    grid-area: titlebar;
    color: black;

    padding: 0;
    background-color: var(--crush40-red);

    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "back title close";
}

._comp_menupanel .panel .titlebar .title {
    font-weight: 700;
    font-size: 125%;
    margin: 0;
    padding: 20px;
}

._comp_menupanel .panel .titlebar .back {
    grid-area: back;
}

._comp_menupanel .panel .titlebar .close {
    grid-area: close;
}

._comp_menupanel .panel .titlebar .hiddenBack {
    position: absolute;
    visibility: collapse;
}

._comp_menupanel .panel .titlebar .iconButton {
    height: 64px;
}

._comp_menupanel .panel .titlebar .close:hover, ._comp_menupanel .panel .titlebar .back:hover {
    background-color: rgba(0, 0, 0, 0.2);
}