@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');


@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 {
	--color-azul-comfa: #00356a;
	--color-red-comfa: #ac000a;
	--color-verde-comfa: #003943;
	--color-gray-comfa: #2d2d2d;
	--color-primary: #195cbf;
	--color-primary-claro: #2576f0;
	--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;
	--verde-claro2: #0a9f48;
}


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

.container-3 {
	width: 85%;
	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: rgb(255 255 255 / 62%);
	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; */
	-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 {
	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(1) {
	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(2) {
	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(3) {
	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(1) {
	top: 21px;
	left: 14px;
	rotate: 60deg;
}

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

.abstergo-loader:hover div:nth-child(3) {
	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);
	}
}

/* END SPINNER */


/* estilos generales */
/* type Fonts */


.text-montserrat {
	font-family: 'MontserratSemiBold';
}

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

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

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

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

.text-green2 {
	color: var(--verde-claro);
}

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

.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);
}


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

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

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

/* FORM */
.title,
.title2 {
	font-size: 1.2em;
	font-weight: 600;
	letter-spacing: -1px;
	position: relative;
	display: flex;
	align-items: center;
	padding-left: 24px;
	color: var(--color-azul-comfa);
}

.subtitle {
	font-size: 1em;
	font-weight: 500;
	color: var(--verde-claro);
}

.title::before {
	width: 18px;
	height: 18px;
}

.title::after {
	width: 18px;
	height: 18px;
	animation: pulse 1s linear infinite;
}

.title.small::before,
.title.small::after {
	background-color: var(--color-red-comfa);
}

.title::before,
.title::after {
	position: absolute;
	content: "";
	height: 16px;
	width: 16px;
	border-radius: 50%;
	left: 0px;
	background-color: var(--verde-claro);
}


.btnSave,
.btnSave2,
.btnSave3,
.btnCancel,
.btnDeny {
	border: none;
	outline: none;
	padding: 8px 10px;
	border-radius: 10px;
	color: #fff;
	font-size: 0.9em;
	transition: background-color 0.4s ease;
}

.btnBorderSave,
.btnBorderSave2,
.btnBorderCancel,
.btnBorderDeny {
	background-color: transparent;
	padding: 8px 10px;
	border-radius: 10px;
	font-size: 0.8em;
	transition: background-color 0.4s ease, color 0.4s ease;
}

.btnBorderSave {
	color: var(--color-azul-comfa);
	border: 1px solid var(--color-azul-comfa);
}

.btnBorderSave2 {
	color: var(--verde-oscuro);
	border: 1px solid var(--verde-oscuro);
}

.btnBorderCancel {
	color: var(--color-red-comfa);
	border: 1px solid var(--color-red-comfa);
}

.btnBorderDeny {
	color: var(--primary-color);
	border: 1px solid var(--primary-color);
}


.btnBorderSave:hover,
.btnBorderSave:focus {
    background-color: var(--color-azul-comfa);
    color: #fff;
    cursor: pointer;
}

.btnBorderSave2:hover {
	background-color: var(--verde-oscuro);
	color: #fff;
	cursor: pointer;
}

.btnBorderCancel:hover {
	background-color: var(--color-red-comfa);
	color: #fff;
	cursor: pointer;
}

.btnBorderDeny:hover {
	background-color: var(--primary-color);
	color: #fff;
	cursor: pointer;
}

.btnSave {
	background-color: var(--color-azul-comfa);
}

.btnSave2 {
	background-color: var(--verde-oscuro);
}

.btnSave3 {
	background-color: var(--color-verde-comfa);
}

.btnSave:hover {
	background-color: var(--verde-claro);
	cursor: pointer;
}

.btnSave2:hover {
	background-color: #028f3c;
}

.btnSave3:hover {
	background-color: var(--gray);
	cursor: pointer;
}

.btnDeny.hover,
.btnSave3.hover {
	box-shadow: 0 2px 5px rgb(0 0 0 / 99%);
}

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

.btnCancel:hover {
	background-color: var(--gray);
	cursor: pointer;
}

.btnDeny {
	background-color: var(--primary-color);
	color: var(--color-gray-comfa);
	cursor: pointer;
}

.btnDeny:hover {
	background-color: var(--gray);
	color: #fff;
}

.btnDenyInactive {
	cursor: not-allowed;
	background-color: #dcdbdb;
	color: #fff;
	border: none;
	outline: none;
	padding: 8px 10px;
	border-radius: 10px;
	font-size: 0.9em;
}

.btnDenyInactive.hover {
	cursor: pointer;
	background-color: var(--primary-color);
	border: 3px solid #eeb646;
	box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
}

.btnInvoiceInactive {
	border: none;
	outline: none;
	padding: 8px 10px;
	border-radius: 10px;
	color: #fff;
	font-size: 0.9em;
	background-color: #dcdbdb;
	cursor: not-allowed;
}

.btnInvoiceInactive.hover {
	cursor: pointer;
	background-color: var(--verde-claro);
	box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
}


@keyframes pulse {
	from {
		transform: scale(0.9);
		opacity: 1;
	}

	to {
		transform: scale(1.8);
		opacity: 0;
	}
}

.req {
	color: #910000;
}

.input-invalid {
	border: 2px solid red !important;
}

.inputSearch {
	background: url(https://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-19-32.png) no-repeat 1px;
	background-size: 20px;
	width: 100%;
	border: solid 1px #ccc;
	border-radius: 10px;
	padding: 5px 5px 5px 25px;
	outline: none;
}


/* end FORM */


.border-green {
	border: 1px solid var(--verde-claro);
	border-radius: 5px;
}


/*  RESPONSIVE */
@media screen and (max-width: 768px) {}

.col-sm.inputContainer {
	display: flex;
	flex-direction: column;
	width: fit-content;
	position: static;
	max-width: 240px;
}

.col-sm.inputContainer label.text {
	font-size: 0.75rem;
	color: var(--color-azul-comfa);
	font-weight: 700;
	position: relative;
	top: 0.5rem;
	margin: 0 0 0 7px;
	padding: 0 3px;
	background: #e8e8e8;
	width: fit-content;

}

.codigo-container,
.servicio-container {
	display: flex;
	align-items: center;
}

.servicio-beneficiarios {
	text-align: center;
}

.col-sm.inputContainer input[type=text].input {
	width: 100px;
	height: 30px;
	padding: 5px 8px;
	font-size: 0.6rem;
	border: 1px var(--color-azul-comfa) solid;
	border-radius: 5px;
	background: #e8e8e8;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.col-sm.inputContainer input[type=text].input:focus {
	outline: none;
}


.inputSearch::placeholder {
	font-size: 12px;
}

.text-small {
	font-size: 0.8em;
}