.md-spoiler {
    background-color: #D2FCFA;
    padding: 0.5em;
    border-left: 10px solid #8DFBF0;
    margin-bottom: 1.2em;
}

.md-spoiler[data-label]::before {
    content: attr(data-label);
    display: inline-block;
    color: #53EDEA;
    font-weight: bold;
    padding-right: 0.5em;
    margin-bottom: 0.5em;
    border-radius: 3px;
}

.md-spoiler:hover > .md-spoiler__line,
.md-spoiler:focus > .md-spoiler__line,
.md-spoiler:active > .md-spoiler__line {
    visibility: visible;
    opacity: 1;
    transition: opacity 200ms ease-in-out;
}

.md-spoiler.md-spoiler--inline {
    margin: 0;
    padding: 0.25em 0.5em;
    border-left-width: 5px;
}

.md-spoiler.md-spoiler--inline[data-label]::before {
    margin: 0;
}

.md-spoiler__line {
    margin: 0.5em 0;
    visibility: visible; /* war hidden;*/
    opacity: 1; /* war 0;*/
   /* transition: opacity 200ms ease-in-out, visibility 0ms 200ms linear;*/
}

.md-spoiler__line:first-child {
    margin-top: 0;
}
.md-spoiler__line:last-child {
    margin-bottom: 0;
}

.md-spoiler[data-label~="Info"] {
    background-color: #C4FCC8;
    border-color: #89F27F;
}

.md-spoiler[data-label~="Info"]::before {
    color: #5FCF5A;
}

.md-spoiler[data-label~="!"] {
    background-color: #E8ECD5;
    border-color: #FF5C64;
}

.md-spoiler[data-label~="!"]::before {
    color: #C11515;
}