@charset "utf-8";

/*	설계시스템과 타겟시스템 동일하게 적용
  - 설계시스템에서 각각 스타일을 사용자가 줄 수 있어야 함
	 border설정 시 top/bottom과같이 일부만 설정하는 경우 border-style을 따로 정의해야 함
	 !important 사용금지 -> 설계 시 설정한 스타일이 적용되지않음
*/

:root {
	/* color */
	--point-color: rgba(0,126,255,1);
	--form-validation-color: #fdf1ec;
	--disabled-color: #f7f7f7;
	--enable-bg-color: #ffffff;	/* grid editable background color */
	
	--form-el-bd-color: #bbb;	/* input, button */
	--container-bd-color1: #ccc;	/* form table, search border color */
	--container-bd-color2: #dedede; 	/* container(group, tab, container) border color */
	--ft-color: #212121;
	--label-ft-color: #666;	/* label font color*/
	--link-ft-color:  rgba(0,126,255,1);	/* link font color */
	
	--ft-size: 12px;	/* 1.2rem */
	--ft-family: 'pretendard-r', 'noto-r', "맑은 고딕", Helvetica, "Apple SD Gothic Neo", sans-serif;
	
	
	/* table(grid) 하단에 css정의부분 확인 */
	--table-bd-color: #e1e1e1;	/* border color */
	
	--table-header-ft-color: #000;	/* header(th) font color */
	--table-header-color: #f8f8f8;	/* header background-color */
	--table-header-height: 36px;
	
	--table-content-ft-color: #212121;	/* content(td) font color */
	--row-select-color: #e8f3ff;	/* row select background color */
	--row-hover-color: #e5f2da;		/* row hover background color */
	--cell-change-color: #fafad2;	/* cell change background color */
	--table-row-height: 34px;
}

/* common */
html,
body {
	font-family: var(--ft-family);
	font-size: 10px
}

body {
	font-size: var(--ft-size);
	line-height:1
}

input,
button {
	vertical-align: middle
}

a.link-compo,
a.link-compo:hover,
a.link-compo:active,
a.link-compo:visited,
.link {
	color: var(--point-color);
	text-decoration: underline;
}

/* default 재정의 */
.container-fluid {
	padding: 10px;
}

.group-container,
.tab-group-container,
.search-container,
.unifiedSearch-container {
	margin-bottom: 1.2rem;
}

.form-row,
.grid-btn-wrapper {
	/* flex-basis: 100%; */
	display: flex;
	justify-content: flex-start;
	align-items: stretch;
	flex-wrap: nowrap;
	padding: 0;
}

.canvas-size-fix .form-row {
	flex-wrap: wrap;
}

/* etc */
.skip {
	display: block;
	position: absolute;
	overflow: hidden;
	width: 1px;
	height: 1px;
	clip: rect(1px, 1px, 1px, 1px)
}

.wave {
	width: 1.5rem;
	height: 2.4rem;
	vertical-align: middle;
	line-height: 2.4rem;
	text-align: center;
	display: inline-block;
	font-size: 1.2rem
}

/* button */
.btn {
	min-height: 28px;
	border: 1px solid #d2d2d2;
	padding: 2px 8px;
	font-size: calc(var(--ft-size) + 1px);
	white-space : pre-line;
}

.btn:hover {
	border: 1px solid #212121;
}

.btn:hover:disabled,
.btn:disabled {
	color: #aaa;
	border-color: #ddd;
	box-shadow: none;
	cursor: default;
	background: #f6f6f6
}

.btn-ico {
	font-size: 16px;
	width: 28px;
	padding: 0
}

.btn-ico .fas,
.btn-ico .far {
	font-size: var(--ft-size);
}

.bx-btn {
	font-size: 0
}

.grid-btn-wrapper .grid-btn-1,
.grid-btn-wrapper .grid-btn-2 {
	flex-grow: 1;
	flex-basis: 100%;
	word-break: break-all;
	padding-top:6px;
}
.grid-btn-wrapper .grid-btn-1 button,
.grid-btn-wrapper .grid-btn-2 button,
.grid-grouping-wrapper,
.grid-btn-wrapper .grid-btn-1 .page-option,
.grid-btn-wrapper .grid-btn-2 .page-option,
.grid-btn-wrapper .grid-btn-1 .node-level-input,
.grid-btn-wrapper .grid-btn-2 .node-level-input {
	margin-bottom:6px;
}

.bx-btn.col-2 .multi-col:last-child {
	text-align: right;
	margin-right: 0;
	margin-left: .2rem
}

/* text */
.txt-l {
	font-family: 'pretendard-l', 'noto-l'
}

.txt-r {
	font-family: 'pretendard-r', 'noto-r'
}

.txt-b {
	font-family: 'pretendard-b', 'noto-b'
}

.vali {
	color: #ff1965;
	font-size: 1.1rem;
	margin-left: .8rem
}

label.required:after,
span.required:after {
	content: "";
	background: #ff1965;
	margin: 5px 0 0 1px;
	width: 3px;
	height: 3px;
	display: inline-block;
	border-radius: 50%;
	position: relative;
	top: -6px;
}

.tit-emph::after {
	content: '*';
	display: inline-block;
	color: #ff1965;
	margin-left: .2rem;
	width: 1rem;
	height: 1rem;
	vertical-align: middle;
	text-align: center
}

.tit-cnt {
	margin-bottom: 2rem
}

.tit-cnt .text-compo {
	font-size: 1.8rem;
	font-family: 'pretendard-b', 'noto-b';
}

.tit-comp {
	font-size: 1.4rem;
	font-family: 'pretendard-b', 'noto-b';
	margin-bottom: .8rem
}

.group-container .group-title {
	font-size: 1.4rem;
	font-family: 'pretendard-b', 'noto-b';
}
.group-container .group-title:hover {
	color:var(--point-color);
}
.group-container .group-container .group-title {
	background: linear-gradient(180deg, rgba(0,0,0,0.07) 0%, rgba(0,0,0,0.14) 35%, rgba(0,0,0,0.2) 100%);
}
.group-container .group-container .group-title:hover {
	color:000
}
.group-container .group-container .container-content {
	border-top:0 none
}
.tab-container.container-content > .group-container .group-title {
	background:#fff;
}

/* form */
input::placeholder,
textarea::placeholder {
	color: #999;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
	color: #999;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
	color: #999;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
	color: #999;
}
input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
	color: #999;
}

input.input-compo,
.dataselect-compo,
span.input-compo input {
	width: 100%
}


/* 본문 form 에 해당하는 항목들 */
.form-col > .input-compo,
.form-col > .textarea-compo,
.form-col > .html-compo,
.form-col > .radio-compo,
.form-col > .checkbox-compo,
.form-col > .select-compo,
.form-col > .attach-compo,
.form-col > .date-compo,
.form-col > .time-compo,
.form-col > .datetime-compo,
.form-col > .duration-date-compo,
.form-col > .dataselect-compo,
.form-col > .id-compo,
.form-col > .view-compo,
.form-col > .value-compo {
	margin-left:10px;
	margin-right:10px;
}

.form-col > .dataselect-compo {
	margin-right:0;
	display:flex;
}
/*end*/

.html-compo {
	margin-top:6px;
	margin-bottom:6px;
}

.html-compo + iframe,
.fr-box {
	/* gen된 시스템 html-compo */
	margin: 8px 10px;
}

.dataselect-compo .form-control {
	width: calc(100% - 110px);
}

.form-control,
.form-control.select-compo {
	height: 28px;
	border: none;
	font-size: var(--ft-size);
}

.form-control:not(:disabled):not(.node-level-input),
.form-control.select-compo:not(:disabled) {
	border: 1px solid var(--form-el-bd-color);
}

input.form-control {
	padding: 0 .4rem;
}

.form-control:focus {
	border-color: #555
}

.form-control:disabled,
.form-control.disa,
.form-control.textarea-compo:disabled {
	background: var(--disabled-color);
	border-color: #ddd;
	color: #484848;
	border: 1px solid var(--form-el-bd-color);
}

.form-control.textarea-compo {
	max-width: 100%;
	width: 100%;
	/* min-height: 99px; TODO: min-height는 설계로 rows를 조절할 수 있기때문에 일반 input과 같아야 함*/	
	height: auto;
	padding: 10px;
	line-height: 1.3;
	border: 1px solid var(--form-el-bd-color);
	margin-top:8px;
	margin-bottom:8px;
}

.form-control.textarea-compo:focus {
	border-color: #212121;
}

.form-control.select-compo {
	width: auto;
	padding-left:8px;
	padding-right:8px;
}

.form-col > .form-control.select-compo {
	min-width:98px;	/* TODO: 본문의 select-compo만 적용되도록 */
}

.form-control.w-200 {
	width: 20rem
}

.form-control.w-auto {
	width: auto !important;
	min-width: auto !important;
	max-width: auto !important
}

.form-control.wide {
	min-width: 100%;
	width: 100%;
	max-width: 100%
}

/*** radio, checkbox ***/
input[type=checkbox],
input[type=radio] {
	width: 14px;
	height: 14px;
	font-size: 1em;
}

.form-check {
	display: inline-block;
	position: relative;
	margin: .5rem 2.7rem .5rem 0
}

.form-check label {
	color: #000;
	position: relative;
	padding-left: 1rem;
	font-size: var(--ft-size);
}

/* disabled */
.form-check input[type=checkbox]:disabled + label,
.form-check input[type=radio]:disabled + label,
.form-check.disa label {
	color: #484848
}

/* checkbox, radio 수직정렬 */
.form-check-block {
	display: block;
	margin-right: 0;
	margin-top: 1rem
}

.form-check-block:first-child {
	margin-top: .5rem
}

/* component */
.attach-compo,
.datetime-compo,
.dataselect-compo {
	font-size: 0
}

.datepicker {
	width: 110px;
	margin-right: .4rem
}

.datepicker:not(.view-compo,.disa,:disabled) {
	background-image: url(../../img/icon-calendar.png);
	background-position: right 5px center;
	background-repeat: no-repeat;
	background-size: 16px;
	padding-right: 22px;
}

.timepicker {
	width: 8rem;
	margin-right: .4rem
}

.view-compo {
	font-size: var(--ft-size);
	line-height: 1.3;
	width: auto;
}

.form-col > .view-compo {
    margin-top: 8px;
    margin-bottom: 8px;
}

.attach-compo .form-control,
.dataselect-compo .form-control {
	margin-right: .4rem;
	flex-grow: 1;
}

.attach-compo > * {
	vertical-align: middle;
	display: inline-block;
}

.attach-compo .txt {
	margin-left: .4rem;
	font-size: 1.1rem;
	margin-right: .8rem;
	display: inline-block;
	line-height: 1.2;
}

.attach-compo .lst-file > li {
	position: relative;
	background: var(--table-header-color);
	min-height: 28px;
	border-radius: 5px;
	border:1px solid var(--table-header-color);
	padding: 6px 55px 7px 30px;
	vertical-align: middle;
	margin: 0px 4px 0px 0;
	width: fit-content;
}

.attach-compo .lst-file > li [class^="icon-"] {
	width: 16px;
	height: 16px;
	font-size: 16px;
}

.attach-compo .lst-file > li .icon-download {
	margin-right: 8px;
}

.attach-compo .lst-file > li > * {
	vertical-align: middle;
}

.attach-compo .lst-file > li > .btn-ico.del {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 8px;
}
.attach-compo .lst-file > li:hover {
	background: var(--table-header-color);
	border:1px solid var(--point-color);
}

*[class*='-compo'] .btn:not([class*='-compo']) {
	margin-right: .4rem;
}

.attach-compo .lst-file > li > .btn-ico.del.imagePopupBtn {
	right: 30px;
}

.attach-compo .lst-file > li > .btn-ico.del.fileDownBtn {
	left: 10px;
}

.attach-compo .lst-file > li > .btn-ico.del.delRowBtn {
	background-color: #fff;
	width: 24px;
	height: 24px;
	border-radius: 5px;
}

.attach-compo .fileImageDiv {
    position: relative;
    background-color: #efefef;
    border-radius: 5px;
    padding: 10px;
    display: table;
}

.attach-compo .previewImageDiv {
	display: table-cell;
	vertical-align:middle;
}

.attach-compo .imageDeleteBtn {
	position: absolute;
	top: 5px;
	right: 5px;
	font-size: 16px;
	border: 0;
	cursor: pointer;
	background-color: #fff;
	width: 24px;
	height: 24px;
	display: inline-block;
	border-radius: 5px;
}

.attach-compo .uploadbox {
	border: 2px dotted #ccc;
	background: url(../../img/drag_drop.svg) no-repeat center 14px / 28px 28px;
	Border-radius: 5px;
	font-size: 12px;
	color: #aaa;
	text-align: center;
	padding-top: 48px;
	min-height: 75px;
	width: 400px;
	display: block;
	margin-top:4px;
	margin-bottom: 4px;
}

.attach-compo.disa .uploadbox {
	background-color: #efefef;
}

.attach-compo .attach-btn {
	vertical-align: top;
}

.chart-compo {
	width: 400px;
	height: 300px;
}

/* group */
.group-container .group-title {
	position: relative;
	min-height: 1.8rem;
	cursor: pointer;
	padding: 9px 0;
}

.group-container .group-title > .tit {
	width: calc(100% - 1.6rem);
	height: 100%;
	display: 0;
	display: flex;
	-webkit-box-align: center;
	align-items: flex-end;
	line-height: 1.2
}

.group-container .group-title > i[class*='icon-'] {
	width: 1.6rem;
	height: 1.6rem;
	font-size: 1.6rem;
	position: absolute;
	bottom: 0;
	right: 0;
}

.group-container .group-title > i {
	min-width: 19px;
	padding-left: 5px;
	padding-right: 5px
}
.group-container > .container-content {
	border:1px solid var(--container-bd-color2);
	padding:10px
}

/* tabs */
ul.nav-tabs {
	display: flex;
	flex-wrap: wrap;
	padding-left: 0;
	margin-top: 0;
	list-style: none;
	border: none;
	margin-bottom: -1px;
}

ul.nav-tabs > li.nav-item {
	display: list-item;
}
ul.nav-tabs > li {
	display: block;
	font-size: 1.6rem;
	color: #222;
	min-width:12.5%;
	min-height:40px;
	border:1px solid #dcdbdb;
	border-radius: 0;
	text-align: center;
	background-color: #fff;
	cursor: pointer;
	padding:12px;
}

ul.nav-tabs > li.active {
	color: #fff;
	background-color:#212121;
}

.tab-container.active {
	display: block;
}

.tab-container:not(.active) {
	display: none;
}

.tab-content .line-type ul.nav-tabs {
	border: 1px solid var(--container-bd-color2);
	background: #fff
}

.tab-content .line-type ul.nav-tabs > li {
	display: inline-block;
	vertical-align: top;
	margin: 0;
	padding:0;
}

.tab-content .line-type ul.nav-tabs > li a {
	min-height: 3.2rem;
	background: #fff;
	padding: 1rem 1.2rem 0;
	font-size: 1.1rem;
	border-radius: 0;
	border: none
}

.tab-content .line-type ul.nav-tabs > li.active a {
	color: #000;
	font-family: 'pretendard-b', 'noto-b'
}

.tab-content .line-type ul.nav-tabs > li.active:hover a,
.tab-content .line-type ul.nav-tabs > li:hover a {
	color: var(--point-color)
}

.tab-content .line-type .tab-container.container-content {
	padding: 0 1rem
}

/* sub screen. canvas.css에 있음 */
/* ul.nav-tabs.sub-screen-tab-name-wrapper {
	justify-content: flex-end;
}

ul.nav-tabs.sub-screen-tab-name-wrapper > li:hover {
	background-color: #fff;
}

ul.nav-tabs.sub-screen-tab-name-wrapper > li.active {
	background-color: #212121;
}

.sub-screen-tab-group-container > .tab-content > .container-content {
	padding-bottom: 300px;
} */ 


/* grid checkbox th */

.col-num {
	width: 2.8rem
}

.form-col {
	flex-grow: 1;
	flex-basis: 100%;
	word-break: break-all;
}

.canvas-size-fix .form-col {
	flex-grow: 0;
}

.form-row,
.form-col,
.container-content {
	min-height: 42px
}

.label-col,
.value-col {
	display: flex;
	align-items: center;
}

/* 반복설정된 컨테이너 */
.repeat-check-row,
.repeat-check-col {
	min-height: auto;
}
.repeat-check-col {
	flex: 0 0 25px;
	display: flex;
	align-items: center;
}
.repeat-check-col .form-check {
	margin: 0
}


/* value, label 관련 row에 border설정 */
/*.form-row:first-child:not(.search-row) > .label-col,
.form-row:first-child:not(.search-row) > .value-col*/
.form-row:first-child:has(>.label-col),
.form-row:first-child:has(>.value-col) {
	border-style: solid;
	border-top:1px solid #212121;
}

/* .label-col:not(.search-col-add),
.value-col:not(.search-col-add) */
.form-row:has(>.label-col),
.form-row:has(>.value-col) {
	border-style: solid;
	border-bottom:1px solid var(--container-bd-color1);
}

.form-row.search-row,
.search-row:first-child:has(>.label-col),
.search-row:first-child:has(>.value-col) {
	border-style: none;
	border-width: 0;
}

.label-col {
	flex-basis: 100%;
}

.canvas-size-fix .label-col {
	flex-basis: 100px;
}

.label-col label {
	color: var(--label-ft-color);
	padding: 0 1.2rem;
	line-height: 1.3;
	white-space: pre-line;
}
.label-col:not(.search-col-add) {
	background-color:#f2f2f2;
	width:100%;
}
.value-col {
	flex-basis: 300%;
}

.canvas-size-fix .value-col {
	flex-basis: 300px;
}

/* search */
.search-container,
.unifiedSearch-container {
	background-color:#f8f8f8;
	padding: 12px 17px 12px 12px;
	box-sizing: border-box;
}

.search-container .form-row,
.unifiedSearch-container .form-row {
	min-height: 30px;
}

/* search영역  rangeSearch input 사이즈 조절 */
.search-container .search-row .input-range > .form-control {
	width: calc(50% - 8px);
	max-width: 100%
}

/* .search-container .search-btn-wrapper {
	flex-basis: 18%;
} */

.unifiedSearch-container .search-btn-wrapper {
	flex-basis: 10%;
}

.canvas-size-fix .search-container .container-content {
	flex-basis: 10%;
	text-align:right;
}

/* pagine */
/* bx-paging으로 감싸지 않았을 때 밑에  2줄 */
.page-info {
	font-size: var(--ft-size);
/* 	text-align: left; */
	height: 18px;
	margin-top:10px
}

.page-info .total-rows {
	font-family: 'pretendard-l', 'noto-l';
	color:var(--point-color);
	font-weight:bold;
	padding-left: 4px;
	padding-right: 4px;
}

.pagination {
	display: flex;
	padding-left: 0;
	margin: 0;
	list-style: none;
	box-sizing: border-box;
	justify-content: center;
	margin-top:32px;
}

.pagination .page-item {
	width: 25px;
	height: 25px;
	border-color: #c5c5c5;
	text-align: center
}

.pagination .page-item .page-link {
	line-height:25px;
	display: block;
	border: 0 none;
	color: #999;
	font-size: var(--ft-size);
	border-radius: 3px;
	width: 100%;
	height: 100%;
}
.pagination .page-item .page-link i.fas {
	line-height:25px;
}


.pagination .page-item .page-link:hover {
	background-color: #e1e1e1;
	border-radius:3px;
	color:#212121;
}

.pagination .page-item.active .page-link {
	background-color: #e1e1e1;
	border-radius:3px;
	color:#212121;
	font-weight:700;
}

.pagination .page-item.disabled .page-link {
	pointer-events: none;
	cursor: auto;
}

@media all and (max-width : 569px) {
	.form-row {
		flex-wrap: wrap;
	}

	.label-col {
		max-width: 100%
	}

	.search-container,
	.unifiedSearch-container {
		padding-left: 10px;
		padding-right: 10px;
	}

	.search-container .search-row .select-compo {
		width: 100%
	}
	.form-row .form-col button {
		margin-bottom: .4rem
	}

}


*[class*='-compo']:not(:last-child) {
	margin-right: .4rem;
}

.search-container .search-row .label-col,
.search-container .search-row .value-col,
.unifiedSearch-container .search-row .label-col {
	min-height: 32px;
	padding: 3px 0;
}

.unifiedSearch-container .search-row .value-col {
	min-height: 32px;
	padding: 3px 6px;
}

.search-container .form-col.search-btn-wrapper,
.unifiedSearch-container .form-col.search-btn-wrapper {
	padding-top: 3px;
	min-height: 36px;
	text-align:right;
}

.form-col.search-container,
.search-container .container-content,
.form-col.unifiedSearch-container,
.unifiedSearch-container .container-content {
	min-height: 36px;
}


/* tree */
.tree-container,
.manual-tree-container {
	min-height: 200px !important;
	border: 1px solid var(--container-bd-color2);
	overflow: hidden;
	position: relative;
}

.tree-sch-wrapper {
	padding: 6px 4px 0 4px;
	display: flex;
}

.tree-sch-wrapper input {
	flex: 1 1 auto;
}
.tree-sch-wrapper button {
	flex: 0 0 auto;
}

.tree-btn-wrapper {
	padding-top: .6rem;
	margin-bottom: 1.2rem;
	min-height: 3.2rem;
}
.tree-btn-wrapper button {
	margin: .4rem 0 0 .4rem;
}

.tree-search-btn {
	border:0 none;
	background-color:var(--point-color);
	color:#fff
}
.tree-search-btn:hover {
	border:0 none;
}

/* tab, group, default container
.tab-group-container > .tab-content,
.group-container > .container-content,
.form-row:not(.search-row) > .container-content:not(.iframe-container) {
	padding: 10px;
	border: 1px solid var(--container-bd-color2)
} */

/* tab, default container */
.form-row:not(.search-row) > .container-content:not(.iframe-container) {
	padding: 0;
	border: 0 none;
}
.tab-group-container > .tab-content {
	padding:10px;
	border:1px solid var(--container-bd-color2)
}

/*tab in tabs*/
.tab-group-container .tab-content .tab-group-container ul.nav-tabs li {
	display: block;
/*	font-size: 13px;*/
	font-size: calc(var(--ft-size) + 1px);
	color: #555;
	min-height: 32px;
	min-width: 8rem;
	border-top: 1px solid var(--container-bd-color2);
	border-left: 1px solid var(--container-bd-color2);
	border-bottom: 1px solid var(--container-bd-color2);
	border-radius: 0;
	text-align: center;
	background-color: #f6f6f6;
	cursor: pointer;
}
.tab-group-container .tab-content .tab-group-container ul.nav-tabs li:first-child {
	border-radius: 5px 0 0 0;
}

.tab-group-container .tab-content .tab-group-container ul.nav-tabs li:last-child {
	border-radius: 0 5px 0 0;
	border-right: 1px solid var(--container-bd-color2);
}
.tab-group-container .tab-content .tab-group-container ul.nav-tabs li.active {
	color: #000;
	font-family: 'pretendard-b', 'noto-b';
	border-bottom: 1px solid #fff;
	background-color:#fff;
}

/* common */
.text-right {
	text-align: right;
}

span[class*='-compo'] {
	display: inline-block;
}

/*grid setting button*/
.btn.grid-setting-btn {
	border: none;
	padding: 5px 5px;
	font-size: 20px;
}

.btn.grid-setting-btn:hover {
	box-shadow: none;
}

/* validation check */
.insertFail {
	background-color: var(--form-validation-color) !important;
}


/* table(grid) 변경. 내용은 추가할 수 없고 값만 변경가능.
	변수 사용한부분은 변수의 값을 변경해야 함 */
/* 공통 */
table.table .table-header th,
table.table td,
.tui-grid-content-area .tui-grid-cell {
	border-style: solid;
	border-color: var(--table-bd-color);
    border-left-width: 0px;
    border-right-width: 1px;
    border-top-width: 1px;
    border-bottom-width: 1px;
}

/* 헤더(th) */
table.table .table-header th,
.tui-grid-cell-header {
	color: var(--table-header-ft-color);
	background-color: var(--table-header-color);	
	font-weight: 600;
	/*font-size: 13px;*/
	font-size: calc(var(--ft-size) + 1px);
	letter-spacing:-0.05em;
}

/* content(td) */
table.table td,
.tui-grid-body-area .tui-grid-cell {
	/* content(td)의 배경색 전체 적용 시
	background-color: #ffffff; */
}
table.table td {
	/* 그리드의 content 글씨색 적용 시. 변수색을 변경 */
	color: var(--table-content-ft-color);
}

table.table td,
td.tui-grid-cell {
	font-size: var(--ft-size);
	font-family: 'pretendard-l', 'noto-l';
	letter-spacing:-0.05em;
}
td.tui-grid-cell .tui-grid-cell-content {
	padding: 4px 7px;						/* CHECK */
}

/* table 상단 포인트 1줄 */
table.table .table-header:first-child th,
.tui-grid-content-area .tui-grid-border-line-top {
	border-top: 2px solid #212121;
}



/*Search*/
.search-btn, .search-btn:hover, .unifiedSearch-btn, .unifiedSearch-btn:hover {
	border:1px solid var(--point-color);
	background-color:var(--point-color);
	color:#fff;
	font-size:var(--ft-size);
	padding:8px 14px;
	margin-top:2px;
	height:30px;
}
.reset-btn, .reset-btn:hover {
	border:1px solid #999;
	background-color:#fff;
	color:#666;
	font-size:var(--ft-size);
	padding:8px 14px;
	margin-top:2px
}
.search-container input[type="text"], .unifiedSearch-container input[type="text"],
.search-container input[type="number"], .unifiedSearch-container input[type="number"],
.search-container .form-control.select-compo {
	height: 30px;
	border: 1px solid var(--form-el-bd-color);
	margin-top:2px;
}
.search-container input[type="text"]:focus,.search-container input[type="number"]:focus,
.search-container .form-control.select-compo:focus,
.search-container .form-control.select-compo option:focus{border:2px solid #212121;border-radius:2px}

.search-container .container-content {
	flex-basis: calc(100% - 180px)
}
/*Search 레이아웃 사이즈조정*/
.search-container .search-btn-wrapper {
	flex-basis: 170px
}

/*DataSelect*/
.dataselect-compo .btn, .attach-compo .btn {
	border:0 none;
	color:#212121;
	line-height:1;
	flex-grow: 0;
}
.dataselect-compo .btn:hover, .attach-compo .btn:hover {
	background-color:#212121;
	border-radius:50%;
	color:#fff
}
.dataselect-compo .btn:disabled, .attach-compo .btn:disabled {
	background-color:transparent;
	color:#aaa;
}

/* .img-compo {border-bottom:0 none !important} */
.text-compo {color:var(--ft-color);}

span.text-compo {
	white-space : pre-line;
}

/*기본버튼*/
.default-btn {
	font-size:calc(var(--ft-size) + 1px);
}
.save-btn {
	background-color:var(--point-color);
	border:1px solid var(--point-color);
	color:#fff;
}
.save-btn:hover {
	background-color:var(--point-color);
	border:1px solid var(--point-color);
	color:#fff;
}
.delete-btn, .delete-btn:hover {
	font-size:calc(var(--ft-size) + 1px);
}

/*그리드상단버튼*/
.grid-add-btn, .grid-add-btn:hover {

}
.grid-delete-btn, .grid-delete-btn:hover {

}
.grid-copy-btn, .grid-copy-btn:hover {

}

/* dropdown */
.dropdown-compo {
	display: inline-block;
	font-size: calc(var(--ft-size) + 1px);
}
.dropdown-compo .dropdown-btn-compo, .dropdown-compo .btn-compo {
	margin-right: 0;
}
.dropdown-btn-compo i {
	width: calc(var(--ft-size) + 1px);
}
.dropdown-list {
	display: none;
	position: absolute;
	border: 1px solid var(--container-bd-color1);
	min-width: 150px;
	min-height: 20px;
	background-color: #ffffff;
	margin-top: 1px;
	z-index: 17;
}
.dropdown-compo .btn-compo,
.dropdown-compo .dropdown-group-name {
	display: block;
	width: 100%;
	text-align: left;
	border: none;
}
.dropdown-list button:hover {
	background-color: var(--row-hover-color);
}
.dropdown-list button:disabled,
.dropdown-list button:hover:disabled {
	background-color: #ffffff;
}
.dropdown-group-name {
	align-content: center;
}
.dropdown-group button {
	padding-left: 20px;
}

/* divider. 구분선 */
.divider {
	border-width: 1px 0 0 0;
	border-top-color: var(--container-bd-color1);
	border-style: solid;
}

/* menu */
.menu-container {
	height: 100%;
}

.layout-left .menu-title {
	height: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	font-size: 20px;
}

.layout-header .menu-title {
	width: 200px;
	display: flex;
    align-items: center;
    justify-content: center;
	color: #ffffff;
	font-size: 20px;
	flex: 0 0 200px;
}

/*컴포넌트 input이 2줄로 떨어질 경우 사용하는 css-input높이에 따라 min-height 변경*/
@media (min-height: 56px) {
	.form-control:not(.date-compo).datepicker,.form-control:not(.time-compo).timepicker {
		margin-bottom:6px;
	}
	.form-col > .datetime-compo, .form-col > .duration-date-compo, .form-col > .attach-compo {
		padding-top:6px;
	}
	.attach-compo .lst-file > li, .attach-compo .btn {
		margin: 0px 4px 4px 0px;
	}
}

@media all and (max-width : 569px) {
	
}

/* 기본 로고 아이콘 */
.icon-logo {
	color: #419df9;
	font-size: 30px
}

/* 댓글 */
.comment-container {
	display:flex;
	width:100%;
	flex-direction: column;
}
.comment-wrap {
	display:inline-block;
	width:100%;
}
.comment-title {
	width:100%;
	font-size:16px;
}
.comment-wrap > textarea {
	width:100%;
}
.reply-unit > textarea {
	height: 50px;
	width: calc(100% - 44px);
}
.comment-edit-wrap {
	display: flex;
	width: 100%;
	align-items: center;
}
.comment-update-btn, .reply-add-btn {
	height: 50px;
	width: 44px; 	
}
.btn-wrap {
	width:100%;
	text-align:right
}
.reply-list {
	display:flex;
	width:100%;
	flex-direction: column;
}
.comment-subtitle {
	display:inline-block;
	width:100%;
	font-size:13px;
	color:#666;
	padding-bottom:6px;
}
.title-underline {
	border-bottom:1px solid #ccc;
}
.comment-count {
	color:#000
}
.reply-unit {
	display:inline-block;
	width:100%;
}
.name-time-button {
	display:inline-block;
	width:100%;
	margin-top:10px;
}
.name-time-button > span {
	margin-right:10px;
}
.re-time {
	color:#999;
}
.re-button span {
	margin:0 2px;
	text-decoration:underline;
	cursor: pointer;
}
.re-desc {
	color:#666;
}
.re-reply {
	background:url(../../img/icon-replyline.svg) no-repeat 11px 5px/27px 18px;
	padding:6px 0 0 44px;
}
.cmm-line {
	border-top:1px solid #eaeaea;
	padding-top:18px;
	margin-top:12px;
}
.pick-man {
	background-color:#e2f6ff;
	color:#000;
	margin-right:3px;
}
.reply-contents {
	padding-top: 6px;
	line-height: 1.2;
}

/* modal popup */
.modal-popup-row {
	width: 100%;
	height: 100%;
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 9999;
}

.form-row.modal-popup-row > .container-content.modal-popup-container {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	resize: both;
	overflow: auto;
	background-color: #fff;
	padding: 5px;
}

.modal-popup-row .modal-popup-container .form-row, .modal-popup-row .modal-popup-container .form-col {
	min-height: 0;
	border: 0 none;
}

.modal-popup-row .modal-popup-btn-row {
	text-align: right;
}

.modal-popup-row .modal-popup-close-btn {
	font-size: 20px;
    border: none;
    height: 20px;
    white-space: normal;
}

/* bookmark */
.viewBookmark {
	display: none;
	width: 300px;
	min-height: 180px;
	max-height: 513px;
	overflow-y: auto;
	border-width: 1.5px;
	border-color: #d2d2d2;
	border-style: solid;
}

.viewBookmark .form-row, .viewBookmark .form-col {
	min-height: 34px;
}

.folder-block {
	font-size: 14px;
	background-color: rgba(0,0,0,0.08);
}

.bookmark-text-wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.viewBookmark-text {
	padding: 0 0 0 10px;
}

.addedRow:not(.folder-block) {
	padding-left: 3px;
}

input.node-level-input {
	border-top: none;
	border-right: none;
	border-left: none;
	border-image: initial;
	border-bottom: 1px solid rgb(187, 187, 187);
	margin-right: .4rem;
	text-align: right;
	width: 90px;
}

/* 화면간 데이터 비교기능 색상 표시 */
.diff-color-del {
	background-color: #FFA3A2 !important;
}

.diff-color-add {
	background-color: #D7E7B0 !important;
}

/* 화면간 데이터 비교 시 view 이미지에 padding */
.view-compo[data-file-type="image"] + span.diff-color-del > div, .view-compo[data-file-type="image"] + span.diff-color-add > div {
	padding: 5px;
}

body.bg-admLogin {
	background-image: url("../../img/login-bg-blue.jpg");
	height: 100vh;
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}