@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


:root {
	--primary: #e61e25;
}

body {
	background: #000 url(../images/bg-main.jpg?v=0004) no-repeat;	
	font-family: 'Poppins', sans-serif;
	background-size: 100%;
}

a {
	cursor: pointer;
	color: var(--primary);
	text-decoration: none;
}

.nav-link {
	color: #41464b !important;
}

.mobile {
	display: none !important;
}

h1,h2,h3,h4 {
	text-transform: uppercase;
  font-weight: 700;
  font-size: 1.5rem;
}

header .logo {
	max-width: 300px;
	width: 100%;
	padding: 0.5rem 0 0 0;
}

.primary {
	color: var(--primary) !important;
}

.primary-bg {
	background: var(--primary) !important;
	border: 1px solid var(--primary) !important;
}

.call-free {
	color: #fff;
	text-transform: uppercase;
}

.main .container {
	padding: 1rem;
}

.container {
	max-width: 1140px;
}

	.carousel-indicators .active {
		background-color: var(--primary);
	}

	/**live odds **/

	.odds-tool {
		font-size: 80%;
	}
	
	#odds-container .accordion-button {
		padding: .5rem;
		background-color: #41464b;
		color: #fff;
		font-size: 0.8rem
	}
	
	#tableOdds-container .bg-primary th {
			background-color: var(--primary) !important;
	}

 
	#tableOdds-container .table .bg-light {
		background-color: #41464b !important;
		color: #fff;
		border-radius: 0.5rem;
	}

	#odd-table {
		--bs-table-color: #fff;
		--bs-table-bg: #212529;
		--bs-table-border-color: #4d5154;
		--bs-table-striped-bg: #2c3034;
		--bs-table-striped-color: #fff;
		--bs-table-active-bg: #373b3e;
		--bs-table-active-color: #fff;
		--bs-table-hover-bg: #323539;
		--bs-table-hover-color: #fff;
		color: var(--bs-table-color);
		border-color: var(--bs-table-border-color);
	}
	
	
	.accordion-button::after {
		filter: invert(.5);
	}

.modal h4 {
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px;
    font-size: 1rem;
    color: var(--primary);
}

	footer.main-footer {
		font-size: 11px;

	}

	.export svg {
		fill: #fff;
	}

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

	.mobile {
		display: block !important;
	}

	.hero {
		display: none;
	}

	.login h2 {
		text-transform: uppercase;
		color: var(--primary);
	  font-weight: 700;
	  font-style: italic;
	}

	.mobile-container {
		padding: 1rem !important;
		/*margin-top: 25%;*/
	} 

	#sports-btn-mobile {
		position: fixed;
		width: 80px;
		height: 80px;
		border: 0;
		bottom: 10px;
		right: 10px;
		background: red;
		color: white;  
	  }  

	  #leaguesContainer {
		display: none;
		position: fixed;
		top: 0px;
		left: 0px;
		z-index: 1030;
		max-width: 75%;
		padding-left: 0;
	  }

	  #odds-container {
		margin: 0 !important;
		padding: 0.5rem;
	  }

	  .odds-tool {
		padding: 0 !important
	  }

	  #oddsContainer {
		padding: 0 !important;
	  }

}	

.nav-pills .nav-link {
    color: white !important;
	font-size: 1rem;
}

	.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
		color: white !important;
		background-color: #dc3545;
	}

	.button-login {
		width: 260px;
		min-height: 60px;
		display: inline-flex;
		font-size: 22px;
		align-items: center;
		justify-content: center;
		text-transform: uppercase;
		text-align: center;
		letter-spacing: 1.3px;
		font-weight: 700;
		color: #313133;
		background: #4FD1C5;
	  background: #ffc107;
		border: none;
		border-radius: 1000px;
		transition: all 0.3s ease-in-out 0s;
		cursor: pointer;
		outline: none;
		position: relative;
		padding: 10px;
		}
	  
	  .button-login::before {
	    content: '';
		border-radius: 1000px;
		min-width: calc(260px + 12px);
		min-height: calc(60px + 12px);
		border: 3px solid #ffc107;
		box-shadow: 0 0 10px #ffc107;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		opacity: 0;
		transition: all .3s ease-in-out 0s;
		  z-index: 1030;
	  }
	  
	  .button-login:hover, 
	  .button-login:focus {
		color: #313133;
		transform: translateY(-6px);
	  }
	  
	  .button-login:hover::before, 
	  .button-login:focus::before {
		opacity: 1;
	  }
	  
	  .button-login::after {
		content: '';
		width: 30px; height: 30px;
		border-radius: 100%;
		border: 3px solid #ffc107;
		position: absolute;
		z-index: -1;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		animation: ring 1.5s infinite;
		z-index: 1030;
	  }
	  
	  .button-login:hover::after, 
	  .button-login:focus::after {
		animation: none;
		display: none;
	  }
	  
	  @keyframes ring {
		0% {
		  width: 30px;
		  height: 30px;
		  opacity: 1;
		}
		100% {
		  width: 300px;
		  height: 300px;
		  opacity: 0;
		}
	  }