/* ==================================================== */
/* layout 디자인 */
/* ==================================================== */

/* ---------------------------------------------------- */
/* page-sidebar */
.page-sidebar{
	background-color: #1631a4;
	background-image: initial;
}
.page-sidebar:after{
	background-image: url("/static/resources_template/img/custom/bg_icon_left.png");
	background-repeat: no-repeat;
	background-size: 160%;
	background-position: left 50% bottom -20%;
	
	top:0;
	left:0;
	position:absolute;
	opacity:0.8!important;
	filter:alpha(opacity=50);
	z-index:-1;
	content:"";
	width:100%;
	height:100%;
	
}
.nav-menu li.active > a > [class*='fa-'], .nav-menu li a > .ni{
	color:#01cae0;
}


/* ---------------------------------------------------- */
/* page-logo 디자인 */
.page-logo{
	-webkit-box-shadow:initial;
	box-shadow:initial;
	background:#1631a4;
}
.page-logo img{
	width:100%;
	height:auto;
}

.nav-function-minify:not(.nav-function-top) .krict-logo, .krict-logo-small{
    display: none;
}
.krict-logo, .nav-function-minify:not(.nav-function-top) .krict-logo-small{
    display: block;
}


/* ---------------------------------------------------- */
/* page-header 디자인 */
.page-header{
	background:#1631a4;
}
.page-header::after{
	background-image: url("/static/resources_template/img/custom/bg_icon_top.png");
	background-repeat: no-repeat;
	background-position: right -10% top 5%;
	
	top:0;
	left:0;
	position:absolute;
	opacity:0.8!important;
	filter:alpha(opacity=50);
	z-index:-1;
	content:"";
	width:100%;
	height:100%;
	
}
.page-header a, .header-icon:not(.btn) > [class*='fa-']:first-child{
    color: #d9d9d9;
}
.dropdown-menu .dropdown-item {
    color: #212529;
}

/* ---------------------------------------------------- */
/* page 언어 선택 디자인 */
.custom-lang-select a, .custom-lang-select .badge{
	cursor: pointer!important;
}
.custom-lang-select:hover > .header-icon:not(.btn) > [class*='fa-']:first-child{
	color:#fff;
}
.header-icon:not(.btn)[data-toggle="dropdown"] + .dropdown-menu{
	top:4.1rem !important
}


/* ---------------------------------------------------- */
/* page 로그인,로그아웃 디자인 */
.custom-member-login > a{
	cursor: pointer!important;
    font-size: 14px;
}
.custom-member-login:hover > a{
	color:#fff;
}
.header-icon:not(.btn)[data-toggle="dropdown"][aria-expanded="true"]:after{
	display:none;
}
.header-icon:not(.btn)[data-toggle="dropdown"][aria-expanded="true"] > [class*='fa-']:first-child, .header-icon:not(.btn)[data-toggle="dropdown"][aria-expanded="true"] > .ni:first-child{
	color:#fff!important;
}


/* ---------------------------------------------------- */
/* panel header */
.panel-hdr{
	cursor:pointer;
}
/* panel header : 탭 형식인 경우 */
.panel-hdr > .nav-tabs{
	border-bottom: none;
}
.panel-hdr > .nav-tabs > .nav-item > .nav-link{
	height: 47px;
	color: #999;
	font-size: 14px;
}


/* ---------------------------------------------------- */
/* loading icon */
/* .js-loading{
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.3);
	z-index: 10000;
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}
.js-loading.hide{
	display: none;
}
.js-laoding-wrap{
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	background-color: white;
	padding: 5px;
}
.js-loading-icon{
	width: 30px;
	height: 30px;
}

 */



.js-loading{
	position:fixed; width:100%; height:100vh; left:0; top:0; background:rgba(0,0,0,0.3); z-index:9999;
	display:block;
}

.js-loading.hide {
	display:none;
}


.js-laoding-wrap{
	display:flex; position:absolute; left:50%; top:50%; margin-left:-150px; margin-top:-150px; width:250px; height:250px; background:#fff; border-radius:150px;
	text-align:center; vertical-align: middle;
	justify-content:center;
	align-items: center;
}

.loading_img{
	position: absolute; font-size:14px;
}

.logo3{
	width:170px;
}


.js-loading-pre{
	position:fixed; width:100%; height:100vh; left:0; top:0; background:rgba(0,0,0,0.1); z-index:9999;
	display:flex;
	justify-content: center;
	align-items: center;
}

.js-loading-pre.hide {
	display:none;
}

.js-laoding-pre-wrap{
	display:flex;
	position:absolute; 
	max-width:600px;
	width:60%;
	background:#fff;
	border-radius:15px;
	text-align:center;
	vertical-align: middle;

	flex-direction: column;
	justify-content: center;
	align-items: center;

	padding:40px;
}


.js-loading-pre .loading_pre_close{
	display:none;
	position:absolute;
	right:15px;
	top:7px;
	font-size:25px;
	cursor: pointer;
	color:rgba(0,0,0,0.6);
}

.js-loading-pre .loading_pre_img_error{
	display:none;
	color:#6E4E9E;
	font-size:40px;
}


.js-loading-pre.error .loading_pre_close, .js-loading-pre.error .loading_pre_img_error{
	display:block;
}

.js-loading-pre.error .loading_pre_img {
	display:none;
}
.js-loading-pre.error .btn-prediction-cancel{
	visibility: hidden;	
	/* display:none; */
}



/* ---------------------------------------------------- */
/* select2 custom */
strong.select2-results__group{
	margin:20px 0  5px 0;
	border-bottom: 1px solid #E5E5E5;
}
.select2-container--default .select2-results > .select2-results__options {
	max-height: 400px;
}
.select2-results{
	border-top:1px solid #E5E5E5;
}
/* 드롭다운 박스 테두리 */
.select2-container--open .select2-dropdown--below{
	border-color: #4679cc;
}
.select2-container--open .select2-dropdown--above{
	border-color: #4679cc;
}
/* 검색창 상단 테두리 */
.select2-container--default.select2-container--open.select2-container--below .select2-selection--single, .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple, .select2-container--default.select2-container--open.select2-container--above .select2-selection--single, .select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple{
	border-color: #4679cc;
}
/* 드롭다운 선택된 아이템 색상 */
.select2-container--default .select2-results__option[aria-selected=true] {
	background: #cbdaf3;
}
/* 드롭다운 hover 아이템 색상 */
.select2-container--default .select2-results__option--highlighted[aria-selected]{
	background: #4679cc;
}
/* 검색창 focus 시 테두리 */
.select2-container--default.select2-container--focus .select2-selection--single, .select2-container--default.select2-container--focus .select2-selection--multiple{
	border-color: #4679cc;
}
/* 검색창에 선택된 아이템 테두리와 색상 */
.select2-container--default .select2-selection--multiple .select2-selection__choice{
	border-color: #4679cc;
	background: #f0f6ff;
}
/* select2 작은 노란 글씨 */
.js-select2-custom-cls{
	color:#999; 
	font-size:8px;
	padding-left:5px;
}
.select2-results__option--highlighted .js-select2-custom-cls, li.list-group-item.active > .js-select2-custom-cls,
.js-grade li:hover .js-select2-custom-cls, .js-grade li.selected .js-select2-custom-cls {
	color:rgb(233, 230, 171);
}









/* 버튼 스타일의 radio */
.radio-btn-gr{
	display: flex;
}
.radio-btn input {
	display: none;
}
.radio-btn label{
	border: 1px solid #E5E5E5;
	font-size: 10px;
	padding: 5px 10px;
	background-image: -moz-linear-gradient(top,#fff,#e6e6e6);
    background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));
    background-image: -webkit-linear-gradient(top,#fff,#e6e6e6);
    background-image: -o-linear-gradient(top,#fff,#e6e6e6);
    background-image: linear-gradient(to bottom,#fff,#e6e6e6);
}
.radio-btn label.active{
	background-image: none;
	background-color: #6c757d;
	border: 1px solid #6c757d;
	color: white;
}
.radio-btn-l{
	border-top-left-radius: 100px;
	border-bottom-left-radius: 100px;
}
.radio-btn-r{
	border-top-right-radius: 100px;
	border-bottom-right-radius: 100px;
}




/* 검색 결과 조성, 예측에서 설정한 조성(td > div) */
.dt-comp-wrap {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 8px;
}
/* 제품명 */
.dt-comp-brnd {
	font-weight: 500;
	width: max-content;
	margin: 0 auto;
}
.dt-comp-brnd + span {
	display: flex;
    width: 100%;
    justify-content: center;
    align-items: end;
}
/* 함량 단위(wt%) */
.dt-comp-cont-unit {
	font-size: 10px;
}
/* 소재분류(mat-cls) */
.dt-comp-cls {
	color: #fff;
	border-radius: 10px;
	font-size: 8px;
	padding: 2px 8px;
	/* margin-right: 5px; */
	width: max-content;
}
/* 소재분류별 컬러 지정 => db 데이테 상ㅇ
.dt-comp-cls-Additive { background-color: #ffdb8e; color: #333;}
.dt-comp-cls-Addtive { background-color: #ffdb8e; color: #333;}
.dt-comp-cls-Al2O3 { background-color: #feb7d9; color: #333;}
.dt-comp-cls-Al2O5Si { background-color: #fe9ecb; color: #333;}
.dt-comp-cls-BN { background-color: #fe85be; }
.dt-comp-cls-CB { background-color: #f1dee7; color: #333;}
.dt-comp-cls-CF { background-color: #fd52a3; }
.dt-comp-cls-CNT { background-color: #fd3995; }
.dt-comp-cls-GF { background-color: #fd2087; }
.dt-comp-cls-MgO { background-color: #fc077a; }
.dt-comp-cls-SiC { background-color: #fc077a; }
.dt-comp-cls-SiN { background-color: #ce0262; }
.dt-comp-cls-Talc { background-color: #d96c9f; }
.dt-comp-cls-HIPS { background-color: #9acffa; color: #333;}
.dt-comp-cls-PA { background-color: #82c4f8; color: #333;}
.dt-comp-cls-PA6 { background-color: #6ab8f7; }
.dt-comp-cls-PA66 { background-color: #51adf6; }
.dt-comp-cls-PBT { background-color: #39a1f4; }
.dt-comp-cls-PC { background-color: #2196F3; }
.dt-comp-cls-ABS { background-color: #0d8aee; }
.dt-comp-cls-PE { background-color: #0c7cd5; }
.dt-comp-cls-PET { background-color: #0a6ebd; }
.dt-comp-cls-PP { background-color: #0960a5; }
.dt-comp-cls-PPE { background-color: #6e96d7; }
.dt-comp-cls-PPS { background-color: #4679cc; }
.dt-comp-cls-TPEE { background-color: #3060af; }
*/
.dt-comp-hr {
	margin: 8px;
	border-bottom: 1px solid #ddd;
}
.dt-comp-container{
    /* display: flex; */
	display: grid;
    grid-template-columns: repeat(2, 1fr);
}
.dt-comp-container.single{
    display: flex;
}
/* .dt-comp-container > div:not(:last-child){
    border-bottom: 1px solid #ddd;
}
.dt-comp-wrap:not(:last-child){
    border-right: 1px solid #ddd;
} */

/* step head */
#steps-select header{
	display: none;
}
.steps {
    border-bottom: 1px solid rgba(0,0,0,0.07);
    padding: 12px 0 20px 0;
}
#steps-select ul[role="tablist"]{
	list-style: none;
	display: flex;
	margin: 0;
	padding: 0;
}
#steps-select ul[role="tablist"] li{
	width: 33%;
	display: flex;
	justify-content: center;
	font-size: 14px;
	color: black;
}
#steps-select ul[role="tablist"] li:not(:first-child):not(:last-child){
	border-left: 1px solid rgba(0,0,0,0.1);
	border-right: 1px solid rgba(0,0,0,0.1);
}
#steps-select .step-title{
	display: flex;
	align-items: center;
	color: #999;
}
#steps-select .step-index{
	width: 40px;
	height: 40px;
	margin-right: 10px;
	background-color: #999;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
}
#steps-select li.current .step-title{
	color: #4679cc; 
}
#steps-select li.current .step-index{
	background-color: #4679cc;
	color: white;
}


/* step body */
#steps-select .content.clearfix{
	padding: 10px; /* 30px; */
	min-height: 200px; /* 455px; */
	display: flex;
	justify-content: center;
	align-items: flex-start;
}
/* step body => 2 예측 물성 */
#steps-select-p-1 .frame-wrap, #steps-select-p-2 .frame-wrap{
	display: flex;
	flex-wrap: nowrap;
}
#steps-select-p-1 .frame-wrap div, #steps-select-p-2 .frame-wrap div{
	margin-right: 30px;
}
#steps-select-p-1 .frame-wrap input, #steps-select-p-1 .frame-wrap label, #steps-select-p-2 .frame-wrap input, #steps-select-p-2 .frame-wrap label{
	cursor: pointer;
}



/* step button */
#steps-select ul[role="menu"]{
	list-style: none;
	display: flex;
	justify-content: end;
	margin: 0;
	padding: 0 30px 0 0;
}
#steps-select ul[role="menu"] li{
	margin-left: 10px;
}
#steps-select ul[role="menu"] li a{
	padding: 0.375rem 0.844rem;
	font-size: 0.75rem;
	line-height: 1.5;
	border-radius: 4px;
	background-color: #4679cc;
	color:white;
}
#steps-select ul[role="menu"] li a:hover{
	background-color: #3060af;
}
#steps-select ul[role="menu"] li:first-child a{
	background-color: #f8f8f8;
    color: #999;
}
#steps-select ul[role="menu"] li:first-child a:hover{
	background-color: #dfdfdf;
}


#steps-select section {
	width: calc(100% - 300px);
}


.text-align-left{
	text-align: left;
}
.text-align-center{
	text-align: center;
}
.text-align-right{
	text-align: right;
}

.vertical-align-top{
    vertical-align: top;
}
.vertical-align-middle{
    vertical-align: middle;
}
.vertical-align-bottom{
    vertical-align: bottom;
}

.multi-select-container {
	width: 100%;
}

.sys-title{
	margin-top:20px;
	margin-bottom:10px;
	font-weight: 600;
	padding:10px 0;
	/* background: linear-gradient(blue, pink); */
	border-bottom:1px solid rgba(0,0,0,0.2);
	display:flex;
	align-items: flex-end;
}

.sys-title::before{
	width:8px; background-color: #666666;
	height:18px;
	content:"";
	align-items: center;
	margin-right:5px;
	border-radius: 5px;

	
}

.sys-best{
	padding:80px 20px;
	display:flex;
	justify-content: center;
	align-items: center;

	font-size: 14px;
	border:1px solid rgba(0, 0, 0, 0.2);
	border-radius: 5px;
	
	margin-top:20px;
}

.sys-custom{
	display:none;
	/* display:flex; */
	flex-direction: column;
}


.multi-select-container > .multi-select-ul {
	margin: 0;
	padding: 0;
	width: 100%;
}
.multi-select-container > .multi-select-ul li {
	list-style: none;
	padding: 10px 10px;
	margin: 5px;
	border-radius: 5px;
	width: calc(33% - 10px);
	display: inline-block;
	border: 1px solid #999;
	cursor: pointer;
}
.multi-select-container > .multi-select-ul li:hover {
	background-color: #999;
	color: #fff;
}
.multi-select-container > .multi-select-ul li.selected {
	background-color: #4679cc;
	color: #fff;
	border: 1px solid #4679cc;
}


.multi-select-container > .multi-select-ul li.selected:hover {
	opacity: 0.9;
}




/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}






.header-icon:not(.btn)[data-toggle="dropdown"][aria-expanded="true"]{
    color: #fff;
    font-weight: 400;
}

.custom-member-login .dropdown-header i {
    font-size: 20px;
}

.dropdown-header.bg-trans-gradient {
    padding: 1rem 1.5rem!important;
}






/* sweetalert */
.swal2-styled.swal2-confirm{
    background-color: #4679cc;
}


.krict-menu-folder{
    width: 35px;
    height: 35px;
    border-radius: 5px;
    background: rgba(255,255,255,0.2);
}
.krict-menu-folder a[data-class="nav-function-minify"]{
    background: none !important;
    border-color: rgba(0,0,0,0)!important;
    box-shadow: none !important;
    color: #d9d9d9;
    font-size: 21px !important;
    padding: 5px;
}
.krict-menu-folder:hover{
    background: rgba(255,255,255,0.3);
}
.krict-menu-folder:hover a[data-class="nav-function-minify"]{
    color: #fff;
}

.nav-function-minify:not(.nav-function-top) .page-header [data-class="nav-function-minify"]{
    border-color: rgba(0,0,0,0)!important;
}

.nav-function-minify:not(.nav-function-top) .page-sidebar .primary-nav:hover .nav-menu > li:hover > a,
.nav-function-minify:not(.nav-function-top) .page-sidebar .primary-nav .nav-menu > li > a + ul{
    background-color: #142C93;
}
.nav-function-minify:not(.nav-function-top) .page-sidebar .primary-nav .nav-menu > li > a + ul:before{
    color: #142C93;
}

.nav-function-minify:not(.nav-function-top) .depth2{
    left: 75px;
}

.krict-menu-open, .nav-function-minify:not(.nav-function-top) .krict-menu-close{
    display: inline-block;
}
.nav-function-minify:not(.nav-function-top) .krict-menu-open, .krict-menu-close{
    display: none;
}


.remain-container{
    color:#D9D9D9;
    font-size:12px;
}
.remain-container:hover{
    color: #fff;
    cursor: pointer;
}


#toast-container {
    top: 70px;
}




.drag-layer{
    display: none;
    position:absolute;
    top:0;
    left: 0;
    z-index: 10;
}
.drag-layer.show{
    display: block;
}





.js-header-notification .badge.js-comp-pred-new-num{
	display:none;
}
.js-header-notification .badge.js-comp-pred-new-num.show{
	display:inline-block;
}

.js-header-notification .tab-notification{
	height: 250px;
}


.notification:not(.notification-loading):before{
	content: "";
}



#dt-recommend-result.see-more tbody tr:nth-child(n+11){
	display: none;
}


.btn-see-more {
	color: var(--theme-primary);	
}
.btn-see-more:hover {
	cursor: pointer;
	color: var(--theme-primary-700);
	text-decoration: underline;
}

#dt-recommend-result tfoot.hide {
	display: none;
}