:root {
  --preto-letra: #232323;
  /* --padrao: #1dd1a1; */
  --bg-seta: url("../../../assets/img/setas.svg");
  --vermelho: #ef5350;
}


main {
}

input,
select {
  background: #f8f8f8;
  padding: 12px;
  border: none;
  color: var(--neutral-500);
}

input[type="checkbox"] {
  width: 16px;
  height: 16px;
  background-color: #ccc;
  accent-color: var(--padrao);
  cursor: pointer;
  border-radius: 50%;
}

.header-produto {
  justify-content: space-between;
  align-items: center;
}

.head-dado-fatura {
  color: var(--neutral-400);
  font-size: 12px;
  font-weight: 100;
}

.head-dados-usuario {
  font-size: 14px;
  font-weight: 200;
  color: var(--neutral-450);
}

.editar-conta {
  color: var(--padrao);
  font-size: 12px;
  font-weight: 100;
}

.upper {
  text-transform: uppercase;
}

.conjunto-input {
  background: #f8f8f8;
  padding: 12px;
  border: none;
  color: var(--neutral-500);
  border-radius: 5px;
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
  position: relative;
  height: 55px;
}

.conjunto-input input {
  background: transparent !important;
  padding: 0;
  transition: all 0.3s ease;
  border: none;
  width: 100%;
  height: 55px
}


.conjunto-input-select{
    background: #F8F8F8;
    padding: 0 12px;
    border: none;
    color: var(--neutral-500);
    border-radius: 5px;
    display: flex;
    gap: 10px;
    align-items: center;
    cursor: pointer;
    position: relative;
}

.conjunto-input-select select, #plano-select{
    background: transparent var(--bg-seta) no-repeat right 0.25rem center;
    background-size: 8px 10px;
    padding: 12px 10px!important;
    cursor: pointer;
}

.card-input {
  background-color: transparent;
}

.card-input input:not(:first) {
  text-align: center;
}

#parcelas, #tratamentoTemp{
  padding: 22px 0 10px 0!important;
  /* height: 65px */
}

#tratamentoTemp{ height: 55px!important}

.conjunto-input > .label, .conjunto-input-select > .label{
    position: absolute;
    left: 12px;
    top: 3px;
    font-size: 12px;
    font-weight: 300;
    display: none;
    color: var(--cinza-label);
    line-height: 27px;
}

.gap-10{ gap: 10px}

.pointer {
  cursor: pointer !important;
}

.navbar-brand {
  color: var(--dark1);
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}

.links a {
  margin: 0 5px;
  color: var(--padrao);
  cursor: pointer
}

.acessos a {
  padding: 5px 15px;
  border-radius: 30px;
}

.login {
  background-color: var(--verde);
  font-weight: 600;
  padding: 5px 25px !important;
  color: var(--color);
}

.corpo {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 20px;
  border-radius: 7px;
}

.pagamentoFinal {
  position: fixed;
  bottom: 0;
}

.dadoFinal {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex-column {
  display: flex;
  flex-direction: column !important;
}

.flex-row {
  display: flex;
  flex-direction: row !important;
  gap: 5px;
}

.flex-row > * {
  flex: auto;
}

.desenvolvido-por {
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 10px;
  font-size: 14px;
  color: var(--neutral-450);
  background-color: var(--neutral);
}

.swalTitle {
  font-size: 20px; 
  font-weight: 600; 
  color: var(--cinza-escuro);
  margin-top: -15px;
}

.swalSubtitle{
  font-size: 16px; 
  font-weight: 400; 
  margin-top: 2px; 
  color: var(--cinza);
  margin: 5px 0px 15px 0px;
}

.swalSubtitleInfo{
	font-size: 15px;
    font-weight: 300;
    margin-top: 5px;
	color: var(--cinza);
}

.btn-ativo {
  background: var(--verde);
  font-weight: 700;
  color: var(--neutral-100);
  cursor: pointer;
}

.btn-inativo {
  background: var(--neutral-300);
  font-weight: 700;
  color: var(--neutral-50);
  /* cursor: not-allowed; */
}

.btn-confirm {
  border-radius: 5px;
  padding: 10px;
  text-align: center;
  background: var(--padrao);
  color: var(--color);
  cursor: pointer
}

.etapas {
  gap: 5px;
}

.progresso {
  width: 100%;
  height: 2px;
  background-color: var(--neutral-300);
  position: relative;
}

.progresso-atual {
  width: 33%;
  height: 2px;
  background-color: var(--verde);
  position: absolute;
  left: 0;
  transition: all 0.5s;
}

.passo-atual {
  color: var(--neutral-450);
  font-size: 14px;
}

.progresso-app{
    transition: width 0.3s ease;
    display: none
}

.num-atual {
  /* color: var(--verde); */
}

.passo {
  gap: 10px;
}

.icon-passo {
  padding: 10px;
  background-color: #1dd1a12e;
  width: fit-content;
  border-radius: 5px;
}

.icon-passo > i {
  color: var(--verde);
}

.titulo-page {
  font-size: 14px;
  font-weight: 400;
  color: var(--preto-letra);
  text-align: center;
}

.titulo-page-ativo {
  font-weight: 600;
}

.progresso-page {
  width: 100%;
  padding: 2px;
  background: #e4e4e4;
}

.progresso-page-ativo {
  background: var(--padrao) !important;
}

.titulo-assinar {
  font-weight: 600;
  font-size: 22px;
}

.titulo-secao {
  font-size: 20px;
  font-weight: 600;
  color: var(--neutral-700);
}

.titulo-prim {
  font-size: 18px;
  font-weight: 500;
  color: var(--neutral-700);
}

.subtitulo-secao {
  font-size: 15px;
  font-weight: 300;
  color: var(--neutral-450);
}

.dados-card {
  gap: 5px;
}

.dado-input {
  gap: 5px;
}

.label-input {
  font-size: 14px;
  color: var(--neutral-450);
  font-weight: 300;
  margin: 0;
}

.frequencias {
  display: flex;
  gap: 5px;
  flex-direction: column;
}

.btn-freq {
  border-radius: 5px;
  padding: 5px;
  text-align: center;
  background: var(--neutral-200);
  font-weight: 500;
  color: var(--neutral-50);
}

.btn-freq-ativo {
  background: var(--verde);
  font-weight: 700;
  color: var(--neutral-200);
  cursor: pointer;
}

.btn-metodo,
.btn-plano {
  background-color: var(--neutral);
  border-radius: 7px;
  width: 100%;
  font-weight: 300;
  padding: 15px;
  cursor: pointer;
  color: #a1a1a1;
  align-items: center;
  display: flex;
  justify-content: center;
}


.btn-metodo {
  background-color: #f5f5f5;
  gap: 5px;
}

.btn-metodo svg {
  width: 20px;
  /* margin-right: 10px; */
}

.metodo-ativo,
.freq-ativa {
  background: var(--padrao10);
  border: 1px solid var(--padrao);
  color: var(--padrao);
  font-weight: 500;
}

.planos {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
  margin-bottom: 12px;
}

.titulo-sec{
  font-weight: 500; 
  color: #4D4D4D; 
  font-size: 18px;
  margin-bottom: 5px
}

.box {
  background: #FBFBFB;
  border-radius: 20px;
}

.box-card {
  background: #f8f8f8;
  border: none;
  color: var(--neutral-500);
  border-radius: 5px;
}

.tarja-final {
  background: #F8F8F8;
  padding: 20px;
  width: 100%;
}

.resumo {
  /* background: #F8F8F8; */
  background: var(--neutral);
  padding: 20px;
  border-radius: 5px;
}

.resumo-plano {
  font-size: 16px;
  font-weight: 400;
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
}

.resumo-renova {
  color: #7c7c7c;
  font-size: 12px;
  margin-top: 10px
}

.resumo-infos {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
  color: #4d4d4d;
  font-size: 16px;
}

#cartao-bandeira{
    margin-right: 5px;
}

.termos {
  font-weight: 700;
  color: var(--neutral-500);
}


.termos:hover{
  color: var(--neutral-500)
}

.informativo{
    font-size: 13px; 
    color: #A7A7A7; 
    margin-top: 10px; 
    text-align: justify;
    margin-bottom: 15px
}

.melhor-escolha {
  color: var(--color);
  background: var(--padrao);
  border-radius: 5px;
  padding: 2px 10px;
  font-size: 12px;
  position: absolute;
  top: -15px;
  right: 13px;
}

#container-plano-select{
    display: none
}

#plano-select {
  width: 100%;
  /* margin-bottom: 10px; */
  font-size: 16px;
}

.bot-cartao {
  margin-bottom: 10px;
  background-color: #f8f8f8;
  color: #a1a1a1;
  padding: 15px;
  accent-color: var(--padrao);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

input[type='radio']:checked {
  background-color: var(--padrao);
  content: '';
  display: inline-block;
  visibility: visible;
  border: 2px solid var(--neutral);
}

.cartao-dados{
  color: var(--neutral-450);
  background: var(--neutral-150);
  border-radius: 7px;
  padding: 5px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: fit-content  
}

.cartao-select {
  width: 20px;
}

.cartao-select {
  width: 20px;
}

.container-checkbox {
  display: inline-block;
  position: relative;
  padding-left: 16px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

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

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 14px;
  width: 14px;
  border-radius: 2px;
  border: 1px solid #ccc;
}

.container-checkbox input:checked ~ .checkmark {
  background-color: var(--padrao);
  border: 1px solid var(--padrao);
}

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

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

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

#resumo-metodo{
    text-align: right
}

.erro_div{
  color: var(--vermelho); 
  font-size: 14px; 
  text-align: left;
  margin-top: 10px
}

.check-cartao {
  width: fit-content !important;
  margin-right: 5px;
}

.btn-pagar-final {
  margin-left: 30px;
  flex-basis: auto;
}

.valor-pagar-final {
  padding: 0;
}

.valor-linha-produto {
  font-weight: 500;
  font-size: 17px;
}

.valor-cortado {
  text-decoration: line-through;
  font-size: 14px;
  font-weight: 400;
}

.scroll-div {
  overflow-y: auto;
}

.coluna-dados-produto {
  padding: 0;
  height: 100%;
}

.coluna-dados-pagamento {
  padding-left: 30px;
  padding-right: 0;
  height: 100%;
}


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

  .tarja-final .dadoFinal {
    flex-direction: column;
    gap: 10px;
    align-items: normal;
  }

  .btn-pagar-final {
    margin: 0;
  }

  .coluna-dados-pagamento, .coluna-dados-produto {
    padding: 0;
    height: auto;
  }

  .dados-checkout > .row {
    gap: 20px;
  }

  .conjunto-input {
    font-size: 12px;
  }

}

/* @media screen and (max-width: 1160px) and (min-width: 781px){

  #metodo-pix, #metodo-credito {
    flex-flow: column;
    justify-content: space-around!important;
  }

}

@media screen and (max-width: 1160px){
    main, .header-produto, .dadoFinal {
        width: 70vw
    }
}

@media screen and (min-width: 781px){
    #forma-pagamento-col{ display: block!important}
    #resumo-pedido-app{display: none}
    #resumo-compra-card{display: block!important}
    #escolha-planos{display: block!important}
    #voltar-resumo-app{display: none}
    #resumo{display: block!important}
    #voltar-resumo-app{display: none!important}
    #confirmarPagamento{display: block!important}
    .informs-desktop{display: block!important}
    #voltar-resumo-app{display: none!important}
    #valorFinal{display: block}
}

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

    nav {
      margin-bottom: 0;
      padding: 20px 12px;
    }

    .dadoFinal {
      flex-direction: column;
      gap: 10px;
    }

    .btn-pagar-final {
      margin: 0;
    }

    .links, #trocar_conta, #esqueceu_senha{
      font-size: 14px!important
    }

    .navbar-brand{
      font-size:18px;
      gap: 5px;
    }

    #termos-app{
      font-size: 15px
    }

    #metadesPagamento{
        flex-flow: column-reverse;
    }

    .progresso-app{
        display: block !important
    }

    .col-md-6{
        max-width: 100%; 
        background-color: transparent!important; 
    }

    #plano-select{margin-bottom: 0px}

    #titulo-etapa-finalizar{display: none}
    #titulo-etapa-finalizar-app{display: block!important}

    #resumo{display: none}

    #confirmarPagamento{display: none}
    #continuarPagamento{display: block!important; padding-bottom: 20px}

    .etapas-checkout{display: none}

    .titulo-sec{margin-bottom: 15px}

    .informativo{
        font-size: 10px;
        text-align: center
    }

    #cadastro-conta div{flex-flow: column;}

    .senhas-cadastro{flex-flow: row!important}

    .select_container, input{ width: 100%!important}

    #valorFinal{display: none}
}

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

    main, nav, .dadoFinal {
        width: 92vw
    }

    #metodo-pix, #metodo-credito{
        flex-flow: column;
        justify-content: space-around!important;
        font-size: 14px
    }

    #metodo-credito i{
      font-size: 18px
    }

    .metodo-ativo{
      font-weight: 400
    }

    .fi-sr-credit-card, #metodo-pix img{
        margin-right: 0!important
    }

} */