$black: #000; /* black */
$white: #fff; /* white */
$byi-error: #f12d2d; /* error color */
$byi-warning: #ffff99; /* warning color */
$byi-font: "Roboto", sans-serif; /* byi fonts */

$byi-tab-icon: #404042; /* default tab icon color */
$byi-tab-icon-active: $byi-theme; /* active tab icon color */
$byi-toolbar-bg: #fff; /* header footer background color (used @ other places where it needs) */
$byi-footer-mob-top: #f5f5f5; /* mobile sub header background color */
$byi-main-bg: #fff; /* main canvas background color */
$byi-text-color: #404042; /* normal text color */
$byi-accord-text: #262626; /* default accordion text color */
$byi-accord-text-active: $byi-theme; /* active accordion text color */
$byi-accord-bg: #fff; /* accordion background color */
$byi-accord-bg-dark: #f5f5f5; /* accordion background color in product options */
$byi-input-bg: #fff; /* input item backgroud (input , select, textarea, etc.) */
$byi-panel-bg: #ebebeb; /* left and right panel background and active tab background */
$byi-darkicon: #4d4c4c; /* right panel dark icon color */
$byi-darkicon-hover: #000; /* right panel dark icon color hover */
$byi-lighticon: #807f7f; /* light icon color (header icons, footer icons, layer icon, etc.) */
$byi-tooltip-bg: #000; /* tooltip background color */
$byi-tooltip-text: #fff; /* tooltip text color */
$byi-border-color: #cccccc; /* border color for input item dropdowns catagory list etc. */
$byi-range-bg: #D4D4D4; /* range selector background color */
$byi-sidechange-icon: #cccccc; /* side change icon color canvas area */
$byi-table-admin-border:#d6d6d6; /* byi admin table border*/
$byi-talbe-admin-color:#514943; /* byi admin default color */
$byi-table-text-color:#303030; /*byi admin text color */
/*-------------------------------------
        Color Scheme (Dark Theme)
-------------------------------------- */
@if variable-exists(byi-dark-scheme) and $byi-dark-scheme==true {
  $byi-tab-icon: #a5a5a5;
  $byi-tab-icon-active: #fff;
  $byi-toolbar-bg: #303030;
  $byi-footer-mob-top: #303030;
  $byi-main-bg: #282828;
  $byi-text-color: #f0f0f0;
  $byi-accord-text: #bbb;
  $byi-accord-text-active: #f0f0f0;
  $byi-accord-bg: #303030;
  $byi-accord-bg-dark: #303030;
  $byi-input-bg: #525252;
  $byi-panel-bg: #474747;
  $byi-darkicon: #f0f0f0;
  $byi-darkicon-hover: #f0f0f0;
  $byi-lighticon: #f0f0f0;
  $byi-tooltip-bg: #333;
  $byi-tooltip-text: #fff;
  $byi-border-color: #676767;
  $byi-range-bg: lighten(#474747, 15%);
  $byi-sidechange-icon: #f0f0f0;
}