.area-accordion {
    position: relative;
}

.area-accordion-controls {
    margin-bottom: 10px;
}

.area-accordion-toggle-all.open-all {
    background-color: #070707;
    color: #f7f7f7 !important;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 14px;
    margin-right: 5px;
    border-radius: 3px;
}

.area-accordion-toggle-all.open-all:hover {
    background-color: #070707;
    color: #00ccff !important;
}

.area-accordion-toggle-all.close-all {
    background-color: #070707;
    color: #f7f7f7 !important;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 14px;
    margin-right: 5px;
    border-radius: 3px;
}

.area-accordion-toggle-all.close-all:hover {
    background-color: #070707;
    color: #FF99DD !important;
}

.area-accordion-item {
/*    border: 1px solid #ddd; */
    margin-bottom: 10px;
}

.area-accordion-header {
    background-color: #070707;
    color: #ff99dd !important;
    cursor: pointer;
    padding: 10px;
/*    border-bottom: 1px solid #ddd; */
    position: relative;
    font-weight: 800;
    font-size: 21px !important;
    text-transform: uppercase !important;
}

.area-accordion-header::before {
    content: '\25B6'; /* Triangolo a destra (chiuso) */
    right: 10px;
    font-size: 12px;
    transition: transform 0.3s ease;
    margin-right: 8px; /* Aggiunge spazio tra la freccia e il testo */
}

.area-accordion-header.active::before {
    content: '\25BC'; /* Triangolo verso il basso (aperto) */
}

.area-accordion-content {
    background-color: #080808;
    color: #00ccff !important;
    font-size: 17px !important;
    font-weight: 800;    
    display: none;
    padding: 10px;
}

.area-accordion-header.active + .area-accordion-content {
    display: block;
}