.bamboo_peg {
    background-image: url(../textures/one_bamboo_peg.png);
    background-image: url(../svg/triangle.svg);
}

:root {
    --peg1-img: url(../textures/one_bamboo_peg.png);
    --peg2-img: url(../textures/one_mahogani_peg.png);

    --black-piece-img: url('../img/Dark1.png');
    --white-piece-img: url('../img/Light1.png');
    --top-background-color: teal;
    --bottom-background-color: teal;
    --sidebar-background-color: gray;

    --top-color: white;
    --bottomcolor: white;
    --sidebar-color: white;

    --user-background-color: "";
    --friend-background-color: "";
    --background-color: wheat;
    --clock-background-color: wheat;
    --background-image: url('../images/coin_trans2.png');
    --users-background: url('../images/coinback_trans2.png');
    --background-img-display: block;
    --background-size: "";
    --users-width: 300px;
    --users-font-size: 1em;
    --mobile-bgcolor: "";

    --bearoff-height: 38%;
    --blackbearoff-top: 56.5%;
    --cubemiddle-top: 47%;
    --cubemiddle-left: 1.5%;
    --cubemiddle-left-flipped: 92.75%;
    --whiteclockframe-top: 35.5%;
    --blackclockframe-top: 58.5%;
    --whiteclockadd-top: -120%;
    --blackclockadd-top: 110%;
    --scorecard-top: 46%;
    --lengthscorecard-top: 47.25%;
    --whitescorecard-top: 41%;
    --blackscorecard-top: 54%;
    --clockadd-right: 48%;
    --boff-top: 57%;
    --bflag-top: 59%;
    --table-border: 1px solid #d4d4d4;
    --dice-size: 3.5em;
    --black-dice-left: 67.25%;
    --white-dice-left: 22.25%;
    --button2-margin: 0vw;
    --score-line-adjust: "";
    --pip-font-size: 1.4vw;
    --pip-line-height: 1.0;
    --pip-padding-bottom: 3px;
}

.flx,.flex {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.fng {
    flex-grow: 0;
    -ms-flex-grow: 0;
    -webkit-flex-grow: 0;
}

.fns {
    flex-shrink: 0;
    -ms-flex-shrink: 0;
    -webkit-flex-shrink: 0;
}

.flr {
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}

.flc, .fdc {
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

.nogrow {
    flex-grow: 0;
    -ms-flex-grow: 0;
    -webkit-flex-grow: 0;
}

.grow {
    flex-grow: 1;
    -ms-flex-grow: 1;
    -webkit-flex-grow: 1;
}

.rm2 { margin-right: 2px; }
.rm4 { margin-right: 4px; }
.rm8 { margin-right: 8px; }
.lm2 { margin-left: 2px; }
.lm4 { margin-left: 4px; }
.lm8 { margin-left: 8px; }
.lm10 { margin-left: 10px; }
.lm12 { margin-left: 12px; }
.oh { overflow: hidden; }

.oa { overflow: auto; }
.oxh { overflow-x: hidden; }
.oyh { overflow-y: hidden; }
.oxa { overflow-x:auto; }
.oya { overflow-y:auto; }

.bx4 { box-shadow: 3px 3px 8px rgba(0,0,0,0.8); }
.tmb4 { width:400px; height:260px; }
header { overflow: hidden; }
.hi { height: inherit; }
.h100 { height: 100%; }
.ha { height: auto; }
.mh30v { max-height: 30vh; }
.mh70v { max-height: 70vh; }
.mh80v { max-height: 80vh; }
.mh90v { max-height: 90vh; }
.mh100 { height: 100%; }
.mih30v { min-height: 30vh; }
.mih80v { min-height: 80vh; }

.m2 { margin: 2px; }
.m20 { margin: 20px; }
.m10 { margin: 10px; }
.mx90 { max-width: 90vw; }
.mxw { width: max-content; }

.pa { position: absolute !important; }
.pr { position: relative; }
.t50 { top: 50%; }
.t0 { top: 0; }
.t4 { top: 4px; }
.l8 { right: 8px; }
.l3 { left: 3px; }
.l4 { left: 4px; }
.ma { margin: auto; }
.ma2 { margin: 2px; }
.ma4 { margin: 4px; }
.tc, .tac { text-align:center; }
.tal { text-align:left; }
.tar { text-align:right; }
.us0 { user-select:none; }
.pu { padding: unset; }
.p1 { padding: 1px; }
.p2 { padding: 2px;}
.pr { padding: revert; }

.bu { border: unset; }
.bb1 { border: 1px solid black; }
.aic { align-items: center; }
.bw { background-color: white !important; }
.bb { background-color: black !important; }
.cb { color: black !important }
.cw { color: white !important }
.pn { pointer-events: none }
.bc33 { background-color: #333333; }

.fb30 {
    -webkit-flex-basis: 30%;
    -ms-flex-basis: 30%;
    flex-basis: 30%;
}

.fb40 {
    -webkit-flex-basis: 40%;
    -ms-flex-basis: 40%;
    flex-basis: 40%;
}

.fb50 {
    -webkit-flex-basis: 50%;
    -ms-flex-basis: 50%;
    flex-basis: 40%;
}

.fb10 {
    -webkit-flex-basis: 10%;
    -ms-flex-basis: 10%;
    flex-basis: 10%;
}

.flg,.fg1 {
    flex-grow: 1;
    -ms-flex-grow: 1;
    -webkit-flex-grow: 1;
}

.fg0 {
    -ms-flex-grow: 0;
    flex-grow: 0;
    -webkit-flex-grow: 0;
}

.unsetbg { --bs-table-bg: unset; }
.blunderbg { background-color: #CD5C5C; color: #000000; }
.bg_blunder { background-color: #CD5C5C !important; }
.blunderbg a { color: #000000; }
.errorbg,.bg_half { background-color: yellow; color: #000000 !important; }
.errorbg a { color: #000000; }
.smallerrorbg { background-color: darkseagreen; color: #000000 !important; }
.smallerrorbg a { color: #000000; }
.bg_error { background-color: #8FBC8F !important; }
.noerrorbg { background-color: #F5F5DC; color: #000000; }
.noerrorbg a { color: #000000; }
.z-2 { z-index:-2}
.z-1 { z-index:-1}
.z1 { z-index: 1}
.dialogbutton { white-space: nowrap; }
.dialogclose,.closeboard { display: none; }
.hb { display: none; }
.off { display: none; }
.sb { display: block; }
.hv { visibility: hidden; }
.fs100 { font-size: 100%; }
.fs100p { font-size: 100px; }
.fsl { font-size: large; }
.fsx { font-size: x-large; }
.fss { font-size: small; }
.fsxs { font-size: x-small; }
.fs3e { font-size: 3em; }
.fsm { font-size: medium; }
.fr { float: right; }
.fl { float: left; }
.wsn { white-space: nowrap; }
.cp { cursor: copy; }
.cptxt { user-select: text; }

.l50 { left: 50%; }
.t25 { top: 25%; }
.t50 { top: 50%; }
.mr4 { margin-right: 4px; }
.ml4 { margin-left: 4px; }
.mr2 { margin-right: 2px; }
.ml2 { margin-left: 2px; }
.ml10 { margin-left: 10px; }
.ml20 { margin-left: 20px; }
.mr10 { margin-right: 10px; }
.ma { margin: auto; }
.mb20 { margin-bottom: 20px; }
.fwb { font-weight: bold; }
.w100  { width: 100%; }
.w99  { width: 99%; }
.w98  { width: 98%; }
.w96  { width: 96%; }
.w90 { width: 90%; }
.w85 { width: 85%; }
.w80 { width: 80%; }
.w75 { width: 75%; }
.w60 { width: 60%; }
.w50 { width: 50%; }
.w40 { width: 40%; }
.w30 { width: 30%; }
.w33 { width: 33%; }
.w20 { width: 20%; }
.w5 { width: 5%; }
.w50p { width: 50px; }
.w7 { width: 7%; }
.w10 { width: 10%; }
.w12 { width: 12%; }
.w15 { width: 15%; }
.wha { width: auto; height: auto; }

.wh100 { width: 100%; height: 100%; }
.p3 { padding: 3px; }
.wa  { width: auto; }

.w185 { width: 185px; }
.w800p { width: 800px; }
.w600p { width: 600px; }
.w500p { width: 500px; }
.w350p { width: 350px; }
.w300p { width: 300px; }
.w400p { width: 400px; }
.w200p { width: 200px; }
.w150p { width: 150px!important; }
.w100p { width: 100px; }
.w60v { width: 60vw; }
.w30v { width: 30vw; }
.h30h { height: 30vh; }
.h40h { height: 40vh; }
.h25p { height: 25px; }
.br50 { border-radius: 50%; }

.thtitle {
    float: left;
    margin-top: 1px;
}

.mb0 { margin-bottom: 0!important; }
.t2 { top: 2px !important; }
.l2 { left: 2px !important; }

.filterinput, .logtable {
    width: 100%;
}

@media (pointer: fine) {
    .hh:hover { font-weight: bold; font-size:large; }
    .bh:hover { border: 2px solid blue; box-sizing: border-box; }
}
.yellow { color:yellow; }

.tablecheck {
    width: 20px;
    height: 16px;
}

.stk { position: sticky; top: 0; background:white;}
.stk2 { position: sticky; top: 53px; background:white;}

.thcol {
    color:#ffffff;
    background-color:#555555;
    border:1px solid #555555;
    height:30px;
}

.ybutton {
    width:100%;
    height: 30px;
}
.section {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-grow: 1;
    flex-grow: 1;
    flex-direction: column;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
}

.table-fixed {
    table-layout: fixed;
}

.dark-mode {
    background-color: black !important;
    color: white !important;
}
.thumbs { float:left }

.dropdown {
  position: relative;
  display: inline-block;
}

.bmenuitem {
}


.bmenu {
    position: absolute;
    top: 5px;
    left: 5px;
}

@media (max-width: 1200px) {
    .bmenu { top: 3px; left: 11px; }
    #newboard0 * .btn {line-height:1.2;}
    :root {
        --dice-size: 2em;
    }
}
@media (min-width: 1600px) {
    .bmenu { top: 5px; left: 1em; }
    .bmenu > button { width:4vw; }
}

.show { display: block; }
.showTD { display: table-cell; }
.showTR { display: table-row; }

.thumbs { margin-left: 4px; margin-bottom: 10px; position: relative; }

.thumbs::after {
    content: '';
    display: none;
    width: 15px;
    height: 15px;
    background-color: blue;
    border-radius: 50%;
    position: absolute;
    top: 3px;
    right: 3px;
}

.thumbs.imageviewcheck::after { display: block; }

#findmatches {min-width: 200px;}

.boardimg {
    width: 360px;
    height: auto;
}

@media (max-width: 500px) {
    .boardimg {
        width: 340px;
    }
}

.thumbshadow {
    box-shadow: 3px 8px 8px rgba(0,0,0,0.8);
}

#main {
    --bs-gutter-x: unset;
}

.flagimg { height:18px; }
.flag { width: 32px; height: 20px; margin-top: 1px;}

.rtdiv { width: 100px; }

.dialog {
    display: none;
    position: absolute;
    padding: 4px;
    margin: 4px;
    border: 3px solid black;
    z-index: 2;
    overflow: auto;
    background-color: white;
}

.statustd, .settd, .bstd, #rushbutton,.champtd,.scheduletd, .htd2, .htd1, .htd3, .htd4, .featuretd, .moretr, .ctmoretr, .mline, .cmoretd, .extr, .maintr {
    display: none;
}

.closebutton {
    float: right;
    margin-left: 4px;
}

.oppbutton {
    margin-right: 4px;
    float: left;
}

img {
    vertical-align: middle;
}

.boardbuttondiv1,.boardbuttondiv3 {
    z-index: 10;
}

#vdiv { position: absolute; top: 5px; right: 5px; }


.grid2col {
    display: grid;
    grid-template-columns: auto auto;
}

.grid3col {
    display: grid;
    grid-template-columns: auto auto auto;
}

.grid4col {
    min-width: 242px;
    display: grid;
    grid-template-columns: auto auto auto auto;
}

.grid-c-s-1 { grid-column-start: 1; }
.grid-c-s-3 { grid-column-start: 3; }
.grid-c-e-4 { grid-column-end: 4;}
.grid-c-e-3 { grid-column-end: 3;}
.grid-r-s-2 { grid-row-start: 2; }
.grid-r-s-3 { grid-row-start: 3; }
.grid-r-e-7 { grid-row-end: 2; }
.grid-r-e-8 { grid-row-end: 8; }
.grid-r-e-9 { grid-row-end: 9; }

#mainheader2  {
    display: none;
}

.portrait100 { }

@media screen and (orientation: portrait) {
    .portrait100 { width: 100%; }
    #sidemenu { width: 100% !important; }
    #mainheader  { display: none !important; }
    #mainheader2  { display: block; }
}

.sitetitle::after { content: attr(data-value); }

@media screen and (max-height: 500) {
    .b_autoroll,.b_full { display: none; }
    .sitetitle::after { content: "BS 2"; }
}

.logindiv { overflow: auto; }

.fullscreen {
    top: 0px;
    left: 0px;
    width: 100vw;
    max-width: 100vw;
    max-height: 100vh;
    max-height: 100dvh;
    height: 100vh;
    height: 100dvh;
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}

#searchthumbs {
    margin-left: 20px;
}

#highscoredialog {
    min-height: 400px;
    min-width: 300px;
}

.flexchat {
    width: 100%;
    height: 100%;
    resize: both;
    background: rgb(231, 231, 231);
}

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

.largescreen {
    box-shadow: 20px 20px 40px 1px #656565;
    overflow: auto;
    margin: 0 10px auto;
    background: white;
    max-height: 90vh;
    padding: 0px;
    margin: 0px;
    left: 20vw;
    width: 60vw;
    box-sizing: border-box;
}


@media screen and (orientation: landscape) {
    .largescreen {
    }
}
@media screen and (orientation: portrait) {
    .largescreen {
        background: white;
        max-height: 90vh;
        left: 10px !important;
        width: 95vw !important;
    }
}

.mxfill {
    max-width: 100dvw;
    max-width: -webkit-fill-available;
}

.imageviewcheck {
    // outline: 4px solid blue !important;
    // box-shadow: inset 0 0 0 5px blue, 3px 8px 8px rgba(0,0,0,0.8);
    // box-shadow: inset 0 0 0 4px blue !important;
    // border: 4px solid blue !important;
}

#quizhighscore { min-width:320px; }
#aboutquiz { max-width: 40vw; }

.min320 { min-width:320px; }
.min400 { min-width:400px; }

#roombhead { position: sticky; top:0; background: white; }
#sidemenu { padding: unset !important; }
.searchcontainer {flex-wrap: nowrap; }