@charset "UTF-8";

/* container */
.filter_wrap .ssfilter_cont{
	width:100%;
	display:flex;
}
.filter_wrap .ssfilter_cont > div{
	height:32px;
	float:left;
	margin-left:5px;
	
	border:1px solid #e3e3e3;
	box-sizing:border-box;
}
.frame_div,
.frame_div_in_modal{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    opacity: 0.5;
}
.frame_div_in_modal{
	z-index: 3;
}
.modal_selected,
.filter_modal_selected {
    z-index: 4;
}
/* common */
.filter_wrap .clickable,
.filter_wrap .ssfilter_cont > .ssfilter_keyword .search_btn,
.filter_wrap .ssfilter_cont > .ssfilter_filter,
.filter_wrap .ssfilter_cont > .ssfilter_status,
.filter_wrap .ssfilter_cont > .ssfilter_calendar .calendar_icon{
	cursor:pointer;
}
.filter_wrap .ssfilter_cont > div input{
	height:calc(100% - 10px);
	padding:0px 5px;
	margin:0px;
	border:0px;
	border-right:1px solid #e3e3e3;
	height:100%;
	box-sizing:border-box;
}
.filter_wrap .ssfilter_cont span,
.filter_wrap .ssfilter_cont input{
	font-size:14px;
}
.filter_modal.filter_modal_container .xi-sepoa-dummy,
.filter_wrap .ssfilter_cont .xi-sepoa-dummy{
	display: flex;
    justify-content: center;
    align-items: center;
}
.filter_modal.filter_modal_container .xi-sepoa-dummy:before,
.filter_wrap .ssfilter_cont .xi-sepoa-dummy:before{
	font-size:18px;
	color:#D86367;
}

.filter_wrap .ssfilter_cont .option_container {
	height:100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	position: relative;
	margin-right:5px;
	border: 1px solid #e3e3e3;
	
}
.filter_wrap .ssfilter_cont .option_container .option_container_wrapper {
	height: 100%;
	display: flex;
	cursor: pointer;
}
.filter_wrap .ssfilter_cont .option_container .option_span {
	height: 100%;
	min-width: 75px;
	padding: 5px;
	
	box-sizing:border-box;
	border-right: 1px solid #e3e3e3;
	display: flex;
	
	justify-content: flex-start;
	align-items: center;
	font-size: 12px;
	
	overflow: hidden;
	white-space:nowrap;
	text-overflow: ellipsis;
}
.filter_wrap .ssfilter_cont .option_container .option_btn {
	height: 100%;
	width: 25px;
	box-sizing:border-box;
	
	justify-content: center;
	align-items: center;
	font-size: 12px;
}
.filter_wrap .ssfilter_cont .option_container .option_btn:before{
	font-size: 18px;
    color: #D86367;
    content: "\e942";
}
.filter_wrap .ssfilter_cont .option_container .option_btn.combo_icon_up:before {
	content: "\e945";
}

/* keyword */
.filter_wrap .ssfilter_cont > .ssfilter_keyword{
	margin-left:0px;
	max-width:500px;
	min-width:100px;
	display:flex;
	border: 0px;
	
	flex:1;
}
.filter_wrap .ssfilter_cont > .ssfilter_keyword .search_input{
	flex:1;
	width: 100%;
	border: 1px solid #e3e3e3;
}
.filter_wrap .ssfilter_cont > .ssfilter_keyword .search_btn{
	height:30px;
    width: 30px;
    flex:none;
    cursor: pointer;
    border: 1px solid #e3e3e3;
    border-left:none;
}
.filter_wrap .ssfilter_cont > .ssfilter_keyword .search_btn:before{
	content:"\e97a";
}

/* filter , status*/
.filter_wrap .ssfilter_cont > .ssfilter_filter,
.filter_wrap .ssfilter_cont > .ssfilter_status{
	background-color:#f6f6f6;
	flex:none;
}
.filter_wrap .ssfilter_cont > .ssfilter_filter .filter_icon_span_wrapper,
.filter_wrap .ssfilter_cont > .ssfilter_status .status_icon_span_wrapper{
	height:100%;
	padding:0px 5px;
	
	display:flex;
	justify-content: center;
    align-items: center;
	
}
.filter_wrap .ssfilter_cont > .ssfilter_filter .filter_icon_span_wrapper span,
.filter_wrap .ssfilter_cont > .ssfilter_status .status_icon_span_wrapper span{
	padding-left:2px;
}
.filter_wrap .ssfilter_cont > .ssfilter_filter .filter_icon:before{
	content:"\e9d9";
}
.filter_wrap .ssfilter_cont > .ssfilter_status .status_icon:before{
	content: "\eaf5"
}

/* calendar */
.filter_wrap .ssfilter_cont > .ssfilter_calendar,
.ssfilter_calendar{
	display:flex;
	border:0px;
	height:32px;
	flex:none;
}
.ssfilter_calendar > div{
	height:calc(100% - 2px);
	border:1px solid #e3e3e3;
}
.ssfilter_calendar .date_container{
	padding:0px 5px;
	
	display:flex;
	justify-content: center;
    align-items: center;
}
.filter_wrap .ssfilter_cont > .ssfilter_calendar .date_container input,
.ssfilter_calendar .date_container input{
	width:86px;
	border:0px;
	text-align:center;
}
.ssfilter_calendar .calendar_icon{
	width:30px;
	margin-left:5px;
	
	background-color:#f6f6f6;
	flex:none;
}
.ssfilter_calendar .calendar_icon:before{
	content: "\e9a0";
}

/* filter condition */
.filter_wrap .condition_container {
    height: 32px;
    
    margin-top: 10px;
    
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.filter_wrap .condition_container .title {
    font-size: 11px;
    margin:0px 5px 0px 5px;
    
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.filter_wrap .condition_container .box_container{
	display:flex;
}
.filter_wrap .condition_container .condition_box {
    margin:2px 5px;
    padding: 0px 13px;
    
    display: flex;
    justify-content: space-around;
    align-items: center;

    background-color: #e3e3e3;
    border-radius: 20px;

	overflow: hidden;
    flex-direction:inherit;
    flex-wrap:nowrap;
    
    font-size:12px;
}
.filter_wrap .condition_container .condition_box .condition{
	height:29px;
	padding:0px 3px;
	
	display: flex;
    justify-content: center;
    align-items: center;
}
.filter_wrap .condition_container .condition_box .condition .condition_span{
	margin-right:3px;
	
	display: flex;
    justify-content: center;
    align-items: center;
}
.filter_wrap .condition_container .condition_box .condition .clear_btn {
    font-size: 12px;
    cursor: pointer;
    
    display: flex;
    justify-content: center;
    align-items: center;
}
.filter_wrap .condition_container .condition_box .condition .clear_btn:before{
	content:"\e921";
}
.filter_wrap .condition_container .ssfilter_clearBtn {
	height:32px;
    margin-left: 5px;
    
    cursor: pointer;
    font-size: 20px;
    
    display: flex;
    justify-content: center;
    align-items: center;	
}
.filter_wrap .condition_container .ssfilter_clearBtn:before{
	content: "\e970";
}

/* filter - modal - filter */
.filter_modal.hiding,
.filter_modal.filter_hiding {
    display: none !important;
}
.filter_modal.filter_modal_container {
	position: absolute;
	
	width: 430px;
    box-shadow: rgb(221, 221, 221) 1px 1px 4px 2px;
    z-index: 3;
}
.filter_modal.filter_modal_container .filter_modal_wrapper .topbar {
    width:inherit;
    height: 40px;
    padding: 0px 30px;
    
    background-color: #4b555b;
    color:#ffffff;
    
    display:flex;
    justify-content: space-between;
    align-items: center;
}
.filter_modal.filter_modal_container .filter_modal_wrapper .topbar .title{
	font-size:16px;
}
.filter_modal.filter_modal_container .filter_modal_wrapper .topbar .close_btn {
    width: 20px;
    height: 20px;
    cursor: pointer;
}
.filter_modal.filter_modal_container .filter_modal_wrapper .topbar .close_btn::before {
    content: "\e922";
    font-size:26px;
}
.filter_modal.filter_modal_container .filter_modal_wrapper .content_wrapper {
	width: inherit;
    max-height:700px;
    
    background-color: #ffffff;
    
    overflow: hidden auto;
}
.filter_modal.filter_modal_container .filter_modal_wrapper .content_wrapper .wrapper {
    width: inherit;
    display: flex;
    flex-direction: column;
    padding: 32px;
}
.filter_modal.filter_modal_container .filter_modal_wrapper .btns_cont {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}
.filter_modal.filter_modal_container .filter_modal_wrapper .btns_cont > div {
	height:32px;
	padding:0 17px;
	margin-left: 5px;
    
    background-color: #307bee;
    color: #ffffff;
    
    font-size: 14px;
    
    display: flex;
    justify-content: center;
    align-items: center;
    
    cursor: pointer;
}
.filter_modal.filter_modal_container .filter_modal_wrapper .btns_cont .clear_btn{
	height:30px;
	background-color: #e9e9e9;
	border:1px solid #a4a4a4;
	color:#666;
}
.filter_modal.filter_modal_container .filter_modal_wrapper .type_wrapper {
    width: 100%;
    padding-top:32px;
    display: flex;
}
.filter_modal.filter_modal_container .filter_modal_wrapper .type_wrapper > div{
	width:100%;
	display:flex;
}
.filter_modal.filter_modal_container .filter_modal_wrapper .type_wrapper .label_area{
	width: 120px;
	justify-content: flex-start;
	
	font-size:14px;
	flex:none;
}
.filter_modal.filter_modal_container .filter_modal_wrapper .type_wrapper .label_area > div{
	height:32px;
	display:flex;
	align-items:center;
}
.filter_modal.filter_modal_container .filter_modal_wrapper .type_wrapper .filter_area{
	display:block;
	flex:1;
}
.filter_modal.filter_modal_container .filter_modal_wrapper .type_wrapper .filter_area > div{
	width:100%;
}
.filter_modal.filter_modal_container .filter_modal_wrapper .type_wrapper .filter_modal_icon_span_wrapper{
	height:32px;
	display:flex;
}
.filter_modal.filter_modal_container .filter_modal_wrapper .type_wrapper .filter_modal_icon_span_wrapper > *{
	height:calc(100% - 2px);
	border:1px solid #ececec;
}
.filter_modal.filter_modal_container .filter_modal_wrapper .type_wrapper .filter_modal_icon_span_wrapper > .span{
	flex:1;
}
.filter_modal.filter_modal_container .filter_modal_wrapper .type_wrapper .filter_modal_icon_span_wrapper > .span .selected_item{
	height:100%;
	width:100%;
	
	display:flex;
	justify-content: flex-start;
    align-items: center;
}
.filter_modal.filter_modal_container .filter_modal_wrapper .type_wrapper .filter_modal_icon_span_wrapper > .span .selected_item .clear_btn{
	height: 100%;
	margin-left:3px;
    cursor: pointer;
}
.filter_modal.filter_modal_container .filter_modal_wrapper .type_wrapper .filter_modal_icon_span_wrapper > .span .selected_item .clear_btn:before{
	content: "\e922";
	font-size:18px;
}
.filter_modal.filter_modal_container .filter_modal_wrapper .type_wrapper .filter_modal_icon_span_wrapper > .icon{
	height:30px;
	width:30px;
	margin-left:5px;
	border:1px solid #ececec;
	cursor:pointer;
	flex:none;
}


/* filter - modal - filter - status */
.filter_modal.filter_modal_container .filter_modal_wrapper .check_combo .icon:before {
    content: "\e942";
}
.filter_modal.filter_modal_container .filter_modal_wrapper .check_combo .icon_up:before {
    content: "\e945";
}

/* filter - modal - filter - popup */
.filter_modal.filter_modal_container .filter_modal_wrapper .popup_btn .icon:before {
    content: "\e97a";
}

/* filter - modal - filter - selected item */
.filter_modal.filter_modal_container .filter_modal_wrapper .selected_item_container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.filter_modal.filter_modal_container .filter_modal_wrapper .selected_item_container > .selected_item{
	display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #e6e6e6;
    margin: 5px 5px 0 0;
    padding: 5px;
}
.filter_modal.filter_modal_container .filter_modal_wrapper .selected_item_container > .selected_item > span{
	font-size:11px;
}
.filter_modal.filter_modal_container .filter_modal_wrapper .selected_item_container > .selected_item > .clear_btn{
	height: 100%;
	margin-left:3px;
    cursor: pointer;
}
.filter_modal.filter_modal_container .filter_modal_wrapper .selected_item_container > .selected_item > .clear_btn:before{
	content: "\e922";
	font-size:18px;
}

/* filter - modal - filter - input */
.filter_modal.filter_modal_container .filter_modal_wrapper .input_area {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 1px solid #ececec;
}
.filter_modal.filter_modal_container .filter_modal_wrapper .input_area .input_bar{
	height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0 0 0 5px;
    
	border:0px;
	font-size:14px;
	
    box-sizing: border-box;
}

/* filter - modal - filter - checkbox */
.filter_modal.filter_modal_container .filter_modal_wrapper .check_box_area {
	height:100%;
	width:100%;
	
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    
    font-size:13px;
}
.filter_modal.filter_modal_container .filter_modal_wrapper .check_box_area .checkbox_item{
	margin: 5px 5px 5px 0px;
	
	display: flex;
    justify-content: center;
    align-items: center;
}
.filter_modal.filter_modal_container .filter_modal_wrapper .check_box_area .checkbox_item .span{
	margin-right:3px;
}

/* filter - modal - filter - calendar */
.filter_modal.filter_modal_container .filter_modal_wrapper .ssfilter_calendar .date_container,
.filter_modal.filter_modal_container .filter_modal_wrapper .ssfilter_calendar .calendar_icon{
	border-color:#ececec;
	background-color:#ffffff;
}

/* filter - modal - filter - flag */
.filter_modal.filter_modal_container .filter_modal_wrapper .check_area{
	height:100%;
	width:100%;
	
	display: flex;
    justify-content: flex-start;
    align-items: center;
}

/* filter - modal - combo */
.filter_modal.filter_combo_list_wrapper {
	width: 260px;
	left: 0px;
    top: 0px;
    
    position: absolute;
    
    background-color: white;
    box-sizing: border-box;
    z-index: 10;
    box-shadow: rgb(221, 221, 221) 1px 1px 4px 2px;
    border:1px solid #d5d5d5;
}
.filter_modal.filter_combo_list_wrapper .filter_combo_list_buttons{
    box-sizing: border-box;
    padding:0px 10px;
    display: flex;
}
.filter_modal.filter_combo_list_wrapper .filter_combo_list_buttons > input{
	height:30px;
	
	border:0px;
	border-top:1px solid transparent;
	border-bottom:1px solid #d5d5d5;
	flex:1; 
}
.filter_modal.filter_combo_list_wrapper .filter_combo_list_buttons .select_all_cont{
	font-size:14px;
    
    display:none;
	justify-content: center;
    align-items: center;
    
    flex:none;
}
.filter_modal.filter_combo_list_wrapper .item_wrapper{
    max-height: 250px;
    overflow-y: auto;
}
.filter_modal.filter_combo_list_wrapper .item_wrapper .filter_combo_list_item {
	height:18px;
	padding:5px 10px;
	
	font-size: 12px;
    
    display: flex;
    justify-content: flex-start;
    align-items: center;
    
    cursor: pointer;
}
.filter_modal.filter_combo_list_wrapper .item_wrapper .filter_combo_list_item:hover{
	background-color:#dfdfdf;
}
.filter_modal.filter_combo_list_wrapper .item_wrapper .filter_combo_list_item.filter_combo_list_item_hidden{
	display:none;
}
.filter_modal.filter_combo_list_wrapper .item_wrapper .filter_combo_list_item > input{
	height:100%;
	flex:none;	
}
.filter_modal.filter_combo_list_wrapper .item_wrapper .filter_combo_list_item > .label {
	height:100%;
	
	padding-left: 10px;
	flex:1;
}

/* filter - modal - status */
.filter_modal.keyword_combo_list_wrapper,
.filter_modal.calendar_combo_list_wrapper,
.filter_modal.status_combo_list_wrapper {
    min-width: 150px;
    position: absolute;
    
    box-shadow: rgb(221, 221, 221) 1px 1px 4px 2px;
    background-color:#ffffff;
    
    z-index: 3;
}
.filter_modal.keyword_combo_list_wrapper .keyword_combo_list_item,
.filter_modal.calendar_combo_list_wrapper .calendar_combo_list_item,
.filter_modal.status_combo_list_wrapper .status_combo_list_item {
	height: 30px;
    width: inherit;
    padding: 10px;
    box-sizing: border-box;
    
    font-size: 12px;
    cursor: pointer;
    
    display: flex;
    justify-content: flex-start;
    align-items: center;
    
    white-space: nowrap;
}
.filter_modal.keyword_combo_list_wrapper .keyword_combo_list_item.keyword_selected,
.filter_modal.calendar_combo_list_wrapper .calendar_combo_list_item.calendar_selected,
.filter_modal.status_combo_list_wrapper .status_combo_list_item.status_selected {
    background-color: #d5d5d5;
}
.filter_modal.keyword_combo_list_wrapper .keyword_combo_list_item:hover,
.filter_modal.calendar_combo_list_wrapper .calendar_combo_list_item:hover, 
.filter_modal.status_combo_list_wrapper .status_combo_list_item:hover {
    background-color: #e5e5e5;
}

/* filter - modal - calendar */
.filter_modal.calendar_container {
    box-sizing: border-box;
    
    position: absolute;
    display:flex;
    
    background-color: #ffffff;
}
.filter_modal.calendar_container > *{
	position:relative;
}
.filter_modal.calendar_container .btns_container{
	border:1px solid #dfdfdf;
    border-left:0px;
}
.filter_modal.calendar_container .btns_container > .btns_area{
	height:calc(100% - 52px);
	display:inline-block;
}
.filter_modal.calendar_container .btns_container > .apply_area{
	height:52px;
	
	display: flex;
    justify-content: center;
    align-items: center;
}

.filter_modal.calendar_container .btns_container .btn,
.filter_modal.calendar_container .btns_container .apply_btn{
    width: 80px;
    height: 32px;
    
    margin:0px 30px;
 
    background-color: #f6f6f6;
    cursor: pointer;
    box-sizing: border-box;
    
    font-size: 13px;
    border:1px solid #d6d6d6;
    
    display: flex;
    justify-content: center;
    align-items: center;
}
.filter_modal.calendar_container .btns_container .btn{
	margin-top:10px;
}
.filter_modal.calendar_container .btns_container .btns_area .btn.btn_selected {
    background-color: #d5d5d5;
}
.filter_modal.calendar_container .btns_container .apply_btn{
	background-color: #ddd;
	border-color: #d5d5d5;
}