html {
    height: 100%;
    font-family: Caladea;
}

body {
    margin: 0;
    height: 99.8%;
}

@font-face {
    font-family: Caladea;
    src: url("./Fonts/Caladea-Regular.ttf");
}

@font-face {
    font-family: Calligraffitti;
    src: url("./Fonts/Calligraffitti-Regular.ttf");
}


.header{
    height:20%;
}

.HeaderPanel {
    border: solid #CCC7A9;
    background-image: radial-gradient(white, #CCC7A9);
    border-radius: 1vh;
    width: 99.8%;
    vertical-align: top;
    box-sizing: border-box;
    margin: 0.1%;
    font-size: 0;
    height:20%;
}

.PanelLogo {
    display: inline-block;
    padding-bottom: 0;
    margin-bottom: 0;
    font-size: 0;
    box-sizing: border-box;
    height:100%;
    width:10%;
    overflow-x:hidden;
}


.TextoTitulo {
    display: flex;
    align-items: center;
    font-size: 3vw;
    justify-content: center;
    width: 100%;
    font-family: Caladea;
    font-weight: bold;
    height: 100%;
}

.TextoTituloContainer {
    display: inline-block;
    vertical-align: top;
    width: 90%;
    height: 100%;
}

.ImagenLogo {
    width: 10vw;
    padding: 0;
    margin: 0;
    vertical-align: top;
    display: block;
    height:100%;
}

.CenterPanel{
    flex-direction:row;
    display:flex;
    width:100vw;
}

.MenuIzq {
    padding: 1vh 1vh 0 1vh;
    vertical-align: top;
    display: inline-block;
    box-sizing: border-box;
    width: 15%;
    font-family: Caladea;
}

.MenuGrupo {
    position: relative;
    border: solid #CCC7A9;
    border-radius: 1vh;
    text-align: center;
    font-size: 1.5vw;
    padding: 1vh 1vh 0vh 1vh;
}

.Submenu {
    display: none;
    flex-direction: column;
   
}

.MenuTorneos {
    padding-bottom: 1vh;
}

.Torneo {
    font-size: 1.3vw !important;
}

.MenuGrupo:hover .Submenu {
    display: flex;
}

.ElemMenuIzq {
    border: solid #CCC7A9;
    text-align: center;
    padding: 1vh 1vh 1vh 1vh;
    margin-bottom: 1vh;
    border-radius: 1vh;
    width: 100%;
    display: inline-block;
    box-sizing: border-box;
    font-size: 1.5vw;
    color: black;
    text-decoration: none;
}

.ElemMenuIzq:hover {
    background-color: #D8D3BE;
}

.PanelDerecha {
    display: inline-block;
    border-radius: 1vh;
    box-sizing: border-box;
    width: 85%;
    height: 70vh;
    border: solid #CCC7A9;
    padding-top:1vh;
}

@media (max-width: 768px) {
    .CenterPanel {
        flex-direction: column;
    }

    .MenuIzq {
        width: 100%;
        height: auto;
        text-align: center;
    }

    .PanelDerecha {
        width: 100%;
        height: 100%;
    }
}

.BottomPanel {
    text-align: center;
    padding-top: 3vh;
}

.BottomText {
    font-size: 1.4vw;
  

}

.ContenedorCarga{
    text-align:center;
}

.TextoCarga {
    font-size: 1.3vw;
    padding-top:20vh;
}

.ContenedorImgCarga {
    height: 25vh;
    overflow: hidden;
}

.ContenedorImgCarga img {
    height: 50vh;
    margin-top: -14vh;
}

.ContenedorSitioConstruccion {
    height: 60vh;
    overflow: hidden;
}

.ContenedorSitioConstruccion img {
    height: 50vh;
    margin-top: 5vh;
}

.GifCarga {
    
}

.ContenedorTabla {
    text-align:center;
    padding-top:1vh;
    max-height: 65vh;
    overflow-y:auto;
}

.TablaJugadores {
    width: 98%;
    border: solid #CCC7A9 3px;
    margin: auto;
}

.EncabezadoTablaJugadores {
    background-color: #CCC7A9;
    border: solid #CCC7A9 3px;
}

.CeldaEncabezadoTJ {
    font-size: 2vh;
}

.FilaTablaJugadores {
    border: solid #CCC7A9 3px;

}

.FilaTablaJugadores:hover {
    background-color: #D8D3BE;
    cursor: pointer;
}

.CeldaTablaJugadores {
    text-align: center;
    font-size: 2.5vh;
    padding: 0.5vh;
}

.CeldaDetallePartida {
    font-size: 2vh;
    max-width: 20vw;
}

.IconoEspectar {
    max-height: 2vh;
    cursor: pointer;
}

.ImagenIconoEspectar {
    height: 2.5vh;
    
}