#wysiwygbox { overflow: inherit; }
.wysiwyg { display: block; color: black; border: 1px solid #a9a9a9; transition: border 0.2s; }
.wysiwyg:focus-within, .wysiwyg.focus { border-color: Highlight; }
.wysiwyg > [contenteditable=true] ,
.wysiwyg > .contenteditable { display: block;  outline: none; word-wrap: break-word; padding: 0.3rem 0.5rem; overflow: hidden; min-height: 200px; }
.wysiwyg > textarea { display: block; box-sizing: border-box; width: 100%; height: 1.15rem; margin: 0.3rem 0.5rem; padding: 0; border: none; background: transparent none; -webkit-appearance: none; overflow: auto; outline: none; box-shadow: none; resize: none; font-family: inherit; font-size: inherit; line-height: inherit; transition: height 0.3s; }
.wysiwyg > textarea:focus { height: 5rem; }
.wysiwyg > [contenteditable=true] ~ textarea { display: none !important; }
.wysiwyg > [contenteditable=true]:empty:before,
.wysiwyg > .contenteditable:empty:before { content: '\200B'; display: block; opacity: .54; white-space: nowrap; cursor: text; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; pointer-events: none; }
.wysiwyg > [contenteditable=true][data-placeholder]:empty:before ,
.wysiwyg > .contenteditable[data-placeholder]:empty:before { content: " " attr(data-placeholder); }
.wysiwyg > [contenteditable=true] * { display: inline !important; position: static !important; z-index: auto !important; visibility: visible !important; transition: none !important; float: none !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; width: auto !important; min-width: 0 !important; max-width: none !important; height: auto !important; min-height: 0 !important; max-height: none !important; background-image: none !important; margin: 0 !important; border: 0 !important; padding: 0 !important; white-space: normal !important; line-height: inherit !important; font-family: inherit !important; font-size: inherit !important; caret-color: auto !important; cursor: text !important; }
.wysiwyg > [contenteditable=true] main ,
.wysiwyg > [contenteditable=true] aside ,
.wysiwyg > [contenteditable=true] nav ,
.wysiwyg > [contenteditable=true] header ,
.wysiwyg > [contenteditable=true] footer ,
.wysiwyg > [contenteditable=true] article ,
.wysiwyg > [contenteditable=true] section ,
.wysiwyg > [contenteditable=true] blockquote ,
.wysiwyg > [contenteditable=true] div ,
.wysiwyg > [contenteditable=true] p ,
.wysiwyg > [contenteditable=true] pre ,
.wysiwyg > [contenteditable=true] h1 ,
.wysiwyg > [contenteditable=true] h2 ,
.wysiwyg > [contenteditable=true] h3 ,
.wysiwyg > [contenteditable=true] h4 ,
.wysiwyg > [contenteditable=true] h5 ,
.wysiwyg > [contenteditable=true] h6 ,
.wysiwyg > [contenteditable=true] hr ,
.wysiwyg > [contenteditable=true] ul ,
.wysiwyg > [contenteditable=true] ol ,
.wysiwyg > [contenteditable=true] li ,
.wysiwyg > [contenteditable=true] dl ,
.wysiwyg > [contenteditable=true] dt ,
.wysiwyg > [contenteditable=true] dd { display: block !important; }
.wysiwyg > [contenteditable=true] img { max-width: 100% !important; }

/* popup */
.wysiwyg-popup { position: absolute; z-index: 9999; color: black; background: white; background: rgba(255, 255, 255, 0.9); left: -50%; border: 1px solid #a9a9a9; border-radius: 0.2rem; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; max-width: 60%; }
.wysiwyg-popup input { display: block; box-sizing: border-box; width: 100%; margin: 0.3rem 0.5rem; padding: 0; border: none; background: transparent none; -webkit-appearance: none; box-shadow: none; font-family: inherit; }
.wysiwyg-popup .suggestion { display: block; padding: 0.3rem 0.5rem; cursor: pointer; }
.wysiwyg-popup .suggestion:hover , .wysiwyg-popup .suggestion:first-of-type { color: HighlightText; background-color: Highlight; }
.wysiwyg-popup.animate-down { transform-origin: top; animation: transformer 0.2s ease-out 0s 1; }
.wysiwyg-popup.animate-up { transform-origin: bottom; animation: transformer 0.2s ease-out 0s 1; }
.wysiwyg-popup img { margin: 0 5px; display: inline-block; }
.wysiwyg-popup >div font { margin: 10px 5px 0; width: 15px; height: 15px; display: inline-block; border: 1px #ccc solid; border-radius: 2px; }
.wysiwyg-popup >font { margin: 2px; width: 20px; display: inline-block; text-align: center; font-size: 16px; }

@keyframes transformer {
	from { opacity: 0; transform: scale(0.5, 0); }
	to { opacity: 1; transform: scale(1, 1); }
}

/* toolbar */
.wysiwyg .toolbar , .wysiwyg-popup .toolbar { white-space: nowrap; }
.wysiwyg .toolbar * , .wysiwyg-popup .toolbar * { vertical-align: middle; }

.wysiwyg > .toolbar-top { border-bottom: 1px solid #E0E0E0; }
.wysiwyg > .toolbar-bottom { border-top: 1px solid #a9a9a9; }
.wysiwyg > .toolbar-auto { display: flex; overflow: hidden; }
.wysiwyg > .toolbar-auto:after { content: ''; height: 1rem; max-height: 0; transition: height 0.2s, max-height 0s 0.2s; }
.wysiwyg > .toolbar-auto > .toolbar { width: 100%; max-height: 1000000px; margin-bottom: 0; border-top: 1px solid #a9a9a9; transition: margin-bottom 0.2s cubic-bezier(0, 0, 0, 1), border-top-width 0.2s; }
.wysiwyg:not(:focus-within):not(.focus) > [contenteditable="true"]:not(:focus) ~ .toolbar-auto:after { height: 0; max-height: 1rem; transition: height 0.2s;
transition-delay: 0.1s; }
.wysiwyg:not(:focus-within):not(.focus) > [contenteditable="true"]:not(:focus) ~ .toolbar-auto > .toolbar { max-height: 0; margin-bottom: -2000px; border-top-width: 0; transition: margin-bottom 0.2s cubic-bezier(1, 0, 1, 1), max-height 0s 0.2s, border-top-width 0.2s; transition-delay: 0.1s; }

/* IE10+IE11 */
_:-ms-lang(x) , .wysiwyg:not(.focus) > [contenteditable="true"]:not(:focus) ~ .toolbar-auto:after { height: 0; max-height: 1rem; transition: height 0.2s; transition-delay: 0.1s; }
_:-ms-lang(x) , .wysiwyg:not(.focus) > [contenteditable="true"]:not(:focus) ~ .toolbar-auto > .toolbar { max-height: 0; margin-bottom: -2000px; border-top-width: 0; transition: margin-bottom 0.2s cubic-bezier(1, 0, 1, 1), max-height 0s 0.2s, border-top-width 0.2s; transition-delay: 0.1s; }

/* buttons */
.wysiwyg .toolbar ,
.wysiwyg-popup .toolbar { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-direction: normal; -webkit-box-orient: horizontal; -moz-box-direction: normal; -moz-box-orient: horizontal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; -ms-flex-wrap: none; flex-wrap: nowrap; -webkit-box-pack: start; -moz-box-pack: start; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-box-align: start; -moz-box-align: start; -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; -webkit-align-content: flex-start; -ms-flex-line-pack: start; align-content: flex-start; }
.wysiwyg .toolbar * ,
.wysiwyg-popup .toolbar * { display: block; -ms-flex-positive: 0; -webkit-box-flex: 0; -moz-box-flex: 0; -webkit-flex-grow: 0; flex-grow: 0; -ms-flex-negative: 1; -webkit-flex-shrink: 1; -moz-flex-shrink: 1; flex-shrink: 1; -ms-flex-preferred-size: auto; -webkit-flex-basis: auto; flex-basis: auto; min-width: 1px; }
.wysiwyg .toolbar button.btn ,
.wysiwyg-popup .toolbar button.btn { display: block; width: 2.5rem; height: 1.5rem; margin: 0; border: none; padding: 0.3rem 0; color: #4baed2; background: transparent none; text-decoration: none; vertical-align: top; cursor: pointer; outline: none; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; transition: color 0.2s, background 0.2s; box-sizing: content-box; font-size: 16px; }
.wysiwyg .toolbar button.btn:hover ,
.wysiwyg-popup .toolbar button.btn:hover { color: HighlightText; background-color: Highlight; }
.wysiwyg .toolbar button.btn svg ,
.wysiwyg-popup .toolbar button.btn svg { display: block; width: 100%; height: 100%; }