/*FUENTES PERSONALIZADAS*/

@font-face {
    font-family: 'merckregular';
    src: url('fonts/merck-webfont.woff2') format('woff2'),
         url('fonts/merck-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

/*FIN FUENTES PERSONALIZADAS*/
/* amarillo rgb(255,200,50) */
/* morado rgb(80,50,145) */
:root{
    --amarillo: #ffc832;
    --amarillo-disabled: #ffe49b;
    --amarillo-fade: #ffc832d5;
    --morado: #503291;
    --morado-disabled: #746596;
    --morado-busqueda: #503291c5;
    --rosa: #eb3c96;
}


body, html{
    margin: 0;
    width: 100%;
    height: 100%;
	top:0;
	left:0;
}

.body-howto{
	background: var(--amarillo);
}


.hidden{
    display: none;
}

.login-container{display:none}
.bigScreen-container{
	width:100% ;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 10%;
	background:url('/media/app/bg_desktop_bottom.png') bottom center no-repeat, url('/media/app/bg_desktop_top.png') top center no-repeat, var(--amarillo);
	background-size: 100% auto, 100% auto;
}
.bigScreen-text-container{
	text-align: center;
	width: 50%;
	font-size: 1.5vw;
	font-weight: 400;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	color: var(--rosa);
}

@media (max-width: 980px){
	.bigScreen-container{display:none}
	.offcanvas{
		background-color: var(--morado) !important;
		width: 100% !important;
		& .offcanvas-header{
			height: 10% !important;
			display: flex;
			justify-content: end;
			& button {
				height: 100%;
				& img{
					height: 50%;
				}
			}
		}
	}
	.voted{
		height: 90%;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		& div{
			width: 100%;
			font-family: Verdana, Geneva, Tahoma, sans-serif;
			font-size: 10vw;
			font-weight: bold;
			text-align: center;
			color: var(--amarillo);
		}
	}
	.off-menu{
		width: 100%;
		height: 70%;
		display: flex;
		flex-direction: column;
		margin: 5% 0 5% 0;
		padding-left: 5vw;
		padding-right: 5vw;
		gap: 7vw;
		z-index: 99999999;
		& .btn-offca{
			width: 100%;
			height: 10%;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			text-decoration: none;
			gap: 5vw;
			& img{
				height: 100%;

			}

			& span{
				width: 60%;
				text-align: center;
				font-family: Verdana, Geneva, Tahoma, sans-serif;
				font-weight: bold;
				font-size: 5vw;
				text-decoration: none;
				color: var(--amarillo);
			}
		}
		& .btn-offca-disabled{
			width: 100%;
			height: 10%;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			text-decoration: none;
			gap: 5vw;
			& img{
				height: 100%;

			}

			& span{
				width: 60%;
				text-align: center;
				font-family: Verdana, Geneva, Tahoma, sans-serif;
				font-weight: bold;
				font-size: 5vw;
				text-decoration: none;
				color: var(--amarillo-disabled);
			}
		}
	}
	.off-disconnect{
		width: 100%;
		height: 10%;
		display: flex;
		justify-content: end;
		align-items: center;
		padding-right: 10px;
	}
	.redBut{
		width: 30%;
		color: var(--amarillo);
		background-color: rgba(0, 0, 0, 0);
		border: 0;
		border-radius: 10px;

	}
	.btn-close{
		color: var(--amarillo);
	}
	.test-container{
		padding: 5vh 5vw;
		width: 100%;
		height: 90%;
		display: flex;
		flex-direction: column;
		position: relative;
	}
	.test-failure{
		position: absolute;
		padding: 10vw;
		font-family: Verdana, Geneva, Tahoma, sans-serif;
		top: 60%;
		font-size: 6vw;
		font-weight: bold;
		background-color: var(--rosa);
		color: var(--amarillo);
		align-self: center;
		justify-self: center;
		border-radius: 10px;
	}
	.test-title{
		width: 100%;
		display: flex;
		text-align: center;
		justify-content: center;
		& h1{
			font-family: 'merckregular';
		font-size: 6vw;
		font-weight: bold;
		color: var(--morado);
		}
	}
	.test-about{
		width: 100%;
		display: flex;
		text-align: center;
		justify-content: center;
		font-family: Verdana, Geneva, Tahoma, sans-serif;
		font-size: 3vw;
		font-weight: 400;
		color: var(--morado);
	}
	.question-container{
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		& .question-counter{
			width: 100%;
			display: flex;
			text-align: center;
			align-items: center;
			font-family: 'merckregular';
			font-size: 2vh;
			font-weight: 400;
			color: var(--rosa);
		}
		& .question-statement{
			width: 100%;
			display: flex;
			text-align: center;
			margin-top:20px;
			margin-bottom:20px;
			justify-content: center;
			align-items: center;
			font-family: 'Verdana';
			font-size: 2vh;
			font-weight: 400;
			color: var(--rosa);
		}
		& .question-answers{
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;
		}

	}
	.answer{
		width: 90%;
		background-color: var(--morado);
		padding:15px;
		border-radius: 10px;
		font-family: 'Verdana';
		font-size: 2vh;
		font-weight: 400;
		color: var(--amarillo);
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
		margin-bottom:20px;
	}

	.aviso-container{
		width: 100%;
		height: 90%;
		padding:5vw;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		& .oscurecedor{
			width: 100%;
			height: 100%;
			position:absolute;
			top: 0;
			left: 0;
			background-color: rgba(0, 0, 0, 0.3);
			z-index: 1;
		}
	}

	.aviso{
		width: 80%;
		padding: 5vw;
		background-color: #ffc832;
		display: flex;
		flex-direction: column;
		border: 0;
		border-radius: 10px;
		z-index: 99999;
		position: relative;
		& .confirmar-container{
			display: flex;
			padding: 2vw;
			gap: 2vw;
			font-family: Verdana, Geneva, Tahoma, sans-serif;
			font-size: 4vw;
			color: var(--rosa);

		}
		& p{
			font-family: Verdana, Geneva, Tahoma, sans-serif;
			font-size: 4vw;
			color: var(--morado);
		}
		& button{
			background-color: var(--rosa);
			font-family: Verdana, Geneva, Tahoma, sans-serif;
			font-size: 5vw;
			font-weight: bold;
			border: 0;
			border-radius: 10px;
			color: var(--amarillo);
		}
	}

	.small-button{
		font-family: Verdana, Geneva, Tahoma, sans-serif;
		font-weight: bold;
		font-size: 8vw;
		background-color: var(--morado);
		color: var(--amarillo);
		border: 0;
		border-radius: 10px;
		width: 100%;
	}

	.grabar-button{
		font-family: Verdana, Geneva, Tahoma, sans-serif;
		font-weight: bold;
		font-size: 5vw;
		background-color: var(--morado);
		color: var(--amarillo);
		border: 0;
		border-radius: 10px;
		width: 100%;
		padding: 2vw 5vw;
		text-decoration: none;
	}

	.input-acceso{
		padding-left:15px;
		font-family: Verdana, Geneva, Tahoma, sans-serif;
		font-weight: bold;
		font-size: 4vw;
		background-color: var(--amarillo);
		color: var(--morado);
		border: 2px solid var(--morado);
		border-radius: 10px;
		width: 100%;
		height: 12.5vw;
		&:disabled{
			color: var(--morado-disabled);
			border-color: var(--morado-disabled);
		}
	}

	.texto-basico{
		font-family: Verdana, Geneva, Tahoma, sans-serif;
		font-weight: 400;
		font-size: 4vw;
		color: var(--morado);
		text-align: center;
	}

	.new-password-container{
		width: 100%;
		height: 100%;
		padding: 10%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		& div label{
			font-family: Verdana, Geneva, Tahoma, sans-serif;
			font-size: 5vw;
			color: var(--rosa);

		}
	}

	.login-container{
		width: 100%;
		height: 100%;
		padding: 10%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		position: relative;
	}

	.pop{
		position:absolute;
		top: 50%;
		width: 80vw;
		font-family: Verdana, Geneva, Tahoma, sans-serif;
		font-size: 5vw;
		color: var(--amarillo);
		background-color: var(--morado);
		text-align: center;
		padding: 5vw;
		border-radius: 10px;
	}

	.awards-header{
		width: 100%;
		height: 10%; 
		display: flex;
		padding: 5vw;
		& h1{
			width: 100%;
			font-weight: bold;
			font-family: Verdana, Geneva, Tahoma, sans-serif;
			font-size: 5vw;
			color: var(--amarillo);
			align-self: center;
			text-align: center;
		}
	}
	.awards-container{
		height: 65%;
		width: 100%;
		overflow: hidden;
	}
	.my-slider{
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	.slide{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		padding: 0 10vw;
	}
	.tns-item{
		height: 100%;
	}
	.tns-slider{
		height: 100%;
	}
	.tns-outer{
		height: 100%;
	}
	.tns-ovh{
		height: 100%;
	}
	.tns-inner{
		height: 100%;
	}
	.tns-controls button {
		background: none;
		border: none;
		font-size: 2em;
		cursor: pointer;
	  }
	  .tns-controls button:focus {
		outline: none;
	  }
	  .tns-controls button[disabled] {
		opacity: 0.5;
		cursor: not-allowed;
	  }
	  .custom-controls {
		position: absolute;
		top: 50%;
		width: 100%;
		display: flex;
		justify-content: space-between;
		transform: translateY(-50%);
	  }
	  .custom-control {
		background: none;
		border: none;
		font-size: 2em;
		cursor: pointer;
		border-radius: 50%;
		padding: 10px;
	  }
	  .custom-control:focus {
		outline: none;
	  }
	.contenido-slide{
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
		padding: 5vw;
		background-color: var(--amarillo);
		border-radius: 10px;
	}
	.poster-country{
		height: 8%;
		text-align: center;
		font-family: Verdana, Geneva, Tahoma, sans-serif;
		font-weight: bold;
		color: var(--morado);
	}
	.poster{
		height: 75%;
		display: flex;
		justify-content: center;
		align-items: center;
		& img{
			height: 100%;
		}
	}
	.poster-title{
		height: 15%;
		text-align: center;
		font-family: Verdana, Geneva, Tahoma, sans-serif;
		font-weight: 400;
		display: flex;
		justify-content: center;
		align-items: center;
		color: var(--morado);
		font-size:14px;
		line-height:14px;
	}

	.awards-foot{
		width: 100%;
		height: 20%;
		display: flex;
		flex-direction: column;
		gap: 10%;
		padding: 5vw;
		& div{
			height: 20%;
			width: 100%;
			display: flex;
			gap: 5%;
			align-items: center;
			flex-direction: row;
			color: var(--rosa);
			font-family: Verdana, Geneva, Tahoma, sans-serif;
			font-size: 3.5vw;
			font-weight: bold;
			
		}
		& button{
			height: 40px;
			width: 100%;
			background-color: var(--rosa);
			color: var(--amarillo);
			font-family: Verdana, Geneva, Tahoma, sans-serif;
			font-size: 4vw;
			font-weight: bold;
			border-radius: 10px;
			border: 0;
		}
	}
	.my-slider{
		width: 100%;
		height: 100%;
		& .slider-item{
			width: 80%;
			height: 100%;
		}
	}
	.competition-header{
		height: 10%;
		width: 100%;
		font-family: Verdana, Geneva, Tahoma, sans-serif;
		color: var(--rosa);
		font-size: 7vw;
		font-weight: bold;
		text-align: center;
		padding: 5vw 10vw 5vw 10vw;
		& span{
			font-family: 'merckregular';
			font-weight: 400;
		}
	}
	.competition-container{
		width: 100%;
		margin-top: 10%;
		padding: 5vw 5vw 50vh 5vw;
		display: grid;
		grid-template-columns: minmax(120px, 1fr) minmax(120px, 1fr);
		gap: 3%;
	}
	.btn-competition{
		background-color: var(--amarillo);
		border: 0;
		border-radius: 10px;
		display: flex;
		flex-direction: column;
		align-items: center;
		aspect-ratio: 1/1;
		text-decoration: none;
		&:disabled{
			background-color: var(--amarillo-disabled);
			& div{
				opacity: 0.5;
			}
			& span{
				color: var(--morado-disabled);
			}
		}
		& div{
			height: 80%;
			width: 90%;
			padding: 3vw 3vw 10px 3vw;
			display: flex;
			justify-content: center;
			align-items: center;
			& img{
				width: 100%;
			}

		}
		& span{
			height: 15%;
			font-family: 'merckregular';
			font-size: 2.8vw;
			color: var(--morado);

		}
	}

	.competition-info{
		width: 100%;
		height: 20%;
		font-family: Verdana, Geneva, Tahoma, sans-serif;
		color: var(--rosa);
		font-size: 3vw;
		font-weight: 400;
		overflow-y: scroll;
		padding: 5vw 5vw 10vw 5vw;
	}

	.ranking-container{
		width: 100%;
		height: 90%;
		overflow-y: scroll;
	}

	.ranking-list{
		width: 100%;
		height: 100%;
		padding: 5vw;
		list-style: none;
	}
	.ranking-element{
		width: 100%;
		height: 10%;
		display: flex;
		flex-direction: row;
		align-items: center;
		position: relative;
		& .ranking-element-image{
			height: 100%;
			border-radius: 50%;
			z-index: 5;
		}
		& .ranking-element-container{
			background-color: var(--rosa);
			font-family: Verdana, Geneva, Tahoma, sans-serif;
			font-size: 3.5vw;
			font-weight: bold;
			color: var(--amarillo);
			width: 80%;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			padding:3vw 3vw 3vw 5vw;
			border-radius: 10px;
			position: absolute;
			left: 14vw;



		}
	}

	.team-ranking-header{
		padding: 1vw;
		width: 100%;
		height: 20%;
		color: var(--amarillo);
		font-family: 'merckregular';
		font-size: 5vw;
		font-weight: 400;
		text-align: center;
	}

	.team-ranking-container {
		padding: 5vh 5vw;
		border-radius: 10px;
		width: 100%;
		height: 80%;
		overflow-y: scroll;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.team-ranking-list {
		width: 60%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		list-style: none;
		padding: 0;
		margin: 0;
	}
	.team-ranking-element {
		width: 100%;
		display: flex;
		align-items: center;
		padding: 1.5vw;
		position: relative;
	}
	.team-ranking-element-image {
		width: 20%;
		border-radius: 50%;
		margin-right: 15px;
		position: absolute;
		left: -15px;
	}
	.team-ranking-element-container {
		background-color: var(--rosa);
		font-family: Verdana, Geneva, Tahoma, sans-serif;
		font-size: 35px;
		font-weight: bold;
		color: var(--amarillo);
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding:2vw 3vw 2vw 10vw;
		border-radius: 10px;

	}














	.profile-change-button{
		width: 100%;
		height: 10%;
		padding: 0 10vw;
		& button{
			width: 100%;
			height: 60%;
			color: var(--amarillo);
			background-color: var(--rosa);
			font-family: Verdana, Geneva, Tahoma, sans-serif;
			font-size: 4vw;
			font-weight: bold;
			border: 0;
			border-radius: 10px;
		}
	}

	.profile-change-container{
		width: 100%;
		height: 90%;
		padding: 0 5vw;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.profile-change-button-container{
		height: 20%;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		& button{
			width: 60%;
			font-weight: bold;
			font-family: Verdana, Geneva, Tahoma, sans-serif;
			font-size: 4vh;
			color: var(--amarillo);
			background-color: var(--rosa);
			border: 0;
			border-radius: 10px;
		}
	}

	.profile-change-form-container{
		height: 80%;
		width: 100%;
		& form{
			height: 100%;
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			gap: 3vh;
		}
	}

	.profile-container{
		width: 100%;
		height: 80%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 10%;
		& .profile-photo{
			display: flex;
			justify-content: center;
			height: 40%;
			padding: 5%;
			position: relative;
			& .welcome-profile{
				height: 100%;
				aspect-ratio: 1/1;
				border-radius: 50%;
			}
			& .lapiz{
				width: 15%;
				position: absolute;
				top: 0;
				right: -20px;
			}
		}
		& .profile-data{
			height: 60%;
			display: flex;
			flex-direction: column;
			& div{
				height: 40%;
				display: flex;
				flex-direction: column;
				margin-top: auto;
				margin-bottom: auto;
				align-items: center;
				& .name{
					text-align: center;
					font-family: Verdana, Geneva, Tahoma, sans-serif;
					font-weight: bold;
					font-size: 7vw;
					color: var(--morado);
				}
				& .position{
					text-align: center;
					font-family: Verdana, Geneva, Tahoma, sans-serif;
					font-weight: 400;
					font-size: 6vw;
					color: var(--morado);
				}
			}
			& span{
				text-align: center;
				height: 10%;
				margin-bottom: 10%;
				font-family: Verdana, Geneva, Tahoma, sans-serif;
					font-weight: bold;
					font-size: 4vw;
					color: var(--morado);
			}
		}
	}

	.dinner-container{
		height: 90%;
		width: 100%;

	}

	.info-header{

		width: 100%;
		height: 10%;
		display: flex;
		place-content: center;
		flex-direction: column;

		& h1{
			color: var(--amarillo);
			font-family: Verdana, Geneva, Tahoma, sans-serif;
			font-weight: bold;
			font-size: 6vw;
			text-align: center;
		}
		& h2{
			color: var(--rosa);
			font-family: Verdana, Geneva, Tahoma, sans-serif;
			font-weight: bold;
			font-size: 5vw;
			text-align: center;
		}
	}
	.info-img-container{
		width: 100%;
		height: 40%;
		position: relative;
		& #open-info{
			top: 20px;
			left: 20px;
			position: absolute;
			width: 10vw;
			height: 10vw;
			aspect-ratio: 1/1;
			border-radius: 50%;
			background-color: var(--amarillo);
			border: 0;
			z-index: 50;
		}
		& #open-info-plus{
			top: 20px;
			right: 20px;
			position: absolute;
			width: 10vw;
			height: 10vw;
			aspect-ratio: 1/1;
			border-radius: 50%;
			background-color: var(--rosa);
			color:var(--morado);
			border: 0;
			z-index: 50;
		}
		& .info-modal{
			position:absolute;
			background-color: var(--amarillo-fade);
			color: var(--morado);
			font-family: Verdana, Geneva, Tahoma, sans-serif;
			font-size: 3vw;
			font-weight: 400;
			top: 40px;
			left:40px;
			width: 80%;
			padding:5%;
			border-radius: 10px;
		}
		& img{
			object-fit: cover;
			height: 100%;
			width: 100%;
			overflow: hidden;
			
		}
	}
	.info-location{
		width: 100%;
		height: 10%;
		background-color: var(--amarillo);
		display: flex;
		align-items: center;
		justify-content: center;
		padding-left: 20vw;
		padding-right: 20vw;
		gap: 20px;
		& a {
			width: 20%;
			& .info-img{
			width: 100%;
			}
		}
		& span{
			width: 80%;
			color: var(--morado);
			font-family: Verdana, Geneva, Tahoma, sans-serif;
			font-weight: bold;
			font-size: 3vw;
		}
	}

	.info-moreinfo{
		width: 100%;
		/*height: 40%;*/
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 5vw;
		
		& div{
			width: 100%;
			height: 50%;
			display: flex;
			flex-direction: row;
			align-items: center;
			gap: 10px;
			& img{
				width: 10%;
			}
			& div{
				width: 80%;
				height: 100%;
				display: flex;
				flex-direction: column;
				align-items: end;
				justify-content: center;
				& span{
					vertical-align: middle;
					width: 100%;
					font-family: Verdana, Geneva, Tahoma, sans-serif;
					font-weight: bold;
					color: var(--rosa);
					font-size: 3.5vw;
					& span{
						color: var(--amarillo);
					}
				}
			}
		}
	}

	.member-container{
		width: 100%;
		height: 90%;
	}

	.team-img{
		width: 100%;
		height: 25%;
		padding-left: 20vw;
		padding-right: 20vw;
		padding-top: 0vw;
		text-align:center;
		& img {
			height: 100%;
			aspect-ratio: 1/1;
		}
	}

	.members{
		width: 100%;
		height: 75%;
		padding-bottom:30px;
		overflow-y: scroll;
		display: flex;
		flex-direction: column;


		& span{
			font-family: Verdana, Geneva, Tahoma, sans-serif;
			font-size: 4vw;
			font-weight: bold;
			text-align: center;
			color: var(--amarillo);
		}
	}
	.photo-select-container{
		place-content: center;
		width: 80%;
		margin-top: 25%;
		margin-bottom: 25%;
		height: 50%;
		border-radius: 10px;
		background-color: var(--rosa);
	}
	.photo-select-title{
		color: var(--morado);
		font-family: Verdana, Geneva, Tahoma, sans-serif;
		font-size: 5vw;
		font-weight: bold;
	}

	.index-container{
		width: 100%;
		height: 100%;
		padding: 5vw;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		gap: min(10px);
	}

	.agenda-container{
		height: 90%;
		width: 100%;
		& div:last-child{
			border:0;
		}
	}
	.event-details{
		width: 100%;
		height: 20%;
		display: grid;
		align-items: end;
		padding-left: 7vw;
		padding-right: 7vw;  padding-bottom: 4vw;
		grid-template-columns: 1fr 1fr;
		box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2);
		gap: 3%;
		& div {
			
			& img{
			width: 100%;
		}}
	}
	.agenda{
		width: 100%;
		height: 80%;
		padding: 5vw;
		overflow-y: scroll;
		display: flex;
		flex-direction: column;
		

	}
	.agenda-item {
		padding: 2vw 5vw;
		width: 100%;
		height: auto;
		padding-left: 10px;
		padding-right: 10px;
		background-color: #f5f5f500;
		border-bottom: 1px solid var(--rosa);
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 5%;
		& .event{
			width: 65%;
			font-size: 2.75vw;
			color: var(--morado);
			font-family: Verdana, Geneva, Tahoma, sans-serif;
			font-weight: bold;
		}
	}

	.noborderbottom{border-bottom: none!important}

	.time {
		width: 31%;
		font-family: Verdana, Geneva, Tahoma, sans-serif;
		font-size: 3vw;
		font-weight: bold;
		color: var(--rosa);
		display: flex;
		align-items: center;
	}
	.break{
		width: 65%;
		font-size: 3vw;
		line-height: 0.5;
		color: var(--rosa);
		font-family: Verdana, Geneva, Tahoma, sans-serif;
		font-weight: bold;
	}

	.event-group{
		width: 65%;


		& .event {
			font-size: 2.75vw;
			color: var(--morado);
			font-family: Verdana, Geneva, Tahoma, sans-serif;
			font-weight: bold;
			/* text-align: center;
			color: var(--morado);
			font-family: Verdana, Geneva, Tahoma, sans-serif;
			vertical-align: text-bottom;
			font-size: 2.5vw;
			font-weight: bold;
			line-height: 0.5; */
		}
		& .speakers {
			font-size: 2.5vw;
			color: var(--morado);
			font-family: Verdana, Geneva, Tahoma, sans-serif;
			font-weight: 400;
			/* line-height: 1;
			text-align: center;
			color: var(--morado);
			font-family: Verdana, Geneva, Tahoma, sans-serif;
			vertical-align: text-top;
			line-height: 0.5;
			font-size: 2vw;
			font-weight: 400; */
		}
	}
	.event-container{
		padding: 0;
		margin-bottom: 3%;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: 1fr 2fr;
		border-radius: 10px;
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
		& .event-header{
			text-align: left;
			background-color: var(--rosa);
			padding: 2vw 5vw;
			border-radius: 10px;
			font-family: Verdana, Geneva, Tahoma, sans-serif;
			font-size: 3vw;
			font-weight: bold;
			vertical-align:baseline;
			color: var(--amarillo);
		}
		& div:last-child{
			border: 0;
		}
	}



	.search-container{
		background-color: var(--morado-busqueda);
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: 999;
		display: grid;
		grid-template-rows:  33% 33% 33%;
		grid-template-columns: 100%;
		justify-content: center;
		& button{
			justify-self: end;
		}
		& div {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			& input{
				width: 80%;
				height: 10vw;
				color: var(--amarillo);
				font-family: Verdana, Geneva, Tahoma, sans-serif;
				font-weight: bold;
				font-size: 6vw;
				background-color: rgba(0, 0, 0, 0);
				border: 0;
				border-bottom: 2px solid var(--amarillo);
		
			}
		}
	}

	.team-container{
		width: 100%;
		max-height: 90%;
		padding: 5vw;
		display: grid;
		grid-template-columns: minmax(120px, 1fr) minmax(120px, 1fr);
		overflow-y: scroll;
		scrollbar-color: var(--rosa);
	}

	.team-members{
		width: 100%;
		height: 90%;
		padding: 5vw;
		display: flex;
		flex-direction: column;
		overflow-y: scroll;
		scrollbar-color: var(--rosa);
	}

	.team-button{
		background-color: rgba(0, 0, 0, 0);
		border: 0;
		width: 100%;
		display: flex;
		place-content: center;
		aspect-ratio: 1 / 1;
		& img{
			aspect-ratio: 1 / 1;
			width: 100%;
		}
	}

	.mini-profile{
		width: 100%;
		height: 17.5%;
		background-color: var(--rosa);
		border: 0;
		border-radius: 10px;
		display: flex;
		padding: 5vw;
	}

	.welcome-profile-photo{
		position: relative;
		width: 40%;
		justify-content: center;
		display: flex;
		flex-direction: column;
		& .welcome-profile{
			width: 100%;
			border-radius: 50%;
			box-shadow: 2.5px 2.5px 10px 0px rgba(0, 0, 0, 0.5);
		}
		& .lapiz{
			width: 20%;
			position: absolute;
			top: 10%;
			right: -15px;
		}

	}
	.welcome-team-photo{
		width: 40%;
		justify-content: center;
		display: flex;
		flex-direction: column;
		& img{
			width: 100%;
			border-radius: 50%;
			/* box-shadow: 2.5px 2.5px 10px 0px rgba(0, 0, 0, 0.5); */
		}
	}

	.welcome{
		display: flex;
		justify-content: center;
		flex-direction: column;
		text-align: center;
		padding: 5%;
		& .welcome-name{
			font-family: Verdana, Geneva, Tahoma, sans-serif;
			font-weight: bold;
			color: var(--amarillo);
			font-size: 4vw;
		}
		& .welcome-welcome{
			font-family: Verdana, Geneva, Tahoma, sans-serif;
			font-weight: bold;
			color: var(--morado);
			font-size: 3vw;
		}

	}

	.index-buttons-container{
		width: 100%;
		height: 77.5%;
		height: auto;
		display:grid;
		justify-content: center;
		align-items: center;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr 1fr;
		gap: 5vw;
	}

	.index-button{
		width: 100%;
		height: 100%;
		aspect-ratio: 1 / 1;
		background-color: var(--morado);
		border: 0;
		border-radius: 10px;
		padding: 5%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 5%;
		box-shadow: 2.5px 2.5px 10px 0px rgba(0, 0, 0, 0.7),
					inset 4px 4px 10px rgba(255, 255, 255, 0.6), /* Sombra interna superior e izquierda */
					inset -4px -4px 10px rgba(0, 0, 0, 0.5); /* Sombra interna derecha e inferior */
		& .img-container {
			width: 100%;
			height: 50%;
			& .button-img{
				justify-self: center;
			}
		}
		& .button-text{
			align-self: center;
			justify-content: center;
			color: var(--amarillo);
			font-family: Verdana, Geneva, Tahoma, sans-serif;
			font-size: 3.5vw;
			font-weight: bold;
			width: 100%;
			height: 20%;
			& .custom-M{
				font-family: 'merckregular';
				font-weight: normal;
				font-style: normal;
			}
		}
		&:active{
			box-shadow: 2.5px 2.5px 10px 0px rgba(0, 0, 0, 0.7),
			inset 4px 4px 10px rgba(0, 0, 0, 0.5), /* Sombra interna superior e izquierda */
			inset -4px -4px 10px rgba(255, 255, 255, 0.6); /* Sombra interna derecha e inferior */
		}
	}
	.index-button-disabled{
		width: 100%;
		height: 100%;
		aspect-ratio: 1 / 1;
		background-color: var(--morado-disabled);
		border: 0;
		border-radius: 10px;
		padding: 5%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 5%;
		box-shadow: 2.5px 2.5px 10px 0px rgba(0, 0, 0, 0.7),
					inset 4px 4px 10px rgba(255, 255, 255, 0.6), /* Sombra interna superior e izquierda */
					inset -4px -4px 10px rgba(0, 0, 0, 0.5); /* Sombra interna derecha e inferior */
		& .img-container {
			width: 100%;
			height: 50%;
			& .button-img{
				justify-self: center;
			}
		}
		& .button-text{
			align-self: center;
			justify-content: center;
			color: var(--amarillo);
			font-family: Verdana, Geneva, Tahoma, sans-serif;
			font-size: 3.5vw;
			font-weight: bold;
			width: 100%;
			height: 20%;
			& .custom-M{
				font-family: 'merckregular';
				font-weight: normal;
				font-style: normal;
			}
		}
		&:active{
			box-shadow: 2.5px 2.5px 10px 0px rgba(0, 0, 0, 0.7),
			inset 4px 4px 10px rgba(0, 0, 0, 0.5), /* Sombra interna superior e izquierda */
			inset -4px -4px 10px rgba(255, 255, 255, 0.6); /* Sombra interna derecha e inferior */
		}
	}

	.qr-container{
		display:flex;
		flex-direction: column;
		justify-content: center;
		padding: 20%;
		& .qr-background{
			background-color: var(--amarillo);
			padding: 10%;
			aspect-ratio: 1 / 1;
			display: flex;
			place-content: center;
			border-radius: 10px;
			box-shadow: 4px 4px 6px 0px rgba(0, 0, 0, 0.4);
			& img{
				width: 100%;
				height: 100%;
			}
		}
	}

	.off-canvas{
		display: flex;
		width: 100%;
		height: 10% !important;
		align-items: center !important;
		justify-content: space-between;
		& .open-menu{
			height: 50% !important;
			display: flex;
			place-content: center;
			& img{
				height: 100%;
			}
		}
	}
	
	.off-canvas IMG{height:20px;}
		.off-canvas IMG:first-child{margin-right:15px}

	.img-button{
		background-color: rgba(0, 0, 0, 0);
		border: 0;
		width: 80%;
		display: flex;
		justify-content: start;
		padding-left: 10px;
	}
	.img-button-off{
		background-color: rgba(0, 0, 0, 0);
		border: 0;
		display: flex;
		justify-content: end;
		align-items: center;
	}

	.img-container{
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.input-login-group{
		width: auto;
		display: flex;
		flex-direction: column;
		gap: 25%;
	}

	.logo{
		width: 100%;
	}

	.body-y{
		background-color: var(--amarillo);
	}
	.body-p{
		background-color: var(--morado);
	}

	.boton-subir{
		width: 50%;
		background-color: var(--morado);
		color: var(--amarillo);
		font-size: 4vw;
		font-family: Verdana, Geneva, Tahoma, sans-serif;
		font-weight: 400;
		text-decoration: none;
		padding: 2vw 5vw;
		border-radius: 15px;
	}

	.slide-in {
		opacity: 0;
		transform: translateY(-20px); /* Empieza desde arriba */
		transition: opacity 0.3s ease, transform 0.3s ease;
	}

	.slide-in.slide-in-active {
		opacity: 1;
		transform: translateY(0);
	}	
}

#infoReset{
	background-color: rgba(80,50,145, 0.9);
	display: none;
	text-decoration: none;
	font-size: 16px;
	color: var(--amarillo);
	padding:15px;
	position: fixed;
	width:100%;
	height:100vh;
	bottom: 0;
	z-index: 1;
	top:0;
	left:0;
	overflow:hidden;
}

#c_infoReset_1{margin-bottom:20px; margin-top:20vh}
#c_infoReset_1 IMG{height: auto; width: 100%; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1); border-radius:12px; margin-left:0px; max-width:72px}
#c_infoReset_2{font-weight:bold; font-size:30px; text-align:center}


.form-check:not(.form-switch) .form-check-input[type="checkbox"] {
  background-size: 60% 60%;
}
.form-check-input[type="checkbox"] {
  border-radius: 0.45em;
}
.form-check .form-check-input {
  float: left;
  margin-left: -2.25rem;
}
.form-check-input {
  --bs-form-check-bg: transparent;
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  margin-top: -0.125rem;
  vertical-align: top;
  appearance: none;
  background-color: var(--amarillo);
  background-image: var(--amarillo);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: 2px solid var(--morado);
  print-color-adjust: exact;
}

.form-check-input:checked {
	background-color: var(--rosa);
	border-color: var(--morado);
}
#offcanvasExample{z-index: 999999;}
#close_search{position: absolute; right: 15px; top: 15px;}
	#close_search IMG{width:25px;}