.row
{
	position:relative;
	margin-bottom:var(--grid-margin-row);
	
	display:flex;
	align-items: flex-start;
	flex-wrap:wrap;
	width:100%;
	
	/* border:1px dotted magenta; */
}
.row > *
{
	position:relative;
}


.blocks
{
	display:flex;
	flex-wrap:wrap;
}

.block
{
	position:relative;
	transition:
		background-color .4s linear 0s,
		aspect-ratio .4s var(--curve) 0s;
}

.block:not(.active)
{
	overflow:hidden;
}

/* .block:not(.media):not(.text):not(.color) */
.editing .block.none
{
	background-color:var(--empty);
}

/* 
.block.text
{
	padding:var(--block-text-padding);
}
 */

.media:not(.controls)
{
	background-color:var(--media);
	background-size:cover;
	background-repeat: no-repeat;
}

.block.media:not(.editable) 
{
	background-color:transparent;
}

.block .placeholder
{
	opacity:.3;
	pointer-events:none;
	font-style: normal;
}

.block section
{
	position: relative;
	flex-basis:100%;
}

.block .text-scroll /* TODO check 100% height in Safari */
{
	position:relative;
	left:0;
	top:0;
	width:100%;
	height:100%;
	
	padding:0 var(--block-text-padding);
	
	overflow-y:auto;
	pointer-events:all;

	
}
.block .text-scroll .flex-center > *
{
	width:100%;
}
.block .text-scroll .flex-center,
.block .hover-scroll .flex-center
{
	min-height:100%;
}

.block section a
{
	color:inherit;
	text-decoration:underline;
}

/* 
.block.text .text-scroll section > *
{
	flex-basis: 100%;
}
 */

.block blockquote
{
	font-size:var(--blockquote);
	font-weight:bold;
	line-height: var(--heading-lineheight);
}

/* .page:not(.editing) .block.none, */
.page:not(.editing) .block:not(.editable) .placeholder
{
	display:none;
}
.page:not(.editing) .block.none
{
	visibility:hidden;
}

.block[data-layout="1"]
{
	flex-basis:100%;
}
.block[data-layout="2"]
{
	flex-basis:calc(100% / 2);
}
.block[data-layout="3"]
{
	flex-basis:calc(100% / 3);
}

.profile-header .block,
.block[data-aspect="1:1"]
{
	aspect-ratio:1;
}
.block[data-aspect="3:2"]
{
	aspect-ratio:3/2;
}
.block[data-aspect="16:9"]
{
	aspect-ratio:16/9;
}
.block[data-aspect="2:3"]
{
	aspect-ratio:2/3;
}
.block[data-aspect="9:16"]
{
	aspect-ratio:9/16;
}

/* .block[data-layout="1"].text */
/* .block.text, */
.row.text-only .block.text,
.block[data-layout="1"].text,
.block[data-layout="1"].embed
{
	aspect-ratio:auto;
}

.block[data-layout="1"].text .text-scroll
{
	/* padding:calc(var(--block-text-padding) / 2) var(--block-text-padding); */
	max-width:800px;
	padding:0;
}

.block.text[data-dark="1"]
{
  background-color:var(--dark);
  color:var(--light);
}
.block.text[data-dark="2"]
{
  background-color: var(--orange);
}
.block.text[data-dark="2"] h1,
.block.text[data-dark="2"] h2,
.block.text[data-dark="2"] h3
{
	color:var(--light);
}

.page.editing .block.embed
{
	min-height:28px;
}
.block.embed .embedded
{
	width:100%;
	max-width:800px;
}
.block.embed .embedded iframe[src*=youtube]
{
	width:100% !important;
	height:auto !important;
	aspect-ratio:16/9;
}
.block.embed .embedded > *
{
	margin:auto !important;
}



a.button::after,
a.edit::after
{
	display:block;
	position:absolute;
	left:12px;
	top:0;
	font-size:12px;
	white-space: nowrap;
	transform:translate(-50%,-120%);
	text-transform: uppercase;
}
a.tooltip-below::after
{
	top:28px;
	transform:translate(-50%,0);
}
a[data-tooltip]:not(.disabled):hover::after,
a.tooltip-visible::after,
a.notify::after
{
	content:attr(data-tooltip);
}
a.notify::after
{
	color:var(--red);
}
/* 
.header-menu.member:not(.admin),
.editing .header-menu:not(.member) a,
.editing .header-menu:not(.member) .select,
.editing .create,
.edit.messaging .header-menu.admin
{
	display:none;
}
 */


.block:not(.active) .select-block-type,
.block.active:not(.media) .placeholder,
.block.active:not(.arrange) .guide-text:not(.edit)
{
	display:none;
}

.block a.delete
{
	position:absolute;
	right:3px;
	top:-31px;
	z-index:101;
}

.block > .select
{
	position:absolute;
	left:3px;
	bottom:-31px;
	z-index: 101;
}
.block > .select select
{
	max-width:150px;
}
.editing .editable:not(.active)
{
	cursor:pointer;
}
.editing .editable:not(.active) > *
{
	pointer-events:none;
}
.editing .editable:not(.active):hover::after
{
	content:url(media/edit.svg);
	display:flex;
	justify-content: center;
	align-items: center;
	position:absolute;
	left:0;
	top:0;
	z-index:110;
	width:100%;
	height:100%;
	background-color:var(--edit-bg);
	pointer-events:none;
	opacity:1;
}

a.edit,
input.edit,
.select.edit
{
	color:var(--edit);
}
.editor-menu input[type="text"].edit,
.select.edit select
{
	border-color:var(--edit);
	background-color:var(--light);
}
a.delete
{
	color:var(--delete);
}
a.edit:not(.disabled):hover svg,
a.delete:not(.disabled):hover svg,
a.edit.active svg
{
	color:white;
}
a.edit:not(.disabled):hover .fill,
a.edit.active .fill
{
	fill:var(--edit) !important;
	stroke:var(--edit);
}
a.delete:not(.disabled):hover .fill
{
	fill:var(--delete) !important;
	stroke:var(--delete);
}
a.edit.disabled
{
	opacity:.35;
}
a.edit:not(.active) + input.edit
{
	display:none;
}
a.edit:not(.remove) .remove
{
	display:none;
}

label.toggle
{
	position:relative;
	padding-left:28px;
	height:24px;
	font-size:14px;
	line-height:24px;

	pointer-events:all;
	user-select: none;
	cursor:pointer;
}
label.toggle svg
{
	position:absolute;
	left:0;
	top:6px;
}
label.toggle svg *
{
	transition:
		transform .2s var(--curve) 0s,
		opacity .1s linear 0s;
}

label.toggle:not(.active) svg rect
{
	opacity:.2;
}
label.toggle.active svg circle
{
	transform:translateX(12px)
}

.edit .page-menu-toggle,
.edit .profile-media > div.info
{
	z-index:10;
}
.edit #page-logo
{
	z-index:11; /* keep above other elms */
}

#edit-blur
{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	
	z-index:100;
	
	backdrop-filter:var(--edit-blur);
	-webkit-backdrop-filter:var(--edit-blur);
}

.editable.active,
.row .sort
{
	z-index:1000 !important;
}
.editable.active::after
{
	content:'';
	position:absolute;
	left:0;
	top:0;
	width:calc(100% - 2px);
	height:calc(100% - 2px);
	border:1px solid var(--edit-bg);
	pointer-events:none;
}

.editable.text
{
	white-space: break-spaces;
}

.editable .media-edit
{
	text-align:center;
	width:100%;
	height:100%;
	/* display:none; */
}

.editable input[type="file"]
{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;

	opacity:0;
	pointer-events:none;
}
.page.editing .editable input[type="file"]
{
	pointer-events:all;
}
.editable input[type="file"].minimize
{
	height:0;
}

.editable .controls
{
	display:none;
	position:absolute;
	left:0;
	top:calc(100% + 7px);
	
	width:100%;
	padding:0 3px;

	justify-content: flex-end;
	align-items: center;
	flex-wrap: wrap;
	
	z-index:100;
	
	color:var(--edit);
	font-size:.875rem;
}
.editable .controls.layout
{
	bottom:auto;
	top:-31px;
	justify-content: flex-start;
}
.editable.active .controls
{
	display:flex;
}
.editable .controls a,
.editable .controls label
{
	pointer-events:all;
	margin-left:7px;
}
.editable .controls a:first-child,
.editable .controls label:first-child
{
	margin:0;
}
.editable .controls.colors
{
	justify-content: flex-start;
}
.editable .controls a.color
{
	width:22px;
	height:22px;
	border-radius:50%;
	border:2px solid transparent;
}
.editable .controls a.color:hover,
.editable .controls a.color.active
{
	border-color:var(--edit) !important;
}

.editable.active .media-edit:not(.active)
{
	pointer-events: all;
}

.editable:not(.header-media) .upload-vimeo
{
	display:none;
}


.media-edit .original
{
	position:absolute;
	left:0;
	top:0;
	pointer-events:all;
	cursor:grab;
}
.media-edit .original.dragging
{
	cursor:grabbing;
}
.media-edit .original img
{
	display:block;
	width:100%;
	opacity:.5;
	pointer-events:none;
}

.resize
{
	position:absolute;
	width:10px;
	height:10px;
	border:1px solid var(--edit);
	cursor:nesw-resize;
}
.resize.top
{
	top:-10px;
}
.resize.bottom
{
	bottom:-10px;
}
.resize.left
{
	left:-10px;
}
.resize.right
{
	right:-10px;
}
.resize.top.left,
.resize.bottom.right
{
	cursor:nwse-resize;
}

.editable textarea,
.editable textarea:focus
{
	border:1px solid var(--edit-bg);
	text-align:inherit;
}
.ProseMirror/* .ProseMirror-focused */
{
	width:100%;
	outline:none;
	border:1px solid var(--edit-bg);
	border-radius:5px;
	/* outline:1px solid var(--edit-bg); */
}
.ProseMirror p.is-editor-empty:first-child::before {
	float:left;
  content: attr(data-placeholder);
	width:100%;
  height:0;
	opacity:.3;
  pointer-events: none;
  /* font-style: italic; */
}
.editor-character-count
{
	position:absolute;
	right:7px;
	bottom:-15px;
	font-size:11px;
	color:var(--edit);
	opacity:.5;
	font-family:arial,sans-serif;
	line-height:1.3;
}
h2 .editor-character-count
{
	bottom:-22px;
	color:var(--white);
	opacity:.95;
}

.editor-menu
{
	display:flex;
}
.editor-menu a:not(:first-child)
{
	margin-left:4px;
}
.editor-menu a path.fill
{
	fill:var(--member);
}
.editor-menu a.edit::after
{
	padding:0 4px;
	background-color:var(--light);
}


.editor-menu input.edit
{
	margin:0 0 0 4px;
	height:24px;
	/* width:250px; */
	border-radius:6px;
	padding:0 5px;
	font-size:14px;
	color:var(--edit);
}

.editable.arrange
{
	
}
.editable.arrange .controls,
.editable.arrange .select-block-type,
.editable.arrange .hover
{
	display:none;
}
.row a.sort
{
	position:absolute;
	right:-30px;
	top:3px;
	cursor:grab;
}
.ui-sortable-helper,
.editable.active.ui-sortable-helper
{
	z-index:1001 !important;
	box-shadow:1px 1px 15px rgba(0,0,0,.2);
	transition:none;
}
.block.ui-sortable-handle
{
	cursor:grab;
}
.row.ui-sortable-helper a.sort, 
.block.ui-sortable-helper
{
	cursor:grabbing;
}

input[type="text"].edit
{
	font-size:14px;
	border: 1px solid var(--edit-bg);
}

.flatpickr-monthDropdown-months
{
	display:inline;	
}
.flatpickr-time input[type="number"]
{
	display:inline-block;
	margin:0;
	padding:0;
	border:0;
	border-radius:0;

	appearance: textfield;	
}
.flatpickr-time input[type="number"]:focus
{
	background:rgba(0,6,255,.1);
}

.board
{
	margin-bottom:90px;
	text-align:center;
}
.board .add
{
	position:relative;
	margin:15px 0;
/* 
	display:flex;
	justify-content: center;
 */
}
.board .add.before
{
	margin-top:25px;
}
.page:not(.editing) .board .add,
.board.empty .add.before,
.board.empty:not(.guides) .edit.sortable
{
	display:none;
}
.board .add-select
{
	position:absolute;
	top:0;
	z-index:0;
	/* left:calc(50% - 12px); */
}
.board .add-select:not(.active)
{
	visibility: hidden;
}
.board .add-select a
{
	position:absolute;
	transition:transform .15s var(--curve) 0s;
}
.board .add-select:not(.active) a
{
	transform:none !important;
}