:root {
	--dev-margin-unit: 5px;
}
/*************************************************************************/
/******************************* scrollbar *********************************/
html {
	-ms-overflow-style: none; /* IE and Edge */
	scrollbar-width: none; /* Firefox */
}
html::-webkit-scrollbar {
	display: none; /* Chrome, Safari, Opera*/
}
/*************************************************************************/
/*************************** select2 *****************************/
.select2-selection__placeholder {
	color: #555555 !important;
	font-size: 13px !important;
	font-family: "Pretendard", sans-serif !important;
	font-weight: 200;
}

.select2-selection {
	border-color: #D8D8D8 !important;
	border-width: 0.5px !important;
}

.select2-selection__rendered {
	color: #002B5E !important;
	font-size: 13px !important;
	font-family: "Pretendard", sans-serif !important;

}

.select2-results__option {
	background-color: #FFFFFF !important;
	color: #4A4B4C !important;
	font-size: 13px !important;
	font-family: "Pretendard", sans-serif !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-weight: 500;
}

.select2-results__option--highlighted {
	background-color: #EFF5FF !important;
	color: #246BEB !important;
	font-size: 13px !important;
	font-family: "Pretendard", sans-serif !important;
}

.select2-w-200-px .select2-dropdown--below {
	width: 200px !important;
}

.select2-w-100 .select2-dropdown--below {
	width: 100% !important;
}

.select2-h-100 .select2-dropdown--below {
	height: 100% !important;
}

.select2-h-50-px + .select2-container .select2-selection {
	height: 50px !important;
}
.select2-h-50-px + .select2-container .select2-selection__choice {
	height: 38px;
	align-content: center;
}

.select2-container .select2-selection__rendered:not(ul) {
	height: 100%;
}
.select2-container .select2-selection__arrow:not(ul) {
	height: 100% !important;
}

.select2-start + .select2-container .select2-selection {
	text-align: start;
}
.select2-center + .select2-container .select2-selection {
	text-align: center;
}
.select2-end + .select2-container .select2-selection {
	text-align: end;
}

.select2-align-start + .select2-container .select2-selection__rendered {
	align-content: start;
}
.select2-align-center + .select2-container .select2-selection__rendered {
	align-content: center;
}
.select2-align-end + .select2-container .select2-selection__rendered {
	align-content: end;
}

/*
	@see https://stackoverflow.com/questions/49648571/select2-placeholder-issue
	margin - multiple상태에서 margin-top이 5px로 되어서 placeholder가 밀리는 문제가 있어서 0으로 고정
	width - 2025.02.21 select2 multiple상태에서 처음 랜더링시 placeHolder의 width가 0px로
			설정되면서 placeHolder가 안보이는 문제가 있어서 해당 css 추가
*/
.select2 .select2-selection--multiple .select2-search__field{
	margin: 0;
	width: 100%!important;
}
/*************************************************************************/
/********************************* form **********************************/
.is-invalid {
	border: 2px solid #EB003B !important;
}

.dev-form-control {
	display: block;
	width: 100%;
	padding-left: 0.375rem;
	padding-right: 0.375rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: #212529;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid #ced4da;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border-radius: .375rem;
	transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.dev-form-control:disabled {
	background-color: #cccccc;
}

/*************************************************************************/
/***************************** custom css ********************************/
.dev-d-none {
	display: none !important;
}

/* height */
.dev-h-100 { height: 100% !important; }

/* margin */
.dev-ms-1 { margin-left: calc(var(--dev-margin-unit) * 1) !important; }
.dev-ms-2 { margin-left: calc(var(--dev-margin-unit) * 2) !important; }
.dev-ms-3 { margin-left: calc(var(--dev-margin-unit) * 3) !important; }
.dev-ms-4 { margin-left: calc(var(--dev-margin-unit) * 4) !important; }
.dev-ms-5 { margin-left: calc(var(--dev-margin-unit) * 5) !important; }

.dev-mt-1 { margin-top: calc(var(--dev-margin-unit) * 1) !important; }
.dev-mt-2 { margin-top: calc(var(--dev-margin-unit) * 2) !important; }
.dev-mt-3 { margin-top: calc(var(--dev-margin-unit) * 3) !important; }
.dev-mt-4 { margin-top: calc(var(--dev-margin-unit) * 4) !important; }
.dev-mt-5 { margin-top: calc(var(--dev-margin-unit) * 5) !important; }

.dev-me-1 { margin-right: calc(var(--dev-margin-unit) * 1) !important; }
.dev-me-2 { margin-right: calc(var(--dev-margin-unit) * 2) !important; }
.dev-me-3 { margin-right: calc(var(--dev-margin-unit) * 3) !important; }
.dev-me-4 { margin-right: calc(var(--dev-margin-unit) * 4) !important; }
.dev-me-5 { margin-right: calc(var(--dev-margin-unit) * 5) !important; }

.dev-mb-1 { margin-bottom: calc(var(--dev-margin-unit) * 1) !important; }
.dev-mb-2 { margin-bottom: calc(var(--dev-margin-unit) * 2) !important; }
.dev-mb-3 { margin-bottom: calc(var(--dev-margin-unit) * 3) !important; }
.dev-mb-4 { margin-bottom: calc(var(--dev-margin-unit) * 4) !important; }
.dev-mb-5 { margin-bottom: calc(var(--dev-margin-unit) * 5) !important; }

/* align */
.dev-text-start { text-align: start; }
.dev-text-center { text-align: center; }
.dev-text-end { text-align: end; }
.dev-align-items-center { align-items: center !important; }

.dev-d-flex { display: flex; }

/* container */
.dev-container {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
}

.dev-row {
	display: flex;
	flex-wrap: wrap;
}

.dev-col-1 { flex: 0 0 auto; width: 8.33333333%; }


/*************************************************************************/
/**************************** ag-grid css ********************************/
.ag-icon {
	font-family: var(--ag-icon-font-family-filter, var(--ag-icon-font-family)) !important;
}
/*************************************************************************/

.extra-wide-size .viewPopUp-wrap{
	width: 1280px;
	height: 99vh;
}

.extra-wide-size .viewPopUp-title .text{
	width: 1170px;
}

.extra-wide-size .viewPopUp-title{
	max-width: 1196px;

}
/*************************************************************************/
/**************************** table css ********************************/
.dev-table {
	width: 100%;
	border-top: 2px solid var(--secondary-40);
	border-collapse: collapse;
}
.dev-table th {
	height: 52px;
	color: var(--secondary-40); font-weight: 500; font-size: 14px;
	border: 1px solid var(--grayscale-20);
	background-color: #f9f9f9;
}
.dev-table td {
	height: 50px;
	border: 1px solid var(--grayscale-20);
}


/* monthlyMoadlTable */
#monthlyModalTable td input{
	background: transparent;
	color: var(--grayscale-90); font-weight: 300; font-size: 13px;
	width: 100%; height: 100%;
	padding: 0px 5px;
	text-align: right;
}
#monthlyModalTable td input:disabled {
	background-color: #c6c6c6;
}
/*************************************************************************/