/*
 * BOLEPIX_CODES_CARD_ONLY_V5703Z176WAADM5C6R2
 *
 * IMPORTANTE:
 * Não existe nenhuma regra para:
 *
 * #waAccountsGrid
 * .wa-account-card
 *
 * Este CSS atua SOMENTE no WhatsApp de
 * Códigos de Acesso.
 */

#bp-wa-codes-inline-v5703z176waadm5c6r2{
  width:100%;
  max-width:100%;

  display:flex;
  justify-content:flex-start;
  align-items:flex-start;

  margin:16px 0 20px;
  padding:0;

  box-sizing:border-box;
}

#bp-wa-codes-inline-v5703z176waadm5c6r2
.bp-wa-codes-host-v5703z176waadm5c6r2{
  width:auto !important;
  max-width:100% !important;

  margin:0 !important;
  padding:0 !important;

  position:static !important;

  background:transparent !important;
  border:0 !important;

  box-sizing:border-box !important;
}


/* ==========================================================
   CARD DOS CÓDIGOS
   ========================================================== */

#bp-wa-codes-inline-v5703z176waadm5c6r2
.bp-system-otp-c2r1-card{
  width:330px !important;
  max-width:100% !important;
  min-width:0 !important;

  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;

  gap:10px !important;

  margin:0 !important;
  padding:15px !important;

  background:#ffffff !important;

  border:1px solid #f0b56c !important;
  border-radius:15px !important;

  box-shadow:
    0 5px 18px rgba(15,23,42,.06) !important;

  box-sizing:border-box !important;
}


/* título */

#bp-wa-codes-inline-v5703z176waadm5c6r2
.bp-system-otp-c2r1-title{
  margin:0 !important;

  padding:0 0 7px !important;

  font-size:14px !important;
  font-weight:800 !important;
  line-height:1.25 !important;

  color:#172033 !important;

  border-bottom:1px solid #edf1f5 !important;
}


/* descrição */

#bp-wa-codes-inline-v5703z176waadm5c6r2
.bp-system-otp-c2r1-desc{
  margin:0 !important;

  font-size:12px !important;
  line-height:1.45 !important;

  color:#475569 !important;
}


/* situação */

#bp-wa-codes-inline-v5703z176waadm5c6r2
.bp-system-otp-c2r1-state{
  width:100% !important;

  display:flex !important;
  align-items:center !important;

  gap:7px !important;

  margin:0 !important;
  padding:9px 10px !important;

  background:#ecfdf3 !important;

  border:1px solid #bbf7d0 !important;
  border-radius:9px !important;

  color:#067a38 !important;

  font-size:12px !important;
  font-weight:700 !important;

  box-sizing:border-box !important;
}


/* ações */

#bp-wa-codes-inline-v5703z176waadm5c6r2
.bp-system-otp-c2r1-actions{
  width:100% !important;

  display:block !important;

  margin:0 !important;

  box-sizing:border-box !important;
}

#bp-wa-codes-inline-v5703z176waadm5c6r2
.bp-system-otp-c2r1-actions button{
  width:100% !important;
  min-height:40px !important;

  margin:0 !important;
  padding:9px 12px !important;

  border-radius:9px !important;

  box-sizing:border-box !important;
}


/* desconectar */

#bp-wa-codes-inline-v5703z176waadm5c6r2
.bp-system-otp-c2r1-disconnect{
  background:#fff1f2 !important;
  border:1px solid #fecdd3 !important;

  color:#b91c1c !important;

  font-weight:700 !important;
}


/* conectar */

#bp-wa-codes-inline-v5703z176waadm5c6r2
.bp-system-otp-c2r1-connect{
  font-weight:700 !important;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:600px){

  #bp-wa-codes-inline-v5703z176waadm5c6r2{
    display:block !important;
  }

  #bp-wa-codes-inline-v5703z176waadm5c6r2
  .bp-system-otp-c2r1-card{
    width:100% !important;
    max-width:none !important;
  }
}