:root
{
    --black:#000000;
    --white:#ffffff;
}

html, body
{
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}

#canvas-container
{
}

#form-container
{
    display:none;
}

#grade-selection-container
{
    display:flex;
    flex-direction:column;
    justify-content:center;
    height:90%;
    margin-bottom: 10%;
}

#legend-container
{
    display:none;
}

#main-container
{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    width:100%;
    height:100%;
}

#pixi-canvas
{

}

#tool-title
{
    display:none;
}

.bg-black
{
    background-color:var(--black);
}

.bg-white
{
    background-color:var(--white);
}

.hgroup
{
    display:flex;
    flex-direction:row;
}

.hidden
{
    display:none !important;
}

.margin-top-20
{
    margin-top: 20px;
}

.margin-top-56
{
    margin-top: 56px;
}

.vgroup
{
    display:flex;
    flex-direction:column;
}

.width-100
{
    width: 100px;
}