//colors
$color_black    : #000000;
$color_white    : #ffffff;
$color_gray_90  : lighten($color_black, 10%); //#1a1a1a
$color_gray_80  : lighten($color_black, 20%); //#333333
$color_gray_70  : lighten($color_black, 30%); //#4d4d4d
$color_gray_60  : lighten($color_black, 40%); //#666666
$color_gray_50  : lighten($color_black, 50%); //#808080
$color_gray_40  : lighten($color_black, 60%); //#999999
$color_gray_30  : lighten($color_black, 70%); //#b3b3b3
$color_gray_20  : lighten($color_black, 80%); //#cccccc
$color_gray_10  : lighten($color_black, 90%); //#e6e6e6
$color_gray_05  : lighten($color_black, 95%); //#f2f2f2
$color_gray_03  : lighten($color_black, 97%); //#f6f6f6

$color_red         : #d70a0a;
$color_blue        : #0d61ab;
$color_green       : #B8E986;
$color_dark_green  : #2db92d;
$color_yellow      : #FFE180;
$color_warning     : #ffd14b;

//mixins
@mixin animation($a){
	-webkit-animation: $a;
	-moz-animation: $a;
	-ms-animation: $a;
	animation: $a;
}
@mixin border-radius($r : 3px){
	-webkit-border-radius: $r;
	-moz-border-radius: $r;
	-ms-border-radius: $r;
	border-radius: $r;
}
@mixin box-shadow($boxshadow : none){
	-webkit-box-shadow: $boxshadow;
	-moz-box-shadow: $boxshadow;
	-ms-box-shadow: $boxshadow;
	box-shadow: $boxshadow;
}
@mixin transition($x : all 0.5s ease-out 0s){
	-webkit-transition: $x;
	-moz-transition: $x;
	-o-transition: $x;
	transition: $x;
}
@mixin transform($transform){
	-webkit-transform: $transform;
	-moz-transform: $transform;
	-ms-transform: $transform;
	-o-transform: $transform;
	transform: $transform;
}
@mixin linear-gradient($t, $b){
	background: $b;
	background: -webkit-gradient(linear, 0 0, 0 bottom, from($t), to($b));
	background: -webkit-linear-gradient($t, $b);
	background: -moz-linear-gradient($t, $b);
	background: -ms-linear-gradient($t, $b);
	background: -o-linear-gradient($t, $b);
	background: linear-gradient($t, $b);
}
@mixin box-sizing($s : border-box){
	-webkit-box-sizing: $s;
	-moz-box-sizing: $s;
	-o-box-sizing: $s;
	box-sizing: $s;
}
/*
&::-webkit-input-placeholder {color:#c0392b;}
&::-moz-placeholder          {color:#c0392b;}
&:-moz-placeholder           {color:#c0392b;}
&:-ms-input-placeholder      {color:#c0392b;}
*/
body {
	-moz-text-size-adjust: none;
	text-size-adjust: none;
	&.blank {
		background: #f5f7fa !important;
	}
}

strong {
	font-weight: bold !important;
}

.hr {
	background: #E5E5E5;
	position: relative;
	overflow: hidden;
	display: block;
	height: 1px;
	&.bg-60 { background: $color_gray_60; }
	&.bg-80 { background: $color_gray_80; }
	&.size-10 { height: 10px; }
}

.bg-mystic { background: #dde4ec; }
.bg-light-blue { background: #d5e6f6; }
.bg-light-mystic { background: #f7f9fb; }
.bg-pink { background: #ffb3b3; }
.bg-yellow { background: #ffe180; }
.bg-warning { background: #FFEFC1; }
.bg-green { background: $color_green; }

.color-red {color: $color_red !important;}
.color-blue {color: $color_blue !important;}
.color-green {color: $color_green !important;}
.color-dark-green {color: #006700 !important;}
.color-black {color: $color_black !important;}
.color-gray {color: $color_gray_50 !important;}
.color-gray-10 {color: $color_gray_10 !important;}
.color-gray-40 {color: $color_gray_40 !important;}
.color-gray-60 {color: $color_gray_60 !important;}
.color-gray-80 {color: $color_gray_80 !important;}

//fonts
.h1 { margin-bottom: 15px; font-size: 48px; line-height: normal; }

.fs-10 { font-size: 10px; }
.fs-11 { font-size: 11px; }
.fs-12 { font-size: 12px; }
.fs-13 { font-size: 13px; }
.fs-14 { font-size: 14px; }
.fs-16 { font-size: 16px; }
.fs-18 { font-size: 18px; }
.fs-20 { font-size: 20px; }
.fs-24 { font-size: 24px; }

.fw-bold, .fs-bold {font-weight: bold !important;}

.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-nowrap { white-space: nowrap; }

.text-xs-notransform {
	@media (max-width: 767px){
		text-transform: none !important;
	}
}

.text-ellipsis {
	position: relative;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.lh-n { line-height: normal; }
.lh-n { line-height: 0.5em !important; }

//margins and paddings
.p-0 { padding: 0px !important; }
.p-0-3 { padding: 0px 3px !important; }
.p-0-4 { padding: 0px 4px !important; }
.p-0-8 { padding: 0px 8px !important; }
.p-0-8 { padding: 0px 8px !important; }
.p-0-12 { padding: 0px 12px !important; }
.p-0-16 { padding: 0px 16px !important; }
.p-0-20 { padding: 0px 20px !important; }
.p-8 { padding: 8px; }
.p-12 { padding: 12px; }
.p-16 { padding: 16px; }
.p-24 { padding: 24px; }

.m-b-0   { margin-bottom: 0px !important; }
.m-b-2   { margin-bottom: 2px !important; }
.m-b-4   { margin-bottom: 4px !important; }
.m-b-05  { margin-bottom: 5px !important; }
.m-b-07  { margin-bottom: 7px !important; }
.m-b-08  { margin-bottom: 8px !important; }
.m-b-10  { margin-bottom: 10px !important; }
.m-b-12  { margin-bottom: 12px !important; }
.m-b-15  { margin-bottom: 15px !important; }
.m-b-16  { margin-bottom: 16px !important; }
.m-b-20  { margin-bottom: 20px !important; }
.m-b-24  { margin-bottom: 24px !important; }
.m-b-28  { margin-bottom: 28px !important; }
.m-b-25  { margin-bottom: 25px !important; }
.m-b-30  { margin-bottom: 30px !important; }
.m-b-32  { margin-bottom: 32px !important; }
.m-b-40  { margin-bottom: 40px !important; }
.m-b-50  { margin-bottom: 50px !important; }
.m-b-60  { margin-bottom: 60px !important; }
.m-b-70  { margin-bottom: 70px !important; }
.m-b-80  { margin-bottom: 80px !important; }
.m-b-90  { margin-bottom: 90px !important; }
.m-b-100 { margin-bottom: 100px !important; }
.m-0 { margin: 0px !important; }
.m-0-a { margin: 0 auto; }

.ml-auto { margin-left: auto; }

.w-50 { width: 50px; }
.w-100 { width: 100px; }
.w-150 { width: 150px; }
.w-175 { width: 175px; }
.w-200 { width: 200px; }
.w-250 { width: 250px; }
.w-300 { width: 300px; }
.w-350 { width: 350px; }
.w-400 { width: 400px; }
.w-450 { width: 450px; }
.w-500 { width: 500px; }
.w-550 { width: 550px; }
.w-600 { width: 600px; }
.w-650 { width: 650px; }
.w-700 { width: 700px; }
.w-750 { width: 750px; }
.w-800 { width: 800px; }
.w-850 { width: 850px; }
.w-900 { width: 900px; }
.w-950 { width: 950px; }
.w-1000 { width: 1000px; }
.w-1100 { width: 1100px; }
.w-1200 { width: 1200px; }


.mn-w-100 {min-width: 100px;}
.mn-w-125 {min-width: 125px;}
.mn-w-150 {min-width: 150px;}
.mn-w-200 {min-width: 200px;}
.mn-w-250 {min-width: 250px;}
.mn-w-900 {min-width: 900px;}
.mn-w-1200 {min-width: 1200px;}
.mn-w-1300 {min-width: 1300px;}
.mn-w-1400 {min-width: 1400px;}
.mn-w-1500 {min-width: 1500px;}
.mn-w-1600 {min-width: 1600px;}

.mx-w-50 {max-width: 50px !important;}
.mx-w-100 {max-width: 100px;}
.mx-w-150 {max-width: 150px;}
.mx-w-200 {max-width: 200px;}
.mx-w-250 {max-width: 250px;}
.mx-w-300 {max-width: 300px;}
.mx-w-350 {max-width: 350px;}
.mx-w-500 {max-width: 500px;}
.mx-w-550 {max-width: 550px;}
.mx-w-600 {max-width: 600px;}
.mx-w-650 {max-width: 650px;}
.mx-w-700 {max-width: 700px;}
.mx-w-750 {max-width: 750px;}

.min-h-auto { min-height: auto !important; }
.min-h-xxs-auto {
	@media (max-width: 574px) {
		min-height: auto !important;
	}
}

.visible-xxs { @media (min-width: 450px) { display: none !important; } }
.visible-md-up { @media (max-width: 991px){ display: none !important; } }
.hidden-xxs { @media (max-width: 449px) { display: none !important; } }
.hidden-sm-down { @media (max-width: 991px) { display: none; } }
.hidden-sm-up { @media (min-width: 768px) { display: none; } }
.hidden-md-down { @media (max-width: 1199px) { display: none; } }
.hidden-md-up { @media (min-width: 992px) { display: none; } }

//links
.overlink {
	position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px;
	z-index: 55;
	display: block; width: 100%; height: 100%;
	&.glow-violet:hover { box-shadow: inset 0 0 16px #752195; }
	&.glow-blue:hover { box-shadow: inset 0 0 16px $color_blue; }
}

.hovering {
	position: relative;
	.hovering-img {
		border: 2px solid #dfe5ea;
		@include transition(all 0.25s linear 0s);
	}
	.hovering-link {
		@include transition(all 0.2s linear 0s);
	}
	&:hover {
		.hovering-img { border: 2px solid $color_blue; }
		.hovering-link {
			color: $color_blue;
		}
	}
}

.dash-link {
	position: relative;
	border-bottom: 1px dashed #7C7C7C;
	color: #7C7C7C !important;
	text-decoration: none !important;
	&:hover { border-color: transparent !important; }
	&.blue {
		border-color: $color_blue;
		color: $color_blue !important;
	}
}

.type-link {
	$text-color  : #0061a4;
	$dash-color  : #91c1db;
	$hover-color : #4998c4;
	position: relative;
	border-bottom: 1px dashed $dash-color;
	color: $text-color !important;
	text-decoration: none !important;

	&.blank { border: none; }

	&.simple {
		border-bottom-color: transparent;
		&:hover { border-bottom-style: solid; border-bottom-color: $hover-color !important; }
	}
	&.external { border-bottom-style: solid; }

	&:hover {
		border-color: $hover-color !important;
		cursor: pointer;
	}

	&.disabled {
		$text-color  : #7c7974;
		$dash-color  : #dbd8d3;
		$hover-color : #ada9a4;
		border-color: $dash-color;
		color: $text-color !important;
		&:hover {
			border-color: $hover-color !important;
		}
	}
}

a.link-gray-blue, .link-gray-blue, .link-gray-blue a {
	color: #7c7c7c;
	text-decoration: none !important;
	&:hover {
		color: $color_blue;
	}
}

a.link-black-blue, .link-black-blue, .link-black-blue a {
	color: $color_black;
	text-decoration: none !important;
	&:hover {
		color: $color_blue;
	}
}

a.remove-link {
	color: #000;
	&:hover {
		color: $color_red !important;
	}
}

a.warning-link {
	color: $color_red;
	&:hover {
		text-decoration: underline !important;
	}
}

a.gray-link, .gray-link, .gray-link a {
	color: $color_gray_50;
	text-decoration: underline;
	&:hover {
		text-decoration: none;
	}
}

a.trash-link, .trash-link, .trash-link a {
	color: $color_gray_50;
	&:hover {
		color: $color_red;
	}
}

//highlight
.highlight-yellow { background: #ffe180; }
.highlight-white { background: $color_white; }

.closer {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	@include transform(rotate(45deg));
	&:before {
		content: '';
		background: $color_black;
		position: absolute; top: 50%; left: 50%;
		display: block; width: 100%; height: 2px;
		margin: -1px 0px 0px -50%;
		opacity: 0.3;
	}
	&:after {
		content: '';
		background: $color_black;
		position: absolute; top: 50%; left: 50%;
		display: block; width: 2px; height: 100%;
		margin: -50% 0px 0px -1px;
		opacity: 0.3;
	}

	&.white {
		&:before, &:after {
			background: $color_white;
			opacity: 1;
		}
	}

	&.size-10 { width: 10px; height: 10px; }
	&.size-12 { width: 12px; height: 12px; }
	&.size-16 { width: 16px; height: 16px; }
	&.size-24 { width: 24px; height: 24px; }

	&.del {
		&:hover {
			&:before, &:after {
				background: $color_red;
			}
		}
	}

	&.square {
		background: $color_black;
		background: rgba(0,0,0,0.5);
		opacity: 1;
		@include border-radius(2px);
		@include transform(none);
		&:before {
			background: $color_white;
			left: 50%;
			width: 70%; height: 2px;
			margin: -1px 0 0 0;
			@include transform(translateX(-50%) rotate(-45deg));
		}
		&:after {
			background: $color_white;
			left: 50%;
			width: 70%; height: 2px;
			margin: -1px 0 0 0;
			@include transform(translateX(-50%) rotate(45deg));
		}
		&:hover {
			@include transform(rotate(0deg));
		}
	}

	&:hover {
		cursor: pointer;
		&:before, &:after {
			background: $color_red !important;
			opacity: 1;
		}
	}
}

.inline-block {
	display: inline-block;
	&.middle {
		vertical-align: middle;
	}
}
.block {
	display: block !important;
}

.img-block {
	display: block;
	width: 100%;
	img { display: block; width: 100%; }
}
.img-border {
	border: 2px solid #000;
}

//lists
.alv-list-unstyled {
	margin: 0px; padding: 0px; list-style: none;
	&.marg-4 {
		li {
			margin-top: 4px;
			&:first-child {margin-top: 0px;}
		}
	}
	&.marg-10 {
		li {
			margin-top: 10px;
			&:first-child {margin-top: 0px;}
		}
	}
	&.marg-15 {
		li {
			margin-top: 15px;
			&:first-child {margin-top: 0px;}
		}
	}
}
.alv-list-inline {
	position: relative;
	margin: 0px; padding: 0px; list-style: none;
	li {
		display: inline-block;
		vertical-align: middle;
	}
	&.alv-list-inline_4 {
		margin-left: -2px;
		margin-right: -2px;
		li {
			padding-left: 2px;
			padding-right: 2px;
		}
	}
	&.alv-list-inline_8 {
		margin-left: -4px;
		margin-right: -4px;
		li {
			padding-left: 4px;
			padding-right: 4px;
		}
	}
}

.list-ol {
	margin: 0px; padding: 0px; list-style: none;
	counter-reset: item;
	& > li {
		position: relative;
		display: block;
		padding: 0 0 0 25px;
		& + li { margin-top: 10px; }
		&:before {
			content: counters(item, ".") ".";
			counter-increment: item;
			position: absolute;
			top: 0px;
			left: 0px;
			//font-weight: bold;
		}
		ol {
			margin: 0px; padding: 10px 0px 0px 0px; list-style: none;
			counter-reset: item;
			& > li {
				position: relative;
				padding: 0 0 0 35px;
				& + li { margin-top: 10px; }
				&:before {
					content: counters(item, ".") ".";
					counter-increment: item;
					position: absolute;
					top: 0px;
					left: 0px;
					//font-weight: bold;
				}
			}
		}
		ul {
			margin: 0px 0px 0px 20px;
			padding: 10px 0px 0px 0px;
			list-style: disc;
			li {
				position: relative;
				/*padding-left: 15px;
				&:before {
					content: '';
					background: $color_black;
					position: absolute; top: 0.65em; left: 0px;
					display: block; width: 6px; height: 6px;
					@include border-radius(50%);
				}*/
				& + li { margin-top: 5px; }
			}
		}
	}
}

.list-settings-links {
	margin: 0px; padding: 0px; list-style: none;
	& > li {
		display: inline-block;
		vertical-align: middle;
		& + li {
			border-left: 1px solid $color_gray_40;
			padding-left: 3px;
		}
	}
}

//media
.media {
	&:first-child { margin-top: 0; }

	.img-thumbnail { max-width: none; }

	&.media-responsive-xxs {
		@media (max-width : 449px) {
			& > .media-left { display: block; width: auto; margin: 0px; padding: 0px 0px 20px 0px; }
			& > .media-right { display: block; width: auto; margin: 0px; padding: 20px 0px 0px 0px; }
			& > .media-body { display: block; width: auto; }
		}
	}
	&.media-responsive-xs {
		@media (max-width : 767px) {
			& > .media-left { display: block; width: auto; margin: 0px; padding: 0px 0px 12px 0px; }
			& > .media-right { display: block; width: auto; margin: 0px; padding: 12px 0px 0px 0px; }
			& > .media-body { display: block; width: auto; }
		}
	}
}
.media, .media-body { zoom: 1; overflow: hidden; }
.media-body { width: 10000px; }
.media-object {
	display: block;
	&.img-thumbnail { max-width: none; }
}
.media-right, .media > .pull-right {
	padding-left: 20px;
	&.pl-4 { padding-left: 4px; }
	&.pl-8 { padding-left: 8px; }
	&.pl-12 { padding-left: 12px; }
	&.pl-16 { padding-left: 16px; }
	&.pl-20 { padding-left: 20px; }
	&.pl-24 { padding-left: 24px; }
}
.media-left, .media > .pull-left {
	padding-right: 20px;
	&.pr-4 { padding-right: 4px; }
	&.pr-8 { padding-right: 8px; }
	&.pr-12 { padding-right: 12px; }
	&.pr-16 { padding-right: 16px; }
	&.pr-20 { padding-right: 20px; }
	&.pr-24 { padding-right: 24px; }
}
.media-left, .media-right, .media-body { display: table-cell; vertical-align: top;}
.media-middle { vertical-align: middle; }
.media-bottom { vertical-align: bottom; }
.media-heading { margin-top: 0; margin-bottom: 5px; }
.media-list { padding-left: 0; list-style: none; }


/** forms **/
//input style
.alv-form-control {
	background: #fff !important;
	border: 1px solid #b9b9b9 !important;
	display: block !important;
	width: 100%;
	max-width: 100% !important;
	//height: auto !important;
	min-height: 36px;
	margin: 0px !important;
	padding: 7px 10px !important;

	font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif !important;
	font-size: 14px !important;

	@include box-sizing();
	@include border-radius(2px);
	@include box-shadow();

	&.full-width {
		width: 100% !important;
	}

	.inline {
		display: inline-block;
	}

	&.size-xxs {
		min-height: 24px;
		padding: 2px 4px !important;
		font-size: 12px !important;
	}
	&.size-xs {
		min-height: 28px;
		padding: 2px 10px 4px !important;
	}
	&.size-sm {
		min-height: 32px;
		padding: 5px 10px !important;
	}
	&.size-lg {
		min-height: 40px;
		padding: 6px 15px 7px !important;
		font-size: 18px !important;
	}

	&.inline {
		display: inline-block !important;
		vertical-align: middle;
	}

	&:focus {
		border: 1px solid $color_blue !important;
		box-shadow: inset 0 0 2px 0 $color_blue, 0 0 2px 0 $color_blue;
	}

	&.warning {
		background: $color_yellow !important;
	}
	&.highlight-warning {
		@include box-shadow(0px 0px 0px 2px $color_yellow);
	}
	&.highlight-danger {
		@include box-shadow(0px 0px 0px 2px $color_red);
	}

}
select.alv-form-control {
	padding-top: 6px !important;
	padding-bottom: 6px !important;
}
textarea.alv-form-control {
	min-height: 70px;
	height: auto;
}
//
.alv-error-message { color: $color_red; }
//form fields group
.alv-form-group {
	position: relative;
	label {}
	.alv-form-label {
		display: block;
		margin: 0px 0px 2px 0px;
		strong {
			font-weight: bold !important;
		}
	}

	//form fields description
	.alv-form-message {
		margin-top: 4px;
		font-size: 12px;
		line-height: 16px;
	}
	//form fields error block
	.alv-form-error {
		display: none;
		margin-top: 4px;
		color: $color_red;
		font-size: 12px;
		line-height: 1.3em;
	}

	&.has-error {
		label {
			color: $color_red;
		}
		.alv-form-label {
			color: $color_red !important;
		}
		.alv-form-control__ico {
			color: $color_red;
			fill: $color_red;
		}
		.alv-form-control {
			border: 1px solid $color_red !important;
			color: $color_red !important;
			@include box-shadow();
			optgroup, option { color: $color_gray_80; }
			&:focus {
				@include box-shadow((inset 0 0 2px 0 $color_red, 0 0 2px 0 $color_red));
			}
		}
		.alv-form-error { display: block; }

		.alv-bttn {
			background: #E9E9E9 !important;
			color: #9B9B9B !important;
			cursor: default !important;
		}
	}

	&.has-success {}

	&.alv-form-group__inline {
		display: inline-block;
		vertical-align: top;
		margin-left: 10px;
		&:first-child {
			margin-left: 0px;
		}
	}
}

.alv-form-field {
	position: relative;
	.alv-form-control {width: 100% !important;}
	.alv-form-control__ico {
		position: absolute; top: 50%; right: 5px; z-index: 1;
		width: 24px; height: 24px;
		margin-top: -12px;
		fill: #9B9B9B;
		&.size-xxs {
			width: 16px; height: 16px;
			margin-top: -8px;
		}
	}
	.alv-form-field__ico {
		position: absolute; top: 50%; left: 100%;
		width: 24px; height: 24px;
		margin-top: -12px;
		margin-left: 10px;
		fill: #9B9B9B;
	}

	.alv-form-field__message {
		position: absolute; top: 3px; left: 100%;
		min-width: 200px;
		padding-left: 10px;
	}

	.alv-form-field-reset {
		position: absolute; top: 50%; left: 100%;
		display: block; width: 12px; height: 12px;
		margin: -6px 0px 0px 4px;
		display: none;
		&:before {
			content: '';
			background: $color_red;
			position: absolute; top: 50%; left: 0px;
			display: block; width: 100%; height: 2px;
			margin-top: -1px;
			@include transform(rotate(45deg));
		}
		&:after {
			content: '';
			background: $color_red;
			position: absolute; top: 50%; left: 0px;
			display: block; width: 100%; height: 2px;
			margin-top: -1px;
			@include transform(rotate(-45deg));
		}
		&:hover {
			cursor: pointer;
		}
	}

	&.alv-form-field__icon-out {
		padding-right: 30px;
	}
	&.alv-form-field__icon-in {
		.alv-form-control {padding-right: 30px !important;}
	}

	&.selected {
		.alv-form-field-reset {
			display: block;
		}
		.alv-form-control {
			background: #FFE180 !important;
		}
	}
}
span.alv-form-field { display: inline-block; }

.ow-line-1 {
	position: relative;
	overflow: hidden;
	max-width: 100%;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 12px;
	line-height: 20px;
}
.ow-line-2 {
	position: relative;
	overflow: hidden;
	max-width: 100%;
	max-height: 40px;
	font-size: 12px;
	line-height: 20px;
}
.ow-line-3 {
	position: relative;
	overflow: hidden;
	max-width: 100%;
	max-height: 60px;
	font-size: 12px;
	line-height: 20px;
}

.form-control-text {
	display: inline-block;
	&.size-xxs {
		margin-top: 4px;
	}
	&.size-xs {
		margin-top: 6px;
	}
	&.size-sm {
		margin-top: 8px;
	}
}

.required {
	.has-error & {color: $color_red;}
}

.label-inline {
	position: relative;
	display: inline-block;
	margin: 0px;
	padding: 0px 0px 0px 20px;
	input {
		margin: 0px;
		&[type=checkbox], &[type=radio]{
			position: absolute; top: 1px; left: 0px;
		}
	}
	&.label-inline_v1 {
		background: #DDE4EC;
		padding: 5px 10px 5px 30px;
		[type=checkbox], [type=radio]{ top: 7px; left: 10px; }
	}
	&.label-inline_v2 {
		padding: 0px 10px 0px 30px;
		[type=checkbox], [type=radio]{ left: 10px; }
	}
	&:hover {
		cursor: pointer;
	}
}

.alv-form-control__box {
	position: relative;
	.alv-form-control {width: 100% !important;}
	.alv-form-control__ico {
		position: absolute; top: 50%; right: 10px;
		width: 24px; height: 24px;
		margin-top: -12px;
		fill: #9B9B9B;
	}
}

.hidden-field {
	& > .hidden-field__head {
		&.visible {
			display: block !important;
		}
		.type-a {}
		.type-b { display: none; }
	}
	& > .hidden-field__body { display: none; }

	&.hidden-field_2 { margin-left: 20px !important; }
	&.hidden-field_hidden { display: none; }

	&.toggle {
		& > .hidden-field__head { display: none; }
		& > .hidden-field__body { display: block; }
		& > .hidden-field__head {
			.type-a { display: none; }
			.type-b { display: inline-block; }
		}
	}
	&.change {
		& > .hidden-field__head {
			.type-a { display: none; }
			.type-b { display: inline-block; }
		}
	}

	&.hidden-field_check {
		position: relative;
		border: 1px solid transparent;
		margin: 0px -8px;
		padding: 4px;
		& + .hidden-field_check { margin-top: 4px; }
		& > .hidden-field_checkbox {
			position: absolute; top: 9px; left: 8px;
			display: block; margin: 0px; padding: 0px;
		}
		& > .hidden-field__head { padding-left: 24px; }
		& > .hidden-field__body { padding: 4px 4px 4px 24px; }
		&.toggle {
			//border: 1px solid #9B9B9B;
			@include box-shadow(inset 0 0 8px 0px #7e93b2);
		}
	}
}

.box-checkbox {
	input[type=checkbox]{
		display: inline-block;
		vertical-align: top;
		margin: 1px 4px 0px 0px;
		padding: 0px;
		&:checked + .box-checkbox__hide { display: block; }
	}
	.box-checkbox__hide {
		display: none;
		padding-top: 12px;
	}
}

.alv-bttn {
	background: transparent;
	border: none;
	display: inline-block;
	padding: 7px 10px 9px;
	font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif !important;
	font-size: 14px !important;
	line-height: 20px !important;
	text-align: center;
	text-decoration: none !important;
	outline: none !important;

	@include box-sizing();
	@include border-radius(2px);

	svg {
		position: relative; top: -1px;
		display: inline-block;
		vertical-align: middle;
		margin-right: 2px;
	}

	&.alv-bttn-block {
		display: block;
		width: 100%;
		padding-left: 0px !important;
		padding-right: 0px !important;
	}

	&.size-xxs {
		padding: 1px 7px 3px;
		svg { width: 14px; height: 14px; }
		&.size-long {
			padding-left: 12px;
			padding-right: 12px;
		}
	}
	&.size-xs {
		padding: 3px 7px 5px;
	}
	&.size-sm {
		padding: 5px 10px 7px;
	}
	&.size-lg {
		padding: 9px 15px 11px;
		font-size: 18px !important;
	}

	&.size-long {
		padding-left: 24px;
		padding-right: 24px;
	}

	&.style-default {
		background: #CCCCCC;
		background: linear-gradient(180deg, #E6E6E6 0%, #CCCCCC 100%);
		border-color: #E6E6E6;
		color: #000;
		&:hover {
			background: #E6E6E6;
			background: linear-gradient(180deg, #F5F5F5 0%, #D9D9D9 100%);
		}
		&.disabled {
			background: #E9E9E9;
			color: #9B9B9B;
			cursor: default !important;
		}
	}
	&.style-dark {
		background: #CCCCCC;
		background: linear-gradient(180deg, #4D4D4D 0%, #000000 100%);
		border-color: #E6E6E6;
		color: #ffffff;
		&:hover {
			background: #000000;
		}
	}
	&.style-link {
		background: none;
		border: none;
		color: $color_blue;
		&:hover {
			.type-link.external { border-bottom-color: #4998c4; }
		}
	}
	&.style-primary {
		background: #002b81;
		background: linear-gradient(-180deg,#2e75d1,#002b81);
		border-color: #2E75D1;
		color: #fff;
		svg { color: $color_white; fill: $color_white; }
		&:hover {
			background: #003cb5;
			background: linear-gradient(-180deg,#388eff,#003cb5);
		}
	}
	&.style-success {
		background: #00C800;
		background: linear-gradient(180deg, #00C800 0%, #006700 100%);
		border-color: #00C800;
		color: $color_white;
		&:hover {
			background: #00C800;
		}
	}
	&.style-warning {
		/*
		background: #fffc5d;
		border-color: #fffc5d;
		*/
		background: rgb(255,218,111);
		background: -moz-linear-gradient(top, rgba(255,218,111,1) 0%, rgba(243,181,0,1) 100%);
		background: -webkit-linear-gradient(top, rgba(255,218,111,1) 0%,rgba(243,181,0,1) 100%);
		background: linear-gradient(to bottom, rgba(255,218,111,1) 0%,rgba(243,181,0,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffda6f', endColorstr='#f3b500',GradientType=0 );
		color: #000;
		&:hover {
			//background: darken(#fffc5d, 20%);
			background: #F3B500;
		}
	}
	&.style-danger {
		background: #D70A0A;
		background: linear-gradient(180deg, #D70A0A 0%, #8A0707 100%);
		border-color: #D70A0A;
		color: $color_white;
		&:hover {
			background: #D70A0A;
		}
	}

	&.disabled {
		background: #E9E9E9 !important;
		color: #9B9B9B !important;
		cursor: default !important;
	}

	&:hover {
		cursor: pointer;
	}

	&.btn-loading {
		position: relative;
		&:before {
			content: '';
			background: $color_gray_20;
			position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;
			@include border-radius(2px);
		}
		&:after {
			content: '';
			background: url(../images/loading.png) no-repeat 50% 50% / auto 100%;
			position: absolute; top: 4px; left: 50%;
			width: 28px; height: 28px;
			margin-left: -14px;
			-webkit-animation: loader 1s linear infinite;
			animation: loader 2s linear infinite;

			@keyframes loader {
				0% { @include transform(rotate(0deg)); }
				100% { @include transform(rotate(360deg)); }
			}
			@-webkit-keyframes loader {
				0% { @include transform(rotate(0deg)); }
				100% { @include transform(rotate(360deg)); }
			}
		}
		&.size-xxs {
			&:after { width: 16px; height: 16px; margin-left: -8px; }
		}
		&.size-xs {
			&:after { width: 20px; height: 20px; margin-left: -10px; }
		}
		&.size-sm {
			&:after { width: 24px; height: 24px; margin-left: -12px; }
		}
		&.size-lg {
			&:after { width: 32px; height: 32px; margin-left: -16px; }
		}

		&.style-link {
			&:before {
				background: $color_gray_10;
			}
		}
		&.style-default {
			&:before {
				background: #CCCCCC;
				background: linear-gradient(180deg, #E6E6E6 0%, #CCCCCC 100%);
			}
		}
		&.style-primary {
			&:before {
				background: #002b81;
				background: linear-gradient(-180deg,#2e75d1,#002b81);
			}
		}
		&.style-success {
			&:before {
				background: #00C800;
				background: linear-gradient(180deg, #00C800 0%, #006700 100%);
			}
		}
		&.style-warning {
			&:before {
				background: #fffc5d;
			}
		}
		&.style-danger {
			&:before {
				background: #D70A0A;
				background: linear-gradient(180deg, #D70A0A 0%, #8A0707 100%);
			}
		}
	}

	&.alv-bttn-spinner {
		&:after {
			content: '';
			border: 2px solid $color_white;
			border-right-color: transparent;
			position: relative;
			margin: -4px 0 -2px 8px;
			display: inline-block;
			vertical-align: middle;
			width: 1em;
			height: 1em;
			@include border-radius(50%);
			animation: rotates 1.25s linear infinite;
			@keyframes rotates {
				0% { transform: none; }
				100% { transform: rotate(360deg); }
			}
		}
	}

	&.alv-bttn-emphasis {
		position: relative;
		z-index: 999;
		animation: fan-animate 3s linear .75s infinite alternate;
		@keyframes fan-animate {
			0%   { @include box-shadow(unquote("0 0 12px rgba(0,43,129,.5)")); }
			50%  { @include box-shadow(unquote("0 0 24px rgba(0,43,129,.8)")); }
			100% { @include box-shadow(unquote("0 0 4px rgba(0,43,129,.5)")); }
		}
	}
}

.alv-input-group {
	&.inline {
		display: inline-block;
	}
	.alv-form-control {float: left;}
	.alv-input-group-btn {
		.alv-bttn {
			@include border-radius(0px 2px 2px 0px);
		}
		&:first-child {
			.alv-bttn {
				@include border-radius(2px 0px 0px 2px);
			}
		}
	}
}

.select-simple {
	background-color: #ffffff !important;
	background-image: url(../images/select-simple-bg.png) !important;
	background-position: center right !important;
	background-repeat: no-repeat !important;
	border: 1px solid #b9b9b9;
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	min-height: 36px;
	margin: 0px !important;
	padding: 7px 10px;

	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	appearance: none;
	&::-ms-expand { display: none; }

	font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif !important;
	font-size: 14px !important;

	@include box-sizing();
	@include border-radius(2px);

	&.size-xxs {
		min-height: 24px;
		padding: 0px 0px !important;
	}
	&.size-xs {
		min-height: 28px;
		padding: 2px 10px 4px !important;
	}
	&.size-sm {
		min-height: 32px;
		padding: 5px 10px !important;
	}
	&.size-lg {
		min-height: 40px;
		padding: 6px 15px 7px !important;
		font-size: 18px !important;
	}

	&.inline {
		display: inline-block;
		vertical-align: top;
		width: auto;
		padding-right: 20px !important;
	}
}

.selectize-control {
	&.selectize-simple {
		position: relative;
		height: auto;

		.selectize-input {
			background: #fff !important;
			border: 1px solid #b9b9b9 !important;
			display: block !important;
			width: 100%;
			height: auto !important;
			//padding: 6px 25px 8px 10px !important;

			padding: 6px 25px 6px 10px !important;

			font-size: 14px !important;
			line-height: 16px;

			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			-o-box-sizing: border-box;
			box-sizing: border-box;

			-webkit-border-radius: 2px;
			-moz-border-radius: 2px;
			-ms-border-radius: 2px;
			border-radius: 2px;

			@include box-shadow(none);

			&.dropdown-active {
				&:before {
					display: none;
				}
			}

			&:after {
				right: 7px !important;
			}
			&.focus {
				border: 1px solid #0d61ab !important;
				box-shadow: inset 0 0 1px 0 #0d61ab,0 0 1px 0 #0d61ab;
			}

			.alv-form-group.has-error & {
				border: 1px solid #d70a0a !important;
				color: #d70a0a !important;
				box-shadow: inset 0 0 1px 0 #d70a0a, 0 0 1px 0 #d70a0a !important;
			}

			.item {
				position: relative !important;
				overflow: hidden !important;
				display: inline-block !important;
				vertical-align: top !important;
				max-width: 90% !important;
				height: 20px !important;
				line-height: 20px !important;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			input {
				display: inline-block !important;
				vertical-align: top !important;
				height: 20px !important;
				line-height: 20px !important;
				//position: absolute; top: 0px; right: 0px;
			}
		}
		.selectize-dropdown {
			top: 100% !important;
			margin-top: 2px;
			z-index: 999;
			.selectize-dropdown-content {
				.option {
					padding: 5px 8px !important;
					&.selected {}
				}
				.optgroup {
					border-top: 1px solid #ccc;
					&:first-child {border-top: none;}
					.optgroup-header {
						font-size: 12px;
						font-weight: bold;
					}
					.option {
						padding-left: 16px !important;
					}
				}
			}
		}
		&.has-error {
			.selectize-input {
				border: 1px solid $color_red !important;
				color: $color_red !important;
				input {
					color: $color_red !important;
					&::-webkit-input-placeholder {color: $color_red;}
					&::-moz-placeholder          {color: $color_red;}
					&:-moz-placeholder           {color: $color_red;}
					&:-ms-input-placeholder      {color: $color_red;}
				}
			}
		}

		&.size-xs {
			.selectize-input {
				height: 28px;
				padding: 4px 25px 4px 4px !important;
				.item, input {
					height: 18px !important;
					line-height: 18px !important;
				}
			}
		}
		&.size-xxs {
			font-size: 12px;
			.selectize-input {
				height: 24px;
				padding: 2px 25px 2px 4px !important;
				.item, input {
					height: 18px !important;
					font-size: 12px !important;
					line-height: 18px !important;
				}
			}
		}
	}
	.has-error > &, .alv-form-group.has-error & {
		.selectize-input {
			border-color: $color_red !important;
		}
	}
}

.t-informer {
	background: #FFDA6F;
	background: radial-gradient(circle, #F3B500 0%, #FFDA6F 100%);
	position: relative;
	overflow: hidden;
	width: 1010px;
	margin: 0 auto;
	padding: 12px 16px;
	font-size: 18px;
	line-height: 1.2em;
	color: $color_black;
	@include box-sizing();
	.cross {
		position: absolute; top: 8px; right: 8px;
		width: 12px;
		opacity: 0.5;
		&:hover {
			opacity: 1;
		}
		svg {display: block; width: 12px; height: 12px;}
	}
	.type-link {
		border-bottom: 1px solid $color_blue;
	}
	ul {
		margin: 0px; padding: 0px; list-style: none;
		li {
			display: inline-block;
			vertical-align: middle;
			margin-left: 12px;
			&:first-child {
				margin-left: 0px;
			}
		}
	}
}

/* --- alerts --- */
.alert {
	position: relative;
	border: 1px solid transparent;
	padding: 12px 15px;
	margin-bottom: 0px;
	color: $color_black;
	@include border-radius(4px);

	a { color: inherit; }
	p { margin: 0px 0px .75em 0px; }

	&.alert-xs { padding: 4px; font-size: 13px; }
	&.alert-sm { padding: 8px; }

	&.alert-square {
		@include border-radius(0px);
	}

	&.alert-inline {
		display: inline-block;
		vertical-align: middle;
	}

	&.alert-default {
		background: $color_gray_30;
		border: 1px solid $color_gray_30;
		color: $color_white;
		a:not(.alv-bttn):not(.closer) {
			border-bottom: 1px solid rgba(255,255,255,0.5);
			text-decoration: none;
			&:hover {
				border-bottom-color: $color_white;
			}
		}
	}
	&.alert-success {
		background-color: #DDFFBB;
		border-color: #529D40;
	}
	&.alert-danger {
		background-color: lighten($color_red, 50%);
		border-color: $color_red;
	}
	&.alert-info {
		background-color: lighten($color_blue, 55%);
		border-color: lighten($color_blue, 20%);
	}
	&.alert-warning {
		background-color: lighten($color_yellow, 15%);
		border-color: $color_yellow;
	}

	.closer {
		position: absolute; top: 4px; right: 4px;
	}
}

.icon {
	position: relative;
	display: block;
	& > .ico {
		position: absolute; top: 50%; left: 0px; text-align: center;
		z-index: 55;
		display: block;
		img, svg { display: block; width: 100%; }
	}
	&.right {
		& > .ico {left: auto; right: 0px;}
	}
	&.size-12 {
		$size : 12px;
		$margin : 4px;
		padding-left: $size + $margin;
		&.right { padding-left: 0px; padding-right: $size + $margin; }
		& > .ico {
			display: block; width: $size; height: $size;
			margin-top: -($size)/2;
			&.fa { font-size: 12px; line-height: $size; }
		}
	}
	&.size-16 {
		$size : 16px;
		$margin : 6px;
		padding-left: $size + $margin;
		&.right { padding-left: 0px; padding-right: $size + $margin; }
		&.padd-24 {
			padding-left: 24px;
			&.right { padding-left: 0px; padding-right: 24px; }
		}
		& > .ico {
			display: block; width: $size; height: $size;
			margin-top: -($size)/2;
			&.fa { font-size: 14px; line-height: $size; }
			&.top {top: 0px; margin-top: 1px;}
		}
	}
	&.size-24 {
		$size : 24px;
		$margin : 8px;
		padding-left: $size + $margin;
		&.right { padding-left: 0px; padding-right: $size + $margin; }
		& > .ico {
			display: block; width: $size; height: $size;
			margin-top: -($size)/2;
			&.fa { font-size: 20px; line-height: $size; }
			&.top {top: 0px; margin-top: 1px;}
		}
	}
	&.size-32 {
		$size : 32px;
		$margin : 8px;
		padding-left: $size + $margin;
		&.right { padding-left: 0px; padding-right: $size + $margin; }
		& > .ico {
			display: block; width: $size; height: $size;
			margin-top: -($size)/2;
			&.fa { font-size: 20px; line-height: $size; }
			&.top {top: 0px; margin-top: 1px;}
		}
	}
	&.size-60 {
		$size : 60px;
		$margin : 12px;
		padding-left: $size + $margin;
		&.right { padding-left: 0px; padding-right: $size + $margin; }
		& > .ico {
			display: block; width: $size; height: $size;
			margin-top: -($size)/2;
			&.fa { font-size: 20px; line-height: $size; }
		}
	}

	&:hover {
		.icon-hover {
			text-decoration: underline;
		}
	}

	.ico {
		&.ico-auto-brands {
			font-size: 24px;
			background: url(../images/icons/auto-brands-40.png) no-repeat 0px 100px;
			background-size: auto 100%;
			&.acura 		{ background-position: 0px 0px; }
			&.alfa-romeo 	{ background-position: -1em 0px; }
			&.audi 			{ background-position: -2em 0px; }
			&.austin 		{ background-position: -3em 0px; }
			&.bmw 			{ background-position: -4em 0px; }
			&.cadillac 		{ background-position: -5em 0px; }
			&.chevrolet 	{ background-position: -6em 0px; }
			&.chrysler 		{ background-position: -7em 0px; }
			&.citroen 		{ background-position: -8em 0px; }
			&.dacia 		{ background-position: -9em 0px; }
			&.daewoo 		{ background-position: -10em 0px; }
			&.daihatsu 		{ background-position: -11em 0px; }
			&.dodge 		{ background-position: -12em 0px; }
			&.fiat 			{ background-position: -13em 0px; }
			&.ford 			{ background-position: -14em 0px; }
			&.gaz 			{ background-position: -15em 0px; }
			&.geo 			{ background-position: -16em 0px; }
			&.honda 		{ background-position: -17em 0px; }
			&.hyundai 		{ background-position: -18em 0px; }
			&.infiniti 		{ background-position: -19em 0px; }
			&.isuzu 		{ background-position: -20em 0px; }
			&.iveco 		{ background-position: -21em 0px; }
			&.jaguar 		{ background-position: -22em 0px; }
			&.jeep 			{ background-position: -23em 0px; }
			&.kia 			{ background-position: -24em 0px; }
			&.lada 			{ background-position: -25em 0px; }
			&.lancia 		{ background-position: -26em 0px; }
			&.land-rover 	{ background-position: -27em 0px; }
			&.lexus 		{ background-position: -28em 0px; }
			&.lincoln 		{ background-position: -29em 0px; }
			&.mazda 		{ background-position: -30em 0px; }
			&.mercedes-benz { background-position: -31em 0px; }
			&.mg 			{ background-position: -32em 0px; }
			&.mini 			{ background-position: -33em 0px; }
			&.mitsubishi 	{ background-position: -34em 0px; }
			&.moskwicz 		{ background-position: -35em 0px; }
			&.nissan 		{ background-position: -36em 0px; }
			&.oldsmobile 	{ background-position: -37em 0px; }
			&.opel 			{ background-position: -38em 0px; }
			&.peugeot 		{ background-position: -39em 0px; }
			&.plymouth 		{ background-position: -40em 0px; }
			&.pontiac 		{ background-position: -41em 0px; }
			&.porsche 		{ background-position: -42em 0px; }
			&.renault 		{ background-position: -43em 0px; }
			&.rolls-royce 	{ background-position: -44em 0px; }
			&.rover 		{ background-position: -45em 0px; }
			&.saab 			{ background-position: -46em 0px; }
			&.seat 			{ background-position: -47em 0px; }
			&.skoda 		{ background-position: -48em 0px; }
			&.smart 		{ background-position: -49em 0px; }
			&.ssangyong 	{ background-position: -50em 0px; }
			&.subaru 		{ background-position: -51em 0px; }
			&.suzuki 		{ background-position: -52em 0px; }
			&.toyota 		{ background-position: -53em 0px; }
			&.uaz 			{ background-position: -54em 0px; }
			&.volkswagen 	{ background-position: -55em 0px; }
			&.volvo 		{ background-position: -56em 0px; }
			&.zaz 			{ background-position: -57em 0px; }

			&.daf 			{ background-position: -58em 0px; }
			&.man 			{ background-position: -59em 0px; }
			&.scania 		{ background-position: -60em 0px; }
			&.setra 		{ background-position: -61em 0px; }
		}
	}
}
span.icon, strong.icon, a.icon {display: inline-block;}

.icon-ballon-message {
	margin-top: 5px;
	span {
		position: relative;
		background: #dde4ec;
		display: inline-block;
		padding: 4px 8px;
		&:before {
			content: '';
			border: 5px solid transparent;
			border-left-color: #dde4ec;
			position: absolute; top: -5px; left: 0px;
			display: block;
		}
	}
	&.size-16 { padding-left: 18px; }
	&.size-24 { padding-left: 26px; }
}

//
.js-pass-view {
	&:hover {
		cursor: pointer;
	}
	&.styled {
		fill: $color_blue;
	}
}
.js-focus-icon {
	&:hover {
		color: $color_blue !important;
		fill: $color_blue !important;
		cursor: pointer;
	}
}

//panels
.panel {
	position: relative;
	.panel-closer {
		position: absolute; top: 8px; right: 8px;
	}
	.panel-closer-timer {
		position: absolute; top: 10px; right: 28px;
	}
	.panel-head, .panel-heading {}
	.panel-body {
		padding: 8px;
		&.padd-double { padding: 16px; }
		&.padd-24 { padding: 24px; }
		&.padd-32 { padding: 32px; }
	}

	&.panel-simple {
		background: $color_white;
		border: none;
		box-shadow: 2px 2px 3px 0 rgba(204,209,217,0.5);
		@include border-radius(0px !important);
		.panel-head {}
		.panel-body {
			padding: 16px;
			.panel-negative {
				position: relative;
				margin-left: -16px;
				margin-right: -16px;
				padding: 16px;
			}

		}
		.panel-foot {}

		&.shadow {
			box-shadow: 2px 2px 8px rgba(204,209,217,0.5);
		}
	}
	&.panel-warning {
		background: $color_yellow;
		border: none;
		@include border-radius();
		@include box-shadow();
		.panel-body {}
	}
	&.panel-light-warning {
		background: #FFFFCC;
		border: none;
		@include border-radius();
		@include box-shadow();
		.panel-body {}
	}
	&.panel-gray {
		background: $color_gray_03;
		border: none;
		@include border-radius();
		@include box-shadow();
		.panel-body {}
	}
	&.panel-water {
		background: #D5E6F6;
		border: none;
		@include border-radius(0px);
		@include box-shadow();
		.panel-body {}
	}
	&.panel-sky {
		background: #DDE4EC;
		border: none;
		@include border-radius(0px);
		@include box-shadow();
		.panel-body {}
	}
	&.panel-info {
		border: 4px solid #DDE4EC;
		.panel-body {}
	}
	&.panel-info2 {
		background: none;
		border: 4px solid #DDE4EC;
		.panel-body {}
	}
	&.panel-tab {
		.panel-head, .panel-heading {
			background: #DDE4EC;
			display: inline-block;
			padding: 4px 12px;
			font-weight: bold;
			font-size: 12px;
		}
		.panel-body {
			border: 4px solid #DDE4EC;
		}
	}

	&.panel-blinking {
		animation: blinking 1.25s ease-in-out 3;
		@keyframes blinking {
			0% {background: inherit;}
			75% {background: #B8E986;}
			100% {background: inherit;}
		}
	}
}

//collapse
.collapse {}
a.collapse-active-red {
	&[aria-expanded="false"]{
		color: $color_gray_50;
	}
	&[aria-expanded="true"]{
		color: $color_red;
	}
}

//headline
.headliner {
	position: relative;
	overflow: hidden;
	margin-bottom: 15px;
	font-size: 12px;
	line-height: 1.4em;
	color: #9b9b9b;
	text-align: center;
	text-transform: uppercase;
	span {
		position: relative;
		display: inline-block;
		&:before {
			content: '';
			background: rgba(155,155,155,0.7);
			position: absolute; top: 50%; right: 100%;
			display: block; width: 10000px; height: 1px;
			margin: 0px 10px 0px 0px;
		}
		&:after {
			content: '';
			background: rgba(155,155,155,0.7);
			position: absolute; top: 50%; left: 100%;
			display: block; width: 10000px; height: 1px;
			margin: 0px 0px 0px 10px;
		}
	}
}

//modal
body.modal-body {
	overflow: hidden;
	padding: 0px !important;
}
.modal-backdrop {
	background: #000;
	position: fixed; top: 0px; bottom: 0px; left: 0px; right: 0px;
	z-index: 9998;
	opacity: 0.5;
	&.hide, &.fade {display: none;}
	&.in { display: block !important; }
}
.modal {
	position: fixed; top: 0; bottom: 0px; left: 0px; right: 0;
	z-index: 9999;
	overflow-y: auto;
	outline: 0;
	//min-width: 1000px;
	//opacity: 1;
	-webkit-overflow-scrolling: touch;
	&.hide, &.fade {display: none;}
	//&.in { display: block !important; }
	.modal-autoclose { display: none; }
	&.autoclose {
		.modal-autoclose {
			display: block;
			position: absolute; top: 40px; right: 16px;
			font-size: 10px;
		}
	}
	.modal-mover {
		cursor: move;
	}
	.modal-cross {
		background-color: #7D92B3;
		position: absolute; top: 16px; right: 16px; z-index: 55;
		display: block; width: 24px; height: 24px;
		@include border-radius(3px);
		@media (max-width: 767px) {
			top: 8px; right: 8px;
		}
		&:before {
			content: '';
			background: #fff;
			position: absolute; top: 50%; left: 50%;
			display: block; width: 16px; height: 2px;
			margin: -1px 0px 0px -8px;
			@include transform(rotate(-45deg));
			@include border-radius(4px);
		}
		&:after {
			content: '';
			background: #fff;
			position: absolute; top: 50%; left: 50%;
			display: block; width: 16px; height: 2px;
			margin: -1px 0px 0px -8px;
			@include transform(rotate(45deg));
			@include border-radius(4px);
		}
		&:hover {
			background: darken(#7D92B3, 10%);
			cursor: pointer;
		}

		.modal-cross__addition {
			position: absolute; top: 0px; right: 100%;
			padding-right: 5px;
			font-size: 12px;
			line-height: 24px;
			white-space: nowrap;
		}

		&.style-gray {
			background: $color_gray_20;
			&:hover {
				background: $color_red;
			}
		}
	}
	.modal-dialog {
		position: relative;
		width: 600px;
		margin: 50px auto;
		@media (max-width: 767px) { width: auto; margin: 15px; }
		&.modal-lg {
			width: 900px;
			@media (max-width: 991px) { width: auto; margin: 15px; }
		}
		.modal-content {
			background: #fff;
			@include border-radius(3px);
			@include box-shadow(0px 2px 4px 0px rgba(0,0,0,0.5));
			.modal-head {
				background: #DDE4EC;
				min-height: 56px;
				padding: 13px 24px;
				font-size: 22px;
				font-weight: bold;
				@include border-radius(3px 3px 0px 0px);
				@include box-sizing();
				.small {
					font-size: 14px;
					font-weight: normal;
				}
				&.clean {
					background: none;
					min-height: auto;
					padding-top: 20px;
					padding-bottom: 0px;
				}
			}
			.modal-body {
				padding: 24px;
				@include box-sizing();
				&.padd-50 {
					padding: 48px 50px;
					@media (max-width: 767px) {padding: 32px;}
				}
				&.modal-body-fix {
					overflow-y: auto;
					max-height: 500px;
				}
			}
			.modal-footer {
				background: #dde4ec;
				padding: 13px 24px;
				@include border-radius(0px 0px 3px 3px);
				@include box-sizing();
				&.white {
					background: $color_white;
				}
			}
		}
	}

	&.moving {
		-ms-user-select: none;
		-moz-user-select: none;
		-khtml-user-select: none;
		-webkit-user-select: none;
	}
}

.move-modal {
	background: #DDE4EC;
	border: 1px solid darken(#DDE4EC, 5%);
	position: absolute; top: 100px; left: 50%;
	z-index: 999;
	width: 600px;
	margin-left: -300px;
	padding: 20px;
	display: none;
	@include box-shadow(0px 0px 10px $color_gray_30);
	.move-modal__head {
		position: relative;
		margin-top: -5px;
		padding: 0px 0px 10px;
		.move-modal__hide {
			color: $color_gray_90;
			i {
				position: relative;
				display: inline-block;
				vertical-align: middle;
				width: 16px; height: 16px;
				margin-left: 4px;
				&:before {
					content: '';
					background: $color_gray_90;
					position: absolute; top: 50%; left: 50%;
					display: block; width: 7px; height: 2px;
					margin-top: -1px;
					margin-left: -1px;
					@include transform(rotate(-40deg));
				}
				&:after {
					content: '';
					background: $color_gray_90;
					position: absolute; top: 50%; right: 50%;
					display: block; width: 7px; height: 2px;
					margin-top: -1px;
					margin-right: -1px;
					@include transform(rotate(40deg));
				}
			}
			&:hover {
				color: $color_blue;
				cursor: pointer;
				i:before, i:after {
					background: $color_blue;
				}
			}
		}
	}
	.move-modal__body {}
	&:hover {
		cursor: move;
		.move-modal__body { cursor: default; }
	}
}

.over-height {
	position: relative;
	overflow-y: auto;
}


.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}
.clearfix:after {
	clear: both;
}

.row {
	&.row-4 { margin-left: -2px !important; margin-right: -2px !important; }
	&.row-4 > .col-xs-1, &.row-4 > .col-sm-1, &.row-4 > .col-md-1, &.row-4 > .col-lg-1, &.row-4 > .col-xs-2, &.row-4 > .col-sm-2, &.row-4 > .col-md-2, &.row-4 > .col-lg-2, &.row-4 > .col-xs-3, &.row-4 > .col-sm-3, &.row-4 > .col-md-3, &.row-4 > .col-lg-3, &.row-4 > .col-xs-4, &.row-4 > .col-sm-4, &.row-4 > .col-md-4, &.row-4 > .col-lg-4, &.row-4 > .col-xs-5, &.row-4 > .col-sm-5, &.row-4 > .col-md-5, &.row-4 > .col-lg-5, &.row-4 > .col-xs-6, &.row-4 > .col-sm-6, &.row-4 > .col-md-6, &.row-4 > .col-lg-6, &.row-4 > .col-xs-7, &.row-4 > .col-sm-7, &.row-4 > .col-md-7, &.row-4 > .col-lg-7, &.row-4 > .col-xs-8, &.row-4 > .col-sm-8, &.row-4 > .col-md-8, &.row-4 > .col-lg-8, &.row-4 > .col-xs-9, &.row-4 > .col-sm-9, &.row-4 > .col-md-9, &.row-4 > .col-lg-9, &.row-4 > .col-xs-10, &.row-4 > .col-sm-10, &.row-4 > .col-md-10, &.row-4 > .col-lg-10, &.row-4 > .col-xs-11, &.row-4 > .col-sm-11, &.row-4 > .col-md-11, &.row-4 > .col-lg-11, &.row-4 > .col-xs-12, &.row-4 > .col-sm-12, &.row-4 > .col-md-12, &.row-4 > .col-lg-12 { padding-left: 2px !important; padding-right: 2px !important; }
	&.row-8 { margin-left: -4px !important; margin-right: -4px !important; }
	&.row-8 > .col-xs-1, &.row-8 > .col-sm-1, &.row-8 > .col-md-1, &.row-8 > .col-lg-1, &.row-8 > .col-xs-2, &.row-8 > .col-sm-2, &.row-8 > .col-md-2, &.row-8 > .col-lg-2, &.row-8 > .col-xs-3, &.row-8 > .col-sm-3, &.row-8 > .col-md-3, &.row-8 > .col-lg-3, &.row-8 > .col-xs-4, &.row-8 > .col-sm-4, &.row-8 > .col-md-4, &.row-8 > .col-lg-4, &.row-8 > .col-xs-5, &.row-8 > .col-sm-5, &.row-8 > .col-md-5, &.row-8 > .col-lg-5, &.row-8 > .col-xs-6, &.row-8 > .col-sm-6, &.row-8 > .col-md-6, &.row-8 > .col-lg-6, &.row-8 > .col-xs-7, &.row-8 > .col-sm-7, &.row-8 > .col-md-7, &.row-8 > .col-lg-7, &.row-8 > .col-xs-8, &.row-8 > .col-sm-8, &.row-8 > .col-md-8, &.row-8 > .col-lg-8, &.row-8 > .col-xs-9, &.row-8 > .col-sm-9, &.row-8 > .col-md-9, &.row-8 > .col-lg-9, &.row-8 > .col-xs-10, &.row-8 > .col-sm-10, &.row-8 > .col-md-10, &.row-8 > .col-lg-10, &.row-8 > .col-xs-11, &.row-8 > .col-sm-11, &.row-8 > .col-md-11, &.row-8 > .col-lg-11, &.row-8 > .col-xs-12, &.row-8 > .col-sm-12, &.row-8 > .col-md-12, &.row-8 > .col-lg-12 { padding-left: 4px !important; padding-right: 4px !important; }
	&.row-12 { margin-left: -6px !important; margin-right: -6px !important; }
	&.row-12 > .col-xs-1, &.row-12 > .col-sm-1, &.row-12 > .col-md-1, &.row-12 > .col-lg-1, &.row-12 > .col-xs-2, &.row-12 > .col-sm-2, &.row-12 > .col-md-2, &.row-12 > .col-lg-2, &.row-12 > .col-xs-3, &.row-12 > .col-sm-3, &.row-12 > .col-md-3, &.row-12 > .col-lg-3, &.row-12 > .col-xs-4, &.row-12 > .col-sm-4, &.row-12 > .col-md-4, &.row-12 > .col-lg-4, &.row-12 > .col-xs-5, &.row-12 > .col-sm-5, &.row-12 > .col-md-5, &.row-12 > .col-lg-5, &.row-12 > .col-xs-6, &.row-12 > .col-sm-6, &.row-12 > .col-md-6, &.row-12 > .col-lg-6, &.row-12 > .col-xs-7, &.row-12 > .col-sm-7, &.row-12 > .col-md-7, &.row-12 > .col-lg-7, &.row-12 > .col-xs-8, &.row-12 > .col-sm-8, &.row-12 > .col-md-8, &.row-12 > .col-lg-8, &.row-12 > .col-xs-9, &.row-12 > .col-sm-9, &.row-12 > .col-md-9, &.row-12 > .col-lg-9, &.row-12 > .col-xs-10, &.row-12 > .col-sm-10, &.row-12 > .col-md-10, &.row-12 > .col-lg-10, &.row-12 > .col-xs-11, &.row-12 > .col-sm-11, &.row-12 > .col-md-11, &.row-12 > .col-lg-11, &.row-12 > .col-xs-12, &.row-12 > .col-sm-12, &.row-12 > .col-md-12, &.row-12 > .col-lg-12 { padding-left: 6px !important; padding-right: 6px !important; }
	&.row-16 { margin-left: -8px !important; margin-right: -8px !important; }
	&.row-16 > .col-xs-1, &.row-16 > .col-sm-1, &.row-16 > .col-md-1, &.row-16 > .col-lg-1, &.row-16 > .col-xs-2, &.row-16 > .col-sm-2, &.row-16 > .col-md-2, &.row-16 > .col-lg-2, &.row-16 > .col-xs-3, &.row-16 > .col-sm-3, &.row-16 > .col-md-3, &.row-16 > .col-lg-3, &.row-16 > .col-xs-4, &.row-16 > .col-sm-4, &.row-16 > .col-md-4, &.row-16 > .col-lg-4, &.row-16 > .col-xs-5, &.row-16 > .col-sm-5, &.row-16 > .col-md-5, &.row-16 > .col-lg-5, &.row-16 > .col-xs-6, &.row-16 > .col-sm-6, &.row-16 > .col-md-6, &.row-16 > .col-lg-6, &.row-16 > .col-xs-7, &.row-16 > .col-sm-7, &.row-16 > .col-md-7, &.row-16 > .col-lg-7, &.row-16 > .col-xs-8, &.row-16 > .col-sm-8, &.row-16 > .col-md-8, &.row-16 > .col-lg-8, &.row-16 > .col-xs-9, &.row-16 > .col-sm-9, &.row-16 > .col-md-9, &.row-16 > .col-lg-9, &.row-16 > .col-xs-10, &.row-16 > .col-sm-10, &.row-16 > .col-md-10, &.row-16 > .col-lg-10, &.row-16 > .col-xs-11, &.row-16 > .col-sm-11, &.row-16 > .col-md-11, &.row-16 > .col-lg-11, &.row-16 > .col-xs-12, &.row-16 > .col-sm-12, &.row-16 > .col-md-12, &.row-16 > .col-lg-12 { padding-left: 8px !important; padding-right: 8px !important; }
	&.row-24 { margin-left: -12px !important; margin-right: -12px !important; }
	&.row-24 > .col-xs-1, &.row-24 > .col-sm-1, &.row-24 > .col-md-1, &.row-24 > .col-lg-1, &.row-24 > .col-xs-2, &.row-24 > .col-sm-2, &.row-24 > .col-md-2, &.row-24 > .col-lg-2, &.row-24 > .col-xs-3, &.row-24 > .col-sm-3, &.row-24 > .col-md-3, &.row-24 > .col-lg-3, &.row-24 > .col-xs-4, &.row-24 > .col-sm-4, &.row-24 > .col-md-4, &.row-24 > .col-lg-4, &.row-24 > .col-xs-5, &.row-24 > .col-sm-5, &.row-24 > .col-md-5, &.row-24 > .col-lg-5, &.row-24 > .col-xs-6, &.row-24 > .col-sm-6, &.row-24 > .col-md-6, &.row-24 > .col-lg-6, &.row-24 > .col-xs-7, &.row-24 > .col-sm-7, &.row-24 > .col-md-7, &.row-24 > .col-lg-7, &.row-24 > .col-xs-8, &.row-24 > .col-sm-8, &.row-24 > .col-md-8, &.row-24 > .col-lg-8, &.row-24 > .col-xs-9, &.row-24 > .col-sm-9, &.row-24 > .col-md-9, &.row-24 > .col-lg-9, &.row-24 > .col-xs-10, &.row-24 > .col-sm-10, &.row-24 > .col-md-10, &.row-24 > .col-lg-10, &.row-24 > .col-xs-11, &.row-24 > .col-sm-11, &.row-24 > .col-md-11, &.row-24 > .col-lg-11, &.row-24 > .col-xs-12, &.row-24 > .col-sm-12, &.row-24 > .col-md-12, &.row-24 > .col-lg-12 { padding-left: 12px !important; padding-right: 12px !important; }
	&.row-32 { margin-left: -16px !important; margin-right: -16px !important; }
	&.row-32 > .col-xs-1, &.row-32 > .col-sm-1, &.row-32 > .col-md-1, &.row-32 > .col-lg-1, &.row-32 > .col-xs-2, &.row-32 > .col-sm-2, &.row-32 > .col-md-2, &.row-32 > .col-lg-2, &.row-32 > .col-xs-3, &.row-32 > .col-sm-3, &.row-32 > .col-md-3, &.row-32 > .col-lg-3, &.row-32 > .col-xs-4, &.row-32 > .col-sm-4, &.row-32 > .col-md-4, &.row-32 > .col-lg-4, &.row-32 > .col-xs-5, &.row-32 > .col-sm-5, &.row-32 > .col-md-5, &.row-32 > .col-lg-5, &.row-32 > .col-xs-6, &.row-32 > .col-sm-6, &.row-32 > .col-md-6, &.row-32 > .col-lg-6, &.row-32 > .col-xs-7, &.row-32 > .col-sm-7, &.row-32 > .col-md-7, &.row-32 > .col-lg-7, &.row-32 > .col-xs-8, &.row-32 > .col-sm-8, &.row-32 > .col-md-8, &.row-32 > .col-lg-8, &.row-32 > .col-xs-9, &.row-32 > .col-sm-9, &.row-32 > .col-md-9, &.row-32 > .col-lg-9, &.row-32 > .col-xs-10, &.row-32 > .col-sm-10, &.row-32 > .col-md-10, &.row-32 > .col-lg-10, &.row-32 > .col-xs-11, &.row-32 > .col-sm-11, &.row-32 > .col-md-11, &.row-32 > .col-lg-11, &.row-32 > .col-xs-12, &.row-32 > .col-sm-12, &.row-32 > .col-md-12, &.row-32 > .col-lg-12 { padding-left: 16px !important; padding-right: 16px !important; }
}

.rowly {
	position: relative;
	margin-left: -8px;
	margin-right: -8px;
	&.rowly-flex {
		display: flex;
		.rowly-col-middle {
			align-self: center;
		}
	}
	.rowly-col {
		float: left;
		min-height: 1px;
		padding-left: 8px;
		padding-right: 8px;
		@include box-sizing();
		@for $i from 1 through 100 {
			&.w-#{$i} { width: 0% + $i; }
		}
		&.col-12 { width: 100%; float: none; }
		&.col-11 { width: 91.66666667%; }
		&.col-10 { width: 83.33333333%; }
		&.col-9 { width: 75%; }
		&.col-8 { width: 66.66666667%; }
		&.col-7 { width: 58.33333333%; }
		&.col-6 { width: 50%; }
		&.col-5 { width: 41.66666667%; }
		&.col-4 { width: 33.33333333%; }
		&.col-3 { width: 25%; }
		&.col-2 { width: 16.66666667%; }
		&.col-1 { width: 8.33333333%; }
		&.rowly-col-lbord {
			border-left: 1px solid #dde4ec;
		}
	}
	&.rowly-0 {
		margin-left: 0px;
		margin-right: 0px;
		.rowly-col {
			padding-left: 0px;
			padding-right: 0px;
		}
	}
	&.rowly-4 {
		margin-left: -4px;
		margin-right: -4px;
		.rowly-col {
			padding-left: 4px;
			padding-right: 4px;
		}
	}
	&.rowly-12 {
		margin-left: -12px;
		margin-right: -12px;
		.rowly-col {
			padding-left: 12px;
			padding-right: 12px;
		}
	}

	&.rowly-error {
		background: lighten($color_red, 40%);
		color: $color_red;

		-webkit-box-shadow: 0px -3px 0px lighten($color_red, 40%), 0px 3px 0px lighten($color_red, 40%);
		-moz-box-shadow: 0px -3px 0px lighten($color_red, 40%), 0px 3px 0px lighten($color_red, 40%);
		-ms-box-shadow: 0px -3px 0px lighten($color_red, 40%), 0px 3px 0px lighten($color_red, 40%);
		box-shadow: 0px -3px 0px lighten($color_red, 40%), 0px 3px 0px lighten($color_red, 40%);
	}

}
.rowly:before,
.rowly:after {
	content: " ";
	display: table;
}
.rowly:after {
	clear: both;
}

//tables
.verbot {
	vertical-align: bottom !important;
}
.table-bord {
	tr {
		th {
			background: $color_gray_20;
			border: 1px solid $color_gray_50;
			padding: 8px;
		}
		td {
			border: 1px solid $color_gray_50;
			padding: 8px;
		}
	}
}
.table-simple {
	td {
		vertical-align: top;
		padding: 10px 0px 0px 15px !important;
		&:first-child {padding-left: 0px !important;}
	}
	tr:first-child td { padding-top: 0px !important; }
	&.middle {
		th, td { vertical-align: middle; }
	}
}
.table-simple-bord {
	width: 100%;
	td {
		border-top: 1px solid $color_gray_80;
		padding: 5px 0px 5px 10px;
		&:first-child { padding-left: 0px; }
	}
}
.table-totalsumm {
	td {
		padding: 5px 0px 5px 20px;
		text-align: right;
		&:first-child { padding-left: 0px; }
	}
}
.table-inline-simple {
	td {
		padding: 10px 0px 0px 15px !important;
		&:first-child {padding-left: 0px !important;}
	}
	tr:first-child td { padding-top: 0px !important; }
	&.v2 {
		td {
			padding-top: 0px !important;
		}
	}
}

.alv-table-striped {
	width: 100%;
	@media (max-width: 1420px) {
		font-size: 11px;
	}
	th {
		background: $color_gray_20;
		padding: 8px 12px;
		font-weight: bold;
		color: $color_black;
		vertical-align: top;
	}
	td {
		border-bottom: 1px solid $color_gray_10;
		padding: 8px 12px !important;
		vertical-align: top;
	}
	.editable {
		.editable-link { display: none; }
	}
	tr:hover {
		td { background: #d5e6f6; }
		.editable {
			.editable-link { display: block; }
		}
	}
	tr.active {
		td {
			background: #ffe180;
			.highlight-yellow { background: lighten($color_blue, 40%); }
		}
	}

	&.odd {
		tbody tr:nth-of-type(2n) td { background-color: #f2f2f2; }
		tbody tr:hover td { background: #d5e6f6; }
	}

	&.size-sm {
		th { padding: 4px; }
		td { padding: 4px !important; }
	}
}

.alv-container {
	width: 1010px;
	margin: 0 auto;
}

//breadcrumbs
.pathway {
	margin: 0px 0px 24px 0px;
	padding: 0px;
	list-style: none;
	svg {
		position: relative;
		margin-top: -4px;
		display: inline-block;
		vertical-align: middle;
		width: 16px; height: 16px;
	}
	li {
		display: inline-block;
		.fa { min-width: 16px; text-align: center; }
		&:first-child {}
		& + li {}

		&.pathway-adder {
			display: block;
			font-size: 12px;
			color: $color_gray_50;
			a {
				border: none;
				color: inherit;
				&:hover { color: $color_blue; }
			}
		}
	}
	a {
		border: none;
		color: $color_gray_80;
		text-decoration: none;
		&:hover {
			color: $color_blue;
		}
	}
}

.breadcrumb {
	background: none;
	border: none;
	position: relative;
	margin: 0px -6px 24px -6px; padding: 0px; list-style: none;
	line-height: normal;
	li {
		position: relative;
		display: inline-block;
		vertical-align: top;
		padding: 0;
		& + li {
			padding-left: 20px;
			&:before {
				content: '';
				background: url(../images/icons/breadcrumb-separator.png) no-repeat 0 0;
				position: absolute; top: 10px; left: 2px;
				display: block; width: 12px; height: 18px;
			}
		}
		& > a, & > span {
			border: none;
			display: block;
			padding: 4px 6px 8px;
			font-size: 12px;
			line-height: normal;
			color: $color_gray_50;
			text-decoration: none;
			.name {
				display: block;
				font-size: 20px;
				.black { color: $color_gray_80 !important; }
			}
			.description {
				display: block;
				padding-top: 2px;
				text-decoration: underline;
				&.form-iconbox {
					max-width: 200px;
					input {
						background: $color_white;
						border: 1px solid $color_gray_20;
						@include box-shadow(none);
					}
				}
			}
		}
		a:hover { background: $color_gray_05; }
	}

	.breadcrumb__search {
		padding: 4px 6px;
		line-height: normal;
		.title {
			font-size: 20px;
		}
		.input-group {
			position: relative;
			max-width: 220px;
			.field {
				position: relative;
				input {
					float: none !important;
					padding-right: 24px;
					@include border-radius(3px 0px 0px 3px !important);
				}
				.closer {
					display: none;
					top: 50%;
					margin-top: -8px;
				}
				&.active {
					.closer { display: block; }
				}
			}
			.input-group-addon {
				background: $color_blue;
				border-color: $color_blue;
				background: -moz-linear-gradient(top, #2E75D1 0%, #002B81 100%);
				background: -webkit-linear-gradient(top, #2E75D1 0%, #002B81 100%);
				background: linear-gradient(to bottom, #2E75D1 0%, #002B81 100%);
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2E75D1', endColorstr='#002B81', GradientType=0 );
				color: $color_white;
				@include border-radius(0px 3px 3px 0px !important);
			}
		}
	}
}


.alv-breadcrumbs--big {
	margin: 0px; padding: 0px;
	list-style:none;
	li {
		display: inline-block;
		vertical-align: top;
		margin: 0px 0px 0px 7px;
		padding: 4px 0px;
		&:first-child { margin-left: 0px; }
	}
	.alv-breadcrumbs__helper{ display: block; font-size: 12px; color:#9b9b9b; }

	svg{ fill: currentColor; margin:5px 8px 0 2px; }
	a, span, svg {
		display: inline-block;
		vertical-align: top;
	}
	a {
		font-size: 14px;
		line-height: 1.3;
		color: #2c2c2c;
		cursor: pointer;
		text-decoration: none;
	}
	a:hover {
		color: #0d61ab;
		.alv-breadcrumbs__helper { color: #0d61ab; }
	}
}

//flags
.alv-flag {
	position: relative;
	top: -2px;
	display: inline-block;
	vertical-align: middle;
	width: 20px; height: 15px;
	margin-right: 5px;
	@include box-shadow(0 0 2px 0px rgba(0,0,0,0.5));
	&.fi {
		fill: #003580;
	}
}

//alv banners
.alv-brn-mapco {
	background: url(http://alvadi.ee/images/mapcohps-footerLight.png) repeat 0 0 / 100% auto;
	position: relative;
	padding: 15px 25px;
	.alv-brn-mapco__link {
		position: absolute; top: 0px; left: 0px; z-index: 5;
		display: block; width: 100%; height: 100%;
	}
	.logo {
		display: inline-block;
		vertical-align: middle;
	}
	.text {
		display: inline-block;
		vertical-align: middle;
		padding-left: 30px;
		font-size: 14px;
		h2 {
			font-size: 22px;
			font-weight: bold;
			sup {
				font-size: 12px;
			}
		}
	}
}

//labelist
.labelist {
	& > li {
		/*padding-top: 10px;
		&:first-child {padding-top: 0px;}*/
	}
	label {
		position: relative;
		font-weight: normal;
		input {
			position: absolute;
			top: 0px;
			left: 0px;
			z-index: 1;
			margin: 0px;
			visibility: hidden;
		}
		.arr { display: none; }
		&:hover { cursor: pointer; }
	}
	&.labelist-a {
		label {
			position: relative;
			//padding: 0px 0px 0px 30px;
			padding-left: 30px;
			margin: 0px;
			input {position: absolute; top: 0px; left: 0px; z-index: 1; margin: 0px; visibility: hidden;}
			.arr {
				background: #fff;
				border: 1px solid #b3b3b3;
				position: absolute; top: 50%; left: 0px; z-index: 5;
				display: block; width: 16px; height: 16px;
				margin: -10px 0px 0px 0px;
				@include box-shadow(inset 0 1px 1px 1px rgba(0,0,0,0.12));
				&.check {
					@include border-radius(3px);
				}
				&.radio {
					@include border-radius(50%);
				}
			}
			&:hover {cursor: pointer;}
			&.active {
				.arr {
					background: #3B99FC;
					border-color: #3B99FC;
					@include box-shadow();
					&.check {}
					&.radio {
						&:before {
							content: '';
							background: #fff;
							position: absolute; top: 50%; left: 50%;
							display: block; width: 6px; height: 6px;
							margin: -3px 0px 0px -3px;
							@include border-radius(50%);
						}
					}
					//&:before {display: block;}
				}
			}
		}
	}
	&.labelist-b {
		label {
			position: relative;
			padding-left: 22px;
			margin: 0px;
			input {position: absolute; top: 0px; left: 0px; z-index: 1; margin: 0px; visibility: hidden;}
			.arr {
				background: #fff;
				border: 1px solid #b3b3b3;
				position: absolute; top: 50%; left: 0px; z-index: 5;
				display: block; width: 12px; height: 12px;
				margin: -7px 0px 0px 0px;
				@include box-shadow(inset 0 1px 1px 1px rgba(0,0,0,0.12));
				&.check {
					@include border-radius(3px);
				}
				&.radio {
					@include border-radius(50%);
				}
			}
			&:hover {cursor: pointer;}
			&.active {
				.arr {
					background: none;
					border-color: $color_gray_50;
					@include box-shadow();
					&.check {
						&:before {
							content: '';
							background: $color_black;
							position: absolute; top: 7px; left: 1px;
							display: block; width: 4px; height: 1px;
							@include transform(rotate(45deg));
						}
						&:after {
							content: '';
							background: $color_black;
							position: absolute; top: 6px; left: 3px;
							display: block; width: 9px; height: 1px;
							@include transform(rotate(-45deg));
						}
					}
					&.radio {
						&:before {
							content: '';
							background: #fff;
							position: absolute; top: 50%; left: 50%;
							display: block; width: 6px; height: 6px;
							margin: -3px 0px 0px -3px;
							@include border-radius(50%);
						}
					}
					//&:before {display: block;}
				}
			}
		}
	}
}

.label-status {
	padding: 2px 6px;
	font-size: 11px;
	font-weight: normal;
	white-space: nowrap;
	@include border-radius(0px);

	&:before {
		content: '';
		position: relative;
		top: -1px;
		display: inline-block;
		vertical-align: middle;
		width: 6px; height: 6px;
		margin-right: 5px;
		@include border-radius(50%);
	}

	&.label-status-danger {
		&:before {
			background: $color_red;
		}
	}
	&.label-status-process {
		&:before {
			background: $color_green;
		}
	}
	&.label-status-success {
		&:before {
			background: #000080;
		}
	}
	&.label-status-checked {
		&:before {
			background: #008B8B;
		}
	}
	&.label-status-not-assigned {
		&:before {
			background: $color_gray_50;
		}
	}
	&.label-status-warning {
		&:before {
			background: $color_yellow;
		}
	}
}

.labels {
	display: inline-block;
	padding: 2px 4px;
	font-size: 12px;
	color: $color_black;
	&.labels-md {
		padding: 3px 4px;
		line-height: 1;
	}
	&.labels-danger {
		background: $color_red;
		color: $color_white;
	}
	&.labels-process {
		background: #000080;
		color: $color_white;
	}
	&.labels-success {
		background: $color_green;
	}
	&.labels-checked {
		background: #008B8B;
		color: $color_white;
	}
	&.labels-not-assigned {
		background: $color_gray_50;
	}
	&.labels-warning {
		background: $color_yellow;
	}
	&.labels-dark-warning {
		background: #ffc20e;
	}
	&.labels-gray {
		background: #DDE4EC;
	}
}
strong.labels { font-weight: bold !important; }

.badge {
	position: relative;
	display: inline-block;
	padding: 2px 4px;
	&.badge-primary {
		background: $color_blue;
		color: $color_white;
	}
	&.badge-danger {
		background: $color_red;
		color: $color_white;
	}
	&.badge-warning {
		background: #ffcf4b;
		color: $color_black;
	}
}

.dotter {
	position: relative;
	padding-left: 12px;
	&.negative {
		margin-left: -12px;
	}
	.dott {
		position: absolute; top: 50%; left: 0px;
		display: block; width: 8px; height: 8px;
		margin: -4px 0px 0px 0px;
		@include border-radius(50%);
		&.success { background: $color_dark_green; }
		&.warning { background: $color_yellow; }
		&.danger { background: $color_red; }
	}
}

.cart-rt-mark {
	position: absolute; top: -17px; right: -6px; z-index: 5;
	margin: 0px; padding: 0px; list-style: none;
	li { display: inline-block; vertical-align: bottom; margin-left: 4px; }
	.badge {
		padding: 4px 8px;
		font-weight: bold;
		text-decoration: none;
		.arr {
			position: absolute; top: 100%; right: 0px;
			overflow: hidden;
			display: block; width: 6px; height: 6px;
		}
		&.badge-lg {
			padding: 5px 10px;
			font-size: 18px;
			small {
				font-size: 12px;
				font-weight: normal;
			}
		}
		&.badge-primary {}
		&.badge-warning {
			.arr {
				&:before {
					content: '';
					background: darken(#ffcf4b, 10%);
					position: absolute; bottom: 0px; left: 0px;
					display: block; width: 200%; height: 200%;
					transform-origin: left bottom;
					@include transform(rotate(-45deg));
				}
			}
		}
		&.badge-danger {
			.arr {
				&:before {
					content: '';
					background: darken($color_red, 10%);
					position: absolute; bottom: 0px; left: 0px;
					display: block; width: 200%; height: 200%;
					transform-origin: left bottom;
					@include transform(rotate(-45deg));
				}
			}
		}
	}
}

//tooltip
.tooltip-hover {
	&:hover {
		cursor: pointer;
	}
}
.tooltip-body {
	background: $color_blue;
	position: fixed; top: 0px; left: 0px;
	display: block;
	max-width: 200px;
	padding: 8px 10px;
	z-index: 9999;
	color: $color_white;
	@include border-radius(3px);
	i { position: absolute; overflow: hidden; display: block; }
	&.left {
		i {
			top: 50%; left: 100%;
			width: 6px; height: 12px;
			margin: -6px 0px 0px 0px;
			&:before {
				content: '';
				border: 6px solid transparent;
				border-left-color: $color_blue;
				position: absolute; top: 0px; left: 0px;
			}
		}
	}
	&.right {
		i {
			top: 50%; right: 100%;
			width: 6px; height: 12px;
			margin: -6px 0px 0px 0px;
			&:before {
				content: '';
				border: 6px solid transparent;
				border-right-color: $color_blue;
				position: absolute; top: 0px; right: 0px;
			}
		}
	}
	&.top {
		i {
			top: 100%; left: 50%;
			width: 12px; height: 6px;
			margin: 0px 0px 0px -6px;
			&:before {
				content: '';
				border: 6px solid transparent;
				border-top-color: $color_blue;
				position: absolute; top: 0px; left: 0px;
			}
		}
	}
	&.bottom {
		i {
			bottom: 100%; left: 50%;
			width: 12px; height: 6px;
			margin: 0px 0px 0px -6px;
			&:before {
				content: '';
				border: 6px solid transparent;
				border-bottom-color: $color_blue;
				position: absolute; bottom: 0px; left: 0px;
			}
		}
	}
}
.tooltip-active {
	position: relative;
	.tooltip-body {
		position: absolute;
		z-index: 1;
		&.left {}
		&.right {
			top: 50%; left: 100%;
			width: 250px;
			max-width: none;
			margin-left: 10px;
			@include transform(translateY(-50%));
			&.animate {
				animation: tipAnim 3.5s ease-in-out 2s infinite;
				@keyframes tipAnim {
					0% {margin-left: 10px;}
					7% {margin-left: 20px;}
					15% {margin-left: 5px;}
					20% {margin-left: 10px;}
				}
			}
		}
		&.top {}
		&.bottom {}
	}
}

//
.pull-left { float: left; }
.pull-right { float: right; }
.highlight-skin {
	background: #FFFFCA;
	position: relative;
	padding: 5px 10px;
	&.negative {
		margin-top: -5px;
		margin-left: -10px;
	}
	em {
		font-style: italic;
	}
}
.data-pull-right {
	float: right;
	text-align: right;
	white-space: nowrap;
	.item {
		display: inline-block;
		padding-left: 20px;
	}
}

.scroller-x {
	position: relative;
	overflow-x: auto;
}


.alp-overlay {
	background: #000000;
	background: rgba(0,0,0,0.9);
}


.bubble-box {}
.bubble-link {}
.bubble-drop {
	background: #fff;
	position: fixed; left: 50%; z-index: 9999;
	width: 600px;
	margin-left: -300px;
	padding: 20px;
	display: none;
	@include border-radius(10px);
	@include box-shadow(0px 0px 10px #666);
	@include box-sizing();
	@media (max-width: 640px){
		left: 20px; right: 20px;
		width: auto;
		margin: 0px;
	}
}

.money-label {
	position: relative;
	display: inline-block;
	white-space: nowrap;
	&.money-status {
		padding-left: 12px;
		&:before {
			content: '';
			position: absolute; top: 50%; left: 0px;
			display: block; width: 6px; height: 6px;
			margin-top: -3px;
			@include border-radius(50%);
		}
		&.money-status_green {
			&:before { background: $color_dark_green; }
		}
		&.money-status_red {
			&:before { background: $color_red; }
		}
	}
}
strong.money-label {font-weight: bold;}

.bull-status {
	margin-top: 1px;
	display: inline-block;
	@include border-radius(50%);
	&.size-12 {width: 12px; height: 12px;}
	&.red { background: $color_red; }
	&.green { background: $color_green; }
	&.blue { background: $color_blue; }
}

.editable {
	position: relative;
	.editable-link {
		position: absolute; top: -3px; left: -18px;
		font-size: 18px;
	}
}

//
.sticky-table {
	position: relative;
	* {
		@include box-sizing();
	}
	.sticky-table__t-r-mark {
		position: absolute; top: -30px; right: 0px;
		.labels { font-size: 14px; }
	}
	.sticky-table__head {
		position: absolute; top: 0px; left: 0px; right: 0px;
		z-index: 2;
		padding-right: 16px;
	}
	.sticky-table__body {
		position: relative;
		z-index: 1;
		overflow-y: scroll;
		max-height: 500px;
		min-height: 200px;
	}
}

//panel alp-navbar fixx
.alp-navbar__memberarea {
	position: relative;
	margin-right: 10px;
	.memberarea__head {
		height: 40px;
	}
	.memberarea__body {
		background: $color_gray_10;
		position: absolute; top: 100%; right: 0px;
		width: 280px;
		visibility: hidden;
		opacity: 0;
		@include box-shadow(0 5px 10px 0 rgba(0,0,0,0.5));
		@include transition(all 0.2s linear 0s);
		.select-simple {
			background-image: url(../images/select-simple-bg-angle.png) !important;
			background-color: transparent !important;
			padding-left: 6px !important;
		}
		.memberarea__list {
			margin: 0px; padding: 0px; list-style: none;
			font-size: 14px;
			& > li {
				display: block;
				padding: 8px 24px;
				color: $color_gray_90;
				&.link {
					padding: 0px;
					a {
						display: block;
						padding: 8px 24px;
						color: $color_gray_90;
						&:hover {
							background: $color_gray_30;
						}
					}
				}
			}
		}
	}
	&:hover {
		.memberarea__body {
			visibility: visible;
			opacity: 1;
		}
	}
}


.markbox {
	position: relative;
	.markbox__mark {
		position: absolute;
		&.markbox__mark_tl { top: 0px; left: 0px; }
		&.markbox__mark_tr { top: 0px; right: 0px; }
		img { border: none !important; cursor: default !important; }
	}
}
.markbox-mark-quality { position: relative; margin: -10px 0px 0px -10px; }
.markbox-mark-delivery {
	position: relative; margin: -10px -3px 0px 0px;
	.markbox-mark-delivery__head {
		background: #FFE180;
		position: relative;
		width: 30px;
		padding: 8px 6px;
		text-align: center;
		box-shadow: -2px 3px 4px 0 rgba(0,0,0,0.3);
		.arrow {
			position: absolute; top: 100%; left: 100%;
			overflow: hidden;
			display: block; width: 3px; height: 9px;
			margin-left: -3px;
			&:before {
				content: '';
				position: absolute; top: -9px; left: 0px;
				display: block;
				border-style: solid;
				border-width: 9px 3px;
				border-color: transparent;
				border-left-color: #ebbb30;
			}
		}
		img {
			display: block !important;
			width: 100% !important;
			margin: 0 !important;
		}
	}
	.markbox-mark-delivery__body {
		background: #FFE180;
		position: absolute; top: 0px; left: 100%;
		z-index: 9999;
		//width: 220px;
		margin-left: 12px;
		padding: 8px;
		white-space: nowrap;
		box-shadow: -2px 3px 4px 0 rgba(0,0,0,0.39);
		visibility: hidden;
		opacity: 0;
		&:before {
			content: '';
			position: absolute; top: 10px; right: 100%;
			display: block;
			border-style: solid;
			border-width: 5px 10px;
			border-color: transparent;
			border-right-color: #FFE180;
		}
		&.left {
			left: auto;
			margin-left: 0px;
			right: 100%;
			margin-right: 12px;
			&:before {
				right: auto;
				left: 100%;
				border-color: transparent;
				border-left-color: #FFE180;
			}
		}
	}
	&:hover {
		.markbox-mark-delivery__body {
			visibility: visible;
			opacity: 1;
		}
	}
}

.alv-bnnr {
	position: relative;
	&.alv-bnnr-001 {
		background: #F2F2F2;
		padding: 8px 8px 8px 4px;
		font-size: 12px;
		.closer {
			position: absolute; top: 4px; right: 4px;
			width: 16px; height: 16px;
			margin: 0px;
			&:before {opacity: 0.5;}
			&:after {opacity: 0.5;}
			&:hover {
				&:before, &:after {
					background: $color_blue;
					opacity: 1;
				}
			}
		}
		.img {
			display: inline-block;
			vertical-align: middle;
			width: 55px;
			img {
				display: block;
				width: 100%;
			}
		}
		.txt {
			display: inline-block;
			vertical-align: middle;
			padding-left: 10px;
			line-height: normal;
			strong {
				display: block;
				span {
					display: block;
					color: $color_red;
				}
			}
		}
		.markbox-mark-delivery {
			position: relative; margin: -2px -3px 0px 0px;
			.markbox-mark-delivery__head {
				width: 16px;
				padding: 4px 3px;
			}
		}
	}
}

//fixx
.alv-userArea--user {
	padding-right: 20px !important;
	line-height: 1.25 !important;
	white-space: normal !important;
}
.alv-popularParts .alv-popularParts__item {
	overflow: visible !important;
	.markbox-mark-delivery {
		position: relative; margin: -3px -3px 0px 0px;
		.markbox-mark-delivery__head {
			width: 30px;
			padding: 6px;
		}
	}
}
.alv-popularParts .alv-popularParts__item .alv-popularParts__item--img img { vertical-align: top; }

//panel alp-navbar fixx
.alp-navbar__memberarea {
	position: relative;
	margin-right: 10px;
	.memberarea__head {
		height: 40px;
	}
	.memberarea__body {
		background: $color_gray_10;
		position: absolute; top: 100%; right: 0px;
		width: 280px;
		visibility: hidden;
		opacity: 0;
		@include box-shadow(0 5px 10px 0 rgba(0,0,0,0.5));
		@include transition(all 0.2s linear 0s);
		.select-simple {
			background-image: url(../images/select-simple-bg-angle.png) !important;
			background-color: transparent !important;
			padding-left: 6px !important;
		}
		.memberarea__list {
			margin: 0px; padding: 0px; list-style: none;
			font-size: 14px;
			& > li {
				display: block;
				padding: 8px 24px;
				color: $color_gray_90;
				&.link {
					padding: 0px;
					a {
						display: block;
						padding: 8px 24px;
						color: $color_gray_90;
						&:hover {
							background: $color_gray_30;
						}
					}
				}
			}
		}
	}
	&:hover {
		.memberarea__body {
			visibility: visible;
			opacity: 1;
		}
	}
}

.box-tabs {
	$color : #DDE4EC;
	.box-tabs__list {
		margin: 0px; padding: 0px; list-style: none;
		li {
			display: inline-block;
			vertical-align: top;
			a {
				display: block;
				padding: 12px 16px 8px;
				font-size: 12px;
				font-weight: bold;
				color: $color_black;
			}
			&.active {
				a {
					background: $color;
				}
			}
		}
	}
	.tab-content {
		border: 4px solid $color;
		padding: 16px;
	}
}

.navtabs {
	margin: 0px; padding: 0px; list-style: none;
	& > li, .navtabs-item {
		position: relative;
		display: inline-block;
		vertical-align: bottom;
		font-size: 16px;
		font-weight: bold;
		& > a, & > span {
			display: block;
			padding: 8px 16px;
			color: $color_gray_50;
			&:hover { color: $color_blue; }

			.fa-times {
				background: $color_gray_50;
				position: absolute; top: 3px; right: 3px;
				display: block; width: 13px; height: 13px;
				font-size: 10px;
				line-height: 12px;
				text-align: center;
				color: $color_white;
				@include border-radius(2px);
				&:hover {
					background: $color_red;
				}
			}
		}
		&.active {
			background: $color_white;
			&:before {
				content: '';
				background: $color_blue;
				position: absolute; bottom: 100%; left: -1px; right: -1px;
				display: block;
				height: 2px;
			}
			& > a, & > span {
				color: $color_blue;
			}
		}
	}

	&.navtabs-v2 {
		border-bottom: 1px solid $color_gray_10;
		& > li, .navtabs-item {
			margin-bottom: -1px;
			& > a, & > span {
				color: $color_gray_90;
				&:hover {
					color: $color_blue;
				}
			}
			&.active {
				background: $color_white;
				border: 1px solid $color_gray_10;
				border-bottom: none;
				& > a, & > span { color: $color_blue; }
			}
		}
	}
}

.navtabs-content {
	.navtabs-pane {
		display: none;
		&.active { display: block; }
	}
}

.js-copy-to-clipboard {
	position: relative;
	i {
		position: absolute; top: 0; left: 100%;
		overflow: hidden;
		display: block; width: 1px; height: 1px;
		opacity: 0;
	}
	.ctc-tooltip {
		background: #dde4ec;
		position: absolute; top: 100%; left: 50%;
		display: block;
		margin-top: 5px;
		padding: 4px 8px;
		font-size: 10px;
		line-height: normal;
		white-space: nowrap;
		@include border-radius(3px);
		@include transform(translateX(-50%));
		&:before {
			content: '';
			position: absolute; top: -10px; left: 50%;
			margin-left: -5px;
			border: 5px solid transparent;
			border-bottom-color: #dde4ec;
		}
	}
}

.landing-001 {
	background: #ffffff url(../images/landing-001-bg.png) no-repeat 0 0 / 100% auto !important;
}
.landing-002 {
	h1 {
		margin-bottom: 12px;
		font-size: 40px;
		line-height: 56px;
		font-weight: bold;
		color: #ff334e;
	}
	.hovering-img {
		position: relative;
		.bg { display: block; width: 100%; }
		.img {
			position: absolute; top: 50%; left: 50%;
			display: block;
			max-width: 100%;
			max-height: 100%;
			width: auto;
			height: auto;
			@include transform(translateX(-50%) translateY(-50%));
		}
	}
}
.landing-003 {
	h1 {
		margin-bottom: 12px;
		font-size: 40px;
		line-height: 56px;
		font-weight: bold;
		color: #016ECC;
	}
	.hovering-img {
		position: relative;
		.bg { display: block; width: 100%; }
		.img {
			position: absolute; top: 50%; left: 50%;
			display: block;
			max-width: 100%;
			max-height: 100%;
			width: auto;
			height: auto;
			@include transform(translateX(-50%) translateY(-50%));
		}
	}
}

.xe-pageContentWrapper {
	//min-height: auto !important;
}
.xe-pageContent {
	max-width: none !important;
}

.image-aligner {
	background: $color_white;
	position: relative;
	.ia-sizer { display: block; width: 100%; }
	.ia-img {
		position: absolute; top: 50%; left: 50%;
		display: block;
		max-width: 100%;
		max-height: 100%;
		width: auto;
		height: auto;
		@include transform(translateX(-50%) translateY(-50%));
	}
}

//pointed elements
.pointed {
	position: relative;
	.pointed-arrow {
		background: url("../images/pointer-horizontal-arrow.png") no-repeat 0 0 / 100% auto;
		position: absolute; top: 50%; right: 100%;
		display: block; width: 50px; height: 16px;
		margin: -8px 10px 0px 0px;
	}

	.pointed-bracket-l {
		background: $color_red;
		position: absolute; top: 0px; bottom: 0px; left: -8px;
		display: block; width: 4px;
		&:before {
			content: '';
			background: $color_red;
			position: absolute; bottom: 100%; left: 0px;
			display: block; width: 24px; height: 4px;
		}
		&:after {
			content: '';
			background: $color_red;
			position: absolute; top: 100%; left: 0px;
			display: block; width: 24px; height: 4px;
		}
	}
	.pointed-bracket-r {
		background: $color_red;
		position: absolute; top: 0px; bottom: 0px; right: -8px;
		display: block; width: 4px;
		&:before {
			content: '';
			background: $color_red;
			position: absolute; bottom: 100%; right: 0px;
			display: block; width: 24px; height: 4px;
		}
		&:after {
			content: '';
			background: $color_red;
			position: absolute; top: 100%; right: 0px;
			display: block; width: 24px; height: 4px;
		}
	}

	.pointed-underline {
		background: $color_red;
		position: absolute; top: 100%; left: 0px; right: 0px;
		display: block; height: 4px;
	}
}

.page-redirect {
	background: #F5F7FA;
	position: relative;
	width: 100%;
	min-height: 100%;

	.b-preloader {
		position: absolute; top: 50%; left: 50%;
		@include transform(translateX(-50%) translateY(-50%));
		.title {
			margin-bottom: 30px;
			font-size: 20px;
			font-weight: bold;
			line-height: normal;
		}
	}
}
.spinner {
	width: 50px; height: 50px;
	margin: 0px auto;
	text-align: center;
	font-size: 10px;
	& > div {
		background-color: #9B9B9B;
		display: inline-block;
		width: 6px; height: 100%;
		-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
		animation: sk-stretchdelay 1.2s infinite ease-in-out;
	}
	.rect2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; }
	.rect3 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; }
	.rect4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; }
	.rect5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; }
	@-webkit-keyframes sk-stretchdelay {
		0%, 40%, 100% { -webkit-transform: scaleY(0.5) }
		20% { -webkit-transform: scaleY(1.0) }
	}
	@keyframes sk-stretchdelay {
		0%, 40%, 100% { transform: scaleY(0.5); -webkit-transform: scaleY(0.5); }
		20% { transform: scaleY(1.0); -webkit-transform: scaleY(1.0); }
	}
}

//banners
.flip-clock-simple {
	min-width: 255px;
	min-height: 50px;
	&.flip-clock-wrapper .flip-clock-divider .flip-clock-label {
		line-height: 16px;
	}
	.flip-clock-divider.hours {
		.flip-clock-dot { visibility: hidden; }
	}
}
.b-anrs {
	position: relative;
	max-width: 1010px;
	margin: 0 auto;
	.closer {
		position: absolute; top: 4px; right: 4px;
		z-index: 100;
		&:before, &:after {
			opacity: 0.7;
		}
		&:hover {
			&:before, &:after {
				background: $color_red;
				opacity: 1;
			}
		}
	}
	&.b-anrs_mats {
		background: #e6e6e6;
		img { display: block; width: 100%; }
		.overlink {
			&.left { right: auto; width: 675px; }
			&.right { left: auto; width: 335px; }
			&.right-add {
				top: auto; left: auto; right: 335px;
				width: 150px; height: 35px;
			}
		}
	}
	&.b-anrs_brakes {
		background: url(../images/b-anrs/b-anrs_brakes.png) no-repeat 50% 50%;
		background-size: cover;
		height: 80px;
		.side-left {
			padding: 14px 20px;
			.title {
				font-size: 20px;
				font-weight: bold;
				color: $color_black;
			}
			.description {
				font-size: 16px;
			}
		}
		.side-right {
			position: absolute; top: 4px; right: 12px;
			.mapcoClock-head { margin-bottom: 4px; }
		}
	}
	&.b-anrs_m_delivery {
		//background: url(../images/b-anrs/b-anrs_brakes.png) no-repeat 50% 50%;
		background-color: $color_gray_10;
		background-repeat: no-repeat;
		background-position: 50% 50%;
		background-size: cover;
		//height: 80px;
		.side-left {
			position: relative;
			padding: 15px 15px 4px 15px;
			.title {
				font-size: 17px;
				font-weight: bold;
				color: $color_black;
			}
		}
		.side-right {
			padding: 0px 15px 20px;
			.deliveryClock-head { margin-bottom: 4px; }
		}
	}
	&.b-anrs_m_informer {
		background: #FFDA6F;
		background: radial-gradient(circle, #F3B500 0%, #FFDA6F 100%);
		position: relative;
		overflow: hidden;
		padding: 12px 16px;
		font-size: 16px;
		line-height: 1.2em;
		color: $color_black;
		.media {
			.media-left {
				float: left;
				padding-right: 20px;
			}
			.media-body {
				position: relative;
				overflow: hidden;
			}
		}
		a:not(.alv-bttn) {
			border-bottom: 1px solid $color_blue;
			color: $color_blue !important;
			text-decoration: none !important;
			&:hover {
				border-bottom: 1px solid rgba(13,97,171,0.3);
			}
		}
		.alv-bttn {
			padding: 8px 12px 10px !important;
			font-size: 16px !important;
		}
	}
	&.b-anrs_filters {
		background: url(../images/b-anrs/b-annr_001.png) no-repeat 50% 50%;
		background-size: cover;
		position: relative;
		color: $color_white;
		line-height: 1.5;
		h6 {
			font-size: 17px;
			font-weight: bold;
			color: inherit;
		}
		.highlight {
			background: $color_black;
			background: rgba(0,0,0,0.75);
			display: inline-block;
			padding: 0px 8px 1px;
		}
		.closer {
			background: none;
			top: 6px; right: 6px;
			width: 16px; height: 16px;
			&:before, &:after { background: $color_white; }
			&:hover {
				&:before, &:after { background: $color_red; }
			}
			@media (max-width: 767px) {
				top: 8px; right: 8px;
				width: 20px; height: 20px;
			}
		}
		.pull-left {
			padding: 16px 12px 16px;
			h6 { margin: 0 0 4px 0; }
		}
		.pull-right {
			padding: 4px 12px;
			.brakesClock__head {
				font-size: 12px;
			}
		}
		@media (max-width: 800px){
			.pull-left {
				float: none !important;
				padding-bottom: 0;
				.description { display: none; }
			}
			.pull-right {
				float: none !important;
				.brakesClock__head {
					font-size: 14px;
				}
				.clock-highlight {
					background: $color_black;
					background: rgba(0,0,0,0.75);
					display: inline-block;
					padding: 4px 8px;
				}
			}
		}
		.flip-clock-wrapper.flip-clock-simple .flip-clock-divider .flip-clock-label {
			color: $color_white !important;
		}
		.flip-clock-dot { background: $color_white !important; }
	}
	&.b-anrs_m_filters {
		background: url(../images/b-anrs/b-annr_001.png) no-repeat 50% 50%;
		background-size: cover;
		position: relative;
		color: $color_white;
		line-height: 1.5;
		h6 {
			font-size: 17px;
			font-weight: bold;
			color: inherit;
		}
		.highlight {
			background: $color_black;
			background: rgba(0,0,0,0.75);
			display: inline-block;
			padding: 0px 8px 1px;
		}
		.closer {
			background: none;
			top: 6px; right: 6px;
			width: 16px; height: 16px;
			&:before, &:after { background: $color_white; }
			&:hover {
				&:before, &:after { background: $color_red; }
			}
			@media (max-width: 767px) {
				top: 8px; right: 8px;
				width: 20px; height: 20px;
			}
		}
		.pull-left {
			float: none !important;
			padding: 16px 12px 0px;
			h6 { margin: 0 0 4px 0; }
			.description { display: none; }
		}
		.pull-right {
			float: none !important;
			padding: 4px 12px;
			.brakesClock__head {
				font-size: 14px;
			}
			.clock-highlight {
				background: $color_black;
				background: rgba(0,0,0,0.75);
				display: inline-block;
				padding: 4px 8px;
				min-height: 76px;
				box-sizing: border-box;
				-moz-box-sizing: border-box;
				-webkit-box-sizing: border-box;
			}
		}
		.flip-clock-wrapper.flip-clock-simple .flip-clock-divider .flip-clock-label {
			color: $color_white !important;
		}
		.flip-clock-dot { background: $color_white !important; }
	}
}

.b-annr {
	position: relative;
	max-width: 1010px;
	margin: 0 auto;
	font-size: 14px;
	line-height: 1.5;

	.b-annr__bg {
		background-position: 50% 50%;
		background-repeat: no-repeat;
		background-size: cover;
		position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px;
		z-index: 1;
	}
	.b-annr__body {
		position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px;
		z-index: 2;
	}

	.filtersClock__head { white-space: nowrap; }

	.closer {
		position: absolute; top: 4px; right: 4px; z-index: 100;
		&:before, &:after { opacity: 0.7; }
		&:hover {
			&:before, &:after { background: $color_red; opacity: 1; }
		}
	}

	&.b-annr_type-a {
		background-color: $color_gray_90;
		background-position: 50% 50%;
		background-repeat: no-repeat;
		background-size: cover;
		position: relative;
		color: $color_white;
		width: 1010px;

		.b-annr__bg {}
		.b-annr__body {
			position: relative;
			overflow: hidden;
		}

		h5 {
			margin: 0;
			font-size: 20px;
			font-weight: bold;
			color: inherit;
		}
		h6 {
			margin: 0 0 4px 0;
			font-size: 17px;
			font-weight: bold;
			color: inherit;
		}
		.highlight {
			background: $color_black;
			background: rgba(0,0,0,0.75);
			display: inline-block;
			padding: 0px 8px 1px;
			&.highlight-sm {
				@media (min-width: 992px) {
					background: transparent;
				}
			}
		}
		.closer {
			background: none;
			top: 6px; right: 6px;
			width: 16px; height: 16px;
			@include transition(all 0.15s ease-out 0s);
			&:before, &:after { background: $color_white; }
			&:hover {
				&:before, &:after { background: $color_red; }
			}
			&.square {
				background: $color_black;
				background: rgba(0,0,0,0.75);
				&:before, &:after {
					background: $color_white !important;
					@include transition(none);
				}
				&:hover {
					background: $color_red;
				}
			}
			&.highlight-xs {
				@media (max-width: 767px) {
					background: $color_black;
					background: rgba(0,0,0,0.75);
				}
			}
		}
		.pull-left {
			padding: 16px 12px;
		}
		.pull-right {
			padding: 8px 12px 4px;
			.brakesClock__head {
				font-size: 12px;
			}
		}

		.filtersClock__head {
			padding-bottom: 2px;
		}
		.flip-clock-wrapper.flip-clock-simple .flip-clock-divider .flip-clock-label {
			padding-top: 2px;
			color: $color_white !important;
		}
		.flip-clock-dot { background: $color_white !important; }

		&.color-gray-80 {
			.flip-clock-wrapper.flip-clock-simple .flip-clock-divider .flip-clock-label {
				color: $color_gray_80 !important;
			}
			.flip-clock-dot { background: $color_gray_80 !important; }
		}

		.b-annr_type-a__price-highlight {
			background: $color_red;
			display: inline-block;
			padding: 2px 8px 4px;
			color: $color_white;
			font-size: 24px;
			@include border-radius(3px);
		}

		&.b-annr-free-shipping-ee {
			.b-annr__bg { background-position: left center; }
			.b-annr-free-shipping-ee__inner {
				min-height: 95px;
				.title {
					background: #FFC20E;
					position: absolute; top: 16px; left: 250px;
					height: 40px;
					line-height: 40px;
					margin: 0;
					padding: 0 8px;
					font-size: 18px;
					font-weight: bold;
					color: $color_black;
					white-space: nowrap;
					text-transform: uppercase;
					&:before {
						content: '';
						border-bottom: 40px solid #FFC20E;
						border-left: 35px solid transparent;
						position: absolute; top: 0; right: 100%;
					}
					&:after {
						content: '';
						border-top: 40px solid #FFC20E;
						border-right: 35px solid transparent;
						position: absolute; top: 0; left: 100%;
					}
				}
			}
		}

		&.b-annr-brakes {
			.closer { top: 8px; right: 8px; }
			.b-annr__bg {
				background-position: left center;
				&.bg-lg {
					@media (max-width: 767px) { display: none; }
				}
				&.bg-sm {
					@media (min-width: 768px) { display: none; }
				}
			}
			.b-annr__body {
				min-height: 100px;
				@media (max-width: 767px){ text-align: center; }
				.media-right { padding: 8px; }
				.title {
					position: relative;
					margin-left: 235px;
					font-size: 18px;
					font-weight: bold;
					line-height: 32px;
					text-transform: uppercase;
					@media (max-width: 1199px){ margin-left: 160px; }
					@media (max-width: 991px){
						margin-left: 80px;
						font-size: 16px;
						line-height: 28px;
					}
					@media (max-width: 767px){
						display: inline-block;
						margin-left: 0;
						font-size: 14px;
						line-height: 24px;
						text-align: left;
					}
					strong {
						background: #FFC300;
						position: relative;
						display: inline-block;
						padding: 0 4px;
						color: $color_black;
						&:before {
							content: '';
							border-bottom: 32px solid #FFC300;
							border-left: 20px solid transparent;
							position: absolute; top: 0; right: 100%;
							@media (max-width: 991px){ border-bottom-width: 28px; border-left-width: 18px; }
							@media (max-width: 767px){ border-bottom-width: 24px; border-left-width: 14px; }
						}
						&:after {
							content: '';
							border-top: 32px solid #FFC300;
							border-right: 20px solid transparent;
							position: absolute; top: 0; left: 100%;
							@media (max-width: 991px){ border-top-width: 28px; border-right-width: 18px; }
							@media (max-width: 767px){ border-top-width: 24px; border-right-width: 14px; }
						}
					}
					span {
						background: #006ECC;
						position: relative;
						display: inline-block;
						padding: 0 4px;
						&:before {
							content: '';
							border-bottom: 32px solid #006ECC;
							border-left: 20px solid transparent;
							position: absolute; top: 0; right: 100%;
							@media (max-width: 991px){ border-bottom-width: 28px; border-left-width: 18px; }
							@media (max-width: 767px){ border-bottom-width: 24px; border-left-width: 14px; }
						}
						&:after {
							content: '';
							border-top: 32px solid #006ECC;
							border-right: 20px solid transparent;
							position: absolute; top: 0; left: 100%;
							@media (max-width: 991px){ border-top-width: 28px; border-right-width: 18px; }
							@media (max-width: 767px){ border-top-width: 24px; border-right-width: 14px; }
						}
					}
				}
				.b-filtersClock {
					display: inline-block;
					padding: 4px;
					@media (max-width: 1199px){
						background: rgba(0,0,0,0.5);
					}
				}
			}
		}

	}

	&.b-annr_type-b {
		position: relative;
		width: 1010px;
		min-height: 96px;
		color: $color_white;
		//@media (max-width: 767px){ text-align: center; }

		.b-annr__bg {
			background-color: $color_gray_90;
			background-position: right center;
			background-repeat: no-repeat;
			background-size: cover;
			//@media (max-width: 767px) { background-position: left center; }
			.b-annr__bg__left {
				position: absolute; top: 0; bottom: 0; left: 0; right: 0;
				z-index: 2;
				background-position: 0 0;
				background-repeat: no-repeat;
				background-size: auto 100%;
			}
			.b-annr__bg__right {
				position: absolute; top: 0; bottom: 0; left: 0; right: 0;
				z-index: 1;
				background-position: top right;
				background-repeat: no-repeat;
				background-size: auto 100%;
			}
		}
		.b-annr__body {
			position: relative;
			overflow: hidden;
			.media {
				.media-left { padding: 8px 24px; }
				.media-right { padding: 8px 24px; }
				.media-body { padding: 8px 24px; }
				/*@media (max-width: 767px){
					.media-left { padding: 8px 16px 0; }
					.media-right { padding: 0 16px 8px; }
					.media-body { padding: 8px 16px; }
				}*/
			}
			.highlighter {
				padding-left: 210px;
				/*@media (max-width: 1199px){ padding-left: 100px; }
				@media (max-width: 991px){ padding-left: 20px; }
				@media (max-width: 767px){
					display: inline-block;
					padding-left: 0;
					text-align: left;
				}*/
				.title {
					position: relative;
					margin-top: -8px;
					strong {
						background: #FFC20E;
						color: $color_black;
					}
				}
				.description {
					position: relative;
					strong {
						background: #006ECC;
						color: $color_white;
					}
				}
				.addition {
					padding: 8px 18px 0;
					font-size: 11px;
				}
				.title strong, .description strong {
					position: relative;
					display: inline-block;
					margin: 0 16px;
					padding: 0 2px;
					font-size: 18px;
					line-height: 32px;
					font-weight: bold;
					//white-space: nowrap;
					text-transform: uppercase;
					/*@media (max-width: 991px){ font-size: 16px; line-height: 28px; }
					@media (max-width: 767px){ font-size: 14px; line-height: 24px; }
					@media (max-width: 459px){
						margin: 0;
						padding: 0 8px;
						&:before, &:after { display: none; }
					}*/
					span { position: relative; z-index: 5; }

					&.bg-black { background: #333; color: $color_white; }
					&.bg-violet { background: #80099b; }
					&.bg-red { background: #D90100; color: $color_white; }
					&.bg-dark-blue { background: #003665; }

					&:before {
						content: '';
						background: inherit;
						position: absolute; top: 0; bottom: 0; left: 0;
						width: 50px;
						margin-left: -15px;
						@include transform(skewX(-24deg));
					}
					&:after {
						content: '';
						background: inherit;
						position: absolute; top: 0; bottom: 0; right: 0;
						width: 50px;
						margin-right: -15px;
						@include transform(skewX(-24deg));
					}
				}
			}
		}
		.closer {
			background: none;
			top: 6px; right: 6px;
			width: 16px; height: 16px;
			@include transition(all 0.15s ease-out 0s);
			&:before, &:after {
				background: $color_white;
				@include transition(all 0.15s ease-out 0s);
			}
			&:hover {
				&:before, &:after { background: $color_red; }
			}
			@media (max-width: 767px) {
				top: 8px; right: 8px;
				width: 20px; height: 20px;
			}
			&.square {
				background: $color_black;
				background: rgba(0,0,0,0.75);
				&:before, &:after {
					background: $color_white !important;
					@include transition(none);
				}
				&:hover {
					background: $color_red;
				}
				&.square-white {
					background: $color_white;
					background: rgba(255,255,255,0.75);
					&:before, &:after { background: $color_black !important; }
					&:hover {
						background: $color_red;
						&:before, &:after { background: $color_white !important; }
					}
				}
			}
			&.highlight-xs {
				@media (max-width: 767px) {
					background: $color_black;
					background: rgba(0,0,0,0.75);
				}
			}
		}

		&.mobile {
			width: auto;
			.b-annr__bg {
				background-position: left center;
			}
			.b-annr__body {
				.media {
					.media-left {
						display: block;
						margin: 0;
						padding: 8px 16px 0;
					}
					.media-right {
						display: block;
						margin: 0;
						padding: 0 16px 8px;
					}
					.media-body {
						display: block;
						width: auto;
						margin: 0;
						padding: 8px 16px;
					}
				}
				.highlighter {
					padding-left: 0;
					.title {
						position: relative;
						margin-top: -8px;
						strong {
							padding: 0 2px;
							font-size: 14px;
							line-height: 24px;
							/*@media (max-width: 459px){
								margin: 0;
								padding: 0 8px;
								&:before, &:after { display: none; }
							}*/
						}
					}
					.description {
						position: relative;
						strong {
							padding: 0 2px;
							font-size: 14px;
							line-height: 24px;
							/*@media (max-width: 459px){
								margin: 0;
								padding: 0 8px;
								&:before, &:after { display: none; }
							}*/
						}
					}
				}
			}
		}
	}

	&.b-annr_m_type-a {
		background-color: $color_gray_90;
		background-position: 50% 50%;
		background-repeat: no-repeat;
		background-size: cover;
		position: relative;
		color: $color_white;

		.b-annr__bg {}
		.b-annr__body {
			position: relative;
			overflow: hidden;
		}

		h5 {
			margin: 0;
			font-size: 20px;
			font-weight: bold;
			color: inherit;
		}
		h6 {
			margin: 0 0 4px 0;
			font-size: 17px;
			font-weight: bold;
			color: inherit;
		}
		.highlight {
			background: $color_black;
			background: rgba(0,0,0,0.75);
			display: inline-block;
			padding: 0px 8px 1px;
			&.highlight-sm {
				@media (min-width: 992px) {
					background: transparent;
				}
			}
		}
		.closer {
			background: none;
			top: 6px; right: 6px;
			width: 16px; height: 16px;
			&:before, &:after { background: $color_white; }
			&:hover {
				&:before, &:after { background: $color_red; }
			}
			&.square {
				background: $color_black;
				background: rgba(0,0,0,0.75);
				&:before, &:after {
					background: $color_white !important;
					@include transition(none);
				}
				&:hover {
					background: $color_red;
				}
			}
			&.highlight-xs {
				@media (max-width: 767px) {
					background: $color_black;
					background: rgba(0,0,0,0.75);
				}
			}
		}
		.pull-left {
			float: none !important;
			padding: 20px 12px 0px;
			h6 { margin: 0 0 4px 0; }
			.description { display: none; }
		}
		.pull-right {
			padding: 4px 12px 12px;
			float: none !important;
			.brakesClock__head { font-size: 14px; }
			.clock-highlight {
				background: $color_black;
				background: rgba(0,0,0,0.75);
				display: inline-block;
				padding: 4px 8px;
			}
		}

		.filtersClock__head {
			padding-bottom: 2px;
		}
		.flip-clock-wrapper.flip-clock-simple .flip-clock-divider .flip-clock-label {
			padding-top: 2px;
			color: $color_white !important;
		}
		.flip-clock-dot { background: $color_white !important; }

		@media (max-width: 800px){
			.pull-left {

			}
			.pull-right {

			}
		}

		&.color-gray-80 {
			.flip-clock-wrapper.flip-clock-simple .flip-clock-divider .flip-clock-label {
				color: $color_gray_80 !important;
			}
			.flip-clock-dot { background: $color_gray_80 !important; }
		}

		.b-annr_type-a__price-highlight {
			background: $color_red;
			display: inline-block;
			padding: 2px 8px 4px;
			color: $color_white;
			font-size: 24px;
			@include border-radius(3px);
		}


		&.b-annr-free-shipping-ee {
			.b-annr__bg { background-position: left center; }
			.b-annr-free-shipping-ee__inner {
				min-height: 80px;
				.title {
					background: #FFC20E;
					position: absolute; top: 0; left: 50%;
					height: 24px;
					line-height: 24px;
					margin: 0;
					padding: 0 8px;
					font-size: 12px;
					font-weight: bold;
					color: $color_black;
					white-space: nowrap;
					text-transform: uppercase;
					@include transform(translateX(-50%));
					&:before {
						content: '';
						border-bottom: 24px solid #FFC20E;
						border-left: 20px solid transparent;
						position: absolute; top: 0; right: 100%;
					}
					&:after {
						content: '';
						border-top: 24px solid #FFC20E;
						border-right: 20px solid transparent;
						position: absolute; top: 0; left: 100%;
					}
				}
			}
		}

		&.b-annr-brakes {
			.b-annr__bg {
				background-color: #2A2A2A;
				background-position: left center;
			}
			.b-annr__body {
				min-height: 100px;
				text-align: center;
				.media {
					& > .media-body { display: block; width: auto; }
					& > .media-right { display: block; width: auto; margin: 0px; padding: 8px; }
				}
				.title {
					position: relative;
					display: inline-block;
					font-size: 14px;
					font-weight: bold;
					line-height: 24px;
					text-align: left;
					text-transform: uppercase;

					strong {
						background: #FFC300;
						position: relative;
						display: inline-block;
						padding: 0 4px;
						color: $color_black;
						&:before {
							content: '';
							border-bottom: 24px solid #FFC300;
							border-left: 14px solid transparent;
							position: absolute; top: 0; right: 100%;
						}
						&:after {
							content: '';
							border-top: 24px solid #FFC300;
							border-right: 14px solid transparent;
							position: absolute; top: 0; left: 100%;
						}
					}
					span {
						background: #006ECC;
						position: relative;
						display: inline-block;
						padding: 0 4px;
						&:before {
							content: '';
							border-bottom: 24px solid #006ECC;
							border-left: 14px solid transparent;
							position: absolute; top: 0; right: 100%;
						}
						&:after {
							content: '';
							border-top: 24px solid #006ECC;
							border-right: 14px solid transparent;
							position: absolute; top: 0; left: 100%;
						}
					}
				}
				.b-filtersClock {
					background: rgba(0,0,0,0.5);
					display: inline-block;
					padding: 4px;
				}
			}
		}

	}

	&.b-annr_mapco {
		background: $color_white url(../images/examples/mapco-bg.jpg) no-repeat 50% 50%;
		background-size: cover;
		width: 1010px;
		.closer {
			top: 6px; right: 6px;
			width: 16px; height: 16px;
		}

		.pull-left {
			max-width: 600px;
			padding: 16px;
			.media {
				margin: 0px;
				font-weight: bold;
				.media-left {
					img { display: block; width: 80px; }
				}
				.media-body {
					h6 {
						margin: 0px;
						font-size: 18px;
					}
				}
			}
		}
		.pull-right {
			padding: 4px 16px 4px;
			.mapcoClock__head {
				margin-bottom: 4px;
				font-size: 13px;
			}
		}

	}
}

.b-annr-with-conditions {
	position: relative;
	width: 1010px;
	margin: 0 auto;
	.b-annr-conditions-toggle {
		border: none;
		position: absolute; top: 0; right: 0; bottom: 0; left: 0;
		z-index: 5;
		display: block;
		@media (min-width: 992px){ display: none; }
	}
	&.wide {
		.b-annr-conditions__shorter {
			max-height: none !important;
		}
	}
}
.b-annr-conditions {
	background: $color_white;
	padding: 12px 16px;
	font-size: 12px;
	color: $color_blue;
	line-height: 14px;
	&.sm {
		padding: 4px 12px;
	}
	.b-annr-conditions__shorter {
		position: relative;
		overflow: hidden;
		@media (max-width: 991px){
			max-height: 28px;
		}
	}

}

.alv-flipclock{width:252px!important;height:54px;margin:0!important}
.alv-flipclock ul{width:24px!important;height:36px!important;background:#fff!important;font-size:30px!important;margin:2px!important;border-radius:2px!important}
.alv-flipclock ul li{line-height:36px!important}
.alv-flipclock ul li a div div.inn{background:#fff!important;color:#5c5c5c!important;text-shadow:none!important;font-size:30px!important;font-weight:400!important;border-radius:2px!important}
.alv-flipclock ul li a div.up:after{top:17px!important;background-color:rgba(0,0,0,.2)!important;height:1px!important}
.alv-flipclock ul li a div.down{border-bottom-left-radius:2px!important;border-bottom-right-radius:2px!important}
.alv-flipclock .flip-clock-divider{height:36px!important;width:8px!important}
.alv-flipclock .flip-clock-divider:first-child{width:0!important}
.alv-flipclock .flip-clock-divider:first-child .flip-clock-label{left:2px!important}
.alv-flipclock .flip-clock-divider:nth-of-type(2) .flip-clock-dot{opacity:0}
.alv-flipclock .flip-clock-divider .flip-clock-label{width:52px!important;text-align:center!important;top:40px!important;left:10px!important;right:inherit!important;font-size:10px!important}
.alv-flipclock .flip-clock-dot{width:4px!important;height:4px!important;border-radius:inherit!important;left:2px!important}
.alv-flipclock .flip-clock-dot.top{top:24px!important}
.alv-flipclock .flip-clock-dot.bottom{bottom:20px!important}
.alv-flipclock .flip{box-shadow:0 2px 4px 0 rgba(0,0,0,.25)!important}
.alv-flipclock ul.play li.flip-clock-active .up .shadow,
.alv-flipclock ul.play li.flip-clock-before .up .shadow{border-top-left-radius:3px!important;border-top-right-radius:3px!important;background:linear,to bottom,hsla(0,0%,100%,.1) 0,gray 100%!important}
.alv-flipclock ul.play li.flip-clock-active .down .shadow,.alv-flipclock ul.play li.flip-clock-before .down .shadow{border-bottom-left-radius:3px!important;border-bottom-right-radius:3px!important;background:linear,to bottom,gray 0,hsla(0,0%,100%,.1) 100%!important}


.jui-datepicker-ico {
	&:hover {
		color: $color_blue !important;
		fill: $color_blue !important;
		cursor: pointer;
	}
	&.active {
		color: $color_blue !important;
		fill: $color_blue !important;
	}
}

//client-registration
.client-registration {
	padding-top: 10px;
	&.labelist.labelist-a {
		label {
			padding-left: 22px;
			.arr {
				width: 12px;
				height: 12px;
				margin-top: -8px;
			}
			&.active {
				.arr {
					//background: #3B99FC;
					background: none;
					border-color: $color_gray_50;
					@include box-shadow();
					&.check {
						&:before {
							content: '';
							background: $color_black;
							position: absolute; top: 7px; left: 1px;
							display: block; width: 4px; height: 1px;
							@include transform(rotate(45deg));
						}
						&:after {
							content: '';
							background: $color_black;
							position: absolute; top: 6px; left: 3px;
							display: block; width: 9px; height: 1px;
							@include transform(rotate(-45deg));
						}
					}
					&.radio {}
				}
			}
		}
	}
	.client-registration-confirm {
		position: relative;
		display: inline-block;
		//margin-left: -4px;
		padding: 4px;
		&.has-error {
			background: #ffb3b3;
		}
	}
	.client-registration-notify {
		position: relative;
		//margin: 0px -8px 0px -4px;
		margin: 0px -8px 0px 0px;
		padding: 8px 8px 8px 26px;
		.ico {
			position: absolute; top: 6px; left: 1px;
		}
		label.active .arr {
			background: #ffe180 !important;
		}
		&:hover {
			background: lighten($color_yellow, 15%);
		}
	}
}

.global-alerts {
	position: fixed; bottom: 10px; right: 10px;
	z-index: 998;
	.alert {
		font-size: 14px;
		& + .alert { margin-top: 20px; }
	}
	@media (max-width: 575px){
		left: 0px; right: 0px; bottom: 0px;
		width: auto !important;
		max-width: none !important;
		.alert {
			&.alert-default {
				background: $color_white;
				border-color: $color_white;
				color: $color_black;
				@include box-shadow(0px 0px 10px $color_gray_50);
				a:not(.alv-bttn):not(.closer){
					border-bottom-color: $color_gray_50;
					&:hover { border-bottom-color: $color_black; }
				}
				.closer {
					&:before, &:after {
						background: $color_gray_50;
					}
				}
			}
		}
	}
}

.global-notifications {
	position: fixed; top: 55px; left: 50%;
	width: 500px;
	margin-left: -250px;
	z-index: 9999;
	@media (max-width: 575px) {
		left: 15px; right: 15px;
		width: auto;
		margin-left: 0px;
	}
	.alert {
		@include box-shadow(0px 0px 15px $color_gray_70);
		& + .alert { margin-top: 15px; }
	}
}

//
.gas-freon {
	.gas-freon__head {
		background: #CDE3F4;
		position: relative;
		margin: -14px -21px 24px -24px;
		padding: 24px;
		font-size: 16px;
		.gas-freon__intro {
			font-size: 24px;
			h1 {
				font-size: 44px;
				line-height: normal;
				font-weight: bold;
			}
		}
		.gas-freon__price {
			margin: 0px; padding: 0px; list-style: none;
			font-size: 16px;
			color: $color_gray_60;
			text-align: right;
			.price {
				display: inline-block;
				padding-top: 12px;
				font-size: 36px;
				color: $color_blue;
			}
			.alv-bttn {
				padding: 8px 36px 10px;
				font-size: 20px !important;
				line-height: 24px !important;
			}
		}

		.posa-b-l {
			position: absolute;
			bottom: 0px;
			ul {
				margin: 0px; padding: 0px; list-style: none;
				li {
					display: inline-block;
					vertical-align: top;
					& + li { margin-left: 36px; }
					.fs-bold { font-size: 28px; }
				}
			}
		}
		.posa-b-r {
			position: absolute; bottom: 0px; right: 0px;
		}
	}
	.gas-freon__body {}

	.gas-freon__text {
		font-size: 20px;
	}
	.gas-freon__icon {
		width: 100%;
		font-size: 16px;
		tr {
			td {
				padding: 50px 0px 0px 20px;
				vertical-align: top;
				&:first-child { padding-left: 0px; }
			}
			&:first-child {
				td {
					padding-top: 0px;
				}
			}
		}
		.ico {
			margin-bottom: 10px;
			font-size: 28px;
			line-height: 28px;
			min-height: 28px;
			font-weight: bold;
		}
	}

	.gas-freon-form {
		background: #cae1f2;
		position: relative;
		margin-left: -24px;
		.gas-freon-form__head {
			border-bottom: 2px solid #e9f4fc;
			padding: 24px;

			.gas-freon-form__manager {
				min-height: 100px;
				.manager-image {
					position: absolute;
					bottom: -24px;
					img {
						max-width: 100%;
					}
				}
				.manager-text {
					font-size: 16px;
					color: $color_gray_60;
					.h {
						position: relative;
						margin-bottom: 12px;
						font-size: 20px;
						font-weight: bold;
						color: $color_gray_90;
						.h-ico { position: absolute; top: 6px; left: -24px; }
					}
					.manager-name {
						position: relative;
						margin-top: 2px;
						color: $color_black;
						span {
							position: absolute;
							right: 100%;
							margin-right: 8px;
						}
					}
				}
			}
		}
		.gas-freon-form__body {
			padding: 24px;
			font-size: 16px;
			.alv-form-group {
				.alv-form-label {
					margin-bottom: 4px;
					font-size: 12px;
					color: $color_gray_50;
				}
				.alv-form-field {
					textarea {
						min-height: 113px;
					}
				}
			}
			.alv-bttn {
				padding: 8px 36px;
				font-size: 16px !important;
				line-height: 24px !important;
			}
			.gas-freon-form__result {
				width: 100%;
				color: $color_black;
				big {
					font-size: 20px;
					font-weight: bold;
				}
				tr {
					td {
						padding: 12px 0px 0px 24px;
						vertical-align: top;
						&:first-child {
							padding-left: 0px;
							text-align: right;
							opacity: 0.45;
						}
					}
					&:first-child {
						td { padding-top: 0px; }
					}
				}
			}
		}

		&.success {
			background: #b8e986;
			.gas-freon-form__head {
				border-bottom-color: #e1f5cc;
			}
		}
	}
}


//
.gdpr-terms-confirm {
	width: 200px;
	padding-top: 24px;
	text-align: left;
	.alv-error-message {
		position: relative;
		padding-bottom: 2px;
		color: $color_red;
		display: none;
		.icon {
			margin-left: -22px;
			padding-left: 22px;
			.ico { left: 2px; }
		}
	}
	ul {
		margin: 0px; padding: 0px; list-style: none;
		li {
			color: #9B9B9B;
			& + li { margin-top: 2px; }
			a {
				border-bottom: 1px dashed transparent;
				color: inherit;
				text-decoration: none;
				&:hover {
					border-bottom-color: inherit;
				}
			}
		}
	}
	.labelist {
		position: relative;
		display: block;
		padding: 4px;
		margin: 0px 0px 0px -26px;
		color: $color_black;
		label {
			display: block;
			.arr {
				top: 2px;
				margin-top: 0px;
			}
		}
		&:hover {
			background: lighten($color_yellow, 15%);
		}
	}

	&.has-error {
		.alv-error-message { display: block; }
		.labelist {
			background: #FFB3B3;
			a {
				color: $color_gray_60;
			}
		}
	}
}

//cart
.address_box__highlighter {
	position: relative;
	margin: 0px -4px;
	padding: 2px 4px;
	animation: yellowblink 1.25s ease-in-out .25s;
	@keyframes yellowblink {
		0% { background: transparent; }
		50% { background: $color_yellow; }
		100% { background: transparent; }
	}
	svg {
		display: inline-block;
		vertical-align: middle;
		line-height: normal;
	}
}

.b-cart-promo {
	width: 280px;
	margin-bottom: 12px;
	.hidden-field__head {}
	.hidden-field__body {
		position: relative;
		margin-right: -11px;
		text-align: left;
		form {
			background: $color_gray_10;
			border: 1px solid $color_gray_20;
			position: relative;
			padding: 10px;
			.closer {
				position: absolute; top: 8px; right: 8px;
				z-index: 55;
			}
			.alv-form-group {
				&.has-error {
					.alv-bttn.style-primary {
						background: #002b81 !important;
						background: linear-gradient(-180deg,#2e75d1,#002b81) !important;
						border-color: #2E75D1 !important;
						color: #fff !important;
						opacity: 0.75;
						&:hover {
							background: #003cb5 !important;
							background: linear-gradient(-180deg,#388eff,#003cb5) !important;
						}
					}
				}
			}
		}
		.media {
			.media-body {}
			.media-right {
				padding-left: 8px;
			}
		}
	}
	.b-cart-promo__result {
		background: $color_white;
		border: 1px solid #2DB92D;
		position: relative;
		padding: 10px;
		text-align: right;
		white-space: nowrap;
		table {
			width: 100%;
			tr {
				td {
					padding: 4px 0 0 4px;
					vertical-align: middle;
					&:first-child { padding-left: 0; }
				}
				&:first-child {
					td { padding-top: 0; }
				}
			}
			.discount {
				font-size: 18px;
				font-weight: bold;
			}
		}
	}
}

.cart_content .total_price {
	td {
		padding: 2px 0px 2px 4px;
	}
}

//table sort
.js-table-sort {
	position: relative;
	display: inline-block;
	padding-right: 15px;
	.js-table-sort-arr {
		position: absolute; top: 0px; right: 0px;
		display: block; width: 10px; height: 14px;
		margin-top: .15em;
		&:before {
			content: '';
			border: 5px solid transparent;
			border-bottom-color: $color_gray_40;
			position: absolute; top: -5px; left: 0px;
			display: block;
		}
		&:after {
			content: '';
			border: 5px solid transparent;
			border-top-color: $color_gray_40;
			position: absolute; bottom: -5px; left: 0px;
			display: block;
		}
	}

	&.asc {
		color: $color_red;
		.js-table-sort-arr {
			&:after {
				border-top-color: $color_red;
			}
		}
	}
	&.desc {
		color: $color_red;
		.js-table-sort-arr {
			&:before {
				border-bottom-color: $color_red;
			}
		}
	}
	&:hover {
		cursor: pointer;
	}
}
.js-table-sort-arr {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	width: 10px; height: 14px;
	margin: -2px 0px 0px 4px;


}


//c-panel
.client-card-return-policy {
	table {
		width: 100%;
		tr {
			td {
				border-top: 1px solid $color_gray_30;
				padding: 4px 8px 4px 0px !important;
			}
			&:first-child {
				td {
					border-top: none;
				}
			}
		}
	}
}

.box-clone {
	.box-clone-item {
		&:first-child {
			.remove-link { visibility: hidden; }
		}
	}
}

//
.pdfframe {
	background: $color_gray_60;
	.pdfframe__head {
		padding: 4px 8px;
		ul.links {
			margin: 0px; padding: 0px; list-style: none;
			text-align: right;
			li {
				display: inline-block;
				vertical-align: middle;
				padding-left: 8px;
				font-size: 18px;
				a {
					color: $color_white;
					&:hover {
						color: $color_gray_30;
					}
				}
			}
		}
	}
	.pdfframe__body {
		padding: 0px 8px;
		iframe {
			display: block;
		}
	}
	.pdfframe__foot {
		height: 8px;
	}
}

.js-trimg-drop {
	background: $color_gray_50;
	position: fixed;
	z-index: 9999;
	width: 150px;
	padding: 4px;
	img {

		display: block;
		width: 100%;
	}
}


//
.nav-pager {
	font-size: 14px;
	line-height: 1.4;
	.navs {
		margin: 0px; padding: 0px; list-style: none;
		li {
			display: inline-block;
			vertical-align: middle;
			min-width: 26px;
			padding: 2px 3px 3px;
			text-align: center;
			@include border-radius(25px);
			& + li { margin-left: 2px; }
			a, span {
				border-bottom: 1px solid transparent;
				color: $color_blue;
				text-align: center;
				line-height: normal;
			}
			a {
				&:hover {
					border-bottom-color: $color_blue;
				}
			}
			&.current {
				background: $color_blue;
				color: $color_white;
				a {
					color: $color_white;
					text-decoration: none !important;
				}
			}
		}
	}
	.pagers {
		padding-top: 8px;
		.dropup {
			display: inline-block;
			margin-left: 8px;
			& > a {
				border-bottom: 1px solid transparent;
				&:hover {
					border-bottom-color: $color_blue;
				}
			}
			.dropdown-menu {
				width: 50px;
				min-width: auto;
				text-align: center;
				a {
					border: none;
					display: block;
					padding: 4px;
					&:hover {
						background: $color_blue;
						color: $color_white;
					}
				}
			}
		}
	}
	@media (max-width: 767px) {
		text-align: center;
		.navs {
			li {
				&:not(.move):not(.current){ display: none; }
			}
		}
	}
}


footer.main-footer {
	font-size: 1.3em;
	line-height: 1.5;
	color: $color_white;
	fill: $color_white;

	a, p, button, input {
		font-size: 1em;
	}

	.ico.top { margin-top: .25em !important; }

	.worktime {
		position: relative;
		overflow: hidden;
		&:before {
			content: '';
			border-top: 2px dotted $color_white;
			position: absolute; bottom: 5px; left: 0; right: 0;
			display: block;
		}
		.worktime__left {
			background: #2e2e2e;
			position: relative; z-index: 5;
			float: left;
			padding-right: 5px;
		}
		.worktime__right {
			background: #2e2e2e;
			position: relative; z-index: 5;
			float: right;
			padding-left: 5px;
		}
	}

	.footer-inner {
		box-shadow: 0 0 12px 0 rgba(0,0,0,.6);
		-o-transform: 0 0 12px 0 rgba(0,0,0,.6);
		-ms-transform: 0 0 12px 0 rgba(0,0,0,.6);
		-moz-transform: 0 0 12px 0 rgba(0,0,0,.6);
		-webkit-transform: 0 0 12px 0 rgba(0,0,0,.6);
	}

	.footer__container-links {
		ul {
			li {
				& + li { margin-top: 4px; }
			}
		}
	}

	.footer__container-contacts {
		ul {
			margin: 0; padding: 0; list-style: none;
			li {
				& + li { margin-top: 8px; }
			}
		}
	}

	.footer__container-addmenu {
		float: left;
		width: 22%;
		padding-left: 4%;
		ul {
			margin: 0 0 16px 0; padding: 0; list-style: none;
			li {
				position: relative;
				&:before {
					content: '';
					background: $color_gray_60;
					position: absolute; top: 11px; left: -12px;
					display: block; width: 4px; height: 4px;
					@include border-radius(50%);
				}
				& + li { margin-top: 8px; }
				a {
					border-bottom: 1px solid $color_gray_60;
					text-decoration: none !important;
					@include transition();
					&:hover {
						color: $color_warning;
						border-bottom-color: $color_warning;
					}
				}
			}
		}
	}

	.footer__list {
		margin: 0 0 0 22px; padding: 0; list-style: none;
		color: $color_white;
		li {
			position: relative;
			&:before {
				content: '';
				background: $color_gray_60;
				position: absolute; top: 11px; left: -12px;
				display: block; width: 4px; height: 4px;
				@include border-radius(50%);
			}
			& + li { margin-top: 4px; }
		}
	}

	.footer__copyright-container {
		margin-top: 24px;
	}

	.alv-liisi__footer--body {
		z-index: 55;
		font-size: 11px;
		svg {
			color: $color_gray_60; fill: $color_gray_60;
			&:hover { color: $color_red; fill: $color_red; }
		}
		ul {
			margin: 0; padding: 0; list-style: none;
			li {
				position: relative;
				padding-left: 12px;
				&:before {
					content: '';
					background: $color_gray_60;
					position: absolute; top: .6em; left: 0px;
					display: block; width: 4px; height: 4px;
					@include border-radius(50%);
				}
				& + li { margin-top: 2px; }
			}
		}
	}

	&.short-footer {
		.footer-sub,
		.footer__container-links, .footer__container-contacts,
		.footer__container-addmenu,
		.footer__container-pay,
		.footer__container-delivery { display: none; }
		.footer__copyright-container {
			margin-top: 16px;
		}
	}
}

.alv-bttn-track {
	border: 2px solid #FFC20E;
	display: inline-block;
	padding: 4px 12px 5px 8px;
	.icon { position: relative; z-index: 5; }

	&:hover {}
}

.aligner {
	width: 1010px;
	margin: 0 auto;
}
.jumbotron {
	background: $color_gray_20;
	position: relative;
	&.min-h-120 { min-height: 120px; }

	.jumbotron__bg {
		background-repeat: no-repeat;
		background-position: 50% 50%;
		background-size: cover;
		position: absolute; top: 0; bottom: 0; left: 0; right: 0;
		z-index: 1;
	}
	.jumbotron__body {
		position: relative;
		z-index: 5;
		padding: 24px;
		.title {
			margin: 0;
			font-size: 22px;
			font-weight: bold;
			line-height: 1.5;
		}
		.jumbotron-highlight {
			background: #FFC20E;
			//background: rgba(0,0,0,0.85);
			padding: 1px 12px 4px;
			color: $color_black;
		}
	}
}

.alp-navbar__info {
	.navbar-dropdown {
		display: flex;
		position: relative;
		.navbar-dropdown__box {
			position: absolute; top: 100%; left: 50%;
			width: 512px;
			margin-left: -256px;
			display: none;
		}
		.navbar-dropdown__head {
			position: relative; z-index: 2;
			height: 16px;
			overflow: hidden;
			&:before {
				content: '';
				background: $color_white;
				position: absolute; top: 6px; left: 50%;
				display: block; width: 20px; height: 20px;
				margin-left: -10px;
				@include transform(rotate(45deg));
				@include box-shadow(0 0 3px $color_gray_60);
			}
		}
		.navbar-dropdown__body {
			background: $color_white;
			position: relative; z-index: 1;
			@include box-shadow(0 0 3px $color_gray_60);
			overflow-y: auto;
			//max-height: 500px;
		}
		&.opened {
			.navbar-dropdown__box {
				display: block;
			}
		}
	}
}

.b-trouble {
	/*a {
		display: inline !important;
		margin: 0px !important;
		padding: 0px !important;
		color: $color_gray_80;
		&:hover {
			color: $color_blue;
		}
	}*/
	.b-trouble__row {
		position: relative;
		//overflow: hidden;
		display: flex;
		align-items: flex-end;
		padding: 12px 16px 12px 12px;
		.b-trouble__col {
			//align-self: center;
			&.total {
				//width: 32px;
				min-width: 40px;
				margin-right: 12px;
				text-align: right;
			}
			&.img {
				position: relative;
				width: 40px;
				min-width: 40px;
				margin-right: 16px;
				.crown {
					position: absolute; top: -12px; left: 0; right: 0;
					display: block;
					height: 16px;
					img {
						display: block;
						height: 16px;
						margin: 0 auto;
					}
				}
				a {
					display: block;
					width: auto !important;
					height: auto !important;
					margin: 0 !important;
					padding: 0 !important;
					img {
						display: block;
						width: 40px;
						@include border-radius(50%);
					}
				}
			}
			&.user {
				flex-grow: 1;
				min-width: 0;
				.name {
					position: relative;
					overflow: hidden;
					display: block;
					width: 100%;
					white-space: nowrap;
					text-overflow: ellipsis;
					.highlight {
						background: lighten($color_blue, 54%);
						padding: 2px 0;
						color: $color_blue;
					}
				}
			}
			&.count {
				min-width: 56px;
				text-align: right;
			}
		}
	}
	.b-trouble__head {
		border-bottom: 1px solid $color_gray_20;
		padding-top: 16px;
		padding-bottom: 8px;
		.b-trouble__row {
			padding-top: 4px;
			padding-bottom: 4px;
			align-items: flex-end;
		}
		.labl {
			display: inline-block;
			span, .a {
				display: block;
				padding: 0 4px 2px 4px;
				font-size: 9px;
				font-weight: bold;
				color: #9B9B9B;
			}
			.b {}
			a:hover {
				color: $color_blue;
			}
		}
	}
	.b-trouble__body {
		background: #E9F0F6;
		.b-trouble__row {
			min-height: 40px;
			& + .b-trouble__row {
				&:before {
					content: '';
					background: $color_gray_20;
					position: absolute; top: 0; left: 112px; right: 0;
					height: 1px;
				}
			}
			&:hover {
				background: #D9E9F7;
			}
		}
	}

	.badge {
		&.badge-transparent { background: none; color: inherit; }
		&.badge-success { background: $color_dark_green; }
	}
	a.badge {
		position: relative !important;
		display: inline-block !important;
		height: auto !important;
		margin: 0px !important;
		padding: 2px 4px !important;
		&.badge-transparent {
			&:hover { color: $color_blue; }
			&.opacity-50 {
				&:hover { opacity: 1; }
			}
		}
		&.badge-danger {
			&:hover {
				background: lighten($color_red, 20%);
			}
		}
	}
}

.widget-similar-products {
	.wsp__head {
		margin-bottom: 16px;
		font-size: 24px;
		line-height: 1.5;
	}
	.wsp__body {}
	.wsp__row {
		position: relative;
		margin-left: -8px;
		margin-right: -8px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		&:before, &:after { content: " "; display: table; }
		&:after { clear: both; }
		.wsp__col {
			float: left;
			width: 20%;
			padding-left: 8px;
			padding-right: 8px;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
		}
	}
	.wsp__item {
		border: 1px solid $color_gray_10;
		position: relative;
		min-height: 265px;
		padding: 8px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		@include transition(all .15s ease-in-out 0s);
		.wsp__img {
			background: #fff;
			position: relative;
			.block { display: block; width: 100%; }
			.pic {
				position: absolute; top: 50%; left: 50%;
				display: block; width: auto; height: auto;
				max-width: 100%;
				max-height: 100%;
				@include transform(translateX(-50%) translateY(-50%));
			}
		}
		.wsp__title {
			position: relative;
			overflow: hidden;
			max-height: 32px;
			margin-top: 8px;
			font-size: 13px;
			line-height: 16px;
			color: #7F7F7F;
			a { color: #7F7F7F; }
			strong { color: $color_black; }
		}
		.wsp__description {
			position: relative;
			overflow: hidden;
			max-height: 32px;
			margin-top: 8px;
			font-size: 12px;
			line-height: 16px;
			text-transform: uppercase;
		}
		&:hover {
			background: #dde4ec;
			border-color: #dde4ec;
		}
	}
}

.widget-preview-products {
	position: relative;
	overflow: hidden;
	margin: 0 -28px 32px -24px;
	padding: 0;
	list-style: none;

	* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

	& > li {
		display: block;
		float: left;
		width: 33.3333%;
		padding: 0 4px 8px 4px;
	}

	.wpp-item {
		position: relative;
		border: 1px solid $color_gray_20;
		height: 46px;
		white-space: nowrap;
		@include transition(all .15s ease-in-out 0s);
		.wpp-item__img {
			position: relative;
			display: block;
			float: left;
			width: 75px;
			height: 40px;
			margin: 2px 4px;
			img {
				position: absolute; top: 50%; left: 50%;
				display: block; max-width: 100%; max-height: 100%;
				@include transform(translateX(-50%) translateY(-50%));
			}
		}
		.wpp-item__txt {
			position: relative;
			overflow: hidden;
			margin-left: 90px;
			margin-right: 4px;
			font-size: 14px;
			line-height: 42px;
			text-overflow: ellipsis;
		}
		&:hover {
			background: #dde4ec;
			border-color: #dde4ec;
		}
	}
}

.opacity-50 { opacity: 0.5; }

.content-separator {
	height: 128px;
	@media (max-width: 767px) { height: 196px; }
}

#dev {
	background: $color_red;
	position: fixed; top: 0; right: 0; z-index: 9999;
	padding: 24px 48px;
	color: $color_white;
}

//countdown
.countdown {
	.countdown__head {}
	.countdown__body {
		white-space: nowrap;
		.countdown__timer {
			margin: 0; padding: 0; list-style: none;
			li {
				display: inline-block;
				vertical-align: top;
				&.countdown__divider {}
				.countdown__digit {
					span {}
				}
				.countdown__label {}
			}
		}
	}
	&.countdown-flip {
		display: inline-block;
		.countdown__head {
			margin-bottom: 4px;
		}
		.countdown__body {
			.countdown__timer {
				li {
					&.countdown__divider {
						position: relative;
						width: 12px;
						height: 38px;

						animation: flicker 1s ease-in-out infinite;
						-webkit-animation: flicker 1s ease-in-out infinite;
						@keyframes flicker {
							0% { opacity: 1; }
							90% { opacity: 0.25; }
							100% { opacity: 1; }
						}
						@-webkit-keyframes flicker {
							0% { opacity: 1; }
							90% { opacity: 0.25; }
							100% { opacity: 1; }
						}

						&:after, &:before {
							content: '';
							background: $color_gray_80;
							position: absolute; top: 10px; left: 50%;
							display: block; width: 4px; height: 4px;
							margin-left: -2px;
							@include border-radius(50%);
						}
						&:before {
							top: auto;
							bottom: 10px;
						}
						/*.color-white & {
							&:after, &:before { background: $color_white; }
						}*/
					}
					.countdown__digit {
						span {
							background: $color_white;
							display: inline-block;
							vertical-align: top;
							width: 24px;
							height: 36px;
							font-size: 24px;
							line-height: 34px;
							color: $color_gray_80;
							text-align: center;
							@include border-radius(3px);
							box-shadow: 0 0 5px $color_gray_60;
							& + span { margin-left: 4px; }
						}
					}
					.countdown__label {
						padding-top: 2px;
						font-size: 10px;
						text-align: center;
					}

					&.countdown__seconds {
						.countdown__digit {
							span {
								animation: blink 1s ease-in-out infinite;
								-webkit-animation: blink 1s ease-in-out infinite;
								@keyframes blink {
									0% { box-shadow: 0 0 5px $color_gray_60; }
									15% { box-shadow: 0 0 10px $color_yellow; }
									50% { box-shadow: 0 0 5px $color_gray_60; }
								}
								@-webkit-keyframes blink {
									0% { box-shadow: 0 0 5px $color_gray_60; }
									15% { box-shadow: 0 0 10px $color_yellow; }
									50% { box-shadow: 0 0 5px $color_gray_60; }
								}
							}
						}
					}
				}
			}
		}
		/*&.countdown_warning {
			.countdown__body {
				.countdown__timer {
					li {
						&.countdown__divider {}
						.countdown__digit {
							span {
								background: $color_yellow;
							}
						}
						.countdown__label {}
					}
				}
			}
		}
		&.countdown_danger {
			.countdown__body {
				.countdown__timer {
					li {
						&.countdown__divider {}
						.countdown__digit {
							span {
								background: #FD8888;
							}
						}
						.countdown__label {}
					}
				}
			}
		}*/
		&.countdown_finite {
			opacity: 0.5;
			.countdown__body {
				.countdown__timer {
					li {
						&.countdown__divider {
							animation: none;
							-webkit-animation: none;
						}
						.countdown__digit {
							span {
								animation: none;
								-webkit-animation: none;
							}
						}
						.countdown__label {}
					}
				}
			}
		}

		&.divider-white {
			.countdown__body {
				.countdown__timer {
					li {
						&.countdown__divider {
							&:after, &:before {
								background: $color_white;
							}
						}
						.countdown__digit {}
						.countdown__label {}
					}
				}
			}
		}

		&.all-white {
			.countdown__body {
				.countdown__timer {
					li {
						&.countdown__divider {
							&:after, &:before {
								background: $color_white;
							}
						}
						.countdown__digit {}
						.countdown__label {
							background: $color_white;
							margin-top: 4px;
							padding: 1px 0 2px;
							font-size: 10px;
							line-height: 12px;
							color: $color_black;
							@include border-radius(3px);
						}
					}
				}
			}
		}
	}
}

.list-autobrands {
	margin: 0; padding: 0; list-style: none;
	li {
		& + li {
			margin-top: 10px;
			@media (max-width: 449px) {
				margin-top: 15px !important;
			}
		}
	}
	.icon {
		padding-left: 34px !important;
		@media (min-width: 768px) {
			font-size: 18px;
			line-height: 1.5;
		}
		white-space: nowrap;
	}
}



/*.w-callback {
	background: #00A6BB;
	position: fixed; bottom: 0; right: -350px; z-index: 9999;
	width: 350px;
	color: $color_white;
	opacity: 1;
	@include transition(all .25s ease-in-out 0s);
	@include border-radius(5px 0 0 0);

	&.full {
		right: -100%;
		width: 100%;
		@include border-radius(0 !important);
	}

	.w-callback__cross {
		background: #00718e;
		position: absolute; top: 0px; right: 100%;
		margin-right: 4px;
		z-index: 75;
		display: block; width: 20px; height: 20px;
		@include border-radius(50%);
		@include transition(all .25s ease-in-out 0s);
		&:before, &:after {
			content: '';
			background: $color_white;
			position: absolute; top: 50%; left: 50%;
			display: block; width: 60%; height: 2px;
			@include transform(translateX(-50%) translateY(-50%) rotate(45deg));
		}
		&:after { @include transform(translateX(-50%) translateY(-50%) rotate(-45deg)); }
		&:hover {
			background: #00638e;
		}
	}
	.w-callback__button {
		background: #00A6BB;
		border: 1px solid #00A6BB;
		position: absolute; bottom: 8px; left: -68px;
		display: block; width: 60px; height: 60px;
		color: $color_white;
		@include border-radius(50%);
		@include box-shadow(0 0 3px #00A6BB);
		@include transition(all .25s ease-in-out 0s);
		svg {
			position: absolute; top: 50%; left: 50%;
			display: block; width: 28px; height: 28px;
			@include transform(translateX(-50%) translateY(-50%));
		}
		&:hover { cursor: pointer; }
	}
	.w-callback__body {
		padding: 18px 24px 18px 120px;
		font-size: 14px;
		font-weight: bold;
		.title { font-size: 16px; }
		.big {
			padding: 8px 8px 8px 30px;
			font-size: 48px;
			text-transform: uppercase;
		}
	}

	&.active {
		right: 0;
		.w-callback__cross { top: 4px; right: 4px; margin-right: 0; }
		.w-callback__button {
			background: $color_white;
			color: #00A6BB;
			left: 12px;
			bottom: 24px;
			//width: 60px; height: 60px;
			svg { width: 28px; height: 28px; }
		}
	}
}*/

.w-callback {
	background: #00A6BB;
	position: fixed; bottom: 0; right: -100%; z-index: 9999;
	width: 100%;
	color: $color_white;
	opacity: 1;
	@include transition(all .25s ease-in-out 0s);

	.w-callback__cross {
		background: #00718e;
		position: absolute; top: auto; bottom: 80px; right: 100%;
		margin-right: 10px;
		z-index: 75;
		display: block; width: 28px; height: 28px;
		@include border-radius(50%);
		&:before, &:after {
			content: '';
			background: $color_white;
			position: absolute; top: 50%; left: 50%;
			display: block; width: 60%; height: 2px;
			@include transform(translateX(-50%) translateY(-50%) rotate(45deg));
		}
		&:after { @include transform(translateX(-50%) translateY(-50%) rotate(-45deg)); }
		&:hover {
			background: #00638e;
		}
	}

	.w-callback__button {
		background: #00A6BB;
		border: 1px solid #00A6BB;
		position: absolute; bottom: 8px; left: -110px;
		display: block; width: 100px; height: 100px;
		color: $color_white;
		@include border-radius(50%);
		//@include box-shadow(0 0 3px #00A6BB);
		@include transition(all .25s ease-in-out 0s);
		svg {
			position: absolute; top: 50%; left: 50%;
			display: block; width: 48px; height: 48px;
			@include transform(translateX(-50%) translateY(-50%));
		}
		&:hover { cursor: pointer; }
	}

	.w-callback__body {
		//position: relative;
		padding: 18px 48px;
		font-size: 48px;
		font-weight: bold;
		text-transform: uppercase;
		.pull-left {
			padding-right: 36px;
			.button {
				background: $color_white;
				position: relative;
				display: inline-block;
				width: 100px; height: 100px;
				margin-top: 14px;
				color: #00A6BB;
				@include border-radius(50%);
				svg {
					position: absolute; top: 50%; left: 50%;
					display: block; width: 48px; height: 48px;
					@include transform(translateX(-50%) translateY(-50%));
				}
			}
		}
		.pull-body {
			position: relative;
			overflow: hidden;
		}
	}

	&.active {
		right: 0;
		.w-callback__cross {
			top: 16px;
			right: 16px;
			width: 48px; height: 48px;
			margin-right: 0;
		}
		/*.w-callback__button {
			background: $color_white;
			color: #00A6BB;
			left: 12px;
			bottom: 24px;
			//width: 60px; height: 60px;
			svg { width: 28px; height: 28px; }
		}*/
	}
}

.page_container {
	position: relative;
	z-index: 1;
}
.wrapper-bg {
	//background-color: #EBEFF2;
	background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
	position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1;
	display: block; width: 100%; height: 100%;
	overflow: hidden;
	.wrapper-bg__left {
		background-repeat: no-repeat;
		background-position: top right;
		position: absolute; top: 0; bottom: 0; right: 50%;
		display: block; width: 50%;
		margin-right: 505px;
	}
	.wrapper-bg__right {
		background-repeat: no-repeat;
		background-position: 0 0;
		position: absolute; top: 0; bottom: 0; left: 50%;
		display: block; width: 50%;
		margin-left: 505px;
	}
}