.assess .cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  text-align: left;
  padding-bottom: 20px;
}

.assess .card {
  position: relative;
  /* max-width: 280px;*/
  background: var(--bg-card);
  padding: 20px;
  padding-top: 0px;
  border-radius: 8px;
  box-shadow: 4px 4px 8px rgba(0,0,0,0.3);
}
.assess .card_with_button {
  padding-bottom: 80px !important;
}
.assess .card_with_2_buttons {
  padding-bottom: 150px !important;
}

.assess summary {
    }

    /* Tables */
.assess .assess_select_table .table-wrapper,
.assess details .table-wrapper,
.assess .content_list_description .table-wrapper,
.assess .content_item_description .table-wrapper {
      overflow-x: auto;
    }
.assess .assess_select_table table,
.assess details table,
.assess .content_list_description table,
.assess .content_item_description table {
      width: 100%;
      border-collapse: collapse;
/*      margin: 2rem 0; */
      font-size: 16px;
      /* background: #fff; */
    }
.assess details table {
      margin: 0;
    }
.assess details th, 
.assess details td,
.assess .content_list_description th, 
.assess .content_list_description td,
.assess .content_item_description th, 
.assess .content_item_description td {
      padding: 0.75rem 1rem;
      text-align: left;
      border-bottom: 1px solid #e6e6e6;
    }
.assess .assess_select_table th, 
.assess .assess_select_table td {
      padding: 0.4rem 0rem;
      text-align: left;
    }
.assess details th,
.assess .content_list_description th,
.assess .content_item_description th {
background: var(--bg-th);
font-weight: 600;
}
.assess .assess_select_table th {
font-weight: 600;
}
.assess details tr:nth-child(even),
.assess .content_list_description tr:nth-child(even),
.assess .content_item_description tr:nth-child(even) {
background: var(--bg-tr);
}
.assess details tr:hover,
.assess .content_list_description tr:hover,
.assess .content_item_description tr:hover {
background: var(--bg-tr-hover);
}
/*
*/
.assess .generated_image img {
display: block;
margin: 1.5rem auto;
border-radius: 6px; 
box-shadow: 4px 4px 8px rgba(0,0,0,0.2);
max-width: 100%;
height: auto;
}
.assess .generated_progress img {
display: block;
border-radius: 2px; 
box-shadow: 4px 4px 8px rgba(0,0,0,0.2);
max-width: 100%;
height: auto;
}
.assess input[type=submit][disabled],
.assess .btn-primary[disabled],
.assess .btn-primary[disabled] {
background: var(--bg-button-disabled);
color: var(--text-button-disabled);
}

.assess input[type=submit],
.assess .btn-glowing,
.assess .btn-primary,
.assess .btn-secondary {
display: inline-block;
padding: 10px 20px;
text-decoration: none;
border: 0px;
border-radius: 5px;
font-size: inherit;
font-weight: 600;
letter-spacing: inherit;
margin-right: 1em;
cursor: pointer;
}

.assess .btn-secondary {
  background: var(--bg-button-secondary) !important;
  color: var(--text-button-secondary) !important;
}

.assess .btn-glowing,
.assess .btn-primary {
  background: var(--bg-button-primary) !important;
  color: var(--text-button-primary) !important;
}


.btn-glowing {
    animation: glowing 1s infinite; /* name, duration, repetition */
    /* Smooth transitions for hover effects */
    transition: background-color 0.3s ease, transform 0.3s ease;
}
@keyframes glowing {
    /* Use small rotational and positional changes for a gentle shake */
    0%, 100% {box-shadow: 0 0px 0px rgba(1, 254, 254, 1); }
    50% {box-shadow: 0 0px 30px rgba(1, 254, 254, 1); }
}

.assess .btn-glowing:hover {
  color: rgba(255, 255, 255, 1);/*SCRITTA*/
  background: rgb(17, 77, 112); /*bottone ATTIVO*/
  box-shadow: 0 0px 30px rgba(1, 254, 254, 1);/*bottone ATTIVO ALONE*/
  border-color: #ffffff; /* new - colore bordo */
  animation: none; /* Stop the continuous wobble */
  transform: scale(1.05); /* Optional: Make it pop slightly on hover */
}

.assess .button_done,
.assess .button_notlocked,
.assess .button_unlocked,
.assess .button_ongoing {
  background: var(--bg-button-secondary) !important;
}
.assess .on_bottom_div {
    position: absolute;
    bottom: 5px;
}
.assess .assess_scale_table,
.assess .assess_select_table,
.assess .assess_valuing_table,
.assess .assess_draganddrop_table {
    margin-bottom: 1em;
}
.assess .assess_scale_table td,
.assess .assess_select_table td,
.assess .assess_valuing_table td,
.assess .assess_draganddrop_table td {
    padding: 0;
    padding-right: 1em;
    padding-bottom: 0.2em;
}
.assess .assess_options_table {
    margin-top: 1em;
    margin-bottom: 2em;
}
.assess .assess_option_table {
    margin-bottom: 0;
}
.assess .assess_option_table td {
    padding-right: 0;
    padding-bottom: 0;
}
.assess .assess_testing_cell {
    background: #ddd;
/*  display: none; */    
}
.assess #fade-text {
  animation: fadeAndHide 1s ease-out 4s forwards;
  }
  @keyframes fadeAndHide {
    to {opacity: 0;}
  }
/* confetti animation*/ 
.assess #animation-text {
  transform-origin: 50% 50%;
  font-size: 60px;
  color: var(--text-primary);
  cursor: pointer;
  position: absolute;
  top: 25%;
  right: 0;
  left: 125px;
  text-align: center;
  width: 100%;
  z-index: 10;
  text-shadow: 2px 6px 3px rgba(0, 0, 0, 0.5);
}
.pop-outin {
  animation: 4s anim-popoutin ease ;
}

@keyframes anim-popoutin {
  0% {
    color: black;
    transform: scale(0.4);
    opacity: 0;
    text-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
  25% {
    color: var(--text-secondary);
    transform: scale(1.3);
    opacity: 1;
    text-shadow: 3px 10px 5px rgba(0, 0, 0, 0.5);
  }
  50% {
    color: var(--text-primary);
    transform: scale(1);
    opacity: 1;
    text-shadow: 2px 6px 3px rgba(0, 0, 0, 0.5);
  }
  100% {
    /* animate nothing to add pause at the end of animation */
    color: var(--text-primary);
    transform: scale(1);
    opacity: 1;
    text-shadow: 2px 6px 3px rgba(0, 0, 0, 0.5);
  }
}

.assess canvas {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  margin: 0;
  background-color: var(--bg-container);
}
@media screen and (max-width:480px) { /* portrait smartphones */
    .assess #animation-text {
      font-size: 32px;
    }
}
@media screen and (min-width:480px) and (max-width:720px) { /* landscape smartphones and tablets*/
    .assess #animation-text {
      font-size: 40px;
    }
}
@media screen and (min-width:1250px) {
.assess #animation-text {left: 125px; transition: left 0.8s ease;}
}
@media screen and (max-width:1250px) {
.assess #animation-text {left: 0px; transition: left 0.8s ease;}
}