/* ========================================================
   PAYCARD V7.12.5
   DEMO AUTH EXACT V75 UI
   ======================================================== */

.v7125-demo-login {
  width:100%;

  margin-top:13px;
}


.v7125-demo-divider {
  margin:
    13px 0;

  display:flex;

  align-items:center;

  gap:10px;

  color:#9aa5ae;

  font-size:8px;

  font-weight:800;
}


.v7125-demo-divider::before,
.v7125-demo-divider::after {
  content:"";

  height:1px;

  flex:1;

  background:#e5eaed;
}


.v7125-demo-card {
  padding:13px;

  background:
    linear-gradient(
      135deg,
      #f1faf6,
      #fff
    );

  border:
    1px solid #cae8dc;

  border-radius:11px;
}


.v7125-demo-card-head {
  margin-bottom:10px;

  display:flex;

  align-items:flex-start;

  justify-content:space-between;

  gap:10px;
}


.v7125-demo-card-head small {
  display:block;

  margin-bottom:3px;

  color:var(--primary);

  font-size:7px;

  font-weight:900;

  letter-spacing:.12em;
}


.v7125-demo-card-head strong {
  display:block;

  color:#19242f;

  font-size:11px;
}


.v7125-demo-card-head b {
  padding:
    5px 7px;

  color:#08745d;

  background:#dff5ed;

  border-radius:999px;

  font-size:7px;
}


.v7125-demo-credentials {
  display:grid;

  grid-template-columns:
    1fr 1fr;

  gap:7px;
}


.v7125-demo-credentials > div {
  min-width:0;

  padding:
    8px 9px;

  background:#fff;

  border:
    1px solid #dfebe6;

  border-radius:8px;
}


.v7125-demo-credentials span {
  display:block;

  margin-bottom:2px;

  color:#84909a;

  font-size:7px;
}


.v7125-demo-credentials strong {
  display:block;

  color:#1b2731;

  font-size:8px;

  overflow-wrap:anywhere;
}


.v7125-demo-actions {
  margin-top:8px;

  display:grid;

  grid-template-columns:
    1fr 1fr;

  gap:7px;
}


.v7125-demo-actions button {
  min-height:39px;

  padding:8px;

  border-radius:8px;

  cursor:pointer;

  font-size:8px;

  font-weight:900;
}


.v7125-demo-fill {
  color:#08745d;

  background:#fff;

  border:
    1px solid #addbc9;
}


.v7125-demo-enter {
  color:#fff;

  background:var(--primary);

  border:
    1px solid var(--primary);
}


.v7125-demo-enter:disabled {
  opacity:.6;

  cursor:wait;
}


.v7125-demo-error {
  min-height:15px;

  margin-top:5px;

  color:#b42318;

  font-size:7px;
}


@media(max-width:480px) {

  .v7125-demo-credentials,
  .v7125-demo-actions {
    grid-template-columns:1fr;
  }

}