* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
	background-color: lightsteelblue;
}


body {
    font-family: Calibri;
    font-size: 16px;
    min-height: 100%;
}

a {
	color: white;
}
	a:hover {
		cursor: pointer;
	}

h1, h2, h3, h4, h5, h6 {
	font-weight: bolder;
	text-align: center;
	color: white;

}
label{
	color:white;
	font-size: .8rem;
}
iframe {
	display: flex;
	flex: wrap;
}
.inputFile{
	margin: 15px;
}

/**************************************************************************************************************************************TARJETAS*/
.cardEvento {
	width: 280px;
	margin: 20px;
	border-bottom-left-radius: 35px;
	align-items: center;
}
.cardEventoEdit {
	width: 280px;
	margin: 20px;
	border-bottom-left-radius: 35px;
	align-items: center;
}
.cardEventoNew {
	width: 280px;
	margin: 20px;
	border-bottom-left-radius: 35px;
	align-items: center;
}
.cardEjercicio {
	background-color: #140cac ;
	width: 280px;
	margin: 20px;
	border-bottom-left-radius: 35px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.cardCombate {
	background-color: #140cac ;
	width: 280px;
	margin: 20px;
	border-bottom-left-radius: 35px;
}
.cardCombate:hover{
	cursor: pointer;
}

.card img {
	height:300px;
}
/*******************************************************************************************************************************************MODALES*/
.modal-content{
	padding: 0 !important;
}
.modal-ejercicio {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
}
.modal-ejercicio select {
	width:50%;
}
.formulario-evento {
	display: grid;
	grid-template-columns: 1fr 1fr;
	background-color: silver;
}
.formulario-evento1 {
	margin:30px;
	border: black solid thin;
	padding: 10px;
	background-color: white;
}
.formulario-evento2 {
	display: flex;
	flex-direction: column;
	margin:30px;
	justify-content: space-around;
	align-items: center;
}
@media screen and (max-width: 799px) {
	body {
		font-size:10px;
	}
	.nvm {
		display:none;
	}
	.modal{
		width:395px !important;
		max-height: 800px !important;
		height: 800px !important;
		top:1% !important;
	}
	.card {
		width: 355px !important;
	}
	.card img {
		height:380px;
	}
}




/**ESQUEMA WEB **/
#container {
	height: 100%;
	width: 100%;
	grid-gap: 10px;
	margin: auto;
	display: grid;
    grid-template: 
        "cabecera cabecera"       60px
        "cuerpo   menu"           auto
        "pie      pie"            80px
        /
        1fr     250px
    ;
	background-color: lightsteelblue;
}




#cabecera {
    grid-area: cabecera;
	background: linear-gradient(to right, black,black,black,black,#7b7b7b);
	grid-template: 
        "logo_cabecera   espacio"       60px
        /
        60px             auto
}
	#logo_cabecera {
		grid-area:logo_cabecera;
	}

	#desplega_menu {
		display:none;
	}

	#imagenCabecera {
		height: 60px;
		width: 250px;
	}

#menu {
    grid-area: menu;
    background: linear-gradient(#7b7b7b,#7b7b7b,#7b7b7b,#7b7b7b,black );
	font-weight: bold;
	color: white;
	text-align: center;
	border: solid thin;
	border-color:black;
	border-radius: 15px;
	justify-content: center;
	}

	.titulo-menu{
		background-color:#5D5D5D; 
		margin:0px;
		width: 248px;
	    border-top-right-radius: 15px;
    	border-top-left-radius: 15px;
	}



#slide-out {
	display:none;
}

#cuerpo {
    grid-area: cuerpo;
    background-color: lightsteelblue;
    align-items: center;
	border-radius: 15px;
}

#pie {
    grid-area: pie;
    background: linear-gradient(to left, black,black,black,black,#7b7b7b);
	align-items: center;
}


#cabecera, #cuerpo, #menu, #pie {
    display: flex;
}



@media screen and (max-width: 799px) {
	#container {
		grid-template: 
			"cabecera"       60px
			"cuerpo"           auto
			"pie"            80px
			/
			400px
		;
	}

	#cabecera {
		grid-template: 
			"desplega_menu   espacio       logo_cabecera"       60px
			/
			60px             10px         80px
	}

		#desplega_menu {
			display:block;
			grid-area: desplega_menu;
		}
	
	#imagenCabecera {
		height: 60px;
		width: 150px;
	}

	#menu {
		display:none;
	}

	#slide-out {
		display:block;
		background: linear-gradient(#7b7b7b,#7b7b7b,#7b7b7b,#7b7b7b,black );
		font-weight: bold;
		color: white;
		text-align: center;
		border-style: solid;
		border-color:black;
		border-radius: 15px;
		justify-content: center;
	}

	.titulo-menu{
		width: 300px;
	    border-top-right-radius: 15px;
    	border-top-left-radius: 15px;
	}

	.divider {
		margin:0px !important;
	}

}




	/*Login*/


	#container-login{
		display: grid;
		grid-template: 
			"cabecera"       60px
			"cuerpo"         auto
			"pie"            80px
			/
			1fr
		;
	}

	#login {
		width: 400px;
		height: 100%;
		margin: auto;
		margin-top: 200px;
		
	}

		#espacio {
			grid-area: espacio;
		}

		#login-form{
			height: 100%;
			margin: 0 auto;
			grid-area: login-form;
			display: grid;
			grid-template: 
				"logo"         90px
				"titulo"       20px
				"usuario"      100px
				"pass"         100px
				"botonesLog"   auto
				/
				auto    
			;
			justify-content: center;
		}

		#register-form{
			height: auto;
			margin: 0 auto;
			padding: 10px;
			margin-top: 0px;
			grid-area: login-form;
			justify-content: center;
		}

			#logo {
				grid-area: logo;
				margin: 10px;
				text-align: center;
			}

			#titulo {
				grid-area: titulo;
			}

			#usuario {
				grid-area: usuario;
				margin: 10px;
			}

			#pass {
				grid-area: pass;
				margin: 10px;
			}

			#botonesLog {
				grid-area: botonesLog;
				margin:auto;
			}
		
	@media screen and (max-width: 799px) {
		#login {
			margin-top: 50px;
			
		}

		#container-login footer h6 {
			font-size: 16px;
		}
	}










	/*Homepage*/

	#index {
		height: 100%;
		width: 100%;
		display: grid;
		grid-template: 
			"licencia info"         1fr
			/
			1fr       3fr
		;
		justify-content: center;
	}

	.cajaIndex {
		border: solid thin;
		border-radius: 15px;
		background-color: #7b7b7b;
		margin: 6px;
	}
		.cajaIndex p {
			text-align:center;
		}

	.cinturon {
		width: 150px;
		border-radius: 5px;
	}

	#licencia {
		grid-area: licencia;
		background: linear-gradient(black,black, #7b7b7b);
		padding: 15px;


	}

	#info {
		height: 900px;
		grid-area: info;
		overflow-y: scroll;
	}

	#info::-webkit-scrollbar {
		width: 8px;     /* Tamaño del scroll en vertical */
		height: 8px;    /* Tamaño del scroll en horizontal */
		display: none;  /* Ocultar scroll */
	}
		
	/* Ponemos un color de fondo y redondeamos las esquinas del thumb */
	#info::-webkit-scrollbar-thumb {
		background: #ccc;
		border-radius: 4px;
	}
	/* Cambiamos el fondo y agregamos una sombra cuando esté en hover */
	#info::-webkit-scrollbar-thumb:hover {
		background: #b3b3b3;
		box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
	}
	/* Cambiamos el fondo cuando esté en active */
	#info::-webkit-scrollbar-thumb:active {
		background-color: #999999;
	}

	/*Homepage/info */
		#plazas {
			grid-area: plazas;
		}

		#control {
			grid-area: control;
			border-top-style: none;
			border-right-style: none;
			border-bottom-style: none;
			border-left-style: none;
			border-color: silver;
		}

		#recursos {
			width:100%;
			grid-area: recursos;
			border-top-style: none;
			border-right-style: none;
			border-bottom-style: none;
			border-left-style: none;
			border-color: silver;
			text-align: center;
			display: flex;
			flex-wrap: wrap;
		}

				#recursos g g rect {
					fill:#aaaaaa;				
				}
				#recursos text {
					fill:#ffffff;				
				}

		#division {
			grid-area: division;
			border-style: dotted;
			border-radius: 10px;
			border-color: silver;
			text-align: center;
		}


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

		/*Homepage*/

			#index {
				grid-template: 
					"licencia"                auto
					"info"                    auto
					/
					395px
				;
			}

				#info {
					grid-template: 
						"control"    auto
						"recursos"   auto
						/
						auto	
					;

				}
					/*Homepage/info */
					#plazas {
						border-style: none;
					}

					#control {
						border-style: none;
					}

					#recursos {
						border-style: none;
					}
	}









	/*Matenimiento federados*/

	#tabla-edicion-federado-movil{
		display: none;
	}

	#tabla-edicion-federado{
		border-radius: 10px;
		padding: 30px;
	}

		#tabla-edicion-federado  td{
			border: solid thin black;
		}





		/*Matenimiento federados/Edicion*/
		#botones {
			grid-area: botones;
			margin: 10px;
		}

		#carga_licencia {
			grid-area: carga_licencia;
			margin: 10px;
		}

		

	.texto-formulario {
		color:white;
		font-size: bolder;
	}

	.cajaTabla {
		border: solid thin;
		border-radius: 15px;
		background-color: #7b7b7b;
	}

		.cajaTabla::-webkit-scrollbar {
			width: 8px;     /* Tamaño del scroll en vertical */
			height: 8px;    /* Tamaño del scroll en horizontal */
			display: none;  /* Ocultar scroll */
		}
		
		/* Ponemos un color de fondo y redondeamos las esquinas del thumb */
		.cajaTabla::-webkit-scrollbar-thumb {
			background: #ccc;
			border-radius: 4px;
		}
		/* Cambiamos el fondo y agregamos una sombra cuando esté en hover */
		.cajaTabla::-webkit-scrollbar-thumb:hover {
			background: #b3b3b3;
			box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
		}
		/* Cambiamos el fondo cuando esté en active */
		.cajaTabla::-webkit-scrollbar-thumb:active {
			background-color: #999999;
		}

	.imgRedonda {
		width: 50%;
		border-radius: 50%;
		transition: 0.2s;
		opacity: 0.7;
	}
	
	.imgAvatar:hover {
		width: 80%;
		transition: 0.5s;
		opacity: 1;
	}
		


	@media screen and (max-width: 799px) {
		#tabla-edicion-federado-movil{
			display: block;
			border-radius: 10px;
			padding: 30px;
		}
			#tabla-edicion-federado-movil  td{
				border: solid thin black;
			}

		#tabla-edicion-federado{
			display: none;
		}
	}


















	/*Mi historial*/
	#mi_historial{
		height: 100%;
		display: grid;
		grid-template:
			"datos_pers         datos_pers    datos_pers"           100px
			"kups               licencias     asistencia"           760px
			/
			1fr				    1fr           1fr
	}

	#datos_pers{
		margin-top:10px;
		margin-left:15px;
		margin-right:15px;
		box-shadow: black 6px 2px 2px;
		border: solid thin;
		border-radius: 15px;
		background-color: #7b7b7b;
		grid-area: datos_pers;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-around;
	}

	#datos_pers_movil{
		display:none;
	}


		#kups{
			margin:15px;
			box-shadow: black 6px 2px 2px;
			grid-area: kups;
			overflow-y: scroll;
			background: linear-gradient(black, white);
		}

		#licencias{
			margin:15px;
			box-shadow: black 6px 2px 2px;
			grid-area: licencias;
			overflow-y: scroll;
			background: linear-gradient(black, white);
		}

		#asistencia{
			margin:15px;
			box-shadow: black 6px 2px 2px;
			grid-area: asistencia;
			overflow-y: scroll;
			background: linear-gradient(black, white);
		}

		#datos_pers{
			display:none;
		}

		#datos_pers_movil{
			margin-top:10px;
			margin-left:15px;
			margin-right:15px;
			box-shadow: black 6px 2px 2px;
			border: solid thin;
			border-radius: 15px;
			background-color: #7b7b7b;
			grid-area: datos_pers;
			display:flex;
			flex-wrap: wrap;
			justify-content: space-around;
			
		}

	@media screen and (max-width: 799px) {	
		/*Mi historial*/
		#mi_historial{
			height: 100%;
			display: grid;
			grid-gap: 6px;
			grid-template:
				"datos_pers"     auto
				"kups"           auto
				"licencias"      auto
				"asistencia"     auto
				/
				395px
		}
	
			#asistencia {
				max-height: 500px;
			}
	}
		
	









	/*Examen*/

	#fecha_imprimir {
		margin-top: 25px;
		margin-left:450px;
		margin-right:450px;
	}

		/*Examen/Confirmacion*/
		#formulario_confirma_grado {
			display: grid;
			grid-template:
				"carga_acta    fecha_examen     botones"         auto
				"tabla         tabla            tabla"           auto
				/
				800px				500px         auto
		}

			#carga_acta {
				grid-area: carga_acta;
			}

			#fecha_examen {
				grid-area: fecha_examen;
			}

			#tabla {
				grid-area: tabla;
			}


		@media screen and (max-width: 799px) {
		
			/*Examen/Confirmacion*/
			#formulario_confirma_grado {
				display: grid;
				grid-template:
					"carga_acta"      auto
					"fecha_examen"    auto
					"botones"         auto
					"tabla"           auto
					/
					395px
				;
				justify-content: center;
				text-align: center;
			}

			#fecha_imprimir {
				margin-left:50px;
				margin-right:50px;
			}
		}



	/*Clases*/
	.formulario_clase_nueva {
		height: 175px;
		background-color: #5D5D5D;
		border: black solid thin;
		border-radius: 15px;
		display: grid;
		grid-template:
				"clase               imagenClase           activa"                50px
				"botones_clase       botones_clase         botones_clase"         50px

				/
				3fr		             2fr                   1fr
		;
		margin:50px;
		padding: 15px;

	}

	.formulario_clase_editar {
		height: 175px;
		background-color: #5D5D5D;
		border: black solid thin;
		border-radius: 15px;
		display: grid;
		grid-template:
				"clase               imagenClase           activa"                50px
				"botones_clase       botones_clase         botones_clase"         50px
				/
				3fr		             2fr                   1fr
		;
		margin:50px;
		padding: 15px;

	}

		.imagenClase {
			grid-area: imagenClase;
			margin:15px;
		}

		.activa {
			grid-area: activa;
			margin:15px;
			justify-content: center;
			text-align: center;
		}

		.botones_clase{
			grid-area: botones_clase;
			justify-content: center;
			text-align: center;
			margin: 15px;
		}

	@media screen and (max-width: 799px) {
		.formulario_clase_nueva {
			height: 375px;
			grid-template:
					"clase"                 80px
					"imagenClase"           80px
					"activa"                80px
					"botones_clase"         80px
	
					/
					1fr
			;
			margin:20px;
	
		}
	
		.formulario_clase_editar {
			height: 375px;
			grid-template:
					"clase"                 80px
					"imagenClase"           80px
					"activa"                80px
					"botones_clase"         80px
	
					/
					1fr
			;
			margin:20px;	
		}

		.botones_clase{
			display: flex;
			flex-wrap: nowrap;
			margin: 0px;
		}

		.botones_clase .botonStd{
			margin:5px;
			width: 100px;
		}
	}
		
	
	









	/*Pasar lista*/
	#pasaLista {
		height:100%;
		border-style: solid;
		border-radius: 15px;
		background-color: #7b7b7b;
		text-align: center;
		display:grid;
		grid-template:
			"tit-pasaLista"  auto
			"menuClase"         auto
			/
			1fr
		;
	}

		#tit-pasaLista {
			grid-area: tit-pasaLista;
		}

		.menuClase{
			margin:30px;
			display:grid;
			grid-template-columns: 1fr 1fr 1fr;
			text-align: center;
			align-items: center;
		}
		.form-listas-clase {
			margin-right:100px; 
			border-bottom:solid; 
			border-color:silver;
		}


	@media screen and (max-width: 799px) {	
		/*Pasar lista*/
			.menuClase{
				margin:0px;
				display:block
			}
			.form-listas-clase {
				border-bottom:solid; 
				border-color:silver;
				width:394px;
			}
	}

	










	/*Eventos*/
	.listaEvento {
		border-radius:25px;
	}











	/*Resultados*/
	#resultados {
		height:100%;
		width:100%;
		border-style: solid;
		border-radius: 15px;
		background-color: #7b7b7b;
		display: grid;
		grid-template:
			"tit-resultados"  auto
			"eventos"         auto
			/
			1fr
		;
	}

		#tit-resultados {
			grid-area:tit-resultados;
		}

		#eventos {
			grid-area:eventos;
			text-align: center;
			display: grid;	
			grid-template-columns: 1fr 1fr;
		}
	
		.evento {
			width:80%;
			border-style: solid;
			border-radius: 15px;
			background-color: #DBE0E1;
			text-align: center;
			margin:20px;
		}

		.nombre-evento-desplega {
			background-color:gray;
		}

			.nombre-evento-desplega:hover{
				cursor: pointer;
			}

		.nombre-resultado-desplega {
			width:100%;
			background-color:silver;
			height: 25px;
		}

			.nombre-resultado-desplega:hover{
				cursor: pointer;
			}

			.nombre-resultado-desplega > h6 {
				text-align:left; 
				margin:20px; 
				color:black;
			}


		.participantes-oculto {
			display: none;
		}

		.opciones-resultado-oculto {
			display:none;
		}

		.opciones-resultado-1 {
			display:grid;
			grid-template-columns:1fr 1fr 1fr;
		}

			.opciones-resultado-1 > div {
				margin: auto;
			}

		.opciones-resultado-2 {
			display:grid;
			grid-template-columns:1fr 1fr;
		}

			.opciones-resultado-2 > div {
				margin: auto;
			}









/*Tablas*/
.tablear {
	margin: auto;
	margin-bottom: 1em;
	border: thin solid #777;
}
.tablear thead tr {
	background-color: #433bfa;
	color: white;
}
.tablear thead tr th {
	padding-left: 1em;
	padding-right: 1em;
	text-align: center;
	
}
.tablear tbody tr:nth-child(even) {
	background-color: #DDD;
}
.tablear tbody tr:nth-child(odd) {
	background-color: #EEE;
}
.tablear tbody tr td {
	padding-left: 1em;
	padding-right: 1em;
}
.tablear thead tr td.acciones {
	text-align: center;	
}











/*Formularios*/
.linea-form {
	display: flex;
  	flex-wrap: nowrap;
	justify-content: space-around;

}

.botonStd {
	background-color: #433bfa ;
	color: white;
	font-weight: bold;
	font-size: 1rem;
	border: solid thin;
	border-color: black;
	border-radius: 40px ;
	height: 60px ;
	width: 120px;
	justify-content: center;
	align-items: center;
	text-align: center;
	margin: 20px 20px 20px 20px;
}

	.botonStd:hover{
		background-color: #8A85FE;
		cursor: pointer;
	}

.botonLrg {
	background-color: #433bfa ;
	color: white;
	font-weight: bold;
	font-size: 1.5rem;
	border: solid thin;
	border-color: black;
	border-radius: 40px ;
	height: 60px ;
	width: 180px;
	justify-content: center;
	text-align: center;
	margin: 20px 20px 20px 20px;
}

	.botonLrg:hover{
		background-color: #8A85FE;
		cursor: pointer;
	}


.botonIcon{
	background-color: #433bfa ;
	color: white;
	font-weight: bold;
	border: solid thin;
	border-color: black;
	border-radius: 20px ;
	height: 40px ;
	width: 40px;
}
	.boton:hover{
		background-color: #8A85FE;
		cursor: pointer;
	}


	.red:hover{
		background-color: #F5736A !important;
	}
	.botonModal{
		background-color:transparent;
		font-family:Calibri;
		border:none;
		font-size: 14px;
		margin:6px 20px;
		padding:0 16px;
		height:36px;
	}
	.botonModal:hover{
		cursor: pointer;
		background-color: silver;
	}





/*Iconos*/

.icono {
	height: 40px;
	width:40px;
}




















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

	/*Mis datos*/
	#edicion_mis_datos {
		display: block;
	}


	/*Resultados*/
	#eventos {	
		grid-template-columns: 1fr;
	}

	


}