.ac-label {
       font-weight: 700;
       position: relative;
       padding: .5em 1em;
       margin-bottom: .5em;
       display: block;
       cursor: pointer;
       background-color: whiteSmoke;
       transition: background-color .15s ease-in-out;
   }

.ac-input:checked + label, .ac-label:hover {
    background-color: #007bff;
}

.ac-label:after, .ac-input:checked + .ac-label:after {
    content: "+";
    position: absolute;
    display: block;
    right: 0;
    top: 0;
    width: 2em;
    height: 100%;
    line-height: 2.25em;
    text-align: center;
    background-color: #007bff;
    transition: background-color .15s ease-in-out;
}

.ac-label:hover:after, .ac-input:checked + .ac-label:after {
    background-color: #b5b5b5;
}

.ac-input:checked + .ac-label:after {
    content: "-";
    }

.ac-input {
    display: none;
}

   .ac-text, .ac-sub-text {
       opacity: 0;
       height: 0;
       margin-bottom: .5em;
       transition: opacity .5s ease-in-out;
       overflow: hidden;
   }

.ac-input:checked ~ .ac-text, .ac-sub .ac-input:checked ~ .ac-sub-text {
    opacity: 1;
    height: auto;
}
   .ac-sub .ac-label {
       background: none;
       font-weight: 600;
       padding: .5em 2em;
       margin-bottom: 0;
   }

.ac-sub .ac-label:checked {
    background: none;
    border-bottom: 1px solid whitesmoke;
}

.ac-sub .ac-label:after, .ac-sub .ac-input:checked + .ac-label:after {
    left: 0;
    background: none;
}

.ac-sub .ac-input:checked + label, .ac-sub .ac-label:hover {
    background: none;
}

.ac-sub-text {
    padding: 0 1em 0 2em;
}