/*******************************************************************************************
    css collapsable content 
    - because Microsoft Edge and IE dont support the <details> tag 

    requries this to work:
     <div class="collapsible">
            <input id="category-collapsible" type="checkbox" class="collapsible-toggle">
            <div class="collapsible-header"> 
                <label for="category-collapsible" class="collapsible-label form-label"><span class="expander"></span>Title here</label>
            </div>
            <div class="collapsible-content frame">
            ...
                content here
            ...

********************************************************************************************/

.collapsible {
    border: 1px solid #999;
}

.collapsible-header {
    background-color: #999;
    color: white;
    padding-bottom: 1px;
}


.collapsible-toggle {
    display: none;
}

    .collapsible-toggle + .collapsible-header + .collapsible-content {
        display: none;
    }

    .collapsible-toggle:checked + .collapsible-header + .collapsible-content {
        display: block;
    }

.collapsible .collapsible-label {
    font-size: 13px;
    /* these two make the label strech across the entire width so you can click anywhere on the bar to expand it*/
    display: inline-block;
    width: 100%;
}

    .collapsible .collapsible-label .expander {
        color: white;
        border: 1px solid white;
        height: 13px;
        width: 13px;
        display: inline-block;
        font-size: 12px;
        text-align: center;
        margin-right: 2px;
        line-height: initial;
    }

/*find a checked toggle followed by a collapsable content that contains a child of collapsable label*/
.collapsible-toggle:checked + .collapsible-header > .collapsible-label .expander:before {
    content: "᠆"; /* (U+1806), not a normal minus */
}

.collapsible-label .expander:before {
    content: "+";
}

.collapsible {
    /*    color:black;
    background-color:white;*/
}