@font-face {

  font-family:BerkeleyMonoTrial-Regular;

  src: url(../../../fonts/BerkeleyMonoTrial-Regular.otf);

}







input[type=number]::-webkit-inner-spin-button,

input[type=number]::-webkit-outer-spin-button {

  opacity: 1 !important;

  margin: 0;

  width: 15px;

  height: 35px;

}



/* Global Styles */

html {

font-family: 'BerkeleyMonoTrial-Regular', sans-serif; color: #333;

  font-size: 14px; /* Set base font size */

  line-height: 1.1; /* Set line height */

  background-color: white; /* Set background color */  

  padding: 20px;

}



.input-group .input-group-text {

  min-width: 90px;   /* keeps a base size but grows if needed */

  width: auto;       /* lets text dictate size */

  white-space: nowrap; /* prevents labels from wrapping */

}



h1 {

  font-size: 54px;

}



body {

  padding: 10px;

  background-color: white;

  margin:auto;

  



}



/* BEGIN: Stats Input Styles */



.logo-stats {

/*  border: 2px solid black;*/

  margin-bottom: 10px;

}



.logo-stats img {

  display: block;

  margin: auto;

  height: 60px;

}



.title-stats {

  display: block;

/*  border: 2px solid green;*/

  text-align: center;

  margin-bottom: 20px;

}



.score-stats {

  display: block;

/*  border: 2px solid yellow;*/

  text-align: center;

  margin-bottom: 20px;

  

}



.team-stats {

  display: block;

/*  border: 2px solid blue;*/

  margin-bottom: 10px;

}



.input-box-stats {

  width: 30px;

  text-align: center;

}



.th-stats {

  border: 2px solid red;

}



.submit-stats input {

  float: right;

}



.player {



}



.player-stats {

  display: none;

}



.section-stats {

  display: flex;

  flex-direction: row;

  flex-wrap: wrap;

  /*gap: 20px;*/

  justify-content: center;

  width: 100%;

  /*margin-bottom: 20px;*/

}



.stats-action {

  display: flex;

  flex-direction: row;

  flex-wrap: wrap;

  margin-top: 10px;

}



.section-add {

  /*display: flex;

  flex-direction: row;

  flex-wrap: wrap;*/

  float: left;

  /*width: 100%;

  margin-top: 10px;

  margin-bottom: 10px;*/

}



.section-submit {

  /*display: flex;

  flex-direction: row;

  flex-wrap: wrap;*/

  float: right;

  /*width: 100%;

  margin-bottom: 10px;*/

}



.section-login {

  display: flex;

  flex-direction: row;

  flex-wrap: wrap;

  /*gap: 20px;*/

  justify-content: right;

  width: 100%;

  /*margin-bottom: 20px;*/

}



input.form-check-input {

  width: 24px;

  height: 24px;

}



label.form-check-label {

  vertical-align: middle;

  padding-left: 6px;

  padding-top: 6px;

}



.card#noBorder {

  --bs-card-border-width: 0;

}



.stats-footer {

  display: flex;

  flex-direction: row;

  justify-content: center;

  margin-top: 40px;

  }



.matchScore {

  max-width: 128px;

  margin: 0 auto;

/*  margin-bottom: 10px;*/

}







/* END: Stats Input Styles */







.heading_one {

text-align: center;

margin-bottom: 50px

}



.heading_one_stats {

  text-align: center;

  margin-bottom: 40px

  }



.navbar {

    position: fixed;

    bottom: 10px;

    left: 50%;

    transform: translateX(-50%);

    display: flex;

    justify-content: center;

    align-items: center;

    background-color: black;

    color: white;

    padding: 10px;

    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Add shadow effect */

    backdrop-filter: blur(10px); /* Add translucent effect (may not be supported in all browsers) */

}



.navbar a {

    text-decoration: none;

    color: white;

    margin: 0 10px;

    padding: 5px;

}



/* Optional: Add some hover effect */

.navbar a:hover {

    background-color: white;

    color: black;

    text-decoration: none;

 

}







h4 {

  margin-bottom: 8px;

}



.header {

  display: block;

margin-top: 50px;

margin-bottom: 75px;

  

}





.header img {

  display: block;

  margin: auto;

  height: 300px;

  

}







.menu {

  display: flex;

  justify-content: right;



}





/* Initially, the row is hidden */

.fade-in-later {

    opacity: 0;

    transition: opacity 1s ease-out;

    visibility: hidden;

    transition-delay: 1s; /* Delay of 1 second */

}



/* When it's ready to be shown */

.fade-in-later.show {

    opacity: 1;

    visibility: visible;

}









menu {

  margin-bottom: 20px;

}



a {

  text-decoration: none;

  color: rgb(29, 155, 240);

  

}



a:hover {

  text-decoration: underline;

  color: rgb(29, 155, 240);

  

}



menu a {

  text-decoration: none;

  color: rgb(29, 155, 240);

  

}



.menu-link {

  flex: 1;

    

  

}





menu,

ul {

  display: flex;

  list-style: none;

  padding: 0;

  justify-content: center;

  gap: 10px;

  text-align: center;

  border-radius: 5px;

}



li {

  display: flex;

  flex-grow: 1;

  border: 1px solid #eee;

  padding: 15px;



}





.content-container {

  display: flex;

  flex-direction: column;

  margin-top: 75px;



  

}







.home-page-container {

  display: flex;

 flex-direction: column;

   



}





.section-title {

  text-align: center;

  margin-bottom: 40px;

  margin-top: 30px;

}





.section-row {  

  display: flex;

  flex-direction: row;

  gap: 20px;

  justify-content: center;

  width: 100%;

  margin-bottom: 100px;

  flex-wrap: wrap;

}





.section-0 {

  display: flex;

  flex-direction: column;

  flex-wrap: wrap;

  gap: 20px;

  justify-content: center;

  width: 100%;

  margin-bottom: 20px;

  

}



.section {

  display: flex;

  flex-direction: row;

  flex-wrap: wrap;

  gap: 20px;

  justify-content: center;

  width: 100%;

  flex: 1;

  margin-bottom: 75px;

}







.notice-board-container {

  

  display: flex;

  flex-direction: row;

  justify-content: center;

  flex-wrap: wrap;



}





.p-no-margin {

  margin-bottom: -20px;

}





.notice-board {

  

  width: 320px;

  

  

  gap: 20px;

  padding: 20px;

  margin: 20px;

}



.detail-match-container {

  display: block;

  width: 320px;

  

 

}



.next-match-location {

  text-align: center;

  border: 1px solid #eee;

  padding: 15px;

  

}



.detail-next-match-container {

  display: flex;

  flex-direction: column;

  width: 320px;

 

}















.sponsor-images {

  display: flex;

  flex-direction: column; 

  



}

















.additional-values {

  flex-basis: 100%;

   border: 1px solid #eee;

 border-radius: 5px;



  



}



/* No Link Style */

.no-link-style {

  text-decoration: none;

  color: inherit;

  padding: 10px;

  

}



.next-match-container {

  display: flex;

  flex-direction: column;

}



.next-match-details {

  display: flex;

  gap: 10px;

  align-items: center;

  padding: 15px;

  

    background-color: #423E3B;

   color: white;

}



.next-match-opponent-details-container {

  display: flex;

  flex-direction: row;

  justify-content: space-between;

  padding: 10px;

}



/* Match Row Elements */



.match-row {

  display: flex; /* Display match row as flex */

  padding: 10px;

  align-items: center; /* Center align items vertically */

  gap: 5px; /* Add gap between items in match row */

  

}







.match-info {

  min-width: 50px;

}



.venue {

  display: flex;



}



.opponent {

  flex: 3;

  text-align: left;

}



.selected {

  background-color: #0c7df7;

  color: white;

}



.past-results-table {

  max-width: 800px;

}



.opponent-away {

  flex: 3;

  text-align: right;

}



.score {

  flex: 1;

  padding: 5px;

  width: 55px;

  text-align: center;

  margin: 0 3px 0px 3px;

}



.score-red {

  background-color: #F97068;

  color: white;

}



.score-blue {

  background-color: #618985;

  color: white;

}



.score-black {

  background-color:white;

  color:black;

}



.fixtures {

  width: 100%;

}



.match-container {

  margin-top: 20px;

}





.next-and-detail-match {

  display: flex;

  flex-direction: column;

  padding: 10px;

  

}



.next-match_container {

  

  background-color: whitesmoke;

;

  

}



.match-details {

  display: flex;

  flex-basis: 80%;

  gap: 10px;

  align-items: center;

}



.match-score {

  flex-basis: 10pt;

}





.next-match-row {

  display: flex;

  padding: 10px;

  

}



.next-match {

  flex-basis: calc(100% / 3);

}



.next-match-away-date {

  text-align: center;

  margin: auto;

  margin-bottom: 15px;

}



.next-match-home-team {

  text-align: left;

}



.next-match-koff-time {

  text-align: center;

}



.next-match-away-team {

  text-align: right;

}



.next-match-row {

  min-height: 12px;

}



.match-directions {

  justify-content: center;

}



.next-match-directions {

  display: flex;

  justify-content: center;

  border-radius: 5px;

  

}



.white-links {

  

  text-decoration: none;

  text-align: center;

}







.additional-values-table {

text-align: left;  

}





.truncate {

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}







.blue-background {

  background-color: #279AF1;

  color: white;

}









.red-background {

  background-color: #FF7477;

  color: white;

}



.black-background {

  background-color: #423E3B;

  color: white;

}



.date-and-venue {

  display: flex;

  text-align: right;

  justify-content: flex-end;

  padding: 10px 0px 10px 15px;

}



.venue {

  padding-right: 0px;

}







table {

  border-collapse: collapse;

  text-align: center;

  width: 100%;

   border: 1px solid #eee;

 border-radius: 5px;

  

}





.top-stats  {

  display: block;

  width: 320px;

  margin-bottom: 20px;



}



.month-divider {

  background-color: whitesmoke;

}







th {

 padding: 15px;

 font-size: 14px;

    border-bottom: 1px solid #eee;

    background-color: black;

    color: white;



}





tr:hover {

  background-color: #eee;

}



td {

  padding: 10px;

   border-bottom: 1px solid #eee;

}



 th:first-child,

        td:first-child {

            text-align: left;

        }













.footer {

  display: flex;

  flex-direction: row;

  gap: 20px;

  justify-content: center;

  margin-top: 20px;

  

  }











/* Styling for the flex container (.season) */

.season {

    display: flex;

    flex-direction: column;

    width: 100%;

    background-color: white;

    

 

    

}



/* 

.row {

  padding: 10px;

    text-align: center;

    background-color: whitesmoke;

} */



.flex-tiny-row {

  flex-basis: 5%;



    

}



.flex-row {

  flex-basis: 5%;



}



.flex-medium-row {

  flex-basis: 25%;

 



}



.flex-long-row {

  flex-basis: 35%;

  



}



.flex-longer-row {

  flex-basis: 46%;



}





/* Style for odd rows */

/* .odd-row {

    background-color: whitesmoke; /* or any color of your choice */

/*} */



/* Style for even rows */

/* .even-row {

    background-color: #ffffff; /* or any color of your choice */

/*} */







.section-three {

  margin-top: 50px;

  display: flex ;

  flex-direction: row;

  gap: 25px;

  justify-content: center;

}



.section-two {

  display: flex;

gap: 20px;

margin-top: 100px;

  

}



.column {

  display: flex;

  gap: 20px;

  flex-direction: column;

}





/* .col-4 {

  flex-basis: 39%;

  

  display: flex;

gap: 20px;

flex-direction: column;

}



.col-8 {

  flex-basis: 59%;

  

  display: flex;

gap: 20px;

}



.col-9 {

  flex-basis: 69%;

  

  display: flex;

gap: 20px;

}



.col-6 {

  display: flex;

  flex-basis: 49%;

  gap: 20px;

  

 

}



.col-12 {

  display: flex;

  justify-content: center;

  flex-direction: row;

  gap: 20px;

  flex-basis: 100%;

  margin-bottom: 30px;

  

  

}



.col-3 {

  flex-basis: 24%;



  display: flex;

  flex-direction: column;

  gap: 20px;

  

  

} */



.team_photo {

  background-color: whitesmoke;

  text-align: center;

}





.team_photo {

 

  align-self: stretch;

  



}



.sponsors-container {

  display: flex;



flex-direction: column;

  margin-bottom: 75px;

  

  

  

  

}



.sponsored-by {

  display: flex;

  align-items: center;

  text-align: center;

  justify-content: center;

  

}





.sponsor-images {

  display: flex;

  justify-content: center;

  flex-direction: row;



  align-items: stretch; /* Stretch child elements to equal height */



  /* Optional: Add margin to create space between sponsor-1 and sponsor-2 */

  gap: 10px;

  

  

}







.sponsor-1, .sponsor-2 {

  display: flex;

  justify-content: center;

  align-items: center;

  padding: 3%;

  flex: 1;

  text-align: center; /* Center-align the content horizontally */

  border: 1px solid #eee;





}











.sponsor-image {

    display: inline-block; /* Ensure the image is treated as an inline block */

}



 





.sponsor-image img {

  max-width: 75%;

}



.team-pic {

  display: flex;

  justify-content: center;

  max-width: 800px;



}



.team-pic img {

    max-width: 100%; /* This ensures the image never exceeds its container's width */

    height: auto;   /* This keeps the aspect ratio of the image intact */

}





.footer {

  height: 100px;

}





 .team-fixtures table {

            width: 100%;

            margin-top: 20px;

        }



        .team-fixtures td:nth-child(1),

        .team-fixtures td:nth-child(3) {

            width: 40%;  /* Adjust these percentages if needed */

        }



        .team-fixtures td:nth-child(2) {

            width: 20%;

        }







/* Styling for alternating rows

.season-row:nth-child(even) {

    background-color: #f9f9f9;

} */





/* Styling for the flex container (.league-table) */

.league-table {

    display: flex;

    flex-direction: column;

    

    

  

}



.past-results-table {

  margin-bottom: 50px;

}

.center-flex {

  display: flex;

  justify-content: center;

}





.section-column {

  display: flex;

  flex-direction: column;

  justify-content: center;

}









/* Styling for result column based on score comparison */

.score-blue {

    background-color: #279AF1;

}



.score-black {

    background-color: #f5f5f5;

}



.score-red {

    background-color: #FF7477;

}





/* Custom styles for Bootstrap-select dropdown options */

/* Ensure selected item is visually highlighted in BS5.3 */

.bootstrap-select .dropdown-menu li.selected > a {

  background-color: var(--bs-primary-bg-subtle);

  color: var(--bs-primary-text-emphasis);

}



.bootstrap-select .dropdown-menu li.selected > a .check-mark {

  display: inline-block;

}



/* Target the individual option items */

.bootstrap-select .dropdown-menu.inner li {

  /* Reduce or remove vertical padding */

  padding-top: 2px; /* Adjust as needed, e.g., 0px, 1px, 2px */

  padding-bottom: 2px; /* Adjust as needed */

}



/* Target the anchor tag inside each option (the clickable part) */

.bootstrap-select .dropdown-menu.inner li a {

  /* Reduce or remove vertical padding */

  padding-top: 5px; /* Adjust as needed, e.g., 5px is often a good starting point */

  padding-bottom: 5px; /* Adjust as needed */

}



/* You might also need to adjust line-height if text is too far apart vertically within an option */

.bootstrap-select .dropdown-menu.inner li a span.text {

  line-height: normal; /* Or a specific value like 1.2 */

}



/* If you see extra margin between items, check the li elements too */

.bootstrap-select .dropdown-menu.inner li {

  margin-bottom: 0; /* Ensure no extra margin pushes items apart */

}



/* Hide the default browser/Bootstrap dropdown arrow for select elements */

.form-select {

  /* For WebKit (Chrome, Safari) */

  -webkit-appearance: none;

  /* For Firefox */

  -moz-appearance: none;

  /* For IE/Edge (sometimes needs specific prefixes) */

  appearance: none;

  /* Remove the default caret icon if it's a background image */

  background-image: none;

}



  /* MEDIA QUERIES */



  /* Default styles that will apply to all screen sizes */





/* Media query for devices with a maximum width of 767px (e.g., smartphones in portrait mode) */

@media screen and (max-width: 767px) {



  html {

    font-family: 'BerkeleyMonoTrial-Regular', sans-serif;

    color: #333;

    font-size: 11px !important; /* Set base font size */

    line-height: 1.1; /* Set line height */

    background-color: white; /* Set background color */

    padding: 5px;

  }



  table {

    font-size: 11px !important; /* Set base font size */



  }





  .sponsor-images {

    display: flex;

    flex-direction: column;

  }



  .sidebar {

    width: 100%;

  }



  td {

    padding: 10px;

  }



  th {

    font-size: 11px;

    padding: 10px;

  }



  .column {

    align-items: center;

  }



  .top-stats {

    width: 100%;

    margin-bottom: 20px;

  }



  .section-two, .section-three {

    flex-direction: column;

  }



  .sponsor-1, .sponsor-2 {

    padding: 8%;

  }



  /* Mobile styles */

  @media (max-width: 768px) {

    .detail-match-container {

      display: flex;

      flex-direction: column;



    }



    .section-row {

      flex-direction: column;

      align-items: center;

    }

  }

  /* Mobile styles */

  @media (max-width: 768px) {



    .heading_one {

      font-size: 34px;

    }





    .notice-board-container {

      display: flex;

      flex-direction: column;





    }



    .header img {

      height: 200px;

    }



    .header {

      margin-top: 25px;

      margin-bottom: 50px;

    }



    .section-title {

      margin-bottom: 20px;

    }



  }









  .sponsors-container {

    margin-top: 20px;

  }





  /* Media query for devices with a minimum width of 768px and a maximum width of 1023px (e.g., tablets in portrait mode) */

  @media screen and (min-width: 768px) and (max-width: 1023px) {

    /* Styles for tablets go here */

  }



  /* Media query for devices with a minimum width of 1024px and a maximum width of 1365px */

  @media screen and (min-width: 1024px) and (max-width: 1365px) {

    /* Styles for small laptops and desktops go here */





  }







  /* Media query for devices with a minimum width of 1366px and a maximum width of 1919px */

  @media screen and (min-width: 1366px) and (max-width: 1919px) {

    /* Styles for medium to large laptops and desktops go here */

    /* Media query for devices with a minimum width of 1920px and above */

    @media screen and (min-width: 1920px) {



    }



    /* Media query for devices in landscape orientation */

    @media screen and (orientation: landscape) {

      /* Styles for landscape orientation go here */

    }



    /* Media query for devices in portrait orientation */

    @media screen and (orientation: portrait) {

      /* Styles for portrait orientation go here */

    }

  }



  /* --- Docked Live Summary (mobile-friendly) --- */

  #liveSummary.summary-fixed {

    position: fixed;

    left: 0;

    right: 0;

    bottom: 0;                 /* Pin to bottom */

    z-index: 1050;             /* Above page chrome, below modals */

    margin: 0;                 /* Full-width bar look */

    border-radius: 0;

    box-shadow: 0 -4px 16px rgba(0,0,0,.12);

    background: #fff;

    /* Safe area for iOS home indicator */

    padding-bottom: max(8px, env(safe-area-inset-bottom));

  }



  /* Keep header/body visually consistent when docked */

  #liveSummary.summary-fixed .card-header,

  #liveSummary.summary-fixed .card-body {

    background: #fff;

  }



  /* Compact the bar a bit on small screens */

  @media (max-width: 576px) {

    #liveSummary.summary-fixed .fs-5 { font-size: 1rem; }

    #liveSummary.summary-fixed .small { font-size: .75rem; }

    #liveSummary.summary-fixed .row.g-3 { row-gap: .25rem; }

  }

}



#liveSummary.summary-fixed {

  position: fixed;

  left: 0;

  right: 0;

  bottom: 0;

  width: 100vw;                 /* avoid parent width quirks */

  z-index: 1060;                /* above your bottom .navbar */

  margin: 0;

  border-radius: 0;

  box-shadow: 0 -4px 16px rgba(0,0,0,.12);

  background: #fff;

  padding-bottom: max(8px, env(safe-area-inset-bottom)); /* iOS safe area */

}



/* Slight compaction on small screens */

@media (max-width: 576px) {

  #liveSummary.summary-fixed .fs-5 { font-size: 1rem; }

  #liveSummary.summary-fixed .small { font-size: .75rem; }

}



/* Summary action bar layout (mobile-first) */

#liveSummary .summary-actions .btn {

  min-width: 160px;

  touch-action: manipulation;

}



/* On small screens, let buttons stretch full width for easy tapping */

@media (max-width: 576px) {

  #liveSummary .summary-actions {

    width: 100%;

  }

  #liveSummary .summary-actions .btn {

    flex: 1 1 calc(50% - .5rem); /* two-up on most phones */

  }

}



/* If space gets tight, allow actions to wrap onto a second row cleanly */

#liveSummary .summary-actions { row-gap: .25rem; }



/* Add to stats.css for nice error styling */

.error-summary {

  background: #fee;

  border: 1px solid #f99;

  padding: .75rem 1rem;

  border-radius: .5rem;

  margin-bottom: 1rem;

}

.field-error {

  outline: 2px solid #f33;

  outline-offset: 2px;

}

.visually-hidden {

  position: absolute !important;

  left: -9999px !important;

}



/* ===== MATCH ADMIN CSS ===== */

/* Admin box */

.admin-wrap {

  border: 1px solid rgba(0,0,0,.06);

  border-radius: .5rem;

  padding: .5rem .75rem;

  background: #fff;

}

.admin-title {

  font-size: .8rem;

  text-transform: uppercase;

  letter-spacing: .03em;

  color: #6c757d;

  margin-bottom: .35rem;

  font-weight: 600;

}



/* Chip */

.chip {

  border: 1px solid #e5e7eb;

  background: #f8f9fa;

  border-radius: .375rem;

  padding: .25rem .5rem;

  white-space: nowrap;

}



/* Keep € compact despite your global 90px min-width */

.amount-inline .input-group-text,

.ig-euro {

  min-width: auto !important;

  padding-inline: .5rem;

  white-space: nowrap;

}



/* Amount width */

@media (min-width: 768px) {

  .amount-inline .amount-field {

    flex: 0 0 200px !important;

    width: 200px !important;

    max-width: 200px !important;

  }

}

@media (max-width: 767.98px) {

  /* on mobile, let the amount be sensible but not huge */

  .amount-inline .amount-field {

    flex: 0 0 200px !important;

    width: 200px !important;

    max-width: 200px !important;

  }

}



@media (max-width: 767.98px) {

  .admin-wrap .amount-field::-webkit-inner-spin-button,

  .admin-wrap .amount-field::-webkit-outer-spin-button {

    -webkit-appearance: none;

    margin: 0;

  }

  .admin-wrap .amount-field {

    -moz-appearance: textfield; /* Firefox */

  }

}



@media (min-width: 768px) and (max-width: 991.98px) {

  .admin-wrap .row > div {

    flex: 0 0 50%;  /* two per line */

    max-width: 50%;

  }

}



/* Reuse amount-inline visuals for both € fields */

.amount-inline .input-group-text,

.ig-euro {

  min-width: auto !important;

  padding-inline: .5rem;

  white-space: nowrap;

}



/* Consistent width for € inputs on desktop, sensible on mobile */

@media (min-width: 768px) {

  .amount-inline .amount-field {

    flex: 0 0 200px !important;

    width: 200px !important;

    max-width: 200px !important;

  }

}



/* Comments sizing */

.comments-field {

  resize: vertical; /* let users expand if needed */

}



/* Compact comment snippet: ellipsis on one line; expands in Details table */

.admin-mini .comment-snippet {

  display: inline-block;

  max-width: 45ch;

  vertical-align: bottom;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}



/* On phones, let it wrap under the label for readability */

@media (max-width: 576px) {

  .admin-mini .comment-snippet {

    display: block;

    max-width: 100%;

    white-space: normal;

  }

}



/* === Tom Select mobile ergonomics === */

/* Ensure input font-size >= 16px to prevent iOS zoom-on-focus */

.ts-wrapper .ts-control,

.ts-wrapper .ts-control input.ts-input {

  font-size: 16px;        /* key line to stop iOS zoom */

  line-height: 1.25;      /* comfortable tap target */

}



/* Optional: keep height tidy when your selects sit inside .input-group-sm */

.input-group-sm .ts-wrapper .ts-control {

  min-height: 2.25rem;    /* balance with Bootstrap small inputs */

  padding-top: .25rem;

  padding-bottom: .25rem;

}