.testmode {background-color: orange;}
.testmode svg, .testmode .nav-link {stroke: black; color: black;}
.testmode:before {
            margin: 3rem;
            content: "TEST MODE";
            position: absolute;

            color: orangered;
            top: -2.7rem;
            left: 9rem;
            z-index: -1;
            font-size: xx-large;
}
/* 
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay {
    background: var(--tblr-primary);
    -webkit-box-shadow: none;
    box-shadow: none;
    color: var(--tblr-primary-fg, #ffffff);
    border-color: var(--tblr-primary);
}

.flatpickr-calendar{
  
  --tblr-card-border-width: var(--tblr-border-width);
  --tblr-card-border-color: var(--tblr-border-color-translucent);
  --tblr-card-border-radius: var(--tblr-border-radius-lg);
  --tblr-card-box-shadow: var(--tblr-shadow-card);
  --tblr-card-inner-border-radius: calc(var(--tblr-border-radius-lg) - (var(--tblr-border-width)));
  --tblr-card-cap-bg: var(--tblr-bg-surface-tertiary);
  --tblr-card-cap-color: inherit;
  --tblr-card-height: ;
  --tblr-card-color: inherit;
  --tblr-card-bg: var(--tblr-bg-surface);
  --tblr-card-img-overlay-padding: 1rem;
  --tblr-card-group-margin: 1.5rem;
  color: var(--tblr-body-color);
  background-color: var(--tblr-card-bg);
  border: var(--tblr-card-border-width) solid var(--tblr-card-border-color);
  border-radius: var(--tblr-card-border-radius);
  box-shadow: var(--tblr-card-box-shadow);
}
.flatpickr-months .flatpickr-month {color: var(--tblr-primary-fg);}
.flatpickr-months .flatpickr-prev-month:hover, .flatpickr-months .flatpickr-next-month:hover {
    color: var(--tblr-primary-fg);
}
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month {
    color: var(--tblr-primary-fg);
    fill: var(--tblr-primary-fg);
    opacity: 0.9;
}

.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay, .flatpickr-day.notAllowed, .flatpickr-day.notAllowed.prevMonthDay, .flatpickr-day.notAllowed.nextMonthDay {
  opacity: 1;
} */

.invite-user-link {
    font-weight: 600;
    color: #0d6efd;
    cursor: pointer;
}

    .invite-user-link:hover {
        text-decoration: underline;
    }

.btn-disabled {
    opacity: 0.5;
    pointer-events: none;
    filter: blur(0.5px);
}

/* Modal backdrop */

.custom-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(6px);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Modal box */

.custom-modal-content {
    background-color: #ffffff;
    border-radius: 10px;
    padding: 24px;
    width: 100%;
    max-width: 480px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    animation: fadeIn 0.3s ease-out;
}

/* Header */

.custom-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

    .custom-modal-header h5 {
        margin: 0;
        font-size: 20px;
    }

    .custom-modal-header button {
        background: none;
        border: none;
        font-size: 20px;
        cursor: pointer;
    }

/* Body */

.custom-modal-body label {
    display: block;
    margin-top: 12px;
    font-weight: 600;
}

.custom-modal-body input,
.custom-modal-body textarea {
    width: 100%;
    padding: 8px;
    margin-top: 4px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
}


/* Footer */

.custom-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 20px;
}

    .custom-modal-footer a {
        padding: 8px 16px;
        border-radius: 6px;
        text-decoration: none;
        font-weight: 600;
        font-size: 14px;
        cursor: pointer;
    }

        .custom-modal-footer a:first-child {
            background-color: transparent;
            color: #555;
            border: 1px solid #ccc;
        }

        .custom-modal-footer a:last-child {
            background-color: #007bff;
            color: #fff;
            border: none;
        }

/* Animation */

@keyframes fadeIn {

    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}