html[data-bs-theme="dark"]:root {
    --main-shade-1: rgba(33,37,41,1);
    --main-shade-1-100: rgba(33,37,41,1);
    --main-shade-1-90: rgba(33,37,41,.9);
    --main-shade-1-80: rgba(33,37,41,.8);
    --main-shade-1-70: rgba(33,37,41,.7);
    --main-shade-1-60: rgba(33,37,41,.6);
    --main-shade-1-50: rgba(33,37,41,.5);
    --main-shade-1-40: rgba(33,37,41,.4);
    --main-shade-1-30: rgba(33,37,41,.3);
    --main-shade-1-20: rgba(33,37,41,.2);
    --main-shade-1-10: rgba(33,37,41,.1);
    --main-shade-2: rgba(20,20,20,1);
    --main-shade-2-100: rgba(20,20,20,1);
    --main-shade-2-90: rgba(20,20,20,.9);
    --main-shade-2-80: rgba(20,20,20,.8);
    --main-shade-2-70: rgba(20,20,20,.7);
    --main-shade-2-60: rgba(20,20,20,.6);
    --main-shade-2-50: rgba(20,20,20,.5);
    --main-shade-2-40: rgba(20,20,20,.4);
    --main-shade-2-30: rgba(20,20,20,.3);
    --main-shade-2-20: rgba(20,20,20,.3);
    --main-shade-2-10: rgba(20,20,20,.2);
    --main-accent-1: rgba(0,0,0,1);
    --main-accent-1-100: rgba(0,0,0,1);
    --main-accent-1-90: rgba(0,0,0,.9);
    --main-accent-1-80: rgba(0,0,0,.8);
    --main-accent-1-70: rgba(0,0,0,.7);
    --main-accent-1-60: rgba(0,0,0,.6);
    --main-accent-1-50: rgba(0,0,0,.5);
    --main-accent-1-40: rgba(0,0,0,.4);
    --main-accent-1-30: rgba(0,0,0,.3);
    --main-accent-1-20: rgba(0,0,0,.2);
    --main-accent-1-10: rgba(0,0,0,.1);
    --main-accent-2: rgba(255,255,255,1);
    --main-accent-2-100: rgba(255,255,255,1);
    --main-accent-2-90: rgba(255,255,255,.9);
    --main-accent-2-80: rgba(255,255,255,.8);
    --main-accent-2-70: rgba(255,255,255,.7);
    --main-accent-2-60: rgba(255,255,255,.6);
    --main-accent-2-50: rgba(255,255,255,.5);
    --main-accent-2-40: rgba(255,255,255,.4);
    --main-accent-2-30: rgba(255,255,255,.3);
    --main-accent-2-20: rgba(255,255,255,.2);
    --main-accent-2-10: rgba(255,255,255,.1);
}
html[data-bs-theme="dark"] a.linkGradient{
    color:white;
}

html[data-bs-theme="dark"] a.linkGradient:hover{
    color:white;
}
html[data-bs-theme="dark"] .btnGradient{
    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: 12px 30px;
    transition: all 0.3s ease-in-out;
    border: none;
    text-transform: uppercase;
    color:white;
  }
  
html[data-bs-theme="dark"] .btnGradient:hover {
    background-position: 100% 100%;
    color:white;
}
  
html[data-bs-theme="dark"] .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:white;
}
html[data-bs-theme="dark"] .btnGradient-subtle:hover {
    background-position: 100% 100%;
    color:white;
  }

html[data-bs-theme="dark"] .mainGradient {
    background: #20242c;
    background: linear-gradient(180deg, #20242c 0%, #1b425c 100%);
}

html[data-bs-theme="dark"] .selectedPatient{
    background: #1b425c;
    color:white;
}

html[data-bs-theme="dark"] .selectPatient{
    background: linear-gradient(90deg, transparent 0%,rgba(98, 158, 211, 1) 100%);
    color:white;
}