/* Bubble plot: CompaniesBubbleplotView and the bubble chart on CompanyDashboardView */
.my-company-table th {
    background-color: mediumseagreen !important;
    color: white !important;
}

.svg-bubble-plot .selected {
    stroke-width: 3; stroke: white;
}

.svg-bubble-plot .bubble-label-hide {
    stroke: none; fill: none;
}

.svg-bubble-plot .bubble-label-show {
    stroke: black;
    fill: white;
    fill-opacity: 0.7;
    stroke-width: 1;
    filter: url(#solid);
}

.bubble-plot-dashboard {
    display: grid;
    grid-template-columns: 0.5fr 1fr 0.5fr;
    grid-template-rows: 100px auto 1fr;
    gap: 1rem;
    grid-template-areas:
        "bubble_plot_header . ."
        "all_companies bubbleplot my_companies"
        "all_companies filter my_companies";
}

.bubble-plot-dashboard-plot {
    grid-area: bubbleplot;
}

.bubble-plot-dashboard-filter {
    grid-area: filter;
}

.bubble-plot-dashboard-all-companies {
    grid-area: all_companies;
}

.bubble-plot-dashboard-my-companies {
    grid-area: my_companies;
}

.bubble-plot-dashboard-header {
    grid-area: bubble_plot_header;
}

@media screen and (max-width: 1300px) {
    .bubble-plot-dashboard {
        display: grid;
        grid-template-columns: 0.6fr 1fr;
        grid-template-rows: auto auto auto;
        grid-template-areas:
            "bubble_plot_header filter"
            "all_companies bubbleplot"
            "my_companies .";
    }
}

@media screen and (max-width: 800px) {
    .bubble-plot-dashboard {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas:
            "bubbleplot"
            "filter"
            "all_companies"
            "my_companies";
    }

    .bubble-plot-dashboard-header {
        display: none;
    }
}