:root{
	--grid-header-background-color : white;
	--grid-header-font-color : rgb(126, 126, 126);
	
	--tui-disable-bg:#F2F4FB;
/* 	--tui-content-color:#F7F7F7; */
	--tui-content-color:transparent;
	--tui-bg-color:#fff;
	--tui-cell-bg-color:white;
	--tui-heading-color:#666666;
	--tui-border-color:#ccc;
	--tui-focus-color:#00A9FF;
	--tui-scroll-width:12px;
	
	 --tui-heading-dark:#3D4F67;
	 --tui-bg-dark:#2B2F34;
	 --tui-disable-dark:#383D43;
	 --tui-border-dark:#000;
	 
	--tui-grid-primary:#6670B5;
	--tui-grid-primary-rgb:94,163,203;
	--tui-grid-secondary:#6470B3;
	--tui-grid-muted:#8695AB;
	--tui-grid-danger:#B64E47;
	--tui-grid-dark:#585671;
	--tui-grid-success:#479693;
	--tui-grid-soft-blue:#C8EAFF;
	--tui-grid-soft-blue-rgb:153,194,255;	
	--tui-grid-blue:#4877D4;
	--tui-grid-orange:#DE9556;

	/* figure */
	--over-all-height:calc(100vh - 8.5rem);
	--half-height:calc(50vh - 3rem);	
	
	--modal-sm-height:40vh;
	--modal-md-height:50vh;
    --modal-lg-height:55vh;
    --modal-xl-height:60vh;	
}
input[type=checkbox], input[type=radio], progress {cursor: pointer;}

/* .card-body{min-height:300px;} */
.grid-wrap{display:flex; flex-direction:column; min-height:250px;}



/* default scroll-bar style */
div::-webkit-scrollbar{width:10px; height:10px; background-color: transparent !important;}
div::-webkit-scrollbar-thumb{
	border:3px solid transparent; border-radius:10px;
	background-clip: padding-box; background-color:var(--vz-gray-400);
}

/* height */
.h-all{height:var(--over-all-height);}
.h-half{height:var(--half-height);}

/* modal */
.modal-custom-size{display:flex !important; justify-content:center; position:relative;}
.kps-modal .modal-dialog{
	position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) !important;
    min-height: 9rem;
    max-width: 95vw;
    overflow: auto;
    display: flex;
    flex-direction: column;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    align-items: center;
    gap: 1.5rem;
    transition: top 0.3s ease-in-out 0s, opacity 0.15s ease-in-out 0s !important;
    opacity: 1;
    max-height : 85dvh;
    overflow : hidden;
    
    background-color: #ffffff;
    color: #222;
    font-size: 14px;
    letter-spacing: -.28px;
    min-width: 320px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
/*     background:transparent; */
	border-radius : 1em;
}
.kps-modal .modal-body{padding:0.3rem 1.3rem; overflow:auto;}
.kps-modal .modal-sm .modal-body{max-height:90dvh;}
.kps-modal .modal-md .modal-body{max-height:90dvh;}
.kps-modal .modal-lg .modal-body{max-height:90dvh;}
.kps-modal .modal-xl .modal-body{max-height:90dvh;}

.kps-modal .tui-grid-container .tui-grid-pagination{margin:8px 0 3px;}
/* .kps-modal .modal-header{border-bottom-width:1px !important;} */
.kps-modal .modal-dialog:not(.modal-dialog-scrollable) .modal-header{padding :22px 30px 11px 30px !important;display: flex;justify-content: flex-start;position: relative; color : #242A30;}
.kps-modal .modal-footer{/*border-top-width:1px !important;*/}
.kps-modal .modal-dialog:not(.modal-dialog-scrollable) .modal-footer{padding: 0.8rem 1.5rem 1.2rem; gap:0.75rem;}

/* button */
button[class*="tui-btn"]{font-size:400;}
button[class*="tui-btn"]:hover{color:var(--vz-white) !important; filter:brightness(110%);}

.kps-grid .btn-group-sm>.btn, .btn-sm {padding: 0.2rem 0.5rem;}
.btn-grp .btn[name="excel_download"]{margin-left:16px;}
.tui-btn-primary{color:var(--vz-white); background-color:var(--tui-grid-primary);}
.tui-btn-secondary{color:var(--vz-white); background-color:var(--tui-grid-secondary);}
.tui-btn-danger{color:var(--vz-white); background-color:var(--tui-grid-danger);}
.tui-btn-soft{color:var(--tui-grid-primary);  background-color:rgba(var(--tui-grid-primary-rgb),0.1);}
.tui-btn-soft:hover{background-color:var(--tui-grid-primary);}
.tui-btn-muted{color:var(--vz-white); background-color:#888;}
.tui-btn-blue{color:var(--vz-white); background-color:var(--tui-grid-blue);}
.tui-btn-orange{color:var(--vz-white); background-color:var(--tui-grid-orange);}
.tui-btn-success{color:var(--vz-white); background-color:var(--tui-grid-success);}
.tui-btn-dark{color:var(--vz-white); background-color:var(--tui-grid-dark);}
.tui-grid-btn-tree{top:calc(50% + 4px);}
.tui-grid-btn-sorting{/*filter:brightness(10);*/}

.form-area-btn{margin:0 -1rem; padding-top:0.5rem; /*border-top:1px solid var(--vz-border-color);*/}

/* btn-grid-* */
.btn-grid-sm{
	border-radius: 0.2rem; padding: 0.1rem 0.4rem;
	font-weight: 400; font-size: 0.4rem; line-height: 1;
}

/* search */
.search-box{position:relative; margin-left:0.9rem;}
.search-box .form-control.form-control-sm{padding-left:30px;}
.search-box i{position:absolute; top:9px; left:10px;}

/* grid radio rendering */
.tui-grid-row-header-radio{
	margin:0px;
}

/* tui time-picker css */
.tui-datepicker-body .tui-timepicker, .tui-datepicker-footer .tui-timepicker {
    padding: 20px 26px 20px 27px !important;
}
.tui-grid-rside-area{position:relative;}

/* kopens-grid */
.kps-grid div[class*="tui-grid-border-line-"]{border-color:transparent;}

/* grid header  */

/* grid-data-background */
.kps-grid .tui-grid-body-area, .kps-grid .tui-grid-layer-state{
	background-color : var(--tui-content-color);
}

/* cell */
/* .tui-grid-content-area{display:flex; align-items:flex-start;} */
/* .kps-grid  .tui-grid-table-container{margin-top:-1px;}  */
/* grid cell focus border �� �겢由��떆 �솢�꽦�솕�릺�뒗 諛뺤뒪 */
/* .kps-grid  .tui-grid-layer-focus-border{margin-top:-1px;}  */
/* cell �븞  �궡�슜媛� �긽愿��뾾�씠 �넂�씠 27px 怨좎젙 */
/*  .kps-grid  .tui-grid-lside-area .tui-grid-body-area .tui-grid-cell-content,
.kps-grid  .tui-grid-rside-area .tui-grid-body-area .tui-grid-cell-content{height:27px;}   */


/* 紐⑤떖李� �쓣�슱�떆, ���젆�듃 諛뺤뒪 留됰뒗 disable - �엫�쓽 �겢�옒�뒪 .editorInput */
.kps-grid .tui-grid-cell,
.kps-grid .tui-grid-cell-disabled.tui-grid-cell.editorInput{
	/*background-color:rgba(0, 207, 226, 0.1);*/
	border:none; 
	border-left : none;
	border-right : none;
	font-weight:400;
}
.kps-grid .tui-grid-cell.tui-grid-cell-header{
	white-space:pre !important;
	font-weight:600; color:var(--main-color01); 
	/* background-color:var(--grid-header-background-color);*/
	background-color : transparent; 
	border : 1px solid #b8cbff;
	border-left : none;
	border-right : none;
	border-bottom : none;
	border-top : none;
}
.kps-grid .tui-grid-cell.cell-red{background-color: var(--tui-grid-danger) !important;}

/* cell margin */
.kps-grid .tui-grid-cell-has-tree .tui-grid-cell-content{padding-left:8px;}

/* cell-validation */
.kps-grid .tui-grid-cell-invalid.tui-grid-cell{	
	color:var(--vz-danger);	font-weight:600;		
}

.kps-grid .tui-grid-cell-disabled.tui-grid-cell{
	/*color:rgba(var(--vz-black-rgb),0.6);*/
	background-color:transparent;
	/*color : black;*/
	/*background-color : white;*/
}


/* cell click event */
/* .active{filter:saturate(3);}*/

/* input  */
.kps-grid input[type='text'], .kps-grid input[type='password'] {
	margin:-10px 0 0 -5px; width:inherit;
}
.kps-grid input:focus{outline:none !important; border-color:var(--tui-focus-color);}
.kps-grid .tui-grid-datepicker-input-container{overflow:hidden;}

/* velzon  */
.kps-grid .tui-grid-layer-editing{position:inherit; border-color:transparent;}

.kps-grid input[type="radio"]{cursor:pointer;}
.kps-grid input[type="date"] {
  background:var(--vz-white) url(https://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/calendar_2.png)  97% 50% no-repeat ;
}
.kps-grid input[type="date"]::-webkit-inner-spin-button {
  display: none;
}
.kps-grid input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0;
}
.kps-grid .tui-select-box-input.tui-select-box-open, .tui-select-box-dropdown{border-color:var(--vz-blue);}
.kps-grid .tui-calendar .tui-calendar-today{font-weight:600;}


/* pagination */
.tui-grid-container .tui-grid-pagination{
	display:inline-block; position:relative; left:50%; transform:translateX(-50%);
	background-color:var(--vz-white);
}

.kps-grid .tui-pagination .tui-first, 
.kps-grid .tui-pagination .tui-prev, 
.kps-grid .tui-pagination .tui-next, 
.kps-grid .tui-pagination .tui-last, 
.kps-grid .tui-pagination .tui-prev-is-ellip, 
.kps-grid .tui-pagination .tui-next-is-ellip{
	border-width:0; box-shadow: 0 5px 25px 0 rgb(0 0 0 / 2%); 
}
.kps-grid .tui-pagination .tui-page-btn,
.kps-grid .tui-pagination .tui-last-child,
.kps-grid .tui-pagination .tui-next-is-ellip{
	border-color:transparent; 
}

.kps-grid .tui-pagination .tui-page-btn:hover {
	border-color:white;
	font-weight:600; 
	background-color:white;
	border-radius : 0.25rem;
}
.kps-grid  .tui-pagination .tui-page-btn.tui-is-selected:hover{
/* 	border-color:#b8cbff;   */
	background-color:#eef5ff;
	color:#2e90fa;
}
.kps-grid  .tui-pagination .tui-is-selected, .tui-pagination strong{
/* 	border-color:var(--tui-heading-color); */
	background-color:#eef5ff;
	border-radius:0.25rem;
	color:#2e90fa;
	cursor:pointer;
} 

.kps-grid .tui-pagination .tui-first, 
.kps-grid .tui-pagination .tui-prev, 
.kps-grid .tui-pagination .tui-next, 
.kps-grid .tui-pagination .tui-last{background-color:white;}

.kps-grid .tui-pagination .tui-page-btn .tui-ico-first,
.kps-grid .tui-pagination .tui-page-btn .tui-ico-prev,
.kps-grid .tui-pagination .tui-page-btn .tui-ico-next,
.kps-grid .tui-pagination .tui-page-btn .tui-ico-last{filter: brightness(-2)}


/* pagination  */
.kps-grid .tui-pagination .tui-is-disabled.tui-first, 
.kps-grid .tui-pagination .tui-is-disabled.tui-prev, 
.kps-grid .tui-pagination .tui-is-disabled.tui-next, 
.kps-grid .tui-pagination .tui-is-disabled.tui-last{cursor:initial; background-color:white;}


.kps-grid .tui-pagination .tui-page-btn.tui-is-disabled .tui-ico-first,
.kps-grid .tui-pagination .tui-page-btn.tui-is-disabled .tui-ico-prev,
.kps-grid .tui-pagination .tui-page-btn.tui-is-disabled .tui-ico-next,
.kps-grid .tui-pagination .tui-page-btn.tui-is-disabled .tui-ico-last{filter: brightness(0.2);}


/* drop-down */
.kps-grid .tui-select-box-dropdown{background-color:var(--vz-white);}

/* select*/
.tui-select-single{border-color:var(--vz-input-border); cursor:pointer;}
.tui-select-single:focus{
	outline:0;  border-color:var(--vz-input-focus-border); 
	box-shadow: 0 0 0 0 rgb(94 163 203 / 25%);  -webkit-box-shadow: 0 0 0 0 rgb(94 163 203 / 25%);
    background-color: var(--vz-input-bg);       
}

.tui-select-single::-webkit-scrollbar {width:0.8em;}
.tui-select-single::-webkit-scrollbar-track { 
 	background-color:var(--vz-border-color);
}

.tui-select-single::-webkit-scrollbar-thumb {
	border:2px solid var(---vz-border-color);
 	background-color:var(--vz-gray-400);  
}


/* scroll-bar */
.kps-grid .tui-grid-scrollbar-left-bottom{ 
	border-right-width:0; 
	height:var(--tui-scroll-width);
	background-color:var(--tui-content-color);
	border-left:none !important;
/* 	border-bottom: 1px solid #dee1e6 !important; */
}
.kps-grid .tui-grid-scrollbar-frozen-border{border-width:0; height:var(--tui-scroll-width);}
.kps-grid .tui-grid-scrollbar-right-bottom{
	border : none !important;
	/*background-color: var(--tui-content-color);*/
	background-color: transparent !important;
}
.kps-grid .tui-grid-scrollbar-right-top{
/* 	background-color: #f9fafb !important; */
/* 	border-top: 1px solid #dee1e6 !important; */
	background-color: transparent !important;
}
.kps-grid .tui-grid-scrollbar-right-top{border-top-width:1px; border-bottom-width:1px;}
.kps-grid .tui-grid-scrollbar-right-bottom{border-top-width:1; border-left-width:1; height:13px!important;}

.kps-grid .tui-grid-scrollbar-y-inner-border{
	right:var(--tui-scroll-width); background-color:var(--tui-content-color);
}
.kps-grid .tui-grid-body-area::-webkit-scrollbar{
	width:var(--tui-scroll-width); height:var(--tui-scroll-width);
	background-color: var(--tui-content-color);
}

.tui-grid-rside-area .tui-grid-header-area,
.tui-grid-rside-area .tui-grid-summary-area {
  margin-right: 0px; background-color:var(--grid-header-background-color); 
}
.tui-grid-scrollbar-right-top{border:none; box-sizing:border-box; background-color:var(--grid-header-background-color)!important;}
.tui-grid-table tr:first-of-type .tui-grid-cell{border-top-width:0 !important;}
.tui-grid-table tr:last-of-type .tui-grid-cell{border-bottom-width:1 !important;}
.tui-grid-table th[rowspan="2"]{border-bottom-width:0;}

.tui-grid-header-area tbody, .tui-grid-header-area tr {
	border : none;
	border-left : none;
	border-right : none;
}
[data-layout-mode="dark"] .tui-grid-rside-area .tui-grid-header-area,
[data-layout-mode="dark"] .tui-grid-rside-area .tui-grid-summary-area {margin-right:17px; background-color:#3d4f67;}

/* theme > dark */
[data-layout-mode="dark"] .grid-top h4{color:var(--vz-white);}
[data-layout-mode="dark"] input[type=checkbox], [data-layout-mode="dark"]  input[type=radio], [data-layout-mode="dark"] progress {accent-color: var(--tui-focus-color) ; }
/* form style */
[data-layout-mode="dark"] .tui-select-single, 
[data-layout-mode="dark"] .search-box .form-control{color:var(--vz-gray-500); background:rgba(var(--vz-white-rgb),.12);}
[data-layout-mode="dark"] .tui-select-single option{color:var(--vz-gray-500); background-color:var(--vz-gray-300); }

/* button */
/* [data-layout-mode="dark"] .grid-top button, [data-layout-mode="dark"] .modal-dialog button{filter: saturate(60%);} */
[data-layout-mode="dark"] .btn-grp button,[data-layout-mode="dark"] button[class*="tui-btn"]:hover{color:var(--vz-gray-100) !important;}

/* tui-grid cell */
[data-layout-mode="dark"] .kps-grid .tui-grid-content-area{border-width:0;}
[data-layout-mode="dark"] .kps-grid .tui-grid-body-area{background-color:var(--tui-bg-dark);}

[data-layout-mode="dark"] .kps-grid .tui-grid-cell, 
[data-layout-mode="dark"] .kps-grid .tui-grid-cell-disabled.tui-grid-cell.editorInput{
	border-color:var(--tui-border-dark); border-left-width:1px;
	background-color:var(--tui-bg-dark); color:var(--vz-white); 
}
[data-layout-mode="dark"] .kps-grid .tui-grid-cell.tui-grid-cell-header{
	border-top-width:0; background-color:var(--tui-heading-dark);  color:var(--vz-gray-900);
}
[data-layout-mode="dark"] .kps-grid .tui-grid-cell-row-header{color: var(--vz-table-striped-color);background-color:var(--vz-table-striped-bg);}

[data-layout-mode="dark"] .kps-grid .tui-grid-cell-invalid.tui-grid-cell {	
	border-color:var(--vz-gray-100); color:var(--vz-danger); font-weight:600;		
	background-color:rgba(var(--tui-grid-danger-rgb),0.4);
}
[data-layout-mode="dark"] .kps-grid .tui-grid-cell-disabled.tui-grid-cell{color:#D3D7EB; background-color:#383D43;}
/* [data-layout-mode="dark"] .kps-grid .tui-grid-btn-sorting{filter:brightness(10);} */

/* input */
[data-layout-mode="dark"] .kps-grid input:focus{color:var(--vz-white); background-color:var(--vz-gray-200);}
[data-layout-mode="dark"] .kps-grid .tui-datepicker{background-color:transparent;}
[data-layout-mode="dark"] .kps-grid .tui-calendar{background-color:var(--vz-gray-100); color:#ddd;}
[data-layout-mode="dark"] .tui-calendar .tui-calendar-header{border-width:0;}
[data-layout-mode="dark"] .tui-calendar .tui-calendar-title-today{background-color:var(--vz-gray-300);}
[data-layout-mode="dark"] .tui-calendar .tui-calendar-title{color:var(--vz-gray-700);}
[data-layout-mode="dark"] .tui-calendar .tui-calendar-title-today:hover{color:var(--vz-blue);}
[data-layout-mode="dark"] .tui-calendar-btn{
	margin:12px; border-radius:3px;
	width:30px; height:30px; 
	background-color:var(--vz-gray-300); 
}
[data-layout-mode="dark"] .tui-calendar .tui-calendar-btn-prev-month:after, [data-layout-mode="dark"] .tui-calendar .tui-calendar-btn-next-month:after{filter:brightness(10);}
[data-layout-mode="dark"] .tui-calendar .tui-calendar-today{color:var(--vz-white); background-color:var(--tui-grid-blue);}
[data-layout-mode="dark"] .tui-calendar .tui-calendar-date:hover{color:var(--vz-white); background-color:var(--vz-gray-400);}

[data-layout-mode="dark"] .kps-grid .tui-select-box-input.tui-select-box-open, .tui-select-box-dropdown{border-color:#aaa; background-color:var(--vz-border-color);}
[data-layout-mode="dark"] .kps-grid .tui-select-box-dropdown li{color:var(--vz-gray-800); background-color:var(--vz-gray-300);}
[data-layout-mode="dark"] .kps-grid .tui-select-box-dropdown li.tui-select-box-highlight{color:var(--vz-gray-300); background:rgba(var(--vz-primary-rgb),0.3);} 

[data-layout-mode="dark"] .tui-select-box-open > .tui-select-box-icon{filter:brightness(10);}

/* pagination */
[data-layout-mode="dark"] .tui-grid-container .tui-grid-pagination{background-color:transparent;}
[data-layout-mode="dark"] .tui-pagination .tui-first, 
[data-layout-mode="dark"] .tui-pagination .tui-prev, 
[data-layout-mode="dark"] .tui-pagination .tui-next, 
[data-layout-mode="dark"] .tui-pagination .tui-last, 
[data-layout-mode="dark"] .tui-pagination .tui-prev-is-ellip, 
[data-layout-mode="dark"] .tui-pagination .tui-next-is-ellip{
	border-width:0; box-shadow: 0 5px 25px 0 rgb(0 0 0 / 10%); 
	background-color:var(--vz-gray-300); 
}
[data-layout-mode="dark"] .tui-pagination .tui-page-btn,
[data-layout-mode="dark"] .tui-pagination .tui-last-child,
[data-layout-mode="dark"] .tui-pagination .tui-next-is-ellip{
	border-color:transparent; color:var(--vz-gray-600);
}
[data-layout-mode="dark"] .tui-pagination .tui-page-btn:hover {background-color:var(--vz-gray-500); font-weight:600;}
[data-layout-mode="dark"] .kps-grid .tui-pagination .tui-page-btn.tui-is-disabled{
    background-color: transparent; box-shadow: none; opacity: 0.3;
}
[data-layout-mode="dark"] .tui-pagination .tui-page-btn .tui-ico-first,
[data-layout-mode="dark"] .tui-pagination .tui-page-btn .tui-ico-prev,
[data-layout-mode="dark"] .tui-pagination .tui-page-btn .tui-ico-next,
[data-layout-mode="dark"] .tui-pagination .tui-page-btn .tui-ico-last{filter: brightness(10);}
[data-layout-mode="dark"]  .kps-grid .tui-pagination .tui-is-selected, .tui-pagination strong{color:var(--vz-white); background-color:var(--tui-heading-dark);}

/* scroll-bar */
[data-layout-mode="dark"] .kps-grid div[class*="tui-grid-scrollbar-y-"],[data-layout-mode="dark"] .kps-grid div[class*="tui-grid-scrollbar-x-"]{
	background-color:transparent;
} 
[data-layout-mode="dark"] .kps-grid .tui-grid-body-area::-webkit-scrollbar{
	width:var(--tui-scroll-width); height:var(--tui-scroll-width); 
	background-color:transparent;
}
[data-layout-mode="dark"] .kps-grid  .tui-grid-container ::-webkit-scrollbasr-thumb {
    background-color:rgba(var(--vz-white-rgb),.2);
}
[data-layout-mode="dark"] .kps-grid .tui-grid-scrollbar-left-bottom,
[data-layout-mode="dark"] .kps-grid .tui-grid-scrollbar-right-bottom{
	border-color:var(--vz-gray-300);  background-color:var(--vz-gray-300);
}
[data-layout-mode="dark"] .kps-grid .tui-grid-scrollbar-right-top{background-color:var(--tui-bg-dark) !important;}
/* .kps-grid .tui-grid-scrollbar-right-bottom{display:none;} */

/* tui-select-box */
.kps-grid .tui-select-box{top:-6px; margin:0 -0.3rem;}
.kps-grid .tui-select-box-input.tui-select-box-open{position:absolute; top:0; left:0; width:100%;}
.kps-grid .tui-select-box-dropdown{top:28px;}

.tui-grid-layer-focus-deactive .tui-grid-layer-focus-border {
/* 	background : #ccc; */
/*  background : #aaa; */
}

.tui-grid-layer-focus-border {
/* 	background : #555; */
/*	background : #00a9ff; */
}

.tui-grid-table > tbody {
	border-bottom : none;
}

.tui-grid-header-area .tui-grid-cell-header {
	background: #eef5ff !important;
}

.tui-grid-header-area tbody{
	border-top: 1px solid #dee1e6 !important;
    border-bottom: 1px solid #dee1e6 !important;
}