@charset "utf-8";

#kboard-layout.kboard-faq .kboard-list-header {
  margin-top: calc(var(--kboard-el-gap) * 1.5);
  padding-top: calc(var(--kboard-el-gap) * 1.5);
  border-top: 1px solid var(--kboard-color-line);
}
#kboard-layout.kboard-faq .kboard-search {
  margin-left: auto;
}
#kboard-layout .kboard-faq__list {
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--kboard-color-line);
}
#kboard-layout .kboard-faq__details {
  border-bottom: 1px solid var(--kboard-color-line);
}
#kboard-layout .kboard-faq__details[open] {
  border-bottom-color: transparent;
}
#kboard-layout .kboard-faq__details::details-content {
  opacity: 0;
  transition: opacity 300ms, content-visibility 300ms allow-discrete;
}
#kboard-layout .kboard-faq__details[open]::details-content {
  opacity: 1;
}
#kboard-layout .kboard-faq__summary::-webkit-details-marker {
  display: none;
}
#kboard-layout .kboard-faq__summary {
  list-style-type: none;
  display: flex;
  gap: var(--kboard-el-gap);
  padding: 2em 0;
  padding-right: 76px;
  font-size: var(--kboard-font-size-r);
  cursor: pointer;
  position: relative;
}
#kboard-layout .kboard-faq__summary::after {
  content: '';
  display: block;
  width: 32px;
  height: 32px;
  position: absolute;
  right: 28px;
  top: calc(50% - 16px);
  background: no-repeat center/18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='10' viewBox='0 0 18 10'%3E%3Cg fill='none' stroke='%23222' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cline x1='1' y1='1' x2='9' y2='9'/%3E%3Cline x1='9' y1='9' x2='17' y2='1'/%3E%3C/g%3E%3C/svg%3E%0A");
}
#kboard-layout details[open] .kboard-faq__summary::after {
  transform: scaleY(-1);
}
#kboard-layout .kboard-faq__category {
  display: block;
  font-weight: 600;
  font-size: 16px;
  color: #9a9a9a;
  flex-basis: 200px;
  text-align: center;
}
#kboard-layout .kboard-faq__title {
  font-weight: 600;
}
#kboard-layout .kboard-faq__content {
  background-color: #f2f2f2;
  border-radius: calc(var(--kboard-el-gap) / 2);
  padding: calc(var(--kboard-el-gap) * 0.75);
  padding-left: calc(200px + var(--kboard-el-gap));
  position: relative;
}
#kboard-layout .kboard-faq__content:before {
  content: 'A';
  display: block;
  width: 46px;
  line-height: 46px;
  border-radius: 50%;
  background-color: var(--kboard-color-point);
  font-size: 16px;
  text-align: center;
  color: var(--kboard-color-white);
  position: absolute;
  top: calc(var(--kboard-el-gap) * 0.75);
  left: calc(100px - 23px);
}
#kboard-layout .kboard-faq__actions {
  margin-top: 16px;
}
#kboard-layout.kboard-faq .kboard-document-category {
  padding: 20px 0 0;
  color: var(--kboard-color-point);
  font-size: var(--kboard-font-size-r);
}
#kboard-layout.kboard-faq .kboard-document-category li {
  color: var(--kboard-color-point);
  font-size: var(--kboard-font-size-r);
}
@media (max-width: 980px) {
  #kboard-layout .kboard-faq__summary {
    display: block;
    padding: 2em 1em;
    padding-right: 76px;
  }
  #kboard-layout .kboard-faq__category {
    display: block;
    margin-bottom: 8px;
    text-align: left;
  }
  #kboard-layout .kboard-faq__content {
    padding: var(--kboard-el-gap);
    padding-left: calc(32px + calc(var(--kboard-el-gap) * 2));
  }
  #kboard-layout .kboard-faq__content:before {
    width: 32px;
    line-height: 32px;
    top: var(--kboard-el-gap);
    left: var(--kboard-el-gap);
  }
}
@media (max-width: 420px) {
  #kboard-layout .kboard-faq__summary {
    padding: var(--kboard-el-gap);
    padding-right: 56px;
  }
  #kboard-layout .kboard-faq__summary::after {
    width: 24px;
    height: 24px;
    right: 16px;
    top: calc(50% - 12px);
    background-size: 16px;
  }
  #kboard-layout .kboard-faq__content {
    padding-left: var(--kboard-el-gap);
  }
  #kboard-layout .kboard-faq__content:before {
    position: initial;
    margin-bottom: 16px;
  }
}