/*
 파일명:			svy_left_overay.css
 기능설명:		svy_v5.css -> left 영역 추가
 작성자:			강은영
 최종수정일:	2022.05.01
 */

 .dis_flex{
	display:-ms-flexbox;
	display:-webkit-flex;
	display:flex;
		-webkit-flex-wrap:nowrap;
		-ms-flex-wrap:nowrap;
	flex-wrap:nowrap;
		-webkit-justify-content:space-between;
		-ms-flex-pack:justify;
	justify-content:space-between;
		-webkit-align-items:center;
		-ms-flex-align:center;
	align-items:center;
	box-sizing:border-box;
}
.dis_flex.start{
	-webkit-box-pack: start !important;
    -ms-flex-pack: start !important;
        justify-content: flex-start !important;
	-webkit-flex-wrap:wrap;
	-ms-flex-wrap:wrap;
		flex-wrap: wrap;
}
.dis_flex.start .radio-wrap-2{
	width: 100%;
}
/*header.sub-top-wrap{position:relative;}
.content-wrap{height:auto; min-height:100%;}
.content-wrap-make{padding:1em;}
.survey-top-snb,
.content-wrap #content.content-tab-wrap{
	position:relative;
	top:auto !important;
	left:auto; right:auto; bottom:auto;
	margin-bottom:1em;
}*/

.box_overay{
	position:fixed; top:0; left:0; z-index:1000;
	width:100%; height:100%;
	background:rgba(0, 0, 0, 0.6);
}

.box_leftmenu{
	position:fixed; left:0; top:0; z-index:1001;
	width:70%; min-width:250px; max-width:460px; height:100%; background:#fff;
	-webkit-box-shadow:3px 0px 5px 0px rgba(0,0,0,0.2);
	-moz-box-shadow:3px 0px 5px 0px rgba(0,0,0,0.2);
	box-shadow:3px 0px 5px 0px rgba(0,0,0,0.2);
	display:-ms-flexbox;
	display:-webkit-flex;
	display:flex;
	-webkit-flex-direction:column;
	-ms-flex-direction:column;
	flex-direction:column;
	-webkit-flex-wrap:nowrap;
	-ms-flex-wrap:nowrap;
	flex-wrap:nowrap;
}
.box_leftmenu .top_area{position: relative; background:#f5f5f5; border:1px solid #e1e1e1; width:100%; height:50px; padding:0 20px;}
.box_leftmenu .top_area::after{
	/* content: ""; position: absolute; top:100%; left:0; z-index: 1;
	width: calc(100% - 7px); height: 20px; 
	background: rgb(255,255,255);
	background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);	 */
}

.box_leftmenu .top_area,
.box_leftmenu .top_area .tooltip_area{
	display:-ms-flexbox;
	display:-webkit-flex;
	display:flex;
	-webkit-flex-wrap:nowrap;
	-ms-flex-wrap:nowrap;
	flex-wrap:nowrap;
	-webkit-justify-content:space-between;
	-ms-flex-pack:justify;
	justify-content:space-between;
	-webkit-align-items:center;
	-ms-flex-align:center;
	align-items:center;
	box-sizing:border-box;
}
.box_leftmenu .top_area > h1{font-size:15px; font-weight:600;}
.box_leftmenu .top_area.tab{
	width: 100%; background-color: #eee; border: 0; padding: 0;
	display: flex;
    justify-content: space-around;
    align-items: center;	
}
.box_leftmenu .top_area.tab li{flex: 1; height: 100%;}
.box_leftmenu .top_area.tab label{
	width: 100%; height: 100%;
	font-size: 15px; font-weight: 600; letter-spacing: -0.5px; color:rgba(0, 0, 0, 0.4); 
	display: flex;
    justify-content: center;
    align-items: center;
}
	.box_leftmenu input[name="tab-input"] {display: none;}
	.box_leftmenu input[name="tab-input"]:nth-of-type(1):checked ~ .top_area.tab li:nth-of-type(1) label,
	.box_leftmenu input[name="tab-input"]:nth-of-type(2):checked ~ .top_area.tab li:nth-of-type(2) label{color:#000; background-color: #fff;}
	
.box_leftmenu .top_area.tab_single {background-color: #f5f5f5; border-bottom: 1px solid #eee; padding: 0 20px;}
.box_leftmenu .top_area.tab_single > li{
	display: flex;
	justify-content: space-between;
}
.box_leftmenu .top_area.tab_single > li > label{
	flex:1; width: auto; justify-content: flex-start;
	background-color: transparent !important; cursor: auto;
}
.box_leftmenu .con_area{	
	position:relative; padding:20px; padding-right: 13px; flex:1;
    overflow-y:scroll; box-sizing:border-box;
}
	.box_leftmenu .con_area .con{display: none; position: relative;}
	.box_leftmenu .con_area .con > .tooltip_area{margin-top: -10px; margin-bottom: 10px;}
	.box_leftmenu input[name="tab-input"]:nth-of-type(1):checked ~ .con_area .con:nth-of-type(1),
	.box_leftmenu input[name="tab-input"]:nth-of-type(2):checked ~ .con_area .con:nth-of-type(2){
		display: block;
	}
	
.box_leftmenu .tooltip_area{
	display: flex;
    flex-wrap: nowrap;
	justify-content: flex-end;
	align-items: center;
}
.box_leftmenu .tooltip_area h5{
	font-size:11px; color:#999; margin-right:5px; font-weight: 500; line-height: 0;
	/* -moz-opacity:0.5;
	filter:alpha(opacity=50);
	opacity:0.5; */
}
.box_leftmenu .tooltip_area button{
	color:#222; border:1px solid #222;
	font-size:10px; font-weight:600; border-radius:3px; margin-right:3px;
	padding:3px 4px 1px 3px;
	-moz-opacity:0.5;
	filter:alpha(opacity=50);
	opacity:0.5;
}
.box_leftmenu .tooltip_area button:last-child{margin-right:0;}
.box_leftmenu .tooltip_area button:hover{
	-moz-opacity:1;
	filter:alpha(opacity=100);
	opacity:1;
}
.box_leftmenu .tooltip_area button.active{
	background:#ed5c23;
	border:1px solid #ed5c23; color:#fff;
	-moz-opacity:1;
	filter:alpha(opacity=100);
	opacity:1;
}
.box_leftmenu .top_area .tooltip_area{}
.box_leftmenu .top_area.tab_single.tab_list-item .tooltip_area{display: flex;}
.box_leftmenu .top_area.tab_single.tab_list-item + .con_area .con > .tooltip_area{}

/* 왼쪽영역 하단버튼 */
.box_leftmenu .foot_area{margin-top:auto; position: relative;}
.box_leftmenu .foot_area::before{
	/* content: ""; position: absolute; top:-20px; left:0;
	width: calc(100% - 7px); height: 20px; 
	background: rgb(255,255,255);
	background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);	 */
}
.box_leftmenu .foot_area .btn_area{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	grid-gap: 0;
}
.box_leftmenu .foot_area .btn_area li{flex: 1; text-align:center; padding:0;}
.box_leftmenu .foot_area .btn_area li button{width: 100%; height: 100%;}
.box_leftmenu .foot_area .btn_area li button span{height: auto; font-size: 14px; font-weight: 700;}

.box_leftmenu .foot_area .btn_area .btn-item.reset{background-color: #eee; color:#999;}
.box_leftmenu .foot_area .btn_area .btn-item.reset i{opacity: 0.8;} 
.box_leftmenu .foot_area .btn_area .btn-item.reset:hover{background-color: #555; color: #fff;}
.box_leftmenu .foot_area .btn_area .btn-item.reset:hover i{filter: brightness(100); opacity: 1;}
.box_leftmenu .foot_area .btn_area .btn-item.import{background-color: #ed5c23; color:#fff;}
.box_leftmenu .foot_area .btn_area .btn-item.import i{filter: brightness(100);} 
.box_leftmenu .foot_area .btn_area .btn-item.import:hover{background-color: #dc2105; color: #fff;}
.box_leftmenu .foot_area .btn_area .btn-item{flex-direction: row;}
.box_leftmenu .foot_area .btn_area .btn-item .ico{margin-bottom: 0; margin-right: 5px;}
.box_leftmenu .foot_area .btn_area .btn-item span{font-weight: 600; font-size: 14px;}
	.box_leftmenu .foot_area .btn_area.style_tab{/* 가로형 탭스타일 */}
	.box_leftmenu .foot_area .btn_area.style_tab .btn-item{padding:15px 5px; border-radius: 0; border:0;}
	.box_leftmenu .foot_area .btn_area.style_tab .btn-item .ico{margin-bottom: 0; margin-right: 5px;}
	.box_leftmenu .foot_area .btn_area.style_tab .btn-item span{font-weight: 600; font-size: 14px;}
	.box_leftmenu .foot_area .btn_area.style_row{/* 세로형 */ padding:20px; padding-top: 0;}
	.box_leftmenu .foot_area .btn_area.style_row li{flex-basis: 100%; margin-bottom: 10px;}
	.box_leftmenu .foot_area .btn_area.style_row li:nth-child(1){order: 1; margin-bottom: 0;}
	.box_leftmenu .foot_area .btn_area.style_row .btn-item.reset,
	.box_leftmenu .foot_area .btn_area.style_row .btn-item.import{
		background-color: #fff; padding:10px 0; border: 2px solid #CCC;
	}
	.box_leftmenu .foot_area .btn_area.style_row .btn-item.reset:hover{background:#555; border-color: #555;}
	.box_leftmenu .foot_area .btn_area.style_row .btn-item.import{border-color: #ed5c23; color: #ed5c23;}
	.box_leftmenu .foot_area .btn_area.style_row .btn-item.import i{filter:invert(53%) sepia(81%) saturate(4010%) hue-rotate(348deg) brightness(96%) contrast(93%);}
	.box_leftmenu .foot_area .btn_area.style_row .btn-item.import:hover{background:#ed5c23; border-color: #ed5c23; color:#fff;}
	.box_leftmenu .foot_area .btn_area.style_row .btn-item.import:hover i{filter: brightness(200);}
	

/* 왼쪽메뉴 토글 */
.list-item{margin-bottom:0px;}
.drawer_wrapper.box_leftmenu.scroll-top .list-item{margin-bottom:0;}
.list-item > ul > li{padding:10px 0;}

	/* Depth-1 .list-link */
	.list-item .list-link{
		position:relative; display:block; padding:3px 0;
		font-size:13px; font-weight:700; color:#000;
		cursor:pointer;
		box-sizing:border-box;
	}
	.list-item .list-link::after {
		content:""; position:absolute; top:50%; right:0px; z-index:0;
		margin-top:-2px; padding:2.5px; border-width:0 2px 2px 0;
		border-style:solid; color:#000;
		-webkit-transition:transform 0.2s ease-out;
		-ms-transition:transform 0.2s ease-out;
		transition:transform 0.2s ease-out;
		-webkit-transform:translate(0, -50%) rotate(45deg);
		-ms-transform:translate(0, -50%) rotate(45deg);
		transform:translate(0, -50%) rotate(45deg);
	}
	.list-item .is-open > .list-link{color:#ed5c23;}
	.list-item .is-open > .list-link:after {
		color:#ed5c23; margin-top:2px;
		-webkit-transform:translate(0, -50%) rotate(225deg);
		-ms-transform:translate(0, -50%) rotate(225deg);
		transform:translate(0, -50%) rotate(225deg);
	}
	.list-item.type-underline .is-open{border-bottom: 1px solid #E7EAF1; padding:20px 0;}
	.list-item.type-underline .is-open:first-child{padding-top: 0;}
	.list-item.type-underline .is-open:last-child{border: 0; padding-bottom: 0;}

	/* 버튼영역 */
	.list-btns{}
	.list-btns ul{
		display:grid;
		grid-template-columns: repeat(auto-fill, minmax(94.5px, 1fr));
		grid-gap: 8px;
	}
	.list-btns ul > li > button{width: 100%; height: 100%;}
	.list-btns .btn-item{
		width:100%; height:60px; position:relative;
		font-size:12px; color:#555;
		border:1px solid #DDD; background:#fff;
		border-radius:5px; box-sizing:border-box;
		display:-ms-flexbox;
		display:-webkit-flex;
		display:flex;
		-webkit-flex-wrap:nowrap;
		-ms-flex-wrap:nowrap;
		flex-wrap:nowrap;
		-webkit-flex-direction:column;
		-ms-flex-direction:column;
		flex-direction:column;
		-webkit-justify-content:center;
		-ms-flex-pack:center;
		justify-content:center;
		-webkit-align-items:center;
		-ms-flex-align:center;
		align-items:center;
		-webkit-transition:all 0.2s;
		-ms-transition:all 0.2s;
		transition:all 0.2s;
	}
	.list-btns .btn-item .ico,
	.list-btns .btn-item > i.ico{width:18px; height:18px; margin-bottom:5px; }
	.list-btns .btn-item .tooltip{
		display:none; 
		position:absolute; top:2px; right:2px; width:15px; height:15px;
		background-color:#fff; border-radius:3px; cursor: pointer;
	}
	.list-btns .btn-item .tooltip > i{
		position:absolute; top:0; right:0; width:100%; height:100%;
		background-size:72%; background-repeat:no-repeat; background-position:50% 50%;
		filter:invert(53%) sepia(81%) saturate(4010%) hue-rotate(348deg) brightness(96%) contrast(93%);
	}
	.list-btns .btn-item .tooltip > i.color_gray{
		filter:grayscale(1) brightness(6);
	}
	.list-btns .btn-item .upgrade{
		display: block; background-color: transparent;
		position: absolute;	top: 2px; right: 2px; width: 15px; height: 15px;
		border-radius: 3px;
	}
	.list-btns .btn-item .upgrade > i{
		position:absolute; top:0; right:0; width:100%; height:100%;
		background-size:72%; background-repeat:no-repeat; background-position:50% 50%;
		filter:invert(53%) sepia(81%) saturate(4010%) hue-rotate(348deg) brightness(96%) contrast(93%);
	}
	.list-btns .btn-item .upgrade > i.color_gray{
		filter:grayscale(1) brightness(6);
	}
	.list-btns .btn-item .pos_left{right: auto; left: 2px;}
	
	.list-btns .btn-item:hover{
		background-color:#fdede7; border:1px solid #fdede7; color:#ed5c23;
		-webkit-transition:all 0.2s;
		-ms-transition:all 0.2s;
		transition:all 0.2s;
	}
	.list-btns .btn-item:hover .ico{
		filter:invert(53%) sepia(81%) saturate(4010%) hue-rotate(348deg) brightness(96%) contrast(93%);
	}
	.list-btns .btn-item:hover .tooltip{display:block;}
	.list-btns .btn-item .tooltip.dis_none,
	.list-btns .btn-item:hover .tooltip.dis_none{display: none;}
	.list-btns .btn-item .upgrade.tooltip.dis_none,
	.list-btns .btn-item:hover .upgrade.tooltip.dis_none{display: block;}
	.list-btns span{font-size:13px;}

	.list-btns .btn-item.draggable-disabled{color:#bbb;}
	.list-btns .btn-item.draggable-disabled > .ico{opacity: 0.6;}
	.list-btns .btn-item.draggable-disabled > span{}
	.list-btns .btn-item.emphasis{color:#ed5c23; border: 1px solid rgba(237, 92, 35, .4); font-weight: 700;}
	.list-btns .btn-item.emphasis .ico,
	.list-btns .btn-item.emphasis:hover .ico{
		filter:invert(53%) sepia(81%) saturate(4010%) hue-rotate(348deg) brightness(96%) contrast(93%);
		/* filter: brightness(0.7); */
	}

/* 스크롤관련 */
.box_leftmenu .scrollbar-inner > .scroll-element.scroll-y,
.tooltip_contents .scrollbar-inner > .scroll-element.scroll-y{
	top:3px; right:3px; width:6px;
}
.box_leftmenu .scrollbar-inner > .scroll-element div,
.tooltip_contents .scrollbar-inner > .scroll-element div{height:calc(100% - 3px);}


.box_leftmenu .scrollbar-inner > .scroll-element .scroll-element_track,
.tooltip_contents .scrollbar-inner > .scroll-element .scroll-element_track{background:transparent;}

/* 레이아웃 편집 */
.list-layout{}
.list-layout > ul{
	display: flex;
	flex-direction: column;
	width: 100%; 
}
.list-layout > ul > li{border-bottom:1px solid #eee; padding:10px 0;}
.list-layout > ul > li:first-child{padding-top: 0;}
.list-layout > ul > li:last-child{border: 0;}
.list-layout .layout-items{max-width: 100%;}
.list-layout .layout-items > div{padding:10px 0;}
.list-layout .layout-items > div:first-child{padding-top: 0;}
.list-layout .layout-items .form-switch.dis_flex{line-height: 1;}
.list-layout .layout-items .switch-title{font-size: 12px; font-weight: 600; color: #333; margin: 0; padding: 0; line-height: 1.25;}
.list-layout .layout-items .form-items{margin-top: 5px;}
.list-layout .layout-items .form-items > div{padding:5px 0;}
.list-layout .layout-items .form-items .form-switch .switch-title{font-weight: 400;}

/* 테마 색상 설정 */
.layout-items-theme{}
.layout-items-theme .btn_make_theme{
	padding:5px 10px;
	font-size: 11px; color: #555; line-height:1;
	border: 1px solid #ddd; border-radius: 50pt;
}
.layout-items-theme .btn_make_theme:hover{background-color: #eee; transition: all .5s;}
.layout-items-theme .btn_make_theme::before{
	content: "\2b"; display: inline-block; margin-right: 3px;
	font-family: "Font Awesome 6 Free"; 
	color: #ed5c23; font-weight: 900; vertical-align: -1px;
}
.layout-items-theme .form-items{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(130px, auto));
	column-gap: 50px;
}
.layout-items-theme .form-items > div{}
.layout-items-theme .my-theme{
	
}


/* 도움말 툴팁 */
.tooltip_contents{
	top:85px !important;
	left:280px !important;
	width:calc(100% - 360px);
	max-width:1090px;
	border: 1px solid #ddd;
}

.tooltip_contents .close{
	background-image:var(--ico_icon_close);
	background-repeat:no-repeat; background-size:cover;
    width:20px; height:20px; top:15px; right:20px;
}
.tooltip_contents .close:after{display:none;}

.tooltip_contents h1{
		display:-ms-flexbox;
		display:-webkit-flex;
    display:flex;
		-webkit-align-items:center;
		-ms-flex-align:center;
    align-items:center;
	box-sizing:border-box;
	width:100%; height:50px; padding:0 20px;
	background:#EEE; color:#222; font-size:17px; font-weight:600;
	border-radius:5px 5px 0 0;
}
.tooltip_contents h1 i{
	margin-right:10px; width:18px; height:18px;
	filter:invert(0%) sepia(98%) saturate(8%) hue-rotate(196deg) brightness(40%) contrast(100%);
}
.tooltip_contents .con{overflow-y:auto; padding-top: 20px;}
.tooltip_contents .con:first-child:before,
.tooltip_contents .con:first-child:after{content:""; height:20px; border:1px solid rgba(0,0,0,0);}
.tooltip_contents .con > .survey-set{padding-left: 20px; padding-right: 20px;}
	/* 툴팁 스크롤바 모양 */
	.tooltip_contents .con::-webkit-scrollbar {
		width: 7px;  /* 스크롤바의 너비 */
	}
	.tooltip_contents .con::-webkit-scrollbar-thumb {
		height: 30%; /* 스크롤바의 길이 */
		background: rgba(0, 0, 0, .2); /* 스크롤바의 색상 */    
		border-radius: 10px;
	}
	.tooltip_contents .con::-webkit-scrollbar-thumb:hover{background: rgba(0, 0, 0, .3);}
	.tooltip_contents .con::-webkit-scrollbar-track {
		background: rgba(255, 255, 255, .1);  /*스크롤바 뒷 배경 색상*/
	}


	/* 테스트/보트 전용 style */
	.tooltip_contents_v2{
		width: 100vw; max-width: 100vw; height: 100vh; 
		top:0 !important; left: 260px !important; background-color: #00000050 !important; z-index: 299 !important;
	}
	.tooltip_contents_v2 .webui-popover-inner{
		position: relative; left: 20px; top: 100px;
		width: calc(100% - 500px); max-width: 1090px; background: #fff;
	}

/* 사이드바 나타나기 */
.drawer{display:none;}
.drawer_overlay {
	position:fixed; top:0; right:0; bottom:0; left:0; width:100%; z-index:200;
	opacity:0;
	transition:opacity 0.3s;
	will-change:opacity;
	background-color:#000;
		-webkit-user-select:none;
		-moz-user-select:none;
		-ms-user-select:none;
	user-select:none;
}
.drawer_wrapper{
	transition:transform 0.3s;
	will-change:transform;
		-webkit-transform:translate3d(103%, 0, 0);
	transform:translate3d(103%, 0, 0);
	-webkit-overflow-scrolling:touch;
}
.drawer-left .drawer_wrapper{
	top:50px; left:0; right:auto;
		-webkit-transform:translate3d(-100%, 0, 0);
	transform:translate3d(-100%, 0, 0);
}
.drawer-left .drawer_wrapper.scroll-top{
	top:0px;
}
.drawer.is-active{display:block;}
.drawer.is-visible .drawer_wrapper{
		-webkit-transform:translate3d(0, 0, 0);
	transform:translate3d(0, 0, 0);
}
.drawer.is-visible .drawer_overlay{
	opacity:0.6;
}

/* 왼쪽메뉴 스크롤바 모양 */
.box_leftmenu .con_area::-webkit-scrollbar {
    width: 7px;  /* 스크롤바의 너비 */
}
.box_leftmenu .con_area::-webkit-scrollbar-thumb {
    height: 30%; /* 스크롤바의 길이 */
    background: rgba(0, 0, 0, .2); /* 스크롤바의 색상 */    
    border-radius: 10px;
}
.box_leftmenu .con_area::-webkit-scrollbar-thumb:hover{background: rgba(0, 0, 0, .3);}
.box_leftmenu .con_area::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, .1);  /*스크롤바 뒷 배경 색상*/
}

/* 유료회원 모달창 커스텀 */
#modal-upgrade .modal-header{align-items: center;}
#modal-upgrade .modal-header .close{display: none;}
#modal-upgrade .modal-title .ico{margin-right: 10px; filter: brightness(0.7);}
#modal-upgrade .upgrade_txt{}
#modal-upgrade .upgrade_txt span{display: block; color: #555; word-break: keep-all; }
#modal-upgrade .upgrade_txt .more{display: inline-block; color: #1686FF; margin-top: 10px;}
#modal-upgrade .upgrade_txt .more::before{content: "\f35d";font: var(--fa-font-solid); font-size: smaller; margin-right: 5px;}
#modal-upgrade .upgrade_txt .box{margin-top: 15px; border-radius: 5px; padding:20px 10px; text-align: center;}
#modal-upgrade .upgrade_txt .box strong{display: block; color: #ed5c23;}
#modal-upgrade .upgrade_txt .box strong+span{margin-top:5px;}
#modal-upgrade .upgrade_txt .box span i.fa-solid{font-size: 15px; vertical-align: -1px; margin-right: 5px; color: #999;}
#modal-upgrade .upgrade_txt .box span a{display: inline-block; margin: 0 5px;}
#modal-upgrade .modal-footer{border-top: 0; justify-content: center; padding: 0 0.75em 1.25em;}
#modal-upgrade .modal-footer .btn{
	font-size: 14px; font-weight: 600; color: #fff; letter-spacing: 0;
	background:#999; min-height: 32px;  border-radius: 5px; padding: 4px 10px;
}
#modal-upgrade .modal-footer .btn.primary{background:#ed5c23; color: #fff !important;}
@media(max-width:1024px){
	.list-btns ul li{
		/* width: calc(50% - 10px); */
	}
	.box_leftmenu{
		max-width: 280px;
	}
	.tooltip_contents{
		/* left:300px !important; */
		width:calc(100% - 310px);
	}
}
@media(max-width:767px){
	.tooltip_contents{
		left:20px !important;
		width:calc(100% - 50px);
	}
}