.border-dashed{
    border-top:1px dashed #b6b9b9;
}
.drawn td {
    position: relative;
    overflow: hidden;
    background: #fff;
}



canvas.confetti {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 25px;
  pointer-events: none;
  z-index: 0;

 

  mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,0.6) 70%,
    rgba(0,0,0,0) 100%
  );
}

.table-hover > tbody > tr:hover > * {
    --bs-table-color-state: var(--bs-table-hover-color);
    --bs-table-bg-state: rgb(154 171 241 / 16%);
}
/* BLUE */
.confetti-blue{
  --confetti-1:#787ae0;
  --confetti-2:#0d187e;
  --confetti-3:#3a37e9;
  --confetti-4:#9ca2f7;
   background: linear-gradient(
    180deg,
    #5e9ef70f 0%,
    #3384f30a 60%,
    rgba(255,255,255,0) 100%
  );
}

/* RED */
.confetti-red{
  --confetti-1:#ff4d4d;
  --confetti-2:#ff0000;
  --confetti-3:#b30000;
  --confetti-4:#ff8080;
   background: linear-gradient(
    180deg,
    #f75e5e0f 0%,
    #f333330a 60%,
    rgba(255, 255, 255, 0) 100%
  );
}

/* GREEN */
.confetti-green{
  --confetti-1:#00c853;
  --confetti-2:#00e676;
  --confetti-3:#009624;
  --confetti-4:#69f0ae;
   background: linear-gradient(
    180deg,
    #5e9ef70f 0%,
    #3384f30a 60%,
    rgba(255,255,255,0) 100%
  );
}