@charset "UTF-8";

/* Config */

/* CSS */

.wysiwyg {

    display: block;

    /* color: black; */
	
	color: rgba(133,135,150,1.00);

    background: none white;

    border: 1px solid #ddd;

    border-radius: 0.2rem;

    transition: border 0.2s;

    /* active: change border */

    /* contenteditable + textarea */

    /* placeholder - ':placeholder-shown' only works with input/textarea */ }

.wysiwyg:focus-within, .wysiwyg.focus {

    border-color: Highlight;
	
	box-shadow: 0 0 0 .2rem rgba(78,115,223,.25); 

}

.wysiwyg > [contenteditable=true],

.wysiwyg > .contenteditable {

    display: block;

    outline: none;

    word-wrap: break-word;

    padding: 0.3rem 0.5rem;

    overflow: hidden; }

.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';

    /* Keep distance */

    display: block;

    /* For Firefox */

    opacity: .54;

    /* https://developer.mozilla.org/de/docs/Web/CSS/%3A%3A-moz-placeholder */

    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);

    /* ZWSP if placeholder empty, IE11 puts caret after placeholder */ }



/* popup - can be placed anywhere in the DOM */

.wysiwyg-popup {

    position: absolute;

    z-index: 9999;

    color: black;

    background: white;

    background: rgba(255, 255, 255, 0.9);

    left: -50%;

    border: 1px solid #ddd;

    border-radius: 0.2rem;

    -webkit-touch-callout: none;

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none; }

.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; }



@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 {

    /* https://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css */ }

.wysiwyg > .toolbar-top {

    border-bottom: 1px solid #ddd; }

.wysiwyg > .toolbar-bottom {

    border-top: 1px solid #ddd; }

.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 #ddd;

    transition: margin-bottom 0.2s cubic-bezier(0, 0, 0, 1), border-top-width 0.2s; }

.wysiwyg:not(:focus-within):not(.focus):not(.focused) > [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):not(.focused) > [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: repeat due :focus-within */

_:-ms-lang(x), .wysiwyg:not(.focus):not(.focused) > [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):not(.focused) > [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.2rem;

    height: 1.2rem;

    margin: 0;

    border: none;

    padding: 0.3rem 0;

    color: #999;

    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; }

.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%; }