@charset "UTF-8";

html {
  font-size: 100%;
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
}

body {
  padding: 0px;
	text-align: center;
  font-weight: normal;
  font-family: Verdana;
  font-variant: normal;
  font-style: normal;
  color: #444;
  text-shadow: 0px 0px 3px #555;
  border: none;
  width: 100%;
  zoom: 1.4;
}

.pubfont {
  font-size: 110% !important;
}

.marco_externo {
  width: 100%;
}

.marco_interno {
  width: 100%;
}


.etiqueta_vacia,
.etiqueta,
.etiqueta_obligatoria {
  width: 50% !important;
}

.etiqueta_vacia_admin,
.etiqueta_admin,
.etiqueta_obligatoria_admin {
  width: 20% !important;
}

.dato {
  width: 50% !important;
}

.etiqueta_obligatoria {
  border: 1px solid gray;
  border-right: 1px solid red;
  background-color: rgb(255, 240, 240);
}

.etiqueta_obligatoria_admin {
  border: 1px solid gray;
  border-right: 1px solid red;
  background-color: rgb(255, 240, 240);
}


.etiqueta_obligatorio {
  border: 1px solid #bbb;
  border-right: 2px solid red;
  font-weight: normal;
  line-height: 12pt;
  color: black;
  background: #ddd;
  text-align: left;
}

.etiqueta {
  border: 1px solid #bbb;
  font-weight: normal;
  line-height: 12pt;
  color: black;
  background: #ddd;
  width: 200px;
  text-align: left;
}

.etiqueta_admin {
  border: 1px solid #bbb;
  font-weight: normal;
  line-height: 12pt;
  color: black;
  background: #ddd;
  text-align: left;
}

table.marco_externo {
  border: 0px;
  padding: 0px;
  margin: 0px;
}

table.marco_interno {
  left: 0%;
  right: 0%;
  width: 100%;
  border: 0px;
}

select {
  overflow-x: auto;
}

input,
select,
textarea {
}

input[type="button"] {
  border-radius: 10px;
	background-color: #f2f2f2;
  border: 1px solid #e1e1e1;
	margin-right: 10px;
  cursor: pointer;
}

input[type="checkbox"] {
  width: initial !important;
}

.div_botones {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

form {
  width: 99% !important;
}

.div_contenedor_opciones {
  height: 384px !important;
	overflow-x: auto;
	overflow-y: auto;
	/* background: #e2e2e2; */
	padding: 10px;
	box-sizing: border-box;
	box-shadow: 0px 0px 8px 0px inset black;
	border-radius: 10px;
  margin-bottom: 5px;
}

.div_opcion {
  background: linear-gradient(0deg, #3f538c, #5e66bb, #b8c3d8);
  color: white;
}

.div_opcion,
.div_opcion_selected {
  border: 1px solid #f1f1f1;
  width: 100%;
  margin-bottom: 3px;
  border-radius: 10px;
  cursor: pointer;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 8px;
  padding-right: 8px;
  box-sizing: border-box;
	/* background: #e6e6e6; */
	/* color: black; */
}

.div_contenedor_cuentas {
	height: 50% !important;
	overflow-x: auto;
	overflow-y: auto;
	/* background: #e2e2e2; */
	padding: 10px;
	box-sizing: border-box;
	box-shadow: 0px 0px 8px 0px inset black;
	border-radius: 10px;
  font-size: 82%;
  padding-bottom: 3px;
  padding-left: 8px;
}

.div_contenedor_cuenta {
  display: flex;
  justify-content: start;
  border: 1px solid #d6d6d6;
  background: #f1f1f1;
  border-radius: 10px;
  padding: 8px;
  align-items: center;
}

.div_cuenta,
.div_cuenta_selected,.div_cuenta_detalle,.div_cuenta_estado {
  border: 1px solid #f1f1f1;
  border-radius: 10px;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 8px;
  padding-right: 8px;
  box-sizing: border-box;
  background: #e6e6e6;
  color: black;
  margin-left: 5px;
  margin-right: 5px;
}

.div_compra {
  border-radius: 10px;
  background-color: #9bffcc;
  color: black;
  height: 47px;
  padding-left: 8px;
  padding-right: 8px;
  padding-top: 8px;
  padding-bottom: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 10px;
}

.div_contenedor_cuenta_selected {
  display: flex;
  justify-content: start;
  border: 1px solid #d6d6d6;
  background: rgb(117, 159, 236);
  border-radius: 10px;
  padding-top: 3px;
}

.div_cuenta_selected {
  background: linear-gradient(0deg, #6f67ff, #b3caff, #ffffff);
  color: black;
  box-sizing: border-box;
  border: 2px solid black;
  font-weight: bold;
}

.div_opcion_selected {
  /* background: #343434; */
  background: linear-gradient(0deg, #90c7ff, #001a98, #6648a0);
  color: white;
  box-sizing: border-box;
}

/*
#div_formulario {
  display: none;
  position: fixed;
  top: 114px;
  left: 5%;
  background: #e6e6e6;
  width: 92%;
  border: 1px solid #c4c4c4;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 10px;
  box-shadow: 0px 0px 33px -2px black;
  height: 75%;
  overflow-y: hidden;
}
*/

#div_formulario {
  display: none;
  position: relative;
  top: -560px;
  background: #ffffff;
  border: 1px solid #c4c4c4;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 10px;
  box-shadow: 0px 0px 33px -2px black;
  margin-top: 10px;
}

.btn-cerrar {
  border: none;
  background: none;
  font-size: 20px;
  cursor: pointer;
  padding: 5px 10px;
  border: 2px solid black;
}
.btn-cerrar:hover {
  color: red;
}

#div_contenedor_formulario_y_vencimientos {
  /* display: flex; */
  /* justify-content: space-evenly; */
  width: 100%;
  /* height: 74%; */
  overflow-y: auto;
  border-radius: 20px;
  box-sizing: border-box;
  flex-direction: column;
}

#div_contenedor_campos_formulario {
  /* width: 50%; */
  /* height: 100%; */
  overflow-y: auto;
}


a {
  font-weight: normal;
  font-family: arial;
  font-variant: normal;
  font-style: normal;
  font-size: 1em;
}

a.menu {
  font-weight: bold;
  font-family: arial;
  font-variant: normal;
  font-style: normal;
  text-decoration: none;
}

a.menu:hover {
  text-decoration: underline;
}

table {
  font-weight: normal;
  font-variant: normal;
  font-style: normal;
  color: #444;
  text-shadow: 0px 0px 3px #555;
  margin-bottom: 10px;
  border: none;
}


table {
  width: 100%;
}

table.menu {
  width: 100%;
  border: 0px;
}

table.queue {
  color: rgb(100, 100, 110);
  background: rgb(255, 255, 255);
}

table.reporte {
  color: rgb(100, 100, 110);
  background: rgb(255, 255, 255);
  padding: 5px;
}

table.login {
  width: 200px;
}

th.formulario {
  background: gray;
  color: white;
  text-align: left;
  width: 33%;
}

th.etiqueta_obligatorio {
  width: 33%;
}

th.queue {
  background: gray;
  color: white;
  text-align: center;
}

td {
  padding: 5px;
  margin: 0px;
  border-radius: 10px;
}

td.dato_obligatorio {
  border: 1px dotted red;
  background: transparent;
  text-align: left;
  display: table-cell;
  vertical-align: inherit;
}

td.dato_opcional {
  border: none;
  background: transparent;
  text-align: left;
  display: table-cell;
  vertical-align: inherit;
}

td.login {
  width: 100%;
  height: 100%;
  text-align: center;
  vertical-align: middle;
  border: 0px;
  /* 	background: transparent url(../imagenes/babelarum_logo.png) no-repeat scroll center 0px; */
}

td.logo {
  width: 50%;
  height: 100%;
  text-align: left;
  vertical-align: middle;
  border: 0px;
  /*
	background: transparent url(../imagenes/babelarum_logo.png) no-repeat scroll center 0px;
	*/
}

td.queue {
  border: 1px solid #ccc;
}

th.reporte {
  border: 1px solid #cccccc;
  background: gray;
  color: white;
}

td.reporte {
  border: 1px solid #cccccc;
}

td.marco_interno {
  border: 0px solid #cccccc;
  text-align: left;
}

td.normal {
  border: 1px solid #cccccc;
}

td.menu_horizontal {
  border: 1px solid #ccc;
  text-align: center;
  background: #ddd;
}

td.menu_vertical {
  border: 1px solid #ccc;
  text-align: left;
  background: #ddd;
}

td.reporte {
  border: 1px solid #ccc;
  background: white;
}

td.sinborde {
  border-style: hidden;
	text-align: left;
}

td.etiqueta {
  font-weight: normal;
  line-height: 12pt;
  color: black;
  background: #ddd;
  border: 1px solid #bbb;
  width: 33%;
}

td.etiqueta_vacia {
  font-weight: normal;
  font-size: 10pt;
  line-height: 12pt;
  color: black;
  background: #fff;
  border: 0px;
}

p {
  position: relative;
  padding: 2px;
  font-size: 1em;
  height: fit-content;
  border-radius: 10px;
}

p.parrafo {
  color: black;
  background: #ccc;
  box-shadow: 1px 1px 1px #000;
}

p.nota,
p.no-imprimir {
  color: black;
  background: #ccc;
}

p.alerta {
  color: white;
  background: #844;
  font-weight: bold;
  font-size: 16pt;
  line-height: 18pt;
  font-family: Arial;
  font-style: italic;
  border: 1px solid red;
}

p.introduccion {
  font-weight: normal;
  font-size: 12pt;
  line-height: 16pt;
  font-family: Arial;
  font-variant: normal;
  font-style: normal;
  color: #888888;
  text-align: justify;
}

p.conclusion {
  font-weight: normal;
  font-size: 12pt;
  line-height: 16pt;
  font-family: Arial;
  font-variant: normal;
  font-style: normal;
  color: #888888;
  text-align: justify;
}

p.titulo_ilustracion {
  font-weight: normal;
  font-size: 14pt;
  line-height: 18pt;
  font-family: Arial;
  font-variant: normal;
  font-style: normal;
  color: #888888;
}

p.descripcion_ilustracion {
  font-weight: normal;
  font-size: 12pt;
  line-height: 16pt;
  font-family: Arial;
  font-variant: normal;
  font-style: normal;
  color: #888888;
}

p.normal {
  color: gray;
  position: relative;
}

p.error {
  color: black;
  background: #ffaaaa;
}

p.advertencia {
  color: black;
  background: #f8faa8;
}

p.confirmacion {
  color: black;
	background: #9de89d;
}

input[type="text"],
input[type="password"],
textarea,
select {
  /* background: linear-gradient(0deg, #ddd, white, #ddd); */
  color: black;
}

input[type="button"],
input[type="submit"] {
  width: fit-content;
  /*background: linear-gradient(0deg, #af5c49, #ffffff, #004988);*/
  border-radius: 10px;
  padding: 8px;
	font-family: Sans;
  cursor: pointer;
}

input,
select,
textarea {
  color: #424141 !important;
  border: 1px solid #ccc;
  border-radius: 10px;
  text-shadow: 0px 0px 2px #595959;
  width: 100%;
  font-size: inherit;
  background-color: white;
  font-family: monospace;
}

input.button {
  color: #333333;
  padding: 6px;
  border: 1px solid #ccc;
  box-shadow: 3px 3px 6px #aaa;
  height: 40px;
}

input.button:hover {
  border: 1px solid #006699;
  background-color: #d2e9ff;
  color: #006699;
  box-shadow: 3px 3px 6px #aaa;
}

input.button:active {
  border: 1px solid #006699;
  color: #006699;
  background-color: green;
  box-shadow: 1px 1px 2px #000;
}

input.obligatorio {
  /* border-color: red; */
}

input.optional {
  border-color: green;
}

form {
  width: 100%;
}

.form_boton_wompi {
  width: 182px !important;
  padding-bottom: 0px;
  margin-bottom: 0px;
}

form.enmarcado {
  border: 2px solid #ccc;
}


.footer {
  margin-top: 20px;
  width: 100%;
  text-align: center;
}

.inline {
  display: inline;
}

@media print {
  /* Ocultar el botón de imprimir en la versión impresa */
  .btn-print,
  .menu,
  .no-imprimir {
    display: none;
  }

  /* Ajustar estilos generales para impresión */
  .resultado_pago {
    /* Estilos específicos para impresión */
  }
}


.marco_externo {
	text-align: left;
}

form {
	text-align: left;
}


table {
	font-size: 100%;
}

.span_fila {
  padding: 20px;
  display: inline;
  color: white;
  border-radius: 10px;
  font-weight: bold;
  height: 17px;
}

.comprado {
  background-color: #e6e6e6;
  color: green;
}

.gratis {
  background-color: turquoise;
}


.div_flex_end {
  display: flex;
  justify-content: end;
  width: 100%;
}

.div_flex_start {
  display: flex;
  justify-content: start;
  width: 100%;
}

.gap3 {
  column-gap: 3px;
}

.height21 {
  height: 21px !important;
}

.height25 {
  height: 25px !important;
}

.padding0 {
  padding: 0px !important;
}

.fifty {
  width: 50%;
}

.div_vehiculo {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 5px;
  width: 98%;
}

.span_vehiculo {

}

.display_none {
  display: none !important;
}

.display_block {
  display: block !important;
}

.top0 {
  top: 0px !important;
}

.noborder {
  border: none !important;
}

.noboxshadow {
  box-shadow: none !important;
}

.div_contenedor_vehiculos {
  width: 100%;
  border: 1px solid #f1f1f1;
  padding: 3px;
  box-sizing: border-box;
  height: 173px;
  margin-top: 8px;
  border-radius: 10px 0px 0px 10px;
  background-color: aliceblue;
  overflow-y: auto;
}

.div_contenedor_tiposdeobligacion, .div_contenedor_obligaciones {
  width: 100%;
  border: 1px solid #f1f1f1;
  padding: 3px;
  box-sizing: border-box;
  height: 650px;
  margin-top: 8px;
  border-radius: 10px 0px 0px 10px;
  background-color: aliceblue;
  overflow-y: auto;
}

.div_tipoobligacion_admin, .div_obligacion_admin {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: start;
}

.div_contenedor_tiposobligacion {

}

.div_titulo_tiposobligacion {

}

#div_tiposobligacion {
  overflow-y: auto;
  position: relative;
  background-color: #f3f3f3;
  padding: 5px;
  box-sizing: border-box;
  border: 1px solid #e3e3e3;
  border-radius: 10px 0px 0px 10px;
  color: black;
  /* display: flex;
  flex-wrap: wrap; */
}

.div_tipoobligacion, .div_obligacion {
  flex: 1 1 calc(50% - 20px);
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
}

.w30 {
  width: 30px !important;
}

.w50 {
  width: 50px !important;
}

.alignright {
  text-align: right !important;
}

.span_confirmacion {
  color: green;
  font-weight: bold;
  padding: 0px;
}

.span_fecha {
  width: 100px;
}

.div_contenedor_filtros {
}

.resaltado {
  background-color: deepskyblue;
}

.div_sugerencias_municipios, .div_sugerencias_tipoobligacion {
  position: relative;
  background: #cdacd2;
  border: 1px solid #ddd;
  max-height: 200px;
  overflow-y: auto;
  z-index: 1000;
  width: fit-content;
  float: inline-start;
  top: -4px;
  max-width: 1000px;
  flex-direction: column;
  display: none;
}

.city-suggestion {
  height: 25px;
  cursor: pointer;
  padding: 5px;
}

.city-suggestion:hover {
  background-color: #f0f0f0;
}

.no-suggestions {
  padding: 5px;
  color: #666;
}

.error {
  padding: 5px;
  color: red;
}

input::placeholder {
  color: #818181;
  font-style: italic;
}

.flexcolumn {
  display: flex;
  flex-direction: column;
  justify-content: start;
}

.tipo-suggestion {
  padding: 5px;
  cursor: pointer;
}

.tipo-suggestion:hover {
  background-color: #f0f0f0;
}

.nowidth {
  width: unset !important;
}

.w1000 {
  width: 1000px !important;
}

.minwidth150 {
  min-width: 150px !important;
}

.w100percent {
  width: 100% !important;
}

.minwidth200 {
  min-width: 200px !important;
}

.minwidth400 {
  min-width: 400px !important;
}

.minwidth500 {
  min-width: 500px !important;
}

.minwidth600 {
  min-width: 600px !important;
}

.minwidth800 {
  min-width: 800px !important;
}

.minwidth900 {
  min-width: 900px !important;
}

.fs90percent {
  font-size: 90% !important;
}

.div_contenedor_intro_login_testimonios {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  gap: 20px;
}
@media screen and (max-width: 768px) {
  .div_contenedor_intro_login_testimonios {
    flex-direction: column;
  }
}

.div_contenedor_intro_login {
  width: 50%;
}
@media screen and (max-width: 768px) {
  .div_contenedor_intro_login {
    width: unset;
  }
}

.div_testimonios {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  width: 50%;
}
@media screen and (max-width: 768px) {
  .div_testimonios {
    width: unset;
  }
}

.div_testimonio {
  font-style: italic;
  border-left: 4px solid #007BFF;
  padding-left: 10px;
  margin-bottom: 10px;
  font-size: 0.8em;
}
@media screen and (max-width: 768px) {
  .div_testimonios {
    width: unset;
  }
}


.div_intro {
  font-style: italic;
  text-align: center;
  border: 1px solid #f1f1f1;
  border-radius: 20px;
  background-color: #e3e3e3;
  padding: 5px;
  font-size: 0.8em;
}

.etiqueta_registro {
  border: 1px solid #bbb;
  font-weight: normal;
  line-height: 12pt;
  color: black;
  background: #ddd;
  text-align: left;
  display: flex;
  width: 100%;
  align-items: center;
  font-size: 1.0em;
  border-radius: 20px;
  padding: 10px;
  box-sizing: border-box;
}

.div_login {
  gap: 5px;
  display: flex;
}



.bregistrarse {
  background-color: #007BFF !important;
  color: white !important;
  font-weight: bold;
}

.fb-share-button {
  display: inline-block;
  background-color: #E0E8F2;
  color: white;
  padding: 12px 18px;
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.fb-share-button:hover {
  background-color: #1255a2;
  transform: scale(1.1);
}

.div_compartir {
  display: flex;
  justify-content: center;
  gap: 20px;
  width: 100%;
}
@media screen and (max-width: 768px) {
  .div_compartir {
    flex-direction: column !important;
  }
}


.ig-button {
  display: flex;
  align-items: center;
  background-color: #E1306C;
  color: white;
  padding: 12px 18px;
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.3s ease;
  gap: 10px; /* Espacio entre el icono y el texto */
}

.ig-button:hover {
  background-color: #C13584;
  transform: scale(1.1);
}

.ig-icon {
  width: 24px;
  height: 24px;
}