/* Stepper */

  .mdl-stepper-horizontal-alternative {
    display: table;
    width: 600px;
    margin: 50px auto;
  }
  
  .mdl-stepper-horizontal-alternative .mdl-stepper-step {
    display: table-cell;
    position: relative;
    padding: 24px;
  }
  
  .mdl-stepper-horizontal-alternative .mdl-stepper-step:first-child:active {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  
  .mdl-stepper-horizontal-alternative .mdl-stepper-step:last-child:active {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  
  .mdl-stepper-horizontal-alternative .mdl-stepper-step:first-child .mdl-stepper-bar-left,
  .mdl-stepper-horizontal-alternative .mdl-stepper-step:last-child .mdl-stepper-bar-right {
    display: none;
  }
  
  .mdl-stepper-circle {
    width: 20px;
    height: 20px;
    margin: 0 auto;
    border: 2px solid #D9D9D9;
    border-radius: 50%;
    text-align: center;
    line-height: 2em;
  }
  
  
  .mdl-stepper-horizontal-alternative .mdl-stepper-step.step-done .mdl-stepper-circle *,
  .mdl-stepper-horizontal-alternative .mdl-stepper-step.editable-step .mdl-stepper-circle * {
    display: none;
  }
  
  .mdl-stepper-horizontal-alternative .mdl-stepper-step.editable-step .mdl-stepper-circle {
    -moz-transform: scaleX(-1);
    /* Gecko */
    -o-transform: scaleX(-1);
    /* Opera */
    -webkit-transform: scaleX(-1);
    /* Webkit */
    transform: scaleX(-1);
    /* Standard */
  }
  
  .mdl-stepper-horizontal-alternative .mdl-stepper-step .mdl-stepper-title {
    margin-top: 16px;
    font-weight: normal;
  }
  
  .mdl-stepper-horizontal-alternative .mdl-stepper-step .mdl-stepper-title,
  .mdl-stepper-horizontal-alternative .mdl-stepper-step .mdl-stepper-optional {
    text-align: center;
  }
  
  .mdl-stepper-horizontal-alternative .mdl-stepper-step.active-step.step-done .mdl-stepper-title,
  .mdl-stepper-horizontal-alternative .mdl-stepper-step.active-step.editable-step .mdl-stepper-title {
    font-weight: 300;
  }
  
  .mdl-stepper-horizontal-alternative .mdl-stepper-step .mdl-stepper-optional {
    font-size: 12px;
  }
  
  .mdl-stepper-horizontal-alternative .mdl-stepper-step.active-step .mdl-stepper-optional {
    color: rgba(0, 0, 0, .54);
  }
  
  .mdl-stepper-horizontal-alternative .mdl-stepper-step .mdl-stepper-bar-left,
  .mdl-stepper-horizontal-alternative .mdl-stepper-step .mdl-stepper-bar-right {
    position: absolute;
    top: 36px;
    height: 1px;
    border-top: 1px solid #BDBDBD;
  }
  
  .mdl-stepper-horizontal-alternative .mdl-stepper-step .mdl-stepper-bar-right {
    right: 0;
    left: 50%;
    margin-left: 20px;
  }
  
  .mdl-stepper-horizontal-alternative .mdl-stepper-step .mdl-stepper-bar-left {
    left: 0;
    right: 50%;
    margin-right: 20px;
  }

  @keyframes fade-in {
      0% {
          opacity: 0;
      }
      100% {
          opacity: 1;
      }
  }

  .animate-fade-in {
      animation: fade-in 0.4s ease-in-out;
  }

  .div-group:hover svg path {
    fill: #a995ee;
    stroke: white;
  }
  .div-group:hover .div-r-group, .step-div-group:hover .div-r-group {
    background-color: #a995ee;
  }
  .div-group.active-group {
    border:2px solid #542cdd;
  }
  .div-group.active-group svg path {
    fill: #542cdd;
    stroke: white;
  }
  .div-group.active-group .div-r-group {
    background-color: #542cdd;
    color: white;
  }

  /* Style sidebar Step 2 */

  .step-div-group:hover svg path {
    fill: #ee95db;
    stroke: white;
  }
  .step-div-group:hover .div-r-group {
    background-color: #ee95db;
  }
  .step-div-group.active-st-group {
    border:2px solid #dd2cb6;
  }
  .step-div-group.active-st-group svg path {
    fill: #dd2cb6;
    stroke: white;
  }
  .step-div-group.active-st-group .div-r-group {
    background-color: #dd2cb6;
    color: white;
  }

  .active-step .mdl-stepper-circle {
    border: 2px solid #542cdd;
  }
  .active-step .mdl-stepper-title {
    color: #542cdd;
  }
  .active-group, .active-st-group {
      background: #542cdd;
      color: white;
  }
  .active-group svg, .active-st-group svg{
      fill: white;
  }
  .active-yes {
      background: #542cdd;
      color: white;
  }
  .same-date {
      background: blue !important;;
  }


  /* Compress Sidebar */

  #sidebar.compress {
    width: 98px;
  }
  #sidebar.compress #compress-svg {
    display: flex;
    justify-content: center;
    padding-left: 0;
  }
  #sidebar.compress #compress-svg svg {
    rotate: 180deg;
  }
  #sidebar.compress .svg-side {
    display: block;
  }
  #sidebar.compress .text-cmp {
    display: none;
  }
  #sidebar.compress .item-sidebar a {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }

  #datepicker-custom {
    width: 100%;
  }
  #datepicker-custom .datepicker-picker {
    background-color: transparent!important;
    border: 1px solid #D7D7D7;
    border-radius: 34px!important;
    width: 100%!important;
    box-shadow: none!important;
  }
  #datepicker-custom .datepicker-picker span.cursor-pointer.day, .datepicker-picker span.focused.month, .datepicker-picker span.year.focused, .datepicker-picker span.decade.focused {
    color: #542cdd!important;
  }
  #datepicker-custom .datepicker-picker span.cursor-pointer.day:hover, .datepicker-picker span.focused.month:hover, .datepicker-picker span.year.focused:hover, .datepicker-picker span.decade.focused:hover {
    background-color: #542cdd!important;
    color: white!important;
  }
  #datepicker-custom .datepicker-picker span.cursor-pointer.day.selected {
    color: white!important;
  }
  #datepicker-custom .datepicker-picker span.day, .datepicker-picker span.disabled.month, .datepicker-picker span.disabled.year, .datepicker-picker span.disabled.decade {
    color: #6b728091;
  }
  #datepicker-custom .datepicker-picker span.disabled.month:hover, .datepicker-picker span.disabled.year:hover, .datepicker-picker span.disabled.decade:hover {
    background-color: transparent!important;
    cursor: not-allowed;
  }
  #datepicker-custom .datepicker-picker button, .datepicker-picker button svg {
    background-color: transparent!important;
    color: #542cdd!important;
    fill: #542cdd!important;
  }
  #datepicker-custom .datepicker-picker button:hover, .datepicker-picker button:hover svg {
    background-color: #542cdd!important;
    color: #fff!important;
    fill: #fff!important;
  }
  #datepicker-custom .datepicker-picker .datepicker-grid {
    width: 100%!important;
  }
  #datepicker-custom .datepicker-picker .days {
    width: 100%!important;
  }

  .loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(84 44 221 / 75%);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    align-items: center;
    color: white;
}

.spinner {
    border: 10px solid #f3f3f3;
    border-top: 10px solid #542cdd;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}


input[type="number"] {
  -moz-appearance: textfield;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px); /* Muovi verso il basso di 20px */
  }
  to {
    opacity: 1;
    transform: translateY(0); /* Torna alla posizione originale */
  }
}

.animate-fade-in {
  animation: fadeIn 0.8s ease-in-out forwards;
}
.animate-fade-in-1 {
  animation: fadeIn 1.0s ease-in-out forwards;
}
.animate-fade-in-2 {
  animation: fadeIn 1.3s ease-in-out forwards;
}


.animate-fade-up {
  animation: fadeUp 1s ease-in-out forwards;
}

.fade-up-exit {
  opacity: 1; 
  transform: translateY(0); 
  transition: opacity 0.5s ease, transform 0.5s ease; 
}

.fade-up-exit-active {
  opacity: 0; 
  transform: translateY(-20px);