* {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
}

.pay {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.obrigatorio {
    color: red;
    font-weight: bold;
    font-size: 12px;
}

input {
    outline: 0;
}
/*Header -----------------------------------------------------------------------------------*/


header {
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-between;
    background-color: #FFFFFF;
    border-bottom: 7px solid #E5E5E5;
    position: fixed;
    top: 0;
    z-index: 3;
}

    header .logo-empresa {
        height: 60px;
        display: flex;
        align-items: center;
        margin-left: 80px;
        justify-content: center;
    }

        header .logo-empresa img {
            height: 40px;
        }

    header .logo-miketecpay {
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-right: 80px;
    }

        header .logo-miketecpay img {
            height: 40px;
        }


@media only screen and (max-width: 800px) {
    header .logo-miketecpay {
        display: none;
    }

    header .logo-empresa {
        margin-left: 10px;
    }
}

/*Section Pay -----------------------------------------------------------------------------------*/

.pay section {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-top: 80px;
    width: 100%;
}

    .pay section .conteudo-pay {
        display: flex;
        flex-direction: column;
        width: 70%;
        max-width: 875px;
    }

@media only screen and (max-width: 1300px) {
    .pay section .conteudo-pay {
        width: 96%;
        justify-content: center;
    }
}

/*Info Pay -----------------------------------------------------------------------------------*/

.info-pay {
    display: flex;
    width: 100%;
    min-width: 500px;
    border-radius: 20px;
    box-shadow: 5px 5px 5px rgb(122, 122, 122);
    position: relative;
    margin-bottom: 30px;
}

    .info-pay .info-venda {
        display: flex;
        width: 568px;
        flex-wrap: wrap;
        border-right: 4px dotted #b8b8b8;
    }

        .info-pay .info-venda h1 {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 40px;
            width: 100%;
            font-size: 19px;
            border-top-left-radius: 10px;
        }

            .info-pay .info-venda h1 p {
                color: #FFFFFF;
                display: flex;
                align-items: center;
                height: 40px;
                margin-bottom: 0px;
            }

            .info-pay .info-venda h1 img {
                height: 23px;
                margin-right: 10px;
            }


        .info-pay .info-venda .alinha-vendas {
            display: flex;
            justify-content: space-between;
            flex-wrap: nowrap;
        }

        .info-pay .info-venda .aviao {
            width: 142px;
            margin: 10px 0 10px 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .info-pay .info-venda .vendas {
            width: 70%;
            display: flex;
            justify-content: space-between;
            margin: 10px 0 10px 0;
            flex-wrap: wrap;
        }

    .info-pay .financing .info-venda {
        display: flex;
        width: 400px;
        flex-wrap: wrap;
        border-right: 4px dotted #b8b8b8;
    }

    .info-pay h3 {
        font-size: 17px;
        font-weight: bold;
    }

    .info-pay .info-venda .vendas div {
        margin: 0 10px 0 10px;
    }

    .info-pay .info-venda-total {
        display: flex;
        width: 305px;
        flex-wrap: wrap;
    }

    .info-pay .header-vendas-total {
        height: 40px;
        background-color: #1E8F5B;
        width: 100%;
        border-top-right-radius: 10px;
        border-top-left-radius: 10px;
        position: absolute;
        z-index: -1;
    }

    .info-pay .info-venda-total .vendas-total {
        display: flex;
        width: 100%;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        margin: 51px 0 0 0;
    }

        .info-pay .info-venda-total .vendas-total div {
            display: flex;
            justify-content: flex-start;
            width: 230px;
            flex-wrap: wrap;
            margin-bottom: 10px;
            margin-left: 10px;
        }

        .info-pay .info-venda-total .vendas-total .vl-total {
            color: #25B372;
        }

        .info-pay .info-venda-total .vendas-total .saldo {
            width: 230px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: space-around;
            flex-direction: column;
            background-color: #F58646;
            border-radius: 10px;
            color: #FFFFFF;
        }

    .info-pay .financing .info-venda-total {
        display: flex;
        width: 450px;
        flex-wrap: wrap;
    }

        .info-pay .financing .info-venda-total .vendas-total div {
            display: flex;
            justify-content: flex-start;
            width: 100%;
            flex-wrap: wrap;
            margin-bottom: 10px;
            margin-left: 10px;
        }

        .info-pay .financing .info-venda-total .vendas-total .stage {
            width: 95%;
            display: flex;
            align-items: flex-start;
            justify-content: left;
            flex-direction: column;
            background-color: #FFFBED;
            border-radius: 10px;
            color: #000000;
            padding-left: 10px;
        }

            .info-pay .financing .info-venda-total .vendas-total .stage p {
                display: flex;
                justify-content: space-between;
                width: 95%;
                margin-top: 8px;
                font-weight: bold;
            }

                .info-pay .financing .info-venda-total .vendas-total .stage p img {
                    max-width: 20px;
                    max-height: 20px;
                }

@media only screen and (max-width: 800px) {
    .info-pay {
        flex-direction: column;
        min-width: 0;
    }

        .info-pay .info-venda h1 {
            border-top-right-radius: 10px;
        }

        .info-pay .info-venda {
            display: flex;
            width: 100% !important;
            flex-wrap: wrap;
            border-bottom: 4px dotted #b8b8b8;
            border-right: none !important;
        }

            .info-pay .info-venda .aviao {
                width: 100px;
            }

        .info-pay .info-venda-total {
            width: 90% !important;
            align-items: center;
            justify-content: center;
        }
    .modal-pix .modal{
        flex-direction:column;
        align-items:center;
    }
    .modal-pix .cod-qr-code div{
        width:100% !important;
    }
}

.pay section .conteudo-pay .dados-comprador {
    width: 875px;
    height: 800px;
}

/*Resumo de Compras -----------------------------------------------------------------------------------*/



.pay section .resumo-compra {
    width: 400px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    background-color: #FFFBED;
    box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.25);
    margin-bottom: 30px;
    position: sticky;
    top: 80px;
}

    .pay section .resumo-compra h2 {
        display: flex;
        justify-content: space-between;
        width: 88%;
        margin-top: 20px;
    }

        .pay section .resumo-compra h2 img {
            height: 30px;
        }

    .pay section .resumo-compra .produtos-selecionados {
        display: flex;
        width: 88%;
    }

    .pay section .resumo-compra .produto {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        width: 88%;
    }


        .pay section .resumo-compra .produto h3 {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            padding: 7px 0 7px 0;
            margin: 10px 0 10px 0;
            border-bottom: 1px solid;
        }

            .pay section .resumo-compra .produto h3 p {
                font-size: 15px;
                width: 70%;
            }

            .pay section .resumo-compra .produto h3 .vl-produto {
                font-size: 18px;
                width: 30%;
            }

        .pay section .resumo-compra .produto .detalhes {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 30px;
            background-color: #FFFBED;
            border: none;
            font-size: 16px;
            margin-bottom: 14px;
        }

        .pay section .resumo-compra .produto .desc-produto {
            display: none;
            flex-direction: column;
            justify-content: space-between;
            margin: 3px 0 10px 0;
        }

            .pay section .resumo-compra .produto .desc-produto p {
                margin: 3px 0 10px 0;
            }

        .pay section .resumo-compra .produto .politica-cancelamento {
            width: 100%;
            margin: 3px 0 10px 0;
            background-color: #FFFFFF;
            border-radius: 10px;
            display: flex;
            align-items: center;
            box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.25);
            justify-content: center;
            flex-wrap: wrap;
        }

            .pay section .resumo-compra .produto .politica-cancelamento button {
                background: #FFFFFF;
                width: 90%;
                border: none;
                height: 50px;
                display: flex;
                align-items: center;
                justify-content: space-between;
            }

                .pay section .resumo-compra .produto .politica-cancelamento button p {
                    color: #EF5350;
                    border: none;
                    display: flex;
                    align-items: center;
                    width: 180px;
                    justify-content: space-between;
                }

            .pay section .resumo-compra .produto .politica-cancelamento .desc-politica {
                width: 90%;
                margin-bottom: 10px;
                padding-top: 9px;
                border-top: 2px solid #ff9694;
                display: none;
            }

    .pay section .resumo-compra .total-resumo {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 88%;
        margin: 10px 0 10px 0;
    }

        .pay section .resumo-compra .total-resumo .economia {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #E9F7F1;
            height: 60px;
            border-radius: 10px;
            width: 100%;
            margin: 10px 0 10px 0;
            color: #1E8F5B;
        }

        .pay section .resumo-compra .total-resumo .vl-total-resumo {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background-color: #F58646;
            height: 60px;
            border-radius: 10px;
            width: 100%;
            margin: 10px 0 10px 0;
            color: #FFF;
        }

            .pay section .resumo-compra .total-resumo .vl-total-resumo div {
                margin-left: 10px;
            }

            .pay section .resumo-compra .total-resumo .vl-total-resumo strong {
                margin-right: 10px;
            }

@media only screen and (max-width: 1300px) {
    .pay section .resumo-compra {
        display: none;
    }
}

.informacoes-pagamento {
    display: flex;
    align-items: center;
    flex-direction: column;
}



/*Dados Pessoais -----------------------------------------------------------------------------------*/
.pay section .conteudo-pay .dados-pessoais {
    display: flex;
    flex-direction: column;
    width: 100%;
    border: 1px solid #E5E5E5;
    margin-bottom: 60px;
}

    .pay section .conteudo-pay .dados-pessoais h4 {
        height: 50px;
        display: flex;
        align-items: center;
        padding-left: 15px;
    }


    .pay section .conteudo-pay .dados-pessoais .contratante {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border-top: 1px solid #E5E5E5;
        border-bottom: 1px solid #E5E5E5;
    }

        .pay section .conteudo-pay .dados-pessoais .contratante button {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 50px;
            border: none;
            background-color: #FFF;
            padding: 0 10px 0 10px;
        }

            .pay section .conteudo-pay .dados-pessoais .contratante button div .check-pagador {
                display: none;
                margin-right: 10px;
            }

            .pay section .conteudo-pay .dados-pessoais .contratante button div {
                display: flex;
                align-items: center;
            }

            .pay section .conteudo-pay .dados-pessoais .contratante button h3 {
                display: flex;
                align-items: center;
            }

                .pay section .conteudo-pay .dados-pessoais .contratante button h3 img {
                    width: 22px;
                    margin-right: 10px;
                }

        .pay section .conteudo-pay .dados-pessoais .contratante .resp-pay {
            display: flex;
            align-items: center;
            height: 40px;
            font-weight: 600;
            background-color: #FFFBED;
            padding-left: 20px;
            font-size: 12px;
        }


        .pay section .conteudo-pay .dados-pessoais .contratante .ctd-contratante {
            display: flex;
            flex-direction: column;
        }

        .pay section .conteudo-pay .dados-pessoais .contratante .form-contratante {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 20px 0 20px;
            flex-wrap: wrap;
        }

            .pay section .conteudo-pay .dados-pessoais .contratante .form-contratante div {
                display: flex;
                flex-direction: column;
                margin: 10px 0 10px 0;
            }

                .pay section .conteudo-pay .dados-pessoais .contratante .form-contratante div input {
                    height: 35px;
                    border: 1px solid #E5E5E5;
                    padding-left: 15px;
                    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
                    margin-top: 7px;
                    border-radius: 3px;
                }

                    .pay section .conteudo-pay .dados-pessoais .contratante .form-contratante div input::placeholder {
                        color: #b8b8b8;
                    }

                .pay section .conteudo-pay .dados-pessoais .contratante .form-contratante div label {
                    font-size: 11px;
                    font-weight: 600;
                }

            .pay section .conteudo-pay .dados-pessoais .contratante .form-contratante .nome {
                width: 100%;
            }

            .pay section .conteudo-pay .dados-pessoais .contratante .form-contratante .data-nasc {
                width: 30%;
            }

            .pay section .conteudo-pay .dados-pessoais .contratante .form-contratante .cpf {
                width: 30%;
            }


            .pay section .conteudo-pay .dados-pessoais .contratante .form-contratante .celular {
                width: 30%;
            }

            .pay section .conteudo-pay .dados-pessoais .contratante .form-contratante .email {
                width: 30%;
            }


            .pay section .conteudo-pay .dados-pessoais .contratante .form-contratante .sexo {
                width: 30%;
            }


                .pay section .conteudo-pay .dados-pessoais .contratante .form-contratante .sexo select {
                    height: 35px;
                    border: 1px solid #E5E5E5;
                    padding-left: 10px;
                    border-radius: 3px;
                    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
                    margin-top: 7px;
                }

            .pay section .conteudo-pay .dados-pessoais .contratante .form-contratante .avancar {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                flex-direction: row;
                width: 100%;
            }

                .pay section .conteudo-pay .dados-pessoais .contratante .form-contratante .avancar .btn-avancar {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-direction: row;
                    background-color: #25B372;
                    border-radius: 10px;
                    height: 40px;
                    color: #FFF;
                    font-weight: bold;
                }


@media only screen and (max-width: 800px) {

    .pay section .conteudo-pay .dados-pessoais .contratante .form-contratante .nome {
        width: 100%;
    }

    .pay section .conteudo-pay .dados-pessoais .contratante .form-contratante .data-nasc {
        width: 100%;
    }

    .pay section .conteudo-pay .dados-pessoais .contratante .form-contratante .cpf {
        width: 100%;
    }


    .pay section .conteudo-pay .dados-pessoais .contratante .form-contratante .celular {
        width: 100%;
    }

    .pay section .conteudo-pay .dados-pessoais .contratante .form-contratante .email {
        width: 100%;
    }


    .pay section .conteudo-pay .dados-pessoais .contratante .form-contratante .sexo {
        width: 100%;
    }
}

/* Endereço -----------------------------------------------------------------------------------*/


.pay section .conteudo-pay .dados-pessoais .endereco {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-top: 1px solid #E5E5E5;
    border-bottom: 1px solid #E5E5E5;
    width: 100%;
}

    .pay section .conteudo-pay .dados-pessoais .endereco button {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 50px;
        border: none;
        background-color: #FFF;
        padding: 0 10px 0 10px;
    }

        .pay section .conteudo-pay .dados-pessoais .endereco button div {
            display: flex;
            align-items: center;
        }


            .pay section .conteudo-pay .dados-pessoais .endereco button div .check-endereco {
                display: none;
                margin-right: 10px;
            }


        .pay section .conteudo-pay .dados-pessoais .endereco button h3 {
            display: flex;
            align-items: center;
        }

            .pay section .conteudo-pay .dados-pessoais .endereco button h3 img {
                width: 17px;
                margin-right: 10px;
            }

    .pay section .conteudo-pay .dados-pessoais .endereco .ctd-endereco {
        display: none;
        flex-direction: column;
    }

    .pay section .conteudo-pay .dados-pessoais .endereco .form-endereco {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px 0 20px;
        flex-wrap: wrap;
    }

        .pay section .conteudo-pay .dados-pessoais .endereco .form-endereco div {
            display: flex;
            flex-direction: column;
            margin: 10px 0 10px 0;
        }

            .pay section .conteudo-pay .dados-pessoais .endereco .form-endereco div input {
                height: 35px;
                border: 1px solid #E5E5E5;
                padding-left: 15px;
                box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
                margin-top: 7px;
                border-radius: 3px;
            }

                .pay section .conteudo-pay .dados-pessoais .endereco .form-endereco div input::placeholder {
                    color: #b8b8b8;
                }

            .pay section .conteudo-pay .dados-pessoais .endereco .form-endereco div label {
                font-size: 11px;
                font-weight: 600;
            }

        .pay section .conteudo-pay .dados-pessoais .endereco .form-endereco .cep {
            width: 30%;
        }

        .pay section .conteudo-pay .dados-pessoais .endereco .form-endereco .rua {
            width: 30%;
            margin-left: 1px;
        }


        .pay section .conteudo-pay .dados-pessoais .endereco .form-endereco .numero {
            width: 20%;
        }

        .pay section .conteudo-pay .dados-pessoais .endereco .form-endereco .complemento {
            width: 35%;
        }

        .pay section .conteudo-pay .dados-pessoais .endereco .form-endereco .bairro {
            width: 35%;
        }

        .pay section .conteudo-pay .dados-pessoais .endereco .form-endereco .cidade {
            width: 100%;
        }

        .pay section .conteudo-pay .dados-pessoais .endereco .form-endereco .logradouro {
            width: 30%;
        }

        .pay section .conteudo-pay .dados-pessoais .endereco .form-endereco .avancar {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            flex-direction: row;
            width: 100%;
            margin: 10px 0 10px 0;
        }

            .pay section .conteudo-pay .dados-pessoais .endereco .form-endereco .avancar .btn-avancar {
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: row;
                background-color: #25B372;
                border-radius: 10px;
                height: 40px;
                color: #FFF;
                font-weight: bold;
            }

        .pay section .conteudo-pay .dados-pessoais .endereco .form-endereco .logradouro select {
            height: 35px;
            border: 1px solid #E5E5E5;
            padding-left: 10px;
            border-radius: 3px;
            box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
            margin-top: 7px;
        }

@media only screen and (max-width: 800px) {


    .pay section .conteudo-pay .dados-pessoais .endereco .form-endereco .cep {
        width: 40%;
    }

    .pay section .conteudo-pay .dados-pessoais .endereco .form-endereco .rua {
        width: 100%;
        margin-left: 1px;
    }


    .pay section .conteudo-pay .dados-pessoais .endereco .form-endereco .numero {
        width: 30%;
    }

    .pay section .conteudo-pay .dados-pessoais .endereco .form-endereco .complemento {
        width: 60%;
    }

    .pay section .conteudo-pay .dados-pessoais .endereco .form-endereco .bairro {
        width: 100%;
    }

    .pay section .conteudo-pay .dados-pessoais .endereco .form-endereco .cidade {
        width: 100%;
    }

    .pay section .conteudo-pay .dados-pessoais .endereco .form-endereco .logradouro {
        width: 50%;
    }
}

/*Método de Pagamento -----------------------------------------------------------------------------------*/

.pay section .conteudo-pay .mtd-pagamento {
    display: flex;
    flex-direction: column;
    width: 100%;
    border: 1px solid #E5E5E5;
    margin-bottom: 30px;
}

    .pay section .conteudo-pay .mtd-pagamento h4 {
        height: 50px;
        display: flex;
        align-items: center;
        padding-left: 15px;
    }

    /*Cartão de crédito -----------------------------------------------------------------------------------*/


    .pay section .conteudo-pay .mtd-pagamento .cartao-credito {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border-top: 1px solid #E5E5E5;
        border-bottom: 1px solid #E5E5E5;
    }


.topo-pagamento {
    display: flex;
    align-items: center;
    width: 100%;
}

    .topo-pagamento .checkbox-termo {
        margin-left: 10px;
    }

.pay section .conteudo-pay .mtd-pagamento .cartao-credito button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    border: none;
    width: 100%;
    background-color: #FFF;
    padding: 0 10px 0 10px;
}

    .pay section .conteudo-pay .mtd-pagamento .cartao-credito button h3 {
        display: flex;
        align-items: center;
    }

        .pay section .conteudo-pay .mtd-pagamento .cartao-credito button h3 img {
            width: 22px;
            margin-right: 10px;
        }

.pay section .conteudo-pay .mtd-pagamento .cartao-credito .resp-pay {
    display: flex;
    align-items: center;
    height: 40px;
    font-weight: 600;
    background-color: #FFFBED;
    padding-left: 20px;
    font-size: 12px;
}

.pay section .conteudo-pay .mtd-pagamento .cartao-credito .resp-pay-2 {
    display: none;
    align-items: center;
    height: 40px;
    font-weight: 600;
    background-color: #FFFBED;
    padding-left: 20px;
    font-size: 12px;
    margin-top: 20px;
}

.pay section .conteudo-pay .mtd-pagamento .cartao-credito .ctd-cartao-credito {
    display: none;
    flex-direction: column;
}


.pay section .conteudo-pay .mtd-pagamento .cartao-credito .form-cartao-credito {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px 0 20px;
    flex-wrap: wrap;
}

.pay section .conteudo-pay .mtd-pagamento .cartao-credito #card-2 {
    display: none;
}

.pay section .conteudo-pay .mtd-pagamento .cartao-credito .form-cartao-credito div {
    display: flex;
    flex-direction: column;
    margin: 10px 0 10px 0;
}

    .pay section .conteudo-pay .mtd-pagamento .cartao-credito .form-cartao-credito div input {
        height: 35px;
        border: 1px solid #E5E5E5;
        padding-left: 15px;
        box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
        margin-top: 7px;
        border-radius: 3px;
    }

        .pay section .conteudo-pay .mtd-pagamento .cartao-credito .form-cartao-credito div input::placeholder {
            color: #b8b8b8;
        }

    .pay section .conteudo-pay .mtd-pagamento .cartao-credito .form-cartao-credito div label {
        font-size: 11px;
        font-weight: 600;
    }

.pay section .conteudo-pay .mtd-pagamento .cartao-credito .form-cartao-credito .num-card {
    width: 30%;
}

    .pay section .conteudo-pay .mtd-pagamento .cartao-credito .form-cartao-credito .num-card .ctd-num-card {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        height: 35px;
        border: 1px solid #E5E5E5;
        box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
        margin-top: 7px;
        border-radius: 3px;
    }

        .pay section .conteudo-pay .mtd-pagamento .cartao-credito .form-cartao-credito .num-card .ctd-num-card input {
            margin-top: 0;
            border: none;
            box-shadow: none;
            padding-left: 15px;
            width: 80%;
        }

        .pay section .conteudo-pay .mtd-pagamento .cartao-credito .form-cartao-credito .num-card .ctd-num-card p {
            display: flex;
            align-items: center;
        }

            .pay section .conteudo-pay .mtd-pagamento .cartao-credito .form-cartao-credito .num-card .ctd-num-card p img {
                height: 20px;
                margin-right: 10px;
            }


.pay section .conteudo-pay .mtd-pagamento .cartao-credito .form-cartao-credito .nome-card {
    width: 65%;
}

.pay section .conteudo-pay .mtd-pagamento .cartao-credito .form-cartao-credito .value-payment {
    width: 30%;
}

.pay section .conteudo-pay .mtd-pagamento .cartao-credito .form-cartao-credito .date-card {
    width: 30%;
}


.pay section .conteudo-pay .mtd-pagamento .cartao-credito .form-cartao-credito .cod-security {
    width: 30%;
}

.pay section .conteudo-pay .mtd-pagamento .cartao-credito .form-cartao-credito .parcelas {
    width: 30%;
}


    .pay section .conteudo-pay .mtd-pagamento .cartao-credito .form-cartao-credito .parcelas select {
        height: 35px;
        border: 1px solid #E5E5E5;
        padding-left: 10px;
        border-radius: 3px;
        box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
        margin-top: 7px;
    }

.pay section .conteudo-pay .mtd-pagamento .cartao-credito .btn-cards {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px 0 15px 0;
}

    .pay section .conteudo-pay .mtd-pagamento .cartao-credito .btn-cards p {
        margin: 0 20px 0 20px;
        font-weight: bold;
        width: 100px;
        height: 33px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }


@media only screen and (max-width: 800px) {

    .pay section .conteudo-pay .mtd-pagamento .cartao-credito .form-cartao-credito .num-card {
        width: 100%;
    }

    .pay section .conteudo-pay .mtd-pagamento .cartao-credito .form-cartao-credito .nome-card {
        width: 100%;
    }

    .pay section .conteudo-pay .mtd-pagamento .cartao-credito .form-cartao-credito .date-card {
        width: 45%;
    }


    .pay section .conteudo-pay .mtd-pagamento .cartao-credito .form-cartao-credito .cod-security {
        width: 45%;
    }

    .pay section .conteudo-pay .mtd-pagamento .cartao-credito .form-cartao-credito .parcelas {
        width: 100%;
    }
}

/* Estilo do Botão interruptor */
.switch__container {
    width: 40px;
}

.switch {
    visibility: hidden;
    position: absolute;
    margin-left: -9999px;
}

    .switch + label {
        display: block;
        position: relative;
        cursor: pointer;
        outline: none;
        user-select: none;
    }

.switch--shadow + label {
    padding: 2px;
    width: 40px;
    height: 20px;
    background-color: #dddddd;
    border-radius: 60px;
}

    .switch--shadow + label:before,
    .switch--shadow + label:after {
        display: block;
        position: absolute;
        top: 1px;
        left: 1px;
        bottom: 1px;
        content: "";
    }

    .switch--shadow + label:before {
        right: 1px;
        background-color: #f1f1f1;
        border-radius: 60px;
        transition: background 0.4s;
    }

    .switch--shadow + label:after {
        width: 22px;
        background-color: #fff;
        border-radius: 100%;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
        transition: all 0.4s;
    }

.switch--shadow:checked + label:before {
    background-color: #F58646;
}

.switch--shadow:checked + label:after {
    transform: translateX(20px);
}

.switch--flat + label {
    padding: 2px;
    width: 60px;
    height: 30px;
    background-color: #dddddd;
    border-radius: 60px;
    transition: background 0.4s;
}

    .switch--flat + label:before,
    .switch--flat + label:after {
        display: block;
        position: absolute;
        content: "";
    }

    .switch--flat + label:before {
        top: 2px;
        left: 2px;
        bottom: 2px;
        right: 2px;
        background-color: #fff;
        border-radius: 60px;
        transition: background 0.4s;
    }

    .switch--flat + label:after {
        top: 4px;
        left: 4px;
        bottom: 4px;
        width: 56px;
        background-color: #dddddd;
        border-radius: 52px;
        transition: margin 0.4s, background 0.4s;
    }

.switch--flat:checked + label {
    background-color: #8ce196;
}

    .switch--flat:checked + label:after {
        margin-left: 60px;
        background-color: #8ce196;
    }

/*Cartão de debito -----------------------------------------------------------------------------------*/



.pay section .conteudo-pay .mtd-pagamento .cartao-debito {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-top: 1px solid #E5E5E5;
    border-bottom: 1px solid #E5E5E5;
}

    .pay section .conteudo-pay .mtd-pagamento .cartao-debito button {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 50px;
        width: 100%;
        border: none;
        background-color: #FFF;
        padding: 0 10px 0 10px;
    }

        .pay section .conteudo-pay .mtd-pagamento .cartao-debito button h3 {
            display: flex;
            align-items: center;
        }

            .pay section .conteudo-pay .mtd-pagamento .cartao-debito button h3 img {
                width: 22px;
                margin-right: 10px;
            }

    .pay section .conteudo-pay .mtd-pagamento .cartao-debito .resp-pay {
        display: flex;
        align-items: center;
        height: 40px;
        font-weight: 600;
        background-color: #A8E1C7;
        padding-left: 20px;
        font-size: 12px;
    }

    .pay section .conteudo-pay .mtd-pagamento .cartao-debito .ctd-cartao-debito {
        display: none;
        flex-direction: column;
    }


    .pay section .conteudo-pay .mtd-pagamento .cartao-debito .form-cartao-debito {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px 0 20px;
        flex-wrap: wrap;
    }

        .pay section .conteudo-pay .mtd-pagamento .cartao-debito .form-cartao-debito div {
            display: flex;
            flex-direction: column;
            height: 53px;
            margin: 10px 0 10px 0;
        }

            .pay section .conteudo-pay .mtd-pagamento .cartao-debito .form-cartao-debito div input {
                height: 35px;
                border: 1px solid #E5E5E5;
                padding-left: 15px;
                box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
                margin-top: 7px;
                border-radius: 3px;
            }

                .pay section .conteudo-pay .mtd-pagamento .cartao-debito .form-cartao-debito div input::placeholder {
                    color: #b8b8b8;
                }

            .pay section .conteudo-pay .mtd-pagamento .cartao-debito .form-cartao-debito div label {
                font-size: 11px;
                font-weight: 600;
            }

        .pay section .conteudo-pay .mtd-pagamento .cartao-debito .form-cartao-debito .num-card {
            width: 48%;
        }

        .pay section .conteudo-pay .mtd-pagamento .cartao-debito .form-cartao-debito .nome-card {
            width: 48%;
        }

        .pay section .conteudo-pay .mtd-pagamento .cartao-debito .form-cartao-debito .date-card {
            width: 48%;
        }


        .pay section .conteudo-pay .mtd-pagamento .cartao-debito .form-cartao-debito .cod-security {
            width: 48%;
        }


@media only screen and (max-width: 800px) {

    .pay section .conteudo-pay .mtd-pagamento .cartao-debito .form-cartao-debito .num-card {
        width: 100%;
    }

    .pay section .conteudo-pay .mtd-pagamento .cartao-debito .form-cartao-debito .nome-card {
        width: 100%;
    }

    .pay section .conteudo-pay .mtd-pagamento .cartao-debito .form-cartao-debito .date-card {
        width: 50%;
    }


    .pay section .conteudo-pay .mtd-pagamento .cartao-debito .form-cartao-debito .cod-security {
        width: 40%;
    }
}

/*Pix -----------------------------------------------------------------------------------*/



.pay section .conteudo-pay .mtd-pagamento .pix {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-top: 1px solid #E5E5E5;
    border-bottom: 1px solid #E5E5E5;
}

    .pay section .conteudo-pay .mtd-pagamento .pix button {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 50px;
        border: none;
        width: 100%;
        background-color: #FFF;
        padding: 0 10px 0 10px;
    }

        .pay section .conteudo-pay .mtd-pagamento .pix button h3 {
            display: flex;
            align-items: center;
        }

            .pay section .conteudo-pay .mtd-pagamento .pix button h3 img {
                width: 22px;
                margin-right: 10px;
            }

    .pay section .conteudo-pay .mtd-pagamento .pix .resp-pay {
        display: flex;
        align-items: center;
        height: 40px;
        font-weight: 600;
        background-color: #2bb4a963;
        padding-left: 20px;
        font-size: 12px;
    }

    .pay section .conteudo-pay .mtd-pagamento .pix .ctd-pix {
        display: none;
        flex-direction: column;
    }


    .pay section .conteudo-pay .mtd-pagamento .pix .form-pix {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px 0 20px;
        flex-wrap: wrap;
    }

        .pay section .conteudo-pay .mtd-pagamento .pix .form-pix p {
            width: 100%;
            display: flex;
            align-items: center;
            margin: 15px 0 15px 0;
        }


        .pay section .conteudo-pay .mtd-pagamento .pix .form-pix div {
            display: flex;
            flex-direction: column;
            margin: 10px 0 10px 0;
        }

            .pay section .conteudo-pay .mtd-pagamento .pix .form-pix div input {
                height: 35px;
                border: 1px solid #E5E5E5;
                padding-left: 15px;
                box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
                margin-top: 7px;
                border-radius: 3px;
            }

                .pay section .conteudo-pay .mtd-pagamento .pix .form-pix div input::placeholder {
                    color: #b8b8b8;
                }

            .pay section .conteudo-pay .mtd-pagamento .pix .form-pix div label {
                font-size: 11px;
                font-weight: 600;
            }


        .pay section .conteudo-pay .mtd-pagamento .pix .form-pix p {
            font-size: 11px;
        }


/*Carta Crédito -----------------------------------------------------------------------------------*/



.pay section .conteudo-pay .mtd-pagamento .carta-credito {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-top: 1px solid #E5E5E5;
    border-bottom: 1px solid #E5E5E5;
}

    .pay section .conteudo-pay .mtd-pagamento .carta-credito button {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 50px;
        border: none;
        width: 100%;
        background-color: #FFF;
        padding: 0 10px 0 10px;
    }

        .pay section .conteudo-pay .mtd-pagamento .carta-credito button h3 {
            display: flex;
            align-items: center;
        }

            .pay section .conteudo-pay .mtd-pagamento .carta-credito button h3 img {
                width: 22px;
                margin-right: 10px;
            }

    .pay section .conteudo-pay .mtd-pagamento .carta-credito .resp-pay {
        display: flex;
        align-items: center;
        height: 40px;
        font-weight: 600;
        background-color: #2bb4a963;
        padding-left: 20px;
        font-size: 12px;
    }

    .pay section .conteudo-pay .mtd-pagamento .carta-credito .ctd-carta-credito {
        display: none;
        flex-direction: column;
    }


    .pay section .conteudo-pay .mtd-pagamento .carta-credito .form-carta-credito {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 0 20px 20px;
        flex-wrap: wrap;
    }

        .pay section .conteudo-pay .mtd-pagamento .carta-credito .form-carta-credito p {
            width: 100%;
            display: flex;
            align-items: center;
            margin: 15px 0 15px 0;
        }


        .pay section .conteudo-pay .mtd-pagamento .carta-credito .form-carta-credito div {
            display: flex;
            flex-direction: column;
            margin: 10px 0 10px 0;
        }

            .pay section .conteudo-pay .mtd-pagamento .carta-credito .form-carta-credito div input {
                height: 35px;
                border: 1px solid #E5E5E5;
                padding-left: 15px;
                box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
                margin-top: 7px;
                border-radius: 3px;
            }

                .pay section .conteudo-pay .mtd-pagamento .carta-credito .form-carta-credito div input::placeholder {
                    color: #b8b8b8;
                }

            .pay section .conteudo-pay .mtd-pagamento .carta-credito .form-carta-credito div label {
                font-size: 11px;
                font-weight: 600;
            }


        .pay section .conteudo-pay .mtd-pagamento .carta-credito .form-carta-credito p {
            font-size: 11px;
        }



/*Boleto -----------------------------------------------------------------------------------*/



.pay section .conteudo-pay .mtd-pagamento .boleto {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-top: 1px solid #E5E5E5;
    border-bottom: 1px solid #E5E5E5;
}

    .pay section .conteudo-pay .mtd-pagamento .boleto button {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 50px;
        border: none;
        background-color: #FFF;
        padding: 0 10px 0 10px;
    }

        .pay section .conteudo-pay .mtd-pagamento .boleto button h3 {
            display: flex;
            align-items: center;
        }

            .pay section .conteudo-pay .mtd-pagamento .boleto button h3 img {
                width: 22px;
                margin-right: 10px;
            }

    .pay section .conteudo-pay .mtd-pagamento .boleto .resp-pay {
        display: flex;
        align-items: center;
        height: 40px;
        font-weight: 600;
        background-color: #428ecc70;
        padding-left: 20px;
        font-size: 12px;
    }

    .pay section .conteudo-pay .mtd-pagamento .boleto .ctd-boleto {
        display: none;
        flex-direction: column;
    }


    .pay section .conteudo-pay .mtd-pagamento .boleto .form-boleto {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px 0 20px;
        flex-wrap: wrap;
    }

        .pay section .conteudo-pay .mtd-pagamento .boleto .form-boleto p {
            width: 100%;
            display: flex;
            align-items: center;
            margin: 15px 0 15px 0;
        }

/*Cupom -----------------------------------------------------------------------------------*/

.pay section .conteudo-pay .cupom {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 60px;
}

    .pay section .conteudo-pay .cupom .input-cupom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        max-width: 450px;
    }

        .pay section .conteudo-pay .cupom .input-cupom input {
            height: 35px;
            width: 250px;
            border: 1px solid #E5E5E5;
            padding-left: 15px;
            box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
            margin-top: 7px;
            border-radius: 3px;
        }

        .pay section .conteudo-pay .cupom .input-cupom .btn-cupom {
            height: 35px;
            width: 100px;
            border: 2px solid #000;
            margin-top: 7px;
            border-radius: 3px;
            background-color: #FFF;
            font-weight: bold;
        }


/*Financing -----------------------------------------------------------------------------------*/



.pay section .conteudo-pay .mtd-pagamento .financing {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-top: 1px solid #E5E5E5;
    border-bottom: 1px solid #E5E5E5;
}

    .pay section .conteudo-pay .mtd-pagamento .financing button {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 50px;
        border: none;
        width: 100%;
        background-color: #FFF;
        padding: 0 10px 0 10px;
    }

        .pay section .conteudo-pay .mtd-pagamento .financing button h3 {
            display: flex;
            align-items: center;
        }

            .pay section .conteudo-pay .mtd-pagamento .financing button h3 img {
                width: 22px;
                margin-right: 10px;
            }

    .pay section .conteudo-pay .mtd-pagamento .financing .resp-pay {
        display: flex;
        align-items: center;
        height: 40px;
        font-weight: 600;
        background-color: #2bb4a963;
        padding-left: 20px;
        font-size: 12px;
    }

    .pay section .conteudo-pay .mtd-pagamento .financing .ctd-financing {
        display: none;
        flex-direction: column;
    }


    .pay section .conteudo-pay .mtd-pagamento .financing .form-financing {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px 0 20px;
        flex-wrap: wrap;
    }

        .pay section .conteudo-pay .mtd-pagamento .financing .form-financing p {
            width: 100%;
            display: flex;
            align-items: center;
            margin: 15px 0 15px 0;
        }


        .pay section .conteudo-pay .mtd-pagamento .financing .form-financing div {
            display: flex;
            flex-direction: column;
            margin: 10px 0 10px 0;
        }

            .pay section .conteudo-pay .mtd-pagamento .financing .form-financing div input {
                height: 35px;
                border: 1px solid #E5E5E5;
                padding-left: 15px;
                box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
                margin-top: 7px;
                border-radius: 3px;
            }

                .pay section .conteudo-pay .mtd-pagamento .financing .form-financing div input::placeholder {
                    color: #b8b8b8;
                }

            .pay section .conteudo-pay .mtd-pagamento .financing .form-financing div label {
                font-size: 11px;
                font-weight: 600;
            }


        .pay section .conteudo-pay .mtd-pagamento .financing .form-financing p {
            font-size: 11px;
        }


/*Termos -----------------------------------------------------------------------------------*/

.pay section .conteudo-pay .termos {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 60px;
    width: 100%;
    padding-left: 22px;
}

    .pay section .conteudo-pay .termos div {
        display: flex;
        align-items: center;
        height: 40px;
        margin-bottom: 20px;
    }


.checkbox-termo {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding-left: 25px;
    margin-bottom: 16px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .checkbox-termo input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

.checkmark {
    position: absolute;
    top: -4px;
    left: -4px;
    height: 20px;
    width: 20px;
    background-color: #eee;
    border: 2px solid #25B372;
    border-radius: 5px;
}

.checkbox-termo:hover input ~ .checkmark {
    background-color: #ccc;
}

.checkbox-termo input:checked ~ .checkmark {
    background-color: #25B372;
    border: 2px solid #25B372;
    border-radius: 5px;
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.checkbox-termo input:checked ~ .checkmark:after {
    display: block;
}

.checkbox-termo .checkmark:after {
    left: 6px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

@media only screen and (max-width: 800px) {
    .pay section .conteudo-pay .termos {
        width: 97%;
        padding-left: 10px;
    }
}

/*Buttons -----------------------------------------------------------------------------------*/

.pay section .conteudo-pay .buttons {
    display: flex;
    justify-content: end;
    width: 96%;
    margin-bottom: 60px;
}

    .pay section .conteudo-pay .buttons .btn-cancelar {
        height: 45px;
        width: 200px;
        border: 2px solid #EF5350;
        color: #EF5350;
        margin-top: 7px;
        border-radius: 3px;
        background-color: #FFF;
        font-weight: bold;
    }

        .pay section .conteudo-pay .buttons .btn-cancelar:hover {
            background-color: #EF5350;
            color: #FFF;
        }

    .pay section .conteudo-pay .buttons .btn-comprar {
        height: 45px;
        width: 200px;
        margin-top: 7px;
        border-radius: 3px;
        background-color: #25B372;
        color: #FFF;
        border: 2px solid #25B372;
        font-weight: bold;
    }

        .pay section .conteudo-pay .buttons .btn-comprar:hover {
            background-color: #FFF;
            border: 2px solid #25B372;
            color: #25B372;
        }

@media only screen and (max-width: 800px) {
    .pay section .conteudo-pay .buttons .btn-cancelar {
        height: 45px;
        width: 150px;
    }

    .pay section .conteudo-pay .buttons {
        width: 96%;
        padding-right: 16px;
    }
}


/*footer -----------------------------------------------------------------------------------*/

footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background-color: #F0F0F0;
    position: fixed;
    bottom: 0;
}

    footer p {
        margin-left: 20px;
        margin-bottom: 0px;
    }

    footer span {
        margin-right: 20px;
        font-size: small;
    }

    footer img {
        margin-right: 20px;
    }

/*Página Pay Success -----------------------------------------------------------------------------------*/

.pay-success {
    display: flex;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 100px;
}


    .pay-success section {
        display: flex;
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        width: 100%;
        position: relative;
    }

        .pay-success section .success {
            display: flex;
            height: 100%;
            width: 100%;
            justify-content: center;
            margin-top: 100px;
            width: 100%;
        }

            .pay-success section .success .ctd-success {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: space-between;
                box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
                padding: 20px;
                background-color: #FFF;
                border-radius: 10px;
                margin-bottom: 120px;
            }

                .pay-success section .success .ctd-success .topo-sucess {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: space-between;
                    padding: 10px;
                    border-radius: 10px;
                }

                    .pay-success section .success .ctd-success .topo-sucess div {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        margin: 10px;
                    }

                        .pay-success section .success .ctd-success .topo-sucess div h2 {
                            color: #25B372;
                        }

                .pay-success section .success .ctd-success a {
                    background-color: #E3AA3F;
                    height: 40px;
                    width: 150px;
                    margin-top: 10px;
                    border-radius: 5px;
                    color: #FFF;
                    font-weight: bold;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    text-decoration: none;
                }


    .pay-success .fundo {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        z-index: -1;
    }

        .pay-success .fundo img {
            width: 100%;
        }

    .pay-success .success-resumo {
        display: flex;
        justify-content: space-between;
        width: 100%;
        flex-wrap: wrap;
        margin: 10px;
    }

        .pay-success .success-resumo .success-compra {
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: space-between;
            margin-right: 20px;
        }

            .pay-success .success-resumo .success-compra h2 {
                display: flex;
                align-items: center;
                justify-content: space-between;
                width: 100%;
                font-size: 20px;
            }

                .pay-success .success-resumo .success-compra h2 img {
                    height: 35px;
                }


            .pay-success .success-resumo .success-compra div {
                display: flex;
                align-items: flex-start;
                flex-direction: column;
                justify-content: space-between;
            }

                .pay-success .success-resumo .success-compra div h3 {
                    margin: 5px 5px 5px 0px;
                }

                .pay-success .success-resumo .success-compra div p {
                    margin: 5px;
                }

                .pay-success .success-resumo .success-compra div strong {
                    margin: 5px;
                }

        .pay-success .success-resumo .success-pay {
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: space-between;
        }

            .pay-success .success-resumo .success-pay h2 {
                display: flex;
                align-items: center;
                width: 100%;
                justify-content: space-between;
                font-size: 20px;
            }

        .pay-success .success-resumo .success-pay {
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: space-between;
        }

            .pay-success .success-resumo .success-pay .vl-total-resumo {
                display: flex;
                align-items: center;
                justify-content: space-between;
                background-color: #F58646;
                margin-top: 20px;
                height: 60px;
                border-radius: 10px;
                width: 100%;
                color: #FFF;
            }

                .pay-success .success-resumo .success-pay .vl-total-resumo div {
                    margin-left: 10px;
                }

                .pay-success .success-resumo .success-pay .vl-total-resumo strong {
                    margin-right: 10px;
                }

@media only screen and (max-width: 800px) {
    .pay-success .success-resumo {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        width: 90%;
        flex-wrap: wrap;
        margin: 10px;
    }

        .pay-success .success-resumo .success-pay {
            margin-top: 50px;
            margin-bottom: 20px;
        }

    .pay-success section .success {
        margin-top: 50px;
    }

    .pay-success .success-resumo .success-compra {
        margin-right: 0;
    }
}

/*Página Pay Refuse -----------------------------------------------------------------------------------*/

.pay-success section .refuse {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    margin-top: 250px;
    margin-bottom: 150px;
    width: 100%;
    height: 100%;
    background-color: #FFF;
    box-shadow: -30px -30px 20px #FFF;
}

    .pay-success section .refuse .ctd-refuse {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        height: 150px;
    }

        .pay-success section .refuse .ctd-refuse div {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 400px;
        }

            .pay-success section .refuse .ctd-refuse div h2 {
                color: #EF5350;
            }

            .pay-success section .refuse .ctd-refuse div .msg-erro-processamento {
                width: 370px;
                font-size: 20px;
            }

        .pay-success section .refuse .ctd-refuse p {
            text-align: center;
            width: 450px;
        }

        .pay-success section .refuse .ctd-refuse a {
            background-color: #E3AA3F;
            height: 40px;
            width: 200px;
            border-radius: 5px;
            color: #FFF;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
        }

/*Página Pay boleto -----------------------------------------------------------------------------------*/

.pay-success section .boleto {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    margin-top: 250px;
    width: 100%;
    height: 300px;
    background-color: #FFF;
    box-shadow: -30px -30px 20px #FFF;
}


    .pay-success section .boleto .ctd-boleto {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        height: 62px;
    }

        .pay-success section .boleto .ctd-boleto div {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 550px;
        }

            .pay-success section .boleto .ctd-boleto div h2 {
                color: #2196F3;
            }

        .pay-success section .boleto .ctd-boleto p {
            text-align: center;
            width: 600px;
        }

        .pay-success section .boleto .ctd-boleto a {
            background-color: #E3AA3F;
            height: 40px;
            width: 150px;
            border-radius: 5px;
            color: #FFF;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
        }

.relogio {
    margin-top: 10px;
    width: 30px;
}

/*Página Modal PIX -----------------------------------------------------------------------------------*/
.modal-pix {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}


    .modal-pix .modal {
        display: flex;
        width: 600px;
        background-color: #FFF;
        border-radius: 10px;
        flex-wrap: wrap;
    }

    .modal-pix h2 {
        display: flex;
        width: 100%;
        margin: 25px 0 10px 15px;
        align-items: center;
    }

        .modal-pix h2 p {
            margin-left: 10px;
            font-size: 17px;
        }

        .modal-pix h2 img {
            margin-left: 10px;
            height: 19px;
        }

    .modal-pix .qr-code {
        display: flex;
        flex-direction: column;
        width: 250px;
        align-items: center;
        height: 270px;
        justify-content: space-around;
    }

        .modal-pix .qr-code p {
            background-color: #EAF8FA;
            width: 180px;
            padding: 8px;
            font-size: 13px;
            text-align: center;
        }

        .modal-pix .qr-code img {
            width: 180px;
        }

    .modal-pix .cod-qr-code {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        height: 270px;
        width: 250px;
    }

        .modal-pix .cod-qr-code .intrucoes-pix {
            background-color: #EAF8FA;
            width: 320px;
            font-size: 13px;
            height: 100px;
            padding: 8px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: space-between;
            border: none;
        }

        .modal-pix .cod-qr-code div {
            border: 1px solid #ccc;
            width: 320px;
            height: 30px;
            padding: 8px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

            .modal-pix .cod-qr-code div .codigo {
                width: 270px;
                height: 20px;
                text-overflow: ellipsis;
                overflow: hidden;
            }

            .modal-pix .cod-qr-code div button {
                height: 35px;
                width: 60px;
                border: 2px solid #000;
                border-radius: 3px;
                background-color: #FFF;
                font-weight: bold;
            }

                .modal-pix .cod-qr-code div button:hover {
                    background-color: #000;
                    color: #FFF;
                }

    .modal-pix .buttons {
        display: flex;
        align-items: center;
        width: 100%;
        justify-content: space-between;
        margin: 15px;
    }


        .modal-pix .buttons .confirmar {
            height: 35px;
            width: 240px;
            margin-top: 7px;
            border-radius: 3px;
            background-color: #25B372;
            color: #FFF;
            border: 2px solid #25B372;
            font-weight: bold;
            text-decoration: none;
            display: flex;
            align-items: center;
            justify-content: center;
        }

            .modal-pix .buttons .confirmar:hover {
                background-color: #FFF;
                border: 2px solid #25B372;
                color: #25B372;
            }

        .modal-pix .buttons .cancelar {
            height: 35px;
            width: 120px;
            margin-top: 7px;
            border-radius: 3px;
            background-color: #FFF;
            color: #EF5350;
            border: 2px solid #EF5350;
            font-weight: bold;
            text-decoration: none;
            display: flex;
            align-items: center;
            justify-content: center;
        }

            .modal-pix .buttons .cancelar:hover {
                background-color: #EF5350;
                border: 2px solid #EF5350;
                color: #FFF;
            }



/*Página Modal boleto -----------------------------------------------------------------------------------*/

.modal-boleto {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.308);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: none;
}

    .modal-boleto .modal {
        display: flex;
        width: 600px;
        background-color: #FFF;
        border-radius: 10px;
        align-items: center;
        flex-direction: column;
        flex-wrap: wrap;
    }

    .modal-boleto h2 {
        display: flex;
        width: 530px;
        margin: 25px 0 10px 15px;
        align-items: center;
        justify-content: space-between;
    }

        .modal-boleto h2 p {
            margin-left: 10px;
            font-size: 17px;
            width: 86%;
            justify-content: flex-start;
        }

        .modal-boleto h2 img {
            margin-right: 10px;
            height: 19px;
        }

        .modal-boleto h2 .img-fechar {
            margin-left: 10px;
            height: 20px;
        }

    .modal-boleto .cod-boleto {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        margin-right: 20px;
        align-items: center;
        height: 200px;
    }

        .modal-boleto .cod-boleto .intrucoes-boleto {
            background-color: #EAF8FA;
            font-size: 13px;
            height: 37px;
            width: 500px;
            padding: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            border: none;
        }

        .modal-boleto .cod-boleto div {
            border: 1px solid #ccc;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px;
        }

        .modal-boleto .cod-boleto button {
            border: 1px solid #ccc;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px;
        }

        .modal-boleto .cod-boleto button {
            height: 35px;
            width: 60px;
            border: 2px solid #000;
            border-radius: 3px;
            background-color: #FFF;
            font-weight: bold;
        }

            .modal-boleto .cod-boleto button:hover {
                background-color: #000;
                color: #FFF;
            }

        .modal-boleto .cod-boleto div .codigo {
            width: 270px;
            text-overflow: ellipsis;
            overflow: hidden;
        }

    .modal-boleto .buttons {
        display: flex;
        align-items: center;
        width: 100%;
        justify-content: center;
        margin: 15px 20px 15px 0;
    }



        .modal-boleto .buttons .download {
            height: 35px;
            width: 240px;
            margin-top: 7px;
            border-radius: 3px;
            background-color: #FFF;
            color: #1A78C2;
            border: 2px solid #1A78C2;
            font-weight: bold;
            text-decoration: none;
            display: flex;
            align-items: center;
            justify-content: center;
        }

            .modal-boleto .buttons .download:hover {
                background-color: #1A78C2;
                border: 2px solid #1A78C2;
                color: #FFF;
            }


/*Página Modal Refuse -----------------------------------------------------------------------------------*/

.modal-refuse {
    position: absolute;
    display: none;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.308);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

    .modal-refuse .modal {
        display: flex;
        width: 600px;
        background-color: #FFF;
        border-radius: 10px;
        align-items: center;
        flex-direction: column;
        flex-wrap: wrap;
    }

    .modal-refuse h2 {
        display: flex;
        width: 100%;
        margin: 25px 0 10px 15px;
        align-items: center;
        color: #FFD648;
    }

        .modal-refuse h2 p {
            margin-left: 10px;
            font-size: 17px;
        }

        .modal-refuse h2 img {
            margin-left: 10px;
            height: 19px;
        }


    .modal-refuse .info-refuse {
        background-color: #FFEFB6;
        font-size: 13px;
        margin-right: 15px;
        height: 37px;
        width: 500px;
        padding: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        border: none;
    }

        .modal-refuse .info-refuse p {
            width: 350px;
        }


    .modal-refuse .buttons {
        display: flex;
        align-items: center;
        width: 100%;
        justify-content: center;
        margin: 15px 20px 15px 0;
    }



        .modal-refuse .buttons .tentenovamente {
            height: 35px;
            width: 240px;
            margin-top: 7px;
            border-radius: 3px;
            background-color: #FFD648;
            color: #FFF;
            border: 2px solid #FFD648;
            font-weight: bold;
            text-decoration: none;
            display: flex;
            align-items: center;
            justify-content: center;
        }

            .modal-refuse .buttons .tentenovamente:hover {
                background-color: #FFF;
                border: 2px solid #FFD648;
                color: #FFD648;
            }



/*Página Modais -----------------------------------------------------------------------------------*/

.alerta {
    position: absolute;
    display: none;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.308);
    width: 100%;
    height: 100%;
    z-index: 99999;
}

    .alerta .modal {
        display: flex;
        padding: 17px 30px 17px 30px;
        background-color: #FFF;
        border-radius: 10px;
        align-items: center;
        justify-content: space-between;
        flex-direction: column;
        flex-wrap: wrap;
        min-width: 300px;
    }

        .alerta .modal h3 {
            color: #F58646;
            margin: 0px 10px 30px 10px;
        }

        .alerta .modal div {
            margin: 0px 10px 30px 10px;
        }

        .alerta .modal button {
            height: 35px;
            width: 150px;
            margin-top: 7px;
            border-radius: 3px;
            background-color: #F58646;
            color: #FFF;
            border: 2px solid #F58646;
            font-weight: bold;
            text-decoration: none;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .alerta .modal div button:hover {
            background-color: #FFF;
            border: 2px solid #F58646;
            color: #F58646;
        }


/*Modal Termo-----------------------------------------------------------------------------------*/

.termo {
    position: absolute;
    display: none;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.308);
    width: 100%;
    height: 100%;
    z-index: 99999;
}

    .termo .modal {
        display: flex;
        padding: 17px 30px 17px 30px;
        background-color: #FFF;
        border-radius: 10px;
        align-items: center;
        justify-content: space-between;
        flex-direction: column;
        flex-wrap: wrap;
        min-width: 300px;
    }

        .termo .modal h3 {
            color: #F58646;
            margin: 0px 10px 30px 10px;
        }

        .termo .modal div {
            margin: 0px 10px 30px 10px;
        }

        .termo .modal button {
            height: 35px;
            width: 150px;
            margin-top: 7px;
            border-radius: 3px;
            background-color: #F58646;
            color: #FFF;
            border: 2px solid #F58646;
            font-weight: bold;
            text-decoration: none;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .termo .modal div button:hover {
            background-color: #FFF;
            border: 2px solid #F58646;
            color: #F58646;
        }

    .termo .msg-termo {
        width: 600px;
        height: 500px;
        overflow-y: scroll;
        overflow-x: hidden;
    }


@media only screen and (max-width: 800px) {
    .termo .msg-termo {
        width: 100%;
        height: 400px;
        overflow-y: scroll;
        overflow-x: hidden;
    }
}

/*Modal loading*/


.wrap_loading {
    display: none;
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 9999;
    background: rgba(0, 0, 156, .6);
    overflow: hidden;
    transform: translate(-50%, -50%);
}

    .wrap_loading .area_loading {
        margin: 40px auto;
        width: 25%;
        height: 100%;
        text-align: center;
        vertical-align: middle;
    }

        .wrap_loading .area_loading .box_loading {
            margin: 35% auto;
            border-radius: 50%;
            padding: 0px 0px 0px 0px;
        }

            .wrap_loading .area_loading .box_loading img {
                display: inline-block;
                max-height: 100%;
                max-width: 100%;
            }




/* Financing -----------------------------------------------------------------------------------*/

.pay section .conteudo-pay .payment-financing {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    background-color: #FFFBED;
    box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.25);
    margin-bottom: 0px;
    position: sticky;
}

    .pay section .conteudo-pay .payment-financing .financings {
        display: flex;
        width: 88%;
    }

    .pay section .conteudo-pay .payment-financing h2 {
        display: flex;
        justify-content: space-between;
        width: 88%;
        margin-top: 20px;
    }

    .pay section .conteudo-pay .payment-financing h3 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 7px 0 7px 0;
        margin: 10px 0 10px 0;
        border-bottom: 1px solid;
    }

        .pay section .conteudo-pay .payment-financing h3 p {
            font-size: 15px;
            width: 80%;
        }

@media only screen and (max-width: 700px) {

    .pay section .conteudo-pay .payment-financing h3 p {
        font-size: 15px;
        width: 100%;
        padding:10px;
        text-align:center;
    }
}
.pay section .conteudo-pay .payment-financing-error {
    width: 99%;
    display: flex;
    align-items: flex-start;
    justify-content: left;
    flex-direction: column;
    background-color: #fc001d;
    border-radius: 10px;
    color: #FFFFFF;
    padding-left: 10px;
    margin: 0px 0px 20px 0px;
}

    .pay section .conteudo-pay .payment-financing-error .center {
        text-align: center;
        width: 100%;
    }

    .pay section .conteudo-pay .payment-financing-error h2 {
        margin: 3px 0 10px 0;
        font-size: 20px;
    }

    .pay section .conteudo-pay .payment-financing-error h3 {
        margin: 3px 0 10px 0;
        font-size: 14px;
    }

.pay section .conteudo-pay .payment-financing-message {
    width: 99%;
    display: flex;
    align-items: flex-start;
    justify-content: left;
    flex-direction: column;
    background-color: #F58646;
    border-radius: 10px;
    color: #FFFFFF;
    padding-left: 10px;
    margin: 0px 0px 20px 0px;
}

    .pay section .conteudo-pay .payment-financing-message h2 {
        margin: 3px 0 10px 0;
        font-size: 20px;
    }

    .pay section .conteudo-pay .payment-financing-message h3 {
        margin: 3px 0 10px 0;
        font-size: 14px;
    }

.pay section .conteudo-pay .payment-financing-success {
    width: 99%;
    display: flex;
    align-items: flex-start;
    justify-content: left;
    flex-direction: column;
    background-color: #1E8F5B;
    border-radius: 10px;
    color: #FFFFFF;
    padding-left: 10px;
    margin: 0px 0px 20px 0px;
}

    .pay section .conteudo-pay .payment-financing-success .center {
        text-align: center;
        width: 100%;
    }

    .pay section .conteudo-pay .payment-financing-success h2 {
        margin: 3px 0 10px 0;
        font-size: 20px;
    }

    .pay section .conteudo-pay .payment-financing-success h3 {
        margin: 3px 0 10px 0;
        font-size: 14px;
    }

/* Valida Token -----------------------------------------------------------------------------------*/
.pay section .conteudo-pay .token-client {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.pay section .conteudo-pay .token-data .token {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-top: 1px solid #E5E5E5;
    border-bottom: 1px solid #E5E5E5;
}

.pay section .conteudo-pay .token-client .token-data {
    display: flex;
    flex-direction: column;
    width: 100%;
    border: 1px solid #E5E5E5;
    margin-bottom: 10px;
}

    .pay section .conteudo-pay .token-client .token-data h4 {
        height: 50px;
        display: flex;
        align-items: center;
        padding-left: 15px;
    }

    .pay section .conteudo-pay .token-client .token-data .form-token {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px 0 20px;
        flex-wrap: wrap;
        margin-bottom: 20px;
        margin-top: 10px;
    }

        .pay section .conteudo-pay .token-client .token-data .form-token .token {
            width: 100%;
        }

            .pay section .conteudo-pay .token-client .token-data .form-token .token .ctd-token {
                display: flex;
                flex-direction: column;
            }

        .pay section .conteudo-pay .token-client .token-data .form-token div label {
            font-size: 11px;
            font-weight: 600;
        }

        .pay section .conteudo-pay .token-client .token-data .form-token div input {
            height: 35px;
            border: 1px solid #E5E5E5;
            padding-left: 15px;
            box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
            margin-top: 7px;
            border-radius: 3px;
        }


.pay section .conteudo-pay .token-client .buttons {
    display: flex;
    justify-content: end;
    width: 96%;
    margin-bottom: 10px;
}


.pay section .conteudo-pay .dados-pessoais .contratante .form-contratante select {
    height: 35px;
    border: 1px solid #E5E5E5;
    padding-left: 10px;
    border-radius: 3px;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
    margin-top: 7px;
}

.pay section .conteudo-pay .dados-pessoais .contratante .form-contratante div input[type=radio] {
    width: 20px;
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
    vertical-align: middle;
}

.pay section .conteudo-pay .dados-pessoais .contratante .form-contratante .occupation {
    width: 50%;
}

.pay section .conteudo-pay .dados-pessoais .contratante .form-contratante .politicallyExposed {
    width: 50%;
}

    .pay section .conteudo-pay .dados-pessoais .contratante .form-contratante .politicallyExposed .politicallyExposedOption {
        display: inline;
        width: 100%;
        margin: 0px 0px 0px 0px;
    }

        .pay section .conteudo-pay .dados-pessoais .contratante .form-contratante .politicallyExposed .politicallyExposedOption span {
            display: inline-flex;
            flex-direction: row;
            margin: 0px 0px 0px 0px;
            padding: 0px 0px 0px 0px;
            width: 30%;
            vertical-align: middle;
        }

            .pay section .conteudo-pay .dados-pessoais .contratante .form-contratante .politicallyExposed .politicallyExposedOption span label {
                padding-top: 19px;
            }

.pay section .conteudo-pay .informacoes-pagamento-financing .dados-pessoais .contratante .form-contratante span {
    font-size: 14px;
}

.pay section .conteudo-pay .informacoes-pagamento-financing .dados-pessoais .contratante .form-contratante div {
    display: flex;
    flex-direction: column;
    margin: 5px 0 0 0;
}

.pay section .conteudo-pay .informacoes-pagamento-financing .dados-pessoais .endereco .form-endereco span {
    font-size: 14px;
}

.pay section .conteudo-pay .informacoes-pagamento-financing .dados-pessoais .endereco .form-endereco div {
    display: flex;
    flex-direction: column;
    margin: 5px 0 0 0;
}

.financing-qrcode .pay-success section {
    margin-top: 0px;
}

.pay-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin: 0px 0px 10px 0px;
}

    .pay-list .payments {
        width: 90%;
    }

        .pay-list .payments .payment-financing {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            background-color: #FFFBED;
            box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.25);
            margin-bottom: 30px;
            position: sticky;
        }

            .pay-list .payments .payment-financing .desc-financing {
                justify-content: space-between;
                display:flex;
                width:100%;
                margin: 3px 0 10px 0;
                width: 100%;
            }


    @media only screen and (max-width: 700px) {

        .pay-list .payments .payment-financing .desc-financing {
            flex-direction:column;
            align-items:center;
        }
    }

    .pay-list .payments .payment-financing .desc-financing .column {
        margin: 3px 3px 10px 3px;
        display: inline-flex;
        font-size: 14px;
    }

    .pay-list .payments .payment-financing .desc-financing .btn-progress-financing {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        background-color: #25B372;
        border-radius: 10px;
        height: 30px;
        color: #FFF;
        font-weight: bold;
        width: 90px;
        border: none;
        cursor: pointer;
    }

    .conteudo-pay .pay-list .payments {
        width: 100%;
    }