.pagePanels {
    display: grid;

    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 0px;

    width: 100%;
    height: 100%;

    .panel {
        position: sticky;
        top: 0;

        height: fit-content;

        display: flex;
        flex-direction: column;

        align-items: center;

        gap: 20px;

        overflow: hidden;

        &.full {
            height: 100%;
        }

        &.left {
            .card {
                background-color: var(--background-color-accent);

                .ant-menu {
                    .ant-menu-item-selected {
                        background-color: var(--background-color-primary) !important;
                    }

                    .ant-menu-item-disabled {
                        .ant-menu-title-content {
                            svg {
                                color: var(--disabled-color) !important;
                            }

                            color: var(--disabled-color) !important;
                        }
                    }
                }
            }
        }
    }

    .card {
        display: flex;
        flex-direction: column;

        background-color: var(--background-color-accent);
        border-radius: 12px;
        padding: 20px;

        width: 20vw;
        min-width: 250px;

        isolation: isolate;

        h1,
        h2 {
            width: fit-content;
            margin: 0;
        }

        &.header {
            position: relative;

            display: flex;
            flex-direction: row;

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

            width: 100%;

            margin-bottom: 10px;

            z-index: 50;

            -webkit-box-shadow: 0 0 0 1px rgba(63, 63, 68, 0.05), 0 1px 3px 0 var(--shadow-color);
            -moz-box-shadow: 0 0 0 1px rgba(63, 63, 68, 0.05), 0 1px 3px 0 var(--shadow-color);
            box-shadow: 0 0 0 1px rgba(63, 63, 68, 0.05), 0 1px 3px 0 var(--shadow-color);
        }

        &.content {
            position: relative;

            transform: translateY(-30px);
            padding-top: 35px;

            z-index: 45;
        }
    }

    &.card:last-child {
        margin-bottom: 0;
    }
}