// Global variables

// Static files paths
@img-sprite-dir: "/v_img/global";
@img-buttons-dir: "/v_img/coreui/buttons";
@img-loaders-dir: "/v_img/profilev2";

// Fonts
@fonts-dir: "/css/core/fonts/";
@fonts-version: "1445435140";
@font-stack: "Open Sans", "Arial", sans-serif;

// Right To Left mode (arabic)
@rtl: false;

// Layout
@siteWidth:         980px;

// Responsive
@pageWidth: 85%;
@pageWidthM: 90%; // when reaching the tablet breakpoint
@pageWidthS: 97%; // when reaching the smartphone breakpoint

@pageWidthMax: 1020px;

@breakpointM: 768px; // breakpoint for tablets
@breakpointS: 480px; // breakpoint for smartphones

// Spacing
@spacingXs:         5px;
@spacingS:          10px;
@spacingM:          15px;
@spacingL:          20px;
@spacingXl:         30px;

// Grayscale
@black:             #000000;
@blackLight:        lighten(@black, 18%);
@grayDark:          #4a494d;
@gray:              #87868c;
@grayLightLight:    #9e9ea2;
@grayLight:         #c5c3c7;
@grayLighter:       #d9d8dd;
@white:             #FFFFFF;
@transparent:       rgba(0,0,0,0);
// Extended palette

@orange1: #f07355;
@orange2: #f1532e;
@orange3: #f78d2d;
@orange4: #feae35;

@green1: #019875;
@green2: #0c9f9b;
@green3: #53c1af;
@green4: #c6e6d7;

@blue1: #006aa8;
@blue2: #007bc2;
@blue3: #42a2d6;
@blue4: #1f668c;
@blue5: #7dcde3;

@purple1: #471d63;
@purple2: #685985;
@purple3: #685985;
@purple4: #685985;

@pageBg: #E0E2E4;

// Colors
@green:             #829b13;
@yellow:            #ffd520;
@orange:            @orange1;

@blue:              #42a2d6;
@blueSoft:          #83a0b9;
@blueDarker:        darken(@blue, 20%);
@blueDark:          darken(@blue, 10%);
@blueLight:         lighten(desaturate(@blue, 35%), 20%);
@blueLighter:       lighten(desaturate(@blue, 35%), 40%);
@blueBright:				#0065AE;
@borderColor:       tint(@blueSoft, 63%);
@panelBackground:   tint(@blueSoft, 92%);
@panelBorder:       tint(@blueSoft, 78%);
@panelBorderDarker: tint(@blueSoft, 42%);
@overlayBorder:     shade(@blueSoft, 70%);

@premiumColor: #feae35;
@highlightColor:    #F4F2CA;

// Link colors
@linkColor:         @blue;
@linkColorHover:    darken(@linkColor, 14%);


// buttons

@buttonSmallBorderRadius: 12px;
@buttonDefaultBorderRadius: 14px;
@buttonLargeBorderRadius: 18px;
@buttonLeadBorderRadius: 26px;
@buttonFatBorderRadius: 30px;

@buttonColor: @white;

@defaultColor:             @grayLightLight;
@buttonDefaultBgColor:     @defaultColor;
@buttonDefaultEndColor:    @defaultColor;
@buttonDefaultHoverColor:  desaturate(darken(@defaultColor, 14%), 15%);
@buttonDefaultBorderColor: @defaultColor;
@buttonDefaultTextColor:   @buttonColor;
@buttonDefaultDisabledTextColor: @buttonColor;

@primaryColor:             @blue;
@buttonPrimaryBgColor:     @primaryColor;
@buttonPrimaryEndColor:    @primaryColor;
@buttonPrimaryHoverColor:  desaturate(darken(@primaryColor, 14%), 15%);
@buttonPrimaryBorderColor: @primaryColor;
@buttonPrimaryTextColor:   @buttonColor;
@buttonPrimaryDisabledTextColor: @buttonColor;

@secondaryColor:             @orange1;
@buttonSecondaryBgColor:     @secondaryColor;
@buttonSecondaryEndColor:    @secondaryColor;
@buttonSecondaryHoverColor:  desaturate(darken(@secondaryColor, 14%), 15%);
@buttonSecondaryBorderColor: @secondaryColor;
@buttonSecondaryTextColor:   @buttonColor;
@buttonSecondaryDisabledTextColor: @buttonColor;

@terColor:                 @green3;
@buttonTerBgColor:         @terColor;
@buttonTerHoverColor:      darken(@terColor, 14%);
@buttonTerBorderColor:     @terColor;
@buttonTerTextColor:       @buttonColor;
@buttonTerDisabledTextColor: @buttonColor;



//Alternatives buttons
@altButtonHoverColor: @white;
@altButtonDefaultBgColor : @transparent;
@altButtonDefaultBorder: @defaultColor;
@altButtonDefaultTextColor: @defaultColor;
@altButtonDefaultHoverColor : @defaultColor;
@altButtonDefaultHoverTextColor : @altButtonHoverColor;
@altButtonDefaultDisabledTextColor : lighten(@defaultColor, 10%);

@altButtonPrimaryBgColor : @transparent;
@altButtonPrimaryBorder: @primaryColor;
@altButtonPrimaryTextColor: @primaryColor;
@altButtonPrimaryHoverColor : @primaryColor;
@altButtonPrimaryHoverTextColor : @altButtonHoverColor;
@altButtonPrimaryDisabledTextColor : lighten(@primaryColor, 10%);

@altButtonSecondaryBgColor : @transparent;
@altButtonSecondaryBorder: @secondaryColor;
@altButtonSecondaryTextColor: @secondaryColor;
@altButtonSecondaryHoverColor : @secondaryColor;
@altButtonSecondaryHoverTextColor : @altButtonHoverColor;
@altButtonSecondaryDisabledTextColor : lighten(@secondaryColor, 10%);

@altButtonTerBgColor : @transparent;
@altButtonTerBorder: @terColor;
@altButtonTerTextColor: @terColor;
@altButtonTerHoverColor : @terColor;
@altButtonTerHoverTextColor : @altButtonHoverColor;
@altButtonTerDisabledTextColor : lighten(@terColor, 10%);

@altButtonWhiteBgColor : @transparent;
@altButtonWhiteBorder: @white;
@altButtonWhiteTextColor: @white;
@altButtonWhiteHoverColor : @white;
@altButtonWhiteHoverTextColor : @gray;
@altButtonWhiteDisabledTextColor : lighten(@gray, 10%);


// Typography
@baseFontSize:      12px;
@smallFontSize:     @baseFontSize - 1;
@baseFontColor:     #2a2a2a;
@baseFontFamily:    @font-stack;
@baseLineHeight:    1.4em;

// Border Radius
@borderRadiusXs: 2px;
@borderRadiusS: 3px;
@borderRadiusMS: 5px;
@borderRadiusM: 6px;
@borderRadiusL: 10px;

// Box
@BorderBoxColor: #dddee0;

// Forms
@inputBackground:	@white;
@inputBorder: #c5c7c5;
@inputBorderFocus: @blue2;
@inputDisabledBackground: @grayLighter;
@inputSelectedControl: #344957;

// Dropdowns
@dropdownBackground: 			@white;
@dropdownBorder: 				rgba(0,0,0,.2);
@dropdownLinkColor: 			@grayDark;
@dropdownLinkColorHover: 		@white;
@dropdownLinkBackgroundHover: 	@linkColor;

// Tables

@tablesHeadBackground: lighten(@pageBg, 5%);
@tablesBodyBackground: #fff;

// Form states and alerts
// -------------------------
@warningText: 		#c09853;
@warningBackground: #fcf8e3;
@warningBorder: 	darken(spin(@warningBackground, -10), 3%);

@errorText:         #d54243;
@errorBackground:   lighten(@errorText, 58%);
@errorBorder:       @errorText;

@successText: @green2;
@successBackground: @green2;
@successBorder: @green2;

@infoText: 			#3a87ad;
@infoBackground: 	#d9edf7;
@infoBorder: 		darken(spin(@infoBackground, -10), 7%);

// Forms requirements from bootstrap
@gridColumns:		12;
@gridColumnWidth:	60px;
@gridGutterWidth:	20px;