/***********************************************************************************************************************
	VUE component style 재정의
	1. AG-GRID
	2. Datepicker
***********************************************************************************************************************/
/*AG-GRID custom style */
/* 변수선언: 라이트/다크모드 공통 스타일 중 색상을 제외한 공통 부분. 사이즈 등 */
.ag-theme-alpine,
.ag-theme-alpine-dark {
	/* customise with CSS variables */
	--ag-font-family: var(--we-font-family, system-ui); /* "맑은 고딕", "malgun gothic", system-ui; */
	--ag-font-size: var(--we-font-size, 12px);
	--ag-grid-size: 4.5px;
	--ag-cell-horizontal-padding: 5px;
	--ag-header-height: 24px;
	--ag-row-height: 28px;
	--ag-header-column-resize-handle-width: 0;
	--ag-header-column-resize-handle-height: 100%;
}

/* 변수선언: 라이트 모드 색상 정리 */
.ag-theme-alpine {
	/* customise with CSS variables */
	--ag-selected-row-background-color: #fdf1b0;
	--ag-odd-row-background-color: #f3f3f3; /* 라인 배경색 */
	/*--ag-border-color: var(--we-primary-color);*/
	--ag-border-color: var(--we-border-color);
	/* then add back a border between rows */
	--ag-row-border-color: #e0e0e0;
	/*--ag-header-foreground-color: white;*/
	--ag-header-background-color: var(--we-primary-color);
	--ag-header-cell-hover-background-color: var(--we-primary-color);
	--ag-header-cell-moving-background-color: var(--we-primary-color);
	--ag-header-column-resize-handle-color: #eee;
	--ag-bottom-row-background-color: transparent;
	--we-ag-row-hover-not-background-color: #cae5ff;
	--we-ag-pinned-bottom-row-background-color: #eee;
}

/* 변수선언: 다크 모드 색상 정리 */
.ag-theme-alpine-dark {
	--ag-header-cell-hover-background-color: var(--we-primary-color);
	--ag-header-cell-moving-background-color: var(--we-primary-color);
	--ag-bottom-row-background-color: transparent;
	--we-ag-row-hover-not-background-color: var(--we-primary-color);
	--we-ag-pinned-bottom-row-background-color: #000;
}

/* AG-GRid */
.ag-theme-alpine, .ag-theme-alpine-dark {
}

/* 컬럼 */
.ag-theme-alpine .ag-header-cell,
.ag-theme-alpine .ag-header-group-cell,
.ag-theme-alpine-dark .ag-header-cell,
.ag-theme-alpine-dark .ag-header-group-cell {
	border-right-color: var(--ag-row-border-color);
	border-right-width: 1px;
	border-right-style: solid;
	/*margin: 0;*/
	/*padding: 0 5px;*/
	padding-top: 0;
	padding-bottom: 0;
}

.ag-header-cell-text,
.ag-header-group-text {
	white-space: nowrap;
	color: white;
}



.ag-theme-alpine-dark .ag-icon {
	color: white;
}

.ag-theme-alpine .ag-icon {
	color: white;
}


.ag-theme-alpine .ag-icon-grip {
	color: black;
}
.ag-theme-alpine-dark .ag-icon-grip {
	color: white;
}
.ag-theme-alpine .ag-icon-grip::before {
	color: black;
}
.ag-theme-alpine-dark .ag-icon-grip::before {
	color: white;
}


.ag-theme-alpine-dark .ag-icon-menu {
	color: white;
}

.ag-theme-alpine .ag-icon-menu {
	color: white;
}
.ag-theme-alpine .ag-icon-menu::before {
	color: white;
}

.ag-theme-alpine-dark .ag-icon-filter {
	color: white;
}

.ag-theme-alpine .ag-icon-filter {
	color: white;
}
.ag-theme-alpine .ag-icon-filter::before {
	color: white;
}

.ag-theme-alpine .ag-icon-desc {
	color: white;
}
.ag-theme-alpine .ag-icon-desc::before {
	color: white;
}

.ag-theme-alpine .ag-icon-asc {
	color: white;
}
.ag-theme-alpine .ag-icon-asc::before {
	color: white;
}

.ag-header-cell-menu-button {
	color: red;
}
.ag-header-cell-menu-button::before {
	color: red;
}

/* 그룹 헤더 밑줄 설정 및 가운데 정렬 */
.ag-theme-alpine .ag-header-group-cell-with-group ,
.ag-theme-alpine-dark .ag-header-group-cell-with-group {
	justify-content: center;
	border-bottom: 1px solid var(--ag-row-border-color);
}

/* 일반 셀 */
.ag-theme-alpine .ag-cell ,
.ag-theme-alpine-dark .ag-cell {
	border-right-color: var(--ag-row-border-color);
	border-right-width: 1px;
	border-right-style: solid;
	font-size: calc(var(--ag-font-size));
}

/** 셀 클릭시 외곽선 제거  **/
.ag-theme-alpine .ag-cell-focus,
.ag-theme-alpine .ag-cell-no-focus ,
.ag-theme-alpine-dark .ag-cell-focus,
.ag-theme-alpine-dark .ag-cell-no-focus {
	border: 1px solid transparent;
	border-right: solid 1px var(--ag-row-border-color);
}

/* 필터 */
.ag-theme-alpine .ag-header-row-column-filter,
.ag-theme-alpine-dark .ag-header-row-column-filter {
	border-top-color: var(--ag-row-border-color);
	border-top-width: 1px;
	border-top-style: solid;
}

/*.ag-header-row-column-filter .ag-floating-filter {*/
/*	border-right-color: var(--ag-row-border-color);*/
/*	border-right-width: 1px;*/
/*	border-right-style: solid;*/
/**/
/*}*/

.ag-theme-alpine .ag-floating-bottom .ag-selectable,
.ag-theme-alpine-dark .ag-floating-bottom .ag-selectable {
	overflow: hidden !important;
}

/* 합계 등 bottom */
.ag-theme-alpine .ag-floating-bottom-container,
.ag-theme-alpine .ag-pinned-right-floating-bottom,
.ag-theme-alpine .ag-pinned-left-floating-bottom .ag-cell,
.ag-theme-alpine-dark .ag-floating-bottom-container,
.ag-theme-alpine-dark .ag-pinned-right-floating-bottom,
.ag-theme-alpine-dark .ag-pinned-left-floating-bottom .ag-cell  {
	font-weight: bold;
	background-color: var(--we-ag-pinned-bottom-row-background-color) !important;
}

/* checkbox 크기 조정 */
.ag-theme-alpine .ag-checkbox-input-wrapper ,
.ag-theme-alpine-dark .ag-checkbox-input-wrapper {
	transform: scale(1.2);
	/*border:1px solid silver;*/
}

.ag-theme-alpine .ag-pinned-left-cols-container .ag-checkbox,
.ag-theme-alpine-dark .ag-pinned-left-cols-container .ag-checkbox {
	justify-content: center;
}

.ag-theme-alpine .ag-row-hover:not(.ag-row-group) > div,
.ag-theme-alpine-dark .ag-row-hover:not(.ag-row-group) > div {
	background: var(--we-ag-row-hover-not-background-color) !important;
	color: var(--we-text-color);
}

.ag-theme-alpine .ag-row-hover .ag-cell-inline-editing div,
.ag-theme-alpine-dark .ag-row-hover .ag-cell-inline-editing div {
	color: var(--we-text-color);
}

/*헤더 필터 아이콘 설정 */
.ag-header-cell-menu-button:not(.ag-header-menu-always-show) {
	 opacity: 1;
}

/** grid header label 기본 정렬 : 가운데 **/
.grid-header-center {
	/* or with CSS selectors targeting grid DOM elements */
	font-size: var(--ag-font-size, 12px);;
}

.grid-header-center .ag-header-cell-label {
	justify-content: center;
}

/* 필수 입력 그리드 셀 이면 헤더에 별표 추가 */
.grid-header-center-required {
	/* or with CSS selectors targeting grid DOM elements */
	font-size: var(--ag-font-size, 12px);;
}

.grid-header-center-required .ag-header-cell-label {
	justify-content: center;
}

/*background-color: var(--we-primary-color);*/
/*.ag-header-cell-label {*/
/*	justify-content: center;*/

.grid-header-center-required .ag-header-cell-text::after {
	color: #ea4040;
	font-size: var(--ag-font-size, 12px);;
	font-weight: bold;
	content: "★";
}

/** 체크박스 헤더 정렬 : 가운데 **/
.grid-header-center .ag-header-cell-comp-wrapper:has(.we-grid-header-custom-checkbox) {
	justify-content: center;
}

/* 그리드 셀 정렬 : 중앙 */
.grid-align-center,
.grid_align_center {
	justify-content: center;
	text-align: center;

	.ag-cell-wrapper {
		justify-content: center;
	}
}

/* 그리드 셀 정렬 : 좌측 */
.grid-align-left
.grid_align_left {
	justify-content: left;
	text-align: left;

	.ag-cell-wrapper {
		justify-content: left;
	}
}

/* 그리드 셀 정렬 : 우측 */
.grid-align-right,
.grid_align_right {
	justify-content: right;
	text-align: right;

	.ag-cell-wrapper {
		justify-content: right;
	}
}

.grid-sidepanel-column-checkbox {
	transform: scale(1.3);
}

.grid-sidepanel-buttons button:first-child {
	border-top: 1px solid #a1a1a1 !important;
}

/*그리드 셀 에디터블 아이콘*/
.we-cell-editable-icon {
	--we-cell-editable-icon-color: #001f8c;
	--we-cell-editable-icon-background-color: transparent;
	position: absolute;
	top: -13px;
	right: 2px;
	color: var(--we-cell-editable-icon-color);
	font-size: 8px !important;
	/*font-weight: bold;*/
	background-color: var(--we-cell-editable-icon-background-color);
	z-index: 3;
	height: 2px !important
}

.we-cell-required-icon {
	color: red !important;
}

.we-cell-editable-icon::after {
	font-family: "FontAwesome";
	content: "\f00c";
	/*text-shadow: 1px 1px 2px white;*/
}


/***********************************************
		vue datepicker custom style
		변수선언
***********************************************/
:root {
	/*General*/
	--dp-font-family: var(--we-font-family, system-ui);
	--dp-border-radius: 0; /*Configurable border-radius*/
	--dp-cell-border-radius: 0px; /*Specific border radius for the calendar cell*/
	--dp-common-transition: all 0.1s ease-in; /*Generic transition applied on buttons and calendar cells*/

	/*Sizing*/
	--dp-button-height: 35px; /*Size for buttons in overlays*/
	--dp-month-year-row-height: 35px; /*Height of the month-year select row*/
	--dp-month-year-row-button-size: 35px; /*Specific height for the next/previous buttons*/
	--dp-button-icon-height: 20px; /*Icon sizing in buttons*/
	--dp-cell-size: 35px; /*Width and height of calendar cell*/
	--dp-cell-padding: 0; /*Padding in the cell*/
	--dp-common-padding: 5px; /*Common padding used*/
	--dp-input-icon-padding: 30px; /*Padding on the left side of the input if icon is present*/
	--dp-input-padding: 3px 25px 2px 5px; /*Padding in the input*/
	--dp-menu-min-width: 200px; /*Adjust the min width of the menu*/
	--dp-action-buttons-padding: 2px 5px; /*Adjust padding for the action buttons in action row*/
	--dp-row-margin: 0; /*Adjust the spacing between rows in the calendar*/
	--dp-calendar-header-cell-padding: 0; /*.5rem; /*Adjust padding in calendar header cells*/
	--dp-two-calendars-spacing: 10px; /*Space between multiple calendars*/
	--dp-overlay-col-padding: 3px; /*Padding in the overlay column*/
	--dp-time-inc-dec-button-size: 32px; /*Sizing for arrow buttons in the time picker*/
	--dp-menu-padding: 6px 8px; /*Menu padding*/

	/*Font sizes*/
	--dp-font-size: 1em; /*Default font-size*/
	--dp-preview-font-size: var(--we-font-size); /*Font size of the date preview in the action row*/
	--dp-time-font-size: var(--we-font-size); /*Font size in the time picker*/

	/*Transitions*/
	--dp-animation-duration: 0.1s; /*Transition duration*/
	--dp-menu-appear-transition-timing: cubic-bezier(.4, 0, 1, 1); /*Timing on menu appear animation*/
	--dp-transition-timing: ease-out; /*Timing on slide animations*/
}


.dp__theme_dark {
	--dp-background-color: #212121;
	--dp-text-color: #fff;
	--dp-hover-color: #484848;
	--dp-hover-text-color: #fff;
	--dp-hover-icon-color: #959595;
	--dp-primary-color: #005cb2;
	--dp-primary-disabled-color: #61a8ea;
	--dp-primary-text-color: #fff;
	--dp-secondary-color: #a9a9a9;
	--dp-border-color: #2d2d2d;
	--dp-menu-border-color: #2d2d2d;
	--dp-border-color-hover: #aaaeb7;
	--dp-border-color-focus: #aaaeb7;
	--dp-disabled-color: #737373;
	--dp-disabled-color-text: #d0d0d0;
	--dp-scroll-bar-background: #212121;
	--dp-scroll-bar-color: #484848;
	--dp-success-color: #00701a;
	--dp-success-color-disabled: #428f59;
	--dp-icon-color: #959595;
	--dp-danger-color: #e53935;
	--dp-marker-color: #e53935;
	--dp-tooltip-color: #3e3e3e;
	--dp-highlight-color: rgb(0 92 178 / 20%);
	--dp-range-between-dates-background-color: var(--dp-hover-color, #484848);
	--dp-range-between-dates-text-color: var(--dp-hover-text-color, #fff);
	--dp-range-between-border-color: var(--dp-hover-color, #fff);
	--dp-loader: 5px solid #005cb2
}

.dp__theme_light {
	--dp-background-color: #fff;
	--dp-text-color: #212121;
	--dp-hover-color: #f3f3f3;
	--dp-hover-text-color: #212121;
	--dp-hover-icon-color: #959595;
	--dp-primary-color: #1976d2;
	--dp-primary-disabled-color: #6bacea;
	--dp-primary-text-color: #f8f5f5;
	--dp-secondary-color: #c0c4cc;
	--dp-border-color: #ddd;
	--dp-menu-border-color: #ddd;
	--dp-border-color-hover: #aaaeb7;
	--dp-border-color-focus: #aaaeb7;
	--dp-disabled-color: #f6f6f6;
	--dp-scroll-bar-background: #f3f3f3;
	--dp-scroll-bar-color: #959595;
	--dp-success-color: #76d275;
	--dp-success-color-disabled: #a3d9b1;
	--dp-icon-color: #959595;
	--dp-danger-color: #ff6f60;
	--dp-marker-color: #ff6f60;
	--dp-tooltip-color: #fafafa;
	--dp-disabled-color-text: #8e8e8e;
	--dp-highlight-color: rgb(25 118 210 / 10%);
	--dp-range-between-dates-background-color: var(--dp-hover-color, #f3f3f3);
	--dp-range-between-dates-text-color: var(--dp-hover-text-color, #212121);
	--dp-range-between-border-color: var(--dp-hover-color, #f3f3f3);
	--dp-loader: 5px solid #1976d2
}


.dp__input_icon {
	font-size: 20px;
	left: -5px;
}

.dp__clear_icon {
	font-size: 20px;
	right: -8px;
}

.dp__input {
	border: 1px solid var(--we-element-border-color);
	text-align: center;
	font-size: var(--we-font-size);
}

.dp--tp-wrap {
	max-width: 100%;
}

.dp__time_picker_inline_container > div {
	width: 100%;
}

.dp__menu {
	font-size: var(--we-font-size);
}

.dp__disabled {
	background: var(--dp-disabled-color) !important;
}

.dp__today {
	border: 1px solid #c37b95;
}

/* 화면이 완전히 만들어진 후 보여져야 할 경우 */
[v-cloak] {
	display: none;
}

/*그리드 하단 풋터 셀 제목 오른쪽 정렬 처리 */
.ag-floating-bottom-container .ag-cell {
	text-align: right;
}


.we-grid-group-cell-icon > i {
	font-size: 1.4em;
}

.we-grid-group-cell-icon-disabled > i {
}

.we-grid-group-cell-icon>i:not(.we-grid-group-cell-icon-disabled):hover {
	color: red;
	cursor: pointer;
/* 	display: inline-block;  */ /* transform 적용을 위해 */
/* 	transform: rotate(90deg) translateY(-100%); */
/* 	transform-origin: left top; */
}

.we-grid-group-cell-icon>i.we-grid-group-cell-icon-disabled:hover {
	color: gray;
	cursor: not-allowed;
}

.we-list-item {
	line-height: 1.4;
}

.we-list-item:hover {
	background-color: #f3f3f4;
	cursor: pointer;
}