.contain-div{
	background:#fff;
	border:1px solid #333;
}

.score-box{
	padding:0px;
	margin:0px;
	color:#000;
}
.game-box{
	color:#000;
	padding:15px;
	/*border:1px solid #333;
	font-size: 12px;*/
}
.box{
	width:175px;
	padding:5px;
}
.division-box{
	padding:15px;
	min-width: 10px;
}
.box-division{
	background-color: lightgray;
	color: black;
	padding:5px;
	white-space: nowrap; 
	margin-left: 5px;
}
.game-date{
	width: 100%;
	font-size:12px;
	overflow: hidden;
}
.score-opp, .score-at, .game-prog{
	font-weight: bold;
	float:right;
}
.game-prog{color:#f00000;}
.game-opp, .game-at{width:100%;}


.division {
	color: white;
}

.game-opp a {
	color: white;
	text-decoration: none;
}

.e2e-selected-icon {
  font-weight: bold;
  font-size: 18px;
}
.e2e-selected-icon img {
  filter: opacity(.5) drop-shadow(0 0 0 blue); 
}
.e2e-unselected-icon {
  font-weight: 400;
  filter: opacity(0.65)
}

/**** E2E Buttons ****/
.e2e-button {
	background-color:#000000;
	border:1px solid #000000;
	color: white;
	padding: 10px 25px 10px;
	border-radius: 10px;
}
.e2e-button-light {
	background-color:#666666;
	border:1px solid #000000;
	color: white;
	padding: 10px 25px 10px;
	border-radius: 10px;
}
.e2e-button-thin {
	background-color:#000000;
	border:1px solid #000000;
	color: white;
	padding: 3px 10px 3px;
	border-radius: 10px;
  margin-top: 5px;
  margin-bottom: 5px;
}button.e2e-button {
  line-height: 1.0;
}
a.e2e-button, a.e2e-button-light {
  padding: 10px 25px 10px !important;
	text-align: center;
}
.e2e-button:hover, .e2e-button-thin:hover {
	background-color:#303030;
	border:1px solid #303030;
	color:#ffffff;
	text-decoration:none;
}
.e2e-button-light:hover {
	background-color:#303030;
	border:1px solid #000000;
	color:#ffffff;
	text-decoration:none;
}
.e2e-button:disabled {
	opacity: .2;
}
.e2e-button-outline {
	background-color:#FFFFFF;
	border:1px solid #000000;
	color: Black;
	padding: 10px 25px 10px;
	border-radius: 10px;
}
a.e2e-button-outline {
  padding: 7px 25px 7px !important;
}
.e2e-button-outline:hover {
	background-color:#303030;
	border:1px solid #303030;
	color:#ffffff;
	text-decoration:none;
}

.blank-button {
	background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
}

.material-icons {
  vertical-align: middle;
}
.bi {
  font-size: 24px;
}

hr.faded {
  border: 0;
    height: 1px;
    background: #333;
    background-image: linear-gradient(to right, #fff, #333, #fff);
}

.no-link-colors {
  text-decoration: none; 
  color: inherit;
}

.myTabClass{
  display: flex;
  flex-wrap: wrap;
}
.myTabClass input[type="radio"] {
  display: none;
}
.myTabClass .tabButton {
  padding: 25px;
  background: #f2f2f2;
  font-weight: bold;
}
.myTabClass .tab {
  order: 1;
  display: none;
}
.myTabClass input[type="radio"]:checked + label + .tab {
  display: block;
}
.myTabClass input[type="radio"]:checked + label {
  background: #dddddd;
  border-bottom: 5px solid #1e1e1e;
}

/* PowerUp-style tab strip.  An opt-in modifier layered on top of .myTabClass rather than a rewrite
   of it, so the radio/label mechanism and every page still on the old grey-button look are
   untouched - moving a page over is just adding e2e-tabs to its .myTabClass div.  Mirrors .pgs-tabs
   on the PowerUp Govern League Sync page: quiet grey labels, a hairline under the whole strip, and
   a blue underline on the active one.
   The hairline is the visible pane's border-top, not a wrapper's: the checked-state selectors
   (input:checked + label + .tab) need input, label and pane to stay adjacent siblings, so there is
   nowhere to hang a wrapper around just the labels. */
.myTabClass.e2e-tabs {
  /* column-gap, not gap: a row gap would push the pane - and with it the hairline - away from the
     labels it is meant to sit directly under. */
  column-gap: 4px;
}
.myTabClass.e2e-tabs .tabButton {
  flex: 0 0 auto; /* beats Bootstrap's .col, which stretches each label to an equal share */
  padding: 10px 18px;
  background: transparent;
  font-size: 15px;
  font-weight: 700;
  color: #737373;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  /* Pulls the pane's hairline up into the label's own bottom border so the two share one line; the
     positioned label paints over it, so the grey does not show through the active blue. */
  margin-bottom: -1px;
  position: relative;
  z-index: 1;
}
.myTabClass.e2e-tabs .tabButton:hover {
  color: #262626;
}
/* The theme renders a bare <i> at 24px/38.4px, which on its own made these tabs half again as tall
   as the PowerUp ones.  Pinning it to the label's own type is what brings the strip back to the
   same height, so keep this if a page's labels carry Bootstrap icons. */
.myTabClass.e2e-tabs .tabButton i {
  font-size: 1em;
  line-height: inherit;
  vertical-align: -0.06em;
}
.myTabClass.e2e-tabs input[type="radio"]:checked + label {
  background: transparent;
  color: #171717;
  border-bottom: 2px solid #035EB1;
}
.myTabClass.e2e-tabs .tab {
  border-top: 1px solid #d4d4d4;
}
@media (max-width: 575px) {
  .myTabClass.e2e-tabs .tabButton {
    padding: 10px 10px;
    font-size: 14px;
  }
}

/* "Action required" banner above the club dashboard nav (Vercel prototype league-sync-option-f).
   Sits inside the theme's content column like the nav, so it wraps on width rather than on a
   viewport breakpoint: the text column keeps a 16rem minimum and the button drops beneath it.
   The button is an <a> styled as a button - no Bootstrap JS here - and every anchor rule is
   qualified with the container because this sheet loads BEFORE the theme's oxygen.css, so an
   unqualified a { } from Oxygen would otherwise win the colour and underline. */
.e2e-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  margin-bottom: 16px;
  border-radius: 0;
}
.e2e-banner-alert {
  border: 2px solid #f7941d;
  background: rgba(247, 148, 29, 0.10);
}
.e2e-banner-text {
  display: flex;
  flex: 1 1 16rem;
  flex-direction: column;
  gap: 2px;
}
.e2e-banner-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #171717;
}
.e2e-banner-body {
  font-size: 15px;
  font-weight: 400;
  line-height: 22.5px;
  color: #525252;
}
.e2e-banner-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}
.e2e-banner a.e2e-banner-btn,
.e2e-banner a.e2e-banner-btn:visited {
  display: inline-block;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  line-height: 21px;
  white-space: nowrap;
  color: #fff;
  background: #000;
  border-radius: 10px;
  text-decoration: none;
}
.e2e-banner a.e2e-banner-btn:hover,
.e2e-banner a.e2e-banner-btn:focus {
  color: #fff;
  background: #262626;
  text-decoration: none;
}

/* Team Official navigation - the bar of sections, plus the row of pages inside the current section.
   This replaced the gn-menu hamburger on both dashboards: a section's pages used to sit in an
   overlay panel and are now always on screen.  Nothing uses that component any more, so its
   files and enqueues are gone.

   Three levels of navigation can stack on one page (sections, then that section's pages, then a
   page's own .e2e-tabs strip - Contact List has all three), so each level gets a different shape:
   a bordered bar, a row of pills, an underline strip.  Two of them sharing the underline would
   read as one control. */
.e2e-nav {
  margin-bottom: 20px;
  /* The bar is squeezed by the theme's content column, not by the viewport - on a 1198px screen
     that column is 960px - so the breakpoint below has to measure this element, not the window.
     Browsers without container queries just keep the name inline and let the bar wrap. */
  container-type: inline-size;
}
.e2e-nav-sections {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  border-bottom: 1px solid #d4d4d4;
}
.e2e-nav-section {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  color: #737373;
  text-decoration: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
}
.e2e-nav-section:hover {
  color: #171717;
  text-decoration: none;
}
.e2e-nav-section[aria-current="page"] {
  color: #171717;
  border-bottom-color: #035EB1;
}
/* The theme sizes a bare <i> at 24px/38.4px, which made the row taller than its own labels - the
   same fix .e2e-tabs needs above. */
.e2e-nav-section i {
  font-size: 17px;
  line-height: 1;
}
.e2e-nav-section img {
  height: 20px;
  width: auto;
}
.e2e-nav-end {
  display: flex;
  align-items: stretch;
  margin-left: auto;
}

.e2e-nav-pages {
  display: flex;
  gap: 6px;
  padding: 10px 12px;
  background-color: #fafafa;
  border-bottom: 1px solid #d4d4d4;
  /* Scrolls rather than wraps: a wrapped second row would push the page content down by a whole
     line on the widest sections, and the row is scanned left to right anyway. */
  overflow-x: auto;
}
.e2e-nav-page {
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #525252;
  text-decoration: none;
  white-space: nowrap;
}
.e2e-nav-page:hover {
  background-color: #f0f0f0;
  color: #171717;
  text-decoration: none;
}
.e2e-nav-page[aria-current="page"] {
  background-color: #EAF2FA;
  border-color: #C6DCF0;
  color: #035EB1;
}
/* A group label inside the page row - the club Schedule section's "Schedule Generation" heading.
   Not a link: it marks where one group of pages ends and the next begins, which the old vertical
   panel did with a full-width heading bar.  Small, bold and set on two lines in a tinted block,
   so it reads as a divider rather than as another page you could click. */
.e2e-nav-pagegroup {
  display: flex;
  align-items: center;
  margin: 0 2px 0 10px;
  padding: 4px 12px;
  /* min-content, not a ch or pixel cap: the box wraps at every space and then hugs its longest
     word, so the padding always shows and no label can spill outside its own background.  A ch
     cap could not do this - ch measures a "0", and these labels are bold, uppercase and
     letter-spaced, so they run wider than the count suggests. */
  width: min-content;
  /* Centred because the two lines are different lengths - ragged-right reads as a mistake here. */
  justify-content: center;
  text-align: center;
  border-radius: 6px;
  background-color: #e9e9e9;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #575757;
  white-space: normal;
}

.e2e-nav-section:focus-visible,
.e2e-nav-account-btn:focus-visible,
.e2e-nav-page:focus-visible {
  outline: 2px solid #035EB1;
  outline-offset: -2px;
}

.e2e-nav-team {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Shrinks before anything else does: the club or team name is the one thing in the bar the page
     content repeats anyway, so it gives way first when the sections stop fitting. */
  flex: 0 1 auto;
  min-width: 0;
  padding: 14px 20px 14px 0;
  margin-right: 4px;
  max-width: 240px;
  font-size: 14px;
  font-weight: 700;
  color: #171717;
  white-space: nowrap;
  overflow: hidden;
}
.e2e-nav-teamname {
  overflow: hidden;
  text-overflow: ellipsis;
}
.e2e-nav-crest {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 5px;
  background-color: #035EB1;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The team control when the person's login reaches more than one team.  Deliberately mirrors
   .e2e-nav-account-btn / .e2e-nav-account-menu below, and shares its open/close script, so the bar's
   two dropdowns behave identically.  With one team the bar still renders the plain .e2e-nav-team
   above and none of this applies. */
.e2e-nav-teamswitch {
  position: relative;
  display: flex;
  align-items: stretch;
  flex: 0 1 auto;
  min-width: 0;
}
.e2e-nav-team-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  max-width: 240px;
  padding: 14px 14px 14px 0;
  margin-right: 4px;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: #171717;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
}
.e2e-nav-team-btn:hover,
.e2e-nav-team-btn[aria-expanded="true"] {
  color: #035EB1;
}
.e2e-nav-team-btn .e2e-nav-caret {
  flex: none;
  font-size: 11px;
  color: #737373;
}
/* Left-aligned, unlike the account menu, which is right-aligned so it grows inwards: this control is
   the first thing in the bar, so it has room to grow rightwards without being clipped. */
.e2e-nav-team-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 50;
  width: 320px;
  padding: 6px;
  margin: 0;
  background-color: #ffffff;
  border: 1px solid #d4d4d4;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
.e2e-nav-team-menu.is-open {
  display: block;
}
.e2e-nav-team-menu-label {
  padding: 8px 10px 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a8a8a;
}
/* A submit button, not a link: switching changes the session, so it must not sit behind a GET that
   something could prefetch.  Reset the button chrome the theme would otherwise give it. */
.e2e-nav-team-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: none;
  font-family: inherit;
  text-align: left;
  color: #262626;
  cursor: pointer;
}
.e2e-nav-team-item:hover {
  background-color: #f5f5f5;
  color: #171717;
}
.e2e-nav-team-item[aria-current="true"] {
  background-color: #EAF2FA;
}
.e2e-nav-team-item-text {
  min-width: 0;
  flex: 1;
}
.e2e-nav-team-item .nm {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}
.e2e-nav-team-item .sub {
  display: block;
  font-size: 12px;
  color: #737373;
}
.e2e-nav-team-item .tick {
  flex: none;
  margin-left: auto;
  font-size: 15px;
  color: #035EB1;
}
.e2e-nav-team-item .e2e-nav-crest {
  background-color: #8a8a8a;
}
.e2e-nav-team-item[aria-current="true"] .e2e-nav-crest {
  background-color: #035EB1;
}
.e2e-nav-team-foot {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 5px;
  padding: 9px 12px 5px;
  border-top: 1px solid #e6e6e6;
  font-size: 13px;
  color: #035EB1;
  text-decoration: none;
}
.e2e-nav-team-foot:hover {
  color: #035EB1;
  text-decoration: underline;
}
/* Only rendered above eight teams.  EODSA already has officials on 17, 18 and 35 teams, where an
   unfiltered menu is taller than the page. */
.e2e-nav-team-filter {
  padding: 6px 8px 8px;
}
.e2e-nav-team-filter input {
  width: 100%;
  padding: 7px 10px;
  font-size: 13px;
  border: 1px solid #d4d4d4;
  border-radius: 6px;
}
.e2e-nav-team-scroll {
  max-height: 264px;
  overflow-y: auto;
}

/* Same rule the plain .e2e-nav-team gets above - the switcher has to give way at the same width, or
   the bar wraps differently depending on how many teams the person happens to have. */
@container (max-width: 780px) {
  .e2e-nav-teamswitch {
    flex-basis: 100%;
  }
  .e2e-nav-team-btn {
    max-width: none;
    margin-right: 0;
    padding: 12px 0 2px;
  }
}
/* "My Teams" on the My Account page.  Shares .e2e-nav-crest with the menu bar so a team reads the
   same in both places. */
.e2e-myteams-heading {
  margin: 26px 0 2px;
  font-size: 18px;
  font-weight: 700;
}
.e2e-myteams-intro {
  margin: 0 0 8px;
  font-size: 13px;
  color: #666666;
}
.e2e-myteams-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid #ececec;
}
.e2e-myteams-name {
  flex: 1;
  min-width: 0;
}
.e2e-myteams-name .nm {
  display: block;
  font-size: 14px;
  font-weight: 600;
}
.e2e-myteams-name .sub {
  display: block;
  font-size: 12px;
  color: #737373;
}
.e2e-myteams-badge {
  padding: 3px 10px;
  border-radius: 999px;
  background-color: #EAF2FA;
  font-size: 11px;
  font-weight: 600;
  color: #035EB1;
}
.e2e-myteams-badge.linked {
  background-color: #eeeeee;
  color: #5f5f5f;
}
.e2e-myteams-unlink {
  margin: 0;
}
.e2e-myteams-link {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #e6e6e6;
}
.e2e-myteams-link h5 {
  margin: 0 0 3px;
  font-size: 15px;
  font-weight: 700;
}
.e2e-myteams-link p {
  margin: 0 0 12px;
  font-size: 13px;
  color: #666666;
}
.e2e-myteams-link form {
  max-width: 640px;
}

.e2e-nav-account {
  position: relative;
  display: flex;
  align-items: stretch;
}
.e2e-nav-account-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #737373;
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
}
.e2e-nav-account-btn:hover,
.e2e-nav-account-btn[aria-expanded="true"] {
  color: #171717;
}
.e2e-nav-account-btn i {
  font-size: 17px;
  line-height: 1;
}
.e2e-nav-account-btn .e2e-nav-caret {
  font-size: 11px;
}
/* Right-aligned so it grows inwards: the bar sits in a container with overflow:hidden, and a
   left-aligned menu on the last item in the row would be clipped at the edge. */
.e2e-nav-account-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 50;
  min-width: 180px;
  padding: 6px;
  background-color: #ffffff;
  border: 1px solid #d4d4d4;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
.e2e-nav-account-menu.is-open {
  display: block;
}
.e2e-nav-account-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 6px;
  color: #262626;
  text-decoration: none;
  font-size: 14px;
}
.e2e-nav-account-menu a:hover {
  background-color: #f5f5f5;
  color: #171717;
  text-decoration: none;
}
.e2e-nav-account-menu a i {
  font-size: 16px;
  line-height: 1;
}

/* Below these widths the name takes its own line, which keeps the account control pinned right
   instead of letting it wrap away on its own.  Two thresholds because the two bars are not the
   same size: the club dashboard carries six sections to the coach dashboard's three, and runs
   out of room a good 270px earlier. */
@container (max-width: 780px) {
  .e2e-nav-team {
    flex-basis: 100%;
    max-width: none;
    margin-right: 0;
    padding: 12px 0 2px;
  }
}

@container (max-width: 1050px) {
  .e2e-nav-many .e2e-nav-team {
    flex-basis: 100%;
    max-width: none;
    margin-right: 0;
    padding: 12px 0 2px;
  }
}

@media (max-width: 767px) {
  /* Sections drop to icons, as the old bar did.  The page row below now carries the wording, so
     nothing is unlabelled the way four bare icons were. */
  .e2e-nav-section span,
  .e2e-nav-account-btn span {
    display: none;
  }
  .e2e-nav-section {
    gap: 0;
    padding: 14px 16px;
  }
  .e2e-nav-account-btn {
    gap: 4px;
    padding: 14px 14px;
  }
}

#divMsg {
  display: none;
  width: 100%;
  background-color: #D3E1F6;
  padding: 10px;
  margin-bottom: 25px;
	border-radius: 25px;
	border: 2px solid #71A1E8;
}
#help-button {
	padding-bottom: 10px;
}

table a, a:hover, a > i {
	color: #333333;
}
table a:hover, a:hover > i {
	color: #000000;
}
/* Shared dashboard/report table type, site-wide. 14px matches the explanatory copy the tables sit
   under - the theme's own table type is 16px and read a size larger than everything around it.
   vertical-align:middle deliberately overrides the .e2e-table td { vertical-align: top } rule in
   Oxygen's generated universal.css, which left cell contents riding above any taller control in
   the same row (e.g. the PowerUp Govern mapping page's team dropdown). Qualified with the
   element (table.e2e-table, not .e2e-table) purely to outrank that rule: Oxygen's stylesheet is
   enqueued after this one, so at equal specificity it would win on order alone. */
table.e2e-table th, table.e2e-table td {
	font-size: 14px;
	vertical-align: middle;
}