@charset "UTF-8";

html, body, .contents-wrapper{
	/* height: 100%; */
	font-family: 'Noto Sans KR', sans-serif;
	background-color:  rgba(244, 245, 250, 1);
}

button
{
    box-shadow: none !important;
    border : none !important;
    outline: none !important;
}
input[type="checkbox"]
{
    box-shadow: none !important;
    outline: none !important;
}


/* 공통적용 파트 */

/* 컨테이너 내부 : 메뉴와 컨텐츠를 감싸는 가장 바깥 커버 스타일  */
.wrapper{
	background-color: #FFFFFF;
	height: 100%;
	min-height : 850px;
}

/* 페이지 이름 표시기 스타일 */
.top-page-indicator{ 
	height: 60px;
	position: relative;
	border-bottom: 1px solid rgba(221, 221, 221, 1);
}

.logout-btn-cover{
	position : absolute;
	right : 20px;
	bottom : 10px;
}
.top-page-indicator span{
	color:#19336F80;
	font-size : 18px;
	font-weight : 600;
	position: absolute;
	left : 20px;
	bottom : 10px;
}
/* 페이지 이름 표시기 스타일 end */


/*  메뉴와 컨텐츠를 감싸는 내부 커버 스타일 */
.contents-field{
	height: calc(100% - 60px);
}
.contents-field .contents-bg{
	min-height: 100%;
	
}

.contents-field .sect-left-menu{
	border-right : 1px solid rgba(221, 221, 221, 1);
}


.contents-field .sect-left-menu .inner-left-menu{
	/* max-height: 550px; */
	overflow: auto;
}
/*  메뉴와 컨텐츠를 감싸는 내부 커버 스타일 end */

/* 좌측 메뉴 스타일 */
.sect-left-menu .left-side-menu{ 
	margin-top : 25px;
	padding: 20px 10px 20px 10px;
}

.sect-left-menu  .left-side-menu li{ 
	display: flex;
    height: 40px;
    align-items: center;
    padding: 20px 8px;
	list-style: none;
	margin: 0;
	margin-bottom: 18px;
	border-radius: 5px;
}



.sect-left-menu  .left-side-menu li a{ 
	width: 100%;
	height: 30px;
}


.sect-left-menu  .left-side-menu li button{
	border: none;
	color: #19336F;
	background-color: inherit; 
	font-weight: 600;
}

.sect-left-menu  .left-side-menu li.active{ 
	background-color: #EEF2FE;
}

/* 활성화 일때 기본/활성화 상태 스타일 정의 */
.sect-left-menu .left-side-menu li a button{ 
	padding-left: 24px;
	background-position: left center ;
	background-repeat: no-repeat;
}

.sect-left-menu .left-side-menu li.active a button{ 
	font-weight: 600;
	font-size  : 16px; 
	border-radius: 8px;
	color : #446AD9;
}

.sect-left-menu  .left-side-menu li:hover a button{ 
	color : rgba(68, 106, 217, 0.4);
}

/* 기본 상태 */
.sect-left-menu .left-side-menu .btn-mng-account{ 
	background-image: url("/resources/images/icon_key.svg");
}
.sect-left-menu .left-side-menu .btn-mng-cam{ 
	background-image: url("/resources/images/camera.svg");
}

.sect-left-menu .left-side-menu .btn-view-cam{ 
	background-image: url("/resources/images/display.svg");
}


/* 활성화 상태 */
.sect-left-menu  .left-side-menu li.active .btn-mng-account{
	background-image: url("/resources/images/icon_key_active.svg");
}
.sect-left-menu  .left-side-menu li.active .btn-mng-cam{ 
	background-image: url("/resources/images/camera_active.svg");
}


/* 반응형 스타일 */
/* 휴대 디바이스에서만 적용될 스타일 : 우측 단축메뉴 선택시 오픈되는 캔버스 스타일 */
.drawer-menu-cover{
	height  : 50px;
	display : flex!important;
	justify-content: flex-end;
}
#drawer-menu{
	width : 50px;
	background-image: url("/resources/images/icon_menu.svg");
	background-position: center;
	background-repeat: no-repeat;
}

.canvas-menu ul{
	list-style: none;
}

.canvas-menu ul li.active{ 
	background-color: #EEF2FE;
}


/* 좌측메뉴 활성화 일때 기본/활성화 상태 스타일 정의 */
.canvas-menu ul li{ 
	display: flex;
    height: 40px;
    align-items: center;
    padding: 5px 8px;
	list-style: none;
	margin: 0;
	margin-bottom: 18px;
	border-radius: 8px;
}
.canvas-menu ul li a{ 
	width: 100%; 
}

.canvas-menu ul li a button{ 
	background-color: inherit;
	padding-left: 24px;
	background-position: left center ;
	background-repeat: no-repeat;
	width: 100%;
	text-align: left; 
}
.canvas-menu ul li a button span{
	display: inline-block;
	width: 100%;  
	
}
.canvas-menu ul li.active a button{ 
	font-weight: 600;
	font-size  : 16px; 
	border-radius: 8px;
	color : #446AD9;
	
}

/* 기본 상태 */
.canvas-menu ul li .btn-mng-account{ 
	background-image: url("/resources/images/icon_key.svg");
}
.canvas-menu ul li .btn-mng-cam{ 
	background-image: url("/resources/images/camera.svg");
}

.canvas-menu ul li .btn-view-cam{ 
	background-image: url("/resources/images/display.svg");
}



/* 활성화 상태 */

.canvas-menu ul li.active .btn-mng-account{
	background-image: url("/resources/images/icon_key_active.svg");
}
.canvas-menu ul li.active .btn-mng-cam{ 
	background-image: url("/resources/images/camera_active.svg");
}


/* 좌측 메뉴 스타일 end */

/* 공통적용 미디어 쿼리  */

@media (min-width: 993px){
	html, body, .contents-wrapper{
		height: 100%; 
	}
}


@media (max-width: 992px){
	.wrapper {
    	border-radius: 8px;
    	box-shadow: 0px 3px 6px rgb(0 0 0 / 8%);
	}
	
	.sect-left-menu  .left-side-menu li a button{ 
		font-size  : 14px; 
	}

	.contents-wrapper{
		padding-top: 25px;
		padding-bottom: 25px;
	}
	
}

/* 스크롤 바 변경 */
/* 스크롤바 설정*/
.inner-left-menu::-webkit-scrollbar{
    width: 	6px;
}

/* 스크롤바 막대 설정*/
.inner-left-menu::-webkit-scrollbar-thumb{
    height: 17%;
    background-color: rgba(0, 0, 0, 0.3);
    /* 스크롤바 둥글게 설정    */
    border-radius: 10px;    
}

/* 스크롤바 뒷 배경 설정*/
.inner-left-menu::-webkit-scrollbar-track{
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 10px;    
}