/* aria work around for sweetalert2 */
div[aria-hidden='true'] {
	display: none !important;
}
body {
	font-family: 'Quantico', sans-serif;
	font-weight: 400;
	font-style: normal;
}
body {
	background-color: black;
}

.slide-in-from-left {
	height: 100vh;
	width: 100%;
	animation: slideInFromLeft 1s ease-out;
	position: relative;
}

.main-landing {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	margin: 0px;
	padding: 0px;
	width: 100%;
	z-index: -1;
	position: relative;
}

.main-landing::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5); /* Black with 50% opacity */
	z-index: -1;
	pointer-events: none;
}

@media (min-width: 768px) {
	.main-landing {
		background-image: url('/img/bg-web.jpg') !important;
	}
}

@media (max-width: 767px) {
	.main-landing {
		background-image: url('/img/bg-phone.jpg') !important;
	}
}

.team_name_median {
	font-family: 'Quantico', sans-serif;
	font-weight: 400;
	font-style: normal;
}

.title {
	font-family: 'New Amsterdam', sans-serif;
	font-weight: 400;
	font-style: normal;
	letter-spacing: 0.2rem;
}

.bubble_gum {
	font-family: 'Bubblegum Sans', sans-serif !important;
	font-weight: 400;
	font-style: normal;
	letter-spacing: 0.1125rem;
}

.responsive-font-size {
	font-size: 0.75rem;
}

@media (min-width: 768px) {
	.responsive-font-size {
		font-size: 1rem;
	}
}

/* // Animations */
@keyframes loader-remove {
	0% {
		transform: scale(1);
	}

	20% {
		transform: scale(0.9);
	}

	50% {
		transform: scale(1.1);
	}

	80% {
		transform: scale(0.3);
	}

	100% {
		transform: scale(0);
	}
}

@keyframes fade-out {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

@keyframes scaleUp {
	from {
		transform: scale(0);
	}

	to {
		transform: scale(1);
	}
}

@-webkit-keyframes gzoomIn {
	from {
		opacity: 0;
		-webkit-transform: scale3d(0.3, 0.3, 0.3);
		transform: scale3d(0.3, 0.3, 0.3);
	}

	to {
		opacity: 1;
	}
}

@keyframes gzoomIn {
	from {
		opacity: 0;
		-webkit-transform: scale3d(0.3, 0.3, 0.3);
		transform: scale3d(0.3, 0.3, 0.3);
	}

	to {
		opacity: 1;
	}
}

@-webkit-keyframes gzoomOut {
	from {
		opacity: 1;
	}

	50% {
		opacity: 0;
		-webkit-transform: scale3d(0.3, 0.3, 0.3);
		transform: scale3d(0.3, 0.3, 0.3);
	}

	to {
		opacity: 0;
	}
}

@keyframes gzoomOut {
	from {
		opacity: 1;
	}

	50% {
		opacity: 0;
		-webkit-transform: scale3d(0.3, 0.3, 0.3);
		transform: scale3d(0.3, 0.3, 0.3);
	}

	to {
		opacity: 0;
	}
}

.loader-remove {
	animation: loader-remove 0.6s ease-in-out forwards;
}

.fade-out {
	animation: fade-out 0.6s ease-in-out forwards;
	animation-fill-mode: forwards;
}

.scaleUp {
	animation: scaleUp 0.5s ease;
}

.displayNone {
	display: none;
}

.gzoomIn {
	-webkit-animation: gzoomIn 0.5s ease;
	animation: gzoomIn 0.5s ease;
}

.gzoomOut {
	-webkit-animation: gzoomOut 0.5s ease;
	animation: gzoomOut 0.5s ease;
}

.bg_linear_gradient_1 {
	background: linear-gradient(to top, #333333, #222222, #111111);
}

.logo-display {
	height: auto !important;
}
.logo-display-mobile {
	max-width: 100px !important;
}
.logo-display-xl {
	max-width: 150px !important;
}

/* Sync Button */
.btn-spin-360 {
	border: none !important;
	animation: spin360 1s linear infinite;

	color: rgb(255, 255, 255, 50) !important;
	border: none !important;
	background-color: transparent !important;
}
@keyframes spin360 {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

@keyframes spin270 {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(270deg);
	}
}

.btn-secondary-opacity-50 {
	color: rgb(108, 117, 125, 1) !important;
	background-color: rgb(108, 117, 125, 0.25) !important;
}
.btn-secondary-opacity-50:hover {
	color: #eeeeee !important;
	background-color: rgb(108, 117, 125, 0.15) !important;
	border: thin dotted #eeeeee !important;
	border-color: rgb(233, 233, 233, 0.5) !important;
}
.btn-secondary-opacity-50:hover svg {
	animation: spin270 0.5s forwards;
}

.text-secondary-lighter {
	color: #afafaf;
}

/* PlayerScoreboard Styles */
/* .game-desc {
	white-space: nowrap;
	margin: 0;
	padding: 0;
}
.game-desc .final-statu {
	font-style: italic;
	color: var(--bs-info);
}
.game-desc .final-score {
	font-weight: normal;
}
.game-desc .final-vs-at,
.game-desc .sched-vs-at,
.game-desc .livex-vs-at {
	color: var(--bs-warning);
}
.game-desc .final-oppon,
.game-desc .sched-oppon,
.game-desc .livex-oppon {
	font-weight: normal;
}
.game-desc .day {
	color: var(--bs-warning);
}
.game-desc .livex-clock {
	color: var(--bs-warning);
	font-weight: bold;
	text-shadow: var(--iff-text-shadow-sm);
}

.game-desc .final {
	opacity: 1 !important;
} */
/* ================================================= */

.subbed_in_lineup {
	background-image: url('/img/25x25-light.png') !important;
	background-repeat: repeat;
	overflow: hidden;
	border-radius: 0 0 8px 8px;
}
/* .sub-border-top {
	border-top: 1px solid rgba(51, 0, 0, 0.75);
} */

/* ** Ranked Team Classes ======================= */
.ranked-team {
	border-radius: 6px;
	margin: 0.5rem 0;
	padding: 0.75rem;
}
.rank {
	font-weight: bold;
	color: #2a2a2a;
}
.team-name {
	font-size: 1.1rem;
	margin-top: 0.25rem;
}
.score {
	color: #555;
	margin-top: 0.25rem;
}

/*.    
		- Here below was in the old RankedTeamSolo.svelte component...
	*/

@keyframes scaleUp {
	0% {
		transform: scale(1);
		color: inherit;
	}
	20% {
		transform: scale(1.5);
		color: #39ff14; /* Fluorescent green */
	}
	100% {
		transform: scale(1);
		color: inherit;
	}
}
@keyframes scaleDown {
	0% {
		transform: scale(1);
		color: inherit;
	}
	20% {
		transform: scale(0.9);
		color: rgb(255, 145, 0); /* Fluorescent green */
	}
	100% {
		transform: scale(1);
		color: inherit;
	}
}

/* CSS class for the animation */
.points-increased {
	animation: scaleUp 2s ease-in-out;
}
.points-decreased {
	animation: scaleDown 2s ease-in-out;
}

/* ** LeagueRegistered/Synced ========================= */
.border-draw {
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
	width: 100%;
	height: 100%;
	border-radius: 6px;
}

.border-draw rect {
	fill: none;
	stroke: #ffc107;
	stroke-width: 7;
	stroke-dasharray: 3;
	stroke-dashoffset: 400;
	animation: draw-border 10s linear infinite;
}

@keyframes draw-border {
	0% {
		stroke-dashoffset: 200;
	}
	100% {
		stroke-dashoffset: 0;
	}
}

.refresh {
	background: none;
	border: none;
}
@media (min-width: 992px) {
	.refresh {
		font-size: var(--fs-7);
	}
}
@media (max-width: 991px) {
	.refresh {
		font-size: var(--fs-8);
	}
}

.hover_button:hover {
	background-color: #333333;
}

.brackets::before {
	content: '[ ';
}
.brackets::after {
	content: ' ]';
}
.brackets:hover::before,
.brackets:focus::before,
.brackets:active::before,
.brackets:hover::after,
.brackets:focus::after,
.brackets:active::after {
	opacity: 0;
}

/* Sweet Alert Custom Styles */
.swal2-icon.small-icon {
    font-size: .5em !important;
}