:root {
    --border-width: 1px;
    --padding: 1px;
    --margin: 0px;
    --color1: #990000;
    --color2: #990066;
    --color3: #000099;
    --color4: #006666;
    --color5: #006600;
    --color6: #669900;
    --color7: #999900;
    --color8: #996600;
    --color-error: red;
    --color-info: yellow;
    --color-success: green;
    --bg-color-light: #EFEFEF;
    --bg-color-dark:  #C0C0C0;
    --font-color-light: #FFFFFF;
    --font-color-dark: #000000;
    --border-color-light: #00000066;
    --border-color-dark: #000000;
    --arrow-size: 8px;
}
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
* {
    box-sizing: border-box;
}
#header {
    display: flex;
    flex-direction: row;  
    position: sticky;
    top: 0px;
    width: 100%;
    background-color: var(--bg-color-light);
    border-bottom: 1px solid #666666;
    padding: 2px;
    z-index: 100;
}
#logo {
    font-weight: bold;
    font-size: 1.5rem;
    cursor: pointer;
}
#main {

}
#options {
    display: flex;
    flex-flow: row;
    position: absolute;
    right: 4px;
}
#footer {
    /*
    position: sticky;
    bottom: 0px;*/
    min-height: 46px;
    background-color: #FFFFFF;
    border-top: 1px solid #666666;
}
#mask {
    border: 1px solid var(--color1);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}
#mask > * {
   flex: 1 1 auto;
}
.caption, th {
     /* border: 1px solid var(--color2); */
    background-color: var(--bg-color-dark);
    color: var(--font-color-light);
    font-weight: bold;
    flex: none !important;
    width: 100%;
    text-align: center;
}
.mask-group {
    border: 1px solid var(--color3);
    display: flex;
    flex-wrap: wrap;
}
.mask-group > * {
    flex: 1 1 auto;
}
.mask-control {
    border: 1px solid var(--color4);
}
.control-prop {
    border: 1px solid var(--color5);
}
.control-items {
   /* display: none; */
    border: 1px solid var(--color6);
    white-space: nowrap;
   /* position: absolute; */
    background-color: #FFFFFF;
}
.mask-control:hover .control-items {
    display: block;
}
.control-item {
    border: 1px solid var(--color7);
    white-space: nowrap;
    cursor: pointer;
}   
.control-item:hover {
    border: var(--border-width) solid var(--bg-color-dark);
    color: var(--font-color-light);
    background-color: var(--bg-color-dark);
}
.control-item > label {
    white-space: nowrap;
}

#mask,
.mask-group,
.mask-control,
.control-prop,
.control-items,
.control-item,
.control-item > label,
.caption {
    border-width: var(--border-width);
    padding: var(--padding);
    margin: var(--margin);
}

/** HITLIST */
#list th { 
    /* same as caption */
     /*border: var(--border-width) solid var(--color1); */
}
#list tbody > tr {
    border: var(--border-width) solid var(--color2);
    cursor: pointer;
}
#list tbody > tr:hover {
    border: var(--border-width) solid var(--bg-color-dark);
    background-color: var(--bg-color-dark);
    color: var(--font-color-light);
}
#list td {
    border:var(--border-width) solid var(--color3);
}

#list th,
#list td  {
    padding: var(--padding);
    margin: var(--margin);
}
.pager {
    user-select: none;
    display: flex;
    justify-content: center;
    background-color: white;
}
#ttop {
    position: sticky;
    top: 32px;
}
.pager > * {
    margin: 0 4px;
}
.pager-next,
.pager-back,
.pager-more,
.pager-less {
    cursor: pointer;
}
.pager-back {
	border-width: var(--arrow-size) var(--arrow-size) var(--arrow-size) var(--arrow-size);
    border-color: #FF000000 #bdbdbd #00660000 #99006600;
}
.pager-next {
	border-width: var(--arrow-size)  0px var(--arrow-size) var(--arrow-size);
    border-color: #FF000000 #00009900 #00660000 #bdbdbd;
}

.pager-back,
.pager-next {
    content: '';
    overflow: hidden;
    transform: translate(0, calc(var(--arrow-size) / 4));
    display: inline-block;
	width: 0;
	height: 0;
	border-style: solid;
}
.page-sizer {
    display: inline-block;
    border-radius: 2px;
    background-color: var(--bg-color-light);
}
.page-sizer > * {
    margin: 0 4px;
}


#detail {
    position: absolute;
    top: 0px;
}

.modal-layer {
    display: block;
    position: fixed;
    width: 100%;
    height: 100%;
    pointer-events: all;
    background-color: #00000066;
    backdrop-filter: blur(3px);
    cursor: zoom-out;
    /* filter: blur(4px); */
}
.modal-layer > * {
  position: absolute;
  top: 46px;
  right: 46px;
  left: 46px;
  bottom: 46px;
  overflow: scroll;
  background-color: var(--bg-color-light);
  border-color: var(--border-color-light);
}

#detail .item {
    border: 1px solid #17006933;
    background-color: #00000010;
    padding: 1px;
    margin: 1px;
}
#detail .item.prop {
    display: none;
    background-color: #FFFFFF;
}
#detail .item.prop > .label {
    font-weight: bold;
    padding-right: 4px;
}
#detail .item.prop.with-values {
    display: flex;
}
#detail .item.prop.with-values > * {
    flex: 1 1 50%;
}
/** PATH **/
#lang {
    display: inline;
    position: sticky;
    top: 0px;
}

/** PATH **/
#path {
    position: sticky;
    top: 0px;
    display: flex;
    justify-content: end;
}
#path-list {
    margin: 0;
}
.path-item {
    display: inline-block;
    padding: 0.2rem;
}
.path-item:hover {
    cursor: pointer;
    color: var(--font-color-light);
    background-color: var(--bg-color-dark);
}
.path-item::before {
    display: inline-block;
    content: ' ► ';
}

#message-layer {
    max-width: 600px;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 100;
    display: flex;
    flex-flow: column;
    justify-content: end;
}
#message-layer .toast {
    pointer-events: all;
    max-height: 0px;
    opacity: 0;
    transition: all .7s ease-out;
    background-color: #EEEEEE;
    cursor: pointer; /* for pin and remove */
}
#message-layer .toast.pin {
    opacity: 1;
    max-height: inherit;
}
#message-layer .toast.pin {
    opacity: 1;
    max-height: inherit;
}
#message-layer .toast.pin .caption::after {
    display: inline-block;
    content: 'X';
    position: absolute;
    right: 10px;
}
#message-layer .toast.in {
    opacity: 1;
    max-height: 500px;
}
.message {
    margin: 2px;
}
.message .content {
    padding: 2px;
}
.message.error {
    border: 2px solid var(--color-error);
}
.message.info {
    border: 2px solid var(--color-info);
}
.message.success {
    border: 2px solid var(--color-success);
}
.message.success .caption {
    background-color: var(--color-success);
    color: var(--font-color-light);
}
.message.error .caption {
    background-color: var(--color-error);
    color: var(--font-color-light);
}

#tiles {
    display: flex;
    flex-wrap: wrap;
}

#tiles > * {
    flex: 1 1 auto;
    height: 200px;
    margin: 2px;
    border: 1px solid var(--color7);
    cursor: pointer;
}
#tiles > *:hover {
    border: var(--border-width) solid var(--bg-color-dark);
}

#dops {
    height: 19px;
    background-color: #FFFFFF;
    border: 1px solid #000000;
}
#dops-btn {
    padding: 0 3px;
}
#dops .dops-option {
    display: none;
    background-color: #FFFFFF;
}
#dops:hover .dops-option {
    display: block;
}