:root {
    --cu-green: #b4d012;
    --cu-stone: #736764;
    --cu-purple: #2E499C;
    --cu-blue: #70abc6;
    /*Light mode*/
    --light-theme-text-color: #222430;
    --light-theme-cream: rgb(233,228,222);
    --light-theme-light-cream: rgb(251,250,248);
    --light-disabled-text: rgb(144, 146, 150);
    /*Dark mode*/
    --dark-theme-text-color: #f7f7f7;
    --dark-theme-grey-1: rgb(20, 21, 23);
    --dark-theme-grey-2: rgb(26, 27, 30);
    --dark-theme-grey-3: rgb(37, 38, 43);
    --dark-theme-grey-4: rgb(55, 58, 64);
    --dark-theme-grey-5: rgb(65,65,65);
    --dark-theme-grey-6: rgb(94,94,94);
    --dark-disabled-text: rgb(144, 146, 150);
    --light-red: rgb(255, 62, 62);
    --bg-1: #eee;
    --bg-2: white;
    --hover-bg: #eee;
    /*DEFAULTS*/
    /*  --dark-body-color: #{$body-color-dark};
    --dark-body-color-rgb: #{to-rgb($body-color-dark)};
    --dark-body-bg: #{$body-bg-dark};
    --dark-body-bg-rgb: #{to-rgb($body-bg-dark)};
    --dark-emphasis-color: #{$body-emphasis-color-dark};
    --dark-emphasis-color-rgb: #{to-rgb($body-emphasis-color-dark)};
    --dark-secondary-color: #{$body-secondary-color-dark};
    --dark-secondary-color-rgb: #{to-rgb($body-secondary-color-dark)};
    --dark-secondary-bg: #{$body-secondary-bg-dark};
    --dark-secondary-bg-rgb: #{to-rgb($body-secondary-bg-dark)};
    --dark-tertiary-color: #{$body-tertiary-color-dark};
    --dark-tertiary-color-rgb: #{to-rgb($body-tertiary-color-dark)};
    --dark-tertiary-bg: #{$body-tertiary-bg-dark};
    --dark-tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
    --dark-emphasis-color: #{$emphasis-color-dark};
    --dark-primary-text: #{$primary-text-dark};
    --dark-secondary-text: #{$secondary-text-dark};
    --dark-success-text: #{$success-text-dark};
    --dark-info-text: #{$info-text-dark};
    --dark-warning-text: #{$warning-text-dark};
    --dark-danger-text: #{$danger-text-dark};
    --dark-light-text: #{$light-text-dark};
    --dark-dark-text: #{$dark-text-dark};
    --dark-primary-bg-subtle: #{$primary-bg-subtle-dark};
    --dark-secondary-bg-subtle: #{$secondary-bg-subtle-dark};
    --dark-success-bg-subtle: #{$success-bg-subtle-dark};
    --dark-info-bg-subtle: #{$info-bg-subtle-dark};
    --dark-warning-bg-subtle: #{$warning-bg-subtle-dark};
    --dark-danger-bg-subtle: #{$danger-bg-subtle-dark};
    --dark-light-bg-subtle: #{$light-bg-subtle-dark};
    --dark-dark-bg-subtle: #{$dark-bg-subtle-dark};
    --dark-primary-border-subtle: #{$primary-border-subtle-dark};
    --dark-secondary-border-subtle: #{$secondary-border-subtle-dark};
    --dark-success-border-subtle: #{$success-border-subtle-dark};
    --dark-info-border-subtle: #{$info-border-subtle-dark};
    --dark-warning-border-subtle: #{$warning-border-subtle-dark};
    --dark-danger-border-subtle: #{$danger-border-subtle-dark};
    --dark-light-border-subtle: #{$light-border-subtle-dark};
    --dark-dark-border-subtle: #{$dark-border-subtle-dark};
    --dark-heading-color: #{$headings-color-dark};
    --dark-link-color: #{$link-color-dark};
    --dark-link-hover-color: #{$link-hover-color-dark};
    --dark-link-color-rgb: #{to-rgb($link-color-dark)};
    --dark-link-hover-color-rgb: #{to-rgb($link-hover-color-dark)};
    --dark-code-color: #{$code-color-dark};
    --dark-border-color: #{$border-color-dark};
    --dark-border-color-translucent: #{$border-color-translucent-dark};*/

    --bg-0: rgb(231, 233, 235);
    --bg-1: rgb(255,255,255);
    /*--bg-2: rgb(238, 239, 240);*/
    --bg-2: rgba(238, 239, 240, 0.65);
    --bs-nav-link-color: rgb(193, 194, 197);
    --bs-btn-bg: #b4d012;
    --colour-0: #e4f586;
    --colour-1: #dff36f;
    --colour-2: #daf157;
    --colour-3: #d5ee40;
    --colour-4: #d0ec29;
    --colour-5: #b4d012;
    --colour-6: #a0b910;
    --colour-7: #8ba10e;
    --colour-8: #778a0c;
    --colour-9: #63720a;
    --colour-10: #4e5b08;
    --alert-bg: #4e5b08;
    --alert-text: #dff36f;
    --title-bg: rgb(223, 224, 227);
    --bs-form-control-bg: #fff;
    --bs-border-color: #ced4da;
    --a-text: #2E499C;
    --alert-bg: rgba(var(--colour-1), 1);
    --alert-text: black;
    --text: black;
    --text-secondary: grey;
}

[data-bs-theme="dark"] {
    --bg-0: rgb(16, 17, 19);
    --bg-1: rgb(20, 21, 23);
    --bg-2: rgb(26, 27, 30);
    --title-bg: rgb(37, 38, 43);
    --bs-heading-color: rgb(193, 194, 197);
    --bs-nav-link-color: rgb(193, 194, 197);
    --bs-form-control-bg: #25262b;
    --bs-border-color: #373A40;
    --bs-body-color: #C1C2C5;
    --a-text: rgb(var(--colour-4));
    --alert-bg: rgba(var(--colour-8), 0.2);
    --alert-text: rgb(var(--colour-0));
    --text: #C1C2C5;
    --text-secondary: rgb(144, 146, 150);
    --hover-bg: rgb(47, 48, 53);
    --bs-body-bg: var(--bg-2);
    /* CK Editor*/
    --ck-color-base-background: var(--bg-1) !important;
    --ck-color-base-foreground: var(--bg-0) !important;
    --ck-color-base-border: #333 !important;
    --ck-color-base-focus: rgb(var(--colour-4)) !important;
    --ck-color-base-text: var(--bs-body-color) !important;
    --ck-color-base-border: var(--bs-body-color) !important;
    --ck-color-button-on-color: rgb(var(--colour-4)) !important;
    --ck-color-button-on-hover-background: #444 !important;
    --ck-color-button-on-background: #444 !important;
    --ck-color-button-default-hover-background: #444 !important;
    --ck-color-button-on-active-background: #444 !important;
    --ck-color-button-default-active-background: #444 !important;
    --ck-color-split-button-hover-background: #444 !important;
    --ck-color-input-disabled-background: #444 !important;
    --ck-focus-ring: 1px solid rgb(var(--colour-4)) !important;
    --ck-focus-outer-shadow: none !important;
    --ck-color-button-action-background: var(--bs-btn-bg) !important;
    --ck-color-button-action-hover-background: var(--bs-btn-hover-bg) !important;
    --ck-color-button-action-active-background: var(--bs-btn-hover-bg) !important;
    --ck-color-focus-border: rgb(var(--colour-4)) !important;
    --ck-color-image-caption-background: var(--bg-0) !important;
    --ck-color-image-caption-text: var(--bs-body-color) !important;
}

.caption {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

    [data-bs-theme="dark"] .accordion-item {
        /*--bs-accordion-color*/
        --bs-accordion-bg: var(--bg-2);
    }

.nav {
    --bs-nav-link-color: black;
    --bs-nav-link-hover-color: rgb(var(--colour-6));
}

[data-bs-theme="dark"] .nav {
    --bs-nav-link-color: rgb(193, 194, 197);
    --bs-nav-link-hover-color: rgb(var(--colour-3));
}

[data-bs-theme="dark"] .btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #292c2e;
    --bs-btn-border-color: #343637;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #5c636a;
    --bs-btn-hover-border-color: #565e64;
    --bs-btn-focus-shadow-rgb: 130,138,145;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #565e64;
    --bs-btn-active-border-color: #51585e;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #6c757d;
    --bs-btn-disabled-border-color: #6c757d;
}

[data-colour="cu-blue"] {
    --colour-0: 249,250,251;
    --colour-1: 221,229,233;
    --colour-2: 193,211,219;
    --colour-3: 167,195,209;
    --colour-4: 140,182,201;
    --colour-5: 112,171,198;
    --colour-6: 97,155,182;
    --colour-7: 87,140,165;
    --colour-8: 83,124,143;
    --btn-text: black;
}

[data-colour="cu-cyan"] {
    --colour-0: 152,195,191;
    --colour-1: 126,190,184;
    --colour-2: 98,189,182;
    --colour-3: 67,194,184;
    --colour-4: 43,194,182;
    --colour-5: 22,194,180;
    --colour-6: 0,196,180;
    --colour-7: 18,159,147;
    --colour-8: 29,130,122;
    --btn-text: black;
}

[data-colour="cu-darkblue"], [data-bs-theme="light"][data-colour="default"] {
    --colour-0: 163,171,195;
    --colour-1: 140,151,185;
    --colour-2: 117,132,178;
    --colour-3: 94,114,175;
    --colour-4: 74,98,170;
    --colour-5: 60,85,163;
    --colour-6: 46,73,156;
    --colour-7: 49,69,133;
    --colour-8: 50,65,114;
    --btn-text: white;
    --bs-btn-hover-color: white;
}


    [data-colour="cu-darkblue"] .btn:hover, [data-bs-theme="light"][data-colour="default"] .btn:hover {
        --bs-btn-hover-color: white;
    }

[data-colour="cu-darkorange"] {
    --colour-0: 254,254,253;
    --colour-1: 240,228,221;
    --colour-2: 232,205,188;
    --colour-3: 230,181,151;
    --colour-4: 235,159,111;
    --colour-5: 250,136,65;
    --colour-6: 228,122,56;
    --colour-7: 205,110,50;
    --colour-8: 171,102,59;
    --btn-text: black;
}

[data-colour="cu-darkpink"] {
    --colour-0: 245,242,245;
    --colour-1: 228,215,226;
    --colour-2: 215,188,211;
    --colour-3: 205,161,199;
    --colour-4: 201,132,192;
    --colour-5: 202,101,188;
    --colour-6: 209,66,190;
    --colour-7: 184,64,168;
    --colour-8: 155,68,143;
    --btn-text: black;
}

[data-colour="cu-green"], [data-bs-theme="dark"][data-colour="default"] {
    --colour-0: 212,218,183;
    --colour-1: 201,209,155;
    --colour-2: 193,205,126;
    --colour-3: 188,204,96;
    --colour-4: 187,209,65;
    --colour-5: 187,213,35;
    --colour-6: 180,208,18;
    --colour-7: 153,174,29;
    --colour-8: 131,147,36;
    --btn-text: black;
}

    [data-colour="cu-green"] .btn-check:checked + .btn, [data-bs-theme="dark"][data-colour="default"] .btn-check:checked + .btn {
        --bs-btn-active-color: black;
    }

[data-colour="cu-orange"] {
    --colour-0: 254,254,253;
    --colour-1: 240,233,221;
    --colour-2: 232,215,188;
    --colour-3: 230,201,151;
    --colour-4: 235,190,111;
    --colour-5: 250,182,65;
    --colour-6: 228,165,56;
    --colour-7: 205,148,50;
    --colour-8: 171,130,59;
    --btn-text: black;
}

[data-colour="cu-red"] {
    --colour-0: 160,116,136;
    --colour-1: 155,96,122;
    --colour-2: 148,81,111;
    --colour-3: 142,66,100;
    --colour-4: 138,51,90;
    --colour-5: 135,37,81;
    --colour-6: 134,22,72;
    --colour-7: 111,30,66;
    --colour-8: 92,34,60;
    --btn-text: white;
}

[data-colour="cu-stone"] {
    --colour-0: 192,190,189;
    --colour-1: 175,172,171;
    --colour-2: 160,156,155;
    --colour-3: 147,141,139;
    --colour-4: 136,127,124;
    --colour-5: 125,114,112;
    --colour-6: 115,103,100;
    --colour-7: 102,94,91;
    --colour-8: 91,85,83;
    --btn-text: black;
}

[data-colour="cu-turquoise"] {
    --colour-0: 170,186,186;
    --colour-1: 150,174,173;
    --colour-2: 129,165,164;
    --colour-3: 109,159,157;
    --colour-4: 90,153,151;
    --colour-5: 75,146,144;
    --colour-6: 60,141,138;
    --colour-7: 61,120,117;
    --colour-8: 60,102,101;
    --btn-text: black;
}

[data-colour="cu-violet"] {
    --colour-0: 215,207,218;
    --colour-1: 198,184,203;
    --colour-2: 182,162,190;
    --colour-3: 169,140,180;
    --colour-4: 158,118,172;
    --colour-5: 149,96,168;
    --colour-6: 139,79,161;
    --colour-7: 123,77,139;
    --colour-8: 108,73,121;
    --btn-text: black;
}

.btn-primary {
    font-weight: 600;
    --bs-btn-color: var(--btn-text);
    --bs-btn-bg: rgb(var(--colour-5));
    --bs-btn-border-color: rgb(var(--colour-6));
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: rgb(var(--colour-7));
    --bs-btn-hover-border-color: rgb(var(--colour-4));
    --bs-btn-focus-shadow-rgb: 130,138,145;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: rgb(var(--colour-7));
    --bs-btn-active-border-color: rgb(var(--colour-3));
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #6c757d;
    --bs-btn-disabled-border-color: #6c757d;
}

.btn-outline-primary {
    font-weight: 600;
    --bs-btn-color: var(--pistachio);
    --bs-btn-border-color: var(--pistachio);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: rgb(var(--colour-6));
    --bs-btn-hover-border-color: rgb(var(--colour-4));
    --bs-btn-focus-shadow-rgb: 130,138,145;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: rgb(var(--colour-7));
    --bs-btn-active-border-color: rgb(var(--colour-3));
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #6c757d;
    --bs-btn-disabled-border-color: #6c757d;
}

.btn-light {
    border: none;
    font-weight: 600;
    --bs-btn-color: rgb(var(--colour-6));
    --bs-btn-bg: rgb(249, 250, 251);
    --bs-btn-hover-color: rgb(--colour-1);
    --bs-btn-hover-bg: rgba(var(--colour-5), 0.25);
    --bs-btn-focus-shadow-rgb: 130,138,145;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: rgb(var(--colour-7));
    --bs-btn-active-border-color: rgb(var(--colour-3));
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #6c757d;
    --bs-btn-disabled-border-color: #6c757d;
}

[data-bs-theme="dark"] .btn-light {
    --bs-btn-color: rgb(var(--colour-1));
    --bs-btn-bg: rgba(var(--colour-5), 0.2);
}

.btn-action {
    border: none;
    --bs-btn-padding-x: 2px;
    --bs-btn-padding-y: 2px;
    --bs-btn-color: var(--green-3);
    --bs-btn-bg: var(--bg-2);
    --bs-btn-hover-color: var(--green-3);
    --bs-btn-hover-bg: var(--bg-1);
    --bs-btn-focus-shadow-rgb: 130,138,145;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: rgb(var(--colour-7));
    --bs-btn-active-border-color: rgb(var(--colour-3));
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #6c757d;
    --bs-btn-disabled-border-color: #6c757d;
    margin: 0;
}

[data-bs-theme="dark"] .btn-action {
    --bs-btn-color: var(--pistachio);
    --bs-btn-hover-color: var(--green-2);
    --bs-btn-bg: var(--bg-0);
}