html {
    height: 100%;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}
body
{
    height: 100%;
    width: 100%;
    margin: 0;
    font-family: Arial,  Verdana, Helvetica, sans-serif;
    line-height: 1.2;
    font-size: .8rem;
    position: relative;
    box-sizing: border-box;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;      /* prevents selection across pages */
}

.text-view {
    background-color: #eef0ff;
}
.header-title {
    font-family: "Times New Roman", Times, serif;
    font-size: 3em;
    font-weight: bold;
}
.header-subtitle {
    font-family: "Times New Roman", Times, serif;
    font-size: 2em;
    font-weight: bold;
}
#top, #bottom {
    flex: 0 0 auto;
}
#outer {
    height: 100%;
    flex: 1 1 auto;
    display: flex;
    box-sizing: border-box;
    overflow: hidden;
}
/*
 * bar
 */

.bar-top {
    position: relative;
    display: flex;
    box-sizing: border-box;
    overflow: hidden;
}
.bar-horizontal, .bar-vertical {
    position: relative;
    display: flex;
    align-items: stretch;
    flex: 1 1 auto;
    box-sizing: border-box;
}
.bar-horizontal {
    flex-flow: row;
}
.bar-vertical {
    flex-flow: column;
}
.bar-pane, .bar-main {
    border-left: thin solid gray;
    border-top: thin solid gray;
}
.bar-pane {
    flex: 0 0 auto;
    box-sizing: border-box;
}
.bar-horizontal > .bar-pane {
}
.bar-vertical > .bar-pane {
    width: 100%;
}
.bar-main {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    box-sizing: border-box;
}

/*
 * splitter
 */

.splitter-top {
    position: relative;
    display: flex;
    box-sizing: border-box;
    overflow: hidden;
    flex: 1 1 auto;
}
.splitter-hframe, .splitter-vframe {
    position: relative;
    display: flex;
    box-sizing: border-box;
}
.splitter-hframe {
    flex-flow: row;
}
.splitter-vframe {
    flex-flow: column;
}
.splitter-divider {
    flex: 0 0 auto;
    background-color: lightgoldenrodyellow;
}
.splitter-hframe > .splitter-divider {
    width: 6px;
}
.splitter-vframe > .splitter-divider {
    height: 6px;
}
.splitter-hframe > .splitter-divider:hover {
    cursor: ew-resize;
}
.splitter-vframe > .splitter-divider:hover {
    cursor: ns-resize;
}
.splitter-pane {
    position: relative;
    flex: 1 0 0;
    display: flex;
    flex-flow: row;
    min-width: 0;
    outline: thin solid gray;
    box-sizing: border-box;
}
.splitter-hfixed, .splitter-vfixed {
    flex: 0 0 auto;
    background-color: orange;
}
.splitter-highlight {
    display: block;
    position: absolute;
    pointer-events: none;
    box-sizing: border-box;
    border: medium solid red;
    background: rgba(0, 0, 0, 0);
    z-index: 100;
}

/*
 * tab
 */

.tab-container {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}
.tab-z-index {
    z-index: 1;
}
.tab-menu {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    padding-top: .25em;
    background-color: #eeeeee;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
}
.tab-content {
    position: relative;
    flex: 1 1 auto;
    margin: 0;
    box-sizing: border-box;
}
.tab-item {
    display: inline-flex;
    align-items: center;
    position: relative;
    font-weight: bold;
    padding: .25em .25em;
    background-color: #dddddd;
    border: thin solid #bbbbbb;
    color: #666666;
    cursor: default;
    border-top-left-radius: .25em;
    border-top-right-radius: .25em;
    box-sizing: border-box;
    flex: 1 0 auto;
    max-width: 12em;
    width: 0;
}
.tab-item:hover {
    background-color: #f8ffff;
}
.tab-item.active {
    background-color: #ffffff;
    color: #004488;
    min-width: 1.5em;  /* set to width of tab-item-close + tab-item padding */
}
.tab-content-item {
    visibility: hidden;
    position: absolute;
    display: flex;
    align-items: stretch;
    width: 100%;
    height: 100%;
}
.tab-content-item.active {
    visibility: inherit;
}
.tab-item-text {
    flex: 1 0 auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 0;
}
.tab-item-marked:before {
    font: var(--font-fa-solid);
    content: "\00f00c";
}
.tab-highlight {
    height: 100%;
    width: 20%;
    border: medium solid red;
    box-sizing: border-box;
}
.tab-svg {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    display: block;
    position: absolute;
    pointer-events: none;
    box-sizing: border-box;
    z-index: 100;
}
.tab-item-close {
    border-radius: .2em;
    opacity: .5;
    display: none;
    flex: 0 0 auto;
    width: 1em;
    text-align: center;
}
.tab-item-close:before {
    font: var(--font-fa-solid);
    content: "\00f00d";
}
.tab-item-close:hover {
    background: lightcoral;
    opacity: 1;
}
.tab-item.active >.tab-item-close {
    display: inline;
}

.iframe-element {
    position: absolute;
    width: 100%;
    height: 100%;
}
.iframe {
    visibility: hidden;
    position: absolute;
    flex: 1 1 auto;
    border-style: none;
    display: flex;
    overflow: hidden;
}
.iframe.active {
    display: flex;
    visibility: visible;
}

#menu-container {
    background-color: #eeeeee;
    width: 100%;
}
.menubar {
    padding: .5em 0 .5em 0;
    display: inline-block;
    width: 100%;
    background: linear-gradient(#e0e8f0, #d0d8e0);
}
.menubar-item {
    border: thin solid transparent;
    border-radius: .2em;
    margin: .2em;
    padding: .25em;
    box-sizing: border-box;
    cursor: default;
    background-color: transparent;
}
.menubar-item:first-child {
    margin-left: 0;
}
.menubar-item.menubar-item-active {
    border-color: blue;
    background: linear-gradient(#f8fcff, #f0f8ff);
}
.menubar:not(.menubar-active) > .menubar-item:hover {
    border-color: gray;
    background: linear-gradient(#f0f8ff, #e8f0f8);
}

/*
TODO: delete
 */
.ui-menu {
    width: 200px;
}

/*
    Popup menu
 */
.popup {
    position: absolute;
    background-color: #EEE;
    width: max-content;
    max-width: 30em;
    border: thin solid gray;
    box-shadow: .2em .2em .2em 0px #AAA;
    outline: none;
    cursor: default;
    z-index: 100;
    box-sizing: border-box;
}
.popup-item {
    display: flex;
    outline: none;
    box-sizing: border-box;
}
.popup-item.popup-disabled {
    color: gray;
}
.popup-icon {
    padding: 0 .25em;
    width: 1em;
}
.popup-text {
    flex: 1 1 auto;
    padding: 0 .25em;
    min-width: 5em;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.popup-shortcut {
    flex: 1 1 auto;
    padding: 0 .25em;
    min-width: 2em;
    color: darkgray;
    text-align: right;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.popup-divider {
    margin: .2em;
    border-top: thin solid #AAA;
}
.popup-more {
    flex: 0 0 auto;
    padding: 0 .25em;
    text-align: right;
}
.popup-more:before {
    font: var(--font-fa-solid);
    content: "\00f054";
    font-size: .75em;
}
.popup-selected {
    background: linear-gradient(#bbeeff, #99aaee);
    outline: thin solid #88aabb;
}
.popup-check:before {
    font: var(--font-fa-solid);
    content: "\00f00c";
}
.popup-uncheck:before {
    font: var(--font-fa-solid);
    content: "\00f00c";
    visibility: hidden;
}

.headerbar {
    display: flex;
    width: 100%;
    background-color: #eef0ff;
}
.headerbar-tools {
    flex: 0 1 auto;
}
.headerbar-message {
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-align: right;
    text-overflow: ellipsis;
}
.headerbar-message >span{
}

.variant-toolbar {
    display: flex;
    width: 100%;
    background-color: #eef0ff;
    line-height: 1.4;
    height: 1.4em;
}
.variant-toolbar-left {
    flex: 1 1 auto;
    text-align: left;
    white-space: nowrap;
}
.variant-toolbar-right {
    flex: 1 1 auto;
    text-align: right;
    white-space: nowrap;
}

iframe.iframe-dialog {
    display: block;
    position: absolute;
    padding: 0;
    border: 0;
    top: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
}