.dashboardWrapper {
/*    padding-left: 28px;
    padding-right: 28px;*/
    height: 100%;
    width: 100%;
}

/* Used for configuration/expanded tile */
.dashboardUnwrap {
    padding-left: 0px !important;
    padding-right: 0px !important;
    height: 100%;
    width: 100%;
}

/* dashboard tabs + League Table tab */
.dashboardWrapper .e-tab .e-tab-header {
    margin-bottom: 0px;
    z-index: 1;
}

    .dashboardWrapper .e-tab .e-tab-header .e-toolbar-item:not(.e-active) .e-tab-wrap:hover {
        background: white !important;
        color: black !important;
    }

    /* bugid#38924: non-active tabs a slightly darker grey than the new dashboard background */
    .dashboardWrapper .e-tab .e-tab-header .e-toolbar-item:not(.e-active) .e-tab-wrap {
        background: #E6E6E6;
        color: black !important;
    }

    .dashboardWrapper .e-tab .e-tab-header .e-toolbar-item:not(.e-active) .e-tab-text {
        color: black !important;
    }

    .dashboardWrapper .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap {
        background: white !important;
        color: black !important;
    }

    .dashboardWrapper .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text {
        color: black !important;
    }

/* League table tab */
.dashboardWrapper .tile .e-tab .e-content {
    height: calc(100% - 54px) !important;
    box-shadow: none !important;
    /* bugid#38924: the tile's own tab content stays white - only the dashboard canvas goes grey */
    background-color: #FFFFFF;
}

/*.dashboardWrapper .e-dashboardlayout {
    height: 100% !important;*/
    /*margin-left: 20px;*/
/*}*/
/*Tab Header Separator*/
/* bugid#38924: light grey dashboard canvas so the white tiles stand out (Lloyd's spec) */
.dashboardWrapper .e-tab .e-content {
    background-color: #F7F7F7;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: -2px -2px 2px #EEEEEE, 2px 2px 2px #EEEEEE !important;
}

.dashboardWrapper .dashboardContent {
    /*height: 100%;*/
    padding-top: 20px;
    font-family: Comfortaa !important;
    background-color: #F7F7F7; /* bugid#38924 */
    padding-left: 0px;
    display: inline-block;
    margin-left: 20px;
    margin-right: 20px;
    width: calc(100% - 40px);
    margin-top: 5px;
}

.dashboardWrapper .e-tab .e-content .e-item {
    height: 100%;
}

.dashboardWrapper .dashboardTab {
    height: 100%;
}

.dashboardWrapper .tileTable {
    border-collapse: separate;
    margin-left: -10px;
}

/*tile cell wrapper*/
.dashboardWrapper .e-dashboardlayout.e-control .e-panel {
    box-shadow: 0 0 7px rgba(0, 0, 0, .075) !important;
    /* bugid#38924: tiles stay white on the grey canvas - explicit, not theme-inherited */
    background: #FFFFFF;
}

    .dashboardWrapper .e-dashboardlayout.e-control .e-panel:hover {
        border: 1px solid #adb5bd;
        box-shadow: 0 0 7px rgba(0, 0, 0, .075) !important;
    }

.dashboardWrapper .tileCell {
    vertical-align: top;
    position: relative;
    overflow: hidden;
}

.dashboardWrapper .tile {
    height: 100%;
    position: relative;
    background: transparent;
    padding: 10px;
    overflow: hidden;
    display: flow-root;
    border-radius: 3px;
    container-type: size;
}

.dashboardWrapper .tileButtonsLeft {
    position: absolute;
    top: 1px;
    left: 2px;
    z-index: 2;
    cursor: pointer;
}

.dashboardWrapper .tileButtonsRight {
    position: relative;
    z-index: 2;
    float: right;
    height: 0px;
    cursor: pointer;
    /* Match tile padding */
    top: 0px;
    right: 0px;
}

.dashboardWrapper .tileTitle {
    /*font-size: 120%;*/
    font-size: clamp(11px, 5cqw, 18px);
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* margin-left: 23px; */
    text-align: center;
    position: relative;
    z-index: 1;
}

.dashboardWrapper .tileTitleStatus {
    font-size: clamp(11px, 5cqw, 18px);
    /*    font-size: 120%;*/
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
    position: relative;
    z-index: 1;
}

.dashboardWrapper .tileLogo {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    display: flex;
    place-items: flex-end;
    place-content: flex-end;
    flex-wrap: wrap;
    z-index: 0;
}

    .dashboardWrapper .tileLogo img {
        height: 10%;
    }

.dashboardWrapper .tileImage {
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    width: 100%;
    z-index: 0;
}

    .dashboardWrapper .tileImage img {
        width: 45px;
        height: auto;
        position: absolute;
        right: 7px;
        bottom: 2px;
    }

.dashboardWrapper .expandedTile .tileTitle {
    display: none;
}

.dashboardWrapper .tileButtonsRight.tileButtonsRight .e-btn.e-flat:hover {
    box-shadow: none;
    color: rgb(255, 255, 255);
    background: rgb(92, 99, 106);
    border-color: rgb(86, 94, 100);
}

.dashboardWrapper .tileButtonsRight .e-btn.e-flat:focus {
    background: rgba(0, 0, 0, 0);
    border-color: rgba(0, 0, 0, 0);
    box-shadow: none;
    color: #6c757d;
}

.dashboardWrapper .tileAlignTop {
    align-content: baseline;
}

.dashboardWrapper .tileAlignMiddle {
    align-content: center;
}

.dashboardWrapper .tileAlignBottom {
    align-content: end
}

.dashboardWrapper .videoTile {
    height: 100%;
    position: relative;
    padding: 0px;
    text-align: center;
}

.dashboardWrapper .NavigationTargetWrapper:has(.videoTile) .NavigationTarget {
    bottom: 65px;
}

.dashboardWrapper .videoCarouselNav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.45);
    color: white;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 14px;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

    .dashboardWrapper .videoCarouselNav:hover {
        background: rgba(0, 0, 0, 0.7);
    }

.dashboardWrapper .videoCarouselPrev {
    left: 6px;
}

.dashboardWrapper .videoCarouselNext {
    right: 6px;
}

.dashboardWrapper .videoCarouselCounter {
    position: absolute;
    bottom: 6px;
    right: 8px;
    background: rgba(0, 0, 0, 0.55);
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    z-index: 2;
    pointer-events: none;
}

.dashboardWrapper .videoCarouselLabel {
    position: absolute;
    bottom: 6px;
    left: 8px;
    max-width: calc(100% - 80px);
    background: rgba(0, 0, 0, 0.55);
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    z-index: 2;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboardWrapper .tileHeader {
    font-size: 1.2rem;
}

.dashboardWrapper .tileValue {
    /*font-size: 11cqw;*/
    font-size: 10cqw;
    /*    font-size: 340%;*/
}

.dashboardWrapper .tileValueBlank {
    transform: translate(-50%, -50%);
    position: absolute;
    left: 50%;
    top: 50%;
}

.dashboardWrapper .tile [id$="_centerlabel" i],
.dashboardWrapper .tile [id$="_centerlabel" i] tspan {
    dominant-baseline: central;
}

.dashboardWrapper .tileSymbol {
    /*font-size: 4.5cqw;*/
    font-size: 2.5cqw;
    /*    font-size: 35%;*/
    vertical-align: text-top;
    display: inline-block;
    width: 0px;
}

.dashboardWrapper .tileSymbolImpose {
    /*font-size: 4.5cqw;*/
    font-size: 2.5cqw;
    /*    font-size: 35%;*/
    vertical-align: text-top;
    display: inline-block;
}

.dashboardWrapper .tileSubText {
    /*font-size: 4cqw;*/
    font-size: 2cqw;
    /*font-size: 110%;*/
    width: 0px;
    display: inline-flex;
}

.dashboardWrapper .tileStatusSubText {
    /*font-size: 4.5cqw;*/
    font-size: 2.5cqw;
    /*font-size: 110%;*/
    /*width: 0px;*/
    display: block;
}

.dashboardWrapper .tileLabel {
    /*font-size: 5cqw;*/
    font-size: 120%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* bugid#38353: multi-project wave tiles stack one wave name per project */
.dashboardWrapper .tileLabelStack .tileLabel {
    font-size: 100%;
    line-height: 1.2;
}

.dashboardWrapper .tileTextAlign {
    background-color: white;
    color: black;
    width: 37px;
}

.dashboardWrapper .tileTextAlignSelected {
    background-color: lightgrey;
    color: black;
    width: 37px;
}

.dashboardWrapper .tileConfigPreview {
    justify-content: center;
    display: flex;
    margin: auto;
    padding-top: 9px;
    padding-bottom: 4px;
}

.dashboardWrapper .DashboardConfigControlGroup {
    display: flex;
    /* bugid#37951: let control groups wrap on narrow panes instead of overlapping (Plot Against ... Top 100 %) */
    flex-wrap: wrap;
    row-gap: 4px;
    padding-bottom: 6px;
    border-bottom: 1px solid powderblue;
    margin: 2px;
    justify-content: left;
}

.dashboardWrapper .DashboardConfigLabelAndControl {
    float: left;
    display: grid;
}

.dashboardWrapper .DashboardConfigControl {
    margin-top: auto;
    margin-bottom: auto !important;
    width: auto; /* !important;*/
}

/*CONFIG CONTROLS*/
.dashboardWrapper .e-checkbox-wrapper .e-label, .e-css.e-checkbox-wrapper .e-label {
    font-family: Comfortaa;
    line-height: 12px;
    font-size: 12px;
}
/*SLIDER - UI FIX - ALIGNS LABEL TEXT*/
.dashboardWrapper .e-control-wrapper.e-slider-container .e-scale.e-h-scale .e-tick.e-first-tick {
    text-align: left !important;
}

.dashboardWrapper .e-control-wrapper.e-slider-container .e-scale.e-h-scale .e-tick.e-last-tick {
    text-align: right !important;
}

.dashboardWrapper .e-control-wrapper.e-slider-container .e-tick-after.e-scale.e-h-scale .e-tick {
    text-align: center;
    font-size: 0.6rem;
}

.dashboardWrapper .e-control-wrapper.e-slider-container .e-tick-after.e-scale.e-h-scale .e-large {
    text-align: center;
    font-size: 0.6rem;
}

.dashboardWrapper .e-control-wrapper.e-slider-container .e-scale.e-h-scale .e-tick .e-tick-value.e-tick-after, .e-control-wrapper.e-slider-container .e-scale.e-h-scale .e-tick.e-large.e-first-tick .e-tick-value.e-tick-both {
    text-align: left !important;
}

.dashboardWrapper .e-control-wrapper.e-slider-container .e-scale.e-h-scale .e-tick .e-tick-value.e-tick-after, .e-control-wrapper.e-slider-container .e-scale.e-h-scale .e-tick.e-large.e-last-tick .e-tick-value.e-tick-both {
    text-align: right !important;
}

.dashboardWrapper .e-control-wrapper.e-slider-container .e-scale.e-h-scale .e-tick .e-tick-value.e-tick-after, .e-control-wrapper.e-slider-container .e-scale.e-h-scale .e-tick .e-tick-value.e-tick-both {
    text-align: center;
    font-size: 0.6rem;
}

.dashboardWrapper .e-control-wrapper.e-slider-container .e-tick-after.e-scale.e-h-scale .e-tick e-tick-value {
    width: 100% !important;
}

.dashboardWrapper .e-control-wrapper.e-slider-container .e-tick-after.e-scale.e-h-scale .e-large e-tick-value {
    width: 100% !important;
}

.dashboardWrapper .e-control-wrapper.e-slider-container .e-scale .e-tick .e-tick-value {
    font-family: Comfortaa !important;
    width: 100%;
}

.dashboardWrapper .e-control-wrapper.e-slider-container .e-scale {
    font-family: Comfortaa !important;
}
/*END SLIDER*/
.dashboardWrapper .LeagueWrapper {
    height: 100%;
    padding-inline: 10px;
    overflow-y: auto;
    overflow-x: hidden;
}

.dashboardWrapper .LeagueWrapper:has(> .NavigationTarget) {
    scrollbar-gutter: stable;
}

.dashboardWrapper .LeagueWrapper > .NavigationTarget {
    right: 15px;
}

.dashboardWrapper .ChartWrapper {
    height: 100%;
    width: 100%;
    padding: 10px;
    padding-bottom: 10px;
}

/* bugid#37972 round 2 (Vincent): the tile Font Colour must reach the league tile's rows, not just
   its title. The tile wrapper sets the colour, but Syncfusion's tab item resets it to the theme's
   #212529 (.e-tab .e-content .e-item), cutting the inheritance - the league content lives inside
   an SfTab. Scoped to tiles so the dashboard-level tabs keep their own colours. */
.dashboardWrapper .tile .e-tab .e-content .e-item {
    color: inherit;
}

/* bugid#37972 round 2: per Vincent the Score Distribution chart's content and legend are excluded
   from the Font Colour - the legend stays black regardless of the tile setting. */
.dashboardWrapper .leagueDistLegend {
    color: #000000;
}

.dashboardWrapper .LeagueHeading.Top {
    margin-top: 10px;
    text-align: center;
    margin-bottom: 0;
    font-weight: bold;
}

.dashboardWrapper .LeagueHeading.Bottom {
    margin-top: 10px;
    text-align: center;
    margin-bottom: 0;
    font-weight: bold;
}

.dashboardWrapper .LeagueItem.Top {
    /*padding-top: 10px;*/
    padding-inline: 10px;
}

.dashboardWrapper .LeagueItem.Bottom {
    /*padding-top: 10px;*/
    padding-inline: 10px;
}

.dashboardWrapper .LeagueItem.Top .col {
    /*background-color: #33CC99;*/
    align-items: center;
    display: flex;
    padding-bottom: 10px;
}

.dashboardWrapper .LeagueItem.Bottom .col {
    /*background-color: #FF6666;*/
    align-items: center;
    display: flex;
    padding-bottom: 10px;
}

.dashboardWrapper .LeagueItem .rank {
    width: 10%;
    padding-right: 28px;
}

.dashboardWrapper .LeagueItem .label {
    text-overflow: ellipsis;
    width: 90%;
    text-wrap-mode: nowrap;
    overflow: hidden;
}

.dashboardWrapper .LeagueItem .percentage {
    margin-left: auto;
}

.dashboardWrapper p.noData {
    color: red;
}

/*Expanded View*/
.dashboardWrapper .e-dialog.e-dlg-resizable {
    /*flex-basis: content !important;*/
    padding-bottom: 0px !important;
}

.dashboardWrapper .tileLockedContainer {
    /*width: 100%;*/
    width: min-content;
    transform: translate(-50%, -50%);
    position: absolute;
    left: 50%;
    top: 50%;
    text-align: center;
}

.dashboardWrapper .tileLocked {
    width: 55%;
    /*    background-image: url('/images/lock.png');
    background-repeat: no-repeat;*/
    /*border: 16px solid silver;
    border-top: 16px solid #337AB7;
    border-radius: 50%;
    width: 102px;
    height: 102px;
    animation: spin 700ms linear infinite;
    margin: auto;*/
}

/*Loading Spinner*/
.dashboardWrapper .dashboardSpinnerContainer {
    width: 100%;
    transform: translate(-50%, -50%);
    position: absolute;
    left: 50%;
    top: 50%;
}

.dashboardWrapper .dashboardSpinner {
    border: 16px solid silver;
    border-top: 16px solid #337AB7;
    border-radius: 50%;
    width: 102px;
    height: 102px;
    animation: spin 700ms linear infinite;
    margin: auto;
}

@keyframes spin {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

/*Circular Gauge*/
.dashboardWrapper .titleText {
    font-family: inherit;
    font-size: 0.8rem;
    margin-top: 7px;
    transform: translate(-54%, 0%) rotate(0deg);
}

.dashboardWrapper .tailwind3 div.titleText,
.dashboardWrapper .tailwind3-dark div.titleText {
    font-size: 0.8rem;
    margin-top: 0px;
}

.dashboardWrapper .annotation {
    font-family: inherit;
    font-size: 0.65rem;
    /*font-size: 18px;*/
    font-family: inherit;
    transform: translate(-60%, 0%) rotate(0deg);
}

.dashboardWrapper .material div.titleText, .material-dark div.titleText, .bootstrap-dark div.titleText, .bootstrap div.titleText,
.bootstrap4 div.titleText {
    margin-top: 9px;
}

@media only screen and (max-width:550px) {
    .titleText {
        font-size: 18px;
    }
}

@media only screen and (max-width:420px) {
    .titleText {
        font-size: 0.8rem;
        margin-top: 8px;
    }
}

.dashboardWrapper .annotation {
    font-size: 0.75rem;
    font-family: inherit;
    margin-top: -6px;
}

.dashboardWrapper .tailwind3 div.titleText, .tailwind3-dark div.titleText {
    font-size: 0.8rem;
    margin-top: 0px;
}

/* Fix status pie/semi-pie scaling issue */
.dashboardWrapper .expandedTile .semiPie {
    transform: translate(-35%, -27%) rotate(0deg) scale(1.1,1.1);
}

.dashboardWrapper .semiPie {
    transform: translate(-35%, -35%) rotate(0deg) scale(1.1,1.1);
    /*  cursor: pointer;*/
}

    .dashboardWrapper .semiPie svg {
        /*transform: translate(0%, -4%);*/
        cursor: inherit !important;
    }

.dashboardWrapper .pie {
    /*transform: translate(0%, -4%);*/
    /* cursor: pointer;*/
}

    .dashboardWrapper .pie svg {
        /*transform: translate(0%, -4%);*/
        cursor: inherit !important;
    }

.dashboardWrapper .e-panel-content {
    overflow: hidden;
    /*padding: 10px;*/
    height: 100%;
}

/* Set status pie/semi-pie center % label formatting */
/*.dashboardWrapper .pie .e-accumulationchart svg text {
    font-size: 200%;
}*/
@media (min-width: 1800px) {
    .dashboardWrapper .pie svg text tspan {
        font-size: 1.0rem;
    }

    .dashboardWrapper .pie svg text {
        font-size: 1.8rem;
    }

    .dashboardWrapper .semiPie svg text tspan {
        font-size: 1.0rem;
    }

    .dashboardWrapper .semiPie svg text {
        font-size: 1.8rem;
    }
}

@media (min-width: 1400px) {
    .dashboardWrapper .pie svg text tspan {
        font-size: 0.8rem;
    }

    .dashboardWrapper .pie svg text {
        font-size: 1.2rem;
    }

    .dashboardWrapper .semiPie svg text tspan {
        font-size: 0.8rem;
    }

    .dashboardWrapper .semiPie svg text {
        font-size: 1.2rem;
    }
}
/* Set status pie/semi-pie center text label formatting */
/*.dashboardWrapper .pie .e-accumulationchart svg tspan {
    font-size: 56%;
}

.dashboardWrapper .semiPie .e-accumulationchart svg tspan {
    font-size: 56%;
}*/

/* bugid#38738 round 5 (Lloyd's retest): the old "Area chart label colour fix" forced EVERY svg
   text in an area chart black, which overrode the score labels' Font Colour on Area tiles alone.
   Every chart label now carries an explicit colour (axes black, score labels the tile Font
   Colour), so the blanket rule is retired. */

.dashboardWrapper .NavigationTargetWrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

    .dashboardWrapper .NavigationTargetWrapper:hover {
        background-color: #f2f2f2; /*rgba(32, 33, 36, 0.1);*/
    }

/* Overlay link covering the whole tile. z-index keeps it above plain content (so the tile navigates)
   but below interactive carousel buttons (z-index: 2), which therefore always take focus and clicks. */
.dashboardWrapper .NavigationTarget {
    text-decoration: none;
    color: inherit;
    cursor: pointer !important;
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
}

/* Bar chart tiles trim their category axis labels to an ellipsis and Syncfusion shows the untrimmed
   text in a tooltip while the pointer is over a label. On a tile with a link the overlay above
   swallows that pointer, so lift the chart over it - pointer-events: none keeps clicks (and the tile
   buttons) falling through to the link, and only the labels themselves take the pointer back. */
.dashboardWrapper .NavigationTargetWrapper .e-chart.BAR_CHART {
    z-index: 2;
    pointer-events: none;
}

.dashboardWrapper .NavigationTargetWrapper .e-chart.BAR_CHART text[id*="_AxisLabel_"] {
    pointer-events: all;
    pointer-events: bounding-box;
}

/* The chart never sees the pointer leave a label (everything around it is pointer-events: none), so
   it never gets the mouse move that would close the tooltip - hide it unless a label is hovered. */
.dashboardWrapper .NavigationTargetWrapper .e-chart.BAR_CHART:not(:has(text[id*="_AxisLabel_"]:hover)) div[id$="_EJ2_AxisLabel_Tooltip"] {
    visibility: hidden;
}

.dashboardWrapper .EmptyNavigationTarget {
    text-decoration: none;
    color: inherit;
    cursor: default !important;
}

.progress {
    position: relative;
    margin: 4px;
    float: left;
    text-align: center;
}

.barOverflow {
    position: relative;
    overflow: hidden;
    width: 90px;
    height: 45px;
    margin-bottom: -14px;
}

.bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    box-sizing: border-box;
    border: 5px solid #eee;
    border-bottom-color: #0bf;
    border-right-color: #0bf;
}

/* bugid#38013: the league tile's Score Distribution legend is wrapping HTML below the chart
   (the Syncfusion legend overdrew itself when its items outgrew the rows a small tile allowed).
   The wrapper is a column so the chart yields exactly the height the legend rows need. */
.leagueDistWrap {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.leagueDistChart {
    flex: 1 1 auto;
    min-height: 0;
}

.leagueDistLegend {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 10px;
    row-gap: 2px;
    padding: 2px 4px 4px 4px;
    font-family: Comfortaa;
    font-size: 11px;
    line-height: 1.3;
}

.leagueDistLegendItem {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.leagueDistLegendDot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 4px;
    flex-shrink: 0;
}