.border {
    border: 2px solid #ccc;
}

.subtitleSection{
	margin-top: 15px;
}

#competitionForm {
    padding-top: 10px;
    padding-left: 13px;
}

#submitButton {
	margin-top: 10px;
	margin-bottom: 10px;
}

.jugados-como {
    width: 160px;
}

.data {
	width: 60px
}


.table-responsive {
	margin-bottom: 15px;
}

.record {
	text-align: left !important;
}

.div-competiciones{
	margin-bottom: 30px;
}

  .graficos-partidos, .graficos-goles {
    flex: 1 1 45%; /* Los gráficos ocupan el 45% del ancho del contenedor, ajustándose en pantallas más pequeñas */
    max-width: 600px;
    margin: 10px;
  }

  canvas {
    width: 100% !important;
    height: auto !important;
  }
  
/* tabla de jugadores y entrenadores */
.estadistica{
	width: 70px;
}
.apodo {
	text-align: left;
}

.numero {
	width: 30px;
}


@media screen and (min-width: 1300px) {
	
	.grid-container {
	  display: grid;
	  grid-template-columns: 220px 15px auto;
	  margin-top: 15px;
	}
	
}

@media screen and (max-width: 1300px) {
		
	.apodoCabecera {
			width : 400px
		}
	
}

@media screen and (min-width: 950px) {

	.graficos {
	    display: flex;
	    flex-wrap: wrap;
	    justify-content: space-around;
	  }
	  
	  
}

.filter-container-server button {
	    margin-top: -4px;           /* Espacio entre el input y el botón */
}


.filter-container-server{
	margin-top: 15px;
}

#filterInputEntrenadores{
	margin-top: 15px;
}

.filter-container {
	    margin-bottom: 10px;
	}
	


@media screen and (min-width: 905px) {
	/* Filtro de las tablas con paginacion servidor */
	.filter-container-server {
	    display: flex;
	    justify-content: flex-end;  /* Alinea los elementos al final (derecha) */
	    align-items: center;        /* Alinea verticalmente el label, input y botón */
	    gap: 10px;                  /* Espacio entre los elementos */
		margin-bottom: 10px;
	}
	
	.filter-container {
	    display: flex;
	    justify-content: flex-end;
	    align-items: center; /* Alinea verticalmente el label y el input */
	    margin-bottom: 10px;
	}
	
	.filter-container label {
		margin-bottom: -10px;
	}

	.filter-container-server form {
	    display: flex;              /* Alinea los elementos dentro del form en fila */
	    align-items: center;
	    gap: 10px;                  /* Espacio entre los elementos */
	}

	.filter-container-server label {
	    margin: 0;                  /* Elimina el margen extra */
	}

	.filter-container-server input {
	    flex: 1;                    /* Hace que el input ocupe más espacio si es necesario */
	   
	}

	.filter-container-server button {
	    padding: 8px 15px;           /* Añade relleno al botón */
	    margin-left: 10px;           /* Espacio entre el input y el botón */
	}
	
}

@media screen and (max-width: 905px) {
	

	
	.filter-container-server button {
	    padding: 8px 15px;           /* Añade relleno al botón */
	    margin-bottom: 10px;
		margin-top: 10px;
	}
	
	#filterInput{
			margin-bottom: 5px;
		}
	
}