@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

@font-face {
    font-family: 'Roboto-Black';
    src: url("fonts/Roboto-Black.ttf");
}

@font-face {
    font-family: 'Roboto-BlackItalic';
    src: url("fonts/Roboto-BlackItalic.ttf");
}

@font-face {
    font-family: 'Roboto-Bold';
    src: url("fonts/Roboto-Bold.ttf");
}

@font-face {
    font-family: 'Roboto-BoldItalic';
    src: url("fonts/Roboto-BoldItalic.ttf");
}

@font-face {
    font-family: 'Roboto-Italic';
    src: url("fonts/Roboto-Italic.ttf");
}

@font-face {
    font-family: 'Roboto-Light';
    src: url("fonts/Roboto-Light.ttf");
}

@font-face {
    font-family: 'Roboto-LightItalic';
    src: url("fonts/Roboto-LightItalic.ttf");
}

@font-face {
    font-family: 'Roboto-Medium';
    src: url("fonts/Roboto-Medium.ttf");
}

@font-face {
    font-family: 'Roboto-MediumItalic';
    src: url("fonts/Roboto-MediumItalic.ttf");
}

@font-face {
    font-family: 'Roboto-Thin';
    src: url("fonts/Roboto-Thin.ttf");
}

@font-face {
    font-family: 'Roboto-ThinItalic';
    src: url("fonts/Roboto-ThinItalic.ttf");
}

@font-face {
    font-family: 'Roboto-Regular';
    src: url("fonts/Roboto-Regular.ttf");
}


html, body {
    font-family: Roboto-Regular, Roboto-Bold, Arial, sans-serif;
    font-size: 12px;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    color: #FFF !important;
    line-height: normal !important;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0 !important;
    margin: 0 !important;
    background-color: #6826BC !important;
}

.base {
    position: relative;
    width: 100vw;
    height: 100vh;
    justify-content: center;
    align-items: center;
    background-image: url("../img/fndInicio.jpg");
    background-position: center;
    background-size: cover;
    margin: 0 !important;
    background-color: #6826BC !important;
    /*border: 1px dotted #fff;*/
}

.main {
    padding: 0 !important;
    margin: 0 !important;
    background-color: #6826BC !important;
}

.page {
    position: relative;
    padding: 0 !important;
    margin: 0 !important;
    background-color: #6826BC !important;
}

.logoIni {
    position: relative;
    width: 42.59%;
    height: 27.78%;
    left: 32%;
    top: 5%;
    justify-content: center;
    align-items: center;
    background-image: url("../img/logoInicio.png");
    background-position: center;
    background-size: cover;
}

#fundo {
    position: relative;
    background-image: url("../img/fndInicio.jpg");
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100%;
    border: 1px solid #ffffff;    
}

#login {
}

#registrar {
}

#senha {
}

.versao {
    width: 100vw;
    font-size: 0.7em;
    text-align: right;
    padding-right: 5px;
    position: absolute;
    top: 5px;
}

.pulse {
    animation: pulse 0.7s infinite;
    margin: 0 auto;
    display: table;
    margin-top: 50px;
    animation-direction: alternate;
    -webkit-animation-name: pulse;
    animation-name: pulse;
}

.btnEntrar {
    font-weight: bolder;
    font-size: 120%;
    color: #6826bc;
}

.btnRegistrar {
    font-weight: bolder;
    font-size: 120%;
    color: #5def72;
}

@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale(1);
        -webkit-filter: brightness(100%);
    }

    100% {
        -webkit-transform: scale(1.1);
        -webkit-filter: brightness(200%);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
        filter: brightness(100%);
    }

    100% {
        transform: scale(1.1);
        filter: brightness(200%);
    }
}

.loading {
    animation: pulse 0.7s infinite;
    margin: 0 auto;
    display: table;
    animation-direction: alternate;
    -webkit-animation-name: pulse;
    animation-name: pulse;
}

@-webkit-keyframes loading {
    0% {
        -webkit-transform: scale(1);
        -webkit-filter: brightness(100%);
    }

    100% {
        -webkit-transform: scale(1.1);
        -webkit-filter: brightness(200%);
    }
}

@keyframes loading {
    0% {
        transform: scale(1);
        filter: brightness(100%);
    }

    100% {
        transform: scale(1.1);
        filter: brightness(200%);
    }
}


/*****************************************************/
/*** Customização do MudBlazor                     ***/
/*****************************************************/
.mud-paper {
    padding: 2px;
}

@keyframes slide {
    0% {
        transform: translateX(-25%);
    }

    100% {
        transform: translateX(25%);
    }
}

.mud-wasm {
    animation: slide 3s ease-in-out infinite alternate;
    background-image: linear-gradient(-60deg,#9000ff 50%,#6826BC 50%);
    bottom: 0;
    left: -50%;
    opacity: .5;
    position: fixed;
    right: -50%;
    top: 0;
    z-index: -1
}

.mud-wasm-cont {
    left: 50%;
    padding: 10vmin;
    position: fixed;
    text-align: center;
    top: 50%;
    transform: translate(-50%,-50%)
}

.mud-input > input.mud-input-root, div.mud-input-slot.mud-input-root {
    color: #FFF !important; /*muda a cor do texto digitado*/
}

.mud-input-label-text {
    color: #FFF !important;
   /* font-size: 90% !important;*/
}

.mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol {
    color: #FFF !important; /*muda a cor do texto antes do foco*/
    /*font-size: 90% !important;*/
}

    .mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol.mud-input-error {
        color: #FFF !important; /*muda a cor do texto qd dá erro*/
        /*font-size: 90% !important;*/
    }

.mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol {
    color: #FFF !important; /*muda a cor do label*/
    /*font-size: 90% !important;*/
}

.mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol {
    color: #FFF !important;
}

.mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-error {
    color: #FFF !important;
}

.mud-input-helper-text {
    color: #FFF !important;
}

.mud-input-required {
    color: #FFF !important;
}

.mud-input-input-control {
    color: #FFF !important;
}

.mud-input-root-text {
    color: #000 !important;
}

.mud-input.mud-input-underline:before {
    border-bottom: 1px solid #FFF;
}

.mud-input.mud-input-underline:after {
    border-bottom: 2px solid #FFF;
}

.mud-input.mud-input-underline.mud-input-error:after {
    border-bottom-color: #FFF !important;
}

.mud-input-helper-text.mud-input-error {
    color: #000 !important;
}

.mud-input-underline:hover {
    border-color: white !important;
}

/*mud-input mud-input-text mud-input-underline mud-shrink*/
.mud-input-underline {
    border-color: white !important;
}

.mud-expand-panel .mud-expand-panel-header {
    min-height: 20px !important;
    padding: 3px !important;
}

/*****************************************************/
/*** Página Principal                              ***/
/*****************************************************/
.logoPrincipal {
    height: 16.96%;
    width: 86.48%;
    margin-top: 2.73%;
    margin-left: 6.30%;
    background-image: url("../img/logoPrincipal.png");
    background-size: cover;
}
.topo {
    width: 100%;
    height: 7.26496%;
    left: 0;
    top: 0;
    right: 0;
    background-repeat: no-repeat;
    background-size: 100%;
    overflow: hidden;
    position: absolute;
}

.btnVoltar {
    width: 6.94444%;
    height: 3.20513%;
    left: 2.77778%;
    top: 1.28205%;
    background-image: url("../img/btnVoltar.png");
    background-repeat: no-repeat;
    background-size: 100%;
    overflow: hidden;
    position: absolute;
    cursor: pointer;
}

.btnAdd {
    width: 6.08148%;
    height: 2.99145%;
    left: 4%;
    top: 21.4%;
    background-image: url("../img/btnAdicionar.png");
    background-repeat: no-repeat;
    background-size: 100%;
    overflow: hidden;
    position: absolute;
    cursor: pointer;
}

.btnEmail {
    width: 6.94444%;
    height: 3.20513%;
    left: 90.27778%;
    top: 1.28205%;
    background-image: url("../img/btnEmail.png");
    background-repeat: no-repeat;
    background-size: 100%;
    overflow: hidden;
    position: absolute;
}

.boloes {
    width: 100%;
    height: 73.07692%;
    left: 0;
    top: 18.37607%;
    right: 0;
    background-image: url("../img/fndBoloes.jpg");
    background-repeat: no-repeat;
    background-size: 100%;
    overflow: hidden;
    position: absolute;
}

.titBoloes {
    width: 25.92593%;
    height: 3.41880%;
    left: 37%;
    top: 21.02564%;
    background-image: url("../img/titBoloes.png");
    background-repeat: no-repeat;
    background-size: 100%;
    overflow: hidden;
    position: absolute;
}

.tabBoloes {
    width: 94.44444%;
    height: 63%;
    left: 2.77778%;
    top: 26%;
    overflow: scroll;
    position: absolute;
    padding-left: 1%;
}

.fndBolao {
    width: 92.03704%;
    height: 16%;
    left: 0;
    top: 0;
    background-image: url("../img/fndBolaoG.png");
    background-repeat: no-repeat;
    background-size: 100%;
    overflow: hidden;
    position: relative;
}

.clubes {
    width: 100%;
    height: 84.18803%;
    left: 0;
    top: 7.26496%;
    right: 0;
    background-image: url("../img/fndClubes.jpg");
    background-repeat: no-repeat;
    background-size: 100%;
    overflow: hidden;
    position: absolute;
}


.titClubes {
    width: 25.92593%;
    height: 3.41880%;
    left: 37%;
    top: 9.91453%;
    background-image: url("../img/titClubes.png");
    background-repeat: no-repeat;
    background-size: 100%;
    overflow: hidden;
    position: absolute;
}

.tabClubes {
    width: 94.44444%;
    height: 73.07692%;
    left: 2%;
    top: 15.13675%;
    overflow: hidden;
    position: absolute;
    padding-left: 1%;
}

.fndClube {
    width: 90%;
    height: 18%;
    left: 0;
    top: 0;
    background-image: url("../img/fndClubes.png");
    background-repeat: no-repeat;
    background-size: 100%;
    overflow: hidden;
    position: relative;
}

.logoClube {
    width: 23.89078%;
    height: 77.77778%;
    left: 3%;
    top: 10.5%;
    background-repeat: no-repeat;
    background-size: 100%;
    overflow: hidden;
    position: absolute;
}

.txtClubeDesc {
    width: 61%;
    height: 35%;
    left: 30%;
    top: 12%;
    overflow: hidden;
    position: absolute;
    text-align: left;
    vertical-align: middle;
    font-size: 120%;
    padding-top: 2%;
}

.txtClubeEstr {
    width: 61%;
    height: 35%;
    left: 30%;
    top: 55%;
    overflow: hidden;
    position: absolute;
    text-align: left;
    vertical-align: middle;
    font-size: 120%;
    padding-top: 2%;
}

.Estrela {
    width: 8%;
    height: 53%;
    overflow: hidden;
}

.txtClubeBol {
    width: 17%;
    height: 25%;
    left: 80%;
    top: 61%;
    background-image: url("../img/qtBoloes.png");
    background-repeat: no-repeat;
    background-size: contain;
    overflow: hidden;
    position: absolute;
    text-align: center;
    padding-top: 1%;
    padding-right: 2%;
}
.btnPesqClube {
    width: 6.94444%;
    height: 4.16667%;
    left: 87.68519%;
    top: 10%;
    background-image: url("../img/btnLupaR.png");
    background-repeat: no-repeat;
    background-size: 100%;
    overflow: hidden;
    position: absolute;
    cursor: pointer;
}

.fichas {
    width: 24%;
    height: 4%;
    left: 72%;
    top: 1.6%;
    background-image: url("../img/fndFichas.png");
    background-repeat: no-repeat;
    background-size: 100%;
    overflow: hidden;
    position: relative;
}
.vlrFichas {
    width: 72%;
    left: 22%;
    margin-top: 3%;
    position: absolute;
    color: #fff;
    font-size: 120%;
    text-align: center;
}

.divBuyin {
    width: 35%;
    height: 100%;
    left: 1%;
    top: 0%;
    background-repeat: no-repeat;
    background-size: 97%;
    background-position: 12%;
    overflow: hidden;
    position: absolute;
    text-align: center;
}

.txtBolaoDesc {
    width: 61%;
    height: 35%;
    left: 36%;
    top: 0%;
    overflow: hidden;
    position: absolute;
    text-align: center;
    vertical-align: middle;
    font-size: 120%;
    padding-top: 2%;
}
.txtBolaoRegi {
    width: 61%;
    height: 25%;
    left: 36%;
    top: 35%;
    overflow: hidden;
    position: absolute;
    text-align: center;
    color: #ccc;
}
.txtBolaoPrem {
    width: 45%;
    height: 34%;
    left: 36%;
    top: 55%;
    background-image: url("../img/btnPremio.png");
    background-repeat: no-repeat;
    background-position: 0;
    background-size: contain;
    overflow: hidden;
    position: absolute;
    text-align: left;
    font-weight: bold;
    font-size: 130%;
    padding-top: 1%;
    padding-left: 10%;
}
.txtBolaoPart {
    width: 20%;
    height: 23%;
    left: 73%;
    top: 61%;
    background-image: url("../img/btnIndiv.png");
    background-repeat: no-repeat;
    background-size: contain;
    overflow: hidden;
    position: absolute;
    text-align: left;
    padding-top: 0.7%;
    padding-left: 6.5%;
}


.tpCor1 {
    background-image: url("../img/fndTipo1.png");
}

.tpCor2 {
    background-image: url("../img/fndTipo2.png");
}

.tpCor3 {
    background-image: url("../img/fndTipo3.png");
}

.tpCor4 {
    background-image: url("../img/fndTipo4.png");
}

.tpCor5 {
    background-image: url("../img/fndTipo5.png");
}

.tpCor6 {
    background-image: url("../img/fndTipo6.png");
}

.tpCor7 {
    background-image: url("../img/fndTipo7.png");
}

.titTipo {
    width: 100%;
    left: 0;
    top: 20%;
    color: #9d9dfd;
    font-weight: bold;
    font-size: 110%;
    overflow: hidden;
    position: absolute;
}
.buyTipo {
    width: 40%;
    left: 4%;
    top: 56%;
    font-weight: bold;
    font-size: 82%;
    overflow: hidden;
    position: absolute;
    color: #8b8b8b;
}
.vlrTipo {
    width: 55%;
    left: 45%;
    top: 50%;
    font-weight: bold;
    font-size: 150%;
    overflow: hidden;
    position: absolute;
    text-align: left;
}

.btnGtd {
    width: 70%;
    height: 27.77778%;
    left: 0%;
    top: 0%;
    padding-left: 7.04225%;
    background-image: url("../img/btnEmail.png");
    background-repeat: no-repeat;
    background-size: 100%;
    overflow: hidden;
}
.btnApst {
    width: 30%;
    height: 27.77778%;
    left: 0%;
    top: 0%;
    padding-left: 7.04225%;
    background-image: url("../img/btnEmail.png");
    background-repeat: no-repeat;
    background-size: 100%;
    overflow: hidden;
}

.rodape {
    width: 100%;
    height: 8.54701%;
    left: 0;
    top: 91.45299%;
    background-image: url("../img/rodape.jpg");
    background-repeat: no-repeat;
    background-size: 100%;
    overflow: hidden;
    position: absolute;
}

.btnClube {
    width: 6.94444%;
    height: 3.20513%;
    left: 5.09259%;
    top: 9.48718%;
    background-image: url("../img/btnClubes.png");
    background-repeat: no-repeat;
    background-size: 100%;
    overflow: hidden;
    position: absolute;
}
.btnLupa {
    width: 6.94444%;
    height: 3.20513%;
    left: 87.68519%;
    top: 9.48718%;
    background-image: url("../img/btnLupaR.png");
    background-repeat: no-repeat;
    background-size: 100%;
    overflow: hidden;
    position: absolute;
}
.qdBolao {
    width: 87.96296%;
    height: 12.39316%;
    background-image: url("../img/fndBolao.png");
    background-repeat: no-repeat;
    background-size: 100%;
    overflow: hidden;
    position: absolute;
}

/*****************************************************/
/*** Página Registro                               ***/
/*****************************************************/
.fndRegistro {
    width: 100%;
    height: 84.18803%;
    left: 0;
    top: 7.26496%;
    right: 0;
    background-image: url("../img/fndRegistro.jpg");
    background-repeat: no-repeat;
    background-size: 100%;
    overflow: hidden;
    position: absolute;
}

.tabRegBuyin {
    width: 36.5%;
    height: 22%;
    left: 2.77778%;
    top: 9%;
    overflow: hidden;
    position: absolute;
    padding-left: 1%;
}

.tabRegInfo {
    width: 56%;
    height: 22%;
    left: 41%;
    top: 9%;
    overflow: hidden;
    position: absolute;
    padding-left: 1%;
}


.fndCriar {
    width: 100%;
    height: 84.18803%;
    left: 0;
    top: 7.26496%;
    right: 0;
    background-image: url("../img/fndCriar.jpg");
    background-repeat: no-repeat;
    background-size: 100%;
    overflow: hidden;
    position: absolute;
}

.txtCriDes {
    width: 94%;
    height: 4%;
    left: 3%;
    top: 9.5%;
    overflow: hidden;
    position: absolute;
    font-size: 150%;
    font-weight: bold;
    text-align: center;
    color: #9d9dfd;
}

.tabCriDes {
    width: 95%;
    height: 77%;
    left: 2%;
    top: 12.5%;
    overflow: hidden;
    position: absolute;
    padding-left: 1%;
}

.obsCriDes {
    width: 90%;
    height: 22%;
    left: 5%;
    top: 68%;
    overflow: hidden;
    position: absolute;
    padding: 2%;
}


.tabRegRegra {
    width: 94%;
    height: 51%;
    left: 3%;
    top: 38%;
    overflow: hidden;
    position: absolute;
    padding-left: 1%;
}
.txtRegRegra {
    width: 94%;
    height: 4%;
    left: 3%;
    top: 34%;
    overflow: hidden;
    position: absolute;
    font-size: 150%;
    font-weight: bold;
    text-align: center;
    color: #9d9dfd;
}

.divBuyinReg {
    width: 80%;
    height: 40%;
    left: 11.5%;
    top: 2%;
    background-repeat: no-repeat;
    background-size: 97%;
    background-position: 12%;
    overflow: hidden;
    position: absolute;
    text-align: center;
}

.buyTipoReg {
    width: 80%;
    left: 5%;
    top: 54%;
    font-weight: bold;
    font-size: 82%;
    overflow: hidden;
    position: absolute;
    color: #8b8b8b;
    text-align: left;
}

.vlrTipoReg {
    width: 55%;
    left: 45%;
    top: 47%;
    font-weight: bold;
    font-size: 150%;
    overflow: hidden;
    position: absolute;
    text-align: left;
}
.txtBolaoRegIni {
    width: 100%;
    height: 30%;
    left: 0%;
    top: 42%;
    overflow: hidden;
    position: absolute;
    text-align: center;
    color: #ccc;
    font-size: 120%;
    font-weight: bold;
}

.btnBolaoReg {
    width: 100%;
    height: 25%;
    left: 0%;
    top: 70%;
    overflow: hidden;
    position: absolute;
    padding: 0 5% 0 5%;
}

.btnBolaoEnt {
    width: 60%;
    height: 25%;
    left: 0%;
    top: 70%;
    overflow: hidden;
    position: absolute;
    padding: 0 5% 0 5%;
}

.btnBolaoCan {
    width: 33%;
    height: 25%;
    left: 63%;
    top: 70%;
    overflow: hidden;
    position: absolute;
    padding: 0;
}


.txtBolaoRegNome {
    width: 100%;
    height: 15%;
    left: 0;
    top: 2%;
    overflow: hidden;
    position: absolute;
    text-align: center;
    font-weight: bold;
    font-size: 125%;
}
.txtBolaoRegMens {
    width: 100%;
    height: 10%;
    left: 0;
    top: 17%;
    overflow: hidden;
    position: absolute;
    text-align: center;
    color: #ccc;
    visibility: hidden;
}
.txtBolaoRegCron {
    width: 100%;
    height: 27%;
    left: 0;
    top: 27%;
    overflow: hidden;
    position: absolute;
    text-align: center;
    font-weight: bold;
    font-size: 300%;
    visibility: hidden;
}

.imgBolaoRegPart {
    width: 11.42857%;
    height: 13.24503%;
    left: 16%;
    top: 62%;
    background-image: url("../img/btnEntrada.png");
    background-repeat: no-repeat;
    background-size: contain;
    overflow: hidden;
    position: absolute;
}
.imgBolaoRegPrem {
    width: 11.42857%;
    height: 13.24503%;
    left: 61%;
    top: 62%;
    background-image: url("../img/btnPremiacao.png");
    background-repeat: no-repeat;
    background-size: contain;
    overflow: hidden;
    position: absolute;
}

.txtBolaoRegPart {
    width: 34%;
    height: 12%;
    left: 5%;
    top: 75%;
    color: #9d9dfd;
    overflow: hidden;
    position: absolute;
    text-align: center;
    font-size: 80%;
}
.txtBolaoRegPrem {
    width: 56%;
    height: 12%;
    left: 39%;
    top: 75%;
    color: #9d9dfd;
    overflow: hidden;
    position: absolute;
    text-align: center;
    font-size: 80%;
}

.vlrBolaoRegPart {
    width: 34%;
    height: 15%;
    left: 5%;
    top: 83%;
    overflow: hidden;
    position: absolute;
    text-align: center;
    font-weight: bold;
    font-size: 150%;
}
.vlrBolaoRegPrem {
    width: 56%;
    height: 15%;
    left: 39%;
    top: 83%;
    overflow: hidden;
    position: absolute;
    text-align: center;
    font-weight: bold;
    font-size: 150%;
}

/*****************************************************/
/*** Página Palpites                               ***/
/*****************************************************/
.fndTopoPalp {
    width: 100%;
    height: 7.26496%;
    left: 0;
    top: 7.26496%;
    right: 0;
    background-repeat: no-repeat;
    background-size: 100%;
    overflow: hidden;
    position: absolute;
}
.imgTopoPalp1 {
    background-image: url("../img/mnPalp1.jpg");
}
.imgTopoPalp2 {
    background-image: url("../img/mnPalp2.jpg");
}
.imgTopoPalp3 {
    background-image: url("../img/mnPalp3.jpg");
}
.imgTopoPalp4 {
    background-image: url("../img/mnPalp4.jpg");
}

.linRkg {
    background: -webkit-linear-gradient(#fff, #aaa);
    background: -o-linear-gradient(#fff, #aaa);
    background: -moz-linear-gradient(#fff, #aaa);
    background: linear-gradient(#fff, #aaa);
    color: #000;
    font-weight: bold;
    padding: 2px;
}

.fndPalpite {
    width: 100%;
    height: 76.92308%;
    left: 0;
    top: 14.5%;
    right: 0;
    background-image: url("../img/fndPalpites.jpg");
    background-repeat: no-repeat;
    background-size: 100%;
    overflow: hidden;
    position: absolute;
}
.mnPalp1 {
    width: 23%;
    height: 50%;
    left: 2%;
    top: 28%;
    overflow: hidden;
    position: absolute;
    text-align: center;
    font-weight: bold;
    font-size: 100%;
    color: #ccc;
    padding-top: 2%;
    cursor: pointer;
}
.mnPalp2 {
    width: 23%;
    height: 50%;
    left: 26%;
    top: 28%;
    overflow: hidden;
    position: absolute;
    text-align: center;
    font-weight: bold;
    font-size: 100%;
    color: #ccc;
    padding-top: 2%;
    cursor: pointer;
}
.mnPalp3 {
    width: 23%;
    height: 50%;
    left: 50.5%;
    top: 28%;
    overflow: hidden;
    position: absolute;
    text-align: center;
    font-weight: bold;
    font-size: 100%;
    color: #ccc;
    padding-top: 2%;
    cursor: pointer;
}
.mnPalp4 {
    width: 23%;
    height: 50%;
    left: 75%;
    top: 28%;
    overflow: hidden;
    position: absolute;
    text-align: center;
    font-weight: bold;
    font-size: 100%;
    color: #ccc;
    padding-top: 2%;
    cursor: pointer;
}



.btnEsquerda {
    width: 6.94444%;
    height: 4.16667%;
    left: 5.09259%;
    top: 1%;
    background-image: url("../img/btnEsquerda.png");
    background-repeat: no-repeat;
    background-size: 100%;
    overflow: hidden;
    position: absolute;
    cursor: pointer;
}

.btnDireita {
    width: 6.94444%;
    height: 4.16667%;
    left: 87.68519%;
    top: 1%;
    background-image: url("../img/btnDireita.png");
    background-repeat: no-repeat;
    background-size: 100%;
    overflow: hidden;
    position: absolute;
    cursor: pointer;
}
.titPalpite {
    width: 74%;
    height: 5%;
    left: 13%;
    top: 1%;
    color: #9d9dfd;
    overflow: hidden;
    position: absolute;
    text-align: center;
    font-weight: bold;
    font-size: 150%;
}

.fndPalpTab {
    width: 90%;
    height: 90%;
    left: 5%;
    top: 7%;
    overflow: hidden;
    position: absolute;
}

.fndLinha0 {
    background: -webkit-linear-gradient(#fff, #aaa);
    background: -o-linear-gradient(#fff, #aaa);
    background: -moz-linear-gradient(#fff, #aaa);
    background: linear-gradient(#fff, #aaa);
    position: relative;
    color: #000;
}
.fndLinha1 {
    background: -webkit-linear-gradient(#ffa2a2, #780000);
    background: -o-linear-gradient(#ffa2a2, #780000);
    background: -moz-linear-gradient(#ffa2a2, #780000);
    background: linear-gradient(#ffa2a2, #780000);
    position: relative;
    color: #000;
}
.fndLinha2 {
    background: -webkit-linear-gradient(#fffcbf, #aa5900);
    background: -o-linear-gradient(#fffcbf, #aa5900);
    background: -moz-linear-gradient(#fffcbf, #aa5900);
    background: linear-gradient(#fffcbf, #aa5900);
    position: relative;
    color: #000;
}
.fndLinha3 {
    background: -webkit-linear-gradient(#a6ff94, #034400);
    background: -o-linear-gradient(#a6ff94, #034400);
    background: -moz-linear-gradient(#a6ff94, #034400);
    background: linear-gradient(#a6ff94, #034400);
    position: relative;
    color: #000;
}
.fndLinha4 {
    background: -webkit-linear-gradient(#9499ff, #0602c0);
    background: -o-linear-gradient(#9499ff, #0602c0);
    background: -moz-linear-gradient(#9499ff, #0602c0);
    background: linear-gradient(#9499ff, #0602c0);
    position: relative;
    color: #000;
}
.fndLinha5 {
    background: -webkit-linear-gradient(#ff94ea, #c0029a);
    background: -o-linear-gradient(#ff94ea, #c0029a);
    background: -moz-linear-gradient(#ff94ea, #c0029a);
    background: linear-gradient(#ff94ea, #c0029a);
    position: relative;
    color: #000;
}

.linX {
    position: absolute;
    width: 15%;
    left: 43%;
    top: 28%;
    color: #000;
    font-weight: bold;
    font-size: 120%;
    text-align: center;
    cursor: default;
}
.linPpe {
    position: absolute;
    width: 40%;
    height: 90%;
    top: 20%;
    left: 7%;
    text-align: center;
}
.linPpd {
    position: absolute;
    width: 40%;
    height: 90%;
    top: 20%;
    left: 55%;
    text-align: center;
}
.linPpt {
    position: relative;
    width: 33%;
    text-align: center;
    color: #000;
}
.linRes {
    position: absolute;
    width: 100%;
    top: 66%;
    text-align: center;
    color: #FFF;
    font-size: 90%;
    font-weight: bold;
}
.linImg {
    width: 14%;
    height: 0;
    left: 0;
    top: 0;
    padding: 0;
    margin: 0;
    position: relative;
}
.linTxt {
    width: 13%;
    height: 0;
    left: 0;
    top: 0;
    color: #000;
    text-align: center;
    font-weight: bold;
    cursor: default;
}
.linDat {
    width: 13%;
    height: 0;
    left: 0;
    top: 0;
    color: #000;
    text-align: center;
    cursor: default;
}

.linBox {
    position: relative;
    width: 30%;
    text-align: center;
    color: #000;
}
.linPpM {
    position: absolute;
    width: 33%;
    height: 60%;
    top: 10%;
    text-align: center;
}
.linPpX {
    position: absolute;
    width: 34%;
    height: 60%;
    top: 10%;
    left: 33%;
    text-align: center;
}
.linPpV {
    position: absolute;
    width: 33%;
    height: 60%;
    top: 10%;
    left: 67%;
    text-align: center;
}

.ImgTime {
    width: 70%;
    height: 70%;
}
.inpTxt {
    width: 100%;
    height: 100%;
    font-weight: bold;
    font-size: 150%;
    text-align: center;
    border: 0;
    border: solid 1px #000;
    -moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.2);
    -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
    box-shadow: inner 0 0 4px rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;    
}
.inpTxt:focus {
    outline: none !important;
    border-color: #719ECE;
}

.inpTxtB {
    background-color: #fff;
}
.inpTxtS {
    background-color: #aaffb6;
}
.inpTxtE {
    background-color: #ffcece;
}

.pptTxt {
    font-weight: bold;
    font-size: 150%;
    text-align: center;
    color: #000;
    cursor: default;
}

.spinoff::-webkit-outer-spin-button,
.spinoff::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.spinoff {
    -moz-appearance: textfield;
}


.marqueX {
    width: 60%;
    height: 50%;
    font-weight: bold;
    font-size: 150%;
    text-align: center;
    border: 0;
    border: solid 1px #000;
    -moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.2);
    -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
    box-shadow: inner 0 0 4px rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    position: absolute;
}

.marqueX:focus {
    outline: none !important;
    border-color: #719ECE;
}

.iPemiacaoB {
    width: 10%;
    height: 60%;
    left: 0;
    top: 22%;
    background-image: url("../img/miniBolarB.png");
    background-repeat: no-repeat;
    background-size: 100%;
    overflow: hidden;
    position: absolute;
}

.iPemiacaoT {
    width: 15%;
    height: 60%;
    left: 0;
    top: 24%;
    background-image: url("../img/miniTicket.png");
    background-repeat: no-repeat;
    background-size: 100%;
    overflow: hidden;
    position: absolute;
}

.txtRegra {
    color: #fff;
    font-size: 90%;
    vertical-align: middle;
    text-align: justify-all;
}

.txtRegraP {
    color: #000;
    font-size: 90%;
    font-weight: bold;
    vertical-align: middle;
}

.txtRegraB {
    color: #fff;
    font-size: 90%;
    display: flex;
    align-items: center;
}

.txtRegraR {
    color: #6826bc;
    vertical-align: middle;
    text-align: justify-all;
}

.titRegraR {
    color: #6826bc;
    font-size: 90%;
    font-weight: bold;
    vertical-align: middle;
}

.titRegra {
    color: #5def72;
    font-size: 90%;
    font-weight: bold;
    vertical-align: middle;
}


#mdBemvindo {
    position: relative;
    width: 80%;
    height: 40%;
    left: 10%;
    top: 25%;
    border: solid 2px #00ff21;
    -moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.2);
    -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
    box-shadow: inner 0 0 4px rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background: -webkit-linear-gradient(#783b97, #6826BC);
    background: -o-linear-gradient(#783b97, #6826BC);
    background: -moz-linear-gradient(#783b97, #6826BC);
    background: linear-gradient(#783b97, #6826BC);
    overflow: hidden;
}

#mdCodEmail {
    position: relative;
    width: 80%;
    height: 25%;
    left: 10%;
    top: 35%;
    border: solid 3px #00ff21;
    background-color: #6826BC;
    -moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.2);
    -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
    box-shadow: inner 0 0 4px rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    overflow: hidden;
}

#mdPesquisarClube {
    position: relative;
    width: 80%;
    height: 40%;
    left: 10%;
    top: 25%;
    border: solid 2px #00ff21;
    -moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.2);
    -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
    box-shadow: inner 0 0 4px rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background: -webkit-linear-gradient(#783b97, #6826BC);
    background: -o-linear-gradient(#783b97, #6826BC);
    background: -moz-linear-gradient(#783b97, #6826BC);
    background: linear-gradient(#783b97, #6826BC);
    overflow: hidden;
}

#mdConfirmarRegistro {
    position: relative;
    width: 80%;
    height: 30%;
    left: 10%;
    top: 25%;
    border: solid 2px #00ff21;
    border: solid 2px #00ff21;
    background-color: #6826bc;
    -moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.2);
    -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
    box-shadow: inner 0 0 4px rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    overflow: hidden;
}

.mdTitulo {
    position: absolute;
    width: 100%;
    height: 30px;
    padding-top: 7px;
    overflow: hidden;
    text-align: center;
    font-size: 100%;
    font-weight: bold;
    background-color: #4b2181;
    border-radius: 6px 6px 0 0;
}

.mdFechar {
    width: 6.5%;
    height: 80%;
    left: 90%;
    top: 20%;
    background-image: url("../img/btnFechar.png");
    background-repeat: no-repeat;
    background-size: 100%;
    overflow: hidden;
    position: absolute;
    cursor: pointer;
}

.mdCorpo {
    position: absolute;
    margin-top: 30px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    text-align: center;
    font-size: 100%;
}

.fndClubeAB {
    width: 97%;
    height: 11%;
    left: 2%;
    top: 8.5%;
    background-image: url("../img/fndBolao.png");
    background-repeat: no-repeat;
    background-size: 100%;
    overflow: hidden;
    position: absolute;
}

.logoClubeAB {
    width: 18.5%;
    height: 76%;
    left: 2%;
    top: 8%;
    background-repeat: no-repeat;
    background-size: 100%;
    overflow: hidden;
    position: absolute;
}

.txtClubeDescAB {
    width: 71%;
    height: 35%;
    left: 23%;
    top: 5%;
    overflow: hidden;
    position: absolute;
    text-align: left;
    vertical-align: middle;
    font-size: 100%;
    padding-top: 2%;
}


.txtIdClubeAB {
    width: 71%;
    height: 20%;
    left: 23%;
    top: 49%;
    overflow: hidden;
    position: absolute;
    text-align: left;
    vertical-align: middle;
    font-size: 90%;
    color: #aaa;
}

.txtIdMembroAB {
    width: 71%;
    height: 20%;
    left: 23%;
    top: 68%;
    overflow: hidden;
    position: absolute;
    text-align: left;
    vertical-align: middle;
    font-size: 90%;
    color: #aaa;
}

.txtClubeEstrAB {
    width: 71%;
    height: 20%;
    left: 23%;
    top: 30%;
    overflow: hidden;
    position: absolute;
    text-align: left;
    vertical-align: middle;
    font-size: 120%;
}

.EstrelaAB {
    width: 6%;
    height: 80%;
    padding: 0;
    overflow: hidden;
    position: absolute;
}

.vcentro {
    display: flex;
    align-items: center;
}

.hcentro {
    display: flex;
    text-align:center;
}

.txtRank {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.borRank {
    padding: 2%;
    margin: 2%;
    border: 1px solid #aaaaaa;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    color: #000000;
    height: 80%;
}


.ozTooltip {
    display: inline-block;
}

.ozTooltiptext {
    visibility: hidden;
    position: absolute;
    opacity: 0;
    transition: opacity 1s;
}

.ozTooltip:hover + .ozTooltiptext {
    visibility: visible;
    opacity: 1;
}

.ttDir {
    top: -5px;
    left: 105%;
}

.ttEsq {
    top: -5px;
    right: 105%;
}

.ttTop {
    bottom: 105%;
    left: 50%;
    margin-left: -50%;
}

.ttRod {
    top: 105%;
    left: 50%;
    margin-left: -50%;
}

/* estilo para deslocar o label ao focar no input
div {
    position: relative;
}

input {
    display: block;
    transition: top .3s, left .3s;
    position: relative;
    top: 17px;
    font-size: 12px;
    color: black;
}

label {
    transition: .2s linear;
    position: absolute;
    top: 20px;
    font-size: 12px;
    left: 5px;
    color: black;
}

input:focus + label {
    top: 0px;
    left: 0px;
}
  */