:root {
  /* light gray */
  /*--body-bg-color: rgb(248,249,250);*/ 
  /* light purple */
  /*--body-bg-color: rgb(250,249,253);*/
  --body-bg-color: #e4e6ea;   /* Equivalent of #A7A6BA (purple gray) at 25 or 30% opacity */
  --simple-body-bg-color: #553e84;  
  --prog-primary:#3a295c;
  --prog-accent:rgb(238, 108, 77);
  --prog-accent-light:rgba(238, 108, 77,0.1);
  --prog-accent-hover:rgb(212, 96, 68);
  --prog-primary-light: rgb(243,242,249);
  --primary-color-text: #fefefe;
  
  
  /*====== Button & Link Colors ===========================================*/
  --primary-color: rgb(58,41,92);
  --primary-color-hover: #6a5494;
  --primary-color-text: #fefefe;
  --primary-color-light: rgba(194,24,7,0.6);
  --primary-color-xlight: rgba(194,24,7,0.2);
  
  --accent-color: #8b0100;
  --accent-color-bg: #8b0100;
  --accent-color-text: #fefefe;
  
  --primary-color-light: rgba(194,24,7,0.6);
  
  --gray-text:#666666;
  
  /*--link-color:#662d91;*/
  --link-color:#3f6ac1;;
  --link-color-hover:#315194;
  --button-bg-color:#3a295c;
  --button-bg-color-light:#3a295c0d; /* 5% */
  --button-bg-color-hover:#6a5494;
  --button-color: #fefefe;
  --button-color-hover: #fefefe;
  
  --button-bg-color-light: rgba(238,237,241);
  --button-bg-color-light-hover: rgba(97,83,124);
  
  --callout-accent-dk: rgb(172,20,6);
  --callout-accent-lt: rgb(194,24,7);
  
  --header-btn-bg: #6a5494;
  --header-btn-color: #ffffff;
  --header-btn-bg-hover: #553e84;
  --header-btn-color-hover: #ffffff;
  
  --header-btn-bg-accent: rgb(238, 108, 77);
  --header-btn-color-accent: #ffffff;
  
  /*--header-btn-secondary-bg-hover:#867c9b;*/
  --header-btn-secondary-bg-hover:#71638f;
  
  /*====== Layout Colors =================================================*/
  --apex-bg-color: #f8f8f8;
  --apex-color: #666666;
  --apex-border-color: #dddddd;
  
  --bg-cust-logo: #fefefe;
/* StudioWorks purple */  
  --nav-color: #fefefe;
  --nav-active-bg-color: rgb(165,24,7);
  --nav-active-color: #ffffff;
  --nav-sub-color:rgba(254,254,254,0.8);
  --nav-sub-color-hover:rgba(254,254,254,1);
  --nav-back-btn-bg: #a87fd9;
  --nav-back-btn-hover-bg: #956dc5;
  /*--nav-sub-bg-color:#613a8f;*/
  --nav-sub-bg-color:#774ca9;
  --nav-hover-bg-color: rgb(194,24,7);
  --nav-hover-color: #fefefe;
  --nav-opt-hover-bg: rgba(72,39,110,0.15);
  --nav-opt-border: rgba(72,39,110,0.08);
  --nav-acc-toggle-bg: #774ca999;  /* Same value as nav-sub-bg-color with '99' added to end */
  /*WorqFlow blues */
/*  --nav-bg-color: #333333;
  --nav-color: #fefefe;
  --nav-active-bg-color: rgb(165,24,7);
  --nav-active-color: #fefefe;
  --nav-sub-color:rgba(254,254,254,0.7);
  --nav-sub-color-hover:rgba(254,254,254,1);
  --nav-sub-bg-color:#1a2d55;
  --nav-hover-bg-color: rgb(194,24,7);
  --nav-hover-color: #fefefe;
  --nav-opt-hover-bg: rgba(72,39,110,0.15);
  --nav-opt-border: rgba(72,39,110,0.08); */
  
  --footer-bg-color: #3b3b3b;
  --footer-color: #fefefe;
  --footer-color-hover: rgba(255,255,255,0.75);
  --footer-btm-bg-color: #222222;
  /*--footer-btm-color: rgb(255,255,255,0.8);*/
  --footer-btm-color: #eee;
  
  /*====== Workspace Colors =================================================*/
/* StudioWorks purple */
  --workspace-bg-color: #3f2360; 
  --workspace-color: #fefefe;
  --workspace-bg-color-active: #f1725f; 
  --workspace-color-active: #fefefe;
  --workspace-bg-color-hover: #d86655; 
  --workspace-color-hover: #fefefe;
  --workspace-bg-color-opt-hover: rgba(216, 102, 85, 0.7); 
  --workspace-color-opt-hover: #fefefe;
  --workspace-border-opt: rgb(216, 102, 85);
/* WorqFlow Blues */
/*  --workspace-bg-color: #314f8e; 
  --workspace-color: #fefefe;
  --workspace-bg-color-active: #183677; 
  --workspace-color-active: #fefefe;
  --workspace-bg-color-hover: #d86655; 
  --workspace-color-hover: #fefefe;
  --workspace-bg-color-opt-hover: rgba(216, 102, 85, 0.7); 
  --workspace-color-opt-hover: #fefefe;
  --workspace-border-opt: rgb(216, 102, 85);*/
  
  /*====== Workspace Colors =================================================*/
  --sub-nav-tab-border: rgba(63,35,96,0.2);
  /*--sub-nav-tab-bg: #dfd9f2;  darker than bg purple */
  --sub-nav-tab-bg: rgb(250,249,253);
  --sub-nav-tab-bg-hover: rgb(225,222,241);
  
  /*====== Panel Colors =================================================*/
  --panel-bg-grid-filter: #f2f2f2;
  --panel-bg-cust-a: #3f2360; /* purple */
  --panel-bg-cust-a-10: #3f23601a; /* purple, 10% opacity */
  --panel-bg-cust-b: #458ced; /* blue */
  --panel-bg-cust-b-10: #458ced1a; /* blue, 10% opacity */
  --panel-bg-cust-c: #7cb342; /* green */
  --panel-bg-cust-c-10: #7cb3421a; /* green, 10% opacity */
  --panel-bg-cust-d: #ffa726; /* orange */
  --panel-bg-cust-d-10: #ffa7261a; /* orange, 10% opacity */
  --panel-bg-cust-e: #93037a; /* magenta */
  --panel-bg-cust-e-10: #93037a1a; /* magenta, 10% opacity */
  --panel-bg-cust-f: #585363; /* dark grey-purple */
  --panel-bg-cust-f-10: #5853631a; /* dark blue-gray, 10% opacity */
  --panel-bg-cust-g: #564d42; /* brown-gray */
  --panel-bg-cust-g-10: #564d421a; /* brown-gray, 10% opacity */
  --panel-bg-cust-x: #333333; /* off-black */
  --panel-bg-cust-x-10: #3333331a; /* off-black, 10% opacity */

  /*====== Feedback Colors =================================================*/
  --alert: #fff6bf;
  --error: #8a1f11;
  --delete: #8a1f11;
  /*--delete-light: #8a1f111a;*/
  --delete-light: #f2e7e6;
  --delete-light-hover: #8a1f11bf;
  --input-error-bg: #f8e6e7;
  --error-bg: #fcd6d6;
  --info-bg: #d7ecfa;
  --warning: #fff3d9;
  
  /*====== Standard Colors =================================================*/
  --black: #222222;
  --white: #fefefe;
  --x-light-gray: #f1f1f1;
  --light-gray: #f0f0f0;
  --light-gray-text: #999999;
  --med-gray: #dedede;
  --gray: #cccccc;
  --gray-text: #666666;
  --dark-gray: #444444;
  
    /*====== KENDO Override Colors =================================================*/
  --grid-group-bg: #eaeaea;
  
  /*====== Tag Colors ===================================================*/
  --tag-a: #458ced;
  --tag-b: #7cb342;
  --tag-c: #ed9007;
  --tag-d: #e629bc;
  --tag-a: #3f2360;
  
  /*====== Named Colors =================================================*/
  --box-brown: #8f6d3d;
  --favorite: #daa520;

  /*====== Badge Colors =================================================*/
  --badge-info-bg: #f3f5f7;
  --badge-info-color: #515761;
  --badge-info-border: #c1cdd7;
  
  --badge-blue-bg: #e5f2fd;
  --badge-blue-color: #2c5cc5;
  --badge-blue-border: #bbdcfe;
  
  --badge-red-bg: #fef1e1;
  --badge-red-color: #c13e1b;
  --badge-red-border: #fddbb5;
  
  --badge-info-bg: #f3f5f7;
  --badge-info-color: #515761;
  --badge-info-border: #c1cdd7;
  
  --badge-ebs-bg: #e5f2fd;
  --badge-ebs-color: #2c5cc5;
  --badge-ebs-border: #bbdcfe;
  
  --badge-red-bg: #fef1e1;
  --badge-red-color: #c13e1b;
  --badge-red-border: #fddbb5;
  
  --badge-a-bg: #edf0f9;  /* blue */
  --badge-a-color: #4c66a9;
  --badge-a-border: #5c7bcb;
 
  
  --badge-c-bg: #fcf3e4;  /* blue */
  --badge-c-color: #c57500;
  --badge-c-border: #ed9007;
  
  --badge-e-bg: #ebe8ef;  /* purple */
  --badge-e-color: #3f2360;
  --badge-e-border: #3f2360;
  
  
  --stat-increase-color: #40860d;
  --stat-decrease-color: #c35249;
  
  /*====== Modal Colors ===========================================*/
  /* Default/Success/Purple theme */
  --modal-primary-bg: linear-gradient(135deg, #3a295c 0%, #4a3770 100%);
  --modal-primary-text: #ffffff;
  
  --modal-highlight-bg: #4a3770;
  --modal-highlight-shadow: rgba(58, 41, 92, 0.25);
  --modal-highlight-text: #ffffff;
  
  --modal-close-btn-bg: rgba(255, 255, 255, 0.2);
  --modal-close-btn-bg-hover: rgba(255, 255, 255, 0.3);
  --modal-close-btn-text: #ffffff;
  
  --modal-status-icon-bg: rgba(255, 255, 255, 0.2);
  --modal-status-icon-text: #ffffff;
  
  --modal-note-bg: rgba(255, 255, 255, 0.15);
  --modal-note-text: #ffffff;
  
  /* Critical/Coral theme */
  --modal-critical-bg: rgb(238, 108, 77);
  --modal-critical-shadow: rgba(238, 108, 77, 0.25);
  --modal-critical-text: #ffffff;
  --modal-critical-note-bg: rgba(255, 255, 255, 0.9);
  --modal-critical-note-text: #2d1b17;
  
  /* Delete/Cancel theme */
  --modal-delete-header-bg: linear-gradient(135deg, rgb(220, 38, 38) 0%, rgb(185, 28, 28) 100%);
  --modal-delete-highlight-bg: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  --modal-delete-highlight-border: #fecaca;
  --modal-delete-highlight-shadow: rgba(220, 38, 38, 0.1);
  --modal-delete-highlight-text: #7f1d1d;
  --modal-delete-icon-bg: rgba(220, 38, 38, 0.15);
  --modal-delete-icon-text: rgb(220, 38, 38);
  --modal-delete-note-bg: rgba(239, 68, 68, 0.1);
  --modal-delete-note-text: #991b1b;
  --modal-delete-note-border: rgb(220, 38, 38);
  
  /* Info theme */
  --modal-info-header-bg: linear-gradient(135deg, #3a295c 0%, #4a3770 100%);
  --modal-info-highlight-bg: #f3f2f9;
  --modal-info-highlight-border: #c4b8db;
  --modal-info-highlight-shadow: rgba(58, 41, 92, 0.1);
  --modal-info-highlight-text: #3a295c;
  --modal-info-icon-bg: rgba(58, 41, 92, 0.15);
  --modal-info-icon-text: #3a295c;
  --modal-info-note-bg: rgba(58, 41, 92, 0.1);
  --modal-info-note-text: #2a1f43;
  --modal-info-note-border: #3a295c;
  
  /* Detail items */
  --modal-detail-bg: #f7f5fa;
  --modal-detail-bg-hover: #f2eef7;
  --modal-detail-border: #3a295c;
  --modal-detail-label: #73648b;
  --modal-detail-value: #1e293b;
  
  --modal-detail-warning-bg: #fffbeb;
  --modal-detail-warning-bg-hover: #fef3c7;
  --modal-detail-warning-border: #f59e0b;
  --modal-detail-warning-label: #92400e;
  --modal-detail-warning-value: #78350f;
  
  --modal-detail-error-bg: #fef2f2;
  --modal-detail-error-bg-hover: #fee2e2;
  --modal-detail-error-border: rgb(220, 38, 38);
  --modal-detail-error-label: #991b1b;
  --modal-detail-error-value: #7f1d1d;
  
  /* Form elements */
  --modal-form-bg: #f7f5fa;
  --modal-form-border: #3a295c;
  --modal-form-label: #3a295c;
  --modal-required-indicator: rgb(238, 108, 77);
  
  --modal-input-bg: #ffffff;
  --modal-input-border: #e5e7eb;
  --modal-input-border-focus: #3a295c;
  --modal-input-shadow-focus: rgba(58, 41, 92, 0.1);
  --modal-input-text: #374151;
  
  /* Buttons */
  --modal-btn-success-bg: #10b981;
  --modal-btn-success-bg-hover: #059669;
  --modal-btn-success-text: #ffffff;
  
  --modal-btn-cancel-bg: #3a295c;
  --modal-btn-cancel-bg-hover: #2a1f43;
  --modal-btn-cancel-text: #ffffff;
  
  --modal-btn-delete-bg: rgb(220, 38, 38);
  --modal-btn-delete-bg-hover: rgb(185, 28, 28);
  --modal-btn-delete-text: #ffffff;
  
  --modal-btn-secondary-bg: #ffffff;
  --modal-btn-secondary-bg-hover: #f9fafb;
  --modal-btn-secondary-border: #e5e7eb;
  --modal-btn-secondary-border-hover: #d1d5db;
  --modal-btn-secondary-text: #6b7280;
  
  /* Disabled button states */
  --modal-btn-success-disabled-bg: #86efac;
  --modal-btn-cancel-disabled-bg: #9ca3af;
  --modal-btn-delete-disabled-bg: #fca5a5;
  --modal-btn-secondary-disabled-bg: #f3f4f6;
  --modal-btn-secondary-disabled-text: #9ca3af;
}

.box-brown{
  color: var(--box-brown);
}

/*  Tag color examples
.tag--new{background-color:#e0f5f0;color:#007958;border:1px solid #b4e5d9} -- greeg-greenblue
.tag--customer-responded{background-color:#e5f2fd;color:#2c5cc5;border:1px solid #bbdcfe} --blue
.tag--beta{background-color:#ffecf0;color:#c82124;border:1px solid #ffd0d6} -- red
.tag--spam{background-color:#fef1e1;color:#c13e1b;border:1px solid #fddbb5} -- red-redorange
.tag--deleted{background-color:#ebeff3;color:#384551;border:1px solid #ebeff3} --grayish
.tag--archived{background-color:#ef8464;color:#fff;border:1px solid #ef8464} -- orange
.tag--closed{background-color:#f3f5f7;border:1px solid #d4dce3} -- gray
.tag--associated{background-color:#475867;border:1px solid #475867;color:#fff}
.tag--associated .app-icon{fill:#fff}
.tag--billable{background-color:#fff;color:#12344d;border:1px solid #cfd7df}
.tag-bullet{position:relative;left:1px;margin-right:1px;color:#6f7c87;border:1px solid #cfd7df}
*/