html[data-bs-theme="light"]:root {
    --main-shade-1: rgba(224, 224, 252, 1); /* Light Purple/Blue */
    --main-shade-1-100: rgba(224, 224, 252, 1);
    --main-shade-1-90: rgba(224, 224, 252, .9);
    --main-shade-1-80: rgba(224, 224, 252, .8);
    --main-shade-1-70: rgba(224, 224, 252, .7);
    --main-shade-1-60: rgba(224, 224, 252, .6);
    --main-shade-1-50: rgba(224, 224, 252, .5);
    --main-shade-1-40: rgba(224, 224, 252, .4);
    --main-shade-1-30: rgba(224, 224, 252, .3);
    --main-shade-1-20: rgba(224, 224, 252, .2);
    --main-shade-1-10: rgba(224, 224, 252, .1);
    --main-shade-2: rgba(240, 244, 255, 1); /* Lighter Blue/White */
    --main-shade-2-100: rgba(240, 244, 255, 1);
    --main-shade-2-90: rgba(240, 244, 255, .9);
    --main-shade-2-80: rgba(240, 244, 255, .8);
    --main-shade-2-70: rgba(240, 244, 255, .7);
    --main-shade-2-60: rgba(240, 244, 255, .6);
    --main-shade-2-50: rgba(240, 244, 255, .5);
    --main-shade-2-40: rgba(240, 244, 255, .4);
    --main-shade-2-30: rgba(240, 244, 255, .3);
    --main-shade-2-20: rgba(240, 244, 255, .2);
    --main-shade-2-10: rgba(240, 244, 255, .1);
    --main-accent-1: rgba(255, 255, 255, 1); /* White */
    --main-accent-1-100: rgba(255, 255, 255, 1);
    --main-accent-1-90: rgba(255, 255, 255, .9);
    --main-accent-1-80: rgba(255, 255, 255, .8);
    --main-accent-1-70: rgba(255, 255, 255, .7);
    --main-accent-1-60: rgba(255, 255, 255, .6);
    --main-accent-1-50: rgba(255, 255, 255, .5);
    --main-accent-1-40: rgba(255, 255, 255, .4);
    --main-accent-1-30: rgba(255, 255, 255, .3);
    --main-accent-1-20: rgba(255, 255, 255, .2);
    --main-accent-1-10: rgba(255, 255, 255, .1);
    --main-accent-2: rgba(26, 20, 58, 1); /* Dark Purple Text */
    --main-accent-2-100: rgba(26, 20, 58, 1);
    --main-accent-2-90: rgba(26, 20, 58, .9);
    --main-accent-2-80: rgba(26, 20, 58, .8);
    --main-accent-2-70: rgba(26, 20, 58, .7);
    --main-accent-2-60: rgba(26, 20, 58, .6);
    --main-accent-2-50: rgba(26, 20, 58, .5);
    --main-accent-2-40: rgba(26, 20, 58, .4);
    --main-accent-2-30: rgba(26, 20, 58, .3);
    --main-accent-2-20: rgba(26, 20, 58, .2);
    --main-accent-2-10: rgba(26, 20, 58, .1);
}

html[data-bs-theme="light"] .card.page {
    background: #F0F4FF;
}
html[data-bs-theme="light"] .cardHeader {
    background: #7C72E8;
    border-bottom: 0px;
}
html[data-bs-theme="light"] .drop-area {
    border: 2px dashed #7C72E8;
    border-radius: 10px;
    width: 100%;
    padding: 2rem;
    text-align: center;
    transition: background-color 0.3s;
}
html[data-bs-theme="light"] .drop-area.highlight {
    background-color: #f0f0f0;
    border-color: #5d57a2;
}
html[data-bs-theme="light"] .drop-area-disabled {
    background: rgba(0, 0, 0, 0.1);
    border: 2px dashed #7C72E8;
    border-radius: 10px;
    width: 100%;
    padding: 2rem;
    text-align: center;
    transition: background-color 0.3s;
}
html[data-bs-theme="light"] .drop-area p,
html[data-bs-theme="light"] .drop-area-disabled p {
    color: #7C72E8;
    font-size: 1.5rem;
}
html[data-bs-theme="light"] #file-list {
    color: #7C72E8;
}

html[data-bs-theme="light"] .btnGradient {
    background: #7C72E8;
    background: linear-gradient(90deg, #D9D6FF 0%, #7C72E8 30%, #7C72E8 50%, #7C72E8 50%, #7C72E8 80%, #D9D6FF 100%);
    background-size: 200% 100%;
    background-position: 0% 0;
    padding: 12px 30px;
    text-transform: uppercase;
    transition: background-position 0.2s ease-in-out, color 0.2s ease-in-out;
    border-radius: 2rem !important;
    font-size:.85rem;
    white-space: nowrap;
    font-weight:700;
    text-decoration:none;
    color:#fff;
    line-height: normal;
}
html[data-bs-theme="light"] .btnGradient:hover {
    background-position: -100% 0;
}

html[data-bs-theme="light"] .btnGradientSmall {
    background: #7C72E8;
    background: linear-gradient(90deg, #D9D6FF 0%, #7C72E8 20%, #7C72E8 50%, #7C72E8 50%, #7C72E8 80%, #D9D6FF 100%);
    background-size: 200% 100%;
    background-position: 0% 0;
    padding: 12px 30px;
    text-transform: uppercase;
    transition: background-position 0.2s ease-in-out, color 0.2s ease-in-out;
    border-radius: .5rem;
    font-size: .85rem;
    white-space: nowrap;
    font-weight: 700;
    text-decoration: none;
    color: #fff;
}
html[data-bs-theme="light"] .btnGradientSmall:hover {
    background-position: -100% 0;
}


html[data-bs-theme="light"] .btnGradient-subtle {
    background: var(--main-accent-1-40);
    background: linear-gradient(45deg, var(--main-accent-1-40) 0%, var(--main-color-2) 50%, var(--main-color-2) 50%, var(--main-accent-1-40) 100%);
    background-size: 200% 100%;
    background-position: 0 100%;
    padding: 5px 10px;
    transition: all 0.3s ease-in-out;
    border: none;
    text-transform: uppercase;
    color:#fff;
}
html[data-bs-theme="light"] .btnGradient-subtle:hover {
    background-position: 100% 100%;
    color:#fff;
}
html[data-bs-theme="light"] a.linkGradient{
    color: var(--main-accent-2);
}

html[data-bs-theme="light"] a.linkGradient:hover{
    color:#fff;
}

html[data-bs-theme="light"] .mainGradient {
    background: #f0f4ff;
    background: linear-gradient(180deg, #f0f4ff 0%, #7c72e8 90%, #49428A 100%);
}

html[data-bs-theme="light"] .actionBtn {
    background: #7C72E8;
    background: linear-gradient(90deg, #D9D6FF 0%, #7C72E8 30%, #7C72E8 50%, #7C72E8 50%, #7C72E8 80%, #D9D6FF 100%);
    background-size: 200% 100%;
    background-position: 0% 0;
    text-transform: uppercase;
    transition: background-position 0.4s ease-in-out, color 0.4s ease-in-out;
    border-radius: 2rem !important;
    font-size:.85rem;
    white-space: nowrap;
    font-weight:700;
    text-decoration:none;
}
html[data-bs-theme="light"] .actionBtn:hover {
    background-position: -100% 0;
}

html[data-bs-theme="light"] .processingDataLoader {
    width: fit-content;
    margin: 0 auto;
    padding: .5rem 5rem;
    border-radius: 2rem;
    background: #7C72E8;
    background: linear-gradient(90deg, rgba(124, 114, 232, 1) 0%, rgba(217, 214, 255, 1) 0%, rgba(40, 30, 93, 1) 100%);
    color: #ffff;
}

html[data-bs-theme="light"] .modal-header{
    background:#7C72E8;
    color:#fff;
}

html[data-bs-theme="light"] .modal-header .btn-close{
    filter:invert(1);
}

html[data-bs-theme="light"] .modal-body{
    background:#D9D6FF;
}

html[data-bs-theme="light"] .modal-body:not(:has(.card-body)) {
    background:#E0E0FC;
}

html[data-bs-theme="light"] #patientModal .modal-body .card-body{
    background:#E0E0FC;
}


html[data-bs-theme="light"] #patientModal .modal-body .card-body input.form-control
html[data-bs-theme="light"] #patientModal .modal-body .card-body select.form-select{
    background:#F0F4FF;
}

html[data-bs-theme="light"] .patientDropdown {
    padding: 2px 0px 0px;
    background: rgb(224, 224, 252);
}

html[data-bs-theme="light"] .selectedPatient{
    background: linear-gradient(90deg, rgb(124, 114, 232) 0%,rgb(217, 214, 255) 100%);
    color:#fff;
}

html[data-bs-theme="light"] .selectedPatient .patientSelectUser {
    background: linear-gradient(90deg, rgb(124, 114, 232) 0%,rgb(217, 214, 255) 100%);
    padding: 2px;
}

html[data-bs-theme="light"] .selectPatient{
    background: rgb(217, 214, 255);
    color:#fff;
    padding:2px;
    margin:0 2px;
}

html[data-bs-theme="light"] .selectPatient .patientSelectUser {
    background: rgb(124, 114, 232);
    padding: 2px;
}