.dboard-event-date {
     width: 80px;
     height: 80px;
     padding: 2px;
     color: white;
     border-radius: 50%;
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: center;
     font-size: 1.3rem;
     box-shadow: 0 15px 15px 0px #8080802e;
     margin-right: 10px;
}

.dboard-event-date-bg-1 {
     /*background-image: linear-gradient(-45deg, rgb(18 143 107 / 71%), rgb(88 197 166 / 30%));*/
     background-image: linear-gradient(-45deg, rgb(18 143 107 / 76%), rgb(88 197 166 / 44%));
}

.dboard-event-date-bg-2 {
     background-image: linear-gradient(-45deg, rgba(69, 93, 159, 0.75), rgba(95, 88, 197, 0.28)) 
}

.dboard-event-date-bg-3 {
     /*background-image: linear-gradient(-45deg, rgb(207 203 39 / 90%), rgb(197 190 88 / 35%));*/
     background-image: linear-gradient(-45deg, rgb(201 173 0), rgb(197 190 88 / 48%))
}

.dboard-event-date-bg-4 {
     background-image: linear-gradient(-45deg, rgb(173 61 96 / 90%), rgba(197, 88, 106, 0.28));
}

.dboard-event-date div, .dboard-event-date span {
     line-height: 1.2;
}

.dboard-event-date sup {
     font-size: 1rem;
}

.dboard-btn {
  margin-left: 15px;
}

@keyframes progress {
     0% { --percentage: 0; }
     100% { --percentage: var(--prog); }
   }
   
   @property --percentage {
     syntax: '<number>';
     inherits: true;
     initial-value: 0;
   }
   
   div.prog-percent[role="progressbar"] {
     --percentage: var(--prog);
     --primary: rgba(163,23,100,0.6);
     --secondary: rgba(220, 215, 207, 0.5);
     --size: 80px;
     animation: progress 2s 0.5s forwards;
     width: var(--size);
     height: var(--size);
     border-radius: 50%;
     position: relative;
     overflow: hidden;
     display: grid;
     place-items: center;
     z-index: -1;
     /*box-shadow: 0 15px 15px 0px #8080802e, inset 0 15px 15px 0px #80808054;*/
     box-shadow: 0 15px 15px 0px #8080801f, inset 0 15px 15px 0px #8080803d;
   }

   div.prog-count[role="progressbar"] {
     --percentage: var(--prog);
     --primary: rgba(163,23,100,0.6); 
     --secondary: rgba(220, 215, 207, 0.5);
     --size: 80px;
     width: var(--size);
     height: var(--size);
     border-radius: 50%;
     position: relative;
     overflow: hidden;
     display: grid;
     place-items: center;
     z-index: -1;
     box-shadow: 0 15px 15px 0px #8080801f, inset 0 15px 15px 0px #8080803d;
     
   }
   
   div.prog-count[role="progressbar"]::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: conic-gradient(var(--primary) calc(100 * 1%), var(--secondary) 0);
     mask: radial-gradient(white 58%, transparent 0);
     mask-mode: alpha;
     -webkit-mask: radial-gradient(#0000 58%, #000 0);
     -webkit-mask-mode: alpha;
   }

   div.prog-count[role="progressbar"]::after {
     counter-reset: percentage var(--prog);
     content: counter(percentage) ' ';  
     font-size: calc(var(--size) / 4);
     text-shadow: 0 4px 5px #0000001f;
     color: var(--lgy);
   }

   div.prog-percent[role="progressbar"]::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: conic-gradient(var(--primary) calc(var(--percentage) * 1%), var(--secondary) 0);
     mask: radial-gradient(white 58%, transparent 0);
     mask-mode: alpha;
     -webkit-mask: radial-gradient(#0000 58%, #000 0);
     -webkit-mask-mode: alpha;
   }
   
   div.prog-percent[role="progressbar"]::after {
     counter-reset: percentage var(--prog);
     content: counter(percentage) '%';
     font-size: calc(var(--size) / 4);
     text-shadow: 0 5px 5px #0000001f;
   }

   div.prog-todos[role="progressbar"]  {
    --primary: rgb(141 154 187);
  }

  div.prog-db[role="progressbar"]  {
    --primary: rgb(63, 81, 181);
  }

   div.prog-budget[role="progressbar"]  {
     /*--primary: rgb(234,215,80);*/
     --primary: rgb(223,205,73);
   }

   div.c-over.prog-budget[role="progressbar"]  {
     /*--primary: rgb(234,215,80);*/
     --primary: #c75676;
   }

   div.prog-attendees[role="progressbar"]  {
     /*--primary: rgb(121,184,162);*/
     --primary: rgb(100 189 158);
   }

   .event-list {
    padding-top: 32px;
    display: flex;
    justify-content: center;
    margin-bottom: 100px;
   }

   .event-list ul {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    flex-direction: column;
   }

   .event-row {
    display: flex;
    justify-content: center;
    flex-direction: row;
    gap: 12px;
   }

   .event-row-sub {
    display: flex;
    justify-content: space-evenly;
    gap: 12px;
    width: 100%;
   }

   .event-row-li {
    padding: 15px 30px 30px 30px;
    box-shadow: 0 0 10px 0px #b8556836;
    transition: transform 0.3s ease-in-out;
   }

   .event-row-title {
     color: var(--lr);
     font-size: 1.5rem;
     font-weight: 500;
   }

   .event-row-i {
    color: var(--lr);
   }

   .event-row-i:hover {
    font-size: 1.01rem;
   }

   .dboard-item, .dboard-item-cl {
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
   }

   .dboard-item-cl:hover {
    cursor: pointer;
    }
  
  .event-title-img{
    position:relative;
    display:block;
    width: 100%;
  }

  .event-title {
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .event-title span.span-title {
    font-size: 2rem;
    font-weight: 600;
    color: var(--lr);
    cursor: pointer;
  }

  .tool-cont {
    display: flex;
    background-image: url(../../img/top_henna_faded.png);
    background-repeat: no-repeat;
    background-origin: content-box;
    background-position: center top;
    position: relative;
    z-index: -1;
    flex-direction: column;
    align-items: center;
    min-height: 650px;
  }

  .body-tool {
    position: relative;
    z-index: -3;
  }

  .main-tool {
    position: relative;
    z-index: -2;
  }

  i.td, i.gl {
    border: 1px solid transparent;
    padding: 2px;
  }

  .tool-inner {
    background-color: transparent;
    margin-bottom: 200px; /* gives space for scrolling down */
  }

  .tool-h-cont div{
    border-bottom: 1px dashed #e5e5e5;
    margin-bottom: 32px;
    padding: 3px 0 1px 0;
    color: var(--lr);
    font-size: 28px;
    font-weight: 600;
   }

   .prog-summary {
    font-size: 1.5rem;
   }

   .mob-event-view {
    display: none;
    font-size: 1.5rem;
    color: var(--lr);
   }

   .mob-event-view i {
    text-shadow: none;
   }

   .delete-event-reasons {
    display: flex;
    justify-content: center;
   }

   .delete-event-reasons li {
    list-style-type: disc;
   }

   form.form-tidy input[type="radio"] {
    height: auto;
   }

   form.form-tidy button i {
    text-shadow: none;
    margin-right: 10px;
   }

   form.form-tidy button {
    margin-bottom: 45px;
   }

   .titles-cont {
    display: grid;
    grid-template-columns: 1fr 1fr;
   }