@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100&family=Poppins:ital,wght@0,200;0,300;0,400;0,500;1,100;1,200;1,300;1,400&display=swap');

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Montserrat', 'Poppins', 'sans-serif';
}


@font-face {
	font-family: 'MontserratSemiBold';
	src: url('../fonts/Montserrat-SemiBold.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Roboto';
	src: url('../fonts/roboto-regular.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
}


:root {
	--text-900: #1f2937;
	--color-azul-comfa: #00356a;
	--color-red-comfa: #ac000a;
	--color-verde-comfa: #001129;
	--color-gray-comfa: #2d2d2d;
	--white: #ffffff;
	--body-color: #fafafa;
	--sidebar-color: #1e2567;
	--primary-color: #ffa900;
	--primary-color-light: #DDD;
	--text-color: #ffffff;
	--toggle-color: #DDD;
	--gray: #7e7e7e;
	--verde-claro: #b8c522;
	--verde-oscuro: #006b2c;

	--brand: #0d6efd;
	--brand-600: #0b5ed7;
	--surface: #ffffff;
	--surface-2: #f7f9fc;
	--text-900: #1f2937;
	--text-700: #374151;
	--text-600: #475569;
	--border: #e5e7eb;
	--shadow: 0 10px 30px rgba(2, 6, 23, 0.08);
}

/*  Ocultar la barra de desplazamiento  */
::-webkit-scrollbar {
	display: none;
}

.req {
	color: #910000;
}


.container-2 {
	width: 95%;
	margin: 0 auto;
}

/* Estilo inicial con transición */
.shadow2 {
	box-shadow: 0 0.4rem 0.6rem rgba(0, 0, 0, 0.15) !important;
	transition: box-shadow 0.3s, background-color 0.3s, color 0.3s;
}

/* Estilo al pasar el ratón con transición */
.shadow2:hover {
	box-shadow: 0 0.4rem 0.6rem rgba(0, 0, 0, 0.664) !important;
}


.cursor {
	cursor: pointer;
}


.center-text {
	display: flex;
	justify-content: center;
	align-items: center;
}


/* START SPINNER */

.ui-abstergo {
	--primary: #fff;
	--blue: #1e2567;
	--yellow: #ffa900;
	--green: #095a04;
	--secondary: rgba(255, 255, 255, 0.3);
	--shadow-blur: 3px;
	--text-shadow-blur: 3px;
	--animation-duration: 1.2s;
	--size: 1;
}

.abstergo-loader * {
	-webkit-box-sizing: content-box;
	box-sizing: content-box;
}

.ui-abstergo {
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	justify-content: center;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	font-size: 25px;
	text-align: center;
	background-color: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(3px);
	z-index: 10000;
}

.ui-abstergo.hidden {
	display: none !important;
}

.ui-abstergo .ui-text {
	color: var(--blue);
	text-shadow: 0 0 var(--text-shadow-blur) var(--secondary);
	font-family: Menlo, sans-serif;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	margin-top: 10px;
	-webkit-box-align: baseline;
	-ms-flex-align: baseline;
	align-items: baseline;
	-webkit-column-gap: 3px;
	-moz-column-gap: 3px;
	column-gap: 3px;
}

.ui-abstergo .ui-dot {
	content: "";
	display: block;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	-webkit-animation: dots var(--animation-duration) infinite linear;
	animation: dots var(--animation-duration) infinite linear;
	-webkit-animation-delay: .4s;
	animation-delay: .4s;
	background-color: var(--blue);
}

.ui-abstergo .ui-dot:nth-child(2) {
	-webkit-animation-delay: .8s;
	animation-delay: .8s;
}

.ui-abstergo .ui-dot:nth-child(3) {
	-webkit-animation-delay: 1.2s;
	animation-delay: 1.2s;
}

.ui-abstergo .ui-dot+.ui-dot {
	margin-left: 3px;
}

.abstergo-loader {
	width: 103px;
	height: 90px;
	position: relative;
}

.abstergo-loader div:not(.christmas-star):not(.christmas-message) {
	width: 50px;
	border-right: 12px solid transparent;
	border-left: 12px solid transparent;
	border-top: 21px solid var(--primary);
	position: absolute;
	-webkit-filter: drop-shadow(0 0 var(--shadow-blur) var(--secondary));
	filter: drop-shadow(0 0 var(--shadow-blur) var(--secondary));
}

.abstergo-loader div:nth-child(2) {
	border-top: 21px solid var(--blue);
	top: 27px;
	left: 7px;
	rotate: -60deg;
	-webkit-animation: line1 var(--animation-duration) linear infinite alternate;
	animation: line1 var(--animation-duration) linear infinite alternate;
}

.abstergo-loader div:nth-child(3) {
	border-top: 21px solid var(--blue);
	bottom: 2px;
	left: 0;
	rotate: 180deg;
	-webkit-animation: line2 var(--animation-duration) linear infinite alternate;
	animation: line2 var(--animation-duration) linear infinite alternate;
}

.abstergo-loader div:nth-child(4) {
	border-top: 21px solid var(--blue);
	bottom: 16px;
	right: -9px;
	rotate: 60deg;
	-webkit-animation: line3 var(--animation-duration) linear infinite alternate;
	animation: line3 var(--animation-duration) linear infinite alternate;
}

.abstergo-loader:hover div:nth-child(2) {
	top: 21px;
	left: 14px;
	rotate: 60deg;
}

.abstergo-loader:hover div:nth-child(3) {
	bottom: 5px;
	left: -8px;
	rotate: 300deg;
}

.abstergo-loader:hover div:nth-child(4) {
	bottom: 7px;
	right: -11px;
	rotate: 180deg;
}

@-webkit-keyframes line1 {

	0%,
	40% {
		top: 27px;
		left: 7px;
		rotate: -60deg;
	}

	60%,
	100% {
		top: 22px;
		left: 14px;
		rotate: 60deg;
	}
}

@keyframes line1 {

	0%,
	40% {
		top: 27px;
		left: 7px;
		rotate: -60deg;
	}

	60%,
	100% {
		top: 22px;
		left: 14px;
		rotate: 60deg;
	}
}

@-webkit-keyframes line2 {

	0%,
	40% {
		bottom: 2px;
		left: 0;
		rotate: 180deg;
	}

	60%,
	100% {
		bottom: 5px;
		left: -8px;
		rotate: 300deg;
	}
}

@keyframes line2 {

	0%,
	40% {
		bottom: 2px;
		left: 0;
		rotate: 180deg;
	}

	60%,
	100% {
		bottom: 5px;
		left: -8px;
		rotate: 300deg;
	}
}

@-webkit-keyframes line3 {

	0%,
	40% {
		bottom: 16px;
		right: -9px;
		rotate: 60deg;
	}

	60%,
	100% {
		bottom: 7px;
		right: -11px;
		rotate: 180deg;
	}
}

@keyframes line3 {

	0%,
	40% {
		bottom: 16px;
		right: -9px;
		rotate: 60deg;
	}

	60%,
	100% {
		bottom: 7px;
		right: -11px;
		rotate: 180deg;
	}
}

@-webkit-keyframes dots {
	0% {
		background-color: var(--blue);
	}

	30% {
		background-color: var(--blue);
	}

	70%,
	100% {
		background-color: var(--blue);
	}
}

@keyframes dots {
	0% {
		background-color: var(--blue);
	}

	30% {
		background-color: var(--primary);
	}

	70%,
	100% {
		background-color: var(--secondary);
	}
}


/* START CHRISTMAS THEME - Solo activo en Diciembre */
.christmas-theme .abstergo-loader div:nth-child(2) {
	border-top-color: #c41e3a !important;
}

.christmas-theme .abstergo-loader div:nth-child(3) {
	border-top-color: #0f8644 !important;
}

.christmas-theme .abstergo-loader div:nth-child(4) {
	border-top-color: #ffd700 !important;
}

.christmas-theme .ui-text {
	color: #fff !important;
	text-shadow: 0 0 10px rgba(255, 215, 0, 0.6) !important;
}

.christmas-theme .ui-dot {
	background-color: #ffd700 !important;
	box-shadow: 0 0 8px #ffd700;
}

.snowflake {
	position: absolute;
	color: white;
	font-size: 1em;
	text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
	animation: snowfall linear infinite;
	pointer-events: none;
	z-index: 1;
}

@keyframes snowfall {
	0% {
		transform: translateY(-10vh) rotate(0deg);
		opacity: 1;
	}

	100% {
		transform: translateY(110vh) rotate(360deg);
		opacity: 0.3;
	}
}

.christmas-star {
	position: absolute;
	top: -50px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 30px;
	animation: twinkle 1s ease-in-out infinite;
	filter: drop-shadow(0 0 10px gold);
	display: none;
}

@keyframes twinkle {

	0%,
	100% {
		opacity: 1;
		transform: translateX(-50%) scale(1);
	}

	50% {
		opacity: 0.6;
		transform: translateX(-50%) scale(1.2);
	}
}

.christmas-message {
	position: absolute;
	top: 150px;
	bottom: -70px;
	left: -20px;
	/* right: 0; */
	width: 141%;
	color: white;
	font-size: 14px;
	font-weight: bold;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
	animation: fadeInOut 2s ease-in-out infinite;
	display: none;
}

@keyframes fadeInOut {

	0%,
	100% {
		opacity: 0.7;
	}

	50% {
		opacity: 1;
	}
}


/* END SPINNER */


/* estilos generales */
/* type Fonts */
.text-montserrat {
	font-family: 'MontserratSemiBold';
}

.text-roboto {
	font-family: 'Roboto';
}


/* clases principales */
.text-azul-comfa,
hr {
	color: var(--color-azul-comfa);
}

.text-red {
	color: var(--color-red-comfa);
}

.text-gray {
	color: var(--color-gray-comfa);
}

.text-green {
	color: var(--color-verde-comfa);
}

.bg-comfacauca {
	background-color: var(--color-azul-comfa);
	color: var(--white);
}

.bg-green {
	background-color: var(--color-verde-comfa);
	color: var(--white);
}

.bg-gray {
	background-color: var(--color-gray-comfa);
	color: var(--white);
}

.bg-red {
	background-color: var(--color-red-comfa);
	color: var(--white);
}

a {
	text-decoration: none;
}