:root {
    --panel-bg-color: lightsteelblue;
}
body {
    inset:0.25em;
    position: absolute;
    font:14px arial;
    margin:0;
    display: flex;    
    flex-direction: column;
}
#splitter {
    position: absolute;
    cursor: col-resize;
    width:14px;    
    left:-10px;
    top:0;
    height:100%;
    z-index: 1;
}
.box > div,
.box:has(> sqe-li) {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(90px, 1fr));
    -webkit-user-select: none;
    user-select: none;     
    margin-bottom:5px;
}
.flex {
    display: flex;        
}
.flex.center {
    justify-content: center;
}
.flex.vcenter {
    align-items: center;
}
.col {
    flex-direction: column;
}
.grow0 {
    flex-grow: 0;
}
.header {
    justify-content: space-between;
    align-items: center;
}
sqe-li {
    display: block;
    cursor: pointer;
}
sqe-li.errored {
    background-color: red;
}
sqe-li:hover {
    background-color: navy;
    color:white;
}
sqe-panel-group {
    position: relative;
    display: flex;
    flex:1;        
}
sqe-panel { 
    position: relative;    
    display: flex;
    background-color: var(--panel-bg-color);
    flex:1;
    padding:1em; 
    border:1px solid navy;
}
sqe-panel.no-pad {
    padding: 0;
}
sqe-div {
    min-width:0.25em;
    min-height:0.25em;    
}
sqe-panel-head {
    position: absolute;
    height:56px;
    inset: 0 0 auto 0;
    padding:4px;    
    border-bottom:1px solid black;
}
sqe-panel-body {  
    position: absolute;  
    inset:64px 0 0 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
    flex:1;
    padding:4px;    
}
ul.tabsheet {
    list-style-type: none;
    padding-inline-start: 0;
    margin-block-start: 0;
    margin-block-end: 0;
}
ul.tabsheet > li {
    padding:1em 4em;
    cursor: pointer;
}
ul.tabsheet > li.active { 
    background-color: navy;    
    color:white;
}

input[type=button], button {
    border:1px solid black;
    padding:4px 16px;
    margin:2px;
}
input[type=text] {
    margin:2px;
}

.table-group {
    background-color: rgba(50,80,100,0.2);
    margin:1px;
    padding:2px 5px;
}

sqe-panel-body#right-panel-body.hide-ids > .table > div:nth-child(2),
sqe-panel-body#right-panel-body.hide-ids > .table > div:nth-child(3),
sqe-panel-body#right-panel-body.hide-ids > .table > div:nth-child(4),
sqe-panel-body#right-panel-body.hide-ids > .table > div:nth-child(6),
sqe-panel-body#right-panel-body.hide-ids > .table > div:nth-child(7) {
    display: none;
}

.table {    
    display: table;
    table-layout: fixed;
    border-spacing:1px;
    border-radius:5px;
}
.table.selected {    
    outline: 2px solid red;
    background-color: red;
}

.table-row {
    background-color: rgba(62, 75, 83, 0.6);
    color:white;
    margin:1px;
    padding:2px 5px;
    display: table-row;
}
.table-row > div {    
    display: table-cell;
    padding: 2px 5px;
}
.table-head {
    background-color: teal;
}
table td, th {
    padding: 2px 5px;
}

.dialog {
    user-select: none;
    min-width:15em;
    position: absolute;
    inset:0;    
}
.dialog > h2 {
    margin-top:0;
    text-align: center;
}
.dialog > button {
    display: flex;
    justify-content: center;
    align-items: center;    
    margin:auto;
    margin-top:1em;
}


.margin4 {
    margin: 4px;
}
.width80 {
    width: 80px;
}

#workspace {
    display: flex;
    flex-direction: column;
    flex: 1;
}
#version {
    position: absolute;
    left:1em;
    top:1px;
}

#dialog-login h2 {
    text-align: center;
}
#dialog-login {
    display:flex;
    flex-direction: column;
    inset: 0px;
    position: absolute;
    margin:auto;

    width:15em;
    height:15em;

    border:1px solid black;
    padding:1em 2em;
    font:14px arial;
    box-shadow:1px 1px 10px rgba(0,0,0,0.5);
    border-radius: 5px;
}
#dialog-login form {
    display: flex;
    flex-direction: column;
    align-self: center;    
}
button {
    position: relative;    
    color:white;
    background-color: rgba(70,140,220,1);
    border:none;
    
    border-radius: 3px;    
    transition:300ms box-shadow, 300ms background-color;
    
    height:32px;
    min-width: 8em;
    width:9em;    

    margin:2px;
}
button:hover {    
    background-color: rgb(40,75,120,1);
}
button:active:focus {            
    outline:4px solid white; 
}
button:disabled {
    background-color: gray;
}

.login-panel {
    display: flex;   
    position: relative;
    align-items: flex-end;    
}
.login-panel > button {
    width: auto;
    height: 50px;
    flex-direction: column;
    font-size:10px;
    display: flex;
    align-items: center;
}
.login-panel > span {
    display: flex;
    flex-grow: 1;
    justify-content: center;
}
.login-panel img {
    width:32px;
    height:32px;
}
.login-panel:not(.logged-in) img {
    filter:invert(1)
}

.flex {
    display: flex;
}
.flex.column {
    flex-direction: column;
}
.panel {
    justify-content: space-between;
}

#right-panel-head {
    display: flex;
    justify-content: space-between;
}
#right-panel-head h2 {
    margin-block-start: 0;
    margin-block-end: 0;    
}
#right-panel-head #filter, #right-panel-head #image-type {
    display: flex;
    flex-direction: column;
}

#right-panel-body > div {
    margin-bottom:5px;
}

#preview-image {
    z-index: 1;
    position: absolute;
    border:1px solid white;
    box-shadow: 1px 1px 10px 1px black;
}

.artefact-canvas {
    position: absolute;
    border:1px solid black;
}

.fake-link {
    font-weight: bold;
    color:lime;
    cursor:pointer;
}

.disabled {
    pointer-events: none;
    filter: opacity(0.3);
}

#iaa-metadata-container {
    position: absolute;
    left:0;
    right:0;
    bottom:0;
    display: flex;
    background-color: white;
    border-top:1px solid gray;
    box-shadow:0px 0px 8px 0px rgba(0,0,0,0.5);
}

#cover-ui {
    z-index: 1;
    position: absolute;
    inset: 0;
    background-color: rgba(0,0,0,0.5);
    color:white;
    display: flex;
    align-items: center;
    justify-content: center;
    font:32px arial;
    text-shadow: 1px 1px 3px black;
    pointer-events: none;
}
#cover-ui.hidden {
    display: none;
}

button#bt-save-artefact-accept {
    background-color: red;
}
button#bt-save-artefact-accept:hover {
    background-color: maroon;
}

/* Object Panel */
.objects-image-group {
    border: black solid 0.25rem;
    margin: 0.25rem;
    padding: 0.25rem;
}
.objects-image-group > h2 {
    text-align: center;
}
.objects-image-type {
    border: black solid 0.25rem;
    padding: 0.25rem;
    margin-top: 0.25rem;
}
.objects-image-type > h3 {
}
.objects-error-image-entry {
    border: red solid 0.25rem;
    color: red;
}
.objects-object-image {

}
#objects-manifest-viewer {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 50vw;
    height: 90vh;
    background: var(--panel-bg-color);
    padding: 0.5rem;
    border: 2px solid black;
    box-shadow: 0px 0px 10px black;
    gap: 0.5rem;
}
#manifest-viewer-image-gallery {
    overflow: auto;
}
#manifest-viewer-image-gallery > div {
    border: 2px solid black;
    margin: 0.5rem;
    padding: 0.5rem;
}
#manifest-viewer-image-gallery img {
    user-select: auto;
    -webkit-user-drag: auto;
}

dialog#dlg-save-artefact input {
    width:5em; 
    text-align: center;
    font-size:14px;    
}

#dlg-tables-content textarea {
    width: 100%;
}