:root {
    /*  cool: hue > 120 and < 300
        high-key: hue > 30 and < 140
        if the mix is cool and base is high key: 11%
        if the mix is cool and base is low key: 16%
        if the mix is warm and base is high key: 13%
        if the mix is warm and base is low key: 23%
        */

    --color-black: hsl(0, 0%, 10%);
    --color-blackish: hsl(0, 0%, 20%);
    --color-slate: hsl(0, 0%, 30%);
    --color-whiteish: #f2f2f2; /* hsl(0, 0%, 95%);*/
    --color-white: #ffffff;
    --color-grey: #808080; /* hsl(0, 0, 50%); */
    --color-lightgrey: #999999;
    
    --color-accent1: hsl(212, 85%, 50%);
    --color-accent1-darker: hsl(212, 55%, 50%);
    --color-accent1-lighter: hsl(212, 85%, 75%);
    --color-accent1-brighter: hsl(212, 100%, 60%);
    
    --color-accent2: hsl(calc(212 + 180), 85%, 50%);
    --color-accent2-darker: hsl(calc(212 + 180), 55%, 50%);
    --color-accent2-lighter: hsl(calc(212 + 180), 85%, 75%);
    --color-accent2-brighter: hsl(calc(212 + 180), 100%, 60%);
    
    --color-sidebar-bg: #aecfe5;
    --color-sidebar-bg-hover: #e8e8e8;
    --color-sidebar-section: #d8d8d8;
    --color-sidebar-btn-hover: #c8c8c8;
    /* --color-sidebar-bg-right: #f2f2f2; */
    --color-sidebar-bg-tray: #ffffff;
    --color-input-readonly: #c7c7c7;
    --color-ident-bg: #aaaaaa;
    --color-ident-bg-current: #888888;
    --color-ident-hover: #999999;
    --color-ui-row-bg: #f6f6f6;
    --color-ui-row-border: #000000;
    --color-ui-card-border: #101080;
    
    --sb-border-thickness: 2px;
    --sb-border-color: #7F007F;
    --sb-margin-bottom: 2px;

    --color-sb-border: '';


    --color-neutral: #ffffff;
    --color-neutral-alternate: #f8f9fa;
    --color-neutral-alternate2: #d6d6d6;
    --color-contrast: #000000;
    --color-contrast-alternate: #6b6b6b;
    --color-contrast-alternate2: #9c9c9c;
    /*// 'contrast-alternate': '#c0c0c0', // d3, 80 */
    /*// 'contrast-alternate2': '#d3d3d3', */
    --color-primary: #0062cc;
    /*// 'primary-alternate': '', */
    /*// 'accent': '', */
    /*// 'accent-alternate': '', */
    --color-highlight: #b3c9ff;
    /*// 'highlight-alternate': '', */
    /*// highlight is used as background for the contrast color. */
    --color-bad: #ff0000;


    /* base: 212: low-key
    mix: 32: warm
    23% of 32 into 212: 7.36 + 163.24 = 171 */
    /* --color-neutral1: hsl(171; 100%, 50%); */

    /* base: 32: high-key
    mix: 212: cool
    11% of 212 into 32: 23.32 + 28.48 = 51.8 */
    /* --color-neutral2: hsl(51.8, 100%, 50%); */


}

::-webkit-scrollbar {
    /* width: 10px; for vertical scrollbars */
    width: 0.5em;
    /* height: 10px; for horizontal scrollbars */
    height: 0.5em;
}
::-webkit-scrollbar-track {
    /* background: #f1f1f1; */
    background: var(--color-neutral-alternate);
}
::-webkit-scrollbar-thumb {
    /* background: #a3a3a3; */
    background: var(--color-neutral-alternate2);
}
::-webkit-scrollbar-thumb:hover {
    /* background: #888888; */
    background: var(--color-contrast-alternate2);
    /* background: #555555; */
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Roboto Mono';
    src: url('../fonts/RobotoMono-VariableFont_wght.ttf') format('truetype');
}
@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-Medium.ttf') format('truetype');
}

body {
    font-family: 'Open Sans', sans-serif;
    margin: 0;
    padding: 0;
    position: absolute;
    height: 100%;
    width: 100%;
    /* font-size: 10pt; */
    font-size: 9pt;
    /* font-size: 8pt; */
    overflow: hidden;

    /* scrollbar-width: thin; */
    /* background-color: #d6d6d6; */
    background-color: var(--color-neutral);
    color: var(--color-contrast);
    accent-color: var(--color-highlight);
}
h1 {
    font-family: 'Roboto', sans-serif;
}

#w1 {
    /* top: 4em;
    position: absolute; */
    /*width: 100%;
    height: 80%;
    overflow: hidden;
    border: 1px solid var(--color-blackish); */
}
#workspace {
    /* position: relative; */
    background-image: url('../img/bg.svg');
    background-repeat: repeat;
}

div.objGrp {
    /* float: left; */
    /* background-color: var(--color-white); */
    /* border: 2px solid var(--color-accent1-darker); */
    border: 2px solid var(--color-primary);
    /* position: absolute; */ /* add back in for globe */
    /* change to display at position where button was clicked*/
}


.card-fieldlabel {
    color: var(--color-contrast-alternate);
}

.card-fieldinput {
    /* background-color: var(--color-whiteish); */
    background-color: var(--color-neutral-alternate);
}

/* .createObjForm {
    background-color: #aaaaaa;
    border: 2px solid red;
    padding: 10px 5px 10px 5px;
} */
/* div.crudmsg {
    position: fixed;
    top: 20px;
    padding-top: 20px;
    background-color: var(--color-slate);
    color: var(--color-whiteish);
} */
#headerbar {
    top: 0;
    /* position: absolute; */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 30px;
    max-height: 30px;
    font-size: 1.2em;
    /* height: 2em; */
    width: 100%;
    /* padding-left: 1em; */
    /* color: var(--color-blackish); */
    color: var(--color-contrast);
    /* background-color: hsl(0, 0%, 70%); */
    /* background-color: var(--color-sidebar-bg); */
    background-color: var(--color-neutral-alternate);
    margin: 0;

}
#headerbar .sidebarToggleBtn {
    display: flex;
    align-items: center;
    height: 100%;
    padding-left: 1em; /*: 0.1em 1em 0.1em 1em;*/
    padding-right: 1em;
    cursor: pointer;
    /* font-size: 1.2em; */
}

#headerbar .sidebarToggleBtn img {
    padding-right: 0.3em;
}
#headerbar .sidebarToggleBtn:hover {
    /* background-color: var(--color-accent1-darker); */
    background-color: var(--color-primary);
}
#headerbar .headerBarRight {
    /* display: flex; */
    display: flex;
    align-items: center;
    height: 100%;
    /* align-items:  */
}
#headerbar .headerBarRight > div {
    padding-left: 1em;
    padding-right: 1em;
    cursor: pointer;
}
#headerbar .actionbarToggleBtn {
    position: relative;
    display: flex;
    height: 100%;
    align-items: center;
    /* padding: 0.1em 1em 0.1em 1em; */
}
#headerbar .actionbarToggleBtn:hover {
    /* background-color: var(--color-accent1-darker); */
    background-color: var(--color-highlight);
}

#headerbar .preferenceToggleBtn {
    height: 100%;
    display: flex;
    align-items: center;
}
#headerbar .preferenceToggleBtn:hover {
    /* background-color: var(--color-accent1-darker); */
    background-color: var(--color-primary);
}

#headerbar > * {
    margin: 0;
    padding: 0;
    /* float: left; */
}

/* #headerbar > h1, h2, h3, h4, h5, p {
    margin: 0;
    padding: 0;
    float: left;
} */
/* #toolbar {
    position: relative;
    top: 2em;
    height: 2em;
    width: 100%;
    /* background-color: #66c; */
    /* padding: 0px;
    margin: 0px;
    border: 0 */
/*} */
#footerbar {
    position: fixed;
    text-align: right;
    /* float: right; */
    bottom: 0;
    /* clear: both; */
    width: 100%;
    /* color: #fff; */
    /* background-color: #77c; */
}

.footer-flash {
    font-size: 0.7em;
    /* background-color: white; */
    background-color: var(--color-neutral);
    margin-right: 20em;
}

button.topRight {
    float: right;
    /* position: float;
    right: 0; */
}
table {
    /* max-width: 700px; */
    /* background-color: var(--color-white); */
    background-color: var(--color-neutral);
    border-collapse: collapse;
}
table thead {
    font-weight: bold;
    height: 2em;
    /* display: table; */
    /* width: 100%; */
}
/* tbody:not(tr, td) { */
    /* display: grid; */
    /* width: 100%; */
    /* display: block; */
    /* max-height: 600px; */
    /* overflow-x: scroll; */
/* } */
tr {
    height: 30px;
    font-size: 0.9em;
    line-height: 1.2;
    /* color: var(--color-slate); */
    color: var(--color-contrast-alternate);
}
tr.highlight {
    /* background-color: var(--color-sidebar-bg); */
    background-color: var(--color-highlight);
}
tbody tr:hover {
    /* color: var(--color-black); */
    color: var(--color-contrast);
}
table tr {
    /* background-color: var(--color-white); */
    background-color: var(--color-neutral);
}
table tbody tr {
    /* background-color: var(--color-whiteish); */
    background-color: var(--color-neutral);
}
/* th {
    white-space: nowrap;
} */
/* thead th div.colname { */
    /* display: inline-block; */
    /* width: 80%; */
    /* min-width: 30px; */
/* } */
thead th {
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: var(--color-neutral);
    color: var(--color-contrast);
}
thead th tr {
    height: 100%;
}
thead th div.headercontent {
    height: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    /* border: 1px solid lightgrey; */
    border: 1px solid var(--color-neutral-alternate2);
    /* align-items: center; */
    /* box-shadow: 0px 3px 2px slategray; */
}

.widthadjuster {
    height: 100%;
    /* align-self: flex-start; */
    border-right: 2px solid transparent;
    margin: 0 -2px 0 -2px;
    padding: 0.5em 0;
}
.widthadjuster:hover {
    border-right: 2px solid var(--color-primary);
    cursor: col-resize;
}
th div.headermarker-left:hover {
    /* border-left: 2px solid green; */
    border-left: 2px solid var(--color-primary);
    margin: 0;
    padding: 0;
}
th div.headermarker-right:hover {
    /* border-right: 2px solid green; */
    border-right: 2px solid var(--color-primary);
    margin: 0;
    padding: 0;
}
thead th div.colname {
    padding: 0.5em 0.5em 0.5em 0.5em;
    border: none;
    white-space: nowrap;
    text-overflow: ellipsis;
    /* height: 100%; */
    /* margin-top: auto;
    margin-bottom: auto; */
    /* padding-top: auto;
    padding-bottom: auto; */
    /* vertical-align: center; */
}
thead th div.colname[contenteditable="true"]:hover {
    cursor: pointer;
}
thead th div.coltype {
    /* background-color:red; */
    /* display: inline-block; */
    /* height: 100%; */
    align-self: flex-start;
    justify-content: flex-end;
    margin-left: auto;
    white-space: nowrap;
    padding: 0.4em 0.5em 0.4em 0.5em;
    /* text-align: right; */
    /* display: inline-block; */
    font-size: 0.8em;
    /* box-shadow: 2px 3px 4px slategray; */
    box-shadow: 2px 3px 4px var(--color-contrast-alternate);
    border-radius: 0.2em;
}

thead th div.coltype:hover {
    /* background-color:hsl(0, 0%, 50%); */
    /* box-shadow: 2px 3px 4px black; */
    /* box-shadow: 2px 4px 2px slategray; */
    box-shadow: 2px 4px 2px var(--color-contrast-alternate);
    cursor: pointer;
}

table tr:nth-child(even) {
    /* background-color: var(--color-white); */
    background-color: var(--color-neutral-alternate);
}
table tr:nth-child(2) {
    /* font-weight: bold; */
}
td, th {
    padding-left: 0.75em;
    padding-right: 0.75em;
    /* padding: 0; */
    margin: 0;
    /* border-left: 1px solid var(--color-whiteish); */
    border-left: 1px solid var(--color-neutral);
    /* max-width: 200px; */
    text-align: left;
}
td.sid {
    /* color: lightgrey; */
    color: var(--color-contrast-alternate2);
    text-align: center;
    text-decoration: underline;
}
tr:focus {
    outline: none;
}
#sidebar-left {
    position: absolute;
    display: block;
    top: 30px;
    bottom: 0;
    left: 0;
    width: 220px;
    z-index: 999;
    overflow: auto;
    /* IE and Edge */
    /* -ms-overflow-style: none;  */
    /* scrollbar-width: none; */
    /* background-color: hsl(212, 85%, 95%); */
    /* background-color: var(--color-slate); */
    /* background-color: var(--color-sidebar-bg); */
    /* background-color: var(--color-neutral-alternate2); */
    background-color: var(--color-neutral-alternate);
}
#sidebar-left::-webkit-scrollbar {
    display: none;
}
#sidebar-left ul {
    margin: 0;
    display: block;
    padding: 0;
    /* height: 50px; */
    list-style: none;
    text-align: center;
    /* background-color: hsl(212, 85%, 95%); */
}
#sidebar-left ul > li {
    background-color: var(--color-neutral);
    box-shadow: 2px 4px 6px var(--color-neutral-alternate2);
    text-align: right;
    padding-right: 1em;
    /* padding-right: 0.6em; */
    padding-bottom: 0.2em;
    padding-top: 0.2em;
    margin-bottom: 0.2em;

    border-radius: 0.2em;
    /* border: 1px solid var(--color-neutral); */
}

#sidebar-left.search-active ul > li {
    display: none;
}

#sidebar-left.search-active ul > li.search-active {
    display: block;
}


/* .optionsMenu {
    position: fixed;
    bottom: 2em;
    left: 16em;
    z-index: 999;
    background-color: white;
    border: 1px solid black;
    padding: 0.2em 0.5em;
} */

.sidebarFooter {
    /* margin: 2em 1em 0.2em 0.5em; */
    margin: 2em 1em 4em 0.5em;
    display: block;
    /* padding: 0.2em 1em 0.2em auto; */
    padding: 0;
    text-align: right;
}

#sidebar-left ul > li:hover { /* li.active */
    cursor: pointer;
    /* margin-left: 0; */
    /* background-color: var(--color-accent1); */
    /* background-color: hsl(212, 95%, 80%); */
    background-color: var(--color-neutral-alternate);
}
#sidebar-left ul > li.sidebarSection {
    background-color: var(--color-neutral-alternate);
}
.sidebarSection .emptyrg {
    /* color: grey; */
    color: var(--color-contrast-alternate);
}
.sidebarTray {
    /* display: block; */
    /* margin-right: 0; */
    /* margin-left: auto; */
    /* position: relative; */
    /* right: 0; */
}
.selector {
    display: flex;
    flex-direction: row;
    justify-content: stretch;
}
.selector-btn {
    /* margin: 1em 0.2em; */
    padding: 0.2em 1em 0.0em 1em;
    /* background-color: grey; */
    /* background-color: var(--color-neutral-alternate2); */
    border-bottom: 0.2rem solid var(--color-neutral);
}
.selector-btn:hover {
    cursor: pointer;
    border-color: var(--color-highlight);
}
.selector-btn.active {
    /* background-color: lightgrey; */
    /* background-color: var(--color-neutral-alternate); */
    /* background-color: var(--color-highlight); */
    border-color: var(--color-primary);
}

.sidebarFilter {
    position: sticky;
    top: 0;
    z-index: 901;
}
.sidebarFilters {
    /* position: ; */
    /* bottom: 0; */
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    min-height: 2em;
    /* background-color: var(--color-sidebar-bg-tray); */
    background-color: var(--color-neutral);
}
.sidebarAction {
    position: sticky;
    z-index: 900;
    /* position: fixed; */
    /* width: 100%; */
    /* bottom: 0; */
    bottom: 0;
}
.sidebarActions {
    /* position: fixed; */
    /* bottom: 0; */
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    min-height: 2em;
    /* background-color: var(--color-sidebar-bg-tray); */
    background-color: var(--color-neutral);
}
.sidebarBtn {
    /* display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center; */
    position: relative;
    overflow: hidden;
    /* width: 85%; */
    padding: 0.5em 1em 0.2em 1em;
    border-bottom: 0.3em solid var(--color-neutral);
    text-align: center;
    cursor: pointer;
    /* text-overflow: ellipsis; */
}
.sidebarBtn.active {
    border-color: var(--color-primary);
}
.sidebarFilterArea {
    padding-left: 0.4em;
    padding-right: 0.4em;
    flex-grow: 10;
}
.sidebarFilters .sidebarBtn:not(.active):hover {
    border-color: var(--color-highlight);
}
.sidebarPin.pinned {
    transform: rotate(45deg);
}

/* .sidebarActions .sidebarBtn {
    width: 25%;
    text-overflow: clip;
} */
.sidebarBtn span.sb-text {
    display: inline-block;
    /* max-width: 10em; */
    text-overflow: ellipsis;
    /* border-bottom: var(--sb-border-thickness) solid var(--sb-border-color); */
    border-bottom: var(--sb-border-thickness) solid var(--color-primary);
    margin-bottom: var(--sb-margin-bottom);
}

.sidebarBtn:hover {
    /* background-color: var(--color-sidebar-btn-hover); */
    background-color: var(--color-neutral-alternate);
}
.sidebarBtn input {
    width: 80%;
}
/* #sidebar-left button {
    border-radius: 0;
    border-width: 0;
    height: 2em;
    border-color: var(--color-accent2-darker);
    background-color: var(--color-accent1-darker);
    color: var(--color-whiteish);
    text-align: left;

} */
.hidden {
    display: none !important;
}
tr.expanded {
    border-bottom: 1px solid var(--color-contrast);
}

#sidebar-right {
    position: absolute;
    display: none;
    top: 30px;
    bottom: 0;
    font-size: 1em;
    right: 0;
    width: 18em;
    z-index: 999;

    overflow: auto;
    /* IE and Edge */
    /* -ms-overflow-style: none;   */
    /* scrollbar-width: none; */

    /* background-color: hsl(212, 85%, 95%); */
    /* background-color: var(--color-slate); */
    /* background-color: var(--color-sidebar-bg-right); */
    /* background-color: var(--color-sidebar-bg); */
    background-color: var(--color-neutral-alternate);
}

/* #sidebar-right::-webkit-scrollbar {
    display: none;
} */

#sidebar-right h4 {
    padding-left: 1em;
    font-weight: normal;
    text-decoration: 1px underline;
    display: block;
    /* text-decoration: ; */
}
.tray {
    /* background-color: var(--color-sidebar-bg-tray); */
    /* background-color: var(--color-neutral); */
    background-color: var(--color-neutral);
    text-align: right;
    padding: 0.5em 1em 0.5em 1em;
}
.identityTray {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    /* margin: 0; */
    justify-content: space-evenly;
    align-items: stretch;
    /* min-height: 2em; */
}
.ident {
    /* display: flex; */
    /* background-color: var(--color-ident-bg); */
    background-color: var(--color-neutral);
    width: 4em;
    padding: 0.3em 0.5em 0.0em 0.5em;
    text-align: center;
    border-bottom: 0.3em solid var(--color-neutral);
    /* min-height: 4em; */
}
.ident.active {
    /* background-color: var(--color-ident-bg-current); */
    /* background-color: var(--color-neutral-alternate2); */
    /* background-color: var(--color-primary); */
    border-color: var(--color-primary);
}
.ident:hover {
    cursor: pointer;
}
.ident:not(.active):hover {
    /* background-color: var(--color-neutral-alternate2); */
    background-color: var(--color-neutral-alternate);
    border-color: var(--color-highlight);
}

.uic-placeholder {
    width: 100%;
    text-align: center;
}
/* UIMatrix container  */
.uim {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    overflow-y: hidden;
    height: calc(100% - 2.5em);
    /* height: 90%; */
    /* bottom: 0; */
}

/* UIMatrix pivot */
.uim-matrix {
    /* border-right: 2px solid var(--color-sidebar-bg); */
    /* border-right: 2px solid var(--color-neutral-alternate2); */
    /* overflow-x: auto; */
    /* overflow-y: ; */
    /* display: block; */
    height: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
    width: 100%;
}
.uim-wrapper {
    height: calc(100% - 2em);
    width: 100%;
    overflow-x: auto;
    overflow-y: auto;
}
/* .uim-matrix table {
    height: 100%;
} */
.uim-matrix table {

    /* display: table; */
    /* overflow-x: auto; */
    /* height: 95%; */
    /* width: 90%; */
    
    /* width: 90%; */
}
.uim-matrix thead {
    position: sticky;
    top: 0;
    /* display: block; */
    /* width: 100%; */
    /* height: 4em; */
}
.uim-matrix tfoot {
    position: sticky;
    bottom: 0;
}
.uim-pager {
    background-color: var(--color-neutral-alternate);
    position: sticky;
    bottom: 0;
    white-space: nowrap;
    /* width: 20em; */
    /* margin-left: auto;
    margin-right: auto; */
    font-size: 0.8em;
    font-weight: bold;
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
}
.uim-pager > .ui-btn {
    padding: 0.2em 0.5em;
}
.uim-pager > .ui-btn:hover{
    cursor: pointer;
}
/* .uim-matrix tbody::before {
    content: '';
    display: block;
    height: 1em;
} */
.uim-matrix tbody {
    /* position: relative; */
    /* top: 1em; */
    /* width: 100%; */
    /* display: block; */
    /* overflow-y: scroll; */
    /* height: calc(100% - 4em); */
    /* width: 100%; */
    /* width: 80%; */
    /* overflow-y: auto; */
}

.uim-matrix thead th {
    /* width: 5em; */
    /* overflow-x: hidden; */
    /* overflow: hidden; */
    /* text-overflow: ellipsis; */
}
.uim-matrix tbody td, .uim-matrix div.colname {
    /* width: 5em; */
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.uim-matrix tr.collapsed {
    display: none;
}

.UITableGenerator {
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.uim-table-gen {
    font-size: 2em;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
}
.uim-tablegen-input {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.uim-table-gen-btn {
    cursor: pointer;
    padding: 1em;
}

.uim-col-number, .uim-col-periodic, .uim-col-periodic-editable {
    text-align: right;
}

/* UIMatrix sidepanel */
.uim-sidepanel {
    display: none;
    position: relative;
    /* min-width: 20em; */
    width: 50em;
    /* max-width: 20em; */
    right: 0;
    margin-left: 1em;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    /* margin-left: auto; */
}
.uim-sidepanel.active {
    display: block;
}

.col-indent {
    margin-left: 4em;
    margin-bottom: 1em;
    padding: 0.5em 1em;
    background-color: var(--color-neutral-alternate);
}

.uim-columns-list, .col-indent {
    /* font-size: 0.8rem; */
    display: flex;
    flex-direction: column;
    align-items: self-start;
}

/* .uim-sidepanel .fieldscontainer {
    float: left;
} */

/* drag/drop */
/* .uim-sidepanel .field {
        border: 2px solid black;
        border-radius: 5px;
        padding: 0.2em 1em 0.2em 1em;
        margin: 0.1em 0.1em 0.1em 0.1em;
        background-color: white;
        font-size: 0.8em;
        cursor: pointer;
} */

/* UIMatrix columns progress tray */
.uim-tray {
    display: none;
    /* display: flex; */
    /* border: 1px solid yellow;*/

}
.uim-header-group {
    /* display: inline-block; */
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: baseline;
    box-sizing: border-box;
    margin-bottom: 1em;
    max-height: 1.5em;
}
.uim-header-title {
    /* margin: 0 2em; */
    /* font-family: 'Roboto', 'Open Sans', 'sans-serif'; */
    padding-left: 0.2em;
    padding-right: 0.4em;
}
.uim-header-variant {
    padding-left: 0.4em;
}
.uim-header-selectors {
    display: flex;
    flex-direction: row;
    margin: 0 2em;
    /* width: 100%; */
    right: 0;
    /* display: flex;
    flex-direction: row; */
}
.uim-wand {
    display: flex;
    flex-direction: column;
    padding-left: 0.2em;
    padding-right: 0.4em;
}
.uim-wand-input {
    display: flex;
    flex-direction: row;
}
.uim-wand-main {
    display: flex;
    flex-direction: row;
    align-content: center;
    cursor: pointer;
    padding: 0.2em 0.5em;
}
.uim-selector {
    display: flex;
    flex-direction: column;
    padding-left: 0.2em;
    padding-right: 0.4em;
}


.uim-selector-uic {
    display: flex;
    flex-direction: column;
    padding-left: 0.2em;
    padding-right: 0.4em;
}
/* .uim-selector-dropdown-uic {
    display: none;
} */
/* .uim-selector-uic:focus .uim-selector-dropdown-uic, .uim-selector-uic:focus-within .uim-selector-dropdown-uic {
    display: flex;
} */
.uim-selector-dropdown-uic {
    display: flex; /* flex */
    flex-direction: column;
    position: absolute;
    z-index: 900;
    top: 3.2em;
}
.uim-selector-dropdown-uic.inactive {
    display: none;
}


.uim-selector-dropdown.inactive {
    display: none;
}
.uim-selector-dropdown {
    display: flex;
    flex-direction: column;
    position: absolute;
    z-index: 900;
    top: 3.2em;
    /* padding: 0.5em; */
    /* box-sizing: border-box; */
}
.uim-selector-main {
    display: flex;
    flex-direction: row;
    align-content: center;
    cursor: pointer;
    padding: 0.2em 0.5em;
}
.uim-selector-btn {
    color: var(--color-neutral-alternate2);
    display: flex;
    padding: 0.2em;
}
/* .uim-selector-dropdown-item > .uim-selector-value { */
.uim-selector-value {
    flex-grow: 20;
}
.uim-selector-value.new-item {
    font-style: italic;
    color: var(--color-neutral-alternate2);
}
.uim-selector-dropdown-item {
    display: flex;
    flex-direction: row;
    align-content: center;
    cursor: pointer;
    width: 100%;
    padding: 0.2em 0.5em;
    margin-bottom: 0.2em;
    background-color: var(--color-neutral);
}
.uim-selector-dropdown-item, .uim-selector-main:not(.noselection) {
    border: 1px solid var(--color-highlight);
    border-radius: 0.5em;
}

/* uilayout */
.uilayout {
    display: grid;
    /* grid-auto-rows: minmax(260px, 1fr); */
    grid-template-columns: 1fr;
    /* grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); */
    grid-auto-rows: auto;
    grid-auto-flow: row;
    height: auto;
    gap: 0.5rem;
}

@container (min-width: 640px) {
    .uilayout {
        grid-template-columns: 1fr 1fr;
    }
}

/* inlineselector */
.uim-inlineselector {
    display: flex;
    flex-direction: column;
    position: relative;
    padding-left: 0.2em;
    padding-right: 0.4em;
}
.uim-inlineselector-main {
    display: flex;
    flex-direction: row;
    align-content: center;
    cursor: pointer;
    padding: 0.2em 0.5em;
}
.uim-inlineselector-main.active {
    /* highlight the selected element when menu is open */
    outline: 2px solid var(--color-highlight);
}
.uim-inlineselector-dropdown.inactive {
    display: none;
}
.uim-inlineselector-dropdown {
    display: flex;
    flex-direction: column;
    position: absolute;
    /* position: relative; */
    z-index: 900;
    margin-top: 0.2em;
    top: 3.2em;
    /* padding: 0.5em; */
    /* box-sizing: border-box; */
}
.uim-inlineselector-dropdown-item > .uim-selector-value {
    flex-grow: 20;
}
.uim-inlineselector-dropdown-item {
    display: flex;
    flex-direction: row;
    align-content: center;
    cursor: pointer;
    width: 100%;
    padding: 0.2em 0.5em;
    margin-bottom: 0.2em;
    background-color: var(--color-neutral);
}
.uim-inlineselector-dropdown-item, .uim-inlineselector-main { /* :not(.noselection)*/
    border: 1px solid var(--color-highlight);
    border-radius: 0.5em;
}
.uim-inlineselector-dropdown-item:hover {
    outline: 2px solid var(--color-highlight);
}
.invalid {
    border-left: 6px solid var(--color-bad, #e53935);
}
.uim-edit-section {
    display: block;
}
.uim-edit-section.hidden {
    display: none;
}

.uim-header-buttons {
    position: absolute;
    top: 1em;
    left: 1em;
    display: flex;
    /* justify-items: center; */
    /* align-content: center; */
    z-index: 500;
}
.uim-header-btn {
    /* color: var(--color-grey); */
    color: var(--color-contrast-alternate2);
    /* float: left; */
    /* display: flex; */
    display: inline-block;
    /* justify-items: center; */
    padding: 0.2em;
}
.uim-header-btn:hover {
    /* color: var(--color-blackish); */
    color: var(--color-contrast);
    cursor: pointer;
}
.uim-progress {
    position: absolute;
    /* border: 1px dashed blue; */
    border: 1px dashed var(--color-highlight);
    left: 8em;
    height: 2em;
    width: 80%;
}
.uim-progress-bar {
    /* background-color: #2222aa; */
    background-color: var(--color-highlight);
    border-radius: 0.7em;
    text-align: center;
    /* color: white; */
    color: var(--color-contrast);
    height: 100%;
}
.uim-hover-matrix tbody > tr:hover {
    cursor: pointer;
    /* background-color: var(--color-accent1-brighter); */
    background-color: var(--color-highlight);
}
.UIChart {
    /* box-shadow: 1px 4px 6px var(--color-contrast-alternate); */
}
.UIChart, .UIChart > .chart {
    height: 100%;
    width: 100%;
    /* overflow: hidden; */
}
.UIChart h3 {
    margin-left: auto;
    margin-right: auto;
}

.chart > svg {
    /* margin: 0; */
    /* position: absolute;
    top: 0;
    left: 0; */
}

td i.fa-plus-square, td i.fa-minus-square {
    cursor: pointer;
}

.uim-tray.active {
    display: block;
}

/* itemcontainer is obsolete */
.uim-tray-itemcontainer {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

.uim-tray-viewgroup {
    display: flex;
    flex-direction: column;
    /* justify-content: space-evenly; */
}

.uim-tray-item {
    /* border: 1px solid yellow; */
    border: 1px solid var(--color-neutral-alternate);
    border-radius: 5px;
    /* width: 33%; */

}

.uim input {
    /* font-size: 0.8em; */
    font-size: 0.9em;
}
/* active column for editing */
.tagged {
    /* background-color:hsl(212, 100%, 60%) !important; */
    background-color: var(--color-highlight) !important;
}

.uim-sb-save {
    width: 1em;
    padding: 0.5em 1em 0.5em 1em;
    margin-left: auto;
    /* color: var(--color-lightgrey); */
    color: var(--color-contrast-alternate);
}

.uim-toggle label {
    position: relative;
    display: inline-block;
    /* width: 60px; */
    width: 3em;
    /* height: 34px; */
    height: 1.5em;
}
.uim-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}
.uim-toggle-slider {
    /* background of the toggle (sliding area) */
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-radius: 2em;
    /* background-color: #ccc; */
    background-color: var(--color-neutral-alternate);
    /* -webkit-transition: .4s; */
    transition: .2s;
}
.uim-toggle-slider:before {
    /* toggle button */
    position: absolute;
    content: "";
    /* height: 26px; */
    height: 1.3em;
    /* width: 26px; */
    width: 1.3em;
    /* left: 4px; */
    left: 0.2em;
    /* bottom: 4px; */
    bottom: 0.1em;
    border-radius: 2em;
    /* border: 1px solid var(--color-neutral-alternate); */
    /* background-color: white; */
    /* background-color: var(--color-neutral); */
    background-color: var(--color-primary);
    /* -webkit-transition: .4s; */
    transition: .2s;
}
input, select, button {
    color: var(--color-contrast);
    background-color: var(--color-neutral);
}
/* input[type="radio"] {
    appearance: none; */
    /* -webkit-appearance: none; */
    /* border-radius: 50%; */
    /* background: var(--color-highlight); dot color */
    /* border: 3px solid var(--color-neutral); between dot and outer circle */
    /* box-shadow: 0 0 0 1px var(--color-highlight); outer circle */
/* } */
input {
    border: 1px solid var(--color-highlight);
    border-radius: 0.5em;
    padding: 0.2em 0.4em;
}
input:focus {
    outline: 2px solid var(--color-highlight);
}
input:checked + .uim-toggle-slider {
    /* background-color: #2196F3; */
    background-color: var(--color-highlight);
}
input:focus + .uim-toggle-slider {
    /* box-shadow: 0 0 1px #2196F3; */
    box-shadow: 0 0 1px var(--color-highlight);
}
input:checked + .uim-toggle-slider:before {
    /* -webkit-transform: translateX(26px); */
    /* -ms-transform: translateX(26px); */
    /* transform: translateX(26px); */
    transform: translateX(1.4em);
}

.ui-article {
    height: 100%;
    overflow-x: auto;
}
.ui-article-header {
    /* padding: 0.5em 2em; */
    padding: 2em 2em 2em 2em;
}
.ui-richtext {
    position: relative;
    transition: transform 0.4s ease, opacity 0.4s ease;
    transform: translateX(0);
    opacity: 1;
}
.ui-richtext.slide-in {
    transform: translateX(100%);
    opacity: 0;
}
/* .ui-richtext.entered {
    transform: translateX(0);
    opacity: 1;
} */

.ui-richtext .ui-rt-editable {
    /* border: 1px solid grey; */
    border: 1px solid var(--color-neutral-alternate);
    padding: 0.5em 2em;
    white-space: break-spaces;
}

/* * [contenteditable="true"] { */
    /* border: 1px dotted grey; */
    /* border: 1px dashed var(--color-neutral-alternate2); */
/* } */

/* [contenteditable] {
    outline: 1px dashed var(--color-neutral-alternate2);
} */

.ui-rt-editable > [contenteditable="true"] {
    outline: 1px dashed var(--color-neutral-alternate2);
}

.ui-richtext .toolbar {
    /* float: left; */
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    text-align: center;
    display: flex;
    /* align-items: center; */
}

/* .ui-richtext .justify-toolbar  { */
    /* float: left; */
    /* position: relative;
    left: -50%; */
    /* text-align: center; */
    /* display: flex; */
    /* align-items: center; */
/* } */

.ui-richtext > .toolbar ul {
    display: flex;
    flex-direction: row;
    list-style: none;
    /* display: inline-flex; */
    /* flex-direction: row;  */
}
.ui-richtext > .toolbar li {
    margin: 0.2em;
    /* color: #c6c6c6; */
    color: var(--color-contrast-alternate);
}
.ui-richtext > .toolbar li:hover {
    /* color: black; */
    color: var(--color-contrast);
}
.ui-richtext > .toolbar li.inactive {
    /* color: black; */
    color: var(--color-neutral-alternate2);
}
.ui-richtext code {
    font-family: 'Roboto Mono';
}

.uim-sb-save:hover {
    /* color: black; */
    color: var(--color-contrast);
}

.uim-topright {
    /* position: fixed; */
    display: flex;
    flex-direction: row;
    /* color: grey; */
    color: var(--color-contrast-alternate);
    font-size: 0.8em;
    float: right;
    margin-right: 2em;
    /* margin-top: 5em; */
    margin-top: 3em;
    /* margin-bottom: 2em; */
    /* bottom: 1em; */
}
.uim-topright .ui-btn:hover {
    /* color: black; */
    color: var(--color-contrast);
}
.can-drag {
    cursor: pointer;
}
.no-drag {
    cursor: not-allowed;
}
span[contenteditable="true"] {
    display: inline-block;
    min-width: 1em;
}

.ui-metricconfigurator { /* .ui-calctask */
    font-size: 0.9em;
    overflow: scroll;
}
.ui-group:not(.no-border) {
    /* border: 1px solid slategrey; */
    /* border: 1px solid var(--color-contrast-alternate2); */
    border: 1px solid var(--color-neutral-alternate2);
    border-radius: 3px;
}
.ui-group {
    padding: 0.2em 0.5em;
    margin: 1.5em 1em 0.5em 1em;
    flex: 1 0 260px; /* grow, dont shrink */
    /* overflow-x: auto; */
    /* overflow-x: auto;
    overflow-y: hidden; */
}
.large-content {
    /* used in ui-group to limit the length of the UIComponent, eg for field lists */
    max-height: 80vh;
    overflow-y: auto;
}
.width-30em {
    width: 30em;
}
.ui-group-vertical {
    /* min-width: 30em; */
    /* overflow-y: scroll; */
    /* display: grid;
    grid-template-columns: repeat(2, 1fr); */
}
.ui-group-horizontal {
    display: flex;
    flex-direction: row;
    justify-items: space-between;
    /* overflow: contain; */
}
.ui-group-title {
    font-weight: bold;
    display: inline-block;
    transform: translate(0, -25%);
    padding: 0.2em 0.5em;
    background-color: var(--color-neutral);
    border: 1px solid var(--color-contrast-alternate2);
    border-radius: 3px;
    position: sticky;
    box-shadow: 1px 1px 6px var(--color-contrast-alternate);
    top: 0;
}

.ui-btntray {
    /* border: 1px solid slategrey; */
    border: 1px solid var(--color-neutral-alternate2);
    border-radius: 3px;
    margin: 0.5em 1em;
}
.ui-btntray-vertical {
    /* min-width: 30em; why? */
    /* overflow-y: scroll; */
}
.ui-btntray-horizontal {
    display: flex;
    flex-direction: row;
    justify-items: space-between;
    /* overflow: contain; */
}
.ui-btntray-horizontal div {
    padding: 0.2em;
}
.ui-btntray-title {
    font-weight: bold;
}

.ui-resourcecontainer {
    /* border: 1px dotted slategray; */
    border: 1px dotted var(--color-neutral-alternate);
    padding: 0.2em 0.5em;
}

.ui-orderedcontainerlist {
    padding: 0.2em 0.5em;
    display: block;
    /* overflow-x: auto; */
}
.ui-orderedcontainerlist > .ui-ocl-filter {
    position: sticky;
    top: 0;
    background-color: var(--color-neutral);
}
.ui-pillcontainer > .ui-filter {
    position: sticky;
    top: 0;
    background-color: var(--color-neutral);
}
.ui-filter > input {
    margin-left: 0.4em;
}
.ui-orderedcontainerlist.medium-height {
    max-height: 20em;
    overflow-y: auto;
}
.ui-ocl-item {
    display: flex;
}
.ui-ocl-item .hidden {
    display: none;
}
.ui-ocl-item .ui-btn-remove {
    cursor: pointer;
}
.ui-ocl-item.collapsed {
    padding: 0.4em 0.4em 0.2em 0.4em;
}
.ui-ocl-item.collapsed > div {
    display: none;
}
.ui-ocl-item.expanded > .collapse-key {
	display: none;
}
.ui-ocl-item.expanded > .collapse-btn i {
    transform: rotate(45deg);
    transition: .2s;
}
.ui-ocl-item.collapsed > .collapse-btn i {
    transition: .2s;
}

.ui-pillcontainer {
    /* border: 1px dotted black; */
    border: 1px dotted var(--color-contrast);
    padding: 0.2em 0.5em;
    min-width: 4em;
    min-height: 1em;
    overflow-x: auto;
    /* display: flex; */
}
.ui-pillcontainer-indent {
    /* border: 1px dotted black; */
    border: 1px dotted var(--color-contrast);
    padding: 0.2em 0.5em;
    /* display: flex; */
}
.ui-pillcontainer-title {
    /* font-weight: bold; */
    /* border: 1px dotted black; */
    /* display: flex; */
}
.ui-pillcontainer-pills {
    /* border: 1px dotted black; */
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    /* white-space: nowrap; */
    max-width: 40em;
}
/* .ui-pillcontainer  */
.invalid-value {
    /* border-right: 0.3em solid red; */
    border-right: 0.3em solid var(--color-bad);
}
.invalid-value:hover::after {
    content: "Invalid value";
    /* color: red; */
    color: var(--color-bad);
    /* background-color: white; */
    background-color: var(--color-neutral);
    position: absolute;
    /* left: 5em; */

    /* right: 0; */
}
.ui-pill-subtext {
    font-size: 0.8em;
    color: var(--color-contrast-alternate);
}
.ui-pill-wrap {
    display: block;
    text-align: left;
}
.ui-field-pill {
    /* background-color: #dddddd; */
    /* max-width: 5em; */
    /* display: flex;
    flex-direction: row;
    flex-wrap: nowrap; */
    display: inline-block;
    /* background-color: white; */
    background-color: var(--color-neutral-alternate);
    /* border: 1px dotted grey; */
    /* box-shadow: 2px 2px 6px slategrey; */
    box-shadow: 2px 2px 6px var(--color-contrast-alternate);
    text-align: left;
    padding-right: 1em;
    padding-left: 0.5em;
    padding-bottom: 0.2em;
    padding-top: 0.2em;
    margin-bottom: 0.2em;
    /* margin-left: -175px; */
    margin-right: 0.5em;
    /* border: 1px solid black; */
    border: 1px solid var(--color-contrast);
    border-radius: 3px;
    white-space: nowrap;
}
.ui-field-pill:hover {
    /* background-color: var(--color-sidebar-bg-hover); */
    background-color: var(--color-neutral);
    /* cursor: pointer; */ /* only .can-drag */
}
.ui-field-pill-recordtype {
    font-size: 0.8em;
    color: var(--color-contrast-alternate);
}
.ui-field-pill-btn-close {
    cursor: pointer;
}
.textinput {
    /* border: 1px solid var(--color-contrast-alternate2); */
    border: 1px solid var(--color-highlight);
    border-radius: 0.5em;
    padding: 0.2em 0.4em;
    /* max-width: 20em; */
    overflow-x: auto;
    white-space: nowrap;
}
.textinput:focus {
    outline: 2px solid var(--color-highlight);
}
.readonly {
    cursor: not-allowed;
}
.textlabel {
    padding: 0.4em 0.4em 0.2em 0.4em;
    font-weight: bold;
    font-size: 0.8em;
    /* width: 10em;
    text-align: right; */
}
.ui-btn {
    cursor: pointer;
    margin: 0.3em;
}
.ui-btn.inactive {
    cursor: default;
    color: var(--color-contrast-alternate);
}
.ui-btn-right {
    margin-left: auto;
}
.ui-field-map {
    display: flex;
    flex-direction: row;
    justify-items: center;
}
.ui-mapping-dropzone {
    min-height: 3em;
    min-width: 10em;
}

.ui-marker {
    position: absolute;
    bottom: 0.5em;
    left: 0.5em;
    font-size: 0.7em;
    color: var(--color-primary);

}
.ui-btn-add {
    cursor: pointer;
}
.ui-ct-model-buttons {
    display: flex;
    flex-direction: row;
    justify-items: center;
}
.ui-ct-model-btn {
    cursor: pointer;
    max-width: 2em;
    text-align: center;
    padding: 0.2em 0.5em;
}

.uim-button-tray {
    display: flex;
    flex-direction: row;
    justify-items: left;
}
/* .ui-ct-model-btn {
    cursor: pointer;
    max-width: 2em;
    text-align: center;
    padding: 0.2em 0.5em;
} */

.ui-mc-btntray {
    display: flex;
    flex-direction: row;
    justify-content: right;
}
.ui-mc-fieldmap {
}
.ui-mc-fieldmapping {
    /* border: 1px solid slategray; */
    border: 1px solid var(--color-contrast-alternate);
    display: flex;
    flex-direction: row;
    /* align-content: space-between; */
    /* justify-items: stretch; */
}
.ui-mc-fieldmapping > div {
    width: 50%;
}

.uim-tray-top {

}
.ui-formula {
    /* position: relative;
    top: 2em; */
    /* border: 1px solid slategray; */
    border: 1px solid var(--color-contrast-alternate);
    margin-top: 2em;
    display: flex;
    flex-direction: row;
    font-family: 'Roboto Mono', 'Courier New';
    align-items: center;
}
.ui-formula-part, .ui-formula-expression {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.ui-formula-function {
    font-family: 'Roboto Mono', 'Courier New';
}

input:read-only {
    /* color: var(--color-input-readonly); */
    color: var(--color-contrast-alternate);
}
span#right {
    float: right;
}
button.circle {
    width: 40px;
    height: 40px;
    position: fixed;
    left: 50%;
    right: 50%;
    top: 50%;
    /* bottom: 50% */
    border: none;
    border-radius: 50%;
    /* padding-left: auto;
    padding-right: auto; */
    /* background-color: var(--color-accent2); */
    background-color: var(--color-primary);
    /* background-color: var(--color-neutral1); */
    /* color: var(--color-whiteish); */
    color: var(--color-neutral);
    font-size: 2em;
    font-weight: bold;
}
button.circle:hover {
    background-color: var(--color-primary-alternate);
    /* background-color: var(--color-neutral2); */
}
/* input.modesel {
    border: 1px solid var(--color-slate);
    background-color: var(--color-accent2-lighter);
} */
/* input.modeselected {
    background-color: var(--color-accent2-brighter);
} */
#omnibar {
    position: relative;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    z-index: 999;
}
#omnibar input[type="text"] {
    font-size: 1.2em;
    width: 95%;
    border: 1px solid var(--color-accent1);
}
#omnibar input:focus {
    outline: none;
}
#omnibar input[type="submit"] {
    background: url('../img/star-v1-plain.svg') no-repeat;
    width: 25px;
    height: 1.4em;
    background-size: 20px;
    cursor: pointer;
    border: none;
}
.autocomplete {
    position: relative;
    /* display: inline-block; */
}
.autoc-results, .omni-tool {
    position: relative;
    border: 1px solid var(--color-accent1-darker);
    border-top: none;
    cursor: pointer;
    background-color: var(--color-whiteish);
}
.autoc-results {
    width: 100%;
    text-align: right;
    /* float: right; */
}
.omni-tool {
    /* display: block; */
    width: 30%;
    text-align: left;
    /* float: left; */
}
.omni-autoresult {
    z-index: 999;
    background-color: var(--color-white);
}
/* .omni-tool {
    z-index: 999;
    background-color: var(--color-white);
} */
.omni-active {
    background-color: var(--color-whiteish);
}
.autocomplete {
    z-index: 998;
}
.autoc-results:hover {
    color: var(--color-black);
}
.autoc-results-keysel {
    color: var(--color-black) !important;
}
#authModalResponse {
    font-size: 0.80em;
    font-style: italic;
    font-weight: bold;
}
.card {
    /* border-top: 1px solid var(--color-accent1-darker);
    border-right: 2px solid var(--color-accent1-darker);
    border-bottom: 2px solid var(--color-accent1-darker);
    border-left: 1px solid var(--color-accent1-darker); */

    /* border-top: 1px solid var(--color-contrast-alternate);
    border-right: 2px solid var(--color-contrast-alternate);
    border-bottom: 2px solid var(--color-contrast-alternate);
    border-left: 1px solid var(--color-contrast-alternate); */

    border-top: 1px solid var(--color-neutral-alternate2);
    border-right: 2px solid var(--color-neutral-alternate2);
    border-bottom: 2px solid var(--color-neutral-alternate2);
    border-left: 1px solid var(--color-neutral-alternate2);
    
    /* text-align: center; */
    padding: 1em 1em 0 1em;
    /* background-color: white; */
    background-color: var(--color-neutral);
    /* overflow-x: auto; */
    overflow-x: hidden;
    /* overflow-y: hidden; */
    
    /* causes inner elms to scroll */
    /* height: 92%;  */
    height: 100%;
    box-sizing: border-box; 
    /* height: calc(100% - 2em); */
    /* width: 98%; */
    /* width: calc(100% - 2.5em); */

    /* overflow-y: scroll; */
    container-type: inline-size; /* to use @container queries */
}
/* .card input {
    width: 90%;
} */
/* .card div.toolbar {
    max-height: 2em;
} */
.card div.editable {
    /* border: 1px dotted var(--color-slate); */
    border: 1px dotted var(--color-contrast-alternate);
}
.card div.title {
    font-weight: bold;
    font-size: 1.25em;
}
.card div.toolbar {
    min-height: 2.5em;
}
.card div.toolbar img {
    height: 1em;
    margin-left: 3px; 
    margin-right: 3px;
    padding: 4px 4px 4px 4px;
    /* background-color: var(--color-accent1-lighter); */
    background-color: var(--color-neutral);
}
.card div.markup {
    min-height: 6em; 
}
.card-quarter {
    width: 22.5%;
}
.card-half {
    width: 45%;
    height: auto;
}
.card-threequarters {
    width: 67.5%;
}
.card-full {
    width: 90%;
}
.card-main {
    cursor: pointer;
    margin: 1em 1em 1em 1em;
    max-width: 230px;
    float: left;
}
.globe .card-main {
    max-width: 50px;
    /* max-height: 50px; */
    float: left;
}
.detail .card-main {
    width: 100%;
}
#playground {
    position: absolute;
    top: 4em;
}
#playground .globe {
    width: 3000px;
    height: 3000px;
    position: relative;
    display: inline;
}
#playground .tiles {
    /* width: 100%;
    height: 100%;
    position: relative;
    display: flex; */
}
#playground .detail {
    display: inline;
}
#p1 {
    float: left;
    /* position: absolute; */
}
#p2 {
    float: left;
    /* position: relative; */
    margin-bottom: 20px;
}
/* .list-col-btn {
    float: right;
    font-size: 0.8em;
    background-color: var(--color-whiteish);
} */


/* context menu */
.context {
    display: none;
    /* display: flex; */
    flex-direction: column;
    align-items: left;

    position: absolute;
    /* background-color: white; */
    background-color: var(--color-neutral);
    /* border: 1px solid grey; */
    border: 1px solid var(--color-contrast-alternate);
    text-align: left;
    /* font-size: 1.2em; */
    z-index: 999;
}
.context.active {
    display: flex;
}
/* context menu */
.ctx {
    padding: 0.2em 1em 0.2em 0.6em;
    cursor: pointer;
}
.ctx > i {
    padding-right: 0.4em;
}
.ctx:hover {
    background-color: var(--color-neutral-alternate);
}
/* submenu */
.ctx.sublevel > .sublevelscontainer {
    display: none;
}
.ctx.sublevel:hover > .sublevelscontainer {
    display: flex;
}
.sublevelscontainer {
    flex-direction: column;
    position: absolute;
    left: 100%;
    margin-top: -1.4em;
    padding: 0;
    background-color: var(--color-neutral);
    border: 1px solid var(--color-contrast-alternate);
    text-align: left;
    z-index: 999;
}
.sublevelscontainer:hover {
    background-color: var(--color-neutral);
}



div.coldropdown ul.submenu {
    position: relative;
    left: 0;
    display: none;
}
div.coldropdown li:hover > ul.submenu {
    display: block;
}
div.coldropdown li {
    padding-right: 1em;
    padding-top: 0.2em;
    padding-bottom: 0.2em;
}
div.coldropdown li.current-coltype {
    /* background-color: green; */
    background-color: var(--color-contrast-alternate);
}
div.coldropdown li:not(.header):hover {
    /* background-color: lightgrey; */
    background-color: var(--color-neutral-alternate);
    cursor: pointer;
}
div.coldropdown li > div.li-right {
    float: right;
    margin-left: auto;
    margin-right: 0;
}

/* div.circledrop {
    display: none;
    position: absolute;
    background-color: white;
} */
/* div.circledrop.active {
    display: block;
} */

div#identityselector {
    display: none;
}

#identityselector.active {
    display: block;
}

div.qsection {
    /* border: 1px dotted grey; */
    border: 1px dotted var(--color-contrast-alternate2);
}

div.tree ul {
    list-style-type: none;
    padding: 0;/* 0 0 0.75em;*/
    margin: 0;
}

div.tree li {
  padding: 0;
  margin: 0 0 0 0.5em;
}
/* div.tree li img {
    float: left;
    padding: 0;
    margin: 0;
} */

div.tree li::before {
    /* display: inline-block; */
    width: 1em;
    /* height: 1em; */
    float: left;
    margin: 0;
    padding: 0;
    /* content: url('data:image/svg+xml;charset=UTF-8, <svg viewBox="0 0 50 40" xmlns="http://www.w3.org/2000/svg" version="1.1"><circle cx="20" cy="20" r="10" stroke="slategray" stroke-width="2" fill="transparent" /><line class="tree-topline" x1="20" y1="10" x2="20" y2="0" stroke="slategray" stroke-width="2"></line><line class="tree-midline" x1="30" y1="20" x2="50" y2="20" stroke="slategray" stroke-width="2"></line><line class="tree-bottomline" x1="20" y1="30" x2="20" y2="40" stroke="slategray" stroke-width="2"></line></svg>'); */
    content: url('../img/tree.svg');
}
div.tree input {
    border: none; /*1px dashed slategray;*/
    /* background-color:var(--color-whiteish); */
    background-color:var(--color-neutral-alternate);
}
.uic {
    /* UI Components */
    margin: 1em;
}
.uim-sb-upload-targetarea {
    /* border: 1px dashed grey; */
    border: 1px dashed var(--color-contrast-alternate);
    /* background-color: lightgrey; */
    background-color: var(--color-neutral-alternate);
    width: 50%;
    height: 50%;
    min-height: 50px;
    text-align: center;
}

/*                          */
/*   perspectives.js       */
/*                        */
.queryEditor {
    width: 100%;
    height: 100%;
    /* background-color: white; */
    background-color: var(--color-neutral);
}
div.querySources {
    width: 80%;
    height: 50px;
    /* border: 1px dotted black; */
    border: 1px dotted var(--color-contrast);
    /* background-color: var(--color-whiteish); */
    background-color: var(--color-neutral);
}
div.querySource {
    float: left;
    padding: 0.2em 1em 0.2em 1em;
    margin: 0.1em 0.1em 0.1em 0.1em;
    /* background-color: white; */
    background-color: var(--color-neutral);
    font-size: 0.8em;
    /* border: 3px solid black; */
    border: 3px solid var(--color-contrast);
    border-radius: 5px;
}

.fieldsContainer {
    /* float: left; */
    width: 80%;
    overflow: hidden;
}
.availableFieldsContainer {
    width: 30%;
    float: left;
}
.availableFields {
    min-height: 50px;
    /* border: 1px dotted black; */
    border: 1px dotted var(--color-contrast);
    /* background-color: lightgrey; */
    background-color: var(--color-neutral-alternate);

    /* width: 30%; */
    /* float: clear; */
    /* float: none; */
}
.availableQueryField {
    /* drag/drop */
    /* border: 2px solid black; */
    border: 2px solid var(--color-contrast);
    border-radius: 5px;
    padding: 0.2em 1em 0.2em 1em;
    margin: 0.1em 0.1em 0.1em 0.1em;
    /* background-color: white; */
    background-color: var(--color-neutral);
    font-size: 0.8em;
    cursor: pointer;
}

.selectedFieldsContainer {
    width: 30%;
    float: left;
}

.selectedFields {
    min-height: 50px;
    /* border: 1px dotted black; */
    border: 1px dotted var(--color-contrast);
    /* background-color: var(--color-whiteish); */
    background-color: var(--color-neutral-alternate);
    padding: 0.5em 1em 3em 1em;
}

.selectedQueryField {
    /* drag/drop */
    /* width: 100%; */
    border: 2px solid black;
    border-radius: 5px;
    padding: 0.2em 1em 0.2em 1em;
    margin: 0.1em 0.1em 0.1em 0.1em;
    background-color: white;
    font-size: 0.8em;
    /* display: flex;
    flex-direction: row;
    justify-content: space-between; */
    
}


.sourceConnectionsContainer {
    width: 40%;
    float: left;
}

.sourceConnections {
    width: 100%;
}

.joinSide {
    display: inline-block;
    box-sizing: border-box;
    overflow: hidden;
    width: 40%;
    min-height: 20px;
    vertical-align: middle;
    /* border: 1px dotted black; */
    background-color: var(--color-whiteish);
    padding: 0.5em 1em 3em 1em;
}

.joinSide.leftside {
    background-color: lightgrey;
}

.joinSide.rightside {
    background-color: grey;
}

.joinSide-separator {
    line-height: 50%;
    display: inline-block;
    box-sizing: border-box;
    width: 10%;
    text-align: center;
}
.joinField {
    border: 2px solid black;
    border-radius: 5px;
    padding: 0.2em 1em 0.2em 1em;
    margin: 0.1em 0.1em 0.1em 0.1em;
    background-color: white;
    font-size: 0.8em;
}

.querySource:hover {
    cursor: pointer;
}
.joinSide[draggable=true] {
    cursor: move;
}
/* [draggable="true"] {
    touch-action: none;
} */

.groupByFieldsContainer {
    width: 30%;
    float: left;
}
.groupByFields {
    min-height: 50px;
    border: 1px dotted black;
    background-color: var(--color-whiteish);
    padding: 0.5em 1em 3em 1em;
}
.selectedGroupByField {
    /* drag/drop */
    border: 2px solid black;
    border-radius: 5px;
    padding: 0.2em 1em 0.2em 1em;
    margin: 0.1em 0.1em 0.1em 0.1em;
    background-color: white;
    font-size: 0.8em;
}

.orderByFieldsContainer {
    width: 30%;
    float: left;
}
.orderByFields {
    min-height: 50px;
    border: 1px dotted black;
    background-color: var(--color-whiteish);
    padding: 0.5em 1em 3em 1em;
}

.selectedOrderByField {
    /* drag/drop */
    border: 2px solid black;
    border-radius: 5px;
    padding: 0.2em 1em 0.2em 1em;
    margin: 0.1em 0.1em 0.1em 0.1em;
    background-color: white;
    font-size: 0.8em;
}


.selWindowContainer {
    width: 50%;
    margin-left: auto;
    margin-right: 0;
}

.selWindowFields {
    min-height: 20px;
    border: 1px dotted black;
    background-color: var(--color-whiteish);
    padding: 0.5em 1em 3em 1em;
}
.selectedWindowField {
    /* drag/drop */
    border: 2px solid black;
    border-radius: 5px;
    padding: 0.2em 1em 0.2em 1em;
    margin: 0.1em 0.1em 0.1em 0.1em;
    background-color: white;
    font-size: 0.8em;
}
span.activecalc, span.activewin, span.inactivewin, span.inactivecalc {
    /* float: right; */
    /* margin-left: 0.2em; */
    /* padding-right: 0.2em; */
    /* width: 20px; */
    /* margin-left: auto;
    margin-right: 0; */
}
.UIRow {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    min-height: 2em;
    background-color: var(--color-ui-row-bg);
    border: 1px dashed var(--color-ui-row-border);
}




.UICard {
    /* border: 1px solid var(--color-ui-card-border); */
    /* border: 1px solid var(--color-contrast-alternate); */
    box-shadow: 1px 4px 6px var(--color-contrast-alternate);
    padding: 0.5em 0;
    margin: 0 0.2em;
    text-align: center;
}
.UICard h3.title {
    color: var(--color-contrast-alternate);
}
.UICard .content {
    position: relative;
    /* overflow: hidden; */
}
.UICard svg {
    overflow: hidden;
}
.UICard .chart {
    /* positioned relative to the nearest positioned ancestor: .content */
    position: absolute;
    top: 0;
    /* .content is smaller than the UICard, so we pull the graph a bit up */
    margin-top: -20px;
}
/* tooltip for UIChart, UICard */
.tooltip {
    position: absolute;
    z-index: 999;
    /* top: 0; */
    /* left: 0; */
    padding: 0.2em 0.5em;
    visibility: hidden;
    opacity: 0.9;
    background-color: var(--color-neutral);
    color: var(--color-contrast);
    /* margin-left: -50%; */
    /* border: 1px solid var(--color-contrast); */
}

.ui-ct-model-field {
    /* border: 1px dotted grey; */
    border: 1px dotted var(--color-contrast-alternate);
    min-width: 10em;
}

.ui-ec {
    /* width: 50%; */
    /* margin: 2em auto; */
    margin: 0;
    /* display: flex; */
    position: relative;
    /* margin: 0; */
    padding: 0;
    /* height: calc(100% - 4em); */
    height: 100%;
    width: 100%;
    /* overflow: hidden; */
}

.ui-node {
    /* background-color: #dddddd; */
    /* max-width: 5em; */
    position: absolute;
    /* float: left; */
    background-color: transparent;
    /* border: 1px dotted grey; */
    /* box-shadow: 2px 2px 6px slategrey; */
    text-align: left;
    padding-right: 1em;
    padding-left: 0.5em;
    padding-bottom: 0.2em;
    padding-top: 0.2em;
    margin-bottom: 0.2em;
    /* margin-left: -175px; */
    margin-right: 0.5em;
    /* border: 1px solid black; */
    /* border-radius: 3px; */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    cursor: pointer;
}

.ui-node-title {

}
.ui-btn-close, .ui-btn-add {
    cursor: pointer;
    margin-left: 0.5em;
}

.ui-ec-overlay {
    position: absolute;
    /* float: left; */
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    /* background-color: transparent; */
    /* background-color: green; */
}

/* thead th div.headercontent {
    height: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border: 1px solid lightgrey; */
    /* align-items: center; */
    /* box-shadow: 0px 3px 2px slategray; */
/* }  */

.width-80pct {
    width: 80%;
    flex-grow: 10;
}