:root {
    
    --primary-color: rgb(151, 176, 145);
    --primary-bg-color2: rgb(239, 244, 244 );
    --second-color: rgb(71, 42, 95 );
    --second-color05: rgb(71 42 95 / 0.05);
    --second-color10: rgb(71 42 95 / 0.1);
    --second-color15: rgb(71 42 95 / 0.15);
    --second-color20: rgb(71 42 95 / 0.2);
    --second-color30: rgb(71 42 95 / 0.3);
    --second-color50: rgb(71 42 95 / 0.5);
    --second-colorHex: #6a4c82;
    --third-color: rgb(239 244 244);
    --third-color60: rgb(239 244 244 / 0.6);
    --third-color80: rgb(239 244 244 / 0.8);
    --third-color95: rgb(239 244 244 / 0.95);
    --imgWhite: url("../img/logo-light.png");
    --imgMobile: url("../img/logo-color.png");
}

[data-theme="dark"] {
    --primary-bg-: #ffffff;
    --primary-bg-color2: blue;
    --primary-color: blue;
    --second-color: red;
    --second-color10: red;
    --second-color15: red;
    --second-color20: red;
    --second-color30: red;
    --second-color50: red;
    --second-colorHex: red;
    --third-color: yellow;
    --third-color60: yellow;
    --third-color95: yellow;
}

#logoLarge {
    content: var(--imgWhite);
}

#logoMobile {
    content: var(--imgMobile);
}

body {
    
}
.bg-bit-sand {
    background-color: var(--primary-bg-color2);
}
.sidenavleft {
    background-color: var(--primary-color);
}
#informationtotalbar {
    background-color: var(--primary-color);
}

.text-bit-teal {
    color: var(--primary-color) !important;
}
.bg-bit-teal {
    background-color:  var(--primary-color) !important;
}
.border-bit-teal {
    border-color: var(--primary-color) !important;
}
.bg-bit-teal-light {
    background-color: var(--primary-color) !important;
}
.hover\:bg-bit-purple-light:hover {

}


.text-bit-purple {
    color: var(--second-color) !important;
}
.bg-bit-purple {
    background-color: var(--second-color) !important;
}
.border-bit-purple {
    border-color: var(--second-color) !important;
} 
.border-bit-purple\/5 {
    border-color: var(--second-color05) !important;
}
.border-bit-purple\/10 {
    border-color: var(--second-color10) !important;
}
.border-bit-purple\/15 {
    border-color: var(--second-color15) !important;
}
.border-bit-purple\/20 {
    border-color: var(--second-color20) !important;
}
.border-bit-purple\/30 {
    border-color: var(--second-color30) !important;
}
.bit-checkbox {
    color: var(--second-color) !important;
    accent-color: var(--second-colorHex) !important;
}

.bg-bit-sand {
    background-color: var(--third-color) !important;
}

.bg-bit-sand\/60 {
    background-color: var(--third-color60) !important;
}

.bg-bit-sand\/80 {
    background-color: var(--third-color80) !important;
}

.bg-bit-sand\/95 {
    background-color: var(--third-color95) !important;
}

.sellableItem .mdi-checkbox-blank-circle {
    color: var(--second-color) !important;
}

.CourseModule li span.mdi {
    color: var(--second-color) !important;
}
.bg-bit-purple-mid {
    background-color: var(--second-color) !important;
}
.hover\:bg-bit-sand\/60:hover {
    background-color: var(--third-color60) !important;
}
.bg-bit-purple-light {
    background-color: var(--third-color60) !important;
}

.CourseModule li.courseModulegray span.mdi {
    color: gray !important;
}