/***********************************************************************************************************************
	Bootstrap 5 적용 버전의 기본스타일

	부트스트랩 스타일 재정의는 		we_style_bs5.css 		ex) .btn-link...
	Vue Component 스타일 재정의는 	we_style_vue.css 		ex) ag-grid, datepicker
***********************************************************************************************************************/
/* light mode css variables */
body {
	--we-font-family: "Pretendard", "맑은 고딕", "malgun gothic", system-ui;
	/*--we-font-family: "Pretendard-Regular", "Noto Sans KR", "NanumSquareNeo",  "NanumBarunGothic", "Nanum Gothic", "맑은 고딕", "malgun gothic", system-ui;		!* font family 맑은고딕 우선 맥등에선 system-ui (보통은 apple산돌고딕) *!*/
	--we-font-size: 12px; 											/* 기본 폰트 사이즈 */
	--we-form-control-height: 26px;

	/* 색상설정 */
	--we-theme-color: #1c84c6;
	--we-text-color: #000;
	--we-alt-text-color: #fff;
	--we-text-white-color: #fff;
	--we-background-color: #fff;
	--we-body-background-color: #f3f3f4;
	--we-border-color: #777;
	--we-border-silver-color: #C0C0C0;
	--we-default-color: #fff;

	--we-primary-color: var(--we-theme-color);
	--we-primary-hover-color:  #337ab7;
	--we-element-background-color: var(--we-primary-color);
	--we-element-border-color: var(--we-primary-color);
	--we-element-color: var(--we-primary-color);
	/*--we-navheader-backround-color: #15669a;*/
	/*--we-navdeafult-backround-color: var(--we-primary-color);*/
	/*--we-navlogout-backround-color: #d6d6d6;*/
	--we-navheader-backround-color: #001b29;
	--we-navdeafult-backround-color: #003555;
	--we-navlogout-backround-color: #196d9f;

	--we-gray-bg: #f3f3f4;	/* 기존 css 사용을 맞추기 위한 설정 */
	--we-silver-bg: #eee;
	/* link */
	--we-link-color: #337ab7;
	--we-link-color-hover: #23527c;
	/* button */
	/*버튼색상*/
	--we-button-background-color: var(--we-theme-color);
	--we-button-hover-color:  var(--we-primary-hover-color);
	--we-button-disabled-color: #333333;
	--we-button-label-color: white;
	--we-button-disabled-opacity: 0.3;
	/* form-control 사용시 처리를 위해 추가 */
	--we-form-disabled-background-color: #f7f7f7;
	--we-footer-background-color: #eee;


	--we-form-border-color: var(--we-element-background-color);
	/* MDI 선택된 탭 글자색  */
	--we-tab-active-color: var(--we-element-background-color);
	--we-tab-text-color: #5a6880;

	--we-valid-type-color-required: #fff7f7;
	--we-valid-type-border-color-required: #f48e8e;
}

/* dark mode css variables */
body.dark {
	--we-text-color: #fff;
	--we-alt-text-color: #000;
	--we-background-color: #333;
	--we-body-background-color: #333;
	--we-border-color: #aaa;
	--we-primary-color: #cacaca;
	--we-default-color: #000;
	--we-navheader-backround-color: #000000;
	--we-navdeafult-backround-color: #272727;
	--we-navlogout-backround-color: #ffffff;

	/* 기본 배경색 */
	--we-gray-bg: #444;
	--we-silver-bg: #666;

	/* MDI 선택된 탭 글자색  */
	--we-tab-active-color: #ececec;
	--we-tab-text-color: #aeaeae;

	/* link */
	--we-link-color: lightskyblue;
	--we-link-color-hover: #fff;

	/* button */
	--we-button-background-color: #203850;
	--we-button-hover-color: #375f87;
	--we-button-label-color: black;
	--we-button-disabled-color: #fff;
	--we-button-disabled-opacity: 0.5;

	--we-form-border-color: #fff;
	--we-form-disabled-background-color: #666;
	--we-footer-background-color: #666;

	--we-valid-type-color-required: #3e0101;
}

html, body {
/* 	background-color: var(--we-background-color) !important; */
	background-color: var(--we-body-background-color) !important;
	width: 100%;
	height: 100% !important;
	padding: 0;
	margin: 0;
	print-color-adjust: exact !important;
	font-family: var(--we-font-family, system-ui), system-ui  !important;;
	font-size: var(--we-font-size) !important;
}

/*VUE 메인 APP*/
.mst-app {
	width: 100%;
	height: 100%;
/* 	background-color: #f3f3f4;	추가 by rum */
	padding-bottom: 7px;		/* 추가 by rum */
}

.wrapper-content {
	background-color: var(--we-gray-bg);
}

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;
}
a {
	color: var(--we-link-color);
	text-decoration: none;
}
a:link {
	color: var(--we-link-color);
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	color: var(--we-link-color-hover);
	text-decoration: none;
}
a:active {
	color: var(--we-link-color);
	text-decoration: none;
}

.full-size {
	width: 100%;
	height: 100%;
}
/* style="height" 100%" 대체용 */
.full-height {
	height: 100%;
}

.display-flex-column {
	display: flex;
	flex-direction: column;
}

.display-flex-row {
	display: flex;
	flex-direction: row;
}

.pull-right {
	float: right;
}

.footer {
	background: none repeat scroll 0 0 var(--we-footer-background-color);
	border-top: 1px solid #bcbcbc;
	bottom: 0;
	left: 0;
	padding: 10px 20px;
	position: absolute;
	right: 0;
}

.border-top-bottom {
	border-top: 2px solid var(--we-primary-color);
	border-bottom: 1px solid transparent;
}

/* alert : SweetAlert2 테마에 맞게 색상 설정*/
.swal2-popup {
	color: var(--we-text-color) !important;
	background-color: var(--we-background-color) !important;
	border: 1px solid white !important;
}
.swal2-html-container, .swal2-styled   {
	font-size: var(--we-font-size) !important;
	color: var(--we-text-color);
}
.swal2-actions button {
	background-color: var(--we-button-background-color) !important;
	color: white !important;
}
.swal2-icon .swal2-icon-content {
	color: var(--we-text-color);
}
.swal2-shown {
	height: 100% !important
}
.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
	height: 100% !important;
}
/*heightAuto: false*/
/*.swal2-cancel {*/
/*	background-color: var(--we-button-background-color) !important;*/
/*}*/

/*@media (prefers-color-scheme: dark) {*/
/*	body {*/
/*	}*/

/*	.navbar-default {*/
/*		background-color: #3e3;*/
/*		color: white;*/
/*	}*/
/*}*/


.flex-1 {
	flex: 1;
}
.flex-2 {
	flex: 2;
}
.flex-3 {
	flex: 3;
}
.flex-4 {
	flex: 4;
}

.navbar-minimalize {
	background-color: var(--we-navdeafult-backround-color) !important;
}

/**
validTypes 종류에 따라 설정
.we-valid-type-xxx
**/
/* validType: required 필수의 경우 백그라운드 색상을 약한 적색 계열 */
.we-valid-type-required {
	background-color: var(--we-valid-type-color-required);
	/*border: 1px solid var(--we-valid-type-border-color-required) !important;*/
}

*[validtypes=required] {
	background-color: var(--we-valid-type-color-required);
	/*border: 1px solid var(--we-valid-type-border-color-required);*/
}

.we-page-header {
	/*background-color: var(--we-navdeafult-backround-color)*/
	border-bottom: 1px solid var(--we-primary-color) !important;
}

.we-page-title {
	font-weight: bold;
	font-size: 16px;
	color: var(--we-text-color) !important;
	letter-spacing: -1px;
	margin: 0 2px;
	/*padding: 2px 20px;*/
}

.we-page-header .ibox-tools {
	/*padding-top: 2px;*/
	position: relative;
	right: 0;

}

.we-page-header .ibox-title  {
	padding: 7px 15px 7px 5px;
	align-items: center;
}

.we-page-header .ibox-title .ibox-tools {
	/*padding-top: 2px;*/
	position: relative;
	top: 0;
	right:0;
}


.we-page-search {
	padding: 4px 15px 0 0;
	/* border-bottom: 1px solid var(--we-primary-color); */
}


/* 추가 by rum */
.mst-app:has(.we-page-title) {
	display: flex;
	flex-direction: column;
}

.we-page-header.ibox {
	margin-bottom: 0 !important;
}

/* 페이지 중간 제목: ibox 의 ibox-title (헤더 제목 제외) */
.ibox-title:not(:has(.we-page-title)) {
	padding-top: 0 ;
	padding-bottom: 0;
	min-height: 28px;
}

/* 헤더 제목을 제외한 제목들중 버튼을 포함한 제목들 */
.ibox:not(:is(.we-page-header)) .ibox-title:has(.ibox-tools) {
	display: flex;;
	align-items: center;
}

.ibox:not(:is(.we-page-header)) .ibox-title:has(.ibox-tools) .ibox-tools {
	top: 2px;
}

/*.ibox-title:not(:has(.we-page-title)) {*/
/*	padding-top: 0 !important;*/
/*	padding-bottom: 0 !important;*/
/*	min-height: 28px !important;*/
/*}*/

/*.we-ibox-title1 {	!* ibox-title 하위에 버튼(ibox-tools) 없음 *!*/
/*	min-height: 28px;*/
/*	padding-top: 0;*/
/*	padding-bottom: 0;*/
/*}*/
/*.we-ibox-title2 {	!* ibox-title 하위에 버튼(ibox-tools) 있음 *!*/
/*	min-height: 34px;*/
/*	padding-top: 0;*/
/*	padding-bottom: 0;*/
/*}*/

.we-nobox {
	margin: 0;
	border: 0;
	padding: 0;
}
.we-nobox-top {
	margin-top: 0;
	border-top: 0;
	padding-top: 0;
}
/* .we-nobox-right { */
/* 	margin-right: 0; */
/* 	border-right: 0; */
/* 	padding-right: 0; */
/* } */
/* .we-nobox-bottom { */
/* 	margin-bottom: 0; */
/* 	border-bottom: 0; */
/* 	padding-bottom: 0; */
/* } */
/* .we-nobox-left { */
/* 	margin-left: 0; */
/* 	border-left: 0; */
/* 	padding-left: 0; */
/* } */
/* .we-nobox-tb { */
/* 	margin-top: 0; */
/* 	margin-bottom: 0; */
/* 	border-top: 0; */
/* 	border-bottom: 0; */
/* 	padding-top: 0; */
/* 	padding-bottom: 0; */
/* } */
/* .we-nobox-rl { */
/* 	margin-right: 0; */
/* 	margin-left: 0; */
/* 	border-right: 0; */
/* 	border-left: 0; */
/* 	padding-right: 0; */
/* 	padding-left: 0; */
/* } */

.we-nomar {
	margin: 0;
}
/* .we-nomar-top { */
/* 	margin-top: 0; */
/* } */
/* .we-nomar-right { */
/* 	margin-right: 0; */
/* } */
/* .we-nomar-bottom { */
/* 	margin-bottom: 0; */
/* } */
/* .we-nomar-left { */
/* 	margin-left: 0; */
/* } */
/* .we-nomar-tb { */
/* 	margin-top: 0; */
/* 	margin-bottom: 0; */
/* } */
/* .we-nomar-rl { */
/* 	margin-right: 0; */
/* 	margin-left: 0; */
/* } */

/* .ibox.we-nobox { */
/* 	margin-bottom: 0 !important; */
/* } */
/* .ibox.we-nobox-bottom { */
/* 	margin-bottom: 0 !important; */
/* } */
/* .ibox.we-nobox-tb { */
/* 	margin-bottom: 0 !important; */
/* } */
/* .ibox.we-nomar { */
/* 	margin-bottom: 0 !important; */
/* } */
/* .ibox.we-nomar-bottom { */
/* 	margin-bottom: 0 !important; */
/* } */
/* .ibox.we-nomar-tb { */
/* 	margin-bottom: 0 !important; */
/* } */

/* .we-nobor { */
/* 	border: 0; */
/* } */
.we-nobor-top {
	border-top: 0;
}
/* .we-nobor-right { */
/* 	border-right: 0; */
/* } */
/* .we-nobor-bottom { */
/* 	border-bottom: 0; */
/* } */
/* .we-nobor-left { */
/* 	border-left: 0; */
/* } */
/* .we-nobor-tb { */
/* 	border-top: 0; */
/* 	border-bottom: 0; */
/* } */
/* .we-nobor-rl { */
/* 	border-right: 0; */
/* 	border-left: 0; */
/* } */

.we-nopad {
	padding: 0;
}
.we-nopad-top {
	padding-top: 0;
}
.we-nopad-right {
	padding-right: 0;
}
.we-nopad-bottom {
	padding-bottom: 0;
}
.we-nopad-left {
	padding-left: 0;
}
.we-nopad-tb {
	padding-top: 0;
	padding-bottom: 0;
}
.we-nopad-rl {
	padding-right: 0;
	padding-left: 0;
}

/* .ibox:not(.we-page-header) .ibox-title { */
/* 	min-height: 34px; */
/* 	padding-top: 0; */
/* 	padding-bottom: 0; */
/* } */

.we-page-header .ibox-title {	/* todo */
	min-height: 40px;
}

.we-slice-h {
	flex: 1;
	display: flex;
	flex-direction: row;
}

.we-slice-v {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.we-section-pane {
	background-color: #fff;
	padding-left: 0;
	padding-right: 0;
	flex: 1;
}

/* 패턴 지정 불가 */
/* .we-section-pane .ibox .ibox-content { */
/* 	border-top: 0; */
/* } */

.we-slice-h .we-section-pane {
	height: 100%;
}

.we-slice-h .we-slice-v {
	height: 100%;
}

.we-section-line-h {
	height: 2px;
	width: 100%;
	background-color: #f3f3f4;
}

.we-section-line-v {
	width: 2px;
	height: 100%;
	background-color: #f3f3f4;
}

/* .we-section-bottom { */
/* } */

/* .we-section-left { */
/* } */

/* .we-page-bottom { */
/* 	margin-bottom: 2px; */
/* } */

/* div.we-section-bottom { */
/* 	padding-bottom: 2px; */
/* } */

/* div.we-section-left { */
/* 	padding-left: 2px; */
/* } */

.we-tab-container {
}

.ibox-content.we-tab-container {
	padding-top: 3px;
}

.tab-pane .ibox .ibox-title .ibox-tools {
	right: 0;
}

.tab-pane-content .ibox .ibox-title {
	padding-right: 0;
	padding-left: 0;
}

.tab-pane-content {
	padding-top: 10px;
}
/* todo - ibox-tools를 버튼 패널로 사용할 경우 CD_MNG.vue.jsp */
/* 추가 by rum */


/** 메인 페이지 테마센택, 언어선택 등 선택 버튼 **/
.we-select-button {
	font-size: var(--we-font-size);
	background-color: var(--we-background-color);
	color: var(--we-text-color);
	border-radius: 8px;
	appearance: auto;
	margin: 0 2px;
}

/** 사진 관련 **/
/* ul */
.photo-image-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	list-style-type: none;
	padding: 0;
}

.photo-image-list li {
	position: relative;
	margin-left: 5px;
	margin-top: 5px;
	border: 1px solid silver;
	border-radius: 5px;
	height: 100%;
	overflow: hidden;
}

.photo-image-list li img {
	object-fit: contain;
	width: 75px;
	height: 100px;
}

.photo-image-list-delete {
	position: absolute;
	top: 1px;
	right: 3px;
	z-index: 5;
	color: red;
	font-size: 22px;
	font-weight: bold;
}

.photo-add-button {
	float: right;
	color: var(--we-button-background-color);
	font-size: 1.5em;
	padding-right: 5px;
}

.photo-add-button i {
	padding-right: 5px;
}

.photo-image-list-download {
	padding: 0 3.5px;
	position: absolute;
	bottom: 2px;
	right: 2px;
	z-index: 5;
	color: #000089;
	font-size: 16px;
	font-weight: bold;
	border: 1px solid #7e7e7e;
	border-radius: 20px;
	background-color: white;
}