@import url('/xp/assets/images/pzIcons.css');
@import url('/xp/assets/css/bs5-migrate.css');
/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification\ */

/* stylelint-disable block-no-empty */

/* Carousel */
.carousel-caption p { font-size: 20px; line-height: 1.4; }

/* Make .svg files in the carousel display properly in older browsers */
.carousel-inner .item img[src$=".svg"] { width: 100%; }

/* Hide/rearrange for smaller screens */
@media screen and (max-width: 767px) {
    /* Hide captions */
    .carousel-caption { display: none; }
}

/*.container .bfxFullWidth { padding-left: 0px; padding-right: 0px; }*/

.bfxFullScreenScroll {  }
.bfxFullScreenScroll:fullscreen { overflow-y: scroll; }

.ppBodyX { background: black; color: greenyellow; }
.ppBodyX { background: #333333; color: white; }
.ppBody { background: #46036f; color: yellow; }
.ppBody .card { color: black; }
.ppBody hr { background: greenyellow; }
.ppBody th {  border-color: greenyellow; }
.ppBody thead { border-color: greenyellow;}
.ppBody td { border-color: greenyellow; }
.divMainSection .ppxPts { color: greenyellow; }
.divMainSection .ppxTotal { color: greenyellow; }

.bfxStopTouch { touch-action: manipulation; }
.bfxStopSelect { -webkit-user-select: none; /* Safari */ -ms-user-select: none; /* IE 10 and IE 11 */ user-select: none; /* Standard syntax */ }
.bfxCursPtr    { cursor: pointer; }
.bfxCover { object-fit: cover; }
.bfxBold { font-weight: 700; }
.bfxMargin_5   { margin: 5px 5px; }
.bfxMargin_20  { margin: 20px 20px; }
.bfxMargin_30  { margin: 30px 30px; }
.bfxMargin_L30  { margin-left: 30px; }
.bfxMargin_T7 {  margin-top: 7px; }
.bfxMargin_TN10 { margin-top: -10px; }
.bfxMargin_TB0 { margin-top: 0; margin-bottom: 0; }
.bfxMargin_TB10 { margin-top: 10px; margin-bottom: 10px; }
.bfxMargin_T4 { margin-top: 4px; }
.bfxMargin_B20 { margin-bottom: 20px; }
.bfxPad_20 { padding: 20px 20px; }
.bfxPad_30 { padding: 30px 30px; }
.bfxCenterV { vertical-align: middle; }
.bfxCenterH { text-align: center; }
.bfxClr_GY { color: greenyellow; }
.bfxClrB_GY { background: greenyellow; }
.bfxClrB_Black { background: black; }
.bfxRight_gcol { text-align: right; }
 .bfxGridHdrRow .bfxRight_gcol { text-align: center;}
.bfxRight { text-align: right; }
.bfxRightAbs { position: absolute; right: 0px; }
.bfxMaxYScroll { max-height: 600px; overflow-y: auto; } /* position: absolute; } */
.bfxReadTextX { background: #eceeef; color: #101010; font-size: 1.0em; padding: 15px 10px; white-space: pre-line; }
.bfxReadText { background: #fff; color: #0a0a0a; 
    font-size: 14px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 500;
               word-wrap: break-word; white-space: pre-line; padding: 5px 10px; margin: 10px 10px; }
.bfxText_sm { font-size: .9em; font-weight: 300; }

.bfxFlexP2 { width: 100%; display: flex; justify-content: space-between; }
.bfxFlexP2b { width: 100%; display: flex; justify-content: space-around; }
.bfxFlexPx { display: flex; flex-direction: row; width: auto; gap: 5px; }
.bfxFlexRow { display: flex; flex-direction: row; gap: 5px; }
.bfxFlexCol { display: flex; flex-direction: column; gap: 5px; }

.divEnd { clear: both; }
.bfxHideOn { display: none !important; }
.bfxHideOff { display: inline-block; }
.bfxHideOff_B { display: block; }
.bfxHideOff_F{ display: flex; }

/* Blue Rounded Frame */
.pp-frame-blue { border-radius: 7px; border: 2px solid #970cf3; box-shadow: 0 0 15px rgba(81, 203, 238, 5); }
.pp-frame-red  { border-radius: 7px; border: 2px solid #970cf3; box-shadow: 0 0 15px rgba(255, 0, 0, 5); }
.pp-frame-purple  { border-radius: 7px; border: 2px solid #970cf3; box-shadow: 0 0 15px rgba(255, 0, 200, 5); }
.pp-frame-purple2  { border-radius: 7px; border: 2px solid #970cf3; box-shadow: 0 0 10px rgba(200, 100, 238, 5); }
.pp-frame-yellow  { border-radius: 7px; border: 2px solid greenyellow; box-shadow: 0 0 15px rgba(210, 255, 28, 5); }

.pp-frame-blue-2 { border-radius: 7px; border: 3px solid #970cf3; box-shadow: 0 0 15px rgba(81, 203, 238, 5); }
.pp-frame-red-2  { border-radius: 7px; border: 3px solid #970cf3; box-shadow: 0 0 15px rgba(255, 0, 0, 5); }
.pp-frame-purple-2  { border-radius: 7px; border: 3px solid #970cf3; box-shadow: 0 0 15px rgba(255, 0, 200, 5); }
.pp-frame-purple2-2  { border-radius: 7px; border: 3px solid #970cf3; box-shadow: 0 0 10px rgba(200, 100, 238, 5); }
.pp-frame-yellow-2  { border-radius: 7px; border: 3px solid greenyellow; box-shadow: 0 0 15px rgba(210, 255, 28, 5); }

.pp-frame-blue-3 { border-radius: 7px; border: 4px solid #970cf3; box-shadow: 0 0 15px rgba(81, 203, 238, 5); }
.pp-frame-red-3  { border-radius: 7px; border: 4px solid #970cf3; box-shadow: 0 0 15px rgba(255, 0, 0, 5); }
.pp-frame-purple-3  { border-radius: 7px; border: 4px solid #970cf3; box-shadow: 0 0 15px rgba(255, 0, 200, 5); }
.pp-frame-purple2-3  { border-radius: 7px; border: 4px solid #970cf3; box-shadow: 0 0 10px rgba(200, 100, 238, 5); }
.pp-frame-yellow-3  { border-radius: 7px; border: 4px solid greenyellow; box-shadow: 0 0 15px rgba(210, 255, 28, 5); }

.pp-frameC-blue { border-radius: 50%; border: 2px solid #970cf3; box-shadow: 0 0 15px rgba(81, 203, 238, 5); }
.pp-frameC-blue-2 { border-radius: 50%; border: 3px solid #970cf3; box-shadow: 0 0 15px rgba(81, 203, 238, 5); }
.pp-frameC-red  { border-radius: 50%; border: 2px solid #970cf3; box-shadow: 0 0 15px rgba(255, 0, 0, 5); }
.pp-frameC-yellow  { border-radius: 50%; border: 2px solid greenyellow; box-shadow: 0 0 15px rgba(210, 255, 28, 5); }

.pp-w100pct { width: 100%; }
.pp-w32 { width: 32px; }
.pp-wh32 { width: 32px; height: 32px; }
.pp-w40 { width: 40px; }
.pp-w40i { width: 40px !important; }
.pp-w50 { width: 50px; }
.pp-w80 { width: 80px; }
.pp-w90 { width: 90px; }
.pp-w100 { width: 100px; }
.pp-w120 { width: 120px; }
.pp-w160 { width: 160px; }
.pp-w200 { width: 200px; }
.pp-w240 { width: 240px; }
.pp-pad10 { padding: 10px; }
.pp-mar10 { margin: 10px; }

.glistGameDiv {  text-align: center; padding-top: 5px; width: 110px; float: left; height: 155px; }
    .glistGameDiv .pp-frame-blue:hover {  box-shadow: 0 0 15px rgb(185, 87, 87);  border: 2px solid #ce1717; }
.glistLbl { text-align: left; padding-left: 5px; padding-right: 5px; font-size: 12px; line-height: 12px;
            position: relative; margin-top: 5px; }
.glistBtn { position: absolute; top: -26px; left: 87px; z-index: 1000; padding: 1px 4px; color: white;
    vertical-align: middle; outline: none; /*display: none;*/ }
.glistBtn:focus { outline: none; box-shadow: none; }

.glistLbl > tag:hover { display: block; }
.glistName { font-weight: bold; }
.glistMfr  { color: grey; font-size: 11px; }
.glistYear { color: grey; float: right; font-size: 11px; }
.glistTarget { color: grey; float: right; font-size: 11px; }

.glistDiv .pp-frame-blue:hover { box-shadow: 0 0 15px rgb(185, 87, 87); border: 2px solid #ce1717; }

.bfxChkbxI { position: relative; display: block; width: 25px; height: 25px; padding: 0px; margin: 5px;
             cursor: pointer; box-sizing: content-box; background-size: 100%; background-image: url('/bs-icons/square.svg'); background-repeat: no-repeat; }
.bfxChkbxI[data-state='0'] { background-image: var(--imgoff); }
.bfxChkbxI[data-state='1'] { background-image: var(--imgon); }
.bfxChkbxI[data-state='2'] { background-image: var(--imgunset); }
.bfxChkbxI.bfxChkbxI_sm { width: 16px; height: 16px; margin-top: 4px; margin-bottom: 0px; }

.bfxChkbxInline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  margin: 3px 12px 3px 0;
  cursor: pointer;
  line-height: 1.2;
  user-select: none;
}
.bfxChkbxInline-input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.bfxChkbxInline-icon {
  display: inline-block;
  flex: 0 0 var(--bfx-chk-size, 16px);
  width: var(--bfx-chk-size, 16px);
  height: var(--bfx-chk-size, 16px);
  background: center / contain no-repeat var(--imgoff);
}
.bfxChkbxInline-input:checked + .bfxChkbxInline-icon { background-image: var(--imgon); }
.bfxChkbxInline-input:focus-visible + .bfxChkbxInline-icon { outline: 2px solid currentColor; outline-offset: 2px; }
.bfxChkbxInline-input:disabled ~ .bfxChkbxInline-icon,
.bfxChkbxInline-input:disabled ~ .bfxChkbxInline-text { opacity: .65; }
.bfxChkbxInline-text { white-space: nowrap; }

/*.bfxChkbxImg { width: 100%; }
.bxlkDlg2[data-lkmode="imgList"]
*/

/* bfxSwitch - Toggle Switches */
.bfxSwitch { position: relative; display: block; vertical-align: top; width: 75px; height: 30px; padding: 3px; margin: 0 0px 0px 0; background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px); background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px); border-radius: 18px; box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05); cursor: pointer; box-sizing: content-box; }
.bfxSwitch-input { position: absolute; top: 0; left: 0; opacity: 0; box-sizing: content-box; }
.bfxSwitch-label { position: relative; display: block; height: inherit; font-size: 10px; text-transform: uppercase; background: #eceeef; border-radius: inherit; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15); box-sizing: content-box; }
    .bfxSwitch-label:before, .bfxSwitch-label:after { position: absolute; top: 50%; margin-top: -.5em; line-height: 1; -webkit-transition: inherit; -moz-transition: inherit; -o-transition: inherit; transition: inherit; box-sizing: content-box; }
    .bfxSwitch-labelXX:before { content: attr(data-off); right: 11px; color: #aaaaaa; text-shadow: 0 1px rgba(255, 255, 255, 0.5); }
    .bfxSwitch-label:before { content: attr(data-off); right: 11px; color: #dddddd; text-shadow: 0 1px rgba(255, 255, 255, 0.5); }
    .bfxSwitch-label:after { content: attr(data-on); left: 11px; color: #FFFFFF; text-shadow: 0 1px rgba(0, 0, 0, 0.2); opacity: 0; }
.bfxSwitch-input:checked ~ .bfxSwitch-label { background: #E1B42B; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2); }
    .bfxSwitch-input:checked ~ .bfxSwitch-label:before { opacity: 0; }
    .bfxSwitch-input:checked ~ .bfxSwitch-label:after { opacity: 1; }
.bfxSwitch-handle { position: absolute; top: 4px; left: 4px; width: 28px; height: 28px; background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0); background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0); border-radius: 100%; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2); }
    .bfxSwitch-handle:before { content: ""; position: absolute; top: 50%; left: 50%; margin: -6px 0 0 -6px; width: 12px; height: 12px; background: linear-gradient(to bottom, #eeeeee, #FFFFFF); background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF); border-radius: 6px; box-shadow: inset 0 1px rgba(0, 0, 0, 0.02); }
.bfxSwitch-input:checked ~ .bfxSwitch-handle { left: 49px; box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2); }
.bfxTeal .bfxSwitch-input:checked ~ .bfxSwitch-label { background: #16b5d1; }


/* Transition */
.bfxSwitch-label, .bfxSwitch-handle { transition: All 0.3s ease; -webkit-transition: All 0.3s ease; -moz-transition: All 0.3s ease; -o-transition: All 0.3s ease; }

/* Switch: Left Right Toggle */
.bfxSwitch-left-right .bfxSwitch-label { overflow: hidden; }
.bfxSwitch-left-right .bfxSwitch-label:before, .bfxSwitch-left-right .bfxSwitch-label:after { width: 20px; height: 20px; top: 4px; left: 0; right: 0; bottom: 0; padding: 11px 0 0 0; text-indent: -12px; border-radius: 20px; box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2), inset 0 0 3px rgba(0, 0, 0, 0.1); }
.bfxSwitch-left-right .bfxSwitch-label:before { background: #eceeef; text-align: left; padding-left: 50px; width: 100%; }
.bfxSwitch-left-right .bfxSwitch-label:after { text-align: left; text-indent: 9px; background: #FF7F50; left: -100px; opacity: 1; width: 100%; }
.bfxSwitch-left-rightXX .bfxSwitch-label:after { text-align: left; text-indent: 9px; background: var(--bkcolor); left: -100px; opacity: 1; width: 100%; }
.bfxSwitch-left-right .bfxSwitch-input:checked ~ .bfxSwitch-label:before { opacity: 1; left: 100px; }
.bfxSwitch-left-right .bfxSwitch-input:checked ~ .bfxSwitch-label:after { left: 0; }
.bfxSwitch-left-right .bfxSwitch-input:checked ~ .bfxSwitch-label { background: inherit; }
.bfxTeal .bfxSwitch-left-right .bfxSwitch-label:after {  background: #16b5d1; }
.bfxSwitch-left-right .bfxBkColor:before { background: var(--offcolor); }
.bfxSwitch-left-right .bfxBkColor:after { background: var(--oncolor); }

/* Switch: Flat */
.bfxSwitch-flat { padding: 0; background: #FFF; background-image: none; }
    .bfxSwitch-flat .bfxSwitch-label { background: #FFF; border: solid 2px #eceeef; box-shadow: none; }
        .bfxSwitch-flat .bfxSwitch-label:after { color: #0088cc; }
    .bfxSwitch-flat .bfxSwitch-handle { top: 6px; left: 6px; background: #dadada; width: 22px; height: 22px; box-shadow: none; }
        .bfxSwitch-flat .bfxSwitch-handle:before { background: #eceeef; }
    .bfxSwitch-flat .bfxSwitch-input:checked ~ .bfxSwitch-label { background: #FFF; border-color: #0088cc; }
    .bfxSwitch-flat .bfxSwitch-input:checked ~ .bfxSwitch-handle { left: 72px; background: #0088cc; box-shadow: none; }


/* Switch: Slide */
.bfxSwitch-slide { padding: 0; margin: 15px 0 0; background: #FFF; border-radius: 0; background-image: none; }
.bfxSwitch-slide .bfxSwitch-label { box-shadow: none; background: none; overflow: hidden; }
    .bfxSwitch-slide .bfxSwitch-label:after, .bfxSwitch-slide .bfxSwitch-label:before { width: 100%; height: 65%; top: 5px; left: 0; text-align: center; padding-top: 10%; box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2), inset 0 0 3px rgba(0, 0, 0, 0.1); }
    .bfxSwitch-slide .bfxSwitch-label:after { color: #FFFFFF; background: #87CEEB; left: -100px; }
    .bfxSwitch-slide .bfxSwitch-label:before { background: #eceeef; }
.bfxSwitch-slide .bfxSwitch-handle { display: none; }
.bfxSwitch-slide .bfxSwitch-input:checked ~ .bfxSwitch-label { background: #FFF; border-color: #0088cc; }
    .bfxSwitch-slide .bfxSwitch-input:checked ~ .bfxSwitch-label:before { left: 100px; }
    .bfxSwitch-slide .bfxSwitch-input:checked ~ .bfxSwitch-label:after { left: 0; }

/* Switch: Light */
.bfxSwitch-light { padding: 0; background: #FFF; background-image: none; }
    .bfxSwitch-light .bfxSwitch-label { background: #FFF; border: solid 2px #eceeef; box-shadow: none; }
        .bfxSwitch-light .bfxSwitch-label:after { color: #9370DB; }
        .bfxSwitch-light .bfxSwitch-label:before { right: inherit; left: 11px; }
    .bfxSwitch-light .bfxSwitch-handle { top: 6px; left: 72px; background: #dadada; width: 22px; height: 22px; box-shadow: none; }
        .bfxSwitch-light .bfxSwitch-handle:before { background: #eceeef; }
    .bfxSwitch-light .bfxSwitch-input:checked ~ .bfxSwitch-label { background: #FFF; border-color: #9370DB; }
    .bfxSwitch-light .bfxSwitch-input:checked ~ .bfxSwitch-handle { left: 72px; box-shadow: none; background: #9370DB }
        .bfxSwitch-light .bfxSwitch-input:checked ~ .bfxSwitch-handle:before { background: rgba(255,255,255,0.7); }

.bxfRow .input-group .bfxSwitch { margin-left: 10px; }
.bfx100 .bfxSwitch { width: 100px; }
.bfx100 .bfxSwitch-input:checked ~ .bfxSwitch-handle {  left: 74px; }
.bxfRow .input-group .bfxChkbxI { margin-left: 10px; align-self: center; }
.bxfBody .input-group > .bfxChkbxI {
  margin-left: 10px !important; /* BS5: override Bootstrap input-group child spacing */
  align-self: center;           /* BS5D: center image checkbox beside label */
  flex: 0 0 auto;               /* BS5: do not stretch like an input */
}

/*-------------- bfxSlide Settings ------------ */
.xxxbfxSplit_Parent { z-index: 990; margin: 0; }

.bfxSlide_M { background-color: white;  z-index: 1060; }
.bfxSlide_Body { padding: 7px; overflow: hidden; }
.bfxSlider_T { cursor: row-resize; background-color: #3a00b7; width: 100%; height: 7px; min-height: 7px; 
               -moz-user-select: none; -ms-user-select: none; user-select: none; bottom: 0; }
.bfxSlider_B { cursor: row-resize; background-color: #3a00b7; width: 100%; height: 7px; min-height: 7px; 
               -moz-user-select: none; -ms-user-select: none; user-select: none; top: 0; }
.bfxSlider_L { cursor: col-resize; background-color: #3a00b7; width: 7px; height: 100%;  min-width: 7px;
               -moz-user-select: none; -ms-user-select: none; user-select: none; right: 0; }
.bfxSlider_R { cursor: col-resize; background-color: #3a00b7; width: 7px; height: 100%;  min-width: 7px;
               -moz-user-select: none; -ms-user-select: none; user-select: none; left: 0; }

.bfxSlide_T { width: 100%; position: fixed; left: 0; top: 0; z-index: 1060; margin: 0; flex-direction: column-reverse; flex-wrap: nowrap;  }
.bfxSlide_B { width: 100%; position: fixed; left: 0; bottom: 0; z-index: 1060; margin: 0; flex-direction: column; flex-wrap: nowrap; }
.bfxSlide_L { height: 100%; position: fixed; left: 0; top: 0; z-index: 1060; margin: 0; flex-direction: row-reverse; flex-wrap: nowrap; }
.bfxSlide_R { height: 100%; position: fixed; right: 0; top: 0; z-index: 1060; margin: 0; flex-direction: row; flex-wrap: nowrap; }


/*-------------- bfxImgList Settings ------------ */

.bfxImgListMain { /* overflow: auto; */  }
.bfxImgListHdr  { margin: 5px 10px; }
.bfxImgListX { /* overflow: auto; */ }
.bfxImgList { /* overflow: auto; */ overflow-y: hidden; overflow-x: hidden; }
.bxilVMenu { display: flex; flex-direction: column; gap: 5px; }
.bxilItem  { float: left; position: relative; /* margin: 15px; */ }            
.bxilVItemXXX { width: 100%; display: flex; justify-content: space-between; cursor: pointer; }
.bxilVItem { width: 100%; display: flex; flex-direction: row; gap: 5px; cursor: pointer; }
.bxilVItemR { text-align: end; }
.bxilVItem:hover { box-shadow: 0 0 15px rgb(210, 255, 28, 5); border: 2px solid greenyellow; border-radius: 15px;}
.bxilVItem { box-shadow: 0 0 15px rgb(185, 87, 87); border: 2px solid #ce1717; border-radius: 15px; }
.bxilVItemTxt { width: 100%; height: 80%; font-size: 32px; margin: 5px 15px; vertical-align: middle;
             color: #ffd800; text-align: left; overflow: hidden; }
.bxilVLabel { position: absolute; left: 20px; top: 10px; width: 100%; height: 80%; font-size: 32px; margin-bottom: 0px;
             color: #ffd800; background: rgba(44,44,44,0.5); text-align: left; overflow: hidden; }
.bxilVItem .bxilImg { object-fit: scale-down; }
.bxilItem:hover { box-shadow: 0 0 15px rgb(185, 87, 87); border: 2px solid #ce1717; }
.bxilImg   { cursor: pointer; }
.bxilVPic  { width: 100%; border-radius: 15px; }
.bxilVIcon { width: 32px; }
.bxilLabel { position: absolute; left: 0; bottom: 0px; width: 100%; height: 18px; font-size: 12px; margin-bottom: 0px;
             color: #ffd800; background: rgba(44,44,44,0.5); text-align: center; overflow: hidden; }
.bxilLabel2 { position: absolute; left: 0; top: 0px; width: 100%; height: 18px; font-size: 12px; color: #ffd800; 
              background: rgba(44,44,44,0.5); text-align: center; overflow: hidden; }
.bxilItem .bxilTT { visibility: hidden; width: 100px; background: rgba(44,44,44,0.8); font-size: 12px; color: #ffd800; text-align: center; padding: 3px 0; border-radius: 6px; position: absolute; top: -27px; left: 0px; z-index: 10; }
.bxilItem:hover .bxilTT { visibility: visible; }
.bxilItem .bxilTT::after { content: " "; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: rgba(44,44,44,0.8) transparent transparent transparent; }


.bfxOvrX { width: 200px; height: 200px; position: relative; }
.bfxOvr { position: relative; }
/* must use margin for bfxOvrImg - padding and/or top + left does not work*/
.bfxOvrImg { width: 73%; height: 73%; margin: 13.7% 0 0 13.5%; object-fit: cover; border-radius: 50%; }              /* the Margin causes issues - not same position as bfxOvrClr */
.bfxOvrClr { width: 73%; height: 73%; margin: 13.7% 0 0 13.5%; border-radius: 50%; position: absolute; }
.bfxOvrTxt { width: 73%; height: 73%; top: 13.7%; left: 13.5%; object-fit: cover; border-radius: 50%; color: white; 
             position: absolute; text-align: center; display: flex; justify-content: center; align-items: center; margin: -2px 0 0 -2px; 
}
.bfxOvrTxtX { font: 26px Comic Sans MS, Tahoma; }
.bfxOvrOvr { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }     /* overlay image will resize automatically */

.myXList_7 { border-radius: 7px; background-color: rgba(5, 5, 5, .6); }
.myXList_5 { border-radius: 5px; background-color: rgba(5, 5, 5, .6); }
.myXList_3 { border-radius: 3px; background-color: rgba(5, 5, 5, .6); }

.myXItem_200 { width: 200px; height: 200px; margin: 10px; }             /* .myXItem */
.myXItem_175 { width: 175px; height: 175px; margin: 4px; }
.myXItem_150 { width: 150px; height: 150px; margin: 2px; }              /* .myXItem_md */
.myXItem_125 { width: 125px; height: 125px; margin: 2px; }
.myXItem_100 { width: 100px; height: 100px; margin: 2px; }              /* .myXItem_sm */
.myXItem_90  { width: 90px;  height: 90px;  margin: 0px; }
/* wider for larger label (longer names) */
.myXItem_80w { width: 100px; height: 80px;  margin: 0 0 1px 0; padding-left: 5px; }  /* .myXItem_xsw */
.myXItem_80  { width: 80px;  height: 80px;  margin: 0px; }               /* .myXItem_xs */
.myXItem_70  { width: 70px;  height: 70px;  margin: 1px; }                /* .myXItem_xsm */
.myXItem_60  { width: 60px;  height: 60px;  margin: 1px; }                /* .myXItem_xsm */
.myXItem_30  { width: 30px;  height: 30px;  margin: 0px; }                /* .myXItem_t */

.myXItem_200 .myXImg { width: 200px; height: 200px; }
.myXItem_175 .myXImg { width: 175px; height: 175px; }
.myXItem_150 .myXImg { width: 150px; height: 150px; }
.myXItem_125 .myXImg { width: 125px; height: 125px; }
.myXItem_100 .myXImg { width: 100px; height: 100px; }
.myXItem_90  .myXImg { width: 90px;  height: 90px; }
.myXItem_80w .myXImg { width: 80px; height: 80px; }
.myXItem_80  .myXImg { width: 80px; height: 80px; }
.myXItem_70  .myXImg { width: 70px; height: 70px; }
.myXItem_60  .myXImg { width: 60px; height: 60px; }
.myXItem_30  .myXImg { width: 30px; height: 30px; border-radius: 50%; }

.myXItem_200 .bfxOvrTxt { font-size: 26px; }
.myXItem_150 .bfxOvrTxt { font-size: 24px; }
.myXItem_150 .bfxOvrTxt { font-size: 18px; }
.myXItem_125 .bfxOvrTxt { font-size: 18px; }
.myXItem_100 .bfxOvrTxt { font-size: 14px; }
.myXItem_80w .bfxOvrTxt { font-size: 14px; }
.myXItem_80  .bfxOvrTxt { font-size: 14px; }
.myXItem_70  .bfxOvrTxt { font-size: 12px; }
.myXItem_30  .bfxOvrTxt { font-size: 10px; }

.myXImg_30 { width: 30px; height: 30px; border-radius: 50%; }

/*------------- bfxLkup Settings ------------- */
.bxLkupXXX { width: 100%; padding-right: 20px; display: inline-block; background: white url(/xp/assets/images/icon16/dn_14_padR.png) right no-repeat !important; }
.bxLkup { width: 100%; display: inline-block; background: white !important; }
.bxlkIGF { padding-top: 0em; padding-left: 0em; padding-bottom: 0em;  padding-right: 0em; }
.bxlkBtn { padding-top: 0; padding-bottom: 0; cursor: pointer; }
.bxlkBtnTop { position: relative; left: -17px; top: 1px; width: 0px; z-index: 5; background-color: white; }
.bxlkIcon { position: relative; left: -17px; top: 1px; cursor: pointer; width: 0; z-index: 5; color: black; }
.bxlkIconIG { cursor: pointer; color: black; }
.bxlkImgWrap { width: 100%; display: flex; align-items: center; justify-content: center; }
.bxlkImgX { position: absolute; top: 3px; height: 30px; cursor: pointer; }
.bxlkImgX { height: 30px; cursor: pointer; }
.bxlkImg { cursor: pointer; }
.bxlkDlgM { width: 100vw; height: 100vh; position: fixed; top: 0px; left: 0px; background-color: rgba(5, 5, 5, .6); z-index: 1998; display: flex; justify-content: center; align-items: center;
              padding: 0 0px 0 0px; overflow: clip; }    /* using pad-r 10px as a compromise fix */

.bxlkDlg { max-width: 100vw; max-height: 100vh; overflow-y: auto; position: absolute; }     /* in-between div, needed to have scrollbar if dlg is too big */  
.bxlkDlg2 { padding: 7px 7px 3px 7px; margin: 0px 0px 0px 0px; background: white; border-radius: 5px; border: 2px solid black; overflow-y: auto; }    
.bxlkDlg2[data-lkmode="imgList"] { background: purple; min-width: 400px; }
.bxlkDlg2.bxlk80 { width: 80vw; height: 80vh; }
.bxlkDlg2.bxlk600x400 { width: 600px; height: 400px; }
.bxlkDlg2.bxlk370x400 { width: min(370px, calc(100vw - 8px)); height: 400px; }
.bxlkDlgClose { position: absolute; top: 5px; right: 5px; }
.bxlkDlgTitle { margin: 0px 0px; color: greenyellow; font: 16px elephant, arial; }

.bxlkMain tr { cursor: pointer; }
.bxlkRbSet_0Gap { display: flex; flex-direction: row; gap: 0px; height: auto; padding-left: 0; padding-right: 0; }
.bxlkRbSet { display: flex; flex-direction: row; gap: 3px; height: auto; padding-left: 0; padding-right: 0; }
.bxlkRbSet  { flex-wrap: wrap; }
  .bxlkRbSetXX::-webkit-scrollbar { display: none; }

.bxlkRb {  display: flex; justify-content: center; align-items: center; cursor: pointer; }
.bxlkRbx { min-width: 60px; height: 44px; margin: 0px; border-radius: 7px; background: blue; color: white; cursor: pointer; 
          display: flex; justify-content: center; align-items: center; }
.bxlkRbx[data-sel='1'] { background: red; }
.bxlkRbSpan { display: inline-block; }
.bxlkRbTxt { }
.bxlkRbStar[data-sel='0'] { background: url("/xp/assets/images/icon/star_ol.png") no-repeat; background-size: 24px; width: 24px; height: 24px; }
.bxlkRbStar[data-sel='1'] { background: url("/xp/assets/images/icon/star_y.png") no-repeat; background-size: 24px; width: 24px; height: 24px; }
.bxlkRbWhl[data-sel='0'] .bfxOvrClr { background: purple; }
.bxlkRbWhl[data-sel='1'] .bfxOvrClr { background: red; }
.bxlkMenuSet { gap: 0.8rem; }
.bxlkMenu { padding: 0 0.1rem 0.15rem; border-bottom: 2px solid #6c757d; color: inherit; line-height: 1.2; }
.bxlkMenu[data-sel='1'] { border-bottom-color: #dc3545; color: #dc3545; font-weight: 600; }
.bxlkMenuTxt { display: inline-block; }
.bxlkPopupOption:focus-visible,
[data-bfx-lkup-interactive="true"]:focus-visible {
  outline: 3px solid #0d6efd;
  outline-offset: 2px;
}
.bxlkPopupOption[aria-selected="true"] { box-shadow: inset 0 0 0 2px #0d6efd; }
.ppxWhlxxx { background: yellow; }

/*------------- bfxForm Settings ------------- */
.bxfDlgM { width: 100vw; height: 100vh; position: fixed; top: 0px; left: 0px; background-color: rgba(5, 5, 5, .6); z-index: 1998; display: flex; justify-content: center; align-items: center;
              padding: 0 0px 0 0px; overflow: clip; }    /* using pad-r 10px as a compromise fix */

.bxfDlg { max-width: 100vw; max-height: 100vh; overflow-y: auto; position: absolute; }     /* in-between div, needed to have scrollbar if dlg is too big */  
.bxfDlg2x { width: 650px; height: 500px; padding: 7px 3px 7px 7px; background-color: rgba(3, 3, 3, .6); border-radius: 15px; border: 5px solid red; box-shadow: 0 0 15px rgba(255, 0, 0, 5); overflow-y: auto; }
.bxfDlg2 { padding: 7px 7px 3px 7px; margin: 0px 0px 0px 0px; background: white; border-radius: 5px; border: 2px solid black; overflow-y: auto; }
    
.bxfDlgClose { position: absolute; top: 5px; right: 5px; }
.bxfDlgTitle { margin: 0px 0px; color: greenyellow; font: 16px elephant, arial; }

.bxfForm { }
.bxfMain {}
.bxfMain hr { margin: 0 0 7px 0; width: 100%; }
.bxfBody { display: flex; flex-direction: row; gap: 7px; }
.bxfBody[data-mode='col'] { flex-direction: column; flex-grow: 1; }
.bxfBody .input-group-text { width: auto; }     /* was 100% for inputs in BS4 */
.bxfSect { display: flex; flex-direction: column; gap: 7px; flex-grow: 1; width: var(--bxf-section-width, auto); min-width: var(--bxf-section-min-width, auto); max-width: var(--bxf-section-max-width, none); }
.bxfSect[data-mode="row"]  { display: flex; flex-direction: row; gap: 7px; flex-grow: 1; }   /* Auto converts to Col if screen < 580px */
.bxfSect[data-mode="rowfx"] { display: flex; flex-direction: row; gap: 7px; flex-grow: 1; }  /* Fixed - does not convert to col */
.bxfSect[data-mode="row-rev"] { display: flex; flex-direction: row-reverse; gap: 7px; flex-grow: 1; }
.bxfSectHeader { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; border-bottom: 1px solid currentColor; }
.bxfSectHeaderTitle { font-size: 1.2em; }
.bxfSectToggle { display: inline-flex; width: 38px; height: 30px; flex: 0 0 auto; align-items: center; justify-content: center; padding: 2px 6px; border: 0; background: transparent; box-shadow: none; cursor: pointer; }
.bxfSectToggle img { width: 20px; height: 20px; }
.bxfSectToggle:focus-visible,
.bxfReadonlyEdit:focus-visible {
  outline: 3px solid #0d6efd;
  outline-offset: 2px;
}
.bxfSectBody { display: flex; flex-direction: column; gap: 7px; flex-grow: 1; }
.bxfSectBody[data-mode="row"] { flex-direction: row; }
.bxfSectBody[data-mode="rowfx"] { flex-direction: row; }
.bxfSectBody[data-mode="row-rev"] { flex-direction: row-reverse; }
.bxfSectBody[hidden] { display: none; }
.bxfSect[data-mode="row"][data-responsive-at],
.bxfSectBody[data-mode="row"][data-responsive-at] { flex-direction: column; }
.bxfSect[data-responsive-at] > .bxfSect,
.bxfSectBody[data-responsive-at] > .bxfSect { width: 100% !important; min-width: 0 !important; max-width: none !important; }
.bxfRow { display: flex; flex-direction: row; gap: 7px; }
.bxfRow .bxfPreLabel { min-width: var(--bxf-section-label-width, 85px); }
.bxfPre70 .bxfRow .bxfPreLabel { min-width: var(--bxf-section-label-width, 70px); }
.bxfTdLbl { width: 100px; }
.bxfRowSpc { }
.bxfGCtl { width: 100%; }
.bxfRow > .input-group { width: 100%; } /* BS5: full row width belongs to the whole group */
.bxfRow > .input-group > .bxfGCtl {
  width: 1%;                   /* BS5: restore Bootstrap input-group behavior */
  min-width: 0;                /* BS5: allow input to shrink next to label */
  flex: 1 1 auto;              /* BS5: input fills remaining space after label */
}
.bxlkFG { width: 100%; }
.bxlkLblw { width: 100%; }
.bxlkLbl { }
.bxfReadonlyLbl {
  display: grid;
  grid-template-columns: var(--bxf-readonly-label-width, 95px) minmax(0, 1fr);
  column-gap: 0.5rem;
  align-items: baseline;
  flex: 1 1 15rem;
  min-width: 14rem;
  margin: 0;
  line-height: 1.45;
}
.bxfHelp,
.bxfFieldError {
  flex: 1 0 100%;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875em;
}
.bxfHelp { color: #6c757d; }
.bxfFieldError { color: #dc3545; }
.bxfFieldError:not([hidden]) { display: block; }
.bxfFieldError[hidden],
.bxfHelp[hidden] { display: none !important; }
[data-required=""]::after {
  content: " *";
  color: #dc3545;
  font-weight: 700;
}
.bxfPurple .bxfHelp { color: #fff3cd; }
.bxfPurple .bxfFieldError,
.bxfPurple [data-required=""]::after { color: #ffb3bd; }
.bxfReadonlyCaption {
  min-width: 0;
  text-align: left;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.bxfReadonlyValue {
  min-width: 0;
  text-align: left;
  overflow-wrap: anywhere;
}

.bxfReadonlyEdit {
  cursor: pointer;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-underline-offset: 0.18em;
}
.bxfReadonlyEdit:hover,
.bxfReadonlyEdit:focus {
  color: #0d6efd;
  outline: none;
}
.bxfReadonlyLiveDlgForm .bxfFtr {
  justify-content: flex-end;
}
.bxfHdr { width: 100%; display: flex; justify-content: space-between; margin: 7px 0px; }
.bxfHdrL { display: flex; flex-direction: row; width: auto; gap: 7px; }
.bxfHdrR { display: flex; flex-direction: row; width: auto; gap: 7px; }
.bxfCaptionHdr { align-items: center; padding-bottom: 7px; border-bottom: 1px solid yellow; }
.bxfFtr { width: 100%; display: flex; justify-content: space-between; margin: 7px 0px; }
.bxfFtrL { display: flex; flex-direction: row; width: auto; gap: 7px; }
.bxfFtrR { display: flex; flex-direction: row; width: auto; gap: 7px; }
.bxfTbl { width: 100%; }
.bxfTest { background: red; min-width: 100px; min-height: 100px;}
.bxfImgW { width: 100%; text-align: center; }

.bxfDlgTitle { font-size: 1.5em; margin-bottom: 3px; font-weight: 300; }
.bxfFormTitle { font-size: 1.5em; margin-bottom: 7px; font-weight: 300; }
.bxfTitle { font-size: 1.2em; width: 100%; }
.bxfTitle hr { margin: 0 0 3px 0; width: 100%; }

.bxfPurple { background: #46036f; color: yellow; }
.bxfPurplexx .bxfFormTitle { color: greenyellow; }  /* not as good as yellow for the text */
.bxfPurplexx { font: 12px elephant, arial; color: #00d2ff; }
.bxfPurple .bxlkDlg2 { background: #46036f; color: greenyellow; }
.bxfPurple .bxfDlg2 { background: #46036f; color: yellow; }
.bxfPurple .bxfDlg2 .bxfLbl_L{ font-weight: 500; }
/* .bxfPurple .bxfDlg2 .input-group-text { background: #a5ed36; width: 100%; } BS4 */
.bxfPurple .bxfDlg2 .input-group-text { background: #a5ed36; }
.bxfPurple .bxfDlg2 .input-group > .bxfPreLabel {
  width: auto;                 /* BS5: label does not consume full input group */
  flex: 0 0 auto;              /* BS5: label stays beside the input */
}
.bxfPurple .bxfDlg2 .bxlkBtn { background: #a5ed36; }
.bxfPurple .bxfMainXX { background: purple; color: greenyellow; }
.bxfPurpleSlide { background: #35176c;  color: yellow; }
.bxfPurpleSlide hr { background: greenyellow; }
.bxfPurple .bxfDlg2 hr { background: greenyellow; }
.bxfPurple .bfxChkbxI { text-decoration-color: yellow; }
.bxfPurple hr { background: yellow; }
.bxfPurple h1,h2,h3,h4,h5,h6 { font-weight: 300; }
.bxfPurple .modal-header { background-color: black; }

.bxfPurple .pzGrn .input-group-text { background: #a5ed36; }
.bxfPurple .pzGrn .bxlkBtn { background: #a5ed36; }
.bxfPurple #bfsGameSelDlg_List { background: #46036f; }

#testSect1XX .bxfTdLbl { width: 120px; }
#testSect2XX .bxfTdLbl { width: 100px; }

@media screen and (max-width: 580px) {
    .bxfBody { display: flex; flex-direction: column; gap: 7px; }
    .bxfSect[data-mode="row"]:not([data-responsive-at]) { display: flex;  flex-direction: column;  gap: 7px; }
    .bxfSectBody[data-mode="row"]:not([data-responsive-at]) { flex-direction: column; }
}

@media screen and (min-width: 480px) {
    .bxfSect[data-mode="row"][data-responsive-at="phone"],
    .bxfSectBody[data-mode="row"][data-responsive-at="phone"] { flex-direction: row; }
    .bxfSect[data-responsive-at="phone"] > .bxfSect,
    .bxfSectBody[data-responsive-at="phone"] > .bxfSect { width: var(--bxf-section-width, auto) !important; min-width: var(--bxf-section-min-width, auto) !important; max-width: var(--bxf-section-max-width, none) !important; }
}

@media screen and (min-width: 576px) {
    .bxfSect[data-mode="row"][data-responsive-at="sm"],
    .bxfSectBody[data-mode="row"][data-responsive-at="sm"] { flex-direction: row; }
    .bxfSect[data-responsive-at="sm"] > .bxfSect,
    .bxfSectBody[data-responsive-at="sm"] > .bxfSect { width: var(--bxf-section-width, auto) !important; min-width: var(--bxf-section-min-width, auto) !important; max-width: var(--bxf-section-max-width, none) !important; }
}

@media screen and (min-width: 768px) {
    .bxfSect[data-mode="row"][data-responsive-at="md"],
    .bxfSectBody[data-mode="row"][data-responsive-at="md"] { flex-direction: row; }
    .bxfSect[data-responsive-at="md"] > .bxfSect,
    .bxfSectBody[data-responsive-at="md"] > .bxfSect { width: var(--bxf-section-width, auto) !important; min-width: var(--bxf-section-min-width, auto) !important; max-width: var(--bxf-section-max-width, none) !important; }
}

@media screen and (min-width: 992px) {
    .bxfSect[data-mode="row"][data-responsive-at="lg"],
    .bxfSectBody[data-mode="row"][data-responsive-at="lg"] { flex-direction: row; }
    .bxfSect[data-responsive-at="lg"] > .bxfSect,
    .bxfSectBody[data-responsive-at="lg"] > .bxfSect { width: var(--bxf-section-width, auto) !important; min-width: var(--bxf-section-min-width, auto) !important; max-width: var(--bxf-section-max-width, none) !important; }
}

@media screen and (min-width: 1200px) {
    .bxfSect[data-mode="row"][data-responsive-at="xl"],
    .bxfSectBody[data-mode="row"][data-responsive-at="xl"] { flex-direction: row; }
    .bxfSect[data-responsive-at="xl"] > .bxfSect,
    .bxfSectBody[data-responsive-at="xl"] > .bxfSect { width: var(--bxf-section-width, auto) !important; min-width: var(--bxf-section-min-width, auto) !important; max-width: var(--bxf-section-max-width, none) !important; }
}

@media screen and (min-width: 1400px) {
    .bxfSect[data-mode="row"][data-responsive-at="xxl"],
    .bxfSectBody[data-mode="row"][data-responsive-at="xxl"] { flex-direction: row; }
    .bxfSect[data-responsive-at="xxl"] > .bxfSect,
    .bxfSectBody[data-responsive-at="xxl"] > .bxfSect { width: var(--bxf-section-width, auto) !important; min-width: var(--bxf-section-min-width, auto) !important; max-width: var(--bxf-section-max-width, none) !important; }
}

/*-------------- bfxGrid Settings ------------ */

.bfxGridFrame { width: 100%; min-width: 100%; overflow-x: auto;}
.bfxGridTitle { width: 100%; display: flex; justify-content: space-between; }
.bfxGridTitleL { display: flex; flex-direction: row; width: auto; }
.bfxGridTitleR { display: flex; flex-direction: row; width: auto; }
.bfxGridFtr { width: 100%; display: flex; justify-content: space-between; }
.bfxGridFtrL { display: flex; flex-direction: row; width: auto; }
.bfxGridFtrR { display: flex; flex-direction: row; width: auto; }
.bfxGridFilterRowXX .th { padding-top: 15px; padding-bottom: 15px; }
.bfxGridFilterXX { margin: 15px 0; }
.bfxGridTbl thead th { vertical-align: middle; }    /* for lkups in filter row */

.bfxgTitle1 { font-size: 2.2em; }
.bfxgTitleBtn { width: 40px; height: 40px; font-size: 1.3em; }
.bfxgFtrBtn { width: 32px; height: 32px;  font-size: 1.2em; padding: 1px 0 0 0; }

.fbGrid { display: grid; gap: 4px; }
.fbCol { display: flex; flex-direction: column; gap: 7px; }
.fbRow { display: flex; flex-direction: row; gap: 7px; }
.fbRow .input-group-prepend { min-width: 85px; }

  /*.bfxGridTbl th { white-space: nowrap; }*/
  .xbfxGridFilter .dropdown-menu > a { line-height: 30px; height: 30px; padding-top: 0px; }
  .bfxGridFilter .dropdown-menu { padding-top: 2px; padding-bottom: 2px; }
    .bfxGridFilter .dropdown-menu > a { line-height: 1.0; padding-top: 2px; padding-bottom: 2px; }
    .bfxGridFilter .dropdown-menu > button { line-height: 0.9; padding: 3px 10px; }
  .bfxGridSortIndDiv { float: right; }

  .XbfxGridSort_up:after { content: ''; display: block; height: 14px; /*height of icon */ width: 14px; /*width of icon */ position: relative; /*where to replace the icon */ top: 0px; left: 0px; /*background */ background: url(/xp/assets/images/icon16/up_14.png) no-repeat 0px 0px; }
  .XbfxGridSort_dn:after { content: ''; display: block; height: 14px; /*height of icon */ width: 14px; /*width of icon */ position: relative; /*where to replace the icon */ top: 0px; left: 0px; /*background */ background: url(/xp/assets/images/icon16/dn_14.png) no-repeat 0px 0px; }
  .bfxGridSort_up:after { content: ''; display: block; height: 16px; /*height of icon */ width: 16px; /*width of icon */ position: relative; /*where to replace the icon */ top: 0px; left: 0px; /*background */ background: url(/xp/assets/images/icon16/up_16.png) no-repeat 0px 0px; }
  .bfxGridSort_dn:after { content: ''; display: block; height: 16px; /*height of icon */ width: 16px; /*width of icon */ position: relative; /*where to replace the icon */ top: 0px; left: 0px; /*background */ background: url(/xp/assets/images/icon16/dn_16.png) no-repeat 0px 0px; }
  [data-bfx-sortable="true"] { cursor: pointer; }
  [data-bfx-sortable="true"]:focus-visible,
  .bfxGridDataRow:focus-visible,
  [role="gridcell"]:focus-visible {
    outline: 3px solid #0d6efd;
    outline-offset: -2px;
  }
  [role="gridcell"][data-bfx-col-action="true"]:focus-visible { outline-color: #ffc107; }

  .bfxHF-Section { padding-right: 30px; }
  .bfxHF-hdr { margin: 15px 0px 5px 0px; }
  .bfxHF-hr { margin: 0px -10px 10px 0px; }

    .bfxGrid_md { font: .95em arial; }                                /* decrease the font size */
    .bfxGrid_md th { padding: 2px 3px; }            /* decrease the padding (even more than table_sm) */
    .bfxGrid_md td { padding: 1px 3px; }            /* decrease the padding (even more than table_sm) */
    .bfxGrid_sm { font: .85em arial; }                          /* decrease the font size */
    .bfxGrid_smx .bfxGridHdrRow th { background-color: navy; color: white; }   /* NOTE using .bfxGridHdrRow to avoid coloring the Filter Row */
    .bfxGrid_smx th, .bfxGrid_sm td { padding: 1px 3px 1px 3px; }   /* Both th and td at the same time - may want to do seperate decrease the padding (even more than table_sm) */
    .bfxGrid_sm th { padding: 1px 3px; font: bold 1.0em arial; }                /* decrease the padding (even more than table_sm) */
    .bfxGrid_smx th { padding: 1px 3px; }                /* decrease the padding (even more than table_sm) */
    .bfxGrid_sm td { padding: 1px 3px; }                /* decrease the padding (even more than table_sm) */

    /*.bfxGrid_sm .table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th {  background-color: burlywood; }*/
    /*.bfxGrid_sm .table-striped > tbody > tr:nth-child(even) > td, .table-striped > tbody > tr:nth-child(even) > th {  background-color:antiquewhite; }*/
    .bfxGrid_smx .table-striped tbody tr:nth-of-type(odd)  { background-color: rgba(72, 113, 248, 0.8); }
    .bfxGrid_smx .table-striped tbody tr:nth-of-type(even) { background-color: rgba(112, 143, 248, 0.8); }
    .bfxGrid_smx .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(72, 113, 248, 0.068); }
    .bfxGrid_smx .table-striped tbody tr:nth-of-type(odd):hover { background-color: rgba(72, 113, 248, 0.368); }
    .bfxGrid_smx .table-striped tbody tr:nth-of-type(even):hover { background-color: rgba(72, 113, 248, 0.368); }

    /* --- Make the filter row to be small also - needs a bit of special handling */
    .bfxGrid_sm .bfxGridFilterBtn   { height: 22px!important; padding-top: .0em!important; }
    .bfxGrid_sm .bfxGridFilterIcon  { font-size: .8em; }
    .bfxGrid_sm .bfxGridFilterDdItem  { font-size: .8em; }
    .bfxGrid_sm .bfxGridFilterInput { height: 22px; }
    .bfxGridTbl { margin-bottom: .2rem !important;  }


    /* the V-Scrollbar (on|off) hides 17px on the right (the scrollbar width)
        - padding-right: 17px; fix causes the Dlg to be off center */
    .bfxDlg { width: 100vw; height: 100vh; position: fixed; top: 0px; left: 0px; background-color: rgba(5, 5, 5, .6); z-index: 1999; display: flex; justify-content: center; align-items: center;
              padding: 0 10px 0 0px; }    /* using pad-r 10px as a compromise fix */
    
    .bfxDlgClose { position: absolute; top: 5px; right: 5px; }
    .bfxDlg2 { width: 650px; height: 500px; padding: 7px 3px 7px 7px; background-color: rgba(3, 3, 3, .6); border-radius: 15px; border: 5px solid red; box-shadow: 0 0 15px rgba(255, 0, 0, 5); overflow-y: auto; }
    .bfxDlgTitle { margin: 0px 0px; color: greenyellow; font: 16px elephant, arial; }

    .bxfDlg2xx { width: 650px; height: 500px; padding: 7px 3px 7px 7px; background-color: white; border-radius: 5px; border: 2px solid black; box-shadow: 0 0 5px rgba(255, 0, 0, 5); overflow-y: auto; }
    .bxfDlg2 { padding: 7px 7px 3px 7px; margin: 0px 0px 0px 0px; background: white; border-radius: 5px; border: 2px solid black; overflow-y: auto; }

    .bfxDlg_sm { font: .93em arial; }
    .bfxDlg_sm input { font: .93em arial; height: 24px; padding: 2px .375rem; margin-bottom: 3px!important; }
    .bfxDlg_sm label { font: .93em arial; height: 24px; padding: 2px .375rem; margin-bottom: 3px!important; }
    .bfxDlg_sm select { font: .93em arial; height: 24px; padding: 0px 5px;  margin-bottom: 3px!important;}

    /* ----------- bfxGrid gridType = 'Grid' CSS ------------ */
  ol.bxggTable { margin: 0px; padding: 0px; }
  li.bxggTable { list-style: none; }
  *.bxggTable { box-sizing: border-box; }
  .bxggCheckbox { width: 18px; height: 18px; }


  /* 2 Column Card Layout */
  @media screen and (max-width: 736px) {
    .bxggTable { display: grid; grid-template-columns: 1fr 1fr;  gap: 20px; }
    .bxggRow { border: 1px solid gray; border-radius: 2px;  padding: 10px; }

    /* Don't display the first bxRow, since it is used to display the header for tabular layouts*/
    .bxggTable>li:first-child { display: none; }
    .bxggCell::before { content: attr(data-name); }

    /* bxggCell name for first column, and bxggCell value for second column. */
    .bxggCell { display: grid; grid-template-columns: minmax(9em, 30%) 1fr; }
  }

  /* 1 Column Card Layout */
  @media screen and (max-width:580px) {
    .bxggTable { display: grid; grid-template-columns: 1fr; }
  }

  /* Tabular Layout */
  @media screen and (min-width: 737px) {
    /* The maximum column width, that can wrap */
    /* --- We need a Unique Class for each top level of a Table - for the custom grid columns --- */
    /* .bxggRow { display: grid; grid-template-columns: 2em 2em 10fr 2fr 2fr 2fr 2fr 5em 5em; } */
    .bxggRow { display: grid; }
    .bxggcCell { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--column-width-min), 1fr)); }

    /* Definition of wrapping column width for bxCell groups. */
    .bxgw5   { --column-width-min: 5em; }
    .bxgw6   { --column-width-min: 6em; }
    .bxgw7   { --column-width-min: 7m; }
    .bxgw8   { --column-width-min: 8em; }
    .bxgw9   { --column-width-min: 9em; }
    .bxgw10  { --column-width-min: 10em; }
    .bxgw11  { --column-width-min: 11em; }
    .bxgw12  { --column-width-min: 12em; }
    .bxgw14  { --column-width-min: 14em; }
    .bxgw15  { --column-width-min: 15em; }
    .bxgw20  { --column-width-min: 20em; }

    /* In order to maximize row lines, only display one line for a cell */
    .bxggCell { border-right: 1px solid gray;  border-bottom: 1px solid gray; min-height: 1.4em;
        padding: 2px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .bxggCell1 { border-left: 1px solid gray; }
    .bxggCell.bfxGridFilter { overflow: visible;  }


    .bxggTable { border-top: 1px solid gray; }
    .bxggTable { border-bottom: 1px solid gray; }
    .bxggTable>.bxggRow:first-child { background-color: blanchedalmond; }
    .bxggRow:hover { background-color: rgb(200, 227, 252); }

    /* Center header labels */
    .bxggTable>.bxggRow:first-child .bxggCell {
        display: flex; align-items: center; justify-content: center;
        text-overflow: initial; overflow: auto; white-space: normal; }
  }

.bxlkMain .bxggTable, .bxggCell, .bxggCell1 {  border-width: 0px; }                    /* remove all borders for Lookups */
.bxlkMain .bxggCell1 {  border-bottom-width: 1px; border-color: lightgray; }           /* add back a bottom border per line in lookps */

/* Nicer looking Scrollbars */
.bfxScrollHide::-webkit-scrollbar {  display: none; }                           /* could also use width: 0;*/ 
.bfxScrollbar::-webkit-scrollbar { width: 10px; height: 10px; }
.bfxScrollbar::-webkit-scrollbar-track { background: #444; }
.bfxScrollbar::-webkit-scrollbar-thumb { border-radius: 1rem; background-color: #00d2ff; }
.bfxScrollbarX::-webkit-scrollbar-thumb { border-radius: 1rem; background-color: #00d2ff; background-image: linear-gradient(to top, #00d2ff 0%, #3a7bd5 100%); }

.pzGridBody1 .bfxScrollbar::-webkit-scrollbar-thumb { background-color: red; }
.pzPCircle { float: left; width: 35px; margin-top: -3px; margin-left: -5px !important; }
#scoreSheet .pzGridBody1 { font-size: .7em; }
.pzsName { font-weight: 700; }


/* Blue Fox Forums - bfxf -  */

.bfxfTheme1x { background: white; color: black; }
.bfxfTheme1 { background: #333333; color: white; }
.bfxfVidDlg .modal-header,.modal-footer,.modal-body { background: #46036f; }
#card_bfxfFNtForm .card-body { background: #46036f; }
#card_bfxfFNtForm .form-row { margin-top: 5px; }

.bfxfGameTag { display: inline-block; border-radius: 15px; padding: 2px 10px; margin: 3px 3px; background: #c3961b; }
.bfxfSlide { background: #35176c; color: yellow; }

.bfxfFHdr { display: flex; justify-content:space-between; margin-bottom: 10px; }
.bfxfFTitle { font-size: 1.5em; display: flex; flex-direction: row; }
.bfxfForumBodyX { border-radius: 7px; border: 2px solid #970cf3; box-shadow: 0 0 15px rgba(81, 203, 238, 5); background: black; padding: 10px 5px 10px 5px; margin-top: 10px; }
.bfxfForumBody { border-radius: 7px; border: 2px solid #970cf3; box-shadow: 0 0 15px rgba(255, 0, 230, 5); background: black; padding: 10px 5px 10px 5px; margin-top: 10px; cursor: pointer; }
.bfxfForumFtrX { background: black; }
.bfxfForumFtr { border-radius: 7px; border: 2px solid #970cf3; box-shadow: 0 0 15px rgba(255, 0, 230, 5); background: black; padding: 10px 5px 10px 5px; margin-top: 10px; }
.bfxfFBtns { float: right; clear: both; display: flex; flex-direction: row;  }
.bfxfFBtn { margin-right: 3px; height: 30px; }
.bfxfNtSection { font-size: 14px; }
.bfxfNewTopic { background: red; height: 150px; }
.bfxfTopicReply { background: #46036f;  }
.bfxfTopicSrch { background: #46036f;  }
.bfxfTopicReply textarea { font-family: verdana, arial; font-size: 12px; }
.bfxfNtTitle { color: white; font-size: 1.2em; text-align: center; width: 100%; }
.bfxfNtRow { margin: 5px 5px 5px 0px; width: 100%; display: flex; flex-direction: row; }
.bfxfNtSection input { font-size: 12px; }
.bfxfNtSection textarea { font-size: 12px; }
.xxbfxfNewTopic { background: red; width: 100%; height: 150px; position: fixed; left: 0; bottom: 0; z-index: 990; margin: 0;  }
.xxbfxfNtBody { padding: 10px; }
.xxbfxfSplit_H { cursor: row-resize; background-color: #3a00b7; width: 100%; height: 7px; 
               -moz-user-select: none; -ms-user-select: none; user-select: none; }
.xxbfxfSplit_V { cursor: col-resize; background-color: #3a00b7; width: 7px; height: 100%; 
               -moz-user-select: none; -ms-user-select: none; user-select: none; }
.bfxfTopic { font-size: .8em; font-weight: 500; margin: 0px 0px; padding: 0px 0px 0px 0px; min-width: 100%; min-height: 15px; clear: both; }
.bfxfTopic hr { margin: 0px 0px; padding: 0px 0px 0px 0px;  background: red; }
.bfxfTOwner { float: left; width: 35px; margin-top: -3px; }
.bfxfTTitle { float: left;  }
.bfxfTStatus { width: 40px; }
.bfxfTBtns { float: right; clear: both; display: flex; flex-direction: row; }
.bfxfTCnt { color: greenyellow; }
.bfxfTAge { font-size: .8em; width: 35px; margin: 2px 0 0 4px; padding: 0 2px 0 4px; background: #46036f; border-radius: 5px; text-align: center; white-space: nowrap; }
.bfxfTL { float: left; display: flex; flex-direction: row; }
.bfxfTR { float: right; display: flex; flex-direction: row; }
.bfxfTIcon { width: 65px; margin: 0 0 0 -5px; color: greenyellow; }
.bfxfSrchTxt { width: 300px; font-size: .8em; }
.bfxfReplyBtn { margin: 0 3px 0 0; }
.bfxfSrchBtn { margin: 0 0 0 5px; }
.bfxfSrchHiLite { background: rgba(0, 250, 250, 0.6) }
.bfxfTpsRes { font-size: .8em; font-weight: 500; margin: 0px 0px; padding: 0px 0px 0px 0px; min-width: 100%; clear: both; }
.bfxfTpsRes hr { margin: 0px 0px; padding: 0px 0px 0px 0px; background: red; }
.bfxfTpsMsg { width: 100%; clear: both; font-size: 12px; white-space: pre-line; padding: 7px 10px; margin: 0px 0px; background: #46036f; color: white;}
.bfxfTpsPno { }

.bfxfImgGal { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;}
  .bfxfImgGalX::-webkit-scrollbar { display: none; }
  .bfxfImgGal .cardx { flex: 0 0 auto; background: black; }
  .bfxfImgGal img { max-width: 70px; max-height: 80px;}
.bfxfThumbWrap { }
  .bfxfThumbWrap img { max-width: 200px; }
.bfxfGalItem { width: 200px; height: 200px; flex: 0 0 auto; background: black; border-radius: 15px; padding: 5px; }
.bfxfGalItem img { max-width: 190px; max-height: 190px; border-radius: 15px; }

.bfxfFtrLeft { font-size: 12px; margin-top: 0px; }
.bfxfFtrRight { font-size: 12px; margin-top: 0px; margin-right: 0px; float: right; }
.bfxfPager { font-size: 1.0em; display: flex; flex-wrap: nowrap; overflow-x: auto; flex-direction: row; gap:3px;  }
.bfxfPgNo { padding: 0px 3px; cursor: pointer; }
.bfxSel { color: orange; font-weight: 500; text-decoration: underline; }
.XbfxfPgNo.bfxSel { background: #0088cc; border-radius: 3px; }

.bfxfTBread { font-size: .7em; cursor: pointer; }
.bfxfTopicHdr {  }
.bfxfTopicTLine { display: flex; width: 100%; }
.bfxfTopicTLeft { flex: 1; justify-content: flex-start; font-size: 2.0em; font-weight: 500; }
.bfxfTopicTRight { flex: 1; justify-content: flex-end; font-size: 1.0em; text-align: right; }
.bfxfPostCont1 { width: 100%; text-align: center; position: relative; }
.bfxfPostCont2 { display: inline-block; margin: 0px auto; padding: 15px 15px; position: relative; background: #000; }
.bfxfPostBtnX { position: absolute; left: 5px; bottom: 5px; }
.bfxfPostBtn { width: 21px; height: 20px; margin: -3px 0 0 5px; padding: 0 0; background: #3e32d7; border-color: #3e32d7; }
.bfxfPostBtn img { height: 12px; margin-top: -5px; }
.bfxfPostCircle1 { border-radius: 50%; height: 30px; width: 30px; position: relative; box-shadow: 0 0 10px greenyellow; margin: -7px 10px 0px 3px; color: #fff; text-align: center; vertical-align: top; display: inline-block; float: left; }
.bfxfPostCircleTxt { font-size: 9px; font-weight: 700; margin-bottom: 5px; line-height: 30px; }
.bfxfPostCard { border-color: #444444; }
.bfxfPostCardHdr { padding: 2px 15px 5px 15px; background-color: black; color: darkorange; height: 25px; }

.bfxfPostCardFtr { padding: 1px 15px; height: 14px; background-color: black; color: white; display: flex; width: 100%; }
.bfxfPostFtrLeft { font-size: 10px; margin: -2px 0 0 0; padding: 0; flex: 1; justify-content: flex-start; }
.bfxfPostFtrRight { font-size: 8px; margin: -2px 0 0 0; padding: 0; flex: 1; justify-content: flex-end; text-align: right; cursor: pointer; }
.bfxfPostTitle { font-size: 12px; margin-top: 0px; }
.bfxfPostLink { color: orange; cursor: pointer; }
.bfxfMembList { display: flex; flex-direction: row; }
.bfxfMembPlus { cursor: pointer; object-fit: cover; width: 44px; height: 37px; }

.bfxfPostImgCont { width: 100%; display: flex; flex-direction: row; justify-content: center; }
.bfxfPostImgContx { width: 100%; text-align: center; position: relative; }
.bfxfPostImgCont2 { max-width: 90%; display: block; margin-left: auto; margin-right: auto; }
.bfxfPostImgxx { display: block; max-width: 80%; margin-left: auto; margin-right: auto; }
.bfxfPostImg {  max-width: 100%; max-height: 100%; cursor: pointer; }
.bfxfPostBtns { font-size: 12px; margin-top: 0px; margin-right: -10px; float: right; }
.bfxfPostTools { width: 40px; font-size: 10px; }

.bfxfPostCardBody { font-size: 12px; white-space: pre-line; padding: 7px 10px; margin: 0px 0px; background-color: #46036f; color: white; 
                    display: flex; flex-direction: row; }
.bfxfPostMeZZZ { background-color: #00d2ff; color: black; padding: 0 3px; }
.bfxfPostMe { background-color: #188dd1; }
.bfxfPostMe { background-color: #0a7bbe; color: #d2d2d2; }
.bfxfChatTitle { font: 24px elephant, arial; color: greenyellow; margin-top: 20px; }
.bfxfPostAvatar {  }
.bfxfPostAvatar[data-isop="1"] .ppxWhlT { box-shadow: 0 0 15px rgb(185, 87, 87); border: 2px solid yellowgreen; border-radius: 20px; }
.bfxfPostAvatar[data-isop="1"] .ppxWhlT:hover { box-shadow: 0 0 15px rgb(185, 87, 87); border: 2px solid #ce1717; border-radius: 20px; }


.bfxfPostMsg { width: 100%; position: relative; padding-left: 5px; }
.bfxfPostMsg blockquote { padding: 5px 5px 5px 5px; margin: 5px 5px 0px 15px; background: #651496; border-radius: 5px; }
.bfxfPostMsg hr { margin: 0; background-color: white; }
.bfxfPostMsg ul { margin-bottom: 0; }
.bfxfPostMsg ul,ol,p,h1,h2,h3,h4,h5,h6{ margin-top:0; margin-bottom:0 }
.bfxfPostMsg h1,h2,h3,h4,h5,h6 { display: inline; }
.bfxfPostMsg h1 { font-size: 2.2em; color: red; }
.bfxfPostMsg h2 { font-size: 2.0em;  }
.bfxfPostMsg h3 { font-size: 1.8em;  }
.bfxfPostMsg h4 { font-size: 1.6em;  }
.bfxfPostMsg h5 { font-size: 1.4em;  }
.bfxfPostMsg h6 { font-size: 1.2em;  }

.bfxfPostSpan { cursor: pointer; }
.bfxfImg_t { width: 30px; height: 30px; border-radius: 50%; margin-right: 5px; }


#bfxfQuoteCtl { background: #0088cc; width: 60px; height: 24px; border-radius: 5px; position: absolute; text-align: center; }
#bfxfQuoteCtl2 { --color: #eee; background-color: var(--color);  border: 5px solid var(--color); padding: 5px; border-radius: 5px; 
                cursor: pointer; position: absolute; width: 14px; height: 14px;  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.6)); z-index: 1001; }
    #XXXbfxfQuoteCtl::before { content: " Quote "; display: block; background-color: var(--color); color: black; font-weight: bold;
        margin-left: 24px; margin-top: -10px; padding: 6px; width: max-content; height: 22px; border-radius: 5px; }


.bfxImgUpAddTxt { display: inline-block; margin-right: 7px; }
.bfxImgUpBtns { margin: 2px 5px 3px 5px; display: flex; flex-direction: row; flex-wrap: nowrap; }
.bfxImgUpBtn { margin: 0 3px 0 0; }
.bfxImgUpGal { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;}
  .bfxImgUpGalX::-webkit-scrollbar { display: none; }
  .bfxImgUpGal .cardx { flex: 0 0 auto; background: black; }
  .bfxImgUpGal img { max-width: 70px; max-height: 80px;}


.ppxTitle1 { color: #00d2ff; font: 36px elephant, AbrilFatface, tahoma; margin: 0; position: absolute; top: 30px; left: 220px; white-space: nowrap; }
.ppxTitle1s1 { color: #00d2ff; font: 18px elephant, tahoma; margin: 0; position: absolute; top: 80px; left: 240px; }
.ppxTitle2 { color: #00d2ff; font: 24px elephant, AbrilFatface, tahoma; margin: 7px 14px; white-space: nowrap; }
.ppxTHdr { color: white; background-color: purple; }
.ppxTHdr_Grp { color: white; background-color: purple; }

.ppxChatTbl { width: 100%; background-color: black; color: white; margin-bottom: 0px; }
.ppxChatTbl td { padding: 0px 3px 0px 0px; }
.ppxChatTblX .ppxBoldL { padding: 0px 4px 0px 10px; }
/* does work*/
/*.ppxChatTbl tr:nth-child(even) { background-color: purple; }*/
.ppxChatTblXX tr:nth-child(even):not(.ppxTHdr_Grp) { background-color: #f2f2f2; }
.ppxChatTbl tr:nth-child(even):not(.ppxTHdr_Grp):not(.ppxBlack) { background-color: #333333; }

.ppxScoreHdr { background: black; position: relative; }
.ppxScoreTbl { width: 100%; background-color: black; color: white; }
        .ppxScoreTbl td { padding: 0px 4px 0px 4px; vertical-align: middle !important; }
        .ppxScoreTbl .ppxTotal { padding: 0px 10px 0px 4px; }
        /* does work*/
        .ppxScoreTbl .ppxBoldL { padding: 0px 4px 0px 10px; }
        /* does work*/
        .ppxScoreTbl .ppxScore { padding: .4em 3px 0px 3px; font-weight: 500; }
        .ppxScoreTbl .ppxPts { padding: .4em 3px 0px 3px; font-weight: 500; }
    .ppxScoreTbl, th, td .ppxPts { padding-top: 5px; }
    /*#scoreTbl tr:nth-child(even) { background-color: purple; }*/
    .ppxScoreTblXX tr:nth-child(even):not(.ppxTHdr_Grp) { background-color: #f2f2f2; }
    .ppxScoreTbl tr:nth-child(even):not(.ppxTHdr_Grp):not(.ppxBlack) { background-color: #222222; }
.ppxGray { background-color: #222222; }

  /* -- ppxTdXxx for wheel images - extra height to accomodate the 2px border when shown */
.ppxTd100 { width: 100px; height: 104px; padding: 0; vertical-align: middle; position: relative; }
.ppxTd100L { width: 100px; height: 104px; padding: 0; vertical-align: middle; position: relative; text-align: left; }
.ppxTd100C { width: 100px; height: 104px; padding: 0; vertical-align: middle; position: relative; text-align: center; }
.ppxTd100R { width: 100px; height: 104px; padding: 0; vertical-align: middle; position: relative; text-align: right; margin: auto 0 auto auto; }
.ppxTd80 { width: 100px; height: 84px; padding: 0; vertical-align: middle; position: relative; }
.ppxTd80p7 { width: 111px; height: 84px; padding: 0 4px 0 7px !important; vertical-align: middle; position: relative; }
.ppxTd80T { width: 100px; height: 80px; padding: 0; vertical-align: top !important; position: relative; }
.ppxTd30 { width: 40px; height: 30px; padding: 0; vertical-align: top !important; position: relative; }

.ppxAv7 { border-radius: 7px; border: 2px solid #970cf3; box-shadow: 0 0 15px rgba(81, 203, 238, 5); width: 100%; }
.ppxAv5 { border-radius: 5px; border: 2px solid #970cf3; box-shadow: 0 0 15px rgba(81, 203, 238, 5); width: 100%; }

.ppxWhlWrap { padding-bottom: 0px; margin-bottom: -4px; position: relative; display: inline-block; }
.ppxWhlWrapX { margin: 0; position: relative; display: block; }
.ppxWhl { position: absolute; cursor: pointer; display: inline-block; text-align: left !important; left: 0; top: 50%; transform: translate(0, -50%); margin: 0; }
  .ppxWhl:hover { box-shadow: 0 0 15px rgb(185, 87, 87); border: 2px solid #ce1717; border-radius: 20px; }
.ppxWhlT { position: absolute; cursor: pointer; display: inline-block; text-align: left !important; margin: 0; left: 0; top: 0; }
  .ppxWhlT:hover { box-shadow: 0 0 15px rgb(185, 87, 87); border: 2px solid #ce1717; border-radius: 20px; }

.ppxWhlWrap.pbStart { margin-top: 5px; margin-left: -5px; }
.pbStart .ppxWhl:hover { box-shadow: unset; border: unset; padding: 2px; padding-left: 2px; }

@media screen and (max-width: 580px) {
    .bfxfPostAvatar.ppxTd80 { width: 40px; height: 40px; }
    .bfxfPostAvatar .myXItem_80 { width: 40px; height: 40px; }
    .bfxfPostAvatar .bfxOvr { width: 40px; height: 40px; }
    .bfxfPostAvatar .bfxOvrImg { width: 37px; height: 37px; margin: 0; }
    .bfxfPostAvatar .bfxOvrOvr { display: none; }
    .bfxfPostAvatar .bxilLabel { visibility: hidden; }
    .bfxfPostAvatar:hover .bxilLabel { visibility: visible; }
}

.ppMembIcon { cursor: pointer; width: 40px; height: 40px; display: relative; }
.ppMembIcon:hover { box-shadow: 0 0 15px rgb(185, 87, 87); border: 2px solid #ce1717; border-radius: 50%; }
.ppMembIcon img { width: 37px; height: 37px; margin: 0; border-radius: 50%; }
.ppMembIconLbl { position: relative; left: 0; bottom: 15px; width: 100px; height: 18px; font-size: 12px; margin-bottom: 0px;
             color: #ffd800; background: rgba(44,44,44,0.5); text-align: center; overflow: hidden; visibility: hidden; z-index: 10; white-space: nowrap; }
.ppMembIcon:hover .ppMembIconLbl { visibility: visible; }



.ppxX { background: url("/images/vm/simpleX.png") no-repeat; background-size: 32px; background-position: center; position: absolute; left: 34px; top: -23px; width: 32px; height: 32px; }
.ppxXGrp { width: 100px; height: 22px; position: absolute; left: 0; bottom: -24px; background-size: 100px; }
    .ppxXGrp[data-strikes="1"] { background: url("/images/vm/xgrpX_1.png") no-repeat; background-position: center; }
    .ppxXGrp[data-strikes="2"] { background: url("/images/vm/xgrpX_2.png") no-repeat; background-position: center; }
    .ppxXGrp[data-strikes="3"] { background: url("/images/vm/xgrpX_3.png") no-repeat; background-position: center; }
    .ppxXGrp[data-strikes="4"] { background: url("/images/vm/xgrpX_4.png") no-repeat; background-position: center; }
    .ppxXGrp[data-strikes="5"] { background: url("/images/vm/xgrpX_5.png") no-repeat; background-position: center; }
    .ppxXGrp[data-strikes="6"] { background: url("/images/vm/xgrpX_6.png") no-repeat; background-position: center; }
    .ppxXGrp[data-strikes="7"] { background: url("/images/vm/xgrpX_7.png") no-repeat; background-position: center; }
    .ppxXGrp[data-strikes="8"] { background: url("/images/vm/xgrpX_8.png") no-repeat; background-position: center; }
    .ppxXGrp[data-strikes="9"] { background: url("/images/vm/xgrpX_9.png") no-repeat; background-position: center; }
    .ppxXGrp[data-strikes="10"] { background: url("/images/vm/xgrpX_10.png") no-repeat; background-position: center; }
.ppxXGrpTotXX { width: 150px; height: 32px; position: relative; display: inline-block; background-size: 150px; }
.ppxXGrpTot { width: 150px; height: 32px; background-size: 150px; position: relative; display: inline-block; bottom: -3px; }


.ppxStrike { width: 32px; height: 32px; display: inline-block; margin-top: 10px; }
.ppxStrike[data-strikes="1"] { background: url("/images/vm/simpleX.png") no-repeat; }
.ppxStrike2 { width: 32px; height: 32px; background: url("/images/vm/simpleX.png") no-repeat; position: absolute; top: 0px; left: 0px; }
.ppxActive { width: 32px; height: 32px; background: url("/images/ppLogo32.png") no-repeat; position: absolute; top: 0px; right: 0px; }
.ppxActive2 { width: 32px; height: 32px; background: url("/images/ppLogo32.png") no-repeat; position: absolute; top: -39px; left: -23px; }

.ppxBold { font-weight: 500; }
.ppxBoldC { font-weight: 500; text-align: center; }
.ppxBoldC_Thin { font-weight: 500; text-align: center; padding: 0px 0px !important; margin: 0; }
.ppxBoldRM { font-weight: 500; text-align: right; vertical-align: middle !important; }
.ppxBoldLM { font-weight: 500; text-align: left; vertical-align: middle !important; position: relative; }
.ppxBoldCM { font-weight: 500; text-align: center; vertical-align: middle !important; }
.ppxBoldR { font-weight: 500; text-align: right; }
.ppxBoldL { font-weight: 500; text-align: left; }
/* margin and padding do NOT work */
.ppxScoreXX { font-size: .8em; text-align: right; }
.ppxPtsXX { font-size: .8em; text-align: right; }
/* margin and padding do NOT work */
.ppxScore { font-size: 14px; text-align: right; }
/* 14px = .8em when in LARGE mode - but will not resize */
.ppxPts { font-size: 14px; text-align: right; }
.ppxTotal { font-size: 1.1em; text-align: right; font-weight: 600; padding: 0em 5em; }
/* margin and padding do NOT work */
.ppxGrp { font-size: 1.0em; background-color: #b9cffc; }


.bxilLabel { text-align: center; background: rgba(44,44,44,0.8); }
.bxilItem[data-val="1"] { box-shadow: 0 0 15px rgb(185, 87, 87); border: 2px solid yellowgreen; border-radius: 20px; }
.bxilItemXXX:hover { box-shadow: 0 0 15px rgb(185, 87, 87); border: 2px solid #ce1717; border-radius: 20px; }


.audBox { background: #444444; padding: 26px 0 0 0; border-radius: 0; width: 320px; height: 200px; min-height: 200px; position: relative; }
.audBoxAudio { height: 30px; width: 100%; }

.playersBoxX { background: #2828cf; padding: 0px 0px; border-radius: 0; width: 100%; height: 240px; min-height: 240px; position: relative; grid-column: span 2; }
.playersBox { background: black; padding: 0px 0px; border-radius: 0; width: 100%; height: auto; position: relative; grid-column: span 2; }
.pbTopX { padding: 1px 4px 1px 4px; color: white; background-color: rgba(5, 5, 5, .6); width: 100%; height: 29px; position: relative; }
.pbTop { padding: 1px 4px 1px 4px; color: white; background-color: darkblue; width: 100%; height: 29px; position: relative; }
.pbTitle { color: white; vertical-align: middle; width: 50%; text-align: left; font-size: 16px; font-weight: 500; position: absolute; left: 7px; top: 4px; }
.pbScoreDiv { position: absolute; top: 4px; right: 4px; width: 160px; margin: 0px 0 0 0; }
#pbScore { font-size: 14px; font-weight: 600; margin: 0 0 0 5px; text-align: right; }
.pbShort { height: 22px; max-height: 22px; line-height: 22px; }
.btn.pbShort { padding-top: 0px !important; }
.pbLine { margin: 2px 7px 2px 7px; color: #00e8ff; vertical-align: middle; width: 100%; height: 20px; text-align: left; font-size: .8em; }
.pbPStatus { width: 20px; height: 20px; position: absolute; right: -5px; top: 0; }
    .pbPStatus[data-vmc="0"] { background: url("/images/ball30_red.png") no-repeat; background-size: 20px; background-position: center; }
.pbStrike { background-size: 32px; background-position: center; position: absolute; left: 0px; bottom: 10px; width: 32px; height: 32px; }
    /* left: 34px; is centered */
    .pbStrike[data-strikes="1"] { background: url("/images/vm/simpleX.png") no-repeat; }
/*.pbStrikes { width: 20px; height: 20px; top: 0px; left: 0px; }
    .pbStrikes[data-strikes="0"] { background: url("/images/ball_0.png") no-repeat; }
    .pbStrikes[data-strikes="1"] { background: url("/images/ball_1.png") no-repeat; }
    .pbStrikes[data-strikes="2"] { background: url("/images/ball_2.png") no-repeat; }
    .pbStrikes[data-strikes="3"] { background: url("/images/ball_3.png") no-repeat; }*/
.pbBall_X { width: 40px; height: 40px; margin: 5px 50px 0px 15px; }
.pbBall { width: 40px; height: 40px; margin: 5px 7px 0px 0px; }
    .pbBall[data-val="0"] { background: url("/images/ball_0.png") no-repeat; }
    .pbBall[data-val="1"] { background: url("/images/ball_1.png") no-repeat; }
    .pbBall[data-val="2"] { background: url("/images/ball_2.png") no-repeat; }
    .pbBall[data-val="3"] { background: url("/images/ball_3.png") no-repeat; }
    .pbBall[data-val="4"] { background: url("/images/ball_4.png") no-repeat; }
    .pbBall[data-val="5"] { background: url("/images/ball_5.png") no-repeat; }

.pbIcon { margin: 0px 5px; }
.pbIconP { position: relative; float: left; }
.pbIconPxxx img { margin-right: 5px; }
.pbIconP .bxilTT { display: none; visibility: hidden; width: 100px; background: rgba(44,44,44,0.8); font-size: 12px; color: #ffd800; text-align: center; padding: 3px; border-radius: 6px; position: absolute; top: 0px; left: 0px; z-index: 10; }
.pbIconP:hover .bxilTT { display: block; visibility: visible; }
.ppxTd35 { width: 37px; margin-left: 3px; }

.pbGameWhlX { position: absolute !important; bottom: 9px; left: 0px; width: 100%; height: 200px; }
.pbRBtnsX { position: absolute; bottom: 0px; left: 0px; width: 100%; height: 35px; }
.pbCtlBtn { margin: 0px 0px; padding: 0px 4px; height: 24px; }
.pbCtlBtnA { margin: 0px 0px 0px 60px; padding: 0px 4px; height: 24px; }
.pbCtlBtnB { margin: 7px 0px 0px 4px; padding: 0px 4px; height: 24px; float: left; }

/* float: left places the buttons on the same row */
#pbState { margin: 0px 0px; padding: 0px 4px; height: 28px; width: 66px; }
.pbGameSet { position: absolute; left: 5px; bottom: 5px; }
.pbGameBtn { margin: 3px 3px; padding: 0px 4px; height: 20px; }
.pbGameBtn2 { width: 67px; height: 24px; margin-top: 0px; margin-bottom: 3px; padding-top: 0px; font-weight: 500; }
.pbArrowBtnX { margin: 8px 3px 5px 3px; height: 34px; width: 30px; max-width: 30px; padding: 3px 0 3px 0; }
.pbArrowBtn { margin: 0px 0px 0px 5px; height: 24px; width: 40px; padding: 0px 0 0px 0; }
.pbox { background: black; overflow: hidden; }

.pbWrap     { width: 450px; height: 211px; overflow: hidden; }
.pbCtlsWrap { width: 250px; display: flex; flex-direction: column; }
.pbPlayers { width: 215px; height: 211px; overflow: auto; }
.pbCtl { width: 95px; height: 211px; padding: 0 0 0 7px; }
.pbRight { float: left; width: 160px; height: 211px; overflow: hidden; padding: 0px 4px 4px 0px; position: relative; }
.pbBtm { float: left; width: 160px; height: 211px; overflow: hidden; padding: 0px 4px 4px 0px; position: relative; }

.pbWrap2 { width: 100%; margin: 0 0 0 0px;  }
.pbWrap2 hr { background: red; margin: 5px 0 0 0; }
.pbGameSect { width: 250px; margin: 0 0 2px 5px; display: flex; flex-direction: row;  background: black; }
.pbGameWhlX2 { width: 100%; height: 200px; }
.pbGameWhl .ppxWhl { margin: -5px 0 0 -5px; }
.pbCtlsWrap2 { width: 100px; display: flex; flex-direction: column; }
.pbRBtns2 { margin: 0 0 0 10px; width: 40px; }
.pbPlayers2xx { width: 100%; height: 225px; overflow: auto; background: black; padding: 0 0 0 5px; }
.pbPlayers2 { width: 100%; height: auto; background: black; padding: 0 0 0 5px;}
.pbPlayers2 .myXItem_100 { margin: 9px 15px 5px 15px; }
.pbPlayers2 .bxilLabel { text-align: right; padding-right: 7px; }
.pbPlayers2 .bxilLabel2 { text-align: left; }
.pbCtl1 { width: 120px; height: 120px; margin: 0 0 0 0; text-align: center; display: flex; align-items: center; justify-content: center; flex-direction: column;}
.pbCtl2 { width: 100px; height: 30px; margin: 15px 0 0 24px; display: flex; flex-direction: row; align-items: center; }
.pbCtl3 { width: 100px; height: 20px; margin: 4px 0 0 10px; display: flex; flex-direction: row; }

.pbGameNo { position: absolute; top: 1px; left: 1px; color: yellow; font: 18px elephant, arial; }
.pbBNo { color: yellow; font: 18px elephant, arial; margin-bottom: 5px;}
.pbPNo { color: yellow; font: 18px elephant, arial; }
.pbActionBtn { position: absolute; top: 0px; right: 0px; padding: 0px 0px; height: 32px; width: 32px; border-radius: 50%; box-shadow: 0 0 10px yellowgreen; border: 1px solid orange;}

.pbPlayersSm { height: 100px; overflow: hidden; background: blue; }
.pbpSm1 { height: 100px; width: 500px; background: blue; }

#pbGrpGames .bfxOvrTxt {
    -webkit-text-stroke: 1px black;
    text-shadow: -1px -1px 0px #000, 1px -1px 0px #000, -1px 1px 0 #000, 1px 1px 0px #000;
}

.vmImgListDlg { width: 650px !important;  }
.bfxfGalImgDlg { width: 90vw; height: 90vh; }
.bfxGrid_black table { background: black; }
.bfxGrid_hilite1 td { background: green; }

/*.pp-frame-blue { border-radius: 7px; border: 2px solid #970cf3; box-shadow: 0 0 15px rgba(81, 203, 238, 5); }
.pp-frame-red  { border-radius: 7px; border: 2px solid #970cf3; box-shadow: 0 0 15px rgba(255, 0, 0, 5); }
.pzGridBody1 { background: snow; color: darkslategrey; border-radius: 6px; border: 5px solid red; box-shadow: 0 0 15px rgba(255, 0, 0, 5); margin-top: 5px;} */
.pzGridBody1 { background: darkblue; color: darkslategrey; margin-top: 5px; padding-top: 3px; width: 100%; }
.pzGridBody1 .bfxGridFrame { background: snow;}
.pzGridBody1 .bfxGridTitle { background: darkblue; padding-right: 5px; }
.pzGridBody1 table tr, table td { border-top: 0px; border-bottom: 1px solid gray; }
.pzGridBody1x table td { border-top: 0px;  border-bottom: 1px solid #dee2e6; }
.pzGridBody1 hr { background: black; }
.pzGridBody1 th { background: black; color: greenyellow; border-color: black; padding: 3px 3px 3px 3px;  }
.pzGridBody1 td { border-color: lightgray; padding: 0px 3px 0px 3px; }

.divHS { text-align: center; padding-top: 5px; width: 120px; float: left; height: 120px; }
.hsName { font-weight: bold; }
.hsScore { color: greenyellow; float: right; font-size: 12px; font-weight: bold; }
.hsBodyX { display: flex; flex-direction: row; gap: 3px; height: auto; padding-left: 0; padding-right: 0; flex-wrap: wrap; }

.ssxGSect { position: relative; display: flex; width: 100%;  }
.ssxCtl { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; }
.ssxCtl > .bfxFlexP2 { width: 196px; }
.ssxFrame { position: relative; background-color: black; width: 176px; height: 354px; overflow: hidden; margin: 10px; }
.ssxPlungex { position: absolute; display: inline-block; left: 55px; top: 50px; margin: 0; background: blue; width: 100px; height: 500px; }
.ssxPlunge { position: absolute; display: inline-block; left: 45px; top: 30px; margin: 0; }
.ssxGauge { position: absolute; display: inline-block; left: 0; top: 0; margin: 0; width: 174px; }
.ssxGaugeX { position: absolute; display: inline-block; left: 0; top: 0; margin: 0; background: url("/images/ball30_green.png") no-repeat; }
.ssxLineX { position: absolute; display: inline-block; left: 0; top: 100px; margin: 0; margin-left: -1px; height: 100px; }
.ssxLine { position: absolute; display: inline-block; left: 0; top: 50px; margin: 0; margin-left: -1px; }
.ssxBtns { margin: 0px 20px 0px 20px; display: flex; }
.ssxSave { text-align: center; margin-top: 10px; }
.ssxSave .btn { padding-left: 20px; padding-right: 20px; }
.ssxItem { text-align: center; padding-top: 5px; width: 120px; float: left; height: 140px; }

.fsxGSect { position: relative; display: flex; width: 100%;  }
.fsxInfo { min-width: 300px; }
.fsxFrame { position: relative; background-color: darkslateblue; width: 360px; height: 400px; overflow: hidden; margin: 0px; }
.fsxFrameX { -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; }
.fsxRotFrameX { position: relative; margin: 0px; width: 360px; height: 400px; transform-origin: left top; }
.fsxRotFrame { position: relative; margin: 0px; width: 360px; height: 400px; }
.fsxRotateX { position: relative; margin: 0px; width: 360px; height: 400px; }
.fsxBall { position: absolute; display: inline-block; left: 0px; top: 0px; margin: 0; }
.fsxFlipper { position: absolute; display: inline-block; left: 30px; top: 50px; margin: 0; } /* subtracting width of 300 from Frame (then divide by 2) */
.fsxFShotFlipIx_UC { position: absolute; top: 5px; left: 150px; padding: 3px; }
.fsxFShotFlipIx { position: absolute; bottom: 5px; right: 5px; padding: 2px; background-color: darkorchid; width: 54px; height: 54px;}

.bxfLbl70 .bxfPreLabel { min-width: var(--bxf-section-label-width, 70px); }
.bxfLbl60 .bxfPreLabel { min-width: var(--bxf-section-label-width, 60px); }

.bfxW50 { width: 50px; }
.bfxW70 { width: 70px; }
.bfxW100 { width: 100px; }
.bfxW150 { width: 150px; }
.bfxW200 { width: 200px; }
.bfxW300 { width: 300px; }
.bfxW400 { width: 400px; }
.bfxW450 { width: 450px; }
.bfxW500 { width: 500px; }
.bfxH200 { height: 200px; }
.bfxH250 { height: 250px; }
.bfxH300 { height: 300px; }
.bfxH350 { height: 350px; }
.bfxH400 { height: 400px; }

.pzCutoff { background-color: red; color: greenyellow; text-align: center; }
.pzCenter { text-align: center; }
.ml10 { margin-left: 10px; }
.ml20 { margin-left: 20px; }
.pl10 { padding-left: 10px; }
.pl20 { padding-left: 20px; }
.clrBxTst { color: greenyellow; background-color: orangered; margin-left: 15px; }
.pzGridBody1 td.pl10 { padding-left: 10px; }
.pzGridBody1 td.pl20 { padding-left: 20px; }
.pzTdBdr_L { border-left: 1px solid blue; }

.pzPos  { border-radius: 20px; background: blue; width: 20px; cursor: pointer; }
.pzPos2 { padding: 0 3px 0 3px; margin: 0 2px 0 2px; background: transparent; border: 0; 
          border-bottom: 5px solid blue; cursor: pointer; }
.pzPos:hover { background: gray; border-bottom:5px solid red; }
.pzPos:focus { background: orange; border-bottom: 5px solid orange; }

.pzPosRdo { margin: 0 0 0 10px; }

.scoreOrigScoreTd { margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px; }
.scoreOrigScore   { font-size: 1.0rem; height: 22px; text-align: end; }
.hideTd { visibility: hidden; border: none; }

.bfxPicSelFrameRow { position: relative; width: 100%; }
.bfxPicSelFrameWrap { position: relative; margin: 10px; padding: 5px; }
.bfxPicSelFrame { position: relative; width: 100%; }
.bfxPicSelFrameX { position: relative; width: 100%; }
.bfxPicSelImg { min-width: 250px; min-height: 50px; max-width: 100%; height: auto;  }

.bfxCamDlg .modal-header { background-color: #46036f; color: greenyellow; }
.bfxCamDlg { background-color: #46036f; color: greenyellow; }
.bfxPicEditFrameWrap { position: relative; overflow: hidden; margin: 10px; padding: 5px; }
.bfxPicEditFrame { position: relative; }
.bfxPicEditFrameRowX { width: 100%; height: 350px; }
.bfxPicEditFrameRow { position: relative; overflow: hidden;  }

.bfxPicEditImg { }
.bfxPicEditSelX { position: absolute; width: 50px; height: 20px; top: 20px; left: 20px; border: 3px solid red; }
.bfxPicEditSel  { position: absolute; border: 3px solid red; }
.bfxPicEditChTL { position: absolute; width: 21px; height: 21px; top: -12px; left: -12px;}
.bfxPicEditChTR { position: absolute; width: 21px; height: 21px; top: -12px; right: -12px;}
.bfxPicEditChBL { position: absolute; width: 21px; height: 21px; bottom: -12px; left: -12px;}
.bfxPicEditChBR { position: absolute; width: 21px; height: 21px; bottom: -12px; right: -12px;}
.bfxPicEditChBR_Drag { position: absolute; width: 16px; height: 16px; bottom: 10px; right: 10px;}
.bfxPicEditChT { position: absolute; width: 21px; height: 21px; top: -12px; left: calc(50% - 12px);}
.bfxPicEditChR { position: absolute; width: 21px; height: 21px; top: calc(50% - 12px); right: -12px;}
.bfxPicEditChL { position: absolute; width: 21px; height: 21px; top: calc(50% - 12px); left: -12px;}
.bfxPicEditChB { position: absolute; width: 21px; height: 21px; bottom: -12px; left: calc(50% - 12px);}

.bfxPicMobDlg .modal-dialog { margin: 0px auto; }
.bfxPicMobDlg .modal-content,
.bfxPicMobDlg .modal-header,
.bfxPicMobDlg .modal-body,
.bfxPicMobDlg .modal-footer { background-color: #46036f; color: greenyellow; }
.bfxPicMobDlg .modal-body { padding: 7px; overflow: hidden; }
.bfxPicMobRow { width: 100%; }
.bfxPicMobStage { width: 100%; min-height: 260px; overflow: auto; scrollbar-width: thin; overscroll-behavior: contain; touch-action: pan-x pan-y; padding: 5px; background-color: #111827; }
.bfxPicMobFrame { position: relative; margin: 0px auto; touch-action: none; user-select: none; }
.bfxPicMobImg { position: absolute; inset: 0px; display: block; max-width: none; user-select: none; touch-action: none; }
.bfxPicMobSel { position: absolute; border: 3px solid #ff2727; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .42); touch-action: none; cursor: move; }
.bfxPicMobHandle { position: absolute; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; touch-action: none; }
.bfxPicMobHandleImg { width: 21px; height: 21px; pointer-events: none; }
.bfxPicMobHandle-nw { top: -24px; left: -24px; cursor: nwse-resize; }
.bfxPicMobHandle-n { top: -24px; left: calc(50% - 22px); cursor: ns-resize; }
.bfxPicMobHandle-ne { top: -24px; right: -24px; cursor: nesw-resize; }
.bfxPicMobHandle-e { top: calc(50% - 22px); right: -24px; cursor: ew-resize; }
.bfxPicMobHandle-se { bottom: -24px; right: -24px; cursor: nwse-resize; }
.bfxPicMobHandle-s { bottom: -24px; left: calc(50% - 22px); cursor: ns-resize; }
.bfxPicMobHandle-sw { bottom: -24px; left: -24px; cursor: nesw-resize; }
.bfxPicMobHandle-w { top: calc(50% - 22px); left: -24px; cursor: ew-resize; }
.bfxPicMobMeta { margin: 6px 10px 0px 10px; font-size: .92rem; text-align: center; color: #d7f7a6; }
.bfxPicMobTool { min-width: 44px; min-height: 44px; }
.bfxPicMobTextBtn { min-width: 44px; min-height: 38px; margin-left: 6px; }

@media (max-width: 640px) {
    .bfxPicMobDlg .modal-dialog { width: 100vw!important; max-width: 100vw; height: 100dvh; margin: 0px; }
    .bfxPicMobDlg .modal-content { min-height: 100dvh; border-radius: 0px; }
    .bfxPicMobDlg .modal-footer { gap: 6px; align-items: center; }
    .bfxPicMobStage { min-height: 320px; }
}


.glList {}
.glListbxfHdr { width: 100%; display: flex; justify-content: space-between; margin: 7px 0px; }
.glHdr { width: 100%; display: flex; justify-content: space-between; margin: 7px 0px; }
.glHdrL { display: flex; flex-direction: row; width: auto; gap: 7px; }
.glHdrR { display: flex; flex-direction: row; width: auto; gap: 7px; }
.glBodyxx { width: 100%; display: flex; flex-direction: row; margin: 0px 0px; }
.glBodyLxx { display: flex; flex-direction: column; width: auto; gap: 7px; }
.glBody { width: 100%; margin: 0px 0px; }
.glBodyR { display: block; width: auto; margin: 3px 3px; }
.glBodyRx { display: flex; flex-direction: column; width: auto; gap: 7px; }
.glGame { text-align: center; padding-top: 5px; width: 110px; float: left; height: 167px; margin-left: 3px; }
.glGame .pp-frame-blue:hover { box-shadow: 0 0 15px rgb(185, 87, 87); border: 2px solid #ce1717; }
.glGameName { font-weight: bold; }
.glGameMfr { color: grey; font-size: 11px; }
.glGameYear { color: grey; float: right; font-size: 11px; }
.glGameTarget { color: grey; float: right; font-size: 11px; }
.glLabelX { text-align: left; padding-left: 5px; padding-right: 5px; font-size: 12px; line-height: 12px; position: relative; margin-top: 5px; }
.glLabelX > tag:hover { display: block; }
.glBtn1 { position: absolute; top: -114px; left: 0px; z-index: 100; padding: 1px 4px; color: white; vertical-align: middle; outline: none; width: 30px; text-align: center; /*display: none;*/ }
.glBtn1:focus { outline: none; box-shadow: none; }
/*.glBtn2 { position: absolute; top: -28px; left: 80px; z-index: 1000; padding: 1px 4px; color: white; vertical-align: middle; outline: none; width: 30px; text-align: center; } */
.glBtn2 { position: absolute; top: -22px; left: 84px; z-index: 100; padding: 1px 4px; color: white; vertical-align: middle; outline: none; width: 24px; text-align: center; /*display: none;*/ font-size: .9em; }
.glBtn2:focus { outline: none; box-shadow: none; }
.glBtn3 { position: absolute; top: -22px; left: 0px; z-index: 100; padding: 1px 4px; color: white; vertical-align: middle; outline: none; width: 24px; text-align: center; /*display: none;*/ font-size: .9em; }
.glBtn3:focus { outline: none; box-shadow: none; }

.glBtnB1 { position: absolute; top: -26px; left: 87px; z-index: 100; padding: 1px 4px; color: white; vertical-align: middle; outline: none; height: 26px; /*display: none;*/ }
.glBtnB1:focus { outline: none; box-shadow: none; }
.glBtnB2 { position: absolute; top: -26px; left: 54px; z-index: 100; padding: 1px 4px; color: white; vertical-align: middle; outline: none; height: 26px; /*display: none;*/ }
.glBtnB2:focus { outline: none; box-shadow: none; }
.glBtnB3 { position: absolute; top: -26px; left: 0px; z-index: 100; padding: 1px 4px; color: white; vertical-align: middle; outline: none; height: 26px; /*display: none;*/ }
.glBtnB3:focus { outline: none; box-shadow: none; }
.glPpBtn { position: absolute; top: -36px; left: 0px; z-index: 100; padding: 0; }

.glPfBorder { width: 100%; max-width: 800px; margin: 10px auto; padding: 10px; position: relative; }            /* margin: auto keeps image centered */
.glPfContainer { width: 100%; margin: 0px auto; padding: 0px; background: #000; position: relative; }
.glPfWrap { width: 100%; max-width: 800px; margin: 10px auto; padding: 0px; position: relative; }
.glPfWrap2 { width: 100%; margin: 0px auto; padding: 5px; background: #000; position: relative; }

.bfxSlider_test { width: 500px; height: 100px; }
.bfxSlider_whl150 { width: 200px; height: 160px; text-align: center; }
.bfxSlider_whl150 .bfxSlideDivX { margin-left: 22px; }
.bfxSliderMain  { position: relative; overflow: hidden; }
.bfxSliderCont  { position: relative; width: 100%; height: 100%; overflow: hidden; }
.bfxSlideDivX { position: absolute;  }                         /* init position is outside parent */
.bfxSlideDivX_img { width: 100%; }
.bfxSlider_leftArrow { position: absolute; left: 0px; top: 0px; width: 25px; height: 100%; vertical-align: middle; }
.bfxSlider_rightArrow { position: absolute; right: 0px; top: 0px; width: 25px; height: 100%; vertical-align: middle;  }
.bfxSlider_arrowImg { position: absolute; left: 0px; top: 40%; display: none; }
.bfxSlider_index { position: absolute; left: 50%; transform: translate(-50%, 0); bottom: 10px; height: 20px; text-align: center; background-color: rgba(3, 3, 3, .6); 
                   border-radius: 10px; display: flex; flex-direction: row; gap: 7px; justify-content: space-between; padding: 0 5px; }
.bfxSlider_whl150 .bfxSlider_index { bottom: 24px; }
.bfxSlider_ix { width: 14px; height: 14px; background-color: red; border-radius: 50%; margin-top: 3px; font-size: 9px;  }
.bfxSlider_ixSel { background-color: greenyellow; }
.bfxSlider_leftArrow:hover { box-shadow: 0 0 15px rgb(185, 87, 87); background-color: rgba(3, 3, 3, .6);  }
.bfxSlider_rightArrow:hover { box-shadow: 0 0 15px rgb(185, 87, 87); background-color: rgba(3, 3, 3, .6);  }
.bfxSlider_leftArrow:hover .bfxSlider_arrowImg { display: unset; }
.bfxSlider_rightArrow:hover .bfxSlider_arrowImg { display: unset; }
.bfxSlideIn_Up  { animation: bfKfSlideIn_Up 1s 1 ease-in-out; }
.bfxSlideOut_Up { animation: bfKfSlideOut_Up 1s infinite ease-in-out; }
.bfxSlideIn_Dn  { animation: bfKfSlideIn_Dn 1s infinite ease-in-out; }
.bfxSlideOut_Dn { animation: bfKfSlideOut_Dn 1s infinite ease-in-out; }
.bfxSlideIn_Next  { animation: bfKfSlideIn_Next 1s 1 ease-in-out; }
.bfxSlideOut_Next { animation: bfKfSlideOut_Next 1s 1 ease-in-out; }
.bfxSlideIn_Prev  { animation: bfKfSlideIn_Prev 1s infinite ease-in-out; }
.bfxSlideOut_Prev { animation: bfKfSlideOut_Prev 1s infinite ease-in-out; }

@keyframes bfKfSlideIn_Up   { 0% { top: 100% } 100% { top: 0% } }
@keyframes bfKfSlideOut_Up  { 0% { top: 0% } 100% { top: -100% } }
@keyframes bfKfSlideIn_Dn   { 0% { top: -100% } 100% { top: 0% } }
@keyframes bfKfSlideOut_Dn  { 0% { top: 0% } 100% { top: 100% } }
@keyframes bfKfSlideIn_Next  { 0% { left: 100% } 100% { left: 0% } }
@keyframes bfKfSlideOut_Next { 0% { left: 0% } 100% { left: -100% } }
@keyframes bfKfSlideIn_Prev  { 0% { left: -100% } 100% { left: 0% } }
@keyframes bfKfSlideOut_Prev { 0% { left: 0% } 100% { left: 100% } }

/* BS5: bfxGrid filter buttons no longer inherit a light btn-default style. */
.bfxGridFilterBtn { min-width: 2rem; display: inline-flex; align-items: center;
  justify-content: center; color: #212529; background-color: 
  #e9ecef; border-color: #ced4da; }

.bfxGridFilterBtn:hover,
.bfxGridFilterBtn:focus { color: #212529; background-color: #dde2e6; border-color: #adb5bd; }
.pzGridBody1 .table { --bs-table-color: #172033; --bs-table-bg: #fff;
    --bs-table-striped-bg: #eef4ff; --bs-table-hover-bg: #dcecff; }
.pzGridBody1.bfxGrid_sm { font: .85em arial; }
.bfxGridFilterBtn { padding: 0; line-height: 1; }
.bfxGridFilterBtn svg { display: block; width: 1em; height: 1em; }
.bfxGridFilterInput::placeholder { color: #cfd4da; opacity: 1; }