input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }

.divTimerFrame { position: relative;   }

.bfxFlexP2 { width: 100%; display: flex; justify-content: space-between; }
.cppT1x { display: flex; flex-direction: row; width: 250px; gap: 5px; position: relative; }
.cppBnr { width: 100%; height: 70px; position: relative; background: url('/xp/assets/images/icon/ppBanner.jpg') }
.cppTitle { width: 100%; min-height: 60px; margin: -5px 0 15px 0; color: greenyellow; font: 36px elephant, arial; text-align: left; position: relative; }
.cppTitle { background: black; padding: 4px 0 4px 7px; border-bottom: 1px solid greenyellow; }
.cppTitle img { max-height: 56px; width: auto; }
.cppTitleGno { position: absolute; color: #00d2ff; font: 24px elephant, arial; text-align: left; bottom: 6px; right: 7px; }
.cppGameGno { position: absolute; color: #00d2ff; font: 24px elephant, arial; text-align: left; left: -20px; top: 120px; background: black; border-radius: 20%; padding: 5px; }
.cppT1 { width: 180px; min-width: 180px; position: relative; }
.cppT2 { width: 160px; min-width: 160px; position: relative; }
.cppT2b { width: 175px; min-width: 175px; position: relative; }
.cppT2x { width: 260px; position: relative; }
.cppT3x { width: 160px; min-width: 160px; position: relative; }
.cppTW { width: 200px; position: relative; }
.cppT2x { display: flex; flex-direction: column; width: 200px; gap: 5px; }
.cppT3x { display: flex; flex-direction: row; width: 160px; gap: 5px; }

.cppRules { margin: 20px 0 0px 0;  }
.cppTBtn { width: 40px; height: 40px; }

/*[class*="cppTBtn-"] { position: absolute; width: 38px; height: 38px; z-index: 1000; padding: 1px 4px; vertical-align: middle; left: 185px; }*/

.cppBtnPP { width: 260px; }
.cppBtnPPW { width: 200px; }
.cppGameImg { width: 160px; }
.cppLogoImg { width: 180px; }
@media screen and (max-width: 768px) {
    .cppT2 { width: 170px; }
    .cppBtnPP { width: 170px; }
    .cppBtnPPW { width: 170px; }
}

.cppTBtn-BPxx { position: absolute; top: 0px; left: 195px; width: 38px; height: 38px; padding: 1px 4px;}
.cppTBtn-BMxx { position: absolute; top: 44px; left: 195px; width: 38px; height: 38px; padding: 1px 4px;}
.cppTBtn-RP { top: 80px; }
.cppTBtn-RM { top: 120px; }
.cppTBtn_GRS { position: absolute; left: -15px; top: 137px; z-index: 2; }
.cppTBtn_Cfg { position: absolute; left: 144px; top: 137px; z-index: 2; }
.cppTBtn_Set { position: absolute; left: 155px; bottom: -5px; z-index: 2; }
.cppTBtn_SetTop { position: absolute; left: 155px; top: -5px; z-index: 2; }
/* .cppTBtn-Play { width: 58px; height: 58px; display: inline-flex; align-items: center;
  justify-content: center; padding: 0; box-shadow: 0 2px 6px rgba(0, 0, 0, .28); }
.cppTBtn-Play svg { width: 28px; height: 28px; } */
#btnBtPlusX   { position: absolute; left: 190px; top: 95px; width: 30px; height: 30px; padding: 1px 4px; z-index: 10; }
#btnBtMinusX  { position: absolute; left: 190px; top: 130px; width: 30px; height: 30px; padding: 1px 4px; z-index: 10; }
#btnBtMinus  { position: absolute; left: 0px; top: 167px; width: 85px; height: 25px; padding: 0 0 0 0; z-index: 10; }
#btnBtPlus   { position: absolute; left: 95px; top: 167px; width: 85px; height: 25px; padding: 0 0 0 0; z-index: 10; }

.myHdr { font-size: 1.6em; }

.myBtn { padding: 1px 4px; color: white; vertical-align: middle; outline: none; /*display: none;*/ }

    .myBtn:focus { outline: none; box-shadow: none; }

.mySmBtn { height: 3.0em; }

.cppMain { margin-top: 0px; }
@media screen and (min-width: 1100px) {
    .cppMain { padding: 20px 40px !important; }
}

.cppLogoOff { width: 37px; min-width: 37px; }
.cppLogoOn { background-image: url("/xp/assets/images/xp/ppLogo35.png"); background-repeat: no-repeat; width: 37px; min-width: 37px; }

.cppName { font-family: 'Terminator Two'; font-size: 20px; font-weight: 700; color: red; text-align: left; }

[class*="cppFld-"] { /* base fld properties */ }

.cppBase { font-family: 'Terminator Two'; font-size: 18px; font-weight: 500; }

.cppRed { color: red; }
.cppBlue { color: dodgerblue; }
.cppGold { color: yellow; }
.cppPoints { color: lime; }
.cppPurple { color: mediumorchid; }

.cppRuleTbl { background: black; }
    .cppRuleTbl th { padding: 0 0 0 5px; margin: 0px; background: black; }
    .cppRuleX th { padding: 0 0 0 0; margin: 0px; background: black; }
    .cppRuleTbl td { padding: 5px 5px 5px 5px; margin: 0px; }
.cppRuleTblx { padding: 3px; margin: 5px; width: 100%; }
    .cppRuleTblx th { background-color: darkgray; padding: 3px; margin: 5px; border-bottom: solid #000000 1px; }
    .cppRuleTblx td { background-color: lightgray; padding: 5px; margin: 5px; border-bottom: solid #c2c2c2 1px; }
.cppRules,
.cppRules .cppRuleTbl,
.cppRules .cppRuleTblx {
    background: black;
    color: greenyellow;
}
.cppRules th,
.cppRules td,
.cppRules .cppRuleTblx th,
.cppRules .cppRuleTblx td {
    background-color: black;
    color: yellow;
    border-color: #335500;
}
.cppRules .cppSpin {
    background-color: white;
    color: black;
    border-color: #335500;
}
.cppRules .btn svg,
.cppRules .glyphicon,
.cppRules .pzIcon-plus,
.cppRules .pzIcon-minus {
    width: 1.35rem;
    height: 1.35rem;
    font-size: 1.35rem;
    line-height: 1;
    vertical-align: -0.2em;
}
.cppRuleTh { width: 4em; }
.cppRuleX { width: 100em; }
.xxxcppRuleTd { width: 30px; }
.cppRuleCnt { width: 30px; }
.cppSpin { padding: 1px; font-weight: 500; }

.cppPlayerTblx td { padding: 2px 5px; border-bottom: solid #c2c2c2 1px; text-align: right; }
.cppPlayerTbl td { padding: 2px 5px; border-bottom: solid red 1px; text-align: right; }
.cppPlayerTbl .cppName { text-align: left; width: 12em; }
.cppPlayerTbl .cppPoints { width: 7em; }
.cppPlayerTbl th { padding: 3px; border-bottom: solid #000000 2px; }

.cppHdrBannerWrap { text-align: center; position: relative; background: black; border-top: 1px solid red; border-bottom: 1px solid red; padding: 0px; margin-bottom: 10px; }
.cppRuleBannerWrap { text-align: center; position: relative; background: black; border-top: 1px solid red; border-bottom: 1px solid red; padding: 10px; }
.cppRuleBanner { max-width: 100%;}  /* #00d2ff is a nice blue */
.cppRuleTitleWrap { width: 100%; text-align: center; position: absolute; top: 28%; left: 0px; }
.cppRuleTitleXX { font: 26px elephant, arial; background: black; color: yellow; border-top: 1px solid red; border-bottom: 1px solid red; padding: 10px; margin-top: 8px; }
.cppRuleTitle { font: 28px elephant, georgia; background: transparent; color: yellow;  margin-top: 0px; position: relative; }

  @media screen and (max-width: 767px) { .cppRuleTitle { font-size: 20px; margin-top: 0px; } }
  @media screen and (max-width: 580px) { .cppRuleTitle { font-size: 18px; margin-top: 0px; } }
  @media screen and (max-width: 460px) { .cppRuleTitle { font-size: 14px; margin-top: 0px; } }
/*  @media screen and (min-width: 768px) { .cppRuleTitle { }} */

.cppRuleInfo1 { font: 18px elephant, arial; background: black; color: yellow; border-bottom: 1px solid red; padding: 10px; 
                word-wrap: break-word; white-space: pre-line; text-align: center; }
.cppRuleInfo2 { font: 14px elephant, arial; font-weight: 300; background: black; color: yellow; padding: 10px; border-bottom: 1px solid red; }
.cppRuleInfo3 { font: 10px elephant, arial; font-weight: 300; background: black; color: red; padding: 2px 10px; border-bottom: 1px solid red; text-align: right; }
.cppRuleNotes { font: 14px tahoma, arial; background: black; color: yellow; padding: 10px; border-bottom: 1px solid red; }
.cppRuleNotesBtmX { font: 16px elephant, arial; background: black; color: #00d2ff; border-bottom: 1px solid red; padding: 0 5px 3px 0; text-align: end; }

.cppRuleInfoTbl { width: 100%; background: black; border-color: black; }
.cppRuleInfoTbl tr {  padding: 3px;  border-bottom: solid #000000 2px; }
.cppRuleInfoTbl td {  padding-left: 10px;}
.cppRuleInfo2 td { border-bottom: none; }

.xxxball-selector input { margin: 0; padding: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.ball-selector { display: flex; flex-direction: row; gap: 5px; }
.ball-selector input { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.ball1 { background-image: url(/xp/assets/images/xp/ball_1.png); }
.ball2 { background-image: url(/xp/assets/images/xp/ball_2.png); }
.ball3 { background-image: url(/xp/assets/images/xp/ball_3.png); }
.ball4 { background-image: url(/xp/assets/images/xp/ball_4.png); }
.ball5 { background-image: url(/xp/assets/images/xp/ball_5.png); }
.ballXB { background-image: url(/xp/assets/images/xp/ball_xb.png); }
.exchBlue { background-image: url(/xp/assets/images/xp/ball_blue_buy.png); }
.exchGold { background-image: url(/xp/assets/images/xp/ball_gold_buy.png); }

.ball-selector { text-align: left; margin-left: -7px; }
    .ball-selector input:active + .lblBall { opacity: .9; }
    .ball-selector input:checked + .lblBall { -webkit-filter: none; -moz-filter: none; filter: none; }
.lblBall { cursor: pointer; background-size: contain; background-repeat: no-repeat; display: inline-block; width: 40px; height: 40px; -webkit-transition: all 100ms ease-in; -moz-transition: all 100ms ease-in; transition: all 100ms ease-in; -webkit-filter: brightness(1.8) grayscale(1) opacity(.7); -moz-filter: brightness(1.8) grayscale(1) opacity(.7); filter: brightness(1.8) grayscale(1) opacity(.7); }
    .lblBall:not(.ballXB):hover { -webkit-filter: brightness(1.2) grayscale(.5) opacity(.9); -moz-filter: brightness(1.2) grayscale(.5) opacity(.9); filter: brightness(1.2) grayscale(.5) opacity(.9); }

    /* Extras */
    .lblBall a:visited { color: #888 }
    .lblBall a { color: #444; text-decoration: none; }
    .lblBall p { margin-bottom: .3em; }

.picChk-group input { margin: 5px; padding: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.picChk-group { text-align: left; margin-left: 0px; }
    .picChk-group input:active + .lblPicChk { opacity: .9; }
    .picChk-group input:checked + .lblPicChk { -webkit-filter: none; -moz-filter: none; filter: none; }
.lblPicChk { cursor: pointer; background-size: contain; background-repeat: no-repeat; display: inline-block; width: 40px; height: 40px; -webkit-transition: all 100ms ease-in; -moz-transition: all 100ms ease-in; transition: all 100ms ease-in; -webkit-filter: brightness(1.8) grayscale(.7) opacity(.9); -moz-filter: brightness(1.8) grayscale(.7) opacity(.9); filter: brightness(1.8) grayscale(.7) opacity(.9); }
.lblPcg { margin: .4rem 0 0 1rem; font-weight: 600; }

.circle { /*background: rgba(72, 156, 234, 1);*/ border-radius: 50%; height: 30px; width: 30px; position: relative; /*box-shadow: 0 0 0 5px #F1F1F1;*/ box-shadow: 0 0 7px rgba(81, 203, 238, 5); margin: -7px 10px 0px -10px; /*color: #6F0;*/ color: #fff; vertical-align: middle; display: inline-block; }
.text_circle { font-size: 9px; font-weight: 700; margin-bottom: 5px; line-height: 30px; }

.no-select { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; }
/*#divFullScreen { background-color: white; }*/
#plyInfo { font-size: 1.2em; }
/* #qmgLkupGameId input { display: inline-block; } */

.scoreTbl { padding: 10px; }
    /*.scoreTbl th { font-weight: 600; text-align: center; }*/
    .scoreTbl td { }
/* .scorePosTd { width: 5rem; } */
.scoreNameTh { width: 10rem; }
.scoreScoreTh { width: 10rem; text-align: center; }
.scorePos { width: 2rem; }
.scoreTd input { text-align: right; }
.scoreNameTd { }
.scoreScoreTd { }
.scoreBonusTd { text-align: right; padding-right: 10px; }
.scorePosTd { text-align: right; padding-right: 10px; }

.ppcScNum { text-align: right; font-weight: 600; }
.ppcScBonus { color: greenyellow; text-align: right; font-weight: 500; }
.ppcScTotal { color: greenyellow; border-top: 1px solid greenyellow; text-align: right; font-weight: 500; }
.ppcCurState { font: 17px elephant, arial; background: black; width: 180px; height: 30px; color: red; padding: 0; text-align: center;  padding-top: 2px;
               position: absolute; left: 0px; top: 0px; }
.ppcCurTimer { font: 17px elephant, arial; background: black; width: 60px; height: 30px; color: red; padding: 0; text-align: center; padding-top: 2px;
               position: absolute; left: 140px; top: 133px; }
.ppcType { font: 17px elephant, arial; background: black; width: 180px; height: 30px; color: red; margin: 10px 0 0px 0; padding: 2px 0 0 0; text-align: center; }
.ppcTopLBox { position: relative; }
.ppcSelWhl { position: absolute; top: -110px; left: -50px; }
.ppcBtnReg { font: 17px elephant, arial; background: black; width: 100px; height: 30px; color: red; margin: 0px 0 0px 0; padding: 2px 0 0 0; text-align: center; cursor: pointer; }
.ppcTitle { font: 26px elephant, arial; background: black; color: #00d2ff; border-top: 1px solid red; border-bottom: 1px solid red; padding: 10px; }
.ppcNotes { font: 14px tahoma, arial; background: black; color: yellow; padding: 10px; }
.ppcNotesBtm { font: 16px elephant, arial; background: black; color: #00d2ff; border-bottom: 1px solid red; padding: 0 5px 3px 0; text-align: end; }
.ppcNotesBtmX { font: 16px elephant, arial; background: black; color: #00d2ff; border-bottom: 1px solid red; padding: 0 5px 3px 0; }
.ppcNotesBtmL { text-align: left; margin-left: 10px; position: relative; }
.ppcNotesBtmR { text-align: end; }
.ppcSbTitleX { font: 16px elephant, arial; text-align: center; color: greenyellow; margin: 0px 0px; }
.ppcSbTitle { font: 26px elephant, arial; text-align: center; color: #00d2ff; margin: 0 0 10px 0; padding: 0; width: 100%; }
.ppcSbAddBtn { position: absolute; top: 14px; left:  14px; }
.ppcSbRefresh { position: absolute; top: 10px; right: 10px; }
.ppcScoreBoard { width: 100%; padding: 10px; background: black; position: relative; margin-top: 5px; }
.ppcScoreTbl { width: 100%; padding: 10px; }
.ppcLogo { margin: 0; padding: 0; width: 60px; }
.ppcName { font-family: 'Terminator Two'; font-size: 20px; font-weight: 700; color: red; text-align: left; }
.ppcCutoffTd { background: red; text-align: center; }

#divPlayers { background: black; width: 100%; text-align: center; padding: 10px; overflow-y: auto; overflow-x: clip; margin-top: 10px; }
#ppTimer { background: black; width: 180px; height: 160px; text-align: center; padding-top: 0px; margin-bottom: 5px; vertical-align: middle; }
#lblTimer { font-size: 80px; color: lime; margin-top: 10px; }
#lblTmTop { position: absolute; left: 10px; top: 5px; font-size: 18px; color: red; }
#lblTmBtm { position: absolute; left: 10px; top: 135px; font-size: 18px; color: red; }
#btnTmPlay { position: absolute; width: 54px; height: 54px; z-index: 10; padding: 1px 4px; vertical-align: middle; left: 70px; top: 40px; background-color: blueviolet; outline-width: 0; }
#btnTmPlay svg { width: 28px; height: 28px; margin-top: 8px; }
#btnTmBuyBlue { position: absolute; width: 120px; height: 35px; z-index: 10; padding: 1px 4px; vertical-align: middle; left: 30px; top: 100px; }
#btnTmCont { position: absolute; width: 100px; height: 35px; z-index: 10; padding: 1px 4px; vertical-align: middle; left: 40px; top: 30px; }
#btnTmBallOver { position: absolute; width: 100px; height: 35px; z-index: 10; padding: 1px 4px; vertical-align: middle; left: 40px; top: 100px; }
#rulCntXX { font-weight: 500; }

#ped_Main .bxfPreLabel { min-width: 70px; }
#ppc_Main .bxfPreLabel {  min-width: 75px; }

/* XPin admin GRuleSet pages */
.xp-page-toolbar { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 10px; text-align: left; }
.xp-admin-page { min-height: 220px; }
.xp-admin-actions { display: flex; flex-wrap: wrap; gap: 10px; padding: 10px 0; }
.xp-grs-page { color: #f4f4f4; }
.xp-grs-mgr, .xp-grs-edit { display: grid; gap: 14px; }
.xp-grid-header { align-items: center; gap: 10px; }
.xp-toolbar-actions { display: flex; justify-content: flex-end; gap: 8px; }
.xp-grid-wrap { width: 100%; overflow-x: auto; background: #fff; color: #212529; }
.xp-edit-top { background: rgba(0,0,0,.55); border: 1px solid rgba(173,255,47,.45); padding: 12px; }
.xp-grs-bfx-form .bxfFormTitle { font-size: 1.15rem; text-align: left; }
.xp-grs-bfx-form .bxfBody { gap: 10px; }
.xp-grs-bfx-form .bxfFtr { margin-top: 10px; }
.xp-rule-grid-band { display: grid; gap: 8px; }