:root{
	/* color set */
	
	--main-color-100:#0052A3;
	--main-color-90:#2D70AF;
	--main-color-80:#5A8CBC;
	--main-color-70:#88A8C8;
	--main-color-60:#9EB7CF;
	--main-color-50:#9EB7CF;
	--main-color-40:#B5C5D5;
	--main-color-30:#E2E2E2;
	
	--gray-color-100: #40576F;
	--gray-color-90: #718191;
	--gray-color-80: #87939F;
	--gray-color-70: #9CA4AC;
	--gray-color-60: #B3B9BF;
	--gray-color-50: #BCC3C9;
	--gray-color-40: #CCD0D4;
	--gray-color-30: #D1E0E8;
	
	--black-color-100: #00050E;
	--black-color-90: #4C4C4B;
	--black-color-80: #616161;
	--black-color-70: #757575;
	--black-color-60: #989898;
	--black-color-50: #ABABAB;
	--black-color-40: #BFBFBF;
	--black-color-30: #E2E2E2;

	
	--white-color-30: #FFFFFF;
	--white-color-40: #F9FAFF;
	--white-color-50: #F4F6FB;
	--white-color-60: #F0F2F7;
	--white-color-70: #EAEDF4;
	--white-color-80: #E4E8EF;
	--white-color-90: #DDE2EB;
	--white-color-100: #D7DCE5;
	
	/* boder-radius */
	--large-radius:1rem;
	--middle-radius:0.825rem;
	--small-radius: 0.425rem;
	
	
	/* font-size */
	--section-title : 84px;
	--section-subtitle: 32px;
	--section-description : 12px;

	--card-title:32px;
	--card-subtitle:16px;
	--card-description:12px;
	
	--button-text:18px;
	--header-menu:14px;

	--header-submenu:12px;
	--body-text:14px;
	--tooltip:10px;	
	--input-text:12px;
	
	/* font-weight */
	--bold : 600;
	--reqular: 400;
	--light: 300;
	
	
}

*{
	margin:0;
	padding:0;
	font-family:  Pretendard;	
}

li{
	list-style: none;
}

html,body 
{
	font-family:  Pretendard;
}
.wrapper{
	padding : 0.5rem;
    height: 100vh;
    gap: 0.5rem;
/* 	overflow-y:initial!important; */
	overflow:hidden;
}
.main{
	box-shadow: none;
	background-color: var(--white-color-30);
	border-radius: 13px !important;
	border: solid 1px #B9BEC4;
	
}
.main-page{
	display: flex;
    direction: ltr;
    height: calc(100vh - 3rem);
    width: 100%;
    padding: 0.5rem 0.5rem 0 0.5rem;
    flex-direction: column;
}

.main-title{ 
	align-items: center; 
	display: flex; 
	margin-bottom: 10px;
}

.main-title-h1{
	margin:0;
}
.card-body{
	border-bottom: none !important;	
	
}
.main-content{
	display: flex;
	width: 100%;
	height: 94%;
	margin: 0;
	padding: 0;
	gap: 10px;
	justify-content: center;
}

/* 대시보드 */
#content {
	padding: 1rem;
    flex: 1;
    direction: ltr;
    height: calc(100vh - 4rem);
}

.main{
	min-height: calc(100vh - 2rem) !important;	
	
}
.input-group-search .form-select 
{
	margin-right: 12px;
}

.input-group-search .form-control, .input-group-search .btn 
{
	border: 1px solid #e5e5ec!important;
} 

.input-group-search .form-control 
{
	border-right:0!important;
}

.input-group-search .btn 
{
	border-left: 0!important;
}

.card-header 
{
	gap:0 20px;
}
.custom-nav .nav-link{
	color: var(--gray-color-70);
}
/* .card-header > div:last-child */
/*{*/
/*	width:inherit !important;*/
/*	display: flex;*/
/*	gap:0 4px;*/
/*} */
.tooltip{
	background-color: var(--black-color-100);	
	
}
.search-btn-wrap { display: flex; gap:0 8px; margin-left: auto;}
.card-header > form { width: calc(100% - 101px); }
@media all and (max-width:767px) 
{
	.card-header { flex-direction: column; gap: 12px 0; }	
	.card-header .col-md-6 { width: 100%; }	
	.card-header > div:last-child  { width: 100%!important; justify-content: space-between;	}	
	/* 버튼 사이즈를 균등하게 해줌 */
	.card-header > div:last-child .btn, .search-btn-wrap > button  { flex:1 !important; }	
	.main-title-wrap { display: flex; flex-direction: column; gap: 8px 0;  margin-bottom: 12px; align-items: inherit; }
	.search-btn-wrap { margin-left: inherit; }
	.dashboard-section > .row { gap: 8px 0;}
	.dashboard-section > .row > .search-option{ width: 50%!important; gap: 12px 0; }
	.card-header > form { width: 100%; } 		
}

@media all and (max-width:350px) 
{
	
	.dashboard-section > .row { flex-direction: column;}
	.dashboard-section > .row > .search-option{ width: 100%!important; }		
}

.dashboard-section > .row > .search-option{ 
	display: flex; 
	align-items: center; 
	gap: 5px;
}

.comment {
	font-size:12px;
	font-weight:300;
	color:#ff0000b5;
	margin-left:4px;
}


/* 그리드 공통 CSS 추가 */
.green.tui-grid-cell {
    background-color: #cef6d7 !important;
}

.blue.tui-grid-cell {
    background-color: #cef6f5 !important;
}

.red.tui-grid-cell {
    background-color: #f8e0e0 !important;
}


.btn-custom-lg{
    padding : 0.25rem 1rem;
    border-radius: 0.3rem !important;
    font-size: 0.75rem; 
}
.btn-custom-sm {
    padding: 0.2rem 0.5rem ;
    border-radius: 0.3rem !important;
    font-size: 0.75rem; 
}
.btn-custom-lg i, .btn-custom-sm i{
    margin-right: .25rem;
}

/*Split 사용 시 경계 라인 디자인*/
/*좌우 Split*/
.gutter {
	background-color: #e9ecef; 
	cursor: col-resize; 
	position: relative;
}
.gutter.gutter-horizontal::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 6px;
	height: 30px;
	border-radius: 4px;
	background-color: #ced4da;
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
}

/*상하 Split*/
.gutter-vertical {
	background-color: #e9ecef; 
	cursor: row-resize; 
	position: relative;
}

.gutter.gutter-vertical::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 30px;
	height: 6px;
	border-radius: 4px;
	background-color: #ced4da;
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
}


.shadow{
	box-shadow: 0 0 .875rem 0 rgba(41,48,66,.08) !important;
}
.shadow-none{
	box-shadow: none !important;
}
.bg-tr{
	background-color: transparent !important;
}

.modal {
	z-index: 1061 !important;
}
.swal2-container{
	z-index: 1071 !important;
}
.title-text{
	font-size:36px;
	color:#111;
	font-weight: 600;
}
.sub-title-text{
	font-size:16px;
}
.modal-grid-item{
	height: 50vh;
}

.modal.fade .modal-dialog {
  top: 30%; /* 시작 위치 (아래) */
  transform: translateY(100px); /* 아래쪽에서 등장 */
  opacity: 0;
  transition: all 0.2s ease-out;
}

.modal.show .modal-dialog {
  top: 45%;
  transform: translateY(-50%);
  opacity: 1;
}
.requirement{
	color:red;
	line-height: 1.7;
	padding-right: 5%;
}

/* dropdown*/

.custom-dropdown {
    position: relative;
    width: 100%;
}
.custom-dropdown-toggle {
    width: 100%;
    padding: .25rem 2.1rem .25rem .7rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.2rem;
    background-color: #fff;
    cursor: pointer;
}
.custom-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    width: 100%;
    background: #fff;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
	display: none;
    padding: .25rem 2.1rem .25rem .7rem;
}
.custom-dropdown-menu label {
	display: flex;
    margin-bottom: 5px;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
}
.custom-dropdown.open .custom-dropdown-menu {
    display: block;
    margin-top:4px
}

.navbar{
	box-shadow: none;
}

.nowrap {
  white-space: nowrap;
}

.tui-grid-container .tui-grid-pagination{
	margin-top: 12px;
}

.title{
	font-size: 24px;
	font-weight: var(--right)
	
}
.input-style{
	border: 0;
	border-bottom: solid 3px var(--gray-color-50);
	height: 48px;
	max-width: calc(100% - 4rem);
	background-color: transparent;
}
.input-style:focus{
	outline: none;
	border-bottom: solid 3px var(--main-color-100) !important; 	
}
.lable-style{
	white-space: nowrap;
    flex: 48px 0;
    text-align: right;
}
.init-btn{
	padding: 8px 16px;
    border: solid 1px var(--gray-color-70);
    border-radius: var(--bs-border-radius-lg);
    background-color: transparent;
    transition: all 0.3s ease;
    width: 120px;
    max-width: 120px;
}
.init-btn:hover{
	background-color: var(--main-color-100);
	color:white;
	transition: all 0.3s ease;
	border:solid 1px #fff
}
.chart-height{
	height: calc(70vh - 3rem) !important;
}
.search-item{
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin:0;
    padding:0
}

/*kbs onm*/

.gap1{
	gap: 0.1rem !important;;
}

.mp-0{
	margin: 0!important;
	padding: 0!important;
}

.custom-check{
    margin-left: 0.4rem;
}

.form-label {
	display: flex;
    justify-content: flex-end;
    align-items: center;
    font-weight: 400;
    white-space: nowrap;
}

.scroll-modal{
	overflow: hidden;
    overflow-y: scroll;
    max-height: 700px;
}
.no-event{
	pointer-events: none;
}
.square-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    width: 24px !important;
    height: 24px !important;
}
.modal-header{
	border-bottom: solid 1px var(--gray-color-50) !important;
}
.modal-content{
	border: solid 1px var(--gray-color-50);
}
.modal-body{
	background-color: var(--white-color-40);	
}
.form-label{
    font-weight: 500;
    color: var(--black-color-90);
}
.card-header{
	border-bottom: solid 1px var(--gray-color-50);
}
.card-header-text{
	font-size: 1.125rem;
}
.modal-left{
	margin-left: 5% !important;
}
.modal-right{
    margin-right: 5% !important;
    right: 0;
    position: absolute;
}
.modal-backdrop {
  display: none;
}
select[readonly],
textarea[readonly]{
	pointer-events: none;
	background-color: var(--white-color-50);
}
 
input:read-only,
textarea:read-only{
	background-color: var(--white-color-50);
}
input[type="text"]:disabled{
	background-color: var(--white-color-50);
}
select[type="text"]:disabled{
	background-color: var(--white-color-50);
}
input:not([type]),
textarea:not([type]){
    background-color: var(--white-color-50);
}

.custom-nav{ 
	--bs-nav-link-padding-x: 1rem;
    --bs-nav-link-padding-y: 0.5rem;
    --bs-nav-link-font-weight: ;
    --bs-nav-link-color: var(--bs-link-color);
    --bs-nav-link-hover-color: var(--bs-link-hover-color);
    --bs-nav-link-disabled-color: var(--bs-secondary-color);
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    flex-direction: row;
}

@media screen and (max-height: 800px) {
	
	.scroll-modal{
		overflow: hidden;
	    overflow-y: scroll;
    	max-height: 500px;
	}
}