@charset "UTF-8";
/*****************  2021-09-02 공통 버튼 css   **********************************************************************/

/*************************************************************
	※ form 안에 buttonOptions 안에 들어가는 버튼은 cssClass로 적용해야 됨.
	※ 나머지 elementAttr로 적용 

 ************************************************************/

.infoTitleOutDiv .dx-button-content{ /* ### 컴포넌트에서 속성 높이 28로 적용 ###  */
	padding: 0px!important;
}
		
/* 확인/다음/성공/complete 등등등... */
/* .btn_ok .dx-button-content{
	background-color: #627789;
	color: #fff;
} */

.btn_ok .fa-check-circle::before {
	color: #fff;
}
.btn_ok .fa-wpforms::before {
	color: #fff;
}

.active, .btn_ok:hover .dx-button-content{
   background-color: #cfdae2;
   color: #627789;
} 

.active, .btn_ok:hover .fa-check-circle::before{
   color: #627789;
} 
.active, .btn_ok:hover .fa-wpforms::before{
   color: #627789;
} 

/* 확인/다음/저장/성공/complete 등등등...  2번쪠 */
#joinForm .btn_ok2 .dx-button-content,
#joinForm .btn_cancel .dx-button-content {
    height: 45px;
    border-radius: 4px;
    transition: all .2s;
}
#joinForm .btn_ok2 .dx-button-content {
	background-color: var(--color-blue);
    color: var(--color-white);
}
#joinForm .btn_ok2 .dx-button-content:hover {
	opacity: .8;
}
#joinForm .btn_cancel .dx-button-content:hover {
    color: var(--color-white);

}

.btn_ok2 .dx-button-content{
	background-color: #0074e9;
	color: #fff;
}

.btn_ok2 .fa-check-circle::before {
	color: #fff;
}

.active, .btn_ok2:hover .dx-button-content{
   background-color: #0074e9 !important;
   color: var(--color-black);
} 

.active, .btn_ok2:hover .fa-check-circle::before{
   color: #fff;
} 

/* 취소/닫기/ 등등등...*/
.btn_cancel .dx-button-content{
	border: 1px solid #ccc;
 	background-color: #ddd !important;
 	color: var(--color-black);
}

.active, .btn_cancel:hover .dx-button-content{
	/* background-color: rgb(242, 242, 242) !important; */
	background-color: #ddd;
    color: #fff;
}


/* 공통 저장 */
.btn_save.dx-button,
.dx-item-content > .btn_write {
	background-color: #627789;
	border: 1px solid #627789;
	color: #fff;
	transition: all .1s;
}
/* 공통 저장 버튼 아이콘 색상 */
.btn_save.dx-button > .dx-button-content > i {
	color: white;
}

.btn_save .dx-icon-floppy::before {
	color: #fff;
}

/* 공통 저장 버튼 아이콘 호버 시 색상 */
.active, 
.btn_save:hover .dx-button-content {
   background-color: #cfdae2;
   color: #627789;
} 

.btn_save:hover .dx-button-content > i {
	color: #627789;
}

.active, .btn_save:hover .dx-icon-floppy::before{
   color: #627789;
} 

.btn_write .dx-icon-rename::before {
	color: #fff;
}

.active, .btn_write:hover .dx-button-content{
   background-color: #cfdae2;
   color: #627789;
} 

.active, .btn_write:hover .dx-icon-rename::before{
   color: #627789;
} 

/* 발주서 버튼  */
.btn_order .dx-button-content{
	background-color: #ebeff5;
	color: #1b4461;
	border-color: #1b4461;
}

.btn_order .fa-wpforms::before {
	color:#1b4461;
}

.active, .btn_order:hover .dx-button-content{
   background-color: rgb(27, 68, 97);
   color: #cfdae2;
} 

.active, .btn_order:hover .fa-wpforms::before{
   color: #cfdae2;
}

/* 달력등의 옵션으로 붙이는 삭제 버튼의 크기 조절함 */
.dx-show-clear-button .dx-clear-button-area {
    width: 28px !important;
    min-width: 10px !important;
}

/**************** dev(o) [type:normal, stylingMode:contained] component   *********************/
	
	/* 공통삭제버튼 [ 폼안에 안들어가는 경우 / 들어가는 경우는 type:danger ]*/
	.btn_delete .dx-button-content{
		color:crimson;
		border: 1px solid crimson;
	}
	
	.btn_delete .dx-icon-trash::before{
		color:crimson;
	}

	/* 공통리셋버튼 */
	.btn_reset .dx-button-content{
		color:crimson;
	}
	
	.btn_reset .dx-icon-undo::before{
		color:crimson;
	}

	/* 공통 새로고침버튼 */
	.btn_refresh .dx-button-content{
		color: cornflowerblue;
	}
	
	.btn_refresh .dx-icon-refresh::before{
		color: cornflowerblue;
	}
	
	/* 공통 즐겨찾기 버튼 */
	.btn_favorites .dx-button-content{
		color: rgb(252, 208, 114);
	}
	
	.btn_favorites .dx-icon-favorites::before{
		color: rgb(252, 208, 114);
	}

	/* 공통 바로가기 버튼 */
	.btn_shortcut .dx-button-content{
		color: cornflowerblue;
	}
	
	.btn_shortcut .fa-arrow-alt-circle-right::before{
		color: cornflowerblue;
	}
	
	/* 공통 search 버튼 */
	.btn_search .dx-button-content{
		color: cornflowerblue;
	}
	
	.btn_search .dx-icon-search::before{
		color: cornflowerblue;
	}
	
	/* 공통 돋보기+ 버튼 */
	.btn_zoom_in .dx-button-content{
		color: cornflowerblue;
	}
	
	.btn_zoom_in .fa-search-plus::before{
		color: cornflowerblue;
	}
	
	/* 공통 돋보기- 버튼 */
	.btn_zoom_out .dx-button-content{
		color: cornflowerblue;
	}
	
	.btn_zoom_out .fa-search-minus::before{
		color: cornflowerblue;
	}
	
	/* 공통 첨부파일 버튼 */
	.btn_file_up .dx-fileuploader-button{
		color: chocolate;
	}
	
	.btn_file_up .dx-icon-activefolder::before{
		color: chocolate;
	}
	
	/* 공통 엑셀Export 버튼 */
	.btn_excel_export .dx-button-content{
		color: var(--color-black);
	}
	
	.btn_excel_export .fa-file-excel::before{
		color: darkcyan;
	}
	
	/* 공통 엑셀Import 버튼 */
	.btn_excel_import .dx-button-content{
		color: var(--color-black);
	}
	
	.btn_excel_import .fa-file-excel::before{
		color: darkcyan;
	}
	
	/**************** dev(x) 배경색, 텍스트색 모두 변경한 component DATAGRID 안 공통 버튼 CSS *********************/
	
	/* 공통 승인요청 버튼 */
	.btn_dg_req_approval .dx-button-content{
		background-color: #627789;
		color: #fff;
	}
	
	.btn_dg_req_approval .fa-check-circle::before {
		color: #fff;
	}
	
	.active, .btn_dg_req_approval:hover{
	   background-color: #42505df7;
	   color: #fff;
	}
	
	/* 공통 승인 버튼 */
	.btn_dg_approval .dx-button-content{
		background-color: #627789;
		color: #fff;
	}
	
	.btn_dg_approval .fa-check-circle::before {
		color: #fff;
	}
	
	.active, .btn_dg_approval:hover{
	   background-color: #42505df7;
	   color: #fff;
	}