.light_mode{
  --fbclone-header-background-color:#FFFFFF;
  --fbclone-mainmenu-links-color:#636569;
  --fbclone-mainmenu-links-hover-color:#1D7CF7;
  --fbclone-minimenu-background-color:#ECECEC;
  --fbclone-minimenu-hover-background-color:#F2F7FF;
  --fbclone-mininmenu-links-color:#000000;
  --fbclone-mininmenu-links-hover-color:#1D7CF7;
  --fbclone-minimenu-search-background-color:#F6F6F6;
  --fbclone-minimenu-search-font-color:#5F727F;
  --fbclone-footer-background-color:#FDFDFD;
  --fbclone-footer-font-color:#737373;
  --fbclone-footer-links-color:#737373;
  --fbclone-body-background-color:#F0F2F5;
  --fbclone-font-color:#000000;
  --fbclone-font-color-light:#65676B;
  --fbclone-links-color:#0D6EFD;
  --fbclone-links-hover-color:#085FDF;
  --fbclone-headline-color:#000000;
  --fbclone-border-color:#E1E2E3;
  --fbclone-box-background-color:#FFFFFF;
  --fbclone-box-background-color-alt:#F5F5F5;
  --fbclone-form-label-color:#455B6B;
  --fbclone-input-background-color:#FFFFFF;
  --fbclone-input-font-color:#5F727F;
  --fbclone-input-border-color:#D7D8DA;
  --fbclone-secondary-button-background-color:#F2F2F2;
  --fbclone-secondary-button-background-color-hover:#E5E5E5;
  --fbclone-secondary-button-font-color:#212529;
  --fbclone-secondary-button-font-color-hover:#212529;
  --fbclone-secondary-button-border-color:#E4E6EB;
  --fbclone-secondary-button-border-color-hover:#D8DADF;
  --fbclone-comments-background-color:#F9F9FB;
  --fbclone-dashboard-list-background-color-hover:#E5E5E5;
  --fbclone-dashboard-list-border-color:#DBDBDB;
  --fbclone-dashboard-font-color:#040609;
  --fbclone-dashboard-link-color:#040609;
}

.dark_mode{
  --fbclone-header-background-color:#2E2F30;
  --fbclone-mainmenu-links-color:#9EB8BE;
  --fbclone-mainmenu-links-hover-color:#1D7CF7;
  --fbclone-minimenu-background-color:#474747;
  --fbclone-minimenu-hover-background-color:#686868;
  --fbclone-mininmenu-links-color:#FFFFFF;
  --fbclone-mininmenu-links-hover-color:#1D7CF7;
  --fbclone-minimenu-search-background-color:#4F4F4F;
  --fbclone-minimenu-search-font-color:#FFFFFF;
  --fbclone-footer-background-color:#363738;
  --fbclone-footer-font-color:#CBCDD2;
  --fbclone-footer-links-color:#CBCDD2;
  --fbclone-body-background-color:#252627;
  --fbclone-font-color:#CBCDD2;
  --fbclone-font-color-light:#CBCDD2;
  --fbclone-links-color:#0D6EFD;
  --fbclone-links-hover-color:#085FDF;
  --fbclone-headline-color:#B0B3B7;
  --fbclone-border-color:#464646;
  --fbclone-box-background-color:#2E2F30;
  --fbclone-box-background-color-alt:#252627;
  --fbclone-form-label-color:#B0B3B7;
  --fbclone-input-background-color:#2E2F30;
  --fbclone-input-font-color:#CBCDD2;
  --fbclone-input-border-color:#575757;
  --fbclone-secondary-button-background-color:#343536;
  --fbclone-secondary-button-background-color-hover:#4C4D4E;
  --fbclone-secondary-button-font-color:#E4E6EB;
  --fbclone-secondary-button-font-color-hover:#DBDBDB;
  --fbclone-secondary-button-border-color:#5C5C5C;
  --fbclone-secondary-button-border-color-hover:#FDFDFD;
  --fbclone-comments-background-color:#4F4F4F;
  --fbclone-dashboard-list-background-color-hover:#000000;
  --fbclone-dashboard-list-border-color:#696969;
  --fbclone-dashboard-font-color:#FFFFFF;
  --fbclone-dashboard-link-color:#CBCDD2;
}
/*
DEFAULT STYLES FOR THIS --theme
*/
:root {
  /*
  PAGE WIDTHS & BACKGROUND COLOR
  Specify the top bar wrapper width (which contains the mini menu, logo, and main menu
  by default), the footer width, and the width of left & right-side columns.
  */
  --theme-main-width:1200px;
  --theme-header-menu-width:100%;
  --theme-content-width:var(--theme-main-width);
  --theme-content-columns-left-width:300px;
  --theme-content-columns-right-width:300px;
  --theme-body-background-color:var(--fbclone-body-background-color);
  --theme-base-color:var(--fbclone-theme-color);
  /*
  HEADER AND FOOTER COLORS
  These values are only used to style the site-wide header and footer.
  */
  --theme-header-background-color:var(--fbclone-header-background-color);
  --theme-header-menu-background-color:var(--fbclone-mainmenu-background-color);
  --theme-header-menu-link-background-color:transparent;
  --theme-header-menu-link-background-color-hover:transparent;
  --theme-header-menu-link-color:var(--fbclone-mainmenu-links-color);
  --theme-header-menu-link-hover-color:var(--fbclone-mainmenu-links-hover-color);
  --theme-header-minimenu-link-color:transparent;
	--theme-header-minimenu-link-background-color:transparent;
  
  --theme-topbar-minimenu-icon-background-color:var(--fbclone-minimenu-background-color);
  --theme-topbar-minimenu-icon-background-hover-color:var(--fbclone-minimenu-hover-background-color);
  --theme-topbar-minimenu-icon-font-color:var(--fbclone-mininmenu-links-color);
  --theme-topbar-minimenu-icon-font-hover-color:var(--fbclone-mininmenu-links-hover-color);

	--theme-header-minimenu-signup-background-color:var(--fbclone-minimenu-signup-background-color);
	--theme-header-minimenu-signup-font-color:var(--fbclone-minimenu-signup-font-color);
  --theme-header-search-background-color:var(--fbclone-minimenu-search-background-color);
  --theme-header-search-font-color: var(--fbclone-minimenu-search-font-color);

  --theme-footer-background-color:var(--fbclone-footer-background-color);
  --theme-footer-font-color:var(--fbclone-footer-font-color);
  --theme-footer-link-color:var(--fbclone-footer-links-color);
  --theme-footer-border-color:var(--fbclone-footer-border-color);
  /*
  TEXT & LINKS
  These values affect the size and colors of your text and links throughout your layout.
  */
  --theme-font-color:var(--fbclone-font-color);
  --theme-font-color-light:var(--fbclone-font-color-light);
  --theme-link-color:var(--fbclone-links-color);
  --theme-link-color-hover:var(--fbclone-links-hover-color);
  --theme-headline-color:var(--fbclone-headline-color);
  --theme-border-color:var(--fbclone-border-color);
  /*
  INPUT FIELDS AND BUTTONS
  These values style input fields and buttons that appear throughout the layout.
  */
  --theme-input-background-color:var(--fbclone-input-background-color);
  --theme-input-font-color:var(--fbclone-input-font-color);
  --theme-input-border-colors:var(--fbclone-input-border-color);
  --theme-button-background-color:var(--fbclone-button-background-color);
  --theme-button-background-color-hover:var(--fbclone-button-background-color-hover);
  --theme-button-font-color:var(--fbclone-button-font-color);
  --theme-button-font-color-hover:var(--fbclone-button-font-color-hover);
  --theme-button-border-color:var(--fbclone-button-border-color);
  --theme-button-border-color-hover:var(--fbclone-button-border-color-hover);
  --theme-secondary-button-background-color:var(--fbclone-secondary-button-background-color);
  --theme-secondary-button-background-color-hover:var(--fbclone-secondary-button-background-color-hover);
  --theme-secondary-button-font-color:var(--fbclone-secondary-button-font-color);
  --theme-secondary-button-font-color-hover:var(--fbclone-secondary-button-font-color-hover);
  --theme-secondary-button-border-color:var(--fbclone-secondary-button-border-color);
  --theme-secondary-button-border-color-hover:var(--fbclone-secondary-button-border-color-hover);
  /*
  TABS (BUTTON-STYLE)
  These colors are applied to the button-style tab menus which are often shown
  on browse pages.
  */
	--theme-buttontabs-font-color:var(--fbclone-font-color);
	--theme-buttontabs-font-color-hover:var(--fbclone-button-font-color);
	--theme-buttontabs-font-color-active:var(--fbclone-button-font-color);
  --theme-buttontabs-background-color-active:var(--fbclone-button-background-color);
	--theme-buttontabs-border-color:transparent;
	--theme-buttontabs-border-color-active:var(--fbclone-theme-color);;
  /*
  TABS
  These colors are applied to tab menus (as seen on several pages, including
  the member profile page).
  */
  --theme-tabs-background-color:var(--fbclone-box-background-color);
  --theme-tabs-background-color-active:var(--fbclone-button-background-color);
  --theme-tabs-font-color:var(--fbclone-font-color);
  --theme-tabs-font-color-active:var(--fbclone-theme-color);
  --theme-tabs-border-color:transparent;
  --theme-tabs-border-color-hover:var(--fbclone-theme-color);
  --theme-tabs-border-color-active:var(--fbclone-theme-color);
  /*
  LISTS
  These colors are applied to some lists, especially in pull-down menus.
  */
  --theme-list-background-color:var(--fbclone-box-background-color);
  --theme-list-background-color-alt:var(--fbclone-box-background-color-alt);
  --theme-list-background-color-hover:var(--fbclone-box-background-color-alt);
  --theme-comments-background-color:var(--fbclone-comments-background-colo);
  /*
  TAGS
  These colors are applied to tags, which appear on blogs, messages, etc.
  */
  --theme-tag-background-color:var(--theme-secondary-button-background-color);
  --theme-tag-font-color:var(--theme-secondary-button-font-color);
  /*
  INLINE PULLDOWN MENUS
  These colors style the inline pulldown menus that appear throughout the layout.
  */
  --theme-pulldown-background-color:var(--theme-list-background-color);
  --theme-pulldown-background-color-hover:var(--theme-button-background-color);
	--theme-pulldown-background-color-active:var(--theme-button-background-color);
  --theme-pulldown-font-color-active:var(--theme-button-font-color);
  --theme-pulldown-border-color:var(--theme-border-color);
  --theme-pulldown-contents-background-color:var(--theme-list-background-color);
  --theme-pulldown-contents-list-background-color-hover:var(--theme-list-background-color-hover);
  --theme-pulldown-contents-list-background-color-active:var(--theme-list-background-color-hover);
  --theme-pulldown-contents-list-font-color-active:var(--theme-font-color);
  
  /*Landing Page Colors*/
  --theme-lp-signup-button-color:var(--fbclone-lp-signup-button-color);
	--theme-lp-signup-button-border-color:var(--fbclone-lp-signup-button-border-color);
	--theme-lp-signup-button-font-color:var(--fbclone-lp-signup-button-font-color);
	--theme-lp-signup-button-hover-color:var(--fbclone-lp-signup-button-hover-color);
	--theme-lp-signup-button-hover-font-color:var(--fbclone-lp-signup-button-hover-font-color);
  
  /*Dashboard Color*/
  --theme-dashboard-list-background-color-hover:var(--fbclone-dashboard-list-background-color-hover);
  --theme-dashboard-list-border-color:var(--fbclone-dashboard-list-border-color);
  --theme-dashboard-font-color:var(--fbclone-dashboard-font-color);
  --theme-dashboard-link-color:var(--fbclone-dashboard-link-color);


  /*Font Size*/
  --theme-font-size:var(--fbclone-body-fontsize);
	--theme-font-size-small:0.8125rem;
  --theme-headline-size-large:1.5rem;
  --theme-headline-size-medium:var(--fbclone-heading-fontsize);
  --theme-title-size:var(--theme-font-size);
  --theme-menu-link-size:var(--fbclone-mainmenu-fontsize);
  --theme-tabs-font-size:var(--fbclone-tab-fontsize);
  --theme-font-weight-bold:500;

  /*Font Family*/
  --theme-font-family:var(--fbclone-body-fontfamily);
	--theme-heading-font-family:var(--fbclone-heading-fontfamily);
  --theme-header-menu-font-family:var(--fbclone-mainmenu-fontfamily);
	--theme-buttontabs-font-family:var(--fbclone-tab-fontfamily);
  --theme-tabs-font-family:var(--fbclone-tab-fontfamily);
  
  --theme-item-spacing:0.625rem;
  --theme-item-radius:0.625rem;
  --theme-item-transition:all .2s ease-in-out;
  --theme-item-shadow:0 0 5px rgba(0, 0, 0, .1);
  --theme-item-shadow-hover:0 0 5px rgba(0, 0, 0, .2);
  --theme-widget-spacing:1.25rem;
  --theme-widget-radius:var(--themewidget-radius);
}