:root {
    --theme-default-white: #fff;
    --theme-default-black: #000000;
    --theme-default-orange: #FF6D34;
    --theme-default-orange-hover: #fd4800;
}

/* ______________________________________________________ Bootstrap Changes ______________________________________________________ */

.page-link {
    color: #BC9BFF;
}

.active>.page-link,
.page-link.active {
    z-index: 3;
    color: var(--bs-pagination-active-color);
    background-color: #BC9BFF;
    border-color: #BC9BFF;
}

.page-link:hover {
    z-index: 2;
    color: var(--theme-default-white);
    background-color: #BC9BFF;
    border-color: #BC9BFF;
}

.page-link:focus {
    box-shadow: none;
}

/* _____________________________________________________ Form Submission Loader _____________________________________________________ */

#form-submit-loader {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.form-spinner {
    border: 8px solid #fff;
    /* Light grey */
    border-top: 8px solid #FF6D34;
    /* Blue */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
}

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

    100% {
        transform: rotate(360deg);
    }
}

/* ______________________________________________________ Datatable Responsive ______________________________________________________ */

.table-responsive .table th,
.table-responsive .table td {
    white-space: nowrap;
    /* Prevent text wrapping */
    padding-right: 50px;
}

.table-responsive .table th:last-child,
.table-responsive .table td:last-child {
    padding-right: 0px;
}

/* __________________________________________________________________________________________________________________________________ */


.default-color {
    color: var(--theme-default-orange);
}

.default-button {
    /* background-color: #BC9BFF;
    border-color: #BC9BFF;
    color: var(--theme-default-white); */
    background: linear-gradient(0deg, #21A800 0%, #70D752 100%);
    color: white;
}

/* .default-button:hover {
    background-color: #9c74ec;
    border-color: #9c74ec;
    color: var(--theme-default-white);
} */

.default-button:hover {
    color: white;
}

.default-button:active {
    background-color: #9c74ec !important;
    border-color: #9c74ec !important;
    color: var(--theme-default-white) !important;
}

.error-span {
    width: 100%;
    margin-top: .25rem;
    font-size: .875em;
    color: var(--bs-form-invalid-color);
}

.active>.page-link {
    /* background-color: #BC9BFF; */
    background-color: #21A800;
    color: white;
}

.general-image {
    margin-top: 10px;
    max-width: 200px;
    max-height: 200px;
}

.video {
    width: 25%;
}

.view-button {
    background-color: #327BB2;
    border-color: #327BB2;
    color: var(--theme-default-white);
    border-radius: 50%;
}

.view-button:hover {
    background-color: #01589b;
    border-color: #01589b;
    color: var(--theme-default-white);
}

.view-button:active {
    background-color: #01589b !important;
    border-color: #01589b !important;
    color: var(--theme-default-white) !important;
}

.edit-button {
    background-color: #21A800;
    border-color: #21A800;
    color: var(--theme-default-white);
    border-radius: 50%;
}

.edit-button:hover {
    background-color: #026203;
    border-color: #026203;
    color: var(--theme-default-white);
}

.edit-button:active {
    background-color: #026203 !important;
    border-color: #026203 !important;
    color: var(--theme-default-white) !important;
}

.delete-button {
    background-color: #EE0000;
    border-color: #EE0000;
    color: var(--theme-default-white);
    border-radius: 50%;
}

.delete-button:hover {
    background-color: #9c120d;
    border-color: #9c120d;
    color: var(--theme-default-white);
}

.delete-button:active {
    background-color: #9c120d !important;
    border-color: #9c120d !important;
    color: var(--theme-default-white) !important;
}

/* .login-button {
    --bs-btn-color: #fff;
    --bs-btn-bg: #BC9BFF;
    --bs-btn-border-color: #BC9BFF;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #aa8ae9;
    --bs-btn-hover-border-color: #BC9BFF;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #BC9BFF;
    --bs-btn-active-border-color: #BC9BFF;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #BC9BFF;
    --bs-btn-disabled-border-color: #BC9BFF;
} */

.login-button {
    background: linear-gradient(0deg, #21A800 0%, #70D752 100%);
    color: white;
}

.btn-primary {
    background: linear-gradient(0deg, #21A800 0%, #70D752 100%);
    color: white;
    border: 1px solid #6CD551;
}

.btn-primary:hover {
    border: 1px solid #6CD551;
}

.form-control,
select {
    border: 1px solid #6CD551;

}

.form-control:focus {
    box-shadow: none;
    border-color: #21A800;
}

.select2-container--default .select2-selection--multiple {
    border: 1px solid #21A800 !important;
}

.select2-container--default .select2-results>.select2-results__options {
    border: 1px solid #21A800 !important;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: #21A800 !important;
    color: white !important;
}

.select2-container--default .select2-results__option--selected {
    background-color: #21A800 !important;
    color: white !important;
}

.select2-results__option--selectable:hover {
    background-color: #21A800 !important;
    color: white !important;
}

.select2-container .select2-search--inline .select2-search__field {
    margin-top: 7px !important
}

.select2-container--default .select2-search--inline .select2-search__field {
    height: 100% !important;
}

.select2-container--default .select2-selection--multiple {
    height: 38px !important;
}