analytics/webcontent/pat/pat_page_editor.css

.customControl,
.HTMLItem,
.richTextItem
{
	text-decoration: none;
	font-weight: normal;
	font-style: normal;
	font-family: var(--F1);
	font-size: var(--CAPTION);
}
.customControl
{
	background-color: rgba(255, 255, 255, 0.8);
	color: black;
}
.HTMLItem,
.richTextItem
{
	display: inline-block;
	background-color: var(--primary2);
	color: var(--ui-01);
	border: 1px solid var(--ui-01);
	padding: 2px;
	margin: 1px;
}
.repeater,
.singleton
{
	display: inline;
	border: none;
}
.TOC
{
	width: 100%;
}
.hyperlink:not(.textItem)
{
	border: none;
	color: var(--primary1); 
	text-decoration: none; 
	cursor: pointer;
	padding: 0;
}
.hyperlink:not(.textItem):hover
{
	color: var(--primary2); 
	text-decoration: underline; 
}
TABLE.v2_commonAxis TD.chartNode
{
	border: 1px solid var(--text-03);
}
.mapChart .defaultChartMeasure
{
	border: 1px solid var(--B);
}
TABLE.pies,
TABLE.pieSlices,
TABLE.v2_pieSlices,
TABLE.v2_paretoBars,
TABLE.chartNodes,
TABLE.gauges,
TABLE.indicators,
TABLE.chartNestedNodes,
.marimekkoBars,
.barimekkoBarClusters,
.paretoBars,
.paretoBarClusters,
.commonClusters,
.progressiveBars,
.combinationChartTypes,
.points,
.pointClusters,
.radialClusters,
.winLossBars,
.marimekkoBarClusters,
.v2_chartMeasure,
.v2_bubbleMeasure,
.v2_category,
.v2_series,
.v2_commonAxis,
.v2_defaultChartMeasure
{
	border: 1px solid var(--text-03);
	border-collapse: collapse;
}
.commonClusters,
.v2_defaultChartMeasure
{
	background-color: var(--ui-01);
}
TABLE.line,
TABLE.bar,
TABLE.area
{
	background-color: var(--ui-01);
	border-collapse: collapse;
}
TABLE.chartNodeMembers
{
	border-collapse: collapse;
}
.pointXMeasure,
.pointYMeasure,
.angularMeasure,
.radialMeasure,
.targetMeasure,
.toleranceMeasure,
.bubbleMeasure,
.pointZMeasure,
.winLossChartMeasure,
.defaultChartMeasure
{
	font-family: var(--F1);
	border: 1px solid var(--text-03);
	border-collapse: collapse;
}
.defaultChartMeasure
{
	background-color: var(--ui-01);
}
.chartNodeMember
{
	padding: 1px;
}
.chartNodeMember,
.chartLabel,
.chartNode,
.regionColorLegendTitle,
.pointColorLegendTitle,
.pointSizeLegendTitle
{
	font-family: var(--F1);
	font-size: var(--BODY-S);
	font-weight: normal;
	font-style: normal;
	color: var(--text-01);
}

#idCaretDrop,
#idDropRect
{
	pointer-events: none;
	position: absolute;
	z-index: 99;
}
DIV.clsDropRect
{
	border: 2px dashed var(--B);
	font-size: 2pt;
}
DIV.clsCaretReplace
{
	padding: 2px;
}

DIV.clsCaretVerticalBar
{
	margin-left: -5px;
	padding: 3px;
	width: 10px;
	border-left: 1px solid var(--B);
	border-right: 1px solid var(--B);
	background-color: var(--ui-01);
}
DIV.clsCaretHorizontalBar
{
	margin-top: -5px;
	padding: 3px;
	height: 10px;
	border-top: 1px solid var(--B);
	border-bottom: 1px solid var(--B);
	background-color: var(--ui-01);
}
DIV.clsCaretVerticalSingleBar
{
	margin-left: -2px;
	width: 4px;
}
DIV.clsCaretHorizontalSingleBar
{
	margin-top: -2px;
	height: 4px;
}
DIV.clsCaretBlank
{
	margin-top: -2px;
	height: 0;
}
.clsChartInstruction,
.clsVizChartInstruction,
.clsChartActiveDrop
{
	font-family: var(--F1);
	font-size: var(--CAPTION);
	font-weight: normal;
	color: var(--text-03);
}
.clsEmptyChartText
{
	font-family: var(--F1);
	font-size: var(--BODY-S);
	font-weight: normal;
	color: var(--B);
	cursor: default;
	white-space: nowrap;
}
.clsChartActiveDrop
{
	background-color: var(--ui-01);
	border: 1px solid var(--text-03);
}
.clsChartItem
{
	font-family: var(--F1);
	font-size: var(--BODY-S);
	font-weight: normal;
	font-style: normal;
	color: var(--text-01);
}
.clsVizChartItem
{
	font-family: var(--F1);
	font-size: var(--BODY-S);
	font-weight: normal;
	font-style: normal;
	color: var(--B);
}
DIV.clsVizChartItem
{
	color: var(--primary1);
}

DIV.clsCircularMenuInsert
{
	display: inline-block;
	height: 32px;
	width: 32px;
	cursor: pointer;
	fill: var(--text-03);
	color: var(--text-03);
}
svg.clsCircularMenuInsertSvg
{
	pointer-events: none;
	width: 32px;
	height: 32px;
}
DIV.clsCircularMenuInsert:hover
{
	fill: var(--primary1);
	color: var(--primary1);
}

.clsDropAssistant
{
	position: absolute;
	pointer-events: none;
}

.clsDropAssistant > div
{
	position: relative;
	height: 100%;
	width: 100%;
}

.clsDragSelectorHotSpot
{
	position: absolute;
	pointer-events: all;
	z-index: 2000;
	background-color: transparent;
}

.clsDragSelectorTopHotSpot,
.clsDragSelectorBottomHotSpot
{
	width: calc(100%);
}

.clsDragSelectorTopHotSpot > div,
.clsDragSelectorBottomHotSpot > div
{
	height: 10px;
}

.clsDragSelectorLeftHotSpot,
.clsDragSelectorRightHotSpot
{
	top: 0;
	bottom: 0;
}

.clsDragSelectorLeftHotSpot > div,
.clsDragSelectorRightHotSpot > div
{
	display: inline-block;
	width: 10px;
	height: 100%;
}

.clsDragSelectorBottomHotSpot
{
	bottom: 0;
}

.clsDragSelectorRightHotSpot
{
	right: 0;
}

#idDropRect.clsDynamicDropTarget
{
	pointer-events: none;
	border: none;
}

#idWorkareaPane[_pfk="true"] .clsGripper
{
	display: none;
}

.clsGripperSelection
{
	box-shadow: 0 0 0 3px var(--primary1-a80);
	outline: none !important;
}

.clsGripper
{
	position: absolute;
	width: 8px;
	height: 8px;
	border: 1px solid var(--primary1-a80);
	background-color: var(--ui-01);
	z-index: 2;
}

.clsGripper.clsBottom
{
	bottom: -6px;
	left: calc(50% - 4px);
}

.clsGripper.clsTop
{
	top: -6px;
	left: calc(50% - 4px);
}

.clsGripper.clsBottom, 
.clsGripper.clsTop
{
	cursor: ns-resize;
}

.clsGripper.clsLeft
{
	top: calc(50% - 4px);
	left: -6px;
}

.clsGripper.clsRight
{
	top: calc(50% - 4px);
	right: -6px;
}

.clsGripper.clsRight:hover,
.clsGripper.clsLeft:hover
{
	cursor: ew-resize;
}

.clsResizeDiv
{
	position: absolute;
	display: none;
	justify-content: center;
	flex-direction: column;
	top: -1px;
	z-index: 200;
	outline: 3px solid var(--primary1-a80);
}

.clsResizeHorizontalIndicator,
.clsResizeVerticalIndicator
{
	display: flex;
	align-items: center;
	overflow: hidden;
}

.clsResizeHorizontalIndicator
{
	flex-direction: row;
}

.clsResizeVerticalIndicator
{
	flex-direction: column;
	height: 100%;
}

.clsResizeHorizontalIndicator > .clsValue
{
	padding: 0 4px;
	color: var(--secondary1);
}

.clsResizeVerticalIndicator > .clsValue
{
	padding: 4px 0;
	color: var(--secondary1);
}

.clsResizeHorizontalIndicator > .clsArrow
{
	position: absolute;
	top: calc(50% - 4px);
}

.clsResizeHorizontalIndicator > .clsArrow,
.clsResizeVerticalIndicator > .clsArrow
{
	border: solid var(--secondary1);
	border-width: 0 2px 2px 0;
	padding: 3px;
}

.clsResizeHorizontalIndicator > .clsArrow.first
{
	left: 2px;
	transform: rotate(135deg);
}

.clsResizeVerticalIndicator > .clsArrow.first
{
	transform: rotate(-135deg);
	margin-top: 2px;
}

.clsResizeHorizontalIndicator > .clsArrow.last
{
	right: 2px;
	transform: rotate(-45deg);
}

.clsResizeVerticalIndicator > .clsArrow.last
{
	transform: rotate(45deg);
	margin-bottom: 2px;
}

.clsLine
{
	background-color: var(--secondary1);
}

.clsResizeHorizontalIndicator > .clsLine
{
	height: 2px;
	width: calc(100%);
}

.clsResizeVerticalIndicator > .clsLine
{
	width: 2px;
	height: 100%;
}

.clsResizeVerticalIndicator > .clsLine.first
{
	margin-top: -6px;
}

.clsResizeVerticalIndicator > .clsLine.last
{
	margin-bottom: -6px;
}

.clsResizedArea
{
	position: absolute;
	z-index: 200;
	background-color: transparent;
	background-color: rgba(255, 255, 255, 0.8);
}

.clsDynamicDropResultPreview
{
	position: absolute;
	pointer-events: none;
	opacity: 0;
	z-index: 300;
	background-color: transparent;
}

.clsDynamicDropResultPreview > table
{
	background-color: var(--ui-01);
}

.clsDynamicDropTable > tbody > tr > td
{
	outline: 2px dashed var(--RS-OUTLINE-SELECTION-COLOR);
}

.clsPreviewEnter
{
	transition: opacity 200ms linear;
}

.clsPreviewExit
{
	transition: opacity 300ms linear;
}


TABLE.listControl
{
	border-collapse: collapse;
}

/* ListControl Design View (DV) */
TBODY.clsListControlDVTTitleBody,
TBODY.clsListControlDVSHdrTBody,
TBODY.clsListControlDVSFtrTBody
{
	border: 1px solid var(--G2);
}

TBODY.clsListControlDVListBody > TR > TD:first-of-type, 
TBODY.clsListControlDVTTitleBody > TR > TD:first-of-type,
TBODY.clsListControlDVSHdrTBody > TR > TD:first-of-type,
TBODY.clsListControlDVSFtrTBody > TR > TD:first-of-type
{
	border-left-width: 0 !important;
}

TBODY.clsListControlDVListBody > TR > TD:last-of-type, 
TBODY.clsListControlDVTTitleBody > TR > TD:last-of-type,
TBODY.clsListControlDVSHdrTBody > TR > TD:last-of-type,
TBODY.clsListControlDVSFtrTBody > TR > TD:last-of-type
{
	border-right-width: 0 !important;
}

TBODY.clsListControlDVListBody > TR:first-of-type > TD,
TBODY.clsListControlDVTTitleBody > TR:first-of-type > TD,
TBODY.clsListControlDVSHdrTBody > TR:first-of-type > TD,
TBODY.clsListControlDVSFtrTBody > TR:first-of-type > TD
{
	border-top-width: 0 !important;
}

TBODY.clsListControlDVListBody > TR:last-of-type > TD,
TBODY.clsListControlDVTTitleBody > TR:last-of-type > TD,
TBODY.clsListControlDVSHdrTBody > TR:last-of-type > TD,
TBODY.clsListControlDVSFtrTBody > TR:last-of-type > TD
{
	border-bottom-width: 0 !important;
}

TBODY.clsListControlDVSHdrTBody:not(:first-of-type), 
TBODY.clsListControlDVListBody:not(:first-of-type)
{
	border-top-width: 0 !important;
}

TBODY.clsListControlDVListBody:not(:last-of-type)
{
	border-bottom-width: 0 !important;
}

TBODY.clsListControlDVListBody > TR.clsListControlDVGHFirst > TD,
TBODY.clsListControlDVListBody > TR.clsListControlDVGFFirst > TD
{
	border-top-color: transparent !important;
}

TBODY.clsListControlDVListBody > TR.clsListControlDVGHLast > TD,
TBODY.clsListControlDVListBody > TR.clsListControlDVFHLast > TD
{
	border-bottom-color: transparent !important;
}
IMG.clsReportState,
svg.clsReportState
{
	height: 16px;
	width: 8px;
	vertical-align: middle;
	margin: 0 2px 0 1px;
}
svg.clsReportState
{
	pointer-events: none;
	fill: var(--primary1);
}
IMG.clsReportState16x16,
svg.clsReportState16x16
{
	width: 16px;
	height: 16px;
	vertical-align: middle;
	margin: 0 2px 0 1px;
}
svg.clsReportState16x16
{
	fill: var(--primary1);
	vertical-align: text-bottom;
}
DIV.clsDrillReportState
{
	display: inline-block;
}
.clsChartAuthoringBorder
{
	border: 1px solid var(--text-03);
}
.clsDropZone
{
	border: 1px solid var(--text-03);
	background-color: var(--ui-01);
}
.clsAppListCustControlDropZoneIcon
{
	padding-left: 4px;
	padding-right: 2px;
	border-right: 1px solid var(--text-03);
	background-color: var(--ui-03);
}
.clsVizDropZoneIcon
{
	padding-left: 4px;
	padding-right: 13px;
}
.clsVizEdgesHeaderSpacerAfter
{
	width: 100%;
	border-bottom: 1px solid var(--ui-01);
}
.clsVcDataSet
{
	font-family: var(--F1);
	font-size: var(--BODY-S);
	font-weight: normal;
	font-style: normal;
	padding: 5px;
	min-width: 200px;
}
.clsVcDataSetHeader
{
	color: var(--text-01);
}
.clsVcFieldHeading
{
	padding-top: var(--16S);
	padding-bottom: 4px;
	color: var(--text-02);
}
.clsVcFieldMandatoryIndicator
{
	color: var(--support-01);
}
TD.clsVcSlotImg
{
	width: 24px;
}
IMG.clsVcSlotImg
{
 	width: 16px;
 	height: 16px;
}
.clsVcSlotDataBox,
.clsVcSlotDataBoxSecondary
{
 	border: 1px dashed var(--G2);
 	padding: 5px;
	color: var(--text-01);
}
.clsVcSlotDataBoxSecondary
{
 	font-style: italic;
	color: var(--text-03);
	padding-left: 10px;
}
.clsVcSlotDataEmptyInstruction
{
	color: var(--G2);
}
.clsVizEdgesHeader
{
	font-family: var(--F1);
	font-size: var(--BODY-S);
	font-weight: normal;
	font-style: normal;
	color: var(--primary1);
	cursor: default;
	empty-cells: show;
	width: 100%;
	border-collapse: collapse;
}
.clsEmptyPreview
{
	background-color: var(--ui-01);
	border: 1px solid var(--text-03);
	color: var(--text-03);
	font-size: var(--CAPTION);
}
.clsEmptyChartImg,
.clsEmptyVizImg
{
	opacity: 0.3;
}
.clsCustControlDataSet
{
	border: 1px solid var(--text-03);
	padding: 8px;
	margin: 4px;
	display: inline-block;
	background-color: var(--ui-01);
}
.clsVizDataSet
{
	padding: 8px 6px 8px 5px;
	margin: 4px;
	display: inline-block;
	background-color: var(--ui-01);
}
.clsVizFieldTable
{
	height: 24px;
}
.clsVizField
{
	height: 24px;
	vertical-align: middle;
	padding: 0 4px 0 0;
}
.clsVizExtraItem
{
	/* background-color: var(--ui-03); */
}
.clsVizEdgeSeparator
{
	width: 100%;
	height: 1px;
	background-color: var(--G2);
	overflow: hidden;
	font-size: 2pt;
	margin-top: 2px;
}
.clsVizNestingIndicator
{
	vertical-align: top;
	width: 7px;
}
.clsVizFieldHeading
{
	padding-top: 12px;
	padding-bottom: 4px;
	padding-left: 33px;
	color: var(--text-03);
	width: 100%;
}
.clsVizEdgesHeaderText
{
	background-color: var(--ui-01);
	padding-top: 4px;
	border: 0px solid var(--ui-01);
	white-space: nowrap;
}
.clsCustControlDataSetHeader
{
	background-color: var(--ui-03);
	border: 1px solid var(--text-03);
	padding: 2px 4px 2px 4px;
	margin: -9px -9px 4px -9px;
}
.clsVizDataSetHeader
{
	background-color: var(--ui-01);
	border: 1px solid var(--ui-01);
	padding: 2px 10px;
	margin: -9px -9px 4px;
}
.clsVizEdgesHeaderSpacerBefore
{
	border-bottom: 1px solid var(--text-03);
}
IMG.clsContainerSelect11x11
{
	height: 11px;
	width: 11px;
	vertical-align: middle;
}

/*
	A workaround to fix percentage height applied on img tag does not work properly in chrome version 85.0.4183.102
 */
IMG.clsPromptImg_st_m, IMG.clsPromptImg_st_s
{
	min-width: 200px;
	width: 300px;
	min-height: 200px;
	height: 400px
}

IMG.clsPromptImg_tb_s
{
	min-width: 157px;
	min-height: 24px;
}

IMG.clsPromptImg_tb_m
{
	min-width: 402px;
	min-height: 156px;
}

IMG.clsPromptImg_tb_r
{
	min-width: 173px;
	min-height: 101px;
}

IMG.clsPromptImg_tb_mr
{
	min-width: 435px;
	min-height: 156px;
}

IMG.clsPromptImg_sv_s
{
	min-width: 192px;
	min-height: 20px;
}

IMG.clsPromptImg_sv_r
{
	min-width: 205px;
	min-height: 88px;
}

IMG.clsPromptImg_sv_ml
{
	min-width: 148px;
	min-height: 80px;
}

IMG.clsPromptImg_sv_sl,
IMG.clsPromptImg_sv_mc,
IMG.clsPromptImg_sv_sr
{
	min-width: 200px;
	min-height: 80px;
}

IMG.clsPromptImg_sv_mr
{
	min-width: 407px;
	min-height: 160px;
}