:root{
  --pv-bg:#f7f7fb;
  --pv-card:#ffffff;
  --pv-text:#1d2330;
  --pv-muted:#6b7280;
  --pv-accent: #8eb9ff;
  --pv-accent-600:#2563eb;
  --pv-border:#e5e7eb;
  --pv-highlight: #0020ff;
}

div[data-lastpass-icon-root] {
  display: none !important;
}

.pv-userprofile-page{
  padding:0 0 24px 0;
  background:var(--pv-bg);
}
.pv-userprofile-hero{
  display:flex;
  align-items:center;
  gap:16px;
  padding:25px 16px 14px 18px;
  background:linear-gradient(0deg,var(--pv-bg),#ffffff);
  width: auto;
  margin: 0 auto;
}

.pv-userprofile-hero .avatar{
  width:56px;
  height:56px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--pv-accent);
  color:#fff;
  font-weight:700;
  font-size:22px;
  box-shadow:0 4px 12px rgba(37,99,235,.35);
}
.pv-userprofile-hero .page-title{
  margin:0;
  font-size:24px;
  color:#0f172a;
  font-weight:700;}

.pv-userprofile-form{
  padding:0 16px;
}

.pv-userprofile-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}

@media (min-width: 900px){
  .pv-userprofile-grid{
    grid-template-columns:1fr 1fr;
  }
}

.card{
  background:var(--pv-card);
  border:1px solid var(--pv-border);
  border-radius:12px;
  padding:16px;
  box-shadow:0 2px 8px rgba(16,24,40,.06);
  margin: 10px 0 20px 0;
}

.card-title{
  margin:0 0 8px 0;
  font-size:18px;
  color:var(--pv-text);
}

.pv-userprofile-text{
  color:var(--pv-text);
}

--pv-accent-600

.pv-userregister {
  width: 50%;
  margin: 0 auto;
  padding: 20px 20px 0 20px;
}

/* Membership block */
.membership-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.membership-grid .form-item{
  margin:0;
}

.form-item-preferredlang > label {
  font-weight: normal;
}

/* Make "item" fields look aligned */
.form-item-name > label,
.form-item-email > label,
.form-item-password > label,
.form-item-password-pass1 > label,
.form-item-password-pass2 > label {
  display: inline-block;
  /* width: 200px;*/
  color: #777777;
}

#edit-name,
#edit-email,
#edit-password.input,
#edit-password-pass2.input,
#edit-pass {
  display: flex;
  padding: 5px 10px;
  width: 400px;
  color:var(--pv-muted);
}

.confirm-parent, .password-parent {
  /* display: grid; */
  /* grid-template-columns: 150px minmax(0,1fr); */
  max-width: none!important;
  gap: 8px 12px;
}

#edit-password-pass1,
#edit-password-pass2,
div.password-strength {
  display: flow;
   width: 400px
 }

#edit-password > label {
  font-size: 18px;
}

.password-strength__title,
.password-strength__text,
div.password-confirm-message {
  font-size: 14px;
  color:var(--pv-muted);
}

/* Password confirm composite rows */
/*.pv-userprofile-left .form-type-password-confirm .form-item{*/
/*  grid-template-columns:220px minmax(0,1fr);*/
/*}*/

/* Membership alignment (right column) */
.membership-grid{
  display:grid;
  grid-template-columns:110px minmax(0,1fr);
  gap:8px 12px;
}

.membership-grid .form-item{
  display:contents; /* allow title/value to occupy grid cells */
}
.membership-grid .form-item > label{
  justify-self:end;
  vertical-align: center;
  color:var(--pv-muted);
  margin: 0;
}
.membership-grid .form-item .pv-userprofile-text{
  align-self:center;
}

.membership-url {
  font-size: 20px;
  margin:0 0 20px 23px;
}

#edit-settings > div.form-item-show-hints,
#edit-settings > div.form-item-show-french,
#edit-settings > div.form-item-avoid-sisterverbs,
#edit-settings > div.form-item-show-voicesupport,
#edit-settings > div.form-item-langcode {
  margin: 5px;
}

.identtext {
  font-size: 12px;
  margin:0 0 20px 23px;
}

@media (max-width: 640px){
  .pv-userprofile-left .form-item,
  .pv-userprofile-left .form-type-password-confirm .form-item{
    display:block;
  }
  .pv-userprofile-left .form-item > label{
    justify-self:start;
    margin:0 0 4px 0;
  }
  .pv-userprofile-left .form-item .description{
    grid-column:auto;
  }
  .membership-grid{
    display:block;
  }
}

/* SAVE BUTTON */
.pv-userprofile-save{
  background:var(--pv-accent)!important;
  color:#fff!important;
  border:none;
  border-radius:8px;
  padding:6px 14px;
}
.pv-userprofile-save:hover{
  background:var(--pv-accent-600)!important;
  color:#fff!important;
}

#edit-register-link > div > a {
  color: var(--pv-highlight);
  text-underline: #0a6eb4;
}

@media (max-width: 900px){
  .pv-userprofile-hero{
    width: 100%;
  }
}