/* Tag pills */

.best-practices-tags {
  list-style: none;
  margin-bottom: 25px;
  padding-left: 0;
}

.best-practices-tags li {
  background: #f5f5f6;
  border-radius: 12px;
  display: inline-block;
  font-size: 14px;
  margin: 0 2px 0 0;
  padding: 0 12px;
}

.best-practices-tags li:last-child {
  margin: 0;
}

/* Do/don't labels */

.do-dont-section {
  display: inline-block;
  margin-right: 10px;
  vertical-align: top;
  width: 33%;
}

.do-dont-section-large {
  width: 66%;
}

@media (max-width: 719px) {
  .do-dont-section {
    display: none;
  }
}

.do-dont-caption-label,
.do-dont-caption-text {
  font-size: 14px;
  line-height: 1.4em;
}

@media (max-width: 719px) {
  .do-dont-caption-label,
  .do-dont-caption-text {
    display: none;
  }
}

.do-dont-caption-label {
  border-top: 15px solid;
  font-weight: 500;
  margin: 4px 0 0;
  padding: 10px 0 0;
}

.do-caption-label {
  border-color: #4caf50;
  color: #4caf50;
}

.dont-caption-label {
  border-color: #d32F2f;
  color: #d32F2f;
}

/* Best practice landing page header */

.best-practice-header {
  margin-bottom: 30px;
}

.best-practice-header img {
  float: left;
  height: 70px;
  margin-right: 30px;
  width: 70px;
}

.best-practice-header h1 {
  margin-bottom: 10px;
}

.best-practice-header p {
  margin: 0;
}

/* Best practices get started CTA section */

.best-practices-get-started {
  background: #f7f7f7;
  margin: 40px 0;
  padding: 30px;
  text-align: center;
}

.best-practices-get-started h2 {
  border-bottom: none;
  margin: 0 0 20px;
  /* Important is used below as removing the "back to top" padding from the h2
   * isn't possible given the high specifity of the selector adding it. */
  padding-right: 0 !important;
}

.best-practices-get-started .devsite-back-to-top-link {
  display: none;
}

.best-practices-get-started p:last-child {
  margin-bottom: 0;
}