:root {
    --kendo-font-family: Roboto, sans-serif !important;
    /* The variables below can be found being used in theme-chooser.js */
    /* Dark Mode Colors (because default-main-dark's primary color is red, and thats weird) */
    --mc-dark-color-primary-subtle: #4F378B;
    --mc-dark-color-primary-subtle-hover: #5B469E; 
    --mc-dark-color-primary-subtle-active: #6A59B2; 
    --mc-dark-color-primary: #D0BCFF;
    --mc-dark-color-primary-hover: #C2AAFF;
    --mc-dark-color-primary-active: #A896EB;
    --mc-dark-color-primary-emphasis: #B29FE3;
    --mc-dark-color-primary-on-subtle: #EADDFF;
    --mc-dark-color-on-primary: #381E72;
    --mc-dark-color-primary-on-surface: #D0BCFF;
    /* Other colors that could come in handy */
    /*--kendo-color-secondary-subtle: #e3e3e3 !important;
    --kendo-color-secondary-subtle-hover: #cfcfcf !important;
    --kendo-color-secondary-subtle-active: #bababa !important;
    --kendo-color-secondary: #757575 !important;
    --kendo-color-secondary-hover: #707070 !important;
    --kendo-color-secondary-active: #676767 !important;
    --kendo-color-secondary-emphasis: #989898 !important;
    --kendo-color-secondary-on-subtle: #292929 !important;
    --kendo-color-on-secondary: white !important;
    --kendo-color-secondary-on-surface: #585858 !important;
    --kendo-color-secondary-on-surface: #4070cc !important;
    --kendo-color-success-subtle: #dff6dd !important;
    --kendo-color-success-subtle-hover: #c8e8c6 !important;
    --kendo-color-success-subtle-active: #b1dbaf !important;
    --kendo-color-success: #55a554 !important;
    --kendo-color-success-hover: #3e973e !important;
    --kendo-color-success-active: #278a27 !important;
    --kendo-color-success-emphasis: #107c10 !important;
    --kendo-color-success-on-subtle: #063206 !important;
    --kendo-color-on-success: #ffffff !important;
    --kendo-color-success-on-surface: #107c10 !important;
    --kendo-color-error-subtle: #fde7e9 !important;
    --kendo-color-error-subtle-hover: #f3d2d4 !important;
    --kendo-color-error-subtle-active: #e9bcbf !important;
    --kendo-color-error: #c2666b !important;
    --kendo-color-error-hover: #b85156 !important;
    --kendo-color-error-active: #ae3b41 !important;
    --kendo-color-error-emphasis: #a4262c !important;
    --kendo-color-error-on-subtle: #420f12 !important;
    --kendo-color-on-error: #ffffff !important;
    --kendo-color-error-on-surface: #a4262c !important;*/
}

.light-mode {
    background-color: #FEF7FF;
    color: #000 !important;
   /* background-color: #222529 !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('/assets/images/GirlPointing.jpg');*/
}

.dark-mode {
    background-color: #141218;
    color: #fff !important;      
}