/* code mirror positionned as an overlay above text*/

.CodeMirror {
	position:absolute!important;
	top:0; left: -9999px;
	z-index: 7;
	outline: 1px solid rgb(77,144,254);
}

i.fa {cursor: default;}


button, input[type=button], input[type=submit], .dropdown > button {
	display: inline-block;
	border: 1px solid #aaa;
	padding: 0;
	min-width: 22px;
	height: 22px;
	background: none;
	outline: none;
	cursor: pointer;
}
button .fa {cursor: pointer;}


form {margin:0}

input[type=search] {height: 24px; min-width: 250px; border: 1px solid #aaa;}
input[type=submit], input[type=submit] + button {height: 24px;}
input.error {outline: 1px solid red}


.toolbar {
	position: absolute;
	transform: translate(45%,-100px);
	transform-origin: 0 100%;
	/*left: -999px;*/
	background: #eee;
	z-index: 11;
	white-space: nowrap;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}
.toolbar[style] {
	transition: transform 50ms linear;
}

.toolbar > button, .toolbar > fieldset > button, .toolbar .dropdown > button { width: 26px;height: 26px; }
.toolbar > button > i, .toolbar > fieldset > button > i, .toolbar .dropdown > button > i { font-size: 16px; }

.dropdown > button > i { font-size: 13px; }


.toolbar > fieldset {
	margin: 0;
	padding: 0;
	border: none;
	display: inline-block;
}
.toolbar > button, .dropdown > button, .toolbar > fieldset > *, .modal header form > * {
	vertical-align: middle;
}
.toolbar > fieldset[disabled] + button {background-color: #ccc;}
.toolbar > fieldset[disabled] {
	opacity: .5;
}

.toolbar .dropdown > :last-child > li { padding: 4px;}

.toolbar .selected, .dropdown > .selected, .dropdown > ul > .selected { background-color: #ccc;}
.toolbar button:hover:not(.selected) {background-color: #ddd;}

.toolbar fieldset[disabled] .fa-tint {color: rgba(0,0,0,.2)!important;}

.toolbar.xs > fieldset > .dropdown:not(.opts):not(.inline):not(.color):not(.icon-picker),
/*.toolbar.xs > :last-child,*/
.toolbar.xs > fieldset > :nth-last-child(-n+3) {display:none;}


/* .modal > * > .content > header, footer, .. */
.modal {
	position:fixed;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	background:rgba(50,50,50,.5); 
	z-index:15;
	display: flex;
	align-items:center;
	justify-content:center;
	transition: all .3s ease-in-out;
	/*transform: scale(1);*/
	opacity: 1;
}
.modal:not(.active)  {
	visibility: hidden; 
	transition: all .2s ease-in-out;
	/*transform: scale(0);*/
	opacity: 0;
}
.modal > div {
	position: relative;
	background-color: #eee;
	max-height: 100%;
	max-width: 100%;
}

.modal header { 
	margin: 2px;
	display: flex;
	align-items: center;
}

.modal > div > :not(:first-child) {
	max-width: 100%;
	max-height: 100%;
	vertical-align: bottom;
}

@media (min-width: 600px) {
	.modal > div > :not(:first-child) { max-width: 70vw; }
}

.modal > div > i.fa-close {
	position: absolute;
	font-size: 1.5em;
	right: -10px;
	top: -13px;
	color: white;
	cursor: pointer;
}
.modal iframe {
	min-width: 400px;
	min-height: 400px;
	border: none;
}



.tabs > input {position: absolute; left: -999px;}

/*.dropdown > button:hover { background: #e8e8e8; }*/
/*.dropdown.active > button { background: #d6d6d6; }*/
.dropdown h1, .dropdown h2,.dropdown h3,.dropdown p,.dropdown pre,.dropdown blockquote {margin:0;}
.dropdown blockquote {
	border-left: 4px solid #768;
	padding-left: 6px;
}

/*.toolbar .dropdown > button::after,*/
.table-style .dropdown > button::after {
	content: "▾";
	color: #999;
	width: 10px;
}

.dropdown > :last-child > li:hover:not(.selected) {background: #ddd;}

.dropdown.fontsize > :last-child > li {text-align: center; width: 30px;}

.dropdown.fontname > button > i {
	text-overflow: clip;
	max-width: 13.5px;
	white-space: nowrap;
	overflow: hidden;
	margin-top: 4px;
}


.dropdown { position: relative; display: inline-block;}
.dropdown > :last-child {	
	list-style-type: none;
	margin: 0;
	padding:0;
	transition: all 0.15s;
	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
	background-color: #eee;
	min-width: 100%;
	z-index: 10;
	opacity: 0;
	position: absolute;
	visibility: hidden;
	pointer-events: none;
}
.dropdown > button.selected + * {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}
.dropdown > :last-child > li { cursor: pointer; padding: 1px 4px; }

.tabs > .labels {
	display: flex;
	list-style: none;
	padding: 0;
	margin: 0;
}
.tabs > .labels > * {
	height: 1.2em;
	white-space: nowrap;
	cursor: default;
	flex: 1;
	text-align: center;
	position: relative;
	overflow: hidden;
	text-overflow: ellipsis;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
}
/*.tabs > .contents {position: relative;}*/
.tabs > .contents   {
	position: relative;
	list-style-type: none;
	padding: 0;
	margin: 0;
}
.tabs > .contents > li {
	opacity: 0;
	position: absolute;
	top: 0; left: 0;
	visibility: hidden;
	transform: scale(0);
	transition: all .1s;
}
.tabs > :nth-child(1):checked ~ .labels > :nth-child(1),
.tabs > :nth-child(2):checked ~ .labels > :nth-child(2),
.tabs > :nth-child(3):checked ~ .labels > :nth-child(3),
.tabs > :nth-child(4):checked ~ .labels > :nth-child(4) {
	border-bottom: 1px solid blue;
	background-color: #ddd;
} 

.tabs > :nth-child(1):checked ~ .contents > :nth-child(1),
.tabs > :nth-child(2):checked ~ .contents > :nth-child(2),
.tabs > :nth-child(3):checked ~ .contents > :nth-child(3),
.tabs > :nth-child(4):checked ~ .contents > :nth-child(4) {
	visibility: inherit;
	position: relative;
	opacity: 1;
	transform: scale(1);
	transition: all .4s ease-in-out;
}

/* color palette grids */
.palette { 
	left: -28px;
	white-space: normal;
	column-count:3;
	column-gap: 0;
	-moz-column-count:3;
	-moz-column-gap: 0;
} 
.palette > button {
	height:26px;
	width:26px;
	vertical-align: middle;
	position: relative;
}

.palette > button:hover:not(.selected) {border-color: #444;}
.palette > button.selected::after {
	color: rgba(255,255,255,.9);
	content: "\f00c";
	font-family: FontAwesome;
	font-weight: 400;
	position: absolute;
	top: 0; bottom: 0; right: 0; left: 0;
	display: flex; align-items: center; justify-content: center;
}

.toolbar:not(.xs) .color-picker {left: -39px;}
.color-picker .palette > button {width: 34px; height: 34px;}
.color-picker .palette > button.selected::after {font-size: 120%;}
.color-picker .labels { width: 102px;}

/** icon-picker **/
.icon-picker.dropdown > :last-child {
	max-height: 250px;
	width: 270px;
	white-space: normal;
	left: -138px;
	opacity: .8;
}
.toolbar.xs .icon-picker.dropdown > :last-child {left: -42px;}
.icon-picker > .scroll > .fa {
	font-size: 150%;
	margin: 4px;
	cursor: pointer;
	width: 25px;
}

/** table  (picker, tools and resizer) **/
.table-picker-value {text-align: center; font-size: 12px;margin-top: 3px;} 

.table-picker td  {
/*	padding: 1px;*/
	height:15px;
	width: 15px;
	padding: 7px;
	border: 1px solid #dddddd;
	background-color: #f0f0f0;
}
.table-picker td.selected {
	background-color: rgba(30,136,229,0.3);
	border: solid 1px #1e88e5;
}

.table-picker  td.active + td:not(.active) ~ td,
.table-picker tr.active + tr:not(.active) ~ tr {
	display: none;
}

.table-tools {
	position: absolute;
	left: -999px;
	z-index: 10;
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}
.table-tools > * {
	position: absolute;
	pointer-events: auto;
	display: flex; justify-content: center; align-items: center;
}
.table-tools, .image-tools {white-space: nowrap;}
.table-tools > :nth-child(1) { /*rows tools*/
	left: 0; right: 0; top: 0; height: 0;
}
.table-tools > :nth-child(2) { /*cols tools*/
	left: 0; top: 0; bottom: 0; width: 0;
	flex-direction: column;
}
.table-tools > :nth-child(3) { /*merge + edit  buttons*/
	left: 0; right: 0; bottom: 0; height: 0;
}

.table-tools > :nth-child(3) > .dropdown > :last-child {
	box-shadow: none;
	background-color: none;
	transition:none;
}
.table-tools > :nth-child(3) > .dropdown > button {
	min-width: initial;
	height: auto;
	border: none;
}
    
.table-tools > :nth-child(3) > .dropdown > :last-child > :last-child {
	background-color: #eee;
}
.table-tools > :nth-child(3) > .dropdown > :last-child > * {flex:1;}

.table-tools .fa-caret-right,
.table-tools .fa-caret-left {line-height: 12px;}
.table-tools .fa-caret-left {padding-left: 5px;}
.table-tools .fa-caret-right {padding-right: 5px;}
.table-tools .fa-caret-up,
.table-tools .fa-caret-down {line-height: 8px;}
.table-tools .fa-remove {transform: scale(.8);line-height: 12px;}
.table-tools .fa-pencil, .table-tools .fa-compress {font-size: 14px;}

.dropdown.table-style > button, .image-tools .dropdown > button {
	height: 14px;
	border: none;
	width: 14px;
	min-width: auto;
}
.t-s-tabs {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	left: 0;
	right: 0;
	cursor: default;
}
.t-s-tabs > .labels {
	background-color: #eee;
	width: 74px;
}
.t-s-tabs > .contents {box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.t-s-tabs > .contents span {margin: 0 2px; display: inline-block; min-width: 60px;}
.t-s-tabs ul {list-style: none; padding-left: 0;}


.table-resizer {
	position: absolute;
	left: -9999px;
	pointer-events: none;
	z-index: 2;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}
.col-resize {
	cursor: col-resize;
	height: 100%;
	width: 9px;
	margin-left:-4px;
	/*background-color: rgba(0,0,0,.1);*/
}
.row-resize {
	cursor: row-resize;
	width: 100%;
	height: 9px;
	margin-top: -4px;
	/*background-color: rgba(0,0,0,.1);*/
}
.col-resize, .row-resize {position: absolute; pointer-events: auto;}
.col-resize.moving > div, .row-resize.moving > div { opacity: 1; }
.col-resize > div, .row-resize > div { pointer-events: none; opacity: 0;}
.col-resize > div { height:100%;margin-right: 4px; border-right: 1px solid #1e88e5;}
.row-resize > div { width:100%; margin-top: 4px; border-bottom: 1px solid #1e88e5;}


/** image  tools, link tools **/
.image-tools, .link-edit {
	position:absolute;
	z-index: 11;
	left: -999px;
	pointer-events: none;
	user-drag: none; 
	-webkit-user-drag: none;
	-moz-user-drag: none;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}
.image-tools > * {pointer-events: auto;}

.image-tools > :first-child {
	position: absolute;
	left:0; top: 0;
	background-color: rgba(255,255,255,.6);
}
.image-tools.right  > :first-child {right: 0; left:auto;}
.image-tools .dropdown > button { min-width: 17px; height: 17px;} 
.image-tools.right .dropdown > :last-child {right:0;}
.handle { /* small resize handle */
	position: absolute;
	width: 8px;
	height: 8px; 
	background: #1e88e5;
	border-radius: 4px;
}
.handle.se { cursor: se-resize; right: -4px; bottom: -4px;}
.handle.sw { cursor: sw-resize; left: -4px; bottom: -4px;}
.handle.ne { cursor: ne-resize; right: -4px; top: -4px;}
.handle.nw { cursor: nw-resize; left: -4px; top: -4px;}

.link-edit {
	background-color: rgba(200,0,0,.2); /* fake text selection */
}
.link-edit > form {
	position: absolute;
	top: calc(100% + 3px);
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	left:0; right:0;
	pointer-events: auto;
}
.link-edit > form > .row {
	background-color: #eee;
	display: flex;
	align-items: center;
}
.link-edit ul {
	margin: 0;
	padding: 0; 
}
.link-edit ul > * {
	padding-left: 4px;padding-right: 4px;
}
.link-edit .fa-remove {
	margin: 2px;
}
.link-edit label {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 4px 2px 0;
}

.image-picker {
	column-count:6;
	column-gap: 2px;
	-moz-column-count:6;
	-moz-column-gap: 2px;
	text-align: center;
}
@media (max-width: 800px) {
	.image-picker {
		column-count:3;
		-moz-column-count:3;
	}
}
.image-picker > figure { 
	display: inline-block;
	position: relative;
	max-width: 100%;
	min-width: 60px;
	min-height: 60px;
	margin: 2px;
}
.image-picker > figure > div {
	visibility: hidden;
	position: absolute;
	left:0; 
	right:0;
	top:0;
	width: 100%;
	display:flex;
	flex-direction: row-reverse;
	background-color: rgba(255,255,255,0.4);
	z-index: 1;
}

.image-picker input {
	flex: 1; 
	overflow: hidden;
	background-color: transparent;
	border: 0;
}

.image-picker > figure:hover > div {visibility: visible}
.image-picker > figure i.fa {cursor: pointer;}

.image-picker > figure.selected > img {outline: 1px dashed gray;}
.image-picker img {max-width: 100%; min-width: 60px; height: auto;}

.image-picker .remove {position: relative;}
.image-picker .remove:hover > strong {display: block;}
.image-picker .remove:hover ~ * {display: none;}
.image-picker .remove > strong {
	display:none;
	cursor: pointer;
	position: absolute;
	top: 0;
	right: 100%;
	padding-right: 3px;
}
.image-picker i.fa-plus {
	width: 100%;
	height:100px;
	font-size: 4em;
	cursor: pointer;
	display: flex;
	align-items:center;
	justify-content:center;
}
.image-picker .fa-magic {font-size: 14px;margin: 2px 2px 0 0;}

@media (max-width: 350px) {
	.modal header input[type=submit] { display: none; }
}


/**  links suggestions list dropdown  **/
.link-picker {position: relative; flex:1}
.link-picker > input {width: 200px;}
.link-picker > :last-child {
	background-color: #eee;
	position: absolute;
	width: 100%;
	top: 100%;
	white-space: nowrap;
}
.link-picker li:hover {background: #ddd;}
.link-picker li {display: flex;}
.link-picker span {
	text-overflow: ellipsis;
	overflow: hidden;
	max-width: 100%;
}
.link-picker a {
	text-decoration: none;
	font-size: 12px;
	margin: 4;
}

.scroll {overflow-y: auto; overflow-x: hidden;}
.dropdown > .scroll {max-height: 100px;}
.modal > div > .scroll {max-height: 100vh;}

.CodeMirror-vscrollbar::-webkit-scrollbar, 
.scroll::-webkit-scrollbar { width: 5px; }

.CodeMirror-vscrollbar::-webkit-scrollbar-track-piece,
.scroll::-webkit-scrollbar-track-piece { background: #f1f1f1; }

.CodeMirror-vscrollbar::-webkit-scrollbar-thumb, 
.scroll::-webkit-scrollbar-thumb { background: #bcbcbc; border: 1px solid #a8a8a8; }