:root,
html,
html.default,
.theme-preview.light {
  --background: #fff;
  --backdrop: #fafafa;
  --backdropContrast: #e2e2e2;
  --seperator: #fdfdfd;
  --mask: #000;
  --text: #222;
  --softText: #555;
  --softerText: #777;
  --border: #f1f1f1;
  --outline: #081925;
  --hover: #ecf6fc;
  --hoverText: #023d62;
  --hoverBorder: #3c89ba;
  --anchor: #006fb6;
  --anchorHover: #251e30;
  --gutter: #0F2331; /*#30302e*/
  --gutterText: #ccc;
  --gutterTextContrast: #fff;
  --gutterBorder: #0d3c65;
  --gutterHover: #2e4a65;
  --gutterHoverText: #eee;
  --label: #494949;
  --disabled: #eee;
  --disabledText: #888;
  --disabledBorder: #ccc;
  --form: #fdfdfd;
  --formBorder: #eaeaea;
  --formText: #000;
  --formFocusBorder: #66afe9;
  --formFocusShadow: rgba(102,175,233,.6);
  --formRequiredBorder: #b20000;
  --formRequiredShadow: rgba(233, 102, 102, 0.60);
  --primary: #3c89ba;
  --primaryText: #fff;
  --primaryBorder: #255675;
  --primaryHover: #255675;
  --primaryHoverText: #fff;
  --primaryHoverBorder: #3c89ba;
  --secondary: #f2f2f2;
  --secondaryText: #000;
  --secondaryBorder: #d4d4d4;
  --secondaryHover: #255675;
  --secondaryHoverText: #fff;
  --secondaryHoverBorder: #3c89ba;
  --tracking: #188212; /* Running Time Ticket */
  --trackingBg: rgba(236, 255, 235, 0.15); /* Running Time Ticket */
  --unread: #1b8ad0;
  --unreadText: #fff;
  --active: rgb(245, 247, 249);
  --multi: rgb(218, 229, 245);
  --boxShadow: rgba(0,0,0,.132);
  --boxShadowSecondary: rgba(0,0,0,.108);
  --loadingMask: rgba(0,0,0,.108);
  --toast: #222;
  --toastText: #eee;
  --toastShadow: #2d2525;
  --done: #c3ddb3;
  --doneText: #008c00;
  --doneBorder: #008c00;
  --warning: #fcf2b9;
  --warningText: #5c510d;
  --warningBorder: #5c510d;
  --info: #c4d7ee;
  --infoText: #19455a;
  --infoBorder: #3795c1;
  --success: #c0e1c0;
  --successText: #006000;
  --successBorder: #3eaa3e;
  --danger: #ffd8d8;
  --dangerText: #8b0000;
  --dangerBorder: #f16565;
  --alert: #fcc487;
  --alertText: #833f0e;
  --alertBorder: #753100;
  --hotkey: #000;
  --hotkeyText: #ddd;
  --tooltip: #ddd;
  --tooltipColor: #222;
  --tooltipSoft: #bbb;
  --code: #f9f2f4;
  --codeText: #c7254e;
  /** TODO**/
  --assist: #9e4200;
  --today: #ff00db;
  --current: #ff5e00;
  --powerpoint: #dc6540;
  --excel: #138d19;
  --word: #0e3587;
  --pdf: #d82424;
  --archived: #2980B9;
  --liked: #ffcd03;
  --newMessages: #e41111;
  --offline: #777;
  --online: #19bf00;
  --away: #ec9d00;
  --dndOnline: #bf0000;
  --dndAway: #d93c00;
  --testEnvironment: #ffc62c;
  --testEnvironmentText: #222;
  /*** Colors ****/
  --green: #29b92c;
  --textOnGreen: #222;
  --green3: #356635;
  --green4: #92b526;
  --green5: #a2d2a4;
  --textOnGreen5: #222;
  --blue: #2980B9;
  --blue2: #113952;
  --blue3: #27559c;
  --blue4: #2d5578;
  --blue5: #dbe7f7;
  --textOnBlue5: #222;
  --yellowgreen: #bed27c;
  --textOnYellowgreen: #222;
  --yellow: #e4e884;
  --textOnYellow: #222;
  --yellow3: #222;
  --red: #b20000;
  --textOnRed: #fff;
  --red3: #962014;
  --orange: #e4b17a;
  --textOnOrange: #222;
  --orange3: #9E6306;
  --textOnOrange3: #fff;
  --orange4: #dc9800;
  --textOnOrange4: #222;
  --orange5: #d3d600;
  --purple: #9a3eff;
  --purple3: #4a3b5f;
  --purple4: #bab8de;
  --pink: #ec63e8;
  --pink3: #9a0096;
  --brown3: #70520b;
  --gray: #95a5a6;
  --gray2: #333;
  --gray3: #555;
  --gray4: #888;
  --black: #000;
  /* Triage */
  --triageA: rgb(193, 0, 0);
  --triageAText: rgb(255, 255, 255);
  --triageB: rgb(255, 28, 28);
  --triageBText: rgb(255, 255, 255);
  --triageC: rgb(255, 72, 72);
  --triageCText: rgb(255, 255, 255);
  --triageD: rgb(248, 78, 0);
  --triageDText: rgb(255, 255, 255);
  --triageE: rgb(255, 120, 55);
  --triageEText: rgb(255, 255, 255);
  --triageF: rgb(255, 165, 121);
  --triageFText: rgb(255, 255, 255);
  --triageG: rgb(213, 213, 0);
  --triageGText: rgb(0, 0, 0);
  --triageH: rgb(255, 255, 0);
  --triageHText: rgb(0, 0, 0);
  --triageI: rgb(255, 255, 147);
  --triageIText: rgb(0, 0, 0);
  --triageJ: rgb(193, 0, 193);
  --triageJText: rgb(255, 255, 255);
  --triageK: rgb(255, 32, 255);
  --triageKText: rgb(255, 255, 255);
  --triageL: rgb(255, 128, 192);
  --triageLText: rgb(255, 255, 255);
  --triageM: rgb(0, 0, 160);
  --triageMText: rgb(255, 255, 255);
  --triageN: rgb(0, 0, 242);
  --triageNText: rgb(255, 255, 255);
  --triageO: rgb(138, 138, 255);
  --triageOText: rgb(255, 255, 255);
  --triageP: rgb(0, 108, 54);
  --triagePText: rgb(255, 255, 255);
  --triageQ: rgb(0, 164, 82);
  --triageQText: rgb(255, 255, 255);
  --triageR: rgb(0, 230, 115);
  --triageRText: rgb(255, 255, 255);
  /* Non-Colors */
  --hoverBorderThickness: 2px;
  --sblUnpinnedWidth: 60px;
  --sblWidth: 250px;
  --mainContentPadding: 150px;
  --mainContentPaddingNegative: -150px;
  --mobilePadding: 25px;
  --mobilePaddingNegative: -25px;
}

html.dark,
.theme-preview.dark {
  --background: #111;
  --backdrop: #151515;
  --backdropContrast: #333;
  --seperator: #1a1a1a;
  --mask: #555;
  --text: #ddd;
  --softText: #aaa;
  --softerText: #9e9e9e;
  --border: #2a2a2a;
  --outline: #9c9c9c;
  --hover: #7e6d19;
  --hoverText: #cfcfcf;
  --hoverBorder: #816c07;
  --anchor: #ad9520;
  --anchorHover: #a8a07a;
  --gutter: #000;
  --gutterText: #ccc;
  --gutterTextContrast: #fff;
  --gutterBorder: #222;
  --gutterHover: #2d2d2d;
  --gutterHoverText: #eee;
  --label: #ccc;
  --disabled: #333;
  --disabledText: #6a6a6a;
  --disabledBorder: #255279;
  --form: #222;
  --formBorder: #333;
  --formText: #eee;
  --formFocusBorder: #a79337;
  --formFocusShadow: rgba(224, 233, 102, 0.60);
  --formRequiredBorder: #b20000;
  --formRequiredShadow: rgba(233, 102, 102, 0.60);
  --primary: #3c89ba;
  --primaryText: #fff;
  --primaryBorder: #255675;
  --primaryHover: #255675;
  --primaryHoverText: #fff;
  --primaryHoverBorder: #3c89ba;
  --secondary: #4b4b4b;
  --secondaryText: #d7d7d7;
  --secondaryBorder: #b4b4b4;
  --secondaryHover: #255675;
  --secondaryHoverText: #fff;
  --secondaryHoverBorder: #3c89ba;
  --tracking: #188212; /* Running Time Ticket */
  --trackingBg: #152014;
  --unread: #3c89ba;
  --unreadText: #ddd;
  --active: #222222;
  --multi: #1c222b;
  --boxShadow: rgba(0,0,0,.132);
  --boxShadowSecondary: rgba(0,0,0,.108);
  --loadingMask: rgba(0,0,0,.108);
  --toast: #222;
  --toastText: #eee;
  --toastShadow: #2d2525;
  --done: #2c7300;
  --doneText: #008c00;
  --warning: #8a6d3b;
  --warningText: #fcf8e3;
  --warningBorder: #968d7a;
  --info: #31708f;
  --infoText: #d9edf7;
  --infoBorder: #16313e;
  --success: #3c763d;
  --successText: #dff0d8;
  --successBorder: #2b552b;
  --danger: #442323;
  --dangerText: #f0b8b7;
  --dangerBorder: #883845;
  --hotkey: #555;
  --hotkeyText: #ccc;
  --tooltip: #555;
  --tooltipColor: #ccc;
  --tooltipSoft: #aaa;
  --code: #312b2d;
  --codeText: #ff658b;
  /*** TODO ****/
  --blue5: #25374f;
  --purple4: #5c57bb;
  --textOnBlue5: #000;
  --online: #5fa52a;
  --green: #349636;
  --red: #800404;
  --black: #fff;
  --textOnRed: #000;
  --testEnvironment: #d49b00;
  --testEnvironmentText: #222;
}