/* KNOWLEDGEBASE */

/* kb list */
.article-outside-wrapper-list {
  /* margin-top:15px; */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.article-outside-wrapper-list .product {
  background-color: hsl(54, 99%, 56%);
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 15px;
  color: #2f3642;
}

.article-outside-wrapper-list .product:hover {
  background-color: hsl(191 100% 44% / .8);
}

.article-outside-wrapper-list .article-wrapper-icon {
  color: #2f3642;
}

.article-outside-wrapper-list .article-title h4 {
  color: rgb(47, 54, 66);
  font-size:18px;
  font-weight:700;
  font-family: Mulish, system-ui, sans-serif;
  line-height: 1.6;
}

.article-outside-wrapper-list:hover .article-title h4 {
  color: #00376e;
}

.article-outside-wrapper-list .article-text p, .article-outside-wrapper-list .article-description p {
  font-size: 14px;
  word-wrap:break-word;
}

.article-outside-wrapper-list .article-wrapper {
    min-width: 0;      /* ALLOW shrinking */
    width: 100%;       /* force equal sizing */
    box-sizing: border-box;
}

.article-outside-wrapper-list .article-wrapper .article-link {
  padding:15px;
  display:block;
}

.article-outside-wrapper-list .article-wrapper .article-link:hover, .article-wrapper .article-link:focus, .article-wrapper .article-link:visited {
  text-decoration:none;
}

.article-outside-wrapper-list .article-wrapper:hover {
  cursor:pointer;

}

.article-outside-wrapper-list .article-heading {
  padding-bottom:20px;
  display: flex;
  align-content: center;
  justify-content: space-between;
}

/* kb detail */
.article-outside-wrapper-detail .article-title h1 {
  color: #003670;
  font-size:30px;
}

.article-outside-wrapper-detail .article-text {
  padding:32px;
}

.article-outside-wrapper-detail .product-categories {
  margin-top:15px;
  margin-bottom:15px;
}

.article-outside-wrapper-detail .product-category {
  background-color: hsl(54, 99%, 56%);
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 15px;
  color: #2f3642;
}

.article-outside-wrapper-detail .article-date {
  color: #2f3642;
  margin-right:10px;
}

.article-outside-wrapper-detail .product-category:hover {
  background-color: hsl(191 100% 44% / .8);
}

.article-outside-wrapper-detail .article-back {
  margin-bottom:15px;
}

.article-outside-wrapper-detail .article-back a {
  color: #2f3642;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  transition-duration: .15s;

  padding-left: 12px;
  padding-right: 12px;
  padding-top:10px;
  padding-bottom:10px;
  
  white-space: nowrap;
  border-radius:6px;
  font-size:15px;
}

.article-outside-wrapper-detail .article-back a:hover {
  background-color: #fee820;
}

/* kb search */
.kb-search-input-wrapper, .kb-filter {
  position:relative;
  display:flex;
  width:768px;
  margin:auto;
  max-width:100%;
}

.kb-filter {
  flex-direction:column;
}



.kb-search-input-wrapper .search-icon {
  position: absolute;
  transform: translate(0, -50%);
  top: 50%;
  left: 10px;
  color: #2f3624;
}

.kb-search-input-wrapper .kb-search-input-field {
  padding-inline: 35px;
  height:56px;
  margin-top:0px;
  margin-bottom:0px;
}

.kb-search-input-wrapper button {
  position: absolute;
  right: 5px;
  padding-top: 2px;
  padding-bottom: 2px;
  transform: translate(0px, -50%);
  top: 50%;
  height:44px;
}

#kb-search {
  margin-top:0px;
  padding-left:30px;
}

.kb-pagination {
  display: flex;
  justify-content: center;
  margin: 15px 0px;
}

.kb-pagination .page-link {
  color: hsl(211 100% 22%);
}

.kb-pagination .page-item.active .page-link {
  background-color: hsl(211 100% 22%);
}

.kb-pagination .page-item.disabled {
  cursor: not-allowed;
}

/* Optional: make it responsive for smaller screens */
@media (max-width: 991px) {
  .article-outside-wrapper-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .article-outside-wrapper-list {
    grid-template-columns: repeat(1, 1fr);
  }
}
/* END KNOWLEDGEBASE */