/* el siguiente selector es para evitar problemas de cajas con google maps o google custom 
según documentación de la página de bootstrap */


.selector-for-some-widget {box-sizing: content-box;}


.carousel                               {margin-top: 12px;}
.carousel-inner                         {margin-left: 15%;}
.carousel-inner.item img,
.carousel-inner.item img                {width: 100%;vertical-align: 50px;}
.container .carousel-indicators .active {background-color:orange;}
.container .carousel-indicators li      {border: 1px solid orange;}
.carousel-inner>.item>a>img             {max-width: 70%;}

.navbar-inverse {/* Margenes y color del menú */
    background-color: #980404; /*color vino*/
    padding-top: 15px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form { /*doy algo más de altura al menú*/
    border-color: #101010;
    padding-top: 15px;
}

.navbar-inverse .navbar-nav>li>a { /* Color de las opciones del menú */
    color: white;
}

.identidad {
    background-color: black;
}

.iden {
    text-align: center;
    font-size: 2em;
    color: dodgerblue;}

.dropdown-menu {
    background-color: #980404;
    padding: 10%;
    width: -moz-max-content;
    width: -webkit-max-content;
}

.dropdown-item {
    color: white;

}

.dropdown-item a:focus, a:hover{
    color: white;
    background-color: black;
}

.quien { // Aviso Legal.
    padding: 20%;
    margin: auto;
    width: 60%;
    font-size: 1em;
    text-align: justify;

}

.quien #quien_f1 {margin-left: 30px;}
.quien #quien_f2 {padding-top: 15px; padding-right: 15px;}
*/
/*                               ***********************
                                        container
                                 ***********************                                */

/*************** index.html ***************/

.container {
    background-color: white;
    color: black;

}    

.container .panel-footer{
    background: black;
    margin-bottom: 10px;
    margin-top:15px;
}
.panel-footer{
    background: white;
    position: fixed;
    width: 100%;
}

#pie_1 {
    background: black; 
    color: white; 
    text-align: center;
    font-size: 0.9em;
}

#pie_2 {
    background-color: blue;
    text-decoration: none;
    color: white;
    font-size: 1em;
    padding: 0;
    border: 0;
    margin: 0;
}
#pie_2 td:hover{
    text-decoration-line: underline;

}

/*************** pedido.html ***************/

#panel-oculto { 
    width: 80%;
    height: 80%;
    left: 10%;
    top: 11%;
    display: none; 
    position: fixed; 
    background-color: white;
    border: solid 10px #980404;
    padding: 25px;
    border-radius: 20px;
}
/* Imagen en la function pedidos. */

#imagen_ped{
    width: 50%;
    text-align: center;
}

#opciones_ped {
    width: 50%;
    text-align: center;
}

.boton_ped {
    margin-left: 20px;
    padding: 5px;
      ;
    border-radius: 10px;
}   

#cab_ped{
    background: #e0dada;
}

/**************************** albarán formularios ********************************/

#datos_cabecera{
    margin-bottom: 30px;
    width: 30%;
    float: left;
}
#datos_informacion{
    width: 70%;
    margin-left: 50%;
    font-size: 0.8em;
    line-height: 0.6em;
    padding-top: 1%;
    margin-bottom: 30px;
}
#cab_empresa{
    font-size: 1.5em;
    font-weight: bold;
    margin-left: 2%;
    text-align: center;
}

.cab_direccion{
    font-size: 0.8em;
    text-align: center;
    line-height: 0.6em;
}

.detalle {
    margin-top: 40px;
    font-size: 1.2em;
}
#albaran_detalle tr:hover {
    background-color: yellow;
}

#formulario{
    display: none;
}
#coment{
    width: 90%;
    text-align: right;
    color: red;
    font-size: 0.8em;
    line-height: 0;
}

form {
  /* Solo para centrar el formulario en la página */
  margin: 0 auto;
  width: 90%;
  /* Para ver el contorno de la forma */
  padding: 1em;
  border: 2px solid #CCC;
  border-radius: 1em;
}

form div + div {
  margin-top: 1em;
}

label {
  /* Para asegurarse de que todas las etiquetas tengan el mismo tamaño y estén alineadas correctamente */
  display: inline-flex; /*display: inline-block;*/
  width: 90px;
  text-align: right;
}

input {
  /* Para asegurarse de que todos los campos de texto tengan la misma configuración de fuente
      De forma predeterminada, textareas tiene una fuente monoespaciada */
  font: 1em sans-serif;
  border-radius: 0.5em; /*Esta etiqueta es nueva doy curvatura a los bordes de los campos */

  /* Para dar el mismo tamaño a todos los campos de texto 
  width: 300px;
  box-sizing: border-box;
  */

  /* Para armonizar la apariencia del borde del campo de texto */
  border: 1px solid #999;
}

input:focus {
  /* Para resaltar un poco los elementos activos */
  border-color: #000;
}

input:invalid {
  border: 1px solid red;
}

input:valid {
  border: 1px solid green;
}

textarea {
  /* Para alinear correctamente los campos de texto de líneas múltiples con sus etiquetas */
  vertical-align: top;

  /* Para dar suficiente espacio para escribir texto */
  height: 5em;
}

.button {
  /* Para colocar los botones en la misma posición de los campos de texto */
  /*padding-left: 90px;  mismo tamaño que los elementos de la etiqueta */
  margin-left: 85%
}

button {
  /* Este margen adicional representa aproximadamente el mismo espacio que el espacio
      entre las etiquetas y sus campos de texto */
  margin-left: .5em;
}