/* @import url(https://fonts.googleapis.com/css?family=Rubik:300,300i,400,400i,500,500i,700,700i,900,900i); */

* {
  box-sizing: border-box;
  background-color: none;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

/* Style the header */
header {
  background-color:none;
/*  padding: 30px; */
  text-align: center;
  font-size: 25px;
  color: rgb(247, 244, 244);
  height: 5em;
}




nav_header {
  float: left;
  width: 30%;
  height: 4em; /* only for demonstration, should be removed */
  background:var(--colorBackground);
/*  padding: 20px; */
}



article_header {
  float: left;
  width: 70%;
  background-color:none; /*var(--colorBackground);
  height: 4em; /* only for demonstration, should be removed */
  text-align:center;
}

article {
  float: left;
  width:100%;
  background-color: var(--colorBackground);
}

/* Create two columns/boxes that floats next to each other */
nav {
  float: left;
  width: 30%;
  height: 300px; /* only for demonstration, should be removed */
  background: var(--colorBackground);
  padding: 0px 0px 0px 0px;
}

.panelBotonera
  { height: 100%;
    padding: 0%;
    padding-top: 0%;
    padding-bottom: 15%;
    border-color: var(--colorBotonera);
    background-color: var(--colorBotonera);
    border-width: 3px;
    overflow-y: auto;
  }
 
.areaDeTrabajo
{/* height: 100%;*/
  float: left;
  width:100%;
  background-color: var(--colorBackground);
  padding: 0px 0px 0px 0px;
}

.panelFechas {
  float: left;
  color: var(--colorBotonLetra);
  margin: 3px;
}

.panelResultado
{ background-color: var(--colorResultado);
  height: 100%;
  width:100%;
  overflow-y:scroll; 
  overflow-x: scroll;
  border: none;
  padding-left: 0.2em;
}

.panelParametros
{ margin-top: 1em;
  padding-left: 5%;
  padding-right: 5%;
  background-color: var(--colorBackground);
}

.panelBotonParametros
{ float: left;
  width: 60%;
}

.panelDatosParametros
{ float: left;
  width: 40%;
}

.labelFecha{
  float:left;
  width:50%;
  vertical-align:auto;
}

.fecha
{ border-radius: 15px;
  height: 3 em;
  font-size: 2 em;
  text-align:center;
  background-color: var(--colorResultado);
  border-width: 2px;
  border-color: var(--colorBackground);
  color: var(--colorBackground);
  font-family: Arial;
  width:50%;
  }




/*  padding: 20px;  */


/* Clear floats after the columns */
section::after {
  content: "";
  display: table;
  clear: both;
}

/* Style the footer */
footer {
  background-color: #777;
  padding: 10px;
  text-align: center;
  color: white;
}

.logo
{ width:100%;
  height:4em;
}

.contenedor {
    height: 510px;
}

.campo
{ 
    border-width: 2px;
    font-style: normal;
    font-size: 1em;
    letter-spacing: 1px;
   /* margin: .4rem .8rem; */
    white-space: normal;
    align-items: center;
    justify-content: center;
    word-break: break-word;
    padding: 1rem 1rem;
    border-radius: 9px;
    background-color: white;
}

.btn {
  font-weight: 500;
  font-style: normal;
  letter-spacing: 1px;
 /* margin: .4rem .8rem; 
   border-width: 3px;

 */
  white-space: normal;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  word-break: break-word;
  -webkit-align-items: center;
  -webkit-justify-content: center;
  display: -webkit-inline-flex;
  padding: 1rem 3rem;
  border-radius: 9px;
  /*border-color: black !important; */
  background-color: var(--colorBackground);
  /*border-color: var(--colorBackground);  */
  color: var(--colorBotonLetra);
}



.btn:hover,
.btn:focus,
.btn.focus,
.btn.active {
  color:white;
  background-color: var(--colorBotonActivo);
  border-color: var(--colorBotonActivo);  
}

.btn-botonera
{ margin-left:10%;
  width:80%;
  margin-bottom: 0%;
  margin-top: 2%;
  border-width: 0%;
  padding:0%;
  padding-top:5%;
  padding-bottom:5%;
  font-size: 1.2em;
  text-align: center;
  border-radius: 25px;
}

.btn-botonera.active
{ background-color: var(--colorBotonActivo); 

}

.btn-grilla
{  font-weight: 500;
    border-width: 3px;
    font-style: normal;
    letter-spacing: 1px;
   /* margin: .4rem .8rem; */
    white-space: normal;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    word-break: break-word;
    -webkit-align-items: center;
    -webkit-justify-content: center;
    display: -webkit-inline-flex;
    padding: 1rem 3rem;
    border-radius: 9px;
    border-color: var(--colorBotonLetra);
    background-color: var(--colorBackground);
    color: var(--colorBotonLetra);
    margin-top: 2px;
    width:100%;
  }

.btn-grilla:hover,
.btn-grilla:focus,
.btn-grilla.focus,
.btn-grilla.active
{ background-color: var(--colorBotonActivo);
  border-width: 0px;
  
}  

.btn-ejecutar
{ border-radius: 15px;
  height: 3em;
  font-size:1.2em;
  text-align:center;
  background-color: var(--colorResultado);
  border-width: 2px;
  border-color: var(--colorBackground);
  color: var(--colorBackground);
  float: left;
  vertical-align: auto;
  margin: 3px;
}





.tabla {
    font-family: Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    overflow-x:scroll;
    width: 100%;
  }
  
 .tabla td {
    border: 1px solid #ddd;
    padding: 4px;
  }
  
 .tabla tr:nth-child(even){background-color: #f2f2f2;}
  
 .tabla tr:hover {background-color: #ddd;}
  
 .tabla th {
    padding-top: 2px;
    padding-bottom: 2px;
    text-align: center;
    background-color:var(--colorBackground);
    color: white;
  }

  .cliente
  {  background-color: var(--colorBackground);
     font-size: 2em;
     color: white;
     text-align: center;
  }
  
  

  .panelOficinaVirtual
  { height: 100%;                
    padding: 1.4em;
    background-color: var(--colorBackground);
    border-radius: 0.5em;
    font-size: var(--fontSizeOficinaVirtual);
    height: 3em;
    font-size: 1.2em;
  }

 
  
  
.titulo {
  background-color:none;
  text-align: center;
  font-size: 1.4em;
  padding: 5%;
  color: var(--colorBackground);
  margin-top: 0%;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: #f1f1f1;
}

li a {
  display: block;
  color: #000;
  padding-top: 5%;
  text-decoration: none;
  text-align: center;
  font-size: 1.5em;
  height: 2.5em;
}

li a.active {
  background-color: #4CAF50;
  color: white;
}

li a:hover:not(.active) {
  background-color:var(--colorBackground);
  color: white;
}



  /* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
@media (max-width: 680px) {
  nav, article, nav_header, article_header{
    width: 100%;
    height: auto;
  }
  .panelFechas {
    width: 100%;
  }

  .labelFecha {
    width:40%;
  }

  .panelBotonera
  { padding-bottom: 0%;
    background-color: var(--colorBotonera);
    border-radius: 9%;
    overflow-y: auto;
    margin-top: 0%;
    width:100%;
  }
  .areaDeTrabajo
  { margin-top: 1em;
  width:100%}

  .panelOficinaVirtual
  { margin-top: 5%;
    margin-bottom: 5%;
  }

  .panelResultado
  {height: 100%; 
  }

  .btn-ejecutar
  { float:left;
    
  }

  .panelBotonParametros
{ width: 100%;
}

  
}