@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100;8..144,400;8..144,600&display=swap');

/* Generic CSS */
* {
	box-sizing: border-box;
}
.button, .small-button, li, .clickable, .title-campeonato, .nome-rodada, .nome-fase, .bottom-panel-close, .top-panel-close, .right-panel-close, .right-panel-open {
	cursor: pointer;
}

input[type="text"], textarea {
	cursor: text;
}
input:focus, textarea:focus, select:focus {
	outline: none;
}


body {
	font-family: 'Roboto Flex', Arial, Helvetica, sans-serif;
	font-size: 18px;
	margin-bottom: 1px;
}

@media (max-width: 900px) {
	body { font-size: 17px; }
}
@media (max-width: 600px) {
	body { font-size: 16px; }
}
@media (max-width: 500px) {
	body { font-size: 14px; }
}
@media (max-width: 400px) {
	body { font-size: 13px; }
}
@media (max-width: 300px) {
	body { font-size: 12px; }
}

.App {
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: stretch;
}


/* Basic screen compnents neste layout */


.logo-bar { font-size: 0.7em; padding: 5px 65px; }
.logo-bar a { border: none; text-decoration: none; color: inherit; }
.logo-bar img { height: 16px; vertical-align: middle; margin-left: 4px; border: none; }

.popup-wrapper { position: relative; z-index: 3; }
.popup { position: absolute; top: 0; left: 0; z-index: 3; background: white; border: 1px solid #7eb466; overflow-y: auto; max-height: 300px; min-width: 100%; }
.popup .clube:hover { background-color: #7eb466; cursor: pointer; }
.popup .clube img { height: 32px; }
.popup .clube > * { margin-left: 1em; }
.popup .clube > .nome_abr { display: none; }
.dropdown { padding: 10px; }
.dropdown>div:first-child { color: #7a0a25; font-weight: bold; margin-bottom: 5px; }
.select { cursor: pointer; border: 1px solid lightgray; border-radius: 10px; padding: 5px 10px; min-height: 44px; display: flex; align-items: center; }
.select>div>svg { color: #9a1032; }
.popup input { width: calc(100% - 20px); border: 1px solid lightgray; border-radius: 10px; padding: 10px; margin: 10px; }
.select .clube > * { margin-left: 1em; }
.select .clube img { height: 32px; }
.select .clube > .nome_abr { display: none; }
button.submit { cursor: pointer; border: 1px solid lightgray; padding: 10px 14px; align-self: end; margin: 10px; min-height: 44px; }
.jogo { position: relative; }
.blackout { position: fixed; top: 0; left: 0; height: 100vh; width: 100vw; z-index: 3; background: #0004; }
.campeao-row { position: sticky; left: 0; z-index: 3; flex-wrap: wrap; align-items: start; display: flex; }
.campeao-row > * { min-width: 150px; }
.campeao-row > .logos { display: flex; align-items: center; min-width: auto; flex-grow: 0; flex-basis: 300px; gap: 20px; padding: 5px 20px; }
.campeao-row > .logos img:first-child { width: 50%; max-width: 160px; cursor: pointer; }
.campeao-row > .logos img:last-child { width: 50%; max-width: 160px; }
.campeao-row > .e0ext { text-align: center; }
.campeao-row > .e0ext > * { display: inline-block; }

@media (max-width: 600px) {
	.campeao-row > .logos { flex-basis: 100% }
	
}
button { border-radius: 10px; background: #9a1032; border: 1px solid #7a0a25; color: #FFF; font-weight: bold; cursor: pointer; }
button.help { background: #035afc; }

.footnote button {
	padding: 5px 7px; background-color: #b73958; font-weight: bold; color: white; border: 1px solid #661428;
}

.modal-wrapper { position: relative; z-index: 3; }
.modal {
	position: fixed;
	background: #fdfdfd;
	top: 30%;
	left: 50%;
	transform: translate(-50%,-30%);
	padding: 20px;
	width: 400px;
	max-width: 90%;
	max-height: 80%;
	border-radius: 10px;
	border: 2px solid lightgray;
	display: flex;
	flex-direction: column;
}
.modal>div { flex-shrink: 10; overflow-y: auto; }
.modal .button-line { text-align: center; flex-grow: 0; flex-shrink: 0; }
.modal .button-line button { cursor: pointer; border: 1px solid lightgray; border-radius: 10px; padding: 4px 12px; display: inline-block; margin: 10px; min-height: 32px; }