*{
    margin:0;
    padding:0;
    outline:none
}

html,body{
    width:100%;
    height:100%
}

html>body{
    font-family:roboto,helvetica,arial,sans-serif!important
}

body{
    background-color:#f6f6f6
}

.dialogPayment .mdl-spinner{
    width:48px;
    height:48px
}

.mdl-spinner--single-color .mdl-spinner__layer{
    border-color:#664a6f
}

#topWrapper{
    width:100%;
    position:relative;
  /*  background:#630a95;*/
    background:#1e294b;
  /*  background:linear-gradient(137deg,rgb(41 44 68) 0%,rgb(152 44 87) 100%);*/
    padding-top:80px;
    padding-bottom:80px
}

#topWrapperBar,#topWrapperContent{
    max-width:980px;
    width:100%;
    margin-left:auto;
    margin-right:auto;
    display:table
}

#topWrapperBar .logoTop{
    float:left;
    display:table;
    margin-left:20px
}

#topWrapperBar .rightTop,#topWrapperContent .rightMain{
    float:right;
    margin-right:20px;
    display:table;
    position:relative
}
#topWrapperBar .rightTop p{
    color:#fff;
    font-size:13px;
    text-align:left;
    font-family:Arial;
    float:left;
    clear:both;
    margin:0;
    padding:0
}
#topWrapperBar .rightTop img{
    float:left;
    display:table;
    clear:both
}
#topWrapperContent{
    margin-top:100px
}
#topWrapperContent .promoLogo{
    float:right;
    display:table;
    margin-left:20px
}
#recargaStepInit p{
    color:#fff;
    font-size:20px;
    text-align:right;
    font-family:Arial;
    float:right;
    clear:both;
    margin:0;
    padding:0
}
#recargaStepInit a{
    float:right;
    display:table;
    padding-left:30px;
    padding-right:30px;
    padding-top:12px;
    padding-bottom:13px;
    color:#1b1b1b;
    font-size:14px;
    font-family:open sans;
    font-weight:600;
    background-color:#fff;
    cursor:pointer;
    clear:both;
    margin-top:10px
}
#recargaStepInit a:hover,#recargaStepInit a:active{
    background-color:#dcdcdc
}
#mainRecargas{
    max-width:980px;
    display:table;
    padding-top:50px;
    padding-bottom:50px;
    margin-left:auto;
    margin-right:auto
}
#mainRecargas .titlePlanosRecargas{
    font-family:open sans;
    font-weight:200;
    font-size:28px;
    color:#1b1b1b;
    margin:0;
    display:table;
    margin-left:20px;
    text-align:left;
    line-height:1.2
}
#mainRecargas .planosRecargas{
    display:table;
    position:relative
}
#mainRecargas .planosRecargas li{
    display:table;
    float:left;
    margin-top:20px;
    margin-left:20px;
    width:218px;
    position:relative
}
#mainRecargas .planosRecargas li:first-of-type{
    margin-left:20px
}
#mainRecargas .planosRecargas li .topRecarga{
    width:100%;
    padding-top:30px;
    padding-bottom:30px;
    /*  background:#630a95;*/
      background:#1e294b;
    /*  background:linear-gradient(137deg,rgb(41 44 68) 0%,rgb(152 44 87) 100%);*/
    display:table
}
#mainRecargas .planosRecargas li .mainRecarga{
    width:100%;
    background-color:#fff;
    display:table
}
#mainRecargas .planosRecargas li .titleRecarga{
    font-size:40px;
    font-family:open sans;
    font-weight:600;
    color:#fff;
    margin:0;
    padding:0;
    margin-left:20px;
    display:table
}
#mainRecargas .planosRecargas li .bonusRecarga{
    font-family:open sans;
    font-weight:300;
    font-size:40px;
    color:#1b1b1b;
    margin:0;
    display:table;
    margin-top:20px;
    margin-left:20px;
    text-align:left;
    line-height:1.2;
    float:left
}
#mainRecargas .planosRecargas li .labelRecarga,#mainRecargas .planosRecargas li .validadeRecarga{
    font-family:open sans;
    font-weight:300;
    font-size:15px;
    color:#1b1b1b;
    margin:0;
    display:table;
    margin-top:5px;
    margin-left:20px;
    text-align:left;
    line-height:1.2;
    float:left;
    clear:both
}
#mainRecargas .planosRecargas li .validadeRecarga{
    color:#757575;
    font-weight:500;
    font-size:13px
}
#mainRecargas .planosRecargas li .buttonRecarga{
    float:left;
    width:calc(100% - 60px);
    margin-left:10px;
    margin-right:10px;
    margin-top:20px;
    margin-bottom:10px;
    padding-left:20px;
    padding-right:20px;
    padding-top:6px;
    padding-bottom:8px;
    /*  background:#630a95;*/
      background:#1e294b;
    /*  background:linear-gradient(137deg,rgb(41 44 68) 0%,rgb(152 44 87) 100%);*/
    font-family:open sans;
    font-weight:400;
    font-size:15px;
    color:#fff;
    text-align:center;
    text-decoration:none;
    cursor:pointer
}
#mainRecargas .planosRecargas li .buttonRecarga:hover,#mainRecargas .planosRecargas li .buttonRecarga:active{
    background-color:#52254a
}
#mainRecargas .observacaoRecarga{
    font-family:open sans;
    font-weight:400;
    font-size:16px;
    color:#1f1f1f;
    margin:0;
    display:table;
    margin-left:20px;
    text-align:left;
    line-height:1.2;
    margin-top:20px
}
#formRecarga{
    float:left;
    position:relative;
    margin:0;
    padding:0;
    margin-right:20px
}
#formRecarga p{
    color:#fff;
    font-size:20px;
    text-align:right;
    font-family:Arial;
    float:right;
    transform:translateX(53px);
    clear:both;
    margin:0;
    padding:0
}
#formRecarga .inputRecarga{
    width:200px;
    background-color:FFF;
    padding-left:20px;
    padding-right:20px;
    padding-top:10px;
    padding-bottom:12px;
    color:#1b1b1b;
    font-size:14px;
    font-family:open sans;
    font-weight:600;
    background-color:#fff;
    border:none;
    float:right;
    clear:both;
    margin-top:10px
}
#formRecarga .submitRecarga{
    width:240px;
    background-color:FFF;
    padding-left:20px;
    padding-right:20px;
    padding-top:10px;
    padding-bottom:12px;
    color:#fff;
    font-size:14px;
    font-family:open sans;
    font-weight:600;
    background-color:#471e4880;
    border:none;
    float:right;
    clear:both;
    margin-top:10px;
    cursor:pointer;
    text-align:center;
    text-decoration:none
}
#formRecarga .submitRecarga:hover,#formRecarga .submitRecarga:active{
    background-color:#722c4fc4
}
#formRecarga .errorMessages{
    float:right;
    clear:both;
    margin-top:15px;
    color:#fff;
    font-size:14px;
    font-family:open sans;
    font-weight:600;
    display:none
}
#mainCards{
    width:100%;
    padding-top:70px;
    padding-bottom:90px;
    display:table;
    background-color:#fff
}
#mainCards h2{
    font-family:open sans;
    font-weight:100;
    font-size:28px;
    color:#1b1b1b;
    width:100%;
    margin:0;
    text-align:center;
    line-height:1.2
}
#mainCards img{
    max-width:751px;
    margin:0;
    margin-left:auto;
    margin-right:auto;
    margin-top:25px;
    display:none
}
#mainCards img.full{
    display:table
}
footer{
    width:100%;
    height:150px
}
#footerCont{
    width:80%;
    display:table;
    margin-left:auto;
    margin-right:auto
}
footer .visaVerified{
    float:left;
    margin:0;
    margin-top:40px
}
footer .logoBottom{
    float:right;
    margin-top:50px;
    display:table
}
footer .footerCopyr{
    float:right;
    margin:0;
    margin-right:30px;
    margin-top:64px;
    display:table;
    font-family:open sans;
    font-size:13px;
    color:#696868
}
#modalWrapper{
    width:100%;
    height:100%;
    position:fixed;
    top:0;
    left:0;
    background:rgba(0,0,0,.9);
    z-index:50;
    display:none
}
#modalWrapper .dialogWindow{
    width:380px;
    height:530px;
    position:fixed;
    left:0;
    right:0;
    top:0;
    bottom:0;
    padding:0;
    margin:auto;
    border-radius:4px;
    display:none;
    background-color:#fff
}
#modalWrapper .dialogWindowCont{
    width:100%;
    height:auto;
    display:none
}
#modalWrapper .dialogWindowLoding{
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    width:28px;
    height:28px;
    margin:auto;
    display:none
}
#modalWrapper .dialogWindowTop{
}
#modalWrapper .dialogWindowTop{
    width:100%;
    height:50px;
    border-bottom:1px solid #ddd;
    display:none
}
#modalWrapper .dialogWindowTop .infoRecarga{
    font-family:open sans;
    font-weight:700;
    font-size:14px;
    color:#222;
    float:left;
    margin:0;
    margin-left:20px;
    margin-top:12px;
    display:table
}
#modalWrapper .dialogWindowTop .siteSafe{
    float:right;
    margin:0;
    margin-right:20px;
    margin-top:15px
}
#modalWrapper .dialogWindow.step1{
    height:320px;
    display:table
}
#modalWrapper .dialogWindow.step1 .dialogWindowCont.step1{
    display:table
}
#modalWrapper .dialogWindow.step1 .dialogWindowTop{
    display:table
}
#modalWrapper .dialogWindow.loading{
    height:300px;
    display:table
}
#modalWrapper .dialogWindow.loading .dialogWindowLoding{
    display:table
}
#modalWrapper .label{
    margin-left:auto;
    margin-right:auto;
    position:relative;
    margin-top:12px;
    display:table
}
#modalWrapper .label:first-of-type{
    margin-top:20px
}
#modalWrapper .labelTitle{
    color:#212121;
    font-size:11px;
    font-family:open sans semibold;
    padding:0;
    margin:0
}
#modalWrapper .inpSelect{
    width:240px;
    background-color:FFF;
    padding-left:20px;
    padding-right:20px;
    padding-top:10px;
    padding-bottom:12px;
    color:#757575!important;
    font-size:14px;
    font-family:open sans;
    font-weight:600;
    background-color:#fafafa;
    border:1px solid #e3e3e6;
    font-size:13px;
    color:#000;
    cursor:pointer
}
#modalWrapper .inpSelect.selected{
    color:#1b1b1b!important
}
#modalWrapper .inpText{
    width:200px;
    background-color:FFF;
    padding-left:20px;
    padding-right:20px;
    padding-top:10px;
    padding-bottom:12px;
    color:#1b1b1b;
    font-size:14px;
    font-family:open sans;
    font-weight:600;
    background-color:#fafafa;
    border:1px solid #e3e3e6;
    font-size:13px;
    color:#000
}
#modalWrapper .inpText:focus,#modalWrapper .inpText:hover,#modalWrapper .inpText:active,#modalWrapper .inpSelect:hover,#modalWrapper .inpSelect:active,#modalWrapper .inpSelect:focus{
    color:#2d003b!important;
    border-color:#664a6f
}
#modalWrapper .inpText.error,#modalWrapper .inpSelect.error{
    color:#b51d1d!important;
    background-color:#ffdfdf;
    border-color:#ffdfdf
}
#modalWrapper .inpText.error:focus,#modalWrapper .inpText.error:hover,#modalWrapper .inpText.error:active,#modalWrapper .inpSelect.error:focus,#modalWrapper .inpSelect.error:hover,#modalWrapper .inpSelect.error:active{
    border-color:#d47070
}
#modalWrapper .inpExpiration{
    width:75px
}
#modalWrapper .inpExpiration:last-of-type{
    margin-left:10px
}
#modalWrapper .butCancel{
    float:left;
    margin-top:12px;
    font-family:open sans;
    font-weight:800;
    font-size:12px;
    color:#505050;
    display:table;
    cursor:pointer;
    text-decoration:none;
    margin-right:40px
}
#modalWrapper .butCancel:hover{
    text-decoration:underline
}
#modalWrapper .butNext{
    border:none;
    background-color:#209139!important;
    color:#fff!important;
    font-family:open sans;
    font-weight:800;
    font-size:11px;
    float:right;
    padding-top:10px;
    padding-bottom:12px;
    height:auto;
    padding-left:25px;
    padding-right:25px;
    cursor:pointer
}
#modalWrapper .butNext:hover,#modalWrapper .butNext:active{
    background-color:#14b14e!important
}
#modalWrapper .dialogWindowFooter{
    display:none;
    margin-top:20px;
    margin-bottom:30px
}
#modalWrapper .dialogWindow.step2{
    height:320px;
    display:table
}
#modalWrapper .dialogWindow.step2 .dialogWindowCont.step2{
    display:table
}
#modalWrapper .dialogWindow.step2 .dialogWindowTop{
    display:table
}
#modalWrapper .dialogWindowTitle{
    font-size:17px;
    margin:0;
    padding-left:30px;
    padding-right:30px;
    font-weight:600;
    line-height:1.2;
    margin-top:20px
}
#modalWrapper .dialogWindowDesc{
    font-size:13px;
    padding-left:30px;
    padding-right:30px;
    font-weight:500;
    line-height:1.2;
    margin-top:2px;
    color:#4a4a4a
}
#modalWrapper .dialogWindow.step3{
    height:180px;
    display:table
}
#modalWrapper .dialogWindow.step3 .dialogWindowCont.step3{
    display:table
}
#modalWrapper .dialogWindow.step3 .dialogWindowTop{
    display:table
}

#modalWrapper .dialogWindow.step4{
    height:270px;
    display:table
}

#modalWrapper .dialogWindow.step4 .dialogWindowCont.step4{
    display:table
}

#modalWrapper .dialogWindowCont.step4 img{
    display:table;
    margin-left:auto;
    margin-right:auto;
    margin-top:50px
}
#modalWrapper .dialogWindowCont.step4 h2{
    width:85%;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
    line-height:1;
    font-family:open sans;
    font-weight:700;
    font-size:16px;
    color:#0ad253;
    display:table
}
#modalWrapper .dialogWindowCont.step4 p{
    font-family:open sans;
    font-weight:600;
    font-size:13px;
    color:#444;
    position:absolute;
    bottom:30px;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
    width:85%;
    line-height:1;
    text-align:center;
    display:table
}
#modalWrapper .dialogWindowError{
    display:none;
    margin-top:25px;
    margin-bottom:25px
}
.showTable{
    display:table!important
}
#boxRec{
    float:right;
    margin:0;
    width:320px;
    height:320px;
    border-radius:10px;
    background-color:#fff;
    box-shadow:0 0 10px #000;
    position:relative
}
#boxRec .titleLabel,.dialogPayCont .titleLabel,.dialogConfCont .titleLabel{
    width:100%;
    display:table;
    margin:0;
    padding-bottom:5px
}
#boxRec .titleLabel p,.dialogPayCont .titleLabel p,.dialogConfCont .titleLabel p{
    display:table;
    margin:0;
    font-family:open sans;
    font-weight:600;
    font-size:11px;
    color:#67676b;
    line-height:1
}
.dialogPayCont .labelRecarga,.dialogPayCont .labelPhone{
    margin-top:30px
}
#boxRec .inpPhoneNum{
    width:117px;
    margin-left:10px
}
#boxRec .labelPhone{
    margin-top:55px
}
#boxRec .labelRecarga{
    margin-top:30px
}
#boxRec .labelButRec,.dialogPayCont .labelButPay,.dialogConfCont .labelButConf{
    margin-top:30px;
    display:none
}
#boxRec .labelError,.dialogPayCont .labelError,.dialogConfCont .labelError{
    margin-top:30px;
    display:none
}
#boxRec .labelError p,.dialogPayCont .labelError p,.dialogConfCont .labelError p{
    text-align:center;
    font-size:13px;
    font-weight:600
}
#boxRec .labelError.success p,.dialogPayCont .labelError.success p,.dialogConfCont .labelError.success p{
    color:#2d5a2f
}
#boxRec .labelError.error p,.dialogPayCont .labelError.error p,.dialogConfCont .labelError.error p{
    color:#b51d1d
}
#boxRec .fakeInpButton{
    text-align:center;
    padding-top:10px;
    padding-bottom:10px;
    background-color:#0ad254;
    border:none;
    border-radius:3px;
    width:100%;
    font-family:open sans;
    font-weight:800;
    font-size:12px;
    color:#fff;
    display:table;
    cursor:pointer;
    text-decoration:none;
    text-shadow:0 0 3px rgba(0,0,0,.5)
}
#boxRec .fakeInpButton:hover{
    background-color:#14b14e
}
.dialogPayCont .butPay,.dialogConfCont .butConfirm{
    background:#0ad254;
    color:#fff;
    font-family:open sans;
    font-weight:800;
    font-size:11px;
    float:right;
    text-shadow:0 0 3px rgba(0,0,0,.5)
}
.dialogPayCont .butPay:hover,.dialogConfCont .butConfirm:hover{
    background-color:#14b14e
}
.dialogPayment,.dialogSuccess,.dialogConfirm{
    width:415px;
    height:530px;
    position:fixed;
    left:0;
    right:0;
    top:0;
    bottom:0;
    padding:0;
    margin:auto;
    border-radius:4px;
    display:none;
    background-color:#fff
}
.dialogConfirm{
    height:320px
}
.dialogPayment{
    height:550px
}
.dialogSuccess{
    height:280px
}
.dialogPayment .infoPayCont,.dialogConfirm .infoPayCont{
    display:none;
    width:100%;
    float:left
}
.topInfoCard{
    width:100%;
    padding-top:15px;
    padding-bottom:14px;
    float:left;
    border-bottom:1px solid #d4d4d4
}
@media screen and (max-width:1100px){
    #topWrapper{
        padding-top:50px;
        padding-bottom:50px
    }
    #topWrapperContent{
        margin-top:60px
    }
}
@media screen and (max-width:1050px){
    #mainRecargas .planosRecargas li{
        width:160px;
        margin-left:10px
    }
    #mainRecargas .planosRecargas li .bonusRecarga{
        font-size:30px
    }
    #mainRecargas .planosRecargas li .labelRecarga,#mainRecargas .planosRecargas li .validadeRecarga{
        font-size:13px
    }
    #mainCards{
        padding-top:50px;
        padding-bottom:60px
    }
}
@media screen and (max-width:900px){
    #formRecarga p{
        font-size:16px;
        transform:translateX(0px)
    }
    #formRecarga .errorMessages{
        transform:translateX(-60px)
    }
    @media screen and (max-width:815px){
        #topWrapper{
            padding-top:30px;
            padding-bottom:30px
        }
        #topWrapperContent{
            margin-top:40px
        }
        #topWrapperContent .promoLogo{
            float:none;
            margin-left:auto;
            margin-right:auto
        }
        #formRecarga{
            float:none;
            margin-left:auto;
            margin-right:auto;
            display:table;
            margin-top:40px
        }
    }
    @media screen and (max-width:790px){
        #topWrapperBar .rightTop,#topWrapperContent .rightMain{
            float:none;
            margin-left:auto;
            margin-right:auto;
            margin-top:40px
        }
        #topWrapperBar .logoTop{
            float:none;
            display:table;
            margin-left:auto;
            margin-right:auto
        }
        #mainCards h2{
            font-size:20px;
            font-weight:400
        }
        #mainCards img.full{
            display:none
        }
        #mainCards img.compact{
            display:table
        }
        #mainRecargas .planosRecargas li:first-of-type{
            margin-left:10px
        }
        #mainRecargas .planosRecargas{
            width:370px;
            margin-left:auto;
            margin-right:auto
        }
        #mainRecargas .titlePlanosRecargas{
            font-size:20px;
            text-align:center;
            width:calc(100% - 20px);
            font-weight:400
        }
        #topWrapperContent .promoLogo{
            width:65%
        }
        #mainRecargas .observacaoRecarga{
            font-size:14px;
            margin-left:40px;
            margin-right:40px
        }
        #formRecarga p{
            padding-bottom:10px
        }
        #formRecarga .inputRecarga{
            float:none;
            margin-left:auto;
            margin-right:auto;
            display:table
        }
        #formRecarga .submitRecarga{
            float:none;
            display:table;
            margin-left:auto;
            margin-right:auto
        }

    }
}

#modalWrapper .dialogWindow.step5{
    height:270px;
    display:table
}

#modalWrapper .dialogWindow.step5 .dialogWindowCont.step5{
    display:table
}

#modalWrapper .dialogWindow.step5 .pixContainer{
    width: 100%;
}

#modalWrapper .dialogWindow.step5 .pixContainer p{
    text-align: center;
    margin-bottom: 10px;
}

#modalWrapper .dialogWindow.step5 #box-code {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    width: 95%;
    margin: 0 auto;
}

#modalWrapper .dialogWindow.step5 .payload-container {
    width: 100%; /* same width as the QR code */
    overflow: hidden;
}

#modalWrapper .dialogWindow.step5 #qrcode {
    margin-bottom: 10px;
}

#modalWrapper .dialogWindow.step5 #pix-code {
    max-width: 320px;
    margin: 0 auto;
    margin-bottom: 10px;
    padding: 10px;
    background-color: #f8f8f8;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: monospace;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    overflow-x: auto;
    font-size: 13px;
}


#modalWrapper .dialogWindow.step5 button#copy-payload {
    width: 100%;
    margin-bottom: 10px;
    padding: 8px 12px;
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
    background-color: #209139;
    border: 1px solid #209139;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}


#modalWrapper .dialogWindow.step5 button#copy-payload:hover {
    background-color: #118029;
    border-color: #118029;
}