@charset "UTF-8";

/***************************/
/*Estilos propios de la app*/
/***************************/

#page>.ui-content {
	padding: 0;
}

.centrado {
	width: 100%;
	text-align: center !important;
}

.justificado {
	text-align: justify;
}

.columnaIzquierda {
	width: 50%;
	text-align: left !important;
}

.columnaDerecha {
	width: 50%;
	text-align: right !important;
}

.instrucciones {
	display: table-cell;
	width: 360px;
}

.botonesDialog {
	display: table-cell;
	width: 360px;
}

.panelLogin {
	width: 320px;
	margin: 10% auto;
	text-align: center;
	background: #f2f5f7 url("/reno/resources/images/fondoPanel.png") 50% top repeat-x;
	border: 1px solid #dddddd;
}

.camposLogin {
	margin: 0 auto;
}

.panelGridIndex {
	width: 100%;
	background: #f2f5f7 url("/reno/resources/images/fondoPanel.png") 50% top repeat-x;
	border: 1px solid #dddddd;
	margin: 0 auto;
}

.lblNumExp {
	font-size: x-small;
	margin-left: 10px;
	font-weight: bold;
}

.lblExp {
	font-size: x-small;
	margin-left: 10px;
	font-weight: bold;
}

.columnBotones {
	width: 10%;
}

/*
.columnTrabajos {
	width: 90%;
}
*/

.columnTrabajoCampos {
	/*width: 40%;*/
	padding-left: 20px;
	text-align: left;
}

.columnTrabajoValores {
	/*width: 60%;*/
	white-space: normal;
	padding-left: 30px;
	text-align: left;
}

div#spinner {
	display: none;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0px;
	left: 0px;
	text-align: center;
	vertical-align: middle;
	z-index: 2000;
	overflow: auto;
	background-image: url("/reno/resources/images/mascara.png");
}

div#spinner>div {
	position: absolute;
	top: 30%;
	left: 50%;
}

div#spinner img {
	height: 75px;
	width: 75px;
	position: relative;
	top: 0%;
	left: -50%;
}

.dialogoAccion {
	min-width: 260px;
	max-width: 98%;
}

.fieldPK {
	width: 48px !important;
}

.panelTipoVial {
	margin-left: -5px;
}

.campoTipo {
	font-weight: bold;
}

.campoVialidad {
	font-size: small;
}

.numTrabajos {
	font-size: medium;
}

.toolbarCabecera {
	background-color: lightgray !important;
}

.toolbarCabecera button {
	margin: 2px;
}

.lblPosicion {
	font-style: italic;
}

.btnGeoloc {
	margin: 0 auto !important;
	margin-bottom: 10px !important;
	width: auto !important;
	font-size: small !important;
}

.dlgCrear .ui-content {
	padding-top: 0;
}

/* Estilos para el pie de página */
.pie {
	height: 50px;
}

table.tablaPie {
	width: 100%;
	height: 50px;
	padding: 0px;
	border-collapse: collapse;
	border: 0px;
}

.pieIzquierda {
	width: 33%;
	height: auto;
	text-align: left;
	padding-left: 10px;
}

.pieDerecha {
	width: 33%;
	height: auto;
	text-align: right;
	padding-right: 10px;
}

/*****************************************/
/*Ajustes sobre los estilos de primefaces*/
/*****************************************/

/*Eliminar el espacio que ocupa message cuando no tiene mensajes*/
td .ui-message:not(.ui-messages-info, .ui-messages-warn, .ui-message-error) {
	display: none;
}

/*Ocultar el loader default*/
.ui-loader .ui-icon-loading {
	background-color: transparent;
}

.ui-icon-loading {
	background: none;
}

button.ui-button {
	background-color: whitesmoke;
	border-color: darkgrey;
	color: black;
	font-weight: bold;
}

button.ui-button:hover {
	background-color: grey;
	border-color: darkgrey;
}

.columnBotones .rounded-button {
	border-width: 6px;
	border-style: double;
	border-color: white;
	color: white;
}

.columnBotones .rounded-button:hover {
	color: black;
	border-color: black;
}

.columnBotones .ui-icon {
	font-weight: bold;
}

/*Colores especiales para los botones de acciones*/
button[id$="btnTerminar"],
button[id$="btnTerminar"]:hover {
	background-color: rgba(255, 0, 0, .5);
	/*rojo*/
}

button[id$="btnIniciar"],
button[id$="btnIniciar"]:hover {
	background-color: rgba(0, 128, 0, .5);
	/*verde*/
}

button[id$="btnEditar"],
button[id$="btnEditar"]:hover {
	background-color: rgba(0, 0, 0, .5);
	/*negro*/
}

button[id$="btnDescripcion"],
button[id$="btnDescripcion"]:hover {
	background-color: rgba(0, 0, 255, .5);
	/*azul*/
}

button.blanco {
	background-color: rgba(255, 255, 255, .5);
	/*blanco*/
}

button[id$="btnPausar"],
button[id$="btnPausar"]:hover {
	background-color: rgba(255, 215, 0, .5);
	/*amarillo*/
}

.ui-datalist .ui-datalist-header {
	background-color: gainsboro !important;
}

.ui-datalist .ui-paginator {
	background-color: whitesmoke !important;
}

.dialogoAccion .ui-dialog-titlebar {
	background-color: whitesmoke !important;
}

/*Ajustar el ancho de las filas del listado*/
.ui-content .ui-listview,
.ui-panel-inner>.ui-listview {
	margin: 0em;
}

/*Ajustar posicion de los botones de la cabecera*/
.ui-btn-left,
.ui-btn-right {
	top: -1px;
}

/*Quitar margen excesivo del titulo de los dialogos*/
.ui-header .ui-title {
	margin-right: 10%;
	margin-left: 10%;
}

/*Centrado del calendario*/
div.hasDatepicker {
	margin: 0 auto;
	margin-top: 5px;
}

/*Ajuste de los inputs de fechas y horas*/
.campoFecha {
	text-align: center;
}

.campoFecha>input {
	width: 90%;
	height: 38px;
	text-align: center;
}

.campoHora>div {
	width: 90%;
	margin: 0 auto;
}

/*Ajuste del selectOne para que los textos largos no descuadren el formulario*/
.ui-select .ui-btn>span:not(.ui-li-count) {
	white-space: normal !important;
	max-width: 300px;
}

/*En Firefox ocultamos las flechas que salen en los inputs numéricos*/
input[type=number] {
	-moz-appearance: textfield;
}

#listado_list {
	list-style-type: none;
	display: contents;
}

/*****************************************************/
/*Estilos para optimizar diversos tamaños de pantalla*/
/*****************************************************/
/*
@media (min-width:320px) {  smartphones, iPhone, portrait 480x320 phones  }
@media (min-width:481px) {  portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide.  }
@media (min-width:641px) {  portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones }
@media (min-width:961px) {  tablet, landscape iPad, lo-res laptops ands desktops  }
@media (min-width:1025px) {  big landscape tablets, laptops, and desktops  }
@media (min-width:1281px) {  hi-res laptops and desktops  }
*/
/**************************************************/

/*En escritorio ponemos ancho fijo a la tabla y dialogos*/
@media (min-width:1025px) {
	.panelGridIndex {
		width: 900px;
	}

	.lblNumExp {
		font-size: small;
		font-weight: bold;
	}

	.lblExp {
		font-size: small;
		font-weight: bold;
	}

	.dialogoAccion {
		max-width: 850px !important;
	}

	.botonDialog {
		width: auto !important;
		margin: 0 auto;
	}

	#page {
		height: auto;
		min-height: 100%;
	}

	.numTrabajos {
		font-size: large;
	}
}

/*En tamaños medianos y grandes aumentamos el ancho de los dialogos*/
@media (min-width:600px) {
	.instrucciones {
		width: 420px;
	}

	.botonesDialog {
		width: 420px;
	}

	.ui-select .ui-btn>span:not(.ui-li-count) {
		max-width: 360px;
	}
}

/*En pantallas muy pequeñas quitamos los nombres de los campos para que quepa todo*/
@media (max-width:480px) {
	.columnTrabajoCampos {
		display: none;
	}

	.numTrabajos {
		font-size: small;
	}

	.panelTipoVial {
		margin-left: -3px;
	}
}