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"] .card.page {
    background: var(--bs-body-bg);
}
html[data-bs-theme="dark"] .cardHeader {
    background: var(--main-color-2);
    background: linear-gradient(45deg, var(--main-color-1) 0%, var(--main-color-2) 45%, var(--main-color-2) 55%, var(--main-color-1) 100%);
}
html[data-bs-theme="dark"] .drop-area {
    border: 2px dashed #71A9D2;
    border-radius: 10px;
    width: 100%;
    padding: 2rem;
    text-align: center;
    transition: background-color 0.3s;
}
html[data-bs-theme="dark"] .drop-area.highlight {
    background-color: #f0f0f0;
    border-color: #5d8aaa;
}
html[data-bs-theme="dark"] .drop-area-disabled {
    background: rgba(0, 0, 0, 0.1);
    border: 2px dashed #ccc;
    border-radius: 10px;
    width: 100%;
    padding: 20px;
    text-align: center;
    transition: background-color 0.3s;
}
html[data-bs-theme="dark"] .drop-area p {
    color: #71A9D2;
    font-size: 1.5rem;
}
html[data-bs-theme="dark"] #file-list {
    color: #71A9D2;
}

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

html[data-bs-theme="dark"] a.linkGradient:hover{
    color:#fff;
}
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:#fff;
}

html[data-bs-theme="dark"] .btnGradient:hover {
    background-position: 100% 100%;
    color:#fff;
}

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:#fff;
}
html[data-bs-theme="dark"] .btnGradient-subtle:hover {
    background-position: 100% 100%;
    color:#fff;
}

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

html[data-bs-theme="dark"] .actionBtn {
  background: var(--main-color-2);
  text-transform: uppercase;
  transition: all .2s linear;
  border-radius: 0.3em !important;
  font-size:.85rem;
  white-space: nowrap;
  font-weight:700;
  text-decoration:none;
}
html[data-bs-theme="dark"] .actionBtn:hover {
  background: var(--main-accent-1-50);
  color: var(--main-color-2);
}

html[data-bs-theme="dark"] .processingDataLoader {
    width: fit-content;
    margin: 0 auto;
    padding: .5rem 5rem;
    border-radius: 2rem;
    background: #71A9D2;
    background: linear-gradient(90deg, rgba(113, 169, 210, 1) 0%, rgba(185, 211, 232, 1) 39%, rgba(41, 98, 142, 1) 100%);
    color: #ffff;
}

html[data-bs-theme="dark"] .patientDropdown {
    padding: 2px 0px 0px;
    background: rgb(58, 87, 108);
}

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

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

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

html[data-bs-theme="dark"] .selectPatient .kozep, html[data-bs-theme="dark"] .selectedPatient .kozep {
    color:#fff;
}