/* BuddySocial v10.04 - Pimp help / quick-start page */

.pimp-help-page .retro-pad{
  padding:12px !important;
}

.pimp-help-intro{
  display:flex !important;
  gap:12px !important;
  align-items:center !important;
  padding:12px !important;
  border:1px solid #b9d0df !important;
  background:linear-gradient(180deg,#f8fcfe,#edf6fb) !important;
  margin-bottom:10px !important;
}

.pimp-help-icon{
  width:54px !important;
  height:54px !important;
  flex:0 0 54px !important;
  display:grid !important;
  place-items:center !important;
  font-size:28px !important;
  background:#fff !important;
  border:1px solid #c2d5e2 !important;
  border-radius:6px !important;
}

.pimp-help-intro h2{
  margin:0 0 4px !important;
  color:#255f88 !important;
  font-size:16px !important;
}

.pimp-help-intro p{
  margin:0 !important;
  color:#617b8d !important;
  line-height:1.45 !important;
}

.pimp-help-steps{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:8px !important;
}

.pimp-help-steps article{
  display:flex !important;
  gap:10px !important;
  min-height:145px !important;
  padding:10px !important;
  border:1px solid #b8cedd !important;
  background:
    linear-gradient(rgba(255,255,255,.91),rgba(255,255,255,.91)),
    var(--site-bg-image,linear-gradient(180deg,#fff,#eef6fb)) center/cover !important;
}

.pimp-help-steps article>span{
  width:30px !important;
  height:30px !important;
  flex:0 0 30px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:50% !important;
  background:#2f6fa8 !important;
  color:#fff !important;
  font-weight:900 !important;
}

.pimp-help-steps article b{
  display:block !important;
  color:#285f86 !important;
  margin-bottom:4px !important;
}

.pimp-help-steps article p{
  margin:0 0 7px !important;
  line-height:1.45 !important;
  color:#496a80 !important;
}

.pimp-help-steps article small{
  display:block !important;
  color:#806221 !important;
  background:#fff7e3 !important;
  border:1px solid #ead093 !important;
  padding:5px 6px !important;
}

.pimp-help-cheatsheet{
  margin-top:10px !important;
  padding:10px !important;
  border:1px solid #b8cfdc !important;
  background:#f7fbfd !important;
}

.pimp-help-cheatsheet h3{
  margin:0 0 8px !important;
  color:#285f86 !important;
}

.pimp-help-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:7px !important;
}

.pimp-help-grid>div{
  padding:8px !important;
  border:1px solid #d0dee7 !important;
  background:#fff !important;
}

.pimp-help-grid b,
.pimp-help-grid span{
  display:block !important;
}

.pimp-help-grid b{
  color:#315f7e !important;
  margin-bottom:3px !important;
}

.pimp-help-grid span{
  color:#6a7f8f !important;
  font-size:9px !important;
  line-height:1.4 !important;
}

.pimp-help-route{
  display:flex !important;
  justify-content:space-between !important;
  gap:12px !important;
  margin-top:10px !important;
  padding:9px 10px !important;
  border:1px solid #dfbd73 !important;
  background:linear-gradient(180deg,#fff8e8,#f9e8bc) !important;
  color:#785300 !important;
}

@media(max-width:900px){
  .pimp-help-steps{
    grid-template-columns:1fr !important;
  }
  .pimp-help-grid{
    grid-template-columns:1fr 1fr !important;
  }
}

@media(max-width:600px){
  .pimp-help-intro{
    align-items:flex-start !important;
  }
  .pimp-help-grid{
    grid-template-columns:1fr !important;
  }
  .pimp-help-route{
    flex-direction:column !important;
  }
}