@import url(https://fonts.googleapis.com/css?family=Roboto);@font-face {
    font-family: mplus-2m-regular;
    src: url(./mplus-2m-regular-sub.woff) format("woff")
}

::-webkit-scrollbar {
    width: 14px;
    height: 14px
}

::-webkit-scrollbar-thumb {
    background-color: #999a;
    box-shadow: 0 0 0 1px rgba(255,255,255,.3)
}

::-webkit-scrollbar-corner {
    background-color: #999a
}

::-webkit-scrollbar-thumb:hover {
    background-color: #aaa
}

::-webkit-scrollbar-track {
    border-left: solid 1px #999a
}

html {
    width: 100%;
    height: 100%;
    --accentColorBg: #ffa500;
    --accentColorText: #111
}

body {
    width: 100%;
    height: 100%;
    margin: 0;
    display: flex;
    overflow: hidden;
    font-family: Roboto
}

* {
    box-sizing: border-box
}

svg {
    display: block
}

img {
    display: block
}

.treePanel {
    background-color: #111;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow-y: auto
}

.treePanel-focus {
    background-color: #2d2d2d
}

.treePanel-title-area {
    display: flex;
    justify-content: space-between
}

.treePanel-title {
    color: #b9d09b;
    margin: 0;
    padding: 3px;
    font-size: 32px;
    text-shadow: 0 1px 2px rgba(0,0,0,.2);
    user-select: none;
    text-align: center;
    font-family: "Segoe UI";
    font-weight: 300;
    letter-spacing: .08rem
}

.treePanel-closeButton {
    width: 2rem;
    font-size: 1rem;
    background-color: #000;
    color: #fff
}

.treePanel-closeButton:hover {
    background-color: #333
}

.treePanel-item {
    display: grid;
    grid-template-columns: 20px 1fr 20px;
    grid-template-rows: 1fr;
    user-select: none;
    font-size: 20px;
    text-shadow: 0 1px 2px rgba(0,0,0,.2);
    background-color: #111;
    color: #aaa;
    white-space: nowrap;
    overflow: hidden
}

.treePanel-itemWithChildren {
    display: grid;
    grid-template-columns: 20px 1fr 20px;
    grid-template-rows: 30px max-content 10px;
    user-select: none;
    font-size: 20px;
    text-shadow: 0 1px 2px rgba(0,0,0,.2);
    background-color: #111;
    color: #aaa;
    white-space: nowrap;
    overflow: hidden
}

.treePanel-item--focus {
    background-color: #2d2d2d;
    color: #ccc
}

.treePanel-item--active {
    background-color: #c9c9c92d;
    color: #ddd
}

.treePanel-item--select {
    background-color: var(--accentColorBg);
    color: #111
}

.treePanel-item-openCloseIcon {
    grid-column: 1/2;
    grid-row: 1/2;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .2))
}

.treePanel-item-content {
    grid-column: 2/3;
    grid-row: 1/2;
    display: flex;
    align-items: center
}

.treePanel-item-content-icon {
    height: 30px;
    flex-shrink: 0;
    padding: 5px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .2))
}

.treePanel-item-option {
    grid-column: 3/4;
    grid-row: 1/2;
    padding: 3px 2px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .2))
}

.treePanel-item-children {
    grid-column: 2/4;
    grid-row: 2/3;
    display: flex;
    flex-direction: column
}

.editorGroupPanel {
    flex-grow: 1;
    background-color: #181818;
    color: #ddd;
    overflow: hidden;
    display: flex;
    user-select: none;
    position: relative
}

.editorGroupPanel-column {
    display: flex;
    flex-direction: column
}

.editorGroupPanel-editor {
    background-color: #181818;
    color: #aaa;
    display: flex;
    flex-direction: column;
    overflow: auto
}

.editorGroupPanel-editor--active {
    background-color: #222;
    color: #ddd
}

.editorGroupPanel-editorTitle {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    height: 40px;
    box-shadow: 0 2px 4px rgba(0,0,0,.4)
}

.editorGroupPanel-editorTitle-text {
    flex-grow: 1;
    font-size: 24px;
    padding: 0 12px;
    line-height: 1.2;
    letter-spacing: .15px
}

.editorGroupPanel-editorTitle-closeIcon {
    width: 40px;
    height: 40px;
    padding: 12px;
    flex-shrink: 0;
    stroke: #ddd;
    cursor: pointer
}

.editorGroupPanel-editorTitle-closeIcon:hover {
    stroke: #000;
    background-color: red
}

.editorGroupPanel-editorTitle-closeIcon:active {
    stroke: #000;
    background-color: #f44336
}

.editorGroupPanel-editorBody {
    overflow: auto;
    flex-grow: 1
}

.editorGroupPanel-openEditorIcon {
    height: 50px;
    width: 50px;
    position: absolute;
    background-color: #111;
    padding: 5px;
    border-radius: .5rem
}

.gutter-vertical {
    width: 2px;
    background-color: #444;
    flex-shrink: 0
}

.gutter-vertical:hover {
    background-color: #666
}

.gutter-vertical::after {
    content: "";
    cursor: ew-resize;
    display: block;
    height: 100%;
    width: 12px;
    position: relative;
    left: -5px;
    z-index: 10
}

.gutter-vertical-active {
    width: 2px;
    flex-shrink: 0
}

.gutter-vertical-active::after {
    content: "";
    cursor: ew-resize;
    display: block;
    height: 100%;
    width: 6px;
    position: relative;
    left: -2px;
    z-index: 10;
    background-color: #fff
}

.gutter-horizontal {
    height: 2px;
    background-color: #444;
    flex-shrink: 0
}

.gutter-horizontal:hover {
    background-color: #666
}

.gutter-horizontal::after {
    content: "";
    cursor: ns-resize;
    display: block;
    width: 100%;
    height: 12px;
    position: relative;
    top: -5px;
    z-index: 10
}

.gutter-horizontal-active {
    height: 2px;
    flex-shrink: 0
}

.gutter-horizontal-active::after {
    content: "";
    cursor: ns-resize;
    display: block;
    width: 100%;
    height: 6px;
    position: relative;
    top: -2px;
    z-index: 10;
    background-color: #fff
}

.commandPalette {
    position: absolute;
    color: #fff;
    background-color: #000;
    width: 35rem;
    padding: 2rem;
    z-index: 2
}

.editor-tab {
    display: grid;
    box-shadow: 0 2px 4px rgba(0,0,0,.4);
    position: relative
}

.editor-tab-item {
    padding: 8px;
    text-align: center;
    border-bottom: transparent solid 2px;
    color: #ccc
}

.editor-tab-item:hover {
    background-color: #111;
    color: #ddd
}

.editor-tab-item-select {
    padding: .5rem;
    text-align: center;
    border-bottom: #4ec9b0 solid 2px;
    color: #eee
}

.editorKeyConfig-keyboard {
    padding: 0 1rem
}

.editorKeyConfig-msgCard {
    width: 100px;
    border: #fff solid 1px
}

.moduleEditor-section {
    padding: 16px 8px;
    display: flex;
    flex-direction: column
}

.moduleEditor-section-active {
    border-left: solid 4px #f09936;
    padding: 16px 8px 16px 4px
}

.moduleEditor-section-title {
    font-size: 16px;
    padding: 0 24px;
    line-height: 1.2;
    font-weight: 400;
    margin: 0;
    letter-spacing: .15px
}

.moduleEditor-defList {
    display: grid;
    gap: 16px;
    flex-direction: column;
    padding: 8px 0 0 0
}

.moduleEditor-defList-addButton {
    padding: .5rem;
    background-color: #444;
    border: none;
    color: #fff;
    box-shadow: 0 3px 5px rgba(0,0,0,.4);
    cursor: pointer
}

.moduleEditor-defList-addButton:hover {
    background-color: #666
}

.moduleEditor-readMe-inputArea {
    padding: 8px 0 0 0
}

.moduleEditor-readMe-container {
    position: relative;
    padding: 16px;
    border-radius: 4px;
    box-shadow: 0 4px 2px 0 rgba(0,0,0,.2);
    background-color: #383838
}

.moduleEditor-readMe-container-active {
    border: solid #f09936 3px;
    padding: 13px
}

.moduleEditor-readMe-measure {
    font-size: 16px;
    font-family: sans-serif;
    overflow-wrap: break-word;
    pointer-events: none;
    white-space: pre-wrap;
    color: transparent
}

.moduleEditor-readMe-textarea {
    overflow-wrap: break-word;
    background-color: transparent;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 16px;
    resize: none;
    color: #ddd;
    font-size: 16px;
    font-family: sans-serif;
    border: none;
    outline: 0
}

.moduleEditor-readMe-textarea-focus {
    padding: 13px
}

.moduleEditor-typeDef {
    display: flex;
    flex-direction: column;
    padding: 8px;
    box-shadow: 0 3px 5px rgba(0,0,0,.4);
    background-color: #383838;
    color: #ddd;
    border-radius: 4px
}

.moduleEditor-typeDef-active {
    border-left: solid 5px #f09936;
    padding: 8px 8px 8px 3px
}

.moduleEditor-partDef {
    display: grid;
    padding: 8px;
    box-shadow: 0 3px 5px rgba(0,0,0,.4);
    background-color: #383838;
    color: #ddd;
    border-radius: 4px;
    grid-template-columns: 1fr 1fr
}

.moduleEditor-partDef-active {
    border-left: solid 5px #f09936;
    padding: 8px 8px 8px 3px
}

.moduleEditor-partDef-defArea {
    display: flex;
    flex-direction: column;
    flex-shrink: 0
}

.moduleEditor-partDef-resultArea {
    display: flex;
    flex-direction: column;
    text-align: right;
    flex-grow: 1
}

.moduleEditor-partDef-resultArea-resultValue {
    font-size: 3rem
}

.moduleEditor-partDef-nameAndType {
    display: flex;
    height: 38px;
    padding: 0;
    font-family: mplus-2m-regular;
    align-items: baseline
}

.moduleEditor-partDef-nameContainer {
    position: relative;
    height: 32px;
    padding: 4px
}

.moduleEditor-partDef-nameText {
    color: #d7ba7d;
    font-size: 20px;
    border-radius: 4px;
    min-width: 32px
}

.moduleEditor-partDef-nameTextNone {
    min-width: 32px;
    background-color: #000;
    color: #666;
    font-size: 16px;
    border-radius: 4px
}

.moduleEditor-partDef-nameTextArea {
    border: solid #ddd 2px;
    height: 32px;
    color: #ddd;
    font-size: 20px;
    border-radius: 4px;
    background-color: #000;
    resize: none
}

.moduleEditor-partDef-typeContainer {
    position: relative;
    height: 32px;
    padding: 4px
}

.moduleEditor-partDef-typeText {
    color: #4ec9b0;
    font-size: 16px;
    border-radius: 4px;
    min-width: 32px
}

.moduleEditor-partDef-typeTextNone {
    min-width: 32px;
    background-color: #000;
    color: #666;
    font-size: 16px;
    border-radius: 4px
}

.moduleEditor-partDef-typeTextArea {
    border: solid #ddd 2px;
    height: 26px;
    color: #ddd;
    font-size: 16px;
    border-radius: 4px;
    background-color: #000;
    resize: none
}

.moduleEditor-partDef-expr {
    display: flex;
    height: 32px;
    align-items: center;
    padding: 4px;
    border-radius: 4px;
    font-family: mplus-2m-regular
}

.moduleEditor-partDef-termOp {
    display: flex
}

.moduleEditor-partDef-term {
    display: flex;
    align-items: center;
    padding: 3px
}

.moduleEditor-partDef-term-active {
    border: solid 3px var(--accentColorBg);
    border-radius: 2px;
    display: flex;
    padding: 0
}

.moduleEditor-partDef-term-edit {
    display: flex;
    align-items: baseline;
    border: solid 2px #ddd;
    color: #4ec9b0;
    font-size: 16px;
    border-radius: 4px;
    min-width: 32px;
    position: relative
}

.moduleEditor-partDef-term-none {
    background-color: #000;
    width: 32px;
    height: 23px;
    border-radius: 2px
}

.moduleEditor-partDef-op {
    display: flex;
    padding: 3px 8px;
    align-items: center
}

.moduleEditor-partDef-op-active {
    border: solid 3px var(--accentColorBg);
    border-radius: 2px;
    padding: 0 5px
}

.moduleEditor-partDef-op-edit {
    display: flex;
    align-items: baseline;
    border: solid 2px #ddd;
    color: #4ec9b0;
    font-size: 16px;
    border-radius: 4px;
    min-width: 32px;
    position: relative
}

.moduleEditor-partDef-caretBox {
    display: block;
    width: 0;
    overflow: visible;
    position: relative
}

.moduleEditor-partDef-caret {
    display: block;
    width: 2px;
    height: 100%;
    left: -1px;
    background: #f09936
}

.moduleEditor-partDef-element-active {
    border: solid 3px var(--accentColorBg);
    padding: 1px
}

.moduleEditor-partDef-suggestion {
    position: absolute;
    top: 38px;
    left: 0;
    background-color: #2d2d2d;
    border: solid 1px #999;
    font-size: 16px;
    width: 220px;
    z-index: 5
}

.moduleEditor-partDef-suggestion-item {
    display: flex;
    align-items: center;
    height: 28px;
    padding: 2px;
    border-bottom: solid #484848 1px
}

.moduleEditor-partDef-suggestion-item-select {
    background-color: var(--accentColorBg)
}

.moduleEditor-partDef-suggestion-item-text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex-grow: 1
}

.moduleEditor-partDef-suggestion-item-text-select {
    color: var(--accentColorText)
}

.moduleEditor-partDef-suggestion-item-subText {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.moduleEditor-partDef-suggestion-item-subText-select {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--accentColorText);
    stroke: var(--accentColorText)
}

.moduleEditor-partDef-suggestion-item-enterIcon {
    color: var(--accentColorText);
    stroke: var(--accentColorText);
    height: 20px
}

.moduleEditor-partDef-hideTextArea {
    width: 40px;
    height: 18px;
    padding: 0;
    border: 0;
    resize: none;
    overflow: hidden
}