analytics/webcontent/irot/hal/hal.css

@font-face {
    font-family: 'IBM Plex Sans';
	src: local("IBM Plex Sans"), local("IBMPlexSans"),
		url("fonts/plex/woff2/IBMPlexSans-Regular.woff2") format("woff2"),
		url("fonts/plex/woff/IBMPlexSans-Regular.woff") format("woff")
}

HTML,
BODY
{
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
}

BODY
{
	font: message-box;
	font-family: var(--F1);
	font-size: var(--BODY-S);
	background-color: var(--ui-01);
	color: var(--text-01);
	fill: var(--icon-01);
	border: none;
}

*,
*:before,
*:after
{
	box-sizing: border-box;
}

IMG
{
	box-sizing: content-box;
	padding: 0 !important;
}

TABLE.clsCenteredTable
{
	margin: 0 auto;
	text-align: left;
}

TABLE.clsRightAlignedTable
{
	margin: 0 0 0 auto;
	text-align: left;
}

TABLE
{
	empty-cells: hide;
}

*[blkTblAgn*='center']
{
	margin-left: auto !important;
	margin-right: auto !important;
}

*[blkTblAgn*='right']
{
	margin-left: auto !important;
}

INPUT,
TEXTAREA
{
	font: message-box;
	font-family: inherit;
	font-size: var(--BODY-S);
	color: var(--text-01);
}
TEXTAREA
{
	resize: none;
	border: 1px solid var(--G2);
}
INPUT[type="text"]
{
	user-select: text;
	-moz-user-select: text;
	-webkit-user-select: text;
	-ms-user-select: text;
}
.clsDialogText,
DIV.clsDialog DIV.clsToolbar,
DIV.clsDlgToolbar,
DIV.clsMenubar,
TD.clsModalDlgBody,
TD.clsModelessDlgBody,
BUTTON.clsDlgButton,
BUTTON.clsDlgButton_hover
{
	font: message-box;
	font-family: inherit;
	font-size: var(--BODY-S);
	color: var(--text-01);
}
TD.clsToolbarButton,
TABLE.clsModalDlg,
TABLE.clsModelessDlg,
TABLE.clsModelessInfoDlg,
TD.clsToolbarButton_up,
TD.clsToolbarButton_down,
TD.clsToolbarButton_stuck,
TABLE.clsTabBox,
DIV.clsTreeView,
DIV.clsListView,
DIV.clsListView_dropdown,
TABLE.clsComboBox,
TABLE.clsPropertySheet
{
	font: menu;
	font-family: inherit;
}
DIV.clsListView_dropdown.clsDirectionRtl 
{
	direction: rtl;
}
DIV.clsTreeView.clsDirectionRtl IMG[src*="plus"] 
{
	transform: rotate(180deg);
}
.clsModalDlgHeader_active,
.clsModalDlgHeader_inactive
{
	font: caption;
	font-family: inherit;
	font-weight: bold;
}
.clsDialogText
{
	cursor: default;
}
DIV.clsDlgToolbar
{
	height: 30px;
}
DIV.clsMenubar
{
	cursor: default;
	height: 32px;
	font-family: var(--F1);
	font-size: var(--BODY-S);
	background-color: var(--ui-01);
	color: var(--text-02);
	fill: var(--icon-01);
}
.clsMenuPopup
{
	position: absolute;
	visibility: hidden;
	left: -1000px;
	top: 0;
	cursor: default;
	z-index: 10000;
	font-family: var(--F1);
	font-size: var(--BODY-S);
	background-color: var(--ui-01);
	color: var(--text-02);
	fill: var(--icon-01);
}
.clsMenuPopup,
DIV.clsPopupDialog
{
	box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.3);
}
TABLE.clsModalDlg,
TABLE.clsModelessDlg,
TABLE.clsModelessInfoDlg
{
	font-size: var(--BODY-S);
	color: var(--text-01);
	border: 1px solid var(--ui-03);
	background-color: var(--ui-01);
}
TD.clsModalDlgBody,
TD.clsModelessDlgBody
{
	padding: 0 var(--24M);
}
BUTTON.clsDlgButton,
BUTTON.clsDlgButton_hover,
BUTTON.clsDlgButtonDropDownArrow,
BUTTON.clsDlgButtonDropDownArrow_hover
{
	overflow: visible;
	margin-left: var(--16S);
	white-space: nowrap;
	cursor: pointer;
	padding-left: 0;
	padding-right: 0;
	border-radius: 0;
	box-shadow: none;
	height: 32px;
	border: 2px solid var(--primary1);
	background-color: var(--primary1);
	color: var(--ui-01);
	fill: var(--ui-01);
	font-size: var(--BODY-S);
	font-weight: normal;
}
BUTTON.clsDlgButton,
BUTTON.clsDlgButton_hover
{
	padding: 0 var(--24M);
	min-width: 90px;
}
BUTTON.clsDlgButton:hover,
BUTTON.clsDlgButton_hover:hover,
BUTTON.clsDlgButtonDropDownArrow:hover,
BUTTON.clsDlgButtonDropDownArrow_hover:hover
{
	color: var(--ui-01);
	fill: var(--ui-01);
	border-color: var(--primary2);
	background-color: var(--primary2);
}
BUTTON.clsDlgButton:active,
BUTTON.clsDlgButton_hover:active,
BUTTON.clsDlgButtonDropDownArrow:active,
BUTTON.clsDlgButtonDropDownArrow_hover:active
{
	color: var(--ui-01);
	fill: var(--ui-01);
	border-color: var(--primary3);
	background-color: var(--primary3);
}
BUTTON.clsDlgButton:disabled,
BUTTON.clsDlgButton_hover:disabled,
BUTTON.clsDlgButtonDropDownArrow:disabled,
BUTTON.clsDlgButtonDropDownArrow_hover:disabled
{
	color: var(--disabled-03) !important;
	fill: var(--disabled-03);
	border-color: var(--disabled-02);
	background-color: var(--disabled-02);
}
BUTTON.clsDlgButtonDropDownArrow,
BUTTON.clsDlgButtonDropDownArrow_hover
{
	border-left-width: 0;
	margin-left: 0;
	padding: 0;
	width: 23px;
	vertical-align: middle;
}
BUTTON.clsDlgButton[_bt8=true]
{
	color: var(--ui-01);
	fill: var(--ui-01);
	border-color: var(--primary3);
	background-color: var(--primary3);
}

TD.clsToolbarButton,
TD.clsToolbarButton_up,
TD.clsToolbarButton_down,
TD.clsToolbarButton_stuck
{
	cursor: pointer;
	white-space: nowrap;
	padding: 7px;
	font-size: var(--BODY-S);
}
TD.clsToolbarButton_up
{
	background-color: var(--hover-ui);
}
TD.clsToolbarButton_up:focus
{
	outline: 2px dotted var(--focus);
}
TD.clsToolbarButton_down
{
	background-color: var(--active-ui);
}
TD.clsToolbarButton_stuck
{
	background-color: var(--selected-ui);
}
TD.clsToolbarTextButton
{
	padding: 0 4px;
	white-space: nowrap;
}
TD.clsToolbarTextButton:not([hal_disabled="true"]):hover
{
	background-color: var(--ui-03);
	cursor: pointer;
}

TD.clsMenubarItem
{
	cursor: pointer;
	white-space: nowrap;
	height: 28px;
	padding: 2px 10px 2px 9px;
}
TD.clsMenubarItem_up,
TD.clsMenubarItem_down
{
	cursor: pointer;
	white-space: nowrap;
	height: 28px;
	padding: 2px 9px 2px 8px;
	background-color: var(--hover-ui);
	border: 1px solid var(--ui-05);
}

.clsMenuItem,
.clsMenuItem_selected
{
	cursor: pointer;
	white-space: nowrap;
	width: 100%;
	height: 32px;
	border-top-width: 1px;
	border-top-style: solid;
	border-bottom-width: 1px;
	border-bottom-style: solid;
}
.clsMenuItem
{
	border-top-color: var(--ui-01);
	border-bottom-color: var(--ui-01);
}
.clsMenuItem_selected
{
	border-top-color: var(--hover-ui);
	border-bottom-color: var(--hover-ui);
	background-color: var(--hover-ui);
}
TD.clsMenuItemLabelCell
{
	padding-top: 6px;
	padding-bottom: 6px;
}
BODY.clsTouchFriendly .clsMenuItem,
BODY.clsTouchFriendly .clsMenuItem_selected,
BODY.clsTouchFriendly .clsMenuSeparatorLabel
{
	height: 40px;
	font-size: var(--BODY);
}
BODY.clsTouchFriendly .clsMenuSeparatorLabel
{
	padding-top: 12px;
}
.clsMenuSeparatorLabel
{
	font-weight: bold;
	font-size: var(--BODY-S);
	color: var(--text-01);
	border-top: none;
}
DIV.clsControlMessage
{
	padding: var(--8XS);
	color: var(--text-02);
}
DIV.clsTreeView,
DIV.clsListView
{
	overflow: auto;
	white-space: nowrap;
	font-size: var(--BODY-S);
	color: var(--text-01);
	fill: var(--icon-01);
	border: 1px solid var(--G2);
	background-color: var(--ui-01);
}
DIV.clsTreeView
{
	padding: 0 var(--8XS);
}
DIV.clsListViewNativeRadioView,
DIV.clsListViewNativeCheckboxView
{
	padding-left: 2px;
	padding-right: 2px;
}
DIV.clsListView_dropdown
{
	overflow: auto;
	white-space: nowrap;
	font-size: var(--BODY-S);
	background-color: var(--ui-01);
	padding-left: 0;
	box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
	border: 1px solid var(--ui-03);
	color: var(--text-01);
	fill: var(--icon-01);
}
.clsMainPropertySheetContainer,
.clsPropertySheetContainer
{
	overflow: auto;
	white-space: nowrap;
	background-color: var(--ui-01);
	font-size: var(--BODY-S);
	color: var(--text-01);
}
.clsPropertySheetContainer
{
	border: 1px solid var(--ui-03)
}
/*
DIV.clsPropertySheet2Container
{
	cursor: default;
	background-color: var(--ui-01);
	border: 1px solid var(--G2);
}
*/

TABLE.clsComboBox
{
	text-align: left;
	table-layout: fixed;
	empty-cells: show;
	font-size: 11px;
	border: 1px solid var(--text-03);
	background-color: var(--ui-01);
	color: var(--text-01);
}

TABLE.clsPropertySheet
{
	border-collapse: collapse;
	width: 100%;
	font-size: var(--BODY-S);
	color: var(--text-01);
	background-color: var(--ui-01);
}
DIV.clsHalScrollableBody
{
	height: 100%;
	width: 100%;
	overflow: auto;
}
DIV.clsDialog
{
	cursor: default;
	display: none;
}
.clsFixedWidthFont
{
	font-family: Consolas, "Courier New", monospace;
	font-size: 10pt;
}
.clsCptf
{
	font-size: 20pt;
	color: red;
}
DIV.clsToolbar
{
	font-size: var(--BODY-S);
	height: 30px;
	color: var(--text-01);
	background-color: var(--ui-01);
}
TD.clsMenubarItemLast
{
	width: 100%;
	border: none;
}
IMG.clsImg16x16
{
	width: 16px;
	height: 16px;
	vertical-align: middle;
}
svg.clsImg16x16
{
	width: 16px;
	height: 16px;
	vertical-align: top;
}
svg.clsImg10x10
{
	pointer-events: none;
	width: 10px;
	height: 10px;
	vertical-align: middle;
}
TD.clsToolbarSeparator
{
	padding-left: 2px;
	padding-right: 2px;
}
TD.clsToolbarSeparator_hidden
{
	padding-left: 1px;
	padding-right: 1px;
}
DIV.clsToolbarSeparator,
DIV.clsToolbarSeparator_hidden
{
	width: 1px;
	height: 22px;
}
DIV.clsToolbarSeparator
{
	background-color: var(--ui-03);
}
TD.clsToolbarComboBox
{
	white-space: nowrap;
	padding-left: 2px;
	padding-right: 2px;
	padding-top: 2px;
}
.clsSubMenuPopupRight
{
	margin-left: -1px;
}
.clsSubMenuPopupLeft
{
	margin-left: 1px;
}
.clsMenuSeparator
{
	height: 1px;
	border-top: 1px solid var(--G2);
}
.clsMenuSeparatorContainer
{
	padding: 0;
	font-size: 0;
	line-height: 0;
	background-color: var(--ui-01);
}
.clsMenuSeparatorLabelContainer
{
	border-top: 1px solid var(--G2);
	border-bottom: 1px solid var(--G2);
	background-color: var(--ui-01);
	padding-left: var(--16S);
	height: 32px;
}
TD.clsMenuImageContainer
{
	width: 20px;
	height: 20px;
	padding: 2px var(--8XS) 2px var(--16S);
}
svg.clsMenuItemSvgIcon
{
	pointer-events: none;
	width: 16px;
	height: 16px;
	vertical-align: middle;
}
IMG.clsMenuImage,
svg.clsMenuImage
{
	width: 16px;
	height: 16px;
	vertical-align: middle;
	margin: 2px;
}
DIV.clsSubMenuArrow
{
	width: 0; 
	height: 0; 
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-left: 4px solid var(--icon-01);
}
TD.clsSubMenu
{
	width: 16px;
	padding-right: 6px;
	padding-left: 6px;
}
DIV.clsModalDlgWin,
DIV.clsModelessDlgWin
{
	position: absolute;
	left: -1000px;
	top: 0;
}
.clsModelessDlgHeader_active,
.clsModelessDlgHeader_inactive,
.clsModelessInfoDlgHeader_inactive,
.clsModelessInfoDlgHeader_active
{
	cursor: default;
	font-size: var(--HEADING-XS);
	color: var(--text-01);
	background-color: var(--ui-01);
}
.clsModelessDlgHeader_inactive
{
	font-weight: bold;
}
.clsDlgButtonBar,
.clsDlgMsgBoxButtonBar
{
	display: flex;
	justify-content: flex-end;
	padding: var(--32L) 0 0 0;
	white-space: nowrap;
	margin: 0 calc(var(--24M) * -1);
	flex: 1;
}
.clsDlgButtonBar > BUTTON,
.clsDlgMsgBoxButtonBar > BUTTON
{
	display: inline-flex;
	flex-direction: row;
	flex: 1;
	margin-left: 0;
	height: 64px;
	padding-top: 1rem;
	padding-bottom: 2rem;
	color: var(--text-04);
	background-color: var(--interactive-01);
	border-width: 0;
	font-weight: normal;
}
.clsDlgButtonBar > BUTTON:disabled,
.clsDlgMsgBoxButtonBar > BUTTON:disabled
{
	background-color: var(--disabled-02);
	color: var(--disabled-03);
}
.clsDlgButtonBar > BUTTON:focus,
.clsDlgMsgBoxButtonBar > BUTTON:focus
{
	box-shadow: inset 0 0 0 2px var(--focus), inset 0 0 0 3px var(--ui-02);
}

.clsDlgButtonBar > BUTTON:disabled:not([HAL_isPrimary]),
.clsDlgMsgBoxButtonBar > BUTTON:disabled:not([HAL_isPrimary])
{
	background-color: var(--disabled-02);
	color: var(--disabled-03) !important;
}
.clsDlgButtonBar > BUTTON:not(:active):not(:disabled):hover,
.clsDlgMsgBoxButtonBar > BUTTON:not(:active):not(:disabled):hover
{
	background-color: var(--hover-primary);
}
.clsDlgButtonBar > BUTTON:not(:active):not(:disabled):not([HAL_isPrimary]),
.clsDlgMsgBoxButtonBar:not(.clsDlg1Button) > BUTTON:not(:active):not(:disabled):not([HAL_isPrimary])
{
	background-color: var(--interactive-02);
}
.clsDlgButtonBar > BUTTON:not(:active):not(:disabled):not([HAL_isPrimary]):hover,
.clsDlgMsgBoxButtonBar:not(.clsDlg1Button) > BUTTON:not(:active):not(:disabled):not([HAL_isPrimary]):hover
{
	background-color: var(--hover-secondary);
}
.clsDlgButtonBar > BUTTON:active,
.clsDlgMsgBoxButtonBar > BUTTON:active
{
	background-color: var(--active-secondary);
}
.clsDlgButtonBar > BUTTON[HAL_isPrimary]:active,
.clsDlgMsgBoxButtonBar > BUTTON[HAL_isPrimary]:active
{
	background-color: var(--active-primary);
}

.clsDlgButtonBar.clsDlg1Button,
.clsDlgMsgBoxButtonBar.clsDlg1Button
{
	padding-left: calc(50% + 16px);
}
.clsDlgButtonBar.clsDlg2ButtonsNoPrimary > BUTTON:not(:first-of-type),
.clsDlgMsgBoxButtonBar.clsDlg2ButtonsNoPrimary > BUTTON:not(:first-of-type)
{
	margin-left: 1px;
}
.clsDlgButtonBar.clsDlg3Buttons > BUTTON:first-of-type,
.clsDlgMsgBoxButtonBar.clsDlg3Buttons > BUTTON:first-of-type
{
	margin-left: 25%;
}
.clsDlgButtonBar.clsDlg3Buttons > BUTTON:not(:first-of-type),
.clsDlgButtonBar.clsDlg4OrMoreButtons > BUTTON:not(:first-of-type),
.clsDlgMsgBoxButtonBar.clsDlg3Buttons > BUTTON:not(:first-of-type),
.clsDlgMsgBoxButtonBar.clsDlg4OrMoreButtons > BUTTON:not(:first-of-type)
{
	margin-left: 1px;
}



DIV.clsDlgMsgBoxButtonBar
{
	text-align: center;
	white-space: nowrap;
	height: 80px;
	padding-top: var(--16S);
}
TD.clsModalDlgHeaderTitleFirstCell_active,
TD.clsModalDlgHeaderTitleFirstCell_inactive,
TD.clsModalDlgHeaderTitleLastCell_active,
TD.clsModalDlgHeaderTitleLastCell_inactive
{
	height: 64px;
	vertical-align: middle;
	font-size: var(--HEADING-XS);
	border-style: none;
	cursor: move;
}
TD.clsModalDlgHeaderTitleFirstCell_active,
TD.clsModalDlgHeaderTitleFirstCell_inactive
{
	padding-left: var(--24M);
}
TD.clsModalDlgHeaderTitleLastCell_active,
TD.clsModalDlgHeaderTitleLastCell_inactive
{
	padding-right: 0;
}
DIV.clsDlgResizeHandle
{
	cursor: se-resize;
	font-size: 6px;
	background-image: url(images/size_resize.gif);
	background-repeat: no-repeat;
	background-position: right bottom;
	height: 9px;
	width: 9px;
	margin-left: auto;
}
BUTTON.clsXButton,
BUTTON.clsXButton_active,
BUTTON.clsXButton_inactive,
BUTTON.clsXButton_hover
{
	fill: var(--icon-01);
	height: 48px;
	width: 48px;
	cursor: pointer;
	border: none;
	background-color: transparent;
	margin-left: 7px;
	padding: var(--8XS);
}
BUTTON.clsXButton:hover,
BUTTON.clsXButton_active:hover,
BUTTON.clsXButton_inactive:hover,
BUTTON.clsXButton_hover:hover
{
	background-color: var(--hover-ui);
}
BUTTON.clsXButton:focus,
BUTTON.clsXButton_active:focus,
BUTTON.clsXButton_inactive:focus,
BUTTON.clsXButton_hover:focus
{
	outline: 2px solid var(--focus);
}
svg.clsXButton
{
	height: 20px;
	width: 20px;
	pointer-events: none;
}

TABLE.clsTabBox
{
	border-collapse: collapse;
	empty-cells: show;
	cursor: default;
	color: var(--text-02);
	font-size: var(--BODY-S);
}

SVG.clsTabBoxNextPrevious
{
	fill: var(--icon-01);
	pointer-events: none;
	vertical-align: middle;
}

DIV.clsTabPanels
{
	cursor: default;
	padding: var(--16S) 0 0 0;
	font-size: var(--BODY-S);
}

TD.clsTabBox_inactive,
TD.clsTabBox_inactive_hover,
TD.clsTabBox_active,
TD.clsTabBox_active_hover,
TD.clsBottomTabBox_inactive,
TD.clsBottomTabBox_inactive_hover,
TD.clsBottomTabBox_active,
TD.clsBottomTabBox_active_hover
{
	vertical-align: bottom;
	border: none;
	padding: 0 1px 0 0;
	cursor: pointer;
}

TD.clsTabBox_active,
TD.clsBottomTabBox_active,
TD.clsTabBox_active_hover,
TD.clsBottomTabBox_active_hover,
TD.clsTabBox_inactive_hover,
TD.clsBottomTabBox_inactive_hover
{
	color: var(--text-01);
}

TD.clsTabBoxLast,
TD.clsBottomTabBoxLast
{
	width: 100%;
	vertical-align: bottom;
	padding: 0;
}
DIV.clsBottomTabPanels
{
	padding: 0 0 var(--16S) 0;
	font-size: var(--BODY-S);
	color: var(--text-01);
}
IMG.clsTabImage,
svg.clsTabImage
{
	height: 16px;
	width: 16px;
	vertical-align: middle;
	margin: 0 3px;
}
svg.clsTabImage
{
	pointer-events: none;
}

DIV.clsTabDivInner
{
	padding: 8px var(--16S);
}


TABLE.clsButtonBarHorizontal,
TABLE.clsButtonBarVertical
{
	color: var(--text-01);
}
TD.clsButtonBarButton DIV.clsInner,
TD.clsButtonBarButton DIV.clsInnerFirst,
TD.clsButtonBarButton DIV.clsInnerLast
{
	height: 40px;
}

.clsTreeNode_loading,
.clsTreeNode_normal,
.clsTreeNode_hover,
.clsTreeNode_selected
{
	cursor: default;
	padding: 2px 5px 2px 5px !important;
	color: var(--text-01);
}
.clsTreeNode_hover
{
	background-color: var(--hover-ui);
}
.clsTreeNode_selected
{
	background-color: var(--selected-ui);
}
.clsTreeNode_hyperlink_normal,
.clsTreeNode_hyperlink_hover
{
	color: var(--primary1);
	cursor: pointer;
}
.clsTreeNode_hyperlink_hover
{
	color: var(--primary2);
	text-decoration: underline;
}
.clsTreeNode_hyperlink_selected
{
	color: var(--primary3);
	cursor: pointer;
	text-decoration: underline;
}
TD.clsOrgTreeNode
{
	padding-top: 3px;
	padding-bottom: 3px;
	border-width: 0;
}
DIV.clsOrgTreeNode_normal,
DIV.clsOrgTreeNode_hover,
DIV.clsOrgTreeNode_selected
{
	padding: 3px;
	white-space: nowrap;
	text-align: center;
}
DIV.clsOrgTreeNode_hover
{
	background-color: var(--hover-ui);
}
DIV.clsOrgTreeNode_selected
{
	background-color: var(--selected-ui);
}
TABLE.clsOrgTreeNodeLines
{
	border-collapse: collapse;
	height: 100%;
	width: 25px;
}
TD.clsOrgTreeNodeLine
{
	border-top: 1px solid var(--text-02);
	border-bottom: 1px solid var(--text-02);
	border-left: 1px solid var(--text-02);
	height: 50%;
}
IMG.clsOrgTreeNodeArrow
{
	width: 30px;
	height: 9px;
	vertical-align: middle;
}
IMG.clsOrgTreeNodeArrowHeadRight
{
	width: 8px;
	height: 9px;
	vertical-align: middle;
}
DIV.clsListViewHeaderPane,
DIV.clsListViewColumnHeader
{
	height: 32px;
}
DIV.clsListViewColumnHeader
{
	line-height: 30px;
	cursor: default;
	font-size: var(--BODY-S);
	overflow: hidden;
	white-space: nowrap;
	background-color: var(--ui-02);
	padding-left: 4px;
	border: none;
	border-left: 1px solid var(--G2);
	border-bottom: 1px solid var(--G2);
}

.clsListItem_normal,
.clsListItem_hover,
.clsListItem_selected
{
	cursor: pointer;
	color: var(--text-01);
}
.clsListItem_hover
{
	background-color: var(--hover-ui);
}
.clsListItem_selected
{
	background-color: var(--selected-ui);
}
.clsListItem_selected_inactive
{
	background-color: var(--ui-02);
}
.clsListItem_hyperlink_normal,
.clsListItem_hyperlink_hover,
.clsListItem_hyperlink_selected
{
	color: var(--primary1);
	cursor: pointer;
}
.clsListItem_hyperlink_hover SPAN
{
	color: var(--primary2);
	text-decoration: underline;
}
.clsListItem_outline_normal,
.clsListItem_outline_hover,
.clsListItem_outline_selected
{
	margin: 1px;
	padding: 4px 2px;
	border: 1px solid transparent;
	cursor: pointer;
}
.clsListItem_outline_hover
{
	background-color: var(--hover-ui);
}
.clsListItem_outline_selected
{
	background-color: var(--selected-ui);
	border-color: var(--B);
}
/*
.clsListItem_token_normal,
.clsListItem_token_hover,
.clsListItem_token_selected,
.clsListItem_token_selected_inactive
{
	cursor: default;
	color: var(--text-01);
}
.clsListItem_token_selected
{
	background-color: var(--selected-ui);
	outline: 1px solid var(--focus);
}
.clsListItem_token_selected_inactive
{
	background-color: var(--selected-ui);
}
*/
svg.clsListItemActionSvg
{
	pointer-events: none;
	height: 18px;
	width: 18px;
	float: right;
}
.clsListItemAction
{
	float: right;
	margin: 5px 2px 0 2px;
	fill: var(--text-02);
	visibility: hidden;
}
.clsListItemAction:hover
{
	fill: var(--primary1);
	cursor: pointer;
}
.clsListItem_hover .clsListItemAction,
.clsListItem_selected .clsListItemAction
{
	visibility: visible;
}
.clsListItem_tb_normal,
.clsListItem_tb_hover,
.clsListItem_tb_selected
{
	cursor: default;
	padding: 1px 0 2px 4px;
	border: 1px solid transparent;
	color: var(--text-01);
}
.clsListItem_tb_hover
{
	background-color: var(--hover-ui);
}
.clsListItem_tb_selected
{
	background-color: var(--selected-ui);
}
.clsListItem_gallery_normal IMG,
.clsListItem_gallery_hover IMG,
.clsListItem_gallery_selected IMG
{
	margin-bottom: 0;
}
.clsListItem_gallery_normal BR,
.clsListItem_gallery_hover BR,
.clsListItem_gallery_selected BR,
.clsListItem_gallery_normal SPAN,
.clsListItem_gallery_hover SPAN,
.clsListItem_gallery_selected SPAN
{
	display: none;
}
.clsListItem_gallery_normal,
.clsListItem_gallery_hover,
.clsListItem_gallery_selected
{
	border: none;
	margin: 2px !important;
	padding: 1px;
	cursor: pointer;
}
.clsListItem_gallery_hover
{
	outline: 2px solid var(--primary2);
}
.clsListItem_gallery_selected
{
	outline: 2px solid var(--primary1);
}

TD.clsComboBoxIcon
{
	height: 18px;
	width: 18px;
	vertical-align: middle;
	cursor: default;
}
TD.clsComboBoxText
{
	cursor: pointer;
	white-space: nowrap;
	height: 18px;
	padding-left: var(--8XS);
	vertical-align: middle;
}
DIV.clsComboBoxTextDiv
{
	overflow: hidden;
}
INPUT.clsComboBoxTextInput
{
	background-color: transparent;
	width: 100%;
	border: none;
	padding: 0;
	margin: 0;
}

TD.clsComboBoxArrow,
TD.clsComboBoxArrow_down,
TD.clsComboBoxArrow_disabled
{
	height: 18px;
	width: 18px;
	vertical-align: middle;
	cursor: pointer;
	padding: 0 var(--8XS) 0 var(--16S);
	border-width: 0;
	background-image: url(images/ComboBoxArrow.svg);	
	background-repeat: no-repeat;
	background-position: center;
	transition: transform 70ms cubic-bezier(.2,0,.38,.9);
}
TD.clsComboBoxArrow_down
{
	transform: rotate(180deg);
}

DIV.clsSliderHandle
{
	font-family: sans-serif;
	font-size: 2pt;
	cursor: pointer;
	position: absolute;
	border-radius: 50%;
	background-color: var(--ui-05);
	transition: transform .11s cubic-bezier(.2,0,.38,.9);
}
DIV.clsSliderHandle:focus,
DIV.clsSliderTrack[_nx8=true] DIV.clsSliderTrackRange
{
	background-color: var(--interactive-04);
}
DIV.clsSliderDisabled DIV.clsSliderTrackRange,
DIV.clsSliderDisabled DIV.clsSliderHandle,
DIV.clsSliderDisabled DIV.clsSliderHandle:hover
{
	background-color: var(--disabled-02);
	cursor: default;
}
DIV.clsHSlider,
DIV.clsVSlider
{
	cursor: default;
	position: relative;
}
DIV.clsHSlider,
DIV.clsVSlider,
DIV.clsSliderTrack,
DIV.clsSliderTrackRange,
DIV.clsSliderTicks
{
	font-family: sans-serif;
	font-size: 2pt;
}
DIV.clsSliderTrack
{
	position: relative;
	background-color: var(--ui-03);
	cursor: pointer;
	touch-action: none;
}
DIV.clsSliderTrackRange
{
	position: absolute;
	overflow: hidden;
	background-color: var(--ui-05);
}
DIV.clsSliderTicks
{
	position: relative;
	height: 100%;
	width: 100%;
}
DIV.clsSliderLabel
{
	font-size: var(--BODY-S);
	color: var(--text-01);
}
DIV.clsSliderLabel,
DIV.clsSliderHandleTooltip
{
	font-family: var(--F1);
	white-space: nowrap;
}
DIV.clsSliderHandleTooltip
{
	position: absolute;
	z-index: 10000;
	min-width: 50px;
	height: 24px;
	padding: 4px 3px 2px 3px;
	text-align: center;
	color: var(--ui-01);
	background-color: var(--ui-05);
	border-radius: 2px;
	font-size: var(--CAPTION);
}
DIV.clsSliderHandle:hover,
DIV.clsSliderHandle[_bn7]
{
	transform: scale(1.42857);
}
DIV.clsSliderHandle[_bn7] > DIV.clsSliderHandleTooltip
{
	transform: scale(0.7);
}
DIV.clsHSlider DIV.clsSliderLabel
{
	margin-top: -1.2em;
}
DIV.clsVSlider DIV.clsSliderLabel
{
	margin-left: 7px;
}
DIV.clsHSlider DIV.clsSliderTicks
{
	border-left: 1px solid transparent;
	height: 7px;
}
DIV.clsVSlider DIV.clsSliderTicks
{
	border-top: 1px solid transparent;
	width: 7px;
}
DIV.clsSliderTick,
DIV.clsSliderTickMinor
{
	position: absolute;
}
DIV.clsSliderTick
{
	border-color: var(--G2);
}
DIV.clsSliderTickMinor
{
	border-color: var(--ui-03);
}
DIV.clsHSlider DIV.clsSliderTick
{
	border-left-width: 1px;
	border-left-style: solid;
	height: 4px;
	margin-left: -1px;
}
DIV.clsHSlider DIV.clsSliderTickMinor
{
	border-left-width: 1px;
	border-left-style: solid;
	height: 4px;
	margin-left: -1px;
}
DIV.clsVSlider DIV.clsSliderTick
{
	border-top-width: 1px;
	border-top-style: solid;
	width: 4px;
	margin-top: -1px;
}
DIV.clsVSlider DIV.clsSliderTickMinor
{
	border-top-width: 1px;
	border-top-style: solid;
	width: 4px;
	margin-top: -1px;
}
DIV.clsHSlider DIV.clsSliderTrack
{
	height: 2px;
}
DIV.clsHSlider DIV.clsSliderTrackRange
{
	height: 2px;
	margin-top: -1px;
	margin-left: -1px;
}
DIV.clsVSlider DIV.clsSliderTrack
{
	width: 2px;
}
DIV.clsVSlider DIV.clsSliderTrackRange
{
	width: 2px;
	margin-top: -1px;
	margin-left: -1px;
}
DIV.clsHSlider DIV.clsSliderHandle,
DIV.clsVSlider DIV.clsSliderHandle
{
	width: 16px;
	height: 16px;
}
DIV.clsHSlider DIV.clsSliderHandle
{
	margin-top: -7px;
}
DIV.clsVSlider DIV.clsSliderHandle
{
	margin-left: -7px;
}

TR.clsPropertyRow:hover > TD.clsPropertySheetLabel_inactive
{
	background-color: var(--hover-ui);
}
TR.clsGroupHeader
{
	background-color: var(--ui-02);
	text-transform: uppercase;
}
TD.clsPropertySheetLabel_active,
TD.clsPropertySheetLabel_inactive
{
	white-space: nowrap;
	padding: 0 4px;
	cursor: default;
	height: 24px;
	border: 1px solid var(--ui-02);
}
TD.clsPropertySheetLabel_active
{
	background-color: var(--selected-ui);
}
TD.clsPropertySheetValue
{
	cursor: default;
	white-space: nowrap;
	width: 100%;
	padding: 0 0 0 1px;
	height: 24px;
	border: 1px solid var(--ui-02);
}
INPUT.clsPropertySheetValueInput
{
	background-color: var(--ui-01);
	border-color: transparent;
}
INPUT.clsPropertySheetValueInput:focus
{
	border-color: var(--focus);
}
BUTTON.clsDotDotDotButton,
BUTTON.clsDotDotDotButton_hover,
BUTTON.clsDotDotDotButton_disabled
{
	padding: 0;
	height: 32px;
	cursor: pointer;
	padding-left: 0;
	padding-right: 0;
	width: 23px;
	margin: 0 0 1px 2px;
	border: 1px solid var(--ui-03);
	background-color: var(--ui-01);
	color: var(--primary1);
}
BUTTON.clsDotDotDotButton:hover,
BUTTON.clsDotDotDotButton_hover:hover
{
	background-color: var(--hover-ui);
}
BUTTON.clsDotDotDotButton_disabled
{
	cursor: default;
	background-color: var(--disabled-01);
}
BUTTON.clsDotDotDotPropertyButton
{
	cursor: pointer;
	height: 22px;
	width: 22px;
	font-family: sans-serif;
	font-size: 2pt;
	background-color: var(--ui-01);
	padding: 1px;
	border: 1px solid var(--ui-03);
}
BUTTON.clsDotDotDotPropertyButton:hover
{
	background-color: var(--hover-ui);
}
BUTTON.clsDotDotDotPropertyButton:active
{
	background-color: var(--active-ui);
}
BUTTON.clsDotDotDotPropertyButton svg
{
	pointer-events: none;
	transition: transform 70ms cubic-bezier(.2,0,.38,.9);
}
BUTTON.clsDotDotDotPropertyButtonOpen svg
{
	transform: rotate(180deg);
}
BUTTON.clsDotDotDotButton IMG
{
	height: 9px;
	width: 10px;
}
svg.clsDotDotDotButtonSvg
{
	width: 12px;
	height: 12px;
	margin-top: 4px;
}
DIV.clsPropertiesPaneInputBlocker
{
	z-index: 101;
}
DIV.clsPropertyGroup
{
	height: 18px;
	font-weight: bold;
	white-space: nowrap;
	padding: 3px 0 0 4px;
}
TD.clsPropertyGroupContainer
{
	border-bottom: 1px solid var(--ui-03);
	padding: 4px 0 3px 0;
}

DIV.clsPaneHeader_active,
DIV.clsPaneHeader_inactive
{
	overflow: hidden;
	cursor: default;
	text-align: left;
	white-space: nowrap;
	font-weight: bold;
	font-size: var(--BODY);
	background-color: var(--ui-01);
}
DIV.clsPaneHeader_active SPAN,
DIV.clsPaneHeader_inactive SPAN
{
	color: var(--primary1);
	font-weight: normal;
}
DIV.clsMainPropertyDescriptionBox,
DIV.clsPropertyDescriptionBox
{
	cursor: default;
	overflow-y: auto;
	padding: 2px;
	background-color: var(--ui-01);
	color: var(--text-01);
}
DIV.clsPropertyDescriptionBox
{
	border: 1px solid var(--ui-03);
}
DIV.clsMainPropertyDescriptionBox
{
	border-top: 1px solid var(--ui-03) !important;
	border-left: none;
	border-right: none;
	border-bottom: none;
}
DIV.clsPropertyDescriptionBoxTitle
{
	font-weight: bold;
	padding-bottom: 2px;
}
IMG.clsCursor,
.clsCursorFaded
{
	position: absolute;
	visibility: hidden;
	top: 0;
	margin: 22px 0 0 10px;
	z-index: 10000;
}
.clsCursorFaded
{
	opacity: 0.5;
}

#idTreeViewDropCaret,
#idOrgTreeViewDropCaret,
#idOrgTreeViewDropCaretInside,
#idListViewDropCaret_report,
#idListViewDropCaret_icon
{
	pointer-events: none;
	position: absolute;
	visibility: hidden;
	top: 0;
	z-index: 10000;
}

#idTreeViewDropCaret
{
	height: 6px;
	width: 100px;
}
#idOrgTreeViewDropCaret
{
	height: 7px;
	width: 65px;
}
#idOrgTreeViewDropCaretInside
{
	height: 65px;
	width: 7px;
}
#idListViewDropCaret_report
{
	height: 3px;
	width: 50px;
	border-left: 1px solid var(--B);
	border-right: 1px solid var(--B);
}
#idListViewDropCaret_icon
{
	height: 50px;
	width: 4px;
	border-top: 1px solid var(--B);
	border-bottom: 1px solid var(--B);
}
.clsResizerHoriz_normal,
.clsResizerHoriz_hover,
.clsResizerHoriz_selected
{
	cursor: n-resize;
	margin: 0;
	overflow: hidden;
	top: 0;
	left: 0;
	position: absolute;
	z-index: 999;
	height: 4px;
	border: none;
	background-position: center center;
	background-repeat: no-repeat;
	background-image: url(images/pane_resize_vert.gif);
}
.clsResizerVert_normal,
.clsResizerVert_hover,
.clsResizerVert_selected
{
	cursor: e-resize;
	margin: 0;
	top: 0;
	left: 0;
	position: absolute;
	overflow: hidden;
	z-index: 999;
	width: 4px;
	border: none;
	background-position: center center;
	background-repeat: no-repeat;
	background-image: url(images/pane_resize_horiz.gif);
}
.clsListViewColResizer_normal,
.clsListViewColResizer_hover,
.clsListViewColResizer_selected
{
	margin: 0;
	top: 0;
	left: 0;
	position: absolute;
	overflow: hidden;
	cursor: col-resize;
	border: none;
	width: 16px;
	z-index: 999;
}
.clsInvisibleSplitterVertical_normal,
.clsInvisibleSplitterVertical_hover,
.clsInvisibleSplitterVertical_selected
{
	cursor: e-resize;
	margin: 0;
	overflow: hidden;
	top: 0;
	left: 0;
	position: absolute;
	width: 4px;
	border-style: none;
	background-position: center center;
	background-repeat: no-repeat;
	background-image: url(images/pane_resize_horiz.gif);
}
.clsExpandCollapseSplitterVertical_normal,
.clsExpandCollapseSplitterVertical_hover,
.clsExpandCollapseSplitterVertical_selected
{
	cursor: e-resize;
	margin: 0;
	overflow: hidden;
	top: 0;
	left: 0;
	position: absolute;
	width: 7px;
	border-left: 1px solid var(--G2);
}
.clsExpandCollapseSplitterHorizontal_normal,
.clsExpandCollapseSplitterHorizontal_hover,
.clsExpandCollapseSplitterHorizontal_selected
{
	cursor: n-resize;
	margin: 0;
	overflow: hidden;
	top: 0;
	left: 0;
	position: absolute;
	height: 6px;
	border-style: none;
}
.clsDialog .clsExpandCollapseSplitterVertical_normal,
.clsDialog .clsExpandCollapseSplitterVertical_hover,
.clsDialog .clsExpandCollapseSplitterVertical_selected
{
	border-style: none;
}
.clsFeedbackBar
{
	top: 0;
	left: 0;
	position: absolute;
	visibility: hidden;
	border: 0;
	background-color: var(--ui-01);
	background-image: url("data:image/svg+xml,%3Csvg width='2' height='2' viewBox='0 0 2 2' fill='var(--icon-01-rgb)' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='1' height='1'/%3E%3Crect x='1' y='1' width='1' height='1'/%3E%3C/svg%3E");
	background-size: 2px;
	overflow: hidden;
	cursor: default;
	z-index: 999;
}
DIV.clsExpandCollapseRight_normal,
DIV.clsExpandCollapseRight_hover
{
	background-image: url(images/vertical_splitter.png);
	height: 51px;
	width: 6px;
	background-position: -12px 0;
}
DIV.clsExpandCollapseRight_hover
{
	background-position: -18px 0;
}
DIV.clsExpandCollapseLeft_normal,
DIV.clsExpandCollapseLeft_hover
{
	background-image: url(images/vertical_splitter.png);
	height: 51px;
	width: 6px;
	background-position: 0 0;
}
DIV.clsExpandCollapseLeft_hover
{
	background-position: -6px 0;
}
DIV.clsExpandCollapseTop_normal,
DIV.clsExpandCollapseTop_hover
{
	background-image: url(images/horizontal_splitter.png);
	height: 6px;
	width: 51px;
	background-position: 0 0;
}
DIV.clsExpandCollapseTop_hover
{
	background-position: 0 -6px;
}
DIV.clsExpandCollapseBottom_normal,
DIV.clsExpandCollapseBottom_hover
{
	background-image: url(images/horizontal_splitter.png);
	height: 6px;
	width: 51px;
	background-position: 0 -12px;
}
DIV.clsExpandCollapseBottom_hover
{
	background-position: 0 -18px;
}
DIV.clsExpandCollapseTop_normal,
DIV.clsExpandCollapseTop_hover,
DIV.clsExpandCollapseBottom_normal,
DIV.clsExpandCollapseBottom_hover
{
	margin: 0 auto;
}
.clsHyperlink,
.clsHelpLink
{
	cursor: pointer;
	color: var(--link-01);
}
.clsHyperlink:not(:disabled):hover,
.clsHelpLink:hover
{
	text-decoration: underline;
	color: var(--hover-primary-text);
}
.clsHyperlink:disabled
{
	color: var(--disabled-02);
}
.clsHyperlink:focus
{
	outline: 1px solid var(--focus);
}
.clsHyperlink:active
{
	color: var(--text-01);
}
BUTTON.clsColorButton
{
	cursor: pointer;
	font-family: sans-serif;
	vertical-align: middle;
	padding: 1px;
	overflow: visible;
	font-size: 2pt;
	border: 2px solid var(--text-03);
	background-color: transparent;
	height: 32px;
}
BUTTON.clsColorButton:disabled
{
	opacity: 0.5;
}
DIV.clsColorButtonDIV_normal,
DIV.clsColorButtonDIV_transparent
{
	width: 48px;
	height: 26px;
	border: none;
}
DIV.clsColorButtonDIV_transparent
{
	border: 1px dotted var(--B);
}

DIV.clsColorButtonDIV_default
{
	font-size: var(--BODY-S);
	font-family: var(--F1);
}

DIV.clsBlocker,
DIV.clsComboBoxBlocker,
DIV.clsDialogBlocker
{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
/*
DIV.clsDialogBlocker
{
	background-color: rgba(22,22,22,0.5);
}
*/
.clsReadOnlyTextBox
{
	background-color: transparent;
	background-image: none;
}
.clsDetailMsgTextarea
{
	height: 200px;
	width: 485px;
	overflow: auto;
	background-color: var(--ui-01);
}
.clsPrettyPrint
{
	font-size: var(--BODY-S);
	overflow: auto;
	border: 1px solid var(--ui-03);
}
.clsPrettyPrintNamespaceDecl
{
	color: red;
}
.clsPrettyPrintNamespaceURI
{
	font-weight: bold;
}
.clsPrettyPrintExpandLink,
.clsPrettyPrintNamespaceURI
{
	color: #FF5050;
}
.clsPrettyPrintNodeText
{
	font-weight: bold;
}
.clsPrettyPrintBrackets
{
	color: var(--primary1);
}
.clsPrettyPrintNodeName,
.clsPrettyPrintAttribute
{
	color: maroon;
}
.clsTooltipContainer
{
	padding: 0;
	border: none;
	background-color: transparent;
}
.clsTooltipTitle
{
	font-weight: bold;
	white-space: nowrap;
	color: var(--text-01);
	padding: 5px 5px 5px 0;
}
.clsTooltipDescription
{
	padding: 5px 5px 5px 7px;
	color: var(--text-01);
}
.clsMenubar,
.clsToolbar
{
	z-index: 100;
}

.clsColorP1
{
	fill: var(--primary1);
}
.clsStrokeP1
{
	stroke: var(--primary1);
}
.clsColorP2
{
	fill: var(--primary2);
}
.clsColorP3
{
	fill: var(--primary3);
}
.clsColorS1
{
	fill: var(--secondary1);
}
.clsColorN
{
	fill: var(--ui-02);
}
.clsColorG1
{
	fill: var(--ui-03);
}
.clsColorG2
{
	fill: var(--G2);
}
.clsColorG3
{
	fill: var(--text-03);
}
.clsColorG4
{
	fill: var(--text-02);
}
.clsColorG5
{
	fill: var(--ui-05);
}
.clsColorW
{
	fill: var(--ui-01);
}
.clsColorB
{
	fill: var(--B);
}
.clsColorC1
{
	fill: var(--support-02);
}
.clsColorC2
{
	fill: var(--support-03);
}
.clsColorC3
{
	fill: var(--support-01);
}
.clsColorIcon01
{
	fill: var(--icon-01);
}
.clsColorDisabled02
{
	fill: var(--disabled-02);
}

IMG.clsLVRadio,
IMG.clsLVRadio_checked,
IMG.clsLVRadio_checked_disabled,
IMG.clsLVRadio_disabled,
IMG.clsLVCheckbox,
IMG.clsLVCheckbox_checked,
IMG.clsLVCheckbox_checked_static,
IMG.clsLVCheckbox_static
{
	height: 16px;
	width: 16px;
	/* This prevents the radio and checkbox images from shrinking when there isn't enough room */
	min-width: 16px;
	vertical-align: middle;
}

TD.clsListItem_gridLine
{
	border: 1px solid var(--ui-03);
}
.clsTreeViewExpand_hover
{
	background-color: var(--hover-ui);
}
HR
{
	border: none;
	border-top: 1px solid var(--G2);
}
FIELDSET
{
	border: 1px solid var(--G2);
	padding: 0;
	margin: 0;
}
FIELDSET.clsFieldset > DIV
{
	padding: var(--16S);
}
FIELDSET.clsFieldsetHeader,
FIELDSET.clsFieldsetHeaderIndented
{
	border-right: none;
	border-left: none;
	border-bottom: none;
	padding: var(--16S) 0 0 0;
}
FIELDSET.clsFieldsetHeader > LEGEND,
FIELDSET.clsFieldsetHeaderIndented > LEGEND
{
	padding-right: 4px;
}
FIELDSET.clsFieldsetHeaderIndented > DIV
{
	padding-left: var(--16S);
}
.clsListItem_outline_noLabels_normal,
.clsListItem_outline_noLabels_selected,
.clsListItem_outline_noLabels_hover
{
	margin: 0 4px !important;
	padding: 4px;
	border: 1px solid;
	cursor: pointer;
}
.clsListItem_outline_noLabels_normal
{
	border-color: var(--ui-01);
}
.clsListItem_outline_noLabels_selected
{
	border-color: var(--primary1);
}
.clsListItem_outline_noLabels_hover
{
	border-color: var(--primary2);
}
SPAN.clsListItem_outline_noLabels_normal,
SPAN.clsListItem_outline_noLabels_selected,
SPAN.clsListItem_outline_noLabels_hover
{
	display: none;
}
*[hal_disabled="true"],
*[hal_disabled="true"] *
{
	color: var(--disabled-02) !important;
	fill: var(--disabled-02) !important;
}

TABLE.clsDialogAltBackgroundForResize div.clsDlgButtonBar
{
	padding-top: 21px;
	padding-bottom: 10px;
}
DIV.clsStyleValue
{
	border: 1px solid var(--text-03);
	color: var(--text-01);
	width: 150px;
	height: 24px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding: 2px;
}

input[type="radio"]
{
	vertical-align: bottom !important;
}
input[type="checkbox"]
{
	margin-bottom: 5px;
	margin-top: 2px;
	vertical-align: middle !important;
}
DIV.clsBottomTabPanelsPopup
{
	padding: 7px 0 15px 5px !important;
}
DIV.clsBottomTabPanels DIV.clsTreeView,
DIV.clsBottomTabPanels DIV.clsInfoBox,
DIV.clsBottomTabPanels DIV.clsListView
{
	border-bottom-color: transparent;
}

DIV.clsCircularMenuItem
{
	cursor: pointer;
	position: absolute;
	border-radius: 2px;
	padding: 4px;
	transition-duration: 0.3s;
	transition-timing-function: ease-out;
	background-color: rgba(255,255,255,0.8);
	fill: var(--icon-01);
}
DIV.clsCircularMenuItem:hover,
DIV.clsCircularMenuItem:focus
{
	background-color: var(--hover-ui);
}
DIV.clsCircularMenuLabel
{
	white-space: nowrap;
	min-width: 50px;
	color: var(--text-01);
}

DIV.clsAppToolbar,
DIV.clsToolbar,
DIV.clsDlgToolbar
{
	fill: var(--icon-01);
}

DIV.clsAppToolbar
{
	height: 40px;
	padding: 0;
}
DIV.clsAppToolbar TD.clsToolbarButton,
DIV.clsAppToolbar TD.clsToolbarButton_up,
DIV.clsAppToolbar TD.clsToolbarButton_down,
DIV.clsAppToolbar TD.clsToolbarButton_stuck
{
	padding: 11px 12px;
}
DIV.clsAppToolbar TD[_en7]
{
	padding-left: 4px;
	padding-right: 4px;
}

svg.clsToolbarSvgDropdownArrow,
svg.clsToolbarSvgIcon,
svg.clsListViewSvgIcon,
svg.clsTreeViewSvgIcon
{
	pointer-events: none;
}

svg.clsToolbarSvgDropdownArrow
{
	height: 12px;
	width: 12px;
	vertical-align: middle;
}

SPAN.clsListViewSvgIconSpan
{
	margin: 2px 3px;
}

@keyframes hal-keyframes-spin
{
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
svg.clsHalLoadingSpinner,
svg.clsHalLoadingSpinnerSmall,
svg.clsHalLoadingSpinnerSmallWithMessage
{
	animation-name: hal-keyframes-spin;
	animation-duration: .69s;
	animation-delay: 0.5s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-fill-mode: forwards;
	transform-origin: 50% 50%;
	height: 28px;
	width: 28px;
	fill: var(--interactive-04);
}
svg.clsHalLoadingSpinnerSmall,
svg.clsHalLoadingSpinnerSmallWithMessage
{
	height: 16px;
	width: 16px;
	display: inline-block;
	vertical-align: middle;
}
svg.clsHalLoadingSpinnerSmallWithMessage
{
	margin: 0 4px;
}

A.clsSvgButton
{
}
BUTTON.clsSvgButton,
BUTTON.clsSvgButton16x16
{
	border: none;
	background-color: transparent;
	margin: 0;
	padding: 0;
}
BUTTON.clsSvgTextButton
{
	height: 30px;
	padding: 0 8px;
}
.clsSvgIcon32x32
{
	height: 32px;
	width: 32px;
}
.clsSvgIcon16x16,
A.clsSvgButton16x16 svg,
BUTTON.clsSvgButton16x16 svg
{
	height: 16px;
	width: 16px;
	vertical-align: text-bottom;
}
A.clsSvgButton:not(:disabled),
A.clsSvgButton16x16:not(:disabled),
BUTTON.clsSvgButton:not(:disabled),
BUTTON.clsSvgButton16x16:not(:disabled)
{
	cursor: pointer;
}
A.clsSvgButton:not(:disabled):hover,
A.clsSvgButton16x16:not(:disabled):hover,
BUTTON.clsSvgButton:not(:disabled):hover,
BUTTON.clsSvgButton16x16:not(:disabled):hover
{
	background-color: var(--hover-ui);
}
A.clsSvgButton:not(:disabled):active,
A.clsSvgButton16x16:not(:disabled):active,
BUTTON.clsSvgButton:not(:disabled):active,
BUTTON.clsSvgButton16x16:not(:disabled):active
{
	background-color: var(--active-ui);
}

.clsSvgIcon,
.clsSvgIcon16x16,
.clsSvgIcon32x32,
A.clsSvgButton svg,
A.clsSvgButton16x16 svg,
BUTTON.clsSvgButton svg,
BUTTON.clsSvgButton16x16 svg
{
	pointer-events: none;
}

.clsSvgIcon,
.clsSvgIcon16x16,
.clsSvgIcon32x32,
A.clsSvgButton,
A.clsSvgButton16x16,
BUTTON.clsSvgButton,
BUTTON.clsSvgButton16x16
{
	fill: var(--icon-01);
}

DIV.clsButtonToolbar
{
	padding-top: 2px;
}
DIV.clsButtonToolbar > .clsSvgButton16x16
{
	padding: 7px;
}
svg.clsButtonToolbarDropDownArrow
{
	width: 12px !important;
	height: 12px !important;
	margin-left: 4px;
	vertical-align: middle !important;
}

SPAN.clsDialogIcon
{
	margin-right: 4px;
}
svg.clsDialogIconSvg
{
	fill: var(--icon-01);
	pointer-events: none;
	height: 16px;
	width: 16px;
	vertical-align: middle;
	margin-right: 4px;
}

/********** Checkboxes and radio buttons **********/
LABEL.clsCheckbox,
LABEL.clsRadioButton,
LABEL.clsToggle
{
	display: block;
	position: relative;
	padding-left: calc(2 * var(--16S));
	/* margin-bottom: var(--16S); */
	cursor: pointer;
	font-size: var(--BODY-S);
	color: var(--text-01);
}
LABEL.clsToggle
{
	padding-left: 40px;
}

/* Hide the native control */
/* Height and width is required for nemesis */
LABEL.clsCheckbox > INPUT,
LABEL.clsRadioButton > INPUT,
LABEL.clsToggle > INPUT
{
	position: absolute;
	opacity: 0;
	height: 1px;
	width: 1px;
	top: var(--8X);
	left: var(--16S);
	cursor: pointer;
}

LABEL.clsCheckbox > SPAN,
LABEL.clsRadioButton > SPAN,
LABEL.clsToggle > SPAN
{
	border-width: 0;
}

/* The checkmark box */
LABEL.clsCheckbox > SPAN:before
{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: var(--16S);
	width: var(--16S);
	background-color: transparent;
	border: 1px solid var(--ui-05);
}
LABEL.clsCheckbox > INPUT:focus ~ SPAN:before
{
	border-color: transparent;
	outline: 3px solid var(--focus);
	outline-offset: -1px;
}

/* The checkmark */
LABEL.clsCheckbox > SPAN:after
{
	content: "";
	position: absolute;
	display: none;
	left: 6px;
	top: 3px;
	width: 5px;
	height: 8px;
	border: solid var(--inverse-01);
	border-width: 0 2px 2px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	pointer-events: none;
}

/* The radio button box */
LABEL.clsRadioButton > SPAN:before
{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: var(--16S);
	width: var(--16S);
	background-color: var(--ui-01);
	border: 1px solid var(--ui-05);
	border-radius: 50%;
}
LABEL.clsRadioButton > INPUT:focus ~ SPAN:before
{
	box-shadow: 0 0 0 2px var(--focus);
}

/* The radio button checkmark (circle) */
LABEL.clsRadioButton > SPAN:after
{
	content: "";
	position: absolute;
	display: none;
	left: 4px;
	top: 4px;
	width: 8px;
	height: 8px;
	background-color: var(--ui-05);
	border-radius: 50%;
}

/* The toggle box */
LABEL.clsToggle > SPAN:before
{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: var(--16S);
	width: var(--32L);
	background-color: var(--ui-04);
	border-radius: 8px;
	pointer-events: none;
}

/* The circle */
LABEL.clsToggle > SPAN:after
{
	content: "";
	position: absolute;
	left: 3px;
	top: 3px;
	width: 10px;
	height: 10px;
	border: 5px solid var(--icon-03);
	border-radius: 5px;
	pointer-events: none;
	transition: transform 70ms cubic-bezier(.2,0,1,.9);
}

LABEL.clsCheckbox > INPUT:checked ~ SPAN:after,
LABEL.clsRadioButton > INPUT:checked ~ SPAN:after,
LABEL.clsToggle > INPUT:checked ~ SPAN:after
{
	display: block;
}
LABEL.clsToggle > INPUT:checked ~ SPAN:before
{
	background-color: var(--support-02);
}
LABEL.clsToggle > INPUT:checked ~ SPAN:after
{
	transform: translate(16px, 0);
}
LABEL.clsCheckbox > INPUT:checked ~ SPAN:before
{
	background-color: var(--ui-05);
	border-color: var(--ui-05);
}
LABEL.clsRadioButton > INPUT:checked ~ SPAN:before
{
	border-color: var(--ui-05);
}
LABEL.clsCheckbox > INPUT:disabled ~ SPAN:before,
LABEL.clsRadioButton > INPUT:disabled ~ SPAN:before
{
	border-color: var(--disabled-02);
}
LABEL.clsCheckbox > INPUT:disabled:checked ~ SPAN:before,
LABEL.clsRadioButton > INPUT:disabled:checked ~ SPAN:after
{
	background-color: var(--disabled-02);
}
LABEL.clsToggle > INPUT:disabled ~ SPAN:before
{
	color: var(--disabled-02);
	background-color: var(--disabled-01);
}
LABEL.clsToggle > INPUT:disabled ~ SPAN:after
{
	border-color: var(--disabled-02);
}
LABEL.clsToggle > INPUT:focus ~ SPAN:before
{
	box-shadow: 0 0 0 1px var(--ui-02), 0 0 0 3px var(--focus);
}


/********** Textbox **********/
INPUT.clsTextBox
{
	height: 32px;
}
INPUT.clsTextBox,
TEXTAREA.clsTextBox
{
	background-color: var(--field-01);
	color: var(--text-01);
	padding-left: var(--16S);
	padding-right: var(--16S);
	font-size: var(--BODY-S);
	border-width: 0;
	border-bottom: 1px solid var(--ui-04);
}
INPUT.clsTextBox:focus,
TEXTAREA.clsTextBox:focus
{
	outline: 2px solid var(--focus);
}
INPUT.clsTextBox:disabled,
TEXTAREA.clsTextBox:disabled
{
	border-bottom-color: transparent;
	opacity: 0.5;
	color: var(--active-ui);
}
INPUT.clsTextBox:read-only
{
	border-bottom-color: var(--text-02);
}
INPUT.clsTextBox::placeholder
{
	color: var(--text-03);
}