:root {
    --classroom-logo: url('../media/no-logo.png');

    --classroom-primary: #187A52;
    --classroom-primary-rgb: 24, 122, 82;
    --classroom-primary-dark: #197146;
    --classroom-primary-dark-rgb: 25, 113, 70;
    --classroom-secondary: #C2372D;
    --classroom-secondary-rgb: 194, 55, 45;
    --classroom-secondary-dark: #9A4A41;
    --classroom-secondary-dark-rgb: 154, 74, 65;
    --classroom-tertiary: #1B6DA9;
    --classroom-tertiary-rgb: 27, 109, 169;
    --classroom-tertiary-dark: #206189;
    --classroom-tertiary-dark-rgb: 32, 97, 137;

    --correction-0: #f9d142;
    --correction-0-rgb: 249, 209, 66;
    --correction-1: #ffda97;
    --correction-1-rgb: 255, 218, 151;
    --correction-2: #187A52;
    --correction-2-rgb: 24, 122, 82;
    --correction-3: #197146;
    --correction-3-rgb: 25, 113, 70;
    --correction-success: var(--classroom-green);
    --correction-fail: var(--classroom-red);

    --classroom-background: #ffffff;
    --classroom-background-1: #fdfdfd;
    --classroom-text-0: #2B2B2B;
    --classroom-text-0-rgb: 43, 43, 43;
    --classroom-text-1: #565656;
    --classroom-text-1-rgb: 86, 86, 86;
    --classroom-text-2: #666;
    --classroom-text-2-rgb: 102, 102, 102;

    --classroom-shadow-1: rgba(0, 0, 0, 0.2);
    --classroom-cell: #e3e3e3;
    --classroom-cell-rgb: 227, 227, 227;

    --classroom-white: #FFFFFF;
    --classroom-black: #2B2B2B;
    --classroom-grey: #757575;
    --classroom-grey-rgb: 117, 117, 117;
    --classroom-grey-dark: #5A5A5A;
    --classroom-grey-dark-rgb: 90, 90, 90;
    --classroom-green: #187A52;
    --classroom-green-rgb: 24, 122, 82;
    --classroom-red: #C2372D;
    --classroom-red-rgb: 194, 55, 45;
    --classroom-red-dark: #9A4A41;
    --classroom-red-dark-rgb: 154, 74, 65;
    --classroom-blue: #1B6DA9;
    --classroom-blue-rgb: 27, 109, 169;
    --classroom-gold: #f9d142;
    --classroom-gold-rgb: 249, 209, 66;

    /* Default dashboard colors (used for students) */
    --classroom-dashboard: var(--classroom-primary);
    --classroom-dashboard-rgb: var(--classroom-primary-rgb);
    --classroom-dashboard-dark: var(--classroom-primary-dark);
    --classroom-dashboard-dark-rgb: var(--classroom-primary-dark-rgb);

    color-scheme: light;
    accent-color: var(--classroom-primary);
}

.theme-dark {
    --classroom-background: #000000;
    --classroom-background-1: #2A2A2A;
    --classroom-text-0: #ffffff;
    --classroom-text-0-rgb: 255, 255, 255;
    --classroom-text-1: #fdfdfd;
    --classroom-text-1-rgb: 253, 253, 253;
    --classroom-text-2: #f5f5f5;
    --classroom-text-2-rgb: 245, 245, 245;
    --classroom-shadow-1: rgba(0, 0, 0, 1);
    --classroom-cell: #2e2e2e;

    --classroom-primary: #2CC987;
    --classroom-primary-rgb: 44, 201, 135;
    --classroom-primary-dark: #23A26E;
    --classroom-primary-dark-rgb: 35, 162, 110;
    --classroom-secondary: #EF8881;
    --classroom-secondary-rgb: 239, 136, 129;
    --classroom-secondary-dark: #EA645A;
    --classroom-secondary-dark-rgb: 234, 100, 90;
    --classroom-tertiary: #4AA6E8;
    --classroom-tertiary-rgb: 74, 166, 232;
    --classroom-tertiary-dark: #2894E3;
    --classroom-tertiary-dark-rgb: 40, 148, 227;
    --classroom-green: #2CC987;
    --classroom-green-rgb: 44, 201, 135;
    --classroom-red: #EF8881;
    --classroom-red-rgb: 239, 136, 129;
    --classroom-red-dark: #EA645A;
    --classroom-red-dark-rgb: 234, 100, 90;
    --classroom-blue: #4AA6E8;
    --classroom-blue-rgb: 74, 166, 232;

    color-scheme: dark;
}

.theme-light.contrast-high {
    --classroom-text-0: #000000;
    --classroom-text-0-rgb: rgb(0, 0, 0);
    --classroom-background: #ffffff;
    --classroom-background-rgb: rgb(255, 255, 255);
    --classroom-cell : var(--classroom-text-0);

    --bs-table-border-color : var(--classroom-text-0);

    color-scheme: light;
}

.theme-dark.contrast-high {
    --classroom-text-0: #ffffff;
    --classroom-text-0-rgb: rgb(255, 255, 255);
    --classroom-background: #000000;
    --classroom-background-rgb: rgb(0, 0, 0);
    --classroom-cell : var(--classroom-text-0);

    color-scheme: dark;
}

/* Change the hue-rotate to make the icon color match your primary color */
.sidebar-classroom div img:not(.user-picture),
.hue-rotate-base {
    filter: hue-rotate(0deg) saturate(0.9);
}

/* Change the scale of your logo if it is too big */
#classroom-sidebar-logo {
    background-size: 90% !important;
}

/* OTHER USER TYPES */

/* TEACHER THEMING
Used when the insterface is used by a teacher */
.theme-teacher {
    --classroom-dashboard: #1976d2;
    --classroom-dashboard-rgb: 25, 118, 210;
    --classroom-dashboard-dark: #1260ad;
    --classroom-dashboard-dark-rgb: 18, 96, 173;
}

.theme-teacher .sidebar-classroom div img:not(.user-picture),
.hue-rotate-teacher {
    /* Change the hue-rotate to make the icon color match your theme color */
    filter: hue-rotate(85deg) saturate(1.5);
}


/* GROUP ADMIN THEMING
Used when the insterface is used by a group administrator */
.theme-group-admin {
    --classroom-dashboard: #F1CA3F;
    --classroom-dashboard-rgb: 241, 202, 63;
    --classroom-dashboard-dark: #DEB421;
    --classroom-dashboard-dark-rgb: 222, 180, 33;
}

.theme-group-admin .sidebar-classroom div img:not(.user-picture),
.hue-rotate-group-admin {
    /* Change the hue-rotate to make the icon color match your theme color */
    filter: hue-rotate(260deg) brightness(1.2);
}

/* SUPER ADMIN THEMING
Used when the insterface is used by a super administrator */
.theme-super-admin,
.hue-rotate-super-admin {
    --classroom-dashboard: #A84D4D;
    --classroom-dashboard-rgb: 168, 77, 77;
    --classroom-dashboard-dark: #954545;
    --classroom-dashboard-dark-rgb: 149, 69, 69;
}

.theme-light.theme-super-admin,
.theme-light .hue-rotate-super-admin {
   --classroom-dashboard: #a84d4d;
   --classroom-dashboard-dark: #954545;
}

.theme-dark .theme-super-admin,
.theme-dark .hue-rotate-super-admin {
    --classroom-dashboard: #ff6b7a;
    --classroom-dashboard-dark: #ff5566;
}

.theme-super-admin .sidebar-classroom div img:not(.user-picture) {
    /* Change the hue-rotate to make the icon color match your theme color */
    filter: hue-rotate(210deg);
}