/* Estilos para version movil */
@media (max-width: 640px) {

	/* Quito el borde de separacion entre las filas del panelgrid */
	.ui-panelgrid .ui-grid-responsive .ui-grid-row {
		border-top: 0 none;
	}
	.onlyWeb {
		display: none;
	}

	/* Ajustada la visualizacion de la fila extendida en las tablas */
	.ui-datatable .ui-expanded-row-content {
		display: block;
	}

	/* Estilo para los campos dentro de tablas */
	.ui-datatable td .ui-inputfield {
		width: 65%;
	}
	.ui-datatable .ui-editable-column .ui-cell-editor {
		display: inline-block;
		width: 64%;
	}
	.ui-datatable .ui-editable-column .ui-cell-editor .ui-inputfield {
		width: 100%;
	}
	
	/* Estilo para las tablas con campos en las celdas */
	.ui-datatable-with-fields td {
		text-overflow: clip !important;
	}
	.ui-datatable-with-fields td .ui-selectonemenu {
		width: 65%;
	}

	/* Estilo para el label del checkbox */
	.ui-chkbox .ui-chkbox-label {
		display: unset;
		position: relative;
		top: 3px;
	}

}

/* Estilos para version web */
@media (min-width: 641px) {

	.onlyMobile {
		display: none;
	}
	.labelOnlyMobile .label {
		display: none;
	}
	.titleOnlyMobile .ui-column-title {
		display: none;
	}

}

/* Oculto el texto de los botones del panel de acciones para un ancho concreto */ 
@media (min-width: 641px) and (max-width: 1024px) {

	.actions .ui-button:not(.ui-splitbutton-menubutton) .ui-button-icon-left, .actions .ui-button:not(.ui-splitbutton-menubutton) .ui-button-icon-right {
		left: 50%;
		margin-left: -8px;
	}

	.actions .ui-button:not(.ui-splitbutton-menubutton) .ui-button-text {
		display: none;
	}

}

/* Ajusto los dialogos para que nunca sean mas grandes que la pantalla */
.ui-dialog:not(.ui-confirm-dialog) {
	max-width: 100% !important;
	max-height: 100% !important;
	overflow-y: auto !important;
}

/* Ajusto el alto de contenedor de la plantilla utilizada en los dialogos */
#outerWrapper {
	height: 100%;
}

/* Ajusto los ui-dialog-iframe para se vean correctamente en version movil */
@media (max-width: 640px) {
	.ui-dialog.ui-dialog-iframe {
		top: 0 !important;
		left: 0 !important;
		height: 100% !important;
		width: 100% !important;
	}
	.ui-dialog.ui-dialog-iframe iframe {
		position: fixed;
		height: 100% !important;
		width: 100% !important;
	}
	#outerWrapper {
		height: 90%;
	}
}

/* Estilos adicionales para usar en las columnas del panelgrid (util por ejemplo para cuando se necesiten 5 columnas iguales) */
/* No se pueden combinar ui-grid-col-x con pa-grid-col-xx */
.pa-grid-col-10 {
	width: 10%;
}
.pa-grid-col-20 {
	width: 20%;
}
.pa-grid-col-30 {
	width: 30%;
}
.pa-grid-col-40 {
	width: 40%;
}
.pa-grid-col-50 {
	width: 50%;
}
.pa-grid-col-60 {
	width: 60%;
}
.pa-grid-col-70 {
	width: 70%;
}
.pa-grid-col-80 {
	width: 80%;
}
.pa-grid-col-90 {
	width: 90%;
}
.pa-grid-col-10, .pa-grid-col-20, .pa-grid-col-30, .pa-grid-col-40, .pa-grid-col-50, .pa-grid-col-60, .pa-grid-col-70, .pa-grid-col-80, .pa-grid-col-90 {
	float: left;
	box-sizing: border-box;
}
@media (max-width: 640px) {
	.ui-grid-responsive .pa-grid-col-10, .ui-grid-responsive .pa-grid-col-20, .ui-grid-responsive .pa-grid-col-30, .ui-grid-responsive .pa-grid-col-40, .ui-grid-responsive .pa-grid-col-50, .ui-grid-responsive .pa-grid-col-60, .ui-grid-responsive .pa-grid-col-70, .ui-grid-responsive .pa-grid-col-80, .ui-grid-responsive .pa-grid-col-90 {
		width: 100%;
		float: none;
	}
}