input[type='checkbox'] {
    display: none;
}

.lbl-toggle {
    display: block;

    font-weight: revert;
    font-size: 19px;
    text-align: left;

    padding: 7px;

    color: #a4a4a4;
    background: #1d1d1d;

    cursor: pointer;

    border-radius: 7px;
    transition: all 0.25s ease-out;
}

.lbl-toggle:hover {
    color: #c3c3c3;
}

.lbl-toggle::before {
    content: ' ';
    display: inline-block;

    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid #eeeeee;

    vertical-align: middle;
    margin-right: 10px;
    transform: translateY(-2px);

    transition: transform .2s ease-out;
}

.collapsible-content .content-inner {
    background: #4f4f4f;
    /*border-bottom: 1px solid rgba(250, 224, 66, .45);*/

    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    padding: 10px;
}

.collapsible-content {
    max-height: 0px;
    overflow: hidden;

    transition: max-height .25s ease-in-out;
}

.toggle:checked + .lbl-toggle + .collapsible-content {
    max-height: 100vh;
}

.toggle:checked + .lbl-toggle::before {
    transform: rotate(90deg) translateX(-3px);
}

.toggle:checked + .lbl-toggle {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}