.card .spoiler-button {
    width:      100%;
    text-align: left;
    color:      var(--fg);
    padding:    0;
    margin:     0;
    background: var(--bg) var(--bg) !important;
}

.card .spoiler-button:active, .card .spoiler-button:hover, .card .spoiler-button:focus {
    background: var(--bg) var(--bg) !important;
}

.card .spoiler-button:after {
    font-size:   0.5em;
    float:       right;
    content:     '\02795';
    color:       #666;
    margin-left: 5px;
    margin-top:  5px;
    color:       #666;
}

.card .spoiler-button-active:after {
    content: "\2796";
}

.card .spoiler-content {
    padding:       0;
    margin:        0;
    max-height:    0;
    margin-left:   1em;
    overflow:      hidden;
    transition:    max-height 0.2s ease-out;
}

.card .spoiler-content-active {
    margin:         1em;
    padding-bottom: 0;
}

.card .spoiler-content-active * {
    margin-bottom:  0;
    padding-bottom: 0;
}