.peg1 { background-image: var(--peg1-img); z-index: -1 }
.peg2 { background-image: var(--peg2-img); z-index: -1 }

.white1 {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nNDAuMDAwMDAwJyBoZWlnaHQ9JzQwLjAwMDAwMCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz4KPGc+CjxyZWN0IHg9JzAuMDAwMDAwJyB5PScwLjAwMDAwMCcgaGVpZ2h0PSc0MC4wMDAwMDAnIHdpZHRoPSc0MC4wMDAwMDAnIHN0cm9rZS1saW5lY2FwPSdudWxsJyBzdHJva2UtbGluZWpvaW49J3JvdW5kJyBzdHJva2UtZGFzaGFycmF5PSdudWxsJyBzdHJva2Utd2lkdGg9JzInIHN0cm9rZT0nd2hpdGUnIGZpbGw9J3doaXRlJy8+CjxjaXJjbGUgY3g9JzIwLjAwMDAwMCcgY3k9JzIwLjAwMDAwMCcgcj0nNC41MDAwMDAnIGZpbGw9J2JsYWNrJyAvPgo8L2c+Cjwvc3ZnPgo=);
}

.white2 {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nNDAuMDAwMDAwJyBoZWlnaHQ9JzQwLjAwMDAwMCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz4KPGc+CjxyZWN0IHg9JzAuMDAwMDAwJyB5PScwLjAwMDAwMCcgaGVpZ2h0PSc0MC4wMDAwMDAnIHdpZHRoPSc0MC4wMDAwMDAnIHN0cm9rZS1saW5lY2FwPSdudWxsJyBzdHJva2UtbGluZWpvaW49J3JvdW5kJyBzdHJva2UtZGFzaGFycmF5PSdudWxsJyBzdHJva2Utd2lkdGg9JzInIHN0cm9rZT0nd2hpdGUnIGZpbGw9J3doaXRlJy8+CjxjaXJjbGUgY3g9JzEwLjAwMDAwMCcgY3k9JzEwLjAwMDAwMCcgcj0nNC41MDAwMDAnIGZpbGw9J2JsYWNrJyAvPjxjaXJjbGUgY3g9JzMwLjAwMDAwMCcgY3k9JzMwLjAwMDAwMCcgcj0nNC41MDAwMDAnIGZpbGw9J2JsYWNrJyAvPgo8L2c+Cjwvc3ZnPgo=);
}

.white3 {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nNDAuMDAwMDAwJyBoZWlnaHQ9JzQwLjAwMDAwMCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz4KPGc+CjxyZWN0IHg9JzAuMDAwMDAwJyB5PScwLjAwMDAwMCcgaGVpZ2h0PSc0MC4wMDAwMDAnIHdpZHRoPSc0MC4wMDAwMDAnIHN0cm9rZS1saW5lY2FwPSdudWxsJyBzdHJva2UtbGluZWpvaW49J3JvdW5kJyBzdHJva2UtZGFzaGFycmF5PSdudWxsJyBzdHJva2Utd2lkdGg9JzInIHN0cm9rZT0nd2hpdGUnIGZpbGw9J3doaXRlJy8+CjxjaXJjbGUgY3g9JzIwLjAwMDAwMCcgY3k9JzIwLjAwMDAwMCcgcj0nNC41MDAwMDAnIGZpbGw9J2JsYWNrJyAvPjxjaXJjbGUgY3g9JzEwLjAwMDAwMCcgY3k9JzEwLjAwMDAwMCcgcj0nNC41MDAwMDAnIGZpbGw9J2JsYWNrJyAvPjxjaXJjbGUgY3g9JzMwLjAwMDAwMCcgY3k9JzMwLjAwMDAwMCcgcj0nNC41MDAwMDAnIGZpbGw9J2JsYWNrJyAvPgo8L2c+Cjwvc3ZnPgo=);
}
.white4 {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nNDAuMDAwMDAwJyBoZWlnaHQ9JzQwLjAwMDAwMCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz4KPGc+CjxyZWN0IHg9JzAuMDAwMDAwJyB5PScwLjAwMDAwMCcgaGVpZ2h0PSc0MC4wMDAwMDAnIHdpZHRoPSc0MC4wMDAwMDAnIHN0cm9rZS1saW5lY2FwPSdudWxsJyBzdHJva2UtbGluZWpvaW49J3JvdW5kJyBzdHJva2UtZGFzaGFycmF5PSdudWxsJyBzdHJva2Utd2lkdGg9JzInIHN0cm9rZT0nd2hpdGUnIGZpbGw9J3doaXRlJy8+CjxjaXJjbGUgY3g9JzEwLjAwMDAwMCcgY3k9JzEwLjAwMDAwMCcgcj0nNC41MDAwMDAnIGZpbGw9J2JsYWNrJyAvPjxjaXJjbGUgY3g9JzMwLjAwMDAwMCcgY3k9JzMwLjAwMDAwMCcgcj0nNC41MDAwMDAnIGZpbGw9J2JsYWNrJyAvPjxjaXJjbGUgY3g9JzMwLjAwMDAwMCcgY3k9JzEwLjAwMDAwMCcgcj0nNC41MDAwMDAnIGZpbGw9J2JsYWNrJyAvPjxjaXJjbGUgY3g9JzEwLjAwMDAwMCcgY3k9JzMwLjAwMDAwMCcgcj0nNC41MDAwMDAnIGZpbGw9J2JsYWNrJyAvPgo8L2c+Cjwvc3ZnPgo=);
}
.white5 {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nNDAuMDAwMDAwJyBoZWlnaHQ9JzQwLjAwMDAwMCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz4KPGc+CjxyZWN0IHg9JzAuMDAwMDAwJyB5PScwLjAwMDAwMCcgaGVpZ2h0PSc0MC4wMDAwMDAnIHdpZHRoPSc0MC4wMDAwMDAnIHN0cm9rZS1saW5lY2FwPSdudWxsJyBzdHJva2UtbGluZWpvaW49J3JvdW5kJyBzdHJva2UtZGFzaGFycmF5PSdudWxsJyBzdHJva2Utd2lkdGg9JzInIHN0cm9rZT0nd2hpdGUnIGZpbGw9J3doaXRlJy8+CjxjaXJjbGUgY3g9JzEwLjAwMDAwMCcgY3k9JzEwLjAwMDAwMCcgcj0nNC41MDAwMDAnIGZpbGw9J2JsYWNrJyAvPjxjaXJjbGUgY3g9JzMwLjAwMDAwMCcgY3k9JzMwLjAwMDAwMCcgcj0nNC41MDAwMDAnIGZpbGw9J2JsYWNrJyAvPjxjaXJjbGUgY3g9JzMwLjAwMDAwMCcgY3k9JzEwLjAwMDAwMCcgcj0nNC41MDAwMDAnIGZpbGw9J2JsYWNrJyAvPjxjaXJjbGUgY3g9JzEwLjAwMDAwMCcgY3k9JzMwLjAwMDAwMCcgcj0nNC41MDAwMDAnIGZpbGw9J2JsYWNrJyAvPjxjaXJjbGUgY3g9JzIwLjAwMDAwMCcgY3k9JzIwLjAwMDAwMCcgcj0nNC41MDAwMDAnIGZpbGw9J2JsYWNrJyAvPgo8L2c+Cjwvc3ZnPgo=);
}
.white6 {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nNDAuMDAwMDAwJyBoZWlnaHQ9JzQwLjAwMDAwMCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz4KPGc+CjxyZWN0IHg9JzAuMDAwMDAwJyB5PScwLjAwMDAwMCcgaGVpZ2h0PSc0MC4wMDAwMDAnIHdpZHRoPSc0MC4wMDAwMDAnIHN0cm9rZS1saW5lY2FwPSdudWxsJyBzdHJva2UtbGluZWpvaW49J3JvdW5kJyBzdHJva2UtZGFzaGFycmF5PSdudWxsJyBzdHJva2Utd2lkdGg9JzInIHN0cm9rZT0nd2hpdGUnIGZpbGw9J3doaXRlJy8+CjxjaXJjbGUgY3g9JzEwLjAwMDAwMCcgY3k9JzEwLjAwMDAwMCcgcj0nNC41MDAwMDAnIGZpbGw9J2JsYWNrJyAvPjxjaXJjbGUgY3g9JzMwLjAwMDAwMCcgY3k9JzMwLjAwMDAwMCcgcj0nNC41MDAwMDAnIGZpbGw9J2JsYWNrJyAvPjxjaXJjbGUgY3g9JzMwLjAwMDAwMCcgY3k9JzEwLjAwMDAwMCcgcj0nNC41MDAwMDAnIGZpbGw9J2JsYWNrJyAvPjxjaXJjbGUgY3g9JzEwLjAwMDAwMCcgY3k9JzMwLjAwMDAwMCcgcj0nNC41MDAwMDAnIGZpbGw9J2JsYWNrJyAvPjxjaXJjbGUgY3g9JzMwLjAwMDAwMCcgY3k9JzIwLjAwMDAwMCcgcj0nNC41MDAwMDAnIGZpbGw9J2JsYWNrJyAvPjxjaXJjbGUgY3g9JzEwLjAwMDAwMCcgY3k9JzIwLjAwMDAwMCcgcj0nNC41MDAwMDAnIGZpbGw9J2JsYWNrJyAvPgo8L2c+Cjwvc3ZnPgo=);
}
.black1 {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nNDAuMDAwMDAwJyBoZWlnaHQ9JzQwLjAwMDAwMCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz4KPGc+CjxyZWN0IHg9JzAuMDAwMDAwJyB5PScwLjAwMDAwMCcgaGVpZ2h0PSc0MC4wMDAwMDAnIHdpZHRoPSc0MC4wMDAwMDAnIHN0cm9rZS1saW5lY2FwPSdudWxsJyBzdHJva2UtbGluZWpvaW49J3JvdW5kJyBzdHJva2UtZGFzaGFycmF5PSdudWxsJyBzdHJva2Utd2lkdGg9JzInIHN0cm9rZT0nYmxhY2snIGZpbGw9J2JsYWNrJy8+CjxjaXJjbGUgY3g9JzIwLjAwMDAwMCcgY3k9JzIwLjAwMDAwMCcgcj0nNC41MDAwMDAnIGZpbGw9J3doaXRlJyAvPgo8L2c+Cjwvc3ZnPgo=);
}
.black2 {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nNDAuMDAwMDAwJyBoZWlnaHQ9JzQwLjAwMDAwMCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz4KPGc+CjxyZWN0IHg9JzAuMDAwMDAwJyB5PScwLjAwMDAwMCcgaGVpZ2h0PSc0MC4wMDAwMDAnIHdpZHRoPSc0MC4wMDAwMDAnIHN0cm9rZS1saW5lY2FwPSdudWxsJyBzdHJva2UtbGluZWpvaW49J3JvdW5kJyBzdHJva2UtZGFzaGFycmF5PSdudWxsJyBzdHJva2Utd2lkdGg9JzInIHN0cm9rZT0nYmxhY2snIGZpbGw9J2JsYWNrJy8+CjxjaXJjbGUgY3g9JzEwLjAwMDAwMCcgY3k9JzEwLjAwMDAwMCcgcj0nNC41MDAwMDAnIGZpbGw9J3doaXRlJyAvPjxjaXJjbGUgY3g9JzMwLjAwMDAwMCcgY3k9JzMwLjAwMDAwMCcgcj0nNC41MDAwMDAnIGZpbGw9J3doaXRlJyAvPgo8L2c+Cjwvc3ZnPgo=);
}
.black3 {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nNDAuMDAwMDAwJyBoZWlnaHQ9JzQwLjAwMDAwMCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz4KPGc+CjxyZWN0IHg9JzAuMDAwMDAwJyB5PScwLjAwMDAwMCcgaGVpZ2h0PSc0MC4wMDAwMDAnIHdpZHRoPSc0MC4wMDAwMDAnIHN0cm9rZS1saW5lY2FwPSdudWxsJyBzdHJva2UtbGluZWpvaW49J3JvdW5kJyBzdHJva2UtZGFzaGFycmF5PSdudWxsJyBzdHJva2Utd2lkdGg9JzInIHN0cm9rZT0nYmxhY2snIGZpbGw9J2JsYWNrJy8+CjxjaXJjbGUgY3g9JzIwLjAwMDAwMCcgY3k9JzIwLjAwMDAwMCcgcj0nNC41MDAwMDAnIGZpbGw9J3doaXRlJyAvPjxjaXJjbGUgY3g9JzEwLjAwMDAwMCcgY3k9JzEwLjAwMDAwMCcgcj0nNC41MDAwMDAnIGZpbGw9J3doaXRlJyAvPjxjaXJjbGUgY3g9JzMwLjAwMDAwMCcgY3k9JzMwLjAwMDAwMCcgcj0nNC41MDAwMDAnIGZpbGw9J3doaXRlJyAvPgo8L2c+Cjwvc3ZnPgo=);
}
.black4 {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nNDAuMDAwMDAwJyBoZWlnaHQ9JzQwLjAwMDAwMCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz4KPGc+CjxyZWN0IHg9JzAuMDAwMDAwJyB5PScwLjAwMDAwMCcgaGVpZ2h0PSc0MC4wMDAwMDAnIHdpZHRoPSc0MC4wMDAwMDAnIHN0cm9rZS1saW5lY2FwPSdudWxsJyBzdHJva2UtbGluZWpvaW49J3JvdW5kJyBzdHJva2UtZGFzaGFycmF5PSdudWxsJyBzdHJva2Utd2lkdGg9JzInIHN0cm9rZT0nYmxhY2snIGZpbGw9J2JsYWNrJy8+CjxjaXJjbGUgY3g9JzEwLjAwMDAwMCcgY3k9JzEwLjAwMDAwMCcgcj0nNC41MDAwMDAnIGZpbGw9J3doaXRlJyAvPjxjaXJjbGUgY3g9JzMwLjAwMDAwMCcgY3k9JzMwLjAwMDAwMCcgcj0nNC41MDAwMDAnIGZpbGw9J3doaXRlJyAvPjxjaXJjbGUgY3g9JzMwLjAwMDAwMCcgY3k9JzEwLjAwMDAwMCcgcj0nNC41MDAwMDAnIGZpbGw9J3doaXRlJyAvPjxjaXJjbGUgY3g9JzEwLjAwMDAwMCcgY3k9JzMwLjAwMDAwMCcgcj0nNC41MDAwMDAnIGZpbGw9J3doaXRlJyAvPgo8L2c+Cjwvc3ZnPgo=);
}
.black5 {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nNDAuMDAwMDAwJyBoZWlnaHQ9JzQwLjAwMDAwMCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz4KPGc+CjxyZWN0IHg9JzAuMDAwMDAwJyB5PScwLjAwMDAwMCcgaGVpZ2h0PSc0MC4wMDAwMDAnIHdpZHRoPSc0MC4wMDAwMDAnIHN0cm9rZS1saW5lY2FwPSdudWxsJyBzdHJva2UtbGluZWpvaW49J3JvdW5kJyBzdHJva2UtZGFzaGFycmF5PSdudWxsJyBzdHJva2Utd2lkdGg9JzInIHN0cm9rZT0nYmxhY2snIGZpbGw9J2JsYWNrJy8+CjxjaXJjbGUgY3g9JzEwLjAwMDAwMCcgY3k9JzEwLjAwMDAwMCcgcj0nNC41MDAwMDAnIGZpbGw9J3doaXRlJyAvPjxjaXJjbGUgY3g9JzMwLjAwMDAwMCcgY3k9JzMwLjAwMDAwMCcgcj0nNC41MDAwMDAnIGZpbGw9J3doaXRlJyAvPjxjaXJjbGUgY3g9JzMwLjAwMDAwMCcgY3k9JzEwLjAwMDAwMCcgcj0nNC41MDAwMDAnIGZpbGw9J3doaXRlJyAvPjxjaXJjbGUgY3g9JzEwLjAwMDAwMCcgY3k9JzMwLjAwMDAwMCcgcj0nNC41MDAwMDAnIGZpbGw9J3doaXRlJyAvPjxjaXJjbGUgY3g9JzIwLjAwMDAwMCcgY3k9JzIwLjAwMDAwMCcgcj0nNC41MDAwMDAnIGZpbGw9J3doaXRlJyAvPgo8L2c+Cjwvc3ZnPgo=);
}
.black6 {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nNDAuMDAwMDAwJyBoZWlnaHQ9JzQwLjAwMDAwMCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz4KPGc+CjxyZWN0IHg9JzAuMDAwMDAwJyB5PScwLjAwMDAwMCcgaGVpZ2h0PSc0MC4wMDAwMDAnIHdpZHRoPSc0MC4wMDAwMDAnIHN0cm9rZS1saW5lY2FwPSdudWxsJyBzdHJva2UtbGluZWpvaW49J3JvdW5kJyBzdHJva2UtZGFzaGFycmF5PSdudWxsJyBzdHJva2Utd2lkdGg9JzInIHN0cm9rZT0nYmxhY2snIGZpbGw9J2JsYWNrJy8+CjxjaXJjbGUgY3g9JzEwLjAwMDAwMCcgY3k9JzEwLjAwMDAwMCcgcj0nNC41MDAwMDAnIGZpbGw9J3doaXRlJyAvPjxjaXJjbGUgY3g9JzMwLjAwMDAwMCcgY3k9JzMwLjAwMDAwMCcgcj0nNC41MDAwMDAnIGZpbGw9J3doaXRlJyAvPjxjaXJjbGUgY3g9JzMwLjAwMDAwMCcgY3k9JzEwLjAwMDAwMCcgcj0nNC41MDAwMDAnIGZpbGw9J3doaXRlJyAvPjxjaXJjbGUgY3g9JzEwLjAwMDAwMCcgY3k9JzMwLjAwMDAwMCcgcj0nNC41MDAwMDAnIGZpbGw9J3doaXRlJyAvPjxjaXJjbGUgY3g9JzMwLjAwMDAwMCcgY3k9JzIwLjAwMDAwMCcgcj0nNC41MDAwMDAnIGZpbGw9J3doaXRlJyAvPjxjaXJjbGUgY3g9JzEwLjAwMDAwMCcgY3k9JzIwLjAwMDAwMCcgcj0nNC41MDAwMDAnIGZpbGw9J3doaXRlJyAvPgo8L2c+Cjwvc3ZnPgo=);
}

.barnum {
    position: absolute;
    margin: 0px;
    padding: 0px;
    width: 5%;
    height: 5%;
    pointer-events: none;
    z-index: 10;
}

.labelnum {
    position: absolute;
    margin: 0px;
    padding: 0px;
    width: 6.25%;
    height: 5%;
    z-index: 10;
}

.dice {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 80%;
    height: 100%;
}

.whitepiece { background-image: var(--white-piece-img); }
.blackpiece { background-image: var(--black-piece-img); }

.whitepiece, .blackpiece {
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    user-select: none;
}

.blackpiece:hover{
    cursor: grab;
}

.pieces {
    width: 97%;
    height: 16.6%;
}

.pieces, .whitepiece, .blackpiece {
    margin: 0px;
    padding: 0px;
    display: block;
    border: 0px;
    border-width: 0px;
    z-index: 1;
    border-radius: 50%;
}

.bars, .barsb, .peg1, .peg2 {
    position: absolute;
    margin: 0px;
    padding: 0px;
    width: 6.25%;
    height: 45%;
    cursor: pointer;
}

#whitebearoffname,.whitebearoffname, #blackbearoffname,.blackbearoffname {
    background-position: left;
}

#whitebearoffname,.whitebearoffname, #blackbearoffname,.blackbearoffname,.onbar {
    height: var(--bearoff-height);
    width: 6.25%;
}

.onbar {
    position: absolute;
    margin: 0px;
    padding: 0px;
    border: 1px solid black;
}

.body {
    margin: 0px;
    padding: 0px;
    border: 0px;
    color: #404040;
}

.boardbg {
    border: 0px;
    z-index: 0;
}

#boarddialog { }

.boardelements {
    user-select: none;
    -webkit-user-select: none;
}

.boardbg, .boardelements {
    max-height: 100vh;
    width: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
}

#boarddialog {
    width: 100%;
    margin: 0px;
    border: 0px;
    padding: 0px;
    left: 0px;
    top: 0px;
    position: relative;
    overflow: hidden;
}

#blackbearoff,.blackbearoff { top: var(--blackbearoff-top); }

@media (max-width: 800px) {
    #blackbearoff { top: 53%; }
    .barnum { font-size: 0.7em; }
    .boardstacknum { line-height: 180%; }
}

@media (max-width: 600px) {
    .barnum { font-size: 0.5em; }
    .boardstacknum { line-height: 150%; }
}

#boardtr { height: 100%; }

#tabpage1 > table { width: 100%; }

#tabcontent { width: 100%; }

#tabmenu {
    width: 100%;
    margin-top: 3px;
    margin-bottom: 3px;
}

#tabmenu:hover {
    cursor: n-resize;
}

.tabtablemiddle {
    height: 100%;
    width: 100%;
    overflow: auto;
}
.smalldice {
    width: 1.2em;
    height: 1.2em;
    margin: 2px;
    display: block;
    float: left;
}

.dicedata {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
}

h1.header {
    padding: 0;
    margin: 0;
}

div.left {
    position: relative;
    float: left;
    width: 90%;
    height: 90%;
    margin: 0;
    padding: 1em;
}

div.right {
    margin-left: 100%;
    height: 100%;
    border-left: 0.125% solid gray;
}

.page { z-index: -1; }

.tableexpand { }

.offpieces {
    position: relative;
    left: 10%;
    margin: 2px;
    width: 80%;
    z-index: 1;
    top: 3%;
}

.boardtable { width: 60%; height: 100%;}

.spinner { left: 44.375%; top: 40%; position:absolute;}

.lengthth,.scoreth { width: 6%; }
.lengthth,.scoreth { white-space: nowrap; }

.boardbg, .boardelements { }

#newboardtable, .duelchat, .infotd, #boarddialog, .tabtable, .tabtablemiddle, .tabcontent, .infotop, .infobottom, #blackbearoff,.blackbearoff, #whitebearoff,.whitebearoff, .PanelTopHeader {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

#newboardtable, .duelchat, .chatcontainer, .infotd, .infotop, .infobottom, #boarddialog, .tabtable, .tabtablemiddle, .tabcontent, #movelist1, #yourmove {
    flex-grow: 1;
    -webkit-flex-grow: 1;
    -ms-flex-grow: 1;
}

.duelchat, .infotd, #boarddialog, .tabtable, .tabtablemiddle, .tabcontent, .infotop, .infobottom,.blackbearoff,.whitebearoff {
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

#newboardtable {
    height: 100%;
    width: 100%;
    border-spacing: 0px;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}

.boardtd {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
}

.duelchat { flex-grow: 1; }

.boarddiv {
    position: relative;
    float: left;
}

.chatcontainer {
    border: 2px solid black;
    overflow: auto;
}

.duelchatinput { background-color: #e7e7e7; }

.duelchatinput, #tabmenu, #tabcommands {
    flex-grow: 0;
    -webkit-flex-grow: 0;
    -ms-flex-grow: 0;
}

.infotop {
    overflow-y: auto;
    overflow-x: hidden;
    background: white;
}

.tabtablemiddle, .tabcontent {
    -webkit-flex-basis: 10vh;
    -ms-flex-basis: 10vh;
    flex-basis: 10vh;
}

.tabcommands {
    -webkit-flex-basis: 3vh;
    -ms-flex-basis: 3vh;
    flex-basis: 3vh;
}

.PanelTopHeader, .tabcommands {
    flex-shrink: 0;
    -ms-flex-shrink: 0;
    -webkit-flex-shrink: 0;
}

.infotop, .infobottom {
    border: 1px solid black;
    overflow: auto;
}

.duelchat { min-height: 5vh; }

.whitepip, .blackpip { font-size: var(--pip-font-size);  }

.whiteclockframe, .blackclockframe { border: 1px solid black; }

.whiteclockframe,.blackclockframe {
    position: absolute;
    width: 7%;
    background: wheat;
    height: auto;
    text-align: center;
    z-index: 4;
    line-height: normal;
    font-family: sans-serif;
}

.whiteclockframe { top: 35.5%; z-index: 4; }
.blackclockframe { bottom: 35.5%; z-index: 4; }
.blackclockadd { bottom: -120%; }
.whiteclockadd { top: -120%; }

.whiteclockadd, .blackclockadd {
    float: right;
    background: var(--clock-background-color);
    color: black;
    border: 1px solid black;
    position: absolute;
    right: var(--clockadd-right);
    padding-left: 4px;
    padding-right: 4px;
}
                    
.whiteclock, .blackclock {
    position: relative;
    left: 0;
    top: 0;
    color: black;
}

.whiteclock, .blackclock { background-color: var(--clock-background-color); }

.framebuttons { position: absolute;  font-size: 0.8em; }
.bottombuttons { bottom: 0.5%; }
.leftbuttons { left: 0.5%; }
.rightbuttons { right: 0.5%; }
.topbuttons { top: 0.5%; }

.blackbearoffname, .blackbearoff { top: var(--blackbearoff-top); }

.over { background: highlight !important; }

.blackbearoff, .whitebearoff { overflow: hidden; }

#message_feedback, #opp_message_feedback {
    opacity: 0;
    transition: all 500ms;
    -webkit-transition: all 500ms;
    position: absolute;
    font-size: x-large;
    text-align: center;
    font-weight: 500;
    width: 25%;
}

#message_feedback { left: 60%; top: 42%; }
#opp_message_feedback { left: 15%; top: 42%; }

.fsnew { font-size: 0.7em; }

.boardstacknum {
    font-weight: bold;
    border-color: black;
    border-style: outset;
    background: wheat;
    border-radius: 50%;
    text-align: center;
    width: 80%;
    height: 100%;
    pointer-events: none;
    display: flex;
    align-content: center;
    flex-direction: column;
    justify-content: center;
}

.whitepipholder,.blackpipholder {
    position: absolute;
    left: 46.875%;
    width: 6.25%;
    text-align: center;
    background: var(--clock-background-color);
    border: 1px solid black;
    line-height: var(--pip-line-height);
    padding-bottom: var(--pip-padding-bottom);
}

.whitepipholder { top: 0.5%; }
.blackpipholder { bottom: 0.5%; }

.boardbuttondiv1, .boardbuttondiv3 {
    position: absolute;
    top: 55.0%;
    width: 37.5%;
    height: auto;
    text-align: center;
}

.boardbuttondiv1 { left: 53.75%; white-space: nowrap;}
.boardbuttondiv3 { left: 8.75%; }
.boardbutton2, .boardbutton4 { margin-left: var(--button2-margin); }
.boardbutton {
    margin-right: 2vw;
    padding-right: 14px;
    padding-left: 14px;
    padding-top: 3px;
    padding-bottom: 3px;
    box-shadow: 3px 3px 8px rgba(0,0,0,0.8);
}

.player_black, .player_white {
    position: absolute;
    width: 5%;
    height: 5%;
}

.player_black { top: 70%; }
.player_white { top: 15%; }

.scorecard {
    position: absolute;
    background: black;
    width: 15%;
    height: 8%;
    top: var(--scorecard-top);
}

.scorecontainer {
}

.whitescorecard, .blackscorecard, .lengthscorecard {
    text-align: center;
    position: absolute;
    line-height: var(--score-line-adjust);
}

.lengthscorecard { top: var(--lengthscorecard-top); }

.header_score {
    display: flex;
    position: relative;
    width: 20%;
    margin-right: 15px;
    margin-left: 15px;
}
.header_length {
    position: absolute;
    top: -11%;
    width: 32%;
    left: 34%;
    background: gray;
}
.header_white,.header_black {
    width: 30%;
    background: rgb(255 255 255);
    color: rgb(0 0 0);
    position: absolute;
}
.header_black { right: 0px; }
.header_white { left: 0px; }

.lengthscorecard {
    width: 5%;
    height: 5.5%;
    background: gray;
    color: white;
}

.lengthscorecard { font-size: 0.5em; }

.whitescorecard, .blackscorecard {
    width: 35%;
    height: 70%;
    width: 4%;
    height: 5%;
}


.whitescorecard, .blackscorecard { font-size: 0.8em; background: white; }
.whitescorecard { top: var(--whitescorecard-top); }
.blackscorecard { top: var(--blackscorecard-top); }

.barnames {
    white-space: nowrap;
    font-size: 3vw;
    font-weight: normal;
    position: absolute;
    margin: 0px;
    padding: 0px;
    width: 6.25%;
    overflow: hidden;
    border: 1px solid black;
    background-size: 100vw;
    background-image: url('../textures/birch_frame.png');
}

@media (min-width: 1000px) {
    #whitescorecard, #blackscorecard { font-size: large; }
    #barnames { font-weight: bold; }
}

.boardbutton {
    font-size: 1em;
}

@media screen and (orientation: portrait) and (max-width: 400px) {
    .boardbutton {
        padding-right: 6px;
        padding-left: 6px;
    }
    #tabmenu {
        margin-bottom: unset;
        margin-top: unset;
    }
    #movedetails { border: unset; }
    .topbuttons, .bottomrightbuttons {
        display: none;
    }
}

@media screen and (orientation: landscape) {
    #movedetails { border: unset; }
}

@media (max-width: 650px) {
    .whitescorecard,.blackscorecard { font-size: small; }
    .lengthscorecard { font-size: xx-small; }
}

.cubeimg {
    width: 100%; height:auto;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.cubetop { top: 7%; }
.cubebottom { top: 88%; }

.cubewhite,.cubeblack {
    position: absolute;
    top: 46.0%;
    width: 6%;
    height: 5%;
    z-index: 4;
}
.cubewhite { left: 23%; }
.cubeblack { left: 70%; }

@media (max-width: 700px) {
    #boardbuttondiv1 {
        left: 49%;
        width: 50%;
    }
    #boardbuttondiv3 {
        left: 4%;
        width: 50%;
    }
}

.cubetext {
    width: 100%;
    background-color: var(--clock-background-color);
    color: black;
    border: 2px solid black;
    border-radius: 10px;
    text-align: center;
    height: 3em;
    line-height: 3em;
}

.player_black, .player_white, #message_feedback, #opp_message_feedback {
    opacity: 0;
    -webkit-transition: opacity 1s;
}

.boff, .woff { z-index: 3; pointer-events: unset; }
.boff { top: 58%; }
.woff { top: 7%; }

.return {
    position: absolute;
    left: 46.875%;
    width: 6.25%;
    display: none;
    bottom: 65%;
    font-size: large;
    z-index: 10;
}

.extraundo {
    position: absolute;
    left: 46.875%;
    width: 6.25%;
    display: none;
    bottom: 6%;
    font-size: large;
    z-index: 10;
}

.player_black_alt {
    width: 4%;
    top: 67.75%;
}

.player_white_alt { width: 4%; }

.bflag, .wflag {
    transform: rotate(-90deg);
    z-index: 4;
    width: 5%;
    height: 5%;
    position: absolute;
}

.wflag { top: 8%; }
.bflag { top: var(--bflag-top); }

.barnamewhite,.barnameblack {
    left: 0.2em; 
    transform: rotate(-90deg);
    top: 78%;
    position: relative;
}

.boarddice { z-index: 10; }

.label1,.label2,.label3,.label4,.label5,.label6,.label7,.label8,.label9,.label10,.label11,.label12 { top: 0%; }
.label13,.label14,.label15,.label16,.label17,.label18,.label19,.label20,.label21,.label22,.label23,.label24 { top: 95%; }

.bar12,.bar11,.bar10,.bar9,.bar8,.bar7,.bar6,.bar5,.bar4,.bar3,.bar2,.bar1 { top: 5.2%; }
.bar24,.bar23,.bar22,.bar21,.bar20,.bar19,.bar18,.bar17,.bar16,.bar15,.bar14,.bar13,.bar25 { top: 50%; }