:root {
    
    /* Theme Colors for Defaults
     * Provide Custom Stylesheet at Project/static/css/style.css */
    
    --ash-accent: ;
    --beige-grey: ;
    --beige-ash: ;
    --bg: white;
    --bg-hover: ;
    --blue: ;
    --blue-accent: ;
    --blue-pale: ;
    --brown: ;
    --brown-accent: ;
    --brown-pale: ;
    --btn-bg: dodgerblue;
    --btn-fg: var(--bg);
    --btn-hover-bg: #1a6bb9;
    --btn-hover-fg: white;
    --child-even-bg: ;
    --child-odd-bg: white;
    --code-fg: #363636;
    --code-bg: #faf2f9; /*#e0ecef;*/
    --code-bg-inline: #f0f7f9;
    --code-border: #d3cbd2;
    --code-radius: 10px;
    --dark-blue: ;
    --dark-brown: ;
    --dark-green: ;
    --dark-orange: ;
    --dark-purple: ;
    --dark-red: maroon;
    --dim-10th: rgba(0, 0, 0, 0.1);
    --expand-bg: white;
    --form-bg: var(--dim-10th);
    --form-border: gray;
    --form-header-bg: rgba(0, 0, 0, 0.2);
    --form-highlight: ;
    --form-select: ;
    --form-hr: ;
    --fresh: ;
    --green: ;
    --green-accent: ;
    --green-pale: ;
    --highlight-ash: #f5f5f5;
    --highlight-ring: ;
    --highlight-green: ;
    --highlight-orange: ;
    --highlight-purple: ;
    --highlight-red: ;
    --indicator: ;
    --indicator-hover: ;
    --indicator-submenu: ;
    --indicator-submenu-hover: ;
    --meta-bg: ;
    --meta-border: ;
    --msg-bg: #fff5df;
    --msg-border: ;
    --msg-padding: 5px;
    --orange: ;
    --orange-accent: ;
    --orange-pale: ;
    --photo-frame: ;
    --purple: ;
    --purple-accent: ;
    --purple-pale: ;    
    --red: ;
    --search-bg: ;
    --search-border: ;
    --subform-bg: ;
    --tbl-hr-fg: ;
    --tbl-bg: ;
    --tbl-bg-alt: ;
  
    /* sections */
    --hamburger-fg: ;
    --section-min-height: 32px;
    --section-padding: 10px;

    /* sidebar */
    --sidebar-full-avatar: 90px;
    --sidebar-dock-avatar: 46px;
    --sidebar-icons-size: 18px;
    --sidebar-item-height: 32px;
    --sidebar-full: 256px;
    --sidebar-dock: 76px;
    --sidebar-fg: black;
    --sidebar-fg-hover: black;
    --sidebar-bg: #ededed; /*#bcc1e7;*/
    --sidebar-bg-hover: ;
    --sidebar-border: #c6c6c6;
    --sidebar-submenu-fg: black;
    --sidebar-submenu-fg-hover: black;
    --sidebar-submenu-bg: #d1d4d5;
    --sidebar-submenu-bg-hover: ;
    --sidebar-user-fg: ;

    /* header and footer */
    --footer-fg: black;
    --footer-bg: #e0ecef;
    --footer-alt-bg: #d1d4d5;
    --header-fg: black;
    --header-bg: #d3cbbe;
    --header-alt-bg: #c9cce2;

    /* buttons */
    --btn-fillet: 7px;
    --btn-height: 40px;
    --btn-outline: 2px;
    --btn-offset: 1px;
    --btn-padding: 14px;

    /* widgets and margins */
    /* device margins with lowest device width being 320px */
    --tag-column-gap: 10px;
    --tag-row-gap: 0px;
    --top-bottom-content-ms: 20px;
    --wgt-height: 40px;
    --label-mt: 8px;
    --label-mb: 4px;
    --ml: 10%; /* left margin */
    --mr: 10%; /* right margin */
    --ms: 20px; /* margins */
    --screen-min-width: 320px;
    --screen-width-outer-ms: calc(var(--screen-min-width) - (2 * var(--ms)));
    --screen-width-middle-ms: calc(var(--screen-min-width) - (4 * var(--ms))); 
    --screen-width-inner-ms: calc(var(--screen-min-width) - (6 * var(--ms))); 
}