main {
  /* Offset the fixed-top navbar (~56px desktop / ~60px mobile).
     In rem so it scales with the font-driven navbar under browser zoom. */
  margin-top: 4.5rem;
}

/* [title] {
  cursor: help;
} */

.score-badge {
  width: 1.7rem;
}

.text-primary {
  color: #3260b6 !important;
}

.bg-primary {
  background: #263d42 !important;
}

.bg-4pts {
  background: #2e79b4 !important;
}

.bg-info {
  background: #463b62 !important;
}

.bg-danger {
  background: rgb(204, 60, 127) !important;
}

.bg-decrease {
  background: #ffe1f0 !important;
}

.bg-increase {
  background: #d7f8ed !important;
}

.bg-success {
  background: #13994b !important;
}

.text-success {
  color: #13994b !important;
}

.text-danger {
  color: rgb(190, 31, 92) !important;
}

.btn-primary,
.navbar {
  background: #343f64 !important;
}

.cursor-pointer {
  cursor: pointer;
}

.bg-accent {
  background: #3b2fad !important;
}

.bg-A {
  background: #ffd6a5 !important;
}

.bg-B {
  background: #e89c81 !important;
}

.bg-C {
  background: #d1625c !important;
}

.bg-D {
  background: #eac4d5 !important;
}

.bg-E {
  background: #d6eadf !important;
}

.bg-F {
  background: #b8e0d4 !important;
}

.bg-G {
  background: #95b8d1 !important;
}

.bg-H {
  background: #809bce !important;
}

.bg-I {
  background: #c9b8e8 !important;
}

.bg-J {
  background: #b39ddb !important;
}

.bg-K {
  background: #e8b8d8 !important;
}

.bg-L {
  background: #f4a7b9 !important;
}

.bg-knockout {
  background: #404e67 !important;
}

.offcanvas-start {
  width: 80%;
  max-width: 320px;
}

.navbar .btn {
  font-size: 1.6rem;
}

.nav-bat {
  width: 22px;
  height: 22px;
  background-image: url('/img/table-tennis-bat.svg?q=125e03867e');
  background-repeat: no-repeat;
  position: relative;
  top: 3px;
  display: inline-block;
}

.ball {
  width:12px;
  height:12px;
  border-radius:100%;
  border:2px solid #3b2fad;
  background:#ffffff;
  transform: translateY(0px);
  position:absolute;
  margin: 28px 12px;
  top: 0px;
}

.bouncing {
  animation: bounce 1s;
  animation-iteration-count: infinite;
}

@keyframes bounce {
	0% {
    top: 0;
		-webkit-animation-timing-function: ease-in;
	}
	50% {
    top: 10px;
		height: 11px;
		-webkit-animation-timing-function: ease-out;
	}
	55% {
    top: 16px;
    height: 10px;
		-webkit-animation-timing-function: ease-in;
  }
	65% {
    top: 8px;
    height: 11px;
		-webkit-animation-timing-function: ease-out;
  }
	95% {
		top: 0;
		-webkit-animation-timing-function: ease-in;
	}
	100% {
    top: 0;
		-webkit-animation-timing-function: ease-in;
	}
}

.card thead {
  background-color: rgba(0, 0, 0, .03);
}

.table>:not(:last-child)>:last-child>* {
    border-bottom-color: rgba(0,0,0,.125);
}

.card tr:last-child td {
  border-bottom: 0;
}

.blinking {
  -webkit-animation: 2s blink ease infinite;
  -moz-animation: 2s blink ease infinite;
  -ms-animation: 2s blink ease infinite;
  -o-animation: 2s blink ease infinite;
  animation: 2s blink ease infinite;
  
}

@keyframes "blink" {
  from, to {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

@-moz-keyframes blink {
  from, to {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

@-webkit-keyframes "blink" {
  from, to {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

@-ms-keyframes "blink" {
  from, to {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

@-o-keyframes "blink" {
  from, to {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}


/* Auto-refresh switch on the match page: use secondary grey instead of the
   default primary blue for the checked track. */
#autoRefreshToggle:checked {
  background-color: #6c757d;
  border-color: #6c757d;
}
#autoRefreshToggle:focus {
  border-color: #6c757d;
  box-shadow: 0 0 0 0.25rem rgba(108, 117, 125, 0.25);
}

#refresh-btn { line-height: 1; }
#refresh-btn:focus { box-shadow: none; }
.spin { display: inline-block; animation: spin 0.6s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Custom SVG scoring-category icons (static/img/*.svg), used in place of the
   Bootstrap icons for match points and the goal/defence/group/tournament bonuses.
   Sized to the surrounding text so they sit inline like the old <i> icons. */
.svg-icon {
  height: 1em;
  width: 1em;
  vertical-align: -0.125em;
}

/* Rank-change "delta" badges on the league-stats and leaderboard cards — kept
   compact so they don't dominate the value next to them. */
.delta-badge { font-size: .6rem; }