:root {
    /* OVERRIDE BOOTSTRAP */
    --bcot-primary: #007bff;        /* BCoT Blue */
    --bcot-secondary: #6c757d;      /* BCoT Grey */
    --bcot-success: #28a745;        /* BCoT Green */
    --bcot-danger: #dc3545;         /* BCoT Red */
    --bcot-warning: #ffc107;        /* BCoT Orange */
    --bcot-info: #17a2b8;           /* BCoT Blue */
    --bcot-light: #f8f9fa;
    --bcot-dark: #343a40;           /* Almost Black */
    --bcot-lightpurple: #67498b;    /* BCoT Light Purple */
    --bcot-darkblue: #002c77;       /* BCoT Dark Blue */

    --bcot-primary-hover: #0069d9;
    --bcot-primary-hover-border: #0062cc;
    --bcot-secondary-hover: #5a6268;
    --bcot-secondary-hover-border: #545b62;
    --bcot-success-hover: #218838;
    --bcot-success-hover-border: #1e7e34;
    --bcot-danger-hover: #c82333;
    --bcot-danger-hover-border: #bd2130;
    --bcot-warning-hover: #e0a800;
    --bcot-warning-hover-border: #d39e00;
    --bcot-info-hover: #138496;
    --bcot-info-hover-border: #117a8b;
    --bcot-light-hover: #e2e6ea;
    --bcot-light-hover-border: #dae0e5;
    --bcot-dark-hover: #23272b;
    --bcot-dark-hover-border: #1d2124;
    --bcot-lightpurple-hover: #af6bc2;
    --bcot-lightpurple-hover-border: #af6bc2;
    --bcot-darkblue-hover: #001945;
    --bcot-darkblue-hover-border: #001945;

    --bcot-alert-primary: #cce5ff;
    --bcot-alert-primary-color: #004085;
    --bcot-alert-primary-border: #b8daff;
    --bcot-alert-secondary: #e2e3e5;
    --bcot-alert-secondary-color: #383d41;
    --bcot-alert-secondary-border: #d6d8db;
    --bcot-alert-success: #d4edda;
    --bcot-alert-success-color: #155724;
    --bcot-alert-success-border: #c3e6cb;
    --bcot-alert-danger: #f8d7da;
    --bcot-alert-danger-color: #721c24;
    --bcot-alert-danger-border: #f5c6cb;
    --bcot-alert-warning: #fff3cd;
    --bcot-alert-warning-color: #856404;
    --bcot-alert-warning-border: #ffeeba;
    --bcot-alert-info: #d1ecf1;
    --bcot-alert-info-color: #0c5460;
    --bcot-alert-info-border: #bee5eb;
    --bcot-alert-light: #fefefe;
    --bcot-alert-light-color: #818182;
    --bcot-alert-light-border: #fdfdfe;
    --bcot-alert-dark: #d6d8d9;
    --bcot-alert-dark-color: #1b1e21;
    --bcot-alert-dark-border: #c6c8ca;

    /* CUSTOM */
    --bcot-light-text: #f8f9fa;
    --bcot-background-opaque: rgba(99, 29, 118, 0.7);   /* Apply to panel/div background */
    --bcot-background-gradient: linear-gradient(0deg, rgba(51, 8, 103, 0.5) 0%, rgba(51, 8, 103, 1) 100%);
    --bcot-background-gradient-top: linear-gradient(to top, rgba(51, 8, 103, 1.0) 0%, rgba(51, 8, 103, 1.0) 100%);
    --bcot-body-opaque: rgba(0, 0, 0, 0.2);       /* Apply to website body */
    --bcot-box-shadow: 0px 10px 70px rgb(0 0 0 / 25%);
    --bcot-section-header: linear-gradient(to left, #330867 0%, #631d76 100%);
    --bcot-grayscale: grayscale(0);

    /*
        Different colour scheme according to the theme
        When on a light theme, we may want the text to be in dark colour but not on a dark theme
    */
    --bcot-opp-text: #333333;
    --bcot-opp-text-hover: #2e2e2e;

    --bcot-opp-background: #fafafa;
    --bcot-opp-hover: #e0e0e0;

    --bcot-opp-light-background: #ededed;
    --bcot-opp-light-hover: #d4d4d4;

    /* CALENDAR */
    --bcot-calendar-background: var(--bcot-opp-background);
    --bcot-calendar-color: #424242;
    --bcot-calendar-today: #BDBDBD;
    --bcot-calendar-border: #dbdbdb;

    --bg-purple: #631d76;
}