:host {
	position: fixed;
	width: 100%;
	height: 100%;
	overflow:hidden;
	top: 0;
	left: 0;
	pointer-events:none;
	-webkit-user-select:none;
	user-select:none;
	z-index: 9999;

	--editor-overlay-accent-rgb: 0, 100, 225;
	--editor-overlay-accent: rgba(var(--editor-overlay-accent-rgb), 1);
	--editor-overlay-accent-outline: rgba(var(--editor-overlay-accent-rgb), 1);
	--editor-overlay-accent-transparent: rgba(var(--editor-overlay-accent-rgb), 0);	
	--editor-overlay-accent-hover: rgba(var(--editor-overlay-accent-rgb), .4);	
	--editor-overlay-accent-focus: rgba(var(--editor-overlay-accent-rgb), 1);
	--editor-overlay-accent-reverse: rgba(255, 255, 255, 1);
}

:host-context(body.dragging),
:host-context(body.dragging) *{
	cursor: ew-resize;
}

:host(.dark) {
	--editor-overlay-accent-rgb: 0, 122, 255;
}

:host(.selecting), :host(.selecting) * {
	pointer-events:none!important;
}

* {
	box-sizing: border-box;
}

.void-pointer-events, 
.void-pointer-events * {
	pointer-events: none!important;
}

.editor-overlay {
	position: absolute;
	top: 0;
	left: 0;
	transform-origin: 0 0;
	pointer-events:none;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	font-family: var(--fontFamily-default);
}


/** Outlines **/
.editor-outline {
	position: fixed;
	outline-offset: 0px;
	pointer-events: none;
	transform: translate3d(0,0,0);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	outline: 1px dotted var(--editor-overlay-accent-outline);
	display:none;
}

.editor-outline.button-hover {
	display: block;
}

.editor-outline.focus {
	display:block;	
	outline: 1px solid var(--editor-overlay-accent-focus);
}

.ghost-span {
	transition: opacity .15s ease-in-out;
	position: absolute;
	top: 0;
	left: 0;
	will-change: transform, opacity, width;
	height:100%;
	background-color: var(--editor-overlay-accent);
	pointer-events: none;
}

.editor-outline.hover .column-divider {
	background-image: linear-gradient(0deg, transparent 50%, var(--editor-overlay-accent-hover) 50%);	
}

.editor-outline.focus .column-divider {
	background-image: linear-gradient(0deg, transparent 50%, var(--editor-overlay-accent-focus) 50%);	
}

.column-divider-handle:active + .column-divider,
.column-divider-handle:hover + .column-divider {
	/* ignore dark theme */
	/* background-image: linear-gradient(0deg, transparent 50%, rgba(var(--baseColor-accent-rgb), .75) 50%);	 */
	background-image: linear-gradient(0deg, transparent 50%, rgba(var(--editor-overlay-accent-rgb), .75) 50%);	
}

.column-divider {
	position: absolute;
	top: 0;
	left: 0;
	bottom : 0;
	background-size: 100% 8px;
	
	background-repeat: repeat-y;
	width: 1px;
	pointer-events: none;	
	z-index: 1000;	
}

.column-divider-handle {
	position: absolute;
	margin-left: -15px;
	width: 30px;
	cursor: ew-resize;
	height: 100%;
	top: 0;
	bottom: 0;
	z-index: 1001;
	pointer-events: auto;
}


.in-editor-buttons {
	justify-content:flex-end;
	align-items: flex-end;
	text-align: right;
	top: 1px;
	right: 0px;
	margin-top: 0;
	margin-bottom: 1px;
	z-index: 1002;
	pointer-events:none;
	display: flex;
}

.editor-outline.hover .in-editor-buttons {
	display:flex;
}

/** page button **/

.in-editor-buttons.page.hidden,
.in-editor-buttons.page.hidden * {
	visibility: hidden!important;
	pointer-events: none!important;
}

.editor-outline.page-outline {

	opacity: 0;
	display: block;
	/*outline: 1px dotted rgba(170, 170, 170, 0.6);*/
	outline: 1px dotted var(--editor-overlay-accent-outline);
}

.editor-outline.page-outline.button-hover {
	opacity: 1;
}

.in-editor-buttons.page.button-hover {
	opacity: 1;	
}

.in-editor-buttons.page,
.in-editor-buttons.page .pointer-mask,
.in-editor-buttons.page button {
	pointer-events: none;
}

.in-editor-buttons.page.button-hover,
.in-editor-buttons.page.button-hover .pointer-mask,
.in-editor-buttons.page.button-hover button {
	pointer-events:auto;
}

.editor-outline.page-outline.empty {
	outline: 1px dotted rgb(37,175,60);
}

.in-editor-buttons.page {
	right: auto;
	opacity: 0;	
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10003;
	justify-content: flex-start;
	pointer-events: none;	
}

.in-editor-buttons.page button {
	pointer-events:none;
}

.in-editor-buttons.page button.text {
	mix-blend-mode: difference;
	display: flex;
	flex-direction: row;
	background: var(--baseColor-accent-alt1);
	justify-content: center;
	align-items: center;
	white-space: nowrap;
	font-family: var(--fontFamily-default);
	font-size: 11px;
	font-weight: 500;
	color: rgba(0,0,0,.85);
	padding: 2.5px 5px 4px 5px;
	line-height: 1;
	height: 20px;
	outline: 1px solid rgba(0,0,0,.12);
	outline-offset: -1px;
}

.in-editor-buttons.page button.text span {
	/*padding: 2.5px 5px 4px 1px;*/
}

.outer-page-buttons {
	justify-content:flex-start;
	align-items: flex-start;
	text-align: left;
	top: 1px;
	right: 0px;
	margin-top: 0;
	margin-bottom: 1px;
	z-index: 1002;
	/*pointer-events:none;*/
}

button.insert-template-button {
	width: 20px;
	height: 20px;
	appearance: none;
	background: transparent;
	border: 0;
	outline: 0;
	padding: 0;
	cursor: pointer;
	pointer-events: auto;
	transform: translate(-25px, 1px);

}

button.insert-template-button svg .circle {
	fill: rgba(200, 200, 200, 0.85);
}

button.insert-template-button svg .plus {
	fill: #fff;
}

.in-editor-buttons.page button svg {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    width: 20px;
    height: 20px;
    margin: 0 1px;
    display: none;
}
.in-editor-buttons .pointer-mask {
	pointer-events: auto;
	display: inline;
	line-height: 0;
	padding: 5px 5px;
	margin: -5px -5px;
}

.in-editor-buttons.hover.shifted {
	pointer-events:none;
}

.in-editor-buttons.shifted .pointer-mask {
	display:inline-block;
	padding: 2px 0px;
	margin: -2px 0px;
}

.in-editor-buttons.page button svg path {
	fill: rgba(0,0,0,.85);
}

.in-editor-buttons.page button span {
		transform: translate(0, 1px);
	  /*padding: 2.5px 5px 4px 3px;*/
}

.in-editor-buttons button {
	vertical-align: top;
	-webkit-user-select:none;	
	user-select:none;
	background-color: var(--editor-overlay-accent);
	margin: 1px 1px 0 1px;
	border-width: 1px 1px 0 1px;
	padding: 0;
    cursor: pointer;
	color: white;
	width: 20px;
	height: 20px;
	border: none;
	pointer-events: auto;
}

.in-editor-buttons button + button {
	margin-left: 0;
}

.in-editor-buttons button svg {
	display: block;
	width: 20px;
	height: 20px;
}

.in-editor-buttons button.text {
	font-family: var(--fontFamily-default);
	width: auto;
	height: 20px;
	line-height: 1;
	font-size: 11px;
	font-weight: 500;
	cursor: pointer;
	padding: 2.5px 5px 4px;
}

.in-editor-buttons .button-fill {
	fill: white;
	stroke: none;
}

.in-editor-buttons .button-stroke {
	stroke: white;
	stroke-width: 1px;
}

.in-editor-buttons button.disabled {
	pointer-events: none;
}

.in-editor-buttons button.disabled svg {
	opacity: 0.2;
}

/** Digital Clock UI **/

.editor-outline.edit-multiple {
	z-index: 90003;
}

.digital-clock.hover {
	display: flex;
}

.digital-clock.focus button {
	display:none;
}

button.clock-button.small {
	top: -5px;
	left: -5px;
}


button.clock-button {
	white-space: nowrap;
	pointer-events: auto;
	outline: none;
	border: none;
	background: none;
	display: block;
	padding: 0;
	top: 4.5px;
	left: 4.5px;
	position: absolute;
	width: 20px;
	height: 20px;
	z-index: 1002;
}

button.clock-button.multiple {
	background: #fff;
	width: unset;
	color: rgba(0,0,0,.6);
	font-size: 11px;
	padding: 0;
	border-radius: 100px;
	user-select: none;
	font-weight: 500;
	cursor: pointer;
	padding: 2.5px 8px 3.5px;
	font-family: var(--fontFamily-default);
	height: 20px;
	box-shadow: 0px 0px 0px 1px rgba(0,0,0,.25);
	letter-spacing: 0;
}

button.clock-button svg {
	display: block;
	margin: auto;
	top:0;
	right:0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

button.clock-button svg .inner-circle {
	fill: white;	
}

button.clock-button svg .outer-circle {
	stroke: black;
	stroke-opacity: 0.25;	
}

button.clock-button svg .dot {
	opacity: 0.85;
	fill: black;
}


/** Media Figure UI **/

.figure-outline {
	top: 0;
	left: 0;
	user-select:none;
	position: absolute;
	pointer-events:none;
  	z-index: 1001;
}

.cursor-blink {
	background: rgba(0,0,0,0.5);
	width: 2px;
	position: absolute;
	top: 0;
	z-index: 1004;
    animation: blink-animation 1s steps(2, start) infinite;
}

@keyframes blink-animation {

	0% {
  		opacity: 1;
  	}
  	49.99% {
  		opacity: 1;
  	}
  	50% {
  		opacity: 0;
  	}

    100% {
      opacity: 0;
    }
}
 
.media-ghost-container {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	pointer-events:none;
}

.media-ghost {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.media-ghost > * {
	position: absolute;
	object-fit: cover;
	object-position: center center;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	opacity: 0.7;
	display: block;
}

.media-ghost img[data-placeholder] {
    outline:  1px solid rgba(0,0,0,0.3);    
    outline:  1px solid rgba(0,0,0,0.15);    
    background: linear-gradient(to top right, #FDFDFD calc(50% - .75px), #CCC, #FDFDFD calc(50% + .75px));
}


.media-ghost > *:not(img, iframe, video){
	background: rgba(0,0,0,0.3);
}


.media-element-outline {
	top: 0;
	left: 0;

	user-select:none;
	display: flex;
	flex-direction: column;
	position: absolute;
	pointer-events:none;

}

.size-indicator {
	background: var(--editor-overlay-accent);
	font-family: monospace;
	color: white;
	width: 18ch;
	padding: 1ch; 
	font-size: var(--fontSize-small);	
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 1003;
}

.size-indicator span {
	white-space: nowrap;
}

button.media-options-button {
	white-space: nowrap;
	pointer-events: auto;
	outline: none;
	border: none;
	background: none;
	display: block;
	padding: 0;
	top: 8.5px;
	left: 8.5px;
	position: absolute;
	width: 20px;
	height: 20px;
	z-index: 1002;
}

button.media-options-button.multiple {
	background: #fff;
	width: unset;
	color: rgba(0,0,0,.6);
	font-size: 11px;
	padding: 0;
	border-radius: 100px;
	user-select: none;
	font-weight: 500;
	cursor: pointer;
	padding: 2.5px 8px 3.5px;
	font-family: var(--fontFamily-default);
	height: 20px;
	box-shadow: 0px 0px 0px 1px rgba(0,0,0,.25);
	letter-spacing: 0;
}

button.media-options-button svg {
	display: block;
	margin: auto;
	top:0;
	right:0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

button.media-options-button svg .inner-circle {
	fill: white;	
}

button.media-options-button svg .outer-circle {
	stroke: black;
	stroke-opacity: 0.25;	
}

button.media-options-button svg .dot {
	opacity: 0.85;
	fill: black;
}


/* insert content button */

button.insert-content-button {
	pointer-events: auto;
	width: unset;
	font-size: 11px;
	padding: 0;
	user-select: none;
	font-weight: 500;
	cursor: pointer;
	font-family: var(--fontFamily-default);
	height: 20px;
	width: 20px;
	letter-spacing: 0;
	border: none;
	outline: none;
	box-shadow: none;
	background: none;
	margin: 0;
	padding: 0;
/*	mix-blend-mode: difference;*/
}

button.insert-content-button svg {
	display: block;
	top:0;
	right:0;
	bottom: 0;
	left: 0;
	width: 20px;
	height: 20px;
}

button.insert-content-button svg circle {
	fill: none !important;
  stroke-width: 1px;
  stroke-miterlimit: 10;
  stroke: #ABABAB!important;
}

button.insert-content-button svg line {
	fill:none;
	stroke:#ABABAB;
	stroke-miterlimit:10;
	stroke-width: 1px;
}






.editor-overlay button:active {
	opacity: .7;
}


.media-ghost [data-wireframe] {
    background: linear-gradient(to top right, #FDFDFD calc(50% - .75px), rgba(0,0,0,0.3), #FDFDFD calc(50% + .75px));
    position: absolute;
    outline:  1px solid rgba(0,0,0,0.3);
    outline-offset:  -0.5px;
    top:  0;
    left:  0;
    right:  0;
    bottom:  0;
    width:  100%;
    height:  100%;

}    


button.resize-handle {
	cursor: nwse-resize;
	pointer-events:auto;
	background:transparent;
	outline: none;
	border:none;
	display: block;
	top: 0;
	left: 0;
	position: absolute;
	margin-top: 15px;
	margin-left: 15px;
	width: 29px;
	height: 29px;
	z-index: 1002;
}

button.resize-handle button svg {
	display: block;
	margin: auto;
	width: 16px;
	height: 16px;
}

button.resize-handle.ns-resize {
	cursor:ns-resize;
}

button.resize-handle.ns-resize svg {
	transform: rotate(45deg);
}

button.resize-handle.ew-resize {
	cursor:ew-resize;
}

button.resize-handle.ew-resize svg {
	transform: rotate(-45deg);
}

button.resize-handle svg .outline {
	fill: white;
}

button.resize-handle svg .inner {
	fill: black;
}

/** Gallery UI **/

.gallery-outline {
	position: absolute;
	outline-offset: 0px;
	outline: 1px solid var(--editor-overlay-accent-outline);
	pointer-events: none;
	z-index: 1000;
}


/** Freeform UI **/

.drag-wheel {
	background-size: 8px 8px;
	pointer-events: auto;

	width: 20px;
	height: 20px;
	outline: 1px solid var(--editor-overlay-accent);
	outline-offset: -1px;
	z-index: 1001;
}
.drag-wheel.shift {
	background-image: repeating-linear-gradient(90deg, white, white 1px, transparent 1px, transparent);
}

.drag-wheel.zoom {
	background-image: repeating-linear-gradient(white, white 1px, transparent 1px, transparent);
}

.freeform-resize-handle {
	position: absolute;
	width: 27px;
	height: 27px;
	margin: -13.5px auto 0 auto; 
	background: blue;
	left: 0;
	right: 0;
	z-index: 1001;
	pointer-events: auto;
}

.freeform-resize-handle.top {
	top: 0;
}

.freeform-resize-handle.bottom {
	top: 100%;
}

button:hover+.magnetic-range,
.magnetic-range:hover {
	display:block;
}

.magnetic-range {
	display:none;
	pointer-events: auto;
	transform: rotate(-90deg);
	transform-origin: right top;
	position: absolute;
	top: 20px;
	right: 40px;
	height: 40px;
	width: 200px;
	margin: 0;
	padding: 10px;
	outline: 1px solid var(--editor-overlay-accent);
	outline-offset: -10px;
	background: none;
	appearance: none;
}

.magnetic-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  background: var(--editor-overlay-accent);
}

/* All the same stuff for Firefox */
.magnetic-range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: var(--editor-overlay-accent);
}



/** Justify UI **/


.justify-bracket {
	width: 20px;
	cursor: ew-resize;
	border-right: 1px dashed var(--editor-overlay-accent-outline);
	border-top: 1px dashed var(--editor-overlay-accent-outline);
	border-bottom: 1px dashed var(--editor-overlay-accent-outline);	
	position: absolute;
	top: var(--media-item-pad);
	right: var(--media-item-pad);
	bottom: var(--media-item-pad);
	z-index: 9;
	pointer-events: auto;
}

.justify-bracket.row-end {
	cursor: e-resize;
	border-right: 1px solid var(--editor-overlay-accent-outline);
	border-top: 1px solid var(--editor-overlay-accent-outline);
	border-bottom: 1px solid var(--editor-overlay-accent-outline);
}




.tool-tip {
	--tooltip-arrow-size: 6px;
	--tooltip-background: #FFF;
	--tooltip-color: rgba(0,0,0,.85);

	position: absolute;
	display: flex;
	text-align: left;
	line-height: 1.65;
	padding: 1px;
	background: rgba(0,0,0,0.4);
	border-radius: 2px;
	z-index: var(--layer-9);
	pointer-events: none;
}

.tool-tip.figure-sizing {
	min-width: 50px;
	top: 8.5px;
	left: 8.5px;
	background: transparent;
	text-transform: capitalize;
}

.tool-tip.figure-sizing .tooltip-content {
    width: min-content;
}

.tool-tip .tooltip-content {
/*	background: var(--tooltip-background);
	color: var(--tooltip-color);
	font-size: var(--fontSize-small);
	border-radius: 1px;
	padding: 0 4px;
	opacity: .9;
*/

	background: #fff;
	/*width: unset;*/
	color: rgba(0,0,0,.6);
	font-size: 11px;
	padding: 0;
	border-radius: 100px;
	user-select: none;
	font-weight: 500;
	cursor: pointer;
	padding: 2.5px 8px 3.5px;
	font-family: var(--fontFamily-default);
	font-variant-numeric: tabular-nums;
	height: 20px;
	box-shadow: 0px 0px 0px 1px rgba(0,0,0,.25);
	letter-spacing: 0;
	line-height: 1.3;
}

.tool-tip span {
	white-space:nowrap;	
	/*line-height: 1.2;*/
	/*padding: 3px 0px;*/
}

.tool-tip .shortcut {
	margin-left:10px;
}

.tool-tip .shortcut:empty {
	display: none;
}

.tool-tip .right.corner:before {
	height: 0;
	width: 0;
	display: none;
}

.tool-tip .hidden {
	visibility: hidden;
	display: none;
}

.tool-tip .measure {
	visibility: hidden;
	display: flex;
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
}

.tool-tip .visible {
	visibility: visible;
	display: flex;
}