.accordion {
        width: 90%;
        max-width: 800px;
    }

    .accordion-item {
        position: relative;
        

    }

    .accordion-item .label {
        position: relative;
        padding: 20px;
        background: #eee;
        color: #333;
        cursor: pointer;
        
    }

    .accordion-item .label:hover {
        background: #ccc;
    }

    .accordion-item .label::before {
        content: '+';
        position: absolute;
        top: 50%;
        right: 20px;
        transform: translateY(-50%);
        font-size: 1.5em;
    }

    .accordion-item .content {
        position: relative;
        background: #fff;
        max-height: 0;
        overflow: hidden;
        transition: 0.2s;
    }

    .accordion-item.active .content {
        max-height: 500px;
        padding: 20px;
    }

    .accordion-item.active .label::before {
        content: '-';
    }