.vlCKEditor{
	--ck-color-text: var(--text-color);
	--ck-color-dropdown-panel-background: var(--body-color);
	--ck-color-button-default-hover-background: var(--primary);
	--ck-color-button-on-hover-background: var(--primary);
	--ck-color-button-on-background: var(--primary);
	--ck-color-list-button-hover-background: var(--primary);
	--ck-color-list-button-on-background: var(--body-color);
	--ck-color-list-background: transparent;
}

.ck-rounded-corners .ck.ck-editor__top .ck-sticky-panel .ck-toolbar{
	border: 0;
	border-bottom: 1px solid var(--form-control-border-color);
	background: transparent;
	.ck.ck-dropdown.ck-heading-dropdown .ck-dropdown__button .ck-button__label {
	    max-width: 4rem;
	}
}
.ck-editor__editable_inline{
	min-height: 5.5rem;
	max-height: 80vh;
}
.ck-rounded-corners .ck.ck-editor__main .ck-content{
	border: 0;
	background: transparent;
	ul{
		padding-left: 2rem; 
		list-style: disc outside none;
	}
	ol{
		padding-left: 2rem; 
		list-style: decimal;
	}
	a{
		color: var(--primary);
		cursor: pointer;
	}
	&.ck-editor__editable_inline>:first-child{
		margin-top: var(--form-control-padding-t);
	}
	&.ck-editor__editable_inline>:last-child{
		margin-bottom: var(--form-control-padding-b);
	}
	&.ck-focused{
		border: 0;
		box-shadow: none;	
	}
}

/* Fixing bad CKEditor CSS, bugs */

.ck.ck-toolbar__items>:last-child	{ //fixing stupid tooltip overflowing...
	.ck.ck-tooltip{
		right: 50%;left: initial;
		.ck-tooltip__text{
			right: -40%;left: initial;
		}
	}
}

.ck.ck.ck-balloon-panel{
	z-index: 3000; //for links balloon in editor
}

svg.ck.ck-icon{
	will-change: auto; //fixing svgs appearing above than z-indexes of 1000...
}

//more stupid fixes. This is the tooltip when toolbar too narrow to contain all buttons
.ck.ck-tooltip.ck-tooltip_s{
	right: 0;
}
.ck.ck-tooltip .ck.ck-tooltip__text{
	right: 0; position: absolute;
	left: initial;
}