.boxItem > .contents {
    border-color: var(--gray);
    transition-property: all;
    transition-duration: 0.3s;
}


.boxItem > .contents { border-color: var(--llgray) }
.boxItem > .contents:hover { background-color: var(--dgray) }
.boxItem > .contents:active { background-color: var(--dddgray); color: var(--llgray) }
.boxItem > .contents.selected { background-color: var(--dddgray); color: var(--llgray) }

[data-theme="light"] .boxItem > .contents { border-color: var(--ddgray) }
[data-theme="light"] .boxItem > .contents:hover { background-color: var(--lgray) }
[data-theme="light"] .boxItem > .contents:active { background-color: var(--lllgray); color: var(--ddgray) }
[data-theme="light"] .boxItem > .contents.selected { background-color: var(--lllgray); color: var(--ddgray) }

#pageListSideHandle {
    --bg: var(--gray);
    background-color: var(--bg);
    
    transition-property: background-color, border-left-color, border-right-color;
    transition-duration: 1s;
}
#pageListSideHandle {
    --bg: var(--dgray);
}
[data-theme="light"] #pageListSideHandle {
    --bg: var(--lgray);
}
#pageListSideHandle:not(.open) {
    border-left-color: var(--dgray);
    border-right-color: var(--llgray);
}
[data-theme="light"] #pageListSideHandle:not(.open) {
    border-left-color: var(--lgray);;
    border-right-color: var(--ddgray);
}
#pageListSideHandle.open {
    border-right-color: var(--dgray);
    border-left-color: var(--llgray);
}
[data-theme="light"] #pageListSideHandle.open {
    border-right-color: var(--lgray);
    border-left-color: var(--ddgray);
}



.errant {
    background-color: rgba(200,55,55,0.7)
}
.working {
    background-color: rgba(94, 140, 100, 0.7)
}
.construction {
    background-color: rgba(221, 221, 118, 0.7);
}
.selected {
    border: 2px solid rgb(131, 131, 0);
}