
.custom-mixin-toggle-bg (@customColor) when (iscolor(@customColor)) {
	background: @customColor !important;
}
.disable-mobile-animation-bg(@bg-color, @bg-color2) when not (@bg-color = @bg-color2) {
	transition:  0.2s linear;
} 
.masthead.masthead-mobile-header,
.masthead.masthead-mobile-header:not(.mixed-header) {
	background: @mobile-header-bg-color;
}
.mobile-sticky-header-overlay,
.mobile-sticky-sidebar-overlay {
	background-color: @mobile-overlay-bg-color;
}
.dt-mobile-header {
	background-color: @mobile-menu-bg-color;
	width: @mobile-menu-width;
	.right-mobile-menu .show-mobile-header & {
		right: @mobile-menu-width
	}
	
	& .mobile-header-scrollbar-wrap {
		width: calc(@mobile-menu-width ~'-' 13px );
		padding: @header-mobile-menu-top-padding @header-mobile-menu-right-padding @header-mobile-menu-bottom-padding @header-mobile-menu-left-padding;
		box-sizing: border-box;
		.admin-bar & {
			padding-top:  @header-mobile-menu-top-padding + 32px;
		}
	}
}
@media screen and (max-width: 782px){
	.admin-bar .dt-mobile-header .mobile-header-scrollbar-wrap {
	    padding-top: @header-mobile-menu-top-padding + 46px;
	}
}
html:not(.touchevents) .dt-mobile-header::-webkit-scrollbar-thumb
{
	background: fade(@mobile-menu-color, 20%);
	border-color: @mobile-menu-bg-color;
}
html:not(.touchevents) .dt-mobile-header::-webkit-scrollbar-track
{
	background-color: @mobile-menu-bg-color;
}
.mobile-header-bar {
 	.masthead:not(.side-header):not(.side-header-menu-icon) & {
		margin: 0 auto;
		box-sizing: border-box;
	}
	.masthead:not(.side-header).full-width &,
	.masthead.side-header-menu-icon {
		max-width: 100%;
	}
}
.custom-mixin-bg (@customColor) when (iscolor(@customColor)) {
	background: @customColor !important;
}
.custom-mixin-toggle-color (@customColor) when (iscolor(@customColor)) {
	color: @customColor !important;
	background: none;
}
.custom-mixin-toggle-border (@customColor, @borderWidth: 0) when (iscolor(@customColor)) {
	border: @borderWidth solid @customColor;
}

	.dt-mobile-menu-icon {
		padding: @toggle-mobile-padding-top @toggle-mobile-padding-right @toggle-mobile-padding-bottom @toggle-mobile-padding-left;

		& .menu-toggle-caption {
			font: @mobile-menu-caption-font-style @mobile-base-font-variant @mobile-menu-caption-font-weight @mobile-menu-caption-font-size~"/"@mobile-menu-caption-font-size + 4 @mobile-menu-caption-font-family;
			text-transform: @mobile-menu-caption-text-transform;
			word-spacing: normal;
			.mobile-left-caption & {
				margin-right: @mobile-menu-caption-gap;
			}
			.mobile-right-caption & {
				margin-left: @mobile-menu-caption-gap;
			}
		}
		&:not(.floating-btn) {

			margin: @toggle-mobile-margin-top @toggle-mobile-margin-right @toggle-mobile-margin-bottom @toggle-mobile-margin-left;
			&:before {
				.mobile-menu-icon-bg-on & {
					background-color: var(--the7-accent-color);
					.accent-gradient & {
						.background-gradient (@startColor: @accent-bg-color, @endColor: @accent-bg-color-2);
					}
					.custom-mixin-bg (@mobile-toggle-menu-bg-color);
					.disable-mobile-animation-bg(@mobile-toggle-menu-bg-color, @mobile-toggle-menu-bg-hover-color);
				}
				.mobile-menu-icon-border-enable & {
					border: @mobile-hamburger-border-width solid var(--the7-accent-color);
					.custom-mixin-toggle-border (@mobile-toggle-menu-border-color, @mobile-hamburger-border-width);
				}
			}
			&:after {
				.mobile-menu-icon-hover-bg-on & {
					background-color: var(--the7-accent-color);
					.accent-gradient & {
						.background-gradient (@startColor: @accent-bg-color, @endColor: @accent-bg-color-2);
					}
					.custom-mixin-bg (@mobile-toggle-menu-bg-hover-color);
					.disable-mobile-animation-bg(@mobile-toggle-menu-bg-color, @mobile-toggle-menu-bg-hover-color);
				}
				.mobile-menu-icon-hover-border-enable & {
					border: @mobile-hamburger-border-width solid var(--the7-accent-color);
					.custom-mixin-toggle-border (@mobile-toggle-menu-border-hover-color, @mobile-hamburger-border-width);
				}
			}
			&:not(:hover) {
				& .menu-toggle-caption {
					color: var(--the7-accent-color);
					.custom-mixin-toggle-color (@toggle-mobile-menu-caption-color);
				}
				& .menu-line {
					.animate-color-mobile-menu-icon &,
					.two-line-mobile-menu-icon & {
						background-color: var(--the7-accent-color);
						.accent-gradient & {
							.background-gradient (@startColor: @accent-bg-color, @endColor: @accent-bg-color-2);
						}
						.custom-mixin-bg (@mobile-toggle-menu-color);
					}
				}
			}
			& .menu-line:before {
				background-color: var(--the7-accent-color);
				.accent-gradient & {
					.background-gradient (@startColor: @accent-bg-color, @endColor: @accent-bg-color-2);
				}
				.custom-mixin-bg (@mobile-toggle-menu-color);
				.disable-mobile-animation-bg(@mobile-toggle-menu-color, @mobile-toggle-menu-hover-color);
			}
			& .menu-line:after {	
				background-color: var(--the7-accent-color);
				.accent-gradient & {
					.background-gradient (@startColor: @accent-bg-color, @endColor: @accent-bg-color-2);
				}
				.custom-mixin-bg (@mobile-toggle-menu-hover-color);
				.disable-mobile-animation-bg(@mobile-toggle-menu-color, @mobile-toggle-menu-hover-color);
			}
			&:hover {
				& .menu-toggle-caption {
					color: var(--the7-accent-color);
					.custom-mixin-toggle-color (@toggle-mobile-menu-caption-color-hover);
				}
				& .menu-line {
					.masthead:not(.animate-color-mobile-menu-icon):not(.two-line-mobile-menu-icon) & {
						background-color: var(--the7-accent-color);
						.accent-gradient & {
							.background-gradient (@startColor: @accent-bg-color, @endColor: @accent-bg-color-2);
						}
						.custom-mixin-bg (@mobile-toggle-menu-hover-color);
					}
					.animate-color-mobile-menu-icon &,
					.two-line-mobile-menu-icon & {
						background-color: var(--the7-accent-color);
						.accent-gradient& {
							.background-gradient (@startColor: @accent-bg-color, @endColor: @accent-bg-color-2);
						}
						.custom-mixin-bg (@mobile-toggle-menu-color);
					}
				}
				& .menu-line:after {	
					.animate-color-mobile-menu-icon &,
					.dots-mobile-menu-icon &,
					.h-dots-mobile-menu-icon &,
					.two-line-mobile-menu-icon & {
						background-color: var(--the7-accent-color);
						.accent-gradient & {
							.background-gradient (@startColor: @accent-bg-color, @endColor: @accent-bg-color-2);
						}
						.custom-mixin-bg (@mobile-toggle-menu-hover-color);
					}
				}
			}
			
			
			.border-radius (@radius: @mobile-toggle-menu-border-radius);
		//}
	}
}
.custom-mixin-padding-top (@customPadding) when (@customPadding < 10) {
	 padding-top: 10px
}
.custom-mixin-padding-right (@customPadding) when (@customPadding < 10) {
	 padding-right: 10px
}
.custom-mixin-padding-bottom (@customPadding) when (@customPadding < 10) {
	 padding-bottom: 10px
}
.custom-mixin-padding-left (@customPadding) when (@customPadding < 10) {
	 padding-left: 10px
}
.floating-mobile-menu-icon .dt-mobile-menu-icon.floating-btn {
	.custom-mixin-padding-top (@toggle-mobile-padding-top);
	.custom-mixin-padding-right (@toggle-mobile-padding-right);
	.custom-mixin-padding-bottom (@toggle-mobile-padding-bottom);
	.custom-mixin-padding-left (@toggle-mobile-padding-left);
}
.floating-mobile-menu-icon .dt-mobile-menu-icon.floating-btn {
	.border-radius;
}
.dt-close-mobile-menu-icon {
	& .mobile-menu-close-caption {
		font: @close-mobile-menu-caption-font-style @close-mobile-base-font-variant @close-mobile-menu-caption-font-weight @close-mobile-menu-caption-font-size~"/"@close-mobile-menu-caption-font-size + 4 @close-mobile-menu-caption-font-family;
		text-transform: @close-mobile-menu-caption-text-transform;
		word-spacing: normal;
		.mobile-close-left-caption & {
			margin-right: @close-mobile-menu-caption-gap;
		}
		.mobile-close-right-caption & {
			margin-left: @close-mobile-menu-caption-gap;
		}

	}
	&:not(:hover) {
		& .mobile-menu-close-caption {
			color: var(--the7-accent-color);
			.custom-mixin-toggle-color (@close-mobile-menu-caption-color);
		}
	}
	&:hover {
		& .mobile-menu-close-caption {
			color: var(--the7-accent-color);
			.custom-mixin-toggle-color (@close-mobile-menu-caption-color-hover);
		}
	}
	.left-mobile-menu-close-icon & {
		left: 0;
	}
	.right-mobile-menu-close-icon & {
		right:  0;
	}
	.center-mobile-menu-close-icon & {
		left: 50%;
		transform: translateX(-50%);
	}
	.ouside-mobile-menu-close-icon & {
		left: @mobile-menu-width;
	}
	.right-mobile-menu.ouside-mobile-menu-close-icon & {
		right: @mobile-menu-width;
		left: auto;
	}
}
@media screen and (max-width: @mobile-menu-width) {
	.dt-close-mobile-menu-icon {
		.show-mobile-header & {
			left: calc(100% ~"-" 30px);
		}
		.right-mobile-menu .show-mobile-header & {
			left: auto;
			right: 0;
		}
	}
	.right-mobile-menu .show-mobile-header .dt-mobile-header {
		right: 100%;
	}
}
/*Mobile-branding*/
.mobile-branding > a,
.mobile-branding > img {
	padding: @mobile-logo-top-padding @mobile-logo-right-padding @mobile-logo-bottom-padding @mobile-logo-left-padding;
	.transparent .masthead:not(.mixed-header) & {
		padding: @transparent-mobile-logo-top-padding @transparent-mobile-logo-right-padding @transparent-mobile-logo-bottom-padding @transparent-mobile-logo-left-padding;
	}
	.sticky-mobile-on.masthead:not(.mixed-header) & {
		padding: @floating-mobile-logo-top-padding @floating-mobile-logo-right-padding @floating-mobile-logo-bottom-padding @floating-mobile-logo-left-padding;
	}
}
.sticky-mobile-logo-first-switch,
.sticky-mobile-logo-second-switch {
	.sticky-mobile-on.masthead.masthead-mobile-header & {
		padding: @floating-mobile-logo-top-padding @floating-mobile-logo-right-padding @floating-mobile-logo-bottom-padding @floating-mobile-logo-left-padding;
	}
}
/*Mobile menu*/

.mobile-main-nav > li > a {
	padding: @mobile-menu-font-size*0.65 25px @mobile-menu-font-size*0.65 0;
	
	.mobile-menu-show-divider & {
		padding: @mobile-menu-font-size*0.95 25px @mobile-menu-font-size*0.95 0;
	}
}
.dt-mobile-header .next-level-button {
	padding: @mobile-menu-font-size*0.65 0;
	.mobile-menu-show-divider& {
		padding: @mobile-menu-font-size*0.95 0;
	}
	top: 0;
	line-height: @mobile-menu-font-size+4;
}
.dt-mobile-header .next-level-button:before {
	line-height: @mobile-menu-font-size+4;
}
.mobile-main-nav > li > .sub-nav:last-child {
	margin-bottom: @mobile-menu-font-size/2 + 8;
}

	.mobile-main-nav li > a .menu-text {
		font: @mobile-menu-font-style @mobile-menu-font-variant @mobile-menu-font-weight @mobile-menu-font-size~"/"@mobile-menu-font-size+4 @mobile-menu-font-family;
		color: @mobile-menu-color;
		text-transform: @mobile-menu-text-transform;
	}
	.mobile-main-nav > .menu-item > a i[class^="fa"],
	.mobile-main-nav > .menu-item > a i[class^="dt-icon"] {
		font-size: @mobile-menu-font-size;
	}

	.mobile-main-nav li > a {
		color: @mobile-menu-color;
	}
	.mobile-main-nav li.act > a {
		color: @mobile-menu-active-color;
	}
	.mobile-main-nav li.act > a .menu-text,
	.mobile-main-nav li.act > a .subtitle-text,
	.dt-mobile-header .mobile-main-nav .sub-nav > li.act > a .subtitle-text,
	.dt-mobile-header .mobile-main-nav .sub-nav > li.act > a .menu-text {
		color: @mobile-menu-active-color;
		.text-gradient (@startColor: @mobile-menu-active-color, @endColor: @mobile-menu-active-color-2);
	}
	.mobile-main-nav li:not(.act) > a:hover .subtitle-text,
	.mobile-main-nav li:not(.act) > a:hover .menu-text,
	.dt-mobile-header .mobile-main-nav .sub-nav > li:not(.act) > a:hover .menu-text  {
		color: @mobile-menu-hover-color;
		.text-gradient (@startColor: @mobile-menu-hover-color, @endColor: @mobile-menu-hover-color-2);
	}
	.mobile-main-nav li:not(.act) > a:hover,
	.dt-mobile-header .mobile-main-nav .sub-nav > li:not(.act) > a:hover {
		color: @mobile-menu-hover-color;
	}
	.mobile-main-nav > li.has-children > a:after,
	.mobile-main-nav .next-level-button svg,
	.mobile-main-nav > li.menu-item-language > a:after {
		color: fade(@mobile-menu-color, 17%);
		fill: fade(@mobile-menu-color, 17%);
	}
	.mobile-menu-show-divider .mobile-main-nav > li:before {
		border-bottom: @mobile-menu-divider-height solid @mobile-menu-divider-color;
	}
		.mobile-main-nav .sub-nav > li > a,
		#page .mobile-main-nav .sub-nav li {
			padding: @mobile-sub-menu-font-size*0.4 0px @mobile-sub-menu-font-size*0.4 0;
		}
			.dt-mobile-header .mobile-main-nav li .sub-nav > li > a .menu-text {
				font: @mobile-sub-menu-font-style @mobile-sub-menu-font-variant @mobile-sub-menu-font-weight @mobile-sub-menu-font-size~"/"@mobile-sub-menu-font-size+4 @mobile-sub-menu-font-family;
				color: @mobile-menu-color;
				text-transform: @mobile-sub-menu-text-transform;
			}
			.mobile-main-nav .sub-nav > .menu-item > a i[class^="fa"],
			.mobile-main-nav .sub-nav > .menu-item > a i[class^="dt-icon"] {
				font-size: @mobile-sub-menu-font-size;
			}
				.mobile-main-nav .sub-nav li > a .menu-text,
				.mobile-main-nav .sub-nav li > a i[class^="fa"],
				.mobile-main-nav .sub-nav li > a i[class^="dt-icon"] {
					font-size: @mobile-sub-menu-font-size - 4;
					line-height: @mobile-sub-menu-font-size;
				}
		.mobile-main-nav .sub-nav.level-arrows-on li.has-children > a:after,
		.mobile-main-nav .sub-nav.level-arrows-on li.has-children:not(.act):hover > a:after,
		.mobile-main-nav .sub-nav.level-arrows-on li.has-children.act > a:after,
		.mobile-main-nav .sub-nav li.has-children a:after,
		.mobile-main-nav .sub-nav .next-level-button {
			color: fade(@mobile-menu-color, 17%);
		}
		.mobile-main-nav .sub-nav .next-level-button {
			padding: (@mobile-sub-menu-font-size - 4)/2 + 2 0;
			top: 0;
			line-height: @mobile-sub-menu-font-size+4;
		}
		.mobile-main-nav .sub-nav .next-level-button:before {
			line-height: @mobile-sub-menu-font-size+4;
		}
		.mobile-main-nav  > li.has-children > a {
			max-width: calc(100% ~'-' 55px);
		}
		.mobile-main-nav .sub-nav > li.has-children > a {
			max-width: calc(100% ~'-' 30px);
		}
.dt-close-mobile-menu-icon {
	padding: @toggle-mobile-menu-close-padding-top @toggle-mobile-menu-close-padding-right @toggle-mobile-menu-close-padding-bottom @toggle-mobile-menu-close-padding-left;
	margin: @toggle-mobile-menu-close-top-margin @toggle-mobile-menu-close-right-margin @toggle-mobile-menu-close-bottom-margin @toggle-mobile-menu-close-left-margin;

	&:before {
		.mobile-hamburger-close-bg-enable & {
			background-color: var(--the7-accent-color);
			.accent-gradient& {
				.background-gradient (@startColor: @accent-bg-color, @endColor: @accent-bg-color-2);
			}
			.custom-mixin-toggle-bg (@toggle-mobile-menu-close-bg-color);
			
			.disable-mobile-animation-bg(@toggle-mobile-menu-close-bg-color, @toggle-mobile-menu-hover-bg-color);
		}
		.mobile-hamburger-close-border-enable & {
			border: @hamburger-mobile-close-border-width solid var(--the7-accent-color);
			.custom-mixin-toggle-border (@toggle-mobile-menu-close-border-color, @hamburger-mobile-close-border-width);
		}
	}
	&:after {
		.mobile-hamburger-close-bg-hover-enable & {
			background-color: var(--the7-accent-color);
			.accent-gradient& {
				.background-gradient (@startColor: @accent-bg-color, @endColor: @accent-bg-color-2);
			}
			.custom-mixin-toggle-bg (@toggle-mobile-menu-hover-bg-color);

			.disable-mobile-animation-bg(@toggle-mobile-menu-close-bg-color, @toggle-mobile-menu-hover-bg-color);
		}
		.mobile-hamburger-close-border-hover-enable & {
			border: @hamburger-mobile-close-border-width solid var(--the7-accent-color);
			.custom-mixin-toggle-border (@toggle-mobile-menu-close-border-color-hover, @hamburger-mobile-close-border-width);
		}
	}
	& span:after {
		background-color: var(--the7-accent-color);
		.accent-gradient & {
			.background-gradient (@startColor: @accent-bg-color, @endColor: @accent-bg-color-2);
		}
		.custom-mixin-toggle-bg (@toggle-mobile-menu-close-hover-color);
		.disable-mobile-animation-bg(@toggle-mobile-menu-close-hover-color, @toggle-mobile-menu-close-color);
	}
	border-radius: @hamburger-mobile-close-border-radius;
	& span:before {
		background-color: var(--the7-accent-color);
		.accent-gradient & {
			.background-gradient (@startColor: @accent-bg-color, @endColor: @accent-bg-color-2);
		}
		.custom-mixin-toggle-bg (@toggle-mobile-menu-close-color);
		.disable-mobile-animation-bg(@toggle-mobile-menu-close-hover-color, @toggle-mobile-menu-close-color);
	}
}
