.node-start
{
    background-color: lightskyblue;
}

.node-end
{
    background-color: lightskyblue;
}

.node-traversed:not(.node-wall):not(.node-end):not(.node-start):not(.best)
{
    background-color: lightgreen;
    transition: background-color 250ms linear;
}

.node-wall
{
    background-color: white;
    border: 1px solid black !important;
    transition: background-color 500ms linear;
}

.node
{
    min-width: 43px;
    height: 38px;
}

td.node
{
    padding: 0;
    border-style: inset;
}

.node:not(.node-wall):hover
{
    background: lightskyblue;
}

.grid-icon
{
    padding: 7px;
    font-size: 1.25rem;
    color: white;
    padding: 5px;
    display: inline-block;
}

.grid-icon:hover, .grid-icon:active, .grid-icon:focus
{
    color: black;
    background-color: white;
    border-radius: 7px;
    text-decoration: none;
    cursor: pointer;
}

.best
{
    background-color: lightskyblue;
    transition: background-color 400ms linear !important;
}

.fade-in
{
    animation: fade-in 1500ms linear;
}

@keyframes fade-in
{
    from
    {
        background-color: initial;
    }
    to 
    {
        background-color: white;
    }
}