.b-white {
	background-color: white;
}

.border-dash {
	border-right: 1px dashed #d2d8e3 !important;
}

.data-table {
	border-bottom: solid 1px #94a7ba
}

.panel-title {
	position: relative;
	margin: 0;
	padding: 10px 20px;
	border: 0;
	border-radius: 0;
	background-color: #edf0f5;
	font-weight: 600;
	font-size: 1.5rem;
	text-align: left;
	/*     cursor: pointer; */
}

.pointer {
	cursor: pointer;
}

.panel-heading {
	padding: 0px !important;
}

.text-p-right {
	position: absolute;
	right: 20px;
}

.card-body {
	padding: 0px;
}

.card-title {
	height: 1.6875rem;
	margin: .625rem 0 .3125rem;
	font-size: 1.25rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 1.35;
	font-weight: 600;
}

.card-text {
	font-size: .875rem;
	color: #1abc9c;
	line-height: 1.35;
	font-weight: 600;
}

.card-img {
	margin-top: 20px;
	height: 8.125rem;
	text-align: center;
}

.search .research-search i {
	top: 0rem !important;
}
/* .fade:not(.show){ */
/* 	opacity: 0; */
/* } */
.popover.bottom>.arrow {
	border-bottom-color: rgba(0, 0, 0, 0) !important;
}

.cell-ellipse {
	max-width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.margin-5 {
	margin: 5px;
	border: 1px solid #899db4;
	color: #6a788a;
/* 	padding: 0px !important; */
	padding-top: 2px !important;
/* 	padding-right: 15px !important; */
	padding-left: 15px !important;
	max-height: 30px;
/* 	overflow: hidden; */
	font-size: .875rem;
}

.div-alert {
	max-height: 200px;
	overflow: auto;
	border-radius: .3125rem;
	border: 1px dashed #899db4;
}

.alert-dismissible .close {
	padding: 0px 8px !important;
}

.alert-p {
	display: block;
	margin-block-start: 1em;
	margin-block-end: 1em;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
}

.text-color {
	color: #1abc9c;
}

.selector-species {
	text-align: center;
	position: relative;
	margin-bottom: 20px;
	padding: 15px 20px 5px;
	background-color: #f9f9f9;
	border-radius: .3125rem;
}
.summary {
	position: relative;
	margin-bottom: 20px;
	padding: 15px 20px 5px;
	background-color: #f9f9f9;
	border-radius: .3125rem;
}
.modal-header-title {
	padding: 20px 20px;
    background-color: #1abc9c;
    border-radius: .3125rem;
    text-align: center;
    margin-bottom: 20px;
}
.modal .close {
    opacity: 1;
    padding-top: 5px;
}

.modal-content-selector {
	width: 1000px;
}

.ui-grid-header-cell-row {
	/* flex로 안하면 header menu 한곳에 몰리게 됨 */
    display: flex !important;
}
.ui-grid-cell-contents {
	text-align: center;
	font-size: .865rem;
}

.my-custom-menu {
	position: absolute;
}

.my-custom-menu .ui-grid-menu {
	padding: 0px;
}

.my-custom-menu .ui-grid-menu-inner {
	-webkit-box-shadow: none;
	box-shadow: none;
}

.rotated {
	transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-o-transform: rotate(180deg);
}
.data-table.js-table-scrollable.grid-table {
	border-bottom: none !important;
	height: auto;
	max-height: 750px;
}
.alert-box {
	width: 270px;
    display: inline-block;
}
.label-btn {
	margin-bottom: 0px !important;
}
.ani-question {
	top: 3px;
}
.Fasta {
	background-color: #ff776d !important;
}
.Fastq {
	color: #5c3c00 !important;
	background-color: #fff5c2 !important;
}
.GBK {
	background-color: #006ca5 !important;
}
.GFF {
	background-color: #63bd69 !important;
}
.COG {
	background-color: #005050 !important;
}
.Other{
	background-color: #cecece !important;
}
.overflow-at{
	overflow:auto;
}
.ht-600 {
	max-height: 600px;
}
.div-md{
/* 	text-align: center; */
/* 	vertical-align: middle; */
	margin: auto;
}
.align-top {
	vertical-align: top !important;
}
.progress {
    height: 1rem;
    overflow: hidden;
    font-size: .75rem;
    background-color: #e9ecef;
    border-radius: .3125rem;
}
.progress-bar {
    float: left;
    width: 0%;
    height: 100%;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    background-color: #1d8fe3;
    -webkit-transition: width 0.6s ease;
    -o-transition: width 0.6s ease;
    transition: width 0.6s ease;
}
.bg-success {
    background-color: #66d1a4;
}
.bg-info {
    background-color: #edf7fc;
}
.graph-index .index {
    display: inline-block;
    width: 12px;
    height: 12px;
    font-size: 63%;
    border-radius: 50%;
    vertical-align: middle;
}
.bg-primary {
    background-color: #1d8fe3 !important;
}
.bg-secondaryLight {
    background-color: #66d1a4 !important;
}
.bg-secondary {
    background-color: #1da3a3 !important;
}
.bg-primaryDarker {
    background-color: #1e3f6a !important;
}
.bg-danger {
    background-color: #eb3566 !important;
}
.bg-light {
    background-color: #b9bec3 !important;
}
.character-justify * {
    margin: 0;
    padding: 0;
    border: none;
}
.character-justify {
    position: relative;
    text-justify: distribute;
}
.modal-title {
    font-size: 1.3rem !important;
}
.letter-spacing {
	font-family: GulimChe;
    letter-spacing: 3px !important;
}
.table-sequence td, .table-sequence th {
    padding-bottom: 0.625rem;
    vertical-align: top;
}
.table-sequence td {
    letter-spacing: 2px;
    color: #1d8fe3;
}
.table-sequence td, th {
    padding: 0;
    text-align: left;
}
.w-br {
	word-break:break-all !important;
}
.ht-600 {
	max-height: 600px;
}
.left-align {
	text-align:left;
}
.wt-650 {
	max-width: 650px;
    overflow: auto;
}
.padding-r-0 {
	padding-right: 0px;
}
.padding-10 {
	padding: 10px;
}
.padding-20 {
	padding: 20px;
}
.overflow-at{
    overflow: auto;
}
.modal-block {
	padding-right: 14px; 
	display: block;
}
.div-align-right {
  float: right;
}

/* research regist step*/
.research-progress {
	position: relative;
	display: flex;
}

.research-progress .research-progress-track {
	position: absolute;
	top: 6px;
	width: 100%;
	height: 5px;
/* 	background-color: #dfe3e4; */
	border-bottom: 2px dashed #dfe3e4;
/* 	z-index: -1; */
}

.research-progress .research-progress-step {
	position: relative;
	width: 100%;
	font-size: 15px;
	text-align: center;
}

.research-progress .research-progress-step:last-child:after {
	display: none;
}

.research-progress .research-progress-step:before {
/*  	content: "\f00c"; */
 	content: ""; 
	display: flex;
	margin: 0 auto;
	margin-bottom: 10px;
	width: 20px;
	height: 20px;
	background: #fff;
	border: 4px solid #dfe3e4;
	border-radius: 100%;
	color: #fff;
}

.research-progress .research-progress-step:after {
	content: "";
	position: absolute;
	top: 6px;
	left: 50%;
	width: 0%;
	transition: width 1s ease-in;
	height: 5px;
/* 	background: #dfe3e4; */
/* 	z-index: -1; */
}

.research-progress .research-progress-step.is-active {
	color: #2183dd;
}

.research-progress .research-progress-step.is-active:before {
	border: 4px solid #777;
	animation: pulse 2s infinite;
}
.step{
	font-size: 17px;
}
.research-progress .research-progress-step.is-complete .step {
	color: #1abc9c;
}
.research-progress .research-progress-step.is-complete {
	color: #A6AEBE;
}

.research-progress .research-progress-step.is-complete:before {
	font-family: FontAwesome;
	font-size: 10px;
	color: #fff;
	background: #1abc9c;
	border: 4px solid transparent;
}

.research-progress .research-progress-step.is-complete:after {
/* 	background: #1abc9c; */
	animation: nextStep 1s;
	border-bottom: 2px dashed #1abc9c;
	animation-fill-mode: forwards;
}

@keyframes pulse { 
	0% {
		box-shadow: 0 0 0 0 rgba(33, 131, 221, 0.4);
	}
	70%{ 
	box-shadow:0 0 0 10px rgba(33,131,221,0);
	}
	100%{
	box-shadow: 0 0 0 0 rgba(33,131,221,0);
	}
}

@keyframes nextStep { 
	0% {
		width: 0%;
	}
	100%{
		width:100%;
	}
}

.form_ttl {
	margin: 10px -15px;
    padding: 4px 20px;
    font-size: 80%;
    color: #777777;
    background-color: rgba(193, 131, 0, 0.08);
	margin-left: -20px;
    margin-right: -20px;
}

/* taxon tree view css */
.icon-spin, .fa-arrow-circle-down{
    display: inline-block !important;
}


/**
 * Show/Hide 애니메이션 효과를 위한 설정
 */  
*  
.animate.ng-hide {
  opacity: 0;
}

.animate.ng-hide-add, .animate.ng-hide-remove {
  transition: all linear 0.5s;
}

/**
	AngularJS ng-animiate 모듈에서 사용하는 레이어 animation 스타일
	
	[사용예시]
	<div ng-switch on="quote">
	    <div class="scale" ng-switch-when="1">Page 1</div>
	    <div class="scale" ng-switch-when="2">Page 2</div>
	</div>
*/
.skew.ng-enter, .skew.ng-leave { 
    -webkit-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -moz-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -ms-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -o-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    position: relative;
    display: block;
} 
 
.skew.ng-leave.ng-leave-active, .skew.ng-enter {
    -webkit-transform: skewX(45deg) skewY(30deg);
    -moz-transform: skewX(45deg) skewY(30deg);
    -ms-transform: skewX(45deg) skewY(30deg);
    -o-transform: skewX(45deg) skewY(30deg);
    transform: skewX(45deg) skewY(30deg);
    opacity: 0;
    height: 0px;
}        
 
.skew.ng-enter.ng-enter-active, .skew.ng-leave {
    -webkit-transform: skewX(0deg) skewY(0deg);
    -moz-transform: skewX(0deg) skewY(0deg);
    -ms-transform: skewX(0deg) skewY(0deg);
    -o-transform: skewX(0deg) skewY(0deg);
    transform: skewX(0deg) skewY(0deg);
    opacity: 1;
    height: 30px;
}

.skew.ng-enter, .skew.ng-leave {
	-webkit-transition: 300ms linear all;
	-moz-transition: 300ms linear all;
	-ms-transition: 300ms linear all;
	-o-transition: 300ms linear all;
	transition: 300ms linear all;
}


/* Scale */
.scale.ng-enter, .scale.ng-leave {
	-webkit-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
	-moz-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
	-ms-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
	-o-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
	transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
	position: relative;
	display: block;
}

.scale.ng-leave.scale.ng-leave-active, .scale.ng-enter {
	-webkit-transform: scaleY(0);
	-moz-transform: scaleY(0);
	-ms-transform: scaleY(0);
	-o-transform: scaleY(0);
	transform: scaleY(0);
	height: 0px;
	opacity: 0;
}

.scale.ng-enter.scale.ng-enter-active, .scale.ng-leave {
	-webkit-transform: scaleY(1);
	-moz-transform: scaleY(1);
	-ms-transform: scaleY(1);
	-o-transform: scaleY(1);
	transform: scaleY(1);
	height: 30px;
	opacity: 1;
}

/* Slide Left */
.slide.ng-enter {
    -webkit-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -moz-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -ms-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -o-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    left:250px;
    position: relative;
}

.slide.ng-enter-active {
    left:0;
}

.slide.ng-leave {
    display: none;
}
.slide.ng-leave-active {
    left:-250px;
}

/** fade **/
.fade-animate.ng-enter, .fade-animate.ng-leave {
	-webkit-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
	-moz-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
	-ms-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
	-o-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
	transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
	position: relative;
	display: block;
	overflow: hidden;
	text-overflow: clip;
	white-space:nowrap;
}
.fade-animate.ng-enter, .fade-animate.ng-leave.ng-leave-active {
    opacity: 0;
}
.fade-animate.ng-leave, .fade-animate.ng-enter.ng-enter-active {
	opacity: 1;
}


[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
	display: none !important;
}

/* 테이블 border 관련 */
.border-bt-lf-0-radius {
	border-bottom-left-radius: 0rem !important;
}

.border-bt-rspan-radius {
	border-bottom-left-radius: .625rem;
    border-bottom: 1px solid #94a7ba;
}

.th-rspan {
	border-left: 1px solid #94a7ba !important;
}

.view-table {
	display: !important;
}

/**/
.page-item.active .page-link {
	color: #fff !importatnt;
}

.rq-position {
    position: relative;
    top: -1px;
    margin-left: 15px;
    font-size: .875rem;
}

.show {
	overflow: scroll !important;
}

/**
 * bootstrap 툴팁의 화살표 색상이 변경된 배경색과 달라 동일하게 변경 
 */
.tooltip.top .tooltip-arrow {
	border-top-color: #6a788a;
}
.tooltip.top-left .tooltip-arrow {
	border-top-color: #6a788a;
}
.tooltip.top-right .tooltip-arrow {
	border-top-color: #6a788a;
}
.tooltip.right .tooltip-arrow {
	border-right-color: #6a788a;
}
.tooltip.left .tooltip-arrow {
	border-left-color: #6a788a;
}
.tooltip.bottom .tooltip-arrow {
	border-bottom-color: #6a788a;
}
.tooltip.bottom-left .tooltip-arrow {
	border-bottom-color: #6a788a;
}
.tooltip.bottom-right .tooltip-arrow {
	border-bottom-color: #6a788a;
}

/**
 * 파일 타입을 badge로 변환해 출력
 */
.capitalize {
	text-transform: capitalize;
}

/**
 * CSP inline-script 방지를 위해 추가한 style 클래스
 */

.table-fixed {
	table-layout: fixed;
}

.bottom15 {
	bottom: 15px !important;
}

.padding-0 {
	padding: 0px !important;
}

.padding-40-0 {
	padding: 40px 0px !important;
}

.padding-l20 {
	padding-left: 20px !important;
}

.padding-r40 {
	padding-right: 40px !important;
}

.padding-tb075 {
	padding-top: 0.75rem !important; 
	padding-bottom: 0.75rem !important;
}

.margin-b0 {
	margin-bottom: 0px !important;
}

.margin-t10 {
	margin-top: 10px !important;
}

.margin-t130 {
	margin-top : 130px !important;
}

.margin-r16 {
	margin-right: 16px !important;
}

.font-bold {
	font-weight: bold;
}

.font-normal {
	font-weight: normal;
}

.wpct12 {
	width: 12% !important;
}

.wpct20 {
	width: 20%;
}

.wpct25 {
	width : 25%;
}

.wpct30 {
	width : 30%;
}

.wpct40 {
	width: 40%;
}

.wpct100 {
	width: 100%;
}

.w30 { 
	width: 30px;
}

.w39 {
	width: 39.5px;
}

.w44 {
	width: 44px;
}

.w50 {
	width: 50px;
}

.w60 {
	width: 60px; 
}

.w80 {
	width: 80px;
}

.w100 {
	width: 100px;
}

.w110 { 
	width: 110px;
}

.w120 {
	width: 120px;
}

.w150 {
	width: 150px;
}

.w170 {
	width: 170px;
}

.w200 {
	width: 200px;
}

.min-w39 {
	min-width: 39.5px;	
}

.min-w80 {
	min-width: 80px;
}

.min-w90 {
	min-width: 90px;
}

.min-w100 {
	min-width: 100px;
}

.min-w120 {
	min-width: 120px;
}

.min-w150 {
	min-width: 150px;
}

.min-w160 {
	min-width: 160px;
}

.min-w170 {
	min-width: 170px;
}

.min-w175 {
	min-width: 175px;
}

.min-w180 {
	min-width: 180px;
}

.min-w200 {
	min-width: 200px;
}

.min-w210 {
	min-width: 210px;
}

.min-w250 {
	min-width: 250px;
}

.min-w270 {
	min-width: 270px;
}

.min-w300 {
	min-width: 300px;
}

.min-w350 {
	min-width: 350px;
}

.min-w430 {
	min-width: 430px;
}

.max-w430 {
	max-width: 430px;
}

.h350 {
	height: 350px;
}

.h400 {
	height: 400px;
}

.h750 {
	height:705px; 
}

.h800 {
	height: 800px;
}

.min-h32 {
	min-height: 32x;
}

.min-h80 {
	min-height: 80px;
}

.min-h450 {
	min-height: 450px;
}

.max-h350 {
	max-height: 350px;
}

.font-15 {
	font-size: 15px;
}

/** 
* CKEditor의 textarea 크기를 키우기위한 클래스 설정
*/
.ck.ck-editor__editable_inline {
	min-height: 320px;
}

.white-space {
	white-space: normal !important;
}
.color-gray {
	color: #3a4f6f;
}
.capitalize {
	text-transform: capitalize;
}
.text-align-center {
	text-align: center;
}
.b-image {
	width:auto;
	height:auto;
}
.z-index-100045 {
	z-index: 100045;
}
.question-content-p {
/*     font-size: .875rem; */
/*     text-align: left; */
/*     white-space: pre-wrap; */
/*     margin : .5rem 1rem .5rem 1rem; */
	margin: 0px !important;
}
.header-padding-10 {
	padding-right: 10px !important;
    padding-left: 10px !important;
}

.intro {
	margin-bottom:40px;
	height : 70px;
	padding-top: 13px;
}

.question-table {
	border-top: 2px #3a4f6f solid;
    border-bottom: 2px #3a4f6f solid;
    margin-top: 10px;
}

.question-head {
	border-bottom: 1px #3a4f6f solid;
	background-color: gainsboro;
}

.question-tr {
	border-bottom: 1px #3a4f6f dashed;
}