/* ============================================== Variables ======================================== */
#nav1 {
    /*Front color*/
    --color-white: rgba(255, 255, 255,1);
    --color-white-dark: rgba(245, 245, 245,1);
    --color-grey: rgba(79, 74, 74,1);
    --color-grey-dark: rgba(64, 64, 64,1);
    --color-black: rgba(05, 0, 0,1);
    /*Background color*/
    --bk-green: rgba(22, 82, 9,1);
    --bk-yellow: rgb(255, 210, 0);
    /*Border*/
    --border-fine: 1px solid rgba(192, 192, 192,1);
}

/* ============================================== Nav1 =========================================== */
#nav1 {
	color: var(--color-white);
	background-color: #626c62;
	padding: 4px 10px;
	color: var(--color-white);
	background-color: var(--color-grey);
}
#nav1 ul {
	list-style: none;
	padding: 0px 10px;
}
#nav1 ul li a,
#nav1 ul li button {
	display: block;
	padding: 4px 10px;
	color: var(--color-white);
	text-decoration: none;
	border-bottom: 1px solid rgb(142 134 134) !important;
}
#nav1>ul>li:last-child>a {
	cursor: pointer;
	border-bottom: none !important;
}

/* Hover */
#nav1 ul li a:hover {
	color: var(--color-black);
	background-color: var(--bk-yellow);
}

/* Página actual */
#nav1 ul li a[aria-current]{
	color: var(--color-black);
	background-color: var(--bk-yellow);
}

/* Ancestros de la página actual */
#nav1 ul li a.madAncestro {
	/* Theme */
}

/* Padre de la página actual */
#nav1 ul li a.madRoot {
	/* Theme */
}

/* Foco */
#nav1 ul li a:focus {
	/* outline: 2px dotted #004285; */
	transition: outline-offset 0.15s linear;
	z-index: 2;
	background-color: var(--bk-yellow);
	color: var(--color-black);
}

/* Btn impresion */
#nav1 #madImpresion button {
	color: var(--color-white);
	font-size: 1em;
	cursor: pointer;
	background: transparent;
	border: 0;
	width: 100%;
	text-align: left;
	border-radius: 0;
}

/* Btn impresion:hover */
#nav1 #madImpresion button:hover {
	color: var(--color-black);
	background-color: var(--bk-yellow);
}
/* Btn impresion:focus */
#nav1 #madImpresion button:focus {
    outline: 2px dotted #004285;
	color:#000;
    transition: outline-offset 0.15s linear;
    z-index: 2;
    background-color: var(--bk-yellow);
    color: var(--color-black);
}

/* Usuarios */
#nav1 #madUsers {
	background: var(--bk-green);
	padding: 0;
	margin: 0px 10px;
}

/* Menu hamburguesa */
#nav1 .madHamburguer {
	background-color: transparent;
	font-weight: bold;
	min-width: 0 !important;
	font-size: 1.25em;
	width: 2.5em;
	height: 2.5em;
	border-radius: 0;
	color: var(--color-white);
	border: 1px solid var(--color-white);
	background-color: transparent !important;
	margin: 1rem;
	padding: 0px;
	font-size: 1rem;
	cursor: pointer;
	MARGIN-LEFT: 0.5REM;
}
#nav1 .madHamburguer:hover {
	border: 1px solid var(--color-white);
	color: inherit;
}
#nav1 .madHamburguer[aria-expanded="false"]~ul {
	display: none;
}
#nav1 .madHamburguer[aria-expanded="true"]~ul {
	display: block;
}
#nav1 #hamburguer_button1 {
	color: var(--color-white);
}
#nav1 #hamburguer_button1:hover {
	background: none !important;
}

/* ****************************** RWD ********************************* */
@media only screen and (min-width: 992px) {
	#nav1 .madHamburguer {
		display: none;
	}
	
	#nav1 .madHamburguer[aria-expanded=false]~ul {
		display: block;
	}

	#nav1 {
		/* overflow: auto; */
		font-size: 0.9em;
		display: flex;
		justify-content: space-between;
		padding: 0;
	}

	#nav1 ul li,
	#nav1 ul li a,
	#nav1 ul li button {
		height: 100%;
	}

	#nav1>ul>li {
		float: left;
	}

	#nav1>ul>li>a,
	#nav1>ul>li>button {
		border-bottom: none !important;
		padding: 4px 8px 6px 8px;
	}

	/* Usuarios */
	#nav1 #madUsers {
		margin: 0px;
		padding-right: 10px;
	}
}