@font-face {
  font-family: "Storm";
  src: url("../fontes/Storm Gust.otf") format("opentype");
}

@media (min-width: 768px) {
  html{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  body{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}

body {
  /*background-color: rgb(25, 17, 41);*/
  background-color: #0c1a26;
  display: flex;
  flex-direction: column;
  max-width: 850px;
}

main {
  flex: 1;
  color: #fff;
  max-width: 850px;
  overflow: hidden;
  overflow-y: scroll;
  position: relative;
}

/* esconder o spin dos campos numéricos */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* fim - esconder o spin dos campos numéricos */

::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
  background: rgb(25, 17, 41);
}

::-webkit-scrollbar-thumb {
  background: #888;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

:root {
  --bs-btn-close-color: #fff;
}

.headerFixo {
  border-bottom: #555 1px solid;
  height: 60px;
  background-color: #06111ae3;
  width: 100%;
  box-shadow: #fff2 0px 3px 8px;
}

.headerFixo div.logo a {
  text-decoration: none;
  color: white;
  font-size: 30px;
  font-family: "Storm";
}

.headerFixo div.logo img {
  width: 100%;
  max-width: 75px;
}


.headerFixo div.menu {
  font-size: 18pt;
  margin-right: 5px;
  text-decoration: none;
  color: #e5e9ec;
  margin-bottom: 5px;
}

div.saldo {
  border-radius: 5px;
  background-color: #ffffff20;
  min-width: 100px;
  font-size: 10px;
  font-weight: 600;  
}

.headerFixo div.menu div.saldo div.saldoNormal {
  font-size: 10pt;
}

.headerFixo div.menu div.saldo div.saldoSacavel {
  font-size: 8pt;
}

.headerFixo div.menu div.saldo a {
  background-color: #01ac66 !important;
  font-size: 12pt;
}


.headerFixo div.menu span {
  font-size: 14px;
}

.headerFixo i {
  font-size: 22pt;
}

.menu a {
  text-decoration: none;
}

.menu li {
  border-top: #0c1a26 solid 1px;
  border-bottom: #0c1a26 solid 1px;
}

.menu li:hover {
  background-color: #1c2730;
  text-shadow: #ffffff7d 4px 4px 10px
}

.menu li a {
  color: #e3e7ef;
  display: block;
  padding-left: 15px;
  height: 70px;
  line-height: 70px;
  font-size: 20pt;
}

.menu li svg {
  color: #e3e7ef;
  width: 30px;
  height: 30px;
  margin-right: 10px;
  position: relative;
  top: -3px;
}

.menu li path {
  fill: #32bcad;
}

.menu li:hover path {
  fill: #f2c53d;
}

.menu ul {
  list-style-type: none;
  padding-inline-start: 0px;
}

.carrinho.badge, .notificacoes.badge {
  background-color: rgb(170, 55, 55);
  font-size: 0.55em;
  border-radius: 50%;
  position: absolute; 
  left: 15px; 
  top: -1px
}



.menu.carrinho {
  cursor: hand;
}
.menu.notificacoes {
  cursor: hand;
}

.removeCarrinhoIcon {
  cursor: pointer;
  color: rgb(192, 66, 66);
  font-size: 30px;
}

.subheader {
  width: 300px;
  background-color: rgb(4, 1, 10);
  color: rgb(200, 235, 206);
}

.depositar {
  width: 400px;
}

.menu.offcanvas {
  background-color: #0c1a26;
  color: #e3e7ef;
  border-left: #32bcad38 1px solid;
  box-shadow: #000 5px 5px 15px;
}

@media (max-width: 768px) {
  .menu.offcanvas {
    width: 100%;
  }
}

.menu.offcanvas div.offcanvas-body {
  padding: 20px 0px 0px 0px;
}

.menu.offcanvas div.offcanvas-header {
    border-bottom-right-radius: 30px;
    background-color: #32bcad;
    color: #0f0505;
    box-shadow: #000000 5px 5px 12px;
}

.carrinho.offcanvas {
  background-color: #0c1a26;
  color: #e3e7ef;
  box-shadow: #000 -5px 5px 10px;
}

.notificacoes.offcanvas {
  background-color: #0c1a26;
  color: #e3e7ef;
  box-shadow: #000 -5px 5px 10px;
}

.notificacoes.offcanvas div.offcanvas-header {
    border-bottom-right-radius: 30px;
    background-color: #32bcad;
    color: #0f0505;
    box-shadow: #000000 5px 5px 12px;
}

.notificacoes.offcanvas div.offcanvas-body {
  padding: 20px 0px 0px 0px;
}

@media (max-width: 768px) {
  .carrinho.offcanvas {
    width: 100%;
  }
}

.carrinho.offcanvas div.offcanvas-header {
    border-bottom-right-radius: 30px;
    background-color: #32bcad;
    color: #0f0505;
    box-shadow: #000000 5px 5px 12px;
}

.carrinho.offcanvas div.offcanvas-body {
  padding: 20px 0px 0px 0px;
}

.irPagamento button {
  background-color: #198754;
  color: #fff;
  border-radius: 0px;
}

.irPagamento button:hover {
  background-color: #16ac66;
}

/** Recarga de valores **/

.recargapixconteudo {
  max-width: 600px;
  width: 100%;
}

.recargapix div.lista div.item {
  width: 160px;
  height: 100px;
  font-size: 25pt;
  color: #f2c53d;
  border: #555 solid 1px;
  border-radius: 10px;
  cursor: pointer;
}

.recargapix div.lista div.item:hover {
  filter: drop-shadow(0px 0px 3px #ffd900);
}

.recargapix div.head {
  color: #e3e7ef;
  font-size: 30pt;
}

.recargapix div.lista div.item.selected {
  filter: drop-shadow(0px 0px 3px #ffd900);
  background-color: #ffd90010;
}

.recargapix button {
  background-color: #f5d780;
  color: #1c2730;
  font-size: 16pt;
}

.recargapix button:hover {
  background-color: rgb(209, 193, 143);
  color: #282c30;
  font-size: 16pt;
}

.recargapix input {
  border: #01ac66 solid 1px;
  border-radius: 10px;
  border-color: #01ac66;
  background-color: #0c1a26;
  color: #f5d780;
  font-size: 16pt;
}

.pagamentoPendente button {
  color: #e3e7ef;
  font-size: 20pt;
  font-weight: 500;
}

.pagamentoPendente path {
  fill: #e6eef5;
}

.pagamentoPendente input {
  background-color: #0c1a26;
  border: #56b83f solid 1px;
  color: #e3e7ef;
  height: 30px;
  width: 100%;
  text-align: center;
}

.pagamentoPendente img.qrcode {
  border: #1c2730 solid 1px;
}

.pagamentoPendente img.logopix {
  width: 300px;
  text-align: center;
}

.pagamentoPendente div.texto {
  color: #e3e7ef;
  font-weight: 600;
  text-align: center;
}

.pagamentoPendente div.head {
  color: #f5e16e;
  font-size: 24pt;
}



/** fim recarga de valores */

/** Rodapé **/
footer {
  border-top: #555 1px solid;
  color: #555;
  font-size: 10pt;
}

footer i {
  font-size: 16pt;
}

footer i:hover {
  color: #cccccc;
  cursor: hand;
}

/** Rodapé - Fim **/



/** Lista de Jogos **/

.jogoVerde {
  background-color: #47a4471c !important;
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 1em black, 0 0 0.2em black;
}
.btn.jogoVerde {
  background-color: #47a447 !important;
}

.jogoAmarelo {
  background-color: #99985e1c !important;
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 1em black, 0 0 0.2em black;
}
.btn.jogoAmarelo {
  background-color: #99985e !important;
}
.jogoRoxo {
  background-color: #5863db1c !important;
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 1em black, 0 0 0.2em black;
}
.btn.jogoRoxo {
  background-color: #5863db !important;
}
.jogoVermelho {
  background-color: #f062621c !important;
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 1em black, 0 0 0.2em black;
}
.btn.jogoVermelho {
  background-color: #f06262 !important;
}

.btn.bordaAmarela{
  padding: 0px;
  padding-right: 3px;
  border-bottom-left-radius: 25px;
  border-top-left-radius: 25px;
}

.btn.bordaAmarelaLeft{
  padding: 0px;
  padding-right: 3px;
  border-bottom-right-radius: 25px;
  border-top-right-radius: 25px;
  font-size: 11px;
}


.btn.bordaAmarela:hover, .btn.bordaAmarelaLeft:hover{
  border-radius: 25px;
}

.btn.bordaAmarela img{
  width: 32px;
  position: relative;
  left: -1px;
}

.btn.bordaAmarelaLeft img{
  width: 32px;
  position: relative;
  left: 3px;
}

.jogos{
  gap: 8px;
}
.jogos .jogo {
  width: 49.5%;
  height: 370px;
  background-color: #00000070;
  cursor: pointer;
  padding: 3px;
  border-radius: 5px;
  box-shadow: rgba(0, 0, 0, 0.64) 0px 3px 8px;
  color: white;
  border: 1px solid #ffffff2b;
}

.jogos .jogo.disabled{
  filter: grayscale(1);
  pointer-events: none;
  cursor: not-allowed;
}
.jogos .jogo.bicho table {
  font-size: 8pt;
  font-weight: 700;
}

.jogos .jogo.bicho table td {
  padding: 1px;
}

@media (max-width: 768px) {
  .jogos .jogo {
    width: 100%;
    height: 100%;
    margin-left: 3px;
    margin-right: 3px;
  }
}

.jogo .premiacao{
  color: white;
  font-weight: 700;
  font-size: 20px;
  font-family: "Galindo", serif;
  padding: 5px;
  border: #fff4 solid 1px;
  margin-bottom: 5px;
  border-radius: 3px;
  background-image: url('../img/banner/fundo_premio.png');
  background-size: cover;
  text-shadow: 1px 1px 2px black, 0 0 1em black, 0 0 0.2em black;
}

.jogo .premiacao.instantaneo{
  background-image: none;
  background-size: auto;
  height: 100%;
}

.jogo.bicho.jogoVermelho.instantaneo{
  background-image: url('../img/banner/instantaneo.gif');
}

.premiacaoValorInstantaneo{
  animation: shakeRotate 2s ease 0s infinite normal forwards;
}

.premiacaoValorAnimacao{
  animation: jelloVertical 2s ease 0s infinite normal forwards;
}

@keyframes shakeRotate {
	0%,
	100% {
		transform: rotate(0deg);
		transform-origin: 50% 50%;
	}

	10% {
		transform: rotate(8deg);
	}

	20%,
	40%,
	60% {
		transform: rotate(-10deg);
	}

	30%,
	50%,
	70% {
		transform: rotate(10deg);
	}

	80% {
		transform: rotate(-8deg);
	}

	90% {
		transform: rotate(8deg);
	}
}

@keyframes jelloVertical {
	0% {
		transform: scale3d(1, 1, 1);
	}

	30% {
		transform: scale3d(0.75, 1.25, 1);
	}

	40% {
		transform: scale3d(1.25, 0.75, 1);
	}

	50% {
		transform: scale3d(0.85, 1.15, 1);
	}

	65% {
		transform: scale3d(1.05, 0.95, 1);
	}

	75% {
		transform: scale3d(0.95, 1.05, 1);
	}

	100% {
		transform: scale3d(1, 1, 1);
	}
}

.premiacao.instantaneo div{
  display: table;
  background-color: #000000c9;
  padding: 3px;
}

.jogo .premiacao .valor{
  color: yellow;
  font-size: 60px;
  line-height: 45px;
}

.jogo .top {
  background-color: #ccc1;
  height: 40px;
  font-weight: 600;
  box-shadow: rgba(91, 128, 96, 0.64) 0px 0px 6px;
}

.jogos a {
  text-decoration: none;
}


.resultado {
  font-size: 10pt;
  color: #ddd;
  border-radius: 5px;
  padding: 5px;
  border-top: 2px solid #fff3;
}

.resultado div.concurso tt,
div.data tt,
div.sorteados tt {
  font-weight: 900;
  color: #fff;
}

.lista{
  display: inline;
  gap: 1px
}

.lista .numero{
  border-radius: 50%;
  border: none;
  width: 25px;
  height: 25px;
  background-color: #2e65c9;
  text-align: center;
  box-shadow: inset #ffffff 0px 1px 1px 0px;
  font-family: 'Galindo', serif;
  color: white;
  font-weight: 500;
  line-height: 25px;
}
.jogoVerde .lista .numero{
  background-color: #47a447;
}
.jogoAmarelo .lista .numero{
  background-color: #47a447;
}
.jogoRoxo .lista .numero{
  background-color: #47a447;
}

.lista .numero:after {
  content: " ";
  display: block;
  height: 100%;
  width: 100%;
  position: relative;
  bottom: 34%;
  background-color: #000;
  border-radius: 500px;
  filter: blur(6px);
  transform-origin: center center;
  transform: scaleY(0.2) scaleX(0.7);
  z-index: -2;
}

.resultado .titulo{
  background-color: #0002;
  border: #5555 solid 1px;
  text-align: center;
}

.banner-resultados {
  width: 100%;
  overflow: hidden;
  background-color: #031263ad;
  padding: 10px;
  box-sizing: border-box;
}

.banner-resultados .result {
  font-size: 1.2em;
  text-align: center;
}

.sessao {
  background-color: #fff1;
  font-weight: 600;
  border-bottom: 3px solid #ffffff26;
  font-family: 'Galindo', serif;
  letter-spacing: 3px;
  font-size: 24pt;
}

/** Lista de Jogos - Fim **/


.voltar{
  text-shadow: 1px 1px 2px black, 0 0 1em black, 0 0 0.2em black;
}


/** mensagens de notificação **/
.alertify-notifier .ajs-message.ajs-error {
  border: none;
  border-radius: 8px;
}

.ajs-frameless div.ajs-header{
  background-color: transparent !important;
}
.ajs-frameless div.ajs-dialog {
  background-color: transparent !important;
}
.alertify .ajs-commands button.ajs-close {
  background-image: none;
  margin: 0px;
  padding: 0px;
}
.alertify .ajs-commands button.ajs-close::before {
  position: absolute;
  left: 10px;
  top: -15px;
  content: "\00d7"; /* This will render the 'X' */
  font-size: 30px;
  font-weight: 600;
  color: rgba(104, 5, 5, 0.895);
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.531), 0 0 1em rgba(0, 0, 0, 0.531), 0 0 0.1em rgba(0, 0, 0, 0.531);
}
.alertify .ajs-header {
  padding: 10px;
  /*background-color: #0c1a26d4;
  color: #fff;*/
}
.alertify .ajs-footer{
  padding: 0px;
}

/** mensagens de notificação - fim **/

/* neve natalina - início*/
@-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%{-webkit-transform:translateX(0px);transform:translateX(0px)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}100%{-webkit-transform:translateX(0px);transform:translateX(0px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%{transform:translateX(0px)}50%{transform:translateX(80px)}100%{transform:translateX(0px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}
.snowflake {
  color: #fff;
  font-size: 1em;
  font-family: Arial;
  text-shadow: 0 0 1px #000;
  filter: blur(2px);
}
/*neve natalina - fim*/


.sombra{
  box-shadow: #000000 0px 3px 8px;
}

.vidro{
  background: rgba(255, 255, 255, 0.18);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(2.4px);
  -webkit-backdrop-filter: blur(3.4px);  
}

.pagination {
  background-color: #fffffff9 !important;
  padding: 2px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.pagination li.active a{
  border: 1px solid #dee2e6;
  background-color: #2c4169;
}

.grid{
  border-top: 5px #3c5ccf solid;
  overflow: auto;
  background-color: #fffe;
  border-radius: 5px;
}

.grid nav{
  height: 39px;
}

.grid .header{
  margin-bottom: 0px !important;
  color: #000;
  width: auto;
}

.alertify-notifier .ajs-message.ajs-success {
  color: #fff;
  border-radius: 15px;
  padding: 2px;
  border: solid 1px #262c3a;
}

.alertify-notifier .ajs-message.ajs-success {
  background: rgb(71 138 165 / 95%);
  text-shadow: -1px -1px 0 rgba(0, 0, 0, .5);
}