* {
	font-family: 'Arial', sans-serif;
	padding: 0; margin: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

html { scroll-behavior: smooth; }

body { background-color: #FAFAFA; }

h1, h2, h3 { margin: auto; text-align: center; padding: 8px; }
h3.titulo {background-color: lightgray;}
h1 { font-size: 24px; }
h1.tituloPag { border-bottom: 1px solid white; display: inline-table; }
h2 { font-size: 22px; }

p { text-align: justify; margin-bottom: 8px; line-height: 1.5; font-size: 16px; }

a { text-decoration: none; color: black; }


input, button, select {
	padding: 5px 10px; font-size: 18px; border: 1px solid darkblue; outline:none;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
}
input[type=text], input[type=password] { width: 100%; }
input[type=number] { width: 120px; }
button { background-color: darkblue; cursor: pointer; color: white; font-size: 18px; }
button:hover { background-color: #0f0f5a; color: white; }
.tituloInput {font-size: 14px; margin-top: 10px; text-align: left;}

.btnVermelho {background-color: red; color: white; border: 0px}
.btnVermelho:hover {background-color: darkred;}

.btnVerde {background-color: darkgreen; color: white; border: 1px solid darkgreen}
.btnVerde:hover {background-color: green;}

.btnAzul {background-color: darkblue; color: white; border: 1px solid darkblue}
.btnAzul:hover {background-color: #0B0B3B;;}

.btnCinza {background-color: grey; color: black; border: 1px solid gray;}
.btnCinza:hover {background-color: #aaaaaa; color: black;}

.btnCinzaClaro {background-color: #FAFAFA;}

.btnBorda {background-color: transparent; border: 1px solid darkblue; color: black;}

.btn:hover {background-color: lightgray; color: black;}

.fundoAzul {background-color: darkblue; color: white; width: 100%;}
.fundoCinzaClaro {background-color: #d1d1d1;}
.fundoBranco {background-color: white;}

.divRegrasBingo {
	width: 80%; margin: auto;
}

.circulo {
	-moz-border-radius: 45%;
	-webkit-border-radius: 45%;
	border-radius: 45%;
}

.bordaRedonda {
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
}

.bordaRedondaSup {
	-moz-border-radius: 8px 8px 0px 0px;
	-webkit-border-radius: 8px 8px 0px 0px;
	border-radius: 8px 8px 0px 0px;
}

.bordaRedondaInf {
	-moz-border-radius: 0px 0px 8px 8px;
	-webkit-border-radius: 0px 0px 8px 8px;
	border-radius: 0px 0px 8px 8px;
}

.bordaRedondaEsq {
	-moz-border-radius: 8px 0px 0px 8px;
	-webkit-border-radius: 8px 0px 0px 8px;
	border-radius: 8px 0px 0px 8px;
}

.sombraPreta {
    -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.77);
    -moz-box-shadow:    0px 0px 5px rgba(0, 0, 0, 0.77);
    box-shadow:         0px 0px 5px rgba(0, 0, 0, 0.77);
}


.sombraBranca {
    -webkit-box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.77);
    -moz-box-shadow:    0px 0px 5px rgba(255, 255, 255, 0.77);
    box-shadow:         0px 0px 5px rgba(255, 255, 255, 0.77);
}

.bordaCinza {border: 1px solid grey;}
.bordaAzul {border: 1px solid darkblue;}
.bordaVerde {border: 1px solid green;}
.bordaPreta {border: 1px solid black;}

.bordaSupAzul {border-top: 8px solid darkblue;}

.col4 { width: 22%; padding: 0px; text-align: center; margin: auto; }

.ladoALado {display: inline-table; vertical-align: top;}
.margem {margin: 5px;}
.margem2 {margin: 2px;}
.margem10 {margin: 10px;}
.margemAuto {margin: auto;}

.verticalTop {vertical-align: top;}
.gap10 {gap: 10px;}

.dpFlex {display: flex;}
.dpFlexCentro {align-items: center;}
.dpFlexJustCentro {justify-content: center;}
.dpFlexSpaceBetween {justify-content: space-between;}

.linhaBranca {border-top: 1px solid white;}
.linhaCinza {border-top: 1px solid lightgray;}
.barraCinza {border-left: 1px solid lightgray;}
.padding {padding: 5px;}
.padding8 {padding: 8px;}
.padding20 {padding: 20px;}
.padding5-10 {padding: 5px 10px;}
.centro {text-align: center;}
.negrito {font-weight: bold;}
.esquerdo {text-align: left;}
.direito {text-align: right;}
.bola {
	-moz-border-radius: 47%;
	-webkit-border-radius: 47%;
	border-radius: 47%;
}
.verdeClaro1 {background-color: #A9F5BC; color: black;}
.verdeClaro2 {background-color: #01DF74; color: black;}
.verde {background-color: green; color: white;}
.vermelho {background-color: red; color: white;}
.vermelhoClaro {background-color:#F5A9A9;}
.azul {background-color: darkblue; color: white;}
.cursorMao {cursor: pointer;}
.cursorOff {cursor: no-drop;}

.txtCinza {color: gray;}
.txtVermelho {color: red;}
.txtVerde {color: green;}
.txtBranco {color: white;}


.sucesso {background-color: green; color: white; padding: 10px 15px;}
.erro {background-color: red; color: white; padding: 10px 15px;}
.bloqueado {background-color: #F5A9A9;}
.alerta {background-color: orange; color: black;}
.menuClicado {background-color: #0B0B3B; color: white;}

.bloco {width: auto;}

#cartela {max-height: 230px; max-width: 260px; overflow: auto;}

#tabelaCartelas {min-height: 500px;}

.blocoCentro {width: 100vw; height: 100vh; display: flex; flex-direction: row; justify-content: center; align-items: center;}
.tituloBloco {background-color: darkblue; color: white; font-size: 18px;}

.mostrarBola {width: auto; height: auto; background-color: white; position: fixed; top: 10%; bottom: 10%; left: 5%; right: 5%; z-index: 99999999;}


.barraSuperior {background-color: darkblue; color: white; font-size: 22px; height: auto;}
.rodape {background-color: darkblue; color: white; font-size: 24px; width: 100%; position: relative; bottom: 0px; height: 100px;}
.barraMeio {margin: 10px auto; min-height: 500px; height: auto; text-align: center;}

.barraRodape {width: 100%; height: auto; background-color: darkblue;}

#menu {background-color: darkblue; position: fixed; top: 0px; right: 0px; width: 180px; height: 100%; z-index: 99999999; color: white;}

#mascara, #mascaraSemClick {background-color: black; opacity: 0.7; display: none; width: 100%; height: 100%; position: fixed; z-index: 9999999;}
#janelaDialogo, #divPagamentoPIX {background-color: #FAFAFA; min-width: 350px; width: auto; height: auto; max-height: 96%; z-index: 99999999999; position: fixed; top: 50%; left: 50%; display: none; transform: translate(-50%, -50%);}

.barraTituloJanela {width: 100%;}
.conteudoJanela {width: 100%; background-color: #FAFAFA;}
.btnXFechar {position: absolute; right: -6px; top: -8px; cursor: pointer;}


nav ul li {padding: 8px 10px; text-align: left; text-decoration: none; cursor: pointer; list-style: none; color: white;}
nav ul li:hover {background-color: black;}


table {width: 100%; border-spacing: 0px; border: 1px solid darkblue;}
table thead tr th {background-color: darkblue; color: white; text-align: center; border: 1px solid darkblue; padding: 3px 5px;}
table tbody tr td {border: 1px solid darkblue; padding: 3px 5px;}


/*SVG*/
.svg15 { height: 15px; width: 15px; text-align: center; vertical-align: top; }
.svg20 { height: 20px; width: 20px; text-align: center; vertical-align: top; }
.svg25 { height: 25px; width: 25px; text-align: center; vertical-align: top; }
.svg30 { height: 30px; width: 30px; text-align: center; vertical-align: top; }
.svg50 { height: 50px; width: 50px; text-align: center; vertical-align: top; }
.svg100 { height: 100px; width: 100px; text-align: center; vertical-align: top; }
.svg130 { height: 130px; width: 130px; text-align: center; vertical-align: top; }
.svgBranco { filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%); }
.svgPreto { filter: invert(0%) sepia(4%) saturate(20%) hue-rotate(334deg) brightness(104%) contrast(100%); }
.svgVerde { filter: invert(64%) sepia(36%) saturate(6501%) hue-rotate(68deg) brightness(93%) contrast(98%); }
.svgVermelho { filter: invert(24%) sepia(95%) saturate(6805%) hue-rotate(356deg) brightness(100%) contrast(120%); }
.svgAzul { filter: invert(9%) sepia(98%) saturate(6525%) hue-rotate(248deg) brightness(58%) contrast(115%); }
.svgAmarelo { filter: invert(71%) sepia(60%) saturate(509%) hue-rotate(3deg) brightness(102%) contrast(102%); }



@media (max-width: 1000px) {
    .divRegrasBingo {width: 95%;}
}

@media (max-width: 778px) {
	#janelaDialogo, .col4 {width: 96%;}
}

@media (max-width: 667px) {
	.bloco {width: 96%;}
}