/*!
 * EMAX ERP — va.css (Frame7 Web)
 * Copyright (c) EMAX IT. All rights reserved.
 *
 * This stylesheet is original work by EMAX IT. A limited set of design
 * tokens (CSS variable naming such as --fontFamilyBase, --colorNeutralBorder,
 * --sizeSpacingM, --fontWeightBold) and the default font-family stack value
 * were adapted from the Microsoft Fluent UI design system.
 *
 * No Fluent UI source code, stylesheet, component, icon, or binary is
 * bundled or redistributed with this file. See ./LICENSE.txt for the full
 * MIT attribution text.
 *
 * Microsoft Fluent UI — MIT License
 * Copyright (c) Microsoft Corporation
 * https://github.com/microsoft/fluentui
 */
/*
@font-face {
  font-family: "Pretendard-Regular";
  src: url("/font/Pretendard-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}
*/
::-webkit-scrollbar {
	width: var(--sizeScrollBarWidth);
	height: var(--sizeScrollBarHeight);
	background: var(--colorScrollBarTrack);
	/*border-radius:5px;*/
	color: black;
}

::-webkit-scrollbar-track {
	background: var(--colorScrollBarTrack);
}

::-webkit-scrollbar-thumb {
	background: var(--colorScrollBarThumb);
	border-radius: var(--sizeScrollBarThumbRadius);
	color: black;
	border: 2px solid var(--colorScrollBarTrackBorder);
	opacity: 0.2;
}

::-webkit-scrollbar-button {
	display: flex;
	background: var(--colorScrollBarTrack);
}

::-webkit-scrollbar-button:vertical:single-button:decrement {
	/*border-radius: 6px 6px 0 0;*/
	background-image: var(--scrollbarArrowUp);
	background-size: contain;
	background-repeat: no-repeat;
	background-color: var(--colorScrollBarTrack);
}



::-webkit-scrollbar-button:vertical:single-button:decrement:hover {
	background-color: var(--colorScrollBarTrackHover);
}

::-webkit-scrollbar-button:vertical:single-button:increment {
	/*border-radius: 0 0 6px 6px;*/
	background-image: var(--scrollbarArrowDown);
	background-size: contain;
	background-repeat: no-repeat;
	background-color: var(--colorScrollBarTrack);
}

::-webkit-scrollbar-button:vertical:single-button:increment:hover {
	background-color: var(--colorScrollBarTrackHover);
}

::-webkit-scrollbar-button:horizontal:single-button:decrement {
	/*border-radius: 6px 0 0 6px;*/
	background-image: var(--scrollbarArrowLeft);
	background-size: contain;
	background-repeat: no-repeat;
	background-color: var(--colorScrollBarTrack);
	transform: rotate(90deg);
}

::-webkit-scrollbar-button:horizontal:single-button:increment {
	/*border-radius: 0 6px 5px 0;*/
	background-image: var(--scrollbarArrowRight);
	background-size: contain;
	background-repeat: no-repeat;
	background-color: var(--colorScrollBarTrack);
	transform: rotate(90deg);
}

::-webkit-scrollbar-button:horizontal:single-button:decrement:hover {
	background-color: var(--colorScrollBarTrackHover);
}

::-webkit-scrollbar-button:horizontal:single-button:increment:hover {
	background-color: var(--colorScrollBarTrackHover);
}

/*
::-webkit-scrollbar : 스크롤바 전체
::-webkit-scrollbar-thumb : 드래그 가능한 스크롤 핸들 막대
::-webkit-scrollbar-track : 스크롤바 트랙 (스크롤이 움직이는 영역 / 스크롤 진행률 표시줄)
::-webkit-scrollbar-button : 스크롤바의 방향 버튼 (= 위/아래 표시 화살표)
::-webkit-scrollbar-track-piece : 스크롤 진행률 표시줄에서 스크롤 핸들 막대 부분을 제외한 남은 빈 공간
::-webkit-scrollbar-corner : 수평/수직 스크롤 막대가 만나는 스크롤 막대의 하단 모서리
::-webkit-resizer : 요소의 하단 모서리에 나타나는 크기 조정 핸들
*/
html {
	height: 100%;
	width: 100%;
	font-size: 10px;
	line-height: 1.5;
	-webkit-text-size-adjust: none;
	/*font-family: "Pretendard-Regular", sans-serif;*/
	font-family: "Pretendard", sans-serif;
	font-weight: var(--fontWeightRegular);
	background-color: var(--colorBackground);
	color: var(--colorForeground);
	font-size: var(--sizeFontM);
	/*scrollbar-color : var(--colorForeground3) var(--colorForeground2);*/
	/*scrollbar-width:thin;*/
	font-size: 1.7rem;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

body {
	position: relative;
	height: 100%;
	width: 100%;
	/*font-family: "Pretendard-Regular", sans-serif;*/
	font-family: "Pretendard", sans-serif;
	line-height: 1.5;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background-color: var(--colorBackground);
	color: var(--colorForeground);
	/*scrollbar-color : var(--colorForeground3) var(--colorForeground2);*/
}

/*"Pretendard-Regular", */
.root {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	height: 100%;
	width: 100%;
	background-color: var(--colorBackground);
	color: var(--colorForeground);
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	/*scrollbar-color : var(--colorForeground3) var(--colorForeground2);*/
}

.app {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	height: 100%;
	width: 100%;
	background-color: var(--colorBackground);
	color: var(--colorForeground);
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	/*scrollbar-color : var(--colorForeground3) var(--colorForeground2);*/
}

pre.light {
	font-size: inherit;
	font-family: var(--fontFamilyNumeric);
	background-color: var(--colorPrimary2);
	border-radius: var(--sizeFieldBorderRadiusL);
}

*:focus {
	outline: none;
}

button {
	appearance: auto;
	text-rendering: auto;
	letter-spacing: normal;
	word-spacing: normal;
	line-height: normal;
	text-transform: none;
	text-indent: 0rem;
	text-shadow: none;
	display: inline-block;
	text-align: center;
	align-items: flex-start;
	cursor: default;
	box-sizing: border-box;
	margin: 0em;
	padding-block: 0.1rem;
	padding-inline: 0.6rem;
	border-width: 0.2rem;
	border-style: outset;
	border-color: buttonborder;
	border-image: initial;
	cursor: pointer;
}

a:-webkit-any-link {
	color: -webkit-link;
	cursor: pointer;
	text-decoration: underline;
}

ol {
	display: block;
	list-style: none;
	list-style-type: none;
	margin-block-start: 1rem;
	margin-block-end: 1rem;
	margin-inline-start: 0rem;
	margin-inline-end: 0rem;
	padding-inline-start: 0rem;
}

ul {
	list-style: none;
	display: block;
	list-style-type: none;
	margin-block-start: 0rem;
	margin-block-end: 0rem;
	margin-inline-start: 0rem;
	margin-inline-end: 0rem;
	padding-inline-start: 0rem;
}

li {
	display: list-item;
	text-align: -webkit-match-parent;
}

input[type="text" i] {
	writing-mode: horizontal-tb !important;
	padding-block: 0.1rem;
	padding-inline: 0.2rem;
}

input[type="password" i] {
	min-width: 1.0rem;
	writing-mode: horizontal-tb !important;
	padding-block: 0.1rem;
	padding-inline: 0.2rem;
}

iframe.mobile {
	width: 36.0rem;
	height: 74.0rem;
	margin: 4.0rem;
	margin-left: auto;
	margin-right: auto;
	border-style: solid;
	border: 0.1rem solid var(--colorNeutralStroke);
	border-radius: var(--sizeFieldBorderRadiusL);
}

iframe.desktop {
	width: 100%;
	max-width: 86.6rem;
	height: 64.0rem;
	margin: 4.0rem;
	margin-left: auto;
	margin-right: auto;
	border-style: solid;
	border: 0.1rem solid var(--colorNeutralStroke);
	border-radius: var(--sizeFieldBorderRadiusL);
}

input {
	min-width: 0.1rem;
	text-rendering: auto;
	color: var(--colorStroke);
	letter-spacing: normal;
	word-spacing: normal;
	line-height: normal;
	text-transform: none;
	text-indent: 0rem;
	text-shadow: none;
	display: inline-block;
	text-align: start;
	appearance: auto;
	cursor: text;
	background-color: transparent;
	/*var(--colorBackground);*/
	margin: 0rem;
	padding: 0.1rem 0rem;
	border-width: 0.2rem;
	border-style: inset;
	padding-block: 0.1rem;
	padding-inline: 0.2rem;
}

input[type="range" i] {
	appearance: auto;
	cursor: default;
	padding: initial;
	border: initial;
	margin: 0.2rem;
}

select {
	height: 3.2rem;
	text-rendering: auto;
	color: var(--colorStroke);
	letter-spacing: normal;
	word-spacing: normal;
	line-height: normal;
	text-transform: none;
	text-indent: 0rem;
	text-shadow: none;
	display: inline-block;
	text-align: start;
	appearance: auto;
	box-sizing: border-box;
	align-items: center;
	background-color: var(--colorBackground);
	cursor: default;
	margin: 0em;
	white-space: pre;
	border-color: var(--colorNeutralStroke);
	border-width: 0.1rem;
	border-style: solid;
	border-image: initial;
	border-radius: var(--sizeFieldBorderRadiusM);
}

select option {
	color: var(--colorStroke);
	background-color: var(--colorBackground);
}

textarea {
	color: var(--colorStroke);
	background-color: var(--colorBackground);
	font-size: 12px;
	font-family: Pretendard;
}

img {
	overflow-clip-margin: content-box;
	overflow: clip;
}

div,
input,
select,
main,
section,
details,
article,
aside,
form,
.semantic,
iframe {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	font-size: 12px;
	/*scrollbar-color : var(--colorForeground3) var(--colorDarkGray);*/
}

article,
article {
	background-color: var(--colorBackground);
	color: var(--colorForeground);
}

.va-button {
	position: relative;
	display: block;
	background-color: var(--colorBackground);
	color: var(--colorButtonText);
	border: var(--sizeBorderM) solid var(--colorButtonBorder);
	font-family: var(--fontFamilyBase);
	outline-style: none;
	padding: 0px;
	margin: 0px;
	min-width: 0.6rem;
	border-radius: var(--sizeFieldBorderRadiusM);
	font-size: var(--sizeFontMN);
	font-weight: var(--fontWeightSemibold);
	text-decoration-line: none;
	min-height: var(--sizeButtonM);
	cursor: pointer;
	min-width: fit-content;
}

.va-button .button-inner {
	/*gap: 0.2rem;*/
	/*padding: var(--sizeSpacingSN) var(--sizeSpacingM);*/
	padding-bottom: var(--sizeSpacingSN);
	padding-top: var(--sizeSpacingSN);
	padding-left: var(--sizeSpacingM);
	padding-right: var(--sizeSpacingM);
	align-items: center;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	margin: 0rem;
	font-size: var(--sizeFontMN);
	/*line-height: var(--sizeLineMN);*/
}

.va-button .button-inner .button-content {
	display: flex;
	align-items: stretch;
	flex-direction: row;
	justify-content: center;
	flex: 1;
	overflow: visible;

}

.va-button .button-inner .button-content.vertical {
	display: flex;
	align-items: stretch;
	flex-direction: column;
	flex: 1;
}

.va-button .button-inner.left {
	justify-content: start;
}

.va-button .button-inner.center {
	justify-content: center;
}

.va-button .button-inner.right {
	justify-content: end;
}

.va-button .compound-button-inner {
	gap: var(--sizeFieldGapM);
	padding: var(--sizeSpacingSN) var(--sizeSpacingM);
	align-items: center;
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	justify-content: center;
	margin: 0rem;
}

.va-button.additive {
	border: none;
	background: #7F91B9;
	box-shadow: -3px -3px 3px 0 #FFF, 3px 3px 3px 0 rgba(88, 112, 158, 0.40), -4px -4px 5px 0 #93A3C6 inset, 4px 4px 5px 0 rgba(86, 111, 159, 0.70) inset;
}

.va-button.additive:hover {
	background-color: #6079C0;
}

.va-button.additive .text {
	color: #ffffff;
}

.va-button.negative {
	border: none;
	background: #BBC5DF;
	box-shadow: -3px -3px 3px 0 #FFF, 3px 3px 3px 0 rgba(88, 112, 158, 0.40), -4px -4px 5px 0 #CFD5EB inset, 4px 4px 5px 0 rgba(127, 145, 185, 0.70) inset;
}

.va-button.negative .text {
	color: var(--colorButtonNegativeForeground);
}

.va-button.xsmall .compound-button-inner {
	gap: var(--sizeFieldGapXS);
	padding: var(--sizeSpacingXXXS) var(--sizeSpacingXS);
}

.va-button.small .compound-button-inner {
	gap: var(--sizeFieldGapS);
	padding: var(--sizeSpacingXS) var(--sizeSpacingS);
}

.va-button.medium .compound-button-inner {
	gap: var(--sizeFieldGapM);
	padding: var(--sizeSpacingSN) var(--sizeSpacingM);

}

.va-button.large .compound-button-inner {
	gap: var(--sizeFieldGapL);
	padding: var(--sizeSpacingS) var(--sizeSpacingL);
}

.va-button.xlarge .compound-button-inner {
	gap: var(--sizeFieldGapXL);
	padding: var(--sizeSpacingMN) var(--sizeSpacingXL);
}

.va-button .compound-button-inner.left {
	justify-content: start;
}

.va-button .compound-button-inner.center {
	justify-content: center;
}

.va-button .compound-button-inner.right {
	justify-content: end;
}

.va-button.rounded {
	border-radius: var(--sizeFieldBorderRadiusM);
}

.va-button.circular {
	border-radius: var(--sizeFieldBorderRadiusCircular);
}

.va-button.square {
	border-radius: var(--sizeFieldBorderRadiusNone);
}

.va-button.xsmall {
	min-height: var(--sizeFieldXS);
}

.va-button.xsmall {
	min-height: var(--sizeFieldXS);
}

.va-button.xsmall .button-inner {
	min-height: var(--sizeFieldXS);
	padding-bottom: var(--sizeSpacingXS);
	padding-top: var(--sizeSpacingXS);
	padding-left: var(--sizeSpacingXS);
	padding-right: var(--sizeSpacingXS);
	min-width: 0.2rem;
	font-size: var(--sizeFontSN);
	line-height: var(--sizeLineSN);
	font-weight: var(--fontWeightRegular);
}

.va-button.button-extra {
	font-weight: var(--fontWeightMedium);
}

.va-button.shadow {
	border: none;
	background: var(--colorButton);
	box-shadow: -4px -4px 5px 0 #FFF inset, 4px 4px 5px 0 #EBEEF7 inset, -3px -3px 3px 0 #FFF, 3px 3px 3px 0 rgba(88, 112, 158, 0.40);
}

.va-button.primary.shadow {
	border: none;
	background: #3A4C6B;
	box-shadow: -4px -4px 5px 0 #526993 inset, 4px 4px 5px 0 #2C3950 inset, -3px -3px 3px 0 #FFF, 3px 3px 3px 0 rgba(88, 112, 158, 0.40);
}

.va-button.additive.shadow {
	border: none;
	background: var(--colorButtonAdditive);
	box-shadow: -4px -4px 5px 0 #FFF inset, 4px 4px 5px 0 #EBEEF7 inset, -3px -3px 3px 0 #FFF, 3px 3px 3px 0 rgba(88, 112, 158, 0.40);
}

.va-button.nagative.shadow {
	border: none;
	background: var(--colorButtonNagative);
	box-shadow: -4px -4px 5px 0 #FFF inset, 4px 4px 5px 0 #EBEEF7 inset, -3px -3px 3px 0 #FFF, 3px 3px 3px 0 rgba(88, 112, 158, 0.40);
}

.va-button.transparent {
	border: none;
	background: transparent;
	box-shadow: none;

}


.va-icon {
	display: block;
	background-color: var(--colorStroke);
	min-width: var(--sizeIconM);
	min-height: var(--sizeIconM);
	width: var(--sizeIconM);
	height: var(--sizeIconM);
}

.va-icon.xsmall {
	min-width: var(--sizeIconXS);
	min-height: var(--sizeIconXS);
	width: var(--sizeIconXS);
	height: var(--sizeIconXS);
}

.va-icon.small {
	min-width: var(--sizeIconS);
	min-height: var(--sizeIconS);
	width: var(--sizeIconS);
	height: var(--sizeIconS);
}

.va-icon.medium {
	min-width: var(--sizeIconM);
	min-height: var(--sizeIconM);
	width: var(--sizeIconM);
	height: var(--sizeIconM);
}

.va-icon.large {
	min-width: var(--sizeIconL);
	min-height: var(--sizeIconL);
	width: var(--sizeIconL);
	height: var(--sizeIconL);
}

.va-icon.xlarge {
	min-width: var(--sizeIconXL);
	min-height: var(--sizeIconXL);
	width: var(--sizeIconXL);
	height: var(--sizeIconXL);
}

.va-icon.xxlarge {
	min-width: var(--sizeIconXXL);
	min-height: var(--sizeIconXXL);
	width: var(--sizeIconXXL);
	height: var(--sizeIconXXL);
}

.va-icon.xxxlarge {
	min-width: var(--sizeIconXXXL);
	min-height: var(--sizeIconXXXL);
	width: var(--sizeIconXXXL);
	height: var(--sizeIconXXXL);
}


.va-button.xsmall {
	min-height: var(--sizeButtonXS);
}

.va-button.xsmall .button-inner {
	/*min-height:var(--sizeFieldXS);*/
	padding-bottom: var(--sizeSpacingXXXS);
	padding-top: var(--sizeSpacingXXXS);
	padding-left: var(--sizeSpacingS);
	padding-right: var(--sizeSpacingS);
	min-width: 0.2rem;
	font-size: var(--sizeFontSN);
	line-height: var(--sizeLineSN);
	font-weight: var(--fontWeightRegular);
}

.va-button.xsmall.icon-only {
	min-width: var(--sizeFieldXXS);
	min-height: var(--sizeFieldXXS);
	width: var(--sizeFieldXXS);
	height: var(--sizeFieldXXS);
}

.va-button.xsmall.icon-only .button-inner {
	gap: 0px;
	min-width: var(--sizeFieldXS);
	min-height: var(--sizeFieldXS);
	width: var(--sizeFieldXS);
	height: var(--sizeFieldXS);
	padding-bottom: var(--sizeSpacingXXXS);
	padding-top: var(--sizeSpacingXXXS);
	padding-left: var(--sizeSpacingXXXS);
	padding-right: var(--sizeSpacingXXXS);
}

.va-button.small {
	min-height: var(--sizeButtonS);
}

.va-button.small .button-inner {
	/*min-height:var(--sizeFieldXS);*/
	padding-bottom: var(--sizeSpacingXS);
	padding-top: var(--sizeSpacingXS);
	padding-left: var(--sizeSpacingS);
	padding-right: var(--sizeSpacingS);
	min-width: 0.2rem;
	font-size: var(--sizeFontS);
	line-height: var(--sizeLineS);
	font-weight: var(--fontWeightRegular);
}

.va-button.small.icon-only {
	min-width: var(--sizeFieldS);
	min-height: var(--sizeFieldS);
	width: var(--sizeFieldS);
	height: var(--sizeFieldS);
}

.va-button.small.icon-only .button-inner {
	gap: 0px;
	min-width: var(--sizeFieldS);
	min-height: var(--sizeFieldS);
	width: var(--sizeFieldS);
	height: var(--sizeFieldS);
	padding-bottom: var(--sizeSpacingXXXS);
	padding-top: var(--sizeSpacingXXXS);
	padding-left: var(--sizeSpacingXXXS);
	padding-right: var(--sizeSpacingXXXS);
}

.va-button.medium {
	min-height: var(--sizeButtonM);
}

.va-button.medium .button-inner {
	/*min-height:var(--sizeFieldM);*/
	padding-bottom: var(--sizeSpacingXXS);
	padding-top: var(--sizeSpacingXXS);
	padding-left: var(--sizeSpacingM);
	padding-right: var(--sizeSpacingM);
	min-width: 0.2rem;
	font-size: var(--sizeFontMN);
	line-height: var(--sizeLineM);
	font-weight: var(--fontWeightSemibold);
}

.va-button.medium.icon-only {
	min-width: var(--sizeFieldM);
	width: var(--sizeFieldM);
	min-height: var(--sizeFieldM);
	height: var(--sizeFieldM);
}

.va-button.medium.icon-only .button-inner {
	gap: 0px;
	min-width: var(--sizeFieldM);
	width: var(--sizeFieldM);
	min-height: var(--sizeFieldM);
	height: var(--sizeFieldM);
	padding-bottom: var(--sizeSpacingSN);
	padding-top: var(--sizeSpacingSN);
	padding-left: var(--sizeSpacingSN);
	padding-right: var(--sizeSpacingSN);
}

.va-button.large {
	min-height: var(--sizeButtonL);
}

.va-button.large .button-inner {
	/*min-height:var(--sizeFieldL);*/
	padding-bottom: var(--sizeSpacingXS);
	padding-top: var(--sizeSpacingXS);
	padding-left: var(--sizeSpacingL);
	padding-right: var(--sizeSpacingL);
	min-width: 0.2rem;
	font-size: var(--sizeFontM);
	line-height: var(--sizeLineLN);
	font-weight: var(--fontWeightSemibold);
}

.va-button.large.icon-only {
	min-width: var(--sizeFieldL);
	width: var(--sizeFieldL);
	min-height: var(--sizeFieldL);
	height: var(--sizeFieldL);
}

.va-button.large.icon-only .button-inner {
	gap: 0px;
	min-width: var(--sizeFieldL);
	width: var(--sizeFieldL);
	min-height: var(--sizeFieldL);
	height: var(--sizeFieldL);
	padding-bottom: var(--sizeSpacingS);
	padding-top: var(--sizeSpacingS);
	padding-left: var(--sizeSpacingS);
	padding-right: var(--sizeSpacingS);
}

.va-button.large .text {
	padding-bottom: 1px;
}

.va-button.xlarge {
	min-height: var(--sizeButtonXL);

}

.va-button.xlarge .button-inner {
	min-height: var(--sizeFieldXL);
	padding-bottom: var(--sizeSpacingMN);
	padding-top: var(--sizeSpacingMN);
	padding-left: var(--sizeSpacingXL);
	padding-right: var(--sizeSpacingXL);
	min-width: 0.2rem;
	font-size: var(--sizeFontXL);
	line-height: var(--sizeLineXL);
	font-weight: var(--fontWeightSemibold);
}

.va-button.xlarge.icon-only {
	min-width: var(--sizeFieldXL);
	width: var(--sizeFieldXL);
	min-height: var(--sizeFieldXL);
	height: var(--sizeFieldXL);
}

.va-button.xlarge.icon-only .button-inner {
	gap: 0px;
	min-width: var(--sizeFieldXL);
	width: var(--sizeFieldXL);
	min-height: var(--sizeFieldXL);
	height: var(--sizeFieldXL);
	padding-bottom: var(--sizeSpacingMN);
	padding-top: var(--sizeSpacingMN);
	padding-left: var(--sizeSpacingMN);
	padding-right: var(--sizeSpacingMN);
}

.va-button.pressed {
	color: var(--colorForeground);
	border: var(--sizeBorderM) solid var(--colorNeutralStroke);
	/* colorNeutralForeground); */
	background-color: var(--colorBackgroundPressed);
}

.va-button.focused {
	outline: 0.2rem solid var(--colorFocusLine);
}

.va-button:hover {
	color: var(--colorForeground);
	/*border: var(--sizeBorderM) solid var(--colorNeutralStroke);*/
	background-color: var(--colorSelected);
}

.va-button.actived {
	background-color: var(--colorBackgroundPressed);
}

.va-button.outline {
	color: var(--colorForeground);
	background-color: var(--colorOutline);
	border: var(--sizeBorderM) solid var(--colorOutlineStroke);
}

.va-button.outline.pressed {
	background-color: var(--colorOutlineSelected);
	color: var(--colorForeground);
}

.va-button.outline:hover {
	background-color: var(--colorOutlineHover);
	color: var(--colorForeground);
	outline-style: none;
}

.va-button.outline:active {
	background-color: var(--colorOutlinePressed);
	color: var(--colorForeground);
	outline-style: none;
}

.va-button.outline .icon {
	background-color: var(--colorOutlineForeground);
}

.va-button.outline.hover,
.va-button.outline.active,
.va-button.outline.pressed .icon {
	background-color: var(--colorPrimary);
}

.va-button.outline:active {
	color: var(--colorForeground);
}

.va-button.outline.disabled {
	cursor: not-allowed;
	pointer-events: none;
	color: var(--colorStrokeDisabled);
	background-color: var(--colorOutline);
}

.va-button.subtle {
	color: var(--colorSubtleForeground);
	background-color: var(--colorSubtle);
	border-color: transparent;
}

.va-button.subtle.pressed {
	background-color: var(--colorSubtleSelected);
}

/* 26.10.12 khr 탭 모두닫기 버튼 디자인 수정 */
.va-button.subtle.icon-only[ref='btnCloseAll'] .button-inner {
	display: flex;
}

.va-button.subtle.icon-only[ref='btnCloseAll'] .button-inner .icon {
	width: 26px;
	height: 26px;
	background-color: var(--colorTabBtnIcon)
}

.va-button.subtle:hover {
	color: var(--colorSubtleForeground);
	background-color: var(--colorSubtleHover);
	border-color: transparent;
}

.va-button.subtle:active {
	background-color: var(--colorSubtlePressed);
}

.va-button.subtle.disabled:hover {
	cursor: not-allowed;
	color: var(--colorStrokeDisabled);
	border-color: transparent;
	background-color: var(--colorDisabled);
}

.va-button.subtle .icon {
	background-color: var(--colorSubtleForeground);
}

.va-button.transparent {
	color: var(--colorPrimary);
	border: transparent;
	background-color: var(--colorTransparent);
}

.va-button.transparent.pressed {
	background-color: var(--colorTransparentSelected);
	color: var(--colorTransparentForegroundPressed);
}

.va-button.transparent:hover {
	background-color: var(--colorTransparentHover);
	color: var(--colorTransparentForegroundHover);
}

.va-button.transparent:hover .icon {
	background-color: var(--colorTransparentForegroundHover);
}

.va-button.transparent:active {
	background-color: var(--colorTransparentPressed);
	color: var(--colorTransparentForegroundPressed);
	outline-style: none;
}

.va-button.transparent .icon {
	background-color: var(--colorFieldIcon);
}

.va-button.transparent.hover,
.va-button.transparent.active,
.va-button.transparent.pressed .icon {
	color: var(--colorTransparentForegroundHover);
}

.va-button.transparent.disabled {
	cursor: not-allowed;
	pointer-events: none;
	color: var(--colorStrokeDisabled);
	background-color: var(--colorTransparent);
}

.va-button.help.primary.shadow {
	background-color: var(--colorButtonHelp);
	border: none;
	/*background: #3A4C6B;*/
	box-shadow: -4px -4px 5px 0 var(--colorButtonHelp) inset, 4px 4px 5px 0 #2C3950 inset, -3px -3px 3px 0 #FFF, 3px 3px 3px 0 rgba(88, 112, 158, 0.40);

}

.va-button.disabled {
	cursor: not-allowed;
	pointer-events: none;
	color: var(--colorStrokeDisabled);
	border-color: var(--colorStrokeDisabled);
	background-color: var(--colorDisabled);
}

.va-button.disabled:active {
	color: var(--colorStrokeDisabled);
}

.va-button.disabled:hover {
	cursor: not-allowed;
	pointer-events: none;
	color: var(--colorStrokeDisabled);
	border-color: var(--colorStrokeDisabled);
	background-color: var(--colorDisabled);
}

.va-button.primary {
	color: var(--colorPrimaryForeground);
	border-color: transparent;
	background-color: var(--colorPrimary);
}

.va-button.primary:hover {
	background-color: var(--colorPrimaryHover);
}

.va-button.primary:active {
	color: var(--colorPrimaryForeground);
	border-color: transparent;
	background-color: var(--colorPrimaryPressed);
}

.va-button.primary .icon {
	background-color: var(--colorPrimaryForeground);
}

.va-button.primary.pressed {
	color: var(--colorPrimaryForeground);
	border-color: transparent;
	background-color: var(--colorPrimarySelected);
}

.va-button.primary.disabled:hover {
	cursor: not-allowed;
	color: var(--colorStrokeDisabled);
	border-color: transparent;
	background-color: var(--colorDisabled);
}

.va-button.primary.disabled {
	cursor: not-allowed;
	color: var(--colorStrokeDisabled);
	border-color: transparent;
	background-color: var(--colorDisabled);
}

.va-button.accent {
	color: var(--colorAccentForeground);
	border-color: transparent;
	background-color: var(--colorAccent);
}

.va-button.accent:hover {
	background-color: var(--colorAccentHover);
}

.va-button.accent:active {
	color: var(--colorAccentForeground);
	border-color: transparent;
	background-color: var(--colorAccentPressed);
}

.va-button.accent .icon {
	background-color: var(--colorAccentForeground);
}

.va-button.accent.pressed {
	color: var(--colorAccentForeground);
	border-color: transparent;
	background-color: var(--colorAccentSelected);
}

.va-button.accent.disabled:hover {
	cursor: not-allowed;
	color: var(--colorStrokeDisabled);
	border-color: transparent;
	background-color: var(--colorDisabled);
}

.va-button.accent.disabled {
	cursor: not-allowed;
	color: var(--colorStrokeDisabled);
	border-color: transparent;
	background-color: var(--colorDisabled);
}

.va-button.inverted {
	color: var(--colorInvertedForeground);
	border-color: transparent;
	background-color: var(--colorInverted);
}

.va-button.inverted:hover {
	background-color: var(--colorInvertedHover);
}

.va-button.inverted:active {
	color: var(--colorInvertedForeground);
	border-color: transparent;
	background-color: var(--colorInvertedPressed);
}

.va-button.inverted .icon {
	background-color: var(--colorInvertedForeground);
}

.va-button.inverted.pressed {
	color: var(--colorInvertedForeground);
	border-color: transparent;
	background-color: var(--colorInvertedPressed);
}

.va-button.inverted.disabled:hover {
	cursor: not-allowed;
	color: var(--colorStrokeDisabled);
	border-color: transparent;
	background-color: var(--colorDisabled);
}

.va-button.inverted.disabled {
	cursor: not-allowed;
	color: var(--colorStrokeDisabled);
	border-color: transparent;
	background-color: var(--colorDisabled);
}

.va-button.secondary .icon {
	background-color: var(--colorForeground2);
}

.va-button.secondary {
	background-color: var(--colorSecondary);
	border: 1px solid transparent;
	color: var(--colorSecondaryForeground);
}

.va-button.secondary:hover {
	background-color: var(--colorSecondaryHover);
}

.va-button.secondary:active {
	background-color: var(--colorSecondaryPressed);
}

.va-button.secondary.pressed {
	/*
	color: var(--colorSecondaryForeground);
	border-color: transparent;
	background-color: var(--colorSecondarySelected);
	*/
	color: var(--colorPrimaryForeground);
	border: var(--sizeBorderM) solid var(--colorPrimary);
	background-color: var(--colorPrimary);
}

.va-button.secondary.pressed .icon {
	background-color: var(--colorPrimaryForeground);
}

.va-button.secondary.disabled:hover {
	cursor: not-allowed;
	color: var(--colorStrokeDisabled);
	border-color: transparent;
	background-color: var(--colorDisabled);
}

.va-button.tertiary {
	background-color: var(--colorTertiary);
	border: 1px solid var(--colorTertiaryBorder);
	color: var(--colorTertiaryForeground);
}

.va-button.tertiary:hover {
	background-color: var(--colorTertiaryHover);
}

.va-button.tertiary:active {
	background-color: var(--colorTertiaryPressed);
}

.va-button.tertiary.pressed {
	color: var(--colorTertiaryForeground);
	border-color: transparent;
	background-color: var(--colorTertiary);
}

.va-button.tertiary.disabled:hover {
	cursor: not-allowed;
	color: var(--colorStrokeDisabled);
	border-color: transparent;
	background-color: var(--colorDisabled);
}

.va-button .text {
	color: inherit;
	border: none;
	height: auto;
	background-color: inherit;
	overflow: visible;
	text-overflow: ellipsis;
	/*26.10.08 khr 추가*/
	padding-bottom: 1px !important;
	/*26.10.08 khr 추가*/
	font-weight: 500 !important;
}

.va-button.text:hover {
	background-color: var(--colorSubtleHover);
}

.va-button.text:active {
	background-color: var(--colorSubtlePressed);
}

.va-button.text.pressed {
	outline-offset: -0.4rem;
	outline: var(--sizeBorderL) solid var(--colorPrimary);
}

.va-button.underline {
	color: inherit;
	border: none;
	height: auto;
	text-decoration: underline !important;
	background-color: inherit;
}

.va-button.underline:hover {
	background-color: var(--colorSubtleHover);
}

.va-button.underline:active {
	background-color: var(--colorSubtlePressed);
}

.va-button.underline:focus {
	outline-offset: -0.4rem;
	outline: var(--sizeBorderL) solid var(--colorPrimary);
}

.va-button.underline .button-inner {
	color: inherit;
	border: none;
	height: auto;
	text-decoration: underline !important;
}

.va-button .icon {
	align-items: center;
	display: inline-flex;
	justify-content: center;
	font-size: var(--sizeFontMN);
	height: var(--sizeIconM);
	width: var(--sizeIconM);
	min-width: var(--sizeIconM);
	color: var(--colorForeground);
	background-color: var(--colorFieldIcon);
}

.va-button .icon.close {
	align-items: center;
	display: inline-flex;
	justify-content: center;
	font-size: var(--sizeFontMN);
	height: var(--sizeIconXS);
	width: var(--sizeIconXS);
	min-width: var(--sizeFontL);
	color: var(--colorForeground);
	background-color: var(--colorFieldIcon);
}

.va-button.disabled .icon {
	background-color: var(--colorStrokeDisabled);
}

.va-button.xlarge .icon {
	height: var(--sizeIconXL);
	width: var(--sizeIconXL);
	min-width: var(--sizeIconXL);
}

.va-button.large .icon {
	height: var(--sizeIconL);
	width: var(--sizeIconL);
	min-width: var(--sizeIconL);
}

.va-button.medium .icon {
	height: var(--sizeIconM);
	width: var(--sizeIconM);
	min-width: var(--sizeIconM);
}

.va-button.small .icon {
	height: var(--sizeIconS);
	width: var(--sizeIconS);
	min-width: var(--sizeIconS);
}

.va-button.xsmall .icon {
	height: var(--sizeIconXS);
	width: var(--sizeIconXS);
	min-width: var(--sizeIconXS);
}

.va-button .icon.xlarge {
	height: var(--sizeIconXL);
	width: var(--sizeIconXL);
	min-width: var(--sizeIconXL);
}

.va-button .icon.large {
	height: var(--sizeIconL);
	width: var(--sizeIconL);
	min-width: var(--sizeIconL);
}

.va-button .icon.medium {
	height: var(--sizeIconM);
	width: var(--sizeIconM);
	min-width: var(--sizeIconM);
}

.va-button .icon.small {
	height: var(--sizeIconS);
	width: var(--sizeIconS);
	min-width: var(--sizeIconS);
}

.va-button .icon.xsmall {
	height: var(--sizeIconXS);
	width: var(--sizeIconXS);
	min-width: var(--sizeIconXS);
}

.va-button .icon.menu {
	/*background-color:var(--colorNeutralForeground4);*/
	background-color: var(--colorSecondaryForeground);
}

.va-button .icon.menu.xlarge {
	height: 1.6rem;
	width: 1.6rem;
	min-width: 1.6rem;
}

.va-button .icon.menu.large {
	height: 1.4rem;
	width: 1.4rem;
	min-width: 1.4rem;
}

.va-button .icon.menu.medium {
	height: 1.2rem;
	width: 1.2rem;
	min-width: 1.2rem;
}

.va-button .icon.menu.small {
	height: 0.8rem;
	width: 0.8rem;
	min-width: 0.8rem;
}

.va-button .icon.menu.xsmall {
	height: 0.6rem;
	width: 0.6rem;
	min-width: 0.6rem;
}

.va-button.primary .icon.menu {
	background-color: var(--colorPrimaryForeground);
}

.va-button.secondary .icon.menu {
	background-color: var(--colorSecondaryForeground);
}

.va-button.accent .icon.menu {
	background-color: var(--colorAccentForeground);
}

.va-button.icon-only .button-inner {
	height: var(--sizeIconM);
	padding: var(--sizeSpacingSN) var(--sizeSpacingSN);
}

.va-button .icon.left {
	margin-right: var(--sizeFieldGapM);
}

.va-button .icon.right {
	margin-left: var(--sizeFieldGapM);
}

.va-button .icon.top {
	margin: auto;
}

.va-button .icon.bottom {
	margin: auto;
}

.va-button .content {
	display: inline-flex;
	flex-direction: column;
	text-align: left;
	line-height: var(--sizeFontL);
}

.va-button.xsmall .content {
	gap: var(--sizeFieldGapXS);
}

.va-button.small .content {
	gap: var(--sizeFieldGapS);
}

.va-button.medium .content {
	gap: var(--sizeFieldGapM);
}

.va-button.large .content {
	gap: var(--sizeFieldGapL);
}

.va-button.xlarge .content {
	gap: var(--sizeFieldGapXL);
}

.va-button .primary-content {
	text-align: left;
	font-size: var(--sizeFontMN);
	line-height: var(--sizeFontL);
	font-weight: var(--fontWeightMedium);
}

.va-button .secondary-content {
	text-align: left;
	line-height: var(--sizeFontL);
	font-size: var(--sizeFontS);
	font-weight: var(--fontWeightRegular);
}

.va-button.xsmall .primary-content {
	font-size: var(--sizeFontSN);
	line-height: var(--sizeFontMN);
}

.va-button.xsmall .secondary-content {
	line-height: var(--sizeFontMN);
	font-size: var(--sizeFontSN);
}

.va-button.small .primary-content {
	font-size: var(--sizeFontS);
	line-height: var(--sizeFontM);
}

.va-button.small .secondary-content {
	line-height: var(--sizeFontMN);
	font-size: var(--sizeFontSN);
}

.va-button.medium .primary-content {
	font-size: var(--sizeFontMN);
	line-height: var(--sizeFontL);
}

.va-button.medium .secondary-content {
	line-height: var(--sizeFontM);
	font-size: var(--sizeFontS);
}

.va-button.large .primary-content {
	font-size: var(--sizeFontM);
	line-height: var(--sizeFontXL);
}

.va-button.large .secondary-content {
	line-height: var(--sizeFontL);
	font-size: var(--sizeFontMN);
}

.va-button.xlarge .primary-content {
	font-size: var(--sizeFontL);
	line-height: var(--sizeFontXXL);
}

.va-button.xlarge .secondary-content {
	line-height: var(--sizeFontXL);
	font-size: var(--sizeFontM);
}

.va-button .icon.compound {
	height: var(--sizeIconXL);
	width: var(--sizeIconXL);
}

.va-button.xsmall .icon.compound {
	height: var(--sizeIconM);
	width: var(--sizeIconM);
}

.va-button.small .icon.compound {
	height: var(--sizeIconL);
	width: var(--sizeIconL);
}

.va-button.meidum .icon.compound {
	height: var(--sizeIconXL);
	width: var(--sizeIconXL);
}

.va-button.large .icon.compound {
	height: var(--sizeIconXXL);
	width: var(--sizeIconXXL);
}

.va-button.xlarge .icon.compound {
	height: var(--sizeIconXXXL);
	width: var(--sizeIconXXXL);
}

.va-button .icon.menu {
	width: 1.2rem;
	height: 1.2rem;
	margin-left: 0.5rem;
}

.va-button .icon.menu.left {
	width: 1.2rem;
	height: 1.2rem;
	margin-right: 0.5rem;
}

.va-button.disabled .icon.menu {
	background-color: var(--colorStrokeDisabled);
}

.va-split-button.disabled .menu-button .icon.menu {
	background-color: var(--colorStrokeDisabled);
}

.va-split-button .menu-button {
	min-height: 0.1rem;
	max-width: 3.2rem;
	min-width: 3.2rem;
	align-items: center;
	box-sizing: border-box;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	text-decoration-line: none;
	vertical-align: middle;
	margin: 0rem;
	overflow: hidden;
	background-color: var(--colorBackground);
	color: var(--colorForeground);
	border: var(--sizeBorderM) solid var(--colorNeutralStroke);
	font-family: var(--fontFamilyBase);
	outline-style: none;
	font-size: var(--sizeFontMN);
	font-weight: var(--fontWeightSemibold);
	line-height: var(--sizeFontL);
	border-bottom-left-radius: 0rem;
	border-top-left-radius: 0rem;
	border-left-width: 0rem;
	background-color: var(--colorBackground);
}

.va-split-button .va-button {
	border-bottom-right-radius: 0rem;
	border-top-right-radius: 0rem;
	flex: 1;
}

.va-split-button .menu-button.rounded {
	border-top-right-radius: var(--sizeFieldBorderRadiusM);
	border-bottom-right-radius: var(--sizeFieldBorderRadiusM);
}

.va-split-button .menu-button.circular {
	border-top-right-radius: var(--sizeFieldBorderRadiusCircular);
	border-bottom-right-radius: var(--sizeFieldBorderRadiusCircular);
}

.va-split-button .menu-button.square {
	border-top-right-radius: var(--sizeFieldBorderRadiusNone);
	border-bottom-right-radius: var(--sizeFieldBorderRadiusNone);
}

.va-split-button .menu-button.xsmall {
	min-width: var(--sizeFieldXS);
}

.va-split-button .menu-button.small {
	min-width: var(--sizeFieldS);
}

.va-split-button .menu-button.medium {
	min-width: var(--sizeFieldM);
}

.va-split-button .menu-button.large {
	min-width: var(--sizeFieldL);
}

.va-split-button .menu-button.xlarge {
	min-width: var(--sizeFieldXL);
}

.va-split-button .icon {
	align-items: center;
	display: inline-flex;
	justify-content: center;
	font-size: var(--sizeFontL);
	height: var(--sizeFontL);
	width: var(--sizeFontL);
	background-color: var(--colorForeground);
}

.va-split-button .split-button-inner {
	display: flex;
	flex-direction: row;
	align-items: stretch;
}

.va-split-button .menu-button:hover {
	color: var(--colorForeground);
	border: var(--sizeBorderM) solid var(--colorNeutralForeground);
	border-left: 0.05rem solid transparent;
	background-color: var(--colorBackgroundHover);
}

.va-split-button .menu-button:active {
	color: var(--colorForeground);
	border: var(--sizeBorderM) solid var(--colorNeutralForeground);
	border-left: 0.05rem solid transparent;
	background-color: var(--colorBackgroundPressed);
}

.va-split-button .menu-button .icon {
	background-color: var(--colorForeground);
}

.va-split-button .menu-button.pressed {
	color: var(--colorForeground);
	border: var(--sizeBorderM) solid var(--colorNeutralForeground);
	border-left: 0.05rem solid transparent;
	background-color: var(--colorBackgroundPressed);
}

.va-split-button .menu-button.primary {
	color: var(--colorPrimaryForeground);
	border-color: transparent;
	background-color: var(--colorPrimary);
	border-left: 0.05rem solid var(--colorPrimaryForeground);
}

.va-split-button .menu-button.primary:hover {
	background-color: var(--colorPrimaryHover);

}

.va-split-button .menu-button.primary:active {
	color: var(--colorPrimaryForeground);
	border-color: transparent;
	background-color: var(--colorPrimaryPressed);
}

.va-split-button .menu-button.primary .icon {
	background-color: var(--colorPrimaryForeground);
}

.va-split-button .menu-button.primary.pressed {
	color: var(--colorPrimaryForeground);
	border-color: transparent;
	background-color: var(--colorPrimarySelected);
}

.va-split-button .menu-button.secondary {
	background-color: var(--colorSecondary);
	border: 0px solid var(--colorPrimary);
	color: var(--colorSecondaryForeground);
	border-left: 0.05rem solid var(--colorPrimaryForeground);
}

.va-split-button .menu-button.secondary:hover {
	background-color: var(--colorSecondaryHover);
	border: 1px solid var(--colorPrimary);
}

.va-split-button .menu-button.secondary:active {
	background-color: var(--colorSecondaryPressed);
	border: 1px solid var(--colorPrimary);
}

.va-split-button .menu-button.secondary .icon {
	background-color: var(--colorSecondaryForeground);
}

.va-split-button .menu-button.secondary.pressed {
	color: var(--colorSecondaryForeground);
	border-color: transparent;
	background-color: var(--colorSecondarySelected);
}

.va-split-button .menu-button.outline {
	color: var(--colorOutlineForeground);
	background-color: var(--colorTransparentBackground);
	border: var(--sizeBorderM) solid var(--colorOutlineStroke);
	border-left: 0.05rem solid transparent;
}

.va-split-button .menu-button.outline.pressed {
	/* 어디에 사용 */
	background-color: var(--colorTransparentBackground);
	border-bottom-width: var(--sizeBorderXL);
	border-left: 0.05rem solid transparent;
}

.va-split-button .menu-button.outline:hover {
	background-color: var(--colorTransparentBackgroundPressed);
	border-color: var(--colorNeutralForegroundPressed);
	border-left: 0.05rem solid transparent;
	color: var(--colorForegroundPressed);
	outline-style: none;
}

.va-split-button .menu-button.outline:active {
	background-color: var(--colorTransparentBackgroundPressed);
	border-color: var(--colorNeutralForegroundPressed);
	border-left: 0.05rem solid transparent;
	color: var(--colorForegroundPressed);
	outline-style: none;
}

.va-split-button .menu-button.outline .icon {
	background-color: var(--colorForegroundPressed);
}

.va-split-button .menu-button.subtle {
	color: var(--colorForeground2);
	background-color: var(--colorSubtle);
	border-color: transparent;
}

.va-split-button .menu-button.subtle.pressed {
	background-color: var(--colorSubtleSelected);
	border-bottom-width: var(--sizeBorderXL);
}

.va-split-button .menu-button.subtle:hover {
	color: var(--colorForeground2);
	background-color: var(--colorSubtleHover);
	border-color: transparent;
}

.va-split-button .menu-button.subtle:active {
	color: var(--colorForeground2);
	background-color: var(--colorSubtlePressed);
	border-color: transparent;
}

.va-split-button .menu-button.subtle .icon {
	background-color: var(--colorForeground2);
}

.va-split-button .menu-button.transparent {
	color: var(--colorForeground2);
	background-color: var(--colorTransparentBackground);
	border-color: transparent;
}

.va-split-button .menu-button.transparent.pressed {
	color: var(--colorForeground2BrandHover);
	background-color: var(--colorTransparentBackground);
	border-color: transparent;
}

.va-split-button .menu-button.transparent:hover {
	color: var(--colorForeground2BrandHover);
}

.va-split-button .menu-button.transparent:active {
	color: var(--colorForeground2BrandPressed);
}

.va-split-button .menu-button.subtle .icon {
	background-color: var(--colorForeground2);
}

.va-split-button .menu-button.disabled {
	cursor: not-allowed;
	color: var(--colorStrokeDisabled);
	border-color: var(--colorStrokeDisabled);
	background-color: var(--colorDisabled);
}

.va-split-button .menu-button.primary.disabled {
	cursor: not-allowed;
	color: var(--colorStrokeDisabled);
	border-color: transparent;
	background-color: var(--colorDisabled);
}

.va-split-button .menu-button.subtle.disabled {
	cursor: not-allowed;
	color: var(--colorStrokeDisabled);
	border-color: transparent;
	background-color: var(--colorDisabled);
}

.va-split-button .menu-button.primary.disabled {
	cursor: not-allowed;
	color: var(--colorStrokeDisabled);
	border-color: transparent;
	background-color: var(--colorDisabled);
}

.va-split-button .menu-button.disabled:hover {
	cursor: not-allowed;
	color: var(--colorStrokeDisabled);
	border-color: var(--colorStrokeDisabled);
	background-color: var(--colorDisabled);
}

.va-split-button .menu-button.primary.disabled:hover {
	cursor: not-allowed;
	color: var(--colorStrokeDisabled);
	border-color: transparent;
	background-color: var(--colorDisabled);
}

.va-split-button .menu-button.subtle.disabled:hover {
	cursor: not-allowed;
	color: var(--colorStrokeDisabled);
	border-color: transparent;
	background-color: var(--colorDisabled);
}

.va-split-button .menu-button.primary.disabled:hover {
	cursor: not-allowed;
	color: var(--colorStrokeDisabled);
	border-color: transparent;
	background-color: var(--colorDisabled);
}

.va-split-button .menu-button.tertiary {
	color: var(--colorForeground);
	border: var(--sizeBorderM) solid var(--colorNeutralForeground);
	border-left: 0.05rem solid transparent;
}

.va-split-button .menu-button.tertiary.pressed {
	color: var(--colorForeground);
	border: var(--sizeBorderM) solid var(--colorNeutralForeground);
	border-left: 0.05rem solid transparent;
	background-color: var(--colorBackgroundPressed);
}

.va-split-button .menu-button.tertiary:hover {
	color: var(--colorForeground);
	border: var(--sizeBorderM) solid var(--colorNeutralForeground);
	border-left: 0.05rem solid transparent;
	background-color: var(--colorBackgroundHover);
}

.va-split-button .menu-button.tertiary:active {
	color: var(--colorForeground);
	border: var(--sizeBorderM) solid var(--colorNeutralForeground);
	border-left: 0.05rem solid transparent;
	background-color: var(--colorBackgroundPressed);
}

.va-split-button .menu-button.tertiary .icon {
	background-color: var(--colorForeground);
}

.va-split-button .menu-button.accent {
	color: var(--colorAccentForeground);
	border-color: transparent;
	background-color: var(--colorAccent);
	border-left: 0.05rem solid var(--colorAccentForeground);
}

.va-split-button .menu-button.accent.pressed {
	color: var(--colorAccentForeground);
	border-color: transparent;
	background-color: var(--colorAccentSelected);
	border-left: 0.05rem solid var(--colorAccentForeground);
}

.va-split-button .menu-button.accent:hover {
	background-color: var(--colorAccentHover);
}

.va-split-button .menu-button.accent:active {
	color: var(--colorAccentForeground);
	border-color: transparent;
	background-color: var(--colorAccentPressed);
	border-left: 0.05rem solid var(--colorAccentForeground);
}

.va-split-button .menu-button.accent .icon {
	background-color: var(--colorAccentForeground);
}

.va-split-button .menu-button.inverted {
	color: var(--colorAccentForeground);
	border-color: transparent;
	background-color: var(--colorInverted);
	border-left: 0.05rem solid var(--colorAccentForeground);
}

.va-split-button .menu-button.inverted.pressed {
	color: var(--colorInvertedForeground);
	border-color: transparent;
	background-color: var(--colorInvertedSelected);
	border-left: 0.05rem solid var(--colorAccentForeground);
}

.va-split-button .menu-button.inverted:hover {
	background-color: var(--colorInvertedHover);
}

.va-split-button .menu-button.inverted:active {
	color: var(--colorInvertedForeground);
	border-color: transparent;
	background-color: var(--colorInvertedPressed);
	border-left: 0.05rem solid var(--colorAccentForeground);
}

.va-split-button .menu-button.inverted .icon {
	background-color: var(--colorInvertedForeground);
}

.va-split-button.large .icon {
	height: var(--sizeFontXL);
	width: var(--sizeFontXL);
}

.va-split-button.medium .icon {
	height: var(--sizeFontL);
	width: var(--sizeFontL);
}

.va-split-button.small .icon {
	height: var(--sizeFontM);
	width: var(--sizeFontM);
}

.va-split-button .icon.left {
	margin-right: var(--sizeSpacingSN);
}

.va-split-button .icon.right {
	margin-left: var(--sizeSpacingSN);
}

.va-split-button .menu-button .icon.menu {
	margin-top: 0.3rem;
	width: 1.2rem;
	height: 1.2rem;
	margin-left: 0.5rem;
	margin-bottom: 0.3rem;
}

.va-split-button .menu-button {
	border-top-right-radius: var(--sizeFieldBorderRadiusM);
	border-bottom-right-radius: var(--sizeFieldBorderRadiusM);
}

.va-split-button .menu-button.rounded {
	border-top-right-radius: var(--sizeFieldBorderRadiusM);
	border-bottom-right-radius: var(--sizeFieldBorderRadiusM);
}

.va-split-button .menu-button.circular {
	border-top-right-radius: var(--sizeFieldBorderRadiusCircular);
	border-bottom-right-radius: var(--sizeFieldBorderRadiusCircular);
}

.va-split-button .menu-button.square {
	border-top-right-radius: var(--sizeFieldBorderRadiusNone);
	border-bottom-right-radius: var(--sizeFieldBorderRadiusNone);
}

.va-split-button.focused {
	outline: 0.2rem solid var(--colorFocusLine);
}

.va-expand-button {
	display: block;
}

.va-expand-button .expand-button-inner {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
	gap: 0.2rem;
}

.va-expand-button .va-menu-expand {
	border: 0px;
}

.va-expand-button .va-menu-expand .menu-expand-inner {
	gap: 0.2rem;
}

.va-responsive-button {
	display: block;
}

.responsive-button-inner {
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.va-responsive-expand {
	margin-top: var(--sizeSpacingXXS);
	border: var(--sizeBorderM) solid var(--colorNeutralStroke);
	font-weight: var(--fontWeightRegular);
	font-size: var(--sizeFontMN);
	font-family: var(--fontFamilyBase);
	background-color: var(--colorBackground);
	color: var(--colorForeground);
}

.va-responsive-expand .responsive-expand-inner {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.va-title {
	font-size: var(--sizeFontXL);
	font-weight: var(--fontWeightBold);
	line-height: 150%;
}

.va-h1 {
	font-size: var(--sizeFontXXXL);
	font-weight: var(--fontWeightSemibold);
	line-height: 150%;
}

.va-h2 {
	font-size: var(--sizeFontXL);
	font-weight: var(--fontWeightSemibold);
	line-height: 150%;
}

.va-h3 {
	font-size: var(--sizeFontM);
	font-weight: var(--fontWeightSemibold);
	line-height: 150%;
}

.va-h4 {
	font-size: var(--sizeFontMN);
	font-weight: var(--fontWeightSemibold);
	line-height: 150%;
}

.va-h5 {
	font-size: var(--sizeFontS);
	font-weight: var(--fontWeightSemibold);
	line-height: 150%;
}

.va-h6 {
	font-size: var(--sizeFontSN);
	font-weight: var(--fontWeightSemibold);
	line-height: 150%;
}

.va-step-indicator {
	display: block;
	position: relative;
	overflow: auto;
}

.va-step-indicator .step-indicator-inner {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	height: 100%;
	position: absolute;
	width: 100%;
}

.va-step-indicator.vertical .step-indicator-inner {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
	height: 100%;
}

.va-step-indicator .step-indicator-inner .va-step {
	flex: 1,
}

.va-step {
	flex: 1;
}

.va-step .step-inner {
	position: relative;
	height: 100%;
}

.va-step .line {
	background-color: var(--colorPrimary);
	position: absolute;
	top: 1rem;
	left: 0;
	content: "";
	width: 100%;
	height: 0.1rem;
}

.va-step.vertical .line {
	background-color: var(--colorPrimary);
	position: absolute;
	top: 0rem;
	left: 1rem;
	content: "";
	width: 0.1rem;
	height: 100%;
}

.va-step .step {
	width: 1.8rem;
	height: 1.8rem;
	margin-top: 0.2rem;
	border: 0;
	background-color: var(--colorPrimary);
	position: absolute;
	top: 0;
	left: 0;
	content: "";
	border-radius: 50%;
}

.va-step.vertical .step {
	width: 1.8rem;
	height: 1.8rem;
	margin-left: 0.2rem;
	border: 0;
	background-color: var(--colorPrimary);
	position: absolute;
	top: 0;
	left: 0;
	content: "";
	border-radius: 50%;
}

.va-step .step-icon {
	width: 1.4rem;
	height: 1.4rem;
	margin-top: 0.2rem;
	margin-left: 0.2rem;
	border: 0;
	background-color: white;
	position: absolute;
	top: 0;
	left: 0;
	content: "";
	border-radius: var(--krds-rd-full);
}

.va-step.vertical .step-icon {
	width: 1.4rem;
	height: 1.4rem;
	margin-top: 0.2rem;
	margin-left: 0.2rem;
	border: 0;
	background-color: white;
	position: absolute;
	top: 0;
	left: 0;
	content: "";
	border-radius: var(--krds-rd-full);
}

.va-step .step-content {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	padding: 2.5rem 0 0 0;
}

.va-step.vertical .step-content {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	padding: 0 0 0 3.5rem;
}

.va-accordion {
	position: relative;
}

.va-accordion .accordion-inner {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
	position: absolute;
}

.va-accordion .va-button .text {
	flex: 1;
	text-align: left;
	overflow: hidden;
	text-overflow: ellipsis;
}

.va-menu-bar {
	padding-left: 1rem;
	padding-right: 1rem;
	margin: 0 auto;
	background-color: var(--colorBackground);
}

.va-menu-bar.gray {
	background-color: var(--colorGray);
}

.va-menu-bar.primary {
	background-color: var(--colorPrimary);
}

.va-menu-bar.border {
	border-top: 0.1rem solid var(--colorBorder);
	border-bottom: 0.1rem solid var(--colorBorder);
}

.va-side-icon-menu-bar {
	padding-left: 1rem;
	padding-right: 1rem;
	margin: 0 auto;
	background-color: var(--colorBackground);
}

.va-side-icon-menu-bar.gray {
	background-color: var(--colorGray);
}

.va-side-icon-menu-bar.primary {
	background-color: var(--colorPrimary);
}

.va-side-icon-menu-bar.border {
	border-top: 0.1rem solid var(--colorBorder);
	border-bottom: 0.1rem solid var(--colorBorder);
}

.va-side-icon-menu-bar .side-icon-menu-bar-inner {
	position: relative;
	display: flex;
	align-items: start;
	gap: var(--sizeGapS);
}

.va-side-icon-menu-bar .side-icon-menu-bar-inner .side-icon-menu-bar-content {
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: start;
	gap: var(--sizeGapS);
}

.va-pop-cover {
	opacity: 0.7;
	inset: 0rem;
	background-color: transparent;
	backdrop-filter: blur(0.3rem);
	display: none;
	position: absolute;
	left: 0rem;
	top: 0rem;
	right: 0rem;
	bottom: 0rem;
	box-sizing: border-box;
	margin: 0;
}

.va-menu-pop {
	display: none;
	position: absolute;
	padding-bottom: 0.4rem;
	padding-top: 0.4rem;
	box-shadow: var(--shadowM);
	width: max-content;
	min-width: 1rem;
	border: var(--sizeBorderM) solid var(--colorNeutralStroke);
	box-sizing: border-box;
	padding-right: 1.2rem;
	padding-left: 1.2rem;
	border-radius: var(--sizeFieldBorderRadiusM);
	line-height: var(--sizeFontL);
	font-weight: var(--fontWeightRegular);
	font-size: var(--sizeFontMN);
	font-family: var(--fontFamilyBase);
	background-color: var(--colorBackground);
	color: var(--colorForeground);
	min-width: max-content;
	/*overflow:auto; do not change - check menubutton, combobox*/
}

.va-menu-pop .menu-pop-inner {
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: var(--sizeFieldGapM);
}

.va-menu-pop .calendar-inner {
	display: auto;
}

.va-menu-pop.primary {
	background-color: var(--colorPrimary);
	border: var(--sizeBorderM) solid var(--colorPrimary);
	color: var(--colorPrimaryForeground);
}

.va-menu-pop.secondary {
	background-color: var(--colorSecondary);
	border: var(--sizeBorderM) solid var(--colorSecondary);
	color: var(--colorSecondaryForeground);
}

.va-menu-pop.accent {
	background-color: var(--colorAccent);
	border: var(--sizeBorderM) solid var(--colorAccent);
	color: var(--colorAccentForeground);
}

.va-menu-expand {
	margin-top: var(--sizeSpacingXXS);
	border: var(--sizeBorderM) solid var(--colorNeutralStroke);
	font-weight: var(--fontWeightRegular);
	font-size: var(--sizeFontMN);
	font-family: var(--fontFamilyBase);
	/*background-color: var(--colorBackground);*/
	background-color: var(--colorBackground);
	color: var(--colorForeground);
}

.va-menu-expand .menu-expand-inner {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.va-menu-button {
	display: block;
}

.va-menu-button.focus {
	outline: 0.2rem solid var(--colorFocusLine);
}

.va-menu-button .menu-button-inner {
	display: flex;
	flex-direction: column;
}

.va-menu-button-cover .menu-button-cover-inner {
	display: flex;
	flex-direction: column;
}

.va-menu-button .button-content.left {
	justify-content: start;
}

.va-menu-button .button-content.center {
	justify-content: center;
}

.va-menu-button .button-content.right {
	justify-content: end;
}

.menu-button-pop-div {
	height: 0px;
	position: relative;
}

.va-menu-item {
	display: flex;
	flex-direction: row;
	align-items: center;
	border-radius: var(--sizeFieldBorderRadiusM);
	position: relative;
	color: var(--colorForeground2);
	background-color: var(--colorBackground);
	padding-left: var(--sizeSpacingM);
	padding-right: var(--sizeSpacingM);
	box-sizing: border-box;
	min-height: var(--sizeFieldM);
	flex-shrink: 0;
	display: flex;
	font-size: var(--sizeFontMN);
	cursor: pointer;
	gap: 0.4rem;
	user-select: none;
	line-height: var(--sizeFontL);
	font-weight: var(--fontWeightRegular);
	font-family: var(--fontFamilyBase);
}

.va-menu-item .content {
	padding-left: 0.2rem;
	padding-right: 0.2rem;
	background-color: transparent;
	flex-grow: 1;
	display: flex;
	flex-direction: row;
	align-items: center;
	border-color: transparent;
}

.va-menu-item .seconary-content {
	padding-left: 0.2rem;
	padding-right: 0.2rem;
	font-family: var(--fontFamilyBase);
	font-size: var(--sizeFontS);
	font-weight: var(--fontWeightRegular);
	line-height: var(--sizeFontL);
	color: var(--colorForeground3);
}

.va-menu-item.selected {
	background-color: var(--colorSubtleSelected);
	border-bottom-width: var(--sizeBorderXL);
}

.va-menu-item:hover {
	color: var(--colorForeground2);
	background-color: var(--colorSubtleHover);
	border-color: transparent;
}

.va-menu-item:active {
	color: var(--colorForeground2);
	background-color: var(--colorSubtlePressed);
	border-color: transparent;
}

.va-menu-item .icon {
	align-items: center;
	display: inline-flex;
	justify-content: center;
	font-size: var(--sizeFontL);
	height: var(--sizeFontL);
	width: var(--sizeFontL);
	background-color: var(--colorForeground);
}

.va-menu-item:hover .icon {
	background-color: var(--colorPrimary);
}

.va-menu-item.xsmall {
	min-height: var(--sizeFieldXS);
}

.va-menu-item.small {
	min-height: var(--sizeFieldS);
}

.va-menu-item.medium {
	min-height: var(--sizeFieldM);
}

.va-menu-item.large {
	min-height: var(--sizeFieldL);
}

.va-menu-item.xlarge {
	min-height: var(--sizeFieldXL);
}

.va-menu-item.large .icon {
	height: var(--sizeFontXL);
	width: var(--sizeFontXL);
}

.va-menu-item.medium .icon {
	height: var(--sizeFontL);
	width: var(--sizeFontL);
}

.va-menu-item.small .icon {
	height: var(--sizeFontM);
	width: var(--sizeFontM);
}

.va-menu-item .icon.left {
	margin-right: var(--sizeSpacingSN);
}

.va-menu-item .icon.right {
	margin-left: var(--sizeSpacingSN);
}

.va-menu-item .icon.menu {
	margin-top: 0.5rem;
	width: 1.2rem;
	height: 1.2rem;
	margin-left: 0.5rem;
	color: var(--colorPrimary);
}

.va-menu-item.primary {
	color: var(--colorPrimaryForeground);
	border-color: transparent;
	background-color: var(--colorPrimary);
}

.va-menu-item.primary:hover {
	background-color: var(--colorPrimaryHover);
}

.va-menu-item.primary:active {
	color: var(--colorPrimaryForeground);
	border-color: transparent;
	background-color: var(--colorPrimaryPressed);
}

.va-menu-item.primary .icon {
	background-color: var(--colorPrimaryForeground);
}

.va-menu-item.primary.pressed {
	color: var(--colorPrimaryForeground);
	border-color: transparent;
	background-color: var(--colorPrimarySelected);
}

.va-menu-item.primary.disabled:hover {
	cursor: not-allowed;
	color: var(--colorStrokeDisabled);
	border-color: transparent;
	background-color: var(--colorDisabled);
}

.va-menu-item.primary.disabled {
	cursor: not-allowed;
	color: var(--colorStrokeDisabled);
	border-color: transparent;
	background-color: var(--colorDisabled);
}

.va-menu-item.accent {
	color: var(--colorAccentForeground);
	border-color: transparent;
	background-color: var(--colorAccent);
}

.va-menu-item.accent:hover {
	background-color: var(--colorAccentHover);
}

.va-menu-item.accent:active {
	color: var(--colorAccentForeground);
	border-color: transparent;
	background-color: var(--colorAccentPressed);
}

.va-menu-item.accent .icon {
	background-color: var(--colorAccentForeground);
}

.va-menu-item.accent.pressed {
	color: var(--colorAccentForeground);
	border-color: transparent;
	background-color: var(--colorAccentSelected);
}

.va-menu-item.accent.disabled:hover {
	cursor: not-allowed;
	color: var(--colorStrokeDisabled);
	border-color: transparent;
	background-color: var(--colorDisabled);
}

.va-menu-item.accent.disabled {
	cursor: not-allowed;
	color: var(--colorStrokeDisabled);
	border-color: transparent;
	background-color: var(--colorDisabled);
}

.va-menu-item.inverted {
	color: var(--colorInvertedForeground);
	border-color: transparent;
	background-color: var(--colorInverted);
}

.va-menu-item.inverted:hover {
	background-color: var(--colorInvertedHover);
}

.va-menu-item.inverted:active {
	color: var(--colorInvertedForeground);
	border-color: transparent;
	background-color: var(--colorInvertedPressed);
}

.va-menu-item.inverted .icon {
	background-color: var(--colorInvertedForeground);
}

.va-menu-item.inverted.pressed {
	color: var(--colorInvertedForeground);
	border-color: transparent;
	background-color: var(--colorInvertedPressed);
}

.va-menu-item.inverted.disabled:hover {
	cursor: not-allowed;
	color: var(--colorStrokeDisabled);
	border-color: transparent;
	background-color: var(--colorDisabled);
}

.va-menu-item.inverted.disabled {
	cursor: not-allowed;
	color: var(--colorStrokeDisabled);
	border-color: transparent;
	background-color: var(--colorDisabled);
}

.va-menu-item.secondary .icon {
	background-color: var(--colorForeground2);
}

.va-menu-item.secondary {
	background-color: var(--colorSecondary);
	border: 1px solid transparent;
	color: var(--colorSecondaryForeground);
}

.va-menu-item.secondary:hover {
	background-color: var(--colorSecondaryHover);
}

.va-menu-item.secondary:active {
	background-color: var(--colorSecondaryPressed);
}

.va-menu-item.secondary.pressed {
	color: var(--colorSecondaryForeground);
	border-color: transparent;
	background-color: var(--colorSecondarySelected);
}

.va-menu-item.secondary.disabled:hover {
	cursor: not-allowed;
	color: var(--colorStrokeDisabled);
	border-color: transparent;
	background-color: var(--colorDisabled);
}

.va-menu-item.tertiary {
	background-color: var(--colorTertiary);
	border: 1px solid var(--colorTertiaryBorder);
	color: var(--colorTertiaryForeground);
}

.va-menu-item.tertiary:hover {
	background-color: var(--colorTertiaryHover);
}

.va-menu-item.tertiary:active {
	background-color: var(--colorTertiaryPressed);
}

.va-menu-item.tertiary.pressed {
	color: var(--colorTertiaryForeground);
	border-color: transparent;
	background-color: var(--colorTertiary);
}

.va-menu-item.tertiary.disabled:hover {
	cursor: not-allowed;
	color: var(--colorStrokeDisabled);
	border-color: transparent;
	background-color: var(--colorDisabled);
}

.va-menu-item .text {
	color: inherit;
	border: none;
	height: auto;
	background-color: inherit;
	overflow: hidden;
	text-overflow: ellipsis;
}

.va-menu-item.text:hover {
	background-color: var(--colorSubtleHover);
}

.va-menu-item.text:active {
	background-color: var(--colorSubtlePressed);
}

.va-menu-item.text.pressed {
	outline-offset: -0.4rem;
	outline: var(--sizeBorderL) solid var(--colorPrimary);
}

.va-menu-item.underline {
	color: inherit;
	border: none;
	height: auto;
	text-decoration: underline !important;
	background-color: inherit;
}

.va-menu-item.underline:hover {
	background-color: var(--colorSubtleHover);
}

.va-menu-item.underline:active {
	background-color: var(--colorSubtlePressed);
}

.va-menu-item.underline:focus {
	outline-offset: -0.4rem;
	outline: var(--sizeBorderL) solid var(--colorPrimary);
}

.va-menu-item.underline .button-inner {
	color: inherit;
	border: none;
	height: auto;
	text-decoration: underline !important;
}

.va-menu-item .icon {
	align-items: center;
	display: inline-flex;
	justify-content: center;
	font-size: var(--sizeFontMN);
	height: var(--sizeIconM);
	width: var(--sizeIconM);
	min-width: var(--sizeIconM);
	color: var(--colorForeground);
	background-color: var(--colorForeground);
}

.va-menu-item .icon.close {
	align-items: center;
	display: inline-flex;
	justify-content: center;
	font-size: var(--sizeFontMN);
	height: var(--sizeIconXS);
	width: var(--sizeIconXS);
	min-width: var(--sizeFontL);
	color: var(--colorForeground);
	background-color: var(--colorForeground);
}

.va-menu-item.xlarge .icon {
	height: var(--sizeIconXL);
	width: var(--sizeIconXL);
	min-width: var(--sizeIconXL);
}

.va-menu-item.large .icon {
	height: var(--sizeIconL);
	width: var(--sizeIconL);
	min-width: var(--sizeIconL);
}

.va-menu-item.medium .icon {
	height: var(--sizeIconM);
	width: var(--sizeIconM);
	min-width: var(--sizeIconM);
}

.va-menu-item.small .icon {
	height: var(--sizeIconS);
	width: var(--sizeIconS);
	min-width: var(--sizeIconS);
}

.va-menu-item.xsmall .icon {
	height: var(--sizeIconXS);
	width: var(--sizeIconXS);
	min-width: var(--sizeIconXS);
}

.va-menu-item .icon.xlarge {
	height: var(--sizeIconXL);
	width: var(--sizeIconXL);
	min-width: var(--sizeIconXL);
}

.va-menu-item .icon.large {
	height: var(--sizeIconL);
	width: var(--sizeIconL);
	min-width: var(--sizeIconL);
}

.va-menu-item .icon.medium {
	height: var(--sizeIconM);
	width: var(--sizeIconM);
	min-width: var(--sizeIconM);
}

.va-menu-item .icon.small {
	height: var(--sizeIconS);
	width: var(--sizeIconS);
	min-width: var(--sizeIconS);
}

.va-menu-item .icon.xsmall {
	height: var(--sizeIconXS);
	width: var(--sizeIconXS);
	min-width: var(--sizeIconXS);
}

.va-menu-item .icon.menu.xlarge {
	height: 1.6rem;
	width: 1.6rem;
	min-width: 1.6rem;
}

.va-menu-item .icon.menu.large {
	height: 1.4rem;
	width: 1.4rem;
	min-width: 1.4rem;
}

.va-menu-item .icon.menu.medium {
	height: 1.2rem;
	width: 1.2rem;
	min-width: 1.2rem;
}

.va-menu-item .icon.menu.small {
	height: 0.8rem;
	width: 0.8rem;
	min-width: 0.8rem;
}

.va-menu-item .icon.menu.xsmall {
	height: 0.6rem;
	width: 0.6rem;
	min-width: 0.6rem;
}

.va-menu-item.icon-only .button-inner {
	height: var(--sizeIconM);
	padding: var(--sizeSpacingSN) var(--sizeSpacingSN);
}

.va-menu-item .icon.left {
	margin-right: var(--sizeFieldGapM);
}

.va-menu-item .icon.right {
	margin-left: var(--sizeFieldGapM);
}

.va-menu-item .icon.top {
	margin: auto;
}

.va-menu-item .icon.bottom {
	margin: auto;
}

.va-menu-item .content {
	display: inline-flex;
	flex-direction: column;
	text-align: left;
	line-height: var(--sizeFontL);
}

.va-menu-item .content.left {
	align-items: start;
}

.va-menu-item .content.right {
	align-items: end;
}

.va-menu-item .content.center {
	align-items: center;
}

.va-menu-item.xsmall .content {
	gap: var(--sizeFieldGapXS);
}

.va-menu-item.small .content {
	gap: var(--sizeFieldGapS);
}

.va-menu-item.medium .content {
	gap: var(--sizeFieldGapM);
}

.va-menu-item.large .content {
	gap: var(--sizeFieldGapL);
}

.va-menu-item.xlarge .content {
	gap: var(--sizeFieldGapXL);
}

.va-menu-item .primary-content {
	text-align: left;
	font-size: var(--sizeFontMN);
	line-height: var(--sizeFontL);
	font-weight: var(--fontWeightMedium);
}

.va-menu-item .secondary-content {
	text-align: left;
	line-height: var(--sizeFontL);
	font-size: var(--sizeFontS);
	font-weight: var(--fontWeightRegular);
}

.va-menu-item.xsmall .primary-content {
	font-size: var(--sizeFontSN);
	line-height: var(--sizeFontMN);
}

.va-menu-item.xsmall .secondary-content {
	line-height: var(--sizeFontMN);
	font-size: var(--sizeFontSN);
}

.va-menu-item.small .primary-content {
	font-size: var(--sizeFontS);
	line-height: var(--sizeFontM);
}

.va-menu-item.small .secondary-content {
	line-height: var(--sizeFontMN);
	font-size: var(--sizeFontSN);
}

.va-menu-item.medium .primary-content {
	font-size: var(--sizeFontMN);
	line-height: var(--sizeFontL);
}

.va-menu-item.medium .secondary-content {
	line-height: var(--sizeFontM);
	font-size: var(--sizeFontS);
}

.va-menu-item.large .primary-content {
	font-size: var(--sizeFontM);
	line-height: var(--sizeFontXL);
}

.va-menu-item.large .secondary-content {
	line-height: var(--sizeFontL);
	font-size: var(--sizeFontMN);
}

.va-menu-item.xlarge .primary-content {
	font-size: var(--sizeFontL);
	line-height: var(--sizeFontXXL);
}

.va-menu-item.xlarge .secondary-content {
	line-height: var(--sizeFontXL);
	font-size: var(--sizeFontM);
}

.va-menu-item .icon.compound {
	height: var(--sizeIconXL);
	width: var(--sizeIconXL);
}

.va-menu-item.xsmall .icon.compound {
	height: var(--sizeIconM);
	width: var(--sizeIconM);
}

.va-menu-item.small .icon.compound {
	height: var(--sizeIconL);
	width: var(--sizeIconL);
}

.va-menu-item.meidum .icon.compound {
	height: var(--sizeIconXL);
	width: var(--sizeIconXL);
}

.va-menu-item.large .icon.compound {
	height: var(--sizeIconXXL);
	width: var(--sizeIconXXL);
}

.va-menu-item.xlarge .icon.compound {
	height: var(--sizeIconXXXL);
	width: var(--sizeIconXXXL);
}

.va-menu-item .icon.menu {
	width: 1.2rem;
	height: 1.2rem;
	margin-left: 0.5rem;
	color: var(--colorPrimary);
}

.va-menu-item .icon.menu.left {
	width: 1.2rem;
	height: 1.2rem;
	margin-right: 0.5rem;
}

.va-menu-item.disabled .icon.menu {
	background-color: var(--colorStrokeDisabled);
}

.va-menu-item.focused {
	outline: 0.2rem solid var(--colorFocusLine);
}


.va-responsive-menu-button {
	border: 0px;
	padding: 0px;
	margin: 0px;
	background-color: transparent;
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.va-responsive-menu-button .body {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	padding: 0px 5px;
}

.va-trapezoid-button {
	display: block;
	margin-right: -2rem;
	/*
	background-color: transparent;
	mask-image:url(../icons/ico_trapezoid_fill.svg); 
	
	mask-size:120%;
	background-color: var(--colorPrimary);
	color:var(--colorInverted);
	mask-repeat: no-repeat;
    mask-position: center center;
	margin-left:-10px;
	*/
}

.va-trapezoid-button .trapezoid-button-inner {
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	position: relative;

}

.va-trapezoid-button .trapezoid-button-inner .trapezoid-button {
	background-color: var(--colorSecondary);
	color: var(--colorStroke);
	flex: 1;
	height: var(--sizeTabButtonM);
	font-size: 1.4rem;
}

.va-trapezoid-button .trapezoid-button-inner .trapezoid-button-left {
	width: var(--sizeTabButtonSideM);
	height: var(--sizeTabButtonM);
	border-bottom: var(--sizeTabButtonM) solid var(--colorSecondary);
	;
	border-left: var(--sizeTabButtonSideM) solid transparent;
	z-index: 0;
}

.va-trapezoid-button .trapezoid-button-inner .trapezoid-button-right {
	width: var(--sizeTabButtonSideM);
	height: var(--sizeTabButtonM);
	border-bottom: var(--sizeTabButtonM) solid var(--colorSecondary);
	;
	border-right: var(--sizeTabButtonSideM) solid transparent;
	z-index: 0;
}

.va-trapezoid-button .trapezoid-button-inner .trapezoid-button-left-bottom {
	width: var(--sizeTabButtonSideM);
	height: var(--sizeTabButtonM);
	border-top: var(--sizeTabButtonM) solid var(--colorSecondary);
	;
	border-left: var(--sizeTabButtonSideM) solid transparent;
	z-index: 0;
}

.va-trapezoid-button .trapezoid-button-inner .trapezoid-button-right-bottom {
	width: var(--sizeTabButtonSideM);
	height: var(--sizeTabButtonM);
	border-top: var(--sizeTabButtonM) solid var(--colorSecondary);
	;
	border-right: var(--sizeTabButtonSideM) solid transparent;
	z-index: 0;
}

.va-trapezoid-button.active .trapezoid-button-inner .trapezoid-button {
	background-color: var(--colorPrimary);
	color: var(--colorPrimaryForeground);
}

.va-trapezoid-button.active .trapezoid-button-inner .trapezoid-button-left {
	width: var(--sizeTabButtonSideM);
	height: var(--sizeTabButtonM);
	border-bottom: var(--sizeTabButtonM) solid var(--colorPrimary);
	border-left: var(--sizeTabButtonSideM) solid transparent;
	z-index: 1;
}

.va-trapezoid-button.active .trapezoid-button-inner .trapezoid-button-right {
	width: var(--sizeTabButtonSideM);
	height: var(--sizeTabButtonM);
	border-bottom: var(--sizeTabButtonM) solid var(--colorPrimary);
	border-right: var(--sizeTabButtonSideM) solid transparent;
	z-index: 1;
}

.va-trapezoid-button.active .trapezoid-button-inner .trapezoid-button-left-bottom {
	width: var(--sizeTabButtonSideM);
	height: var(--sizeTabButtonM);
	border-top: 3var(--sizeTabButtonM) solid var(--colorPrimary);
	border-left: var(--sizeTabButtonSideM) solid transparent;
	z-index: 1;
}

.va-trapezoid-button.active .trapezoid-button-inner .trapezoid-button-right-bottom {
	width: var(--sizeTabButtonSideM);
	height: var(--sizeTabButtonM);
	border-top: var(--sizeTabButtonM) solid var(--colorPrimary);
	border-right: var(--sizeTabButtonSideM) solid transparent;
	z-index: 1;
}

.va-trapezoid-button .button-inner {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 0 0.8rem;
	gap: 0.5rem;
	font-size: 1.4rem;
}

.va-trapezoid-button .button-inner .icon.close {
	align-items: center;
	display: inline-flex;
	justify-content: center;
	font-size: var(--sizeFontMN);
	height: var(--sizeIconXS);
	width: var(--sizeIconXS);
	min-width: var(--sizeFontL);
	background-color: var(--colorForeground);
}

.va-trapezoid-button.disabled {
	cursor: not-allowed;
}

.va-trapezoid-button.disabled .trapezoid-button-inner .trapezoid-button {
	background-color: var(--colorDisabled);
}

.va-trapezoid-button.disabled .trapezoid-button-inner .trapezoid-button-left {
	border-bottom: var(--sizeTabButtonM) solid var(--colorDisabled);
	border-left: var(--sizeTabButtonSideM) solid transparent;
}

.va-trapezoid-button.disabled .trapezoid-button-inner .trapezoid-button-right {
	border-bottom: var(--sizeTabButtonM) solid var(--colorDisabled);
	border-right: var(--sizeTabButtonSideM) solid transparent;
}

.va-trapezoid-button.disabled .trapezoid-button-inner .trapezoid-button-left-bottom {
	border-top: var(--sizeTabButtonM) solid var(--colorDisabled);
	border-left: var(--sizeTabButtonSideM) solid transparent;
}

.va-trapezoid-button.disabled .trapezoid-button-inner .trapezoid-button-right-bottom {
	border-top: var(--sizeTabButtonM) solid var(--colorDisabled);
	border-right: var(--sizeTabButtonSideM) solid transparent;
}

.va-tab-button {
	display: block;
	background-color: transparent;
}

.va-tab-button.top {
	border-top-left-radius: var(--sizeSpacingS);
	border-top-right-radius: var(--sizeSpacingS);
}

.va-tab-button.bottom {
	border-bottom-left-radius: var(--sizeSpacingS);
	border-bottom-right-radius: var(--sizeSpacingS);
}

.va-tab-button.left {
	border-top-left-radius: var(--sizeSpacingS);
	border-bottom-left-radius: var(--sizeSpacingS);
}

.va-tab-button.right {
	border-top-right-radius: var(--sizeSpacingS);
	border-bottom-right-radius: var(--sizeSpacingS);
}

.va-tab-button .tab-button-inner {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	position: relative;
	height: 100%;
}

.va-tab-button .tab-button-inner .va-button {
	flex: 1;
}

.va-tab-button .tab-button-inner .va-button .button-inner {
	gap: 0.8rem;
}

.va-tab-button.selected .va-button.transparent {
	color: var(--colorPrimary);
	background-color: var(--colorTabSelected);
}

.va-tab-button .va-button.transparent {
	color: var(--colorNeutralForeground);
	background-color: var(--colorTabUnselected);
	min-width: auto;
}

.va-tab.classic .va-tab-button {
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 0px;

}

.va-tab.classic .va-tab-button .va-button {
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 0px;
	min-width: auto;

}

.va-tab.classic .va-tab-button.selected .va-button.transparent {
	color: var(--colorPrimary);
	background-color: var(--colorTabClassicSelected);
}

.va-tab.classic .va-tab-button .va-button.transparent {
	color: var(--colorNeutralForeground);
	background-color: var(--colorTabClassicUnselected);
}


.va-tab-button.disabled {
	cursor: not-allowed;
}

.va-tab-button.subtle {
	color: var(--colorForeground2);
	background-color: var(--colorSubtle);
	border-color: transparent;
}

.va-tab-button.subtle.selected {
	background-color: var(--colorSubtleSelected);
}

.va-tab-button.subtle:hover {
	color: var(--colorForeground2);
	background-color: var(--colorSubtleHover);
	border-color: transparent;
}

.va-tab-button.subtle:active {
	color: var(--colorForeground2);
	background-color: var(--colorSubtlePressed);
	border-color: transparent;
}

.va-tab-button.subtle .icon {
	background-color: var(--colorForeground2);
}

.va-tab-button .content {
	color: var(--colorForeground);
	padding-top: var(--sizeSpacingNone);
	padding-bottom: var(--sizeSpacingNone);
	padding-left: var(--sizeSpacingXXS);
	padding-right: var(--sizeSpacingXXS);
	grid-row-start: 1;
	grid-column-start: 1;
	overflow-y: hidden;
	overflow-x: hidden;
	font-weight: var(--fontWeightSemibold);
	line-height: var(--sizeFontL);
	font-size: var(--sizeFontMN);
	font-family: var(--fontFamilyBase);
	cursor: pointer;
}

.va-tab-button.disabled .content {
	cursor: not-allowed;
}

.va-tab-button.large {
	font-size: var(--sizeFontM);
	/*
	padding-top:  var(--sizeSpacingM);
	padding-bottom:  var(--sizeSpacingM);
	padding-left: var(--sizeSpacingXXS);
	padding-right: var(--sizeSpacingXXS);
	*/
}

.va-tab-button.medium {
	font-size: var(--sizeFontM);
	/*
	padding-top:  var(--sizeSpacingM);
	padding-bottom:  var(--sizeSpacingM);
	padding-left: var(--sizeSpacingXXXS);
	padding-right: var(--sizeSpacingXXXS);
	*/
}

.va-tab-button.small {
	font-size: var(--sizeFontM);
	/*
	padding-top: var(--sizeSpacingSN);
	padding-bottom: var(--sizeSpacingSN);
	padding-left: var(--sizeSpacingXXXS);
	padding-right: var(--sizeSpacingXXXS);
	*/
}

/*
.va-tab-button .bar {
    right: 10%; 
    left: 10%;
    height: var(--sizeBorderXL);
    background-color: var(--colorBackground);
    border-radius: var(--sizeFieldBorderRadiusCircular);
    content: "";
    bottom: -0.3rem;	
	width:80%;
	background-color:transparent;
    position: absolute;
}
.va-tab-button:hover .bar{
    background-color: var(--colorNeutralForegroundHover);
}
.va-tab-button:active .bar{
    background-color: var(--colorNeutralForegroundPressed);
}
.va-tab-button.selected .bar{
    background-color: var(--colorPrimary);
}
.va-tab-button.primary.selected .bar, .va-tab-button.accent.selected .bar, .va-tab-button.inverted.selected .bar{
    background-color: var(--colorPrimaryForeground);
}
.va-tab-button.disabled .bar{
	cursor:not-allowed;
	background-color: transparent;
}
*/
.va-tab-button .icon {
	align-items: center;
	display: inline-flex;
	justify-content: center;
	font-size: var(--sizeFontMN);
	height: var(--sizeIconS);
	width: var(--sizeIconS);
	color: var(--colorForeground);
	background-color: var(--colorForeground);
}

.va-tab-button.large .icon {
	height: var(--sizeFontL);
	width: var(--sizeFontL);
}

.va-tab-button.medium .icon {
	height: var(--sizeFontM);
	width: var(--sizeFontM);
}

.va-tab-button.small .icon {
	height: var(--sizeIconXS);
	width: var(--sizeIconXS);
}

.va-tab-button .icon.large {
	height: var(--sizeFontL);
	width: var(--sizeFontL);
}

.va-tab-button .icon.meidum {
	height: var(--sizeFontM);
	width: var(--sizeFontM);
}

.va-tab-button .icon.small {
	height: var(--sizeIconS);
	width: var(--sizeIconS);
}

.va-tab-button .icon.xsmall {
	height: var(--sizeIconXS);
	width: var(--sizeIconXS);
}

.va-tab-button .icon.left {
	margin-right: var(--sizeSpacingSN);
}

.va-tab-button .icon.right {
	margin-left: var(--sizeSpacingSN);
}

.va-tab-button .icon.top {
	margin: auto;
}

.va-tab-button .icon.bottom {
	margin: auto;
}

.va-tab-button.icon-only {
	min-width: 2.0rem;
	padding: 0.5rem 0.5rem;
	height: 3.2rem;
}

.va-tab-button.small.icon-only {
	min-width: 1.0rem;
	padding: 0.3rem;
	height: 0.24rem;
}

.va-tab-button.medium.icon-only {
	min-width: 1.0rem;
	padding: 0.5rem;
	height: 3.2rem;
}

.va-tab-button.large.icon-only {
	min-width: 1.0rem;
	padding: 0.7rem;
	height: 4.0rem;
}

.va-tab-button .content {
	display: inline-flex;
	flex-direction: column;
	text-align: left;
	line-height: var(--sizeFontL);
}

.va-simple-tab-button {
	padding: var(--sizeSpacingM) var(--sizeSpacingMN);
	text-transform: none;
	grid-template-rows: auto;
	grid-template-columns: auto;
	grid-auto-flow: column;
	outline-style: none;
	justify-content: center;
	border-width: 0rem;
	column-gap: var(--sizeSpacingSN);
	overflow-y: visible;
	overflow-x: visible;
	position: relative;
	cursor: pointer;
	border-radius: var(--sizeFieldBorderRadiusM);
	background-color: var(--colorOutline);
	flex-shrink: 0;
	align-items: center;
	display: grid;
	line-height: var(--sizeFontL);
	font-family: var(--fontFamilyBase);
}

.va-simple-tab.stretch .va-simple-tab-button {
	flex: 1
}

.va-simple-tab-button .simple-tab-button-inner {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--sizeFieldGapL);
}

.va-simple-tab-button.disabled {
	cursor: not-allowed;
}

.va-simple-tab-button.subtle {
	color: var(--colorForeground2);
	background-color: var(--colorSubtle);
	border-color: transparent;
}

.va-simple-tab-button.subtle.selected {
	background-color: var(--colorSubtleSelected);
}

.va-simple-tab-button.subtle:hover {
	color: var(--colorForeground2);
	background-color: var(--colorSubtleHover);
	border-color: transparent;
}

.va-simple-tab-button.subtle:active {
	color: var(--colorForeground2);
	background-color: var(--colorSubtlePressed);
	border-color: transparent;
}

.va-simple-tab-button.subtle .icon {
	background-color: var(--colorForeground2);
}

.va-simple-tab-button .content {
	color: var(--colorForeground);
	padding: var(--sizeSpacingNone) var(--sizeSpacingXXS);
	grid-row-start: 1;
	grid-column-start: 1;
	overflow-y: hidden;
	overflow-x: hidden;
	font-weight: var(--fontWeightSemibold);
	line-height: var(--sizeFontL);
	font-size: var(--sizeFontMN);
	font-family: var(--fontFamilyBase);
	text-transform: none;
	cursor: pointer;
}

.va-simple-tab-button.disabled .content {
	cursor: not-allowed;
}

.va-simple-tab-button.rounded {
	border-radius: var(--sizeFieldBorderRadiusM);
}

.va-simple-tab-button.circular {
	border-radius: var(--sizeFieldBorderRadiusCircular);
}

.va-simple-tab-button.square {
	border-radius: var(--sizeFieldBorderRadiusNone);
}

.va-simple-tab-button.large {
	font-size: var(--sizeFontM);
	padding-top: var(--sizeSpacingL);
	;
	padding-bottom: var(--sizeSpacingL);
	;
	padding-left: var(--sizeSpacingMN);
	padding-right: var(--sizeSpacingMN);
}

.va-simple-tab-button.medium {
	font-size: var(--sizeFontMN);
	padding-top: var(--sizeSpacingM);
	padding-bottom: var(--sizeSpacingM);
	padding-left: var(--sizeSpacingMN);
	padding-right: var(--sizeSpacingMN);
}

.va-simple-tab-button.small {
	font-size: var(--sizeFontMN);
	padding-top: var(--sizeSpacingSN);
	padding-bottom: var(--sizeSpacingSN);
	padding-left: var(--sizeSpacingSN);
	padding-right: var(--sizeSpacingSN);
}

.va-simple-tab-button.active {
	background-color: var(--colorBackground);
	color: var(--colorStroke);
}

.va-simple-tab-button .icon {
	align-items: center;
	display: inline-flex;
	justify-content: center;
	font-size: var(--sizeFontMN);
	height: var(--sizeFontS);
	width: var(--sizeFontS);
	color: var(--colorForeground);
	background-color: var(--colorForeground);
}

.va-simple-tab-button.large .icon {
	height: var(--sizeFontM);
	width: var(--sizeFontM);
}

.va-simple-tab-button.medium .icon {
	height: var(--sizeFontS);
	width: var(--sizeFontS);
}

.va-simple-tab-button.small .icon {
	height: var(--sizeFontXS);
	width: var(--sizeFontXS);
}

.va-simple-tab-button .icon.left {
	margin-right: var(--sizeSpacingSN);
}

.va-simple-tab-button .icon.right {
	margin-left: var(--sizeSpacingSN);
}

.va-simple-tab-button .icon.top {
	margin: auto;
}

.va-simple-tab-button .icon.bottom {
	margin: auto;
}

.va-simple-tab-button.icon-only {
	min-width: 2.0rem;
	padding: 0.5rem 0.5rem;
	height: 3.2rem;
}

.va-simple-tab-button.small.icon-only {
	min-width: 1.0rem;
	padding: 0.3rem;
	height: 0.24rem;
}

.va-simple-tab-button.medium.icon-only {
	min-width: 1.0rem;
	padding: 0.5rem;
	height: 3.2rem;
}

.va-simple-tab-button.large.icon-only {
	min-width: 1.0rem;
	padding: 0.7rem;
	height: 4.0rem;
}

.va-tab.border .va-simple-tab-button.active {
	border-top: 0.1rem solid var(--colorNeutralForeground);
	border-left: 0.1rem solid var(--colorNeutralForeground);
	border-right: 0.1rem solid var(--colorNeutralForeground);
	border-bottom: none;
}

.va-tab.border .va-simple-tab-button {
	border-bottom: 0.1rem solid var(--colorNeutralForeground);
	border-left: 0.1rem solid var(--colorNeutralForeground);
	border-right: 0.1rem solid var(--colorNeutralForeground);
	border-top: 0.1rem solid var(--colorNeutralForeground);
}

.va-simple-tab.border .tab-content {
	border-bottom: 0.1rem solid var(--colorNeutralForeground);
	border-left: 0.1rem solid var(--colorNeutralForeground);
	border-right: 0.1rem solid var(--colorNeutralForeground);
}

.va-simple-tab-button .content {
	display: inline-flex;
	flex-direction: column;
	text-align: left;
	line-height: var(--sizeFontL);
}

.va-carousel {
	display: block;
	overflow: hidden;
}

.va-carousel .carousel-inner {
	position: relative;
	margin: 0 5%;
	width: 90%;
	height: 100%;
}

.va-carousel.wide .carousel-inner {
	position: relative;
	margin: 0;
	width: 100%;
	height: 100%;
}

.va-carousel .carousel-content {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	width: 300%;
	height: 100%;
}

.va-slide-show {
	display: block;
	overflow: hidden;
}

.va-slide-show .slide-show-inner {
	position: relative;
	margin: 0 5%;
	width: 90%;
	height: 100%;
}

.va-slide-show.wide .slide-show-inner {
	position: relative;
	margin: 0;
	width: 100%;
	height: 100%;
}

.va-slide-show .slide-show-content {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	width: 300%;
	height: 100%;
}

.va-indicator {
	display: block;
	height: 4rem;
	padding: var(--krds-spacer-3);
	border-radius: 4rem;
	background-color: var(--krds-white);
}

.va-carousel .va-indicator .inner {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 0;
	overflow: hidden;
}

.va-indicator .content {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 0;
	gap: var(--sizeSpacingS);
}

.va-indicator .dot {
	width: 0.8rem;
	height: 0.8rem;
	opacity: 1;
	cursor: pointer;
	display: inline-block;
	background-color: var(--colorPrimary);
	border-radius: 100rem;
}

.va-indicator .dot.selected {
	width: 2rem;
	border-radius: 14rem;
	background-color: var(--colorPrimary);
	opacity: 1;
}

.va-avatar {
	display: flex;
	width: var(--sizeFieldM);
	height: var(--sizeFieldM);
	align-items: center;
	justify-content: center;
	text-align: center;
	position: relative;
}

.va-avatar .content {
	display: flex;
	width: var(--sizeFieldM);
	height: var(--sizeFieldM);
	position: absolute;
	vertical-align: middle;
	border-radius: var(--sizeFieldBorderRadiusCircular);
	font-family: var(--fontFamilyBase);
	font-weight: var(--fontWeightSemibold);
	font-size: var(--sizeFontMN);
	background-color: var(--colorDarkGray);
	align-items: center;
	justify-content: center;
	text-align: center;
}

.va-avatar .active {
	width: calc(var(--sizeFieldM) + 0.8rem);
	height: calc(var(--sizeFieldM) + 0.8rem);
	border-style: solid;
	border-width: var(--sizeBorderL);
	color: var(--colorPrimary);
	inset: 0rem;
	margin: calc(-2 * var(--sizeBorderL, 0rem));
	flex-shrink: 0;
	vertical-align: middle;
	border-radius: var(--sizeFieldBorderRadiusCircular);
	font-family: var(--fontFamilyBase);
	font-weight: var(--fontWeightSemibold);
	font-size: var(--sizeFontM);
}

.va-avatar.xsmall {
	width: var(--sizeFieldXS);
	height: var(--sizeFieldXS);
}

.va-avatar.xsmall .content {
	width: var(--sizeFieldXS);
	height: var(--sizeFieldXS);
	font-size: var(--sizeFontSN);
}

.va-avatar.xsmall .active {
	width: calc(var(--sizeFieldXS) + 0.8rem);
	height: calc(var(--sizeFieldXS) + 0.8rem);
}

.va-avatar.small {
	width: var(--sizeFieldS);
	height: var(--sizeFieldS);
}

.va-avatar.small .content {
	width: var(--sizeFieldS);
	height: var(--sizeFieldS);
	font-size: var(--sizeFontS);
}

.va-avatar.small .active {
	width: calc(var(--sizeFieldS) + 0.8rem);
	height: calc(var(--sizeFieldS) + 0.8rem);
}

.va-avatar.medium {
	width: var(--sizeFieldM);
	height: var(--sizeFieldM);
}

.va-avatar.medium .content {
	width: var(--sizeFieldM);
	height: var(--sizeFieldM);
	font-size: var(--sizeFontMN);
}

.va-avatar.medium .active {
	width: calc(var(--sizeFieldM) + 0.8rem);
	height: calc(var(--sizeFieldM) + 0.8rem);
}

.va-avatar.large {
	width: var(--sizeFieldL);
	height: var(--sizeFieldL);
}

.va-avatar.large .content {
	width: var(--sizeFieldL);
	height: var(--sizeFieldL);
	font-size: var(--sizeFontM);
}

.va-avatar.large .active {
	width: calc(var(--sizeFieldL) + 0.8rem);
	height: calc(var(--sizeFieldL) + 0.8rem);
}

.va-avatar.xlarge {
	width: var(--sizeFieldXL);
	height: var(--sizeFieldXL);
}

.va-avatar.xlarge .content {
	width: var(--sizeFieldXL);
	height: var(--sizeFieldXL);
	font-size: var(--sizeFontL);
}

.va-avatar.xlarge .active {
	width: calc(var(--sizeFieldXL) + 0.8rem);
	height: calc(var(--sizeFieldXL) + 0.8rem);
}

.va-avatar.focused {
	outline: 0.2rem solid var(--colorFocusLine);
}

.va-avatar .active {
	border-radius: var(--sizeFieldBorderRadiusM);
}

.va-avatar.rounded .active {
	border-radius: var(--sizeFieldBorderRadiusM);
}

.va-avatar.circular .active {
	border-radius: var(--sizeFieldBorderRadiusCircular);
}

.va-avatar.square .active {
	border-radius: var(--sizeFieldBorderRadiusNone);
}

.va-avatar.rounded .content {
	border-radius: var(--sizeFieldBorderRadiusM);
}

.va-avatar.circular .content {
	border-radius: var(--sizeFieldBorderRadiusCircular);
}

.va-avatar.square .content {
	border-radius: var(--sizeFieldBorderRadiusNone);
}

.va-avatar.brand .content {
	color: var(--colorNeutralForegroundStaticInverted);
	background-color: var(--colorPrimaryStatic);
}

.va-avatar.brand .icon {
	background-color: var(--colorNeutralForegroundStaticInverted);
}

.va-avatar.brand .char {
	color: var(--colorNeutralForegroundStaticInverted);
}

.va-avatar .icon {
	background-color: var(--colorForeground);
	/* foreground3->foreground로 수정 */
	font-size: 2.0rem;
	position: absolute;
	box-sizing: border-box;
	line-height: 1;
	border: var(--sizeBorderM) solid var(--colorTransparentForeground);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	user-select: none;
	border-radius: inherit;
}

.va-avatar .avatar-icon {
	width: 100%;
	height: 100%;
}

.va-avatar .avatar-icon.small {
	width: 70%;
	height: 70%;
	margin-left: 15%;
	margin-top: 15%;
}

.va-avatar .avatar-icon.xsmall {
	width: 50%;
	height: 50%;
	margin-left: 25%;
	margin-top: 25%;
}

.va-avatar .char {
	color: var(--colorForeground3);
	position: absolute;
	width: 100%;
	height: 100%;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	user-select: none;
	border-radius: inherit;
}

.va-avatar .img {
	position: absolute;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	background-position: 50% 50%;
	line-height: 1;
	/*border: var(--sizeBorderM) solid var(--colorTransparentForeground);*/
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	user-select: none;
	border-radius: var(--sizeFieldBorderRadiusCircular);
}

.va-avatar.rounded .icon,
.va-avatar.rounded .char,
.va-avatar.rounded .img {
	border-radius: var(--sizeFieldBorderRadiusM);
}

.va-avatar.circular .icon,
.va-avatar.circular .char,
.va-avatar.circular .img {
	border-radius: var(--sizeFieldBorderRadiusCircular);
}

.va-avatar.square .icon,
.va-avatar.square .char,
.va-avatar.square .img {
	border-radius: var(--sizeFieldBorderRadiusNone);
}

.va-avatar-group {
	display: flex;
	flex-direction: row;
	padding: 0 0.5rem;
}

.va-avatar-group .content {
	display: flex;
	flex-direction: row;
	padding: 0 0.5rem;
}

.va-avatar-group .content .va-avatar:not(:nth-of-type(1)) {
	margin-left: 2.0rem;
}

.va-avatar-group.spread .content .va-avatar:not(:nth-of-type(1)) {
	margin-left: 2.0rem;
}

.va-avatar-group.stack .content .va-avatar:not(:nth-of-type(1)) {
	margin-left: -0.3rem;
}

.va-avatar-group-pop {
	display: column;
	flex-direction: column;
	gap: var(--sizeFieldGapL);
	overflow: auto;
	padding-bottom: 0.4rem;
	padding-top: 0.4rem;
	box-shadow: var(--shadowM);
	width: max-content;
	max-height: 30.0rem;
	border: 0.1rem solid var(--colorNeutralStroke);
	box-sizing: border-box;
	overflow-x: hidden;
	padding-right: 0.4rem;
	padding-left: 0.4rem;
	border-radius: var(--sizeFieldBorderRadiusM);
	line-height: var(--sizeFontL);
	font-weight: var(--fontWeightRegular);
	font-size: var(--sizeFontMN);
	font-family: var(--fontFamilyBase);
	background-color: var(--colorBackground);
	color: var(--colorForeground);
	display: flex;
}

.va-badge {
	display: block;
	box-sizing: border-box;
	position: relative;
	font-family: var(--fontFamilyBase);
	font-size: var(--sizeFontS);
	font-weight: var(--fontWeightSemibold);
	line-height: var(--sizeFontM);
	width: var(--sizeBadgeM);
	height: var(--sizeBadgeM);
	min-width: max-content;
	padding: 0 calc(var(--sizeSpacingXS) + var(--sizeSpacingXXS));
	border-radius: var(--sizeFieldBorderRadiusCircular);
	border-color: var(--colorTransparentForeground);
	background-color: var(--colorBackground);
	z-index: 1;
}

.va-badge.primary {
	color: var(--colorPrimaryForeground);
	background-color: var(--colorPrimary);
}

.va-badge.transparent {
	color: var(--colorPrimary);
}

.va-badge.outline::after {
	content: "";
	position: absolute;
	inset: 0rem;
	border-style: solid;
	border-color: inherit, var(--colorPrimary);
	border-width: var(--sizeBorderM);
	border-radius: inherit;
}

.va-badge.secondary {
	border: 1px solid var(--colorPrimary);
	color: var(--colorPrimary);
	background-color: var(--colorSecondary);
}

.va-badge.tiny {
	padding-bottom: unset;
	padding-left: unset;
	padding-right: unset;
	padding-top: unset;
	min-width: unset;
	line-height: 0.4rem;
	font-size: 0.4rem;
	height: 0.6rem;
	width: 0.6rem;
	font-weight: var(--fontWeightSemibold);
	font-family: var(--fontFamilyBase);
}

.va-badge.xsmall {
	padding-bottom: unset;
	padding-left: unset;
	padding-right: unset;
	padding-top: unset;
	min-width: unset;
	line-height: 0.6rem;
	font-size: 0.6rem;
	width: var(--sizeBadgeXS);
	height: var(--sizeBadgeXS);
	font-weight: var(--fontWeightSemibold);
	font-family: var(--fontFamilyBase);
}

.va-badge.small {
	padding-left: calc(var(--sizeSpacingXXS) + var(--sizeSpacingXXS));
	padding-right: calc(var(--sizeSpacingXXS) + var(--sizeSpacingXXS));
	line-height: var(--sizeFontMN);
	padding-bottom: 0rem;
	padding-top: 0rem;
	font-size: var(--sizeFontSN);
	font-weight: var(--fontWeightSemibold);
	width: var(--sizeBadgeS);
	height: var(--sizeBadgeS);
	font-family: var(--fontFamilyBase);
}

.va-badge.medium {
	font-size: var(--sizeFontS);
	width: var(--sizeBadgeM);
	height: var(--sizeBadgeM);
}

.va-badge.large {
	padding-left: calc(var(--sizeSpacingXS) + var(--sizeSpacingXXS));
	padding-right: calc(var(--sizeSpacingXS) + var(--sizeSpacingXXS));
	padding-bottom: 0rem;
	padding-top: 0rem;
	width: var(--sizeBadgeL);
	height: var(--sizeBadgeL);
	font-size: var(--sizeFontS);
}

.va-badge.xlarge {
	padding-left: calc(var(--sizeSpacingSN) + var(--sizeSpacingXXS));
	padding-right: calc(var(--sizeSpacingSN) + var(--sizeSpacingXXS));
	padding-bottom: 0rem;
	padding-top: 0rem;
	width: var(--sizeBadgeXL);
	height: var(--sizeBadgeXL);
	font-size: var(--sizeFontS);
}

.va-badge.rounded {
	border-radius: var(--sizeFieldBorderRadiusM);
}

.va-badge.circular {
	border-radius: var(--sizeFieldBorderRadiusCircular);
}

.va-badge.square {
	border-radius: var(--sizeFieldBorderRadiusNone);
}

.va-badge.primary {
	color: var(--colorPrimaryForeground);
	background-color: var(--colorPrimary);
}

.va-badge.danger {
	background-color: var(--colorStatusDanger);
	color: var(--colorPrimaryForeground);
}

.va-badge.important {
	color: var(--colorWhite);
	background-color: var(--colorForeground);
}

.va-badge.info {
	color: var(--colorWhite);
	background-color: var(--colorStatusInfo);
}

.va-badge.success {
	background-color: var(--colorStatusSuccess);
	color: var(--colorWhite);
}

.va-badge.warning {
	color: var(--colorWhite);
	background-color: var(--colorStatusWarning);
}

.va-badge .icon {
	width: var(--sizeBadgeM);
	height: var(--sizeBadgeM);
}

.va-badge.brand .icon {
	background-color: var(--colorPrimaryForeground);
}

.va-badge.danger .icon {
	background-color: var(--colorPrimaryForeground);
}

.va-badge.important .icon {
	background-color: var(--colorForeground);
}

.va-badge.informative .icon {
	background-color: var(--colorForeground3);
}

.va-badge.severe .icon {
	background-color: var(--colorPrimaryForeground);
}

.va-badge.subtle .icon {
	background-color: var(--colorForeground);
}

.va-badge.success .icon {
	background-color: var(--colorPrimaryForeground);
}

.va-badge.warning .icon {
	background-color: var(--colorForeground);
}

.va-badge.available .icon {
	background-color: var(--colorStatusSuccess);
}

.va-badge.away .icon {
	background-color: var(--colorAwayBackground);
}

.va-badge.busy .icon {
	background-color: var(--colorStatusDanger);
}

.va-badge.do-not-disturb .icon {
	background-color: var(--colorForeground3);
}

.va-badge.offline .icon {
	background-color: var(--colorForeground3);
}

.va-badge.out-of-office .icon {
	background-color: var(--colorOfficeBackground);
}

.va-badge.offline .icon {
	background-color: var(--colorForeground3);
}

.va-badge.blocked .icon {
	background-color: var(--colorStatusDanger);
}

.va-badge.unknown .icon {
	background-color: var(--colorForeground3);
}

.va-badge .badge-inner {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.va-badge.xsmall .icon {
	width: var(--sizeBadgeXS);
	height: var(--sizeBadgeXS);
}

.va-badge.small .icon {
	width: var(--sizeBadgeS);
	height: var(--sizeBadgeS);
}

.va-badge.medium .icon {
	width: var(--sizeBadgeM);
	height: var(--sizeBadgeM);
}

.va-badge.large .icon {
	width: var(--sizeBadgeL);
	height: var(--sizeBadgeL);
}

.va-badge.xlarge .icon {
	width: var(--sizeBadgeXL);
	height: var(--sizeBadgeXL);
}

.va-badge.rounded {
	border-radius: var(--sizeFieldBorderRadiusM);
}

.va-badge.circular {
	border-radius: var(--sizeFieldBorderRadiusCircular);
}

.va-badge.square {
	border-radius: var(--sizeFieldBorderRadiusNone);
}

.va-breadcrumb {
	display: block;
}

.va-breadcrumb .ul {
	display: flex;
	align-items: center;
	margin: 0rem;
	padding: 0rem;
	text-align: -webkit-match-parent;
}

.va-breadcrumb .ul .item {
	display: flex;
	align-items: center;
	color: var(--colorForeground2);
	box-sizing: border-box;
	text-wrap: nowrap;
}

.va-breadcrumb .ul .item a {
	height: 32rem;
	padding: var(--sizeSpacingSN);
	text-wrap: nowrap;
	min-width: unset;
	color: var(--colorForeground2);
	background-color: var(--colorSubtle);
	border-color: transparent;
	line-height: var(--sizeFontL);
	font-weight: var(--fontWeightRegular);
	font-size: var(--sizeFontMN);
	font-family: var(--fontFamilyBase);
	align-items: center;
	box-sizing: border-box;
	display: inline-flex;
	justify-content: center;
	text-decoration-line: none;
	vertical-align: middle;
	margin: 0rem;
	overflow: hidden;
	outline-style: none;
	border-radius: var(--sizeFieldBorderRadiusM);
}

.va-breadcrumb .ul .item-div {
	float: left;
	display: inline;
	width: 1.6rem;
	height: 1.6rem;
	background-color: var(--colorForeground2);
}

.va-breadcrumb.small .ul .item a {
	padding-bottom: var(--sizeSpacingSN);
	padding-left: var(--sizeSpacingSN);
	padding-right: var(--sizeSpacingSN);
	padding-top: var(--sizeSpacingSN);
	text-wrap: nowrap;
	min-width: unset;
	height: 1.6rem;
	font-size: var(--sizeFontS);
}

.va-breadcrumb.medium .ul .item a {
	height: 2.0rem;
	padding-bottom: var(--sizeSpacingSN);
	padding-left: var(--sizeSpacingSN);
	padding-right: var(--sizeSpacingSN);
	padding-top: var(--sizeSpacingSN);
	text-wrap: nowrap;
	min-width: unset;
}

.va-breadcrumb.large .ul .item a {
	padding-bottom: var(--sizeSpacingS);
	padding-top: var(--sizeSpacingS);
	height: 2.8rem;
	text-wrap: nowrap;
	min-width: unset;
	font-size: var(--sizeFontM);
}

.va-breadcrumb.small .ul .item-div {
	float: left;
	display: inline;
	min-width: 0.8rem;
	width: 0.8rem;
	height: 0.8rem;
	background-color: var(--colorForeground2);
}

.va-breadcrumb.medium .ul .item-div {
	float: left;
	display: inline;
	min-width: 1.0rem;
	width: 1.0rem;
	height: 1.0rem;
	background-color: var(--colorForeground2);
}

.va-breadcrumb.large .ul .item-div {
	float: left;
	display: inline;
	min-width: 1.2rem;
	width: 1.2rem;
	height: 1.2rem;
	background-color: var(--colorForeground2);
}

.va-breadcrumb .va-button {
	font-weight: var(--fontWeightRegular);
	min-width: 1.0rem;
	margin-left: var(--sizeSpacingXS);
	margin-right: var(--sizeSpacingXS);
}

.va-breadcrumb .va-button .button-inner {
	padding-left: 0px;
	padding-right: 0px;
}

.va-input {
	/*flex:1;*/
}

.va-select select,
.va-input input[type=text],
.va-input input[type=search],
.va-input input[type=password],
.va-input input[type=number] {
	/*width: 100%;*/
}

.va-field {
	/*display: flex;
	flex-direction: column;
	align-items: stretch;*/
	/*padding-top: var(--sizeSpacingFieldTop);*/
	font-weight: var(--fontWeightRegular);
	font-size: var(--sizeFontMN);
	font-family: var(--fontFamilyBase);
	text-align: left;
	position: relative;
	cursor: pointer;
	color: var(--colorForeground);
	/*row-gap: var(--sizeFieldGapM);
	column-gap: var(--sizeFieldGapM);*/
}

.va-field .field-inner {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	row-gap: var(--sizeFieldGapM);
	column-gap: var(--sizeFieldGapM);
	flex: 1;
}

.va-field.vertical .field-inner {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	height: 100%;
}

.va-field .field-inner .label-div {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.va-field .field-inner .label-div.left {
	justify-content: start;
	line-height: var(--sizeLabelLineHeight);
}

.va-field .field-inner .label-div.right {
	justify-content: end;
	line-height: var(--sizeLabelLineHeight);
}

.va-field.table-block {
	border: 1px solid var(--colorGray);
}

.va-field.table-block .field-inner .label-div {
	background-color: var(--colorGray);
	color: var(--colorStroke);
	height: 4rem;
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 0.4rem;
}

.va-field.vertical .field-inner .label-div {
	width: 100%;
}

.va-field.table-block .field-div {
	background-color: var(--colorBackground);
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 0.4rem;
}

.va-field.horizontal .field-inner {
	display: flex;
	flex-direction: row;
	align-items: center;
	/* center로 다시 변경 25.08.19*/
	height: 100%;
}

.va-field .label {
	margin-bottom: calc((1.6rem - var(--sizeFontL)) / 2);
	margin-top: calc((1.6rem - var(--sizeFontL)) / 2);
	cursor: inherit;
	padding-left: var(--sizeSpacingXS);
	padding-right: var(--sizeSpacingS);
	line-height: var(--sizeFontL);
	font-size: var(--sizeFontMN);
	font-family: var(--fontFamilyBase);
}

.va-field .label.top {
	text-align: left;
	padding-left: 0rem;
}

.va-field .label.bottom {
	text-align: left;
	padding-left: 0rem;
}

.va-field .label.left {
	text-align: right;
	padding-left: 0rem;
}

.va-field .label.right {
	cursor: inherit;
	align-self: center;
	padding-left: var(--sizeSpacingXS);
	padding-bottom: var(--spacingVerticalS);
	padding-top: var(--spacingVerticalS);
	padding-right: var(--sizeSpacingS);
	line-height: var(--sizeFontL);
	font-size: var(--sizeFontMN);
	font-family: var(--fontFamilyBase);
	display: inline-flex;
	align-items: center;
	text-align: left;
}

.va-field .label.left:after {
	content: var(--labelSeperator);
	margin-right: var(--labelSeperatorMarginRight);
	margin-left: var(--labelSeperatorMarginLeft);
}

.va-field .label.right:before {
	content: var(--labelSeperator);
	margin-right: var(--labelSeperatorMarginRight);
	margin-left: var(--labelSeperatorMarginLeft);
}

.va-field .label.top.required:before {
	content: '*';
	color: red;
	margin-right: 0.4rem;
	margin-left: 0.2rem;
}

.va-field .label.bottom.required:before {
	content: '*';
	color: red;
	margin-right: 0.4rem;
	margin-left: 0.2rem;
}

.va-field .label.left.required:before {
	content: '*';
	color: red;
	margin-right: 0.4rem;
	margin-left: 0.2rem;
}

.va-field .label.right.required:after {
	content: '*';
	color: red;
	margin-right: 0.2rem;
	margin-left: 0.4rem;
}

.va-field .label.left.no-label {
	/*width: 0rem;
	margin: 0rem;
	padding: 0rem*/
	display: none;
}

.va-field .label.right.no-label {
	/*width: 0rem;
	margin: 0rem;
	padding: 0rem*/
	display: none;
}

.va-field .label-div.no-label {
	display: none;
}

.va-field .label.left.label-noseperator:after {
	content: '';
	margin-right: 0.2rem;
	margin-left: 0.2rem;
}

.va-field .label.right.label-noseperator:before {
	content: '';
	margin-right: 0.2rem;
	margin-left: 0.2rem;
}

.va-field .field-comment-text {
	color: var(--colorSubLabel);
	font-size: var(--sizeFontS);
	line-height: var(--sizeSubLabelLineM);
	height: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.va-field.xsmall .field-comment-text {
	font-size: var(--sizeFontXS);
	line-height: var(--sizeFontS);
}

.va-field.small .field-comment-text {
	font-size: var(--sizeFontSN);
	line-height: var(--sizeFontMN);
}

.va-field.medium .field-comment-text {
	font-size: var(--sizeFontS);
	line-height: var(--sizeFontLN);
}

.va-field.large .field-comment-text {
	font-size: var(--sizeFontMN);
	line-height: var(--sizeFontL);
}

.va-field.xlarge .field-comment-text {
	font-size: var(--sizeFontM);
	line-height: var(--sizeFontXL);
}

.va-field .field-content {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: 'stretch';
	gap: var(--sizeFieldGapM);
}

.va-field .field-div {
	width: 100%;
	display: flex;
	flex-direction: row;
	flex: 1;
}

.va-field .field-div.height-stretch {
	height: 100%;
}

.va-select,
.va-combobox .va-datepicker {
	height: var(--sizeFieldM);
	/*flex:1;*/
	/*
	height:3.2rem;
   	border-color: var(--colorNeutralStroke);
	border-radius: var(--sizeFieldBorderRadiusM);	
	*/
}

.va-slider .field-wrapper,
.va-star-slider .field-wrapper {
	width: 100%;
	border: 0.1rem solid var(--colorFieldBorder);
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: nowrap;
	position: relative;
	box-sizing: border-box;
	/*min-height: var(--sizeFieldM);*/
	font-family: var(--fontFamilyBase);
	font-size: var(--sizeFontMN);
	font-weight: var(--fontWeightRegular);
	line-height: var(--sizeFontL);
	gap: var(--sizeSpacingXXS);
	border-radius: var(--sizeFieldBorderRadiusM);
	padding: 0 var(--sizeSpacingMN);
}

.va-input .field-wrapper,
.va-colorpicker .field-wrapper,
.va-display .field-wrapper,
.va-input-popup .field-wrapper,
.va-select .field-wrapper,
.va-combobox .field-wrapper,
.va-combobox-url .field-wrapper,
.va-filterbox .field-wrapper,
.va-datepicker .field-wrapper,
.va-monthpicker .field-wrapper,
.va-yearpicker .field-wrapper,
.va-timepicker .field-wrapper,
.va-textarea .field-wrapper,
.va-image-file .field-wrapper,
.va-file .field-wrapper {
	width: 100%;
	border: 0.1rem solid var(--colorFieldBorder);
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: nowrap;
	position: relative;
	box-sizing: border-box;
	min-height: var(--sizeFieldM);
	font-family: var(--fontFamilyBase);
	font-size: var(--sizeFontMN);
	font-weight: var(--fontWeightRegular);
	line-height: var(--sizeFontL);
	background-color: var(--colorBackground);
	gap: var(--sizeSpacingXXS);
	border-radius: var(--sizeFieldBorderRadiusM);
	padding: 0 var(--sizeSpacingMN);
	height: var(--sizeFieldM);
}

.va-checkbox,
.va-radio {
	min-height: var(--sizeFieldM);
	/*
	display: flex;
	flex-direction: row;
	align-items:center;
	*/
}

.va-checkbox.xsmall,
.va-radio.xsmall {
	min-height: var(--sizeFieldXS);
}

.va-checkbox.small,
.va-radio.small {
	min-height: var(--sizeFieldS);
}

.va-checkbox.medium,
.va-radio.medium {
	min-height: var(--sizeFieldM);
}

.va-checkbox.large,
.va-radio.large {
	min-height: var(--sizeFieldL);
}

.va-checkbox.xlarge,
.va-radio.xlarge {
	min-height: var(--sizeFieldXL);
}

.va-checkbox .checkbox-inner,
.va-radio .radio-inner {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	/*gap:var(--sizeFieldGapM);*/
}

.va-checkbox .field-wrapper {
	width: var(--sizeCheckM);
	height: var(--sizeCheckM);
	min-width: var(--sizeCheckM);
	min-height: var(--sizeCheckM);
	max-width: var(--sizeCheckM);
	max-height: var(--sizeCheckM);
	padding: 0px;
	margin: var(--sizeCheckMarginM);
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: nowrap;
	position: relative;
	box-sizing: border-box;
	font-family: var(--fontFamilyBase);
	font-size: var(--sizeFontMN);
	font-weight: var(--fontWeightRegular);
	line-height: var(--sizeFontL);
	background-color: var(--colorBackground);
	/*border: 0.1rem solid var(--colorNeutralStroke);
	border-radius: var(--sizeFieldBorderRadiusM);*/
}

.va-radio .field-wrapper {
	width: var(--sizeCheckM);
	height: var(--sizeCheckM);
	margin: var(--sizeCheckMarginM);
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: nowrap;
	position: relative;
	box-sizing: border-box;
	min-height: 0.2rem;
	font-family: var(--fontFamilyBase);
	font-size: var(--sizeFontMN);
	font-weight: var(--fontWeightRegular);
	line-height: var(--sizeFontL);
	background-color: var(--colorBackground);
	border: 0.1rem solid var(--colorNeutralStroke);
	border-radius: 50%;
}

.va-checkbox.rounded .field-wrapper {
	border-radius: 0.4rem;
}

.va-checkbox.square .field-wrapper {
	border-radius: 0rem;
}

.va-checkbox.checked .field-wrapper,
.va-radio.checked .field-wrapper {}

.va-checkbox.mixed .field-wrapper,
.va-radio.mixed .field-wrapper {
	border-color: var(--colorField);
}

.va-checkbox.mixed .field-wrapper .icon,
.va-radio.mixed .field-wrapper .icon {
	background-color: var(--colorField);
}

.va-checkbox .field-wrapper .icon,
.va-radio .field-wrapper .icon {
	color: var(--colorStroke);
	background-color: var(--colorField);
	position: absolute;
	width: 130%;
	height: 130%;
	transform: translate(-12%, -2%);
}

.va-checkbox.checked .field-wrapper .icon,
.va-radio.checked .field-wrapper .icon {
	color: white;
	background-color: var(--colorField);
	position: absolute;
	width: 130%;
	height: 130%;
	transform: translate(-12%, -2%);
}

.va-checkbox.checked.readonly .field-wrapper .icon,
.va-radio.checked.readonly .field-wrapper .icon,
.va-checkbox.checked.disabled .field-wrapper .icon,
.va-radio.checked.disabled .field-wrapper .icon {
	color: white;
	background-color: var(--colorStrokeDisabled);
	position: absolute;
	width: 130%;
	height: 130%;
	transform: translate(-12%, -2%);
}

.va-checkbox.mixed .field-wrapper .icon {
	color: white;
	background-color: var(--colorField);
	position: absolute;
	width: 130%;
	height: 130%;
	transform: translate(-12%, -2%);
}

.va-checkbox .label,
.va-radio .label {
	margin-bottom: calc((1.6rem - var(--sizeFontL)) / 2);
	margin-top: calc((1.6rem - var(--sizeFontL)) / 2);
	cursor: inherit;
	padding-left: var(--sizeSpacingXS);
	padding-right: var(--sizeSpacingS);
	line-height: var(--sizeFontL);
	font-size: var(--sizeFontMN);
	font-family: var(--fontFamilyBase);
}

.va-grid .grid-body-row.focused .va-checkbox.checked .field-wrapper {
	background-color: var(--colorField);
}

.va-grid .grid-body-row.focused .va-checkbox.checked .field-wrapper .icon {
	color: var(--colorField);
	background-color: white;
}

.va-checkbox.disabled .label,
.va-radio.disabled .label,
.va-checkbox.readonly .label,
.va-radio.readonly .label {
	/*color: white;*/
	color: var(--colorStrokeDisabled);
}

.va-radio.disabled .icon,
.va-radio.readonly .icon {
	color: white;
	background-color: var(--colorStrokeDisabled);
}

.va-checkbox.disabled .icon,
.va-checkbox.readonly .icon {
	color: white;
	background-color: var(--colorStrokeDisabled);
}

.va-checkbox.focused .field-wrapper {
	outline: 0.3rem solid var(--colorFocusLine);
}

.va-checkbox.checked.disabled .field-wrapper .icon,
.va-radio.checked.disabled .field-wrapper .icon {
	color: white;
	background-color: var(--colorStrokeDisabled);
}

.va-radio.focused .field-wrapper {
	outline: 0.3rem solid var(--colorFocusLine);
}

.va-select .field-wrapper select {
	flex: 1;
	max-height: 100%;
	border: none;
	background-color: transparent;
}

.va-select option:first-child {
	margin-top: 3px;
}

.va-input,
.va-display,
.va-input-popup,
.va-number,
.va-search,
.va-combobox,
.va-select,
.va-combobox-url,
.va-filterbox,
.va-slider,
.va-star-slider,
.va-switch,
.va-datepicker,
.va-datetimepicker,
.va-yearpicker,
.va-monthpicker,
.va-timepicker,
.va-image-file,
.va-file {
	line-height: 0.9;
}

.va-field .va-input,
.va-field .va-display,
.va-field .va-input-popup,
.va-field .va-number,
.va-field .va-search,
.va-field .va-combobox,
.va-field .va-select,
.va-field .va-combobox-url,
.va-field .va-filterbox,
.va-field .va-slider,
.va-field .va-star-slider,
.va-field .va-switch,
.va-field .va-datepicker,
.va-field .va-yearpicker,
.va-field .va-monthpicker,
.va-field .va-timepicker,
.va-field .va-image-file,
.va-field .va-file {
	width: 100%;
}

.va-input.text-align-left .field-wrapper input,
.va-display.text-align-left .field-wrapper input,
.va-input-popup.text-align-left .field-wrapper input,
.va-colorpicker.text-align-left .field-wrapper input,
.va-datepicker.text-align-left .field-wrapper input,
.va-timepicker.text-align-left .field-wrapper input,
.va-yearpicker.text-align-left .field-wrapper input,
.va-monthpicker.text-align-left .field-wrapper input,
.va-select.text-align-left .field-wrapper select,
.va-combobox.text-align-left .field-wrapper input,
.va-filterbox.text-align-left .field-wrapper input,
.va-combobox-url.text-align-left .field-wrapper input {
	text-align: left;
}

.va-input.text-align-right .field-wrapper input,
.va-display.text-align-right .field-wrapper input,
.va-input-popup.text-align-right .field-wrapper input,
.va-colorpicker.text-align-right .field-wrapper input,
.va-datepicker.text-align-right .field-wrapper input,
.va-timepicker.text-align-right .field-wrapper input,
.va-yearpicker.text-align-right .field-wrapper input,
.va-monthpicker.text-align-right .field-wrapper input,
.va-select.text-align-right .field-wrapper select,
.va-combobox.text-align-right .field-wrapper input,
.va-filterbox.text-align-right .field-wrapper input,
.va-combobox-url.text-align-right .field-wrapper input {
	text-align: right;
}

.va-input.text-align-center .field-wrapper input,
.va-display.text-align-center .field-wrapper input,
.va-colorpicker.text-align-center .field-wrapper input,
.va-datepicker.text-align-center .field-wrapper input,
.va-timepicker.text-align-center .field-wrapper input,
.va-yearpicker.text-align-center .field-wrapper input,
.va-monthpicker.text-align-center .field-wrapper input,
.va-input-popup.text-align-center .field-wrapper input,
.va-select.text-align-center .field-wrapper select,
.va-combobox.text-align-center .field-wrapper input,
.va-filterbox.text-align-center .field-wrapper input,
.va-combobox-url.text-align-center .field-wrapper input {
	text-align: center;
}

.va-image-file {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--sizeFieldGapM);
}

.va-image-file .field-wrapper {
	flex-direction: row;
}

.va-image-file .display {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: var(--sizeFontMN);
}

.va-image-file .image-div {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	flex: 1;
	gap: var(--sizeGapS);
	aspect-ratio: 1;
	overflow: hidden;
}

.va-image-file .drop-div {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	flex: 1;
	mask-image: url(../icons/ico_image.svg);
	mask-size: 50% 50%;
	background-color: #d0d0d0;
	color: gray;
	mask-repeat: no-repeat;
	mask-position: center center;
	border: 1px dashed var(--colorBorder);
}

.va-image-file .drop-div:hover {
	background-color: var(--colorForeground3);
	border: 0px solid var(--colorFieldBorder);
}

.va-file .field-wrapper {
	flex-direction: row;
}

.va-file .display {
	flex: 1;
	overflow: 'hidden';
	font-size: var(--sizeFontSN);
}

.va-input.selected .field-wrapper,
.va-display.selected .field-wrapper,
.va-input-popup.selected .field-wrapper,
.va-select.selected .field-wrapper,
.va-combobox.selected .field-wrapper,
.va-combobox-url.selected .field-wrapper,
.va-filterbox.selected .field-wrapper,
.va-colorpicker.selected .field-wrapper,
.va-datepicker.selected .field-wrapper,
.va-datetimepicker.selected .field-wrapper,
.va-yearpicker.selected .field-wrapper,
.va-monthpicker.selected .field-wrapper,
.va-timepicker.selected .field-wrapper,
.va-textarea.selected .field-wrapper,
.va-image-file.selected .field-wrapper,
.va-file.selected .field-wrapper {
	outline: 0.2rem solid var(--colorFocusLine);
}

.va-input.focused .field-wrapper,
.va-display.focused .field-wrapper,
.va-input-popup.focused .field-wrapper,
.va-select.focused .field-wrapper,
.va-combobox.focused .field-wrapper,
.va-combobox-url.focused .field-wrapper,
.va-filterbox.focused .field-wrapper,
.va-colorpicker.focused .field-wrapper,
.va-datepicker.focused .field-wrapper,
.va-datetimepicker.focused .field-wrapper,
.va-yearpicker.focused .field-wrapper,
.va-monthpicker.focused .field-wrapper,
.va-timepicker.focused .field-wrapper,
.va-textarea.focused .field-wrapper,
.va-textarea.focused .field-wrapper,
.va-image-file.focused .field-wrapper,
.va-file.focused .field-wrapper {
	outline: 0.2rem solid var(--colorFocusLine);
}

.va-input.readonly.selected .field-wrapper,
.va-display.readonly.selected .field-wrapper,
.va-input-popup.readonly.selected .field-wrapper,
.va-select.readonly.selected .field-wrapper,
.va-combobox.readonly.selected .field-wrapper,
.va-combobox-url.readonly.selected .field-wrapper,
.va-filterbox.readonly.selected .field-wrapper,
.va-colorpicker.readonly.selected .field-wrapper,
.va-datepicker.readonly.selected .field-wrapper,
.va-datetimepicker.readonly.selected .field-wrapper,
.va-yearpicker.readonly.selected .field-wrapper,
.va-monthpicker.readonly.selected .field-wrapper,
.va-timepicker.readonly.selected .field-wrapper,
.va-textarea.readonly.selected .field-wrapper,
.va-image-file.readonly.selected .field-wrapper,
.va-file.readonly.selected .field-wrapper {
	outline: 0rem;
}

.va-input.readonly.focused .field-wrapper,
.va-display.readonly.focused .field-wrapper,
.va-input-popup.readonly.focused .field-wrapper,
.va-select.readonly.focused .field-wrapper,
.va-combobox.readonly.focused .field-wrapper,
.va-combobox-url.readonly.focused .field-wrapper,
.va-filterbox.readonly.focused .field-wrapper,
.va-colorbox.readonly.focused .field-wrapper,
.va-datepicker.readonly.focused .field-wrapper,
.va-datetimepicker.readonly.focused .field-wrapper,
.va-yearpicker.readonly.focused .field-wrapper,
.va-monthpicker.readonly.focused .field-wrapper,
.va-timepicker.readonly.focused .field-wrapper,
.va-textarea.readonly.focused .field-wrapper,
.va-image-file.readonly.focused .field-wrapper,
.va-file.readonly.focused .field-wrapper {
	outline: 0rem;
}

/* readonly: HTML 표준 의미로 동작 — 입력만 차단, 스크롤·드래그 선택·복사는 허용.
   disabled와 달리 pointer-events를 제거하지 않는다. 시각적 표시(회색 배경/테두리)는 유지. */
.va-input.readonly .field-wrapper,
.va-display.readonly .field-wrapper,
.va-input-popup.readonly .field-wrapper,
.va-select.readonly .field-wrapper,
.va-combobox.readonly .field-wrapper,
.va-combobox-url.readonly .field-wrapper,
.va-filterbox.readonly .field-wrapper,
.va-colorpicker.readonly .field-wrapper,
.va-datepicker.readonly .field-wrapper,
.va-datetimepicker.readonly .field-wrapper,
.va-yearpicker.readonly .field-wrapper,
.va-monthpicker.readonly .field-wrapper,
.va-timepicker.readonly .field-wrapper,
.va-textarea.readonly .field-wrapper,
.va-image-file.readonly .field-wrapper,
.va-file.readonly .field-wrapper {
	border-color: var(--colorStrokeDisabled);
	background-color: var(--colorDisabled);
}

.va-input.disabled .field-wrapper,
.va-display.disabled .field-wrapper,
.va-input-popup.disabled .field-wrapper,
.va-select.disabled .field-wrapper,
.va-combobox.disabled .field-wrapper,
.va-combobox-url.disabled .field-wrapper,
.va-filterbox.disabled .field-wrapper,
.va-colorpicker.disabled .field-wrapper,
.va-datepicker.disabled .field-wrapper,
.va-datetimepicker.disabled .field-wrapper,
.va-yearpicker.disabled .field-wrapper,
.va-monthpicker.disabled .field-wrapper,
.va-timepicker.disabled .field-wrapper,
.va-textarea.disabled .field-wrapper,
.va-image-file.disabled .field-wrapper,
.va-file.disabled .field-wrapper {
	border-color: var(--colorStrokeDisabled);
	background-color: var(--colorDisabled);
	cursor: not-allowed;
	pointer-events: none;
}

.va-textarea.disabled textarea {
	border-color: var(--colorStrokeDisabled);
	background-color: var(--colorDisabled);
	cursor: not-allowed;
	pointer-events: none;
}

.va-textarea.left .field-inner {
	align-items: stretch;
}


.va-checkbox.readonly .field-wrapper,
.va-radio.readonly .field-wrapper {
	/*background-color: var(--colorStrokeDisabled);*/
	cursor: not-allowed;
	pointer-events: none;
}

.va-checkbox.disabled .field-wrapper,
.va-radio.disabled .field-wrapper {
	/*border-color: var(--colorStrokeDisabled);*/
	cursor: not-allowed;
	pointer-events: none;
}

.va-checkbox-group .checkbox-group-inner,
.va-checkbox-group.horizontal .checkbox-group-inner {
	display: flex;
	flex-direction: row;
	align-items: center;
	height: 100%;
}

.va-checkbox-group.vertical .checkbox-group-inner {
	display: flex;
	flex-direction: column;
	align-items: stretch
}

.va-radio-group .radio-group-inner,
.va-radio-group.horizontal .radio-group-inner {
	display: flex;
	flex-direction: row;
	align-items: center;
	height: 100%;
}

.va-radio-group.vertical .radio-group-inner {
	display: flex;
	flex-direction: column;
	align-items: stretch
}


.va-checkbox-group.xsmall .va-checkbox .field-wrapper,
.va-radio-group.xsmall .va-radio .field-wrapper {
	width: var(--sizeCheckXS);
	height: var(--sizeCheckXS);
	min-width: var(--sizeCheckXS);
	min-height: var(--sizeCheckXS);
	max-width: var(--sizeCheckXS);
	max-height: var(--sizeCheckXS);
	margin: var(--sizeCheckMarginXS);

}

.va-checkbox-group.xsmall .va-checkbox .label,
.va-radio-group.xsmall .va-radio .label {
	font-size: var(--sizeFontSN);
}

.va-checkbox-group.small .va-checkbox .field-wrapper,
.va-radio-group.small .va-radio .field-wrapper {
	width: var(--sizeCheckS);
	height: var(--sizeCheckS);
	min-width: var(--sizeCheckS);
	min-height: var(--sizeCheckS);
	max-width: var(--sizeCheckS);
	max-height: var(--sizeCheckS);
	margin: var(--sizeCheckMarginS);
}

.va-checkbox-group.small .va-checkbox .label,
.va-radio-group.small .va-radio .label {
	font-size: var(--sizeFontS);
}

.va-checkbox-group.medium .va-checkbox .field-wrapper,
.va-radio-group.medium .va-radio .field-wrapper {
	width: var(--sizeCheckM);
	height: var(--sizeCheckM);
	min-width: var(--sizeCheckM);
	min-height: var(--sizeCheckM);
	max-width: var(--sizeCheckM);
	max-height: var(--sizeCheckM);
	margin: var(--sizeCheckMarginM);
	margin-top: var(--sizeCheckMarginL);
}

.va-checkbox-group.medium .va-checkbox .label,
.va-radio-group.medium .va-radio .label {
	font-size: var(--sizeFontMN);
}

.va-checkbox-group.large .va-checkbox .field-wrapper,
.va-radio-group.large .va-radio .field-wrapper {
	width: var(--sizeCheckL);
	height: var(--sizeCheckL);
	min-width: var(--sizeCheckL);
	min-height: var(--sizeCheckL);
	max-width: var(--sizeCheckL);
	max-height: var(--sizeCheckL);
	margin: var(--sizeCheckMarginL);
}

.va-checkbox-group.large .va-checkbox .label,
.va-radio-group.large .va-radio .label {
	font-size: var(--sizeFontM);
}

.va-checkbox-group.xlarge .va-checkbox .field-wrapper,
.va-radio-group.xlarge .va-radio .field-wrapper {
	width: var(--sizeCheckXL);
	height: var(--sizeCheckXL);
	min-width: var(--sizeCheckXL);
	min-height: var(--sizeCheckXL);
	max-width: var(--sizeCheckXL);
	max-height: var(--sizeCheckXL);
	margin: var(--sizeCheckMarginXL);
	font-size: var(--sizeFontL);
}

.va-checkbox-group.xlarge .va-checkbox .label,
.va-radio-group.xlarge .va-radio .label {
	font-size: var(--sizeFontL);
}

.field-checkboxgroup-field {
	display: flex;
	flex-direction: row;
	align-items: start;
}

.field-checkboxgroup-column-field {
	display: flex;
	flex-direction: column;
	align-items: start;
}

.va-input.xsmall .field-wrapper,
.va-display.xsmall .field-wrapper,
.va-input-popup.xsmall .field-wrapper,
.va-select.xsmall .field-wrapper,
.va-colorpicker.xsmall .field-wrapper,
.va-combobox.xsmall .field-wrapper,
.va-combobox-url.xsmall .field-wrapper,
.va-filterbox.xsmall .field-wrapper,
.va-datepicker.xsmall .field-wrapper,
.va-yearpicker.xsmall .field-wrapper,
.va-monthpicker.xsmall .field-wrapper,
.va-timepicker.xsmall .field-wrapper,
.va-datetimepicker.xsmall .field-wrapper,
.va-image-file.xsmall .field-wrapper,
.va-file.xsmall .field-wrapper {
	height: var(--sizeFieldXS);
	min-height: var(--sizeFieldXS);
	padding-left: var(--sizeSpacingSN);
	padding-right: var(--sizeSpacingSN);
	font-size: var(--sizeFontS);
	line-height: var(--sizeFontM);
	font-weight: var(--fontWeightRegular);
	font-family: var(--fontFamilyBase);
}

.va-input.small .field-wrapper,
.va-display.small .field-wrapper,
.va-input-popup.small .field-wrapper,
.va-select.small .field-wrapper,
.va-combobox.small .field-wrapper,
.va-combobox-url.small .field-wrapper,
.va-filterbox.small .field-wrapper,
.va-colorpicker.small .field-wrapper,
.va-datepicker.small .field-wrapper,
.va-yearpicker.small .field-wrapper,
.va-monthpicker.small .field-wrapper,
.va-timepicker.small .field-wrapper,
.va-datetimepicker.small .field-wrapper,
.va-image-file.small .field-wrapper,
.va-file.small .field-wrapper {
	min-height: var(--sizeFieldS);
	padding-left: var(--sizeSpacingSN);
	padding-right: var(--sizeSpacingSN);
	font-size: var(--sizeFontS);
	line-height: var(--sizeFontM);
	font-weight: var(--fontWeightRegular);
	font-family: var(--fontFamilyBase);
}

.va-input.medium .field-wrapper,
.va-display.medium .field-wrapper,
.va-input-popup.medium .field-wrapper,
.va-select.medium .field-wrapper,
.va-combobox.medium .field-wrapper,
.va-combobox-url.medium .field-wrapper,
.va-filterbox.medium .field-wrapper,
.va-colorpicker.medium .field-wrapper,
.va-datepicker.medium .field-wrapper,
.va-yearpicker.medium .field-wrapper,
.va-monthpicker.medium .field-wrapper,
.va-timepicker.medium .field-wrapper,
.va-datetimepicker.medium .field-wrapper,
.va-image-file.medium .field-wrapper,
.va-file.medium .field-wrapper {
	min-height: var(--sizeFieldM);
	padding: 0 var(--sizeSpacingMN);
	font-family: var(--fontFamilyBase);
	font-size: var(--sizeFontMN);
	font-weight: var(--fontWeightRegular);
	line-height: var(--sizeFontL);
}

.va-input.large .field-wrapper,
.va-display.large .field-wrapper,
.va-input-popup.large .field-wrapper,
.va-select.large .field-wrapper,
.va-combobox.large .field-wrapper,
.va-combobox-url.large .field-wrapper,
.va-filterbox.large .field-wrapper,
.va-colorpicker.large .field-wrapper,
.va-datepicker.large .field-wrapper,
.va-yearpicker.large .field-wrapper,
.va-monthpicker.large .field-wrapper,
.va-timepicker.large .field-wrapper,
.va-datetimepicker.large .field-wrapper,
.va-image-file.large .field-wrapper,
.va-file.large .field-wrapper {
	row-gap: var(--sizeSpacingSN);
	min-height: var(--sizeFieldL);
	padding-left: var(--sizeSpacingM);
	padding-right: var(--sizeSpacingM);
	column-gap: var(--sizeSpacingSN);
	font-size: var(--sizeFontM);
	line-height: var(--sizeFontXL);
	font-weight: var(--fontWeightRegular);
	font-family: var(--fontFamilyBase);
}

.va-input.xlarge .field-wrapper,
.va-display.xlarge .field-wrapper,
.va-input-popup.xlarge .field-wrapper,
.va-select.xlarge .field-wrapper,
.va-combobox.xlarge .field-wrapper,
.va-combobox-url.xlarge .field-wrapper,
.va-filterbox.xlarge .field-wrapper,
.va-colorpicker.xlarge .field-wrapper,
.va-datepicker.xlarge .field-wrapper,
.va-yearpicker.xlarge .field-wrapper,
.va-monthpicker.xlarge .field-wrapper,
.va-timepicker.xlarge .field-wrapper,
.va-datetimepicker.xlarge .field-wrapper,
.va-image-file.xlarge .field-wrapper,
.va-file.xlarge .field-wrapper {
	row-gap: var(--sizeSpacingSN);
	min-height: var(--sizeFieldXL);
	height: var(--sizeFieldXL);
	padding-left: var(--sizeSpacingM);
	padding-right: var(--sizeSpacingM);
	column-gap: var(--sizeSpacingSN);
	font-size: var(--sizeFontM);
	line-height: var(--sizeFontXL);
	font-weight: var(--fontWeightRegular);
	font-family: var(--fontFamilyBase);
}

.va-checkbox.xsmall .field-wrapper,
.va-radio.xsmall .field-wrapper {
	width: var(--sizeCheckXS);
	height: var(--sizeCheckXS);
	min-width: var(--sizeCheckXS);
	min-height: var(--sizeCheckXS);
	max-width: var(--sizeCheckXS);
	max-height: var(--sizeCheckXS);
	margin: var(--sizeCheckMarginXS);
}

.va-checkbox.small .field-wrapper,
.va-radio.small .field-wrapper {
	width: var(--sizeCheckS);
	height: var(--sizeCheckS);
	min-width: var(--sizeCheckS);
	min-height: var(--sizeCheckS);
	max-width: var(--sizeCheckS);
	max-height: var(--sizeCheckS);
	margin: var(--sizeCheckMarginS);
}

.va-checkbox.medium .field-wrapper,
.va-radio.medium .field-wrapper {
	width: var(--sizeCheckM);
	height: var(--sizeCheckM);
	min-width: var(--sizeCheckM);
	min-height: var(--sizeCheckM);
	max-width: var(--sizeCheckM);
	max-height: var(--sizeCheckM);
	margin: var(--sizeCheckMarginM);
}

.va-checkbox.large .field-wrapper,
.va-radio.large .field-wrapper {
	width: var(--sizeCheckL);
	height: var(--sizeCheckL);
	min-width: var(--sizeCheckL);
	min-height: var(--sizeCheckL);
	max-width: var(--sizeCheckL);
	max-height: var(--sizeCheckL);
	margin: var(--sizeCheckMarginL);
}

.va-checkbox.xlarge .field-wrapper,
.va-radio.xlarge .field-wrapper {
	width: var(--sizeCheckXL);
	height: var(--sizeCheckXL);
	min-width: var(--sizeCheckXL);
	min-height: var(--sizeCheckXL);
	max-width: var(--sizeCheckXL);
	max-height: var(--sizeCheckXL);
	margin: var(--sizeCheckMarginXL);
}

.va-input.rounded .field-wrapper,
.va-display.rounded .field-wrapper,
.va-input-popup.rounded .field-wrapper,
.va-select.rounded .field-wrapper,
.va-combobox.rounded .field-wrapper,
.va-combobox-url.rounded .field-wrapper,
.va-filterbox.rounded .field-wrapper,
.va-datepicker.rounded .field-wrapper,
.va-yearpicker.rounded .field-wrapper,
.va-monthpicker.rounded .field-wrapper,
.va-timepicker.rounded .field-wrapper,
.va-image-file.rounded .field-wrapper,
.va-file.rounded .field-wrapper {
	border-radius: var(--sizeFieldBorderRadiusM);
}

.va-input.circular .field-wrapper,
.va-display.circular .field-wrapper,
.va-input-popup.circular .field-wrapper,
.va-select.circular .field-wrapper,
.va-combobox.circular .field-wrapper,
.va-combobox-url.circular .field-wrapper,
.va-filterbox.circular .field-wrapper,
.va-datepicker.circular .field-wrapper,
.va-yearpicker.circular .field-wrapper,
.va-monthpicker.circular .field-wrapper,
.va-timepicker.circular .field-wrapper,
.va-image-file.circular .field-wrapper,
.va-file.circular .field-wrapper {
	border-radius: var(--sizeFieldBorderRadiusCircular);
}

.va-input.square .field-wrapper,
.va-display.square .field-wrapper,
.va-select.square .field-wrapper,
.va-combobox.square .field-wrapper,
.va-combobox-url.square .field-wrapper,
.va-filterbox.square .field-wrapper,
.va-datepicker.square .field-wrapper,
.va-yearpicker.square .field-wrapper,
.va-monthpicker.square .field-wrapper,
.va-timepicker.square .field-wrapper,
.va-image-file.square .field-wrapper,
.va-file.square .field-wrapper {
	border-radius: var(--sizeFieldBorderRadiusNone);
}

.va-input.underline .field-wrapper,
.va-display.underline .field-wrapper,
.va-select.underline .field-wrapper,
.va-combobox.underline .field-wrapper,
.va-combobox-url.underline .field-wrapper,
.va-filterbox.underline .field-wrapper,
.va-datepicker.underline .field-wrapper,
.va-yearpicker.underline .field-wrapper,
.va-monthpicker.underline .field-wrapper,
.va-timepicker.underline .field-wrapper,
.va-image-file.underline .field-wrapper,
.va-file.underline .field-wrapper {
	border-top-left-radius: 0rem;
	border-top-right-radius: 0rem;
	border-bottom-left-radius: 0rem;
	border-bottom-right-radius: 0rem;
	background-color: var(--colorTransparentBackground);
	border-left-style: none;
	border-right-style: none;
	border-top-style: none;
}

.va-datepicker,
.va-monthpicker,
.va-yearpicker,
.va-timepicker {
	position: relative;
}

.field-wrapper input[type=text],
.field-wrapper input[type=search],
.field-wrapper input[type=password],
.field-wrapper input[type=number],
.field-wrapper input[type=url],
.field-wrapper input[type=email] {
	background-color: transparent;
	width: 100%;
	box-sizing: border-box;
	min-width: 0rem;
	border-style: none;
	padding: 0 var(--sizeSpacingXXS);
	color: var(--colorForeground);
	background-color: transparent;
	outline-style: none;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}

.va-field .info-div {
	text-overflow: clip;
	overflow-y: visible;
	overflow-x: visible;
	white-space: normal;
	text-align: start;
	display: inline;
	line-height: var(--sizeFontL);
	font-weight: var(--fontWeightRegular);
	font-size: var(--sizeFontMN);
	font-family: var(--fontFamilyBase);
}

.va-textarea .field-wrapper {
	padding: 0.2rem;
	height: 100%;
	width: 100%;
}

.va-textarea .field-wrapper textarea {
	height: 100%;
	width: 100%;
	flex: 1;
	resize: none;
}

.va-textarea {
	min-height: 3.2rem;
	width: 100%;
	height: 100%;
	/*padding-bottom:5px;*/
}

.va-textarea .text-length-inner {
	font-size: var(--sizeFontS);
	color: var(--colorSubLabel);
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
}

.va-textarea .text-length {
	color: var(--colorPrimary);
}

.va-field .va-file-upload-div {
	width: 100%;
}

.va-file-upload-div .file-upload-div-inner {
	border: 1px solid var(--colorNeutralStroke);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.va-file-upload-div.readonly .file-upload-div-inner {
	pointer-events: none;
	border: 0.5px solid var(--colorStrokeDisabled);
}

.va-file-upload-div.disabled .file-upload-div-inner {
	pointer-events: none;
	background-color: var(--colorStrokeDisabled);
}

input.va-input {
	height: var(--sizeFieldM);
	line-height: var(--sizeFontXL);
	font-weight: var(--fontWeightRegular);
	font-size: var(--sizeFontM);
	font-family: var(--fontFamilyBase);
	text-align: left;
	position: relative;
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	border-style: solid;
	border-color: var(--colorFieldBorder);
	border-width: 0.1rem;
	border-radius: var(--sizeFieldBorderRadiusM);
	accent-color: var(--colorActive);
	padding-block: 0.4rem;
}

/*
input.va-input:focus{
    border-bottom-color: var(--colorPrimary);
	border-bottom-width: var(--sizeBorderL);
}
input.va-input.disabled:focus{
    border-bottom-color: var(--colorNeutralForeground);
	border-bottom-width: var(--sizeBorderM);
}
input.va-input.readonly:focus{
    border-bottom-color: var(--colorNeutralForeground);
	border-bottom-width: var(--sizeBorderM);
}
	*/
input.va-input.small {
	line-height: var(--sizeFontM);
	font-size: var(--sizeFontSN);
	padding-block: 0.1rem;
}

input.va-input.large {
	line-height: var(--sizeFontXL);
	font-size: var(--sizeFontMN);
	padding-block: 0.8rem;
}

input.va-input.disabled {
	background-color: var(--colorDisabled);
	border-bottom-color: var(--colorNeutralForeground);
	border-bottom-width: var(--sizeBorderM);
}

input.va-input.readonly {
	border-bottom-color: var(--colorNeutralForeground);
	border-bottom-width: var(--sizeBorderM);
}

.va-input.rounded {
	border-radius: 15%;
}

.va-input.circular {
	border-radius: 50%;
}

.va-input.square {
	border-radius: 0%;
}

.va-label {
	display: block;
	line-height: var(--sizeFontMineM);
	font-size: var(--sizeFontMN);
	font-family: var(--fontFamilyBase);
	color: var(--colorLabel);
}

.va-label .label-inner {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.va-label.align-left .label-inner {
	justify-content: start;
}

.va-label.align-right .label-inner {
	justify-content: end;
}

.va-label.align-center .label-inner {
	justify-content: center;
}

.va-label.xsmall {
	line-height: var(--sizeFontMineXS);
	font-size: var(--sizeFontSN);
	font-family: var(--fontFamilyBase);
}

.va-label.small {
	line-height: var(--sizeFontMineS);
	font-size: var(--sizeFontS);
	font-family: var(--fontFamilyBase);
}

.va-label.medium {
	line-height: var(--sizeFontMineM);
	font-size: var(--sizeFontMN);
	font-family: var(--fontFamilyBase);
}

.va-label.large {
	font-weight: var(--fontWeightSemibold);
	line-height: var(--sizeFontMineL);
	font-size: var(--sizeFontM);
	font-family: var(--fontFamilyBase);
}

.va-label.xlarge {
	font-weight: var(--fontWeightSemibold);
	line-height: var(--sizeFontMineXL);
	font-size: var(--sizeFontL);
	font-family: var(--fontFamilyBase);
}

.va-label.disabled {
	color: var(--colorStrokeDisabled);
}

.va-label.top.required .text:before {
	content: '*';
	color: red;
	margin-right: 0.4rem;
	margin-left: 0.2rem;
}

.va-label.bottom.required .text:before {
	content: '*';
	color: red;
	margin-right: 0.4rem;
	margin-left: 0.2rem;
}

.va-label.left.required .text:before {
	content: '*';
	color: red;
	margin-right: 0.4rem;
	margin-left: 0.2rem;
}

.va-label.right.required .text:after {
	content: '*';
	color: red;
	margin-right: 0.2rem;
	margin-left: 0.4rem;
}

.va-label.seperator.left .text:after {
	content: var(--labelSeperator);
	margin-right: var(--labelSeperatorMarginRight);
	margin-left: var(--labelSeperatorMarginLeft);
}

.va-label.seperator.right .text:before {
	content: var(--labelSeperator);
	margin-right: var(--labelSeperatorMarginRight);
	/* left와 반대*/
	margin-left: var(--labelSeperatorMarginLeft);
}

.va-validation {
	line-height: var(--sizeFontMineM);
	font-size: var(--sizeFontS);
	font-family: var(--fontFamilyBase);
	color: var(--colorForeground);
	margin-top: -1px;

}

.va-validation.xsmall {
	line-height: var(--sizeFontMineXS);
	font-size: var(--sizeFontSN);
	font-family: var(--fontFamilyBase);
}

.va-validation.small {
	line-height: var(--sizeFontMineS);
	font-size: var(--sizeFontS);
	font-family: var(--fontFamilyBase);
}

.va-validation.medium {
	line-height: var(--sizeFontMineM);
	font-size: var(--sizeFontS);
	font-family: var(--fontFamilyBase);
}

.va-validation.large {
	font-weight: var(--fontWeightSemibold);
	line-height: var(--sizeFontMineL);
	font-size: var(--sizeFontM);
	font-family: var(--fontFamilyBase);
}

.va-validation.xlarge {
	font-weight: var(--fontWeightSemibold);
	line-height: var(--sizeFontMineXL);
	font-size: var(--sizeFontS);
	font-family: var(--fontFamilyBase);
}

.va-validation .validation-inner {
	display: flex;
	align-items: center;
	color: var(--colorSubLabel);
}

.va-validation .icon {
	background-color: var(--colorStatusSuccess);
	width: var(--sizeFontM);
	height: var(--sizeFontM);
	margin-right: 0.5rem;
}

.va-validation.success {
	color: var(--colorStatusSuccess);
}

.va-validation.info {
	color: var(--colorPrimary);
}

.va-validation.warning {
	color: var(--colorStatusWarningStroke);
}

.va-validation.error {
	color: var(--colorStatusDangerStroke);
}

.va-validation .content {
	font-size: var(--sizeFontS);
}

.va-validation.success .icon {
	mask-image: url(../icons/ico_checkmark_circle_fill.svg);
	mask-size: 112% 112%;
	background-color: var(--colorStatusSuccess);
}

.va-validation.info .icon {
	mask-image: url(../icons/ico_info_circle_fill.svg);
	mask-size: 112% 112%;
	background-color: var(--colorPrimary);
}

.va-validation.warning .icon {
	mask-image: url(../icons/ico_waring_triangle_fill.svg);
	mask-size: 112% 112%;
	background-color: var(--colorStatusWarningStroke);
}

.va-validation.error .icon {
	mask-image: url(../icons/ico_error_circle_fill.svg);
	mask-size: 112% 112%;
	background-color: var(--colorStatusDangerStroke);
}

.va-validation.small .icon {
	width: var(--sizeFontXS);
	height: var(--sizeFontXS);
	margin-right: 0.3rem;
}

.va-validation.medium .icon {
	width: var(--sizeFontS);
	height: var(--sizeFontS);
	margin-right: 0.5rem;
}

.va-validation.large .icon {
	width: var(--sizeFontM);
	height: var(--sizeFontM);
	margin-right: 0.8rem;
}

.va-li.dot::before {
	content: '•';
}

a.va-link {
	font-size: inherit;
	user-select: text;
	text-overflow: inherit;
	text-decoration-thickness: var(--sizeBorderM);
	text-decoration-line: none;
	overflow-y: inherit;
	overflow-x: inherit;
	padding: 0rem;
	margin-bottom: 0rem;
	margin-left: 0rem;
	margin-right: 0rem;
	color: var(--colorPrimary);
	box-sizing: border-box;
	background-color: transparent;
	cursor: pointer;
	margin-top: 0rem;
	display: inline;
	font-weight: var(--fontWeightRegular);
	font-family: var(--fontFamilyBase);
	text-align: left;
}

a.va-link.xsmall {
	font-size: var(--sizeFontS);
}

a.va-link.small {
	font-size: var(--sizeFontMN);
}

a.va-link.medium {
	font-size: var(--sizeFontM);
}

a.va-link.large {
	font-size: var(--sizeFontL);
}

a.va-link.xlarge {
	font-size: var(--sizeFontXL);
}

a.va-link:hover {
	text-decoration: underline;
}

a.va-link.disabled {
	cursor: not-allowed;
	color: var(--colorStrokeDisabled);
}

a.va-link.disabled:hover {
	cursor: not-allowed;
	color: var(--colorStrokeDisabled);
	text-decoration: none;
}

a.va-link.selected {
	outline: 0.2rem solid var(--colorFocusLine);
}

.va-message-bar {
	padding-left: var(--sizeSpacingM);
	padding-right: var(--sizeSpacingM);
	border-style: solid;
	border-width: var(--sizeBorderM);
	border-color: var(--colorNeutralForeground);
	border-radius: var(--sizeFieldBorderRadiusM);
	min-height: 3.6rem;
	box-sizing: border-box;
	background-color: var(--colorNeutralBackground3);
}

.va-message-bar .message-bar-inner {
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.va-message-bar .message-bar-inner .primary-inner {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 0.3rem 0.3rem;
	justify-content: flex-end;
	gap: 0.6rem;
}

.va-message-bar .message-bar-inner .secondary-inner {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 0.3rem 0.3rem;
	justify-content: flex-end;
}

.va-message-bar .message-bar-inner .content-inner {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.va-message-bar.large {
	min-height: 4.4rem;
}

.va-message-bar.warning {
	border-color: var(--colorStatusWarningStroke);
	background-color: var(--colorStatusWarning2);
}

.va-message-bar.error {
	border-color: var(--colorStatusDangerStroke);
	background-color: var(--colorStatusDanger2);
}

.va-message-bar.success {
	border-color: var(--colorStatusSuccessStroke);
	background-color: var(--colorStatusSuccess2);
}

.va-message-bar .primary-inner .icon {
	background-color: var(--colorForeground3);
	margin-right: 0.5rem;
	width: var(--sizeIconS);
	height: var(--sizeIconS);
}

.va-message-bar.error .primary-inner .icon {
	background-color: var(--colorStatusDanger);
}

.va-message-bar.warning .primary-inner .icon {
	background-color: var(--colorStatusWarning);
}

.va-message-bar.success .primary-inner .icon {
	background-color: var(--colorStatusSuccess);
}

.va-message-bar .header {
	float: left;
	font-size: var(--sizeFontMN);
	display: flex;
	flex-direction: row;
	align-items: center;
	min-height: var(--sizeFieldM);
	margin-right: 1rem;
}

.va-message-bar .title {
	font-family: var(--fontFamilyBase);
	font-size: var(--sizeFontMN);
	font-weight: var(--fontWeightSemibold);
	line-height: var(--sizeFontL);
}

.va-message-bar .content {
	display: flex;
	flex-direction: row;
	align-items: center;
	font-size: var(--sizeFontMN);
	float: left;
}

.va-message-bar .footer {
	font-size: var(--sizeFontMN);
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 0 0.3rem;
	gap: var(--sizeSpacingS);
}

.va-message-bar .title {
	font-family: var(--fontFamilyBase);
	font-size: var(--sizeFontMN);
	font-weight: var(--fontWeightSemibold);
	line-height: var(--sizeFontL);
}

.va-list,
.va-scroll-list,
.va-page-list {

	overflow: hidden;
	border: 1px solid var(--colorNeutralStroke);
}

.va-list .list-inner {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
}

.va-list .list-inner ul {
	height: 100%;
	width: 100%;
	position: absolute;
	overflow-y: auto;
}

.va-list-item {
	align-items: center;
	border-radius: var(--sizeFieldBorderRadiusM);
	position: relative;
	color: var(--colorForeground2);
	background-color: var(--colorBackground);
	padding-right: var(--sizeSpacingSN);
	padding-left: var(--sizeSpacingSN);
	box-sizing: border-box;
	min-height: var(--sizeFieldM);
	flex-shrink: 0;
	display: flex;
	flex-direction: row;
	align-items: center;
	font-size: var(--sizeFontMN);
	cursor: pointer;
	gap: 0.4rem;
	user-select: none;
	line-height: var(--sizeFontL);
	font-weight: var(--fontWeightRegular);
	font-family: var(--fontFamilyBase);
	margin: 2px;
	min-width: max-content;
}

.va-list-item.disabled {
	cursor: not-allowed;
	color: var(--colorStrokeDisabled);
	text-decoration: none;
}

.va-list-item.disabled:hover {
	cursor: not-allowed;
	color: var(--colorStrokeDisabled);
	text-decoration: none;
	background-color: inherit;
}

.va-list-item.border-bottom {
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
	border-bottom: 0.1rem solid var(--colorNeutral4);
}

.va-list-item.rounded {
	border-radius: var(--sizeFieldBorderRadiusM);
}

.va-list-item.circular {
	border-radius: var(--sizeFieldBorderRadiusCircular);
}

.va-list-item.square {
	border-radius: var(--sizeFieldBorderRadiusNone);
}

.va-list-item.odd {
	background-color: var(--colorNeutral4);
}

.va-list-item.stripe {
	background-color: var(--colorNeutral4);
}

.va-button.focused {
	outline: 0.2rem solid var(--colorFocusLine);
}

.va-button.transparent.focused {
	outline: none;
}

.va-list-item .content {
	padding-left: 0.2rem;
	padding-right: 0.2rem;
	background-color: transparent;
	flex-grow: 1;
	color: var(--colorForeground2);
	background-color: var(--colorSubtle);
	border-color: transparent;
}

.va-list-item .seconary-content {
	padding-left: 0.2rem;
	padding-right: 0.2rem;
	font-family: var(--fontFamilyBase);
	font-size: var(--sizeFontS);
	font-weight: var(--fontWeightRegular);
	line-height: var(--sizeFontL);
	color: var(--colorForeground3);
}

.va-list-item.selected {
	background-color: var(--colorGridSelected);
	color: var(--colorGridSelectedForeground);
}

.va-list-item.focused {
	outline: 0.2rem solid var(--colorFocusLine);
}

.va-list-item:hover {
	color: var(--colorForeground2);
	background-color: var(--colorSubtleHover);
}

.va-list-item.no-selection:hover {
	color: inherit;
	background-color: inherit;
}

.va-list-item:active {
	color: var(--colorForeground2);
	background-color: var(--colorSubtlePressed);
}

.va-list-item .icon {
	align-items: center;
	display: inline-flex;
	justify-content: center;
	font-size: var(--sizeFontL);
	height: var(--sizeFontL);
	width: var(--sizeFontL);
	background-color: var(--colorForeground);
}

.va-list-item.selected i,
.va-list-item.selected:hover i {
	background-color: var(--colorPrimaryForeground);
}

.va-list-item:hover i {
	background-color: var(--colorForeground);
}

.va-list-item.xsmall {
	min-height: var(--sizeFieldXS);
	font-size: var(--sizeFontS);
}

.va-list-item.small {
	min-height: var(--sizeFieldS);
	font-size: var(--sizeFontS);
}

.va-list-item.medium {
	min-height: var(--sizeFieldM);
	font-size: var(--sizeFontMN);
}

.va-list-item.large {
	min-height: var(--sizeFieldL);
	font-size: var(--sizeFontM);
}

.va-list-item.xlarge {
	min-height: var(--sizeFieldXL);
	font-size: var(--sizeFontM);
}

.va-list-item .icon.left {
	margin-right: var(--sizeSpacingSN);
}

.va-list-item .icon.right {
	margin-left: var(--sizeSpacingSN);
}

.va-list-item .icon.menu {
	margin-top: 0.5rem;
	width: 1.2rem;
	height: 1.2rem;
	margin-left: 0.5rem;
}

.va-card-list {
	display: block;
	overflow: auto;
}

.va-card-list .card-list-inner {
	display: block;
	width: 100%;
	/*height:100%;*/

}

.va-card {
	display: block;
	border: 0.1rem solid transparent;
}

.va-card.selected {
	outline: 0.1rem solid var(--colorPrimary);
}

.va-card:hover {
	color: var(--colorForeground2);
	background-color: var(--colorSubtleHover);
}

.va-card.no-selection:hover {
	color: inherit;
	background-color: inherit;
}

.va-card:active {
	color: var(--colorForeground2);
	background-color: var(--colorSubtlePressed);
}

.va-card.no-active:active {
	background-color: inherit;
}

.va-card .icon {
	align-items: center;
	display: inline-flex;
	justify-content: center;
	font-size: var(--sizeFontL);
	height: var(--sizeFontL);
	width: var(--sizeFontL);
	background-color: var(--colorForeground);
}

.va-tree {
	display: flex;
	flex-direction: column;
	row-gap: var(--sizeSpacingXXS);
	position: relative;
	border-top: var(--sizeBorderLN) solid var(--colorFieldBorder);
	/*border-radius:var(--sizeBorderRadiusS);*/
	overflow: hidden;
	/*background-color:var(--colorNeutral);*/
}

/*
.va-tree.rounded {
	border-radius:var(--sizeBorderRadiusM);
}
.va-tree.square {
	border-radius:0px;
}

.va-tree .tree-inner{
	position: absolute;
	display:flex;
	overflow:auto;
	width:100%;
	height:100%;
	padding-left:1rem;
	
}
*/
.va-tree .tree-ul {
	position: absolute;
	min-width: max-content;
	width: 100%;
}

.va-tree ul {
	flex: 1;
	/*overflow: auto;*/
	margin: 0rem;
	padding-left: 0.8rem;
	margin-left: 5px;
	border-left: 1px solid darkgray;
}

.va-tree.rounded {
	border-radius: var(--sizeBorderRadiusM);
}

.va-tree.square {
	border-radius: 0px;
}

.va-tree .tree-inner {
	position: relative;
	/*display:flex;
	flex:1;*/
	overflow: auto;
	width: 100%;
	height: 100%;
	padding-left: 0.3rem;
	/*padding-right:0.3rem;*/
}

.va-tree .grid-scroll {
	overflow: auto;
	position: absolute;
}

.va-tree .grid-scroll-pop {
	background-color: yellow;
	position: absolute;
}

.va-tree .grid-scroll-inner {
	background-color: white;
}

.va-tree .grid-body-scroll {
	position: absolute;
	top: 0rem;
	width: 1.0rem;
	height: 30.0rem;
	background-color: var(--colorNeutral);
	overflow-x: hidden;
}

.va-list .grid-body-scroll {
	position: absolute;
	top: 0rem;
	width: 1.0rem;
	height: 30.0rem;
	background-color: var(--colorNeutral);
	overflow-x: hidden;
}

.va-combobox .grid-body-scroll {
	position: absolute;
	top: 0rem;
	width: 1.0rem;
	height: 30.0rem;
	background-color: var(--colorNeutral);
	overflow-x: hidden;
}

.va-tree .grid-body-scroll-pos {
	width: 1.0rem;
	height: 1.0rem;
	background-color: #eee;
	border: 0rem solid #aaaaaa;
	position: absolute;
}

.va-tree .grid-body-scroll-top {
	width: 1.0rem;
	height: 1.0rem;
	position: absolute;
	top: 0rem;
	content: '\25B2';
	background-color: white;
	background-repeat: no-repeat;
	background-size: a;
	background-image: url(../img/grid_scroll_up.png);
	border: 0rem solid #aaaaaa;
	color: black;
}

.va-tree .grid-body-scroll-bottom {
	width: 1.0rem;
	height: 1.0rem;
	position: absolute;
	content: '\25BC';
	background-color: white;
	background-repeat: no-repeat;
	background-size: a;
	background-image: url(../img/grid_scroll_down.png);
	border: 0rem solid #aaaaaa;
	color: black;
}

.va-tree-item {
	border-radius: var(--sizeFieldBorderRadiusM);
	position: relative;
	color: var(--colorForeground2);
	/*background-color: var(--colorBackground);*/
	padding-right: var(--sizeSpacingSN);
	padding-left: var(--sizeSpacingSN);
	box-sizing: border-box;
	min-height: 3.2rem;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: start;
	font-size: var(--sizeFontMN);
	cursor: pointer;
	user-select: none;
	line-height: var(--sizeFontL);
	font-weight: var(--fontWeightRegular);
	font-family: var(--fontFamilyBase);
	width: 100%;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: start;
}

.va-tree-item .row {
	height: 3.2rem;
	overflow: hidden;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.va-tree-item.xsmall .row {
	min-height: 1.6rem;
	font-size: var(--sizeFontS);
	line-height: var(--sizeFontM);
}

.va-tree-item.small .row {
	min-height: 2.4rem;
}

.va-tree-item.medium .row {
	min-height: 3.2rem;
}

.va-tree-item.large .row {
	min-height: 4rem;
}

.va-tree-item.xlarge .row {
	min-height: 4.8rem;
}

.va-tree-item .icon {
	width: 1.2rem;
	height: 1.2rem;
}

.va-tree-item.xsmall .icon {
	width: 0.8rem;
	height: 0.8rem;
}

.va-tree-item.small .icon {
	width: 1.6rem;
	height: 1.6rem;
}

.va-tree-item.medium .icon {
	width: 2.4rem;
	height: 2.4rem;
}

.va-tree-item.large .icon {
	width: 3.2rem;
	height: 3.2rem;
}

.va-tree-item.xlarge .icon {
	width: 4rem;
	height: 4rem;
}

.va-tree-item.border-bottom {
	border-bottom: 0.5rem solid var(--colorNeutralForeground);
}

.tree-guide {
	position: relative;
	display: inline-block;
	align-self: stretch;
	box-sizing: border-box;
	flex-shrink: 0;
	min-height: 2rem;
}

.tree-guide-pipe::before {
	content: '';
	position: absolute;
	left: calc(50% - 0.5px);
	top: 0;
	bottom: 0;
	width: 1px;
	background-color: var(--colorNeutralStroke);
}

.tree-guide-branch::before {
	content: '';
	position: absolute;
	left: calc(50% - 0.5px);
	top: 0;
	bottom: 0;
	width: 1px;
	background-color: var(--colorNeutralStroke);
}

.tree-guide-branch::after {
	content: '';
	position: absolute;
	left: 50%;
	top: calc(50% - 0.5px);
	right: 0;
	height: 1px;
	background-color: var(--colorNeutralStroke);
}

.tree-guide-last::before {
	content: '';
	position: absolute;
	left: calc(50% - 0.5px);
	top: 0;
	height: 50%;
	width: 1px;
	background-color: var(--colorNeutralStroke);
}

.tree-guide-last::after {
	content: '';
	position: absolute;
	left: 50%;
	top: calc(50% - 0.5px);
	right: 0;
	height: 1px;
	background-color: var(--colorNeutralStroke);
}

.va-tree-item .drop {
	height: 0.4rem;
	width: 100%;
}

.va-tree-item.odd {
	background-color: var(--colorNeutralBackground2);
}

.va-tree-item .content {
	padding-left: 0.2rem;
	padding-right: 0.2rem;
	background-color: transparent;
	flex-grow: 1;
	color: var(--colorForeground2);
	background-color: var(--colorSubtle);
	border-color: transparent;
}

.va-tree-item .seconary-content {
	padding-left: 0.2rem;
	padding-right: 0.2rem;
	font-family: var(--fontFamilyBase);
	font-size: var(--sizeFontS);
	font-weight: var(--fontWeightRegular);
	line-height: var(--sizeFontL);
	color: var(--colorForeground3);
}

.va-tree-item .item {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.va-tree-item .item.selected {
	background-color: var(--colorGridSelected);
	border-bottom-width: var(--sizeBorderXL);
	color: var(--colorForeground);
}

.va-tree-item .item:hover {
	color: var(--colorForeground2);
	background-color: var(--colorSubtleHover);
}

.va-tree-item .item:active {
	color: var(--colorForeground2);
	background-color: var(--colorSubtlePressed);
}

.va-tree-item .icon {
	align-items: center;
	display: inline-flex;
	justify-content: center;
	font-size: var(--sizeFontL);
	height: var(--sizeFontL);
	width: var(--sizeFontL);
	background-color: var(--colorForeground);
}

.va-tree-item .icon:hover {
	background-color: var(--colorPrimary);
}

.va-tree-item.large .content {
	font-size: var(--sizeFontM);
}

.va-tree-item.medium .content {
	font-size: var(--sizeFontMN);
}

.va-tree-item.small .content {
	font-size: var(--sizeFontS);
}

.va-tree-item.large .icon {
	height: var(--sizeFontXL);
	width: var(--sizeFontXL);
}

.va-tree-item.medium .icon {
	height: var(--sizeFontL);
	width: var(--sizeFontL);
}

.va-tree-item.small .icon {
	height: var(--sizeFontM);
	width: var(--sizeFontM);
}

.va-tree-item .icon.left {
	margin-right: var(--sizeSpacingSN);
}

.va-tree-item .icon.right {
	margin-left: var(--sizeSpacingSN);
}

.va-tree-item .icon.menu {
	width: 1.2rem;
	height: 1.2rem;
	margin-right: 0.4rem;
	color: var(--colorPrimary);
}

.tree-div {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	background-color: white;
}

.tree {
	flex: 1;
	border: 0.1rem solid var(--colorNeutralStroke);
	overflow: auto;
	margin: 0rem;
}

.tree-folder-expand {
	width: 1.6rem;
	height: 1.6rem;
	margin: 0rem 0.5rem 0 0.5rem;
	background-size: cover;
	background-image: url(../icons/ico_subtract_square.svg);
}

.tree-folder-collapse {
	width: 1.6rem;
	height: 1.6rem;
	margin: 0rem 0.5rem 0 0.5rem;
	background-size: cover;
	background-image: url(../icons/ico_add_square.svg);
}

.tree-folder-none {
	width: 1.6rem;
	height: 1.6rem;
	margin: 0rem 0.4rem 0 0rem;
	background-size: cover;
}

.va-full-screen {
	opacity: 1;
	inset: 0rem;
	background-color: rgba(0, 0, 0, 0.4);
	position: absolute;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	margin: 0;
}

.full-screen-inner {
	position: static;
	margin: auto;
	display: block;
	background-color: transparent;
	width: 100%;
	height: 100%;
}

.va-dialog-cover {
	opacity: 1;
	inset: 0rem;
	background-color: rgba(0, 0, 0, 0.4);
	position: fixed;
	left: 0rem;
	top: 0rem;
	right: 0rem;
	bottom: 0rem;
	box-sizing: border-box;
	margin: 0;
	/*z-index: 1;*/
}

.va-dialog {
	opacity: 1;
	transform: scale(1) translateZ(0rem);
	box-shadow: var(--shadowM);
	inset: 0rem;
	/*padding: 1.8rem 2.4rem;*/
	padding: var(--sizeDiaglogPaddingHor) var(--sizeDiaglogPaddingVer);
	padding: var(--sizeSpacingNone);
	right: inherit;
	border-style: solid;
	overflow: unset;
	border: 0.1rem solid var(--colorNeutralStroke);
	border-radius: var(--sizeFieldBorderRadiusM);
	display: block;
	user-select: unset;
	visibility: unset;
	position: fixed;
	height: fit-content;
	max-height: 100vh;
	box-sizing: border-box;
	background-color: var(--colorBackground);
	color: var(--colorForeground);
}

.va-dialog.none {
	padding: 0rem 0rem;
}

.va-dialog.xsmall {
	padding: 0.6rem 1.2rem;
}

.va-dialog.small {
	padding: 1.2rem 2.8rem;
}

.va-dialog.medium {
	padding: 1.8rem 2.4rem;
}

.va-dialog.large {
	padding: 2.4rem 3.2rem;
}

.va-dialog.xlarge {
	padding: 3.2rem 4.0rem;
}

.va-dialog.xxlarge {
	padding: 4.0rem 4.8rem;
}

.va-dialog .dialog-inner {
	display: flex;
	flex-direction: column;
	gap: var(--sizeSpacingL);
}

.va-dialog .dialog-header {
	font-family: var(--fontFamilyBase);
	font-size: var(--sizeFontM);
	/*font-weight: var(--fontWeightSemibold);*/
	line-height: var(--sizeFontM);
	margin: 0rem;
	margin-bottom: 1rem;
	display: flex;
	flex-direction: row;
	align-items: center;
	background-color: var(--colorCardBorder);
	color: var(--colorPrimary);
	/*padding: var(--sizeDiaglogPaddingVerTop) 0 0.5rem 0;*/
	padding-left: var(--sizeSpacingMN);
	padding-right: var(--sizeSpacingMN);
	height: 2.6rem;
}

.va-dialog .dialog-header span {
	flex: 1;
}

.va-dialog .dialog-content {
	margin: 0rem;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	padding: var(--sizeDiaglogPaddingVer) var(--sizeDiaglogPaddingHor);
}

.va-dialog .dialog-footer {
	gap: var(--sizeSpacingSN);
	font-family: var(--fontFamilyBase);
	font-size: var(--sizeFontL);
	font-weight: var(--fontWeightSemibold);
	line-height: var(--sizeFontXXL);
	margin: 0rem;
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 0.5rem 0 0 0;
	justify-content: right;
}

.va-dialog .body {
	padding: var(--sizeBorderL);
	margin: calc(var(--sizeBorderL) * -1);
	font-family: var(--fontFamilyBase);
	font-size: var(--sizeFontMN);
	font-weight: var(--fontWeightRegular);
	line-height: var(--sizeFontL);
	overflow-y: auto;
	min-height: 3.2rem;
	box-sizing: border-box;
}

.va-pop-cover {
	opacity: 1;
	inset: 0rem;
	background-color: rgba(255, 255, 255, 1);
	backdrop-filter: blur(0.8rem);
	position: absolute;
	left: 0rem;
	top: 0rem;
	right: 0rem;
	bottom: 0rem;
	box-sizing: border-box;
	margin: 0;
}

.va-pop {
	position: absolute;
	margin: 0rem;
	box-shadow: var(--shadow16);
	/* border-color: var(--colorNeutralStroke); */
	/* border-style: solid; */
	/* border-width: 0.1rem; */
	/* border-radius: var(--sizeFieldBorderRadiusM); */
	/* border-radius: 0 0 var(--sizeFieldBorderRadiusM) var(--sizeFieldBorderRadiusM); */
	line-height: var(--sizeFontL);
	font-weight: var(--fontWeightRegular);
	font-size: var(--sizeFontMN);
	font-family: var(--fontFamilyBase);
	/* background-color: var(--colorBackground); */
	/* color: var(--colorForeground); */
	display: block;
	background-color: var(--colorTopbackground);
	color: white;
}

.va-pop .pop-inner {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--szieSpacingM);
}

.va-pop .header {
	font-family: var(--fontFamilyBase);
	font-size: var(--sizeFontL);
	font-weight: var(--fontWeightSemibold);
	line-height: var(--sizeFontXXL);
	margin: 0rem;
	margin-bottom: 1rem;
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 0 0 0.5rem 0;
}

.va-tab .header {
	margin-bottom: 0;
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 0 0 0 0;
	height: var(--gridHeaderRowHeight);
	background-color: var(--colorCard);
}

.va-tab-item {
	display: block;
	width: 100%;
	height: 100%;
	padding: var(--sizeSpacingMN);
}

.va-pop .header span {
	flex: 1;
}

.va-pop .pop-inner {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.va-pop .content {
	margin: 0rem;
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.va-pop .body {
	padding: var(--sizeBorderM);
	margin: calc(var(--sizeBorderM) * -1);
	font-family: var(--fontFamilyBase);
	font-size: var(--sizeFontMN);
	font-weight: var(--fontWeightRegular);
	line-height: var(--sizeFontL);
	overflow-y: auto;
	min-height: 3.2rem;
	box-sizing: border-box;
}

.va-popover {
	width: max-content;
	max-width: 500px;
	position: absolute;
	margin: 0rem;
	padding: 1.6rem;
	box-shadow: var(--shadow16);
	border-color: var(--colorNeutralStroke);
	border-style: solid;
	border-width: 0.1rem;
	border-radius: var(--sizeFieldBorderRadiusM);
	line-height: var(--sizeFontL);
	font-weight: var(--fontWeightRegular);
	font-size: var(--sizeFontMN);
	font-family: var(--fontFamilyBase);
	background-color: var(--colorBackground);
	color: var(--colorForeground);
	display: none;
}

.va-popover .header {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-bottom: 0.5rem;
}

.va-popover .title {
	margin-top: 0rem;
	margin-bottom: 0rem;
	flex: 1;
	height: 2.6rem;
}

.va-popover .popover-inner {
	line-height: var(--sizeFontL);
	font-weight: var(--fontWeightRegular);
	font-size: var(--sizeFontMN);
	font-family: var(--fontFamilyBase);
	color: var(--colorForeground);
	margin-top: 0rem;
	flex: 1;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.va-popover .content {
	flex: 1;
}

.va-popover.brand {
	background-color: var(--colorPrimary);
}

.va-popover.brand .header {
	color: var(--colorPrimaryForeground);
}

.va-popover.brand .detail {
	color: var(--colorPrimaryForeground);
}

.va-popover.inverted {
	background-color: var(--colorInverted);
	color: var(--colorInvertedForeground);
}

.va-popover.inverted .header {
	color: var(--colorInvertedForeground);
}

.va-popover.inverted .detail {
	color: var(--colorInvertedForeground);
}

.va-popover.inverted .content {
	color: var(--colorInvertedForeground);
}

.va-popover.outline {
	border: 0.2rem solid var(--colorPrimary);
}

.va-popover.with-arrow .with-arrow {
	position: absolute;
	visibility: visible;
	height: 1.312rem;
	width: 1.312rem;
	bottom: -1px;
	left: 50%;
	border-bottom: 1px solid var(--colorNeutralStroke);
	border-right: 1px solid var(--colorNeutralStroke);
	border-bottom-right-radius: var(--sizeFieldBorderRadiusS);
	transform: translate(0, 50%) rotate(45deg);
	background-color: inherit;
}

.va-popover.with-arrow.outline .with-arrow {
	border-bottom: 0.2rem solid var(--colorPrimary);
	border-right: 0.2rem solid var(--colorPrimary);
}

.va-messagebox {
	opacity: 1;
	transform: scale(1) translateZ(0rem);
	box-shadow: var(--shadowM);
	inset: 0rem;
	border-style: solid;
	overflow: unset;
	border-width: 0rem;
	/*0.1rem;*/
	border-color: var(--colorNeutralStroke);
	border-radius: var(--sizeFieldBorderRadiusXL);
	display: block;
	user-select: unset;
	visibility: unset;
	position: fixed;
	height: fit-content;
	max-height: 100vh;
	box-sizing: border-box;
	background-color: var(--colorBackground);
	color: var(--colorForeground);
	min-width: 300px;
	min-height: 140px;
	/*max-width:95%;*/
	width: fit-content;
}

.va-messagebox .messagebox-inner {
	display: flex;
	flex-direction: column;
	/*gap:1rem;*/
}

.va-messagebox .header {
	border-top-left-radius: var(--sizeFieldBorderRadiusXL);
	border-top-right-radius: var(--sizeFieldBorderRadiusXL);
	font-family: var(--fontFamilyBase);
	font-size: var(--sizeFontM);
	font-weight: var(--fontWeightSemibold);
	line-height: var(--sizeFontXL);
	margin: 0rem;
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	height: 20px;
	/*padding: var(--sizeMessageboxPaddingVerTop) 0 0.5rem 0;*/
	background-color: var(--colorMessageBoxHeader);
}

.va-messagebox .message {
	text-align: center;
}

.va-messagebox.success .header {
	background-color: var(--colorStatusSuccess)
}

.va-messagebox.warning .header {
	background-color: var(--colorStatusWarning)
}

.va-messagebox .header span {
	flex: 1;
}

.va-messagebox .inner {
	margin: 0rem;
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.va-messagebox .content {
	font-family: var(--fontFamilyBase);
	font-size: var(--sizeFontM);
	line-height: var(--sizeFontXL);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	/* 가운데정렬 김혜림 25.12.31 */
	gap: var(--sizeSpacingXXS);
	/*sizeSpacingXXS   sizeSpacingS*/
	padding: var(--sizeMessageboxPaddingVerTop) var(--sizeMessageboxPaddingHor) var(--sizeMessageboxPaddingVer) var(--sizeMessageboxPaddingHor);

}

.va-messagebox .icon {
	min-width: var(--sizeFieldL);
	width: var(--sizeFieldL);
	min-height: var(--sizeFieldL);
	height: var(--sizeFieldL);
	background-color: var(--colorNeutralForeground);

}

.va-messagebox.success .icon {
	background-color: var(--colorStatusSuccess)
}

.va-messagebox.warning .icon {
	background-color: var(--colorStatusWarning)
}

.va-messagebox .va-button .icon {
	background-color: var(--colorPrimaryForeground);
}

.va-messagebox .footer {
	gap: var(--sizeSpacingSN);
	font-family: var(--fontFamilyBase);
	font-size: var(--sizeFontL);
	font-weight: var(--fontWeightSemibold);
	line-height: var(--sizeFontXXL);
	margin: 0rem;
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 0.5rem 0 2rem 0;
	justify-content: center;
}

.va-messagebox .title {
	font-size: var(--sizeFontM);
	font-weight: var(--fontWeightSemibold);
	color: var(--colorMessageTitle);
}

.va-messagebox .message {
	font-size: var(--sizeFontMN);
}

.va-sidebar {
	opacity: 1;
	transform: scale(1) translateZ(0rem);
	box-shadow: var(--shadowM);
	inset: 0rem;
	padding: 2.4rem;
	border-style: solid;
	overflow: unset;
	border-width: 1rem;
	border-color: var(--colorTransparentForeground);
	display: block;
	user-select: unset;
	visibility: unset;
	position: fixed;
	height: fit-content;
	max-height: 100vh;
	box-sizing: border-box;
	background-color: var(--colorBackground);
	color: var(--colorForeground);
}

.va-sidebar.right {
	margin-left: auto;
	transform: scale(1) translateZ(0rem);
}

.va-sidebar .header {
	font-family: var(--fontFamilyBase);
	font-size: var(--sizeFontL);
	font-weight: var(--fontWeightSemibold);
	line-height: var(--sizeFontXXL);
	margin: 0rem;
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 0 0 0.5rem 0;
}

.va-sidebar .header span {
	flex: 1;
}

.va-sidebar .body {
	margin: 0rem;
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.va-sidebar .footer {
	font-family: var(--fontFamilyBase);
	font-size: var(--sizeFontL);
	font-weight: var(--fontWeightSemibold);
	line-height: var(--sizeFontXXL);
	margin: 0rem;
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 0.5rem 0 0 0;
}

.va-sidebar .body {
	padding: var(--sizeBorderL);
	margin: calc(var(--sizeBorderL) * -1);
	font-family: var(--fontFamilyBase);
	font-size: var(--sizeFontMN);
	font-weight: var(--fontWeightRegular);
	line-height: var(--sizeFontL);
	overflow-y: auto;
	min-height: 3.2rem;
	box-sizing: border-box;
}

.va-divider {
	flex-direction: row;
	box-sizing: border-box;
	position: relative;
	text-align: center;
	align-items: center;
	font-size: var(--sizeFontS);
	color: var(--colorDivBorder);
	line-height: var(--sizeFontM);
	display: flex;
	font-weight: var(--fontWeightRegular);
	font-family: var(--fontFamilyBase);
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.va-divider.xsmall {
	font-size: var(--sizeFontSN);
}

.va-divider.small {
	font-size: var(--sizeFontS);
}

.va-divider.medium {
	font-size: var(--sizeFontMN);
}

.va-divider.large {
	font-size: var(--sizeFontM);
}

.va-divider.xlarge {
	font-size: var(--sizeFontL);
}

.va-divider.xxlarge {
	font-size: var(--sizeFontXL);
}

.va-divider.horizontal .thumb {
	z-index: 1;
	max-width: 10rem;
	width: 90%;
	height: 0.8rem;
	border-radius: 0.4rem;
	background-color: var(--colorBackground);
	border: 1px solid var(--colorNeutralStroke);
	position: absolute;
	left: 50%;
	transform: translate(-50%, 0);
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/*
.va-divider.xsmall.horizontal .thumb.before {
	transform:translate(-50%, 0.2rem);
	border-radius: 0 0 5px 5px;
}
.va-divider.small.horizontal .thumb.before {
	transform:translate(-50%, 0.3rem);
	border-radius: 0 0 5px 5px;
}
.va-divider.medium.horizontal .thumb.before {
	transform:translate(-50%, 0.4rem);
	border-radius: 0 0 5px 5px;
}
.va-divider.large.horizontal .thumb.before {
	transform:translate(-50%, 0.6rem);
	border-radius: 0 0 5px 5px;
}
.va-divider.xlarge.horizontal .thumb.before {
	transform:translate(-50%, 0.8rem);
	border-radius: 0 0 5px 5px;
}
.va-divider.xxlarge.horizontal .thumb.before {
	transform:translate(-50%, 1.0rem);
	border-radius: 0 0 5px 5px;
}
.va-divider.xsmall.horizontal .thumb.after {
	transform:translate(-50%, -0.2rem);
	border-radius: 5px 5px 0 0 ;
}
.va-divider.small.horizontal .thumb.after {
	transform:translate(-50%, -0.3rem);
	border-radius: 5px 5px 0 0 ;
}
.va-divider.medium.horizontal .thumb.after {
	transform:translate(-50%, -0.4rem);
	border-radius: 5px 5px 0 0 ;
}
.va-divider.large.horizontal .thumb.after {
	transform:translate(-50%, -0.6rem);
	border-radius: 5px 5px 0 0 ;
}
.va-divider.xlarge.horizontal .thumb.after {
	transform:translate(-50%, -0.8rem);
	border-radius: 5px 5px 0 0 ;
}
.va-divider.xxlarge.horizontal .thumb.after {
	transform:translate(-50%, -1.0rem);
	border-radius: 5px 5px 0 0 ;
}
*/
.va-divider.vertical .thumb {
	z-index: 1;
	max-height: 10rem;
	height: 90%;
	width: 1.6rem;
	/*border-radius:0.4rem;*/
	/*background-color:var(--colorBackground);
	border:1px solid var(--colorNeutralStroke);*/
	position: absolute;
	top: 50%;
	transform: translate(0, -50%);
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/*
.va-divider.xsmall.vertical .thumb.before {
	transform:translate(0.2rem, -50%);
	border-radius: 0 5px 5px 0;
}
.va-divider.small.vertical .thumb.before {
	transform:translate(0.3rem, -50%);
	border-radius: 0 5px 5px 0;
}
.va-divider.medium.vertical .thumb.before {
	transform:translate(0.4rem, -50%);
	border-radius: 0 5px 5px 0;
	
}
.va-divider.large.vertical .thumb.before {
	transform:translate(0.6rem, -50%);
	border-radius: 0 5px 5px 0;
}
.va-divider.xlarge.vertical .thumb.before {
	transform:translate(0.8rem, -50%);
	border-radius: 0 5px 5px 0;
}
.va-divider.xxlarge.vertical .thumb.before {
	transform:translate(1.0rem, -50%);
	border-radius: 0 5px 5px 0;
}
.va-divider.xsmall.vertical .thumb.after {
	transform:translate(-0.2rem, -50%);
	border-radius: 5px 0 0 5px;
}
.va-divider.small.vertical .thumb.after {
	transform:translate(-0.3rem, -50%);
	border-radius: 5px 0 0 5px;
}
.va-divider.medium.vertical .thumb.after {
	transform:translate(-0.4rem, -50%);
	border-radius: 5px 0 0 5px;
}
.va-divider.large.vertical .thumb.after {
	transform:translate(-0.6rem, -50%);
	border-radius: 5px 0 0 5px;
}
.va-divider.xlarge.vertical .thumb.after {
	transform:translate(-0.8rem, -50%);
	border-radius: 5px 0 0 5px;
}
.va-divider.xxlarge.vertical .thumb.after {
	transform:translate(-1.0rem, -50%);
	border-radius: 5px 0 0 5px;
}
*/

.va-divider.xsmall.horizontal .thumb {
	height: 0.8rem;
	border-radius: 0.2rem;
}

.va-divider.small.horizontal .thumb {
	height: 1.2rem;
	border-radius: 0.3rem;
}

.va-divider.medium.horizontal .thumb {
	height: 1.6rem;
	border-radius: 0.4rem;
}

.va-divider.large.horizontal .thumb {
	height: 2.0rem;
	border-radius: 0.6rem;
}

.va-divider.xlarge.horizontal .thumb {
	height: 2.4rem;
	border-radius: 0.8rem;
}

.va-divider.xxlarge.horizontal .thumb {
	height: 2.8rem;
	border-radius: 0.8rem;
}

.va-divider.xxxlarge.horizontal .thumb {
	height: 3.2rem;
	border-radius: 0.8rem;
}


.va-divider.xsmall.vertical .thumb {
	width: 0.8rem;
	border-radius: 0.2rem;
}

.va-divider.small.vertical .thumb {
	width: 1.2rem;
	border-radius: 0.3rem;
}

.va-divider.medium.vertical .thumb {
	width: 1.6rem;
	border-radius: 0.4rem;
}

.va-divider.large.vertical .thumb {
	width: 2.0rem;
	border-radius: 0.6rem;
}

.va-divider.xlarge.vertical .thumb {
	width: 2.4rem;
	border-radius: 0.8rem;
}

.va-divider.xxlarge.vertical .thumb {
	width: 2.8rem;
	border-radius: 0.8rem;
}

.va-divider.xxxlarge.vertical .thumb {
	width: 3.2rem;
	border-radius: 0.8rem;
}

.resizable-both {
	resize: both;
}

.resizable-horizontal {
	resize: horizontal;
}

.resizable-vertical {
	resize: vertical;
}

.va-divider.horizontal.resizable:hover {
	cursor: row-resize;
}

.va-divider.vertical.resizable:hover {
	cursor: col-resize;
}

.va-divider.horizontal {
	height: 0.1rem;
	flex-direction: row;
	align-items: center;
}

.va-divider.vertical {
	width: 0.1rem;
	flex-direction: column;
}

.va-divider.horizontal .line {
	min-width: 0.8rem;
	border-top-width: var(--sizeBorderM);
	border-top-style: solid;
	border-color: var(--colorDivBorder);
	content: "";
	margin-bottom: 0rem;
	flex-grow: 1;
	flex: 1;
	display: flex;
	box-sizing: border-box;
}

.va-divider.vertical .line {
	margin-bottom: 0rem;
	min-height: 0.8rem;
	border-right-width: var(--sizeBorderM);
	border-right-style: solid;
	border-color: var(--colorDivBorder);
	content: "";
	flex-grow: 1;
	display: flex;
	box-sizing: border-box;
}

.va-divider.primary .line {
	border-color: var(--colorPrimary);
}

.va-divider.strong .line {
	border-color: var(--colorNeutralForeground);
}

.va-divider.horizontal .thumb {
	mask-image: url("../icons/icon_arrowVer.svg");
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
	background-color: var(--colorPrimary);
	cursor: pointer;
}

.va-divider.vertical .thumb {
	mask-image: url("../icons/icon_arrowHor.svg");
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
	background-color: var(--colorPrimary);
	cursor: pointer;
}

/*
.va-divider.horizontal .thumb.before{
	background-image:url("../icons/ico_caret_up_fill.svg");
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center;
}
.va-divider.horizontal .thumb.after{
	background-image:url("../icons/ico_caret_down_fill.svg");
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center;
}
.va-divider.vertical .thumb.before{
	transform:translate(0.4rem, -50%);
	border-radius: 0 5px 5px 0 ;
	background-image:url("../icons/ico_caret_left_fill.svg");
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center;
}
.va-divider.vertical .thumb.after{
	transform:translate(0.4rem, -50%);
	border-radius: 5px 0 0 5px ;
	background-image:url("../icons/ico_caret_right_fill.svg");
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center;
}
*/
.va-drawer {
	position: static;
	opacity: 1;
	right: auto;
	overflow: hidden;
	max-width: 100vw;
	height: auto;
	max-height: 100vh;
	box-sizing: border-box;
	display: block;
	height: inherit;
	background-color: var(--colorBackground);
	color: var(--colorForeground);
	border: var(--sizeBorderM) solid var(--colorNeutralStroke);
	z-index: -1;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .1s, visibility .1s;
}

.va-drawer.on {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	z-index: 11;
}

.va-drawer .drawer-inner {
	position: static;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	background-color: var(--colorBackground);
	color: var(--colorForeground);
	max-width: 100vw;
	height: 100%;
	max-height: 100vh;
	transform: translateX(-100%);
	transition: transform .3s ease-out, opacity .3s ease-out;
}

.va-drawer.on .drawer-inner {
	transform: translateX(0);
}

.va-drawer.overlay {
	box-shadow: var(--shadowM);
	left: 0rem;
	height: 100%;
	position: absolute;
	top: 0rem;
	bottom: 0rem;
	z-index: 2;
	border :none;
}

.va-drawer.inline {
	left: 0rem;
	/*height:100%;*/
	/*flex:1;
	position: "static";*/
}

.va-drawer.right {
	left: auto;
	right: 0rem;
	/*height:100%;	*/
}

.va-drawer.overlay.right {
	box-shadow: var(--shadowM);
	left: auto;
	right: 0rem;
}

.va-drawer.top {
	overflow: hidden;
	width: 100%;
	max-height: 100vw;
	box-sizing: border-box;
}

.va-drawer.bottom {
	border-top-color: var(--colorNeutralBackground3);
	border-top-width: 0.1rem;
	border-top-style: solid;
	overflow: hidden;
	width: 100%;
	max-height: 100vw;
	box-sizing: border-box;
	top: auto;
}

.va-drawer .header {
	padding: var(--sizeSpacingM);
	column-gap: var(--sizeSpacingS);
	row-gap: var(--sizeSpacingS);
	width: 100%;
	max-width: 100%;
	align-self: stretch;
	display: flex;
	flex-direction: row;
	align-items: center;
	box-sizing: border-box;
}

.va-drawer .header span {
	flex: 1;
	margin: 0rem;
	font-weight: var(--fontWeightSemibold);
	font-size: var(--sizeFontM);
	line-height: var(--sizeFontL);
}

.va-drawer .header span.menu {
	flex: none;
}

.va-drawer.small .header span {
	font-size: var(--sizeFontMN);
	line-height: var(--sizeFontM);
}

.va-drawer.large .header span {
	font-size: var(--sizeFontL);
	line-height: var(--sizeFontXL);
}

.va-drawer.primary .header {
	color: var(--colorPrimaryForeground);
	border-color: transparent;
	background-color: var(--colorPrimary);
}

.va-drawer.primary .header:hover {
	background-color: var(--colorPrimaryHover);
}

.va-drawer.subtle .header {
	color: var(--colorForeground2);
	background-color: var(--colorSubtle);
	border-color: transparent;
}

.va-drawer.subtle .header:hover {
	color: var(--colorForeground2);
	background-color: var(--colorSubtleHover);
	border-color: transparent;
}

.va-drawer.outline .header {
	background-color: var(--colorTransparentBackground);
}

.va-drawer.outline .header:hover {
	background-color: var(--colorTransparentBackgroundPressed);
	border-color: var(--colorNeutralForegroundPressed);
	color: var(--colorForegroundPressed);
	outline-style: none;
}

.va-drawer.transparent .header {
	color: var(--colorForeground2);
	background-color: var(--colorTransparentBackground);
	border-color: transparent;
}

.va-drawer.transparent .header:hover {
	color: var(--colorForeground2BrandHover);
}

.va-drawer .content {
	margin: -0.1rem 0rem;
	padding-top: var(--sizeSpacingM);
	padding-right: var(--sizeSpacingM);
	padding-bottom: var(--sizeSpacingM);
	padding-left: var(--sizeSpacingM);
	overflow: auto;
	flex: 1;
	align-self: stretch;
}

.va-drawer .thumb {
	width: 40px;
	height: 80px;
	left: -2px;
	top: 0px;
	background-color: var(--colorNeutral);
	color: var(--colorForeground);
	border: var(--sizeBorderM) solid var(--colorBorder);
}

.va-div {
	display: block;
	padding: 0rem;
}

.va-div .div-inner {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: 'stretch'
}

.va-div #shadow-root .div-inner {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: 'stretch'
}

.va-div.primary {
	color: var(--colorPrimaryForeground);
	border-color: transparent;
	background-color: var(--colorPrimary);
}

.va-div.accent {
	color: var(--colorAccentForeground);
	border-color: transparent;
	background-color: var(--colorAccent);
}

.va-div.inverted {
	color: var(--colorAccentForeground);
	border-color: transparent;
	background-color: var(--colorInverted);
}

.va-div.secondary {
	background-color: var(--colorSecondary);
	border: 1px solid var(--colorPrimary);
	color: var(--colorSecondaryForeground);
}

.va-div.tertiary {
	background-color: var(--colorTertiary);
	border: 1px solid var(--colorTertiaryBorder);
	color: var(--colorTertiaryForeground);
}

.va-div.sticky {
	position: sticky;
}

.va-div.sticky.bottom {
	bottom: 3rem;
}

.va-div.sticky.top {
	top: 3rem;
}

.va-div.sticky.left {
	left: 3rem;
}

.va-div.sticky.right {
	right: 3rem;
}


.va-grid-div {
	background-color: var(--colorBackground);
	padding: 0rem;
	display: grid;
	border-top: 0.5px solid var(--colorNeutralStroke);
	border-left: 0.5px solid var(--colorNeutralStroke);
}

.va-grid-div-header {
	background-color: var(--colorGridHeader);
	border-bottom: 0.1rem solid var(--colorFieldBorder);
	border-right: 0.1rem solid var(--colorFieldBorder);
	color: var(--colorGridHeaderForeground);
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	padding: 0.2rem 0.4rem;
	overflow: hidden;
}

.va-grid-div.primary .va-grid-div-header {
	background-color: var(--colorSecondary);
}

.va-grid-div.outline .va-grid-div-header {
	background-color: transparent;
}

.va-grid-div-body {
	border-bottom: 0.1rem solid var(--colorFieldBorder);
	border-right: 0.1rem solid var(--colorFieldBorder);
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: start;
	padding: 0.4rem 0.4rem;
	overflow: hidden;
}

.va-div.grid-header {
	background-color: var(--colorGridHeader);
	border-bottom: 0.1rem solid var(--colorFieldBorder);
	border-right: 0.1rem solid var(--colorFieldBorder);
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	padding: 0.4rem 0.4rem;
	overflow: hidden;
}

.va-div.grid-body {
	border-bottom: 0.1rem solid var(--colorFieldBorder);
	border-right: 0.1rem solid var(--colorFieldBorder);
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	padding: 0.2rem 0.4rem;
}


.combobox-pop-div {
	padding: 0rem;
	display: grid;
	border-top: 0.5px solid var(--colorNeutralStroke);
	border-left: 0.5px solid var(--colorNeutralStroke);
	align-items: stretch;
}

.va-div.rows {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.va-div.columns {
	display: flex;
	flex-direction: columns;
	align-items: stretch;
}

.va-semantic {
	display: block;
	/*
	flex-direction: column;
	align-items: stretch;
	padding: 0rem;
	box-sizing: border-box;
	*/
}

.va-semantic .inner {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	padding: 0rem;
	box-sizing: border-box;
}

.va-semantic.rows {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.va-semantic.columns {
	display: flex;
	flex-direction: columns;
	align-items: stretch;
}

.va-persona .persona-inner {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.va-persona.left .persona-inner {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.va-persona.right .persona-inner {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.va-persona.top .persona-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.va-persona.bottom .persona-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.va-persona.start .persona-inner {
	align-items: start;
}

.va-persona.middle .persona-inner {
	align-items: center;
}

.va-persona .content {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	flex: 1;
	margin-left: 0.5rem;
}

.va-persona .va-avatar .content {
	margin-left: 0rem;
}

.va-persona .title {
	display: block;
	color: var(--colorForeground);
	font-family: var(--fontFamilyBase);
	font-size: var(--sizeFontMN);
	font-weight: var(--fontWeightRegular);
	line-height: var(--sizeFontL);
}

.va-persona .detail {
	display: block;
	color: var(--colorForeground2);
	font-family: var(--fontFamilyBase);
	font-size: var(--sizeFontS);
	font-weight: var(--fontWeightRegular);
	line-height: var(--sizeFontM);
}

.va-persona.xsmall .title {
	font-size: var(--sizeFontMN);
	font-weight: var(--fontWeightRegular);
	line-height: var(--sizeFontL);
}

.va-persona.xsmall .detail {
	font-size: var(--sizeFontS);
	font-weight: var(--fontWeightRegular);
	line-height: var(--sizeFontM);
}

.va-persona.small .title {
	font-size: var(--sizeFontMN);
	font-weight: var(--fontWeightRegular);
	line-height: var(--sizeFontL);
}

.va-persona.small .detail {
	font-size: var(--sizeFontS);
	font-weight: var(--fontWeightRegular);
	line-height: var(--sizeFontM);
}

.va-persona.medium .title {
	font-size: var(--sizeFontMN);
	font-weight: var(--fontWeightRegular);
	line-height: var(--sizeFontL);
}

.va-persona.medium .detail {
	font-size: var(--sizeFontS);
	font-weight: var(--fontWeightRegular);
	line-height: var(--sizeFontM);
}

.va-persona.large .title {
	font-size: var(--sizeFontMN);
	font-weight: var(--fontWeightRegular);
	line-height: var(--sizeFontL);
}

.va-persona.large .detail {
	font-size: var(--sizeFontS);
	font-weight: var(--fontWeightRegular);
	line-height: var(--sizeFontM);
}

.va-persona.xlarge .title {
	font-size: var(--sizeFontM);
	font-weight: var(--fontWeightSemibold);
	line-height: var(--sizeFontXL);
}

.va-persona.xlarge .detail {
	font-size: var(--sizeFontMN);
	font-weight: var(--fontWeightRegular);
	line-height: var(--sizeFontL);
}

.va-persona.huge .title {
	font-size: var(--sizeFontM);
	font-weight: var(--fontWeightSemibold);
	line-height: var(--sizeFontXL);
}

.va-persona.huge .detail {
	font-size: var(--sizeFontMN);
	font-weight: var(--fontWeightRegular);
	line-height: var(--sizeFontL);
}

.va-image {
	border-bottom-color: var(--colorNeutralForeground);
	border-left-color: var(--colorNeutralForeground);
	border-right-color: var(--colorNeutralForeground);
	border-top-color: var(--colorNeutralForeground);
	display: inline-block;
	box-sizing: border-box;
	border-top-left-radius: var(--sizeFieldBorderRadiusNone);
	border-top-right-radius: var(--sizeFieldBorderRadiusNone);
	border-bottom-left-radius: var(--sizeFieldBorderRadiusNone);
	border-bottom-right-radius: var(--sizeFieldBorderRadiusNone);
	object-fit: contain;
	max-width: 100%;
	max-height: 100%;
}

.va-image.circular {
	border-top-left-radius: var(--sizeFieldBorderRadiusCircular);
	border-top-right-radius: var(--sizeFieldBorderRadiusCircular);
	border-bottom-left-radius: var(--sizeFieldBorderRadiusCircular);
	border-bottom-right-radius: var(--sizeFieldBorderRadiusCircular);
}

.va-image.rounded {
	border-radius: var(--sizeFieldBorderRadiusM);
}

.va-image.bordered {
	border: var(--sizeBorderM) solid var(--colorNeutralStroke);
}

.va-image.shadow {
	box-shadow: var(--shadowM);
}

.va-image-file .edit-div {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 2px;
}

.va-progressbar .progressbar-inner {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	min-height: var(--sizeFieldM);
}

.va-progressbar .rail {
	height: var(--sizeRailXS);
	background-color: var(--colorDarkGray);
	display: block;
	overflow-y: hidden;
	overflow-x: hidden;
	width: 100%;
	border-radius: var(--sizeFieldBorderRadiusM);
}

.va-progressbar .progress {
	background-color: var(--colorActive);
	border-radius: inherit;
	height: 100%;
}

.va-progressbar .info-div {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-top: var(--sizeSpacingXXS);
	color: var(--colorForeground3);
	font-family: var(--fontFamilyBase);
	font-size: var(--sizeFontS);
	font-weight: var(--fontWeightRegular);
	line-height: var(--sizeFontM);
}

.va-progressbar .icon {
	width: var(--sizeIconS);
	height: var(--sizeIconS);
	line-height: 0;
}

.va-progressbar .info {
	flex: 1;
	font-size: inherit;
}

.va-progressbar.xsmall {
	min-height: var(--sizeFieldXS);
}

.va-progressbar.xsmall .rail {
	height: var(--sizeRailXS);
}

.va-progressbar.small {
	min-height: var(--sizeFieldXS);
}

.va-progressbar.small .rail {
	height: var(--sizeRailXS);
}

.va-progressbar.medium {
	min-height: var(--sizeFieldM);
}

.va-progressbar.medium .rail {
	height: var(--sizeRailS);
}

.va-progressbar.large {
	min-height: var(--sizeFieldL);
}

.va-progressbar.large .rail {
	height: var(--sizeRailM);
}

.va-progressbar.xlarge {
	min-height: var(--sizeFieldXL);
}

.va-progressbar.xlarge .rail {
	height: var(--sizeRailL);
}

.va-progressbar.error .icon {
	background-color: var(--colorStatusDanger);
}

.va-progressbar.warning .icon {
	background-color: var(--colorStatusDanger);
}

.va-progressbar.success .icon {
	background-color: var(--colorStatusSuccess);
}

.va-progressbar.error .progress {
	background-color: var(--colorStatusDanger);
}

.va-progressbar.warning .progress {
	background-color: var(--colorStatusDanger);
}

.va-progressbar.success .progress {
	background-color: var(--colorStatusSuccess);
}

.va-progressbar.error .info-div {
	color: var(--colorStatusDanger);
}

.va-progressbar.warning .info-div {
	color: var(--colorStatusDanger);
}

.va-progressbar.success .info-div {
	color: var(--colorStatusSuccess);
}

.va-progressbar .info {
	margin-left: 0.5rem;
}

.va-slider {
	/*width:100%;*/
}

.va-slider .slider {
	grid-column-end: -1;
	grid-column-start: 1;
	height: var(--slider-thumb-size);
	grid-row-end: -1;
	grid-row-start: 1;
	opacity: 0;
	margin: 0rem;
	padding: 0rem;
	cursor: pointer;
	width: 100%;
}

.va-slider .field-div {
	border-style: none;
	display: inline-flex;
	border-width: 0.1rem;
	border-color: var(--colorTransparentForeground);
	gap: var(--sizeSpacingXXS);
	border-radius: var(--sizeFieldBorderRadiusM);
}

.va-slider .field-wrapper[role=slider] {
	width: 100%;
	border: 0rem;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.va-slider .slider-div {
	flex: 1;
	--slider-direction: 90deg;
	--progress-value: 73%;
	--slider-thumb-color: var(--colorActive);
	--progress-color: var(--colorActive);
	--rail-color: var(--colorForeground3);
	min-width: 3.0rem;
	min-height: var(--sizeFieldM);
	--slider-rail-size: var(--sizeRailM);
	--slider-thumb-size: var(--sizeThumbM);
	justify-items: center;
	touch-action: none;
	display: inline-grid;
	position: relative;
	align-items: center;
	grid-template-columns: 0fr calc(100%) 0fr;
	grid-template-rows: 1fr var(--slider-thumb-size) 1fr;
}

.va-slider.xsmall .slider-div {
	--slider-rail-size: var(--sizeRailXS);
	--slider-thumb-size: var(--sizeThumbXS);
	grid-template-columns: 0fr calc(100%) 0fr;
	grid-template-rows: 1fr var(--slider-thumb-size) 1fr;
	min-height: var(--sizeFieldXS);
}

.va-slider.small .slider-div {
	--slider-rail-size: var(--sizeRailS);
	--slider-thumb-size: var(--sizeThumbS);
	grid-template-columns: 0fr calc(100%) 0fr;
	grid-template-rows: 1fr var(--slider-thumb-size) 1fr;
	min-height: var(--sizeFieldS);
}

.va-slider.medium .slider-div {
	--slider-rail-size: var(--sizeRailM);
	--slider-thumb-size: var(--sizeThumbM);
	grid-template-columns: 0fr calc(100%) 0fr;
	grid-template-rows: 1fr var(--slider-thumb-size) 1fr;
	min-height: var(--sizeFieldM);
}

.va-slider.large .slider-div {
	--slider-rail-size: var(--sizeRailL);
	--slider-thumb-size: var(--sizeThumbL);
	grid-template-columns: 0fr calc(100%) 0fr;
	grid-template-rows: 1fr var(--slider-thumb-size) 1fr;
	min-height: var(--sizeFieldL);
}

.va-slider.xlarge .slider-div {
	--slider-rail-size: var(--sizeRailXL);
	--slider-thumb-size: var(--sizeThumbXL);
	grid-template-columns: 0fr calc(100%) 0fr;
	grid-template-rows: 1fr var(--slider-thumb-size) 1fr;
	min-height: var(--sizeFieldXL);
}

.va-slider .slider-rail {
	height: var(--slider-rail-size);
	background-image: linear-gradient(var(--slider-direction), var(--progress-color) 0%, var(--progress-color) var(--progress-value), var(--rail-color) var(--progress-value));
	grid-column-end: 2;
	grid-column-start: 2;
	grid-row-end: 2;
	grid-row-start: 2;
	outline-color: var(--colorTransparentForeground);
	outline-style: solid;
	outline-width: 0.1rem;
	pointer-events: none;
	position: relative;
	border-radius: var(--sizeFieldBorderRadiusXL);
	width: 100%;
	display: block;
}

.va-slider.disabled .slider-rail {
	background-image: linear-gradient(var(--colorStrokeDisabled), var(--colorStrokeDisabled) 0%, var(--colorStrokeDisabled) var(--progress-value), var(--colorStrokeDisabled) var(--progress-value));
}

.va-slider.readonly .slider-rail {
	background-image: linear-gradient(var(--colorStrokeDisabled), var(--colorStrokeDisabled) 0%, var(--colorStrokeDisabled) var(--progress-value), var(--colorStrokeDisabled) var(--progress-value));
}

.va-slider .slider-thumb {
	left: var(--progress-value);
	transform: translateX(-50%);
	background-color: var(--colorBackground);
	border: 1px solid var(--colorPrimary);
	height: var(--slider-thumb-size);
	width: var(--slider-thumb-size);
	pointer-events: none;
	position: absolute;
	border-radius: var(--sizeFieldBorderRadiusCircular);
}

.va-slider.disabled .slider-thumb {
	cursor: not-allowed;
	pointer-events: none;
	background-color: var(--colorStrokeDisabled);
}

.va-slider.readonly .slider-thumb {
	cursor: not-allowed;
	pointer-events: none;
	background-color: var(--colorStrokeDisabled);
}

.va-slider .slider-thumb-text {
	margin-top: -2rem;
	display: flex;
	flex-direction: row;
	justify-content: center;
	width: 20rem;
	margin-left: -0.91rem;
}

.va-slider.xsmall .slider-thumb-text {
	margin-left: -0.95rem;
}

.va-slider.small .slider-thumb-text {
	margin-left: -0.93rem;
}

.va-slider.medium .slider-thumb-text {
	margin-left: -0.91rem;
}

.va-slider.large .slider-thumb-text {
	margin-left: -0.89rem;
}

.va-slider.xlarge .slider-thumb-text {
	margin-left: -0.88rem;
}

.va-slider .min-max-label {
	line-height: var(--sizeFontL);
	font-size: var(--sizeFontMN);
	font-family: var(--fontFamilyBase);
	color: var(--colorForeground);
	cursor: default;
	min-width: 6rem;
	text-align: center;
}

.va-star-slider {
	min-height: 3.2rem;
}

.va-star-slider .field-wrapper {
	width: 100%;
	border: 0rem;
	display: flex;
	flex-direction: row;
	align-items: center;
	height: var(--sizeFieldM);
}

.va-star-slider.xlarge .field-wrapper {
	height: var(--sizeFieldXL);
}

.va-star-slider.large .field-wrapper {
	height: var(--sizeFieldL);
}

.va-star-slider.medium .field-wrapper {
	height: var(--sizeFieldM);
}

.va-star-slider.small .field-wrapper {
	height: var(--sizeFieldS);
}

.va-star-slider.xsmall .field-wrapper {
	height: var(--sizeFieldXS);
}

.va-star-slider .field-wrapper .value-div {
	padding-left: 1rem;
	padding-right: 1rem;
}

.va-star-slider .star-div {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.va-star-slider .icon {
	height: var(--sizeFontL);
	width: var(--sizeFontL);
}

.va-star-slider.xlarge .icon {
	height: var(--sizeIconXL);
	width: var(--sizeIconXL);
}

.va-star-slider.large .icon {
	height: var(--sizeIconL);
	width: var(--sizeIconL);
}

.va-star-slider.medium .icon {
	height: var(--sizeIconM);
	width: var(--sizeIconM);
}

.va-star-slider.small .icon {
	height: var(--sizeIconS);
	width: var(--sizeIconS);
}

.va-star-slider.xsmall .icon {
	height: var(--sizeIconXS);
	width: var(--sizeIconXS);
}

.va-star-slider.disabled .icon {
	background-color: var(--colorDisabled);
}

.va-switch {
	display: block;
	box-sizing: border-box;
	padding: 0;
	width: 52px;
	min-height: var(--sizeFieldM);
	/*height:32px;*/
}

.va-switch .switch-inner {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	position: relative;
	height: var(--sizeFieldM);
	width: 100%;
}

.va-switch.xsmall .switch-inner {
	height: var(--sizeFieldXS);
}

.va-switch.small .switch-inner {
	height: var(--sizeFieldS);
}

.va-switch.medium .switch-inner {
	height: var(--sizeFieldM);
}

.va-switch.large .switch-inner {
	height: var(--sizeFieldL);
}

.va-switch.xlarge .switch-inner {
	height: var(--sizeFieldXL);
}

.va-switch .field-div {
	border-style: none;
	display: inline-flex;
	border-top-color: var(--colorTransparentForeground);
	border-width: 0.1rem;
	border-right-color: var(--colorTransparentForeground);
	border-bottom-color: var(--colorTransparentForeground);
	border-left-color: var(--colorTransparentForeground);
	gap: var(--sizeSpacingXXS);
	border-radius: var(--sizeFieldBorderRadiusM);
}

.va-switch .field-div .field-wrapper {
	border: 0rem;
	padding: 0rem;
}

.va-switch .switch {
	top: 0rem;
	left: 0rem;
	box-sizing: border-box;
	cursor: pointer;
	height: 100%;
	margin: 0rem;
	opacity: 0;
	position: absolute;
	width: 0.4rem;
}

.va-switch .switch-div {
	color: var(--colorForeground3);
	border-radius: var(--sizeFieldBorderRadiusCircular);
	border: 0.1rem solid var(--colorNeutralStroke);
	line-height: 0;
	box-sizing: border-box;
	fill: currentcolor;
	flex-shrink: 0;
	font-size: 1.8rem;
	height: var(--sizeThumbM);
	/*margin: var(--sizeSpacingSN) var(--sizeSpacingSN);*/
	pointer-events: none;
	width: calc(var(--sizeThumbM) * 2);
}

.va-switch.checked .switch-div {
	background-color: var(--colorActive);
	color: var(--colorInvertedForeground);
}

.va-switch.disabled .switch-div {
	background-color: var(--colorStrokeDisabled);
}

.va-switch.checked.disabled .switch-div {
	background-color: var(--colorStrokeDisabled);
}

.va-switch .thumb {
	display: inline-block;
	line-height: 0;
	transition-duration: 200ms;
	transition-property: transform;
	background-color: var(--colorBackground);
	width: calc(var(--sizeThumbM) - 0.2rem);
	height: calc(var(--sizeThumbM) - 0.2rem);
	border-radius: 50%;
	overflow-clip-margin: content-box;
	overflow: hidden;
	background-color: var(--colorForeground3);
	border-color: var(--colorForeground3);
}

.va-switch.checked .thumb {
	transform: translateX(2.0rem);
	line-height: 0;
	background-color: var(--colorPrimary);
	transition-duration: 200ms;
	transition-property: transform;
	background-color: var(--colorInvertedForeground);
	border-color: var(--colorInvertedForeground);
}

.va-switch.xsmall {
	width: 3.4rem;
	min-height: var(--sizeFieldXS);
}

.va-switch.xsmall .switch-div {
	height: var(--sizeThumbXS);
	min-height: var(--sizeFieldXS);
	margin: var(--sizeSpacingXXS) var(--sizeSpacingXXS);
	width: calc(var(--sizeThumbXS) * 2);
}

.va-switch.xsmall .thumb {
	width: calc(var(--sizeThumbXS) - 0.2rem);
	height: calc(var(--sizeThumbXS) - 0.2rem);
}

.va-switch.xsmall.checked .thumb {
	width: calc(var(--sizeThumbXS) - 0.2rem);
	height: calc(var(--sizeThumbXS) - 0.2rem);
	transform: translateX(var(--sizeThumbXS));
}

.va-switch.small {
	width: 4rem;
	/*height:2.8rem;*/
	min-height: var(--sizeFieldS);
}

.va-switch.small .switch-div {
	height: var(--sizeThumbS);
	margin: var(--sizeSpacingXXS) var(--sizeSpacingXXS);
	width: calc(var(--sizeThumbS) * 2);
}

.va-switch.small .thumb {
	width: calc(var(--sizeThumbS) - 0.2rem);
	height: calc(var(--sizeThumbS) - 0.2rem);
}

.va-switch.small.checked .thumb {
	width: calc(var(--sizeThumbS) - 0.2rem);
	height: calc(var(--sizeThumbS) - 0.2rem);
	transform: translateX(var(--sizeThumbS));
}

.va-switch.medium {
	min-height: var(--sizeFieldM);
	width: 5.2rem;
	/*height:3.2rem;*/
	min-height: var(--sizeFieldM);
}

.va-switch.medium .switch-div {
	height: var(--sizeThumbM);
	margin: var(--sizeSpacingXXS) var(--sizeSpacingXXS);
	width: calc(var(--sizeThumbM) * 2);
}

.va-switch.medium .thumb {
	width: calc(var(--sizeThumbM) - 0.2rem);
	height: calc(var(--sizeThumbM) - 0.2rem);
}

.va-switch.medium.checked .thumb {
	width: calc(var(--sizeThumbM) - 0.2rem);
	height: calc(var(--sizeThumbM) - 0.2rem);
	transform: translateX(var(--sizeThumbM));
}

.va-switch.large {
	width: 6rem;
	/*height:4rem;*/
	min-height: var(--sizeFieldL);
}

.va-switch.large .switch-div {
	height: var(--sizeThumbL);
	margin: var(--sizeSpacingXXS) var(--sizeSpacingXXS);
	width: calc(var(--sizeThumbL) * 2);
}

.va-switch.large .thumb {
	width: calc(var(--sizeThumbL) - 0.2rem);
	height: calc(var(--sizeThumbL) - 0.2rem);
}

.va-switch.large.checked .thumb {
	width: calc(var(--sizeThumbL) - 0.2rem);
	height: calc(var(--sizeThumbL) - 0.2rem);
	transform: translateX(var(--sizeThumbL));
}

.va-switch.xlarge {
	width: 6.8rem;
	/*height:4.8rem;*/
	min-height: var(--sizeFieldXL);
}

.va-switch.xlarge .switch-div {
	height: var(--sizeThumbXL);
	margin: var(--sizeSpacingXXS) var(--sizeSpacingXXS);
	width: calc(var(--sizeThumbXL) * 2);
}

.va-switch.xlarge .thumb {
	width: calc(var(--sizeThumbXL) - 0.2rem);
	height: calc(var(--sizeThumbXL) - 0.2rem);
}

.va-switch.xlarge.checked .thumb {
	width: calc(var(--sizeThumbXL) - 0.2rem);
	height: calc(var(--sizeThumbXL) - 0.2rem);
	transform: translateX(var(--sizeThumbXL));
}

.va-switch.readonly .switch {
	pointer-events: none;
}

.va-switch.disabled .switch {
	pointer-events: none;
	background-color: var(--colorStrokeDisabled);
}

.va-switch.focused .switch-div {
	outline: 0.2rem solid var(--colorFocusLine);
}

.va-tab .tab-inner {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	height: 100%;
}

.va-tab.vertical .tab-inner {
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.va-tab.horizontal .tab-inner {
	display: flex;
	flex-direction: row;
	align-items: stretch;
}

.va-tab .tab-header {
	align-items: stretch;
	position: relative;
	flex-wrap: nowrap;
	flex-direction: row;
	flex-shrink: 0;
	display: flex;
	overflow: hidden;
	height: var(--tabHeaderHeight);
}

.va-tab.classic .tab-header {
	height: var(--tabHeaderClassicHeight);
}

.va-tab .tab-header .header-inner {
	flex: 1;
	align-items: center;
	position: relative;
	flex-wrap: nowrap;
	flex-direction: row;
	flex-shrink: 0;
	display: flex;
	overflow: hidden;
}

.va-tab .tab-header .header-inner .header-button {
	flex: none;
	align-items: center;
	position: relative;
	flex-wrap: nowrap;
	flex-direction: row;
	flex-shrink: 0;
	display: flex;
}

.va-tab.classic .tab-header .header-inner {
	align-items: end;
}

.va-tab .tab-header .header-inner .header-button {
	align-items: end;
}

.va-tab .tab-header.vertical {
	align-items: stretch;
	position: relative;
	flex-wrap: nowrap;
	flex-direction: column;
	flex-shrink: 0;
	display: flex;
	overflow: hidden;
}

.va-tab .tab-header.vertical .header-inner {
	flex: 1;
	align-items: stretch;
	position: relative;
	flex-wrap: nowrap;
	flex-direction: column;
	flex-shrink: 0;
	display: flex;
	overflow: hidden;
}

.va-tab .tab-header.vertical .header-inner .header-button {
	flex: none;
	align-items: stretch;
	position: relative;
	flex-wrap: nowrap;
	flex-direction: column;
	flex-shrink: 0;
	display: flex;
}

.va-tab .header-blank {
	flex: 1;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--sizeGapXXS);
}

.va-tab .tab-header .header-inner {

	/*padding-left: var(--sizeSpacingMN);
	padding-right: var(--sizeSpacingMN);*/
}

.va-tab .tab-header .header-arrow-button {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 0 4px;
}

.va-tab .tab-header.vertical .header-arrow-button {
	display: flex;
	flex-direction: column;
	align-items: center;
	/*padding: 4px 0;*/
}

.va-tab .tab-header .header-arrow-button.top {
	padding: 0 0 0.2rem 0;
	height: 100%;
}

.va-tab .tab-header .header-arrow-button.bottom {
	padding: 0.2rem 0 0 0;
	height: 100%;
}

.va-tab .tab-header .header-arrow-button.left {
	padding: 0 0.2rem 0 0;
}

.va-tab .tab-header .header-arrow-button.right {
	padding: 0 0 0 0.2rem;
}

.va-tab-list.horizontal {
	display: flex;
	flex-direction: row;
}

.va-tab-list.vertical {
	display: flex;
	flex-direction: column;
}

.va-tab .tab-content {
	flex: 1;
	overflow: auto;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	padding: var(--sizeSpacingM);
}

.va-tab.border .tab-content {
	flex: 1;
	overflow: auto;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	padding: var(--sizeSpacingM);
	border: 0.1rem solid var(--colorNeutralStroke);
}

.va-tab.classic .tab-content {
	flex: 1;
	overflow: auto;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	padding: var(--sizeSpacingM);
	border: 0.1rem solid var(--colorCardBorder);
	border-top: 0rem solid var(--colorCardBorder);
	background-color: var(--colorCard);
}

/*
	--colorCard: #F6F8FC;
	--colorCardBorder: #D8DEF0;
*/
.va-tab.top.classic .tab-content {
	border-bottom-left-radius: var(--sizeSpacingS);
	border-bottom-right-radius: var(--sizeSpacingS);
	border-top-right-radius: var(--sizeSpacingS);
}

.va-tab.bottom.classic .tab-content {
	border-top-left-radius: var(--sizeSpacingS);
	border-top-right-radius: var(--sizeSpacingS);
}

.va-tab.left.classic .tab-content {
	border-top-right-radius: var(--sizeSpacingS);
	border-bottom-right-radius: var(--sizeSpacingS);
}

.va-tab.right.classic .tab-content {
	border-top-left-radius: var(--sizeSpacingS);
	border-bottom-left-radius: var(--sizeSpacingS);
}


.va-tab.classic .header-blank {
	border: 0.1rem solid transparent;
	border-bottom: 0.1rem solid var(--colorCardBorder);
	margin-right: 2px;
}

.va-tab.classic .header-arrow-button {
	border: 0.1rem solid transparent;
	border-bottom: 0.1rem solid var(--colorNeutralStroke);
}

.va-tab.classic .va-tab-button.transparent {
	border: 0.1rem solid var(--colorNeutralStroke);
}

.va-tab.classic .va-tab-button.transparent.selected {
	border: 0.1rem solid var(--colorNeutralStroke);
	border-bottom: 0rem solid transparent;
	padding-bottom: 1px;
	height: 26px;
	margin-bottom: -1px;
}

.va-tab.classic.left .header-blank {
	border: 0.1rem solid transparent;
	/*border-right: 0.1rem solid var(--colorNeutralStroke);*/
}

.va-tab.classic.left .header-arrow-button {
	border: 0.1rem solid transparent;
	border-right: 0.1rem solid var(--colorNeutralStroke);
}

.va-tab.classic.left .va-tab-button.transparent {
	border: 0.1rem solid var(--colorNeutralStroke);
}

.va-tab.classic.left .va-tab-button.transparent.selected {
	border: 0.1rem solid var(--colorNeutralStroke);
	border-right: 0rem solid transparent;
}

.va-tab.classic.left .tab-content {
	border: 0.1rem solid var(--colorNeutralStroke);
	border-left: 0rem solid var(--colorNeutralStroke);
}

.va-tab.classic.left .va-tab-button .va-button {
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;

}

.va-tab.classic.right .header-blank {
	border: 0.1rem solid transparent;
	/*border-left: 0.1rem solid var(--colorNeutralStroke);*/
}

.va-tab.classic.right .header-arrow-button {
	border: 0.1rem solid transparent;
	border-left: 0.1rem solid var(--colorNeutralStroke);
}

.va-tab.classic.right .va-tab-button.transparent {
	border: 0.1rem solid var(--colorNeutralStroke);
}

.va-tab.classic.right .va-tab-button.transparent.selected {
	border: 0.1rem solid var(--colorNeutralStroke);
	border-left: 0rem solid transparent;
}

.va-tab.classic.right .tab-content {
	border: 0.1rem solid var(--colorNeutralStroke);
	border-right: 0rem solid var(--colorNeutralStroke);
}

.va-tab.classic.right .va-tab-button .va-button {
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;

}

.va-tab.classic.bottom .header-blank {
	border: 0.1rem solid transparent;
	/*border-top: 0.1rem solid var(--colorNeutralStroke);*/
}

.va-tab.classic.bottom .header-arrow-button {
	border: 0.1rem solid transparent;
	border-top: 0.1rem solid var(--colorNeutralStroke);
}

.va-tab.classic.bottom .va-tab-button.transparent {
	border: 0.1rem solid var(--colorNeutralStroke);
}

.va-tab.classic.bottom .va-tab-button.transparent.selected {
	border: 0.1rem solid var(--colorNeutralStroke);
	border-top: 0rem solid transparent;
}

.va-tab.classic.bottom .tab-content {
	border: 0.1rem solid var(--colorNeutralStroke);
	border-bottom: 0rem solid var(--colorNeutralStroke);
}

.va-tab.classic.bottom .va-tab-button .va-button {
	border-top-right-radius: 0px;
	border-top-left-radius: 0px;
}

.va-tab .tab-header .header-arrow-button.top {
	padding: 0 0 0.2rem 0;
}

.va-tab .tab-header .header-arrow-button.bottom {
	padding: 0.2rem 0 0 0;
}

.va-tab .tab-header .header-arrow-button.left {
	padding: 0 0.2rem 0;
}

.va-tab .tab-header .header-arrow-button.right {
	padding: 0 0 0 0.2rem;
}

.va-simple-tagb {
	border: 0.1rem solid var(--colorBorder);
}

.va-simple-tab .simple-tab-inner {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	height: 100%;
}

.va-simple-tab.vertical .simple-tab-inner {
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.va-simple-tab.horizontal .simple-tab-inner {
	display: flex;
	flex-direction: row;
	align-items: stretch;
}

.va-simple-tab .header {
	align-items: stretch;
	position: relative;
	flex-wrap: nowrap;
	flex-direction: row;
	flex-shrink: 0;
	display: flex;
	border: 0px solid var(--colorGray);
	background-color: var(--colorGray);

}

.va-simple-tab .header.stretch {
	align-items: stretch;
	position: relative;
	flex-wrap: nowrap;
	flex-direction: row;
	flex-shrink: 0;
	display: flex;
	border: 0px solid var(--colorGray);
	background-color: var(--colorGray);
}

.va-simple-tab .header.active {
	border: 0px solid var(--colorLabel);
	background-color: var(--colorLabel);
}

.va-simple-tab .header.vertical {
	align-items: stretch;
	position: relative;
	flex-wrap: nowrap;
	flex-direction: column;
	flex-shrink: 0;
	display: flex;
}

.va-simple-tab.border .header-blank {
	flex: 1;
	border-bottom: 1rem solid var(--colorNeutralForeground);
}

.va-simple-tab-list.horizontal {
	display: flex;
	flex-direction: row;
}

.va-simple-tab-list.vertical {
	display: flex;
	flex-direction: column;
}

.va-simple-tab .tab-content {
	flex: 1;
	overflow: auto;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	padding: var(--sizeSpacingM);
	border-top: none;
}

.va-simple-tab.horizontal .tab-content {
	flex: 1;
	overflow: auto;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	padding: var(--sizeSpacingM);
	border-left: none;
}

.va-detail .header {
	display: flex;
	flex-direction: row;
	align-items: center;
	min-height: 3.2rem;
	padding: 0.4rem;
}

.va-detail.focused .header {
	outline: 0.2rem solid var(--colorFocusLine);
}

.va-detail .body {
	padding: 0.4rem;
	min-height: 3.2rem;
}

.va-detail .detail-inner {
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.va-semantic[va-role=va-detail] {
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.va-semantic[va-role=va-detail] .header {
	height: 3.2rem;
	color: #222;
	font-size: 1.5rem;
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 0rem 0rem;
}

.va-semantic[va-role=va-detail].small .header {
	height: 2.4rem;
}

.va-semantic[va-role=va-detail] .header-btn {
	margin-left: 1.0rem;
	font-size: 1.2rem;
}

.va-semantic[va-role=va-detail] .body {
	border: 0.05rem solid var(--colorNeutralStroke);
	padding: 1.0rem;
	flex-direction: column;
	align-items: stretch;
}

.field-datepicker-pop {
	height: 27.5rem;
	width: 20.5rem;
	display: none;
	top: 2.9rem;
	background-color: #eee;
	position: absolute;
	border: 0.05rem solid var(--colorNeutralStroke);
}

.calendar-header {
	display: flex;
	width: 100%;
	margin-bottom: 0.6rem;
	padding: 0.4rem 0.6rem;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 0.2rem;
}

.date-picker-pop-header {
	display: flex;
	width: 100%;
	margin-bottom: 1.0rem;
	border-bottom: 0.05rem solid #888;
	padding: 0.3rem 0;
	text-align: center;
	flex-direction: row;
	align-items: center;
	justify-content: space-around;
	gap: 0.2rem;
}

.date-picker-pop-left-btn {
	width: 2.0rem;
	height: 2.8rem;
	border: 0rem;
}

.date-picker-pop-right-btn {
	width: 2.0rem;
	height: 2.8rem;
	border: 0rem;
}

.date-picker-pop-year {
	width: 6.0rem;
}

.date-picker-pop-year-text {
	width: 2.3rem;
}

.date-picker-pop-calendar-block {
	width: 3rem;
	height: 2.85rem;
	float: left;
	text-align: center;
	font-size: 1.2rem;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

.calendar-date-block {
	text-align: center;
	font-size: 1.2rem;
	display: inline-block;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

.date-picker-pop-bottom {
	float: right;
	width: 100%;
	display: flex;
	align-items: center;
	flex-direction: column;
	padding-bottom: 0.3rem;
}

.date-time-picker-pop-bottom {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: row;
	gap: var(--sizeGapM);
	padding: 0.3rem;
}

.month-picker-pop-bottom {
	float: right;
	width: 100%;
	display: flex;
	align-items: center;
	flex-direction: column;
	padding-top: 1.8rem;
	padding-bottom: 0.3rem;
}

.time-picker-pop-bottom {
	width: 100%;
	display: flex;
	align-items: center;
	flex-direction: row;
	justify-content: space-evenly;
	padding-top: 1rem;
	padding-bottom: 0.3rem;
}

.time-picker-pop-content {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 1rem;
}

.date-picker-date {
	width: 3rem;
	height: 2.85rem;
	float: left;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	border-radius: 0.5rem;
}

.date-picker-date.selected {
	background-color: var(--colorPrimary);
	color: var(--colorPrimaryForeground);
}

.va-calendar [elname=body] {
	background-color: var(--colorWhite);
	border: none;
	border-radius: var(--sizeFieldBorderRadiusM);
	overflow: hidden;
}

.calendar-picker-date {
	width: 100%;
	height: 100%;
	display: inline-block;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	border-radius: 0;
	border: none;
	border-right: 0.05rem solid var(--colorNeutralStroke);
	border-bottom: 0.05rem solid var(--colorNeutralStroke);
	margin: 0;
	overflow: hidden;
	background-color: transparent;
	box-sizing: border-box;
}

.calendar-picker-date:nth-child(n+8):nth-child(-n+14) {
	border-top: 0.05rem solid var(--colorNeutralStroke);
}

.calendar-picker-date:nth-child(7n+1) {
	border-left: 0.05rem solid var(--colorNeutralStroke);
}

.va-calendar [elname=body] .calendar-picker-date.selected {
	background-color: color-mix(in srgb, var(--colorGridSelected) 20%, transparent);
	border: 0.15rem solid var(--colorGridSelected);
}

.calendar-picker-date.other-month {
	background-color: transparent;
}

.va-field[va-role=va-list] ul {
	width: 100%;
}

.va-field[va-role=va-list] .va-list-item {
	max-width: none;
}

.va-field[va-role=va-sroll-list] ul {
	width: 100%;
}

.va-field[va-role=va-scroll-list] .va-list-item {
	max-width: none;
}

.va-responsive-nav {
	display: block;
}

.va-responsive-nav .header {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.va-responsive-nav .nav-div {
	flex: 1;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--sizeSpacingM);
}

.va-responsive-nav .title {
	font-family: var(--fontFamilyBase);
	font-size: var(--sizeFontM);
	font-weight: var(--fontWeightSemibold);
	line-height: var(--sizeFontXL);
	padding: 0rem 1.0rem;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.va-responsive-nav .menu-body {
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.va-semantic[va-role=va-nav-button] {
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.menu-mobile-body {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	padding: 0rem;
}

.va-responsive-nav .menu-body .va-button .text {
	flex: 1;
	text-align: left;
}

.menu-mobile-body .va-menu-item {
	width: 100%;
}

.menu-mobile-body .va-menu-item .content {
	width: 100%;
}

.va-responsive-nav.primary {
	color: var(--colorPrimaryForeground);
	border-color: transparent;
	background-color: var(--colorPrimary);
}

.va-responsive-nav.subtle {
	color: var(--colorForeground2);
	background-color: var(--colorSubtle);
	border-color: transparent;
}

.va-responsive-nav.primary .menu-body {
	color: var(--colorPrimaryForeground);
	border-color: transparent;
	background-color: var(--colorPrimary);
}

.va-responsive-nav.subtle .menu-body {
	color: var(--colorForeground2);
	background-color: var(--colorSubtle);
	border-color: transparent;
}

.va-responsive-nav.primary .va-menu-item {
	color: var(--colorPrimaryForeground);
	border-color: transparent;
	background-color: var(--colorPrimary);
}

.va-responsive-nav.subtle .va-menu-item {
	color: var(--colorForeground2);
	background-color: var(--colorSubtle);
	border-color: transparent;
}

.va-navigation-bar {
	display: block;
	min-height: 2rem;
}

.va-navigation-bar .navigation-inner {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: stretch;

	gap: 0.4rem;
}

.va-navigation-bar .header {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 0.2rem;
	border: 1px solid var(--colorNeutralStroke);
}

.va-navigation-bar .left-blank {
	flex: 1;
}

.va-navigation-bar .right-blank {
	flex: 1;
}

.va-navigation-bar .nav-div {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--sizeSpacingM);
}

.va-navigation-bar .va-menu-expand {
	border: none;
	background-color: transparent;
}

.va-navigation-bar .va-menu-expand .menu-expand-inner {
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: 0.4rem;
	padding: 0.2rem 0 0rem 0;
}

.va-navigation-bar .title-div {
	font-family: var(--fontFamilyBase);
	font-size: var(--sizeFontM);
	font-weight: var(--fontWeightSemibold);
	line-height: var(--sizeFontXL);
	padding: 0rem 0.6rem;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.va-navigation-bar .menu-body {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.4rem;
}

.va-navigation-bar .menu-body .va-button .text {
	flex: 1;
	text-align: left;
}

.menu-mobile-body .va-menu-item {
	width: 100%;
}

.menu-mobile-body .va-menu-item .content {
	width: 100%;
}

.va-navigation-bar.primary {
	color: var(--colorPrimaryForeground);
	border-color: transparent;
	background-color: var(--colorPrimary);
	border: 1px solid var(--colorPrimary);
}

.va-navigation-bar.primary .header {
	border: 1px solid var(--colorPrimary);
}

.va-navigation-bar.subtle {
	color: var(--colorForeground2);
	background-color: var(--colorSubtle);
	border-color: transparent;
}

.va-navigation-bar.primary .menu-body {
	color: var(--colorPrimaryForeground);
	border-color: transparent;
	background-color: var(--colorPrimary);
}

.va-navigation-bar.subtle .menu-body {
	color: var(--colorForeground2);
	background-color: var(--colorSubtle);
	border-color: transparent;
}

.va-navigation-bar.primary .va-menu-item {
	color: var(--colorPrimaryForeground);
	border-color: transparent;
	background-color: var(--colorPrimary);

}

.va-navigation-bar.subtle .va-menu-item {
	color: var(--colorForeground2);
	background-color: var(--colorSubtle);
	border-color: transparent;
}

.menu-body.primary {
	color: var(--colorPrimaryForeground);
	border-color: transparent;
	background-color: var(--colorPrimary);
}

.menu-body.subtle {
	color: var(--colorForeground2);
	background-color: var(--colorSubtle);
	border-color: transparent;
}

.menu-body.secondary {
	color: var(--colorSecondaryForeground);
	background-color: var(--colorSecondary);
	border-color: transparent;
}

.menu-body.accent {
	color: var(--colorAccentForeground);
	background-color: var(--colorAccent);
	border-color: transparent;
}

.va-page-tab {
	display: block;
}

.va-page-tab .inner {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.va-page-tab .content {
	display: relative;
	flex: 1
}

.va-page-tab .control {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.va-page-tab .text-curr-page {
	color: var(--colorPrimary)
}

.va-masking {
	position: absolute;
	background-color: rgba(0, 0, 0, 0.2);
	display: none;
	left: 0rem;
	top: 0rem;
	width: 100%;
	height: 100%;
}

.masking-content {
	position: absolute;
	display: block;
	top: 50%;
	left: 50%;
	margin: -5.0rem 0 0 -5.0rem;
	background-color: var(--colorNeutral);
	padding: 20px;
	border-radius: 5px;
}

.va-spinner {
	display: block;
}

.va-spinner svg,
.va-masking svg {
	width: var(--sizeFieldM);
	height: var(--sizeFieldM);
	background-color: transparent;
	animation-timing-function: linear;
	/*
	animation-iteration-count: infinite;
	*/
	animation-duration: 3s;
	animation-name: va-spinner-svg;
}

.va-spinner .circle-back,
.va-masking .circle-back {
	stroke: var(--colorSecondary);
	r: 1.45rem;
	stroke-width: var(--sizeBorderXL);
	fill: none;
	cy: 50%;
	cx: 50%;
}

.va-spinner .circle-front,
.va-masking .circle-front {
	stroke: var(--colorPrimary);
	transform-origin: 50% 50%;
	transform: rotate(-90deg);
	stroke-linecap: round;

	animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1);
	animation-iteration-count: infinite;

	animation-duration: 1.5s;
	animation-name: va-spinner-circle;
	r: 1.45rem;
	stroke-width: var(--sizeBorderXL);
	fill: none;
	cy: 50%;
	cx: 50%;
}

.va-spinner label,
.va-masking label {
	margin: 1.0rem;
	color: var(--colorStroke);
}

.va-spinner.xsmall svg,
.va-masking.xsmall svg {
	width: var(--sizeFieldXS);
	height: var(--sizeFieldXS);
}

.va-spinner.xsmall .circle-front,
.va-masking.xsmall .circle-front {
	r: calc(var(--sizeFieldXS) * 0.4);
}

.va-spinner.xsmall .circle-back,
.va-masking.xsmall .circle-back {
	r: calc(var(--sizeFieldXS) * 0.4);
}

.va-spinner.xsmall label,
.va-masking.xsmall label {
	font-weight: var(--fontWeightRegular);
	font-size: var(--fontSizeDetailS);
}

.va-spinner.small svg,
.va-masking.small svg {
	width: var(--sizeFieldS);
	height: var(--sizeFieldS);
}

.va-spinner.small .circle-front,
.va-masking.small .circle-front {
	r: calc(var(--sizeFieldS) * 0.45);
}

.va-spinner.small .circle-back,
.va-masking.small .circle-back {
	r: calc(var(--sizeFieldS) * 0.45);
}

.va-spinner.small label,
.va-masking.small label {
	font-weight: var(--fontWeightRegular);
	font-size: var(--fontSizeDetailS);
}

.va-spinner.medium svg,
.va-masking.medium svg {
	width: var(--sizeFieldM);
	height: var(--sizeFieldM);
}

.va-spinner.medium .circle-front,
.va-masking.medium .circle-front {
	r: calc(var(--sizeFieldM) * 0.45);
}

.va-spinner.medium .circle-back,
.va-masking.medium .circle-back {
	r: calc(var(--sizeFieldM) * 0.45);
}

.va-spinner.medium label,
.va-masking.medium label {
	font-weight: var(--fontWeightSemibold);
	font-size: var(--fontSizeDetailM);
}

.va-spinner.large svg,
.va-masking.large svg {
	width: var(--sizeFieldL);
	height: var(--sizeFieldL);
}

.va-spinner.large .circle-front,
.va-masking.large .circle-front {
	r: calc(var(--sizeFieldL) * 0.4);
}

.va-spinner.large .circle-back,
.va-masking.large .circle-back {
	r: calc(var(--sizeFieldL) * 0.4);
}

.va-spinner.large label,
.va-masking.large label {
	font-weight: var(--fontWeightSemibold);
	font-size: var(--fontSizeDetailL);
}

.va-spinner.xlarge svg,
.va-masking.xlarge svg {
	width: var(--sizeFieldXL);
	height: var(--sizeFieldXL);
}

.va-spinner.xlarge .circle-front,
.va-masking.xlarge .circle-front {
	r: calc(var(--sizeFieldXL) * 0.4);
}

.va-spinner.xlarge .circle-back,
.va-masking.xlarge .circle-back {
	r: calc(var(--sizeFieldXL) * 0.4);
}

.va-spinner.xlarge label,
.va-masking.xlarge label {
	font-weight: var(--fontWeightSemibold);
	font-size: var(--fontSizeDetailL);
}

@keyframes va-spinner-svg {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

@keyframes va-spinner-circle {
	0% {
		stroke-dasharray: 1, 150;
		stroke-dashoffset: 0;
	}

	50% {
		stroke-dasharray: 90, 150;
		stroke-dashoffset: -35;
	}

	100% {
		stroke-dasharray: 90, 150;
		stroke-dashoffset: -124;
	}
}

.va-tooltip {
	font-size: var(--sizeFontMN);
	line-height: var(--sizeFontL);
	font-family: var(--fontFamilyBase);
	color: var(--colorForeground);
	border: var(--sizeBorderM) solid var(--colorNeutralStroke);
	padding: var(--sizeSpacingXS) var(--sizeSpacingXS);
	background-color: var(--colorBackground);
	box-shadow: var(--shadowXS);
	position: absolute;
	display: none;
	width: max-content;
	max-width: 400px;
}

.va-tooltip.xsmall {
	font-size: var(--sizeFontSN);
	line-height: var(--sizeFontMN);
}

.va-tooltip.small {
	font-size: var(--sizeFontS);
	line-height: var(--sizeFontM);
}

.va-tooltip.medium {
	font-size: var(--sizeFontMN);
	line-height: var(--sizeFontL);
}

.va-tooltip.large {
	font-size: var(--sizeFontM);
	line-height: var(--sizeFontXL);
}

.va-tooltip.xlarge {
	font-size: var(--sizeFontL);
	line-height: var(--sizeFontXXL);
}

.va-tooltip.circular {
	border-radius: var(--sizeFieldBorderRadiusCircular);
}

.va-tooltip.rounded {
	border-radius: var(--sizeFieldBorderRadiusM);
}

.va-tooltip.primary {
	color: var(--colorPrimaryForeground);
	border-color: transparent;
	background-color: var(--colorPrimary);
}

.va-tooltip.secondary {
	color: var(--colorTooltipSecondaryForeground);
	border-color: transparent;
	background-color: var(--colorTooltipSecondary);
}

.va-tooltip.outline {
	background-color: var(--colorTransparentBackground);
}

.va-tooltip.subtle {
	color: var(--colorForeground2);
	background-color: var(--colorSubtle);
	border-color: transparent;
}

.va-tooltip.transparent {
	color: var(--colorForeground2);
	background-color: var(--colorTransparentBackground);
	border-color: transparent;
}

.va-tooltip.accent {
	color: var(--colorAccentForeground);
	border-color: var(--colorAccent);
	background-color: var(--colorAccent);
}

.va-toast {
	position: absolute;
	padding: 1.2rem;
	border-radius: var(--sizeFieldBorderRadiusM);
	border-width: 0.1rem;
	border-style: solid;
	border-color: var(--colorNeutralStroke);
	box-shadow: var(--shadow8);
	font-size: var(--sizeFontMN);
	line-height: 2.0rem;
	font-weight: var(--fontWeightSemibold);
	color: var(--colorForeground);
	background-color: var(--colorBackground);
	width: max-content;
}

.va-toast.xsmall {
	padding: calc(var(--sizeFontMN) *0.6);
	font-size: var(--sizeFontSN);
	line-height: var(--sizeFontMN);
	font-weight: var(--fontWeightRegular);
}

.va-toast.small {
	padding: calc(var(--sizeFontM) *0.6);
	font-size: var(--sizeFontS);
	line-height: var(--sizeFontM);
	font-weight: var(--fontWeightRegular);
}

.va-toast.medium {
	padding: calc(var(--sizeFontL) *0.6);
	font-size: var(--sizeFontMN);
	line-height: var(--sizeFontL);
	font-weight: var(--fontWeightSemibold);
}

.va-toast.large {
	padding: calc(var(--sizeFontXL) *0.6);
	font-size: var(--sizeFontM);
	line-height: var(--sizeFontXL);
	font-weight: var(--fontWeightSemibold);
}

.va-toast.xlarge {
	padding: calc(var(--sizeFontXXL) *0.6);
	font-size: var(--sizeFontL);
	line-height: var(--sizeFontXXL);
	font-weight: var(--fontWeightSemibold);
}

.va-toast.primary {
	background-color: var(--colorPrimary);
	color: var(--colorPrimaryForeground);
}

.va-toast.secondary {
	background-color: var(--colorSecondary);
	color: var(--colorSecondaryForeground);
}

.va-toast.accent {
	background-color: var(--colorAccent);
	color: var(--colorAccentForeground);
}

.va-toast.inverted {
	color: var(--colorNeutralForegroundStaticInverted);
	background-color: var(--colorNeutralBackgroundStatic);
}

.va-toast.outline {
	background-color: var(--colorTransparentBackground);
	border-color: var(--colorNeutralForegroundPressed);
}

.va-toast.rounded {
	border-radius: 15%;
}

.va-toast.circular {
	border-radius: 50%;
}

.va-toast.square {
	border-radius: 0%;
}

.va-toolbar {
	width: 100% !important;
}

.va-toolbar .toolbar-inner {
	/* padding-left: 0.8rem;
	padding-right: 0.8rem;
	padding-bottom: 0.4rem;
	padding-top: 0.4rem; */
	display: flex;
	flex-direction: row;
	align-items: stretch;
}

.va-toolbar .toolbar-inner-content {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	overflow: hidden;
	flex: 1;
	margin-right: 0.5rem;
	margin-bottom: 0rem;
}

.va-toolbar .content {
	flex: none;
	min-width: 2.0rem;
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: var(--sizeSpacingM);
	/*flex:1  주면 안됨.*/
}

.va-toolbar.vertical .toolbar-inner {
	padding-left: 0.4rem;
	padding-right: 0.4rem;
	padding-bottom: 0.8rem;
	padding-top: 0.8rem;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	height: 100%;
}

.va-toolbar.vertical .toolbar-inner-content {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	overflow: hidden;
	flex: 1;
	margin-right: 0;
	margin-bottom: 0.5rem;
}

.va-toolbar.vertical .content {
	min-height: 2.0rem;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	/*flex:1  주면 안됨.*/
}

.va-toolbar.small .toolbar-inner {
	padding-bottom: 0rem;
	padding-top: 0rem;
	padding-right: 0.4rem;
	padding-left: 0.4rem;
}

.va-toolbar.medium .toolbar-inner {
	padding-left: 0.8rem;
	padding-right: 0.8rem;
	padding-bottom: 0.4rem;
	padding-top: 0.4rem;
}

.va-toolbar.large .toolbar-inner {
	padding-left: 2.0rem;
	padding-right: 2.0rem;
	padding-bottom: 0.4rem;
	padding-top: 0.4rem;
}

.va-toolbar-seperator {
	max-width: 0.1rem;
	min-height: 2.0rem;
	padding-right: 1.2rem;
	padding-left: 1.2rem;
	text-align: center;
	position: relative;
	flex-grow: 1;
	display: flex;
	align-items: center;
	flex-direction: column;
	line-height: var(--sizeFontM);
	font-size: var(--sizeFontS);
	color: var(--colorForeground2);
	padding-bottom: 0rem;
	padding-top: 0rem;
	box-sizing: border-box;
	font-weight: var(--fontWeightRegular);
	font-family: var(--fontFamilyBase);
	box-sizing: border-box;
	margin: 0;
}

.va-toolbar.primary {
	background-color: var(--colorPrimary);
}

.va-toolbar.gray {
	background-color: var(--colorGray);
}

.va-toolbar.secondary {
	color: var(--colorSecondaryForegroundOnBrand);
	background-color: var(--colorBackground);
}

.va-toolbar.outline {
	border: 1px solid var(--colorNeutralForeground);
}

.va-toolbar.bordered {
	border-top: 1px solid var(--colorNeutralStroke);
	border-bottom: 1px solid var(--colorNeutralStroke);
}

/* 26.10.12 khr 추가 - 상단 네비 텍스트 컬러 변경 */
.va-toolbar.horizontal .toolbar-inner-content .content .va-button.transparent.square.medium .button-inner .text {
	color: var(--colorNavigationBarText) !important;
	font-weight: 400 !important;
}

/* 26.10.12 khr 추가 - 상단 네비 검색창 스타일 변경 */
.va-input.transparent.large[ref='searchMenu'] .field-wrapper {
	background-color: var(--colorNavigationBarSearchBackground) !important;
	border: 0.1px solid var(--colorNavigationBarSearchBorder) !important;
	border-radius: 14px;
}

.va-input.transparent.large[ref='searchMenu'] .field-wrapper input {
	color: var(--colorNavigationBarText) !important;
	font-weight: 300 !important;
}

.va-input.transparent.large[ref='searchMenu'] .field-wrapper input::placeholder {
	color: var(--colorNavigationBarSearchPlaceholder) !important;
	font-weight: 400 !important;
}

.va-navbar .navbar-inner {
	padding-left: 0.8rem;
	padding-right: 0.8rem;
	padding-bottom: 0.4rem;
	padding-top: 0.4rem;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.va-navbar .navbar-inner-content {
	display: flex;
	flex-direction: row;
	align-items: center;
	overflow: hidden;
	flex: 1;
	margin-right: 0.5rem;
}

.va-navbar .content {
	flex: none;
	min-width: 2.0rem;
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: var(--sizeSpacingM);
	/*flex:1  주면 안됨.*/
}

.va-navbar.vertical .navbar-inner {
	padding-left: 0.4rem;
	padding-right: 0.4rem;
	padding-bottom: 0.8rem;
	padding-top: 0.8rem;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	height: 100%;
}

.va-navbar.vertical .navbar-inner-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow: hidden;
	flex: 1;
}

.va-navbar.vertical .content {
	min-height: 2.0rem;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	/*flex:1  주면 안됨.*/
}

.va-navbar.small .navbar-inner {
	padding-bottom: 0rem;
	padding-top: 0rem;
	padding-right: 0.4rem;
	padding-left: 0.4rem;
}

.va-navbar.medium .navbar-inner {
	padding-left: 0.8rem;
	padding-right: 0.8rem;
	padding-bottom: 0.4rem;
	padding-top: 0.4rem;
}

.va-navbar.large .navbar-inner {
	padding-left: 2.0rem;
	padding-right: 2.0rem;
	padding-bottom: 0.4rem;
	padding-top: 0.4rem;
}

.va-navbar-seperator {
	max-width: 0.1rem;
	min-height: 2.0rem;
	padding-right: 1.2rem;
	padding-left: 1.2rem;
	text-align: center;
	position: relative;
	flex-grow: 1;
	display: flex;
	align-items: center;
	flex-direction: column;
	line-height: var(--sizeFontM);
	font-size: var(--sizeFontS);
	color: var(--colorForeground2);
	padding-bottom: 0rem;
	padding-top: 0rem;
	font-weight: var(--fontWeightRegular);
	font-family: var(--fontFamilyBase);
	box-sizing: border-box;
	margin: 0;
}

.va-navbar.primary {
	background-color: var(--colorPrimary);
}

.va-navbar.gray {
	background-color: var(--colorGray);
}

.va-navbar.secondary {
	color: var(--colorSecondaryForegroundOnBrand);
	background-color: var(--colorBackground);
}

.va-navbar.outline {
	border: 1px solid var(--colorNeutralForeground);
}

.va-navbar.bordered {
	border-top: 1px solid var(--colorNeutralStroke);
	border-bottom: 1px solid var(--colorNeutralStroke);
}

.va-overflow {
	resize: horizontal;
	overflow: hidden;
}

.va-overflow.vertical {
	resize: vertical;
}

.va-overflow.both {
	resize: both;
}

.va-grid {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: stretch;
	visibility: visible;
	width: 100%;
	overflow: hidden;
	border-bottom: var(--sizeBorderL) solid var(--colorGridHeaderBorder);
}

.va-grid.border {
	border-left: 0.1rem solid var(--colorNeutralStroke);
	border-right: 0.1rem solid var(--colorNeutralStroke);

}

.va-grid .grid {
	position: absolute;
	width: 10.0rem;
	top: 0rem;
	left: 0rem;
	flex: 1;
	visibility: visible;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	overflow: hidden;
}

.va-grid .grid-header-div {
	overflow: hidden;
	height: var(--gridHeaderRowHeight);
	display: flex;
	flex-direction: row;
	align-items: stretch;
	line-height: var(--sizeFontL);
	font-weight: var(--fontWeightRegular);
	font-size: var(--sizeFontMN);
	font-family: var(--fontFamilyBase);
	text-align: center;
	color: var(--colorForeground);
	background-color: var(--colorGridHeader);
	border-top: var(--sizeBorderL) solid var(--colorGridHeaderBorder);
	border-bottom: var(--sizeBorderL) solid var(--colorGridHeaderBorder);
}

.va-grid .grid-summary-div {
	overflow: hidden;
	height: var(--gridRowHeight);
	display: flex;
	flex-direction: row;
	align-items: stretch;
	line-height: var(--sizeFontL);
	font-weight: var(--fontWeightRegular);
	font-size: var(--sizeFontMN);
	font-family: var(--fontFamilyBase);
	text-align: center;
	color: var(--colorForeground);
	border-top: var(--sizeBorderL) solid var(--colorEmphasisStroke);
	border-bottom: var(--sizeBorderL) solid var(--colorEmphasisStroke);
	background-color: var(--colorGridHeader);
}

.va-grid .grid-header-div.primary {
	background-color: var(--colorPrimary);
	color: var(--colorPrimaryForeground);
	border-top: var(--sizeBorderL) solid var(--colorPrimary);
	border-bottom: var(--sizeBorderL) solid var(--colorPrimary);
}

.va-grid .grid-header-div.primary .grid-header-title.edit {
	color: var(--colorGridHeaderEditForegroundPrimary);
}

.va-grid .grid-header-title.required:before {
	content: '*';
	color: var(--colorGridHeaderRequired);
	margin-right: 0.4rem;
	margin-left: 0.2rem;
}

.va-grid .grid-header-div.subtle {
	background-color: var(--colorSubtlePressed);
	color: var(--colorPrimaryForeground);
	border-top: var(--sizeBorderL) solid var(--colorSubtlePressed);
	border-bottom: var(--sizeBorderL) solid var(--colorSubtlePressed);
}

.va-grid .grid-header {
	overflow: hidden;
	height: var(--gridHeaderRowHeight);
}

.va-grid .grid-summary {
	overflow: hidden;
	height: var(--gridHeaderRowHeight);
}

.va-grid .grid-header-row {

	height: var(--gridHeaderRowHeight);
	align-items: stretch;
	display: flex;
	flex-direction: row;
}

.va-grid .grid-header-calc-row {
	height: var(--gridHeaderRowHeight);
	align-items: stretch;
	display: flex;
	flex-direction: row;
}

.va-grid .grid-summary-row {

	height: var(--gridRowHeight);
	align-items: stretch;
	display: flex;
	flex-direction: row;
}

.va-grid .grid-header-col {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	justify-content: stretch;
	min-width: 2.0rem;
	overflow: hidden;
	/* 가로크기와 연계 (Do not delete comment) */
	text-overflow: ellipsis;
	border-bottom-color: var(--colorGridBorder);
	border-bottom-width: var(--sizeBorderM);
	border-bottom-style: solid;
	box-sizing: border-box;
	color: var(--colorForeground);
	position: relative;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.va-grid .grid-summary-col {
	padding-left: var(--sizeSpacingS);
	padding-right: var(--sizeSpacingS);
	display: flex;
	flex-direction: row;
	align-items: stretch;
	justify-content: stretch;
	min-width: 2.0rem;
	overflow: hidden;
	/* 가로크기와 연계 (Do not delete comment) */
	text-overflow: ellipsis;
	border-bottom-color: var(--colorGridBorder);
	border-bottom-width: var(--sizeBorderM);
	border-bottom-style: solid;
	box-sizing: border-box;
	color: var(--colorForeground);
	position: relative;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.va-grid .grid-summary-col .grid-body-col-cell {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: end;
	color: var(--colorWhite);
}

.va-grid .grid-header-div.primary .grid-header-col {
	color: var(--colorPrimaryForeground);
}

.va-grid .grid-header-col:hover {
	background-color: var(--colorGridHeaderHover);
}

.va-grid .grid-header-div.primary .grid-header-col:hover {
	background-color: var(--colorPrimaryHover);
}

.va-grid .grid-header-div.subtle .grid-header-col:hover {
	background-color: var(--colorSubtleSelected);
}

.va-grid.column-seperator .grid-header-col {}

.va-grid .grid-header-col-div {
	float: right;
	width: 0.3rem;
	max-width: 0.3rem;
	min-width: 0.3rem;
	cursor: col-resize;
	border-right: 0.05rem solid var(--colorGridBorder);
}

.va-grid .grid-header-col-div.fixed {
	border-right: 0.05rem solid var(--colorGridHeader);
}

.va-grid .grid-header-col-div:hover {
	cursor: col-resize;
}

.va-grid.header-border-none .grid-header-col-div {
	border-right: none;
}

.va-grid.header-border-none .grid-header-col-div:hover {
	cursor: col-resize;
}

.va-grid .grid-header-title {
	flex: 1;
	text-align: center;
	margin: auto auto;
	display: flex;
	flex-direction: row;
	align-items: stretch;
	justify-content: center;
	margin-right: -1.3rem;
	font-weight: var(--fontWeightSemibold);
	display: inline-block;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	width: 1px;
}

/*
.va-grid .grid-header-title.edit {
	color:var(--colorGridHeaderEditForeground);
	font-weight:bold;
}
*/
.va-grid .grid-header-title {
	font-weight: bold;
	color: var(--colorGridHeaderNoneEditForeground);
}

.va-grid .grid-header-title.edit {
	font-weight: bold;
	color: var(--colorGridHeaderForeground);
}

.va-grid .grid-summary-title {
	flex: 1;
	text-align: center;
	margin: auto auto;
	display: flex;
	flex-direction: row;
	align-items: stretch;
	justify-content: center;
	margin-right: -1.3rem;
}

.va-grid .grid-header-col-menu.active {
	top: 0.1rem;
	width: 1.0rem;
	max-width: 1.0rem;
	flex: 1;
	background-color: var(--colorGridHeaderHover);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 1.0rem 3.4rem;
	background-image: url(../icons/ico_navigation.svg);
	content: '\f0c9';
	cursor: pointer;
}

.va-grid .grid-header-col-menu {
	top: 0.1rem;
	flex: 1;
	max-width: 1.0rem;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 1.0rem 2.4rem;
	background-image: none;
	cursor: pointer;
}

.va-grid .grid-header-col-menu-btn {
	width: 100%;
	height: var(--gridHeaderRowHeight);
	border-bottom-color: var(--colorNeutralStroke);
	border-bottom-style: solid;
	border-bottom-width: var(--sizeBorderM);
	box-sizing: border-box;
	color: var(--colorGridHeaderForeground);
	padding: 0.3rem 0.6rem;
}

.va-grid .grid-body-div {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: stretch;
	line-height: var(--sizeFontMN);
	font-weight: var(--fontWeightRegular);
	font-size: var(--sizeFontMN);
	font-family: var(--fontFamilyBase);
	text-align: left;
	color: var(--colorForeground);
}

.va-grid.small .grid-body-div {
	font-size: var(--sizeFontMN);
}

.va-grid.xsmall .grid-body-div {
	font-size: var(--sizeFontS);
}

.va-grid .grid-body {
	overflow: auto;
	position: relative;
	display: inline-block;
	font-size: var(--sizeFontMN);
	background-color: var(--colorBackground);
}

.va-grid .grid-body .blank {
	margin: auto;
	display: flex;
	flex-direction: row;
	justify-content: center;
}

.va-grid .grid-body-content {
	display: block;
	overflow: visible;
}

.va-grid .grid-body-center {
	display: block;
	overflow: visible;
}

.va-grid .grid-body-page {
	display: block;
	overflow: visible;
}

.va-grid .grid-body-page-top {
	display: block;
	overflow: visible;
}

.va-grid .grid-body-page-center {
	display: block;
	overflow: visible;
}

.va-grid .grid-body-row {
	display: flex;
	flex-direction: row;
	align-items: start;
	color: var(--colorGridCellText);
	/*border: 1px solid var(--colorGridBodyRowStroke);*/
	/*height: 4.5rem;*/
}

.va-grid .grid-body-row.stripe {
	background-color: var(--colorGridBodyRowStripe);
}

.va-grid .grid-body-row .grid-body-col.duplicated {
	background-color: var(--colorGridBodyRow);
}

.va-grid .grid-body-row .grid-body-col.unduplicated {
	border-top: 2px solid var(--colorGridHeader);
	/*background-color:var(--colorGridBodyRow);*/
}

.va-grid.small .grid-body-row {
	height: var(--gridSmallRowHeight);
}

.va-grid.xsmall .grid-body-row {
	height: var(--gridXSmallRowHeight);
}

.va-grid .grid-body-row.focused {
	/* selected */
	background-color: var(--colorGridSelected);
}

.va-grid .grid-body-row .grid-body-col.readonly {
	/* selected */
	background-color: var(--colorGridBodyCellReadonly);
	color: var(--colorGridBodyCellReadonlyForeground);
}



.va-grid .grid-body-row.focused .grid-body-col {
	/* selected */
	background-color: var(--colorGridSelected);
	color: var(--colorPrimaryForeground);
}

.va-grid .grid-body-row.focused .grid-body-col.readonly {
	/* selected */
	background-color: var(--colorGridSelected);
	color: var(--colorPrimaryForeground);
}


.va-grid .grid-body-row.focused .grid-body-col .grid-body-col-cell {
	/* selected */
	color: var(--colorPrimaryForeground);
}

.va-grid .grid-body-row.focused:hover .grid-body-col .grid-body-col-cell {
	/* selected */
	color: var(--colorGridCellText);
}

.va-grid .grid-body-row-summary {
	/*height: 4.5rem;*/
	display: flex;
	flex-direction: row;
	background-color: lightgoldenrodyellow;
}

.va-grid.small .grid-body-row-summary {
	height: var(--gridSmallRowHeight);
}

.va-grid.xsmall .grid-body-row-summary {
	height: var(--gridXSmallRowHeight);
}

.va-grid .grid-body-row:hover .grid-body-col.modified {
	/*background-color: var(--colorBackgroundHover);*/
	background-color: var(--colorGridEdit);
	color: var(--colorGridEditForeground);
}

.va-grid .grid-body-row:hover .grid-body-col.invalidation {
	/*background-color: var(--colorBackgroundHover);*/
	background-color: var(--colorStatusDanger);
	color: var(--colorGridEditForeground);
}

.va-grid .grid-body-row:hover .grid-body-col {
	background-color: var(--colorGridRowHover);
	color: var(--colorForeground);
}

.va-grid .grid-body-row.focused:hover .grid-body-col {
	background-color: var(--colorGridSelectedHover);
	color: var(--colorGridSelectedForeground);
}

.va-grid .grid-body-row.focused:hover .grid-body-col.readonly {
	background-color: var(--colorGridSelectedHover);
	color: var(--colorGridSelectedForeground);
}

.va-grid .grid-body-row.stripe.focused:hover .grid-body-col.readonly {
	background-color: var(--colorGridSelectedHover);
	color: var(--colorGridSelectedForeground);
}

.va-grid .grid-body-row.focused:hover .grid-body-col .grid-body-col-cell {
	color: var(--colorGridSelectedForeground);
}

.va-grid .grid-body-row.stripe.focused:hover .grid-body-col .grid-body-col-cell {
	color: var(--colorGridSelectedForeground);
}


.va-grid .grid-body-row:hover .grid-body-col.invalidation {
	/*background-color: var(--colorBackgroundHover);*/
	background-color: var(--colorStatusDanger);
	color: var(--colorGridEditForeground);
}


.va-grid .grid-body-row:pressed .grid-body-col {
	background-color: var(--colorNeutralBackground2Pressed);
}

.va-grid .grid-body-row:hover .grid-body-col.drag-area {
	border: 0.1rem solid #f3453f;
	background-color: #f3453f;
	color: white;
	opacity: 0.5;
}

.va-grid .grid-body-col {
	padding-left: var(--sizeSpacingS);
	padding-right: var(--sizeSpacingS);
	border-bottom-color: var(--colorGridBorder);
	border-bottom-style: solid;
	border-bottom-width: var(--sizeBorderM);
	box-sizing: border-box;
	/*color: var(--colorForeground);*/
	/*height: 4.5rem;*/
	overflow: hidden;
}

.va-grid.column-seperator .grid-body-col {
	border-right-color: var(--colorGridBorder);
	border-right-width: var(--sizeBorderM);
	border-right-style: solid;
	stroke-dasharray: 35, 10;
	stroke-dashoffset: 5;
}

.va-grid .grid-body-col.column-seperator {
	border-right-color: var(--colorGridBorder);
	border-right-width: var(--sizeBorderM);
	border-right-style: solid;
}

.va-grid .grid-body-col.column-seperator.duplicated {
	background-color: var(--colorGridBodyRow);
}

.va-grid .grid-body-col.fixed {
	border-right-color: var(--colorGridHeaderBorder);
	border-right-width: var(--sizeBorderL);
	border-right-style: solid;
}

.va-grid .grid-header-col.fixed {
	border-right-color: var(--colorGridHeaderBorder);
	border-right-width: var(--sizeBorderL);
	border-right-style: solid;
}

.va-grid.small .grid-body-col {
	height: var(--gridSmallRowHeight);
}

.va-grid.xsmall .grid-body-col {
	height: var(--gridXSmallRowHeight);
}

.va-grid .grid-body-col.drag-area {
	border: 0.1rem solid var(--colorPrimary);
	background-color: var(--colorPrimary);
	color: white;
	opacity: 0.5;
}

.va-grid .grid-body-col-summary {
	/*height:4.5rem;*/
	padding-left: var(--sizeSpacingS);
	padding-right: var(--sizeSpacingS);
	background-color: var(--colorNeutralBackground3);
	border-bottom-color: var(--colorNeutralStroke);
	border-bottom-style: solid;
	border-bottom-width: var(--sizeBorderM);
}

.va-grid.small .grid-body-col-summary {
	height: 3.5rem;
}

.va-grid.xsmall .grid-body-col-summary {
	height: 2.4rem;
}

.va-grid .grid-body-col-cell {
	text-overflow: ellipsis;
	white-space: nowrap;
	padding-right: 0.3rem;
	padding-left: 0.3rem;
	overflow: hidden;
	display: inline-block;
	flex-direction: row;
	align-items: center;
	min-height: 14px;
	/*color: var(--colorGridCellText);*/
}

.va-grid .grid-scroll {
	overflow: auto;
	position: relative;
}

.va-grid .grid-scroll-pop {
	background-color: yellow;
	position: absolute;
}

.va-grid .grid-scroll-inner {
	background-color: white;
}

.va-grid .grid-body-scroll {
	position: absolute;
	top: 0rem;
	width: 1.0rem;
	height: 30.0rem;
	background-color: #bbb;
	float: right;
}

.va-grid .grid-body-scroll-pos {
	width: 1.0rem;
	height: 1.0rem;
	background-color: #eee;
	border: 0rem solid #aaaaaa;
	position: absolute;
}

.va-grid .grid-body-scroll-top {
	width: 1.0rem;
	height: 1.0em;
	position: absolute;
	top: 0rem;
	content: '\25B2';
	background-color: white;
	background-repeat: no-repeat;
	background-size: a;
	background-image: url(../img/grid_scroll_up.png);
	border: 0rem solid #aaaaaa;
	color: black;
}

.va-grid .grid-body-scroll-bottom {
	width: 1.0rem;
	height: 1.0rem;
	position: absolute;
	content: '\25BC';
	background-color: white;
	background-repeat: no-repeat;
	background-size: a;
	background-image: url(../img/grid_scroll_down.png);
	border: 0rem solid #aaaaaa;
	color: black;
}

.va-grid .grid-menu-pop {
	display: block;
	width: 20.0rem;
	background-color: #f3f3f3;
	position: absolute;
	border: 0.05rem solid var(--colorNeutralStroke);
	flex-direction: column;
	align-items: stretch;
	box-shadow: 0.2rem 0.2rem 0.5rem 0.1rem #aaaaaa;
}

.va-grid .grid-menu-pop-button {
	width: 100%;
	height: 3.0rem;
	background-color: #f3f3f3;
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 0 1.0rem;
}

.va-grid .grid-menu-pop-button:hover {
	width: 100%;
	height: 3.0rem;
	background-color: #fefefe;
}

.va-grid .modified {
	/*outline:0.1rem solid var(--colorGridEditStroke);
	outline-offset:-0.2rem;*/
	background-color: var(--colorGridEdit);
	color: var(--colorGridEditForeground);
}

.va-grid .invalidation {
	/*outline:0.1rem solid var(--colorGridEditStroke);
	outline-offset:-0.2rem;*/
	background-color: var(--colorStatusDanger);
	color: var(--colorGridEditForeground);
}

.va-grid.xsmall .grid-header {
	height: var(--gridXSmallHeaderRowHeight);
}

.va-grid.xsmall .grid-summary {
	height: var(--gridXSmallHeaderRowHeight);
}

.va-grid.xsmall .grid-header-row {
	height: var(--gridXSmallHeaderRowHeight);
}

.va-grid.xsmall .grid-header-calc-row {
	height: var(--gridXSmallHeaderRowHeight);
}

.va-grid.xsmall .grid-header-div {
	height: var(--gridXSmallHeaderRowHeight);
}

.va-grid.xsmall .grid-summary-row {
	height: var(--gridXSmallRowHeight);
}

.va-grid.small .grid-header {
	height: var(--gridSmallHeaderRowHeight);
}

.va-grid.small .grid-summary {
	height: var(--gridSmallHeaderRowHeight);
}

.va-grid.small .grid-header-row {
	height: var(--gridSmallHeaderRowHeight);
}

.va-grid.small .grid-header-calc-row {
	height: var(--gridSmallHeaderRowHeight);
}

.va-grid.small .grid-header-div {
	height: var(--gridSmallHeaderRowHeight);
}

.va-grid.small .grid-summary-row {
	height: var(--gridSmallRowHeight);
}

.va-grid.large .grid-header-div {
	height: var(--gridLargeHeaderRowHeight);
}

.va-grid.large .grid-summary-row {
	height: var(--gridLargeHeaderRowHeight);
}

.va-grid.large .grid-header {
	height: var(--gridLargeHeaderRowHeight);
}

.va-grid.large .grid-summary {
	height: var(--gridLargeHeaderRowHeight);
}

.va-grid.large .grid-header-row {
	height: var(--gridLargeHeaderRowHeight);
}

.va-grid.large .grid-header-calc-row {
	height: var(--gridLargeHeaderRowHeight);
}

.va-grid.large .grid-header-div {
	height: var(--gridLargeHeaderRowHeight);
}

.va-grid.large .grid-summary-row {
	height: var(--gridLargeRowHeight);
}

.va-grid.xlarge .grid-header-div {
	height: var(--gridXLargeHeaderRowHeight);
}

.va-grid.xlarge .grid-summary-row {
	height: var(--gridXLargeHeaderRowHeight);
}

.va-grid.xlarge .grid-header {
	height: var(--gridXLargeHeaderRowHeight);
}

.va-grid.xlarge .grid-summary {
	height: var(--gridXLargeHeaderRowHeight);
}

.va-grid.xlarge .grid-header-row {
	height: var(--gridXLargeHeaderRowHeight);
}

.va-grid.xlarge .grid-header-calc-row {
	height: var(--gridXLargeHeaderRowHeight);
}

.va-grid.xlarge .grid-header-div {
	height: var(--gridXLargeHeaderRowHeight);
}

.va-grid.xlarge .grid-summary-row {
	height: var(--gridXLargeRowHeight);
}

.va-pagination .pagination-inner {
	padding: 0.3rem;
	display: flex;
	flex-direction: row;
	align-items: center;
	/*min-width:300px;*/
}

.va-pagination button {
	color: var(--colorForeground);
	float: left;
	margin: 0 0.2rem;
	border: 0.05rem solid var(--colorNeutralStroke);
	text-decoration: none;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.va-pagination .va-button .button-inner {
	/*padding:var(--sizeSpacingSN) var(--sizeSpacingSN);*/
	min-width: 2.2rem;
	padding-left: 0px;
	padding-right: 0px;
}

.va-pagination .va-button {
	background-color: transparent;
	color: var(--colorForeground);
	/*color: var(--colorForeground);*/
}

.va-pagination .va-button.arrow .icon {
	min-width: 20px;
	min-height: 20px;
}

.va-pagination .va-button.disabled .icon {
	background-color: var(--colorGridButtonDisabled);
}

.va-pagination .va-button.actived {
	background-color: var(--colorPrimary);
	color: var(--colorPrimaryForeground);
	/*color: var(--colorForeground);*/
}

.va-pagination .va-button:hover.actived {
	background-color: var(--colorPrimaryHover);
	color: var(--colorPrimaryForeground);
}

.va-pagination .va-button:hover {
	background-color: var(--colorSecondaryHover);
	color: var(--colorForeground);
}

.va-pagination .total-status,
.va-pagination .page-status {
	text-align: left;
	font-size: 12px;
	white-space: nowrap;
}

.va-grid .grid-body-col.focused {
	outline: 0.2rem solid var(--colorPrimary);
	outline-offset: -0.2rem;
}

.va-grid .grid-body-col-summary.focused {
	outline: 0.2rem solid var(--colorPrimary);
	outline-offset: -0.2rem;
}

.va-grid .grid-body-col.fixed.focused {
	outline: 0.2rem solid var(--colorPrimary);
	outline-offset: -0.3rem;
}

.va-table {
	font-size: 1.4rem;
	border-collapse: collapse;
	text-indent: initial;
	border-spacing: 2px;
}

.va-table .va-thead {
	display: table-row-group;
}

.va-table .va-tbody {
	display: table-row-group;
}

.va-table .va-tr {
	border-bottom-color: var(--colorNeutralStroke);
	border-bottom-style: solid;
	border-bottom-width: var(--sizeBorderM);
	box-sizing: border-box;
	color: var(--colorForeground);
}

.va-table .va-tr:hover {
	background-color: var(--colorBackgroundHover);
}

.va-table .va-tr.selected {
	background-color: var(--colorBackgroundSelected);
}

.va-table .va-th {
	height: 3.2rem;
	text-align: left;
	vertical-align: middle;
	padding-left: var(--sizeSpacingS);
	padding-right: var(--sizeSpacingS);
}

.va-table .va-td {
	height: 4.4rem;
	position: relative;
	padding-bottom: 0px;
	padding-top: 0px;
	vertical-align: middle;
	padding-left: var(--sizeSpacingS);
	padding-right: var(--sizeSpacingS);
}

.va-main {
	position: relative;
	/*padding: 2.0rem;*/
	overflow: auto;
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.va-inner-div {
	position: absolute;
	display: flex;
	/*padding: 2.0rem;*/
	align-items: stretch;
	flex-direction: column;
	flex: 1;
	width: 100%;
	min-height: 100%;
}

.rows {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
}

.columns {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;
}

.editor-background {
	background-image:
		linear-gradient(45deg, silver 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, silver 25%),
		linear-gradient(-45deg, silver 25%, transparent 25%),
		linear-gradient(-45deg, transparent 75%, silver 75%);
	background-size: 2.0rem 2.0rem;
	background-position: 0 0, -1.0rem 1.0rem, 0 -1.0rem, 1.0rem 0;
}

.va-card.flip {
	background-color: transparent;
	width: 300px;
	height: 200px;
	perspective: 1000px;
}

.va-card.flip .card-inner {
	position: relative;
	width: 100%;
}

.va-card.flip .flip-card-front,
.flip-card-back {
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.va-card.flip .flip-card-back {
	color: white;
	transform: rotateY(180deg);
}

.va-calendar {
	border: none;
	border-radius: var(--sizeFieldBorderRadiusM);
	padding: 4px;
}

.va-calendar .calendar-inner {
	width: 100%;
	height: 100%;
}

.va-colorpicker .color-div {
	width: 6rem;
	height: var(--sizeIconM);
}

.va-colorpicker.xsmall .color-div {
	width: 6rem;
	height: var(--sizeIconXS);
}

.va-colorpicker.small .color-div {
	width: 6rem;
	height: var(--sizeIconS);
}

.va-colorpicker.large .color-div {
	width: 6rem;
	height: var(--sizeIconL);
}

.va-colorpicker.xlarge .color-div {
	width: 6rem;
	height: var(--sizeIconXL);
}

.va-spark-hor-bar {
	width: 100%;
	height: 30px;
	display: block;
}

.spark-hor-bar-inner {
	display: flex;
	width: 100%;
	height: 100%;
	flex-direction: row;
	align-items: stretch;
	position: relative;
}

.mix-blend-difference {
	mix-blend-mode: difference;
}

.mix-blend-exclusion {
	mix-blend-mode: exclusion;
}

.mix-blend-multiply {
	mix-blend-mode: multiply;
}

.mix-blend-overlay {
	mix-blend-mode: overlay;
}

.mix-blend-screen {
	mix-blend-mode: screen;
}

.mix-blend-hard-light {
	mix-blend-mode: hard-light;
}

.spark-hor-bar-text {
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	mix-blend-mode: difference;
	/*
	background-blend-mode: multiply;
	mix-blend-mode: multiply;
	*/
	/*color:var(--colorPrimary);*/
	/*filter:invert(1);*/
}

.spark-hor-bar-bar {
	flex: 1;
}

.va-spark-line-chart {
	width: 100%;
	height: 40px;
	display: block;
}

.va-spark-line-chart .spark-line-chart-inner {
	display: block;
	width: 100%;
	height: 100%;
	flex-direction: row;
	align-items: stretch;
}

dl {
	margin: 0px;
	display: flex;
	align-items: normal;
	justify-content: flex-start;
	flex-direction: column;
	gap: var(--krds-spacer-4);
	flex: 1;
}

dt {
	display: block;
	unicode-bidi: isolate;
}

dd {
	display: block;
	margin-inline-start: 0px;
	unicode-bidi: isolate;
	padding-left: var(--krds-spacer-7);
}

.va-input-popup .field-wrapper {
	width: 100%;
	border: 0.1rem solid;
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: nowrap;
	position: relative;
	box-sizing: border-box;
	min-height: var(--sizeFieldM);
	font-family: var(--fontFamilyBase);
	font-size: var(--sizeFontMN);
	font-weight: var(--fontWeightRegular);
	line-height: var(--sizeFontL);
	background-color: var(--colorBackground);
	border: 0.1rem solid var(--colorFieldBorder);
	gap: var(--sizeSpacingXXS);
	border-radius: var(--sizeFieldBorderRadiusM);
	padding: 0 var(--sizeSpacingMN);
}

.va-input-popup.text-align-left .field-wrapper input {
	text-align: left;
}

.va-input-popup.text-align-right .field-wrapper input {
	text-align: right;
}

.va-input-popup.text-align-center .field-wrapper input {
	text-align: center;
}

.va-input-popup.selected .field-wrapper {
	outline: 0.2rem solid var(--colorFocusLine);
}

.va-input-popup.readonly.selected .field-wrapper {
	outline: 0rem;
}

.va-input-popup.readonly .field-wrapper {
	border-left-color: var(--colorStrokeDisabled);
	border-right-color: var(--colorStrokeDisabled);
	border-top-color: var(--colorStrokeDisabled);
	border-bottom-color: var(--colorStrokeDisabled);
}

.va-input-popup.disabled .field-wrapper {
	border-left-color: var(--colorStrokeDisabled);
	border-right-color: var(--colorStrokeDisabled);
	border-top-color: var(--colorStrokeDisabled);
	border-bottom-color: var(--colorStrokeDisabled);
	background-color: var(--colorDisabled);
}

.va-input-popup.xsmall .field-wrapper {
	height: var(--sizeFieldXS);
	min-height: var(--sizeFieldXS);
	padding-left: var(--sizeSpacingSN);
	padding-right: var(--sizeSpacingSN);
	font-size: var(--sizeFontS);
	line-height: var(--sizeFontM);
	font-weight: var(--fontWeightRegular);
	font-family: var(--fontFamilyBase);
}

.va-input-popup.small .field-wrapper {
	min-height: var(--sizeFieldS);
	padding-left: var(--sizeSpacingSN);
	padding-right: var(--sizeSpacingSN);
	font-size: var(--sizeFontS);
	line-height: var(--sizeFontM);
	font-weight: var(--fontWeightRegular);
	font-family: var(--fontFamilyBase);
}

.va-input-popup.medium .field-wrapper {
	min-height: var(--sizeFieldM);
	padding: 0 var(--sizeSpacingMN);
	font-family: var(--fontFamilyBase);
	font-size: var(--sizeFontMN);
	font-weight: var(--fontWeightRegular);
	line-height: var(--sizeFontL);
}

.va-input-popup.large .field-wrapper {
	row-gap: var(--sizeSpacingSN);
	min-height: var(--sizeFieldL);
	padding-left: var(--sizeSpacingM);
	padding-right: var(--sizeSpacingM);
	column-gap: var(--sizeSpacingSN);
	font-size: var(--sizeFontM);
	line-height: var(--sizeFontXL);
	font-weight: var(--fontWeightRegular);
	font-family: var(--fontFamilyBase);
}

.va-input-popup.xlarge .field-wrapper {
	row-gap: var(--sizeSpacingSN);
	min-height: var(--sizeFieldXL);
	padding-left: var(--sizeSpacingM);
	padding-right: var(--sizeSpacingM);
	column-gap: var(--sizeSpacingSN);
	font-size: var(--sizeFontM);
	line-height: var(--sizeFontXL);
	font-weight: var(--fontWeightRegular);
	font-family: var(--fontFamilyBase);
}

.va-input-popup.rounded .field-wrapper {
	border-radius: var(--sizeFieldBorderRadiusM);
}

.va-input-popup.circular .field-wrapper {
	border-radius: var(--sizeFieldBorderRadiusCircular);
}

.va-input-popup.square .field-wrapper {
	border-radius: var(--sizeFieldBorderRadiusNone);
}

.va-input-popup.underline .field-wrapper {
	border-top-left-radius: 0rem;
	border-top-right-radius: 0rem;
	border-bottom-left-radius: 0rem;
	border-bottom-right-radius: 0rem;
	background-color: var(--colorTransparentBackground);
	border-left-style: none;
	border-right-style: none;
	border-top-style: none;
}

.field-wrapper .va-menu-button .va-button {
	min-height: 0;
}

.field-wrapper .va-menu-button .va-button.xsmall {
	min-height: 0;
}

.field-wrapper .va-menu-button .va-button.small {
	min-height: 0;
}

.field-wrapper .va-menu-button .va-button.medium {
	min-height: 0;
}

.field-wrapper .va-menu-button .va-button.large {
	min-height: 0;
}

.field-wrapper .va-menu-button .va-button.xlarge {
	min-height: 0;
}

.va-input.xsmall,
.va-select.xsmall,
.va-combobox.xsmall,
.va-datepicker.xsmall {
	height: var(--sizeFieldXS);
}

.va-input.small,
.va-select.small,
.va-combobox.small,
.va-datepicker.small {
	height: var(--sizeFieldS);
}

.va-input.medium,
.va-select.medium,
.va-combobox.medium,
.va-datepicker.medium {
	height: var(--sizeFieldM);
}

.va-input.large,
.va-select.large,
.va-combobox.large,
.va-datepicker.large {
	height: var(--sizeFieldL);
}

.va-input.xlarge,
.va-select.xlarge,
.va-combobox.xlarge,
.va-datepicker.xlarge {
	height: var(--sizeFieldXL);
}

.va-chart {
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 3px;
	align-items: stretch;
}

.va-chart .chart-inner {
	overflow: hidden;
	flex: 1;
}

.va-chart .chart-slider-div {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.va-dashboard {
	display: flex;
}

.va-dashboard .dashboard-content {
	flex: 1;
	display: grid;
}

.va-diagramflow {
	background-image:
		linear-gradient(45deg, silver 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, silver 25%),
		linear-gradient(-45deg, silver 25%, transparent 25%),
		linear-gradient(-45deg, transparent 75%, silver 75%);
	background-size: 2.0rem 2.0rem;
	background-position: 0 0, -1.0rem 1.0rem, 0 -1.0rem, 1.0rem 0;
}

.va-diagramflow .diagramflow-svg {
	background-color: white;
}

.va-menu-item .va-menu-pop {
	color: var(--colorPrimaryForeground);
	border-color: transparent;
	background-color: var(--colorPrimary);
}

.va-diagram-schedule {
	display: block;
	padding: 0rem;
}

.va-diagram-schedule .diagram-schedule-inner {
	display: grid;
	grid-template-columns: 20rem 1fr;
	grid-template-rows: 4rem 1fr;
	height: 100%;
	width: 100%;
}

.va-diagram-schedule .diagram-schedule-inner .diagram-schedule-title-div {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	background-color: yellow;
}

.va-diagram-schedule .diagram-schedule-inner .diagram-schedule-date-div {
	position: relative;
	display: block;
	background-color: lightblue;
	overflow: hidden;
}

.va-diagram-schedule .diagram-schedule-inner .diagram-schedule-job-div {
	position: relative;
	display: block;
	background-color: yellowgreen;
	overflow: hidden;
}

.va-diagram-schedule .diagram-schedule-inner .diagram-schedule-task-div {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: start;
	justify-content: start;
	background-color: lightsalmon;
	overflow: auto;
}

.va-diagram-schedule .diagram-schedule-inner .diagram-schedule-date {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

.field-row-layer {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--sizeSpacingXXXL)
}

.va-button .button-inner .button-content.left {
	justify-content: start;
}

.va-button .button-inner .button-content.center {
	justify-content: center;
}

.va-button .button-inner .button-content.right {
	justify-content: end;
}

.va-responsive-nav .va-button .button-inner .button-content.left {
	justify-content: start;
}

.va-responsive-nav .va-button .button-inner .button-content.center {
	justify-content: center;
}

.va-responsive-nav .va-button .button-inner .button-content.right {
	justify-content: end;
}

.drag-append {
	border: 0.2rem solid var(--colorDragAppendStroke);
}

.drag-insert-before {
	border: 0.2rem solid var(--colorDragInsertBeforeStroke);
}

.drag-insert-after {
	border: 0.2rem solid var(--colorDragInsertAfterStroke);
}

.va-input.error .field-wrapper,
.va-display.error .field-wrapper,
.va-input-popup.error .field-wrapper,
.va-select.error .field-wrapper,
.va-combobox.error .field-wrapper,
.va-combobox-url.error .field-wrapper,
.va-filterbox.error .field-wrapper,
.va-colorpicker.error .field-wrapper,
.va-datepicker.error .field-wrapper,
.va-datetimepicker.error .field-wrapper,
.va-yearpicker.error .field-wrapper,
.va-monthpicker.error .field-wrapper,
.va-timepicker.error .field-wrapper,
.va-textarea.error .field-wrapper,
.va-textarea.error .field-wrapper,
.va-image-file.error .field-wrapper,
.va-file.error .field-wrapper {
	/*background-color:var(--colorFieldError);*/
	border-color: var(--colorAccent);

}

.blank {
	color: var(--colorForeground3);
	font-size: var(--sizeFontM);
}

.va-section {
	display: flex;
	flex-direction: column;
	gap: var(--sizeSpacingL);
}

/*!
 * EMAX ERP — va-emax.css (Frame7 Web)
 * Copyright (c) EMAX IT. All rights reserved.
 *
 * This stylesheet is original work by EMAX IT. A limited set of design
 * tokens (CSS variable naming such as --fontFamilyBase, --colorNeutralBorder,
 * --sizeSpacingM, --fontWeightBold) and the default font-family stack value
 * were adapted from the Microsoft Fluent UI design system.
 *
 * No Fluent UI source code, stylesheet, component, icon, or binary is
 * bundled or redistributed with this file. See ./LICENSE.txt for the full
 * MIT attribution text.
 *
 * Microsoft Fluent UI — MIT License
 * Copyright (c) Microsoft Corporation
 * https://github.com/microsoft/fluentui
 */

.main-article {
	flex: 1;
	background-color: var(--colorBackground);
	color: var(--colorTitle);
	min-width: 1375px;

}

.main-article-layout {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--sizeSpacingM);
	padding: var(--sizeSpacingMN) var(--sizeSpacingXL);
	height: 100%;
}

.title-bar {
	min-width: 20px;
	height: 3.8rem;
	/*min-height:20px;*/
	/*background-color:var(--colorBackward);*/
}

.title-bar.under-bar {
	border-bottom: 1.5px solid var(--colorDivBorder);
}

.search-title-bar.under-bar {
	border-bottom: 1.5px solid var(--colorDivBorder);
}

.sub-title-bar.under-bar {
	border-bottom: 1.5px solid var(--colorDivBorder);

}

.title-bar-layout {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--sizeSpacingMN);
}

.title-div {
	min-width: 20px;
	min-height: 20px;
	/*background-color:var(--colorBackward);*/
}

.title-div-layout {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--sizeSpacingS);
}

.title {
	margin: 0px;
	color: var(--sizeFontXXL);
}

.sub-title-bar {
	min-width: 20px;
	height: 2rem;
	display: flex;
	flex-direction: row;
	align-items: center;
	min-width: fit-content;
}



.sub-title-div-layout {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--sizeSpacingS);
	min-width: fit-content;
}

.sub-title {
	margin: 0px;
	color: var(--colorSubTitle);
	font-size: var(--sizeFontM);
	font-weight: var(--fontWeightSemibold);
	min-width: fit-content;
	white-space: nowrap;
}

.sub-title-search {
	margin: 0px;
	color: var(--colorSearchTitle);
	font-size: var(--sizeFontXL);
	min-width: fit-content;
}


.favorite-icon {
	background-color: var(--colorFavoriate);
}

.favorite-icon.active {
	background-color: var(--colorPrimary);
}

.search-icon {
	background-color: var(--colorTitle);
}


.sub-title-icon {
	background-color: var(--colorTitle);
}


.button-divider {
	max-width: 1px;
	width: 1px;
	height: 55%;
	margin-right: var(--sizeSpacingS);
	margin-left: var(--sizeSpacingS);
}


.card-section-layer {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--sizeSpacingS);
	padding: var(--sizeSpacingLN) var(--sizeSpacingXXL) var(--sizeSpacingXL) var(--sizeSpacingXXL);
	background-color: var(--colorCard);
}

.card-section {
	background-color: var(--colorCard);
	min-width: 100px;
	border: 1px solid var(--colorCardBorder);
	border-radius: var(--sizeBorderRadiusXL);
}

.section-layer {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--sizeSpacingXXXL);
}

.field-row-layer {
	display: flex;
	flex-direction: row;
	align-items: end;
	gap: var(--sizeSpacingXXXL);
	justify-content: start;
}

.action-row-layer {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--sizeSpacingM);
	justify-content: stretch;
}

.search-section {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0px;
}

.search-section .search-inner {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	padding: 0px;
	gap: 0px;
	border: 1px solid var(--colorCardBorder);
	border-radius: var(--sizeBorderRadiusXL);
	background-color: var(--colorCard);
}


.search-title-bar {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	background-color: transparent;
	/*var(--colorCardBorder);*/
	border-top-left-radius: var(--sizeBorderRadiusXL);
	border-bottom-left-radius: var(--sizeBorderRadiusXL);
	width: 110px;
	min-width: 110px;
}

.search-collapse-button-div {
	margin-left: auto;
	margin-right: auto;
	width: 100;
	position: relative;
	cursor: pointer;
}

.search-collapse-button {
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	background-color: var(--colorCard);
	border-bottom: 1px solid var(--colorCardBorder);
	border-right: 1px solid var(--colorCardBorder);
	border-left: 1px solid var(--colorCardBorder);
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
	width: 100px;
	height: 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin-top: -1px;
}

.search-collapse-button:hover {
	background-color: var(--colorCardBorder);
}

.search-collapse-button.collapsed {
	height: 14px;
	margin-top: -30px;
	border-top: 1px solid var(--colorCardBorder);
	border-bottom: 1px solid var(--colorCardBorder);
	border-right: 1px solid var(--colorCardBorder);
	border-left: 1px solid var(--colorCardBorder);
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
}

.search-collapse-button-icon {
	width: 10px;
	height: 10px;
	background-color: var(--colorPrimary);
}

.search-title {
	font-size: var(--sizeFontLN);
}

.search-content {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--sizeSpacingM);
	padding: var(--sizeSpacingLN) var(--sizeSpacingXXL) var(--sizeSpacingXL) var(--sizeSpacingXXL);
	flex: 1;
	background-color: var(--colorCard);
	border-radius: var(--sizeFieldBorderRadiusXL);
}

.field-flex {
	display: flex;
	gap: var(--sizeFieldRowGap);
	row-gap: var(--sizeFieldRowGap);
	/*background-color: var(--colorCard);	*/
	align-items: end;
}

.field-grid {
	display: grid;
	column-gap: var(--sizeFieldColumnGap);
	row-gap: var(--sizeFieldRowGap);
	/*padding: var(--sizeSpacingLN) var(--sizeSpacingXXL) var(--sizeSpacingXL) var(--sizeSpacingXXL);*/
	/*background-color: var(--colorCard);	*/
	align-items: end;
	padding-top: var(--sizeSpacingVerticalFieldL);
	padding-bottom: var(--sizeSpacingVerticalFieldL);
}

.va-divider.field-border {
	height: 1.5px;
}

.va-divider.field-border .line {
	border-top-width: 1.5px;
}

/* 법령정보 css */
.va-law-header {
	padding: 2.5rem 0;
	border-bottom: solid 1px var(--colorBorder);
}

.va-law-header .va-title small {
	font-size: 65%;
	font-weight: var(--fontWeightRegular);
}

.va-law-header .sub-title {
	font-size: var(--sizeFontM);
}

.va-chap-title {
	color: var(--colorPrimary);
	font-size: var(--sizeFontL);
	font-weight: var(--fontWeightSemibold);
}

.va-chap-wrap {
	display: flex;
	flex-direction: column;
	margin-bottom: var(--sizeSpacingXXL);
}

.va-chap {
	margin-bottom: .5rem;
}

.va-art-wrap {
	padding: .5rem 1rem;
	margin-bottom: 1rem;
}

.va-art-wrap,
.va-art-wrap * {
	font-size: var(--sizeFontM);
	line-height: 1.555;
}

.va-art-wrap *:not(.va-art, .va-art *) {
	margin: .5rem 0;
}

.va-art {
	display: flex;
	align-items: start;
	gap: .8rem;
}

.va-art .va-law-title {
	color: var(--colorSubTitle);
	font-weight: var(--fontWeightBold);
	font-size: 105%;
}

.va-art-chk {
	display: inline-flex;
	cursor: pointer;
	position: relative;
	top: 1px;
}

.va-art-chk .va-checkbox .field-wrapper {
	margin: 0;
}

.va-art-wrap .va-subp,
.va-art-wrap .va-para {
	padding-left: 4rem;
}

.va-art-wrap .va-subp {
	text-indent: -1.5rem;
}

.va-art-wrap .va-para {
	text-indent: -2rem;
}

.va-art-wrap .va-hist {
	padding-left: 2rem;
	color: var(--colorActive);
}

.va-art-wrap .va-item {
	padding-left: 6rem;
	text-indent: -2rem;
}

.va-art-wrap .va-subitem {
	padding-left: 7rem;
	text-indent: -1.6rem;
}

.va-art-box {
	background-color: var(--colorCardBorder);
	border: 1rem solid #fff;
	margin-top: -1rem;
}

.va-art-wrap.checked {
	background: var(--colorButtonSelected);
	font-weight: var(--fontWeightSemibold);
}

.va-art-wrap.checked+.va-art-box {
	border: 1rem solid var(--colorButtonSelected);
}

.va-law-mark {
	background-color: #f7ea7a;
	padding: 0 1px;
	border-radius: 2px;
}

.va-law-mark-active {
	background: orange;
	outline: 1px solid red;
}

/* 법령정보 css - end */

.va-tab.main .va-tab-button.selected .va-button.transparent {
	color: var(--colorTabButtonMainPrimarySelected);
	background-color: var(--colorTabButtonMainSelected);
}

.va-tab.main .va-tab-button.selected .va-button.transparent .icon.close {
	background-color: var(--colorTabButtonMainPrimarySelected);
}

.va-tab.main .va-tab-button .va-button.transparent {
	/* 26.10.14 khr - 폰트 컬러 수정 */
	/* color: var(--colorTabButtonMainPrimaryUnSelected); */
	color: var(--colorTabButton);
	background-color: var(--colorTabButtonMainUnselected);
}

.va-tab.main .va-tab-button .va-button.transparent .icon.close {
	background-color: var(--colorTabButton);
}

.va-tab.main .header {
	background-color: var(--colorMainTabHeader);
}

/*
.va-button .icon.close {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    font-size: var(--sizeFontMN);
    height: var(--sizeIconXS);
    width: var(--sizeIconXS);
    min-width: var(--sizeFontL);
    color: var(--colorForeground);
    background-color: var(--colorForeground);
}
*/

div[ref='navigationBar'] .va-button .icon.left ,
div[ref='navigationBar'] .va-button .icon.right{
	margin: 0;
	background-color: var(--colorAccentForeground);
} 

div[ref='navigationBar'] .va-button:hover .icon.left ,
div[ref='navigationBar'] .va-button:hover .icon.right{
	background-color: var(--colorSubtleForeground);
} 

div[ref='menuGrid']::after{
    position: absolute;
    left: 0;
    bottom: 4px;
    width: 80%;
    display: block;
    content: '';
    height: 24px;
    background: linear-gradient(0deg, var(--colorTopbackground) 0%, rgba(0, 44, 87, 1) 20%, transparent 95%);
    z-index: 1;
}

div[ref='menuGrid']>div.va-div {
	height: fit-content;
}

div[ref='menuGrid']::-webkit-scrollbar-thumb{
	background-color: rgb(255 255 255 / 30%);
}

div[ref='menuGrid']>div.va-div:nth-child(n + 7) {
	border-top: 1px solid var(--colorNavigationBarSearchBorder);
	padding-top: 20px;
}

#selectBtn {
	color: white !important;
	font-weight: 500 !important;
}

.menuBorderBottom::after {
	content: '';
	position: absolute;
	bottom: -18px;
	left: 0;
	right: 0;
	height: 2px;
	width: 100%;
	background-color: #FABE04;
}

/* menuBorderBottom 클래스를 자식으로 가지고 있는 부모 클래스의 스타일 변경 */
.toolbar-inner-content:has(.menuBorderBottom) {
	overflow: visible;
}

.menuHover1:hover,
.menuHover2:hover,
.menuHover3:hover {
	background-color: var(--colorNavigationBarSearchBackground) !important;
	color: white !important;
	border-radius: 4px;
	cursor: pointer;
}

.menuHover1:hover .icon {
	background-color: white !important;
}

div[ref='menuGrid']>div.va-div {
	gap: 0px !important;
}

/*26.10.08 khr 추가*/
div[ref='topIconMenus'] .va-button .text {
	font-weight: 300;
}

/* 26.10.14 khr - 메뉴 오픈 애니메이션 */
.va-top-menu-expand {
	transform-origin: top center;
	animation: va-top-menu-expand 110ms ease-in-out both;
}

@keyframes va-top-menu-expand {
	from {
		transform: scaleY(0);
		opacity: 0;
	}

	to {
		transform: scaleY(1);
		opacity: 1;
	}
}

/* 26.10.14 khr - 메뉴 닫기 애니메이션 */
.va-top-menu-close {
	transform-origin: top center;
	animation: va-top-menu-close 110ms ease-in-out both;
}

@keyframes va-top-menu-close {
	from {
		transform: scaleY(1);
		opacity: 1;
	}

	to {
		transform: scaleY(0);
		opacity: 0;
	}
}

/* 26.10.14 khr - 배경 축소/원복 애니메이션 */
.va-top-menu-cover-shrink {
	transform-origin: center center;
	animation: va-top-menu-cover-shrink 110ms ease-in-out both;
}

@keyframes va-top-menu-cover-shrink {
	from {
		transform: scale(1);
	}

	to {
		transform: scale(0.98);
	}
}

.va-top-menu-cover-recover {
	transform-origin: center center;
	animation: va-top-menu-cover-recover 110ms ease-in-out both;
}

@keyframes va-top-menu-cover-recover {
	from {
		transform: scale(0.98);
	}

	to {
		transform: scale(1);
	}
}

/* 26.10.14 khr - 탭 버튼 디자인 수정 */
.va-tab .tab-header .header-inner .header-button .va-tab-button .button-inner {
	padding: 4px 8px !important;
	text-align: left;
}

.va-tab .tab-header .header-inner .header-button .va-button.large {
	min-height: fit-content !important;
}

.va-tab .tab-header .header-inner .header-button .va-tab-button.false .va-button.large .button-inner {
	font-weight: 400 !important;
}

div[ref='menuGrid'] .menuHover1 .button-inner {
	padding: 0 !important;
}

/* 26.10.19 khr - end/startIcon 디자인 수정 */
button[ref='endIcon']:hover,
button[ref='startIcon']:hover {
	background-color: rgba(0, 0, 0, 0.3) !important;
}