body{
	width: 99%;
	height: 100%;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.blinking{
	animation:blinkingText 0.8s infinite;
}
@keyframes blinkingText{
	0%{     color: #f44242;    }
	/*49%{    color: transparent; }*/
	50%{    color: transparent; }
	/*99%{    color:transparent;  }*/
	100%{   color: #f44242;    }
}

.blinkingBorder{
	animation:blinkingBorder 0.8s infinite;
}
@keyframes blinkingBorder{
	0%{     border: 2px solid #f44242;    }
	/*49%{    color: transparent; }*/
	50%{    border: 2px solid lightgray; }
	/*99%{    color:transparent;  }*/
	100%{   border: 2px solid #f44242;    }
}

.blinkingButton{
	animation:blinkingBg 0.8s infinite;
}
/*@keyframes blinkingBg{*/
	/*0%{     background-color: #f8f9fa;    }*/
	/*!*49%{    color: transparent; }*!*/
	/*50%{    background-color: #f8f9fa; }*/
	/*!*99%{    color:transparent;  }*!*/
	/*100%{   background-color: #f8f9fa;    }*/
/*}*/

#leftPanel{
	height: 100%;
	/*background-color: #ededed;*/
	background-color: #ffffff;
	border-right: 1px solid lightgray;
}

#canvasDiv{
	height: 100%;
	/*background-color: lightgray;*/
}

#canvasGridDiv{
	width: 100%;
	height: 99.5%;
}

#leftYAxisDiv, #canvasDiv{
	height: 85%;
}

#bottomXAxisDiv{
	/*height: 15%;*/
	width: 95%;
}
#leftYAxisDiv{
	width: 5%;
}

#canvasDiv{
	width: 95%;
	border: 1px solid lightgray;
}

/*#canvasGridDiv td{*/
	/*border: 1px solid black;*/
/*}*/

#vis{
	width: 100%;
	height: 100%;
	touch-action: none;
}

#xAxisAttrDropdown,#yAxisAttrDropdown, #colorAttrDropdown, #sizeAttrDropdown{
	max-width: 90%;
}

.panelWidgetDiv{
	margin: 5% 5% 5% 7%;
	border: 0.5px solid gray;
	background-color: white;
}

#inputQueryBox{
	margin-left: 10%;
	width: 60%;
	float: left;
	margin-right: 2.5%;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", "FontAwesome";
}

#topRow td{
	padding: 0% 2.5% 0% 2.5%;
}

#speechInputRow{
	margin: 1% 0% 0% 0%;
}

#feedbackRow{
	margin: 1% 0% 1% 10%;
	text-align: left;
	height: 40%;
	/*overflow-y: auto;*/
	width: 62.5%;
}

#activePointCountDiv{
	margin: 1% 0% 1% 0%;
	text-align: left;
	font-weight: bold;
}

#canvasTooltipDiv{
	background-color: black;
	fill-opacity: 50%;
	padding: 1%;
	max-width: 30%;
	max-height: 30%;
	overflow: auto;
}

.commandTipDiv{
	background-color: black;
	fill-opacity: 50%;
	padding: 1%;
	/*max-width: 30%;*/
	max-height: 25%;
	overflow: auto;
	color: white;
}

.commandParam{
	color:mediumaquamarine;
}

.commandTip{
	color:white;
	background-color: black;
}

.commandTipHeader{
	color: gold;
}

#canvasTooltipDiv .tooltipValue{
	color:white;
}
#canvasTooltipDiv .tooltipAttribute{
	color: gold;
}

.node path.glyph{
	fill: steelblue;
	fill-opacity: 0.9;
}

.filteredNode path.filteredNodeGlyph{
	fill: #919191;
	fill-opacity: 0.75;
}

.filteredNode path.filteredNodeGlyph.selected{
	stroke: black;
	stroke-width: 2;
}

.node path.glyph.selected{
	stroke: black;
	stroke-width: 3;
}

.node path.glyph.brushed{
	stroke: black;
	stroke-width: 3;
	stroke-dasharray: 2.5;
}

#yAxisSvg {
	width: 100%;
	height: 100%;
}

#xAxisSvg{
	width: 100%;
	height: 50%;
}

.axis .tick text{
	/*font-size: 14px;*/
	font-size: medium;
	font-weight: bold;
}

#xAxisLabel,#yAxisLabel{
	font-weight: bold;
	/*font-size: 18px;*/
	font-size: x-large;
	fill:gray;
	/*fill-opacity: 0.5;*/
}

#dataSummaryDiv{
	background-color: white;
	overflow-y: auto;
	overflow-x: hidden;
	max-height: 40%;
}

#colorLegendDiv{
	background-color: white;
	overflow-y: auto;
	overflow-x: hidden;
	max-height: 30%;
}

#sizeLegendDiv{
    background-color: white;
    overflow-y: auto;
    overflow-x: hidden;
	max-height: 25%;
}

#filteredItemsDiv{
	background-color: white;
	min-height: 50px;
	padding: .5%;
}

#filteredItemsSvg{
	width: 100%;
	height: 100%;
	border: .25px solid gray;
}

#trashDiv{
}

.swipetrace{
	stroke: gray;
	fill: lightgray;
	stroke-dasharray: 5;
	fill-opacity: 0.5;
	stroke-width: 3;
	stroke-opacity: 0.8;
}

.sizeLegendGlyph{
    fill: steelblue;
    fill-opacity: 0.9;
}

.annotationStroke {
	fill: none;
	stroke-width: 3px;
	stroke-linejoin: round;
	stroke-linecap: round;
}

.recordMic{
	padding-right: 10%;
}

.btn{
	border:1px solid darkgray;
}

.touchMarkingMenuCircle, .penMarkingMenuCircle{
	fill: lightgray;
	stroke:black;
	stroke-width: 1.5;
	fill-opacity: .9;
}

.touchMarkingMenuCircle.inFocus, .penMarkingMenuCircle.inFocus{
	fill: gray;
}

.touchMarkingMenuLabel, .penMarkingMenuLabel{
	font-weight: bold;
}

.touchMarkingMenuOption.faded, .penMarkingMenuOption.faded{
	opacity: .25;
}

.floatingPanelDiv{
	padding: 1%;
	touch-action: none;
	user-select: none;
	top: 0;
	left: 0;
	background-color: white;
	overflow-y: auto;
	overflow-x: hidden;
	max-height: 15%;
	z-index: 1000;
	display: none;
}

.dialogDiv {
	padding: 1%;
	/*width: 15%;*/
	/*height: 100px;*/
	background-color: #f8fafc;
	border: 1px solid black;
	/*border-radius: 50%;*/
	touch-action: none;
	user-select: none;
	position: absolute;
	top: 0;
	left: 0;
	display: none;
}

.notesDiv{
	top: 0;
	left: 0;
	border: 1px solid black;
	background-color: white;
	width: 12.5%;
	height: 10%;
	display: none;
	position: absolute;
	touch-action: none;
	user-select: none;
}

.filteredItemsRow{
	border: 1px solid darkgray;
	border-radius: 5px;
}

.selectRangeSlider{
	/*width: 100%;*/
	/*float: right;*/
}

.feedbackRowParam{
	font-weight: bold;
}

.histogrambar rect {
	fill: rgb(185, 185, 185);
}

.histogrambar text {
	fill: #000000;
	font: 10px sans-serif;
}

.summaryVisDivInfoBar {
	background-color: rgb(185, 185, 185);
	height:100%;
}
.summaryVisDivInfoLabel{
	font-size: 10px;
	width: 100px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	margin-right: 10px;
}
.summaryVisDivInfoValue{
	font-size: 8px;
	margin-left: 2px;
	margin-top: 2px;
}
.summaryVisDivInfoRow {
	display: flex;
	justify-content: start;
	align-content: center;
}

.summaryVis{
	margin: 10px;
	/*width: 350px;*/
	/*height: 150px;*/
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch
}

#attributeSummaryDialogDiv{
	background-color: white;
	max-height: 25%;
	overflow-y: auto;
}

.pointsSummaryDiv {
	padding: 1%;
	/*width: 15%;*/
	/*height: 100px;*/
	background-color: #f8fafc;
	border: 1px solid black;
	/*border-radius: 50%;*/
	touch-action: none;
	user-select: none;
	position: absolute;
	top: 0;
	left: 0;
	display: none;
	overflow-y: auto;
	max-height: 25%;
}

.summaryChartsDiv{
	overflow-y: auto;
}

.pointsSummaryDivDragHandle{
	background-color: lightgray;
	border-radius: 2px;
}

#commandTipDiv table td{
	padding: 0% 1% 0% 1%;
}

.valAmbiguitySlider{
	width: 10%;
	display: inline-block;
	/*float:left;*/
	margin-left: 2%;
}

i.material-icons{
	position: relative;
	top: 0.2em;
	line-height: .5;
	font-size: 18px;
}

#leftPanelUpperHalf{
	height: 53%;
}

#leftPanelLowerHalf{
	height: 35%;
}

#annotationPanelDiv{
	height: 30%;
}

#annotationModeToggleButton{
	width: 100%;
}

.yAxisLabel_subset{
	font-weight: bold;
	/*font-size: x-large;*/
	fill:gray;
}

.xAxisLabel_subset{
	font-weight: bold;
	/*font-size: x-large;*/
	fill:gray;
}

.orderAttrLabel_subset{
	font-weight: bold;
	/*font-size: x-large;*/
	fill:gray;
}

.node .nodeLinkIcon{
	display: none;
}

.node.linked .nodeLinkIcon{
	display: block;
}

.node .nodePinIcon{
	display: none;
}

.node.pinned .nodePinIcon{
	display: block;
}

#filteredItemsDiv.dropStatus{
	border: 2px solid red;
}

#selectionCountDisplay{
	/*margin-left: 2%;*/
	margin-top: .5%;
	float: left;
}

.tooltipCloseButton, .pointDetailsButton{
	color: white;
}

.floatingXAxisResizeHandle,.floatingYAxisResizeHandle{
	fill:gray;
	stroke: lightgray;
	fill-opacity: 0.1;
	solid-opacity: 0.2;
	stroke-width: 5px;
}

.floatingYAxisDragBox,.floatingXAxisDragBox{
	fill-opacity: 0;
	/*stroke:maroon;*/
}

.flex-container {
	display: flex;
	flex-wrap: nowrap;
	/*background-color: DodgerBlue;*/
}

#floatingMicDiv{
	/*background-color: lightgray;*/
	fill: none;
	opacity: .75;
	/*width: 50%;*/
	/*height: 10%;*/
	width: 75px;
	height: 75px;
	/*border: 2px solid gray;*/
	/*margin-left: 20%;*/
	position: absolute;
	border-radius: 50%;
	display: none;
	touch-action: none;
	animation: shadow-pulse 1s infinite;
}

@keyframes shadow-pulse
{
	0% {
		box-shadow: 0 0 0 0px rgba(242, 68, 68, 0.2);
	}
	100% {
		box-shadow: 0 0 0 35px rgba(242, 68, 68, 0);
	}
}

#clearColorAttrButton, #clearSizeAttrButton{
	margin-top: 2.5%;
	display: none;
}