@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;800&display=swap');
html,body {height: 100%;}
body {
	font-family: 'Rubik', sans-serif !important;
	background: rgb(131,58,180);
	background-image: url('../images/bg-1.jpg');
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
}

.navbar-dark {
    background: linear-gradient(90deg, rgba(7,0,75,1) 0%, rgba(42,0,150,1) 39%, rgba(112,0,136,1) 100%);
}
.navbar-brand img.logo-cliente {
    width: auto;
    height: 39px;
}

.form-signin {
  width: 100%;
  max-width: 330px;
  padding: 15px;
  margin: auto;
}

.form-signin .checkbox {font-weight: 400;}
.form-signin .form-floating:focus-within {z-index: 2;}

.form-signin input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.plano-fidelidade {
  border-bottom: 1px solid #caa56a;
  background: rgb(118,14,166);
  background: linear-gradient(180deg, rgba(118,14,166,1) 0%, rgba(67,9,121,1) 35%, rgba(188,0,255,1) 100%);
}
.banner-fidelidade {
  border: 1px solid #000;
  background: rgb(118,14,166);
  color: #fff;
  background-image: url('../images/banner-fidelidade.jpg');
}
.banner-fidelidade .btn-fidelidade {
  background: linear-gradient(180deg, rgba(118,14,166,1) 0%, rgba(67,9,121,1) 35%, rgba(188,0,255,1) 100%);
  color: #fff;
  border: 2px solid #fff;
}

.slot-box {
    background: rgb(223,181,119);
    background: linear-gradient(180deg, rgba(223,181,119,1) 0%, rgba(180,133,74,1) 31%, rgba(250,222,157,1) 65%, rgba(153,114,71,1) 100%);
}

.slot-machine {
    background: rgb(0,0,0);
    background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(42,42,42,1) 45%, rgba(64,64,64,1) 78%, rgba(0,0,0,1) 100%);
    border: 3px solid #000;
}
.slot-machine .display-numero {
    background: rgb(223,181,119);
    background: linear-gradient(180deg, rgba(223,181,119,1) 0%, rgba(180,133,74,1) 31%, rgba(250,222,157,1) 65%, rgba(153,114,71,1) 100%);
}
.slot-machine .display-numero .inner-disp {
    background: rgb(223,223,223);
    background: linear-gradient(180deg, rgba(223,223,223,1) 0%, rgba(255,255,255,1) 31%, rgba(250,250,250,1) 47%, rgba(204,204,204,1) 100%);
    border: 1px solid #888;
}
.slot-machine .display-jogo .carousel-inner {
    border: 2px solid #424c82;
}
.slot-machine .display-fav {
    background: linear-gradient(180deg, rgba(223,181,119,1) 0%, rgba(180,133,74,1) 31%, rgba(250,222,157,1) 65%, rgba(153,114,71,1) 100%);
}
.slot-machine .display-fav .btn-fav {
    background: #fff;
    color: #919191;
}
.slot-machine .display-fav .btn-fav:hover,
.slot-machine .display-fav .btn-fav.active {
    background: #336c13;
    color: #ff0;
}
.slot-machine .carousel-caption {
    background: rgba(21, 0, 81, 0.85);
}
.slot-machine .carousel-caption a.btn-jogar {
    background-color: rgba(255,255,255,0);
    border: 2px solid #fff;
    color: #fff;
}
.slot-machine .carousel-caption a.btn-jogar:hover,
.slot-machine .carousel-caption a.btn-jogar:active {
    border: 2px solid #f00;
    background-color: #f00;
    color: #fff;
}

.btn-main-menu {
	display: block;
	border: 2px solid #c76bb0;
	border-radius: 10px;
	padding: 4px;
	text-align: center;
	text-decoration: none;
	background: #eee;
	margin: 0 0 10px 0;
	background: linear-gradient(180deg, rgba(118,14,166,1) 0%, rgba(67,9,121,1) 35%, rgba(188,0,255,1) 100%);
}
.btn-main-menu i {
	font-size: 32px;
	margin-top: 4px;
	color: #fff;
}
.btn-main-menu p {
	font-size: 14px;
	font-weight: 500;
	text-transform: uppercase;
	margin: 4px 0 0 0;
	padding: 0;
	color: #fff;
}

.btn-close-img {
	position: absolute;
  top: 7px;
  right: 10px;
  background-color: white;
  opacity: 1;
  color: black;
}
.btn-close-img:hover {
  background-color: red;
	opacity: 1;
  color: white !important;
}

.banner-acumulados {
    background: rgb(0,0,0);
    background: linear-gradient(180deg, rgba(9,4,98,1) 0%, rgba(92,36,170,1) 35%, rgba(64,9,176,1) 100%);
    border: 2px solid #000;
}
.banner-acumulados h3 {
  color: #fdd741;
}
.banner-acumulados p {
  color: #dbdbf5;
}
.banner-acumulados .jogo-box {
  background-color: #081d6d;
  border: 1px solid #ebcb8c;
  color: #fff;
}
.banner-acumulados a.btn-jogar {
    background-color: rgba(255,255,255,0);
    border: 1px solid #fff;
    color: #fff;
}
.banner-acumulados a.btn-jogar:hover,
.banner-acumulados a.btn-jogar:active {
    background-color: #f00;
    color: #fff;
}

.valor-acumulado {
    background: rgb(223,181,119);
    background: linear-gradient(180deg, rgba(223,181,119,1) 0%, rgba(180,133,74,1) 31%, rgba(250,222,157,1) 65%, rgba(153,114,71,1) 100%);
}
.valor-acumulado .inner-disp {
    background: rgb(223,223,223);
    background: linear-gradient(180deg, rgb(133, 185, 104) 0%, rgb(66, 125, 45) 31%, rgb(61, 132, 13) 100%);
    color: #fffc24;
}
.valor-acumulado .inner-disp span {
    color: #fff;
}

.ranking {
  display: block;
  background: rgb(0,0,0);
  background: linear-gradient(180deg, rgba(9,4,98,1) 0%, rgba(92,36,170,1) 35%, rgba(64,9,176,1) 100%);
  border-radius: 18px;
  border: 2px solid #530000;
	text-align: left;
	color: #fff;
}
.ranking h3 {
	font-size: 1.3rem;
	line-height: 1.3rem;
	padding: 15px 15px 6px;
}
ul.lista-ranking {
	list-style-type: none;
	padding: 0px 15px;
	margin-bottom: 9px;
}
ul.lista-ranking li {
	padding: 6px;
	border-bottom: 1px solid #df7c7c;
	height: 35px;
}
ul.lista-ranking li:last-child {border-bottom: none;}
ul.lista-ranking li.destaq {
	background-color: #0e0667;
	border-radius: 6px;
	border-bottom: none;
	margin-bottom: 4px;
}
ul.lista-ranking li i {
	float: left;
	margin: 4px 8px 0 0;
}
ul.lista-ranking li span.user {
	float: left;
	font-weight: 400;
}
ul.lista-ranking li span.premio {
	float: right;
	font-weight: 700;
}

footer {
    color: #fff;
    background: linear-gradient(180deg, rgb(7, 0, 75) 0%, rgb(59, 19, 164) 100%);
}
footer .footer-line {
    background: linear-gradient(90deg, rgba(223,181,119,1) 0%, rgba(180,133,74,1) 31%, rgba(250,222,157,1) 65%, rgba(153,114,71,1) 100%);
}
footer a {
    text-decoration: none;
    color: #946eff;
    font-size: 14px;
}
footer a:hover {color: #fff;}