.custom-file-container {
	transition: all 0.2s ease-in-out;
}

.custom-file-container:hover {
	background-color: var(--bs-light);
	border-color: var(--bs-primary);
	box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.1);
}

#file-name {
	font-size: 0.95rem;
	font-weight: 500;
}



.mov-btn-container {
	display: flex;
	gap: .25rem;
	align-items: center;
	float: right;
}

.mov-btn-container .btn {
	padding: .18rem .35rem;
	font-size: .78rem;
}

.dragging-helper {
	opacity: 0.8;
	transform: rotate(3deg);
}

.being-dragged {
	opacity: 0.5;
	border: 2px dashed #0d6efd !important;
}

.highlight {
	background-color: #e9ecef;
	border: 2px dashed #ced4da;
}







.custom-tab .nav-link {
	background-color: #000;
	color: #fff;
	border: 1px solid #444;
}

.custom-tab .nav-link:hover {
	background-color: #111;
	color: #fff;
}

.custom-tab .nav-link.active {
	background-color: #fff;
	color: #000;
	font-weight: bold;
	border-color: #ccc;
	border-bottom: none;
}


.col-table-1 {
	width: 1%;
}

.col-table-2 {
	width: 2%;
}

.col-table-4 {
	width: 4%;
}

.col-table-6 {
	width: 6%;
}

.col-table-8 {
	width: 8%;
}

.col-table-10 {
	width: 10%;
}

.col-table-15 {
	width: 15%;
}

.col-table-20 {
	width: 20%;
}

.col-table-25 {
	width: 25%;
}

.col-table-30 {
	width: 30%;
}

.col-table-35 {
	width: 35%;
}

.col-table-40 {
	width: 40%;
}





.scroll-hover {
	overflow-y: auto;
}


.scroll-hover::-webkit-scrollbar {
	width: 6px;
}

.scroll-hover::-webkit-scrollbar-thumb {
	background-color: rgba(233, 233, 233, 0.6);
	border-radius: 3px;
	opacity: 0;
	transition: opacity 0.3s ease;
}



.search-results {
	position: absolute;
	z-index: 1000;
	width: 100%;
	background-color: #fff;
	/* border: 1px solid #ddd; */
	max-height: 600px;
	overflow-y: auto;
	display: none;
}


.search-results li {
	padding: 8px 12px;
	cursor: pointer;
}

.search-results li:hover {
	background-color: #f0f0f0;
}




.circulo-iniciales {
	display: inline-block;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	background-color: #834f7d;
	color: white;
	text-align: center;
	line-height: 25px;
	font-weight: bold;
	font-size: 12px;
}

/* whatsapp */
.sidebar-wapp {
	background-color: #f0f0f0;
}

.sidebar-wapp .contact {
	padding: 15px;
	border-bottom: 1px solid #ddd;
	cursor: pointer;

}

.chat-window {
	background-color: #e5ddd5;
	/* Color de fondo base */

	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.messages {
	padding: 20px;
	overflow-y: scroll;
	height: calc(80vh - 130px);
}

.message {
	margin-bottom: 15px;
	padding: 10px;
	border-radius: 15px;
	max-width: 80%;
}

.message.sent {
	background-color: #dcf8c6;
	align-self: flex-end;
}

.message.received {
	background-color: #ffffff;
}

.input-group {
	padding: 5px;
}

.whatsapp-message {
	max-width: max-content;
	border-radius: 10px 10px 10px 10px;
	padding: 10px;
	background-color: #DCF8C6;
	margin: 10px 0;
	position: relative;
	word-wrap: break-word;
	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

.whatsapp-message:after {
	content: "";
	position: absolute;
	bottom: 75%;
	right: 10px;
	width: 0;
	height: 0;
	border-left: 10px solid #DCF8C6;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	margin-right: -18px;
}

.message-content {
	font-size: 14px;
	color: #000;
}

.message-time {
	font-size: 12px;
	color: #888;
}

#btnEnviarWapp,
#btnPlantillaWappInsertar,
#btnPlantillaWappActualizar {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	height: 50px;
	width: 50px;
	font-size: 18px;
}

.input-group-append {
	margin-left: 10px;
}

#mensaje_wapp {
	padding: 12px;
	border-radius: 25px;
	height: 17px;
	max-height: 500px;
	/* Altura máxima */
	min-height: 50px;
	/* Altura mínima */
	overflow-y: auto;
	/* Activa el scroll vertical si el contenido supera la altura máxima */
	scrollbar-width: none;
	/* Oculta la barra de desplazamiento en Firefox */
}

#mensaje_wapp::-webkit-scrollbar {
	display: none;
	/* Oculta la barra de desplazamiento en WebKit (Chrome, Safari) */
}

.pre_wapp {
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	white-space: break-spaces;
	font-size: 14px;
	/* Tamaño de la fuente */
	font-weight: 400;
	/* Peso de la letra, 400 es regular */
	line-height: 1.5;
	/* Interlineado */
	color: #262626;
	/* Color de texto similar al de WhatsApp */
	letter-spacing: 0.5px;
	/* Espaciado entre letras */
	padding: 10px;
	/* Añadido algo de padding para darle espacio */
}

/*  */


.action-card {
    transition: all 0.3s ease;
    cursor: pointer;
    border: 1px solid #e0e0e0;
}
.action-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
    border-color: var(--bs-primary);
}
.action-card .icon-large {
    font-size: 3rem;
}


/* CARD PROFLE  */
.profile-card {
	border-radius: 50px;
	padding: 10px 10px;
	display: flex;
	align-items: center;
}

.profile-card__avatar {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	margin-right: 15px;
}

.profile-card__info {
	display: flex;
	flex-direction: column;
}

.profile-card__name {
	font-weight: bold;
	margin: 0;
}

.profile-card__title {
	color: #666;
	font-size: 0.9em;
	margin: 0;
}

.profile-card__follow-btn {
	background-color: #8a2be2;
	color: white;
	border: none;
	border-radius: 20px;
	padding: 8px 20px;
	margin-left: 20px;
	cursor: pointer;
	font-weight: bold;
}


/* HTML: <div class="loader"></div> */
.loader {
	transform: rotateZ(45deg);
	perspective: 1000px;
	border-radius: 50%;
	width: 25px;
	height: 25px;
	color: #e99f00;
	display: inline-block;
}

.loader:before,
.loader:after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: inherit;
	height: inherit;
	border-radius: 50%;
	transform: rotateX(70deg);
	animation: 1s spin linear infinite;
}

.loader:after {
	color: #FF3D00;
	transform: rotateY(70deg);
	animation-delay: .4s;
}

@keyframes rotate {
	0% {
		transform: translate(-50%, -50%) rotateZ(0deg);
	}

	100% {
		transform: translate(-50%, -50%) rotateZ(360deg);
	}
}

@keyframes rotateccw {
	0% {
		transform: translate(-50%, -50%) rotate(0deg);
	}

	100% {
		transform: translate(-50%, -50%) rotate(-360deg);
	}
}

@keyframes spin {

	0%,
	100% {
		box-shadow: .2em 0px 0 0px currentcolor;
	}

	12% {
		box-shadow: .2em .2em 0 0 currentcolor;
	}

	25% {
		box-shadow: 0 .2em 0 0px currentcolor;
	}

	37% {
		box-shadow: -.2em .2em 0 0 currentcolor;
	}

	50% {
		box-shadow: -.2em 0 0 0 currentcolor;
	}

	62% {
		box-shadow: -.2em -.2em 0 0 currentcolor;
	}

	75% {
		box-shadow: 0px -.2em 0 0 currentcolor;
	}

	87% {
		box-shadow: .2em -.2em 0 0 currentcolor;
	}
}

/*  */



/* GRUPOS */
.custom-select {
	border: 2px solid #e3e6f0;
	color: #858796;
	background-color: #e3e6f0;
	font-weight: bold
}

.custom-select:focus {
	border-color: #858796;
	box-shadow: 0 0 0 0.2rem rgba(114, 114, 114, 0.25);
}

.hover-shadow:hover {
	cursor: move;
	box-shadow: 0 0.5rem 1rem rgba(0, 70, 245, 0.15) !important;
	transition: box-shadow 0.3s ease-in-out;
}

.hover-expand {
	cursor: move;
	transition: all 0.3s ease;
}

.hover-expand:hover {
	background-color: #4e4f5a;
	cursor: move;
	transform: scale(1.05);
}





.contenedor-destino {
	height: 600px;
	overflow: hidden;
}




.highlight {
	border: 4px dashed #f6c23e;
	background-color: unset;

}

.char-cont {
	position: relative;
	margin: auto;
	height: 280px;
	max-height: 280px;
	width: 100%;
}

;


select optgroup label {
	color: rgb(49, 87, 194);
	font-weight: bold;
}

.campanita {
	animation: shake 0.5s infinite;
	color: rgb(231, 145, 145);
}

@keyframes shake {

	0%,
	100% {
		transform: translateX(0);
		/* Inicial y final: sin desplazamiento horizontal */
	}

	50% {
		transform: translateX(-3px);
		/* Mitad de la animación: desplazamiento hacia la izquierda */
	}
}



.overflow_s {
	height: 600px;
	overflow-y: scroll;
}


.asidebar_desktop {
	height: 100vh;
}

.bg-danger-a {
	background-color: #fbd6d9;
}


.bg-primary-a {
	background-color: #9ec5fe;
}

.bg-info-a {
	background-color: #cfe2ff;
}

.bg-success-a {
	background-color: #a3cfbb;
}

.bg-warning-a {
	background-color: #fecba1
}

.bg-secondary-a {
	background-color: #e9ecef;
}

.bg-black-a {
	background-color: #343a40;
}

.bg-yellow-a {
	background-color: #ffe69c;
}

.bg-purple-a {
	background-color: #c29ffa;
}

/*  */

/*  */

/* form de index */
@media (min-width: 768px) {
	.gradient-form {
		height: 90vh !important;
	}
}

/* tabla movil */
@media only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {

	table,
	thead,
	tbody,
	th,
	td,
	tr {
		display: block;
	}

	thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	tr {
		/* margin: 0 0 1rem 0;  */
		/* background-color: rgb(255, 255, 255); */
		font-size: medium;
		border-bottom: 20px solid rgba(0, 0, 0, 0.125);
	}

	/* vista movil de tabla de intalaciones */
	#tabla_instalaciones tr:nth-child(odd) {
		/* background: #ffffff; */
		font-size: medium;
		border-bottom: 20px solid rgba(0, 0, 0, 0.125);
	}

	#tabla_instalaciones td {
		border: none;
		border-bottom: 1px solid rgba(0, 0, 0, 0.125);
		position: relative;
		padding-left: 30%;
	}

	#tabla_instalaciones td:before {
		position: absolute;
		top: 0;
		left: 6px;
		width: 30%;
		padding-right: 10px;
		white-space: nowrap;
	}




	#tabla_instalaciones td:nth-of-type(1):before {
		content: "No.";
		font-weight: bold;
	}

	#tabla_instalaciones td:nth-of-type(2):before {
		content: "Servicio :";
		font-weight: bold;
	}

	#tabla_instalaciones td:nth-of-type(3):before {
		content: "Nombre :";
		font-weight: bold;
	}

	#tabla_instalaciones td:nth-of-type(4):before {
		content: "Ciudad :";
		font-weight: bold;
	}

	#tabla_instalaciones td:nth-of-type(5):before {
		content: "Telefono :";
		font-weight: bold;
	}

	#tabla_instalaciones td:nth-of-type(6):before {
		content: "Pago :";
		font-weight: bold;
	}

	#tabla_instalaciones td:nth-of-type(7):before {
		content: "Prioridad :";
		font-weight: bold;
	}

	#tabla_instalaciones td:nth-of-type(8):before {
		content: "Estado :";
		font-weight: bold;
	}

	#tabla_instalaciones td:nth-of-type(9):before {
		content: "Tecnicos :";
		font-weight: bold;
	}

	#tabla_instalaciones td:nth-of-type(10):before {
		content: "Acciones :";
		font-weight: bold;
	}

	#tabla_instalaciones td:nth-of-type(11):before {
		content: " ";
	}


	/* vista movil de tabla de empleados */
	#tabla_empleados tr:nth-child(odd) {
		/* background: #ffffff; */
		font-size: medium;
		border-bottom: 20px solid rgba(0, 0, 0, 0.125);
	}

	#tabla_empleados td {
		border: none;
		border-bottom: 1px solid rgba(0, 0, 0, 0.125);
		position: relative;
		padding-left: 30%;
	}

	#tabla_empleados td:before {
		position: absolute;
		top: 0;
		left: 6px;
		width: 30%;
		padding-right: 10px;
		white-space: nowrap;
	}

	#tabla_empleados td:nth-of-type(1):before {
		content: "ServicioID";
		font-weight: bold;

	}

	#tabla_empleados td:nth-of-type(2):before {
		content: "Nombre :";
		font-weight: bold;

	}

	#tabla_empleados td:nth-of-type(3):before {
		content: "Cargo :";
		font-weight: bold;
	}


	#tabla_empleados td:nth-of-type(4):before {
		content: "Estado :";
		font-weight: bold;
	}

	#tabla_empleados td:nth-of-type(5):before {
		content: "Instalaciones :";
		font-weight: bold;
	}

	#tabla_empleados td:nth-of-type(6):before {
		content: "Ventas :";
		font-weight: bold;
	}

	#tabla_empleados td:nth-of-type(7):before {
		content: "Tickets :";
		font-weight: bold;
	}


	#tabla_empleados td:nth-of-type(8):before {
		content: "Validaciones :";
		font-weight: bold;
	}


	#tabla_empleados td:nth-of-type(9):before {
		content: "Foto :";
		font-weight: bold;
	}

	#tabla_empleados td:nth-of-type(10):before {
		content: "Acciones :";
		font-weight: bold;
	}


	/* vista movil de tabla de tickets */
	#tabla_tickets tr:nth-child(odd) {
		/* background: #ffffff; */
		font-size: medium;
		border-bottom: 20px solid rgba(0, 0, 0, 0.125);

	}

	#tabla_tickets td {
		border: none;
		border-bottom: 1px solid rgba(0, 0, 0, 0.125);
		position: relative;
		padding-left: 30%;
	}

	#tabla_tickets td:before {
		position: absolute;
		top: 0;
		left: 6px;
		width: 30%;
		padding-right: 10px;
		white-space: nowrap;
	}


	#tabla_tickets td:nth-of-type(1):before {
		content: "Tickets :";
		font-weight: bold;
	}

	#tabla_tickets td:nth-of-type(2):before {
		content: "Servicios :";
		font-weight: bold;
	}

	#tabla_tickets td:nth-of-type(3):before {
		content: "Instalacion :";
		font-weight: bold;
	}

	#tabla_tickets td:nth-of-type(4):before {
		content: "Referencia :";
		font-weight: bold;
	}

	#tabla_tickets td:nth-of-type(5):before {
		content: "Telefono :";
		font-weight: bold;
	}

	#tabla_tickets td:nth-of-type(5):before {
		content: "Asunto :";
		font-weight: bold;
	}

	#tabla_tickets td:nth-of-type(6):before {
		content: "Solicitante :";
		font-weight: bold;
	}

	#tabla_tickets td:nth-of-type(7):before {
		content: "Prioridad :";
		font-weight: bold;
	}

	#tabla_tickets td:nth-of-type(8):before {
		content: "Estado :";
		font-weight: bold;
	}

	#tabla_tickets td:nth-of-type(9):before {
		content: "Tecnico :";
		font-weight: bold;
	}

	#tabla_tickets td:nth-of-type(10):before {
		content: "Acciones :";
		font-weight: bold;
	}

	#tabla_tickets td:nth-of-type(11):before {
		content: " ";
	}

	/* vista movil de tabla de tickets */




	/* vista movil de tabla de clientes */
	#tabla_clientes tr:nth-child(odd) {
		/* background: #ffffff; */
		font-size: medium;
		border-bottom: 20px solid rgba(0, 0, 0, 0.125);

	}

	#tabla_clientes td {
		border: none;
		border-bottom: 1px solid rgba(0, 0, 0, 0.125);
		position: relative;
		padding-left: 30%;
	}

	#tabla_clientes td:before {
		position: absolute;
		top: 0;
		left: 6px;
		width: 30%;
		padding-right: 10px;
		white-space: nowrap;
	}


	#tabla_clientes td:nth-of-type(1):before {
		content: "-";
		font-weight: bold;
	}



	#tabla_clientes td:nth-of-type(2):before {
		content: "Status :";
		font-weight: bold;
	}


	#tabla_clientes td:nth-of-type(3):before {
		content: "Servicio :";
		font-weight: bold;
	}

	#tabla_clientes td:nth-of-type(4):before {
		content: "ClienteID :";
		font-weight: bold;
	}


	#tabla_clientes td:nth-of-type(5):before {
		content: "ServicioID :";
		font-weight: bold;
	}

	#tabla_clientes td:nth-of-type(6):before {
		content: "Nombre :";
		font-weight: bold;
	}

	#tabla_clientes td:nth-of-type(7):before {
		content: "Telefono :";
		font-weight: bold;
	}

	#tabla_clientes td:nth-of-type(8):before {
		content: "Zona :";
		font-weight: bold;
	}

	#tabla_clientes td:nth-of-type(9):before {
		content: "SN :";
		font-weight: bold;
	}

	#tabla_clientes td:nth-of-type(10):before {
		content: "Plan :";
		font-weight: bold;
	}


	#tabla_clientes td:nth-of-type(11):before {
		content: "Autorizado:";
		font-weight: bold;
	}

	#tabla_clientes td:nth-of-type(12):before {
		content: "IP :";
		font-weight: bold;
	}

	#tabla_clientes td:nth-of-type(13):before {
		content: "TV :";
		font-weight: bold;
	}

	#tabla_clientes td:nth-of-type(14):before {
		content: "Senal :";
		font-weight: bold;
	}

	#tabla_clientes td:nth-of-type(15):before {
		content: "Niveles :";
		font-weight: bold;
	}

	#tabla_clientes td:nth-of-type(16):before {
		content: "Acciones";
		font-weight: bold;
	}

	/* vista movil de tabla de clientes */



	/* vista movil de tabla de vista de cliente */
	#tabla_vista_clientes tr:nth-child(odd) {
		font-size: medium;
		border-bottom: 20px solid rgba(0, 0, 0, 0.125);

	}

	#tabla_vista_clientes td {
		border: none;
		border-bottom: 1px solid rgba(0, 0, 0, 0.125);
		position: relative;
		padding-left: 30%;
	}

	#tabla_vista_clientes td:before {
		position: absolute;
		top: 0;
		left: 6px;
		width: 30%;
		padding-right: 10px;
		white-space: nowrap;
	}


	#tabla_vista_clientes td:nth-of-type(1):before {
		content: "Status :";
		font-weight: bold;
	}

	#tabla_vista_clientes td:nth-of-type(2):before {
		content: "IPv4 :";
		font-weight: bold;
	}

	#tabla_vista_clientes td:nth-of-type(3):before {
		content: "TV :";
		font-weight: bold;
	}


	#tabla_vista_clientes td:nth-of-type(4):before {
		content: "Autorizacion :";
		font-weight: bold;
	}

	#tabla_vista_clientes td:nth-of-type(5):before {
		content: "Senal :";
		font-weight: bold;
	}

	#tabla_vista_clientes td:nth-of-type(6):before {
		content: "Niveles :";
		font-weight: bold;
	}

	#tabla_vista_clientes td:nth-of-type(7):before {
		content: "Megas:";
		font-weight: bold;
	}

	#tabla_vista_clientes td:nth-of-type(8):before {
		content: "Dias Pagados:";
		font-weight: bold;
	}

	#tabla_vista_clientes td:nth-of-type(10):before {
		content: "Total:";
		font-weight: bold;
	}


	/* vista movil de tabla de vista cliente */




	/* vista movil de tabla de Autorizar sn */
	#Tablas_Autorizar_SN tr:nth-child(odd) {
		/* background: #ffffff; */
		font-size: medium;
		border-bottom: 20px solid rgba(0, 0, 0, 0.125);

	}

	#Tablas_Autorizar_SN td {
		border: none;
		border-bottom: 1px solid rgba(0, 0, 0, 0.125);
		position: relative;
		padding-left: 30%;
	}

	#Tablas_Autorizar_SN td:before {
		position: absolute;
		top: 0;
		left: 6px;
		width: 30%;
		padding-right: 10px;
		white-space: nowrap;
	}


	/* #Tablas_Autorizar_SN td:nth-of-type(1):before {
		content: "Descripcion:";
		font-weight: bold;
	} */

	#Tablas_Autorizar_SN td:nth-of-type(1):before {
		content: "Placa :";
		font-weight: bold;
	}

	#Tablas_Autorizar_SN td:nth-of-type(2):before {
		content: "Puerto :";
		font-weight: bold;
	}

	#Tablas_Autorizar_SN td:nth-of-type(3):before {
		content: "SN :";
		font-weight: bold;
	}

	#Tablas_Autorizar_SN td:nth-of-type(4):before {
		content: "Tipo :";
		font-weight: bold;
	}

	#Tablas_Autorizar_SN td:nth-of-type(5):before {
		content: "Accion :";
		font-weight: bold;
	}

	/* vista movil de tabla de Autorizar sn */



	/* vista movil de tabla de comentarios */
	#tabla_comentarios tr:nth-child(odd) {
		/* background: #ffffff; */
		font-size: medium;
		border-bottom: 20px solid rgba(0, 0, 0, 0.125);

	}

	#tabla_comentarios td {
		border: none;
		border-bottom: 1px solid rgba(0, 0, 0, 0.125);
		position: relative;
		padding-left: 30%;
	}

	#tabla_comentarios td:before {
		position: absolute;
		top: 0;
		left: 6px;
		width: 30%;
		padding-right: 10px;
		white-space: nowrap;
	}


	#tabla_comentarios td:nth-of-type(1):before {
		content: "No. :";
		font-weight: bold;
	}

	#tabla_comentarios td:nth-of-type(2):before {
		content: "Tecnico :";
		font-weight: bold;
	}

	#tabla_comentarios td:nth-of-type(3):before {
		content: "Cliente :";
		font-weight: bold;
	}

	#tabla_comentarios td:nth-of-type(4):before {
		content: "Area :";
		font-weight: bold;
	}

	#tabla_comentarios td:nth-of-type(5):before {
		content: "Mensaje :";
		font-weight: bold;
	}

	#tabla_comentarios td:nth-of-type(6):before {
		content: "Fecha :";
		font-weight: bold;
	}

	/* vista movil de tabla de comentarios*/







	/* tabla ed planes y pagos en dashbaord */
	/* vista movil de tabla de comentarios */
	#tabla_PlanesPagos tr:nth-child(odd) {
		/* background: #ffffff; */
		font-size: medium;
		border-bottom: 20px solid rgba(0, 0, 0, 0.125);

	}

	#tabla_PlanesPagos td {
		border: none;
		border-bottom: 1px solid rgba(0, 0, 0, 0.125);
		position: relative;
		padding-left: 30%;
	}

	#tabla_PlanesPagos td:before {
		position: absolute;
		top: 0;
		left: 6px;
		width: 30%;
		padding-right: 10px;
		white-space: nowrap;
	}


	#tabla_PlanesPagos td:nth-of-type(1):before {
		content: "Servicios :";
		font-weight: bold;
	}

	#tabla_PlanesPagos td:nth-of-type(2):before {
		content: "Cantidad :";
		font-weight: bold;
	}

	#tabla_PlanesPagos td:nth-of-type(3):before {
		content: "Precios  :";
		font-weight: bold;
	}

	#tabla_PlanesPagos td:nth-of-type(4):before {
		content: "Total Mensual :";
		font-weight: bold;
	}


	/* vista movil de tabla de comentarios*/



	/*  */
















	/* vista movil de tabla de facturas*/
	#tabla_facturas tr:nth-child(odd) {
		/* background: #ffffff; */
		font-size: medium;
		border-bottom: 20px solid rgba(0, 0, 0, 0.125);

	}

	#tabla_facturas td {
		border: none;
		border-bottom: 1px solid rgba(0, 0, 0, 0.125);
		position: relative;
		padding-left: 30%;
	}

	#tabla_facturas td:before {
		position: absolute;
		top: 0;
		left: 6px;
		width: 30%;
		padding-right: 10px;
		white-space: nowrap;
	}


	#tabla_facturas td:nth-of-type(1):before {
		content: "ServicioID :";
		font-weight: bold;
	}

	#tabla_facturas td:nth-of-type(2):before {
		content: "Servicio :";
		font-weight: bold;
	}

	#tabla_facturas td:nth-of-type(3):before {
		content: "NIT :";
		font-weight: bold;
	}

	#tabla_facturas td:nth-of-type(4):before {
		content: "Codigo :";
		font-weight: bold;
	}

	#tabla_facturas td:nth-of-type(5):before {
		content: "Cliente :";
		font-weight: bold;
	}


	#tabla_facturas td:nth-of-type(6):before {
		content: "Periodo:";
		font-weight: bold;
		font-size: 12px;
	}


	#tabla_facturas td:nth-of-type(7):before {
		content: "Dias :";
		font-weight: bold;
	}

	#tabla_facturas td:nth-of-type(8):before {
		content: "Total :";
		font-weight: bold;
	}

	#tabla_facturas td:nth-of-type(9):before {
		content: "No. Autorizacion :";
		font-weight: bold;
		font-size: 12px;
	}


	#tabla_facturas td:nth-of-type(10):before {
		content: "No. Serie :";
		font-weight: bold;
	}

	#tabla_facturas td:nth-of-type(11):before {
		content: "F. Emision :";
		font-weight: bold;
	}

	#tabla_facturas td:nth-of-type(12):before {
		content: "Operador :";
		font-weight: bold;
	}

	#tabla_facturas td:nth-of-type(13):before {
		content: "Acciones :";
		font-weight: bold;
	}

	/* vista movil de tabla de facturas*/





	/* Vista móvil para tabla de Pagos Online */
	#tabla_facturas_online tr:nth-child(odd) {
		font-size: medium;
		border-bottom: 20px solid rgba(0, 0, 0, 0.125);
	}

	#tabla_facturas_online td {
		border: none;
		border-bottom: 1px solid rgba(0, 0, 0, 0.125);
		position: relative;
		padding-left: 30%;
	}

	#tabla_facturas_online td:before {
		position: absolute;
		top: 0;
		left: 6px;
		width: 30%;
		padding-right: 10px;
		white-space: nowrap;
		font-weight: bold;
		font-size: 12px;
	}

	/* Etiquetas para cada columna */
	#tabla_facturas_online td:nth-of-type(1):before {
		content: "Fecha :";
	}

	#tabla_facturas_online td:nth-of-type(2):before {
		content: "Cliente :";
	}

	#tabla_facturas_online td:nth-of-type(3):before {
		content: "Servicio :";
	}

	#tabla_facturas_online td:nth-of-type(4):before {
		content: "Moneda :";
	}

	#tabla_facturas_online td:nth-of-type(5):before {
		content: "Monto :";
	}

	#tabla_facturas_online td:nth-of-type(6):before {
		content: "Método :";
	}

	#tabla_facturas_online td:nth-of-type(7):before {
		content: "Estado :";
	}

	#tabla_facturas_online td:nth-of-type(8):before {
		content: "Emisor :";
	}

	#tabla_facturas_online td:nth-of-type(9):before {
		content: "No.Tarjeta :";
	}

	#tabla_facturas_online td:nth-of-type(10):before {
		content: "Banco :";
	}

	#tabla_facturas_online td:nth-of-type(11):before {
		content: "Voucher de pago :";
	}






	/* Vista móvil para tabla de Planes de Pago */

	#tabla_planes_pagos thead {
		display: none;
	}

	#tabla_planes_pagos tr {
		display: block;
		margin-bottom: 1rem;
		border-bottom: 10px solid rgba(0, 0, 0, 0.125);
	}

	#tabla_planes_pagos td {
		display: block;
		width: 100%;
		border: none;
		border-bottom: 1px solid rgba(0, 0, 0, 0.125);
		position: relative;
		padding-left: 40%;
		font-size: 14px;
	}

	#tabla_planes_pagos td:before {
		content: attr(data-label);
		position: absolute;
		top: 0;
		left: 10px;
		width: 35%;
		padding-right: 10px;
		white-space: nowrap;
		font-weight: bold;
		font-size: 12px;
		color: #6c757d;
	}

	#tabla_planes_pagos tfoot {
		display: block;
		width: 100%;
	}

	#tabla_planes_pagos tfoot tr {
		display: block;
		width: 100%;
		margin-top: 1rem;
	}

	#tabla_planes_pagos tfoot td {
		display: block;
		width: 100%;
		text-align: right;
		padding: 0.5rem 1rem;
		font-weight: bold;
		font-size: 15px;
		color: #198754;
		position: relative;
		padding-left: 40%;
	}

	#tabla_planes_pagos tfoot td:before {
		position: absolute;
		left: 10px;
		font-weight: bold;
		color: #198754;
	}

	/*  */





	/*  */
	/* .table.table-sm.table-hover tbody tr {
      display: block;
      margin-bottom: 0.75rem;
      border: 1px solid #dee2e6;
      border-radius: 0.25rem;
      padding: 0.5rem;
      background-color: #fff;
   }

   .table.table-sm.table-hover tbody td {
      display: block;
      width: 100%;
      border: none;
      padding: 0.25rem 0.5rem 0.25rem 40%;
      font-size: 13px;
      position: relative;
   }

   .table.table-sm.table-hover tbody td:before {
      position: absolute;
      top: 0;
      left: 0.5rem;
      width: 35%;
      font-weight: 600;
      font-size: 11px;
      color: #6c757d;
      white-space: nowrap;
   }

   /* Etiquetas por columna */
	/* .table.table-sm.table-hover tbody td:nth-of-type(1):before {
      content: "Estado:";
   }

   .table.table-sm.table-hover tbody td:nth-of-type(2):before {
      content: "Total:"; */







	/* vista movil de tabla de facturas cliente*/
	#tabla_facturas_cliente tr:nth-child(odd) {
		/* background: #ffffff; */
		font-size: medium;
		border-bottom: 20px solid rgba(0, 0, 0, 0.125);

	}

	#tabla_facturas_cliente td {
		border: none;
		border-bottom: 1px solid rgba(0, 0, 0, 0.125);
		position: relative;
		padding-left: 30%;
	}

	#tabla_facturas_cliente td:before {
		position: absolute;
		top: 0;
		left: 6px;
		width: 30%;
		padding-right: 10px;
		white-space: nowrap;
	}


	/* #tabla_facturas_cliente td:nth-of-type(1):before {
		content: "No. :";
		font-weight: bold;
	} */

	#tabla_facturas_cliente td:nth-of-type(1):before {
		content: "F.Ultimo Pago :";
		font-weight: bold;
		font-size: 12px;
	}


	#tabla_facturas_cliente td:nth-of-type(2):before {
		content: "Dias :";
		font-weight: bold;
	}

	#tabla_facturas_cliente td:nth-of-type(3):before {
		content: "Total :";
		font-weight: bold;
	}

	#tabla_facturas_cliente td:nth-of-type(4):before {
		content: "Forma de Pago :";
		font-weight: bold;
		font-size: 12px;
	}


	#tabla_facturas_cliente td:nth-of-type(5):before {
		content: "No.Factura :";
		font-weight: bold;
	}

	/* #tabla_facturas_cliente td:nth-of-type(7):before {
		content: "F.Emitida :";
		font-weight: bold;
	} */

	#tabla_facturas_cliente td:nth-of-type(6):before {
		content: "Operador :";
		font-weight: bold;
	}

	#tabla_facturas_cliente td:nth-of-type(7):before {
		content: "Acciones :";
		font-weight: bold;
	}

	/* vista movil de tabla de facturas cliente*/

}

/*fin..*/




/* estilos input file */
.custom-file {
	display: none;
}

.custom-file-upload {
	border: 1px solid #d1d3e2;
	display: inline-block;
	cursor: pointer;
	font-weight: bold;
	border-radius: 5px;
	padding: 5px
}

.custom-file-upload:hover {
	border: 1px solid #d1d3e2;
	display: inline-block;
	cursor: pointer;
	color: rgb(46, 46, 45);
	font-weight: bold;
	background-color: #d1d3e2;
}

/*fin..*/



/* Estilo para escritorio */
@media (min-width: 768px) {
	.col-limited {
		width: 400px;
		/* Ancho fijo */
		max-width: 400px;
		/* Máximo espacio */
		white-space: normal;
		/* Permite el salto de línea */
		overflow-wrap: break-word;
		/* Ajusta texto largo */
	}

	.col-limited-2 {
		width: 180px;
		/* Ancho fijo */
		max-width: 180px;
		/* Máximo espacio */
		white-space: normal;
		/* Permite el salto de línea */
		overflow-wrap: break-word;
		/* Ajusta texto largo */
	}

	.col-limited_2 .col-limited {
		max-width: none;
		/* Sin limitaciones */
		width: auto;
		/* Usa el ancho natural del texto */
		white-space: normal;
		/* Ajuste automático del texto */
	}
}

.card-body.clickable {
	cursor: pointer;
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.card-body.clickable:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
	transform: translateY(-2px);
	/* efecto de levantar */
}