<FBITS:Cabecalho />
<script type="text/javascript" charset="utf-8">
    $(document).ready(function() {


    // Imprimi o e-mail logo acima dos preenchimentos de dados pessoais
    var primeiroEmailLemoon = $("input[name='Email']")[0];
    var segundoEmailLemoon = $(primeiroEmailLemoon).val();
    $(".emailLemoon").append(segundoEmailLemoon);

    //Colocar o nome de cada campo e adicionar o required
    $('input[name="Telefone"]').before("<p class='append-form'>Telefone:*</p>");
    $('input[name="Telefone"]').attr('required', 'disabled');
    $('input[name="Nome"]').before("<p class='append-form'>Nome:*</p>");
    $('input[name="Nome"]').attr('required', 'disabled');
    $('input[name="CPF"]').before("<p class='append-form'>CPF:*</p>");
    $('input[name="CPF"]').attr('required', 'disabled');

    //Ir para etapa 2: Ao clicar no botão da Tray (Ir para o endereço de entrega) ele vai próxima etapa
    $("button:contains(Ir para o endereço de entrega)").click(function() {

        setTimeout(function() {
            if (Fbits.Carrinho.Usuario !== null) {

                $("#lemoonDadosPessoais").toggleClass("etapa-aberta");
                $("#lemoonEndereco").toggleClass("etapa-aberta");

                $("#lemoonEnvio").removeClass("etapa-aberta");
                $("#lemoonPagamento").removeClass("etapa-aberta");
                $("#lemoonDadosPessoais").removeClass("etapa-aberta");

                $(".cabecalho-entrega").addClass("c-ativo");
                $(".cabecalho-envio").removeClass("c-ativo");
                $(".cabecalho-pessoal").removeClass("c-ativo");
                $(".cabecalho-pagamento").removeClass("c-ativo");
            }
        }, 3000);
    });

    //Ir para etapa 3:

    $("#prosseguirEntrega").click(function() {

        $("#lemoonDadosPessoais").toggleClass("etapa-aberta");
        $("#lemoonEndereco").toggleClass("etapa-aberta");

        $("#lemoonEnvio").removeClass("etapa-aberta");
        $("#lemoonPagamento").removeClass("etapa-aberta");
        $("#lemoonDadosPessoais").removeClass("etapa-aberta");

        $(".cabecalho-entrega").addClass("c-ativo");
        $(".cabecalho-envio").removeClass("c-ativo");
        $(".cabecalho-pessoal").removeClass("c-ativo");
        $(".cabecalho-pagamento").removeClass("c-ativo");
    });

    // Deixa o botão de comprar desabilitado por padrão e o adiciona classes da Lemoon

    $("#botao-comprar-lemoon").attr('disabled', 'disabled');
    $("button:contains(Ir para o endereço de entrega)").removeClass("btn btn-outline-primary");
    $("button:contains(Ir para o endereço de entrega)").addClass("botao-padrao botao-verde");

    // Alterar o botão (Ir para Formas de Envio) para SALVAR e adicionar classes Lemoon
    $("button:contains(Ir para Formas de Envio)").removeClass("btn btn-outline-primary");
    $("button:contains(Ir para Formas de Envio)").addClass("botao-padrao botao-verde");
    $("button:contains(Ir para Formas de Envio)").html("Salvar endereço");

    // Altera classes Lemoon nos botões cancelar
    $("button:contains(Cancelar)").removeClass("btn btn-outline-primary");
    $("button:contains(Cancelar)").addClass("botao-padrao");

    //Adiciona classe ao endereço selecionado
    $("[data-selecionado=true]").addClass("endereco-selecionado");


    //Esconde botões de prosseguir enquanto usuário não preencheu dados pessoais
    if (document.querySelector(".usuario-nome") == null) {

        $("#AlterarDados").hide();
        $("#prosseguirEntrega").hide();
        $("#editarlemoonDadosPessoais").hide();
    }

    //Esconde os botões de prosseguir enquanto não há endereço selecionado
    if (document.querySelector(".endereco-selecionado") == null) {
        $("#prosseguirEnvio").hide();
        $("#voltarParadados").hide();
        $("#editarlemoonEndereco").hide();
    }

    //Esconde os botões de prosseguir enquanto não há frete selecionado
    if (document.querySelector(".selected") == null) {
        $("#prosseguirPagamento").hide();
        $("#editarlemoonEnvio").hide();
    }

    //Esconde o botão de editar ETAPA PAGAMENTO enquanto não houver pagamento selecionado
    if (document.querySelector(".formas-pagamento .active") == null) {
        $("#editarlemoonPagamento").hide();
    }

    // Mostra botões de prosseguir e marca etapa como CHECK quando usuário preenche os dados pessoais
    if (document.querySelector(".usuario-nome") !== null) {

        $("#AlterarDados").show();
        $("#prosseguirEntrega").show();
        $("#etapa1 .check").addClass("cheked");
        $("#editarlemoonDadosPessoais").show();
    }

    // Começa botões de EDITAR__________________________________________________________________________

    $("#editarlemoonDadosPessoais").click(function() {
        $("#lemoonDadosPessoais").addClass("etapa-aberta");
        $("#lemoonEndereco").removeClass("etapa-aberta");
        $("#lemoonEnvio").removeClass("etapa-aberta");
        $("#lemoonPagamento").removeClass("etapa-aberta");

        $(".cabecalho-pessoal").addClass("c-ativo");
        $(".cabecalho-envio").removeClass("c-ativo");
        $(".cabecalho-entrega").removeClass("c-ativo");
        $(".cabecalho-pagamento").removeClass("c-ativo");
    });

    $("#editarlemoonEndereco").click(function() {
        $("#lemoonEndereco").addClass("etapa-aberta");
        $("#lemoonEnvio").removeClass("etapa-aberta");
        $("#lemoonPagamento").removeClass("etapa-aberta");
        $("#lemoonDadosPessoais").removeClass("etapa-aberta");

        $(".cabecalho-entrega").addClass("c-ativo");
        $(".cabecalho-envio").removeClass("c-ativo");
        $(".cabecalho-pessoal").removeClass("c-ativo");
        $(".cabecalho-pagamento").removeClass("c-ativo");
    });

    $("#editarlemoonEnvio").click(function() {
        $("#lemoonEnvio").addClass("etapa-aberta");
        $("#lemoonEndereco").removeClass("etapa-aberta");
        $("#lemoonPagamento").removeClass("etapa-aberta");
        $("#lemoonDadosPessoais").removeClass("etapa-aberta");

        $(".cabecalho-envio").addClass("c-ativo");
        $(".cabecalho-entrega").removeClass("c-ativo");
        $(".cabecalho-pessoal").removeClass("c-ativo");
        $(".cabecalho-pagamento").removeClass("c-ativo");
    });

    $("#editarlemoonPagamento").click(function() {
        $("#lemoonPagamento").addClass("etapa-aberta");
        $("#lemoonEndereco").removeClass("etapa-aberta");
        $("#lemoonEnvio").removeClass("etapa-aberta");
        $("#lemoonDadosPessoais").removeClass("etapa-aberta");

        $(".cabecalho-pagamento").addClass("c-ativo");
        $(".cabecalho-entrega").removeClass("c-ativo");
        $(".cabecalho-pessoal").removeClass("c-ativo");
        $(".cabecalho-envio").removeClass("c-ativo");
    });

    // Termina botões de EDITAR__________________________________________________________________________

    // Começa botões de PROSSEGUIR e VOLTAR __________________________________________________________________________

    $("#voltarParadados").click(function() {
        $("#lemoonEndereco").toggleClass("etapa-aberta");
        $("#lemoonDadosPessoais").toggleClass("etapa-aberta");
    });

    $("#voltarParaEndereco").click(function() {
        $("#lemoonEnvio").toggleClass("etapa-aberta");
        $("#lemoonEndereco").toggleClass("etapa-aberta");
    });

    $("#prosseguirEnvio").click(function() {
        $("#lemoonEndereco").toggleClass("etapa-aberta");
        $("#lemoonEnvio").toggleClass("etapa-aberta");

        $("#lemoonEndereco").removeClass("etapa-aberta");
        $("#lemoonPagamento").removeClass("etapa-aberta");
        $("#lemoonDadosPessoais").removeClass("etapa-aberta");

        $(".cabecalho-envio").addClass("c-ativo");
        $(".cabecalho-entrega").removeClass("c-ativo");
        $(".cabecalho-pessoal").removeClass("c-ativo");
        $(".cabecalho-pagamento").removeClass("c-ativo");
    });

    $("#prosseguirPagamento").click(function() {
        $("#lemoonEnvio").toggleClass("etapa-aberta");
        $("#lemoonPagamento").toggleClass("etapa-aberta");

        $("#lemoonEndereco").removeClass("etapa-aberta");
        $("#lemoonEnvio").removeClass("etapa-aberta");
        $("#lemoonDadosPessoais").removeClass("etapa-aberta");

        $(".cabecalho-pagamento").addClass("c-ativo");
        $(".cabecalho-entrega").removeClass("c-ativo");
        $(".cabecalho-pessoal").removeClass("c-ativo");
        $(".cabecalho-envio").removeClass("c-ativo");
    });

    // Termina botões de PROSSEGUIR e VOLTAR __________________________________________________________________________

    // Impede que usuário aperte SUBMIT até preencher algum campo
    $("#form0 button[type=submit]").attr('disabled', 'disabled');
    $("#form0").keyup(function() {
        $("button[type=submit]").removeAttr('disabled');
    });

    // _______________ AQUI COMEÇA O OBSERVER DA BODY__________________


    var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;

    var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {

            console.log("Mudou alguma coisa");

            // Se campos não tiverem nomes ainda, colocar nomes.
            if ($("#div-usuario-body-create p").hasClass("append-form")) {
                console.log("Append-form já tinha classe");
            } else {
                $('input[name="Telefone"]').before("<p class='append-form'>Telefone:*</p>");
                $('input[name="Telefone"]').attr('required', 'disabled');
                $('input[name="Nome"]').before("<p class='append-form'>Nome:*</p>");
                $('input[name="Nome"]').attr('required', 'disabled');
                $('input[name="CPF"]').before("<p class='append-form'>CPF:*</p>");
                $('input[name="CPF"]').attr('required', 'disabled');
            }


            // Se campos não tiverem nomes ainda, colocar nomes.
            if ($("#div-endereco-body p").hasClass("append-form")) {
                console.log("Append-form já tinha classe");
            } else {

                $('#input-endereco-cep').before("<p class='append-form'>CEP:*</p>");
                $('input[name="Numero"]').before("<p class='append-form'>Número:*</p>");
                $('input[name="Complemento"]').before("<p class='append-form'>Complemento:*</p>");
                $('input[name="Referencia"]').before("<p class='append-form'>Referência:*</p>");
                $('input[name="Destinatario"]').before("<p class='append-form'>Destinatário:*</p>");
            }

            // Adiciona o VALUE no destinatário
            if (document.querySelector("input[name='Destinatario']") !== null)
            {
                if ($('input[name="Destinatario"]').val(Fbits.Carrinho.Usuario.Nome)) {
                    console.log("Já estava preenchido");
                } else {
                    $('input[name="Destinatario"]').val(Fbits.Carrinho.Usuario.Nome);
                }
            }




            //Check ETAPA 1
            // Se USUARIO-NOME está preenchido, mostrar botões e CHECK na etapa
            if (document.querySelector(".usuario-nome") !== null) {

                $("#AlterarDados").show();
                $("#prosseguirEntrega").show();
                $("#etapa1 .check").addClass("cheked");
                $("#etapaTopo1").addClass("cheked");
                $("#editarlemoonDadosPessoais").show();
                $(".emailFechamento").remove();
            }

            //Check ETAPA 2
            // Se ENDERECO-SELECIONADO existir, mostrar botões e CHECK na etapa
            if (document.querySelector(".endereco-selecionado") !== null) {
                $("#prosseguirEnvio").show();
                $("#voltarParadados").show();
                $("#etapa2 .check").addClass("cheked");
                $("#etapaTopo2").addClass("cheked");
                $("#editarlemoonEndereco").show();
            }

            //Check ETAPA 3
            // Se SELECTEC existir, mostrar botões e CHECK na etapa
            if (document.querySelector(".selected") !== null) {
                $("#prosseguirPagamento").show();
                $("#etapa3 .check").addClass("cheked");
                $("#etapaTopo3").addClass("cheked");
                $("#editarlemoonEnvio").show();
            }

            //Check ETAPA 4
            // Se FORMA DE PAGAMENTO Estiver selecionada, mostrar botões e CHECK na etapa
            if (document.querySelector(".formas-pagamento .active") !== null) {
                $("#etapa4 .check").addClass("cheked");
                $("#etapaTopo4").addClass("cheked");
                $("#botao-comprar-lemoon").removeAttr('disabled', 'disabled');
                $("#editarlemoonPagamento").show();
            }

            //Verifica se endereço selecionado tem classe, e se não tiver, adiciona a classe.
            if ($("[data-selecionado=true]").hasClass("endereco-selecionado")) {
                console.log("ja tinha classe");
            } else {
                $("[data-selecionado=true]").addClass("endereco-selecionado");
            }



            //Verifica se BOTÃO tem classe, e se não tiver, adiciona a classe.
            if ($("button:contains(Ir para o endereço de entrega)").hasClass("botao-padrao")) {
                console.log("ja tinha classe");
            } else {
                $("button:contains(Ir para o endereço de entrega)").removeClass("btn btn-outline-primary");
                $("button:contains(Ir para o endereço de entrega)").addClass("botao-padrao botao-verde");
            }
            //Verifica se BOTÃO tem classe, e se não tiver, adiciona a classe.
            if ($("button:contains(Ir para Formas de Envio)").hasClass("botao-padrao")) {
                console.log("ja tinha classe");
            } else {
                $("button:contains(Ir para Formas de Envio)").removeClass("btn btn-outline-primary");
                $("button:contains(Ir para Formas de Envio)").addClass("botao-padrao botao-verde");
            }
            //Verifica se BOTÃO tem classe, e se não tiver, adiciona a classe.
            if ($("button:contains(Cancelar)").hasClass("botao-padrao")) {
                console.log("ja tinha classe");
            } else {
                $("button:contains(Cancelar)").removeClass("btn btn-outline-primary");
                $("button:contains(Cancelar)").addClass("botao-padrao");
            }
            //Altera texto do botão
            if ($("button:contains(Ir para Formas de Envio)")) {
                $("button:contains(Ir para Formas de Envio)").html("Salvar endereço");
            }
            //Se usuário não estiver preenchido, esconde botões
            if (document.querySelector(".usuario-nome") == null) {

                $("#AlterarDados").hide();
                $("#prosseguirEntrega").hide();
                $("#editarlemoonDadosPessoais").hide();
            }

            //Início da criação de RESUMO DE DADOS________________________________________________________________________
            -- if ($("#resumoDados").text().length > 0) {
                console.log("maior que 0")
            } else {
                $("#resumoDados").html(Fbits.Carrinho.Usuario.Email);
                $("#resumoSeumail").html(Fbits.Carrinho.Usuario.Email);
            }

            if ($("#resumoEndereco").text().length > 0) {
                console.log("maior que 0")
            } else {
                var RuaSelecionada = $("#endereco-info .fbits-rua").text();
                $("#resumoEndereco").html(RuaSelecionada);
                $("#resumoSeuendereco").html(RuaSelecionada);
            }

            // Verifica se endereço selecionado mudou
            var RuaSelecionada = $("#endereco-info .fbits-rua").text();
            if ($("#resumoEndereco").text() !== RuaSelecionada) {
                $("#resumoEndereco").html(RuaSelecionada);
                $("#resumoSeuendereco").html(RuaSelecionada);
            }

            // Exibe frete selecionado
            if ($("#resumoFrete").text().length > 0) {
                console.log("maior que 0")
            } else {
                var freteSelecionado = $(".selected .nome-item-envio").text();
                $("#resumoFrete").html(freteSelecionado);
                $("#resumoSeufrete").html(freteSelecionado);
            }
            // Verifica se frete selecionado mudou
            var freteSelecionado = $(".selected .nome-item-envio").text();
            if ($("#resumoFrete").text() !== freteSelecionado) {
                $("#resumoFrete").html(freteSelecionado);
                $("#resumoSeufrete").html(freteSelecionado);
            }
            //FIM da criação de RESUMO DE DADOS________________________________________________________________________
        });
    });

    observer.observe(document, {
        attributes: true,
        childList: true,
        subtree: true,
        characterData: true
    });
});
// _______________ AQUI FINALIZA O OBSERVER DA BODY__________________
</script>
<style type="text/css" media="all">
.botao-pagar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.item-endereco:hover {
    background: transparent;
    border: 2px solid;
    cursor: pointer;
    -webkit-transition: all .3s;
    transition: all .3s;
    padding-left: 43px;
}
.nome-item-prazo span:after {
    content: " após o envio do pedido";
}
.resumoLemoonEscolhas {
    float: left;
    clear: both;
    font-size: 12px;
    color: #000000;
    text-transform: uppercase;
    border-top: 1px solid;
    width: 100%;
    padding-top: 10px;
    line-height: 21px;
}
span#resumoSeumail:before {
    content: "Seu e-mail: ";
    font-weight: 700;
}
span#resumoSeuendereco:before {
    content: "Seu endereço:";
    font-weight: 700;
}
span#resumoSeufrete:before {
    content: "Frete: ";
    font-weight: 700;
}

span#resumoSeumail:empty ,#resumoSeuendereco:empty , #resumoSeufrete:empty{
    display: none;
}
span#resumoSeuendereco:before {
    content: "Seu endereço:";
    font-weight: 700;
}
span#resumoSeufrete:before {
    content: "Frete: ";
    font-weight: 700;
}


.validation-summary-errors {
    position: absolute;
    right: 0;
    z-index: 999;
    right: -53%;
    background: #f19898;
    border-radius: 5px;
    color: #FFF;
    margin-top: -8px;
}

.validation-summary-errors ul li {
    list-style: none;
}

.validation-summary-errors ul {
    margin: 0;
    padding: 5px;
    text-align: center;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 1px;
}
.etapas-topo .cheked {
    background: #01b257;
    font-size: 0;
}
.etapas-topo .cheked:after {
    font-family: FontAwesome;
    content: "\f00c";
    font-size: 19px;
    color: #ffffff;
    background: #01b257;
    border-radius: 100%;
    padding: 3px;
}
.etapa-topo {
    z-index: 2;
    background: #f7f7f7;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #9c9c9c;
    border-radius: 100%;
    color: #9c9c9c;
    font-weight: 900;
}
.etapas-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding: 40px;
}
.etapas-topo:after {
    content: "";
    position: absolute;
    width: 81%;
    height: 3px;
    left: 10%;
    background: #9c9c9c;
    z-index: 1;
}

a.voltar-carrinho {
    display: none;
}
div#div-endereco-body {
   background: #fff;
    padding: 13px;
    margin-top: 10px;
    margin-bottom: 10px;
    display: table;
    width: 100%;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
}
.cabecalho-checkout:focus-within {
    background: #000;
}
    .tab-content>.active {
    display: block;
    opacity: 1 !important;
}
.resumo-dados-lemoon:empty {
    display: none;
}
.selected {
    background: #f5f5f5 !important;
}
.endereco-selecionado {
    background: #f5f5f5 !important;
}
a#naoSeiCep {
    text-transform: uppercase;
    font-size: 9px;
    margin-top: 5px;
    color: #000;
}
  div#fisica {
   opacity: 1;
   }
   #lemoonDadosPessoais #myTab {
   display: none;
   }
   h5.title-box {
   display: none;
   }
   div#div-usuario {
   border: 0 !important;
   position: relative;
   }
   span#usuario-erro {
    top: 50%;
    position: absolute;
    padding: 3px 10px;
    right: 0;
    background: #f19898;
    border-radius: 5px;
    color: #FFF;
    margin-top: -8px;
}
   .input-group {
   width: 50% !important;
   margin: 35px 0;
   }
   .append-form {
    float: left;
    clear: both;
    position: absolute;
    z-index: 2;
    top: -22px;
    font-weight: 500;
    font-size: 14px;
}
   .usuario-nome {
   font-weight: 900;
   margin-bottom: 10px;
   }
   li.fbits-info-item {
   list-style: none;
   }
   ul.fbits-info-pessoal {
   margin: 0;
   padding: 20px 0;
   }
   a.fbits-sair:before {
   content: "Não é você?";
   }
   a.fbits-sair {
   color: #a5a5a5 !important;
   text-decoration: underline !important;
   font-size: 13px;
   }
   ul.usuario-dados {
   list-style: none;
   padding: 0;
   }
   @@media (max-width:600px){
    .botao-padrao {
    width: 100% !important;
    margin-right: 0 !important;
    margin-bottom: 9px!important;
}
}
   @@media (max-width:600px){
   .cabecalho-checkout h3 {
    font-size: 15px;
    letter-spacing: 0px;
    margin: 0;
    padding: 0;
}
.topo-checkout {
    margin-bottom: 20px;
}
.item-endereco {
    font-size: 14px !important;
    padding-right: 20% !important;
}
div#div-endereco-body .btn {
    width: 100% !important;
}
}
.botao-padrao {
    float: left;
    background: #b7b7b7;
    color: #FFF;
    padding: 10px 20px;
    margin-right: 10px;
    border-radius: 10px;
    margin-bottom: 10px;
    text-transform: uppercase;
    text-align: center;
    font-weight: 600;
    letter-spacing: 1px;
    font-size: 14px;
    border: 0;
    float: left;
    width: 48%;
}
   .botao-padrao:disabled, button[disabled] {
    border: 1px solid #d6d6d6;
    background-color: #e2e2e2 !important;
    color: #d6d6d6;
}
   .botao-padrao.botao-cinza {
   background: #b7b7b7;
   }
   .botao-padrao.botao-verde {
   background: #2c9e55;
   }
   .checkout-active {
   border: 0 !important;
   }
   .item-endereco ul {
   list-style: none;
   padding: 0;
   }
   .fbits-rua i {
   margin-right: 5px;
   }
div#div-endereco-body .btn {
    float: left;
    background: #7d7d7d;
    border: 1px solid #7d7d7d;
    color: #FFF;
    padding: 5px 20px;
    margin-right: 10px;
    border-radius: 10px;
    margin-bottom: 10px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
    font-size: 14px;
    width: auto !important;
    min-width: auto !important;
}
   form#formEndereco .btn {
   width: 50% !important;
   min-width: 50%;
   }
   .input-group {
   display: flex;
   align-items: center;
   }
   .item-envio.item-frete-option {
   background: #FFF;
   border: 1px solid #000;
   border-radius: 10px;
   margin-top: 10px;
   margin-bottom: 10px;
   display: grid;
   width: 100%;
   }
   .nome-item-envio {
   border-bottom: 1px solid #000;
   padding: 5px 10px;
   font-weight: 900;
   text-transform: uppercase;
   font-size: 13px;
   display: flex;
   align-items: center;
   justify-content: flex-start;
   }
   .nome-item-envio i {
   display: none;
   }
   .nome-item-envio span {
   margin-left: 5px;
   }
   .nome-item-valor {
   padding: 5px 0 0 15px;
   }
   .nome-item-prazo {
   padding: 5px 15px;
   }
   .nome-item-valor {
   padding: 5px 0 0 15px;
   font-weight: 900;
   }
   .nome-item-valor:before {
   content: "R$";
   }
   .nome-item-frete-gratis {
   padding: 5px 0 0 15px;
   font-weight: 900;
   }
   .fbits-frete-retirada-texto {
   padding: 5px 0 0 15px;
   font-weight: 900;
   }
   .item-envio.item-frete-option .fbits-frete-retirada-mais {
   float: left;
   margin-left: 2%;
   width: 96%;
   margin-bottom: 7px;
   }
   span.checkout-mensagem-forma-envio {
   margin-bottom: 10px;
   float: left;
   width: 100%;
   }
   .endereco-selecionado:before {
    font-family: FontAwesome;
    content: "\f00c";
    position: absolute;
    width: 20px;
    height: 20px;
    background: #2c9e55;
    border-radius: 100%;
    left: 10px;
    top: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFF;
}
   .item-endereco {
    background: #FFF;
    border: 1px solid #000;
    border-radius: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 100%;
    padding: 10px;
    position: relative;
    padding-left: 43px;
}
   .item-endereco form {
   position: absolute;
   right: 0;
   }
   button.fa.fa-pencil-square-o.edit-block {
   background: none;
   border: 0;
   display: flex;
   align-items: center;
   }
   button.fa.fa-pencil-square-o.edit-block:after {
   content: "Editar";
   font-family: poppins;
   font-size: 13px;
   }
   button.btn.btn-default.fbits-trocar-endereco {
   min-width: 50%;
   width: 50%;
   }
   .resumo-dados-lemoon {
   position: absolute;
   right: 0;
   bottom: -25px;
   background: #dcdcdc;
   color: #888;
   font-size: 13px;
   padding: 2px 10px;
   border: 1px solid #b7b7b7;
   border-radius: 0 0 0 19px;
   }
   .fbits-responsive-carrinho-detalhes {
   float: left;
   clear: none;
   width: 100%;
   }
   .fbits-responsive-carrinho-subtotal {
   line-height: 3em;
   overflow: hidden;
   background: transparent;
   border: 0;
   border-bottom: 0;
   float: none;
   }
   .fbits-responsive-carrinho-frete {
   text-transform: uppercase;
   }
   span.fbits-responsive-carrinho-subtotal-valor {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   text-transform: uppercase;
   }
   .text-left.fbits-responsive-carrinho-valores-header.vfrete {
   display: flex;
   align-items: center;
   justify-content: space-between;
   }
   .fbits-responsive-carrinho-total {
   overflow: hidden;
   line-height: 3em;
   background: transparent !important;
   border: 0;
   border-top: 1px solid #757575;
   margin-top: 20px;
   font-weight: 900;
   text-transform: uppercase;
   }
   .text-right.fbits-responsive-carrinho-total-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   }
   .fbits-responsive-carrinho-items {
   border: 0;
   border-bottom: 0;
   padding-right: 0;
   padding-left: 0;
   width: 100%;
   max-width: 100%;
   }

.fbits-responsive-carrinho-item-descricao a {
    text-transform: uppercase;
    color: #000;
    font-weight: 700;
    font-size: 11px;
    line-height: 13px !important;
    text-decoration: none;
    display: flex;
}
.fbits-responsive-carrinho-item-valor-unitario .text-nowrap:before {
    font-size: 12px;
    content: "";
    width: 100%;
    float: left;
    position: absolute;
    margin-top: -14px;
    font-weight: 900;
    text-align: left;
}


.fbits-responsive-carrinho-item-quantidade {
    margin-top: 5px;
    font-weight: 700;
}
.fbits-responsive-carrinho-item-atributos {
    text-transform: uppercase;
    font-size: 10px;
    margin-top: 5px;
}
   .fbits-responsive-carrinho-item-descricao {
   width: 70%;
   }
   .fbits-responsive-carrinho-item-titulo {
   display: flex;
   align-items: center;
   width: 74%;
   }
   .fbits-responsive-carrinho-item {
   position: relative;
   padding: 15px 0;
   width: 100%;
   margin: 0;
   display: flex;
   align-items: center;
   }
   .pull-left.fbits-responsive-carrinho-item-imagem {
   min-width: 35px;
   margin-right: 1em;
   height: 100%;
   width: 20px;
   }
   .fbits-responsive-carrinho-item-imagem img {
   width: 100% !important;
   }
   .inner-etapa {
   display: none;
   }
   .etapa-aberta {
   display: block !important;
   }
   .checkout-esquerda .cabecalho-checkout {
   margin-bottom: 35px;
   }
   ul.fbits-info-pessoal {
   margin: 0;
   padding: 0 0 20px 0;
   }
   .cabecalho-checkout {
   justify-content: space-between !important;
   }
   .check {
   margin-right: 9px;
   }
   .check.cheked:before {
   font-family: FontAwesome;
   content: "\f00c";
   font-size: 19px;
   color: #ffffff;
   background: #01b257;
   border-radius: 100%;
   padding: 3px;
   }
   .check:before {
   font-family: FontAwesome;
   content: "\f00c";
   font-size: 19px;
   color: #9c9c9c;
   background: #656565;
   border-radius: 100%;
   padding: 3px;
   }
   .segura-check {
   display: flex;
   align-items: center;
   justify-content: flex-start;
   }
   .emailFechamento {
    color: #8c8c8c;
    font-size: 14px;
}
.emailFechamento a {
    color: #8c8c8c;
    text-decoration: underline;
}
span#usuario-erro:empty {
    display: none;
}
</style>
<div class="container remove">
    <div class="row">
        <div class="col-2">

        </div>
        <div class="col-12 col-sm-8 col-lg-8">
            <div class="etapas-topo">
                <div class="etapa-topo" id="etapaTopo1">
                    1
                </div>
                <div class="etapa-topo" id="etapaTopo2">
                    2
                </div>
                <div class="etapa-topo" id="etapaTopo3">
                    3
                </div>
                <div class="etapa-topo" id="etapaTopo4">
                    4
                </div>
            </div>
        </div>
        <div class="col-2">

        </div>
    </div>
</div>
<div class="container">
   <div class="row">
      <div class="col-12 col-sm-8 col-lg-8 checkout-esquerda">

         <div class="etapa-checkout" id="etapa1">
            <div class="cabecalho-pessoal cabecalho-checkout c-ativo">
               <div class="segura-check">
                  <div class="check"></div>
                  <h3>1. DADOS PESSOAIS</h3>
               </div>
               <div id="editarlemoonDadosPessoais" class="editar-titulo">
                  Editar
               </div>
               <div class="resumo-dados-lemoon" id="resumoDados"></div>
            </div>
            <div id="lemoonDadosPessoais" class="inner-etapa etapa-aberta">
                <div class="emailFechamento">
                    Seu e-mail: <span class="emailLemoon"></span> <a href="#">Sair ou Trocar</a>
                </div>
               <FBITS:Usuario />
               <div id="AlterarDados" class="botao-padrao botao-cinza">
                  Alterar dados pessoais
               </div>
                <div id="prosseguirEntrega"  class="botao-padrao botao-verde">
                  Ir para endereço de entrega
               </div>

            </div>
         </div>


         <div class="etapa-checkout" id="etapa2">
            <div class="cabecalho-entrega cabecalho-checkout">
               <div class="segura-check">
                  <div class="check"></div>
                  <h3>2. ENDEREÇO DE ENTREGA</h3>
               </div>
               <div id="editarlemoonEndereco" class="editar-titulo">
                  Editar
               </div>
               <div class="resumo-dados-lemoon" id="resumoEndereco"></div>
            </div>
            <div id="lemoonEndereco" class="inner-etapa">
               <span class="mensagem-lemoon">Clique em um endereço para selecionar</span>
               <FBITS:Endereco />
               <div id="voltarParadados" class="botao-padrao botao-cinza" style="display: none;">
                  Voltar
               </div>
               <div id="prosseguirEnvio"  class="botao-padrao botao-verde" style="display: none;">
                  Ir para opções de frete
               </div>

            </div>
         </div>

         <div class="etapa-checkout" id="etapa3">
            <div class="cabecalho-envio cabecalho-checkout">
               <div class="segura-check">
                  <div class="check"></div>
                  <h3>3. FORMAS DE ENVIO</h3>
               </div>
               <div id="editarlemoonEnvio" class="editar-titulo">
                  Editar
               </div>
               <div class="resumo-dados-lemoon" id="resumoFrete"></div>
            </div>
            <div id="lemoonEnvio" class="inner-etapa">
               <FBITS:Frete ordenacao="" />
               <div id="voltarParaEndereco" class="botao-padrao botao-cinza">
                  Voltar
               </div>
               <div id="prosseguirPagamento" class="botao-padrao botao-verde">
                  Ir para pagamento
               </div>

            </div>
         </div>

         <div class="etapa-checkout" id="etapa4">
            <div class="cabecalho-checkout cabecalho-pagamento">
               <div class="segura-check">
                  <div class="check"></div>
                  <h3>4. PAGAMENTO</h3>
               </div>
               <div id="editarlemoonPagamento" class="editar-titulo">
                  Editar
               </div>
            </div>
            <div id="lemoonPagamento" class="inner-etapa">
               <FBITS:Pagamento />
               <div class="botao-pagar mt-4">
                   <input class="botao-padrao botao-verde" id="botao-comprar-lemoon" type="button" onclick="Fbits.Carrinho.Pedido.Fechar()" value="Finalizar Compra">
               </div>
            </div>
         </div>
      </div>
      <div class="col-12 col-sm-4 col-lg-4">
         <div class="etapa-checkout">
            <div class="cabecalho-checkout">
               <h3>RESUMO DO PEDIDO</h3>
            </div>
            <div>
               <FBITS:Produtos />
            </div>
         </div>
         <div class="etapa-checkout mt-4">
            <div class="cabecalho-checkout">
               <h3>RESUMO DA COMPRA</h3>
            </div>
            <div>
               <FBITS:Resumo />

               <div class="resumoLemoonEscolhas">
                   <div class="opcaoEscolhida">
                       <span id="resumoSeumail"></span>
                   </div>
                   <div class="opcaoEscolhida">

                       <span id="resumoSeuendereco"></span>
                   </div>
                   <div class="opcaoEscolhida">
                       <span id="resumoSeufrete"></span>
                   </div>
               </div>

            </div>
         </div>
      </div>
   </div>
</div>
<FBITS:Rodape />