[id^="html-editor-toolbar"] {
	visibility: hidden;
	position: absolute;
	bottom: 100%;
	width: 97%;
	box-sizing: border-box;
	border-top:1px solid var(--light-gray_2);
	border-left: 1px solid var(--light-gray_2);
	/*border-top-left-radius: 11px;*/
	border-right: 1px solid var(--light-gray_2);
	/*border-top-right-radius: 11px;*/
}


/*overwriting .dx-htmleditor*/
.dx-htmleditor{
	border-color: white;
	border-top:none;
}
.dx-htmleditor-toolbar{
	background-color: white;
}
.html-editor:hover{
	border-color: var(--light-gray_2);
	width:100%;
	/*border-radius: 11px;*/
	border-bottom:1px solid var(--light-gray_2);
	border-left: 1px solid var(--light-gray_2);
	/*border-bottom-left-radius: 11px;*/
	border-top-left-radius: 0px;
	border-right: 1px solid var(--light-gray_2);
	/*border-bottom-right-radius: 11px;*/
	border-top:none;
	border-top-right-radius: 0px;
	/*box-shadow: 0 6px 2px -2px rgba(0,0,0,.1); !*ili box-shadow: 0px 3px 8px rgba(0,0,0,.1);*!*/
}

.dynamicHover{
	border-color: var(--light-gray_2);
	width:100%;
	/*border-radius: 11px;*/
	border-bottom:1px solid var(--light-gray_2);
	border-left: 1px solid var(--light-gray_2);
	/*border-bottom-left-radius: 11px;*/
	border-top-left-radius: 0px;
	border-right: 1px solid var(--light-gray_2);
	/*border-bottom-right-radius: 11px;*/
	border-top-right-radius: 0px;
	border-top:none;
	/*box-shadow: 0 6px 2px -2px rgba(0,0,0,.1); !*ili box-shadow: 0px 3px 8px rgba(0,0,0,.1);*!*/
}

.html-editor:hover + [id^="html-editor-toolbar"],
.html-editor + [id^="html-editor-toolbar"]:hover {
	visibility: visible;
	position: absolute;
	z-index: 12;
	background-color: white;
}
/*if series.length == 0*/
.noVisualizationAvailable{
	background-color: #fbfbfb;
	-webkit-border-radius: 9px;
	-moz-border-radius: 9px;
	border-radius: 9px;
	border: 2px solid #f0f0f1;
	height:400px;
	font-size: 16px;
	color:#a0a3a9;
	font-weight: 500;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.qTextEditorUneditable > [id^="html-editor-toolbar"]
{
    visibility: hidden !important;
} 

.qTextEditorUneditable > .html-editor
{
    border: none;
} 



.visualization-div{
	align-items: center;
	border-color: #f0f0f0;
	width: 121%;
	min-height: 45px;
	max-height:100%;
}
/*instead of this hover which would have border all around visualization row/whole chart, now we only hover its visualization cell div
 here--> visualization-dx-data-header:hover
*/
/*.visualization-div:hover{*/
	/*border-radius: 11px;*/
	/*border: 1px solid;*/
	/*border-color: var(--light-gray_2);*/
/*}*/



.visualization-dx-data-header {
	font-family: var(--source_font);
	height:42px;
	max-height: 42px;
	line-height: 40px;
	background: #E4F0FF 0% 0% no-repeat padding-box;
	opacity: 1;
	display:flex;
	/*text-overflow: ellipsis;*/
	/*overflow: hidden;*/
	/*white-space: nowrap;*/
	cursor:pointer;
	border-radius: 0px;
	border: 1px solid #ddd;

}

.visualization-dx-data-header:hover{
	border: 1px solid #3569c3;
	cursor:pointer;
	/*border-radius: 11px;*/
	/*border: 1px solid;*/
	/*border-color: var(--light-gray_2);*/
}


/*when they hover over text editor or visualization row, show options (three dots)
used in notebook, create new
*/
.showRowBorder{
	border-left: 4px solid white;
	padding-left:7px;
	padding-top: 4px;
	padding-bottom: 11px!important;
}
.showRowBorder:hover{

	border-left: 4px solid var(--quaternary);
	padding-left:7px;
	padding-top: 4px;
	padding-bottom: 11px!important;

}
.showLeftBorder{
	border-left: 4px solid var(--quaternary);

}
.hideLeftBorder{
	border-left: 4px solid white;
}
.noBorder{
 	border:none!important;
 }

/*used in chartSettings for combination chart. disable borders on second tab-panel*/
.dxCustomTabPanel.dx-tab-selected:after {
	border-left: 1px solid #ddd!important;
	border-right: 1px solid #ddd!important;
	border-top: none!important;
}
.dxCustomTabPanel.dx-tabpanel.dx-state-focused .dx-tab:not(.dx-tab-selected):before {
	border-bottom: 1px solid #ddd!important;
}
.dxCustomTabPanel.dx-tabpanel.dx-state-focused .dx-multiview-wrapper {
	border: 1px solid #ddd!important;
}
/*.addNewTextOrViz {*/
	/*color: var(--quaternary);*/
	/*text-align: left;*/
	/*font: normal normal 600 16px/22px "DM Sans", sans-serif;*/
	/*!*letter-spacing: 0.4px;*!*/
	/*text-transform: uppercase;*/
	/*vertical-align: middle;*/
	/*opacity: 1;*/
	/*position: relative;*/
	/*top: 3px;*/
	/*cursor: pointer;*/
	/*transition: transform .3s;*/
	/*padding-left:5px;*/
/*}*/
/*.addNewTextOrViz:hover {*/
	/*transition: 0.1s ease-out;*/
	/*transform: scale(1.1);*/
/*}*/
.showRowOptions .hides{
	visibility: hidden;
	opacity : 0;
	transition:opacity .8s;
}

.showRowOptions:hover .hides{
	opacity : 1;
	transition:opacity .8s;
	visibility: visible;
}

.label_notebook_viz {
	font-size: 20px;
	font-weight: 600;
}

.removeDxDropdownButtonFromSelectBox .dx-texteditor-buttons-container {
	display: none;
}

/*create new notebook, select icons*/
.divSize{
	width: 40px;
	height: 40px;
	/* padding-top:3px; */
	cursor:pointer;
	/* border-radius: 5px; */
	/* border:2px solid #FFFFFF; */
}
/*.divSize:hover{*/
	/*border:1px solid var(--primary)*/
	/*!*border-style: outset;*!*/
	/*!*border-width:1px;*!*/
/*}*/
.divSize.active{
	/*border-style: inset;*/
	/*border-width:1px;*/
	border:2px solid var(--primary)
}

.iconSize{
	width: 36px;
	height: 36px;
	opacity:1;
	cursor:pointer;
}

/*notebook icon colors*/
/*original hex
$scope.iconColors =["#727580","#333747","#742800","#DD9900","#DB0043","#A90C81","#3569C3","#2F10B7","#1C7779","#058400"];
create filter from hex for svg icons:
https://codepen.io/sosuke/pen/Pjoqqp

*/
.iconColor1 {
	filter: invert(54%) sepia(1%) saturate(3434%) hue-rotate(191deg) brightness(84%) contrast(87%);
}
.iconColor2 {
	filter: invert(19%) sepia(24%) saturate(547%) hue-rotate(191deg) brightness(91%) contrast(90%);
}
.iconColor3 {
	filter: invert(14%) sepia(34%) saturate(6906%) hue-rotate(27deg) brightness(96%) contrast(101%);
}
.iconColor4 {
	filter: invert(54%) sepia(88%) saturate(1584%) hue-rotate(12deg) brightness(100%) contrast(101%);
}
.iconColor5 {
	filter: invert(12%) sepia(79%) saturate(7473%) hue-rotate(337deg) brightness(85%) contrast(102%);
}
.iconColor6 {
	filter: invert(13%) sepia(74%) saturate(5901%) hue-rotate(306deg) brightness(78%) contrast(96%);
}
.iconColor7 {
	filter: invert(47%) sepia(10%) saturate(3991%) hue-rotate(180deg) brightness(82%) contrast(95%);
}
.iconColor8 {
	filter: invert(16%) sepia(81%) saturate(3057%) hue-rotate(247deg) brightness(83%) contrast(128%);
}
.iconColor9 {
	filter: invert(31%) sepia(94%) saturate(354%) hue-rotate(132deg) brightness(101%) contrast(90%);
}
.iconColor10 {
	filter: invert(30%) sepia(90%) saturate(1118%) hue-rotate(83deg) brightness(96%) contrast(106%);
}
/* end of notebook icon colors*/

/*notebook viz -define*/
.vizLabel {
color:var(--dashboard-color);
font-size:24px;
font-weight: 600;
}
.vizSubLabel {
color:var(--dashboard-color);
font-size:18px;
font-weight: 600;
}

.removeIcon{
	font-size: 20px;
	color: #727580;
}

/*on notebook text editor we change their defaults for <p> tag when users select heading1,2,3,4 and normal text*/
/*p is normal text and it was 14px, we gave it h5 value of 1.25rem. We increased all other headings by 0.25rem*/
.dx-htmleditor-content p{

	font-size:1.25rem;

}
.dx-htmleditor-content h1{

	font-size:2.75rem;

}
.dx-htmleditor-content h2{

	font-size:2.25rem;

}
.dx-htmleditor-content h3{

	font-size:2rem;

}
.dx-htmleditor-content h4{

	font-size:1.75rem;

}
.dx-htmleditor-content h5{

	font-size:1.5rem;

}

/*show row options hover*/
.rowOption:hover {
	transform: scale(1.5);
	/*font-size:22px;*/
	transition: all 0.6s ease-in-out;
	animation: pulse 8s infinite ease;
}

/*overwriting dx text editor placeholder style*/
.dx-htmleditor-content.ql-blank::before {
	color: rgb(156, 156, 156);
	content: attr(data-placeholder);
	font-size:1.25rem;
	font-style:normal;
	left: 15px;
	pointer-events: none;
	position: absolute;
	right: 15px;
}


.copyIconContainer{
    color: #c2c4c7; 
    font-size: 18px; 
    cursor:pointer
}
.copyIconContainer:hover{
    color: #5f6368; 
}