@charset "utf-8";

@font-face{
	font-family: 'NanumGothic';
	src: url('/resources/css/NanumGothic-Regular.ttf');
}

@font-face{
	font-family: 'NanumGothic-Bold';
	src: url('/resources/css/NanumGothic-Bold.ttf');
}

:root{
	--menu-width: 260px;
}

[data-bs-theme=light] {
	--color-paran: #203864;
	--color-main: #0070D2;
	--color-main-secondary: #8bbcef;
	--color-main-rgb: 0, 112, 210;
	--color-white: #fff;
	--color-dark: #404040;
	--color-link: #478ECB;
	--color-red: #EA4335;
	--color-active: #0070D2;
	--color-sub-active: #ADB5BD;
	--bg-color-active: #FBFBFB;
	--icon-color-gray: #7F7F7F;
	--hover-bg-color: #f0f8ff;
	--active-bg-color: #f0f8ff;
	--bg-color-gray: #E3E3E3;
	--modal-header-bg: #E8ECF2;
	--shadow-color-rgb: 53, 75, 96;
	--alert-color: #404040;
	--bg-focus-primary: #103F84;
	--color-focus-primary: #F98E01;
	--color-light: #f8f9fa;
	--color-lighter: #f7f8f9;
	--color-black: #000000;
	--color-sub-primary: #e1eeff;
	--color-project-sub-name: #ffffff;
	--color-menu-bg: #211c52;
	--color-toggle-bg: #ffffff;

	/* Bootstrap Custom */
	--bs-main-rgb: 0, 112, 210;
	--bs-body-color-rgb: 255,255,255;
	--bs-body-bg-rgb: 234, 238, 243;
	--bs-white-rgb: 255,255,255;
	--stroke-light-rgb: 238, 238, 238;
	--bs-dark-rgb: 0, 0, 0;
	--bs-primary-rgb: 0, 112, 210;
	--bs-card-login-bg: #f8f9fa;
	
	--select-arrow-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>');

	/* 234 238 243 */
}

[data-bs-theme=dark] {
	--color-paran: #ffffff;
	--color-main: #0070D2;
	--color-main-secondary: #8bbcef;
	--color-main-rgb: 0, 112, 210;
	--color-white: #fff;
	--color-dark: var(--bs-body-color);
	--color-link: #478ECB;
	--color-red: #EA4335;
	--color-active: #f0f8ff;
	--color-sub-active: #ADB5BD;
	--bg-color-active: #404040;
	--icon-color-gray: #7F7F7F;
	--hover-bg-color: #354b60;
	--active-bg-color: #354b60;
	--bg-color-gray: #404040;
	--modal-header-bg: #404040;
	--alert-color: #E8ECF2;
	--bg-focus-primary: #103F84;
	--color-focus-primary: #F98E01;
	--color-light: #343a40;
	--color-lighter: #293038;
	--color-black: #f8f9fa;
	--color-sub-primary: #404040;
	--shadow-color-rgb: 0, 0, 0;
	--color-project-sub-name: #000000;
	--color-menu-bg: #343a40;
	--color-toggle-bg: #f0f8ff;

	/* Bootstrap Custom */
	--bs-main-rgb: 0, 112, 210;
	--bs-white-rgb: 33,37,41;
	--bs-body-bg-rgb: 64,64,64;
	--bs-btn-close-color: var(--icon-color-gray);
	--stroke-light-rgb: 68, 68, 68;
	--bs-dark-rgb: 173, 181, 189;
	--bs-primary-rgb: 240, 248, 255;

	--bs-card-login-bg: #212529;
	
	--select-arrow-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23adb5bd" d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>');
}

/* Base */
body {
	/*background-color:var(--color-white);*/
}

[data-bs-theme=light] body.hs-bg-white{
	--bs-body-bg-rgb: 255, 255, 255;
}

body.modal-open{
	overflow: unset!important;
}

body.modal-open.maximize {
	overflow: hidden!important;
}

.hs-icon-dark{
	display:none;
}

.hs-icon-light{
	display:unset;
}

[data-bs-theme=light] .hs-icon-dark{
	display:none!important;
}
[data-bs-theme=light] .hs-icon-light{
	display:unset!important;
}

[data-bs-theme=dark] .hs-icon-light{
	display:none!important;
}
[data-bs-theme=dark] .hs-icon-dark{
	display:unset!important;
}

.bg {
	display: none!important;
	position: fixed;
}

/*
.bg::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
}
.bg::after {
	background-color:unset;
	content: '';
	color: unset;
	font-weight: 900;
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	height: 48px;
	width: 48px;
}
[data-bs-theme=light] .bg::after{
	background: url(/resources/images/hs_light.svg);
	background-repeat: round;
}

[data-bs-theme=dark] .bg::after{
	background: url(/resources/images/hs_gray.svg);
	background-repeat: round;
}


.bg.iruja::after{
	height: 92px;
	width: 92px;
}

[data-bs-theme=light] .bg.iruja::after{
	background: url(/resources/images/on-premise/iruja/iruja_white.svg);
	background-repeat: round;
}

[data-bs-theme=dark] .bg.iruja::after{
	background: url(/resources/images/on-premise/iruja/iruja_gray.svg);
	background-repeat: round;
}
*/
/* Hide Arrows */
/* 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;
}

a {
	color: var(--color-link);
	text-decoration: none;
}

a:not([disabled]):hover {
	text-decoration: underline;
}

.xsmall{
	font-size: 75%;
}

.text-main {
	color: var(--color-dark);
}

.text-sub-project-name {
	color: var(--color-project-sub-name);
}

.text-red {
	color: var(--color-red);
}
.text-paran{
	color: var(--color-paran);
}

.modal.window {
	left:unset;
	top:unset;
	right:20px;
	bottom:0;
	width:450px;
	height:unset;
	z-index: var(--bs-modal-zindex);
	position: inherit;
	margin: 0 10px;
	max-height:800px;
	border-top-left-radius: var(--bs-border-radius-xl)!important;
	border-top-right-radius: var(--bs-border-radius-xl)!important;
}

.modal.window .modal-dialog{
	margin: 0;
}

.modal.window .btn-window{
	display:none;
}

.modal-backdrop.maximize {
	z-index: 1071;
}

.modal.maximize {
	left:0;
	top:0;
	right:unset;
	bottom:unset;
	width:100%;
	height:100%;
	z-index: 1072;
}
.modal.fullscreen {
	left: 0;
    top: 0;
    right: unset;
    bottom: unset;
    width: 100%;
    height: 100%;
	z-index: 1080;
}

.modal.minimize {
	display:none!important;
}

.modal.maximize .btn-maximize{
	display:none;
}

.modal.window.fade-up {
	transform: translate(0, 50px);
	transition: transform 0.3s;
}

.modal.window.fade-up.show {
  transform: translate(0, 0);
}

.modal.maximize:not(.fullscreen) .modal-header{
	cursor: move;
}

.modal-header {
	background-color: var(--modal-header-bg);
	padding: 10px 15px;
}

.bg-header {
	background-color: var(--modal-header-bg);
}

.scrollbar-width-thin{
	scrollbar-width:thin;
}


.modal-body-popup{
	max-height: 600px;
	min-height: 250px;
	overflow: auto;
}

.modal-title-link {
	color: var(--color-link);
	text-decoration: none;
	cursor: pointer;
}

.modal-title-link:not([disabled]):hover {
	text-decoration: underline;
}

.modal-backdrop.show {
	opacity: 0.4;
	background-color:var(--color-white);
}

.dropdown-menu {
	z-index: 1070 !important;
	/**max-height: 360px;*/
	overflow: auto;
}

.text-gray{
	color: var(--icon-color-gray);
}

.btn-toggle {
	background-color: var(--color-toggle-bg)!important;
	border-color: var(--color-main)!important;
	color:var(--color-main)!important;
	text-decoration: none!important;
}
.btn-toggle span.badge{
	color:var(--color-main)!important;
}

.btn-toggle.active{
	background-color: var(--color-main)!important;
	border-color: var(--color-main)!important;
	color:#fff!important;
}

.btn-toggle.active span.badge{
	color:#fff!important;
}

.btn-main {
	background-color: var(--color-main)!important;
	border-color: var(--color-main);
	color:#fff;
}

.btn-main:not([disabled]):active,
.btn-main:not([disabled]):focus,
.btn-main:not([disabled]):hover {
	background-color: #0146d2;
	border-color: #0146d2;
	color: #fff;
}

.btn-main.disabled {
	background-color: #8391A2 !important;
	border-color: #8391A2 !important;
	color: #fff !important;
	opacity: 1 !important;
}

.btn.selected {
	border-color:var(--color-active);
	background-color: var(--active-bg-color);
}

.btn-outline-main {
	/*background-color: #fff;*/
	border-color: var(--color-link);
	color: var(--color-link);
	/*text-decoration: unset;*/
}

.btn-outline-main:not([disabled]):focus{
	background-color: var(--hover-bg-color);
	border-color: var(--color-link);
	color: var(--color-link);
	text-decoration: unset;
}

.btn-outline-main:not([disabled]):active,
.btn-outline-main:not([disabled]):hover {
	background-color: var(--hover-bg-color);
	border-color: var(--color-link);
	color: var(--color-link);
	text-decoration: underline;
}

.btn-main-check {
	background-color: var(--bs-body-bg);
	border: var(--bs-border-width) solid var(--bs-border-color);
	color:var(--color-dark);
}

.btn-check:checked+.btn {
	background-color: var(--bs-body-bg);
	/*color: var(--bs-btn-active-border-color);*/
	color: var(--color-link);
	border-color: var(--color-link);
}

.btn-check:checked+.btn:before {
	content: "\f00c";
	font-family: 'Font Awesome 5 Free';
	font-size: 1.0em;
	font-weight: 900;
	margin-right: 4px;
	position: absolute;
	left: 10px;
}

.btn.circle-pill{
	min-height:32px;
	min-width:32px;
}
.btn-check:checked+.btn.circle-pill:before {
	content: "\f111";
	font-family: 'Font Awesome 5 Free';
	left: 7px;
	top: 3px;
}


.btn-secondary {
	background-color: #8391A2!important;
	border-color: #8391A2;
	color:#fff!important;
}

.btn-secondary:not([disabled]):active,
.btn-secondary:not([disabled]):focus,
.btn-secondary:not([disabled]):hover {
	background-color: #323a46;
	border-color: #323a46;
	color: #fff;
}

.btn-secondary.disabled, .btn-secondary:disabled {
	background-color: #8391A2!important;
	border-color: #8391A2!important;
	color:#fff!important;
	opacity:1!important;
}

.btn-outline-secondary {
	/*background-color: #fff;*/
	border-color: var(--bs-border-color);
	/*color: var(--color-link);*/
	/*text-decoration: unset;*/
}

.btn-outline-secondary:not([disabled]):focus{
	background-color: var(--hover-bg-color);
	border-color: var(--bs-border-color);
	color: var(--color-link);
	text-decoration: unset;
}

.btn-outline-secondary:not([disabled]):active,
.btn-outline-secondary:not([disabled]):hover {
	background-color: var(--hover-bg-color);
	border-color: var(--bs-border-color);
	color: var(--color-link);
	text-decoration: underline;
}

.router-link.btn-icon{
	text-decoration: none!important;
}
.btn-link.btn-icon{
	text-decoration: none!important;
}

.btn-link:not(.popup-link):not(.link-logout)::before{
	content: "\f35d";
	font-family: 'Font Awesome 5 Free';
	font-size: 1.0em;
	font-weight: 900;
	margin-right: 4px;
	opacity: .6;
}

.btn-text {
	border-width: 0px;
	color: var(--color-link);
}

.btn-text:not([disabled]):active,
.btn-text:not([disabled]):focus,
.btn-text:not([disabled]):hover {
	color: var(--color-link);
	text-decoration: underline;
	background-color: var(--hover-bg-color);
}

.btn-icon{
	--bs-btn-color: var(--icon-color-gray);
	/*--bs-btn-bg: #fff;
	--bs-btn-border-color: #fff;*/
	--bs-btn-hover-color: #000;
	--bs-btn-hover-bg: var(--hover-bg-color);
	--bs-btn-hover-border-color: var(--hover-bg-color);
	--bs-btn-focus-shadow-rgb: 211,212,213;
	--bs-btn-active-color: #000;
	--bs-btn-active-bg: var(--hover-bg-color);
	--bs-btn-active-border-color: var(--hover-bg-color);
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: #000;
	--bs-btn-disabled-bg: #f8f9fa;
	--bs-btn-disabled-border-color: #f8f9fa;
}

.bg-menu-shortcut{
	background-color: var(--color-menu-bg) !important;
}

.btn-menu-shortcut{
	--bs-btn-color: #ffffff;
	--bs-btn-hover-color: #ffffff;
	--bs-btn-hover-bg: #ab9ffb;
	--bs-btn-hover-border-color: #ab9ffb;
	--bs-btn-focus-shadow-rgb: 211,212,213;
	--bs-btn-active-color: #ffffff;
	--bs-btn-active-bg: #6962f2;
	--bs-btn-active-border-color: #6962f2;
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: #000;
	--bs-btn-disabled-bg: #f8f9fa;
	--bs-btn-disabled-border-color: #f8f9fa;
}

.scroll-hidden{
	-ms-overflow-style: none; /* Hides the scrollbar in IE and Edge */
	scrollbar-width: none; /* Firefox */
}
.scroll-hidden::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.btn-outline-dark{
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #354b60;
	--bs-btn-hover-border-color: #354b60;
}

.btn-white {
	/*--bs-btn-color: #000;*/
	/*--bs-btn-bg: #fff;*/
	/*--bs-btn-border-color: #fff;*/
	/*--bs-btn-hover-color: #000;*/
	--bs-btn-hover-bg: var(--hover-bg-color);
	--bs-btn-hover-border-color: var(--hover-bg-color);;
	--bs-btn-focus-shadow-rgb: 211,212,213;
	--bs-btn-active-color: #000;
	--bs-btn-active-bg: #c6c7c8;
	--bs-btn-active-border-color: var(--hover-bg-color);;
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: #000;
	--bs-btn-disabled-bg: #f8f9fa;
	--bs-btn-disabled-border-color: #f8f9fa;
}

.btn-menu {
	/*--bs-btn-color: #000;*/
	/*--bs-btn-bg: #fff;*/
	/*--bs-btn-border-color: #fff;*/
	/*--bs-btn-hover-color: #000;*/
	/*--bs-btn-hover-bg: #fff;*/
	--bs-btn-hover-border-color: #fff;
	--bs-btn-focus-shadow-rgb: 211,212,213;
	/*--bs-btn-active-color: #000;*/
	/*--bs-btn-active-bg: var(--bg-color-active);*/
	--bs-btn-active-border-color: #fff;
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: #000;
	--bs-btn-disabled-bg: #f8f9fa;
	--bs-btn-disabled-border-color: #f8f9fa;
	min-width: 120px;
	border-top: 3px var(--bs-border-style) transparent!important;
}
#HS_TOP_menuHorizontal .btn-menu{
	max-width: 200px;
}

.btn-menu:not([disabled]):hover {
	text-decoration: underline;
}

.btn-menu-icon{
	margin-left: -30px;
}


.btn-dark {
	--bs-btn-bg: var(--modal-header-bg);;
	--bs-btn-border-color: unset;
	--bs-btn-color: var(--alert-color);
}

.menu.selected .btn-menu:not([disabled]) {
	font-weight: 700!important;
	color: var(--color-active);
	background-color: var(--bg-color-active);
	border-top: 3px var(--bs-border-style) var(--color-active)!important;
}

.menu .btn-menu.active:not([disabled]) {
	font-weight: 700!important;
	color: var(--color-active);
	background-color: var(--bg-color-active);
	border-top: 3px var(--bs-border-style) var(--color-active)!important;
}

.menu-vertical .btn-menu{
	border-left: 3px var(--bs-border-style) transparent!important;
}

.menu-vertical.selected .btn-menu:not([disabled]) {
	font-weight: 700!important;
	color: var(--color-white);
	background-color: var(--color-dark);
	border-left: 3px var(--bs-border-style) var(--color-active)!important;
	border-top: 0 solid transparent!important;
}

.sub-menu.selected .btn-menu:not([disabled]) {
	font-weight: 700!important;
	color: var(--color-dark);
	border-bottom: 3px var(--bs-border-style) var(--color-sub-active)!important;
	min-width: unset;
}

.menu-vertical .btn-menu.sub-left-menu {
	padding-left: 30px!important;
}

.menu-vertical.selected .btn-menu.sub-left-menu {
	background-color: var(--color-sub-active);
	border-left: 3px solid transparent !important;
}

.sub-nav{
	border-bottom: 2px var(--bs-border-style) var(--bs-border-color)!important;
}
.sub-nav > .sub-nav-div{
	margin-bottom: -2px;
}

.sub-menu .btn-menu.active:not([disabled]) {
	font-weight: 700 !important;
	color: var(--color-dark);
	border-bottom: 3px var(--bs-border-style) var(--color-sub-active) !important;
	min-width: unset;
}

.btn-menu.reverse {
	min-width: unset;
	border-bottom: unset;
	border-bottom: 3px var(--bs-border-style) transparent!important;
}

.btn-footer {
	min-width: 120px;
	border-bottom: 3px var(--bs-border-style) transparent!important;
}

.btn-footer:not([disabled]):hover {
	text-decoration: underline;
}

.btn-footer:not([disabled]).show {
	font-weight: 700!important;
	color: var(--color-active);
	background-color: var(--bg-color-active);
	border-bottom: 3px var(--bs-border-style) var(--color-active)!important;
}

.btn-feature-tab {
	background-color: transparent !important;
	border-bottom: 3px var(--bs-border-style) var(--bs-border-color)!important;
}

.btn-feature-tab:not([disabled]):hover {
	text-decoration: underline;
}

.btn-feature-tab:not([disabled]).active {
	font-weight: 700!important;
	color: var(--color-active);
	background-color: var(--bg-color-active);
	border-bottom: 3px var(--bs-border-style) var(--color-active)!important;
}

.tr-more-menu .btn-more-menu{
	display:none;
}

@media (hover: hover) {
	.tr-more-menu:hover .btn-more-menu{
		display:block;
	}
}

/*
.tr-more-menu.selected{
	position:relative;
}
.tr-more-menu.selected:after{
	content:'';
	border: 2px solid rgba(var(--bs-primary-rgb), var(--bs-bg-opacity));
	position: absolute;
	left: 2px;
	top: 2px;
	width: calc(100% - 4px);
	height: calc(100% - 4px);
	border-radius: var(--bs-border-radius);
}
*/

.tr-more-menu.selected > td:not(:last-child) {
	position: relative;
}

.tr-more-menu.selected > td:first-child:after{
	content:'';
	border: 2px solid rgba(var(--bs-primary-rgb), var(--bs-bg-opacity));
	border-right: 0px;
	position: absolute;
	left: 2px;
	top: 2px;
	width: calc(100%);
	height: calc(100% - 4px);
	border-top-left-radius: var(--bs-border-radius);
	border-bottom-left-radius: var(--bs-border-radius);
}

.tr-more-menu.selected > td:nth-last-child(2):after{
	content:'';
	border: 2px solid rgba(var(--bs-primary-rgb), var(--bs-bg-opacity));
	border-left: 0px;
	position: absolute;
	left: 0px;
	top: 2px;
	width: calc(100% - 2px);
	height: calc(100% - 4px);
	border-top-right-radius: var(--bs-border-radius);
	border-bottom-right-radius: var(--bs-border-radius);
}

.tr-more-menu.selected > td:nth-child(n+2):nth-last-child(n+3):after{
	content:'';
	border: 2px solid rgba(var(--bs-primary-rgb), var(--bs-bg-opacity));
	border-left: 0px;
	border-right: 0px;
	position: absolute;
	left: 0px;
	top: 2px;
	width: 100%;
	height: calc(100% - 4px);
}

button.btn-tab {
	color: var(--icon-color-gray) !important;
}
button.btn-tab.active {
	color: var(--color-dark) !important;
	background-color: var(--color-lighter) !important;
	font-weight: 700;
}

div.sub-left-menu{
	background-color: var(--color-light) !important;
}

div.sub-left-menu i {
	width: 35px;
	text-align: center;
}
div.dropdown-item-icon i {
	width: 25px;
	text-align: center;
}

div.sub-left-menu.selected{
	background-color: var(--color-sub-primary) !important;
	/*background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;*/
}

div.sub-left-menu .router-link{
	color: var(--color-black) !important;
}

div.sub-left-menu.selected .router-link{
	color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
}

.btn-link{
	color: var(--color-link);
	text-decoration: none;
}

.btn-link:not([disabled]):hover,
.btn-link:not([disabled]):focus,
.btn-link:not([disabled]):active {
	color: var(--color-link);
	text-decoration: underline;
	background-color: var(--hover-bg-color);
}

.required-label::after {
	content: "";
	display: inline-block;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background-color: var(--color-red);
	margin-left: 3px;
	margin-bottom: 6px;
}

/* 입력박스 쉐도우 스타일 */
#HS_TASK_MODAL_AREA input:not(.normal-control), #HS_TASK_MODAL_AREA textarea, #HS_TASK_MODAL_AREA select{
	box-shadow: none!important;	
}


/* 라디오, 체크박스 스타일 */
input[type=radio],
input[type=checkbox]:not(.normal-control):not([role='switch']){overflow:hidden;visibility:hidden;width:0;height:0;margin:-1px;appearance:none;-moz-appearance:none;-webkit-appearance:none;font-size:0;line-height:0;opacity:0;}
input[type=checkbox].input-type01 + label{display:inline-block;height:20px;padding-left:27px;background:url('../images/bg_input_type_01.png') no-repeat 0 0;background-size:20px 40px;line-height:20px;vertical-align:top;background-position: 0 0;}
input[type=checkbox].input-type01:checked + label{background-position:0 -20px;}
input[type=checkbox].input-type02 + label{display:inline-block;height:30px;background:url('../images/bg_input_type_01.png') no-repeat 0 0;background-size:30px 60px;line-height:30px;vertical-align:top;text-align: left;width: 100%;background-position: 100% 0;}
input[type=checkbox].input-type02 + label.align-right{text-align: right;width:50%;padding-right: 40px;}
input[type=checkbox].input-type02:checked + label{background-position:100% -30px;}
input[type=checkbox].wide + label{width:100%;background-position: 50% 0;}
input[type=checkbox].wide:checked + label{background-position:50% -20px;}
input[type=radio].input-type01 + label{display: inline-block;height: 30px;margin: 10px 0;background: url(../images/bg_input_type_02.png) no-repeat 0 0;background-size: 30px 60px;line-height: 30px;vertical-align: top;text-align: left;width: 100%;background-position: 100% 0;}
input[type=radio].input-type01:checked + label{background-position:100% -30px;}
label + input + label{margin-left:26px;}
input[type=radio].input-type02 + label{display:inline-block;height:20px;padding-left:27px;background:url('../images/bg_input_type_03.png') no-repeat 0 0;background-size:20px 40px;line-height:20px;vertical-align:top;}
input[type=radio].input-type02:checked + label{background-position:0 -20px;}
label + input + label{margin-left:26px;}

.custom-checkbox {
	padding-left: 2.5em;
}
.custom-checkbox .custom-control-label {
	height: 1.8rem;
}
.custom-checkbox .custom-control-label::before {
	content: "";
	width: 1.8rem;
	height: 1.8rem;
	position: absolute;
	display: block;
	border: var(--bs-border-width) solid var(--bs-border-color);
	border-radius: var(--bs-border-radius);
	left: 0.7rem;
	background-color: var(--bs-body-bg);
}

.custom-checkbox .custom-control-label.small::before {
	content: "";
	width: 1.1rem;
	height: 1.1rem;
	position: absolute;
	display: block;
	border: var(--bs-border-width) solid var(--bs-border-color);
	border-radius: var(--bs-border-radius);
	left: 0.7rem;
	background-color: var(--bs-body-bg);
}

.custom-control-input:checked~.custom-control-label::before {
	border: var(--bs-border-width) solid #007bff;
}

.custom-control-input:checked~.custom-control-label::after {
	content: "\f00c";
	font-family: 'Font Awesome 5 Free';
	font-size: 1.2em;
	color: #007bff;
	font-weight: 900;
	position: absolute;
	display: inline-block;
	left:1.1rem;
	margin-top: 2px;
}

.custom-control-input:checked~.custom-control-label.small::after {
	content: "\f00c";
	font-family: 'Font Awesome 5 Free';
	font-size: 1.0em;
	color: #007bff;
	font-weight: 900;
	position: absolute;
	display: inline-block;
	left:0.9rem;
	margin-top: 2px;
}

.custom-radio {
	padding-left: 2.5em;
	position: relative;
}
.custom-radio .custom-control-label {
	height: 1.8rem;
}
.custom-radio .custom-control-label::before {
	content: "";
	width: 1.8rem;
	height: 1.8rem;
	position: absolute;
	display: block;
	border: var(--bs-border-width) solid var(--bs-border-color);
	border-radius: var(--bs-border-radius-pill);
	left: 0;
	background-color: var(--bs-body-bg);
}

.custom-control-radio:checked~.custom-control-label::before {
	border: var(--bs-border-width) solid #007bff;
	border-radius: var(--bs-border-radius-pill) !important;
}

.custom-control-radio:checked~.custom-control-label::after {
	content: "\f111";
	font-family: 'Font Awesome 5 Free';
	font-size: 1.2em;
	color: #007bff;
	font-weight: 900;
	position: absolute;
	display: inline-block;
	left:6px;
	margin-top: 1px;
}

.custom-dropdown-toggle{
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: var(--select-arrow-image);
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size:14px;
	padding-right: 25px;
}


.form-control.is-valid, .was-validated .form-control:valid {
	border-color: var(--bs-border-color);
}

.btn-img-gallery {
	--bs-btn-color: var(--icon-color-gray);
	/*--bs-btn-bg: #fff;
	--bs-btn-border-color: #fff;*/
	--bs-btn-hover-color: #000;
	--bs-btn-hover-bg: var(--hover-bg-color);
	--bs-btn-hover-border-color: var(--hover-bg-color);
	--bs-btn-focus-shadow-rgb: 211,212,213;
	--bs-btn-active-color: #000;
	--bs-btn-active-bg: var(--hover-bg-color);
	--bs-btn-active-border-color: var(--hover-bg-color);
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: #000;
	--bs-btn-disabled-bg: #f8f9fa;
	--bs-btn-disabled-border-color: #f8f9fa;
	padding:0px;
	overflow:hidden;
}
.btn-img-gallery > img:hover{
	-webkit-transform: scale(1.25);
	-moz-transform: scale(1.25);
	-o-transform: scale(1.25);
	-ms-transform: scale(1.25);
	transform: scale(1.25);
}

@keyframes spinning {
	from { transform: rotate(0deg) }
	to { transform: rotate(360deg) }
}
.spin {
	animation-name: spinning;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
 }

.btn.running{
	pointer-events: none;
	opacity: var(--bs-btn-disabled-opacity);
}

.btn.running:not(.no-running)::before {
	content: "\f1ce";
	font-family: 'Font Awesome 5 Free';
	color: inherit;
	font-weight: 900;
	position: static;
	display: inline-block;
	margin-right: 5px;
	animation-name: spinning;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

#BADGE_LIST{
	position: fixed;
	bottom: 0;
	left:0;
	z-index:99999;
}

.alert-custom {
	--bs-alert-color: var(--alert-color);
	--bs-alert-bg: var(--alert-color);
	--bs-alert-link-color: var(--alert-color);
	color: var(--modal-header-bg);
}

.btn-close{
	--bs-btn-close-bg: unset;
	--bs-btn-close-opacity: unset;
	filter: none!important;
	margin: unset!important;
}

.start-80 {
	left: 80%!important
}
.bg-danger {
	background-color: var(--color-red)!important;
}

#MES_TOP_btnSearch > i{
	font-size: 1.25em;
}

.fa-125x{
	font-size: 1.25em;
}

.text-dark{
	color: var(--color-dark)!important;
	fill: var(--color-dark)!important;
}

.text-link{
	color: var(--color-link)!important;
	fill: var(--color-link)!important;
}

.color-badge-btn-close{
	color: rgba(var(--bs-danger-rgb),var(--bs-text-opacity))!important;
	cursor: pointer;
}

.page-footer{
	height: 48px;
}

.footer-text{
	color: #7F7F7F;
	font-weight: 900;
}

.shadow-main{
	/*box-shadow: 0 0 0.5rem rgba(0,0,0,.35)!important;*/
	box-shadow: 0 0 0.5rem rgba(var(--shadow-color-rgb), .8)!important;
}

.shadow-main-sm{
	/*box-shadow: 0 0 0.5rem rgba(0,0,0,.35)!important;*/
	box-shadow: 0 0 0.3rem rgba(var(--shadow-color-rgb), .8)!important;
}

.fa-lg {
	line-height: 0.75em;
}

.table-fix-head > thead > tr {
	position: sticky;
	top: 0;
	z-index: 1;
}

.table > tbody > tr:last-child{
	border-bottom: 0 solid transparent;
}

.table > tbody > tr > td{
	padding: 0.3rem 0.5rem;
}

.table > tbody {
	border-top-color: var(--bs-border-color);
}

.w-3{ width: 3%!important; }
.w-5{ width: 5%!important; }
.w-10{ width: 10%!important; }
.w-15{ width: 15%!important; }
.w-20{ width: 20%!important; }
.w-25{ width: 25%!important; }
.w-30{ width: 30%!important; }
.w-35{ width: 35%!important; }
.w-40{ width: 40%!important; }
.w-45{ width: 45%!important; }
.w-50{ width: 50%!important; }
.w-55{ width: 55%!important; }
.w-60{ width: 60%!important; }
.w-65{ width: 65%!important; }
.w-70{ width: 70%!important; }
.w-75{ width: 75%!important; }
.w-80{ width: 80%!important; }
.w-85{ width: 85%!important; }
.w-90{ width: 90%!important; }
.w-95{ width: 95%!important; }
.w-100{ width: 100%!important; }


.mw-3{ max-width: 3%!important; }
.mw-5{ max-width: 5%!important; }
.mw-10{ max-width: 10%!important; }
.mw-15{ max-width: 15%!important; }
.mw-20{ max-width: 20%!important; }
.mw-25{ max-width: 25%!important; }
.mw-30{ max-width: 30%!important; }
.mw-35{ max-width: 35%!important; }
.mw-40{ max-width: 40%!important; }
.mw-45{ max-width: 45%!important; }
.mw-50{ max-width: 50%!important; }
.mw-55{ max-width: 55%!important; }
.mw-60{ max-width: 60%!important; }
.mw-65{ max-width: 65%!important; }
.mw-70{ max-width: 70%!important; }
.mw-75{ max-width: 75%!important; }
.mw-80{ max-width: 80%!important; }
.mw-85{ max-width: 85%!important; }
.mw-90{ max-width: 90%!important; }
.mw-95{ max-width: 95%!important; }
.mw-100{ max-width: 100%!important; }

td > div.d-flex > a.text-truncate {
	display: inline-block;
	max-width: 400px;
}

td > a.text-truncate {
	display: inline-block;
	max-width: 400px;
}

.btn-arrow-start:before{
	content: "";
	position: absolute;
	top: 0px;
	height: 100%;
	width: 16px;
	background: inherit;
	border: inherit;
	border-radius: var(--bs-border-radius)!important;
	left: -4px;
}
.btn-arrow-right:before,
.btn-arrow-square-end:before,
.btn-arrow-end:before{
	content: "";
	position: absolute;
	top: 5px;
	height: 26px;
	width: 26px;
	background: var(--bs-body-bg);
	border: 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	left: -14px;
}

.btn-arrow-right:after,
.btn-arrow-start:after{
	content: "";
	position: absolute;
	top: 5.28px;
	height: 25.4px;
	width: 25.4px;
	background: inherit;
	border: inherit;
	transform: rotate(45deg);
	right: -12.7px;
	z-index: 2;
	border: 0;
}

.btn-arrow-right.btn-state-sm:before,
.btn-arrow-square-end.btn-state-sm:before,
.btn-arrow-end.btn-state-sm:before{
	content: "";
	position: absolute;
	top: 3px;
	height: 12px;
	width: 12px;
	background: var(--bs-body-bg);
	border: 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	left: -6px;
}

.btn-arrow-right.btn-state-sm:after,
.btn-arrow-start.btn-state-sm:after{
	content: "";
	position: absolute;
	top: 3.0px;
	height: 12px;
	width: 12px;
	background: inherit;
	/* border: inherit; */
	transform: rotate(45deg);
	right: -6.0px;
	z-index: 2;
	border: 0;
}

.btn-arrow-end:after{
	content: "";
	position: absolute;
	top: 0px;
	height: 100%;
	width: 16px;
	background: inherit;
	border: inherit;
	right: -4px;
	z-index: 2;
	border-radius: var(--bs-border-radius)!important;
}

.btn-arrow-finish-end:after{
	content: "";
	position: absolute;
	top: 0px;
	height: 100%;
	width: 16px;
	background: inherit;
	border: inherit;
	right: -4px;
	z-index: 2;
	border-radius: var(--bs-border-radius)!important;
}

.btn-arrow-square-end:after{
	content: "";
	position: absolute;
	top: 0px;
	height: 100%;
	width: 16px;
	background: inherit;
	border: inherit;
	right: -4px;
	z-index: 2;
	
}

a.target-blank::before {
	content: "\f35d";
	font-family: 'Font Awesome 5 Free';
	font-size: 1.0em;
	font-weight: 900;
}


.is-invalid~.input-group-append span, .is-invalid~.note-editor {
	color: #EA4335;
	border-color: var(--bs-form-invalid-border-color);
}


.is-invalid {
	color: #EA4335;
	border-color: var(--bs-form-invalid-border-color);
}

.no-bg {
	background: unset!important;
}

.is-invalid.no-bg~.invalid-feedback {
	position:absolute;
	top:38px;
}
.is-invalid.no-bg~.input-group-text label i{
	color: #EA4335!important;
}
.input-group:has(.is-invalid.no-bg):not(:has(.no-invalid-feedback)) {
	margin-bottom: 22px!important;
}

.border-main{
	background-color: var(--color-main);
	border-color: var(--color-main);
	color:#fff;
	--bs-border-opacity: 1;
	border-color: rgba(var(--bs-primary-rgb), var(--bs-border-opacity)) !important;
}

.border-end-thick{
	border-right: 2px var(--bs-border-style) var(--bs-border-color) !important;
}

.border-bottom-thick{
	border-bottom: 2px var(--bs-border-style) var(--bs-border-color) !important;
}

.nav-tabs {
	border-bottom: 2px var(--bs-border-style) var(--bs-border-color)!important;
}

.nav-tabs .nav-link {
	border: 0;
	border-radius: 0;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	color: var(--bs-body-color);
}
.nav-tabs .nav-link.active {
	border-bottom: 2px var(--bs-border-style) var(--color-active)!important;
	font-weight: 700!important;
}

.btn.disabled, .btn:disabled{
	background-color: unset;
	border-color: transparent;
}

.btnProgressGroup > button {
	min-width: 87px;
}

/* 이미지 관련 */
.banner-visible-area{
	/*background-image: var(--hs-invite-banner);*/
	background-size: cover;
	background-position: center;
}

.banner-visible-area::before {
	content: '';
	display: block;
	padding-top: 41.84%;
	/* 16:9 aspect ratio (9 / 16 = 0.5625) */
	/* 2.39:1 aspect ratio (1 / 2.39 = 0.4184) */
	/* 21:9 aspect ratio (9 / 21 = 0.42857) */

	/*
	1:1 - Square
	4:3 - Standard television and computer monitor aspect ratio
	16:9 - Widescreen television and computer monitor aspect ratio (HD, Full HD, and 4K)
	3:2 - Traditional 35mm film camera aspect ratio
	5:4 - Common aspect ratio for some computer monitors and photography formats
	21:9 - Ultra-wide monitor aspect ratio
	2.39:1 or 2.35:1 - Cinemascope aspect ratio for many widescreen films
	*/
}

/* 데이터 테이블 스타일 변경 */
.dataTables_wrapper {
	min-height: 50px;
	/** height: 50px; */
	overflow: auto!important;
}

.dataTables_wrapper .dataTables_processing {
	position: absolute;
	bottom: 0;
	right: 0;
	color: unset;
	background: unset;
	top: 9px;
	left: unset;
	width: unset;
	margin-left: unset;
	margin-top: unset;
	text-align: unset;
	font-size: .875em;
	padding-right: 10px;
	padding-top: 5px;
	color: var(--bs-secondary-color)!important;
	height:30px;
}

.dataTables_wrapper .dataTables_current {
	position: absolute;
	bottom: 0;
	left: 0;
	color: unset;
	background: unset;
	top: unset;
	left: unset;
	width: unset;
	height: unset;
	margin-left: unset;
	margin-top: unset;
	text-align: unset;
	padding: 10px;
}

.dataTables_wrapper .dataTables_processing::before {
	content: "\f1ce";
	font-family: 'Font Awesome 5 Free';
	color: inherit;
	font-weight: 900;
	position: static;
	display: inline-block;
	margin-right: 5px;
	animation-name: spinning;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.dataTable th{
	position:relative;
}

.hs-column-order{
	position:absolute;
	right:14px;
	top: 18px;
}

.hs-column-order:before{
	position: absolute;
	display: block;
	bottom: 50%;
	content: "▲";
	content: "▲" / "";
	line-height: 9px;
	font-size: .8em;
	opacity:0.125;
}
.hs-column-order:after{
	position: absolute;
	display: block;
	top: 50%;
	content: "▼";
	content: "▼" / "";
	line-height: 9px;
	font-size: .8em;
	opacity:0.125;
}

thead>tr>th.sorting:hover {
	outline: 2px solid rgba(0,0,0,.05);
	outline-offset: -2px
}

th.sorting_asc > .hs-column-order:before{
	opacity: 0.6;
}

th.sorting_desc > .hs-column-order:after{
	position: absolute;
	display: block;
	top: 50%;
	content: "▼";
	content: "▼" / "";
	line-height: 9px;
	font-size: .8em;
	opacity:0.6;
}

dd {
	overflow: auto!important;
}

mark{
	padding:0;
}

/* JQuery DatePicker 스타일 변경 */
.ui-widget-content {
	border: var(--bs-border-width) solid var(--bs-border-color)!important;
	border-radius: var(--bs-border-radius);
	background-color: var(--bs-body-bg);
	color: var(--bs-modal-color);
	overflow: auto;
}


.ui-widget-header a {
	font-size: var(--bs-font-size);
	color: var(--bs-color);
	background-color: #E8ECF2;
	border: var(--bs-border-width) solid var(--bs-border-color);
}

.ui-widget-header {
	border: var(--bs-border-width) solid var(--bs-border-color);
	background-color: var(--modal-header-bg);
	color: var(--bs-modal-color);
	font-weight: bold;
}

.ui-timepicker.ui-widget-content {
	border: 0!important;
	background-color: var(--bs-body-bg);
	color: unset;
}

.ui-timepicker-container {
	z-index: 9999!important;
	/*background-color: rgba(var(--bs-body-bg-rgb),var(--bs-bg-opacity))!important;*/
	border: var(--bs-border-width) solid var(--bs-border-color)!important;
	border-radius: var(--bs-border-radius);
	background-color: var(--bs-body-bg);
}

.ui-timepicker-standard .ui-menu-item {
	background-color: var(--bs-body-bg);
}

.ui-timepicker-viewport {
	background-color: var(--bs-body-bg);
}

.ui-timepicker-standard a {
	color: var(--color-dark)!important;
	background-color: unset!important;
	border: unset!important;
	font-weight: unset!important;
}

.bar-group.restCnt{
	fill: var(--bs-secondary)
}
.bar-group.failCnt{
	fill: var(--bs-danger)
}
.bar-group.sucCnt,
.bar-group.finishCnt{
	fill: var(--bs-primary)
}

/** 파일 업로드 */
.div-excel-upload {
	border: 2px dashed var(--modal-header-bg);
	color: #7F7F7F;
}

.div-excel-upload.active{
	border: 2px dashed var(--color-active);
}

.div-excel-upload .file-drag{
	display:none;
}

.div-excel-upload.active .file-drag{
	display:block;
	color: var(--color-active);
}

.link-label {
	color: var(--color-link);
	text-decoration: none;
	cursor: pointer;
}

.link-label:not([disabled]):hover {
	text-decoration: underline;
}

.border-active{
	/*border-color: #0d6efd!important;*/
	border-color: var(--color-active)!important
}

.text-active{
	color: var(--color-active)!important;
	fill: var(--color-active)!important;
}

/* 활성/비활성 타입 설정 */
.control-box-enable .btn {display: inline-block;padding: 6px 12px;margin-bottom: 0;font-size: 14px;font-weight: 400;line-height: 1.42857143;text-align: center;white-space: nowrap;vertical-align: middle;cursor: pointer;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;background-image: none;border: 1px solid transparent;border-radius: 4px;}
.control-box-enable .btn-default{color: #333;background-color: #fff;border-color: #ccc;}
.control-box-enable .btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open>.dropdown-toggle.btn-default {color: #333;background-color: #e6e6e6;border-color: #adadad;}
.control-box-enable .btn-heat {color: #fff;background-color: #d65e96;border-color: #c73084;}
.control-box-enable .btn-cool {color: #fff;background-color: #49a7d6;border-color: #238bd1;}
.control-box-enable .toggle-group label {border-width:0px;}

/* 활성/비활성 타입 설정 */
.control-box-enable .btn-enable {color: #fff;background-color:var(--color-main);border-color:var(--color-main);}
.control-box-enable .btn-disable {background-color: gba(var(--bs-secondary-rgb));border-color: var(--bs-border-color);}

/** 작은 사이트 박스 */
.control-box-enable.box-sm .toggle {
	height:28px!important;
	min-height:28px!important;
}
.control-box-enable.box-sm .btn {
	line-height:1;
}


.bd-callout {
	padding: 1.25rem;
	margin-top: 1.25rem;
	margin-bottom: 1.25rem;
	background-color: var(--bd-callout-bg, var(--bs-gray-100));
	border-left: 0.25rem solid var(--bd-callout-border, var(--bs-gray-300));
}

.bd-callout-info {
	--bd-callout-bg: rgba(var(--bs-info-rgb), .075);
	--bd-callout-border: rgba(var(--bs-info-rgb), .5);
}

.bd-callout-warning {
	--bd-callout-bg: rgba(var(--bs-warning-rgb), .075);
	--bd-callout-border: rgba(var(--bs-warning-rgb), .5)
}

.bd-callout-danger {
	--bd-callout-bg: rgba(var(--bs-danger-rgb), .075);
	--bd-callout-border: rgba(var(--bs-danger-rgb), .5)
}

.private-link{
	position:relative;
}
.private-link:before{
	content: "\f023";
	font-family: 'Font Awesome 5 Free';
	font-size: 0.8em;
	font-weight: 900;
	position: absolute;
	margin-left: -12px;
	margin-top: 3px;
	color: var(--color-link);
}

.pt-2-rem{
	padding-top:2rem!important;
}

.bg-focus-primary {
	--bs-bg-opacity: 1;
	background-color: var(--bg-focus-primary)!important;
}

.text-focus-primary {
	color: var(--color-focus-primary)!important;
}

tr.data-updated > td{
	background-color: var(--hover-bg-color)!important;
}

.navbar-divider {
	height: 30px;
}

ul#SALES_BOM_SEARCH_listEstimate > li {
	cursor: pointer;
	background-color: transparent;
}

ul#SALES_BOM_SEARCH_listEstimateProductSales > li {
	cursor: pointer;
	background-color: transparent;
}

ul#SALES_BOM_LIST_listEstimate > li {
	cursor: pointer;
	background-color: transparent;
}

ul#SALES_BOM_LIST_listEstimateProductSales > li {
	cursor: pointer;
	background-color: transparent;
}

ul#SALES_BOM_LIST_listEstimateProductSales > li {
	cursor: pointer;
	background-color: transparent;
}

ul#COUNSELING_BOM_SEARCH_listEstimate > li {
	cursor: pointer;
	background-color: transparent;
}

ul#COUNSELING_BOM_SEARCH_listEstimateProductSales > li {
	cursor: pointer;
	background-color: transparent;
}

ul#COUNSELING_BOM_LIST_listEstimate > li {
	cursor: pointer;
	background-color: transparent;
}

ul#COUNSELING_BOM_LIST_listEstimateProductSales > li {
	cursor: pointer;
	background-color: transparent;
}

ul#COUNSELING_BOM_LIST_listEstimateProductSales > li {
	cursor: pointer;
	background-color: transparent;
}

.list-group-item.running{
	pointer-events: none;
	opacity: var(--bs-btn-disabled-opacity);
}

.list-group-item.running::after {
	content: "\f1ce";
	font-family: 'Font Awesome 5 Free';
	color: inherit;
	font-weight: 900;
	position: static;
	display: inline-block;
	margin-right: 5px;
	animation-name: spinning;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.cursor-pointer {
	cursor: pointer;
}

.cursor-grab {
	cursor: grab;
}
.cursor-grabbing {
	cursor: grabbing!important;
}


.drag-from{
	opacity:0.5;
}

.drag-to{
	border: var(--bs-border-width) solid var(--bs-border-color)!important;
}

.hs-item-selected{
	position: relative;
}

.hs-item-selected:before {
	content: "";
	position: absolute;
	z-index: 1;
	top: -6px;
	left: 0;
	width: 8px;
	height: 8px;
	background-color: RGBA(25, 135, 84, var(--bs-bg-opacity, 1)) !important;
}
.hs-item-selected:after{
	content: "";
	position: absolute;
	z-index: 1;
	top: -8px;
	left: 0;
	width: 8px;
	height: 8px;
	background-color: var(--bs-body-bg) !important;
	border-bottom-left-radius: 50%;
	border-left: var(--bs-border-width) solid var(--bs-border-color);
	border-bottom: var(--bs-border-width) solid var(--bs-border-color);
}

.hs-item-selected button.btn{
	position:relative;
}

.hs-item-selected button.btn:before{
	content: "";
	position: absolute;
	z-index: 1;
	top: -6px;
	right: 0;
	width: 8px;
	height: 8px;
	background-color: RGBA(25, 135, 84, var(--bs-bg-opacity, 1)) !important;
}

.hs-item-selected button.btn:after{
	content: "";
	position: absolute;
	z-index: 1;
	top: -8px;
	right: 0;
	width: 8px;
	height: 8px;
	background-color: var(--bs-body-bg) !important;
	border-bottom-right-radius: 50%;
	border-right: var(--bs-border-width) solid var(--bs-border-color);
	border-bottom: var(--bs-border-width) solid var(--bs-border-color);
}

.opacity-90 {
	opacity: .90!important;
}

/** 대화하기 */
.my-message:before {
	content: "";
	position: absolute;
	z-index: 1;
	top: 6px;
	right: -8px;
	height: 10px;
	border-right: 15px solid rgba(var(--bs-main-rgb), var(--bs-bg-opacity)) !important;
	border-top-left-radius: 16px 14px;
	-webkit-transform: translate(0, -2px);
	transform: translate(0, -2px);
	border-bottom-left-radius: 15px 0px \9;
	transform: translate(-1px, -2px) \9;
}

.my-message:after {
	content: "";
	position: absolute;
	z-index: 1;
	top: 5px;
	right: -42px;
	width: 12px;
	height: 12px;
	background: var(--bs-modal-bg);
	border-top-left-radius: 10px;
	-webkit-transform: translate(-30px, -2px);
	transform: translate(-30px, -2px);
}

.rotate-180{
	-webkit-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	transform: rotate(180deg);
}


.card-login{
	background-color: transparent;
	border:0px;
}

.border-none{
	border-color: transparent!important;
}

.bg-none{
	background-color: transparent!important;
}
.bg-main{
	background-color: var(--color-main)!important;
}
.bg-red{
	background-color: var(--color-red)!important;
}

.brnad-content{
	min-height:480px;
}

.link-no-underline{
	text-decoration: none!important;
}
.link-no-decoration{
	text-decoration: none!important;
	color: var(--bs-table-color-state, var(--bs-table-color-type, var(--bs-table-color)));
}

.with-left-line:before{
	content: "";
	display: inline-block;
	width: 1px;
	min-width: 1px;
	height: 11px;
	margin: 0 7px;
	background-color: #828282;
	pointer-events: none;
}

@media (min-width: 768px) {
	/** md */
	.rounded-md-0 {
		border-radius: 0 !important;
	}
	.rounded-md-1 {
		border-radius: var(--bs-border-radius-sm) !important;
	}
	.rounded-md-2 {
		border-radius: var(--bs-border-radius) !important;
	}
	.rounded-md-3 {
		border-radius: var(--bs-border-radius-lg) !important;
	}
}

@media (max-width: 991px) {
	/** less-than-lg */
	.w-less-than-lg-unset{
		width: unset !important;
		max-width: unset !important;
		min-width: unset !important;
	}
	.border-bottom-less-than-lg-0{
		border-bottom: 0 !important;	
	}
	.border-end-less-than-lg-0{
		border-right: 0 !important;	
	}
	
	/** 모바일 브라우저에서는 테이블 메뉴 항상 표시하기 */
	.tr-more-menu .btn-more-menu{
		display:block;
	}
}

@media (min-width: 992px) {
	/** lg */
	.card-login{
		background-color: var(--bs-card-login-bg);
		border: var(--bs-card-border-width) solid var(--bs-card-border-color);
		box-shadow: 0 0 0.5rem rgba(var(--shadow-color-rgb), .8)!important;
	}
	
	.rounded-lg-0 {
		border-radius: 0 !important;
	}
	.rounded-lg-1 {
		border-radius: var(--bs-border-radius-sm) !important;
	}
	.rounded-lg-2 {
		border-radius: var(--bs-border-radius) !important;
	}
	.rounded-lg-3 {
		border-radius: var(--bs-border-radius-lg) !important;
	}
	
	.rounded-bottom-lg-3 {
		border-bottom-right-radius: var(--bs-border-radius-lg) !important;
		border-bottom-left-radius: var(--bs-border-radius-lg) !important;
	}
	
	.border-lg-0 {
		border: 0 !important;
	}
	
	.border-lg-1 {
		border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
	}
	
	.border-lg-bottom {
		border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
	}
	.border-lg-top {
		border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
	}
	
	.position-lg-fixed{
		position:fixed !important;
	}
	.position-lg-absolute{
		position:absolute !important;
	}
	.position-lg-relative{
		position:relative !important;
	}
	
	td.selected{
		position:relative;
	}
	td.selected:after{
		content:'';
		border: 2px solid rgba(var(--bs-primary-rgb), var(--bs-bg-opacity));
		position: absolute;
		left: 2px;
		top: 2px;
		width: calc(100% - 4px);
		height: calc(100% - 4px);
		border-radius: var(--bs-border-radius);
	}
	.flex-grow-lg-1{
		flex-grow: 1;
	}
	
	.border-end-lg{
		border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
	}
	.border-bottom-lg-0{
		border-bottom: 0 !important;	
	}
	.bg-lg-none{
		background-color: transparent!important;
	}
	.bg-lg-white{
		--bs-bg-opacity: 1;
		background-color: rgba(var(--bs-white-rgb), var(--bs-bg-opacity)) !important;
	}
	.bg-lg-light{
		background-color: var(--color-light)!important;
	}
	.bg-lg-lighter{
		background-color: var(--color-lighter)!important;
	}
	.bg-lg-body {
		--bs-bg-opacity: 1;
		background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
	}
	.overflow-lg-auto {
		overflow: auto !important;
	}
	.card.collapsed .card-header{
		display:none;
	}
	.card.collapsed .card-body{
		display:none;
	}
	.card.collapsed .card-header.collapse{
		display:block;
		border-bottom: 0 !important;
	}
	
	.mh-lg-320 {
		max-height:320px;
	}
	
	.fa-lg-2xl {
		font-size: 2em;
		line-height: 0.03125em;
		vertical-align: -0.1875em;
	}
	
	.table-layout-lg-fixed {
		table-layout: fixed;
	}
	
	.main-bg{
		background-color: rgba(255, 255, 255, 0);
		background-repeat: no-repeat;
		background-size: cover;
		min-width: 0px;
		min-height: max(0px, 100%);
		width: 100%;
		margin-right: auto;
		margin-left: auto;
		position: relative;
		z-index: -1;
		height: max-content;
		flex-shrink: 0;
		justify-content: flex-start;
		opacity: 1;
		background-image: url(/resources/images/brand/bg.png);
	}
	
	.fs-lg-5{
		font-size: 1.25rem !important;
	}
}

.HS_PROJECT_btnProject .HS_PROJECT_btnDel{
	display:none;
}
.HS_PROJECT_btnProject:hover .HS_PROJECT_btnDel{
	display:block;
}

.bg-light{
	background-color: var(--color-light)!important;
}
.bg-lighter{
	background-color: var(--color-lighter)!important;
}

.text-black{
	color: var(--color-black) !important;
}

/** KANBAN 차트 */
.bg-kanban{
	background-color: var(--color-light)!important;
}

.bg-kanban-item{
	background-color: var(--bs-card-bg)!important;
}

.kanban-column{
	width:270px;
	min-width:270px;
}

.kanban-column-task-cnt::after {
	content: attr(data-value);
	display: inline-block;
	position: absolute;
	top: 50%;
	right:0;
	transform: translate(-50%, -50%);
	width: 24px;
	height: 24px;
	text-align: center;
	border-radius: var(--bs-border-radius-pill) !important;
	font-size: .875em;
	padding:1px;
	background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
	white-space: nowrap !important;
}


/** TIMELINE */
.timeline-row.striped {
	background-color: var(--color-lighter)!important;
}

.timeline-row.hover {
	background-color: var(--modal-header-bg)!important;
}

.bg-timeline-focus{
	--bs-bg-opacity: 0.15;
	background-color: rgba(var(--bs-secondary-rgb), var(--bs-bg-opacity)) !important;
}

.text-bg-holiday{
	color: #fff !important;
	background-color: RGBA(108, 117, 125, var(--bs-bg-opacity, 1)) !important;
}

@media (hover: hover) {
	.timeline-task:not(.no-editable):hover:before {
		content: "\f7a5";
		font-family: 'Font Awesome 5 Free';
		color: var(--color-sub-active);
		position: absolute;
		left: 0px;
		cursor: col-resize;
		height:100px;
		display: flex;
		align-items: center;
		width: 10px;
		justify-content: end;
	}
	
	.timeline-task:not(.no-editable):hover:after {
		content: "\f7a5";
		font-family: 'Font Awesome 5 Free';
		color: var(--color-sub-active);
		position: absolute;
		right: 0px;
		cursor: col-resize;
		height:100px;
		display: flex;
		align-items: center;
		width: 10px;
		justify-content: start;
	}
}

.HS_WEB_FORM_DATA_ROW dd{
	display:block;
}

.HS_WEB_FORM_DATA_ROW textarea{
	display:none;
}

.HS_WEB_FORM_DATA_ROW.flex-column dt{
	width:100%;
}

.HS_WEB_FORM_DATA_ROW.flex-column dd{
	display:none;
}

.HS_WEB_FORM_DATA_ROW.flex-column textarea{
	display:block;
}

@media (min-width: 992px) {
	#SALES_LEAD_WEB_FORM_VIEW_navbarWebFormData.container {
		max-width:calc(960px - 250px);
	}
}

@media (min-width: 1200px) {
	#SALES_LEAD_WEB_FORM_VIEW_navbarWebFormData.container {
		max-width:calc(1140px - 250px);
	}
	
	.fs-heading{
		font-size: 52px!important;
	}
}

@media (min-width: 1400px) {
	#SALES_LEAD_WEB_FORM_VIEW_navbarWebFormData.container {
		max-width:calc(1320px - 250px);
	}
}


/** Plotly.js 설정 */
.plotly-notifier{
	display:none!important;
}

.stroke-light{
	stroke: rgba(var(--stroke-light-rgb))!important;
}

.text-truncate {
	vertical-align: top;
}

textarea.resize-none{
	resize:none;
}

.form-control-plaintext.editable:not([disabled]):hover{
	border-bottom: var(--bs-card-border-width) solid var(--bs-card-border-color);
}
div:has(> .form-control-plaintext.editable:not([disabled]):hover):before {
	content: "\f044";
	font-family: 'Font Awesome 5 Free';
	color: var(--color-sub-active);
	position: absolute;
	right: 15px;
}

#HS_TOP_navbar{
	z-index: 1055;
}

#HS_VIEW{
	z-index:1053;
}
#HS_SUB_VIEW{
	z-index:1054;
}
#POPUP_SURMARY{
	z-index:1056;
}

#HS_LAYOUT_menuShortcut{
	z-index:1079;
	width:56px;
}

.HS_LEFT_menuShortcutArea{
	width:56px;
	min-width: 56px;
}
.shortcut-tooltip{
	--bs-tooltip-padding-x: 1.5rem;
}
.shortcut-tooltip .tooltip-arrow:before{
	right: -3px!important;
}

#HS_VIEW_CONTENT.running::before {
	content: "\f1ce";
	font-family: 'Font Awesome 5 Free';
	color: inherit;
	font-weight: 900;
	position: static;
	display: inline-block;
	margin-top: 22px;
	margin-left: 22px;
	animation-name: spinning;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	position: absolute;
}

#HS_VIEW_CONTENT .HS_SUB_MENU {
	display:none!important;
}

.gradient-border {
	position: relative;
	border: none; /* 기본 보더 제거 */
}

.gradient-border::before {
	content: "";
	position: absolute;
	top: -1px;
	left: -1px; bottom: -1px; right: -1px;
	background: linear-gradient(135deg, #007bff, #00ffdd, #ff007b);
	border-radius: inherit;
}

.no-transition {
	transition: none !important;
}

.HS_LEFT_MENU_COLLAPSE::after {
	content: "\f0d8";
	font-family: 'Font Awesome 5 Free';
	font-size: 1.0em;
	font-weight: 900;
	margin-right: 4px;
	position: absolute;
	right: 10px;
}

.HS_LEFT_MENU_COLLAPSE.collapsed::after {
	content: "\f0d7";
	font-family: 'Font Awesome 5 Free';
	font-size: 1.0em;
	font-weight: 900;
	margin-right: 4px;
	position: absolute;
	right: 10px;
}


.no-focus-outline:focus {
	outline: none;
	box-shadow: none;
}

#HS_VIEW .d-none-on-quick-view {
	display:none;
}

.mw-100px{
	max-width:100px;
}

.mw-250px{
	max-width:250px;
}

.mw-860px{
	max-width:860px;
}

.min-w-50px{
	min-width:50px!important;
}

.card .card-header.collapse{
	display:none;
}

.vertical-text {
	transform: rotate(90deg); /* 90도 회전 */
	transform-origin: left bottom; /* 회전 기준점 설정 */
	white-space: nowrap; /* 줄 바꿈 방지 */
}


.toggle.btn {
	min-width: 72px;
}

.no-scroll::-webkit-scrollbar {
	display: none; /* 스크롤바 숨기기 */
}
.no-scroll{	
	scrollbar-width: none;
	-ms-overflow-style: none;
}

/* 팝업에 표시되는 캠페인의 경우 배경색 지정 */
[id="HS_VIEW_CONTENT"] #SALES_CAMPAIGN_ITEM_VIEW {
	height: 100%;
	--bs-bg-opacity: 1;
	background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
}
/* 팝업창 최대화가 아닌 경우 상단 여백 조정 */
.modal.show.maximize .modal-dialog:not(.modal-fullscreen){
	top:16px;
}
.modal-dialog:not(.modal-fullscreen) .HS_LEFT_menuShortcutArea{
	display:none!important;
}

.table-head-sticky-top{
	border-collapse: separate;
	border-spacing: 0;
}

.table-head-sticky-top thead{
	position:sticky;
	top:0;
}

.fa-3xl{
	font-size: 3em;
	line-height: 1.2em;
}

.gap-pipeline {
	gap: 4rem!important
}

.text-pipeline-name{
	writing-mode: vertical-rl;
	height: 50px;
	max-height: 70px;
	width:35px;
	min-width:35px;
	text-orientation: upright;
	z-index: 3;
}
.no-drag{
	-webkit-user-drag: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

/* 시트 스타일 */
.div-sheet .border-primary{
	border-color: #0070d2!important;
}


.table-hover>tbody>tr:hover>td:has(.emptyTable) {
	--bs-table-bg-state: transparent;
}
.table-hover>tbody>tr:hover>td.emptyTable {
	--bs-table-bg-state: transparent;
}

.hs-hover:hover {
	background-color:var(--hover-bg-color);
}

.px-125 {
    padding-right: .125rem;
    padding-left: .125rem;
}

.sortable-drag,
.is-dragging {
	box-shadow: 0 12px 24px rgba(0,0,0,.18);
	cursor: grabbing;
	z-index: 9999;            /* 항상 위에 보이도록 */
	opacity: .9 !important;
}

.kanban-item.sortable-drag,
.kanban-item.is-dragging {
	transform: rotate(-15deg) scale(1.05);
	border: 2px solid #0070d2 !important;
}

/* 드래그 중 텍스트 선택 방지 */
.is-sorting, .is-sorting *:not(input):not(textarea) {
	user-select: none;
	-webkit-user-select: none;
	cursor: grabbing;
}

.w-unset{
	width:unset!important;
}

.py-download-button{
	padding-top:2px;
	padding-bottom:2px;
}

table:not(.sortable-row-move) tr.sortable-row:hover .sortable-handle {
  display: block!important;
}