:root {
            --primary-color: #4a90e2;
            --bg-color: #a1aEF7; /* #C1CEF7; */ /* #f4f7f6; */
            --card-bg: #c9d7fc; /* #d1defa; */ /* #ffffff; */
            --text-main: #333;
            --text-secondary: #666;
            --border-radius: 8px;
            --shadow: 0 2px 5px rgba(0,0,0,0.2); /* 0.05 */
            --shadow-hover: 0 9px 10px rgba(0,0,0,0.5);
        }

        .teambody {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: var(--bg-color);
            color: var(--text-main);
            margin: 0;
            padding: 20px;
        }

        .eventbody {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #d79f81;
            color: #333;
            margin: 0;
            padding: 20px;
        }

        .regbody {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: var(--bg-color);
            color: var(--text-main);
            margin: 0;
            padding: 20px;
            margin-left: 120px;
        }

        .errmessagebody {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: var(--bg-color);
            color: #000000;;
            margin: 0;
            padding: 20px;
            font-size: 16px;
            margin-left: 120px;
        }

        .invbdiv {
            margin-left: 120px;
            padding: 20px;
        }

        .invbody {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #e7ffe7; /* d1f1d1 */
            color: #333333;
            margin: 0;
        }

        .adminbdiv {
            margin-left: 120px;
            padding: 20px;
        }

        .adminbody {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #efefef;
            color: #333333;
            margin: 0;
        }

        .usersbdiv {
            margin-left: 120px;
            padding: 20px;
        }

        .usersbody {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #ffe8ff;
            color: #333333;
            margin: 0;
        }

        .leaguebdiv {
            margin-left: 120px;
            padding: 20px;
        }

        .leaguebody {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #bddbd9;
            color: #333333;
            margin: 0;
        }

        .editbdiv {
            margin-left: 120px;
            padding: 20px;
        }

        .editbody {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #ededed;
            color: #333333;
            margin: 0;
        }

        .paybody {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: var(--bg-color);
            color: var(--text-main);
            margin: 0;
            padding: 20px;
            font-size: 16px;
            margin-left: 60px;
        }

        .PayDiv {
           margin-left: 60px;
        }

        .container {
            max-width: 960px;
            margin: 0 auto;
        }
        .container-scroll {
            padding-top: 5px;
/*
            overflow: auto;
            max-height: 100vh;
            scrollbar-width: 10px;
            scrollbar-color: #919ee7 #818ed7;
*/
/*            -ms-overflow-style: none; */ /* IE and Edge */
/*            scrollbar-width: none; */ /* Firefox */
        }
/*
        .container-scroll::-webkit-scrollbar {
            display: none;
        }
*/
        .teamheader {
            margin-bottom: 30px;
            text-align: center;
        }

        .team-h1 {
            font-weight: 300;
            color: var(--text-main);
        }

        /* List Styles */
        .team-record-list {
            display: flex;
            flex-direction: column;
            gap: 7px;
        }

        .ttcont { /* team record container */
            margin-left: 0px;
            position: relative;
            min-width: 960px;
        }

        /* Card Styles */
        .team-record-card {
            background-color: var(--card-bg);
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
            overflow: hidden;
            transition: all 0.2s ease; /* .3 */
/***            cursor: pointer; ****/
            border-left: 4px solid transparent;
        }

        .team-record-card:hover {
            transform: translateY(-4px) translateX(-4px);
            box-shadow: var(--shadow-hover);
            border-left: 4px solid var(--primary-color);
        }

        .team-record-card.open {
            box-shadow: 0 5px 15px rgba(0,0,0,0.35); /* 0.15 */
            border-left: 4px solid var(--primary-color);
        }

        /* Summary Section */
        .team-summary-section {
            padding: 16px; /* 23may26 - was 20 */
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
        }

        .team-summary-content {
            flex-grow: 1;
        }

        .team-record-title {
            font-size: 1.2rem;
            font-weight: 600;
            margin-bottom: 5px;
            color: var(--text-main);
        }

        .team-record-meta {
            font-size: 0.85rem;
            color: #2020c0; /* var(--text-secondary); */
            display: flex;
            gap: 15px;
        }

        .meta-right {
           padding-right: 30px;
           text-align: right;
        }

        .meta-right-inset {
           padding-right: 20px;
        }

        .meta-right-button {
            color: #0000ff;
            font-size: 20px;
            position: relative;
            top: 0px;
            border-radius: 8px;
            padding: 5px;
        }
        .meta-right-button:hover {
            color: #ffffff;
            background-color: #0000ff;
            font-size: 20px;
            position: relative;
            top: 0px;
            border-radius: 8px;
            cursor: pointer;
            padding: 5px;
        }

        .status-badge {
            padding: 1px 8px;
            border-radius: 12px;
            font-size: 0.75rem;
            font-weight: bold;
            text-transform: uppercase;
        }

        /* Status Colors */
        .status-Paid { background-color: #66f970; color: #1e8e7e; } /* green */
        .status-Unpaid { background-color: #eec2f1; color: #146414; } /* green on purple */
        .status-Eligible { background-color: #fff881; color: #bb802d; } /* yellow */
        .status-NotReady { background-color: #ffc0c0; color: #ff0000; } /* red */
        .status-Paid-gray { background-color: #769980; color: #6edece; } /* green */
        .status-Unpaid-gray { background-color: #bf8881; color: #4b101d; } /* red */
        .status-Eligible-gray { background-color: #bfb841; color: #ab701d; } /* yellow */
        .status-NotReady-gray { background-color: #bf8080; color: #1f0000; } /* red */

        .toggle-icon {
            color: var(--primary-color);
            position: relative;
            top: 0px;
            transition: top 0.2s ease; /* .3 */
        }

        .team-record-card.open .toggle-icon {
            transform: rotate(45deg);
            position: relative;
            top: 60px;  /* Adjust as needed */
            transition: top 0.2s ease; /* .3 */
        }

        /* Details Section (Hidden by default) */
        .team-details-section {
            max-height: 0;
            overflow: hidden;
            background-color: #eaeaff;
            border-top: 1px solid #eee;
            transition: max-height 0.4s ease;
        }

        .team-details-content {
            padding: 20px;
            color: var(--text-secondary);
            line-height: 1.0; /* 1.6; */
            font-size: 0.95rem;
            background-color: #f0f0ff; /* 26jul26 */
        }

        /* Animation class added by JS */
        .team-record-card.open .team-details-section {
            max-height: 3000px; /* Arbitrary large number to allow expansion */
            transition: max-height 0.4s ease;
        }

         /* team event table (TeamView) */
         .TETable {
            border: 1px solid #60607f;
            border-collapse: collapse;
            border-spacing: 1px;
            border-color: #60607f;
            box-sizing: border-box;
            width: 100%;
         }
         /* team contact table */
         .TCTable {
            border: 0;
            border-collapse: collapse;
            border-spacing: 1px;
            border-color: #404040;
            border-spacing: 2px;
            box-sizing: border-box;
            width: 100%;
            padding: 2px;
            table-layout: fixed; /* force equal column widths */
         }
         /* Team not ready */
         .TTNotReady {
            width: fit-content;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 0.75rem;
            font-weight: bold;
            text-transform: uppercase;
            background-color: #ffb0b0;
            color: #8f2020;
         }
.contact-td {
   padding: 3px;
   line-height: 1.3;
}

.stripe-1 {
/*  color: white; */
  background: repeating-linear-gradient(
    135deg,
    rgba(255, 00, 00, 0.15),
    rgba(255, 00, 00, 0.15) 20px,
    rgba(255, 255, 255, 0.15) 20px,
    rgba(255, 255, 255, 0.15) 40px
  );
}

.stripe-2 {
  background: repeating-linear-gradient(
    135deg,
    rgba(00, 00, 00, 0.15),
    rgba(00, 00, 00, 0.15) 20px,
    rgba(55, 55, 55, 0.15) 20px,
    rgba(55, 55, 55, 0.15) 40px
  );
}

.stripe-red {
  background: repeating-linear-gradient(
    135deg,
    rgba(255, 00, 00, 0.25),
    rgba(255, 00, 00, 0.25) 20px,
    rgba(255, 255, 255, 0.25) 20px,
    rgba(255, 255, 255, 0.25) 40px
  );
}

.stripe-yellow {
  background: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 0, 0.15),
    rgba(255, 255, 0, 0.15) 40px,
    rgba(255, 255, 255, 0.15) 40px,
    rgba(255, 255, 255, 0.15) 80px
  );
}

.stripe-green {
  background: repeating-linear-gradient(
    135deg,
    rgba(0, 255, 0, 0.25),
    rgba(0, 255, 0, 0.25) 40px,
    rgba(255, 255, 255, 0.25) 40px,
    rgba(255, 255, 255, 0.25) 80px
  );
}

.stripe-gray {
  background: repeating-linear-gradient(
    135deg,
    rgba(180, 180, 180, 0.75),
    rgba(180, 180, 180, 0.75) 40px,
    rgba(255, 255, 255, 0.25) 40px,
    rgba(255, 255, 255, 0.25) 80px
  );
}

.cap-prog {
   width: 100%;
   height: 6px;
   background-color: #b0b0b0;
   border: 1px solid #000000;
   border-radius: 3px;
   margin-top: 3px;
   margin-bottom: 0px;
}

.event-td {
   padding: 5px;
  border: 1px solid #a1aEF7; /* #818Ed7; */
}
.event-td-past {
  padding: 5px;
  border: 1px solid #a1aEF7; /* #818Ed7; */
  background-color: #d8d8d8;
  color: #909090;
}

.team-td {
   padding: 5px;
  border: 1px solid #a1aEF7; /* #818Ed7; */
}

.CB-u, .counter-badge-unpaid {
   background-color: #ff0000;
   color: #ffffff;
   padding: 4px 4px;
   text-align: center;
   border-radius: 50%;
   height: 15px;
   width: 15px;
   font-size: 12px;
   position: absolute;
   top: -3px;
   right: 10px;
   z-index: 20;
}
.CB-us, .counter-badge-unpaid-sbar {
   background-color: #ff0000;
   color: #ffffff;
   padding: 4px 4px;
   text-align: center;
   border-radius: 50%;
   height: 12px;
   width: 12px;
   font-size: 9px;
   position: absolute;
   top: -3px; /* -3px; */
   right: 5px; /* left: 5px; */ /* right: 10px; */
   z-index: 101;
   display: inline-block;
   font-weight: bold;
}
.CB-uss, .counter-badge-unpaid-sbar-sub {
   background-color: #ff0000;
   color: #ffffff;
   padding: 4px 4px;
   text-align: center;
   border-radius: 50%;
   height: 15px;
   width: 15px;
   font-size: 12px;
   position: absolute;
   top: 50px;
   right: 30px; /* left: 150px; */
   z-index: 101;
   display: inline-block;
   font-weight: bold;
}
.CB-e, .counter-badge-eligible {
   background-color: #ffff00;
   color: #000000;
   padding: 4px 4px;
   text-align: center;
   border-radius: 50%;
   height: 15px;
   width: 15px;
   font-size: 12px;
   position: absolute;
   top: -3px;
   right: 35px;
   z-index: 20;
}
.CB-s, .counter-badge-selected {
   background-color: #ffdddd;
   color: #000000;
   padding: 4px 4px;
   text-align: center;
   border-radius: 50%;
   height: 15px;
   width: 15px;
   font-size: 12px;
   position: absolute;
   top: -3px;
   right: 60px;
   z-index: 20;
}

.CB-p, .counter-badge-paid {
   background-color: #34703c; /* #44dd44; */
   color: #ffffff; /* #000000; */
   padding: 4px 4px;
   text-align: center;
   border-radius: 50%;
   height: 15px;
   width: 15px;
   font-size: 12px;
   position: absolute;
   top: -3px;
   right: 60px;
   z-index: 20;
}


.tableborder {
  border: 1px solid #a1aEF7;
}

.groupbyleagueheader {
  border: 2px solid #000000;
  border-radius: 8px;
  width: 700px;
  text-align: center;
  margin-top: 20px;
  background-color: rgba(93, 169, 93, 0.5);
}

/* **** Checkboxes **** */

/* Hide the browser's default checkbox */
.jcbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/** team **/

/* Create a custom checkbox */
.teamcheckmark {
   padding: 4px 4px;
   text-align: center;
   border-radius: 50%;
   font-size: 12px;
   height: 15px;
   width: 15px;
   position: absolute;
   top: 25px;
   left: -35px;
   background-color: #efefff;
   cursor: pointer;
}

/* Create the checkmark/indicator (hidden when not checked) */
.teamcheckmark:after {
  content: "";
  position: absolute;
  display: none;
  cursor: pointer;
}

/* On mouse-over, add a grey background color */
.jcbox:hover input ~ .teamcheckmark {
  background-color: #ccc;
  cursor: pointer;
}

/* When the checkbox is checked, add a blue background */
.jcbox input:checked ~ .teamcheckmark {
  background-color: #21d376; /* #2196F3; */
  cursor: pointer;
}

/* When hovering after checked, darken the background */
.jcbox input:checked:hover ~ .teamcheckmark {
  background-color: #01b356; /* #0176d3; */
  cursor: pointer;
}

/* Show the checkmark when checked */
.jcbox input:checked ~ .teamcheckmark:after {
  display: block;
  cursor: pointer;
}

/* Style the checkmark/indicator */
.jcbox .teamcheckmark:after {
  left: 8px;
  top: 4px;
  width: 4px;
  height: 10px;
  border: solid black; /* white; */
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  cursor: pointer;
}

.invcheckmark {
   padding: 4px 4px;
   text-align: center;
   border-radius: 50%;
   font-size: 12px;
   height: 15px;
   width: 15px;
   position: absolute;
   top: 25px;
   left: -35px;
   background-color: #efefff;
   cursor: pointer;
}

/* Create the checkmark/indicator (hidden when not checked) */
.invcheckmark:after {
  content: "";
  position: absolute;
  display: none;
  cursor: pointer;
}

/* On mouse-over, add a grey background color */
.jcbox:hover input ~ .invcheckmark {
  background-color: #ccc;
  cursor: pointer;
}

/* When the checkbox is checked, add a blue background */
.jcbox input:checked ~ .invcheckmark {
  background-color: #21e396; /* #2196F3; */
  cursor: pointer;
}

/* When hovering after checked, darken the background */
.jcbox input:checked:hover ~ .invcheckmark {
  background-color: #01b356; /* #0176d3; */
  cursor: pointer;
}

/* Show the checkmark when checked */
.jcbox input:checked ~ .invcheckmark:after {
  display: block;
  cursor: pointer;
}

/* Style the checkmark/indicator */
.jcbox .invcheckmark:after {
  left: 8px;
  top: 4px;
  width: 4px;
  height: 10px;
  border: solid black; /* white; */
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  cursor: pointer;
}

        .league-event-details {
            padding: 20px;
            color: #000000;;
            line-height: 1.0; /* 1.6; */
            font-size: 0.95rem;
            background-color: #f0f0ff; /* 26jul26 */
        }


/****************************************************************************************************************************************************/
        .eventheader {
            margin-bottom: 30px;
            text-align: center;
        }

        .event-h1 {
            font-weight: 300;
            color: #333;
        }

        /* List Styles */
        .event-record-list {
            display: flex;
            flex-direction: column;
            gap: 7px;
        }

        .eecont { /* event record container */
            margin-left: 0px;
            position: relative;
            min-width: 960px;
        }

        /* Card Styles */
        .event-record-card {
            background-color: #fcd7c9;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
            overflow: hidden;
            transition: all 0.2s ease; /* .3 */
/***            cursor: pointer; ****/
            border-left: 4px solid transparent;
        }

        .event-record-card:hover {
            transform: translateY(-4px) translateX(-4px);
            box-shadow: var(--shadow-hover);
            border-left: 4px solid #f2503a;
        }

        .event-record-card.open {
            box-shadow: 0 5px 15px rgba(0,0,0,0.35); /* 0.15 */
            border-left: 4px solid #c2100a;
        }

        /* Summary Section */
        .event-summary-section {
            padding: 16px; /* 23may26 - was 20 */
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
        }

        .event-summary-content {
            flex-grow: 1;
        }

        .event-title-table {
           border-collapse: collapse;
           width: 100%;
           text-align: center;
           border: 0px solid transparent;
        }
        .event-title-table td + td {
           border-left: 1px solid black;
        }
        .event-meta-table {
           width: 100%;
           text-align: center;
           border: 0px solid transparent;
           font-weight: bold;
        }
        .event-record-title {
            font-size: 1.2rem;
            font-weight: 600;
            margin-bottom: 5px;
            color: #333;
        }

        .event-record-meta {
            font-size: 0.85rem;
            color: #c02020; /* var(--text-secondary); */
            display: flex;
            gap: 15px;
        }

        .event-record-card.open .toggle-icon {
            transform: rotate(45deg);
            position: relative;
            top: 90px;  /* Adjust as needed */
            transition: top 0.3s ease; /* .3 */
        }

        /* Details Section (Hidden by default) */
        .event-details-section {
            max-height: 0;
            overflow: hidden;
            background-color: #ffeaea;
            border-top: 1px solid #eee;
            transition: max-height 0.4s ease;
        }

        .event-details-content {
            padding: 20px;
            color: #666;
            line-height: 1.0; /* 1.6; */
            font-size: 0.95rem;
            background-color: #fff0f0; /* 26jul26 */
        }

        /* Animation class added by JS */
        .event-record-card.open .event-details-section {
            max-height: 3000px; /* Arbitrary large number to allow expansion */
            transition: max-height 0.4s ease;
        }

         /* event team table (EventView) */
         .ETTable {
            border: 1px solid #7f6060;
            border-collapse: collapse;
            border-spacing: 1px;
            border-color: #7f6060;
            box-sizing: border-box;
            width: 100%;
         }
         /* event details table */
         .EDTable {
            border: 0;
            border-collapse: collapse;
            border-spacing: 1px;
            border-color: #404040;
            border-spacing: 2px;
            box-sizing: border-box;
            width: 100%;
            padding: 2px;
            table-layout: fixed; /* force equal column widths */
         }
         /* Event not ready */
         .ETNotReady {
            width: fit-content;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 0.75rem;
            font-weight: bold;
            text-transform: uppercase;
            background-color: #ffb0b0;
            color: #8f2020;
         }
/****************************************************************************************************************************************************/

/** event **/

.eventcheckmark {
   padding: 4px 4px; /* 0px 10px; */
   text-align: center;
   border-radius: 50%;
   font-size: 12px;
   height: 15px;
   width: 15px;
   position: relative;
   top: 0px;
   left: 0px;
   background-color: #ddddff; /* #ffdddd; */
   cursor: pointer;
}

/* On mouse-over, add a grey background color */
.jcbox:hover input ~ .eventcheckmark {
  background-color: #aaa;
  cursor: pointer;
}

/* When the checkbox is checked, add a reddish background */
.jcbox input:checked ~ .eventcheckmark {
  background-color: #21d376; /* #b5eccf; */ /* #ECCFB5; */ /* #ffc0c0; */
  cursor: pointer;
}

/* When hovering after checked, darken the background */
.jcbox input:checked:hover ~ .eventcheckmark {
  background-color: #01b356; /* #95ccaf; */ /* #ccaf95; */ /* #ffc0c0; */
  cursor: pointer;
}

/* Create the checkmark/indicator (hidden when not checked) */
.eventcheckmark:after {
  content: "";
  position: absolute;
  display: none;
  cursor: pointer;
}

/* Show the checkmark when checked */
.jcbox input:checked ~ .eventcheckmark:after {
  display: block;
  cursor: pointer;
}

/* Style the checkmark/indicator */
.jcbox .eventcheckmark:after {
  left: 7px;
  top: 3px;
  width: 4px;
  height: 10px;
  border: solid black;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  cursor: pointer;
}

.tvhdrtxt {
   font-size: 14px;
   font-weight: bold;
}

/** invoice **/

.invcheckmark {
   padding: 4px 12px; /* 0px 10px; */
   text-align: center;
   border-radius: 50%;
   font-size: 12px;
   height: 15px;
   width: 15px;
   position: relative;
   top: -2px;
   left: 0px;
   background-color: #ddddff; /* #ffdddd; */
   cursor: pointer;
}

/* On mouse-over, add a grey background color */
.jcbox:hover input ~ .invcheckmark {
  background-color: #aaa;
  cursor: pointer;
}

/* When the checkbox is checked, add a reddish background */
.jcbox input:checked ~ .invcheckmark {
  background-color: #21d376; /* #b5eccf; */ /* #ECCFB5; */ /* #ffc0c0; */
  cursor: pointer;
}

/* When hovering after checked, darken the background */
.jcbox input:checked:hover ~ .invcheckmark {
  background-color: #01b356; /* #95ccaf; */ /* #ccaf95; */ /* #ffc0c0; */
  cursor: pointer;
}

/* Create the checkmark/indicator (hidden when not checked) */
.invcheckmark:after {
  content: "";
  position: absolute;
  display: none;
  cursor: pointer;
}

/* Show the checkmark when checked */
.jcbox input:checked ~ .invcheckmark:after {
  display: block;
  cursor: pointer;
}

/* Style the checkmark/indicator */
.jcbox .invcheckmark:after {
  left: 7px;
  top: 3px;
  width: 4px;
  height: 10px;
  border: solid black;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  cursor: pointer;
}


.jicon {
   font-size: 20px;
   border-radius: 8px;
   background-color: #c0c0ff;
   cursor: pointer;
}
.jicon:hover {
   background-color: #6060ff;
   color: #ffffff;
   font-size: 20px;
   border-radius: 8px;
   cursor: pointer;
}
.jicon-a {
   font-size: 20px;
   border-radius: 8px;
   background-color: #6060ff;
   color: #ffffff;
   cursor: pointer;
}
.jicon-a:hover {
   background-color: #c0c0ff;
   font-size: 20px;
   border-radius: 8px;
   cursor: pointer;
}

/* Event icons */

.eicon {
   font-size: 20px;
   border-radius: 8px;
   background-color: #a55252;
   color: #efefef;
   cursor: pointer;
}
.eicon:hover {
   background-color: #ff7070;
   color: #ffffff;
   font-size: 20px;
   border-radius: 8px;
   cursor: pointer;
}
.eicon-a {
   font-size: 20px;
   border-radius: 8px;
   background-color: #ff7070;
   color: #ffffff;
   cursor: pointer;
}
.eicon-a:hover {
   background-color: #a55252;
   color: #efefef;
   font-size: 20px;
   border-radius: 8px;
   cursor: pointer;
}
.eicon-lc {
   font-size: 20px;
   border-radius: 4px;
   background-color: #b56262;
   color: #cfcfcf;
   cursor: pointer;
   padding: 2px;
}
.eicon-lc:hover {
   background-color: #af4040;
   color: #ffffff;
   font-size: 20px;
   border-radius: 4px;
   cursor: pointer;
   padding: 2px;
}

/* *********** 10jul26 - highlight-related stuff ********** */
        /* Overlay cont */
        #hlp-olay-cont {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none; /* Allows clicks to pass through */
            z-index: 9999;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        /* Main dimming overlay */
        #hlp-olay-dimmer {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.4); /* Semi-transparent gray; larger numbers are darker */
        }

        /* highlight layer - creates the "cutouts" */
        #hlp-olay-hi-lites {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            overflow: hidden;
        }

        /* Individual highlight element */
        .hi-lite {
            position: absolute;
            pointer-events: none;
            /* Soft edges via box-shadow blur */
            box-shadow: 0 0 0 10000px rgba(255, 255, 255, 0);
            /* Mask creates the hole effect */
            -webkit-mask: radial-gradient(circle, transparent 0%, black 0%);
            mask: radial-gradient(circle, transparent 0%, black 0%);
            /* We'll use a different approach below */
        }

        /* Alternative: Use a bright overlay with cutouts */
        .hi-lite-shape {
            position: absolute;
            border-radius: 16px;
            /* Creates a "hole" by matching page background */
            background: radial-gradient(circle, rgba(255,255,155,1) 0%, rgba(255,255,155,0) 100%); /* #f0f0f0, 240/240/240 */
            /* Soft blurred edge */
            filter: blur(3px);
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
        }

        /* Better approach: Invert mask */
        .hi-lite-mask {
            position: absolute;
            border-radius: 12px;
            /* Use mask to create soft-edged hole */
            -webkit-mask: radial-gradient(circle, 
                rgba(0,0,0,1) 40%, 
                rgba(0,0,0,0) 50%, 
                rgba(0,0,0,0) 100%
            );
            mask: radial-gradient(circle, 
                rgba(0,0,0,1) 40%, 
                rgba(0,0,0,0) 50%, 
                rgba(0,0,0,0) 100%
            );
            -webkit-mask-composite: source-out;
            mask-composite: subtract;
        }

        /* Fade animation classes */
/*
        #hlp-olay-cont.fade-in {
            animation: fadeIn 0.2s ease forwards;
        }
*/

        #hlp-olay-cont.fade-out {
            animation: fadeOut 1.0s ease forwards;
        }

/*
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
*/

        @keyframes fadeOut {
            from { opacity: 1; }
            to { opacity: 0; }
        }

        /* Utility classes for demo elements */
        .zzhi-targ {
/*            border: 2px solid #3498db; */
            padding: 10px;
/*            background: #e8f4fc; */
            border-radius: 6px;
        }

/* effect-shine */
.hshine /* :hover */ {
/*  -webkit-mask-image: linear-gradient(-75deg, rgba(255,255,255,.6) 30%, #fff 50%, rgba(255,255,255,.6) 70%); */
  -webkit-mask-image: linear-gradient(-75deg, rgba(255,0,0,.6) 30%, rgba(255,0,0,1.0) 50%, rgba(255,0,0,.6) 70%);
  -webkit-mask-size: 200%;
  animation: hshine-anim 2s infinite;
}

@-webkit-keyframes hshine-anim {
  from {
    -webkit-mask-position: 190%;
  }
  
  to {
    -webkit-mask-position: -20%;
  }
}

/* ******* Sonar effect ********** */

/*
 * Sample usage:
 * <div class="sonar-wrapper">
 *   <div class="sonar-emitter">
 *     <div class="sonar-wave sonar-wave1"></div>
 *     <div class="sonar-wave sonar-wave2"></div>
 *     <div class="sonar-wave sonar-wave3"></div>
 *     <div class="sonar-wave sonar-wave4"></div>
 *   </div>
 * </div>
 */

.sonar-wrapper {
  position: relative;
  z-index: 0;
  overflow: hidden;
}

.sonar-emitter {
  position: relative;
  margin: 32px auto;
  width: 30px;
  height: 30px;
  border-radius: 9999px;
  background-color: rgba(255, 255, 55, 0.7); /* HSL(45, 100%, 50%); */
}

.sonar-wave {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 32px;
  background-color: rgba(255, 255, 55, 0.7);
  opacity: 0;
  z-index: 9;
  pointer-events: none;
  animation: sonarWave 0.55s linear 1 /* infinite */;
}

.zz-sonar-wave {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 9999px;
  background-color: rgba(155, 155, 5, 0.5); /* HSL(45, 100%, 50%); */
  opacity: 0;
  z-index: -1;
  pointer-events: none;
}

.sonar-wave1 {
  animation: sonarWave 1s linear infinite;
}

.sonar-wave2 {
  animation: sonarWave 1s 0.25s linear infinite;
}

.sonar-wave3 {
  animation: sonarWave 1s 0.5s linear infinite;
}

.sonar-wave4 {
  animation: sonarWave 1s 0.75s linear infinite;
}

@keyframes sonarWave {
  from {
    transform: scale(3);
    opacity: 0;
  }
  to {
    opacity: 0.6; /* 0.4 */
  }
}

.ActionClass1 {
   background-color: #000080;
   border-radius: 6px;
/*
   border: 1px solid #35d826;
   margin-top: 20px;
   margin-bottom: 5px;
   margin-left: 10px;
   margin-right: 10px;
   display: inline-block;
*/
   cursor: pointer;
   color: #ffffff;
   font-family: Verdana;
   font-size: 15px;
   font-weight: bold;
/*   padding: 8px 8px; */
   text-decoration: none;
/*   text-shadow: 2px 2px 2px #000000; */
   text-align: center;
}

.ActionLabel1 {
/*
   background-color: #000080;
   border-radius: 6px;
   border: 1px solid #35d826;
   margin-top: 20px;
   margin-bottom: 5px;
   margin-left: 10px;
   margin-right: 10px;
   display: inline-block;
   cursor: pointer;
*/
   color: #000000;
   font-family: Verdana;
   font-size: 15px;
   font-weight: bold;
/*   padding: 8px 8px; */
   text-decoration: none;
/*   text-shadow: 2px 2px 2px #000000; */
/*   text-align: center; */
}

.gaura-y
{
   border-top-color: transparent;
   animation: glow-y 2.0s ease-in-out infinite alternate;
}

@keyframes glow-y {
 0% {
   box-shadow: 0 0 10px #ffff00, 0 0 20px #ffff00, 0 0 30px #ffff00; /* , 0 0 40px #ffff00; */
 }
 100% {
/*   box-shadow: 0 0 20px #888800, 0 0 40px #888800, 0 0 60px #888800; */ /* , 0 0 80px #444400; */
   box-shadow: 0 0 20px rgba(6, 6, 0, 0.5), 0 0 40px rgba(96, 96, 0, 0.4), 0 0 60px rgba(116, 116, 0, 0.3); /* , 0 0 80px #444400; */ /* 136 / 0.2 */ /* 36, 36, 0, 0.* */
 }
}

.gaura-r
{
   border-top-color: transparent;
   animation: glow-r 2.0s ease-in-out infinite alternate;
}

@keyframes glow-r {
 0% {
   box-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000, 0 0 30px #ff0000; /* , 0 0 40px #ffff00; */
 }
 100% {
/*   box-shadow: 0 0 20px #888800, 0 0 40px #888800, 0 0 60px #888800; */ /* , 0 0 80px #444400; */
   box-shadow: 0 0 20px rgba(136, 0, 0, 0.2), 0 0 40px rgba(136, 0, 0, 0.2), 0 0 60px rgba(136, 0, 0, 0.2); /* , 0 0 80px #444400; */
 }
}

.gaura-g
{
   border-top-color: transparent;
   animation: glow-g 2.0s ease-in-out infinite alternate;
}

@keyframes glow-g {
 0% {
   box-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 30px #00ff00; /* , 0 0 40px #ffff00; */
 }
 100% {
/*   box-shadow: 0 0 20px #888800, 0 0 40px #888800, 0 0 60px #888800; */ /* , 0 0 80px #444400; */
   box-shadow: 0 0 20px rgba(0, 136, 0, 0.2), 0 0 40px rgba(0, 136, 0, 0.2), 0 0 60px rgba(0, 136, 0, 0.2); /* , 0 0 80px #444400; */
 }
}

.bgNoLeague
{
   /* crosshatch */
   background: repeating-linear-gradient(
      135deg,
      rgba(151, 164, 237, 0.9),
      rgba(151, 164, 237, 0.9) 10px,
      rgba(207, 154, 207, 0.5) 10px,
      rgba(207, 154, 207, 0.5) 20px
      ),
   repeating-linear-gradient(
      45deg,
      rgba(171, 164, 237, 0.9),
      rgba(171, 164, 237, 0.9) 10px,
      rgba(171, 144, 197, 0.7) 10px,
      rgba(171, 144, 197, 0.7) 20px
      );
}

.bgUnpaid
{
   /* diagonal lines */
   background: repeating-linear-gradient(
      135deg,
      rgba(91, 214, 180, 0.35),
      rgba(91, 214, 180, 0.35) 10px,
      rgba(101, 204, 160, 0.35) 10px,
      rgba(101, 204, 160, 0.35) 20px
      );
}

/*
 * NOjbx, NOrbx - red "no" indicators
 */
.nojbx, .norbx /* "NO" checkbox */
{
   padding: 4px 4px;
   text-align: center;
   border-radius: 50%;
   font-size: 12px;
   height: 15px;
   width: 15px;
   position: absolute;
   top: 25px;
   left: -35px;
   background-color: #b09090;
   cursor: not-allowed;
   pointer-events: none;
}

/* Style the checkmark/indicator */
.nojbx:after, .norbx:after {
   color: #d00000;
   font-size: 25px;
   font-weight: bold;
   top: -6px;
   left: -2px;
   content: '🛇'; /* &#128711; 🛇 '✕' */
   position: absolute;
/*   display: none; */
   cursor: not-allowed;
   pointer-events: none;
}

/*
 * NAjbx, NArbx - blue "N/A" indicators
 */
.najbx, .narbx /* "NO" checkbox */
{
   padding: 4px 4px;
   text-align: center;
   border-radius: 50%;
   font-size: 12px;
   height: 15px;
   width: 15px;
   position: absolute;
   top: 25px;
   left: -35px;
/*   background-color: #9090b0; */
   cursor: not-allowed;
   pointer-events: none;
}

/* Style the checkmark/indicator */
.najbx:after, .narbx:after {
   color: #0000d0;
   font-size: 25px; /* 25 */
   font-weight: bold;
   top: -6px; /* -6 */
   left: -2px; /* -2 */
   content: '⦵'; /* &#128711; 🛇 '✕' */
   position: absolute;
/*   display: none; */
   cursor: not-allowed;
   pointer-events: none;
}

.leagueFeeInfo {
   padding: 3px;
   color: #000000;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   font-size: 16px;
   border-width: 4px;
   border-color: #000000;
   border-style: inset;
   border-radius: 8px;
   box-shadow: 0px 0px 5px rgba(66,66,66,.75);
}

.RegEvtInfo {
   padding: 3px;
   color: #000000;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   font-size: 16px;
}

.CoachInfoSpan {
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   font-size: 0.75rem;
   font-weight: bold;
   text-decoration: underline;
   text-transform: uppercase;
   cursor: pointer;
   color: #6060af;
}

/** TeamView modal dialog **/
/* The Modal (background) */
.tmodal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 600; /* Sit on top */
  padding-top: 150px; /* Location of the box (pixels down from the top of the window) */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 14px;
  overscroll-behavior: none;
}

/* Modal Content */
.tmodal-content {
  position: relative;
  background-color: #eeeeee;
  margin: auto;
  padding: 0px;
  border: 1px solid #888;
  border-radius: 10px;
  width: 50%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: tanimatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: tanimatetop;
  animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes tanimatetop {
  from { left: -1300px; opacity: 0 }
  to { left: 0; opacity: 1 }
}

@keyframes tanimatetop {
  from { left: -1300px; opacity: 0 }
  to { left: 0; opacity: 1 }
}

/* The Close Button */
.tmclose {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.tmclose:hover,
.tmclose:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.tmodal-header {
  padding: 2px 4px;
  background-color: #d79f81; /* #2c2cb8; */
  color: #801010;
  border-radius: 8px 8px 0px 0px;
  font-size: 16px;
}

.tmodal-body {
   padding: 2px 8px;
   font-size: 16px;
}

.tmodal-footer {
  padding: 0px; /* 2px 2px; */
  background-color: #d79f81; /* #2c2cb8; */
  color: white;
  border-radius: 0px 0px 8px 8px;
}

/* Email dropdowns */
.maildropbtn {
  background-color: #046AAD;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  border-radius: 8px;
}

.maildropdown {
  position: relative;
  display: inline-block;
  left: 100px;
}

.maildropdown-content {
  display: none;
  position: absolute;
  background-color: #c1c1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.3);
  z-index: 1;
  right: 0;
  left: auto;
  border-radius: 8px;
}

.maildropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  border-radius: 8px;
}

.maildropdown-content a:hover {
  background-color: #ededff;
  }

.maildropdown:hover .maildropdown-content {
  display: block;
  }

.maildropdown:hover .maildropbtn {
  background-color: #3e4e81;
  }

.TVadminSummary {
   font-size: 1.0rem;
   font-weight: 600;
   margin-bottom: 5px;
   margin-top: 5px;
}