:root {
    --HOR_WIDTH: 120px;
    --HOR_HEIGHT: 200px;
    --VER_WIDTH: 325px;
    --VER_HEIGHT: 25px;

    --COLOR_BG: hsl(237, 41%, 92%);
    --COLOR_MAIN: #ffb356;
    /* --COLOR_MAIN_UNDER: blue;
    --COLOR_SECONDARY: blue;
    --COLOR_SECONDARY_UNDER: black; */
    --COLOR_HOVER: #ff7300;
    --COLOR_SELECT: hsl(210, 78%, 78%);
    /* --COLOR_CELL: hsl(191, 22%, 90%); */
    --COLOR_TEXT: #311b01;
}
html{
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
body{
    display: flex;
    align-items: center;
    justify-content: center;
}
div.controls {
    height: 50px;
}
#hor-range
{
    margin-left: 400px;
    height: 20px;
    width: 50vh;
}
div.svg-box {
    width: 100vw;
    height: 100vh;
    /* border-color: var(--COLOR_MAIN);
    border-style: dotted; */
    overflow-y: clip;
    overflow-x: clip;
    scroll-behavior: unset;
    scrollbar-width: thin;
	scrollbar-color: lightgray transparent;
}
path.curve {
    stroke: var(--COLOR_MAIN);
    fill: none;
}
g text {
    fill: var(--COLOR_TEXT);
    user-select: none;
}
g.neg text {
    fill:#cd2613;
    user-select: none;
}
g.pos text {
    fill:#1351cd;
    user-select: none;
}
g.cls text {
    text-decoration: underline;
}
g.exp text:hover {
    transition: all 50ms linear;
    fill: var(--COLOR_HOVER);
}
g.hide {
    display: none;
}
g.sub rect {
    fill: var(--COLOR_MAIN);
}
g.ver-node.sel rect {
    fill: var(--COLOR_SELECT);
}
g.hor-node.sel rect {
    fill: var(--COLOR_SELECT);
    /* height: 100%; */
}
g.tape.sel rect {
    fill: var(--COLOR_SELECT);
    opacity: 20%;
}
rect.cmd-hor, rect.cmd-ver {
    fill: var(--COLOR_BG);
    opacity: 20%;
}
rect.cmd-hor {
    height: var(--HOR_HEIGHT);
    width: var(--HOR_WIDTH);
}
rect.cmd-ver {
    height: var(--VER_HEIGHT);
    width: var(--VER_WIDTH);
    /* width: 100%; */
}
g.cell rect {
    height: var(--VER_HEIGHT);
    width: var(--HOR_WIDTH);
    fill: var(--COLOR_BG);
    opacity: 20%;
}
g.tape g.cell.sel rect {
    fill: var(--COLOR_SELECT);
    opacity: 20%;
}
g.tape.sel g.cell.sel rect {
    opacity: 40%;
}
g.cell text {
   font-family:'Courier New';
   text-anchor: end;
}