body, div, p
{
	margin:0px;
	padding:0px;
	
	-webkit-font-smoothing: antialiased;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, ".SFNSText-Regular", sans-serif;
	
	text-align: left;
	vertical-align: top;
}

body
{
	background-color:#CCCCCC;
	width:100%;
	height:100%;
}

h1, h2, h3, h4, h5
{
	text-transform: uppercase;
	color: #FFFFFF;
	text-shadow: 1.5px 1.5px 2px #666666;
	margin-top: 1.5em;
	margin-bottom: 0.2em;
}

h3, h4, h5
{
	color: #666666;
	text-shadow: none;
}

.listArrow
{
	width: 14px;
	height: 14px;
	cursor: pointer;
}

textarea
{
	display:block;
	margin-bottom: 6px;
}

.checkboxContainer
{
	text-transform: capitalize;
	background-color: #FAFAFA;
	border-radius: 8px 8px 8px 8px;
	font-weight:bold;
	color:#333333;
	font-size:12px;
	text-decoration: none;
	cursor:pointer;
	padding:0px 6px 0px 6px;
	white-space: nowrap;
}

.checkboxContainer:hover
{
	color:#FFFFFF;
	background-color: #333333;
}

#content
{
	position: relative;
	width: 100%;
}

#contentLeft
{
	padding: 20px;
	width: calc(50% - 40px);
}

#contentRight
{
	background-color:#CCCCCC;
	position: fixed;
	right: 0px;
	top: 0px;
	padding: 20px;
	width: calc(50% - 40px);
	height: 100%;
	box-shadow: -2px 0px 6px 2px #55555555;
}

#panelRightHeader
{
	margin-top: 54px;
}

#createPhraseClusterDropTarget
{
	font-weight:bold;
	font-style: italic;
	font-size:12px;
	color:#913699;
	height: 50px;
	display: flex;
	justify-content: center; /* align horizontal */
	align-items: center;	
	text-align: center;
	cursor: pointer;
	
	border-radius: 8px 8px 8px 8px;
	border: 3px dotted #913699;
	margin-right: 8px;
	margin-bottom: 4px;
}

#panelRightContent
{
	height: calc(100% - 188px);
	overflow-y: auto;
	overflow-x: hidden;
	margin: 10px 0 0 0;
}

#phraseClusters
{
	display:block;
	margin-bottom:100px;
}

#templates
{
	display:none;
}

#hiddenCopyToClipboardTextarea
{
	position: absolute;
	top:-9999px;
}

#newLineSeparatedInputContainer
{
	margin-bottom: 16px;
}

#newLineSeparatedInput
{
	width: calc(100% - 5px);
	height:120px;
}

#specialWordsInputContainer
{
	margin-bottom: 16px;
}

#specialWordsInputContainerBox
{
	border-radius: 8px 8px 8px 8px;
	padding: 8px;
	background-color: #d7a154;
	width: calc(100% - 15px);
}

#specialWordsInput
{
	display: block;
	width: calc(100% - 6px);
	margin-bottom: 6px;
}

.functionLink
{
	text-transform: capitalize;
	background-color: #FAFAFA;
	border-radius: 8px 8px 8px 8px;
	font-weight:bold;
	color:#333333;
	font-size:12px;
	text-decoration: none;
	cursor:pointer;
	padding:0px 6px 0px 6px;
}

.functionLink:hover
{
	color:#FFFFFF;
	background-color: #333333;
}

#autoScrollAreaTop
{
	background-color: #FF000000;
	position: fixed;
	z-index: 9999;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 90px;
	display: none;
}

#autoScrollAreaBottom
{
	background-color: #FF000000;
	position: fixed;
	z-index: 9999;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 70px;
	display: none;
}


#autoScrollAreaTopLeft, #autoScrollAreaBottomLeft
{
	display: inline-block;
	width: calc(60% - 10px);	
	height:100%;
}

#autoScrollAreaTopRight, #autoScrollAreaBottomRight
{
	display: inline-block;
	width: calc(40% - 10px);
	height:100%;
}

#subHL
{
	margin-top: 10px;
	margin-bottom: 10px;
}

#description
{
	background-color: #DDDDDD;
	border-radius: 8px 8px 8px 8px;
	color:#333333;
	font-size:12px;
	padding:8px 8px 8px 8px;
}

#loadFileInput
{
	display:none;
}

#wordClustersLists
{
	margin-bottom: 100px;
}

#hiddenItems
{
	display: none;
}

#topControls
{
	background-color: #AAAAAA;
	box-shadow: 0px -2px 6px 2px #55555555;
	position: fixed;
	z-index: 10;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 54px;
	text-align:center;

	-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}

#fileName
{
	font-size: 0.83em;
	font-weight: bold;
	font-style: italic;
	color: #666666;
	text-align:center;
	height: 16px;
	margin: 6px 0 0px 0;
}

.topControlsTitle
{
	text-transform: uppercase;
	font-size: 0.83em;
	font-weight: bold;
	color: #666666;
	text-align:center;
}

#specialWordsControls, #undoRedoControls, #fileControls
{
	display: inline-block;
	text-align:center;
	padding:5px 8px 8px 8px;
}

#ignoreCurrentSpecialWordLinkToggle
{
	display: inline-block;
	width: 220px;
}

/* Tooltip container */
.withTooltip
{
	position: relative;
	display: inline-block;
}

/* Tooltip text */
.withTooltip .tooltip
{
	visibility: hidden;
	width: 130px;
	background-color: #555;
	color: #fff;
	text-transform: capitalize;
	font-weight:bold;
	font-size:10px;
	text-decoration: none;
	text-align: center;
	padding: 5px 0;
	padding-left: 6px;
	padding-right: 6px;
	border-radius: 8px;

	/* Position the tooltip text */
	position: absolute;
	z-index: 1;
	top: 175%; /* 125% */
	left: 50%;
	margin-left: -60px;

	/* Fade in tooltip */
	opacity: 0;
	transition: opacity 0.3s;
}

/* Tooltip arrow */
.withTooltip .tooltip::after 
{
	content: "";
	position: absolute;
	bottom: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: transparent transparent #555 transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.withTooltip:hover .tooltip 
{
	visibility: visible;
	opacity: 1;
}

.lineContainerOriginalLineIndexContainer .tooltip
{
	line-height: 12px;
}

.clustersList
{
	margin-top: 12px;
	display:none;
}

.lineContainer, .clusterContainer, .phraseClusterContainer
{
	position: relative;
	font-weight:bold;
	color:#333333;
	font-size:12px;
	background-color: #DDDDDD;
	border-radius: 8px 8px 8px 8px;
	border: 3px solid #EEEEEE;
	padding-bottom: 8px;
	margin-right: 8px;
	margin-bottom: 4px;
	cursor: pointer;
}

.lineContainer
{
	display: flex;
	padding: 8px;
	line-height: 25px;
	Xcursor: auto;

	-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}

.lineContainerOriginalLineIndexContainer, .phraseClusterPhraseOriginalLineIndexContainer
{
	margin-top: 2px;
	width: 28px;
	flex: 0 0 28px;
	height: 28px;
	background-color: #EEEEEE;
	margin-right: 10px;
	text-align: center;
}

.lineContainerPhrases
{
	margin-top: 4px;
}

.phraseClusterPhraseOriginalLineIndexContainer
{
	background-color: #DDDDDD;
}

.lineContainerOriginalLineIndex, .phraseClusterPhraseOriginalLineIndex
{
	line-height: 28px;
}

.phraseClusterContainer
{
	border-color: #913699;
	pointer-events: auto;
}

.phrase
{
	padding:0px 4px 0px 4px;
	border: 3px solid #EEEEEE;
	cursor: pointer;
}

.phraseSpace
{
	cursor: cell;
	padding-left:1px;
	padding-right:1px;
}

.phraseSplitter
{
	cursor: n-resize;/*col-resize;*/
	padding-left:1px;
	padding-right:1px;
}

.underDraggedClusterItem
{
	border-radius: 8px 8px 8px 8px;
	border: 3px solid #7fd6d2 !important;
}

.underDraggedPhraseClusterItem
{
	border-radius: 8px 8px 8px 8px;
	border: 3px solid #c449cf !important;
}

.clusterHeader, .phraseClusterHeader
{
	position: relative;
	padding: 4px;
	width:100%;
	height: 6px;
	margin-bottom: 16px;
}

.clusterHeaderLeft, .phraseClusterHeaderLeft
{
	position: absolute;
	left:6px;
	width: calc(100% - 90px);
	white-space: nowrap;
	overflow: hidden;
}

.phraseClusterHeaderLeft
{
	width: calc(100% - 180px);
}

.clusterHeaderRight, .phraseClusterHeaderRight
{
	position: absolute;
	top: 12px;
	right:18px;
}

.clusterCounter, .phraseClusterCounter
{
	float:left;

	width:30px;
	height:30px;
	cursor: pointer;
}

.phraseClusterCounter
{
	width:63px;
}

.clusterCounter #circle, .phraseClusterCounter #circle
{
	fill: #EEEEEE;
}

.phraseClusterCounter #circleUniqueLines
{
	fill: #DDDDDD;
	stroke: #EEEEEE;
	stroke-width: 3px;
}

.clusterCounter #text, .phraseClusterCounter #text, .phraseClusterCounter #textUniqueLines
{
	fill:#333333;
	stroke-width: 0px;
}

.clusterTitle, .phraseClusterTitle
{
	cursor: pointer;
	margin: 0px 10px 0px 10px;
	line-height: 2.6em;
}

.clusterSubTitle, .phraseClusterSubTitle
{
	font-weight: normal;
	font-style: italic;
	display:inline-block;
	max-width: 100%;
	white-space : nowrap;
	overflow: hidden;
}

.clusterTitleEditor, .phraseClusterTitleEditor
{
	margin: 6px 10px 0px 10px;
	display:none;
}

.clusterItems, .phraseClusterItems
{
	display:none;
	margin-top: 30px;
	margin-left: 50px;
}

.clusterWord, .phraseClusterPhrase
{
	font-weight: bold;
	color:#333333;
	font-size:12px;
	position: relative;
	border-radius: 8px 8px 8px 8px;
	border: 3px solid #FAFAFA;
	padding: 8px 8px 8px 8px;
	margin-right: 8px;
	margin-bottom: 4px;
	background-color: #EEEEEE;
	min-height:16px;
}

.phraseClusterPhrase
{
	border-radius: 0;
	border-color: #913699;
	display: flex;
}

.clusterContainerDragged, .clusterWordDragged, .phraseDragged, .lineContainerDragged
{
	background-color: #7fd6d2;
}

.clusterWordTitleContainerLeft
{
	position: absolute;
	left:6px;
	width:40%;
}

.clusterWordTitleContainerRight
{
	position: absolute;
	top: 9px;
	right:9px;
	width:40%;
	text-align:right;
}

.phraseClusterPhraseTitleContainerLeft
{
	width: calc(100% - 110px);
	display: flex;
}

.phraseClusterPhraseTitleContainerRight
{
	width: 170px;
	text-align: right;
}

.clusterWordTitle
{
	cursor: pointer;
}

.clusterWordSource
{
	font-weight: normal;
	display: none;
	margin-top: 20px;
}

.clusterWordInSource
{
	padding:0px 4px 0px 4px;
	background-color: #7fd6d2;
}

.phraseClusterPhraseSource
{
	margin-top: 8px;
}

.hasSpecialWordHighlight
{
	border-color: #d7a154;
}

.specialWordHighlight
{
	padding:0px 4px 0px 4px;
	background-color: #d7a154;
}

.currentSpecialWordLinkHighlight
{
	background-color: #eadfce;
	animation: currentSpecialWordLinkHighlightAnimation 0.5s;
}

@keyframes currentSpecialWordLinkHighlightAnimation
{
	0% 		{background-color: #d7a154;}
	100% 	{background-color: #eadfce;}
}

.ignoreSpecialWordLinkHighlight
{
	border-color: #eadfce;
}

.currentPhraseHighlight
{
	background-color: #7fd6d280;
	animation: currentPhraseHighlightAnimation 0.5s;
}

@keyframes currentPhraseHighlightAnimation
{
	0% 		{background-color: #4eb1ac;}
	100% 	{background-color: #7fd6d280;}
}

.phraseInPhraseClusterHighlight
{
	border: 3px solid #913699;
}

.phraseInPhraseClusterRoundHighlight::before
{
	content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 5px;
	border: 3px solid #913699;
	pointer-events: none;
}

