.collapse-wrapper {
  width: 100%;
  height: auto; }

details {
  border-color: none;
  color: #fff;
  background: transparent;
  border: 1px solid;
  cursor: pointer;
  transition: background 0.3s;
  border-radius: 4px;
  height: auto;
  transform-origin: top center;
  transform: rotate(0.1deg);
  transition: all 0.9s; }
  details:hover {
    border-color: #ffffff;
    color: #ffffff; }
  details:active {
    color: #ffffff;
    border-color: #ffffff; }
  details ::-webkit-details-marker {
    display: none; }
  details + details {
    margin-top: 10px; }
  details p {
    color: #ffffff;
    line-height: 1.7;
    margin: 10px 0 0;
    padding: 0 20px 15px; }
  details.primary {
    border-color: #fff;
    color: #ffffff;
    background: #fff; }
    details.primary:hover {
      border-color: #7fffe1;
      color: #7fffe1; }
    details.primary:active {
      color: #ffffff;
      border-color: #ffffff }
  details.success {
    border-color: #ffffff;
    color: #ffffff;
    background: #ffffff}
    details.success:hover {
      border-color: #7fffe1;
      color: #7fffe1 }
    details.success:active {
      color: #ffffff;
      border-color:#ffffff}
  details.square {
    border-radius: 0; }
  details[open] {
    transition: all 0.9s;
    height: auto;
     }

summary {
  outline: none;
  font-size: 23px;
  padding: 13px;
  }
  summary:selection {
    background: transparent; }
  summary .close {
    display: none; }
    [open] summary .close {
      display: inline; }
  summary .open {
    display: inline; }
    [open] summary .open {
      display: none; }
  [open] summary {
    display: inline; }
  summary:after {
    margin-top: 2px;
    content: "+";
    float: left;
    margin-right: 11px;
    text-align:start;
    font-size: 23px; }
    [open] summary:after {
      padding: 0 0 12px 0;
      content: "-"; }