:root {
  /** CSS DARK THEME PRIMARY COLORS */
  --color-dark-primary-100:  #0c6fa4;
  --color-dark-primary-200:  #3c7eae;
  --color-dark-primary-300:  #598db8;
  --color-dark-primary-400:  #729dc2;
  --color-dark-primary-500:  #8baccc;
  --color-dark-primary-600:  #a2bcd6;  
  
  /** CSS DARK THEME SURFACE COLORS */
  --color-dark-surface-100:     #121212;
  --color-dark-surface-200:     #282828;
  --color-dark-surface-300:     #3f3f3f;
  --color-dark-surface-400:     #575757;
  --color-dark-surface-500:     #717171;
  --color-dark-surface-600:     #8b8b8b; 
  --color-dark-surface-700:     #9b9b9b; 
  --color-dark-surface-comment: #d9d9d9; 

  --color-white:  #fafafa;
  --color-black:  #0a0a0a;
  --color-red:    #a80000;
  --color-green:  #0ea800;

  /** CSS BASE COLORS */
  --white:                   rgb(250, 250, 250);

}

body {
  background-color: var(--color-dark-surface-100) !important;
  font-family: "proxima-nova","open Sans","Helvetica","Arial",sans-serif !important;
  height: 100%;
  padding-bottom: 100px;
  color: var(--white) !important;  
}

frameset
	{background-color: var(--color-dark-surface-100) !important;
	font-family: "proxima-nova","open Sans","Helvetica","Arial",sans-serif !important;
	height: 100%;
	padding-bottom: 100px;
	color: var(--white) !important; }

.archivedTitle {
  margin-top: 100px;
  padding: 0px 16px 0px 16px;
}

a {
  text-decoration: none;
  color: inherit;
  font-weight: bold;
}

a, .phone-number-link, email-link {
  text-decoration: none;
  color: inherit;
  font-weight: bold;
  font-size: 1rem;
  width: max-content;
}

.team-name {
  font-size: larger;
}

#background {
  height: 500px;
  background-image: url(/img/ABF-Home.png);
  background-size: 1060px;
  background-repeat: no-repeat;
  background-position: center;
}

.stay {
  margin: 0 auto;
  width: 100%;
  bottom: 0px;
}

.content-wrap {
  padding-bottom: 2.5rem;
}

.navbar  {
  box-shadow: rgb(0 0 0 / 15%) 0px 1px 6px;
  background-color: var(--color-dark-surface-300);
  position: relative;
  z-index: 1000;
}

.nav-link  {
  color: var(--color-dark-primary-600);
}

.nav-link.active, .nav-link.show  {
  color: var(--color-dark-primary-100) !important;
  font-weight: bold !important;
}

.nav-link:hover  {
  color: var(--color-dark-primary-100) !important;
}

.offcanvas {
  background-color: var(--color-dark-surface-300) !important;
}

.sortBy  {
  margin-bottom: 32px;
}

.schedule-cheat  {
  margin-top: 64px;
}

.btnDropdown {
  border-radius: 8px;
  background-color: white;
  color: black;
  padding: 8px;
  height:40px;
}

.itemDropdown {
  padding: 16px;
}

#Players {
  height: auto;
  z-index: 1;
  margin-top: 32px;
}

#teamScore {
  height: auto;
  z-index: 1;
  margin-top: 0px;
}

#teamScore > .tabulator-cell {
  border-right: none !important;
}

#offcanvasNavbar {
  display: inline-block;
  max-width: 80%;
}

.containerBreadcrumb {
  margin-top: 136px;
  padding: 0px 16px 0px 16px;
}

.container-homepage {
  margin-top: 8px;
  margin: 0px 16px 0px 16px;
}

.container-contactInformation {
  margin-top: 32px;
}

.container-playerStats {
  margin-top: 136px;
}

.container-playerStatsWeek {
  margin-top: 40px !important;
}

.container-qualifications {
  margin-top: 120px !important;
}

table {
  width: 100%;
  height: auto;
  z-index: 1;
  margin-top: 25px;
}

tr {
  padding: 4px 0px 4px 0px;
}

.Container-xxl {
  margin-top: 25px;
  max-width: 1320px;
  margin: 0px auto;
  /* padding: 0px 36px 0px 36px; */
}

.container-fluid {
  display: contents;
  z-index: 1000;
}

.container-tabulator {
  box-shadow: rgb(0 0 0 / 10%) 0px 1px 3px;
  border: none;
  border-radius: 8px;
  box-sizing: border-box;
  padding: 8px;
  background: var(--color-dark-surface-200);
  margin: 8px;
}

.container-team {
  margin-top: 24px;
}

.container-email {
  width: max-content;
}

.container-phone {
  width: max-content;
}

.quickCancelCard {
  padding: 25px 25px 25px 25px;
}

.mb-3s {
  margin-top: 16px;
  box-shadow: rgb(0 0 0 / 10%) 0px 1px 3px;
}

.input-group.filter-group {
  margin: 88px auto auto auto;
  width: 80%;
}

#filter-field {
  margin: 0px 16px 0px 8px;
  text-align: left;
}

#div-sorted {
  font-size: 2rem;
  margin-top: 16px;
}

.filter-field {
  margin-top: 64px;
  
}

.breadcrumb-item > a {
  text-decoration: none;
  color: var(--white);
}

.is-hidden {
  display: none;
}

.inline-block {
  display: inline-block;
  vertical-align: middle;
}

.block {
  display: block;
}

.navbar-toggler {
  right: 8px;
  position: absolute;
  vertical-align: middle;
  display: inline;
}

.flex--leagues {
  display: flex;
  margin: 24px 0px 0px 0px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  row-gap: 24px;
}

.grid--league {
  display: grid;
  width: 100%;
  color: var(--white) !important;
  background-color: var(--color-dark-surface-200) !important;  
  grid-template-columns: [first] 204px [line2] auto [last];
  grid-template-rows: [row1-start] auto [row1-end] auto [third-line] auto [last-line];
  grid-auto-flow: column;
  box-shadow: rgb(0 0 0 / 10%) 0px 1px 3px;
  column-gap: 24px;
  border: 1px solid var(--color-dark-surface-200);
  border-radius: var(--bs-border-radius-lg);
  overflow: hidden;
}

.grid--league--photo {
  grid-column: 1 / 1;
  grid-row: 1 / 4;
}

.grid--align-self--center {
  align-self: center;
}

@media only screen and (max-width: 1000px) {
  #background {
    height: 500px;
    background-image: url(/img/ABF-home-small.png);
    background-size: 450px;
    background-repeat: no-repeat;
    background-position: center;
  }

  .tabulator-page-counter {
    display: none;
    grid-template-rows: min-content 1fr min-content 100px 1fr max-content;
  }

  .grid--league {
    display: grid;
    padding: 16px;
    width: 100%;
    height: 384px;
    grid-template-columns: [first] auto [last];
    grid-template-rows: [row1-start] auto [row1-end] auto [third-line] auto [third-end] auto [last-line];
    grid-auto-flow: row;
    box-shadow: rgb(0 0 0 / 10%) 0px 1px 3px;
    column-gap: 24px;
  }
  
  .grid--league--photo {
    grid-column: first / last;           /* Span the full width */
    grid-row: row1-start / row1-end;     /* Place it in the first row */
    display: flex;                       /* Use flexbox for centering */
    justify-content: center;            /* Center horizontally */
    align-items: center;                /* Center vertically */
  }

  h5 {
    font-size: 1em;
  }
}

.grid-container {
  background: #121212 !important;
}

@media only screen and (max-width: 575px) {
  #background {
    height: 200px;
    background-image: url(/img/ABF-home-xsmall.png);
    background-size: 225px;
    background-repeat: no-repeat;
    background-position: center;
    margin-top: 60px;
  }

  /* #player-scores-small {
    display: block;
  } */

  /* #player-scores-big {
    display: none;
  } */

  /* #team-scores-small {
    display: block;
  }

  #team-scores-big {
    display: none;
  } */

  .tabulator-responsive-collapse-toggle {
    height: 24px !important;
    width:  24px !important;
    border-radius: 50% !important;
  }

  .btnDropdown {
    border-radius: 8px;
    background-color: white;
    color: black;
    padding: 8px;
    height:40px;
    max-width: 380px;
  }

  .player-name {
    height:40px;
    min-width: min-content;
    max-width: 500px;
  }

}

/* ========================================================= */
/* ICONS =================================================== */
/* ========================================================= */

/* ========================================================= */
/* Menu Items ============================================== */
/* ========================================================= */

/* the banner, hidden by default above the viewport */
#dropdown-banner {
  position: absolute;
  top: 100%;            
  left: 0;
  width: 100%;
  background: #435364;
  padding: 1em 3em 1em 1em;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);

  /* center the text */
  display: flex;              
  align-items: center;         /* vertical center */
  justify-content: center;     /* horizontal center */
  text-align: center;          /* center multi-line text */


  /* hide off-screen above its own height */
  transform: translateY(-100%);
  transition: transform 0.5s ease-out;
  display: none;
  z-index:  999;        /* just below the nav */
}

/* 3) Slide it into view when active */
#dropdown-banner.active {
  transform: translateY(0);
  display: grid;
}


/* bigger “X” button */
#banner-close {
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  background: none;
  border: none;
  font-size: 1.5em;
  padding: 0.3em 0.6em;
  line-height: 1;
  cursor: pointer;
}

/* .nav-item {
  box-sizing: border-box;
} */