@import url(https://c1-ofp.static.pub/ShareResource/DSM/DSM_3/css/dsm3-css-variables.css?update); * { margin: 0; padding: 0; box-sizing: border-box; } .html_upload_pc { min-height: auto  !important; } img { max-width: 100%; } body { margin: 0  !important; } .dx-grid-container { display: flex; flex-direction: row; flex-wrap: wrap; } .dx-grid-container.dx-grid-container-gap { gap: calc(var(--spacing-3) * 1rem); } .dx-grid-container.dx-grid-container-nogap { gap: 0px; } .dx-grid-container.dx-grid-container-fullwidth { width: 100%; margin-left: auto; margin-right: auto; } .dx-grid-container.dx-grid-container-fulldesktop { max-width: var(--breakpoint-full-desktop); margin-left: auto; margin-right: auto; } .dx-grid-row { display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; position: relative; } .dx-grid-row li { margin-left: 0  !important; } .dx-grid-row.dx-grid-row-nogap { gap: 0px; } .dx-grid-row.dx-grid-row-gap { gap: calc(var(--spacing-3) * 1rem); } .dx-grid-row.dx-grid-row-margins { padding-left: calc(var(--mobile-grid-margins) * 1rem); padding-right: calc(var(--mobile-grid-margins) * 1rem); } @media screen and (min-width: 768px) { .dx-grid-row.dx-grid-row-margins { padding-left: calc(var(--tablet-grid-margins) * 1rem); padding-right: calc(var(--tablet-grid-margins) * 1rem); } } @media screen and (min-width: 1280px) { .dx-grid-row.dx-grid-row-margins { padding-left: clamp(var(--small-desktop-grid-margins) * 1rem, (100% - 1520px) / 2 + var(--small-desktop-grid-margins) * 1rem, var(--full-desktop-grid-margins) * 1rem); padding-right: clamp(var(--small-desktop-grid-margins) * 1rem, (100% - 1520px) / 2 + var(--small-desktop-grid-margins) * 1rem, var(--full-desktop-grid-margins) * 1rem); } } @media screen and (min-width: 1920px) { .dx-grid-row.dx-grid-row-margins { padding-left: calc((100% - 1920px) / 2 + var(--full-desktop-grid-margins) * 1rem); padding-right: calc((100% - 1920px) / 2 + var(--full-desktop-grid-margins) * 1rem); } } .dx-grid { display: flex; flex-shrink: 0  !important; flex-grow: 0  !important; position: relative; } .dx-grid-row.dx-grid-row-nogap .dx-grid { width: clamp(0%, 25% * var(--columns-sm), 100%); } @media screen and (min-width: 768px) { .dx-grid-row.dx-grid-row-nogap .dx-grid { width: clamp(0%, 12.5% * var(--columns-md), 100%); } } @media screen and (min-width: 1280px) { .dx-grid-row.dx-grid-row-nogap .dx-grid { width: clamp(0%, 8.3333333333% * var(--columns-lg), 100%); } } @media screen and (min-width: 1920px) { .dx-grid-row.dx-grid-row-nogap .dx-grid { width: clamp(0%, 8.3333333333% * var(--columns-xl), 100%); } } .dx-grid-row.dx-grid-row-gap .dx-grid { width: clamp(0%, 25% * var(--columns-sm) - var(--spacing-3) * 1rem / 4 * (4 - var(--columns-sm)), 100%); } @media screen and (min-width: 768px) { .dx-grid-row.dx-grid-row-gap .dx-grid { width: clamp(0%, 12.5% * var(--columns-md) - var(--spacing-3) * 1rem / 8 * (8 - var(--columns-md)), 100%); } } @media screen and (min-width: 1280px) { .dx-grid-row.dx-grid-row-gap .dx-grid { width: clamp(0%, 8.3333333333% * var(--columns-lg) - var(--spacing-3) * 1rem / 12 * (12 - var(--columns-lg)), 100%); } } @media screen and (min-width: 1920px) { .dx-grid-row.dx-grid-row-gap .dx-grid { width: clamp(0%, 8.3333333333% * var(--columns-xl) - var(--spacing-3) * 1rem / 12 * (12 - var(--columns-xl)), 100%); } } .dx-typo { font-size: calc(var(--fs, var(--body-m)) * 1rem); line-height: calc(var(--lh, var(--body-m-line)) * 1rem); letter-spacing: calc(var(--ls, var(--body-m-ls)) * 1rem); font-family: var(--ff, var(--typo-primary)); margin-top: calc(var(--mt, 0) * 1rem); margin-bottom: calc(var(--mb, 0) * 1rem); color: var(--color, inherit); } @media (min-width: 768px) { .dx-typo { font-size: calc(var(--md-fs, var(--fs)) * 1rem); line-height: calc(var(--md-lh, var(--lh)) * 1rem); letter-spacing: calc(var(--md-ls, var(--ls)) * 1rem); margin-top: calc(var(--md-mt, var(--mt)) * 1rem); margin-bottom: calc(var(--md-mb, var(--mb)) * 1rem); } } @media (min-width: 1280px) { .dx-typo { font-size: calc(var(--lg-fs, var(--md-fs, var(--fs))) * 1rem); line-height: calc(var(--lg-lh, var(--md-lh, var(--lh))) * 1rem); letter-spacing: calc(var(--lg-ls, var(--md-ls, var(--ls))) * 1rem); margin-top: calc(var(--lg-mt, var(--md-mt, var(--mt))) * 1rem); margin-bottom: calc(var(--lg-mb, var(--md-mb, var(--mb))) * 1rem); } } @media (min-width: 1920px) { .dx-typo { font-size: calc(var(--xl-fs, var(--lg-fs, var(--fs))) * 1rem); line-height: calc(var(--xl-lh, var(--lg-lh, var(--lh))) * 1rem); letter-spacing: calc(var(--xl-ls, var(--lg-ls, var(--ls))) * 1rem); margin-top: calc(var(--xl-mt, var(--lg-mt, var(--mt))) * 1rem); margin-bottom: calc(var(--xl-mb, var(--lg-mb, var(--mb))) * 1rem); } } .dx-typo-bold { font-weight: var(--bold); } .dx-typo-secondary { font-family: var(--typo-secondary); } @import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap"); @import url("https://c1-ofp.static.pub/ShareResource/DSM/DSM_2/css/variables.css"); @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap'); body { padding: 0; margin: 0; box-sizing: border-box; } .dx-countdown-numbers-container { display: flex; flex-direction: row; gap: calc(var(--spacing-1) * .5rem); justify-content: center; } .dx-countdown-numbers-container > div:nth-child(odd){ display: flex; flex-direction: column; align-items: center; row-gap: 4px; min-width: calc(100% / 3); } .dx-countdown-numbers-container > div > div{ display: flex; flex-direction: row; } .dx-countdown-span { position: relative; width: 10px; height: 20px; overflow: hidden; border-radius: 3px; background-color: var(--connector-med); display: flex; align-items: center; } @media screen and (max-width: 768px){ .dx-countdown-span:first-child { border-radius: 3px 0 0 3px; } .dx-countdown-span:nth-child(2){ border-radius: 0 3px 3px 0; } .dx-countdown-numbers-container > div > div{ width: 40px; background-color: var(--connector-med); justify-content: center; border-radius: 3px; padding: 5px 0; } } .dx-countdown-new, .dx-countdown-old { position: absolute; left: 50%; color: var(--pure-light); font-weight: 600; transform: translateX(-50%); transition: opacity .3s ease-out; font-size: calc(var(--body-m) * 1rem); line-height: calc(var(--body-m-line) * 1rem); letter-spacing: calc(var(--body-m-ls) * 1rem); font-family: var(--typo-secondary); } .dx-countdown-new { opacity: 0; } .dx-countdown-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-2); align-items: center; } @media screen and (min-width: 768px) { .dx-countdown-numbers-container > div:nth-child(odd){ min-width: unset; } .dx-countdown-numbers-container > div, .dx-countdown-numbers-container > div > div{ gap: 4px; } .dx-countdown-numbers-container { gap: calc(var(--spacing-4) * 1rem); } .dx-countdown-grid { grid-template-columns: repeat(8, 1fr); } .dx-countdown-span { width: 40px; height: 30px; padding: 8px 12px; border-radius: 3px; } .dx-countdown-new, .dx-countdown-old { font-size: calc(var(--headline-s) * 1rem); line-height: calc(var(--headline-s-line) * 1rem); letter-spacing: calc(var(--headline-s-ls) * 1rem); } } @media screen and (min-width: 1280px) { .dx-countdown-grid { grid-template-columns: repeat(12, 1fr); } } @media screen and (min-width: 1920px) { .dx-countdown-container { padding: var(--spacing-2) var(--xl-grid-margin); } } #fifa-dlp-modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0, 0, 0, .5); z-index: 9999; padding: 0 16px; } #fifa-dlp-modal.is-open { display: flex; } .modal-content { border-radius: 16px; background: white; border-radius: 8px; overflow: visible; max-width: 900px; width: 100%; display: flex; flex-direction: column; position: relative; padding: 32px 8px 0 8px; } .modal-content iframe { border: none; } .btn-close{ color: var(--pure-light); font-family: var(--typo-primary); font-weight: bold; width: 19px; padding: 0; pointer-events: all; cursor: pointer; background-color: transparent; border: none; position: absolute; top: -32px; right: 8px; z-index: 999; } @media screen and (min-width: 1280px) { .btn-close{ color: var(--pure-dark); top: 8px; right: 8px} }