.analytics {
    padding: 16px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    /* Colors */
    --color-neutral: rgb(207, 226, 243);
    --color-positive: rgb(217, 234, 211);
    --color-negative: rgb(244, 204, 204);
    --color-gray: rgb(217, 217, 217);
    /* Chart lines */
    --color-chart-active: rgb(17, 85, 204);
    --color-chart-registered: rgb(0, 69, 97);
    --color-chart-active-light: rgb(70, 124, 219);
    --color-chart-registered-light: rgb(42, 108, 135);
    --color-chart-series-1: hsl(210deg 54% 68% / 1);
    --color-chart-series-2: hsl(270deg 54% 68% / 1);
    --color-chart-series-3: hsl(330deg 54% 68% / 1);
    --color-chart-series-4: hsl(30deg 54% 68% / 1);
    --color-chart-series-5: hsl(90deg 54% 68% / 1);
    --color-chart-series-6: hsl(150deg 54% 68% / 1);
}

.analytics h1 {
    flex-basis: 100%;
}

.analytics .acquisition {
    display: flex;
    gap: 24px;
}

.analytics .data-container {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

.analytics .data-container.vertical {
    flex-direction: column;
}

.analytics .data-container.vertical:has(.grouped-data.vertical) {
    align-items: unset;
}

.analytics .rounded-rectangle .dto-property {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-direction: column;
}

.analytics .rounded-rectangle .vertical .dto-property {
    gap: 12px;
    height: 36px;
    flex-direction: row;
}

.analytics .rounded-rectangle .dto-property .dto-property-label {
    display: inline-block;
    font-size: 0.75rem;
    width: 128px;
    text-align: center;
}

.analytics .rounded-rectangle .vertical .dto-property .dto-property-label {
    width: 96px;
    text-align: right;
}

.analytics .rounded-rectangle .dto-property .dto-property-value {
    display: inline-flex;
    gap: 6px;
    height: 100%;
    align-items: center;
    justify-content: center;
    background-color: var(--color-neutral);
    font-weight: bold;
    width: 128px;
    height: 36px;
    border-radius: 4px;
    font-size: 0.9rem;
    gap: 6px;
}

.analytics .rounded-rectangle .dto-property .dto-second-property-value {
    font-weight: normal;
}


.analytics .grouped-data {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: flex-start;
    width: 128px;
}

.analytics .grouped-data.vertical {
    flex-direction: column;
    width: unset;
    align-items: flex-end;
}

.analytics .grouped-data:not(:last-child) {
    margin-bottom: 12px;
}

.analytics .rounded-rectangle .grouped-data .dto-property {
    display: flex;
    flex-direction: column-reverse;
    gap: 2px;
    align-items: center;
    width: 100%;
    height: unset;
    flex-grow: 1;
}

.analytics .rounded-rectangle .grouped-data.vertical .dto-property {
    flex-direction: row;
    gap: 8px;
    justify-content: flex-end;
}

.analytics .rounded-rectangle .grouped-data .dto-property .dto-property-label {
    width: unset;
    text-align: center;
    font-size: 0.6rem;
}

.analytics .rounded-rectangle .grouped-data .dto-property .dto-property-value {
    height: 24px;
    background-color: var(--color-gray);
    font-weight: normal;
    width: 100%;
}

.analytics .rounded-rectangle .grouped-data.vertical .dto-property .dto-property-value {
    width: 128px;
}

.goals {
    display: flex;
    gap: 32px;
    justify-content: center;
}

.grid-view {
    display: grid;
    gap: 8px;
    grid-gap: 8px;
    justify-items: end;
    margin-left: -24px;
}

.flexible {
    flex-shrink: 1;
    flex-grow: 1;
    width: 0;
}

.goal-data {
    grid-template-columns: 1.85fr repeat(3, 1fr);
}

.spending-data {
    grid-template-columns: 1.85fr repeat(3, 1fr);
}

.spending-left {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding-top: 19px;
}

.spending-bar {
    height: 128px;
}

.grid-view-header {
    width: 128px;
    font-size: 0.75rem;
    text-align: center;
}

.brandtype-enum img {
    max-height: 18px !important;
}

.leaderboard {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.leaderboard .icon {
    height: 20px;
    margin-top: -4px;
}

.leaderboard .partner {
    align-items: center;
    background-color: var(--color-background);
    border-radius: 8px;
    border-top-left-radius: 27px;
    overflow: hidden;
    width: 542px;
    border: 1px solid var(--color-header);
    border-bottom: 3px solid var(--color-header);
}

.partner-row {
    display: grid;
    padding: 12px;
}

.r1 {
    grid-template-columns: 10% 80% 10%;
    padding-top: 8px;
    padding-bottom: 3px;
    background-color: var(--color-header);
}

.r2 {
    grid-template-columns: 25% 50% 25%;
}

.r3 {
    grid-template-columns: 60% 40%;
}

.r2, .r3 {
    border-bottom: 2px solid var(--color-header);
}

.position-1 {
    --color-medal: #ffb619;
    --color-header: #ffd97a;
    --color-background: #ffecbc;
}

.position-2 {
    --color-medal: #e0d3ef;
    --color-header: #e7e1ed;
    --color-background: #f5effb;
}

.position-3 {
    --color-medal: #d38f5f;
    --color-header: #e1b08d;
    --color-background: #ebc8ae;
}


.partner .order {
    font-size: 2rem;
    text-align: center;
    width: 48px;
    height: 48px;
    border-radius: 24px;
    background-color: var(--color-medal);
    margin-left: -8px;
    margin-top: -5px;
}

.partner .level {
    font-size: 0.75rem;
    text-align: center;
}
.partner .level .level-number {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: normal;
}

.partner .business-name {
    font-size: 1.2rem;
    font-weight: 600;
    padding-bottom: 3px;
    align-self: center;
}

.partner .username, .partner .business-name {
    text-align: center;
}
.partner .location, .partner .type {
    text-align: right;
}

.partner .level {
    width: 42px;
    justify-self: end;
    margin-top: -2px;
}

.partner .type .main {
    padding-right: 0px;
}

.leaderboard .entry .grid-view {
    margin-left: 0px;
    padding-left: 8px;
    padding-right: 8px;
    justify-self: center;
    padding-top: 16px;
    padding-bottom: 16px;
    grid-gap: 4px;
    border-bottom: 2px solid var(--color-header);
}

.e-tip-content .validation-name {
    font-weight: bold;
    font-size: 1rem;
    text-align: center;
    border-bottom: 1px solid white;
    padding: 8px;
    margin-bottom: 4px;
}

.e-tip-content .validation-description {
    white-space: pre-line;
}

svg g[id$="SeriesCollection"] text[title="Text Element"] {
    stroke: white; /* outline color */
    stroke-width: 3px; /* thickness of outline */
    paint-order: stroke; /* ensures stroke is painted beneath fill */
    stroke-linejoin: round; /* smoother outline corners */
}

.bar-chart svg g[id$="SeriesCollection"] text[title="Text Element"] {
    stroke-width: 2px;
    stroke: #ffffff80;
    text-shadow: 0px 0px 3px #ffffff80;
}

div[id$="DataLabelCollections"] div {
    text-shadow: -1px -1px 1.5px white, 1px -1px 1.5px white, -1px 1px 1.5px white, 1px 1px 1.5px white, 0px 0px 1.5px white;
    font-weight: 700;
    text-align: center;
}
div[id$="DataLabelCollections"] div:first-child {
    font-weight: 900;
}