/* Bootstrap 4.6 Spinner Styles */
.spinner-layer *,
.spinner-layer *::before,
.spinner-layer *::after {
  box-sizing: border-box; // 1
}
@keyframes spinner-border {
  to {
    transform: rotate(360deg);
  }
}

#mascaraBlanca .spinner-border {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  vertical-align: text-bottom;
  border: 0.25em solid currentColor;
  border-right: 0.25em solid transparent;
  border-radius: 50%;
  animation: spinner-border 0.75s linear infinite;
}

#mascaraBlanca .spinner-border-sm {
  width: 1rem;
  height: 1rem;
  border: 0.2em solid currentColor;
  border-right: 0.2em solid transparent;
}

@keyframes spinner-grow {
  0% {
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: none;
  }
}

#mascaraBlanca  .spinner-grow {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  vertical-align: text-bottom;
  background-color: currentColor;
  border-radius: 50%;
  opacity: 0;
  animation: spinner-grow 0.75s linear infinite;
}

#mascaraBlanca .spinner-grow-sm {
  width: 1rem;
  height: 1rem;
}

/* Bootstrap 4.6 Spinner Styles End */

/* PRELOADER */

#mascaraBlanca .preloader-wrapper {
	display: inline-block;
	position: relative;
	width: 48px;
	height: 48px;
  }

#mascaraBlanca .preloader-wrapper.small {
	width: 36px;
	height: 36px;
  }

#mascaraBlanca .preloader-wrapper.big {
	width: 64px;
	height: 64px;
  }

  #mascaraBlanca .preloader-wrapper.active {
	/* duration: 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */
	-webkit-animation: container-rotate 1568ms linear infinite;
	animation: container-rotate 1568ms linear infinite;
  }

  @-webkit-keyframes container-rotate {
	to {
	  -webkit-transform: rotate(360deg);
	}
  }

  @keyframes container-rotate {
	to {
	  -webkit-transform: rotate(360deg);
			  transform: rotate(360deg);
	}
  }

 #mascaraBlanca .spinner-layer {
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0;
  }

 #mascaraBlanca .spinner-blue,
  .spinner-blue-only {
	border-color: var(--spinner-azul);
  }

#mascaraBlanca  .spinner-red,
  .spinner-red-only {
	border-color: var(--spinner-rojo);
  }

#mascaraBlanca  .spinner-yellow,
  .spinner-yellow-only {
	border-color: var(--spinner-amarillo);
  }

#mascaraBlanca  .spinner-green,
  .spinner-green-only {
	/*border-color: #0f9d58;*/
	border-color: var(--spinner-verde);
  }

 #mascaraBlanca .active .spinner-layer.spinner-blue {
	/* durations: 4 * ARCTIME */
	-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
	animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  }

 #mascaraBlanca .active .spinner-layer.spinner-red {
	/* durations: 4 * ARCTIME */
	-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
	animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  }

 #mascaraBlanca .active .spinner-layer.spinner-yellow {
	/* durations: 4 * ARCTIME */
	-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
	animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  }

 #mascaraBlanca .active .spinner-layer.spinner-green {
	/* durations: 4 * ARCTIME */
	-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
	animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  }

#mascaraBlanca  .active .spinner-layer,
  .active .spinner-layer.spinner-blue-only,
  .active .spinner-layer.spinner-red-only,
  .active .spinner-layer.spinner-yellow-only,
  .active .spinner-layer.spinner-green-only {
	/* durations: 4 * ARCTIME */
	opacity: 1;
	-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
	animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  }

  @-webkit-keyframes fill-unfill-rotate {
	12.5% {
	  -webkit-transform: rotate(135deg);
	}
	/* 0.5 * ARCSIZE */
	25% {
	  -webkit-transform: rotate(270deg);
	}
	/* 1   * ARCSIZE */
	37.5% {
	  -webkit-transform: rotate(405deg);
	}
	/* 1.5 * ARCSIZE */
	50% {
	  -webkit-transform: rotate(540deg);
	}
	/* 2   * ARCSIZE */
	62.5% {
	  -webkit-transform: rotate(675deg);
	}
	/* 2.5 * ARCSIZE */
	75% {
	  -webkit-transform: rotate(810deg);
	}
	/* 3   * ARCSIZE */
	87.5% {
	  -webkit-transform: rotate(945deg);
	}
	/* 3.5 * ARCSIZE */
	to {
	  -webkit-transform: rotate(1080deg);
	}
	/* 4   * ARCSIZE */
  }

  @keyframes fill-unfill-rotate {
	12.5% {
	  -webkit-transform: rotate(135deg);
			  transform: rotate(135deg);
	}
	/* 0.5 * ARCSIZE */
	25% {
	  -webkit-transform: rotate(270deg);
			  transform: rotate(270deg);
	}
	/* 1   * ARCSIZE */
	37.5% {
	  -webkit-transform: rotate(405deg);
			  transform: rotate(405deg);
	}
	/* 1.5 * ARCSIZE */
	50% {
	  -webkit-transform: rotate(540deg);
			  transform: rotate(540deg);
	}
	/* 2   * ARCSIZE */
	62.5% {
	  -webkit-transform: rotate(675deg);
			  transform: rotate(675deg);
	}
	/* 2.5 * ARCSIZE */
	75% {
	  -webkit-transform: rotate(810deg);
			  transform: rotate(810deg);
	}
	/* 3   * ARCSIZE */
	87.5% {
	  -webkit-transform: rotate(945deg);
			  transform: rotate(945deg);
	}
	/* 3.5 * ARCSIZE */
	to {
	  -webkit-transform: rotate(1080deg);
			  transform: rotate(1080deg);
	}
	/* 4   * ARCSIZE */
  }

  @-webkit-keyframes blue-fade-in-out {
	from {
	  opacity: 1;
	}
	25% {
	  opacity: 1;
	}
	26% {
	  opacity: 0;
	}
	89% {
	  opacity: 0;
	}
	90% {
	  opacity: 1;
	}
	100% {
	  opacity: 1;
	}
  }

  @keyframes blue-fade-in-out {
	from {
	  opacity: 1;
	}
	25% {
	  opacity: 1;
	}
	26% {
	  opacity: 0;
	}
	89% {
	  opacity: 0;
	}
	90% {
	  opacity: 1;
	}
	100% {
	  opacity: 1;
	}
  }

  @-webkit-keyframes red-fade-in-out {
	from {
	  opacity: 0;
	}
	15% {
	  opacity: 0;
	}
	25% {
	  opacity: 1;
	}
	50% {
	  opacity: 1;
	}
	51% {
	  opacity: 0;
	}
  }

  @keyframes red-fade-in-out {
	from {
	  opacity: 0;
	}
	15% {
	  opacity: 0;
	}
	25% {
	  opacity: 1;
	}
	50% {
	  opacity: 1;
	}
	51% {
	  opacity: 0;
	}
  }

  @-webkit-keyframes yellow-fade-in-out {
	from {
	  opacity: 0;
	}
	40% {
	  opacity: 0;
	}
	50% {
	  opacity: 1;
	}
	75% {
	  opacity: 1;
	}
	76% {
	  opacity: 0;
	}
  }

  @keyframes yellow-fade-in-out {
	from {
	  opacity: 0;
	}
	40% {
	  opacity: 0;
	}
	50% {
	  opacity: 1;
	}
	75% {
	  opacity: 1;
	}
	76% {
	  opacity: 0;
	}
  }

  @-webkit-keyframes green-fade-in-out {
	from {
	  opacity: 0;
	}
	65% {
	  opacity: 0;
	}
	75% {
	  opacity: 1;
	}
	90% {
	  opacity: 1;
	}
	100% {
	  opacity: 0;
	}
  }

  @keyframes green-fade-in-out {
	from {
	  opacity: 0;
	}
	65% {
	  opacity: 0;
	}
	75% {
	  opacity: 1;
	}
	90% {
	  opacity: 1;
	}
	100% {
	  opacity: 0;
	}
  }

  /**
   * Patch the gap that appear between the two adjacent div.circle-clipper while the
   * spinner is rotating (appears on Chrome 38, Safari 7.1, and IE 11).
   */
 #mascaraBlanca .gap-patch {
	position: absolute;
	top: 0;
	left: 45%;
	width: 10%;
	height: 100%;
	overflow: hidden;
	border-color: inherit;
  }

 #mascaraBlanca .gap-patch .circle {
	width: 1000%;
	left: -450%;
  }

 #mascaraBlanca .circle-clipper {
	display: inline-block;
	position: relative;
	width: 50%;
	height: 100%;
	overflow: hidden;
	border-color: inherit;
  }

#mascaraBlanca .circle-clipper .circle {
	width: 200%;
	height: 100%;
	border-width: 3px;
	/* STROKEWIDTH */
	border-style: solid;
	border-color: inherit;
	border-bottom-color: transparent !important;
	border-radius: 50%;
	-webkit-animation: none;
	animation: none;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
  }

 #mascaraBlanca .circle-clipper.left .circle {
	left: 0;
	border-right-color: transparent !important;
	-webkit-transform: rotate(129deg);
	transform: rotate(129deg);
  }

#mascaraBlanca  .circle-clipper.right .circle {
	left: -100%;
	border-left-color: transparent !important;
	-webkit-transform: rotate(-129deg);
	transform: rotate(-129deg);
  }

 #mascaraBlanca .active .circle-clipper.left .circle {
	/* duration: ARCTIME */
	-webkit-animation: left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
	animation: left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  }

 #mascaraBlanca .active .circle-clipper.right .circle {
	/* duration: ARCTIME */
	-webkit-animation: right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
	animation: right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  }

  @-webkit-keyframes left-spin {
	from {
	  -webkit-transform: rotate(130deg);
	}
	50% {
	  -webkit-transform: rotate(-5deg);
	}
	to {
	  -webkit-transform: rotate(130deg);
	}
  }

  @keyframes left-spin {
	from {
	  -webkit-transform: rotate(130deg);
			  transform: rotate(130deg);
	}
	50% {
	  -webkit-transform: rotate(-5deg);
			  transform: rotate(-5deg);
	}
	to {
	  -webkit-transform: rotate(130deg);
			  transform: rotate(130deg);
	}
  }

  @-webkit-keyframes right-spin {
	from {
	  -webkit-transform: rotate(-130deg);
	}
	50% {
	  -webkit-transform: rotate(5deg);
	}
	to {
	  -webkit-transform: rotate(-130deg);
	}
  }

  @keyframes right-spin {
	from {
	  -webkit-transform: rotate(-130deg);
			  transform: rotate(-130deg);
	}
	50% {
	  -webkit-transform: rotate(5deg);
			  transform: rotate(5deg);
	}
	to {
	  -webkit-transform: rotate(-130deg);
			  transform: rotate(-130deg);
	}
  }

 #mascaraBlanca #spinnerContainer.cooldown {
	/* duration: SHRINK_TIME */
	-webkit-animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0, 0.2, 1);
	animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  @-webkit-keyframes fade-out {
	from {
	  opacity: 1;
	}
	to {
	  opacity: 0;
	}
  }

  @keyframes fade-out {
	from {
	  opacity: 1;
	}
	to {
	  opacity: 0;
	}
  }	
  
 #mascaraBlanca .progress {
	  position: relative;
	  height: 5px;
	  display: block;
	  background-color: var(--c-azul-2, #aaa);
	  border-radius: 5px;
	  margin: 0.5rem 0 1rem 0;
	  overflow: hidden;
	  position: fixed;
	  top: 50%;
	  left: 0;
	  right: 0;
	  margin: 0 auto;
	  margin-top: 0;
	  width: 300px;
  }

 #mascaraBlanca .progress .indeterminate {
	background-color: var(--c-azul-1, #d0d1b0);
  }

#mascaraBlanca  .progress .indeterminate:before {
	content: '';
	position: absolute;
	background-color: inherit;
	top: 0;
	left: 0;
	bottom: 0;
	will-change: left, right;
	-webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
			animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
  }

#mascaraBlanca  .progress .indeterminate:after {
	content: '';
	position: absolute;
	background-color: inherit;
	top: 0;
	left: 0;
	bottom: 0;
	will-change: left, right;
	-webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
			animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
	-webkit-animation-delay: 1.15s;
			animation-delay: 1.15s;
  }

  @-webkit-keyframes indeterminate {
	0% {
	  left: -35%;
	  right: 100%;
	}
	60% {
	  left: 100%;
	  right: -90%;
	}
	100% {
	  left: 100%;
	  right: -90%;
	}
  }

  @keyframes indeterminate {
	0% {
	  left: -35%;
	  right: 100%;
	}
	60% {
	  left: 100%;
	  right: -90%;
	}
	100% {
	  left: 100%;
	  right: -90%;
	}
  }

  @-webkit-keyframes indeterminate-short {
	0% {
	  left: -200%;
	  right: 100%;
	}
	60% {
	  left: 107%;
	  right: -8%;
	}
	100% {
	  left: 107%;
	  right: -8%;
	}
  }

  @keyframes indeterminate-short {
	0% {
	  left: -200%;
	  right: 100%;
	}
	60% {
	  left: 107%;
	  right: -8%;
	}
	100% {
	  left: 107%;
	  right: -8%;
	}
  }