@font-face {
    font-family: 'USAInline';
    src: url('../fonts/USA.ttf');
}
@font-face {
    font-family: 'Holland';
    src: url('../fonts/HOLLAND.ttf');
}
@font-face {
    font-family: 'Puma';
    src: url('../fonts/Puma.ttf');
}
[tema="dark"] {
    --color-fuente: #FFF;
    --color-fondo: #000;
}
body.box-login {
    background-image: url("../images/w-paper.jpg");
    background-size: 100% 100vh;
    font-family: verdana, arial, georgia, sans-serif;
    color: #afafaf;
}
body.box-content {
    background-color: #1334e3;
    font-family: 'Puma', sans-serif;
}
div.titles {
    margin-top: 100px;
    font-size: 50px;
    color: #FFF;
    font-weight: bold;
    text-align: center;    
}
div.titles span {
    margin-left: -160px;
}
div.content {
    background-color: #ffffff;
    color: #222222;
    border-radius: 20px;
    margin-bottom: 150px;
}
div.content2 {
    background-color: #222222;
    color: #c7c0b5;
    border-radius: 20px;
}
div.box {
    border: 1px solid #fff;
    margin-top: 150px;
    margin-left: 30%;
    margin-right: 30%;
    border-radius: 20px;
    background-color: #000;

}
div.box-datas {
    padding-left: 5%;
    padding-right: 5%;
    width: 100%;
}
div.title-datas {
    padding-left: 5%;
    padding-right: 5%;
    text-align: center;
    font-size: 70px;
    font-weight: bold;
    font-family: 'Puma', sans-serif;
    color: #afafaf;
    height: 185px;
    background-image: url("../images/logo-2.png");
    background-size: 300px 174px;
    background-repeat: no-repeat;
    background-position: center;
}
div.torneo {
    height: 330px;
    text-align: center;
}
div.torneo img.seleccionar {
    cursor:pointer;
    object-fit: cover;
    width: 316px;
    height: 316px;
}
div.pronostico {
    background-color: #eeeeee;
    border: 1px solid #999;
    border-radius: 10px;
    font-size: 20px;
    margin-top: 5px;
    margin-bottom: 5px;
    height: 140px;
    font-family: 'Puma', sans-serif;
}
div.jornada {
    background-color: #eeeeee;
    border: 1px solid #999;
    border-radius: 10px;
    font-size: 20px;
    margin-top: 5px;
    margin-bottom: 5px;
    height: 100px;
    font-family: 'Puma', sans-serif;
}
div.pronostico_2 {
    background-color: #eeeeee;
    border: 1px solid #999;
    border-radius: 10px;
    font-size: 20px;
    margin-top: 5px;
    margin-bottom: 5px;
    height: 110px;
    font-family: 'Puma', sans-serif;
}
div.juego {
    margin-top: 5px;
    margin-bottom: 5px;
    height: 50px;
}
div.local, div.visita {
    height: 24px;
}
div.local .team,
div.visita .team {
    font-size: 20px;
    font-weight: bold;
    height: 20px;
    float: left;
    width: 85%;
}
div.local .flag img,
div.visita .flag img {
    width: 30px;
    float: left;
    margin-left: 5px;
    height: 20px;
    border-radius: 5px;
}
div.local .name,
div.visita .name {
    font-size: 20px;
    font-weight: 600;
    float: left;
    margin-left: 5px;
    height: 20px;
    width: 170px;
    margin-top: -5px;
}
div.local .marcador,
div.visita .marcador {
    font-size: 20px;
    font-weight: bold;
    height: 20px;
    float: right;
    width: 15%;
    text-align: center;
    margin-top: -5px;
}
div.local .marcador span,
div.visita .marcador span {
    font-weight: normal;
    font-size: 20px;
    display: block;
    float: right;
    margin-left: -5px;
}
div.fechaJornada {
    font-size: 18px;
    margin-top: 15px;
    margin-bottom: 10px;
    margin-left: 20px;
    margin-right: 20px;
    padding-left: 15px;
    font-weight: bold;
    background-color: #cacaca;
    color: #000;
    border: 1px solid #797979;
}
div.horario {
    width: 100%;
    font-weight: normal;
    font-family: arial, verdana, sans-serif;
    font-size: 12px;
}
div.horario .fecha {
    width: 70%;
    float: left;
    text-align: left;
    padding-left: 10px;
}
div.horario .hora {
    width: 30%;
    float: right;
    text-align: right;
    padding-right: 10px;
}
div.horario .hora2 {
    width: 50%;
    float: left;
    text-align: left;
    padding-left: 10px;
    margin-top: -5px;
}
div.escenario {
    width: 100%;
    font-weight: normal;
    font-family: arial, verdana, sans-serif;
    font-size: 12px;
}
div.escenario .estadio, .ciudad {
    width: 100%;
    float: left;
    text-align: left;
    padding-left: 10px;
}
div.grupos {
    height: 23px;
    color: #fff;
    padding-top: -25px;
    text-align: center;
    font-size: 15px;
    border-top-left-radius: 9px;
    border-top-right-radius: 9px;
    border-bottom: 1px solid #999;
}
div.A {
    background-color: #00bb5d;
    color: #FFF;
}
div.B {
    background-color: #002b91;
    color: #FFF;
}
div.C {
    background-color: #fe0000;
    color: #FFF;
}
div.D {
    background-color: #ffca00;
    color: #000;
}
div.E {
    background-color: #4c1a85;
    color: #FFF;
}
div.F {
    background-color: #1e1e26;
    color: #FFF;
}
div.G {
    background-color: #d35c5c;
    color: #FFF;
}
div.H {
    background-color: #00b0f0;
    color: #FFF;
}
div.I {
    background-color: #dfc376;
    color: #000;
}
div.J {
    background-color: #00ad9e;
    color: #000;
}
div.K {
    background-color: #b1e902;
    color: #000;
}
div.L {
    background-color: #90f9c4;
    color: #000;
}
div.R {
    background-color: #741311;
    color: #FFF;
}
div.O {
    background-color: #000000;
    color: #FFF;
}
div.Q {
    background-color: #3f530e;
    color: #FFF;
}
div.S {
    background-color: #4e4e4e;
    color: #FFF;
}
div.T {
    background-color: #8E402A;
    color: #FFF;
}
div.X {
    background-color: #bf930d;
    color: #FFF;
}
div.toper {
    border-bottom: 1px solid #999;
    background-color: #000;
    height: 60px;
    width: 100%;
    font-weight: bold;
    text-align: center;
    position: fixed;
    z-index: 1000;
    color: #EEE;
    box-shadow: 0 0 10px 0px #eeeeee;
    padding-top: 5px;
    top: 0;
}
div.msjError {
    display: none;
    border-bottom: 1px solid #880000;
    background-color: #F00;
    height: 60px;
    width: 100%;
    font-weight: bold;
    text-align: center;
    position: fixed;
    z-index: 1000;
    color: #FFF;
    font-family: 'Puma', sans-serif;
    padding-top: 20px;
    font-size: 20px;
    top: 0;
}
div.msjExito {
    display: none;
    border-bottom: 1px solid #002600;
    background-color: #050;
    height: 60px;
    width: 100%;
    font-weight: bold;
    text-align: center;
    position: fixed;
    z-index: 1000;
    color: #FFF;
    font-family: 'Puma', sans-serif;
    padding-top: 20px;
    font-size: 20px;
    top: 0;
}
div.mensajeError {
    display: none;
    border-bottom: 1px solid #880000;
    background-color: #F00;
    height: 60px;
    width: 100%;
    font-weight: bold;
    text-align: center;
    position: fixed;
    z-index: 1000;
    color: #FFF;
    font-family: 'Puma', sans-serif;
    padding-top: 20px;
    font-size: 20px;
    z-index: 5000;
    top: 0;
}
div.mensajeExito {
    display: none;
    border-bottom: 1px solid #002600;
    background-color: #050;
    height: 60px;
    width: 100%;
    font-weight: bold;
    text-align: center;
    position: fixed;
    z-index: 1000;
    color: #FFF;
    font-family: 'Puma', sans-serif;
    padding-top: 20px;
    font-size: 20px;
    z-index: 5000;
    top: 0;
}
div.foot {
    border-top: 1px solid #5f79eb;
    background-color: #04093a;
    height: 50px;
    width: 100%;
    font-weight: bold;
    text-align: center;
    position: fixed;
    z-index: 1000;
    color: #EEE;
    box-shadow: 0 0 10px 0px #eeeeee;
    padding-top: 7px;
    bottom: 0;
    font-size: 10px !important;
    font-family: arial, sans-serif !important;
}
div.menu {
    text-align: center;
    padding-left: 0;
    padding-right: 0;
}
div.menu span {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}
img.imgTop {
    height: 50px;
    margin-top: -10px;
}
div.usuario {
    font-size: 25px;
}
div.gameData, div.gameClock {
    width: 100%;
}
div.tHome, div.sHome, div.sHomeTrue, div.sAway, div.sAwayTrue, div.tAway, div.vacio, div.dateHour, div.separator {
    float: left;
}
div.tHome {
    width: 35%;
    margin-top: -15px;
    text-align: center;
    font-size: 12px;
}
div.tHome img {
    width: 50px;
}
div.sHome {
    width: 15%;
    height: 40px;
    background-image: url("../images/score.png");
    background-size: 30px 30px;
    background-repeat: no-repeat;
    background-position: center;
    margin-top: -8px;
}
div.sAway {
    width: 15%;
    height: 40px;
    background-image: url("../images/score.png");
    background-size: 30px 30px;
    background-repeat: no-repeat;
    background-position: center;
    margin-top: -8px;
}
div.sHomeTrue {
    width: 12%;
    height: 40px;
    text-align: center;
    margin-top: -10px;
    font-size: 35px;
    font-weight: bold;
}
div.sHomeTrue span {    
    font-size: 15px;
    font-weight: none;
}
div.separator {
    width: 6%;
    height: 40px;
    text-align: center;
    margin-top: -1px;
    font-size: 25px;
    font-weight: bold;
}
div.sAwayTrue {
    width: 12%;
    height: 40px;
    text-align: center;
    margin-top: -10px;
    font-size: 35px;
    font-weight: bold;
}
div.sAwayTrue span {    
    font-size: 15px;
    font-weight: none;
}
div.tAway {
    width: 35%;
    margin-top: -15px;
    text-align: center;
    font-size: 12px;
}
div.tAway img {
    width: 50px;
}
div.vacio {
    width: 35%;
}
div.dateHour {
    width: 30%;
    text-align: center;
    font-family: arial, verdana, sans-serif;
    font-size: 10px;
    margin-top: -5px;
}
div.puntuacion {
    width: 100%;
    font-weight: bold;
    font-size: 10px;
    text-align: center;
    position: relative;
    font-family: arial, verdana, sans-serif;
    margin-top: 18px;
    height: 15px;
}
div.selector {
    border: 1px solid #000;
    background-color: #FFF;
    margin-left: 5px;
    margin-right: 5px;
    width: 70px;
    height: 70px;
    cursor: pointer;
    float: left;
}
div.selector img {
    width: 60px;
    height: 60px;
}
div.boxGroup {
    margin-top: 18px;
    margin-bottom: 18px;
    font-size: 16px;
    background-color: #e2e2e2;
}
div.titleGroup {
    width: 100%;
}
div.titleGroup div.titleTeam {
    width: 36%;
    float: left;
    font-weight: bold;
    padding-left: 5px;
    height: 22px;
}
div.titleGroup div.titleData {
    width: 8%;
    float: left;
    text-align: center;
    font-weight: bold;
    height: 22px;
}
div.dataGroup {
    width: 100%;
}
div.dataGroup div.dataTeam {
    width: 36%;
    height: 22px;
    float: left;
}
img.imgTeam {
    width: 18px;
    height: 18px;
    margin-right: 5px;
    border-radius: 9px;
}
div.dataGroup div.dataGame {
    width: 8%;
    height: 22px;
    float: left;
    text-align: center;
}
@media (max-width: 512px)
{
    div.box
    {
        margin-top: 100px;
        margin-left: 10%;
        margin-right: 10%;
        border-radius: 20px;
    }
    div.box-datas {
        padding-left: 5%;
        padding-right: 5%;
        width: 100%;
    }
    div.title-datas {
        padding-left: 5%;
        padding-right: 5%;
        text-align: center;
        font-size: 45px;
        font-weight: bold;
        font-family: 'Puma', sans-serif;
        color: #afafaf;
        height: 140px;
        background-image: url("../images/logo-2.png");
        background-size: 224px 130px;
        background-repeat: no-repeat;
        background-position: center;
    }
    div.titles {
        margin-top: 70px;
        font-size: 30px;
        color: #FFF;
        font-weight: bold;
        text-align: center;
    }
    div.titles span {
        margin-left: -100px;
    }
    div.content {
        margin-left: 5%;
        margin-right: 5%;
        background-color: #FFF;
        color: #222222;
        border-radius: 20px;
        margin-bottom: 100px;
    }
    div.content2 {
        margin-left: 5%;
        margin-right: 5%;
        background-color: #222222;
        color: #c7c0b5;
        border-radius: 20px;
    }
    div.torneo {
        height: 230px;
        text-align: center;
    }
    div.torneo img.seleccionar {
        cursor:pointer;
        object-fit: cover;
        width: 230px;
        height: 230px;
    }
    div.toper {
        border-bottom: 1px solid #999;
        background-color: #000;
        height: 50px;
        width: 100%;
        font-weight: bold;
        text-align: center;
        position: fixed;
        z-index: 1000;
        color: #EEE;
        box-shadow: 0 0 10px 0px #eeeeee;
        padding-top: 10px;
        font-size: 10px;
    }
    div.foot {
        border-top: 1px solid #5f79eb;
        background-color: #04093a;
        height: 50px;
        width: 100%;
        font-weight: bold;
        text-align: center;
        position: fixed;
        z-index: 1000;
        color: #EEE;
        box-shadow: 0 0 10px 0px #eeeeee;
        padding-top: 7px;
        bottom: 0;
        font-size: 10px !important;
        font-family: arial, sans-serif !important;
    }
    div.menu {
        text-align: center;
        padding-left: 0;
        padding-right: 0;
    }
    img.imgTop {
        height: 35px;
    }
    div.selector {
        border: 1px solid #000;
        background-color: #FFF;
        margin-left: 5px;
        margin-right: 5px;
        width: 40px;
        height: 40px;
        cursor: pointer;
        float: left;
    }
    div.selector img {
        width: 30px;
        height: 30px;
    }
    div.boxGroup {
        margin-top: 18px;
        margin-bottom: 18px;
        font-size: 14px;
    }
}
@media (min-width: 512px) and (max-width: 1024px)
{
    div.box
    {
        margin-top: 80px;
        margin-left: 8%;
        margin-right: 8%;
        border-radius: 20px;
    }
    div.box-datas {
        padding-left: 5%;
        padding-right: 5%;
        width: 100%;
    }
    div.title-datas {
        padding-left: 5%;
        padding-right: 5%;
        text-align: center;
        font-size: 50px;
        font-weight: bold;
        font-family: 'Puma', sans-serif;
        color: #afafaf;
        height: 140px;
        background-image: url("../images/logo-2.png");
        background-size: 224px 130px;
        background-repeat: no-repeat;
        background-position: center;
    }
    div.titles {
        margin-top: 70px;
        font-size: 30px;
        color: #FFF;
        font-weight: bold;
        text-align: center;
    }
    div.titles span {
        margin-left: -100px;
    }
    div.content {
        margin-left: 5%;
        margin-right: 5%;
        border: 1px #1334e3 solid;
        background-color: #FFF;
        border-radius: 20px;
        margin-bottom: 100px;
    }
    div.torneo {
        height: 230px;
        text-align: center;
    }
    div.torneo img.seleccionar {
        cursor:pointer;
        object-fit: cover;
        width: 230px;
        height: 230px;
    }
    div.toper {
        border-bottom: 1px solid #999;
        background-color: #000;
        height: 50px;
        width: 100%;
        font-weight: bold;
        text-align: center;
        position: fixed;
        z-index: 1000;
        color: #EEE;
        box-shadow: 0 0 10px 0px #eeeeee;
        padding-top: 10px;
        font-size: 10px;
    }
    div.foot {
        border-top: 1px solid #5f79eb;
        background-color: #04093a;
        height: 50px;
        width: 100%;
        font-weight: bold;
        text-align: center;
        position: fixed;
        z-index: 1000;
        color: #EEE;
        box-shadow: 0 0 10px 0px #eeeeee;
        padding-top: 7px;
        bottom: 0;
        font-size: 10px !important;
        font-family: arial, sans-serif !important;
    }
    div.menu {
        text-align: center;
    }
    img.imgTop {
        height: 35px;
    }
    div.selector {
        border: 1px solid #000;
        background-color: #FFF;
        margin-left: 5px;
        margin-right: 5px;
        width: 40px;
        height: 40px;
        cursor: pointer;
        float: left;
    }
    div.selector img {
        width: 30px;
        height: 30px;
    }
    div.boxGroup {
        margin-top: 18px;
        margin-bottom: 18px;
        font-size: 14px;
    }
}
label {
    color: #fff;
    font-family: 'Puma', sans-serif;
}
input[type=email],
input[type=password],
input[type=text],
input[type=date],
input[type=time] {
    border: 1px solid #1334e3;
    padding: 10px;
    font-family: arial, sans-serif;
}
div.camp {
    margin-top: 10px;
}
div.send {
    margin-top: 20px;
    margin-bottom: 20px;
}
div.register,
div.opening {
    text-align: center;
    font-weight: bold;
    font-family: 'Puma', sans-serif;
    font-size: 16px;
    color: #fff;
    margin-bottom: 15px;
}
div.register a,
div.opening a {
    color: #4862e2;
}
div.register a:hover,
div.opening a:hover {
    color: #f8f685;
}
button.btn-send {
    font-family: 'Puma', sans-serif;
    font-size: 18px;
    background-color: #1334e3;
    color: #fff;
}
button.btn-send:hover {
    font-family: 'Puma', sans-serif;
    font-size: 18px;
    background-color: #4b66ee;
    border: 1px solid #1334e3;
    color: #000;
}
div.redireccionando {
    height: 106px;
    background-image: url("../images/balon.gif");
    background-size: 106px 106px;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 10000;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: none;
    margin: 0 auto;
    padding-top: 700px;
}
div.cargando {
    height: 106px;
    background-image: url("../images/balon.gif");
    background-size: 106px 106px;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1000;
    position: relative;
    top: -300px;
    display: none;
}
div.cargando2 {
    height: 106px;
    background-image: url("../images/balon.gif");
    background-size: 106px 106px;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1000;
    position: relative;
    top: -400px;
    display: none;
}
div.cargando3 {
    height: 80px;
    background-image: url("../images/balon.gif");
    background-size: 80px 80px;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 3000;
    position: relative;
    top: -70px;
    display: none;
    margin-bottom: -80px;
}
div.cargando4 {
    height: 80px;
    background-image: url("../images/balon.gif");
    background-size: 80px 80px;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 3000;
    position: relative;
    top: -70px;
    display: none;
    margin-bottom: -80px;
}
a.navFoot {
    color: #EEE;
    text-decoration: none;
}
a.navFoot:hover {
    color: #FF0;
    text-decoration: none;
}
div.agrupar {
    text-align: center;
    width: 30%;
    float: left;
}
div.marcadores {
    text-align: center;
    width: 20%;
    float: left;
}
div.sinData {
    width: 30%;
    float: left;
}
div.pEnlaces {
    width: 20%;
    float: left;
}
div.penaltis
{
    text-align: center;
}
div.marcadores input#pronosticoLocal,
div.marcadores input#pronosticoVisita,
div.marcadores input#scoreLocal,
div.marcadores input#scoreVisita {
    font-size: 22px;
    border: 1px solid #002b91;
}
div.pEnlaces input#penalesLocal,
div.pEnlaces input#penalesVisita,
div.pEnlaces input#penalLocal,
div.pEnlaces input#penalVisita {
    font-size: 20px;
    border: 1px solid #002b91;
}
div.marcadores input#pronosticoLocal,
div.marcadores input#scoreLocal {
    margin-right: 5px;
}
div.marcadores input#pronosticoVisita
div.marcadores input#scoreVisita {
    margin-left: 5px;
}
div.pEnlaces input#penalesLocal,
div.pEnlaces input#penalLocal {
    margin-right: 7px;
}
div.pEnlaces input#penalesVisita,
div.pEnlaces input#penalVisita {
    margin-left: 7px;
}
div.penaltis input#penales,
div.penaltis input#penal {
    font-size: 15px;
}
div.modal-body {
    background-color: #EEEEEE !important;
}
div.modal-header {
    border: 1px solid #999999 !important;
}
div.laJornada {
    text-align: center;
    font-size: 22px;
    margin-top: 40px;
    margin-bottom: 40px;
}
div.gamer {
    text-align: right;
    float: right;
    font-size: 22px;
    margin-top: 20px;
}
div.reglas {
    text-align: left;
    font-size: 18px;
}
div.configs {
    padding: 10px;
    text-align: left;
    font-size: 18px;
}
.newTag {
    margin-top: 12px;
    margin-bottom: 12px;
}
div.enlaces {
    margin-left: 20px;
    margin-top: 15px;
    margin-bottom: 30px;
    margin-right: 20px;
    text-align: left;
    float: left;
}
div.descripcion {
    text-align: left;
    float: left;
    border: 1px solid #000;
    width: 100%;
    padding-left: 20px;
    font-size: 17px;
    font-weight: bold;
    background-color: #cacaca;
    color: #000;
    border: 1px solid #797979;
}
div.titulosConfig {
    text-align: left;
    float: left;
    border: 1px solid #000;
    width: 100%;
    padding-left: 20px;
    font-size: 17px;
    font-weight: bold;
    background-color: #cacaca;
    color: #000;
    border: 1px solid #797979;
}
#validar, #codigo {
    text-transform: uppercase;
}
div.condicion {
    width: 90%;
    margin-left: 30px;
}
div.dataTables_length label, div.dataTables_filter label {
    color: #000 !important;
}