//
// Theme Variables
// --------------------------------------------------

@accent-text-color-2: ~"";
@accent-bg-filter-switch: ~"";
@accent-bg-scroller-arrow: ~"";
@accent-bg-2: ~"";
@accent-bg-color-2: ~"";
@page-title-bg-color-2: ~"";

@bottom-divider-bg-color: rgba(56, 57, 58, 1);

/*base variables*/

@base-font-variant: normal; /* constant */
@h1-font-variant: normal; /* constant */
@h2-font-variant: normal; /* constant */
@h3-font-variant: normal; /* constant */
@h4-font-variant: normal; /* constant */
@h5-font-variant: normal; /* constant */
@h6-font-variant: normal; /* constant */

@base-filter-variant: normal; /* constant */
/*header variables*/

@temp-submenu-color: escape(~"@{submenu-color}");
@temp-submenu-hover-color: escape(~"@{submenu-hover-color}");
@temp-menu-hover-color: escape(~"@{menu-hover-color}");
@temp-mobile-menu-color: escape(~"@{mobile-menu-color}");
@menu-font-variant: normal; /* constant */

/*divider color*/

@widget-sidebar-divider-bg-color: fade(@widget-sidebar-color, 15%);

/*@strype-1-divider-bg-color: blue;*/

@strype-2-divider-bg-color: blue;

@strype-3-divider-bg-color: blue;

/*Buttons*/
@dt-btn-s-font-variant: normal; /* constant */
@dt-btn-m-font-variant: normal; /* constant */
@dt-btn-l-font-variant: normal; /* constant */
@dt-btn-lg-font-variant: normal; /* constant */
@dt-btn-xl-font-variant: normal; /* constant */

@main-slideshow-bg-attachment: ~"";

@widget-footer-color-fade-cap:fade(@widget-footer-color, 12%);

@widget-footer-divider-bg-color: fade(@widget-footer-color, 15%);
@percent-to-num: (unit(@bg-hover-opacity) / 100);

/*Main overlap gradient*/
@gr-color1: fade(@page-bg-color, 75%);
@gr-color2: fade(@page-bg-color, 80%);
@gr-color3: fade(@page-bg-color, 86%);
@gr-color4: fade(@page-bg-color, 90%);
@gr-color5: fade(@page-bg-color, 94%);
@gr-color6: fade(@page-bg-color, 98%);
@gr-color7: fade(@page-bg-color, 99%);
@gr-color8: fade(@page-bg-color, 100%);

/*Header overlap gradient*/
@gr-hr-color1: fade(@header-bg-color, 75%);
@gr-hr-color2: fade(@header-bg-color, 80%);
@gr-hr-color3: fade(@header-bg-color, 86%);
@gr-hr-color4: fade(@header-bg-color, 90%);
@gr-hr-color5: fade(@header-bg-color, 94%);
@gr-hr-color6: fade(@header-bg-color, 98%);
@gr-hr-color7: fade(@header-bg-color, 99%);
@gr-hr-color8: fade(@header-bg-color, 100%);

@gr-top-line-color1: fade(@navigation-line-bg, 75%);
@gr-top-line-color2: fade(@navigation-line-bg, 80%);
@gr-top-line-color3: fade(@navigation-line-bg, 86%);
@gr-top-line-color4: fade(@navigation-line-bg, 90%);
@gr-top-line-color5: fade(@navigation-line-bg, 94%);
@gr-top-line-color6: fade(@navigation-line-bg, 98%);
@gr-top-line-color7: fade(@navigation-line-bg, 99%);
@gr-top-line-color8: fade(@navigation-line-bg, 100%);

@rollover-gr-color1: fade(@rollover-bg-color, 90%);
@rollover-gr-color2: fade(@rollover-bg-color-2, 90%);
@rollover-gr-color1-temp: escape(~"@{rollover-gr-color1}");
@rollover-gr-color2-temp: escape(~"@{rollover-gr-color2}");


.custom-mixin-footer-color (@customColor) when (iscolor(@customColor)) {
	color: @customColor;
	background: none;
}
.custom-mixin-footer-accent-bg (@customColor, @color-opacity:100%) when (iscolor(@customColor)) {
	background: fade(@customColor, @color-opacity);
}
.custom-mixin-mega-menu-accent (@customColor) when (iscolor(@customColor)) {
	color: @customColor !important;
	background: none;
}
.custom-mixin-mega-menu-accent-bg (@customColor) when (iscolor(@customColor)) {
	background: @customColor;
}
/* !Defining basic mixins */

.text-gradient (@startColor: #eee, @endColor: white) when not (@endColor = ~"") {
	background: -webkit-linear-gradient(@endColor);
	color: transparent;
  	-webkit-background-clip: text;
  	background-clip: text;
  	 @media all and (-ms-high-contrast: none) {
     	color: @startColor;
    }
}
.text-gradient-text-fill (@startColor: #eee, @endColor: white) when not (@endColor = ~"") {
	background: -webkit-linear-gradient(@endColor); /* Chrome10+,Safari5.1+ */
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.background-gradient-new (@gradient) {
	//background: @startColor; /* Old browsers */
	background: -webkit-linear-gradient(@gradient); /* Chrome10+,Safari5.1+ */
	background: linear-gradient(@gradient); /* W3C */
}

.border-gradient (@startColor: #eee) when not (@startColor = ~"") {
  -webkit-border-image: -webkit-linear-gradient(@startColor);
  border-image: linear-gradient(@startColor);
  border-image-slice: 1;
}

.background-gradient (@startColor: #eee, @endColor: white) when not (@endColor = ~"") {
	background: @startColor; /* Old browsers */
	background: -webkit-linear-gradient(@endColor); /* Chrome10+,Safari5.1+ */
	background: linear-gradient(@endColor); /* W3C */
}

.background-fade-gradient (@startColor: #eee, @endColor: white, @opacity: 30%) when (iscolor(@endColor)) {
	.background-gradient( fade( @startColor, @opacity ), fade( @endColor, @opacity ) );
}

.box-shadow (@string) {
	box-shadow:         @string;
}
.border-radiuses (@topright: 0, @bottomright: 0, @bottomleft: 0, @topleft: 0) {
	border-top-right-radius:            @topright;
	border-bottom-right-radius:         @bottomright;
	border-bottom-left-radius:          @bottomleft;
	border-top-left-radius:             @topleft;

	-moz-background-clip:    padding; 
	-webkit-background-clip: padding-box; 
	background-clip:         padding-box; 
}

.fade-mixin(@bg-color, @bg-opacity) {
	background-color: fade(@bg-color, @bg-opacity);
}
.custom-mixin-fade-color (@customColor, @opacity:100%) when (iscolor(@customColor)) {
	color: fade(@customColor, @opacity);
}
/* !Border radius */

.border-radius (@radius: @border-radius-size) {
	border-radius:         @radius;
}
/*Transparent background*/
.transparent-border-mixin {
	border-color: var(--the7-divider-color);
	.sidebar &,
	.sidebar-content & {
		border-color: fade(@widget-sidebar-color, 15%);
	}
	.footer & {
		border-color: fade(@widget-footer-color, 15%);
	}
}
.transparent-bg-mixin(@opacity: 8%) {
	background-color: fade(@base-color, @opacity);
	.sidebar &,
	.sidebar-content & {
		background-color: fade(@widget-sidebar-color, @opacity);
	}
	.footer & {
		background-color: fade(@widget-footer-color, @opacity);
	}
}
.solid-bg-mixin {
	background-color: var(--the7-content-boxes-bg);
}
/*Theme Options -> Appearance -> Content boxes -> Decoration: Outline*/
.outline-decoration {
	.outline-element-decoration & {
		.box-shadow (inset 0px 0px 0px 1px @divider-bg-color);
	}
}
/*Theme Options -> Appearance -> Content boxes -> Decoration: Outline*/
.shadow-decoration {
	.shadow-element-decoration & {
		.box-shadow (0 6px 18px rgba(0,0,0,0.1));
	}
}
.accent-bg-mixin {
	color: #fff;
	background-color: var(--the7-accent-color);
	.accent-gradient & {
		.background-gradient (@startColor: @accent-bg-color, @endColor: @accent-bg-color-2);
	}
	.dt-mega-menu .dt-mega-parent .sidebar-content & {
		.custom-mixin-mega-menu-accent-bg (@mega-menu-widget-accent-color);
	}
	.footer &,
	.accent-gradient .footer & {
		.custom-mixin-footer-accent-bg (@widget-footer-accent-color, @color-opacity:100%);
	}
}
.transparent-accent-bg-mixin(@bg-opacity) {
	background-color: fade(@accent-bg-color, @bg-opacity);
	.accent-gradient & {
		.background-fade-gradient (@startColor: @accent-bg-color, @endColor: @accent-bg-color-2, @opacity: @bg-opacity);
	}
	.footer &,
	.accent-gradient .footer & {
		.custom-mixin-footer-accent-bg (@widget-footer-accent-color, @color-opacity:@bg-opacity);
	}
}
.custom-background-gradient (@startColor: #eee, @opacity: 30%) when (iscolor(@startColor)) {
	background: @startColor;
	background: -moz-linear-gradient(top,  fade(@startColor, 0%) 0%, fade(@startColor, 90%) 64%, @startColor 83%, @startColor 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  fade(@startColor, 0%) 0%,fade(@startColor, 90%) 64%,@startColor 83%,@startColor 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  fade(@startColor, 0%) 0%,fade(@startColor, 90%) 64%,@startColor 83%,@startColor 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.custom-rollover-gradient (@startColor: #eee) when (iscolor(@startColor)) {
	background: @startColor;
	background: -moz-linear-gradient(top,  fade(@startColor, 0%) 0%, @startColor 65%, @startColor 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  fade(@startColor, 0%) 0%, @startColor 65%, @startColor 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  fade(@startColor, 0%) 0%, @startColor 65%, @startColor 100%);
}

@additional-menu-elements-font-style: normal;
@additional-menu-elements-font-variant: normal; /* constant */
@additional-menu-elements-font-weight: normal;

@additional-logo-elements-font-style: normal;
@additional-logo-elements-font-weight: normal;

/*menu  next level indicator icons*/
@mobile-menu-font-style: normal;
@mobile-menu-font-weight: bold;
@mobile-menu-font-size: 14px;
@mobile-menu-font-family: 'Lato', Helvetica, Arial, Verdana, sans-serif;

@mobile-menu-text-transform: uppercase;

@page-vertical-margins: 50px;
@templates-vertical-margins: 50px;


/*css vars mixin*/
.css-var-background(@varName, @startColor: #eee, @endColor: white) when (@endColor = ~"") {
	background: var(~"@{varName}", @startColor);
}
.css-var-background(@varName, @startColor: #eee, @endColor: white) when not (@endColor = ~"") {
	background: var(~"@{varName}", transparent linear-gradient(@endColor));
}

.css-var-background-important(@varName, @startColor: #eee, @endColor: white) when (@endColor = ~"") {
	background: var(~"@{varName}", @startColor)~"!important";
}
.css-var-background-important(@varName, @startColor: #eee, @endColor: white) when not (@endColor = ~"") {
	background: var(~"@{varName}", transparent linear-gradient(@endColor))~"!important";
}