:root {
    --primary-color: rgb(28, 83, 138);
    --primary-bg-color2: rgb(0, 56, 113);
    --second-color: rgb(197, 10, 51);
    --second-color05: rgb(197 10 51 / 0.05);
    --second-color10: rgb(197 10 51 / 0.1);
    --second-color15: rgb(197 10 51 / 0.15);
    --second-color20: rgb(197 10 51 / 0.2);
    --second-color30: rgb(197 10 51 / 0.3);
    --second-color50: rgb(197 10 51 / 0.5);
    --second-colorHex: #C50A33;
    --third-color: rgb(218 237 251);
    --third-color60: rgb(218 237 251 /0.7 );
    --third-color80: rgb(218 237 251 / 0.9);
    --third-color95: rgb(218 237 251 / 0.8);
    --imgWhite: url("../img/bfi-header-logo.svg");
    --imgMobile: url("../img/bfi_logo_farbe.svg");
}


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

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

body {
}

.from-bit-purple-light {
    --tw-gradient-from: #ecf6fd var(--tw-gradient-from-position);
    --tw-gradient-to: #ecf6fd / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}


.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;
}

.btncolorBg {
    background-color: #092a4c !important;
}

.btncolor {
    color: #092a4c !important;
}

.btncolorOverview {
    background-color: #092a4c !important;
}