@import url("/css/font.css");
/* mainPage.html */
.page-title-wrap {
	display: flex;
	align-items: end;
	padding: 40px 45px 35px;
}

.page-title-wrap .title-txt {
	margin: 0 17px 0 0;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 25px;
	color: #454545;
}

.page-title-wrap .time-txt {
	margin: 0 6.8px 0 0;
	font-family: 'Pretendard', sans-serif;
	font-weight: 500;
	font-size: 13px;
	color: #AAAAAA;
}

.page-title-wrap .refresh-btn {
	width: 11.49px;
	height: 10.79px;
	background-image: url("../../img/main-refresh-btnoff.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100%;
}

.page-title-wrap .refresh-btn:hover {
	background-image: url("../../img/main-refresh-btnon.png");
}

.main-dash-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 45px;
	align-items: flex-start;
	padding: 0 45px 55px;
}

.main-dash-wrap .board {
	flex-basis: min-content;
	flex-grow: 1;
	flex-shrink: 1;
	position: relative;
	min-height: 300px;
	padding: 25px 30px;
	border-radius: 17px;
	background-color: #FFF;
	box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
}

.main-dash-wrap > .board:last-child {
	margin: 0;
}

.main-dash-wrap .board .title {
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 20px;
	color: #454545;
}

/** 
Donut chart using gradients colors and rounded caps
source : https://stackoverflow.com/questions/73507487/donut-chart-using-gradients-colors-and-rounded-caps
*/
.chart-donut {
	--p:0;      /* the percentage */
	--b:30px;    /* the thickness */
	--w:222px;   /* the size*/
	
	width:var(--w);
	aspect-ratio:1/1;
	position:absolute;
	display:inline-grid;
	margin:5px;
	place-content:center;
	font-size:25px;
	font-weight:bold;
	top:40px;
	left:55px;
}
.chart-donut.hide:before,
.chart-donut.hide:after {
	background: #EDEDED !important;
}
.chart-donut:before,
.chart-donut:after {
	content:"";
	position:absolute;
	border-radius:50%;
}
.chart-donut:before {
	inset:0;
	background:
	radial-gradient(farthest-side,#78B12E 96%,#0000) top/var(--b) var(--b) no-repeat,
	conic-gradient(from 1deg, #78B12E 0%, #78B12E calc(var(--p)*0.5%), #78B12E calc(var(--p)*1%),#EDEDED 0);
	-webkit-mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
		mask:radial-gradient(farthest-side,#0000 calc(100% - var(--b)),#000 calc(100% - var(--b)));
}
.chart-donut:after {
	inset:calc(50% - var(--b)/2);
	background:#78B12E;
	transform:rotate(calc(var(--p)*3.6deg - 90deg)) translate(calc(var(--w)/2 - 50%));
}
.chart-donut .center {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 32px;
	left: 32px;
	width: calc(100% - 64px);
	height: calc(100% - 64px);
	border-radius: 50%;
	background-color: #FFF;
	text-align: center;
}
.chart-donut .txt {
	font-family: 'Pretendard', sans-serif;
	font-weight: 700;
	font-size: 14px;
	color: #454545;
}

.chart-donut .val {
	font-family: 'Pretendard', sans-serif;
	font-weight: 900;
	font-size: 33px;
	color: #454545;
}

.chart-donut .ghz {
	margin: 0 0 0 -6px;
	font-family: 'Pretendard', sans-serif;
	font-weight: 500;
	font-size: 22px;
	color:#454545;
	letter-spacing: -2px;
}

/* .chart-donut {
	position: absolute;
	top: 40px;
	left: 55px;
	width: 222px;
	height: 222px;
	border-radius: 50%;
	background: conic-gradient(#78B12E 0%, #78B12E 30%, #EDEDED 30%, #EDEDED 100%);
}

.chart-donut .center {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 32px;
	left: 32px;
	width: calc(100% - 64px);
	height: calc(100% - 64px);
	border-radius: 50%;
	background-color: #FFF;
	text-align: center;
}

.chart-donut .txt {
	font-family: 'Pretendard', sans-serif;
	font-weight: 700;
	font-size: 14px;
	color: #454545;
}

.chart-donut .val {
	font-family: 'Pretendard', sans-serif;
	font-weight: 900;
	font-size: 33px;
	color: #454545;
}

.chart-donut .ghz {
	margin: 0 0 0 -6px;
	font-family: 'Pretendard', sans-serif;
	font-weight: 500;
	font-size: 22px;
	color:#454545;
	letter-spacing: -2px;
} */

.fc-blue {
	color: #78B12E !important;
}

.board .right-wrap {
	margin: 20px 0 0 300px;
}

.board .board-txt {
	margin: 0 0 3px;
	font-family: 'Pretendard', sans-serif;
	font-weight: 700;
	font-size: 15px;
	color: #AAAAAA;
}

.board .board-val {
	margin: 0 0 25px;
	font-family: 'Pretendard', sans-serif;
	font-weight: 500;
	font-size: 18px;
	color: #454545;
}

.between-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 20px 0 0;
}

.line-chart {
	position: relative;
	width: 100%;
	height: 32px;
	margin: 44px 0;
	border-radius: 20px;
	background-color: #EDEDED;
}

.line-chart .gauge {
	position: absolute;
	top: 0;
	left: 0;
	width: 30%;
	height: 32px;
	border-radius: 20px;
}

.line-chart .guage-green {
	background-color: #78B12E !important;
}

.line-chart .guage-sky {
	background-color: #80C8DF !important;
}

.margin-zero {
	margin: 0 !important;
}

.fcolor-green {
	color: #78B12E !important;
}

.fcolor-sky {
	color: #80C8DF !important;
}

.contents-container {
	border-top: 1.5px solid #EDEDED;
	background-color: #FFF;
}

.contents-title {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	margin: 25px 0 16px;
	padding: 0 45px;
	gap: 10px;
}

.contents-tab {
	display: flex;
	align-items: center;
	height: 74px;
	padding: 0 45px;
}

.contents-tab > span {
	display: inline-flex;
	align-items: center;
	height: 100%;
	margin: 0 125px 0 0;
	font-family: 'Pretendard', sans-serif;
	font-weight: 700;
	font-size: 20px;
	color: #D3D3D3;
	cursor: pointer;
}

.contents-tab > span:last-child {
	margin: 0;
}

.contents-tab > .on {
	position: relative;
	color: #454545;
}

.contents-tab > .on:before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 7px;
	border-radius: 10px;
	background-color: #454545;
}

.contents-title > span {
	display: inline-flex;
	align-items: center;
	height: 100%;
	font-family: 'Pretendard', sans-serif;
	font-weight: 800;
	font-size: 20px;
	color: #454545;
}

.contents-title-icon > span {
	padding: 0 0 0 25px;
	background-image: url("../../img/page-title-icon.png");
	background-repeat: no-repeat;
	background-position: 0 center;
	background-size: 16.2px 18.1px;
}

.vtable, .htable {
	width: 100%;
	border-top: 1.5px solid #AAAAAA;
	overflow: auto;
}

.vtable th {
	padding: 16px 8px 15px !important;
	border-bottom: 1px solid #EDEDED !important;
	background-color: #FAFAFA !important;
	font-family: 'Pretendard', sans-serif !important;
	font-weight: 700 !important;
	font-size: 16px !important;
	color: #AAAAAA !important;
	text-align: center !important;
}

/*vertical-align: middle  -> 2023-04-03 신재우 추가*/
.vtable td {
	padding: 11px 8px 11px !important;
	border-bottom: 1px solid #EDEDED !important;
/* 	background-color: #FFF !important; */
	font-family: 'Pretendard', sans-serif !important;
	font-weight: 500 !important;
	font-size: 15px !important;
	color: #454545 !important;
	text-align: center !important;
	vertical-align: middle;
}

.vtable tr.trSelect {
	background-color: #c9dfab !important;
}

.vtable td span.prog-comp {
	color: #78B12E !important;
}

.vtable td span.prog-fail {
	color: #FF7F50 !important;
}

.htable th, .htable td {
	height: 41px;
	border-bottom: 1px solid #EDEDED;
	vertical-align: middle;
}

.htable th {
	padding: 0 11px;
	background-color: #FAFAFA;
	font-family: 'Pretendard', sans-serif !important;
	font-weight: 700 !important;
	font-size: 13px !important;
	color: #AAAAAA !important;
}

.htable td {
	padding: 0 15px;
	font-family: 'Pretendard', sans-serif !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	color: #454545 !important;
}

.htable-tall th, .htable-tall td {
	height: 52px !important;
	font-size: 15px !important;
}

.file-drop-wrap {
	padding: 0 45px 45px;
}

.file-drop {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	height: 250px;
	border: 2px dashed #D3D3D3;
	border-radius: 17px;
	background-color: #FFF;
	cursor: pointer;
}

.file-drop:hover,
.file-drop-on {
	border: 2px dashed #78B12E;
	background-color: #EEE;
}

.file-drop:hover::before,
.file-drop-on::before {
	background-image: url("../../img/samples-upload-btnon.png") !important;
}

.file-drop::before {
	content: "";
	display: block;
	width: 44.17px;
	height: 44.17px;
	background-image: url("../../img/samples-upload-btnoff.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100%;
}

.file-drop .title {
	margin: 16px 0 0;
	font-family: 'Pretendard', sans-serif;
	font-weight: 600;
	font-size: 25px;
	color: #78B12E;
	text-align: center;
}

.file-drop .contents {
	margin: 26px 0 0;
	font-family: 'Pretendard', sans-serif;
	font-weight: 400;
	font-size: 15px;
	color: #AAAAAA;
	text-align: center;
}

.fcolor-darkgrey {
	color: #454545 !important;
}

.ui-dialog-titlebar-close {
	border: none !important;
	background: none !important;
}
.ui-icon-closethick {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	background-image: url("../../img/pop-close-btnoff.png") !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 100% !important;
}

.ui-icon-closethick:hover,
.ui-icon-closethick:focus {
	background-image: url("../../img/pop-close-btnon.png") !important;
}

.pop-status-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 13px 20px;
	border-top: 1px solid #D3D3D3;
}

.pop-status-wrap .txt {
	font-family: 'Pretendard', sans-serif;
	font-weight: 700;
	font-size: 13px;
	color: #AAAAAA;
}

.pop-status-wrap .val {
	margin: 3px 0 0;
	font-family: 'Pretendard', sans-serif;
	font-weight: 500;
	font-size: 15px;
	color: #454545;
}

.pop-vtable th {
	padding: 10.5px 5px !important;
	font-size: 13px !important;
}

.pop-vtable td {
	padding: 11px 5px !important;
	font-size: 14px !important;
}

/* .search-wrap { */
/* 	position: relative; */
/* } */

.between {
	justify-content: space-between;
}

.search-bar {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	width: 100%;
	max-width: 744px;
}

.search-bar-shorts {
	max-width: 580px !important;
}

.search-bar .search-input {
	width: 100%;
	max-width: 470px;
	height: 32px;
	padding: 0 15px;
	border: 1px solid #CCCCCC;
	border-radius: 8px;
	background-color: #FFF;
	font-family: 'Pretendard', sans-serif;
	font-weight: 500;
	font-size: 15px;
	color: #454545;
}

.search-bar .search-btn {
	min-width: 100px;
	height: 32px;
	border-radius: 8px;
	background-color: #454545;
	font-family: 'Pretendard', sans-serif;
	font-weight: 500;
	font-size: 14px;
	color: #FFF;
}

/* dataTable custom css */

a {
	text-decoration: none;
}

.file-name {
	font-family: Montserrat;
	font-weight: 600;
	font-size: 15px;
	color: #78B12E;
	text-decoration: underline;
}

.delete-btn {
	padding: 6px 18px;
	border-radius: 10px;
	font-family: 'Pretendard', sans-serif;
	font-weight: 500;
	font-size: 14px;
	color: #FFFFFF;
	cursor: pointer;
	background: #FF7F50;
	white-space: nowrap;
}

.disable-delete-btn {
	font-family: 'Pretendard', sans-serif;
	font-weight: 500;
	font-size: 15px;
	color: #FF7F50;
}

.dataTables_paginate.paging_full_numbers{
	display: flex;
	justify-content: center;
	margin: 20px 0 0 0;
	float: none !important;
}

.paginate_button.current {
	color: #78B12E !important;
	border: 1.5px solid #78B12E !important;
	border-radius: 8px !important;
	background: #FFFFFF !important;
	font-family: 'Pretendard', sans-serif;
	font-weight: 500;
	font-size: 13px;
	width: 27px;
	height: 27px;
}

.paginate_button {
	color: #BBBBBB !important;
	border: none;
	font-family: 'Pretendard', sans-serif;
	font-weight: 500;
	font-size: 13px;
	text-decoration:none;
	background: #FFFFFF;
}

.paginate_button.first, .paginate_button.first.disabled {
	background-image: url("/img/page-first.png") !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
}

.paginate_button.previous, .paginate_button.previous.disabled {
	background-image: url("/img/page-pre.png") !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
}

.paginate_button.next, .paginate_button.next.disabled {
	background-image: url("/img/page-next.png") !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
}

.paginate_button.last, .paginate_button.last.disabled {
	background-image: url("/img/page-last.png") !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
}

.download-btn {
	background-image: url("/img/samples-download.png");
	background-repeat: no-repeat;
	background-position: center;
	width: 42px;
	height: 28px;
	display: inline-block;
}

.download-btn:hover {
	background-image: url("/img/samples-download-hover.png");
	background-repeat: no-repeat;
	background-position: center;
	width: 42px;
	height: 28px;
	display: inline-block;
}

.total-download-btn {
	background-image: url("/img/result-total-download.png");
	background-repeat: no-repeat;
	background-position: center;
	width: 128px;
	height: 30px;
	display: inline-block;
	float: right;
}

.total-download-btn:hover {
	background-image: url("/img/result-total-download-hover.png");
	background-repeat: no-repeat;
	background-position: center;
	width: 128px;
	height: 30px;
	display: inline-block;
	float: right;
}

.metadata-btn {
	margin: 0 0 0 11px;	
	font-family: 'Pretendard', sans-serif;
	font-weight: 500;
	font-size: 14px;
	background: #78B12E;
	color: #FFFFFF;
	cursor: pointer;
	border-radius: 10px;
	padding: 6px 17px;
	height: 28px;
	text-align: center;
}

.metaDetailTable {
	width: 100%;
	border-top: 1.5px solid #AAAAAA;
}

.metaDetailTable th {
	width: 165px;
	padding: 13px 11px;
	border-bottom: 1px solid #EDEDED;
	background-color: #FAFAFA;
	font-family: 'Pretendard', sans-serif;
	font-weight: 700;
	font-size: 13px;
	color: #AAAAAA;
	text-align: left;
}

.metaDetailTable td {
	padding: 0 8px;
	border-bottom: 1px solid #EDEDED;
	background-color: #FFFFFF;
}

.data-items{
	min-width: 94px;
	margin: 0 5px 0 0;
	font-family: 'Pretendard', sans-serif;
	font-weight: 700;
	font-size: 14px;
	color: #454545;
	white-space: nowrap;
}

.metadataName {
	width: 100%;
	height: 28px;
	padding: 0 8px;
	border: 1px solid #CCCCCC;
	border-radius: 8px;
	background: #FFFFFF;
	font-family: 'Pretendard', sans-serif !important;
	font-weight: 500;
	font-size: 14px !important;
	color: #454545;
}

.search-select {
	min-width: 154px;
	height: 32px;
	padding: 0 13px;
	border: 1px solid #CCCCCC;
	border-radius: 8px;
	background-color: #FFF;
	font-family: 'Pretendard', sans-serif;
	font-weight: 700;
	font-size: 13px;
	color: #78B12E;
}

.metadataNameCheck {
	border-radius: 8px;
	background-color: #D3D3D3;
	font-family: 'Pretendard', sans-serif;
	font-weight: 500;
	font-size: 14px;
	color: #FFFFFF !important;
	min-width: 80px;
	display: inline-block;
	height: 28px;
	vertical-align: middle;
	text-align: center;
	line-height: 28px;
}

.addColumn {
	border-radius: 10px;
	background-color: #D3D3D3;
	font-family: 'Pretendard', sans-serif;
	font-weight: 500;
	font-size: 12px;
	color: #FFFFFF !important;
	padding: 0 8px 0 6px;
	display: inline-block;
	height: 21px;
	vertical-align: middle;
	text-align: center;
	line-height: 20px;
	margin: 0 0 0 7px;
}

.remove-column {
	display: inline-block;
	min-width: 10px;
	min-height: 10px;
	margin: 0 0 0 11px;
	background-image: url("/img/metadata-remove.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100%;
	
}

.remove-column:hover {
	background-image: url("/img/metadata-remove-hover.png");
}

.metadata-id-area {
	display: flex;
}

.column-wrap {
	display: flex;
	align-items: center;
	margin: 0 0 15px 0;
}
.add-text {
	font-family: 'Pretendard', sans-serif;
	font-weight: 400;
	font-size: 16px;
}

.columnName {
	width: 100%;
	height: 28px;
	padding: 0 8px;
	border: 1px solid #CCCCCC;
	border-radius: 8px;
	background: #FFFFFF;	
	font-family: 'Pretendard', sans-serif !important;
	font-weight: 500;
	font-size: 14px !important;
	color: #454545;
}

.file-between-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 0 45px;
}

.file-between-wrap > div {
	height: 600px;
	padding: 35px 40px;
	border: 2px solid #D3D3D3;
	border-radius: 17px;
	box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.16);
	overflow: auto;
}

.file-between-wrap > div:first-child {
	width: 30.7%;
	background-color: #F3F3F3;
}

.file-between-wrap > div:last-child {
	width: 69.3%;
}

.file-path-txt {
	display: flex;
	align-items: center;
	margin: 0 0 15px;
	font-family: 'Pretendard', sans-serif;
	font-weight: 700;
	font-size: 16px;
	color: #78B12E;
}

.file-path-icon {
	display: inline-block;
	width: 16px;
	height: 16px;margin: 0 10px;
	background-image: url("/img/file-path-icon.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100%;
}

.input-type-txt {
	width: 100%;
	height: 32px;
	padding: 0 10px;
	border: 1px solid #CCCCCC;
	border-radius: 8px;
	background-color: #FFF;
	font-family: 'Pretendard', sans-serif;
	font-weight: 700;
	font-size: 16px;
	color: #454545;
}

.input-type-talltxt {
	width: 100%;
	height: 40px;
	padding: 0 10px;
	border: 1px solid #CCCCCC;
	border-radius: 8px;
	background-color: #FFF;
	font-family: 'Pretendard', sans-serif;
	font-weight: 400;
	font-size: 14px;
	color: #454545;
}

.input-type-talltxt::placeholder {
	color: #D3D3D3;
}

input.chk {
	width: 15px;
	height: 15px;
	border: 1px solid #D3D3D3;
	border-radius: 4px;
}

.updown-btn-wrap {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	position: relative;
	margin: -35px 0 0;
	padding: 0 45px;
	gap: 10px;
}

.updown-btn {
	height: 32px;
	line-height: 29px;
	padding: 0 11px 0 28px;
	border: 1.5px solid #D3D3D3;
	border-radius: 8px;
	background-color: #FFF;
	background-repeat: no-repeat;
	background-position: 11px center;
	font-family: 'Pretendard', sans-serif;
	font-weight: 500;
	font-size: 14px;
	color: #D3D3D3;
}

.updown-btn:hover {
	color: #78B12E;
	border: 1.5px solid #78B12E;
}

.up-btn {
	background-image: url("/img/schedule-up-btn.png");
}

.up-btn:hover {
	background-image: url("/img/schedule-up-btnon.png");
}

.down-btn {
	background-image: url("/img/schedule-down-btn.png");
}

.down-btn:hover {
	background-image: url("/img/schedule-down-btnon.png");
}

.contents-subtitle {
	display: flex;
	align-items: center;
	margin: 0 0 11px;
	padding: 0 45px;
}

.contents-subtitle:before {
	content: "";
	display: inline-block;
	width: 4px;
	height: 4px;
	margin: 0 9px 0 0;
	border-radius: 50%;
	background-color: #454545;
}

.contents-subtitle > span {
	font-family: 'Pretendard', sans-serif;
	font-weight: 700;
	font-size: 18px;
	color: #454545;
}

.notice-content{
	width: 100%;
	padding: 0 8px;
	border: 1px solid #CCCCCC;
	border-radius: 8px;
	background: #FFFFFF;
	font-family: 'Pretendard', sans-serif !important;
	font-weight: 500;
	font-size: 14px !important;
	color: #454545;
}

textarea {
	resize: none;
}

.flex-radio-wrap input[type=radio] {
	width: 18px;
	height: 18px;
	margin: 0 10px 0 0;
}

.flex-radio-wrap label {
	display: inline-flex;
	align-items: center;
/* 	margin: 0 100px 0 0; */
	color: #666666;
	cursor: pointer;
/* 	width: 200px; */
}

.flex-radio-wrap label > span {
	font-family: 'Pretendard', sans-serif !important;
	font-weight: 700;
	font-size: 14px !important;
	color: inherit;
	margin-right: 20px;
}

.flex-radio-wrap label:hover {
/* 	color: #333; */
}

.flex-radio-wrap input[type=radio]:checked {
	background-color: #78B12E;
	border: 3px solid white;
	box-shadow: 0 0 0 1px #78B12E;
}


.flex-radio-wrap input[type=radio]:checked ~ span {
	color: #78B12E;
}

.ttl-wrap { display:flex; align-items:center; gap:20px; }
.ttl-input-row { display:flex; align-items:center; gap:8px; padding:4px; }
.ttl-label { font-size:13px; font-weight:600; color:#666; }
.ttl-label-trim { margin-right:27px; }
.ttl-fr { font-size:12px; font-weight:700; color:#888; }
input.ttl-input { width:80px; }
/* PreProcessing custom 항목은 라벨 길이가 제각각이라 폭을 맞춰 입력칸을 정렬한다 */
.ttl-label.pp-label { width:120px; }

.toright-btn {
	min-width: 30px;
	min-height: 30px;
/* 	margin: 60px 0; */
	border: 1.5px solid #78B12E;
	border-radius: 8px;
	background-color: #FFF;
	background-image: url("/img/anal-toright-btn.png");
	background-repeat: no-repeat;
	background-position: center;
}

.anal-between-wrap {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	flex-wrap: wrap;
	gap: 40px;
	padding: 0 45px;
}

.table-title {
	margin: 0 10px 0 5px;
	font-family: 'Pretendard', sans-serif !important;
	font-weight: 800;
	font-size: 15px !important;
	color: #454545;
}

.half {
	flex-basis: 494px;
	flex-grow: 1;
	flex-shrink: 1;
}

#selectedSampleNum {
	margin: 0 0 0 3px;
	color: #78B12E;
}

.error-bck {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url("/img/errorpage-bck.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	z-index: 5;
}

.abs-flex-center {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-flow: column;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
}

.err-main-txt {
	margin: 0;
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 120px;
	color: #FFF;
}

.err-msg-txt {
	margin: 7px 0 0 0;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-size: 40px;
	color: #FFF;
}

.err-info-txt {
	margin: 27px 0 0 0;
	font-family: 'Pretendard', sans-serif;
	font-weight: 700;
	font-size: 20px;
	color: #FFF;
}

.out-err-btn {
	margin: 66px 0 0 0;
	padding: 16px 99px;
	border-radius: 30px;
	background-color: #FFF;
	font-family: 'Pretendard', sans-serif;
	font-weight: 700;
	font-size: 15px;
	color: #78B12E;
}

/** basic dialog style */
.ui-dialog-buttonpane {
	margin: 20px 0 35px !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 17px !important;
}

.ui-dialog-buttonset {
	display: flex;
	align-items: center;
	justify-content: center;
	float: none !important;
	gap: 20px;
}

.ui-dialog-buttonset > button {
	width: 80px !important;
	height: 28px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 10px !important;
	font-family: 'Pretendard', sans-serif !important;
	font-weight: 500 !important;
	font-size: 14px !important;
	color: #FFF !important;
}

.ui-dialog-buttonset > button:hover {
	color: #FFF !important;
}

.ui-dialog-buttonset > button:first-child {
	background-color: #78B12E;
}

.ui-dialog-buttonset > button:last-child {
	background-color: #D3D3D3;
}

.ui-dialog .ui-dialog-content {
	margin-bottom: 17px !important;
}

/** alert, confirm dialog style */
.ngs-dialog table {
	height: 79px;
}

.ngs-dialog table tr th {
	font-weight: 500 !important;
	font-size: 16px !important;
	color: #454545 !important;
	line-height: 25px;
}

.ngs-dialog-confirm-ok {
	background-color: #F25533 !important;
}

/** 추가 버튼 - 분석 예약 등록 */
.anal-register-wrap {
	float: right;
	display: flex;
	align-items: center;
/* 	margin: 0 0 11px; */
/* 	padding: 0 45px; */
	padding-top: 20px;
}

.anal-register-wrap a {
	margin: 0 0 0 11px;
	font-family: 'Pretendard', sans-serif;
	font-weight: 500;
	font-size: 14px;
	background: #78B12E;
	color: #FFFFFF;
	cursor: pointer;
	border-radius: 8px;
	padding: 9px 38px;
	height: 32px;
	text-align: center;
}

.anal-title-wrap {
	padding: 25px 45px;
}

.anal-title-txt > span {
	font-family: 'Pretendard', sans-serif;
	font-weight: 700;
	font-size: 20px;
	color: #FF7F50;
}

.anal-title-txt .sep {
	margin: 0 2px;
}

.anal-title-info {
	margin: 8px 0 0;
}

.anal-title-info > span {
	margin: 0 10px 0 0;
	font-family: 'Pretendard', sans-serif;
	font-weight: 700;
	font-size: 13px;
	color: #AAAAAA;
}

.anal-title-info > span > strong {
	color: #454545;
}

.anal-tap-wrap {
	display: flex;
	align-items: center;
	padding: 15px 45px 0;
	border-bottom: 1.5px solid #EDEDED;
}

.anal-tap-wrap > div {
	display: flex;
	margin: 0 20px 0 0;
}

.anal-tap-wrap a {
	display: inline-flex;
	align-items: flex-start;
	position: relative;
	height: 51px;
	font-family: 'Pretendard', sans-serif;
	font-weight: 800;
	font-size: 16px;
	color: #454545;
	cursor: pointer;
}

.anal-tap-wrap a:hover,
.anal-tap-wrap a.on {
	color: #78B12E;
}

.anal-tap-wrap a.on:after {
	content: "";
	display: inline-block;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 7px;
	border-radius: 10px;
	background-color: #78B12E;
}

.anal-tap-wrap .sep {
	display: block;
	width: 5px;
	height: 51px;
	margin: 0 20px 0 20px;
	background-image: url("/img/anal-gt-icon.png");
	background-repeat: no-repeat;
	background-position: center 4px;
	background-size: auto;
}

.anal-tap-wrap a.fail {
	color: #F25533 !important;
	text-decoration: line-through !important;
}
.sample-list {
	margin: 0 0 15px 0;
	font-family: 'Pretendard', sans-serif;
	font-weight: 700;
	font-size: 18px;
	color: #454545;
}

.use-sample-list {
	margin-top: 40px;
}

.analysis-section {
	line-height: normal;
	padding:0 0 54px 0;
	text-align: center;
}

.section-complete {
	width: 60px;
	height: 60px;
	background-image: url("/img/sample-list-complete.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: auto;
}

.section-content1 {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 50px;
	color: #454545;
}

.section-content2 {
	font-family: 'Pretendard', sans-serif;
	font-weight: 700;
	font-size: 25px;
	color: #000000;
}

.qzvFileView {
	padding: 6px 18px;
	border-radius: 10px;
	font-family: 'Pretendard', sans-serif;
	font-weight: 700;
	font-size: 14px;
	color: #FFFFFF;
	cursor: pointer;
	background: #D3D3D3;
}

.qzvFileView:hover {
	background: #78B12E;
}

.fail-log-margin {
	padding-top: 7px;
	margin: 0px 0px 20px 0px;
	width: 100%;
	line-height: 15px;
	padding: 7px 8px 0px 8px;
	background: #FFFFFF;
	font-family: 'Pretendard', sans-serif !important;
	font-weight: 500;
	font-size: 14px !important;
	color: #454545;
}

.commonTableHeader  {
	margin: 20px 10px 10px 10px;
	font-weight: 800;
	font-size: 16px;
	color: #454545;
}

.btn-outline {
	border: 1px solid #428FFF;
	padding: 3px 10px;
	color: #428FFF;
	border-radius: 8px;
	background: none;
	cursor: pointer;
}

.commonTableStyle {
	width: 100%;
	border-top: 1.5px solid #AAAAAA;
}

.divBox {
	display: flex;
	gap: 20px;
	justify-content: left;
}

.divBox > span {
	border: 1px solid #CCCCCC;
	color: #666666;
	border-radius: 8px;
	line-height: 28px;
	text-align: center;
	font-size: 16px;
	align-items: center;
	justify-content: center;
	display: flex;
	width: 100px;
	font-weight: 700;
}

.divBox > span:hover {
	border: 1px solid #78B12E;
	color: #78B12E;
	cursor: pointer;
}

.divBox > span.on {
	border: 1px solid #78B12E;
	color: #78B12E;
}

.divBox2 {
	display: flex;
	gap: 20px;
	justify-content: left;
}

.divBox2 > span {
	border: 1px solid #CCCCCC;
	color: #aaaaaa;
	border-radius: 8px;
	line-height: 28px;
	text-align: center;
	font-size: 16px;
	align-items: center;
	justify-content: center;
	display: flex;
/* 	width: 100px; */
	font-weight: 700;
}

.divBox2 > span:hover {
	border: 1px solid #78B12E;
	color: #78B12E;
	cursor: pointer;
}

.divBox2 > span.on {
	border: 1px solid #78B12E;
	color: #78B12E;
}

.commonTableStyle th {
	width: 165px;
	padding: 13px 11px;
	border-bottom: 1px solid #EDEDED;
	background-color: #FAFAFA;
	font-family: 'Pretendard', sans-serif;
	font-weight: 700;
	font-size: 14px;
	color: #999999;
	text-align: left;
}

.commonTableStyle td {
	padding: 0 8px;
	border-bottom: 1px solid #EDEDED;
	background-color: #FFFFFF;
	vertical-align: middle;
}

.commonInput {
	width: 100%;
	height: 28px;
	padding: 0 8px;
	border: 1px solid #CCCCCC;
	border-radius: 8px;
	background: #FFFFFF;
	font-family: 'Pretendard', sans-serif !important;
	font-weight: 500;
	font-size: 14px !important;
	color: #666666;
}

.commonSelect {
	min-width: 154px;
	height: 28px;
	padding: 0 13px;
	border: 1px solid #CCCCCC;
	border-radius: 8px;
	background-color: #FFF;
	font-family: 'Pretendard', sans-serif;
	font-weight: 700;
	font-size: 14px;
	color: #666666;
}

/* 카드 */
.card {
  width: 100%;
  border-radius: 6px;
  background: white;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  overflow: hidden;
  font-size: 14px;
  height: 100%;
}

.card-header {
  background-color: #216c58; /* 짙은 녹색 */
  color: white;
  font-weight: bold;
  display: flex;
  justify-content: space-between; /* 좌측 텍스트, 우측 아이콘 그룹 정렬 */
  align-items: center;
  padding: 6px 10px;
}

.card-header .icons {
  display: flex;
  gap: 5px; /* 아이콘 간격 */
}

.card-body {
  padding: 8px 10px;
}

.item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #555;
  padding: 4px 0;
}

.item label {
  flex-grow: 1;
  margin-left: 6px;
  color: #9b9b9b; /* 회색 텍스트 */
}

.item .count {
  font-size: 13px;
  color: #777;
}

:root {
	--color-white: rgba(255, 255, 255, 1);
	--color-black: rgba(0, 0, 0, 1);
	--color-cream-50: rgba(252, 252, 249, 1);
	--color-gray-200: rgba(245, 245, 245, 1);
	--color-gray-300: rgba(167, 169, 169, 1);
	--color-charcoal-700: rgba(31, 33, 33, 1);
	--color-charcoal-800: rgba(38, 40, 40, 1);
	--color-green-600: rgba(22, 163, 74, 1);
	--color-green-700: rgba(21, 128, 61, 1);
	--font-family-base: "FKGroteskNeue", "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--font-size-sm: 12px;
	--font-weight-medium: 500;
	--font-weight-semibold: 550;
	--space-8: 8px;
	--space-12: 12px;
	--radius-sm: 6px;
	--color-background: var(--color-cream-50);
	--color-text: var(--color-charcoal-700);
}

.tag {
	height: 28px;
	display: inline-flex;
	align-items: center;
	background-color: var(--color-green-600);
	color: white;
	border-radius: var(--radius-sm);
	overflow: hidden;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.tag__label {
	padding: var(--space-8) var(--space-12);
	background-color: var(--color-green-700);
	font-weight: var(--font-weight-semibold);
}

.tag__value {
	padding: var(--space-8) var(--space-12);
	background-color: var(--color-white);
	color: var(--color-black);
	font-weight: var(--font-weight-semibold);
}

.tag__close {
	padding: var(--space-8) var(--space-12);
	background-color: var(--color-white);
	border: none;
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
	color: var(--color-gray-300);
	transition: color 150ms ease;
}

.tag__close:hover {
	color: var(--color-charcoal-800);
}

.btn-exclude-circle {
	width: 21px;
	height: 21px;
	border-radius: 50%;
	background-color: #ECECEC;
	color: #78B02E;
	font-size: 16px;
	font-weight: bolder;
	cursor: pointer;
	transition: color 150ms ease, border-color 150ms ease;
}

.btn-exclude-circle:hover {
	color: var(--color-charcoal-800);
	border-color: var(--color-charcoal-800);
}

.btn-exclude-circle:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.group-chip .tag__label,
.group-chip .tag__value {
	cursor: pointer;
}

.group-chip {
	opacity: 0.75;
	transition: opacity 150ms ease, box-shadow 150ms ease;
}

.group-chip:hover {
	opacity: 1;
}

.group-chip.on {
	opacity: 1;
	box-shadow: 0 0 0 2px var(--color-green-700);
}

/* ===== 품질분석(FastQC/MultiQC) 결과 슬라이딩 패널 ===== */
#fastqcOverlay,
#multiqcOverlay {
	display: none;
	position: fixed;
	top: 80px;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.35);
	z-index: 1000;
}

#fastqcOverlay.on,
#multiqcOverlay.on {
	display: block;
}

#fastqcPanel,
#multiqcPanel {
	position: fixed;
	top: 80px;
	right: 0;
	width: 78vw;
	max-width: 1500px;
	height: calc(100vh - 80px);
	background-color: var(--color-white);
	box-shadow: -4px 0 16px rgba(0, 0, 0, 0.18);
	z-index: 1001;
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform 260ms ease;
}

#fastqcPanel.on,
#multiqcPanel.on {
	transform: translateX(0);
}

.qc-panel__head {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 20px;
	border-bottom: 1px solid #EDEDED;
	background-color: #FAFAFA;
}

.qc-panel__title {
	min-width: 0;
	font-family: 'Pretendard', sans-serif;
	font-weight: 700;
	font-size: 16px;
	color: #454545;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.qc-panel__close {
	flex: none;
	width: 28px;
	height: 28px;
	border: 1px solid var(--color-gray-300);
	border-radius: 50%;
	background-color: var(--color-white);
	color: var(--color-gray-300);
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
}

.qc-panel__close:hover {
	color: var(--color-charcoal-800);
	border-color: var(--color-charcoal-800);
}

.qc-panel__body {
	flex: 1;
	min-height: 0;
	padding: 20px;
	overflow: auto;
}

.qc-panel__msg {
	display: none;
	padding: 40px;
	text-align: center;
	color: #888;
	font-size: 15px;
}

/* 실행 대기 중에만 loading 클래스를 붙여 안내문 위에 스피너를 띄운다 (ngsSpinAnim 재사용) */
.qc-panel__msg.loading::before {
	content: "";
	display: block;
	width: 36px;
	height: 36px;
	margin: 0 auto 16px;
	border: 4px solid #E5E5E5;
	border-top-color: var(--color-green-700);
	border-radius: 50%;
	animation: ngsSpinAnim 0.75s linear infinite;
}

.qc-panel__result {
	display: none;
	gap: 16px;
}

.qc-panel__result.on {
	display: flex;
}

.qc-panel__nav {
	flex: none;
	flex-direction: column;
	width: 300px;
}

.qc-panel__ifr {
	flex: 1;
	min-width: 0;
	height: calc(100vh - 205px);
	border: none;
}

/* 샘플목록 파일명 링크 (클릭 시 FastQC 결과 패널) */
.fastqc-link {
	color: var(--color-green-700);
	text-decoration: underline;
	cursor: pointer;
}

.fastqc-link:hover {
	color: var(--color-charcoal-800);
}

/* 시작된 분석: 칩의 삭제(x)만 막고 목록 보기는 유지 */
.chips-locked .tag__close {
	display: none;
}

/* 그룹 샘플목록 헤더 - 제목 옆에 MultiQC 버튼을 둔다 */
.group-table-head {
	display: flex;
	align-items: center;
	gap: 10px;
}

.btn-multiqc {
	padding: 4px 14px;
	border: 1px solid #D5D5D5;
	border-radius: 8px;
	background-color: #EFEFEF;
	color: #666;
	font-family: 'Pretendard', sans-serif;
	font-weight: 600;
	font-size: 13px;
	line-height: 18px;
	cursor: pointer;
}

.btn-multiqc:hover:not(:disabled) {
	background-color: #E4E4E4;
	color: var(--color-charcoal-800);
}

.btn-multiqc:disabled {
	border-color: #E8E8E8;
	background-color: #F6F6F6;
	color: #BDBDBD;
	cursor: not-allowed;
}

/* 결과가 아직 없을 때만 보이는 안내 */
.pp-qc-hint {
	font-size: 13px;
	font-weight: 500;
	color: #999;
}

/* 그룹 샘플 목록 */
#viewTableAA {
	table-layout: fixed;
	width: 100% !important;
}

#viewTableAA th,
#viewTableAA td {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#viewTableAA td > span {
	display: inline-block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: middle;
}

/* 중복 배지는 잘리지 않도록 */
#viewTableAA td .dup-badge {
	max-width: none;
	flex: none;
}

/* 고정 칩(필터 결과) - 그룹이 아니므로 색을 구분하고 닫기 버튼이 없다 */
.group-chip--filter {
	background-color: var(--color-gray-300);
}

.group-chip--filter .tag__label {
	background-color: #8A8C8C;
}

/* 그룹에서 제외된 샘플 태그 (X 누르면 그룹으로 되돌림) */
.tag--excluded {
	background-color: #FF7F50;
}

.tag--excluded .tag__label {
	background-color: #E5643A;
}

.tag--excluded .tag__value {
	max-width: 260px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* 이 분석의 다른 그룹에도 속한 중복 샘플 표시 */
.dup-badge {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 6px;
	border-radius: var(--radius-sm);
	background-color: var(--color-orange-500, #FF7F50);
	color: var(--color-white);
	font-size: 11px;
	font-weight: var(--font-weight-semibold);
	vertical-align: middle;
}

tr.dup-row > td {
	background-color: rgba(255, 127, 80, 0.08);
}

/* Loading Overlay */
#ngsLoadingOverlay {
	display: none;
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background: rgba(0, 0, 0, 0.45);
	z-index: 99999;
	align-items: center;
	justify-content: center;
}
#ngsLoadingOverlay.active {
	display: flex;
}
.ngs-loading-spinner {
	width: 52px;
	height: 52px;
	border: 5px solid rgba(255, 255, 255, 0.3);
	border-top-color: #ffffff;
	border-radius: 50%;
	animation: ngsSpinAnim 0.75s linear infinite;
}
@keyframes ngsSpinAnim {
	to { transform: rotate(360deg); }
}