/***********************************************************************************************************************
	bootstrap 3 와 bootstrap 5 를 같이 쓸 경우 발생하는 문제 해결을 위한 css

***********************************************************************************************************************/


/* bs3 와 bs5 를 같이 쓸 경우 모달 화면 문제 발생 */
@media (min-width: 576px) {
	.modal-dialog {
		max-width: none !important;
		margin-right: auto;
		margin-left: auto;
	}
}

/*
bootstrap.css min.css
	a:not([href]):not([class]) 있는 부분 color: inherit; 제거 또는 ....
 */
a:not([href]):not([class]) {
	color: var(--we-link-color);
	text-decoration: none;
}

a:not([href]):not([class]):hover {
	color: var(--we-link-color-hover);
	text-decoration: none;
}

/* 배경색 및 글자색 재설정 */
body,
#in_frame,
.ibox-content,
.ibox-title,
.btn-box,
.form-control,
.form-control[disabled],
.input-group-addon,
input,
.modal-content {
	background-color: var(--we-background-color);
	color: var(--we-text-color);
}

.form-control[disabled] {
	background-color: var(--we-form-disabled-background-color) !important;
}

.ibox-title h5 {
	background-color: var(--we-background-color);
	color: var(--we-text-color);
}
.white-bg {
	background-color: var(--we-background-color);
}

.btn-warning.disabled,
.btn-warning.disabled:hover,
.btn-warning.disabled:focus,
.btn-warning.disabled:active,
.btn-warning.disabled.active,
.btn-warning[disabled],
.btn-warning[disabled]:hover,
.btn-warning[disabled]:focus,
.btn-warning[disabled]:active,
.btn-warning.active[disabled],
fieldset[disabled] .btn-warning,
fieldset[disabled] .btn-warning:hover,
fieldset[disabled] .btn-warning:focus,
fieldset[disabled] .btn-warning:active,
fieldset[disabled] .btn-warning.active {
	background-color: var(--we-button-disabled-color);
	color: var(--we-button-label-color);
}

.btn.disabled, .btn[disabled], fieldset[disabled] .btn {
	opacity: var(--we-button-disabled-opacity);
}

.btn-warning {
	background-color: var(--we-button-background-color);
	border-color: var(--we-element-border-color);
	color: var(--we-text-white-color);;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active,
.open .dropdown-toggle.btn-warning,
.btn-warning:active:focus,
.btn-warning:active:hover,
.btn-warning.active:hover,
.btn-warning.active:focus {
	border-color: var(--we-button-hover-color);
}

.btn-warning:active,
.btn-warning.active,
.open .dropdown-toggle.btn-warning {
	background-image: none;
}

.btn-warning.disabled,
.btn-warning.disabled:hover,
.btn-warning.disabled:focus,
.btn-warning.disabled:active,
.btn-warning.disabled.active,
.btn-warning[disabled],
.btn-warning[disabled]:hover,
.btn-warning[disabled]:focus,
.btn-warning[disabled]:active,
.btn-warning.active[disabled],
fieldset[disabled] .btn-warning,
fieldset[disabled] .btn-warning:hover,
fieldset[disabled] .btn-warning:focus,
fieldset[disabled] .btn-warning:active,
fieldset[disabled] .btn-warning.active {
	background-color: var(--we-button-disabled-color);
	color: var(--we-button-label-color);
}

.btn-primary {
	background-color: var(--we-button-background-color);
	border-color: var(--we-element-border-color);
	color: var(--we-text-white-color);
	font-size: var(--we-font-size);
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active,
.open
.dropdown-toggle.btn-warning,
.btn-warning:active:focus,
.btn-warning:active:hover,
.btn-warning.active:hover,
.btn-warning.active:focus {
	background-color: var(--we-button-hover-color);
	border-color: var(--we-element-border-color);
	color: var(--we-text-white-color);
	font-size: var(--we-font-size);
}


.input-group {
	flex-wrap: nowrap;
	display: flex;
	align-items: stretch;
	width: 100%;
}

p {
	margin-top: 0;
	margin-bottom: 0;
}

.row > * {
	padding-left: 0;
	padding-right: 0;
}

.row > .btn-box {
	padding-left: 20px;
	padding-right: 20px;
}

.btn-tbb {
	font-size: 12px;
}

.btn {
	padding: 2px 12px;
}

/*#mstApp {*/
/*	background-color: var(--we-background-color) !important; */
/*}*/


/*
BS 3 방식 CSS
	<div class="input-group">
		<input v-model="scope.ds_xxx.xxx" class="form-control" type="text"/>
		<div class="input-group-btn">
			<button class="btn btn-primary m-n"><i class="fa fa-search"></i></button>
			<button class="btn btn-primary m-n"><i class="fa fa-close"></i></button>
		</div>
	</div>

BS 5 방식으로 사용하려면 아래 .input-group 관련된 css 삭제
	<div class="input-group">
		<input v-model="scope.ds_xxx.xxx" class="form-control" type="text"/>
		<button class="btn btn-primary"><i class="fa fa-search"></i></button>
		<button class="btn btn-primary"><i class="fa fa-close"></i></button>
	</div>

*/
/* BS 3 Style */
.input-group {
	position: relative;
	display: table;
	border-collapse: separate;
	width: 100%;
}

.input-group[class*=col-] {
	float: none;
	padding-right: 0;
	padding-left: 0
}

.input-group .form-control {
	position: relative;
	z-index: 2;
	float: left;
	width: 100%;
	margin-bottom: 0;
	vertical-align: middle;
}

.input-group .form-control:focus {
	z-index: 3
}

.input-group-lg > .form-control,
.input-group-lg > .input-group-addon,
.input-group-lg > .input-group-btn > .btn {
	height: 46px;
	padding: 10px 16px;
	font-size: 18px;
	line-height: 1.3333333;
	border-radius: 6px
}

select.input-group-lg > .form-control,
select.input-group-lg > .input-group-addon,
select.input-group-lg > .input-group-btn > .btn {
	height: 46px;
	line-height: 46px
}

select[multiple].input-group-lg > .form-control,
select[multiple].input-group-lg > .input-group-addon,
select[multiple].input-group-lg > .input-group-btn > .btn,
textarea.input-group-lg > .form-control,
textarea.input-group-lg > .input-group-addon,
textarea.input-group-lg > .input-group-btn > .btn {
	height: auto
}

.input-group-sm > .form-control,
.input-group-sm > .input-group-addon,
.input-group-sm > .input-group-btn > .btn {
	height: 30px;
	padding: 5px 10px;
	font-size: 12px;
	line-height: 1.5;
	border-radius: 3px
}

select.input-group-sm > .form-control,
select.input-group-sm > .input-group-addon,
select.input-group-sm > .input-group-btn > .btn {
	height: 30px;
	line-height: 30px
}

select[multiple].input-group-sm > .form-control,
select[multiple].input-group-sm > .input-group-addon,
select[multiple].input-group-sm > .input-group-btn > .btn,
textarea.input-group-sm > .form-control,
textarea.input-group-sm > .input-group-addon,
textarea.input-group-sm > .input-group-btn > .btn {
	height: auto
}

.input-group .form-control,
.input-group-addon,
.input-group-btn {
	display: table-cell;
}

.input-group .form-control:not(:first-child):not(:last-child),
.input-group-addon:not(:first-child):not(:last-child),
.input-group-btn:not(:first-child):not(:last-child) {
	border-radius: 0
}

.input-group-addon,
.input-group-btn {
	width: 1%;
	white-space: nowrap;
	vertical-align: middle;
}

div .checkbox-inline:not(:last-child) {
	margin-right: 6px;
}

.btn-box {
	border-bottom: 2px solid var(--we-primary-color);
}

.form-control {
	font-size: var(--we-font-size);
	height: var(--we-form-control-height);
	appearance: auto !important;
}

/* select 선택 화살표 보이도록 설정. bs3 에서 막아놓은것 해제  */
select {
	appearance: auto !important;
}

select option {
	background-color: var(--we-background-color);
	color: var(--we-text-color);
}

pre {
	font-family: var(--we-font-family, system-ui), system-ui !important;
	font-size: var(--we-font-size);
}

/* PC 화면 메뉴 아이콘 크기 조정 */
.nav > li > a i {
	margin-right: 6px;
	min-width: 20px;
	text-align: center;
}