@charset "utf-8";
/* CSS Document */

html {
  	background-image: url('../imagenes/fondo_sodexo.jpg');
  	font-size: 0.88em !important; 
	height:100%;
	background-repeat: no-repeat;
	background-position: center center;
	background-attachment: fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover; 
  	background-size:cover;
	/*line-height: 1.2;*/
}

body{
	/*font-family: Verdana, Geneva, sans-serif;*/
	font-family: 'Open Sans', sans-serif;
	font-size: inherit;
	/*background-image: url('../imagenes/fondo_sodexo.jpg');
	/*background-color: brown;*/
  	width: 100%; 
	height: auto;
	margin: 0em;
	line-height: inherit;
	/*background-position: center;
  background-repeat: no-repeat;
  background-size:cover;*/
}

header.w3-container{
	padding:0em !important;
}

/*#fondobody{
	position: absolute; top:0; left: 0;
   width: 100%;
   height: 100%;
	margin: 0em 0em;
	border: solid #000000 double;
	padding: 0em 0em;
	height: 100% !important;
	width: 100% !important;
	
}*/

 table .btn_danger {
  width: 16vh;
}

header img{
	height: auto;
	width: 100%;
	/*max-height: 10vw;*/
	margin: 0 auto;
	display: block;
  	float: none;	
}

header{
	background-color: rgba(213,224,247,0.96) !important;
	box-shadow: 0 4px 3px rgba(0,0,0,0.5);
	margin: 0em auto 0em auto !important;
	/*position: fixed;   color original aca pato 3275fdf5 */
	position: -webkit-sticky;
	position: sticky;
	width: 100%;
	height: auto; 
	transition: 0.4s; 
 	z-index: 1;
	top: 0; /* required */
	left:0;
}

  
section {
	margin: 0em auto 0em auto !important;
	padding: 0em;
	position: relative !important;
	display: block;
}

section #img-inicio{
	max-width: 100vw;
	height: auto;
	width: auto;
	max-height: 82vh;
	margin: 0vw auto -4.3vw;
	display: block;
  	float: none;	
}

@media screen and (max-width: 600px){
	section #img-inicio{
height: 35vh;
width: 96vw;
display: block;
float: none;
margin: 6.5em auto 6.5em;
	}
}


#TextoaBuscar {
	width: 30em;
}

nav {
	background-color: #a1bdf5f5;
	border-style:none;
    border-color: transparent;
	color: #222222;
	position: sticky;
	z-index: 1 !important;
}

nav .w3-dropdown-content{
	background-color: #587cc3f5;
	color: #222222 !important;
	position: absolute !important;
	z-index: 1;
}
#menu-movil .w3-button{
	background-color: #9999FF;
	opacity: inherit;
	color: #222222 !important;
	z-index: 1 !important;
}

nav button.w3-button:hover, a.w3-bar-item:hover, .w3-dropdown-content a:hover{
	background-color: #8daef3f5;
	color: #222222 ;
}
 
#ventas button.w3-button:visited {
	background-color: #3275fdf5 !important;
	color: #222222 !important;
}

section{
	position: relative;
	
}

footer {
	margin: 2.1em auto 0em auto;
	background-color: #2466ec38;
	position: relative;
	bottom: 0;
	width: 100%;
 
	color: #000000;
	display: inline-block;
}

footer img, footer p{
	display: block;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

footer img {
	height: 3.5vw;
	width: 100%;
}

#marcoformulario{
	background-color: rgba(255,255,255,0.6);
	width: 40em;
	max-width: 95%;
	margin: 0em auto;
	border: none;
	border-radius: 0.8em;
	min-height: 28em;
}

#marcoformulario_2{
	background-color: rgba(255,255,255,0.6);
	width: 40em;
	max-width: 95%;
	margin: 0em auto;
	text-align: left;
	border: none;
	border-radius: 0.8em;
	min-height: 7em;
}


input[type=text].camposformulario,
input[type=password].camposformulario,
select.camposformulario{
	font-size: 1.2em;
	text-shadow: 0 0.01em 0 rgba(255,255,255,0.8);
	padding: 0em 0.8em;
	line-height: 2em;
	margin: 0.2em 0em;
	border: none;
	box-shadow: inset 0 0 0.02em rgba(0,0,0,0.1), inset 0 03em 0.02em rgba(0,0,0,0.1);
	border-radius: 0.4em;
	background: #f9f9f9;
	color: #000;
	transition: color 0.3s ease-out;
	}

select.camposformulario{
	height: 2em;
	line-height: 2em;
	}

label.camposformulario{
	font-size: 1em;
	text-shadow: 0 0.01em 0 rgba(255,255,255,0.8);
	padding: 0em 0.8em;
	line-height: 2em;
	margin: 0.2em 0em;
	border: none;
	border-radius: 0.4em;
	background: #f9f9f9;
	color: #000;
	transition: color 0.3s ease-out;
}

input[type=submit].camposformulario{
	color: #fff;
	background-color: #337ab7;
	background-image: linear-gradient(to bottom,#337ab7 0,#265a88 100%);
	background-repeat: repeat-x;
	border-color: #245580;
	text-shadow: 0 -1px 0 rgba(0,0,0,.2);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
	padding: 0.3em 1.3em;
	font-size: 1.2em;
	line-height: 1.3333333;
	border-radius: 0.4em;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	touch-action: manipulation;
	cursor: pointer;
	border: 1px solid transparent;
	-webkit-appearance: button;
	float: right;
	margin-top: 1em;
}

/*** CSS para Inicio de Sesion **/

#ContenedorSesion{
	background-color: rgba(255,255,255,0.6);
	width: 25em;
	max-width: 95%;
	margin: 4em auto;
	border: none;
	border-radius: 0.8em;
}
#
ContenedorSesion #logo{
	margin: 1.2em auto;
	height: 6vw;
	width: 100%;
	max-height: 10vw;
}

#ContenedorPV{
	background-color: rgba(195,205,226,0.96);
	width: 39.6em;
	height: 44em;
	max-width: 95%;
	margin: 2.3em auto;
	border: none;
	border-radius: 0.8em;
}

#ContenedorPV #logo{
	margin: 0.6em auto;
	height: 6vw;
	width: 100%;
	max-height: 10vw;
	display: none;
}

.campossesion{
	display: block;
}

.campossesion{
	margin: 1.4em 1.5em;

}

#ContenedorSesion #error{
	display: block;
	min-height: 6em;
	padding-top: 2em;
	text-align: center;
}

.campossesion i{
	font-size: 1.6em;
	color: rgba(0,0,0,0.50);
	width: 13%;
	line-height: 2em;
	margin: 0em auto;
	border: none;
	border-radius: 0.4em;
	text-align: center;
	background-color: rgba(119,119,119,0.22); 
	box-shadow: 
        inset 0em 0em 0.4em rgba(0,0,0,0.1),
        inset 0em 0.03em 0.2em rgba(0,0,0,0.1);
	
 /* &:after{
    content: ‘’;
    display: block;
    padding-bottom: 100%;
  }*/

}

.campossesion input[type=text],
.campossesion input[type=password] {
	font-size: 1.2em;
	text-shadow: 0 0.01em 0 rgba(255,255,255,0.8);
	/* Size and position */
    /*padding: 10px 18px 10px 45px;*/
	padding: 0em 0.8em;
	width: 85%;
	line-height: 2em;
	/* Styles */
    border: none; /* Remove the default border */
	box-shadow: 
        inset 0 0 0.02em rgba(0,0,0,0.1),
        inset 0 03em 0.02em rgba(0,0,0,0.1);
	border-radius: 0.4em;
	/*background: #f9f9f9;*/
    color: #222222;
	transition: color 0.3s ease-out;
}

#ContenedorSesion #login{
	display: block;
    width: 100%;
	color: #fff;
    background-color: #337ab7;
	background-image: linear-gradient(to bottom,#337ab7 0,#265a88 100%);
	background-repeat: repeat-x;
    border-color: #245580;
	text-shadow: 0 -1px 0 rgba(0,0,0,.2);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
	padding: 10px 16px;
    font-size: 18px;
    line-height: 1.3333333;
    border-radius: 6px;
	text-align: center;
    white-space: nowrap;
    vertical-align: middle;
	touch-action: manipulation;
    cursor: pointer;
	border: 1px solid transparent;
	-webkit-appearance: button;
}

/**** ERROR ****/


#ContenedorError{
	background-color: rgba(0,0,0,0.01);
	/*width: 25em;*/
	width: 100%;
	/*max-width: 95%;*/
	margin: 0em auto 4em;
	border: none;
	border-radius: 0.8em;
	color: #FFFFFF;
	text-shadow: 2px 2px 2px rgba(0,0,0,0.5);
	position: fixed;
	bottom: 0em;
}

#ContenedorError h5, h2{
	/*border: white solid;*/
	margin-bottom: 0;
	margin-top: 0;
}

#ContenedorError #btnError{
	display: block;
    width: 100%;
	max-width: 17em;
	margin: 1em auto;
	color: #fff;
    background-color: #337ab7;
	background-image: linear-gradient(to bottom,#337ab7 0,#265a88 100%);
	background-repeat: repeat-x;
    border-color: #245580;
	text-shadow: 0 -1px 0 rgba(0,0,0,.2);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
	padding: 10px 16px;
    font-size: 18px;
    line-height: 1.3333333;
    border-radius: 6px;
	text-align: center;
    white-space: nowrap;
    vertical-align: middle;
	touch-action: manipulation;
    cursor: pointer;
	border: 1px solid transparent;
	-webkit-appearance: button;
}

#ContenedorError .w3-button:hover{
	color: #fff !important;
   background-color: #337ab7 !important;
	background-image: linear-gradient(to bottom,#337ab7 0,#265a88 100%) !important;
	background-repeat: repeat-x !important;
    border-color: #245580 !important;
	text-shadow: 0 -1px 0 rgba(0,0,0,.2) !important;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075) !important;
	touch-action: manipulation !important;
    cursor: pointer !important;
	border: 1px solid transparent !important;
	-webkit-appearance: button !important;
}

/*** RANGO DE FECHA ****/

#RangodeFechas div{
	width: 20em !important;
}

#VentanaFechas{
	margin: 10% auto;
	z-index: 2;
}

#RangodeFechas header, #RangodeFechas span{
	background-color: black !important;
	color: #FFFFFF !important;
    opacity: 0.46;
	border-style:none;
    border-color: transparent;
	font-family: Verdana, Tahoma, Geneva, sans-serif;
}

#RangodeFechas h4{
	width: 85%;
	text-align: justify;
	padding: 0.2em 0.5em;
}

#RangodeFechas label{
	font-size: 1.4em;
    text-shadow: 0 0.01em 0 rgba(255,255,255,0.8);

    /* Size and position */
    /*padding: 10px 18px 10px 45px;*/
	padding: 0em 0.1em 0em 0.3em;
	width: 30%;
	line-height: 2em;
	    /* Styles */
    border: none; /* Remove the default border */

}

#RangodeFechas input[type=text]{
	font-size: 1.2em;
    text-shadow: 0 0.01em 0 rgba(255,255,255,1);

    /* Size and position */
    /*padding: 10px 18px 10px 45px;*/
	padding: 0em 0.8em;
	width: 70%;
	line-height: 2em;

    /* Styles */
    border: none; /* Remove the default border */
    box-shadow: 
        inset 0 0 0.02em rgba(0,0,0,0.1),
        inset 0 03em 0.02em rgba(0,0,0,0.1);
    border-radius: 0.4em;
    /*background: #f9f9f9;*/
    color: inherit;
    transition: color 0.3s ease-out;
}

#MostrarFecha{
	margin: 0em auto;
	width: 100%;
}

@media screen and (max-width: 600px){
	#VentanaFechas{
	margin: 25% auto;
}
}

#chart-container {
  position: relative;
  margin: auto;
  height: 40vh;
  width: 40vw;
}