<ul role="list" class="rtds-hierarchy rtds-accordion rtds-accordion--smart">
<li class="rtds-hierarchy__item rtds-accordion__item rtds-grid rtds-pr-3 rtds-py-3 rtds-pl-8 rtds-space-y-4 rtds-background-01 rtds-rounded-lg rtds-shadow-sm rtds-cursor-grab">
<div class="rtds-flex rtds-items-center rtds-justify-between rtds-group/item">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 -rtds-ml-4 md:-rtds-ml-5 rtds-flex-shrink-0 rtds-transition-opacity rtds-opacity-0 group-hover/item:rtds-opacity-100 group-focus-within/item:rtds-opacity-100" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#grab-handle" />
</svg>
<div class="rtds-flex rtds-items-center rtds-gap-2 rtds-flex-1">
<h3 class="rtds-accordion__title rtds-flex rtds-font-bold rtds-content-01">
<button type="button" aria-expanded="true" class="rtds-accordion__trigger rtds-group rtds-flex rtds-items-center rtds-text-left rtds-flex-1 rtds-transition-all rtds-p-1 rtds-content-primary" aria-controls="accordionSection-1-1" id="accordion1-1id">
<span class="rtds-accordion__icon rtds-flex rtds-p-2 rtds-ml-auto rtds-h-auto rtds-transition-all">
<svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 rtds-transition-all is-expand-arrow group-aria-expanded:rtds-rotate-180" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-up" />
</svg>
</span>
<span class="rtds-accordion__trigger-label rtds-content-01 rtds-flex rtds-items-center rtds-flex-1 rtds-min-w-0 rtds-text-sm md:rtds-text-base lg:rtds-text-lg">
Titolo panel
</span>
</button>
</h3>
</div>
<div class="rtds-flex rtds-items-center rtds-gap-2">
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-up" />
</svg>
<span class="rtds-sr-only">
Sposta sopra Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-down" />
</svg>
<span class="rtds-sr-only">
Sposta sotto Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-sr-only">
Elimina Nome Procedimento
</span>
</button>
</div>
</div>
<ul role="list" id="accordionSection-1-1" aria-labelledby="accordion1-1id" class="rtds-accordion__pane rtds-transition-all rtds-pb-4 rtds-pl-0.5 sm:rtds-pl-4 md:rtds-pl-6 lg:rtds-pl-10 rtds-pr-3 rtds-space-y-4">
<li class="rtds-accordion__item rtds-grid rtds-py-3 rtds-pr-3 rtds-pl-5 rtds-cursor-grab">
<div class="rtds-flex rtds-items-center rtds-justify-between rtds-group/item">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 -rtds-ml-4 md:-rtds-ml-5 rtds-flex-shrink-0 rtds-transition-opacity rtds-opacity-0 group-hover/item:rtds-opacity-100 group-focus-within/item:rtds-opacity-100" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#grab-handle" />
</svg>
<div class="rtds-flex rtds-items-center rtds-gap-2 rtds-flex-1">
<h3 class="rtds-accordion__title rtds-flex rtds-font-bold rtds-content-01">
<button type="button" aria-expanded="true" class="rtds-accordion__trigger rtds-group rtds-flex rtds-items-center rtds-text-left rtds-flex-1 rtds-transition-all rtds-p-1 rtds-content-primary" aria-controls="accordionSubSection-1-1" id="accordionSubSection1-1id">
<span class="rtds-accordion__icon rtds-flex rtds-p-2 rtds-ml-auto rtds-h-auto rtds-transition-all">
<svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 rtds-transition-all is-expand-arrow group-aria-expanded:rtds-rotate-180" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-up" />
</svg>
</span>
<span class="rtds-accordion__trigger-label rtds-content-01 rtds-flex rtds-items-center rtds-flex-1 rtds-min-w-0 rtds-text-sm md:rtds-text-base lg:rtds-text-lg">
Titolo panel
</span>
</button>
</h3>
</div>
<div class="rtds-flex rtds-items-center rtds-gap-2">
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-up" />
</svg>
<span class="rtds-sr-only">
Sposta sopra Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-down" />
</svg>
<span class="rtds-sr-only">
Sposta sotto Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-sr-only">
Elimina Nome Procedimento
</span>
</button>
</div>
</div>
<ul role="list" id="accordionSubSection-1-1" aria-labelledby="accordionSubSection1-1id" class="rtds-accordion__pane rtds-transition-all rtds-pb-4 rtds-pl-6 sm:rtds-pl-8 md:rtds-pl-10 rtds-pr-3 rtds-space-y-4">
<li>
<article class="rtds-card
rtds-card--smart-trascinabile rtds-background-03 !rtds-cursor-grab
is-card-fullclickable rtds-group/card">
<div class="rtds-grid md:rtds-flex rtds-w-full md:rtds-items-center md:rtds-justify-between rtds-gap-2 rtds-p-2">
<div class="rtds-flex rtds-items-center rtds-gap-2">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 rtds-flex-shrink-0 rtds-transition-opacity rtds-opacity-0 group-hover/card:rtds-opacity-100 group-focus-within/card:rtds-opacity-100" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#grab-handle" />
</svg>
<p class="rtds-text-sm md:rtds-text-base rtds-font-medium">Nome procedimento</p>
</div>
<div class="rtds-flex rtds-items-center rtds-justify-end rtds-gap-2">
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-up" />
</svg>
<span class="rtds-sr-only">
Sposta sopra Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-down" />
</svg>
<span class="rtds-sr-only">
Sposta sotto Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-sr-only">
Elimina Nome Procedimento
</span>
</button>
</div>
</div>
</article>
</li>
<li>
<article class="rtds-card
rtds-card--smart-trascinabile rtds-background-03 !rtds-cursor-grab
is-card-fullclickable rtds-group/card">
<div class="rtds-grid md:rtds-flex rtds-w-full md:rtds-items-center md:rtds-justify-between rtds-gap-2 rtds-p-2">
<div class="rtds-flex rtds-items-center rtds-gap-2">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 rtds-flex-shrink-0 rtds-transition-opacity rtds-opacity-0 group-hover/card:rtds-opacity-100 group-focus-within/card:rtds-opacity-100" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#grab-handle" />
</svg>
<p class="rtds-text-sm md:rtds-text-base rtds-font-medium">Nome procedimento</p>
</div>
<div class="rtds-flex rtds-items-center rtds-justify-end rtds-gap-2">
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-up" />
</svg>
<span class="rtds-sr-only">
Sposta sopra Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-down" />
</svg>
<span class="rtds-sr-only">
Sposta sotto Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-sr-only">
Elimina Nome Procedimento
</span>
</button>
</div>
</div>
</article>
</li>
<li>
<article class="rtds-card
rtds-card--smart-trascinabile rtds-background-03 !rtds-cursor-grab
is-card-fullclickable rtds-group/card">
<div class="rtds-grid md:rtds-flex rtds-w-full md:rtds-items-center md:rtds-justify-between rtds-gap-2 rtds-p-2">
<div class="rtds-flex rtds-items-center rtds-gap-2">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 rtds-flex-shrink-0 rtds-transition-opacity rtds-opacity-0 group-hover/card:rtds-opacity-100 group-focus-within/card:rtds-opacity-100" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#grab-handle" />
</svg>
<p class="rtds-text-sm md:rtds-text-base rtds-font-medium">Nome procedimento</p>
</div>
<div class="rtds-flex rtds-items-center rtds-justify-end rtds-gap-2">
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-up" />
</svg>
<span class="rtds-sr-only">
Sposta sopra Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-down" />
</svg>
<span class="rtds-sr-only">
Sposta sotto Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-sr-only">
Elimina Nome Procedimento
</span>
</button>
</div>
</div>
</article>
</li>
</ul>
</li>
<li class="rtds-accordion__item rtds-grid rtds-pl-5 rtds-pr-3 rtds-py-3">
<div class="rtds-trascinamento-oggetti">
<div class="rtds-trascinamento-oggetti__button-area rtds-flex rtds-flex-col rtds-py-6 rtds-px-8 rtds-items-center rtds-justify-center rtds-gap-4 md:rtds-gap-6 rtds-border-dashed rtds-border-2 rtds-rounded-md">
<div class="rtds-trascinamento-oggetti__description">
<p class="rtds-trascinamento-oggetti__help rtds-text-sm md:rtds-text-base">Clicca il pulsante qui sotto per aprire il catalogo oppure trascina qui un oggetto.</p>
</div>
<button type="button" class="rtds-btn
rtds-btn--icon-left rtds-group/button rtds-trascinamento-oggetti__button rtds-btn rtds-btn--outlined rtds-border-gray-03 rtds-cursor-pointer rtds-gap-2">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--book-open" />
</svg>
Apri il catalogo
</button>
</div>
</div>
</li>
<li class="rtds-accordion__item rtds-grid rtds-pl-5 rtds-pr-3 rtds-py-3">
<button type="button" class="rtds-btn
rtds-btn--icon-left rtds-group/button rtds-btn--inverted rtds-btn--s">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-transition-all rtds-duration-200 rtds-ease-out rtds-transform group-hover/button:rtds-scale-125" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--plus-circle" />
</svg>
Aggiungi categoria
</button>
</li>
</ul>
</li>
<li class="rtds-hierarchy__item rtds-accordion__item rtds-grid rtds-pr-3 rtds-py-3 rtds-pl-8 rtds-space-y-4 rtds-background-01 rtds-rounded-lg rtds-shadow-sm rtds-cursor-grab">
<div class="rtds-flex rtds-items-center rtds-justify-between rtds-group/item">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 -rtds-ml-4 md:-rtds-ml-5 rtds-flex-shrink-0 rtds-transition-opacity rtds-opacity-0 group-hover/item:rtds-opacity-100 group-focus-within/item:rtds-opacity-100" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#grab-handle" />
</svg>
<div class="rtds-flex rtds-items-center rtds-gap-2 rtds-flex-1">
<h3 class="rtds-accordion__title rtds-flex rtds-font-bold rtds-content-01">
<button type="button" aria-expanded="true" class="rtds-accordion__trigger rtds-group rtds-flex rtds-items-center rtds-text-left rtds-flex-1 rtds-transition-all rtds-p-1 rtds-content-primary" aria-controls="accordionSection-2-1" id="accordion2-1id">
<span class="rtds-accordion__icon rtds-flex rtds-p-2 rtds-ml-auto rtds-h-auto rtds-transition-all">
<svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 rtds-transition-all is-expand-arrow group-aria-expanded:rtds-rotate-180" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-up" />
</svg>
</span>
<span class="rtds-accordion__trigger-label rtds-content-01 rtds-flex rtds-items-center rtds-flex-1 rtds-min-w-0 rtds-text-sm md:rtds-text-base lg:rtds-text-lg">
Titolo panel
</span>
</button>
</h3>
</div>
<div class="rtds-flex rtds-items-center rtds-gap-2">
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-up" />
</svg>
<span class="rtds-sr-only">
Sposta sopra Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-down" />
</svg>
<span class="rtds-sr-only">
Sposta sotto Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-sr-only">
Elimina Nome Procedimento
</span>
</button>
</div>
</div>
<ul role="list" id="accordionSection-2-1" aria-labelledby="accordion2-1id" class="rtds-accordion__pane rtds-transition-all rtds-pb-4 rtds-pl-0.5 sm:rtds-pl-4 md:rtds-pl-6 lg:rtds-pl-10 rtds-pr-3 rtds-space-y-4">
<li class="rtds-accordion__item rtds-grid rtds-py-3 rtds-pr-3 rtds-pl-5 rtds-cursor-grab">
<div class="rtds-flex rtds-items-center rtds-justify-between rtds-group/item">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 -rtds-ml-4 md:-rtds-ml-5 rtds-flex-shrink-0 rtds-transition-opacity rtds-opacity-0 group-hover/item:rtds-opacity-100 group-focus-within/item:rtds-opacity-100" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#grab-handle" />
</svg>
<div class="rtds-flex rtds-items-center rtds-gap-2 rtds-flex-1">
<h3 class="rtds-accordion__title rtds-flex rtds-font-bold rtds-content-01">
<button type="button" aria-expanded="true" class="rtds-accordion__trigger rtds-group rtds-flex rtds-items-center rtds-text-left rtds-flex-1 rtds-transition-all rtds-p-1 rtds-content-primary" aria-controls="accordionSubSection-2-1" id="accordionSubSection2-1id">
<span class="rtds-accordion__icon rtds-flex rtds-p-2 rtds-ml-auto rtds-h-auto rtds-transition-all">
<svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 rtds-transition-all is-expand-arrow group-aria-expanded:rtds-rotate-180" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-up" />
</svg>
</span>
<span class="rtds-accordion__trigger-label rtds-content-01 rtds-flex rtds-items-center rtds-flex-1 rtds-min-w-0 rtds-text-sm md:rtds-text-base lg:rtds-text-lg">
Titolo panel
</span>
</button>
</h3>
</div>
<div class="rtds-flex rtds-items-center rtds-gap-2">
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-up" />
</svg>
<span class="rtds-sr-only">
Sposta sopra Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-down" />
</svg>
<span class="rtds-sr-only">
Sposta sotto Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-sr-only">
Elimina Nome Procedimento
</span>
</button>
</div>
</div>
<fieldset>
<legend class="rtds-sr-only">
Seleziona procedimento
</legend>
<ul role="list" id="accordionSubSection-2-1" aria-labelledby="accordionSubSection2-1id" class="rtds-accordion__pane rtds-transition-all rtds-pb-4 rtds-pl-6 sm:rtds-pl-8 md:rtds-pl-10 rtds-pr-3 rtds-space-y-4">
<li>
<article class="rtds-card
rtds-card--smart-trascinabile rtds-background-03 !rtds-cursor-grab
rtds-background-03 !rtds-cursor-grab
is-card-fullclickable rtds-group/card">
<div class="rtds-grid md:rtds-flex rtds-w-full md:rtds-items-center md:rtds-justify-between rtds-gap-2 rtds-p-2">
<div class="rtds-input rtds-input-field rtds-input-checkbox rtds-flex-1">
<div class="rtds-flex rtds-gap-2 rtds-items-center">
<input id="radio-1" name="radio-1" class=" " type="checkbox">
<label class="rtds-input-checkbox__label rtds-flex-1 rtds-text-sm md:rtds-text-base" for="radio-1">
Nome procedimento
</label>
</div>
</div>
<div class="rtds-flex rtds-items-center rtds-justify-end rtds-gap-2">
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-up" />
</svg>
<span class="rtds-sr-only">
Sposta sopra Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-down" />
</svg>
<span class="rtds-sr-only">
Sposta sotto Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-sr-only">
Elimina Nome Procedimento
</span>
</button>
</div>
</div>
</article>
</li>
<li>
<article class="rtds-card
rtds-card--smart-trascinabile rtds-background-03 !rtds-cursor-grab
rtds-background-03 !rtds-cursor-grab
is-card-fullclickable rtds-group/card">
<div class="rtds-grid md:rtds-flex rtds-w-full md:rtds-items-center md:rtds-justify-between rtds-gap-2 rtds-p-2">
<div class="rtds-input rtds-input-field rtds-input-radio rtds-flex-1">
<div class="rtds-flex rtds-gap-2 rtds-items-center">
<input id="radio-1" name="radio-1" class=" " type="radio">
<label class="rtds-input-radio__label rtds-flex-1 rtds-text-sm md:rtds-text-base" for="radio-1">
Nome procedimento
</label>
</div>
</div>
<div class="rtds-flex rtds-items-center rtds-justify-end rtds-gap-2">
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-up" />
</svg>
<span class="rtds-sr-only">
Sposta sopra Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-down" />
</svg>
<span class="rtds-sr-only">
Sposta sotto Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-sr-only">
Elimina Nome Procedimento
</span>
</button>
</div>
</div>
</article>
</li>
<li>
<article class="rtds-card
rtds-card--smart-trascinabile rtds-background-03 !rtds-cursor-grab
rtds-background-03 !rtds-cursor-grab
rtds-background-03 !rtds-cursor-grab is-selected
is-card-fullclickable rtds-group/card">
<div class="rtds-grid md:rtds-flex rtds-w-full md:rtds-items-center md:rtds-justify-between rtds-gap-2 rtds-p-2">
<div class="rtds-input rtds-input-field rtds-input-checkbox rtds-flex-1">
<div class="rtds-flex rtds-gap-2 rtds-items-center">
<input id="radio-1" name="radio-1" class=" " type="checkbox" checked>
<label class="rtds-input-checkbox__label rtds-flex-1 rtds-text-sm md:rtds-text-base" for="radio-1">
Nome procedimento
</label>
</div>
</div>
<div class="rtds-flex rtds-items-center rtds-justify-end rtds-gap-2">
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-up" />
</svg>
<span class="rtds-sr-only">
Sposta sopra Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-down" />
</svg>
<span class="rtds-sr-only">
Sposta sotto Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-sr-only">
Elimina Nome Procedimento
</span>
</button>
</div>
</div>
</article>
</li>
</ul>
</fieldset>
</li>
<li class="rtds-accordion__item rtds-grid rtds-pl-5 rtds-pr-3 rtds-py-3">
<div class="rtds-trascinamento-oggetti">
<div class="rtds-trascinamento-oggetti__button-area rtds-flex rtds-flex-col rtds-py-6 rtds-px-8 rtds-items-center rtds-justify-center rtds-gap-4 md:rtds-gap-6 rtds-border-dashed rtds-border-2 rtds-rounded-md">
<div class="rtds-trascinamento-oggetti__description">
<p class="rtds-trascinamento-oggetti__help rtds-text-sm md:rtds-text-base">Clicca il pulsante qui sotto per aprire il catalogo oppure trascina qui un oggetto.</p>
</div>
<button type="button" class="rtds-btn
rtds-btn--icon-left rtds-group/button rtds-trascinamento-oggetti__button rtds-btn rtds-btn--outlined rtds-border-gray-03 rtds-cursor-pointer rtds-gap-2">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--book-open" />
</svg>
Apri il catalogo
</button>
</div>
</div>
</li>
<li class="rtds-accordion__item rtds-grid rtds-pl-5 rtds-pr-3 rtds-py-3">
<button type="button" class="rtds-btn
rtds-btn--icon-left rtds-group/button rtds-btn--inverted rtds-btn--s">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-transition-all rtds-duration-200 rtds-ease-out rtds-transform group-hover/button:rtds-scale-125" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--plus-circle" />
</svg>
Aggiungi categoria
</button>
</li>
</ul>
</li>
<li class="rtds-hierarchy__item rtds-accordion__item rtds-grid rtds-pr-3 rtds-py-3 rtds-pl-8 rtds-space-y-4 rtds-background-01 rtds-rounded-lg rtds-shadow-sm rtds-cursor-grab">
<div class="rtds-flex rtds-items-center rtds-justify-between rtds-group/item">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 -rtds-ml-4 md:-rtds-ml-5 rtds-flex-shrink-0 rtds-transition-opacity rtds-opacity-0 group-hover/item:rtds-opacity-100 group-focus-within/item:rtds-opacity-100" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#grab-handle" />
</svg>
<div class="rtds-flex rtds-items-center rtds-gap-2 rtds-flex-1">
<h3 class="rtds-accordion__title rtds-flex rtds-font-bold rtds-content-01">
<button type="button" aria-expanded="false" class="rtds-accordion__trigger rtds-group rtds-flex rtds-items-center rtds-text-left rtds-flex-1 rtds-transition-all rtds-p-1 rtds-content-primary" aria-controls="accordionSection-1-2" id="accordion1-2id">
<span class="rtds-accordion__icon rtds-flex rtds-p-2 rtds-ml-auto rtds-h-auto rtds-transition-all">
<svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 rtds-transition-all is-expand-arrow group-aria-expanded:rtds-rotate-180" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-up" />
</svg>
</span>
<span class="rtds-accordion__trigger-label rtds-content-01 rtds-flex rtds-items-center rtds-flex-1 rtds-min-w-0 rtds-text-sm md:rtds-text-base lg:rtds-text-lg">
Titolo panel
</span>
</button>
</h3>
</div>
<div class="rtds-flex rtds-items-center rtds-gap-2">
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-up" />
</svg>
<span class="rtds-sr-only">
Sposta sopra Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-down" />
</svg>
<span class="rtds-sr-only">
Sposta sotto Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-sr-only">
Elimina Nome Procedimento
</span>
</button>
</div>
</div>
<ul role="list" id="accordionSection-1-2" aria-labelledby="accordion1-2id" class="rtds-accordion__pane rtds-transition-all rtds-pb-4 rtds-pl-0.5 sm:rtds-pl-4 md:rtds-pl-6 lg:rtds-pl-10 rtds-pr-3 rtds-space-y-4" hidden>
<li class="rtds-accordion__item rtds-grid rtds-py-3 rtds-pr-3 rtds-pl-5 rtds-cursor-grab">
<div class="rtds-flex rtds-items-center rtds-justify-between rtds-group/item">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 -rtds-ml-4 md:-rtds-ml-5 rtds-flex-shrink-0 rtds-transition-opacity rtds-opacity-0 group-hover/item:rtds-opacity-100 group-focus-within/item:rtds-opacity-100" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#grab-handle" />
</svg>
<div class="rtds-flex rtds-items-center rtds-gap-2 rtds-flex-1">
<h3 class="rtds-accordion__title rtds-flex rtds-font-bold rtds-content-01">
<button type="button" aria-expanded="true" class="rtds-accordion__trigger rtds-group rtds-flex rtds-items-center rtds-text-left rtds-flex-1 rtds-transition-all rtds-p-1 rtds-content-primary" aria-controls="accordionSubSection-1-2" id="accordionSubSection1-2id">
<span class="rtds-accordion__icon rtds-flex rtds-p-2 rtds-ml-auto rtds-h-auto rtds-transition-all">
<svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 rtds-transition-all is-expand-arrow group-aria-expanded:rtds-rotate-180" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-up" />
</svg>
</span>
<span class="rtds-accordion__trigger-label rtds-content-01 rtds-flex rtds-items-center rtds-flex-1 rtds-min-w-0 rtds-text-sm md:rtds-text-base lg:rtds-text-lg">
Titolo panel
</span>
</button>
</h3>
</div>
<div class="rtds-flex rtds-items-center rtds-gap-2">
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-up" />
</svg>
<span class="rtds-sr-only">
Sposta sopra Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-down" />
</svg>
<span class="rtds-sr-only">
Sposta sotto Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-sr-only">
Elimina Nome Procedimento
</span>
</button>
</div>
</div>
<ul role="list" id="accordionSubSection-1-2" aria-labelledby="accordionSubSection1-2id" class="rtds-accordion__pane rtds-transition-all rtds-pb-4 rtds-pl-6 sm:rtds-pl-8 md:rtds-pl-10 rtds-pr-3 rtds-space-y-4">
<li>
<article class="rtds-card
rtds-card--smart-trascinabile rtds-background-03 !rtds-cursor-grab
is-card-fullclickable rtds-group/card">
<div class="rtds-grid md:rtds-flex rtds-w-full md:rtds-items-center md:rtds-justify-between rtds-gap-2 rtds-p-2">
<div class="rtds-flex rtds-items-center rtds-gap-2">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 rtds-flex-shrink-0 rtds-transition-opacity rtds-opacity-0 group-hover/card:rtds-opacity-100 group-focus-within/card:rtds-opacity-100" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#grab-handle" />
</svg>
<p class="rtds-text-sm md:rtds-text-base rtds-font-medium">Nome procedimento</p>
</div>
<div class="rtds-flex rtds-items-center rtds-justify-end rtds-gap-2">
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-up" />
</svg>
<span class="rtds-sr-only">
Sposta sopra Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-down" />
</svg>
<span class="rtds-sr-only">
Sposta sotto Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-sr-only">
Elimina Nome Procedimento
</span>
</button>
</div>
</div>
</article>
</li>
<li>
<article class="rtds-card
rtds-card--smart-trascinabile rtds-background-03 !rtds-cursor-grab
is-card-fullclickable rtds-group/card">
<div class="rtds-grid md:rtds-flex rtds-w-full md:rtds-items-center md:rtds-justify-between rtds-gap-2 rtds-p-2">
<div class="rtds-flex rtds-items-center rtds-gap-2">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 rtds-flex-shrink-0 rtds-transition-opacity rtds-opacity-0 group-hover/card:rtds-opacity-100 group-focus-within/card:rtds-opacity-100" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#grab-handle" />
</svg>
<p class="rtds-text-sm md:rtds-text-base rtds-font-medium">Nome procedimento</p>
</div>
<div class="rtds-flex rtds-items-center rtds-justify-end rtds-gap-2">
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-up" />
</svg>
<span class="rtds-sr-only">
Sposta sopra Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-down" />
</svg>
<span class="rtds-sr-only">
Sposta sotto Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-sr-only">
Elimina Nome Procedimento
</span>
</button>
</div>
</div>
</article>
</li>
<li>
<article class="rtds-card
rtds-card--smart-trascinabile rtds-background-03 !rtds-cursor-grab
is-card-fullclickable rtds-group/card">
<div class="rtds-grid md:rtds-flex rtds-w-full md:rtds-items-center md:rtds-justify-between rtds-gap-2 rtds-p-2">
<div class="rtds-flex rtds-items-center rtds-gap-2">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 rtds-flex-shrink-0 rtds-transition-opacity rtds-opacity-0 group-hover/card:rtds-opacity-100 group-focus-within/card:rtds-opacity-100" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#grab-handle" />
</svg>
<p class="rtds-text-sm md:rtds-text-base rtds-font-medium">Nome procedimento</p>
</div>
<div class="rtds-flex rtds-items-center rtds-justify-end rtds-gap-2">
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-up" />
</svg>
<span class="rtds-sr-only">
Sposta sopra Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-down" />
</svg>
<span class="rtds-sr-only">
Sposta sotto Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-sr-only">
Elimina Nome Procedimento
</span>
</button>
</div>
</div>
</article>
</li>
</ul>
</li>
<li class="rtds-accordion__item rtds-grid rtds-pl-5 rtds-pr-3 rtds-py-3">
<div class="rtds-trascinamento-oggetti">
<div class="rtds-trascinamento-oggetti__button-area rtds-flex rtds-flex-col rtds-py-6 rtds-px-8 rtds-items-center rtds-justify-center rtds-gap-4 md:rtds-gap-6 rtds-border-dashed rtds-border-2 rtds-rounded-md">
<div class="rtds-trascinamento-oggetti__description">
<p class="rtds-trascinamento-oggetti__help rtds-text-sm md:rtds-text-base">Clicca il pulsante qui sotto per aprire il catalogo oppure trascina qui un oggetto.</p>
</div>
<button type="button" class="rtds-btn
rtds-btn--icon-left rtds-group/button rtds-trascinamento-oggetti__button rtds-btn rtds-btn--outlined rtds-border-gray-03 rtds-cursor-pointer rtds-gap-2">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--book-open" />
</svg>
Apri il catalogo
</button>
</div>
</div>
</li>
<li class="rtds-accordion__item rtds-grid rtds-pl-5 rtds-pr-3 rtds-py-3">
<button type="button" class="rtds-btn
rtds-btn--icon-left rtds-group/button rtds-btn--inverted rtds-btn--s">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-transition-all rtds-duration-200 rtds-ease-out rtds-transform group-hover/button:rtds-scale-125" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--plus-circle" />
</svg>
Aggiungi categoria
</button>
</li>
</ul>
</li>
<li class="rtds-hierarchy__item rtds-accordion__item rtds-grid rtds-pr-3 rtds-py-3 rtds-pl-8 rtds-space-y-4 rtds-background-01 rtds-rounded-lg rtds-shadow-sm rtds-cursor-grab">
<div class="rtds-flex rtds-items-center rtds-justify-between rtds-group/item">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 -rtds-ml-4 md:-rtds-ml-5 rtds-flex-shrink-0 rtds-transition-opacity rtds-opacity-0 group-hover/item:rtds-opacity-100 group-focus-within/item:rtds-opacity-100" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#grab-handle" />
</svg>
<div class="rtds-flex rtds-items-center rtds-gap-2 rtds-flex-1">
<h3 class="rtds-accordion__title rtds-flex rtds-font-bold rtds-content-01">
<button type="button" aria-expanded="false" class="rtds-accordion__trigger rtds-group rtds-flex rtds-items-center rtds-text-left rtds-flex-1 rtds-transition-all rtds-p-1 rtds-content-primary" aria-controls="accordionSection-2-2" id="accordion2-2id">
<span class="rtds-accordion__icon rtds-flex rtds-p-2 rtds-ml-auto rtds-h-auto rtds-transition-all">
<svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 rtds-transition-all is-expand-arrow group-aria-expanded:rtds-rotate-180" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-up" />
</svg>
</span>
<span class="rtds-accordion__trigger-label rtds-content-01 rtds-flex rtds-items-center rtds-flex-1 rtds-min-w-0 rtds-text-sm md:rtds-text-base lg:rtds-text-lg">
Titolo panel
</span>
</button>
</h3>
</div>
<div class="rtds-flex rtds-items-center rtds-gap-2">
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-up" />
</svg>
<span class="rtds-sr-only">
Sposta sopra Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-down" />
</svg>
<span class="rtds-sr-only">
Sposta sotto Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-sr-only">
Elimina Nome Procedimento
</span>
</button>
</div>
</div>
<ul role="list" id="accordionSection-2-2" aria-labelledby="accordion2-2id" class="rtds-accordion__pane rtds-transition-all rtds-pb-4 rtds-pl-0.5 sm:rtds-pl-4 md:rtds-pl-6 lg:rtds-pl-10 rtds-pr-3 rtds-space-y-4" hidden>
<li class="rtds-accordion__item rtds-grid rtds-py-3 rtds-pr-3 rtds-pl-5 rtds-cursor-grab">
<div class="rtds-flex rtds-items-center rtds-justify-between rtds-group/item">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 -rtds-ml-4 md:-rtds-ml-5 rtds-flex-shrink-0 rtds-transition-opacity rtds-opacity-0 group-hover/item:rtds-opacity-100 group-focus-within/item:rtds-opacity-100" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#grab-handle" />
</svg>
<div class="rtds-flex rtds-items-center rtds-gap-2 rtds-flex-1">
<h3 class="rtds-accordion__title rtds-flex rtds-font-bold rtds-content-01">
<button type="button" aria-expanded="true" class="rtds-accordion__trigger rtds-group rtds-flex rtds-items-center rtds-text-left rtds-flex-1 rtds-transition-all rtds-p-1 rtds-content-primary" aria-controls="accordionSubSection-2-2" id="accordionSubSection2-2id">
<span class="rtds-accordion__icon rtds-flex rtds-p-2 rtds-ml-auto rtds-h-auto rtds-transition-all">
<svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 rtds-transition-all is-expand-arrow group-aria-expanded:rtds-rotate-180" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-up" />
</svg>
</span>
<span class="rtds-accordion__trigger-label rtds-content-01 rtds-flex rtds-items-center rtds-flex-1 rtds-min-w-0 rtds-text-sm md:rtds-text-base lg:rtds-text-lg">
Titolo panel
</span>
</button>
</h3>
</div>
<div class="rtds-flex rtds-items-center rtds-gap-2">
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-up" />
</svg>
<span class="rtds-sr-only">
Sposta sopra Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-down" />
</svg>
<span class="rtds-sr-only">
Sposta sotto Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-sr-only">
Elimina Nome Procedimento
</span>
</button>
</div>
</div>
<fieldset>
<legend class="rtds-sr-only">
Seleziona procedimento
</legend>
<ul role="list" id="accordionSubSection-2-2" aria-labelledby="accordionSubSection2-2id" class="rtds-accordion__pane rtds-transition-all rtds-pb-4 rtds-pl-6 sm:rtds-pl-8 md:rtds-pl-10 rtds-pr-3 rtds-space-y-4">
<li>
<article class="rtds-card
rtds-card--smart-trascinabile rtds-background-03 !rtds-cursor-grab
rtds-background-03 !rtds-cursor-grab
is-card-fullclickable rtds-group/card">
<div class="rtds-grid md:rtds-flex rtds-w-full md:rtds-items-center md:rtds-justify-between rtds-gap-2 rtds-p-2">
<div class="rtds-input rtds-input-field rtds-input-checkbox rtds-flex-1">
<div class="rtds-flex rtds-gap-2 rtds-items-center">
<input id="radio-1" name="radio-1" class=" " type="checkbox">
<label class="rtds-input-checkbox__label rtds-flex-1 rtds-text-sm md:rtds-text-base" for="radio-1">
Nome procedimento
</label>
</div>
</div>
<div class="rtds-flex rtds-items-center rtds-justify-end rtds-gap-2">
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-up" />
</svg>
<span class="rtds-sr-only">
Sposta sopra Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-down" />
</svg>
<span class="rtds-sr-only">
Sposta sotto Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-sr-only">
Elimina Nome Procedimento
</span>
</button>
</div>
</div>
</article>
</li>
<li>
<article class="rtds-card
rtds-card--smart-trascinabile rtds-background-03 !rtds-cursor-grab
rtds-background-03 !rtds-cursor-grab
is-card-fullclickable rtds-group/card">
<div class="rtds-grid md:rtds-flex rtds-w-full md:rtds-items-center md:rtds-justify-between rtds-gap-2 rtds-p-2">
<div class="rtds-input rtds-input-field rtds-input-radio rtds-flex-1">
<div class="rtds-flex rtds-gap-2 rtds-items-center">
<input id="radio-1" name="radio-1" class=" " type="radio">
<label class="rtds-input-radio__label rtds-flex-1 rtds-text-sm md:rtds-text-base" for="radio-1">
Nome procedimento
</label>
</div>
</div>
<div class="rtds-flex rtds-items-center rtds-justify-end rtds-gap-2">
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-up" />
</svg>
<span class="rtds-sr-only">
Sposta sopra Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-down" />
</svg>
<span class="rtds-sr-only">
Sposta sotto Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-sr-only">
Elimina Nome Procedimento
</span>
</button>
</div>
</div>
</article>
</li>
<li>
<article class="rtds-card
rtds-card--smart-trascinabile rtds-background-03 !rtds-cursor-grab
rtds-background-03 !rtds-cursor-grab
rtds-background-03 !rtds-cursor-grab is-selected
is-card-fullclickable rtds-group/card">
<div class="rtds-grid md:rtds-flex rtds-w-full md:rtds-items-center md:rtds-justify-between rtds-gap-2 rtds-p-2">
<div class="rtds-input rtds-input-field rtds-input-checkbox rtds-flex-1">
<div class="rtds-flex rtds-gap-2 rtds-items-center">
<input id="radio-1" name="radio-1" class=" " type="checkbox" checked>
<label class="rtds-input-checkbox__label rtds-flex-1 rtds-text-sm md:rtds-text-base" for="radio-1">
Nome procedimento
</label>
</div>
</div>
<div class="rtds-flex rtds-items-center rtds-justify-end rtds-gap-2">
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-up" />
</svg>
<span class="rtds-sr-only">
Sposta sopra Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-down" />
</svg>
<span class="rtds-sr-only">
Sposta sotto Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-sr-only">
Elimina Nome Procedimento
</span>
</button>
</div>
</div>
</article>
</li>
</ul>
</fieldset>
</li>
<li class="rtds-accordion__item rtds-grid rtds-pl-5 rtds-pr-3 rtds-py-3">
<div class="rtds-trascinamento-oggetti">
<div class="rtds-trascinamento-oggetti__button-area rtds-flex rtds-flex-col rtds-py-6 rtds-px-8 rtds-items-center rtds-justify-center rtds-gap-4 md:rtds-gap-6 rtds-border-dashed rtds-border-2 rtds-rounded-md">
<div class="rtds-trascinamento-oggetti__description">
<p class="rtds-trascinamento-oggetti__help rtds-text-sm md:rtds-text-base">Clicca il pulsante qui sotto per aprire il catalogo oppure trascina qui un oggetto.</p>
</div>
<button type="button" class="rtds-btn
rtds-btn--icon-left rtds-group/button rtds-trascinamento-oggetti__button rtds-btn rtds-btn--outlined rtds-border-gray-03 rtds-cursor-pointer rtds-gap-2">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--book-open" />
</svg>
Apri il catalogo
</button>
</div>
</div>
</li>
<li class="rtds-accordion__item rtds-grid rtds-pl-5 rtds-pr-3 rtds-py-3">
<button type="button" class="rtds-btn
rtds-btn--icon-left rtds-group/button rtds-btn--inverted rtds-btn--s">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-transition-all rtds-duration-200 rtds-ease-out rtds-transform group-hover/button:rtds-scale-125" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--plus-circle" />
</svg>
Aggiungi categoria
</button>
</li>
</ul>
</li>
</ul>
<ul role="list" class="rtds-hierarchy rtds-accordion rtds-accordion--smart">
{% for i in range(0, 2) %}
<li class="rtds-hierarchy__item rtds-accordion__item rtds-grid rtds-pr-3 rtds-py-3 rtds-pl-8 rtds-space-y-4 rtds-background-01 rtds-rounded-lg rtds-shadow-sm rtds-cursor-grab">
<div class="rtds-flex rtds-items-center rtds-justify-between rtds-group/item">
{% render '@icon', {id: 'grab-handle', size: 'rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5', classes: '-rtds-ml-4 md:-rtds-ml-5 rtds-flex-shrink-0 rtds-transition-opacity rtds-opacity-0 group-hover/item:rtds-opacity-100 group-focus-within/item:rtds-opacity-100'}, true %}
<div class="rtds-flex rtds-items-center rtds-gap-2 rtds-flex-1">
<h3 class="rtds-accordion__title rtds-flex rtds-font-bold rtds-content-01">
<button type="button" aria-expanded="{% if loop.index == 1 %}true{% else %}false{% endif %}" class="rtds-accordion__trigger rtds-group rtds-flex rtds-items-center rtds-text-left rtds-flex-1 rtds-transition-all rtds-p-1 rtds-content-primary" aria-controls="accordionSection-1-{{ loop.index }}" id="accordion1-{{ loop.index }}id">
<span class="rtds-accordion__icon rtds-flex rtds-p-2 rtds-ml-auto rtds-h-auto rtds-transition-all">
{% render '@icon', {id: 'mini--chevron-up', size: 'rtds-w-6 rtds-h-6', classes: 'rtds-transition-all is-expand-arrow group-aria-expanded:rtds-rotate-180'}, true %}
</span>
<span class="rtds-accordion__trigger-label rtds-content-01 rtds-flex rtds-items-center rtds-flex-1 rtds-min-w-0 rtds-text-sm md:rtds-text-base lg:rtds-text-lg">
Titolo panel
</span>
</button>
</h3>
</div>
<div class="rtds-flex rtds-items-center rtds-gap-2">
{% render '@button--icon', {
classes: "rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03",
icon: "mini--arrow-up",
label: "Sposta sopra Nome Procedimento"
}, true %}
{% render '@button--icon', {
classes: "rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03",
icon: "mini--arrow-down",
label: "Sposta sotto Nome Procedimento"
}, true %}
{% render '@button--icon', {
classes: "rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03",
icon: "outline--trash",
label: "Elimina Nome Procedimento"
}, true %}
</div>
</div>
<ul role="list" id="accordionSection-1-{{ loop.index }}" aria-labelledby="accordion1-{{ loop.index }}id" class="rtds-accordion__pane rtds-transition-all rtds-pb-4 rtds-pl-0.5 sm:rtds-pl-4 md:rtds-pl-6 lg:rtds-pl-10 rtds-pr-3 rtds-space-y-4"{% if loop.index != 1 %} hidden{% endif %}>
<li class="rtds-accordion__item rtds-grid rtds-py-3 rtds-pr-3 rtds-pl-5 rtds-cursor-grab">
<div class="rtds-flex rtds-items-center rtds-justify-between rtds-group/item">
{% render '@icon', {id: 'grab-handle', size: 'rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5', classes: '-rtds-ml-4 md:-rtds-ml-5 rtds-flex-shrink-0 rtds-transition-opacity rtds-opacity-0 group-hover/item:rtds-opacity-100 group-focus-within/item:rtds-opacity-100'}, true %}
<div class="rtds-flex rtds-items-center rtds-gap-2 rtds-flex-1">
<h3 class="rtds-accordion__title rtds-flex rtds-font-bold rtds-content-01">
<button type="button" aria-expanded="true" class="rtds-accordion__trigger rtds-group rtds-flex rtds-items-center rtds-text-left rtds-flex-1 rtds-transition-all rtds-p-1 rtds-content-primary" aria-controls="accordionSubSection-1-{{ loop.index }}" id="accordionSubSection1-{{ loop.index }}id">
<span class="rtds-accordion__icon rtds-flex rtds-p-2 rtds-ml-auto rtds-h-auto rtds-transition-all">
{% render '@icon', {id: 'mini--chevron-up', size: 'rtds-w-6 rtds-h-6', classes: 'rtds-transition-all is-expand-arrow group-aria-expanded:rtds-rotate-180'}, true %}
</span>
<span class="rtds-accordion__trigger-label rtds-content-01 rtds-flex rtds-items-center rtds-flex-1 rtds-min-w-0 rtds-text-sm md:rtds-text-base lg:rtds-text-lg">
Titolo panel
</span>
</button>
</h3>
</div>
<div class="rtds-flex rtds-items-center rtds-gap-2">
{% render '@button--icon', {
classes: "rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03",
icon: "mini--arrow-up",
label: "Sposta sopra Nome Procedimento"
}, true %}
{% render '@button--icon', {
classes: "rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03",
icon: "mini--arrow-down",
label: "Sposta sotto Nome Procedimento"
}, true %}
{% render '@button--icon', {
classes: "rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03",
icon: "outline--trash",
label: "Elimina Nome Procedimento"
}, true %}
</div>
</div>
<ul role="list" id="accordionSubSection-1-{{ loop.index }}" aria-labelledby="accordionSubSection1-{{ loop.index }}id" class="rtds-accordion__pane rtds-transition-all rtds-pb-4 rtds-pl-6 sm:rtds-pl-8 md:rtds-pl-10 rtds-pr-3 rtds-space-y-4">
{% for i in range(0, 3) %}
<li>
{% render '@card-smart--selezione-procedimento' %}
</li>
{% endfor %}
</ul>
</li>
<li class="rtds-accordion__item rtds-grid rtds-pl-5 rtds-pr-3 rtds-py-3">
{% render '@trascinamento-oggetti' %}
</li>
<li class="rtds-accordion__item rtds-grid rtds-pl-5 rtds-pr-3 rtds-py-3">
{% render '@button--icon-left-s', {
icon: 'outline--plus-circle',
label: 'Aggiungi categoria',
classes: 'rtds-btn--inverted',
iconTransformType: "scale"
}, true %}
</li>
</ul>
</li>
<li class="rtds-hierarchy__item rtds-accordion__item rtds-grid rtds-pr-3 rtds-py-3 rtds-pl-8 rtds-space-y-4 rtds-background-01 rtds-rounded-lg rtds-shadow-sm rtds-cursor-grab">
<div class="rtds-flex rtds-items-center rtds-justify-between rtds-group/item">
{% render '@icon', {id: 'grab-handle', size: 'rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5', classes: '-rtds-ml-4 md:-rtds-ml-5 rtds-flex-shrink-0 rtds-transition-opacity rtds-opacity-0 group-hover/item:rtds-opacity-100 group-focus-within/item:rtds-opacity-100'}, true %}
<div class="rtds-flex rtds-items-center rtds-gap-2 rtds-flex-1">
<h3 class="rtds-accordion__title rtds-flex rtds-font-bold rtds-content-01">
<button type="button" aria-expanded="{% if loop.index == 1 %}true{% else %}false{% endif %}" class="rtds-accordion__trigger rtds-group rtds-flex rtds-items-center rtds-text-left rtds-flex-1 rtds-transition-all rtds-p-1 rtds-content-primary" aria-controls="accordionSection-2-{{ loop.index }}" id="accordion2-{{ loop.index }}id">
<span class="rtds-accordion__icon rtds-flex rtds-p-2 rtds-ml-auto rtds-h-auto rtds-transition-all">
{% render '@icon', {id: 'mini--chevron-up', size: 'rtds-w-6 rtds-h-6', classes: 'rtds-transition-all is-expand-arrow group-aria-expanded:rtds-rotate-180'}, true %}
</span>
<span class="rtds-accordion__trigger-label rtds-content-01 rtds-flex rtds-items-center rtds-flex-1 rtds-min-w-0 rtds-text-sm md:rtds-text-base lg:rtds-text-lg">
Titolo panel
</span>
</button>
</h3>
</div>
<div class="rtds-flex rtds-items-center rtds-gap-2">
{% render '@button--icon', {
classes: "rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03",
icon: "mini--arrow-up",
label: "Sposta sopra Nome Procedimento"
}, true %}
{% render '@button--icon', {
classes: "rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03",
icon: "mini--arrow-down",
label: "Sposta sotto Nome Procedimento"
}, true %}
{% render '@button--icon', {
classes: "rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03",
icon: "outline--trash",
label: "Elimina Nome Procedimento"
}, true %}
</div>
</div>
<ul role="list" id="accordionSection-2-{{ loop.index }}" aria-labelledby="accordion2-{{ loop.index }}id" class="rtds-accordion__pane rtds-transition-all rtds-pb-4 rtds-pl-0.5 sm:rtds-pl-4 md:rtds-pl-6 lg:rtds-pl-10 rtds-pr-3 rtds-space-y-4"{% if loop.index != 1 %} hidden{% endif %}>
<li class="rtds-accordion__item rtds-grid rtds-py-3 rtds-pr-3 rtds-pl-5 rtds-cursor-grab">
<div class="rtds-flex rtds-items-center rtds-justify-between rtds-group/item">
{% render '@icon', {id: 'grab-handle', size: 'rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5', classes: '-rtds-ml-4 md:-rtds-ml-5 rtds-flex-shrink-0 rtds-transition-opacity rtds-opacity-0 group-hover/item:rtds-opacity-100 group-focus-within/item:rtds-opacity-100'}, true %}
<div class="rtds-flex rtds-items-center rtds-gap-2 rtds-flex-1">
<h3 class="rtds-accordion__title rtds-flex rtds-font-bold rtds-content-01">
<button type="button" aria-expanded="true" class="rtds-accordion__trigger rtds-group rtds-flex rtds-items-center rtds-text-left rtds-flex-1 rtds-transition-all rtds-p-1 rtds-content-primary" aria-controls="accordionSubSection-2-{{ loop.index }}" id="accordionSubSection2-{{ loop.index }}id">
<span class="rtds-accordion__icon rtds-flex rtds-p-2 rtds-ml-auto rtds-h-auto rtds-transition-all">
{% render '@icon', {id: 'mini--chevron-up', size: 'rtds-w-6 rtds-h-6', classes: 'rtds-transition-all is-expand-arrow group-aria-expanded:rtds-rotate-180'}, true %}
</span>
<span class="rtds-accordion__trigger-label rtds-content-01 rtds-flex rtds-items-center rtds-flex-1 rtds-min-w-0 rtds-text-sm md:rtds-text-base lg:rtds-text-lg">
Titolo panel
</span>
</button>
</h3>
</div>
<div class="rtds-flex rtds-items-center rtds-gap-2">
{% render '@button--icon', {
classes: "rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03",
icon: "mini--arrow-up",
label: "Sposta sopra Nome Procedimento"
}, true %}
{% render '@button--icon', {
classes: "rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03",
icon: "mini--arrow-down",
label: "Sposta sotto Nome Procedimento"
}, true %}
{% render '@button--icon', {
classes: "rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03",
icon: "outline--trash",
label: "Elimina Nome Procedimento"
}, true %}
</div>
</div>
<fieldset>
<legend class="rtds-sr-only">
Seleziona procedimento
</legend>
<ul role="list" id="accordionSubSection-2-{{ loop.index }}" aria-labelledby="accordionSubSection2-{{ loop.index }}id" class="rtds-accordion__pane rtds-transition-all rtds-pb-4 rtds-pl-6 sm:rtds-pl-8 md:rtds-pl-10 rtds-pr-3 rtds-space-y-4">
<li>
{% render '@card-smart--selezione-procedimento-checkbox' %}
</li>
<li>
{% render '@card-smart--selezione-procedimento-radio' %}
</li>
<li>
{% render '@card-smart--selezione-procedimento-checkbox-selected' %}
</li>
</ul>
</fieldset>
</li>
<li class="rtds-accordion__item rtds-grid rtds-pl-5 rtds-pr-3 rtds-py-3">
{% render '@trascinamento-oggetti' %}
</li>
<li class="rtds-accordion__item rtds-grid rtds-pl-5 rtds-pr-3 rtds-py-3">
{% render '@button--icon-left-s', {
icon: 'outline--plus-circle',
label: 'Aggiungi categoria',
classes: 'rtds-btn--inverted',
iconTransformType: "scale"
}, true %}
</li>
</ul>
</li>
{% endfor %}
</ul>
/* No context defined. */
Componente per la gestione visuale di strutture gerarchiche a 2 livelli di profondità, con accordion espandibili, drag handle per il riordinamento e azioni su ogni elemento. Utilizzato nei backoffice dei servizi digitali per configurare procedimenti e categorie.
<ul role="list" class="rtds-hierarchy rtds-accordion rtds-accordion--smart"> — lista di livello 1, dove ogni elemento è un accordion espandibile. Al suo interno, ogni pannello contiene elementi di livello 2 (sottocategorie) anch’essi espandibili, con card di procedimento (@card-smart--selezione-procedimento) e trascinamento (@trascinamento-oggetti).
rtds-hierarchy__item): Categoria principale — accordion con drag handle e azioni (sposta su/giù, elimina)@card-smart--selezione-procedimento / varianti checkbox/radio)@trascinamento-oggetti)@icon — grab-handle, mini–chevron-up@button--icon — pulsanti azioni (mini–arrow-up, mini–arrow-down, outline–trash)@card-smart--selezione-procedimento — card procedimento (varianti: default, checkbox, radio, checkbox-selected)@trascinamento-oggetti — area drag & drop@button--icon-left-s — pulsante “Aggiungi categoria”Livello AA — criteri pertinenti:
aria-expanded e aria-controls con ID univoci; i pulsanti di azione hanno label descrittive<ul> annidati con role="list"; i gruppi di selezione checkbox/radio sono avvolti in <fieldset> con <legend><ul role="list" class="rtds-hierarchy rtds-accordion rtds-accordion--smart"> — lista di livello 1<li> con accordion; ogni pannello aperto contiene una <ul role="list"> di livello 2 — la struttura annidata riflette la gerarchia nel DOM<button type="button"> dentro <h3> — garantisce corretta gerarchia heading<ul role="list"> con aria-labelledby che referenzia il trigger — identificati come regioni da aria-labelledbyhidden — rimosso dalla navigazione da tastiera e non annunciato dagli screen reader<fieldset> con <legend class="rtds-sr-only">Seleziona procedimento</legend> — raggruppa semanticamente i controlli| Attributo | Valori | Condizione |
|---|---|---|
role="list" |
list |
Su tutti gli <ul> — garantisce la semantica di lista (necessario con Tailwind che rimuove stili predefiniti) |
aria-expanded |
true / false |
Sul <button> trigger — indica lo stato di ogni pannello |
aria-controls |
accordionSection-{n}-{i} / accordionSubSection-{n}-{i} |
Sul <button> trigger — collega al pannello |
id |
accordion{n}-{i}id / accordionSubSection{n}-{i}id |
Sul <button> — referenziato da aria-labelledby del pannello |
aria-labelledby |
ID del trigger | Sul pannello accordion — associa la lista/regione al suo titolo |
aria-hidden="true" |
true |
Sulle icone SVG decorative (chevron, grab-handle) |
| Tasto | Azione |
|---|---|
Tab / Shift+Tab |
Sposta il focus tra: trigger accordion, pulsanti “Sposta sopra”, “Sposta sotto”, “Elimina” |
Enter / Space |
Espande/contrae l’accordion; attiva i pulsanti azione |
:focus-visible è sempre visibile e non viene rimosso via CSSopacity-0) e diventa visibile al hover (group-hover/item) e al focus-within (group-focus-within/item) — è sempre nel DOM ma non interattivo; l’interazione di riordino è fornita dai pulsanti frecciaaria-hidden="true") — il riordinamento è accessibile tramite i pulsanti freccia<legend class="rtds-sr-only">Seleziona procedimento</legend> è nascosta visivamente ma letta dagli screen reader — contestualizza il gruppo di selezione checkbox/radiohidden — il suo contenuto non è navigabile finché non viene espanso.rtds-hierarchy: Lista gerarchica principale.rtds-hierarchy__item: Singolo elemento di livello 1grid, padding pr-3 py-3 pl-8background-01, bordi arrotondati, ombra shadow-smcursor-grabopacity-0 → opacity-100)flex items-center justify-betweenaccordion__trigger content-primaryaccordion__pane transition-all, indentazione progressiva per livelloaccordion1-{n}, accordion2-{n}) devono essere univoci nella pagina<ul role="list" class="rtds-hierarchy rtds-accordion rtds-accordion--smart">
<li class="rtds-hierarchy__item rtds-accordion__item rtds-grid rtds-pr-3 rtds-py-3 rtds-pl-8 rtds-space-y-4 rtds-background-01 rtds-rounded-lg rtds-shadow-sm rtds-cursor-grab">
<div class="rtds-flex rtds-items-center rtds-justify-between rtds-group/item">
<svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 -rtds-ml-4 md:-rtds-ml-5 rtds-flex-shrink-0 rtds-transition-opacity rtds-opacity-0 group-hover/item:rtds-opacity-100 group-focus-within/item:rtds-opacity-100"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#grab-handle" />
</svg>
<div class="rtds-flex rtds-items-center rtds-gap-2 rtds-flex-1">
<h3 class="rtds-accordion__title rtds-flex rtds-font-bold rtds-content-01">
<button type="button" aria-expanded="true" class="rtds-accordion__trigger rtds-group rtds-flex rtds-items-center rtds-text-left rtds-flex-1 rtds-transition-all rtds-p-1 rtds-content-primary" aria-controls="accordionSection-1-1" id="accordion1-1id">
<span class="rtds-accordion__icon rtds-flex rtds-p-2 rtds-ml-auto rtds-h-auto rtds-transition-all">
<svg
class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 rtds-transition-all is-expand-arrow group-aria-expanded:rtds-rotate-180"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#mini--chevron-up" />
</svg>
</span>
<span class="rtds-accordion__trigger-label rtds-content-01 rtds-flex rtds-items-center rtds-flex-1 rtds-min-w-0 rtds-text-sm md:rtds-text-base lg:rtds-text-lg">
Titolo panel
</span>
</button>
</h3>
</div>
<div class="rtds-flex rtds-items-center rtds-gap-2">
<button type="button"
class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"
><svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#mini--arrow-up" />
</svg>
<span class="rtds-sr-only">
Sposta sopra Nome Procedimento
</span>
</button>
<button type="button"
class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"
><svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#mini--arrow-down" />
</svg>
<span class="rtds-sr-only">
Sposta sotto Nome Procedimento
</span>
</button>
<button type="button"
class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"
><svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-sr-only">
Elimina Nome Procedimento
</span>
</button>
</div>
</div>
<ul role="list" id="accordionSection-1-1" aria-labelledby="accordion1-1id" class="rtds-accordion__pane rtds-transition-all rtds-pb-4 rtds-pl-0.5 sm:rtds-pl-4 md:rtds-pl-6 lg:rtds-pl-10 rtds-pr-3 rtds-space-y-4">
<li class="rtds-accordion__item rtds-grid rtds-py-3 rtds-pr-3 rtds-pl-5 rtds-cursor-grab">
<div class="rtds-flex rtds-items-center rtds-justify-between rtds-group/item">
<svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 -rtds-ml-4 md:-rtds-ml-5 rtds-flex-shrink-0 rtds-transition-opacity rtds-opacity-0 group-hover/item:rtds-opacity-100 group-focus-within/item:rtds-opacity-100"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#grab-handle" />
</svg>
<div class="rtds-flex rtds-items-center rtds-gap-2 rtds-flex-1">
<h3 class="rtds-accordion__title rtds-flex rtds-font-bold rtds-content-01">
<button type="button" aria-expanded="true" class="rtds-accordion__trigger rtds-group rtds-flex rtds-items-center rtds-text-left rtds-flex-1 rtds-transition-all rtds-p-1 rtds-content-primary" aria-controls="accordionSubSection-1-1" id="accordionSubSection1-1id">
<span class="rtds-accordion__icon rtds-flex rtds-p-2 rtds-ml-auto rtds-h-auto rtds-transition-all">
<svg
class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 rtds-transition-all is-expand-arrow group-aria-expanded:rtds-rotate-180"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#mini--chevron-up" />
</svg>
</span>
<span class="rtds-accordion__trigger-label rtds-content-01 rtds-flex rtds-items-center rtds-flex-1 rtds-min-w-0 rtds-text-sm md:rtds-text-base lg:rtds-text-lg">
Titolo panel
</span>
</button>
</h3>
</div>
<div class="rtds-flex rtds-items-center rtds-gap-2">
<button type="button"
class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"
><svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#mini--arrow-up" />
</svg>
<span class="rtds-sr-only">
Sposta sopra Nome Procedimento
</span>
</button>
<button type="button"
class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"
><svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#mini--arrow-down" />
</svg>
<span class="rtds-sr-only">
Sposta sotto Nome Procedimento
</span>
</button>
<button type="button"
class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"
><svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-sr-only">
Elimina Nome Procedimento
</span>
</button>
</div>
</div>
<ul role="list" id="accordionSubSection-1-1" aria-labelledby="accordionSubSection1-1id" class="rtds-accordion__pane rtds-transition-all rtds-pb-4 rtds-pl-6 sm:rtds-pl-8 md:rtds-pl-10 rtds-pr-3 rtds-space-y-4">
<li>
<article
class="rtds-card
rtds-card--smart-trascinabile rtds-background-03 !rtds-cursor-grab
is-card-fullclickable rtds-group/card"
>
<div class="rtds-grid md:rtds-flex rtds-w-full md:rtds-items-center md:rtds-justify-between rtds-gap-2 rtds-p-2">
<div class="rtds-flex rtds-items-center rtds-gap-2">
<svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 rtds-flex-shrink-0 rtds-transition-opacity rtds-opacity-0 group-hover/card:rtds-opacity-100 group-focus-within/card:rtds-opacity-100"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#grab-handle" />
</svg>
<p class="rtds-text-sm md:rtds-text-base rtds-font-medium">Nome procedimento</p>
</div>
<div class="rtds-flex rtds-items-center rtds-justify-end rtds-gap-2">
<button type="button"
class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"
><svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#mini--arrow-up" />
</svg>
<span class="rtds-sr-only">
Sposta sopra Nome Procedimento
</span>
</button>
<button type="button"
class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"
><svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#mini--arrow-down" />
</svg>
<span class="rtds-sr-only">
Sposta sotto Nome Procedimento
</span>
</button>
<button type="button"
class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"
><svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-sr-only">
Elimina Nome Procedimento
</span>
</button>
</div>
</div>
</article>
</li>
<li>
<article
class="rtds-card
rtds-card--smart-trascinabile rtds-background-03 !rtds-cursor-grab
is-card-fullclickable rtds-group/card"
>
<div class="rtds-grid md:rtds-flex rtds-w-full md:rtds-items-center md:rtds-justify-between rtds-gap-2 rtds-p-2">
<div class="rtds-flex rtds-items-center rtds-gap-2">
<svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 rtds-flex-shrink-0 rtds-transition-opacity rtds-opacity-0 group-hover/card:rtds-opacity-100 group-focus-within/card:rtds-opacity-100"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#grab-handle" />
</svg>
<p class="rtds-text-sm md:rtds-text-base rtds-font-medium">Nome procedimento</p>
</div>
<div class="rtds-flex rtds-items-center rtds-justify-end rtds-gap-2">
<button type="button"
class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"
><svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#mini--arrow-up" />
</svg>
<span class="rtds-sr-only">
Sposta sopra Nome Procedimento
</span>
</button>
<button type="button"
class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"
><svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#mini--arrow-down" />
</svg>
<span class="rtds-sr-only">
Sposta sotto Nome Procedimento
</span>
</button>
<button type="button"
class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"
><svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-sr-only">
Elimina Nome Procedimento
</span>
</button>
</div>
</div>
</article>
</li>
<li>
<article
class="rtds-card
rtds-card--smart-trascinabile rtds-background-03 !rtds-cursor-grab
is-card-fullclickable rtds-group/card"
>
<div class="rtds-grid md:rtds-flex rtds-w-full md:rtds-items-center md:rtds-justify-between rtds-gap-2 rtds-p-2">
<div class="rtds-flex rtds-items-center rtds-gap-2">
<svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 rtds-flex-shrink-0 rtds-transition-opacity rtds-opacity-0 group-hover/card:rtds-opacity-100 group-focus-within/card:rtds-opacity-100"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#grab-handle" />
</svg>
<p class="rtds-text-sm md:rtds-text-base rtds-font-medium">Nome procedimento</p>
</div>
<div class="rtds-flex rtds-items-center rtds-justify-end rtds-gap-2">
<button type="button"
class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"
><svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#mini--arrow-up" />
</svg>
<span class="rtds-sr-only">
Sposta sopra Nome Procedimento
</span>
</button>
<button type="button"
class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"
><svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#mini--arrow-down" />
</svg>
<span class="rtds-sr-only">
Sposta sotto Nome Procedimento
</span>
</button>
<button type="button"
class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"
><svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-sr-only">
Elimina Nome Procedimento
</span>
</button>
</div>
</div>
</article>
</li>
</ul>
</li>
<li class="rtds-accordion__item rtds-grid rtds-pl-5 rtds-pr-3 rtds-py-3">
<div class="rtds-trascinamento-oggetti">
<div class="rtds-trascinamento-oggetti__button-area rtds-flex rtds-flex-col rtds-py-6 rtds-px-8 rtds-items-center rtds-justify-center rtds-gap-4 md:rtds-gap-6 rtds-border-dashed rtds-border-2 rtds-rounded-md">
<div class="rtds-trascinamento-oggetti__description">
<p class="rtds-trascinamento-oggetti__help rtds-text-sm md:rtds-text-base">Clicca il pulsante qui sotto per aprire il catalogo oppure trascina qui un oggetto.</p>
</div>
<button type="button"
class="rtds-btn
rtds-btn--icon-left rtds-group/button rtds-trascinamento-oggetti__button rtds-btn rtds-btn--outlined rtds-border-gray-03 rtds-cursor-pointer rtds-gap-2"
>
<svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#outline--book-open" />
</svg>
Apri il catalogo
</button>
</div>
</div>
</li>
<li class="rtds-accordion__item rtds-grid rtds-pl-5 rtds-pr-3 rtds-py-3">
<button type="button"
class="rtds-btn
rtds-btn--icon-left rtds-group/button rtds-btn--inverted rtds-btn--s"
>
<svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-transition-all rtds-duration-200 rtds-ease-out rtds-transform group-hover/button:rtds-scale-125"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#outline--plus-circle" />
</svg>
Aggiungi categoria
</button>
</li>
</ul>
</li>
<li class="rtds-hierarchy__item rtds-accordion__item rtds-grid rtds-pr-3 rtds-py-3 rtds-pl-8 rtds-space-y-4 rtds-background-01 rtds-rounded-lg rtds-shadow-sm rtds-cursor-grab">
<div class="rtds-flex rtds-items-center rtds-justify-between rtds-group/item">
<svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 -rtds-ml-4 md:-rtds-ml-5 rtds-flex-shrink-0 rtds-transition-opacity rtds-opacity-0 group-hover/item:rtds-opacity-100 group-focus-within/item:rtds-opacity-100"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#grab-handle" />
</svg>
<div class="rtds-flex rtds-items-center rtds-gap-2 rtds-flex-1">
<h3 class="rtds-accordion__title rtds-flex rtds-font-bold rtds-content-01">
<button type="button" aria-expanded="true" class="rtds-accordion__trigger rtds-group rtds-flex rtds-items-center rtds-text-left rtds-flex-1 rtds-transition-all rtds-p-1 rtds-content-primary" aria-controls="accordionSection-2-1" id="accordion2-1id">
<span class="rtds-accordion__icon rtds-flex rtds-p-2 rtds-ml-auto rtds-h-auto rtds-transition-all">
<svg
class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 rtds-transition-all is-expand-arrow group-aria-expanded:rtds-rotate-180"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#mini--chevron-up" />
</svg>
</span>
<span class="rtds-accordion__trigger-label rtds-content-01 rtds-flex rtds-items-center rtds-flex-1 rtds-min-w-0 rtds-text-sm md:rtds-text-base lg:rtds-text-lg">
Titolo panel
</span>
</button>
</h3>
</div>
<div class="rtds-flex rtds-items-center rtds-gap-2">
<button type="button"
class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"
><svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#mini--arrow-up" />
</svg>
<span class="rtds-sr-only">
Sposta sopra Nome Procedimento
</span>
</button>
<button type="button"
class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"
><svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#mini--arrow-down" />
</svg>
<span class="rtds-sr-only">
Sposta sotto Nome Procedimento
</span>
</button>
<button type="button"
class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"
><svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-sr-only">
Elimina Nome Procedimento
</span>
</button>
</div>
</div>
<ul role="list" id="accordionSection-2-1" aria-labelledby="accordion2-1id" class="rtds-accordion__pane rtds-transition-all rtds-pb-4 rtds-pl-0.5 sm:rtds-pl-4 md:rtds-pl-6 lg:rtds-pl-10 rtds-pr-3 rtds-space-y-4">
<li class="rtds-accordion__item rtds-grid rtds-py-3 rtds-pr-3 rtds-pl-5 rtds-cursor-grab">
<div class="rtds-flex rtds-items-center rtds-justify-between rtds-group/item">
<svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 -rtds-ml-4 md:-rtds-ml-5 rtds-flex-shrink-0 rtds-transition-opacity rtds-opacity-0 group-hover/item:rtds-opacity-100 group-focus-within/item:rtds-opacity-100"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#grab-handle" />
</svg>
<div class="rtds-flex rtds-items-center rtds-gap-2 rtds-flex-1">
<h3 class="rtds-accordion__title rtds-flex rtds-font-bold rtds-content-01">
<button type="button" aria-expanded="true" class="rtds-accordion__trigger rtds-group rtds-flex rtds-items-center rtds-text-left rtds-flex-1 rtds-transition-all rtds-p-1 rtds-content-primary" aria-controls="accordionSubSection-2-1" id="accordionSubSection2-1id">
<span class="rtds-accordion__icon rtds-flex rtds-p-2 rtds-ml-auto rtds-h-auto rtds-transition-all">
<svg
class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 rtds-transition-all is-expand-arrow group-aria-expanded:rtds-rotate-180"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#mini--chevron-up" />
</svg>
</span>
<span class="rtds-accordion__trigger-label rtds-content-01 rtds-flex rtds-items-center rtds-flex-1 rtds-min-w-0 rtds-text-sm md:rtds-text-base lg:rtds-text-lg">
Titolo panel
</span>
</button>
</h3>
</div>
<div class="rtds-flex rtds-items-center rtds-gap-2">
<button type="button"
class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"
><svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#mini--arrow-up" />
</svg>
<span class="rtds-sr-only">
Sposta sopra Nome Procedimento
</span>
</button>
<button type="button"
class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"
><svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#mini--arrow-down" />
</svg>
<span class="rtds-sr-only">
Sposta sotto Nome Procedimento
</span>
</button>
<button type="button"
class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"
><svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-sr-only">
Elimina Nome Procedimento
</span>
</button>
</div>
</div>
<fieldset>
<legend class="rtds-sr-only">
Seleziona procedimento
</legend>
<ul role="list" id="accordionSubSection-2-1" aria-labelledby="accordionSubSection2-1id" class="rtds-accordion__pane rtds-transition-all rtds-pb-4 rtds-pl-6 sm:rtds-pl-8 md:rtds-pl-10 rtds-pr-3 rtds-space-y-4">
<li>
<article
class="rtds-card
rtds-card--smart-trascinabile rtds-background-03 !rtds-cursor-grab
rtds-background-03 !rtds-cursor-grab
is-card-fullclickable rtds-group/card"
>
<div class="rtds-grid md:rtds-flex rtds-w-full md:rtds-items-center md:rtds-justify-between rtds-gap-2 rtds-p-2">
<div class="rtds-input rtds-input-field rtds-input-checkbox rtds-flex-1">
<div class="rtds-flex rtds-gap-2 rtds-items-center">
<input
id="radio-1"
name="radio-1"
class=" " type="checkbox"
>
<label class="rtds-input-checkbox__label rtds-flex-1 rtds-text-sm md:rtds-text-base" for="radio-1">
Nome procedimento
</label>
</div>
</div>
<div class="rtds-flex rtds-items-center rtds-justify-end rtds-gap-2">
<button type="button"
class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"
><svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#mini--arrow-up" />
</svg>
<span class="rtds-sr-only">
Sposta sopra Nome Procedimento
</span>
</button>
<button type="button"
class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"
><svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#mini--arrow-down" />
</svg>
<span class="rtds-sr-only">
Sposta sotto Nome Procedimento
</span>
</button>
<button type="button"
class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"
><svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-sr-only">
Elimina Nome Procedimento
</span>
</button>
</div>
</div>
</article>
</li>
<li>
<article
class="rtds-card
rtds-card--smart-trascinabile rtds-background-03 !rtds-cursor-grab
rtds-background-03 !rtds-cursor-grab
is-card-fullclickable rtds-group/card"
>
<div class="rtds-grid md:rtds-flex rtds-w-full md:rtds-items-center md:rtds-justify-between rtds-gap-2 rtds-p-2">
<div class="rtds-input rtds-input-field rtds-input-radio rtds-flex-1">
<div class="rtds-flex rtds-gap-2 rtds-items-center">
<input
id="radio-1"
name="radio-1"
class=" "
type="radio"
>
<label class="rtds-input-radio__label rtds-flex-1 rtds-text-sm md:rtds-text-base" for="radio-1">
Nome procedimento
</label>
</div>
</div>
<div class="rtds-flex rtds-items-center rtds-justify-end rtds-gap-2">
<button type="button"
class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"
><svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#mini--arrow-up" />
</svg>
<span class="rtds-sr-only">
Sposta sopra Nome Procedimento
</span>
</button>
<button type="button"
class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"
><svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#mini--arrow-down" />
</svg>
<span class="rtds-sr-only">
Sposta sotto Nome Procedimento
</span>
</button>
<button type="button"
class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"
><svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-sr-only">
Elimina Nome Procedimento
</span>
</button>
</div>
</div>
</article>
</li>
<li>
<article
class="rtds-card
rtds-card--smart-trascinabile rtds-background-03 !rtds-cursor-grab
rtds-background-03 !rtds-cursor-grab
rtds-background-03 !rtds-cursor-grab is-selected
is-card-fullclickable rtds-group/card"
>
<div class="rtds-grid md:rtds-flex rtds-w-full md:rtds-items-center md:rtds-justify-between rtds-gap-2 rtds-p-2">
<div class="rtds-input rtds-input-field rtds-input-checkbox rtds-flex-1">
<div class="rtds-flex rtds-gap-2 rtds-items-center">
<input
id="radio-1"
name="radio-1"
class=" " type="checkbox"
checked
>
<label class="rtds-input-checkbox__label rtds-flex-1 rtds-text-sm md:rtds-text-base" for="radio-1">
Nome procedimento
</label>
</div>
</div>
<div class="rtds-flex rtds-items-center rtds-justify-end rtds-gap-2">
<button type="button"
class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"
><svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#mini--arrow-up" />
</svg>
<span class="rtds-sr-only">
Sposta sopra Nome Procedimento
</span>
</button>
<button type="button"
class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"
><svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#mini--arrow-down" />
</svg>
<span class="rtds-sr-only">
Sposta sotto Nome Procedimento
</span>
</button>
<button type="button"
class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"
><svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-sr-only">
Elimina Nome Procedimento
</span>
</button>
</div>
</div>
</article>
</li>
</ul>
</fieldset>
</li>
<li class="rtds-accordion__item rtds-grid rtds-pl-5 rtds-pr-3 rtds-py-3">
<div class="rtds-trascinamento-oggetti">
<div class="rtds-trascinamento-oggetti__button-area rtds-flex rtds-flex-col rtds-py-6 rtds-px-8 rtds-items-center rtds-justify-center rtds-gap-4 md:rtds-gap-6 rtds-border-dashed rtds-border-2 rtds-rounded-md">
<div class="rtds-trascinamento-oggetti__description">
<p class="rtds-trascinamento-oggetti__help rtds-text-sm md:rtds-text-base">Clicca il pulsante qui sotto per aprire il catalogo oppure trascina qui un oggetto.</p>
</div>
<button type="button"
class="rtds-btn
rtds-btn--icon-left rtds-group/button rtds-trascinamento-oggetti__button rtds-btn rtds-btn--outlined rtds-border-gray-03 rtds-cursor-pointer rtds-gap-2"
>
<svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#outline--book-open" />
</svg>
Apri il catalogo
</button>
</div>
</div>
</li>
<li class="rtds-accordion__item rtds-grid rtds-pl-5 rtds-pr-3 rtds-py-3">
<button type="button"
class="rtds-btn
rtds-btn--icon-left rtds-group/button rtds-btn--inverted rtds-btn--s"
>
<svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-transition-all rtds-duration-200 rtds-ease-out rtds-transform group-hover/button:rtds-scale-125"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#outline--plus-circle" />
</svg>
Aggiungi categoria
</button>
</li>
</ul>
</li>
<li class="rtds-hierarchy__item rtds-accordion__item rtds-grid rtds-pr-3 rtds-py-3 rtds-pl-8 rtds-space-y-4 rtds-background-01 rtds-rounded-lg rtds-shadow-sm rtds-cursor-grab">
<div class="rtds-flex rtds-items-center rtds-justify-between rtds-group/item">
<svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 -rtds-ml-4 md:-rtds-ml-5 rtds-flex-shrink-0 rtds-transition-opacity rtds-opacity-0 group-hover/item:rtds-opacity-100 group-focus-within/item:rtds-opacity-100"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#grab-handle" />
</svg>
<div class="rtds-flex rtds-items-center rtds-gap-2 rtds-flex-1">
<h3 class="rtds-accordion__title rtds-flex rtds-font-bold rtds-content-01">
<button type="button" aria-expanded="false" class="rtds-accordion__trigger rtds-group rtds-flex rtds-items-center rtds-text-left rtds-flex-1 rtds-transition-all rtds-p-1 rtds-content-primary" aria-controls="accordionSection-1-2" id="accordion1-2id">
<span class="rtds-accordion__icon rtds-flex rtds-p-2 rtds-ml-auto rtds-h-auto rtds-transition-all">
<svg
class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 rtds-transition-all is-expand-arrow group-aria-expanded:rtds-rotate-180"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#mini--chevron-up" />
</svg>
</span>
<span class="rtds-accordion__trigger-label rtds-content-01 rtds-flex rtds-items-center rtds-flex-1 rtds-min-w-0 rtds-text-sm md:rtds-text-base lg:rtds-text-lg">
Titolo panel
</span>
</button>
</h3>
</div>
<div class="rtds-flex rtds-items-center rtds-gap-2">
<button type="button"
class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"
><svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#mini--arrow-up" />
</svg>
<span class="rtds-sr-only">
Sposta sopra Nome Procedimento
</span>
</button>
<button type="button"
class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"
><svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#mini--arrow-down" />
</svg>
<span class="rtds-sr-only">
Sposta sotto Nome Procedimento
</span>
</button>
<button type="button"
class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"
><svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-sr-only">
Elimina Nome Procedimento
</span>
</button>
</div>
</div>
<ul role="list" id="accordionSection-1-2" aria-labelledby="accordion1-2id" class="rtds-accordion__pane rtds-transition-all rtds-pb-4 rtds-pl-0.5 sm:rtds-pl-4 md:rtds-pl-6 lg:rtds-pl-10 rtds-pr-3 rtds-space-y-4" hidden>
<li class="rtds-accordion__item rtds-grid rtds-py-3 rtds-pr-3 rtds-pl-5 rtds-cursor-grab">
<div class="rtds-flex rtds-items-center rtds-justify-between rtds-group/item">
<svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 -rtds-ml-4 md:-rtds-ml-5 rtds-flex-shrink-0 rtds-transition-opacity rtds-opacity-0 group-hover/item:rtds-opacity-100 group-focus-within/item:rtds-opacity-100"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#grab-handle" />
</svg>
<div class="rtds-flex rtds-items-center rtds-gap-2 rtds-flex-1">
<h3 class="rtds-accordion__title rtds-flex rtds-font-bold rtds-content-01">
<button type="button" aria-expanded="true" class="rtds-accordion__trigger rtds-group rtds-flex rtds-items-center rtds-text-left rtds-flex-1 rtds-transition-all rtds-p-1 rtds-content-primary" aria-controls="accordionSubSection-1-2" id="accordionSubSection1-2id">
<span class="rtds-accordion__icon rtds-flex rtds-p-2 rtds-ml-auto rtds-h-auto rtds-transition-all">
<svg
class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 rtds-transition-all is-expand-arrow group-aria-expanded:rtds-rotate-180"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#mini--chevron-up" />
</svg>
</span>
<span class="rtds-accordion__trigger-label rtds-content-01 rtds-flex rtds-items-center rtds-flex-1 rtds-min-w-0 rtds-text-sm md:rtds-text-base lg:rtds-text-lg">
Titolo panel
</span>
</button>
</h3>
</div>
<div class="rtds-flex rtds-items-center rtds-gap-2">
<button type="button"
class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"
><svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#mini--arrow-up" />
</svg>
<span class="rtds-sr-only">
Sposta sopra Nome Procedimento
</span>
</button>
<button type="button"
class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"
><svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#mini--arrow-down" />
</svg>
<span class="rtds-sr-only">
Sposta sotto Nome Procedimento
</span>
</button>
<button type="button"
class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"
><svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-sr-only">
Elimina Nome Procedimento
</span>
</button>
</div>
</div>
<ul role="list" id="accordionSubSection-1-2" aria-labelledby="accordionSubSection1-2id" class="rtds-accordion__pane rtds-transition-all rtds-pb-4 rtds-pl-6 sm:rtds-pl-8 md:rtds-pl-10 rtds-pr-3 rtds-space-y-4">
<li>
<article
class="rtds-card
rtds-card--smart-trascinabile rtds-background-03 !rtds-cursor-grab
is-card-fullclickable rtds-group/card"
>
<div class="rtds-grid md:rtds-flex rtds-w-full md:rtds-items-center md:rtds-justify-between rtds-gap-2 rtds-p-2">
<div class="rtds-flex rtds-items-center rtds-gap-2">
<svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 rtds-flex-shrink-0 rtds-transition-opacity rtds-opacity-0 group-hover/card:rtds-opacity-100 group-focus-within/card:rtds-opacity-100"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#grab-handle" />
</svg>
<p class="rtds-text-sm md:rtds-text-base rtds-font-medium">Nome procedimento</p>
</div>
<div class="rtds-flex rtds-items-center rtds-justify-end rtds-gap-2">
<button type="button"
class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"
><svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#mini--arrow-up" />
</svg>
<span class="rtds-sr-only">
Sposta sopra Nome Procedimento
</span>
</button>
<button type="button"
class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"
><svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#mini--arrow-down" />
</svg>
<span class="rtds-sr-only">
Sposta sotto Nome Procedimento
</span>
</button>
<button type="button"
class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"
><svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-sr-only">
Elimina Nome Procedimento
</span>
</button>
</div>
</div>
</article>
</li>
<li>
<article
class="rtds-card
rtds-card--smart-trascinabile rtds-background-03 !rtds-cursor-grab
is-card-fullclickable rtds-group/card"
>
<div class="rtds-grid md:rtds-flex rtds-w-full md:rtds-items-center md:rtds-justify-between rtds-gap-2 rtds-p-2">
<div class="rtds-flex rtds-items-center rtds-gap-2">
<svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 rtds-flex-shrink-0 rtds-transition-opacity rtds-opacity-0 group-hover/card:rtds-opacity-100 group-focus-within/card:rtds-opacity-100"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#grab-handle" />
</svg>
<p class="rtds-text-sm md:rtds-text-base rtds-font-medium">Nome procedimento</p>
</div>
<div class="rtds-flex rtds-items-center rtds-justify-end rtds-gap-2">
<button type="button"
class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"
><svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#mini--arrow-up" />
</svg>
<span class="rtds-sr-only">
Sposta sopra Nome Procedimento
</span>
</button>
<button type="button"
class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"
><svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#mini--arrow-down" />
</svg>
<span class="rtds-sr-only">
Sposta sotto Nome Procedimento
</span>
</button>
<button type="button"
class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"
><svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-sr-only">
Elimina Nome Procedimento
</span>
</button>
</div>
</div>
</article>
</li>
<li>
<article
class="rtds-card
rtds-card--smart-trascinabile rtds-background-03 !rtds-cursor-grab
is-card-fullclickable rtds-group/card"
>
<div class="rtds-grid md:rtds-flex rtds-w-full md:rtds-items-center md:rtds-justify-between rtds-gap-2 rtds-p-2">
<div class="rtds-flex rtds-items-center rtds-gap-2">
<svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 rtds-flex-shrink-0 rtds-transition-opacity rtds-opacity-0 group-hover/card:rtds-opacity-100 group-focus-within/card:rtds-opacity-100"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#grab-handle" />
</svg>
<p class="rtds-text-sm md:rtds-text-base rtds-font-medium">Nome procedimento</p>
</div>
<div class="rtds-flex rtds-items-center rtds-justify-end rtds-gap-2">
<button type="button"
class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"
><svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#mini--arrow-up" />
</svg>
<span class="rtds-sr-only">
Sposta sopra Nome Procedimento
</span>
</button>
<button type="button"
class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"
><svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#mini--arrow-down" />
</svg>
<span class="rtds-sr-only">
Sposta sotto Nome Procedimento
</span>
</button>
<button type="button"
class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"
><svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-sr-only">
Elimina Nome Procedimento
</span>
</button>
</div>
</div>
</article>
</li>
</ul>
</li>
<li class="rtds-accordion__item rtds-grid rtds-pl-5 rtds-pr-3 rtds-py-3">
<div class="rtds-trascinamento-oggetti">
<div class="rtds-trascinamento-oggetti__button-area rtds-flex rtds-flex-col rtds-py-6 rtds-px-8 rtds-items-center rtds-justify-center rtds-gap-4 md:rtds-gap-6 rtds-border-dashed rtds-border-2 rtds-rounded-md">
<div class="rtds-trascinamento-oggetti__description">
<p class="rtds-trascinamento-oggetti__help rtds-text-sm md:rtds-text-base">Clicca il pulsante qui sotto per aprire il catalogo oppure trascina qui un oggetto.</p>
</div>
<button type="button"
class="rtds-btn
rtds-btn--icon-left rtds-group/button rtds-trascinamento-oggetti__button rtds-btn rtds-btn--outlined rtds-border-gray-03 rtds-cursor-pointer rtds-gap-2"
>
<svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#outline--book-open" />
</svg>
Apri il catalogo
</button>
</div>
</div>
</li>
<li class="rtds-accordion__item rtds-grid rtds-pl-5 rtds-pr-3 rtds-py-3">
<button type="button"
class="rtds-btn
rtds-btn--icon-left rtds-group/button rtds-btn--inverted rtds-btn--s"
>
<svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-transition-all rtds-duration-200 rtds-ease-out rtds-transform group-hover/button:rtds-scale-125"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#outline--plus-circle" />
</svg>
Aggiungi categoria
</button>
</li>
</ul>
</li>
<li class="rtds-hierarchy__item rtds-accordion__item rtds-grid rtds-pr-3 rtds-py-3 rtds-pl-8 rtds-space-y-4 rtds-background-01 rtds-rounded-lg rtds-shadow-sm rtds-cursor-grab">
<div class="rtds-flex rtds-items-center rtds-justify-between rtds-group/item">
<svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 -rtds-ml-4 md:-rtds-ml-5 rtds-flex-shrink-0 rtds-transition-opacity rtds-opacity-0 group-hover/item:rtds-opacity-100 group-focus-within/item:rtds-opacity-100"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#grab-handle" />
</svg>
<div class="rtds-flex rtds-items-center rtds-gap-2 rtds-flex-1">
<h3 class="rtds-accordion__title rtds-flex rtds-font-bold rtds-content-01">
<button type="button" aria-expanded="false" class="rtds-accordion__trigger rtds-group rtds-flex rtds-items-center rtds-text-left rtds-flex-1 rtds-transition-all rtds-p-1 rtds-content-primary" aria-controls="accordionSection-2-2" id="accordion2-2id">
<span class="rtds-accordion__icon rtds-flex rtds-p-2 rtds-ml-auto rtds-h-auto rtds-transition-all">
<svg
class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 rtds-transition-all is-expand-arrow group-aria-expanded:rtds-rotate-180"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#mini--chevron-up" />
</svg>
</span>
<span class="rtds-accordion__trigger-label rtds-content-01 rtds-flex rtds-items-center rtds-flex-1 rtds-min-w-0 rtds-text-sm md:rtds-text-base lg:rtds-text-lg">
Titolo panel
</span>
</button>
</h3>
</div>
<div class="rtds-flex rtds-items-center rtds-gap-2">
<button type="button"
class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"
><svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#mini--arrow-up" />
</svg>
<span class="rtds-sr-only">
Sposta sopra Nome Procedimento
</span>
</button>
<button type="button"
class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"
><svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#mini--arrow-down" />
</svg>
<span class="rtds-sr-only">
Sposta sotto Nome Procedimento
</span>
</button>
<button type="button"
class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"
><svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-sr-only">
Elimina Nome Procedimento
</span>
</button>
</div>
</div>
<ul role="list" id="accordionSection-2-2" aria-labelledby="accordion2-2id" class="rtds-accordion__pane rtds-transition-all rtds-pb-4 rtds-pl-0.5 sm:rtds-pl-4 md:rtds-pl-6 lg:rtds-pl-10 rtds-pr-3 rtds-space-y-4" hidden>
<li class="rtds-accordion__item rtds-grid rtds-py-3 rtds-pr-3 rtds-pl-5 rtds-cursor-grab">
<div class="rtds-flex rtds-items-center rtds-justify-between rtds-group/item">
<svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 -rtds-ml-4 md:-rtds-ml-5 rtds-flex-shrink-0 rtds-transition-opacity rtds-opacity-0 group-hover/item:rtds-opacity-100 group-focus-within/item:rtds-opacity-100"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#grab-handle" />
</svg>
<div class="rtds-flex rtds-items-center rtds-gap-2 rtds-flex-1">
<h3 class="rtds-accordion__title rtds-flex rtds-font-bold rtds-content-01">
<button type="button" aria-expanded="true" class="rtds-accordion__trigger rtds-group rtds-flex rtds-items-center rtds-text-left rtds-flex-1 rtds-transition-all rtds-p-1 rtds-content-primary" aria-controls="accordionSubSection-2-2" id="accordionSubSection2-2id">
<span class="rtds-accordion__icon rtds-flex rtds-p-2 rtds-ml-auto rtds-h-auto rtds-transition-all">
<svg
class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 rtds-transition-all is-expand-arrow group-aria-expanded:rtds-rotate-180"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#mini--chevron-up" />
</svg>
</span>
<span class="rtds-accordion__trigger-label rtds-content-01 rtds-flex rtds-items-center rtds-flex-1 rtds-min-w-0 rtds-text-sm md:rtds-text-base lg:rtds-text-lg">
Titolo panel
</span>
</button>
</h3>
</div>
<div class="rtds-flex rtds-items-center rtds-gap-2">
<button type="button"
class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"
><svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#mini--arrow-up" />
</svg>
<span class="rtds-sr-only">
Sposta sopra Nome Procedimento
</span>
</button>
<button type="button"
class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"
><svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#mini--arrow-down" />
</svg>
<span class="rtds-sr-only">
Sposta sotto Nome Procedimento
</span>
</button>
<button type="button"
class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"
><svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-sr-only">
Elimina Nome Procedimento
</span>
</button>
</div>
</div>
<fieldset>
<legend class="rtds-sr-only">
Seleziona procedimento
</legend>
<ul role="list" id="accordionSubSection-2-2" aria-labelledby="accordionSubSection2-2id" class="rtds-accordion__pane rtds-transition-all rtds-pb-4 rtds-pl-6 sm:rtds-pl-8 md:rtds-pl-10 rtds-pr-3 rtds-space-y-4">
<li>
<article
class="rtds-card
rtds-card--smart-trascinabile rtds-background-03 !rtds-cursor-grab
rtds-background-03 !rtds-cursor-grab
is-card-fullclickable rtds-group/card"
>
<div class="rtds-grid md:rtds-flex rtds-w-full md:rtds-items-center md:rtds-justify-between rtds-gap-2 rtds-p-2">
<div class="rtds-input rtds-input-field rtds-input-checkbox rtds-flex-1">
<div class="rtds-flex rtds-gap-2 rtds-items-center">
<input
id="radio-1"
name="radio-1"
class=" " type="checkbox"
>
<label class="rtds-input-checkbox__label rtds-flex-1 rtds-text-sm md:rtds-text-base" for="radio-1">
Nome procedimento
</label>
</div>
</div>
<div class="rtds-flex rtds-items-center rtds-justify-end rtds-gap-2">
<button type="button"
class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"
><svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#mini--arrow-up" />
</svg>
<span class="rtds-sr-only">
Sposta sopra Nome Procedimento
</span>
</button>
<button type="button"
class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"
><svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#mini--arrow-down" />
</svg>
<span class="rtds-sr-only">
Sposta sotto Nome Procedimento
</span>
</button>
<button type="button"
class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"
><svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-sr-only">
Elimina Nome Procedimento
</span>
</button>
</div>
</div>
</article>
</li>
<li>
<article
class="rtds-card
rtds-card--smart-trascinabile rtds-background-03 !rtds-cursor-grab
rtds-background-03 !rtds-cursor-grab
is-card-fullclickable rtds-group/card"
>
<div class="rtds-grid md:rtds-flex rtds-w-full md:rtds-items-center md:rtds-justify-between rtds-gap-2 rtds-p-2">
<div class="rtds-input rtds-input-field rtds-input-radio rtds-flex-1">
<div class="rtds-flex rtds-gap-2 rtds-items-center">
<input
id="radio-1"
name="radio-1"
class=" "
type="radio"
>
<label class="rtds-input-radio__label rtds-flex-1 rtds-text-sm md:rtds-text-base" for="radio-1">
Nome procedimento
</label>
</div>
</div>
<div class="rtds-flex rtds-items-center rtds-justify-end rtds-gap-2">
<button type="button"
class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"
><svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#mini--arrow-up" />
</svg>
<span class="rtds-sr-only">
Sposta sopra Nome Procedimento
</span>
</button>
<button type="button"
class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"
><svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#mini--arrow-down" />
</svg>
<span class="rtds-sr-only">
Sposta sotto Nome Procedimento
</span>
</button>
<button type="button"
class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"
><svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-sr-only">
Elimina Nome Procedimento
</span>
</button>
</div>
</div>
</article>
</li>
<li>
<article
class="rtds-card
rtds-card--smart-trascinabile rtds-background-03 !rtds-cursor-grab
rtds-background-03 !rtds-cursor-grab
rtds-background-03 !rtds-cursor-grab is-selected
is-card-fullclickable rtds-group/card"
>
<div class="rtds-grid md:rtds-flex rtds-w-full md:rtds-items-center md:rtds-justify-between rtds-gap-2 rtds-p-2">
<div class="rtds-input rtds-input-field rtds-input-checkbox rtds-flex-1">
<div class="rtds-flex rtds-gap-2 rtds-items-center">
<input
id="radio-1"
name="radio-1"
class=" " type="checkbox"
checked
>
<label class="rtds-input-checkbox__label rtds-flex-1 rtds-text-sm md:rtds-text-base" for="radio-1">
Nome procedimento
</label>
</div>
</div>
<div class="rtds-flex rtds-items-center rtds-justify-end rtds-gap-2">
<button type="button"
class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"
><svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#mini--arrow-up" />
</svg>
<span class="rtds-sr-only">
Sposta sopra Nome Procedimento
</span>
</button>
<button type="button"
class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"
><svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#mini--arrow-down" />
</svg>
<span class="rtds-sr-only">
Sposta sotto Nome Procedimento
</span>
</button>
<button type="button"
class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"
><svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-sr-only">
Elimina Nome Procedimento
</span>
</button>
</div>
</div>
</article>
</li>
</ul>
</fieldset>
</li>
<li class="rtds-accordion__item rtds-grid rtds-pl-5 rtds-pr-3 rtds-py-3">
<div class="rtds-trascinamento-oggetti">
<div class="rtds-trascinamento-oggetti__button-area rtds-flex rtds-flex-col rtds-py-6 rtds-px-8 rtds-items-center rtds-justify-center rtds-gap-4 md:rtds-gap-6 rtds-border-dashed rtds-border-2 rtds-rounded-md">
<div class="rtds-trascinamento-oggetti__description">
<p class="rtds-trascinamento-oggetti__help rtds-text-sm md:rtds-text-base">Clicca il pulsante qui sotto per aprire il catalogo oppure trascina qui un oggetto.</p>
</div>
<button type="button"
class="rtds-btn
rtds-btn--icon-left rtds-group/button rtds-trascinamento-oggetti__button rtds-btn rtds-btn--outlined rtds-border-gray-03 rtds-cursor-pointer rtds-gap-2"
>
<svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#outline--book-open" />
</svg>
Apri il catalogo
</button>
</div>
</div>
</li>
<li class="rtds-accordion__item rtds-grid rtds-pl-5 rtds-pr-3 rtds-py-3">
<button type="button"
class="rtds-btn
rtds-btn--icon-left rtds-group/button rtds-btn--inverted rtds-btn--s"
>
<svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-transition-all rtds-duration-200 rtds-ease-out rtds-transform group-hover/button:rtds-scale-125"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="../../icons.svg#outline--plus-circle" />
</svg>
Aggiungi categoria
</button>
</li>
</ul>
</li>
</ul>