*{
    box-sizing: border-box;
    font-family: monospace;
    color:#232323;
    font-size: .8rem;

}

html,body{
    background-color: #5a5046;
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}


canvas#pixelcanvas{
    width: 100%;
    height: 100%;
    background-color: #FFFFFF;
    image-rendering: pixelated;
}



div.pixelcanvasdiv{
    background-color: #2f2e2c;
    width: 70% !important;
}

div#zoomdiv{
    width: 640px ;
    height: 640px ;
    padding: 0px;
    padding: 4px;
    border-radius: 5px; 
    border: 3px solid #c6ae98;
    overflow: scroll;
    

}

div.center{
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.flexrow{
    display: flex;
    flex-direction: row;
}


.flexcol{
    display: flex;
    flex-direction: column;
}

.outline{
    border:2px solid #dadada;
}

.flexcenter{
    align-items: center;
}

.margintop{
    margin-top: 1rem;
}

.sidebar{
    margin-right:1rem;
    margin-left:1rem;
    width: 25%;
    max-width: 200px;
    min-width: 140px;
    align-items: center;
    background: #2f2e2c;
    overflow-x:hidden;
    overflow-y: auto;
    padding: 0;
}



.gamerow{
    height: 70%;
    min-height: 650px;
    width: 90%;
}

.sidebar > * {
    width: 80%;
}

.group{
    margin: 1rem;
    background-color: #907d6b;
    border: 3px solid #c6ae98;
    padding: 2px;
    border-radius: 5px;
    text-align: center;
}

input{
    width: 100%;
    border-radius: 5px;
    margin: 1px;

}

input[type="color"]{
    border:none;
    border-radius: 5px;
}

div.disabled{
    background-color: grey;
    border: 3px solid #5a5a5a;
}

#uplabel{
    background-color: white;
    width:100%;
    margin: auto;
    border:1px solid grey;
}

#uplabel:hover{
    background-color: #bababa;
}

div#uplabel.disabled:hover{
    background-color: #dadada;
}

#colpinz{
    width: 80%;
    height: 20px;
    border-radius: 5px;
    border: 1px solid #c6ae98;
    background-color: #ffffff;
}

#colpinz:hover{
    border:1px solid #0c2f28;
}