// Description ////////////////////////////////////////////////////////////////////
//
// AXISJ는 AXU(Application eXperience Universal) UX가이드라인에 따르고 있습니다.
// preset 문서는 UI의 테마 전체 영역의 색상, 선 굵기, 이미지 등의 값을 포괄 관리하도록 되어 있습니다.
// 이는 테마생성시 preset파일을 변경하면 테마전체에 빠르게 변경 가능하도록 목표하고 있습니다.
// AXU는 크게 "거치형(Heavy-ware)"과 "휴대형(Light-ware)"으로 나누어집니다.
// 
// 네임스페이스(ax는 네임스페이스로 사용할 수 없습니다.)
// Heavy-ware : dx(Desktop)*, wx(Wide), ux(Ultra), fx(4k)
// light-ware : cx(Watch), mx(Mobile)*, tx(Tablet)
// * 기준사이즈 mx, dx 기준사이즈임
// 자세한 사항은 https://www.axisj.com/ko/axu/docs 참조해주세요.
// 
// 변수명은 모두 소문자로 작성하면 의미소 단위로 하이픈(-)을 이용하여 구분하여 작성합니다.
// 변수명 명명법(Common은 예외입니다.)
// @type-ui-atrribute-variation
//
///////////////////////////////////////////////////////////////////////////////////

// Common ///////////////////////////////////////////////////
@color:#523636;			
@color-a:#523636;
@color-b:#523636;		
@color-c:#fee834;

@link:#523636;	
@link-hover:#565b61;
@link-focus:#565b61;
@link-active:#82898f;
@link-visited:#c3cad0;

@font-family:"Nanum Gothic";
@font-size:12px;

@border:1px solid #000;
@border-a:1px solid #000;
@border-s:1px solid #cecece;

@bgcolor:#fff;
@bgcolor-a:#523636;
@bgcolor-b:#fee834;
@bgcolor-c:#3a2121;
@bgcolor-d:#fafafa;

@wide:		~"(min-width:1152px)";
@desktop:   ~"only screen and (min-width: 1024px) and (max-width: 1151px)";
@tablet:    ~"only screen and (min-width: 768px) and (max-width: 1023px)";
@mobile:	~"(max-width: 767px)";


// AXButton ///////////////////////////////////////////////////
.dx-axbutton-preset-normal(){
	@bgcolor	:#ffea00;	
	@bgcolor-a	:#ffea00;
	@bgcolor-b	:#493334;	
	@color		:#493334;
	@color-a	:#ffea00;
	@border		:1px solid #ffea00;	
	@border-a	:1px solid #493334;		
	@radius		:3px;
}

.dx-axbutton-preset-classic(){
	@bgcolor	:#493334;
	@bgcolor-a	:#493334;
	@bgcolor-b	:#493334;	
	@color		:#fff;
	@color-a	:#ffea00;	
	@border		:1px solid #493334;	
	@border-a	:1px solid #493334;		
	@radius		:3px;
}

.dx-axbutton-preset-gray(){
	@bgcolor	:#f7f7f7;
	@bgcolor-a	:#f7f7f7;
	@bgcolor-b	:#f7f7f7;	
	@color		:#959595;
	@color-a	:#4a4a4a;		
	@border		:1px solid #c1c1c1;	
	@border-a	:1px solid #f7f7f7;		
	@radius		:1px;	
}

.dx-axbutton-preset-green(){
	@bgcolor	:#0dc5b9;
	@bgcolor-a	:#0dc5b9;
	@bgcolor-b	:#0dc5b9;	
	@color		:#fff;
	@color-a	:#ffea00;		
	@border		:1px solid #0dc5b9;	
	@border-a	:1px solid #0dc5b9;		
	@radius		:1px;	
}

.dx-axbutton-preset-red(){
	@bgcolor	:#ff5b49;
	@bgcolor-a	:#ff5b49;
	@bgcolor-b	:#ff5b49;	
	@color		:#fff;
	@color-a	:#ffea00;		
	@border		:1px solid #ff5b49;	
	@border-a	:1px solid #ff5b49;		
	@radius		:1px;	
}

.dx-axbutton-preset-disabled(){
	@bgcolor	:#d7d7d7;
	@bgcolor-a	:#d7d7d7;
	@bgcolor-b	:#d7d7d7;
	@color		:#eaeaea;
	@color-a	:#eaeaea;
	@border		:1px solid #d7d7d7;	
	@border-a	:1px solid #d7d7d7;		
	@radius		:1px;	
}

// AXTab ///////////////////////////////////////////////////
.dx-axtabs-preset-normal(){
	@bgcolor	:#ffea00;	
	@bgcolor-a	:#ffea00;
	@bgcolor-b	:#493334;	
	@color		:#493334;
	@color-a	:#ffea00;
	@border		:1px solid #c1c1c1;	
	@radius		:3px;	
}

.dx-axtabs-preset-classic(){
	@bgcolor	:#493334;
	@bgcolor-a	:#493334;
	@bgcolor-b	:#493334;	
	@color		:#fff;
	@color-a	:#493334;	
	@border		:1px solid #c1c1c1;	
	@radius		:3px;
}

.dx-axtabs-preset-blue(){
	@bgcolor	:#f7f7f7;
	@bgcolor-a	:#f7f7f7;
	@bgcolor-b	:#f7f7f7;	
	@color		:#959595;
	@color-a	:#493334;		
	@border		:1px solid #c1c1c1;	
	@radius		:1px;	
}

.dx-axtabs-preset-green(){
	@bgcolor	:#0dc5b9;
	@bgcolor-a	:#0dc5b9;
	@bgcolor-b	:#0dc5b9;	
	@color		:#fff;
	@color-a	:#493334;		
	@border		:1px solid #c1c1c1;	
	@radius		:1px;	
}

.dx-axtabs-preset-red(){
	@bgcolor	:#ff5b49;
	@bgcolor-a	:#ff5b49;
	@bgcolor-b	:#ff5b49;	
	@color		:#fff;
	@color-a	:#493334;		
	@border		:1px solid #c1c1c1;	
	@radius		:1px;	
}

.dx-axtabs-preset-disabled(){
	@bgcolor	:#d7d7d7;
	@bgcolor-a	:#d7d7d7;
	@bgcolor-b	:#d7d7d7;
	@color		:#eaeaea;
	@color-a	:#eaeaea;
	@border		:none;	
	@radius		:1px;	
}

// AXToolBar ///////////////////////////////////////////////////
.dx-axtoolbar-preset-normal() {
	@bgcolor    : #ffea00;
	@bgcolor-a    : #ffea00;
	@bgcolor-b    : #ffea00;
	@color        : #493334;
	@color-a    : #493334;
	@color-c    : #493334;
	@border    : 1px solid #493334;
	@radius        : 5px;
}


// AXEditor ///////////////////////////////////////////////////
.dx-axeditor-preset(){

	@border		:2px solid #bebebe;
	@border-a	:1px solid #bebebe;
	@border-b	:1px solid #a4b5d8;
	@border-c	:1px solid #fff;
	@border-d	:1px solid #929292;
	@border-e	:1px solid #ccc;
	@border-f	:1px solid #777;
	@border-g	:1px solid #a1a1a1;
	@border-h	:1px solid #0080FF;
	@bgcolor	:#fff;
	@bgcolor-a	:#e0e0e0;
	@bgcolor-b	:#f3f3f3;
	@color		:#5c5c5c;
	@color-a	:#ccc;
	@color-b	:#000;
	@color-c	:#0080FF;
	@color-d	:#4b6baf;
	@color-e	:#eaeaea;
	@color-f	:#888;
	@color-g	:#000;
	@radius		:2px;
	@radius-a	:5px;
	@radius-b	:3px;
	
}

// AXGrid ///////////////////////////////////////////////////
.dx-axgrid-preset(){
	@border		:1px solid #cecece;		// Grid head, body, footer border
	@border-a	:1px solid #B6B6B6;		// Scroll handle border
	@border-b	:1px solid #dbdbdb;		// Scroll track border
	@border-c	:1px solid #cecece;		// Scroll handle over border
	@border-d	:1px solid #c8c8c8;		// Grid body rows bottom border
	@border-e	:1px dashed #c8c8c8;	// Grid body rows bottom border(Dashed)
	@border-f	:1px solid #ccc;		// Grid Icon(Preview-viewMode) block border
	@border-g	:1px solid #eee;		// Grid Icon(Thumbnail-viewMode) block border
	@border-h	:1px solid #BDCCD7;		// Grid Editor bottom border
	@border-i	:1px solid #e3e3e3;		// Grid head option(tools) list border

	@bgcolor	:#fff;					// Grid base bgcolor
	@bgcolor-a	:#fff;					// Grid header gradient element-a bgcolor
	@bgcolor-b	:#ededed;				// Grid header gradient element-b bgcolor
	@bgcolor-c	:#fff;					// Grid footer gradient element-a bgcolor
	@bgcolor-d	:#ededed;				// Grid footer gradient element-b bgcolor

	@bgcolor-e	:#ffbbcc;				// Grid head vertical resize handle bgcolor
	@bgcolor-f	:#f3f3f3;				// Scroll track bgcolor
	@bgcolor-g	:#fee834;				// Scroll handle over bgcolor
	@bgcolor-h	:#fff6ac;				// Grid body rows selected bgcolor
	@bgcolor-hh	:#fee834;				// Grid body rows selected bgcolor
	@bgcolor-i	:#f8f8f8;				// Grid body rows element-a bgcolor
	@bgcolor-j	:#fff;					// Grid body rows element-b bgcolor
	
	@bgcolor-k	:#FFE8E8;				// Grid body rows red bgcolor
	@bgcolor-l	:#F7FDEA;				// Grid body rows green bgcolor
	@bgcolor-m	:#EAF5FD;				// Grid body rows blue bgcolor
	@bgcolor-n	:#FEFEE9; 				// Grid body rows yellow bgcolor
	@bgcolor-o	:#fff;					// Grid body rows white bgcolor
	@bgcolor-p	:#f7f7f7;				// Grid body rows gray bgcolor
	@bgcolor-q	:#f8f8f8;				// Grid Icon(Preview-viewMode) over bgcolor
	@bgcolor-r	:#fee834;				// Grid Sum rows bgcolor
	@bgcolor-s	:#efefef;				// Grid body rows fixed element-a bgcolor
	@bgcolor-t	:#f9f9f9;				// Grid body rows fixed element-b bgcolor
	@bgcolor-u	:#fffbdc;				// Grid body rows fixed hover bgcolor
	@bgcolor-v	:#FFFFEC;				// Grid Editor rows bgcolor
	@bgcolor-w	:#D2D9DF; 				// Grid Editor same @bgcolor-h
	
	@bgcolor-x	:#fee834; 				// Grid head hover bgcolor
	
	@color		:#513636;				// Grid head font color
	@color-a	:#3b3b3b;				// Grid body font color
	@color-b	:#666;					// Grid foot right label font color
	@color-c	:#f47820;				// Grid foot right label font(Bold) color
	@color-d	:#513636;				// Grid head option(tools) list font color
		
	@radius		:4px;					// Grid editor button radius
	@radius-a	:5px;					// Grid head option(tools) list radius
	
}
.mx-axgrid-colors-normal(){
  @color-fill-a:#e7e9ea;
  @color-fill-b:#fefefd;
  @color-stroke:#b1b1b1;
}

// AXInput ///////////////////////////////////////////////////
.dx-axinput-preset-normal(){
	@color		:#523636;
	@color-a	:#523636;				//focus
	@color-b	:#fff;				//diabled	
	@color-c	:#676767;			//readonly
	@color-d	:#bbb;				//placeholder
	@bgcolor	:#fff;	
	@bgcolor-a	:#fff;				//focus
	@bgcolor-b	:#fff;				//diabled
	@bgcolor-c	:#fff;				//readonly
	@bgcolor-d	:#fff;				//placeholder
	@border		:1px solid #b6b6b6;
	@border-a	:1px solid #785c5c;	//focus
	@radius		:3px;
	@radius-a	:15px;
}

.dx-axinput-preset-number(){
	@border		:1px solid #b9babc;
	@border-a 	:1px solid #ccc;
	@border-b 	:1px solid #ccc;	
	@bgcolor 	:#b3b5b7;
	@radius 	:2px;	
}

.dx-axinput-preset-switch(){
	@color		:#b6b6b6;
	@color-a	:#fff;
	@border		:1px solid #b6b6b6;
	@border-a	:1px solid #46aca9;
	@radius		:14px;
	@bgcolor	:#fff;
	@bgcolor-a	:#60c3c0;
}

.dx-axinput-preset-segments(){
	@color		:#523636;
	@color-a	:#fff;
	@border		:1px solid #cecece;
	@bgcolor	:#f7f7f7;
	@bgcolor-a	:#f7f7f7;
	@bgcolor-b	:#f7f7f7;			
	@bgcolor-c	:#fee834;
	@bgcolor-d	:#fee834;
	@bgcolor-e	:#cecece;
	@bgcolor-f	:#cecece;
	@radius		:3px;
}

.dx-axinput-preset-slider(){
	@color		:#acacac;
	@color-a	:#444;
	@bgcolor	:#ffea00;
	@bgcolor-a	:#523636;
	@radius		:2px;
}

.dx-axinput-preset-selector(){
	@border		:1px solid #b9b9b9;
	@bgcolor 	:#b9b9b9;
	@radius		:4px;}

.dx-axinput-preset-date(){
	//AXInput.less
	@font-family:Arial;
	@color		:#523636; 		//year & Month
	@color-a	:#828f9e;		//dateTypeName
	@border		:1px solid #cecece;
	@border-a	:none;
	@border-b	:none;
	@radius		:5px;
	@bgcolor	:#fff;
	@bgcolor-a	:#ffea00;
	@bgcolor-b	:#f3df01;	
	@bgcolor-c	:#60c3c0;
}

.dx-axcalender-preset(){
	//AXJ.less
	@font-family:Arial;
	@color		:#7b7b7b;	//Week name color 	
	@color-a	:#ffea00;	//SUN
	@color-b	:#627d9b; 	//SAT
	@color-c	:#f7f7f7; 	//Table body
	@color-d	:#fff; 
	@color-e	:#523636; 	
	@color-f	:#795858;
	@color-g	:#738089; 	//hour, minute,
    @color-disabled :#986060; //disabled
	
	@border		:1px solid #523636;		//Table body 
	@border-a	:1px solid #f2f2f3;		//Table head right;
	@border-b	:1px solid #b9babc;		//Table head left;
	@border-c	:1px solid #7f8d9c;

	@bgcolor	:#fff;
	@bgcolor-a	:#523636;
	@bgcolor-b	:#523636;
	@bgcolor-c	:#ff5b49;	
	@bgcolor-d	:#ff5b49;
	@bgcolor-e	:#60c3c0;
	@bgcolor-f	:#442a2a;
	@bgcolor-g	:#60c3c0; //Active
	@bgcolor-h	:#fee834;
	@radius		:5px;

}

// AXProgress ///////////////////////////////////////////////////
.dx-axprogress-preset(){
	//AXJ.less
	@font-family:verdana;
	@color		:#513636;
	@border		:1px solid #e9e9e9;
	@bgcolor 	:#b3b3b3;	
	@radius		:8px;
}

// AXNotification ///////////////////////////////////////////////////
.dx-axnotification-preset(){
	//AXJ.less
	@color   	:#525252;
	@color-a   	:#493334;
	@color-b	:#493334;	//Complete
	@color-c	:#c8b518;	//Warning
	@color-d	:#fc5c4f;	//Caution
	@border		:1px solid #c5c5c5;
	@border-a	:1px solid #444;
	@bgcolor	:#fff;
	@bgcolor-a  :#fee834;
	@radius		:3px;
}

// AXScroll ///////////////////////////////////////////////////
.dx-axscroll-preset(){
	//AXJ.less
	@bgcolor	:#000;
	@radius 	:5px;
	@opacity	:10;
	@opacity-a	:20;	
	@opacity-b	:30;		
	@opacity-c	:50;			
}

// AXScroll ///////////////////////////////////////////////////
.dx-axmodal-preset{
	@border:1px solid #a6a6a6;
	@bgcolor:#fff;
	@color:#525252;
}

// AXSearch ///////////////////////////////////////////////////
.dx-axsearch-preset(){
	@border		:1px solid #ccc;
	@border-a	:1px solid #d8d8d8;	
	@border-b	:1px solid #c1c1c1;
	@border-c	:1px dotted #000;
	@bgcolor	:#eee;
	@bgcolor-a 	:#fff;
	@bgcolor-b	:#f5f5f5;
	@bgcolor-c	:#eee;
	@bgcolor-d	:#f3f3f3;
	
	@bgcolor-e	:#FFE8E8;
	@bgcolor-f	:#F7FDEA;
	@bgcolor-g	:#EAF5FD;
	@bgcolor-h	:#FEFEE9;
	@color		:#888;
	@color-a	:#444;
	@color-b	:#ccc;
	@color-c	:#616161;
	@color-d	:#666;
	
	
}

// AXSelect ///////////////////////////////////////////////////
.dx-axselect-preset(){
	@color		:#592d2d;
	@color-a	:#888;
	@color-b	:#fee834;
	@border 	:1px solid #dfdfdf;
	@border-a	:1px solid #b9babc;
	@border-b	:1px solid #d8d9db;	
	@bgcolor   	:#fff;
	@bgcolor-a	:#fafafa;
	@bgcolor-b	:#e8e8e8;
	@bgcolor-c	:#fff;
	@bgcolor-d	:#fee834;
	@bgcolor-e	:#523636;	
	@radius		:3px;

}

// AXTree ///////////////////////////////////////////////////
.dx-axtree-preset(){

	@border		:1px solid #b1b1b1;		//Tree outline border
	@border-a	:1px solid #dbdbdb;		//Scroll track border
	@border-b	:1px solid #B6B6B6;		//Scroll handle border
	@border-c	:1px solid #636363;		//Scroll handle(over) border
	@border-d	:1px solid #c8c8c8;		//Tree rows bottom border
	@border-e	:1px dotted;			//.copied
	@border-f	:1px dashed #c8c8c8;	//.bodyBottomBorder	
	@border-g	:1px solid #7f8d9c;		//AXTreeEditor
	@border-h	:1px solid #e3e3e3;		//Tree option(tool) list bottom border
	
	@bgcolor	:#fde649;
	@bgcolor-a	:#fff;					// Tree header gradient element-a bgcolor
	@bgcolor-b	:#ededed;				// Tree header gradient element-b bgcolor
	@bgcolor-c	:#f3f3f3;				// Scroll track bgcolor
	@bgcolor-d	:#eee;					//.AXTreeSplit
	
	@bgcolor-e	:#FFE8E8;				//.red
	@bgcolor-f	:#F7FDEA;				//.green
	@bgcolor-g	:#EAF5FD;				//.blue
	@bgcolor-h	:#FEFEE9;				//.yellow

	@bgcolor-i	:#fffbdd;				// Tree rows over bgcolor
	@bgcolor-j	:#fff5b0;				// Tree rows selected bgcolor
	
	@bgcolor-k	:#F5F5F1;				// Tree rows disabeld disable bgcolor;
	@bgcolor-l	:#FFFFBF;				//.copied
	
	@bgcolor-m	:#FFFFEC;				//.treeBodyTable
	@bgcolor-n	:#f7f7f7;				//.treeFixedBodyTable
	
	@bgcolor-o	:#eaedef;				//.treeFixedBodyTable .line0
	@bgcolor-p	:#F7F8F9;				//.treeFixedBodyTable .line1
	
	@bgcolor-q	:#d7dde3;				//.treeFixedBodyTable .hover
	@bgcolor-r	:#ccc;					//.treeBodyTable .AXTreeSplit
	@bgcolor-s	:#d8e1e7;				//.AXTreeEditor
	@bgcolor-t	:#fff;					//.AXTreeColGroupListBox
	
	@color		:#503636;				//Tree head font color
	@color-a	:#3b3b3b;				//Tree body font color
	@color-b	:#7b8590;				//Tree option(tool) list font color
	
	@radius		:4px;
	@radius-a	:5px;
	

}

// AXUpload5 ///////////////////////////////////////////////////
.dx-axupload5-preset(){
	@border:1px solid #b2b2b2;
	@border-a:1px solid #b1b1b1;
	@border-b:1px solid #000;
	@border-c:1px solid #fff;
	@color:#525252;
	@color-a:#525252;
	@color-b:#fff;
	@color-c:#888;
	@color-d:#444;
	@bgcolor:#000;
	@bgcolor-a:#fff;
	@bgcolor-b:#b2b2b2;
	@bgcolor-c:#f7f7f7;
	@bgcolor-d:#68adcf;
	@bgcolor-e:#e0e0e0;
	@radius:5px;
	@radius-a:7px;	
}


// AXMobileModal ///////////////////////////////////////////////////
.dx-axmobilemodal-preset(){
  @border:1px solid #000;
  @border-a:1px solid #000;
  @radius:5px;

  @font-color:#523636;
  @font-color-a:#523636;
  @font-color-b:#523636;

  @bgcolor:#fee834;
  @bgcolor-a:#fff;
  @bgcolor-b:#f7f7f7;
  @bgcolor-c:#5ea3db;
  @bgcolor-d:#000;
}