body {
	background-color: hsl(0, 0%, 97%);
	font-family: 'Roboto', sans-serif;
	margin: 0;
	padding: 0;
}


#main-nav {
	padding-top: 10px;
	padding-bottom: 10px;
}

@media (min-width: 800px) and (max-width: 5000px) {

	header,
	#main-navbar {
		padding-left: 60px;
	}
}


.cont-img-side {
	margin-right: 3px;
}

/* Contenedor de imagen y texto DENTRO DEL SIDENAV*/
#side-container {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 5px;
	margin: 5px;
	transition: all 0.3s ease;
}

#side-image {
	width: 30px;
	height: auto;
	transition: none;
	margin-left: 1rem;
}

#side-text {
	font-size: 16px;
	color: rgb(255, 255, 255);
	/* Color del texto */
	margin: 10px;
	/* Espacio entre la imagen y el texto */
	white-space: nowrap;
	/* Evitar salto de línea */
	opacity: 1;
	/* Texto visible por defecto */
	transition: opacity 0.3s ease, width 0.3s ease;
	/* Transición para texto */
	text-align: left;
	/* Alinear el texto a la izquierda */
}

/*SLIM*/
.sidenav-slm #side-text {
	opacity: 0;
	/* Ocultar texto */
	width: 0;
	/* Reducir espacio ocupado */
	overflow: hidden;
	/* Esconder contenido adicional */
}


/*EXPANDED*/
.sidenav-expanded #side-text {
	opacity: 1;
	/* Mostrar texto */
	width: auto;
	justify-content: flex-start;
	text-align: left;
	padding-top: 1px;
	margin-right: 1px;
	color: #545A67;
}

.sidenav-expanded #side-image {
	opacity: 1;
	width: 30;
	margin-left: 3px;
	margin-right: 2px;
}

#nav-toggle-btn {
	display: none;
}

#change-slim {
	display: unset;
}

@media (max-width: 800px) {

	/* Cuando la pantalla es pequeña, aplicar los mismos estilos */
	#side-container {
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	#side-image {
		width: 25px;
		height: auto;
	}

	#side-text {
		font-size: 14px;
		margin-left: 7px;
		opacity: 1;
		text-align: center;
	}

	#nav-toggle-btn {
		display: unset;
	}

	#change-slim {
		display: none;
	}

	#main-sidenav {
		transform: translateX(-100%);
	}
}

/*ICONOS DEL SIDENAV*/
/* Cambiar color del ícono y texto al pasar el mouse */
.sidenav-link:hover i#icon-sidenav,
.sidenav-link:hover span {
	color: #094780;
	/* Cambia al color deseado */
	transition: color 0.3s ease;
	/* Transición suave */
}

/* Color predeterminado para el texto de los links del sidenav */
.sidenav-link span {
	color: #9FA6B2;
	/* Color inicial del texto */
	transition: color 0.1s ease;
	/* Transición suave para el texto */
}

/* Asegurar la transición del ícono */
.sidenav-link i#icon-sidenav {
	transition: color 0.1s ease;
}

/* Estilo para el estado activo */
.sidenav-link.active i#icon-sidenav,
.sidenav-link.active span {
	color: #094780;
	/* Color deseado para el ícono y texto activos */
}

/*SCROLL PRUEBA PARA CAMBIARLE EL COLOR0*/
#scroll-container-side {
	color: #094780;
}