:root {
    /* App primary color */
    --primary: #8e8aeb;

    /* Map Bootstrap theme variables to our primary */
    --bs-primary: var(--primary);
    --bs-primary-rgb: 142, 138, 235; /* rgb of #8e8eb */

    --bs-btn-border-color: #7a75e4;

    /* Links adopt primary */
    --bs-link-color: var(--primary);
    --bs-link-hover-color: #7a75e4; /* slightly darker for hover */
}

.invalid-feedback {
    display: block;
}

.fade-enter-active, .fade-leave-active {
    transition: opacity 0.3s;
}

.fade-enter-from, .fade-leave-to {
    opacity: 0;
}

.dropdown-toggle::after {
    margin-right: 5px;
}

.select2.select2-container.select2-container--default {
    display: block;
    width: 100%;
    border-radius: 500px;
    border: 1px solid #afbac7;
    background: #fbfbfb;
    color: #000000;
    font-size: 14px;
    min-height: 50px;
    padding: 10px 20px 10px;
    font-weight: 500;
    line-height: 0;
    background-origin: border-box;
    background-clip: padding-box, border-box !important;
    border: 1px solid transparent !important;
    background-image: linear-gradient(#fff, #fff), linear-gradient(278deg, rgb(102 96 240 / 70%) 0%, rgb(56 175 255 / 80%) 36%, rgb(122 80 247 / 80%) 67%, rgb(184 81 244 / 53%) 100%) !important;
}

.select2-selection.select2-selection--multiple {
    border: none !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    float: right !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    border: 12px solid #e4e4e4 !important;
    margin-left: 5px;
    margin-right: 0;
}

.main-form .form-control[type=date] {
    line-height: unset;
}

.bg-primary {
    background-color: var(--primary) !important;
}

/* Primary theme alignment and subtle UI improvements */
/* Buttons */
.btn-primary {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: #7a75e4 !important; /* slightly darker */
    border-color: #7a75e4 !important;
}

.btn-outline-primary {
    color: var(--primary) ;
    border-color: var(--primary) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    color: #fff !important;
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}

.btn:focus {
    box-shadow: 0 0 0 0.25rem rgba(142, 138, 235, 0.25) !important;
}

/* Text & links */
.text-primary {
    color: var(--primary) !important;
}

a {
    color: var(--primary);
}

a:hover {
    color: #7a75e4;
}

/* Form controls */
.form-control:focus,
.form-select:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 0.25rem rgba(142, 138, 235, 0.25) !important;
}

.form-check-input:checked {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}