@charset "utf-8";
/* CSS Document */


details {
  border-color: #878d99;
  color: rgba(255, 255, 255, 0.9);
  background: #1C1F22;
  border: 1px solid;
  cursor: pointer;
  transition: background 0.3s;
  border-radius: 4px;
  min-height: 48px;
  max-height: 60px;
  -webkit-transform-origin: top center;
          transform-origin: top center;
  -webkit-transform: rotate(0.1deg);
          transform: rotate(0.1deg);
  transition: all 0.3s;
}
details:hover {
  border-color: #878d99;
  color: rgba(255, 255, 255, 0.6);
}
details:active {
  color: rgba(255, 255, 255, 0.9);
  border-color: #6d7380;
}
details ::-webkit-details-marker {
  display: none;
}
details + details {
  margin-top: 10px;
}
details p {
  color: #fefefe;
  line-height: 1.7;
  margin: 10px 0 0;
  padding: 0 20px 15px;
}
details.primary {
  border-color: #409eff;
  color: rgba(255, 255, 255, 0.9);
  background: #409eff;
}
details.primary:hover {
  border-color: #409eff;
  color: rgba(255, 255, 255, 0.6);
}
details.primary:active {
  color: rgba(255, 255, 255, 0.9);
  border-color: #0d84ff;
}
details.success {
  border-color: #67c23a;
  color: rgba(255, 255, 255, 0.9);
  background: #67c23a;
}
details.success:hover {
  border-color: #67c23a;
  color: rgba(255, 255, 255, 0.6);
}
details.success:active {
  color: rgba(255, 255, 255, 0.9);
  border-color: #529b2e;
}
details.square {
  border-radius: 0;
}
details[open] {
  transition: all 0.6s;
  min-height: 100px;
  max-height: inherit;
}

summary {
  outline: none;
  font-size: 16px;
  padding: 13px;
}
summary:selection {
  background: transparent;
}
summary:after {
  margin-top: 2px;
  content: "➕";
  float: left;
  margin-right: 11px;
  text-align: center;
  font-size: 11px;
}
[open] summary:after {
  padding: 0 0 12px 0;
  content: "➖";
}