/* Documentation Pages Shared Styles */
@charset "UTF-8";

/* :target {
  background-color: rgba(244, 208, 63, 0.61);
  border-radius: 5px;
  padding: 10px 20px;
} */

.descriptive-option:hover {
  border: 1px solid blue;
}

.flow-chart-item {
  color: black;
  width: 150px;
  padding: 10px 15px;
  margin: 2px;
  background: repeating-linear-gradient(45deg,
      hsl(168, 53%, 53%),
      hsl(168, 53%, 53%) 10px,
      #858dc2 10px,
      #858dc2 20px);
  font-weight: bold;
  border-radius: 5px;
  font-size: 15px;
}

.flow-chart-item-2 {
  color: black;
  width: 150px;
  padding: 10px 15px;
  margin: 2px;
  background: repeating-linear-gradient(-45deg,
      hsl(168, 53%, 53%),
      hsl(168, 53%, 53%) 10px,
      #858dc2 10px,
      #858dc2 20px);
  font-weight: bold;
  border-radius: 5px;
  font-size: 15px;
}

.filter-option {
  cursor: pointer;
  display: inline-block;
  padding: 5px 7px;
  margin: 5px 5px;
  border-radius: 3px;
  color: black;
}

.filter-option:hover {
  background-color: rgb(215, 215, 215);
}

input[type="radio"] {
  display: none;
}

input[type="radio"]:checked+.filter-option {
  background-color: black;
  color: white;
}

@media (max-width: 650px) {
  #mobile-overflow {
    display: none;
  }
}

@media (max-width: 500px) {
  .article__page {
    padding-left: 30px;
    padding-right: 30px;
  }
}

.abbreviation-title {
  display: none;
}

.full-title {
  display: block;
}

@media (max-width: 500px) {
  .full-title {
    display: none;
  }

  .abbreviation-title {
    display: block;
  }
}

.detail-information-row {
  margin: 4px 0;
  display: grid;
  grid-template-columns: 100px auto;
  grid-gap: 10px;
}

.truncation-notice {
  display: none;
  padding: 25px;
}

.empty-placeholder {
  padding: 25px;
}

li {
  margin: 5px;
  padding: 2px 0px;
}

kbd {
  background-color: black;
  border-radius: 3px;
  color: white;
  display: inline-block;
  font-size: 0.85em;
  padding: 2px 4px;
  white-space: nowrap;
}

.tag1,
.tag2,
.tag3,
.tag4 {
  border-radius: 3px;
  padding: 1px 4px;
  font-size: 0.85em;
  font-weight: 700;
  cursor: default;
}

.tag1 {
  background-color: wheat;
}

.tag2 {
  background-color: purple;
  color: white;
}

.tag3 {
  background-color: yellowgreen;
}

.tag4 {
  background-color: pink;
}

.tag1:hover,
.tag2:hover,
.tag3:hover,
.tag4:hover {
  opacity: 0.5;
}

.pulse-green1 {
  animation-name: pulse1;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-play-state: running;
}

@keyframes pulse1 {
  0% {
    color: yellowgreen;
  }
  50% {
    color: green;
  }
  100% {
    color: yellowgreen;
  }
}