.frame_container.market {
    display: grid;
    grid-template:
        [content-start] "params_controls charts" [content-end]
        / 13rem 1fr;

    > * {
    }

    h3 {
        margin: 0px;
        font-size: 1rem;
    }

    .params_controls {
        grid-area: params_controls;

        padding-left: var(--page_content_margin);
        padding-right: var(--page_content_margin);
        background-color: var(--c_gray5);
        padding-top: var(--panel_content_margin);
        padding-bottom: var(--panel_content_margin);

        .param_panel {
            &:not(:first-child) {
                padding-top: var(--panel_content_margin);
            }

            input {
                width: 100%;
                color: var(--c_gray1);
                background-color: var(--c_gray4);
                border: 1px solid var(--c_gray3);
            }

            select {
                margin-top: .2rem;

                overflow-y: scroll;
                width: 100%;
                color: var(--c_gray1);
                background-color: var(--c_gray4);

                scrollbar-width: thin;
                scrollbar-color: var(--c_gray1) var(--c_gray4);

                option.selected {
                    color: var(--c_gray5);
                    background-color: var(--c_highlight);
                }
            }
        }
    }

    .charts {
        grid-area: charts;

        .chart_container {
            border: 1px solid var(--c_gray2);
            margin: var(--panel_content_margin);
            margin-right: 0px;
            background-color: var(--c_gray4);

            /* these constants must match JS code */
            --chart_width: 800px;
            --chart_height: 300px;
            --axis_width: 80px;
            --cards_width: 10rem;

            --chart_panel_width: calc(var(--cards_width) + var(--chart_width));

            width: var(--chart_panel_width);

            &:first-child {
                margin-top: 0rem;
            }
            &:last-child {
                margin-bottom: 0rem;
            }

            &:hover:not(.selected) {
                outline: 3px solid var(--c_highlight);
                cursor: pointer;
            }

            &.selected {
                outline: 2px solid var(--c_highlight);
            }

            header {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: space-between;
                align-items: center;
                gap: .5rem;

                padding: .5rem;
                background-color: var(--c_gray5);

                .chart_title {
                    span {
                        padding-left: .25rem;
                        padding-right: .25rem;
                    }
                }
                .chart_buttons {
                    display: flex;
                    gap: .25rem;
                }
            }

            .chart_panel {
                display: grid;
                grid-template:
                    "curr1_preview chart"
                    "curr2_preview chart"
                    / var(--cards_width) 1fr;
                align-items: center;

                .currency_item.curr1 {
                    grid-area: curr1_preview;
                }

                .currency_item.curr2 {
                    grid-area: curr2_preview;
                }

                .history_chart {
                    grid-area: chart;
                    font-size: .8rem;
                    width: var(--chart_width);

                    &:has(> .no_data) {
                        font-size: 1.1rem;
                        padding: var(--panel_content_margin);
                        text-align: center;
                    }

                    &:has(> .raw_data) {
                        align-self: start;
                    }

                    .raw_data {
                        th {
                            width: 5rem;
                            text-align: center;
                            vertical-align: bottom;
                            border-bottom: 1px solid var(--c_border);
                        }
                        td {
                            text-align: right;
                            width: 5rem;
                            padding-left: .25rem;
                            padding-rem: .25rem;
                            border-left: 1px solid var(--c_border);
                            border-right: 1px solid var(--c_border);
                        }
                    }

                    .uplot {
                        .u-legend.u-inline {
                            display: grid;
                            grid-template:
                            "time curr1 curr2"
                            "time curr3 curr4"
                            / 2fr 4fr 4fr;
                            gap: .1rem .4rem;
                            align-items: start;
                            justify-items: start;
                            padding-left: 1rem;
                            padding-right: 1rem;
                        }

                        .u-legend.u-inline {
                            tbody {
                                display: contents;
                            }

                            tr {
                                margin-right: 0;
                                text-align: left;
                                width: 100%;

                                th, td {
                                    display: block;
                                    padding: 0px;
                                    white-space: nowrap;
                                    overflow-x: visible;
                                }

                                th::after {
                                    display: none;
                                }
                            }

                            tr:nth-child(1) {
                                .u-marker {
                                    display: none;
                                }
                                grid-area: time;
                            }
                            tr:nth-child(2) { grid-area: curr1; }
                            tr:nth-child(3) { grid-area: curr2; }
                            tr:nth-child(4) { grid-area: curr3; }
                            tr:nth-child(5) { grid-area: curr4; }
                        }
                    }
                }
            }
        }
    }
}

.poe_item {
    height: 12rem;
    margin: .25rem;
    padding: .5rem;
    border: 1px solid var(--c_default);
    text-align: center;
    background-color: var(--c_background);
    color: var(--c_default);
    font-size: .8rem;

    .title {
        font-weight: bold;
        color: var(--c_whiteitem);

        .StackableCurrency & {
            color: var(--c_currencyitem);
        };
    }

    .line {
        padding-top: .25rem;
        padding-bottom: .25rem;
    }

    .uniqueitem {
        color: var(--c_uniqueitem);
    }

    .corrupted {
        color: var(--c_corrupted);
    }

    .whiteitem {
        color: var(--c_whiteitem);
    }

    .magicitem {
        color: var(--c_magicitem);
    }

    .gemitem {
        color: var(--c_gemitem);
    }

    .currencyitem {
        color: var(--c_currencyitem);
    }

    .rareitem {
        color: var(--c_rareitem);
    }

    .default {
        color: var(--c_default);
    }

    .augmented {
        color: var(--c_augmented);
    }

    .enchanted {
        color: var(--c_enchanted);
    }
}