/* Es el estilo para las cabeceras de campos (del panel y de la tabla de pendientes)*/
.ui-panel-title, .ui-datatable-header.ui-widget-header.ui-corner-top{
    /*margin-bottom:10px; 
    overflow: hidden;*/
    font-size: 16px;
    /*font-style: italic;
    font-weight: normal;*/
}

.elementosNormales {
    font-size: 12px;
}

/* Corrige el texto de los botones hacia el centro*/
span.ui-button-text.ui-c {
    padding: .4em;
}

/* Le da formato al texto del index.html */
.descripcionBienvenida{
    text-align: center;
    margin-right: 7%;
    margin-left: 7%;
    line-height: 100px;
    margin-bottom: 90px;
    max-width: 900px;
    margin: auto;
}

/* Habilita el scroll a la tabla de pendientes*/
.ui-datatable-tablewrapper{
    overflow: scroll;
}

/* Manipula el texto dentro del dialogo (como el de ¿desea pagar?) */
.ui-dialog .ui-dialog-content{
    margin-top: 10px;
}

/* Da el comportamiento a los campos de la tabla si el tamaño es normal */
.dinamicWidthCampoTabla {
    float: left;
}

/* Da el comportamiento a los campos del correo si el tamaño es normal */
.dinamicWidthCampoCorreo {
    width: 500px;
}

/* Cambia el comportamiento a los campos de la tabla y del correo si el width es menor
   o igual a 800px. Lo pone en 100% para que así sea responsive con el tamaño de la pantalla */
@media all and (max-width: 800px) {
	.dinamicWidthCampoTabla, .dinamicWidthCampoCorreo {
		width: 100%;
	}
}

/* Cambia el comportamiento a los combobox cuando el tamaño sea menor o igual a 800px.
   Lo pone en 100% para que así sea responsive con el tamaño de la pantalla 
@media all and (max-width: 800px) {
	.ui-selectonemenu, .ui-selectonemenu-label{
		width: 100% !important;
	}
}*/

/* Modifica el comportamiento del selector de opción del combobox en tamaño regular.
.ui-selectonemenu-panel, .ui-helper-hidden{
    
}*/

/* Cambia el comportamiento del selector de opción del combobox cuando el width sea menor a 800px.
   Lo que hace es colocarlo a la izquierda y expandirlo al 100%, para evitar que se salga hacia
   la izquierda.
@media all and (max-width: 800px) {
	.ui-selectonemenu-panel, .ui-helper-hidden{
                left: 0px !important;
		width: 100% !important;
	}
}*/

/* Centra y acomoda los logos de Visa y MasterCard*/
.tablaLogos{
    margin: auto;
    margin-top: 10px;
    margin-bottom: 10px;
}

.elementoTexto {
    font-size: 14px;
}

/* ------------------------- ChepeResponsive ver2 ----------------------- */

/** {
    box-sizing: border-box;
}*/

.colc-border-din {
    width: 15%;
}

.colc--container {
    width: 70%;
    font-size: 14px;
}

.colc--text {
    width: 20%;
}

.textoInterior {
    float: right;
    color: black;
}

.colc--content {
    width: 80%;
    margin-bottom: 4px;
}

.datoInterior {
    float: left;
   color:black;font-weight: bold;
}

[class*="colc-"] {
    float: left;
    padding: 5px;
    box-sizing: border-box;
}

.rowc::after {
  content: "";
  clear: both;
  display: table;
}

@media only screen and (max-width: 768px) {
  /* Para teléfonos: */
  [class*="colc-b"] {
    width: 1%;
  }
  [class*="colc--"] {
    width: 100%;
  }
  [class*="textoInterior"] {
    float: none;
  }
  [class*="datoInterior"] {
    float: none;
  }
  /* Modifica el selector de opciones del selectOneMenu */
  .ui-selectonemenu-panel.ui-widget-content.ui-corner-all.ui-helper-hidden.ui-shadow {
      left: 34px !important;
      width: 84% !important;
  }
}

/* Cambia el tamaño del texto al selector de opciones del combobox*/
.ui-selectonemenu-item.ui-selectonemenu-list-item.ui-corner-all {
    font-size: 12px;
}
/* Nota, el tamaño del texto de la opcion seleccionada del combobox se cambia 
   en el xhtml, porque si no el cambio no se aplicaba
*/

/* El estilo que usan los botones de Consultar y Pagar 
   Sin embargo, no se usa esta definición, sino que se le agrega directamente al 
   style del botón, porque si no el span interno no cambia*/
.estiloBotones {
    width: 100px; 
    font-size: 14px; 
    font-weight: bold;
}

/* Modifica los nombres de las columnas de la tabla */
.ui-state-default.columnas {
    font-size: 14px;
}

/* Modifica el mensaje que muestra la tabla cuando está vacía */
.ui-widget-content.ui-datatable-empty-message {
    font-size: 14px;
}

/* Modifica el número de cantidad de elementos por página en la tabla */
.ui-paginator-rpp-options.ui-widget.ui-state-default.ui-corner-left {
    font-size: 14px;
}

/* Modifica el comportamiento del tamaño del selectOneMenu */
.ui-selectonemenu-label.ui-inputfield.ui-corner-all {
	width: 100% !important;
}
.ui-selectonemenu-trigger.ui-state-default.ui-corner-right {

}
.ui-selectonemenu.ui-widget.ui-state-default.ui-corner-all.ui-helper-clearfix.datoInterior {
    width: 100% !important;
}

/* Cambios sugeridos por la municipalidad */
.ui-selectonemenu-panel .ui-selectonemenu-list-item {
    white-space: normal !important;
}
h3 {
    text-transform: unset;
}
div#consulForm:convenios {
    display: grid;
}
h1 {
    padding-bottom: 20px;
    font-family: Arvo, sans-serif;
    font-size: 32px;
    font-weight: normal;
    color: #6f6f6f;
    text-transform: initial !important;
}

/* Modifica los elementos de la tabla de pendientes */
.ui-datatable-data.ui-widget-content {
    font-size: 14px;
}
/* Considere reducir el tamaño de los textos de confirmación */
/* form1:elementos class:elementos */

.elementos {
    font-size: 14px;
}

/* Codigo para el icono del boton*/
.ui-button-icon-left.ui-icon.ui-c.icn-print {
    
}

.ui-dialog-content.ui-widget-content {
    font-size: 14px;
}

@media only screen and (min-width: 800px) {
  /* Para pantallas grandes: */
  .colc--text {
      width: 15%;
  }
  .colc--content {
      width: 85%;
  }
}

@media only screen and (min-width: 1400px) {
  /* Para pantallas grandes: */
  .colc--text {
      width: 10%;
  }
  .colc--content {
      width: 90%;
  }
}

@media only screen and (min-width: 1800px) {
  /* Para pantallas grandes: */
  .colc--text {
      width: 7%;
  }
  .colc--content {
      width: 93%;
  }
}