.input, .select{border: none; display: flex;}

.field{margin: 20px 10px;}
.field-p{padding: 20px;}
.field.is-grouped {display: flex; justify-content: flex-start;}
.field.is-grouped > .control {flex-shrink: 0;}
.field.is-grouped > .control:not(:last-child) {margin-bottom: 0; margin-right: 0.75rem;}
.field.is-grouped > .control.is-expanded {flex-grow: 1; flex-shrink: 1;}
.field.is-grouped.is-grouped-centered {justify-content: center;}
.field.is-grouped.is-grouped-right {justify-content: flex-end;}
.field.is-grouped.is-grouped-multiline {flex-wrap: wrap;}
.field.is-grouped.is-grouped-multiline > .control:last-child, .field.is-grouped.is-grouped-multiline > .control:not(:last-child) {margin-bottom: 0.75rem;}
.field.is-grouped.is-grouped-multiline:last-child {margin-bottom: -0.75rem;}
.field.is-grouped.is-grouped-multiline:not(:last-child) {margin-bottom: 0;}

.label{font-weight: 600; padding: 10px;}
.control{margin: 0px 10px; padding: 10px; border: 1px solid lightgray; border-radius: 5px; flex-direction: row;}
.control-checkbox{background-color: #eeeeee; width: 22px; height: 22px; margin: 0px 10px; padding: 0px; border-radius: 13px;}
.control-checkbox:after{content: ""; position: absolute; display: none;}
label:hover .control-checkbox {background-color: #cccccc;}
.control.clear{border: 1px solid transparent;}
.control.danger{border: 1px solid red;}
.control.warning{border: 1px solid orange;}
.control:focus-within{border: 1px solid blue;}
.control .input, .control .select{padding: 0px; flex-grow: 2;}
.control .input:focus{border: 0px;}
.control .input:nth-child(even), .control .select:nth-child(even){margin: 0px 10px;}
.control .select{appearance: none;}
.checkbox{appearance: none;}
.checkbox:checked ~ .control-checkbox{background-color: #47c674;}
.checkbox:checked ~ .control-checkbox:after{display: block;}
.control-checkbox{order: -1}
.control-checkbox:after{left: 8px; top: 4px; width: 4px; height: 8px; border: solid white; border-width: 0 3px 3px 0; transform: rotate(45deg);}

.editor{min-height: 300px; position: relative; margin: 0px 10px; background-color: #f4f4f4; box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.3); border-top: 6px solid #4a4a4a; flex-direction: column;}
.editor-toolbar{flex-direction: row; align-items: center; flex-wrap: wrap;}
.editor-content-area{background-color: white; flex-direction: column; flex-grow: 2; margin-bottom: 10px;}
.editor-toolbar-box{margin: 5px; border-right: 1px solid black; flex-direction: row;}
.editor-toolbar-button, .editor-toolbar-menu{background-color: #f4f4f4; width: 30px; height: 30px; margin-right: 5px; text-align: center; vertical-align: middle;}
.editor-toolbar-button svg, .editor-toolbar-menu svg{width: auto; height: 20px; padding: 5px; border: none;}
.editor-toolbar-button:hover, .editor-toolbar-button.active{background-color: #aaa;}
.editor-toolbar-menu{flex-direction: column; z-index:1;}
.editor-toolbar-menu .editor-toolbar-button{display: none;}
.editor-toolbar-menu:hover .editor-toolbar-button{display: flex; top:6px; width: 200px;}
.visuell-view, .html-view{padding: 10px; flex-grow: 2; outline: none; overflow: hidden; resize: vertical;}
.visuell-view, .visuell-view div{position: relative; display: block; word-wrap: normal;}
.html-view{border: 0px; resize: none;}