.sortable {
    width: auto;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    overflow:hidden;
    cursor: pointer;
}
.ssAltRowColor tr:nth-child(even) {
  background-color: #F5F5F5;
}
.ssRowEven {
  background-color: #F5F5F5;
}
.ssGroupTitle {
  font-size: 18px;
  font-weight: bold;
  margin-left:10px;
}
.ssGroupContent {

}
.ssDataCell {
  font-family:Arial, Helvetica, sans-serif;
  font-size:16px;
}
.w-5 {
    width: 5%;
}
.w-10 {
    width: 10%;
}
.w-15 {
    width: 15%;
}
.w-20 {
    width: 20%;
}
.w-30 {
    width: 30% !important;
}
.w-35 {
    width: 35%;
}
.w-40 {
    width: 40%;
}
.w-45 {
    width: 45%;
}
.w-50 {
    width: 50%;
}
.w-55 {
    width: 55%;
}
.w-60 {
    width: 60%;
}
.w-65 {
    width: 65%;
}
.w-70 {
    width: 70%;
}
.w-75 {
    width: 75%;
}
.w-80 {
    width: 80%;
}
.w-85 {
    width: 85%;
}
.w-90 {
    width: 80%;
}
.w-95 {
    width: 95%;
}
.table-P0 th {
  padding: 0 !important;
}
.table-P0 td {
  padding: 0 !important;
}
.ssPageHeader {

}
.ssPageFooter {

}
.ssPageHeaderSpacing {

}
// ssReport Elements
.ssReportRow:hover {
   background-color: #3064CC;
   color: white;
}
.ssColumnHeading { font-weight: bold; background-color:#F4F4F4; padding: 4px 2px 4px 2px }
.ssColumnHeadingC { text-align: center; }
.ssColumnHeadingR { text-align: right; }
.ssColumnHeadingL { text-align: left; }
.ssColumn1 { font-weight: bold; }
.ssRowNo { width:3%;text-align: right;margin-right:1%; }
.ssReport100 { width: 100% !important; }

.ssColumn {  }
.ssDataCellC { text-align: center;}
.ssDataCellR { text-align: right; }
.ssDataCellL { text-align: left; }
.ssEvenRow { background-color: #F3F3F3;}
.ssHeaderRow { padding: 4px 2px 4px 2px !important; }
.ssReportRow { padding: 2px 0px 2px 0px; }
.ssTotalRow { padding: 4px 0px 4px 0px !important; }
.ssGroupHeader {
  padding: 0px 5px 0x 5px;
  font-weight: bold;
  font-size:larger;
  page-break-inside:avoid;
}
.ssReportFilters {
  clear: both;
  padding: 3px 0px 3px 5px;
  display: flex;
  justify-content: space-between;
  gap: 15px;
  align-content: center;
  margin-bottom: 12px;
}
.ssReportTitle {
  font-size: 18px;
  font-weight: bold;
  padding: 5px 5px 8px 5px;
}
.ssReportData {
  margin: 10px 0px 10px 0px;
}
.liveReportCard {
  margin-bottom: 10px;
}
#pnSystemReportList {
  overflow-y: auto;
  max-height: 80vh;
}
.ssReportTitleSessionDT {
  font-weight:normal;
  font-size:11px;
  margin-top:3px;
}
.ssReportBlock {
  margin-top: 2px;
  margin-bottom: 20px;
}
.seJudgePIN {
  margin-left: 6px;
}
.ssReportTable {
  border-collapse: collapse;
  border: 1px solid #D0D0D0;
  color: #3F3F3F;
}
.ssReportTable th {
  padding: 4px 3px 4px 3px;
  background-color: #EFEFEF;
  font-weight: bold;
  border-bottom: 1px solid #D0D0D0;
}
.ssReportTable td {
  padding: 4px 3px 4px 3px;
  font-weight: normal;
}
.ssReportData {
   font-size: 12px;
}
.ssReportRow {
   line-height: 22px;
}
.ssColumnTotal {
   font-weight: bold;
   padding-right: 4px;
}
.ssRowTotal {
   font-weight: bold;
   padding-right: 4px;
}
.ssReportSM {
   font-size: 12px !important;
}
.ssReportMD {
   font-size: 15px !important;
}
.ssReportLG {
   font-size: 17px !important;
}
.ssReportXL {
   font-size: 19px !important;
}
.ssDataFilterController {
   max-width:100%;
}
.ssDataFilters {
   display: flex;
   flex-direction: column;
   width: 100%;
}
.ssDataFiltersSummary {
   padding: 5px;
   margin-right: 2rem;
   display: flex;
   width: 80%;
}
.ssDFNone {
  margin: 0;
  padding: 6px;
}
.ssDataFilter {
   box-sizing: border-box;
   padding: 5px;
   border: 1px solid #5F5F5F;
   border-radius: 5px;
   margin-bottom: 10px;
   font-size: 14px;
}
.ssDataFilterDateRange {
   min-width: 320px;
}
.ssDataFilterMultiSelect {
   min-width: 320px;
}

.ssFilter {
   font-size:14px;
}

.dfName {
   padding: 0px;
   margin-bottom: 2px;
   font-weight: bold;
}
.dfFilter {
   padding: 2px;
}
.dfSummaryHeading {
   font-weight: bold;
   margin-right: 5px;
   display:inline;
}
.dfSummary {
   padding: 3px 8px 3px 8px;
   margin-right: 5px;
   border: 1px solid #6F6F6F;
   border-radius: 5px;
   background-color:#F4F4F4;
   max-height: 60px;
   overflow: auto;
   max-width: 40%;
}
.btn-xs {
   font-size: 0.75rem !important;
   padding: 0.25rem 0.5rem !important;
}
.fnSmaller {
   font-size:smaller;
}
.gs-Asc {
   cursor: pointer;
   text-decoration: none !important;
   background-image:url('SortDown.png') !important;
   background-repeat:no-repeat !important;
   background-position:right !important;
}
.gs-Desc {
   cursor: pointer;
   text-decoration: none !important;
   background-image:url('SortUp.png');
   background-repeat:no-repeat;
   background-position:right;
}
.mb1 { background-color:#0d6efd; }
.mb2 { background-color:#198754; }
.mb3 { background-color:#dc3545; }
.mb4 { background-color:#DBC14A; }
.mb5 { background-color:#BB2BDB; }
.mixbar-cell { white-space: nowrap; margin: 0px 12px 0px 12px; }
.mixbar-wrap { display:flex; align-items:center; gap:.5rem; }
.mixbar {
    position: relative;
    width: 360px;               /* tweak to fit your layout */
    height: 18px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--bar-bg);
    border: 1px solid var(--bar-bd);
    display: flex;
}
.seg {
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
    font-size: .75rem;
    padding: 1px 0px 1px 0px;
    text-shadow: 0 1px 2px rgba(0,0,0,.35);
    /* container query lets us hide labels if segment is too narrow */
    container-type: inline-size;
}
  /* Round the ends nicely */
.seg:first-child { border-top-left-radius: 999px; border-bottom-left-radius: 999px; }
.seg:last-child  { border-top-right-radius: 999px; border-bottom-right-radius: 999px; }

/* Hide inline % text if the segment is too narrow */
@container (max-width: 42px) {
   .seg > span { display:none; }
}

@media print {


}
