/* xxxxxxxxxx Bracket Control Basic styles start xxxxxxxxxx */

:root {
    /* Dimension Variables */
    --bracket-item-w-280: 280px;
    --bracket-item-w-220: 220px;
    --bracket-item-margin-bottom: 11px;
    --bracket-game-wrap-height: 80px;
    --bracket-col-margin-right: 60px;
    --bracket-col-64-margin-right: 20px;
    --bracket-team-logo-size: 20px;
    --bracket-dd-team-logo-size: 30px;
    /**/
    /* Color Variables */
    --col-white: #ffffff;
    --col-white-dec-rgb: 255,255,255;
    --col-black: #000000;
    --col-red-light-washed: #eb483f;
    --col-red-light-washed-dark: #ba322b;
    /**/
    /* App basic Color Variables */
    --col-basic-light: #008CD6;
    --col-basic: #3a8dd6;
    --col-basic-dec-rgb: 0,140,214;
    --col-neutral-light: #F1F2F9;
    --col-gray-light: #c2c7cc;
    /**/
    /* App regions and elements Color Variables */
    --col-bracket-control-bg: var(--col-neutral-light);
    --col-bracket-drag-drop-panel-bg: var(--col-white);
    --col-bracket-drag-drop-panel-scroll-track: #f0f0f0;
    --col-bracket-drag-drop-panel-scroll-button: #cdcdcd;
    --col-bracket-drag-drop-panel-header-footer-line: #e6e7e8;
    --col-bracket-game-wrap: var(--col-white);
    --col-bracket-col-title:;
    --col-filter-btn-bottom-border:;
    --col-filter-btn-text:;
    --col-filter-btn-text-hover:;
    --col-active-filter-btn-bottom-border:;
    --col-active-filter-btn-text: #181E47;
    --col-bracket-game-wrap-text:;
    --col-bracket-game-looser-text: #575966;
    --col-bracket-game-winner-text: #0d0f1a;
    --col-bracket-game-box-hover-border:;
    --col-game-winner-arrow: #67ccff;
    --col-winner-correct-choice: #b8f2c1;
    --col-winner-wrong-choice: #ffcccc;
    --col-bracket-team-rank: #575966;
    --col-bracket-win-loss: var(--col-bracket-team-rank);
    --col-bracket-team-score: #828a99;
    --col-bracket-team-name: #2b2e33;
    --col-bracket-team-unknown-track: #bfbfbf;
    --col-bracket-series-header: #0d111a;
    --col-bracket-series-footer: #575966;
    --col-bracket-dd-title: var(--col-white);
    --col-btn-options: var(--col-basic);
    --col-btn-search: #7a8b99;
    --col-bracket-dd-team-name-rank: var(--col-white);
    --col-bracket-dd-team-name-rank-hover: var(--col-white);
    --col-bracket-dd-team-name-rank-active: var(--col-white);
    --col-bracket-tooltip-separator: rgba(255,255,255,0.8);
    --col-bracket-tooltip-separator-line-bg: rgba(255,255,255,0.2);
    --col-bracket-tooltip-ul: rgba(255,255,255,0.8);
    --col-tooltip-bg: #2c5f80;
    --col-bracket-tournament-filter-content-bg: rgba(0,0,0,0.01);
    --col-bracket-tournament-filter-content-border: var(--col-gray-light);
    --col-bracket-create-team-border: var(--col-gray-light);
    --col-bracket-create-team-radius: 4px;
    --col-bracket-dd-search-field: #f1f2f9;
    --col-bracket-dd-search-field-focus: #e5e7fa;
    --col-bracket-dd-search-field-placeholder: #a1a6c9;
    --col-badge-num-bg: var(--col-basic);
    --col-bracket-connecting-tree-line: #9da2a6;
    --col-bracket-filter-nav-button: #4bb8ef;
    --col-bracket-filter-nav-button-hover: var(--col-basic);
    --col-bracket-filter-nav-button-active-focus: #0066bf;
    --col-bracket-filter-nav-button-disabled: #d1d6dd;
}

/** BASIC CSS **/
/* Resets are scoped to the component's render trees so they cannot leak into
   host-app markup (ISTB-13051). :where() keeps zero specificity, so the cascade
   inside the bracket behaves exactly as the old global selectors did.
   Scope roots: .bracket-control (the component root), plus the two Telerik
   portals that render outside it: .bracket-tooltip (tooltip content) and
   .k-drag-clue (drag ghost). */

:where(.bracket-control, .bracket-tooltip, .k-drag-clue),
:where(.bracket-control, .bracket-tooltip, .k-drag-clue) * {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

:where(.bracket-control, .bracket-tooltip, .k-drag-clue) *::before,
:where(.bracket-control, .bracket-tooltip, .k-drag-clue) *::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

:where(.bracket-control, .bracket-tooltip, .k-drag-clue) ul,
:where(.bracket-control, .bracket-tooltip, .k-drag-clue) ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

:where(.bracket-control, .bracket-tooltip, .k-drag-clue) a {
    text-decoration: none;
    outline: none;
    color: #4b5460;
}

    :where(.bracket-control, .bracket-tooltip, .k-drag-clue) a:focus {
        outline: none;
    }

    :where(.bracket-control, .bracket-tooltip, .k-drag-clue) a:hover,
    :where(.bracket-control, .bracket-tooltip, .k-drag-clue) a:focus {
        text-decoration: none;
    }

:where(.bracket-control, .bracket-tooltip, .k-drag-clue) a,
:where(.bracket-control, .bracket-tooltip, .k-drag-clue) input,
:where(.bracket-control, .bracket-tooltip, .k-drag-clue) select,
:where(.bracket-control, .bracket-tooltip, .k-drag-clue) textarea,
:where(.bracket-control, .bracket-tooltip, .k-drag-clue) img {
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
}

:where(.bracket-control, .bracket-tooltip, .k-drag-clue) input,
:where(.bracket-control, .bracket-tooltip, .k-drag-clue) select,
:where(.bracket-control, .bracket-tooltip, .k-drag-clue) textarea {
    border: 1px solid transparent;
}

/* Keyboard focus indicator (ISTB-13052): the reset above removes outlines,
   which leaves keyboard users with invisible focus. :focus-visible restores a
   themed ring for keyboard navigation only - mouse clicks stay outline-free. */
:where(.bracket-control, .bracket-tooltip, .k-drag-clue) :focus-visible {
    outline: 2px solid var(--col-basic-light);
    outline-offset: 1px;
}
/* xxxxxxx Bracket Control Basic styles end  xxxxxxx */



/* xxxxxxxxxxxxxxxxxxxxxxxxxxxx Tournament Bracket section css start xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

.bracket-control {
    padding: 10px 0;
    background-color: var(--col-bracket-control-bg);
    min-height: calc(100vh - 480px);
}

    /* !important: the component markup carries Bootstrap spacing utilities
       (mt-4/mb-5) that would otherwise win these margin ties */
    .bracket-control > .individual-group-table-section {
        margin: 0 !important;
    }

.tournamentbracket-bracket-scrollable-down-lg {
    margin: 0 auto !important; /* beats the markup's Bootstrap mt-4/mb-5 */
}

.bracket-control .bracket-dd-footer {
    border-bottom: 0;
}

.bracket-tournament-filter-button .filter-button {
    color: #686c82;
    font-size: 19px;
    display: inline-block;
    margin-right: 18px;
    padding-bottom: 20px;
    border-bottom: 5px solid transparent;
    background: transparent;
    min-width: 22px;
    text-align: center;
    padding-top: 15px;
}

    .bracket-tournament-filter-button .filter-button:hover {
        color: #383d5f;
    }

.bracket-tournament-filter-button {
    border-bottom: 2px solid #DFE1ED;
    white-space: nowrap;
    overflow: auto;
    position: relative;
    width: 375px;
    text-align: center;
    margin-bottom: 2px;
}

@media (max-width: 575.98px) {
    .bracket-tournament-filter-button {
        width: 100%;
    }

        .bracket-tournament-filter-button .filter-button {
            margin-right: 10px;
            min-width: 15px;
        }
}


.bracket-tournament-filter-button .nav-arrow-left,
.bracket-tournament-filter-button .nav-arrow-right {
    position: absolute;
    top: 15px;
    left: 0;
    font-size: 20px;
    color: var(--col-bracket-filter-nav-button);
    padding: 8px 5px 8px 10px;
    background-color: transparent;
}

.bracket-tournament-filter-button .nav-arrow-right {
    left: auto;
    right: 0;
    padding: 8px 10px 8px 5px;
}

    .bracket-tournament-filter-button .nav-arrow-left:hover,
    .bracket-tournament-filter-button .nav-arrow-right:hover {
        color: var(--col-basic);
    }

    .bracket-tournament-filter-button .nav-arrow-left:active,
    .bracket-tournament-filter-button .nav-arrow-right:active,
    .bracket-tournament-filter-button .nav-arrow-left:focus,
    .bracket-tournament-filter-button .nav-arrow-right:focus {
        color: var(--col-bracket-filter-nav-button-active-focus);
    }

    .bracket-tournament-filter-button .nav-arrow-left:disabled,
    .bracket-tournament-filter-button .nav-arrow-right:disabled {
        color: var(--col-bracket-filter-nav-button-disabled);
        pointer-events: none;
    }

/* !important: must out-rank ".bracket-tournament-filter-button .filter-button"
   (higher specificity) that styles the same buttons */
.active-filter-btn {
    color: var(--col-active-filter-btn-text) !important;
    font-weight: 500;
    border-bottom: 5px solid var(--col-basic-light) !important;
}

@media (min-width: 768px) {
    .bracket-tournament-filter-button .filter-button {
        margin-right: 25px;
        min-width: 30px;
    }

    .bracket-tournament-filter-button {
        width: 500px;
    }
}

/* bracket scrollable container start */

.bracket-create-mode {
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 991.98px) {
    .tournamentbracket-bracket-scrollable-down-lg {
        overflow-x: auto;
    }

    .bracket-create-mode .tournamentbracket-bracket-scrollable-down-lg {
        overflow-x: initial;
    }

    .tournamentbracket-bracket-scrollable-down-lg .tournamentbracket-container {
        width: 990px;
    }
}

.tournamentbracket-bracket-scrollable-32,
.tournamentbracket-bracket-scrollable-64,
.tournamentbracket-bracket-scrollable-128 {
    overflow-x: auto;
    width: 100%;
    max-width: initial;
}

    .tournamentbracket-bracket-scrollable-32 .container,
    .tournamentbracket-bracket-scrollable-64 .container,
    .tournamentbracket-bracket-scrollable-128 .container {
        width: 100%;
        max-width: initial;
    }

@media (min-width: 1200px) {
    .tournamentbracket-bracket-scrollable-32 .tournament-bracket-section.for-desktop .bracket-main-wrap {
        width: calc(((var(--bracket-item-w-220) + var(--bracket-col-64-margin-right)) * 5) + (var(--bracket-col-64-margin-right) * 3));
        margin-left: auto;
        margin-right: auto;
    }

    .tournamentbracket-bracket-scrollable-64 .tournament-bracket-section.for-desktop .bracket-main-wrap {
        width: calc(((var(--bracket-item-w-220) + var(--bracket-col-64-margin-right)) * 6) + (var(--bracket-col-64-margin-right) * 3));
        margin-left: auto;
        margin-right: auto;
    }

    .tournamentbracket-bracket-scrollable-128 .tournament-bracket-section.for-desktop .bracket-main-wrap {
        width: calc(((var(--bracket-item-w-220) + var(--bracket-col-64-margin-right)) * 7) + (var(--bracket-col-64-margin-right) * 3));
        margin-left: auto;
        margin-right: auto;
    }
}

/* bracket scrollable container end */


.bracket-main-wrap {
    display: flex;
    justify-content: center;
    min-height: 300px;
    min-width: fit-content;
    min-width: -webkit-fit-content;
    min-width: -moz-fit-content;
    min-width: -webkit-fill-available;
}

.bracket-16-main-wrap {
    min-height: initial;
}

.bracket-col {
    margin-right: var(--bracket-col-margin-right);
}

.bracket-item-w-220 .bracket-col {
    margin-right: var(--bracket-col-64-margin-right);
}

.bracket-col > h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    min-height: 30px;
    display: block;
}

.bracket-col:last-child {
    margin-right: 0;
}

.bracket-row {
    height: calc((var(--bracket-game-wrap-height) * 2) + (var(--bracket-item-margin-bottom) * 2));
}

.bracket-row.bracket-row-size-2 {
    height: calc((var(--bracket-game-wrap-height) * 4) + (var(--bracket-item-margin-bottom) * 4));
}

.bracket-row.bracket-row-size-3 {
    height: calc((var(--bracket-game-wrap-height) * 8) + (var(--bracket-item-margin-bottom) * 8));
}

.bracket-row.bracket-row-size-4 {
    height: calc((var(--bracket-game-wrap-height) * 16) + (var(--bracket-item-margin-bottom) * 16));
}

.bracket-row.bracket-row-size-5 {
    height: calc((var(--bracket-game-wrap-height) * 32) + (var(--bracket-item-margin-bottom) * 32));
}

.bracket-row.bracket-row-size-6 {
    height: calc((var(--bracket-game-wrap-height) * 64) + (var(--bracket-item-margin-bottom) * 64));
}


/* tb-32-128 classes update start */

.bracket-row.bracket-row-32-final, .bracket-row-32-final {
    display: flex;
    align-items: center;
    height: calc((var(--bracket-game-wrap-height) * 16) + (var(--bracket-item-margin-bottom) * 16));
}

.bracket-row.bracket-row-128-final, .bracket-row-128-final {
    display: flex;
    align-items: center;
    height: calc((var(--bracket-game-wrap-height) * 64) + (var(--bracket-item-margin-bottom) * 64));
}
/* tb-32-128 classes update end */


/* xxx Bracket Mobile Tabs-Jump to Position start xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/* tb position classes start */

.tb-128-bracket {
    width: 1680px;
}

.tb-64-bracket {
    width: 1440px;
}

.tb-32-bracket {
    width: 1200px;
}

.tb-16-bracket {
    width: 960px;
}

.tb-8-bracket {
    width: 720px;
}

.tb-4-bracket {
    width: 480px;
}

.tb-round-1-position {
    margin-left: 0;
}

.tb-round-2-position {
    margin-left: -240px;
}

.tb-round-3-position {
    margin-left: -480px;
    min-height: 600px;
}

.tb-round-4-position {
    margin-left: -720px;
    min-height: 500px;
}

.tb-round-5-position {
    margin-left: -960px;
    min-height: 400px;
}

.tb-round-6-position {
    margin-left: -1200px;
    min-height: 300px;
}

.tb-round-7-position {
    /* add next to the tb-semifinals not instead ? to check! */
    margin-left: -1440px;
}

.tb-round-2-position .bracket-col-first .bracket-row .bracket-item.bracket-item-top::before,
.tb-round-2-position .bracket-col-first .bracket-row .bracket-item.bracket-item-top::after,
.tb-round-2-position .bracket-col-first .bracket-row .bracket-item.bracket-item-bottom::before,
.tb-round-2-position .bracket-col-first .bracket-row .bracket-item.bracket-item-bottom::after,
.tb-round-3-position .bracket-row-size-2 .bracket-item.bracket-item-top::before,
.tb-round-3-position .bracket-row-size-2 .bracket-item.bracket-item-top::after,
.tb-round-3-position .bracket-row-size-2 .bracket-item.bracket-item-bottom::before,
.tb-round-3-position .bracket-row-size-2 .bracket-item.bracket-item-bottom::after,
.tb-round-4-position .bracket-row-size-3 .bracket-item.bracket-item-top::before,
.tb-round-4-position .bracket-row-size-3 .bracket-item.bracket-item-top::after,
.tb-round-4-position .bracket-row-size-3 .bracket-item.bracket-item-bottom::before,
.tb-round-4-position .bracket-row-size-3 .bracket-item.bracket-item-bottom::after,
.tb-round-5-position .bracket-row-size-4 .bracket-item.bracket-item-top::before,
.tb-round-5-position .bracket-row-size-4 .bracket-item.bracket-item-top::after,
.tb-round-5-position .bracket-row-size-4 .bracket-item.bracket-item-bottom::before,
.tb-round-5-position .bracket-row-size-4 .bracket-item.bracket-item-bottom::after,
.tb-round-6-position .bracket-row-size-5 .bracket-item.bracket-item-top::before,
.tb-round-6-position .bracket-row-size-5 .bracket-item.bracket-item-top::after,
.tb-round-6-position .bracket-row-size-5 .bracket-item.bracket-item-bottom::before,
.tb-round-6-position .bracket-row-size-5 .bracket-item.bracket-item-bottom::after,
.tb-round-7-position .bracket-row-size-6 .bracket-item.bracket-item-top::before,
.tb-round-7-position .bracket-row-size-6 .bracket-item.bracket-item-top::after,
.tb-round-7-position .bracket-row-size-6 .bracket-item.bracket-item-bottom::before,
.tb-round-7-position .bracket-row-size-6 .bracket-item.bracket-item-bottom::after {
    display: none;
}

.tb-64-teams-rows .bracket-row.bracket-row-size-5,
.tb-64-teams-rows .bracket-row.bracket-row-final {
    height: calc((var(--bracket-game-wrap-height) * 32) + (var(--bracket-item-margin-bottom) * 32));
}

.tb-32-teams-rows .bracket-row.bracket-row-size-2 {
    height: calc((var(--bracket-game-wrap-height) * 2) + (var(--bracket-item-margin-bottom) * 2));
}

.tb-32-teams-rows .bracket-row.bracket-row-size-3 {
    height: calc((var(--bracket-game-wrap-height) * 4) + (var(--bracket-item-margin-bottom) * 4));
}

.tb-32-teams-rows .bracket-row.bracket-row-size-4 {
    height: calc((var(--bracket-game-wrap-height) * 8) + (var(--bracket-item-margin-bottom) * 8));
}

.tb-32-teams-rows .bracket-row.bracket-row-size-5,
.tb-32-teams-rows .bracket-row.bracket-row-final {
    height: calc((var(--bracket-game-wrap-height) * 16) + (var(--bracket-item-margin-bottom) * 16));
}

.tb-16-teams-rows .bracket-row.bracket-row-size-2,
.tb-16-teams-rows .bracket-row.bracket-row-size-3 {
    height: calc((var(--bracket-game-wrap-height) * 2) + (var(--bracket-item-margin-bottom) * 2));
}

.tb-16-teams-rows .bracket-row.bracket-row-size-4 {
    height: calc((var(--bracket-game-wrap-height) * 4) + (var(--bracket-item-margin-bottom) * 4));
}

.tb-16-teams-rows .bracket-row.bracket-row-size-5,
.tb-16-teams-rows .bracket-row.bracket-row-final {
    height: calc((var(--bracket-game-wrap-height) * 8) + (var(--bracket-item-margin-bottom) * 8));
}

.tb-8-teams-rows .bracket-row.bracket-row-size-2,
.tb-8-teams-rows .bracket-row.bracket-row-size-3,
.tb-8-teams-rows .bracket-row.bracket-row-size-4 {
    height: calc((var(--bracket-game-wrap-height) * 2) + (var(--bracket-item-margin-bottom) * 2));
}

.tb-8-teams-rows .bracket-row.bracket-row-size-5,
.tb-8-teams-rows .bracket-row.bracket-row-final {
    height: calc((var(--bracket-game-wrap-height) * 4) + (var(--bracket-item-margin-bottom) * 4));
}


.tb-4-teams-rows .bracket-row.bracket-row-size-2,
.tb-4-teams-rows .bracket-row.bracket-row-size-3,
.tb-4-teams-rows .bracket-row.bracket-row-size-4,
.tb-4-teams-rows .bracket-row.bracket-row-size-5 {
    height: calc((var(--bracket-game-wrap-height) * 2) + (var(--bracket-item-margin-bottom) * 2));
}

.tb-4-teams-rows .bracket-row.bracket-row-size-6 {
    height: calc((var(--bracket-game-wrap-height) * 4) + (var(--bracket-item-margin-bottom) * 4));
}

.tb-final-game .bracket-row.bracket-row-final, .bracket-row.bracket-row-final {
    display: flex;
    align-items: center;
}

.tb-round-2-position .hide-from-second-round {
    display: none;
}

.tb-round-3-position .hide-from-second-round,
.tb-round-3-position .hide-from-third-round {
    display: none;
}

.tb-round-4-position .hide-from-second-round,
.tb-round-4-position .hide-from-third-round,
.tb-round-4-position .hide-from-fourth-round {
    display: none;
}

.tb-round-5-position .hide-from-second-round,
.tb-round-5-position .hide-from-third-round,
.tb-round-5-position .hide-from-fourth-round,
.tb-round-5-position .hide-from-fifth-round {
    display: none;
}

.tb-round-6-position .hide-from-second-round,
.tb-round-6-position .hide-from-third-round,
.tb-round-6-position .hide-from-fourth-round,
.tb-round-6-position .hide-from-fifth-round,
.tb-round-6-position .hide-from-sixth-round {
    display: none;
}

.tb-round-7-position .hide-from-second-round,
.tb-round-7-position .hide-from-third-round,
.tb-round-7-position .hide-from-fourth-round,
.tb-round-7-position .hide-from-fifth-round,
.tb-round-7-position .hide-from-sixth-round {
    display: none;
}

/* tb position classes end */
/* xxx Bracket 64 Mobile Tabs-Jump to Position start xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/


/* tb-128 specific styles start */
.tb-128-teams-rows .bracket-row.bracket-row-size-6,
.tb-128-teams-rows .bracket-row.bracket-row-final {
    height: calc((var(--bracket-game-wrap-height) * 64) + (var(--bracket-item-margin-bottom) * 64));
}

.tb-128-bracket.tb-64-teams-rows .bracket-row.bracket-row-size-2 {
    height: calc((var(--bracket-game-wrap-height) * 2) + (var(--bracket-item-margin-bottom) * 2));
}

.tb-128-bracket.tb-64-teams-rows .bracket-row.bracket-row-size-3 {
    height: calc((var(--bracket-game-wrap-height) * 4) + (var(--bracket-item-margin-bottom) * 4));
}

.tb-128-bracket.tb-64-teams-rows .bracket-row.bracket-row-size-4 {
    height: calc((var(--bracket-game-wrap-height) * 8) + (var(--bracket-item-margin-bottom) * 8));
}

.tb-128-bracket.tb-64-teams-rows .bracket-row.bracket-row-size-5 {
    height: calc((var(--bracket-game-wrap-height) * 16) + (var(--bracket-item-margin-bottom) * 16));
}

.tb-128-bracket.tb-64-teams-rows .bracket-row.bracket-row-size-6 {
    height: calc((var(--bracket-game-wrap-height) * 32) + (var(--bracket-item-margin-bottom) * 32));
}

.tb-128-bracket.tb-32-teams-rows .bracket-row.bracket-row-size-2,
.tb-128-bracket.tb-32-teams-rows .bracket-row.bracket-row-size-3 {
    height: calc((var(--bracket-game-wrap-height) * 2) + (var(--bracket-item-margin-bottom) * 2));
}

.tb-128-bracket.tb-32-teams-rows .bracket-row.bracket-row-size-4 {
    height: calc((var(--bracket-game-wrap-height) * 4) + (var(--bracket-item-margin-bottom) * 4));
}

.tb-128-bracket.tb-32-teams-rows .bracket-row.bracket-row-size-5 {
    height: calc((var(--bracket-game-wrap-height) * 8) + (var(--bracket-item-margin-bottom) * 8));
}

.tb-128-bracket.tb-32-teams-rows .bracket-row.bracket-row-size-6 {
    height: calc((var(--bracket-game-wrap-height) * 16) + (var(--bracket-item-margin-bottom) * 16));
}

.tb-128-bracket.tb-16-teams-rows .bracket-row.bracket-row-size-2,
.tb-128-bracket.tb-16-teams-rows .bracket-row.bracket-row-size-3,
.tb-128-bracket.tb-16-teams-rows .bracket-row.bracket-row-size-4 {
    height: calc((var(--bracket-game-wrap-height) * 2) + (var(--bracket-item-margin-bottom) * 2));
}

.tb-128-bracket.tb-16-teams-rows .bracket-row.bracket-row-size-5 {
    height: calc((var(--bracket-game-wrap-height) * 4) + (var(--bracket-item-margin-bottom) * 4));
}

.tb-128-bracket.tb-16-teams-rows .bracket-row.bracket-row-size-6 {
    height: calc((var(--bracket-game-wrap-height) * 8) + (var(--bracket-item-margin-bottom) * 8));
}

.tb-128-bracket.tb-8-teams-rows .bracket-row.bracket-row-size-2,
.tb-128-bracket.tb-8-teams-rows .bracket-row.bracket-row-size-3,
.tb-128-bracket.tb-8-teams-rows .bracket-row.bracket-row-size-4,
.tb-128-bracket.tb-8-teams-rows .bracket-row.bracket-row-size-5 {
    height: calc((var(--bracket-game-wrap-height) * 2) + (var(--bracket-item-margin-bottom) * 2));
}

.tb-128-bracket.tb-8-teams-rows .bracket-row.bracket-row-size-6 {
    height: calc((var(--bracket-game-wrap-height) * 4) + (var(--bracket-item-margin-bottom) * 4));
}

.tb-128-bracket.tb-4-teams-rows .bracket-row.bracket-row-size-2,
.tb-128-bracket.tb-4-teams-rows .bracket-row.bracket-row-size-3,
.tb-128-bracket.tb-4-teams-rows .bracket-row.bracket-row-size-4,
.tb-128-bracket.tb-4-teams-rows .bracket-row.bracket-row-size-5,
.tb-128-bracket.tb-4-teams-rows .bracket-row.bracket-row-size-6 {
    height: calc((var(--bracket-game-wrap-height) * 2) + (var(--bracket-item-margin-bottom) * 2));
}

/* tb-128 specific styles end */

/* tb-32 specific styles start */
.tb-32-bracket.tb-32-teams-rows .bracket-row.bracket-row-size-2 {
    height: calc((var(--bracket-game-wrap-height) * 4) + (var(--bracket-item-margin-bottom) * 4));
}

.tb-32-bracket.tb-32-teams-rows .bracket-row.bracket-row-size-3 {
    height: calc((var(--bracket-game-wrap-height) * 8) + (var(--bracket-item-margin-bottom) * 8));
}

.tb-32-bracket.tb-32-teams-rows .bracket-row.bracket-row-size-4 {
    height: calc((var(--bracket-game-wrap-height) * 16) + (var(--bracket-item-margin-bottom) * 16));
}

.tb-32-bracket.tb-16-teams-rows .bracket-row.bracket-row-size-3 {
    height: calc((var(--bracket-game-wrap-height) * 4) + (var(--bracket-item-margin-bottom) * 4));
}

.tb-32-bracket.tb-16-teams-rows .bracket-row.bracket-row-size-4 {
    height: calc((var(--bracket-game-wrap-height) * 8) + (var(--bracket-item-margin-bottom) * 8));
}

.tb-32-bracket.tb-8-teams-rows .bracket-row.bracket-row-size-4 {
    height: calc((var(--bracket-game-wrap-height) * 4) + (var(--bracket-item-margin-bottom) * 4));
}
/* tb-32 specific styles end */


/* tb-16 specific styles start */
.tb-16-bracket.tb-16-teams-rows .bracket-row.bracket-row-size-2 {
    height: calc((var(--bracket-game-wrap-height) * 4) + (var(--bracket-item-margin-bottom) * 4));
}

.tb-16-bracket.tb-16-teams-rows .bracket-row.bracket-row-size-3 {
    height: calc((var(--bracket-game-wrap-height) * 8) + (var(--bracket-item-margin-bottom) * 8));
}

.tb-16-bracket.tb-8-teams-rows .bracket-row.bracket-row-size-3 {
    height: calc((var(--bracket-game-wrap-height) * 4) + (var(--bracket-item-margin-bottom) * 4));
}
/* tb-16 specific styles end */


/* tb-8 specific styles start */
.tb-8-bracket.tb-8-teams-rows .bracket-row.bracket-row-size-2 {
    height: calc((var(--bracket-game-wrap-height) * 4) + (var(--bracket-item-margin-bottom) * 4));
}
/* tb-8 specific styles end */







/* tb-16 position classes (mobile jump-to-position default) */
.tb-16-first-round {
    width: 960px;
    margin-left: 10px;
}




.bracket-row.bracket-row-4-final,
.bracket-row.bracket-row-8-final,
.bracket-row.bracket-row-16-final,
.bracket-row.bracket-row-32-final,
.bracket-row.bracket-row-64-final {
    display: flex;
    align-items: center;
}

.bracket-row.bracket-row-4-final {
    height: calc((var(--bracket-game-wrap-height) * 2) + (var(--bracket-item-margin-bottom) * 2));
}

.bracket-row.bracket-row-8-final {
    height: calc((var(--bracket-game-wrap-height) * 4) + (var(--bracket-item-margin-bottom) * 4));
}

.bracket-row.bracket-row-16-final {
    height: calc((var(--bracket-game-wrap-height) * 8) + (var(--bracket-item-margin-bottom) * 8));
}

.bracket-row.bracket-row-32-final {
    height: calc((var(--bracket-game-wrap-height) * 16) + (var(--bracket-item-margin-bottom) * 16));
}

.bracket-row.bracket-row-64-final {
    height: calc((var(--bracket-game-wrap-height) * 32) + (var(--bracket-item-margin-bottom) * 32));
}

.bracket-item {
    width: var(--bracket-item-w-280);
    height: calc(50% - var(--bracket-item-margin-bottom));
    margin-bottom: var(--bracket-item-margin-bottom);
    position: relative;
    display: flex;
    align-items: center;
}

.bracket-item-w-220 .bracket-item {
    width: var(--bracket-item-w-220);
}

.bracket-item-v-center {
    width: var(--bracket-item-w-280);
    height: auto;
    min-height: 90px;
}

.bracket-item::before {
    content: "";
    display: block;
    position: absolute;
    width: calc(var(--bracket-col-margin-right) * 0.5);
    height: calc(50% + 5px);
    right: calc(var(--bracket-col-margin-right) * -0.5);
}

.bracket-item-w-220 .bracket-item::before {
    width: calc(var(--bracket-col-64-margin-right) * 0.5);
    right: calc(var(--bracket-col-64-margin-right) * -0.5);
}

.bracket-item.bracket-item-top::before,
.bracket-item.bracket-item-bottom::before {
    border: solid 1px var(--col-bracket-connecting-tree-line);
}

.bracket-item.bracket-item-top::before {
    border-width: 1px 1px 0 0;
    border-top-right-radius: 4px;
    bottom: -5px;
}

.bracket-desktop-rtl .bracket-item.bracket-item-top::before {
    border-width: 1px 0 0 1px;
    border-top-right-radius: initial;
    border-top-left-radius: 4px;
    bottom: -5px;
}

.bracket-desktop-rtl.bracket-item-w-220 .bracket-item::before {
    left: calc(var(--bracket-col-64-margin-right) * -0.5);
    right: initial;
}

.bracket-item.bracket-item-top::after,
.bracket-item.bracket-item-bottom::after {
    content: "";
    display: block;
    position: absolute;
    width: calc((var(--bracket-col-margin-right) * 0.5) + 1px);
    height: calc(50% + 5px);
    right: calc(var(--bracket-col-margin-right) * -1);
    bottom: -6px;
    border-bottom: solid 1px var(--col-bracket-connecting-tree-line);
}

.bracket-item.bracket-item-bottom::after {
    bottom: auto;
    border-bottom: 0;
    top: -6px;
    border-top: solid 1px var(--col-bracket-connecting-tree-line);
}

.bracket-item-w-220 .bracket-item.bracket-item-top::after,
.bracket-item-w-220 .bracket-item.bracket-item-bottom::after {
    width: calc((var(--bracket-col-64-margin-right) * 0.5) + 1px);
    right: calc(var(--bracket-col-64-margin-right) * -1);
}

.bracket-desktop-rtl .bracket-item.bracket-item-top::after,
.bracket-desktop-rtl .bracket-item.bracket-item-bottom::after {
    right: initial;
    left: calc(var(--bracket-col-64-margin-right) * -1);
}

.bracket-item.bracket-item-bottom::before {
    border-width: 0 1px 1px 0;
    border-bottom-right-radius: 5px;
    top: -5px;
}

.bracket-desktop-rtl .bracket-item.bracket-item-bottom::before {
    border-width: 0 0 1px 1px;
    border-bottom-right-radius: initial;
    border-bottom-left-radius: 5px;
    top: -5px;
}

.bracket-game-wrap {
    height: var(--bracket-game-wrap-height);
    width: 100%;
    border-radius: 4px;
    background-color: var(--col-bracket-game-wrap);
    box-shadow: 0 0 5px 0 rgba(0,0,0,0.1);
    padding: 5px 0 5px 5px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    position: relative;
}

.bracket-team {
    display: flex;
    padding: 2px 0 2px 2px;
    font-size: 12px;
    position: relative;
}

    .bracket-team.game-winner {
        border-radius: 3px 0 0 3px;
    }

    .bracket-team.game-loser .bracket-team-name {
        color: var(--col-bracket-game-looser-text);
    }

.number-input {
    max-height: 18px;
    text-align: center;
    border-radius: 2px;
    min-width: 38px;
    max-width: 40px;
    font-size: 11px;
}

.bracket-team.game-winner .bracket-team-score {
    color: var(--col-bracket-game-winner-text);
}

    .bracket-team.game-winner .bracket-team-score::after {
        display: block;
        content: "";
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 0;
        height: 0;
        border-top: 7px solid transparent;
        border-bottom: 7px solid transparent;
        border-right: 7px solid var(--col-game-winner-arrow);
    }

.bracket-team-score-data {
    width: 45px;
    flex-shrink: 0;
    justify-content: center;
    color: #828a99;
    font-weight: 600;
    padding-right: 10px;
    position: relative;
    text-align: right;
    justify-content: end;
}

.bracket-team.game-winner .bracket-team-score-data {
    color: #0d0f1a;
}

    .bracket-team.game-winner .bracket-team-score-data::after {
        display: block;
        content: "";
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 0;
        height: 0;
        border-top: 7px solid transparent;
        border-bottom: 7px solid transparent;
        border-right: 7px solid #67ccff;
    }

.bracket-team.final-game-winner .bracket-team-score-data {
    color: #fff;
}

.bracket-team.logo-big .bracket-team-score-data {
    width: auto;
    max-width: 32px;
}

.bracket-team.final-game-winner {
    background-color: var(--col-basic);
    border-radius: 3px 0 0 3px;
}

    .bracket-team.final-game-winner .bracket-team-logo img {
        object-fit: initial;
        background: var(--col-white);
        border-radius: 2px;
    }

    .bracket-team.final-game-winner::after {
        content: "";
        display: block;
        background-image: url("../images/favicon.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100%;
        height: 20px;
        width: 20px;
        position: absolute;
        left: calc(100% + 4px);
        top: 50%;
        transform: translateY(-50%);
        margin-top: -1px;
    }

.bracket-desktop-rtl .bracket-team.final-game-winner::after {
    left: -30px;
}

.bracket-team.final-game-winner .bracket-team-rank,
.bracket-team.final-game-winner .bracket-win-loss,
.bracket-team.final-game-winner .bracket-team-name,
.bracket-team.final-game-winner .bracket-team-score {
    color: var(--col-white);
}


/* correctly-wrong winner chosen start */

.bracket-team.winner-correct-choice,
.bracket-team.winner-wrong-choice {
    border-radius: 3px 0 0 3px;
}

.bracket-team.winner-correct-choice {
    background-color: var(--col-winner-correct-choice);
}

.bracket-team.winner-wrong-choice {
    background-color: var(--col-winner-wrong-choice);
}

    .bracket-team.winner-wrong-choice .bracket-team-logo img,
    .bracket-team.winner-correct-choice .bracket-team-logo img {
        object-fit: initial;
        background: var(--col-white);
        border-radius: 2px;
    }

    .bracket-team.winner-correct-choice.final-game-winner > *,
    .bracket-team.winner-wrong-choice.final-game-winner > * {
        color: var(--col-black);
    }

/* correctly-wrong winner chosen end */


.bracket-game-wrap .bracket-team {
    margin-bottom: 3px;
    align-items: center;
    padding-left: 2px;
}

.bracket-team > * {
    display: flex;
    align-items: center;
}

.bracket-team-logo {
    height: var(--bracket-team-logo-size);
    width: var(--bracket-team-logo-size);
    flex-shrink: 0;
}

.bracket-game-wrap.winner-logo-big .bracket-team {
    padding-bottom: 2px;
    padding-top: 2px;
    margin-top: 0;
    margin-bottom: 0;
}

    .bracket-game-wrap.winner-logo-big .bracket-team .bracket-team-logo {
        height: calc(var(--bracket-team-logo-size) * 2);
        width: calc(var(--bracket-team-logo-size) * 2);
    }

.bracket-game-wrap.winner-logo-big .bracket-series-header {
    position: absolute;
    top: 8px;
    width: 100%;
}

.bracket-game-wrap.winner-logo-big .bracket-series-footer {
    position: absolute;
    bottom: 1px;
    width: 100%;
}

.bracket-team-logo img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    object-position: center;
    border-radius: 2px;
}

.bracket-team-rank {
    width: 20px;
    flex-shrink: 0;
    justify-content: center;
    color: var(--col-bracket-team-rank);
}

.bracket-win-loss {
    width: 34px;
    text-align: center;
    justify-content: center;
    color: var(--col-bracket-win-loss);
    font-size: 10px;
}

.bracket-team-score {
    width: 32px;
    flex-shrink: 0;
    justify-content: center;
    color: var(--col-bracket-team-score);
    font-weight: 600;
    padding-right: 10px;
    position: relative;
    text-align: right;
    justify-content: end;
}

.bracket-team.logo-big .bracket-team-score {
    width: auto;
    max-width: 32px;
}

.bracket-team.logo-big .bracket-win-loss {
    width: auto;
    max-width: 34px;
}

.bracket-team-name {
    font-weight: 600;
    flex: 1;
    position: relative;
    line-height: 1;
    color: var(--col-bracket-team-name);
}

/* Eliminated pick (Winners/results bracket): can no longer win points (story 12834).
   The .eliminated class sits on .bracket-team so themes can layer more than the
   strike-through (background, opacity, etc.). */

.bracket-team.eliminated::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;    
    z-index: 5;
    background-color: rgba(0,0,0,0.075);
    border-radius: 3px 0 0 3px;
    border: solid 1px rgba(0,0,0,0.1);
    border-width: 1px 0 1px 1px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='1' viewBox='0 0 100 1' preserveAspectRatio='none'%3E%3Cline x1='0' y1='0.5' x2='100' y2='0.5' stroke='%232e2e2e' stroke-width='1'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: calc(100% - 6px) 1px;
    background-position: 3px calc(58% - 1px);
}



.bracket-team.team-unknown .bracket-team-name::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 12px;
    width: 80%;
    border-radius: 5px;
    background-color: var(--col-bracket-team-unknown-track);
}

.bracket-series-header {
    color: var(--col-bracket-series-header);
    display: flex;
    justify-content: space-between;
    position: relative;
    padding: 0 5px;
    font-size: 11px;
    font-weight: 600;
    margin-top: -5px;
}

.bracket-series-footer {
    color: var(--col-bracket-series-footer);
    display: flex;
    justify-content: space-between;
    margin-left: -5px;
    position: relative;
    bottom: -5px;
    padding: 0 5px;
    font-size: 10px;
}

.bracket-row.bracket-row-16-final .bracket-series-footer,
.bracket-row.bracket-row-64-final .bracket-series-footer {
    position: absolute;
    width: 100%;
    bottom: 0;
}


.filter-section {
    min-height: 400px;
    transition: all 0.3s ease-in-out;
}





/* Bracket Drag and Drop start */

.bracket-drag-drop-panel {
    width: 210px;
    position: absolute;
    left: 10px;
    border-radius: 9px;
    z-index: 8;
    background-color: var(--col-bracket-drag-drop-panel-bg);
    box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.1);
    transition: all 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 340px);
    scrollbar-width: thin;
    scrollbar-color: var(--col-bracket-drag-drop-panel-scroll-button) var(--col-bracket-drag-drop-panel-scroll-track);
}

    .bracket-drag-drop-panel:hover {
        box-shadow: 1px 1px 8px 0 rgba(0,0,0,0.16);
    }

.bracket-dd-header {
    border-bottom: solid 1px var(--col-bracket-drag-drop-panel-header-footer-line);
}

.bracket-dd-title {
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 10px;
}

    .bracket-dd-title h3 {
        color: var(--col-basic);
        font-size: 13px;
        line-height: 1;
        flex: 1;
    }

@media (max-width: 767.98px) {
    .bracket-dd-title h3 {
        font-size: 12px;
    }
}

.bracket-dd-btn-area {
    display: flex;
    align-items: center;
    padding-left: 10px;
    padding-bottom: 3px;
}

.btn-reset-assignment, .btn-reset-assignment:focus {
    box-shadow: none !important; /* fights the host's Bootstrap .btn focus ring */
}

.btn-options {
    color: var(--col-btn-options);
    padding: 10px;
    background-color: transparent;
    position: relative;
}

.bracket-dd-search {
    padding: 5px 10px 10px 10px;
}

.bracket-dd-search-field {
    position: relative;
}

.btn-search {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: var(--col-btn-search);
    background-color: transparent;
    width: 32px;
    height: 32px;
    transition: all 0.2s ease-in-out;
}

    .btn-search:hover {
        color: var(--col-basic);
    }

.bracket-dd-search-field input {
    background-color: var(--col-bracket-dd-search-field);
    border-radius: 5px;
    width: 100%;
    padding: 5px 30px 5px 10px;
    transition: all 0.2s ease-in-out;
}

    .bracket-dd-search-field input:focus {
        background-color: var(--col-bracket-dd-search-field-focus);
    }

    .bracket-dd-search-field input::placeholder {
        color: var(--col-bracket-dd-search-field-placeholder);
    }

    .bracket-dd-search-field input:focus + .btn-search {
        color: var(--col-basic);
    }

.badge-num {
    display: inline-block;
    padding: 0.02em .5em 0 .5em;
    font-size: .85em;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--col-white);
    text-align: center;
    white-space: nowrap;
    border-radius: 50rem;
    background-color: var(--col-badge-num-bg);
    margin-right: 10px;
    height: 21px;
    line-height: 22px;
    min-width: 22px;
}


.bracket-dd-body {
    scrollbar-width: thin;
    flex: 1;
    overflow: auto;
    padding: 0 5px;
}

.bracket-dd-team-item {
    display: flex;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    align-items: center;
    font-size: 11px;
    padding: 2px 3px;
    margin-bottom: 3px;
    font-size: 12px;
    position: relative;
    border-radius: 3px;
    transition: all 0.2s ease-in-out;
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23e6e7e8' stroke-width='3' stroke-dasharray='0' stroke-dashoffset='0' stroke-linecap='round'/%3e%3c/svg%3e");
}

    .bracket-dd-team-item:last-of-type {
        margin-bottom: 0;
    }

    .bracket-dd-team-item:hover {
        background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23bdbebf' stroke-width='3' stroke-dasharray='5%2c 5' stroke-dashoffset='0' stroke-linecap='round'/%3e%3c/svg%3e");
        cursor: move;
    }

    .bracket-dd-team-item:active {
        background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%233a8dd6' stroke-width='3' stroke-dasharray='5%2c 6' stroke-dashoffset='0' stroke-linecap='round'/%3e%3c/svg%3e");
        cursor: grabbing;
    }

.bracket-dd-team-logo {
    height: var(--bracket-dd-team-logo-size);
    width: var(--bracket-dd-team-logo-size);
    flex-shrink: 0;
    padding: 0 1px;
    margin: 2px 5px 2px 1px;
    background-color: var(--col-white);
    border-radius: 2px;
}

    .bracket-dd-team-logo img {
        object-fit: contain;
        object-position: center;
        height: 100%;
        width: 100%;
    }

.bracket-dd-team-name {
    flex: 1;
    font-weight: 600;
    position: relative;
    line-height: 1;
    color: #2b2e33;
}

.bracket-dd-team-rank {
    width: 20px;
    flex-shrink: 0;
    text-align: center;
    color: #575966;
}

.bracket-dd-footer {
    height: 12px;
    border-top: solid 1px var(--col-bracket-drag-drop-panel-header-footer-line);
}

/* Bracket Drag and Drop end */

/* telerik tooltip start ----------------------------- */
.game-box.tooltip-target {
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}

    .game-box.tooltip-target:hover {
        box-shadow: inset 0 0 0 2px var(--col-basic-light);
    }

    .game-box.tooltip-target:after {
        display: block;
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 100;
        border: solid 2px var(--col-basic-light);
        border-radius: 4px;
        pointer-events: none;
        visibility: hidden;
    }

    .game-box.tooltip-target:hover:after {
        visibility: visible;
    }

.telerik-blazor.k-tooltip {
    background: var(--col-tooltip-bg);
    max-width: 280px;
    border-radius: 5px;
    padding: 10px;
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);
}

    .telerik-blazor.k-tooltip .k-callout {
        /* same as tooltip background */
        color: #2c5f80;
    }

.bracket-tooltip {
    color: var(--col-white);
}

    .bracket-tooltip h5 {
        font-size: 14px;
        margin-bottom: 6px;
        color: var(--col-white);
        letter-spacing: 0.03em;
    }

    .bracket-tooltip p {
        margin-bottom: 5px;
        color: var(--col-white);
        font-size: 12px;
    }

        .bracket-tooltip p.separator {
            display: block;
            position: relative;
            text-align: center;
            color: rgba(255,255,255,0.8);
        }

            .bracket-tooltip p.separator::before {
                display: block;
                content: "";
                position: absolute;
                height: 1px;
                width: 100%;
                background-color: rgba(255,255,255,0.2);
                left: 0;
                top: 50%;
                z-index: 1;
            }

            .bracket-tooltip p.separator span {
                display: inline-block;
                padding: 0 4px;
                background: #2c5f80;
                position: relative;
                z-index: 5;
            }


    .bracket-tooltip ul {
        font-size: 12px;
        margin: 0 0 5px 0;
        color: rgba(255,255,255,0.8);
    }

        .bracket-tooltip ul li {
            margin-bottom: 3px;
        }

            .bracket-tooltip ul li:last-of-type {
                margin-bottom: 0;
            }

        .bracket-tooltip ul .value {
            color: var(--col-white);
            font-size: 13px;
            font-weight: 600;
        }

        .bracket-tooltip ul:last-of-type {
            margin-bottom: 1px;
        }
/* telerik tooltip end ----------------------------- */

/* Drag-Drop list box start */
.k-list.k-list-md {
    width: 100%;
}

.k-list-item.telerik-blazor {
    display: block;
    padding: 0;
}

.k-listbox .k-list-scroller .k-list {
    width: 100%;
}

.k-list-md .k-list-item {
    padding: 0;
}

.k-list-item:hover {
    background: rgba(0,0,0,0);
}

.k-listbox .k-list-scroller {
    background: rgba(0,0,0,0);
    transition: all 0.2s ease-in-out;
    border: 0;
}

    .k-listbox .k-list-scroller:hover {
        background: rgba(0,0,0,0.01);
    }

.k-list-content {
    align-items: start;
    display: flex;
    width: 100%;
    overflow: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
}

.k-list-ul {
    width: 100%;
}

.bracket-game-wrap .bracket-team:last-of-type {
    margin: 0;
}

/* Bracket Create - Team border, Bg, Corner radius - start */
.bracket-drag-drop-wrap + .bracket-tournament-filter-section .bracket-game-wrap {
    padding: 5px;
}

.bracket-drag-drop-panel .listbox-container {
    scrollbar-width: thin;
}

.bracket-drag-drop-wrap + .bracket-tournament-filter-section .bracket-game-wrap .listbox-container:first-child {
    margin-bottom: 3px;
}

.bracket-drag-drop-wrap + .bracket-tournament-filter-section .bracket-game-wrap .k-listbox .k-list-scroller {
    border: solid 1px var(--col-bracket-create-team-border);
    border-radius: var(--col-bracket-create-team-radius);
}

.bracket-drag-drop-wrap + .bracket-tournament-filter-section .bracket-game-wrap .k-listbox .k-list-scroller {
    background-color: rgba(0,0,0,0.05);
}

    .bracket-drag-drop-wrap + .bracket-tournament-filter-section .bracket-game-wrap .k-listbox .k-list-scroller:hover {
        background: rgba(0,0,0,0.1);
    }

/* Bracket Create - Team border, Bg, Corner radius - end */


.k-drag-clue {
    background-color: #008cd5;
    border: 0;
    padding: 0;
    min-width: 200px;
}

    .k-drag-clue > * {
        width: 100%;
    }

    .bracket-drag-drop-wrap .k-list-item.k-selected,
    .k-drag-clue .k-list-item.k-selected {
        color: var(--col-white);
        background-color: #008cd5;
        border-radius: 3px;
    }

.bracket-game-wrap .k-list-item.k-selected {
    color: var(--col-white);
    background-color: #008cd5;
}

.bracket-game-wrap .k-listbox .k-list-scroller {
    border-right: 0;
    border-radius: 3px 0 0 3px;
}

.bracket-drag-drop-wrap .k-list-item.k-selected:hover,
.k-drag-clue .k-list-item.k-selected:hover,
.bracket-game-wrap .k-list-item.k-selected:hover {
    color: var(--col-white);
    background-color: #008cd5;
}

/* !important (this block): fights the Telerik theme's own k-* rules, which load
   with equal-or-higher specificity and set their own colors/margins */
.bracket-drag-drop-wrap .k-list-item.k-selected div,
.k-drag-clue .k-list-item.k-selected div,
.k-drag-clue .k-list-item div,
.bracket-game-wrap .k-list-item.k-selected div {
    color: var(--col-white) !important;
}

.bracket-drag-drop-wrap .k-list-item {
    margin-top: .25rem !important;
}

    .bracket-drag-drop-wrap .k-list-item .bracket-dd-team-item,
    .k-drag-clue .k-list-item .bracket-dd-team-item {
        margin: 0 !important;
    }
/* Drag-Drop list box end */

/* Sticky nav start */

/* Deliberate top-level exception to the scoped-reset rule (ISTB-13051 review):
   position:sticky (drag-drop panel, rounds-nav bar) fails when any ancestor
   scroll-locks, and host apps commonly set overflow on html/body (modals).
   html/body are ancestors of .bracket-control, so this cannot live inside the
   :where() scope - it is a small, intentional reach into the host page. */
html, body,
.tournamentbracket-bracket-scrollable-32,
.tournamentbracket-bracket-scrollable-64,
.tournamentbracket-bracket-scrollable-128 {
    overflow: initial;
}

.bracket-drag-drop-wrap {
    position: sticky;
    top: 93px;
    left: 10px;
    transition: all 0.2s ease-in-out;
}

@media (max-width: 991.98px) {
    .bracket-drag-drop-wrap {
        top: 247px;
    }

    .sticky-rounds-nav .bracket-drag-drop-wrap {
        top: 153px;
    }
}

    .bracket-drag-drop-panel::-webkit-scrollbar {
        width: 10px;
    }

    .bracket-drag-drop-panel::-webkit-scrollbar-track {
        background: var(--col-bracket-drag-drop-panel-scroll-track);
    }

    .bracket-drag-drop-panel::-webkit-scrollbar-thumb {
        background-color: var(--col-bracket-drag-drop-panel-scroll-button);
        border-radius: 20px;
    }

/* !important on margins (here and in the sticky variant below): the filter bar
   carries the Bootstrap mx-auto utility, which must not re-center it while stuck */
.bracket-tournament-filter-button {
    position: sticky;
    z-index: 65;
    width: calc(100% - 10px);
    margin-left: 0 !important;
    margin-right: 0 !important;
    transition: all 0.2s ease-in-out;
}

.sticky-rounds-nav .bracket-tournament-filter-section .bracket-tournament-filter-button {
    top: 83px;
    z-index: 65;
    box-shadow: 0 5px 5px 0 rgba(0,0,0,0.2);
    margin-left: 0 !important;
    margin-right: 0 !important;
    background: white;
    border-radius: 0 0 9px 9px;
}

@media (max-width: 991.98px) {
    .sticky-rounds-nav .bracket-tournament-filter-section .bracket-tournament-filter-button {
        width: 100%;
        border-radius: 0;
    }
}

/* Sticky nav end */


/* Specific Bracket Breakpoints start */
.for-mobile {
    display: none;
}

.for-desktop {
    display: block;
}

@media (max-width: 1199.98px) {
    .for-mobile {
        display: block;
    }

    .for-desktop {
        display: none;
    }
}

.bracket-create-mode .for-mobile {
    display: block;
}

.bracket-create-mode .for-desktop {
    display: none;
}

.bracket-create-mode .bracket-tournament-filter-content {
    max-width: calc(100% - 240px);
    margin-left: 230px;
    border: solid 1px var(--col-bracket-tournament-filter-content-border);
    border-radius: 9px;
    box-shadow: inset 0 0 10px 0 rgba(0,0,0,0.05);
    background-color: var(--col-bracket-tournament-filter-content-bg);
}

.bracket-create-mode .bracket-tournament-filter-button {
    border-bottom-color: transparent;
}


@media (min-width: 992px) {

    .bracket-create-mode .bracket-tournament-filter-content {
        margin-left: 0;
        max-width: calc(100% - 10px);
    }

    .bracket-create-mode .tournament-bracket-section-wrap {
        padding-left: 230px;
    }
}


/* Specific Bracket Breakpoints end */


/* Helpers start */
.overflow-h {
    overflow: auto;
    overflow-y: hidden;
}

/* Helpers end */


/* Missing-games layout start (former style-bracket-missing-games.css, merged ISTB-13051).
   These rules sit at the end of the file so cascade order lets them win their
   ties naturally - the !important flags the standalone file needed (it was
   @imported ABOVE the base rules) are gone. */

/* Shrink the bracket grid spacing - preserves tree positions while compacting layout */
.bracket-main-wrap-1 {
    --bracket-game-wrap-height: 70px;
    --bracket-item-margin-bottom: 7px;
}

.bracket-main-wrap-2 {
    --bracket-game-wrap-height: 60px;
    --bracket-item-margin-bottom: 5px;
}

.bracket-main-wrap-3, .bracket-main-wrap-0 {
    --bracket-game-wrap-height: 50px;
    --bracket-item-margin-bottom: 2px;
}

.bracket-main-wrap-4 {
    --bracket-game-wrap-height: 40px;
    --bracket-item-margin-bottom: 6px;
}

.bracket-main-wrap-5 {
    --bracket-game-wrap-height: 30px;
    --bracket-item-margin-bottom: 3px;
}

.bracket-main-wrap-6 {
    --bracket-game-wrap-height: 25px;
    --bracket-item-margin-bottom: 2px;
}

.bracket-main-wrap-7 {
    /*32-12-4-visible*/
    /*128-32-8-visible*/
    /*128-32-16-visible*/
    --bracket-game-wrap-height: 20px;
    --bracket-item-margin-bottom: 2px;
}

.bracket-main-wrap-8 {
    --bracket-game-wrap-height: 17px;
    --bracket-item-margin-bottom: 2px;
}

.bracket-main-wrap-9 {
    --bracket-game-wrap-height: 14px;
    --bracket-item-margin-bottom: 2px;
}

.bracket-main-wrap-10 {
    /*64-12-4-visible*/
    /*128-16-8-visible*/
    --bracket-game-wrap-height: 10px;
    --bracket-item-margin-bottom: 1px;
}

.bracket-main-wrap-11 {
    --bracket-game-wrap-height: 7px;
    --bracket-item-margin-bottom: 1px;
}

.bracket-main-wrap-12 {
    /*128-12-4-visible*/
    /*128-8-4-visible*/
    --bracket-game-wrap-height: 5px;
    --bracket-item-margin-bottom: 1px;
}

.bracket-main-wrap-13 {
    --bracket-game-wrap-height: 3px;
    --bracket-item-margin-bottom: 1px;
}

.bracket-main-wrap-14 {
    --bracket-game-wrap-height: 1px;
    --bracket-item-margin-bottom: 1px;
}

/* Keep visible game boxes at readable size (they overflow their small containers) */
.bracket-item:not([style*="visibility:hidden"]) .bracket-game-wrap {
    height: 80px;
    position: relative;
    z-index: 1;
}

/* Allow game boxes to overflow their shrunken containers */
.bracket-item,
.bracket-row,
.bracket-col {
    overflow: visible;
}

/* Extra padding so the bottom-most game box isn't clipped */
.bracket-main-wrap {
    padding-bottom: 50px;
}

.missing-games .bracket-row.bracket-row-final {
    height: calc(100% - 30px);
}

/* Missing-games layout end */


/* Tooltip suppression start (former style-bracket-common.css, merged ISTB-13051) */

@media (max-width: 1199.98px) {
    /* The Telerik tooltip popup positions itself with inline styles;
       !important is required to keep it hidden on compact layouts. */
    .bracket-game-tooltip {
        display: none !important;
    }
}

/* Tooltip suppression end */

/* xxxxxxxxxxxxxxxxxxxxxxxxxxxx Tournament Bracket section css end xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */