.Chart {
    @include insights-breadcrumb;

    &-header {
        cursor: pointer;
    }

    &-header-bar {
        background-color: var(--white);
        margin-bottom: 30px;
        padding: 20px 40px;
    }

    &-header-top {
        display: flex;
        align-items: center;

        .Stores { // icon
            width: 24px;
            height: 24px;
        }

        .ChartableIcon {
            width: 28px;
            height: 28px;
        }
    }

    &-header-last-updated-date {
        font-size: 14px;
        color: var(--gray-500);
    }

    &-header-store {
        font-size: 24px;
        margin-left: 10px;
        margin-right: 6px;
        text-transform: capitalize;
    }

    &-header-category {
        font-size: 24px;
        text-transform: capitalize;
    }

    &-dates-select {
        width: 200px !important;
        margin-right: 20px;
    }

    &-country-select {
        width: 250px !important;
        margin-right: 20px;
    }

    &-filters {
        margin-bottom: 20px;
        display: flex;
        align-items: center;
    }

    &-filter-input {
        width: 232px;
        margin-right: 20px;
    }

    &-episode-filter-input {
        width: 250px;
        margin-right: 20px;
    }

    &-only-mine {
        font-size: 14px;

        .InCatalog {
            margin-left: 7px;
        }
    }

    @include chart-change;

    &-collapse-glyph {
        cursor: pointer;
    }

    &-podcast-art {
        height: 30px;
        width: 30px;
        margin-right: 10px;
    }

    &-placeholder-image {
        background-color: var(--gray-100);
        display: inline-block;
        margin-right: 10px;

        .Outline {
            height: 30px;
            width: 30px;
        }
    }

    .Star {
        margin-left: 20px;
        margin-right: 15px;
        height: 15px;
        width: 15px;
    }

    &-close-graph {
        padding: 8px 15px;
        border-left: 1px solid var(--gray-300);

        .CloseGlyph.Glyph {
            fill: var(--gray-500);
            cursor: pointer;
        }

        .CloseGlyph.Glyph:hover {
            fill: var(--gray-600);
        }
    }

    &-podcast-title,
    &-episode-title {
        cursor: pointer;
        text-decoration: underline;
        display: inline;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .card-body {
        padding: 0;
    }

    .change {
        width: 20px;
    }

    &-change {
        display: inline;

        .Glyph {
            margin-bottom: 1px;
        }
    }

    &-catalog-glyph {
        float: right;
    }
}