@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-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;
    max-height: 29px;
}

.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;
            }

.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;
        }

.btn-main-menu {
    display: block;
    border: 2px solid #c76bb0;
    border-radius: 10px;
    padding: 15px;
    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: 16px;
        color: #fff;
    }

    .btn-main-menu p {
        font-size: 20px;
        font-weight: 500;
        text-transform: uppercase;
        margin: 10px 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;
    }