body {
    margin:0;
    overflow: hidden;
}
#fore {
    background-color: white;
    visibility: hidden;
    position: absolute;
    left: 0vw;
    top: 0vh;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    padding: 0;
    margin: 0;

}
#toolbar, #right-toolbar{
    background-color: white;
    visibility: visible;
    border: 1px solid #dde;
    width: 100px;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 50px);
    grid-template-rows: 25px 25px repeat(8,50px)  200px 1em;
    grid-gap: 0;
    box-sizing: border-box;
}

#toolbar {
    position: absolute;
    left: 0px;    
}
#right-toolbar {
    grid-template-columns: repeat(1, 50px);
    grid-template-rows: repeat(3,50px) repeat(8,30px) 200px 100px 50px;
    position: absolute;
    width: 50px;
    right: 0px;    

}
.button, .buttonsize {
    width: 50px;
    height: 50px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;            
    background-color: rgb(220,220,209);
    box-shadow: inset 0px  3px  5px rgb(151, 151, 140), 
                inset 0px -3px 5px rgb(112, 112, 103); 
}
.color_stack_item {
    width: 50px;
    height: 30px;

}
.button.pressed {
    background-color: rgb(220,220,209);
    box-shadow: inset 0px  -3px  5px rgb(151, 151, 140), 
                inset 0px 3px    5px  rgb(112, 112, 103);

}
#canvas-area {
    background-color:white;
    width: calc(100vw - 150px);
    height: 100vh;
    position: absolute;
    left: 101px;
    height:100vh;
    overflow: hidden;
    padding: 0;
    margin: 0;
    pointer-events: auto;
    touch-action: none;

}
#canvas-area canvas {
    width: 100%;
    height: 100%;
    touch-action: none;

}
#view-canvas {
    cursor: crosshair;
    pointer-events: auto;
}
#staging-canvas, #tool-canvas, #tool-tmp-canvas, #art-canvas {
    visibility: hidden;
}
#color-selector-div-back {
    position: relative;
    width:28px;
    height:28px;
    padding: 10px;
    border: solid 1px #aaa;
    background-color:rgba(255,255,255,255);
    /* justify-content: center;
    display: flex;
    align-items: center; */

}
#color-selector-div-fore {
    position: relative;
    width:30px;
    height:30px;
    background-color:rgba(0,0,0,255);
    z-index:1;

}
#hl-selector-canvas {
    width: 50px;
    height: 200px;
    border: 1px solid black inset;
    background-color: rgba(0, 0, 0,255) ;
    cursor: crosshair;
}
#sat-selector-canvas {
    width: 50px;
    height: 100px;
    border: 1px solid black inset;
    background-color: rgba(0, 0, 0,255) ;
    cursor: crosshair;
}
#colorswap {
    font-family: monospace;
    width: 100px;
    height: 2em;
    cursor: pointer;
    justify-content: center;
    display: flex;
    align-items: center;
    color: #444;
}
.scribble {
    background-image: url("icons.png");
    background-size: 200px 200px;
    background-position: -5px -5px;
    background-repeat: no-repeat;

}
.rect {
    background-image: url("rect.png");
    background-repeat: no-repeat;
}
.rect.filled{
    background-image: url("rect.filled.png");
    background-repeat: no-repeat;
}

.line {
    background-image: url("icons.png");
    background-size: 200px 200px;
    background-position: -97px -54px;
    background-repeat: no-repeat;
}
.circle {
    background-image: url(circle.png);
    background-repeat: no-repeat;
}
.circle.filled {
    background-image: url(circle.filled.png);
    background-repeat: no-repeat;
}

.dropper {
    background-image: url(dropper.png);
    background-size: 50px 50px;
}
.cursor_size {
    background-image: url(linewidth.png);
}
.mandala {
    background-image: url(mandala.png);
    background-size: 40px 40px;

}
.floodfill {
    background-image: url("icons.png");
    background-size: 200px 200px;
    background-position: -5px -54px;
    background-repeat: no-repeat;
}
.eraser {
    background-image: url(icons3.png);
    background-size: 100px 100px;
    background-position: -9px -4px;
}
.clearall {
    background-image: url(icons2.png);
    background-size: 200px 200px;
    background-position: 0px -104px;

}
.menu-bar-button {
    background-color: white;
    box-shadow: inset 3px 3px 5px #eee, inset -3px -3px 5px #aaa; /* Emboss effect */
}
.save, .load {
    height: 25px;
    cursor: pointer;
    font-family: monospace;
    text-align: center;
    font-size: 16px;
}
.gdrive {
    grid-column: span 2;
    height: 25px;
    width: 100px;
    background-color: #ee9;
}
.undo {
    background-image: url("undoredo.png");
    background-size: 100px 100px;
    background-position: -4px -22px;
}
.redo {
    background-image: url("undoredo.png");
    background-size: 100px 100px;
    background-position: -50px -22px;
}
.fillstyle {
    background-image: url("fillstyle_outline.png");
    
}

.fillstyle.filled {
    background-image: url("fillstyle.png");
    
}
#file_input {
    display: none;
}