:root {
    /* #C9E3EF ->  #7160E8 */
    /* VersaDev Light theme start */
    /* VersaDev: colours defined as #ff0000 are either currently not used or for debug purpose */
    --display-font: "Geist Font", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --display-mode: light; /* light | dark - controls how date icon is displayed within input type=date and picker background colour used by Chrome */
    --brand-color1: #7160E8;
    --color1: #efefef;
    --color2: #ffffff; /*#f4f5fa;*/
    --color3: #ffffff;
    --color4: #333333;
    --text-color1: #616569; /* default colour of text content within the main content areas */
    --link-text-color: #222222; /* colour of text links */
    --link-text-hover-color: #616569; /* colour of text links used when highlighting and hover */
    --highlight-color: #7160E8; /* the background colour of selected items */
    --highlight-text-color: #ffffff; /* hover and active text colour */
    --disabled-color1: rgba(108,117,125,0.7); /* colour for text in the footer and the material icons next to links for page functions e.g. search button link */
    --disabled-color2: rgba(15,43,57,0.2);
    --separator-color: #e3e3e3; /* colour used in hr, dropdown menu and dialog horizontal separator */
    --header-background-color: #dddddd; /* header menu bar background colour */
    --header-text-color: #7160E8; /* header menu item text colour */
    --header-text-hover-color: #7160E8; /* header menu item text hover colour */
    --sidenav-header-color: var(--brand-color1);
    --sidenav-header-text-color: #7160EB;
    --sidenav-background-color: #ffffff; /* background colour of sidebar navigation */
    --sidenav-background-hover-color: #dddddd; /* background hover colour of sidebar navigation item */
    --sidenav-text-color: var(--link-text-color); /* colour of sidebar navigation link text */
    --sidenav-group-heading-text-color: #7160E8; /* colour of sidebar group heading text (group heading of items) */
    --sidenav-border-color: #dddddd; /* colour of sidebar navigation border */
    --sidenav-active-text-color: var(--highlight-text-color); /* colour of active sidebar navigation link text */
    --sidenav-active-background-color: var(--highlight-color); /* background colour of active sidebar navigation item */
    --splash-background-color: #ffffff;
    --splash-text-color: #7160E8;
    --letterbox-background-color: #f1f1f1; /* background colour of letter box edges for large screens */
    --table-heading-background-color: #ffffff; /* table heading background colour */
    --table-heading-text-color: #616569; /* table heading text colour */
    --table-background-color: transparent; /* table background colour */
    --table-text-color: #616569; /* table row text colour */
    --table-row-highlight-color: #7160E8; /* table row background highlight and hover colour */
    --table-row-highlight-text-color: #ffffff; /* table row text highlight and hover colour */
    --table-row-separator-color: #eeeeee; /* colour used to separate table rows */
    --systemBorderRadius: 4px; /* defines the radius applied to borders and controls */
    --systemShadow: 0 7px 14px 0 rgba(65, 69, 88, 0.1), 0 3px 6px 0 rgba(0, 0, 0, 0.07); /* defines the shadow applied to containers */
    --control-background-color: #ffffff; /* face colour of the control */
    --control-border-color: #ced4da; /* border colour of the control */
    --control-shadow-color: #7160E8; /* shadow colour of the control */
    --control-text-color: #616569; /* text colour of the control */
    --control-border-radius: var(--systemBorderRadius); /* border radius of the control */
    --button-radius: var(--systemBorderRadius); /* border radius of the button */
    --button-face-color: #7160E8; /* face colour of a button */
    --button-border-color: #7160E8; /* border colour of a button */
    --button-text-color: #f3f5f7; /* text colour of a button */
    --button-face-hover-color: #ffffff; /* face colour of a button when highlighted */
    --button-border-hover-color: #7160E8; /* border colour of a button when highlighted */
    --button-text-hover-color: #7160E8; /* text colour of a button when highlighted */
    --button-face-disabled-color: #cccccc; /* face colour of a disabled button */
    --button-border-disabled-color: #bbbbbb; /* border colour of a disabled button */
    --button-text-disabled-color: #888888; /* text colour of a disabled button */
    --versatile-text-color: #ffffff; /* colour of text and icons displayed on tiles */
    --versaFileFolderColor: #ffd800; /* versaFile folder colour */
    --versaFileFileColor: #aaaaaa; /* versaFile file colour */
    --versaFileHoverColor: var(--highlight-color); /* versaFile hover colour */
    --versaFileHoverTextColor: var(--highlight-text-color); /* versaFile hover text colour */
    --versaFilePathTextColor: #616569; /* versaFile breadcrumb file path */
    /* versa context menu colours also apply to the bootstrap dropdown menus */
    --versacontext-background-color: var(--color3); /* versacontext menu background colour */
    --versacontext-border-color: var(--link-text-color); /* versacontext menu border colour */
    --versacontext-separator-color: #565656; /* versacontext menu separator colour */
    --versacontext-item-color: var(--link-text-color); /* versacontext menu item colour */
    --versacontext-item-hover-color: var(--highlight-text-color); /* versacontext menu item text hover colour */
    --versacontext-item-hover-background-color: var(--highlight-color); /* versacontext menu item background hover colour */
    --versacontext-border-radius: 0.25rem; /* versacontext menu border radius */
    /* versa badge counter icons */
    --versabadge-background-color: var(--color1); /* versabadge background colour */
    --versabadge-border-color: var(--highlight-color); /* versabadge border colour */
    --versabadge-text-color: var(--text-color1:); /* versabadge text colour */
    --versabadge-border-radius: 10px; /* versabadge border radius */
    /* VersaDev Light theme end */
}