/* 
	Frame7 Web va.css
*/

@font-face {
  font-family: "Pretendard-Regular";
  src: url("/font/NotoSansKR-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

::-webkit-scrollbar {
    width: var(--sizeScrollBarWidth);
    height: var(--sizeScrollBarHeight);
	background: var(--colorScrollBar);
	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); 
}
::-webkit-scrollbar-button {
	display:flex;
	background: var(--colorScrollBarButton);
}
::-webkit-scrollbar-button:vertical:single-button:start {    
    /*border-radius: 6px 6px 0 0;*/
	background-image:var(--scrollbarArrowUp);
	background-size:contain;
	background-repeat:no-repeat;
}
::-webkit-scrollbar-button:vertical:single-button:end {    
	/*border-radius: 0 0 6px 6px;*/
	background-image:var(--scrollbarArrowDown);
	background-size:contain;
	background-repeat:no-repeat;
	color:#444;
}
::-webkit-scrollbar-button:horizontal:single-button:start {    
    /*border-radius: 6px 0 0 6px;*/
	background-image:var(--scrollbarArrowLeft);
	background-size:contain;
	background-repeat:no-repeat;
}
::-webkit-scrollbar-button:horizontal:single-button:end {    
	/*border-radius: 0 6px 5px 0;*/
	background-image:var(--scrollbarArrowRight);
	background-size:contain;
	background-repeat:no-repeat;
	color:#444;
}


/*
::-webkit-scrollbar : 스크롤바 전체
::-webkit-scrollbar-thumb : 드래그 가능한 스크롤 핸들 막대
::-webkit-scrollbar-track : 스크롤바 트랙 (스크롤이 움직이는 영역 / 스크롤 진행률 표시줄)
::-webkit-scrollbar-button : 스크롤바의 방향 버튼 (= 위/아래 표시 화살표)
::-webkit-scrollbar-track-piece : 스크롤 진행률 표시줄에서 스크롤 핸들 막대 부분을 제외한 남은 빈 공간
::-webkit-scrollbar-corner : 수평/수직 스크롤 막대가 만나는 스크롤 막대의 하단 모서리
::-webkit-resizer : 요소의 하단 모서리에 나타나는 크기 조정 핸들
출처: https://inpa.tistory.com/entry/CSS-🌟-스크롤-바Scrollbar-꾸미기-속성-총정리 [Inpa Dev 👨‍💻:티스토리]
*/
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-Regular", "Noto Sans KR", 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-Regular", "Noto Sans KR", 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);*/
}
.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: 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) ;
}
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;
	/*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(--colorForeground);
    border: var(--sizeBorderM) solid var(--colorNeutralStroke);
    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);
}

.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: hidden;
	
}
.va-button .button-inner .button-content.vertical{
	display: flex;
	align-items: stretch;
	flex-direction: column;
	flex: 1;
}
.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.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.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-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-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(--sizeSpacingSN);
	padding-top: var(--sizeSpacingSN);     
	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(--sizeSpacingS);
	padding-top: var(--sizeSpacingS);   
	padding-left: var(--sizeSpacingL);
	padding-right: var(--sizeSpacingL);
	min-width: 0.2rem;
	font-size: var(--sizeFontMN);
	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.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(--sizeFontLN);
	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(--colorBackgroundHover);
}
.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);
}
.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(--colorTransparentForeground);
	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:active{
	background-color: var(--colorTransparentPressed);
    color: var(--colorTransparentForegroundPressed);
    outline-style: none;	
}
.va-button.transparent .icon{
	background-color:var(--colorTransparentForeground);
}
.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.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);
}
.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;
}
.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(--colorForeground);
}
.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);
}
.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);
}

.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.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: 1px 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-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.5;
	inset: 0rem;
	background-color: transparent;
	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);
	/*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-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:transparent;
    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;
}
.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;
}

.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.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;
}
.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;
	padding-bottom: 0.5rem;
	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;
}
.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.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(--sizeSpacingL);;
	padding-bottom:  var(--sizeSpacingL);;
	padding-left: var(--sizeSpacingMN);
	padding-right: var(--sizeSpacingMN);
}
.va-tab-button.medium {
    font-size: var(--sizeFontMN);
	padding-top: var(--sizeSpacingM);	
	padding-bottom: var(--sizeSpacingM);
	padding-left: var(--sizeSpacingMN);
	padding-right: var(--sizeSpacingMN);
}
.va-tab-button.small {
    font-size: var(--sizeFontMN);
	padding-top: var(--sizeSpacingSN);
	padding-bottom: var(--sizeSpacingSN);
	padding-left: var(--sizeSpacingSN);
	padding-right: var(--sizeSpacingSN);
}
.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.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(--shadow16);
	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: 2.4rem;
    font-size: var(--sizeFontS);
}
.va-breadcrumb.medium .ul .item a{
    height: 3.2rem;
    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: 4.0rem;
    text-wrap: nowrap;
    min-width: unset;
    font-size: var(--sizeFontM);
}
.va-breadcrumb.small .ul .item-div {
    float: left;
	display:inline;
	min-width: 1.2rem;
	width: 1.2rem;
	height: 1.2rem;
    background-color: var(--colorForeground2);
}
.va-breadcrumb.medium .ul .item-div {
    float: left;
	display:inline;
	min-width: 1.6rem;
	width: 1.6rem;
	height: 1.6rem;
    background-color: var(--colorForeground2);
}
.va-breadcrumb.large .ul .item-div {
    float: left;
	display:inline;
	min-width: 2.0rem;
	width: 2.0rem;
	height: 2.0rem;
    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-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;*/
    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.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:after{
	content: '*';
	color:red;
	margin-right: 0.2rem;
	margin-left: 0.2rem;
}
.va-field .label.bottom.required:after{
	content: '*';
	color:red;
	margin-right: 0.2rem;
	margin-left: 0.2rem;
}
.va-field .label.left.required:before{
	content: '*';
	color:red;
	margin-right: 0.2rem;
	margin-left: 0.2rem;
}
.va-field .label.right.required:after{
	content: '*';
	color:red;
	margin-right: 0.2rem;
	margin-left: 0.2rem;
}
.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-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(--colorNeutralStroke);
    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-timepicker .field-wrapper,
.va-textarea .field-wrapper,
.va-image-file .field-wrapper,
.va-file .field-wrapper{
	width: 100%;
	border: 0.1rem solid var(--colorNeutralStroke);
    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);
}
.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(--colorPrimary);	
}
.va-checkbox.mixed .field-wrapper .icon, 
.va-radio.mixed .field-wrapper .icon{
    background-color: var(--colorPrimary);	
}
.va-checkbox .field-wrapper .icon, .va-radio .field-wrapper .icon {
	color: var(--colorStroke);
	background-color: var(--colorNeutralStroke);
    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(--colorPrimary);
    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(--colorPrimary);
    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-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-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-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-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-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-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;
}
.va-image-file .field-wrapper {
	flex-direction:row;
}
.va-image-file .display {
	flex:1;
	overflow:'hidden'
}

.va-file .field-wrapper {
	flex-direction:row;
}
.va-file .display {
	flex:1;
	overflow:'hidden'
}
.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-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-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-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;
	cursor:not-allowed;
	pointer-events:none;
}
.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-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;
	cursor:not-allowed;
	pointer-events:none;

}
.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-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); 
	cursor:not-allowed;
	pointer-events:none;
}
.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-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);
}
.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-combobox.xsmall .field-wrapper,
.va-combobox-url.xsmall .field-wrapper,
.va-filterbox.xsmall .field-wrapper,
.va-datepicker.xsmall .field-wrapper,
.va-monthpicker.xsmall .field-wrapper,
.va-timepicker.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-datepicker.small .field-wrapper,
.va-monthpicker.small .field-wrapper,
.va-timepicker.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-datepicker.medium .field-wrapper,
.va-monthpicker.medium .field-wrapper,
.va-timepicker.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-datepicker.large .field-wrapper,
.va-monthpicker.large .field-wrapper,
.va-timepicker.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-datepicker.xlarge .field-wrapper,
.va-monthpicker.xlarge .field-wrapper,
.va-timepicker.xlarge .field-wrapper,
.va-image-file.xlarge .field-wrapper,
.va-file.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-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-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-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-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-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-timepicker {
	position:relative;
}
.field-wrapper input[type=text],.field-wrapper input[type=search],input[type=number],input[type=url],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 {
    line-height: var(--sizeFontXL);
    font-weight: var(--fontWeightRegular);
    font-size: var(--sizeFontMN);
    font-family: var(--fontFamilyBase);
    text-align: left;	
    position: relative;
    display: inline-flex;
	align-items:center;
    cursor: pointer; 
	border-style:solid;
    border-color: var(--colorNeutralStroke);
	border-width:0.05rem;	
    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:after{
	content: '*';
	color:red;
	margin-right: 0.2rem;
	margin-left: 0.2rem;
}
.va-label.bottom.required .text:after{
	content: '*';
	color:red;
	margin-right: 0.2rem;
	margin-left: 0.2rem;
}
.va-label.left.required .text:before{
	content: '*';
	color:red;
	margin-right: 0.2rem;
	margin-left: 0.2rem;
}
.va-label.right.required .text:after{
	content: '*';
	color:red;
	margin-right: 0.2rem;
	margin-left: 0.2rem;
}
.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(--sizeFontMN);
    font-family: var(--fontFamilyBase);
	color: var(--colorForeground);	
}
.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(--sizeFontMN);
    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(--sizeFontL);
	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.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(--sizeFontMN);
	height: var(--sizeFontMN);
	margin-right: 0.3rem;
}
.va-validation.medium .icon{
	width: var(--sizeFontM);
	height: var(--sizeFontM);
	margin-right: 0.5rem;
}
.va-validation.large .icon{
	width: var(--sizeFontL);
	height: var(--sizeFontL);
	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:auto;
	border: 1px solid var(--colorNeutralStroke);
}
.va-list ul{
	height:100%;
	width:100%;
	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;
}
.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-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);
}
.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.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);	
	background-color:var(--colorBackground);
}
.va-tree ul{
	flex:1;
	overflow: auto;
	margin: 0rem;
	padding-left: 2.0rem;	
}
.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);
}
.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);
}
.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.6rem;
    height: 1.6rem;
	margin-right: 0.4rem;
}
.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:absolute;
	left:0rem;
	top:0rem;
	right:0rem;
	bottom:0rem;
	box-sizing: border-box;
	margin: 0;
}
.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);
	right: inherit;
	border-style: solid;
	overflow: unset;
	border: 0.1rem solid 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);
}
.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(--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-dialog .dialog-header span {
	flex:1;
}
.va-dialog .dialog-content {
	margin: 0rem;
	display:flex;
	flex-direction:column;
	align-items:stretch;
}
.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(0, 0, 0, 0.4);
	position:absolute;
	left:0rem;
	top:0rem;
	right:0rem;
	bottom:0rem;
	box-sizing: border-box;
	margin: 0;
}
.va-pop {
	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: block;
}
.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;
}

.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;
	padding: var(--sizeMessageboxPaddingVer) var(--sizeMessageboxPaddingHor);
	border-style: solid;
	overflow: unset;
	border-width: 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;
	/*max-width:95%;*/
	width:fit-content;
}
.va-messagebox .messagebox-inner{
	display:flex;
	flex-direction:column;
	gap:1rem;
}
.va-messagebox .header {
	font-family: var(--fontFamilyBase);
	font-size: var(--sizeFontM);
	font-weight: var(--fontWeightSemibold);
	line-height: var(--sizeFontXL);
	margin: 0rem;
	display:flex;
	flex-direction:row;
	align-items:center;
	padding: 0 0 0.5rem 0;
}
.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:row;
	align-items:center;
	justify-content: start;
	gap:var(--sizeSpacingS);
}
.va-messagebox .icon {
	min-width:var(--sizeFieldM);
	width:var(--sizeFieldM);
	min-height:var(--sizeFieldM);
	height:var(--sizeFieldM);	
	background-color:var(--colorNeutralForeground);
}
.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 0 0;
	justify-content:right;
}
.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(--colorForeground2);
    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:0.8rem;
	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.4rem;
	border-radius:0.2rem;
}
.va-divider.small.horizontal .thumb {
	height:0.6rem;
	border-radius:0.3rem;
}
.va-divider.medium.horizontal .thumb {
	height:0.8rem;
	border-radius:0.4rem;
}
.va-divider.large.horizontal .thumb {
	height:1.2rem;
	border-radius:0.6rem;
}
.va-divider.xlarge.horizontal .thumb {
	height:1.6rem;
	border-radius:0.8rem;
}
.va-divider.xxlarge.horizontal .thumb {
	height:2.0rem;
	border-radius:0.8rem;
}
.va-divider.xxxlarge.horizontal .thumb {
	height:2.8rem;
	border-radius:0.8rem;
}


.va-divider.xsmall.vertical .thumb {
	width:0.4rem;
	border-radius:0.2rem;
}
.va-divider.small.vertical .thumb {
	width:0.6rem;
	border-radius:0.3rem;
}
.va-divider.medium.vertical .thumb {
	width:0.8rem;
	border-radius:0.4rem;
}
.va-divider.large.vertical .thumb {
	width:1.2rem;
	border-radius:0.6rem;
}
.va-divider.xlarge.vertical .thumb {
	width:1.6rem;
	border-radius:0.8rem;
}
.va-divider.xxlarge.vertical .thumb {
	width:2.0rem;
	border-radius:0.8rem;
}
.va-divider.xxxlarge.vertical .thumb {
	width:2.8rem;
	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(--colorNeutralStroke);
	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(--colorNeutralStroke);
	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.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);

}
.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;
}
.va-drawer.overlay {
	box-shadow: var(--shadowM);
	left: 0rem;
	height:100%;
	position: absolute;
	top: 0rem;
	bottom: 0rem;
	z-index:2;
}
.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(--colorBackground3);
	border-bottom:0.1rem solid var(--colorNeutralStroke);
	border-right:0.1rem solid var(--colorNeutralStroke);
	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(--colorNeutralStroke);
	border-right:0.1rem solid var(--colorNeutralStroke);
	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(--colorBackground3);
	border-bottom:0.1rem solid var(--colorNeutralStroke);
	border-right:0.1rem solid var(--colorNeutralStroke);
	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(--colorNeutralStroke);
	border-right:0.1rem solid var(--colorNeutralStroke);
	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);
}
.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-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:-9.1rem;
}
.va-slider.xsmall .slider-thumb-text{
	margin-left:-9.5rem;
}
.va-slider.small .slider-thumb-text{
	margin-left:-9.3rem;
}
.va-slider.medium .slider-thumb-text{
	margin-left:-9.1rem;
}
.va-slider.large .slider-thumb-text{
	margin-left:-8.9rem;
}
.va-slider.xlarge .slider-thumb-text{
	margin-left:-8.8rem;
}

.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;
}
.va-tab .tab-header .header-inner{
	flex:1;
	align-items: stretch;
	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: stretch;
	position: relative;
	flex-wrap: nowrap;
	flex-direction: row;
	flex-shrink: 0;
	display: flex;
}
.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-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;
}
.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 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(--colorNeutralStroke);
	border-top: 0rem solid var(--colorNeutralStroke);
}
.va-tab.top.classic .tab-content {
	border-bottom-left-radius:var(--sizeSpacingS);
	border-bottom-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(--colorNeutralStroke);
}
.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;
}
.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.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.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 .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:1.0rem;
	border-bottom:0.05rem solid var(--colorNeutralStroke);
	padding:0.6rem;
	text-align:center;
	display:flex;
	flex-direction:row;
	align-items:center;
	justify-content:space-around;
}
.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);
}
.calendar-picker-date {
	width:3rem;
	height:2.85rem;
    display: inline-block;
    flex-direction: row;
    align-items: center;
    justify-content: center;
	border-radius: 0.3rem;
	border:0.1rem solid var(--colorNeutralStroke);
	margin:2px;
	overflow:hidden;
}
.calendar-picker-date.selected{
	background-color: var(--colorPrimary);
    color: var(--colorPrimaryForeground);
}
.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;
}

.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;	
}
.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.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 .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);
}
.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(--colorEmphasisStroke);	
}
.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);	
	border-top: var(--sizeBorderL) solid var(--colorEmphasisStroke);
	border-bottom: var(--sizeBorderL) solid var(--colorEmphasisStroke);
}
.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);
}
.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:red;
	margin-right: 0.2rem;
	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(--colorNeutralStroke);
	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(--colorNeutralStroke);
	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;
}

.va-grid .grid-header-div.primary .grid-header-col{
	color:var(--colorPrimaryForeground);
}
.va-grid .grid-header-col:hover{
	background-color: var(--colorBackgroundHover);
}
.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(--colorNeutralStroke);
}
.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;
}
.va-grid .grid-header-title.edit {
	color:var(--colorGridHeaderEditForeground);
	font-weight:bold;
}
.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-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(--colorForeground);	
	padding: 0.3rem 0.6rem;
}
.va-grid .grid-body-div {
	position:relative;
	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: 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;
	/*height: 4.5rem;*/
}
.va-grid .grid-body-row.stripe {
	background-color:var(--colorNeutral3);
}
.va-grid.small .grid-body-row {
	height: var(--gridSmallRowHeight);
}
.va-grid.xsmall .grid-body-row {
	height: var(--gridXSmallRowHeight);
}
.va-grid .grid-body-row.selected{
	background-color: var(--colorGridSelected);
}
.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(--colorFieldError);
	color:var(--colorGridEditForeground);		
}

.va-grid .grid-body-row:hover .grid-body-col{
	background-color: var(--colorBackgroundHover);
}
.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: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(--colorNeutralStroke);
	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(--colorNeutralStroke);
	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(--colorNeutralStroke);
	border-right-width: var(--sizeBorderM);
	border-right-style: solid;
}
.va-grid .grid-body-col.fixed{
	border-right-color: var(--colorNeutralStroke);
	border-right-width: var(--sizeBorderM);
	border-right-style: solid;
}
.va-grid .grid-header-col.fixed{
}
.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: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;
}
.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.6rem; 
	height:30.0rem;
	background-color:#bbb;
	float:right; 
}
.va-grid .grid-body-scroll-pos {
	width:1.6rem;
	height:2.0rem;
	background-color:#eee;
	border:0rem solid #aaaaaa;
	position:absolute;
}
.va-grid .grid-body-scroll-top {
	width:1.6rem;
	height:1.6rem;
	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.6rem;
	height:1.6rem;
	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(--colorFieldError);
	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;
}
.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: 3.2rem;
}
.va-pagination button.actived {
	background-color: var(--colorBackgroundHover);
	/*color: var(--colorForeground);*/
}
.va-pagination .total-status, .va-pagination .page-status {
	text-align:left;
	font-size:14px
}
.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: var(--sizeBorderM) solid var(--colorNeutralStroke);
	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(--colorNeutralStroke);
    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(--sizeSpacingS)
}

.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-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);
}