ball {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    margin: 0.2em;
    display: grid;
    /* grid-template-rows: 1fr; */
    /* grid-template-columns: 1fr; */
    color: #ededed;
    width: 5em;
    /* height: 5em; */
    border: solid .2em black;
    border-radius: 50%;
    background-color: red;
    position: relative;
}

ball ballbody {
    display: block;
    width: -webkit-fill-available;
    height: -webkit-fill-available;
    background-color: #f9f0d9;
    border-radius: 50%;
}

ball num {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: content-box;
    color: black;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #f9f0d9;
    font-size: 3.75vh;
    align-content: center;
    width: 50%;
    height: 50%;
    padding: 0;
    border: solid .1em;
    border-radius: 50%;
    font-weight: bold;
    text-align: center;
}

stripe {
    background-color: transparent;
    border-radius: 33.33% 33.33%;
    display: block;
    position: absolute;
    left: 49.75%;
    top: 50%;
    transform: translate(-50%,-50%) rotate(0deg);
    width: 100%;
    height: 50%;
}

ball[num="1"]  {border-color: #747474;}
ball[num="2"]  {border-color: #747474;}
ball[num="3"]  {border-color: #747474;}
ball[num="4"]  {border-color: #747474;}
ball[num="5"]  {border-color: #747474;}
ball[num="6"]  {border-color: #747474;}
ball[num="7"]  {border-color: #747474;}
ball[num="8"]  {border-color: #747474;}

ball[num="1"] ballbody {background: #fdc101;}
ball[num="2"] ballbody {background: #2f5fc3;}
ball[num="3"] ballbody {background: #ff3d3c;}
ball[num="4"] ballbody {background: #393f79;}
ball[num="5"] ballbody {background: #e75611;}
ball[num="6"] ballbody {background: #126d18;}
ball[num="7"] ballbody {background: #8d0303;}
ball[num="8"] ballbody {background: #212223;}


ball[num="9"] stripe {background-color: #fdc101;}
ball[num="10"] stripe {background-color: #2f5fc3;}
ball[num="11"] stripe {background-color: #ff3d3c;}
ball[num="12"] stripe {background-color: #393f79;}
ball[num="13"] stripe {background-color: #e75611;}
ball[num="14"] stripe {background-color: #126d18;}
ball[num="15"] stripe {background-color: #8d0303;}
ball[num="61"] stripe {background-color: hotpink;}

ball[num="0"] {
    visibility: hidden;
}

ball[num="16"] num {
    border: none;
    width: max-content;
    height: max-content;
    display: grid;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    /* border-top: solid 3px red; */
    /* border-bottom: solid 3px red; */
    border-radius: 0;
    background-color: transparent;
    color: red;
    font-size: 200%;
}

ball[status="stripe"] num, ball[status="solid"] num {
    visibility: hidden;
}

ball[status="stripe"], ball[status="solid"] {
    filter: grayscale(1);
}

ball[status="solid"] ballbody {
    filter: grayscale(1);
    background-color: #747474;
}

ball[status="stripe"] stripe {
    filter: grayscale(1);
    background-color: #747474;
}

ball[status="red"] num {
    border: solid 6px #fdc101;
    color: #fdc101;
}
ball[status="red"][num="1"] {
    border-color: #fdc101;
}
ball[status="green"] num {
    border: solid 6px #126d18;
    color: #126d18;
}
ball[status="green"][num="6"] {
    border-color: #126d18;
}
ball[status="blue"] num {
    border: solid 6px #ff3d3c;
    color: #ff3d3c;
}
ball[status="blue"][num="11"] {
    border-color: #ff3d3c;
}
ball[status="red"] ballbody, ball[status="green"] ballbody, ball[status="blue"] ballbody,
ball[status="red"] stripe, ball[status="green"] stripe, ball[status="blue"] stripe
{
    filter: grayscale(1) brightness(0.65);
}
ball[status="red"][num="1"] ballbody, ball[status="red"][num="1"] stripe,
ball[status="green"][num="6"] ballbody, ball[status="green"][num="6"] stripe, 
ball[status="blue"][num="11"] ballbody, ball[status="blue"][num="11"] stripe
{
    filter: none;
} 
 
ball[num="16"] {
    /* border-color: red; */
}

/*** selected ***/
ball.selected {border: solid min(.75vw,.75vh) lime;}
ball[num="16"].selected {border-color: red;}

/*** decoration ***/
ball[dec="1"] num {border: solid min(1vh,1vw) gold;color: darkgoldenrod}       /* target */
ball[dec="3"] num {border: solid 6px red; color: indianred}            /* red */
ball[dec="4"] num {border: solid 6px limegreen; color: green}          /* green */

/*** position & location ***/
   /* onTable, inPocket */
      ball[pos="1"][loc="2"] {zoom: 0.75; filter: grayscale(0) brightness(.4)}

ball[b="17"] num {
    border: none;
    width: 100%;
    height: 100%;
    background-color: #ddcbce;
    color: red;
}
ball[b="17"] num:after {
    content: 'NO Balls';
    font-size: 83%;
    line-height: .9;
    text-align: center;
    display: grid;
}

theTable ball[num="18"] {
    border-color: white;
   width: 75%;
    height: 75%;
    align-self: center;
    justify-self: center;
}

theTable ball[num="18"] num {
    background-color: white;
    border-color: white;
    width: 25%;
    height: 25%;
}

theTable ball[num="18"] ballbody {
    background-color: black;
}


ball[loc="2"] {
    width: 50%;
    filter: grayscale(.75);
    border-width: 1px;
    border-color: #747474;
}
ball[loc="2"] num {
    font-size: .5em;
}