/* Token colore: vedi _assets/css/palette.css (sorgente di verità, caricato prima di questo file). */
:root {
  --active-link-padding: 4px;
  --form-menu-width: 200px;
}

/* Bootstrap 3's .btn never resets font-family, and <button> does NOT inherit
   the page font by default in browsers (unlike <a>) — it uses the OS/browser
   system font. At the same font-size/line-height, a different font renders
   taller, so <button class="btn"> looks visibly taller than <a class="btn">
   (e.g. a "Save" button next to an "Actions" dropdown-toggle link). */
button.btn {
  font-family: inherit;
}

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

.break-all {
  word-break: break-all !important;
  white-space: normal;
}

.w-min-250 {
  min-width: 250px !important;
}

.secondary-text-color {
  color: var(--secondary-text-color) !important;
}

.success-color,
.green-color {
  color: var(--green-700) !important;
}

.orange-color,
.warning-color {
  color: var(--orange-700) !important;
}

.label-info {
  background-color: var(--blue-700) !important;
}

.red-color {
  color: var(--danger-color) !important;
}

.info-color {
  color: var(--blue-300) !important;
}

.violet-color {
  color: var(--violet-900) !important;
}

.danger-color {
  color: var(--danger-color) !important;
}

.warning-color {
  color: var(--warning-color) !important;
}

.gray-color {
  color: var(--secondary-text-color) !important;
}

.default-color {
  color: rgb(124, 124, 124) !important;
}

.primary-color {
  color: var(--primary-color) !important;
}

.mt2 {
  margin-top: 2px !important;
}

.shadow-sm {
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.smoothed {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.stats-box-wrapper .stats-box,
.shadow {
  /* box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); */
}

.shadow-md {
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.shadow-lg {
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.dropdown-menu,
.navbar-nav>li>.dropdown-menu,
.shadow-xl {
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

.shadow-2xl {
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}

.shadow-inner {
  box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
}

.shadow-none {
  box-shadow: 0 0 #00000000;
}

.dropdown-menu,
.navbar-nav>li>.dropdown-menu {
  border-radius: 3px !important;
  border: 1px solid var(--border-color);
}

.dropdown-menu .divider {
  background-color: var(--border-color);
}

.table thead>tr>th {
  border-bottom: 1px solid var(--border-color);
}

.table thead>tr>th,
.table tbody>tr>th,
.table tfoot>tr>th,
.table thead>tr>td,
.table tbody>tr>td,
.table tfoot>tr>td {
  border-top: 1px solid var(--border-color);
}

.ui_group_btns {
  display: flex;
  gap: 10px;
}


.steps li a {
  text-shadow: none;
}

/* .form-control, a.form-control i moved to form.css (Group A) */
body,
h1,
.black-color,
.nav-tabs>li.active>a,
.nav-tabs>li.active>a:hover,
.nav-tabs>li.active>a:focus {
  color: var(--text-color);
}

a.black-color:hover,
a.black-color:focus {
  color: var(--primary-color);
}

.steps>li>a {
  color: var(--prune-50);
  border: 0;
  line-height: 1;
  display: block;
}

.steps>li>a:hover,
.steps>li>a:focus {
  color: var(--prune-50);
  /* background-color: transparent; */
  background-color: var(--blue-800);
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  outline: none;
}

/* .steps>li.active>a, .steps>li.active>a:hover, .steps>li.active>a:focus{
  color: var(--text-color);
} */
.table.table-se tbody>tr>td .icon-reorder {
  color: var(--secondary-text-color);
  padding: 12px;
  background: var(--gray-100);
  border-radius: 50%;
  margin: 0 12px 0 0;
  font-size: 18px;
}

.table.table-se tbody>tr>td .icons-list {
  margin: 0;
  line-height: 1;
  padding-left: 0;
  list-style: none;
  color: var(--gray-300);
  white-space: nowrap;
  font-size: 18px;
}

.table.table-se tbody>tr>td .icons-list>li {
  display: inline-block;
  padding-left: 5px;
  padding-right: 5px;
}

.table.table-se tbody>tr>td .icons-list>li:first-child {
  padding-left: 0;
}

.table.table-se tbody>tr>td .icons-list>li:last-child {
  padding-right: 0;
}

.table.table-se tbody>tr.ui-sortable-helper {
  background-color: var(--gray-50) !important;
}

.table.table-se tbody>tr.ui-sortable-helper td {
  border: 0 !important;
}

.table.table-se tbody>tr>td code {
  margin: 0;
  /* background-color: var(--gray-100); */
  color: var(--text-color);
  padding: 0;
  background-color: transparent;
}

.table.table-se tbody>tr>td a:hover,
.table.table-se tbody>tr>td a:focus,
a:hover,
a:focus {
  color: var(--dark-primary-color);
  text-decoration: none !important;
}

/* .searchbar a:hover moved to ui_elementi.css */

/* .searchbar .form-control, .searchbar .has-value moved to form.css (Group C) */
.select2-container-multi .select2-choices,
.redactor-box.redactor-styles-on,
.input-group-addon {
  border-color: var(--input-border-color);
  background-color: var(--white-color);
}

/* .searchbar { border } moved to ui_elementi.css */

.btn {
  border-radius: 3px;
}

.btn-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.pagination-container-2023 li.active a.btn {
  background-color: rgba(79, 108, 244, 0.15) !important;
  color: var(--primary-color) !important;
}

a {
  color: var(--primary-color);
}

a {
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

body {
  background: var(--body-background-color);
  color: var(--text-color);
}

.dropdown-menu>li>a {
  font-size: 14px;
  padding: 4px 16px;
}

header {
  /* border-bottom: 1px solid var(--prune-100); */
  /* background-color: var(--prune-50); */
  background-color: var(--header-background-color);
  padding: 8px 0;
  border: 0;
  z-index: 9999;
}

.content-wrapper {
  border-radius: 6px;
  background: var(--white-color);
  padding: 0;
}

.container-fluid {
  padding: 0 8px;
}

.content {
  border-radius: 6px;
  background: var(--white-color);

  margin: 0 0 24px 0;
}

@media (min-width: 1214px) {
  .container-fluid {
    padding: 0 14px;
  }

  .content {
    border-radius: 6px;
    background: var(--white-color);
    padding: 0 24px 64px 24px;
    margin: 0 0 24px 0;
  }
}

.page {
  background: transparent;
  position: relative;
  box-shadow: 0px 0px 50px var(--prune-100);
}

.iframe-html {
  background: var(--prune-50);
  height: 100%;
}

.iframe-html body {
  background: var(--prune-50);
  height: 100%;
}

/* Barre di scorrimento della pagina dentro #iframeModal (layout iframe.tpl).
   Regola: in orizzontale mai, in verticale solo se il contenuto lo richiede.

   1) display:flow-root — il <body> è alto 100% esatti, quindi il margine
      superiore del primo blocco (es. .form-container{margin-top:1rem})
      collassava FUORI dal body spingendolo 10px oltre il fondo: barra
      verticale sempre accesa anche con la form che ci stava tutta.
      Con flow-root il margine resta dentro e il body torna a misurare
      esattamente il contenuto.
   2) padding laterale — lo davano i margini negativi di .row, che però
      allargavano la pagina di 30px (barra orizzontale). Il markup ora usa
      solo .form-container (flex), lo spazio lo mette il padding.
   3) i contenuti larghi (tabelle) scorrono dentro il proprio contenitore,
      non trascinando in orizzontale l'intera pagina. */
body.iframe {
  display: flow-root;
}

body.iframe>.form-container {
  padding: 0 15px;
}

body.iframe .table-responsive {
  overflow-x: auto;
}

.steps>li.active>a {
  background: var(--blue-50);
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  color: var(--blue-900);
  /*  border-bottom: 1px dashed #bdcfe8; */
}

.nav-tabs>li>a {
  border-radius: 6px 6px 0 0;
}

.steps>li>a {
  /* border-radius: 3px; */
  padding: 16px 0 2px 0;
  min-width: 90px;
}

.steps span {
  font-size: 14px;
  font-weight: 400;
  margin: 0px;
}

.steps i {
  font-size: 22px;
  display: block;
}

h1 {
  margin: 0 0 10px 0;
  letter-spacing: 0;
  font-size: 30px;
  font-weight: 600;
}

.placeholder {
  color: var(--secondary-text-color);
  font-weight: 400;
}

/* .form-control placeholder/anchor/typography rules moved to form.css (Group A) */

.dropdown-menu a,
.dropdown-menu label {
  padding: 0.55rem 0.75rem;
  font-weight: 400;
}

.dropdown-menu a,
.dropdown-menu label,
.dropdown-menu div {
  font-size: 14px;
  margin: 0;
}

.dropdown-menu a:hover,
.dropdown-menu label:hover,
.dropdown-menu a:focus,
.dropdown-menu label:focus {
  text-decoration: none;
  color: var(--prune-50);
  background-color: var(--primary-color);
}


.table.table-se thead>tr>th,
.table.table-se tbody>tr>th,
.table.table-se tfoot>tr>th,
.table.table-se thead>tr>td,
.table.table-se tbody>tr>td,
.table.table-se tfoot>tr>td {
  padding: 8px 20px;
}

.table.table-se thead>tr>th {
  text-transform: uppercase;
  font-weight: 500;
  font-size: 12px;
  color: var(--text-color);
  letter-spacing: 0.02rem;
  white-space: nowrap;
}

.table.table-se thead>tr>th:first-child,
.table.table-se tbody>tr>td:first-child {
  padding-left: 0;
}

.table.table-se thead>tr>th:last-child,
.table.table-se tbody>tr>td:last-child {
  padding-right: 0;
}

.table.table-se tbody>tr>td {
  font-size: 14px;
  color: var(--text-color);
  vertical-align: middle;
  padding: 20px 20px;
  height: 72px;
}

.table.table-se tbody>tr>td a:hover {
  text-decoration: underline;
}

.table.table-se tbody>tr>td .fs-large {
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
}

.label,
.table.table-se tbody>tr>td .label {
  /* margin: 2px;
  width: auto; 
  color: var(--prune-50); 
  font-weight: 500;
  padding: 0px 12px;
  border-radius: 30px;
  font-size: 14px;
  line-height: 1.5; */

  margin: 2px 0;
  width: auto;
  /* color: var(--text-color); */
  font-weight: 400;
  padding: 6px 12px;
  border-radius: 30px;
  font-size: 14px;
  line-height: 1 !important;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -webkit-font-variant-ligatures: none;
  font-variant-ligatures: none;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  /* background-color: var(--gray-200); */
}

.table.table-se tbody>tr>td strong {
  font-weight: 600;
}


/* .content-header h1,
.content-header .btn-group{
  margin: 0 0 20px 0;
} */
.content-header .btn-group .btn-group {
  /* margin: 0; */
}

.content-header .btn-group>a,
.content-header .btn-group>button {
  font-size: 14px;
  font-weight: 500;
  padding: 7px;
}

.btn {
  border-radius: 3px;
}

.btn-primary {
  color: var(--prune-50);
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  padding: 10px 12px;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--dark-primary-color);
  border-color: var(--dark-primary-color);
}

.btn-secondary {
  color: var(--primary-color);
  background-color: var(--prune-50);
  border-color: var(--prune-200);
  padding: 10px 12px;
}

.btn-secondary:hover,
.btn-secondary:focus {
  color: var(--dark-primary-color);
  border-color: var(--dark-primary-color);
}

.btn-default2 {
  color: var(--text-color);
  background-color: transparent;
  border-color: var(--input-border-color);
}

.btn-default {
  color: var(--text-color);
  background-color: transparent;
  border-color: var(--input-border-color);
  padding: 10px 12px;
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active,
.open .dropdown-toggle.btn-default {
  color: var(--text-color);
  background-color: var(--gray-100);
  border-color: var(--input-border-color);
}

.table.table-se .btn-not-arrived,
.table.table-se .btn-arrived,
.table.table-se .btn-published,
.table.table-se .btn-unpublished,
.table.table-se .btn-outline-danger,
.table.table-se .btn-default {
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  min-width: 90px;
  padding: 6px 12px;
}

.btn-arrived,
.btn-default.btn-arrived,
.table.table-se .btn-arrived,
.table.table-se .btn-default.btn-arrived,
.table.table-se .btn-arrived:focus,
.table.table-se .btn-default.btn-arrived:focus,
.table.table-se .btn-arrived:hover,
.table.table-se .btn-default.btn-arrived:hover {
  color: var(--prune-50) !important;
  border-color: var(--green-600) !important;
  background: var(--green-600) !important;
}

.table.table-se .btn-default,
.table.table-se .btn-default:focus,
.table.table-se .btn-default:hover,
.table.table-se .btn-not-arrived,
.table.table-se .btn-not-arrived:focus,
.table.table-se .btn-not-arrived:hover {
  color: var(--text-color) !important;
  border-color: var(--input-border-color);
  background: var(--prune-50);
}

/* Wall: bottone Publish/Published (stesso stile di Arrived). */
.btn-published,
.table.table-se .btn-published,
.table.table-se .btn-published:focus,
.table.table-se .btn-published:hover {
  color: var(--prune-50) !important;
  border-color: var(--green-600) !important;
  background: var(--green-600) !important;
}

.table.table-se .btn-unpublished,
.table.table-se .btn-unpublished:focus,
.table.table-se .btn-unpublished:hover {
  color: var(--text-color) !important;
  border-color: var(--input-border-color);
  background: var(--prune-50);
}

.table.table-se .btn-arrived.disabled,
.table.table-se .btn-not-arrived.disabled {
  opacity: 0.2;
  cursor: not-allowed;
  pointer-events: none;
}

.table.table-se .btn-outline-danger,
.table.table-se .btn-outline-danger:focus,
.table.table-se .btn-outline-danger:hover {
  color: var(--red-600);
  background-color: transparent;
  border-color: var(--red-600);
}

.table.table-se .btn-group-actions {
  white-space: nowrap;
  margin: 0 0 0 auto;
}

.btn-group-actions a {
  font-size: 18px;
  color: var(--secondary-text-color);
  text-align: center;
  padding: 7px;
  border-radius: 3px;
}

.btn-group-actions a:hover,
.btn-group-actions a:focus {
  text-decoration: none;
  color: var(--text-color) !important;
}

#container_attendee_pagination {
  color: var(--secondary-text-color);
  font-size: 12px;
  margin-top: 2rem;
}

#container_attendee_pagination strong.black-color {
  color: var(--text-color);
}

#attendees-stats {
  margin-bottom: 20px;
}

.pagination-container-2023 li a.btn {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-color);
}

.pagination-container-2023 {
  padding: 0;
  margin-bottom: 20px;
}

.pagination-container-2023 li:last-child a.btn {
  margin-right: 0;
}

.content .nav-tabs>li {
  margin-bottom: 0;

}

.content .tabs-new {
  margin: 0px -24px 14px -24px;
  padding: 8px 3rem;
  background: var(--blue-50);
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.content .tabs-new>li {
  position: relative;
}

.content .tabs-new>li>a {
  font-size: 14px;
  font-weight: 500;
  text-transform: none;
  line-height: 1;
  color: var(--blue-950);
  padding: 9px;
  background-color: transparent;
  border-radius: 3px;
  display: block;
}

.content .tabs-new>li>a:hover {
  color: var(--gray-50);
  background-color: var(--blue-900) !important;
}


.content .tabs-new>li.active>a {
  color: var(--prune-50);
  border-bottom: 0 !important;
  background-color: var(--blue-900);
}


.content .nav-tabs {
  border-bottom: 0;
  position: relative;
}


.steps {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0;

  list-style: none;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  gap: 5px;
  background: var(--blue-900);
  padding: 15px 15px 0 15px !important;

}

.steps,
.content .tabs-new.nav-tabs {
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.steps>li,
.content .tabs-new.nav-tabs>li {
  float: none !important;
  display: inline-block !important;
  z-index: 1;
}

.steps>li {
  /* flex-basis: 0;
  flex-grow: 1; */
  text-align: center;
  display: block !important;
  width: 100% !important;
  margin: 0;
  position: relative;
  flex-grow: 0;
  flex-shrink: 1;

  /* min-width: auto; */
  /* min-width: 100px; */
}

.steps>li>a {
  /* min-width: 100px !important; */
}

/* .steps>li.active::after {
  content: "\02C7";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 13px;
  color: #dce7f3;
  font-size: 38px;

} */

.steps span {
  width: 100%;
}

.steps>li span {
  position: relative;
  padding: 8px 12px;
  display: inline-block;
  width: auto;
}

/* .steps>li.active>a span:after{
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: var(--primary-color);
} */

.modal-backdrop {
  background: rgba(25, 25, 25, 0.75);
}

.modal-content {
  border: 0;
  box-shadow: 0 8px 30px 0 rgba(0, 0, 0, .06);
  border-radius: 0;
}

#iframeModal .modal-xl {
  width: 100%;
  padding: 0;
}

#iframeModal button.close {
  font-size: 30px;
  top: 15px;
  right: 18px;
}

.initials-2023-navbar {
  width: 44px;
  height: 44px;
  font-size: 16px;
  line-height: 44px;
  border-radius: 100px;
  border: 0;
  background-color: var(--gray-200);
  color: var(--text-color);
  font-weight: 400;
}

.navbar-brand {
  padding: 0;
}

.navbar-brand img {
  width: 180px;
  /* height: 32px; */
  margin-top: -1px;
}

.navbar .navbar-nav>li {
  margin: 8px 12px;
}

.navbar .navbar-nav>li>a {
  padding: 12px;
  font-size: 18px;
  font-weight: 500;
  color: var(--text-color);
  text-align: center;
  padding: 0;
}

.navbar .navbar-nav>li>a>span {
  padding: 10px var(--active-link-padding);
  display: inline-block;
  position: relative;
}

.navbar .navbar-nav>li.active>a>span:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: var(--primary-color);
}

.navbar .navbar-nav>li>a:hover,
.navbar .navbar-nav>li>a:focus {
  color: var(--primary-color);
  background-color: transparent;
}

.container-fluid {
  max-width: 1690px;
  margin-left: auto;
  margin-right: auto;
}

/* Regole searchbar (.searchbar base/flex, -container, button, -clear,
   dropdown-menu, se_flatpickr_range) spostate in ui_elementi.css */

.wrapper-search {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-direction: column;
}

.se_flatpickr_range {
  position: relative;
  padding-left: 0;
  padding-right: 0;
}

.se_flatpickr_range i.sep {
  color: var(--secondary-text-color);
}

.flex-grow-1 {
  flex-grow: 1;
}

.se_flatpickr_range_from,
.se_flatpickr_range_to {
  text-align: left;
}

.breadcrumbs {
  /* background: var(--gray-50); */
  padding: 10px 5px;
  border-radius: 6px;
  font-size: 1.5rem;
}

.breadcrumbs a.stc {
  font-weight: 600;
}

#event-header {
  /* background-color: var(--prune-50); */
  padding: 0;
  margin: 0 0 0 0;
  /* border-bottom: 1px solid var(--prune-200); */
  position: sticky;
  top: 8px;
  z-index: 999;
}

#event-header .dropdown-menu {
  color: var(--text-color);
  font-weight: 400;
}

#event-header .dropdown-menu.dropdown-nolink {
  margin: 0 0 0 15px;
}

#event-header .dropdown-menu.dropdown-nolink li {
  font-size: 14px;
}

#event-header .dropdown-menu.dropdown-nolink li strong {
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 600;
}

#event-header .dropdown-menu.dropdown-nolink ul li {
  margin: 4px 0 0 0;
}

#event-header .dropdown-menu.dropdown-nolink ul {
  line-height: 1.35;
}

#event-header .dropdown-menu.dropdown-nolink ul li a {
  padding: 0;
}

#event-header code {
  margin: 0;
  padding: 0;
  background-color: transparent;
  border: 0;
  color: var(--prune-50);
}

#event-header .btn-group>a {
  background-color: var(--prune-50);
  font-weight: 400;
  /* color: var(--prune-500); */
  color: var(--prune-50);

  border-color: transparent;
  background-color: transparent;
  padding-left: 0;
  padding-right: 0;
}

#event-header .btn-group>a .badge2 {
  margin-left: 5px;
}

#event-header .btn-group>a>strong {
  font-weight: 500;
  color: var(--text-color);
}

#event-header .event-header-wrapper {
  border-radius: 10px;
  margin-bottom: 1rem;
}

#event-header .event-header-wrapper {
  background-color: var(--identity-background-color);
  padding: 12px 12px 6px 12px;
  color: var(--prune-50);
}

#event-header .event-header-content .event-header-a {
  color: var(--prune-50);
}

#event-header .event-header-content .event-header-a:hover,
#event-header .event-header-content .event-header-a:focus {
  color: var(--light-primary-color);
}

#event-header .event-header-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
  font-weight: 600;
}

#event-header .event-header-title>div {
  min-width: 0;
}

#event-header .event-header-date,
#event-header .event-header-site {
  margin-left: 29px;
}

#event-header .event-header-title-text {
  flex: none;
}

.d-flex {
  display: flex;
}

.align-items-center {
  align-items: center;
}

.align-items-baseline {
  align-items: baseline;
}

.align-items-flex-start {
  align-items: flex-start;
}

.text-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.flex-child-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
}

.content-header {
  margin: 14px 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  flex-wrap: wrap;
}

.content-header>div {
  flex: 1
}

.content-header>div:nth-child(2) {
  flex: 0 0 auto;
}

.content-header .wrapper-update {
  display: flex;
  align-items: center;
  gap: 8px;
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}


.app-update-message {
  font-size: 14px;
  color: var(--orange-400);
  animation: slideIn 0.5s 2s ease-in-out forwards;
  opacity: 0;
  background: var(--prune-50);
  padding: 6px;
  border-radius: 5px;
  border: 1px dashed var(--orange-400);
}


@keyframes slideIn {
  from {
    transform: translateX(-10px);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/*STYLE monema*/
.product__list li:nth-child(odd) {}

/* .select2-container-multi .select2-choices .select2-search-field input {

  color: rgb(25, 25, 25) !important;

} */

.redactor-statusbar li {

  color: rgba(0, 0, 0, 0.8) !important;

}

.event_create .content-wrapper {
  max-width: 800px;
  margin: 0 auto;
}

.flatpickr-calendar.open {
  display: inline-block;
  z-index: 1000000;
}

#event-header .event-header-content {
  display: flex;
  flex-wrap: wrap;
  column-gap: 24px;
  align-items: center;
}

/* */

@media (min-width: 1214px) {
  .content-header>div>.btn-group {
    margin: 0 0 0 0 !important;
    padding: 0;
  }

  .content-header h1 {
    margin: 0 18px 0 0 !important;
    padding: 0;
  }

  #event-header .event-header-title-text {
    max-width: 400px;
  }

  #event-header .event-header-wrapper {
    padding: 0px 12px;
  }


  #event-header .event-header-content>div {
    min-width: 0;
  }

  #event-header .event-header-title {
    margin: 0;
  }

  #event-header .event-header-date {
    flex-grow: 1;
  }

  #event-header .event-header-date,
  #event-header .event-header-site {
    margin-left: 0;
  }

  .d-flex-lg {
    display: flex;
    align-items: space-between;
  }

  .d-justify-space-between-g {
    justify-content: space-between;
  }

  .se_flatpickr_range {
    position: relative;
    width: 300px;
  }

  .se_flatpickr_range_from,
  .se_flatpickr_range_to {
    text-align: center;
  }

  /* Regole searchbar responsive (min-width:1214px) spostate in ui_elementi.css */
}

header {
  padding: 12px 0;
  position: relative;
}

.navbar {
  z-index: 98;
}

.modal-dialog,
.modal-content,
.modal-body {
  height: 100%;
  padding: 0;
}

.iframe-padding {
  padding: 15px;
}

@media (min-width: 768px) {

  .modal-dialog,
  .modal-content,
  .modal-body {
    height: 660px;
    border-radius: 3px;
  }

  #iframeModal iframe {
    border-radius: 3px;
  }

  .iframe-padding {
    padding: 30px;
  }

  #iframeModal .modal-xl {
    width: 98%;
    max-width: 1440px;
  }

  header {
    padding: 8px 0;
  }

  .container-fluid {
    padding: 0px 25px;
  }

  .navbar,
  .navbar-collapse .navbar-nav {
    display: flex;
    align-items: center;
  }

  .navbar {
    justify-content: space-between;
  }

  .navbar>div {
    float: none !important;
    flex-grow: 1;
  }

  .navbar .navbar-nav>li>a {
    font-size: 16px;
  }

  .d-flex-md {
    display: flex;
  }
}


@media (max-width: 1439px) {
  .table-responsive {
    overflow-y: hidden;
    overflow-x: scroll;
    border: 1px solid var(--prune-100);
    margin-bottom: 15px;
    width: 100%;
    padding: 5px 15px;
    border-radius: 3px;
  }

  .table-responsive>.table {
    margin-bottom: 0;
    background-color: var(--prune-50);
  }

  .table-responsive>.table>thead>tr>th,
  .table-responsive>.table>tbody>tr>th,
  .table-responsive>.table>tfoot>tr>th,
  .table-responsive>.table>thead>tr>td,
  .table-responsive>.table>tbody>tr>td,
  .table-responsive>.table>tfoot>tr>td {
    /* white-space: nowrap; */
    white-space: normal;
  }
}

@media (max-width: 1213px) {

  /* .table-responsive {
    overflow-y: hidden;
    overflow-x: scroll;
    border: 1px solid var(--prune-100);
    margin-bottom: 15px;
    width: 100%;
    padding: 5px 15px;
    border-radius: 3px;
  }
  .table-responsive>.table {
    margin-bottom: 0;
    background-color: var(--prune-50);
  }
  .table-responsive>.table>thead>tr>th, .table-responsive>.table>tbody>tr>th, .table-responsive>.table>tfoot>tr>th, .table-responsive>.table>thead>tr>td, .table-responsive>.table>tbody>tr>td, .table-responsive>.table>tfoot>tr>td {
    white-space: nowrap;
  } */
  .d-none-md {
    display: none !important;
  }

  /* .searchbar .form-control text-align (max-width:1213px) spostata in ui_elementi.css */
}

@keyframes rotate-center {
  0% {
    transform: rotate(0)
  }

  100% {
    transform: rotate(-360deg)
  }
}

#pager a {
  font-size: 14px;
  padding: 8px 12px;
  border-radius: 3px;
  display: inline-block;
  font-weight: 500;
  background-color: var(--gray-100);
  border: 1px solid var(--border-color);
}

#pager a:hover,
#pager a:focus {
  border-color: var(--primary-color);
  text-decoration: none;
  color: var(--primary-color);
}

#pager .list-inline>li {
  display: inline-block;
  padding-left: 2px;
  padding-right: 2px;
}

#pager .list-inline>li:first-child {
  padding-left: 0;
}

#pager .list-inline>li:last-child {
  padding-right: 0;
}

#pager li.active a {
  color: var(--text-color);
  border-color: var(--secondary-text-color);
}

.badge2 {
  display: inline-block;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-color);
  line-height: 1;
  vertical-align: baseline;
  white-space: nowrap;
  text-align: center;
  background-color: var(--prune-50);
  border-radius: 20px;
}

.badge2.badge2-success {
  color: var(--green-900);
  background-color: var(--green-100);
}

.badge2.badge2-warning {
  color: var(--orange-900);
  background-color: var(--orange-100);
}

footer {
  color: var(--secondary-text-color);
  padding: 0 0px 36px 0;
}

.navbar .navbar-toggle {
  margin: 0;
  padding: 9px 8px;
}

.navbar-toggle .icon-bar {
  display: block;
  width: 24px;
  height: 2px;
  border-radius: 0px;
}

.navbar {
  min-height: auto;
  position: relative;
}

.navbar .navbar-toggle .icon-bar {
  background-color: var(--text-color);
}

.navbar .navbar-toggle:hover,
.navbar .navbar-toggle:focus {
  background-color: var(--gray-100);
}

.navbar .navbar-collapse,
.navbar .navbar-form {
  border-color: transparent;
}


@media (max-width: 767px) {
  .wrapper-search {
    gap: 0rem;
    flex-direction: column;
  }

  /* .form-group.searchbar-buttons labels (max-width:767px) spostate in ui_elementi.css */

  .navbar-nav .open .dropdown-menu {
    text-align: center;
  }

  .navbar-nav .open .dropdown-menu>li>a {
    padding: 10px 0;
    font-size: 16px;
  }

  .navbar-collapse {
    background: var(--prune-50);
    max-height: none;
  }

  .navbar-collapse .dropdown-menu>li>a:hover,
  .navbar-collapse .dropdown-menu>li>a:focus {
    background-color: transparent;
    color: var(--primary-color);
  }

  #event-header .head-data {
    display: none;
  }

  .d-none-sm {
    display: none;
  }

  #event-header .event-header-content {

    gap: 0rem;
    justify-content: space-between;

  }
}

@media (max-width: 1213px) {
  #event-header .event-header-lang .dropdown-menu-right {
    right: auto;
    left: 0;
  }
}

.stats-box-wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 24px;
  margin: 20px 0 20px 0;
  overflow: auto;
  padding: 0px 0px 4px 0;
  container-type: inline-size;
  justify-content: space-between;
}

.stats-box {
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 13px;
  display: flex;
  column-gap: 10px;
  align-items: flex-start;
  position: relative;

  @container (max-width: 1190px) {
    flex-wrap: nowrap;
  }

}


.stats-box .stats-box--icon {
  border-radius: 10px;
  font-size: 21px;
  width: 50px;
  text-align: center;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.stats-box .stats-box--number {
  font-size: 22px;
  font-weight: 300;
  line-height: 1;
}

.stats-box .stats-box--title {
  font-size: 14px;
  align-self: flex-end;
  color: var(--blue-900);
  line-height: 1;

}

.tooltip .tooltip-inner {
  background-color: var(--blue-900);
}

.tooltip .stats-box--title .tooltip-arrow {
  border-top-color: var(--blue-900);
}

.stat-box--content {
  margin-right: 15px;
  display: flex;
  flex-direction: column-reverse;
  gap: 6px;

}

.stats-box .stats-box--desc {
  font-size: 12px;
  color: var(--secondary-text-color);
  width: 100%;
}

.stats-box .stats-box--desc a {
  color: var(--secondary-text-color);
  text-decoration: underline;
}

.stats-box .stats-box--info {
  margin-left: 4px;
  color: var(--gray-400);
  cursor: pointer;
  font-size: 18px;
  vertical-align: middle;
  position: absolute;
  top: 9px;
  right: 8px;
}

.stats-box .stats-box--info:hover {
  color: var(--text-color);
}

.stats-box.stats-box--gray .stats-box--icon {
  background-color: var(--prune-50);
  color: var(--secondary-text-color);
}

.stats-box.stats-box--gray .stats-box--number {
  color: var(--green-600);
}

.stats-box.stats-box--green .stats-box--icon {
  background-color: var(--green-50);
  color: var(--green-600);
}

.stats-box.stats-box--green .stats-box--number {
  color: var(--green-600);
}

.stats-box.stats-box--violet .stats-box--icon {
  background-color: var(--prune-100);
  color: var(--violet-300);
}

.stats-box.stats-box--violet .stats-box--number {
  color: var(--violet-300);
}

.stats-box.stats-box--orange .stats-box--icon {
  background-color: var(--orange-100);
  color: var(--orange-700);
}

.stats-box.stats-box--orange .stats-box--number {
  color: var(--orange-700);
}

.stats-box.stats-box--skyblue .stats-box--icon {
  background-color: var(--blue-100);
  color: var(--blue-500);
}

.stats-box.stats-box--skyblue .stats-box--number {
  color: var(--blue-500);
}

.stats-box.stats-box--blue .stats-box--icon {
  background-color: var(--blue-100);
  color: var(--primary-color);
}

.stats-box.stats-box--blue .stats-box--number {
  color: var(--primary-color);
}

.stats-box.stats-box--red .stats-box--icon {
  background-color: var(--red-100);
  color: var(--red-600);
}

.stats-box.stats-box--red .stats-box--number {
  color: var(--red-600);
}


.stats-box-wrapper>a,
.stats-box-wrapper>div {
  flex: 1 1 230px;
  color: var(--text-color);
}

.form-container {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.form-container .form-content {
  flex: 1 1 0px;
  min-width: 0;
  padding: 3rem 3rem;
  border-radius: 5px;
  box-shadow: -1px 0px 6px var(--gray-200);
}

.wrapper-list-search {
  margin: 3rem 0rem;
  border-radius: 10px;
}

.table-responsive {
  margin: 1rem 0rem;
  padding: 2rem 0rem;
  /* box-shadow: 0px 0px 6px var(--prune-100); */
  border-radius: 10px;

}

@media (min-width: 768px) {
  .form-container {
    margin-top: 1rem;
    gap: 3rem;
  }
}

/* .form-container .form-menu rules + responsive overrides moved to
   form.css "Group E — Sidebar navigation" (2026-05-25). */

#nestedMenu {
  margin: -8px 0 20px 0;
}

#nestedMenu .list-group-item {
  border-color: var(--input-border-color);
}

#nestedMenu .list-group-item:not(.sortable-chosen) {
  background: transparent;
}

/* 

#nestedMenu .list-group-item {
  padding: 4px 0;
}
#nestedMenu .event-menu-item>div {
  padding: 0 8px 0 0;
} */

form .btn-primary {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  min-width: 160px;
  padding: 10px 12px;
}

form label {
  margin-bottom: 4px;
  font-weight: 500;
}

footer {
  text-align: right;
  max-width: 1680px;
}

footer .list-inline>li:first-child {
  margin-left: 0;
  padding-left: 0;
}

footer .list-inline>li:last-child {
  margin-right: 0;
  padding-right: 0;
}

footer .list-inline li a {
  text-decoration: underline;
}

hr {
  margin: 12px 0 40px 0;
  border-top: 1px solid var(--border-color);
}

.text-adn-color-wrapper .sp-replacer {
  width: 4rem !important;
  height: 4rem !important;
  border: 1px solid var(--input-border-color) !important;
  border-radius: 4px;
}

.text-adn-color-wrapper .sp-dd {
  line-height: 3.5rem !important;
}

form .divider-i {
  margin: 0 0 24px 0;
  font-size: 14px;
  font-weight: 700;
}

/* .form-check .form-check-input:checked moved to form.css (Group F) */


#event-menu-wrapper .add-link {
  margin-bottom: 20px;
}


h2,
.h2 {
  font-size: 24px;
  margin: 0 0 24px 0;
  font-weight: 400;
}

.tab-pane>h2:first-child,
.form-content>h2:first-child {
  font-size: 34px;
  font-weight: 300;
  color: var(--blue-900);
  margin-bottom: 3rem;
  border-bottom: 2px solid var(--prune-50);
  padding-bottom: 1rem;
}

/* .form-check .form-check-input border-color + radio moved to form.css (Group F) */

.select2-container-multi .select2-choices .select2-search-choice {
  background-color: var(--gray-100);
  padding: 6px 5px 6px 18px;
  border: 1px solid var(--input-border-color);
  font-size: 14px;
  color: var(--text-color);
}

.build-stat {
  display: flex;
  gap: 8px;
}

.modal-backdrop {
  z-index: 9999 !important;
}

.swal2-container {
  z-index: 999999 !important;
}

.modal {
  z-index: 99999 !important;
}

.order_steps i {
  color: var(--gray-400);
  font-size: 8px;
}

.session-speakers {
  margin: 0;
}

.session-speakers .session-speakers--avatar {
  width: 44px;
  height: 44px;
}

.session-speakers .session-speakers--item {
  margin-left: -16px;
}

.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
}

.flex-parent-text-truncate {
  flex: 1;
  min-width: 0;
}

.flex-parent-text-truncate .text-truncate {
  max-width: 100%;
}

.overview-grid-hub>div,
.overview-grid>div {
  margin: 0 0 24px 0;
}

@media (min-width: 1214px) {

  .overview-grid-hub>div,
  .overview-grid>div {
    margin: 0;
  }

  .overview-grid,
  .overview-grid-hub {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    column-gap: 24px;
    row-gap: 24px;
    justify-items: stretch;
    align-items: stretch;
  }

  .overview-grid {
    grid-template-areas:
      "intro intro intro intro site site site site app app app app"
      "attendees attendees attendees attendees attendees attendees registration registration registration registration registration registration"
      "checkin checkin checkin checkin checkin checkin registration registration registration registration registration registration"
      "email email email email appdownload appdownload appdownload appdownload login login login login"
      "sending sending sending sending sending sending sending sending sending sending sending sending"
      "users users users users users users users users users users users users";
  }

  .overview-grid-hub {
    grid-template-areas:
      "leads leads leads sending sending sending sending sending sending sending sending sending"
      "email email email latest_leads latest_leads latest_leads latest_leads latest_leads latest_leads latest_leads latest_leads latest_leads"
      "campaigns campaigns campaigns campaigns campaigns campaigns campaigns campaigns campaigns campaigns campaigns campaigns";
  }
}

.overview-grid--intro {
  grid-area: intro;
}

.overview-grid--details {
  grid-area: details;
}

.overview-grid--attendees {
  grid-area: attendees;
}

.overview-grid--campaigns {
  grid-area: campaigns;
}

.overview-grid--email {
  grid-area: email;
}

.overview-grid--appdownload {
  grid-area: appdownload;
}

.overview-grid--users {
  grid-area: users;
}

.overview-grid--login {
  grid-area: login;
}

.overview-grid--checkin {
  grid-area: checkin;
}

.overview-grid--registration {
  grid-area: registration;
}

.overview-grid--app {
  grid-area: app;
}

.overview-grid--site {
  grid-area: site;
}

.overview-grid--sending {
  grid-area: sending;
}

.overview-grid--leads {
  grid-area: leads;
}

.overview-grid--latest_leads {
  grid-area: latest_leads;
}


.box {
  /* box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); */
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 14px;
  line-height: 1.5;
}

/* .group_line — generic dashed container to visually group a set of form fields.
   Reusable on any wrapper around one or more form-group blocks (e.g. each custom
   button, repeatable rows, related-field clusters). Just the frame: border +
   radius + padding; no background, so it sits over any surface. */


/* .group_line_grid — wrapper for a Bootstrap grid row of .group_line cards.
   The default Bootstrap 3 float grid breaks (staggers) when columns have
   uneven heights; using flex makes each row wrap cleanly and equalises card
   heights per row. Scoped to >=992px, where col-md-* actually forms columns;
   below that the cols stack full-width and floats are not an issue. */
.group_line_grid .group_line {
  width: 90%;
  overflow: hidden;
  /* collapsed by default; animate max-height (not height) so the transition has
     a stable endpoint — transitioning height to auto/100% is not animatable and
     causes the jank. overflow:hidden clips the content while collapsed. */
  max-height: 70px;
  /* NB: the transition shorthand takes property/duration/timing/delay only —
     a colour like var(--prune-50) here makes the whole declaration invalid. Put the colour
     on the `background` of the target state instead. */
  transition: max-height 0.5s ease-in-out, background 0.5s ease-in-out;
  cursor: pointer;
  border: 1px dashed var(--gray-300);
  border-radius: 12px;
  padding: 25px 25px 5px 25px;
  margin-bottom: 20px;
  background: var(--prune-50);
}

.group_line_grid .group_line.is-focused {
  /* open: any value larger than the tallest card. Keep it close to the real
     content height to minimise the max-height easing lag. */
  max-height: 800px;
  background: var(--prune-50);
}

.group_line_grid .group_line .name {
  font-size: 16px;

}

/* App » Custom Buttons — master/detail layout (2026-07-20).
   Left: vertical list of buttons (nav-pills tab toggle, active = solid navy
   pill). Right: the selected button's form inside a bordered card. Replaces the
   old 2-column accordion grid (.group_line_grid). */
.cb-md {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: stretch;
}

.cb-md__list {
  flex: none;
}

.cb-md__list .cb-nav {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.cb-md__list .cb-nav>li {
  margin: 0;
}

.cb-md__list .cb-nav>li>a,
.cb-md__list .cb-nav>li>a:hover,
.cb-md__list .cb-nav>li>a:focus,
.cb-md__list .cb-nav>li.active>a,
.cb-md__list .cb-nav>li.active>a:hover,
.cb-md__list .cb-nav>li.active>a:focus {
  display: block;
  padding: 12px 16px;
  border-radius: 8px;
  /* background: var(--gray-100); */
  color: var(--blue-900);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
  border: 1px solid var(--prune-100);
}

.cb-md__list .cb-nav>li>a:hover,
.cb-md__list .cb-nav>li>a:focus {
  background: var(--gray-100);
}

.cb-md__list .cb-nav>li.active>a,
.cb-md__list .cb-nav>li.active>a:hover,
.cb-md__list .cb-nav>li.active>a:focus {
  background: var(--gray-100);
  color: var(--gray-900);
}

.cb-md__detail {
  flex: 1 1 auto;
  min-width: 0;
}

.cb-md__detail>.tab-pane.active {
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  padding: 2.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}

.cb-md__detail>.tab-pane .name {
  font-size: 16px;
  font-weight: 600;
}

/* Footer row under Link: colour/font/alpha on the left, the "SharEvent page
   requiring login" switch on the right. */
.cb-md__footer {
  display: flex;
  gap: 3rem;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: space-between;
}

.cb-md__attrs {
  flex: 0 0 auto;
}

.cb-md__attrs .form-group {
  margin-bottom: 0;
}

.cb-md__toggle {
  flex: 1 1 240px;
}

@media (min-width: 768px) {
  .cb-md {
    flex-direction: row;
    gap: 7rem;
    align-items: flex-start;
  }

  .cb-md__list {
    flex: 0 0 240px;
    min-width: 240px;
  }
}

.tag-wrapper-program,
.tag-wrapper-attendee_website,
.tag-wrapper-company,
.tag-wrapper-post {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@media (min-width: 992px) {
  .group_line_grid {
    display: flex;
    flex-wrap: wrap;
    /* do NOT stretch siblings to equal height: otherwise opening/closing one
       card resizes the whole row and the neighbours snap. flex-start lets each
       card keep its own height and animate independently. */
    align-items: flex-start;
  }
}

/* .trans-field — translation editor field with a visible default (placeholder),
   an "overridden" state (accent border + reset button) and a reset-to-default
   (✕) control. The default is kept as placeholder so it is never persisted as
   an override; clearing the field reverts to the default on save. */
.trans-field {
  position: relative;
}

.trans-input {
  padding-right: 26px;
}

/* default value shown clearly in-field (not a faint placeholder) */
.trans-input::placeholder {
  color: var(--secondary-text-color);
  opacity: 1;
}

.trans-field.is-overridden .trans-input {
  border-color: var(--primary-color);
}

/* pencil (edit affordance) shown on an untouched field; decorative, so clicks
   fall through to the input. Hidden once the field holds a value. */
.trans-edit-icon {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  color: var(--secondary-text-color);
  font-size: 14px;
  pointer-events: none;
}

.trans-field.is-overridden .trans-edit-icon {
  display: none;
}

/* reset (✕) replaces the pencil once the field is overridden */
.trans-reset {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  display: none;
  border: 0;
  background: transparent;
  color: var(--secondary-text-color);
  font-size: 18px;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
}

.trans-field.is-overridden .trans-reset {
  display: block;
}

.trans-reset:hover {
  color: var(--text-color);
}

/* .trans-grid — Bootstrap 3's float-based .row/.col-md-4 has no row-gap by
   default, so once the cells wrap onto a second line they touch the row
   above (see shared/_translations.tpl). Flex wrap instead of the float flow:
   with floats a taller cell (a description on two lines) makes the following
   cells hook onto it, leaving holes in the next line. */
.trans-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.trans-grid>[class*="col-"] {
  float: none;
  margin-bottom: 3rem;
}

@media (max-width: 991px) {
  .trans-grid>[class*="col-"] {
    width: 100%;
  }
}

/* .trans-group — box che raggruppa un blocco omogeneo di campi correlati.
   Usata da:
     - editor delle label (registration/translations/edit.tpl): un box per
       sezione (etichette, popup, titoli degli step), con .trans-group__title
       e la .trans-grid interna;
     - riga condizione di survey e certificati (surveys/_new_session.tpl,
       certificates/_new_session.tpl), che prima usavano
       .survey-add-session-box (rimossa da main.css: 0 usi rimasti).
   Chi la modifica tocca entrambi i posti. */
.trans-group {
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 20px 20px 0;
  margin-bottom: 24px;
}

.trans-group__title {
  margin: 0 0 20px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-color);
}

/* Dentro un gruppo le celle sono omogenee fra loro, quindi il contenuto e'
   ancorato in basso: la descrizione resta attaccata al proprio campo e i campi
   della stessa riga restano allineati anche quando una descrizione (o il suo
   helper) occupa una riga in piu'. Fuori dai gruppi le celle possono avere
   altezze molto diverse (coppie label+testo lungo), quindi restano in alto.
   La spaziatura fra le righe e' data dal row-gap e non dal margine delle
   celle, cosi' l'ultima riga non lascia spazio morto in fondo al box. */
.trans-group .trans-grid {
  align-items: stretch;
  row-gap: 24px;
}

.trans-group .trans-grid>[class*="col-"] {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin-bottom: 0;
}

/* .trans-label-chip — small caption above a translation field/pair showing its
   default text (row.label), so the field stays identifiable even once it holds
   an override value (the placeholder, which also carries the default, is gone
   at that point). See _translation_row.tpl / _translations.tpl. */
.trans-label-chip {
  display: inline-block;
  background: var(--gray-100);
  color: var(--gray-700);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-top-left-radius: 6px;
  margin-bottom: 0px;
  border-top-right-radius: 6px;
  margin-left: 1rem;
}

/* .trans-pair — wraps a [base input, base_desc textarea] key pair (see
   shared/_translations.tpl) in one box so the two related fields read as a
   single unit instead of two unrelated grid cells. */
.trans-pair {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
}

.trans-pair textarea.form-control {
  height: 100px;
  max-height: 100px;
  padding-right: 20px;
  max-width: 100%;
  min-width: 100%;
}

.trans-pair .form-group {
  margin-bottom: 0;
}

/* The pencil/reset icons default to vertical-centering on a single-line
   input; a textarea is taller, so anchor them to the top-right corner
   instead of floating mid-box. */
.trans-field--textarea .trans-edit-icon,
.trans-field--textarea .trans-reset {
  top: 10px;
  transform: none;
}

.box .box--title {
  font-size: 18px;
  line-height: 1.45;
}

.box .box--big-text {
  font-size: 68px;
  line-height: 1;
}

.box .box--desc {
  color: var(--secondary-text-color);
}

.box .box--list {
  margin: 24px 0 0 0;
}

.box .box--list-row {
  display: flex;
  flex-direction: row;
  gap: 14px;
  align-items: center;
  margin-top: 12px;
}

.box .box--list-title {
  flex-grow: 1;
}

.box .box--list-icon {
  grid-area: icon;
  justify-self: start;
  padding: 6px;
  border-radius: 10px;
  font-size: 18px;
  width: 40px;
  text-align: center;
  align-self: center;
}

.box .box--list-icon.gray-color {
  background-color: var(--prune-50);
  color: var(--secondary-text-color);
}

.box .box--list-icon.green-color {
  background-color: var(--green-50);
  color: var(--green-600);
}

.box .box--list-icon.violet-color {
  background-color: var(--prune-200);
  color: var(--violet-300);
}

.box .box--list-icon.orange-color {
  background-color: var(--orange-100);
  color: var(--orange-500);
}

.box .box--list-icon.blue-color {
  background-color: var(--blue-100);
  color: var(--primary-color);
}

.box .box--list-icon.red-color {
  background-color: var(--red-100);
  color: var(--red-600);
}

.box .box--list-icon.skyblue-color {
  background-color: var(--blue-100);
  color: var(--blue-500);
}

.box .box--caption {
  color: var(--secondary-text-color);
}

.box .table-responsive {
  margin: 18px 0 0 0;
}

.box .table-se {
  margin: 0;
}

.box .table.table-se tbody>tr>td {
  padding: 12px 12px;
  height: auto;
  font-size: 14px;
}

.box .table.table-se thead>tr>th {
  text-transform: uppercase;
  font-weight: 400;
  font-size: 11px;
  color: var(--secondary-text-color);
  letter-spacing: 0.02rem;
  white-space: nowrap;
  padding: 8px 12px;
  height: auto;
}

.box .table.table-se thead>tr>th:first-child,
.box .table.table-se tbody>tr>td:first-child {
  padding-left: 0;
}

.box .table.table-se thead>tr>th:last-child,
.box .table.table-se tbody>tr>td:last-child {
  padding-right: 0;
}

.box .avatar {
  width: 36px;
  height: 36px;
  font-size: 16px;
  line-height: 36px;
  border-radius: 100px;
  margin: 0 4px 0 0;
  box-shadow: 0 0 0 2px var(--prune-50), 0 0 0 3px var(--primary-color);
}

.avatar-container {
  display: inline-block;
  line-height: 1;
  position: relative;
}

.avatar-big {
  width: 44px;
  height: 44px;
  max-width: 44px;
  max-height: 44px;
  font-size: 16px;
  line-height: 44px;
  border-radius: 100px;
  margin: 0;
  box-shadow: 0 0 0 2px var(--prune-50), 0 0 0 3px var(--primary-color);
}

.avatar-container .attendee-icon-status {
  position: absolute;
  bottom: -2px;
  right: -6px;
  font-size: 14px;
}

.box .box--list-row.bar {
  position: relative;
}

.box .box--list-row.bar>* {
  position: relative;
}

.box .box--list-row.bar .bar--progress {
  content: "";
  position: absolute;
  bottom: 0;
  left: 54px;
  height: 6px;
  border-radius: 10px;
}

.box a.secondary-text-color {
  text-decoration: underline;
}

.box a.secondary-text-color:hover {
  text-decoration: none;
}

.box-light .box-light--list-row {
  display: flex;
  flex-direction: row;
  gap: 14px;
  align-items: center;
  padding: 0 0 4px 0;
  margin-top: 12px;
}

.box-light .box-light--list-row:first-child {
  margin-top: 0;
}

.box-light .box-light--list-title {
  flex-grow: 1;
}

.box-light .box-light--list-row.bar {
  position: relative;
}

.box-light .box-light--list-row.bar>* {
  position: relative;
}

.box-light .box-light--list-row.bar .bar--progress {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 6px;
  border-radius: 10px;
  width: 100%;
  background-color: var(--gray-100);
}

.box-light .box-light--list-row.bar .bar--progress>div {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 6px;
  border-radius: 10px;
}

.swal2-actions {
  font-size: 14px;
}

.swal2-title {
  color: var(--text-color) !important;
}

#swal2-content,
.swal2-content ul,
.swal2-content p,
.swal2-content a {
  color: var(--secondary-text-color) !important;
}

.swal2-styled.swal2-cancel {
  background-color: var(--gray-200) !important;
  color: var(--secondary-text-color) !important;
}

.swal2-actions button.swal2-confirm {
  color: var(--prune-50) !important;
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

.swal2-icon.swal2-warning {
  border-color: var(--orange-600) !important;
  color: var(--orange-600) !important;
}

.swal2-actions button {
  padding: 10px 24px !important;
  border-radius: 3px !important;
  min-width: 100px !important;
}

.swal2-styled:focus {
  outline: 0;
  box-shadow: none !important;
}

.dropdown-menu>li>a.red-color:hover,
.dropdown-menu>li>a.red-color:focus {
  background-color: var(--red-50);
}

.alert {
  border-radius: 0;
  border: 0;
  margin: 0;
  text-align: center;
}

.alert.alert-success {
  background: var(--green-50);
  color: var(--green-600);
}

.alert.alert-danger {
  background: var(--red-50);
  color: var(--red-600);
}

.alert ul {
  display: inline-block;
  list-style: none;
  margin: 0;
  padding: 0
}

.alert ul li {
  display: inline-block;
  margin: 0 8px 0 8px;
  padding: 0;
}

.field_rule_options {
  display: inline-block;
}

.field_rule_options select,
.field_rule_options input {
  width: 220px;
  display: inline-block;
  height: 46px;
}

.turbo-progress-bar {
  height: 3px;
  background-color: var(--primary-color);
}

.navbar .bell-wrapper {
  position: relative;
  display: inline-block;
  width: 20px;
}

.navbar .bell-wrapper i {
  font-size: 20px;
}

.navbar .bell-wrapper .bell-number {
  position: absolute;
  background-color: var(--red-600);
  color: var(--prune-50);
  font-size: 10px;
  width: 20px;
  height: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  top: -10px;
  right: -10px;
}

#notificationsPopup {
  position: fixed;
  max-height: calc(100vh - 79px);
  background: var(--prune-50);
  width: 360px;
  top: 65px;
  z-index: 999999;
  right: 20px;
  box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  border-radius: 10px;
  padding: 15px 15px 12px 15px;
  overflow-y: auto;
  z-index: 9999999;
  min-height: 170px;
}

#notificationsPopup h1 {
  margin: 0;
  padding: 0;
  text-align: left;
  font-weight: 600;
  font-size: 21px;
  letter-spacing: -0.01rem;
  line-height: 26px;
}

#notificationsPopup .notification-container {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 -8px 8px -8px;
  color: var(--text-color);
  border-radius: 8px;
  padding: 8px;
}

#notificationsPopup .notification-container:hover {
  background-color: var(--gray-100);
}

#notificationsPopup .notification-container.disabled {
  color: var(--gray-500) !important;
}

#notificationsPopup .notification-container .item-title {
  word-break: break-word;
}

#notificationsPopup .notification-container.disabled .item-date {
  color: var(--gray-400) !important;
}

#notificationsPopup .notification-container.disabled .item-icon>div {
  background-color: var(--gray-100);
}

#notificationsPopup .notification-container.disabled .item-icon>div {
  color: var(--gray-600);
}

#notificationsPopup .notification-container .item-message {
  flex-grow: 1;
}

#notificationsPopup .notification-container .item-date {
  margin-top: 4px;
  font-size: 12px;
}

#notificationsPopup .notification-container .item-status {
  color: var(--gray-300);
  font-size: 12px;
}

#notificationsPopup .notification-container .item-status>div {
  width: 20px;
  text-align: right;
}

#notificationsPopup .notifications-header {
  margin: 0 0 20px 0;
  display: flex;
  gap: 12px;
  align-items: baseline;
}

#notificationsPopup .notifications-header div:first-child {
  flex-grow: 1;
}

#notificationsPopup .notification-container .item-icon>div {
  display: flex;
  align-items: center;
  color: var(--text-color);
  background-color: var(--blue-100);
  width: 60px;
  justify-content: center;
  height: 60px;
  font-size: 22px;
  border-radius: 4px;
}

#notificationsPopup .tabs-new.nav-tabs {
  margin-bottom: 12px !important;
}

#notificationsPopup .notifications-more {
  font-size: 22px;
  color: var(--secondary-text-color);
  line-height: 1;
}

#linkBell {
  color: var(--text-color);
}

#notificationsPopup #pager-wrapper {
  margin: 20px 0 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#notificationsPopup #pager-infos {
  color: var(--secondary-text-color);
  font-size: 12px;
}

#notificationsPopup #pager-wrapper .list-inline {
  margin: 0;
}

/* What's New / Product Updates */
.whatsnew-bell-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--prune-100);
  margin-bottom: 5px;
}

#notificationsPopup .whatsnew-bell-item {
  cursor: pointer;
}

.whatsnew-detail-header {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0;
  padding: 10px;
}

.whatsnew-detail-title {
  flex: 1;
  min-width: 0;
}

.whatsnew-detail-title h3 {
  font-size: 24px;
  margin-top: 0
}

.whatsnew-detail-body {
  padding: 0;
  max-height: 60vh;
  overflow-y: auto;
  overflow-x: hidden;
}

.whatsnew-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-start;
  margin-bottom: .8rem;
  width: 100%;
  margin-left: -9px;
}

.whatsnew-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  color: var(--whatsnew-tag-color, var(--gray-500));
  background-color: var(--whatsnew-tag-bg, rgba(108, 117, 125, 0.1));
  margin-right: 4px;
  line-height: 1.4;
}

.whatsnew-tag-solid {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
  border: none;
  color: var(--prune-50);
  background-color: var(--whatsnew-tag-color, var(--gray-500));
  margin-right: 4px;
  margin-bottom: 2px;
  line-height: 1.4;
}

.whatsnew-html-content {
  word-wrap: break-word;
  overflow-wrap: break-word;
  overflow: hidden;
  max-width: 100%;
}

.query-builder .rules-group-container {
  border: 0;
  background: var(--gray-100);
}

.query-builder .rule-container {
  background: var(--gray-200);
}

#builder .rules-group-container .group-conditions .btn-primary.active {
  background-color: var(--blue-800);
  border-color: var(--blue-800);
  opacity: 1;
}

#builder .rules-group-container .group-conditions .btn-primary {
  color: var(--prune-50);
  background-color: var(--gray-400);
  border-color: var(--gray-400);
}

.query-builder .rule-value-container input[type=number],
.query-builder .rule-value-container input[type=text],
.query-builder .rule-value-container select {
  padding: 12px 12px;
  min-width: 240px;
}

.query-builder .rule-container,
.query-builder .rule-placeholder,
.query-builder .rules-group-container {
  margin: 0 0 4px 0;
}

#filters {
  margin: 0 0 0 0;
  border-left: 3px solid var(--blue-500);
  padding-left: 10px;
}

#builder {
  margin: 0 0 8px 0;
}

#builder .rules-group-container .group-conditions .btn-primary {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  min-width: 60px;
  padding: 4px 8px;
}


/* Override Unlayer boxed layout - force full width */
.whatsnew-html-content>div,
.whatsnew-html-content>table,
.whatsnew-html-content [style*="max-width"] {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.whatsnew-html-content img {
  max-width: 100%;
  height: auto;
}

.whatsnew-html-content table {
  max-width: 100% !important;
  table-layout: fixed !important;
}

.whatsnew-html-content td {
  overflow: hidden;
}

#whatsnewLoginModal .modal-body,
#whatsnewDetailModal .modal-body {
  padding: 20px;
}

.whatsnew-detail-footer {
  padding: 10px 0 0 0 !important;
  border-top: 1px solid var(--prune-100);
}

.whatsnew-detail-footer .btn {
  font-size: 12px;
}

#whatsnewLoginModal .whatsnew-detail-footer {
  margin-top: 15px;
  padding: 19px 20px 20px;
  text-align: right;
  border-top: 1px solid var(--gray-200);
}

#whatsnewDetailModal .modal-content,
#whatsnewDetailModal .modal-body,
#whatsnewDetailModal .modal-dialog,
#whatsnewLoginModal .modal-content,
#whatsnewLoginModal .modal-body,
#whatsnewLoginModal .modal-dialog {
  height: auto;
}

#whatsnewDetailModal .modal-body h3 {
  font-size: 24px;
}

.query-builder .rules-group-container {
  border: 0;
  background: var(--gray-100);
}

.query-builder .rule-container {
  background: var(--gray-200);
}

#builder .rules-group-container .group-conditions .btn-primary.active {
  background-color: var(--blue-800);
  border-color: var(--blue-800);
  opacity: 1;
}

#builder .rules-group-container .group-conditions .btn-primary {
  color: var(--prune-50);
  background-color: var(--gray-400);
  border-color: var(--gray-400);
}

.query-builder .rule-value-container input[type=number],
.query-builder .rule-value-container input[type=text],
.query-builder .rule-value-container select {
  padding: 12px 12px;
  min-width: 240px;
}

.query-builder .rule-container,
.query-builder .rule-placeholder,
.query-builder .rules-group-container {
  margin: 0 0 4px 0;
}

#filters {
  margin: 0 0 0 0;
  border-left: 3px solid var(--blue-500);
  padding-left: 10px;
}

#builder {
  margin: 0 0 8px 0;
}

.sp-replacer {
  margin: 0 0 0 -1px !important;
  padding: 0px !important;
  width: 6rem !important;
  height: 3.5rem !important;
  border: 1px solid var(--gray-900) !important;
}

.filter-link-container {
  padding: 2px 0 8px 0;
}

.filter-link-container a {
  font-weight: 400;
}

.tabs-new>li>a:hover,
.tabs-new>li>a:focus {

  background-color: var(--blue-900) !important;

}

#elemento_bulk .btn-default.disabled,
#elemento_bulk .btn-default[disabled],
#elemento_bulk .btn-secondary.disabled,
#elemento_bulk .btn-secondary[disabled],
#elemento_bulk .btn-primary.disabled,
#elemento_bulk .btn-primary[disabled] {
  background-color: var(--prune-50);
  border-color: var(--gray-200);
  color: var(--gray-500);
  opacity: 1;
}

/* Tooltip su .btn-group parent quando contiene un <a disabled>.
   Uso :has() perché Bootstrap imposta pointer-events:none sul .btn[disabled],
   bloccando :hover sul figlio. Il parent .btn-group non è disabled e riceve
   l'hover normalmente. Modern browsers: Chrome 105+, Safari 15.4+, Firefox 121+ */
#elemento_bulk .btn-group[data-disabled-tooltip]:has(> a[disabled]),
#elemento_bulk .btn-group[data-disabled-tooltip]:has(> .dropdown-toggle[disabled]) {
  position: relative;
}


#elemento_bulk .btn-group[data-disabled-tooltip]:has(> a[disabled]):hover::after,
#elemento_bulk .btn-group[data-disabled-tooltip]:has(> .dropdown-toggle[disabled]):hover::after {
  content: attr(data-disabled-tooltip);
  position: absolute;
  /* bottom: calc(100% + 8px); */
  left: 50%;
  transform: translateX(-50%);
  background: var(--blue-900);
  color: var(--prune-50);
  padding: 6px 6px;
  border-radius: 4px;
  font-size: 12px;
  /* line-height: 1.4; */
  white-space: nowrap;
  z-index: 1070;
  pointer-events: none;
  top: -30px;
}

#elemento_bulk .btn-group[data-disabled-tooltip]:has(> a[disabled]):hover::before,
#elemento_bulk .btn-group[data-disabled-tooltip]:has(> .dropdown-toggle[disabled]):hover::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(0, 0, 0, 0.85);
  z-index: 1070;
  pointer-events: none;
}

/* === Pure CSS tooltip (no Bootstrap) ====================================
 * Generic utility usabile su QUALSIASI elemento.
 *
 * Usage:
 *   <element data-tooltip="Testo on-hover">...</element>
 *   <element data-tooltip="..." data-tooltip-position="bottom|left|right">
 *
 * Alternativa a BS3 data-toggle="tooltip" senza JS init richiesto.
 * Solo plain text (CSS attr() non supporta HTML). Per HTML/multi-line
 * o tooltip interattivi (link cliccabili dentro) → continuare a usare BS3.
 *
 * Placement default: top. Modificatori `data-tooltip-position`:
 *   top    (default — sopra l'elemento)
 *   bottom (sotto l'elemento)
 *   right  (a destra, verticalmente centrato)
 *   left   (a sinistra, verticalmente centrato)
 *
 * NOTA: il tooltip usa solo ::after (no freccia con ::before) perché molti
 * elementi target (FontAwesome <i>, ::before su label, ecc.) usano già il
 * proprio ::before. Stilare la freccia farebbe sparire il glyph dell'icona.
 * ======================================================================== */

[data-tooltip] {
  position: relative;
}

/* Usa SOLO ::after per il box tooltip — ::before NON è disponibile
   perché molti elementi (FontAwesome <i>, label, ecc.) lo usano già
   per il proprio contenuto. Senza freccia visiva ma box leggibile. */
[data-tooltip]:hover::after,
[data-tooltip]:focus::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: var(--blue-900);
  color: var(--prune-50);
  padding: 6px 6px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 1070;
  pointer-events: none;
  top: -30px;
  letter-spacing: 1px;
}

/* Placement: bottom */
[data-tooltip-position="bottom"]:hover::after,
[data-tooltip-position="bottom"]:focus::after {
  bottom: auto;
  top: calc(100% + 6px);
}

/* Placement: right */
[data-tooltip-position="right"]:hover::after,
[data-tooltip-position="right"]:focus::after {
  bottom: auto;
  top: 50%;
  left: calc(100% + 6px);
  transform: translateY(-50%);
}

/* Placement: left */
[data-tooltip-position="left"]:hover::after,
[data-tooltip-position="left"]:focus::after {
  bottom: auto;
  top: 50%;
  left: auto;
  right: calc(100% + 6px);
  transform: translateY(-50%);
}

/* LIMITAZIONE NOTA: pure-CSS tooltip con position:absolute viene CLIPPATO
   da parent con overflow:auto/hidden. Per quei casi specifici usare BS3
   tooltip (data-toggle="tooltip" + container:'body' teleport) oppure
   wrapping JS che setta coords via CSS variables. CSS Anchor Positioning
   è troppo immaturo (Firefox WIP, edge cases con shared anchor names). */

/* === BS3 tooltip color override → palette progetto (var(--blue-900) dark navy) === */
.tooltip-inner {
  background-color: var(--blue-900);
  color: var(--prune-50);
}

.tooltip.top .tooltip-arrow,
.tooltip.top-left .tooltip-arrow,
.tooltip.top-right .tooltip-arrow {
  border-top-color: var(--blue-900);
}

.tooltip.bottom .tooltip-arrow,
.tooltip.bottom-left .tooltip-arrow,
.tooltip.bottom-right .tooltip-arrow {
  border-bottom-color: var(--blue-900);
}

.tooltip.left .tooltip-arrow {
  border-left-color: var(--blue-900);
}

.tooltip.right .tooltip-arrow {
  border-right-color: var(--blue-900);
}

.tooltip.in {
  opacity: 1;
}

/* Modifier: .arrow → balloon-style tooltip con punta che indica il trigger.
   Implementato via clip-path su ::after (single pseudo, no ::before per
   evitare clash con icone FontAwesome che usano ::before). */

/* Top (default) → freccia in basso del tooltip, punta giù verso il trigger */
[data-tooltip].arrow:hover::after,
[data-tooltip].arrow:focus::after {
  padding-bottom: 14px;
  clip-path: polygon(0% 0%,
      100% 0%,
      100% calc(100% - 8px),
      calc(50% + 6px) calc(100% - 8px),
      50% 100%,
      calc(50% - 6px) calc(100% - 8px),
      0% calc(100% - 8px));
}

/* Bottom → freccia in alto del tooltip, punta su */
[data-tooltip].arrow[data-tooltip-position="bottom"]:hover::after,
[data-tooltip].arrow[data-tooltip-position="bottom"]:focus::after {
  padding-bottom: 6px;
  padding-top: 14px;
  clip-path: polygon(0% 8px,
      calc(50% - 6px) 8px,
      50% 0%,
      calc(50% + 6px) 8px,
      100% 8px,
      100% 100%,
      0% 100%);
}

/* Right → freccia a sinistra del tooltip, punta sinistra verso il trigger */
[data-tooltip].arrow[data-tooltip-position="right"]:hover::after,
[data-tooltip].arrow[data-tooltip-position="right"]:focus::after {
  padding-left: 14px;
  clip-path: polygon(8px 0%,
      100% 0%,
      100% 100%,
      8px 100%,
      8px calc(50% + 6px),
      0% 50%,
      8px calc(50% - 6px));
}

/* Left → freccia a destra del tooltip, punta destra verso il trigger */
[data-tooltip].arrow[data-tooltip-position="left"]:hover::after,
[data-tooltip].arrow[data-tooltip-position="left"]:focus::after {
  padding-right: 14px;
  clip-path: polygon(0% 0%,
      calc(100% - 8px) 0%,
      calc(100% - 8px) calc(50% - 6px),
      100% 50%,
      calc(100% - 8px) calc(50% + 6px),
      calc(100% - 8px) 100%,
      0% 100%);
}

#elemento_bulk {

  display: flex;
  justify-content: flex-start;
}

/* #elemento_bulk {
  margin: 0 0 12px 0;
} */

#elemento_bulk .dropdown-menu .dropdown-submenu a {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.btn.btn-small {
  padding: 2px 6px;
  font-size: 13px;
}

#builder .rules-group-container .group-conditions .btn-primary {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  min-width: 60px;
  padding: 4px 8px;
}

.clear-select {
  display: inline-block;
  padding: 5px 0 0 0;
}

.uppy-Dashboard-inner {
  width: 100% !important;
  background-color: var(--gray-50) !important;
  border: 1px solid var(--input-border-color) !important;
}

[data-uppy-drag-drop-supported=true] .uppy-Dashboard-AddFiles {
  border: 1px dashed var(--input-border-color) !important;
}

.uppy-Root {
  color: var(--text-color) !important;
}

.uppy-Dashboard-Item-status,
.uppy-DashboardTab-btn,
.uppy-Dashboard-note {
  color: var(--secondary-text-color) !important;
}

.uppy-DashboardContent-bar {
  background-color: var(--gray-100) !important;
  border-bottom: 1px solid var(--input-border-color) !important;
}

.uppy-StatusBar.is-waiting .uppy-StatusBar-actions {
  background-color: var(--gray-100) !important;
}

.uppy-StatusBar:not([aria-hidden=true]).is-waiting {
  border-top: 1px solid var(--input-border-color) !important;
}

.uppy-Dashboard--singleFile .uppy-Dashboard-Item-previewInnerWrap {
  border: 1px solid var(--gray-600) !important;
}

.uppy-size--md .uppy-Informer p {
  background-color: var(--gray-600) !important;
}

.uppy-container {
  margin: 4px 0 0 0;
}

.uppy-Dashboard-AddFiles-info {
  display: block !important;
}

/* .has-error .uppy-container / .uppy-container.has-error moved to form.css (Group A) */

[dir=ltr] .uppy-Dashboard-Item.is-complete .uppy-Dashboard-Item-progress {
  left: -8px !important;
  right: auto !important;
}

.filebox {
  margin: 0 0 12px 0;
  border: 1px solid var(--input-border-color);
  border-radius: 8px;
  display: grid;
  grid-template-columns: 120px auto;
  grid-template-areas: "image contents";
  align-items: stretch;
}

.filebox .filebox--image {
  grid-area: image;
  font-size: 32px;

  background-size: cover;
  background-position: center center;

  border-top-left-radius: 7px;
  border-bottom-left-radius: 7px;

  background-color: var(--gray-50);

  display: flex;
  align-items: center;
  justify-content: center;

}

.filebox .filebox--contents {
  grid-area: contents;
  position: relative;
}

.filebox .filebox--contents>div {
  padding: 18px 12px;
}

.filebox .filebox--title {
  font-weight: 500;
  word-break: break-word;

  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: 100%;
}

.filebox .filebox--value {
  font-size: 12px;
  margin-top: 8px;
}

.filebox .filebox--label {
  margin-top: 8px;
}

.filebox .filebox--contents,
.filebox .filebox--image {
  min-width: 0;
}

.filebox .filebox--divider {
  margin: 0 2px;
}

.filebox .filebox--delete {
  color: var(--text-color);
  position: absolute;
  font-size: 22px;
  top: -10px;
  right: -7px;
}

.file-preview-box {
  font-size: 24px;

  background-size: cover;
  background-position: center center;

  border-radius: 8px;

  background-color: var(--gray-50);

  display: flex;
  align-items: center;
  justify-content: center;

  width: 50px;
  height: 50px;

  border: 1px solid var(--input-border-color);
}

@media (min-width: 1214px) {

  .overview-grid--cell.overview-grid--leads {
    min-height: 305px;
  }
}

#swal2-content .btn {
  font-weight: 700 !important;
}

#swal2-content .btn.btn-success {
  color: var(--prune-50) !important;
}

.form-group div>.twitter-typeahead {
  display: block !important;
}

.twitter-typeahead .tt-highlight {
  color: var(--text-color) !important;
  font-weight: 600 !important;
}

.twitter-typeahead .tt-suggestion {
  font-weight: 400 !important;
  font-size: 14px !important;
}

.autocomplete-dataset {
  background: var(--gray-100) !important;
  color: var(--text-color) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  letter-spacing: 0.025rem;
}

.autocomplete-dataset,
.autocomplete-item {
  border-bottom: 1px solid var(--gray-200) !important;
}

span.twitter-typeahead .tt-suggestion.tt-cursor,
span.twitter-typeahead .tt-suggestion:hover,
span.twitter-typeahead .tt-suggestion:focus {
  background: var(--blue-500) !important;
}

span.twitter-typeahead .tt-suggestion.tt-cursor strong,
span.twitter-typeahead .tt-suggestion:hover strong,
span.twitter-typeahead .tt-suggestion:focus strong {
  color: var(--prune-50) !important;
}

/* .form-control { height: 46px } moved to form.css (Group A) */

.select2-container .select2-choice {
  border-color: var(--input-border-color) !important;
  height: 46px;
  padding: 0 0 0 12px !important;
  color: var(--text-color) !important;
}

.select2-container .select2-choice>.select2-chosen {
  padding: 9px 0px !important;
}

.select2-container.select2-dropdown-open .select2-choice {
  background-color: var(--gray-100) !important;
}

/* select2 (v3) arrow — match native form-control select arrow, no grey background */
.select2-container .select2-choice .select2-arrow {
  background: transparent !important;
  background-image: none !important;
  border-left: 0 !important;
  width: 26px !important;
}

.select2-container .select2-choice .select2-arrow b {
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M3.5 6l4.5 4.5L12.5 6'/%3e%3c/svg%3e") no-repeat center !important;
  background-size: 15px 15px !important;
}

/* native select — replace default OS arrow with FontAwesome-style chevron-down */
select.form-control:not([multiple]) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M3.5 6l4.5 4.5L12.5 6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 15px 15px;
}

select.form-control::-ms-expand {
  display: none;
}

/* privacy consent: keep the checkbox cluster attached to its textarea,
   spacing between blocks provided by the wrapper (textarea partial owns a
   form-group with margin-bottom:30px, neutralized here) */
.privacy-consent-block {
  margin-bottom: 30px;
}

.privacy-consent-block>.form-group {
  margin-bottom: 8px;
}

.table-se--translations tr td label {
  font-weight: 400;
}

.table.table-se.table-se--translations tbody>tr>td {
  padding-top: 10px;
  padding-bottom: 10px;
  height: auto;
  vertical-align: top;
}

.form-control--transparent {
  border-color: transparent;
  padding-left: 0;
  padding-right: 0;
  height: auto;
}

.content .tabs-new.nav-tabs.tabs-tab {
  margin: 0;
}

.content .tabs-new.tabs-tab {
  margin-bottom: -4px !important;
}

.content .tabs-new.tabs-tab>li.active>a {
  background-color: var(--gray-100) !important;
  border-color: transparent !important;
}

.content .tabs-new.tabs-tab>li>a {
  padding: 12px 20px 14px 20px;
  margin: 0;
}

.content .nav-tabs.tabs-tab:after {
  display: none;
}

/* Raggruppamento di campi che dipendono da un interruttore: una barra a
   sinistra e un rientro, senza scatola. Si emette con
   views/components/form/_field_group.tpl — vedi la cartuccia UI §3. */
.subsection-form {
  margin: 0 0 30px 0;
  border-left: 3px solid var(--blue-500);
  padding-left: 10px;
}

.subsection-form__title {
  margin: 0 0 12px 0;
  font-size: 15px;
  font-weight: 600;
}

/* Stato SPENTO che resta a video (when_inactive="dim").
   L'alternativa — il gruppo sparisce — non ha bisogno di CSS: è display:none.
   I toni sono quelli che i buzz usavano già per dire "questo è spento", qui
   presi dai token invece che scritti a mano. */
.subsection-form.is-inactive {
  border-left-color: var(--prune-200);
}

.subsection-form.is-inactive .control-label,
.subsection-form.is-inactive .form-check-label,
.subsection-form.is-inactive .subsection-form__title,
.subsection-form.is-inactive>label {
  color: var(--prune-600);
}

.subsection-form.is-inactive .form-control,
.subsection-form.is-inactive select,
.subsection-form.is-inactive textarea {
  background-color: var(--prune-50);
}

/* .table.table-se tbody>tr>td{
  max-width: 300px;
} */

#turbo-modal .modal-body {
  padding: 20px 30px;
}

#turbo-modal .modal-dialog,
#turbo-modal .modal-content,
#turbo-modal .modal-body {
  height: auto;
}

#turbo-modal .modal-header {
  display: flex;
  align-items: center;
}

#turbo-modal .modal-header .modal-title {
  flex-grow: 1;
  font-size: 16px;
}

#turbo-modal .modal-header .close {
  font-size: 28px;
}

/* Modale di selezione campi per l'export: stessa veste della modale turbo di edit */
#export-fields-modal .modal-dialog,
#export-fields-modal .modal-content,
#export-fields-modal .modal-body {
  height: auto;
}

/* Ripristina il padding interno (azzerato globalmente da .modal-body{padding:0})
   e allinea header/body/footer alla stessa spaziatura orizzontale */
#export-fields-modal .modal-header,
#export-fields-modal .modal-body,
#export-fields-modal .modal-footer {
  padding-left: 24px;
  padding-right: 24px;
}

#export-fields-modal .modal-body {
  padding-top: 20px;
  padding-bottom: 20px;
}

#export-fields-modal .modal-header {
  display: flex;
  align-items: center;
}

#export-fields-modal .modal-header .modal-title {
  flex-grow: 1;
  font-size: 16px;
}

#export-fields-modal .modal-header .modal-subtitle {
  font-size: 13px;
  font-weight: 400;
  color: var(--secondary-text-color, var(--gray-500));
  margin-top: 2px;
}

#export-fields-modal .modal-header .close {
  font-size: 28px;
}

#export-fields-modal .export-fields-dida {
  line-height: 18px;
  font-size: 12px;
  color: var(--gray-500);
  margin-bottom: 16px;
}

/* "Select All": allineato a sinistra e separato dalla lista campi */
#export-fields-modal .export-fields-selectall {
  font-weight: 600;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--gray-200, var(--prune-100));
}

/* Gruppi di campi (per sessione / categoria): titolo sopra i relativi campi */
#export-fields-modal .export-fields-group+.export-fields-group {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--gray-200, var(--prune-100));
}

#export-fields-modal .export-fields-group-title {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 10px;
  color: var(--text-color, var(--gray-950));
}

/* Griglia campi compatta a 3 colonne, label e checkbox affiancati */
#export-fields-modal .export-fields-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 24px;
}

#export-fields-modal .export-fields-selectall label,
#export-fields-modal .export-field-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  cursor: pointer;
}

#export-fields-modal .export-field-item {
  font-weight: 400;
}

#export-fields-modal .export-fields-selectall input,
#export-fields-modal .export-field-item input {
  margin: 0;
  flex-shrink: 0;
}

@media (max-width: 767px) {
  #export-fields-modal .export-fields-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }


}

.vertical-step {
  display: flex;
  gap: 20px;
}

.vertical-step--number span {
  font-size: 18px;
  font-weight: 500;
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 50%;
  background-color: var(--gray-100);
  color: var(--text-color);
}

.vertical-step--desc {
  padding: 10px 0;
  flex-grow: 1;
}

.check--tooltip {
  font-size: 18px;
  vertical-align: text-bottom;
  margin: 0 0 0 4px;
  color: var(--secondary-text-color);
}

@media (max-width: 767px) {
  .disable-pull-right-sm {
    float: none !important;
    left: 0 !important;
    right: auto !important;
  }
}

@media (max-width: 1213px) {

  .tag-wrapper-program,
  .tag-wrapper-attendee_website,
  .tag-wrapper-company,
  .tag-wrapper-post {
    display: grid;
    grid-template-columns: 1fr;
  }

  .disable-pull-right-md {
    float: none !important;
    left: 0 !important;
    right: auto !important;
  }
}

/* .form-check (flex) + .form-check-input[type=checkbox] flex-shrink moved to form.css (Group F) */

.dropdown-header {
  padding: 4px 16px;
}

.select2-drop {
  z-index: 99999;
}

.attendee_creation_box {
  display: flex;
  gap: 12px;
  flex-direction: column;
}

@media screen and (min-width: 768px) {
  .attendee_creation_box {
    flex-direction: row;
  }
}

#alert-modal .modal-body {
  padding: 20px 30px;
}

#alert-modal .modal-dialog,
#alert-modal .modal-content,
#alert-modal .modal-body {
  height: auto;
}

#alert-modal .modal-header {
  display: flex;
  align-items: center;
}

#alert-modal .modal-header .modal-title {
  flex-grow: 1;
  font-size: 16px;
}

#alert-modal .modal-header .close {
  font-size: 28px;
}

#alert-modal h2 {
  line-height: 26px;
}

/* Modale di conferma eliminazione delle annotation sulla planimetria.
   Annulla l'altezza fissa globale (.modal-dialog/.modal-content/.modal-body{height:660px}
   in @media min-width:768px), pensata per #iframeModal ma applicata a tutte le modali:
   qui lasciava il corpo vuoto alto mezzo schermo con il footer staccato in fondo.
   Stesso trattamento gia' in uso per #turbo-modal, #export-fields-modal e #alert-modal. */
#modal-delete .modal-dialog,
#modal-delete .modal-content,
#modal-delete .modal-body {
  height: auto;
}

/* Ripristina il padding interno azzerato globalmente da .modal-body{padding:0} */
#modal-delete .modal-header,
#modal-delete .modal-body,
#modal-delete .modal-footer {
  padding-left: 24px;
  padding-right: 24px;
}

#modal-delete .modal-body {
  padding-top: 20px;
  padding-bottom: 20px;
}

/* Niente display:flex sull'header come nelle altre modali: qui il pulsante di
   chiusura precede il titolo nel markup, il flex lo porterebbe a sinistra.
   Il float:right di Bootstrap lo tiene gia' al posto giusto. */
#modal-delete .modal-title {
  font-size: 16px;
}

.attendee_header {
  display: flex;
  gap: 30px;
  align-items: center;
  background-color: var(--blue-50);
  border: 1px solid var(--gray-300);
  padding: 20px 36px;
  margin: 0 0 34px 0;
  border-radius: 10px;
  background: var(--white-color);

}

.attendee_header .btn-default2 {
  background-color: var(--prune-50);
}

.attendee_header code {
  color: var(--gray-500) !important;
  background-color: var(--gray-100);
}

/* .form-control[disabled], fieldset[disabled] .form-control moved to form.css (Group A) */
.select2-container-multi.select2-container-disabled .select2-choices {
  background-color: var(--gray-100) !important;
  border-color: var(--input-border-color) !important;
}

/* Loader del pulsante di ricerca (.searchbar button.loading + .spinner)
   spostato in ui_elementi.css. Le @keyframes fa-spin restano qui (globali). */

/* Assicura che l'animazione di spin funzioni correttamente */
@keyframes fa-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(359deg);
  }
}


/* ANCHOR: APP_BUILDER */
.app_builder {
  display: flex;
  gap: 13%;
}

.app_builder_row {
  margin-bottom: 2rem;
  position: relative;

}

.app_builder_row .form-group {
  position: relative;
  z-index: 2;
}

.app_builder_row .highlights {
  display: none;
  width: 106%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 1;


}

.center {
  flex: 1;
  position: relative;
  height: 43px;
  top: 24px;

  border-radius: 1px;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(23, 62, 87, 0.7);
  }

  70% {
    box-shadow: 0 0 0 5px rgba(23, 62, 87, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(23, 62, 87, 0);
  }
}

.app_builder_row .highlights .left {
  right: 0;
  position: relative;
  top: 50%;
  font-size: 1.5rem;
  color: rgba(23, 62, 87, 0.7);
  width: 30px;
  height: 21px;
}

.app_builder_row .highlights .left i.one {
  position: absolute;
  animation: fromRightToLeft .6s ease-in-out alternate infinite;
}


@keyframes fromRightToLeft {
  0% {

    right: 13px;
    top: -29px;
  }

  100% {

    right: 20px;
    top: -21px;
  }


}

.app_builder_row.images {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.app_builder_row.images .form_group_item_wrapper {
  width: 240px;
  overflow: hidden;

}

.app_builder_row.images .form_group_item_wrapper label {
  margin-left: .2rem;
}

.app_builder_row.images .form_group_item_wrapper .upload_box label {
  margin-left: 0rem;
}

.app_builder_row .app_builder_form_group {
  gap: 2rem;
}

.app_builder_left {
  max-width: 500px;
}

.app_builder_form_group_title {
  margin-left: 2rem;
  font-weight: bold;
}

.app_builder_row.images .app_builder_title {
  margin-left: 2rem;
}

.app_builder_form_group {
  display: flex;
  align-items: center;
  border: 1.5px dashed var(--gray-200);
  padding: 2rem;
  border-radius: 7px;
}

span.formatImage {
  position: absolute;
  top: 3px;
  right: 7px;
  color: var(--prune-950);
  font-size: 1.1rem;
}

/* .upload_box family moved to form.css (Group D — File upload box).
   The legacy '.app_builder_row .upload_box label' selector was dropped
   in favor of the generic '.upload_box > label' rule (its scoping by
   .app_builder_row was incidental, not semantic). */

/* Bold title above an upload box, same pattern as #app_store on
   /admin/app/settings (views/app/settings/partials/_app_store.tpl). */
#badge--content .upload_item_wrapper>label {
  font-weight: bold;
}

/* Same criterion for the merged Name/Size/Print-front/Upload box: "Badge name"
   (direct child <label>) and "Badge size (mm)" (label.title, one level deeper). */
.badge-meta-box>label,
.badge-meta-box label.title {
  font-weight: bold;
}

/* The inline <style> at the top of new_edit.tpl gives every .upload_item_wrapper
   its own dashed border + padding — meant for the Images tab, where each box
   stands alone. In the Content tab it's nested inside .form_item (which already
   has that same border), so it doubled up. Strip it here only. */
#badge--content .upload_item_wrapper {
  border: none;
  padding: 0;
}

.upload_box {
  opacity: 0;
  border-radius: 5px;
  position: relative;
  width: 195px;
  height: 98px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  text-align: center;
  overflow: hidden;

}

.upload_box.no_image_uploaded {
  opacity: 1;
  background: aliceblue;
}

.upload_box.image_uploaded {
  background: var(--prune-50);
  opacity: 1;
}

.upload_box.image_uploaded .help-block,
.upload_box.image_uploaded>label,
.upload_box.image_uploaded .upload_feedback {
  display: none;
}

.upload_box input[type="file"] {
  display: none;
}

.upload_box .delete {
  position: absolute;
  z-index: 100;
  background: var(--white-color);
  bottom: 4px;
  right: 4px;
}

.app_builder_row .upload_box label {
  cursor: pointer;
  color: var(--primary-color);
  font-weight: 600;
  margin-left: 0;
}

.upload_box .help-block {
  margin: 0;
}

.upload_box div img {
  position: absolute;
  margin: 0;
  width: 100%;
  left: 0;
  top: 0;
  object-fit: contain;
  height: 100%;
}


.app_builder .form_group_item {
  display: flex;
  flex-direction: column;
}

.app_builder .form_group_item .sp-replacer {
  margin: 0 !important;
}

.app_builder .form_group_item input#app_btn_alpha_channel {
  height: 25px;
}

.app_builder .form_group_item .alfa_channel_wrapper {
  display: flex;
  align-items: center;
  gap: 2px;
  background-color: var(--prune-100);
  padding: 0 7px;
  border-radius: 7px;
}

.app_builder_row.banner .app_builder_form_group {
  display: flex;
  align-items: center;
  border: 0;
  padding: 0rem;
  border-radius: 0;
  gap: 2rem;
  align-items: flex-end;
}

.app_builder_row.banner .form_group_item_wrapper {
  border: 1.5px dashed var(--gray-200);
  padding: 2rem;
  border-radius: 7px;
  display: flex;
  flex-direction: column;
  gap: 2rem;

}

.app_builder_row.brand .app_builder_form_group {
  align-items: flex-start;
  margin-top: 2rem;
}

.app_builder_title {

  font-size: 13px;
}

.app_builder_row.banner>.app_builder_title {
  margin-left: 2rem;
}

.app_builder_row.banner .app_builder_form_group input[type="text"] {
  height: 32px;
}

/* ANCHOR: APP_BUILDER--PHONE*/

.btn-group.sync-update-app .btn {
  background-color: var(--primary-color);
  border: none;
  animation: none;
}

.btn-group.to-update-app .btn {
  background-color: var(--orange-300);
  border: none;
  animation: heartbeat 5s ease-in-out infinite both;
}

@keyframes heartbeat {
  from {
    transform: scale(1);
    transform-origin: center center;
    animation-timing-function: ease-out;
  }

  10% {
    transform: scale(0.9);
    animation-timing-function: ease-in;
  }

  17% {
    transform: scale(1.05);
    animation-timing-function: ease-out;
  }

  33% {
    transform: scale(1);
    animation-timing-function: ease-in;
  }

  45% {
    transform: scale(1);
    animation-timing-function: ease-in;
  }
}


.app_builder_phone_wrapper {
  position: sticky;
  top: 70px;
}

.phone {
  width: 360px;
  height: 775px;
  box-shadow: 0 0 5px #33333375;
  border-radius: 20px;
  overflow: hidden;
  color: var(--white-color);
  position: relative;
}

.phone ul {
  list-style: none;

}

.phone header {
  z-index: 0;
}

.phone footer {
  border-top: 1px solid var(--prune-400);
}

.phone_top_ui {
  background: var(--gray-100);
}

.phone_top_ui_icons {
  display: flex;
  justify-content: space-between;
  padding: 1rem 1.5rem;
}

.phone_top_ui_nav {
  display: flex;
  list-style: none;
  justify-content: space-between;
  margin: 0rem 0 0 0;
  padding: 1rem 2rem;
}

.phone_top_ui_nav li {
  font-size: 2.5rem;
}

.phone .phone_banner_top,
.phone .phone_banner_bottom {
  pointer-events: none;
}

.phone .menu {
  cursor: pointer;
}

.phone header {
  padding: 0;
  height: 180px;
  background-size: contain;
  background-color: var(--prune-50);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background-repeat: no-repeat;
  background-position: center;
}

.phone header .icons {
  display: flex;
  justify-content: space-between;
  height: 55px;
  align-items: flex-end;
  padding: 0;
  height: 100%;
  width: 100%;
}

.phone header img.imageHeaderFallback {
  position: absolute;
  top: 0;
  left: 0;
}

img.imageHeader {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

.phone header .icons li {
  font-size: 2rem;
  color: rgb(176, 176, 176);
}

.phone header .brand {
  width: 100%;
  height: 40px;
  border-radius: 7px;
  background: var(--prune-200);
  margin-bottom: 0.5rem;
}

.phone .drawer {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--white-color);
  width: 80%;
  height: 100%;
  overflow: hidden;
  transform: translateX(-500px);
  z-index: 120;
  transition: all 0.3s ease-in-out;
}

.phone .drawer.open {
  transform: translateX(0px);
  transition: all 0.3s ease-in-out;
}

.phone .drawer .brand img {
  object-fit: contain;
  width: 100%;
}

.phone main {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-height: 452px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top left;
  justify-content: space-around;
  overflow: auto;
  height: 100%;
}

.phone main #aaddddBBtn {
  border: 2px dashed var(--gray-400);
  width: 90%;
  margin: 0 auto;
  height: 150px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: var(--gray-400);
  cursor: pointer;
  background-color: transparent;
}

.phone_banner_top,
.phone_banner_bottom {
  display: block;
  width: 160px;
  height: 75px;
  margin-top: 1rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex: 0 0 75px;
}


.phone_banner_bottom {
  margin-top: 0rem;
  margin-bottom: 1rem;
}

.phone .info_title {
  font-size: 2.5rem;
}

.phone .info_subs {
  font-size: 1.2rem;
}

.phone .phone_buttons {
  display: grid;
  z-index: 100;
  padding: 1.5rem;
  row-gap: 2rem;
}

.phone .drawer ul {
  color: var(--black-color);
  padding-left: 0;
  overflow: scroll;
  max-height: 644px;
  height: 100%;
}

.phone .drawer ul li {
  display: flex;
  align-items: center;
  margin: .5rem .5rem .5rem .5rem;
  border-bottom: 1px solid var(--gray-200);
  padding-bottom: .5rem;
  gap: .5rem;
}

.phone .drawer ul li svg {
  width: 30px;
  height: 30px;
  fill: var(--black-color);
}

.phone .drawer ul li.custom_button img {
  max-width: 30px;
}

.phone .phone_buttons.colBy1 {
  grid-template-columns: 1fr;
  row-gap: 1rem;
  width: 80%;
}

.phone .phone_buttons.colBy2 {
  grid-template-columns: repeat(2, auto);
  gap: 1rem;
  justify-content: center;
  width: 100%;
}

.phone .phone_buttons.colBy3 {
  grid-template-columns: repeat(3, 1fr);
  width: 80%;
}

.phone .phone_buttons.colBy4 {
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
}

.phone .phone_buttons.colBy2 li {
  width: 90px;
  height: 90px;
}

.phone .phone_buttons.colBy2 li svg {
  flex: 0 0 55px;
  width: 55px;
}

.phone_buttons li {
  position: relative;
  width: 75px;
  height: 75px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  justify-self: center;
  /* centra l'icona nella cella della griglia */
  color: var(--gray-600);
  overflow: hidden;
}

.phone_buttons li svg {
  flex: 0 0 50px;
  width: 50px;
}

.phone .phone_buttons.colBy1 li {
  width: 100%;
  height: 85px;
}

.phone .phone_buttons.colBy1 li svg {
  flex: 0 0 40px;
  width: 40px;
}

.phone_buttons_background {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.phone_buttons li i {
  font-size: 2.5rem;
}

.phone_buttons li span {
  font-size: 1rem;
  margin-top: 0rem;
  text-align: center;
  line-height: 1;
}

.phone_buttons .custom_button {
  justify-content: flex-start;
}

.phone_buttons .custom_button:not(:has(a img)) {
  justify-content: flex-end;
}

.phone_buttons .custom_button:not(:has(a img)) span {
  margin-bottom: 3px;
}

.phone_buttons .custom_button a {
  display: block;
  width: 100%;
  text-align: center;

}

.phone_buttons .custom_button a img {
  width: 45px;
  height: 45px;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 5px;
  margin-top: 5px;
}

.phone footer nav {
  background: var(--gray-100);

}

.phone footer nav ul {
  padding: 1.1rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;

}

.phone footer nav ul li {
  font-size: 2rem;
  justify-self: center;
}

.phone .loader {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: var(--blue-900);
  z-index: 1000;
  border-radius: 15px;
  animation: slide-out-left 1s 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;

}


.phone .animation_phone {

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

}


@keyframes slide-out-left {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(-1000px);
    transform: translateX(-1000px);
    opacity: 0;
  }

}

/***************************************************
 * Generated by SVG Artista on 12/2/2025, 9:22:43 AM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/

@keyframes animate-svg-stroke-1 {
  0% {
    stroke-dashoffset: 1480.2763671875px;
    stroke-dasharray: 1480.2763671875px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 1480.2763671875px;
  }
}

.svg-elem-1 {
  animation: animate-svg-stroke-1 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both;
}

@keyframes animate-svg-stroke-2 {
  0% {
    stroke-dashoffset: 1372px;
    stroke-dasharray: 1372px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 1372px;
  }
}

.svg-elem-2 {
  animation: animate-svg-stroke-2 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s both;
}

@keyframes animate-svg-stroke-3 {
  0% {
    stroke-dashoffset: 240.82020568847656px;
    stroke-dasharray: 240.82020568847656px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 240.82020568847656px;
  }
}

.svg-elem-3 {
  animation: animate-svg-stroke-3 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s both;
}

@keyframes animate-svg-stroke-4 {
  0% {
    stroke-dashoffset: 240.82022094726562px;
    stroke-dasharray: 240.82022094726562px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 240.82022094726562px;
  }
}

.svg-elem-4 {
  animation: animate-svg-stroke-4 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s both;
}

@keyframes animate-svg-stroke-5 {
  0% {
    stroke-dashoffset: 240.82020568847656px;
    stroke-dasharray: 240.82020568847656px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 240.82020568847656px;
  }
}

.svg-elem-5 {
  animation: animate-svg-stroke-5 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.48s both;
}

@keyframes animate-svg-stroke-6 {
  0% {
    stroke-dashoffset: 240.82022094726562px;
    stroke-dasharray: 240.82022094726562px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 240.82022094726562px;
  }
}

.svg-elem-6 {
  animation: animate-svg-stroke-6 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s both;
}

@keyframes animate-svg-stroke-7 {
  0% {
    stroke-dashoffset: 240.82020568847656px;
    stroke-dasharray: 240.82020568847656px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 240.82020568847656px;
  }
}

.svg-elem-7 {
  animation: animate-svg-stroke-7 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.72s both;
}

@keyframes animate-svg-stroke-8 {
  0% {
    stroke-dashoffset: 240.8201904296875px;
    stroke-dasharray: 240.8201904296875px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 240.8201904296875px;
  }
}

.svg-elem-8 {
  animation: animate-svg-stroke-8 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.84s both;
}

@keyframes animate-svg-stroke-9 {
  0% {
    stroke-dashoffset: 240.82020568847656px;
    stroke-dasharray: 240.82020568847656px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 240.82020568847656px;
  }
}

.svg-elem-9 {
  animation: animate-svg-stroke-9 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.96s both;
}

@keyframes animate-svg-stroke-10 {
  0% {
    stroke-dashoffset: 240.82022094726562px;
    stroke-dasharray: 240.82022094726562px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 240.82022094726562px;
  }
}

.svg-elem-10 {
  animation: animate-svg-stroke-10 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 1.08s both;
}

@keyframes animate-svg-stroke-11 {
  0% {
    stroke-dashoffset: 240.82020568847656px;
    stroke-dasharray: 240.82020568847656px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 240.82020568847656px;
  }
}

.svg-elem-11 {
  animation: animate-svg-stroke-11 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2s both;
}

@keyframes animate-svg-stroke-12 {
  0% {
    stroke-dashoffset: 267.5px;
    stroke-dasharray: 267.5px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 267.5px;
  }
}

.svg-elem-12 {
  animation: animate-svg-stroke-12 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3199999999999998s both;
}

@keyframes animate-svg-stroke-13 {
  0% {
    stroke-dashoffset: 67.97344572538566px;
    stroke-dasharray: 67.97344572538566px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 67.97344572538566px;
  }
}

.svg-elem-13 {
  animation: animate-svg-stroke-13 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 1.44s both;
}


/* ANCHOR: CALENDAR */
.domLoading {
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--white-color);
  z-index: 100;
  display: none;
  justify-content: center;
  align-items: flex-start;
  padding-top: 5rem;
}

.domLoading.loading {
  display: flex;
}


.switchView {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  padding-right: 1rem;
}

.switchView div {
  cursor: pointer;
  font-size: 2rem;
  border: 1px solid var(--gray-300);
  width: 36px;
  height: 36px;
  display: flex;
  border-radius: 5px;
  align-items: center;
  justify-content: center;

}

.switchView div.active {
  border: 1px solid var(--blue-500);
  background-color: var(--primary-color);

}

.switchView div.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.switchView div.active i {
  color: var(--white-color);
}

.switchView div i {
  color: var(--gray-400);
}

.ec-title {
  margin: 0;
  text-transform: capitalize;
  font-size: 2.3rem;
  font-weight: 600;
  padding: 5px;
  border-radius: 5px;
}

.ec-day.ec-today {
  background-color: transparent;
}


.ec-toolbar {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  margin-bottom: 2em;
  gap: 2rem;
}


#calendar {
  margin: 2rem 0 12px 0;

}


button.ec-button.ec-today {
  display: none;
}

.wrapperCalendar .calendar.byDay .ec-start {
  display: none;
}

.wrapperCalendar {
  overflow: hidden;
  height: 100%;
  min-height: 550px;
}

.wrapperCalendar.closed {
  height: 0;
  overflow: hidden;
  min-height: 0px;
}

#calendar.closed {
  opacity: 0;
}

.table-responsive.program-table.closed {
  display: none;
}

.event-popup {
  background: var(--white-color);
  border: 1px solid var(--prune-200);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  min-width: 280px;
  max-width: 400px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.event-popup-content {
  padding: 0;
}

.event-popup-header {
  background: var(--prune-50);
  border-bottom: 0px solid var(--gray-200);
  padding: 18px 16px 5px 16px;
  border-radius: 6px 6px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.event-popup-header h4 {
  margin: 0;
  color: var(--gray-900);
  font-size: 16px;
  font-weight: 600;
}

.event-popup-close {
  display: none;
}

.event-popup-close:hover {
  color: var(--gray-900);
}

.event-popup-body {
  padding: 7px 16px 16px 16px;
}

.event-popup-body p {
  margin: 8px 0;
  color: var(--gray-600);
  font-size: 14px;
  display: flex;
  align-items: center;
}

.event-popup-actions .btn-primary {

  border: 1px solid rgb(219, 219, 219);
}

.event-popup-body .bookingbtn i {
  color: var(--black-color);

}

.event-popup-body i {
  margin-right: 8px;
  width: 16px;
  color: var(--black-color);
}

.event-popup-body .tagBarContainer {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: fit-content;
  justify-content: flex-start;
  align-items: center;
  padding: 3px 0px;
  gap: 3px;
}

.event-popup-body .tagBarContainer .tagBar {
  height: 100%;
  width: auto;
  color: var(--white-color);
  padding: 0 10px;
  font-size: 1.2rem;
  text-transform: capitalize;
  flex: 1;
  white-space: nowrap;
  padding: 3px 9px;
}

.event-popup-actions {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--prune-100);
  display: flex;
  gap: 8px;
}

.event-popup-actions .btn {
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;

  background-color: var(--white-color);
  color: var(--black-color);
}


.event-popup-actions .btn-default {
  background: var(--white-color);
  color: var(--black-color);
  border: 1px solid var(--prune-200);
}

.event-popup-actions .btn:hover {
  opacity: 0.9;
}

.event-popup-actions i {
  color: var(--black-color);
}

.ec-day-grid .ec-event-body {
  position: relative;
  gap: 4px;
}

.tagBarContainer {
  display: flex;
  flex-direction: column;
  width: 13px;
  align-items: center;
  padding: 3px 0px;
  gap: 3px;
}

.ec-day-grid .ec-event-title {
  white-space: wrap;
  font-weight: bold;
  width: auto;
  margin-bottom: 2px;
}

.ec-timeline .ec-sidebar .ec-resource:not(:last-child) {

  justify-content: flex-end;
  font-weight: bold;
}

.ec-all-day .ec-event-title,
.ec-timeline .ec-event-title {

  white-space: wrap;
  font-weight: bold;
  width: 400px;
  margin-bottom: 2px;
  height: 35px;
  font-size: 1.4rem;
  line-height: 1.2;
}

.tagBarContainer .tagBar {
  width: 5px;
  flex: 1;
  border-radius: 10px;
}

.ec-day-grid .ec-event-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 .5rem 0 0;
  flex: 1;
  filter: brightness(.7);
}

.ec-day-grid .ec-event,
.ec-all-day .ec-event {

  min-height: 90px;
  border: 1px solid rgb(188, 188, 188);
  margin: 4px 6px;
  padding: 0px;
  border-radius: 5px;
  overflow: hidden;
  background-clip: padding-box;
}

.ec-day-grid.ec-day-head {
  background: var(--gray-50);
  margin-bottom: 3px;
}

.ec-day-grid .ec-bg-events,
.ec-all-day .ec-bg-events {
  border-left: 2px dashed var(--prune-100);
}

.ec-day-grid .ec-header,
.ec-day-grid .ec-all-day,
.ec-day-grid .ec-body,
.ec-day-grid .ec-days,
.ec-day-grid .ec-day,
.ec-day-grid .ec-day-head {
  border: 1px solid hsl(0deg 0% 100%);
}

.ec-day-grid .ec-day-head {

  justify-content: flex-end;

}

.ec-start {
  order: 2;
}

.ec-center {
  order: 1;
}

.ec-end {
  order: 3;
  display: none;
}

.ec-event-details {
  display: flex;
  gap: 0px;
  flex-direction: column;
}

.ec-event-details i {
  font-size: 11px;
}

.ec-day.ec-disabled:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--white-color);
  opacity: 0;
}

.ec-time-grid .ec-header,
.ec-time-grid .ec-all-day,
.ec-time-grid .ec-body,
.ec-time-grid .ec-days,
.ec-time-grid .ec-day,
.ec-time-grid .ec-day-head {
  border: 1px solid transparent;
}

.ec-time-grid article.ec-event {
  width: auto !important;
  min-height: 90px !important;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.504) !important;
  padding: 0;
}

.ec-time-grid .tagBarContainer {
  flex-direction: row;
  width: 100%;
  padding: 0;
  margin-bottom: 1rem;

}

.ec-time-grid .tagBarContainer .tagBar {
  width: auto;
  height: 3px;
}

.ec-time-grid .ec-event-title {
  font-weight: bold;
}

.ec-time-grid .ec-event-body {
  display: flex;
  flex-direction: column;
  max-width: 180px;
  padding: 1rem;
}

.ec-day-grid .ec-days {
  border-bottom: 1px solid rgb(237, 237, 237);
}

.ec-event-location {
  display: flex;
  align-items: baseline;
  gap: 3px;
}

.ec-time-grid .ec-event-details {
  display: flex;
  gap: 0px;
  flex-direction: column;
}


.ec-timeline .ec-sidebar {
  padding: 0;
  border: 0px;
  border-right-style: none;
}

.ec-timeline .ec-sidebar .ec-resource:not(:last-child) {
  flex-grow: 0;
  border-bottom: 0px;
  align-items: center;
}

.ec-timeline .ec-line:not(:first-child):after {
  content: "";
  position: absolute;
  height: 100%;
  border-left: 2px dashed rgb(240, 240, 240);
  pointer-events: none;
}

.ec-timeline .ec-event {
  min-height: 90px;
  border-width: 1px;
  border-style: solid;
  border-color: rgb(98, 150, 181);
  border-image: initial;
  margin: 4px 0px;
  border-radius: 5px;
  overflow: hidden;
  margin-top: 5px !important;
  transition: all 0.3s ease-in-out;
  justify-content: flex-start;
  background-clip: padding-box;
}


.ec-timeline .ec-event-details {
  display: flex;
  flex-direction: column;
  gap: 0px;
  opacity: .7;
}


.ec-timeline .ec-day-head {
  display: none;
}

.ec-timeline .ec-times {
  border: 0;
  font-weight: bold;
  background: var(--prune-50);
}

.ec-timeline .ec-time {
  border: 0;

}

.ec-timeline .ec-time,
.ec-timeline .ec-line {
  width: 120px;
  min-width: 120px;
}

.ec-timeline .ec-header,
.ec-timeline .ec-all-day,
.ec-timeline .ec-body,
.ec-timeline .ec-day-head {
  border: none;

}

.ec-timeline .ec-header {
  border-bottom: 1px solid var(--gray-100);
}

.ec-timeline .ec-event-wrapper {
  min-width: 350px;
  filter: brightness(.6);
  padding: 5px;
}


.ec-timeline .ec-event-body {
  width: auto;
}

.ec-event-body .white-overlay {
  position: absolute;
  width: 100%;
  background: var(--prune-50);
  height: 100%;
  z-index: -1;
  opacity: 0.95;
  top: 0;
  left: 0;
}

.logoLoading {
  width: 70px;
  height: 70px;
  opacity: 0.7;
  animation: rotate 2s linear infinite;
}

.ec-timeline .ec-sidebar .ec-sidebar-title {

  border-bottom: 1px solid transparent;

}

.ec-timeline .ec-sidebar .ec-resource {
  width: 120px;
  text-align: right;
}

.ec-timeline .ec-time,
.ec-timeline .ec-line {
  width: 130px;
  /* override this value */
}

.ec-header,
.ec-all-day,
.ec-body,
.ec-days,
.ec-day,
.ec-day-head {
  border: 1px solid var(--gray-100);
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(-360deg);
  }
}

#container_attendee_pagination.closed {
  display: none;
}

.sh-block__btn .form-check-input {
  display: none;
}

.sh-block__label {
  position: relative;
  font-weight: normal;
  color: var(--black-color);
  text-align: center;
  padding: 6px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  transition: bottom 0.3s ease-in-out;
  font-size: 1.6rem;
}

label.form-check-label.sh-block__check-label {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0px 0px 0px var(--prune-100);
  transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
  border: 1px solid var(--gray-200);
  padding: 9px;
}

label.form-check-label.sh-block__check-label:hover {
  box-shadow: 0px 0px 10px var(--prune-100);
}


label.form-check-label.sh-block__check-label.active {
  outline: 3px solid var(--gray-600);
  transform: scale(1.05);
}

img.sh-block__icon {
  width: 100%;
  height: 185px;
  object-fit: contain;
}

.form-group.sh-block__btnwrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  gap: 1rem;
  align-self: flex-start;
  position: relative;
  justify-content: flex-start;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.sh-block__main {
  overflow: hidden;
  position: relative;
  min-height: 60vh;
  position: relative;
}

.sh-block__main.edit {
  overflow: hidden;
  position: relative;
  /* Deve stare dentro la viewport tenendo conto del margine top/bottom della
     modale (vedi #block-list .modal-dialog), altrimenti il fondo del contenitore
     scrollabile — dove c'è la barra del Save — finisce sotto lo schermo. */
  max-height: calc(100vh - 120px);
  position: relative;
  overflow-y: auto;
  /* Nessun padding-bottom: la barra Save sticky fa già da spaziatura in fondo. */
  padding: 0 2rem 0 2rem;
}

/* Barra del Save: sempre visibile in fondo all'area scrollabile della modale. */
.sh-block__main.edit .sh-block__savebar {
  position: sticky;
  bottom: 0;
  margin-top: 1rem;
  padding: 1rem 0;
  background: var(--prune-50);
  border-top: 1px solid var(--gray-200);
  z-index: 10;
}

.form-check.sh-block__btn {
  height: 250px;
}

.sh-block__main.edit header.sh-block__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
  margin-bottom: 1rem;
  padding: 1rem 1rem 1rem 1rem;
  background: var(--white-color);
  border-bottom: 2px dashed var(--gray-200);
  position: sticky;
  top: 0;
  z-index: 10;
}

.sh-block__main .block-type-settings.block-type-settings h2 {
  font-size: 2.5rem;
  font-weight: 300;
}

#block-list .modal-dialog {
  margin: 40px auto;
  max-width: 1110px;
  width: 100%;
}

/* Hero / Slider ha layout a due colonne + sidebar: gli serve piu larghezza.
   Attivo solo quando il suo pannello impostazioni e visibile (edit = senza
   display:none, oppure aperto dalla griglia = display:block). */
#block-list .modal-dialog:has(.block-type-settings-hero_slider:not([style*="none"])) {
  max-width: 1320px;
}

#block-list .modal-body {
  padding: 52px 16px 16px 16px;
}

/* In modalità edit l'header (sticky, con la sua spaziatura) fa già da margine
   in alto: riduco il padding-top del body per togliere lo spazio vuoto sopra
   il titolo. La griglia di scelta blocco resta a 52px per non finire sotto la X. */
#block-list .modal-body:has(.sh-block__main.edit) {
  padding-top: 16px;
}

#block-list .modal-content {
  position: relative;
}

/* Stessa larghezza/padding della modale-picker della lista blocchi anche quando
   è aperta DALL'EDITOR (pagine/homepage), dove NON c'è il wrapper #block-list e
   quindi la modale resterebbe al modal-lg (~900px) → si vedeva più piccola. */
#turbo-modal.block_edit_frame .modal-dialog {
  margin: 40px auto;
  max-width: 1110px;
  width: 100%;
}

#turbo-modal.block_edit_frame .modal-dialog:has(.block-type-settings-hero_slider:not([style*="none"])) {
  max-width: 1320px;
}

#turbo-modal.block_edit_frame .modal-body {
  padding: 52px 16px 16px 16px;
}

#turbo-modal.block_edit_frame .modal-body:has(.sh-block__main.edit) {
  padding-top: 16px;
}

/* .form-content ha di default padding 3rem + box-shadow 0 0 6px var(--prune-100)
   (restyling.css:1797, stile "card" generico di ogni pagina form) — ridondante
   quando la stessa view è caricata dentro il modal del picker, che ha già la
   sua ombra/cornice (.modal-content). Tolto solo quando wrappa il picker
   (non nella view "edit" impostazioni blocco, che tiene il suo layout). */
#turbo-modal.block_edit_frame .form-content:has(.sh-widgetpicker),
#block-list .form-content:has(.sh-widgetpicker) {
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Quando si apre il pannello impostazioni di un tipo, la modale-griglia si
   "chiude" visivamente (sfondo trasparente, niente griglia/X) e resta solo
   il pannello impostazioni, posizionato piu in alto. */
#turbo-modal.settings-open .modal-content {
  background: transparent;
  box-shadow: none;
  border: none;
}

#turbo-modal.settings-open .turbo-modal-close,
#turbo-modal.settings-open .sh-block__btnwrapper {
  display: none;
}

#turbo-modal.settings-open .sh-block__main {
  min-height: 0;
}

.turbo-modal-close {
  position: absolute;
  top: 12px;
  right: 15px;
  z-index: 1060;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: var(--prune-50);
  border-radius: 50%;
  font-size: 20px;
  line-height: 36px;
  text-align: center;
  color: var(--gray-900);
  opacity: 0.9;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}

.turbo-modal-close:hover {
  opacity: 1;
  color: var(--black-color);
}

#block-list .modal-dialog .form-container {
  width: 100%;
}

.sh-block__main .block-type-settings.active {
  animation: fadeIn 0.5s ease-in-out;
}

.sh-block__datawrapper {
  display: none;
  position: fixed;
  background: var(--white-color);
  z-index: 100;
  width: 100%;
  max-width: 1100px;
  left: 50%;
  transform: translate(-50%, 0%);
  border-radius: 5px;
  max-height: 90vh;
  padding: 3rem;
  box-shadow: 0px 0px 5px var(--prune-200);
  overflow-y: auto;
}

.sh-block__main .block_radiobtns input[type="radio"] {
  opacity: 0;
  position: fixed;
  width: 0;
}

.sh-block__main .block_radiobtns {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.sh-block__main .block_radiobtns input[type="radio"]+label {
  border-radius: 5px;
  padding: 6px;
}

.sh-block__main .block_radiobtns input[type="radio"]+label.disabled {
  pointer-events: none;
  opacity: .5;
  filter: blur(1px);
}

.sh-block__main .block_radiobtns input[type="radio"]:checked+label {
  outline: 1px solid rgb(188, 188, 188);

}

.sh-block__main .block_radiobtns input[type="radio"]+label img {
  width: 180px;
  height: auto;
  display: block;
}

.sh-block__datawrapper.active {
  display: block;
  position: fixed;
  animation: fadeInBlock 0.5s ease-in-out forwards;
}


.table.table-se tbody>tr>td.title_block a,
.table.table-se tbody>tr>td.title_block a:visited,
.table.table-se tbody>tr>td.title_block a:hover,
.table.table-se tbody>tr>td.title_block a:active {
  color: var(--black-color);
  font-size: 1.7rem;
}

.backgroundClose {
  position: absolute;
  width: 100%;
  height: 0%;
  top: 0;
  left: 0;
  z-index: 1;
  opacity: 0;
  border-radius: 10px;
  transition: all 0.3s ease-in-out;
  filter: blur(200px);
}

.backgroundClose.active {
  opacity: 0.9;
  height: 100%;

  background-size: contain;
  background: var(--white-color);
}

header.sh-block__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
  margin-bottom: 3rem;
  padding: 0rem 1rem 1rem 1rem;
  background: var(--white-color);
  border-bottom: 2px dashed var(--gray-200);
  justify-content: space-between;
}

.block-close {
  border: none;
  background: transparent;
  font-size: 2rem;
  cursor: pointer;
  border-radius: 50%;
  background: var(--prune-50);
  width: 42px;
  height: 42px;
  text-align: center;
  line-height: 2.1;
}

header.sh-block__header h2 {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 0;
}

header.sh-block__header img {
  width: 200px;
  height: auto;
  border: 1px solid var(--prune-100);
  border-radius: 5px;
}

/* =========================================================================
   WIDGET PICKER — variante "Add a widget" (views/website/blocks/_widget_picker.tpl)
   Card selezionabili a sinistra + pannello descrittivo a destra.
   ========================================================================= */

/* La griglia radio legacy resta nel DOM (meccanica di apertura settings) ma
   nascosta: nella variante la scelta avviene dalle card. */
.sh-widgetpicker .sh-block__btnwrapper {
  display: none;
}

.sh-widgetpicker__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 1.5rem;
  border-bottom: 1px solid var(--prune-100);
}

.sh-widgetpicker__head h2 {
  font-size: 2.2rem;
  font-weight: 700;
  margin: 0 0 0.3rem;
}

.sh-widgetpicker__head-text p {
  margin: 0;
  color: var(--prune-500);
  font-size: 1.4rem;
}

.sh-widgetpicker__search-wrap {
  position: relative;
  flex: 0 0 280px;
  max-width: 100%;
}

.sh-widgetpicker__search-wrap i {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  color: var(--gray-400);
  pointer-events: none;
}

.sh-widgetpicker__search.form-control {
  padding-left: 34px;
  border-radius: 8px;
}

.sh-widgetpicker__body {
  display: flex;
  align-items: flex-start;
  gap: 0;
}

/* --- Sinistra: lista card --- */
.sh-widgetpicker__list {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
  padding: 1.5rem 1.5rem 1.5rem 0;
  max-height: 70vh;
  overflow-y: auto;
}

.sh-widgetpicker__card {
  display: flex;
  flex-direction: column;
  text-align: left;
  border: 2px solid var(--gray-200);
  border-radius: 10px;
  background: var(--prune-50);
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  /* La card è un <button>: bootstrap.css gli forza font-family Helvetica/Arial
     (regola su elemento button, righe ~190-195), diverso dal font del sito su
     body (main.css). Senza questo reset titolo/descrizione dentro la card
     rendono con un font diverso dal pannello destro (che è un <div>, eredita
     normalmente). */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, "Droid Sans", "Helvetica Neue", sans-serif;
}

.sh-widgetpicker__card:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.sh-widgetpicker__card.selected {
  border-color: var(--blue-600);

}

.sh-widgetpicker__thumb {
  display: block;
  background: var(--gray-100);
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.sh-widgetpicker__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.sh-widgetpicker__card-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem 1.1rem 1.1rem;
}

.sh-widgetpicker__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.sh-widgetpicker__card-head strong {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--gray-800);
}

.sh-widgetpicker__card-desc {
  font-size: 1.3rem;
  color: var(--gray-500);
  line-height: 1.4;
}

.sh-widgetpicker__noresult {
  grid-column: 1 / -1;
  padding: 2rem;
  text-align: center;
  color: var(--gray-400);
}

/* --- Destra: pannello descrittivo --- */
.sh-widgetpicker__detail {
  flex: 0 0 410px;
  align-self: stretch;
  border-left: 1px solid var(--prune-100);
  padding: 1.7rem;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
}

.sh-widgetpicker__empty {
  margin: auto;
  text-align: center;
  color: var(--prune-300);
}

.sh-widgetpicker__empty i {
  font-size: 3.2rem;
  margin-bottom: 1rem;
  display: block;
}

.sh-widgetpicker__empty p {
  font-size: 1.4rem;
  margin: 0;
}

.sh-widgetpicker__pane-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.4rem;
}

.sh-widgetpicker__pane-icon {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 10px;
  background: var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Icone widget picker temporaneamente nascoste (vedi commento in _widget_picker.tpl):
   il "display: flex" sopra vince sull'attributo nativo [hidden], serve l'override. */
.sh-widgetpicker__pane-icon[hidden] {
  display: none;
}

.sh-widgetpicker__pane-icon .widget-icon {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2.8rem;
  color: var(--blue-900);
}

.sh-widgetpicker__pane-icon img {
  width: 70%;
  height: 70%;
  object-fit: contain;
}

.sh-widgetpicker__pane-head h3 {
  font-size: 1.9rem;
  font-weight: 700;
  margin: 0 0 0.4rem;
}

.sh-widgetpicker__pane-desc {
  font-size: 1.4rem;
  color: var(--gray-600);
  line-height: 1.5;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--prune-100);
}

.sh-widgetpicker__section {
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--prune-100);
}

.sh-widgetpicker__section h4 {
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gray-400);
  margin: 0 0 0.6rem;
}

.sh-widgetpicker__section p {
  font-size: 1.35rem;
  color: var(--gray-700);
  margin: 0;
  line-height: 1.5;
}

.sh-widgetpicker__included {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sh-widgetpicker__included li {
  position: relative;
  padding-left: 1.6rem;
  font-size: 1.35rem;
  color: var(--gray-700);
  margin-bottom: 0.4rem;
}

.sh-widgetpicker__included li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue-600);
}

.sh-widgetpicker__add {
  margin-top: 1.5rem;
  width: 100%;
}

/* Quando si apre il pannello settings (ADD WIDGET → radio.click) il picker
   si nasconde, come la griglia legacy. */
#turbo-modal.settings-open .sh-widgetpicker__head,
#turbo-modal.settings-open .sh-widgetpicker__body {
  display: none;
}

/* --- Mobile: solo le card, pannello descrittivo nascosto --- */
@media (max-width: 768px) {
  .sh-widgetpicker__detail {
    display: none;
  }

  .sh-widgetpicker__list {
    grid-template-columns: 1fr;
    padding-right: 0;
  }
}

/* =========================================================================
   PAGE PICKER — modale "Add new page" dentro SweetAlert.
   Riusa le classi .sh-widgetpicker__* (stessa resa del widget picker dei
   blocchi); qui solo gli aggiustamenti per il contesto SweetAlert e
   l'immagine di anteprima.
   ========================================================================= */
.sh-pagepicker {
  text-align: left;
}

.swal2-popup.swal2-modal.sh-pagepicker-modal.swal2-show {
  max-width: 1300px;
  width: 100% !important;
  /* Stessa ombra/angoli del widget picker: .modal-content ha border-radius:0 alla
     riga ~913, ma su desktop (@media min-width:768px, riga ~1352) viene sovrascritto
     a 3px — è QUESTO il valore realmente visibile, non 0. */
  box-shadow: 0 8px 30px 0 rgba(0, 0, 0, .06);
  border-radius: 3px;
  /* Il bottone "Close" sporge quasi interamente SOPRA il bordo del box (vedi
     .modal-close-btn sotto): basta poco spazio, solo per non far toccare la
     piccola porzione che rientra nel box all'header/searchbar sottostante.
     !important necessario: main.css:2733 forza
     `.swal2-popup { padding: 1.5em 2.5em !important; }` su tutti gli swal2. */
  padding-top: 26px !important;
}

.swal2-popup.swal2-modal #swal2-content {
  color: var(--black-color) !important;
}

/* lo SweetAlert centra il contenuto e aggiunge padding: ripristino allineamento
   e layout a due colonne. */
.swal2-popup.sh-pagepicker-modal .swal2-html-container {
  margin: 0;
  padding: 0 1.6rem 1rem;
  overflow: visible;
}

.sh-pagepicker .sh-widgetpicker__list {
  max-height: 60vh;
}

.sh-pagepicker .sh-widgetpicker__detail {
  height: 60vh;
  overflow-y: auto;
}

#swal2-content .sh-pagepicker__add {
  margin-top: auto !important;
}

/* Nota "tutte le pagine SharEvent sono già in lista": sostituisce le card
   default quando $addable_pages è vuoto, la card Custom resta comunque. */
.sh-pagepicker__all-added {
  grid-column: 1 / -1;
  padding: 24px;
  text-align: center;
}

/* Il page picker vive dentro SweetAlert2 (.swal2-content): le regole legacy
   #swal2-content/.swal2-content p (main.css, !important su font-size/line-height)
   e .swal2-content p (qui sopra, !important su color) altrimenti sovrascrivono
   la descrizione a destra, disallineandola da quella del widget picker dei
   blocchi (Turbo modal, non affetto da queste regole). Riallineo esplicitamente
   ai valori di .sh-widgetpicker__pane-desc. */
.sh-pagepicker .sh-widgetpicker__pane-desc {
  font-size: 1.4rem !important;
  line-height: 1.5 !important;
  color: var(--gray-600) !important;
}

/* Stesso problema del blocco sopra, ma per il sottotitolo dell'header
   ("Choose a page, see the preview and where it's used."): è anch'esso un <p>
   dentro .swal2-content, quindi va riallineato ai valori di
   .sh-widgetpicker__head-text p (righe ~5782). */
.sh-pagepicker .sh-widgetpicker__head-text p {
  font-size: 1.4rem !important;
  line-height: 1.5 !important;
  color: var(--prune-500) !important;
  margin: 0 !important;
}

/* Stesso testo, replicato nel placeholder "scegli una card" a destra prima
   della selezione (anch'esso un <p> dentro .swal2-content): riallineato a
   .sh-widgetpicker__empty p (righe ~5925). */
.sh-pagepicker .sh-widgetpicker__empty p {
  font-size: 1.4rem !important;
  line-height: 1.5 !important;
  color: var(--prune-300) !important;
  margin: 0 !important;
}

/* Bottone "✕ Close" in alto a destra: etichetta "a bandierina" — sporge sopra
   il bordo superiore del box, con la porzione che ricadrebbe DENTRO il box
   tagliata via con clip-path (così sembra infilata/coperta dal bordo della
   card, non semplicemente appoggiata sopra). Icona+testo restano interamente
   nella parte visibile (sopra il taglio), niente testo troncato.
   Sostituisce showCloseButton di SweetAlert2: il bottone è markup custom
   iniettato da add_page_sharevent_picker() in functions.js, con
   onclick="Swal.close()" (data-dismiss non ha effetto dentro uno Swal). Ogni
   proprietà va !important + doppia classe di specificità: dentro
   .swal2-content le regole legacy di main.css:2711/2733 e restyling.css:2573
   vincono altrimenti in silenzio (vedi picker-modal.md §3). */
.swal2-popup.sh-pagepicker-modal .modal-close-btn {
  position: absolute;
  top: -29px !important;
  right: 20px;
  z-index: 1;
  display: flex !important;
  align-items: center;
  gap: 6px;
  padding: 6px 14px 5px 14px !important;
  background: var(--prune-50);
  border: 1px solid var(--prune-200);
  border-radius: 8px 8px 0px 0;
  font-family: inherit;
  font-size: 13px !important;
  font-weight: 500;
  line-height: 13px !important;
  color: var(--gray-900) !important;
  opacity: 1;
  cursor: pointer;
}

.swal2-popup.sh-pagepicker-modal .modal-close-btn i {
  font-size: 16px;
  font-weight: bold;
}

.secondary-text-color.session_top_info {
  margin-left: 1px;
  padding: 5px 10px;
  display: inline-flex;
  margin-top: -6px;
  font-weight: 500;
  gap: 5px;
  align-items: center;
  background-color: var(--blue-100);
  border-radius: 4px;
  margin-bottom: 1rem;
}

.secondary-text-color.session_top_info span:first-of-type {
  font-weight: bold;
}

.session_top_info+.tab-content {
  margin-top: 1rem;
}

/* --- Indicatore di stato: pallino + etichetta ----------------------------
   Un solo componente per due viste che devono dire la stessa cosa: la colonna
   Periodo della lista biglietti (views/tickets/_row.tpl) e la riga di riepilogo
   in cima al biglietto (views/tickets/edit.tpl). Stava dentro liste.css finché
   serviva solo alla lista; spostato qui quando è servito anche fuori, per non
   avere due definizioni che divergono.

   Lo stato lo calcola se_ticket_period() in PHP e arriva come classe
   is-<state>. Solo is-active e is-upcoming hanno una regola: is-closed e
   is-inactive (switch spento) cadono apposta sui default grigi.

   Token di componente (pattern --task-* della cartuccia palette: i colori di un
   sottosistema stanno nel suo CSS, non sporcano le scale globali). Sette dei
   dieci hex della specifica erano già token esatti o a deltaE < 5, cioè
   identici a vista; i due che non lo erano sono qui sotto. */
.se-state {
  --period-active: var(--green-600);
  /* #16a34a — esatto */
  --period-active-text: var(--green-700);
  /* #15803d — esatto */
  --period-upcoming: var(--warning-color);
  /* #f0ad4e per #F0A63A, deltaE 7.4 su
                                                 un pallino da 7px: l'ambra di sistema
                                                 è una sola, cfr. palette.md §4 */
  --period-upcoming-text: #B45309;
  /* nessuno step vicino (il più prossimo,
                                                 orange-700, è il rosso-mattone scartato) */
  --period-closed: #A7A7A7;
  /* la palette non ha un grigio neutro:
                                                 gray-* è ardesia fredda, prune-* caldo */
  --period-muted: var(--gray-500);
  /* #64748b per #5B7285, deltaE 3.8 */

  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 500;
}

.se-state__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--period-closed);
}

.se-state.is-active .se-state__dot {
  background: var(--period-active);
}

.se-state.is-upcoming .se-state__dot {
  background: var(--period-upcoming);
}

.se-state__label {
  color: var(--period-muted);
}

.se-state.is-active .se-state__label {
  color: var(--period-active-text);
}

.se-state.is-upcoming .se-state__label {
  color: var(--period-upcoming-text);
}

.se-state__note {
  color: var(--period-muted);
  font-weight: 400;
}

/* Riga di riepilogo in cima al dettaglio di un record: stessa pill del dettaglio
   sessione (.session_top_info), con un nome generico perché non è più roba solo
   delle sessioni. Sul biglietto porta lo stato del periodo e la pubblicazione,
   in sola lettura: lo switch si accende dalla lista. */
.se-top-info {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  margin-bottom: 1rem;
  font-weight: 500;
  background-color: var(--blue-100);
  border-radius: 4px;
}

.se-top-info__sep {
  color: var(--secondary-text-color);
}

@keyframes fadeInBlock {
  0% {
    opacity: 0;
    top: 0%;
  }

  100% {
    opacity: 1;
    top: 4%;
  }
}


/***************************************************
 * Generated by SVG Artista on 10/24/2025, 11:27:01 AM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/

@keyframes ui-ui-animate-svg-stroke-1 {
  0% {
    stroke-dashoffset: 1480.2763671875px;
    stroke-dasharray: 1480.2763671875px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 1480.2763671875px;
  }
}

.ui-svg-elem-1 {
  animation: ui-animate-svg-stroke-1 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both;
}

@keyframes ui-animate-svg-stroke-2 {
  0% {
    stroke-dashoffset: 1372px;
    stroke-dasharray: 1372px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 1372px;
  }
}

.ui-svg-elem-2 {
  animation: ui-animate-svg-stroke-2 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s both;
}

@keyframes ui-animate-svg-stroke-3 {
  0% {
    stroke-dashoffset: 67.97344572538566px;
    stroke-dasharray: 67.97344572538566px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 67.97344572538566px;
  }
}

.ui-svg-elem-3 {
  animation: ui-animate-svg-stroke-3 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s both;
}

@keyframes ui-animate-svg-stroke-4 {
  0% {
    stroke-dashoffset: 146.51326206513048px;
    stroke-dasharray: 146.51326206513048px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 146.51326206513048px;
  }
}

.ui-svg-elem-4 {
  animation: ui-animate-svg-stroke-4 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s both;
}

@keyframes ui-animate-svg-stroke-5 {
  0% {
    stroke-dashoffset: 146.51326206513048px;
    stroke-dasharray: 146.51326206513048px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 146.51326206513048px;
  }
}

.ui-svg-elem-5 {
  animation: ui-animate-svg-stroke-5 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.48s both;
}

@keyframes ui-animate-svg-stroke-6 {
  0% {
    stroke-dashoffset: 146.51326206513048px;
    stroke-dasharray: 146.51326206513048px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 146.51326206513048px;
  }
}

.ui-svg-elem-6 {
  animation: ui-animate-svg-stroke-6 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s both;
}

@keyframes ui-animate-svg-stroke-7 {
  0% {
    stroke-dashoffset: 146.51326206513048px;
    stroke-dasharray: 146.51326206513048px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 146.51326206513048px;
  }
}

.ui-svg-elem-7 {
  animation: ui-animate-svg-stroke-7 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.72s both;
}

@keyframes ui-animate-svg-stroke-8 {
  0% {
    stroke-dashoffset: 536px;
    stroke-dasharray: 536px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 536px;
  }
}

.ui-svg-elem-8 {
  animation: ui-animate-svg-stroke-8 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.84s both;
}

/* ANCHOR: carousel */
.app_builder_row.carousel-custom {
  overflow: hidden;
  height: 0;
}

.carousel-custom .app_builder_form_group {
  gap: 0rem;
}

.carousel-custom .app_builder_form_group .form_group_buttons {
  width: 100%;
  display: flex;
  align-items: center;
}

.carousel-custom .app_builder_form_group .form_group_dx {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex: 1;
  gap: 10px;
}

.carousel-custom .app_builder_form_group .btn {
  margin-left: auto;
}

.carousel-custom .app_builder_form_group .form_group_item {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
}

.carousel-custom .app_builder_form_group .form_group_item.checkbox {
  flex-direction: row;
  align-items: center;
}

.carousel-custom .app_builder_form_group .form_group_item.checkbox input {
  margin: 0 0 0 0.5rem;
}

.carousel-custom footer {
  margin-top: 1rem;
  text-align: center;
}

.carousel-custom footer .add_carousel {
  border: none;
  background: transparent;
  font-size: 1.5rem;
  cursor: pointer;
}

.carousel-custom header.app_builder_form_group {
  background: var(--prune-50);
  border: none;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding: 1rem 1rem;
  margin-top: 2.5rem;
}

.carousel-custom header .interval {

  align-items: center;
  gap: 0.5rem;
  display: none;
}

.carousel-custom header #carousel_interval_seconds {
  max-width: 60px;
}

.carousel-custom section .app_builder_form_group {
  margin-bottom: 1rem;
}

.carousel_app {
  height: 100%;
}

.carousel_app .swiper {
  height: 100%;
}

.carousel_app .swiper-slide a,
.carousel_app .swiper-slide a img {
  display: block;
  height: 100%;
}

.linkcontent {
  align-items: center;
}

.linkcontent .form-check-label {
  margin: 0rem 0 0 0.35rem;
}

.tag_component {
  margin: 0 5px 7px 0;
  width: auto;
  font-weight: 400;
  padding: 6px 12px;
  border-radius: 30px;
  font-size: 14px;
  display: inline-block;
  text-align: center;
}

/* BUILDER */
.certificates .tab-pane {
  display: none;
}

.certificates .tab-pane.active {
  display: flex;
  gap: 7%;
}

.builder-wrapper {
  display: flex;
}

.builder form.form-horizontal {
  width: 100%;
}

.builder-wrapper {
  width: 100%;
  margin: 0 auto;
  display: flex;
  gap: 24px;
  align-items: flex-start;
  min-width: 0;
}

.builder .builder-wrapper__left {
  flex: 1 1 0;
  min-width: 0;
}

.builder .builder-list {
  list-style: none;
  padding: 0;
}

.builder .builder-list>li {
  position: relative;
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.builder .builder-list>li:last-child {
  margin-bottom: 0;
}

/* Position group: top + left distance side by side, like the margin widget */
.builder .edit-menu .edit-menu__item.position-row {
  align-items: center;
}

.builder .edit-menu .position-inputs {
  display: flex;
  align-items: center;
  gap: 8px;
}

.builder .edit-menu .position-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

}

.builder .edit-menu input[type="number"] {
  width: 56px;
  text-align: center;
  padding: 2px;
}

.builder .edit-menu .position-cell-label {
  font-size: 10px;
  color: var(--prune-950);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-left: 3px;
}

/* Same .position-inputs/.position-cell idiom as .edit-menu above, for use
   directly inside a .form_item (e.g. badge Width/Height) — the .edit-menu
   scoped rules don't reach there. */
.builder .form_item .position-inputs {
  display: flex;
  align-items: center;
  gap: 8px;
}

.builder .form_item .position-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.builder .form_item .position-cell-label {
  font-size: 10px;
  color: #303030;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-left: 3px;
}

.builder .form_item .position-cell input[type="number"] {
  width: 56px;
  text-align: center;
  padding: 2px;
}

.builder input[type="text"],
.builder input[type="number"] {
  border: 1px solid var(--gray-100);
  border-radius: 5px;
  height: 46px;
}

.builder input[type="text"]:focus,
.builder input[type="number"]:focus {
  outline: none;
  border-color: var(--prune-300);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05);
}

.builder .text-edit {
  display: flex;
  z-index: 1;
  position: relative;
  width: 100%;
}

.builder .text-edit .id {
  font-size: 24px;
  font-weight: bold;
  color: var(--black-color);
  line-height: 46px;
  margin-right: 1rem;
}

.builder .text-edit input {
  flex: 1;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* Le righe di testo del builder certificati sono <textarea> auto-espandenti
   (l'altezza la scrive il JS su `input`, vedi certificates.tpl): stesso aspetto
   dell'input a riga singola, ma cresce quando il testo va a capo.
   resize:none + overflow:hidden perché l'altezza la governa l'auto-grow. */
.builder .text-edit textarea {
  flex: 1;
  min-width: 0;
  min-height: 46px;
  padding: 12px;
  border: 1px solid var(--gray-100);
  border-radius: 5px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
  resize: none;
  overflow: hidden;
}

.builder .text-edit textarea:focus {
  outline: none;
  border-color: var(--prune-300);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05);
}


.builder .text-edit .edit {
  width: 32px;
  background-color: var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  cursor: pointer;
}

/* Nascondiamo la checkbox originale */

.builder .check-btn input[type="checkbox"] {
  display: none;
}

/* Stile del "pulsante" */
.builder .check-btn label {
  display: inline-block;
  border-radius: 5px;
  background-color: var(--prune-50);
  color: var(--gray-900);
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: Arial, sans-serif;
  user-select: none;
  width: 42px;
  height: 30px;
  text-align: center;
  line-height: 30px;
}

.builder h2 {
  margin-bottom: 2rem;
  font-size: 16px;
}

/* Stato hover */
.builder .check-btn label:hover {
  background-color: var(--gray-100);
}

/* Quando la checkbox è selezionata */
.builder .check-btn input[type="checkbox"]:checked+label {
  background-color: var(--black-color);
  color: var(--white-color);
}

/* 
.builder .edit-menu {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 1rem;
  position: relative;
  margin-top: -40px;

  z-index: 0;
  transition: all ease-in-out 0.3s;
}

.builder .edit-menu.active {
  margin-top: 1rem;
  transition: all ease-in-out 0.3s;
}

.builder .edit-menu .edit-menu__item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.builder .edit-menu .edit-menu__item input[type="number"] {
  font-size: 15px;
  width: 50px;
  height: 30px;

}

.builder .edit-menu label {
  font-size: 20px;
  font-weight: bold;
}

.builder .edit-menu .sp-replacer {
  height: 30px !important;
}
 */

.builder .edit-menu {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: 0;
  padding: 0rem 1rem 0rem 1rem;
  transition: all 0.3s ease-in-out;
  width: 100%;
  position: relative;
  left: 10px;

}

.builder .edit-menu.active {
  max-height: 600px;
  padding: 1rem;
  transition: all 0.3s ease-in-out;
  border-radius: 10px;

}

.edit-menu__item select {
  max-width: 100px;
  height: 30px;
  padding: 0 0px 0 3px;
}

.builder .edit-menu input[type="number"] {
  width: 48px;
  height: 30px;
}

.builder-list.config .edit-menu input[type="number"] {
  width: 56px;
}


.builder .edit-menu .edit-menu__item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 2rem;
  margin-bottom: 10px;
}

.builder .edit-menu .edit-menu__item .title {
  /* width: 100px; */
  flex: 1 0 173px;
  text-align: left;
}

.builder .form_group {
  display: flex;
  gap: 2rem;
  margin-bottom: 2rem;
}

.builder .form_group .help-block {
  margin: 0;
}

.builder .variables {
  margin-bottom: 2rem;
  display: flex;
  gap: 10px;
}

.builder .variables .icon {
  font-size: 2rem;
}

.builder .variables ul {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  list-style: none;
}

.builder .variables ul li {
  margin: 0;
}

.builder .variables ul li {
  border: none;
  background: var(--gray-100);
  font-size: 1.2rem;
  cursor: pointer;
  color: var(--gray-900);
  padding: 5px;
  position: relative;
}


.fs-sections-body .tab-pane h2 {
  font-size: 1.5rem;
}


.builder .variables ul li.copied::after {
  content: "copied!";
  position: absolute;
  right: 0;
  background-color: var(--black-color);
  color: var(--prune-50);
  padding: 2px 5px;
  border-radius: 3px;
  font-size: 0.8rem;
  animation: fadeToTop 1s ease-in-out forwards;
}


@keyframes fadeToTop {
  0% {
    opacity: 0;
    transform: translateY(0px);
  }

  50% {
    opacity: 1;
    transform: translateY(-10px);
  }

  100% {
    opacity: 0;
    transform: translateY(-10px);

  }
}

.builder .form_group .form_item {
  display: flex;
  flex-direction: column;
  border: 1.5px dashed var(--gray-200);
  padding: 2rem;
  border-radius: 5px;
  width: 100%;
}

.builder .form_group .form_item_full {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}


.builder-wrapper__right {
  flex: 1;
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  position: sticky;
  top: 165px;
  margin-top: 100px;
}

/* .builder-wrapper__right stays a plain flex:1 centering column (its width is
   the WHOLE flex-allotted space, not the card's). .has-preview-margin (Print
   tab config preview, no frame) still gets breathing room straight on it —
   just not the 100px top margin .a4/.preview-frame use below: those need
   room for a decorative frame with a -45px inset: this preview has no frame,
   so a small top margin is enough and keeps it level with the compact form. */
.builder-wrapper__right.has-preview-margin {
  margin: 24px 45px 45px;
}

/* .preview-frame is the shrink-to-fit inner wrapper around .preview (+
   .preview-back-clone for front/back): sized to its own content, not the
   flex column, so the frame/margin hug the actual card(s) — attaching them
   to the wide .builder-wrapper__right directly left a big gray box with the
   card floating off-center inside it whenever the card was narrower than the
   column (i.e. almost always). display:flex lays front+back side by side and
   still shrinks to fit both; justify-content:center on the OUTER wrapper then
   centers this whole content-sized block within the column. */
.preview-frame {
  display: flex;
  position: relative;
  flex-shrink: 1;
  min-width: 0;
  /* No top margin here: .builder-wrapper__right (parent) already contributes
     margin-top:100px — adding another 100px here (copied wholesale from the
     .a4 pattern, which overrides on the SAME element instead of stacking on
     a child) doubled the gap above the card. */
  margin: 0 45px 45px;
  /* JS (fitPreviewToColumn in new_edit.tpl) applies transform:scale() from
     here when front+back together are wider than the flex-allotted column,
     so they shrink to fit instead of overflowing into the form column. */
  transform-origin: top center;
}

.preview-frame::before {
  content: '';
  position: absolute;
  inset: -45px;
  border: 45px solid #f5f6f8;
  border-radius: 12px;
  box-sizing: border-box;
  z-index: -1;
  pointer-events: none;
}

/* Badge builder ONLY (.badges — the certificate builder shares .preview-frame
   but is deliberately left out, see below). The card(s) carry their real size
   as an inline style in px, from width_mm/height_mm; of that pair only the
   HEIGHT survives flexbox, because the width is a flex base and gets shrunk
   whenever the line is too narrow. The badge then draws narrower than its own
   aspect ratio, with nothing on screen to say so — it surfaced the moment
   "Print front and back" doubled the natural width: a 105×148 badge came out
   as roughly 105×175.

   Here overflow has a better answer: fitPreviewToColumn() in
   badges/new_edit.tpl scales the frame, shrinking box, cards and border by the
   same factor, so nothing has to give way. The certificate builder has no such
   script, so for it shrinking is still the only thing between a narrow column
   and an A4 preview bleeding into the form — leave it as it is. */
.badges .preview-frame,
.badges .preview-frame>.preview {
  flex: 0 0 auto;
}

/* ShareEvent Badge (A4): wrapper has A4 proportions, preview is 1/4 of A4 (top-left).
   `zoom` scales the whole element (visual AND layout box) so the preview shrinks
   in place when the viewport gets narrow, instead of overlapping the form column. */
.builder-wrapper__right.a4 {
  width: calc(794px * .8);
  height: calc(1123px * .8);

  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12);
  background: var(--prune-50);
  flex: 0 0 auto;
  position: sticky;
  top: 135px;
  isolation: isolate;
  /* The 45px gray frame is drawn via ::before (inset: -45px); the margin reserves
     room for it so it doesn't bleed into the form column. */
  margin: 100px 45px 45px;
  zoom: 1;
}

/* Below the breakpoints the preview shrinks proportionally. Thresholds picked from
   the natural layout cost: form (~480px) + gap (24px) + preview-with-frame (725px) ≈ 1229px. */
@media (max-width: 1600px) {
  .builder-wrapper__right.a4 {
    zoom: 0.75;
  }
}

@media (max-width: 1400px) {
  .builder-wrapper__right.a4 {
    zoom: 0.60;
  }
}

@media (max-width: 1280px) {
  .content .tabs-new {
    margin: -13px -14px 14px -14px;

  }
}

@media (max-width: 1200px) {
  .builder-wrapper__right.a4 {
    zoom: 0.48;
  }
}

@media (max-width: 1024px) {
  .builder-wrapper__right.a4 {
    zoom: 0.38;
  }

  .app-update-message {
    display: none;
  }

  .cb-md {
    flex-direction: column;
    gap: 3rem;
    align-items: flex-start;
  }

  .cb-md__list .cb-nav {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .app_builder {
    flex-direction: column;
  }
}

.builder-wrapper__right.a4::before {
  content: '';
  position: absolute;
  inset: -45px;
  border: 45px solid var(--prune-100);
  border-radius: 12px;
  box-sizing: border-box;
  z-index: -1;
  pointer-events: none;
}

.builder-wrapper__right.a4 .preview {
  width: calc(794px * .8 / 2);
  height: calc(1123px * .8 / 2);
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: none;
  border-right: 1px dashed var(--prune-200);
  border-bottom: 1px dashed var(--prune-200);
}

.builder-wrapper__right.a4 .preview-background-a4 {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(1123px * .8 / 2);
  height: calc(1123px * .8 / 2);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.builder-wrapper__right.a4 .preview-clone {
  left: calc(794px * .8 / 2);
  border-right: none;
  pointer-events: none;
}

/* Custom badge front/back: read-only live mirror of .preview, placed to its
   right via flex + margin-left (see #preview_back_clone in new_edit.tpl). */
.builder-wrapper__right .preview-back-clone {
  pointer-events: none;
}

/* Default size = A4 (210×297mm at 96dpi). This is correct for the certificate
   builder and for the ShareEvent (A4) badge, which share this component — but
   NOT for custom badges: see .badge-custom below. */
.builder-wrapper__right .preview {

  width: calc(794px * .8);
  height: calc(1123px * .8);
  background-size: contain;
  background-repeat: no-repeat;
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12);
  position: relative;
  overflow: visible;
  font-family: Arial;
  border: 1px dashed var(--prune-200);
  isolation: isolate;
}

/* Custom badge: a card, never a sheet of paper. Without this it would inherit
   the A4 default above (shared with the certificate builder) whenever the
   inline size emitted by new_edit.tpl is missing — a badge with no width_mm/
   height_mm saved, a newly duplicated one, or the front/back mirror — and the
   preview would render as an A4 page. Falls back to the same 90×55mm the
   controller uses as default (90 × 3.779528 × .8 = 272px, 55 × … = 166px).
   The real size, when set, still comes from the inline style and wins. */
.builder-wrapper__right.badge-custom .preview {
  width: 272px;
  height: 166px;
}

/* Print preview: A4 page with badge grid */
.print-preview-a4 {
  width: calc(794px * 0.5);
  height: calc(1123px * 0.5);
  /* It represents a sheet of paper: white, not the app's off-white surface. */
  background: var(--white-color);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--prune-200);
}

.print-preview-a4 .print-badge-slot {
  position: absolute;
  border: 1px solid var(--prune-200);
  background: var(--white-color);
  border-radius: 1px;
  overflow: hidden;
}

/* Elements outside the badge boundary appear faded */
.builder-wrapper__right .preview .preview__row {
  clip-path: none;
}

.builder-wrapper__right .preview .preview__row.out-of-bounds {
  opacity: 0.35;
}

.builder-wrapper__right .preview .preview-qr.out-of-bounds {
  opacity: 0.35;
}

.builder-wrapper__right .preview .preview-qr.selected {
  outline: 2px dotted var(--primary-color);
  outline-offset: 2px;
}

.builder-wrapper__right .preview .preview-strip.out-of-bounds {
  opacity: 0.35;
}

.builder-wrapper__right .preview .preview-strip.selected {
  outline: 2px dotted var(--primary-color);
  outline-offset: 2px;
}

.builder-wrapper__right .preview .logo {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
}


.builder-wrapper__right .preview .preview__row {
  position: absolute;
  width: auto;
  text-align: left;
  left: 20px;
  cursor: pointer;
  border-radius: 3px;
  padding: 2px 0;
}

.builder-wrapper__right .preview .preview__row .text_row {
  display: inline-block;
}

/* Certificati: le righe possono contenere più capoversi (campo <textarea>),
   la preview deve rispettarli come li rispetta MultiCell nel PDF. */
.builder-wrapper.certificate .preview .preview__row .text_row {
  white-space: pre-line;
}

.builder-wrapper__right .preview .preview__row.selected .text_row {
  outline: 2px dotted var(--primary-color);
  background-color: rgba(13, 110, 253, 0.04);
}

.builder-wrapper__right .preview .preview__row.marginError {
  outline: 2px dashed var(--danger-color);
}

.builder-wrapper__right .preview .preview__row.marginError::after {
  content: "Margin error";
  position: absolute;
  top: -20px;
  right: 0;
  background: var(--danger-color);
  color: var(--white-color);
  padding: 2px 5px;
  font-size: 1.5rem;
  border-radius: 3px;
}


/* CSS DA AGGIUNGERE IN RESTYLE */

#createBadgeModal .modal-content {
  /* Top a 52px (pattern picker-modal, vedi docs/cartridges/picker-modal.md §4):
     spazio per la X flottante (.turbo-modal-close, top:12/right:15, 36x36),
     ora che il title bar nativo di Bootstrap è stato tolto a favore di
     .sh-widgetpicker__head dentro il modal-body. */
  padding: 52px 2rem 2rem 2rem;
}

#createBadgeModal .modal-content,
#createBadgeModal .modal-body {
  height: auto;
}

form#createBadgeForm {
  height: auto;
}

form#createBadgeForm .form-control {
  height: 34px;
}

.certificates.badges h2,
.certificates.builder h2 {
  font-size: 2rem;
  color: var(--gray-900);
  font-weight: bold;
  padding-left: 1rem;
}

#cert--content label[for="title"],
#cert--content label[for="image_background"] {
  font-weight: bold;
}

.badge-meta-box .badge-type-info {
  text-align: right;
  color: var(--text-color);
}

.builder-list.config .text-edit .id {
  flex: 1;

}

.builder-list.config li .row-header {


  width: 100%;
  display: flex;
  align-items: center;
}

.builder-list.config li .row-header .text-edit {
  width: 100%;
  border: 1px solid var(--gray-100);
  border-radius: 5px;
  padding-left: 5px;
}

.builder-list.config li .row-header .icon {
  margin-right: 10px;
}

.builder-list.config li .row-header .text-edit .id {
  font-size: 1.2rem;
  font-weight: normal;
  color: var(--black-color);
  line-height: 46px;
}

.badge-type-choice {
  display: flex;
  gap: 1rem;
  margin-top: 0.4rem;
}

.badge-type-option {
  flex: 1;
  margin: 0;
  cursor: pointer;
}

.badge-type-option input[type="radio"] {
  position: absolute;
  opacity: 0;
}

.badge-type-card {
  display: flex;
  flex-direction: column;
  border: 2px solid var(--gray-200);
  border-radius: 10px;
  background: var(--prune-50);
  overflow: hidden;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.badge-type-thumb {
  display: block;
  background: var(--gray-100);
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.badge-type-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.badge-type-body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.7rem 0.9rem 0.8rem;
  text-align: left;
}

.badge-type-body strong {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--gray-800);
}

.badge-type-body span {
  font-size: 1.2rem;
  color: var(--gray-500);
  line-height: 1.3;
}

.badge-type-option:hover .badge-type-card {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.badge-type-option input[type="radio"]:checked+.badge-type-card {
  border-color: var(--primary-color, var(--blue-600));
}

.badge-type-option input[type="radio"]:checked+.badge-type-card .badge-type-body strong {
  color: var(--primary-color, var(--blue-600));
}

#createBadgeModal .modal-body {
  display: flex;
}

#createBadgeModal #createBadgeForm {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* .sh-widgetpicker__head porta già il suo padding/border-bottom: nessun
   padding-top aggiuntivo necessario su .modal-body. */
#createBadgeModal .form-group.footer {
  /* Spinge il bottone in fondo all'area flex scrollabile (vedi
     #createBadgeModal #createBadgeForm sopra). Un solo bottone full-width
     (.sh-widgetpicker__add, niente più "Cancel" — pattern picker-modal §4). */
  margin-top: auto;
}

/* .sh-widgetpicker__list di default ha il padding/max-height pensati per stare
   accanto a .sh-widgetpicker__detail (layout a due colonne, vedi
   docs/cartridges/picker-modal.md). Qui le card sono usate da sole, a colonna
   singola dentro un .form-group: azzero quel padding/limite scroll. */
.sh-badgepicker__list {
  padding: 0;
  margin-top: .4rem;
  max-height: none;
  overflow: visible;
}

/* Compattazione verticale: dopo aver reso il thumb 16:9 (uniformato al widget
   picker) le due card occupano più altezza; qui recupero spazio in ogni
   sezione sotto Badge Type così l'Orientation resta visibile senza scroll. */
#createBadgeModal .form-group {
  margin-bottom: 1rem;
}

#createBadgeModal .badge-format-preset {
  padding: .4rem .65rem;
}

#createBadgeModal #customBadgeOptions>div {
  margin-top: .5rem !important;
}

.badge-type-card .badge-dimensions-group {
  display: none;
  width: 100%;
  margin-top: 8px;
}

.badge-type-option input[type="radio"]:checked+.badge-type-card .badge-dimensions-group {
  display: block;
}

.badges.builder .edit-menu .position-inputs {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}


.badge-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.badge-nav .btn-group.to-update-app .btn {
  animation: none;
}

/* Print config: style form-group like edit-menu__item position-row */
.builder-wrapper.print-config .form-group {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-bottom: 1.5rem;
}

.builder-wrapper.print-config .form-group>label {
  flex: 1 0 173px;
  text-align: left;
}

.builder-wrapper.print-config .position-inputs {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}

.builder-wrapper.print-config .position-inputs.position-inputs--grid-2x2 {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 8px 12px;
  justify-content: flex-start;
}

.builder-wrapper.print-config .position-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.builder-wrapper.print-config .position-cell-label {
  font-size: 10px;
  color: var(--prune-950);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-left: 3px;
}

.builder-wrapper.print-config input[type="number"] {
  width: 56px;
  text-align: center;
  padding: 2px;
}

.builder .print-config .form_group .form_item {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: auto;
}

.print-config .builder-wrapper__right {
  justify-content: flex-start;
}

/* Print tab: narrow the form column so the A4 preview gets more space.
   The right column keeps `flex: 1` and absorbs the remaining width. */
.builder .print-config .builder-wrapper__left {
  flex: 0 1 480px;
}

.print_config_wrapper {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

/* "Page" and "Layout" now share ONE dashed card (single form_group/form_item)
   instead of one box per field group, with their h3 titles inline and their
   fields laid out in wrapping .position-inputs rows. */
.builder-wrapper.print-config .print_config_section {
  display: flex;
}

.builder-wrapper.print-config .print_config_section .form_group {
  margin-bottom: 0;
  flex: 1 1 0;
  min-width: 0;
}

.builder-wrapper.print-config .print_config_section .form_group>.form_item {
  width: 100%;
}

/* Match the Content tab's real "Badge text" title style. It's actually
   .certificates.badges h2 (2rem, bold, #333, padding-left:1rem) that applies
   there, not the more generic .builder h2 (16px) — that 16px rule gets
   overridden by the more specific .certificates.badges selector. */
/* "Columns" is a different quantity from the two Spacing fields it shares a
   row with, so it gets a wider gap: they read as two groups without having to
   split the row (which would waste vertical space in a narrow column). */
.print_config_section .position-cell.print-columns-cell {
  margin-right: 24px;
}

.builder-wrapper.print-config .form_item h3 {
  font-size: 2rem;
  color: #333;
  font-weight: bold;
  padding-left: 1rem;
  margin: 0 0 1rem 0;
}


html[data-scenarios="true"] .tableHeader {
  display: flex;
  gap: 5rem;
  align-items: center;
  flex-direction: row-reverse;
  background-color: var(--white-color);
  justify-content: space-between;
  margin-top: 1rem;
  padding: 1rem 0 0 0;
}

/* Let the table fill the standard content box (no inline-block shrink / indent) */
html[data-scenarios="true"] .table-responsive.attendee-table {
  display: block;
  width: 100%;
}


html[data-scenarios="true"] .hidden-groups-wrapper {
  display: flex;
  gap: 10px;
  flex: 1;
  border: 2px dashed var(--prune-100);
  border-radius: 5px;
  padding: 5px;
  opacity: 0;
}

html[data-scenarios="true"] button.restoreGroup {
  border: none;
  padding: 5px 7px;
  border-radius: 5px;
  font-size: 12px;
}

html[data-scenarios="true"] a.btn.btn-secondary.btn-small.collapsed {
  border: 1px solid var(--gray-200);
}

html[data-scenarios="true"] .hidden-groups-wrapper button {
  background-color: var(--prune-50);
}

html[data-scenarios="true"] .subheader {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;

  justify-content: space-between;
  gap: 6rem;
  padding: 0 2rem 0 0;
}

html[data-scenarios="true"] .subheader .search {
  flex: 1;
}

/* html[data-scenarios] .searchbar spostata in ui_elementi.css */

html[data-scenarios="true"] .bulck-actions-container {

  display: flex;
  justify-content: flex-end;
  margin-top: 0 !important;
}

html[data-scenarios="true"] .bulck-actions-container a {
  padding: 5px;
}

html[data-scenarios="true"] #elemento_bulk {
  margin: 0;
}

html[data-scenarios="true"] .tabs-new {
  display: none;
}

html[data-scenarios="true"] .content-header.scenario-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
  min-height: auto;
  margin-bottom: 1rem;
}

html[data-scenarios="true"] .scenario-header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

html[data-scenarios="true"] .scenario-header-left h1 {
  margin: 0;
  font-size: 1.5rem;
}

html[data-scenarios="true"] .scenario-count {
  font-size: 0.875rem;
  color: var(--secondary-text-color);
}

html[data-scenarios="true"] .scenario-header-right {
  width: 100%;
}

/* html[data-scenarios] .scenario-header-right .searchbar spostata in ui_elementi.css */

html[data-scenarios="true"] .scenario-totals-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}

html[data-scenarios="true"] .scenario-total-box {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.25rem;
  border-radius: 8px;
  background-color: var(--prune-50);
  border: 1px solid var(--gray-200);
  line-height: 1.2;
  min-width: 140px;
}

html[data-scenarios="true"] .scenario-total-box--icon {
  font-size: 1.6rem;
  color: var(--secondary-text-color);
}

html[data-scenarios="true"] .scenario-total-box--number {
  font-weight: 700;
  font-size: 1.5rem;
}

html[data-scenarios="true"] .scenario-total-box--title {
  color: var(--secondary-text-color);
  white-space: nowrap;
  font-size: 0.95rem;
}

html[data-scenarios="true"] .scenario-total-box.stats-box--green {
  background-color: var(--green-50);
  border-color: var(--green-100);
}

html[data-scenarios="true"] .scenario-total-box.stats-box--blue {
  background-color: var(--blue-100);
  border-color: var(--gray-300);
}

html[data-scenarios="true"] .scenario-total-box.stats-box--violet {
  background-color: var(--gray-200);
  border-color: var(--violet-100);
}

html[data-scenarios="true"] .scenario-total-box.stats-box--orange {
  background-color: var(--orange-100);
  border-color: var(--orange-200);
}

html[data-scenarios="true"] .scenario-total-box.stats-box--red {
  background-color: var(--red-100);
  border-color: var(--red-200);
}

html[data-scenarios="true"] .container-fluid {
  width: 100%;
  max-width: 100%;
}

/* html[data-scenarios] .form-group.searchbar-buttons spostata in ui_elementi.css */

/* Fullscreen mode: hide top navbar (menu), blue event info bar and main steps nav */
html.scenario-fullscreen header,
html.scenario-fullscreen #event-header,
html.scenario-fullscreen ul.steps {
  display: none !important;
}

html.scenario-fullscreen #scenario-fullscreen-toggle {
  color: var(--primary-color);
}

html.scenario-fullscreen .container-fluid:has(.page) {
  max-width: 100%;
}

html[data-scenarios="true"].scenario-fullscreen .table-responsive.attendee-table {
  display: block;
  width: 100%;
  max-height: 71vh;
}

html[data-scenarios="true"].scenario-fullscreen footer {
  display: none;
}

#turbo-modal-frame-scenario {
  display: block;
  padding-bottom: 30px;
}

.modal-body:has(#turbo-modal-frame-scenario) {
  padding-bottom: 30px;
}

.attendee-table .check-attendee .sort-indicators {
  display: none;

}

.attendee-table .sorting-header-row>th .labelth {
  display: flex;
  gap: 5px;
  align-items: flex-end;

}

.attendee-table .sorting-header-row>th .labelth .sort-indicators {
  font-size: 9px;
}

.attendee-table .sorting-header-row>th .labelth .sort-indicator {
  font-size: 9px;
}

.attendee-table .sorting-header-row>th.sortable-th {
  cursor: pointer;
}

.attendee-table .sorting-header-row>th.sortable-th .sort-indicator-idle {
  opacity: 0;
  transition: opacity .15s ease;
}

.attendee-table .sorting-header-row>th.sortable-th:hover .sort-indicator-idle {
  opacity: .35;
}

.attendee-table .sorting-header-row>th.sortable-th.is-sorted .labelth {
  font-weight: 700;
}

.attendee-table td {
  white-space: nowrap;
}

.attendee-table .table.table-se tbody>tr>td .label {
  margin: 2px 0;
  padding: 5px;
  font-size: 11px;
}

.attendee-table .table.table-se tbody>tr>td {
  font-size: 14px;
  color: var(--text-color);
  vertical-align: middle;
  padding: 0px 20px;
  height: 35px;
  border-right: 1px solid var(--prune-200);
}

.table-responsive.attendee-table {
  overflow-y: auto;
  overflow-x: auto;
  max-height: 90vh;
  display: inline-block;
  max-width: 100%;
  position: relative;
  margin-top: 1rem;
}

.wrapper-bulk {
  display: flex;
  margin: 12px 0;
}

.list-export-btn {
  border-top-left-radius: 0%;
  border-bottom-left-radius: 0%;
}

.attendee-table .table.table-se thead>tr>th:first-child {
  padding-left: 10px;
}

.attendee-table .table.table-se thead>tr>th.no-sort {
  padding: 0 20px;
}

.attendee-table button.btn.btn-default.fontSize:focus {
  outline: none;
}

.attendee-table .mainGroup button i {
  color: rgb(87, 87, 87);
}

.attendee-table .table {
  width: auto;
}

.attendee-table button.btn.btn-default.fontSize {
  min-width: 40px;
  padding: 0;
  height: 40px;
}

.attendee-table .table.table-se .btn-group-actions {
  white-space: nowrap;
  margin: 0 0 0 auto;
  height: 100%;
  display: flex;
  background: var(--prune-50);
}

.attendee-table tr:hover:not(.group-header-row) {
  background-color: var(--prune-50);
}

.attendee-table tr:hover:not(.group-header-row) td.row-number,
.attendee-table tr:hover:not(.group-header-row) td.check-attendee,
.attendee-table tr:hover:not(.group-header-row) td[data-field-name="Name"],
.attendee-table tr:hover:not(.group-header-row) td[data-field-name="Surname"],
.attendee-table tr:hover:not(.group-header-row) td.edit-attendee {
  background-color: var(--prune-50);
}


/* Fixed left "row number" column: not sortable, not editable, just a row compass */
/* Fixed left columns: only the row-number compass + the checkbox stay frozen.
   They are always the first two columns, so their offsets are stable regardless
   of which data fields the scenario shows (data columns scroll normally). */
.attendee-table td.row-number,
.attendee-table th.row-number {
  position: sticky;
  left: 0;
  z-index: 3;
  box-sizing: border-box;
  width: 50px;
  min-width: 50px;
  max-width: 50px;
  padding: 0 8px;
  background: var(--white-color);
  text-align: center;
  color: var(--secondary-text-color);
  font-size: 12px;
  font-weight: normal;
  border-right: 1px solid var(--prune-200);
}

.attendee-table th.row-number {
  z-index: 4;
}

.attendee-table td[data-field-name="Name"],
.attendee-table th[data-sort-key="name"] {
  box-sizing: border-box;
  width: 178px;
  min-width: 178px;
  max-width: 178px;
  word-wrap: break-word;
  hyphens: auto;
  white-space: normal;
  position: sticky;
  left: 126px;
  background: var(--white-color);
  overflow: hidden;
}

.attendee-table td[data-field-name="Surname"],
.attendee-table th[data-sort-key="surname"] {

  position: sticky;
  left: 246px;
  background: var(--white-color);
}

/* Le colonne frozen Name/Surname devono stare SOPRA alle colonne dati che scorrono
   (che nel DOM vengono dopo): senza z-index il chevron di ordinamento di una colonna
   passava sopra Name/Surname invece che sotto. Body sopra le celle dati (z 2),
   header sopra le intestazioni dati (z 4), in linea con row-number/checkbox. */
.attendee-table td[data-field-name="Name"],
.attendee-table td[data-field-name="Surname"] {
  z-index: 2;
}

.attendee-table th[data-sort-key="name"],
.attendee-table th[data-sort-key="surname"] {
  z-index: 4;
}

.attendee-table td.text-right.edit-attendee {
  position: sticky;
  right: -21px;
  background: var(--white-color);
  border-left: 1px solid var(--secondary-text-color);
}

.attendee-table td.check-attendee,
.attendee-table th.check-attendee {
  position: sticky;
  background: var(--white-color);
  left: 50px;
  z-index: 2;
}

.attendee-table .tag_component {
  margin: 5px;
  width: auto;
  font-weight: 400;
  padding: 5px 9px;
  border-radius: 30px;
  font-size: 12px;
  display: inline-block;
}

@media screen and (max-width:980px) {

  /* Regole searchbar carpooling (max-width:980px) spostate in ui_elementi.css */

  .content .tabs-new {
    padding: 8px 1rem;

  }
}

@media screen and (max-width: 440px) {

  /* .searchbar-container #searchbar_payment_service_provider_key (max-width:440px) spostata in ui_elementi.css */

  .content .tabs-new {
    justify-content: center;
  }

  .wrapper-list-search {
    margin: 3rem 0rem;
    padding: 3rem 0;
    box-shadow: 0px 0px 0px transparent;
  }

  .page {
    background: transparent;
    position: relative;
    box-shadow: 0px 0px 0px var(--prune-100);
  }
}

.btn-group.export-selection a {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* Testo servito nella lingua di default perche' manca la traduzione nella lingua corrente */
.se-untranslated {
  opacity: 0.3;
}

/* Contorno (orari, meta) di una riga non tradotta: parte gia' da --secondary-text-color,
   quindi serve un'opacita' piu' alta per arrivare alla stessa chiarezza del titolo */
.se-untranslated-meta {
  opacity: 0.5;
}

/* ============================================================================
   Mobile menu — components/mobile/menu.tpl
   Full admin nav (first level inc/nav.tpl + second level _nav.tpl) as one
   collapsible tree. Hidden on desktop, shown under the mobile breakpoint.
   ============================================================================ */

.mobile-menu {
  display: none;
}

@media (max-width: 992px) {


  nav.mobile-menu.mobile-menu--global ul li a {
    color: var(--black-color);
  }

  nav.mobile-menu.mobile-menu--global ul li a.is-active {
    background-color: var(--prune-100);
  }

  nav.mobile-menu.mobile-menu--global .mobile-menu__icon {
    color: var(--black-color);
  }

  /* Paint the dark bg on the list itself too: with display:flex the rows can
     have fractional heights and the container bg (var(--prune-50)) would peek through as a
     1px hairline between items. Same colour behind = no visible seam. */
  ul.mobile-menu__list.back-menu {
    background: var(--blue-900);
  }

  ul.mobile-menu__list.back-menu li,
  ul.mobile-menu__list.back-menu li a {
    background: var(--blue-900);
    color: var(--white-color);
  }

  ul.mobile-menu__list.back-menu li ul li a {
    color: var(--white-color);
  }

  .mobile-menu {
    display: block;
    background: var(--prune-50);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 16px;
  }

  .mobile-menu--global .mobile-menu__list {
    flex-direction: column-reverse;
    gap: 0px;
  }

  .mobile-menu__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0px;
  }


  .mobile-menu__link,
  .mobile-menu__summary {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 14px 16px;
    font-size: 16px;
    cursor: pointer;
    list-style: none;
    text-decoration: none;
  }

  .mobile-menu__summary::-webkit-details-marker {
    display: none;
  }

  .mobile-menu__summary::marker {
    content: "";
  }

  .mobile-menu__icon {
    width: 22px;
    text-align: center;
    font-size: 24px;
    color: var(--white-color);
  }

  .mobile-menu__label {
    flex: 1;
  }

  .mobile-menu__caret {
    transition: transform 0.2s;
    color: var(--white-color);
    font-size: 13px;
  }

  .mobile-menu__section[open]>.mobile-menu__summary .mobile-menu__caret {
    transform: rotate(180deg);
  }

  .mobile-menu__summary.is-active,
  .mobile-menu__link.is-active {
    font-weight: 600;
    color: var(--white-color);
    position: relative;

  }

  .mobile-menu__summary.is-active,
  ul.mobile-menu__list.back-menu li a.mobile-menu__link.is-active {
    background-color: var(--blue-700);
  }

  .mobile-menu__link.is-active::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    background-color: var(--white-color);
    height: 100%;
  }


  .mobile-menu__sublist {
    list-style: none;
    margin: 0;
    padding: 0 0 8px 0;

  }


  ul.mobile-menu__list .mobile-menu__sublist li a.is-active {
    background: var(--blue-700);
  }

  .mobile-menu__sublink {
    display: block;
    padding: 7px 16px 10px 18px;
    font-size: 15px;
    color: var(--text-color);
    text-decoration: none;
  }

  .mobile-menu__sublink:hover {
    background: var(--prune-50);
  }

  .mobile-menu__sublink.is-active {
    font-weight: 600;
    color: var(--primary-color);
    box-shadow: inset 3px 0 0 var(--primary-color);
    position: relative;
  }


}

/* ============================================================================
   Mobile nav drawer (left off-canvas) — holds the event section menu
   (components/mobile/menu.tpl) + the global navbar (_global_nav.tpl).
   Opened by the top-right hamburger (.navbar-toggle → #mobileNavToggle).
   Pure CSS toggle. Closed by default. Shown ≤992px.
   ============================================================================ */

.mobile-nav-cb,
.mobile-nav-overlay,
.mobile-nav-drawer {
  display: none;
}

@media (max-width: 992px) {

  /* The first-level steps nav moves into the drawer on mobile. */
  .steps {
    display: none !important;
  }

  /* Force the hamburger on (Bootstrap hides it 768–991px) and keep the global
     navbar collapsed in that range too — its links live in the drawer now. */
  .navbar .navbar-toggle {
    display: block !important;
  }

  .navbar-collapse.navbar-ex1-collapse {
    display: none !important;
  }

  .mobile-nav-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    z-index: 1090;
  }

  .mobile-nav-drawer {
    display: block;
    position: fixed;
    top: 0px;
    left: 0;
    height: 100%;
    width: 100%;
    max-width: 440px;
    background: var(--prune-50);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 1100;
    overflow-y: auto;
    box-shadow: 2px 0 14px rgba(0, 0, 0, 0.25);
    z-index: 10000;
  }

  .mobile-nav-cb:checked~.mobile-nav-overlay {
    opacity: 1;
    visibility: visible;
  }

  .mobile-nav-cb:checked~.mobile-nav-drawer {
    transform: translateX(0);
  }

  .mobile-nav-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--gray-200);
    font-weight: 600;
    font-size: 16px;
  }

  .mobile-nav-drawer__close {
    cursor: pointer;
    margin: 0;
    font-size: 22px;
    line-height: 1;
    color: var(--secondary-text-color);
  }

  /* The menus inside the drawer are always visible and flush with the panel. */
  .mobile-nav-drawer .mobile-menu {
    display: block;
    border: 0;
    border-radius: 0;
    margin: 0;
  }

  /* Global navbar sits below the section menu, separated by a thicker divider. */
  .mobile-nav-drawer .mobile-menu--global {
    border-top: 8px solid var(--gray-100);
  }
}


/* Posters (/admin/posters) e Abstracts/Documents (/admin/abstracts) — header
   categoria: titolo (.bgg) e bottoni di editing (.manage_t) sulla STESSA riga
   invece che sotto (2026-07-10). Scoped agli id delle liste per non toccare
   .bgg/.manage_t altrove. Il bg grigio della barra passa dall'<h2 .bgg> al
   wrapper __head così la barra resta a tutta larghezza coi bottoni a destra. */
#posters_categories .poster_category__head,
#abstracts_categories .abstract_category__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
  background: var(--prune-50);
  border-radius: 4px;
  padding: 6px 12px;
  margin-bottom: 10px;
}

#posters_categories .poster_category__head .bgg,
#abstracts_categories .abstract_category__head .bgg {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  background: none;
  border-radius: 0;
}

#posters_categories .poster_category__head .manage_t,
#abstracts_categories .abstract_category__head .manage_t {
  flex: 0 0 auto;
  margin: 0;
  white-space: nowrap;
}

/* Drag: cursore "mano" (grab) sulle maniglie di trascinamento invece della
   freccia (2026-07-13). Copre le maniglie standard (.se-list__drag-handle) e i
   sortable legacy (.icon-reorder / .move-icon) usati in menu, poster, abstract,
   liste drag+checkbox, tabelle .se-sortable, ecc. Durante il drag jQuery UI
   l'helper (.ui-sortable-helper) segue il cursore → grabbing. (Le righe .se-list
   draggabili hanno già grab/grabbing in liste.css.) */
.se-list__drag-handle,
.icon-reorder,
.move-icon {
  cursor: grab;
}

.se-list__drag-handle:active,
.icon-reorder:active,
.move-icon:active {
  cursor: grabbing;
}

.ui-sortable-helper,
.ui-sortable-helper * {
  cursor: grabbing !important;
}

/* ============================================================================
   RapidFire control panel (views/polls/rapidfire/control.tpl)
   ============================================================================ */

.rf-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.rf-panel-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--gray-900);
  margin: 0 0 4px;
}

.rf-panel-subtitle {
  color: var(--gray-500);
  font-size: 14px;
}

.rf-status-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.rf-status-badge::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.rf-status-badge--waiting {
  background: var(--orange-50);
  color: var(--orange-600);
}

.rf-status-badge--playing {
  background: var(--green-50);
  color: var(--green-600);
}

.rf-status-badge--finished {
  background: var(--blue-50);
  color: var(--blue-700);
}

.rf-steps {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.rf-steps-list {
  display: flex;
  align-items: center;
}

.rf-step {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--gray-400);
  font-weight: 600;
  font-size: 14px;
}

.rf-step-dot {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--gray-300);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--gray-400);
}

.rf-step.active .rf-step-dot {
  border-color: var(--blue-600);
  background: var(--blue-600);
  color: var(--prune-50);
}

.rf-step.active {
  color: var(--gray-900);
}

.rf-step.done .rf-step-dot {
  border-color: var(--green-500);
  background: var(--green-500);
  color: var(--prune-50);
}

.rf-step.done {
  color: var(--gray-600);
}

.rf-step-connector {
  width: 64px;
  height: 2px;
  background: var(--gray-200);
  margin: 0 12px;
}

.rf-steps-caption {
  color: var(--gray-500);
  font-size: 13px;
}

.rf-callout {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 20px 24px;
  border-radius: 14px;
  margin-bottom: 24px;
}

.rf-callout--waiting {
  background: var(--orange-50);
}

.rf-callout--playing {
  background: var(--green-50);
}

.rf-callout--finished {
  background: var(--blue-50);
}

.rf-callout-icon {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .7);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.rf-callout--waiting .rf-callout-icon {
  color: var(--orange-600);
}

.rf-callout--playing .rf-callout-icon {
  color: var(--green-600);
}

.rf-callout--finished .rf-callout-icon {
  color: var(--blue-700);
}

.rf-callout-body {
  flex: 1 1 260px;
}

.rf-callout-title {
  font-weight: 700;
  font-size: 17px;
  color: var(--gray-900);
  margin-bottom: 4px;
}

.rf-callout-desc {
  color: var(--gray-600);
  font-size: 14px;
}

.rf-callout-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.rf-public-links-grid {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.rf-public-link-row {
  flex: 1 1 280px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
}

.rf-ranking-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}

.rf-ranking-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
}

.rf-ranking-pos {
  flex: none;
  font-weight: 700;
  color: var(--gray-500);
  width: 2.4em;
}

.rf-ranking-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--gray-900);
}

.rf-ranking-score {
  flex: none;
  font-weight: 700;
  color: var(--gray-900);
}

.rf-public-link-icon {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-700);
}

.rf-public-link-body {
  flex: 1 1 auto;
  min-width: 0;
}

.rf-public-link-name {
  font-weight: 700;
  color: var(--gray-900);
  font-size: 14px;
}

.rf-public-link-url {
  color: var(--gray-500);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rf-public-link-actions {
  flex: none;
  display: flex;
  gap: 8px;
}

.rf-reset-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 18px 20px;
  border-radius: 12px;
  background: var(--gray-50);
  margin-top: 24px;
}

.rf-reset-section.is-active {
  background: var(--red-50);
}

.rf-reset-title {
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 2px;
}

.rf-reset-desc {
  color: var(--gray-500);
  font-size: 13px;
  max-width: 46em;
}

/* Consolle di broadcast interpretazione simultanea (views/interpretation/broadcast.tpl) */
.si-console {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.si-console-left {
  flex: 1 1 320px;
  min-width: 280px;
  max-width: 420px;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  padding: 28px 24px;
  text-align: center;
}

.si-console-right {
  flex: 2 1 480px;
  min-width: 320px;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  padding: 24px;
}

.si-console-right-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.si-console-right-header h4 {
  margin: 0;
}

.si-console-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--gray-100);
  color: var(--gray-500);
}

.si-console-badge .si-console-badge-text {
  color: inherit;
}

.si-console-badge .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gray-400);
}

.si-console-badge.is-live {
  background: var(--red-600);
  color: #fff;
}

.si-console-badge.is-live .dot {
  background: #fff;
}

.si-console-timer {
  font-size: 28px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--gray-800);
  margin-top: 12px;
}

.si-console-streams {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.si-console-stream-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  transition: background 0.15s, border-color 0.15s;
}

.si-console-stream-card.is-live {
  background: var(--green-50);
  border-color: var(--green-200);
}

.si-console-stream-card.is-error {
  background: var(--red-50);
  border-color: var(--red-200);
}

.si-console-stream-code {
  flex-shrink: 0;
  min-width: 38px;
  text-align: center;
  padding: 5px 6px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  background: var(--gray-100);
  color: var(--gray-700);
}

.si-console-stream-card.is-live .si-console-stream-code {
  background: var(--green-600);
  color: #fff;
}

.si-console-stream-info {
  flex: 1 1 auto;
  min-width: 0;
}

.si-console-stream-info strong {
  display: block;
  font-size: 14px;
  color: var(--gray-900);
}

.si-console-stream-status {
  display: block;
  font-size: 12px;
  color: var(--gray-500);
}

.si-console-stream-card.is-live .si-console-stream-status {
  color: var(--green-700);
}

.si-console-stream-card.is-error .si-console-stream-status {
  color: var(--red-700);
}

.si-console-stream-delay-wrap {
  flex: 0 0 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.si-console-stream-delay {
  width: 100%;
  height: 5px;
  border-radius: 3px;
  background: var(--gray-100);
  overflow: hidden;
}

.si-console-stream-delay-fill {
  height: 100%;
  width: 0%;
  background: var(--green-500);
  transition: width 0.3s, background 0.3s;
}

.si-console-stream-delay-label {
  font-size: 11px;
  color: var(--gray-400);
  white-space: nowrap;
}

.si-console-stream-listeners {
  flex-shrink: 0;
  min-width: 70px;
  text-align: right;
  font-size: 12px;
  color: var(--gray-500);
}

.si-console-stream-listeners strong {
  color: var(--gray-800);
  font-size: 14px;
}

.si-console-footer {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--gray-100);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: var(--gray-500);
}

@media (max-width: 900px) {
  .si-console-left {
    max-width: 100%;
  }
}

/* === Tabelle di dettaglio dello streaming ================================= *
 * views/sessions/streams/_settings.tpl e
 * views/sessions/streams/shared/_whereby_meeting_box.tpl.
 * Senza table-layout: fixed le stringhe lunghe senza spazi (il JWT dentro
 * "Host Room URL", le URL di ingest) allargano la tabella oltre il box bianco
 * del form e la pagina va in overflow orizzontale. */
.stream-settings-table {
  table-layout: fixed;
  width: 100%;
  margin-top: 2px;
}

.stream-settings-table th {
  width: 170px;
}

.stream-settings-table td {
  word-break: break-all;
}

@media (max-width: 767px) {
  .stream-settings-table th {
    width: 110px;
  }
}