body {
	background-color: var(--body-background);
	color: var(--body-color);
}

#rodape {
		
		width:100%;
		text-align:center;
		color: var(--footer-color);	
		margin-top: 3%;
		clear:both;
		
	}
	
	body {
		
		font-family: "Oswald", sans-serif;	
	}	
	
	#livelogo, #provainfo {
			
		height:auto;
		float:left;
		
	}
	
	#livelogo {
		
		width:50%;
		
	}
	
	#provainfo, #provainfo p {
		
		text-align:center;
		
	}
	
	#provainfo {
		
		background: var(--prova-info-background);
		width:48%;
		margin: 0% 1%;
		color:var(--prova-info-color);
		padding: 2.3% 0;
		
	}
	
	#provainfo span {
		
		font-size: 0.6em;
		
	}
	
	.liveitem {
		
		background: var(--live-info-background);
		color: var(--live-info-color);
		width: 23.0%;
		margin: 1% 0.5%;
		float:left;
		padding:1.5% 0.5%;
		text-align:center;
		font-size:0.9em;
		font-weight:bold;		
		
	}
	
	@media screen and (max-width: 720px) {
		
		.noip {
			
			display:none;
			
		}
		
		#livelogo, #provainfo {
			
			width:100%;
			margin:1.5% 0;
			font-size: 1.5em;
			
		}
		
		.liveitem {
		
			width: 30.5%;
			padding:2% 0.5%;
			font-size:0.6em;
			margin: 2% 0.5%;
		
		}
		
		#live-player {
			width: 98%;
			height: 35%;
		}
		
	}

	#grid-buttons {
		margin: 20px 0;
	}
	
	#container {
		
		max-width:900px;
		margin:0 auto;
		display: flex;
		flex-direction: column;
	}

	#grid-incentivos {
		width:98%;
		overflow:auto;
		margin-bottom:20px;
	}

	#grid-incentivos button, #buttons-results button, #buttons-largada button, .stylized-button {
		float: left;
		margin-right: 20px;
		margin-bottom: 20px;
		border-radius: 5px;
		padding: 10px;
		border: 1px solid #ccc;
		font-family: Oswald;
		cursor: pointer;
	}

	#gridPistas, #categoriasAtivas{
		width:98%;
		overflow:auto;
		margin-bottom:20px;
	}

	#gridPistas button, #categoriasAtivas button{
		float: left;
		margin-right: 20px;
		margin-bottom: 20px;
		border-radius: 5px;
		padding: 10px;
		border: 1px solid #ccc;
		font-family: Oswald;
		cursor: pointer;	
	}

	#gridPistas button:hover, #categoriasAtivas button:hover{
		background-color: var(--input-button-background-hover);
	}

	#gridPistas button:active, #categoriasAtivas button:active{
		background-color: var(--input-button-background-active);
		transform: translateY(1px);
	}

	input[type="button"]{
		margin-bottom: 20px;
		border-radius: 5px;
		padding: 10px;
		border: 1px solid #ccc;
		font-family: Oswald;
	}

	input[type="button"]:hover{
		background-color: var(--input-button-background-hover);
	}
	input[type="button"]:active{
		background-color: var(--input-button-background-active);
		transform: translateY(1px);
	}

	input[type="text"]{
		width: 80%;
		height: 30px;
		background-color: var(--input-search-background);
		color: var(--input-search-color);
		border-radius: 5px;
		border: 1px solid var(--button-gray-background);
		font-family: Oswald;
	}
	

	.button {
		
		width: 100%;
		float:left;
		text-align:center;
		font-size:0.9em;
		font-weight:bold;
		height: 35px;
		padding-top: 5px;
		border-radius: 5px;
		cursor: pointer;
		
	}
	
	.red {
		
		background: var(--button-red-background);
		color: var(--button-red-color);
			
	}
	
	.gray {
		
		background: var(--button-gray-background);
		color: var(--button-gray-color);	
	}
	
	.categ-title {
		
		font-size: 1.5em;
		clear:both;
		margin-bottom:0;
		
	}

	.categ-result {
		font-size: 1.5em;
		clear:both;
		margin-bottom:0;
	}
	
	.categ-sub {
		
		font-size: 1.1em;
		color:var(--categ-sub-color);
		clear:both;
		margin-bottom:0;
		
	}
	
	p, td, th {
		
		font-size: 0.75em;
		text-align:left;
	}
	
	@media screen and (min-width: 1024px) {
		
		p, td, th {
		
			font-size: 0.9em;
		
		}
		
		#provainfo {
			
			font-size: 1.2em;
			
		}	

		#provainfo span {
		
			font-size: 0.75em;
		
		}	
		
		#live-player {
			width: 600px;
			height: 300px;
		}
		
	}
	
	@media screen and (max-width: 850px) {
		
		#baban {
		
			width:100%; 
			margin-bottom:2%;
			
		
		}
		
	}
	
	@media screen and (min-width: 851px) {
		
		#baban {
		
			width:600px; 
			margin-bottom:3%;
		
		
		}
		
	}
	
	.restable {
		
		width:96%;
		margin: 20px auto;
		
	}
	
	.listable {
		
		width:96%;
		margin: 20px auto;
	}
	
	th {
		
		border-bottom:2px solid black;
		
	}
	
	td {
		
		border-bottom:1px dotted #666;

	}

	
	/* .listable tr:nth-child(even) {
		
		background:#eee;
		
	} */
	
	a {
		
		text-decoration:none;
		
	}
	
	.warn {
		
		color:var(--warn-color);
		
	}
	
	.inactive {
		
		color:var(--inactive-color);
		
	}

td.medal {
	text-align: right;
	padding-right: 0;
}

.fontable td, .fontable th {
	font-size: 1em;
	padding: 15px;
}

table {
	width: 100%;
}

.gridLive {
	width:100%;
	display:grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap:10px;
}

.gridLiveItem {
	text-align:center;
	font-weight:bold;
	font-size:14px;
	padding-top: 10px;
}

#themeDropDown, #alterar-tema {
    border: 1px solid transparent;
    border-radius: 0.25em;
    color: black;
    background-color: #ccc;
}

.hyperlink-theme {
	color: var(--hyperlink-non-clicked-color);
	text-decoration: none;
	cursor: pointer;
}
	
.hyperlink-theme a:link:active, .hyperlink-theme a:visited:active {
		color: var(--hyperlink-clicked-color)
	}

.videoContainer {
	position: relative;
	width: 98%;
	height: 624vw;
	max-width: 850px;
	max-height: 624px;
	overflow: hidden;
	border-radius: 12px;
	cursor: pointer;
	box-shadow: 0 0 25px rgba(0, 0, 0, 0.4);
}

video {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1s ease-in-out;
	pointer-events: none;
	user-select: none;
	border-radius: inherit	;
}


.parceiros-info {
	font-size: 0.95rem;
}

@media screen and (max-width: 720px){
	.parceiros-info {
		font-size: 0.9rem;
	}   
}

#propaganda-sgp{
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--body-background);
}

@media (max-width: 768px){
	.videoContainer {
		width: 98%;
		height: 60vw;
		border-radius: 8px;
	}
}

@media (max-width: 480px){
	.videoContainer {
		width: 98%;
		height: 60vw;
		border-radius: 6px;
	}

	[id^="dia"] td, [id^="tipo"] td{
		padding: 15px 5px;
	}

	[id^="table-largada"] td{
		font-size: 0.7em;
	}
}

/* .table-dark-sgp {
	--bs-table-striped-bg: #00397d;
	transition: --bs-table-striped-bg 0.5s ease;
}

.table-dark-sgp:hover {
	--bs-table-striped-bg: #fff;
} */