:root {

	--project-color-text: hsl(0, 0%, 20%);
	--project-color-primary: #d1b255;
	--project-color-gradient: linear-gradient(334deg, #d1b255, #faf6eb, #d1b255);
	--project-background-resultado: #faf6eb;

}

.strike { text-decoration: line-through; }
.box-login { margin: 0 auto; padding: 60px 40px; width: 60%; max-width: 400px; }
.box-login-rabe { margin: 5% auto 0 auto; padding: 60px 40px; width: 100%; max-width: 900px; }
.box-error { margin: 100px auto 0 auto; padding: 60px 40px; width: 80%; max-width: 900px; overflow: hidden; }
.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); color: var(--project-color-text); 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; }
.div-pregunta-votacion { border-radius: 6px; padding: 20px; border:1px solid #d1d1d1; background-color: #f0f0f0; cursor: grab; }
.cursor-grab { cursor: grab; }

.bgSuccess { background-color: #e6fff7; }
.bgWarning { background-color: #ffffe6; }
.bgDanger { background-color: #ffe6e6; }

#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;
	}
}

/* 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;
}


/* From Uiverse.io by lenin55 */
.cl-toggle-switch {
	position: relative;
}

.cl-switch {
	position: relative;
	display: inline-block;
}

/* Input */
.cl-switch>input {
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	z-index: -1;
	position: absolute;
	right: 6px;
	top: -8px;
	display: block;
	margin: 0;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	background-color: rgb(0, 0, 0, 0.38);
	outline: none;
	opacity: 0;
	transform: scale(1);
	pointer-events: none;
	transition: opacity 0.3s 0.1s, transform 0.2s 0.1s;
}

/* Track */
.cl-switch>span::before {
	content: "";
	float: right;
	display: inline-block;
	margin: 5px 0 5px 10px;
	border-radius: 7px;
	width: 36px;
	height: 14px;
	background-color: rgb(0, 0, 0, 0.38);
	vertical-align: top;
	transition: background-color 0.2s, opacity 0.2s;
}

/* Thumb */
.cl-switch>span::after {
	content: "";
	position: absolute;
	top: 2px;
	right: 16px;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	background-color: #fff;
	box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
	transition: background-color 0.2s, transform 0.2s;
}

/* Checked */
.cl-switch>input:checked {
	right: -10px;
	background-color: #85b8b7;
}

.cl-switch>input:checked+span::before {
	background-color: #d2ecd3;
}

.cl-switch>input:checked+span::after {
	background-color: #3abb81;
	transform: translateX(16px);
}

/* Hover, Focus */
.cl-switch:hover>input {
	opacity: 0.04;
}

.cl-switch>input:focus {
	opacity: 0.12;
}

.cl-switch:hover>input:focus {
	opacity: 0.16;
}

/* Active */
.cl-switch>input:active {
	opacity: 1;
	transform: scale(0);
	transition: transform 0s, opacity 0s;
}

.cl-switch>input:active+span::before {
	background-color: #8f8f8f;
}

.cl-switch>input:checked:active+span::before {
	background-color: #85b8b7;
}

/* Disabled */
.cl-switch>input:disabled {
	opacity: 0;
}

.cl-switch>input:disabled+span::before {
	background-color: #ddd;
}

.cl-switch>input:checked:disabled+span::before {
	background-color: #bfdbda;
}

.cl-switch>input:checked:disabled+span::after {
	background-color: #61b5b4;
}