.hidden,
body#estadisticas .form_filtros > div.hidden,
body#top_ventas .form_filtros > div.hidden {
	display: none;
}

body {
	margin: 0;
	font-family: sans-serif;
}

body .logo {
	margin: 50px 0;
	text-align: center;
}

body .title {
	margin-bottom: 30px;
	text-transform: uppercase;
	text-align: center;
	font-size: 20px;
}

body#login .container {
	max-width: 320px;
	margin: 0 auto;
	padding: 0 25px;
}

body#login .login {
	text-align: center;
}

body#login .login input[name="user"] {
	margin-bottom: 20px;
}

body#login .login .submit {
	margin-top: 30px;
}

body#login .login input {
	width: 100%;
	height: 30px;
	padding: 0 10px;
	border: 1px solid black;
	border-radius: 3px;
}

body#login .login .wrongpass {
	margin: 20px 0 0 0;
	font-size: 14px;
	color: red;
}

body#login .login button {
	width: 100%;
	height: 35px;
	border: 1px solid black;
	border-radius: 5px;
	background-color: black;
	text-transform: uppercase;
	color: white;
}

body#login .login button:hover {
	background-color: white;
	color: black;
}

body#menu .container,
body#pedidos .container,
body#estadisticas .container,
body#top_ventas .container {
	max-width: 480px;
	margin: 0 auto;
	padding: 0 25px;
}

body#menu .menu ul {
	margin: 0;
	padding: 0;
}

body#menu .menu ul li {
	list-style: none;
	margin: 15px 0;
}

body#menu .menu ul li a {
	display: block;
	height: 48px;
	padding: 0;
	border: 1px solid black;
	border-radius: 5px;
	background-color: black;
	line-height: 48px;
	text-decoration: none;
	text-transform: uppercase;
	text-align: center;
	color: white;
}

body#menu .menu ul li a:hover {
	background-color: white;
	color: black;
}

body#pedidos .pedidos,
body#estadisticas .promedio_horas,
body#estadisticas .estadisticas,
body#top_ventas .productos {
	margin-top: 50px;
	margin-bottom: 20px;
}

body#pedidos form.filtros,
body#estadisticas form.filtros,
body#top_ventas form.filtros {
	margin: 0;
	font-size: 15px;
}

body#pedidos .form_filtros,
body#estadisticas .form_filtros,
body#top_ventas .form_filtros {
	margin-bottom: 15px;
}

body#pedidos .form_filtros > div,
body#estadisticas .form_filtros > div,
body#top_ventas .form_filtros > div {
	display: flex;
	justify-content: space-between;
	align-items: center;
	column-gap: 10px;
}

body#pedidos .form_filtros > div:not(:last-child),
body#estadisticas .form_filtros > div:not(:last-child),
body#top_ventas .form_filtros > div:not(:last-child) {
	margin-bottom: 10px;
}

body#pedidos .form_filtros label,
body#estadisticas .form_filtros label,
body#top_ventas .form_filtros label {
	flex: 0.2;
}

body#pedidos .form_filtros input,
body#pedidos .form_filtros select,
body#estadisticas .form_filtros input,
body#estadisticas .form_filtros select,
body#top_ventas .form_filtros input,
body#top_ventas .form_filtros select {
	flex: 0.8;
	height: 25px;
	font-family: sans-serif;
}

body#pedidos form.filtros button,
body#estadisticas form.filtros button,
body#top_ventas form.filtros button {
	cursor: pointer;
	width: 100%;
	height: 30px;
	background-color: black;
	border: 1px solid black;
	border-radius: 5px;
	text-transform: uppercase;
	font-size: 14px;
	color: white;
}

body#pedidos form.filtros button:hover,
body#estadisticas form.filtros button:hover,
body#top_ventas form.filtros button:hover {
	background-color: white;
	color: black;
}

body#pedidos table.datos,
body#estadisticas table.datos_hora,
body#estadisticas table.datos,
body#top_ventas table.datos {
	table-layout: fixed;
	width: 100%;
	border: 1px solid black;
    border-collapse: collapse;
    text-align: center;
	font-size: 15px;
}

body#pedidos table.datos .encabezado,
body#pedidos table.datos .total,
body#estadisticas table.datos_hora .encabezado,
body#estadisticas table.datos .encabezado,
body#estadisticas table.datos .total,
body#top_ventas table.datos .encabezado,
body#top_ventas table.datos .total {
	background-color: black;
	color: white;
}

body#pedidos table.datos td,
body#estadisticas table.datos_hora td,
body#estadisticas table.datos td,
body#top_ventas table.datos td {
	padding: 12px 5px;
}

body#pedidos table.datos tr.active,
body#top_ventas table.datos tr.active {
	background-color: #e0e0e0;
}

body#pedidos table.datos tr.amazon_isprime.active {
	background-color: #f0f0f0;
}

body#pedidos table.datos td.origen,
body#pedidos table.datos td.is_prime {
	cursor: pointer;
	text-transform: capitalize;
}

body#pedidos table.datos td.origen div,
body#pedidos table.datos td.is_prime div {
	display: flex;
	justify-content: center;
	align-items: center;
}

body#pedidos table.datos td.origen div span,
body#pedidos table.datos td.is_prime div span {
	flex: 1;
}

body#pedidos .no_existe,
body#top_ventas .no_existe {
	text-align: center;
	text-transform: uppercase;
	font-size: 18px;
}

body#estadisticas .sticky_menu {
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	position: sticky;
	top: 0;
	height: 40px;
	background-color: black;
	color: white;
}

body#estadisticas .sticky_menu .title {
	margin: 0;
}

body#estadisticas table.datos_hora .encabezado {
	text-transform: uppercase;
}

body#estadisticas table.datos_hora .encabezado .positive,
body#estadisticas table.datos_hora .encabezado .negative {
	margin-left: 10px;
	font-weight: bold;
	font-size: 17px;
}

body#estadisticas table.datos_hora .encabezado .positive {
	color: lawngreen;
}

body#estadisticas table.datos_hora .encabezado .negative {
	color: red;
}

body#top_ventas .exportar {
	margin-top: 10px;
}

body#top_ventas .exportar a {
	cursor: pointer;
	display: block;
	background-color: black;
	border: 1px solid black;
	border-radius: 5px;
	line-height: 28px;
	text-decoration: none;
	text-align: center;
	text-transform: uppercase;
	font-size: 14px;
	color: white;
}

body#top_ventas .exportar a:hover {
	background-color: white;
	color: black;
}

body#top_ventas table.datos .datos_tabla td {
	font-size: 13px;
}

body#top_ventas table.datos td.imagen,
body#top_ventas table.datos td.imagen_marca {
	cursor: pointer;
	font-weight: bold;
	font-size: 16px;
}

body#top_ventas table.datos td.imagen img,
body#top_ventas table.datos td.imagen_marca img,
body#top_ventas table.datos td.imagen_producto img {
	width: -moz-available;
	width: -webkit-fill-available;
}

body#top_ventas table.datos td.informacion span,
body#top_ventas table.datos td.venta span,
body#top_ventas table.datos td.venta_marca span {
	display: block;
}

body#top_ventas table.datos td.informacion span:not(:last-child),
body#top_ventas table.datos td.venta span:not(:last-child),
body#top_ventas table.datos td.venta_marca span:not(:last-child) {
	margin-bottom: 5px;
}

body#top_ventas table.datos td.venta span:last-child {
	width: fit-content;
	margin: 0 auto;
	padding: 5px 10px 0;
	border-top: 1px solid black;
	font-weight: bold;
}

body#top_ventas table.datos td.origen {
	text-transform: capitalize;
}

@media (max-width: 375px) {
	body#pedidos .container,
	body#estadisticas .container,
	body#top_ventas .container {
		padding: 0 10px;
	}
}

@media (max-width: 320px) {
	body#pedidos .container,
	body#estadisticas .container,
	body#top_ventas .container {
		padding: 0 5px;
	}
}