.main-layout {
    display: flex;
    height: 100%;
}

.intro {
    font-family: 'Arial', sans-serif;
    font-size: 13px;
    color: #404040;
    font-weight: normal;
}

.dropdown {
    font-family: 'Arial', sans-serif;
    font-size: 12px;
    color: #404040;
    font-weight: normal;
    border: solid .5px #7F7F7F;
}

.start-rule {
    border: solid .5px #7F7F7F;
    font-family: 'Inconsolata', 'Menlo', monospace;
    font-size: 12px;
    color: #404040;
    padding: 3px;
    white-space: pre-wrap;
    overflow: auto;
}

.editor:focus {
    outline: none;
}

.ace_editor { /* grammar and input editors */
    border: solid .5px #7F7F7F;
    height: 100%;
    min-width: 300px;
    min-height:120px;
    font-family: 'Inconsolata', 'Menlo', monospace;
    font-size: 12px;
}

.drag-over {
    border: #94B6EB .5px dashed !important;
}

.drag-over::after {
    position: absolute;
    text-align: center;
    width: 100%;
    content: "Drop file here";
    font-family: 'Arial', sans-serif;
    font-size: 24pt;
    color: #94B6EB;
    font-weight: normal;
}

.lexical_error_class {
    position: absolute;
    /*background-color: #D72D26;*/
    background-color: #9A2E06;
    opacity: .3;
}

.syntax_error_class {
    position: absolute;
    /*background-color: #D72D26;*/
    background-color: #9A2E06;
    opacity: .3;
}

.token_range_class {
    position: absolute;
    border-bottom: 2px solid grey;
}

.ace_gutter-cell {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background-color: white;
    padding-left: 1px;
    padding-right: 0px;
    font-size: 9px;
    color: #8C8C8C;
}

.ace_gutter-cell.ace_error {
    background-image: none;
    color: black;
    border: .5px solid red;
    transform: translateY(-7%);
}

.ace_gutter-layer {
    background-color: white;
    position: relative;
    width: auto;
    text-align: right;
    pointer-events: auto;
    height: 1000000px;
    contain: style size layout;
}

.tabs-header {
    font-family: 'Arial', sans-serif;
    font-size: 13px;
    color: #404040;
    font-weight: normal;
    padding-bottom: .5em;
}

.chunk-header {
    font-family: 'Arial', sans-serif;
    font-size: 13px;
    color: #404040;
    font-weight: normal;
    padding-bottom: .5em;
}

.tabs-header-selected {
    /*text-decoration: underline;*/
    border-bottom: 1.5px solid dodgerblue;
}

.tab-header:hover {
    /*font-weight: bold;*/
    background-color: #F8F6F5;
    cursor: pointer;
}

.console {
    border: solid .5px #7F7F7F;
    font-family: 'Inconsolata', 'Menlo', monospace;
    font-size: 12px;
    color: #404040;
    padding: 3px;
    overflow: auto;
    padding-inline-start: 0;
}

.error {
    color: #905857;
}

/*.mytooltip {*/
/*    font-size:14px;*/
/*    !*height:8px;*!*/
/*    padding: 2px;*/
/*    padding-left: 4px;*/
/*    padding-right: 4px;*/
/*    !*width:80px;*!*/
/*}*/

/*.ui-tooltip {*/
/*    white-space: pre-line;*/
/*}*/

/*.ui-tabs-nav {*/
/*    background: transparent;*/
/*    border-width: 0px 0px 1px 0px;*/
/*    -moz-border-radius: 0px;*/
/*    -webkit-border-radius: 0px;*/
/*    border-radius: 0px;*/
/*}*/

/*.ui-tabs-panel {*/
/*    margin: 0em 0.2em 0.2em 0.2em;*/
/*}*/


ul, #treeUL {
    list-style-type: none;
}

#treeUL {
    margin: 0;
    padding: 0;
    overflow: auto;
    max-height: 15em;
    border: solid .5px #7F7F7F;
}

.tree-root {
    cursor: pointer;
    -webkit-user-select: none; /* Safari 3.1+ */
    -moz-user-select: none; /* Firefox 2+ */
    -ms-user-select: none; /* IE 10+ */
    user-select: none;
    font-size: 12px;
    font-family: 'Inconsolata', 'Menlo', monospace;
}

.tree-root::before {
    content: "\232A";
    font-size: 12px;
    color: darkgray;
    display: inline-block;
    margin-right: 1px;
}

.expanded-tree::before {
    content: "\FE40";
    /*position: relative;*/
    /*top: 5px;*/
    font-size: 12px;
    color: darkgray;
}

.tree-token {
    font-size: 12px;
    font-family: 'Inconsolata', 'Menlo', monospace;
}

.nested {
    display: none;
}

.active {
    display: block;
}

.profile-table {
    border-collapse: collapse;
    /*header: 0.5px solid;*/
    font-size: 12px;
    color: #323942;
    font-family: Arial, sans-serif;
    text-align: right;
    /*padding-right: 5px;*/
    /*column-gap: 5px;*/
    /*column-gap: 5px;*/
}

.profile-table table {
    table-layout: fixed;
}

.profile-table tbody tr:nth-child(odd) {
    background-color: #eee;
}

.profile-table th {
    color: black;
    /*width: 30px;*/
    /*font-weight: 400;*/
    /*font-size: 12px;*/
    /*font-weight: bold;*/
    padding-bottom: 0.25rem;
    width: 14%;
}

.profile-table td {
    /*padding-left: 30px;*/
    width: 14%;
}

/* base button properties */
[class*="-button"] {
    appearance: none;
    border: 1px solid rgba(27, 31, 35, .15);
    border-radius: 2px;
    box-shadow: rgba(27, 31, 35, .1) 0 1px 0;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    font-family: 'Arial', sans-serif;
    font-size: 13px;
    line-height: 17px;
    /*padding: 6px 16px;*/
    position: relative;
    text-align: center;
    text-decoration: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    vertical-align: middle;
    white-space: nowrap;
}

.run-button {
    background-color: #2ea44f;
    color: #fff;
}

.profile-button {
    background-color: #eeeeee;
}