:root {

	--color-primary: #3c5967;
	--color-secondary: #6c828d;
	--project-color-gradient: linear-gradient(334deg, #8ea0a9, #3c5967, #8ea0a9);
	--project-background-resultado: #f1f1f1;

}

.box-login { margin: 0 auto; padding: 30px 40px; width: 60%; max-width: 400px; }
.hidden { display: none; }
.transparente {opacity: 0.5;}
.hand { cursor: pointer; padding-top: 15px!important; }
.nowrap { white-space: nowrap; }
.margin {margin:40px auto;}
.shadow { box-shadow: 0 0 20px rgba(0, 0, 0, 0.25); }
.radius { border-radius: 10px }
.div-paginacion { margin: 25px auto; }
.section-breadcrumbs { margin: 2rem 2.5rem 0rem 2.5rem; }
.resultados { text-align: center; font-weight: 500; background-color: var(--project-background-resultado); border-radius: 6px; margin: 0 0 20px 0; padding: 5px 0; font-size: 0.8em; }
.avatar { border-radius: 6px; box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px; }

#login {
	min-height: 100vh;
	overflow: hidden;
	background: var(--project-color-gradient);
	background-size: 180% 180%;
	animation: gradient-animation 6s ease infinite;
}

@keyframes gradient-animation {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

/* Loader */

#modal-loader { z-index:9999; }

.modal-background-noclick { 
	background-color: rgba(10, 10, 10, 0.86); 
	bottom: 0;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

.lds-ripple {
	position: absolute;
	left: 50%;
	top: 50%;
}

.lds-ripple div {
	position: absolute;
	border: 4px solid white;
	opacity: 1;
	border-radius: 50%;
	animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.lds-ripple div:nth-child(2) {
	animation-delay: -0.5s;
}

@keyframes lds-ripple {
	0% {
		top: 60px;
		left: 60px;
		width: 0;
		height: 0;
		opacity: 1;
	}
	100% {
		top: 0px;
		left: 0px;
		width: 120px;
		height: 120px;
		opacity: 0;
	}
}

/* Quitar el banner de upgrade de TinyMCE Cloud Editor */
.tox-promotion, .tox-statusbar__branding { display: none!important; }

/* Medias */
@media screen and (min-width: 1024px) {
	.section { padding: 2rem 2.5rem 1rem 2.5rem; }
}

/* Precarga para divs */
.div-cargador { width: 100%; margin: 100px auto; text-align: center; }
.cargador {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	display: block;
	margin:15px auto;
	position: relative;
	color: #3faba7;
	left: -100px;
	box-sizing: border-box;
	animation: shadowRolling 2s linear infinite;
}

@keyframes shadowRolling {
	0% {
	  box-shadow: 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
	}
	12% {
	  box-shadow: 100px 0 #3faba7, 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
	}
	25% {
	  box-shadow: 110px 0 #3faba7, 100px 0 #3faba7, 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
	}
	36% {
	  box-shadow: 120px 0 #3faba7, 110px 0 #3faba7, 100px 0 #3faba7, 0px 0 rgba(255, 255, 255, 0);
	}
	50% {
	  box-shadow: 130px 0 #3faba7, 120px 0 #3faba7, 110px 0 #3faba7, 100px 0 #3faba7;
	}
	62% {
	  box-shadow: 200px 0 rgba(255, 255, 255, 0), 130px 0 #3faba7, 120px 0 #3faba7, 110px 0 #3faba7;
	}
	75% {
	  box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 130px 0 #3faba7, 120px 0 #3faba7;
	}
	87% {
	  box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 130px 0 #3faba7;
	}
	100% {
	  box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0);
	}
}