#circuit_left_tap{
    position:absolute;
    display:flex;
    height:calc(100% - 91px);
    width: 100%;
}

#circuit_editor_tap,
#circuit_component_tap{
    min-width: 328px;
}

#circuit_editor_tap{
    width: 328px;
    z-index: 300;
}
#circuit_component_tap{
    width: 100%;
}

/*에디터 및 컴포넌트 버튼 공통 설정*/
.circuit_editor_function_btns{
    background-color: var(--gray-Brighter);
    width: calc(100% - 28px);
    height: 58px;
    padding: 4px 14px;
}



.circuit_component_function_btns{
    position: absolute;
    background-color: var(--gray-Brighter);
    width: calc(328px - 16px);
    height: 58px;
    padding: 4px 8px;
    z-index: 300;
}
/*에디터 탭 버튼*/

.circuit_component_function_btn,
.circuit_editor_function_btn{
    cursor: pointer;
    float: left;
}
.circuit_component_function_btn .icon_background,
.circuit_editor_function_btn .icon_background{
    fill: var(--gray-Brighter);
}

.circuit_component_function_btn:hover .icon_background,
.circuit_editor_function_btn:hover .icon_background{
    fill: var(--main-color-light);
}

.circuit_component_function_btn:hover .icon_path,
.circuit_component_function_btn:hover .icon_tag,
.circuit_editor_function_btn:hover .icon_path,
.circuit_editor_function_btn:hover .icon_tag{
    fill: white;
}

.circuit_component_function_btn .icon_background_seleted,
.circuit_editor_function_btn .icon_background_seleted{
    fill: var(--gray-darkish);
}

.circuit_editor_function_btn .icon_path{
    fill: var(--main-color-darkish);
}


.circuit_tap_editor_libraryList_wrapper{

	background-color: var(--gray-Brighter);
	width: inherit;
	position: absolute;
	z-index: 400;
	
}

#circuit_editor_libraryList {	display:none;
	margin:4px;
	background:white;;
	padding:0px;
	list-style-type: none;
	list-style-image: none;
	max-height:192px;
	overflow: auto;
}
#circuit_editor_libraryList li{
	font-size: 20px;
    font-family: "TRGothic240A";
    padding:4px;
    cursor: pointer;
}
#circuit_editor_libraryList li:hover{

	background-color: var(--main-color-light);
	
}

.circuit_editor_libraryList_type{
	
	margin-right:5px;
	
	padding-top:4px;
	padding-bottom:1px;
	padding-left:4px;
	padding-right:4px;
	
	height: 18px;
	display: inline-block;
	border-radius: 4px;
	
	font-size: 14px;
	font-weight:normal;
	color:white;
	vertical-align: middle;

	
}


/*에디터 탭 두번째 기능 버튼*/
.circuit_tap_function_second_btns{
    background-color: var(--gray-Brighter);
    width: (100% - 28px);
    height: 30px;
    padding-left: 14px;
    padding-right: 14px;
    position: relative;
}

.circuit_editor_text_tap{
    bottom:0px;
    position: absolute;
    background-color: white;

    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    padding-top:6px;
    padding-left:10px;
    padding-right:10px;
}

.circuit_small_btns{
    padding:2px 0px;
    float: right;
}
.circuit_small_btn{
    cursor: pointer;
    margin-left: 3px;
}

.circuit_small_btn .icon_background{
    fill: var(--gray-Brighter);
}
.circuit_small_btn .icon_path{
    fill: var(--gray-darker);
}

.circuit_small_btn:hover .icon_background{
    fill: var(--main-color-light);
}




#componentSearch{
    top:66px;
    position: absolute;
    width: calc(328px - 28px);
    z-index: 300;
}





.circuit_editor_text_area{
    position: relative;
    background-color: var(--gray-Brighter);
    min-height: 200px;
    height: calc(100% - 250px);
    /* height: calc(100% - 250px);66+30+150 +4(padding_btm) */
}

#circuit_editor_codemirror{
    padding: 0px 4px;
    height: 100%;
}

#circuit_editor_console{
    position: relative;
}
#circuit_editor_console_title{
    background-color: var(--gray-Brighter);
    height: 30px;
    width: 100%;
    color:var(--gray-darker);
    position: relative;
}
#circuit_editor_console_title_name{
    fill: var(--gray-darker);
    padding-left: 14px;
    padding-top: 5px;
    padding-bottom: 5px;
}

#circuit_editor_console_hide{
    padding:3px;
    float: right;
    cursor: pointer;
}
#circuit_editor_console_hide .icon_background{
    fill:var(--gray-darkish);
}
#circuit_editor_console_hide .icon_path{
    fill:white;
}
#circuit_editor_console_hide:hover .icon_background{
    fill:var(--main-color-light);
}


#circuit_editor_console_show{
    cursor: pointer;
    position: absolute;
    right: 0px;
    bottom: 0px;
    z-index: 100;
}

#circuit_editor_console_show .icon_background{
    fill:var(--gray-darkish);
}
#circuit_editor_console_show .icon_path{
    fill:white;
}

#circuit_editor_console_show:hover .icon_background{
    fill:var(--main-color-light);
}




#circuit_editor_updown_resize{
    position: absolute;
    left: calc(50% - 17.8px);
    top:0px;
    cursor: n-resize;
}

#circuit_editor_side_resize{
    position: absolute;
    right: calc(100% - 328px - 18px);
    top:50%;
 
    cursor: e-resize;
    z-index: -50;

}

.circuit_tap_resize_btn .icon_background{
    fill:var(--gray-darkish);
}
.circuit_tap_resize_btn .icon_path{
    fill:white;
}

.circuit_tap_resize_btn .resize_btn_hover{
    fill:var(--main-color-light);
}


#circuit_editor_console_content {
    position: relative;
	
	border:0px;
    
    height: 100px;
    min-height: 100px;

    width: calc(100% - 20px); /*padding*/
    overflow: auto;
    padding: 10px;
    background-color: #666666;

    color: white;
    font-family: "TRGothic240A";
    font-weight: lighter;
    font-size: 15px;
    
    resize: none;
}


.circuit_tap_last_box{
    padding-left:4px;
    padding-right:4px;
    background-color: var(--gray-Brighter);
}


/*circuit_component*/




#searchInput{
    position: absolute;
    top:5px;
    left:35px;
    width: 140px;
    height: 20px;
    border-radius: 4px;
    border: 1px solid var(--gray-darkish);

    outline: none;

}

#searchButton{
    position: absolute;
    top:5px;
    cursor: pointer;
    border: 0px;
    padding: 0px;
    width: 20px;
    height: 20px;
    outline: none;
}

#searchButton .icon_background{
    fill: var(--gray-darkish);
}

#searchButton .icon_path{
    fill: var(--gray-darker);
}




#circuit_component_list{
    /* background-color: var(--gray-Brighter); */
    /* padding:0px 4px; */
    position: absolute;
    top:96px;
    z-index: 300;
    width: calc(328px - 8px);
    height: calc(100% - 100px); /*btn 66 30  padding-bottom 4*/
}


#componentPanel{
    

    background-color: white;
    width: calc(100% - 28px);
    height: calc(100% - 20px);
    padding: 10px 14px;
    overflow: auto;
    position:relative;

}


.circuit_component_list_component_panel .icon_tag{
    font-size:14px; 
    font-family: Nanum Square bold; /*Nanum Barun Gothic Normal,Nanum Square bold */
    text-anchor: middle;
    fill: var(--gray-darker);
    
}


.circuit_component_list_component_panel{
    cursor: pointer;
}


.circuit_component_list_component_panel .icon_background{
    fill:white;
}

.circuit_component_list_component_panel:hover .icon_background{
    fill:var(--main-color-light);
}

.circuit_component_list_component_panel:hover .icon_tag{
    fill: white;
   
}


/*
* 마우스 이동 안내
*/
.moveMouse {
    position: absolute; 
    z-index: 1000;
    top: 0; left: 0; 
    border-radius: 8px;
    padding:10px;
    font-size: 15px;
    font-family:Nanum Barun Gothic Normal; /*Nanum Barun Gothic Normal,Nanum Square bold */
    background-color:var(--main-color);
    color: white;
    opacity: 0.8;
}




#circuit_component_side_resize{
    position: absolute;
    right: calc(100% - 328px - 18px);
    top:50%;
 
    cursor: e-resize;
    z-index: 250;

}


.circuit_editor_errorLine{
	background-color: #ec44666b;
	color:#EC4466;
	
}