.hidden,
.hidden-element,
.hidden-page,
#referenceList,
.display-none {
    display: none !important;
}

* {
    -webkit-touch-callout: none;
    user-select: text;
    box-sizing: border-box;
}


#loadingmask {
  	background-color: #000;
  	height: 100%;
  	width: 100vw;
  	position: fixed;
  	inset: 0;
  	display: table;
    color: #848484;
  	top: 0;
  	bottom: 0;
  	margin: 0;
  	padding: 0;
  	z-index: 9999999;
    opacity: 1;
    pointer-events: none;
        transition:
            opacity 400ms ease-out,
            transform 400ms ease-out,
            filter 800ms ease-out;
            filter: blur(0);
}

@keyframes fadeInLogo {
  to { opacity: 1; }
}
#loading-text,
#loading-logo {
    opacity: 0;
    animation: fadeInLogo 0.4s ease-in forwards;
    margin: 22px auto 18px auto;
    width: 148px;
}
#loadingmask.is-hidding {
    opacity: 0;
    filter: blur(8px);
    pointer-events: none;
}

#loading-outer {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    padding: 12vh 0 25vh 0;
}

#loading-image {
    width: 190px;
    height: 190px;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
    filter: drop-shadow(0px 0px 1px rgba(255, 255, 255, .5));
}
#loading-image-ball {
    width: 60px;
    height: 60px;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
    filter: drop-shadow(0px 0px 1px rgba(255, 255, 255, .8));
}

#loading-image img {  /* Flags slow */
    opacity: 1;
    width: 102%;
    height: 102%;
    margin: -4px 0px 0px -2px;
    display: block;
    animation: spin 3s linear infinite;
    backface-visibility: hidden;
}
#hall-of-fame-page #loading-image-ball img,
#loading-image-ball img {  /* Ball */
    opacity: 1;
    width: 108%;
    height: 108%;
    margin: -3% 0 0 -3%;
    display: block;
    animation: spin .25s linear infinite;
    backface-visibility: hidden;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}


:root {

    --layer-wrap-max: 720px;
    --wrap-small: 480px;

    --bg-cool-gray: #f5f5f7;
    --bg-black: #111;
    --bg-black-persistent: #111;
    --bg-white-persistent: #fff;
    --bg-white: #fff;
    --bg-layer: #fff;
    --bg-hall-light: rgb(255 168 171 / 20%);
    --bg-message-yellow: #fff9dc;
    --bg-group-button: #ffffff;
    --bg-button-blue: #336fcc;
    --bg-detail-selection: #fff;
    --bg-selected-green: #e8f9ee;
    --bg-selected-red: #ffefdd;
    --bg-box: rgb(204 206 210 / 40%);
    --bg-footer: #2b2d2f;
    --bg-footer-bottom: #18191a;
    --bg-final-details-message: #d7bc6a; /* #fec86c;  #fef3c3; */
    --bg-final-details-selection: rgb(215 188 106 / 20%);
    --bg-bet-message: rgb(69 82 102);

    --font_style_01: 14.8px/26px 'Roboto Mono','SFMono-Regular','SF Mono','Courier New',ui-monospace,monospace;
    --font_serif: Georgia,Times,Garamond,serif;

    --font_color-black: rgb(0 0 0 / 90%);
    --font_color-black-persistent: rgb(0 0 0 / 90%);
    --font_color-white: rgb(255 255 255 / 95%);
    --font_color-white-persistent: rgb(255 255 255 / 95%);
    --font_color-grey-b: rgb(0 0 0 / 40%);
    --font_color-grey-w: rgb(255 255 255 / 50%);
    --font_color_link_blue: #6e86cb;
    --font_color-red: #a84b4f;
    --align-center: center;

    --letter-spacing-base: 0.02em;
    --letter-spacing-white-persistent: 0.04em;
    --letter-spacing-00: 0em;
    --letter-spacing-04: 0.04em;
    --letter-spacing-06: 0.06em;
    --letter-spacing-12: 0.12em;  /*metaheader*/
    --letter-spacing-20: 0.2em;
    --letter-spacing-font-larger: -0.03em;

    --box-shadow-button: 1px 1px 4px 0px rgb(0 0 0 / 5%);
    --box-shadow-button-btn-link: 1px 1px 3px 0px rgb(0 0 0 / 10%);
    --box-shadow-selected-green: inset 0px 0px 12px -3px rgb(0 0 0 / 5%);
    --box-shadow-strong: 10px 9px 30px 1px rgb(0 0 0 / 20%);
    --box-shadow-bg-box: 2px 2px 6px 0px rgb(0 0 0 / 5%);
    --box-shadow-wide: 4px 4px 16px 2px rgb(0 0 0 / 6%);
    --box-shadow-footer: 0px -1px 8px 6px rgb(0 0 0 / 10%);
    --box-shadow-input: inset 3px 3px 4px rgb(0 0 0 / 10%);

    --box-shadow-3d:    rgb(255 255 255 / 85%) 0px 3px 5px 4px,
                        rgb(0 0 0 / 48%) 0px 1px 11px 2px,
                        rgba(10, 37, 64, 0.3) 4px 5px 20px 0px inset;

    --border_color-grey: rgb(0 0 0 / 15%);
    --border_color-grey-dark: rgb(122 122 122 / 60%);
    --border_bg-box: 1px solid rgb(0 0 0 / 5%);
    --border_dashed: 1px dashed rgb(0 0 0 / 20%);
    --border-selected-green-left: #00b075;
    --border-selected-red-left: #ff8c00;
    --border-selected-grey-left: #949494;
    --border-scroll-arrow: rgb(0 0 0 / 45%);
    --border-is-green-selected: 1px dashed rgb(255 255 255 / 30%);

    --margin-top-20: 20px;
    --margin-top-40: 40px;
    --margin-top-60: 60px;
    --margin-top-100: 100px;

    --color_bordeaux: #a84b4f;
    --color_0-percent-black: rgb(0 0 0 / 0%);
    --color_5-percent-black: rgb(0 0 0 / 5%);
    --color_50-percent-black: rgb(0 0 0 / 50%);
    --color_10-percent-white: rgb(255 255 255 / 10%);
    --color_20-percent-white: rgb(255 255 255 / 20%);
    --color_50-percent-grey: rgb(136 136 136 / 50%);


    /*** Metaheader ***/
    --bg-black-metaheader: #111;

}




/* =========================
   Theme: Dark
========================= */
[data-theme="dark"] {
    --bg-cool-gray: #232426; /* #302f31; */
    --font_color-black: rgb(255 255 255 / 80%);
    --bg-black: #fff;
    --bg-layer: #232426; /* #302f31; */
    --bg-white: #232426; /* #302f31; */
    --bg-box: rgb(210 215 223 / 5%);
    --bg-message-yellow: rgb(245 231 160 / 75%);
    --border_bg-box: 1px solid rgb(255 255 255 / 5%);
    --border_dashed: 1px dashed rgb(255 255 255 / 20%);
    --border_color-grey: rgb(71 73 77 / 50%);
    --bg-group-button: #1b1c1d;
    --bg-hall-light: rgb(168 75 79 / 67%);
    --bg-selected-green: #364b3a;
    --border-selected-green-left: #607e66;
    --bg-selected-red: #494441;
    --border-selected-red-left: #767270;
    --border-selected-grey-left: #3e3f41;
    --bg-detail-selection: rgb(0 0 0 / 10%);
    /* --bg-bet-message: rgb(110 146 200 / 35%); */
    --letter-spacing-base: 0.06em;
    --letter-spacing-00: 0.02em;
    --letter-spacing-04: 0.08em;
    --letter-spacing-font-larger: 0em;
    --font_color-grey-b: rgb(255 255 255 / 30%);
    --box-shadow-footer: none;
    --border-scroll-arrow: rgb(255 255 255 / 80%);
    --box-shadow-bg-box: 2px 2px 6px 0px rgb(0 0 0 / 25%);
    --box-shadow-wide: 4px 4px 16px 2px rgb(0 0 0 / 40%);
    --box-shadow-button: 1px 1px 4px 0px rgb(0 0 0 / 20%);
    --box-shadow-button-btn-link: 1px 1px 3px 0px rgb(0 0 0 / 40%);
    --box-shadow-input: inset 3px 3px 4px rgb(0 0 0 / 30%);

}

/* roboto-mono-500 - latin */
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Mono'), local('RobotoMono-Regular'),
       url('../fonts/roboto-mono/roboto-mono-v7-latin-regular.woff2') format('woff2'),
       url('../fonts/roboto-mono/roboto-mono-v7-latin-regular.woff') format('woff');
}

body {
    font: var(--font_style_01);
    letter-spacing: var(--letter-spacing-00);
    color: var(--font_color-black);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -webkit-text-size-adjust: 100%;
    margin: 0;
    padding: 0 0 0 0;
    background-color: var(--bg-cool-gray);
}

.top-20 { margin-top: var(--margin-top-20) !important; }
.top-40 { margin-top: var(--margin-top-40) !important; }
.top-60 { margin-top: var(--margin-top-60) !important; }
.top-100 { margin-top: var(--margin-top-100) !important; }

.smaller { font-size: smaller; line-height: 184%; letter-spacing: var(--letter-spacing-00); }
.small { font-size: small; line-height: 164%; letter-spacing: var(--letter-spacing-base); }
.large { font-size: large; }
.larger { font-size: larger; }
.color-bordeaux { color: var(--color_bordeaux); }

.predictor-stage-header {
    margin: 120px 0 40px 0;
    padding: 0 20px 0 20px;
    user-select: none;
    -webkit-user-select: none;
    display: flex;
    flex-direction: column;
    position: relative;
}
.predictor-stage-header.first-header {
    margin: 20px 0 40px 0;
}
.predictor-stage-header h3 {
    font-size: 248%;
    line-height: 112%;
    font-family: var(--font_serif);
    letter-spacing: var(--letter-spacing-00);
    margin: 10px 0 0 0;
    text-align: center;
}
.predictor-stage-header h4,
.predictor-stage-header .h4 {
    margin: 10px auto 20px auto;
    max-width: var(--wrap-small);
    /* font-size: small; */
    letter-spacing: var(--letter-spacing-base);
    line-height: 148%;
    text-align: center;
}
.rounded-bullet {
    display: inline-flex;
    width: auto;
    vertical-align: middle;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
}
.rounded-bullet span.rounded {
    margin: 0;
    /* padding: 0.52em 0.45em 0.6em 0.4em; font-size: 240%; */
    padding: 0.49em 0.45em 0.5em 0.42em;
    background: var(--bg-black-persistent);
    border-radius: 100%;
    width: auto;
    height: 100%;
    display: inline-flex;
    position: relative;
    aspect-ratio: 1 / 1;
    align-items: center;
    text-align: center;
    justify-content: center;
    font-size: 360%;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -0.05em;
    color: var(--font_color-white-persistent);
    border: 1px solid;
    border-color: transparent;
}

.rounded.rounded-img {
    padding: 0.08em 0.15em 0.07em 0.15em !important;
}

/***** Translate *****/
#language {
    position: absolute;
    top: 0;
    left: 0;
}


/***** GRID *****/
/*-------- Reset, Clearfix -----------*/
.clearfix { zoom: 1; }
.clearfix:before,
.clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
a, article, aside, div, embed, figcaption, figure,
footer, form, h1, h2, h3, h4, h5, h6, header, html, i, iframe,
img, li, nav, ol, p, section, small, span, ul {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline;
}
*, :before, :after {
    box-sizing: border-box;
    background-repeat: no-repeat;
}
button, a {
    font: inherit;
}
#page {
    max-width: 100%;
    position: relative;
    overflow: hidden;
}
.wrap {
    width: 100%;
    margin: 0 auto;
}
#intro-header {
    margin: 70px 0 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
}
#app-intro {
     margin: 0 0 0 12px;
     text-align: left;
     max-width: 320px;
     font-size: x-small;
     line-height: 174%;
     color: var(--font_color-black);
     letter-spacing: var(--letter-spacing-base);
 }
#app-analyzer-intro,
#app-hall-intro {
    margin: 0 0 0 12px;
    text-align: left;
}
#hall-intro {
    margin: 0 12px 0 0;
    justify-self: end;
    text-align: right;
}
#hall-intro div {
    margin: 3px 0 0 0;
}
.predictor-groups-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 48px; 16px;
}
@media screen and (min-width: 720px) {
    .predictor-groups-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 20px; 20px;
    }
    .predictor-bracket__matches {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }
    .wrap {
        width: 100%;
    }
}
@media screen and (min-width: 1024px) {
    .predictor-groups-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    .predictor-bracket__matches {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 80px 80px !important;
    }
    .wrap {
        width: 95%;
    }
}



.predictor-group-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-width: 100%;
    gap: 24px;
    padding: 12px;
    background: var(--bg-box);
    border: var(--border_bg-box);
    border-radius: 2px;
    box-shadow: var(--box-shadow-bg-box);
    position: relative;
}
.predictor-group-placeholder {
    display: flex;
    align-items: center;
    align-self: stretch;
    gap: 16px;
    flex: 1 0 0;
    min-height: 48px;
    border-left: 4px solid transparent;
    padding: 0 12px;
    background: var(--bg-white);
    position: relative;
}
.predictor-match-team__placeholder,
.predictor-match-team__placeholder span:last-child {
    color: var(--font_color-grey-b);
    font-size: smaller;
    letter-spacing: var(--letter-spacing-base);
    line-height: 148%;
    user-select: none;
    -webkit-user-select: none;
}
[data-match-id="M103"] .predictor-match-team__placeholder {
    opacity: 0 !important;
}
article, aside, footer, header, hgroup, menu, nav, section {
    display: block;
}
.predictor-group-card > header,
.predictor-match-tile__title span:first-child {
    background: var(--bg-black-persistent);
    position: absolute;
    margin: 0 10px 0 0;
    padding: 6px 16px 6px 12px;
    top: 0px;
    left: -1px;
    font-size: x-large;
    color: var(--font_color-white-persistent);
    line-height: 1;
}
[data-theme="dark"] .predictor-group-card > header,
[data-theme="dark"] .predictor-match-tile__title span:first-child {
    top: -1px;
}
.predictor-group-card > header > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 900;
    font-size: larger;
}
.predictor-group-card > header > span > span {
    font-weight: 400;
    font-size: smaller;
}
.predictor-group-card > header strong {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: 2px 4px 1px;
    border-radius: 4px;
    background: var(--bg-box);
    mix-blend-mode: multiply;
    color: var(--font_color-black);
    font-style: normal;
    font-weight: 400;
    text-transform: none;
    white-space: nowrap;
}
.predictor-group-card__options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 54px 0 0 0;
}
.predictor-group-option.is-selected, .predictor-group-option:disabled {
    opacity: .5;
}
.predictor-group-option {
    display: flex;
    align-items: center;
    justify-content: left;
    gap: 4px;
    flex: 1 0 0;
    height: auto;
    padding: 0.5em 0.5em 0.4em 0.6em;
    border: 1px solid;
    border-color: var(--border_color-grey);
    border-radius: 6px;
    background: var(--bg-group-button);
    box-shadow: var(--box-shadow-button);
    color: var(--font_color-black);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}
.predictor-group-card__list .predictor-flag-badge, .predictor-group-card__list .predictor-team-tile__identity .predictor-team-tile__name, .predictor-group-card__list .predictor-team-tile__name {
    transition: opacity .2s ease;
}
.predictor-position-slot__number {
    display: inline-block;
    width: 21px;
}
.predictor-group-card__list .predictor-team-tile[data-position="3"] {
    border-left-color: var(--border-selected-red-left);
    background-color: var(--bg-selected-red);
}
.predictor-group-card__list .predictor-team-tile[data-position="1"], .predictor-group-card__list .predictor-team-tile[data-position="2"] {
    border-left-color: var(--border-selected-green-left);
    background-color: var(--bg-selected-green);
}
.predictor-group-card__list .predictor-team-tile[data-position="4"] {
    border-left-color: var(--border-selected-grey-left);
    border-bottom: 0;
}

.predictor-group-card__list .predictor-team-tile {
    display: flex;
    align-items: center;
    gap: 0;
    height: 48px;
    min-height: 48px;
    padding: 0 12px;
    position: relative;
    border-bottom: 0;
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
}
.predictor-team-tile {
    display: grid;
    grid-template-columns: 50px 24px 1fr 40px;
    align-items: center;
    width: 100%;
    min-height: 41px;
    border: 0;
    border-left: 6px solid transparent;
    border-bottom: 1px solid #000;
    background-color: var(--bg-white);
    padding: 0;
    text-align: left;
    cursor: pointer;
    color: inherit;
    isolation: isolate;
}

.predictor-drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 14px 12px 14px;
    margin: 0;
    background-position: 50% 50%;
    background-image: url(dragable-icon.svg);
    background-repeat: no-repeat;
    display: block;
    background-size: cover;
    height: 20px;
    width: 28px;
    aspect-ratio: 1 / 1;
    opacity: 0.7;
    cursor: grab;
}
[data-theme="dark"] .predictor-drag-handle {
    background-image: url(dragable-icon-white.svg);
    opacity: 0.4 !important;
}

.predictor-drag-handle:active {
    cursor: grabbing;
}
.predictor-team-tile,
.predictor-team-tile__name{
    user-select: none;
    -webkit-user-select: none;
    line-height: 118%;
}
.predictor-team-tile:hover .predictor-drag-handle {
    opacity: 1;
}
.predictor-team-tile:hover {
    cursor: default;
}
.sortable-chosen {
    border: 1px dashed #dedede;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
.is-chosen{
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
.is-chosen.my-custom-ghost {
    border: 1px dashed #000 !important;
}

.predictor-group-card__list .predictor-team-tile__identity,
.predictor-team-tile--overlay .predictor-team-tile__identity {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    gap: 8px;
}
.predictor-group-card__list .predictor-team-tile[data-position="4"] .predictor-flag-badge,
.predictor-group-card__list .predictor-team-tile[data-position="4"] .predictor-team-tile__name,
.predictor-group-card__list .predictor-team-tile.is-dragging[data-position="4"] .predictor-flag-badge,
.predictor-group-card__list .predictor-team-tile.is-dragging[data-position="4"] .predictor-team-tile__name,
.predictor-team-tile--overlay[data-position="4"] .predictor-flag-badge,
.predictor-team-tile--overlay[data-position="4"] .predictor-team-tile__name {
    opacity: .3;
}
.predictor-group-card__list .predictor-flag-badge, .predictor-group-card__list .predictor-team-tile__identity .predictor-flag-badge, .predictor-team-tile--overlay .predictor-flag-badge {
    flex: 0 0 26px;
    width: 26px;
    height: 20px;
    margin-left: 0;
    border-radius: 2px;
}
.predictor-group-card__list .predictor-flag-badge, .predictor-group-card__list .predictor-team-tile__identity .predictor-team-tile__name, .predictor-group-card__list .predictor-team-tile__name {
    transition: opacity .2s ease;
}
.predictor-flag-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 20px;
    height: 15px;
    margin-left: 8px;
    border: .5px solid var(--color_5-percent-black);
    border-radius: 4px;
    background: var(--color_5-percent-black);
    color: var(--font_color-white);
    font-size: 11px;
    line-height: 1;
}
.predictor-group-option .predictor-flag-badge {
    width: 26px;
    height: auto;
    border-radius: 0px;
    margin: 0 0.3em 0 0;
}
.predictor-flag-badge__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.predictor-group-option span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/***** best 3 Lugar  *****/
.predictor-third-place-grid {
    display: flex;
    width: 100%;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    border-radius: 0px;
    border: var(--border_bg-box);
    background: var(--bg-box);
    box-shadow: var(--box-shadow-bg-box);
}
.predictor-third-place-grid__label {
    width: 100%;
    margin: 20px 0 32px 0;
    line-height: 1;
    text-align: center;
}
.predictor-third-place-grid__label span {
    padding: 0.4em;
}
.number-selected {
    font-weight: 900;
    padding: 0.35em 0.7em 0.4em 0.7em !important;
    border: 1px solid var(--border_color-grey);
    border-radius: 4px;
}
.predictor-third-place-grid__slots {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columns */
    grid-template-rows: repeat(6, auto);   /* 6 rows */
    gap: 0px 30px;
    padding: 0;
    width: 100%;
}
.predictor-third-place-placeholder {
    display: flex;
    height: 48px;
    justify-content: flex-start;
    align-items: center;
    align-self: stretch;
    padding: 0 12px;
    background: var(--bg-white);
    color: var(--font_color-grey-b);
    font-size: smaller;
    letter-spacing: var(--letter-spacing-base);
    margin: 0 0 16px 0;
}
.predictor-third-place-grid__slots .predictor-flag-badge {
    flex: 0 0 auto;
    width: 24px;
    height: 18px;
    margin-left: 0;
    margin-right: 8px;
    border-radius: 2px;
    transition: opacity .2s ease;
}
.predictor-third-place-grid__column {
    display: contents;
}

@media screen and (max-width: 580px) {   /* Instead normal 640px */
    .predictor-third-place-grid__slots {
        grid-template-columns: repeat(1, 1fr); /* 1 columns */
        grid-template-rows: repeat(12, auto);   /* 12 rows */
        gap: 0px 30px;
    }
    .two-column {
        grid-template-columns: repeat(1, 1fr) !important;
        gap: 0px 30px;
    }
    .two-column img {
        max-width: 80% !important;
    }
}
@media screen and (min-width: 768px) {
    .predictor-third-place-grid__slots {
        grid-template-columns: repeat(3, 1fr); /* 3 columns */
        grid-template-rows: repeat(4, auto);   /* 4 rows */
        gap: 0px 30px;
    }
}
@media screen and (min-width: 1024px) {
    .predictor-third-place-grid__slots {
        grid-template-columns: repeat(4, 1fr); /* 4 columns */
        grid-template-rows: repeat(3, auto);   /* 3 rows */
        gap: 0px 30px;
    }
}

.predictor-third-place-grid__slots .predictor-team-tile {
    display: flex;
    align-items: center;
    min-height: 48px;
        border: 0;
        border-radius: 6px;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        border-left: 6px solid transparent !important;
        border: 1px solid;
        border-color: var(--border_color-grey);
    background: var(--bg-white);
    box-shadow: var(--box-shadow-bg-box);
    margin: 0 0 16px 0;
    padding: 0 12px;
    cursor: pointer;
    transition: background-color .2s ease, border-left-color .2s ease;
}
.predictor-third-place-grid__slots .predictor-team-tile__selection {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-left: 0;
    margin-right: 12px;
}
.predictor-third-place-grid__slots .predictor-flag-badge {
    flex: 0 0 auto;
    width: 24px;
    height: 18px;
    margin-left: 0;
    margin-right: 8px;
    border-radius: 2px;
    transition: opacity .2s ease;
}
.predictor-third-place-grid__slots .predictor-team-tile.is-selected {
    border-left-color: var(--border-selected-green-left) !important;
    border-right: var(--border-is-green-selected);
    border-bottom: var(--border-is-green-selected);
    border-top: var(--border-is-green-selected);
    box-shadow: var(--box-shadow-selected-green);
    background: var(--bg-selected-green);
}


/**** MATCHES Best of 32 ********/
.predictor-group-card__list,
.predictor-bracket__matches {
    display: grid;
    gap: 0;
}
.predictor-bracket__matches {
    grid-template-columns: 1fr;
    gap: 80px 30px;
}
.predictor-match-tile {
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0px;
    align-self: stretch;
    min-width: 90px;
    padding: 12px 12px 24px 12px;
    background: var(--bg-box);
    overflow: hidden;
    border: var(--border_bg-box);
    border-radius: 4px;
    box-shadow: var(--box-shadow-bg-box);
}
.double-point {
    background-position: -257px -160px;
    background-image: url(iconset.svg);
    background-repeat: no-repeat;
    display: block;
    background-size: 324px 324px;
    height: 40px;
    width: 18px;
    opacity: 0.8;
}
[data-theme="dark"] .double-point {
    background-position: -298px -160px;
    opacity: 0.3;
}
.predictor-match-team__indicator {
    background-position: 0% 50%;
    background-image: url(radio_button_unchecked.svg);
    background-repeat: no-repeat;
    display: inline-block;
    background-size: cover;
    height: 24px;
    aspect-ratio: 1 / 1;
    width: auto;
    transition: all .100s linear;
    position: absolute;
    top: 6px;
    right: 6px;
    pointer-events: none;
    opacity: 0;
}

/******* MATCH RESULTS ******/
.match-result {
    width: 100%;
    margin: 6px 0 0 0;
    z-index: 99;
}
.match-result > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
}
.match-result > div > div > span {
    font-size: xx-large;
    font-weight: 900;
    line-height: 1;
    padding: 2px 8px;
    display: inline-block;
}
.match-result > div > div:nth-child(odd) {
    text-align: right;
    justify-self: center;
    margin: 16px 0px 0 10px;
}
.match-result > div > div:nth-child(even) {
    text-align: left;
    justify-self: center;
    margin: 10px 0px 0 16px;
}
.match-result-penalty {
    width: 100%;
    font-size: smaller;
    letter-spacing: var(--letter-spacing-base);
    text-align: center;
    display: inline-block;
}
.predictor-match-team.is-winner .predictor-match-team__indicator {
    content: url(radio_button_checked.svg);
}
button.is-winner:hover {
    background: var(--bg-selected-green) !important;
}
article[data-match-id="M104"] .predictor-match-team {
    height: auto;
}
.predictor-match-team.is-eliminated {
    border-color: transparent;
    opacity: .5;
}
.predictor-match-team:not(:disabled) {
    cursor: pointer;
}
.predictor-match-tile__title {
    display: flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    position: absolute;
    top: -2px;
    left: 0;
    font-size: larger;
    line-height: 1;
}
.predictor-match-tile__title span:first-child {
    position: relative;
    font-weight: 900;
    padding: 8px 16px 9px 12px;
}
.predictor-match-tile__title > span > i {
    font-size: small;
    letter-spacing: var(--letter-spacing-base);
    font-weight: 400;
}
.match-phase {
    padding: 0.8em 0 0 0;
    font-size: 0.65em;
    letter-spacing: var(--letter-spacing-white-persistent);
    opacity: 0.7;
}
.match-date {
    margin: 36px 0 0 3px;
    padding: 0 12px 16px 0;
    font-size: smaller;
    letter-spacing: var(--letter-spacing-base);
    line-height: 148%;
    user-select: none;
    -webkit-user-select: none;
}
.match-agenda {
    padding: 8px 0 2px 0;
    text-align: left;
}
.match-agenda-hidden {
    display: none;
}
.predictor-match-tile__teams {
    display: flex;
    width: 100%;
    gap: 12px;
    overflow: hidden;
    flex: 1 1 auto;
    min-height: 0;
    align-items: center;  /* old align-items: stretch; */
}
.predictor-match-team {
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 86px;
    max-width: calc(50% - 6px);
    min-height: 112px;
    height: auto;
    align-self: stretch;
    padding: 24px 12px 20px;
    overflow: hidden;
    border: 1px solid var(--color_10-percent-white);
    border-radius: 10px;
    background: var(--bg-white);
    text-align: center;
    color: var(--font_color-black);
    line-height: 148%;
    z-index: 1;
    transition: .1s;
 }
.predictor-match-team .predictor-flag-badge {
    flex: 0 0 auto;
    width: 40px;
    height: 30px;
    margin-left: 0;
    margin-top: 6px;
    font-size: 14px;
    border-radius: 2px;
}
[data-match-id="M104"] button.is-winner .predictor-match-team .predictor-flag-badge {
    width: 80px;
    height: 60px;
}

.predictor-match-team.is-winner {
    box-shadow: var(--box-shadow-selected-green);
    background: var(--bg-selected-green);
    color: var(--font_color-black);
    border: var(--border-is-green-selected);
    z-index: 2;
}
.predictor-match-team span:last-child {
    display: block;
    max-width: 100%;
    line-height: 120%;
    margin: 4px 0 0 0;
}
.predictor-match-tile.is-unresolved {
    background: var(--bg-box);
}
.predictor-match-tile.is-unresolved .predictor-match-team[data-has-team=false] {
    background: var(--bg-white);
    color: var(--font_color-grey-b);
}
.predictor-match-team:disabled {
    cursor: not-allowed !important;
}
.predictor-bracket__stage--f .predictor-bracket__matches,
.predictor-bracket__stage--t .predictor-bracket__matches {
    grid-template-columns: 1fr !important;
}

@media (hover: hover) and (pointer: fine) {
    .predictor-match-team:not(:disabled):hover {
        background: var(--bg-white);
        opacity: 1;
    }
}
.predictor-match-team:not(:disabled) {
    cursor: pointer;
}

@media screen and (max-width: 1023px) {
    .predictor-match-team {
        min-height: 112px;
        padding: 16px 8px;
    }
}

input[type="text"] {
    background-color: rgb(255 255 255 / 50%);
    height: auto;
    padding: 0.2rem 0.2rem;
    margin: 0;
    width: 3ch;
    text-align: center;
    font-size: 20px;
    border: 1px solid;
    border-radius: 3px;
    box-shadow: var(--box-shadow-input);
    border-color: var(--color_50-percent-black);
}
::placeholder {
  color: var(--font_color-grey-b);
  opacity: 0.6;
}
input:focus::placeholder { color: transparent; }
/* Specific vendor prefixes for older browser support */
input:focus::-webkit-input-placeholder { color: transparent; }
input:focus::-moz-placeholder { color: transparent; }   /* Firefox 19+ */
input:focus:-ms-input-placeholder { color: transparent; } /* IE 10+ */

.text-title {
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-20);
    display: block !important;
    margin: 0;
    font-weight: 400;
}
.align-center {
    text-align: var(--align-center) !important;
}
.upper-text {
    text-transform: uppercase;
}


/** FINAL DETAILS **/
#champion-wrapper {
    width: 100%;
    padding: 0;
    margin: 40px 0 0 0;
}
#champion {
    position: relative;
}
#prediction-text-wrapper,
.reload-app {
    width: 100%;
    margin: 0 0 60px 0;
    padding: 0;
}
#prediction-text-wrapper {
    padding-top: 20px;
    scroll-behavior: smooth;
    max-width: var(--wrap-small);
    margin: 0 auto;
}
#prediction-text-share {
    opacity: 0 !important;
    height: 12px;
}
#share-button-wrapper,
.reload-app {
    position: relative;
    display: inline-block;
    width: 100%;
    text-align: center;
}
#share-button-wrapper .btn-link:hover, .inline-button:hover {
    color: inherit;
    opacity: 1;
    box-shadow: none;
}

.two-column,
#app-share,
.two-column.big-logo {
    display: grid;
    grid-template-columns: 1fr 93px;
    column-gap: 20px;
    row-gap: 30px;
    justify-content: center;
    align-items: flex-end;
    vertical-align: middle;
    padding: 20px 0 30px 0px;
    margin: 40px 0 120px 0;
    border-top: 1px solid var(--border_color-grey);
    border-bottom: 1px solid var(--border_color-grey);
}
.two-column-big-logo {
    display: grid;
    grid-template-columns: 76px 1fr;
    column-gap: 6px;
    align-items: center;
    padding: 0;
}
#app-share-footer {
    margin: 20px 0 60px 0;
}
.two-column {
    grid-template-columns: 1fr 1fr;
    align-items: flex-start;
    column-gap: 15px;
    row-gap: 15px;
    margin: 0 0 20px 0;
}
.two-column img {
    max-width: 100%;
    margin: 6px auto 0 auto;
    display: block;
}
.two-column .grid-item
#app-share .grid-item {
    box-sizing: border-box;
}
#app-share img {
    max-width: 100%;
    height: auto;
    margin: 0 0 -8px 0px;
}
#app-share .btn-big {
    max-width: 230px;
}
#qr-code {
    width: 82px;
    height: 82px;
}
#qr-code-image {
    opacity: 1;
    margin: 0;
    background-position: -374px -847px;
    background-image: url(iconset.svg);
    background-size: 948px 948px;
    width: 82px;
    height: 82px;
    display: inline-block;
}
[data-theme="dark"] #qr-code {
        width: 92px;
        height: 92px;
        background: var(--color_20-percent-white);
        padding: 6px;
}
/*
[data-theme="dark"] #qr-code-image {                WHITE QR CODE not works always
    background-position: -374px -847px;
}
*/
.prediction-code,
.prediction-code-title {
    font-size: smaller;
    letter-spacing: var(--letter-spacing-base);
    color: var(--font_color-grey-b);
    padding: 0;
    display: inline;
}
.prediction-code-divider {
    margin-top: -12px;
}
#prediction-text {
    max-width: var(--wrap-small);
    margin: 0px auto 0 auto;
    position: relative;
}
.prediction-text-inner {
    padding: 18px 30px 60px 24px;
    box-shadow: var(--box-shadow-bg-box);
    background: var(--bg-bet-message);
    border: var(--border_bg-box);
    border-radius: 2px;
    color: var(--font_color-white-persistent);
    line-height: 148%;
    letter-spacing: var(--letter-spacing-white-persistent);
    position: relative;
    text-align: center;
        /* border-style: double;
        border-color: #ffffffde;
        border-width: 9px; */
}
#prediction-text-only .text-title-tipp {
    margin: -24px 0 0 0;
    text-transform: uppercase;
}
.prediction-text-inner .result {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}
.prediction-text-inner span:nth-of-type(3) {}
.text-title-copa { display: block; }
.text-title-copa:after { content: " 2026"; }

.detail-selection {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 48px;
    background: var(--bg-detail-selection);
    box-shadow: var(--box-shadow-bg-box);
    border-radius: 10px;
    border: var(--border_bg-box);
    padding: 16px;
    margin: 0 auto 10px auto;
    max-width: var(--wrap-small);
    cursor: pointer;
    transition: .2s;
}
.result {
    font-size: larger;
    font-weight: 900;
    color: var(--font_color-black);
}
.detail-selection input:focus-visible {
    background-color: rgb(255 255 255 / 90%);
}
.win-info {
    margin-left: 8px;
    padding: 7px 20px 0 0;
}
.detail-selection.is-selected {
    border: 1px solid var(--border_color-grey);
    background: var(--bg-final-details-selection);
}
.detail-item {
    display: flex;
    align-items: flex-start;
    font-size: larger;
    letter-spacing: var(--letter-spacing-font-larger);
}
.final-details-message {
    padding: 30px 30px 30px 30px;
    background: var(--bg-final-details-message);
    margin: 0 0 52px 0;
    text-align: center;
    font-size: larger;
    color: var(--font_color-black-persistent);
    letter-spacing: var(--letter-spacing-font-larger);
    border-radius: 2px;
    box-shadow: var(--box-shadow-wide);
}
.final-details_selection { /* Icon Background */
    height: 36px !important;
}
.final-details .m104-winner {
    margin: 20px auto 20px auto;
    padding: 10px 20px 10px 20px;
    position: relative;
    max-width: var(--wrap-small);
}
.winner-style {
    display: block;
    position: relative;
    margin: 0 0 0 36px;
}
.m104-winner-wrap {
    margin: 10px 0 10px 0;
    display: inline-block;
    text-align: center;
    padding: 4px 8px 4px 8px;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-12);
}
.winner-style span.icon-champ {
    opacity: 0.9;
    background-image: url(iconset.svg);
    background-position: 44% 71%;
    background-repeat: no-repeat;
    display: inline-block;
    margin: 0;
    width: 31px;
    height: 56px;
    background-size: 540px 540px;
    position: absolute;
    top: -14px;
    left: -36px;
}
.winner-style :nth-child(2) {
    font-family: var(--font_serif);
    font-size: 236%;
    line-height: 112%;
    letter-spacing: var(--letter-spacing-00);
}
.result-normal-time {
    margin: 16px 0 0 12px;
    width: 100%;
    text-align: right;
    padding: 0 12px 0 0px;
    opacity: 0.4;
}
.result-info {
    padding: 20px 0 0 60px;
    font-size: smaller;
    letter-spacing: var(--letter-spacing-base);
    line-height: 148%;
    width: 100%;
    text-align: right;
    margin-left: auto;
    margin-bottom: -6px;
    max-width: 290px;
    opacity: 0.8;
    color: var(--font_color-black);
}
.result-info b {
    letter-spacing: var(--letter-spacing-12);
    text-transform: uppercase;
}
.detail-selection.is-selected .result-normal-time {
    opacity: 1;
}
/******************** SHARE Button **/
.share-button {
    padding: 0px 0 0 0;
    display: inline-block;
    margin: -20px;
}
.share-button.inactive {
    opacity: 0.2;
}
.share-button animate {
    position: relative;
    z-index: 2;
}
#shareBtn {
    position: relative;
    z-index: 2;
    zoom: 1.1;
}
/*
@keyframes hapticShakeSoft {
  0%   { transform: scale(1) translateX(0); }
  25%  { transform: scale(1.015) translateX(-1px); }
  50%  { transform: scale(1.02) translateX(1px); }
  75%  { transform: scale(1.01) translateX(-1px); }
  100% { transform: scale(1) translateX(0); }
}
.share-button.animate {
  animation: hapticShakeSoft 0.5s ease-out;
}
*/
.btn-black {
    background: var(--bg-black-persistent);
    background-color: var(--bg-black-persistent)!important;
    border-color: transparent !important;
}
.btn-blue {
    background: var(--bg-button-blue);
    background-color: var(--bg-button-blue) !important;
    border-color: transparent !important;
}
.btn-grey {
    background: rgb(124 124 124 / 20%);
    background-color: rgb(124 124 124 / 20%) !important;
    border-color: transparent !important;
}
.btn-bordeaux {
    background: rgb(168 75 79);
    background-color: rgb(168 75 79) !important;
    border-color: transparent !important;
}
.btn-link {
    padding: 0 8px 0 6px;
    box-shadow: var(--box-shadow-button-btn-link);
    border: 1px solid;
    border-radius: 4px;
    margin: 0;
    gap: 0;
    display: inline-flex;
    align-items: center;
    height: 32px;
    width: auto;
    cursor: pointer;
    line-height: 1;
    transition: .4s;
}
.inline-button {
    background: transparent;
    padding: 5px 8px 4px 8px;
    line-height: 1;
    border-radius: 4px;
    font-size: small;
    color: var(--font_color-white-persistent);
    display: inline-grid;
    grid-template-columns: repeat(2, auto);
    align-items: center;
    border: var(--border_bg-box);
    box-shadow: var(--box-shadow-bg-box);
}
.inline-button .btn-icon {
    background-position: -78px -6px;
    background-size: 194px 194px;
    display: inline-block;
    width: 16px;
    height: 16px;
    margin: 0 0 -1px 0px;
}
.inline-button .btn-icon.icon-inline-hall-of-fame,
.inline-button .btn-icon.icon-inline-hall-of-fame-white,
.inline-button .btn-icon.icon-inline-analyzer,
.inline-button .btn-icon.icon-inline-copa26,
.inline-button .btn-icon.icon-inline-copa26-white {
    background-position: -455px -578px;
    background-size: 600px 600px;
    display: inline-block;
    width: 142px;
    height: 18px;
    margin: 0 4px 0 4px;
    line-height: 1;
}
.inline-button .btn-icon.icon-inline-copa26 {
    background-position: -1px -377px;
    background-size: 400px 400px;
    width: 97px;
}
.inline-button .btn-icon.icon-inline-analyzer {
    background-position: -300px -282px;
    background-size: 400px 400px;
    width: 97px;
}
#messages .inline-button .btn-icon.icon-inline-hall-of-fame {
    background-position: -455px -529px;
}
.inline-button .btn-icon.icon-inline-hall-of-fame-white {
    background-position: -455px -553px;
    opacity: 0.9;
}
.inline-button .btn-icon.icon-inline-copa26-white {
    background-position: -1px -378px;
    opacity: 0.9;
    background-size: 400px 400px;
    width: 97px;
}
.btn-icon {
    display: inline-block;
    background-size: cover;
    height: 74%;
    aspect-ratio: 1 / 1;
    width: auto;
}
.btn-text {
    padding: 0 0.1em 0 0.8em;
    line-height: 1;
    letter-spacing: var(--letter-spacing-white-persistent);
    color: var(--font_color-white);
}
.btn-grey .btn-text {
    color: var(--font_color-white-persistent);
}
.btn-link:hover,
.inline-button:hover {
    color: inherit;
    opacity: 0.8;
    box-shadow: 2px 2px 6px 0px rgb(0 0 0 / 30%);
}
.decimal-ul .btn-link:hover, .inline-button:hover {
    color: inherit;
    opacity: 1;
    box-shadow: none;
}
.btn-big {
    padding: 0 20px 0 16px;
    height: 48px;
}
.btn-small {
    padding: 0 8px 0 8px;
    height: 32px;
    text-transform: uppercase;
    font-size: inherit;
}
.btn-big .btn-text {
    font-size: larger;
    letter-spacing: var(--letter-spacing-04);
    text-transform: uppercase;
}
.btn-text-inline {
    font-size: smaller;
    display: inline-block;
    margin: 0 0 4px 0;
    width: 100%;
    text-align: left;
}
.icon-share-white,
.icon-refresh-white,
.icon-ball-white,
.download-spread-white,
.icon-google-sheet,
.icon-calculate-white,
.icon-megaphone-white,
.icon-megaphone-white-big,
.icon-searchlist-white,
.icon-inline-hall-of-fame,
.icon-inline-hall-of-fame-white,
.icon-inline-analyzer,
.icon-inline-copa26,
.icon-inline-copa26-white,
.icon-arrow-right-white {
    background-image: url(iconset.svg);
    background-repeat: no-repeat;
    background-size: 412px 412px;
}
.icon-megaphone-white {
    background-position: -208px -166px;
    background-size: 328px 328px;
}
.icon-megaphone-white-big {
    background-position: -273px -217px;
    background-size: 432px 432px !important;
}
.icon-share-white {
    background-position: -370px -112px;
}
.btn-small .icon-share-white {
    background-position: -228px -69px;
    background-size: 256px 256px;
}
.icon-arrow-right-white {
    background-position: -78px -6px;
}

.icon-refresh-white {
    background-position: -267px -8px;
}
.icon-ball-white {
    background-position: -8.5px -265.5px;
    background-color: rgb(255 255 255 / 40%);
}
.icon-searchlist-white {
    background-position: -369px -319px;
}
.icon-calculate-white {
    background-position: -319px -318px;
}
.download-spread-white {
    background-position: -265px -318px;
}
.icon-google-sheet {
    background-position: -126px -148px;
    background-size: 194px 194px;
    display: inline-block;
    width: 18px;
    height: 18px;
    margin: 0 3px -1px 0px;
}
#reset-btn {
    display: flex;
    float: none;
    margin: 72px auto 0 auto;
    text-transform: uppercase;
}
.hall-of-fame-header {
    text-align: center;
}
.flex-img {
    display: inline-block;
    background-image: url(iconset.svg);
    background-repeat: no-repeat;
}
.icon-18,
.icon-48 {
    width: 48px;
    height: 48px;
    background-size: 384px 384px;
    aspect-ratio: 1 / 1;
}
.icon-18 {
    width: 18px;
    height: 18px;
    background-size: 180px 180px;
}
.icon-24 {
    width: 28px;
    height: 28px;
    background-size: 256px 256px;
}
.icon-table {
    background-position: 0% 14%;
    margin: 0 0 0 6px;
}
.decimal-ul .icon-table.icon-24 {
    background-position: -3px -32px;
    margin: 0 0 -7px 0;
}
[data-theme="dark"] .icon-table {
    background-position: 15% 14%;
    opacity: 0.8;
}
[data-theme="dark"] .decimal-ul .icon-table.icon-24 {
    background-position: -34px -32px;
}
.icon-tree {
    background-position: 0% 0%;
    margin: 0 0 0 6px;
}
.decimal-ul .icon-tree.icon-24 {
    background-position: -2px -1px;
    margin: 0 0 -7px 0;
}
[data-theme="dark"] .icon-tree {
    background-position: 15% 0%;
    opacity: 0.8;
}
[data-theme="dark"] .decimal-ul .icon-tree.icon-24 {
    background-position: -34px -1px;
}
.icon-lightmode {
    background-position: 0px -96px;
    margin: 0 0 0 6px;
}
[data-theme="dark"] .icon-lightmode {
    background-position: -49px -96px;
    opacity: 0.8;
}
.icon-darkmode {
    background-position: 0px -144px;
    margin: 0 0 0 6px;
}
[data-theme="dark"] .icon-darkmode {
    background-position: -49px -144px;
    opacity: 0.8;
}
.icon-speech {
    background-position: -527px -713px;
    margin: 0;
    background-size: 1024px 1024px;
    width: 48px;
    height: 42px;
    display: flex;
}
.icon-medal-3 {
    background-position: -208px -275px;
    margin: 0;
    width: 70px;
    height: 70px;
    background-size: 556px 556px;
}
.icon-fifapokal {
    background-position: -174px -422px;
    margin: 0;
    width: 70px;
    height: 70px;
    background-size: 664px 664px;
}

/************** START METAHEADER AND LAYERS Styles **************/
.icon64.icon-close::before {
    background-image: url('icon-close.svg');
}
.icon64.icon-language::before,
.icon64.icon-settings::before,
.icon64.icon-infos::before,
.icon64.icon-contact::before {
    background-image: url(icon_language.svg);
    width: 24px;
    height: 24px;
    margin: 4px 6px 0 0;
    opacity: 0.5;
}
.icon64.icon-settings::before {
    background-image: url(icon_settings.svg);
}
.icon64.icon-contact::before {
    background-image: url(icon_chat-white.svg);
    background-position: 0% 60%;
    background-size: 90%;
}
.icon64.icon-infos::before {
    background-image: url(icon_info-white.svg);
}
.icon64.icon-menu::before {
    background-image: url('icon-menu.svg');
    background-position: 3% -6%;
}
.icon64.icon-menu::before {
    background-position: 0% 51%;
}
.icon64.icon-close::before {
    background-position: 0% 49%;
}
.icon64::before {
    content: "";
    display: inline-block;
    background-repeat: no-repeat;
    width: 48px;
    height: 48px;
    background-size: 95%;
    background-position: 0% 0%;
    display: inline-block;
}
a {
    color: var(--font_color_link_blue);
    text-decoration: none;
    word-wrap: break-word;
    transition: .3s;
}
a:focus-visible {
    border: 0px;
    outline: none;
}
a.white { color: var(--font_color-white) !important; }
a.white:visited { color: var(--font_color-grey-b) !important; }

#meta-header * {
    -webkit-tap-highlight-color: transparent;
}

#meta-header {
    background: var(--bg-black-metaheader);
    color: var(--font_color-white);
    letter-spacing: var(--letter-spacing-12);
    font-size: smaller;
    width: 100%;
    position: fixed;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    height: 60px;
    margin: 0;
    padding: 0;
    -webkit-transition: top 0.3s ease-in-out;
    transition: top 0.6s ease-in-out;
    box-shadow: var(--box-shadow-02);
}
#meta-header.scroll-down {
    top: -600px;
}
#meta-header #meta-header-flyout a:hover,
#meta-header #meta-header-language a:hover,
#meta-header #meta-header-flyout a:focus,
#meta-header #meta-header-language a:focus {
    border: 1px solid;
    border-color: var(--color_10-percent-white);
}
#meta-header #meta-header-flyout a:hover .icon64::before,
#meta-header #meta-header-language a:hover .icon64::before,
#meta-header #meta-header-flyout a:focus .icon64::before,
#meta-header #meta-header-language a:focus .icon64::before {
    opacity: 1 !important;
}

#logo-copa-26,
#logo-copa-26-small,
.logo-copa-26-small,
.logo-copa-26-small-white,
.logo-analyzer,
.logo-analyzer-small,
.logo-analyzer-big,
.logo-hall-of-fame,
.logo-hall-of-fame-big,
.logo-hall-of-fame-small {
    background-image: url(iconset.svg);
    background-position: 3px -844px;
    background-size: 900px 900px;
    background-repeat: no-repeat;
    width: 224px;
    height: 52px;
    border: 0px solid red;
 }
body#hall-of-fame-form-page #meta-logo,
body#analyzer-page #meta-logo,
body#hall-of-fame-page #meta-logo {
    opacity: 0.2;
}
.logo-flag-big {
    width: 74px;
    height: 74px;
    margin: -6px 0 0 0;
}
.logo-flag-small {
    width: 90px;
    height: 90px;
    margin: 0;
    }
.logo-flag-big img {
     width: 100%;
     height: 100%;
}
.share-flag-wrap {
    display: grid;
    align-items: center;
    align-self: stretch;
    grid-template-columns: 90px 1fr;
    row-gap: 20px;
    column-gap: 10px;
    padding: 0 10px 0 0;
    line-height: 156%;
    font-size: smaller;
}
.app-version {
    opacity: 0.6;
    margin: 2px 0 0 33px;
    font-size: x-small;
}

#logo-copa-26-small,
.logo-copa-26-small,
.logo-copa-26-small-white {
    background-position: -1px -509px;
    background-size: 578px 578px;
    width: 140px;
    height: 26px;
    display: inline-block;
    margin: 0;
}
.logo-copa-26-small-white {
    background-position: -1px -546px;
}
.logo-analyzer,
.logo-hall-of-fame {
    background-position: -680px -638px;
    width: 230px;
    height: 36px;
    display: inline-block;
    margin: 0;
    position: absolute;
    top: 17px;
    left: 52px;
}
.logo-analyzer-big,
.logo-hall-of-fame-big {
    background-position: -910px -1157px;
    background-size: 1200px 1200px;
    display: block;
    width: 280px;
    height: 32px;
    position: relative;
    left: 40px;
}
.logo-analyzer-big {
    background-position: -910px -854px;
    left: 70px;
    height: 44px;
}
.logo-analyzer-small,
.logo-hall-of-fame-small {
    background-position: -436px -412px;
    background-size: 578px 578px;
    width: 138px;
    height: 20px;
    display: block;
    position: relative;
}
.logo-hall-of-fame-small {
    background-position: -436px -555px;
}
#hall-of-fame-form-wrapper .logo-hall-of-fame-small {
    background-position: -780px -992px;
    margin: 0 auto 12px auto;
    background-size: 1028px 1028px;
    width: 240px;
    height: 26px;
}
.hall-teaser {
    text-align: center;
    max-width: 360px;
    color: var(--font_color-red);
    line-height: 148%;
    font-family: var(--font_serif);
    font-size: 175%;
    margin: -10px auto 0 auto;
}
.hall-teaser-info {
    margin: -3px auto 0 auto;
    text-align: center;
}
.decimal-ul .hall-teaser {
    margin-top: 20px;
    font-size: inherit;
    font: var(--font_style_01) !important;
}
[data-theme="dark"] #logo-copa-26-small {
    background-position: -1px -546px;
    opacity: 0.9;
}
.address {
    margin: 20px 20px 0 0px;
    padding: 0;
}
#meta-logo {
    box-sizing: border-box;
    padding: 0;
    display: flex;
    align-items: center;
}
#meta-header-flyout {
    display: flex;
    flex: 0;
    justify-content: flex-end;
    padding: 0 30px 0 0;
}
#meta-header-language {
    display: flex;
    flex: 0;
    padding: 0 24px 0 0;
    margin-left: auto;
}
#toggle-meta-nav { display: none; }

#access ul,
#meta-header-language ul {
  display: flex;
  gap: 1.2rem;
  padding: 0;
  margin: 0;
  list-style: none;
}
#access ul.sub-menu {
    display: none;
}
#access li,
#meta-header-language li {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
#access a,
#meta-header-language a {
    transition: all .100s linear;
    -webkit-transition: all .100s linear;
    color: inherit;
    padding: 4px 8px 4px 8px;
    border: 1px solid;
    line-height: 140%;
    border-color: transparent;
    text-transform: uppercase;
    display: flex;
    align-items: center;
}
.layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-white);
  display: none;
  z-index: 99999;
}
.layer-wrap {
    width: 100%;
    margin: 0 auto;
    padding: 0 20px 80px 20px;
    height: calc(100vh - 160px);
    margin-top: 160px;
    overflow-y: auto;
    scrollbar-width: none;      /* Firefox */
    -ms-overflow-style: none;   /* IE/Edge */
}
.layer-wrap::-webkit-scrollbar {
    display: none;              /* Chrome/Safari */
}
.layer-content {
    margin-top: 40px;
}
.layer-header {
    height: 180px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: var(--bg-white);
    width: 100%;
    max-width: var(--layer-wrap-max);
    display: flex;
    flex-direction: column;
    vertical-align: middle;
    align-items: flex-start;
    margin: 0 auto;
}
.layer-header .icon64::before {
    width: 36px;
    height: 36px;
    background-position: 0% 0%;
}
[data-theme="dark"] .layer-header .icon64::before {
    background-position: 0% 50%;
}

.layer-header .icon64.icon-language::before,
.layer-header .icon64.icon-settings::before,
.layer-header .icon64.icon-contact::before,
.layer-header .icon64.icon-infos::before {
    background-image: url(icon_language-black.svg);
    width: 42px;
    height: 42px;
    opacity: 0;
    margin: 40px 8px 0 20px;
}
.layer-header .icon64.icon-settings::before {
    background-image: url(icon_settings-black.svg);
}
.layer-header .icon64.icon-contact::before {
    background-image: url(icon_chat.svg);
}
.layer-header .icon64.icon-infos::before {
    background-image: url(icon_info.svg);
}
.close-layer {
    position: absolute;
    top: 12px;
    right: 20px;
}
.layer-header .icon64.icon-close {
    display: inline-block;
    width: 36px;
    height: 36px;
}
.layer-textblock {
    margin: 0 auto 40px auto;
    max-width: var(--wrap-small);
    text-align: left;
}
.layer-title {
    font-size: 300%;
    line-height: 100%;
    font-family: var(--font_serif);
    letter-spacing: var(--letter-spacing-00);
    margin: 0 0 0 20px;
}
.layer blockquote {
    border-left: 1px solid #000;
    padding: 0 0 0 20px;
    margin: 0 0 0 10vw;
}
.layer-message-important {
    padding: 20px;
    background: var(--bg-message-yellow);
    color: var(--font_color-black-persistent);
    margin-top: 20px;
    border: var(--border_bg-box);
    box-shadow: var(--box-shadow-bg-box);
}
.layer-message-important h2 {
    margin: 0px 0 10px 0 !important;
}
.layer-message-important h2::before {
    content: "!";
    display: inline-block;
    margin: 0px 14px 0px 0;
    line-height: 1;
    padding: 6px 17px;
    border: 1px solid #000;
    font-size: xx-large;
    font-weight: 900;
    background: #000;
    color: #fff;
}
.layer-content p {
    margin: 0 0 20px 0;
}
.selector-title,
.layer-textblock h2,
.layer-textblock .h2,
.layer-textblock h3 {
    font-size: 148%;
    font-family: var(--font_serif);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-04);
    margin: 24px 0 40px 0;
}
.layer-textblock h3 {
    font-size: 112%;
    margin: 20px 0 10px 0;
}
.layer-textblock h2,
.layer-textblock .h2 {
    margin: 60px 0 20px 0;
    line-height: 136%;
    display: block;
}
.selector-info {
    margin: 0 0 24px 0px;
}
.layer.active {
  display: block;
}

#display-lang {
    display: flex;
    align-items: center;
}
#display-lang .flag {
    background-size: 200px 200px;
    width: 24px;
    height: 20px;
    margin: 0 0 0 -14px;
    z-index: 2;
}

#display-lang span:last-child { display: none; }
#display-lang .flag.flag-de { background-position: -27px -153px; }
#display-lang .flag.flag-en { background-position: -52px -153px; }
#display-lang .flag.flag-pt { background-position: -77px -153px; }
#display-lang .flag.flag-es { background-position: -2px -153px; }
#display-lang .flag.flag-fr { background-position: -101px -153px; }

body.layer-open { overflow: hidden; }






/*-------------------------------- METAHEADER AND LAYERS Mobile -------------------------------*/
@media only screen and (min-width: 120px) and (max-width: 768px) {

    #toggle-meta-nav,
    .toggle-layer {
        margin: 0 20px 0 0;
        z-index: 910;
        cursor: pointer;
        display: inline-block;
        width: 36px;
        height: 36px;
    }
    #toggle-meta-nav.icon64::before {
        width: 36px;
        height: 36px;
    }
    #toggle-meta-nav::before {
      transition: transform 0.4s ease, background-image 0.1s ease;
      transform: rotate(0deg);
    }
    #toggle-meta-nav.icon-menu::before {
      transform: rotate(0deg) !important;
    }
    #toggle-meta-nav.icon-close::before {
      transform: rotate(90deg) !important;
    }
    #meta-header .flyout-nav {
        position: absolute;
        opacity: 1;
        top: 60px;
        z-index: 99999;
        display: none;
        justify-content: flex-start;
        width: 100%;
        height: 200dvh;
        padding: 3em 2em 2em 3em;
    }
    #meta-header .flyout-nav {
        background: #212225;
    }
    #access ul.main-nav {
      display: flex;
      flex-direction: column;
      padding: 0;
      margin: 0;
      list-style: none;
      gap: 0.5rem;
    }
    #access ul.main-nav li {
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      margin: 0 0 0.5em 0;
    }
    #access ul.main-nav li a {
        width: 100%;
        padding: 0.8rem 1rem 0.8rem 1rem;
        text-align: left;
        font-size: 164%;
        letter-spacing: 0.08em;
    }
    .icon64.icon-language::before,
    .icon64.icon-settings::before,
    .icon64.icon-contact::before,
    .icon64.icon-infos::before{
        width: 32px;
        height: 32px;
        margin: 6px 12px 0 0;
        opacity: 0.3;
    }

    #display-lang .flag {
        margin: 0 0 0 -24px;
    }
    body#hall-of-fame-page #hall-intro {
        display: none;
    }
    body#hall-of-fame-page #intro-header {
        grid-template-columns: 1fr;
    }
    body#hall-of-fame-page #hallCount-wrapper {
        margin: 4px 0 0px -30px;
    }

    .logo-analyzer-big,
    .logo-hall-of-fame-big {
        background-position: -1122px -1428px;
        background-size: 1480px 1480px;
        width: 348px;
        height: 37px;
        left: -2px;
    }
    .logo-analyzer-big {
        background-position: -1122px -1055px;
        left: -2px;
        height: 49px;
    }

}

/************** END METAHEADER AND LAYERS Styles **************/












/* ---------------------------------------------------------- footer ---------------------------- */

#footer {
    margin-top: 0px;
    width: 100%;
    box-shadow: var(--box-shadow-footer);
    background-color: var(--bg-footer);
    position: relative;
}
#toplink-wrapper {
    position: fixed;
    display: none;
    z-index: 999;
    bottom: 4vmin;
    right: 4vmin;
    width: 5vmin;
    height: 5vmin;
    min-width: 32px;
    min-height: 32px;
}
#topPageLink {
    width: 100%;
    height: 100%;
    text-decoration: none;
    transition: all .200s linear;
    -webkit-transition: all .200s linear;
    background: var(--bg-black-persistent);
    border-radius: 50%;
    padding: 0;
    display: inline-block;
}
#topPageLink:hover {
    background: rgba(0, 0, 0, 0.5);
}
#topPageLink svg {
    fill: var(--bg-white-persistent);
    width: 100%;
    height: 100%;
}
#footer-bottom {
    clear: both;
    width: 100%;
    margin: 0;
    color: var(--font_color-grey-w);
    font-size: x-small;
    letter-spacing: var(--letter-spacing-white-persistent);
    padding: 16px 0 16px 0;
    text-align: center;
    background-color: var(--bg-footer-bottom);
}

.logo-01241 {
    display: inline-block;
    margin: 360px 10px 200px 10px;
    padding: 14px 14px 10px 14px;
    background: #000;
}
.logo-01241 a {
    color: rgb(255 255 255 / 50%);
    text-decoration: none;
}
.logo-01241 img {
    width: 72px;
    margin: 10px auto 10px auto;
    opacity: 0.98;
    border: none;
    display: block;
}
.logo-01241 div {
    line-height: 142%;
    font-size: x-small;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-12);
    max-width: 120px;
}



.adsense_01 {
    filter: grayscale(100%);
    width: 99%;
    padding: 0;
    margin: 80px auto 50px auto;
    overflow: hidden;
    text-align: center;
    display: inline-block;
    opacity: 0.9;
    display: flex;
    gap: 24px;
    /* flex-direction: column; */
    align-items: center;
    justify-content: center;
}
.footer-apoio a {
    display: block;
}
.grid-title {
    width: 100%;
    text-align: center;
    padding: 30px 0 0 0;
    margin: 0;
    color: var(--font_color-grey-w);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-20);
}
.grid-outer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(clamp(140px, 30vw, 200px), 1fr));
    row-gap: 12px;
    column-gap: 12px;
    padding: 0px;
    box-sizing: border-box;
    width: 100%;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
}
.grid-outer.cols-4 {
    grid-template-columns: repeat(auto-fit, minmax(clamp(140px, 30vw, 200px), 1fr));
}
.footer-apoio.grid-outer.cols-4 {
    grid-template-columns: repeat(auto-fit, minmax(120px, 140px));
    margin: 30px auto 60px auto;
}
.layer-textblock .footer-apoio.grid-outer.cols-4 {
    grid-template-columns: repeat(auto-fit, minmax(120px, 140px));
    margin: 30px auto 100px auto;
}
.footer-apoio .shop-text,
.layer-textblock .footer-apoio .shop-text {
    opacity: 0.5;
    font-size: smaller;
    line-height: 146%;
    padding: 0 10px 0 10px;
}
.footer-apoio .grid-column {
    padding: 6px;
    margin: 0;
    font-size: smaller;
    line-height: 154%;
    letter-spacing: var(--letter-spacing-white-persistent);
    color: var(--font_color-grey-w);
    text-align: center;
    border: 1px solid var(--border_color-grey);
    border-radius: 3px;
    min-height: 64px;
}
.layer-textblock .footer-apoio .grid-column {
    border: var(--border_bg-box);
}

.layer-textblock .footer-apoio .grid-column {
    color: var(--font_color-black);
    letter-spacing: var(--letter-spacing-base);
}
.layer-textblock .footer-apoio .logo-effet {
    background-position: 4px 0px;
}
[data-theme="dark"] .layer-textblock .footer-apoio .logo-effet {
    background-position: 4px -31px;
    opacity: 0.9;
}

/******** Selectors CHECK ODER OPTION *********/
button.selector {
    padding: .1em 1em .1em 1em;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    background-color: transparent;
    margin: 0 0 16px 16px;
    color: var(--font_color-black);
    letter-spacing: var(--letter-spacing-base);
    display: flex;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
    align-items: center;
    height: auto;
    width: auto;
    opacity: 1;
    user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
}
button.selector:hover {
    opacity: 0.7;
}
.selector-buttons button {
    width: 100%;
    max-width: 320px;
}
.selector-buttons .selector-indicator {
    display: none;
}
.selector-buttons.border button {
    border: 1px solid rgb(145 145 145 / 20%);
    padding: .1em 0.5em .1em 0.5em;
}

button.selector.top-align { align-items: flex-start; }

.selector-indicator,
.selector-indicator-check,
.predictor-third-place-grid__slots .predictor-team-tile__selection,
.final-details_selection,
.icon-copy {
    background-position: 0% 50%;
    background-image: url(radio_button_unchecked.svg);
    background-repeat: no-repeat;
    display: inline-block;
    background-size: cover;
    height: 24px;
    aspect-ratio: 1 / 1;
    width: auto;
    transition: all .100s linear;
}

[data-theme="dark"] .selector-indicator {
    background-image: url(radio_button_unchecked-white.svg);
    opacity: 0.7;
}

.selector.is-selected .selector-indicator,
.selector.is-selected-lang .selector-indicator,
.selector.is-selected-local .selector-indicator,
.selector.is-selected-matchInfo .selector-indicator,
.selector.is-selected-view .selector-indicator,
.selector.is-selected-theme .selector-indicator {
    background-image: url(radio_button_checked.svg);

}
[data-theme="dark"] .selector.is-selected .selector-indicator,
[data-theme="dark"] .selector.is-selected-lang .selector-indicator,
[data-theme="dark"] .selector.is-selected-local .selector-indicator,
[data-theme="dark"] .selector.is-selected-matchInfo .selector-indicator,
[data-theme="dark"] .selector.is-selected-view .selector-indicator,
[data-theme="dark"] .selector.is-selected-theme .selector-indicator {
    background-image: url(radio_button_checked-white.svg);
}
.selector-indicator-check,
.predictor-third-place-grid__slots .predictor-team-tile__selection,
.final-details_selection {
    background-image: url(check_box_unchecked.svg);
}
[data-theme="dark"] .selector-indicator-check,
[data-theme="dark"] .predictor-third-place-grid__slots .predictor-team-tile__selection,
[data-theme="dark"] .final-details_selection {
    background-image: url(check_box_unchecked-white.svg);
}
.selector.is-selected .selector-indicator-check,
.selector.is-selected-matchInfo .selector-indicator-check,
.predictor-team-tile.is-selected .predictor-team-tile__selection,
.is-selected .final-details_selection {
    background-image: url(check_box_checked.svg);
}
[data-theme="dark"] .selector.is-selected .selector-indicator-check,
[data-theme="dark"] .selector.is-selected-matchInfo .selector-indicator-check,
[data-theme="dark"] .predictor-team-tile.is-selected .predictor-team-tile__selection,
[data-theme="dark"] .is-selected .final-details_selection {
    background-image: url(check_box_checked-white.svg);
}

button-wrap.inside-content button.selector.is-selected-view,
button.selector.is-selected-theme,
button.selector.is-selected-view {
    border: 1px solid rgb(125 125 125) !important;
}
.selector-text {
    margin-left: 6px;
    text-align: left;
    color: var(--font_color-black);
}
[data-theme="base"] .selector-text {
    color: var(--font_color-black);
}
.selector-wrap {
    max-width: var(--wrap-small);
    margin: 0 auto;
    padding: 20px 0 0 0;
    margin-bottom: 60px;
}
.simple-flag-badge__image {
    display: block;
    width: 24px;
    height: auto;
    margin: 0 0 0 12px;
    filter: grayscale(0);
    opacity: 0.5;
}
.selector-buttons-lang .flag {
    margin: 0 -2px 0 6px;
}
.flag {
    opacity: 1;
    margin: 0;
    background-image: url(iconset.svg);
    background-size: 348px 348px;
    width: 36px;
    height: 28px;
    display: inline-block;
}
.flag.flag-de { background-position: -47px -269px; }
.flag.flag-en { background-position: -90px -269px; }
.flag.flag-pt { background-position: -133px -269px; }
.flag.flag-es { background-position: -3px -269px; }
.flag.flag-fr { background-position: -177px -269px; }

.selector-wrap.inside-content {
    padding: 0 0 32px 0;
    margin-bottom: 0px;
    text-align: center;
}
.selector-wrap.inside-content button {
    margin: 0;
    width: auto;
    background: transparent;
    border: 1px solid rgb(145 145 145 / 20%);
    display: inline-flex;
    flex-direction: column;
    max-width: 100px;
}
.selector-wrap.inside-content .selector-indicator,
.selector-wrap.inside-content .selector-text {
    display: none;
}
.predictor-bracket__stage--ro32 {
    margin-top: 30px;
}

/******* Copy Button ****/
button.copy-btn > div > span.icon-copy,
.inline-icon-copy {
    opacity: 1;
    margin: -1px -4px 0 0;
    background-image: url(iconset.svg);
    background-size: 232px 232px;
    background-position: -147px -90px;
}
.inline-icon-copy {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin: 0 4px -6px -4px;
    opacity: 0.5;
}
#copy-group-header .icon-copy,
#copy-prediction-code .icon-copy,
.inline-icon-copy {
    background-position: -118px -90px;
}
[data-theme="dark"] #copy-group-header .icon-copy,
[data-theme="dark"] #copy-prediction-code .icon-copy,
[data-theme="dark"] .inline-icon-copy {
    background-position: -147px -90px;
}
button.copy-btn {
    background: none;
    background-color: transparent;
    margin: 0;
    text-align: center;
    position: relative;
    display: grid;
    grid-template-columns: auto;
}
button.copy-btn:hover {
    opacity: 0.8;
}
button.copy-btn div.button-icon,
button.copy-btn div {
    display: inline-flex;
    vertical-align: middle;
    align-items: center;
    justify-self: center;
    align-self: center;
    opacity: 0.6;
    margin: 0;
    padding: 6px;
    font-size: smaller;
    line-height: 1;
    letter-spacing: var(--letter-spacing-06);
    text-transform: uppercase;
    transition: all 0.2s ease;
}
.copy-content-inside span:first-child  {
    margin: 0px 0 4px 1px !important;
    padding: 0 0 6px 0;
    display: none;
}
.copy-btn-text {
    margin-left: 10px;
    text-align: left;
    color: var(--font_color-white-persistent);
}
#copy-group-header .copy-btn-text,
#copy-prediction-code .copy-btn-text {
    color: var(--font_color-black);
}
button.copy-btn.copied > div.button-icon,
button.copy-btn.copied > div.copy-content-inside { opacity: 0.8; background-color: #a4dba6; color: black; box-shadow: var(--box-shadow-wide);}
button.copy-btn.error > div.button-icon,
button.copy-btn.error > div.copy-content-inside { opacity: 0.8; background-color: #dc2626; color: white; box-shadow: var(--box-shadow-wide);}

#copy-group-header {
    display: grid;
    grid-template-columns: 100px 1fr;
    align-items: center;
    padding: 0px 0 0 8px;
}
#copy-group-header .label {
    padding: 0 0 3px 0;
    font-size: larger;
}

#prediction-copy-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1 1;
    gap: 18px;
    width: 100%;
    max-width: var(--wrap-small);
    margin: 20px auto 0 auto;
    position: relative;
}
#prediction-text-message {
    position: absolute;
    top: -95px;
    right: -8px;
}
#copy-prediction-code {
    margin: 0 auto;
    text-align: center;
}
#copy-group-url {
    margin: 0;
    text-align: right;
    padding: 0 !important;
    justify-self: end;
    opacity: 0.7;
}
#copy-group-url .icon-copy {
    opacity: 0.7;
}
#prediction-code-text {
    overflow-wrap: break-word;
    word-break: break-all;
    padding: 0;
    font-size: smaller;
    line-height: 148%;
}

/***** BASICS UL, etc. *******/
.basis-ul, .decimal-ul {
    list-style: none;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
}
.basis-ul li smaller {
    font-size: smaller;
    color: var(--font_color-grey-b);
}

.color-i i {
    text-transform: uppercase;
    font-family: var(--font_serif);
    color: var(--font_color-red);
    font-size: 110%;
}

ol { margin: 0 0 0 2em; padding: 0; }
ol, ul { box-sizing: border-box; }
ul.basis-ul li {
    position: relative;
    padding: 0 1em 0 1.2em;
    margin: 0 0 0em 0em;
}
ul.basis-ul li:last-child {
  margin: 0 0 1em 0em;
}
ul.basis-ul li::before {
    content: '';
    position: absolute;
    top: 0.6em;
    left: 0;
    width: 0.5em;
    height: 0.5em;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='31.875'%20height='79.936'%20xml:space='preserve'%3E%3Ccircle%20cx='15.938'%20cy='15.938'%20r='15.938'/%3E%3Ccircle%20fill='%23FFF'%20cx='15.938'%20cy='63.998'%20r='15.938'/%3E%3C/svg%3E");    background-size: cover;
    background-repeat: no-repeat;
    background-position: 0% 0%;
    opacity: 0.3;
}
[data-theme="dark"] ul.basis-ul li::before {
    background-position: 0% 100%;
}
ul.basis-ul.li-check li::before {
    top: 0.2em;
    left: 0;
    width: 1.3em;
    height: 1.3em;
    background-image: url(iconset.svg);
    background-size: 256px 256px;
    background-position: -70px -39px;
    background-repeat: no-repeat;
    opacity: 0.7;
}
[data-theme="dark"] ul.basis-ul.li-check li::before {
    background-position: -103px -39px;
}
ul.basis-ul.li-check li {
    padding: 0 0 0 26px;
}


.decimal-ul {
    list-style: decimal;
    margin: 0.5em 0 0 0;
}
ul.decimal-ul li {
    padding: 0 1em 0 0em;
    margin: 0 0 0 2em;
}
ul.basis-ul > li > ul.decimal-ul li::before {
    /* background-image: none !important; */
    display: none;
}




/********************************************************** KO-Wrapper *********************************/
#ko-outer-wrapper,
#ko-scroll,
#ko-inner {
    background-color: var(--bg-cool-gray);
}
#ko-outer-wrapper #ko-header,
#ko-outer-wrapper #ko-final-info,
#ko-outer-wrapper #scroll-arrow-outer {
    display: none;
}
#ko-scroll {
  opacity: 1;
  transition: opacity 300ms ease;
}
#ko-scroll.is-switching {
  opacity: 0;
}
#ko-outer-wrapper.active #ko-scroll {
    zoom: 1.1;
    position: relative;
    text-align: center;
    overflow-x: auto;
    padding: 20px 10px 20px 10px;
    margin: 28px 0 0 0;;
    border: 1px solid var(--border_color-grey);
    background-color: var(--bg-cool-gray) !important;
    background: var(--bg-cool-gray) !important;
    transition: opacity 300ms ease;
}
#ko-outer-wrapper.active #ko-final-info {
    display: block;
}
#ko-outer-wrapper.active #scroll-arrow-outer {
    display: none;
}
#ko-outer-wrapper.active #scroll-arrow-outer.scroll {
    display: block !important;
}
#ko-final-info {
    position: relative;
    top: 153px;
    left: -12px;
    width: 200px;
    line-height: 148%;
    font-size: small;
    text-align: center;
}
#scroll-arrow-outer {
    animation: bounce-arrow 1s ease-in-out infinite;
    position: relative;
    top: 284px;
    left: 68px;
    cursor: pointer;
    width: 36px;
    height: 36px;
    border: 3px solid var(--border-scroll-arrow);
    border-radius: 50%;
    opacity: 0.9;
}
.scroll-arrow-inner {
    width: 16px;
    height: 16px;
    border-right: 3px solid var(--border-scroll-arrow);
    border-bottom: 3px solid var(--border-scroll-arrow);
    transform: rotate(45deg);
    margin: 5px auto;
}
@keyframes bounce-arrow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}
#ko-outer-wrapper.active #ko-inner {
    position: relative;
    width: 880px;
    height: 620px;
    margin: 0 auto
}
#ko-outer-wrapper.active .predictor-stage-header,
#ko-outer-wrapper.active .match-date,
#ko-outer-wrapper.active .match-phase,
#ko-outer-wrapper.active .predictor-match-team__placeholder,
#ko-outer-wrapper.active .double-point,
#ko-outer-wrapper.active .predictor-match-team__indicator,
#ko-outer-wrapper.active .predictor-match-tile__title > span > i {
    display: none !important;
}
#ko-outer-wrapper.active .predictor-match-team {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    font-size: smaller;
}
#ko-outer-wrapper.active .predictor-match-team .predictor-flag-badge {
    width: 24px;
    height: 18px;
    margin: 0 0 0 2px;
}
#ko-outer-wrapper.active .predictor-match-team {
    padding: 0px;
    border-radius: 4px;
    align-self: flex-start;
    width: 100%;
    justify-content: left;
    max-width: calc(100% - 0px);
    min-height: auto;
}
#ko-outer-wrapper.active .predictor-match-team span:last-child {
    margin: 0;
}
#ko-outer-wrapper.active .predictor-match-tile__teams {
    flex-direction: column;
    min-height: 56px;
    width: auto;
    gap: 4px;
    margin: 0px 0 0 0;
}
#ko-outer-wrapper.active .predictor-match-tile__title {
    font-size: x-small;
    top: -10px;
    right: -2px !important;
    left: auto;
    z-index: 999;
    display: none !important;
}
#ko-outer-wrapper.active .predictor-match-tile__title span:first-child {
    padding: 1px 2px 1px 2px;
    font-size: smaller;
    font-weight: 400;
    background: #fff;
    color: var(--font_color-black);
    margin: 0;
}
#ko-outer-wrapper.active .predictor-match-tile {
    padding: 4px;
    display: inline-block;
    overflow: unset;
    width: 92px;
    position: absolute;
}

#ko-outer-wrapper.active .predictor-match-tile::after,
#ko-outer-wrapper.active .predictor-match-tile::before {
    content: "";
    position: absolute;
    background-image: url(ko-lines.svg);
    background-repeat: no-repeat;
    background-size: 100px auto;
    opacity: 0.5;
}

[data-theme="dark"] #ko-outer-wrapper.active .predictor-match-tile::after,
[data-theme="dark"] #ko-outer-wrapper.active .predictor-match-tile::before {
    background-image: url(ko-lines-white.svg);
    opacity: 0.3;
}
#ko-outer-wrapper.active [data-match-id="M74"]::after,
#ko-outer-wrapper.active [data-match-id="M73"]::after,
#ko-outer-wrapper.active [data-match-id="M83"]::after,
#ko-outer-wrapper.active [data-match-id="M81"]::after,
#ko-outer-wrapper.active [data-match-id="M77"]::after,
#ko-outer-wrapper.active [data-match-id="M75"]::after,
#ko-outer-wrapper.active [data-match-id="M84"]::after,
#ko-outer-wrapper.active [data-match-id="M82"]::after,
#ko-outer-wrapper.active [data-match-id="M89"]::after,
#ko-outer-wrapper.active [data-match-id="M93"]::after,
#ko-outer-wrapper.active [data-match-id="M90"]::after,
#ko-outer-wrapper.active [data-match-id="M94"]::after,
#ko-outer-wrapper.active [data-match-id="M97"]::after,
#ko-outer-wrapper.active [data-match-id="M98"]::after {
    top: 30px;
    right: -16px;
    width: 16px;
    height: 38px;
    background-position: -88px -18px;
}
#ko-outer-wrapper.active [data-match-id="M76"]::before,
#ko-outer-wrapper.active [data-match-id="M78"]::before,
#ko-outer-wrapper.active [data-match-id="M79"]::before,
#ko-outer-wrapper.active [data-match-id="M80"]::before,
#ko-outer-wrapper.active [data-match-id="M86"]::before,
#ko-outer-wrapper.active [data-match-id="M88"]::before,
#ko-outer-wrapper.active [data-match-id="M85"]::before,
#ko-outer-wrapper.active [data-match-id="M87"]::before,
#ko-outer-wrapper.active [data-match-id="M99"]::before,
#ko-outer-wrapper.active [data-match-id="M100"]::before {
    top: 30px;
    right: 89px;
    width: 18px;
    height: 38px;
    background-position: -88px -962px;
    transform: rotate(180deg);
}
#ko-outer-wrapper.active [data-match-id="M99"]::before {
    top: 29px;
    background-position: -88px -838px;
}
#ko-outer-wrapper.active [data-match-id="M91"]::before,
#ko-outer-wrapper.active [data-match-id="M92"]::before,
#ko-outer-wrapper.active [data-match-id="M95"]::before,
#ko-outer-wrapper.active [data-match-id="M96"]::before {
    top: 30px;
    right: 90px;
    width: 16px;
    height: 48px;
    background-position: -88px -918px;
    transform: rotate(180deg);
}
#ko-outer-wrapper.active [data-match-id="M92"]::before,
#ko-outer-wrapper.active [data-match-id="M96"]::before {
    top: -49px;
    background-position: -88px -17px;
}
#ko-outer-wrapper.active [data-match-id="M77"]::after,
#ko-outer-wrapper.active [data-match-id="M75"]::after,
#ko-outer-wrapper.active [data-match-id="M84"]::after,
#ko-outer-wrapper.active [data-match-id="M82"]::after {
    top: -6px;
    background-position: -88px -964px;
}
#ko-outer-wrapper.active [data-match-id="M90"]::after,
#ko-outer-wrapper.active [data-match-id="M94"]::after {
    top: -48px;
    background-position: -88px -921px;
}
#ko-outer-wrapper.active [data-match-id="M98"]::after,
#ko-outer-wrapper.active [data-match-id="M100"]::before {
    top: -127px;
}
#ko-outer-wrapper.active [data-match-id="M100"]::before {
    background-position: -88px -14px;
}
#ko-outer-wrapper.active [data-match-id="M98"]::after {
    background-position: -88px -842px;
}
#ko-outer-wrapper.active [data-match-id="M78"]::before,
#ko-outer-wrapper.active [data-match-id="M80"]::before,
#ko-outer-wrapper.active [data-match-id="M88"]::before,
#ko-outer-wrapper.active [data-match-id="M87"]::before {
    top: -6px;
    background-position: -88px -18px;
}
#ko-outer-wrapper.active [data-match-id="M89"]::before,
#ko-outer-wrapper.active [data-match-id="M90"]::before,
#ko-outer-wrapper.active [data-match-id="M93"]::before,
#ko-outer-wrapper.active [data-match-id="M94"]::before,
#ko-outer-wrapper.active [data-match-id="M97"]::before,
#ko-outer-wrapper.active [data-match-id="M98"]::before,
#ko-outer-wrapper.active [data-match-id="M101"]::before,
#ko-outer-wrapper.active [data-match-id="M91"]::after,
#ko-outer-wrapper.active [data-match-id="M92"]::after,
#ko-outer-wrapper.active [data-match-id="M95"]::after,
#ko-outer-wrapper.active [data-match-id="M96"]::after,
#ko-outer-wrapper.active [data-match-id="M99"]::after,
#ko-outer-wrapper.active [data-match-id="M100"]::after,
#ko-outer-wrapper.active [data-match-id="M102"]::after {
    top: 28px;
    right: 88px;
    height: 8px;
    width: 13px;
    background-position: -50px -1px;
}
#ko-outer-wrapper.active [data-match-id="M91"]::after,
#ko-outer-wrapper.active [data-match-id="M92"]::after,
#ko-outer-wrapper.active [data-match-id="M95"]::after,
#ko-outer-wrapper.active [data-match-id="M96"]::after,
#ko-outer-wrapper.active [data-match-id="M99"]::after,
#ko-outer-wrapper.active [data-match-id="M100"]::after,
#ko-outer-wrapper.active [data-match-id="M102"]::after  {
    right: -12px;
}
#ko-outer-wrapper.active [data-match-id="M89"]::after,
#ko-outer-wrapper.active [data-match-id="M93"]::after,
#ko-outer-wrapper.active [data-match-id="M90"]::after,
#ko-outer-wrapper.active [data-match-id="M94"]::after,
#ko-outer-wrapper.active [data-match-id="M91"]::before,
#ko-outer-wrapper.active [data-match-id="M92"]::before,
#ko-outer-wrapper.active [data-match-id="M95"]::before,
#ko-outer-wrapper.active [data-match-id="M96"]::before {
    height: 82px;
}
#ko-outer-wrapper.active [data-match-id="M97"]::after,
#ko-outer-wrapper.active [data-match-id="M98"]::after,
#ko-outer-wrapper.active [data-match-id="M99"]::before,
#ko-outer-wrapper.active [data-match-id="M100"]::before {
    height: 163px;
}
#ko-outer-wrapper.active .predictor-team-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 0 0 1px;
    display: inline-block;
    width: 6ch;
    text-transform: uppercase;
}
#ko-outer-wrapper.active .predictor-bracket__stage--ro32 {
    margin: 80px 0 40px 0;
}
#ko-outer-wrapper.active section {
    display: inline-block;
}
#ko-outer-wrapper.active .predictor-bracket__matches {
    display: inline-block;
}

    @media screen and (min-width: 720px) {
        #ko-outer-wrapper.active .predictor-bracket__matches {
            grid-template-columns: unset !important;
        }
    }

    @media screen and (min-width: 1024px) {
        #ko-outer-wrapper.active .predictor-groups-grid {
            grid-template-columns: unset !important;
        }
        #ko-outer-wrapper.active .predictor-bracket__matches {
            grid-template-columns: unset !important;
            gap: 0 !important;
        }
        #ko-outer-wrapper.active #ko-inner {
            zoom: 1.1;
        }
        #logo-copa-26 {
            background-position: 3px -1134px;
            background-size: 1200px 1200px;
            width: 296px;
        }
    }
    @media screen and (max-width: 1023px) {
        #ko-outer-wrapper.active .predictor-match-team {
            min-height: auto;
        }
    }

#ko-outer-wrapper.active [data-match-id="M74"] { top: 0; left: 0; }
#ko-outer-wrapper.active [data-match-id="M76"] { top: 0; right: 0; }

#ko-outer-wrapper.active [data-match-id="M77"] { top: 74px; left: 0; }
#ko-outer-wrapper.active [data-match-id="M78"] { top: 74px; right: 0;}

#ko-outer-wrapper.active [data-match-id="M73"] { top: 160px; left: 0; }
#ko-outer-wrapper.active [data-match-id="M79"] { top: 160px; right: 0; }

#ko-outer-wrapper.active [data-match-id="M75"] { top: 234px; left: 0; }
#ko-outer-wrapper.active [data-match-id="M80"] { top: 234px; right: 0; }

#ko-outer-wrapper.active [data-match-id="M83"] { top: 320px; left: 0; }
#ko-outer-wrapper.active [data-match-id="M86"] { top: 320px; right: 0; }

#ko-outer-wrapper.active [data-match-id="M84"] { top: 394px; left: 0; }
#ko-outer-wrapper.active [data-match-id="M88"] { top: 394px; right: 0; }

#ko-outer-wrapper.active [data-match-id="M81"] { top: 480px; left: 0; }
#ko-outer-wrapper.active [data-match-id="M85"] { top: 480px; right: 0; }

#ko-outer-wrapper.active [data-match-id="M82"] { top: 554px; left: 0; }
#ko-outer-wrapper.active [data-match-id="M87"] { top: 554px; right: 0; }

#ko-outer-wrapper.active [data-match-id="M89"] {
    position: absolute;
    top: 37px;
    left: 110px;
}
#ko-outer-wrapper.active [data-match-id="M91"] {
    position: absolute;
    top: 37px;
    right: 110px;
}
#ko-outer-wrapper.active [data-match-id="M97"] {
    position: absolute;
    top: 118px;
    left: 222px;
}
#ko-outer-wrapper.active [data-match-id="M99"] {
    position: absolute;
    top: 118px;
    right: 222px;
}
#ko-outer-wrapper.active [data-match-id="M92"] {
    position: absolute;
    top: 140px;
    right: 224px;
}
#ko-outer-wrapper.active [data-match-id="M90"] {
    position: absolute;
    top: 197px;
    left: 110px;
}
#ko-outer-wrapper.active [data-match-id="M92"] {
    position: absolute;
    top: 197px;
    right: 110px;
}
#ko-outer-wrapper.active [data-match-id="M93"] {
    position: absolute;
    top: 357px;
    left: 110px;
}
#ko-outer-wrapper.active [data-match-id="M95"] {
    position: absolute;
    top: 357px;
    right: 110px;
}
#ko-outer-wrapper.active [data-match-id="M94"] {
    position: absolute;
    top: 517px;
    left: 110px;
}
#ko-outer-wrapper.active [data-match-id="M96"] {
    position: absolute;
    top: 517px;
    right: 110px;
}
#ko-outer-wrapper.active [data-match-id="M98"] {
     position: absolute;
     top: 437px;
     left: 222px;
}
#ko-outer-wrapper.active [data-match-id="M100"] {
     position: absolute;
     top: 437px;
     right: 222px;
}
#ko-outer-wrapper.active [data-match-id="M101"] {
     position: absolute;
     top: 280px;
     left: 332px;
}
#ko-outer-wrapper.active [data-match-id="M102"] {
     position: absolute;
     top: 280px;
     right: 332px;
}

@media screen and (max-width: 640px) {
    #ko-outer-wrapper.active #ko-scroll::-webkit-scrollbar {
        display: none;
    }
    #ko-outer-wrapper.active #ko-scroll {

        zoom: 1 !important;
        scrollbar-width: none;
        -ms-overflow-style: none;
        box-shadow: rgba(0, 0, 0, 0.1) -6px 3px 7px -2px inset;
        border: 1px solid rgb(0 0 0 / 10%);

        background-image: linear-gradient(to right, #f5f5f7, #f5f5f7), linear-gradient(to right, #f5f5f7, #f5f5f7), linear-gradient(to right, rgba(0, 0, 20, .05), rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(0, 0, 20, .05), rgba(255, 255, 255, 0));
        background-position: left center, right center, left center, right center;
        background-repeat: no-repeat;
        background-color: #f5f5f7;
        background-size: 30px 100%, 30px 100%, 30px 100%, 30px 100%;
        background-attachment: local, local, scroll, scroll;
    }

        #app-share {
            grid-template-columns: repeat(1, 1fr);
        }
        .share-flag-wrap {
            grid-template-columns: 1fr;
            row-gap: 10px;
        }
        .address {
            margin: 20px 20px 0 0px;
        }
}

@media screen and (min-width: 1536px) {
    .predictor-groups-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
    .wrap {
        width: 80%;
    }
    #logo-copa-26 {
        background-position: 20px -1208px;
        background-size: 1280px 1280px;
        width: 340px;
        height: 60px;
    }

}

.ellipsis-wrapper {
    color: var(--color_0-percent-black);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 5ch;
}

@media screen and (min-width: 1024px) {
    .ellipsis-wrapper {
        width: 13ch;
}