/* This is the text editor */
/*@import url("https://cdn.quilljs.com/1.3.5/quill.snow.css");*/

.pp_designer {
	color: initial;
	font-weight: initial;
	font-family: initial;
	letter-spacing: initial;
	font-style: initial;
	font-size: initial;
	line-height: normal;
	z-index: 0; /* Starts a new stacking context, so the toolbar dropdowns are above the widgets */
}

.pp_designer .ui-wrapper {
	overflow: initial !important; /* So we don't hide the draggable handles */
	position: absolute;
}

.pp_border {
	position: absolute;
	
	/* Subtract 2x the border width, unless the box-sizing attribute is set to border-box */
	width: calc(100% - 2px); 
	height: calc(100% - 2px);
	
	border: 1px solid black;
	z-index: 2;
	pointer-events: none;
}

.pp_editing {
}

.pp_viewing {
}

/* Resizable */

.pp_designer .ui-resizable-handle {
	background-color: white;
	border: 1px solid black;
	width: 7px;
	height: 7px;
	z-index: 11000;
}

.pp_designer .ui-resizable-nw {
    left: -5px;
    top: -5px;
}

.pp_designer .ui-resizable-ne {
	top: -5px;
	right: -5px;
}

.pp_designer .ui-resizable-sw {
	bottom: -5px;
	left: -5px;
}

.pp_designer .ui-resizable-se {
	bottom: -5px;
	right:-5px;
}

.pp_designer .ui-resizable-n {
    top: -5px;
    left: 50%;
	margin-left: -5px;
}

.pp_designer .ui-resizable-s {
    bottom: -5px;
    left: 50%;
	margin-left: -5px;
}

.pp_designer .ui-resizable-w {
	left: -5px;
	top: 50%;
	margin-top: -5px;
}

.pp_designer .ui-resizable-e {
	right: -5px;
	top: 50%;
	margin-top: -5px;
}

/* Draggable */

.pp_designer .ui-draggable {
	cursor: move;
}

.pp_designer .ui-draggable.pp_delete_cursor {
	cursor: url("images/delete.png"), move;
}

.pp_designer .ui-draggable.ui-draggable-disabled {
	cursor: initial;
}

/* Selectable */

.pp_designer .ui-selecting { 
	background: #FECA40; 
}

.pp_designer .ui-selected .pp_border { 
	border: 1px solid red;
}

.pp_designer .pp_editing.ui-selected .pp_border { 
	/* border: none; */
}

.pp_designer .pp_content {
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px; /* We didn't have this for the longest time, but shouldn't we stretch the editor to the full width of the widget? */
	
	line-break: after-white-space;
	word-wrap: break-word;
}

.pp_designer .pp_content_text {
	/* We needed a little spacing so the cursor wasn't hidden behind the border. Instead of adding the spacing here, however, let's try increasing the border by a few pixels.
	width: calc(100% - 10px);
	margin: 0px 5px;
	*/

	/* Switching to a wrapping/paragraph approach
	white-space: nowrap;*/
	
	/* Makes it hard to know where to position the actual text, since the top-left is now the bounding box, and not the text box itself */
	/* text-align: center; */
}

.pp_designer .pp_widget_text .pp_border {	
	/* Add some space so the border doesn't cover the blinking cursor in a text box 
	PROBLEM: This makes the overlaid handles and delete button not fit correctly with the border on text boxes 
	padding: 0px 5px;
	margin-left: -5px;
	*/
}

.pp_designer .pp_content_image {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.pp_designer .pp_editing .pp_delete_wrapper {
	display: none;
}

.pp_designer .pp_delete_wrapper {
	position: absolute;
	top: 0;
	right: 0;
	width: 1em;
	height: 1em;
	color: white;
	background-color: black;
	font-size: 1em;
	text-align: center;
	cursor: pointer;
}

/* If uncommented, will hide the border unless widget is hovered over
.pp_designer .ui-resizable-autohide .pp_border {
	border: none;
}
*/

.pp_designer .ui-resizable-autohide .pp_delete_wrapper {
	display: none;
}

.pp_designer .pp_garbage_can {
	display: none;
}

/* Hides the content mode when editing
.pp_designer .pp_editing .pp_content {
	display: none;
}
*/

.pp_designer .pp_editing .pp_edit {
	display: block;
}

.pp_designer  .pp_content_sizer {
	vertical-align: top;
	white-space: pre-wrap;
	word-wrap: break-word;
}

.pp_designer  .pp_content_sizer .pp_text_span {
	/*vertical-align: top;*/
}

.pp_designer  .pp_content_sizer pre {
	margin: 0px;
	padding: 0px;
}
.pp_designer .ui-draggable-dragging,
.pp_widget_template.ui-draggable-dragging {
	opacity: 0.7;
}

/* Editor dialog */
.ui-dialog-titlebar {
    display: none;
}


/* Froala text editor */
/* NOTE: these rules can't have the .pp_designer prefix because they're a floating dialog outside the .pp_designer canvas */

.fr-box.fr-basic .fr-wrapper {
	background-color: initial;
	cursor: text;
}

.fr-box.fr-basic .fr-element.fr-view {
	min-height: unset;
	
	/* We removed the padding on the editor so we could set it on the wrapping content div. That way the padding appears in both edit and non-edit mode. However, occasionally the horizontal scroll-bar would then appear, so hide that as well. */
	padding: 0px;
	overflow-x: hidden;
	
	/* If we use the new line-height option to adjust the line-height to something smaller than 1, sometimes a vertical scrollbar appears. Not sure why, but for now, hide the vertical scrollbar as a solution. */
	overflow-y: hidden;
}

#dropdown-menu-align-1.fr-dropdown-menu li {
	margin-bottom: 10px;
}

#dropdown-menu-align-1.fr-dropdown-menu li:last-child {
	margin-bottom: 5px;
}



.pp_editor_container {
	display: none;
}

/* Rotation */

.pp_rotation_line {
	width: 1px;
	height: 50px;
	margin-top: -50px;
	margin-left: 50%;
	background-color: black;
}

.pp_designer .pp_rotation_handle {
	display: none;
	position: absolute;
	top: -50px;
	left: 50%;
	margin-left: -12px;
	width: 24px;
	height: 24px;
	background-image: url("images/rotate.png");
	background-size: 24px 24px;
	background-color: transparent;
	border: none;
	z-index: 11000;
	cursor: pointer;
}

.pp_hover_extension {
	width: calc(100% + 10px); /* 5px on each side */
	height: calc(100% + 10px); /* 5px on each side */
	margin-left: -5px; /* Shift left so the extension is centered */
	margin-top: -5px; /* Shift up so the extension is centered */
}

#pp_quill_font_size_select {
	z-index: 10000;
}

.pp_quill_toolbar .disabled_quill_button {
	opacity: 0.3;
	cursor: not-allowed;
}

.pp_immutable {
	pointer-events: none;
}
.pp-dsnap--container.pp-dsnap--selected.pp-dsnap--has-image .pp-dsnap--scale-slider {
	display: block;
}
.pp-dsnap--highlight {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background-color: #ffffff;
	opacity: 0.3;
	display: none;
}

.pp-dsnap--container.pp-dsnap--has-image:hover  .pp-dsnap--scale-slider {
	display:block;
}
.pp-dsnap--image.ui-droppable-hover .pp-dsnap--highlight,
.pp-dsnap--image:hover .pp-dsnap--highlight {
	display:block;
	cursor: pointer;
}
.pp-dsnap--image:not(.ui-draggable-dragging):hover .pp-dsnap--cw-icon,
.pp-dsnap--image:not(.ui-draggable-dragging):hover .pp-dsnap--ccw-icon,
.pp-dsnap--image:not(.ui-draggable-dragging):hover .pp-dsnap--change-icon,
.pp-dsnap--image:not(.ui-draggable-dragging):hover .pp-dsnap--delete-icon {
	display:block;
	cursor: pointer;
}

.pp-dsnap--scale-small{
	margin-left: 5px;
	margin-top: 5px;
	font-size: 80%;
	float: left;
}
.pp-dsnap--scale-large{
	margin-right: 5px;
	font-size: 120%;
	float: right;

}
.pp-dsnap--scale-slider {
	background-color: #eee;
	border-radius: 8px;
	border: 1px solid #ddd;
	padding: 5px;
	display: none;
	width: 250px;
	position: absolute;

}

.pp-dsnap--scale-slider input {
	width: 100%;
}

.pp-dsnap--has-image .pp-dsnap--cw-icon,
.pp-dsnap--has-image .pp-dsnap--ccw-icon,
.pp-dsnap--has-image .pp-dsnap--change-icon,
.pp-dsnap--has-image .pp-dsnap--delete-icon {
	font-size: 250%;
	color: #444;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	/*right: 10px;*/
	display: none;
}

.pp-dsnap--change-icon {
	left:33%;

}
.pp-dsnap--delete-icon {
	left: 66%;
}
.pp-dsnap--ccw-icon {
    bottom: 5px;
    left: 10px;
}
.pp-dsnap--cw-icon {
    bottom: 5px;
    right:10px;
}
 .pp-dsnap--cw-icon:hover,
 .pp-dsnap--ccw-icon:hover,

 .pp-dsnap--delete-icon:hover {
	color: red;
	cursor: pointer;
}

.pp-dsnap--change-icon:hover {
	color: var(--green2);
	cursor: pointer;
}

 .pp-dsnap--tooltip {
	 text-align: center;
	 white-space: nowrap;
	 position: fixed;
	 /*top: 10px;*/
	 /*left: 50%;*/
	 transform: translate(-50%);
	 font-size: 125%;
	 background-color: #eee;
	 padding: 5px 10px;
	 border-radius: 8px;
	 box-shadow: 0px 0px 14px -1px rgba(0,0,0,0.75);
 }
 .pp_designer--cursor-default {
	 cursor: default;
 }
 .pp_designer--cursor-color-picker {
 	cursor: url('images/color-picker.png') 0 15, url('images/color-picker.cur') 0 15, crosshair;
 }