.accordion {

  &__item {
    padding: 16px 20px;
    margin: 0 0 48px 48px;
    border: 1px solid #9B410E;

    @media (max-width: $tablet) {
      margin-bottom: 10px;
      margin-left: 0;
    }
  }
  &__header {
    font-weight: 500;
    font-size: 20px;
    line-height: 100%;
    color: #1a1a1c;
    width: 100%;
    box-sizing: border-box;
    padding-right: 30px;
    position: relative;
    cursor: pointer;

    &:before {
      content: '';
      position: absolute;
      top: -5px;
      right: 5px;
      width: 30px;
      height: 30px;
      background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-down" viewBox="0 0 16 16"><path d="M3.204 5h9.592L8 10.481zm-.753.659 4.796 5.48a1 1 0 0 0 1.506 0l4.796-5.48c.566-.647.106-1.659-.753-1.659H3.204a1 1 0 0 0-.753 1.659"/></svg>') no-repeat center center;
      opacity: 0.4;
      transition: all .2s;
    }
    &.active {
      padding-bottom: 32px;

      &:before {
        transform: rotate(180deg)
      }
    }
  }
  &__panel {
    display: none;
    overflow: hidden;
    margin-top: 15px;
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 120%;
    color: #1a1a1c;

    .info-doc-label {
      display: inline-block;
      padding: 0.625rem;
      border-radius: 4px;
      margin-bottom: 1.25rem;
      line-height: 16px;
      border: 1px solid #9B410E;
    }

    .warning_notice {
      display: inline-block;
      border-left: 2px solid #da111b;
      padding: 0.5rem 2rem;
      margin: 2rem 0;
      font-weight: 500;
      line-height: 16px;

      p {
        margin-bottom: 0;
      }
    }

    strong {
      font-weight: bold;
    }

    p {
      margin-bottom: 15px;
    }
  }
}