/*
 * Xscore808 Prediction & Match Table Styles
 * Replicated from xscore808.com/predictstyle.min.css
 */

/* ==========================================================================
   Column Width System
   ========================================================================== */

.col-1 { flex: 0 0 auto; width: 7%; }
.col-2 { flex: 0 0 auto; width: 28%; }
.col-3 { flex: 0 0 auto; width: 15%; }
.col-4 { flex: 0 0 auto; width: 50%; }

/* ==========================================================================
   Matches Table
   ========================================================================== */

.matches-table {
  border-collapse: separate;
  border-spacing: 0 0.2rem;
  width: 100%;
}

.matches-table > :not(caption) > * > * {
  padding: .1rem .5rem;
}

.table-bordered > :not(caption) > * > * {
  border-width: 0 1px;
}

.table > :not(caption) > * > * {
  background-color: var(--bs-table-bg, transparent);
  border-bottom-width: 1px;
  box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg, transparent);
}

/* Rounded row borders */
.first-td {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom: 1px solid #dee2e6 !important;
  border-top: 1px solid #dee2e6 !important;
  border-left: 1px solid #dee2e6 !important;
}

.first-td,
.inner-td {
  border-right: 0;
}

.inner-td,
.last-td {
  border-bottom: 1px solid #dee2e6 !important;
  border-top: 1px solid #dee2e6 !important;
  border-left: 0;
}

.last-td {
  border-right: 1px solid #dee2e6 !important;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

/* Club images in tables */
#club_image-matches {
  width: 100%;
  max-width: 18px;
  height: auto;
}

/* Prediction weight images */
.predWeight-Image {
  max-width: 70%;
}

.predWeight-Image-WOResult {
  max-width: 55%;
}

/* ==========================================================================
   Form Icons (W/D/L indicators)
   ========================================================================== */

.form-icon {
  width: 1.6em;
  height: 1.6em;
  display: inline-block;
  border-radius: 3px;
  text-align: center;
  line-height: 1.6em;
  font-size: 11px;
  font-weight: bold;
  color: #fff;
}

.form-icon-teamDetailPage {
  width: 3.5em;
  height: 1.5em;
}

/* Win/Draw/Loss colors */
.form-W { background-color: #28a745; }
.form-D { background-color: #ffc107; color: #333; }
.form-L { background-color: #dc3545; }

/* ==========================================================================
   Match Info Layout
   ========================================================================== */

.half-width-matchInfo-col1 { width: 15%; }
.half-width-matchInfo-col2 { width: 85%; padding-top: 0 !important; padding-bottom: 0 !important; }
.half-width-matchInfoTeam-col1 { width: 50%; }
.half-width-matchInfoTeam-col2 { width: 50%; padding-top: 0 !important; padding-bottom: 0 !important; }
.formRow-col1-teamDetailPage { width: 40%; }
.formRow-col2-teamDetailPage { width: 60%; }

.table-responsive-matchDetailsGeneral {
  padding-left: 0;
  padding-right: 0;
  margin-top: -.4rem;
  margin-bottom: -1.3rem;
}

.winProb-cell-content-container {
  max-width: 100%;
  box-sizing: border-box;
}

/* ==========================================================================
   Icon Click (external link)
   ========================================================================== */

.iconclick {
  height: 20px;
  width: 20px;
  background: url(../img/external-link.svg) no-repeat center;
  line-height: 25px;
  display: block;
  background-size: cover;
  opacity: 0.6;
}

.iconclick:hover {
  opacity: 1;
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

.text-center { text-align: center; }
.align-middle { vertical-align: middle; }
.hoverable:hover { background-color: #f8f8f8; }

/* ==========================================================================
   League Navigation (Horizontal Scroll)
   ========================================================================== */

#divleagues {
  position: relative;
  z-index: 50;
  overflow-x: auto;
  white-space: nowrap;
  padding-top: 10px;
  padding-bottom: 10px;
  -ms-overflow-style: none;
  scrollbar-width: none;
  text-align: center;
}

#divleagues::-webkit-scrollbar {
  display: none;
}

#divleagues a {
  display: inline-block;
  padding: 5px 12px;
  margin: 0 3px;
  border: 1px solid #ddd;
  border-radius: 20px;
  color: #333;
  text-decoration: none;
  font-size: 13px;
  white-space: nowrap;
}

#divleagues a:hover,
#divleagues a.active {
  background-color: #333;
  color: #fff;
  border-color: #333;
}

/* ==========================================================================
   Team Logo Zoom Animation
   ========================================================================== */

.zoom {
  transition: transform .2s;
  width: 60px;
  height: 60px;
  margin: 0 auto;
}

.zoom:hover {
  transform: scale(1.2);
}

/* ==========================================================================
   H2H Statistics Tables
   ========================================================================== */

.statsh2h {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0;
}

.statsh2h td,
.statsh2h th {
  padding: 6px 10px;
  border: 1px solid #e5e5e5;
  font-size: 13px;
}

.statsh2h th {
  background: #f5f5f5;
  font-weight: bold;
}

.statsh2h tr:hover {
  background-color: #f8f8f8;
}

/* League tables */
.ltb1,
.ltbs1 {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.ltb1 td,
.ltb1 th,
.ltbs1 td,
.ltbs1 th {
  padding: 5px 8px;
  border: 1px solid #e5e5e5;
}

.ltb1 th,
.ltbs1 th {
  background: #f0f0f0;
  font-weight: bold;
}

/* Analysis count sections */
.ana_count {
  text-align: center;
  padding: 10px;
  margin: 10px 0;
}

/* Statistics table variants */
.sjt1, .sjt2, .sjt3, .sjt4 {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin: 5px 0;
}

.sjt1 td, .sjt2 td, .sjt3 td, .sjt4 td,
.sjt1 th, .sjt2 th, .sjt3 th, .sjt4 th {
  padding: 4px 8px;
  border-bottom: 1px solid #eee;
}

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */

@media (min-width: 300px) {
  .matches-table { border-spacing: 0 0.2rem; }
  .predWeight-Image { max-width: 60%; }
  .predWeight-Image-WOResult { max-width: 45%; }
  .first-td { border-radius: 6px 0 0 6px; }
  .last-td { border-radius: 0 6px 6px 0; }
  #club_image-matches { max-width: 20px; }
}

@media (min-width: 400px) {
  .predWeight-Image { max-width: 45%; }
  .predWeight-Image-WOResult { max-width: 30%; }
}

@media (min-width: 500px) {
  .first-td { border-radius: 7px 0 0 7px; }
  .last-td { border-radius: 0 7px 7px 0; }
}

@media (min-width: 600px) {
  .matches-table { border-spacing: 0 0.3rem; }
  .predWeight-Image { max-width: 40%; }
  .predWeight-Image-WOResult { max-width: 30%; }
}

@media (min-width: 700px) {
  .first-td { border-radius: 9px 0 0 9px; }
  .last-td { border-radius: 0 9px 9px 0; }
  .predWeight-Image { max-width: 35%; }
  .predWeight-Image-WOResult { max-width: 25%; }
}