.navigation {
	max-width: 220px;
	min-width: 220px;
	width: 100%;
	/*     max-height: 100vh; */
/* 	max-height: calc(100vh - 1rem); */
	max-height: 100vh;
	height: auto;
	/* padding: 0 1.5rem; */
	transform: translateX(0);
	transition: all 0.3s;
	display: flex;
	align-items: start;
	justify-content: flex-start;
	overflow: hidden;
	-ms-overflow-style: none;
	/* background-color: var(--white-color-30); */
	box-shadow: none;
	scrollbar-gutter: stable;
	/*     background-image: url(/img/sidebar.png); */
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: var(--white-color-30);
	position: relative;
	flex-direction: column;
/* 	border-radius: 13px; */
/* 	border: solid 1px #B9BEC4; */
	border-right: 1px solid #e5e5ec;
	background-color: #0052a3;
}
.icon-warp .lucide{
	color: rgba(255,255,255,0.6);
}
.navigation::-webkit-scrollbar {
	display: none; /* Chrome, Safari용 스크롤바 숨김 */
}

.nav-header,.nav-footer {
	text-align: center;
	padding: 1rem 1.5rem;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;	
	width: 100%;
	background-color: #0052a3;
}
.nav-header{
	min-height: 59px;
	max-height: 59px;
/* 	border-bottom: #EAEAEA solid 1px; */
}
.nav-footer{
	height: 128px;
	padding: 0.5rem;
/* 	border-top: #EAEAEA solid 1px; */
}
.inner-navigation {
	z-index: -1;
	position: absolute;
	width: 100%;
	height: 100%;
}

.inner-navigation img {
	object-fit: cover;
	width: 100%;
	height: 100%;
	max-height: 100vh;
	max-width: 308px;
}

.navigation .nav {
	overflow: hidden;
	height: 100%;
	overflow-y: scroll;
	-ms-overflow-style: none; /* IE and Edge */
	scrollbar-width: none /* Firefox */
}

.navHeader {
	width: 100%;
	text-align: center;
	padding: 1rem 0 1rem;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 64px;
	border-bottom: solid 1px var(--gray-color-90)
}

.navigation .nav-dlogo {
	width: 0;
	display: none;
}

.navigation.active {
	transition: all 0.3s;
	max-width: 70px;
	min-width: 70px;
	width: 70px;
	scrollbar-gutter: auto;
}

.navigation.active .headerText {
	display: none;
	transition: all 0.3s;
}

.navigation.active .iconbox {
	justify-content: center;
}
.navigation.active .user-info-wrap .user-info{
	display: none !important;
	
}
.navigation.active .nav-doosanlogo {
	width: 0;
	display: none;
}

.navigation.active .nav-dlogo {
	display: flex;
	width: 48px;
}

.navigation.active .navHeader {
	padding: 1rem 0;
	width: 100%;
	transition: all 0.3s;
}
.navigation.active .sidebar-link{
	display: none;
}
.navigation.active .list-unstyled{
	height: 48px;
    display: flex;
    align-items: center;
}
.navigation.active .list-box{
	padding:0
}
.navigation.active .icon-warp{
	padding:0;
    display: flex;
    justify-content: start;
    width: 100%;
}
.navigation.active .list-warp{
	padding: 0 1rem;
	}	
.navigation.active .arrow-icon{
	display: none;
}
.nav {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	width: 100%;
}
.list-sub-menu-wrap.active{
	background-color: transparent;
    border-radius: 7px;
    cursor: pointer

}
.list-sub-menu-wrap.active .sub-menu-wrap .sub-menu{
    color: var(--main-color-100) !important;	
}
.navBody {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
}

.nav::-webkit-scrollbar, .navBody::-webkit-scrollbar {
	display: none; /* Chrome , Safari , Opera */
}

.logo-warp img {
	width: 120px;
}

.icon {
	padding: 0.525rem;
	border-radius:0.625rem;
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: 0.3s all;
}

.lucide {
	color: rgba(255,255,255,0.6);
}
.lucide-log-out {
	color: #8F9296 !important;
}
.sidebar-toggle .lucide {
	color: #767676;
}

.headersubText.on {
	font-weight: bold;
	color: #568fed !important;
}

.nav-b-left-contents .icon-box img {
	width: 24px;
	opacity: 0.5
}

.sidebar-link:hover,
.list-sub-menu-wrap.active a.sidebar-link {
	color: #fff !important;
}
.sidebar-link, a.sidebar-link{
	color: rgba(255,255,255,0.6) !important
	
}
.sidebar-item.active{
	background-color: var(--bs-blue);
	
}
.list-inline, .list-unstyled{
	padding-left: 1rem;
}
.sidebar-item.active .sidebar-link:hover, .sidebar-item.active>.sidebar-link{
	background-color: var(--main-color-100);	
}
.list-warp{
	padding: 0 0.5rem;	
	cursor: pointer;
}
.list-sub-menu-wrap {
	padding-left: 2.3rem;
    padding-top: 0.325rem;
    padding-bottom: 0.325rem;
}
.list-warp.on{
/* 	background-color: var(--white-color-50); */
/* 	background-color: var(--main-color-100); */
	background-color: #031060 ;
	transition: all 0.3s;
	height: 100%;
}
.list-unstyled{
	position: relative;	
}
.nav-body{
	padding:0.5rem;
}
/* .list-group:after { */
/* 	content: ""; */
/*     position: absolute; */
/*     left: 30px; */
/* /*     bottom: 18px; */ */
/*     width: 0.1px; */
/*     height: calc(100% - 42.75px); */
/*     background-color: rgba(255,255,255,0.3); */
/*     z-index: 1; */
/*     transition: all 0.3s; */
/*     display: flex; */
/* } */
.main_menu{
	font-size: var(--header-menu);
	color: #8F9296;
}
.sidebar-link, a.sidebar-link{
	padding:0 !important	
}
.sidebar-link.hide{
	display: none;
}
.list-warp:hover .sidebar-link,
.list-warp:hover .lucide
{
/* 	color: var(--main-color-100) !important; */
	color:  #fff !important;
}
.list-warp{
	border-radius: 7px;
}
.list-warp.on .sidebar-link,
.list-warp.on .lucide
{
/* 	color: var(--main-color-100) !important; */
	color: #fff !important;
}
.icon-warp{
	padding: 0.325rem;
	border: solid 1px transparent;
}

.arrow-icon{
	transform: rotate(0);
	transition: transform 0.3s;
}

.list-warp.on .arrow-icon{
		transform: rotate(180deg);
}

#themeChange {
width: 26px;
    height: 26px;
    border-radius: 50%;
    justify-content: center;
    margin: 0 auto;	
    cursor:pointer;
    color: rgba(255,255,255,0.6);
}

#themeChange:hover {
	color: #fff;
}

.user-info,
.last-login-date,
.user-icon .lucide {
	color: #fff;
}

.navigation.active .nav-footer{
	height: 220px;
}