.light {
    background-color:antiquewhite;
}

.dark {
    background-color:burlywood;
}

.dark, .light {
    padding-bottom: 0px !important;
    width: var(--getsize);
    height: var(--getsize);
    vertical-align: bottom;
    -webkit-user-drag: none;
    user-select: none;
    z-index: inherit;
}


.light.selected {
    background-color:rgb(250, 246, 215);
}

.dark.selected {
    background-color:rgb(222, 205, 135);
}

/* use when the piece can be captured or the king is in check */
.light.capture {
    background-color: rgb(250, 225, 215);
}

.dark.capture {
    background-color: rgb(222, 163, 135);
}

.piece {
    display: block !important;
    width: var(--getsize);
    height: var(--getsize);
    -webkit-user-drag: none;
    user-select: none;
    z-index: 2 !important;
    position: static;
}

#board {
    position:absolute;
    table-layout: fixed !important;
    z-index: 0;
    display:flex !important;
}

/*
img.K.w {
    opacity: 100%;
}*/

img.piece:hover {
    cursor: grab;
}

img.piece:active:hover {
    cursor: grabbing;
}

#getBoard {
    position:relative;
    display: flex;
    z-index: 0 !important;
}

.inlight, .indark {
    position:absolute;
    z-index: 1 !important;
    font-size: var(--getfont);
    user-select: none;
    font-weight: 600;
}

.indark {
    color:antiquewhite;
}

.inlight {
    color:burlywood;
}

body {
    display: flex;
    flex-direction: column;
}

tr {
    display: flex;
}