html, body {
    min-height: 100%;
}

body{
  background-image: url("logo.png") ;
  background-repeat: no-repeat;
  /*background-size: contain; ajusta la imagen de fondo*/
  background-position:right;
}

h1{
  font-size: 10vw;
  text-align: center;
  margin-bottom: -2%; 
}
h3{
  text-align:center;
}
form{
  margin:0 auto;
  width: 100%;
  text-align: center;
}
span.normal{
  font-size: 5vmin;
}
span.centrado{
	display: block;
	margin: 0 auto;
}

table.calendario{
	display:inline;
	font-size: 1em;
	margin:10px;
}
td.tabla_servicios{
	border: 1px solid black;
}
td.Resaltado{
	background:#FE2EC8;
}
td.Normal{
	background:#FFFFFF;
}
th.calendario{
}

p{
  font-size: 5vmin;
}
p.normal{
  display:inline;
}
.chico{

	font-size: 2vmin;
  word-wrap:break-word;

}

.extra{
  font-size: 2vmin;
  width: 24%;
  display: inline-block;
  margin-bottom:1%;
  margin-top:1%;
  margin-right:1%;
}
.extra_ausencias{
  font-size: 2vmin;
  width: 24%;
  display: inline-block;
  margin-bottom:1%;
  margin-top:1%;
  margin-right:1%;
}
.centrado{
	text-align: center;
}
.titulo{
	text-align: center;
	font-size: 10vmin;
	text-decoration:underline;
}
.amarillo{
	background-color:Khaki;
}
.rosa{
	background-color:Pink;
}
.azul{
	background-color:LightBlue;
}
.verde{
	background-color:SpringGreen;
}
.rojo{
	background-color:red;
}
.borde_rojo{
	border:1px solid red;
}
div.tios{
	width: 24%;
	display: inline-block;
	margin-top: 1%;
}
textarea {
    /*width: 100%;*/
}
#cagando{
  float:right;
  width: 10%;
}
#psd{
    position: fixed;
    bottom: 5%; /* This places the _top_ of the div in the middle of the page. */
    right: 1%;
    height: 25%;
	width:35%;
	overflow-y: scroll;
	background-color:khaki;
}
#psd2{
    position: fixed;
    bottom: 1%;
    right: 2%;
	overflow-y: scroll;
	background-color:khaki;
}
#psd3{
    position: fixed;
    bottom: 1%;
    right: 5%;
	overflow-y: scroll;
	background-color:khaki;
}
#variable_tabla{
	width:100%;
}
input{
    font-size: 5vmin;
}
textarea {
    width: 100%;
}
input.actualizar{
	background-image:url(actualizar.jpg);
	background-repeat: no-repeat;
	background-size: contain; 
	height:7vmin;
	width:7vmin;
}
input.trabajador{
	width:92%;
    font-size: 2vmin!important;
}
input.hora{
	width:92%;
    font-size: 2vmin!important;
}
input.hora_extra{
    font-size: 2vmin!important;
}
input.trabajador2{
	width:auto;
}
input.observaciones{
		width: 100%;
		height: 5em;
	}
input.chico{
		width: 2em;
	}
input.mediano{
	width:5em;
	font-size: 2vmin;
}
input.mediano0{
	width:20em;
	font-size: 2vmin;
}
input.mediano1{
	width:16em;
	font-size: 2vmin;
}
input.mediano2{
	width:10em;
	font-size: 2vmin;
}
input.mediano3{
	width:16em;
	font-size: 2vmin;
}
input.mediano4{
	width:16em;
	font-size: 2vmin;
}
input.mediano7{
	width:16em;
	font-size: 2vmin;
}
input.mediano8{
	width:16em;
	font-size: 2vmin;
}
input.mediano_numero{
	width:3em;
	font-size: 2vmin;
}
input.fechapicker{
	width:6em;
	font-size: 2vmin;
}
input.fechatimepicker{
	width:9em !important;
	font-size: 2vmin;
}
input.grande{
	width:30em;
	font-size: 2vmin;
}
input.modificar{
	background-image: url("modificar.gif") ;
	background-repeat: no-repeat;
	background-size: contain; 
	height:4vmin;
	font-size: 2vmin;
	margin-left: 2%;
}
/*Esto es para que lo que ponga este al 30% del lado izquiero de la pantalla,
vamos, lo que es en el ladillo */

div.centrado_vertical{
    position: relative;
    top:10%;
}
div.mapa{
	width: 100%;
	height: 100vh;
	position:absolute;
}
div.mapa2{
	width: 100%;
	height: 80vh;
}

select.seleccionaco{
	width:60vmin;
    font-size: 5vmin;
    display:block;
    margin-left: auto;
    margin-right: auto;
}
select.seleccionaco_largo{
    font-size: 5vmin;
    display:block;
    margin-left: auto;
    margin-right: auto;
}
select.seleccionaco_confoto{
	width:60vmin;
    font-size: 5vmin;
    margin-left: auto;
    margin-right: auto;
}
.finalizado td{
	background-color:rgb(101, 237, 101) !important;
}
.validado td{
	background-color:rgb(106, 238, 231) !important;
}
.footable{
   border-collapse: collapse !important;
  border-radius: 30px!important;
  /* -moz-border-radius:30px!important;
  -webkit-border-radius:30px!important;
  */
}
.footable th{
   color:#1c94c4!important;
}
.footable td{
   border:1px solid!important;
}
.ui-dialog { z-index: 1000 !important ;}
.ui-autocomplete { 
	z-index: 3001 !important ;
	position:relative !important;
	}
/*he hecho trampas, de alguna manera el media scren 
actualiza la pagina y entonces se me vuelven a poner los font-size que 
habia definido antes en los estilos,es como darle al  cada vez que cambiamos de tama
ño de ventana*/
.divicon{

/*se deja vacio a posta*/
text-align: center;
line-height:50px;
}
.resumen{
		width: 65%;
	}


.boton_lateral{
     height:9vh;
     width:9vh;
	 background-size: 100%;
	 background-repeat: no-repeat;
	 background-color:rgb(255, 255, 255);
	 margin-right:1%;
	 margin-top:1%;
	 position:absolute;
	 z-index: 900;
    }
.botonsubir{
	display:none;
}

.botonaco{
    width:20vmin;
    font-size: 2vmin;
}
.boton_arriba{
     height:7vh;
     width:7vh;
	 background-size: 100%;
	 background-repeat: no-repeat;
	 background-color:rgb(255, 255, 255);
	 margin-right:1%;
	 margin-top:1%;
	 position:fixed;
	 z-index: 900;
    }
#botonarriba{
 background-image:url(arriba.jpg);
 right:0;
 top:0vh;
}
#botonabajo{
 background-image:url(abajo.jpg);
 right:0;
 top:10vh;
}
#botoneditar{
 background-image:url(edit.jpg);
}
#botonposicionar{
 background-image:url(brujula.jpg);
 bottom:0;
}
#botonbuscar{
 background-image:url(search.png);
 right:0;
 bottom:0;
}
#buscarreparaciones{
 background-image:url(search_repa.png);
 right:0;
 bottom:20vh;
}
#botonalmacen{
 background-image:url(almacen.png);
 bottom:10vh;
}
#botonparte{
 background-image:url(almacen.png);
 right:0;
 bottom:10vh;
}
#botonrecuperar{
 background-image:url(arreglar.png);
 display: none;
}
#botonmover{
 background-image:url(mover.png);
 display: none;
}
#botonañadir{
 background-image:url(add.png);
 display: none;
}
#botonborrar{
 background-image:url(delete.png);
 display:none;
}
#botoncargarpapeleras{
 background-image:url(ojo.png);
 display: none;
}
#botonstop{
 background-image:url(stop.png);
 display: none;
}
#imagen_foto{
    width:20%;
	float:right;
}
.izquierda{
	position:absolute;
	left:15%;
}
.derecha{
	position:absolute;
	left:65%;
}
@media only screen and (max-width: 700px) {
   h1{
     font-size: 12vw;
   }
   h3{
     font-size: 8vw;
   }
   input{
       font-size: 6vw;
   }
   input.muylargo{
		width: 100%;
	}
	
   p.normal{
     display:block;
     margin:4px;
   }
   #fototio{
     width: 23%;
   }
   
   
   #cagando{
    width: 20%;
   }
   .botoncillo{
     height:8vw;
     width:6vw;
    }
   .botoncillotexto{
     height:8vw;
     width:6vw;
    }
    button.botoncillofecha{
     height:8vw;
     width:6vw;
    }
	.botonaco{
    width:90vmin;
    font-size: 9vmin;
    display:block;
    margin-left: auto;
    margin-right: auto;
}

	
}

@media print{
	.footable{
	   border-collapse: collapse !important;
	  border-radius: 30px!important;
	  page-break-before:always!important;
	}
	
	img.imagen{
		width:60px;
	}
	
	.saltopagina{
		display:block;
		position:relative;
		page-break-before:always;
	}
	.no_imprimir{
		display:none;
	}
	
}