@layer xone-reset, xone-base, xone-responsive, xone-layout, xone-components, xone-project;
@layer xone-project {
.xone-coll {
    background-color: #0A1E3F;
    notab: true;
    show-toolbar: false;
}

.xone-frame {
    border: none;
    background-color: #00000000;
    border: false;
    border-left: false;
    border-top: false;
    border-bottom: false;
    border-right: false;
}

.xone-prop {
    font-family: Roboto-Regular.ttf;
    color: #FFFFFF;
    text-border: false;
    labelbox: false;
    label-wrap: true;
    border: false;
    border-left: false;
    border-top: false;
    border-bottom: false;
    border-right: false;
}

.xone-prop-b {
    text-border: false;
    border-radius: calc(8 * var(--xone-p-unit, 1px));
    ripple-effect: true;
}

.xone-prop-img {
    text-border: false;
    labelbox: false;
}

.xone-prop-z {
    border: none;
}

.bgPrimario {
    background-color: #4B0082;
    --xone-align: center;
}

.bgSecundario {
    background-color: #00A859;
}

.bgDorado {
    background-color: #FFD700;
}

.bgRojo {
    background-color: #E63946;
}

.bgAzul {
    background-color: #0A1E3F;
}

.bgClaro {
    background-color: #F5F7FA;
    --xone-align: center;
}

.bgBlanco {
    background-color: #FFFFFF;
}

.frmHeader {
    background-color: #4B0082;
    --xone-align: center;
}

.txtTituloApp {
    color: #FFD700;
    font-size: calc((8 + 18) * var(--xone-font-unit, 1px));
    font-weight: bold;
    --xone-align: center;
}

.txtSubTituloApp {
    color: #FFFFFF;
    font-size: calc((8 + 11) * var(--xone-font-unit, 1px));
    font-weight: bold;
    --xone-align: center;
}

.frmFooter {
    background-color: #4B0082;
}

.btnMenuPrincipalMorado {
    background-color: #4B0082;
    border-radius: calc(16 * var(--xone-p-unit, 1px));
    margin-top: calc(8 * var(--xone-p-unit, 1px));
    margin-bottom: calc(8 * var(--xone-p-unit, 1px));
}

.btnMenuPrincipalVerde {
    background-color: #00A859;
    border-radius: calc(16 * var(--xone-p-unit, 1px));
    margin-top: calc(8 * var(--xone-p-unit, 1px));
    margin-bottom: calc(8 * var(--xone-p-unit, 1px));
}

.btnMenuPrincipalDorado {
    background-color: #FFD700;
    border-radius: calc(16 * var(--xone-p-unit, 1px));
    margin-top: calc(8 * var(--xone-p-unit, 1px));
    margin-bottom: calc(8 * var(--xone-p-unit, 1px));
}

.btnMenuPrincipalRojo {
    background-color: #E63946;
    border-radius: calc(16 * var(--xone-p-unit, 1px));
    margin-top: calc(8 * var(--xone-p-unit, 1px));
    margin-bottom: calc(8 * var(--xone-p-unit, 1px));
}

.txtBtnIcono {
    color: #FFFFFF;
    font-size: calc((8 + 32) * var(--xone-font-unit, 1px));
    font-weight: bold;
    --xone-align: center;
}

.txtBtnIconoOscuro {
    color: #4B0082;
    font-size: calc((8 + 32) * var(--xone-font-unit, 1px));
    font-weight: bold;
    --xone-align: center;
}

.txtBtnTitulo {
    color: #FFFFFF;
    font-size: calc((8 + 13) * var(--xone-font-unit, 1px));
    font-weight: bold;
    --xone-align: center;
}

.txtBtnTituloOscuro {
    color: #4B0082;
    font-size: calc((8 + 13) * var(--xone-font-unit, 1px));
    font-weight: bold;
    --xone-align: center;
}

.cardGrupo {
    background-color: #FFFFFF;
    border-radius: calc(12 * var(--xone-p-unit, 1px));
    margin-top: calc(6 * var(--xone-p-unit, 1px));
    margin-bottom: calc(6 * var(--xone-p-unit, 1px));
}

.cardGrupoLetra {
    background-color: #4B0082;
    border-radius: calc(12 * var(--xone-p-unit, 1px));
}

.txtLetraGrupo {
    color: #FFD700;
    font-size: calc((8 + 28) * var(--xone-font-unit, 1px));
    font-weight: bold;
    --xone-align: center;
}

.txtGrupoTitulo {
    color: #4B0082;
    font-size: calc((8 + 12) * var(--xone-font-unit, 1px));
    font-weight: bold;
}

.txtGrupoEquipos {
    color: #333333;
    font-size: calc((8 + 18) * var(--xone-font-unit, 1px));
}

.cardEquipo {
    background-color: #FFFFFF;
    border-radius: calc(10 * var(--xone-p-unit, 1px));
    margin-top: calc(4 * var(--xone-p-unit, 1px));
    margin-bottom: calc(4 * var(--xone-p-unit, 1px));
}

.txtBandera {
    font-size: calc((8 + 32) * var(--xone-font-unit, 1px));
    --xone-align: center;
}

.txtBanderaGrande {
    font-size: calc((8 + 60) * var(--xone-font-unit, 1px));
    --xone-align: center;
}

.txtNombrePais {
    color: #0A1E3F;
    font-size: calc((8 + 14) * var(--xone-font-unit, 1px));
    font-weight: bold;
}

.txtConfederacion {
    color: #00A859;
    font-size: calc((8 + 10) * var(--xone-font-unit, 1px));
    font-weight: bold;
}

.cardPartido {
    background-color: #FFFFFF;
    border-radius: calc(12 * var(--xone-p-unit, 1px));
    margin-top: calc(6 * var(--xone-p-unit, 1px));
    margin-bottom: calc(6 * var(--xone-p-unit, 1px));
}

.frmFechaPartido {
    background-color: #4B0082;
    border-radius: calc(12 * var(--xone-p-unit, 1px));
}

.txtDiaPartido {
    color: #FFD700;
    font-size: calc((8 + 18) * var(--xone-font-unit, 1px));
    font-weight: bold;
    --xone-align: center;
}

.txtMesPartido {
    color: #FFFFFF;
    font-size: calc((8 + 10) * var(--xone-font-unit, 1px));
    font-weight: bold;
    --xone-align: center;
}

.txtHoraPartido {
    color: #FFFFFF;
    font-size: calc((8 + 11) * var(--xone-font-unit, 1px));
    --xone-align: center;
}

.txtEquipoPartido {
    color: #0A1E3F;
    font-size: calc((8 + 12) * var(--xone-font-unit, 1px));
    font-weight: bold;
    --xone-align: center;
}

.txtVS {
    color: #E63946;
    font-size: calc((8 + 14) * var(--xone-font-unit, 1px));
    font-weight: bold;
    --xone-align: center;
}

.txtSedePartido {
    color: #666666;
    font-size: calc((8 + 9) * var(--xone-font-unit, 1px));
    --xone-align: center;
}

.cardJugador {
    background-color: #FFFFFF;
    border-radius: calc(10 * var(--xone-p-unit, 1px));
    margin-top: calc(4 * var(--xone-p-unit, 1px));
    margin-bottom: calc(4 * var(--xone-p-unit, 1px));
}

.txtNumeroDorsal {
    background-color: #4B0082;
    color: #FFD700;
    font-size: calc((8 + 18) * var(--xone-font-unit, 1px));
    font-weight: bold;
    --xone-align: center;
    border-radius: calc(20 * var(--xone-p-unit, 1px));
}

.txtNombreJugador {
    color: #0A1E3F;
    font-size: calc((8 + 13) * var(--xone-font-unit, 1px));
    font-weight: bold;
}

.txtPosicionJugador {
    color: #00A859;
    font-size: calc((8 + 10) * var(--xone-font-unit, 1px));
    font-weight: bold;
}

.frmHeaderEquipo {
    background-color: #4B0082;
}

.txtTituloEquipoGrande {
    color: #FFFFFF;
    font-size: calc((8 + 24) * var(--xone-font-unit, 1px));
    font-weight: bold;
    --xone-align: center;
}

.txtConfederacionGrande {
    color: #FFD700;
    font-size: calc((8 + 13) * var(--xone-font-unit, 1px));
    font-weight: bold;
    --xone-align: center;
}

.txtRankingFifa {
    color: #FFFFFF;
    font-size: calc((8 + 11) * var(--xone-font-unit, 1px));
    --xone-align: center;
}

.cardEstadio {
    background-color: #FFFFFF;
    border-radius: calc(12 * var(--xone-p-unit, 1px));
    margin-top: calc(6 * var(--xone-p-unit, 1px));
    margin-bottom: calc(6 * var(--xone-p-unit, 1px));
}

.txtNombreEstadio {
    color: #0A1E3F;
    font-size: calc((8 + 13) * var(--xone-font-unit, 1px));
    font-weight: bold;
}

.txtCiudadEstadio {
    color: #4B0082;
    font-size: calc((8 + 11) * var(--xone-font-unit, 1px));
    font-weight: bold;
}

.txtCapacidadEstadio {
    color: #666666;
    font-size: calc((8 + 10) * var(--xone-font-unit, 1px));
}

.btnAccion {
    background-color: #FFD700;
    color: #4B0082;
    font-size: calc((8 + 13) * var(--xone-font-unit, 1px));
    font-weight: bold;
    border-radius: calc(24 * var(--xone-p-unit, 1px));
}

.txtSeccion {
    color: #4B0082;
    font-size: calc((8 + 16) * var(--xone-font-unit, 1px));
    font-weight: bold;
}

.txtBanner {
    color: #FFFFFF;
    font-size: calc((8 + 13) * var(--xone-font-unit, 1px));
    font-weight: bold;
    --xone-align: center;
}

.frmSplash {
    background-color: #4B0082;
}

.txtSplashTrofeo {
    font-size: calc((8 + 80) * var(--xone-font-unit, 1px));
    --xone-align: center;
    color: #FFD700;
}

.txtSplashTitulo {
    color: #FFD700;
    font-size: calc((8 + 28) * var(--xone-font-unit, 1px));
    font-weight: bold;
    --xone-align: center;
}

.txtSplashAno {
    color: #FFFFFF;
    font-size: calc((8 + 40) * var(--xone-font-unit, 1px));
    font-weight: bold;
    --xone-align: center;
}

.txtSplashSede {
    color: #FFFFFF;
    font-size: calc((8 + 12) * var(--xone-font-unit, 1px));
    --xone-align: center;
    font-weight: bold;
}

.frmInfoBox {
    background-color: #FFFFFF;
    border-radius: calc(12 * var(--xone-p-unit, 1px));
    margin-top: calc(8 * var(--xone-p-unit, 1px));
    margin-bottom: calc(8 * var(--xone-p-unit, 1px));
}

.txtInfoValor {
    color: #0A1E3F;
    font-size: calc((8 + 13) * var(--xone-font-unit, 1px));
}

.btnAtras {
    background-color: #00000000;
    text-border: false;
    border: none;
    border: false;
    labelbox: false;
    label-wrap: false;
    title: "";
    ripple-effect: false;
}

.groupNoTab {
    background-color: #4B0082;
}

.frmLoginHeader {
    background-color: #4B0082;
}

.txtLoginTrofeo {
    font-size: calc((8 + 50) * var(--xone-font-unit, 1px));
    --xone-align: center;
    color: #FFD700;
}

.txtLoginTituloApp {
    color: #FFD700;
    font-size: calc((8 + 20) * var(--xone-font-unit, 1px));
    font-weight: bold;
    border: false;
    --xone-align: center;
}

.txtLoginSubtituloApp {
    color: #FFFFFF;
    font-size: calc((8 + 10) * var(--xone-font-unit, 1px));
    font-weight: bold;
    --xone-align: center;
}

.textoEditable {
    background-color: #F5F7FA;
    color: #0A1E3F;
    font-size: calc((8 + 13) * var(--xone-font-unit, 1px));
    border-radius: calc(8 * var(--xone-p-unit, 1px));
}

.btnPrimario {
    background-color: #FFD700;
    color: #4B0082;
    font-size: calc((8 + 14) * var(--xone-font-unit, 1px));
    font-weight: bold;
    border-radius: calc(25 * var(--xone-p-unit, 1px));
}

.btnSecundario {
    background-color: #00A859;
    color: #FFFFFF;
    font-size: calc((8 + 12) * var(--xone-font-unit, 1px));
    font-weight: bold;
    border-radius: calc(25 * var(--xone-p-unit, 1px));
}

.txtLoginCredencial {
    color: #00A859;
    font-size: calc((8 + 10) * var(--xone-font-unit, 1px));
    font-weight: bold;
    --xone-align: center;
}

.txtLoginPie {
    color: #FFFFFF;
    font-size: calc((8 + 10) * var(--xone-font-unit, 1px));
    --xone-align: center;
    font-weight: bold;
}
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  @view-transition { navigation: none; }
}