/**

  This file is part of the Meeds project (https://meeds.io/).

  Copyright (C) 2020 - 2023 Meeds Association contact@meeds.io

  This program is free software; you can redistribute it and/or
  modify it under the terms of the GNU Lesser General Public
  License as published by the Free Software Foundation; either
  version 3 of the License, or (at your option) any later version.
  This program is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
  Lesser General Public License for more details.
  You should have received a copy of the GNU Lesser General Public License
  along with this program; if not, write to the Free Software Foundation,
  Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
*/
// Base color
@baseColorDefault:          #000000;
@baseColor:                 var(--allPagesBaseColor, @baseColorDefault); // text color , border color, and other UI elements..

// Background color
@baseBackgroundDefault: #ffffff;
@baseBackground: var(--allPagesBaseBackground, @baseBackgroundDefault); // default background , background for content display....
@baseBackgroundDark: var(--allPagesBaseBackgroundDark, darken(@baseBackgroundDefault, 10%));

// Primary Color
@primaryColorDefault: #3f8487;
@primaryColor: var(--allPagesPrimaryColor, @primaryColorDefault);
@primaryColorLight: var(--allPagesPrimaryColorLight, lighten(@primaryColorDefault, 10%));
@primaryDarkColorGradientEnd: var(--allPagesPrimaryDarkColorGradientEnd, darken(@primaryColorDefault, 5%));
@primaryDarkerColorGradientEnd: var(--allPagesPrimaryDarkerColorGradientEnd, darken(@primaryColorDefault, 15%));

// Background primary color
@primaryBackgroundDefault:   #f0f0f0;
@primaryBackground:   var(--allPagesPrimaryBackground, @primaryBackgroundDefault); // main background such as , header popup background, tab items...

// Background Disable Color
@disabledBackgroundButtonDefault: #e0e0e0;
@disabledBackgroundButton: var(--allPagesDisabledBackgroundButton, @disabledBackgroundButtonDefault);

// Secondary Color
@secondaryColorDefault: #e25d5d;
@secondaryColor: var(--allPagesSecondaryColor, @secondaryColorDefault);
@secondaryColorDarken1: darken(@secondaryColorDefault, 15%);;

@tertiaryColorDefault: #e25d5d;
@tertiaryColor: var(--allPagesTertiaryColor, @tertiaryColorDefault);

// Icon color
@orangeColor: #ff9916;
@colorIconDefault: @primaryColor;
@colorIconExtra: @primaryColor;
@colorIconPrimary: @primaryColor;
@colorIconOrange: var(--allPagesColorIconOrange, @orangeColor);
@colorIconSecondary:@baseBackground;
@sizeIcon24x24: 22px;
@sizeIcon12x12: 10px;
@sizeIcon64x64: 60px;
@sizeIcon32x32: 30px;
@sizeIconDefault: 18px;
@compressedFilesIconColor: var(--allPagesCompressedFilesIconColor, #717272);
@colorIconWarning: #f8b441;
@colorIconNoContent: #6d7d98;
@colorNoContentIcon: var(--allPagesColorNoContentIcon, @colorIconNoContent);
@orange: @orangeColor;

// Other base colors

@darkBlue: var(--allPagesDarkBlue, #295f9b);
@greyColorDefault: #e1e8ee;
@greyColor: var(--allPagesGreyColor, @greyColorDefault);
@greyColorLighten1Default: #707070;
@greyColorLighten1: var(--allPagesGreyColorLighten1, @greyColorLighten1Default);
@greyColorLighten1Opacity1: var(--allPagesGreyColorLighten1Opacity1, fade(@greyColorLighten1Default, 13%));
@greyColorLighten1Opacity2: var(--allPagesGreyColorLighten1Opacity2, fade(@greyColorLighten1Default, 8%));
@greyColorOpacity1: var(--allPagesGreyColorOpacity1, fade(@greyColorDefault, 35%));
@greyColorOpacity2: var(--allPagesGreyColorOpacity2, fade(@baseColorDefault, 12%));

@whiteColorDefault: #ffffff;
@lightWhite: var(--allPagesLightWhite, @whiteColorDefault);
@darkGrey: ~"var(--allPagesDarkGrey, rgb(0 0 0 / 87%))";
@lightGrey: var(--allPagesLightGrey, #f2f2f2);
@mediumGrey: #5f708a;
@disableBackground: @lightGrey;
@skeletonColor: #e6e6e6;
@lightYellowDefault: #ffd800;
@lightYellow: var(--allPagesLightYellow, @lightYellowDefault);
@darkYellowDefault: #ffb441;
@darkYellow: var(--allPagesDarkYellow, @darkYellowDefault);
@blackColorDefault: #000000;
@blackColor: var(--allPagesBlackColor, @blackColorDefault);
@blackColorDark: var(--allPagesBlackColorDark, darken(@blackColorDefault, 15%));
@maskColor: ~"var(--allPagesMaskColor, #707070BF)";

@white: @whiteColorDefault;
@black: @blackColorDefault;
@grayLight: #999;
@grayLighter: #eee;

@menuTextColor: ~"var(--allPagesMenuTextColor, @{darkGrey})";

// Accent colors
// -------------------------
@errorColor:        #bc4343;     // border error
@errorColorLight:   #ffffff;   // background error

@warningColor:      #ffb441;     // border warning
@warningColorLight: #ffffff;   // background warning

@infoColor:         #476a9c;    // border info
@infoColorLight:    #ffffff;    // background info

@successColor:      #2eb58c;        // border success
@successColorLight: #ffffff;    // background success

@backgroundSuccesNotification: var(--allPagesBackgroundSuccesNotification, @successColorLight);
@backgroundWarningNotification: var(--allPagesBackgroundWarningNotification, @warningColorLight);
@colorWarningNotification: var(--allPagesColorWarningNotification, #905904);
@backgroundInfoNotification: var(--allPagesBackgroundInfoNotification, @infoColorLight);
@backgroundErrorNotification: var(--allPagesBackgroundErrorNotification, @errorColorLight);

@borderColor: var(--allPagesBorderColor, @greyColorDefault);
@borderColorLight: #666666;
@borderColorDark:  darken(@greyColorDefault, 10%);
@borderSuccesNotification: @successColor;
@borderWarningNotification: @warningColor;
@borderInfoNotification: @infoColor;
@borderErrorNotification: var(--allPagesBorderErrorNotification, @errorColor);
@borderErrorInput: var(--allPagesBorderErrorInput, #cb6d6d);

// Image Patch
// -------------------------
@base-images-path:      "/platform-ui/skin/images";
@images-path:       "@{base-images-path}/themes/default";

// Font icon path
@font-path:       "/platform-ui/skin/fonts";

@header-popup-bg: var(--allPagesHeader-popup-bg, #484848);
@header-popup-title: var(--allPagesHeader-popup-title, #c1c1c1);

// Scaffolding
// -------------------------
@bodyBackground: @baseBackground;
@sidebarBackground: @secondaryColor;
@contentBackground:  @baseBackground  url("@{images-path}/ShareImages/Background/texture.png") repeat left top;
@textMediumColor: @baseColorMedium;           // #808080
@textLightColor: @baseColorLight;       // #707070

@textTitleColorDefault: #20282C;
@textTitleColor: ~"var(--appTextTitleColor, var(--allPagesBaseTextTitleColor, @{textTitleColorDefault}))";
@textTitleFontSizeDefault: 20px;
@textTitleFontSize: ~"var(--appTextTitleFontSize, var(--allPagesBaseTextTitleFontSize, @{textTitleFontSizeDefault}))";
@textTitleFontWeightDefault: bold;
@textTitleFontWeight: ~"var(--appTextTitleFontWeight, var(--allPagesBaseTextTitleFontWeight, @{textTitleFontWeightDefault}))";
@textTitleFontStyleDefault: normal;
@textTitleFontStyle: ~"var(--appTextTitleFontStyle, var(--allPagesBaseTextTitleFontStyle, @{textTitleFontStyleDefault}))";

@textHeaderColorDefault: #707070;
@textHeaderColor: ~"var(--appTextHeaderColor, var(--allPagesBaseTextHeaderColor, @{textHeaderColorDefault}))";
@textHeaderFontSizeDefault: 18px;
@textHeaderFontSize: ~"var(--appTextHeaderFontSize, var(--allPagesBaseTextHeaderFontSize, @{textHeaderFontSizeDefault}))";
@textHeaderFontWeightDefault: normal;
@textHeaderFontWeight: ~"var(--appTextHeaderFontWeight, var(--allPagesBaseTextHeaderFontWeight, @{textHeaderFontWeightDefault}))";
@textHeaderFontStyleDefault: normal;
@textHeaderFontStyle: ~"var(--appTextHeaderFontStyle, var(--allPagesBaseTextHeaderFontStyle, @{textHeaderFontStyleDefault}))";

@textColorDefault: #20282c;
@textColor: ~"var(--appTextColor, var(--allPagesBaseTextColor, @{textColorDefault}))";
@textFontSizeDefault: 16px;
@textFontSize: ~"var(--appTextFontSize, var(--allPagesBaseTextFontSize, @{textFontSizeDefault}))";
@textFontWeightDefault: normal;
@textFontWeight: ~"var(--appTextFontWeight, var(--allPagesBaseTextFontWeight, @{textFontWeightDefault}))";
@textFontStyleDefault: normal;
@textFontStyle: ~"var(--appTextFontStyle, var(--allPagesBaseTextFontStyle, @{textFontStyleDefault}))";

@textSubtitleColorDefault: #707070;
@textSubtitleColor: ~"var(--appTextSubtitleColor, var(--allPagesBaseTextSubtitleColor, @{textSubtitleColorDefault}))";
@textSubtitleFontSizeDefault: 12px;
@textSubtitleFontSize: ~"var(--appTextSubtitleFontSize, var(--allPagesBaseTextSubtitleFontSize, @{textSubtitleFontSizeDefault}))";
@textSubtitleFontWeightDefault: normal;
@textSubtitleFontWeight: ~"var(--appTextSubtitleFontWeight, var(--allPagesBaseTextSubtitleFontWeight, @{textSubtitleFontWeightDefault}))";
@textSubtitleFontStyleDefault: normal;
@textSubtitleFontStyle: ~"var(--appTextSubtitleFontStyle, var(--allPagesBaseTextSubtitleFontStyle, @{textSubtitleFontStyleDefault}))";

@textDisabledColorDefault: #c6c6c6;
@textDisabledColor: ~"var(--appTextDisabledColor, var(--allPagesBaseTextDisabledColor, @{textDisabledColorDefault}))";

@placeholderText:       rgba(0, 0, 0, 0.38);

// Links
// -------------------------
@linkColor:             @primaryColor;      // Special title, text, hover, press, hyper-link or selected link
@linkColorHover:        @primaryColor;

@blueLinkColorDefault:  #0782C1;
@blueLinkColor:         var(--allPagesLinkBlueColor, @blueLinkColorDefault);


// Component Variables
// -------------------------

// Define common padding and margin size
// Currenly only use for the box
@gutterSizeBase:      10px;
@gutterSizeXLarge:      20px;
@gutterSizeLarge:       15px;
@gutterSizeSmall:       5px;


// Tables
// -------------------------
@tableBackground:                   transparent;        // overall background-color
@tableBackgroundAccent: var(--allPagesTableBackgroundAccent, #f6f7fa);
@tableBackgroundHover: @primaryBackgroundHover;   // for hover
@tableBorder:                       @borderColor;         // table and cell border


// Buttons
// -------------------------
@btnFontSize: ~"var(--allPagesBaseTextFontSize, @{textFontSizeDefault})";
@btnColor: @darkGrey;
@btnBorder: var(--allPagesBtnBorder, @greyColor);
@btnBorderBottom: var(--allPagesBtnBorderBottom, darken(@greyColorDefault, 10%));
@btnDisableColor: var(--allPagesBtnDisableColor, #c6c6c6);

@btnPrimaryColor: @lightWhite;
@btnPrimaryBackground:              @primaryColor;
@btnPrimaryBackgroundHighlight:     @primaryColor;
@btnPrimaryBorder:          @primaryColor;

@paddingXLarge:         var(--allPagesPaddingXLarge, 9px 15px);
@paddingLarge:          var(--allPagesPaddingLarge, 4px 10px);
@paddingDefault:        var(--allPagesPaddingDefault, 3px 10px);
@paddingSmall:          var(--allPagesPaddingSmall, 2px 10px);
@paddingMini:           var(--allPagesPaddingMini, 0 10px);

// Forms
// -------------------------
@inputColor: @baseColorDark;
@inputDisableColor: @textLightColor;
@inputBackground: @baseBackground;
@inputBackgroundUneditable: darken(@baseBackgroundDefault, 1%);
@inputBorder:                     @borderColor;
@inputBorderRadius:               @baseBorderRadius;
@inputDisabledBackground: @primaryBackgroundHover;
@formActionsBackground: @primaryBackground;

@inputFocusColor:                 @inputColor;
@inputFocusBorder:                var(--allPagesInputFocusBorder, lighten(@secondaryColorDefault, 30%));
@inputFocusShadow:                var(--allPagesInputFocusShadow, lighten(@secondaryColorDefault, 40%));

@inputHeight:                     @baseLineHeight + 20px;

@uiCheckboxCheckedBorder: @baseBackground;
@uiCheckboxBackground: @primaryColor;

@uiRadioCheckedColor: @baseBackground;
@uiRadioCheckedBackground: @greyColor;
@uiRadioCheckedDisabledBackground: @baseColorLight;

@uiCheckboxCheckedDisabledBorder: @baseColorLight;
@formReadOnyBackground: @primaryBackgroundHover;
@formReadOnyColor: @baseColorDark;


// Dropdowns
// -------------------------
@dropdownBorder: @baseBackground;
@dropdownBorderLeft: darken(@baseBackgroundDefault, 20%);
@dropdownBackground: @baseBackground;
@dropdownLinkBackgroundActive:  @primaryColor;
@dropdownLinkBackgroundActiveGradient:  @primaryDarkColorGradientEnd;
@dropdownLinkBackgroundHover: @primaryColor;
@dropdownLinkBackgroundHoverDark: @primaryDarkColor;
@dropdownLinkBackgroundHoverGradient: @primaryDarkColorGradientEnd;
@dropdownLinkBackgroundHoverGradientDarker: @primaryDarkerColorGradientEnd;


@dropdownLinkColor: @textColor;
@dropdownLinkColorHover: var(--allPagesDropdownLinkColorHover, #fff);
@dropdownLinkColorActive:       var(--allPagesDropdownLinkColorActive, #fff);
@dropdownDividerTop:            @borderColor;

// Typography
// -------------------------
@fontFamily: Helvetica, arial, sans-serif;
@sansFontFamily:        "Helvetica Neue", Helvetica, Arial, sans-serif;
@sansBoldFontFamily :   "Helvetica Neue Bold" , Helvetica, Lucida, Arial, sans-serif;
@serifFontFamily:       Georgia, "Times New Roman", Times, serif;

@baseFontSize:          16px;
@inputFontSize:         16px;
@baseFontFamily:        @fontFamily;
@baseLineHeight:        20px;

@headingsFontFamily:    inherit;
@headingsFontWeight:    bold;
@headingsColor:         inherit;

// Component sizing
// -------------------------
@fontSize:              var(--allPagesFontSize4, @baseFontSize);
@fontSizeMini:          var(--allPagesFontSizeMini, 11px);
@fontSizeSmall:         var(--allPagesFontSizeSmall, 12px);
@fontSizeLarge:         var(--allPagesFontSizeLarge, 16px);
@fontSizeXlarge:        var(--allPagesFontSizeXlarge, 18px);
@fontsizeXlarge:        @fontSizeXlarge;
@h1FontSize:            1.75em;
@h2FontSize:            1.4375em;
@h3FontSize:            1.125em;
@h4FontSize:            1em;
@h5FontSize:            1em;
@h6FontSize:            1em;

@baseBorderRadius:      4px;
@borderRadiusLarge:     5px;
@borderRadiusSmall:     3px;
@borderRadius: var(--allPagesBorderRadius, @baseBorderRadius);

@applicationSpaceBottomDefault: 20px;
@applicationSpaceBottom: var(--allPagesApplicationSpaceBottom, @applicationSpaceBottomDefault);


// COMPONENT VARIABLES
// --------------------------------------------------


// Z-index master list
// -------------------------
// Used for a bird's eye view of components dependent on the z-axis
// Try to avoid customizing these :)
@zindexFloadingButton:          var(--allPagesZindexFloatingButton, 1010);
@zindexDropdown:          var(--allPagesZindexDropdown, 1040);
@zindexPopover:           var(--allPagesZindexPopover, 1030);
@zindexFixedNavbar:       var(--allPagesZindexFixedNavbar, 1030);
@zindexFixedNavbarUnder:  var(--allPagesZindexFixedNavbar, 1000);
@zindexFixedNavbarUnderMore :  var(--allPagesZindexFixedNavbarMore, 980);
@zindexStickyContainer:   var(--allPagesZindexStickyContainer, 1020);
@zindexStickyContainerUnder:   var(--allPagesZindexStickyContainerUnde, 990);
@zindexInnerModal:        var(--allPagesZindexInnerModal, 1030);
@zindexDrawerParent:      var(--zindexDrawerParent,auto);
@zindexDrawer:            var(--allPagesZindexDrawer, 1035);
@zindexTooltip:           var(--allPagesZindexTooltip, 1040);
@zindexModalBackdrop:     var(--allPagesZindexModalBackdrop, 1040);
@zindexModal:             var(--allPagesZindexModal, 1050);
@zindexSnackBar:          var(--allPagesZindexSnackbar, 1060);


// Hr border color
// -------------------------
@hrBorder: @primaryBackgroundLight;


// Horizontal forms & lists
// -------------------------
@horizontalComponentOffset: 180px;


// Wells
// -------------------------
@wellBackground: @primaryBackgroundLight;
@wellBorder: darken(@primaryBackgroundDefault, 4%);

// Single Page Application≈ì Layout
// -----------------------------------
@pageWidthDefault: 1320px; // = 1280px + 20px * 2 as margins for mobile
@pageWidth: var(--allPagesWidth, @pageWidthDefault);
@singlePageApplicationWidth: @pageWidth; // Deprecated in favor of @pageWidth

// Navbar
// -------------------------
@navbarCollapseWidth:             979px;
@navbarCollapseDesktopWidth:      @navbarCollapseWidth + 1;

@navbarHeight: 58px;
@navbarBackgroundHighlight:          #ffffff;
@navbarBackground:                   darken(@navbarBackgroundHighlight, 5%);
@navbarBorder:                       darken(@navbarBackground, 12%);

@navbarText:                      var(--allPagesNavbarText, #777);
@navbarLinkColor:                 var(--allPagesNavbarLinkColor, #777);
@navbarLinkColorHover: @baseColorDark;
@navbarLinkColorActive: @baseColorMedium;
@navbarLinkBackgroundHover:       transparent;
@navbarLinkBackgroundActive:      darken(@navbarBackground, 5%);

@navbarBrandColor:                @navbarLinkColor;

// Inverted navbar
@navbarInverseBackgroundDefault:         #111111;
@navbarInverseBackground:                @navbarInverseBackgroundDefault;
@navbarInverseBackgroundHighlight:       #222222;
@navbarInverseBorder:                    #252525;

@navbarInverseText:                      @textLightColor;
@navbarInverseLinkColor:                 @textLightColor;
@navbarInverseLinkColorHover: @baseBackground;
@navbarInverseLinkColorActive:           @navbarInverseLinkColorHover;
@navbarInverseLinkBackgroundHover:       transparent;
@navbarInverseLinkBackgroundActive:      @navbarInverseBackground;

@navbarInverseSearchBackground:          var(--allPagesNavbarInverseSearchBackground, lighten(@navbarInverseBackgroundDefault, 25%));
@navbarInverseSearchBackgroundFocus:     @baseBackground;
@navbarInverseSearchBorder:              @navbarInverseBackground;
@navbarInverseSearchPlaceholderColor:    var(--allPagesNavbarInverseSearchPlaceholderColor, #ccc);

@navbarInverseBrandColor:                @navbarInverseLinkColor;


// Pagination
// -------------------------
@paginationBackground: @baseBackground;
@paginationBorder:                      @borderColor;
@paginationActiveBackground: @primaryBackgroundLight;


// Hero unit
// -------------------------
@heroUnitBackground: @secondaryColor;
@heroUnitHeadingColor: @baseBackground;
@heroUnitLeadColor:       inherit;


// Form states and alerts
// -------------------------
@warningText: #333333;
@warningTextFocus: var(--allPagesWarningTextFocus, darken(@warningText, 10%));
@warningBackground: @warningColorLight;
@warningBorder: @warningColor;

@errorText: #333333;
@errorBackground: @errorColorLight;
@errorBorder: @errorColor;

@successText: #333333;
@successBackground: @successColorLight;
@successBorder: @successColor;

@infoText: #333333;
@infoBackground: @infoColorLight;
@infoBorderDefault: #476a9c;
@infoBorder: @infoBorderDefault;
@infoBorderFocus: darken(@infoBorderDefault, 10%);


// Tooltips and popovers
// -------------------------
@tooltipColor:            var(--allPagesTooltipColor, #fff);
@tooltipBackground:       var(--allPagesTooltipBackground, #000);
@tooltipArrowColor:       @tooltipBackground;

@popoverBackground:         @baseBackgroundDefault;
@popoverArrowWidth:         10px;
@popoverArrowColor:         @popoverBackground;
@popoverTitleBackground:    darken(@popoverBackground, 3%);
@popoverTitleBackgroundDark:    darken(@popoverTitleBackground, 5%);




// Special enhancement for popovers
@popoverArrowOuterWidth:  @popoverArrowWidth + 1;
@popoverArrowOuterColor:  @borderColor;


// RESPONSIVE
// --------------------------------------------------
@smallMobileWidth: 380px;
@maxMobileWidth: 599.98px;
@minTabletWidth: (@maxMobileWidth + 0.02px);
@maxTabletWidth: 959.98px;
@minLargeTabletWidth: (@maxTabletWidth + 0.02px);
@maxLargeTabletWidth: 1263.98px;
@minDesktop: (@maxLargeTabletWidth + 0.02px);
@maxDesktop: 1903.98px;
@minLargeDesktop: (@maxDesktop + 0.02px);

// Default 940px grid
// -------------------------
@gridColumns:             12;
@gridColumnWidth:         60px;
@gridGutterWidth:         20px;
@gridRowWidth:            (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));

// 1200px min
@gridColumnWidth1200:     70px;
@gridGutterWidth1200:     30px;
@gridRowWidth1200:        (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1));

// 768px-979px
@gridColumnWidth768:      42px;
@gridGutterWidth768:      20px;
@gridRowWidth768:         (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1));


// Fluid grid
// -------------------------
@fluidGridColumnWidth:    percentage(@gridColumnWidth/@gridRowWidth);
@fluidGridGutterWidth:    percentage(@gridGutterWidth/@gridRowWidth);

// 1200px min
@fluidGridColumnWidth1200:     percentage(@gridColumnWidth1200/@gridRowWidth1200);
@fluidGridGutterWidth1200:     percentage(@gridGutterWidth1200/@gridRowWidth1200);

// 768px-979px
@fluidGridColumnWidth768:      percentage(@gridColumnWidth768/@gridRowWidth768);
@fluidGridGutterWidth768:      percentage(@gridGutterWidth768/@gridRowWidth768);


// Breadcrumbs
// -------------------------
@breadcrumbColor: @baseColorDark;
@breadcrumbHoverColor:      @primaryColor;
@breadcrumbActiveColor:     @primaryColor;

// Calendar Component
// -------------------------
@calComponentWidth:           var(--allPagesCalComponentWidth, 225px);
@calComponentWidthTitleColor: @baseBackground;
@calComponentDayColor:          @textColor;
@calComponentOtherMonthColor:     @textLightColor;
@calComponentDayHoverBackground: @primaryBackground;
@calComponentDaySelectedBackground:   @primaryColor;
@calComponentDaySelectedColor: @baseBackground;
@calComponentDayTodayBackground:    @primaryColor;
@calComponentDayTodayColor: @baseBackground;
@calComponentCurrentWeekBackground: @baseBackground;
@calComponentCurrentWeekBorder:     @borderColor;
@calComponentTimeInputBoxBackground: @primaryColor;
@calComponentTimeInputColor:      @textColor;
@calComponentTimeInputBackground: @baseBackground;
@calComponentTimeInputBorder:       @borderColor;
@calComponentTimeInputTorcusBorder:   @primaryColorLighter;

// Label Badges
// -------------------------
@labelColor: @baseBackground;
@labelBackground: @baseColorLight;
@labelHoverBackground:          @primaryColorLighter;

// Popup
@uiPopupBackground: @baseBackground;
@uiPopupBorder:             @borderColor;
@uiPopupHeaderBackground: var(--allPagesUiPopupHeaderBackground, #f2f2f2);
@uiPopupHeaderBorder: var(--allPagesUiPopupHeaderBorder, 0px solid  @primaryBackground);
@uiPopupTitleColor:           @textColor;
@uiPopupContentBackground: @baseBackground;
@popupMessageColor:           @textColor;

@multipleMessageBackground: @primaryBackgroundLight;
@multipleMessageBorder:         @borderColor;

// Tabs Normal
// -------------------------
@tabNormalLinkColor:          @textColor;
@tabNormalLinkBorder:           @borderColor;
@tabNormalLinkBackground: var(--allPagesTabNormalLinkBackground, #f0f4f7);

@tabNormalActiveLinkBorder:       @borderColor;
@tabNormalActiveLinkBackground: @primaryColor;

@tabNormalContentBackground: @baseBackground;
@tabNormalContentBorder:        @borderColor;

// Tabs GrayInPage
// -------------------------
@tabGrayInPageNavBackground: @primaryBackgroundHover;
@tabGrayInPageNavBorder:          @borderColor;
@tabGrayInPageActiveLinkStartBackground: @baseBackground;
@tabGrayInPageActiveLinkMiddleBackground: @primaryBackground;
@tabGrayInPageActiveLinkEndBackground:    @tabGrayInPageActiveLinkMiddleBackground;
@tabGrayInPageContentBackground: @primaryBackground;

@tabGrayInPageLinkColor:        @textColor;
@tabGrayInPageLinkBorder: @primaryBackground;
@tabGrayInPageHoverLinkColor: @primaryBackground;
@tabGrayInPageHoverLinkBorder:      @borderColor;
@tabGrayInPageCaretColor: @baseColorMedium;
@tabGrayInPageHoverCaretColor:      @primaryColorLighter;

// Tab Container
// -------------------------
@tabContainerBackground: @baseColorLight;
@tabContainerLinkColor: @baseBackground;
@tabContainerActiveLinkBackground:    @primaryColorLighter;
@tabContainerActiveLinkColor: @baseBackground;

// Toolbar
// -------------------------
@toolbarDarkStartBackground:      var(--allPagesToolbarDarkStartBackground, #2D3138);
@toolbarDarkEndBackground:        var(--allPagesToolbarDarkEndBackground, #2D3138);
@toolbarDarkBorder:           var(--allPagesToolbarDarkBorder, #2D3138);
@toolbarDarkLinkColor: @baseBackground;
@toolbarDarkLinkHoverColor: @baseBackground;
@toolbarDarkBackgroundHover: var(--allPagesToolbarDarkBackgroundHover, #3f3f3f);

@toolbarLightStartBackground:     @baseBackground;
@toolbarLightEndBackground:       @baseBackground;
@toolbarLightBorder:          @baseBackground;
@toolbarLightLinkColor:         @primaryColor;
@toolbarLightLinkHoverColor:      var(--allPagesToolbarLightLinkHoverColor, #707070);
@toolbarLightBackgroundHover:           @baseBackground;

//UIBox

@uiBoxBg : @baseBackground;
@uiBoxBorder : @borderColor;
@uiBoxHeadBg : @primaryBackground;
@uiBoxGray: @primaryBackground;

// Quote
@quoteBorder: var(--allPagesQuoteBorder, @greyColorLighten1Default);
@quoteBackgound: none;
@quoteBackgoundForum: var(--allPagesQuoteBackgoundForum, #eff4fa);
@quoteBorderForum: var(--allPagesQuoteBorderForum, #aac5e3);

@quotecolor: @textColor;

@quotePrimaryBorderDefault: lighten(@primaryColorDefault, 40%);
@quotePrimaryBorder: var(--allPagesQuotePrimaryBorder, @quotePrimaryBorderDefault);


// UIMention
@uiMentionColor: @baseBackground;
@uiMentionBorder: @infoColor;
@uiMentionBackground: @mentionBackground;

//@paddingXLarge:         10px 15px;
//@paddingLarge:          4px 10px;
//@paddingSmall:          2px 10px;
//@paddingMini:           0 10px;

// Global Loading
@globalLoadingBackground: var(--allPagesGlobalLoadingBackground, #808080);
@globalLoadingBorder: var(--allPagesGlobalLoadingBorder, #333);
@globalLoadingColor: var(--allPagesGlobalLoadingColor, #fff);

// navigation left
@plfNavigationTitleColor: @primaryColor;
@plfNavigationBgBorderLeft :@primaryColorLighter;
@plfNavigationBorderLeft: @lightWhite;
@plfNavigationColor: @baseColorMedium;
@plfNavigationBgSelected : @baseBackground;
@plfNavigationBorderSelected: @borderColor;
@plfNavigationColorSelected: @baseColorMedium;
@plfNavigationColorHover:  @linkColorHover;

// notification
@notifcationUnreadBackground: var(--allPagesNotifcationUnreadBackground, #e3ecf6);

// -------------------------Color  generation formula -------------------------//

//Return true if base color is darker ( this is default skin)
.setColor (@a) when (lightness(@a) < 50%) {
  @baseColorDark:       var(--allPagesBaseColorDark, lighten(@baseColorDefault, 20%)); // #333333 Default color for all title, text, text input, label
  @baseColorMedium:         var(--allPagesBaseColorMedium, lighten(@baseColorDefault, 50%)); // #808080 Navigation text color, special purpose in use
  @baseColorLight:        var(--allPagesBaseColorLight, lighten(@baseColorDefault, 44%)); // #707070 Default @baseColorLight color for small text, sub title, text field explanation
  @primaryBackgroundHover:  var(--allPagesPrimaryBackgroundHover, darken(@primaryBackgroundDefault, 4%));
  @primaryBackgroundLight:  var(--allPagesPrimaryBackgroundLight, lighten(@primaryBackgroundDefault, 3%));
  @primaryBackgroundLighter:  var(--allPagesPrimaryBackgroundLighter, lighten(@primaryBackgroundDefault, 13%));
  @revealBackgroundHover:  var(--allPagesRevealBackgroundHover, lighten(@baseColorDefault, 98%));
  @revealBackgroundSelected: var(--allPagesRevealBackgroundSelected, lighten(spin(@primaryColorDefault, -10%), 52%));
  @primaryDarkerColor:    var(--allPagesPrimaryDarkerColor, darken(@primaryColorDefault, 10.5%));   //#224469
  @primaryDarkColor:    var(--allPagesPrimaryDarkColor, darken(@primaryColorDefault, 15%));
  @primaryColorLighterDefault: lighten(@primaryColorDefault, 18.5%);
  @primaryColorLighter:   var(--allPagesPrimaryColorLighter, @primaryColorLighterDefault);
  @primaryColorLighterGradientEnd: var(--allPagesPrimaryColorLighterGradientEnd, darken(@primaryColorLighterDefault, 15%));
  // button primary
  @btnBackground:            @baseBackground;
  @btnBackgroundHighlight:  @primaryBackground;

  @dropdownArrowRight:  var(--allPagesDropdownArrowRight, darken(@baseBackgroundDefault, 20%));   // #aac5e3
  @quotePrimaryBackground:        var(--allPagesQuotePrimaryBackground, lighten(@quotePrimaryBorderDefault, 18%));  // #aac5e3
}

//Return true if base color is lighter
.setColor (@a) when (lightness(@a) >= 50%) {
  @baseColorLight:        var(--allPagesBaseColorLight, darken(@baseColorDefault, 20%));
  @baseColorMedium:         var(--allPagesBaseColorMedium, lighten(@baseColorDefault, 50%));
  @baseColorDark:       var(--allPagesBaseColorDark, lighten(@baseColorDefault, 60%));
  @primaryBackgroundLighter:  var(--allPagesPrimaryBackgroundLighter, lighten(@primaryBackgroundDefault, 14%));
  @primaryBackgroundLight:  var(--allPagesPrimaryBackgroundLight, lighten(@primaryBackgroundDefault, 4%));
  @primaryBackgroundHover : var(--allPagesPrimaryBackgroundHover , darken(@primaryBackgroundDefault, 3%));
  @revealBackgroundHover:  var(--allPagesRevealBackgroundHover, darken(@baseColorDefault, 98%));
  @revealBackgroundSelected: var(--allPagesRevealBackgroundSelected, darken(spin(@primaryColorDefault, -10%), 52%));
  @primaryColorLighterDefault: lighten(@primaryColorDefault, 10.5%);
  @primaryColorLighter:   var(--allPagesPrimaryColorLighter, @primaryColorLighterDefault);    //#224469
  @primaryColorLighterGradientEnd: var(--allPagesPrimaryColorLighterGradientEnd, darken(@primaryColorLighterDefault, 15%));
  @primaryDarkColor:    var(--allPagesPrimaryDarkColor, darken(@primaryColorDefault, 15%));
  @primaryDarkerColor:   var(--allPagesPrimaryDarkerColor , darken(@primaryColorDefault, 18.5%));
  // button primary
  @btnBackground:           @primaryBackground;
  @btnBackgroundHighlight: @baseBackground;
  @dropdownArrowRight:  var(--allPagesDropdownArrowRight, lighten(@baseBackgroundDefault, 90%));
  @quotePrimaryBackground:        var(--allPagesQuotePrimaryBackground, darken(@primaryColorDefault, 10%)); // #aac5e3
}
.setColor(@baseColorDefault);

/* default btn */
@btnBackgroundColor: @baseBackground;
@btnBackgroundImage: none;
@btnHoverBackgroundColor: @greyColor;
@btnDisableBackground: var(--allPagesBtnDisableBackground, #f2f2f2);

/* primary btn */
@btnPrimaryHoverBackgroundColorDefault: darken(desaturate(spin(@primaryColorDefault, 3.7152), 13.9064), 11.9608);
@btnPrimaryHoverBackgroundColor: var(--allPagesBtnPrimaryHoverBackgroundColor, @btnPrimaryHoverBackgroundColorDefault);
@btnPrimaryHoverBackgroundPosition: 0 -45px;
@btnPrimaryDisableHoverBackground: @secondaryColor;
@btnPrimaryDisableBackground: var(--allPagesBtnPrimaryDisableBackground, lighten(desaturate(spin(@primaryColorDefault, 0.0714), 0.6494), 22.7451));

/* btn group */
@btnGroupActiveBackground: inherit;
@btnGroupActiveColor: @baseBackground;
@btnGroupActiveBorderColor: @primaryColor;
@btnGroupBackground: var(--allPagesBtnGroupBackground, #f0f4f7);
@btnGroupHoverBackgroundColor: @btnHoverBackgroundColor;

/* dropdown */
@dropdownMenuBorderColor: @baseBackground;
@dropdownEndColor: @primaryColor;

/* btn dropdown */
@btnDropdownImage: none;
@btnDropdownBackground: @greyColor;

/* btn-primary dropdown */
@btnPrimaryDropdownBackground: @primaryColor;

/* btn group dropdown */
@btnGroupDropdownBackground: @greyColor;
@btnGroupOpenDropdownBackground: @greyColor;

/* switchBtnHandle */
@switchBtnHandleStartColor: var(--allPagesSwitchBtnHandleStartColor, #b5bdc6);
@switchBtnHandleEndColor: var(--allPagesSwitchBtnHandleEndColor, #b5bdc6);

/* switchBtnLabelOff */
@uiSwitchOffColor: @greyColor;
@switchBtnLabelOffStartColor: @uiSwitchOffColor;
@switchBtnLabelOffStartColor: @uiSwitchOffColor;

/* switchBtnLabelOn */
@uiSwitchOnColor: var(--allPagesUiSwitchOnColor, @primaryColorDefault);
@switchBtnLabelOnStartColor: @uiSwitchOnColor;

/* uiradio */
@uiRadioCheckedBeforeBackground: @primaryColor;
@uiRadioCheckedAfterBackground: @baseBackground;

/* uicheckbox */
@uiCheckboxCheckedBackground: @primaryColor;

/* uiSwitcher */
@uiSwitcherBackground: var(--allPagesUiSwitcherBackground, #d8dadd);
@uiSwitcherOnBackground: @primaryColor;
@uiSwitcherOffBackground: var(--allPagesUiSwitcherOffBackground, #9ea6b2);

/* input-append btn */
@inputAppendBtnBackground: @primaryColor;

/* Tags and mention */
@mentionBackground: @primaryColor;
@mentionPadding: 2px 20px 0 5px;
@mentionColor: @lightWhite;
@mentionBorder: none;
@mentionRemovePositionRight: 6px;
@removeMentionColor: @errorColor;
@removeMentionTop: 2px;
@removeTagColor: @removeMentionColor;

/* Thumbnail */
@ThumbnailMargin: 45px 0 0 40px;
@ThumbnailView-DownloadColor: transparent;
@ColorThumbnailBackground: rgba(0,0,0,0.4);
@ThumbnailView-DownloadFloat: left;
@ThumbnailView-DownloadDisplay: inline-block;
@ThumbnailView-DownloadWidth: 22px;
@ThumbnailView-DownloadHeight: 22px;
@ThumbnailView-Download-IconsColor: @baseBackground;
@ThumbnailView-DownloadMarginRight: 15px;
@ThumbnailView-DownloadMarginLeft: -5px;

/* popover  */
@popoverBorder: none;

/* */
@tiptipBorder: 1px none @greyColor;

/* alerts  */
@linkInAlertColor: @baseBackground;                   // link in the alert
@linkInAlertTextDecoration: underline;                // underline link in the alert

/* progress bar */
@progressBarBorderRadius: 0;
@progressBarIconBackground: @greyColor;
@progressBarIconBackgroundImage: none;

/*  tabs  */
@tabNormalLinkBorderTop: none;
@tabNormalLinkBorderRight: none;
@tabNormalLinkBorderBottom: 2px solid #f0f4f7;
@tabNormalLinkBorderLeft: 2px solid @greyColor;
@tabNormalLinkHoverBorderTop: none;
@tabNormalLinkHoverBorderRight: @tabNormalLinkBorderRight;
@tabNormalLinkHoverBorderBottom: 1px solid #f8f8f8;
@tabNormalLinkHoverBorderLeft: none;
@tabNormalActiveLinkColor: @baseBackground;
@tabContentBorder: 2px solid @greyColor;

/* tables */
@tableThBackground: var(--allPagesTableThBackground, #f6f7fa);
@tableRadius: 0px;

/*  popup   */
@uiPopupHeaderBoxShadow: none;
@popupTitleFontSize: 18px;
@uiActionBorderBorderTop: none;
@uiActionBorderMarginTop: 30px;
@uiPopupHeaderMarginBottom: 7px;

/* pagination */
@pageIteratorStartColor: @baseBackground;
@pageIteratorEndColor: @baseBackground;
@pageIteratorHoverBackground: @greyColor;
@pageIteratorColor: @baseBackground;
@pageIteratorBackgroundPosition: 0 -30px;
@pageIteratorActiveBackground: @primaryColor;
@pageIteratorMargin: 4px;


/* Welcome pages */
@welcomePagesBackground: var(--allPagesWelcomePagesBackground, @secondaryColorDefault);

/* Badge */
@badgeDefaultBackground: @greyColor;

/* uiBox */
@weekListBackground: @primaryColor;
@calComponentTodayBackground: @primaryColor;
@uicalendarComponentTitleBackground: @primaryColor;
@uiCalendarComponentTitleBackground: @primaryColor;
@uiMiniCalendarTitleBackground: @primaryColor;
@uiMiniCalendarTodayBackground: var(--allPagesUiMiniCalendarTodayBackground, #eceaea);
@uiMiniCalendarCurrentWeekBackground: @baseBackground;
@uiMiniCalendarBorder: none;
@uicalendarComponentBorder: none;

/* Alert */
@alertBorder: var(--allPagesAlertBorder, 1px);
@alertSuccessColor: var(--allPagesAlertSuccessColor, #084130);
@alertErrorColor: var(--allPagesAlertErrorColor, #771414);
@alertInfoColor: var(--allPagesAlertInfoColor, #193e67);
@alertWarningColor: var(--allPagesAlertWarningColor, #8f5804);
@alertWarningIconColor: var(--allPagesAlertWarningIconColor, #b46f05);


/* Left bar */
@margin: 57px;

@topbarHeight: 57px;

/* The background of drop area when a file is dragged into it */
@dropFileAreaBackgroundOnDragEnter: var(--allPagesDropFileAreaBackgroundOnDragEnter, #e6e6e6);

// Other variables
@commentBackgroundColor: var(--allPagesCommentBackgroundColor, #f2f5f8);
@uiTreeEmptyColor: @lightWhite;
@toolbarContainerDarkColor: @lightWhite;
@uiPageIteratorActiveColor: @lightWhite;
@btnGroupColor: @lightWhite;
@uiActionBarBtnColor: @lightWhite;
@inputAppendColor: @lightWhite;
@selectOptionColor: @lightWhite;
@heroUnitColor: @lightWhite;
@jumbotronColor: @lightWhite;
@calendarWeekListColor: @lightWhite;
@calendarTitleColor: @lightWhite;
@companyNavigationPortletColor: @lightWhite;
@navItemColor: @lightWhite;
@boxLoadMoreColor: @lightWhite;
@activityStreamCommentBtnColor: @lightWhite;
@itemSelectorColor: @lightWhite;
@streamWidgetsBgColor : @lightWhite;
@tableColor: @darkGrey;
@popupHeaderColor: @darkGrey;
@toolbarContainerLightColor: @darkGrey;
@dropdownMenuColor: @darkGrey;
@treeIconColor: @darkGrey;
@uiPageIteratorColor: @darkGrey;
@popupHeaderBackground: @lightGrey;
@rightBodyContainerBackground: @lightGrey;
@activityStreamBackground: @baseBackground;
@toggeleInvisibleColor: @greyColor;
@likeButtonColor: @baseColorLight;
@controlGroupErrorColor: var(--allPagesControlGroupErrorColor, #bc4343);
@controlGroupSuccessColor: var(--allPagesControlGroupSuccessColor, @successColor);
@calendarColor: var(--allPagesCalendarColor, #333333);
@navigationPortletBackground: @secondaryColor;
@btnAllActivitiesColor: @secondaryColor;
@offlineColor: var(--allPagesOfflineColor, @greyColorLighten1Default);
@toolbarLightIconColor:           var(--allPagesToolbarLightIconColor, @greyColorLighten1Default);
@toolbarLightIconHoverColor:      @primaryColor;
@colorIconSecondaryHover:@primaryColor;
@sizeSideBarIcon: var(--allPagesSizeSideBarIcon, 20px);
@headingColor: var(--allPagesHeadingColor, #707070);
@plfNavigationBgBorderLeft: @lightWhite;
@badgePrimaryColor : var(--allPagesBadgePrimaryColor , #d32a2a);
@paddingBadgeDefault-mini : var(--allPagesPaddingBadgeDefault-mini , 0);
@widthBadgeDefault-mini : var(--allPagesWidthBadgeDefault-mini , 20px);
@heightBadgeDefault-mini : var(--allPagesHeightBadgeDefault-mini , 20px);
@textAlignBadgeDefault-mini : center;
@borderRadiusBadgeDefault-mini : var(--allPagesBorderRadiusBadgeDefault-mini , 50%);
@lineHeightBadgeDefault-mini : var(--allPagesLineHeightBadgeDefault-mini , 20px);
@btnPrimaryDropdownBackgroundImage: none;
@btnGroupDropdownToggeleBackground: @greyColor;
@uiCheckboxDisabledBackground: var(--allPagesUiCheckboxDisabledBackground, @grayLight);
@chatBubbleBackground: var(--allPagesChatBubbleBackground, #edf3ff);
@chatBubbleOddBackground: var(--allPagesChatBubbleOddBackground, #dceaf9);
@chatFileUploadPopOverBackground: var(--allPagesChatFileUploadPopOverBackground, #88b3d8);
