.loader-container {
    width: 100%;
    height: 100%;

    background-color: rgba(0, 0, 0, 0.3);
    position: fixed;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 9999;
    display: grid;
    place-items: center !important;
}
/* .loader {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #2BAFA5;
    width: 120px;
    height: 120px;
    
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    top:40%;
    
    -webkit-animation: spin 1s infinite;
    animation: spin 1s infinite;
  } */

.loader {
    display: block;
    --height-of-loader: 7px;
    --loader-color: #6fc3b6;
    width: 330px;
    height: var(--height-of-loader);
    border-radius: 30px;
    background-color: rgba(255, 255, 255, 0.593);
    position: relative;
    z-index: 9999;
}

.loader::before {
    content: "";
    position: absolute;
    background: var(--loader-color);
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    border-radius: 30px;
    animation: moving 1s ease-in-out infinite;
}

.loader-container-small {
    width: 100%;
    height: 100%;

    background-color: rgba(0, 0, 0, 0);
    position: fixed;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 2;
}

.loader-small {
    border: 8px solid #f3f3f3;
    border-radius: 50%;
    border-top: 8px solid #2bafa5;
    width: 100%;
    height: 100%;

    -webkit-animation: spin 1s infinite; /* Safari */
    animation: spin 1s infinite;
}

/* Safari */
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}

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

/* From Uiverse.io by satyamchaudharydev */
.bar-loader {
    display: block;
    --height-of-loader: 7px;
    --loader-color: #6fc3b6;
    width: 330px;
    height: var(--height-of-loader);
    border-radius: 30px;
    background-color: rgba(255, 255, 255, 0.593);
    position: relative;
    z-index: 9999;
}

.bar-loader::before {
    content: "";
    position: absolute;
    background: var(--loader-color);
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    border-radius: 30px;
    animation: moving 1s ease-in-out infinite;
}
.loader-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: grid;
    place-items: center;
    background: rgba(29, 29, 29, 0.456);
    z-index: 99;
}

@keyframes moving {
    50% {
        width: 100%;
    }

    100% {
        width: 0;
        right: 0;
        left: unset;
    }
}

.skeleton-gjdnnl5vvii:empty {
    position: relative;
    height: 400px;
    background-color: #fefefe;
    border-radius: 2px 2px 2px 2px;
    background-image: linear-gradient(#f5f7f9 6px, transparent 0),
        linear-gradient(#f5f7f9 6px, transparent 0),
        linear-gradient(#f5f7f9 6px, transparent 0),
        linear-gradient(#f5f7f9 6px, transparent 0),
        linear-gradient(#f5f7f9 6px, transparent 0),
        radial-gradient(circle 20px at 20px 20px, #f5f7f9 99%, transparent 0);
    background-repeat: repeat-y;
    background-size: 43% 133px, 90% 133px, 74% 133px, 52px 133px, 88px 133px,
        40px 133px;
    background-position: left 12px top 111px, left 12px top 92px,
        left 12px top 73px, left 59px top 39px, left 59px top 21px,
        left 12px top 12px;
}
.skeleton-gjdnnl5vvii:empty:before {
    content: " ";
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 400px;
    -webkit-mask-image: linear-gradient(
        94deg,
        rgba(255, 255, 255, 0) 20%,
        rgba(255, 255, 255, 0.5) 50%,
        rgba(255, 255, 255, 0.5) 50%
    );
    -webkit-mask-repeat: repeat-y;
    -webkit-mask-size: 90px 400px;
    -webkit-mask-position: -20% 0;
    background-image: linear-gradient(rgba(71, 178, 169, 1) 6px, transparent 0),
        linear-gradient(rgba(71, 178, 169, 1) 6px, transparent 0),
        linear-gradient(rgba(71, 178, 169, 1) 6px, transparent 0),
        linear-gradient(rgba(71, 178, 169, 1) 6px, transparent 0),
        linear-gradient(rgba(71, 178, 169, 1) 6px, transparent 0),
        radial-gradient(
            circle 20px at 20px 20px,
            rgba(71, 178, 169, 1) 99%,
            transparent 0
        );
    background-repeat: repeat-y;
    background-size: 43% 133px, 90% 133px, 74% 133px, 52px 133px, 88px 133px,
        40px 133px;
    background-position: left 12px top 111px, left 12px top 92px,
        left 12px top 73px, left 59px top 39px, left 59px top 21px,
        left 12px top 12px;
    animation: shineForSkeleton-gjdnnl5vvii 2.4s infinite;
}
@keyframes shineForSkeleton-gjdnnl5vvii {
    to {
        -webkit-mask-position: 120% 0;
    }
}


/* From Uiverse.io by 00Kubi */ 
.cyber-checkbox {
    --checkbox-size: 24px;
    --checkbox-color: #5c67ff;
    --checkbox-check-color: #ffffff;
    --checkbox-hover-color: #4c57ef;
    --checkbox-spark-offset: -20px;
  
    position: relative;
    display: inline-block;
    cursor: pointer;
    user-select: none;
  }
  
  .cyber-checkbox input {
    display: none;
  }
  
  .cyber-checkbox__mark {
    position: relative;
    display: inline-block;
    width: var(--checkbox-size);
    height: var(--checkbox-size);
  }
  
  .cyber-checkbox__box {
    position: absolute;
    inset: 0;
    border: 2px solid var(--checkbox-color);
    border-radius: 4px;
    background: transparent;
    transition: all 0.2s ease;
  }
  
  .cyber-checkbox__check {
    position: absolute;
    inset: 0;
    padding: 2px;
    stroke: var(--checkbox-check-color);
    stroke-width: 2px;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    transform: scale(0);
    transition: transform 0.2s ease;
  }
  
  .cyber-checkbox__effects {
    position: absolute;
    inset: var(--checkbox-spark-offset);
    pointer-events: none;
  }
  
  .cyber-checkbox__spark {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 2px;
    background: var(--checkbox-color);
    border-radius: 50%;
    opacity: 0;
    transform-origin: center center;
  }
  
  /* Hover */
  .cyber-checkbox:hover .cyber-checkbox__box {
    border-color: var(--checkbox-hover-color);
    box-shadow: 0 0 0 2px rgba(92, 103, 255, 0.1);
  }
  
  /* Checked */
  .cyber-checkbox input:checked + .cyber-checkbox__mark .cyber-checkbox__box {
    background: var(--checkbox-color);
    border-color: var(--checkbox-color);
  }
  
  .cyber-checkbox input:checked + .cyber-checkbox__mark .cyber-checkbox__check {
    transform: scale(1);
  }
  
  /* Spark Animation */
  .cyber-checkbox input:checked + .cyber-checkbox__mark .cyber-checkbox__spark {
    animation: spark 0.4s ease-out;
  }
  
  .cyber-checkbox__spark:nth-child(1) {
    transform: rotate(0deg) translateX(var(--checkbox-spark-offset));
  }
  .cyber-checkbox__spark:nth-child(2) {
    transform: rotate(90deg) translateX(var(--checkbox-spark-offset));
  }
  .cyber-checkbox__spark:nth-child(3) {
    transform: rotate(180deg) translateX(var(--checkbox-spark-offset));
  }
  .cyber-checkbox__spark:nth-child(4) {
    transform: rotate(270deg) translateX(var(--checkbox-spark-offset));
  }
  
  @keyframes spark {
    0% {
      opacity: 0;
      transform: scale(0) rotate(0deg) translateX(var(--checkbox-spark-offset));
    }
    50% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      transform: scale(1) rotate(0deg)
        translateX(calc(var(--checkbox-spark-offset) * 1.5));
    }
  }
  
  /* Active */
  .cyber-checkbox:active .cyber-checkbox__box {
    transform: scale(0.9);
  }
  
  /* Focus */
  .cyber-checkbox input:focus + .cyber-checkbox__mark .cyber-checkbox__box {
    box-shadow: 0 0 0 4px rgba(92, 103, 255, 0.2);
  }
  
  .cyber-checkbox__particles {
    position: absolute;
    inset: -50%;
    pointer-events: none;
  }
  
  .cyber-checkbox__particles div {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--checkbox-color);
    opacity: 0;
  }
  
  /* Particle animations for check */
  .cyber-checkbox input:checked + .cyber-checkbox__mark .particle-1 {
    animation: particle-1 0.4s ease-out forwards;
  }
  .cyber-checkbox input:checked + .cyber-checkbox__mark .particle-2 {
    animation: particle-2 0.4s ease-out forwards 0.1s;
  }
  .cyber-checkbox input:checked + .cyber-checkbox__mark .particle-3 {
    animation: particle-3 0.4s ease-out forwards 0.15s;
  }
  .cyber-checkbox input:checked + .cyber-checkbox__mark .particle-4 {
    animation: particle-4 0.4s ease-out forwards 0.05s;
  }
  .cyber-checkbox input:checked + .cyber-checkbox__mark .particle-5 {
    animation: particle-5 0.4s ease-out forwards 0.12s;
  }
  .cyber-checkbox input:checked + .cyber-checkbox__mark .particle-6 {
    animation: particle-6 0.4s ease-out forwards 0.08s;
  }
  .cyber-checkbox input:checked + .cyber-checkbox__mark .particle-7 {
    animation: particle-7 0.4s ease-out forwards 0.18s;
  }
  .cyber-checkbox input:checked + .cyber-checkbox__mark .particle-8 {
    animation: particle-8 0.4s ease-out forwards 0.15s;
  }
  
  /* Particle animations for uncheck */
  .cyber-checkbox input:not(:checked) + .cyber-checkbox__mark .particle-1 {
    animation: particle-out-1 0.4s ease-out forwards;
  }
  .cyber-checkbox input:not(:checked) + .cyber-checkbox__mark .particle-2 {
    animation: particle-out-2 0.4s ease-out forwards 0.1s;
  }
  .cyber-checkbox input:not(:checked) + .cyber-checkbox__mark .particle-3 {
    animation: particle-out-3 0.4s ease-out forwards 0.15s;
  }
  .cyber-checkbox input:not(:checked) + .cyber-checkbox__mark .particle-4 {
    animation: particle-out-4 0.4s ease-out forwards 0.05s;
  }
  .cyber-checkbox input:not(:checked) + .cyber-checkbox__mark .particle-5 {
    animation: particle-out-5 0.4s ease-out forwards 0.12s;
  }
  .cyber-checkbox input:not(:checked) + .cyber-checkbox__mark .particle-6 {
    animation: particle-out-6 0.4s ease-out forwards 0.08s;
  }
  .cyber-checkbox input:not(:checked) + .cyber-checkbox__mark .particle-7 {
    animation: particle-out-7 0.4s ease-out forwards 0.18s;
  }
  .cyber-checkbox input:not(:checked) + .cyber-checkbox__mark .particle-8 {
    animation: particle-out-8 0.4s ease-out forwards 0.15s;
  }
  
  /* Particle keyframes for check */
  @keyframes particle-1 {
    0% {
      transform: translate(0, 0) scale(0);
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      transform: translate(-20px, -20px) scale(1);
      opacity: 0;
    }
  }
  
  @keyframes particle-2 {
    0% {
      transform: translate(0, 0) scale(0);
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      transform: translate(20px, -20px) scale(1);
      opacity: 0;
    }
  }
  
  @keyframes particle-3 {
    0% {
      transform: translate(0, 0) scale(0);
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      transform: translate(20px, 20px) scale(1);
      opacity: 0;
    }
  }
  
  @keyframes particle-4 {
    0% {
      transform: translate(0, 0) scale(0);
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      transform: translate(-20px, 20px) scale(1);
      opacity: 0;
    }
  }
  
  @keyframes particle-5 {
    0% {
      transform: translate(0, 0) scale(0);
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      transform: translate(-30px, 0px) scale(1);
      opacity: 0;
    }
  }
  
  @keyframes particle-6 {
    0% {
      transform: translate(0, 0) scale(0);
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      transform: translate(30px, 0px) scale(1);
      opacity: 0;
    }
  }
  
  @keyframes particle-7 {
    0% {
      transform: translate(0, 0) scale(0);
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      transform: translate(0px, -30px) scale(1);
      opacity: 0;
    }
  }
  
  @keyframes particle-8 {
    0% {
      transform: translate(0, 0) scale(0);
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      transform: translate(0px, 30px) scale(1);
      opacity: 0;
    }
  }
  
  /* Particle keyframes for uncheck */
  @keyframes particle-out-1 {
    0% {
      transform: translate(-20px, -20px) scale(1);
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      transform: translate(0, 0) scale(0);
      opacity: 0;
    }
  }
  
  @keyframes particle-out-2 {
    0% {
      transform: translate(20px, -20px) scale(1);
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      transform: translate(0, 0) scale(0);
      opacity: 0;
    }
  }
  
  @keyframes particle-out-3 {
    0% {
      transform: translate(20px, 20px) scale(1);
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      transform: translate(0, 0) scale(0);
      opacity: 0;
    }
  }
  
  @keyframes particle-out-4 {
    0% {
      transform: translate(-20px, 20px) scale(1);
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      transform: translate(0, 0) scale(0);
      opacity: 0;
    }
  }
  
  @keyframes particle-out-5 {
    0% {
      transform: translate(-30px, 0px) scale(1);
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      transform: translate(0, 0) scale(0);
      opacity: 0;
    }
  }
  
  @keyframes particle-out-6 {
    0% {
      transform: translate(30px, 0px) scale(1);
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      transform: translate(0, 0) scale(0);
      opacity: 0;
    }
  }
  
  @keyframes particle-out-7 {
    0% {
      transform: translate(0px, -30px) scale(1);
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      transform: translate(0, 0) scale(0);
      opacity: 0;
    }
  }
  
  @keyframes particle-out-8 {
    0% {
      transform: translate(0px, 30px) scale(1);
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      transform: translate(0, 0) scale(0);
      opacity: 0;
    }
  }
  
/* From Uiverse.io by neerajbaniwal */ 
.ui-bookmark {
    --icon-size: 24px;
    --icon-secondary-color: rgb(164, 164, 164);
    --icon-hover-color: rgb(165, 164, 164);
    --icon-primary-color: gold;
    --icon-circle-border: 1px solid var(--icon-primary-color);
    --icon-circle-size: 35px;
    --icon-anmt-duration: 0.3s;
  }
  
  .ui-bookmark input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: none;
  }
  
  .ui-bookmark .bookmark {
    width: var(--icon-size);
    height: auto;
    fill: var(--icon-secondary-color);
    cursor: pointer;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    -webkit-transform-origin: top;
    -ms-transform-origin: top;
    transform-origin: top;
  }
  
  .bookmark::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    -webkit-box-shadow: 0 30px 0 -4px var(--icon-primary-color),
      30px 0 0 -4px var(--icon-primary-color),
      0 -30px 0 -4px var(--icon-primary-color),
      -30px 0 0 -4px var(--icon-primary-color),
      -22px 22px 0 -4px var(--icon-primary-color),
      -22px -22px 0 -4px var(--icon-primary-color),
      22px -22px 0 -4px var(--icon-primary-color),
      22px 22px 0 -4px var(--icon-primary-color);
    box-shadow: 0 30px 0 -4px var(--icon-primary-color),
      30px 0 0 -4px var(--icon-primary-color),
      0 -30px 0 -4px var(--icon-primary-color),
      -30px 0 0 -4px var(--icon-primary-color),
      -22px 22px 0 -4px var(--icon-primary-color),
      -22px -22px 0 -4px var(--icon-primary-color),
      22px -22px 0 -4px var(--icon-primary-color),
      22px 22px 0 -4px var(--icon-primary-color);
    border-radius: 50%;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
  }
  
  .bookmark::before {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: var(--icon-circle-border);
    opacity: 0;
  }
  
  /* actions */
  
  .ui-bookmark:hover .bookmark {
    fill: var(--icon-hover-color);
  }
  
  .ui-bookmark input:checked + .bookmark::after {
    -webkit-animation: circles var(--icon-anmt-duration)
      cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    animation: circles var(--icon-anmt-duration)
      cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    -webkit-animation-delay: var(--icon-anmt-duration);
    animation-delay: var(--icon-anmt-duration);
  }
  
  .ui-bookmark input:checked + .bookmark {
    fill: var(--icon-primary-color);
    -webkit-animation: bookmark var(--icon-anmt-duration) forwards;
    animation: bookmark var(--icon-anmt-duration) forwards;
    -webkit-transition-delay: 0.3s;
    -o-transition-delay: 0.3s;
    transition-delay: 0.3s;
  }
  
  .ui-bookmark input:checked + .bookmark::before {
    -webkit-animation: circle var(--icon-anmt-duration)
      cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    animation: circle var(--icon-anmt-duration)
      cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    -webkit-animation-delay: var(--icon-anmt-duration);
    animation-delay: var(--icon-anmt-duration);
  }
  
  @-webkit-keyframes bookmark {
    50% {
      -webkit-transform: scaleY(0.6);
      transform: scaleY(0.6);
    }
  
    100% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
    }
  }
  
  @keyframes bookmark {
    50% {
      -webkit-transform: scaleY(0.6);
      transform: scaleY(0.6);
    }
  
    100% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
    }
  }
  
  @-webkit-keyframes circle {
    from {
      width: 0;
      height: 0;
      opacity: 0;
    }
  
    90% {
      width: var(--icon-circle-size);
      height: var(--icon-circle-size);
      opacity: 1;
    }
  
    to {
      opacity: 0;
    }
  }
  
  @keyframes circle {
    from {
      width: 0;
      height: 0;
      opacity: 0;
    }
  
    90% {
      width: var(--icon-circle-size);
      height: var(--icon-circle-size);
      opacity: 1;
    }
  
    to {
      opacity: 0;
    }
  }
  
  @-webkit-keyframes circles {
    from {
      -webkit-transform: scale(0);
      transform: scale(0);
    }
  
    40% {
      opacity: 1;
    }
  
    to {
      -webkit-transform: scale(0.8);
      transform: scale(0.8);
      opacity: 0;
    }
  }
  
  @keyframes circles {
    from {
      -webkit-transform: scale(0);
      transform: scale(0);
    }
  
    40% {
      opacity: 1;
    }
  
    to {
      -webkit-transform: scale(0.8);
      transform: scale(0.8);
      opacity: 0;
    }
  }
  

  .priority-wrap .radio-group {
    display: flex;
    flex-direction: column;
  }
  
  .priority-wrap .radio-label {
    display: flex;
    align-items: center;
    padding: 0.5em;
    margin-bottom: 0.5em;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    transition: background-color 0.2s, border-color 0.2s;
    opacity: 0.8;
  }
  
  .priority-wrap .radio-label:hover {
    background-color: #e6e6e6;
  }
  
  .priority-wrap .radio-input {
    position: absolute;
    opacity: 0;
  }
  
  .priority-wrap .radio-input:checked + .radio-label {
    background-color: #e0e4fc;
    border-color: #585ad2;
    color: #585ad2;
  }
  
  .priority-wrap .radio-input:focus + .radio-label {
    outline: 2px solid #585ad2;
  }
  
  .priority-wrap .radio-inner-circle {
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 2px solid #888;
    border-radius: 50%;
    margin-right: 0.5em;
    transition: border-color 0.2s;
    position: relative;
  }
  
  .priority-wrap  .radio-label:hover .radio-inner-circle {
    border-color: #555;
  }
  
  .priority-wrap  .radio-input:checked + .radio-label .radio-inner-circle {
    border-color: #585ad2;
  }
  
  .priority-wrap  .radio-input:checked + .radio-label .radio-inner-circle::after {
    content: '';
    display: block;
    width: 0.5em;
    height: 0.5em;
    background-color: #585ad2;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  /* new colors low */
    .priority-wrap .radio-input:checked + .radio-label.low,
    .priority-wrap  .radio-input:checked + .radio-label.low .radio-inner-circle {
        background-color: #fdf0d0;
        border-color: #b86b30;
        color: #b86b30;
    }
    .priority-wrap  .radio-input:checked + .radio-label.low .radio-inner-circle::after{
        background-color: #b86b30;
    }
    .priority-wrap .radio-input:focus + .radio-label.low {
        outline: 2px solid #b86b30;
    }
    /* high */
    .priority-wrap .radio-input:checked + .radio-label.high,
    .priority-wrap  .radio-input:checked + .radio-label.high .radio-inner-circle {
        background-color: #fdebea;
        border-color: #e57575;
        color: #e57575;
    }
    .priority-wrap  .radio-input:checked + .radio-label.high .radio-inner-circle::after{
        background-color: #e57575;
    }
    .priority-wrap .radio-input:focus + .radio-label.high {
        outline: 2px solid #e57575;
    }
    /* urgent */
    .priority-wrap .radio-input:checked + .radio-label.urgent,
    .priority-wrap  .radio-input:checked + .radio-label.urgent .radio-inner-circle {
        background-color: #fdebea;
        border-color: #f42738;
        color: #f42738;
    }
    .priority-wrap  .radio-input:checked + .radio-label.urgent .radio-inner-circle::after{
        background-color: #f42738;
    }
    .priority-wrap .radio-input:focus + .radio-label.urgent {
        outline: 2px solid #f42738;
    }