.panel {
    position: relative;
    width: 100%;
    margin-bottom: 1px;
    overflow: hidden;
}

.panel-body {
    max-height: 0;
    overflow: hidden;
    border: none;
    border-left: solid 1px var(--secondary-dark);
    border-right: solid 1px var(--secondary-dark);
}

.panel-body h4 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.panel-body p, .panel-body h3 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.panel-body ul, .panel-body ol {
    padding-left: 2.1rem;
    padding-right: 1rem;
}

.panel-body img {
    padding: 0 1rem 1rem 1rem;
}

.panel-body h4 {
    padding-left: 2.5rem;
    background-position: 1rem;
}

.panel label {
    position: relative;
    display: block;
    padding: 0.5rem 2rem 0.5rem 1em;
    background: var(--primary-dark);
    background: linear-gradient(to bottom, var(--primary-dark), var(--primary-dark-gradient-start));
    color: var(--plaintext-light);
    border: solid 1px var(--primary-dark);
    border-bottom: none;
    cursor: pointer;
    margin-bottom: 0;
}

.panel label::after {
    position: absolute;
    right: 10px;
    top: 0.5rem;
    display: block;
    text-align: center;
    -webkit-transition: all .35s;
    -o-transition: all .35s;
    transition: all .35s;
}

.panel input {
    position: absolute;
    opacity: 0;
    z-index: -1;
}

.panel input:checked ~ .panel-body {
    max-height: 100%;
    border: solid 1px var(--secondary-dark);
    padding-top: 1rem;
}

.panel input:checked ~ .panel-heading {
    background: var(--secondary-dark-gradient-start);
    background: linear-gradient(to bottom, var(--secondary-dark-gradient-start), var(--secondary-dark)
    );
    border: solid 1px var(--secondary-dark);
}

.panel input[type=checkbox] + label::after {
    content: ">";
    transform: rotate(90deg) scaleY(2.0);
    right: 11px;
}

.panel input[type=checkbox]:checked + label::after {
    transform: rotate(630deg) scaleY(2.0);
    right: 15px;
}