/* spoiler */
div.spoiler {
  display: flex;
  flex-direction: column;
  padding: 5px;
}

div.spoiler div.spoiler-title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 7px;
  cursor: pointer;
  user-select: none;
  color: #000;
  border: 1px solid #bbb;
  border-bottom-color: #999;
  border-radius: 3px;
  background: #cfd1cf linear-gradient(to top, #f5f5f5, #e5e5e5);
  box-shadow:
    0 1px 0 rgb(255, 255, 255, 0.5),
    0 0 2px rgb(255, 255, 255, 0.15) inset,
    0 1px 0 rgb(255, 255, 255, 0.15) inset;
  font-size: 12px;
  font-weight: bold;
}

div.spoiler div.spoiler-toggle.hide-icon::after,
div.spoiler div.spoiler-toggle.show-icon::after {
  display: inline-flex;
  justify-content: center;
  width: 20px;
  height: 20px;
  content: " ";
  transition: 0.3s linear;
  background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 490 490' style='enable-background:new 0 0 490 490;' xml:space='preserve'%3E%3Cpolygon points='245,456.701 490,33.299 0,33.299 '/%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  -webkit-user-modify: read-only;
}

div.spoiler div.spoiler-toggle.hide-icon::after {
  transform: rotate(180deg);
}

div.spoiler div.spoiler-content {
  padding: 4px 10px;
  border: 1px solid #bbb;
  border-top: 0;
  border-radius: 3px;
  background: none repeat scroll 0 0 #f5f5f5;
  font-size: 13px;
}

div.spoiler div.spoiler-content.hidden {
  display: none;
}

div.spoiler div.spoiler-content.show {
  display: block !important;
}