.dashBoardDiv {
    align-self: center;
    min-height: 200px;
    padding: 10px;
    border-radius: 10px;
    background-color: var(--HighlightedBackground);
    z-index: 10;
    box-shadow: 8px -8px 10px 10px rgb(0 0 0 / 13%);
    left: 2%;
    right: 2%;
    position: absolute;
}
.dashboardGrid {
    display: grid;
    grid-template-columns: min-content auto auto minmax(350px, 30%);
    grid-template-rows: auto auto auto;
    grid-template-areas: 'dashboardHeader dashboardHeader x dashboardButtons' 'keyfigures chart1area chart2area chart3area' 'x2 influencersArea influencersArea charx3t3area';
    gap: 5px;
}

.dashBoardHeaderPopupContainer {
    grid-area: dashboardHeader;
    color: var(--StrongText);
    margin: 0;
}
    .dashBoardHeaderPopupContainer
    .material-icons {
        margin-right: 20px;
        margin-left:5px;
        font-size: 24px;
        vertical-align: -webkit-baseline-middle;
    }

    .dashBoardHeaderPopupContainer
    h2 {
        vertical-align: -webkit-baseline-middle;
        font-size: 24px;
        font-weight: normal;
        display: inline;
    }

.keyfiguresDiv {
    grid-area: keyfigures;
}

.chart1Div {
    grid-area: chart1area;
    text-align: center;
    border-radius: 10px;
    padding: 5px;
    background: var(--color-bg-default);
    border: 1px solid var(--LightGrey);
}

.chart2Div {
    grid-area: chart2area;
    text-align: center;
    border-radius: 10px;
    padding: 5px;
    background: var(--color-bg-default);
    border: 1px solid var(--LightGrey);
}

.chart3Div {
    grid-area: chart3area;
    text-align: center;
    border-radius: 10px;
    padding: 5px;
    background: var(--color-bg-default);
    border: 1px solid var(--LightGrey);
}
.influencersDiv {
    grid-area: influencersArea;
    text-align: center;
    border-radius: 10px;
    padding: 5px;
    background: var(--color-bg-default);
    border: 1px solid var(--LightGrey);
}

.influencersChartDiv {
    grid-area: influencersChartArea;
    text-align: center;
    border-radius: 10px;
    padding: 5px;
    background: var(--color-bg-default);
    border: 1px solid var(--LightGrey);
    margin: 0 10px 0 0;
}
.dashBoardKeyPoints {
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
    clear: both;
    padding: 0;
    height:100%;
}

.dashBoardKeyFiguresDiv {
    padding: 20px 16px;
    border: 1px solid var(--LightGrey);
    background: var(--Background) 0% 0% no-repeat padding-box;
    border-radius: 10px;
    -webkit-font-smoothing: antialiased;
    color: #404040;
    float: left;
    display: inline-block;
    min-width: 200px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    box-sizing: border-box;
    overflow: hidden;
}
.dashBoardKeyFiguresDiv:first-child {
    margin-top:0;
}

.dashBoardKeyPointLabel {
    -webkit-font-smoothing: antialiased;
    -webkit-box-direction: normal;
    display: inline;
    height: 16px;
    margin-bottom: 12px;
    letter-spacing: 0px;
    font-size: 16px;
    font-weight: normal;
    color: var(--ActiveText);
}

.dashBoardKeyPointValue {
    -webkit-font-smoothing: antialiased;
    -webkit-box-direction: normal;
    font-weight: 200;
    margin-bottom: 4px;
    word-wrap: break-word;
    display: block;
    letter-spacing: 0px;
    font-size: 32px;
    font-weight: bold;
    color: var(--StrongText);
}

.dashBoardKeyPointCurrency {
    font-size: 17px;
    font-weight: 300;
    color: var(--ActiveText);
}

.dashBoardKeyPointStats {
    -webkit-font-smoothing: antialiased;
    -webkit-box-direction: normal;
    line-height: 1;
    word-wrap: break-word;
    display: block;
    font-weight: 400;
    font-size: 16px;
}

.dashboardButtonContainer {
    grid-area: dashboardButtons;
    padding:0 5px;
    text-align:right;
}

.traces{
    display:inline-block;
}
.groups{
    display:inline-block;
}